@staix/agent-hub 0.12.19 → 0.12.20

package/src/cli/console-state.ts

@@ -6,18 +6,26 @@ export interface Approval {
 }
 export interface ConsoleEvent { text: string; peer?: string; kind?: string; tone?: Tone }
 export interface ConsoleState {
-  mode: "stream" | "panels"; panel: number; selection: number; approvalIndex: number;
+  mode: "stream" | "panels"; panel: number; selection: number;
+  /** The selected request, by id: a, d and v act on it alone, and it is cleared, never moved, when the request closes. */
+  approvalId?: string;
+  /** The request whose detail is open: always the selected one (see `bound`). */
+  requestDetail?: string;
+  /** A request was selected on arrival once; after that only [ ], j or k select, so a closed selection never moves. */
+  autoSelected?: boolean;
   input: string; editing: boolean; history: string[]; historyIndex: number;
   approvals: Approval[]; events: ConsoleEvent[]; peers: Record<string, any>; budget: Record<string, any>;
-  tasks: any[]; queue: any[]; detail?: string; detailOffset: number; help: boolean; notice: string;
-  peerFilter?: string; kindFilter?: string;
+  tasks: any[]; queue: any[]; detail?: Detail; detailOffset: number; help: boolean; notice: string; noticeAt?: number; noticeTone?: Tone;
+  peerFilter?: string; kindFilter?: string; project?: string;
   confirm?: { type: "permission"; id: string; option: string; peer: string } | { type: "command"; args: string[] };
   optionChoice?: string;
 }
+/** A detail view: text as the stream shows it, or labeled fields. */
+export type Detail = string | Record<string, unknown>;
 export type ConsoleEffect = { type: "exit" } | { type: "permit"; id: string; option?: string } |
