@hugpy/video-intelligence-ui 0.3.3 → 0.3.4

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}
     </>

package/src/stations/ops/CharacterGroupsPanel.tsx

@@ -20,7 +20,6 @@
 import { useEffect, useRef, useState } from "react";
 import {
   mediaBytesUrl,
-  videoJobUrl,
   hugpyConfig,
   identityGenerateUrl,
   identityMeshStatusUrl,
@@ -28,6 +27,7 @@ import {
 import { request, okValue, errorOf, describeAppError } from "../../transport/client";
 import type { MediaRef } from "../../video/contract";
 import type { IdentityProfilesState } from "../studio/useIdentityProfiles";
+import { watchVideoJob } from "../../video/watchVideoJob";
 import { MeshViewer } from "../studio/IdentitiesStation";
 
 // ── S1 review manifest shapes (tolerant reads — the poll result is cast, exactly
@@ -134,18 +134,18 @@ export function CharacterGroupsPanel({
   // slug can run concurrently, mirrors the group-level state being a map too).
   const [mesh3D, setMesh3D] = useState<Record<string, Mesh3DState>>({});
   const meshActive = useRef<Record<string, boolean>>({});
-  const meshTimer = useRef<Record<string, number>>({});
+  const meshStop = useRef<Record<string, () => void>>({});
 
   const active = useRef(false);
-  const timer = useRef<number | null>(null);
+  const reviewStop = useRef<(() => void) | null>(null);
   const idSeq = useRef(0);
 
   useEffect(() => {
     return () => {
       active.current = false;
-      if (timer.current != null) window.clearTimeout(timer.current);
+      reviewStop.current?.();
       for (const slug of Object.keys(meshActive.current)) meshActive.current[slug] = false;
-      for (const slug of Object.keys(meshTimer.current)) window.clearTimeout(meshTimer.current[slug]);
+      for (const stop of Object.values(meshStop.current)) stop();
     };
   }, []);
 
@@ -194,56 +194,42 @@ export function CharacterGroupsPanel({
     }
 
     const jobId = enq.jobId;
-    const deadline = Date.now() + 20 * 60 * 1000; // ~20 min bound, mirrors ExtractFromVideoPanel
-    const pollOnce = async () => {
-      if (!active.current) return;
-      if (Date.now() > deadline) {
+    reviewStop.current?.();
+    reviewStop.current = watchVideoJob(jobId, (row) => {
+      if (!active.current) return true;
+      const job = row as {
+        progress?: number | null;
+        result?: {
+          ok?: boolean;
+          groups?: ReviewManifest;
+          error?: { code?: string; message?: string; retryable?: boolean };
+        } | null;
+        stage?: string | null;
+        message?: string | null;
+      };
+      const result = job.result;
+      if (result && typeof result.ok === "boolean") {
         active.current = false;
         setBusy(false);
-        setStatus(null);
-        setError("Timed out waiting for the character review.");
-        return;
-      }
-      const res = await request<unknown>(videoJobUrl(jobId), {
-        meta: { specKey: "studio", operation: "identity.groups.review.status" },
-      });
-      if (!active.current) return;
-      if (res.ok) {
-        const job = okValue(res) as {
-          progress?: number | null;
-          result?: {
-            ok?: boolean;
-            groups?: ReviewManifest;
-            error?: { code?: string; message?: string; retryable?: boolean };
-          } | null;
-          stage?: string | null;
-          message?: string | null;
-        };
-        const result = job.result;
-        if (result && typeof result.ok === "boolean") {
-          active.current = false;
-          setBusy(false);
-          if (result.ok) {
-            setStatus("done");
-            if (result.groups && Array.isArray(result.groups.groups)) {
-              loadManifest(result.groups);
-            } else {
-              setError("Review finished but returned no character groups.");
-            }
-          } else {
-            setStatus(null);
-            setError((result.error && result.error.message) || "Character review failed.");
-          }
-          return;
+        if (result.ok) {
+          setStatus("done");
+          if (result.groups && Array.isArray(result.groups.groups)) loadManifest(result.groups);
+          else setError("Review finished but returned no character groups.");
+        } else {
+          setStatus(null);
+          setError((result.error && result.error.message) || "Character review failed.");
         }
-        const pct = typeof job.progress === "number" ? ` (${Math.round(job.progress * 100)}%)` : "";
-        const stage = job.stage || job.message;
-        setStatus(`Reviewing…${pct}${stage ? ` — ${stage}` : ""}`);
+        return true;
       }
-      // queued/running/transient-poll-failure → keep polling.
-      timer.current = window.setTimeout(() => void pollOnce(), 5000);
-    };
-    timer.current = window.setTimeout(() => void pollOnce(), 5000);
+      const pct = typeof job.progress === "number" ? ` (${Math.round(job.progress * 100)}%)` : "";
+      const stage = job.stage || job.message;
+      setStatus(`Reviewing…${pct}${stage ? ` — ${stage}` : ""}`);
+    }, () => {
+      active.current = false;
+      setBusy(false);
+      setStatus(null);
+      setError("Timed out waiting for the character review.");
+    }, 20 * 60 * 1000);
   }
 
   // ── selection helpers ─────────────────────────────────────────────────────
@@ -414,41 +400,47 @@ export function CharacterGroupsPanel({
       return;
     }
 
-    const deadline = Date.now() + 20 * 60 * 1000; // ~20 min bound, mirrors Studio's generate poll
-    const pollOnce = async () => {
-      if (!meshActive.current[slug]) return;
-      if (Date.now() > deadline) {
-        meshActive.current[slug] = false;
-        setMesh(slug, { phase: "error", status: null, error: "Timed out waiting for the 3D build." });
-        return;
-      }
-      const sres = await request<unknown>(identityMeshStatusUrl(slug, reconId), {
-        meta: { specKey: "studio", operation: "identity.groups.mesh.status" },
-      });
-      if (!meshActive.current[slug]) return;
-      if (sres.ok) {
-        const ms = okValue(sres) as { status?: string; error?: string | null; glb_path?: string | null };
-        const st = ms.status ?? "queued";
-        if (st === "done") {
-          meshActive.current[slug] = false;
-          if (ms.glb_path) {
-            setMesh(slug, { phase: "done", status: "done", glbUrl: mediaBytesUrl(ms.glb_path), error: null });
-          } else {
-            setMesh(slug, { phase: "error", status: null, error: "Build finished but returned no model." });
-          }
-          return;
-        }
-        if (st === "error" || st === "cancelled") {
+    if (!enq.job_id) {
+      meshActive.current[slug] = false;
+      setMesh(slug, { phase: "error", status: null, error: "Generate response had no job_id." });
+      return;
+    }
+    meshStop.current[slug]?.();
+    meshStop.current[slug] = watchVideoJob(enq.job_id, (row) => {
+      if (!meshActive.current[slug]) return true;
+      const result = row.result as { ok?: boolean; error?: { message?: string } } | null;
+      if (result && typeof result.ok === "boolean") {
+        if (!result.ok) {
           meshActive.current[slug] = false;
-          setMesh(slug, { phase: "error", status: null, error: ms.error || `Build ${st}.` });
-          return;
+          setMesh(slug, { phase: "error", status: null,
+            error: result.error?.message || "3D build failed." });
+        } else {
+          void request<unknown>(identityMeshStatusUrl(slug, reconId), {
+            meta: { specKey: "studio", operation: "identity.groups.mesh.final" },
+          }).then((sres) => {
+            if (!meshActive.current[slug]) return;
+            meshActive.current[slug] = false;
+            if (!sres.ok) {
+              setMesh(slug, { phase: "error", status: null,
+                error: describeAppError(errorOf(sres)) });
+              return;
+            }
+            const ms = okValue(sres) as { status?: string; error?: string | null; glb_path?: string | null };
+            if (ms.status === "done" && ms.glb_path) {
+              setMesh(slug, { phase: "done", status: "done", glbUrl: mediaBytesUrl(ms.glb_path), error: null });
+            } else {
+              setMesh(slug, { phase: "error", status: null,
+                error: ms.error || "Build finished but returned no model." });
+            }
+          });
         }
-        setMesh(slug, { status: `Generating… (${st})` });
+        return true;
       }
-      // queued/running/transient-poll-failure → keep polling.
-      meshTimer.current[slug] = window.setTimeout(() => void pollOnce(), 5000);
-    };
-    meshTimer.current[slug] = window.setTimeout(() => void pollOnce(), 5000);
+      setMesh(slug, { status: `Generating… (${String(row.current_stage || row.status || "running")})` });
+    }, () => {
+      meshActive.current[slug] = false;
+      setMesh(slug, { phase: "error", status: null, error: "Timed out waiting for the 3D build." });
+    }, 20 * 60 * 1000);
   }
 
   // ── render ─────────────────────────────────────────────────────────────────