claudeup 1.8.0 → 3.3.0

package/src/ui/components/layout/ScopeTabs.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+interface ScopeTabsProps {
+	/** Current scope */
+	scope: "project" | "global";
+	/** Callback when scope changes */
+	onToggle?: () => void;
+	/** Hint text for toggle key */
+	toggleHint?: string;
+}
+
+export function ScopeTabs({
+	scope,
+	onToggle: _onToggle,
+	toggleHint,
+}: ScopeTabsProps) {
+	const isProject = scope === "project";
+
+	return (
+		<box marginBottom={1} flexDirection="row" gap={1}>
+			{/* Project tab */}
+			<box>
+				{isProject ? (
+					<text bg="cyan" fg="black">
+						<strong> ◆ Project </strong>
+					</text>
+				) : (
+					<text fg="gray"> ○ Project </text>
+				)}
+			</box>
+
+			{/* Global tab */}
+			<box>
+				{!isProject ? (
+					<text bg="magenta" fg="white">
+						<strong> ◆ Global </strong>
+					</text>
+				) : (
+					<text fg="gray"> ○ Global </text>
+				)}
+			</box>
+
+			{/* Toggle hint */}
+			{toggleHint && (
+				<box marginLeft={2}>
+					<text fg="#666666">({toggleHint})</text>
+				</box>
+			)}
+		</box>
+	);
+}
+
+export default ScopeTabs;

package/src/ui/components/layout/ScreenLayout.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
+import { useDimensions } from "../../state/DimensionsContext.js";
+import { TabBar } from "../TabBar.js";
+const HEADER_COLOR = "#7e57c2";
+export function ScreenLayout({ title, subtitle, currentScreen, search, statusLine, footerHints, listPanel, detailPanel, }) {
+    const dimensions = useDimensions();
+    // Calculate panel heights
+    // Header: 4 lines (border + title + status/search + border)
+    // Footer: 2 lines (border-top + content)
+    const headerHeight = 4;
+    const footerHeight = 2;
+    const panelHeight = Math.max(5, dimensions.contentHeight - headerHeight - footerHeight);
+    return (_jsxs("box", { flexDirection: "column", height: dimensions.contentHeight, children: [_jsxs("box", { flexDirection: "column", border: true, borderStyle: "single", borderColor: HEADER_COLOR, padding: 1, marginBottom: 0, children: [_jsxs("box", { flexDirection: "row", justifyContent: "space-between", children: [_jsx("text", { fg: HEADER_COLOR, children: _jsx("strong", { children: title }) }), subtitle && _jsx("text", { fg: "gray", children: subtitle })] }), _jsx("box", { flexDirection: "row", marginTop: 0, children: search ? (
+                        // Search mode
+                        _jsxs(_Fragment, { children: [_jsx("text", { fg: "green", children: "> " }), search.isActive ? (_jsxs(_Fragment, { children: [_jsx("text", { fg: "white", children: search.query }), _jsx("text", { bg: "white", fg: "black", children: " " })] })) : (_jsx("text", { fg: "gray", children: search.query || search.placeholder || "/" }))] })) : statusLine ? (
+                        // Custom status line
+                        statusLine) : (
+                        // Default empty status
+                        _jsx("text", { fg: "gray", children: "\u2500" })) })] }), _jsxs("box", { flexDirection: "row", height: panelHeight, children: [_jsx("box", { flexDirection: "column", width: "49%", height: panelHeight, paddingRight: 1, children: listPanel }), _jsx("box", { flexDirection: "column", width: 1, height: panelHeight, children: _jsx("text", { fg: "#444444", children: "│".repeat(panelHeight) }) }), _jsx("box", { flexDirection: "column", width: "50%", height: panelHeight, paddingLeft: 1, children: detailPanel })] }), _jsxs("box", { height: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsx("text", { fg: "gray", children: footerHints }), _jsx(TabBar, { currentScreen: currentScreen })] })] }));
+}
+export default ScreenLayout;

package/src/ui/components/layout/ScreenLayout.tsx

