npm - @hugpy/video-intelligence-ui - Versions diffs - 0.1.0 - Mend

@hugpy/video-intelligence-ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (177) hide show

package/LICENSE +41 -0
package/assets/sampels/images/bycycle/bd8603bad35d4f179f4d1134d8faf2ee.mp4 +0 -0
package/assets/sampels/images/bycycle/frame_00000.png +0 -0
package/assets/sampels/images/bycycle/frame_00001.png +0 -0
package/assets/sampels/images/bycycle/frame_00002.png +0 -0
package/assets/sampels/images/bycycle/frame_00003.png +0 -0
package/assets/sampels/images/bycycle/frame_00004.png +0 -0
package/assets/sampels/images/bycycle/frame_00005.png +0 -0
package/assets/sampels/images/forrest/ff23090611b844a6b85c224f388bd542.mp4 +0 -0
package/assets/sampels/images/forrest/frame_00000.png +0 -0
package/assets/sampels/images/forrest/frame_00001.png +0 -0
package/assets/sampels/images/forrest/frame_00002.png +0 -0
package/assets/sampels/images/forrest/frame_00003.png +0 -0
package/assets/sampels/images/forrest/frame_00004.png +0 -0
package/assets/sampels/images/forrest/frame_00005.png +0 -0
package/assets/sampels/images/shenzo/e1a4fcd623084ab4a986d11c8cd00db8.mp4 +0 -0
package/assets/sampels/images/shenzo/frame_00000.png +0 -0
package/assets/sampels/images/shenzo/frame_00001.png +0 -0
package/assets/sampels/images/shenzo/frame_00002.png +0 -0
package/assets/sampels/images/shenzo/frame_00003.png +0 -0
package/assets/sampels/images/shenzo/frame_00004.png +0 -0
package/assets/sampels/images/shenzo/frame_00005.png +0 -0
package/assets/sampels/scenes/man.mp4 +0 -0
package/assets/sampels/scenes/woman.mp4 +0 -0
package/assets/sampels/studio_movies/caverns/_assembly/contrib_00.mp4 +0 -0
package/assets/sampels/studio_movies/caverns/movie.json +67 -0
package/assets/sampels/studio_movies/caverns/movie.mp4 +0 -0
package/assets/sampels/studio_movies/caverns/segment_00/5eea7770a554fef0c3bdc38f8f38b925dcf75f13c015d423e8eadec47d41bf6b/clip.mp4 +0 -0
package/assets/sampels/studio_movies/caverns/segment_00/5eea7770a554fef0c3bdc38f8f38b925dcf75f13c015d423e8eadec47d41bf6b/manifest.json +87 -0
package/assets/sampels/studio_movies/caverns/segment_00/5eea7770a554fef0c3bdc38f8f38b925dcf75f13c015d423e8eadec47d41bf6b/provenance.json +7 -0
package/assets/sampels/studio_movies/caverns/segment_01/branch.png +0 -0
package/assets/sampels/studio_movies/keeper-matrix/_assembly/concat_list.txt +2 -0
package/assets/sampels/studio_movies/keeper-matrix/_assembly/contrib_00.mp4 +0 -0
package/assets/sampels/studio_movies/keeper-matrix/_assembly/contrib_01.mp4 +0 -0
package/assets/sampels/studio_movies/keeper-matrix/movie.json +81 -0
package/assets/sampels/studio_movies/keeper-matrix/movie.mp4 +0 -0
package/assets/sampels/studio_movies/keeper-matrix/segment_00/64854c6a21d47ce10b23e884e12de448b25bfb0a375d33238dd0bec8056c076d/clip.mp4 +0 -0
package/assets/sampels/studio_movies/keeper-matrix/segment_00/64854c6a21d47ce10b23e884e12de448b25bfb0a375d33238dd0bec8056c076d/manifest.json +87 -0
package/assets/sampels/studio_movies/keeper-matrix/segment_00/64854c6a21d47ce10b23e884e12de448b25bfb0a375d33238dd0bec8056c076d/provenance.json +7 -0
package/assets/sampels/studio_movies/keeper-matrix/segment_01/branch.png +0 -0
package/assets/sampels/studio_movies/keeper-matrix/segment_01/cc926b44a42b90d7d291a4e50e3859458306c207a17c718086a3466e4049d6c6/clip.mp4 +0 -0
package/assets/sampels/studio_movies/keeper-matrix/segment_01/cc926b44a42b90d7d291a4e50e3859458306c207a17c718086a3466e4049d6c6/manifest.json +87 -0
package/assets/sampels/studio_movies/keeper-matrix/segment_01/cc926b44a42b90d7d291a4e50e3859458306c207a17c718086a3466e4049d6c6/provenance.json +7 -0
package/assets/sampels/videos/a_red_paper_boat_drifting_on_a_calm_pond__gentle_ripples__mo_a62d6c28.mp4 +0 -0
package/assets/sampels/videos/aurora.mp4 +0 -0
package/assets/sampels/videos/dark_night.mp4 +0 -0
package/assets/sampels/videos/fire_and_soul.mp4 +0 -0
package/assets/sampels/videos/harsh_seas.mp4 +0 -0
package/entry.tsx +74 -0
package/index.html +53 -0
package/package.json +42 -0
package/src/assets/hugpy-mark.png +0 -0
package/src/config.ts +676 -0
package/src/demo/DemoBanner.tsx +54 -0
package/src/demo/assets/demo-audio.mp3 +0 -0
package/src/demo/assets/demo-clip.mp4 +0 -0
package/src/demo/assets/demo-crop.mp4 +0 -0
package/src/demo/assets/demo-poster.jpg +0 -0
package/src/demo/assets/frame-1.jpg +0 -0
package/src/demo/assets/frame-2.jpg +0 -0
package/src/demo/assets/frame-3.jpg +0 -0
package/src/demo/assets/frame-4.jpg +0 -0
package/src/demo/assets/frame-5.jpg +0 -0
package/src/demo/assets/frame-6.jpg +0 -0
package/src/demo/assets/gen-1.jpg +0 -0
package/src/demo/assets/gen-2.jpg +0 -0
package/src/demo/assets.d.ts +14 -0
package/src/demo/demo.css +64 -0
package/src/demo/demoFetch.ts +305 -0
package/src/demo/fixtures.ts +814 -0
package/src/demo/index.ts +43 -0
package/src/demo/mode.ts +81 -0
package/src/demo/promptAssist.ts +181 -0
package/src/demo/seed.ts +97 -0
package/src/nav/BrandMark.css +66 -0
package/src/nav/BrandMark.tsx +40 -0
package/src/nav/Navbar.css +13 -0
package/src/nav/Navbar.tsx +68 -0
package/src/regions/SpatialRegionEditor.tsx +375 -0
package/src/regions/TemporalRegionEditor.tsx +485 -0
package/src/regions/types.ts +85 -0
package/src/session.ts +85 -0
package/src/share.ts +77 -0
package/src/stations/ActivePanel.tsx +55 -0
package/src/stations/ActiveProcessesStation.tsx +272 -0
package/src/stations/ActiveProcessesStation.tsx.bak-sessions-20260812 +228 -0
package/src/stations/AddFileBar.tsx +59 -0
package/src/stations/AudioCropStation.tsx +157 -0
package/src/stations/ComfyPanel.tsx +210 -0
package/src/stations/ComfyStation.tsx +196 -0
package/src/stations/CondensedKnobStrip.tsx +245 -0
package/src/stations/ConsolePanel.tsx +82 -0
package/src/stations/FrameExtractStation.tsx +148 -0
package/src/stations/GenIdentityBar.tsx +412 -0
package/src/stations/GenerateStation.tsx +5603 -0
package/src/stations/GenerateStation.tsx.bak-tester-removal +5170 -0
package/src/stations/GoalComposer.tsx +139 -0
package/src/stations/ImageCropStation.tsx +153 -0
package/src/stations/KnobInfo.tsx +64 -0
package/src/stations/PlaceholderStation.tsx +26 -0
package/src/stations/SectionTabs.tsx +276 -0
package/src/stations/SharePanel.tsx +298 -0
package/src/stations/SidebarRegistry.tsx +105 -0
package/src/stations/StationShell.tsx +96 -0
package/src/stations/StudioClipsStation.tsx +28 -0
package/src/stations/WorkbenchDrawer.tsx +66 -0
package/src/stations/WorkbenchSidebar.tsx +1224 -0
package/src/stations/WorkbenchStation.tsx +91 -0
package/src/stations/comfyEmbed.ts +79 -0
package/src/stations/drawerShell.tsx +419 -0
package/src/stations/ops/AudioCropCore.tsx +218 -0
package/src/stations/ops/CharacterGroupsPanel.tsx +716 -0
package/src/stations/ops/FrameExtractCore.tsx +695 -0
package/src/stations/ops/ImageCropCore.tsx +164 -0
package/src/stations/ops/VideoCropCore.tsx +193 -0
package/src/stations/ops/useVideoCropJobs.ts +224 -0
package/src/stations/pollCaps.ts +87 -0
package/src/stations/registry.ts +191 -0
package/src/stations/studio/AngleRingEditor.tsx +159 -0
package/src/stations/studio/IdentitiesStation.tsx +2455 -0
package/src/stations/studio/IdentityProfileControls.tsx +262 -0
package/src/stations/studio/StudioActiveProcesses.tsx +224 -0
package/src/stations/studio/StudioAssistLogPanel.tsx +220 -0
package/src/stations/studio/StudioGenerateMode.tsx +29 -0
package/src/stations/studio/StudioGenerateTab.tsx +2688 -0
package/src/stations/studio/StudioItemCard.tsx +334 -0
package/src/stations/studio/StudioLibraryTab.tsx +506 -0
package/src/stations/studio/StudioMovieComposer.tsx +2875 -0
package/src/stations/studio/StudioMovieComposer.tsx.bak-sessions-20260812 +2729 -0
package/src/stations/studio/StudioMovieSessions.tsx +553 -0
package/src/stations/studio/StudioMovieSessions.tsx.bak-sessions-20260812 +417 -0
package/src/stations/studio/StudioPlane.tsx +302 -0
package/src/stations/studio/StudioSplicedRow.tsx +476 -0
package/src/stations/studio/StudioViewer.tsx +339 -0
package/src/stations/studio/TurntableViewer.tsx +220 -0
package/src/stations/studio/movieTimeline.ts +198 -0
package/src/stations/studio/promptCard.tsx +498 -0
package/src/stations/studio/studioItem.ts +87 -0
package/src/stations/studio/studioShared.tsx +821 -0
package/src/stations/studio/useIdentityProfiles.ts +575 -0
package/src/stations/studio/useReconstruction.ts +283 -0
package/src/stations/types.ts +43 -0
package/src/stations/useAudioCropJobs.ts +202 -0
package/src/stations/useAudioExtractJob.ts +144 -0
package/src/stations/useCropJobs.ts +206 -0
package/src/stations/useFrameJobs.ts +140 -0
package/src/stations/useGenerateJob.ts +151 -0
package/src/stations/useGenerateMovieJob.ts +177 -0
package/src/stations/useGenerateRowJobs.ts +184 -0
package/src/stations/useGenerateSceneJob.ts +156 -0
package/src/stations/useGenerateSceneRowJobs.ts +282 -0
package/src/style/app.css +4974 -0
package/src/transport/client.ts +262 -0
package/src/transport/telemetry.ts +97 -0
package/src/video/DropReceptacle.tsx +122 -0
package/src/video/PromptAssistButtons.tsx +118 -0
package/src/video/composerBridge.ts +66 -0
package/src/video/contract.ts +599 -0
package/src/video/jobTracker.ts +702 -0
package/src/video/mediaLibrary.ts +328 -0
package/src/video/renderCompat.ts +512 -0
package/src/video/sessionForm.ts +189 -0
package/src/video/spreadAssist.ts +392 -0
package/src/video/studioBridge.ts +82 -0
package/src/video/useMediaJobs.ts +279 -0
package/src/video/useModels.ts +413 -0
package/src/video/useMoviePresets.ts +97 -0
package/src/video/useMovieSessions.ts +292 -0
package/src/video/usePresets.ts +167 -0
package/src/video/useProjects.ts +87 -0
package/src/video/usePromptAssist.ts +394 -0
package/src/video/useRenderPresets.ts +221 -0
package/src/video/useStudioAssistLog.ts +266 -0
package/src/video/useStudioPresets.ts +128 -0
package/src/video/useWorkerCalls.ts +165 -0
package/tsconfig.json +17 -0
package/vite.config.ts +33 -0

