@gavin-hu/my-pi-agent 0.18.0 → 0.20.0

package/extensions/bytefly/panel/tui.ts

@@ -1,45 +1,62 @@
 /**
- * The unified bytefly panel: three sections around one docked list.
+ * The control center: three sections around one frame.
  *
  * Extensions lists every resolved extension with its enable checkbox and its
- * health; Skills lists every resolved skill the same way, with what its
- * `SKILL.md` declares; Settings lists the curated preferences with their values.
+ * health, Skills the same with what its `SKILL.md` declares, and Settings the
+ * curated preferences with their values. All three are drawn by one frame —
+ * header, tabs, a shared body height, one focused-row block — so the screen does
+ * not change shape when the section does.
+ *
  * The component owns the section switch, the cursors, the focused row key per
- * section, the expanded set, the pending toggle chain, and the notice; the
- * section modules own their rows and detail panes, and the Settings section also
- * owns its editor and JSON-pane state. It is derived: every render rebuilds the
- * model from the picker runtime, the reports, the skill index, or the settings
- * surface, and keeps the focused row's key across rebuilds. The screen is drawn
- * from the design system — a label-first `titleRule`, one `listRow` grammar, one
- * `checkbox` — and its scroll math from `lib/tui/cursor.ts`.
+ * section, the filter, the help block, the pending toggle chain and the notice.
+ * It is derived: every render rebuilds from the picker runtime, the reports, the
+ * skill index, or the settings surface, and keeps the focused row's key across
+ * rebuilds.
  */
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import { Key, matchesKey, type Component, type TuiMouseEvent, type TuiMouseEventResult } from "@earendil-works/pi-tui";
-import type { ScreenHint, ViewportRowsSource } from "../../../lib/tui/chrome.ts";
-import { isCloseKey, ListCursor, wheelDelta } from "../../../lib/tui/cursor.ts";
-import { titleRule } from "../../../lib/tui/rules.ts";
+import type { Component, TuiMouseEvent, TuiMouseEventResult } from "@earendil-works/pi-tui";
+import type { ViewportRowsSource } from "../../../lib/tui/chrome.ts";
+import { ListCursor, wheelDelta } from "../../../lib/tui/cursor.ts";
 import type { ExtensionReport } from "../../../lib/requirements.ts";
 import type { PickerRuntime } from "../picker/runtime.ts";
 import type { ResourceKind } from "../picker/types.ts";
-import { SECTION_ORDER, SKILL_NOUN } from "./format.ts";
-import { buildPanelModel, buildSkillModel } from "./join.ts";
+import { NO_FILTER, type PanelFilter } from "./filter.ts";
+import { SECTION_ORDER } from "./format.ts";
 import { UNTRUSTED_SETTINGS_NOTE } from "./settings.ts";
 import type { SettingsSurface } from "./settings-runtime.ts";
-import type { PanelModel, PanelRow, PanelSection, SkillInfo } from "./types.ts";
-import { entriesOf, entryKey, isSelectable, settingEntries, type PanelEntry } from "./tui/entries.ts";
-import { extensionDetail } from "./tui/extensions-view.ts";
-import { BODY_START, detailRows, groupLine, hintLine, noticeLine, panelFrame, sectionBar } from "./tui/frame.ts";
-import { resourceRow, resourceSummary, sectionHints } from "./tui/list-view.ts";
+import type { PanelModel, PanelSection, SkillInfo } from "./types.ts";
+import { applyEditKey, type EditingState } from "./tui/editing.ts";
+import { entriesOf, entryKey, isSelectable, type PanelEntry } from "./tui/entries.ts";
+import { BODY_START, detailRows, groupLine, headerLine, panelFrame, tabsLine } from "./tui/frame.ts";
+import { hintRow, keyFor } from "./tui/keys.ts";
+import { resourceRow, verdictColumn } from "./tui/list-view.ts";
 import { clampSelection, moveRows, navigateEntries, retainFocus } from "./tui/nav.ts";
