@hugpy/video-intelligence-ui 0.1.0

package/src/stations/studio/movieTimeline.ts

@@ -0,0 +1,198 @@
+// Studio-movie TIMELINE MATH (slice B3) — the pure, JSX-free half of the spliced
+// row. Given the terminal movie manifest's `segments` + `joints` (the honest
+// non-destructive NLE ledger the runner writes; see studio_movie.py
+// `_assemble_movie` / `_write_movie_json`), derive the strip the row draws:
+//   • each block's EFFECTIVE frames in the assembly — a PARENT trimmed at its
+//     child's splice contributes `trim_frames = branch_frame + 1`; the final
+//     (leaf) segment plays its FULL `frames`. This mirrors the runner's
+//     `contributions` list EXACTLY, so a block's width == its real share of the
+//     stitched movie.mp4 (never the whole untrimmed clip).
+//   • the splice markers that sit BETWEEN blocks — one per joint, labelled with
+//     the frame N of the parent the child diverged at.
+//
+// Kept pure + presentation-free so the width/joint math is inspectable on its own
+// (the row component only lays these numbers out). Structural param types
+// (`RowSegment`/`RowJoint`) are subsets of the composer's zod-parsed manifest
+// shapes, so the composer passes its `ManifestSegment[]` / joints straight in.
+
+/** A subset of the movie manifest's per-segment node the row reads (see
+ *  StudioMovieComposer's `manifestSegmentSchema`). */
+export interface RowSegment {
+  index: number;
+  segment_id?: string | null;
+  prompt?: string | null;
+  capability?: string | null;
+  branch_frame?: number | null;
+  resolved_branch?: number | null;
+  frames?: number | null;
+  width?: number | null;
+  height?: number | null;
+  duration_s?: number | null;
+  resumed?: boolean | null;
+  status?: string | null;
+}
+
+/** A subset of the manifest's per-joint trim record (see `manifestJointSchema`). */
+export interface RowJoint {
+  parent_segment_id?: string | null;
+  child_segment_id?: string | null;
+  branch_frame?: number | null;
+  trim_frames?: number | null;
+  /** Splice mode the runner recorded: "still" | "vace_extend" | "cut". A "cut" carries no
+   *  frame (branch_frame null, trim_frames == the parent's full length). */
+  mode?: string | null;
+}
+
+/** One laid-out block of the spliced row. */
+export interface RowBlock {
+  index: number;
+  segmentId: string | null;
+  /** Frames this segment contributes to the assembled movie (trimmed or full). */
+  effectiveFrames: number;
+  /** The clip's real (untrimmed) frame count — the scrubber's slider bound. */
+  fullFrames: number | null;
+  /** Share of the assembled row, 0..100 (sums to ~100 across blocks). */
+  widthPct: number;
+  /** True when this parent is trimmed at a child's splice (a real cut happened). */
+  trimmed: boolean;
+  prompt: string | null;
+  capability: string | null;
+  status: string | null;
+  resumed: boolean;
+}
+
+/** A splice marker sitting AFTER `afterIndex` (between two blocks). */
+export interface RowSplice {
+  afterIndex: number;
+  childIndex: number;
+  /** Frame N of the parent the child was conditioned on. null for a "cut" (no frame carry). */
+  branchFrame: number | null;
+  /** Frames of the parent kept in the assembly = branchFrame + 1 (the parent's FULL length
+   *  for a "cut", which trims nothing). */
+  trimFrames: number | null;
+  /** Splice mode: "still" | "vace_extend" | "cut" — drives the notch label + tooltip. */
+  mode: string;
+}
+
+export interface DerivedRow {
+  blocks: RowBlock[];
+  splices: RowSplice[];
+  totalEffectiveFrames: number;
+}
+
+function num(v: number | null | undefined): number | null {
+  return typeof v === "number" && Number.isFinite(v) ? v : null;
+}
+
+/**
+ * Derive the spliced-row layout from the manifest's segments + joints.
+ *
+ * Effective frames per block (mirrors runners/studio_movie.py `_assemble_movie`):
+ *   • a segment that is a JOINT PARENT keeps `trim_frames` (= branch_frame + 1);
+ *   • the leaf/last segment keeps its FULL `frames`.
+ * Widths are proportional to those effective counts. When no honest frame count
+ * is available (e.g. a manifest without `frames`), blocks fall back to EQUAL
+ * widths so the row still reads as a strip rather than collapsing.
+ */
+export function deriveRow(segments: RowSegment[], joints: RowJoint[]): DerivedRow {
+  const segs = [...segments].sort((a, b) => a.index - b.index);
+
+  // Trim lookup keyed by the joint's PARENT segment id (linear chain: one child
+  // per parent). Also index each joint's child position for splice placement.
+  const jointByParent = new Map<string, RowJoint>();
+  for (const j of joints) {
+    if (typeof j.parent_segment_id === "string") jointByParent.set(j.parent_segment_id, j);
+  }
+  const indexById = new Map<string, number>();
+  segs.forEach((s, i) => {
+    if (typeof s.segment_id === "string") indexById.set(s.segment_id, i);
+  });
+
+  const raw: number[] = segs.map((s) => {
+    const joint = typeof s.segment_id === "string" ? jointByParent.get(s.segment_id) : undefined;
+    const trim = num(joint?.trim_frames);
+    if (trim != null && trim > 0) return trim;
+    const full = num(s.frames);
+    return full != null && full > 0 ? full : 0;
+  });
+
+  let total = raw.reduce((a, b) => a + b, 0);
+  // Fallback: no honest counts anywhere → equal widths (still a legible strip).
+  const equal = total <= 0;
+  if (equal) total = segs.length || 1;
+
+  const blocks: RowBlock[] = segs.map((s, i) => {
+    const eff = equal ? 1 : raw[i];
+    const joint = typeof s.segment_id === "string" ? jointByParent.get(s.segment_id) : undefined;
+    return {
+      index: s.index,
+      segmentId: typeof s.segment_id === "string" ? s.segment_id : null,
+      effectiveFrames: eff,
+      fullFrames: num(s.frames),
+      widthPct: (eff / total) * 100,
+      // A "cut" parent plays in FULL (trim_frames == full) — it is NOT trimmed, so the
+      // block shows no ✂ trim badge (the CUT is drawn as the splice notch below instead).
+      trimmed: !!joint && joint.mode !== "cut" && num(joint.trim_frames) != null,
+      prompt: typeof s.prompt === "string" ? s.prompt : null,
+      capability: typeof s.capability === "string" ? s.capability : null,
+      status: typeof s.status === "string" ? s.status : null,
+      resumed: s.resumed === true,
+    };
+  });
+
+  const splices: RowSplice[] = [];
+  for (const j of joints) {
+    const parentId = j.parent_segment_id;
+    const childId = j.child_segment_id;
+    if (typeof parentId !== "string" || typeof childId !== "string") continue;
+    const afterIndex = indexById.get(parentId);
+    const childIndex = indexById.get(childId);
+    if (afterIndex == null || childIndex == null) continue;
+    const mode = typeof j.mode === "string" ? j.mode : "still";
+    const branchFrame = num(j.branch_frame);
+    const trimFrames = num(j.trim_frames);
+    // A "cut" carries NO frame (branch_frame null) but STILL draws a notch — a hard scene
+    // cut. Every other splice needs a real branch frame (a null is a malformed record).
+    if (mode === "cut") {
+      splices.push({ afterIndex, childIndex, branchFrame: null, trimFrames, mode: "cut" });
+      continue;
+    }
+    if (branchFrame == null) continue;
+    splices.push({
+      afterIndex,
+      childIndex,
+      branchFrame,
+      trimFrames: trimFrames ?? branchFrame + 1,
+      mode,
+    });
+  }
+  splices.sort((a, b) => a.afterIndex - b.afterIndex);
+
+  return { blocks, splices, totalEffectiveFrames: total };
+}
+
+/** Movie fps: the manifest value when present, else the composer's knob fallback. */
+export function resolveFps(movieFps: number | null | undefined, fallback: number): number {
+  const f = num(movieFps ?? null);
+  return f != null && f > 0 ? f : fallback;
+}
+
+/** Clamp a frame index into a clip's [0, frames-1] range. */
+export function clampFrame(frame: number, frames: number | null | undefined): number {
+  const max = num(frames ?? null);
+  const hi = max != null && max > 0 ? max - 1 : 0;
+  if (!Number.isFinite(frame)) return 0;
+  return Math.max(0, Math.min(hi, Math.round(frame)));
+}
+
+/** Seconds a frame index lands at, for seeking a <video> (frame / fps). */
+export function frameToTime(frame: number, fps: number): number {
+  const f = fps > 0 ? fps : 1;
+  return frame / f;
+}
+
+/** Nearest frame index for a <video>'s currentTime (round to the grid). */
+export function timeToFrame(time: number, fps: number): number {
+  const f = fps > 0 ? fps : 1;
+  return Math.round(time * f);
+}

