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

package/src/lobby/tabs/home.ts

@@ -1,13 +1,15 @@
 /**
- * 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 type { LobbyPanel } from "../../schemas/configuration.ts";
-import { beside, bold, box, clock, fill, italic, markdownHanging, notePane, paint, since, spinner, wrap, wrapHanging, type LobbyColor, type LobbyTheme, type PaneLayout } from "../layout.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;
@@ -15,8 +17,8 @@ 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;
@@ -41,13 +43,22 @@ export interface HomeInput {
   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",
@@ -83,34 +94,121 @@ 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, and the side of
+ * the conversation it speaks from — you on the right, the oracle on the left.
+ */
+export const SPEAKERS = {
+  you: { mark: "●", name: "You", color: "accent", side: "right" },
+  oracle: { mark: "◆", name: "Oracle", color: "toolTitle", side: "left" },
+  panel: { mark: "◆", name: "Panel", color: "toolTitle", side: "left" },
+} as const satisfies Record<string, { mark: string; name: string; color: LobbyColor; side: "left" | "right" }>;
+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;
+/** The oracle's replies sit under its name, past its mark. */
+const BODY_INDENT = 2;
+/** Your messages take at most this share of the pane, the oracle's this much, so the two sides read apart. */
+const YOU_SHARE = 0.72;
+const ORACLE_SHARE = 0.86;
+/** Narrower panes give every message (nearly) the full width. */
+const NARROW = 48;
+
+/** The widest a message from one side may be in a pane `width` wide. */
+function messageWidth(width: number, share: number, margin: number): number {
+  return Math.max(1, width < NARROW ? width - margin : Math.floor(width * share));
+}
+
+/**
+ * Who speaks and when: `◆ Oracle ········ 12:04` on the left for the oracle,
+ * `12:04  You ●` on the right for you. `note` is the time, or what the
+ * speaker is doing (`⠋ writing`).
+ */
+export function speakerLine(speaker: Speaker, width: number, theme?: LobbyTheme, note = ""): string {
+  const { mark, name, color, side } = SPEAKERS[speaker];
+  const who = paint(theme, color, mark);
+  const label = bold(theme, paint(theme, color, name));
+  const dimmed = note ? paint(theme, "dim", note) : "";
+  if (side === "right") {
+    const head = dimmed ? `${dimmed}  ${label} ${who}` : `${label} ${who}`;
+    return `${" ".repeat(Math.max(0, width - visibleWidth(head)))}${head}`;
+  }
+  const left = `${who} ${label}`;
+  const gap = width - visibleWidth(left) - visibleWidth(dimmed);
+  return gap >= 1 && dimmed ? `${left}${" ".repeat(gap)}${dimmed}` : left;
+}
+
+/**
+ * What you wrote: a bubble on the right, only as wide as its longest line (up
+ * to `YOU_SHARE` of the pane), your words in the accent colour on pi's
+ * user-message background — or, where the theme has no background, closed
+ * by a bar in that colour.
+ */
+export function youLines(text: string, width: number, theme?: LobbyTheme): string[] {
+  const most = Math.max(1, messageWidth(width, YOU_SHARE, 4) - 2);
+  const lines = wrap(text, most);
+  const inner = Math.max(1, ...lines.map((line) => visibleWidth(line)));
+  const pad = " ".repeat(Math.max(0, width - inner - 2));
+  const bubble = theme?.bg
+    ? (line: string) => theme.bg!("userMessageBg", ` ${fit(paint(theme, "accent", line), inner)} `)
+    : (line: string) => `${fit(paint(theme, "accent", line), inner)} ${paint(theme, "accent", "▐")}`;
+  return lines.map((line) => `${pad}${bubble(line)}`);
 }
 
