pi-umbra 0.3.0 → 0.4.0

package/node_modules/pi-umbra-subagents/extensions/umbra-subagents/bar/bar-line.ts

@@ -3,9 +3,10 @@ import type { ThemeColor } from "@earendil-works/pi-coding-agent";
 import { LINGER_MS, type BranchView, type RunState } from "../skills/delegate/state.ts";
 
 // Every column the widget below the input box occupies, as pure functions over one run
-// snapshot: the flat live list of reference 3, `○ main` on top and one row per agent, with
-// Claude Code's `❯` on the row the user is on. A phased run draws the same list; the panel is
-// where its phases are.
+// snapshot: Claude Code's agent tree. `● main` on top, one row per agent, and only one level of
+// the tree open at a time: an agent with agents under it shows `(+N)` and how they are doing,
+// and enter opens it. A phased run is one `workflow` row whose children are its phases, whose
+// children are their branches.
 //
 // All of it lives here rather than in the component because the arithmetic is the part that can
 // be wrong in a way that hurts: a composed line one column too wide wraps in the terminal, and
@@ -56,97 +57,237 @@ export const faded = (run: RunState | undefined, now: number): boolean => {
 	return ended > 0 && now - ended > LINGER_MS;
 };
 
-// ---------- REFERENCE 3: the flat live list ----------
+// ---------- THE TREE ----------
 
