claudeup 4.6.0 → 4.7.0

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

@@ -1,5 +1,4 @@
-import React, { useState } from "react";
-import { useKeyboard } from "../../hooks/useKeyboard.js";
+import React from "react";
 
 interface InputModalProps {
 	/** Modal title */
@@ -19,43 +18,41 @@ export function InputModal({
 	label,
 	defaultValue = "",
 	onSubmit,
-	onCancel,
 }: InputModalProps) {
-	const [value, setValue] = useState(defaultValue);
-
-	useKeyboard((key) => {
-		if (key.name === "enter") {
-			onSubmit(value);
-		} else if (key.name === "escape") {
-			onCancel();
-		}
-	});
-
 	return (
 		<box
 			flexDirection="column"
 			border
 			borderStyle="rounded"
-			borderColor="cyan"
-			backgroundColor="#1a1a2e"
-			paddingLeft={2}
-			paddingRight={2}
+			borderColor="#525252"
+			backgroundColor="#1C1C1E"
+			paddingLeft={3}
+			paddingRight={3}
 			paddingTop={1}
 			paddingBottom={1}
 			width={60}
 		>
-			<text>
-				<strong>{title}</strong>
-			</text>
+			<box marginBottom={1}>
+				<text fg="#EDEDED">
+					<strong>{title}</strong>
+				</text>
+			</box>
 
-			<box marginTop={1} marginBottom={1}>
-				<text>{label}</text>
+			<box marginBottom={1}>
+				<text fg="#A1A1AA">{label}</text>
 			</box>
 
-			<input value={value} onChange={setValue} focused width={54} />
+			<box border borderStyle="rounded" borderColor="#3F3F46" paddingLeft={1} paddingRight={1} width={54}>
+				<input
+					value={defaultValue}
+					onSubmit={onSubmit as any}
+					focused
+					width={50}
+				/>
+			</box>
 
 			<box marginTop={1}>
-				<text fg="#666666">Enter to confirm • Escape to cancel</text>
+				<text fg="#71717A">↵ to confirm • Esc to cancel</text>
 			</box>
 		</box>
 	);

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

@@ -9,6 +9,6 @@ export function LoadingModal({ message }) {
         }, 80);
         return () => clearInterval(interval);
     }, []);
-    return (_jsxs("box", { flexDirection: "row", border: true, borderStyle: "rounded", borderColor: "cyan", backgroundColor: "#1a1a2e", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: [_jsx("text", { fg: "cyan", children: SPINNER_FRAMES[frame] }), _jsxs("text", { children: [" ", message] })] }));
+    return (_jsxs("box", { flexDirection: "row", border: true, borderStyle: "rounded", borderColor: "#525252", backgroundColor: "#1C1C1E", paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, children: [_jsx("text", { fg: "#A1A1AA", children: SPINNER_FRAMES[frame] }), _jsxs("text", { fg: "#EDEDED", children: [" ", message] })] }));
 }
 export default LoadingModal;

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

@@ -23,15 +23,15 @@ export function LoadingModal({ message }: LoadingModalProps) {
 			flexDirection="row"
 			border
 			borderStyle="rounded"
-			borderColor="cyan"
-			backgroundColor="#1a1a2e"
-			paddingLeft={2}
-			paddingRight={2}
+			borderColor="#525252"
+			backgroundColor="#1C1C1E"
+			paddingLeft={3}
+			paddingRight={3}
 			paddingTop={1}
 			paddingBottom={1}
 		>
-			<text fg="cyan">{SPINNER_FRAMES[frame]}</text>
-			<text> {message}</text>
+			<text fg="#A1A1AA">{SPINNER_FRAMES[frame]}</text>
+			<text fg="#EDEDED"> {message}</text>
 		</box>
 	);
 }

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

@@ -1,9 +1,9 @@
 import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
 import { useKeyboard } from "../../hooks/useKeyboard.js";
 const variantConfig = {
-    info: { icon: "ℹ", color: "cyan" },
-    success: { icon: "✓", color: "green" },
-    error: { icon: "✗", color: "red" },
+    info: { icon: "ℹ", color: "#60A5FA" },
+    success: { icon: "✓", color: "#4ADE80" },
+    error: { icon: "✗", color: "#F87171" },
 };
 export function MessageModal({ title, message, variant, onDismiss, }) {
     const config = variantConfig[variant];
@@ -11,6 +11,6 @@ export function MessageModal({ title, message, variant, onDismiss, }) {
         // Any key dismisses
         onDismiss();
     });
