@hugpy/video-intelligence-ui 0.3.2 → 0.3.4

package/src/stations/studio/StudioMovieSessions.tsx

@@ -326,7 +326,7 @@ function SessionRowBody({
 
 /** The panel body — split out so the poll it drives exists ONLY while the panel is
  *  open (mounting is the visibility signal; see the `active` gate below). */
-function SessionsBody() {
+export function SessionsBody() {
   const [expanded, setExpanded] = useState<Set<string>>(new Set());
   // A hidden browser tab is not a visible panel: pause the walk of the movies root
   // while the console is in the background, and reload the moment it comes back.
@@ -419,7 +419,7 @@ const SESSION_CATEGORIES: ReadonlyArray<{
     id: "cinema",
     label: "Cinema",
     kinds: ["generate_studio_movie"],
-    hint: "movies on disk — resume, pause, or watch what already rendered",
+    hint: "cinema movies",
   },
 ];
 
@@ -450,7 +450,6 @@ function CategoryJobsBody({
       <p className="vi-knob-hint">
         No {label.toLowerCase()} builds in the feed — live ones appear here with
         progress and Cancel; tick “Show finished” above for recent history.
-        (Durable resumable sessions exist for Cinema today.)
       </p>
     );
   }
@@ -491,7 +490,7 @@ export function SessionsPanel({
   cancelBusy: Set<string>;
   onCancel: (id: string) => void;
 }) {
-  const [open, setOpen] = useState<Set<string>>(() => new Set(["cinema"]));
+  const [open, setOpen] = useState<Set<string>>(() => new Set());
   const toggle = (id: string) =>
     setOpen((prev) => {
       const next = new Set(prev);
@@ -504,7 +503,7 @@ export function SessionsPanel({
       <p className="vi-knob-headline" style={{ margin: "0.8rem 0 0.2rem" }}>
         Sessions{" "}
         <span className="vi-knob-headline-sub">
-          previous & in-flight work, per surface — Cinema sessions resume from disk
+          previous & in-flight work, per surface
         </span>
       </p>
       {SESSION_CATEGORIES.map((cat) => {
@@ -526,24 +525,18 @@ export function SessionsPanel({
                 {cat.label}{" "}
                 <span className="vi-knob-headline-sub">
                   {cat.hint}
-                  {cat.id !== "cinema" && catJobs.length > 0
-                    ? ` · ${catJobs.length} in feed`
-                    : ""}
+                  {catJobs.length > 0 ? ` · ${catJobs.length} in feed` : ""}
                 </span>
               </span>
             </button>
             {isOpen ? (
-              cat.id === "cinema" ? (
-                <SessionsBody />
-              ) : (
-                <CategoryJobsBody
-                  jobs={catJobs}
-                  nowMs={nowMs}
-                  cancelBusy={cancelBusy}
-                  onCancel={onCancel}
-                  label={cat.label}
-                />
-              )
+              <CategoryJobsBody
+                jobs={catJobs}
+                nowMs={nowMs}
+                cancelBusy={cancelBusy}
+                onCancel={onCancel}
+                label={cat.label}
+              />
             ) : null}
           </div>
         );

package/src/stations/studio/StudioPlane.tsx

@@ -61,9 +61,10 @@ export interface StudioPlaneProps {
    *  that sub-mode and hide its internal Clip|Cinema switcher. Omitted by the standalone
    *  /studio-clips station, which keeps the internal switcher. */
   lockedSurfaceMode?: "clip" | "movie";
+  onSelectSurfaceMode?: (mode: "clip" | "movie") => void;
 }
 
-export function StudioPlane({ registerBridge = false, lockedSurfaceMode }: StudioPlaneProps) {
+export function StudioPlane({ registerBridge = false, lockedSurfaceMode, onSelectSurfaceMode }: StudioPlaneProps) {
   const reg = useSidebarRegistry();
   const { presets, loading: presetsLoading } = useStudioPresets(true);
   const clipsState = useStudioClips();
@@ -111,6 +112,9 @@ export function StudioPlane({ registerBridge = false, lockedSurfaceMode }: Studi
   const [pinned, setPinned] = useState(false);
 
   const topRef = useRef<HTMLDivElement | null>(null);
+  const monitorRef = useRef<HTMLDivElement | null>(null);
+  const binRef = useRef<HTMLDivElement | null>(null);
+  const renderRef = useRef<HTMLDivElement | null>(null);
 
   // Round 9: fold into the ONE shell sidebar — reveal its guarded Settings tab (knobs +
   // template dropdown portal there). registerSettings is stable, so this runs once per
@@ -275,10 +279,24 @@ export function StudioPlane({ registerBridge = false, lockedSurfaceMode }: Studi
 
   return (
     <div className="vi-studio-workbench" ref={topRef}>
+      <nav className="vi-studio-workflow" aria-label="Studio workflow">
+        <button type="button" onClick={() => monitorRef.current?.scrollIntoView({ behavior: "smooth", block: "start" })}>
+          <span className="vi-studio-workflow-step">01 · Monitor</span>
+          <span>Review the current take</span>
+        </button>
+        <button type="button" onClick={() => binRef.current?.scrollIntoView({ behavior: "smooth", block: "start" })}>
+          <span className="vi-studio-workflow-step">02 · Shot bin</span>
+          <span>{items.length} staged {items.length === 1 ? "item" : "items"}</span>
+        </button>
+        <button type="button" onClick={() => renderRef.current?.scrollIntoView({ behavior: "smooth", block: "start" })}>
+          <span className="vi-studio-workflow-step">03 · Render</span>
+          <span>Clip or cinema</span>
+        </button>
+      </nav>
       {/* CENTER, movie skeleton: viewer on top → generator below. Viewer header controls
           (Play from library / Clear / follow-newest toggle) are wired here so both
           plane mounts get them for free — see the `pinned` note above. */}
-      <StudioViewer
+      <div ref={monitorRef} className="vi-studio-workflow-target"><StudioViewer
         clips={clipsState.clips}
         library={libraryMedia}
         selected={selected}
@@ -286,7 +304,7 @@ export function StudioPlane({ registerBridge = false, lockedSurfaceMode }: Studi
         onPick={pickViewerClip}
         onClear={clearViewer}
         onToggleFollow={toggleFollowNewest}
-      />
+      /></div>
 
       {/* Slice 2b: the staged studio items as a strip of first-class cards with inline
           per-item ops. Additive — it sits ABOVE the generate surface and does not touch
@@ -294,7 +312,8 @@ export function StudioPlane({ registerBridge = false, lockedSurfaceMode }: Studi
           mounts identically (this is the one shared StudioPlane). Each card is wrapped in
           a keyed intrinsic <div> so the map key never lands on a component (which the
           bare-tsc env flags as a spurious prop). */}
-      {items.length > 0 && (
+      <div ref={binRef} className="vi-studio-workflow-target" aria-label="Shot bin">
+      {items.length > 0 ? (
         <div className="vi-studio-item-strip" aria-label="Studio items">
           {items.map((it) => (
             <div className="vi-studio-item-cell" key={it.key}>
@@ -308,8 +327,10 @@ export function StudioPlane({ registerBridge = false, lockedSurfaceMode }: Studi
             </div>
           ))}
         </div>
-      )}
+      ) : <p className="vi-studio-bin-empty">Staged media will appear here. Send a library item to Studio or add a source in the render desk.</p>}
+      </div>
 
+      <div ref={renderRef} className="vi-studio-workflow-target">
       <StudioGenerateSurface
         presets={presets}
         presetsLoading={presetsLoading}
@@ -321,7 +342,9 @@ export function StudioPlane({ registerBridge = false, lockedSurfaceMode }: Studi
         onEnqueued={clipsState.refresh}
         settingsHost={reg.settingsHost}
         lockedSurfaceMode={lockedSurfaceMode}
+        onSelectSurfaceMode={onSelectSurfaceMode}
       />
+      </div>
       {/* STUDIO-ASSIST LIVE LOG → portaled into the sidebar's ACTIVE (Active
           Processes) tab via the registry's activeExtra host (operator correction
           2026-08-05: "active tab" = Active Processes). Single mount, shared stream. */}

package/src/stations/studio/StudioViewer.tsx

@@ -109,18 +109,13 @@ export function StudioViewer({
   const [sentMsg, setSentMsg] = useState<string | null>(null);
   const [sendErr, setSendErr] = useState<string | null>(null);
 
+  // The operator probe (GET /keys/video-share) was dropped (2026-10-05): the
+  // route has no backend here, so it only 404'd — i.e. always resolved to
+  // "not operator". Set that outcome directly, with no dead request. (The
+  // Send-to-Editor target /video/studio/clip/<id>/to-editor is itself a 501 in
+  // this build, so the affordance has nothing to call anyway.)
   useEffect(() => {
-    let alive = true;
-    void (async () => {
-      const res = await request<unknown>(hugpyConfig.keysVideoShareUrl, {
-        method: "GET",
-        meta: { specKey: "studio", operation: "studio.operatorProbe" },
-      });
-      if (alive) setOperator(res.ok);
-    })();
-    return () => {
-      alive = false;
-    };
+    setOperator(false);
   }, []);
 
   // Clear any transient send message when the shown clip changes, so a "sent"

package/src/stations/studio/studioShared.tsx

@@ -24,6 +24,7 @@ import { z } from "zod";
 import { request, okValue, errorOf, describeAppError } from "../../transport/client";
 import { hugpyConfig, studioClipDetailUrl, mediaBytesUrl } from "../../config";
 import { addToLibrary, updateLibraryProvenance } from "../../video/mediaLibrary";
+import { subscribeJobStream } from "../../video/jobStream";
 import type { LibraryItem } from "../../video/mediaLibrary";
 import type { MediaRef } from "../../video/contract";
 import type { StudioPreset } from "../../video/useStudioPresets";
@@ -804,13 +805,24 @@ export function useStudioClips(): StudioClipsState {
     }
   }, [backfillProvenance]);
 
+  // Seed once, then refresh the clip catalog only when a worker reports a job
+  // transition (coalesced) — a produced clip appears on the DONE push, not on a
+  // 6s timer.
   useEffect(() => {
     mounted.current = true;
     void load(false);
-    const iv = window.setInterval(() => void load(true), 6000);
+    let coalesce: number | null = null;
+    const unsub = subscribeJobStream(() => {
+      if (coalesce != null) return;
+      coalesce = window.setTimeout(() => {
+        coalesce = null;
+        void load(true);
+      }, 400);
+    });
     return () => {
       mounted.current = false;
-      window.clearInterval(iv);
+      if (coalesce != null) window.clearTimeout(coalesce);
+      unsub();
     };
   }, [load]);
 

package/src/stations/studio/useIdentityCreateJob.ts

@@ -1,8 +1,8 @@
 // k94 — the ONE-PATH "Create identity" job watcher.
 //
 // Both create routes (from-video → identity_from_video, from-images →
-// identity_mesh_build) hand back a bus job_id; this hook polls the generic
-// GET /video/jobs/<id> (`videoJobUrl`) the way the other identity flows in this
+// identity_mesh_build) hand back a bus job_id; this hook seeds once from the generic
+// GET /video/jobs/<id> (`videoJobUrl`) and follows pushed job transitions.
 // station do, and reduces the reply to what the panel shows on ONE line:
 //   stage · % · log tail
 // `progress` is the relay's mirrored blob ({stage, progress 0..1, log_tail[]}
@@ -10,16 +10,17 @@
 // bus's numeric bar, `result` is the terminal JobResult ({ok, error?,
 // identities?}). Terminal = `result.ok` is a boolean. Bounded (90 min — char360
 // plus a textured Hunyuan3D mesh PER character runs minutes each; clownworld's
-// own ceiling) so a wedged remote never spins the panel forever.
+// own ceiling) so a wedged remote never holds the panel forever.
 //
 // Why not the session job tracker (video/jobTracker.ts)? Its JobKind/StationId
 // unions + per-kind terminal parse are closed over the crop/frames/generate
 // arms; widening them is a cross-station change outside this task's files. The
-// poll shape here is the same one ExtractFromVideoPanel / generateFullIdentity
+// job shape here is the same one ExtractFromVideoPanel / generateFullIdentity
 // already use in this station.
 import { useCallback, useEffect, useRef, useState } from "react";
 import { request, okValue } from "../../transport/client";
 import { videoJobUrl } from "../../config";
+import { subscribeJobStream } from "../../video/jobStream";
 
 export type CreateJobPhase = "idle" | "queued" | "running" | "done" | "error";
 
@@ -52,7 +53,6 @@ const IDLE: CreateJobView = {
   phase: "idle", jobId: null, stage: null, pct: null, logLine: null, error: null, identities: [],
 };
 
-const POLL_MS = 4000;
 const CAP_MS = 90 * 60 * 1000;
 
 type JobReply = {
@@ -79,6 +79,7 @@ export interface CreateJobApi {
 export function useIdentityCreateJob(): CreateJobApi {
   const [view, setView] = useState<CreateJobView>(IDLE);
   const timer = useRef<number | null>(null);
+  const unsubscribe = useRef<(() => void) | null>(null);
   const active = useRef(false);
 
   const stop = useCallback(() => {
@@ -87,6 +88,8 @@ export function useIdentityCreateJob(): CreateJobApi {
       window.clearTimeout(timer.current);
       timer.current = null;
     }
+    unsubscribe.current?.();
+    unsubscribe.current = null;
   }, []);
 
   useEffect(() => stop, [stop]);
@@ -98,19 +101,14 @@ export function useIdentityCreateJob(): CreateJobApi {
       setView({ ...IDLE, phase: "queued", jobId });
       const deadline = Date.now() + CAP_MS;
 
-      const pollOnce = async () => {
-        if (!active.current) return;
-        if (Date.now() > deadline) {
-          stop();
-          setView((v) => ({ ...v, phase: "error", error: "Timed out waiting for the identity build." }));
-          return;
-        }
-        const res = await request<unknown>(videoJobUrl(jobId), {
-          meta: { specKey: "studio", operation: "identity.create.status" },
-        });
+      timer.current = window.setTimeout(() => {
+        if (!active.current || Date.now() < deadline) return;
+        stop();
+        setView((v) => ({ ...v, phase: "error", error: "Timed out waiting for the identity build." }));
+      }, CAP_MS);
+
+      const accept = (job: JobReply) => {
         if (!active.current) return;
-        if (res.ok) {
-          const job = okValue(res) as JobReply;
           const result = job.result;
           if (result && typeof result.ok === "boolean") {
             stop();
@@ -150,11 +148,18 @@ export function useIdentityCreateJob(): CreateJobApi {
             pct: ratio == null ? null : Math.max(0, Math.min(100, Math.round(ratio * 100))),
             logLine: typeof last === "string" ? last : null,
           }));
-        }
-        // queued / running / transient poll failure → keep polling.
-        timer.current = window.setTimeout(() => void pollOnce(), POLL_MS);
       };
-      timer.current = window.setTimeout(() => void pollOnce(), POLL_MS);
+      let pushed = false;
+      unsubscribe.current = subscribeJobStream((ev) => {
+        if (ev.job_id !== jobId || !ev.job) return;
+        pushed = true;
+        accept(ev.job as JobReply);
+      });
+      void request<unknown>(videoJobUrl(jobId), {
+        meta: { specKey: "studio", operation: "identity.create.status" },
+      }).then((res) => {
+        if (res.ok && !pushed) accept(okValue(res) as JobReply);
+      });
     },
     [stop],
   );

package/src/stations/studio/useReconstruction.ts

@@ -9,6 +9,7 @@ import {
 } from "../../config";
 import { jobRecordSchema, isTerminal } from "../../video/contract";
 import type { JobStatus } from "../../video/contract";
+import { subscribeJobStream } from "../../video/jobStream";
 
 export const DEFAULT_VIEWS = ["front", "three_quarter", "profile", "back"] as const;
 export type ViewName = (typeof DEFAULT_VIEWS)[number];
@@ -69,16 +70,18 @@ export function useReconstruction(slug: string, onComplete: () => void): Reconst
   const [error, setError] = useState<string | null>(null);
 
   const mounted = useRef(true);
-  const timer = useRef<number | null>(null);
+  // Unsubscribe from the shared job stream while this run's jobs are in flight
+  // (replaces the retired 2s poll interval — a transition re-reads on push).
+  const unsub = useRef<null | (() => void)>(null);
   const idsRef = useRef<string[]>([]);
   const statusesRef = useRef<Record<string, JobStatus>>({});
   const onCompleteRef = useRef(onComplete);
   onCompleteRef.current = onComplete;
 
   const stopPoll = useCallback(() => {
-    if (timer.current != null) {
-      window.clearInterval(timer.current);
-      timer.current = null;
+    if (unsub.current != null) {
+      unsub.current();
+      unsub.current = null;
     }
   }, []);
 
@@ -156,7 +159,10 @@ export function useReconstruction(slug: string, onComplete: () => void): Reconst
     statusesRef.current = seeded;
     setStatuses(seeded);
     void poll();
-    timer.current = window.setInterval(() => void poll(), 2000);
+    // Re-read this run's job ids whenever a worker reports ANY transition. The
+    // set is tiny and poll() is idempotent, so no per-id event filtering is needed.
+    if (unsub.current != null) unsub.current();
+    unsub.current = subscribeJobStream(() => void poll());
   }, [poll]);
 
   const generate = useCallback(

package/src/style/app.css

@@ -3406,6 +3406,55 @@ button.vi-studio-src-thumb {
   min-width: 0;
 }
 
+.vi-studio-workflow {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5rem;
+  border-bottom: 1px solid var(--vi-border);
+  padding-bottom: 0.7rem;
+}
+
+.vi-studio-workflow button {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  text-align: left;
+  min-width: 0;
+  padding: 0.65rem 0.75rem;
+  border: 1px solid var(--vi-border);
+  border-radius: 8px;
+  background: var(--vi-surface-raised);
+  color: var(--vi-text-dim);
+  cursor: pointer;
+}
+
+.vi-studio-workflow button:hover,
+.vi-studio-workflow button:focus-visible {
+  border-color: var(--vi-accent);
+  color: var(--vi-text);
+}
+
+.vi-studio-workflow-step {
+  color: var(--vi-text);
+  font-family: var(--vi-mono);
+  font-size: 0.76rem;
+  font-weight: 600;
+}
+
+.vi-studio-workflow-target { scroll-margin-top: 1rem; min-width: 0; }
+.vi-studio-bin-empty {
+  margin: 0;
+  padding: 0.7rem 0.85rem;
+  border: 1px dashed var(--vi-border);
+  border-radius: 8px;
+  color: var(--vi-text-dim);
+  font-size: 0.78rem;
+}
+
+@media (max-width: 35rem) {
+  .vi-studio-workflow { grid-template-columns: 1fr; }
+}
+
 /* Round 9: the studio no longer carries its OWN sidebar — it folds into the arm shell's
    ONE left sidebar (Settings / Active / Library, via the sidebar registry). So the
    workbench is a SINGLE centre column (viewer on top → generator below), the Movie

package/src/video/PromptAssistButtons.tsx

@@ -71,12 +71,13 @@ export function PromptAssistButtons({
         >
           <option value="">fleet default</option>
           {models.map((m) => (
-            // "· cold" is not decoration: a non-seated model pays a load on first use,
-            // which is minutes, not milliseconds. Saying so up front stops that reading
-            // as a hang.
+            // Only call a model "cold" when the server explicitly reports cold.
+            // Older responses lack state; use serving/held before saying unknown.
             <option key={m.model} value={m.model}>
               {m.model}
-              {m.serving ? "" : " · cold"}
+              {m.state === "serving" || m.state === "loaded" || m.serving ? " · ready"
+                : m.state === "hot" || m.held ? " · available (loads)"
+                : m.state === "cold" ? " · cold (downloads)" : " · availability unknown"}
             </option>
           ))}
         </select>

package/src/video/jobStream.ts

@@ -0,0 +1,119 @@
+// SHARED job-event stream — the client half of design 1 (2026-10-05). The /video
+// page no longer polls GET /video/jobs on a timer. Every list/tracker surface
+// SEEDS ONCE from its own GET, then subscribes here; this module holds ONE
+// EventSource on /api/video/jobs/stream for the whole page (ref-counted: opens on
+// the first subscriber, closes on the last) and hands each pushed row to every
+// subscriber. A row is pushed the moment a worker reports a transition — never on
+// a timer.
+//
+// Structural twin of video/useStudioAssistLog.ts (the same module-scope store +
+// reference-counted connection), with ONE deliberate difference: it is
+// 404-TOLERANT and NEVER polls. If the stream endpoint is absent (first connect
+// errors before it ever opened), we do NOT reconnect — each consumer already did
+// its one-time seed, so the page simply stays on that seed. We reconnect ONLY
+// after a stream that HAD opened drops (the server caps a stream at an hour and
+// expects a re-attach); that is at most ~1/hour, not a poll.
+import { hugpyConfig } from "../config";
+import { videoShareKey } from "../share";
+
+/** One pushed job row (jobstream.py). `job` is the GET /video/jobs/<id> view, or
+ *  null when the job is gone; `stage:"stream.ready"` marks the transport hello. */
+export interface JobEvent {
+  job_id?: string;
+  status?: string | null;
+  owner?: string | null;
+  private?: boolean;
+  job?: unknown;
+  ts?: number;
+  stage?: string;
+}
+
+type Listener = (ev: JobEvent) => void;
+
+const listeners = new Set<Listener>();
+let es: EventSource | null = null;
+let refs = 0;
+let everOpened = false;
+let retryTimer: ReturnType<typeof setTimeout> | null = null;
+const RETRY_MS = 5000;
+
+function streamUrl(): string {
+  const base = hugpyConfig.jobsStreamUrl;
+  const key = videoShareKey();
+  if (!key) return base;
+  const sep = base.includes("?") ? "&" : "?";
+  return `${base}${sep}share=${encodeURIComponent(key)}`;
+}
+
+function openStream(): void {
+  if (es || typeof window === "undefined" || typeof EventSource === "undefined") return;
+  let source: EventSource;
+  try {
+    source = new EventSource(streamUrl(), { withCredentials: true });
+  } catch {
+    return; // EventSource unavailable — consumers keep their one-time seed
+  }
+  es = source;
+  source.onopen = () => {
+    everOpened = true;
+  };
+  source.onmessage = (e: MessageEvent) => {
+    let ev: JobEvent;
+    try {
+      ev = JSON.parse(e.data);
+    } catch {
+      return;
+    }
+    // Let consumers re-read their current rows after every attach. A transition
+    // can happen between their initial GET and the stream becoming ready.
+    for (const fn of listeners) {
+      try {
+        fn(ev);
+      } catch {
+        /* one bad subscriber must not stall the rest */
+      }
+    }
+  };
+  source.onerror = () => {
+    source.close();
+    if (es === source) es = null;
+    // RECONNECT only if this stream had actually opened before dropping (the
+    // server's hourly re-attach). A first connect that errors before opening =
+    // the endpoint is absent/unsupported → do NOT retry, do NOT poll; the page
+    // stays on each consumer's one-time seed.
+    if (refs > 0 && everOpened) {
+      everOpened = false;
+      if (retryTimer) clearTimeout(retryTimer);
+      retryTimer = setTimeout(() => {
+        if (refs > 0) openStream();
+      }, RETRY_MS);
+    }
+  };
+}
+
+function closeStream(): void {
+  if (retryTimer) {
+    clearTimeout(retryTimer);
+    retryTimer = null;
+  }
+  if (es) {
+    es.close();
+    es = null;
+  }
+  everOpened = false;
+}
+
+/**
+ * Subscribe to pushed job rows. Returns an unsubscribe. The underlying
+ * EventSource is opened on the first subscriber and closed on the last.
+ */
+export function subscribeJobStream(fn: Listener): () => void {
+  listeners.add(fn);
+  refs += 1;
+  if (refs === 1) openStream();
+  return () => {
+    listeners.delete(fn);
+    refs = Math.max(0, refs - 1);
+    if (refs === 0) closeStream();
+  };
+}