@hugpy/video-intelligence-ui 0.1.0 → 0.1.1

package/src/video/LibraryGroups.tsx

@@ -0,0 +1,81 @@
+// SESSION LIBRARY GROUPS (operator ask 2026-08-13): the library pickers render
+// as TYPE-CATEGORIZED, COLLAPSIBLE sections instead of one flat grid — inputs
+// (uploads/frames/send-to-studio), generated images, scene outputs, movie
+// outputs, studio clips. ONE component for every library surface (the house
+// one-reusable-component rule); the call site supplies the item renderer so
+// pick semantics stay exactly what they were. Groups with no members render
+// nothing; `defaultOpen` seeds which sections start expanded (the current
+// section rides in via a `key` remount on mode change).
+import { useRef, useState, type ReactNode } from "react";
+import type { LibraryItem, LibraryGenKind } from "./mediaLibrary";
+
+const GROUPS: ReadonlyArray<{
+  id: string;
+  label: string;
+  kinds: ReadonlyArray<LibraryGenKind | null>;
+}> = [
+  { id: "inputs", label: "📤 Inputs — uploads · frames · sent to studio", kinds: [null] },
+  { id: "images", label: "🖼 Generated images", kinds: ["generate_image"] },
+  { id: "scenes", label: "🎬 Scene outputs", kinds: ["generate_scene"] },
+  { id: "movies", label: "🎞 Movie outputs", kinds: ["generate_movie"] },
+  { id: "clips", label: "📹 Studio clips", kinds: ["studio_i2v"] },
+];
+
+export function LibraryGroups({
+  items,
+  defaultOpen,
+  seed,
+  renderItem,
+}: {
+  items: LibraryItem[];
+  /** Group ids expanded on first render — e.g. ["inputs", "images"]. */
+  defaultOpen: readonly string[];
+  /** Re-seed `defaultOpen` when this changes (the active section) — the scoped
+   *  tsconfig rejects `key` on locally-declared components, so remount-by-key
+   *  is not available here; this is the React render-phase reset pattern. */
+  seed?: string;
+  renderItem: (it: LibraryItem) => ReactNode;
+}) {
+  const [open, setOpen] = useState<Set<string>>(() => new Set(defaultOpen));
+  const seedRef = useRef(seed);
+  if (seedRef.current !== seed) {
+    seedRef.current = seed;
+    setOpen(new Set(defaultOpen));
+  }
+  const toggle = (id: string) =>
+    setOpen((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  return (
+    <>
+      {GROUPS.map((g) => {
+        const members = items.filter((it) =>
+          g.kinds.includes((it.genKind ?? null) as LibraryGenKind | null),
+        );
+        if (members.length === 0) return null;
+        const isOpen = open.has(g.id);
+        return (
+          <div key={g.id} className="vi-lib-group">
+            <button
+              type="button"
+              className="vi-timeline-toggle vi-lib-group-head"
+              aria-expanded={isOpen}
+              onClick={() => toggle(g.id)}
+            >
+              <span className="vi-timeline-caret" aria-hidden>
+                {isOpen ? "▾" : "▸"}
+              </span>{" "}
+              {g.label} <span className="vi-lib-count">({members.length})</span>
+            </button>
+            {isOpen ? (
+              <div className="vi-gen-picker-grid">{members.map(renderItem)}</div>
+            ) : null}
+          </div>
+        );
+      })}
+    </>
+  );
+}

package/src/video/UnnamedWarn.tsx

@@ -0,0 +1,146 @@
+// UNNAMED-GENERATION WARNING (operator 2026-08-13): naming applies to EVERY
+// generate section, and the warning is an EXPLICIT per-section OPTION,
+// DEFAULT OFF, remembered per user (localStorage) — a 2-second image render
+// must never suffer a 30-second warning unless its operator asked for one.
+// ONE hook + toggle + panel for every section (house one-component rule);
+// Cinema, Clip and the Generate station all mount these.
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+const PREF_PREFIX = "vi.warnUnnamed.v1";
+
+/** localStorage-backed per-section preference; DEFAULT OFF. */
+export function useWarnUnnamedPref(section: string): [boolean, (v: boolean) => void] {
+  const key = `${PREF_PREFIX}:${section}`;
+  const [on, setOn] = useState<boolean>(() => {
+    try {
+      return localStorage.getItem(key) === "1";
+    } catch {
+      return false;
+    }
+  });
+  const set = (v: boolean) => {
+    setOn(v);
+    try {
+      localStorage.setItem(key, v ? "1" : "0");
+    } catch {
+      /* best-effort — the in-memory state still applies this session */
+    }
+  };
+  return [on, set];
+}
+
+/** The explicit option — one checkbox, same copy in every section. */
+export function WarnUnnamedToggle({
+  checked,
+  onChange,
+}: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <label
+      className="vi-knob-hint"
+      style={{ display: "inline-flex", gap: "0.35rem", alignItems: "center" }}
+      title="When on, generating without a name pauses with an inline name box for 30 seconds, then continues unnamed. Off = never interrupts. Remembered per section."
+    >
+      <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
+      warn when unnamed
+    </label>
+  );
+}
+
+/** First clause of a prompt as a derived name (≤7 words / 48 chars). */
+export function deriveNameFrom(prompt: string): string {
+  return prompt
+    .split(/[.,;\n]/)[0]
+    .trim()
+    .split(/\s+/)
+    .slice(0, 7)
+    .join(" ")
+    .slice(0, 48);
+}
+
+/**
+ * The warning panel: inline name box + "Name it" + skip-with-countdown.
+ * MOUNTING arms the expiry (default 30s); unmounting disarms it; onProceed
+ * fires exactly once (undefined name = continue unnamed).
+ */
+export function UnnamedWarnPanel({
+  noun,
+  onProceed,
+  onDismiss,
+  seconds = 30,
+}: {
+  noun: string;
+  onProceed: (name?: string) => void;
+  onDismiss?: () => void;
+  seconds?: number;
+}) {
+  const [draft, setDraft] = useState("");
+  const [left, setLeft] = useState(seconds);
+  const draftRef = useRef("");
+  draftRef.current = draft;
+  const firedRef = useRef(false);
+  const proceedRef = useRef(onProceed);
+  proceedRef.current = onProceed;
+  const fire = (name?: string) => {
+    if (firedRef.current) return;
+    firedRef.current = true;
+    proceedRef.current(name);
+  };
+  const fireRef = useRef(fire);
+  fireRef.current = fire;
+  useEffect(() => {
+    const id = window.setInterval(() => {
+      setLeft((l) => {
+        if (l <= 1) {
+          window.clearInterval(id);
+          fireRef.current(draftRef.current.trim() || undefined);
+          return 0;
+        }
+        return l - 1;
+      });
+    }, 1000);
+    return () => window.clearInterval(id);
+  }, []);
+  return (
+    <div
+      className="vi-studio-required-callout"
+      role="alert"
+      style={{ display: "flex", alignItems: "center", gap: "0.6rem", flexWrap: "wrap", marginBottom: "0.6rem" }}
+    >
+      <span>
+        This {noun} has no name — unnamed work lists as “untitled” beside a bare id
+        and is hard to tell apart later.
+      </span>
+      <input
+        type="text"
+        className="vi-knob-input"
+        style={{ flex: "1 1 12rem", minWidth: "10rem" }}
+        placeholder="name it here — or wait and it continues unnamed"
+        value={draft}
+        autoFocus
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && draft.trim()) fire(draft.trim());
+        }}
+      />
+      <button type="button" className="vi-btn vi-btn-sm" disabled={!draft.trim()} onClick={() => fire(draft.trim())}>
+        Name it &amp; generate
+      </button>
+      <button
+        type="button"
+        className="vi-btn vi-btn-sm vi-btn-ghost"
+        title="Continues automatically when the timer runs out."
+        onClick={() => fire(undefined)}
+      >
+        Generate without a name ({left}s)
+      </button>
+      {onDismiss && (
+        <button type="button" className="vi-btn vi-btn-sm vi-btn-ghost" title="Cancel this submit." onClick={onDismiss}>
+          ✕
+        </button>
+      )}
+    </div>
+  );
+}

