@hugpy/video-intelligence-ui 0.1.0

package/src/share.ts

@@ -0,0 +1,77 @@
+// k9 — video SHARE-LINK credential (client half).
+//
+// An operator mints a share link (`https://dev.hugpy.ai/video/?share=<key>`) and
+// sends it to an outside party. On first load this module lifts the `?share=` key
+// out of the URL, stashes it in localStorage (so it survives reloads and SPA
+// navigations — on dev the shell + assets are served ungated by the webpack
+// watcher, so a bare reload restores the key from storage), and STRIPS it from the
+// address bar (nothing reloads — `history.replaceState`) so the credential isn't
+// left sitting in the URL.
+//
+// The stored key then rides EVERY hugpy API call:
+//   • XHR through the transport (`transport/client.ts`) carries it as the
+//     `X-Video-Share` header — the SPA's single fetch choke point stamps it once;
+//   • element-src media loads (`<img>`/`<video>` to /video/media | /video/studio/
+//     clip, via `config.ts`) can't carry a header, so those URLs carry `?share=`
+//     in the query (`withShareParam`).
+// Server side, `video_auth._video_share_principal` accepts any of the three.
+//
+// A console-authenticated operator never has a stored share key (they never opened
+// a share link), so nothing here affects them — their same-origin session cookie
+// authenticates their calls exactly as before.
+
+const STORAGE_KEY = "hugpy.video.share";
+const PARAM = "share";
+
+let _key: string | null = null;
+let _initialized = false;
+
+/** Lift `?share=` out of the URL (stash + strip), else restore from storage.
+ *  Idempotent; safe to call before any network activity. Must run at boot. */
+export function initShare(): void {
+  if (_initialized) return;
+  _initialized = true;
+  if (typeof window === "undefined") return;
+  try {
+    const url = new URL(window.location.href);
+    const fromUrl = url.searchParams.get(PARAM);
+    if (fromUrl) {
+      _key = fromUrl;
+      try {
+        localStorage.setItem(STORAGE_KEY, fromUrl);
+      } catch {
+        /* private mode — the in-memory key still drives this load */
+      }
+      // Strip the credential from the address bar without reloading.
+      url.searchParams.delete(PARAM);
+      const rest = url.search ? url.search : "";
+      window.history.replaceState({}, "", `${url.pathname}${rest}${url.hash}`);
+      return;
+    }
+    _key = localStorage.getItem(STORAGE_KEY);
+  } catch {
+    // storage/URL unavailable — leave whatever we have (likely null).
+  }
+}
+
+/** The active share key, or null. Lazily initialises so an early caller is safe. */
+export function videoShareKey(): string | null {
+  if (!_initialized) initShare();
+  return _key;
+}
+
+/** Append the share credential to a URL used as an element `src` (img/video),
+ *  which cannot carry the `X-Video-Share` header. No-op when there's no key. */
+export function withShareParam(url: string): string {
+  const key = videoShareKey();
+  if (!key) return url;
+  const sep = url.includes("?") ? "&" : "?";
+  return `${url}${sep}${PARAM}=${encodeURIComponent(key)}`;
+}
+
+/** True when this session is running off a share link (no console login). Used
+ *  only to shape UI copy — the Share button visibility is decided by a live
+ *  operator-auth probe, never by this. */
+export function isSharedSession(): boolean {
+  return videoShareKey() != null;
+}

package/src/stations/ActivePanel.tsx