package/src/stations/studio/promptCard.tsx

@@ -0,0 +1,498 @@
+// SHARED PROMPT-CARD SYSTEM (task k88 — Studio declutter, part 1 of 2).
+//
+// ONE uniform structure for every Studio prompt list (Cinema + Movie now; Scene
+// parts + Clip in the follow-up task k89):
+//
+//   toolbar:  [# count][select all][✨ Generate prompts][✨ Generate negatives][standard negatives]
+//   row card: [badge #N]                                   [↑][↓][Split][✕]
+//             [Prompt][Negative] tabs over ONE editor pane + [standard negative] tick
+//             <GoalComposer pane for the active tab>
+//             …host body (Prompt Assist row, attach rows)…
+//             [settings ▸] expander hosting the row's tab-specific knobs
+//
+// Everything here is PRESENTATIONAL in the GoalComposer/PromptAssistButtons sense:
+// no component owns editor state — values come in and callbacks go out, so each
+// tab keeps its own immutable map/filter state model. The ONLY internal state is
+// ephemeral VIEW state (which tab is showing, whether the settings expander is
+// open — the latter via a native <details>), which is never data the host reads.
+//
+// Glyph ruling (one set everywhere): ↑ ↓ ✕ + a text "Split" — the Scene/Movie
+// set. Cinema's ▲▼ are retired by its migration onto PromptCard.
+import { useState, type ReactNode } from "react";
+import { GoalComposer } from "../GoalComposer";
+
+/**
+ * The STANDARD negative set — the text GenerateStation's negative field opens
+ * pre-filled with (operator 2026-07-13: distilled/painterly checkpoints reproduce
+ * whole "framed gallery painting" objects from their training prior; suppressing
+ * the frame + the usual junk by default makes the happy path a clean image).
+ * MOVED here from GenerateStation's module-private DEFAULT_NEGATIVE so the
+ * per-row [standard negative] checkbox and the station prefill read the same
+ * source; GenerateStation imports it back (no behavior change there).
+ */
+export const STANDARD_NEGATIVE =
+  "frame, picture frame, ornate frame, border, framed painting, gallery wall, watermark, signature, text";
+
+/**
+ * The effective negative for one row: the user's own negative, with the standard
+ * set APPENDED (comma-joined, whitespace-normalized, term-deduped) when the row's
+ * [standard negative] checkbox is on. Called ONLY at the point a request payload
+ * is built — the wire schemas are untouched; composition is a client-side fold.
+ */
+export function composeNegative(negative: string, stdNegative: boolean): string {
+  const user = negative.trim();
+  if (!stdNegative) return user;
+  const seen = new Set<string>();
+  const terms: string[] = [];
+  for (const raw of `${user},${STANDARD_NEGATIVE}`.split(",")) {
+    const term = raw.trim().replace(/\s+/g, " ");
+    if (term === "") continue;
+    const dedupeKey = term.toLowerCase();
+    if (seen.has(dedupeKey)) continue;
+    seen.add(dedupeKey);
+    terms.push(term);
+  }
+  return terms.join(", ");
+}
+
+// ── PromptListToolbar ───────────────────────────────────────────────────────
+
+/** The optional "how many rows" count input at the toolbar's left edge. */
+export interface PromptListToolbarCount {
+  id: string;
+  /** Knob label — "Segments" / "Goals". */
+  label: string;
+  value: number;
+  min?: number;
+  max: number;
+  onChange: (n: number) => void;
+  title?: string;
+}
+
+export interface PromptListToolbarProps {
+  /** Omit to render the toolbar without the count knob. */
+  count?: PromptListToolbarCount;
+  /** "segment" / "goal" — used in aria labels only. */
+  noun: string;
+  selectedCount: number;
+  itemCount: number;
+  allSelected: boolean;
+  onToggleSelectAll: () => void;
+  /** Full button text, busy/progress label included — the host owns the wording. */
+  generateLabel: string;
+  generateTitle?: string;
+  onGenerate: () => void;
+  generateDisabledTitle?: string;
+  negativesLabel: string;
+  negativesTitle?: string;
+  onNegatives: () => void;
+  /** True while ANY assist call is in flight — disables both group actions. */
+  assistBusy?: boolean;
+  /**
+   * Tick the [standard negative] checkbox ON for the selected rows (or every
+   * row when nothing is selected) — the host implements that rule.
+   */
+  onStandardNegatives: () => void;
+  standardNegativesTitle?: string;
+  disabled?: boolean;
+}
+
+export function PromptListToolbar({
+  count,
+  noun,
+  selectedCount,
+  itemCount,
+  allSelected,
+  onToggleSelectAll,
+  generateLabel,
+  generateTitle,
+  onGenerate,
+  generateDisabledTitle,
+  negativesLabel,
+  negativesTitle,
+  onNegatives,
+  assistBusy = false,
+  onStandardNegatives,
+  standardNegativesTitle,
+  disabled = false,
+}: PromptListToolbarProps) {
+  const actionsDisabled = disabled || assistBusy || selectedCount === 0;
+  return (
+    <div
+      className="vi-prompt-toolbar"
+      role="group"
+      aria-label={`${noun} count and group prompt assist`}
+    >
+      {count && (
+        <div className="vi-knob vi-prompt-toolbar-count">
+          <label htmlFor={count.id}>{count.label}</label>
+          <input
+            id={count.id}
+            className="vi-knob-input"
+            type="number"
+            min={count.min ?? 1}
+            max={count.max}
+            value={count.value}
+            disabled={disabled}
+            title={count.title}
+            onChange={(e) => count.onChange(Number(e.target.value))}
+          />
+        </div>
+      )}
+      <label className="vi-comfy-hint vi-prompt-toolbar-selectall">
+        <input
+          type="checkbox"
+          checked={allSelected}
+          disabled={disabled || itemCount === 0}
+          onChange={onToggleSelectAll}
+          aria-label={`Select every ${noun}`}
+        />
+        Select all ({selectedCount}/{itemCount})
+      </label>
+      <button
+        type="button"
+        className="vi-btn vi-btn-sm vi-btn-accent"
+        disabled={actionsDisabled}
+        title={selectedCount === 0 ? (generateDisabledTitle ?? generateTitle) : generateTitle}
+        onClick={onGenerate}
+      >
+        {generateLabel}
+      </button>
+      <button
+        type="button"
+        className="vi-btn vi-btn-sm vi-btn-ghost"
+        disabled={actionsDisabled}
+        title={negativesTitle}
+        onClick={onNegatives}
+      >
+        {negativesLabel}
+      </button>
+      <button
+        type="button"
+        className="vi-btn vi-btn-sm vi-btn-ghost"
+        disabled={disabled || itemCount === 0}
+        title={
+          standardNegativesTitle ??
+          "Tick the [standard negative] checkbox on for the selected rows (or every row when none are selected)."
+        }
+        onClick={onStandardNegatives}
+      >
+        standard negatives
+      </button>
+    </div>
+  );
+}
+
+// ── PromptCard (the row shell) ──────────────────────────────────────────────
+
+/** The optional leading select-checkbox slot (group-assist selection). */
+export interface PromptCardSelect {
+  checked: boolean;
+  onChange: () => void;
+  disabled?: boolean;
+  title?: string;
+  /** aria-label; defaults to "Select <noun> N". */
+  label?: string;
+}
+
+export interface PromptCardProps {
+  /** React's list key — consumed by React, never forwarded. Declared because this
+      repo type-checks JSX attributes against props with no React types installed. */
+  key?: string;
+  /** Identifier badge text — "segment" / "goal". */
+  badge: string;
+  /** 0-based row position; rendered as "#N+1". */
+  index: number;
+  /** "segment" / "goal" — aria labels + button titles. */
+  noun: string;
+  select?: PromptCardSelect;
+  /** Extra header content between the index and the action cluster (joint descriptor …). */
+  headerHint?: ReactNode;
+  /** Move/Remove render ONLY when their callback is given (k89: Clip's single card
+      passes none, so its action cluster is empty rather than three dead buttons). */
+  canMoveUp?: boolean;
+  canMoveDown?: boolean;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+  moveUpTitle?: string;
+  moveDownTitle?: string;
+  /** Split renders ONLY when this is given (Movie has it, Cinema does not). */
+  onSplit?: () => void;
+  splitTitle?: string;
+  canRemove?: boolean;
+  onRemove?: () => void;
+  removeTitle?: string;
+  disabled?: boolean;
+  children: ReactNode;
+}
+
+export function PromptCard({
+  badge,
+  index,
+  noun,
+  select,
+  headerHint,
+  canMoveUp,
+  canMoveDown,
+  onMoveUp,
+  onMoveDown,
+  moveUpTitle,
+  moveDownTitle,
+  onSplit,
+  splitTitle,
+  canRemove,
+  onRemove,
+  removeTitle,
+  disabled = false,
+  children,
+}: PromptCardProps) {
+  return (
+    <li className="vi-gen-part vi-movie-goal vi-prompt-card">
+      <div className="vi-gen-part-head">
+        {select && (
+          <input
+            type="checkbox"
+            checked={select.checked}
+            disabled={disabled || select.disabled}
+            onChange={select.onChange}
+            aria-label={select.label ?? `Select ${noun} ${index + 1}`}
+            title={select.title}
+          />
+        )}
+        <span className="vi-gen-badge vi-movie-badge">{badge}</span>
+        <span className="vi-gen-part-idx">#{index + 1}</span>
+        {headerHint}
+        {(onMoveUp || onMoveDown || onSplit || onRemove) && (
+        <div className="vi-gen-part-actions">
+          {onMoveUp && (
+          <button
+            type="button"
+            className="vi-btn vi-btn-sm vi-btn-ghost"
+            disabled={disabled || !canMoveUp}
+            onClick={onMoveUp}
+            title={moveUpTitle ?? "Move earlier"}
+            aria-label={`Move ${noun} earlier`}
+          >
+            ↑
+          </button>
+          )}
+          {onMoveDown && (
+          <button
+            type="button"
+            className="vi-btn vi-btn-sm vi-btn-ghost"
+            disabled={disabled || !canMoveDown}
+            onClick={onMoveDown}
+            title={moveDownTitle ?? "Move later"}
+            aria-label={`Move ${noun} later`}
+          >
+            ↓
+          </button>
+          )}
+          {onSplit && (
+            <button
+              type="button"
+              className="vi-btn vi-btn-sm vi-btn-ghost"
+              disabled={disabled}
+              onClick={onSplit}
+              title={splitTitle ?? `Split this ${noun}`}
+              aria-label={`Split ${noun}`}
+            >
+              Split
+            </button>
+          )}
+          {onRemove && (
+          <button
+            type="button"
+            className="vi-btn vi-btn-sm vi-btn-ghost"
+            disabled={disabled || !canRemove}
+            onClick={onRemove}
+            title={removeTitle ?? `Remove ${noun}`}
+            aria-label={`Remove ${noun}`}
+          >
+            ✕
+          </button>
+          )}
+        </div>
+        )}
+      </div>
+      {children}
+    </li>
+  );
+}
+
+// ── PromptFieldTabs ─────────────────────────────────────────────────────────
+
+export interface PromptFieldTabsProps {
+  /** DOM id namespace — the prompt pane is `${idPrefix}-prompt`, the negative `${idPrefix}-negative`. */
+  idPrefix: string;
+  promptLabel: string;
+  prompt: string;
+  onPromptChange: (v: string) => void;
+  promptPlaceholder?: string;
+  /** Blur hook for the prompt pane (Cinema's intent router classifies here). */
+  onPromptBlur?: () => void;
+  negativeLabel?: string;
+  negative: string;
+  onNegativeChange: (v: string) => void;
+  negativePlaceholder?: string;
+  negativeHint?: ReactNode;
+  stdNegative: boolean;
+  onStdNegativeChange: (v: boolean) => void;
+  /**
+   * When set, the Negative tab + the standard-negative tick render DISABLED with
+   * this text as the tooltip (Movie: the wire carries ONE negative — row 0 only).
+   */
+  negativeDisabledNote?: string;
+  rows?: number;
+  disabled?: boolean;
+  /** Rendered under the negative pane when it is active ("✨ Generate negative" row). */
+  negativeExtras?: ReactNode;
+  /** Rendered under the prompt pane when it is active. */
+  promptExtras?: ReactNode;
+}
+
+export function PromptFieldTabs({
+  idPrefix,
+  promptLabel,
+  prompt,
+  onPromptChange,
+  promptPlaceholder,
+  onPromptBlur,
+  negativeLabel = "negative prompt (optional)",
+  negative,
+  onNegativeChange,
+  negativePlaceholder,
+  negativeHint,
+  stdNegative,
+  onStdNegativeChange,
+  negativeDisabledNote,
+  rows = 2,
+  disabled = false,
+  negativeExtras,
+  promptExtras,
+}: PromptFieldTabsProps) {
+  // Ephemeral VIEW state only — which pane shows. All editor data rides props.
+  const [tab, setTab] = useState<"prompt" | "negative">("prompt");
+  const negativeLocked = negativeDisabledNote != null;
+  const active = negativeLocked ? "prompt" : tab;
+  return (
+    <div className="vi-prompt-tabbed">
+      <div className="vi-prompt-tabs" role="tablist" aria-label="Prompt or negative prompt">
+        <button
+          type="button"
+          role="tab"
+          className="vi-prompt-tab"
+          aria-selected={active === "prompt"}
+          onClick={() => setTab("prompt")}
+        >
+          Prompt
+        </button>
+        <button
+          type="button"
+          role="tab"
+          className="vi-prompt-tab"
+          aria-selected={active === "negative"}
+          disabled={negativeLocked}
+          title={negativeDisabledNote}
+          onClick={() => setTab("negative")}
+        >
+          Negative
+          {/* The content marker — tab state must not hide a written negative. */}
+          {negative.trim() !== "" && <span className="vi-prompt-tab-dot" aria-label="has content" />}
+        </button>
+        <label
+          className="vi-comfy-hint vi-prompt-tab-std"
+          title={
+            negativeDisabledNote ??
+            "Append the standard artifact/junk exclusion set to this row's negative when the request is built."
+          }
+        >
+          <input
+            type="checkbox"
+            checked={stdNegative}
+            disabled={disabled || negativeLocked}
+            onChange={(e) => onStdNegativeChange(e.target.checked)}
+          />
+          standard negative
+        </label>
+      </div>
+      {active === "prompt" ? (
+        <>
+          <GoalComposer
+            id={`${idPrefix}-prompt`}
+            label={promptLabel}
+            value={prompt}
+            placeholder={promptPlaceholder}
+            onChange={onPromptChange}
+            onBlur={onPromptBlur}
+            rows={rows}
+            disabled={disabled}
+          />
+          {promptExtras}
+        </>
+      ) : (
+        <>
+          <GoalComposer
+            id={`${idPrefix}-negative`}
+            label={negativeLabel}
+            value={negative}
+            placeholder={negativePlaceholder}
+            onChange={onNegativeChange}
+            rows={rows}
+            disabled={disabled}
+            hint={negativeHint}
+          />
+          {negativeExtras}
+        </>
+      )}
+    </div>
+  );
+}
+
+// ── PromptCardSettings ──────────────────────────────────────────────────────
+
+/**
+ * The labelled settings expander at a card's foot — collapsed by default, styled
+ * on the condensed knob-strip rhythm (see .vi-prompt-card-settings). A native
+ * <details>, so the open/closed flag lives in the DOM, not in anyone's state.
+ * Children are the row's tab-specific knobs (Cinema: seed/joint/branch; Movie:
+ * the frame window).
+ */
+export function PromptCardSettings({
+  label = "settings",
+  children,
+}: {
+  label?: string;
+  children: ReactNode;
+}) {
+  return (
+    <details className="vi-prompt-card-settings">
+      <summary className="vi-prompt-card-settings-summary">{label}</summary>
+      <div className="vi-prompt-card-settings-body">{children}</div>
+    </details>
+  );
+}
+
+// ── AboutExpander ───────────────────────────────────────────────────────────
+
+/**
+ * The sidebar "About <tab>" expander (k89) — the condensed what-is-this / how-to
+ * prose each Studio tab used to carry inline, folded into ONE collapsed-by-default
+ * <details> at the top of that tab's Settings-tab content. Same native-<details>
+ * rule as PromptCardSettings: the open flag lives in the DOM, never in state.
+ * Children are short lines (<p>/<span>) — the body stacks them.
+ */
+export function AboutExpander({
+  title,
+  children,
+}: {
+  title: string;
+  children: ReactNode;
+}) {
+  return (
+    <details className="vi-about-expander">
+      <summary className="vi-about-summary">{title}</summary>
+      <div className="vi-about-body">{children}</div>
+    </details>
+  );
+}