claudeup 1.7.0 → 3.3.0

package/src/ui/state/AnimationContext.tsx

@@ -0,0 +1,76 @@
+import React, {
+	createContext,
+	useContext,
+	useState,
+	type ReactNode,
+} from "react";
+
+// ============================================================================
+// Context Type
+// ============================================================================
+
+interface Timeline {
+	id: string;
+	// Timeline instance from useTimeline hook
+	instance: any;
+}
+
+interface AnimationContextValue {
+	timelines: Map<string, any>;
+	registerTimeline: (id: string, timeline: any) => void;
+	unregisterTimeline: (id: string) => void;
+}
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const AnimationContext = createContext<AnimationContextValue | null>(null);
+
+// ============================================================================
+// Provider
+// ============================================================================
+
+interface AnimationProviderProps {
+	children: ReactNode;
+}
+
+export function AnimationProvider({ children }: AnimationProviderProps) {
+	const [timelines, setTimelines] = useState<Map<string, any>>(new Map());
+
+	const registerTimeline = (id: string, timeline: any) => {
+		setTimelines((prev) => {
+			const next = new Map(prev);
+			next.set(id, timeline);
+			return next;
+		});
+	};
+
+	const unregisterTimeline = (id: string) => {
+		setTimelines((prev) => {
+			const next = new Map(prev);
+			next.delete(id);
+			return next;
+		});
+	};
+
+	return (
+		<AnimationContext.Provider
+			value={{ timelines, registerTimeline, unregisterTimeline }}
+		>
+			{children}
+		</AnimationContext.Provider>
+	);
+}
+
+// ============================================================================
+// Hook: useAnimation
+// ============================================================================
+
+export function useAnimation(): AnimationContextValue {
+	const context = useContext(AnimationContext);
+	if (!context) {
+		throw new Error("useAnimation must be used within an AnimationProvider");
+	}
+	return context;
+}

package/{dist → src}/ui/state/AppContext.js

@@ -1,16 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useReducer } from 'react';
-import { appReducer, initialState } from './reducer.js';
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { createContext, useContext, useReducer, } from "react";
+import { appReducer, initialState } from "./reducer.js";
 // ============================================================================
 // Context
 // ============================================================================
 const AppContext = createContext(null);
