@hugpy/video-intelligence-ui 0.3.2 → 0.3.4

package/src/stations/TemplateStepsPanel.tsx

@@ -0,0 +1,190 @@
+/**
+ * Template steps — the ordered task outline of a registry task-template
+ * (settings NS `task_templates`), rendered so the operator can SEE every step
+ * and CHOOSE the model for each one. This is the missing cockpit: the
+ * template existed only as API data with no screen behind Generate.
+ *
+ * Reads: GET /llm/templates (open). Saves one slot at a time via
+ * POST /llm/templates/<id>/tasks/<task> {model} (operator-gated) — a 401/403
+ * or any refusal is rendered VERBATIM on the row it belongs to; the panel
+ * itself never hides. Model options come from the assist discovery endpoint,
+ * which already excludes operator-blocked and mistagged models, so a choice
+ * made here is a choice the resolver will actually serve.
+ */
+import { useCallback, useEffect, useState } from "react";
+
+import { request, okValue, errorOf, describeAppError } from "../transport/client";
+import { hugpyConfig } from "../config";
+
+type TemplateTask = { name: string; desc: string; model: string | null };
+type TemplateRec = {
+  id: string;
+  name: string;
+  active: boolean;
+  groups: string[];
+  tasks: TemplateTask[];
+};
+
+const TEMPLATES_URL = `${hugpyConfig.apiBase}/llm/templates`;
+
+export function TemplateStepsPanel({ templateId }: { templateId?: string }) {
+  const [templates, setTemplates] = useState<TemplateRec[]>([]);
+  const [picked, setPicked] = useState<string | null>(templateId ?? null);
+  const [models, setModels] = useState<string[]>([]);
+  const [rowBusy, setRowBusy] = useState<string | null>(null);
+  const [rowError, setRowError] = useState<Record<string, string>>({});
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    const res = await request<unknown>(TEMPLATES_URL, {
+      method: "GET",
+      timeoutMs: 15_000,
+      meta: { operation: "templates.list" },
+    });
+    if (!res.ok) {
+      setLoadError(describeAppError(errorOf(res)));
+      return;
+    }
+    const value = okValue(res) as { templates?: TemplateRec[] } | null;
+    const rows = Array.isArray(value?.templates) ? value.templates : [];
+    setTemplates(rows);
+    setLoadError(null);
+    // Keep the caller's pick when it still exists; otherwise prefer the
+    // active template, then the first one. Never invent an id.
+    setPicked((cur) =>
+      cur && rows.some((t) => t.id === cur)
+        ? cur
+        : rows.find((t) => t.active)?.id ?? rows[0]?.id ?? null,
+    );
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  // Offerable generators — same feed the assist picker uses (blocked models
+  // are excluded server-side). A discovery failure leaves the dropdowns with
+  // just the current value; saving is still possible via "unset".
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      const res = await request<unknown>(hugpyConfig.promptAssistModelsUrl, {
+        method: "GET",
+        timeoutMs: 15_000,
+        meta: { operation: "templates.models" },
+      });
+      if (!alive || !res.ok) return;
+      const value = okValue(res) as { models?: { model: string }[] } | null;
+      setModels(
+        (Array.isArray(value?.models) ? value.models : []).map((m) => m.model),
+      );
+    })();
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  const tpl = templates.find((t) => t.id === picked) ?? null;
+
+  const saveSlot = useCallback(
+    async (taskName: string, model: string | null) => {
+      if (!tpl) return;
+      setRowBusy(taskName);
+      const url = `${TEMPLATES_URL}/${encodeURIComponent(
+        tpl.id,
+      )}/tasks/${encodeURIComponent(taskName)}`;
+      const res = await request<unknown>(url, {
+        method: "POST",
+        body: JSON.stringify({ model }),
+        headers: { "Content-Type": "application/json" },
+        timeoutMs: 15_000,
+        meta: { operation: "templates.fill" },
+      });
+      setRowBusy(null);
+      if (!res.ok) {
+        setRowError((e) => ({ ...e, [taskName]: describeAppError(errorOf(res)) }));
+        return;
+      }
+      setRowError((e) => {
+        const { [taskName]: _gone, ...rest } = e;
+        return rest;
+      });
+      void load();
+    },
+    [tpl, load],
+  );
+
+  return (
+    <section className="vi-script-panel">
+      <h3>
+        Template steps
+        <span className="vi-script-sub">
+          the ordered plan — every step, and the model it calls
+        </span>
+      </h3>
+
+      {loadError && <p className="vi-script-note">{loadError}</p>}
+
+      <div className="vi-script-row">
+        {templates.map((t) => (
+          <button
+            key={t.id}
+            type="button"
+            className={`vi-btn vi-btn-sm${t.id === picked ? " vi-btn-on" : ""}`}
+            onClick={() => setPicked(t.id)}
+          >
+            {t.name}
+            {t.active ? " · active" : ""}
+          </button>
+        ))}
+        {templates.length === 0 && !loadError && (
+          <span className="vi-script-note">No templates in the registry.</span>
+        )}
+      </div>
+
+      {tpl && (
+        <>
+          <p className="vi-script-note">
+            groups (stage order): <code>{tpl.groups.join(" → ") || "—"}</code>
+          </p>
+          <ol className="vi-template-steps">
+            {tpl.tasks.map((task) => (
+              <li key={task.name} className="vi-template-step">
+                <div className="vi-template-step-head">
+                  <code>{task.name}</code>
+                  <select
+                    className="vi-knob-input"
+                    value={task.model ?? ""}
+                    disabled={rowBusy === task.name}
+                    onChange={(e) =>
+                      void saveSlot(task.name, e.target.value || null)
+                    }
+                  >
+                    <option value="">unset — router picks from groups</option>
+                    {/* Keep a pinned model visible even when discovery
+                        doesn't offer it right now (worker offline). */}
+                    {task.model && !models.includes(task.model) && (
+                      <option value={task.model}>{task.model}</option>
+                    )}
+                    {models.map((m) => (
+                      <option key={m} value={m}>
+                        {m}
+                      </option>
+                    ))}
+                  </select>
+                  {rowBusy === task.name && (
+                    <span className="vi-script-note">saving…</span>
+                  )}
+                </div>
+                <p className="vi-template-step-desc">{task.desc}</p>
+                {rowError[task.name] && (
+                  <p className="vi-script-note">{rowError[task.name]}</p>
+                )}
+              </li>
+            ))}
+          </ol>
+        </>
+      )}
+    </section>
+  );
+}

