feat(web): UI components — ParamsPanel, TagBar, ModelPicker, DeviceBadge, VoiceLibrary, HistoryList, VoiceComposer

web/src/components/DeviceBadge.tsx

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+export default function DeviceBadge() {
+  const [device, setDevice] = useState<string>("?");
+  useEffect(() => {
+    fetch("/api/health")
+      .then((r) => r.json())
+      .then((d) => setDevice(d.device))
+      .catch(() => setDevice("offline"));
+  }, []);
+  return (
+    <span className="text-xs px-2 py-0.5 rounded-md border border-border text-muted-foreground">
+      {device}
+    </span>
+  );
+}

web/src/components/HistoryList.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { listHistory, type HistoryRecord } from "@/lib/idb";
+
+type Props = {
+  refreshKey?: number;
+  onRegenerate: (h: HistoryRecord) => void;
+};
+
+export default function HistoryList({ refreshKey, onRegenerate }: Props) {
+  const [items, setItems] = useState<HistoryRecord[]>([]);
+  useEffect(() => {
+    listHistory().then(setItems);
+  }, [refreshKey]);
+
+  if (items.length === 0) {
+    return <p className="text-sm text-muted-foreground">No generations yet.</p>;
+  }
+
+  return (
+    <ul className="space-y-2">
+      {items.map((h) => {
+        const url = URL.createObjectURL(h.audioBlob);
+        return (
+          <li key={h.id} className="rounded-md border border-border p-2 space-y-2">
+            <div className="text-sm line-clamp-2">{h.text}</div>
+            <div className="text-xs text-muted-foreground">
+              {h.modelId} · {h.language ?? "—"} · {new Date(h.createdAt).toLocaleTimeString()}
+            </div>
+            <audio controls src={url} className="w-full" />
+            <div className="flex justify-end gap-2">
+              <a href={url} download={`${h.id}.wav`} className="text-xs underline">download</a>
+              <button type="button" className="text-xs underline" onClick={() => onRegenerate(h)}>
+                regenerate
+              </button>
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

web/src/components/ModelPicker.tsx

@@ -0,0 +1,29 @@
+import type { ModelInfo } from "@/lib/api";
+
+type Props = {
+  models: ModelInfo[];
+  activeId: string | null;
+  loading: boolean;
+  onPick: (id: string) => void;
+};
+
+export default function ModelPicker({ models, activeId, loading, onPick }: Props) {
+  return (
+    <select
+      aria-label="Model"
+      disabled={loading || models.length === 0}
+      value={activeId ?? ""}
+      onChange={(e) => onPick(e.target.value)}
+      className="rounded-md border border-border bg-background px-2 py-1 text-sm"
+    >
+      <option value="" disabled>
+        Choose model…
+      </option>
+      {models.map((m) => (
+        <option key={m.id} value={m.id}>
+          {m.label}
+        </option>
+      ))}
+    </select>
+  );
+}

web/src/components/ParamsPanel.tsx

@@ -0,0 +1,70 @@
+import type { ParamSpec } from "@/lib/api";
+
+type Props = {
+  specs: ParamSpec[];
+  values: Record<string, unknown>;
+  onChange: (next: Record<string, unknown>) => void;
+};
+
+export default function ParamsPanel({ specs, values, onChange }: Props) {
+  function set(name: string, v: unknown) {
+    onChange({ ...values, [name]: v });
+  }
+  return (
+    <div className="space-y-4">
+      {specs.map((s) => {
+        const id = `param-${s.name}`;
+        const current = (values[s.name] ?? s.default) as never;
+        if (s.type === "float" || s.type === "int") {
+          return (
+            <label key={s.name} htmlFor={id} className="block space-y-1">
+              <span className="text-sm">{s.label}</span>
+              <input
+                id={id}
+                aria-label={s.label}
+                type="range"
+                min={s.min}
+                max={s.max}
+                step={s.step ?? 0.01}
+                value={current as number}
+                onChange={(e) => set(s.name, Number(e.target.value))}
+                className="w-full"
+              />
+              <span className="text-xs text-muted-foreground">{String(current)}</span>
+            </label>
+          );
+        }
+        if (s.type === "bool") {
+          return (
+            <label key={s.name} htmlFor={id} className="flex items-center justify-between text-sm">
+              <span>{s.label}</span>
+              <input
+                id={id}
+                aria-label={s.label}
+                type="checkbox"
+                checked={!!current}
+                onChange={(e) => set(s.name, e.target.checked)}
+              />
+            </label>
+          );
+        }
+        return (
+          <label key={s.name} htmlFor={id} className="block space-y-1">
+            <span className="text-sm">{s.label}</span>
+            <select
+              id={id}
+              aria-label={s.label}
+              value={current as string}
+              onChange={(e) => set(s.name, e.target.value)}
+              className="w-full rounded-md border border-border bg-background px-2 py-1"
+            >
+              {(s.choices ?? []).map((c) => (
+                <option key={c} value={c}>{c}</option>
+              ))}
+            </select>
+          </label>
+        );
+      })}
+    </div>
+  );
+}

web/src/components/TagBar.tsx

@@ -0,0 +1,41 @@
+import type { RefObject } from "react";
+
+type Props = {
+  tags: string[];
+  targetRef: RefObject<HTMLTextAreaElement>;
+};
+
+export default function TagBar({ tags, targetRef }: Props) {
+  if (tags.length === 0) return null;
+  function insert(tag: string) {
+    const el = targetRef.current;
+    if (!el) return;
+    const start = el.selectionStart ?? el.value.length;
+    const end = el.selectionEnd ?? start;
+    const before = el.value.slice(0, start);
+    const after = el.value.slice(end);
+    const native = Object.getOwnPropertyDescriptor(
+      window.HTMLTextAreaElement.prototype,
+      "value",
+    )?.set;
+    native?.call(el, before + tag + after);
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+    const cursor = start + tag.length;
+    el.setSelectionRange(cursor, cursor);
+    el.focus();
+  }
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {tags.map((t) => (
+        <button
+          key={t}
+          type="button"
+          onClick={() => insert(t)}
+          className="text-xs px-2 py-0.5 rounded-md border border-border hover:bg-muted"
+        >
+          {t}
+        </button>
+      ))}
+    </div>
+  );
+}

web/src/components/VoiceComposer.tsx

@@ -0,0 +1,95 @@
+import { useRef, useState } from "react";
+import { Recorder } from "@/lib/audio";
+import { addVoice } from "@/lib/idb";
+
+type Props = {
+  onSaved: () => void;
+};
+
+export default function VoiceComposer({ onSaved }: Props) {
+  const fileRef = useRef<HTMLInputElement>(null);
+  const recorderRef = useRef<Recorder | null>(null);
+  const [recState, setRecState] = useState<"idle" | "recording" | "stopping" | "error">("idle");
+  const [name, setName] = useState("");
+
+  async function importBlob(blob: Blob, defaultName: string) {
+    const arr = new Uint8Array(await blob.arrayBuffer());
+    const ctx = new AudioContext();
+    const buf = await ctx.decodeAudioData(arr.buffer.slice(0));
+    await addVoice({
+      name: name || defaultName || `voice-${Date.now()}`,
+      blob,
+      sampleRate: buf.sampleRate,
+      durationMs: Math.round(buf.duration * 1000),
+    });
+    setName("");
+    onSaved();
+  }
+
+  async function onFile(e: React.ChangeEvent<HTMLInputElement>) {
+    const f = e.target.files?.[0];
+    if (!f) return;
+    await importBlob(f, f.name.replace(/\.[^.]+$/, ""));
+    e.target.value = "";
+  }
+
+  async function startRec() {
+    const r = new Recorder();
+    recorderRef.current = r;
+    try {
+      await r.start();
+      setRecState("recording");
+    } catch {
+      setRecState("error");
+    }
+  }
+
+  async function stopRec() {
+    setRecState("stopping");
+    const blob = await recorderRef.current?.stop();
+    setRecState("idle");
+    if (blob) await importBlob(blob, "recorded");
+  }
+
+  return (
+    <div className="space-y-2">
+      <input
+        type="text"
+        placeholder="Voice name (optional)"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        className="w-full rounded-md border border-border bg-background px-2 py-1 text-sm"
+      />
+      <div className="flex gap-2">
+        <button
+          type="button"
+          onClick={() => fileRef.current?.click()}
+          className="rounded-md border border-border px-3 py-1.5 text-sm"
+        >
+          Upload .wav/.mp3
+        </button>
+        <input ref={fileRef} type="file" accept="audio/*" hidden onChange={onFile} />
+        {recState === "recording" ? (
+          <button
+            type="button"
+            onClick={stopRec}
+            className="rounded-md bg-primary text-primary-foreground px-3 py-1.5 text-sm"
+          >
+            Stop &amp; save
+          </button>
+        ) : (
+          <button
+            type="button"
+            onClick={startRec}
+            className="rounded-md border border-border px-3 py-1.5 text-sm"
+          >
+            Record
+          </button>
+        )}
+      </div>
+      {recState === "error" && (
+        <p className="text-xs text-red-500">Microphone permission denied.</p>
+      )}
+    </div>
+  );
+}

web/src/components/VoiceLibrary.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import { deleteVoice, listVoices, setFavorite, type VoiceRecord } from "@/lib/idb";
+import { cn } from "@/lib/utils";
+
+type Props = {
+  selectedId?: number;
+  onSelect: (v: VoiceRecord) => void;
+  refreshKey?: number;
+};
+
+export default function VoiceLibrary({ selectedId, onSelect, refreshKey }: Props) {
+  const [voices, setVoices] = useState<VoiceRecord[]>([]);
+  useEffect(() => {
+    listVoices().then(setVoices);
+  }, [refreshKey]);
+
+  if (voices.length === 0) {
+    return <p className="text-sm text-muted-foreground">No saved voices yet.</p>;
+  }
+
+  return (
+    <ul className="space-y-2">
+      {voices.map((v) => (
+        <li
+          key={v.id}
+          className={cn(
+            "flex items-center justify-between rounded-md border border-border p-2",
+            selectedId === v.id && "ring-1 ring-primary",
+          )}
+        >
+          <button
+            className="flex-1 text-left text-sm"
+            onClick={() => onSelect(v)}
+            type="button"
+          >
+            <div className="font-medium">{v.name}</div>
+            <div className="text-xs text-muted-foreground">
+              {(v.durationMs / 1000).toFixed(1)}s · {v.sampleRate} Hz
+            </div>
+          </button>
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              aria-label={v.isFavorite ? "Unfavorite" : "Favorite"}
+              onClick={() => setFavorite(v.id!, !v.isFavorite).then(() => listVoices().then(setVoices))}
+              className="text-xs px-1"
+            >
+              {v.isFavorite ? "★" : "☆"}
+            </button>
+            <button
+              type="button"
+              aria-label="Delete"
+              onClick={() => deleteVoice(v.id!).then(() => listVoices().then(setVoices))}
+              className="text-xs px-1 text-muted-foreground"
+            >
+              ✕
+            </button>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}

web/src/test/ParamsPanel.test.tsx

@@ -0,0 +1,26 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import ParamsPanel from "@/components/ParamsPanel";
+import type { ParamSpec } from "@/lib/api";
+
+const specs: ParamSpec[] = [
+  { name: "exaggeration", label: "Exaggeration", type: "float", default: 0.5, min: 0, max: 2, step: 0.05 },
+  { name: "is_fast", label: "Fast mode", type: "bool", default: false },
+  { name: "lang", label: "Lang", type: "enum", default: "en", choices: ["en", "fr"] },
+];
+
+describe("ParamsPanel", () => {
+  it("renders one control per spec", () => {
+    render(<ParamsPanel specs={specs} values={{}} onChange={() => {}} />);
+    expect(screen.getByLabelText(/exaggeration/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/fast mode/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/^lang$/i)).toBeInTheDocument();
+  });
+
+  it("emits onChange with merged values", () => {
+    const onChange = vi.fn();
+    render(<ParamsPanel specs={specs} values={{}} onChange={onChange} />);
+    fireEvent.change(screen.getByLabelText(/exaggeration/i), { target: { value: "1.2" } });
+    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ exaggeration: 1.2 }));
+  });
+});

web/src/test/TagBar.test.tsx

@@ -0,0 +1,30 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { useRef } from "react";
+import TagBar from "@/components/TagBar";
+
+function Host({ tags }: { tags: string[] }) {
+  const ref = useRef<HTMLTextAreaElement>(null);
+  return (
+    <>
+      <textarea ref={ref} aria-label="text" defaultValue="hello world" />
+      <TagBar tags={tags} targetRef={ref} />
+    </>
+  );
+}
+
+describe("TagBar", () => {
+  it("inserts tag at cursor position", () => {
+    render(<Host tags={["[laugh]"]} />);
+    const ta = screen.getByLabelText("text") as HTMLTextAreaElement;
+    ta.focus();
+    ta.setSelectionRange(5, 5);
+    fireEvent.click(screen.getByRole("button", { name: /\[laugh\]/i }));
+    expect(ta.value).toBe("hello[laugh] world");
+  });
+
+  it("renders nothing when tags is empty", () => {
+    const { container } = render(<Host tags={[]} />);
+    expect(container.querySelectorAll("button").length).toBe(0);
+  });
+});