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

package/extensions/bytefly/panel/tui.ts

@@ -1,50 +1,48 @@
 /**
- * The unified bytefly panel: two sections around one docked list.
+ * The unified bytefly panel: three sections around one docked list.
  *
  * Extensions lists every resolved extension with its enable checkbox and its
- * health; Settings lists the curated preferences with their values. The
- * component owns the state — the cursors, the focused row key per section, the
- * expanded set, the pending write chain, and the active section — and the two
- * section modules own how their rows and detail panes are drawn. It is derived:
- * it rebuilds the model from the picker runtime, the reports, or the settings
- * surface on every render, keeps the focused row's key across rebuilds, and
- * requests a repaint only after an input changes state. The screen is drawn from
- * the design system — a label-first `titleRule`, one `listRow` grammar, one
+ * health; Skills lists every resolved skill the same way, with what its
+ * `SKILL.md` declares; Settings lists the curated preferences with their values.
+ * 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`.
  */
 
 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 { ViewportRowsSource } from "../../../lib/tui/chrome.ts";
-import { dockListFrame } from "../../../lib/tui/chrome.ts";
-import { isCloseKey, ListCursor, navIntent, wheelDelta } from "../../../lib/tui/cursor.ts";
-import { emptyState } from "../../../lib/tui/rows.ts";
+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 { ExtensionReport } from "../../../lib/requirements.ts";
-import type { ExtensionsPickerRuntime } from "../picker/runtime.ts";
-import { buildPanelModel } from "./join.ts";
-import { SETTING_ROWS, UNTRUSTED_SETTINGS_NOTE } from "./settings.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 { UNTRUSTED_SETTINGS_NOTE } from "./settings.ts";
 import type { SettingsSurface } from "./settings-runtime.ts";
-import type { PanelModel, PanelSection } from "./types.ts";
+import type { PanelModel, PanelRow, PanelSection, SkillInfo } from "./types.ts";
 import { entriesOf, entryKey, isSelectable, settingEntries, type PanelEntry } from "./tui/entries.ts";
-import { applyEditKey, type EditingState } from "./tui/editing.ts";
-import { clampSelection, firstRow, lastRow, moveRows, retainFocus } from "./tui/nav.ts";
-import { extensionDetail, extensionHints, extensionRow, extensionSummary } from "./tui/extensions-view.ts";
+import { extensionDetail } from "./tui/extensions-view.ts";
 import { BODY_START, detailRows, groupLine, hintLine, noticeLine, panelFrame, sectionBar } from "./tui/frame.ts";
