claudeup 1.8.0 → 3.3.0

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

@@ -0,0 +1,104 @@
+import React from "react";
+import { useApp } from "../../state/AppContext.js";
+import { useKeyboard } from "../../hooks/useKeyboard.js";
+import { ConfirmModal } from "./ConfirmModal.js";
+import { InputModal } from "./InputModal.js";
+import { SelectModal } from "./SelectModal.js";
+import { MessageModal } from "./MessageModal.js";
+import { LoadingModal } from "./LoadingModal.js";
+
+/**
+ * Container that renders the active modal as an overlay
+ * Handles global Escape key to close modals
+ */
+export function ModalContainer() {
+	const { state } = useApp();
+	const { modal } = state;
+
+	// Handle Escape key to close modal (except loading)
+	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") {
+				modal.onDismiss();
+			}
+		}
+	});
+
+	if (!modal) {
+		return null;
+	}
+
+	const renderModal = () => {
+		switch (modal.type) {
+			case "confirm":
+				return (
+					<ConfirmModal
+						title={modal.title}
+						message={modal.message}
+						onConfirm={modal.onConfirm}
+						onCancel={modal.onCancel}
+					/>
+				);
+
+			case "input":
+				return (
+					<InputModal
+						title={modal.title}
+						label={modal.label}
+						defaultValue={modal.defaultValue}
+						onSubmit={modal.onSubmit}
+						onCancel={modal.onCancel}
+					/>
+				);
+
+			case "select":
+				return (
+					<SelectModal
+						title={modal.title}
+						message={modal.message}
+						options={modal.options}
+						onSelect={modal.onSelect}
+						onCancel={modal.onCancel}
+					/>
+				);
+
+			case "message":
+				return (
+					<MessageModal
+						title={modal.title}
+						message={modal.message}
+						variant={modal.variant}
+						onDismiss={modal.onDismiss}
+					/>
+				);
+
+			case "loading":
+				return <LoadingModal message={modal.message} />;
+
+			default:
+				return null;
+		}
+	};
+
+	// Center the modal on screen
+	return (
+		<box
+			position="absolute"
+			width="100%"
+			height="100%"
+			justifyContent="center"
+			alignItems="center"
+		>
+			{renderModal()}
+		</box>
+	);
+}
+
+export default ModalContainer;

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