-export function AppProvider({ children, initialProjectPath }) {
+export function AppProvider({ children, initialProjectPath, }) {
     const [state, dispatch] = useReducer(appReducer, {
         ...initialState,
         projectPath: initialProjectPath || process.cwd(),
     });
-    return _jsx(AppContext.Provider, { value: { state, dispatch }, children: children });
+    return (_jsx(AppContext.Provider, { value: { state, dispatch }, children: children }));
 }
 // ============================================================================
 // Hook: useApp
@@ -18,7 +18,7 @@ export function AppProvider({ children, initialProjectPath }) {
 export function useApp() {
     const context = useContext(AppContext);
     if (!context) {
-        throw new Error('useApp must be used within an AppProvider');
+        throw new Error("useApp must be used within an AppProvider");
     }
     return context;
 }
@@ -31,10 +31,10 @@ export function useNavigation() {
         currentRoute: state.currentRoute,
         currentScreen: state.currentRoute.screen,
         navigateTo: (route) => {
-            dispatch({ type: 'NAVIGATE', route });
+            dispatch({ type: "NAVIGATE", route });
         },
         navigateToScreen: (screen) => {
-            dispatch({ type: 'NAVIGATE', route: { screen } });
+            dispatch({ type: "NAVIGATE", route: { screen } });
         },
     };
 }
@@ -45,25 +45,25 @@ export function useModal() {
     const { dispatch } = useApp();
     return {
         showModal: (modal) => {
-            dispatch({ type: 'SHOW_MODAL', modal });
+            dispatch({ type: "SHOW_MODAL", modal });
         },
         hideModal: () => {
-            dispatch({ type: 'HIDE_MODAL' });
+            dispatch({ type: "HIDE_MODAL" });
         },
         confirm: (title, message) => {
             return new Promise((resolve) => {
                 dispatch({
-                    type: 'SHOW_MODAL',
+                    type: "SHOW_MODAL",
                     modal: {
-                        type: 'confirm',
+                        type: "confirm",
                         title,
                         message,
                         onConfirm: () => {
-                            dispatch({ type: 'HIDE_MODAL' });
+                            dispatch({ type: "HIDE_MODAL" });
                             resolve(true);
                         },
                         onCancel: () => {
-                            dispatch({ type: 'HIDE_MODAL' });
+                            dispatch({ type: "HIDE_MODAL" });
                             resolve(false);
                         },
                     },
@@ -73,18 +73,18 @@ export function useModal() {
         input: (title, label, defaultValue) => {
             return new Promise((resolve) => {
                 dispatch({
-                    type: 'SHOW_MODAL',
+                    type: "SHOW_MODAL",
                     modal: {
-                        type: 'input',
+                        type: "input",
                         title,
                         label,
                         defaultValue,
                         onSubmit: (value) => {
-                            dispatch({ type: 'HIDE_MODAL' });
+                            dispatch({ type: "HIDE_MODAL" });
                             resolve(value);
                         },
                         onCancel: () => {
-                            dispatch({ type: 'HIDE_MODAL' });
+                            dispatch({ type: "HIDE_MODAL" });
                             resolve(null);
                         },
                     },
@@ -94,35 +94,35 @@ export function useModal() {
         select: (title, message, options) => {
             return new Promise((resolve) => {
                 dispatch({
-                    type: 'SHOW_MODAL',
+                    type: "SHOW_MODAL",
                     modal: {
-                        type: 'select',
+                        type: "select",
                         title,
                         message,
                         options,
                         onSelect: (value) => {
-                            dispatch({ type: 'HIDE_MODAL' });
+                            dispatch({ type: "HIDE_MODAL" });
                             resolve(value);
                         },
                         onCancel: () => {
-                            dispatch({ type: 'HIDE_MODAL' });
+                            dispatch({ type: "HIDE_MODAL" });
                             resolve(null);
                         },
                     },
                 });
             });
         },
-        message: (title, message, variant = 'info') => {
+        message: (title, message, variant = "info") => {
             return new Promise((resolve) => {
                 dispatch({
-                    type: 'SHOW_MODAL',
+                    type: "SHOW_MODAL",
                     modal: {
-                        type: 'message',
+                        type: "message",
                         title,
                         message,
                         variant,
                         onDismiss: () => {
-                            dispatch({ type: 'HIDE_MODAL' });
+                            dispatch({ type: "HIDE_MODAL" });
                             resolve();
                         },
                     },
@@ -131,9 +131,9 @@ export function useModal() {
         },
         loading: (message) => {
             dispatch({
-                type: 'SHOW_MODAL',
+                type: "SHOW_MODAL",
                 modal: {
-                    type: 'loading',
+                    type: "loading",
                     message,
                 },
             });
@@ -149,14 +149,13 @@ export function useProgress() {
         progress: state.progress,
         isVisible: state.progress !== null,
         show: (message, current, total) => {
-            dispatch({ type: 'SHOW_PROGRESS', state: { message, current, total } });
+            dispatch({ type: "SHOW_PROGRESS", state: { message, current, total } });
         },
         update: (state) => {
-            dispatch({ type: 'UPDATE_PROGRESS', state });
+            dispatch({ type: "UPDATE_PROGRESS", state });
         },
         hide: () => {
-            dispatch({ type: 'HIDE_PROGRESS' });
+            dispatch({ type: "HIDE_PROGRESS" });
         },
     };
 }
-//# sourceMappingURL=AppContext.js.map

package/src/ui/state/AppContext.tsx

@@ -0,0 +1,235 @@
+import React, {
+	createContext,
+	useContext,
+	useReducer,
+	type ReactNode,
+} from "react";
+import { appReducer, initialState } from "./reducer.js";
+import type {
+	AppState,
+	AppAction,
+	Route,
+	ModalState,
+	ProgressState,
+} from "./types.js";
+
+// ============================================================================
+// Context Type
+// ============================================================================
+
+interface AppContextValue {
+	state: AppState;
+	dispatch: React.Dispatch<AppAction>;
+}
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const AppContext = createContext<AppContextValue | null>(null);
+
+// ============================================================================
+// Provider
+// ============================================================================
+
+interface AppProviderProps {
+	children: ReactNode;
+	initialProjectPath?: string;
+}
+
+export function AppProvider({
+	children,
+	initialProjectPath,
+}: AppProviderProps) {
+	const [state, dispatch] = useReducer(appReducer, {
+		...initialState,
+		projectPath: initialProjectPath || process.cwd(),
+	});
+
+	return (
+		<AppContext.Provider value={{ state, dispatch }}>
+			{children}
+		</AppContext.Provider>
+	);
+}
+
+// ============================================================================
+// Hook: useApp
+// ============================================================================
+
+export function useApp(): AppContextValue {
+	const context = useContext(AppContext);
+	if (!context) {
+		throw new Error("useApp must be used within an AppProvider");
+	}
+	return context;
+}
+
+// ============================================================================
+// Hook: useNavigation
+// ============================================================================
+
+export function useNavigation() {
+	const { state, dispatch } = useApp();
+
+	return {
+		currentRoute: state.currentRoute,
+		currentScreen: state.currentRoute.screen,
+
+		navigateTo: (route: Route) => {
+			dispatch({ type: "NAVIGATE", route });
+		},
+
+		navigateToScreen: (screen: Route["screen"]) => {
+			dispatch({ type: "NAVIGATE", route: { screen } as Route });
+		},
+	};
+}
+
+// ============================================================================
+// Hook: useModal
+// ============================================================================
+
+export function useModal() {
+	const { dispatch } = useApp();
+
+	return {
+		showModal: (modal: ModalState) => {
+			dispatch({ type: "SHOW_MODAL", modal });
+		},
+
+		hideModal: () => {
+			dispatch({ type: "HIDE_MODAL" });
+		},
+
+		confirm: (title: string, message: string): Promise<boolean> => {
+			return new Promise((resolve) => {
+				dispatch({
+					type: "SHOW_MODAL",
+					modal: {
+						type: "confirm",
+						title,
+						message,
+						onConfirm: () => {
+							dispatch({ type: "HIDE_MODAL" });
+							resolve(true);
+						},
+						onCancel: () => {
+							dispatch({ type: "HIDE_MODAL" });
+							resolve(false);
+						},
+					},
+				});
+			});
+		},
+
+		input: (
+			title: string,
+			label: string,
+			defaultValue?: string,
+		): Promise<string | null> => {
+			return new Promise((resolve) => {
+				dispatch({
+					type: "SHOW_MODAL",
+					modal: {
+						type: "input",
+						title,
+						label,
+						defaultValue,
+						onSubmit: (value: string) => {
+							dispatch({ type: "HIDE_MODAL" });
+							resolve(value);
+						},
+						onCancel: () => {
+							dispatch({ type: "HIDE_MODAL" });
+							resolve(null);
+						},
+					},
+				});
+			});
+		},
+
+		select: (
+			title: string,
+			message: string,
+			options: { label: string; value: string; description?: string }[],
+		): Promise<string | null> => {
+			return new Promise((resolve) => {
+				dispatch({
+					type: "SHOW_MODAL",
+					modal: {
+						type: "select",
+						title,
+						message,
+						options,
+						onSelect: (value: string) => {
+							dispatch({ type: "HIDE_MODAL" });
+							resolve(value);
+						},
+						onCancel: () => {
+							dispatch({ type: "HIDE_MODAL" });
+							resolve(null);
+						},
+					},
+				});
+			});
+		},
+
+		message: (
+			title: string,
+			message: string,
+			variant: "info" | "success" | "error" = "info",
+		): Promise<void> => {
+			return new Promise((resolve) => {
+				dispatch({
+					type: "SHOW_MODAL",
+					modal: {
+						type: "message",
+						title,
+						message,
+						variant,
+						onDismiss: () => {
+							dispatch({ type: "HIDE_MODAL" });
+							resolve();
+						},
+					},
+				});
+			});
+		},
+
+		loading: (message: string) => {
+			dispatch({
+				type: "SHOW_MODAL",
+				modal: {
+					type: "loading",
+					message,
+				},
+			});
+		},
+	};
+}
+
+// ============================================================================
+// Hook: useProgress
+// ============================================================================
+
+export function useProgress() {
+	const { state, dispatch } = useApp();
+
+	return {
+		progress: state.progress,
+		isVisible: state.progress !== null,
+
+		show: (message: string, current?: number, total?: number) => {
+			dispatch({ type: "SHOW_PROGRESS", state: { message, current, total } });
+		},
+
+		update: (state: ProgressState) => {
+			dispatch({ type: "UPDATE_PROGRESS", state });
+		},
+
+		hide: () => {
+			dispatch({ type: "HIDE_PROGRESS" });
+		},
+	};
+}

package/{dist → src}/ui/state/DimensionsContext.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState, useEffect } from 'react';
-import { useStdout } from 'ink';
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { createContext, useContext, useState, useEffect } from "react";
+import { useRenderer, useOnResize } from "@opentui/react";
 const DimensionsContext = createContext(null);
 // Fixed heights for layout elements
 const SCREEN_HEADER_HEIGHT = 4; // ScreenLayout: border + title row + status/search row + border
@@ -34,22 +34,22 @@ function calculateDimensions(columns, rows, showProgress, showDebug, showUpdateB
     };
 }
 export function DimensionsProvider({ children, showProgress = false, showDebug = false, showUpdateBanner = false, }) {
-    const { stdout } = useStdout();
-    const [dimensions, setDimensions] = useState(() => calculateDimensions(stdout?.columns ?? 80, stdout?.rows ?? 24, showProgress, showDebug, showUpdateBanner));
+    const renderer = useRenderer();
+    const [dimensions, setDimensions] = useState(() => calculateDimensions(renderer.width, renderer.height, showProgress, showDebug, showUpdateBanner));
     // Handle terminal resize
-    useEffect(() => {
-        const handleResize = () => {
-            setDimensions(calculateDimensions(stdout?.columns ?? 80, stdout?.rows ?? 24, showProgress, showDebug, showUpdateBanner));
-        };
-        stdout?.on('resize', handleResize);
-        return () => {
-            stdout?.off('resize', handleResize);
-        };
-    }, [stdout, showProgress, showDebug, showUpdateBanner]);
+    useOnResize((width, height) => {
+        setDimensions(calculateDimensions(width, height, showProgress, showDebug, showUpdateBanner));
+    });
     // Update when showProgress/showDebug/showUpdateBanner changes
     useEffect(() => {
-        setDimensions(calculateDimensions(stdout?.columns ?? 80, stdout?.rows ?? 24, showProgress, showDebug, showUpdateBanner));
-    }, [stdout?.columns, stdout?.rows, showProgress, showDebug, showUpdateBanner]);
+        setDimensions(calculateDimensions(renderer.width, renderer.height, showProgress, showDebug, showUpdateBanner));
+    }, [
+        renderer.width,
+        renderer.height,
+        showProgress,
+        showDebug,
+        showUpdateBanner,
+    ]);
     return (_jsx(DimensionsContext.Provider, { value: dimensions, children: children }));
 }
 export function useDimensions() {
@@ -67,4 +67,3 @@ export function useDimensions() {
     return context;
 }
 export default DimensionsContext;
-//# sourceMappingURL=DimensionsContext.js.map

package/src/ui/state/DimensionsContext.tsx

@@ -0,0 +1,144 @@
+import React, { createContext, useContext, useState, useEffect } from "react";
+import { useRenderer, useOnResize } from "@opentui/react";
+
+interface Dimensions {
+	/** Terminal width */
+	terminalWidth: number;
+	/** Terminal height */
+	terminalHeight: number;
+	/** Available height for main content (excluding header, footer, margins) */
+	contentHeight: number;
+	/** Available width for content (excluding borders, padding) */
+	contentWidth: number;
+	/** Available lines for ScrollableList in list panels */
+	listPanelHeight: number;
+}
+
+const DimensionsContext = createContext<Dimensions | null>(null);
+
+// Fixed heights for layout elements
+const SCREEN_HEADER_HEIGHT = 4; // ScreenLayout: border + title row + status/search row + border
+const SCREEN_FOOTER_HEIGHT = 2; // ScreenLayout: border-top + footer content
+const APP_MARGINS = 1; // buffer for margins/padding
+const PROGRESS_HEIGHT = 1; // when visible
+
+interface DimensionsProviderProps {
+	children: React.ReactNode;
+	/** Whether progress bar is visible */
+	showProgress?: boolean;
+	/** Whether debug bar is visible */
+	showDebug?: boolean;
+	/** Whether update banner is visible */
+	showUpdateBanner?: boolean;
+}
+
+function calculateDimensions(
+	columns: number,
+	rows: number,
+	showProgress: boolean,
+	showDebug: boolean,
+	showUpdateBanner: boolean,
+): Dimensions {
+	const terminalWidth = columns;
+	const terminalHeight = rows;
+
+	// Calculate total available height for ScreenLayout (includes its header, panels, footer)
+	let contentHeight = terminalHeight - APP_MARGINS;
+	if (showProgress) contentHeight -= PROGRESS_HEIGHT;
+	if (showDebug) contentHeight -= 1;
+	if (showUpdateBanner) contentHeight -= 1;
+	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
+	// ScreenLayout uses: panelHeight = contentHeight - 4 (header) - 1 (footer)
+	// The ScrollableList sits inside the panel
+	const listPanelHeight = Math.max(
+		3,
+		contentHeight - SCREEN_HEADER_HEIGHT - SCREEN_FOOTER_HEIGHT,
+	);
+
+	return {
+		terminalWidth,
+		terminalHeight,
+		contentHeight,
+		contentWidth,
+		listPanelHeight,
+	};
+}
+
+export function DimensionsProvider({
+	children,
+	showProgress = false,
+	showDebug = false,
+	showUpdateBanner = false,
+}: DimensionsProviderProps) {
+	const renderer = useRenderer();
+
+	const [dimensions, setDimensions] = useState<Dimensions>(() =>
+		calculateDimensions(
+			renderer.width,
+			renderer.height,
+			showProgress,
+			showDebug,
+			showUpdateBanner,
+		),
+	);
+
+	// Handle terminal resize
+	useOnResize((width, height) => {
+		setDimensions(
+			calculateDimensions(
+				width,
+				height,
+				showProgress,
+				showDebug,
+				showUpdateBanner,
+			),
+		);
+	});
+
+	// Update when showProgress/showDebug/showUpdateBanner changes
+	useEffect(() => {
+		setDimensions(
+			calculateDimensions(
+				renderer.width,
+				renderer.height,
+				showProgress,
+				showDebug,
+				showUpdateBanner,
+			),
+		);
+	}, [
+		renderer.width,
+		renderer.height,
+		showProgress,
+		showDebug,
+		showUpdateBanner,
+	]);
+
+	return (
+		<DimensionsContext.Provider value={dimensions}>
+			{children}
+		</DimensionsContext.Provider>
+	);
+}
+
+export function useDimensions(): Dimensions {
+	const context = useContext(DimensionsContext);
+	if (!context) {
+		// Return sensible defaults if used outside provider
+		return {
+			terminalWidth: 80,
+			terminalHeight: 24,
+			contentHeight: 23, // 24 - 1 margin
+			contentWidth: 76,
+			listPanelHeight: 17, // 23 - 4 header - 2 footer
+		};
+	}
+	return context;
+}
+
+export default DimensionsContext;