claudeup 4.6.0 → 4.7.0

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>
-	);
-}