package/src/video/useOperatorHistory.ts

@@ -0,0 +1,100 @@
+// OPERATOR HISTORY HYDRATION (operator ask 2026-08-13): the superadmin gets
+// COMPLETE visibility of previous renders in the Session Library — not just
+// what this browser tab produced. The library itself stays a per-session
+// sessionStorage working set (by design); this hook back-fills it from the
+// SERVER record once per session for an operator principal:
+//
+//   * probe: GET keysVideoShareUrl — the same 200⇒operator / 401⇒guest probe
+//     SharePanel uses (members and share guests never hydrate; their lists
+//     stay owner-scoped server-side).
+//   * source: GET /video/jobs?all=1 for terminal done generate_image /
+//     generate_scene / generate_movie rows (the list projection strips
+//     results, so each job detail is fetched for its outputs). Clips
+//     (studio_i2v) already hydrate via useStudioClips poll — not repeated.
+//   * sink: addToLibrary — idempotent by uri, tombstone-respecting (an item
+//     the operator removed stays removed), genKind-tagged so the Generate
+//     station can filter the strips by its CURRENT SECTION.
+//
+// Once-per-session guard in sessionStorage; canned demo never hydrates.
+import { useEffect } from "react";
+import { request, okValue } from "../transport/client";
+import { hugpyConfig, jobStatusUrl } from "../config";
+import { addToLibrary, type LibraryGenKind } from "./mediaLibrary";
+import { getSessionId } from "../session";
+import { isCanned } from "../demo/mode";
+import type { MediaRef } from "./contract";
+
+// generate_studio_movie = CINEMA renders — hydrated too (mapped onto the
+// generate_movie library kind: same Videos shelf, no schema change).
+const GEN_KINDS: readonly string[] = [
+  "generate_image", "generate_scene", "generate_movie", "generate_studio_movie",
+];
+// v2 (2026-08-13): the once-per-session flag must change whenever the
+// HYDRATED KINDS change — a tab that hydrated v1 (no cinema jobs) kept its
+// flag through every reload and never saw generate_studio_movie history.
+const FLAG_PREFIX = "vi.operatorHistory.v2";
+const DETAIL_CAP = 150; // newest-first; enough history without hammering the API
+
+function flagKey(): string {
+  try { return `${FLAG_PREFIX}:${getSessionId()}`; } catch { return FLAG_PREFIX; }
+}
+
+export function useOperatorHistory(): void {
+  useEffect(() => {
+    if (isCanned()) return;
+    try { if (sessionStorage.getItem(flagKey())) return; } catch { /* no-op */ }
+    let cancelled = false;
+    void (async () => {
+      // Operator probe — non-operators (401/403) never hydrate.
+      const probe = await request<unknown>(hugpyConfig.keysVideoShareUrl, {
+        meta: { specKey: "media", operation: "operator.probe" },
+      });
+      if (cancelled || !probe.ok) return;
+      // jobStatusUrl("") = `${apiBase}/video/jobs/` — trim the slash and query
+      // the list route with terminal rows included.
+      const list = await request<unknown>(
+        `${jobStatusUrl("").replace(/\/$/, "")}?all=1&limit=300`,
+        { meta: { specKey: "media", operation: "history.jobs.list" } },
+      );
+      if (cancelled || !list.ok) return;
+      const jobs = ((okValue(list) as { jobs?: unknown[] })?.jobs ?? []) as Array<
+        Record<string, unknown>
+      >;
+      const wanted = jobs
+        .filter((j) => j?.status === "done" && GEN_KINDS.includes(String(j?.name)))
+        .slice(0, DETAIL_CAP);
+      for (const j of wanted) {
+        if (cancelled) return;
+        const id = String(j.job_id ?? j.id ?? "");
+        if (!id) continue;
+        const det = await request<unknown>(jobStatusUrl(id), {
+          meta: { specKey: "media", operation: "history.job.detail" },
+        });
+        if (!det.ok) continue;
+        const result = (okValue(det) as { result?: { outputs?: unknown[] } })?.result;
+        for (const o of (result?.outputs ?? []) as Array<Record<string, unknown>>) {
+          if (!o?.uri || !o?.asset_id) continue;
+          const ref = {
+            asset_id: String(o.asset_id),
+            kind: (o.kind === "video" ? "video" : "image"),
+            uri: String(o.uri),
+            mime: (o.mime as string) ?? (o.kind === "video" ? "video/mp4" : "image/png"),
+            width: (o.width as number) ?? null,
+            height: (o.height as number) ?? null,
+            duration_s: (o.duration_s as number) ?? null,
+            fps_native: (o.fps_native as number) ?? null,
+            channels: (o.channels as number) ?? null,
+            sample_rate: (o.sample_rate as number) ?? null,
+          } as MediaRef;
+          addToLibrary(ref, "history", `${String(j.name)} · ${id.slice(0, 8)}`, {
+            genKind: (j.name === "generate_studio_movie"
+              ? "generate_movie"
+              : j.name) as LibraryGenKind,
+          });
+        }
+      }
+      try { sessionStorage.setItem(flagKey(), String(Date.now())); } catch { /* no-op */ }
+    })();
+    return () => { cancelled = true; };
+  }, []);
+}

