claudeup 4.6.1 → 4.8.0

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;

package/src/ui/screens/McpScreen.tsx

@@ -3,7 +3,7 @@ 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,
@@ -21,6 +21,7 @@ import {
 	renderMcpDetail,
 	type McpListItem,
 } from "../renderers/mcpRenderers.js";
+import { ScrollableList } from "../components/ScrollableList.js";
 
 export function McpScreen() {
 	const { state, dispatch } = useApp();

package/src/ui/screens/ModelSelectorScreen.js

@@ -2,9 +2,9 @@ import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
 import { useMemo, useEffect } from "react";
 import { useApp } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
-import { ScrollableList } from "../components/ScrollableList.js";
 import { fuzzyFilter, highlightMatches } from "../../utils/fuzzy-search.js";
 import { useKeyboard } from "../hooks/useKeyboard.js";
+import { ScrollableList } from "../components/ScrollableList.js";
 const RECENT_MODELS = [
     {
         id: "recent-1",
@@ -285,6 +285,6 @@ export function ModelSelectorScreen() {
     // Cursor line: > c
     // Separator: handled by list? or explicit?
     const listHeight = Math.max(5, dimensions.contentHeight - 5);
-    return (_jsxs("box", { flexDirection: "column", height: dimensions.contentHeight, children: [_jsx("box", { flexDirection: "row", border: true, borderStyle: "single", borderColor: "#7e57c2", paddingLeft: 1, paddingRight: 1, children: _jsxs("box", { flexDirection: "column", flexGrow: 1, children: [_jsx("box", { flexDirection: "row", justifyContent: "space-between", children: _jsxs("box", { children: [_jsx("text", { fg: "#7e57c2", children: "Switch Model " }), _jsxs("text", { fg: modelSelector.taskSize === "large" ? "white" : "gray", children: [modelSelector.taskSize === "large" ? "◎" : "○", " Large Task", "  "] }), _jsxs("text", { fg: modelSelector.taskSize === "small" ? "white" : "gray", children: [modelSelector.taskSize === "small" ? "◎" : "○", " Small Task"] })] }) }), _jsxs("box", { flexDirection: "row", marginTop: 1, children: [_jsx("text", { fg: "green", children: "> " }), _jsx("text", { children: modelSelector.searchQuery }), _jsx("text", { bg: "gray", fg: "black", children: " " })] })] }) }), _jsx("box", { flexGrow: 1, paddingLeft: 1, paddingRight: 1, children: _jsx(ScrollableList, { items: filteredItems, selectedIndex: modelSelector.selectedIndex, renderItem: renderItem, maxHeight: listHeight, showScrollIndicators: false }) }), _jsx("box", { height: 1, children: _jsx("text", { fg: "#888888", children: footerHints }) })] }));
+    return (_jsxs("box", { flexDirection: "column", height: dimensions.contentHeight, children: [_jsx("box", { flexDirection: "row", border: true, borderStyle: "single", borderColor: "#7e57c2", paddingLeft: 1, paddingRight: 1, children: _jsxs("box", { flexDirection: "column", flexGrow: 1, children: [_jsx("box", { flexDirection: "row", justifyContent: "space-between", children: _jsxs("box", { children: [_jsx("text", { fg: "#7e57c2", children: "Switch Model " }), _jsxs("text", { fg: modelSelector.taskSize === "large" ? "white" : "gray", children: [modelSelector.taskSize === "large" ? "◎" : "○", " Large Task", "  "] }), _jsxs("text", { fg: modelSelector.taskSize === "small" ? "white" : "gray", children: [modelSelector.taskSize === "small" ? "◎" : "○", " Small Task"] })] }) }), _jsxs("box", { flexDirection: "row", marginTop: 1, children: [_jsx("text", { fg: "green", children: "> " }), _jsx("text", { children: modelSelector.searchQuery }), _jsx("text", { bg: "gray", fg: "black", children: " " })] })] }) }), _jsx("box", { flexGrow: 1, paddingLeft: 1, paddingRight: 1, children: _jsx(ScrollableList, { items: filteredItems, selectedIndex: modelSelector.selectedIndex, renderItem: renderItem, maxHeight: listHeight, getKey: (item) => item.id }) }), _jsx("box", { height: 1, children: _jsx("text", { fg: "#888888", children: footerHints }) })] }));
 }
 export default ModelSelectorScreen;

package/src/ui/screens/ModelSelectorScreen.tsx

@@ -1,9 +1,10 @@
 import React, { useMemo, useEffect } from "react";
 import { useApp } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
-import { ScrollableList } from "../components/ScrollableList.js";
+
 import { fuzzyFilter, highlightMatches } from "../../utils/fuzzy-search.js";
 import { useKeyboard } from "../hooks/useKeyboard.js";
+import { ScrollableList } from "../components/ScrollableList.js";
 
 interface ModelItem {
 	id: string;
@@ -423,7 +424,7 @@ export function ModelSelectorScreen() {
 					selectedIndex={modelSelector.selectedIndex}
 					renderItem={renderItem}
 					maxHeight={listHeight}
-					showScrollIndicators={false}
+					getKey={(item) => item.id}
 				/>
 			</box>
 

package/src/ui/screens/ProfilesScreen.js

@@ -4,12 +4,12 @@ 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 { listProfiles, applyProfile, renameProfile, deleteProfile, exportProfileToJson, importProfileFromJson, } from "../../services/profiles.js";
 import { readSettings, writeSettings, } from "../../services/claude-settings.js";
 import { writeClipboard, readClipboard, ClipboardUnavailableError, } from "../../utils/clipboard.js";
 import { PREDEFINED_PROFILES, } from "../../data/predefined-profiles.js";
 import { buildProfileListItems, renderProfileRow, renderProfileDetail, } from "../renderers/profileRenderers.js";
+import { ScrollableList } from "../components/ScrollableList.js";
 export function ProfilesScreen() {
     const { state, dispatch } = useApp();
     const { profiles: profilesState } = state;

package/src/ui/screens/ProfilesScreen.tsx

@@ -3,7 +3,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 {
 	listProfiles,
 	applyProfile,
@@ -31,6 +31,7 @@ import {
 	renderProfileDetail,
 	type ProfileListItem,
 } from "../renderers/profileRenderers.js";
+import { ScrollableList } from "../components/ScrollableList.js";
 
 export function ProfilesScreen() {
 	const { state, dispatch } = useApp();

package/src/ui/screens/StatusLineScreen.js

@@ -4,8 +4,8 @@ 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 { statusLineCategories } from "../../data/statuslines.js";
+import { ScrollableList } from "../components/ScrollableList.js";
 import { setStatusLine, getStatusLine, setGlobalStatusLine, getGlobalStatusLine, } from "../../services/claude-settings.js";
 export function StatusLineScreen() {
     const { state, dispatch } = useApp();

package/src/ui/screens/StatusLineScreen.tsx

@@ -3,9 +3,10 @@ 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 { statusLineCategories } from "../../data/statuslines.js";
 import type { StatusLineConfig } from "../../types/index.js";
+import { ScrollableList } from "../components/ScrollableList.js";
 import {
 	setStatusLine,
 	getStatusLine,

package/src/ui/state/DimensionsContext.js

@@ -21,9 +21,9 @@ function calculateDimensions(columns, rows, showProgress, showDebug, showUpdateB
     contentHeight = Math.max(10, contentHeight); // Minimum 10 lines for full layout
     // Calculate available content width (accounting for padding)
     const contentWidth = Math.max(40, terminalWidth - 4);
-    // Calculate list panel height for ScrollableList
+    // Calculate list panel height for scrollbox
     // ScreenLayout uses: panelHeight = contentHeight - 4 (header) - 1 (footer)
-    // The ScrollableList sits inside the panel
+    // The scrollbox sits inside the panel
     const listPanelHeight = Math.max(3, contentHeight - SCREEN_HEADER_HEIGHT - SCREEN_FOOTER_HEIGHT);
     return {
         terminalWidth,

package/src/ui/state/DimensionsContext.tsx

@@ -10,7 +10,7 @@ interface Dimensions {
 	contentHeight: number;
 	/** Available width for content (excluding borders, padding) */
 	contentWidth: number;
-	/** Available lines for ScrollableList in list panels */
+	/** Available lines for scrollbox in list panels */
 	listPanelHeight: number;
 }
 
@@ -52,9 +52,9 @@ function calculateDimensions(
 	// Calculate available content width (accounting for padding)
 	const contentWidth = Math.max(40, terminalWidth - 4);
 
-	// Calculate list panel height for ScrollableList
+	// Calculate list panel height for scrollbox
 	// ScreenLayout uses: panelHeight = contentHeight - 4 (header) - 1 (footer)
-	// The ScrollableList sits inside the panel
+	// The scrollbox sits inside the panel
 	const listPanelHeight = Math.max(
 		3,
 		contentHeight - SCREEN_HEADER_HEIGHT - SCREEN_FOOTER_HEIGHT,

package/src/ui/components/ScrollableDetail.js

@@ -1,23 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
-import { useState, useEffect } from "react";
-/**
- * A scrollable detail panel that renders an array of lines
- * with automatic scroll tracking. When content exceeds maxHeight,
- * it shows a scroll indicator and clips to fit.
- */
-export function ScrollableDetail({ lines, maxHeight, scrollTrigger = 0, }) {
-    const [scrollOffset, setScrollOffset] = useState(0);
-    // Reset scroll when content changes (new item selected)
-    useEffect(() => {
-        setScrollOffset(0);
-    }, [scrollTrigger]);
-    const totalLines = lines.length;
-    const visibleLines = Math.max(1, maxHeight - 1); // -1 for scroll indicator
-    const canScroll = totalLines > visibleLines;
-    const maxOffset = Math.max(0, totalLines - visibleLines);
-    const clampedOffset = Math.min(scrollOffset, maxOffset);
-    const visibleContent = lines.slice(clampedOffset, clampedOffset + visibleLines);
-    const scrollUp = clampedOffset > 0;
-    const scrollDown = clampedOffset < maxOffset;
-    return (_jsxs("box", { flexDirection: "column", children: [scrollUp && (_jsx("box", { children: _jsxs("text", { fg: "cyan", children: ["\u2191 ", clampedOffset, " more"] }) })), visibleContent, scrollDown && (_jsx("box", { children: _jsxs("text", { fg: "cyan", children: ["\u2193 ", totalLines - clampedOffset - visibleLines, " more"] }) }))] }));
-}

package/src/ui/components/ScrollableDetail.tsx

@@ -1,55 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-interface ScrollableDetailProps {
-	/** Array of content lines to display */
-	lines: React.ReactNode[];
-	/** Maximum visible height */
-	maxHeight: number;
-	/** External scroll trigger — changes when list selection changes */
-	scrollTrigger?: number;
-}
-
-/**
- * A scrollable detail panel that renders an array of lines
- * with automatic scroll tracking. When content exceeds maxHeight,
- * it shows a scroll indicator and clips to fit.
- */
-export function ScrollableDetail({
-	lines,
-	maxHeight,
-	scrollTrigger = 0,
-}: ScrollableDetailProps) {
-	const [scrollOffset, setScrollOffset] = useState(0);
-
-	// Reset scroll when content changes (new item selected)
-	useEffect(() => {
-		setScrollOffset(0);
-	}, [scrollTrigger]);
-
-	const totalLines = lines.length;
-	const visibleLines = Math.max(1, maxHeight - 1); // -1 for scroll indicator
-	const canScroll = totalLines > visibleLines;
-	const maxOffset = Math.max(0, totalLines - visibleLines);
-	const clampedOffset = Math.min(scrollOffset, maxOffset);
-
-	const visibleContent = lines.slice(clampedOffset, clampedOffset + visibleLines);
-
-	const scrollUp = clampedOffset > 0;
-	const scrollDown = clampedOffset < maxOffset;
-
-	return (
-		<box flexDirection="column">
-			{scrollUp && (
-				<box>
-					<text fg="cyan">↑ {clampedOffset} more</text>
-				</box>
-			)}
-			{visibleContent}
-			{scrollDown && (
-				<box>
-					<text fg="cyan">↓ {totalLines - clampedOffset - visibleLines} more</text>
-				</box>
-			)}
-		</box>
-	);
-}