@hugpy/video-intelligence-ui 0.1.0

package/src/stations/CondensedKnobStrip.tsx

@@ -0,0 +1,245 @@
+// CONDENSED KNOB STRIP + CARRY TICKS — extracted from GenerateStation.tsx (task
+// k88) so the Scene/Clip prompt-card migration (k89) can consume the same strip
+// without importing the whole station. Everything below moved VERBATIM (values,
+// flags, ticks, layout); GenerateStation imports it back unchanged.
+import type { ReactNode } from "react";
+import { KnobInfo } from "./KnobInfo";
+import type { CarrySettingKey, CarryTicks } from "../video/contract";
+
+// Parse a text field into a number, or null when blank/invalid (mirrors the
+// Frames station's helper — no silent coercion of garbage to 0). Exported so
+// GenerateStation (its original home) keeps its single source.
+export function toNumberOrNull(raw: string): number | null {
+  const s = raw.trim();
+  if (s === "") return null;
+  const n = Number(s);
+  return Number.isFinite(n) ? n : null;
+}
+
+/** The five numeric knobs the condensed strip edits, as the live text they are. */
+export interface KnobValues {
+  width: string;
+  height: string;
+  steps: string;
+  guidance: string;
+  seed: string;
+}
+
+/**
+ * The strip's validation flags, derived from the raw text — the SAME rules the
+ * station's Run gate uses (widthValid/heightValid/stepsValid/guidanceValid/
+ * seedValid + the multiple-of-8 warning), restated here so the component is
+ * self-contained and every host (base composer, every tester row) flags identically.
+ * Returned as a list so the strip itself stays ONE line and the flags stack under it.
+ */
+function knobFlags(v: KnobValues): string[] {
+  const out: string[] = [];
+  const w = toNumberOrNull(v.width);
+  const h = toNumberOrNull(v.height);
+  const st = toNumberOrNull(v.steps);
+  const g = toNumberOrNull(v.guidance);
+  const sd = toNumberOrNull(v.seed);
+  const wOk = w != null && Number.isInteger(w) && w > 0;
+  const hOk = h != null && Number.isInteger(h) && h > 0;
+  if (!wOk) out.push("width: enter a positive integer.");
+  else if (w % 8 !== 0) out.push("width: not a multiple of 8 — the model may round it.");
+  if (!hOk) out.push("height: enter a positive integer.");
+  else if (h % 8 !== 0) out.push("height: not a multiple of 8 — the model may round it.");
+  if (!(st != null && Number.isInteger(st) && st > 0))
+    out.push("steps: enter a positive integer.");
+  if (!(g != null && g >= 0)) out.push("guidance: enter a number ≥ 0.");
+  if (!(v.seed.trim() === "" || (sd != null && Number.isInteger(sd) && sd >= 0)))
+    out.push("seed: enter a non-negative integer or leave blank.");
+  return out;
+}
+
+/**
+ * ONE carry tick — the small checkbox that rides in front of a setting's label
+ * (operator ask 2026-08-04, k63). Checked = this setting is carried into the
+ * component created from this one; unchecked = that component gets the mode
+ * default instead. Deliberately label-less and title-only: the strip is condensed,
+ * and a word of copy per tick would undo the condensing.
+ */
+export function CarryTick({
+  id,
+  setting,
+  checked,
+  onChange,
+}: {
+  id: string;
+  setting: string;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <input
+      id={id}
+      type="checkbox"
+      className="vi-carry-tick"
+      checked={checked}
+      onChange={(e) => onChange(e.target.checked)}
+      aria-label={`Carry ${setting} into the next component`}
+      title={`Carry ${setting} into the component created from this one. Unticked = that component gets the default instead.`}
+    />
+  );
+}
+
+/**
+ * CONDENSED KNOB STRIP (operator ask 2026-08-04, k63) — the generation knobs as
+ * ONE inline line rather than a column of full-width blocks:
+ *
+ *     [model ▾]  ☑ size [512] × [512]  ☑ steps [4]  ☑ guidance [0]  ☑ seed [random]
+ *
+ * WHY a component and not just JSX: the tester rows must look and behave EXACTLY
+ * like the base composer's settings, because the whole point of a row is "the same
+ * generation with one thing changed". Two hand-written copies of the same seven
+ * inputs is how they drift. Both hosts render this; there is one visual language.
+ *
+ * Deliberately presentational: it owns no state. Values come in, `onPatch` goes
+ * out (the base host maps it onto the station setters, a tester row onto
+ * patchTestRow), and the carry ticks are the host's state too. `lead`/`trail` are
+ * the host-specific extremities — the model select cluster (which differs: the base
+ * carries a refresh button + capability line, a row does not) and the row's inline
+ * negative field.
+ */
+export function CondensedKnobStrip({
+  idPrefix,
+  values,
+  onPatch,
+  carry,
+  onCarry,
+  lead,
+  trail,
+  footer,
+}: {
+  /** DOM id namespace — must be unique per instance (ids collide across rows otherwise). */
+  idPrefix: string;
+  values: KnobValues;
+  onPatch: (patch: Partial<KnobValues>) => void;
+  /** Omit to render the strip without carry ticks (nothing is seeded from it). */
+  carry?: CarryTicks;
+  onCarry?: (key: CarrySettingKey, value: boolean) => void;
+  lead?: ReactNode;
+  trail?: ReactNode;
+  footer?: ReactNode;
+}) {
+  const flags = knobFlags(values);
+  const tick = (key: CarrySettingKey, setting: string) =>
+    carry ? (
+      <CarryTick
+        id={`${idPrefix}-carry-${key}`}
+        setting={setting}
+        checked={carry[key]}
+        onChange={(v) => onCarry?.(key, v)}
+      />
+    ) : null;
+
+  return (
+    <div className="vi-knob-strip">
+      <div className="vi-knob-strip-line">
+        {lead}
+
+        {/* width × height read as ONE setting ("size"), so they pair behind one
+            tick and one ⓘ — a literal × between two mini inputs. */}
+        <span className="vi-knob-mini-group">
+          {tick("size", "size")}
+          <label className="vi-knob-mini-label" htmlFor={`${idPrefix}-width`}>
+            size
+          </label>
+          <input
+            id={`${idPrefix}-width`}
+            type="text"
+            inputMode="numeric"
+            className="vi-knob-input vi-knob-mini"
+            aria-label="width"
+            value={values.width}
+            onChange={(e) => onPatch({ width: e.target.value })}
+          />
+          <span className="vi-knob-mini-x" aria-hidden>
+            ×
+          </span>
+          <input
+            id={`${idPrefix}-height`}
+            type="text"
+            inputMode="numeric"
+            className="vi-knob-input vi-knob-mini"
+            aria-label="height"
+            value={values.height}
+            onChange={(e) => onPatch({ height: e.target.value })}
+          />
+          <KnobInfo
+            label="size"
+            text="Output width × height in pixels. Multiples of 8 avoid the model silently rounding them."
+          />
+        </span>
+
+        <span className="vi-knob-mini-group">
+          {tick("steps", "steps")}
+          <label className="vi-knob-mini-label" htmlFor={`${idPrefix}-steps`}>
+            steps
+          </label>
+          <input
+            id={`${idPrefix}-steps`}
+            type="text"
+            inputMode="numeric"
+            className="vi-knob-input vi-knob-mini"
+            value={values.steps}
+            onChange={(e) => onPatch({ steps: e.target.value })}
+          />
+          <KnobInfo label="steps" text="Denoising steps. sd-turbo runs well at ~4." />
+        </span>
+
+        <span className="vi-knob-mini-group">
+          {tick("guidance", "guidance")}
+          <label className="vi-knob-mini-label" htmlFor={`${idPrefix}-guidance`}>
+            guidance
+          </label>
+          <input
+            id={`${idPrefix}-guidance`}
+            type="text"
+            inputMode="decimal"
+            className="vi-knob-input vi-knob-mini"
+            value={values.guidance}
+            onChange={(e) => onPatch({ guidance: e.target.value })}
+          />
+          <KnobInfo
+            label="guidance"
+            text="CFG scale. sd-turbo uses 0 (guidance-free)."
+          />
+        </span>
+
+        <span className="vi-knob-mini-group">
+          {tick("seed", "seed")}
+          <label className="vi-knob-mini-label" htmlFor={`${idPrefix}-seed`}>
+            seed
+          </label>
+          <input
+            id={`${idPrefix}-seed`}
+            type="text"
+            inputMode="numeric"
+            className="vi-knob-input vi-knob-mini vi-knob-mini-seed"
+            placeholder="random"
+            value={values.seed}
+            onChange={(e) => onPatch({ seed: e.target.value })}
+          />
+          <KnobInfo label="seed" text="Optional. Blank = random each run." />
+        </span>
+
+        {trail}
+      </div>
+
+      {/* Flags stack BELOW the line so a warning never breaks the strip's single
+          row. Same rules, same amber .vi-knob-flag as the rail knobs had. */}
+      {flags.length > 0 && (
+        <div className="vi-knob-strip-flags">
+          {flags.map((f) => (
+            <span className="vi-knob-flag" key={f}>
+              {f}
+            </span>
+          ))}
+        </div>
+      )}
+      {footer}
+    </div>
+  );
+}

