@a-t-h-i/bot-lobby 0.5.0 → 0.6.0

package/src/lobby/tabs/home.ts

@@ -1,17 +1,24 @@
 /**
- * The Lobby tab: the zen scene of this session's task on top, then the
+ * The Lobby tab: the zen scene of this session's task on top (the oracle
+ * and agent animations, or just their status when animations are off), then the
  * conversation with the oracle (text only, no tool rows, no thinking), the
  * activity log of plain-words steps from every agent, and the one place where
  * thoughts show up. Pure: the scene arrives as a callback, the clock as `now`.
  */
+import { visibleWidth } from "@earendil-works/pi-tui";
 import type { Task } from "../../schemas/task.ts";
 import type { ActivityEntry, ChatEntry, ThoughtEntry } from "../feed.ts";
-import { bold, since, clock, columns, fill, italic, paint, rule, spinner, split, tail, wrap, wrapHanging, type LobbyColor, type LobbyTheme } from "../layout.ts";
+import type { LobbyPanel } from "../../schemas/configuration.ts";
+import { beside, bold, box, clock, fill, fit, italic, markdownLines, notePane, paint, since, spinner, wrap, wrapHanging, type LobbyColor, type LobbyTheme, type PaneLayout } from "../layout.ts";
+
+/** The Lobby tab's scrollable panes. */
+export const HOME_PANES = ["conversation", "activity", "thinking"] as const;
+export type HomePane = (typeof HOME_PANES)[number];
 
 export interface HomeInput {
   task?: Task;
-  /** Draws the zen scene into at most `height` lines; absent when no task is active. */
-  scene?: (width: number, height: number) => string[];
+  /** Draws the zen scene into at most `height` lines, animated or still; absent when no task is active. */
+  scene?: (width: number, height: number, animated: boolean) => string[];
   chat: readonly ChatEntry[];
   /** The oracle's reply while it streams. */
   liveReply?: string;
@@ -22,17 +29,36 @@ export interface HomeInput {
   /** Active tasks owned by other sessions, and saved plans waiting to start. */
   others: number;
   pending: number;
-  /** Lines of conversation scrollback. */
-  chatOffset: number;
+  /** How far each pane is scrolled back, in lines from its newest; 0 follows the newest. */
+  offsets?: Partial<Record<HomePane, number>>;
+  /** The pane the arrow keys scroll; its border lights up. */
+  focus?: HomePane;
+  /** Filled with where each pane landed and how much it holds. */
+  panes?: PaneLayout;
   tick: number;
   now: number;
+  /** Which panes show. */
+  panels: Record<LobbyPanel, boolean>;
+  /** The search in force: panes show only matching entries. */
+  query?: string;
+  /** Key labels for the pane toggles, shown on the panes. */
+  keys?: Record<LobbyPanel, string>;
+  /** Another session is shown: its name titles the conversation. */
+  title?: string;
+  /** The scene is another session's still status (no animations to toggle). */
+  stillScene?: boolean;
+  /** What the empty conversation says instead of the default (a session starting, say). */
+  emptyNote?: string;
+  /** What the empty activity log says instead of "No activity yet.". */
+  activityNote?: string;
 }
 
 /** Wide terminals put the conversation and the activity log side by side. */
 export const HOME_COLUMNS_MIN = 100;
-/** Most lines the scene may take, and its share of the body. */
+/** Most lines the scene may take, and its share of the body; the still status needs far fewer. */
 const SCENE_SHARE = 0.45;
 const MAX_SCENE = 36;
+const MAX_STILL = 10;
 
 const SOURCE_COLORS: Record<string, LobbyColor> = {
   MASTER: "accent",
@@ -68,27 +94,93 @@ export function activityLine(entry: ActivityEntry, width: number, tick: number,
   return `${paint(theme, "dim", clock(entry.at))} ${who} ${mark} ${body}`;
 }
 
-function chatLead(role: ChatEntry["role"], theme?: LobbyTheme): string {
-  if (role === "you") return `${bold(theme, paint(theme, "accent", "you"))} ${paint(theme, "dim", "▸")} `;
-  if (role === "oracle") return `${bold(theme, paint(theme, "toolTitle", "oracle"))} ${paint(theme, "dim", "▸")} `;
-  return `${paint(theme, "dim", "·")} `;
+/** How each speaker is shown: a mark and a name in its colour. */
+export const SPEAKERS = {
+  you: { mark: "●", name: "You", color: "accent" },
+  oracle: { mark: "◆", name: "Oracle", color: "toolTitle" },
+  panel: { mark: "◆", name: "Panel", color: "toolTitle" },
+} as const satisfies Record<string, { mark: string; name: string; color: LobbyColor }>;
+export type Speaker = keyof typeof SPEAKERS;
+
+/** Messages from one speaker within this long of each other share a header. */
+const GROUP_MS = 5 * 60_000;
+/** Message bodies sit under the speaker's name, past its mark. */
+const BODY_INDENT = 2;
+
+/** `◆ Oracle ············ 12:04`: who speaks on the left; when, or what they are doing, on the right. */
+export function speakerLine(speaker: Speaker, width: number, theme?: LobbyTheme, right = ""): string {
+  const { mark, name, color } = SPEAKERS[speaker];
+  const left = `${paint(theme, color, mark)} ${bold(theme, paint(theme, color, name))}`;
+  const note = right ? paint(theme, "dim", right) : "";
+  const gap = width - visibleWidth(left) - visibleWidth(note);
+  return gap >= 1 && note ? `${left}${" ".repeat(gap)}${note}` : left;
+}
+
+/**
+ * What you wrote, as pi shows it: a band in the user-message background with
+ * a column of padding (a bar in its colour where the theme has no background).
+ */
+export function youLines(text: string, width: number, theme?: LobbyTheme): string[] {
+  const inner = Math.max(1, width - BODY_INDENT - 2);
+  const indent = " ".repeat(BODY_INDENT);
+  const band = theme?.bg
+    ? (line: string) => theme.bg!("userMessageBg", ` ${fit(paint(theme, "userMessageText", line), inner)} `)
+    : (line: string) => `${paint(theme, "accent", "▌")} ${line}`;
+  return wrap(text, inner).map((line) => `${indent}${band(line)}`);
+}
+
+/** The oracle's reply as Markdown, under its name. */
+function oracleLines(text: string, width: number, theme?: LobbyTheme): string[] {
+  const indent = " ".repeat(BODY_INDENT);
+  return markdownLines(text, Math.max(1, width - BODY_INDENT), theme).map((line) => (line ? `${indent}${line}` : ""));
 }
 
-/** The conversation as wrapped lines, oldest first, a blank line between turns. */
+/** An event in the conversation (a task starting, a comment sent) as a centred rule; failures stand out instead. */
+export function eventLines(text: string, at: number, width: number, theme?: LobbyTheme): string[] {
+  if (text.startsWith("✗")) return wrap(paint(theme, "error", text), width);
+  const label = ` ${text}${at > 0 ? ` · ${clock(at)}` : ""} `;
+  const room = width - visibleWidth(label);
+  if (room < 6) return wrap(paint(theme, "dim", text), width);
+  const left = Math.floor(room / 2);
+  return [paint(theme, "dim", `${"─".repeat(left)}${label}${"─".repeat(room - left)}`)];
+}
+
+/**
+ * The conversation, oldest first: each turn under a speaker line with its
+ * time, your messages in a band, the oracle's in Markdown, events as rules,
+ * and while the oracle works its header says so (streaming the reply under it).
+ */
 export function chatLines(chat: readonly ChatEntry[], width: number, theme?: LobbyTheme, live?: string, busy = false, tick = 0): string[] {
   const lines: string[] = [];
-  const push = (role: ChatEntry["role"], text: string) => {
-    if (lines.length > 0) lines.push("");
-    const body = role === "note" ? paint(theme, "dim", text) : text;
-    lines.push(...wrapHanging(chatLead(role, theme), body, width));
+  const gap = () => {
+    if (lines.length > 0 && lines.at(-1) !== "") lines.push("");
   };
-  for (const entry of chat) push(entry.role, entry.text);
-  if (live?.trim()) push("oracle", `${live.trim()} ${paint(theme, "accent", spinner(tick))}`);
-  else if (busy) push("oracle", paint(theme, "dim", `${spinner(tick)} working…`));
+  let last: ChatEntry | undefined;
+  for (const entry of chat) {
+    gap();
+    if (entry.role === "note") {
+      lines.push(...eventLines(entry.text, entry.at, width, theme));
+      last = undefined;
+      continue;
+    }
+    const grouped = last?.role === entry.role && entry.at >= last.at && entry.at - last.at < GROUP_MS;
+    if (!grouped) lines.push(speakerLine(entry.role, width, theme, entry.at > 0 ? clock(entry.at) : ""));
+    lines.push(...(entry.role === "you" ? youLines(entry.text, width, theme) : oracleLines(entry.text, width, theme)));
+    last = entry;
+  }
+  if (live?.trim()) {
+    gap();
+    lines.push(speakerLine("oracle", width, theme, `${spinner(tick)} writing`), ...oracleLines(live.trim(), width, theme));
+  } else if (busy) {
+    gap();
+    lines.push(speakerLine("oracle", width, theme, `${spinner(tick)} working…`));
+  }
   return lines;
 }
 
 function emptyChat(input: HomeInput, width: number, theme?: LobbyTheme): string[] {
+  if (input.query) return wrap(paint(theme, "dim", `Nothing in the conversation matches "${input.query}".`), width);
+  if (input.emptyNote) return wrap(paint(theme, "dim", input.emptyNote), width);
   const lines = input.task
     ? [paint(theme, "dim", "Nothing said yet. Type below to talk to the oracle about this task.")]
     : [
@@ -103,16 +195,38 @@ function emptyChat(input: HomeInput, width: number, theme?: LobbyTheme): string[
   return [...lines.flatMap((line) => wrap(line, width)), ...(extra.length > 0 ? ["", ...extra.flatMap((line) => wrap(paint(theme, "muted", line), width))] : [])];
 }
 
-function conversation(input: HomeInput, width: number, height: number, theme?: LobbyTheme): string[] {
-  const all = input.chat.length > 0 || input.liveReply || input.busy ? chatLines(input.chat, width, theme, input.liveReply, input.busy, input.tick) : emptyChat(input, width, theme);
-  const shown = tail(all, height, input.chatOffset);
-  return fill(shown, height);
+function matches(text: string, query: string | undefined): boolean {
+  return !query || text.toLowerCase().includes(query.toLowerCase());
+}
+
+/** The feed as the search narrows it: only entries whose text (or source) contains the query. */
+export function filterFeed(input: Pick<HomeInput, "chat" | "activity" | "thoughts" | "query">): { chat: ChatEntry[]; activity: ActivityEntry[]; thoughts: ThoughtEntry[] } {
+  const query = input.query?.trim();
+  return {
+    chat: input.chat.filter((entry) => matches(entry.text, query)),
+    activity: input.activity.filter((entry) => matches(`${entry.source} ${entry.text}`, query)),
+    thoughts: input.thoughts.filter((entry) => matches(`${entry.source} ${entry.text}`, query)),
+  };
+}
+
+function conversation(input: HomeInput, chat: readonly ChatEntry[], width: number, theme?: LobbyTheme): string[] {
+  const searching = Boolean(input.query);
+  const live = searching ? undefined : input.liveReply;
+  const busy = !searching && input.busy;
+  return chat.length > 0 || live || busy ? chatLines(chat, width, theme, live, busy, input.tick) : emptyChat(input, width, theme);
+}
+
+function activity(input: HomeInput, entries: readonly ActivityEntry[], width: number, theme?: LobbyTheme): string[] {
+  if (entries.length === 0) return wrap(paint(theme, "dim", input.query ? `No activity matches "${input.query}".` : input.activityNote ?? "No activity yet."), width);
+  return entries.map((entry) => activityLine(entry, width, input.tick, theme));
 }
 
-function activity(input: HomeInput, width: number, height: number, theme?: LobbyTheme): string[] {
-  if (input.activity.length === 0) return fill([paint(theme, "dim", "No activity yet.")], height);
-  const lines = input.activity.slice(-Math.max(height, 1)).map((entry) => activityLine(entry, width, input.tick, theme));
-  return fill(tail(lines, height), height);
+/** The last `rows` lines, `offset` lines back from the newest (clamped), and where they start. */
+export function tailWindow(lines: readonly string[], rows: number, offset = 0): { shown: string[]; start: number; offset: number } {
+  const max = Math.max(0, lines.length - rows);
+  const back = Math.min(Math.max(0, offset), max);
+  const start = max - back;
+  return { shown: lines.slice(start, start + Math.max(0, rows)), start, offset: back };
 }
 
 /** The thought to show: a live one first, otherwise the newest. */
@@ -120,45 +234,97 @@ export function currentThought(thoughts: readonly ThoughtEntry[]): ThoughtEntry
   return [...thoughts].reverse().find((entry) => entry.live) ?? thoughts.at(-1);
 }
 
-function thinking(input: HomeInput, width: number, height: number, theme?: LobbyTheme): string[] {
-  const thought = currentThought(input.thoughts);
-  const right = thought ? `${thought.source} · ${thought.live ? "thinking" : since(input.now - thought.at)}` : "";
-  const header = rule(width, "Thinking", theme, right);
-  if (height <= 1) return [header].slice(0, height);
-  if (!thought) return fill([header, paint(theme, "dim", "Thoughts from the oracle and every agent appear here, and only here.")], height);
-  const body = wrap(thought.text, width).map((line) => italic(theme, paint(theme, "dim", line)));
-  return fill([header, ...tail(body, height - 1)], height);
+/** Every thought, oldest first: who thought it, then the thought, dimmed. */
+export function thoughtLines(thoughts: readonly ThoughtEntry[], width: number, theme?: LobbyTheme): string[] {
+  return thoughts.flatMap((thought) => {
+    const lead = `${paint(theme, sourceColor(thought.source), thought.source.padEnd(SOURCE_WIDTH).slice(0, SOURCE_WIDTH))} `;
+    return wrapHanging(lead, italic(theme, paint(theme, "dim", thought.text.replace(/\s*\n\s*/g, " "))), width);
+  });
 }
 
-function sceneLines(input: HomeInput, width: number, height: number): string[] {
+function thinkingContent(input: HomeInput, thoughts: readonly ThoughtEntry[], width: number, theme?: LobbyTheme): string[] {
+  if (thoughts.length > 0) return thoughtLines(thoughts, width, theme);
+  return [paint(theme, "dim", input.query ? `No thought matches "${input.query}".` : "Thoughts from the oracle and every agent appear here, and only here.")];
+}
+
+/**
+ * The scene: with animations off (the `animations` panel, off by default)
+ * only the task's status box, what the agents are doing and the checklist;
+ * with them on, the animated oracle and agents too. Its first line names the
+ * key that toggles the animations.
+ */
+function sceneLines(input: HomeInput, width: number, height: number, theme?: LobbyTheme): string[] {
   if (!input.task || !input.scene) return [];
-  const budget = Math.min(MAX_SCENE, Math.floor(height * SCENE_SHARE));
-  if (budget < 6) return [];
-  return input.scene(width, budget).slice(0, budget);
+  const animated = input.panels.animations && !input.stillScene;
+  const budget = Math.min(animated ? MAX_SCENE : MAX_STILL, Math.floor(height * SCENE_SHARE));
+  if (budget < (animated ? 6 : 4)) return [];
+  const lines = input.scene(width, budget, animated).slice(0, budget);
+  const note = input.keys && !input.stillScene ? `${input.keys.animations} ${animated ? "hides" : "shows"} animations` : undefined;
+  return keyNote(lines, width, note, theme);
 }
 
-/** The whole tab, exactly `height` lines of `width` columns. */
+/** `note` at the right end of the first line, dimmed, when it fits beside what is there. */
+function keyNote(lines: readonly string[], width: number, note: string | undefined, theme?: LobbyTheme): string[] {
+  const first = lines[0];
+  if (!note || first === undefined) return [...lines];
+  const gap = width - visibleWidth(first) - visibleWidth(note) - 1;
+  if (gap < 2) return [...lines];
+  return [`${first}${" ".repeat(gap)}${paint(theme, "dim", note)}`, ...lines.slice(1)];
+}
+
+function hiddenHint(input: HomeInput, width: number, height: number, theme?: LobbyTheme): string[] {
+  const keys = input.keys;
+  const text = keys
+    ? `Every pane is hidden — ${keys.conversation} conversation · ${keys.activity} activity · ${keys.thinking} thinking`
+    : "Every pane is hidden.";
+  const lines = wrap(paint(theme, "dim", text), width);
+  const top = Math.max(0, Math.floor((height - lines.length) / 2));
+  return fill([...Array.from({ length: top }, () => ""), ...lines], height, width);
+}
+
+/** `↓12` when a pane is scrolled back from its newest line, before the pane's usual note. */
+function rightNote(offset: number, note: string | undefined): string | undefined {
+  const parts = [offset > 0 ? `↓${offset}` : "", note ?? ""].filter(Boolean);
+  return parts.length > 0 ? parts.join(" · ") : undefined;
+}
+
+/** The whole tab, exactly `height` lines of `width` columns; hidden panes give their room to the rest. */
 export function renderHome(input: HomeInput, width: number, height: number, theme?: LobbyTheme): string[] {
   if (height <= 0) return [];
-  const scene = sceneLines(input, width, height);
+  const { panels } = input;
+  const feed = filterFeed(input);
+  const scene = sceneLines(input, width, height, theme);
   const rest = height - scene.length;
-  const thinkHeight = rest >= 16 ? Math.max(4, Math.floor(rest * 0.25)) : rest >= 9 ? 3 : 0;
+  const showMain = panels.conversation || panels.activity;
+  const thinkHeight = !panels.thinking ? 0 : !showMain ? rest : rest >= 18 ? Math.max(5, Math.floor(rest * 0.25)) : rest >= 10 ? 4 : 0;
   const main = rest - thinkHeight;
-  const chatTitle = input.task ? `Conversation · ${input.task.id}` : "Conversation";
-  let body: string[];
-  if (width >= HOME_COLUMNS_MIN) {
-    const [left, right] = split(width, 0.56);
-    const headers = columns([rule(left, chatTitle, theme)], [rule(right, "Activity", theme)], left, right, " ┬ ", theme);
-    const rows = columns(conversation(input, left, main - 1, theme), activity(input, right, main - 1, theme), left, right, " │ ", theme);
-    body = [...headers, ...rows];
-  } else {
-    const chatHeight = Math.max(1, Math.ceil(main * 0.6));
-    const activityHeight = main - chatHeight;
-    body = [
-      rule(width, chatTitle, theme),
-      ...conversation(input, width, chatHeight - 1, theme),
-      ...(activityHeight > 0 ? [rule(width, "Activity", theme), ...activity(input, width, activityHeight - 1, theme)] : []),
-    ];
-  }
-  return fill([...scene, ...fill(body, main), ...thinking(input, width, thinkHeight, theme)], height, width);
+  if (!showMain && !panels.thinking) return fill([...scene, ...hiddenHint(input, width, rest, theme)], height, width);
+  const matches = (count: number) => `${count} match${count === 1 ? "" : "es"}`;
+  /** One scrollable pane: its lines, tailed to its rows and scrolled back by its offset, in a box that records where it sits. */
+  const pane = (name: HomePane, title: string, note: string | undefined, lines: (inner: number) => string[]) => (top: number, left: number, w: number, h: number): string[] => {
+    const all = lines(Math.max(1, w - 4));
+    const view = tailWindow(all, h - 2, input.offsets?.[name] ?? 0);
+    notePane(input.panes, name, top, left, w, h, all.length);
+    const right = rightNote(view.offset, note);
+    return box(w, h, view.shown, { title, ...(right ? { right } : {}), focused: input.focus === name, scroll: { total: all.length, start: view.start }, theme });
+  };
+  const chatBox = pane("conversation", input.title ? `Conversation · ${input.title}` : "Conversation", input.query ? matches(feed.chat.length) : input.keys?.conversation, (inner) => conversation(input, feed.chat, inner, theme));
+  const activityBox = pane("activity", "Activity", input.query ? matches(feed.activity.length) : input.keys?.activity, (inner) => activity(input, feed.activity, inner, theme));
+  const thought = currentThought(feed.thoughts);
+  const thinkingNote = thought ? `${thought.source} · ${thought.live ? "thinking" : since(input.now - thought.at)}` : input.keys?.thinking;
+  const thinkingBox = pane("thinking", "Thinking", thinkingNote, (inner) => thinkingContent(input, feed.thoughts, inner, theme));
+  const top = scene.length;
+  let body: string[] = [];
+  if (main > 0 && panels.conversation && panels.activity) {
+    if (width >= HOME_COLUMNS_MIN) {
+      const left = Math.round((width - 1) * 0.56);
+      body = beside([chatBox(top, 0, left, main), activityBox(top, left + 1, width - 1 - left, main)]);
+    } else {
+      const chatHeight = Math.max(3, Math.ceil(main * 0.6));
+      body = [...chatBox(top, 0, width, chatHeight), ...(main - chatHeight >= 3 ? activityBox(top + chatHeight, 0, width, main - chatHeight) : [])];
+    }
+  } else if (main > 0 && panels.conversation) body = chatBox(top, 0, width, main);
+  else if (main > 0 && panels.activity) body = activityBox(top, 0, width, main);
+  const think = thinkHeight >= 3 ? thinkingBox(top + main, 0, width, thinkHeight) : [];
+  return fill([...scene, ...fill(body, main), ...think], height, width);
 }

package/src/lobby/tabs/metrics.ts

@@ -1,14 +1,16 @@
 /**
- * The Metrics tab: how each model performs at each thinking level — how long
- * its runs take (mean, median, p90), how often they succeed, how many turns,
- * tools and tokens they use, their throughput and cost — across the Master,
- * every subagent role, quick fixes and planner turns. Columns drop from the
- * right as the terminal narrows.
+ * The Metrics tab: how each model performs at each thinking level, as a
+ * dashboard — a row of stat tiles, average run time as bars (one hue),
+ * success rate as meters with a status icon, where the time goes by agent as
+ * a stacked bar with a legend, and the full table underneath (columns drop
+ * from the right as the terminal narrows). It covers the Master, every
+ * subagent role, quick fixes and planning rounds.
  */
 import { shortDuration } from "../../text.ts";
 import { tokens } from "../../pi/run-summary.ts";
 import type { GroupBy, MetricGroup, MetricRecord, SortKey, TaskStats, TaskTimeGroup } from "../../state/metrics.ts";
-import { bold, fill, fit, paint, rule, selectRow, windowStart, type LobbyTheme } from "../layout.ts";
+import { bar, beside, bold, box, fill, fit, meter, notePane, paint, selectRow, sparkline, stackedBar, windowStart, wrap, type LobbyTheme, type PaneLayout } from "../layout.ts";
+import { sourceColor } from "./home.ts";
 
 export interface MetricsTabInput {
   groups: readonly MetricGroup[];
@@ -19,6 +21,10 @@ export interface MetricsTabInput {
   by: GroupBy;
   sort: SortKey;
   selected: number;
+  /** The search in force; records and groups are already narrowed by it. */
+  query?: string;
+  /** Filled with where the table landed, for the wheel. */
+  panes?: PaneLayout;
 }
 
 interface Column {
@@ -111,52 +117,159 @@ export function tableLines(input: MetricsTabInput, width: number, theme?: LobbyT
   return { header: bold(theme, paint(theme, "muted", fit(head, width))), rows };
 }
 
-function summary(input: MetricsTabInput, theme?: LobbyTheme): string[] {
-  const { stats, records } = input;
+/** A stat tile: the label in its border, the value large, one line of context. */
+function tile(width: number, label: string, value: string, sub: string, theme?: LobbyTheme): string[] {
+  return box(width, 4, [bold(theme, paint(theme, "accent", value)), paint(theme, "dim", sub)], { title: label, theme });
+}
+
+function timed(records: readonly MetricRecord[]): MetricRecord[] {
+  return records.filter((record) => record.status !== "cancelled" && record.durationMs > 0);
+}
+
+/** The KPI row: runs (with recent run times), success, average run, cost, tasks. */
+export function tileRow(input: MetricsTabInput, width: number, theme?: LobbyTheme): string[] {
+  const { records, stats } = input;
+  const done = timed(records);
+  const ok = records.filter((record) => record.status === "success").length;
+  const stalls = records.filter((record) => record.stalled || record.status === "timeout").length;
   const cost = records.reduce((sum, record) => sum + (record.cost ?? 0), 0);
-  const tasks = [
-    `${stats.completed} completed${stats.completed > 0 && stats.avgCompleteMs > 0 ? ` (avg ${shortDuration(stats.avgCompleteMs)} from request to done)` : ""}`,
-    `${stats.active} active`,
-    `${stats.abandoned} abandoned`,
-  ].join(" · ");
-  return [
-    `${bold(theme, "Tasks")} ${tasks}`,
-    `${bold(theme, "Runs")} ${records.length} recorded · ${money(cost)} total · grouped by ${input.by === "model" ? "model + thinking" : "model + thinking + agent"} · sorted by ${input.sort}`,
-  ];
-}
-
-/** Per-agent averages across every model, a quick read of where the time goes. */
-function agentLine(records: readonly MetricRecord[], theme?: LobbyTheme): string {
+  const avg = done.length > 0 ? done.reduce((sum, record) => sum + record.durationMs, 0) / done.length : 0;
+  const sorted = done.map((record) => record.durationMs).sort((a, b) => a - b);
+  const p90 = sorted.length > 0 ? sorted[Math.min(sorted.length - 1, Math.ceil(0.9 * sorted.length) - 1)]! : 0;
+  const count = width >= 100 ? 5 : width >= 60 ? 3 : 2;
+  const tileWidth = Math.floor((width - (count - 1)) / count);
+  const rate = records.length > 0 ? ok / records.length : 0;
+  const tiles = [
+    tile(tileWidth, "Runs", String(records.length), sparkline(done.map((record) => record.durationMs), tileWidth - 4) || "no runs yet", theme),
+    tile(tileWidth, "Success", records.length > 0 ? `${status(rate).icon} ${Math.round(rate * 100)}%` : "—", `${records.length - ok} failed${stalls > 0 ? ` · ${stalls} stalled` : ""}`, theme),
+    tile(tileWidth, "Avg run", duration(avg), `p90 ${duration(p90)}`, theme),
+    tile(tileWidth, "Cost", money(cost), records.length > 0 ? `${money(cost / records.length)} per run` : "—", theme),
+    tile(tileWidth, "Tasks", `${stats.completed} done`, stats.avgCompleteMs > 0 ? `avg ${shortDuration(stats.avgCompleteMs)} · ${stats.active} active` : `${stats.active} active`, theme),
+  ].slice(0, count);
+  return beside(tiles);
+}
+
+/** Success thresholds, each with an icon so the state never rests on colour alone. */
+function status(rate: number): { icon: string; color: "success" | "warning" | "error"; word: string } {
+  if (rate >= 0.9) return { icon: "✓", color: "success", word: "healthy" };
+  if (rate >= 0.7) return { icon: "!", color: "warning", word: "shaky" };
+  return { icon: "✗", color: "error", word: "failing" };
+}
+
+/** Room for `model · thinking` beside a chart's marks: about a third of it, 10 to 26 columns. */
+function chartLabelWidth(inner: number): number {
+  return Math.min(26, Math.max(10, Math.floor(inner * 0.34)));
+}
+
+function groupLabel(group: MetricGroup, by: GroupBy): string {
+  const agent = by === "model-kind" ? ` · ${agentsCell(group, by)}` : "";
+  return `${group.model} · ${group.thinking}${agent}`;
+}
+
+/** Average run time per model and thinking level: one hue, longest first, value and p90 beside each bar. */
+export function timeBars(groups: readonly MetricGroup[], by: GroupBy, width: number, height: number, theme?: LobbyTheme): string[] {
+  const inner = width - 4;
+  const rows = [...groups].filter((group) => group.avgMs > 0).sort((a, b) => b.avgMs - a.avgMs).slice(0, Math.max(0, height - 2));
+  const labelWidth = chartLabelWidth(inner);
+  // The p90 goes first when room runs out.
+  const withP90 = inner - labelWidth >= 34;
+  const valueWidth = withP90 ? 19 : 7;
+  const barWidth = Math.max(4, inner - labelWidth - valueWidth - 2);
+  const max = Math.max(...rows.map((group) => group.avgMs), 1);
+  const lines = rows.map((group) => {
+    const value = `${duration(group.avgMs).padStart(7)}${withP90 ? ` ${paint(theme, "dim", `p90 ${duration(group.p90Ms)}`)}` : ""}`;
+    return `${paint(theme, "muted", fit(groupLabel(group, by), labelWidth))} ${fit(paint(theme, "accent", bar(group.avgMs, max, barWidth)), barWidth)} ${value}`;
+  });
+  return box(width, height, lines.length > 0 ? lines : [paint(theme, "dim", "No timed runs yet.")], { title: "Average run time", right: "per model · thinking", theme });
+}
+
+/** Success rate per model and thinking level: a meter, an icon and the number. */
+export function successMeters(groups: readonly MetricGroup[], by: GroupBy, width: number, height: number, theme?: LobbyTheme): string[] {
+  const inner = width - 4;
+  const rows = [...groups].sort((a, b) => a.successes / a.runs - b.successes / b.runs).slice(0, Math.max(0, height - 2));
+  const labelWidth = chartLabelWidth(inner);
+  const meterWidth = Math.max(4, inner - labelWidth - 12);
+  const lines = rows.map((group) => {
+    const rate = group.runs > 0 ? group.successes / group.runs : 0;
+    const state = status(rate);
+    const paintFill = (text: string) => paint(theme, state.color, text);
+    const paintTrack = (text: string) => paint(theme, "borderMuted", text);
+    return `${paint(theme, "muted", fit(groupLabel(group, by), labelWidth))} ${meter(rate, meterWidth, paintFill, paintTrack)} ${paint(theme, state.color, state.icon)} ${`${Math.round(rate * 100)}%`.padStart(4)} ${paint(theme, "dim", `${group.runs}`)}`;
+  });
+  return box(width, height, lines.length > 0 ? lines : [paint(theme, "dim", "No runs yet.")], { title: "Success rate", right: "✓ ≥90% · ! ≥70% · ✗ below", theme });
+}
+
+/** Where the time goes: each agent's share of all run time, then how long a task takes per oracle model. */
+export function timeShare(records: readonly MetricRecord[], taskTimes: readonly TaskTimeGroup[] | undefined, width: number, theme?: LobbyTheme): string[] {
+  const inner = width - 4;
   const byAgent = new Map<string, { n: number; ms: number }>();
-  for (const record of records) {
-    if (record.status === "cancelled" || record.durationMs <= 0) continue;
+  for (const record of timed(records)) {
     const entry = byAgent.get(record.agent) ?? { n: 0, ms: 0 };
     entry.n += 1;
     entry.ms += record.durationMs;
     byAgent.set(record.agent, entry);
   }
-  const parts = [...byAgent.entries()].sort((a, b) => b[1].n - a[1].n).map(([agent, entry]) => `${agent} ${shortDuration(entry.ms / entry.n)} ${paint(theme, "dim", `×${entry.n}`)}`);
-  return parts.length > 0 ? `${bold(theme, "Avg by agent")} ${parts.join(paint(theme, "dim", " · "))}` : "";
-}
-
-/** One line: how long a task takes on each oracle model, request to done. */
-function taskTimeLine(groups: readonly TaskTimeGroup[] | undefined, theme?: LobbyTheme): string {
-  if (!groups || groups.length === 0) return "";
-  const parts = groups.map((group) => `${group.model} ${paint(theme, "dim", group.thinking)} ${shortDuration(group.avgMs)} ${paint(theme, "dim", `×${group.tasks}`)}`);
-  return `${bold(theme, "Task time by oracle")} ${parts.join(paint(theme, "dim", " · "))}`;
+  const agents = [...byAgent.entries()].sort((a, b) => b[1].ms - a[1].ms);
+  const total = agents.reduce((sum, [, entry]) => sum + entry.ms, 0);
+  const lines: string[] = [];
+  if (total > 0) {
+    lines.push(stackedBar(agents.map(([agent, entry]) => ({ value: entry.ms, paint: (text: string) => paint(theme, sourceColor(agent), text) })), inner));
+    const legend = agents.map(([agent, entry]) => `${paint(theme, sourceColor(agent), "■")} ${agent} ${Math.round((entry.ms / total) * 100)}% ${paint(theme, "dim", `avg ${shortDuration(entry.ms / entry.n)} ×${entry.n}`)}`);
+    lines.push(...wrap(legend.join("   "), inner));
+  } else lines.push(paint(theme, "dim", "No timed runs yet."));
+  if (taskTimes && taskTimes.length > 0) {
+    const max = Math.max(...taskTimes.map((group) => group.avgMs), 1);
+    const labelWidth = chartLabelWidth(inner);
+    const barWidth = Math.max(4, inner - labelWidth - 18);
+    lines.push("", bold(theme, "Request to done, by the oracle's model"));
+    for (const group of taskTimes) {
+      lines.push(`${paint(theme, "muted", fit(`${group.model} · ${group.thinking}`, labelWidth))} ${fit(paint(theme, "accent", bar(group.avgMs, max, barWidth)), barWidth)} ${shortDuration(group.avgMs).padStart(7)} ${paint(theme, "dim", `×${group.tasks}`)}`);
+    }
+  }
+  return box(width, lines.length + 2, lines, { title: "Where the time goes", right: "share of run time by agent", theme });
 }
 
+/** The metrics dashboard: KPI tiles, the charts, and the full table filling what is left. */
 export function renderMetrics(input: MetricsTabInput, width: number, height: number, theme?: LobbyTheme): string[] {
   if (height <= 0) return [];
-  const head = [...summary(input, theme), taskTimeLine(input.taskTimes, theme), agentLine(input.records, theme)].filter(Boolean);
-  if (input.groups.length === 0) {
-    return fill([
-      ...head, "", rule(width, "Model performance", theme),
-      paint(theme, "dim", "No runs recorded yet. Every Master turn, subagent run, quick fix and planning round lands here with its model, thinking level, time, tokens and cost."),
-    ], height, width);
+  if (input.records.length === 0) {
+    const empty = input.query ? `No run matches "${input.query}".` : "No runs recorded yet. Every Master turn, subagent run, quick fix and planning round lands here with its model, thinking level, time, tokens and cost.";
+    return fill([...(height >= 8 ? tileRow(input, width, theme) : []), ...box(width, Math.max(3, height - (height >= 8 ? 4 : 0)), [paint(theme, "dim", empty)], { title: "Model performance", theme })], height, width);
+  }
+  const sections: string[] = [];
+  let room = height;
+  if (room >= 16) {
+    sections.push(...tileRow(input, width, theme));
+    room -= 4;
+  }
+  const chartHeight = Math.min(input.groups.length + 2, 8);
+  if (room - chartHeight >= 9) {
+    if (width >= 100) {
+      const left = Math.floor((width - 1) / 2);
+      sections.push(...beside([timeBars(input.groups, input.by, left, chartHeight, theme), successMeters(input.groups, input.by, width - 1 - left, chartHeight, theme)]));
+      room -= chartHeight;
+    } else {
+      sections.push(...timeBars(input.groups, input.by, width, chartHeight, theme));
+      room -= chartHeight;
+    }
   }
-  const table = tableLines(input, width, theme);
-  const bodyHeight = Math.max(0, height - head.length - 3);
-  const start = windowStart(input.selected, table.rows.length, bodyHeight);
-  return fill([...head, "", rule(width, "Model performance", theme, "g group · s sort"), table.header, ...table.rows.slice(start, start + bodyHeight)], height, width);
+  const share = timeShare(input.records, input.taskTimes, width, theme);
+  if (room - share.length >= 6) {
+    sections.push(...share);
+    room -= share.length;
+  }
+  const table = tableLines(input, width - 4, theme);
+  const tableRows = Math.max(0, room - 3);
+  const start = windowStart(input.selected, table.rows.length, tableRows);
+  const grouping = input.by === "model" ? "by model · thinking" : "by model · thinking · agent";
+  notePane(input.panes, "table", sections.length, 0, width, room, table.rows.length);
+  sections.push(...box(width, room, [table.header, ...table.rows.slice(start, start + tableRows)], { title: "All models", right: `${grouping} · sorted by ${input.sort} · g s`, scroll: { total: table.rows.length + 1, start }, theme }));
+  return fill(sections, height, width);
+}
+
+/** Runs whose agent, model, thinking level, kind, status or task mention `query`. */
+export function filterRecords(records: readonly MetricRecord[], query: string | undefined): MetricRecord[] {
+  const needle = query?.trim().toLowerCase();
+  if (!needle) return [...records];
+  return records.filter((record) => [record.agent, record.model ?? "", record.thinking ?? "", record.kind, record.status, record.taskId ?? ""].join(" ").toLowerCase().includes(needle));
 }