@hugpy/video-intelligence-ui 0.1.1 → 0.3.0

package/src/stations/studio/StudioViewer.tsx

@@ -29,24 +29,33 @@ import { useCallback, useEffect, useState } from "react";
 import {
   studioClipUrl,
   studioClipToEditorUrl,
+  mediaBytesUrl,
   hugpyConfig,
 } from "../../config";
 import { request, okValue, errorOf, describeAppError } from "../../transport/client";
 import { shortId, dims, whenText, type Clip } from "./studioShared";
+import type { LibraryItem } from "../../video/mediaLibrary";
 import { SourceThumb } from "./StudioGenerateTab";
 
 export interface StudioViewerProps {
   clips: Clip[];
-  /** The plane's lifted selection — a job id, or null (nothing chosen / explicitly
-   *  cleared). Read STRICTLY below; there is no "nearest playable" fallback any more. */
+  /** Session-library media from the OTHER tabs (cinema movies, scene clips/frames,
+   *  crops, uploads — anything with pixels), already deduped against `clips` by uri
+   *  and sorted newest-first by the plane. Selected via a `lib:<asset_id>` key and
+   *  played straight from its media handle (`mediaBytesUrl`). */
+  library: LibraryItem[];
+  /** The plane's lifted selection — a job id, a `lib:<asset_id>` library key, or null
+   *  (nothing chosen / explicitly cleared). Read STRICTLY below; there is no "nearest
+   *  playable" fallback any more. */
   selected: string | null;
   /** True once the operator has taken manual control (a library pick, or "Clear
    *  viewer") — the plane's auto-follow effect stands down while this is true. Drives
    *  the "↻ follow newest" toggle's shown state. */
   pinned: boolean;
-  /** "▤ Play from library" panel pick — hands the chosen job id back to the plane,
-   *  which selects it AND pins (see StudioPlane.tsx). */
-  onPick: (jobId: string) => void;
+  /** "▤ Play from library" panel pick — hands the chosen key (job id or
+   *  `lib:<asset_id>`) back to the plane, which selects it AND pins (see
+   *  StudioPlane.tsx). */
+  onPick: (key: string) => void;
   /** "✕ Clear viewer" — empties the selection; the plane pins alongside it so the empty
    *  state sticks instead of being repopulated by the next poll. */
   onClear: () => void;
@@ -56,6 +65,7 @@ export interface StudioViewerProps {
 
 export function StudioViewer({
   clips,
+  library,
   selected,
   pinned,
   onPick,
@@ -69,9 +79,22 @@ export function StudioViewer({
   // STRICT: only what `selected` names, and only while it is actually playable. No "any
   // playable clip" fallback — that silent substitution is exactly what made a cleared or
   // stuck-on-a-failed-job viewer unable to ever show empty (see the file header note).
-  const chosen = selected
-    ? (clips.find((c) => c.job_id === selected && c.playable) ?? null)
+  const libKey = (it: LibraryItem) => `lib:${it.ref.asset_id}`;
+  const chosenLib = selected?.startsWith("lib:")
+    ? (library.find((it) => libKey(it) === selected) ?? null)
     : null;
+  const chosen =
+    !chosenLib && selected
+      ? (clips.find((c) => c.job_id === selected && c.playable) ?? null)
+      : null;
+  const libLabel = (it: LibraryItem) => it.label ?? it.origin;
+  const libWhen = (it: LibraryItem) => {
+    try {
+      return new Date(it.addedAt).toLocaleTimeString();
+    } catch {
+      return "";
+    }
+  };
 
   const playable = clips.filter((c) => c.playable);
 
@@ -105,7 +128,7 @@ export function StudioViewer({
   useEffect(() => {
     setSentMsg(null);
     setSendErr(null);
-  }, [chosen?.job_id]);
+  }, [selected]);
 
   const sendToEditor = useCallback(async () => {
     if (!chosen) return;
@@ -157,9 +180,19 @@ export function StudioViewer({
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
           }}
-          title={chosen ? chosen.job_id : "Nothing playing"}
+          title={
+            chosenLib
+              ? `${libLabel(chosenLib)} · ${chosenLib.ref.asset_id}`
+              : chosen
+                ? chosen.job_id
+                : "Nothing playing"
+          }
         >
-          {chosen ? `▶ ${shortId(chosen.job_id)}` : "— nothing playing —"}
+          {chosenLib
+            ? `▶ ${libLabel(chosenLib)} · ${shortId(chosenLib.ref.asset_id)}`
+            : chosen
+              ? `▶ ${shortId(chosen.job_id)}`
+              : "— nothing playing —"}
         </span>
         <div
           style={{ display: "flex", flexWrap: "wrap", gap: "0.35rem" }}
@@ -193,7 +226,7 @@ export function StudioViewer({
             type="button"
             className="vi-btn vi-btn-sm vi-btn-ghost"
             onClick={onClear}
-            disabled={!chosen && pinned}
+            disabled={!chosen && !chosenLib && pinned}
             title="Empty the viewer — shows an explicit empty state instead of a clip"
           >
             ✕ Clear viewer
@@ -251,8 +284,8 @@ export function StudioViewer({
           role="listbox"
           aria-label="Play from library"
         >
-          {playable.length === 0 ? (
-            <p className="vi-comfy-hint">No playable clips yet — generate one below.</p>
+          {playable.length === 0 && library.length === 0 ? (
+            <p className="vi-comfy-hint">Nothing playable yet — generate something below.</p>
           ) : (
             <ul
               style={{
@@ -263,6 +296,54 @@ export function StudioViewer({
                 overflowY: "auto",
               }}
             >
+              {/* RECENT GENERATIONS from every other tab (session library) — listed
+                  FIRST, newest-first, so a fresh cinema movie / scene clip is one
+                  click away (operator ask 2026-08-27: this picker used to offer only
+                  the studio_i2v clip catalog). */}
+              {library.map((it) => {
+                const key = libKey(it);
+                const isCurrent = key === selected;
+                const isPreviewing = previewId === key;
+                return (
+                  <li key={key} className="vi-studio-src-row">
+                    {it.ref.kind === "image" ? (
+                      <div className="vi-studio-src-thumb" aria-hidden>
+                        <img
+                          src={mediaBytesUrl(it.ref.uri)}
+                          alt=""
+                          style={{ width: "100%", height: "100%", objectFit: "cover" }}
+                        />
+                      </div>
+                    ) : (
+                      <SourceThumb
+                        uri={it.ref.uri}
+                        name={libLabel(it)}
+                        playing={isPreviewing}
+                        onToggle={() => setPreviewId((cur) => (cur === key ? null : key))}
+                      />
+                    )}
+                    <div className="vi-studio-src-body">
+                      <div className="vi-studio-src-meta" title={it.ref.asset_id}>
+                        <code>{libLabel(it)}</code>
+                        <span>{it.ref.kind}</span>
+                        {libWhen(it) ? <span>{libWhen(it)}</span> : null}
+                        {isCurrent ? <span>· current</span> : null}
+                      </div>
+                      <div className="vi-studio-src-actions">
+                        <button
+                          type="button"
+                          className="vi-btn vi-btn-sm vi-btn-accent"
+                          onClick={() => pick(key)}
+                          disabled={isCurrent}
+                          title="Show this in the viewer"
+                        >
+                          {isCurrent ? "▸ Playing" : "▸ Play here"}
+                        </button>
+                      </div>
+                    </div>
+                  </li>
+                );
+              })}
               {playable.map((c) => {
                 const uri = c.output?.uri;
                 const isPreviewing = previewId === c.job_id;
@@ -310,7 +391,28 @@ export function StudioViewer({
         </div>
       )}
 
-      {chosen ? (
+      {chosenLib ? (
+        <div className="vi-studio-viewer">
+          {chosenLib.ref.kind === "image" ? (
+            <img
+              key={selected ?? undefined}
+              className="vi-studio-clip-video"
+              src={mediaBytesUrl(chosenLib.ref.uri)}
+              alt={libLabel(chosenLib)}
+            />
+          ) : (
+            <video
+              key={selected ?? undefined}
+              className="vi-studio-clip-video"
+              controls
+              autoPlay
+              loop
+              playsInline
+              src={mediaBytesUrl(chosenLib.ref.uri)}
+            />
+          )}
+        </div>
+      ) : chosen ? (
         <div className="vi-studio-viewer">
           <video
             key={chosen.job_id}

package/src/stations/studio/coordinationBadge.tsx

@@ -0,0 +1,206 @@
+// PER-SEGMENT COORDINATION BADGE (k121) — the review, on the row it is about.
+//
+// One small chip in the prompt card's existing `headerHint` slot. Collapsed it
+// is a single status word; expanded it lists every decision on that segment as
+//
+//     [status] join: cut → vace_extend
+//     “…the same shot continues, still running…”
+//     the prose continues the previous shot, so the join is set to 'vace_extend'
+//     [accept] [reject]           ← proposals only
+//
+// THE EVIDENCE QUOTE IS THE POINT. A badge that said "join changed" would be an
+// assertion; a badge that quotes the operator's own sentence is falsifiable, and
+// the operator can settle it in one glance — which is exactly what was missing
+// when four prompts declared continuity and every joint stayed `cut`.
+//
+// Presentational only: values in, callbacks out. It owns one piece of ephemeral
+// view state (open/closed) and nothing else. Colours reuse the assist-log badge
+// palette (`coordinationClass`) rather than minting a fourth badge language.
+import { useState, type ReactNode } from "react";
+import {
+  coordinationClass,
+  coordinationLabel,
+  knobLabel,
+  knobValue,
+  type CoordinationDecision,
+  type CoordinationSegment,
+} from "../../video/coordinationReport";
+
+export interface CoordinationBadgeProps {
+  /** This segment's review row. `null` ⇒ nothing rendered (never reviewed). */
+  review: CoordinationSegment | null;
+  /** Apply a `proposed` decision to the row. Absent ⇒ read-only badge. */
+  onAccept?: (decision: CoordinationDecision) => void;
+  /** Dismiss a `proposed` decision without applying it. */
+  onReject?: (decision: CoordinationDecision) => void;
+  /** Decision keys (`${segment_id}:${knob}`) the operator already answered. */
+  settled?: Set<string>;
+  disabled?: boolean;
+  /** Extra content the host wants inside the same header line (the joint hint). */
+  children?: ReactNode;
+}
+
+export function decisionKey(d: CoordinationDecision): string {
+  return `${d.segment_id}:${d.knob}:${d.step ?? ""}`;
+}
+
+/** `ok` rows still render — a review that only spoke on failure would leave
+ *  "reviewed and fine" and "never reviewed" looking identical, which is the
+ *  original incident in miniature. */
+export function CoordinationBadge({
+  review,
+  onAccept,
+  onReject,
+  settled,
+  disabled,
+  children,
+}: CoordinationBadgeProps) {
+  const [open, setOpen] = useState(false);
+  if (!review) return <>{children}</>;
+
+  const shown = review.decisions.filter((d) => d.status !== "ok" || open);
+  const proposals = review.decisions.filter(
+    (d) => d.status === "proposed" && !(settled?.has(decisionKey(d)) ?? false),
+  );
+  const label = coordinationLabel(review.status);
+  const title =
+    review.decisions.length === 0
+      ? "Reviewed: nothing in this shot's words asks for a knob."
+      : review.decisions
+          .map((d) => `${d.status.toUpperCase()} ${knobLabel(d.knob)}: ${d.reason}`)
+          .join("\n\n");
+
+  return (
+    <>
+      {children}
+      <button
+        type="button"
+        className={coordinationClass(review.status)}
+        style={{ cursor: "pointer", background: "none" }}
+        title={title}
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+      >
+        {label}
+        {proposals.length > 0 ? ` · ${proposals.length}?` : ""}
+      </button>
+      {open && (
+        <ul
+          className="vi-coord-list"
+          style={{
+            listStyle: "none",
+            margin: "0.35rem 0 0",
+            padding: 0,
+            flexBasis: "100%",
+            fontSize: "0.72rem",
+          }}
+        >
+          {shown.length === 0 && (
+            <li style={{ opacity: 0.7 }}>
+              Reviewed — this shot's words ask for no knob.
+            </li>
+          )}
+          {shown.map((d) => {
+            const key = decisionKey(d);
+            const answered = settled?.has(key) ?? false;
+            return (
+              <li key={key} style={{ margin: "0 0 0.4rem", lineHeight: 1.35 }}>
+                <span
+                  className={coordinationClass(d.status)}
+                  style={{ marginRight: "0.35rem" }}
+                >
+                  {d.step ? d.step : d.status}
+                </span>
+                <strong>{knobLabel(d.knob)}</strong>{" "}
+                <span style={{ opacity: 0.85 }}>
+                  {knobValue(d.current)} → {knobValue(d.proposed)}
+                </span>
+                {d.evidence_quote && (
+                  <div style={{ opacity: 0.8, fontStyle: "italic" }}>
+                    “{d.evidence_quote}”
+                  </div>
+                )}
+                <div style={{ opacity: 0.75 }}>{d.reason}</div>
+                {d.status === "proposed" && !answered && (onAccept || onReject) && (
+                  <div style={{ marginTop: "0.2rem" }}>
+                    {onAccept && (
+                      <button
+                        type="button"
+                        className="vi-btn vi-btn-sm vi-btn-ghost"
+                        disabled={disabled}
+                        onClick={() => onAccept(d)}
+                      >
+                        ✓ accept
+                      </button>
+                    )}
+                    {onReject && (
+                      <button
+                        type="button"
+                        className="vi-btn vi-btn-sm vi-btn-ghost"
+                        disabled={disabled}
+                        onClick={() => onReject(d)}
+                      >
+                        ✕ reject
+                      </button>
+                    )}
+                  </div>
+                )}
+                {answered && <div style={{ opacity: 0.6 }}>answered</div>}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </>
+  );
+}
+
+export interface CoordinationSummaryProps {
+  /** Report-level notes + counts, under the group toolbar. */
+  status: string;
+  counts: Record<string, number>;
+  notes: string[];
+  onDismiss?: () => void;
+}
+
+/** The aggregate line under the prompt toolbar: what the review did, in one row. */
+export function CoordinationSummary({
+  status,
+  counts,
+  notes,
+  onDismiss,
+}: CoordinationSummaryProps) {
+  const bits: string[] = [];
+  if (counts.set) bits.push(`${counts.set} knob(s) set`);
+  if (counts.proposed) bits.push(`${counts.proposed} proposed`);
+  if (counts.mismatch) bits.push(`${counts.mismatch} mismatch(es)`);
+  if (counts.ok) bits.push(`${counts.ok} already correct`);
+  return (
+    <div className="vi-input-callout" role="status" style={{ marginBottom: "0.6rem" }}>
+      <div>
+        <span
+          className={coordinationClass(status as never)}
+          style={{ marginRight: "0.4rem" }}
+        >
+          coordination
+        </span>
+        {bits.length ? bits.join(" · ") : "reviewed — nothing to change"}
+      </div>
+      {notes.map((n, i) => (
+        <div key={i} style={{ opacity: 0.8, marginTop: "0.2rem" }}>
+          {n}
+        </div>
+      ))}
+      {onDismiss && (
+        <button
+          type="button"
+          className="vi-btn vi-btn-sm vi-btn-ghost"
+          style={{ marginTop: "0.35rem" }}
+          onClick={onDismiss}
+        >
+          ✕ Dismiss
+        </button>
+      )}
+    </div>
+  );
+}

package/src/stations/studio/identityUpload.ts

@@ -0,0 +1,66 @@
+// Upload → ingest → guard-kind helpers for the Identities station (lifted out of
+// IdentitiesStation.tsx in k94 so the one-path create panel can share them
+// without a circular import). Behavior/wording UNCHANGED from the originals:
+// the EXACT upload→ingest→guard-kind flow StudioGenerateTab's onPickImageFile /
+// StudioMovieComposer's run (POST /uploads → POST /video/ingest → MediaRef),
+// joining the session library on success so an asset picked here is pickable
+// from the library everywhere else too.
+import { request, okValue, errorOf, describeAppError } from "../../transport/client";
+import { hugpyConfig } from "../../config";
+import { addToLibrary } from "../../video/mediaLibrary";
+import { mediaRefSchema, uploadResultSchema } from "../../video/contract";
+import type { MediaRef } from "../../video/contract";
+import { getSessionId } from "../../session";
+
+async function uploadAndIngest(
+  file: File,
+  kind: "image" | "video",
+  ops: { upload: string; ingest: string },
+): Promise<{ ref?: MediaRef; error?: string }> {
+  const fd = new FormData();
+  fd.append("file", file);
+  fd.append("sid", getSessionId());
+  const up = await request<unknown>(hugpyConfig.uploadUrl, {
+    method: "POST",
+    body: fd,
+    meta: { specKey: "studio", operation: ops.upload },
+  });
+  if (!up.ok) return { error: describeAppError(errorOf(up)) };
+  const upParsed = uploadResultSchema.safeParse(okValue(up));
+  if (!upParsed.success) return { error: "Malformed upload response." };
+  const ing = await request<unknown>(hugpyConfig.videoIngestUrl, {
+    method: "POST",
+    body: JSON.stringify({ path: upParsed.data.path }),
+    headers: { "Content-Type": "application/json" },
+    meta: { specKey: "studio", operation: ops.ingest },
+  });
+  if (!ing.ok) return { error: describeAppError(errorOf(ing)) };
+  const media = mediaRefSchema.safeParse(okValue(ing));
+  if (!media.success) return { error: "Malformed ingest response." };
+  if (media.data.kind !== kind) {
+    return {
+      error:
+        kind === "image"
+          ? `Ingested asset is "${media.data.kind}", not an image — pick a still.`
+          : `Ingested asset is "${media.data.kind}", not a video — pick a video file.`,
+    };
+  }
+  addToLibrary(media.data, "upload", media.data.mime);
+  return { ref: media.data };
+}
+
+/** Upload → ingest → guard kind=image. */
+export function uploadAndIngestImage(file: File): Promise<{ ref?: MediaRef; error?: string }> {
+  return uploadAndIngest(file, "image", {
+    upload: "identity.station.upload",
+    ingest: "identity.station.ingest",
+  });
+}
+
+/** char360 S4 — the same chain guarding the INVERSE kind: the source MUST be a video. */
+export function uploadAndIngestVideo(file: File): Promise<{ ref?: MediaRef; error?: string }> {
+  return uploadAndIngest(file, "video", {
+    upload: "identity.video_extract.upload",
+    ingest: "identity.video_extract.ingest",
+  });
+}