claudeup 3.7.1 → 3.8.0

package/src/ui/components/modals/ModalContainer.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useApp } from "../../state/AppContext.js";
 import { useKeyboard } from "../../hooks/useKeyboard.js";
 import { ConfirmModal } from "./ConfirmModal.js";
@@ -9,23 +9,54 @@ import { LoadingModal } from "./LoadingModal.js";
 
 /**
  * Container that renders the active modal as an overlay
- * Handles global Escape key to close modals
+ * Handles ALL keyboard events when a modal is open to avoid
+ * conflicts with multiple useKeyboard hooks in child components
  */
 export function ModalContainer() {
 	const { state } = useApp();
 	const { modal } = state;
 
-	// Handle Escape key to close modal (except loading)
+	// Track select modal index here (lifted from SelectModal)
+	const [selectIndex, setSelectIndex] = useState(0);
+
+	// Reset select index when modal changes
+	const modalRef = React.useRef(modal);
+	if (modal !== modalRef.current) {
+		modalRef.current = modal;
+		if (modal?.type === "select") {
+			setSelectIndex(modal.defaultIndex ?? 0);
+		}
+	}
+
+	// Handle ALL keyboard events for modals
 	useKeyboard((key) => {
-		if (key.name === "escape" && modal && modal.type !== "loading") {
-			// Loading modal cannot be dismissed with Escape
-			if (modal.type === "confirm") {
-				modal.onCancel();
-			} else if (modal.type === "input") {
-				modal.onCancel();
-			} else if (modal.type === "select") {
-				modal.onCancel();
-			} else if (modal.type === "message") {
+		if (!modal) return;
+		if (modal.type === "loading") return;
+
+		// Escape — close any modal
+		if (key.name === "escape" || key.name === "q") {
+			if (modal.type === "confirm") modal.onCancel();
+			else if (modal.type === "input") modal.onCancel();
+			else if (modal.type === "select") modal.onCancel();
+			else if (modal.type === "message") modal.onDismiss();
+			return;
+		}
+
+		// Select modal — handle navigation and selection
+		if (modal.type === "select") {
+			if (key.name === "return" || key.name === "enter") {
+				modal.onSelect(modal.options[selectIndex].value);
+			} else if (key.name === "up" || key.name === "k") {
+				setSelectIndex((prev) => Math.max(0, prev - 1));
+			} else if (key.name === "down" || key.name === "j") {
+				setSelectIndex((prev) => Math.min(modal.options.length - 1, prev + 1));
+			}
+			return;
+		}
+
+		// Message modal — Enter to dismiss
+		if (modal.type === "message") {
+			if (key.name === "return" || key.name === "enter") {
 				modal.onDismiss();
 			}
 		}
@@ -64,6 +95,7 @@ export function ModalContainer() {
 						title={modal.title}
 						message={modal.message}
 						options={modal.options}
+						defaultIndex={selectIndex}
 						onSelect={modal.onSelect}
 						onCancel={modal.onCancel}
 					/>

package/src/ui/components/modals/SelectModal.js

@@ -1,22 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-import { useState } from "react";
-import { useKeyboard } from "../../hooks/useKeyboard.js";
-export function SelectModal({ title, message, options, onSelect, onCancel, }) {
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    useKeyboard((key) => {
-        if (key.name === "enter") {
-            onSelect(options[selectedIndex].value);
-        }
-        else if (key.name === "escape" || key.name === "q") {
-            onCancel();
-        }
-        else if (key.name === "up" || key.name === "k") {
-            setSelectedIndex((prev) => Math.max(0, prev - 1));
-        }
-        else if (key.name === "down" || key.name === "j") {
-            setSelectedIndex((prev) => Math.min(options.length - 1, prev + 1));
-        }
-    });
+export function SelectModal({ title, message, options, defaultIndex, onSelect: _onSelect, onCancel: _onCancel, }) {
+    // Keyboard handling is done by ModalContainer
+    // defaultIndex is the live selectedIndex from ModalContainer state
+    const selectedIndex = defaultIndex ?? 0;
     return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "cyan", backgroundColor: "#1a1a2e", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, width: 50, children: [_jsx("text", { children: _jsx("strong", { children: title }) }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { children: message }) }), _jsx("box", { flexDirection: "column", children: options.map((option, idx) => {
                     const isSelected = idx === selectedIndex;
                     const label = isSelected ? `> ${option.label}` : `  ${option.label}`;

package/src/ui/components/modals/SelectModal.tsx

@@ -1,5 +1,4 @@
-import React, { useState } from "react";
-import { useKeyboard } from "../../hooks/useKeyboard.js";
+import React from "react";
 import type { SelectOption } from "../../state/types.js";
 
 interface SelectModalProps {
@@ -9,6 +8,8 @@ interface SelectModalProps {
 	message: string;
 	/** Select options */
 	options: SelectOption[];
+	/** Currently selected index (controlled by ModalContainer) */
+	defaultIndex?: number;
 	/** Callback when option selected */
 	onSelect: (value: string) => void;
 	/** Callback when cancelled */
@@ -19,22 +20,13 @@ export function SelectModal({
 	title,
 	message,
 	options,
-	onSelect,
-	onCancel,
+	defaultIndex,
+	onSelect: _onSelect,
+	onCancel: _onCancel,
 }: SelectModalProps) {
-	const [selectedIndex, setSelectedIndex] = useState(0);
-
-	useKeyboard((key) => {
-		if (key.name === "enter") {
-			onSelect(options[selectedIndex].value);
-		} else if (key.name === "escape" || key.name === "q") {
-			onCancel();
-		} else if (key.name === "up" || key.name === "k") {
-			setSelectedIndex((prev) => Math.max(0, prev - 1));
-		} else if (key.name === "down" || key.name === "j") {
-			setSelectedIndex((prev) => Math.min(options.length - 1, prev + 1));
-		}
-	});
+	// Keyboard handling is done by ModalContainer
+	// defaultIndex is the live selectedIndex from ModalContainer state
+	const selectedIndex = defaultIndex ?? 0;
 
 	return (
 		<box
@@ -62,10 +54,7 @@ export function SelectModal({
 					const isSelected = idx === selectedIndex;
 					const label = isSelected ? `> ${option.label}` : `  ${option.label}`;
 					return (
-						<text
-							key={option.value}
-							fg={isSelected ? "cyan" : "#666666"}
-						>
+						<text key={option.value} fg={isSelected ? "cyan" : "#666666"}>
 							{isSelected && <strong>{label}</strong>}
 							{!isSelected && label}
 						</text>

package/src/ui/screens/CliToolsScreen.js

@@ -244,7 +244,7 @@ export function CliToolsScreen() {
             return (_jsx("box", { flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsx("text", { fg: "gray", children: "Select a tool to see details" }) }));
         }
         const { tool, installed, installedVersion, latestVersion, hasUpdate, checking, } = selectedStatus;
-        return (_jsxs("box", { flexDirection: "column", children: [_jsxs("box", { marginBottom: 1, children: [_jsx("text", { fg: "cyan", children: _jsxs("strong", { children: ["\u2699 ", tool.displayName] }) }), hasUpdate && _jsx("text", { fg: "yellow", children: " \u2B06" })] }), _jsx("text", { fg: "gray", children: tool.description }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("box", { children: [_jsx("text", { fg: "gray", children: "Status " }), !installed ? (_jsx("text", { fg: "gray", children: "\u25CB Not installed" })) : checking ? (_jsx("text", { fg: "green", children: "\u25CF Checking..." })) : hasUpdate ? (_jsx("text", { fg: "yellow", children: "\u25CF Update available" })) : (_jsx("text", { fg: "green", children: "\u25CF Up to date" }))] }), installedVersion && (_jsxs("box", { children: [_jsx("text", { fg: "gray", children: "Installed " }), _jsxs("text", { fg: "green", children: ["v", installedVersion] })] })), latestVersion && (_jsxs("box", { children: [_jsx("text", { fg: "gray", children: "Latest " }), _jsxs("text", { fg: "white", children: ["v", latestVersion] })] })), _jsxs("box", { children: [_jsx("text", { fg: "gray", children: "Website " }), _jsx("text", { fg: "blue", children: tool.website })] })] }), _jsx("box", { marginTop: 2, children: !installed ? (_jsxs("box", { children: [_jsxs("text", { bg: "green", fg: "black", children: [" ", "Enter", " "] }), _jsx("text", { fg: "gray", children: " Install" })] })) : hasUpdate ? (_jsxs("box", { children: [_jsxs("text", { bg: "yellow", fg: "black", children: [" ", "Enter", " "] }), _jsxs("text", { fg: "gray", children: [" Update to v", latestVersion] })] })) : (_jsxs("box", { children: [_jsxs("text", { bg: "gray", fg: "white", children: [" ", "Enter", " "] }), _jsx("text", { fg: "gray", children: " Reinstall" })] })) })] }));
+        return (_jsxs("box", { flexDirection: "column", children: [_jsxs("box", { marginBottom: 1, children: [_jsx("text", { fg: "cyan", children: _jsxs("strong", { children: ["\u2699 ", tool.displayName] }) }), hasUpdate && _jsx("text", { fg: "yellow", children: " \u2B06" })] }), _jsx("text", { fg: "gray", children: tool.description }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("box", { children: [_jsx("text", { fg: "gray", children: "Status " }), !installed ? (_jsx("text", { fg: "gray", children: "\u25CB Not installed" })) : checking ? (_jsx("text", { fg: "green", children: "\u25CF Checking..." })) : hasUpdate ? (_jsx("text", { fg: "yellow", children: "\u25CF Update available" })) : (_jsx("text", { fg: "green", children: "\u25CF Up to date" }))] }), installedVersion && (_jsxs("box", { children: [_jsx("text", { fg: "gray", children: "Installed " }), _jsxs("text", { fg: "green", children: ["v", installedVersion] })] })), latestVersion && (_jsxs("box", { children: [_jsx("text", { fg: "gray", children: "Latest " }), _jsxs("text", { fg: "white", children: ["v", latestVersion] })] })), _jsxs("box", { children: [_jsx("text", { fg: "gray", children: "Website " }), _jsx("text", { fg: "#5c9aff", children: tool.website })] })] }), _jsx("box", { marginTop: 2, children: !installed ? (_jsxs("box", { children: [_jsxs("text", { bg: "green", fg: "black", children: [" ", "Enter", " "] }), _jsx("text", { fg: "gray", children: " Install" })] })) : hasUpdate ? (_jsxs("box", { children: [_jsxs("text", { bg: "yellow", fg: "black", children: [" ", "Enter", " "] }), _jsxs("text", { fg: "gray", children: [" Update to v", latestVersion] })] })) : (_jsxs("box", { children: [_jsxs("text", { bg: "gray", fg: "white", children: [" ", "Enter", " "] }), _jsx("text", { fg: "gray", children: " Reinstall" })] })) })] }));
     };
     const renderListItem = (status, _idx, isSelected) => {
         const { tool, installed, installedVersion, hasUpdate, checking } = status;
@@ -268,7 +268,7 @@ export function CliToolsScreen() {
     // Calculate stats for status line
     const installedCount = toolStatuses.filter((s) => s.installed).length;
     const updateCount = toolStatuses.filter((s) => s.hasUpdate).length;
-    const statusContent = (_jsxs(_Fragment, { children: [_jsx("text", { fg: "gray", children: "Installed: " }), _jsxs("text", { fg: "cyan", children: [installedCount, "/", toolStatuses.length] }), updateCount > 0 && (_jsxs(_Fragment, { children: [_jsx("text", { fg: "gray", children: " \u2502 Updates: " }), _jsx("text", { fg: "yellow", children: updateCount })] }))] }));
+    const statusContent = (_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Installed: " }), _jsxs("span", { fg: "cyan", children: [installedCount, "/", toolStatuses.length] }), updateCount > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { fg: "gray", children: " \u2502 Updates: " }), _jsx("span", { fg: "yellow", children: updateCount })] }))] }));
     return (_jsx(ScreenLayout, { title: "claudeup CLI Tools", currentScreen: "cli-tools", statusLine: statusContent, footerHints: "\u2191\u2193:nav \u2502 Enter:install \u2502 a:update all \u2502 r:refresh", listPanel: _jsx(ScrollableList, { items: toolStatuses, selectedIndex: cliToolsState.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight }), detailPanel: renderDetail() }));
 }
 export default CliToolsScreen;

package/src/ui/screens/CliToolsScreen.tsx

@@ -354,7 +354,7 @@ export function CliToolsScreen() {
 					)}
 					<box>
 						<text fg="gray">Website </text>
-						<text fg="blue">{tool.website}</text>
+						<text fg="#5c9aff">{tool.website}</text>
 					</box>
 				</box>
 
@@ -432,18 +432,18 @@ export function CliToolsScreen() {
 	const installedCount = toolStatuses.filter((s) => s.installed).length;
 	const updateCount = toolStatuses.filter((s) => s.hasUpdate).length;
 	const statusContent = (
-		<>
-			<text fg="gray">Installed: </text>
-			<text fg="cyan">
+		<text>
+			<span fg="gray">Installed: </span>
+			<span fg="cyan">
 				{installedCount}/{toolStatuses.length}
-			</text>
+			</span>
 			{updateCount > 0 && (
 				<>
-					<text fg="gray"> │ Updates: </text>
-					<text fg="yellow">{updateCount}</text>
+					<span fg="gray"> │ Updates: </span>
+					<span fg="yellow">{updateCount}</span>
 				</>
 			)}
-		</>
+		</text>
 	);
 
 	return (

package/src/ui/screens/EnvVarsScreen.js

@@ -1,154 +1,286 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
-import { useEffect, useCallback, useState } from "react";
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { useEffect, useCallback, useMemo } from "react";
 import { useApp, useModal } from "../state/AppContext.js";
 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 { getMcpEnvVars, setMcpEnvVar, removeMcpEnvVar, } from "../../services/claude-settings.js";
-export function EnvVarsScreen() {
+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;
+}
+export function SettingsScreen() {
     const { state, dispatch } = useApp();
-    const { envVars } = state;
+    const { settings } = state;
     const modal = useModal();
     const dimensions = useDimensions();
-    const [envVarList, setEnvVarList] = useState([]);
-    const [isLoading, setIsLoading] = useState(true);
-    // Fetch data
+    // Fetch data from both scopes
     const fetchData = useCallback(async () => {
-        setIsLoading(true);
+        dispatch({ type: "SETTINGS_DATA_LOADING" });
         try {
-            const vars = await getMcpEnvVars(state.projectPath);
-            const list = Object.entries(vars).map(([name, value]) => ({
-                name,
-                value,
-            }));
-            setEnvVarList(list);
+            const values = await readAllSettingsBothScopes(SETTINGS_CATALOG, state.projectPath);
+            dispatch({ type: "SETTINGS_DATA_SUCCESS", values });
         }
         catch (error) {
-            setEnvVarList([]);
+            dispatch({
+                type: "SETTINGS_DATA_ERROR",
+                error: error instanceof Error ? error : new Error(String(error)),
+            });
         }
-        setIsLoading(false);
-    }, [state.projectPath]);
+    }, [dispatch, state.projectPath]);
     useEffect(() => {
         fetchData();
     }, [fetchData]);
+    // Build flat list items
+    const listItems = useMemo(() => {
+        if (settings.values.status !== "success")
+            return [];
+        return buildListItems(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)
+            return;
+        const setting = item.setting;
+        const currentValue = scope === "user" ? item.scopedValues?.user : item.scopedValues?.project;
+        if (setting.type === "boolean") {
+            const currentBool = currentValue === "true" ||
+                currentValue === "1" ||
+                (currentValue === undefined && setting.defaultValue === "true");
+            const newValue = currentBool ? "false" : "true";
+            try {
+                await writeSettingValue(setting, newValue, scope, state.projectPath);
+                await fetchData();
+            }
+            catch (error) {
+                await modal.message("Error", `Failed to update: ${error}`, "error");
+            }
+        }
+        else if (setting.type === "select" && setting.options) {
+            const options = setting.options.map((o) => ({
+                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__" });
+            }
+            const selected = await modal.select(`${setting.name} — ${scope}`, setting.description, options, currentIndex >= 0 ? currentIndex : undefined);
+            if (selected === null)
+                return;
+            try {
+                const val = selected === "__clear__" ? undefined : selected || undefined;
+                await writeSettingValue(setting, val, scope, state.projectPath);
+                await fetchData();
+            }
+            catch (error) {
+                await modal.message("Error", `Failed to update: ${error}`, "error");
+            }
+        }
+        else {
+            const newValue = await modal.input(`${setting.name} — ${scope}`, setting.description, currentValue || "");
+            if (newValue === null)
+                return;
+            try {
+                await writeSettingValue(setting, newValue || undefined, scope, state.projectPath);
+                await fetchData();
+            }
+            catch (error) {
+                await modal.message("Error", `Failed to update: ${error}`, "error");
+            }
+        }
+    };
     // Keyboard handling
     useKeyboard((event) => {
         if (state.isSearching || state.modal)
             return;
         if (event.name === "up" || event.name === "k") {
-            const newIndex = Math.max(0, envVars.selectedIndex - 1);
-            dispatch({ type: "ENVVARS_SELECT", index: newIndex });
+            const newIndex = Math.max(0, settings.selectedIndex - 1);
+            dispatch({ type: "SETTINGS_SELECT", index: newIndex });
         }
         else if (event.name === "down" || event.name === "j") {
-            const newIndex = Math.min(Math.max(0, envVarList.length - 1), envVars.selectedIndex + 1);
-            dispatch({ type: "ENVVARS_SELECT", index: newIndex });
+            const newIndex = Math.min(Math.max(0, selectableItems.length - 1), settings.selectedIndex + 1);
+            dispatch({ type: "SETTINGS_SELECT", index: newIndex });
         }
-        else if (event.name === "a") {
-            handleAdd();
+        else if (event.name === "u") {
+            handleScopeChange("user");
         }
-        else if (event.name === "e" || event.name === "enter") {
-            handleEdit();
+        else if (event.name === "p") {
+            handleScopeChange("project");
         }
-        else if (event.name === "d") {
-            handleDelete();
+        else if (event.name === "enter") {
+            // Enter defaults to project scope
+            handleScopeChange("project");
         }
     });
-    const handleAdd = async () => {
-        const varName = await modal.input("Add Variable", "Variable name:");
-        if (varName === null || !varName.trim())
-            return;
-        const cleanName = varName
-            .trim()
-            .toUpperCase()
-            .replace(/[^A-Z0-9_]/g, "_");
-        // Check if already exists
-        const existing = envVarList.find((v) => v.name === cleanName);
-        if (existing) {
-            const overwrite = await modal.confirm(`${cleanName} exists`, "Overwrite existing value?");
-            if (!overwrite)
-                return;
-        }
-        const value = await modal.input(`Set ${cleanName}`, "Value:");
-        if (value === null)
-            return;
-        modal.loading(`Adding ${cleanName}...`);
-        try {
-            await setMcpEnvVar(cleanName, value, state.projectPath);
-            modal.hideModal();
-            await modal.message("Added", `${cleanName} added.\nRestart Claude Code to apply.`, "success");
-            fetchData();
-        }
-        catch (error) {
-            modal.hideModal();
-            await modal.message("Error", `Failed to add: ${error}`, "error");
-        }
-    };
-    const handleEdit = async () => {
-        if (envVarList.length === 0)
-            return;
-        const envVar = envVarList[envVars.selectedIndex];
-        if (!envVar)
-            return;
-        const newValue = await modal.input(`Edit ${envVar.name}`, "New value:", envVar.value);
-        if (newValue === null)
-            return;
-        modal.loading(`Updating ${envVar.name}...`);
-        try {
-            await setMcpEnvVar(envVar.name, newValue, state.projectPath);
-            modal.hideModal();
-            await modal.message("Updated", `${envVar.name} updated.\nRestart Claude Code to apply.`, "success");
-            fetchData();
-        }
-        catch (error) {
-            modal.hideModal();
-            await modal.message("Error", `Failed to update: ${error}`, "error");
-        }
-    };
-    const handleDelete = async () => {
-        if (envVarList.length === 0)
-            return;
-        const envVar = envVarList[envVars.selectedIndex];
-        if (!envVar)
-            return;
-        const confirmed = await modal.confirm(`Delete ${envVar.name}?`, "This will remove the variable from configuration.");
-        if (confirmed) {
-            modal.loading(`Deleting ${envVar.name}...`);
-            try {
-                await removeMcpEnvVar(envVar.name, state.projectPath);
-                modal.hideModal();
-                await modal.message("Deleted", `${envVar.name} removed.`, "success");
-                fetchData();
+    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], " "] }) }));
             }
-            catch (error) {
-                modal.hideModal();
-                await modal.message("Error", `Failed to delete: ${error}`, "error");
+            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 });
     };
-    // Get selected item
-    const selectedVar = envVarList[envVars.selectedIndex];
     const renderDetail = () => {
-        if (isLoading) {
-            return _jsx("text", { fg: "gray", children: "Loading environment variables..." });
+        if (settings.values.status === "loading") {
+            return _jsx("text", { fg: "gray", children: "Loading settings..." });
         }
-        if (envVarList.length === 0) {
-            return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "gray", children: "No environment variables configured." }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "green", children: "Press 'a' to add a new variable" }) })] }));
+        if (settings.values.status === "error") {
+            return _jsx("text", { fg: "red", children: "Failed to load settings" });
         }
-        if (!selectedVar) {
-            return _jsx("text", { fg: "gray", children: "Select a variable to see details" });
+        if (!selectedItem) {
+            return _jsx("text", { fg: "gray", children: "Select a setting to see details" });
         }
-        return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "cyan", children: _jsx("strong", { children: selectedVar.name }) }), _jsxs("box", { marginTop: 1, children: [_jsx("text", { fg: "gray", children: "Value: " }), _jsx("text", { children: selectedVar.value.length > 50
-                                ? selectedVar.value.slice(0, 50) + "..."
-                                : selectedVar.value })] }), _jsxs("box", { marginTop: 2, flexDirection: "column", children: [_jsxs("box", { children: [_jsxs("text", { bg: "magenta", fg: "white", children: [" ", "Enter", " "] }), _jsx("text", { fg: "gray", children: " Edit value" })] }), _jsxs("box", { marginTop: 1, children: [_jsxs("text", { bg: "red", fg: "white", children: [" ", "d", " "] }), _jsx("text", { fg: "gray", children: " Delete variable" })] })] })] }));
-    };
-    const renderListItem = (envVar, _idx, isSelected) => {
-        const masked = envVar.value.length > 20
-            ? envVar.value.slice(0, 20) + "..."
-            : envVar.value;
-        return isSelected ? (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", envVar.name, " = \"", masked, "\"", " "] })) : (_jsxs("text", { children: [_jsx("span", { fg: "cyan", children: envVar.name }), _jsxs("span", { fg: "gray", children: [" = \"", masked, "\""] })] }));
+        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;
     };
-    const statusContent = (_jsxs(_Fragment, { children: [_jsx("text", { fg: "gray", children: "Variables: " }), _jsx("text", { fg: "cyan", children: envVarList.length }), _jsx("text", { fg: "gray", children: " \u2502 Location: " }), _jsx("text", { fg: "green", children: ".claude/settings.local.json" })] }));
-    return (_jsx(ScreenLayout, { title: "claudeup Environment Variables", currentScreen: "env-vars", statusLine: statusContent, footerHints: "\u2191\u2193:nav \u2502 Enter/e:edit \u2502 a:add \u2502 d:delete", listPanel: envVarList.length === 0 ? (_jsx("text", { fg: "gray", children: "No environment variables configured" })) : (_jsx(ScrollableList, { items: envVarList, selectedIndex: envVars.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight })), detailPanel: renderDetail() }));
+    const totalSet = settings.values.status === "success"
+        ? Array.from(settings.values.data.values()).filter((v) => v.user !== undefined || v.project !== undefined).length
+        : 0;
+    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() }));
 }
-export default EnvVarsScreen;
+export default SettingsScreen;