-import { editHints, settingsHints } from "./tui/settings-view.ts";
+import { clipRows, isWide, sideWidth } from "./tui/panes.ts";
+import {
+	attentionFor,
+	chipsFor,
+	emptyLabelFor,
+	groupLabelFor,
+	modelFor,
+	sectionCounts,
+	tallestBody,
+	type ViewSource,
+} from "./tui/section-view.ts";
+import { sideRows } from "./tui/side-pane.ts";
 import { SettingsSection } from "./tui/settings-section.ts";
-import { skillDetail } from "./tui/skills-view.ts";
+import { projectNote, settingLabelColumn, settingRow } from "./tui/settings-view.ts";
 
 /** A section that draws a resource list rather than the settings table. */
 type ListSection = ResourceKind;
 
-/** Host seams for the panel screen, injected by the command runner. */
+/** The filter editor's identity, so it can share the settings editor's key map. */
+const FILTER_EDIT_ID = "filter";
+
+/** The longest filter query the editor accepts. */
+const FILTER_MAX = 60;
+
+/** Host seams for the control center, injected by the command runner. */
 export interface PanelComponentOptions {
 	/** The session's picker runtime: items, scope, toggles, dirty flag. */
 	runtime: PickerRuntime;
@@ -53,7 +70,7 @@ export interface PanelComponentOptions {
 	section?: PanelSection;
 	theme: Theme;
 	agentDir: string;
-	/** The session working directory, for the config-file path in the detail pane. */
+	/** The session working directory, for the config-file path in the block. */
 	cwd: string;
 	/** Live terminal height, for the row budget. */
 	viewportRows?: ViewportRowsSource;
@@ -66,58 +83,12 @@ export interface PanelComponentOptions {
 	initialRefresh?: boolean;
 	/** Re-probe; `force` ignores the session cache. Awaited before the busy state clears. */
 	refresh: (force?: boolean) => void | Promise<void>;
+	/** Confirm and reload, so the changes on screen take effect. */
+	reload: () => void | Promise<void>;
 	onClose: () => void;
 }
 
-/** What a list section's detail pane receives; each section reads what it needs. */
-interface DetailInput {
-	theme: Theme;
-	width: number;
-	row: PanelRow | undefined;
-	budget: number;
-	expanded: boolean;
-	dirty: boolean;
-}
-
-/** What a list section's hint row receives. */
-interface HintInput {
-	expanded: boolean;
-	refreshing: boolean;
-	projectScope: boolean;
-}
-
-/** One list section's own vocabulary: what it calls empty, its pane, and its hints. */
-interface ListView {
-	emptyLabel: string;
-	detail(input: DetailInput): string[];
-	hints(input: HintInput): ScreenHint[];
-}
-
-/**
- * The two list sections. Everything else — the frame, the rows, the cursor, the
- * keys, the scope — is shared, so a section only supplies what it alone can say.
- */
-const LIST_VIEWS: Record<ListSection, ListView> = {
-	extensions: {
-		emptyLabel: "No extensions found.",
-		detail: (input) => extensionDetail(input.theme, input.width, input.row, input.budget, input.expanded, input.dirty),
-		hints: (input) =>
-			sectionHints({ expanded: input.expanded, projectScope: input.projectScope, refreshing: input.refreshing }),
-	},
-	skills: {
-		emptyLabel: "No skills found.",
-		detail: (input) => skillDetail(input),
-		// A skill has no probe to re-run, so the section never offers the refresh key.
-		hints: (input) => sectionHints({ expanded: input.expanded, projectScope: input.projectScope }),
-	},
-};
-
-/** The resource kind a list section toggles, or `undefined` for Settings. */
-function kindOf(section: PanelSection): ResourceKind | undefined {
-	return section === "settings" ? undefined : section;
-}
-
-/** The docked bytefly panel. */
+/** The control center's screen. */
 export class PanelComponent implements Component {
 	private readonly cursors: Record<PanelSection, ListCursor>;
 	/** Serialises toggles so a rapid double press applies twice, not once. */
@@ -138,8 +109,16 @@ export class PanelComponent implements Component {
 	private skillIndex: ReadonlyMap<string, SkillInfo> | undefined;
 	/** Transient feedback (a refusal or a failed write), shown in the hint row. */
 	private notice: string | undefined;
-	/** Whether the last Settings render kept the project note; the click mapping needs it. */
+	/** What the reader narrowed the rows to. */
+	private filter: PanelFilter = NO_FILTER;
+	/** The filter editor, while `/` is open. */
+	private filterEditing: EditingState | undefined;
+	/** Whether the key table has taken the focused-row block. */
+	private helpOpen = false;
+	/** Whether the last render kept the project note; the click mapping needs it. */
 	private noteShown = false;
+	/** The label column the last Settings render used, in columns. */
+	private labelColumn = 0;
 	/** The Settings section's editor and JSON-pane state. */
 	private readonly settingsSection: SettingsSection;
 	/** The visible section. */
@@ -155,21 +134,14 @@ export class PanelComponent implements Component {
 		this.section = options.section ?? "extensions";
 		this.settingsSection = new SettingsSection({
 			surface: options.settings,
-			theme: options.theme,
 			scope: () => this.options.runtime.scope(),
+			filter: () => this.filter,
 			cursor: this.cursors.settings,
-			viewportRows: options.viewportRows,
-			cwd: options.cwd,
-			agentDir: options.agentDir,
 			retain: (entries) => this.retain(entries),
 			navigate: (data) => this.navigate(data),
 			switchScope: () => this.switchScope(),
 			notify: (message) => this.notify(message),
 			requestRender,
-			setNoteShown: (shown) => {
-				this.noteShown = shown;
-			},
-			hint: (width) => this.hintRow(width, { jsonOpen: this.settingsSection.jsonOpen }),
 		});
 	}
 
@@ -192,21 +164,23 @@ export class PanelComponent implements Component {
 		// Everything is rebuilt from live state on each render.
 	}
 
-	/** The merged model for the current items of one list section. */
-	private model(kind: ListSection): PanelModel {
-		if (kind === "skills") {
-			return buildSkillModel({
-				items: this.options.runtime.items("skills"),
-				index: this.skills(),
-				agentDir: this.options.agentDir,
-			});
-		}
-		return buildPanelModel({
-			items: this.options.runtime.items("extensions"),
-			reports: this.options.reports(),
+	/** The sources the screen's content is derived from. */
+	private source(): ViewSource {
+		return {
+			scope: this.options.runtime.scope(),
+			items: (kind) => this.options.runtime.items(kind),
+			reports: () => this.options.reports(),
+			settings: this.options.settings,
 			agentDir: this.options.agentDir,
-			filter: this.options.filter,
-		});
+			filter: this.filter,
+			commandFilter: this.options.filter,
+			dirty: this.dirty,
+		};
+	}
+
+	/** The merged model for a list section, filtered unless `filtered` is off. */
+	private model(kind: ListSection, filtered = true): PanelModel {
+		return modelFor(this.source(), kind, () => this.skills(), filtered);
 	}
 
 	/** Skill metadata, loaded on first use and kept for the screen's lifetime. */
@@ -217,25 +191,8 @@ export class PanelComponent implements Component {
 
 	/** The entries of the visible section. */
 	private activeEntries(): PanelEntry[] {
-		const section = this.section;
-		if (section === "settings") {
-			return settingEntries(this.options.settings.views(this.options.runtime.scope()));
-		}
-		return entriesOf(this.model(section));
-	}
-
-	/** Keep the focus on the same row key when the list shape changes. */
-	private retainFocus(entries: PanelEntry[]): void {
-		const before = entryKey(entries[this.cursor.selected]);
-		retainFocus(entries, this.cursor, this.focusedKeys[this.section]);
-		const after = entryKey(entries[this.cursor.selected]);
-		if (after !== undefined) this.focusedKeys[this.section] = after;
-		else if (before !== undefined) this.focusedKeys[this.section] = before;
-	}
-
-	/** Move onto the nearest selectable row when the focus is not already on one. */
-	private clampSelection(entries: PanelEntry[]): void {
-		clampSelection(entries, this.cursor);
+		if (this.section === "settings") return this.settingsSection.entries();
+		return entriesOf(this.model(this.section));
 	}
 
 	private switchScope(): void {
@@ -252,9 +209,9 @@ export class PanelComponent implements Component {
 		this.settingsSection.reset();
 		const focused = entryKey(this.activeEntries()[this.cursor.selected]);
 		this.options.runtime.setScope(next);
-		// Keep the setting under the cursor across the layer switch; the two scopes
-		// do not share entry indices because Project drops the app rows, so the
-		// render's focus retention and clamp land on the nearest row when it cannot.
+		// Keep the row under the cursor across the layer switch; the two scopes do
+		// not share entry indices because Project drops the app rows, so the render's
+		// focus retention and clamp land on the nearest row when it cannot.
 		if (focused !== undefined) {
 			const index = this.activeEntries().findIndex((entry) => entryKey(entry) === focused);
 			if (index >= 0) this.cursor.selected = index;
@@ -263,9 +220,7 @@ export class PanelComponent implements Component {
 	}
 
 	private toggle(): void {
-		const kind = kindOf(this.section);
-		if (kind === undefined) return;
-		const entry = this.activeEntries()[this.cursor.selected];
+		const entry = this.focusedEntry();
 		if (entry?.kind !== "row") return;
 		const item = entry.row.item;
 		if (!item) {
@@ -274,6 +229,7 @@ export class PanelComponent implements Component {
 			this.notify(`${entry.row.label} is not resolved; manage it with pi config.`);
 			return;
 		}
+		const kind = this.section === "skills" ? "skills" : "extensions";
 		this.chain = this.chain
 			.then(() => this.options.runtime.toggle(kind, item))
 			.catch(() => undefined)
@@ -282,15 +238,14 @@ export class PanelComponent implements Component {
 
 	/** Drop the focused resource's project override, restoring the inherited row. */
 	private clearOverride(): void {
-		const kind = kindOf(this.section);
-		if (kind === undefined) return;
-		const entry = this.activeEntries()[this.cursor.selected];
+		const entry = this.focusedEntry();
 		if (entry?.kind !== "row") return;
 		const item = entry.row.item;
 		if (!item) {
 			this.notify(`${entry.row.label} is not resolved; there is no override to clear.`);
 			return;
 		}
+		const kind = this.section === "skills" ? "skills" : "extensions";
 		this.chain = this.chain
 			.then(() => this.options.runtime.clearOverride(kind, item))
 			.catch(() => undefined)
@@ -301,7 +256,7 @@ export class PanelComponent implements Component {
 	 * Ask for the work the newly visible section needs. The Extensions view probes
 	 * when the session had no cache — doing it at mount would delay `/bytefly
 	 * settings`, which never reads the reports — and the Skills view reads its
-	 * metadata in the same one-shot way, so a scope switch repaints with names.
+	 * metadata in the same one-shot way.
 	 */
 	prime(): void {
 		const section = this.section;
@@ -339,14 +294,25 @@ export class PanelComponent implements Component {
 		}
 	}
 
+	/** Hand the reload to the command, which confirms before it takes the session. */
+	private async reload(): Promise<void> {
+		if (!this.dirty) {
+			this.notify("Nothing to apply; change something first.");
+			return;
+		}
+		await this.options.reload();
+	}
+
 	/**
-	 * Step one section left or right. The ends stop instead of wrapping, so the
-	 * bar reads as the screen's order rather than a loop.
+	 * Step one section left or right, wrapping. The tabs read as a ring, so the last
+	 * one continues to the first instead of stopping with no explanation.
 	 */
 	private stepSection(direction: -1 | 1): void {
-		const next = SECTION_ORDER[SECTION_ORDER.indexOf(this.section) + direction];
+		const index = SECTION_ORDER.indexOf(this.section);
+		const next = SECTION_ORDER[(index + direction + SECTION_ORDER.length) % SECTION_ORDER.length];
 		if (next === undefined || next === this.section) return;
 		this.section = next;
+		this.helpOpen = false;
 		this.settingsSection.reset();
 		this.prime();
 		this.options.requestRender();
@@ -354,82 +320,167 @@ export class PanelComponent implements Component {
 
 	/** Read one navigation key against the visible section. */
 	private navigate(data: string): void {
-		navigateEntries(this.activeEntries(), this.cursor, data, { grouped: this.section !== "settings" });
+		navigateEntries(this.activeEntries(), this.cursor, data, { grouped: true });
 	}
 
-	/** Drop the hint row's notice; any key dismisses it and still acts. */
-	private dismissNotice(): void {
-		if (this.notice === undefined) return;
-		this.notice = undefined;
+	/** Keep the focus on the same row key when the list shape changes. */
+	private retainFocus(entries: PanelEntry[]): void {
+		const before = entryKey(entries[this.cursor.selected]);
+		retainFocus(entries, this.cursor, this.focusedKeys[this.section]);
+		const after = entryKey(entries[this.cursor.selected]);
+		if (after !== undefined) this.focusedKeys[this.section] = after;
+		else if (before !== undefined) this.focusedKeys[this.section] = before;
+	}
+
+	/** Move onto the nearest selectable row when the focus is not already on one. */
+	private clampSelection(entries: PanelEntry[]): void {
+		clampSelection(entries, this.cursor);
+	}
+
+	/**
+	 * The focused entry, with the cursor clamped onto a row first: a key can arrive
+	 * before the first render, when the cursor still sits on a group heading.
+	 */
+	private focusedEntry(): PanelEntry | undefined {
+		const entries = this.activeEntries();
+		this.clampSelection(entries);
+		return entries[this.cursor.selected];
+	}
+
+	/** Retain the focus across a rebuild and return the entry it landed on. */
+	private retain(entries: PanelEntry[]): PanelEntry | undefined {
+		this.retainFocus(entries);
+		this.clampSelection(entries);
+		return entries[this.cursor.selected];
+	}
+
+	/** Expand or collapse the focused row's findings. */
+	private toggleDetail(): void {
+		const key = entryKey(this.focusedEntry());
+		if (key === undefined) return;
+		if (this.expanded.has(key)) this.expanded.delete(key);
+		else this.expanded.add(key);
 		this.options.requestRender();
 	}
 
-	handleInput(data: string): void {
-		const section = this.section;
-		if (section === "settings") {
-			// The editor takes every key, `Esc` included: it cancels the edit rather
-			// than closing the screen.
-			if (this.settingsSection.isEditing) {
-				this.settingsSection.handleInput(data);
-				return;
-			}
-			if (isCloseKey(data)) {
-				this.options.onClose();
-				return;
-			}
-			this.dismissNotice();
-			if (matchesKey(data, Key.left)) {
-				this.stepSection(-1);
-				return;
-			}
-			if (matchesKey(data, Key.right)) {
-				this.stepSection(1);
-				return;
-			}
-			this.settingsSection.handleInput(data);
-			return;
-		}
-		if (isCloseKey(data)) {
-			this.options.onClose();
-			return;
-		}
-		this.dismissNotice();
-		if (matchesKey(data, Key.left)) {
-			this.stepSection(-1);
-			return;
-		}
-		if (matchesKey(data, Key.right)) {
-			this.stepSection(1);
+	/** Open the filter editor, seeded with what is already applied. */
+	private openFilter(): void {
+		this.filterEditing = { id: FILTER_EDIT_ID, buffer: this.filter.query, caret: this.filter.query.length };
+		this.options.requestRender();
+	}
+
+	/**
+	 * The filter editor's keys. The query applies as it is typed — a filter that
+	 * only takes effect on `Enter` would make the reader wait to see it work — and
+	 * `Esc` clears it rather than leaving a hidden narrowing behind.
+	 */
+	private handleFilterInput(data: string): void {
+		const editing = this.filterEditing;
+		if (editing === undefined) return;
+		const action = applyEditKey(data, editing, FILTER_MAX);
+		if (action.kind === "commit") {
+			this.filterEditing = undefined;
+			this.options.requestRender();
 			return;
 		}
-		// An input can arrive before the first render; put the focus on a row.
-		this.clampSelection(this.activeEntries());
-		if (matchesKey(data, Key.space)) {
-			this.toggle();
+		if (action.kind === "cancel") {
+			this.filterEditing = undefined;
+			this.filter = { ...this.filter, query: "" };
+			this.options.requestRender();
 			return;
 		}
-		if (matchesKey(data, Key.enter)) {
-			this.toggleDetail();
+		if (!action.changed) return;
+		this.filterEditing = action.state;
+		this.filter = { ...this.filter, query: action.state.buffer };
+		this.options.requestRender();
+	}
+
+	/** One key, read against the section's table, with navigation as the fallback. */
+	handleInput(data: string): void {
+		const section = this.section;
+		// The editor takes every key, `Esc` included: it cancels the edit rather than
+		// closing the screen. The filter editor does the same with the query.
+		if (section === "settings" && this.settingsSection.isEditing) {
+			this.settingsSection.handleEditingInput(data);
 			return;
 		}
-		if (matchesKey(data, Key.tab)) {
-			this.switchScope();
+		if (this.filterEditing !== undefined) {
+			this.handleFilterInput(data);
 			return;
 		}
-		// Re-probing is the Extensions view's job; a skill has nothing to probe.
-		if (section === "extensions" && matchesKey(data, "r")) {
-			void this.refresh(true);
-			return;
+		// Any key dismisses the last notice and still does its own work.
+		if (this.notice !== undefined) {
+			this.notice = undefined;
+			this.options.requestRender();
 		}
-		// Only Project scope can hold an override, so the key does not exist in
-		// Global scope and the hint row does not offer it there.
-		if (matchesKey(data, "x") && this.options.runtime.scope() === "project") {
-			this.clearOverride();
+		const key = keyFor(data, section);
+		if (key !== undefined) {
+			this.act(key);
 			return;
 		}
+		// An input can arrive before the first render; put the focus on a row.
+		this.clampSelection(this.activeEntries());
 		this.navigate(data);
 	}
 
+	/** Run the action a key table row names. */
+	private act(key: ReturnType<typeof keyFor>): void {
+		switch (key) {
+			case "close":
+				this.options.onClose();
+				return;
+			case "previousSection":
+				this.stepSection(-1);
+				return;
+			case "nextSection":
+				this.stepSection(1);
+				return;
+			case "scope":
+				this.switchScope();
+				return;
+			case "filter":
+				this.openFilter();
+				return;
+			case "attention":
+				this.filter = { ...this.filter, attentionOnly: !this.filter.attentionOnly };
+				this.options.requestRender();
+				return;
+			case "help":
+				this.helpOpen = !this.helpOpen;
+				this.options.requestRender();
+				return;
+			case "reload":
+				void this.reload();
+				return;
+			case "toggle":
+				if (this.section === "settings") this.settingsSection.changeSetting();
+				else this.toggle();
+				return;
+			case "change":
+				this.settingsSection.changeSetting();
+				return;
+			case "reset":
+				this.settingsSection.resetSetting();
+				return;
+			case "json":
+				this.settingsSection.toggleJson();
+				return;
+			case "detail":
+				this.toggleDetail();
+				return;
+			case "refresh":
+				void this.refresh(true);
+				return;
+			case "inherit":
+				// Only Project scope can hold an override, so the key does nothing
+				// elsewhere and the hint row does not offer it there.
+				if (this.options.runtime.scope() === "project") this.clearOverride();
+				return;
+			default:
+				return;
+		}
+	}
+
 	handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined {
 		// A click while editing leaves the editor the way `Esc` does: nothing is
 		// written behind the screen.
@@ -445,10 +496,7 @@ export class PanelComponent implements Component {
 		if ((event.type !== "click" && event.type !== "press") || event.button !== "left") return undefined;
 		const entries = this.activeEntries();
 		if (entries.length === 0) return undefined;
-		// The Settings section prints the "Global only" note first in Project scope,
-		// so the rows start one line lower there.
-		const note = this.section === "settings" && this.noteShown ? 1 : 0;
-		const line = event.y - (BODY_START + note);
+		const line = event.y - (BODY_START + (this.noteShown ? 1 : 0));
 		const window = this.cursor.window(entries.length);
 		if (line < 0 || line >= window.end - window.start) return undefined;
 		const index = window.start + line;
@@ -457,92 +505,91 @@ export class PanelComponent implements Component {
 		return { handled: true };
 	}
 
-	/** Key hints for the active section; whole hints drop as the width runs out. */
-	private hint(width: number, options: { expanded?: boolean; jsonOpen?: boolean } = {}): string {
-		if (this.settingsSection.isEditing) return hintLine(this.theme, width, editHints());
-		if (this.section === "settings") {
-			return hintLine(this.theme, width, settingsHints(options.jsonOpen === true));
-		}
-		const hints = LIST_VIEWS[this.section].hints({
-			expanded: options.expanded === true,
-			refreshing: this.refreshing,
-			projectScope: this.options.runtime.scope() === "project",
-		});
-		return hintLine(this.theme, width, hints);
-	}
-
-	/** The key-hint row, or the notice that temporarily replaces it. */
-	private hintRow(width: number, options: { expanded?: boolean; jsonOpen?: boolean } = {}): string {
-		return this.notice !== undefined ? noticeLine(this.theme, width, this.notice) : this.hint(width, options);
-	}
-
-	/** Expand or collapse the focused row's findings. */
-	private toggleDetail(): void {
-		const key = entryKey(this.activeEntries()[this.cursor.selected]);
-		if (key === undefined) return;
-		if (this.expanded.has(key)) this.expanded.delete(key);
-		else this.expanded.add(key);
-		this.options.requestRender();
-	}
-
-	/** Retain the focus across a rebuild and return the entry it landed on. */
-	private retain(entries: PanelEntry[]): PanelEntry | undefined {
-		this.retainFocus(entries);
-		this.clampSelection(entries);
-		return entries[this.cursor.selected];
-	}
-
 	render(width: number): string[] {
 		const w = Math.max(1, width);
-		const header = titleRule(this.theme, w, "Bytefly");
 		const section = this.section;
-		if (section === "settings") return this.settingsSection.render(w, header);
-
-		const model = this.model(section);
-		const entries = entriesOf(model);
-		const summary = sectionBar(
-			this.theme,
-			w,
-			section,
-			resourceSummary(
-				this.theme,
-				w,
-				model,
-				this.options.runtime.scope(),
-				section === "skills" ? { noun: SKILL_NOUN } : { filter: this.options.filter },
-			),
-		);
-
+		const scope = this.options.runtime.scope();
+		const source = this.source();
+		const model = section === "settings" ? undefined : this.model(section);
+		const entries = model === undefined ? this.settingsSection.entries() : entriesOf(model);
 		const focusedEntry = this.retain(entries);
-		const focused = focusedEntry?.kind === "row" ? focusedEntry.row : undefined;
-		const expanded = focused !== undefined && this.expanded.has(focused.key);
-		const detail = LIST_VIEWS[section].detail({
+		const row = focusedEntry?.kind === "row" ? focusedEntry.row : undefined;
+		const setting = focusedEntry?.kind === "setting" ? focusedEntry.setting : undefined;
+		// The help block takes the focused row's place, and the block gets the whole
+		// free height while it is open: a key table clipped to three rows is no help.
+		const expanded = this.helpOpen || (row !== undefined && this.expanded.has(row.key));
+		const wide = isWide(w);
+		const blockWidth = wide ? sideWidth(w) : w;
+		const block = sideRows({
 			theme: this.theme,
-			width: w,
-			row: focused,
-			budget: detailRows(expanded, this.options.viewportRows),
+			width: blockWidth,
+			section,
+			row,
+			groupLabel: groupLabelFor(model, row),
+			setting,
+			help: this.helpOpen,
 			expanded,
+			// Below the pane breakpoint the block shares the rows with a table, so it
+			// leaves out what the row above already says.
+			compact: !wide,
 			dirty: this.dirty,
+			paths: { scope, cwd: this.options.cwd, agentDir: this.options.agentDir },
+			json: this.settingsSection.jsonFor(setting),
 		});
 
+		if (section === "settings") this.labelColumn = settingLabelColumn(this.settingsSection.views(), w);
 		const { lines, noteShown } = panelFrame({
 			theme: this.theme,
 			viewportRows: this.options.viewportRows,
 			cursor: this.cursor,
 			width: w,
-			header,
-			summary,
+			header: headerLine(this.theme, w, "Bytefly", attentionFor(source)),
+			tabs: tabsLine(this.theme, w, section, sectionCounts(source), {
+				chips: chipsFor(source, section, this.filterEditing),
+				scope: scope === "global" ? "Global" : "Project",
+			}),
 			entries,
-			emptyLabel: LIST_VIEWS[section].emptyLabel,
-			detail,
-			hint: this.hintRow(w, { expanded }),
-			draw: (entry, index) => {
-				if (entry.kind === "group") return groupLine(this.theme, w, entry);
-				if (entry.kind !== "row") return undefined;
-				return resourceRow(this.theme, w, entry.row, index === this.cursor.selected);
-			},
+			note: section === "settings" && scope === "project" ? projectNote(this.theme, w) : undefined,
+			detail: wide ? [] : clipRows(block, detailRows(expanded, this.options.viewportRows), w),
+			hint: hintRow({
+				theme: this.theme,
+				width: w,
+				section,
+				editing: this.settingsSection.isEditing || this.filterEditing !== undefined,
+				notice: this.notice,
+				state: {
+					expanded,
+					refreshing: this.refreshing,
+					projectScope: scope === "project",
+					dirty: this.dirty,
+					help: this.helpOpen,
+				},
+			}),
+			emptyLabel: emptyLabelFor(this.filter, section),
+			tallest: tallestBody(source),
+			side: wide ? (rows) => clipRows(block, rows, blockWidth) : undefined,
+			draw: (entry, index) => this.drawRow(entry, index, w, section, model),
 		});
 		this.noteShown = noteShown;
 		return lines;
 	}
+
+	/** One body line, in the section's own row grammar. */
+	private drawRow(
+		entry: PanelEntry,
+		index: number,
+		width: number,
+		section: PanelSection,
+		model: PanelModel | undefined,
+	): string | undefined {
+		const selected = index === this.cursor.selected;
+		if (entry.kind === "group") return groupLine(this.theme, width, entry);
+		if (entry.kind === "row") {
+			return resourceRow(this.theme, width, entry.row, selected, model === undefined ? 0 : verdictColumn(model.rows));
+		}
+		if (section !== "settings") return undefined;
+		const editing =
+			this.settingsSection.editingState?.id === entry.setting.id ? this.settingsSection.editingState : undefined;
+		return settingRow(this.theme, width, entry.setting, selected, editing, this.labelColumn);
+	}
 }