claudeup 3.16.0 → 4.0.0

package/src/ui/screens/EnvVarsScreen.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
 import { useEffect, useCallback, useMemo } from "react";
 import { useApp, useModal } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
@@ -7,88 +7,13 @@ import { ScreenLayout } from "../components/layout/index.js";
 import { ScrollableList } from "../components/ScrollableList.js";
 import { SETTINGS_CATALOG, } from "../../data/settings-catalog.js";
 import { readAllSettingsBothScopes, writeSettingValue, } from "../../services/settings-manager.js";
-const CATEGORY_LABELS = {
-    recommended: "Recommended",
-    agents: "Agents & Teams",
-    models: "Models & Thinking",
-    workflow: "Workflow",
-    terminal: "Terminal & UI",
-    performance: "Performance",
-    advanced: "Advanced",
-};
-const CATEGORY_ORDER = [
-    "recommended",
-    "agents",
-    "models",
-    "workflow",
-    "terminal",
-    "performance",
-    "advanced",
-];
-/** Get the effective value (project overrides user) */
-function getEffectiveValue(scoped) {
-    return scoped.project !== undefined ? scoped.project : scoped.user;
-}
-function buildListItems(values) {
-    const items = [];
-    for (const category of CATEGORY_ORDER) {
-        items.push({
-            id: `cat:${category}`,
-            type: "category",
-            label: CATEGORY_LABELS[category],
-            category,
-            isDefault: true,
-        });
-        const categorySettings = SETTINGS_CATALOG.filter((s) => s.category === category);
-        for (const setting of categorySettings) {
-            const scoped = values.get(setting.id) || {
-                user: undefined,
-                project: undefined,
-            };
-            const effective = getEffectiveValue(scoped);
-            items.push({
-                id: `setting:${setting.id}`,
-                type: "setting",
-                label: setting.name,
-                category,
-                setting,
-                scopedValues: scoped,
-                effectiveValue: effective,
-                isDefault: effective === undefined || effective === "",
-            });
-        }
-    }
-    return items;
-}
-function formatValue(setting, value) {
-    if (value === undefined || value === "") {
-        if (setting.defaultValue !== undefined) {
-            return setting.type === "boolean"
-                ? setting.defaultValue === "true"
-                    ? "on"
-                    : "off"
-                : setting.defaultValue || "default";
-        }
-        return "—";
-    }
-    if (setting.type === "boolean") {
-        return value === "true" || value === "1" ? "on" : "off";
-    }
-    if (setting.type === "select" && setting.options) {
-        const opt = setting.options.find((o) => o.value === value);
-        return opt ? opt.label : value;
-    }
-    if (value.length > 20) {
-        return value.slice(0, 20) + "...";
-    }
-    return value;
-}
+import { buildSettingsBrowserItems, } from "../adapters/settingsAdapter.js";
+import { renderSettingRow, renderSettingDetail } from "../renderers/settingsRenderers.js";
 export function SettingsScreen() {
     const { state, dispatch } = useApp();
     const { settings } = state;
     const modal = useModal();
     const dimensions = useDimensions();
-    // Fetch data from both scopes
     const fetchData = useCallback(async () => {
         dispatch({ type: "SETTINGS_DATA_LOADING" });
         try {
@@ -105,20 +30,17 @@ export function SettingsScreen() {
     useEffect(() => {
         fetchData();
     }, [fetchData]);
-    // Build flat list items
     const listItems = useMemo(() => {
         if (settings.values.status !== "success")
             return [];
-        return buildListItems(settings.values.data);
+        return buildSettingsBrowserItems(settings.values.data);
     }, [settings.values]);
-    const selectableItems = useMemo(() => listItems.filter((item) => item.type === "category" || item.type === "setting"), [listItems]);
-    // Change a setting in a specific scope
     const handleScopeChange = async (scope) => {
-        const item = selectableItems[settings.selectedIndex];
-        if (!item || item.type !== "setting" || !item.setting)
+        const item = listItems[settings.selectedIndex];
+        if (!item || item.kind !== "setting")
             return;
-        const setting = item.setting;
-        const currentValue = scope === "user" ? item.scopedValues?.user : item.scopedValues?.project;
+        const { setting, scopedValues } = item;
+        const currentValue = scope === "user" ? scopedValues.user : scopedValues.project;
         if (setting.type === "boolean") {
             const currentBool = currentValue === "true" ||
                 currentValue === "1" ||
@@ -137,9 +59,7 @@ export function SettingsScreen() {
                 label: o.label + (currentValue === o.value ? " (current)" : ""),
                 value: o.value,
             }));
-            // Find current value index for pre-selection
             const currentIndex = setting.options.findIndex((o) => o.value === currentValue);
-            // Add "clear" option to remove the setting
             if (currentValue !== undefined) {
                 options.push({ label: "Clear (use default)", value: "__clear__" });
             }
@@ -168,7 +88,6 @@ export function SettingsScreen() {
             }
         }
     };
-    // Keyboard handling
     useKeyboard((event) => {
         if (state.isSearching || state.modal)
             return;
@@ -177,7 +96,7 @@ export function SettingsScreen() {
             dispatch({ type: "SETTINGS_SELECT", index: newIndex });
         }
         else if (event.name === "down" || event.name === "j") {
-            const newIndex = Math.min(Math.max(0, selectableItems.length - 1), settings.selectedIndex + 1);
+            const newIndex = Math.min(Math.max(0, listItems.length - 1), settings.selectedIndex + 1);
             dispatch({ type: "SETTINGS_SELECT", index: newIndex });
         }
         else if (event.name === "u") {
@@ -187,40 +106,10 @@ export function SettingsScreen() {
             handleScopeChange("project");
         }
         else if (event.name === "enter") {
-            // Enter defaults to project scope
             handleScopeChange("project");
         }
     });
-    const selectedItem = selectableItems[settings.selectedIndex];
-    const renderListItem = (item, _idx, isSelected) => {
-        if (item.type === "category") {
-            const cat = item.category;
-            const catBg = cat === "recommended" ? "#2e7d32"
-                : cat === "agents" ? "#00838f"
-                    : cat === "models" ? "#4527a0"
-                        : cat === "workflow" ? "#1565c0"
-                            : cat === "terminal" ? "#4e342e"
-                                : cat === "performance" ? "#6a1b9a"
-                                    : "#e65100";
-            const star = cat === "recommended" ? "★ " : "";
-            if (isSelected) {
-                return (_jsx("text", { bg: "magenta", fg: "white", children: _jsxs("strong", { children: [" ", star, CATEGORY_LABELS[cat], " "] }) }));
-            }
-            return (_jsx("text", { bg: catBg, fg: "white", children: _jsxs("strong", { children: [" ", star, CATEGORY_LABELS[cat], " "] }) }));
-        }
-        if (item.type === "setting" && item.setting) {
-            const setting = item.setting;
-            const indicator = item.isDefault ? "○" : "●";
-            const indicatorColor = item.isDefault ? "gray" : "cyan";
-            const displayValue = formatValue(setting, item.effectiveValue);
-            const valueColor = item.isDefault ? "gray" : "green";
-            if (isSelected) {
-                return (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", indicator, " ", setting.name.padEnd(28), displayValue, " "] }));
-            }
-            return (_jsxs("text", { children: [_jsxs("span", { fg: indicatorColor, children: [" ", indicator, " "] }), _jsx("span", { children: setting.name.padEnd(28) }), _jsx("span", { fg: valueColor, children: displayValue })] }));
-        }
-        return _jsx("text", { fg: "gray", children: item.label });
-    };
+    const selectedItem = listItems[settings.selectedIndex];
     const renderDetail = () => {
         if (settings.values.status === "loading") {
             return _jsx("text", { fg: "gray", children: "Loading settings..." });
@@ -228,52 +117,7 @@ export function SettingsScreen() {
         if (settings.values.status === "error") {
             return _jsx("text", { fg: "red", children: "Failed to load settings" });
         }
-        if (!selectedItem) {
-            return _jsx("text", { fg: "gray", children: "Select a setting to see details" });
-        }
-        if (selectedItem.type === "category") {
-            const cat = selectedItem.category;
-            const catColor = cat === "recommended"
-                ? "green"
-                : cat === "agents" || cat === "models"
-                    ? "cyan"
-                    : cat === "workflow" || cat === "terminal"
-                        ? "blue"
-                        : cat === "performance"
-                            ? "magentaBright"
-                            : "yellow";
-            const descriptions = {
-                recommended: "Most impactful settings every user should know.",
-                agents: "Agent teams, task lists, and subagent configuration.",
-                models: "Model selection, extended thinking, and effort.",
-                workflow: "Git, plans, permissions, output style, and languages.",
-                terminal: "Shell, spinners, progress bars, voice, and UI behavior.",
-                performance: "Compaction, token limits, timeouts, and caching.",
-                advanced: "Telemetry, updates, debugging, and internal controls.",
-            };
-            return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: catColor, children: _jsx("strong", { children: CATEGORY_LABELS[cat] }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: descriptions[cat] }) })] }));
-        }
-        if (selectedItem.type === "setting" && selectedItem.setting) {
-            const setting = selectedItem.setting;
-            const scoped = selectedItem.scopedValues || {
-                user: undefined,
-                project: undefined,
-            };
-            const storageDesc = setting.storage.type === "env"
-                ? `env: ${setting.storage.key}`
-                : `settings.json: ${setting.storage.key}`;
-            const userValue = formatValue(setting, scoped.user);
-            const projectValue = formatValue(setting, scoped.project);
-            const userIsSet = scoped.user !== undefined && scoped.user !== "";
-            const projectIsSet = scoped.project !== undefined && scoped.project !== "";
-            const actionLabel = setting.type === "boolean"
-                ? "toggle"
-                : setting.type === "select"
-                    ? "choose"
-                    : "edit";
-            return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "cyan", children: _jsx("strong", { children: setting.name }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "white", children: setting.description }) }), _jsx("box", { marginTop: 1, children: _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Stored " }), _jsx("span", { fg: "#5c9aff", children: storageDesc })] }) }), setting.defaultValue !== undefined && (_jsx("box", { children: _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Default " }), _jsx("span", { children: setting.defaultValue })] }) })), _jsxs("box", { flexDirection: "column", marginTop: 1, children: [_jsx("text", { children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsx("text", { children: _jsx("strong", { children: "Scopes:" }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { children: [_jsxs("span", { bg: "cyan", fg: "black", children: [" ", "u", " "] }), _jsx("span", { fg: userIsSet ? "cyan" : "gray", children: userIsSet ? " ● " : " ○ " }), _jsx("span", { fg: "cyan", children: "User" }), _jsx("span", { children: " global" }), _jsxs("span", { fg: userIsSet ? "cyan" : "gray", children: [" ", userValue] })] }), _jsxs("text", { children: [_jsxs("span", { bg: "green", fg: "black", children: [" ", "p", " "] }), _jsx("span", { fg: projectIsSet ? "green" : "gray", children: projectIsSet ? " ● " : " ○ " }), _jsx("span", { fg: "green", children: "Project" }), _jsx("span", { children: " team" }), _jsxs("span", { fg: projectIsSet ? "green" : "gray", children: [" ", projectValue] })] })] })] }), _jsx("box", { marginTop: 1, children: _jsxs("text", { fg: "gray", children: ["Press u/p to ", actionLabel, " in scope"] }) })] }));
-        }
-        return null;
+        return renderSettingDetail(selectedItem);
     };
     const totalSet = settings.values.status === "success"
         ? Array.from(settings.values.data.values()).filter((v) => v.user !== undefined || v.project !== undefined).length
