@hugpy/video-intelligence-ui 0.3.2 → 0.3.4

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 ─────────────────────────────────────────────────────────────────

package/src/stations/oracle/OracleStation.tsx

@@ -19,6 +19,7 @@ import { useState } from "react";
 
 import type { StationSpec } from "../types";
 import { DagPanel } from "./DagPanel";
+import { PerformanceComposer } from "./PerformanceComposer";
 import { SpatialTab } from "./SpatialTab";
 import { StewardPanel } from "./StewardPanel";
 import { GapNote, RawJson, StateChip, Tag, short, when } from "./oracleShared";
@@ -273,6 +274,7 @@ export function OracleStation({ spec }: { spec: StationSpec }) {
       <p className="station-blurb">{spec.blurb}</p>
 
       <StewardPanel api={steward} embedded={runs.manifest?.dag?.steward ?? null} />
+      <PerformanceComposer onEnqueued={(jobId) => runs.select(jobId)} />
       <RunPicker runs={runs} />
       <RunHeader runs={runs} />
 

package/src/stations/oracle/PerformanceComposer.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useState } from "react";
+
+import { hugpyConfig } from "../../config";
+import { describeAppError, errorOf, okValue, request } from "../../transport/client";
+
+type EnqueueResult = { job_id?: string; error?: string };
+type PerformanceProbe = { ready: boolean; bound?: string[]; unbound?: Array<{ seam: string; requirement: string }> };
+type Stage = "authority" | "snapshot" | "audio" | "lock" | "segments" | "keyframes" | "clips" | "assembly";
+
+/** The small, explicit entry point for the Oracle's durable performance job. */
+export function PerformanceComposer({ onEnqueued }: { onEnqueued: (jobId: string) => void }) {
+  const [prompt, setPrompt] = useState("");
+  const [dialogue, setDialogue] = useState("");
+  const [speaker, setSpeaker] = useState("narrator");
+  const [voiceId, setVoiceId] = useState("narrator");
+  const [rawRef, setRawRef] = useState("");
+  const [quality, setQuality] = useState("balanced");
+  const [stopAfter, setStopAfter] = useState<Stage | "">("segments");
+  const [tts, setTts] = useState(3);
+  const [keyframes, setKeyframes] = useState(3);
+  const [clips, setClips] = useState(3);
+  const [maxSeconds, setMaxSeconds] = useState("");
+  const [seed, setSeed] = useState(0);
+  const [negative, setNegative] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState("");
+  const [probe, setProbe] = useState<PerformanceProbe | null>(null);
+  const [probeGap, setProbeGap] = useState("");
+
+  useEffect(() => {
+    let active = true;
+    void (async () => {
+      const result = await request<PerformanceProbe>(`${hugpyConfig.apiBase}/video/performance/probe`, {
+        meta: { specKey: "oracle", operation: "oracle.performance.probe" },
+      });
+      if (!active) return;
+      if (result.ok) setProbe(okValue(result));
+      else setProbeGap(describeAppError(errorOf(result)));
+    })();
+    return () => { active = false; };
+  }, []);
+
+  async function enqueue() {
+    const lines = dialogue.split("\n").map((text) => text.trim()).filter(Boolean);
+    if (!prompt.trim() || !lines.length || !speaker.trim() || !voiceId.trim() || !rawRef.trim()) {
+      setMessage("Add the goal, at least one dialogue line, speaker, voice ID, and raw request reference.");
+      return;
+    }
+    const body = {
+      goal: { objective: prompt.trim(), raw_prompt: prompt, quality, planner_mode: "local_only" },
+      dialogue: { locked: true, lines: lines.map((text, i) => ({ line_id: `line-${i + 1}`, speaker: speaker.trim(), text })) },
+      casting: [[speaker.trim(), { voice_id: voiceId.trim(), kind: "synthetic" }]],
+      raw_request_ref: rawRef.trim(),
+      tts_candidates: tts,
+      keyframe_candidates: keyframes,
+      clip_candidates: clips,
+      seed_salt: seed,
+      negative_prompt: negative.trim() || null,
+      max_seconds: maxSeconds ? Number(maxSeconds) : null,
+      stop_after: stopAfter || null,
+    };
+    setBusy(true);
+    setMessage("");
+    const result = await request<EnqueueResult>(`${hugpyConfig.apiBase}/video/jobs/performance`, {
+      method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body),
+      meta: { specKey: "oracle", operation: "oracle.performance.enqueue" },
+    });
+    setBusy(false);
+    if (!result.ok) {
+      setMessage(describeAppError(errorOf(result)));
+      return;
+    }
+    const jobId = okValue(result).job_id;
+    if (!jobId) {
+      setMessage("The server answered without a job id.");
+      return;
+    }
+    setMessage(`Queued ${jobId}`);
+    onEnqueued(jobId);
+  }
+
+  return <section className="vi-oracle-panel vi-oracle-composer" aria-label="New performance">
+    <h3>New performance <span className="vi-oracle-sub">audio first · durable media job · inspect each stage below</span></h3>
+    <div className="vi-oracle-fields">
+      <label className="vi-oracle-field vi-oracle-wide">Goal / visual direction
+        <textarea value={prompt} onChange={(e) => setPrompt(e.target.value)} rows={3} placeholder="Describe the film, characters, setting and action" />
+      </label>
+      <label className="vi-oracle-field vi-oracle-wide">Locked dialogue · one line per utterance
+        <textarea value={dialogue} onChange={(e) => setDialogue(e.target.value)} rows={3} placeholder="The words to speak" />
+      </label>
+      <label className="vi-oracle-field">Speaker <input value={speaker} onChange={(e) => setSpeaker(e.target.value)} /></label>
+      <label className="vi-oracle-field">Synthetic voice ID <input value={voiceId} onChange={(e) => setVoiceId(e.target.value)} /></label>
+      <label className="vi-oracle-field vi-oracle-wide">Raw request reference
+        <input value={rawRef} onChange={(e) => setRawRef(e.target.value)} placeholder="A durable reference to the original request" />
+      </label>
+      <label className="vi-oracle-field">Quality
+        <select value={quality} onChange={(e) => setQuality(e.target.value)}><option value="preview">Preview</option><option value="balanced">Balanced</option><option value="best">Best</option></select>
+      </label>
+      <label className="vi-oracle-field">Stop after
+        <select value={stopAfter} onChange={(e) => setStopAfter(e.target.value as Stage | "")}>
+          <option value="">Full run</option>{(["authority", "snapshot", "audio", "lock", "segments", "keyframes", "clips", "assembly"] as Stage[]).map((s) => <option key={s} value={s}>{s}</option>)}
+        </select>
+      </label>
+      <label className="vi-oracle-field">TTS candidates <input type="number" min={1} max={16} value={tts} onChange={(e) => setTts(Number(e.target.value))} /></label>
+      <label className="vi-oracle-field">Keyframe candidates <input type="number" min={1} max={16} value={keyframes} onChange={(e) => setKeyframes(Number(e.target.value))} /></label>
+      <label className="vi-oracle-field">Clip candidates <input type="number" min={1} max={16} value={clips} onChange={(e) => setClips(Number(e.target.value))} /></label>
+      <label className="vi-oracle-field">Max seconds <input type="number" min={1} value={maxSeconds} onChange={(e) => setMaxSeconds(e.target.value)} placeholder="No limit" /></label>
+      <label className="vi-oracle-field">Seed salt <input type="number" min={0} value={seed} onChange={(e) => setSeed(Number(e.target.value))} /></label>
+      <label className="vi-oracle-field vi-oracle-wide">Negative prompt <input value={negative} onChange={(e) => setNegative(e.target.value)} placeholder="Optional exclusions" /></label>
+    </div>
+    <div className="vi-oracle-note" role="status">
+      {probe ? <>
+        <strong>{probe.ready ? "Full recipe wired" : "Staged runs available; full recipe has gaps"}</strong>
+        {probe.unbound?.length ? <ul className="vi-oracle-limits">{probe.unbound.map((gap) => <li key={gap.seam}><code>{gap.seam}</code>: {gap.requirement}</li>)}</ul> : null}
+      </> : probeGap ? <>Could not read performance capability probe: {probeGap}</> : "Checking performance capabilities…"}
+    </div>
+    <div className="vi-oracle-row"><button type="button" className="vi-btn vi-btn-accent" disabled={busy} onClick={() => void enqueue()}>{busy ? "Queuing…" : "Queue performance"}</button>{message && <span role="status">{message}</span>}</div>
+  </section>;
+}

