claudeup 3.17.0 → 4.0.1

package/src/ui/screens/CliToolsScreen.tsx

@@ -6,21 +6,19 @@ import { useDimensions } from "../state/DimensionsContext.js";
 import { useKeyboard } from "../hooks/useKeyboard.js";
 import { ScreenLayout } from "../components/layout/index.js";
 import { ScrollableList } from "../components/ScrollableList.js";
-import { cliTools, type CliTool } from "../../data/cli-tools.js";
+import { cliTools } from "../../data/cli-tools.js";
+import {
+	renderCliToolRow,
+	renderCliToolDetail,
+	type CliToolStatus,
+} from "../renderers/cliToolRenderers.js";
 
 const execAsync = promisify(exec);
 
-interface ToolStatus {
-	tool: CliTool;
-	installed: boolean;
-	installedVersion?: string;
-	latestVersion?: string;
-	hasUpdate?: boolean;
-	checking: boolean;
-}
+// ─── Version helpers ───────────────────────────────────────────────────────────
 
 // Session-level cache
-let cachedToolStatuses: ToolStatus[] | null = null;
+let cachedToolStatuses: CliToolStatus[] | null = null;
 let cacheInitialized = false;
 
 function clearCliToolsCache(): void {
@@ -46,7 +44,9 @@ async function isInstalledViaHomebrew(toolName: string): Promise<boolean> {
 	}
 }
 