@@ -0,0 +1,147 @@
+import React from "react";
+import { useDimensions } from "../../state/DimensionsContext.js";
+import { TabBar } from "../TabBar.js";
+import type { Screen } from "../../state/types.js";
+
+interface ScreenLayoutProps {
+	/** Screen title (e.g., "claudeup Plugins") */
+	title: string;
+	/** Optional subtitle shown to the right of title */
+	subtitle?: string;
+	/** Current screen for tab highlighting */
+	currentScreen: Screen;
+	/** Search bar configuration (for screens with search) */
+	search?: {
+		/** Is search currently active */
+		isActive: boolean;
+		/** Current search query */
+		query: string;
+		/** Placeholder when not searching (default: "/") */
+		placeholder?: string;
+	};
+	/** Status line content (for screens without search) - shown in second row */
+	statusLine?: React.ReactNode;
+	/** Footer hints (left side) */
+	footerHints: string;
+	/** Left panel content */
+	listPanel: React.ReactNode;
+	/** Right panel content (detail view) */
+	detailPanel: React.ReactNode;
+}
+
+const HEADER_COLOR = "#7e57c2";
+
+export function ScreenLayout({
+	title,
+	subtitle,
+	currentScreen,
+	search,
+	statusLine,
+	footerHints,
+	listPanel,
+	detailPanel,
+}: ScreenLayoutProps) {
+	const dimensions = useDimensions();
+
+	// Calculate panel heights
+	// Header: 4 lines (border + title + status/search + border)
+	// Footer: 2 lines (border-top + content)
+	const headerHeight = 4;
+	const footerHeight = 2;
+	const panelHeight = Math.max(
+		5,
+		dimensions.contentHeight - headerHeight - footerHeight,
+	);
+
+	return (
+		<box flexDirection="column" height={dimensions.contentHeight}>
+			{/* Header */}
+			<box
+				flexDirection="column"
+				border
+				borderStyle="single"
+				borderColor={HEADER_COLOR}
+				padding={1}
+				marginBottom={0}
+			>
+				{/* Title row */}
+				<box flexDirection="row" justifyContent="space-between">
+					<text fg={HEADER_COLOR}>
+						<strong>{title}</strong>
+					</text>
+					{subtitle && <text fg="gray">{subtitle}</text>}
+				</box>
+
+				{/* Status/Search row - always present */}
+				<box flexDirection="row" marginTop={0}>
+					{search ? (
+						// Search mode
+						<>
+							<text fg="green">{"> "}</text>
+							{search.isActive ? (
+								<>
+									<text fg="white">{search.query}</text>
+									<text bg="white" fg="black"> </text>
+								</>
+							) : (
+								<text fg="gray">
+									{search.query || search.placeholder || "/"}
+								</text>
+							)}
+						</>
+					) : statusLine ? (
+						// Custom status line
+						statusLine
+					) : (
+						// Default empty status
+						<text fg="gray">─</text>
+					)}
+				</box>
+			</box>
+
+			{/* Main content area */}
+			<box flexDirection="row" height={panelHeight}>
+				{/* List panel */}
+				<box
+					flexDirection="column"
+					width="49%"
+					height={panelHeight}
+					paddingRight={1}
+				>
+					{listPanel}
+				</box>
+
+				{/* Vertical separator */}
+				<box
+					flexDirection="column"
+					width={1}
+					height={panelHeight}
+				>
+					<text fg="#444444">{"│".repeat(panelHeight)}</text>
+				</box>
+
+				{/* Detail panel */}
+				<box
+					flexDirection="column"
+					width="50%"
+					height={panelHeight}
+					paddingLeft={1}
+				>
+					{detailPanel}
+				</box>
+			</box>
+
+			{/* Footer */}
+			<box
+				height={1}
+				flexDirection="row"
+				justifyContent="space-between"
+			>
+				<text fg="gray">{footerHints}</text>
+				<TabBar currentScreen={currentScreen} />
+			</box>
+		</box>
+	);
+}
+
+export default ScreenLayout;

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

@@ -0,0 +1,4 @@
+export { Panel } from "./Panel.js";
+export { ScopeTabs } from "./ScopeTabs.js";
+export { ProgressBar } from "./ProgressBar.js";
+export { ScreenLayout } from "./ScreenLayout.js";

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

