Claude API × ローカルファースト同期エンジンで作るオフライン対応AIノートアプリ — Replicache/IndexedDB を使った本番設計

// db/schema.ts
import Dexie, { type Table } from "dexie";
 
export interface Note {
  id: string;
  title: string;
  body: string;
  updatedAt: number;
  // Replicache が管理するフィールド
  rev: number;
}
 
export interface AICompletion {
  id: string;          // ULID で生成
  noteId: string;
  prompt: string;
  output: string | null;  // null は処理中
  status: "pending" | "running" | "completed" | "failed";
  errorMessage?: string;
  inputTokens?: number;
  outputTokens?: number;
  createdAt: number;
  completedAt?: number;
}
 
export class NotebookDB extends Dexie {
  notes!: Table<Note, string>;
  completions!: Table<AICompletion, string>;
 
  constructor() {
    super("notebook");
    this.version(1).stores({
      notes: "id, updatedAt",
      completions: "id, noteId, status, createdAt",
    });
  }
}
 
export const db = new NotebookDB();

// server/api/completions.ts
import { Hono } from "hono";
 
interface Env {
  AI_QUEUE: Queue<AIJob>;
  COMPLETIONS: KVNamespace;
}
 
interface AIJob {
  completionId: string;
  noteId: string;
  prompt: string;
  userId: string;
  idempotencyKey: string;  // 重複実行防止
}
 
const app = new Hono<{ Bindings: Env }>();
 
app.post("/completions", async (c) => {
  const body = await c.req.json<{
    completionId: string;
    noteId: string;
    prompt: string;
    idempotencyKey: string;
  }>();
  const userId = c.get("userId");
 
  // すでに同じ idempotencyKey で受け付け済みなら 200 を返してスキップ
  const existing = await c.env.COMPLETIONS.get(`idem:${body.idempotencyKey}`);
  if (existing) {
    return c.json({ status: "accepted", completionId: existing }, 200);
  }
  await c.env.COMPLETIONS.put(`idem:${body.idempotencyKey}`, body.completionId, {
    expirationTtl: 60 * 60 * 24,
  });
 
  // ジョブをキューに投入
  await c.env.AI_QUEUE.send({
    completionId: body.completionId,
    noteId: body.noteId,
    prompt: body.prompt,
    userId,
    idempotencyKey: body.idempotencyKey,
  });
 
  return c.json({ status: "accepted", completionId: body.completionId }, 202);
});
 
export default app;

// server/workers/ai-worker.ts
import Anthropic from "@anthropic-ai/sdk";
 
interface Env {
  ANTHROPIC_API_KEY: string;
  COMPLETIONS: KVNamespace;
  DB: D1Database;
}
 
export default {
  async queue(batch: MessageBatch<AIJob>, env: Env): Promise<void> {
    const client = new Anthropic({ apiKey: env.ANTHROPIC_API_KEY });
 
    for (const message of batch.messages) {
      const job = message.body;
 
      try {
        // 完了状態のレコードがあれば二重課金を防ぐ
        const existing = await env.DB.prepare(
          "SELECT status FROM completions WHERE id = ?"
        ).bind(job.completionId).first<{ status: string }>();
        if (existing?.status === "completed") {
          message.ack();
          continue;
        }
 
        await env.DB.prepare(
          "UPDATE completions SET status = ? WHERE id = ?"
        ).bind("running", job.completionId).run();
 
        const response = await client.messages.create({
          model: "claude-sonnet-4-6",
          max_tokens: 1024,
          messages: [{ role: "user", content: job.prompt }],
        });
 
        const output = response.content
          .filter((b) => b.type === "text")
          .map((b) => (b as { text: string }).text)
          .join("");
 
        await env.DB.prepare(`
          UPDATE completions
          SET status = ?, output = ?, input_tokens = ?, output_tokens = ?, completed_at = ?
          WHERE id = ?
        `).bind(
          "completed",
          output,
          response.usage.input_tokens,
          response.usage.output_tokens,
          Date.now(),
          job.completionId,
        ).run();
 
        message.ack();
      } catch (err) {
        // リトライ可能なエラーかどうかを判定
        const isRetryable =
          err instanceof Anthropic.APIError &&
          (err.status === 429 || (err.status ?? 0) >= 500);
        if (isRetryable && message.attempts < 3) {
          message.retry({ delaySeconds: 30 * Math.pow(2, message.attempts) });
        } else {
          await env.DB.prepare(
            "UPDATE completions SET status = ?, error_message = ? WHERE id = ?"
          ).bind("failed", String(err), job.completionId).run();
          message.ack();
        }
      }
    }
  },
};

// client/ai-client.ts
import { db } from "../db/schema";
import { ulid } from "ulid";
 
export async function requestCompletion(
  noteId: string,
  prompt: string,
): Promise<string> {
  const completionId = ulid();
  const idempotencyKey = await sha256(`${noteId}:${prompt}:${Date.now()}`);
 
  // ① まずローカル DB に "pending" として書き込む
  await db.completions.add({
    id: completionId,
    noteId,
    prompt,
    output: null,
    status: "pending",
    createdAt: Date.now(),
  });
 
  // ② サーバーへ投入を試みる(失敗しても OK)
  try {
    await fetch("/api/completions", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ completionId, noteId, prompt, idempotencyKey }),
    });
  } catch {
    // オフラインなら BackgroundSync 経由で再送
    await registerBackgroundSync(completionId);
  }
 
  return completionId;
}
 