-/** One row of reference 3. `head` is the nesting marker, the status dot and the agent name,
- *  padded so every row's activity starts in the same column; `dotAt` is the one cell inside it
- *  that takes the status colour, or -1 on a row that has no dot. `branch` is undefined on the
- *  `○ main` row, and is what tone() below reads to pick that cell's colour. */
-export type ListRow = {
-	head: string;
-	dotAt: number;
-	activity: string;
-	fill: string;
-	right: string;
+/** One row the tree can show: a branch, or for a phased run the run itself and each phase.
+ *  `branches` is every branch at or under the row, which is what its counts, its clock and
+ *  `x` act on. */
+export type Node = {
+	id: string;
+	label: string;
 	branch?: BranchView;
+	branches: BranchView[];
+	children: Node[];
+	elapsedMs: number;
+	tokens: number;
+};
+
+/** A visible row: the tree guide drawn in front of it, the ids of the rows above it in the
+ *  tree, and whether it has children that are not shown. */
+export type Line = { node: Node; guide: string; path: string[]; folded: boolean };
+
+/** The cursor's id for the `● main` row. Every other id carries a prefix, so none can clash. */
+export const MAIN = "main";
+
+export const phaseTitle = (name: string) => name.charAt(0).toUpperCase() + name.slice(1);
+
+const branchNode = (branch: BranchView, all: BranchView[]): Node => {
+	const children = all.filter((child) => child.parent === branch.stem).map((child) => branchNode(child, all));
+	return {
+		id: `b:${branch.stem}`,
+		label: branch.name,
+		branch,
+		branches: [branch, ...children.flatMap((child) => child.branches)],
+		children,
+		elapsedMs: branch.elapsedMs,
+		tokens: branch.tokens ?? 0,
+	};
+};
+
+// A branch whose parent is not in the run (it finished and was pruned, or never wrote a
+// beacon) is a root rather than a row that never shows.
+const rootsOf = (list: BranchView[], all: BranchView[]) =>
+	list.filter((branch) => !branch.parent || !all.some((other) => other.stem === branch.parent)).map((branch) => branchNode(branch, all));
+
+const group = (id: string, label: string, children: Node[]): Node => ({
+	id,
+	label,
+	branches: children.flatMap((child) => child.branches),
+	children,
+	elapsedMs: Math.max(0, ...children.map((child) => child.elapsedMs)),
+	tokens: children.reduce((sum, child) => sum + child.tokens, 0),
+});
+
+/** One phase is plain subagents, so the branches are the top level. More than one is a
+ *  workflow: a single row named after the run, its phases under it, their branches under them. */
+export const treeOf = (run: RunState, now: number): Node[] => {
+	const all = run.branches;
+	const phases = [...new Set([...run.phases, ...all.map((branch) => branch.phase)])];
+	if (phases.length <= 1) return rootsOf(all, all);
+	const workflow = group(
+		`r:${run.dir}`,
+		run.name || "workflow",
+		phases.map((phase) => group(`p:${phase}`, phaseTitle(phase), rootsOf(all.filter((branch) => branch.phase === phase), all))),
+	);
+	return [{ ...workflow, elapsedMs: (endedAt(run) || now) - run.startedAt, tokens: run.tokens }];
 };
 
-// Reference 3's nesting marker, two columns per level with `└ ` on the last. Same shape as
-// panel.ts's, because the panel is the zoomed-in view of these same rows.
-const nest = (depth: number) => (depth > 0 ? `${"  ".repeat(depth - 1)}└ ` : "");
+/** The rows on screen. `open` is the one path that is expanded, top level first: opening a row
+ *  closes every other, so only one agent's tree is ever branched out. */
+export const linesOf = (nodes: Node[], open: string[], depth = 0, prefix = "", path: string[] = []): Line[] =>
+	nodes.flatMap((node, index) => {
+		const last = index === nodes.length - 1;
+		const guide = depth === 0 ? "" : prefix + (last ? "└ " : "├ ");
+		const expanded = node.children.length > 0 && open[depth] === node.id;
+		const line: Line = { node, guide, path, folded: node.children.length > 0 && !expanded };
+		if (!expanded) return [line];
+		const below = depth === 0 ? "" : prefix + (last ? "  " : "│ ");
+		return [line, ...linesOf(node.children, open, depth + 1, below, [...path, node.id])];
+	});
+
+export const linesFor = (run: RunState | undefined, now: number, open: string[]): Line[] =>
+	!run || faded(run, now) ? [] : linesOf(treeOf(run, now), open);
 
-// Filled while the branch is working, hollow when it is pending, quiet or finished. `○ main`
-// is hollow for the same reason the reference draws it hollow: the session is not a branch.
-const working = (branch: BranchView) =>
-	branch.alive && branch.status === "running" && branch.idleMs < IDLE_MS;
+// ---------- STATUS ----------
 
-const dot = (branch: BranchView) => (working(branch) ? "●" : "○");
+/** What a branch is doing, in the words the counts use. A stopped and a failed branch are one
+ *  state here: both ended without an answer, and both are red. A branch of a later phase that
+ *  has not been started yet is waiting, not running. */
+export type State = "done" | "running" | "idle" | "waiting" | "stopped";
+const STATES: State[] = ["done", "running", "idle", "waiting", "stopped"];
+
+export const stateOf = (branch: BranchView): State => {
+	if (branch.timedOut || branch.status === "error") return "stopped";
+	// No process yet: still queued, or never started because the run was abandoned.
+	if (branch.pid === null) return branch.settled ? "stopped" : "waiting";
+	if (branch.settled) return branch.exitCode !== null && branch.exitCode !== 0 ? "stopped" : "done";
+	return branch.alive && branch.idleMs < IDLE_MS ? "running" : "idle";
+};
+
+const COLOR: Record<State, ThemeColor> = { done: "success", running: "accent", idle: "warning", waiting: "dim", stopped: "error" };
+
+// A row standing for many branches takes the state that most needs a look: one still going
+// outranks the finished ones. A phase with no branches yet has not run, so it is waiting.
+const stateOfAll = (branches: BranchView[]): State => {
+	const states = branches.map(stateOf);
+	return (["running", "idle", "stopped", "waiting", "done"] as State[]).find((state) => states.includes(state)) ?? (states.length ? "done" : "waiting");
+};
+
+/** "3 done · 5 running · 1 idle", leaving out the states nobody is in. */
+export const countsOf = (branches: BranchView[]) =>
+	STATES.map((state) => [state, branches.filter((branch) => stateOf(branch) === state).length] as const)
+		.filter(([, count]) => count > 0)
+		.map(([state, count]) => `${count} ${state}`)
+		.join(" · ");
 
 /** What the row says it is doing. A branch that was killed never got to write "done", so its
  *  own `activity` is frozen on whatever it was mid-way through — a row reading "Running cd"
  *  on a process that has been dead for four minutes. The exit file already knows better. */
-export const said = (branch: BranchView): string => {
+const endedAs = (branch: BranchView): string => {
 	if (branch.timedOut) return "Timed out";
 	if (branch.status === "error") return branch.error ? `Failed: ${branch.error}` : "Failed";
 	// Killed by hand or by a parent going away: a non-zero exit with no error text of its own.
 	if (branch.settled && branch.exitCode !== null && branch.exitCode !== 0 && !branch.report) return "Stopped";
-	return branch.activity ?? "";
+	return "";
+};
+
+export const said = (branch: BranchView): string => {
+	// A write branch's answer is its diff, committed even when it was stopped or timed out.
+	const { git } = branch;
+	const changed = git?.error ? `Not committed: ${git.error}` : git?.stat ? `Changed ${git.stat} on ${git.branch}` : "";
+	return [endedAs(branch), changed].filter(Boolean).join(" · ") || (branch.activity ?? "");
+};
+
+// A branch says what it is doing; a row with hidden agents under it says how they are doing
+// first, since that is what the folded row is hiding. A phase or the workflow has no activity
+// of its own, so it says only the counts.
+const activityOf = (line: Line) => {
+	const { node } = line;
+	if (!node.branch) return countsOf(node.branches);
+	const own = said(node.branch);
+	if (!line.folded) return own;
+	const counts = countsOf(node.branches.slice(1));
+	return own ? `${counts} · ${own}` : counts;
+};
+
+// ---------- THE LIST ----------
+
+/** One row on screen. `head` is the tree guide, the dot and the name, padded so every row's
+ *  activity starts in the same column; `dotAt` is the cell inside it that takes `tone`, or -1 on
+ *  a row with no dot. `id` is the row's tree id, MAIN for the session, undefined for "↑ 3 more". */
+export type ListRow = {
+	head: string;
+	dotAt: number;
+	activity: string;
+	fill: string;
+	right: string;
+	tone?: ThemeColor;
+	id?: string;
 };
 
+/** Whether the list has the keyboard, which row the `❯` is on, and which path is open. */
+export type View = { picking: boolean; cursor: string; open: string[] };
+export const TYPING: View = { picking: false, cursor: MAIN, open: [] };
+
 // Chosen once for the whole list rather than per row, so the right-hand block is one column
-// instead of four ragged ones. Same order of sacrifice as the bar: the tokens go first, then
-// the arrow, and the clock last.
-const rowRight = (branch: BranchView, tier: number) => {
-	const time = clock(branch.elapsedMs);
-	if (tier === 0) return `${time} · ↓ ${compact(branch.tokens ?? 0)} tokens`;
-	if (tier === 1) return `${time} · ↓ ${compact(branch.tokens ?? 0)}`;
+// instead of four ragged ones. The tokens go first, then the arrow, and the clock last.
+const rowRight = (node: Node, tier: number) => {
+	const time = clock(node.elapsedMs);
+	if (tier === 0) return `${time} · ↓ ${compact(node.tokens)} tokens`;
+	if (tier === 1) return `${time} · ↓ ${compact(node.tokens)}`;
 	if (tier === 2) return time;
 	return "";
 };
 
 const widest = (values: string[]) => Math.max(0, ...values.map(visibleWidth));
 
-/** Reference 3, whole. Always at least one row, because a widget that renders zero lines
- *  un-mounts itself and the input box drops a line the moment it does.
- *
- *  `max` is the row budget the component computes from the terminal height. Anything past it
- *  collapses into a final "+N more", so the list has a ceiling but never a hidden agent. */
-export const layoutList = (width: number, run: RunState | undefined, now: number, max: number): ListRow[] => {
+/** The slice of `n` rows that fits `room`, kept around the cursor at `at`. The window scrolls
+ *  instead of hiding anyone; a row of it is spent on "↑ N more" or "↓ N more" only when there is
+ *  something that way. Returns [first, end). */
+export const windowOf = (n: number, at: number, room: number): [number, number] => {
+	if (n <= room) return [0, n];
+	if (room < 3) {
+		const top = Math.min(Math.max(0, at), n - Math.max(0, room));
+		return [top, top + Math.max(0, room)];
+	}
+	if (at < room - 1) return [0, room - 1];
+	if (at >= n - room + 1) return [n - room + 1, n];
+	const slots = room - 2;
+	const top = Math.min(Math.max(1, at - Math.floor((slots - 1) / 2)), n - slots - 1);
+	return [top, top + slots];
+};
+
+// windowOf() spends rows on "↑ N more" and "↓ N more" only when it has three or more to play
+// with; under that it shows what fits and nothing else.
+const arrows = (max: number) => max - 1 >= 3;
+
+/** The list, whole. Always at least the `● main` row, because a widget that renders zero lines
+ *  while a run is live would un-mount itself. `max` is the row budget the component computes
+ *  from the terminal height; past it the list scrolls with the cursor. */
+export const layoutList = (width: number, run: RunState | undefined, now: number, max: number, view: View = TYPING): ListRow[] => {
 	const inner = width - PAD * 2;
-	const main = "○ main";
-	// Sub-8 columns is not a terminal anyone reads a table in, and one stub row still holds the
-	// height the input box is sitting on.
+	const main = "● main";
 	if (inner < MIN_INNER) {
-		return [{ head: truncateToWidth(main, Math.max(0, inner), "…", true), dotAt: 0, activity: "", fill: "", right: "" }];
+		return [{ head: truncateToWidth(main, Math.max(0, inner), "…", true), dotAt: 0, activity: "", fill: "", right: "", id: MAIN }];
 	}
 
-	// readRun() already orders parents immediately above their children by launch order, so
-	// taking a prefix keeps the tree readable and, more importantly, keeps a row from sliding
-	// under the eye when a sibling settles. Sorting the live ones to the top would do that.
-	const all = !run || faded(run, now) ? [] : run.branches;
-	// The overflow row spends the budget's last slot rather than adding to it, so a run of forty
-	// branches is exactly as tall as a run of `max` and never one row taller.
-	const room = Math.max(0, max - 1); // rows left after `○ main`
-	const shown = all.length <= room ? all : all.slice(0, Math.max(0, room - 1));
-	const hidden = room > 0 ? all.length - shown.length : 0;
-	const overflow = hidden > 0 ? `+${hidden} more` : "";
+	const lines = linesFor(run, now, view.open);
+	const at = view.picking ? lines.findIndex((line) => line.node.id === view.cursor) : -1;
+	const [first, end] = windowOf(lines.length, Math.max(0, at), Math.max(0, max - 1));
+	const shown = lines.slice(first, end);
+	const above = arrows(max) ? first : 0;
+	const below = arrows(max) ? lines.length - end : 0;
 
-	const heads = shown.map((branch) => `${nest(branch.depth)}${dot(branch)} ${branch.name}`);
-	const headWidth = Math.min(inner, HEAD_CAP, Math.max(1, widest([main, ...heads, overflow])));
+	const nameOf = (line: Line) => `${line.guide}○ ${line.node.label}${line.folded ? ` (+${line.node.branches.length - (line.node.branch ? 1 : 0)})` : ""}`;
+	const heads = shown.map(nameOf);
+	const moreUp = above ? `↑ ${above} more` : "";
+	const moreDown = below ? `↓ ${below} more` : "";
+	const headWidth = Math.min(inner, HEAD_CAP, Math.max(1, widest([main, ...heads, moreUp, moreDown])));
 
 	// One tier for the list, not one per row: the widest that still leaves the activity
 	// sentence a readable column next to the longest head.
 	let tier = 0;
 	let rightWidth = 0;
 	for (; tier < 3; tier++) {
-		rightWidth = widest(shown.map((branch) => rowRight(branch, tier)));
-		if (headWidth + COL_GAP + MIN_ACTIVITY + rightWidth <= inner) break;
+		rightWidth = widest(shown.map((line) => rowRight(line.node, tier)));
+		if (headWidth + COL_GAP + MIN_ACTIVITY + rightWidth + 2 <= inner) break;
 	}
 	if (tier === 3) rightWidth = 0;
 	// Clamped after the choice as well as before it: on a narrow terminal even the bare clock
 	// can be too wide, and an over-wide row is the one failure that moves the input box.
 	rightWidth = Math.min(rightWidth, Math.max(0, inner - headWidth));
-	const activityBudget = inner - headWidth - COL_GAP - rightWidth;
+	// Two columns before the clock, so a truncated sentence never runs into it.
+	const activityBudget = inner - headWidth - COL_GAP - rightWidth - (rightWidth ? 2 : 0);
 
 	const row = (headText: string, at: number, text: string, right: string): ListRow => {
 		const head = truncateToWidth(headText, headWidth, "…", true);
@@ -159,43 +300,33 @@ export const layoutList = (width: number, run: RunState | undefined, now: number
 		return { head, dotAt: at, activity, fill: " ".repeat(fill), right: padded };
 	};
 
-	// `○ main` is the session itself and always sits at the top, with no activity and no
-	// counters — exactly as the reference draws it. The widget factory is handed a tui and a
-	// theme and nothing else, so there is no ExtensionContext here to ask for the session's own
-	// usage, and a number the row could not stand behind is worse than the blank the screen
-	// actually shows.
-	const rows: ListRow[] = [row(main, 0, "", "")];
-	shown.forEach((branch, index) => {
+	// `● main` is the session itself, and the filled dot says this is where the user is. The
+	// widget factory is handed a tui and a theme and nothing else, so there is no context here to
+	// ask for the session's own usage, and a number the row could not stand behind is worse than
+	// a blank.
+	const rows: ListRow[] = [{ ...row(main, 0, "", ""), id: MAIN }];
+	if (moreUp) rows.push(row(moreUp, -1, "", ""));
+	shown.forEach((line, index) => {
+		const { node } = line;
+		const tone = COLOR[node.branch && !line.folded ? stateOf(node.branch) : stateOfAll(node.branches)];
 		// SAFETY: heads is built by mapping `shown` in order, so this index is populated.
-		const head = heads[index] as string;
-		rows.push({ ...row(head, visibleWidth(nest(branch.depth)), said(branch), rowRight(branch, tier)), branch });
+		rows.push({ ...row(heads[index] as string, visibleWidth(line.guide), activityOf(line), rowRight(node, tier)), tone, id: node.id });
 	});
-	// No dot on the overflow row: it stands for agents rather than being one.
-	if (overflow) rows.push(row(overflow, -1, "", ""));
+	if (moreDown) rows.push(row(moreDown, -1, "", ""));
 	return rows;
 };
 
 // ---------- THE FRAME ----------
 
-// The list's ceiling: `○ main` plus eight agents. Past that a "+N more" row stands in, so the
-// widget can never eat the screen it is sitting on top of.
+// The list's ceiling: `● main` plus eight rows. Past that the list scrolls with the cursor, so
+// the widget can never eat the screen it is sitting on top of.
 export const MAX_ROWS = 9;
 
-// The same distinctions panel.ts draws, because the panel is the zoomed-in view of these rows:
-// a timed-out branch answered nothing but did not crash, and a soft report is not a success.
-const tone = (branch: BranchView | undefined): ThemeColor => {
-	if (!branch) return "dim";
-	if (branch.timedOut) return "warning";
-	if (branch.status === "error" || (branch.exitCode !== null && branch.exitCode !== 0)) return "error";
-	if (branch.report === "PARTIAL" || branch.report === "NEED_STRONGER" || branch.report === "ASKING") return "warning";
-	if (branch.settled) return "success";
-	return branch.alive && branch.idleMs < IDLE_MS ? "accent" : "dim";
-};
-
 /** Everything on screen, in one string. A frame identical to the last one is never requested:
  *  pi coalesces renders at 16 ms, but the cheapest frame is the one nobody asks for, and an
  *  idle session whose reader ticks once a second would otherwise repaint a blank row for as
- *  long as pi stays open. Width is deliberately absent — a resize repaints everything anyway. */
+ *  long as pi stays open. Width is deliberately absent — a resize repaints everything anyway.
+ *  The cursor and the open path are absent too: the bar repaints itself when either moves. */
 export const renderKey = (run: RunState | undefined, now: number): string => {
 	if (!run || faded(run, now)) return "-";
 	const at = endedAt(run) || now;
@@ -215,29 +346,39 @@ export const renderKey = (run: RunState | undefined, now: number): string => {
 	return [...head, ...rows].join("|");
 };
 
-/** `theme.fg`, narrowed to the one method used, so the frame can be composed without a TUI. */
-export type Paint = (color: ThemeColor, text: string) => string;
+/** The two theme methods the frame uses, so it can be composed without a TUI. */
+export type Ink = { fg(color: ThemeColor, text: string): string; bold(text: string): string };
+
+/** The keys that work on the row the cursor is on. Enter only appears where it does something. */
+export const hintOf = (view: View, lines: Line[]): string => {
+	const line = lines.find((candidate) => candidate.node.id === view.cursor);
+	const expanded = lines.some((candidate) => candidate.node.children.length > 0 && !candidate.folded);
+	const enter = line ? (line.node.children.length ? (line.folded ? "enter expand" : "enter collapse") : "") : expanded ? "enter collapse all" : "";
+	return ["↑↓ select", enter, line ? "x stop" : "", "alt+a panel", "esc back"].filter(Boolean).join(" · ");
+};
 
 /**
- * The whole frame, always the list. `cursor` is the stem the `❯` sits on; undefined puts it on
- * `○ main`, which is where the user is while they type.
+ * The whole frame:
+ *
+ *   1. nothing running, or the run faded       -> no lines at all
+ *   2. the panel is open, or no room to draw    -> one blank line
+ *   3. anything else                            -> the list, with a key hint on top while the
+ *                                                  list has the keyboard
  */
 export const renderLines = (
 	width: number,
 	run: RunState | undefined,
 	now: number,
 	budget: number,
-	paint: Paint,
+	ink: Ink,
 	panelIsOpen = false,
-	cursor?: string,
+	view: View = TYPING,
 ): string[] => {
 	const total = Math.max(0, width);
 
-	// Nothing running: draw nothing at all, not a bare `○ main`. pi renders the belowEditor
-	// container with spacerWhenEmpty and leadingSpacer both false, so zero lines really is zero
-	// rows and the footer above it does not move when a run starts or ends. That was not true
-	// while this slot sat above the editor - there, appearing and disappearing would have
-	// shifted the input box under the user's hands, which is why the idle row existed.
+	// Nothing running: draw nothing at all. pi renders the belowEditor container with
+	// spacerWhenEmpty and leadingSpacer both false, so zero lines really is zero rows and the
+	// footer above it does not move when a run starts or ends.
 	if (faded(run, now)) return [];
 
 	// The panel already draws all of this, and it took the editor's slot to do it. The width
@@ -245,18 +386,25 @@ export const renderLines = (
 	// a blank line of the right height beats a two-column line in a one-column terminal.
 	if (panelIsOpen || total < PAD * 2 + 4) return [" ".repeat(total)];
 
+	const hint = view.picking ? [" ".repeat(PAD + MARK) + ink.fg("dim", truncateToWidth(hintOf(view, linesFor(run, now, view.open)), Math.max(0, total - PAD * 2 - MARK), "…", true)) + " ".repeat(PAD)] : [];
 	// The `❯` column comes off the list's width, so a marked row is exactly as wide as the rest.
-	return layoutList(total - MARK, run, now, budget).map((row) => {
-		// `head` is plain text, and everything left of the dot is `└`, a space, or a name
-		// matching ^[a-z0-9][a-z0-9._-]*$ — so a visible column and a code-unit index are the
-		// same number here and slicing cannot cut a character in half.
+	const rows = layoutList(total - MARK, run, now, view.picking ? budget - 1 : budget, view).map((row) => {
+		// `head` is plain text, and everything left of the dot is a tree guide or a space, so a
+		// visible column and a code-unit index are the same number here and slicing cannot cut a
+		// character in half.
+		// The name, then a grey "(+N)" when the row hides agents under it.
+		const name = row.head.slice(row.dotAt + 1);
+		const plus = name.search(/ \(\+\d+\)/);
+		const label = plus === -1 ? ink.fg("text", name) : ink.fg("text", name.slice(0, plus)) + ink.fg("dim", name.slice(plus));
 		const head =
-			row.dotAt >= 0
-				? paint("dim", row.head.slice(0, row.dotAt)) +
-					paint(tone(row.branch), row.head.slice(row.dotAt, row.dotAt + 1)) +
-					paint(row.branch ? "text" : "dim", row.head.slice(row.dotAt + 1))
-				: paint("dim", row.head);
-		const mark = (row.branch ? row.branch.stem === cursor : !cursor && row.dotAt === 0) ? paint("accent", "❯ ") : "  ";
-		return " ".repeat(PAD) + mark + head + paint("muted", row.activity) + row.fill + paint("dim", row.right) + " ".repeat(PAD);
+			row.dotAt < 0
+				? ink.fg("dim", row.head)
+				: ink.fg("dim", row.head.slice(0, row.dotAt)) +
+					(row.id === MAIN
+						? ink.bold(ink.fg("text", row.head.slice(row.dotAt)))
+						: ink.fg(row.tone ?? "dim", row.head.slice(row.dotAt, row.dotAt + 1)) + label);
+		const mark = view.picking && row.id === view.cursor ? ink.fg("accent", "❯ ") : "  ";
+		return " ".repeat(PAD) + mark + head + ink.fg("muted", row.activity) + row.fill + ink.fg("dim", row.right) + " ".repeat(PAD);
 	});
+	return [...hint, ...rows];
 };