@@ -0,0 +1,55 @@
+// ActivePanel — the console-wide Active Processes view in the shared
+// expand-into-the-screen drawer (operator ask 2026-08-06: "'Active' as an
+// overlay", the same treatment ComfyUI got on 2026-08-04). Watching what the box
+// is doing is something you want to do FROM the station you are working in, not
+// by navigating away from it.
+//
+// Since the tab round (2026-08-06) this file contributes ONE TAB to the single
+// unified drawer (drawerShell.tsx → WorkbenchDrawer.tsx) — same window as Console
+// and ComfyUI, same `.vi-console-panel*` chrome. Its body is the EXISTING
+// ActiveProcessesStation, mounted verbatim. Not a second, divergent renderer of
+// the same feed: the `/active` tab and this overlay are literally the same
+// component, so the placement line, the awaiting_capacity hold, the progress
+// bars, the timeline expander and Cancel all behave identically in both places.
+//
+// ── POLLING: `keepMounted: false` IS THE PAUSE (read before changing it) ────
+// The cadence lives in useMediaJobs, which polls ONLY while a consumer is
+// mounted (mount → immediate fetch + 2s interval; unmount → interval cleared,
+// mounted-ref flipped so a late response never setStates). There is no separate
+// pause seam — mount IS the switch. So this tab declares `keepMounted: false`,
+// and the poll runs exactly when the operator is watching it:
+//   * drawer closed          → the shell renders no portal at all → no poll;
+//   * drawer open, other tab → this body is REMOVED (not merely hidden) → no poll;
+//   * drawer open, this tab  → mounted → 2s poll.
+// Console and ComfyUI take the opposite choice (`keepMounted: true`) because
+// their bodies are iframes, where staying mounted costs nothing and unmounting
+// would throw away a live session. Do NOT flip this one to true to "keep the
+// list warm": a hidden-but-mounted body would poll every 2s behind the ComfyUI
+// frame on every station, which is precisely what the drawer was built to avoid.
+import { ActiveProcessesStation } from "./ActiveProcessesStation";
+import type { DrawerTab } from "./drawerShell";
+
+/** Active Processes' tab in the unified drawer. */
+export function activeDrawerTab(): DrawerTab<"active"> {
+  return {
+    id: "active",
+    // The short chrome word, the way the Console tab says "Console" — the
+    // station card below carries its own "Active Processes" heading, so a longer
+    // label here would only stack the same words twice.
+    label: "Active",
+    hint: "Open Active Processes alongside this station — no tab switch",
+    toggleClassName: "vi-active-toggle",
+    toggleLabel: "▤ Active",
+    ariaLabel: "Active processes",
+    panelClassName: "vi-active-panel",
+    keepMounted: false, // see the polling note above — this is the pause
+    body: (
+      /* The station body is a `.station-card` built for a page column, so it
+         gets its own scroll region here (the other tabs' bodies are iframes,
+         which scroll themselves). */
+      <div className="vi-active-panel-body">
+        <ActiveProcessesStation />
+      </div>
+    ),
+  };
+}

package/src/stations/ActiveProcessesStation.tsx

