feat(web): ProgressBar — determinate (Dialog) and indeterminate (Single)

web/src/components/ProgressBar.tsx

@@ -0,0 +1,58 @@
+import { useProgress } from "@/lib/progress";
+
+function fmt(s: number): string {
+  const m = Math.floor(s / 60);
+  const sec = Math.floor(s % 60);
+  return `${m}:${sec.toString().padStart(2, "0")}`;
+}
+
+export default function ProgressBar() {
+  const state = useProgress();
+  if (state.phase === "idle") return null;
+
+  if (state.phase === "error") {
+    return (
+      <div className="border-b border-red-900/40 bg-red-950/30 px-8 py-2.5">
+        <span className="label-mono text-red-400">progress error</span>
+        <span className="ml-3 text-sm text-red-300/90">{state.message}</span>
+      </div>
+    );
+  }
+
+  const isRunning = state.phase === "running";
+  const isDialog = isRunning && state.kind === "dialog";
+  const fill =
+    state.phase === "done"
+      ? 1
+      : isDialog && state.total > 0
+      ? state.turn / state.total
+      : null;
+
+  const elapsedS = state.phase === "running" ? state.elapsedS : state.phase === "done" ? state.elapsedS : 0;
+  const label =
+    state.phase === "done"
+      ? `done · ${fmt(elapsedS)}`
+      : isDialog
+      ? `Turn ${state.turn} of ${state.total} · ${fmt(elapsedS)}`
+      : `Generating · ${fmt(elapsedS)}`;
+
+  return (
+    <div className="border-b border-[hsl(var(--ember))]/30 bg-[hsl(var(--ember))]/10 px-8 py-2">
+      <div className="flex items-center gap-4">
+        <span className="label-mono text-[hsl(var(--ember))] whitespace-nowrap">
+          {label}
+        </span>
+        <div className="flex-1 h-1 bg-[hsl(var(--ember))]/20 rounded-sm overflow-hidden">
+          {fill === null ? (
+            <div className="h-full w-1/3 bg-[hsl(var(--ember))] animate-progress-stripe" />
+          ) : (
+            <div
+              className="h-full bg-[hsl(var(--ember))] transition-[width] duration-200 ease-linear"
+              style={{ width: `${fill * 100}%` }}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/pages/Studio.tsx

@@ -16,6 +16,7 @@ import LoadingBanner from "@/components/LoadingBanner";
 import ModelPicker from "@/components/ModelPicker";
 import ModeToggle, { type Mode } from "@/components/ModeToggle";
 import ParamsPanel from "@/components/ParamsPanel";
+import ProgressBar from "@/components/ProgressBar";
 import TagBar from "@/components/TagBar";
 import VoiceComposer from "@/components/VoiceComposer";
 import VoiceLibrary from "@/components/VoiceLibrary";
@@ -203,6 +204,7 @@ export default function Studio() {
         visible={loadingModel}
         message="Loading model — first activation can take 30–60s"
       />
+      <ProgressBar />
       {err && (
         <div className="border-b border-red-900/40 bg-red-950/30 px-8 py-2.5">
           <span className="label-mono text-red-400">error</span>