@@ -281,6 +125,6 @@ export function SettingsScreen() {
     const statusContent = (_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Settings: " }), _jsxs("span", { fg: "cyan", children: [totalSet, " configured"] }), _jsx("span", { fg: "gray", children: " \u2502 u:user p:project" })] }));
     return (_jsx(ScreenLayout, { title: "claudeup Settings", currentScreen: "settings", statusLine: statusContent, footerHints: "\u2191\u2193:nav \u2502 u:user scope \u2502 p:project scope \u2502 Enter:project", listPanel: settings.values.status !== "success" ? (_jsx("text", { fg: "gray", children: settings.values.status === "loading"
                 ? "Loading..."
-                : "Error loading settings" })) : (_jsx(ScrollableList, { items: selectableItems, selectedIndex: settings.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight })), detailPanel: renderDetail() }));
+                : "Error loading settings" })) : (_jsx(ScrollableList, { items: listItems, selectedIndex: settings.selectedIndex, renderItem: renderSettingRow, maxHeight: dimensions.listPanelHeight })), detailPanel: renderDetail() }));
 }
 export default SettingsScreen;

package/src/ui/screens/EnvVarsScreen.tsx

@@ -6,119 +6,16 @@ import { ScreenLayout } from "../components/layout/index.js";
 import { ScrollableList } from "../components/ScrollableList.js";
 import {
 	SETTINGS_CATALOG,
-	type SettingCategory,
-	type SettingDefinition,
 } from "../../data/settings-catalog.js";
 import {
 	readAllSettingsBothScopes,
 	writeSettingValue,
-	type ScopedSettingValues,
 } from "../../services/settings-manager.js";
