@hugpy/video-intelligence-ui 0.1.0

package/src/video/useStudioAssistLog.ts

@@ -0,0 +1,266 @@
+// STUDIO-ASSIST LIVE LOG — the client half (operator directive, 2026-07-31).
+//
+// One shared EventSource for the whole studio: the log panel (and any future
+// mount) subscribes to THIS module rather than each opening its own stream.
+// Structurally the video-arm twin of the console's evictionStream.js — a
+// module-scope store, a reference-counted connection (opens on first subscriber,
+// closes on last), a de-dup set spanning the backfill + the SSE replay window,
+// and a rowid cursor tail so the stream is correct across gunicorn workers.
+//
+// It differs from evictionStream in one way: an assist attempt is logged as ONE
+// terminal record (the generation choke point emits on failure; the mode handler
+// emits served/parse_error on success — see comms/studio_assist_log.py), so the
+// store is keyed by run_id and the newest record for a run_id wins. No folding of
+// many stage-events into a card is needed; a row IS an attempt.
+//
+// Auth rides the same path every other /video call uses: a console operator's
+// same-origin session cookie (credentials:"include" via the EventSource
+// withCredentials flag) or a stored ?share= key appended to the stream URL (an
+// EventSource cannot carry the X-Video-Share header the XHR transport uses).
+import { useEffect, useState } from "react";
+import { request, okValue } from "../transport/client";
+import { hugpyConfig } from "../config";
+import { videoShareKey } from "../share";
+
+/** One stored generate attempt — the wire shape of comms/studio_assist_log.py. */
+export interface AssistAttempt {
+  _id?: number;
+  ts?: number;
+  seq?: number;
+  worker_id?: string;
+  run_id?: string;
+  mode?: string;
+  kind?: string;
+  model_requested?: string;
+  model_resolved?: string;
+  /** The UNTRUNCATED model reply — the whole point of the log. */
+  raw?: string;
+  /** The think-stripped prose that would have been used as the prompt. */
+  text?: string;
+  /** The reasoning that was stripped out. */
+  reasoning?: string;
+  /** True when `text` was salvaged FROM the reasoning (no prose came back). */
+  from_reasoning?: boolean;
+  outcome?: "served" | "empty" | "parse_error" | "worker_error" | "resolve_error" | string;
+  error?: string;
+  elapsed_ms?: number;
+  /** The backfill route bounds a huge reply on the page load only. */
+  raw_truncated?: boolean;
+  /** Transport marker ("stream.ready") — never an attempt; filtered out. */
+  stage?: string;
+}
+
+export type ConnState = "idle" | "connecting" | "live" | "disconnected";
+
+const MAX_ATTEMPTS = 300; // oldest attempts drop off the front
+const BACKFILL_LIMIT = 300;
+const RETRY_MS = 5000;
+
+let attempts: AssistAttempt[] = []; // oldest-first
+let conn: ConnState = "idle";
+let error: string | null = null;
+let version = 0;
+
+const index = new Map<string, number>(); // run_id (or synthetic) -> position
+const seenId = new Set<number>(); // de-dup by store rowid across backfill + replay
+const listeners = new Set<() => void>();
+
+let es: EventSource | null = null;
+let refs = 0;
+let retryTimer: ReturnType<typeof setTimeout> | null = null;
+let backfilled = false;
+
+function emit(): void {
+  version++;
+  for (const fn of listeners) {
+    try {
+      fn();
+    } catch {
+      /* one bad subscriber must not stall the rest */
+    }
+  }
+}
+
+function keyOf(rec: AssistAttempt): string {
+  return rec.run_id || `solo:${rec._id ?? rec.seq ?? rec.ts ?? Math.random()}`;
+}
+
+function ingest(batch: AssistAttempt[]): void {
+  let changed = false;
+  for (const rec of batch) {
+    if (!rec || typeof rec !== "object") continue;
+    if (rec.stage === "stream.ready") continue; // transport marker, not an attempt
+    if (typeof rec._id === "number") {
+      if (seenId.has(rec._id)) continue;
+      seenId.add(rec._id);
+    }
+    const k = keyOf(rec);
+    const at = index.get(k);
+    if (at == null) {
+      index.set(k, attempts.length);
+      attempts = attempts.concat(rec);
+    } else {
+      // Newest record for a run_id wins (a terminal record supersedes any
+      // provisional one that arrived first).
+      const next = attempts.slice();
+      next[at] = { ...next[at], ...rec };
+      attempts = next;
+    }
+    changed = true;
+  }
+  if (!changed) return;
+  if (attempts.length > MAX_ATTEMPTS) {
+    attempts = attempts.slice(attempts.length - MAX_ATTEMPTS);
+    // Rebuild the index after trimming the front.
+    index.clear();
+    attempts.forEach((r, i) => index.set(keyOf(r), i));
+  }
+  emit();
+}
+
+function setConn(c: ConnState): void {
+  if (conn === c) return;
+  conn = c;
+  emit();
+}
+
+function streamUrl(): string {
+  const key = videoShareKey();
+  if (!key) return hugpyConfig.promptAssistLogStreamUrl;
+  const base = hugpyConfig.promptAssistLogStreamUrl;
+  const sep = base.includes("?") ? "&" : "?";
+  return `${base}${sep}share=${encodeURIComponent(key)}`;
+}
+
+function openStream(): void {
+  if (es) return;
+  setConn("connecting");
+  let source: EventSource;
+  try {
+    source = new EventSource(streamUrl(), { withCredentials: true });
+  } catch {
+    setConn("disconnected");
+    return;
+  }
+  es = source;
+  source.onopen = () => setConn("live");
+  source.onmessage = (e: MessageEvent) => {
+    let rec: AssistAttempt;
+    try {
+      rec = JSON.parse(e.data);
+    } catch {
+      return;
+    }
+    ingest([rec]);
+  };
+  source.onerror = () => {
+    source.close();
+    if (es === source) es = null;
+    setConn("disconnected");
+    // Reconnect only while someone is still watching. The server caps a stream at
+    // an hour and expects re-attach; the replay window + de-dup set mean no gap.
+    if (refs > 0) {
+      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;
+  }
+  setConn("idle");
+}
+
+function backfillOnce(): void {
+  if (backfilled) return;
+  backfilled = true;
+  request<{ events?: AssistAttempt[] }>(
+    `${hugpyConfig.promptAssistLogUrl}?limit=${BACKFILL_LIMIT}`,
+    { method: "GET", meta: { specKey: "studio", operation: "assist-log-backfill" } },
+  )
+    .then((res) => {
+      if (res.ok) {
+        error = null;
+        const value = okValue(res);
+        ingest(Array.isArray(value?.events) ? value.events : []);
+        emit();
+      } else {
+        error = "could not load the assist log";
+        emit();
+      }
+    })
+    .catch(() => {
+      error = "could not load the assist log";
+      emit();
+    });
+}
+
+function acquire(): void {
+  refs++;
+  if (refs === 1) {
+    backfillOnce();
+    openStream();
+  }
+}
+
+function release(): void {
+  refs = Math.max(0, refs - 1);
+  if (refs === 0) closeStream();
+}
+
+/** Force a reconnect (the panel's Reconnect button). */
+export function reconnectAssistLog(): void {
+  closeStream();
+  if (refs > 0) openStream();
+}
+
+export interface UseStudioAssistLog {
+  attempts: AssistAttempt[];
+  conn: ConnState;
+  error: string | null;
+  reconnect: () => void;
+}
+
+/** Subscribe to the shared studio-assist log stream. */
+export function useStudioAssistLog(): UseStudioAssistLog {
+  const [snap, setSnap] = useState(() => ({ attempts, conn, error, version }));
+
+  useEffect(() => {
+    acquire();
+    const onChange = () => setSnap({ attempts, conn, error, version });
+    onChange();
+    listeners.add(onChange);
+    return () => {
+      listeners.delete(onChange);
+      release();
+    };
+  }, []);
+
+  return {
+    attempts: snap.attempts,
+    conn: snap.conn,
+    error: snap.error,
+    reconnect: reconnectAssistLog,
+  };
+}
+
+/** Test/diagnostic reset — drops everything and detaches. */
+export function _resetForTests(): void {
+  closeStream();
+  attempts = [];
+  index.clear();
+  seenId.clear();
+  listeners.clear();
+  refs = 0;
+  backfilled = false;
+  error = null;
+}

package/src/video/useStudioPresets.ts

@@ -0,0 +1,128 @@
+// The Studio Clips station's PRESET dropdown source. Fetches the curated studio
+// clip presets (GET /video/studio/presets), validates them with a tolerant schema,
+// and exposes the list + loading/error as data (never throws) — the same
+// data-not-throws contract as useMoviePresets.ts, which it is cloned from.
+//
+// Two deliberate parities with useMoviePresets:
+//   1. The wire is the {presets:[…]} envelope (matches /video/presets + /movie/presets).
+//   2. The fetch is GATED behind an `active` flag so a caller can keep it idle until
+//      the station is entered (and it stays cached after). The Studio Clips station
+//      passes active=true (it only mounts when its tab is open).
+//
+// A studio preset pins a CAPABILITY ("i2v"/"t2v") + geometry + a routing
+// `vram_budget_gb` (NOT a model_key — the studio router picks the model); picking one
+// prefills the generate affordance and drives its enqueue.
+import { useCallback, useEffect, useRef, useState } from "react";
+import { z } from "zod";
+import { request, okValue, errorOf, describeAppError } from "../transport/client";
+import { hugpyConfig } from "../config";
+
+// Tolerant/passthrough — assert only the fields the station reads; a preset may omit
+// the advisory ones (the station keeps its current value). Kept INLINE (like
+// StudioClipsStation's clipSchema) so the frozen contract module stays untouched.
+export const studioPresetSchema = z
+  .object({
+    id: z.string(),
+    name: z.string(),
+    description: z.string().nullable().optional(),
+    capability: z.string(),
+    width: z.number(),
+    height: z.number(),
+    fps: z.number(),
+    vram_budget_gb: z.number().nullable().optional(),
+    seed: z.number().nullable().optional(),
+    prompt: z.string().nullable().optional(),
+    negative: z.string().nullable().optional(),
+    recommended: z.string().nullable().optional(),
+    // Slice (a) / v2v: a restyle preset (capability "v2v") is a video TRANSFORM — it
+    // needs a staged source clip to mean anything. Drives the station's restyle flow.
+    requires_source: z.boolean().nullable().optional(),
+    // Identity lock (capability "id_lock"): the preset needs ≥1 REFERENCE image (the
+    // subject to lock). Exact sibling of requires_source — same consumption pattern;
+    // the surface gates the id_lock reference-slot flow on it (and on the capability).
+    requires_reference: z.boolean().nullable().optional(),
+    // UI-honesty badge: a note about the prompt for this preset. Set on SYNTHETIC
+    // previews to state the prompt is recorded but NOT rendered (frames = seed +
+    // geometry), so an evocative scaffold never misleads. "" / absent = no badge.
+    prompt_note: z.string().nullable().optional(),
+  })
+  .passthrough();
+export type StudioPreset = z.infer<typeof studioPresetSchema>;
+
+// GET /video/studio/presets returns a {presets:[…]} envelope (matches /video/presets).
+const studioPresetsResponseSchema = z.object({ presets: z.array(studioPresetSchema) });
+
+export interface StudioPresetsState {
+  presets: StudioPreset[];
+  loading: boolean;
+  error: string | null;
+  /** Force an immediate re-fetch of the studio-preset list. */
+  refresh: () => void;
+}
+
+/**
+ * Load the curated studio clip presets. `active` gates the network call; while
+ * inactive the hook reports loading:false / an empty list (nothing to show).
+ */
+export function useStudioPresets(active: boolean): StudioPresetsState {
+  const [state, setState] = useState<Omit<StudioPresetsState, "refresh">>({
+    presets: [],
+    loading: false,
+    error: null,
+  });
+
+  const mounted = useRef(true);
+  const inFlight = useRef(false);
+  const loadedRef = useRef(false);
+  const ctrlRef = useRef<AbortController | null>(null);
+
+  const load = useCallback(async (background: boolean) => {
+    if (inFlight.current) return;
+    inFlight.current = true;
+    if (!background) setState((s) => ({ ...s, loading: true }));
+    const signal = ctrlRef.current?.signal;
+    try {
+      const res = await request<unknown>(hugpyConfig.studioPresetsUrl, {
+        signal,
+        meta: { specKey: "studio", operation: "studio.presets.list" },
+      });
+      if (!mounted.current) return;
+
+      if (!res.ok) {
+        // A background refresh that fails must not wipe a working picker.
+        if (background) return;
+        setState({ presets: [], loading: false, error: describeAppError(errorOf(res)) });
+        return;
+      }
+      const parsed = studioPresetsResponseSchema.safeParse(okValue(res));
+      if (!parsed.success) {
+        if (background) return;
+        setState({ presets: [], loading: false, error: "Malformed studio presets response." });
+        return;
+      }
+      loadedRef.current = true;
+      setState({ presets: parsed.data.presets, loading: false, error: null });
+    } finally {
+      inFlight.current = false;
+    }
+  }, []);
+
+  // Load once, the first time the station becomes active. Stays cached after.
+  useEffect(() => {
+    mounted.current = true;
+    if (!active || loadedRef.current) return;
+    const ctrl = new AbortController();
+    ctrlRef.current = ctrl;
+    void load(false);
+    return () => {
+      mounted.current = false;
+      ctrl.abort();
+    };
+  }, [active, load]);
+
+  const refresh = useCallback(() => {
+    void load(loadedRef.current);
+  }, [load]);
+
+  return { ...state, refresh };
+}

package/src/video/useWorkerCalls.ts

@@ -0,0 +1,165 @@
+// A live view of EVERY in-flight worker call across ALL transports (web / v1 /
+// discord / cli / media) — the fleet-wide feed the session jobTracker CANNOT see,
+// because the tracker only knows jobs THIS browser enqueued. GET /llm/jobs is the
+// authoritative unified feed; this hook polls it, keeps the in-flight rows
+// (pending / processing / streaming), drops `download` provisioning (shown
+// elsewhere, and there can be dozens), and hands the survivors to the shared Active
+// Processes panel so an identity reconstruction (kind:"identity_reconstruction",
+// transport:"media") — or any render from another station — shows up even though
+// this browser never launched it.
+//
+// Cadence ~2s (the panel doesn't need the tracker's 800ms poll); a fetch error
+// keeps the last-good list rather than flashing empty. Mounted-ref guarded so a
+// late poll never setState after unmount, and the interval is cleared on unmount.
+import { useCallback, useEffect, useRef, useState } from "react";
+import { hugpyConfig } from "../config";
+import { request, okValue } from "../transport/client";
+
+/** Poll cadence for the unified worker-call feed. */
+const POLL_MS = 2000;
+
+/** In-flight statuses from the /llm/jobs feed (everything else is terminal/idle). */
+const IN_FLIGHT = new Set(["pending", "processing", "streaming"]);
+
+/** One in-flight worker call, projected from a /llm/jobs row for the panel. */
+export interface WorkerCall {
+  /** Server job id — the cancel handle + the dedup key against a TrackedJob.jobId. */
+  id: string;
+  /** Raw job kind (humanized for display in the row). */
+  kind: string;
+  /** In-flight status: pending | processing | streaming. */
+  status: string;
+  /** Transport that launched it — decides the cancel endpoint (media vs llm chat). */
+  transport: string;
+  /** Model label if the feed carries one (model_name preferred over model). */
+  model: string | null;
+  /** Serving worker name if present. */
+  worker: string | null;
+  /**
+   * ms-epoch start anchor, derived from the server `elapsed` seconds at poll time —
+   * the row's live clock reads (now - startedAt), so the elapsed ticks between polls
+   * and re-aligns to the server's truth on every refresh.
+   */
+  startedAt: number;
+  /**
+   * Fractional progress 0..1 if the feed carries it, else null (unknown → the row
+   * shows an indeterminate "working" bar rather than a fabricated percentage).
+   */
+  progress: number | null;
+  /** Free-text status line the worker is currently emitting (if any). */
+  message: string | null;
+  /** Coarse pipeline stage label (e.g. "sampling", "encoding") if the feed carries it. */
+  stage: string | null;
+  /** Last ≤40 log lines, NEWEST LAST — the scrolling tail in the expanded panel. */
+  logTail: string[];
+  /** Server-asserted wedged flag: the render is not making progress. */
+  stalled: boolean;
+  /** True once a cancel was requested and the server acknowledged it. */
+  cancelRequested: boolean;
+  /**
+   * ms-epoch of the last observed movement (server `updated_at`), or null. The row
+   * derives "last movement Ns ago" as (now - updatedAt) and flips to a stalled look
+   * when that exceeds the stall window, so a frozen render stops reading as live.
+   */
+  updatedAt: number | null;
+}
+
+function str(v: unknown): string | null {
+  return typeof v === "string" && v.trim() ? v : null;
+}
+
+/** Clamp an arbitrary progress reading into the renderable 0..1 band. */
+function clamp01(v: number): number {
+  return v < 0 ? 0 : v > 1 ? 1 : v;
+}
+
+// A server timestamp → ms-epoch. Tolerates epoch SECONDS (the arm's usual wire
+// form, ~1.7e9), epoch MILLISECONDS (~1.7e12), and ISO strings; anything else → null.
+function toMs(v: unknown): number | null {
+  if (typeof v === "number" && isFinite(v)) return v < 1e12 ? v * 1000 : v;
+  if (typeof v === "string" && v.trim()) {
+    const t = Date.parse(v);
+    return isFinite(t) ? t : null;
+  }
+  return null;
+}
+
+// Project the /llm/jobs envelope into the in-flight WorkerCall rows. Defensive by
+// construction (no zod schema for this feed, and strictNullChecks is off in the
+// arm's tsconfig): a malformed row is skipped, never thrown.
+function parseJobs(raw: unknown, at: number): WorkerCall[] {
+  const jobs = (raw as { jobs?: unknown } | null)?.jobs;
+  if (!Array.isArray(jobs)) return [];
+  const out: WorkerCall[] = [];
+  for (const j of jobs) {
+    if (!j || typeof j !== "object") continue;
+    const row = j as Record<string, unknown>;
+    const id = str(row.id);
+    if (!id) continue;
+    const kind = str(row.kind) ?? "";
+    if (kind === "download") continue; // provisioning — shown elsewhere
+    const status = str(row.status) ?? "";
+    if (!IN_FLIGHT.has(status)) continue;
+    const elapsed =
+      typeof row.elapsed === "number" && isFinite(row.elapsed) ? row.elapsed : 0;
+    // NEW fields (a parallel backend change adds progress/stage/log_tail; until it
+    // ships these read absent) — all optional, projected defensively so a bare
+    // legacy row still renders, just without the richer expanded detail.
+    const progress =
+      typeof row.progress === "number" && isFinite(row.progress)
+        ? clamp01(row.progress)
+        : null;
+    const logTail = Array.isArray(row.log_tail)
+      ? row.log_tail.filter((l): l is string => typeof l === "string").slice(-40)
+      : [];
+    out.push({
+      id,
+      kind,
+      status,
+      transport: str(row.transport) ?? "",
+      model: str(row.model_name) ?? str(row.model),
+      worker: str(row.worker),
+      startedAt: at - Math.max(0, elapsed) * 1000,
+      progress,
+      message: str(row.message),
+      stage: str(row.stage),
+      logTail,
+      stalled: row.stalled === true,
+      cancelRequested: row.cancel_requested === true,
+      updatedAt: toMs(row.updated_at),
+    });
+  }
+  return out;
+}
+
+/**
+ * The live in-flight worker calls + a manual `refetch` (fired right after a cancel,
+ * so the row disappears without waiting for the next poll tick). Polls only while a
+ * consumer is mounted — the panel mounts it only on the Active Processes tab, so no
+ * background polling when that tab is closed.
+ */
+export function useWorkerCalls(): { calls: WorkerCall[]; refetch: () => void } {
+  const [calls, setCalls] = useState<WorkerCall[]>([]);
+  const mounted = useRef(true);
+
+  const load = useCallback(async () => {
+    const r = await request<unknown>(hugpyConfig.llmJobsUrl, {
+      meta: { specKey: "workers", operation: "worker.calls.poll" },
+    });
+    if (!mounted.current) return;
+    if (!r.ok) return; // transient — keep last-good, retry next tick
+    setCalls(parseJobs(okValue(r), Date.now()));
+  }, []);
+
+  useEffect(() => {
+    mounted.current = true;
+    void load();
+    const id = window.setInterval(() => void load(), POLL_MS);
+    return () => {
+      mounted.current = false;
+      window.clearInterval(id);
+    };
+  }, [load]);
+
+  return { calls, refetch: load };
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "strict": false,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src", "entry.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+// Standalone build of the video-intelligence "arm" of the hugpy ecosystem —
+// sibling of media_intelligence_ui with the same posture:
+// - Served at /video by the hugpy dev UI's origin, so `base` makes every asset
+//   URL resolve under that path.
+// - Native toolchain (Vite + Tailwind v4), deliberately NOT integrated into the
+//   dev UI's webpack build.
+// - Dials the SAME-ORIGIN current-hugpy API (/api) — see src/config.ts. Override
+//   the base with VITE_HUGPY_API_BASE at build time if needed.
+export default defineConfig({
+  base: "/video/",
+  plugins: [react(), tailwindcss()],
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+  },
+  // Standalone `vite dev` / `vite preview` reach the same-origin API by proxying
+  // /api to the local hugpy Flask backend, stripping the /api prefix exactly like
+  // the webpack devServer (dev/ui) and prod nginx do. Override the target with
+  // HUGPY_API_URL.
+  server: {
+    proxy: {
+      "/api": {
+        target: process.env.HUGPY_API_URL || "http://127.0.0.1:7002",
+        changeOrigin: true,
+        rewrite: (p) => p.replace(/^\/api/, ""),
+      },
+    },
+  },
+});