feat(web): Studio mode toggle wires DialogComposer + dialog generate flow

web/src/pages/Studio.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import {
   activateModel,
   generate,
+  generateDialog,
   getActiveModel,
   listModels,
   streamActiveEvents,
@@ -9,9 +10,11 @@ import {
 } from "@/lib/api";
 import { addHistory, type HistoryRecord, type VoiceRecord } from "@/lib/idb";
 import DeviceBadge from "@/components/DeviceBadge";
+import DialogComposer, { type DialogSubmit } from "@/components/DialogComposer";
 import HistoryList from "@/components/HistoryList";
 import LoadingBanner from "@/components/LoadingBanner";
 import ModelPicker from "@/components/ModelPicker";
+import ModeToggle, { type Mode } from "@/components/ModeToggle";
 import ParamsPanel from "@/components/ParamsPanel";
 import TagBar from "@/components/TagBar";
 import VoiceComposer from "@/components/VoiceComposer";
@@ -32,8 +35,10 @@ function SectionHeader({ num, title, hint }: { num: string; title: string; hint?
 }
 
 export default function Studio() {
+  const [mode, setMode] = useState<Mode>("single");
   const [models, setModels] = useState<ModelInfo[]>([]);
   const [activeId, setActiveId] = useState<string | null>(null);
+  const [dialogEngineId, setDialogEngineId] = useState<string>("chatterbox-en");
   const [loadingModel, setLoadingModel] = useState(false);
   const [tab, setTab] = useState<"voices" | "history">("voices");
   const [text, setText] = useState("");
@@ -50,7 +55,10 @@ export default function Studio() {
   useEffect(() => {
     listModels().then((m) => {
       setModels(m);
-      if (m[0]) setActiveId((cur) => cur ?? m[0].id);
+      if (m[0]) {
+        setActiveId((cur) => cur ?? m[0].id);
+        setDialogEngineId((cur) => cur || m[0].id);
+      }
     });
     getActiveModel().then((s) => setActiveId((cur) => cur ?? s.id));
   }, []);
@@ -132,22 +140,60 @@ export default function Studio() {
     }
   }
 
+  async function onDialogSubmit(input: DialogSubmit) {
+    setErr(null);
+    setBusy(true);
+    try {
+      const result = await generateDialog({
+        engineId: input.engineId,
+        text: input.text,
+        language: input.language,
+        params: input.params,
+        speakers: input.speakers.map((s) => ({
+          letter: s.letter,
+          reference: s.voice.blob,
+        })),
+      });
+      setOutputUrl((u) => {
+        if (u) URL.revokeObjectURL(u);
+        return URL.createObjectURL(result.blob);
+      });
+      await addHistory({
+        text: input.text,
+        modelId: input.engineId,
+        language: input.language,
+        params: input.params,
+        audioBlob: result.blob,
+        kind: "dialog",
+        seedUsed: result.seedUsed ?? undefined,
+        speakers: input.speakers.map((s) => ({ letter: s.letter, voiceId: s.voice.id! })),
+      });
+      setHistoryKey((k) => k + 1);
+    } catch (e) {
+      setErr((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
   return (
     <div className="min-h-screen relative-z animate-fade-up">
-      {/* Header */}
       <header className="border-b border-border">
         <div className="mx-auto max-w-[1280px] px-8 py-5 flex items-end justify-between">
           <div className="flex items-end gap-4">
             <span className="display-serif text-[34px] leading-none">Chatterbox</span>
-            <span className="label-mono pb-1">voice studio · v0.1</span>
+            <span className="label-mono pb-1">voice studio · v0.2</span>
           </div>
           <div className="flex items-center gap-6">
-            <ModelPicker
-              models={models}
-              activeId={activeId}
-              loading={loadingModel || busy}
-              onPick={pickModel}
-            />
+            <ModeToggle mode={mode} onChange={setMode} />
+            {mode === "single" && (
+              <ModelPicker
+                models={models}
+                activeId={activeId}
+                loading={loadingModel || busy}
+                onPick={pickModel}
+              />
+            )}
             <DeviceBadge />
           </div>
         </div>
@@ -165,93 +211,113 @@ export default function Studio() {
       )}
 
       <main className="mx-auto max-w-[1280px] px-8 py-10 grid lg:grid-cols-[minmax(0,1fr)_400px] gap-12">
-        {/* Composer column */}
         <section className="space-y-12">
-          {/* 01 — Voice */}
-          <div className="space-y-5">
-            <SectionHeader num="01" title="Reference voice" hint="upload, record, or pick from your library" />
-            <VoiceComposer onSaved={() => setLibraryKey((k) => k + 1)} />
-            <VoiceLibrary
-              selectedId={selectedVoice?.id}
-              onSelect={setSelectedVoice}
-              refreshKey={libraryKey}
-            />
-          </div>
+          {mode === "single" ? (
+            <>
+              <div className="space-y-5">
+                <SectionHeader num="01" title="Reference voice" hint="upload, record, or pick from your library" />
+                <VoiceComposer onSaved={() => setLibraryKey((k) => k + 1)} />
+                <VoiceLibrary
+                  selectedId={selectedVoice?.id}
+                  onSelect={setSelectedVoice}
+                  refreshKey={libraryKey}
+                />
+              </div>
+
+              <div className="space-y-4">
+                <SectionHeader num="02" title="Script" hint="what should the voice say?" />
+                {active?.languages && active.languages.length > 1 && (
+                  <div className="flex items-center gap-3">
+                    <label htmlFor="lang-select" className="label-mono">language</label>
+                    <select
+                      id="lang-select"
+                      value={language ?? ""}
+                      onChange={(e) => setLanguage(e.target.value)}
+                      className="field-input !w-auto font-mono text-[12px] py-1"
+                    >
+                      {active.languages.map((l) => (
+                        <option key={l.code} value={l.code}>{l.label}</option>
+                      ))}
+                    </select>
+                  </div>
+                )}
+                <textarea
+                  id="prompt"
+                  ref={textRef}
+                  value={text}
+                  onChange={(e) => setText(e.target.value)}
+                  rows={7}
+                  className="field-input font-display text-[18px] leading-relaxed"
+                  placeholder="Once upon a midnight dreary, while I pondered, weak and weary…"
+                />
+                <div className="flex items-center justify-between">
+                  <TagBar tags={active?.paralinguistic_tags ?? []} targetRef={textRef} />
+                  <span className="label-mono">{text.length} chars</span>
+                </div>
+              </div>
 
-          {/* 02 — Script */}
-          <div className="space-y-4">
-            <SectionHeader num="02" title="Script" hint="what should the voice say?" />
-            {active?.languages && active.languages.length > 1 && (
-              <div className="flex items-center gap-3">
-                <label htmlFor="lang-select" className="label-mono">language</label>
-                <select
-                  id="lang-select"
-                  value={language ?? ""}
-                  onChange={(e) => setLanguage(e.target.value)}
-                  className="field-input !w-auto font-mono text-[12px] py-1"
+              {active && (
+                <div className="space-y-5">
+                  <SectionHeader num="03" title="Parameters" hint={active.description} />
+                  <ParamsPanel specs={active.params} values={params} onChange={setParams} />
+                </div>
+              )}
+
+              <div className="space-y-4 pt-2">
+                <button
+                  type="button"
+                  onClick={() => onGenerate()}
+                  disabled={busy || loadingModel || !text.trim()}
+                  className="btn-primary w-full flex items-center justify-center gap-3 ember-ring"
                 >
-                  {active.languages.map((l) => (
-                    <option key={l.code} value={l.code}>{l.label}</option>
-                  ))}
-                </select>
+                  {busy ? (
+                    <>
+                      <span className="size-1.5 rounded-full bg-current animate-pulse-dot" />
+                      Generating
+                    </>
+                  ) : (
+                    <>Generate <span className="opacity-60">→</span></>
+                  )}
+                </button>
+
+                {outputUrl && (
+                  <div className="card-paper p-4 space-y-3">
+                    <div className="flex items-baseline justify-between">
+                      <span className="label-mono">latest output</span>
+                      <a href={outputUrl} download="chatterbox.wav" className="label-mono hover:text-foreground">
+                        ↓ download
+                      </a>
+                    </div>
+                    <audio controls src={outputUrl} className="w-full h-10" />
+                  </div>
+                )}
               </div>
-            )}
-            <textarea
-              id="prompt"
-              ref={textRef}
-              value={text}
-              onChange={(e) => setText(e.target.value)}
-              rows={7}
-              className="field-input font-display text-[18px] leading-relaxed"
-              placeholder="Once upon a midnight dreary, while I pondered, weak and weary…"
+            </>
+          ) : (
+            <DialogComposer
+              models={models}
+              engineId={dialogEngineId}
+              onEngineChange={setDialogEngineId}
+              onSubmit={onDialogSubmit}
+              loadingModel={loadingModel}
+              busy={busy}
+              libraryRefreshKey={libraryKey}
             />
-            <div className="flex items-center justify-between">
-              <TagBar tags={active?.paralinguistic_tags ?? []} targetRef={textRef} />
-              <span className="label-mono">{text.length} chars</span>
-            </div>
-          </div>
-
-          {/* 03 — Parameters */}
-          {active && (
-            <div className="space-y-5">
-              <SectionHeader num="03" title="Parameters" hint={active.description} />
-              <ParamsPanel specs={active.params} values={params} onChange={setParams} />
-            </div>
           )}
 
-          {/* Generate */}
-          <div className="space-y-4 pt-2">
-            <button
-              type="button"
-              onClick={() => onGenerate()}
-              disabled={busy || loadingModel || !text.trim()}
-              className="btn-primary w-full flex items-center justify-center gap-3 ember-ring"
-            >
-              {busy ? (
-                <>
-                  <span className="size-1.5 rounded-full bg-current animate-pulse-dot" />
-                  Generating
-                </>
-              ) : (
-                <>Generate <span className="opacity-60">→</span></>
-              )}
-            </button>
-
-            {outputUrl && (
-              <div className="card-paper p-4 space-y-3">
-                <div className="flex items-baseline justify-between">
-                  <span className="label-mono">latest output</span>
-                  <a href={outputUrl} download="chatterbox.wav" className="label-mono hover:text-foreground">
-                    ↓ download
-                  </a>
-                </div>
-                <audio controls src={outputUrl} className="w-full h-10" />
+          {mode === "dialog" && outputUrl && (
+            <div className="card-paper p-4 space-y-3">
+              <div className="flex items-baseline justify-between">
+                <span className="label-mono">latest output</span>
+                <a href={outputUrl} download="dialog.wav" className="label-mono hover:text-foreground">
+                  ↓ download
+                </a>
               </div>
-            )}
-          </div>
+              <audio controls src={outputUrl} className="w-full h-10" />
+            </div>
+          )}
         </section>
 
-        {/* Workspace column */}
         <aside className="space-y-5 lg:sticky lg:top-8 self-start">
           <div className="flex border-b border-border">
             {(["voices", "history"] as const).map((t) => (