-
-interface SettingsListItem {
-	id: string;
-	type: "category" | "setting";
-	label: string;
-	category?: SettingCategory;
-	setting?: SettingDefinition;
-	scopedValues?: ScopedSettingValues;
-	effectiveValue?: string;
-	isDefault: boolean;
-}
-
-const CATEGORY_LABELS: Record<SettingCategory, string> = {
-	recommended: "Recommended",
-	agents: "Agents & Teams",
-	models: "Models & Thinking",
-	workflow: "Workflow",
-	terminal: "Terminal & UI",
-	performance: "Performance",
-	advanced: "Advanced",
-};
-
-const CATEGORY_ORDER: SettingCategory[] = [
-	"recommended",
-	"agents",
-	"models",
-	"workflow",
-	"terminal",
-	"performance",
-	"advanced",
-];
-
-/** Get the effective value (project overrides user) */
-function getEffectiveValue(scoped: ScopedSettingValues): string | undefined {
-	return scoped.project !== undefined ? scoped.project : scoped.user;
-}
-
-function buildListItems(
-	values: Map<string, ScopedSettingValues>,
-): SettingsListItem[] {
-	const items: SettingsListItem[] = [];
-
-	for (const category of CATEGORY_ORDER) {
-		items.push({
-			id: `cat:${category}`,
-			type: "category",
-			label: CATEGORY_LABELS[category],
-			category,
-			isDefault: true,
-		});
-
-		const categorySettings = SETTINGS_CATALOG.filter(
-			(s) => s.category === category,
-		);
-		for (const setting of categorySettings) {
-			const scoped = values.get(setting.id) || {
-				user: undefined,
-				project: undefined,
-			};
-			const effective = getEffectiveValue(scoped);
-			items.push({
-				id: `setting:${setting.id}`,
-				type: "setting",
-				label: setting.name,
-				category,
-				setting,
-				scopedValues: scoped,
-				effectiveValue: effective,
-				isDefault: effective === undefined || effective === "",
-			});
-		}
-	}
-
-	return items;
-}
-
-function formatValue(
-	setting: SettingDefinition,
-	value: string | undefined,
-): string {
-	if (value === undefined || value === "") {
-		if (setting.defaultValue !== undefined) {
-			return setting.type === "boolean"
-				? setting.defaultValue === "true"
-					? "on"
-					: "off"
-				: setting.defaultValue || "default";
-		}
-		return "—";
-	}
-
-	if (setting.type === "boolean") {
-		return value === "true" || value === "1" ? "on" : "off";
-	}
-
-	if (setting.type === "select" && setting.options) {
-		const opt = setting.options.find((o) => o.value === value);
-		return opt ? opt.label : value;
-	}
-
-	if (value.length > 20) {
-		return value.slice(0, 20) + "...";
-	}
-	return value;
-}
+import {
+	buildSettingsBrowserItems,
+	type SettingsBrowserItem,
+} from "../adapters/settingsAdapter.js";
+import { renderSettingRow, renderSettingDetail } from "../renderers/settingsRenderers.js";
 
 export function SettingsScreen() {
 	const { state, dispatch } = useApp();
@@ -126,7 +23,6 @@ export function SettingsScreen() {
 	const modal = useModal();
 	const dimensions = useDimensions();
 
-	// Fetch data from both scopes
 	const fetchData = useCallback(async () => {
 		dispatch({ type: "SETTINGS_DATA_LOADING" });
 		try {
@@ -147,28 +43,18 @@ export function SettingsScreen() {
 		fetchData();
 	}, [fetchData]);
 
-	// Build flat list items
-	const listItems = useMemo((): SettingsListItem[] => {
+	const listItems = useMemo((): SettingsBrowserItem[] => {
 		if (settings.values.status !== "success") return [];
-		return buildListItems(settings.values.data);
+		return buildSettingsBrowserItems(settings.values.data);
 	}, [settings.values]);
 
-	const selectableItems = useMemo(
-		() =>
-			listItems.filter(
-				(item) => item.type === "category" || item.type === "setting",
-			),
-		[listItems],
-	);
-
-	// Change a setting in a specific scope
 	const handleScopeChange = async (scope: "user" | "project") => {
-		const item = selectableItems[settings.selectedIndex];
-		if (!item || item.type !== "setting" || !item.setting) return;
+		const item = listItems[settings.selectedIndex];
+		if (!item || item.kind !== "setting") return;
 
-		const setting = item.setting;
+		const { setting, scopedValues } = item;
 		const currentValue =
-			scope === "user" ? item.scopedValues?.user : item.scopedValues?.project;
+			scope === "user" ? scopedValues.user : scopedValues.project;
 
 		if (setting.type === "boolean") {
 			const currentBool =
@@ -187,11 +73,9 @@ export function SettingsScreen() {
 				label: o.label + (currentValue === o.value ? " (current)" : ""),
 				value: o.value,
 			}));
-			// Find current value index for pre-selection
 			const currentIndex = setting.options.findIndex(
 				(o) => o.value === currentValue,
 			);
-			// Add "clear" option to remove the setting
 			if (currentValue !== undefined) {
 				options.push({ label: "Clear (use default)", value: "__clear__" });
 			}
@@ -231,7 +115,6 @@ export function SettingsScreen() {
 		}
 	};
 
-	// Keyboard handling
 	useKeyboard((event) => {
 		if (state.isSearching || state.modal) return;
 
@@ -240,7 +123,7 @@ export function SettingsScreen() {
 			dispatch({ type: "SETTINGS_SELECT", index: newIndex });
 		} else if (event.name === "down" || event.name === "j") {
 			const newIndex = Math.min(
-				Math.max(0, selectableItems.length - 1),
+				Math.max(0, listItems.length - 1),
 				settings.selectedIndex + 1,
 			);
 			dispatch({ type: "SETTINGS_SELECT", index: newIndex });
@@ -249,214 +132,20 @@ export function SettingsScreen() {
 		} else if (event.name === "p") {
 			handleScopeChange("project");
 		} else if (event.name === "enter") {
-			// Enter defaults to project scope
 			handleScopeChange("project");
 		}
 	});
 
-	const selectedItem = selectableItems[settings.selectedIndex];
-
-	const renderListItem = (
-		item: SettingsListItem,
-		_idx: number,
-		isSelected: boolean,
-	) => {
-		if (item.type === "category") {
-			const cat = item.category!;
-			const catBg =
-				cat === "recommended" ? "#2e7d32"
-				: cat === "agents" ? "#00838f"
-				: cat === "models" ? "#4527a0"
-				: cat === "workflow" ? "#1565c0"
-				: cat === "terminal" ? "#4e342e"
-				: cat === "performance" ? "#6a1b9a"
-				: "#e65100";
-			const star = cat === "recommended" ? "★ " : "";
-
-			if (isSelected) {
-				return (
-					<text bg="magenta" fg="white">
-						<strong> {star}{CATEGORY_LABELS[cat]} </strong>
-					</text>
-				);
-			}
-			return (
-				<text bg={catBg} fg="white">
-					<strong> {star}{CATEGORY_LABELS[cat]} </strong>
-				</text>
-			);
-		}
-
-		if (item.type === "setting" && item.setting) {
-			const setting = item.setting;
-			const indicator = item.isDefault ? "○" : "●";
-			const indicatorColor = item.isDefault ? "gray" : "cyan";
-			const displayValue = formatValue(setting, item.effectiveValue);
-			const valueColor = item.isDefault ? "gray" : "green";
-
-			if (isSelected) {
-				return (
-					<text bg="magenta" fg="white">
-						{" "}
-						{indicator} {setting.name.padEnd(28)}
-						{displayValue}{" "}
-					</text>
-				);
-			}
-
-			return (
-				<text>
-					<span fg={indicatorColor}> {indicator} </span>
-					<span>{setting.name.padEnd(28)}</span>
-					<span fg={valueColor}>{displayValue}</span>
-				</text>
-			);
-		}
-
-		return <text fg="gray">{item.label}</text>;
-	};
+	const selectedItem = listItems[settings.selectedIndex];
 
 	const renderDetail = () => {
 		if (settings.values.status === "loading") {
 			return <text fg="gray">Loading settings...</text>;
 		}
-
 		if (settings.values.status === "error") {
 			return <text fg="red">Failed to load settings</text>;
 		}
-
-		if (!selectedItem) {
-			return <text fg="gray">Select a setting to see details</text>;
-		}
-
-		if (selectedItem.type === "category") {
-			const cat = selectedItem.category!;
-			const catColor =
-				cat === "recommended"
-					? "green"
-					: cat === "agents" || cat === "models"
-						? "cyan"
-						: cat === "workflow" || cat === "terminal"
-							? "blue"
-							: cat === "performance"
-								? "magentaBright"
-								: "yellow";
-			const descriptions: Record<SettingCategory, string> = {
-				recommended: "Most impactful settings every user should know.",
-				agents: "Agent teams, task lists, and subagent configuration.",
-				models: "Model selection, extended thinking, and effort.",
-				workflow: "Git, plans, permissions, output style, and languages.",
-				terminal: "Shell, spinners, progress bars, voice, and UI behavior.",
-				performance: "Compaction, token limits, timeouts, and caching.",
-				advanced: "Telemetry, updates, debugging, and internal controls.",
-			};
-			return (
-				<box flexDirection="column">
-					<text fg={catColor}>
-						<strong>{CATEGORY_LABELS[cat]}</strong>
-					</text>
-					<box marginTop={1}>
-						<text fg="gray">{descriptions[cat]}</text>
-					</box>
-				</box>
-			);
-		}
-
-		if (selectedItem.type === "setting" && selectedItem.setting) {
-			const setting = selectedItem.setting;
-			const scoped = selectedItem.scopedValues || {
-				user: undefined,
-				project: undefined,
-			};
-			const storageDesc =
-				setting.storage.type === "env"
-					? `env: ${setting.storage.key}`
-					: `settings.json: ${setting.storage.key}`;
-
-			const userValue = formatValue(setting, scoped.user);
-			const projectValue = formatValue(setting, scoped.project);
-			const userIsSet = scoped.user !== undefined && scoped.user !== "";
-			const projectIsSet =
-				scoped.project !== undefined && scoped.project !== "";
-
-			const actionLabel =
-				setting.type === "boolean"
-					? "toggle"
-					: setting.type === "select"
-						? "choose"
-						: "edit";
-
-			return (
-				<box flexDirection="column">
-					<text fg="cyan">
-						<strong>{setting.name}</strong>
-					</text>
-					<box marginTop={1}>
-						<text fg="white">{setting.description}</text>
-					</box>
-
-					{/* Storage info */}
-					<box marginTop={1}>
-						<text>
-							<span fg="gray">Stored </span>
-							<span fg="#5c9aff">{storageDesc}</span>
-						</text>
-					</box>
-					{setting.defaultValue !== undefined && (
-						<box>
-							<text>
-								<span fg="gray">Default </span>
-								<span>{setting.defaultValue}</span>
-							</text>
-						</box>
-					)}
-
-					{/* Scopes — same pattern as Plugins */}
-					<box flexDirection="column" marginTop={1}>
-						<text>────────────────────────</text>
-						<text>
-							<strong>Scopes:</strong>
-						</text>
-						<box marginTop={1} flexDirection="column">
-							<text>
-								<span bg="cyan" fg="black">
-									{" "}
-									u{" "}
-								</span>
-								<span fg={userIsSet ? "cyan" : "gray"}>
-									{userIsSet ? " ● " : " ○ "}
-								</span>
-								<span fg="cyan">User</span>
-								<span> global</span>
-								<span fg={userIsSet ? "cyan" : "gray"}> {userValue}</span>
-							</text>
-							<text>
-								<span bg="green" fg="black">
-									{" "}
-									p{" "}
-								</span>
-								<span fg={projectIsSet ? "green" : "gray"}>
-									{projectIsSet ? " ● " : " ○ "}
-								</span>
-								<span fg="green">Project</span>
-								<span> team</span>
-								<span fg={projectIsSet ? "green" : "gray"}>
-									{" "}
-									{projectValue}
-								</span>
-							</text>
-						</box>
-					</box>
-
-					{/* Action hint */}
-					<box marginTop={1}>
-						<text fg="gray">Press u/p to {actionLabel} in scope</text>
-					</box>
-				</box>
-			);
-		}
-
-		return null;
+		return renderSettingDetail(selectedItem);
 	};
 
 	const totalSet =
@@ -489,9 +178,9 @@ export function SettingsScreen() {
 					</text>
 				) : (
 					<ScrollableList
-						items={selectableItems}
+						items={listItems}
 						selectedIndex={settings.selectedIndex}
-						renderItem={renderListItem}
+						renderItem={renderSettingRow}
 						maxHeight={dimensions.listPanelHeight}
 					/>
 				)