@h-rig/omp-extension-plugin 0.0.6-alpha.190 → 0.0.6-alpha.192

package/dist/src/cockpit/extension.js

@@ -21,7 +21,7 @@ import { DOCTOR } from "@rig/contracts";
 import { RIG_COCKPIT_PANEL_SLOT } from "@rig/contracts";
 import { defineCapability } from "@rig/core/capability";
 import { loadCapabilityForRoot, requireCapabilityForRoot } from "@rig/core/capability-loaders";
-import { isKeyRelease, matchesKey } from "@oh-my-pi/pi-tui";
+import { isKeyRelease, matchesKey, parseSgrMouse } from "@oh-my-pi/pi-tui";
 import { Duration, Effect, Fiber, Stream } from "effect";
 
 // packages/omp-extension-plugin/src/cockpit/board-views.ts
@@ -29,6 +29,7 @@ import { truncateToWidth } from "@oh-my-pi/pi-tui";
 import {
   accent,
   accentDim,
+  bgPanel,
   bold,
   cyan,
   ink,
@@ -36,10 +37,6 @@ import {
   ink3,
   ink4,
   red,
-  DRONE_WIDTH,
-  renderDroneFrame,
-  renderMicroDroneFrame,
-  RIG_SPINNER_FRAMES,
   screenGlyph,
   sectionDivider,
   statusColor,
@@ -51,11 +48,13 @@ import {
 function hairline(width) {
   return ink4("\u2500".repeat(Math.max(0, width)));
 }
+
 class BoardSettingsList {
   items = [];
   selected = 0;
   title = "";
   emptyMessage = "nothing to show";
+  #rowToIndex = new Map;
   setItems(items) {
     this.items = [...items];
     if (!this.selectableAt(this.selected))
@@ -86,44 +85,77 @@ class BoardSettingsList {
   selectedItem() {
     return this.selectableAt(this.selected) ? this.items[this.selected] : null;
   }
+  hitTest(line) {
+    const index = this.#rowToIndex.get(line);
+    return index !== undefined && this.selectableAt(index) ? index : undefined;
+  }
+  selectIndex(index) {
+    if (!this.selectableAt(index))
+      return false;
+    const moved = this.selected !== index;
+    this.selected = index;
+    return moved;
+  }
   invalidate() {}
   render(width) {
     return this.renderLines(width).map((line) => truncateToWidth(line, Math.max(10, width - 1)));
   }
   renderLines(width) {
+    this.#rowToIndex.clear();
     if (this.items.length === 0) {
       return ["", ` ${ink2(this.emptyMessage)}`, ""];
     }
-    const maxVisible = Math.max(8, Math.min(16, (process.stdout.rows ?? 30) - 10));
+    const maxVisible = Math.max(8, Math.min(18, (process.stdout.rows ?? 30) - 10));
     const start = Math.max(0, Math.min(this.selected - Math.floor(maxVisible / 2), this.items.length - maxVisible));
     const window = this.items.slice(start, start + maxVisible);
-    const valueWidth = Math.min(24, Math.max(10, Math.floor(width * 0.24)));
-    const labelWidth = Math.min(24, Math.max(10, Math.floor(width * 0.26)));
-    const lines = window.flatMap((item, index) => {
+    const labelWidth = Math.min(28, Math.max(10, ...window.map((item) => {
+      const navGlyph = item.id.startsWith("to:") ? 2 : 0;
+      return item.label.length + navGlyph;
+    })));
+    const actionWidth = Math.max(0, ...window.map((item) => item.values?.[0] && item.values[0] !== item.currentValue ? item.values[0].length + 2 : 0));
+    const valueWidth = Math.max(12, width - labelWidth - actionWidth - 8);
+    const lines = [""];
+    for (let index = 0;index < window.length; index += 1) {
+      const item = window[index];
       const absolute = start + index;
       const isSelected = absolute === this.selected;
-      const marker = isSelected ? accent("\u258C") : " ";
+      if (item.id === "title") {
+        lines.push(` ${accent("\u258D")}${bold(ink(item.label))}${item.currentValue ? `  ${ink3(item.currentValue)}` : ""}`);
+        if (item.description)
+          lines.push(`  ${ink4(truncateToWidth(item.description, Math.max(12, width - 4)))}`);
+        lines.push("");
+        continue;
+      }
+      if (item.heading && !item.currentValue) {
+        lines.push(sectionDivider(item.label.toLowerCase(), width));
+        continue;
+      }
       const navGlyph = item.id.startsWith("to:") ? `${screenGlyph(item.id.slice(3))} ` : "";
-      const labelText = truncateToWidth(`${navGlyph}${item.label}`, labelWidth).padEnd(labelWidth);
-      const isTitle = item.id === "title";
+      const labelPlain = truncateToWidth(`${navGlyph}${item.label}`, labelWidth).padEnd(labelWidth);
       const isStatus = item.id.endsWith(":status");
-      const label = isTitle ? accent(labelText) : isSelected ? ink(labelText) : item.heading ? ink3(labelText) : ink2(labelText);
-      const value = !item.currentValue ? ink4("".padEnd(valueWidth)) : isStatus ? statusColor(item.currentValue)(truncateToWidth(`${statusGlyph(item.currentValue)} ${item.currentValue}`, valueWidth).padEnd(valueWidth)) : item.heading ? ink2(truncateToWidth(item.currentValue, valueWidth).padEnd(valueWidth)) : ink3(truncateToWidth(item.currentValue, valueWidth).padEnd(valueWidth));
-      const action = item.values?.[0] && item.values[0] !== item.currentValue ? isSelected ? accent(item.values[0]) : accentDim(item.values[0]) : "";
-      const row = `${marker} ${label} ${value}${action ? ` ${action}` : ""}`;
+      const valuePlain = truncateToWidth(item.currentValue ?? "", valueWidth).padEnd(valueWidth);
+      const label = isSelected ? ink(labelPlain) : item.heading ? ink3(labelPlain) : ink2(labelPlain);
+      const value = !item.currentValue ? ink4(valuePlain) : isStatus ? statusColor(item.currentValue)(truncateToWidth(`${statusGlyph(item.currentValue)} ${item.currentValue}`, valueWidth).padEnd(valueWidth)) : item.heading ? ink2(valuePlain) : ink3(valuePlain);
+      const actionText = item.values?.[0] && item.values[0] !== item.currentValue ? item.values[0] : "";
+      const action = actionText ? isSelected ? accent(`${actionText} \u203A`) : accentDim(actionText) : "";
+      const rail = isSelected ? accent("\u258C") : " ";
+      const body = `${rail} ${label}  ${value}${action ? ` ${action}` : ""}`;
+      if (!item.heading)
+        this.#rowToIndex.set(lines.length, absolute);
+      lines.push(isSelected ? bgPanel(body) : body);
       if (isSelected && item.description) {
-        return [row, `   ${ink4(truncateToWidth(item.description, Math.max(12, width - 5)))}`];
+        if (!item.heading)
+          this.#rowToIndex.set(lines.length, absolute);
+        lines.push(`   ${ink4("\u21B3")} ${ink4(truncateToWidth(item.description, Math.max(12, width - 6)))}`);
       }
-      return [row];
-    });
+    }
     const meta = [];
     if (this.items.length > maxVisible)
-      meta.push(`${this.selected + 1}/${this.items.length}`);
-    if (this.title)
-      meta.push(this.title);
+      meta.push(`${this.selected + 1} of ${this.items.length}`);
     if (meta.length > 0)
-      lines.push(ink4(`   ${meta.join("  \xB7  ")}`));
-    return ["", ...lines, ""];
+      lines.push("", ink4(`   ${meta.join("  \xB7  ")}`));
+    lines.push("");
+    return lines;
   }
 }
 class HelpView {
@@ -207,6 +239,7 @@ class DetailComposer {
   selected = 0;
   tick = 0;
   bodyScroll = 0;
+  #lineToAction = new Map;
   setModel(model) {
     const prevId = this.enabledActions()[this.selected]?.id;
     this.model = model;
@@ -231,6 +264,17 @@ class DetailComposer {
   selectedAction() {
     return this.enabledActions()[this.selected] ?? null;
   }
+  hitTestAction(line) {
+    return this.#lineToAction.get(line);
+  }
+  selectAction(index) {
+    const count = this.enabledActions().length;
+    if (index < 0 || index >= count)
+      return false;
+    const moved = this.selected !== index;
+    this.selected = index;
+    return moved;
+  }
   scrollBody(delta) {
     this.bodyScroll = Math.max(0, this.bodyScroll + delta);
   }
@@ -260,21 +304,45 @@ class DetailComposer {
     }
     if (model.stages && model.stages.length > 0) {
       bottom.push(sectionDivider("pipeline", width));
-      const parts = model.stages.map((stage) => `${statusColor(stage.status)(statusGlyph(stage.status))} ${ink3(stage.label)}`);
-      bottom.push(truncateToWidth(`  ${parts.join(ink4(" \u2192 "))}`, inner));
+      let linePlain = " ";
+      let linePainted = " ";
+      for (let i = 0;i < model.stages.length; i += 1) {
+        const stage = model.stages[i];
+        const sepPlain = linePlain.trim().length > 0 ? " \u2192 " : " ";
+        const cellPlain = `${sepPlain}? ${stage.label}`;
+        if (linePlain.length + cellPlain.length > inner - 2 && linePlain.trim().length > 0) {
+          bottom.push(linePainted);
+          linePlain = "   ";
+          linePainted = "   ";
+        }
+        const sep = linePlain.trim().length > 0 ? ink4(" \u2192 ") : " ";
+        linePlain += cellPlain;
+        linePainted += `${sep}${statusColor(stage.status)(statusGlyph(stage.status))} ${ink3(stage.label)}`;
+      }
+      if (linePainted.trim().length > 0)
+        bottom.push(linePainted);
       bottom.push("");
     }
+    const actionLines = [];
     if (model.actions.length > 0) {
       bottom.push(sectionDivider("actions", width));
       const selId = this.selectedAction()?.id;
+      let enabledIndex = -1;
       for (const action of model.actions) {
         const on = action.enabled !== false;
+        if (on)
+          enabledIndex += 1;
         const isSel = on && action.id === selId;
         const rail = isSel ? accent("\u258C") : " ";
         const labelText = `${action.glyph ? `${action.glyph} ` : ""}${action.label}`;
         const label = !on ? ink4(labelText) : action.danger ? red(labelText) : isSel ? accent(labelText) : ink2(labelText);
         const tail = !on ? ink4(action.value ?? "unavailable") : isSel ? ink3(action.hint ?? action.value ?? "") : ink3(action.value ?? "");
-        bottom.push(`${rail} ${label}${tail ? `  ${tail}` : ""}`);
+        const row = `${rail} ${label}${tail ? `  ${tail}` : ""}`;
+        if (on)
+          actionLines.push(enabledIndex);
+        else
+          actionLines.push(-1);
+        bottom.push(isSel ? bgPanel(row) : row);
       }
     }
     const body = [];
@@ -299,16 +367,31 @@ class DetailComposer {
       }
     }
     const out = [...top, ...body, ...bottom];
+    const mapActions = (linesOut) => {
+      this.#lineToAction.clear();
+      if (actionLines.length === 0)
+        return;
+      const actionCount = model.actions.length;
+      const firstActionLine = linesOut.length - actionCount;
+      for (let i = 0;i < actionCount; i += 1) {
+        const enabledIdx = actionLines[i];
+        if (enabledIdx >= 0)
+          this.#lineToAction.set(firstActionLine + i, enabledIdx);
+      }
+    };
     if (out.length > budget) {
       const keepTail = Math.min(bottom.length, budget - top.length);
-      return [...top, ...out.slice(out.length - keepTail)].map((line) => truncateToWidth(line, Math.max(10, width - 1)));
+      const clipped = [...top, ...out.slice(out.length - keepTail)];
+      mapActions(clipped);
+      return clipped.map((line) => truncateToWidth(line, Math.max(10, width - 1)));
     }
+    mapActions(out);
     return out.map((line) => truncateToWidth(line, Math.max(10, width - 1)));
   }
 }
 
 // packages/omp-extension-plugin/src/cockpit/extension.ts
-import { accent as accent2, accentDim as accentDim2, bold as bold2, cyan as cyan2, ink as ink5, ink2 as ink22, ink3 as ink32, ink4 as ink42, red as red2, RIG_SPINNER_FRAMES as RIG_SPINNER_FRAMES2, screenGlyph as screenGlyph2 } from "@rig/std-shared/board-theme";
+import { accent as accent2, accentDim as accentDim2, bgPanel as bgPanel2, bold as bold2, cyan as cyan2, ink as ink5, ink2 as ink22, ink3 as ink32, ink4 as ink42, keyHints, red as red2, RIG_SPINNER_FRAMES, screenGlyph as screenGlyph2, yellow as yellow2 } from "@rig/std-shared/board-theme";
 
 // packages/omp-extension-plugin/src/cockpit/drone-preloader.ts
 var ART = [
@@ -529,8 +612,8 @@ class DronePreloaderComponent {
 
 // packages/omp-extension-plugin/src/cockpit/screen-catalog.ts
 var DEFAULT_SCREEN_CATALOG = [
-  { id: "cockpit", title: "Project Cockpit", shortcut: { key: "g", description: "Rig cockpit" } },
-  { id: "task-detail", title: "Task Detail" },
+  { id: "cockpit", title: "Cockpit", label: "cockpit", shortcut: { key: "g", description: "Rig cockpit" } },
+  { id: "task-detail", title: "Task Detail", label: "task detail" },
   { id: "run-detail", title: "Run Detail", label: "run detail" }
 ];
 function buildScreenFromPanel(panel) {
@@ -569,9 +652,6 @@ function findScreen(catalog, screen) {
 function isRigScreen(value, catalog = DEFAULT_SCREEN_CATALOG) {
   return typeof value === "string" && catalog.some((screen) => screen.id === value);
 }
-function screenTitle(screen, catalog = DEFAULT_SCREEN_CATALOG) {
-  return findScreen(catalog, screen)?.title ?? screen;
-}
 function screenLabel(screen, catalog = DEFAULT_SCREEN_CATALOG) {
   const descriptor = findScreen(catalog, screen);
   return descriptor?.label ?? descriptor?.id ?? screen;
@@ -1323,17 +1403,6 @@ async function runCollabDoctor(ctx) {
   ]);
 }
 var commandFlowActions = defaultFlowActions;
-function sessionDescription(run) {
-  const id = run.runId.slice(0, 8);
-  const cwd = run.collabCwd || run.worktreePath || run.sessionPath || "(unknown cwd)";
-  const link = collabLinks(run);
-  return link ? `${id} \xB7 ${cwd} \xB7 ${link}` : `${id} \xB7 ${cwd}`;
-}
-function collabLinks(run) {
-  const join = run.joinLink ? `joinLink ${run.joinLink}` : "";
-  const web = run.webLink ? `webLink ${run.webLink}` : "";
-  return join && web ? `${join} \xB7 ${web}` : join || web || "";
-}
 function findRunById(runs, runId) {
   if (!runId)
     return null;
@@ -1361,15 +1430,30 @@ function runListActionHints(run, source) {
 function serverLabel(server) {
   return server?.alias?.trim() || "unselected";
 }
-function nextStepHint(server, runs, state) {
+function nextStep(server, runs, state) {
   if (!server)
-    return "next: Server";
-  if (runs.some((run) => {
+    return { screen: "server", label: "choose where runs execute", detail: "no target selected \u2014 open Server" };
+  const live = liveRunCount(runs, state);
+  if (live > 0)
+    return { screen: "runs", label: `watch the fleet \u2014 ${live} live`, detail: "open Runs for live status, steer, and gates" };
+  return { screen: "tasks", label: "pick a task and dispatch", detail: `read ${server.taskSource ?? "the task source"} and send a drone at one` };
+}
+function liveRunCount(runs, state) {
+  let count = 0;
+  for (const run of runs) {
     const classification = state.runClassifications?.get(run.runId);
-    return classification ? classification.isActive && !classification.isTerminal : false;
-  }))
-    return "next: Runs";
-  return "next: Tasks";
+    if (classification && classification.isActive && !classification.isTerminal)
+      count += 1;
+  }
+  return count;
+}
+function attentionRunCount(runs, state) {
+  let count = 0;
+  for (const run of runs) {
+    if (state.runClassifications?.get(run.runId)?.isNeedsAttention)
+      count += 1;
+  }
+  return count;
 }
 function taskDetailModel(state, server, projection) {
   const task = state.selectedTask ?? null;
@@ -1427,8 +1511,8 @@ function runDetailModel(run, source) {
     ref: `RUN ${shortId}`,
     title: run.title || `Run ${shortId}`,
     status,
-    body: run.errorSummary || sessionDescription(run),
-    bodyLabel: "summary",
+    body: run.errorSummary || (classification.isTerminal ? `This run is ${status}. The facts below are its record; recovery actions appear when the read-model offers them.` : `Live ${run.source === "remote" ? "remote" : "local"} run. JOIN attaches this terminal to its OMP session; STEER drops a message into the agent's queue; gates resolve right here.`),
+    bodyLabel: run.errorSummary ? "error" : "run",
     facts: [
       ...run.taskId ? [{ label: "task", value: run.taskId }] : [],
       { label: "cwd", value: run.collabCwd || run.worktreePath || run.sessionPath || "(unknown cwd)" },
@@ -1460,11 +1544,20 @@ function runDetailModel(run, source) {
 function cockpitNavValue(screen, server, runs, state) {
   switch (screen) {
     case "server":
-      return serverLabel(server);
+      return server ? `${serverLabel(server)} \xB7 ${server.kind === "remote" ? "remote" : "this checkout"}` : "unselected";
     case "tasks":
       return server?.taskSource ?? "configured source";
-    case "runs":
-      return String(runs.length);
+    case "runs": {
+      const live = liveRunCount(runs, state);
+      const attention = attentionRunCount(runs, state);
+      if (runs.length === 0)
+        return "none yet";
+      const parts = [`${live} live`];
+      if (attention > 0)
+        parts.push(`${attention} waiting on you`);
+      parts.push(`${runs.length} total`);
+      return parts.join(" \xB7 ");
+    }
     default:
       return "";
   }
@@ -1474,36 +1567,38 @@ function cockpitNavRows(server, runs, state, catalog) {
     id: `to:${screen}`,
     label: nav.label,
     currentValue: cockpitNavValue(screen, server, runs, state),
-    values: ["\u203A"],
+    values: ["open"],
     description: nav.description
   }));
 }
-function itemsFor(screen, runs, actionRowsEnabled, _selectedRunId, state = {}, catalog = DEFAULT_SCREEN_CATALOG, projection = defaultCockpitCapabilities.taskProjection) {
+function itemsFor(screen, runs, actionRowsEnabled, _selectedRunId, state = {}, catalog = DEFAULT_SCREEN_CATALOG, _projection = defaultCockpitCapabilities.taskProjection) {
   const server = state.server ?? null;
-  const projectRoot = state.projectRoot ?? rigProjectRoot();
   const loadError = state.error?.trim();
   if (screen === "task-detail" || screen === "run-detail")
     return [];
   if (loadError) {
     return [
-      { id: "title", label: screenTitle(screen, catalog), currentValue: "load failed", heading: true },
-      { id: `${screen}:error`, label: "LOAD FAILED", currentValue: "error", heading: true, description: loadError }
+      { id: "title", label: screenLabel(screen, catalog), currentValue: "couldn't load", heading: true, description: loadError },
+      { id: `${screen}:retry`, label: "RETRY", currentValue: "reload this screen", values: ["retry"], description: "press enter (or r) to reload \u2014 esc returns to the cockpit" }
     ];
   }
   switch (screen) {
-    case "cockpit":
+    case "cockpit": {
+      const step = nextStep(server, runs, state);
       return [
-        { id: "title", label: screenTitle("cockpit", catalog), currentValue: "", heading: true },
-        { id: "next", label: "NEXT", currentValue: nextStepHint(server, runs, state), heading: true, description: "guided path: Server \u2192 Tasks \u2192 Detail \u2192 Dispatch \u2192 Run Detail" },
+        { id: "title", label: "cockpit", currentValue: "operate the drones", heading: true, description: "the loop: choose a target \xB7 dispatch tasks \xB7 watch runs land" },
+        { id: `to:${step.screen}`, label: "NEXT", currentValue: step.label, values: ["go"], description: step.detail },
+        { id: "sec:screens", label: "SCREENS", currentValue: "", heading: true },
         ...cockpitNavRows(server, runs, state, catalog)
       ];
+    }
     default: {
       const producedRows = state.panelRows ?? [];
       if (producedRows.length > 0)
         return [...producedRows];
       return [
-        { id: "title", label: screenTitle(screen, catalog), currentValue: "unavailable", heading: true },
-        { id: `${screen}:unavailable`, label: "UNAVAILABLE", currentValue: "reload", values: ["reload"], heading: true, description: "This screen's content could not be loaded right now \u2014 press r to reload." }
+        { id: "title", label: screenLabel(screen, catalog), currentValue: "nothing here yet", heading: true, description: "this screen's owner produced no content" },
+        { id: `${screen}:retry`, label: "RETRY", currentValue: "reload this screen", values: ["retry"], description: "press enter (or r) to reload \u2014 esc returns to the cockpit" }
       ];
     }
   }
@@ -1540,6 +1635,7 @@ class RigFlowComponent {
   #refreshing = false;
   #busyDepth = 0;
   #animationTimer;
+  #frame = { tabsLine: -1, viewStart: -1, viewEnd: -1, tabs: [] };
   constructor(tui, api, done, onQuit, screen, runs, state, refreshRuns, refreshState, actions, actionRowsEnabled, catalog = DEFAULT_SCREEN_CATALOG, caps = defaultCockpitCapabilities, helpCatalog) {
     this.tui = tui;
     this.api = api;
@@ -1653,10 +1749,13 @@ class RigFlowComponent {
       this.#genericView.setItems(itemsFor(genericScreen, this.#runs, this.actionRowsEnabled, this.#selectedRunId, this.#state, this.catalog, this.caps.taskProjection));
     }
     if (this.#view === "task-detail") {
-      this.#detailComposer.setModel(this.#state.error ? { screen: "task-detail", icon: screenGlyph2("task-detail"), ref: "TASK", title: "Task failed to load", body: this.#state.error, bodyLabel: "error", facts: [{ label: "hint", value: "Refresh or return to Tasks." }], actions: [] } : taskDetailModel(this.#state, this.#state.server ?? null, this.caps.taskProjection));
+      const loadedId = this.caps.taskProjection.id(this.#state.selectedTask ?? null);
+      const pendingId = this.#selectedTaskId;
+      const stillLoading = Boolean(pendingId) && loadedId !== pendingId;
+      this.#detailComposer.setModel(this.#state.error ? { screen: "task-detail", icon: screenGlyph2("task-detail"), ref: "TASK", title: "Task failed to load", body: this.#state.error, bodyLabel: "error", facts: [{ label: "hint", value: "r reloads \xB7 \u2190 returns to Tasks" }], actions: [] } : stillLoading ? { screen: "task-detail", icon: screenGlyph2("task-detail"), ref: `TASK ${pendingId}`, title: `Fetching task ${pendingId}\u2026`, body: "Reading the full task from the task source.", bodyLabel: "loading", facts: [], actions: [] } : taskDetailModel(this.#state, this.#state.server ?? null, this.caps.taskProjection));
     } else if (this.#view === "run-detail") {
       const run = findRunById(this.#runs, this.#selectedRunId);
-      this.#detailComposer.setModel(this.#state.error ? { screen: "run-detail", icon: screenGlyph2("run-detail"), ref: "RUN", title: "Run failed to load", body: this.#state.error, bodyLabel: "error", facts: [{ label: "hint", value: "Refresh or return to Runs." }], actions: [] } : run ? runDetailModel(run, this.#state) : { screen: "run-detail", icon: screenGlyph2("run-detail"), ref: "RUN", title: "Run unavailable", facts: [{ label: "hint", value: "The selected run is no longer discoverable; back to Runs." }], actions: [] });
+      this.#detailComposer.setModel(this.#state.error ? { screen: "run-detail", icon: screenGlyph2("run-detail"), ref: "RUN", title: "Run failed to load", body: this.#state.error, bodyLabel: "error", facts: [{ label: "hint", value: "r reloads \xB7 \u2190 returns to Runs" }], actions: [] } : run ? runDetailModel(run, this.#state) : { screen: "run-detail", icon: screenGlyph2("run-detail"), ref: "RUN", title: "Run unavailable", facts: [{ label: "hint", value: "The selected run is no longer discoverable; \u2190 returns to Runs." }], actions: [] });
     }
     for (const view of this.#domainViews.values())
       view.setTick(this.#tick);
@@ -1675,14 +1774,16 @@ class RigFlowComponent {
   #setView(next) {
     this.#view = next;
     this.#notice = null;
+    this.#error = "";
     this.#feedViews();
     this.tui.requestRender();
   }
   async#navigate(next, push = true) {
-    if (push && this.#view !== "help")
+    if (push && this.#view !== "help" && this.#view !== next)
       this.#screenStack.push(this.#view);
     this.#view = next;
     this.#notice = null;
+    this.#error = "";
     const endBusy = this.#beginBusy();
     try {
       await this.#refreshCurrent();
@@ -1705,10 +1806,9 @@ class RigFlowComponent {
     if (this.#view !== "help") {
       const loadedState = await this.refreshState(this.#view, this.#selectedTaskId, this.#runs);
       this.#state = runLoadError ? { ...loadedState, error: loadedState.error ? `${runLoadError}; ${loadedState.error}` : runLoadError } : loadedState;
-      if (this.#state.error)
-        this.#error = this.#state.error;
-    } else if (runLoadError) {
-      this.#error = runLoadError;
+      this.#error = this.#state.error ?? "";
+    } else {
+      this.#error = runLoadError ?? "";
     }
     this.#feedViews();
     this.tui.requestRender();
@@ -1732,45 +1832,105 @@ class RigFlowComponent {
       endBusy();
     }
   }
-  #headerLine() {
-    const crumb = this.#view === "help" ? ` ${ink42("\u203A")} ${ink22("help")}` : ` ${ink42("\u203A")} ${ink22(screenLabel(this.#view, this.catalog))}`;
-    return ` ${accent2("\u258D")}${bold2(ink5("rig"))} ${ink32("\u2014 operate the drones")}${crumb}   ${ink42("\xB7")} ${cyan2(this.#serverLabel)}`;
+  #tabScreens() {
+    return [
+      { screen: "cockpit", label: "cockpit" },
+      ...cockpitNavScreens(this.catalog).map(({ screen, nav }) => ({ screen, label: nav.label.toLowerCase() }))
+    ];
+  }
+  #tabFor(view) {
+    if (view === "run-detail")
+      return "runs";
+    if (view === "task-detail")
+      return "tasks";
+    if (view === "help")
+      return "cockpit";
+    return view;
+  }
+  #headerLine(width) {
+    const screenName = this.#view === "help" ? "help" : screenLabel(this.#view, this.catalog).toLowerCase();
+    const project = (this.#state.projectRoot ?? rigProjectRoot()).split("/").filter(Boolean).pop() ?? "";
+    const live = liveRunCount(this.#runs, this.#state);
+    const attention = attentionRunCount(this.#runs, this.#state);
+    const dotPaint = attention > 0 ? yellow2 : live > 0 ? accent2 : ink42;
+    const rightPlain = `\u25CF ${this.#serverLabel}${project ? ` \xB7 ${project}` : ""}`;
+    const rightPainted = `${dotPaint("\u25CF")} ${cyan2(this.#serverLabel)}${project ? ` ${ink42("\xB7")} ${ink32(project)}` : ""}`;
+    const leftPlain = ` \u258Drig ${screenName}`;
+    const pad = Math.max(1, width - leftPlain.length - rightPlain.length - 1);
+    return ` ${accent2("\u258D")}${bold2(ink5("rig"))} ${ink22(screenName)}${" ".repeat(pad)}${rightPainted}`;
+  }
+  #tabsLine(width) {
+    const tabs = this.#tabScreens();
+    const active = this.#tabFor(this.#view);
+    this.#frame.tabs = [];
+    let out = " ";
+    let plainLength = 1;
+    for (let index = 0;index < tabs.length; index += 1) {
+      const tab = tabs[index];
+      const text = ` ${index + 1} ${tab.label} `;
+      this.#frame.tabs.push({ screen: tab.screen, start: plainLength, end: plainLength + text.length - 1 });
+      out += tab.screen === active ? bgPanel2(`${accent2(` ${index + 1}`)} ${bold2(ink5(`${tab.label} `))}`) : `${ink42(` ${index + 1}`)} ${ink32(`${tab.label} `)}`;
+      plainLength += text.length;
+      out += " ";
+      plainLength += 1;
+    }
+    const helpPlain = "? help";
+    const pad = Math.max(1, width - plainLength - helpPlain.length - 1);
+    return `${out}${" ".repeat(pad)}${accent2("?")}${ink32(" help")}`;
   }
   #noticeText() {
     if (!this.#notice)
       return null;
-    const prefix = this.#busyDepth > 0 ? `${RIG_SPINNER_FRAMES2[this.#tick % RIG_SPINNER_FRAMES2.length]} ` : "";
+    const prefix = this.#busyDepth > 0 ? `${RIG_SPINNER_FRAMES[this.#tick % RIG_SPINNER_FRAMES.length]} ` : "";
     return `${prefix}${this.#notice}`;
   }
-  #footerLines() {
+  #footerLines(width) {
     if (this.#inputLine) {
       const line = this.#inputLine;
       const label = line.kind === "search" ? `${accent2("/")}${ink5(line.buffer)}` : `${accentDim2("steer")} ${ink32(`(${line.run.runId.slice(0, 8)})`)} ${accent2("\u276F")} ${ink5(line.buffer)}`;
       return [
         ` ${label}${accent2("\u2588")}`,
-        ` ${accent2("enter")}${ink32(line.kind === "search" ? " keep filter" : " send steer")}  ${accent2("esc")}${ink32(line.kind === "search" ? " clear" : " cancel")}`
+        keyHints(line.kind === "search" ? [["enter", "keep filter"], ["esc", "clear"]] : [["enter", "send"], ["esc", "cancel"]])
+      ];
+    }
+    if (this.#error) {
+      const message = this.#error.length > width - 6 ? `${this.#error.slice(0, Math.max(8, width - 7))}\u2026` : this.#error;
+      return [
+        ` ${red2("\u2717")} ${red2(message)}`,
+        keyHints([["esc", "dismiss"], ["r", "retry"], ["q", "quit"]])
+      ];
+    }
+    const notice = this.#noticeText();
+    if (this.#view === "help") {
+      return [
+        ` ${notice ? accentDim2(notice) : ink42("every key on every screen")}`,
+        keyHints([["\u2191\u2193", "scroll"], ["\u2190", "back"], ["esc", "cockpit"], ["q", "quit"]])
       ];
     }
-    if (this.#error)
-      return [` ${red2(`error: ${this.#error}`)}`, ` ${accent2("esc")}${ink32(" cockpit")}  ${accent2("q")}${ink32(" quit")}`];
-    if (this.#view === "help")
-      return [` ${accent2("\u2190")}${ink32(" back")}  ${accent2("esc")}${ink32(" cockpit")}  ${accent2("q")}${ink32(" quit")}`];
     const domainFooter = this.#domainViews.get(this.#view)?.footer;
     if (domainFooter)
-      return domainFooter(this.#noticeText());
+      return domainFooter(notice);
     if (this.#view === "task-detail" || this.#view === "run-detail") {
       const isTask = this.#view === "task-detail";
-      const notice2 = this.#noticeText();
-      const hint = notice2 ? accentDim2(notice2) : ink42(isTask ? "review the task, then dispatch" : "live run controls");
+      const hint = notice ? accentDim2(notice) : ink42(isTask ? "read it, then send a drone at it" : "live run controls \u2014 resolve gates in place");
       return [
         ` ${hint}`,
-        ` ${accent2("\u2191\u2193")}${ink32(" action")}  ${accent2("enter")}${ink32(isTask ? " dispatch" : " run")}  ${accent2("\u21DE\u21DF")}${ink32(" scroll")}  ${accent2("\u2190")}${ink32(" back")}  ${accent2("esc")}${ink32(" cockpit")}  ${accent2("q")}${ink32(" quit")}`
+        keyHints([["\u2191\u2193", "action"], ["enter", isTask ? "dispatch" : "run"], ["\u21DE\u21DF", "scroll"], ["\u2190", "back"], ["q", "quit"]])
       ];
     }
-    const notice = this.#noticeText();
+    if (this.#view === "cockpit") {
+      const live = liveRunCount(this.#runs, this.#state);
+      const attention = attentionRunCount(this.#runs, this.#state);
+      const fleet = this.#runs.length === 0 ? "fleet idle \u2014 dispatch something" : `${live} live \xB7 ${attention} waiting on you \xB7 ${this.#runs.length} total`;
+      return [
+        ` ${notice ? accentDim2(notice) : ink42(fleet)}`,
+        keyHints([["\u2191\u2193", "move"], ["enter", "open"], ["1-9", "jump"], ["?", "help"], ["q", "quit"]])
+      ];
+    }
+    const purpose = this.catalog.find((entry) => entry.id === this.#view)?.nav?.description ?? "";
     return [
-      ` ${notice ? accentDim2(notice) : ink42(`screen: ${screenLabel(this.#view, this.catalog)}`)}`,
-      ` ${accent2("\u2191\u2193")}${ink32(" move")}  ${accent2("enter")}${ink32(" act/open")}  ${accent2("\u2190")}${ink32(" back")}  ${accent2("esc")}${ink32(" cockpit")}  ${accent2("q")}${ink32(" quit")}`
+      ` ${notice ? accentDim2(notice) : ink42(purpose || screenLabel(this.#view, this.catalog))}`,
+      keyHints([["\u2191\u2193", "move"], ["enter", "act"], ["r", "reload"], ["\u2190", "back"], ["esc", "cockpit"], ["q", "quit"]])
     ];
   }
   async#attach(runId) {
@@ -1781,21 +1941,6 @@ class RigFlowComponent {
     if (!this.#error)
       this.done();
   }
-  async#stop(run) {
-    this.#notice = `stop requested for ${run.runId.slice(0, 8)}\u2026`;
-    this.tui.requestRender();
-    await this.#runAction(() => this.actions.act(`run-stop:${encodeURIComponent(run.runId)}`));
-  }
-  async#pause(run) {
-    this.#notice = `pause requested for ${run.runId.slice(0, 8)}\u2026`;
-    this.tui.requestRender();
-    await this.#runAction(() => this.actions.act(`run-pause:${encodeURIComponent(run.runId)}`));
-  }
-  async#resume(run) {
-    this.#notice = `resume requested for ${run.runId.slice(0, 8)}\u2026`;
-    this.tui.requestRender();
-    await this.#runAction(() => this.actions.act(`run-resume:${encodeURIComponent(run.runId)}`));
-  }
   async#steer(run, message) {
     await this.#runAction(() => this.actions.act(`run-steer:${encodeURIComponent(run.runId)}`, message));
   }
@@ -1829,6 +1974,10 @@ class RigFlowComponent {
       }
       return;
     }
+    if (item.id.endsWith(":retry")) {
+      await this.#runAction(async () => {});
+      return;
+    }
     if (item.id === "config:relayUrl" || item.id.startsWith("stats:") || item.id.startsWith("inspect:audit")) {
       this.#notice = "informational row; no cockpit action";
       this.tui.requestRender();
@@ -1844,12 +1993,15 @@ class RigFlowComponent {
       await this.#runAction((onProgress) => this.actions.act(item.id, undefined, onProgress));
   }
   render(width) {
-    const lines = [this.#headerLine(), hairline(width)];
+    const lines = [this.#headerLine(width), this.#tabsLine(width), hairline(width)];
+    this.#frame.tabsLine = 1;
     const view = this.#view === "help" ? this.#helpView : this.#activeView();
+    this.#frame.viewStart = lines.length;
     for (const line of view.render(width))
       lines.push(line);
+    this.#frame.viewEnd = lines.length - 1;
     lines.push(hairline(width));
-    for (const line of this.#footerLines())
+    for (const line of this.#footerLines(width))
       lines.push(line);
     return lines;
   }
@@ -1859,7 +2011,95 @@ class RigFlowComponent {
     this.#helpView.invalidate();
     this.#genericView.invalidate();
   }
+  #activateDetailAction() {
+    const action = this.#detailComposer.selectedAction();
+    if (!action)
+      return;
+    if (action.id.startsWith("run-steer:")) {
+      const run = findRunById(this.#runs, this.#selectedRunId);
+      if (run) {
+        this.#inputLine = { kind: "steer", buffer: "", run: { runId: run.runId } };
+        this.tui.requestRender();
+      }
+      return;
+    }
+    if (action.id.startsWith("task-detail:dispatch:")) {
+      this.#notice = "dispatch \xB7 starting\u2026";
+      this.tui.requestRender();
+    }
+    if (action.id.startsWith("run-stop:")) {
+      this.#notice = "stop requested\u2026";
+      this.tui.requestRender();
+    }
+    this.#actOnItem({ id: action.id, label: action.label, values: [action.value ?? "go"] });
+  }
+  #handleMouse(event) {
+    if (this.#inputLine)
+      return;
+    const { tabsLine, viewStart, viewEnd, tabs } = this.#frame;
+    if (event.wheel !== null) {
+      if (this.#view === "help")
+        this.#helpView.scroll(event.wheel * 3);
+      else if (this.#view === "task-detail" || this.#view === "run-detail")
+        this.#detailComposer.scrollBody(event.wheel * 2);
+      else {
+        const domainView2 = this.#domainViews.get(this.#view);
+        if (domainView2) {
+          if (!domainView2.handleMouse?.(event, Math.max(0, event.row - viewStart)))
+            return;
+        } else {
+          this.#genericView.moveSelection(event.wheel);
+        }
+      }
+      this.tui.requestRender();
+      return;
+    }
+    if (!event.leftClick)
+      return;
+    if (event.row === tabsLine) {
+      const hit = tabs.find((tab) => event.col >= tab.start && event.col <= tab.end);
+      if (hit && hit.screen !== this.#view)
+        this.#navigate(hit.screen);
+      return;
+    }
+    if (event.row < viewStart || event.row > viewEnd)
+      return;
+    const line = event.row - viewStart;
+    if (this.#view === "help")
+      return;
+    if (this.#view === "task-detail" || this.#view === "run-detail") {
+      const index2 = this.#detailComposer.hitTestAction(line);
+      if (index2 === undefined)
+        return;
+      const moved2 = this.#detailComposer.selectAction(index2);
+      this.tui.requestRender();
+      if (!moved2)
+        this.#activateDetailAction();
+      return;
+    }
+    const domainView = this.#domainViews.get(this.#view);
+    if (domainView) {
+      domainView.handleMouse?.(event, line);
+      return;
+    }
+    const index = this.#genericView.hitTest(line);
+    if (index === undefined)
+      return;
+    const moved = this.#genericView.selectIndex(index);
+    this.tui.requestRender();
+    if (!moved) {
+      const item = this.#genericView.selectedItem();
+      if (item)
+        this.#actOnItem(item);
+    }
+  }
   handleInput(data) {
+    if (data.startsWith("\x1B[<")) {
+      const event = parseSgrMouse(data);
+      if (event)
+        this.#handleMouse(event);
+      return;
+    }
     if (data === "q") {
       this.onQuit();
       return;
@@ -1894,6 +2134,19 @@ class RigFlowComponent {
       this.done();
       return;
     }
+    if (this.#error && matchesKey(data, "escape")) {
+      this.#error = "";
+      this.tui.requestRender();
+      return;
+    }
+    if (/^[1-9]$/.test(data)) {
+      const target = this.#tabScreens()[Number(data) - 1];
+      if (target) {
+        if (target.screen !== this.#view)
+          this.#navigate(target.screen);
+        return;
+      }
+    }
     if (this.#view === "help") {
       if (matchesKey(data, "up") || data === "k")
         this.#helpView.scroll(-1);
@@ -1922,26 +2175,7 @@ class RigFlowComponent {
         return;
       }
       if (matchesKey(data, "enter") || matchesKey(data, "return")) {
-        const action = this.#detailComposer.selectedAction();
-        if (action) {
-          if (action.id.startsWith("run-steer:")) {
-            const run = findRunById(this.#runs, this.#selectedRunId);
-            if (run) {
-              this.#inputLine = { kind: "steer", buffer: "", run: { runId: run.runId } };
-              this.tui.requestRender();
-            }
-            return;
-          }
-          if (action.id.startsWith("task-detail:dispatch:")) {
-            this.#notice = "dispatch \xB7 starting\u2026";
-            this.tui.requestRender();
-          }
-          if (action.id.startsWith("run-stop:")) {
-            this.#notice = "stop requested\u2026";
-            this.tui.requestRender();
-          }
-          this.#actOnItem({ id: action.id, label: action.label, values: [action.value ?? "go"] });
-        }
+        this.#activateDetailAction();
         return;
       }
       if (matchesKey(data, "pageUp")) {