@@ -0,0 +1,4 @@
+export { Panel } from "./Panel.js";
+export { ScopeTabs } from "./ScopeTabs.js";
+export { ProgressBar } from "./ProgressBar.js";
+export { ScreenLayout } from "./ScreenLayout.js";

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useKeyboard } from "../../hooks/useKeyboard.js";
+export function ConfirmModal({ title, message, onConfirm, onCancel, }) {
+    useKeyboard((key) => {
+        if (key.name === "y" || key.name === "Y") {
+            onConfirm();
+        }
+        else if (key.name === "n" || key.name === "N" || key.name === "escape") {
+            onCancel();
+        }
+    });
+    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "yellow", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, width: 60, children: [_jsx("text", { children: _jsx("strong", { children: title }) }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { children: message }) }), _jsx("box", { children: _jsxs("text", { children: [_jsx("span", { fg: "green", children: "[Y]" }), _jsx("span", { children: "es " }), _jsx("span", { fg: "red", children: "[N]" }), _jsx("span", { children: "o" })] }) })] }));
+}
+export default ConfirmModal;

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

@@ -0,0 +1,59 @@
+import React from "react";
+import { useKeyboard } from "../../hooks/useKeyboard.js";
+
+interface ConfirmModalProps {
+	/** Modal title */
+	title: string;
+	/** Modal message */
+	message: string;
+	/** Callback when confirmed */
+	onConfirm: () => void;
+	/** Callback when cancelled */
+	onCancel: () => void;
+}
+
+export function ConfirmModal({
+	title,
+	message,
+	onConfirm,
+	onCancel,
+}: ConfirmModalProps) {
+	useKeyboard((key) => {
+		if (key.name === "y" || key.name === "Y") {
+			onConfirm();
+		} else if (key.name === "n" || key.name === "N" || key.name === "escape") {
+			onCancel();
+		}
+	});
+
+	return (
+		<box
+			flexDirection="column"
+			border
+			borderStyle="rounded"
+			borderColor="yellow"
+			paddingLeft={2}
+			paddingRight={2}
+			paddingTop={1}
+			paddingBottom={1}
+			width={60}
+		>
+			<text>
+				<strong>{title}</strong>
+			</text>
+			<box marginTop={1} marginBottom={1}>
+				<text>{message}</text>
+			</box>
+			<box>
+				<text>
+					<span fg="green">[Y]</span>
+					<span>es </span>
+					<span fg="red">[N]</span>
+					<span>o</span>
+				</text>
+			</box>
+		</box>
+	);
+}
+
+export default ConfirmModal;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useState } from "react";
+import { useKeyboard } from "../../hooks/useKeyboard.js";
+export function InputModal({ title, label, defaultValue = "", onSubmit, onCancel, }) {
+    const [value, setValue] = useState(defaultValue);
+    useKeyboard((key) => {
+        if (key.name === "enter") {
+            onSubmit(value);
+        }
+        else if (key.name === "escape") {
+            onCancel();
+        }
+    });
+    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "cyan", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, width: 60, children: [_jsx("text", { children: _jsx("strong", { children: title }) }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { children: label }) }), _jsx("input", { value: value, onChange: setValue, focused: true, width: 54 }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "#666666", children: "Enter to confirm \u2022 Escape to cancel" }) })] }));
+}
+export default InputModal;

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

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { useKeyboard } from "../../hooks/useKeyboard.js";
+
+interface InputModalProps {
+	/** Modal title */
+	title: string;
+	/** Input label */
+	label: string;
+	/** Default input value */
+	defaultValue?: string;
+	/** Callback when submitted */
+	onSubmit: (value: string) => void;
+	/** Callback when cancelled */
+	onCancel: () => void;
+}
+
+export function InputModal({
+	title,
+	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"
+			paddingLeft={2}
+			paddingRight={2}
+			paddingTop={1}
+			paddingBottom={1}
+			width={60}
+		>
+			<text>
+				<strong>{title}</strong>
+			</text>
+
+			<box marginTop={1} marginBottom={1}>
+				<text>{label}</text>
+			</box>
+
+			<input
+				value={value}
+				onChange={setValue}
+				focused
+				width={54}
+			/>
+
+			<box marginTop={1}>
+				<text fg="#666666">Enter to confirm • Escape to cancel</text>
+			</box>
+		</box>
+	);
+}
+
+export default InputModal;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useState, useEffect } from "react";
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+export function LoadingModal({ message, }) {
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setFrame((prev) => (prev + 1) % SPINNER_FRAMES.length);
+        }, 80);
+        return () => clearInterval(interval);
+    }, []);
+    return (_jsxs("box", { flexDirection: "row", border: true, borderStyle: "rounded", borderColor: "cyan", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: [_jsx("text", { fg: "cyan", children: SPINNER_FRAMES[frame] }), _jsxs("text", { children: [" ", message] })] }));
+}
+export default LoadingModal;

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

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from "react";
+
+interface LoadingModalProps {
+	/** Loading message */
+	message: string;
+}
+
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+export function LoadingModal({
+	message,
+}: LoadingModalProps) {
+	const [frame, setFrame] = useState(0);
+
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setFrame((prev) => (prev + 1) % SPINNER_FRAMES.length);
+		}, 80);
+
+		return () => clearInterval(interval);
+	}, []);
+
+	return (
+		<box
+			flexDirection="row"
+			border
+			borderStyle="rounded"
+			borderColor="cyan"
+			paddingLeft={2}
+			paddingRight={2}
+			paddingTop={1}
+			paddingBottom={1}
+		>
+			<text fg="cyan">{SPINNER_FRAMES[frame]}</text>
+			<text> {message}</text>
+		</box>
+	);
+}
+
+export default LoadingModal;

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

