magus-cli 7.3.1 → 7.4.0

package/src/ui/renderers/settingsRenderers.tsx

@@ -5,30 +5,37 @@ import type {
 	SettingsSettingItem,
 } from "../adapters/settingsAdapter.js";
 import {
-	CATEGORY_BG,
-	CATEGORY_COLOR,
 	CATEGORY_DESCRIPTIONS,
 	CATEGORY_LABELS,
 	formatValue,
 } from "../adapters/settingsAdapter.js";
-import { MetaText, SelectableRow } from "../components/primitives/index.js";
+import {
+	ListCategoryRow,
+	ScopeDot,
+	ScopeKeyChip,
+	rowLead,
+} from "../components/primitives/index.js";
 import type { ItemRenderer } from "../registry.js";
+import { displayWidth, padTo } from "../text-width.js";
 import { theme } from "../theme.js";
 
 // ─── Category renderer ─────────────────────────────────────────────────────────
 
+/**
+ * A category is a group, so every header wears the one neutral header style.
+ * They used to wear four unrelated hues — green, teal, purple, blue, amber — none
+ * of which meant anything, and two of which (amber, green) meant "warning" and
+ * "on" everywhere else. "Recommended" keeps its ★, which is the distinction.
+ */
 const categoryRenderer: ItemRenderer<SettingsCategoryItem> = {
 	renderRow: ({ item, isSelected }) => {
 		const star = item.category === "recommended" ? "★ " : "";
-		const label = `${star}${CATEGORY_LABELS[item.category]}`;
-		const bg = isSelected ? theme.selection.bg : CATEGORY_BG[item.category];
-
 		return (
-			<box width="100%">
-				<text bg={bg} fg={theme.hints.fg}>
-					<strong> {label} </strong>
-				</text>
-			</box>
+			<ListCategoryRow
+				selected={isSelected}
+				title={`${star}${CATEGORY_LABELS[item.category]}`}
+				expandable={false}
+			/>
 		);
 	},
 
@@ -36,7 +43,7 @@ const categoryRenderer: ItemRenderer<SettingsCategoryItem> = {
 		const cat = item.category;
 		return (
 			<box flexDirection="column">
-				<text fg={CATEGORY_COLOR[cat]}>
+				<text fg={theme.colors.info}>
 					<strong>{CATEGORY_LABELS[cat]}</strong>
 				</text>
 				<box marginTop={1}>
@@ -49,34 +56,70 @@ const categoryRenderer: ItemRenderer<SettingsCategoryItem> = {
 
 // ─── Setting renderer ──────────────────────────────────────────────────────────
 
+/** The lead cell, the ●/○ indicator and the space after it. */
+const ROW_PREFIX = 3;
+/** Columns always kept between a label and its value. */
+const LABEL_GAP = 1;
+/** Width assumed when a caller does not say — the old fixed label column. */
+const DEFAULT_ROW_WIDTH = 45;
+
+/**
+ * One setting row: `▌● Label……………… value`, fitted to `width` in cells.
+ *
+ * The label used to be `name.padEnd(28)`, which only pads: a name of 28 or more
+ * characters ran straight into its value — "Auto-approve Project MCP Serversoff",
+ * "AI Attribution in Commits & PRson". Now the value is measured first and keeps
+ * its whole width, the label gets what is left less a one-cell gap, and a label
+ * that does not fit is cut with `…`. Everything is counted in terminal cells, so
+ * a wide glyph in a value cannot push it into the divider.
+ */
+function settingRowParts(
+	name: string,
+	value: string,
+	width: number,
+): { label: string; value: string } {
+	const valueWidth = displayWidth(value);
+	const labelWidth = Math.max(
+		1,
+		width - ROW_PREFIX - LABEL_GAP - valueWidth - 1,
+	);
+	return { label: padTo(name, labelWidth), value };
+}
+
 const settingRenderer: ItemRenderer<SettingsSettingItem> = {
-	renderRow: ({ item, isSelected }) => {
+	renderRow: ({ item, isSelected, width = DEFAULT_ROW_WIDTH }) => {
 		const { setting } = item;
 		const indicator = item.isDefault ? "○" : "●";
-		const displayValue = formatValue(setting, item.effectiveValue);
+		const parts = settingRowParts(
+			setting.name,
+			formatValue(setting, item.effectiveValue),
+			width,
+		);
+		const gap = " ".repeat(LABEL_GAP);
 
 		if (isSelected) {
 			return (
 				<text bg={theme.selection.bg} fg={theme.selection.fg}>
-					{" "}
-					{indicator} {setting.name.padEnd(28)}
-					{displayValue}{" "}
+					{rowLead(true)}
+					{indicator} {parts.label}
+					{gap}
+					{parts.value}{" "}
 				</text>
 			);
 		}
 
-		const indicatorColor = item.isDefault
-			? theme.colors.muted
-			: theme.colors.info;
-		const valueColor = item.isDefault
-			? theme.colors.muted
-			: theme.colors.success;
+		// Set vs default is one fact, said once: the dot, and the value's ink.
+		const tone = item.isDefault ? theme.colors.muted : theme.colors.success;
 
 		return (
 			<text fg={theme.colors.text}>
-				<span fg={indicatorColor}> {indicator} </span>
-				<span>{setting.name.padEnd(28)}</span>
-				<span fg={valueColor}>{displayValue}</span>
+				<span fg={tone}>
+					{rowLead(false)}
+					{indicator}{" "}
+				</span>
+				<span>{parts.label}</span>
+				<span>{gap}</span>
+				<span fg={tone}>{parts.value}</span>
 			</text>
 		);
 	},
@@ -117,7 +160,7 @@ const settingRenderer: ItemRenderer<SettingsSettingItem> = {
 				<box marginTop={1}>
 					<text fg={theme.colors.text}>
 						<span fg={theme.colors.muted}>Stored </span>
-						<span fg={theme.colors.link}>{storageDesc}</span>
+						<span fg={theme.colors.info}>{storageDesc}</span>
 					</text>
 				</box>
 				{setting.defaultValue !== undefined && (
@@ -136,34 +179,22 @@ const settingRenderer: ItemRenderer<SettingsSettingItem> = {
 					</text>
 					<box marginTop={1} flexDirection="column">
 						<text fg={theme.colors.text}>
-							<span bg={theme.scopes.user} fg={theme.hints.fg}>
-								{" "}
-								u{" "}
-							</span>
-							<span fg={userIsSet ? theme.scopes.user : theme.colors.muted}>
-								{userIsSet ? " ● " : " ○ "}
-							</span>
-							<span fg={theme.scopes.user}>User</span>
-							<span> global</span>
-							<span fg={userIsSet ? theme.scopes.user : theme.colors.muted}>
+							<ScopeKeyChip scopeKey="u" />
+							<ScopeDot installed={userIsSet} />
+							<span>User</span>
+							<span fg={theme.colors.muted}> global</span>
+							<span fg={userIsSet ? theme.colors.success : theme.colors.muted}>
 								{" "}
 								{userValue}
 							</span>
 						</text>
 						<text fg={theme.colors.text}>
-							<span bg={theme.scopes.project} fg={theme.hints.fg}>
-								{" "}
-								p{" "}
-							</span>
+							<ScopeKeyChip scopeKey="p" />
+							<ScopeDot installed={projectIsSet} />
+							<span>Project</span>
+							<span fg={theme.colors.muted}> team</span>
 							<span
-								fg={projectIsSet ? theme.scopes.project : theme.colors.muted}
-							>
-								{projectIsSet ? " ● " : " ○ "}
-							</span>
-							<span fg={theme.scopes.project}>Project</span>
-							<span> team</span>
-							<span
-								fg={projectIsSet ? theme.scopes.project : theme.colors.muted}
+								fg={projectIsSet ? theme.colors.success : theme.colors.muted}
 							>
 								{" "}
 								{projectValue}
@@ -192,15 +223,16 @@ export const settingsRenderers: {
 	setting: settingRenderer,
 };
 
+/** A list row, fitted to `width` — the list panel's usable columns. */
 export function renderSettingRow(
 	item: SettingsBrowserItem,
-	_index: number,
 	isSelected: boolean,
+	width: number,
 ): React.ReactNode {
 	if (item.kind === "category") {
-		return settingsRenderers.category.renderRow({ item, isSelected });
+		return settingsRenderers.category.renderRow({ item, isSelected, width });
 	}
-	return settingsRenderers.setting.renderRow({ item, isSelected });
+	return settingsRenderers.setting.renderRow({ item, isSelected, width });
 }
 
 export function renderSettingDetail(
@@ -213,6 +245,3 @@ export function renderSettingDetail(
 	}
 	return settingsRenderers.setting.renderDetail({ item });
 }
-
-// Suppress unused import warning — MetaText may be used in future extensions
-void (MetaText as unknown);