package/src/stations/ConsolePanel.tsx

@@ -0,0 +1,82 @@
+// ConsolePanel — the hugpy console (dev/ui's `/console`) embedded in the shared
+// expand-into-the-screen drawer, so the operator never has to keep a second
+// browser tab open just to watch it. Reachable from every station (the drawer is
+// mounted once by WorkbenchSidebar, the shared sidebar), without duplicating the
+// affordance per-station.
+//
+// Since 2026-08-06 this file no longer renders a drawer of its own: it
+// contributes ONE TAB to the single unified drawer (drawerShell.tsx →
+// WorkbenchDrawer.tsx), alongside ComfyUI and Active. The shell owns the window
+// (portal-to-<body>, half/full sizing, Esc-to-close, persisted open/size/tab);
+// this file owns only the console-specific part, i.e. the iframe below and its
+// security posture.
+//
+// ── SAME-ORIGIN, NOT SANDBOXED (read before touching the iframe) ────────────
+// The console SPA (dev/ui App.jsx) is a SIBLING route of THIS one, served from
+// the SAME origin on dev.hugpy.ai (and on a local `hugpy serve`, per the
+// product's self-hosted-first posture) — never a foreign site. Reusing
+// nav/Navbar's own `siteBase`/`onHugpyOrigin` rule (the SAME computation the
+// Navbar's plain `<a href="/console">` link already uses) means the href is
+// "/console" (origin-relative → guaranteed same-origin) on every real hugpy
+// deployment; it only falls through to the full `siteUrl` off a hugpy hostname
+// (e.g. a bare local Vite preview), exactly like the Navbar link already does.
+// Same-origin means the browser sends the operator's existing console session
+// cookie — logged in outside, logged in inside the panel; logged out outside,
+// the panel shows the console's own front door/login, same as opening the tab
+// would. No new auth surface, nothing to weaken.
+//
+// Deliberately UNSANDBOXED: the console (ApiAccess "Revoke key", ModelTable
+// "Delete"/"Prune", …) relies on window.confirm()/alert() for destructive
+// actions and navigator.clipboard for copy buttons. A sandboxed iframe without
+// `allow-modals` silently swallows confirm()/alert() (the dialog never shows;
+// confirm() just returns false) — Delete/Revoke would look broken. Since this
+// is first-party same-origin content (not a foreign/untrusted embed like
+// ComfyStation's user-supplied URL), there is no isolation benefit to
+// sandboxing it, only breakage — so `sandbox` is omitted entirely. Sharing a
+// window with the SANDBOXED ComfyUI tab changes nothing here: they are separate
+// <iframe> elements with independent sandbox attributes, never one reused frame.
+//
+// ── FRAME-ANCESTORS (pre-checked, see task notes) ────────────────────────────
+// Neither the Flask app (abstract_hugpy_dev/flask_app) nor the dev.hugpy.ai
+// nginx vhost sends X-Frame-Options or a frame-ancestors CSP, so the browser
+// does not block this frame. Re-verify after any nginx/Flask header change.
+import { siteBase } from "../nav/Navbar";
+import type { DrawerTab } from "./drawerShell";
+
+// Same origin-relative rule the Navbar's own Console link uses.
+const consoleHref = `${siteBase}/console`;
+
+/** The console's tab in the unified drawer. */
+export function consoleDrawerTab(): DrawerTab<"console"> {
+  return {
+    id: "console",
+    label: "Console",
+    hint: "Open the hugpy console alongside this station — no tab switch",
+    toggleClassName: "vi-console-toggle",
+    toggleLabel: "▤ Console",
+    ariaLabel: "hugpy console",
+    // Stays in the DOM while another tab shows: an iframe that is merely
+    // `display:none` keeps its document, its session and its scroll position, so
+    // switching to Active and back does not throw the operator out to a reload.
+    keepMounted: true,
+    headerActions: (
+      <a
+        className="vi-btn vi-btn-sm vi-btn-ghost"
+        href={consoleHref}
+        target="_blank"
+        rel="noreferrer"
+        title="Open the console in its own tab"
+      >
+        Open in new tab ↗
+      </a>
+    ),
+    body: (
+      <iframe
+        className="vi-console-iframe"
+        src={consoleHref}
+        title="hugpy console"
+        allow="clipboard-read; clipboard-write; fullscreen"
+      />
+    ),
+  };
+}