-    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: config.color, backgroundColor: "#1a1a2e", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, width: 60, children: [_jsxs("box", { children: [_jsxs("text", { fg: config.color, children: [config.icon, " "] }), _jsx("text", { children: _jsx("strong", { children: title }) })] }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { children: message }) }), _jsx("box", { children: _jsx("text", { fg: "#666666", children: "Press any key to continue" }) })] }));
+    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "#525252", backgroundColor: "#1C1C1E", paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, width: 60, children: [_jsxs("box", { marginBottom: 1, children: [_jsxs("text", { fg: config.color, children: [config.icon, " "] }), _jsx("text", { fg: "#EDEDED", children: _jsx("strong", { children: title }) })] }), _jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#A1A1AA", children: message }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "#71717A", children: "Press any key to continue" }) })] }));
 }
 export default MessageModal;

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

@@ -13,9 +13,9 @@ interface MessageModalProps {
 }
 
 const variantConfig = {
-	info: { icon: "ℹ", color: "cyan" },
-	success: { icon: "✓", color: "green" },
-	error: { icon: "✗", color: "red" },
+	info: { icon: "ℹ", color: "#60A5FA" },
+	success: { icon: "✓", color: "#4ADE80" },
+	error: { icon: "✗", color: "#F87171" },
 } as const;
 
 export function MessageModal({
@@ -36,27 +36,27 @@ export function MessageModal({
 			flexDirection="column"
 			border
 			borderStyle="rounded"
-			borderColor={config.color}
-			backgroundColor="#1a1a2e"
-			paddingLeft={2}
-			paddingRight={2}
+			borderColor="#525252"
+			backgroundColor="#1C1C1E"
+			paddingLeft={3}
+			paddingRight={3}
 			paddingTop={1}
 			paddingBottom={1}
 			width={60}
 		>
-			<box>
+			<box marginBottom={1}>
 				<text fg={config.color}>{config.icon} </text>
-				<text>
+				<text fg="#EDEDED">
 					<strong>{title}</strong>
 				</text>
 			</box>
 
-			<box marginTop={1} marginBottom={1}>
-				<text>{message}</text>
+			<box marginBottom={1}>
+				<text fg="#A1A1AA">{message}</text>
 			</box>
 
-			<box>
-				<text fg="#666666">Press any key to continue</text>
+			<box marginTop={1}>
+				<text fg="#71717A">Press any key to continue</text>
 			</box>
 		</box>
 	);

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

@@ -11,6 +11,9 @@ import { LoadingModal } from "./LoadingModal.js";
  * Container that renders the active modal as an overlay
  * Handles ALL keyboard events when a modal is open to avoid
  * conflicts with multiple useKeyboard hooks in child components
+ *
+ * Input modal: Enter/Escape handled by OpenTUI <input> onSubmit + ModalContainer escape
+ * Select modal: keyboard fully handled here (index tracking + Enter/arrows)
  */
 export function ModalContainer() {
     const { state } = useApp();
@@ -25,14 +28,14 @@ export function ModalContainer() {
             setSelectIndex(modal.defaultIndex ?? 0);
         }
     }
-    // Handle ALL keyboard events for modals
+    // Handle keyboard events for modals
     useKeyboard((key) => {
         if (!modal)
             return;
         if (modal.type === "loading")
             return;
         // Escape — close any modal
-        if (key.name === "escape" || key.name === "q") {
+        if (key.name === "escape") {
             if (modal.type === "confirm")
                 modal.onCancel();
             else if (modal.type === "input")
@@ -43,6 +46,20 @@ export function ModalContainer() {
                 modal.onDismiss();
             return;
         }
+        // 'q' to close — but NOT for input modals (need to type 'q')
+        if (key.name === "q" && modal.type !== "input") {
+            if (modal.type === "confirm")
+                modal.onCancel();
+            else if (modal.type === "select")
+                modal.onCancel();
+            else if (modal.type === "message")
+                modal.onDismiss();
+            return;
+        }
+        // Input modal — let OpenTUI <input> handle Enter via onSubmit
+        if (modal.type === "input") {
+            return;
+        }
         // Select modal — handle navigation and selection
         if (modal.type === "select") {
             if (key.name === "return" || key.name === "enter") {
@@ -62,6 +79,12 @@ export function ModalContainer() {
                 modal.onDismiss();
             }
         }
+        // Confirm modal — Enter to confirm
+        if (modal.type === "confirm") {
+            if (key.name === "return" || key.name === "enter") {
+                modal.onConfirm();
+            }
+        }
     });
     if (!modal) {
         return null;

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

@@ -11,6 +11,9 @@ import { LoadingModal } from "./LoadingModal.js";
  * Container that renders the active modal as an overlay
  * Handles ALL keyboard events when a modal is open to avoid
  * conflicts with multiple useKeyboard hooks in child components
+ *
+ * Input modal: Enter/Escape handled by OpenTUI <input> onSubmit + ModalContainer escape
+ * Select modal: keyboard fully handled here (index tracking + Enter/arrows)
  */
 export function ModalContainer() {
 	const { state } = useApp();
@@ -28,13 +31,13 @@ export function ModalContainer() {
 		}
 	}
 
-	// Handle ALL keyboard events for modals
+	// Handle keyboard events for modals
 	useKeyboard((key) => {
 		if (!modal) return;
 		if (modal.type === "loading") return;
 
 		// Escape — close any modal
-		if (key.name === "escape" || key.name === "q") {
+		if (key.name === "escape") {
 			if (modal.type === "confirm") modal.onCancel();
 			else if (modal.type === "input") modal.onCancel();
 			else if (modal.type === "select") modal.onCancel();
@@ -42,6 +45,19 @@ export function ModalContainer() {
 			return;
 		}
 
+		// 'q' to close — but NOT for input modals (need to type 'q')
+		if (key.name === "q" && modal.type !== "input") {
+			if (modal.type === "confirm") modal.onCancel();
+			else if (modal.type === "select") modal.onCancel();
+			else if (modal.type === "message") modal.onDismiss();
+			return;
+		}
+
+		// Input modal — let OpenTUI <input> handle Enter via onSubmit
+		if (modal.type === "input") {
+			return;
+		}
+
 		// Select modal — handle navigation and selection
 		if (modal.type === "select") {
 			if (key.name === "return" || key.name === "enter") {
@@ -60,6 +76,13 @@ export function ModalContainer() {
 				modal.onDismiss();
 			}
 		}
+
+		// Confirm modal — Enter to confirm
+		if (modal.type === "confirm") {
+			if (key.name === "return" || key.name === "enter") {
+				modal.onConfirm();
+			}
+		}
 	});
 
 	if (!modal) {

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

@@ -3,10 +3,9 @@ export function SelectModal({ title, message, options, defaultIndex, onSelect: _
     // 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) => {
+    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "#525252", backgroundColor: "#1C1C1E", paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, width: 50, children: [_jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#EDEDED", children: _jsx("strong", { children: title }) }) }), _jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#A1A1AA", children: message }) }), _jsx("box", { flexDirection: "column", paddingLeft: 1, children: options.map((option, idx) => {
                     const isSelected = idx === selectedIndex;
-                    const label = isSelected ? `> ${option.label}` : `  ${option.label}`;
-                    return (_jsxs("text", { fg: isSelected ? "cyan" : "#666666", children: [isSelected && _jsx("strong", { children: label }), !isSelected && label] }, option.value));
-                }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "#666666", children: "\u2191\u2193 Select \u2022 Enter \u2022 Esc" }) })] }));
+                    return (_jsxs("text", { fg: isSelected ? "#F4F4F5" : "#A1A1AA", children: [_jsx("span", { fg: isSelected ? "#F4F4F5" : "#71717A", children: isSelected ? "❯ " : "  " }), isSelected ? _jsx("strong", { children: option.label }) : option.label] }, option.value));
+                }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "#71717A", children: "\u2191\u2193 Select \u2022 \u21B5 Confirm \u2022 Esc Cancel" }) })] }));
 }
 export default SelectModal;

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

