@hugpy/video-intelligence-ui 0.1.1 → 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 {
@@ -4991,3 +5061,90 @@ button.vi-studio-src-thumb {
   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/coordinationReport.ts

@@ -0,0 +1,266 @@
+// COORDINATION REPORT (k121) — the wire shape of the words-vs-knobs review.
+//
+// The backend kernel is `video_intel/prompt_coordination.py`. Every generated or
+// enhanced video prompt path now returns a `coordination` block:
+// `/video/prompt/assist` (spread + detail/generate) and `POST /video/studio/movie`.
+//
+// WHY THE UI HAS TO SHOW THIS. The operator's cinema session produced four
+// prompts that all declared continuity — continuous scenes, a scene drawn from
+// the previous scene's render, a recurring character — with every joint left at
+// `cut`, no parent link, no lengthening and no identity. Nothing failed; it
+// rendered the wrong film. The backend now turns the ratchet-safe knobs itself,
+// but a knob turned invisibly is the same defect wearing the other hat, so every
+// decision surfaces on the row it belongs to, with the operator's OWN WORDS as
+// the evidence.
+//
+// Pure: no React, no fetch. Reader-shaped like `spreadAssist.readSpreadResult` —
+// anything malformed is dropped, never defaulted into a false "ok".
+
+/** What the review did about one knob. Worst-first, matching `STATUS_ORDER`. */
+export type CoordinationStatus = "mismatch" | "proposed" | "set" | "ok";
+
+/** Worst-first. Folding a segment's decisions into one badge picks the first hit. */
+export const COORDINATION_STATUS_ORDER: CoordinationStatus[] = [
+  "mismatch",
+  "proposed",
+  "set",
+  "ok",
+];
+
+/** One claim the prose made. `evidence_quote` is verbatim from the row's text. */
+export interface CoordinationExpectation {
+  kind: string;
+  segments: string[];
+  evidence_quote: string;
+  confidence: number;
+  source: string;
+  detail: Record<string, unknown>;
+}
+
+/** One knob decision — the diff a badge renders. */
+export interface CoordinationDecision {
+  segment_id: string;
+  index: number;
+  knob: string;
+  current: unknown;
+  proposed: unknown;
+  status: CoordinationStatus;
+  reason: string;
+  confidence: number;
+  blocking: boolean;
+  evidence_quote: string;
+  /** Set only for a work STEP that is not a knob (`IDENTITY_CAPTURE`). */
+  step?: string;
+  expectation?: CoordinationExpectation | null;
+  detail?: Record<string, unknown>;
+}
+
+/** One row of the review. EVERY segment gets one, including the `ok` ones. */
+export interface CoordinationSegment {
+  segment_id: string;
+  index: number;
+  status: CoordinationStatus;
+  decisions: CoordinationDecision[];
+}
+
+export interface CoordinationReport {
+  version: string;
+  status: CoordinationStatus;
+  counts: Record<string, number>;
+  llm_used: boolean;
+  notes: string[];
+  segments: CoordinationSegment[];
+  expectations: CoordinationExpectation[];
+  decisions: CoordinationDecision[];
+}
+
+function str(v: unknown): string {
+  return typeof v === "string" ? v : "";
+}
+
+function num(v: unknown, fallback = 0): number {
+  return typeof v === "number" && Number.isFinite(v) ? v : fallback;
+}
+
+function statusOf(v: unknown): CoordinationStatus {
+  const s = str(v);
+  return (COORDINATION_STATUS_ORDER as string[]).includes(s)
+    ? (s as CoordinationStatus)
+    : "ok";
+}
+
+function dict(v: unknown): Record<string, unknown> {
+  return v != null && typeof v === "object" && !Array.isArray(v)
+    ? (v as Record<string, unknown>)
+    : {};
+}
+
+function readExpectation(v: unknown): CoordinationExpectation | null {
+  const r = dict(v);
+  const kind = str(r.kind);
+  if (!kind) return null;
+  return {
+    kind,
+    segments: Array.isArray(r.segments) ? r.segments.map(str).filter(Boolean) : [],
+    evidence_quote: str(r.evidence_quote),
+    confidence: num(r.confidence),
+    source: str(r.source) || "rule",
+    detail: dict(r.detail),
+  };
+}
+
+function readDecision(v: unknown): CoordinationDecision | null {
+  const r = dict(v);
+  const segment_id = str(r.segment_id);
+  const knob = str(r.knob);
+  if (!segment_id || !knob) return null;
+  const step = str(r.step);
+  return {
+    segment_id,
+    index: num(r.index),
+    knob,
+    current: r.current,
+    proposed: r.proposed,
+    status: statusOf(r.status),
+    reason: str(r.reason),
+    confidence: num(r.confidence),
+    blocking: r.blocking === true,
+    evidence_quote: str(r.evidence_quote),
+    ...(step ? { step } : {}),
+    expectation: readExpectation(r.expectation),
+    detail: dict(r.detail),
+  };
+}
+
+/**
+ * Read a `coordination` block. Returns null when it is not a report at all — the
+ * caller then shows nothing rather than a badge built out of guesses.
+ */
+export function readCoordinationReport(value: unknown): CoordinationReport | null {
+  const v = dict(value);
+  if (!Array.isArray(v.segments) || !Array.isArray(v.decisions)) return null;
+  const decisions = v.decisions
+    .map(readDecision)
+    .filter((d): d is CoordinationDecision => d != null);
+  const segments: CoordinationSegment[] = [];
+  for (const raw of v.segments) {
+    const r = dict(raw);
+    const segment_id = str(r.segment_id);
+    if (!segment_id) continue;
+    segments.push({
+      segment_id,
+      index: num(r.index),
+      status: statusOf(r.status),
+      decisions: Array.isArray(r.decisions)
+        ? r.decisions.map(readDecision).filter((d): d is CoordinationDecision => d != null)
+        : [],
+    });
+  }
+  return {
+    version: str(v.version),
+    status: statusOf(v.status),
+    counts: dict(v.counts) as Record<string, number>,
+    llm_used: v.llm_used === true,
+    notes: Array.isArray(v.notes) ? v.notes.map(str).filter(Boolean) : [],
+    segments,
+    expectations: Array.isArray(v.expectations)
+      ? v.expectations
+          .map(readExpectation)
+          .filter((e): e is CoordinationExpectation => e != null)
+      : [],
+    decisions,
+  };
+}
+
+/** The review row for one segment, or null when it was not reviewed. */
+export function segmentReview(
+  report: CoordinationReport | null,
+  segmentId: string,
+): CoordinationSegment | null {
+  if (!report) return null;
+  return report.segments.find((s) => s.segment_id === segmentId) ?? null;
+}
+
+/** The one-word badge label for a status. */
+export function coordinationLabel(status: CoordinationStatus): string {
+  switch (status) {
+    case "mismatch":
+      return "knobs ≠ words";
+    case "proposed":
+      return "knobs proposed";
+    case "set":
+      return "knobs set";
+    default:
+      return "knobs ok";
+  }
+}
+
+/**
+ * The existing assist-log badge palette, reused rather than reinvented:
+ * `--err` red / `--warn` amber / `--ok` green / base dim. One badge language
+ * across the console (`style/app.css` §.vi-assistlog-badge).
+ */
+export function coordinationClass(status: CoordinationStatus): string {
+  switch (status) {
+    case "mismatch":
+      return "vi-assistlog-badge vi-assistlog-badge--err";
+    case "proposed":
+      return "vi-assistlog-badge vi-assistlog-badge--warn";
+    case "set":
+      return "vi-assistlog-badge vi-assistlog-badge--ok";
+    default:
+      return "vi-assistlog-badge";
+  }
+}
+
+/** Human name for a knob, for the diff line. */
+export function knobLabel(knob: string): string {
+  switch (knob) {
+    case "joint_mode":
+      return "join";
+    case "parent_segment_id":
+      return "parent";
+    case "branch_frame":
+      return "branch frame";
+    case "reference_images":
+      return "identity refs";
+    case "frames":
+      return "clip length";
+    default:
+      return knob;
+  }
+}
+
+/** Render a knob value for the diff line. Never throws on an odd shape. */
+export function knobValue(v: unknown): string {
+  if (v == null) return "—";
+  if (Array.isArray(v)) return v.length ? `${v.length} ref(s)` : "—";
+  if (typeof v === "object") {
+    const o = v as Record<string, unknown>;
+    if (typeof o.profile === "string") return `profile ${o.profile}`;
+    if (typeof o.from_segment === "string") return `capture from ${o.from_segment}`;
+    return "…";
+  }
+  return String(v);
+}
+
+/**
+ * A knob decision projected onto the movie composer's own GoalRow field names.
+ * `null` when the knob has no editable home on this surface (a parent pointer is
+ * implicit in the composer's linear chain; an identity plan is a work step, not
+ * a field), so accepting it can never write a field that does not exist.
+ */
+export function knobPatch(d: CoordinationDecision): Record<string, string> | null {
+  switch (d.knob) {
+    case "joint_mode":
+      return typeof d.proposed === "string" ? { joint: d.proposed } : null;
+    case "seed":
+      return typeof d.proposed === "number" ? { seed: String(d.proposed) } : null;
+    case "frames":
+      return typeof d.proposed === "number" ? { frames: String(d.proposed) } : null;
+    case "branch_frame":
+      return { branchFrame: d.proposed == null ? "" : String(d.proposed) };
+    default:
+      return null;
+  }
+}