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

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, clock, fill, fit, italic, markdownLines, notePane, paint, selectRow, spinner, wrap, wrapHanging, type LobbyTheme, type PaneLayout } from "../layout.ts";
+import { sourceColor, speakerLine, tailWindow, youLines } 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,39 +68,43 @@ 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;
+  /** The key that saves the plan, as the status line names it. */
+  saveKey?: string;
 }
 
 export const PLAN_COLUMNS_MIN = 100;
 const LABEL_WIDTH = 8;
 
+/** Before a session: one sentence, then who sits on the panel and the model each runs on. */
 function intro(input: PlanTabInput, width: number, theme?: LobbyTheme): string[] {
-  // The roster leads with the chair; the intro names it separately.
-  const members = input.seats.filter((seat) => seat.label !== ORACLE_LABEL);
-  const seats = members.filter((seat) => seat.seated).map((seat) => seat.label);
-  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.`,
-    "",
-    "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.",
-    "",
-    paint(theme, "dim", `oracle: ${input.profile}`),
-    ...members.map((seat) => paint(theme, "dim", `${seat.label.toLowerCase()}: ${seat.seated ? seat.profile ?? "" : "not seated"}`)),
-  ];
-  return text.flatMap((line) => wrap(line, width));
+  const rows = input.seats.map((seat) => {
+    const name = paint(theme, seat.seated ? sourceColor(seat.label) : "dim", seat.label.padEnd(LABEL_WIDTH + 2));
+    const model = seat.label === ORACLE_LABEL ? input.profile : seat.seated ? seat.profile ?? "" : "not seated";
+    return fit(`${name}${paint(theme, seat.seated ? "muted" : "dim", model)}`, width);
+  });
+  return [...wrap(bold(theme, "Describe a task below and the panel questions you until the plan is clear."), width), "", ...rows];
 }
 
 function statusLine(view: PlanView, input: PlanTabInput, theme?: LobbyTheme): string {
   const parts: string[] = [];
+  const count = (n: number, word: string) => `${n} ${word}${n === 1 ? "" : "s"}`;
   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.error) parts.push(paint(theme, "error", `✗ ${view.error.split("\n")[0]} — r retries`));
+  else if (view.reply?.status === "ready") parts.push(paint(theme, "success", `✓ ready — ${input.saveKey ?? "Ctrl+S"} saves it`));
+  else if (view.awaitingAnswers) parts.push(paint(theme, "warning", `● ${count(view.questions.length, "question")} — enter ${view.answeredChunks > 0 ? "resumes" : "answers them"}`));
+  if (view.lineComments.length > 0) parts.push(paint(theme, "accent", `◆ ${count(view.lineComments.length, "comment")} 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.");
+  return parts.join(paint(theme, "dim", " · "));
 }
 
 /** One seat on the roster: a spinner and its step while it works, then ready, its question count or a failure. */
@@ -90,6 +115,8 @@ function seatCell(seat: SeatView, tick: number, theme?: LobbyTheme): string {
   if (seat.status === "failed") return `${name} ${paint(theme, "error", "✗ failed — r retries")}`;
   if (seat.status === "idle") return `${name} ${paint(theme, "dim", "·")}`;
   if (seat.ready) return `${name} ${paint(theme, "success", "✓ ready")}`;
+  // A seat whose questions the oracle settled itself has nothing waiting on you.
+  if (seat.questions === 0) return `${name} ${paint(theme, "dim", "done")}`;
   return `${name} ${paint(theme, "warning", `${seat.questions} question${seat.questions === 1 ? "" : "s"}`)}`;
 }
 
@@ -99,36 +126,69 @@ 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("");
+    // The same turns as the Lobby's conversation: who speaks and when, your words in a band.
+    const time = message.at > 0 ? clock(message.at) : "";
     if (message.role === "you") {
-      lines.push(...wrapHanging(`${bold(theme, paint(theme, "accent", "you"))} ${paint(theme, "dim", "▸")} `, message.text, width));
+      lines.push(speakerLine("you", width, theme, time), ...youLines(message.text, width, theme));
       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(speakerLine("panel", width, theme, time));
+    lines.push(...(questions.length > 0 ? questionLines(questions, width, theme) : wrap(message.text, width).map((line) => (line ? `  ${line}` : ""))));
   }
+  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 +196,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", 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;
@@ -69,33 +73,54 @@ export function jobDetailLines(job: QuickFixJob, width: number, tick: number, no
   return lines;
 }
 
+/** Before the first fix: one sentence, then the agent and the model it runs on. */
 function intro(input: QuickFixTabInput, width: number, theme?: LobbyTheme): string[] {
   return [
-    bold(theme, "Make a direct change, the way you would ask pi."),
+    ...wrap(bold(theme, "Describe a small change below and one agent makes it now, beside any running task."), width),
     "",
-    "Type what you want below and press enter. One coding agent makes the change right away — no scouting, proposal, plan or review — while any bot-lobby task keeps running. Quick fixes run one at a time in the order you send them.",
-    "",
-    "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}`),
-  ].flatMap((line) => wrap(line, width));
+    `${paint(theme, "mdCode", "QUICK FIX".padEnd(11))}${paint(theme, "muted", input.profile)}`,
+  ];
+}
+
+/** 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", ...(input.query ? { 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);
 }