package/src/stations/FrameExtractStation.tsx

@@ -0,0 +1,148 @@
+// Frames & Models station (Phase 4) — the sample image's left rail + frame grid.
+// Flow:
+//   video file → POST /uploads (multipart) → {path}
+//              → POST /video/ingest {path} → MediaRef (guard kind==="video")
+//              → FrameExtractCore: knob rail + frame_extract job + frame grid + pick
+// Every hop goes through request<T>() + config URLs; errors surface via
+// describeAppError.
+//
+// Studio slice 2a: the Options knob rail + useFrameJobs + frame grid + frame-pick
+// were extracted VERBATIM into stations/ops/FrameExtractCore. Because the Frames
+// station has an Options panel (whose knob state is shared with the working view),
+// the Core owns the whole SectionTabs and takes this station's add-file bar node +
+// `busy` flag as props. This station now owns only the upload/ingest lifecycle.
+// Behaviour is unchanged.
+import { useState } from "react";
+import type { StationSpec } from "./types";
+import { AddFileBar } from "./AddFileBar";
+import { FrameExtractCore } from "./ops/FrameExtractCore";
+import { request, okValue, errorOf, describeAppError } from "../transport/client";
+import { hugpyConfig } from "../config";
+import { getSessionId } from "../session";
+import {
+  mediaRefSchema,
+  uploadResultSchema,
+  type MediaRef,
+} from "../video/contract";
+
+type Phase = "idle" | "uploading" | "ingesting" | "ready";
+
+const PHASE_LABEL: Record<Phase, string> = {
+  idle: "",
+  uploading: "Uploading…",
+  ingesting: "Ingesting…",
+  ready: "",
+};
+
+export function FrameExtractStation({ spec }: { spec: StationSpec }) {
+  const [source, setSource] = useState<MediaRef | null>(null);
+  const [fileName, setFileName] = useState<string | null>(null);
+  const [phase, setPhase] = useState<Phase>("idle");
+  const [error, setError] = useState<string | null>(null);
+
+  const busy = phase === "uploading" || phase === "ingesting";
+
+  async function onPick(file: File) {
+    setError(null);
+    setFileName(file.name);
+    setSource(null);
+    setPhase("uploading");
+
+    // (a) multipart upload — field `file` + field `sid`. No Content-Type header:
+    // the browser sets the multipart boundary itself.
+    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: "frames", operation: "upload" },
+    });
+    if (!up.ok) {
+      setError(describeAppError(errorOf(up)));
+      setPhase("idle");
+      return;
+    }
+    const upParsed = uploadResultSchema.safeParse(okValue(up));
+    if (!upParsed.success) {
+      setError("Malformed upload response.");
+      setPhase("idle");
+      return;
+    }
+
+    // (b) ingest the server path into a typed MediaRef.
+    setPhase("ingesting");
+    const ing = await request<unknown>(hugpyConfig.videoIngestUrl, {
+      method: "POST",
+      body: JSON.stringify({ path: upParsed.data.path }),
+      headers: { "Content-Type": "application/json" },
+      meta: { specKey: "frames", operation: "ingest" },
+    });
+    if (!ing.ok) {
+      setError(describeAppError(errorOf(ing)));
+      setPhase("idle");
+      return;
+    }
+    const media = mediaRefSchema.safeParse(okValue(ing));
+    if (!media.success) {
+      setError("Malformed ingest response.");
+      setPhase("idle");
+      return;
+    }
+    if (media.data.kind !== "video") {
+      setError(
+        `Ingested asset is "${media.data.kind}", not a video — use the Image Crop or Audio station for that.`,
+      );
+      setPhase("idle");
+      return;
+    }
+    setSource(media.data);
+    setPhase("ready");
+  }
+
+  // Clear the loaded source back to the empty state. FrameExtractCore resets the job
+  // + selection when the source reference changes (here → null).
+  function clearSource() {
+    setSource(null);
+    setFileName(null);
+    setError(null);
+  }
+
+  return (
+    <section className="station-card station-wide">
+      <FrameExtractCore
+        source={source}
+        busy={busy}
+        addFile={
+          <>
+            <AddFileBar
+              accept="video/*"
+              onFile={onPick}
+              busy={busy}
+              buttonLabel={source ? "Choose another video" : "Choose video"}
+              onClear={source && !busy ? clearSource : undefined}
+            >
+              {busy && <span className="vi-crop-status">{PHASE_LABEL[phase]}</span>}
+              {!busy && source && (
+                <>
+                  {fileName && (
+                    <span className="vi-addbar-name" title={fileName}>
+                      {fileName}
+                    </span>
+                  )}
+                  <span className="vi-crop-meta">
+                    <code>{source.mime}</code>
+                    {source.width && source.height ? ` · ${source.width}×${source.height}` : ""}
+                    {source.duration_s != null ? ` · ${source.duration_s}s` : ""}
+                    {source.fps_native != null ? ` · ${source.fps_native} fps native` : ""}
+                  </span>
+                </>
+              )}
+            </AddFileBar>
+            {error && <p className="vi-error" role="alert">{error}</p>}
+          </>
+        }
+      />
+    </section>
+  );
+}