@@ -0,0 +1,272 @@
+// ACTIVE PROCESSES — the console-wide, placement-aware view of every in-flight
+// media-bus job (studio / movie / identity / generate / crop / extract), fed by
+// GET /video/jobs. Promotes the studio-only StudioActiveProcesses pattern to the
+// whole console and adds the two things that were invisible before:
+//
+//   • WHERE a job physically executes — the `placement` line ("ae · cuda:0 ·
+//     P-studio"), with an "external" cue when it runs OFF the central box (an ae
+//     worker, ComfyUI, or the identity-render service on :9750), plus reserved
+//     VRAM when a GPU reservation is held.
+//   • The reservation HOLD phase — a job that can't fit the card yet sits as
+//     `awaiting_capacity` (with the shortfall reason on hover + the overtaken
+//     count), not a fake "running".
+//   • WHAT it is doing right now — a moving progress bar (segments done plus the
+//     within-segment denoise fraction the runner reports) and the TAIL of the job's
+//     stage timeline, so a running render shows its last few events instead of an
+//     opaque "running" chip.
+//   • WHY it broke — a terminal-failed job renders its failure envelope VERBATIM
+//     (code + message + the stage it died in), never a generic "failed". Terminal
+//     rows arrive only with the "Show finished" filter on.
+//
+// HONEST rendering only: no fabricated progress bars — a numeric progress/stage
+// shows only when the server sends one. Cancel hits the same /video/jobs/<id>/
+// cancel seam every station uses; a held job cancels exactly like any queued job.
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { StationSpec } from "./types";
+import { request } from "../transport/client";
+import { jobCancelUrl } from "../config";
+import { ProcessTimeline, shortId } from "./studio/studioShared";
+import { SessionsPanel } from "./studio/StudioMovieSessions";
+import {
+  useMediaJobs,
+  placementLine,
+  isExternal,
+  reservedGib,
+  elapsedSince,
+  progressLabel,
+  latestEvent,
+  type MediaJob,
+} from "../video/useMediaJobs";
+
+function PhaseChip({ job }: { job: MediaJob }) {
+  if (job.phase === "awaiting_capacity") {
+    const reason = job.hold?.reason ? JSON.stringify(job.hold.reason) : "";
+    const overtaken = job.hold?.overtaken ?? 0;
+    return (
+      <span
+        className="vi-status vi-status-awaiting_capacity"
+        title={
+          reason
+            ? `Held — waiting for GPU capacity. Shortfall: ${reason}`
+            : "Held — waiting for GPU capacity"
+        }
+      >
+        awaiting capacity{overtaken > 0 ? ` · jumped ${overtaken}×` : ""}
+      </span>
+    );
+  }
+  return <span className={`vi-status vi-status-${job.phase}`}>{job.phase}</span>;
+}
+
+/** The bar + its honest label. Renders nothing when the server sent no number. */
+function ProgressBar({ job }: { job: MediaJob }) {
+  if (job.progress == null) return null;
+  const pct = Math.max(0, Math.min(100, job.progress * 100));
+  return (
+    <div className="vi-job-progress">
+      <div className="vi-job-progress-track">
+        <div className="vi-job-progress-fill" style={{ width: `${pct}%` }} />
+      </div>
+      <span className="vi-job-progress-label">{progressLabel(job)}</span>
+    </div>
+  );
+}
+
+/** ONE job row's content (head, placement/meta, progress, timeline, Cancel) —
+ *  extracted so the Sessions panel's per-surface sections (Scene/Movie/Clip)
+ *  render feed jobs through the SAME renderer as the main list instead of a
+ *  parallel copy. The `<li className="vi-studio-active-row">` wrapper (and its
+ *  `key`) stays at the call site — this project's scoped tsconfig rejects a
+ *  `key` prop on a locally-declared component (the SessionRowBody idiom). */
+export function JobRow({
+  job: j,
+  expanded: isOpen,
+  onToggle,
+  nowMs,
+  cancelBusy,
+  onCancel,
+}: {
+  job: MediaJob;
+  expanded: boolean;
+  onToggle: () => void;
+  nowMs: number;
+  cancelBusy: boolean;
+  onCancel: () => void;
+}) {
+  const line = placementLine(j.placement);
+  const gib = reservedGib(j.placement);
+  const external = isExternal(j.placement);
+  const elided = j.stageLogTotal - j.stageLog.length;
+  const event = latestEvent(j);
+  return (
+    <>
+      <div className="vi-studio-active-head">
+        <button
+          type="button"
+          className="vi-timeline-toggle"
+          onClick={onToggle}
+          aria-expanded={isOpen}
+          title={isOpen ? "Hide detail" : "Show what it's doing"}
+        >
+          <span className="vi-timeline-caret" aria-hidden>
+            {isOpen ? "▾" : "▸"}
+          </span>
+        </button>
+        <PhaseChip job={j} />
+        <span className="vi-studio-active-id">
+          {j.name || "job"} · {shortId(j.id)}
+        </span>
+      </div>
+      <div className="vi-studio-active-meta">
+        {line ? (
+          <span
+            className={`vi-placement${external ? " vi-placement-external" : ""}`}
+            title={external ? "Runs off the central box" : undefined}
+          >
+            {external ? "⇄ " : ""}
+            {line}
+            {external ? " · external" : ""}
+          </span>
+        ) : null}
+        {gib ? <span>· {gib}</span> : null}
+        {j.stage ? <span>· {j.stage}</span> : null}
+        <span>· {elapsedSince(j.createdAt)}</span>
+      </div>
+      <ProgressBar job={j} />
+      {event ? <p className="vi-job-latest">{event}</p> : null}
+      {isOpen ? (
+        <div className="vi-timeline-panel">
+          {/* The SAME renderer the studio tab uses: the failure envelope
+              verbatim (code · stage · message), the live "now" line, and
+              every stage the render moved through. A live row carries a
+              tail; a terminal one carries the whole sequence. */}
+          <ProcessTimeline
+            stageLog={j.stageLog}
+            failure={j.failure}
+            currentStage={j.stage}
+            lastMovementTs={j.progressedAt}
+            terminal={j.terminal}
+            nowMs={nowMs}
+          />
+          {elided > 0 ? (
+            <p className="vi-knob-hint">
+              …{elided} earlier event{elided === 1 ? "" : "s"} — open the job for
+              its full history.
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+      {j.terminal ? null : (
+        <button
+          type="button"
+          className="vi-btn vi-btn-sm vi-btn-ghost"
+          onClick={onCancel}
+          disabled={cancelBusy}
+        >
+          {cancelBusy ? "Cancelling…" : "✕ Cancel"}
+        </button>
+      )}
+    </>
+  );
+}
+
+// `spec` is optional because this body has TWO mounts: the registry's /active
+// station (which always passes one) and the sidebar's ActivePanel overlay
+// (2026-08-06), which mounts it inside the shared drawer shell and has no spec
+// to hand it. The prop was already unused here, so optional costs nothing and
+// keeps ONE renderer for the feed instead of an overlay-only copy.
+export function ActiveProcessesStation({ spec: _spec }: { spec?: StationSpec } = {}) {
+  const [showFinished, setShowFinished] = useState(false);
+  const { jobs, refetch } = useMediaJobs(showFinished);
+  // Expanded rows + a 1s clock, exactly as the studio tab's sibling panel does —
+  // ProcessTimeline needs `nowMs` to age its "…since last movement" line.
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  useEffect(() => {
+    const id = window.setInterval(() => setNowMs(Date.now()), 1000);
+    return () => window.clearInterval(id);
+  }, []);
+  const toggle = useCallback((id: string) => {
+    setExpanded((prev) => {
+      const n = new Set(prev);
+      if (n.has(id)) n.delete(id);
+      else n.add(id);
+      return n;
+    });
+  }, []);
+  const [cancelBusy, setCancelBusy] = useState<Set<string>>(new Set());
+  const mounted = useRef(true);
+
+  const onCancel = useCallback(
+    async (jobId: string) => {
+      setCancelBusy((prev) => new Set(prev).add(jobId));
+      try {
+        await request<unknown>(jobCancelUrl(jobId), {
+          method: "POST",
+          meta: { specKey: "media", operation: "media.job.cancel" },
+        });
+        if (!mounted.current) return;
+        refetch();
+      } finally {
+        if (mounted.current)
+          setCancelBusy((prev) => {
+            const n = new Set(prev);
+            n.delete(jobId);
+            return n;
+          });
+      }
+    },
+    [refetch],
+  );
+
+  return (
+    <section className="station-card station-wide vi-studio-active">
+      <h2>Active Processes</h2>
+      <p className="vi-knob-hint">
+        Every in-flight media build across the console, and WHERE it physically runs.
+        A build marked <strong>external</strong> is executing off this box — on the{" "}
+        ae worker, ComfyUI, or the identity-render service.
+      </p>
+      <label className="vi-knob-hint vi-job-filter">
+        <input
+          type="checkbox"
+          checked={showFinished}
+          onChange={(e) => setShowFinished(e.target.checked)}
+        />{" "}
+        Show finished — recent done/failed/cancelled builds, with each failure&apos;s
+        full stage timeline and its exact error.
+      </label>
+      {jobs.length === 0 ? (
+        <p className="vi-knob-hint">
+          No active builds — enqueue a render and it appears here with its placement.
+        </p>
+      ) : (
+        <ul className="vi-studio-active-list">
+          {jobs.map((j) => (
+            <li key={j.id} className="vi-studio-active-row">
+              <JobRow
+                job={j}
+                expanded={expanded.has(j.id)}
+                onToggle={() => toggle(j.id)}
+                nowMs={nowMs}
+                cancelBusy={cancelBusy.has(j.id)}
+                onCancel={() => void onCancel(j.id)}
+              />
+            </li>
+          ))}
+        </ul>
+      )}
+      {/* SESSIONS (operator ask 2026-08-12): the recovery surface lives HERE now —
+          relocated from the Cinema composer so "what can I pick back up" is visible
+          from every station, split per generate surface. It reuses THIS station's
+          feed + row renderer; only the Cinema section owns an extra poll (the
+          durable sessions walk), and only while it is open. */}
+      <SessionsPanel
+        jobs={jobs}
+        nowMs={nowMs}
+        cancelBusy={cancelBusy}
+        onCancel={(id) => void onCancel(id)}
+      />
+    </section>
+  );
+}

package/src/stations/ActiveProcessesStation.tsx.bak-sessions-20260812

@@ -0,0 +1,228 @@
+// ACTIVE PROCESSES — the console-wide, placement-aware view of every in-flight
+// media-bus job (studio / movie / identity / generate / crop / extract), fed by
+// GET /video/jobs. Promotes the studio-only StudioActiveProcesses pattern to the
+// whole console and adds the two things that were invisible before:
+//
+//   • WHERE a job physically executes — the `placement` line ("ae · cuda:0 ·
+//     P-studio"), with an "external" cue when it runs OFF the central box (an ae
+//     worker, ComfyUI, or the identity-render service on :9750), plus reserved
+//     VRAM when a GPU reservation is held.
+//   • The reservation HOLD phase — a job that can't fit the card yet sits as
+//     `awaiting_capacity` (with the shortfall reason on hover + the overtaken
+//     count), not a fake "running".
+//   • WHAT it is doing right now — a moving progress bar (segments done plus the
+//     within-segment denoise fraction the runner reports) and the TAIL of the job's
+//     stage timeline, so a running render shows its last few events instead of an
+//     opaque "running" chip.
+//   • WHY it broke — a terminal-failed job renders its failure envelope VERBATIM
+//     (code + message + the stage it died in), never a generic "failed". Terminal
+//     rows arrive only with the "Show finished" filter on.
+//
+// HONEST rendering only: no fabricated progress bars — a numeric progress/stage
+// shows only when the server sends one. Cancel hits the same /video/jobs/<id>/
+// cancel seam every station uses; a held job cancels exactly like any queued job.
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { StationSpec } from "./types";
+import { request } from "../transport/client";
+import { jobCancelUrl } from "../config";
+import { ProcessTimeline, shortId } from "./studio/studioShared";
+import {
+  useMediaJobs,
+  placementLine,
+  isExternal,
+  reservedGib,
+  elapsedSince,
+  progressLabel,
+  latestEvent,
+  type MediaJob,
+} from "../video/useMediaJobs";
+
+function PhaseChip({ job }: { job: MediaJob }) {
+  if (job.phase === "awaiting_capacity") {
+    const reason = job.hold?.reason ? JSON.stringify(job.hold.reason) : "";
+    const overtaken = job.hold?.overtaken ?? 0;
+    return (
+      <span
+        className="vi-status vi-status-awaiting_capacity"
+        title={
+          reason
+            ? `Held — waiting for GPU capacity. Shortfall: ${reason}`
+            : "Held — waiting for GPU capacity"
+        }
+      >
+        awaiting capacity{overtaken > 0 ? ` · jumped ${overtaken}×` : ""}
+      </span>
+    );
+  }
+  return <span className={`vi-status vi-status-${job.phase}`}>{job.phase}</span>;
+}
+
+/** The bar + its honest label. Renders nothing when the server sent no number. */
+function ProgressBar({ job }: { job: MediaJob }) {
+  if (job.progress == null) return null;
+  const pct = Math.max(0, Math.min(100, job.progress * 100));
+  return (
+    <div className="vi-job-progress">
+      <div className="vi-job-progress-track">
+        <div className="vi-job-progress-fill" style={{ width: `${pct}%` }} />
+      </div>
+      <span className="vi-job-progress-label">{progressLabel(job)}</span>
+    </div>
+  );
+}
+
+// `spec` is optional because this body has TWO mounts: the registry's /active
+// station (which always passes one) and the sidebar's ActivePanel overlay
+// (2026-08-06), which mounts it inside the shared drawer shell and has no spec
+// to hand it. The prop was already unused here, so optional costs nothing and
+// keeps ONE renderer for the feed instead of an overlay-only copy.
+export function ActiveProcessesStation({ spec: _spec }: { spec?: StationSpec } = {}) {
+  const [showFinished, setShowFinished] = useState(false);
+  const { jobs, refetch } = useMediaJobs(showFinished);
+  // Expanded rows + a 1s clock, exactly as the studio tab's sibling panel does —
+  // ProcessTimeline needs `nowMs` to age its "…since last movement" line.
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  useEffect(() => {
+    const id = window.setInterval(() => setNowMs(Date.now()), 1000);
+    return () => window.clearInterval(id);
+  }, []);
+  const toggle = useCallback((id: string) => {
+    setExpanded((prev) => {
+      const n = new Set(prev);
+      if (n.has(id)) n.delete(id);
+      else n.add(id);
+      return n;
+    });
+  }, []);
+  const [cancelBusy, setCancelBusy] = useState<Set<string>>(new Set());
+  const mounted = useRef(true);
+
+  const onCancel = useCallback(
+    async (jobId: string) => {
+      setCancelBusy((prev) => new Set(prev).add(jobId));
+      try {
+        await request<unknown>(jobCancelUrl(jobId), {
+          method: "POST",
+          meta: { specKey: "media", operation: "media.job.cancel" },
+        });
+        if (!mounted.current) return;
+        refetch();
+      } finally {
+        if (mounted.current)
+          setCancelBusy((prev) => {
+            const n = new Set(prev);
+            n.delete(jobId);
+            return n;
+          });
+      }
+    },
+    [refetch],
+  );
+
+  return (
+    <section className="station-card station-wide vi-studio-active">
+      <h2>Active Processes</h2>
+      <p className="vi-knob-hint">
+        Every in-flight media build across the console, and WHERE it physically runs.
+        A build marked <strong>external</strong> is executing off this box — on the{" "}
+        ae worker, ComfyUI, or the identity-render service.
+      </p>
+      <label className="vi-knob-hint vi-job-filter">
+        <input
+          type="checkbox"
+          checked={showFinished}
+          onChange={(e) => setShowFinished(e.target.checked)}
+        />{" "}
+        Show finished — recent done/failed/cancelled builds, with each failure&apos;s
+        full stage timeline and its exact error.
+      </label>
+      {jobs.length === 0 ? (
+        <p className="vi-knob-hint">
+          No active builds — enqueue a render and it appears here with its placement.
+        </p>
+      ) : (
+        <ul className="vi-studio-active-list">
+          {jobs.map((j) => {
+            const line = placementLine(j.placement);
+            const gib = reservedGib(j.placement);
+            const external = isExternal(j.placement);
+            const isOpen = expanded.has(j.id);
+            const elided = j.stageLogTotal - j.stageLog.length;
+            const event = latestEvent(j);
+            return (
+              <li key={j.id} className="vi-studio-active-row">
+                <div className="vi-studio-active-head">
+                  <button
+                    type="button"
+                    className="vi-timeline-toggle"
+                    onClick={() => toggle(j.id)}
+                    aria-expanded={isOpen}
+                    title={isOpen ? "Hide detail" : "Show what it's doing"}
+                  >
+                    <span className="vi-timeline-caret" aria-hidden>
+                      {isOpen ? "▾" : "▸"}
+                    </span>
+                  </button>
+                  <PhaseChip job={j} />
+                  <span className="vi-studio-active-id">
+                    {j.name || "job"} · {shortId(j.id)}
+                  </span>
+                </div>
+                <div className="vi-studio-active-meta">
+                  {line ? (
+                    <span
+                      className={`vi-placement${external ? " vi-placement-external" : ""}`}
+                      title={external ? "Runs off the central box" : undefined}
+                    >
+                      {external ? "⇄ " : ""}
+                      {line}
+                      {external ? " · external" : ""}
+                    </span>
+                  ) : null}
+                  {gib ? <span>· {gib}</span> : null}
+                  {j.stage ? <span>· {j.stage}</span> : null}
+                  <span>· {elapsedSince(j.createdAt)}</span>
+                </div>
+                <ProgressBar job={j} />
+                {event ? <p className="vi-job-latest">{event}</p> : null}
+                {isOpen ? (
+                  <div className="vi-timeline-panel">
+                    {/* The SAME renderer the studio tab uses: the failure envelope
+                        verbatim (code · stage · message), the live "now" line, and
+                        every stage the render moved through. A live row carries a
+                        tail; a terminal one carries the whole sequence. */}
+                    <ProcessTimeline
+                      stageLog={j.stageLog}
+                      failure={j.failure}
+                      currentStage={j.stage}
+                      lastMovementTs={j.progressedAt}
+                      terminal={j.terminal}
+                      nowMs={nowMs}
+                    />
+                    {elided > 0 ? (
+                      <p className="vi-knob-hint">
+                        …{elided} earlier event{elided === 1 ? "" : "s"} — open the
+                        job for its full history.
+                      </p>
+                    ) : null}
+                  </div>
+                ) : null}
+                {j.terminal ? null : (
+                  <button
+                    type="button"
+                    className="vi-btn vi-btn-sm vi-btn-ghost"
+                    onClick={() => void onCancel(j.id)}
+                    disabled={cancelBusy.has(j.id)}
+                  >
+                    {cancelBusy.has(j.id) ? "Cancelling…" : "✕ Cancel"}
+                  </button>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </section>
+  );
+}