async function sha256(input: string): Promise<string> {
  const buf = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(input));
  return Array.from(new Uint8Array(buf))
    .map((b) => b.toString(16).padStart(2, "0"))
    .join("");
}
 
async function registerBackgroundSync(completionId: string): Promise<void> {
  if ("serviceWorker" in navigator && "SyncManager" in window) {
    const reg = await navigator.serviceWorker.ready;
    await (reg as ServiceWorkerRegistration & { sync: { register: (tag: string) => Promise<void> } })
      .sync.register(`completion:${completionId}`);
  }
}

// sw.ts (抜粋)
self.addEventListener("sync", (event: SyncEvent) => {
  if (event.tag.startsWith("completion:")) {
    const completionId = event.tag.slice("completion:".length);
    event.waitUntil(replayCompletion(completionId));
  }
});
 
async function replayCompletion(completionId: string): Promise<void> {
  const cached = await getCachedRequestBody(completionId);
  if (!cached) return;
  const res = await fetch("/api/completions", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: cached,
  });
  if (!res.ok && res.status !== 409) {
    // 409 (idempotency conflict) は成功とみなす
    throw new Error(`replay failed: ${res.status}`);
  }
}

// client/completion-subscriber.ts
import { db } from "../db/schema";
 
export function subscribeCompletions(userId: string): () => void {
  let es: EventSource | null = null;
  let stopped = false;
 
  const connect = () => {
    if (stopped) return;
    es = new EventSource(`/api/completions/stream?userId=${userId}`);
 
    es.addEventListener("completion", async (ev) => {
      const data = JSON.parse((ev as MessageEvent).data) as {
        id: string;
        output: string;
        inputTokens: number;
        outputTokens: number;
      };
      await db.completions.update(data.id, {
        status: "completed",
        output: data.output,
        inputTokens: data.inputTokens,
        outputTokens: data.outputTokens,
        completedAt: Date.now(),
      });
    });
 
    es.addEventListener("error", () => {
      es?.close();
      // 指数バックオフで再接続
      setTimeout(connect, Math.min(30_000, 1000 * Math.pow(2, retryCount++)));
    });
  };
 
  let retryCount = 0;
  connect();
 
  return () => {
    stopped = true;
    es?.close();
  };
}

// client/replicache.ts
import { Replicache } from "replicache";
 
export const rep = new Replicache({
  name: "notebook",
  licenseKey: import.meta.env.VITE_REPLICACHE_KEY,
  pushURL: "/api/replicache/push",
  pullURL: "/api/replicache/pull",
  mutators: {
    updateNote: async (tx, args: { id: string; title: string; body: string }) => {
      await tx.set(`note/${args.id}`, {
        ...args,
        updatedAt: Date.now(),
      });
    },
    deleteNote: async (tx, args: { id: string }) => {
      await tx.del(`note/${args.id}`);
    },
    // ❌ ここに requestCompletion などを書かない
  },
});

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible" && navigator.onLine) {
    void retryPendingCompletions();
  }
});
 
async function retryPendingCompletions() {
  const pending = await db.completions
    .where("status").equals("pending")
    .toArray();
  for (const c of pending) {
    if (Date.now() - c.createdAt < 24 * 60 * 60 * 1000) {
      await retryRequest(c);
    }
  }
}

async function pruneOldCompletions(): Promise<void> {
  const cutoff = Date.now() - 30 * 24 * 60 * 60 * 1000;  // 30 日
  await db.completions
    .where("createdAt").below(cutoff)
    .and((c) => c.status === "completed")
    .delete();
}

app.post("/replicache/push", async (c) => {
  const push = await c.req.json<PushRequest>();
  const userId = c.get("userId");
 
  const lastMutationID = await getLastMutationID(userId, push.clientID);
  for (const mutation of push.mutations) {
    if (mutation.id !== lastMutationID + 1) {
      // 順序が崩れているのでスキップ(後続の pull で同期される)
      continue;
    }
    await applyMutation(userId, mutation);
    await setLastMutationID(userId, push.clientID, mutation.id);
  }
  return c.json({});
});

// server/workers/ai-worker.ts (抜粋 — ストリーミング版)
const stream = await client.messages.stream({
  model: "claude-sonnet-4-6",
  max_tokens: 1024,
  messages: [{ role: "user", content: job.prompt }],
});
 
let buffer = "";
for await (const event of stream) {
  if (event.type === "content_block_delta" && event.delta.type === "text_delta") {
    buffer += event.delta.text;
    await env.SSE_CHANNEL.send(job.userId, {
      event: "completion.partial",
      data: { id: job.completionId, output: buffer },
    });
  }
}
 
const finalMessage = await stream.finalMessage();
await persistCompleted(env.DB, job.completionId, buffer, finalMessage.usage);

// client/crypto.ts
async function encryptBody(plain: string, key: CryptoKey): Promise<string> {
  const iv = crypto.getRandomValues(new Uint8Array(12));
  const ct = await crypto.subtle.encrypt(
    { name: "AES-GCM", iv },
    key,
    new TextEncoder().encode(plain),
  );
  const combined = new Uint8Array(iv.length + ct.byteLength);
  combined.set(iv, 0);
  combined.set(new Uint8Array(ct), iv.length);
  return btoa(String.fromCharCode(...combined));
}