@@ -33,37 +33,40 @@ export function SelectModal({
 			flexDirection="column"
 			border
 			borderStyle="rounded"
-			borderColor="cyan"
-			backgroundColor="#1a1a2e"
-			paddingLeft={2}
-			paddingRight={2}
+			borderColor="#525252"
+			backgroundColor="#1C1C1E"
+			paddingLeft={3}
+			paddingRight={3}
 			paddingTop={1}
 			paddingBottom={1}
 			width={50}
 		>
-			<text>
-				<strong>{title}</strong>
-			</text>
+			<box marginBottom={1}>
+				<text fg="#EDEDED">
+					<strong>{title}</strong>
+				</text>
+			</box>
 
-			<box marginTop={1} marginBottom={1}>
-				<text>{message}</text>
+			<box marginBottom={1}>
+				<text fg="#A1A1AA">{message}</text>
 			</box>
 
-			<box flexDirection="column">
+			<box flexDirection="column" paddingLeft={1}>
 				{options.map((option, idx) => {
 					const isSelected = idx === selectedIndex;
-					const label = isSelected ? `> ${option.label}` : `  ${option.label}`;
 					return (
-						<text key={option.value} fg={isSelected ? "cyan" : "#666666"}>
-							{isSelected && <strong>{label}</strong>}
-							{!isSelected && label}
+						<text key={option.value} fg={isSelected ? "#F4F4F5" : "#A1A1AA"}>
+							<span fg={isSelected ? "#F4F4F5" : "#71717A"}>
+								{isSelected ? "❯ " : "  "}
+							</span>
+							{isSelected ? <strong>{option.label}</strong> : option.label}
 						</text>
 					);
 				})}
 			</box>
 
 			<box marginTop={1}>
-				<text fg="#666666">↑↓ Select • Enter • Esc</text>
+				<text fg="#71717A">↑↓ Select • ↵ Confirm • Esc Cancel</text>
 			</box>
 		</box>
 	);

package/src/ui/renderers/settingsRenderers.js

@@ -8,7 +8,7 @@ const categoryRenderer = {
         const star = item.category === "recommended" ? "★ " : "";
         const label = `${star}${CATEGORY_LABELS[item.category]}`;
         const bg = isSelected ? theme.selection.bg : CATEGORY_BG[item.category];
-        return (_jsx("text", { bg: bg, fg: "white", children: _jsxs("strong", { children: [" ", label, " "] }) }));
+        return (_jsx("box", { width: "100%", children: _jsx("text", { bg: bg, fg: "white", children: _jsxs("strong", { children: [" ", label, " "] }) }) }));
     },
     renderDetail: ({ item }) => {
         const cat = item.category;

package/src/ui/renderers/settingsRenderers.tsx

@@ -24,9 +24,11 @@ const categoryRenderer: ItemRenderer<SettingsCategoryItem> = {
     const bg = isSelected ? theme.selection.bg : CATEGORY_BG[item.category];
 
     return (
-      <text bg={bg} fg="white">
-        <strong> {label} </strong>
-      </text>
+      <box width="100%">
+        <text bg={bg} fg="white">
+          <strong> {label} </strong>
+        </text>
+      </box>
     );
   },
 

package/src/ui/screens/CliToolsScreen.js

@@ -6,9 +6,9 @@ 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 { cliTools } from "../../data/cli-tools.js";
 import { renderCliToolRow, renderCliToolDetail, } from "../renderers/cliToolRenderers.js";
+import { ScrollableList } from "../components/ScrollableList.js";
 const execAsync = promisify(exec);
 // ─── Version helpers ───────────────────────────────────────────────────────────
 // Session-level cache
@@ -328,6 +328,6 @@ export function CliToolsScreen() {
     const installedCount = toolStatuses.filter((s) => s.installed).length;
     const updateCount = toolStatuses.filter((s) => s.hasUpdate).length;
     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: "Enter:install \u2502 a:update all \u2502 c:fix conflict \u2502 r:refresh", listPanel: _jsx(ScrollableList, { items: toolStatuses, selectedIndex: cliToolsState.selectedIndex, renderItem: renderCliToolRow, maxHeight: dimensions.listPanelHeight }), detailPanel: renderCliToolDetail(selectedStatus) }));