package/src/stations/WorkbenchStation.tsx ADDED Viewed

@@ -0,0 +1,91 @@
+// The Studio workbench — the studio sub-tabs nav + the active station body. The
+// session-library sidebar and the surrounding `.vi-workbench` grid now live at the
+// shell level (StationShell owns them once, for EVERY route), so this component
+// renders ONLY into the shell's `.vi-workbench-main` column. StationShell mounts
+// ONE WorkbenchStation for the whole studio group (routed on the dynamic
+// `/:workbenchTab` segment), so switching sub-tabs never remounts it. The wrapped
+// station bodies (each a `.station-card`, some using the `.vi-studio` grid) render
+// untouched inside the main column.
+import { NavLink, Navigate, useParams } from "react-router-dom";
+import { STATIONS, DEFAULT_STATION_ID } from "./registry";
+import { PlaceholderStation } from "./PlaceholderStation";
+import type { StationSpec } from "./types";
+// The workbench sub-tabs, straight off the registry — every built station now
+// shares the "studio" group (image-crop, audio-crop, frames, generate), so this
+// one strip IS the whole tab bar.
+const STUDIO_STATIONS = STATIONS.filter((s) => s.group === "studio");
+// The fallback must be a station that actually HAS a tab. This used to be
+// STUDIO_STATIONS[0], taken before the `!navHidden` filter applied to the strip
+// below — so if the first registered station were ever navHidden (studio-clips
+// and, since 2026-08-04, comfy both are), the redirect target would be a page
+// with no tab in the strip and nothing rendering as active.
+const DEFAULT_STUDIO_ID =
+  STUDIO_STATIONS.find((s) => !s.navHidden)?.id ?? DEFAULT_STATION_ID;
+// Same active-guard the shell uses: the real component when active, else the
+// honest placeholder. Kept local so the workbench mirrors StationBody exactly.
+function StudioBody({ spec }: { spec: StationSpec }) {
+  const Body = spec.status === "active" && spec.component ? spec.component : null;
+  return Body ? <Body spec={spec} /> : <PlaceholderStation spec={spec} />;
+}
+interface WorkbenchStationProps {
+  /** Mobile drawer open-state (owned by StationShell). */
+  sidebarOpen: boolean;
+  /** Toggle the mobile session-library drawer. */
+  onToggleSidebar: () => void;
+}
+export function WorkbenchStation({
+  sidebarOpen,
+  onToggleSidebar,
+}: WorkbenchStationProps) {
+  const { workbenchTab } = useParams();
+  const active = STUDIO_STATIONS.find((s) => s.id === workbenchTab);
+  // A non-studio param (or bare group route) lands on the default studio sub-tab.
+  if (!active) return <Navigate to={`/${DEFAULT_STUDIO_ID}`} replace />;
+  // Renders directly into the shell's `.vi-workbench-main` column: the sub-tabs
+  // nav then the active body. No sidebar/grid here — the shell owns those. The
+  // leading control in the strip is the mobile-only "Session library" hamburger
+  // (hidden at >=62rem via CSS); it toggles the shell's off-canvas drawer.
+  return (
+    <>
+      <nav className="vi-subtabs" aria-label="Studio">
+        <button
+          type="button"
+          className="vi-hamburger"
+          aria-label="Session library"
+          title="Session library"
+          aria-expanded={sidebarOpen}
+          onClick={onToggleSidebar}
+        >
+          <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true" focusable="false">
+            <path
+              d="M2 4.5h14M2 9h14M2 13.5h14"
+              stroke="currentColor"
+              strokeWidth="1.6"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+        {STUDIO_STATIONS.filter((s) => !s.navHidden).map((s) => (
+          <NavLink
+            key={s.id}
+            to={`/${s.id}`}
+            className={({ isActive }) =>
+              isActive ? "vi-subtab vi-subtab-active" : "vi-subtab"
+            }
+          >
+            {s.title}
+          </NavLink>
+        ))}
+      </nav>
+      <div className="vi-workbench-body">
+        <StudioBody spec={active} />
+      </div>
+    </>
+  );
+}