@@ -0,0 +1,16 @@
+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" },
+};
+export function MessageModal({ title, message, variant, onDismiss, }) {
+    const config = variantConfig[variant];
+    useKeyboard(() => {
+        // Any key dismisses
+        onDismiss();
+    });
+    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: config.color, 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" }) })] }));
+}
+export default MessageModal;

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

@@ -0,0 +1,64 @@
+import React from "react";
+import { useKeyboard } from "../../hooks/useKeyboard.js";
+
+interface MessageModalProps {
+	/** Modal title */
+	title: string;
+	/** Modal message */
+	message: string;
+	/** Message variant */
+	variant: "info" | "success" | "error";
+	/** Callback when dismissed */
+	onDismiss: () => void;
+}
+
+const variantConfig = {
+	info: { icon: "ℹ", color: "cyan" },
+	success: { icon: "✓", color: "green" },
+	error: { icon: "✗", color: "red" },
+} as const;
+
+export function MessageModal({
+	title,
+	message,
+	variant,
+	onDismiss,
+}: MessageModalProps) {
+	const config = variantConfig[variant];
+
+	useKeyboard(() => {
+		// Any key dismisses
+		onDismiss();
+	});
+
+	return (
+		<box
+			flexDirection="column"
+			border
+			borderStyle="rounded"
+			borderColor={config.color}
+			paddingLeft={2}
+			paddingRight={2}
+			paddingTop={1}
+			paddingBottom={1}
+			width={60}
+		>
+			<box>
+				<text fg={config.color}>{config.icon} </text>
+				<text>
+					<strong>{title}</strong>
+				</text>
+			</box>
+
+			<box marginTop={1} marginBottom={1}>
+				<text>{message}</text>
+			</box>
+
+			<box>
+				<text fg="#666666">Press any key to continue</text>
+			</box>
+		</box>
+	);
+}
+
+export default MessageModal;

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+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 (_jsx(ConfirmModal, { title: modal.title, message: modal.message, onConfirm: modal.onConfirm, onCancel: modal.onCancel }));
+            case "input":
+                return (_jsx(InputModal, { title: modal.title, label: modal.label, defaultValue: modal.defaultValue, onSubmit: modal.onSubmit, onCancel: modal.onCancel }));
+            case "select":
+                return (_jsx(SelectModal, { title: modal.title, message: modal.message, options: modal.options, onSelect: modal.onSelect, onCancel: modal.onCancel }));
+            case "message":
+                return (_jsx(MessageModal, { title: modal.title, message: modal.message, variant: modal.variant, onDismiss: modal.onDismiss }));
+            case "loading":
+                return _jsx(LoadingModal, { message: modal.message });
+            default:
+                return null;
+        }
+    };
+    // Center the modal on screen
+    return (_jsx("box", { position: "absolute", width: "100%", height: "100%", justifyContent: "center", alignItems: "center", children: renderModal() }));
+}
+export default ModalContainer;