-import {
-	editHints,
-	projectNote,
-	sectionJsonPane,
-	settingDetail,
-	settingRow,
-	settingsHints,
-	settingsSummary,
-} from "./tui/settings-view.ts";
+import { resourceRow, resourceSummary, sectionHints } from "./tui/list-view.ts";
+import { clampSelection, moveRows, navigateEntries, retainFocus } from "./tui/nav.ts";
+import { editHints, settingsHints } from "./tui/settings-view.ts";
+import { SettingsSection } from "./tui/settings-section.ts";
+import { skillDetail } from "./tui/skills-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. */
 export interface PanelComponentOptions {
 	/** The session's picker runtime: items, scope, toggles, dirty flag. */
-	runtime: ExtensionsPickerRuntime;
+	runtime: PickerRuntime;
 	/** Current reports; read on every render so a refresh is picked up. */
 	reports: () => readonly ExtensionReport[];
 	/** The Settings section's rows, values, and writes. */
@@ -60,6 +58,8 @@ export interface PanelComponentOptions {
 	/** Live terminal height, for the row budget. */
 	viewportRows?: ViewportRowsSource;
 	requestRender: () => void;
+	/** Read every resolved skill's metadata; called once, when Skills first needs it. */
+	skills: () => ReadonlyMap<string, SkillInfo>;
 	/** The Extensions view probes on first show (no session cache, or the command asked to refresh). */
 	needsProbe?: boolean;
 	/** Force that first probe (`/bytefly … refresh`). */
@@ -69,14 +69,63 @@ export interface PanelComponentOptions {
 	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. */
 export class PanelComponent implements Component {
 	private readonly cursors: Record<PanelSection, ListCursor>;
-	/** Serialises writes so a rapid double press applies twice, not once. */
+	/** Serialises toggles so a rapid double press applies twice, not once. */
 	private chain: Promise<void> = Promise.resolve();
 	/** Focused row key per section, so it survives a rebuild that reorders rows. */
 	private readonly focusedKeys: Record<PanelSection, string | undefined> = {
 		extensions: undefined,
+		skills: undefined,
 		settings: undefined,
 	};
 	/** Row keys whose findings are expanded; Enter toggles only the focused row. */
@@ -85,21 +134,43 @@ export class PanelComponent implements Component {
 	private refreshing = false;
 	/** True once the Extensions view has asked for its first probe. */
 	private probed = false;
+	/** Skill metadata, read once when the Skills section first needs it. */
+	private skillIndex: ReadonlyMap<string, SkillInfo> | undefined;
 	/** Transient feedback (a refusal or a failed write), shown in the hint row. */
 	private notice: string | undefined;
-	/** The text row being edited, if any. */
-	private editing: EditingState | undefined;
-	/** True while the Settings detail pane shows the focused row's section as JSON. */
-	private json = false;
 	/** Whether the last Settings render kept the project note; the click mapping needs it. */
 	private noteShown = false;
+	/** The Settings section's editor and JSON-pane state. */
+	private readonly settingsSection: SettingsSection;
 	/** The visible section. */
 	private section: PanelSection;
 
 	constructor(private readonly options: PanelComponentOptions) {
 		const requestRender = (): void => this.options.requestRender();
-		this.cursors = { extensions: new ListCursor(requestRender), settings: new ListCursor(requestRender) };
+		this.cursors = {
+			extensions: new ListCursor(requestRender),
+			skills: new ListCursor(requestRender),
+			settings: new ListCursor(requestRender),
+		};
 		this.section = options.section ?? "extensions";
+		this.settingsSection = new SettingsSection({
+			surface: options.settings,
+			theme: options.theme,
+			scope: () => this.options.runtime.scope(),
+			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 }),
+		});
 	}
 
 	/** The active section's cursor. */
@@ -112,7 +183,7 @@ export class PanelComponent implements Component {
 		return this.options.theme;
 	}
 
-	/** Whether anything has been written this session, either section. */
+	/** Whether anything has been written this session, in any section. */
 	private get dirty(): boolean {
 		return this.options.runtime.isDirty() || this.options.settings.isDirty();
 	}
@@ -121,21 +192,36 @@ export class PanelComponent implements Component {
 		// Everything is rebuilt from live state on each render.
 	}
 
-	/** The merged model for the current items and reports. */
-	private model(): PanelModel {
+	/** 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(),
+			items: this.options.runtime.items("extensions"),
 			reports: this.options.reports(),
 			agentDir: this.options.agentDir,
 			filter: this.options.filter,
 		});
 	}
 
+	/** Skill metadata, loaded on first use and kept for the screen's lifetime. */
+	private skills(): ReadonlyMap<string, SkillInfo> {
+		this.skillIndex ??= this.options.skills();
+		return this.skillIndex;
+	}
+
 	/** The entries of the visible section. */
 	private activeEntries(): PanelEntry[] {
-		return this.section === "settings"
-			? settingEntries(this.options.settings.views(this.options.runtime.scope()))
-			: entriesOf(this.model());
+		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. */
@@ -152,28 +238,18 @@ export class PanelComponent implements Component {
 		clampSelection(entries, this.cursor);
 	}
 
-	private select(index: number | undefined): void {
-		if (index === undefined) return;
-		this.cursor.set(index, this.activeEntries().length);
-	}
-
-	/** Move `delta` rows, skipping group headers. */
-	private move(delta: number): void {
-		moveRows(this.activeEntries(), this.cursor, delta);
-	}
-
 	private switchScope(): void {
 		const next = this.options.runtime.scope() === "global" ? "project" : "global";
 		if (next === "project" && !this.options.runtime.projectAvailable()) {
 			this.notify(
 				this.section === "settings"
 					? UNTRUSTED_SETTINGS_NOTE
-					: "Project is not trusted; manage extensions in Global scope only.",
+					: `Project is not trusted; manage ${this.section} in Global scope only.`,
 			);
 			return;
 		}
 		// The JSON pane names a file, so a scope switch has to close it.
-		this.json = false;
+		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
@@ -187,6 +263,8 @@ export class PanelComponent implements Component {
 	}
 
 	private toggle(): void {
+		const kind = kindOf(this.section);
+		if (kind === undefined) return;
 		const entry = this.activeEntries()[this.cursor.selected];
 		if (entry?.kind !== "row") return;
 		const item = entry.row.item;
@@ -197,13 +275,15 @@ export class PanelComponent implements Component {
 			return;
 		}
 		this.chain = this.chain
-			.then(() => this.options.runtime.toggle(item))
+			.then(() => this.options.runtime.toggle(kind, item))
 			.catch(() => undefined)
 			.then(() => this.options.requestRender());
 	}
 
-	/** Drop the focused extension's project override, restoring the inherited row. */
+	/** 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];
 		if (entry?.kind !== "row") return;
 		const item = entry.row.item;
@@ -212,98 +292,24 @@ export class PanelComponent implements Component {
 			return;
 		}
 		this.chain = this.chain
-			.then(() => this.options.runtime.clearOverride(item))
+			.then(() => this.options.runtime.clearOverride(kind, item))
 			.catch(() => undefined)
 			.then(() => this.options.requestRender());
 	}
 
-	/** Change the focused setting: cycle it, or open the editor for a text row. */
-	private changeSetting(): void {
-		const entry = this.activeEntries()[this.cursor.selected];
-		if (entry?.kind !== "setting") return;
-		const view = entry.setting;
-		if (view.kind === "text") {
-			this.editing = { id: view.id, buffer: view.value, caret: view.value.length };
-			this.options.requestRender();
-			return;
-		}
-		const scope = this.options.runtime.scope();
-		this.chain = this.chain
-			.then(() => this.options.settings.change(scope, view.id))
-			.catch((error: unknown) => this.notify(error instanceof Error ? error.message : String(error)))
-			.then(() => this.options.requestRender());
-	}
-
-	/** Delete the focused setting's leaf, so its default applies again. */
-	private resetSetting(): void {
-		const entry = this.activeEntries()[this.cursor.selected];
-		if (entry?.kind !== "setting") return;
-		const scope = this.options.runtime.scope();
-		this.chain = this.chain
-			.then(() => this.options.settings.reset(scope, entry.setting.id))
-			.catch((error: unknown) => this.notify(error instanceof Error ? error.message : String(error)))
-			.then(() => this.options.requestRender());
-	}
-
-	/** Toggle the detail pane between the row and its whole section as stored. */
-	private toggleJson(): void {
-		const entry = this.activeEntries()[this.cursor.selected];
-		if (entry?.kind !== "setting") return;
-		if (!entry.setting.config) {
-			// There is no section to show, so leave the mode off rather than keeping a
-			// hidden toggle that would reopen the pane on another row.
-			this.json = false;
-			this.notify(`${entry.setting.label} is a Pi setting; bytefly.json has no section for it.`);
-			return;
-		}
-		this.json = !this.json;
-		this.options.requestRender();
-	}
-
-	/** Store the editor's buffer; a refusal keeps it open with the reason shown. */
-	private commitEdit(): void {
-		const editing = this.editing;
-		if (!editing) return;
-		const scope = this.options.runtime.scope();
-		this.chain = this.chain
-			.then(() => this.options.settings.setValue(scope, editing.id, editing.buffer))
-			.then((saved) => {
-				if (saved) this.editing = undefined;
-			})
-			.catch((error: unknown) => this.notify(error instanceof Error ? error.message : String(error)))
-			.then(() => this.options.requestRender());
-	}
-
 	/**
-	 * Editor keys. `Esc`/`Ctrl+C` cancel the edit rather than closing the screen,
-	 * and everything else the screen binds is inert until the editor closes.
+	 * 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.
 	 */
-	private handleEditingInput(data: string): void {
-		const editing = this.editing;
-		if (!editing) return;
-		const max = SETTING_ROWS.find((row) => row.id === editing.id)?.text?.maxLength;
-		const action = applyEditKey(data, editing, max);
-		if (action.kind === "commit") {
-			void this.commitEdit();
-			return;
-		}
-		if (action.kind === "cancel") {
-			this.editing = undefined;
-			this.options.requestRender();
+	prime(): void {
+		const section = this.section;
+		if (section === "skills") {
+			this.skills();
 			return;
 		}
-		if (!action.changed) return;
-		this.editing = action.state;
-		this.options.requestRender();
-	}
-
-	/**
-	 * Ask for the first Extensions probe when the session had no cache. The first
-	 * time the section is visible is when the rows need health; doing it at mount
-	 * would delay `/bytefly settings`, which never reads the reports.
-	 */
-	prime(): void {
-		if (this.probed || this.options.needsProbe !== true || this.section !== "extensions") return;
+		if (this.probed || this.options.needsProbe !== true || section !== "extensions") return;
 		this.probed = true;
 		void this.refresh(this.options.initialRefresh === true);
 	}
@@ -333,119 +339,67 @@ export class PanelComponent implements Component {
 		}
 	}
 
-	/** Show one of the two sections; each keeps its own cursor and focus. */
-	private switchSection(next: PanelSection): void {
-		if (next === this.section) return;
+	/**
+	 * 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.
+	 */
+	private stepSection(direction: -1 | 1): void {
+		const next = SECTION_ORDER[SECTION_ORDER.indexOf(this.section) + direction];
+		if (next === undefined || next === this.section) return;
 		this.section = next;
-		this.json = false;
+		this.settingsSection.reset();
 		this.prime();
 		this.options.requestRender();
 	}
 
-	/** Navigation shared by both sections. */
+	/** Read one navigation key against the visible section. */
 	private navigate(data: string): void {
-		if (data === "g") {
-			this.select(firstRow(this.activeEntries()));
-			return;
-		}
-		if (data === "G") {
-			this.select(lastRow(this.activeEntries()));
-			return;
-		}
-		// Only Extensions carries group headings; the Settings list is flat, so the
-		// keys would move the cursor nowhere there.
-		if (this.section === "extensions" && (data === "[" || data === "]")) {
-			this.jumpGroup(data === "[" ? -1 : 1);
-			return;
-		}
-		switch (navIntent(data)) {
-			case "up":
-				this.move(-1);
-				return;
-			case "down":
-				this.move(1);
-				return;
-			case "pageUp":
-				this.move(-Math.max(1, this.cursor.visible));
-				return;
-			case "pageDown":
-				this.move(Math.max(1, this.cursor.visible));
-				return;
-			case "home":
-				this.select(firstRow(this.activeEntries()));
-				return;
-			case "end":
-				this.select(lastRow(this.activeEntries()));
-				return;
-		}
+		navigateEntries(this.activeEntries(), this.cursor, data, { grouped: this.section !== "settings" });
 	}
 
-	/** Move to the first row of the next (or previous) group. */
-	private jumpGroup(direction: -1 | 1): void {
-		const entries = this.activeEntries();
-		const headers = entries.flatMap((entry, index) => (entry.kind === "group" ? [index] : []));
-		const selected = this.cursor.selected;
-		// Step past the focused row's own header: landing on it would not move.
-		const own = headers.filter((index) => index < selected).at(-1);
-		const target =
-			direction === 1
-				? headers.find((index) => index > selected)
-				: headers.filter((index) => index < (own ?? 0)).at(-1);
-		if (target === undefined) return;
-		for (let index = target + 1; index < entries.length; index += 1) {
-			if (isSelectable(entries[index])) {
-				this.select(index);
-				return;
-			}
-		}
-	}
-
-	/** Settings keys: change, scope, navigation. `←`/`→` stay on sections. */
-	private handleSettingsInput(data: string): void {
-		this.clampSelection(this.activeEntries());
-		if (matchesKey(data, Key.space) || matchesKey(data, Key.enter)) {
-			this.changeSetting();
-			return;
-		}
-		if (matchesKey(data, Key.tab)) {
-			this.switchScope();
-			return;
-		}
-		if (data === "u") {
-			this.resetSetting();
-			return;
-		}
-		if (data === "J") {
-			this.toggleJson();
-			return;
-		}
-		this.navigate(data);
+	/** Drop the hint row's notice; any key dismisses it and still acts. */
+	private dismissNotice(): void {
+		if (this.notice === undefined) return;
+		this.notice = undefined;
+		this.options.requestRender();
 	}
 
 	handleInput(data: string): void {
-		if (this.editing) {
-			this.handleEditingInput(data);
+		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;
 		}
-		// A notice replaces the hint row; any key dismisses it and still acts.
-		if (this.notice !== undefined) {
-			this.notice = undefined;
-			this.options.requestRender();
-		}
+		this.dismissNotice();
 		if (matchesKey(data, Key.left)) {
-			this.switchSection("extensions");
+			this.stepSection(-1);
 			return;
 		}
 		if (matchesKey(data, Key.right)) {
-			this.switchSection("settings");
-			return;
-		}
-		if (this.section === "settings") {
-			this.handleSettingsInput(data);
+			this.stepSection(1);
 			return;
 		}
 		// An input can arrive before the first render; put the focus on a row.
@@ -462,7 +416,8 @@ export class PanelComponent implements Component {
 			this.switchScope();
 			return;
 		}
-		if (matchesKey(data, "r")) {
+		// 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;
 		}
@@ -478,14 +433,13 @@ export class PanelComponent implements Component {
 	handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined {
 		// A click while editing leaves the editor the way `Esc` does: nothing is
 		// written behind the screen.
-		if (this.editing) {
-			this.editing = undefined;
-			this.options.requestRender();
+		if (this.settingsSection.isEditing) {
+			this.settingsSection.cancelEdit();
 			return { handled: true };
 		}
 		const delta = wheelDelta(event);
 		if (delta !== undefined) {
-			this.move(delta);
+			moveRows(this.activeEntries(), this.cursor, delta);
 			return { handled: true };
 		}
 		if ((event.type !== "click" && event.type !== "press") || event.button !== "left") return undefined;
@@ -499,21 +453,21 @@ export class PanelComponent implements Component {
 		if (line < 0 || line >= window.end - window.start) return undefined;
 		const index = window.start + line;
 		if (!isSelectable(entries[index])) return undefined;
-		this.select(index);
+		this.cursor.set(index, entries.length);
 		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.editing) return hintLine(this.theme, width, editHints());
-		const hints =
-			this.section === "settings"
-				? settingsHints(options.jsonOpen === true)
-				: extensionHints({
-						expanded: options.expanded === true,
-						refreshing: this.refreshing,
-						projectScope: this.options.runtime.scope() === "project",
-					});
+		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);
 	}
 
@@ -538,101 +492,38 @@ export class PanelComponent implements Component {
 		return entries[this.cursor.selected];
 	}
 
-	/** The Settings body: scope counts, the project note, rows, and detail. */
-	private renderSettings(width: number, header: string): string[] {
-		const scope = this.options.runtime.scope();
-		const views = this.options.settings.views(scope);
-		const summary = sectionBar(
-			this.theme,
-			width,
-			this.section,
-			settingsSummary(this.theme, width, scope, views.length),
-		);
-		const entries = settingEntries(views);
-		const note = scope === "project" ? projectNote(this.theme, width) : undefined;
-
-		const focusedEntry = this.retain(entries);
-		const focused = focusedEntry?.kind === "setting" ? focusedEntry.setting : undefined;
-		// A row with no section leaves the mode off, so moving away and back cannot
-		// reopen a pane the user closed.
-		if (focused && !focused.config) this.json = false;
-		const jsonConfig = this.json ? focused?.config : undefined;
-		const detail =
-			jsonConfig && focused
-				? sectionJsonPane({
-						theme: this.theme,
-						width,
-						section: jsonConfig.section,
-						document: this.options.settings.sectionDocument(scope, jsonConfig.section),
-						budget: detailRows(true, this.options.viewportRows),
-						dirty: this.dirty,
-						paths: { scope, cwd: this.options.cwd, agentDir: this.options.agentDir },
-					})
-				: settingDetail({
-						theme: this.theme,
-						width,
-						view: focused,
-						budget: detailRows(false, this.options.viewportRows),
-						dirty: this.dirty,
-						paths: { scope, cwd: this.options.cwd, agentDir: this.options.agentDir },
-					});
-
-		const { lines, noteShown } = panelFrame({
-			theme: this.theme,
-			viewportRows: this.options.viewportRows,
-			cursor: this.cursor,
-			width,
-			header,
-			summary,
-			entries,
-			note,
-			detail,
-			hint: this.hintRow(width, { jsonOpen: jsonConfig !== undefined }),
-			draw: (entry, index) => {
-				if (entry.kind === "group") return groupLine(this.theme, width, entry);
-				if (entry.kind !== "setting") return undefined;
-				const editing = this.editing?.id === entry.setting.id ? this.editing : undefined;
-				return settingRow(this.theme, width, entry.setting, index === this.cursor.selected, editing);
-			},
-		});
-		this.noteShown = noteShown;
-		return lines;
-	}
-
 	render(width: number): string[] {
 		const w = Math.max(1, width);
-		const header = titleRule(this.theme, w, "bytefly");
-		if (this.section === "settings") return this.renderSettings(w, header);
+		const header = titleRule(this.theme, w, "Bytefly");
+		const section = this.section;
+		if (section === "settings") return this.settingsSection.render(w, header);
 
-		const model = this.model();
+		const model = this.model(section);
 		const entries = entriesOf(model);
 		const summary = sectionBar(
 			this.theme,
 			w,
-			this.section,
-			extensionSummary(this.theme, w, model, this.options.runtime.scope(), this.options.filter),
+			section,
+			resourceSummary(
+				this.theme,
+				w,
+				model,
+				this.options.runtime.scope(),
+				section === "skills" ? { noun: SKILL_NOUN } : { filter: this.options.filter },
+			),
 		);
 
-		if (entries.length === 0) {
-			return dockListFrame({
-				header,
-				summary,
-				body: emptyState(this.theme, w, { label: "No extensions found." }),
-				hint: this.hintRow(w),
-			});
-		}
-
 		const focusedEntry = this.retain(entries);
 		const focused = focusedEntry?.kind === "row" ? focusedEntry.row : undefined;
 		const expanded = focused !== undefined && this.expanded.has(focused.key);
-		const detail = extensionDetail(
-			this.theme,
-			w,
-			focused,
-			detailRows(expanded, this.options.viewportRows),
+		const detail = LIST_VIEWS[section].detail({
+			theme: this.theme,
+			width: w,
+			row: focused,
+			budget: detailRows(expanded, this.options.viewportRows),
 			expanded,
-			this.dirty,
-		);
+			dirty: this.dirty,
+		});
 
 		const { lines, noteShown } = panelFrame({
 			theme: this.theme,
@@ -642,12 +533,13 @@ export class PanelComponent implements Component {
 			header,
 			summary,
 			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 extensionRow(this.theme, w, entry.row, index === this.cursor.selected);
+				return resourceRow(this.theme, w, entry.row, index === this.cursor.selected);
 			},
 		});
 		this.noteShown = noteShown;