package/src/stations/comfyEmbed.ts ADDED Viewed

@@ -0,0 +1,79 @@
+// Shared ComfyUI-embed helpers — the ONE security gate every ComfyUI URL passes
+// before it can become an iframe `src`, plus the embed-hazard classifier behind
+// the inline warnings.
+//
+// Extracted from ComfyStation.tsx when ComfyUI became an in-page OVERLAY
+// (ComfyPanel, mounted in the sidebar beside Console) so the panel and the
+// station cannot drift apart on the part that matters. There must be exactly one
+// sanitizer: a second, subtly-weaker copy is how a `javascript:` URL eventually
+// reaches an iframe.
+//
+// ── WHY THIS EXISTS (do not delete the gate) ────────────────────────────────
+// The ComfyUI endpoint is USER-EDITABLE and PERSISTED, so a hostile or mistyped
+// value could carry a `javascript:` / `data:` / `blob:` / `file:` scheme. An
+// unsanitized value handed to iframe src executes in the parent context. Every
+// value — typed AND rehydrated from storage — goes through sanitizeEmbedUrl().
+//
+// This is also precisely why a ComfyUI iframe is NOT the same trust case as the
+// console's: the console is first-party, same-origin, fixed-href content (see
+// ConsolePanel's header), while this URL is user-supplied and foreign. The
+// console frame is deliberately unsandboxed; a ComfyUI frame MUST stay sandboxed.
+/** The ONLY schemes allowed to reach iframe src. Everything else — javascript:,
+ *  data:, blob:, file:, vbscript:, mailto:, about:, … — is rejected so a
+ *  persisted or typed hostile URI can never execute in the parent context. */
+const ALLOWED_SCHEMES = new Set(["http:", "https:"]);
+/**
+ * Return `raw` as a normalized URL string ONLY if it parses as an absolute
+ * http:// or https:// URL; otherwise null. Uses `new URL()` (so relative junk,
+ * bare hosts, and unknown schemes throw or fail the allowlist) plus a strict
+ * scheme allowlist. Call it on typed input AND on any persisted value.
+ */
+export function sanitizeEmbedUrl(raw: string): string | null {
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+  let parsed: URL;
+  try {
+    parsed = new URL(trimmed);
+  } catch {
+    return null; // relative / malformed / scheme-less — never embeddable.
+  }
+  if (!ALLOWED_SCHEMES.has(parsed.protocol)) return null; // reject javascript:, data:, blob:, file:, …
+  return parsed.href;
+}
+/** Embed-hazard classification of a (sanitized) URL, for the inline warning. */
+export type EmbedRisk = "http" | "localhost" | null;
+/**
+ * Flag URLs that an HTTPS page cannot embed: http:// (mixed content) or a
+ * loopback host (localhost / 127.0.0.1 / ::1 — not reachable/TLS-served from the
+ * user's browser through the deployed HTTPS origin). Runs on the sanitized value,
+ * so anything non-http/https is already null and returns no risk.
+ */
+export function embedRisk(raw: string): EmbedRisk {
+  const safe = sanitizeEmbedUrl(raw);
+  if (!safe) return null;
+  const u = new URL(safe);
+  if (u.protocol === "http:") return "http";
+  const host = u.hostname.toLowerCase();
+  const isLoopback =
+    host === "localhost" ||
+    host.endsWith(".localhost") ||
+    host === "127.0.0.1" ||
+    host === "::1" ||
+    host === "0.0.0.0";
+  return isLoopback ? "localhost" : null;
+}
+/** The sandbox tokens a ComfyUI frame runs with. Permissive on purpose (ComfyUI
+ *  needs scripts, same-origin, forms, downloads and popups to function) but
+ *  NEVER absent: the URL is user-supplied and foreign, unlike the console's. */
+export const COMFY_SANDBOX =
+  "allow-scripts allow-same-origin allow-forms allow-downloads allow-popups allow-popups-to-escape-sandbox";
+/** Session-persisted (per-tab) key for the entered endpoint URL. Shared so the
+ *  panel and the station show the SAME endpoint instead of two half-configured
+ *  ones. */
+export const COMFY_URL_KEY = "vi.comfy.url.v1";

