@hugpy/video-intelligence-ui 0.1.0

package/src/stations/studio/StudioViewer.tsx

@@ -0,0 +1,339 @@
+// The player-forward VIEWER — the .vi-studio-viewer stage (mirrors the scene/video tab
+// preview) that plays the selected clip. It lives at the TOP of the studio plane
+// (StudioPlane), driven by the plane's lifted `selected` + `pinned`.
+//
+// Header-bar controls (operator ask 2026-07-12 — "Can the change be made THROUGH to
+// change the initial scene or video or make it 'new'."). Before this pass the viewer had
+// NO controls of its own: it silently rode the plane's auto-follow effect and, on top of
+// that, silently substituted "any playable clip" whenever `selected` didn't resolve to
+// one — including a DELIBERATELY cleared selection. Combined with an auto-follow effect
+// that (see StudioPlane.tsx) only re-picked when the selected job vanished from the list
+// entirely, the viewer would latch onto the first playable clip of the session and then
+// never visibly change again — exactly the "stuck, unchangeable default" the operator
+// described. Fixed on both ends:
+//   • `chosen` below is now a STRICT read of `selected` — no silent substitution. A
+//     cleared viewer (`selected === null`) shows the explicit empty state and only the
+//     explicit empty state, until the operator picks something or resumes follow.
+//   • the plane's auto-follow effect now genuinely re-syncs to the newest playable clip
+//     on every list change (see that file's comment) instead of sticking forever.
+// `pinned` is the one semantic switch this header reads and toggles: true once the
+// operator has manually picked or cleared, false while the plane auto-follows.
+//
+// Layout below is INLINE style (not new app.css classes) — this slice is scoped to
+// src/stations/studio/ only, and the file-local ad hoc `style={{...}}` layout is
+// already the established idiom for one-off arrangement in this same directory (see
+// StudioGenerateTab.tsx's picker rows / hero sections). Reused, not-new pieces (the
+// button classes, the .vi-studio-src-row poster/id row, .vi-comfy-empty) still use
+// their existing classes.
+import { useCallback, useEffect, useState } from "react";
+import {
+  studioClipUrl,
+  studioClipToEditorUrl,
+  hugpyConfig,
+} from "../../config";
+import { request, okValue, errorOf, describeAppError } from "../../transport/client";
+import { shortId, dims, whenText, type Clip } from "./studioShared";
+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. */
+  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;
+  /** "✕ 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;
+  /** "↻ follow newest" toggle — flips `pinned` on the plane. */
+  onToggleFollow: () => void;
+}
+
+export function StudioViewer({
+  clips,
+  selected,
+  pinned,
+  onPick,
+  onClear,
+  onToggleFollow,
+}: StudioViewerProps) {
+  // Local to the picker panel only — never touches the plane's lifted selection.
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [previewId, setPreviewId] = useState<string | null>(null);
+
+  // 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)
+    : null;
+
+  const playable = clips.filter((c) => c.playable);
+
+  // ── "Send to Editor" (k12) — CONSOLE-OPERATOR ONLY affordance ───────────────
+  // Visibility is AUTH-DECIDED, not guessed (mirrors SharePanel): probe the same
+  // operator-gated GET (keysVideoShareUrl) once on mount. null = probing (hide),
+  // false = a share guest / anon (hide — the route would 403 anyway), true =
+  // operator (show, but only alongside a real playable clip). A second small GET
+  // here is consistent with SharePanel's own probe, not a regression.
+  const [operator, setOperator] = useState<boolean | null>(null);
+  const [sending, setSending] = useState(false);
+  const [sentMsg, setSentMsg] = useState<string | null>(null);
+  const [sendErr, setSendErr] = useState<string | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    void (async () => {
+      const res = await request<unknown>(hugpyConfig.keysVideoShareUrl, {
+        method: "GET",
+        meta: { specKey: "studio", operation: "studio.operatorProbe" },
+      });
+      if (alive) setOperator(res.ok);
+    })();
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  // Clear any transient send message when the shown clip changes, so a "sent"
+  // note never lingers over a different clip.
+  useEffect(() => {
+    setSentMsg(null);
+    setSendErr(null);
+  }, [chosen?.job_id]);
+
+  const sendToEditor = useCallback(async () => {
+    if (!chosen) return;
+    setSending(true);
+    setSentMsg(null);
+    setSendErr(null);
+    const res = await request<{ filename?: string; mode?: string }>(
+      studioClipToEditorUrl(chosen.job_id),
+      { method: "POST", meta: { specKey: "studio", operation: "studio.clip.toEditor" } },
+    );
+    setSending(false);
+    if (!res.ok) {
+      setSendErr(`Could not send to the editor — ${describeAppError(errorOf(res))}`);
+      return;
+    }
+    const fn = okValue(res).filename ?? "clip.mp4";
+    const msg = `✓ Sent to editor — ${fn}`;
+    setSentMsg(msg);
+    window.setTimeout(() => setSentMsg((cur) => (cur === msg ? null : cur)), 4000);
+  }, [chosen]);
+
+  function pick(jobId: string) {
+    onPick(jobId);
+    setPickerOpen(false);
+    setPreviewId(null);
+  }
+
+  return (
+    <section aria-label="Viewer" className="vi-studio-viewer-wrap">
+      {/* ── ALWAYS-VISIBLE header bar: the viewer must never read as a fixed, unmovable
+          default. It always names what's showing (or says nothing is), and always offers
+          a way to pick something else, clear it, or hand control back to auto-follow. ── */}
+      <div
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: "0.6rem",
+          marginBottom: "0.5rem",
+        }}
+      >
+        <span
+          style={{
+            fontFamily: "var(--vi-mono)",
+            fontSize: "0.85rem",
+            color: "var(--vi-text)",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+          title={chosen ? chosen.job_id : "Nothing playing"}
+        >
+          {chosen ? `▶ ${shortId(chosen.job_id)}` : "— nothing playing —"}
+        </span>
+        <div
+          style={{ display: "flex", flexWrap: "wrap", gap: "0.35rem" }}
+          role="group"
+          aria-label="Viewer controls"
+        >
+          {/* CONSOLE-OPERATOR ONLY (operator === true) AND only with a real playable
+              clip showing: hand this clip to the LAN Filmora inbox. Hidden for a
+              share guest / anon (the route would 403 regardless). */}
+          {operator === true && chosen && (
+            <button
+              type="button"
+              className="vi-btn vi-btn-sm vi-btn-accent"
+              disabled={sending}
+              onClick={() => void sendToEditor()}
+              title="Copy this clip, in a Filmora-ready MP4, into your editor inbox on the LAN"
+            >
+              {sending ? "Sending…" : "⇱ Send to Editor"}
+            </button>
+          )}
+          <button
+            type="button"
+            className="vi-btn vi-btn-sm vi-btn-ghost"
+            aria-expanded={pickerOpen}
+            onClick={() => setPickerOpen((v) => !v)}
+            title="Pick any playable clip to show in the viewer"
+          >
+            ▤ Play from library
+          </button>
+          <button
+            type="button"
+            className="vi-btn vi-btn-sm vi-btn-ghost"
+            onClick={onClear}
+            disabled={!chosen && pinned}
+            title="Empty the viewer — shows an explicit empty state instead of a clip"
+          >
+            ✕ Clear viewer
+          </button>
+          <button
+            type="button"
+            className={pinned ? "vi-btn vi-btn-sm vi-btn-ghost" : "vi-btn vi-btn-sm vi-btn-accent"}
+            aria-pressed={!pinned}
+            onClick={onToggleFollow}
+            title={
+              pinned
+                ? "Off — the viewer stays on your pick. Click to resume following the newest playable clip."
+                : "On — the viewer follows the newest playable clip as renders complete. Click to freeze it here."
+            }
+          >
+            ↻ follow newest · {pinned ? "off" : "on"}
+          </button>
+        </div>
+      </div>
+
+      {/* Send-to-Editor transient feedback (operator only). Success auto-clears
+          after a few seconds; a failure stays until the next send or clip change. */}
+      {sentMsg && (
+        <p
+          className="vi-comfy-hint"
+          role="status"
+          style={{ margin: "0 0 0.5rem", color: "var(--vi-accent)" }}
+        >
+          {sentMsg}
+        </p>
+      )}
+      {sendErr && (
+        <p className="vi-error" role="alert" style={{ margin: "0 0 0.5rem" }}>
+          {sendErr}
+        </p>
+      )}
+
+      {/* "▤ Play from library" panel — the reachable select-to-viewer affordance. (The
+          original StudioLibrarySection had this exact click-to-select logic, but that
+          component is unmounted in BOTH plane mounts — see StudioLibraryTab.tsx and the
+          StudioPlane.tsx header note. This panel is the live replacement: mounted once,
+          inside the ONE shared StudioPlane, so it is reachable identically from the
+          standalone Studio station AND the Generate station's studio mode.) Rows reuse
+          the studio "source clip" poster/id idiom (SourceThumb + .vi-studio-src-row,
+          exported from StudioGenerateTab.tsx) rather than inventing a fifth row shape. */}
+      {pickerOpen && (
+        <div
+          style={{
+            marginBottom: "0.6rem",
+            padding: "0.6rem",
+            border: "1px solid var(--vi-border)",
+            borderRadius: "8px",
+            background: "var(--vi-surface-raised)",
+          }}
+          role="listbox"
+          aria-label="Play from library"
+        >
+          {playable.length === 0 ? (
+            <p className="vi-comfy-hint">No playable clips yet — generate one below.</p>
+          ) : (
+            <ul
+              style={{
+                listStyle: "none",
+                margin: 0,
+                padding: 0,
+                maxHeight: "16rem",
+                overflowY: "auto",
+              }}
+            >
+              {playable.map((c) => {
+                const uri = c.output?.uri;
+                const isPreviewing = previewId === c.job_id;
+                const isCurrent = c.job_id === selected;
+                return (
+                  <li key={c.job_id} className="vi-studio-src-row">
+                    {uri ? (
+                      <SourceThumb
+                        uri={uri}
+                        name={shortId(c.job_id)}
+                        playing={isPreviewing}
+                        onToggle={() =>
+                          setPreviewId((cur) => (cur === c.job_id ? null : c.job_id))
+                        }
+                      />
+                    ) : (
+                      <div className="vi-studio-src-thumb vi-lib-placeholder" aria-hidden>
+                        <span>clip</span>
+                      </div>
+                    )}
+                    <div className="vi-studio-src-body">
+                      <div className="vi-studio-src-meta" title={c.job_id}>
+                        <code>{shortId(c.job_id)}</code>
+                        {dims(c) ? <span>{dims(c)}</span> : null}
+                        {whenText(c) ? <span>{whenText(c)}</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(c.job_id)}
+                          disabled={isCurrent}
+                          title="Play this clip in the viewer"
+                        >
+                          {isCurrent ? "▸ Playing" : "▸ Play here"}
+                        </button>
+                      </div>
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+      )}
+
+      {chosen ? (
+        <div className="vi-studio-viewer">
+          <video
+            key={chosen.job_id}
+            className="vi-studio-clip-video"
+            controls
+            autoPlay
+            loop
+            playsInline
+            src={studioClipUrl(chosen.job_id)}
+          />
+        </div>
+      ) : (
+        <div className="vi-comfy-empty">
+          <p className="vi-comfy-empty-title">
+            {pinned ? "Nothing playing — cleared" : "No clip yet"}
+          </p>
+          <p className="vi-comfy-empty-sub">
+            {pinned
+              ? "Pick from the library above, or turn “follow newest” back on."
+              : "Generate a clip below, or pick a playable clip from the library above — it plays here."}
+          </p>
+        </div>
+      )}
+    </section>
+  );
+}

package/src/stations/studio/TurntableViewer.tsx

@@ -0,0 +1,220 @@
+// TURNTABLE VIEWER — the drag-to-rotate half of the identity 360° orbit turntable.
+//
+// A turntable reconstruction stores ONE orbit clip's frames in its `views[]` array
+// IN ANGULAR ORDER (frame 0 = start angle … frame N ≈ 360°). This component shows
+// exactly ONE frame at a time and scrubs across the ordered frames as the user drags
+// horizontally (pointer events) or moves the range slider — dragging/sliding left↔
+// right maps position across [0..N-1] = rotating the character 0..360°. Every frame
+// is a degree view, so scrubbing IS the rotation.
+//
+// Frames are PRELOADED (a `new Image()` per uri) on mount/whenever the frame set
+// changes, so once warm the on-screen <img> src swap is instant (served from cache)
+// and scrubbing is smooth. Served bytes come through `mediaBytesUrl(uri)`, the same
+// media-bytes seam every other identity thumb uses.
+//
+// Presentational + self-contained: it owns only the current-frame index and drag
+// bookkeeping; the caller (IdentitiesStation) gates rendering this vs the static
+// sheet grid on the reconstruction's `mode`, and keeps its own approve-to-canonical
+// control alongside.
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { PointerEvent as ReactPointerEvent } from "react";
+import { mediaBytesUrl } from "../../config";
+
+function clampIndex(i: number, n: number): number {
+  if (n <= 0) return 0;
+  if (i < 0) return 0;
+  if (i > n - 1) return n - 1;
+  return i;
+}
+
+export function TurntableViewer({
+  frames,
+  degreesPerFrame,
+  frameCount,
+}: {
+  /** The reconstruction's `views[]` — the orbit clip's frame uris, in angular order. */
+  frames: string[];
+  /** Optional manifest hint: degrees advanced per frame (else derived from count). */
+  degreesPerFrame?: number | null;
+  /** Optional manifest hint: authoritative frame count (else `frames.length`). */
+  frameCount?: number | null;
+}) {
+  const n = frames.length;
+  // `frame_count` is a manifest convenience; the frames we can actually SHOW are the
+  // uris we were handed, so scrubbing is always bounded by `frames.length`.
+  const count = frameCount && frameCount > 0 ? frameCount : n;
+  const dpf = useMemo(() => {
+    if (degreesPerFrame && degreesPerFrame > 0) return degreesPerFrame;
+    return count > 0 ? 360 / count : 0;
+  }, [degreesPerFrame, count]);
+
+  const [index, setIndex] = useState(0);
+  const [loaded, setLoaded] = useState(0);
+  const stageRef = useRef<HTMLDivElement | null>(null);
+  const dragRef = useRef<{ startX: number; startIndex: number } | null>(null);
+
+  // Keep the index valid if the frame set changes out from under us (e.g. a fresh
+  // turntable replaces an older one on this same card).
+  useEffect(() => {
+    setIndex((i) => clampIndex(i, n));
+  }, [n]);
+
+  // PRELOAD every frame. Hold the Image objects in a ref for the effect's lifetime so
+  // the browser keeps them warm (and doesn't GC an in-flight decode); count decoded
+  // frames for a small "loading" readout while the orbit warms up.
+  useEffect(() => {
+    setLoaded(0);
+    if (n === 0) return;
+    let live = true;
+    const imgs: HTMLImageElement[] = [];
+    frames.forEach((uri) => {
+      const img = new Image();
+      img.onload = () => {
+        if (live) setLoaded((c) => c + 1);
+      };
+      img.onerror = () => {
+        // A broken frame still "settles" so the readout can reach N and not hang.
+        if (live) setLoaded((c) => c + 1);
+      };
+      img.src = mediaBytesUrl(uri);
+      imgs.push(img);
+    });
+    return () => {
+      live = false;
+      imgs.forEach((img) => {
+        img.onload = null;
+        img.onerror = null;
+      });
+    };
+  }, [frames, n]);
+
+  if (n === 0) return null;
+
+  // Map a horizontal drag across the FULL stage width to the FULL frame range: a drag
+  // spanning the whole viewer = a full 0..360° turn. Dragging RIGHT advances frames
+  // (the character rotates), dragging LEFT rewinds.
+  function onPointerDown(e: ReactPointerEvent<HTMLDivElement>) {
+    (e.currentTarget as HTMLDivElement).setPointerCapture?.(e.pointerId);
+    dragRef.current = { startX: e.clientX, startIndex: index };
+  }
+  function onPointerMove(e: ReactPointerEvent<HTMLDivElement>) {
+    const drag = dragRef.current;
+    if (!drag) return;
+    const width = stageRef.current?.clientWidth || 1;
+    const delta = e.clientX - drag.startX;
+    const framesMoved = Math.round((delta / width) * (count - 1 || 1));
+    setIndex(clampIndex(drag.startIndex + framesMoved, n));
+  }
+  function endDrag(e: ReactPointerEvent<HTMLDivElement>) {
+    (e.currentTarget as HTMLDivElement).releasePointerCapture?.(e.pointerId);
+    dragRef.current = null;
+  }
+
+  const angle = Math.round(index * dpf) % 360;
+  const warming = loaded < n;
+
+  return (
+    <div style={{ marginTop: "0.4rem" }}>
+      <p className="vi-comfy-label" style={{ margin: "0 0 0.3rem" }}>
+        360° turntable
+      </p>
+      <div
+        ref={stageRef}
+        className="vi-turntable-stage"
+        role="slider"
+        aria-label="Drag to rotate the character"
+        aria-valuemin={0}
+        aria-valuemax={n - 1}
+        aria-valuenow={index}
+        aria-valuetext={`${angle}°`}
+        tabIndex={0}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={endDrag}
+        onPointerCancel={endDrag}
+        onKeyDown={(e) => {
+          if (e.key === "ArrowRight") setIndex((i) => clampIndex(i + 1, n));
+          else if (e.key === "ArrowLeft") setIndex((i) => clampIndex(i - 1, n));
+        }}
+        style={{
+          position: "relative",
+          width: "100%",
+          maxWidth: "18rem",
+          aspectRatio: "1 / 1",
+          borderRadius: "0.5rem",
+          overflow: "hidden",
+          background: "#000",
+          border: "1px solid var(--vi-border)",
+          touchAction: "none",
+          userSelect: "none",
+        }}
+      >
+        {frames.map((uri, i) => (
+          // Render ALL frames stacked, toggling visibility, so the already-decoded
+          // frame is simply revealed on scrub (no src swap / reflow flicker at all).
+          <img
+            key={uri}
+            src={mediaBytesUrl(uri)}
+            alt={i === index ? `orbit frame ${i + 1} of ${n} (${angle}°)` : ""}
+            draggable={false}
+            style={{
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              opacity: i === index ? 1 : 0,
+              pointerEvents: "none",
+            }}
+          />
+        ))}
+        <span
+          className="vi-comfy-hint"
+          style={{
+            position: "absolute",
+            top: 4,
+            right: 6,
+            fontSize: "0.7rem",
+            padding: "0 0.3rem",
+            borderRadius: "0.3rem",
+            background: "rgba(0,0,0,0.55)",
+            textShadow: "0 0 3px #000",
+          }}
+        >
+          {angle}°
+        </span>
+        {warming && (
+          <span
+            className="vi-comfy-hint"
+            style={{
+              position: "absolute",
+              left: 6,
+              bottom: 4,
+              fontSize: "0.7rem",
+              padding: "0 0.3rem",
+              borderRadius: "0.3rem",
+              background: "rgba(0,0,0,0.55)",
+              opacity: 0.9,
+            }}
+          >
+            preloading {loaded}/{n}…
+          </span>
+        )}
+      </div>
+      <input
+        type="range"
+        className="vi-turntable-scrub"
+        min={0}
+        max={n - 1}
+        step={1}
+        value={index}
+        aria-label="Rotate the character"
+        onChange={(e) => setIndex(clampIndex(Number(e.target.value), n))}
+        style={{ width: "100%", maxWidth: "18rem", marginTop: "0.4rem", display: "block", cursor: "ew-resize" }}
+      />
+      <p className="vi-comfy-hint" style={{ margin: "0.25rem 0 0", opacity: 0.8 }}>
+        {n} frame{n === 1 ? "" : "s"} · ~{dpf ? dpf.toFixed(dpf < 10 ? 1 : 0) : "?"}°/frame · drag or scrub to rotate
+      </p>
+    </div>
+  );
+}