@hugpy/video-intelligence-ui 0.1.0 → 0.3.0

package/src/style/app.css

@@ -4808,6 +4808,76 @@ button.vi-studio-src-thumb {
   box-shadow: none;
 }
 
+/* ═══ TOK/S OVERVIEW (live inference throughput) ══════════════════════════════
+   Reuses the assistlog dot/badge/chip/row language; only the layout that is
+   genuinely new to this panel gets rules here. */
+.vi-toks-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.vi-toks-cadence {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-family: var(--vi-mono);
+  font-size: 0.78rem;
+}
+.vi-toks-heading {
+  margin: 1rem 0 0.4rem;
+  font-size: 0.82rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--vi-text-dim);
+}
+.vi-toks-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  font-size: 0.82rem;
+}
+.vi-toks-tok {
+  font-family: var(--vi-mono);
+  font-weight: 600;
+  color: var(--vi-text);
+}
+.vi-toks-model {
+  font-family: var(--vi-mono);
+  color: var(--vi-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 16ch;
+}
+.vi-toks-worker { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vi-toks-ago { margin-left: auto; }
+.vi-toks-rank { min-width: 2.2ch; }
+
+/* Per-worker strip: a wrapping row of compact cards. */
+.vi-toks-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.vi-toks-worker-card {
+  border: 1px solid var(--vi-border);
+  border-radius: 6px;
+  background: var(--vi-surface);
+  padding: 0.4rem 0.6rem;
+  min-width: 9rem;
+}
+.vi-toks-worker-name { font-size: 0.8rem; font-weight: 600; }
+.vi-toks-worker-nums { margin-top: 0.15rem; }
+.vi-toks-worker-model {
+  margin-top: 0.15rem;
+  font-family: var(--vi-mono);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* Cross-model tester button — deliberately distinct from ghost so it reads as
    its own affordance on every generate tab (operator: "not seeing the tester"). */
 .vi-btn.vi-btn-tester {
@@ -4972,3 +5042,109 @@ button.vi-studio-src-thumb {
 .vi-about-body p {
   margin: 0;
 }
+
+/* Session-library grouped sections (LibraryGroups.tsx) */
+.vi-lib-group { margin: 0.35rem 0; }
+.vi-lib-group-head { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; }
+.vi-lib-count { opacity: 0.65; font-size: 0.8em; }
+
+/* PROMPT ASSIST one-row consolidation (operator 2026-08-13): the model select
+   must never push Enhance/Generate to a second row — it shrinks with an
+   ellipsized closed face (the OPEN dropdown list always shows full names,
+   that is native <select> behavior). Buttons never shrink. */
+.vi-prompt-assist > select.vi-select-sm {
+  flex: 0 1 auto;
+  min-width: 8rem;
+  max-width: 24rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.vi-prompt-assist > button { flex: 0 0 auto; }
+
+/* ── k93 — Scene group prompt-assist toolbar + part-card expansions ─────────
+   Three-line toolbar ([model] / [range][select all][negatives][std.] /
+   [generate][enhance][+ video]), the inline attach / pretext panels, the
+   pull-frame row and the per-card assist row. All on the existing .vi-btn /
+   .vi-knob language; only the new pieces get rules. */
+.vi-sr-only {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.vi-prompt-toolbar-group {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.45rem;
+}
+.vi-prompt-toolbar-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.6rem;
+}
+.vi-prompt-toolbar-range {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+.vi-prompt-toolbar-range-input {
+  width: 3.6rem;
+  padding: 0.15rem 0.35rem;
+}
+.vi-prompt-toolbar-neg,
+.vi-prompt-toolbar-std {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+/* The on/off switch button — accent when on. */
+.vi-toggle {
+  min-width: 2.6rem;
+  font-family: var(--vi-mono);
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.vi-toggle-on,
+.vi-btn-on {
+  color: var(--vi-accent);
+  border-color: var(--vi-accent);
+}
+/* An attach / pretext / identity panel expanded inline under its button row. */
+.vi-gen-inline-attach {
+  margin: 0.35rem 0 0.5rem;
+  padding: 0.5rem 0.6rem;
+  border: 1px dashed var(--vi-border);
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.vi-gen-part-media-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.vi-gen-part-pullframe {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem;
+}
+.vi-gen-pull-input {
+  width: 4.5rem;
+  padding: 0.15rem 0.35rem;
+}
+.vi-gen-part-assist-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem 0.75rem;
+}

package/src/video/LengthRow.tsx

@@ -0,0 +1,189 @@
+// LENGTH ROW (operator 2026-08-13, linkage reworked 2026-08-27): one dedicated
+// row for clip length — fps | length-frames | length-seconds — any TWO set the
+// THIRD. The derived field is the one LEAST-RECENTLY touched (and starts as
+// FRAMES = fps × seconds); it renders dimmed but stays editable — typing in it
+// makes IT authoritative and demotes the stalest of the other two. Seconds
+// never leaves the browser: the payload stays fps + frames; the server still
+// clamps to the model ceiling and snaps to the 4k+1 cadence (the hint says so).
+// ONE component for every frames-based surface (clip, cinema movie-level,
+// cinema per-goal — where fps is movie-level and renders fixed/grey, so
+// frames<->seconds derive against it).
+import { useEffect, useRef, useState } from "react";
+
+type Field = "fps" | "frames" | "seconds";
+
+export function LengthRow({
+  idPrefix,
+  fps,
+  onFps,
+  fpsFixedReason,
+  frames,
+  onFrames,
+  defaultFrames = 81,
+  framesPlaceholder = "model default (81)",
+}: {
+  idPrefix: string;
+  /** Current fps (host state, a number). */
+  fps: number;
+  /** Omit to render fps FIXED (grey) — e.g. cinema per-goal, where fps is movie-level. */
+  onFps?: (n: number) => void;
+  /** Tooltip explaining WHY fps is fixed, when it is. */
+  fpsFixedReason?: string;
+  /** Frames as the host stores it: a string, "" = model default. */
+  frames: string;
+  onFrames: (v: string) => void;
+  defaultFrames?: number;
+  framesPlaceholder?: string;
+}) {
+  const [secondsText, setSecondsText] = useState("");
+  // Last-two-touched ring; the missing one is DERIVED. Starts seconds+fps, so
+  // FRAMES opens as the derived display (frames = fps × seconds, e.g. 24 × 3.4)
+  // and an fps edit keeps the duration by recomputing frames — while the first
+  // direct frames edit demotes seconds (fps stays put), matching "the derived
+  // slot is whichever the user adjusted longest ago".
+  const touchRef = useRef<Field[]>(["seconds", "fps"]);
+  const touch = (f: Field) => {
+    const t = touchRef.current.filter((x) => x !== f);
+    t.push(f);
+    touchRef.current = t.slice(-2);
+  };
+  const fields: Field[] = ["fps", "frames", "seconds"];
+  // The derived slot is the field touched LONGEST ago. When fps is fixed it can
+  // never be the derived (writable) target: fall back to the STALER of
+  // frames/seconds — touchRef is ordered oldest→newest, so that's [0].
+  const deriveNow = (): Field => {
+    const missing = fields.find((f) => !touchRef.current.includes(f)) ?? "seconds";
+    if (!onFps && missing === "fps") return touchRef.current[0];
+    return missing;
+  };
+  const derived = deriveNow();
+
+  const framesNum = frames.trim() === "" ? null : Number(frames);
+  const effFrames = framesNum != null && Number.isFinite(framesNum) ? framesNum : defaultFrames;
+  const secondsNum = secondsText.trim() === "" ? null : Number(secondsText);
+
+  const secondsDisplay =
+    derived === "seconds"
+      ? fps > 0
+        ? (effFrames / fps).toFixed(1)
+        : ""
+      : secondsText;
+  const framesDisplay = derived === "frames" && frames.trim() === "" ? String(effFrames) : frames;
+
+  const dim = (f: Field) =>
+    derived === f ? { opacity: 0.55 } : undefined;
+  const derivedTitle =
+    "Derived from the other two — type here to make this the authoritative value.";
+
+  // Handlers recompute the derived slot AFTER recording the touch — the
+  // render-time `derived` is one edit behind by definition (touchRef is a ref),
+  // and using it here is what used to make a seconds edit silently rewrite fps.
+  const selfFpsRef = useRef(false);
+  const changeFps = (v: string) => {
+    const n = Number(v);
+    if (!onFps || !Number.isFinite(n) || n < 1) return;
+    selfFpsRef.current = true;
+    onFps(Math.round(n));
+    touch("fps");
+    if (deriveNow() === "frames") {
+      // frames = fps × seconds; when the user never typed seconds, derive it
+      // from what the row currently shows so the duration they see is kept.
+      const s = secondsNum != null && secondsNum > 0 ? secondsNum : fps > 0 ? effFrames / fps : null;
+      if (s != null && s > 0) onFrames(String(Math.max(1, Math.round(s * Math.round(n)))));
+    }
+  };
+  const changeFrames = (v: string) => {
+    onFrames(v);
+    touch("frames");
+    const n = Number(v);
+    if (!Number.isFinite(n) || n <= 0) return;
+    if (deriveNow() === "fps" && onFps && secondsNum != null && secondsNum > 0) {
+      onFps(Math.max(1, Math.round(n / secondsNum)));
+    }
+    // derived "seconds" needs no write — its display recomputes from frames/fps.
+  };
+  const changeSeconds = (v: string) => {
+    setSecondsText(v);
+    touch("seconds");
+    const n = Number(v);
+    if (!Number.isFinite(n) || n <= 0) return;
+    if (deriveNow() === "fps" && onFps && framesNum != null && framesNum > 0) {
+      onFps(Math.max(1, Math.round(framesNum / n)));
+    } else if (fps > 0) {
+      onFrames(String(Math.max(1, Math.round(n * fps))));
+    }
+  };
+  // fps can also change OUTSIDE this row (the sidebar fps knob shares the same
+  // host state). Treat that exactly like typing in the fps cell here: fps is
+  // now the freshest value, and if frames is the derived slot it follows
+  // fps × seconds so the duration the user chose is preserved.
+  const lastFpsRef = useRef(fps);
+  useEffect(() => {
+    if (fps === lastFpsRef.current) return;
+    lastFpsRef.current = fps;
+    if (selfFpsRef.current) {
+      selfFpsRef.current = false;
+      return;
+    }
+    touch("fps");
+    if (deriveNow() === "frames" && secondsNum != null && secondsNum > 0 && fps > 0) {
+      onFrames(String(Math.max(1, Math.round(secondsNum * fps))));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fps]);
+
+  return (
+    <div className="vi-knob vi-length-row" style={{ flexBasis: "100%" }}>
+      <label>length</label>
+      <div style={{ display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }}>
+        <span className="vi-length-cell">
+          <label className="vi-knob-mini-label" htmlFor={`${idPrefix}-fps`}>fps</label>
+          <input
+            id={`${idPrefix}-fps`}
+            className="vi-knob-input"
+            style={{ maxWidth: "4.5rem", ...(onFps ? dim("fps") : { opacity: 0.55 }) }}
+            type="number"
+            min={1}
+            disabled={!onFps}
+            value={fps}
+            title={!onFps ? fpsFixedReason : derived === "fps" ? derivedTitle : undefined}
+            onChange={(e) => changeFps(e.target.value)}
+          />
+        </span>
+        <span className="vi-length-cell">
+          <label className="vi-knob-mini-label" htmlFor={`${idPrefix}-frames`}>frames</label>
+          <input
+            id={`${idPrefix}-frames`}
+            className="vi-knob-input"
+            style={{ maxWidth: "7rem", ...dim("frames") }}
+            type="number"
+            min={1}
+            value={framesDisplay}
+            placeholder={framesPlaceholder}
+            title={derived === "frames" ? derivedTitle : undefined}
+            onChange={(e) => changeFrames(e.target.value)}
+          />
+        </span>
+        <span className="vi-length-cell">
+          <label className="vi-knob-mini-label" htmlFor={`${idPrefix}-seconds`}>seconds</label>
+          <input
+            id={`${idPrefix}-seconds`}
+            className="vi-knob-input"
+            style={{ maxWidth: "6rem", ...dim("seconds") }}
+            type="number"
+            min={0.1}
+            step={0.1}
+            value={secondsDisplay}
+            placeholder={fps > 0 ? (defaultFrames / fps).toFixed(1) : ""}
+            title={derived === "seconds" ? derivedTitle : undefined}
+            onChange={(e) => changeSeconds(e.target.value)}
+          />
+        </span>
+      </div>
+      <span className="vi-knob-hint">
+        any two set the third — the dimmed one is derived (last touched wins) ·
+        server clamps to the model ceiling ({defaultFrames}) and snaps to 4k+1
+      </span>
+    </div>
+  );
+}

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>
+  );
+}