package/src/stations/drawerShell.tsx ADDED Viewed

@@ -0,0 +1,419 @@
+// The SHARED expand-into-the-screen drawer — the shell behind the sidebar's
+// `.vi-side-toolbar` toggles (Console, ComfyUI, and — 2026-08-06 — Active).
+//
+// ── WHY THIS EXISTS ─────────────────────────────────────────────────────────
+// t52 built the shell inside ConsolePanel. ComfyPanel (2026-08-04) reproduced it
+// verbatim so that "the same as console" would be literally true rather than
+// approximately true — the right instinct, but by the third overlay (the operator
+// ask 2026-08-06: "Active as an overlay too") a copied shell is three chances to
+// drift. So the shell is factored out HERE, exactly as it already existed:
+// same portal-to-<body>, same `.vi-console-panel*` classes, same localStorage
+// open/size persistence, same Esc-to-close, same half/full toggle. Nothing about
+// the rendered DOM changed in the move — the class names deliberately keep the
+// `vi-console-panel` prefix (they are the drawer's classes, not the console's).
+//
+// ── ONE WINDOW, THREE TABS (operator ask 2026-08-06, second round) ──────────
+// "Having the 3 options as tab selectable within the overlay window would be a
+// huge convenience." Three independent drawers meant three open/size states and
+// no way to get from one to the next without closing and reopening — and, since
+// the scrim covers the sidebar at z-index 90, the toolbar toggles are not even
+// clickable while a drawer is open. So there is now exactly ONE drawer instance
+// (one open flag, one size, one persisted record) whose header carries a
+// `role="tablist"` strip; each DrawerTab contributes its own body, header extras
+// and header actions. Selecting a tab swaps the body in place — no close/reopen.
+//
+// ── MOUNTING POLICY: PER TAB, VIA `keepMounted` (deliberate, read this) ─────
+// An unselected tab is one of two things, and the difference is load-bearing:
+//   * keepMounted: true  → rendered but `hidden`. `display:none` does NOT tear
+//     down or reload an <iframe>, so Console and ComfyUI keep their live frame
+//     (and its scroll position, its login session, its half-finished ComfyUI
+//     graph) across tab switches. Reloading a ComfyUI workspace every time the
+//     operator glanced at Active would make the tab strip worse than the three
+//     separate drawers it replaces.
+//   * keepMounted: false → not rendered at all. This is for a body whose MOUNT
+//     is what starts work: ActivePanel's ActiveProcessesStation polls /media/jobs
+//     every 2s for as long as it is mounted, so "hidden but mounted" would keep
+//     that poll running behind the Console frame — exactly the always-on poll the
+//     panel's own header forbids. Unmounting is how the poll stops; there is no
+//     separate pause seam to reach for.
+// The whole portal only exists while `open`, so a CLOSED drawer still mounts
+// nothing at all — closing remains the way to drop every frame and every poll.
+//
+// ── PORTALED TO <body> (do not "simplify" this) ─────────────────────────────
+// WorkbenchSidebar lives inside `.vi-workbench-sidebar`, which grows a `transform`
+// at the <62rem breakpoint (the off-canvas drawer). A transformed ancestor becomes
+// the containing block for `position: fixed` descendants, which would trap an
+// "expand into the screen" panel inside the sidebar's own narrow box. Portaling to
+// <body> sidesteps that regardless of where the toggle button lives in the tree.
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+export type DrawerSize = "half" | "full";
+interface PersistedState<T extends string> {
+  open: boolean;
+  size: DrawerSize;
+  /** Which tab was showing — restored so reopening lands where you left off. */
+  tab: T;
+}
+/** A pre-tabs per-panel storage key and the tab it became. See migrateLegacy. */
+export interface LegacyDrawerKey<T extends string> {
+  key: string;
+  tab: T;
+}
+function parse<T extends string>(
+  raw: string | null,
+  tabs: readonly T[],
+  fallback: PersistedState<T>,
+): PersistedState<T> | null {
+  if (!raw) return null;
+  try {
+    const p = JSON.parse(raw);
+    return {
+      open: typeof p.open === "boolean" ? p.open : fallback.open,
+      size: p.size === "full" ? "full" : "half",
+      // An unknown tab id (a renamed/removed panel in an older record) falls
+      // back to the first tab rather than leaving the strip with nothing selected.
+      tab: tabs.includes(p.tab) ? (p.tab as T) : fallback.tab,
+    };
+  } catch {
+    return null; // corrupt record — quiet fallback
+  }
+}
+/**
+ * One-time upgrade from the three pre-tabs keys (`vi.console.panel.v1`,
+ * `vi.comfy.panel.v1`, `vi.active.panel.v1`) to the single tabbed record.
+ *
+ * An operator who left, say, the ComfyUI drawer open and full-screen should find
+ * the unified drawer open, full-screen, on the ComfyUI tab — not collapsed. So:
+ * the first legacy key found OPEN wins outright (open + size + its tab); if none
+ * was open, the first parseable record still donates its `size` so the half/full
+ * preference survives. The stale keys are cleared by useDrawerState's mount
+ * effect (a side effect belongs there, not in a render-phase initializer).
+ */
+function migrateLegacy<T extends string>(
+  tabs: readonly T[],
+  legacy: readonly LegacyDrawerKey<T>[],
+  fallback: PersistedState<T>,
+): PersistedState<T> {
+  let size: DrawerSize | null = null;
+  for (const entry of legacy) {
+    const prev = parse(localStorage.getItem(entry.key), tabs, fallback);
+    if (!prev) continue;
+    if (prev.open) return { open: true, size: prev.size, tab: entry.tab };
+    if (size == null) size = prev.size;
+  }
+  return size == null ? fallback : { ...fallback, size };
+}
+function readPersisted<T extends string>(
+  storageKey: string,
+  tabs: readonly T[],
+  legacy: readonly LegacyDrawerKey<T>[],
+): PersistedState<T> {
+  const fallback: PersistedState<T> = {
+    open: false,
+    size: "half",
+    tab: tabs[0] as T,
+  };
+  try {
+    // The unified record wins whenever it exists — migration is strictly the
+    // "never seen the tabbed drawer before" path, so it can only ever run once.
+    return (
+      parse(localStorage.getItem(storageKey), tabs, fallback) ??
+      migrateLegacy(tabs, legacy, fallback)
+    );
+  } catch {
+    return fallback; // storage unavailable (private mode) — quiet fallback
+  }
+}
+function persist<T extends string>(
+  storageKey: string,
+  state: PersistedState<T>,
+): void {
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(state));
+  } catch {
+    /* best-effort — the in-memory state still drives this session */
+  }
+}
+export interface DrawerState<T extends string = string> {
+  open: boolean;
+  size: DrawerSize;
+  tab: T;
+  /** Open the drawer ON a tab — what a toolbar deep-link does. */
+  openTab: (tab: T) => void;
+  /** Switch tabs without touching open/size — what the in-window strip does. */
+  selectTab: (tab: T) => void;
+  close: () => void;
+  toggleSize: () => void;
+}
+/**
+ * The drawer's open/size/tab state, persisted under ONE key.
+ *
+ * Persisting every change is the t52 spec ("feels stable across visits"):
+ * reopening /video restores exactly the open/closed + half/full state left
+ * behind, instead of always starting collapsed. The selected tab rides along in
+ * the same record for the same reason — the operator who lives in ComfyUI should
+ * not have to re-pick it every visit.
+ *
+ * Note the SINGLE state object: the pre-tabs version kept two useState calls,
+ * each re-reading storage in its initializer. That was fine while the read was
+ * pure, but migration must observe the legacy keys exactly once, so one read /
+ * one initializer is now load-bearing.
+ */
+export function useDrawerState<T extends string>(
+  storageKey: string,
+  tabs: readonly T[],
+  legacy: readonly LegacyDrawerKey<T>[] = [],
+): DrawerState<T> {
+  const [state, setState] = useState<PersistedState<T>>(() =>
+    readPersisted(storageKey, tabs, legacy),
+  );
+  useEffect(() => {
+    persist(storageKey, state);
+  }, [storageKey, state]);
+  // Drop the pre-tabs keys once, after the first commit has already read them.
+  // They are pure UI chrome (open/half) and nothing reads them any more, so
+  // leaving them would only litter storage with records that can never win again.
+  useEffect(() => {
+    try {
+      for (const entry of legacy) localStorage.removeItem(entry.key);
+    } catch {
+      /* storage unavailable — nothing to clean up */
+    }
+    // Intentionally mount-only: `legacy` is a module-level constant at every
+    // call site, and re-running this would be a no-op anyway.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const openTab = useCallback(
+    (tab: T) => setState((s) => ({ ...s, open: true, tab })),
+    [],
+  );
+  const selectTab = useCallback(
+    (tab: T) => setState((s) => ({ ...s, tab })),
+    [],
+  );
+  const close = useCallback(() => setState((s) => ({ ...s, open: false })), []);
+  const toggleSize = useCallback(
+    () =>
+      setState((s) => ({ ...s, size: s.size === "full" ? "half" : "full" })),
+    [],
+  );
+  // ESC closes — only listens while the panel is actually open, mirroring
+  // StationShell's own Escape-closes-the-mobile-drawer effect.
+  useEffect(() => {
+    if (!state.open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [state.open, close]);
+  return {
+    open: state.open,
+    size: state.size,
+    tab: state.tab,
+    openTab,
+    selectTab,
+    close,
+    toggleSize,
+  };
+}
+/** One tab of the unified drawer, contributed by its own panel file. */
+export interface DrawerTab<T extends string = string> {
+  id: T;
+  /** Tab-strip label, and the noun in "Close X" — a plain string for a11y. */
+  label: string;
+  /** Tooltip, shared by the toolbar deep-link and the in-window tab. */
+  hint: string;
+  /** Extra class on the toolbar deep-link (e.g. "vi-console-toggle") — sized by app.css. */
+  toggleClassName: string;
+  /** Toolbar deep-link content (e.g. "▤ Console") — may carry a glyph. */
+  toggleLabel: ReactNode;
+  /** The dialog's accessible name while this tab is selected (e.g. "hugpy console"). */
+  ariaLabel: string;
+  /** Extra class on the panel element while selected (e.g. "vi-comfy-panel"). */
+  panelClassName?: string;
+  /** Optional header content between the tab strip and the actions (e.g. Comfy's endpoint form). */
+  headerExtra?: ReactNode;
+  /** Optional actions between Half/Full and the ✕ (e.g. "Open in new tab"). */
+  headerActions?: ReactNode;
+  /** The tab body. */
+  body: ReactNode;
+  /**
+   * Stay in the DOM (just `hidden`) while another tab is selected — TRUE for
+   * iframe bodies so they don't reload, FALSE for a body whose mount starts
+   * work (a poll). See this file's mounting-policy note; every tab must make
+   * this choice deliberately, so it is not optional.
+   */
+  keepMounted: boolean;
+}
+export interface DrawerShellProps<T extends string> {
+  /** Open/size/tab state — from useDrawerState, owned by the caller. */
+  state: DrawerState<T>;
+  /** The tabs, in strip order. The first is the fallback for an unknown id. */
+  tabs: readonly DrawerTab<T>[];
+  /** aria-label for the tab strip itself. */
+  tablistLabel: string;
+}
+/**
+ * The toolbar deep-links + the (portaled) drawer window with its tab strip.
+ *
+ * WHY THREE TOOLBAR BUTTONS SURVIVED the collapse to one window: the row's idiom
+ * is one button per named destination (Console, ComfyUI, Active, Share — Share is
+ * a separate modal and keeps its own). Collapsing to a single "▤ Panels" button
+ * would trade a named one-click destination for an unnamed click-then-pick, and
+ * would leave Share as the odd one out in a row of one generic button. So each
+ * button stays a DEEP LINK: it opens the one window already showing that tab.
+ * They cost nothing extra now — they share one open/size state.
+ */
+export function DrawerShell<T extends string>({
+  state,
+  tabs,
+  tablistLabel,
+}: DrawerShellProps<T>) {
+  const { open, size, tab, openTab, selectTab, close, toggleSize } = state;
+  const active = tabs.find((t) => t.id === tab) ?? tabs[0];
+  const closeText = `Close ${active.label}`;
+  return (
+    <>
+      {tabs.map((t) => (
+        <button
+          key={t.id}
+          type="button"
+          className={`${t.toggleClassName} vi-btn vi-btn-sm`}
+          // Accurate disclosure state: this tab's panel is only showing when the
+          // drawer is open AND it is the selected one.
+          aria-expanded={open && tab === t.id}
+          onClick={() => openTab(t.id)}
+          title={t.hint}
+        >
+          {t.toggleLabel}
+        </button>
+      ))}
+      {/* Portaled to document.body — see the header note. */}
+      {open &&
+        createPortal(
+          <>
+            <button
+              type="button"
+              className="vi-console-scrim"
+              aria-label={closeText}
+              onClick={close}
+            />
+            <div
+              className={`vi-console-panel vi-console-panel-${size}${
+                active.panelClassName ? ` ${active.panelClassName}` : ""
+              }`}
+              role="dialog"
+              aria-modal="true"
+              aria-label={active.ariaLabel}
+            >
+              <div className="vi-console-panel-bar">
+                {/* The strip replaces the old single title — the selected tab IS
+                    the title, and it reuses the segmented `.vi-gen-mode` control
+                    the sidebar's own tab strip uses, so the two read alike. */}
+                <div
+                  className="vi-gen-mode vi-drawer-tabs"
+                  role="tablist"
+                  aria-label={tablistLabel}
+                >
+                  {tabs.map((t) => (
+                    <button
+                      key={t.id}
+                      type="button"
+                      role="tab"
+                      id={`vi-drawer-tab-${t.id}`}
+                      aria-selected={t.id === tab}
+                      // Only claim to control a panel that is actually in the
+                      // DOM — a non-keepMounted tab has no element to point at
+                      // while it is unselected, and a dangling aria-controls is
+                      // worse than none.
+                      {...(t.keepMounted || t.id === tab
+                        ? { "aria-controls": `vi-drawer-panel-${t.id}` }
+                        : {})}
+                      className={`vi-gen-mode-btn${
+                        t.id === tab ? " vi-gen-mode-btn-active" : ""
+                      }`}
+                      onClick={() => selectTab(t.id)}
+                      title={t.hint}
+                    >
+                      {t.label}
+                    </button>
+                  ))}
+                </div>
+                {active.headerExtra}
+                <div className="vi-console-panel-actions">
+                  <button
+                    type="button"
+                    className="vi-btn vi-btn-sm"
+                    onClick={toggleSize}
+                    title={
+                      size === "full"
+                        ? "Shrink to half the screen"
+                        : "Expand to fill the screen"
+                    }
+                  >
+                    {size === "full" ? "Half" : "Full"}
+                  </button>
+                  {active.headerActions}
+                  <button
+                    type="button"
+                    className="vi-btn vi-btn-sm"
+                    onClick={close}
+                    aria-label={closeText}
+                    title="Close (Esc)"
+                  >
+                    ✕
+                  </button>
+                </div>
+              </div>
+              {/* Bodies. An unselected keepMounted tab stays in the DOM behind
+                  `hidden` (iframes survive); an unselected non-keepMounted tab is
+                  removed outright (its poll stops). See the mounting-policy note. */}
+              {tabs.map((t) => {
+                const selected = t.id === tab;
+                if (!selected && !t.keepMounted) return null;
+                return (
+                  <div
+                    key={t.id}
+                    id={`vi-drawer-panel-${t.id}`}
+                    role="tabpanel"
+                    aria-labelledby={`vi-drawer-tab-${t.id}`}
+                    className="vi-drawer-tabpanel"
+                    hidden={!selected}
+                  >
+                    {t.body}
+                  </div>
+                );
+              })}
+            </div>
+          </>,
+          document.body,
+        )}
+    </>
+  );
+}