@hugpy/video-intelligence-ui 0.1.0

package/src/stations/SharePanel.tsx

@@ -0,0 +1,298 @@
+// k9 — the SHARE affordance. An operator mints a video-scoped share link and
+// hands it to an outside party, who can then drive the /video features WITHOUT a
+// console login (the link carries a `?share=<key>` credential the SPA lifts on
+// load — see src/share.ts). The minted key opens the /video surface ONLY; it can
+// never reach the console/operator routes, and — crucially — never the mint route
+// itself, so there is no key-minting-by-key.
+//
+// VISIBILITY IS AUTH-DECIDED, NOT GUESSED. This button renders only for a
+// CONSOLE-AUTHENTICATED session. It probes the operator-gated list endpoint
+// (GET /api/keys/video-share) once on mount: 200 ⇒ operator ⇒ show; 401 ⇒ a share
+// party or anon ⇒ render nothing. So a share-principal session (which CAN pass the
+// /video gate) never sees a working Share button — the probe 401s exactly as the
+// mint POST would.
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { request, okValue } from "../transport/client";
+import { hugpyConfig, keysVideoShareRevokeUrl } from "../config";
+
+interface ShareKey {
+  id: string;
+  label: string;
+  prefix: string;
+  created_at: number;
+  expires_at: number | null;
+  expired?: boolean;
+  revoked?: boolean;
+  last_used?: number | null;
+}
+interface MintResult extends ShareKey {
+  key: string;
+  url: string;
+}
+
+// Expiry choices for the mint form (days). 0 = a non-expiring link.
+const TTL_OPTIONS: { label: string; days: number }[] = [
+  { label: "7 days", days: 7 },
+  { label: "30 days", days: 30 },
+  { label: "90 days", days: 90 },
+  { label: "No expiry", days: 0 },
+];
+
+function fmtExpiry(k: ShareKey): string {
+  if (k.expired) return "expired";
+  if (!k.expires_at) return "no expiry";
+  const days = Math.max(0, Math.round((k.expires_at * 1000 - Date.now()) / 86_400_000));
+  return days <= 0 ? "expiring" : `${days}d left`;
+}
+
+/** The full share link for a minted key — rebuilt from THIS origin so it's always
+ *  correct regardless of how the backend saw its forwarded host. */
+function linkFor(key: string): string {
+  const origin = typeof window !== "undefined" ? window.location.origin : "";
+  return `${origin}/video/?share=${encodeURIComponent(key)}`;
+}
+
+export function SharePanel() {
+  // null = probing (render nothing), false = not an operator (render nothing),
+  // true = operator (render the button).
+  const [authed, setAuthed] = useState<boolean | null>(null);
+  const [open, setOpen] = useState(false);
+  const [keys, setKeys] = useState<ShareKey[]>([]);
+  const [label, setLabel] = useState("");
+  const [ttl, setTtl] = useState(30);
+  const [minting, setMinting] = useState(false);
+  const [minted, setMinted] = useState<MintResult | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    const res = await request<{ keys: ShareKey[] }>(hugpyConfig.keysVideoShareUrl, {
+      method: "GET",
+      meta: { specKey: "share", operation: "share.list" },
+    });
+    if (res.ok) {
+      setAuthed(true);
+      setKeys(okValue(res).keys ?? []);
+    } else {
+      // 401/403 ⇒ not an operator: keep the affordance hidden entirely.
+      setAuthed(false);
+    }
+  }, []);
+
+  // Probe once on mount to decide visibility (and seed the existing-links list).
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const mint = useCallback(async () => {
+    setMinting(true);
+    setError(null);
+    setMinted(null);
+    setCopied(false);
+    const res = await request<MintResult>(hugpyConfig.keysVideoShareUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ label: label.trim(), ttl_days: ttl }),
+      meta: { specKey: "share", operation: "share.mint" },
+    });
+    setMinting(false);
+    if (!res.ok) {
+      setError("Could not create a share link — are you still signed in to the console?");
+      return;
+    }
+    const m = okValue(res);
+    setMinted({ ...m, url: linkFor(m.key) });
+    setLabel("");
+    void refresh();
+  }, [label, ttl, refresh]);
+
+  const revoke = useCallback(
+    async (id: string) => {
+      const res = await request<unknown>(keysVideoShareRevokeUrl(id), {
+        method: "DELETE",
+        meta: { specKey: "share", operation: "share.revoke" },
+      });
+      if (res.ok) void refresh();
+    },
+    [refresh],
+  );
+
+  const copy = useCallback(async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1800);
+    } catch {
+      setCopied(false);
+    }
+  }, []);
+
+  const close = useCallback(() => {
+    setOpen(false);
+    setMinted(null);
+    setError(null);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, close]);
+
+  const activeKeys = useMemo(() => keys.filter((k) => !k.revoked), [keys]);
+
+  // Hidden entirely until the probe confirms an operator session.
+  if (authed !== true) return null;
+
+  return (
+    <>
+      <button
+        type="button"
+        className="vi-share-toggle vi-btn vi-btn-sm"
+        aria-expanded={open}
+        onClick={() => setOpen(true)}
+        title="Create a share link that lets someone use the video features without a console login"
+      >
+        ⤴ Share
+      </button>
+
+      {open &&
+        createPortal(
+          <>
+            <button
+              type="button"
+              className="vi-share-scrim"
+              aria-label="Close share links"
+              onClick={close}
+            />
+            <div
+              className="vi-share-panel"
+              role="dialog"
+              aria-modal="true"
+              aria-label="Share links"
+            >
+              <div className="vi-share-bar">
+                <span className="vi-share-title">Share the video features</span>
+                <button
+                  type="button"
+                  className="vi-btn vi-btn-sm"
+                  onClick={close}
+                  aria-label="Close"
+                  title="Close (Esc)"
+                >
+                  ✕
+                </button>
+              </div>
+
+              <div className="vi-share-body">
+                <p className="vi-share-hint">
+                  A share link lets the person you send it to use the video features
+                  here — no login. It works only for these video tools, nothing else
+                  in the console. Revoke it any time.
+                </p>
+
+                <div className="vi-share-form">
+                  <label className="vi-share-field">
+                    <span>Label (optional)</span>
+                    <input
+                      type="text"
+                      value={label}
+                      placeholder="e.g. Alex — review cut"
+                      onChange={(e) => setLabel(e.target.value)}
+                    />
+                  </label>
+                  <label className="vi-share-field">
+                    <span>Expires</span>
+                    <select
+                      value={ttl}
+                      onChange={(e) => setTtl(Number(e.target.value))}
+                    >
+                      {TTL_OPTIONS.map((o) => (
+                        <option key={o.days} value={o.days}>
+                          {o.label}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                  <button
+                    type="button"
+                    className="vi-btn vi-btn-sm vi-btn-accent"
+                    disabled={minting}
+                    onClick={() => void mint()}
+                  >
+                    {minting ? "Creating…" : "Create share link"}
+                  </button>
+                </div>
+
+                {error && (
+                  <p className="vi-share-error" role="alert">
+                    {error}
+                  </p>
+                )}
+
+                {minted && (
+                  <div className="vi-share-minted">
+                    <p className="vi-share-minted-note">
+                      Copy this now — it won't be shown again.
+                    </p>
+                    <div className="vi-share-minted-row">
+                      <input
+                        className="vi-share-link"
+                        type="text"
+                        readOnly
+                        value={minted.url}
+                        onFocus={(e) => e.currentTarget.select()}
+                      />
+                      <button
+                        type="button"
+                        className="vi-btn vi-btn-sm vi-btn-accent"
+                        onClick={() => void copy(minted.url)}
+                      >
+                        {copied ? "Copied ✓" : "Copy"}
+                      </button>
+                    </div>
+                  </div>
+                )}
+
+                {activeKeys.length > 0 && (
+                  <div className="vi-share-list">
+                    <h3 className="vi-share-list-title">Active links</h3>
+                    <ul>
+                      {activeKeys.map((k) => (
+                        <li key={k.id} className="vi-share-list-item">
+                          <span className="vi-share-item-label">
+                            {k.label || "unnamed"}
+                          </span>
+                          <code className="vi-share-item-prefix">{k.prefix}…</code>
+                          <span
+                            className={`vi-share-item-exp${
+                              k.expired ? " vi-share-item-exp-dead" : ""
+                            }`}
+                          >
+                            {fmtExpiry(k)}
+                          </span>
+                          <button
+                            type="button"
+                            className="vi-btn vi-btn-sm"
+                            onClick={() => void revoke(k.id)}
+                            title="Revoke this link — it stops working immediately"
+                          >
+                            Revoke
+                          </button>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+              </div>
+            </div>
+          </>,
+          document.body,
+        )}
+    </>
+  );
+}

package/src/stations/SidebarRegistry.tsx

@@ -0,0 +1,105 @@
+// Round 9 — the ONE left sidebar of the arm shell grows a THIRD, GUARDED tab:
+// "Settings". The shell's WorkbenchSidebar owns the [ Active Processes | Session
+// Library | Settings ] tab strip, but the Settings tab's CONTENTS (and whether it
+// appears at all) belong to whatever station is currently mounted. This tiny context
+// is the seam:
+//
+//   • A station that has config knobs REGISTERS on mount (registerSettings) — that
+//     flips `settingsActive` true so the sidebar reveals the Settings tab. Stations
+//     that do NOT register (crop stations, and — for now — the Generate image/scene/
+//     movie modes) are completely unaffected: no third tab, zero behaviour change.
+//   • The sidebar publishes the Settings tabpanel's DOM node via `setSettingsHost`
+//     (a callback ref). The mounted station renders its knobs INTO that node with a
+//     React portal, so the knob STATE lives in the station (reactive) while the DOM
+//     lands in the shared sidebar.
+//   • The same pattern carries STUDIO's in-flight renders into the shared Active
+//     Processes tab (studio jobs are not in the jobTracker — StationId has no
+//     "studio" — so they cannot join it the normal way). `activeExtraHost` is a
+//     portal target rendered at the foot of the Active Processes panel;
+//     `activeExtraActive` lets the panel suppress its "no active processes" empty
+//     copy when a station has portaled rows in.
+//
+// Additive by construction: a station outside the provider gets an inert fallback
+// (no-op setters, everything false/null) so nothing throws.
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+
+export interface SidebarRegistryValue {
+  /** The Settings tabpanel DOM node (portal target) — null until that tab renders. */
+  settingsHost: HTMLElement | null;
+  /** Callback ref the sidebar attaches to its Settings tabpanel. */
+  setSettingsHost: (el: HTMLElement | null) => void;
+  /** True when ≥1 station has registered Settings content — gates the Settings tab. */
+  settingsActive: boolean;
+  /** A station calls this on mount; the returned fn unregisters on unmount. */
+  registerSettings: () => () => void;
+
+  /** The Active-Processes "extra rows" portal target (studio in-flight renders). */
+  activeExtraHost: HTMLElement | null;
+  setActiveExtraHost: (el: HTMLElement | null) => void;
+  /** True when a station has registered extra Active rows — suppresses empty copy. */
+  activeExtraActive: boolean;
+  registerActiveExtra: () => () => void;
+}
+
+const FALLBACK: SidebarRegistryValue = {
+  settingsHost: null,
+  setSettingsHost: () => {},
+  settingsActive: false,
+  registerSettings: () => () => {},
+  activeExtraHost: null,
+  setActiveExtraHost: () => {},
+  activeExtraActive: false,
+  registerActiveExtra: () => () => {},
+};
+
+const SidebarRegistryContext = createContext<SidebarRegistryValue | null>(null);
+
+export function SidebarRegistryProvider({ children }: { children: ReactNode }) {
+  const [settingsHost, setSettingsHost] = useState<HTMLElement | null>(null);
+  const [settingsCount, setSettingsCount] = useState(0);
+  const [activeExtraHost, setActiveExtraHost] = useState<HTMLElement | null>(null);
+  const [activeExtraCount, setActiveExtraCount] = useState(0);
+
+  // Reference-counted so overlapping mounts (or React 18 StrictMode's double-invoke)
+  // never leave the tab stuck visible or hidden.
+  const registerSettings = useCallback(() => {
+    setSettingsCount((n) => n + 1);
+    return () => setSettingsCount((n) => Math.max(0, n - 1));
+  }, []);
+  const registerActiveExtra = useCallback(() => {
+    setActiveExtraCount((n) => n + 1);
+    return () => setActiveExtraCount((n) => Math.max(0, n - 1));
+  }, []);
+
+  const value = useMemo<SidebarRegistryValue>(
+    () => ({
+      settingsHost,
+      setSettingsHost,
+      settingsActive: settingsCount > 0,
+      registerSettings,
+      activeExtraHost,
+      setActiveExtraHost,
+      activeExtraActive: activeExtraCount > 0,
+      registerActiveExtra,
+    }),
+    [settingsHost, settingsCount, activeExtraHost, activeExtraCount, registerSettings, registerActiveExtra],
+  );
+
+  return (
+    <SidebarRegistryContext.Provider value={value}>
+      {children}
+    </SidebarRegistryContext.Provider>
+  );
+}
+
+/** Read the sidebar registry. Returns an inert fallback outside a provider (never throws). */
+export function useSidebarRegistry(): SidebarRegistryValue {
+  return useContext(SidebarRegistryContext) ?? FALLBACK;
+}

package/src/stations/StationShell.tsx

@@ -0,0 +1,96 @@
+// The arm shell: the sitewide hugpy navbar + the persistent session-library
+// sidebar + the routed workbench. Every built station now shares ONE workbench
+// (the `group:"studio"` group): its `.vi-subtabs` strip — rendered by
+// WorkbenchStation on the dynamic `/:workbenchTab` route — is the only tab bar,
+// and the old Studio/Generate top-level split is retired. The sidebar mounts
+// ONCE here so it stays static across every sub-tab (including Generate). Deep
+// links (/video/frames, /video/generate …) resolve under the router basename.
+import { useEffect, useState } from "react";
+import { Navigate, Route, Routes, useLocation } from "react-router-dom";
+import { DEFAULT_STATION_ID } from "./registry";
+import { WorkbenchStation } from "./WorkbenchStation";
+import { WorkbenchSidebar } from "./WorkbenchSidebar";
+import { SidebarRegistryProvider } from "./SidebarRegistry";
+import Navbar from "../nav/Navbar";
+import DemoBanner from "../demo/DemoBanner";
+
+export function StationShell() {
+  // Narrow-width (<62rem) only: the sidebar becomes an off-canvas drawer toggled
+  // by the tab-strip hamburger (WorkbenchStation). At >=62rem CSS keeps the
+  // sidebar in its grid column regardless of this flag, so it stays inert there.
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const location = useLocation();
+
+  // Close the drawer whenever the route/sub-tab changes. Desktop is unaffected —
+  // the sidebar shows via the grid no matter what this flag says.
+  useEffect(() => {
+    setSidebarOpen(false);
+  }, [location.pathname]);
+
+  // Close the drawer on Escape while it is open.
+  useEffect(() => {
+    if (!sidebarOpen) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setSidebarOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [sidebarOpen]);
+
+  return (
+    <div className="vi-shell">
+      {/* Nav + demo banner = ONE header stack pinned at the top (operator
+          directive 2026-07-21). In .vi-shell (a 100dvh flex column that never
+          scrolls — content scrolls deep inside the workbench body) the stack is
+          simply the non-growing first flex item, so the banner sits directly
+          under the nav and pushes the content region down with no offset math. */}
+      <header className="vi-header-stack">
+        <Navbar />
+        <DemoBanner />
+      </header>
+      <main className="vi-main">
+        {/* Round 9: the whole workbench (the shared sidebar AND the routed stations)
+            shares the sidebar registry, so a mounted station can register knobs into
+            the sidebar's Settings tab / in-flight rows into Active Processes. */}
+        <SidebarRegistryProvider>
+        <div className={sidebarOpen ? "vi-workbench is-open" : "vi-workbench"}>
+          <aside className="vi-workbench-sidebar">
+            <WorkbenchSidebar />
+          </aside>
+          <div className="vi-workbench-main">
+            <Routes>
+              {/* The single studio workbench: ONE WorkbenchStation on the dynamic
+                  sub-tab param. It stays mounted across sub-tab switches (incl.
+                  Generate → GenerateStation as the 4th sub-tab) so the sidebar is
+                  static. React-Router ranks the `*` redirect below it, so `/`
+                  (index) and any unknown path land on the default station. The
+                  sidebar toggle is drilled in so the mobile hamburger can live as
+                  the leading element of the sub-tab strip. */}
+              <Route
+                path="/:workbenchTab"
+                element={
+                  <WorkbenchStation
+                    sidebarOpen={sidebarOpen}
+                    onToggleSidebar={() => setSidebarOpen((v) => !v)}
+                  />
+                }
+              />
+              <Route path="*" element={<Navigate to={`/${DEFAULT_STATION_ID}`} replace />} />
+            </Routes>
+          </div>
+          {/* Mobile-only scrim behind the drawer — click to close. Fixed-position,
+              so its DOM slot here is cosmetic; CSS hides it at >=62rem. */}
+          {sidebarOpen && (
+            <button
+              type="button"
+              className="vi-scrim"
+              aria-label="Close session library"
+              onClick={() => setSidebarOpen(false)}
+            />
+          )}
+        </div>
+        </SidebarRegistryProvider>
+      </main>
+    </div>
+  );
+}

package/src/stations/StudioClipsStation.tsx

@@ -0,0 +1,28 @@
+// The STUDIO station — a SINGLE-PLANE workspace over the cinema-studio spine (Movie-tab
+// style): one scroll with the generate controls on top and the clip viewer + list
+// inline below. It renders the shared StudioPlane (the same plane the Generate station's
+// "studio" mode mounts), passing registerBridge so this standalone station is the
+// "Send to Studio" target.
+//
+// History (house rule: never delete, archive):
+//   • the original single-page test station → _archive/StudioClipsStation.2026-07-07.pre-workspace.tsx.bak
+//   • the two-tab (Generate | Library) workspace → _archive/StudioClipsStation.2026-07-08.tabs-workspace.tsx.bak
+// The two tabs are retired: the single plane shows generation AND the viewer AND the
+// list together, so there is nothing a tab covered that the plane does not. All the
+// behaviors are preserved inside the plane's pieces — preset shapes + hero gating,
+// prompt_note badge, the durable clip list + 6s poll + Session-Library push, the
+// per-row Details expander, filters (now a compact collapsible strip), per-clip actions
+// (play / copy path / use-as-source / cancel), failed-row inline errors, and the
+// studioBridge "Send to Studio" staging (owned here via registerBridge).
+import type { StationSpec } from "./types";
+import { StudioPlane } from "./studio/StudioPlane";
+
+export function StudioClipsStation({ spec }: { spec: StationSpec }) {
+  return (
+    <section className="station-wide vi-studio-clips" aria-label="Studio workspace">
+      {/* The single plane. registerBridge: this standalone station is the target of the
+          shell sidebar's "Send to Studio" (the Generate-mode plane does not register). */}
+      <StudioPlane registerBridge />
+    </section>
+  );
+}

package/src/stations/WorkbenchDrawer.tsx

@@ -0,0 +1,66 @@
+// WorkbenchDrawer — the ONE overlay window behind the sidebar's
+// `.vi-side-toolbar` deep-links, with Console | ComfyUI | Active as tabs inside it.
+//
+// ── WHY ONE WINDOW (operator ask, 2026-08-06) ──────────────────────────────
+// "Having the 3 options as tab selectable within the overlay window would be a
+// huge convenience." Before this, each panel owned its own drawer instance, its
+// own open/size state and its own storage key. That made switching between them
+// a close-then-reopen — and worse, the scrim sits at z-index 90 OVER the sidebar,
+// so while any drawer was open the other two toggles were not even clickable.
+// Now there is a single drawer: one open flag, one half/full size, one persisted
+// record, and a tab strip in its header.
+//
+// ── WHAT EACH FILE STILL OWNS ──────────────────────────────────────────────
+// The shell (drawerShell.tsx) owns the window: portal-to-<body>, sizing,
+// Esc-to-close, persistence, the tab strip, and the mount policy. Each panel file
+// owns its own tab descriptor and nothing else — crucially, its own security
+// posture, which this host must never normalise:
+//   * ConsolePanel  — first-party, same-origin iframe, deliberately UNSANDBOXED
+//                     (a sandbox without allow-modals breaks its confirm() flows).
+//   * ComfyPanel    — user-supplied FOREIGN endpoint: sanitize-then-sandbox gate
+//                     (comfyEmbed.ts) plus its endpoint form in the header.
+//   * ActivePanel   — a real component whose MOUNT starts a 2s poll.
+// They render as three separate elements side by side, so "one window" never
+// means "one frame whose src is swapped": the console frame and the comfy frame
+// are distinct <iframe>s with independent sandbox attributes, exactly as before.
+//
+// ── STATE LIVES HERE, NOT IN THE PORTAL ────────────────────────────────────
+// This component is mounted by WorkbenchSidebar and stays mounted whether the
+// drawer is open or shut, so tab-owned state hoisted into it (ComfyUI's endpoint
+// field) survives both tab switches and a close/reopen.
+import { useComfyDrawerTab } from "./ComfyPanel";
+import { consoleDrawerTab } from "./ConsolePanel";
+import { activeDrawerTab } from "./ActivePanel";
+import { DrawerShell, useDrawerState, type LegacyDrawerKey } from "./drawerShell";
+
+type DrawerTabId = "console" | "comfy" | "active";
+
+// Strip order = the order the panels arrived in (Console t52, ComfyUI 2026-08-04,
+// Active 2026-08-06), which is also the toolbar's existing left-to-right order —
+// so the tab strip and the deep-link row read the same way round.
+const TAB_IDS = ["console", "comfy", "active"] as const;
+
+// ONE key now holds {open, size, tab}, replacing the three per-panel records.
+const STORAGE_KEY = "vi.workbench.drawer.v1";
+
+// The pre-tabs keys, in strip order. useDrawerState reads them once (first one
+// found OPEN wins, so an operator who left ComfyUI open full-screen reopens on
+// the ComfyUI tab, full-screen) and then clears them. See migrateLegacy.
+const LEGACY_KEYS: readonly LegacyDrawerKey<DrawerTabId>[] = [
+  { key: "vi.console.panel.v1", tab: "console" },
+  { key: "vi.comfy.panel.v1", tab: "comfy" },
+  { key: "vi.active.panel.v1", tab: "active" },
+];
+
+export function WorkbenchDrawer() {
+  const drawer = useDrawerState<DrawerTabId>(STORAGE_KEY, TAB_IDS, LEGACY_KEYS);
+  // ComfyUI's tab is a hook (it owns the endpoint state); the other two are pure
+  // descriptors. All three are rebuilt every render — a descriptor is just JSX,
+  // and an unselected tab's body element is only MOUNTED if the shell renders it.
+  const comfy = useComfyDrawerTab();
+  const tabs = [consoleDrawerTab(), comfy, activeDrawerTab()];
+
+  return (
+    <DrawerShell state={drawer} tabs={tabs} tablistLabel="Overlay panels" />
+  );
+}