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

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));
 }

package/src/lobby/tabs/plan.ts

@@ -2,13 +2,15 @@
  * The Plan tab: task planning mode with a planning panel. The roster shows
  * each seat — the oracle chairing, DEV, DESIGN, QA and RESEARCH — and what it
  * is doing; the conversation shows every seat's questions, attributed, with
- * your answers; the other pane shows the draft plan converging and what each
- * seat said the plan must respect.
+ * their options and your answers; the draft pane shows the plan rendered as
+ * Markdown, with a line cursor for commenting on a line, and what each seat
+ * said the plan must respect.
  */
-import { ORACLE_LABEL, type PanelNote, type PanelQuestion, type PlannerMessage, type PlannerReply, type PlannerSeed } from "../planner.ts";
+import { stripTerminalSequences } from "@earendil-works/pi-tui";
+import { ORACLE_LABEL, type LineComment, type PanelNote, type PanelQuestion, type PlannerMessage, type PlannerReply, type PlannerSeed } from "../planner.ts";
 import type { PlannedTask } from "../../state/backlog.ts";
-import { bold, columns, fill, markdownLines, paint, rule, spinner, split, tail, wrap, wrapHanging, type LobbyTheme } from "../layout.ts";
-import { sourceColor } from "./home.ts";
+import { beside, bold, box, fill, italic, markdownLines, notePane, paint, selectRow, spinner, wrap, wrapHanging, type LobbyTheme, type PaneLayout } from "../layout.ts";
+import { sourceColor, tailWindow } from "./home.ts";
 
 export interface SeatView {
   label: string;
@@ -36,6 +38,25 @@ export interface PlanView {
   seed?: PlannerSeed;
   saved?: PlannedTask;
   title?: string;
+  /** The round's questions wait for answers. */
+  awaitingAnswers: boolean;
+  /** Questionnaires already answered for this round. */
+  answeredChunks: number;
+  lineComments: readonly LineComment[];
+}
+
+/** Where the draft pane landed, so the lobby can map a click or the cursor to a line. */
+export interface PlanLayout {
+  /** First row of the draft's text inside the tab body, and its left column. */
+  draftTop: number;
+  draftLeft: number;
+  draftWidth: number;
+  /** Rows of draft text visible at once. */
+  draftRows: number;
+  /** Index of the first draft line shown. */
+  draftStart: number;
+  /** Every draft line, unstyled, in order. */
+  draftText: string[];
 }
 
 export interface PlanTabInput {
@@ -47,8 +68,15 @@ export interface PlanTabInput {
   offset: number;
   focus: "talk" | "draft";
   draftOffset: number;
+  /** The draft line the cursor is on, while the draft has the focus. */
+  cursor?: number;
   tick: number;
   notice?: string;
+  query?: string;
+  /** Filled with the draft pane's geometry during render. */
+  layout?: PlanLayout;
+  /** Filled with where the conversation (`talk`) and the draft landed, for scrolling. */
+  panes?: PaneLayout;
 }
 
 export const PLAN_COLUMNS_MIN = 100;
@@ -61,11 +89,13 @@ function intro(input: PlanTabInput, width: number, theme?: LobbyTheme): string[]
   const text = [
     bold(theme, "Plan a task with the whole team before anyone writes code."),
     "",
-    `Describe what you want below. The planning panel — the oracle chairing${seats.length > 0 ? `, with ${seats.join(", ")}` : ""} — reads the codebase and grills you, each seat from its own domain: contracts and data, flows and states, acceptance criteria and tests, libraries and prior art. You answer everyone in one conversation, and the oracle folds every answer into the draft plan, so all the agents start from the same decisions.`,
+    `Describe what you want below. The planning panel — the oracle chairing${seats.length > 0 ? `, with ${seats.join(", ")}` : ""} — reads the codebase and questions you, each seat from its own domain: contracts and data, flows and states, acceptance criteria and tests, libraries and prior art.`,
+    "",
+    "After each round the oracle puts the panel's questions to you one at a time, each with options and room for your own answer, and folds every answer into the draft plan, so all the agents start from the same decisions.",
     "",
-    "When the panel agrees the plan is clear, press s to save it to the pending tasks list; start it from the Tasks tab whenever you like. To plan a GitHub issue, pick it in the Issues tab and press p. While browsing (esc), 1-4 seat or unseat DEV, DESIGN, QA and RESEARCH.",
+    "Comment on any line of the draft: enter moves to the draft, ↑↓ pick a line (or click it), c comments. When the panel agrees, s saves the plan to the pending tasks list. While browsing (esc), 1-4 seat or unseat DEV, DESIGN, QA and RESEARCH.",
     "",
-    paint(theme, "dim", `oracle: ${input.profile}`),
+    paint(theme, "dim", `oracle: ${input.profile} (m changes it; each seat uses its domain's settings, alt+s)`),
     ...members.map((seat) => paint(theme, "dim", `${seat.label.toLowerCase()}: ${seat.seated ? seat.profile ?? "" : "not seated"}`)),
   ];
   return text.flatMap((line) => wrap(line, width));
@@ -76,7 +106,11 @@ function statusLine(view: PlanView, input: PlanTabInput, theme?: LobbyTheme): st
   if (view.busy) parts.push(`${paint(theme, "accent", spinner(input.tick))} round ${view.turns}`);
   else if (view.error) parts.push(paint(theme, "error", `✗ ${view.error.split("\n")[0]} — esc, then r retries`));
   else if (view.reply?.status === "ready") parts.push(paint(theme, "success", "✓ READY — the panel agrees; s saves it as a pending task"));
-  else if (view.messages.some((message) => message.role === "planner")) parts.push(paint(theme, "warning", `● GRILLING · ${view.questions.length} open question${view.questions.length === 1 ? "" : "s"}`));
+  else if (view.awaitingAnswers) {
+    const left = view.answeredChunks > 0 ? " (some answered — enter resumes)" : " — enter answers them one at a time";
+    parts.push(paint(theme, "warning", `● ${view.questions.length} question${view.questions.length === 1 ? "" : "s"} for you${left}`));
+  }
+  if (view.lineComments.length > 0) parts.push(paint(theme, "accent", `◆ ${view.lineComments.length} line comment${view.lineComments.length === 1 ? "" : "s"} to send`));
   if (view.saved) parts.push(paint(theme, "success", `saved as ${view.saved.id}`));
   if (!view.busy && view.turns > 0) parts.push(paint(theme, "dim", `round ${view.turns}`));
   return parts.join(paint(theme, "dim", " · ")) || paint(theme, "dim", "Answer below; enter sends.");
@@ -99,36 +133,67 @@ export function rosterLines(view: PlanView, width: number, tick: number, theme?:
   return wrap(`${paint(theme, "dim", "panel")}  ${cells.join(paint(theme, "dim", " · "))}`, width);
 }
 
-function questionLines(questions: readonly PanelQuestion[], width: number, theme?: LobbyTheme): string[] {
-  return questions.flatMap((question, index) => {
-    const lead = `${paint(theme, "dim", `${String(index + 1).padStart(2)}.`)} ${bold(theme, paint(theme, sourceColor(question.from), question.from.padEnd(LABEL_WIDTH)))} `;
-    return wrapHanging(lead, question.text, width);
+/** Each question numbered as the panel asked it (a search may show only some), with its options beneath. */
+function questionLines(questions: ReadonlyArray<{ question: PanelQuestion; number: number }>, width: number, theme?: LobbyTheme): string[] {
+  return questions.flatMap(({ question, number }) => {
+    const lead = `${paint(theme, "dim", `${String(number).padStart(2)}.`)} ${bold(theme, paint(theme, sourceColor(question.from), question.from.padEnd(LABEL_WIDTH)))} `;
+    const indent = " ".repeat(4 + LABEL_WIDTH);
+    const options = question.options.map((option) => wrapHanging(`${indent}${paint(theme, "dim", "○")} `, `${option.label}${option.description ? paint(theme, "dim", ` — ${option.description}`) : ""}`, width)).flat();
+    return [...wrapHanging(lead, question.text, width), ...options];
   });
 }
 
-export function conversationLines(view: PlanView, width: number, theme?: LobbyTheme): string[] {
+function matches(text: string, query: string | undefined): boolean {
+  return !query || text.toLowerCase().includes(query.toLowerCase());
+}
+
+export function conversationLines(view: PlanView, width: number, theme?: LobbyTheme, query?: string): string[] {
   const lines: string[] = [];
   if (view.seed) {
     lines.push(...wrap(paint(theme, "dim", `from issue #${view.seed.issue.number} — ${view.seed.issue.title}`), width), "");
   }
   for (const message of view.messages) {
+    const questions = (message.questions ?? [])
+      .map((question, index) => ({ question, number: index + 1 }))
+      .filter(({ question }) => matches(`${question.from} ${question.text} ${question.options.map((option) => option.label).join(" ")}`, query));
+    if (message.role === "you" ? !matches(message.text, query) : message.questions?.length ? questions.length === 0 : !matches(message.text, query)) continue;
     if (lines.length > 0 && lines.at(-1) !== "") lines.push("");
     if (message.role === "you") {
       lines.push(...wrapHanging(`${bold(theme, paint(theme, "accent", "you"))} ${paint(theme, "dim", "▸")} `, message.text, width));
       continue;
     }
     lines.push(`${bold(theme, paint(theme, "toolTitle", "panel"))} ${paint(theme, "dim", "▸")}`);
-    lines.push(...(message.questions && message.questions.length > 0 ? questionLines(message.questions, width, theme) : wrap(message.text, width)));
+    lines.push(...(questions.length > 0 ? questionLines(questions, width, theme) : wrap(message.text, width)));
   }
+  if (query && lines.length === 0) return wrap(paint(theme, "dim", `Nothing in the conversation matches "${query}".`), width);
   return lines;
 }
 
-export function draftLines(view: PlanView, width: number, theme?: LobbyTheme): string[] {
+interface DraftLine {
+  text: string;
+  plain: string;
+}
+
+/** The draft as lines: the plan in Markdown, commented lines marked with their comments beneath, then each seat's needs. */
+export function draftLines(view: PlanView, width: number, theme?: LobbyTheme): DraftLine[] {
   const plan = view.reply?.plan;
-  const lines = plan ? markdownLines(plan, width, theme) : wrap(paint(theme, "dim", view.busy ? "The draft appears after the panel's first round." : "No draft yet."), width);
-  if (view.notes.length === 0) return lines;
-  lines.push("", rule(width, "What each seat needs", theme));
-  for (const note of view.notes) lines.push(...wrapHanging(`${paint(theme, sourceColor(note.from), note.from.padEnd(LABEL_WIDTH))} `, note.text, width));
+  const line = (text: string): DraftLine => ({ text, plain: stripTerminalSequences(text).trimEnd() });
+  if (!plan) return wrap(paint(theme, "dim", view.busy ? "The draft appears after the panel's first round." : "No draft yet."), width).map(line);
+  const comments = new Map<string, string[]>();
+  for (const comment of view.lineComments) comments.set(comment.line, [...(comments.get(comment.line) ?? []), comment.text]);
+  const lines: DraftLine[] = [];
+  for (const rendered of markdownLines(plan, Math.max(1, width - 2), theme)) {
+    const entry = line(rendered);
+    const notes = comments.get(entry.plain.trim());
+    lines.push({ text: `${notes ? paint(theme, "warning", "◆") : " "} ${rendered}`, plain: entry.plain });
+    for (const note of notes ?? []) {
+      for (const wrapped of wrap(italic(theme, paint(theme, "accent", `↳ ${note}`)), Math.max(1, width - 4))) lines.push({ text: `    ${wrapped}`, plain: entry.plain });
+    }
+  }
+  if (view.notes.length > 0) {
+    lines.push(line(""), line(bold(theme, paint(theme, "mdHeading", "What each seat needs"))));
+    for (const note of view.notes) for (const wrapped of wrapHanging(`${paint(theme, sourceColor(note.from), note.from.padEnd(LABEL_WIDTH))} `, note.text, width)) lines.push(line(wrapped));
+  }
   return lines;
 }
 
@@ -136,25 +201,42 @@ export function renderPlan(input: PlanTabInput, width: number, height: number, t
   if (height <= 0) return [];
   const notice = input.notice ? [paint(theme, "accent", input.notice)] : [];
   const view = input.session;
-  if (!view) return fill([...notice, rule(width, "Plan", theme, input.profile), ...intro(input, width, theme)], height, width);
+  if (!view) return fill([...notice, ...box(width, height - notice.length, intro(input, width - 4, theme), { title: "Plan", right: input.profile, theme })], height, width);
   const header = [
     ...notice,
-    rule(width, view.title ? `Planning · ${view.title}` : "Planning", theme, input.profile),
-    statusLine(view, input, theme),
+    ...wrap(`${bold(theme, view.title ? `Planning · ${view.title}` : "Planning")}  ${statusLine(view, input, theme)}`, width),
     ...rosterLines(view, width, input.tick, theme),
   ];
   const bodyHeight = Math.max(0, height - header.length);
-  const draftTitle = `${view.reply?.status === "ready" ? "Plan ✓" : "Draft plan"}${input.focus === "draft" ? " ◂" : ""}`;
-  const talkTitle = `Conversation${input.focus === "talk" ? " ◂" : ""}`;
-  if (width >= PLAN_COLUMNS_MIN) {
-    const [left, right] = split(width, 0.5);
-    const talk = fill([rule(left, talkTitle, theme), ...tail(conversationLines(view, left, theme), bodyHeight - 1, input.offset)], bodyHeight);
-    const draft = draftLines(view, right, theme);
-    const draftPane = fill([rule(right, draftTitle, theme), ...draft.slice(Math.max(0, Math.min(input.draftOffset, draft.length - 1)))], bodyHeight);
-    return fill([...header, ...columns(talk, draftPane, left, right, " │ ", theme)], height, width);
+  const wide = width >= PLAN_COLUMNS_MIN;
+  const talkWidth = wide ? Math.round((width - 1) * 0.46) : width;
+  const draftWidth = wide ? width - 1 - talkWidth : width;
+  const talkHeight = wide ? bodyHeight : Math.max(3, Math.ceil(bodyHeight * 0.5));
+  const draftHeight = wide ? bodyHeight : bodyHeight - talkHeight;
+  const talkLines = conversationLines(view, talkWidth - 4, theme, input.query);
+  const talkView = tailWindow(talkLines, talkHeight - 2, input.offset);
+  const talkNote = [talkView.offset > 0 ? `↓${talkView.offset}` : "", input.query ? "filtered" : ""].filter(Boolean).join(" · ");
+  const talk = box(talkWidth, talkHeight, talkView.shown, { title: "Conversation", ...(talkNote ? { right: talkNote } : {}), focused: input.focus === "talk", scroll: { total: talkLines.length, start: talkView.start }, theme });
+  notePane(input.panes, "talk", header.length, 0, talkWidth, talkHeight, talkLines.length);
+  const draft = draftLines(view, draftWidth - 4, theme);
+  const rows = Math.max(0, draftHeight - 2);
+  const start = Math.max(0, Math.min(input.draftOffset, Math.max(0, draft.length - rows)));
+  const cursor = input.focus === "draft" ? input.cursor : undefined;
+  const shown = draft.slice(start, start + rows).map((entry, index) => selectRow(theme, entry.text, draftWidth - 4, start + index === cursor, true));
+  const draftTitle = view.reply?.status === "ready" ? "Plan ✓" : "Draft plan";
+  const position = draft.length > rows ? `${start + 1}-${Math.min(draft.length, start + rows)}/${draft.length}` : "";
+  const draftPane = draftHeight >= 3 ? box(draftWidth, draftHeight, shown, { title: draftTitle, ...(position ? { right: position } : {}), focused: input.focus === "draft", scroll: { total: draft.length, start }, theme }) : [];
+  if (draftHeight >= 3) notePane(input.panes, "draft", header.length + (wide ? 0 : talkHeight), wide ? talkWidth + 1 : 0, draftWidth, draftHeight, draft.length);
+  if (input.layout) {
+    Object.assign(input.layout, {
+      draftTop: header.length + (wide ? 0 : talkHeight) + 1,
+      draftLeft: (wide ? talkWidth + 1 : 0) + 2,
+      draftWidth: draftWidth - 4,
+      draftRows: rows,
+      draftStart: start,
+      draftText: draft.map((entry) => entry.plain),
+    } satisfies PlanLayout);
   }
-  const talkHeight = Math.max(2, Math.ceil(bodyHeight * 0.55));
-  const talk = [rule(width, talkTitle, theme), ...fill(tail(conversationLines(view, width, theme), talkHeight - 1, input.offset), talkHeight - 1)];
-  const draft = draftLines(view, width, theme);
-  return fill([...header, ...talk, rule(width, draftTitle, theme), ...draft.slice(Math.max(0, Math.min(input.draftOffset, draft.length - 1)))], height, width);
+  const body = wide ? beside([talk, draftPane]) : [...talk, ...draftPane];
+  return fill([...header, ...body], height, width);
 }

package/src/lobby/tabs/quickfix.ts

@@ -5,7 +5,7 @@
  */
 import { shortDuration } from "../../text.ts";
 import { jobTitle, type QuickFixJob } from "../quickfix.ts";
-import { bold, clock, columns, fill, markdownLines, paint, rule, selectRow, spinner, split, windowStart, wrap, wrapHanging, type LobbyTheme } from "../layout.ts";
+import { beside, bold, box, clock, detailWindow, fill, markdownLines, notePane, paint, position, rule, selectRow, spinner, windowStart, wrap, wrapHanging, type LobbyTheme, type PaneLayout } from "../layout.ts";
 
 export interface QuickFixTabInput {
   jobs: readonly QuickFixJob[];
@@ -16,6 +16,10 @@ export interface QuickFixTabInput {
   profile: string;
   tick: number;
   now: number;
+  /** The search in force: only jobs that mention it are listed. */
+  query?: string;
+  /** Filled with where the list and the detail landed, for scrolling. */
+  panes?: PaneLayout;
 }
 
 export const QUICKFIX_COLUMNS_MIN = 90;
@@ -77,25 +81,49 @@ function intro(input: QuickFixTabInput, width: number, theme?: LobbyTheme): stri
     "",
     "Keep them small: a rename, a typo, a one-function fix. If it turns out bigger, the agent stops and says so, and you can plan it as a task.",
     "",
-    paint(theme, "dim", `quick fix: ${input.profile}`),
+    paint(theme, "dim", `quick fix: ${input.profile} — esc, then m changes the model, thinking, time limit and instructions (alt+s: all settings)`),
   ].flatMap((line) => wrap(line, width));
 }
 
+/** Jobs whose prompt, steps or report mention `query`. */
+export function filterJobs(jobs: readonly QuickFixJob[], query: string | undefined): QuickFixJob[] {
+  const needle = query?.trim().toLowerCase();
+  if (!needle) return [...jobs];
+  return jobs.filter((job) => [job.prompt, job.report ?? "", job.error ?? "", ...job.steps.map((step) => step.text)].join("\n").toLowerCase().includes(needle));
+}
+
+/** Outer widths of the list and detail panes. */
+export function quickFixWidths(width: number): { list: number; detail: number; wide: boolean } {
+  if (width < QUICKFIX_COLUMNS_MIN) return { list: width, detail: width, wide: false };
+  const list = Math.max(36, Math.round((width - 1) * 0.36));
+  return { list, detail: width - 1 - list, wide: true };
+}
+
 export function renderQuickFix(input: QuickFixTabInput, width: number, height: number, theme?: LobbyTheme): string[] {
   if (height <= 0) return [];
-  if (input.jobs.length === 0) return fill([rule(width, "Quick fix", theme, input.profile), ...intro(input, width, theme)], height, width);
-  const jobs = newestFirst(input.jobs);
+  const jobs = newestFirst(filterJobs(input.jobs, input.query));
+  if (jobs.length === 0) {
+    const content = input.query && input.jobs.length > 0 ? [paint(theme, "dim", `No quick fix mentions "${input.query}".`)] : intro(input, width - 4, theme);
+    return box(width, height, content, { title: "Quick fix", right: input.profile, theme });
+  }
   const selected = Math.min(Math.max(0, input.selected), jobs.length - 1);
-  const wide = width >= QUICKFIX_COLUMNS_MIN;
-  const [listWidth, detailWidth] = wide ? split(width, 0.38, 3, 40) : [width, width];
+  const { list: listWidth, detail: detailWidth, wide } = quickFixWidths(width);
   const rows = jobs.map((job, index) => {
     const time = elapsed(job, input.now);
     const text = `${mark(job, input.tick, theme)} ${index === selected ? bold(theme, jobTitle(job)) : jobTitle(job)}${time ? ` ${paint(theme, "dim", time)}` : ""}`;
-    return selectRow(theme, text, listWidth, index === selected, input.focus === "list");
+    return selectRow(theme, text, listWidth - 4, index === selected, input.focus === "list");
   });
-  const listPane = fill([rule(listWidth, "Quick fixes", theme, `${jobs.length}`), ...rows.slice(windowStart(selected, rows.length, height - 1))], height);
-  const detail = jobDetailLines(jobs[selected]!, detailWidth, input.tick, input.now, theme);
-  const detailPane = fill([rule(detailWidth, input.focus === "detail" ? "Detail ◂" : "Detail", theme, input.profile), ...detail.slice(Math.max(0, Math.min(input.detailOffset, detail.length - 1)))], height);
-  if (!wide) return fill(input.focus === "detail" ? detailPane : listPane, height, width);
-  return fill(columns(listPane, detailPane, listWidth, detailWidth, " │ ", theme), height, width);
+  const count = input.query ? `${jobs.length} match${jobs.length === 1 ? "" : "es"}` : `${jobs.length}`;
+  const listStart = windowStart(selected, rows.length, height - 2);
+  const listPane = box(listWidth, height, rows.slice(listStart), { title: "Quick fixes", right: count, focused: input.focus === "list", scroll: { total: rows.length, start: listStart }, theme });
+  const detail = jobDetailLines(jobs[selected]!, detailWidth - 4, input.tick, input.now, theme);
+  const detailStart = detailWindow(detail.length, height - 2, input.detailOffset);
+  const detailNote = [detail.length > height - 2 ? position(detailStart, height - 2, detail.length) : "", input.profile].filter(Boolean).join(" · ");
+  const detailPane = box(detailWidth, height, detail.slice(detailStart), { title: "Detail", right: detailNote, focused: input.focus === "detail", scroll: { total: detail.length, start: detailStart }, theme });
+  const showList = wide || input.focus !== "detail";
+  const showDetail = wide || input.focus === "detail";
+  if (showList) notePane(input.panes, "list", 0, 0, listWidth, height, rows.length);
+  if (showDetail) notePane(input.panes, "detail", 0, wide ? listWidth + 1 : 0, detailWidth, height, detail.length);
+  if (!wide) return fill(showDetail ? detailPane : listPane, height, width);
+  return fill(beside([listPane, detailPane]), height, width);
 }