@hugpy/video-intelligence-ui 0.1.0

package/src/stations/studio/IdentityProfileControls.tsx

@@ -0,0 +1,262 @@
+// IDENTITY PROFILES — the shared "Identity" control block both studio surfaces
+// (the Clip Generate tab + the Movie composer) embed as ONE additive row in their
+// existing identity/reference area. It does NOT re-draw the reference thumbnails —
+// the host surface's own chip UI already shows whatever is attached; this block adds
+// only the profile affordances on top:
+//
+//   • "👤 From profile" — a picker of saved profiles (name + first-ref thumbnail);
+//     picking one RESOLVES its saved paths back to MediaRefs and hands them to the
+//     host (replace-semantics: a profile IS the whole identity), and binds the slug.
+//   • "💾 Save as identity profile" — enabled once ≥1 reference is attached and the
+//     current identity is UNSAVED; prompts for a name (window.prompt, v0) and POSTs.
+//
+// DOCTRINE (operator 2026-07-12): present ONE concept — "Identity" — backed by
+// profiles. A chosen profile shows as a named, saved identity; ad-hoc uploads are an
+// honest "unsaved identity" with the save affordance (the incomplete case is STILL
+// the identity, just unnamed). The host prefers sending `identity_profile:<slug>` when
+// a profile is bound; raw reference_images only for the unsaved case. (Stage (b) —
+// turnaround generation + the re-edit loop that promotes an approved rendering to the
+// canonical reference — layers on top of this next.)
+import { useState, type MouseEvent } from "react";
+import { mediaBytesUrl } from "../../config";
+import type { MediaRef } from "../../video/contract";
+import { useIdentityProfiles } from "./useIdentityProfiles";
+import type { IdentityProfile } from "./useIdentityProfiles";
+
+/** The profile currently bound as the identity (or null for an unsaved/empty one). */
+export interface SelectedProfile {
+  slug: string;
+  name: string;
+}
+
+export interface IdentityProfileControlsProps {
+  /** How many identity references are attached right now (gates Save + status copy). */
+  refCount: number;
+  /** The raw jailed URIs of the attached references — what Save persists. */
+  currentRefUris: string[];
+  /** The bound profile, if the current identity came from one (else null = unsaved). */
+  selectedProfile: SelectedProfile | null;
+  /** Attach a profile's resolved reference set into the host's OWN reference state.
+   *  `replace` is true for a profile pick (the profile is the whole identity). */
+  onAttach: (refs: MediaRef[], replace: boolean) => void;
+  /** Bind (or clear, with null) the profile slug the host sends as identity_profile. */
+  onSelectProfile: (p: SelectedProfile | null) => void;
+  /** Upper bound on references (4) — advisory copy only. */
+  maxRefs: number;
+  /** Disable all affordances (host is busy / submitting). */
+  disabled?: boolean;
+}
+
+export function IdentityProfileControls({
+  refCount,
+  currentRefUris,
+  selectedProfile,
+  onAttach,
+  onSelectProfile,
+  maxRefs,
+  disabled,
+}: IdentityProfileControlsProps) {
+  const { profiles, loading, error, create, remove, resolveRefs } = useIdentityProfiles();
+  const [open, setOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState<string | null>(null);
+
+  const canSave = refCount > 0 && selectedProfile == null && !disabled && !busy;
+
+  async function pick(profile: IdentityProfile) {
+    if (disabled || busy) return;
+    setBusy(true);
+    setMsg(null);
+    try {
+      const refs = await resolveRefs(profile);
+      if (refs.length === 0) {
+        setMsg("Could not load that profile's reference images.");
+        return;
+      }
+      // A profile IS the identity — replace the current set with the profile's.
+      onAttach(refs.slice(0, maxRefs), true);
+      onSelectProfile({ slug: profile.slug, name: profile.name });
+      setOpen(false);
+      setMsg(`Identity set to “${profile.name}”.`);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function save() {
+    if (!canSave) return;
+    const name = window.prompt("Name this identity profile:");
+    if (name == null) return; // cancelled
+    const trimmed = name.trim();
+    if (!trimmed) {
+      setMsg("A name is required to save an identity profile.");
+      return;
+    }
+    setBusy(true);
+    setMsg(null);
+    try {
+      const res = await create(trimmed, currentRefUris);
+      if (res.ok && res.profile) {
+        // The just-saved profile becomes the bound identity (its refs are already
+        // attached), flipping the surface from "unsaved" to a named profile.
+        onSelectProfile({ slug: res.profile.slug, name: res.profile.name });
+        setMsg(`Saved identity profile “${res.profile.name}”.`);
+      } else if (res.duplicate) {
+        setMsg(`An identity profile named “${trimmed}” already exists — pick it from 👤 From profile, or choose another name.`);
+      } else {
+        setMsg(res.message || "Could not save the identity profile.");
+      }
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function archive(profile: IdentityProfile, e: MouseEvent) {
+    e.stopPropagation();
+    if (disabled || busy) return;
+    if (!window.confirm(`Archive identity profile “${profile.name}”? (It is kept, not erased.)`)) return;
+    setBusy(true);
+    try {
+      await remove(profile.slug);
+      if (selectedProfile?.slug === profile.slug) onSelectProfile(null);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div style={{ marginTop: "0.4rem" }}>
+      <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap", alignItems: "center" }}>
+        <button
+          type="button"
+          className="vi-btn vi-btn-sm vi-btn-ghost"
+          disabled={disabled || busy}
+          aria-expanded={open}
+          onClick={() => setOpen((v) => !v)}
+          title="Attach a saved identity profile's reference set"
+        >
+          {open ? "Hide profiles" : `👤 From profile${profiles.length ? ` (${profiles.length})` : ""}`}
+        </button>
+        <button
+          type="button"
+          className="vi-btn vi-btn-sm vi-btn-ghost"
+          disabled={!canSave}
+          onClick={() => void save()}
+          title={
+            refCount === 0
+              ? "Attach at least one reference image first"
+              : selectedProfile != null
+                ? "This identity is already a saved profile"
+                : "Save these references as a reusable identity profile"
+          }
+        >
+          💾 Save as identity profile
+        </button>
+        {selectedProfile != null ? (
+          <span className="vi-comfy-hint" role="status" style={{ opacity: 0.85 }}>
+            Identity: <strong>{selectedProfile.name}</strong> — saved profile ✓
+            <button
+              type="button"
+              className="vi-btn vi-btn-sm vi-btn-ghost"
+              disabled={disabled || busy}
+              onClick={() => onSelectProfile(null)}
+              title="Unbind the profile (keep the images as an unsaved identity)"
+              style={{ marginLeft: "0.4rem", padding: "0 0.35rem" }}
+            >
+              unbind
+            </button>
+          </span>
+        ) : refCount > 0 ? (
+          <span className="vi-comfy-hint" role="status" style={{ opacity: 0.75 }}>
+            Unsaved identity — save it to reuse across clips &amp; movies.
+          </span>
+        ) : null}
+      </div>
+
+      {open && (
+        <div
+          style={{
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "0.5rem",
+            marginTop: "0.5rem",
+            maxHeight: "12rem",
+            overflowY: "auto",
+          }}
+        >
+          {loading ? (
+            <p className="vi-comfy-hint">Loading identity profiles…</p>
+          ) : error ? (
+            <p className="vi-error" role="alert">{error}</p>
+          ) : profiles.length === 0 ? (
+            <p className="vi-comfy-hint">
+              No saved identity profiles yet — attach reference image(s) and press
+              “💾 Save as identity profile” to create one.
+            </p>
+          ) : (
+            profiles.map((p) => (
+              <button
+                key={p.slug}
+                type="button"
+                className="vi-btn vi-btn-ghost"
+                disabled={disabled || busy}
+                onClick={() => void pick(p)}
+                title={`Use “${p.name}” (${p.reference_images.length} reference${
+                  p.reference_images.length === 1 ? "" : "s"
+                })`}
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: "0.2rem",
+                  padding: "0.3rem",
+                  position: "relative",
+                }}
+              >
+                <img
+                  src={mediaBytesUrl(p.reference_images[0])}
+                  alt={p.name}
+                  style={{
+                    width: "4.5rem",
+                    height: "4.5rem",
+                    objectFit: "cover",
+                    borderRadius: "0.35rem",
+                    background: "#000",
+                  }}
+                />
+                <span style={{ fontSize: "0.75rem", maxWidth: "5rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                  {p.name}
+                </span>
+                <span
+                  role="button"
+                  tabIndex={-1}
+                  aria-label={`Archive ${p.name}`}
+                  onClick={(e) => void archive(p, e)}
+                  title="Archive (kept, not erased)"
+                  style={{
+                    position: "absolute",
+                    top: -4,
+                    right: -4,
+                    background: "var(--vi-border)",
+                    borderRadius: "0.3rem",
+                    padding: "0 0.3rem",
+                    fontSize: "0.72rem",
+                    lineHeight: 1.4,
+                  }}
+                >
+                  ✕
+                </span>
+              </button>
+            ))
+          )}
+        </div>
+      )}
+
+      {msg && (
+        <p className="vi-comfy-hint" role="status" style={{ marginTop: "0.3rem" }}>
+          {msg}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/stations/studio/StudioActiveProcesses.tsx

@@ -0,0 +1,224 @@
+// ACTIVE PROCESSES tab — the in-flight STUDIO jobs (queued / claimed / running) as a
+// focused live panel. Each row is EXPANDABLE into the exhaustive per-process view:
+// the stage TIMELINE (what it did + what it's doing now), the current-activity line,
+// an honest stall indicator tied to the current stage, and — on failure — the exact
+// failing stage + error code + message. This replaces the old "expands to a loading
+// bar that never populates" with real, server-sent detail (no fabricated bars).
+//
+// SCOPE (operator, 2026-07-31): this panel is fed by GET /video/studio/clips, which is
+// `WHERE name='studio_i2v'` — so it lists ONLY studio-originated renders, never general
+// fleet model calls. Cancel here therefore only ever stops a studio render.
+//
+// The GET /video/studio/clips route projects `progress` (incl. the reservation
+// awaiting_capacity HOLD marker), a `placement` object, and the new stage-timeline
+// telemetry (stage_log / failure / current_stage / last_movement_ts). Terminal rows
+// (done / failed / cancelled) stay in the Library tab, where their full timeline +
+// failure detail is inspectable via the Details expander.
+import { useCallback, useEffect, useRef, useState } from "react";
+import { request } from "../../transport/client";
+import { jobCancelUrl } from "../../config";
+import {
+  shortId,
+  ProcessTimeline,
+  isStalled,
+  type Clip,
+  type StageEntry,
+  type JobFailure,
+} from "./studioShared";
+import { placementLine, isExternal, reservedGib, type Placement } from "../../video/useMediaJobs";
+
+const IN_FLIGHT = new Set(["queued", "claimed", "running", "cancelling"]);
+const TERMINAL = new Set(["done", "failed", "cancelled"]);
+
+function elapsed(c: Clip): string {
+  const t = c.created ?? c.updated;
+  if (t == null) return "";
+  const secs = Math.max(0, Math.floor(Date.now() / 1000 - t));
+  if (secs < 60) return `${secs}s`;
+  const m = Math.floor(secs / 60);
+  return `${m}m ${secs % 60}s`;
+}
+
+// The clip's `placement` rides the wire in snake_case; adapt it to the camelCase
+// Placement the shared render helpers expect. null when the clip carries none.
+function clipPlacement(c: Clip): Placement | null {
+  const p = (c as { placement?: Record<string, unknown> | null }).placement;
+  if (!p || typeof p !== "object") return null;
+  const s = (v: unknown) => (typeof v === "string" && v ? v : null);
+  const n = (v: unknown) => (typeof v === "number" && isFinite(v) ? v : null);
+  return {
+    source: s(p.source),
+    host: s(p.host),
+    workerId: s(p.worker_id),
+    gpu: s(p.gpu),
+    process: s(p.process),
+    reservedBytes: n(p.reserved_bytes),
+  };
+}
+
+// The effective phase chip: the reservation awaiting_capacity HOLD overrides the
+// raw status (the clip's progress blob carries the marker), else the raw status.
+function clipPhase(c: Clip): string {
+  const prog = (c as { progress?: Record<string, unknown> | null }).progress;
+  if (prog && typeof prog === "object" && prog.phase === "awaiting_capacity")
+    return "awaiting_capacity";
+  return c.status ?? "";
+}
+
+export function StudioActiveProcesses({
+  clips,
+  refresh,
+}: {
+  clips: Clip[];
+  refresh: () => void;
+}) {
+  const [cancelBusy, setCancelBusy] = useState<Set<string>>(new Set());
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  // A ~1s tick so the stall clock + "since last movement" advance live (independent
+  // of the 6s clip poll), without any fabricated progress.
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    const iv = window.setInterval(() => setNowMs(Date.now()), 1000);
+    return () => {
+      mounted.current = false;
+      window.clearInterval(iv);
+    };
+  }, []);
+
+  const toggle = useCallback((jobId: string) => {
+    setExpanded((prev) => {
+      const n = new Set(prev);
+      if (n.has(jobId)) n.delete(jobId);
+      else n.add(jobId);
+      return n;
+    });
+  }, []);
+
+  const onCancel = useCallback(
+    async (jobId: string) => {
+      setCancelBusy((prev) => new Set(prev).add(jobId));
+      try {
+        await request<unknown>(jobCancelUrl(jobId), {
+          method: "POST",
+          meta: { specKey: "studio", operation: "studio.clip.cancel" },
+        });
+        if (!mounted.current) return;
+        refresh();
+      } finally {
+        if (mounted.current)
+          setCancelBusy((prev) => {
+            const n = new Set(prev);
+            n.delete(jobId);
+            return n;
+          });
+      }
+    },
+    [refresh],
+  );
+
+  const active = clips.filter((c) => IN_FLIGHT.has(c.status ?? ""));
+  // Queue position: Nth among QUEUED jobs (oldest first) — a client-side, honest index.
+  const queuePos = new Map<string, number>();
+  active
+    .filter((c) => (c.status ?? "") === "queued")
+    .slice()
+    .sort((a, b) => (a.created ?? 0) - (b.created ?? 0))
+    .forEach((c, i) => queuePos.set(c.job_id, i + 1));
+
+  return (
+    <div className="vi-studio-active">
+      <p className="vi-knob-headline">
+        Active renders{" "}
+        <span className="vi-knob-headline-sub">running &amp; queued studio jobs</span>
+      </p>
+      {active.length === 0 ? (
+        <p className="vi-knob-hint">No active renders — enqueue one and it appears here.</p>
+      ) : (
+        <ul className="vi-studio-active-list">
+          {active.map((c) => {
+            const phase = clipPhase(c);
+            const pos = queuePos.get(c.job_id);
+            const el = elapsed(c);
+            const pl = clipPlacement(c);
+            const line = placementLine(pl);
+            const gib = reservedGib(pl);
+            const external = isExternal(pl);
+            const phaseLabel =
+              phase === "awaiting_capacity" ? "awaiting capacity" : phase;
+            const isOpen = expanded.has(c.job_id);
+            const terminal = TERMINAL.has(c.status ?? "");
+            const stageLog = (c.stage_log ?? null) as StageEntry[] | null;
+            const failure = (c.failure ?? null) as JobFailure | null;
+            const stalled = isStalled(c.last_movement_ts, terminal, nowMs);
+            return (
+              <li key={c.job_id} className="vi-studio-active-row">
+                <div className="vi-studio-active-head">
+                  <button
+                    type="button"
+                    className="vi-timeline-toggle"
+                    onClick={() => toggle(c.job_id)}
+                    aria-expanded={isOpen}
+                    title={isOpen ? "Hide detail" : "Show what it's doing"}
+                  >
+                    <span className="vi-timeline-caret" aria-hidden>
+                      {isOpen ? "▾" : "▸"}
+                    </span>
+                  </button>
+                  <span
+                    className={`vi-status vi-status-${phase}`}
+                    title={
+                      phase === "awaiting_capacity"
+                        ? "Held — waiting for GPU capacity"
+                        : undefined
+                    }
+                  >
+                    {phaseLabel}
+                  </span>
+                  {stalled ? <span className="vi-timeline-stall-badge">stalled</span> : null}
+                  <span className="vi-studio-active-id">{shortId(c.job_id)}</span>
+                </div>
+                <div className="vi-studio-active-meta">
+                  {line ? (
+                    <span
+                      className={`vi-placement${external ? " vi-placement-external" : ""}`}
+                    >
+                      {external ? "⇄ " : ""}
+                      {line}
+                      {external ? " · external" : ""}
+                    </span>
+                  ) : null}
+                  {c.current_stage ? <span>· {c.current_stage.replace(/_/g, " ")}</span> : null}
+                  {gib ? <span>· {gib}</span> : null}
+                  {pos != null ? <span>· queue #{pos}</span> : null}
+                  {el ? <span>· {el}</span> : null}
+                </div>
+                {isOpen ? (
+                  <div className="vi-timeline-panel">
+                    <ProcessTimeline
+                      stageLog={stageLog}
+                      failure={failure}
+                      currentStage={c.current_stage}
+                      lastMovementTs={c.last_movement_ts}
+                      terminal={terminal}
+                      nowMs={nowMs}
+                    />
+                  </div>
+                ) : null}
+                <button
+                  type="button"
+                  className="vi-btn vi-btn-sm vi-btn-ghost"
+                  onClick={() => void onCancel(c.job_id)}
+                  disabled={cancelBusy.has(c.job_id)}
+                >
+                  {cancelBusy.has(c.job_id) ? "Cancelling…" : "✕ Cancel"}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}