-/** The conversation as wrapped lines, oldest first, a blank line between turns. */
+/** The oracle's reply as Markdown on the left, under its name. */
+function oracleLines(text: string, width: number, theme?: LobbyTheme): string[] {
+  const indent = " ".repeat(BODY_INDENT);
+  return markdownLines(text, Math.max(1, messageWidth(width, ORACLE_SHARE, 0) - BODY_INDENT), theme).map((line) => (line ? `${indent}${line}` : ""));
+}
+
+/** 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, like a chat: your messages as bubbles on
+ * the right, the oracle's replies in Markdown on the left, each turn under a
+ * line naming its speaker and time, events as centred 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("");
-    // The oracle writes Markdown; what you typed and notes are shown as written.
-    if (role === "oracle") lines.push(...markdownHanging(chatLead(role, theme), text, width, theme));
-    else lines.push(...wrapHanging(chatLead(role, theme), role === "note" ? paint(theme, "dim", text) : text, width));
+  const gap = () => {
+    if (lines.length > 0 && lines.at(-1) !== "") lines.push("");
   };
-  for (const entry of chat) push(entry.role, entry.text);
+  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()) {
-    push("oracle", live.trim());
-    lines[lines.length - 1] = `${lines.at(-1)!.trimEnd()} ${paint(theme, "accent", spinner(tick))}`;
+    gap();
+    lines.push(speakerLine("oracle", width, theme, `${spinner(tick)} writing`), ...oracleLines(live.trim(), width, theme));
   } else if (busy) {
-    if (lines.length > 0) lines.push("");
-    lines.push(...wrapHanging(chatLead("oracle", theme), paint(theme, "dim", `${spinner(tick)} working…`), width));
+    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.")]
     : [
@@ -147,7 +245,7 @@ function conversation(input: HomeInput, chat: readonly ChatEntry[], width: numbe
 }
 
 function activity(input: HomeInput, entries: readonly ActivityEntry[], width: number, theme?: LobbyTheme): string[] {
-  if (entries.length === 0) return [paint(theme, "dim", input.query ? `No activity matches "${input.query}".` : "No activity yet.")];
+  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));
 }
 
@@ -177,17 +275,35 @@ function thinkingContent(input: HomeInput, thoughts: readonly ThoughtEntry[], wi
   return [paint(theme, "dim", input.query ? `No thought matches "${input.query}".` : "Thoughts from the oracle and every agent appear here, and only here.")];
 }
 
-function sceneLines(input: HomeInput, width: number, height: number): string[] {
-  if (!input.task || !input.scene || !input.panels.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);
+/**
+ * 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 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);
+}
+
+/** `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${input.task ? ` · ${keys.scene} scene` : ""}`
+    ? `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));
@@ -205,7 +321,7 @@ export function renderHome(input: HomeInput, width: number, height: number, them
   if (height <= 0) return [];
   const { panels } = input;
   const feed = filterFeed(input);
-  const scene = sceneLines(input, width, height);
+  const scene = sceneLines(input, width, height, theme);
   const rest = height - scene.length;
   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;
@@ -220,7 +336,7 @@ export function renderHome(input: HomeInput, width: number, height: number, them
     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.task ? `Conversation · ${input.task.id}` : "Conversation", input.query ? matches(feed.chat.length) : input.keys?.conversation, (inner) => conversation(input, feed.chat, inner, 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;

package/src/lobby/tabs/plan.ts

@@ -9,8 +9,8 @@
 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 { 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";
+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;
@@ -77,43 +77,34 @@ export interface PlanTabInput {
   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 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.",
-    "",
-    "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} (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));
+  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.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`));
+  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. */
@@ -124,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"}`)}`;
 }
 
@@ -158,12 +151,14 @@ export function conversationLines(view: PlanView, width: number, theme?: LobbyTh
       .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(...(questions.length > 0 ? questionLines(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;
@@ -201,7 +196,7 @@ 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, ...box(width, height - notice.length, intro(input, width - 4, theme), { title: "Plan", right: input.profile, 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,
     ...wrap(`${bold(theme, view.title ? `Planning · ${view.title}` : "Planning")}  ${statusLine(view, input, theme)}`, width),

package/src/lobby/tabs/quickfix.ts

@@ -73,16 +73,13 @@ 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} — esc, then m changes the model, thinking, time limit and instructions (alt+s: all settings)`),
-  ].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`. */
@@ -104,7 +101,7 @@ export function renderQuickFix(input: QuickFixTabInput, width: number, height: n
   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 });
+    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 { list: listWidth, detail: detailWidth, wide } = quickFixWidths(width);