@@ -0,0 +1,26 @@
+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));
+        }
+    });
+    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "cyan", 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}`;
+                    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" }) })] }));
+}
+export default SelectModal;

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

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import { useKeyboard } from "../../hooks/useKeyboard.js";
+import type { SelectOption } from "../../state/types.js";
+
+interface SelectModalProps {
+	/** Modal title */
+	title: string;
+	/** Modal message */
+	message: string;
+	/** Select options */
+	options: SelectOption[];
+	/** Callback when option selected */
+	onSelect: (value: string) => void;
+	/** Callback when cancelled */
+	onCancel: () => void;
+}
+
+export function SelectModal({
+	title,
+	message,
+	options,
+	onSelect,
+	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));
+		}
+	});
+
+	return (
+		<box
+			flexDirection="column"
+			border
+			borderStyle="rounded"
+			borderColor="cyan"
+			paddingLeft={2}
+			paddingRight={2}
+			paddingTop={1}
+			paddingBottom={1}
+			width={50}
+		>
+			<text>
+				<strong>{title}</strong>
+			</text>
+
+			<box marginTop={1} marginBottom={1}>
+				<text>{message}</text>
+			</box>
+
+			<box flexDirection="column">
+				{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>
+					);
+				})}
+			</box>
+
+			<box marginTop={1}>
+				<text fg="#666666">↑↓ Select • Enter • Esc</text>
+			</box>
+		</box>
+	);
+}
+
+export default SelectModal;

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

@@ -0,0 +1,6 @@
+export { ConfirmModal } from "./ConfirmModal.js";
+export { InputModal } from "./InputModal.js";
+export { SelectModal } from "./SelectModal.js";
+export { MessageModal } from "./MessageModal.js";
+export { LoadingModal } from "./LoadingModal.js";
+export { ModalContainer } from "./ModalContainer.js";

package/src/ui/components/modals/index.ts

@@ -0,0 +1,6 @@
+export { ConfirmModal } from "./ConfirmModal.js";
+export { InputModal } from "./InputModal.js";
+export { SelectModal } from "./SelectModal.js";
+export { MessageModal } from "./MessageModal.js";
+export { LoadingModal } from "./LoadingModal.js";
+export { ModalContainer } from "./ModalContainer.js";

package/src/ui/hooks/index.js

@@ -0,0 +1,3 @@
+export { useAsyncData, useDebouncedAsyncData } from './useAsyncData.js';
+export { useKeyboardHandler } from './useKeyboardHandler.js';
+export { useKeyboard } from './useKeyboard.js';

package/src/ui/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useAsyncData, useDebouncedAsyncData } from './useAsyncData.js';
+export { useKeyboardHandler } from './useKeyboardHandler.js';
+export { useKeyboard } from './useKeyboard.js';

package/{dist → src}/ui/hooks/useAsyncData.js

@@ -1,18 +1,18 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from "react";
 /**
  * Hook for fetching async data with loading/error states
  */
 export function useAsyncData({ fetcher, deps = [], immediate = true, }) {
-    const [data, setData] = useState({ status: 'idle' });
+    const [data, setData] = useState({ status: "idle" });
     const refetch = useCallback(async () => {
-        setData({ status: 'loading' });
+        setData({ status: "loading" });
         try {
             const result = await fetcher();
-            setData({ status: 'success', data: result });
+            setData({ status: "success", data: result });
         }
         catch (err) {
             setData({
-                status: 'error',
+                status: "error",
                 error: err instanceof Error ? err : new Error(String(err)),
             });
         }
@@ -25,39 +25,39 @@ export function useAsyncData({ fetcher, deps = [], immediate = true, }) {
     }, deps);
     return {
         data,
-        isLoading: data.status === 'loading',
-        isSuccess: data.status === 'success',
-        isError: data.status === 'error',
-        error: data.status === 'error' ? data.error : null,
+        isLoading: data.status === "loading",
+        isSuccess: data.status === "success",
+        isError: data.status === "error",
+        error: data.status === "error" ? data.error : null,
         refetch,
-        value: data.status === 'success' ? data.data : null,
+        value: data.status === "success" ? data.data : null,
     };
 }
 /**
  * Hook for fetching async data with debounced query
  */
 export function useDebouncedAsyncData({ fetcher, query, debounceMs = 300, minQueryLength = 1, }) {
-    const [data, setData] = useState({ status: 'idle' });
+    const [data, setData] = useState({ status: "idle" });
     const refetch = useCallback(async () => {
         if (query.length < minQueryLength) {
-            setData({ status: 'idle' });
+            setData({ status: "idle" });
             return;
         }
-        setData({ status: 'loading' });
+        setData({ status: "loading" });
         try {
             const result = await fetcher(query);
-            setData({ status: 'success', data: result });
+            setData({ status: "success", data: result });
         }
         catch (err) {
             setData({
-                status: 'error',
+                status: "error",
                 error: err instanceof Error ? err : new Error(String(err)),
             });
         }
     }, [fetcher, query, minQueryLength]);
     useEffect(() => {
         if (query.length < minQueryLength) {
-            setData({ status: 'idle' });
+            setData({ status: "idle" });
             return;
         }
         const timeoutId = setTimeout(() => {
@@ -67,12 +67,11 @@ export function useDebouncedAsyncData({ fetcher, query, debounceMs = 300, minQue
     }, [query, debounceMs, minQueryLength, refetch]);
     return {
         data,
-        isLoading: data.status === 'loading',
-        isSuccess: data.status === 'success',
-        isError: data.status === 'error',
-        error: data.status === 'error' ? data.error : null,
+        isLoading: data.status === "loading",
+        isSuccess: data.status === "success",
+        isError: data.status === "error",
+        error: data.status === "error" ? data.error : null,
         refetch,
-        value: data.status === 'success' ? data.data : null,
+        value: data.status === "success" ? data.data : null,
     };
 }
-//# sourceMappingURL=useAsyncData.js.map

package/src/ui/hooks/useAsyncData.ts

@@ -0,0 +1,127 @@
+import { useState, useEffect, useCallback } from "react";
+import type { AsyncData } from "../state/types.js";
+
+interface UseAsyncDataOptions<T> {
+	/** Function that fetches data */
+	fetcher: () => Promise<T>;
+	/** Dependencies that trigger refetch when changed */
+	deps?: unknown[];
+	/** Whether to fetch immediately on mount */
+	immediate?: boolean;
+}
+
+interface UseAsyncDataResult<T> {
+	/** Current async data state */
+	data: AsyncData<T>;
+	/** Whether data is currently loading */
+	isLoading: boolean;
+	/** Whether data has been successfully loaded */
+	isSuccess: boolean;
+	/** Whether there was an error loading data */
+	isError: boolean;
+	/** Error if any */
+	error: Error | null;
+	/** Trigger a manual refetch */
+	refetch: () => Promise<void>;
+	/** Raw data if available */
+	value: T | null;
+}
+
+/**
+ * Hook for fetching async data with loading/error states
+ */
+export function useAsyncData<T>({
+	fetcher,
+	deps = [],
+	immediate = true,
+}: UseAsyncDataOptions<T>): UseAsyncDataResult<T> {
+	const [data, setData] = useState<AsyncData<T>>({ status: "idle" });
+
+	const refetch = useCallback(async () => {
+		setData({ status: "loading" });
+		try {
+			const result = await fetcher();
+			setData({ status: "success", data: result });
+		} catch (err) {
+			setData({
+				status: "error",
+				error: err instanceof Error ? err : new Error(String(err)),
+			});
+		}
+	}, [fetcher]);
+
+	useEffect(() => {
+		if (immediate) {
+			refetch();
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, deps);
+
+	return {
+		data,
+		isLoading: data.status === "loading",
+		isSuccess: data.status === "success",
+		isError: data.status === "error",
+		error: data.status === "error" ? data.error : null,
+		refetch,
+		value: data.status === "success" ? data.data : null,
+	};
+}
+
+/**
+ * Hook for fetching async data with debounced query
+ */
+export function useDebouncedAsyncData<T>({
+	fetcher,
+	query,
+	debounceMs = 300,
+	minQueryLength = 1,
+}: {
+	fetcher: (query: string) => Promise<T>;
+	query: string;
+	debounceMs?: number;
+	minQueryLength?: number;
+}): UseAsyncDataResult<T> {
+	const [data, setData] = useState<AsyncData<T>>({ status: "idle" });
+
+	const refetch = useCallback(async () => {
+		if (query.length < minQueryLength) {
+			setData({ status: "idle" });
+			return;
+		}
+
+		setData({ status: "loading" });
+		try {
+			const result = await fetcher(query);
+			setData({ status: "success", data: result });
+		} catch (err) {
+			setData({
+				status: "error",
+				error: err instanceof Error ? err : new Error(String(err)),
+			});
+		}
+	}, [fetcher, query, minQueryLength]);
+
+	useEffect(() => {
+		if (query.length < minQueryLength) {
+			setData({ status: "idle" });
+			return;
+		}
+
+		const timeoutId = setTimeout(() => {
+			refetch();
+		}, debounceMs);
+
+		return () => clearTimeout(timeoutId);
+	}, [query, debounceMs, minQueryLength, refetch]);
+
+	return {
+		data,
+		isLoading: data.status === "loading",
+		isSuccess: data.status === "success",
+		isError: data.status === "error",
+		error: data.status === "error" ? data.error : null,
+		refetch,
+		value: data.status === "success" ? data.data : null,
+	};
+}

package/src/ui/hooks/useKeyboard.js

@@ -0,0 +1,13 @@
+import { useKeyboard as useOpenTUIKeyboard } from "@opentui/react";
+/**
+ * Simple re-export of OpenTUI's useKeyboard hook
+ * Used by modals for direct keyboard event handling
+ *
+ * Key names in OpenTUI:
+ * - Single characters: "a", "1", etc.
+ * - Arrow keys: "up", "down", "left", "right"
+ * - Special: "enter", "escape", "tab", "backspace", "delete"
+ */
+export function useKeyboard(handler) {
+    useOpenTUIKeyboard(handler);
+}

package/src/ui/hooks/useKeyboard.ts

@@ -0,0 +1,26 @@
+import { useKeyboard as useOpenTUIKeyboard } from "@opentui/react";
+
+/**
+ * OpenTUI keyboard event type
+ */
+export interface KeyEvent {
+	name: string;
+	ctrl?: boolean;
+	shift?: boolean;
+	meta?: boolean;
+}
+
+/**
+ * Simple re-export of OpenTUI's useKeyboard hook
+ * Used by modals for direct keyboard event handling
+ *
+ * Key names in OpenTUI:
+ * - Single characters: "a", "1", etc.
+ * - Arrow keys: "up", "down", "left", "right"
+ * - Special: "enter", "escape", "tab", "backspace", "delete"
+ */
+export function useKeyboard(
+	handler: (event: KeyEvent) => void,
+): void {
+	useOpenTUIKeyboard(handler);
+}

package/src/ui/hooks/useKeyboardHandler.js

@@ -0,0 +1,39 @@
+import { useKeyboard as useOpenTUIKeyboard } from '@opentui/react';
+/**
+ * useKeyboardHandler hook
+ * Provides Ink-like API for keyboard events
+ *
+ * @param handler - Callback function with Ink-compatible signature
+ *
+ * @example
+ * ```tsx
+ * useKeyboardHandler((input, key) => {
+ *   if (key.return) handleEnter();
+ *   if (key.upArrow) handleUp();
+ *   if (key.escape) handleEscape();
+ *   if (input === 'q') handleQuit();
+ * });
+ * ```
+ */
+export function useKeyboardHandler(handler) {
+    useOpenTUIKeyboard((event) => {
+        // Map OpenTUI key names to Ink-like key names
+        const key = {
+            name: event.name,
+            ctrl: event.ctrl || false,
+            shift: event.shift || false,
+            meta: event.meta || false,
+            return: event.name === 'enter' || event.name === 'return',
+            upArrow: event.name === 'up',
+            downArrow: event.name === 'down',
+            leftArrow: event.name === 'left',
+            rightArrow: event.name === 'right',
+            escape: event.name === 'escape',
+            tab: event.name === 'tab',
+        };
+        // For printable characters, pass the character as input
+        // For special keys, pass empty string
+        const input = event.name.length === 1 ? event.name : '';
+        handler(input, key);
+    });
+}

package/src/ui/hooks/useKeyboardHandler.ts

@@ -0,0 +1,63 @@
+import { useKeyboard as useOpenTUIKeyboard } from '@opentui/react';
+
+/**
+ * Wrapper hook for OpenTUI's useKeyboard that provides an Ink-like API
+ * Maps Ink key names to OpenTUI key names for easier migration
+ */
+
+export interface InkLikeKey {
+	name: string;
+	ctrl: boolean;
+	shift: boolean;
+	meta: boolean;
+	return?: boolean;
+	upArrow?: boolean;
+	downArrow?: boolean;
+	leftArrow?: boolean;
+	rightArrow?: boolean;
+	escape?: boolean;
+	tab?: boolean;
+}
+
+type KeyHandler = (input: string, key: InkLikeKey) => void;
+
+/**
+ * useKeyboardHandler hook
+ * Provides Ink-like API for keyboard events
+ *
+ * @param handler - Callback function with Ink-compatible signature
+ *
+ * @example
+ * ```tsx
+ * useKeyboardHandler((input, key) => {
+ *   if (key.return) handleEnter();
+ *   if (key.upArrow) handleUp();
+ *   if (key.escape) handleEscape();
+ *   if (input === 'q') handleQuit();
+ * });
+ * ```
+ */
+export function useKeyboardHandler(handler: KeyHandler): void {
+	useOpenTUIKeyboard((event) => {
+		// Map OpenTUI key names to Ink-like key names
+		const key: InkLikeKey = {
+			name: event.name,
+			ctrl: event.ctrl || false,
+			shift: event.shift || false,
+			meta: event.meta || false,
+			return: event.name === 'enter' || event.name === 'return',
+			upArrow: event.name === 'up',
+			downArrow: event.name === 'down',
+			leftArrow: event.name === 'left',
+			rightArrow: event.name === 'right',
+			escape: event.name === 'escape',
+			tab: event.name === 'tab',
+		};
+
+		// For printable characters, pass the character as input
+		// For special keys, pass empty string
+		const input = event.name.length === 1 ? event.name : '';
+
+		handler(input, key);
+	});
+}