package/src/stations/ToksPanel.tsx

@@ -18,7 +18,6 @@ import {
   useToks,
   rollupByWorker,
   tokAgo,
-  TOKS_POLL_MS,
   type TokEntry,
   type TokGroup,
 } from "../video/useToks";
@@ -153,7 +152,7 @@ export function ToksStation() {
             className={`vi-assistlog-dot ${live ? "vi-assistlog-dot--live" : "vi-assistlog-dot--disconnected"}`}
             aria-hidden
           />
-          {live ? "live" : "paused"} · every {Math.round(TOKS_POLL_MS / 1000)}s
+          {live ? "live" : "paused"} · on activity
         </span>
       </div>
       <p className="vi-knob-hint">

package/src/stations/WorkbenchSidebar.tsx

@@ -42,21 +42,18 @@ import {
   cancelJob,
   isJobActive,
   isJobTerminal,
-  dismissAllTerminal,
   type TrackedJob,
   type StationId,
 } from "../video/jobTracker";
 import { STILL_RUNNING_MESSAGE } from "./pollCaps";
 import { requestAddPart, requestStage } from "../video/composerBridge";
 import { requestStudioStage } from "../video/studioBridge";
-import { useWorkerCalls, type WorkerCall } from "../video/useWorkerCalls";
 import { useSidebarRegistry } from "./SidebarRegistry";
 import { WorkbenchDrawer } from "./WorkbenchDrawer";
 import { SharePanel } from "./SharePanel";
 import {
   mediaBytesUrl,
   studioClipArchiveUrl,
-  llmJobCancelUrl,
 } from "../config";
 import { request, errorOf, describeAppError } from "../transport/client";
 import type { MediaRef } from "../video/contract";
@@ -73,6 +70,8 @@ const STATION_NAME: Record<StationId, string> = {
   frames: "Frames & Models",
   generate: "Generate",
   "generate-tester": "Generate (tester)",
+  "generate-scene-parts": "Generate (scene parts)",
+  studio: "Studio Clip",
 };
 
 // The route a process row links to. It is the station id by default (id === route
@@ -82,6 +81,7 @@ const STATION_NAME: Record<StationId, string> = {
 // default studio sub-tab.
 const STATION_ROUTE: Partial<Record<StationId, string>> = {
   "video-crop": "studio-clips",
+  studio: "studio-clips",
   // The tester is a surface INSIDE the Generate station, not a route of its own —
   // without this the default (id === path) would link a tester row to /generate-tester,
   // which resolves to nothing.
@@ -190,182 +190,10 @@ function fmtAgo(ms: number): string {
   return `${m}m ${(total % 60).toString().padStart(2, "0")}s`;
 }
 
-// The scrolling log tail in the expanded panel: a monospace <pre> capped by CSS
-// max-height with its own scroll, pinned to the BOTTOM (newest line) whenever the
-// tail changes — so a live render's newest output is always in view without the
-// operator chasing it. Empty/absent tail degrades to a quiet "no log yet".
-function WorkerCallLog({ lines }: { lines: string[] }) {
-  const ref = useRef<HTMLPreElement | null>(null);
-  // Re-pin only when the content actually changes (count + newest line), not on
-  // every parent re-render — otherwise a manual scroll-up would be yanked back
-  // down every poll tick.
-  const key = lines.length ? `${lines.length}:${lines[lines.length - 1]}` : "";
-  useEffect(() => {
-    const el = ref.current;
-    if (el) el.scrollTop = el.scrollHeight;
-  }, [key]);
-  if (lines.length === 0) {
-    return <p className="vi-proc-log-empty">No log yet.</p>;
-  }
-  return (
-    <pre className="vi-proc-log" ref={ref} aria-label="Recent log output">
-      {lines.join("\n")}
-    </pre>
-  );
-}
-
-// One in-flight WORKER CALL row (from the fleet-wide /llm/jobs feed) — the calls
-// this browser session did NOT launch (identity reconstruction, another station's
-// render, another transport). Presentational sibling of ProcessRow: no NavLink
-// (these jobs have no station route here), a unified hard-Cancel, and — unlike the
-// old flat row that read green-active even when wedged — an EXPANDABLE panel with a
-// live progress bar, current stage, an honest stalled state, and a scrolling log.
-function WorkerCallRow({
-  call,
-  now,
-  cancelling,
-  expanded,
-  onToggle,
-  onCancel,
-}: {
-  call: WorkerCall;
-  now: number;
-  cancelling: boolean;
-  expanded: boolean;
-  onToggle: (id: string) => void;
-  onCancel: (call: WorkerCall) => void;
-}) {
-  const meta = [call.model, call.worker].filter(Boolean).join(" · ");
-  // Honest stalled signal: the server said so, OR movement has been silent past the
-  // stall window. Recomputed off `now` (the ~1s panel tick), so a live render that
-  // freezes flips to stalled on its own without a status change.
-  const lastMoveMs = call.updatedAt != null ? Math.max(0, now - call.updatedAt) : null;
-  const stalled =
-    call.stalled || (lastMoveMs != null && lastMoveMs > WORKER_CALL_STALL_MS);
-  const pct = call.progress != null ? Math.round(call.progress * 100) : null;
-  // A requested-and-acknowledged cancel also latches the button into "cancelling…"
-  // (survives across polls until the row drops), not just the local in-flight click.
-  const cancelBusy = cancelling || call.cancelRequested;
-  return (
-    <li className="vi-proc-item vi-proc-item-worker">
-      <div className="vi-proc-top">
-        <button
-          type="button"
-          className="vi-proc-toggle"
-          aria-expanded={expanded}
-          aria-label={expanded ? "Collapse details" : "Expand — progress, stage, log"}
-          onClick={() => onToggle(call.id)}
-        >
-          <span className="vi-proc-caret" aria-hidden>
-            {expanded ? "▾" : "▸"}
-          </span>
-        </button>
-        {stalled ? (
-          <span className="vi-proc-stall-dot" aria-hidden />
-        ) : (
-          <span className="vi-proc-spinner" aria-hidden />
-        )}
-        <span className="vi-proc-station">{humanizeWorkerKind(call.kind)}</span>
-        <span className={`vi-status vi-status-${call.status}`}>{call.status}</span>
-        {stalled && <span className="vi-proc-stall-badge">stalled</span>}
-        {pct != null && <span className="vi-proc-progress">{pct}%</span>}
-        <span className="vi-proc-elapsed">{fmtElapsed(now - call.startedAt)}</span>
-      </div>
-      {meta && <span className="vi-proc-label">{meta}</span>}
-
-      {expanded && (
-        <div className="vi-proc-detail">
-          {/* Progress bar: determinate when the feed gives a fraction, otherwise an
-              indeterminate "working" sweep — never a fabricated percentage. Goes
-              amber when stalled so a frozen bar doesn't read as healthy progress. */}
-          <div className="vi-proc-progbar-row">
-            <div
-              className={`vi-proc-progbar${
-                pct == null ? " vi-proc-progbar-indeterminate" : ""
-              }${stalled ? " vi-proc-progbar-stalled" : ""}`}
-              role="progressbar"
-              aria-valuemin={0}
-              aria-valuemax={100}
-              {...(pct != null ? { "aria-valuenow": pct } : {})}
-            >
-              <span
-                className="vi-proc-progbar-fill"
-                style={pct != null ? { width: `${pct}%` } : undefined}
-              />
-            </div>
-            <span className="vi-proc-stage">
-              {call.stage ? call.stage : pct == null ? "working…" : `${pct}%`}
-            </span>
-          </div>
-
-          {call.message && <p className="vi-proc-detail-msg">{call.message}</p>}
-
-          <div className="vi-proc-detail-meta">
-            <span
-              className={`vi-proc-lastmove${
-                stalled ? " vi-proc-lastmove-stalled" : ""
-              }`}
-            >
-              {lastMoveMs != null
-                ? `last movement ${fmtAgo(lastMoveMs)} ago`
-                : "last movement unknown"}
-            </span>
-          </div>
-
-          <WorkerCallLog lines={call.logTail} />
-        </div>
-      )}
-
-      <div className="vi-proc-msg">
-        <button
-          type="button"
-          className="vi-btn vi-btn-sm vi-proc-btn"
-          disabled={cancelBusy}
-          onClick={() => onCancel(call)}
-          title="Stop this worker call — a step already in flight finishes first"
-        >
-          {cancelBusy ? "Cancelling…" : "✕ Cancel"}
-        </button>
-      </div>
-    </li>
-  );
-}
-
-// STUDIO SCOPE (operator, 2026-07-31): the studio workbench's Active Processes must
-// list ONLY studio-originated work — NEVER a general fleet model call (a discord chat,
-// a web /v1 completion, another transport's LLM call). Those must not be visible here
-// and must not be cancellable from inside the studio. The fleet-wide /llm/jobs feed
-// carries every transport, so we keep only rows that are RENDER/MEDIA work:
-//   * transport === "media"  — the media/render bus (the authoritative signal: every
-//     job on it is video-arm work — studio clips/movies, scene/image gen, identity
-//     reconstruction/mesh/char360, mlt render), OR
-//   * a known render/media job KIND (defensive fallback if a row's transport is blank).
-// A general LLM call (transport web/v1/discord/cli, kind chat/completion/…) is dropped.
-// The console-wide ActiveProcessesStation still shows the fleet superset — this scoping
-// is the studio sidebar's alone.
-const STUDIO_MEDIA_KINDS = new Set([
-  "studio_i2v",
-  "generate_studio_movie",
-  "generate_scene",
-  "generate_movie",
-  "generate_image",
-  "identity_reconstruction",
-  "identity_mesh_build",
-  "identity_video_extract",
-  "mlt_render",
-  "crop",
-  "frame_extract",
-  "audio_extract",
-]);
-
-function isStudioOriginated(c: WorkerCall): boolean {
-  return c.transport === "media" || STUDIO_MEDIA_KINDS.has(c.kind);
-}
-
-/** Non-done tracked jobs, newest first — the Active Processes tab body. */
+/** Only live tracked jobs belong in Active Processes. */
 function activeJobsOf(records: TrackedJob[]): TrackedJob[] {
   return records
-    .filter((r) => r.status !== "done")
+    .filter((r) => !isJobTerminal(r))
     .slice()
     .sort((a, b) => b.enqueuedAt - a.enqueuedAt);
 }
@@ -378,64 +206,8 @@ function ProcessesPanel() {
   const records = useJobTracker();
   const jobs = useMemo(() => activeJobsOf(records), [records]);
 
-  // The fleet-wide in-flight worker calls (identity reconstruction, other stations'
-  // renders, calls from any transport) — the work THIS browser session never
-  // launched, so the session jobTracker can't see it. Merged below, DEDUPED against
-  // the tracker: a /llm/jobs row whose id equals a TrackedJob.jobId is dropped (the
-  // tracker row is richer — station link, progress, provenance — so it wins).
-  const { calls, refetch } = useWorkerCalls();
-  const trackerIds = useMemo(() => new Set(jobs.map((j) => j.jobId)), [jobs]);
-  const workerCalls = useMemo(
-    // Deduped against the session tracker AND scoped to studio-originated (media/
-    // render) work only — a general fleet model call never surfaces or cancels here.
-    () => calls.filter((c) => !trackerIds.has(c.id) && isStudioOriginated(c)),
-    [calls, trackerIds],
-  );
-
-  // Terminal rows (failed / cancelled / expired) linger in this list after the
-  // active ones drop off — this drives the opt-in "Clear finished" broom below.
-  const hasTerminal = useMemo(() => jobs.some(isJobTerminal), [jobs]);
-
-  // Per-id busy flag for the worker-call Cancel buttons (immediate feedback; the
-  // next poll / the forced refetch drops the row once the server observes it).
-  const [cancelling, setCancelling] = useState<Set<string>>(new Set());
-  const onCancelWorkerCall = useCallback(
-    async (call: WorkerCall) => {
-      setCancelling((prev) => new Set(prev).add(call.id));
-      // ONE unified hard-cancel for every transport: the feed's own cancel route
-      // (POST /llm/jobs/<id>/cancel → {cancelled,status}) fans the stop out to the
-      // right bus server-side, so the row no longer has to route media vs chat itself.
-      await request<unknown>(llmJobCancelUrl(call.id), {
-        method: "POST",
-        meta: { specKey: "workers", operation: "worker.call.cancel" },
-      });
-      refetch();
-      setCancelling((prev) => {
-        const n = new Set(prev);
-        n.delete(call.id);
-        return n;
-      });
-    },
-    [refetch],
-  );
-
-  // Per-id expanded state for the worker-call rows (progress / stage / stalled /
-  // log). Keyed by job id so a row's panel stays open across poll ticks; a job that
-  // finishes and drops from the feed just leaves a stale id in the set (harmless).
-  const [expanded, setExpanded] = useState<Set<string>>(new Set());
-  const toggleExpanded = useCallback((id: string) => {
-    setExpanded((prev) => {
-      const n = new Set(prev);
-      if (n.has(id)) n.delete(id);
-      else n.add(id);
-      return n;
-    });
-  }, []);
-
-  // Tick ~1s while anything is live so every elapsed clock stays current: tracker
-  // actives/capped OR any in-flight worker call (those are always live).
-  const ticking =
-    jobs.some((r) => isJobActive(r) || r.capped) || workerCalls.length > 0;
+  // Tick ~1s while anything is live so every elapsed clock stays current.
+  const ticking = jobs.some((r) => isJobActive(r) || r.capped);
   const [now, setNow] = useState(() => Date.now());
   useEffect(() => {
     if (!ticking) {
@@ -452,7 +224,7 @@ function ProcessesPanel() {
   // target is stable; the empty copy is suppressed when a station has portaled rows in.
   const extraHost = <div className="vi-proc-extra" ref={reg.setActiveExtraHost} />;
 
-  const total = jobs.length + workerCalls.length;
+  const total = jobs.length;
 
   if (total === 0) {
     return (
@@ -473,36 +245,11 @@ function ProcessesPanel() {
       <div className="vi-proc-header">
         <h2 className="vi-proc-title">Active processes</h2>
         <span className="vi-proc-count">{total}</span>
-        {/* Only shown when there's a finished/failed row to clear; forgets the
-            LOCAL terminal rows only (never server work), and leaves every
-            still-running job polling and visible. */}
-        {hasTerminal && (
-          <button
-            type="button"
-            className="vi-btn vi-btn-sm vi-btn-ghost"
-            onClick={() => dismissAllTerminal()}
-            title="Remove finished and failed items from this view — your saved files on disk are kept."
-            aria-label="Remove finished and failed jobs from this list — still-running jobs stay, and your saved files on disk are kept."
-          >
-            Clear finished
-          </button>
-        )}
       </div>
       <ul className="vi-proc-list">
         {jobs.map((job) => (
           <ProcessRow key={job.jobId} job={job} now={now} />
         ))}
-        {workerCalls.map((call) => (
-          <WorkerCallRow
-            key={call.id}
-            call={call}
-            now={now}
-            cancelling={cancelling.has(call.id)}
-            expanded={expanded.has(call.id)}
-            onToggle={toggleExpanded}
-            onCancel={onCancelWorkerCall}
-          />
-        ))}
       </ul>
       {extraHost}
     </>