@jr2/orchestrator 0.6.0 → 0.7.0

package/console/components/app.ts

@@ -1,5 +1,6 @@
 // The Console shell (ADR-0032): nav over a master–detail main — the fleet rail on the left, the
-// selected workflow's Machine in the center, the Attention/Activity drawer on the right. One pure
+// selected workflow's Machine in the center, the Attention/Activity drawer on the right, and under
+// those two the bottom drawer with the selected run's conversations (ADR-0023). One pure
 // render over the store plus the bootstrap's working state; Preact's diff replaces main.js's
 // hand-rolled memo()/paint() machinery (ADR-0034). Which drawer tab the reader chose is view state
 // like the zoom — component state, never the store's.
@@ -7,8 +8,11 @@
 import { Fragment, h, type JSX } from "preact";
 import { useState } from "preact/hooks";
 import {
+  may,
+  olderAssemblyMark,
   selectedRun,
   selectedRunFailure,
+  selectedRunStarter,
   selectedRunGates,
   selectedRunHeld,
   selectedRunWaiting,
@@ -16,10 +20,12 @@ import {
   type Store,
 } from "../store.ts";
 import type { MachineDoc } from "../canvas.ts";
+import type { LoginIssuer } from "../login.ts";
 import { Nav } from "./nav.ts";
 import { Fleet } from "./fleet.ts";
 import { Drawer, type DrawerTab } from "./drawer.ts";
 import { MachinePane } from "./machine-pane.ts";
+import { BottomDrawer } from "./bottom-drawer.ts";
 
 /**
  * What the bootstrap (main.ts) hands the components: every write path in one object, so no
@@ -36,7 +42,14 @@ export type AppApi = {
   startRun(name: string, body: Record<string, unknown>): Promise<string | null>;
   /** POST one gate event; same contract as {@link AppApi.startRun}. */
   deliverGate(runId: string, gate: string, event: string, body: Record<string, unknown>): Promise<string | null>;
+  /** POST CANCEL to a run (ADR-0002); same contract as {@link AppApi.startRun}. */
+  cancelRun(runId: string): Promise<string | null>;
+  /** POST one Steering message to an Agent slot of a run; same contract as {@link AppApi.startRun}. */
+  steer(runId: string, agent: string, text: string): Promise<string | null>;
+  /** Keep a typed credential (empty clears it) and ask `GET /whoami` what it may do. */
   setToken(value: string): void;
+  /** Go to an issuer to log in (OIDC code + PKCE, ADR-0032). */
+  login(issuer: LoginIssuer): void;
   /** The canvas reports its zoom readout through here (nav renders it). */
   onScale(pct: number): void;
   zoomIn(): void;
@@ -61,30 +74,57 @@ export function App(props: {
   view: MachineView;
   zoomPct: number;
   initialToken: string;
+  logins: readonly LoginIssuer[];
+  loginNote: string | null;
   schemas: ReadonlyMap<string, unknown>;
   api: AppApi;
 }): JSX.Element {
-  const { store, view, zoomPct, initialToken, schemas, api } = props;
+  const { store, view, zoomPct, initialToken, logins, loginNote, schemas, api } = props;
+  const run = selectedRun(store);
+  // A settled run takes no cancel and no Steering message; a live one, as its Caller's scopes allow.
+  const live = run !== null && store.runs.has(run.runId);
   const [chosenTab, setChosenTab] = useState<DrawerTab>("attention");
   return h(
     Fragment,
     null,
-    h(Nav, { store, machineId: view.doc?.id ?? null, zoomPct, initialToken, onChooseTab: setChosenTab, api }),
+    h(Nav, {
+      store,
+      machineId: view.doc?.id ?? null,
+      zoomPct,
+      initialToken,
+      logins,
+      loginNote,
+      onChooseTab: setChosenTab,
+      api,
+    }),
     h(
       "main",
       null,
-      h(Fleet, { store, schemas, api }),
-      h(MachinePane, {
-        view,
-        run: selectedRun(store),
-        selectedNodeId: store.selectedNodeId,
-        gates: selectedRunGates(store),
-        waiting: selectedRunWaiting(store),
-        held: selectedRunHeld(store),
-        failure: selectedRunFailure(store),
-        api,
-      }),
-      h(Drawer, { store, chosenTab, onChooseTab: setChosenTab, api }),
+      h(
+        "div",
+        { id: "work" },
+        h(Fleet, { store, schemas, api }),
+        h(
+          "div",
+          { id: "upper" },
+          h(MachinePane, {
+            view,
+            run,
+            selectedNodeId: store.selectedNodeId,
+            gates: selectedRunGates(store),
+            waiting: selectedRunWaiting(store),
+            held: selectedRunHeld(store),
+            failure: selectedRunFailure(store),
+            starter: selectedRunStarter(store),
+            older: store.selectedRunId ? olderAssemblyMark(store, store.selectedRunId) : null,
+            canCancel: live && may(store, "cancel", run.workflow),
+            api,
+          }),
+          h(Drawer, { store, chosenTab, onChooseTab: setChosenTab, api }),
+        ),
+      ),
+      // Full width under the rail, the Machine and the right drawer (ADR-0032).
+      h(BottomDrawer, { store, api }),
     ),
   );
 }

package/console/components/bottom-drawer.ts

@@ -0,0 +1,259 @@
+// The bottom drawer (ADR-0032, ADR-0023): the selected run's kept conversations, full width across
+// the bottom of the page. Closed, it is a bar of tabs, one for each Agent slot of the run,
+// with a dot on a slot whose Turn is open. Open, it shows the chosen slot's conversation and follows
+// a live Turn: the model's words, each tool call folded with its answer, the picks, the Steering
+// messages, the notices, the refusals, and the cut and swept marks. The Steering box is beside it,
+// for a Caller with `steer` on a live run.
+//
+// The entries are store belief (main.ts reads them); the height is the viewer's own, kept in
+// localStorage (a per-viewer convenience — the page works the same without it).
+
+import { h, type JSX } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { activeSlot, may, slotConversations, slotTabs, type SlotConversation, type Store } from "../store.ts";
+import { foldEntries, type ConversationItem } from "../conversation.ts";
+import type { AppApi } from "./app.ts";
+
+const HEIGHT_KEY = "jr2.console.bottom.height";
+const HEIGHT_DEFAULT = 300;
+const HEIGHT_MIN = 120;
+
+function storedHeight(): number {
+  try {
+    const value = Number(localStorage.getItem(HEIGHT_KEY));
+    const kept = Number.isFinite(value) && value >= HEIGHT_MIN ? value : HEIGHT_DEFAULT;
+    // A height kept on a taller window must leave room for the Machine on this one.
+    return Math.min(kept, maxHeight());
+  } catch {
+    return HEIGHT_DEFAULT;
+  }
+}
+
+/** The tallest the drawer goes: the Machine keeps at least 160px. */
+function maxHeight(): number {
+  return Math.max(HEIGHT_MIN, window.innerHeight - 160);
+}
+
+function keepHeight(height: number): void {
+  try {
+    localStorage.setItem(HEIGHT_KEY, String(Math.round(height)));
+  } catch {
+    // no storage (a private window, or blocked): the height lasts for this page only
+  }
+}
+
+export function BottomDrawer(props: { store: Store; api: AppApi }): JSX.Element | null {
+  const { store, api } = props;
+  const [height, setHeight] = useState(storedHeight);
+  const run = store.selectedRunId;
+  const workflow = store.workflow;
+  const live = run !== null && store.runs.has(run);
+  const canRead = workflow !== null && may(store, "read", workflow);
+  const canSteer = live && workflow !== null && may(store, "steer", workflow);
+  // The observer's page has no conversation to show and no Agent to steer (ADR-0014).
+  if (run === null || (!canRead && !canSteer)) return null;
+
+  const tabs = slotTabs(store);
+  const slot = activeSlot(store);
+  const open = store.bottom.open;
+  const tab = tabs.find((t) => t.slot === slot);
+
+  const startResize = (e: PointerEvent): void => {
+    e.preventDefault();
+    const startY = e.clientY;
+    const startHeight = height;
+    let last = startHeight;
+    const move = (ev: PointerEvent): void => {
+      last = Math.min(maxHeight(), Math.max(HEIGHT_MIN, startHeight + (startY - ev.clientY)));
+      setHeight(last);
+    };
+    const up = (): void => {
+      removeEventListener("pointermove", move);
+      removeEventListener("pointerup", up);
+      removeEventListener("pointercancel", up);
+      keepHeight(last);
+    };
+    addEventListener("pointermove", move);
+    addEventListener("pointerup", up);
+    addEventListener("pointercancel", up);
+  };
+
+  return h(
+    "section",
+    {
+      id: "bottom-drawer",
+      class: open ? "bottom--open" : "",
+      style: open ? { height: `${Math.min(height, maxHeight())}px` } : undefined,
+    },
+    open ? h("div", { class: "bottom-resize", title: "drag to change the height", onPointerDown: startResize }) : null,
+    h(
+      "div",
+      { class: "bottom-tabs" },
+      h(
+        "button",
+        {
+          id: "bottom-toggle",
+          title: open ? "close the conversations" : "open the conversations",
+          onClick: () => api.dispatch({ kind: "bottom", open: !open }),
+        },
+        open ? "▾" : "▴",
+      ),
+      h("span", { class: "bottom-title" }, "Conversations"),
+      tabs.length
+        ? tabs.map((t) =>
+            h(
+              "button",
+              {
+                key: t.slot,
+                class: `slot-tab${t.slot === slot ? " tab--active" : ""}`,
+                title: t.open ? `${t.slot}: a Turn is open` : t.slot,
+                onClick: () => api.dispatch({ kind: "bottom", open: true, slot: t.slot }),
+              },
+              t.open ? h("span", { class: "live-dot" }) : null,
+              t.slot,
+            ),
+          )
+        : h("span", { class: "dim" }, canRead ? "no Agent has a conversation in this run yet" : ""),
+    ),
+    open
+      ? h(
+          "div",
+          { class: "bottom-body" },
+          h(
+            "div",
+            { class: "conversation-pane" },
+            canRead
+              ? h(Conversation, { key: `${run}/${slot ?? ""}`, conversations: slotConversations(store, slot) })
+              : h("div", { class: "dim" }, "to read a conversation, the Caller needs the read scope"),
+          ),
+          canSteer && slot !== null
+            ? h(SteeringBox, { key: `${run}/${slot}`, runId: run, slot, steerable: tab?.steerable ?? false, api })
+            : null,
+        )
+      : null,
+  );
+}
+
+/** One slot's conversations, the first first. It stays at the end while the reader is at the end,
+ *  so a live Turn is followed; a reader who scrolls up stays where they are. */
+function Conversation(props: { conversations: SlotConversation[] }): JSX.Element {
+  const { conversations } = props;
+  const ref = useRef<HTMLDivElement>(null);
+  const atEnd = useRef(true);
+  const count = conversations.reduce((n, c) => n + c.entries.length, 0);
+  useEffect(() => {
+    const el = ref.current;
+    if (el && atEnd.current) el.scrollTop = el.scrollHeight;
+  }, [count]);
+  const onScroll = (): void => {
+    const el = ref.current;
+    if (el) atEnd.current = el.scrollHeight - el.scrollTop - el.clientHeight < 24;
+  };
+  return h(
+    "div",
+    { id: "conversation", ref, onScroll },
+    conversations.length
+      ? conversations.map((c) => conversationBlock(c))
+      : h("div", { class: "dim" }, "this Agent has no kept conversation yet"),
+  );
+}
+
+function conversationBlock(c: SlotConversation): JSX.Element {
+  const { row, entries, ended } = c;
+  const swept = row.swept ?? ended?.swept;
+  const cut = (row.cut || ended?.cut) && !entries.some((e) => e.kind === "cut");
+  return h(
+    "div",
+    { key: row.instanceId, class: "conversation-block" },
+    h("div", { class: "conversation-head dim" }, `${row.agent} · ${row.instanceId}${row.open ? " · Turn open" : ""}`),
+    swept ? h("div", { class: "conv-mark conv-swept" }, `conversation swept: ${swept}`) : null,
+    foldEntries(entries).map((item, i) => itemView(item, i)),
+    cut ? h("div", { class: "conv-mark conv-cut" }, "cut: the conversation reached its size limit") : null,
+  );
+}
+
+/** The first line of a text, short, for a folded item's summary. */
+function firstLine(text: string, max = 120): string {
+  const line = text.split("\n", 1)[0] ?? "";
+  return line.length > max ? `${line.slice(0, max)}…` : line;
+}
+
+function itemView(item: ConversationItem, i: number): JSX.Element {
+  switch (item.type) {
+    case "text":
+      return h("div", { key: i, class: "conv-text" }, item.text);
+    case "thinking":
+      return h(
+        "details",
+        { key: i, class: "conv-thinking" },
+        h("summary", null, h("span", { class: "conv-label" }, "thinking"), ` ${firstLine(item.text)}`),
+        h("div", { class: "conv-body" }, item.text),
+      );
+    case "prompt":
+    case "notice":
+    case "steering":
+      return h(
+        "details",
+        { key: i, class: `conv-${item.type}`, open: item.type !== "prompt" },
+        h("summary", null, h("span", { class: "conv-label" }, item.type), ` ${firstLine(item.text)}`),
+        h("div", { class: "conv-body" }, item.text),
+      );
+    case "call": {
+      const result = item.result;
+      const label = result ? (result.error ? "refused" : "pick") : "tool";
+      return h(
+        "details",
+        { key: i, class: `conv-call${result?.error ? " conv-refused" : ""}` },
+        h(
+          "summary",
+          null,
+          h("span", { class: "conv-label" }, label),
+          ` ${item.tool}`,
+          item.input ? h("span", { class: "dim" }, ` ${firstLine(item.input, 100)}`) : null,
+        ),
+        item.input ? h("div", { class: "conv-body" }, item.input) : null,
+        result ? h("div", { class: "conv-body conv-answer" }, result.text) : null,
+      );
+    }
+    default:
+      return h(
+        "div",
+        { key: i, class: `conv-mark conv-${item.type}` },
+        item.label ? `${item.label}: ${item.text}` : item.text,
+      );
+  }
+}
+
+/**
+ * The Steering box (ADR-0002) beside the slot it steers. What the person types is theirs
+ * (uncontrolled), and a refusal shows where they typed. A slot that the run says is not steerable
+ * shows the box and cannot send.
+ */
+function SteeringBox(props: { runId: string; slot: string; steerable: boolean; api: AppApi }): JSX.Element {
+  const { runId, slot, steerable, api } = props;
+  const [note, setNote] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const send = (e: Event): void => {
+    e.preventDefault();
+    const form = e.currentTarget as HTMLFormElement;
+    const area = form.elements.namedItem("text") as HTMLTextAreaElement | null;
+    const text = area?.value.trim() ?? "";
+    if (!text) return setNote("write the message");
+    setBusy(true);
+    setNote(null);
+    void api.steer(runId, slot, text).then((failure) => {
+      setBusy(false);
+      if (failure) return setNote(`not sent: ${failure}`);
+      if (area) area.value = "";
+      setNote(`sent to ${slot}: it reads the message at its next step`);
+    });
+  };
+  return h(
+    "form",
+    { id: "steering-box", class: "schema-form steering-box", onSubmit: send },
+    h("div", { class: "dim" }, steerable ? `steer ${slot}` : `${slot} cannot be steered now`),
+    h("textarea", { name: "text", rows: 4, disabled: !steerable }),
+    h("button", { type: "submit", disabled: busy || !steerable }, "send"),
+    h("div", { class: note?.startsWith("sent to ") ? "dim" : "form-error", hidden: note === null }, note ?? ""),
+  );
+}

package/console/components/drawer.ts

@@ -1,9 +1,10 @@
-// The drawer: Attention (the gate inbox) + Activity (the emit log). Tokenless there is no
-// Attention tab at all — the observer band of ADR-0014/0032 — and a card is only ever a re-fetched
-// fact: it empties when the server's next answer says so, never through bookkeeping on this side.
+// The drawer: Attention (the gate inbox) + Activity (the emit log). The Attention tab is there only
+// for a Caller with `answer` on some Workflow (ADR-0032, ADR-0078) — without it the page is the
+// observer band of ADR-0014 — and a card is only ever a fact that `GET /gates` stated: it empties
+// when the server's next answer leaves it out, never through bookkeeping on this side.
 
 import { h, type JSX } from "preact";
-import { visibleGates, type GateCard, type Store } from "../store.ts";
+import { may, visibleGates, type GateCard, type Store } from "../store.ts";
 import { SchemaForm } from "./schema-form.ts";
 import type { AppApi } from "./app.ts";
 
@@ -18,8 +19,8 @@ export function Drawer(props: {
   api: AppApi;
 }): JSX.Element {
   const { store, chosenTab, onChooseTab, api } = props;
-  const unlocked = store.token === "live";
-  const tab = unlocked ? chosenTab : "activity"; // tokenless: no Attention tab — today's observer
+  const unlocked = may(store, "answer");
+  const tab = unlocked ? chosenTab : "activity"; // no `answer`: no Attention tab — the observer's drawer
   return h(
     "aside",
     { id: "drawer" },
@@ -94,6 +95,13 @@ function inboxCard(runId: string, workflow: string, view: GateCard, store: Store
       },
       h("span", { class: "gate-id" }, `⚑ ${view.gate}`),
       h("span", { class: "dim" }, `${workflow} · ${runId.slice(0, 8)}`),
+      view.openedAt
+        ? h(
+            "span",
+            { class: "dim", title: view.openedAt },
+            ` · open since ${new Date(view.openedAt).toLocaleTimeString()}`,
+          )
+        : null,
     ),
     view.meta && Object.keys(view.meta).length
       ? h(

package/console/components/fleet.ts

@@ -5,9 +5,23 @@
 //
 // A named Chart is a Workflow (ADR-0070): it lists under its Chart wrapper, indented, with its origin
 // (`chart file` or `chart`) and, when a publish no longer admits it, `unrunnable` with the reason.
+//
+// Under the selected Workflow's live runs are its ended runs (ADR-0032): those `GET /runs` lists,
+// with a Caller that has `read`, each with its status, and a `drifted` run with its reason. A run on
+// an older Assembly carries the mark "older Assembly · <hash>" (ADR-0069).
 
 import { h, type JSX } from "preact";
-import { dispatchBadge, fleetEntries, fleetRuns, type FleetEntry, type ObservedRun, type Store } from "../store.ts";
+import {
+  dispatchBadge,
+  fleetEntries,
+  fleetRuns,
+  heldAssembly,
+  may,
+  olderAssemblyMark,
+  type FleetEntry,
+  type RailRun,
+  type Store,
+} from "../store.ts";
 import { SchemaForm } from "./schema-form.ts";
 import type { AppApi } from "./app.ts";
 
@@ -79,7 +93,7 @@ function workflowItem(
           )
         : null,
       h("span", { class: "wf-count" }, String(rows.filter((r) => !r.settled).length)),
-      store.token === "live" && !entry.unrunnable
+      may(store, "start", name) && !entry.unrunnable
         ? h(
             "button",
             {
@@ -113,31 +127,32 @@ function startForm(name: string, schemas: ReadonlyMap<string, unknown>, api: App
   );
 }
 
-function runRows(
-  name: string,
-  rows: Array<{ run: ObservedRun; settled: boolean }>,
-  store: Store,
-  api: AppApi,
-): JSX.Element {
+function runRows(name: string, rows: RailRun[], store: Store, api: AppApi): JSX.Element {
+  const live = rows.filter((r) => !r.settled);
+  const ended = rows.filter((r) => r.settled);
   return h(
     "ul",
     { class: "wf-runs" },
-    rows.length
-      ? rows.map(({ run, settled }) => runRow(name, run, settled, store, api))
-      : h("li", { class: "empty" }, "no live runs"),
+    live.length
+      ? live.map((run) => runRow(name, run, store, api))
+      : h("li", { key: "no-live", class: "empty" }, "no live runs"),
+    ended.length ? h("li", { key: "ended-head", class: "runs-head dim" }, "ended") : null,
+    ended.map((run) => runRow(name, run, store, api)),
   );
 }
 
-function runRow(name: string, run: ObservedRun, settled: boolean, store: Store, api: AppApi): JSX.Element {
+function runRow(name: string, run: RailRun, store: Store, api: AppApi): JSX.Element {
   const gates = store.gates.get(run.runId)?.gates.length ?? 0;
   const selected = name === store.workflow && run.runId === store.selectedRunId;
   // A dispatched run names its caller on the row (ADR-0071), off the open observation.
   const badge = dispatchBadge(run);
+  const older = olderAssemblyMark(store, run.runId);
   return h(
     "li",
     {
       key: run.runId,
-      class: `${settled ? "settled" : ""}${selected ? " selected" : ""}`.trim(),
+      class: `${run.settled ? "settled" : ""}${selected ? " selected" : ""}`.trim(),
+      title: run.reason !== undefined ? `${run.status}: ${run.reason}` : undefined,
       onClick: () => {
         if (name === store.workflow) api.dispatch({ kind: "selectRun", runId: run.runId });
         else void api.selectWorkflow(name, { push: true, runId: run.runId });
@@ -158,6 +173,14 @@ function runRow(name: string, run: ObservedRun, settled: boolean, store: Store,
     gates
       ? h("span", { class: "gate-badge", title: `${gates} open gate${gates === 1 ? "" : "s"}` }, `⚑${gates}`)
       : null,
+    older ? h("span", { class: "older-assembly dim", title: olderAssemblyTitle(store, run.runId) }, older) : null,
     h("span", { class: `run-status status--${run.status}` }, run.status),
+    run.status === "drifted" && run.reason !== undefined ? h("div", { class: "run-reason dim" }, run.reason) : null,
   );
 }
+
+/** The whole hash, for the mark's title. */
+function olderAssemblyTitle(store: Store, runId: string): string {
+  const hash = heldAssembly(store, runId);
+  return `this run is on Assembly ${hash ?? "?"}; the current one is ${store.assembly.current ?? "?"}`;
+}

package/console/components/machine-pane.ts

@@ -4,7 +4,7 @@
 // deliberately NOT vdom-ified; elk's layout is async and pan/zoom is a 60Hz transform).
 
 import { h, type JSX } from "preact";
-import { useEffect, useRef } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import {
   dispatchStrip,
   dispatchedStrip as dispatchedStripText,
@@ -32,9 +32,15 @@ export function MachinePane(props: {
   waiting: WaitingLine[];
   held: HeldLine[];
   failure: string | null;
+  /** Who started the selected run (ADR-0078), as one line; null when the page does not know it. */
+  starter: string | null;
+  /** "older Assembly · <hash>" for a run on an Assembly that is not the current one (ADR-0069). */
+  older: string | null;
+  /** The page's Caller may cancel the selected run, and it is live (ADR-0032). */
+  canCancel: boolean;
   api: AppApi;
 }): JSX.Element {
-  const { view, run, selectedNodeId, gates, waiting, held, failure, api } = props;
+  const { view, run, selectedNodeId, gates, waiting, held, failure, starter, older, canCancel, api } = props;
   const canvasRef = useRef<HTMLElement>(null);
   const svgRef = useRef<SVGSVGElement>(null);
 
@@ -69,6 +75,9 @@ export function MachinePane(props: {
     h("div", { id: "error", hidden: !view.note, class: view.note?.notice ? "notice" : "" }, view.note?.text ?? ""),
     dispatchedStrip(run),
     startedStrip(run),
+    starterStrip(starter),
+    olderStrip(older),
+    run && canCancel ? h(RunControls, { key: run.runId, runId: run.runId, api }) : null,
     rootTransitionStrip(view.doc),
     seatsPanel(view.doc),
     failureStrip(failure),
@@ -98,6 +107,48 @@ function startedStrip(run: ObservedRun | null): JSX.Element | null {
   return h("div", { id: "dispatched", class: "dim", style: { margin: "8px 28px 0", fontFamily: "var(--mono)" } }, text);
 }
 
+/** Who started the selected run (ADR-0078): a Caller, a run through a `dispatch`, or jr2. On the
+ *  run's guarded status, so here only for a Caller with `read`. */
+function starterStrip(text: string | null): JSX.Element | null {
+  if (!text) return null;
+  return h("div", { id: "started-by", class: "dim", style: { margin: "8px 28px 0", fontFamily: "var(--mono)" } }, text);
+}
+
+/** The mark of a run on an older Assembly (ADR-0069): the graph below is the run's own Machine,
+ *  not the current one. Open structure, so it shows for every viewer. */
+function olderStrip(text: string | null): JSX.Element | null {
+  if (!text) return null;
+  return h("div", { id: "older-assembly", class: "notice-line", style: { margin: "8px 28px 0" } }, text);
+}
+
+/**
+ * The control on the selected live run that its Caller's `cancel` opens (ADR-0032). Keyed by run,
+ * so a new selection starts clean. The Steering box is in the bottom drawer, beside the Agent slot
+ * it steers. A refusal shows where the person clicked, as the forms do.
+ */
+function RunControls(props: { runId: string; api: AppApi }): JSX.Element {
+  const { runId, api } = props;
+  const [note, setNote] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const cancel = (): void => {
+    if (!confirm(`Cancel run ${runId.slice(0, 8)}?`)) return;
+    setBusy(true);
+    setNote(null);
+    void api.cancelRun(runId).then((failure) => {
+      setBusy(false);
+      setNote(failure ? `cancel refused: ${failure}` : null);
+    });
+  };
+
+  return h(
+    "div",
+    { id: "run-controls", style: { margin: "8px 28px 0", maxWidth: "720px" } },
+    h("button", { id: "cancel-run", disabled: busy, onClick: cancel }, "cancel run"),
+    h("div", { id: "run-controls-note", class: "form-error", hidden: note === null }, note ?? ""),
+  );
+}
+
 /** Machine-level transitions ("from any state") as the strip above the Machine — an edge from the
  *  root would lie, because the root has no box (it renders as the page). */
 function rootTransitionStrip(doc: MachineDoc | null): JSX.Element {
@@ -192,8 +243,9 @@ function waitingStrip(waiting: WaitingLine[]): JSX.Element {
   );
 }
 
-/** The selected run's outstanding picks (ADR-0024): the Agent, its pick, and since when it is held.
- *  A held Turn has no default time bound, so this is where a human sees one that waits too long.
+/** The selected run's outstanding picks (ADR-0024): the Agent, its pick, and since when it is
+ *  outstanding. A held Turn has no default time bound, so this is where a human sees one that waits
+ *  too long.
  *  Guarded like the waiting strip: here only with a live token. */
 function heldStrip(held: HeldLine[]): JSX.Element {
   return h(
@@ -204,7 +256,11 @@ function heldStrip(held: HeldLine[]): JSX.Element {
         "li",
         { key: `${line.agent} ${line.pick}` },
         h("span", { class: "held-head" }, `${line.agent || "Agent"}'s pick ${line.pick} runs`),
-        h("span", { class: "dim", title: line.since }, ` held since ${new Date(line.since).toLocaleTimeString()}`),
+        h(
+          "span",
+          { class: "dim", title: line.since },
+          ` outstanding since ${new Date(line.since).toLocaleTimeString()}`,
+        ),
       ),
     ),
   );