@gavin-hu/my-pi-agent 0.15.1 → 0.17.0

package/extensions/bytefly/panel/tui/entries.ts

@@ -1,12 +1,16 @@
 /**
- * The panel's entry model: a flat list where group headers and selectable rows
- * interleave, shared by both sections.
+ * The panel's entry model: one flat list of selectable rows per section.
+ *
+ * Extensions interleaves group headings with rows — a source group says where a
+ * resource came from, which the row cannot — while Settings is flat, in catalogue
+ * order. Both are built from a model or a set of views, so the component only has
+ * to keep one cursor per section.
  *
  * Pure: the list is rebuilt from a model or a set of views, and navigation is
- * index arithmetic, so the component only has to keep one cursor per section.
+ * index arithmetic.
  */
 
-import { groupViews, type SettingView } from "../settings.ts";
+import type { SettingView } from "../settings.ts";
 import type { PanelModel, PanelRow } from "../types.ts";
 
 /** A flat display entry: a group header or a selectable row. */
@@ -30,9 +34,9 @@ export function isSelectable(entry: PanelEntry | undefined): boolean {
 /**
  * One display window as ordinals over the selectable rows it contains.
  *
- * The range row counts rows, not entries: a list of twenty-nine settings in ten
- * groups spans thirty-nine entries, but `showing 3–5 of 29` is what the user can
- * focus. `formatRange` prints `start + 1` through `end`, so the ordinals here are
+ * The range row counts rows, not entries: an extension list's group headings are
+ * not focusable, so `showing 3–5 of 12` is what the user can land on.
+ * `formatRange` prints `start + 1` through `end`, so the ordinals here are
  * zero-based and `end` is exclusive.
  */
 export function selectableRange(
@@ -71,12 +75,10 @@ export function entriesOf(model: PanelModel): PanelEntry[] {
 	return entries;
 }
 
-/** Interleave the settings views into the same group/row display list. */
+/**
+ * The Settings entries: one row per view, in catalogue order, with no group
+ * headings — the list is short enough to read whole.
+ */
 export function settingEntries(views: readonly SettingView[]): PanelEntry[] {
-	const entries: PanelEntry[] = [];
-	for (const group of groupViews(views)) {
-		entries.push({ kind: "group", key: group.key, label: group.label, count: group.views.length });
-		for (const view of group.views) entries.push({ kind: "setting", setting: view });
-	}
-	return entries;
+	return views.map((setting) => ({ kind: "setting", setting }));
 }

package/extensions/bytefly/panel/tui/extensions-view.ts

@@ -1,51 +1,19 @@
 /**
- * The Extensions section: its summary line, one row per resolved extension, and
- * the detail pane for the focused row.
+ * The Extensions section's focused-row pane.
  *
- * Pure functions over the merged model — the component owns the cursor, the
- * filter, and the probe state, and passes them in.
+ * The row, the summary, and the key hints are the shared list grammar; what is
+ * specific here is the doctor's findings, including the resource path when a row
+ * has no verdict.
  */
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import type { ScreenHint } from "../../../../lib/tui/chrome.ts";
 import { sanitizeLine } from "../../../../lib/format.ts";
 import { clip } from "../../../../lib/tui/columns.ts";
-import { checkbox, listRow } from "../../../../lib/tui/rows.ts";
 import { paint } from "../../../../lib/tui/tokens.ts";
 import { detailLines as reportDetailLines } from "../../doctor/format.ts";
-import { rowBadge, summarySegments, type PanelScope } from "../format.ts";
-import type { PanelModel, PanelRow } from "../types.ts";
-import { countsLine, savedLine } from "./frame.ts";
-
-/** The section's hits, its scope, and how many need attention. */
-export function extensionSummary(
-	theme: Theme,
-	width: number,
-	model: PanelModel,
-	scope: PanelScope,
-	filter: string | undefined,
-): string {
-	return countsLine(theme, width, summarySegments(model, scope, { filter, compact: width < 72 }));
-}
-
-/** One extension row: its checkbox, health glyph, name, and verdict. */
-export function extensionRow(theme: Theme, width: number, row: PanelRow, selected: boolean): string {
-	const badge = rowBadge(row);
-	return listRow(theme, width, {
-		selected,
-		// A reported-only row has no enable pattern, but still reserves the box
-		// column so the list stays aligned.
-		leading: row.item ? checkbox(theme, row.item.enabled) : " ",
-		glyph: badge.glyph ?? " ",
-		glyphRole: badge.role,
-		label: sanitizeLine(row.label),
-		labelRole: selected ? "accent" : row.item && !row.item.enabled ? "faint" : "label",
-		trailing: badge.text,
-		// The glyph carries the status colour; the word stays quiet unless it is a
-		// problem, so a clean row does not shout.
-		trailingRole: badge.role === "bad" || badge.role === "warn" ? badge.role : "faint",
-	});
-}
+import { rowBadge } from "../format.ts";
+import type { PanelRow } from "../types.ts";
+import { savedLine } from "./frame.ts";
 
 /** The focused extension's findings and the pending-changes note. */
 export function extensionDetail(
@@ -70,22 +38,3 @@ export function extensionDetail(
 	lines.push(...savedLine(theme, width, dirty));
 	return lines;
 }
-
-/** The section's key hints, in the order they drop as the width runs out. */
-export function extensionHints(options: {
-	expanded: boolean;
-	refreshing: boolean;
-	projectScope: boolean;
-}): ScreenHint[] {
-	return [
-		"Esc close",
-		"←/→",
-		{ text: "Space toggle", color: "accent" },
-		{ text: options.expanded ? "Enter collapse" : "Enter detail", color: "accent" },
-		"Tab scope",
-		// Only Project scope can hold an override, so the key is not offered elsewhere.
-		...(options.projectScope ? ["x inherit"] : []),
-		options.refreshing ? "refreshing…" : "r refresh",
-		"↑/↓ select",
-	];
-}

package/extensions/bytefly/panel/tui/frame.ts

@@ -19,6 +19,7 @@ import {
 import { clip, fitCells, splitRow } from "../../../../lib/tui/columns.ts";
 import { fitRows, formatRange, type ListCursor } from "../../../../lib/tui/cursor.ts";
 import { BODY_INDENT } from "../../../../lib/tui/indent.ts";
+import { emptyState } from "../../../../lib/tui/rows.ts";
 import { paint } from "../../../../lib/tui/tokens.ts";
 import { sectionSegments, type SummarySegment } from "../format.ts";
 import type { PanelSection } from "../types.ts";
@@ -26,10 +27,10 @@ import { selectableRange, type PanelEntry } from "./entries.ts";
 
 /** Body rows when the terminal height is unknown. */
 export const SCREEN_DEFAULT_ROWS = 16;
-/** Fixed rows around the body: header, summary, blank, blank, hint, blank. */
+/** Fixed rows around the body: header, summary, blank, blank, hint, closing rule. */
 export const FRAME_ROWS = 6;
-/** Detail rows reserved for the focused row. */
-export const DETAIL_ROWS = 4;
+/** Detail rows reserved for the focused row: its head, one description line, and its origin. */
+export const DETAIL_ROWS = 3;
 /** Body rows that must survive before the detail pane collapses to its title. */
 export const MIN_BODY_ROWS = 3;
 /** Detail rows when the terminal height is unknown and the focused row is expanded. */
@@ -142,6 +143,8 @@ export interface PanelFrameInput {
 	note?: string;
 	detail: string[];
 	hint: string;
+	/** The line a section shows in place of its body when it has no entries. */
+	emptyLabel?: string;
 	draw: (entry: PanelEntry, index: number) => string | undefined;
 }
 
@@ -164,6 +167,9 @@ export function panelFrame(input: PanelFrameInput): { lines: string[]; noteShown
 
 	const body: string[] = [];
 	if (note) body.push(note);
+	if (entries.length === 0 && input.emptyLabel !== undefined) {
+		body.push(...emptyState(theme, width, { label: input.emptyLabel }));
+	}
 	for (let index = start; index < end; index += 1) {
 		const line = draw(entries[index], index);
 		if (line !== undefined) body.push(line);
@@ -175,6 +181,8 @@ export function panelFrame(input: PanelFrameInput): { lines: string[]; noteShown
 	const fitted = fitOptionalLines({ viewportRows, body, note, range, detail });
 	return {
 		lines: dockListFrame({
+			theme,
+			width,
 			header: input.header,
 			summary: input.summary,
 			body: fitted.body,

package/extensions/bytefly/panel/tui/list-view.ts

@@ -0,0 +1,72 @@
+/**
+ * The grouped list sections' shared pieces: the headline counts, one row, and
+ * the key hints.
+ *
+ * Extensions and Skills draw the same row grammar — a checkbox, a verdict, and
+ * the resource's name — and offer the same keys, so the row, the summary, and
+ * the hint row live here and each section supplies only what it can say about
+ * the focused row and whether it has anything to refresh.
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { sanitizeLine } from "../../../../lib/format.ts";
+import type { ScreenHint } from "../../../../lib/tui/chrome.ts";
+import { checkbox, listRow } from "../../../../lib/tui/rows.ts";
+import { rowBadge, type PanelScope, summarySegments, type SummaryOptions } from "../format.ts";
+import type { PanelModel, PanelRow } from "../types.ts";
+import { countsLine } from "./frame.ts";
+
+/** The section's headline: the scope, the row count, and what is off. */
+export function resourceSummary(
+	theme: Theme,
+	width: number,
+	model: PanelModel,
+	scope: PanelScope,
+	options: SummaryOptions = {},
+): string {
+	return countsLine(theme, width, summarySegments(model, scope, { ...options, compact: width < 72 }));
+}
+
+/** One resource row: its checkbox, verdict, and name. */
+export function resourceRow(theme: Theme, width: number, row: PanelRow, selected: boolean): string {
+	const badge = rowBadge(row);
+	return listRow(theme, width, {
+		selected,
+		// A reported-only row has no enable pattern, but still reserves the box
+		// column so the list stays aligned.
+		leading: row.item ? checkbox(theme, row.item.enabled) : " ",
+		glyph: badge.glyph ?? " ",
+		glyphRole: badge.role,
+		label: sanitizeLine(row.label),
+		labelRole: selected ? "accent" : row.item && !row.item.enabled ? "faint" : "label",
+		trailing: badge.text,
+		// The glyph carries the status colour; the word stays quiet unless it is a
+		// problem, so a clean row does not shout.
+		trailingRole: badge.role === "bad" || badge.role === "warn" ? badge.role : "faint",
+		// The verdict sits beside the name instead of at the far edge of a wide
+		// terminal, where a two-word verdict would be unreadable.
+		align: "inline",
+	});
+}
+
+export interface SectionHintOptions {
+	expanded: boolean;
+	projectScope: boolean;
+	/** The refresh key's state; omitted by a section with nothing to refresh. */
+	refreshing?: boolean;
+}
+
+/** The section's key hints, in the order they drop as the width runs out. */
+export function sectionHints({ expanded, projectScope, refreshing }: SectionHintOptions): ScreenHint[] {
+	return [
+		"Esc close",
+		"←/→",
+		{ text: "Space toggle", color: "accent" },
+		{ text: expanded ? "Enter collapse" : "Enter detail", color: "accent" },
+		"Tab scope",
+		// Only Project scope can hold an override, so the key is not offered elsewhere.
+		...(projectScope ? ["x inherit"] : []),
+		...(refreshing === undefined ? [] : [refreshing ? "refreshing…" : "r refresh"]),
+		"↑/↓ select",
+	];
+}

package/extensions/bytefly/panel/tui/nav.ts

@@ -1,7 +1,7 @@
 /**
- * Cursor arithmetic for the panel's two lists: keep the focus on a row across a
- * rebuild, land on the nearest row when the shape changes, and move by rows
- * while skipping group headers.
+ * Cursor arithmetic for the panel's lists: keep the focus on a row across a
+ * rebuild, land on the nearest row when the shape changes, move by rows while
+ * skipping group headers, and read one navigation key.
  *
  * Pure: each function takes the entries and the cursor and mutates only the
  * cursor it was handed, so the component keeps one cursor per section and no
@@ -9,6 +9,7 @@
  */
 
 import type { ListCursor } from "../../../../lib/tui/cursor.ts";
+import { navIntent } from "../../../../lib/tui/cursor.ts";
 import { entryKey, isSelectable, nextRow, type PanelEntry } from "./entries.ts";
 
 /** The first selectable entry, or `undefined` when the list has none. */
@@ -73,3 +74,70 @@ export function moveRows(entries: PanelEntry[], cursor: ListCursor, delta: numbe
 	}
 	cursor.set(index, entries.length);
 }
+
+/** Move to the first row of the next (or previous) group. */
+export function jumpGroup(entries: PanelEntry[], cursor: ListCursor, direction: -1 | 1): void {
+	const headers = entries.flatMap((entry, index) => (entry.kind === "group" ? [index] : []));
+	const selected = 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])) {
+			cursor.set(index, entries.length);
+			return;
+		}
+	}
+}
+
+/** Move the cursor to `index`, clamped to the list. */
+export function selectRow(entries: PanelEntry[], cursor: ListCursor, index: number | undefined): void {
+	if (index === undefined) return;
+	cursor.set(index, entries.length);
+}
+
+/**
+ * Read one navigation key against a list. `grouped` is true for the resource
+ * lists, whose headings the bracket keys jump between; the Settings list is flat.
+ */
+export function navigateEntries(
+	entries: PanelEntry[],
+	cursor: ListCursor,
+	data: string,
+	options: { grouped: boolean },
+): void {
+	if (data === "g") {
+		selectRow(entries, cursor, firstRow(entries));
+		return;
+	}
+	if (data === "G") {
+		selectRow(entries, cursor, lastRow(entries));
+		return;
+	}
+	if (options.grouped && (data === "[" || data === "]")) {
+		jumpGroup(entries, cursor, data === "[" ? -1 : 1);
+		return;
+	}
+	switch (navIntent(data)) {
+		case "up":
+			moveRows(entries, cursor, -1);
+			return;
+		case "down":
+			moveRows(entries, cursor, 1);
+			return;
+		case "pageUp":
+			moveRows(entries, cursor, -Math.max(1, cursor.visible));
+			return;
+		case "pageDown":
+			moveRows(entries, cursor, Math.max(1, cursor.visible));
+			return;
+		case "home":
+			selectRow(entries, cursor, firstRow(entries));
+			return;
+		case "end":
+			selectRow(entries, cursor, lastRow(entries));
+			return;
+	}
+}

package/extensions/bytefly/panel/tui/settings-section.ts

@@ -0,0 +1,250 @@
+/**
+ * The Settings section: its own state (the editor and the JSON pane), its key
+ * handling, and the screen it draws.
+ *
+ * The component owns the section switch, the write scope, and the cursor. This
+ * class owns what only Settings has, so `tui.ts` stays the switch and the shared
+ * list keys, and the section reads and writes through the same surface.
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { Key, matchesKey } from "@earendil-works/pi-tui";
+import type { ViewportRowsSource } from "../../../../lib/tui/chrome.ts";
+import type { ListCursor } from "../../../../lib/tui/cursor.ts";
+import type { WriteScope } from "../../picker/types.ts";
+import type { SettingsSurface } from "../settings-runtime.ts";
+import { SETTING_ROWS } from "../settings.ts";
+import { applyEditKey, type EditingState } from "./editing.ts";
+import { settingEntries, type PanelEntry } from "./entries.ts";
+import { detailRows, groupLine, panelFrame, sectionBar } from "./frame.ts";
+import { clampSelection } from "./nav.ts";
+import { projectNote, sectionJsonPane, settingDetail, settingRow, settingsSummary } from "./settings-view.ts";
+
+/** What the Settings section needs from the component that hosts it. */
+export interface SettingsSectionDeps {
+	/** The rows, values, and writes the section reads and calls. */
+	surface: SettingsSurface;
+	theme: Theme;
+	scope(): WriteScope;
+	cursor: ListCursor;
+	viewportRows: ViewportRowsSource | undefined;
+	cwd: string;
+	agentDir: string;
+	/** Keep the focused row across a rebuild and return it. */
+	retain(entries: PanelEntry[]): PanelEntry | undefined;
+	/** Panel navigation, for the keys this section does not own. */
+	navigate(data: string): void;
+	/** Flip the Global/Project scope. */
+	switchScope(): void;
+	notify(message: string): void;
+	requestRender(): void;
+	/** Keep the frame's project-note marker in step for the mouse mapping. */
+	setNoteShown(shown: boolean): void;
+	/** The hint row, already assembled (or the notice that replaces it). */
+	hint(width: number): string;
+}
+
+/** The Settings section's state and screen. */
+export class SettingsSection {
+	private chain: Promise<void> = Promise.resolve();
+	private editing: EditingState | undefined;
+	private json = false;
+
+	constructor(private readonly deps: SettingsSectionDeps) {}
+
+	/** Whether a text row is open in the editor, so the hint row and mouse defer. */
+	get isEditing(): boolean {
+		return this.editing !== undefined;
+	}
+
+	/** Whether the detail pane shows the focused row's section as JSON. */
+	get jsonOpen(): boolean {
+		return this.json;
+	}
+
+	/** Run `task` after the previous write, then repaint once. */
+	private write(task: () => Promise<unknown>, onSettled?: (result: unknown) => void): void {
+		this.chain = this.chain
+			.then(task)
+			.then(onSettled)
+			.catch((error: unknown) => this.deps.notify(error instanceof Error ? error.message : String(error)))
+			.then(() => this.deps.requestRender());
+	}
+
+	/** The rows for the active scope, as display entries. */
+	private entries(): PanelEntry[] {
+		return settingEntries(this.deps.surface.views(this.deps.scope()));
+	}
+
+	/** The focused entry, after clamping the cursor onto a row. */
+	private focused(): PanelEntry | undefined {
+		const entries = this.entries();
+		clampSelection(entries, this.deps.cursor);
+		return entries[this.deps.cursor.selected];
+	}
+
+	/** Drop the editor and the JSON pane when another section takes over. */
+	reset(): void {
+		this.editing = undefined;
+		this.json = false;
+	}
+
+	/** A click leaves the editor the way `Esc` does: nothing is written. */
+	cancelEdit(): void {
+		this.reset();
+		this.deps.requestRender();
+	}
+
+	/** Change the focused setting: cycle it, or open the editor for a text row. */
+	private changeSetting(): void {
+		const entry = this.focused();
+		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.deps.requestRender();
+			return;
+		}
+		const scope = this.deps.scope();
+		this.write(() => this.deps.surface.change(scope, view.id));
+	}
+
+	/** Delete the focused setting's leaf, so its default applies again. */
+	private resetSetting(): void {
+		const entry = this.focused();
+		if (entry?.kind !== "setting") return;
+		const scope = this.deps.scope();
+		this.write(() => this.deps.surface.reset(scope, entry.setting.id));
+	}
+
+	/** Toggle the detail pane between the row and its whole section as stored. */
+	private toggleJson(): void {
+		const entry = this.focused();
+		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.deps.notify(`${entry.setting.label} is a Pi setting; bytefly.json has no section for it.`);
+			return;
+		}
+		this.json = !this.json;
+		this.deps.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.deps.scope();
+		this.write(
+			() => this.deps.surface.setValue(scope, editing.id, editing.buffer),
+			(saved) => {
+				if (saved === true) this.editing = undefined;
+			},
+		);
+	}
+
+	/**
+	 * Editor keys. `Esc`/`Ctrl+C` cancel the edit rather than closing the screen,
+	 * and everything else the section binds is inert until the editor closes.
+	 */
+	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.deps.requestRender();
+			return;
+		}
+		if (!action.changed) return;
+		this.editing = action.state;
+		this.deps.requestRender();
+	}
+
+	/** One key: editor keys first, then change, scope, reset, JSON, navigation. */
+	handleInput(data: string): void {
+		if (this.editing) {
+			this.handleEditingInput(data);
+			return;
+		}
+		this.focused();
+		if (matchesKey(data, Key.space) || matchesKey(data, Key.enter)) {
+			this.changeSetting();
+			return;
+		}
+		if (matchesKey(data, Key.tab)) {
+			this.deps.switchScope();
+			return;
+		}
+		if (data === "u") {
+			this.resetSetting();
+			return;
+		}
+		if (data === "J") {
+			this.toggleJson();
+			return;
+		}
+		this.deps.navigate(data);
+	}
+
+	/** The Settings body: scope counts, the project note, rows, and detail. */
+	render(width: number, header: string): string[] {
+		const { theme, surface, viewportRows, cwd, agentDir } = this.deps;
+		const scope = this.deps.scope();
+		const views = surface.views(scope);
+		const entries = settingEntries(views);
+		const focusedEntry = this.deps.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 jsonSection = this.json ? focused?.config : undefined;
+		const paths = { scope, cwd, agentDir };
+		const detail = jsonSection
+			? sectionJsonPane({
+					theme,
+					width,
+					section: jsonSection.section,
+					document: surface.sectionDocument(scope, jsonSection.section),
+					budget: detailRows(true, viewportRows),
+					dirty: surface.isDirty(),
+					paths,
+				})
+			: settingDetail({
+					theme,
+					width,
+					view: focused,
+					budget: detailRows(false, viewportRows),
+					dirty: surface.isDirty(),
+					paths,
+				});
+
+		const { lines, noteShown } = panelFrame({
+			theme,
+			viewportRows,
+			cursor: this.deps.cursor,
+			width,
+			header,
+			summary: sectionBar(theme, width, "settings", settingsSummary(theme, width, scope, views.length)),
+			entries,
+			note: scope === "project" ? projectNote(theme, width) : undefined,
+			detail,
+			hint: this.deps.hint(width),
+			draw: (entry, index) => {
+				if (entry.kind === "group") return groupLine(theme, width, entry);
+				if (entry.kind !== "setting") return undefined;
+				const editing = this.editing?.id === entry.setting.id ? this.editing : undefined;
+				return settingRow(theme, width, entry.setting, index === this.deps.cursor.selected, editing);
+			},
+		});
+		this.deps.setNoteShown(noteShown);
+		return lines;
+	}
+}

package/extensions/bytefly/panel/tui/settings-view.ts

@@ -27,6 +27,8 @@ const PI_SETTINGS_FILE = "settings.json";
 const ROW_PREFIX_WIDTH = 4;
 /** Columns a value keeps when the row has to choose between the label and the value. */
 const MIN_VALUE_WIDTH = 8;
+/** Columns between the label and its value. */
+const VALUE_GAP = 2;
 
 /**
  * The editing cell: the buffer around the caret, scrolled so the caret is always
@@ -56,7 +58,7 @@ export function settingsSummary(theme: Theme, width: number, scope: PanelScope,
 	return countsLine(theme, width, settingsSummarySegments(scope, count));
 }
 
-/** One setting row: a checkbox for booleans, the value right-aligned. */
+/** One setting row: a checkbox for booleans, and the value beside the label. */
 export function settingRow(
 	theme: Theme,
 	width: number,
@@ -67,7 +69,7 @@ export function settingRow(
 	const label = sanitizeLine(view.label);
 	// Keep the whole label when it fits, and never let a long value or an editing
 	// buffer erase it: the value gets what is left, with a floor of eight columns.
-	const available = Math.max(1, width - ROW_PREFIX_WIDTH - 1);
+	const available = Math.max(1, width - ROW_PREFIX_WIDTH - VALUE_GAP);
 	const labelReserve = Math.min(visibleWidth(label), Math.max(0, available - MIN_VALUE_WIDTH));
 	const valueBudget = Math.max(1, available - labelReserve);
 	const rawValue = editing ? editingCell(editing.buffer, editing.caret, valueBudget) : view.valueLabel;
@@ -78,6 +80,9 @@ export function settingRow(
 		labelRole: selected ? "accent" : "label",
 		trailing: clip(sanitizeLine(rawValue), valueBudget),
 		trailingRole: editing ? "accent" : "meta",
+		// The value sits beside the label, so a wide terminal never strands it at
+		// the far edge where the eye has to travel to read it.
+		align: "inline",
 	});
 }
 
@@ -137,16 +142,7 @@ export function settingDetail(options: {
 
 /** The section's key hints, in the order they drop as the width runs out. */
 export function settingsHints(json = false): string[] {
-	return [
-		"Esc close",
-		"←/→",
-		"Space change",
-		"Tab scope",
-		"u reset",
-		json ? "J hide" : "J JSON",
-		"[ ] group",
-		"↑/↓ select",
-	];
+	return ["Esc close", "←/→", "Space change", "Tab scope", "u reset", json ? "J hide" : "J JSON", "↑/↓ select"];
 }
 
 /**