+    return (_jsx(ScreenLayout, { title: "claudeup CLI Tools", currentScreen: "cli-tools", statusLine: statusContent, footerHints: "Enter:install \u2502 a:update all \u2502 c:fix conflict \u2502 r:refresh", listPanel: _jsx(ScrollableList, { items: toolStatuses, selectedIndex: cliToolsState.selectedIndex, renderItem: renderCliToolRow, maxHeight: dimensions.listPanelHeight, getKey: (status) => status.tool.name }), detailPanel: renderCliToolDetail(selectedStatus) }));
 }
 export default CliToolsScreen;

package/src/ui/screens/CliToolsScreen.tsx

@@ -5,7 +5,7 @@ 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 { cliTools } from "../../data/cli-tools.js";
 import {
 	renderCliToolRow,
@@ -13,6 +13,7 @@ import {
 	type CliToolStatus,
 	type InstallMethod,
 } from "../renderers/cliToolRenderers.js";
+import { ScrollableList } from "../components/ScrollableList.js";
 
 const execAsync = promisify(exec);
 
@@ -423,6 +424,7 @@ export function CliToolsScreen() {
 					selectedIndex={cliToolsState.selectedIndex}
 					renderItem={renderCliToolRow}
 					maxHeight={dimensions.listPanelHeight}
+					getKey={(status) => status.tool.name}
 				/>
 			}
 			detailPanel={renderCliToolDetail(selectedStatus)}

package/src/ui/screens/EnvVarsScreen.js

@@ -4,11 +4,11 @@ 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 { SETTINGS_CATALOG, } from "../../data/settings-catalog.js";
-import { readAllSettingsBothScopes, writeSettingValue, } from "../../services/settings-manager.js";
+import { readAllSettingsBothScopes, writeSettingValue, discoverOutputStyles, } from "../../services/settings-manager.js";
 import { buildSettingsBrowserItems, } from "../adapters/settingsAdapter.js";
 import { renderSettingRow, renderSettingDetail } from "../renderers/settingsRenderers.js";
+import { ScrollableList } from "../components/ScrollableList.js";
 export function SettingsScreen() {
     const { state, dispatch } = useApp();
     const { settings } = state;
@@ -17,6 +17,11 @@ export function SettingsScreen() {
     const fetchData = useCallback(async () => {
         dispatch({ type: "SETTINGS_DATA_LOADING" });
         try {
+            // Populate dynamic output style options from installed plugins
+            const outputStyleSetting = SETTINGS_CATALOG.find((s) => s.id === "output-style");
+            if (outputStyleSetting && outputStyleSetting.type === "select") {
+                outputStyleSetting.options = await discoverOutputStyles(state.projectPath);
+            }
             const values = await readAllSettingsBothScopes(SETTINGS_CATALOG, state.projectPath);
             dispatch({ type: "SETTINGS_DATA_SUCCESS", values });
         }
@@ -76,15 +81,27 @@ export function SettingsScreen() {
             }
         }
         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();
+            // String type: if already set, clear it; if unset, show input modal
+            if (currentValue !== undefined && currentValue !== "") {
+                try {
+                    await writeSettingValue(setting, undefined, scope, state.projectPath);
+                    await fetchData();
+                }
+                catch (error) {
+                    await modal.message("Error", `Failed to update: ${error}`, "error");
+                }
             }
-            catch (error) {
-                await modal.message("Error", `Failed to update: ${error}`, "error");
+            else {
+                const newValue = await modal.input(`${setting.name} — ${scope}`, setting.description, currentValue || setting.defaultValue || "");
+                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");
+                }
             }
         }
     };

package/src/ui/screens/EnvVarsScreen.tsx

@@ -3,19 +3,20 @@ 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 {
 	SETTINGS_CATALOG,
 } from "../../data/settings-catalog.js";
 import {
 	readAllSettingsBothScopes,
 	writeSettingValue,
+	discoverOutputStyles,
 } from "../../services/settings-manager.js";
 import {
 	buildSettingsBrowserItems,
 	type SettingsBrowserItem,
 } from "../adapters/settingsAdapter.js";
 import { renderSettingRow, renderSettingDetail } from "../renderers/settingsRenderers.js";
+import { ScrollableList } from "../components/ScrollableList.js";
 
 export function SettingsScreen() {
 	const { state, dispatch } = useApp();
@@ -26,6 +27,12 @@ export function SettingsScreen() {
 	const fetchData = useCallback(async () => {
 		dispatch({ type: "SETTINGS_DATA_LOADING" });
 		try {
+			// Populate dynamic output style options from installed plugins
+			const outputStyleSetting = SETTINGS_CATALOG.find((s) => s.id === "output-style");
+			if (outputStyleSetting && outputStyleSetting.type === "select") {
+				outputStyleSetting.options = await discoverOutputStyles(state.projectPath);
+			}
+
 			const values = await readAllSettingsBothScopes(
 				SETTINGS_CATALOG,
 				state.projectPath,
@@ -95,22 +102,32 @@ export function SettingsScreen() {
 				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,
+			// String type: if already set, clear it; if unset, show input modal
+			if (currentValue !== undefined && currentValue !== "") {
+				try {
+					await writeSettingValue(setting, undefined, 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 || setting.defaultValue || "",
 				);
-				await fetchData();
-			} catch (error) {
-				await modal.message("Error", `Failed to update: ${error}`, "error");
+				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");
+				}
 			}
 		}
 	};

package/src/ui/screens/McpRegistryScreen.js

@@ -4,9 +4,9 @@ import { useApp, useModal, useNavigation } 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 { searchMcpServers, formatDate } from "../../services/mcp-registry.js";
 import { addMcpServer, setAllowMcp } from "../../services/claude-settings.js";
+import { ScrollableList } from "../components/ScrollableList.js";
 /**
  * Deduplicate servers by name, keeping only the latest version.
  * Uses version string comparison, falling back to published_at date.
@@ -222,6 +222,6 @@ export function McpRegistryScreen() {
             isActive: isSearchActive,
             query: searchQuery,
             placeholder: searchPlaceholder,
-        }, footerHints: footerHints, listPanel: isLoading ? (_jsx("text", { fg: "gray", children: "Loading..." })) : error ? (_jsxs("text", { fg: "red", children: ["Error: ", error] })) : servers.length === 0 ? (_jsx("text", { fg: "gray", children: "No servers found" })) : (_jsx(ScrollableList, { items: servers, selectedIndex: mcpRegistry.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight })), detailPanel: renderDetail() }));
+        }, footerHints: footerHints, listPanel: isLoading ? (_jsx("text", { fg: "gray", children: "Loading..." })) : error ? (_jsxs("text", { fg: "red", children: ["Error: ", error] })) : servers.length === 0 ? (_jsx("text", { fg: "gray", children: "No servers found" })) : (_jsx(ScrollableList, { items: servers, selectedIndex: mcpRegistry.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight, getKey: (server) => server.name })), detailPanel: renderDetail() }));
 }
 export default McpRegistryScreen;

package/src/ui/screens/McpRegistryScreen.tsx

@@ -3,10 +3,11 @@ import { useApp, useModal, useNavigation } 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 { searchMcpServers, formatDate } from "../../services/mcp-registry.js";
 import { addMcpServer, setAllowMcp } from "../../services/claude-settings.js";
 import type { McpRegistryServer, McpServerConfig } from "../../types/index.js";
+import { ScrollableList } from "../components/ScrollableList.js";
 
 /**
  * Deduplicate servers by name, keeping only the latest version.
@@ -332,6 +333,7 @@ export function McpRegistryScreen() {
 						selectedIndex={mcpRegistry.selectedIndex}
 						renderItem={renderListItem}
 						maxHeight={dimensions.listPanelHeight}
+						getKey={(server) => server.name}
 					/>
 				)
 			}

package/src/ui/screens/McpScreen.js

@@ -4,10 +4,10 @@ import { useApp, useModal, useNavigation } 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 { getMcpServersByCategory, getCategoryDisplayName, categoryOrder, } from "../../data/mcp-servers.js";
 import { addMcpServer, removeMcpServer, getInstalledMcpServers, getEnabledMcpServers, } from "../../services/claude-settings.js";
 import { renderMcpRow, renderMcpDetail, } from "../renderers/mcpRenderers.js";
+import { ScrollableList } from "../components/ScrollableList.js";
 export function McpScreen() {
     const { state, dispatch } = useApp();
     const { mcp } = state;