@hugpy/video-intelligence-ui 0.3.2 → 0.3.4

package/src/stations/studio/IdentitiesStation.tsx

@@ -34,7 +34,8 @@ import * as THREE from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { request, okValue, errorOf, describeAppError } from "../../transport/client";
-import { mediaBytesUrl, identityGenerateUrl, identityMeshStatusUrl, videoJobUrl } from "../../config";
+import { hugpyConfig, mediaBytesUrl, identityGenerateUrl, identityMeshStatusUrl } from "../../config";
+import { watchVideoJob } from "../../video/watchVideoJob";
 import { useMediaLibrary } from "../../video/mediaLibrary";
 import type { LibraryItem } from "../../video/mediaLibrary";
 import type { MediaRef, IdentityReconstruction, IdentityAngleView } from "../../video/contract";
@@ -529,12 +530,12 @@ export function ExtractFromVideoPanel({
   const [pickError, setPickError] = useState<string | null>(null);
 
   const active = useRef(false);
-  const timer = useRef<number | null>(null);
+  const jobStop = useRef<(() => void) | null>(null);
 
   useEffect(() => {
     return () => {
       active.current = false;
-      if (timer.current != null) window.clearTimeout(timer.current);
+      jobStop.current?.();
     };
   }, []);
 
@@ -575,47 +576,34 @@ export function ExtractFromVideoPanel({
     }
 
     const jobId = enq.jobId;
-    const deadline = Date.now() + 20 * 60 * 1000; // ~20 min bound, mirrors the /generate poll
-    const pollOnce = async () => {
-      if (!active.current) return;
-      if (Date.now() > deadline) {
+    jobStop.current?.();
+    jobStop.current = watchVideoJob(jobId, (row) => {
+      if (!active.current) return true;
+      const job = row as {
+        progress?: number | null;
+        result?: { ok?: boolean; 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("Timed out waiting for the video extraction.");
-        return;
-      }
-      const res = await request<unknown>(videoJobUrl(jobId), {
-        meta: { specKey: "studio", operation: "identity.video_extract.status" },
-      });
-      if (!active.current) return;
-      if (res.ok) {
-        const job = okValue(res) as {
-          progress?: number | null;
-          result?: { ok?: boolean; 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");
-            setVideo(null);
-            reload();
-          } else {
-            setStatus((result.error && result.error.message) || "Extraction failed.");
-          }
-          return;
-        }
-        const pct = typeof job.progress === "number" ? ` (${Math.round(job.progress * 100)}%)` : "";
-        const stage = job.stage || job.message;
-        setStatus(`Extracting…${pct}${stage ? ` — ${stage}` : ""}`);
+        if (result.ok) {
+          setStatus("done");
+          setVideo(null);
+          reload();
+        } else setStatus((result.error && result.error.message) || "Extraction failed.");
+        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(`Extracting…${pct}${stage ? ` — ${stage}` : ""}`);
+    }, () => {
+      active.current = false;
+      setBusy(false);
+      setStatus("Timed out waiting for the video extraction.");
+    }, 20 * 60 * 1000);
   }
 
   const canSubmit = video != null && !busy && uploadPhase === "idle";
@@ -1523,13 +1511,13 @@ function IdentityDetail({
   // SUPERSEDED by the one-click mesh path for the identity gen flow — kept behind
   // the "⚙ Settings & advanced" disclosure (see the render) so the tab stays to
   // the point.
-  const genTimer = useRef<number | null>(null);
+  const genStop = useRef<(() => void) | null>(null);
   const genActive = useRef(false);
   // Stop the poll loop + free the timer when this card unmounts mid-build.
   useEffect(() => {
     return () => {
       genActive.current = false;
-      if (genTimer.current != null) window.clearTimeout(genTimer.current);
+      genStop.current?.();
     };
   }, []);
 
@@ -1770,43 +1758,46 @@ function IdentityDetail({
       return;
     }
 
-    const deadline = Date.now() + 20 * 60 * 1000; // ~20 min bound
-    const pollOnce = async () => {
-      if (!genActive.current) return;
-      if (Date.now() > deadline) {
-        genActive.current = false;
-        setGenBusy(false);
-        setGenStatus("Timed out waiting for the 3D identity build.");
-        reload();
-        return;
-      }
-      const sres = await request<unknown>(identityMeshStatusUrl(profile.slug, reconId), {
-        meta: { specKey: "studio", operation: "identity.mesh.status" },
-      });
-      if (!genActive.current) return;
-      if (sres.ok) {
-        const ms = okValue(sres) as { status?: string; error?: string | null };
-        const st = ms.status ?? "queued";
-        if (st === "done") {
-          genActive.current = false;
-          setGenBusy(false);
-          setGenStatus("done");
-          reload();
-          return;
-        }
-        if (st === "error" || st === "cancelled") {
+    if (!enq.job_id) {
+      genActive.current = false;
+      setGenBusy(false);
+      setGenStatus("Generate response had no job_id.");
+      return;
+    }
+    genStop.current?.();
+    genStop.current = watchVideoJob(enq.job_id, (row) => {
+      if (!genActive.current) return true;
+      const result = row.result as { ok?: boolean; error?: { message?: string } } | null;
+      if (result && typeof result.ok === "boolean") {
+        if (!result.ok) {
           genActive.current = false;
           setGenBusy(false);
-          setGenStatus(ms.error || `Build ${st}.`);
+          setGenStatus(result.error?.message || "3D identity build failed.");
           reload();
-          return;
+        } else {
+          void request<unknown>(identityMeshStatusUrl(profile.slug, reconId), {
+            meta: { specKey: "studio", operation: "identity.mesh.final" },
+          }).then((sres) => {
+            if (!genActive.current) return;
+            genActive.current = false;
+            setGenBusy(false);
+            if (!sres.ok) setGenStatus(describeAppError(errorOf(sres)));
+            else {
+              const ms = okValue(sres) as { status?: string; error?: string | null };
+              setGenStatus(ms.status === "done" ? "done" : ms.error || `Build ${ms.status || "unknown"}.`);
+            }
+            reload();
+          });
         }
-        setGenStatus(`Generating… (${st})`);
+        return true;
       }
-      // queued/running/transient-poll-failure → keep polling.
-      genTimer.current = window.setTimeout(() => void pollOnce(), 5000);
-    };
-    genTimer.current = window.setTimeout(() => void pollOnce(), 5000);
+      setGenStatus(`Generating… (${String(row.current_stage || row.status || "running")})`);
+    }, () => {
+      genActive.current = false;
+      setGenBusy(false);
+      setGenStatus("Timed out waiting for the 3D identity build.");
+      reload();
+    }, 20 * 60 * 1000);
   }
 
   const { short: createdShort, full: createdFull } = fmtCreated(profile.created_at);
@@ -2149,6 +2140,17 @@ type IdTab = "active" | "session" | "settings";
 
 export function IdentitiesStation({ spec }: { spec: StationSpec }) {
   void spec;
+  const [serviceProbe, setServiceProbe] = useState<{ configured: boolean; reachable: boolean; reason?: string; version?: string; capabilities?: Record<string, unknown> } | null>(null);
+  useEffect(() => {
+    let active = true;
+    void (async () => {
+      const result = await request<typeof serviceProbe>(`${hugpyConfig.apiBase}/video/identity-render/probe`, {
+        meta: { specKey: "identities", operation: "identity.render.probe" },
+      });
+      if (active && result.ok) setServiceProbe(okValue(result));
+    })();
+    return () => { active = false; };
+  }, []);
   const {
     profiles,
     loading,
@@ -2225,6 +2227,14 @@ export function IdentitiesStation({ spec }: { spec: StationSpec }) {
   return (
     <section className="station-wide vi-identities vi-identities-md" aria-label="Identities workspace"
       style={{ display: "grid", gridTemplateColumns: "300px minmax(0, 1fr)", gap: "1rem", alignItems: "start" }}>
+      <div role="status" style={{ gridColumn: "1 / -1", padding: "0.55rem 0.75rem", border: "1px solid var(--vi-border)", borderRadius: "0.5rem", fontSize: "0.8rem" }}>
+        <strong>Identity render service:</strong>{" "}
+        {!serviceProbe ? "checking…" : serviceProbe.reachable
+          ? `online${serviceProbe.version ? ` · ${serviceProbe.version}` : ""}`
+          : serviceProbe.reason || "unavailable"}
+        {serviceProbe?.reachable && serviceProbe.capabilities ?
+          <span> · {Object.entries(serviceProbe.capabilities).filter(([, value]) => Boolean(value)).map(([name]) => name).join(", ")}</span> : null}
+      </div>
       {/* ── SIDEBAR: tab filter + master list (wireframe b/c/d/f/e) ────────── */}
       <aside className="vi-id-sidebar" aria-label="Identity list"
         style={{ border: "1px solid var(--vi-border)", borderRadius: "0.5rem", padding: "0.5rem", position: "sticky", top: "0.5rem" }}>
@@ -2379,4 +2389,4 @@ export function IdentitiesStation({ spec }: { spec: StationSpec }) {
       </div>
     </section>
   );
-}
+}

package/src/stations/studio/StudioGenerateMode.tsx

@@ -16,13 +16,14 @@ export interface StudioGenerateModeProps {
   /** Set by the top-level Generate tab (Clip → "clip", Cinema → "movie") to lock the
    *  studio surface to one sub-mode and hide its internal Clip|Cinema switcher. */
   lockedSurfaceMode?: "clip" | "movie";
+  onSelectSurfaceMode?: (mode: "clip" | "movie") => void;
 }
 
-export function StudioGenerateMode({ lockedSurfaceMode }: StudioGenerateModeProps = {}) {
+export function StudioGenerateMode({ lockedSurfaceMode, onSelectSurfaceMode }: StudioGenerateModeProps = {}) {
   return (
     <div className="vi-section-tabs vi-section-tabs--stacked">
       <section className="vi-section-region vi-section-region--work" aria-label="Studio">
-        <StudioPlane lockedSurfaceMode={lockedSurfaceMode} />
+        <StudioPlane lockedSurfaceMode={lockedSurfaceMode} onSelectSurfaceMode={onSelectSurfaceMode} />
       </section>
     </div>
   );