-async function getInstalledVersion(tool: CliTool): Promise<string | undefined> {
+async function getInstalledVersion(
+	tool: import("../../data/cli-tools.js").CliTool,
+): Promise<string | undefined> {
 	try {
 		const { stdout } = await execAsync(tool.checkCommand, { timeout: 5000 });
 		return parseVersion(stdout.trim());
@@ -55,9 +55,7 @@ async function getInstalledVersion(tool: CliTool): Promise<string | undefined> {
 	}
 }
 
-async function getLatestNpmVersion(
-	packageName: string,
-): Promise<string | undefined> {
+async function getLatestNpmVersion(packageName: string): Promise<string | undefined> {
 	try {
 		const { stdout } = await execAsync(
 			`npm view ${packageName} version 2>/dev/null`,
@@ -69,16 +67,11 @@ async function getLatestNpmVersion(
 	}
 }
 
-async function getLatestPipVersion(
-	packageName: string,
-): Promise<string | undefined> {
+async function getLatestPipVersion(packageName: string): Promise<string | undefined> {
 	try {
 		const { stdout } = await execAsync(
 			`pip index versions ${packageName} 2>/dev/null | head -1`,
-			{
-				timeout: 10000,
-				shell: "/bin/bash",
-			},
+			{ timeout: 10000, shell: "/bin/bash" },
 		);
 		const match = stdout.trim().match(/\(([^)]+)\)/);
 		return match ? match[1] : undefined;
@@ -87,18 +80,17 @@ async function getLatestPipVersion(
 	}
 }
 
-async function getLatestVersion(tool: CliTool): Promise<string | undefined> {
-	if (tool.packageManager === "npm") {
-		return getLatestNpmVersion(tool.packageName);
-	} else {
-		return getLatestPipVersion(tool.packageName);
-	}
+async function getLatestVersion(
+	tool: import("../../data/cli-tools.js").CliTool,
+): Promise<string | undefined> {
+	return tool.packageManager === "npm"
+		? getLatestNpmVersion(tool.packageName)
+		: getLatestPipVersion(tool.packageName);
 }
 
 function compareVersions(v1: string, v2: string): number {
 	const parts1 = v1.split(/[-.]/).map((p) => parseInt(p, 10) || 0);
 	const parts2 = v2.split(/[-.]/).map((p) => parseInt(p, 10) || 0);
-
 	for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
 		const p1 = parts1[i] || 0;
 		const p2 = parts2[i] || 0;
@@ -108,13 +100,15 @@ function compareVersions(v1: string, v2: string): number {
 	return 0;
 }
 
+// ─── Component ─────────────────────────────────────────────────────────────────
+
 export function CliToolsScreen() {
 	const { state, dispatch } = useApp();
 	const { cliTools: cliToolsState } = state;
 	const modal = useModal();
 	const dimensions = useDimensions();
 
-	const [toolStatuses, setToolStatuses] = useState<ToolStatus[]>(() => {
+	const [toolStatuses, setToolStatuses] = useState<CliToolStatus[]>(() => {
 		return (
 			cachedToolStatuses ||
 			cliTools.map((tool) => ({
@@ -129,12 +123,11 @@ export function CliToolsScreen() {
 	const statusesRef = useRef(toolStatuses);
 	statusesRef.current = toolStatuses;
 
-	// Update single tool status
 	const updateToolStatus = useCallback(
-		(index: number, updates: Partial<ToolStatus>) => {
+		(index: number, updates: Partial<CliToolStatus>) => {
 			setToolStatuses((prev) => {
 				const newStatuses = [...prev];
-				newStatuses[index] = { ...newStatuses[index], ...updates };
+				newStatuses[index] = { ...newStatuses[index]!, ...updates };
 				cachedToolStatuses = newStatuses;
 				return newStatuses;
 			});
@@ -142,11 +135,9 @@ export function CliToolsScreen() {
 		[],
 	);
 
-	// Fetch all version info
 	const fetchVersionInfo = useCallback(async () => {
-		// Check installed versions
 		for (let i = 0; i < cliTools.length; i++) {
-			const tool = cliTools[i];
+			const tool = cliTools[i]!;
 			getInstalledVersion(tool).then((version) => {
 				updateToolStatus(i, {
 					installedVersion: version,
@@ -155,7 +146,7 @@ export function CliToolsScreen() {
 			});
 
 			getLatestVersion(tool).then((latest) => {
-				const current = statusesRef.current[i];
+				const current = statusesRef.current[i]!;
 				updateToolStatus(i, {
 					latestVersion: latest,
 					checking: false,
@@ -176,7 +167,6 @@ export function CliToolsScreen() {
 		}
 	}, [fetchVersionInfo, toolStatuses]);
 
-	// Keyboard handling
 	useKeyboard((event) => {
 		if (state.isSearching || state.modal) return;
 
@@ -217,27 +207,19 @@ export function CliToolsScreen() {
 		if (!status) return;
 
 		const { tool, installed, hasUpdate } = status;
-		const action = !installed
-			? "Installing"
-			: hasUpdate
-				? "Updating"
-				: "Reinstalling";
+		const action = !installed ? "Installing" : hasUpdate ? "Updating" : "Reinstalling";
 
 		const viaHomebrew = installed
 			? await isInstalledViaHomebrew(tool.name)
 			: false;
 
-		let command: string;
-		if (!installed) {
-			command = tool.installCommand;
-		} else if (viaHomebrew) {
-			command = `brew upgrade ${tool.name}`;
-		} else {
-			command = tool.installCommand;
-		}
+		const command = !installed
+			? tool.installCommand
+			: viaHomebrew
+				? `brew upgrade ${tool.name}`
+				: tool.installCommand;
 
 		modal.loading(`${action} ${tool.displayName}...`);
-
 		try {
 			execSync(command, {
 				encoding: "utf-8",
@@ -259,11 +241,7 @@ export function CliToolsScreen() {
 	const handleUpdateAll = async () => {
 		const updatable = toolStatuses.filter((s) => s.hasUpdate);
 		if (updatable.length === 0) {
-			await modal.message(
-				"Up to Date",
-				"All tools are already up to date.",
-				"info",
-			);
+			await modal.message("Up to Date", "All tools are already up to date.", "info");
 			return;
 		}
 
@@ -274,7 +252,6 @@ export function CliToolsScreen() {
 			const command = viaHomebrew
 				? `brew upgrade ${status.tool.name}`
 				: status.tool.installCommand;
-
 			try {
 				execSync(command, {
 					encoding: "utf-8",
@@ -290,145 +267,8 @@ export function CliToolsScreen() {
 		handleRefresh();
 	};
 
-	// Get selected item
 	const selectedStatus = toolStatuses[cliToolsState.selectedIndex];
 
-	const renderDetail = () => {
-		if (!selectedStatus) {
-			return (
-				<box
-					flexDirection="column"
-					alignItems="center"
-					justifyContent="center"
-					flexGrow={1}
-				>
-					<text fg="gray">Select a tool to see details</text>
-				</box>
-			);
-		}
-
-		const {
-			tool,
-			installed,
-			installedVersion,
-			latestVersion,
-			hasUpdate,
-			checking,
-		} = selectedStatus;
-
-		return (
-			<box flexDirection="column">
-				<box marginBottom={1}>
-					<text fg="cyan">
-						<strong>⚙ {tool.displayName}</strong>
-					</text>
-					{hasUpdate && <text fg="yellow"> ⬆</text>}
-				</box>
-
-				<text fg="gray">{tool.description}</text>
-
-				<box marginTop={1} flexDirection="column">
-					<box>
-						<text fg="gray">Status </text>
-						{!installed ? (
-							<text fg="gray">○ Not installed</text>
-						) : checking ? (
-							<text fg="green">● Checking...</text>
-						) : hasUpdate ? (
-							<text fg="yellow">● Update available</text>
-						) : (
-							<text fg="green">● Up to date</text>
-						)}
-					</box>
-					{installedVersion && (
-						<box>
-							<text fg="gray">Installed </text>
-							<text fg="green">v{installedVersion}</text>
-						</box>
-					)}
-					{latestVersion && (
-						<box>
-							<text fg="gray">Latest </text>
-							<text fg="white">v{latestVersion}</text>
-						</box>
-					)}
-					<box>
-						<text fg="gray">Website </text>
-						<text fg="#5c9aff">{tool.website}</text>
-					</box>
-				</box>
-
-				<box marginTop={2}>
-					{!installed ? (
-						<box>
-							<text bg="green" fg="black">
-								{" "}
-								Enter{" "}
-							</text>
-							<text fg="gray"> Install</text>
-						</box>
-					) : hasUpdate ? (
-						<box>
-							<text bg="yellow" fg="black">
-								{" "}
-								Enter{" "}
-							</text>
-							<text fg="gray"> Update to v{latestVersion}</text>
-						</box>
-					) : (
-						<box>
-							<text bg="gray" fg="white">
-								{" "}
-								Enter{" "}
-							</text>
-							<text fg="gray"> Reinstall</text>
-						</box>
-					)}
-				</box>
-			</box>
-		);
-	};
-
-	const renderListItem = (
-		status: ToolStatus,
-		_idx: number,
-		isSelected: boolean,
-	) => {
-		const { tool, installed, installedVersion, hasUpdate, checking } = status;
-
-		let icon: string;
-		let iconColor: string;
-
-		if (!installed) {
-			icon = "○";
-			iconColor = "gray";
-		} else if (hasUpdate) {
-			icon = "⬆";
-			iconColor = "yellow";
-		} else {
-			icon = "●";
-			iconColor = "green";
-		}
-
-		const versionText = installedVersion ? `v${installedVersion}` : "";
-
-		return isSelected ? (
-			<text bg="magenta" fg="white">
-				{" "}
-				{icon} {tool.displayName} {versionText}
-				{checking ? "..." : ""}{" "}
-			</text>
-		) : (
-			<text>
-				<span fg={iconColor}>{icon}</span>
-				<span fg="white"> {tool.displayName}</span>
-				{versionText && <span fg="green"> {versionText}</span>}
-				{checking && <span fg="gray">...</span>}
-			</text>
-		);
-	};
-
-	// Calculate stats for status line
 	const installedCount = toolStatuses.filter((s) => s.installed).length;
 	const updateCount = toolStatuses.filter((s) => s.hasUpdate).length;
 	const statusContent = (
@@ -456,11 +296,11 @@ export function CliToolsScreen() {
 				<ScrollableList
 					items={toolStatuses}
 					selectedIndex={cliToolsState.selectedIndex}
-					renderItem={renderListItem}
+					renderItem={renderCliToolRow}
 					maxHeight={dimensions.listPanelHeight}
 				/>
 			}
-			detailPanel={renderDetail()}
+			detailPanel={renderCliToolDetail(selectedStatus)}
 		/>
 	);
 }

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;