package/src/stations/ActiveProcessesStation.tsx.bak-sessions-20260812

@@ -1,228 +0,0 @@
-// ACTIVE PROCESSES — the console-wide, placement-aware view of every in-flight
-// media-bus job (studio / movie / identity / generate / crop / extract), fed by
-// GET /video/jobs. Promotes the studio-only StudioActiveProcesses pattern to the
-// whole console and adds the two things that were invisible before:
-//
-//   • WHERE a job physically executes — the `placement` line ("ae · cuda:0 ·
-//     P-studio"), with an "external" cue when it runs OFF the central box (an ae
-//     worker, ComfyUI, or the identity-render service on :9750), plus reserved
-//     VRAM when a GPU reservation is held.
-//   • The reservation HOLD phase — a job that can't fit the card yet sits as
-//     `awaiting_capacity` (with the shortfall reason on hover + the overtaken
-//     count), not a fake "running".
-//   • WHAT it is doing right now — a moving progress bar (segments done plus the
-//     within-segment denoise fraction the runner reports) and the TAIL of the job's
-//     stage timeline, so a running render shows its last few events instead of an
-//     opaque "running" chip.
-//   • WHY it broke — a terminal-failed job renders its failure envelope VERBATIM
-//     (code + message + the stage it died in), never a generic "failed". Terminal
-//     rows arrive only with the "Show finished" filter on.
-//
-// HONEST rendering only: no fabricated progress bars — a numeric progress/stage
-// shows only when the server sends one. Cancel hits the same /video/jobs/<id>/
-// cancel seam every station uses; a held job cancels exactly like any queued job.
-import { useCallback, useEffect, useRef, useState } from "react";
-import type { StationSpec } from "./types";
-import { request } from "../transport/client";
-import { jobCancelUrl } from "../config";
-import { ProcessTimeline, shortId } from "./studio/studioShared";
-import {
-  useMediaJobs,
-  placementLine,
-  isExternal,
-  reservedGib,
-  elapsedSince,
-  progressLabel,
-  latestEvent,
-  type MediaJob,
-} from "../video/useMediaJobs";
-
-function PhaseChip({ job }: { job: MediaJob }) {
-  if (job.phase === "awaiting_capacity") {
-    const reason = job.hold?.reason ? JSON.stringify(job.hold.reason) : "";
-    const overtaken = job.hold?.overtaken ?? 0;
-    return (
-      <span
-        className="vi-status vi-status-awaiting_capacity"
-        title={
-          reason
-            ? `Held — waiting for GPU capacity. Shortfall: ${reason}`
-            : "Held — waiting for GPU capacity"
-        }
-      >
-        awaiting capacity{overtaken > 0 ? ` · jumped ${overtaken}×` : ""}
-      </span>
-    );
-  }
-  return <span className={`vi-status vi-status-${job.phase}`}>{job.phase}</span>;
-}
-
-/** The bar + its honest label. Renders nothing when the server sent no number. */
-function ProgressBar({ job }: { job: MediaJob }) {
-  if (job.progress == null) return null;
-  const pct = Math.max(0, Math.min(100, job.progress * 100));
-  return (
-    <div className="vi-job-progress">
-      <div className="vi-job-progress-track">
-        <div className="vi-job-progress-fill" style={{ width: `${pct}%` }} />
-      </div>
-      <span className="vi-job-progress-label">{progressLabel(job)}</span>
-    </div>
-  );
-}
-
-// `spec` is optional because this body has TWO mounts: the registry's /active
-// station (which always passes one) and the sidebar's ActivePanel overlay
-// (2026-08-06), which mounts it inside the shared drawer shell and has no spec
-// to hand it. The prop was already unused here, so optional costs nothing and
-// keeps ONE renderer for the feed instead of an overlay-only copy.
-export function ActiveProcessesStation({ spec: _spec }: { spec?: StationSpec } = {}) {
-  const [showFinished, setShowFinished] = useState(false);
-  const { jobs, refetch } = useMediaJobs(showFinished);
-  // Expanded rows + a 1s clock, exactly as the studio tab's sibling panel does —
-  // ProcessTimeline needs `nowMs` to age its "…since last movement" line.
-  const [expanded, setExpanded] = useState<Set<string>>(new Set());
-  const [nowMs, setNowMs] = useState(() => Date.now());
-  useEffect(() => {
-    const id = window.setInterval(() => setNowMs(Date.now()), 1000);
-    return () => window.clearInterval(id);
-  }, []);
-  const toggle = useCallback((id: string) => {
-    setExpanded((prev) => {
-      const n = new Set(prev);
-      if (n.has(id)) n.delete(id);
-      else n.add(id);
-      return n;
-    });
-  }, []);
-  const [cancelBusy, setCancelBusy] = useState<Set<string>>(new Set());
-  const mounted = useRef(true);
-
-  const onCancel = useCallback(
-    async (jobId: string) => {
-      setCancelBusy((prev) => new Set(prev).add(jobId));
-      try {
-        await request<unknown>(jobCancelUrl(jobId), {
-          method: "POST",
-          meta: { specKey: "media", operation: "media.job.cancel" },
-        });
-        if (!mounted.current) return;
-        refetch();
-      } finally {
-        if (mounted.current)
-          setCancelBusy((prev) => {
-            const n = new Set(prev);
-            n.delete(jobId);
-            return n;
-          });
-      }
-    },
-    [refetch],
-  );
-
-  return (
-    <section className="station-card station-wide vi-studio-active">
-      <h2>Active Processes</h2>
-      <p className="vi-knob-hint">
-        Every in-flight media build across the console, and WHERE it physically runs.
-        A build marked <strong>external</strong> is executing off this box — on the{" "}
-        ae worker, ComfyUI, or the identity-render service.
-      </p>
-      <label className="vi-knob-hint vi-job-filter">
-        <input
-          type="checkbox"
-          checked={showFinished}
-          onChange={(e) => setShowFinished(e.target.checked)}
-        />{" "}
-        Show finished — recent done/failed/cancelled builds, with each failure&apos;s
-        full stage timeline and its exact error.
-      </label>
-      {jobs.length === 0 ? (
-        <p className="vi-knob-hint">
-          No active builds — enqueue a render and it appears here with its placement.
-        </p>
-      ) : (
-        <ul className="vi-studio-active-list">
-          {jobs.map((j) => {
-            const line = placementLine(j.placement);
-            const gib = reservedGib(j.placement);
-            const external = isExternal(j.placement);
-            const isOpen = expanded.has(j.id);
-            const elided = j.stageLogTotal - j.stageLog.length;
-            const event = latestEvent(j);
-            return (
-              <li key={j.id} className="vi-studio-active-row">
-                <div className="vi-studio-active-head">
-                  <button
-                    type="button"
-                    className="vi-timeline-toggle"
-                    onClick={() => toggle(j.id)}
-                    aria-expanded={isOpen}
-                    title={isOpen ? "Hide detail" : "Show what it's doing"}
-                  >
-                    <span className="vi-timeline-caret" aria-hidden>
-                      {isOpen ? "▾" : "▸"}
-                    </span>
-                  </button>
-                  <PhaseChip job={j} />
-                  <span className="vi-studio-active-id">
-                    {j.name || "job"} · {shortId(j.id)}
-                  </span>
-                </div>
-                <div className="vi-studio-active-meta">
-                  {line ? (
-                    <span
-                      className={`vi-placement${external ? " vi-placement-external" : ""}`}
-                      title={external ? "Runs off the central box" : undefined}
-                    >
-                      {external ? "⇄ " : ""}
-                      {line}
-                      {external ? " · external" : ""}
-                    </span>
-                  ) : null}
-                  {gib ? <span>· {gib}</span> : null}
-                  {j.stage ? <span>· {j.stage}</span> : null}
-                  <span>· {elapsedSince(j.createdAt)}</span>
-                </div>
-                <ProgressBar job={j} />
-                {event ? <p className="vi-job-latest">{event}</p> : null}
-                {isOpen ? (
-                  <div className="vi-timeline-panel">
-                    {/* The SAME renderer the studio tab uses: the failure envelope
-                        verbatim (code · stage · message), the live "now" line, and
-                        every stage the render moved through. A live row carries a
-                        tail; a terminal one carries the whole sequence. */}
-                    <ProcessTimeline
-                      stageLog={j.stageLog}
-                      failure={j.failure}
-                      currentStage={j.stage}
-                      lastMovementTs={j.progressedAt}
-                      terminal={j.terminal}
-                      nowMs={nowMs}
-                    />
-                    {elided > 0 ? (
-                      <p className="vi-knob-hint">
-                        …{elided} earlier event{elided === 1 ? "" : "s"} — open the
-                        job for its full history.
-                      </p>
-                    ) : null}
-                  </div>
-                ) : null}
-                {j.terminal ? null : (
-                  <button
-                    type="button"
-                    className="vi-btn vi-btn-sm vi-btn-ghost"
-                    onClick={() => void onCancel(j.id)}
-                    disabled={cancelBusy.has(j.id)}
-                  >
-                    {cancelBusy.has(j.id) ? "Cancelling…" : "✕ Cancel"}
-                  </button>
-                )}
-              </li>
-            );
-          })}
-        </ul>
-      )}
-    </section>
-  );
-}