package/src/stations/oracle/oracle.css

@@ -22,6 +22,39 @@
   min-width: 0;
 }
 
+.vi-oracle-fields {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.vi-oracle-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  min-width: 0;
+  color: var(--vi-text-dim);
+  font-size: 0.76rem;
+}
+
+.vi-oracle-wide { grid-column: 1 / -1; }
+
+.vi-oracle-field input,
+.vi-oracle-field textarea,
+.vi-oracle-field select {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.48rem 0.58rem;
+  border: 1px solid var(--vi-border);
+  border-radius: 6px;
+  background: var(--vi-surface);
+  color: var(--vi-text);
+  font: inherit;
+}
+
+.vi-oracle-field textarea { resize: vertical; }
+
 .vi-oracle-panel > h3 {
   margin: 0 0 0.6rem;
   font-family: var(--vi-mono);

package/src/stations/scriptFirst.css

@@ -348,3 +348,26 @@
     grid-template-columns: 1fr;
   }
 }
+
+/* ---- Template steps panel (TemplateStepsPanel.tsx) ---- */
+.vi-template-steps {
+  margin: 0.5rem 0 0;
+  padding-left: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+.vi-template-step-head {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+.vi-template-step-head > select {
+  max-width: 24rem;
+}
+.vi-template-step-desc {
+  margin: 0.15rem 0 0;
+  font-size: 0.85em;
+  opacity: 0.75;
+}