feat(web): IndexedDB v2 migration; show seed and reuse button on history rows

web/src/components/HistoryList.tsx

@@ -4,13 +4,14 @@ import { listHistory, type HistoryRecord } from "@/lib/idb";
 type Props = {
   refreshKey?: number;
   onRegenerate: (h: HistoryRecord) => void;
+  onReuseSeed?: (seed: number) => void;
 };
 
 function fmtTime(ts: number): string {
   return new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
 }
 
-export default function HistoryList({ refreshKey, onRegenerate }: Props) {
+export default function HistoryList({ refreshKey, onRegenerate, onReuseSeed }: Props) {
   const [items, setItems] = useState<HistoryRecord[]>([]);
   useEffect(() => {
     listHistory().then(setItems);
@@ -28,33 +29,49 @@ export default function HistoryList({ refreshKey, onRegenerate }: Props) {
     <ul className="space-y-3">
       {items.map((h, i) => {
         const url = URL.createObjectURL(h.audioBlob);
+        const kindLabel =
+          h.kind === "dialog"
+            ? `dialog · ${(h.speakers ?? []).length} spk · ${h.modelId.replace("chatterbox-", "")}`
+            : `${h.modelId.replace("chatterbox-", "")} · ${h.language ?? "—"}`;
         return (
           <li key={h.id} className="card-paper p-3 space-y-2.5">
             <div className="flex items-baseline justify-between gap-3">
               <span className="marker-num">
                 {String(items.length - i).padStart(2, "0")}
               </span>
-              <span className="label-mono">
-                {h.modelId.replace("chatterbox-", "")} · {h.language ?? "—"} · {fmtTime(h.createdAt)}
-              </span>
+              <span className="label-mono">{kindLabel} · {fmtTime(h.createdAt)}</span>
             </div>
             <p className="text-[13px] leading-snug line-clamp-3">{h.text}</p>
             <audio controls src={url} className="w-full h-9" />
-            <div className="flex justify-end gap-3">
-              <a
-                href={url}
-                download={`${h.id}.wav`}
-                className="label-mono hover:text-foreground transition-colors"
-              >
-                ↓ download
-              </a>
-              <button
-                type="button"
-                className="label-mono hover:text-[hsl(var(--ember))] transition-colors"
-                onClick={() => onRegenerate(h)}
-              >
-                ↻ regenerate
-              </button>
+            <div className="flex items-center justify-between">
+              {h.seedUsed != null ? (
+                <button
+                  type="button"
+                  onClick={() => onReuseSeed?.(h.seedUsed!)}
+                  className="label-mono hover:text-[hsl(var(--ember))] transition-colors"
+                  title="Copy this seed into the active params"
+                >
+                  seed {h.seedUsed} · ↻
+                </button>
+              ) : (
+                <span className="label-mono text-muted-foreground/60">no seed</span>
+              )}
+              <div className="flex gap-3">
+                <a
+                  href={url}
+                  download={`${h.id}.wav`}
+                  className="label-mono hover:text-foreground transition-colors"
+                >
+                  ↓ download
+                </a>
+                <button
+                  type="button"
+                  className="label-mono hover:text-[hsl(var(--ember))] transition-colors"
+                  onClick={() => onRegenerate(h)}
+                >
+                  ↻ regenerate
+                </button>
+              </div>
             </div>
           </li>
         );

web/src/lib/api.ts

@@ -57,7 +57,12 @@ export type GenerateInput = {
   reference?: Blob;
 };
 
-export async function generate(input: GenerateInput): Promise<Blob> {
+export type GenerateResult = {
+  blob: Blob;
+  seedUsed: number | null;
+};
+
+export async function generate(input: GenerateInput): Promise<GenerateResult> {
   const fd = new FormData();
   fd.set("text", input.text);
   fd.set("model_id", input.modelId);
@@ -71,7 +76,10 @@ export async function generate(input: GenerateInput): Promise<Blob> {
     const msg = err?.error?.message;
     throw new Error(msg ? `${code}: ${msg}` : code);
   }
-  return r.blob();
+  const seedHeader = r.headers.get("x-seed-used");
+  const seedUsed = seedHeader != null ? Number(seedHeader) : null;
+  const blob = await r.blob();
+  return { blob, seedUsed };
 }
 
 export function streamActiveEvents(

web/src/lib/idb.ts

@@ -12,6 +12,8 @@ export type VoiceRecord = {
   isFavorite: boolean;
 };
 
+export type SpeakerRef = { letter: "A" | "B" | "C" | "D"; voiceId: number };
+
 export type HistoryRecord = {
   id?: number;
   text: string;
@@ -21,6 +23,9 @@ export type HistoryRecord = {
   params: Record<string, unknown>;
   audioBlob: Blob;
   createdAt: number;
+  kind?: "single" | "dialog";
+  seedUsed?: number;
+  speakers?: SpeakerRef[];
 };
 
 class DB extends Dexie {
@@ -33,6 +38,15 @@ class DB extends Dexie {
       voices: "++id, name, createdAt, isFavorite",
       history: "++id, createdAt",
     });
+    this.version(2).stores({
+      voices: "++id, name, createdAt, isFavorite",
+      history: "++id, createdAt",
+    }).upgrade(async (tx) => {
+      // Backfill new fields on existing rows so listings stay consistent.
+      await tx.table("history").toCollection().modify((r: HistoryRecord) => {
+        if (!r.kind) r.kind = "single";
+      });
+    });
   }
 }
 

web/src/pages/Studio.tsx

@@ -103,7 +103,7 @@ export default function Studio() {
       const inputText = reuse?.text ?? text;
       const inputLang = reuse?.language ?? language;
       const inputParams = reuse?.params ?? params;
-      const out = await generate({
+      const result = await generate({
         modelId: active.id,
         text: inputText,
         language: inputLang,
@@ -112,7 +112,7 @@ export default function Studio() {
       });
       setOutputUrl((u) => {
         if (u) URL.revokeObjectURL(u);
-        return URL.createObjectURL(out);
+        return URL.createObjectURL(result.blob);
       });
       await addHistory({
         text: inputText,
@@ -120,7 +120,9 @@ export default function Studio() {
         voiceId: selectedVoice?.id,
         language: inputLang,
         params: inputParams,
-        audioBlob: out,
+        audioBlob: result.blob,
+        kind: "single",
+        seedUsed: result.seedUsed ?? undefined,
       });
       setHistoryKey((k) => k + 1);
     } catch (e) {
@@ -275,7 +277,11 @@ export default function Studio() {
               refreshKey={libraryKey}
             />
           ) : (
-            <HistoryList refreshKey={historyKey} onRegenerate={onGenerate} />
+            <HistoryList
+              refreshKey={historyKey}
+              onRegenerate={onGenerate}
+              onReuseSeed={(seed) => setParams((p) => ({ ...p, seed }))}
+            />
           )}
         </aside>
       </main>

web/src/test/api.test.ts

@@ -37,22 +37,20 @@ describe("api", () => {
     );
   });
 
-  it("generate posts multipart and returns response blob", async () => {
-    fetchMock.mockResolvedValue(new Response("RIFFFAKE", { status: 200 }));
-    const out = await generate({
-      modelId: "x",
-      text: "hi",
-      params: {},
-    });
-    expect(typeof out.size).toBe("number");
+  it("generate posts multipart and returns response blob with seed", async () => {
+    fetchMock.mockResolvedValue(
+      new Response("RIFFFAKE", {
+        status: 200,
+        headers: { "X-Seed-Used": "777" },
+      }),
+    );
+    const out = await generate({ modelId: "x", text: "hi", params: {} });
+    expect(typeof out.blob.size).toBe("number");
+    expect(out.seedUsed).toBe(777);
     expect(fetchMock).toHaveBeenCalledWith(
       "/api/generate",
       expect.objectContaining({ method: "POST" }),
     );
-    const call = fetchMock.mock.calls[0];
-    const body = call[1].body as FormData;
-    expect(body.get("text")).toBe("hi");
-    expect(body.get("model_id")).toBe("x");
   });
 
   it("generate surfaces error JSON on 4xx", async () => {

web/src/test/idb.test.ts

@@ -55,3 +55,45 @@ describe("history", () => {
     expect(items[0].text).toBe(`t${HISTORY_CAP + 4}`);
   });
 });
+
+describe("history v2", () => {
+  it("stores seedUsed and kind on a row", async () => {
+    const id = await addHistory({
+      text: "x",
+      modelId: "m",
+      voiceId: undefined,
+      language: undefined,
+      params: {},
+      audioBlob: new Blob([""]),
+      kind: "single",
+      seedUsed: 12345,
+    });
+    const items = await listHistory();
+    const item = items.find((h) => h.id === id)!;
+    expect(item.seedUsed).toBe(12345);
+    expect(item.kind).toBe("single");
+  });
+
+  it("stores speakers list on a dialog row", async () => {
+    const id = await addHistory({
+      text: "SPEAKER A: hi",
+      modelId: "m",
+      voiceId: undefined,
+      language: undefined,
+      params: {},
+      audioBlob: new Blob([""]),
+      kind: "dialog",
+      seedUsed: 7,
+      speakers: [
+        { letter: "A", voiceId: 1 },
+        { letter: "B", voiceId: 2 },
+      ],
+    });
+    const items = await listHistory();
+    const item = items.find((h) => h.id === id)!;
+    expect(item.speakers).toEqual([
+      { letter: "A", voiceId: 1 },
+      { letter: "B", voiceId: 2 },
+    ]);
+  });
+});