-  { type: "command"; args: string[] } | { type: "show"; panel: number; id: string };
+  { type: "command"; args: string[] } | { type: "show"; panel: number; id: string } | { type: "print"; text: string; kind: string; tone?: Tone } | { type: "keys" };
 export function initialConsoleState(panels = false): ConsoleState {
-  return { mode: panels ? "panels" : "stream", panel: 1, selection: 0, approvalIndex: 0,
+  return { mode: panels ? "panels" : "stream", panel: 1, selection: 0,
     input: "", editing: false, history: [], historyIndex: 0, approvals: [], events: [], peers: {}, budget: {}, tasks: [], queue: [], detailOffset: 0, help: false, notice: "" };
 }
 /** Strip terminal controls before any daemon or child output reaches a terminal. Preserve printable Unicode. */
@@ -53,44 +61,166 @@ export function stateTone(state: string): Tone | undefined {
   return undefined;
 }
 const span = (text: unknown, tone?: Tone): Span => ({ text: String(text ?? ""), ...(tone ? { tone } : {}) });
-/** Clip only sanitized plain text, then retain the tones of the surviving prefix. */
+/** One line of sanitized text: a newline or a tab becomes a space, as wrap() counts a tab (stringWidth("\t") is 0). */
+const flat = (value: unknown) => terminalText(value).replace(/[\n\t]/g, " ");
+/**
+ * Clip sanitized plain text to the width and keep the tones of the surviving prefix. Widths are measured as paint()
+ * prints them: paint() sanitizes each span again, and a cut that ends a span in `[agent-hub` earns it a `> `.
+ */
 function fitLine(line: Span[], columns: number): Span[] {
-  const clean = line.map(s => ({ ...s, text: terminalText(s.text).replace(/\n/g, " ") }));
-  const text = clean.map(s => s.text).join("");
-  const clipped = fit(text, columns);
-  const marker = text === clipped ? "" : ".".repeat(Math.max(0, Math.min(3, columns)));
-  let remaining = clipped.length - marker.length;
-  const out: Span[] = [];
-  for (const s of clean) { const part = s.text.slice(0, Math.max(0, remaining)); if (part) out.push({ ...s, text: part }); remaining -= part.length; }
+  const clean = line.map(s => ({ ...s, text: flat(s.text) }));
+  if (Bun.stringWidth(clean.map(s => s.text).join("")) <= columns) return clean;
+  const marker = ".".repeat(Math.max(0, Math.min(3, columns)));
+  const out: Span[] = []; let room = columns - marker.length;
+  for (const s of clean) {
+    let part = "";
+    for (const char of s.text) { if (Bun.stringWidth(sanitize(part + char)) > room) break; part += char; }
+    if (part) out.push({ ...s, text: part });
+    if (part !== s.text) break;
+    room -= Bun.stringWidth(part);
+  }
   if (marker) out.push(span(marker));
   return out;
 }
 export function fit(value: unknown, columns: number): string {
-  const text = terminalText(value).replace(/\n/g, " ");
-  if (columns <= 0) return "";
-  if (Bun.stringWidth(text) <= columns) return text;
-  let result = ""; const marker = ".".repeat(Math.min(3, columns));
-  for (const char of text) { if (Bun.stringWidth(result + char) > columns - marker.length) break; result += char; }
-  return result + marker;
+  return paint(fitLine([span(value)], columns), false);
 }
-export function wrap(value: unknown, columns: number): string[] {
+/**
+ * A source line keeps its indent and its continuations hang `hang` columns deeper, both capped at half the width, so
+ * below that cap wrapped untrusted text never starts where its source line, or a hub line at that indent, starts. Breaks fall
+ * at whitespace, which they drop; only a word longer than a whole line is split. A tab counts as one space.
+ * Lines come out sanitized: a width counts the `> ` that sanitize() puts before a line starting like a hub header.
+ */
+export function wrap(value: unknown, columns: number, hang = 4): string[] {
   const lines: string[] = [];
-  for (const part of terminalText(value).split("\n")) {
-    let line = "";
-    for (const char of part) {
-      if (Bun.stringWidth(line + char) > columns) { lines.push(line); line = ""; }
-      line += char;
+  const half = Math.floor(columns / 2);
+  const width = (text: string) => Bun.stringWidth(sanitize(text));
+  for (const part of terminalText(value).replace(/\t/g, " ").split("\n")) {
+    const indent = /^\s*/.exec(part)![0];
+    const lead = Math.min(Bun.stringWidth(indent), half);
+    const pad = " ".repeat(Math.min(lead + hang, half));
+    const first = lines.length;
+    let start = " ".repeat(lead);
+    let line = start;
+    const push = () => { lines.push(sanitize(line.trimEnd())); line = start = pad; };
+    for (const token of part.slice(indent.length).match(/\s+|\S+/g) ?? []) {
+      if (width(line + token) <= columns) { line += token; continue; }
+      if (line !== start) push();
+      if (/^\s/.test(token)) continue;
+      for (const char of token) {
+        if (line !== start && width(line + char) > columns) push();
+        line += char;
+      }
     }
-    lines.push(line);
+    if (line !== start || lines.length === first) lines.push(sanitize(line.trimEnd()));
+  }
+  return lines;
+}
+export const plural = (n: number, word: string) => `${n} ${word}${n === 1 ? "" : "s"}`;
+/** `45s`, `12m`, `3h05m`, `2d03h`. */
+export function duration(ms: number): string {
+  const s = Math.max(0, Math.floor(ms / 1000)), m = Math.floor(s / 60), h = Math.floor(m / 60);
+  return s < 60 ? `${s}s` : m < 60 ? `${m}m` : h < 48 ? `${h}h${String(m % 60).padStart(2, "0")}m` : `${Math.floor(h / 24)}d${String(h % 24).padStart(2, "0")}h`;
+}
+/** A moment as `in 2h13m` or `12m ago`. */
+export const relative = (at: number, now: number) => at > now ? `in ${duration(at - now)}` : `${duration(now - at)} ago`;
+const WORD = /^\p{L}[\p{L}\p{N}_./:@#+-]*$/u; // a letter first: `1 2` must not read as two numbers
+/**
+ * An agent-written string inside hub-built text (a detail below its field, an option name in a prompt): a plain word as
+ * it is, anything else JSON-quoted, so no `;`, `,`, `)`, quote or newline in it can end it and pass for hub structure.
+ */
+export const quoted = (text: unknown) => { const value = String(text ?? ""); return WORD.test(value) ? value : JSON.stringify(value); };
+const TIME_KEY = /^(?:at|created|updated|since|expires)$|At$/;
+/**
+ * A detail value as text, never JSON: times relative, shares as percent, objects as `key value` pairs, nested lists
+ * inline. Only a field's own string value shows as written; every string below it goes through `quoted`.
+ */
+function detailText(value: unknown, key: string, now: number, nested = false): string {
+  if (value === null || value === undefined || (value === "" && !nested)) return "-";
+  if (typeof value === "number" && TIME_KEY.test(key)) return relative(value, now);
+  if (typeof value === "number" && key === "used") return `${Math.round(value * 100)}%`;
+  if (Array.isArray(value)) return value.map(item => item && typeof item === "object" && !Array.isArray(item) ? `(${detailText(item, key, now, true)})` : detailText(item, key, now, true)).join(", ") || "-";
+  if (typeof value === "object") return Object.entries(value).map(([k, v]) => `${k} ${detailText(v, k, now, true)}`).join("; ") || "-";
+  return nested ? quoted(value) : String(value);
+}
+/**
+ * Labels at column 0, values one column past the longest label. A list puts the hub's `- ` before each item, and every
+ * other line of a value (its own newlines, wrapped continuations) starts two columns deeper: untrusted text can pass
+ * neither for a label nor for an item. Allow options keep one line each, cut rather than wrapped.
+ */
+function fieldLines(fields: [string, unknown][], columns: number, now: number): Span[][][] {
+  const pad = Math.min(16, Math.max(0, ...fields.map(([label]) => Bun.stringWidth(label))) + 2);
+  const width = columns - pad - 2;
+  return fields.map(([label, value]) => {
+    const list = Array.isArray(value) && value.length > 0;
+    const items = list ? (value as unknown[]).map(item => detailText(item, label, now, true)) : [detailText(value, label, now)];
+    const lines = items.flatMap(item => (label === "a allow" ? [fit(item, width)] : wrap(item, width)).map((text, i) => (i ? "  " : list ? "- " : "") + text));
+    return lines.map((text, i) => {
+      const head = i ? "" : fit(label, pad - 2);
+      return [span(head + " ".repeat(pad - Bun.stringWidth(head)), i ? undefined : "info"), span(text)];
+    });
+  });
+}
+const detailLines = (detail: Detail, columns: number, now: number): Span[][] =>
+  typeof detail === "string" ? wrap(detail, columns).map(text => [span(text)]) : fieldLines(Object.entries(detail), columns, now).flat();
+const allowOptions = (a: Approval) => a.options.filter(o => o.kind.startsWith("allow"));
+/** A pushed request as the console keeps it: every agent-supplied field a string, so no draw can throw on one. */
+export function approvalFrom(msg: any): Approval {
+  return { id: String(msg.id ?? ""), peer: String(msg.peer ?? ""), title: String(msg.title ?? ""), expiresAt: Number(msg.expiresAt),
+    options: (Array.isArray(msg.options) ? msg.options : []).map((o: any) => ({ optionId: String(o?.optionId ?? ""), name: String(o?.name ?? ""), kind: String(o?.kind ?? "") })) };
+}
+/** Errors and refusals take the failure tone; a notice that only informs passes `attention`. */
+export function notify(s: ConsoleState, text: string, now: number, tone: Tone = "failure"): void {
+  s.notice = text; s.noticeAt = now; s.noticeTone = tone;
+}
+/** A request as labeled fields: allow options numbered as `a` offers them (`{ 2: name }`: the number is the hub's, the name quoted), then deny. */
+function approvalFields(a: Approval): [string, unknown][] {
+  const allow = allowOptions(a);
+  return [["request", a.id], ["peer", a.peer], ["expires", a.expiresAt], ["title", a.title],
+    ["a allow", allow.length > 1 ? allow.map((o, i) => ({ [i + 1]: o.name })) : allow[0] && quoted(allow[0].name)], ["d deny", "at once, no confirmation"]];
+}
+/** How the stream shows a permission request: hub text at columns 2 and 4, title lines framed at column 6. */
+export function permissionText(a: Pick<Approval, "id" | "peer" | "title" | "options">): string {
+  return `  ? ${a.peer} asks permission: ${String(a.title).replace(/\n/g, "\n      | ")}\n    answer with: ahub permit ${a.id} <${a.options.map(o => `${quoted(o.optionId)} (${quoted(o.name)})`).join(", ")}> | deny`;
+}
+const KEYS: [string, string[]][] = [
+  ["Everywhere", ["Tab stream/panels", ": command", "? keys", "Esc back", "q quit"]],
+  ["Command", ["Enter run", "Esc cancel", "Up/Down history", "Ctrl-U clear"]],
+  ["Panels", ["1-5 panel", "j/k or arrows move", "Enter view", "j/k scroll a view"]],
+  ["Approvals", ["a allow (then y)", "d deny", "v view", "[ ] select"]],
+  ["Peers", ["p pause", "r resume"]],
+  ["Tasks", ["a assign (then y)", "r review"]],
+  ["Queue", ["r resolve (reason, then y)"]],
+  ["Events", ["f peer filter", "g kind filter"]],
+];
+/** The `?` key table: one group per panel, its keys kept whole and packed into the width after the group column. */
+export function keyTable(columns: number): Span[][] {
+  const lines: Span[][] = []; const pad = 12;
+  for (const [group, items] of KEYS) {
+    let text = ""; let head = group;
+    const flush = () => { lines.push([span(head.padEnd(pad), head ? "info" : undefined), span(text)]); head = ""; text = ""; };
+    for (const item of items) { if (text && pad + Bun.stringWidth(`${text}   ${item}`) > columns) flush(); text = text ? `${text}   ${item}` : item; }
+    flush();
   }
   return lines;
 }
 export function pruneApprovals(s: ConsoleState, now: number): ConsoleState {
   const approvals = s.approvals.filter(a => a.expiresAt > now);
   const live = (id: string) => approvals.some(a => a.id === id);
-  return { ...s, approvals, approvalIndex: Math.min(s.approvalIndex, Math.max(0, approvals.length - 1)),
-    ...(s.confirm?.type === "permission" && !live(s.confirm.id) ? { confirm: undefined } : {}),
-    ...(s.optionChoice && !live(s.optionChoice) ? { optionChoice: undefined } : {}) };
+  const gone = s.approvalId !== undefined && !live(s.approvalId);
+  return bound({ ...s, approvals,
+    ...(gone ? { approvalId: undefined, notice: `request ${s.approvalId} closed${approvals.length ? "; [ ] selects another" : ""}`, noticeAt: now, noticeTone: "attention" as const } : {}) });
+}
+/**
+ * Everything pending on a request belongs to the selected one: a choice or confirmation for any other request is
+ * dropped, and an open detail follows the selection from its top (it closes when nothing is selected). Every reducer
+ * exit and every prune passes through here, so no key can act on a request other than the one shown.
+ */
+function bound(s: ConsoleState): ConsoleState {
+  if (s.optionChoice && s.optionChoice !== s.approvalId) s.optionChoice = undefined;
+  if (s.confirm?.type === "permission" && s.confirm.id !== s.approvalId) s.confirm = undefined;
+  if (s.requestDetail && s.requestDetail !== s.approvalId) { s.requestDetail = s.approvalId; s.detailOffset = 0; }
+  return s;
 }
 const COMMANDS = new Set(["status", "board", "task", "review", "say", "pause", "resume", "budget", "queue", "permit", "ask", "remember", "route", "turns", "undo", "check-path", "report"]);
 /** A tiny argv parser, never a shell. Quotes group arguments; backslash escapes one character. */
@@ -123,21 +253,27 @@ export function panelRows(s: ConsoleState): any[] {
   if (s.panel === 4) return s.queue.filter(q => q.state === "needs_review" || q.state === "queued");
   return s.events.filter(e => (!s.peerFilter || e.peer === s.peerFilter) && (!s.kindFilter || e.kind === s.kindFilter));
 }
+export const selectedApproval = (s: ConsoleState) => s.approvals.find(a => a.id === s.approvalId);
+/** The selected row: the Approvals panel's is the selected request (-1 when none is). */
+const selection = (s: ConsoleState) => s.panel === 2 ? s.approvals.findIndex(a => a.id === s.approvalId) : s.selection;
 export function reduceConsole(state: ConsoleState, key: string, now = Date.now()): { state: ConsoleState; effects: ConsoleEffect[] } {
-  let s = pruneApprovals({ ...state }, now); const effects: ConsoleEffect[] = [];
-  const done = () => ({ state: s, effects });
+  // A notice answers the key before this one; one that pruning raises now stays.
+  let s = pruneApprovals({ ...state, notice: "" }, now); const effects: ConsoleEffect[] = [];
+  const done = () => ({ state: bound(s), effects });
+  const answered = (id: string) => { s.approvals = s.approvals.filter(a => a.id !== id); if (s.approvalId === id) s.approvalId = undefined; };
   if (key === "\x03") { effects.push({ type: "exit" }); return done(); }
   if (s.confirm) {
     const confirm = s.confirm; s.confirm = undefined;
     if (key === "y") {
       if (confirm.type === "command") effects.push({ type: "command", args: confirm.args });
-      else if (s.approvals.some(a => a.id === confirm.id && a.options.some(o => o.optionId === confirm.option && o.kind.startsWith("allow")))) {
+      else if (s.approvals.some(a => a.id === confirm.id && allowOptions(a).some(o => o.optionId === confirm.option))) {
         effects.push({ type: "permit", id: confirm.id, option: confirm.option });
-        s.approvals = s.approvals.filter(a => a.id !== confirm.id);
+        answered(confirm.id);
       }
     }
     return done();
   }
+  if (s.help && s.mode === "panels" && !["?", "\x1b", "q"].includes(key)) return done(); // the key table is modal
   if (s.editing || s.input) {
     if (key === "\x1b") { s.input = ""; s.editing = false; }
     else if (key === "\x7f" || key === "\b") s.input = Array.from(s.input).slice(0, -1).join("");
@@ -157,52 +293,67 @@ export function reduceConsole(state: ConsoleState, key: string, now = Date.now()
         s.history = [...s.history, input].slice(-100); s.historyIndex = s.history.length;
         if (commandNeedsConfirmation(args)) s.confirm = { type: "command", args };
         else effects.push({ type: "command", args });
-      } catch (error) { s.notice = String((error as Error).message); }
+      } catch (error) { notify(s, String((error as Error).message), now); }
     } else if (!key.startsWith("\x1b")) s.input += terminalText(key).replace(/\n/g, "");
     return done();
   }
   if (key === "q") { effects.push({ type: "exit" }); return done(); }
-  if (key === "\t") { s.mode = s.mode === "panels" ? "stream" : "panels"; s.detail = undefined; return done(); }
+  if (key === "\t") { s.mode = s.mode === "panels" ? "stream" : "panels"; s.detail = undefined; s.requestDetail = undefined; return done(); }
   if (key === ":") { s.editing = true; return done(); }
-  if (s.mode === "panels" && /^[1-5]$/.test(key) && !s.optionChoice) { s.panel = Number(key); s.selection = 0; s.detail = undefined; return done(); }
-  if (key === "?") { s.help = !s.help; return done(); }
-  if (key === "\x1b") { s.detail = undefined; s.help = false; s.optionChoice = undefined; return done(); }
+  if (s.mode === "panels" && /^[1-5]$/.test(key) && !s.optionChoice) { s.panel = Number(key); s.selection = 0; s.detail = undefined; s.requestDetail = undefined; return done(); }
+  if (key === "?") {
+    if (s.mode === "stream") effects.push({ type: "keys" });
+    else s.help = !s.help;
+    return done();
+  }
+  if (key === "\x1b") { s.detail = undefined; s.requestDetail = undefined; s.help = false; s.optionChoice = undefined; return done(); }
   if (s.mode === "panels" && ["j", "k", "\x1b[A", "\x1b[B"].includes(key)) {
-    if (s.detail) { s.detailOffset = Math.max(0, s.detailOffset + (["j", "\x1b[B"].includes(key) ? 1 : -1)); return done(); }
-    s.selection = Math.max(0, Math.min(panelRows(s).length - 1, s.selection + (["j", "\x1b[B"].includes(key) ? 1 : -1)));
-    if (s.panel === 2) s.approvalIndex = s.selection;
+    if (s.detail !== undefined || s.requestDetail) { s.detailOffset = Math.max(0, s.detailOffset + (["j", "\x1b[B"].includes(key) ? 1 : -1)); return done(); }
+    s.selection = Math.max(0, Math.min(panelRows(s).length - 1, selection(s) + (["j", "\x1b[B"].includes(key) ? 1 : -1)));
+    if (s.panel === 2) s.approvalId = s.approvals[s.selection]?.id;
     return done();
   }
   if (key === "[" || key === "]") {
-    s.approvalIndex = (s.approvalIndex + (key === "[" ? -1 : 1) + s.approvals.length) % Math.max(1, s.approvals.length); return done();
+    const i = s.approvals.findIndex(a => a.id === s.approvalId), n = s.approvals.length;
+    if (n) s.approvalId = s.approvals[i < 0 ? (key === "]" ? 0 : n - 1) : (i + (key === "[" ? -1 : 1) + n) % n]!.id;
+    return done();
   }
-  const approval = s.approvals[s.approvalIndex];
+  const approval = selectedApproval(s);
   if (s.optionChoice) {
-    const a = s.approvals.find(a => a.id === s.optionChoice); const options = a?.options.filter(o => o.kind.startsWith("allow")) ?? [];
-    const option = options[Number(key) - 1];
+    const a = s.approvals.find(a => a.id === s.optionChoice);
+    const option = a && allowOptions(a)[Number(key) - 1];
     if (/^[1-9]$/.test(key) && a && option) { s.confirm = { type: "permission", id: a.id, peer: a.peer, option: option.optionId }; s.optionChoice = undefined; }
     return done();
   }
-  if (approval && (s.mode === "stream" || s.panel === 2)) {
-    if (key === "d") { effects.push({ type: "permit", id: approval.id }); s.approvals = s.approvals.filter(a => a.id !== approval.id); return done(); }
+  const requestShown = s.mode === "stream" || (s.panel === 2 && s.detail === undefined);
+  if (!approval && s.approvals.length && requestShown && ["a", "d", "v"].includes(key)) {
+    notify(s, "no request selected; [ ] selects one", now, "attention"); return done();
+  }
+  if (approval && requestShown) {
+    if (key === "d") { effects.push({ type: "permit", id: approval.id }); answered(approval.id); return done(); }
     if (key === "a") {
-      const options = approval.options.filter(o => o.kind.startsWith("allow"));
+      const options = allowOptions(approval);
       if (options.length === 1) s.confirm = { type: "permission", id: approval.id, peer: approval.peer, option: options[0]!.optionId };
       else if (options.length) s.optionChoice = approval.id;
       return done();
     }
-    if (key === "v") { s.detail = approval.title; s.detailOffset = 0; return done(); }
+    if (key === "v" && s.mode === "stream") { effects.push({ type: "print", text: permissionText(approval), kind: "permission", tone: "attention" }); return done(); }
+    if (key === "v") { s.requestDetail = approval.id; s.detailOffset = 0; return done(); }
   }
-  const row = panelRows(s)[s.selection];
-  if (s.mode === "panels" && row) {
-    if (key === "\r" || key === "\n") {
-      if (s.panel === 3 || s.panel === 4) effects.push({ type: "show", panel: s.panel, id: String(row.id) });
-      else { s.detail = s.panel === 2 ? row.title : s.panel === 5 ? row.text : JSON.stringify(row, null, 2); s.detailOffset = 0; }
-      return done();
-    }
-    const prefill = s.panel === 1 && key === "p" ? `pause ${row.id}` : s.panel === 1 && key === "r" ? `resume ${row.id}` :
-      s.panel === 3 && key === "a" ? `task assign ${row.id} ` : s.panel === 3 && key === "r" ? `review ${row.id} ` :
-      s.panel === 4 && key === "r" ? `queue resolve ${row.id} --action retry --reason ` : undefined;
+  const row = panelRows(s)[selection(s)];
+  // With a detail open the keys act on the item it shows (its id), never on what a refresh moved under the selection;
+  // a detail that is only a message names no item.
+  const item = s.detail === undefined ? row?.id : typeof s.detail === "object" ? s.detail.id : undefined;
+  if (s.mode === "panels" && row && s.detail === undefined && (key === "\r" || key === "\n")) {
+    if (s.panel === 3 || s.panel === 4) effects.push({ type: "show", panel: s.panel, id: String(row.id) });
+    else if (s.panel === 2) { s.requestDetail = row.id; s.detailOffset = 0; } // the row is the selected request
+    else { s.detail = s.panel === 5 ? String(row.text) : { ...row }; s.detailOffset = 0; }
+    return done();
+  }
+  if (s.mode === "panels" && item !== undefined && item !== null) {
+    const prefill = s.panel === 1 && key === "p" ? `pause ${item}` : s.panel === 1 && key === "r" ? `resume ${item}` :
+      s.panel === 3 && key === "a" ? `task assign ${item} ` : s.panel === 3 && key === "r" ? `review ${item} ` :
+      s.panel === 4 && key === "r" ? `queue resolve ${item} --action retry --reason ` : undefined;
     if (prefill) { s.input = prefill; s.editing = true; return done(); }
   }
   if (s.mode === "panels" && s.panel === 5 && (key === "f" || key === "g")) {
@@ -218,62 +369,134 @@ export function reduceConsole(state: ConsoleState, key: string, now = Date.now()
 export function renderConsole(s: ConsoleState, columns: number, rows = 24, now = Date.now()): string[] {
   return renderConsoleLines(s, columns, rows, now).map(line => paint(line, false));
 }
+const NOTICE_MS = 10_000;
+const TABLES: Record<number, string[]> = {
+  1: ["PEER", "STATE", "LINK", "Q", "!", "REVIEW", "PAUSE", "QUOTA", "MODEL"],
+  2: ["ID", "PEER", "LEFT", "TITLE"],
+  3: ["ID", "STATE", "OWNER", "REVIEWER", "CLASS", "AGE", "TITLE"],
+  4: ["ID", "PEER", "STATE", "REV", "AGE"],
+};
+const count = (n: unknown) => typeof n === "number" && n ? String(n) : "-";
+/** One span per column of a panel row; zero counters and unknown values read `-`. */
+function cells(s: ConsoleState, row: any, selected: boolean, now: number): Span[] {
+  const id = (text: unknown, tone: Tone | undefined) => span(text, tone && (selected ? "strong" : tone));
+  if (s.panel === 1) {
+    const b = s.budget[row.id];
+    const paused = b?.paused ? `budget ${relative(b.paused.resetsAt, now)}` : row.paused && typeof row.paused === "object"
+      ? `${row.paused.by ?? "paused"}${typeof row.paused.at === "number" ? ` ${duration(now - row.paused.at)}` : ""}`
+      : row.paused === "manual" ? "user" : row.paused ? String(row.paused).split(":")[0] : "-";
+    return [id(row.id, row.state === "offline" ? undefined : "info"), span(row.state, stateTone(row.state)),
+      span(row.toolsOnly ? "tools-only" : row.attached === false ? "detached" : "attached", row.toolsOnly ? "attention" : undefined),
+      span(count(row.queued)), span(count(row.queuedImportant), row.queuedImportant ? "attention" : undefined),
+      span(count(row.needsReview), row.needsReview ? "failure" : undefined), span(paused, paused === "-" ? undefined : "attention"),
+      span(b?.windows?.length ? b.windows.map((w: any) => `${w.id} ${Math.round(w.used * 100)}%${typeof w.resetsAt === "number" ? ` ${relative(w.resetsAt, now)}` : ""}`).join(", ") : "-"),
+      span(row.servedBy ?? row.requestedModel ?? "-")];
+  }
+  if (s.panel === 2) return [id(row.id, "attention"), span(row.peer, "attention"), span(duration(row.expiresAt - now), "muted"), span(row.title)];
+  if (s.panel === 3) {
+    const last = row.history?.at(-1);
+    const at = last?.at ?? row.updated ?? row.created;
+    const failed = last?.event === "check failed" || last?.event === "failed";
+    return [id(`#${row.id}`, "info"), span(`${row.state}${failed && row.state !== last.event ? ` ${last.event}` : ""}${row.ready ? " ready" : ""}`, failed ? "failure" : row.ready ? "attention" : stateTone(row.state)),
+      span(row.owner ?? "-"), span(row.reviewer ?? "-"), span(row.class ?? "-"), span(typeof at === "number" ? duration(now - at) : "-", "muted"), span(row.title)];
+  }
+  if (s.panel === 4) return [id(row.id, "info"), span(row.peer), span(row.state, stateTone(row.state)), span(row.revision ?? "-"), span(typeof row.createdAt === "number" ? duration(now - row.createdAt) : "-", "muted")];
+  const [header, ...body] = String(row.text).split("\n");
+  return [span(header, row.tone), ...(body.length ? [span("\n" + body.join("\n"))] : [])];
+}
+/**
+ * A header row, then the rows, each column starting at the same place on every row: two spaces apart, as wide as its
+ * widest cell or header (Bun.stringWidth, at most a third of the width, wider cells cut with the marker); the last column
+ * takes the rest.
+ */
+function table(head: string[], rows: Span[][], columns: number): Span[][] {
+  const cap = Math.max(24, Math.floor(columns / 3));
+  const width = (cell: Span | undefined) => Bun.stringWidth(flat(cell?.text));
+  const widths = head.map((h, i) => Math.min(cap, rows.reduce((max, row) => Math.max(max, width(row[i])), Bun.stringWidth(h))));
+  return [head.map(h => span(h, "info")), ...rows].map(row => row.map((cell, i) => {
+    if (i === head.length - 1) return cell;
+    const text = fit(cell.text, widths[i]!);
+    return { ...cell, text: text + " ".repeat(widths[i]! - Bun.stringWidth(text) + 2) };
+  }));
+}
+/** The footer's key hint: only keys that act in this mode, panel and state. */
+function hint(s: ConsoleState): string {
+  const pending = selectedApproval(s) ? ["a allow", "d deny"] : [];
+  if (s.mode === "stream") return [...pending, ...(pending.length ? ["v view"] : []), ...(s.approvals.length > (pending.length ? 1 : 0) ? ["[ ] select"] : []), "Tab panels", ": command", "? keys", "q quit"].join("  ");
+  if (s.help) return "? or Esc close  q quit";
+  const approvals = s.panel === 2 ? pending : [];
+  if (s.detail !== undefined || s.requestDetail) return [...approvals, "j/k scroll", "Esc back", "? keys", "q quit"].join("  ");
+  const rows = panelRows(s); const row = rows[selection(s)];
+  const context = !row ? [] : s.panel === 1 ? ["p pause", "r resume"] : s.panel === 3 ? ["a assign", "r review"] : s.panel === 4 ? ["r resolve"] : [];
+  return [...approvals, ...context, ...(s.panel === 5 ? ["f peer", "g kind"] : []), ...(rows.length ? ["j/k move"] : []), ...(row ? ["Enter view"] : []), "? keys", ": command", "Tab stream", "q quit"].join("  ");
+}
+/** The project, then the tabs: the active one in brackets, pending approvals and held deliveries counted. */
+function header(s: ConsoleState, columns: number): Span[] {
+  const counts = [0, s.approvals.length, 0, s.queue.filter(q => q.state === "needs_review").length, 0];
+  const tabs: Span[] = [];
+  for (const [i, name] of ["Peers", "Approvals", "Tasks", "Queue", "Events"].entries()) {
+    const active = i + 1 === s.panel; const tone = active ? "strong" : "info";
+    tabs.push(span(active ? " [" : "  ", tone), span(`${i + 1} ${name}`, tone));
+    if (counts[i]) tabs.push(span(` ${counts[i]}`, i === 1 ? "attention" : "failure"));
+    tabs.push(span(active ? "]" : " ", tone));
+  }
+  return fitLine([span(fit(s.project ?? "agent-hub", Math.max(0, columns - Bun.stringWidth(tabs.map(t => t.text).join("")))), "info"), ...tabs], columns);
+}
+/** The label column is the hub's own: a cut title or option list is marked `(more)` there; Enter shows it whole. */
+const more = (line: Span[], text?: string): Span[] => [span("(more)".padEnd(Bun.stringWidth(line[0]!.text)), "attention"), ...(text === undefined ? line.slice(1) : [span(text)])];
 export function renderConsoleLines(s: ConsoleState, columns: number, rows = 24, now = Date.now()): Span[][] {
-  const permission = s.approvals[s.approvalIndex];
-  let prompt = s.editing ? `: ${s.input}` : "q quit | Tab panels | : command | a allow d deny v view [ ] select";
-  if (s.confirm?.type === "permission") prompt = `allow ${s.confirm.option} for ${s.confirm.peer} (request ${s.confirm.id})? y/N`;
+  const permission = selectedApproval(s);
+  let prompt = s.editing ? `: ${s.input}` : hint(s);
+  if (s.confirm?.type === "permission") prompt = `allow ${quoted(s.confirm.option)} for ${s.confirm.peer} (request ${s.confirm.id})? y/N`;
   if (s.confirm?.type === "command") prompt = `${s.confirm.args.join(" ")}? y/N`;
-  if (s.optionChoice) prompt = s.approvals.find(a => a.id === s.optionChoice)?.options.filter(o => o.kind.startsWith("allow")).map((o, i) => `${i + 1}:${o.name}`).join(" | ") ?? "";
+  const choice = s.optionChoice ? s.approvals.find(a => a.id === s.optionChoice) : undefined;
+  if (choice) prompt = `allow request ${choice.id} (${choice.peer}) with: ${allowOptions(choice).map((o, i) => `${i + 1} ${quoted(o.name)}`).join("  ")}  Esc cancel`;
   const summary: Span[] = [];
   for (const [id, p] of Object.entries(s.peers)) {
     if (summary.length) summary.push(span(" "));
     summary.push(span(id, p.state === "offline" ? undefined : "info"), span(":"), span(p.state, stateTone(p.state)), span(` q${p.queued ?? 0}`));
     if (p.needsReview) summary.push(span(` review${p.needsReview}`, "failure"));
     if (p.paused) summary.push(span(" paused", "attention"));
+    if (p.toolsOnly) summary.push(span(" tools-only: ahub claude", "attention"));
   }
   const quotas = Object.entries(s.budget).map(([id, b]) => `${id}:${b.windows?.map((w: any) => `${w.id} ${Math.round(w.used * 100)}%`).join("/") ?? "?"}`).join(" ");
   if (quotas) summary.push(span(` | ${quotas}`));
-  const approvals = [span(`${s.approvals.length} approvals`, s.approvals.length ? "attention" : undefined)];
-  if (permission) approvals.push(span(` | ${permission.peer} ${permission.id}`, "attention"), span(` ${Math.max(0, Math.ceil((permission.expiresAt - now) / 1000))}s`, "muted"));
-  if (s.notice) approvals.push(span(` | ${s.notice}`));
+  const approvals = [span(plural(s.approvals.length, "approval"), s.approvals.length ? "attention" : undefined)];
+  if (permission) approvals.push(span(` | ${permission.peer} ${permission.id}`, "attention"), span(` ${duration(permission.expiresAt - now)} left`, "muted"));
+  else if (s.approvals.length) approvals.push(span(" | none selected", "muted"));
+  if (s.notice && now - (s.noticeAt ?? now) < NOTICE_MS) approvals.push(span(" | "), span(s.notice, s.noticeTone ?? "failure"));
   const footer = [fitLine(summary, columns), fitLine(approvals, columns), fitLine([span(prompt, s.confirm || s.optionChoice ? "attention" : undefined)], columns)];
-  if (s.mode === "stream") return footer;
-  const titles = ["Peers", "Approvals", "Tasks", "Queue", "Events"];
-  const title = titles[s.panel - 1];
-  const tabs = [span("agent-hub | ", "info")];
-  for (const [i, name] of titles.entries()) tabs.push(span(`${i + 1} ${name}${i < 4 ? " " : ""}`, i + 1 === s.panel ? "strong" : "info"));
-  tabs.push(span(` | ${title}`, "strong"));
-  const lines: Span[][] = [fitLine(tabs, columns), fitLine([span(`j/k move Enter detail Esc back ? keys${s.panel === 5 ? ` | f peer:${s.peerFilter ?? "all"} g kind:${s.kindFilter ?? "all"}` : ""}`)], columns)];
-  if (s.help) lines.push(...wrap("Tab stream/panels; 1-5 panel; j/k or arrows move; Enter detail; Esc back; : command; q quit. Approvals: a allow (confirm y), d deny, v title, [ ] select. Peers: p pause, r resume. Tasks: a assign (confirm y), r review. Queue: r resolve (reason and confirm y). Events: f peer filter, g kind filter.", columns).map(text => [span(text)]));
-  else if (s.detail) { const detail = wrap(s.detail, columns); lines.push(...detail.slice(Math.min(s.detailOffset, Math.max(0, detail.length - (rows - 5)))).map(text => [span(text)])); }
+  const rule = [span("-".repeat(Math.max(0, columns)), "muted")];
+  if (s.mode === "stream") return [rule, ...footer];
+  const height = rows - 6; // header, rule, body, rule, three footer lines
+  const lines: Span[][] = [];
+  if (s.help) lines.push(...keyTable(columns));
+  else if (s.detail !== undefined || (s.requestDetail && permission)) {
+    const detail = s.detail !== undefined ? detailLines(s.detail, columns, now) : fieldLines(approvalFields(permission!), columns, now).flat();
+    lines.push(...detail.slice(Math.min(s.detailOffset, Math.max(0, detail.length - height))));
+  }
   else {
-    const data = panelRows(s); const capacity = Math.max(1, s.panel === 2 ? Math.floor((rows - 6) / 2) : rows - 6); const start = Math.max(0, s.selection - capacity + 1);
-    for (const [i, row] of data.slice(start, start + capacity).entries()) {
-      const selected = start + i === s.selection;
-      const line = [span(`${selected ? ">" : " "} `, selected ? "strong" : undefined)];
-      if (s.panel === 1) {
-        const b = s.budget[row.id];
-        line.push(span(row.id, row.state === "offline" ? undefined : selected ? "strong" : "info"), span(" "), span(row.state, stateTone(row.state)),
-          span(` ${row.attached === false ? "detached" : "attached"} q:${row.queued ?? 0} `), span(`!:${row.queuedImportant ?? 0}`, row.queuedImportant ? "attention" : undefined),
-          span(` review:${row.needsReview ?? 0}`, row.needsReview ? "failure" : undefined), span(" "),
-          span(row.paused ? `paused:${JSON.stringify(row.paused)}` : "", "attention"), span(" "),
-          span(b?.paused ? `budget pause ${b.paused.reason} reset:${b.paused.resetsAt}` : "", "attention"), span(" "),
-          span(b?.windows?.map((w: any) => `${w.id}:${Math.round(w.used * 100)}% reset:${w.resetsAt ?? "?"}`).join(" ") ?? "quota:?"), span(` model:${row.servedBy ?? row.requestedModel ?? "?"}`));
-      } else if (s.panel === 2) line.push(span(`${row.id} ${row.peer}`, "attention"), span(` ${Math.max(0, Math.ceil((row.expiresAt - now) / 1000))}s`, "muted"), span(` ${row.title}`));
-      else if (s.panel === 3) {
-        const last = row.history?.at(-1);
-        const at = last?.at ?? row.updated ?? row.created;
-        const tone = last?.event === "check failed" || last?.event === "failed" ? "failure" : stateTone(row.state);
-        const failure = (last?.event === "check failed" || last?.event === "failed") && row.state !== last.event ? ` ${last.event}` : "";
-        line.push(span(`#${row.id}`, selected ? "strong" : "info"), span(" "), span(row.state, tone), span(failure, "failure"), span(row.ready ? " ready" : "", "attention"),
-          span(` ${row.owner ?? "-"} review:${row.reviewer ?? "-"} ${row.class} `), span(`age:${at ? Math.max(0, Math.floor((now - at) / 1000)) + "s" : "?"}`, "muted"), span(` ${row.title}`));
-      } else if (s.panel === 4) line.push(span(row.id, selected ? "strong" : "info"), span(` ${row.peer} `), span(row.state, stateTone(row.state)), span(` rev:${row.revision} `), span(`age:${row.createdAt ? Math.max(0, Math.floor((now - row.createdAt) / 1000)) + "s" : "?"}`, "muted"));
-      else { const [header, ...body] = String(row.text).split("\n"); line.push(span(header, row.tone)); if (body.length) line.push(span("\n" + body.join("\n"))); }
-      lines.push(fitLine(line, columns));
+    const data = panelRows(s); const head = TABLES[s.panel]; const at = selection(s);
+    // Below the Approvals table: the selected request's title, its allow options and deny, one line each. Deny always
+    // shows; options that do not fit are counted, rows give way to the rest, and the title gets what is left.
+    const [title = [], allow = [], deny = []] = s.panel === 2 && permission ? fieldLines(approvalFields(permission).slice(3), columns, now) : [];
+    const fits = Math.max(1, height - 5); // table header, one row, rule, one title line, deny
+    if (allow.length > fits) allow.splice(fits - 1, Infinity, more(allow[0]!, `${plural(allow.length - fits + 1, "more option")}: Enter shows them all`));
+    const tail = [...allow, ...deny];
+    const capacity = Math.max(1, s.panel === 2 ? Math.min(Math.floor(height / 2) - 1, height - 3 - tail.length) : height - 1); const start = Math.max(0, at - capacity + 1);
+    const rowsOf = head ? table(head, data.map((row, i) => cells(s, row, i === at, now)), columns) : undefined;
+    lines.push(fitLine([span("  "), ...(rowsOf?.[0] ?? [span(`peer ${s.peerFilter ?? "all"}  kind ${s.kindFilter ?? "all"}`, "info")])], columns));
+    for (let i = start; i < Math.min(data.length, start + capacity); i++) {
+      const selected = i === at;
+      lines.push(fitLine([span(selected ? "> " : "  ", selected ? "strong" : undefined), ...(rowsOf?.[i + 1] ?? cells(s, data[i], selected, now))], columns));
+    }
+    if (!data.length) lines.push([span("  (empty)")]);
+    if (title.length) {
+      const room = Math.max(1, height - lines.length - 1 - tail.length);
+      if (title.length > room) { title.length = room; title[room - 1] = more(title[room - 1]!); }
+      lines.push(rule, ...title, ...tail);
     }
-    if (!data.length) lines.push([span("(empty)")]);
-    if (s.panel === 2 && permission) lines.push(...wrap(permission.title, columns).slice(0, Math.max(0, rows - 3 - lines.length)).map(text => [span(text)]));
   }
-  const body = lines.slice(0, rows - 3); while (body.length < rows - 3) body.push([]);
-  return [...body, ...footer];
+  const body = lines.slice(0, height); while (body.length < height) body.push([]);
+  return [header(s, columns), rule, ...body, rule, ...footer];
 }