@pablozaiden/terminatui 0.1.2 → 0.3.0-beta-1

package/src/tui/components/ModalBase.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import { Panel } from "../semantic/Panel.tsx";
+import { Container } from "../semantic/Container.tsx";
+import { Overlay } from "../semantic/Overlay.tsx";
+
+type Dim = number | `${number}%` | "auto";
+
+interface ModalBaseProps {
+    title?: string;
+    width?: Dim;
+    height?: Dim;
+    top?: Dim;
+    left?: Dim;
+    right?: Dim;
+    bottom?: Dim;
+    children: ReactNode;
+}
+
+export function ModalBase({
+    title,
+    width = "80%",
+    height = "auto",
+    top = 4,
+    left = 4,
+    right,
+    bottom,
+    children,
+}: ModalBaseProps) {
+    return (
+        <Overlay zIndex={20} top={top} left={left} right={right} bottom={bottom} width={width} height={height}>
+            <Panel title={title} border={true} flexDirection="column" flex={1} padding={1} surface="overlay">
+                <Container flexDirection="column" gap={1} flex={1}>
+                    {children}
+                </Container>
+            </Panel>
+        </Overlay>
+    );
+}

package/src/tui/components/ResultsPanel.tsx

@@ -1,6 +1,10 @@
 import type { ReactNode } from "react";
-import { Theme } from "../theme.ts";
 import type { CommandResult } from "../../core/command.ts";
+import { Container } from "../semantic/Container.tsx";
+import { Panel } from "../semantic/Panel.tsx";
+import { ScrollView } from "../semantic/ScrollView.tsx";
+import { Label } from "../semantic/Label.tsx";
+import { Value } from "../semantic/Value.tsx";
 
 interface ResultsPanelProps {
     /** The result to display */
@@ -22,21 +26,18 @@ export function ResultsPanel({
     focused,
     renderResult,
 }: ResultsPanelProps) {
-    const borderColor = focused ? Theme.borderFocused : Theme.border;
 
     // Determine content to display
     let content: ReactNode;
 
     if (error) {
         content = (
-            <box flexDirection="column" gap={1}>
-                <text fg={Theme.error}>
-                    <strong>Error</strong>
-                </text>
-                <text fg={Theme.error}>
-                    {error.message}
-                </text>
-            </box>
+            <Container flexDirection="column" gap={1}>
+                <Label color="error" bold>
+                    Error
+                </Label>
+                <Label color="error">{error.message}</Label>
+            </Container>
         );
     } else if (result) {
         if (renderResult) {
@@ -44,50 +45,40 @@ export function ResultsPanel({
 
             if (typeof customContent === "string" || typeof customContent === "number" || typeof customContent === "boolean") {
                 // Wrap primitive results so the renderer gets a text node
-                content = (
-                    <text fg={Theme.value}>
-                        {String(customContent)}
-                    </text>
-                );
+                content = <Value>{String(customContent)}</Value>;
             } else {
                 content = customContent as ReactNode;
             }
         } else {
             // Default JSON display
             content = (
-                <box flexDirection="column" gap={1}>
+                <Container flexDirection="column" gap={1}>
                     {result.message && (
-                        <text fg={result.success ? Theme.success : Theme.error}>
-                            {result.message}
-                        </text>
+                        <Label color={result.success ? "success" : "error"}>{result.message}</Label>
                     )}
                     {result.data !== undefined && result.data !== null && (
-                        <text fg={Theme.value}>
-                            {JSON.stringify(result.data, null, 2)}
-                        </text>
+                        <Value>{JSON.stringify(result.data, null, 2)}</Value>
                     )}
-                </box>
+                </Container>
             );
         }
     } else {
-        content = (
-            <text fg={Theme.label}>No results yet...</text>
-        );
+        content = <Label color="mutedText">No results yet...</Label>;
     }
 
     return (
-        <box
-            flexDirection="column"
-            border={true}
-            borderStyle="rounded"
-            borderColor={borderColor}
+        <Panel
             title="Results"
+            focused={focused}
+            flex={1}
             padding={1}
-            flexGrow={1}
+            flexDirection="column"
         >
-            <scrollbox scrollY={true} flexGrow={1} focused={focused}>
-                {content}
-            </scrollbox>
-        </box>
+            <ScrollView axis="vertical" flex={1} focused={focused}>
+                <Container flexDirection="column">
+                    {content}
+                </Container>
+            </ScrollView>
+        </Panel>
     );
 }

package/src/tui/components/StatusBar.tsx

@@ -1,5 +1,7 @@
-import { Theme } from "../theme.ts";
-import { useSpinner } from "../hooks/useSpinner.ts";
+import { Label } from "../semantic/Label.tsx";
+import { Spinner } from "../semantic/Spinner.tsx";
+import { Panel } from "../semantic/Panel.tsx";
+import { Container } from "../semantic/Container.tsx";
 
 interface StatusBarProps {
     /** Status message to display */
@@ -15,45 +17,28 @@ interface StatusBarProps {
 /**
  * Status bar showing current status, spinner, and keyboard shortcuts.
  */
-export function StatusBar({ 
-    status, 
-    isRunning = false, 
+export function StatusBar({
+    status,
+    isRunning = false,
     showShortcuts = true,
-    shortcuts = "L Logs • C CLI • Tab Switch • Ctrl+Y Copy • Esc Back"
+    shortcuts = "L Logs • C CLI • Tab Switch • Ctrl+Y Copy • Esc Back",
 }: StatusBarProps) {
-    const { frame } = useSpinner(isRunning);
-    const spinner = isRunning ? `${frame} ` : "";
-    
     return (
-        <box
-            flexDirection="column"
-            gap={0}
-            border={true}
-            borderStyle="rounded"
-            borderColor={isRunning ? "#4ade80" : Theme.border}
-            flexShrink={0}
-        >
-            {/* Main status with spinner */}
-            <box
-                flexDirection="row"
-                justifyContent="space-between"
-                backgroundColor={isRunning ? "#1a1a2e" : undefined}
-                paddingLeft={1}
-                paddingRight={1}
-            >
-                <text fg={isRunning ? "#4ade80" : Theme.statusText}>
-                    {isRunning ? <strong>{spinner}{status}</strong> : <>{spinner}{status}</>}
-                </text>
-            </box>
-            
-            {/* Keyboard shortcuts */}
-            {showShortcuts && (
-                <box paddingLeft={1} paddingRight={1}>
-                    <text fg={Theme.label}>
-                        {shortcuts}
-                    </text>
-                </box>
-            )}
-        </box>
+        <Panel dense border={true} flexDirection="column" gap={0} height={showShortcuts ? 4 : 2}>
+            <Container flexDirection="row" justifyContent="space-between" padding={{ left: 1, right: 1 }}>
+                <Container flexDirection="row">
+                    <Spinner active={isRunning} />
+                    <Label color="success" bold>
+                        {status}
+                    </Label>
+                </Container>
+            </Container>
+
+            {showShortcuts ? (
+                <Container padding={{ left: 1, right: 1 }}>
+                    <Label color="mutedText">{shortcuts}</Label>
+                </Container>
+            ) : null}
+        </Panel>
     );
 }

package/src/tui/components/logColors.ts

@@ -0,0 +1,12 @@
+import { LogLevel } from "../../core/logger";
+
+// Shared colors for log levels used across debug views.
+export const LogColors: Record<LogLevel, string> = {
+    [LogLevel.silly]: "#8c8c8c",
+    [LogLevel.trace]: "#6dd6ff",
+    [LogLevel.debug]: "#7bdcb5",
+    [LogLevel.info]: "#d6dde6",
+    [LogLevel.warn]: "#f5c542",
+    [LogLevel.error]: "#f78888",
+    [LogLevel.fatal]: "#ff5c8d",
+};

package/src/tui/context/ClipboardContext.tsx

@@ -0,0 +1,87 @@
+import { createContext, useContext, useRef, useCallback, type ReactNode } from "react";
+
+/**
+ * Clipboard content that can be provided by a screen or modal.
+ */
+export interface ClipboardContent {
+    content: string;
+    label: string;
+}
+
+/**
+ * Provider function that returns clipboard content or null.
+ */
+export type ClipboardProvider = () => ClipboardContent | null;
+
+interface ClipboardContextValue {
+    /**
+     * Register a clipboard provider. Returns an unregister function.
+     * Providers are stacked - the most recently registered provider is checked first.
+     */
+    register: (id: string, provider: ClipboardProvider) => () => void;
+
+    /**
+     * Get clipboard content from the topmost provider that returns content.
+     */
+    getContent: () => ClipboardContent | null;
+}
+
+const ClipboardContext = createContext<ClipboardContextValue | null>(null);
+
+interface ClipboardProviderProps {
+    children: ReactNode;
+}
+
+/**
+ * Provider that manages clipboard content providers from screens and modals.
+ * Providers are stacked - modals register on top of screens, so modal content
+ * takes precedence when copying.
+ */
+export function ClipboardProviderComponent({ children }: ClipboardProviderProps) {
+    const providersRef = useRef<Map<string, ClipboardProvider>>(new Map());
+    const orderRef = useRef<string[]>([]);
+
+    const register = useCallback((id: string, provider: ClipboardProvider) => {
+        providersRef.current.set(id, provider);
+        // Add to end (most recent)
+        orderRef.current = orderRef.current.filter((i) => i !== id);
+        orderRef.current.push(id);
+
+        return () => {
+            providersRef.current.delete(id);
+            orderRef.current = orderRef.current.filter((i) => i !== id);
+        };
+    }, []);
+
+    const getContent = useCallback((): ClipboardContent | null => {
+        // Check providers in reverse order (most recent first)
+        for (let i = orderRef.current.length - 1; i >= 0; i--) {
+            const id = orderRef.current[i];
+            const provider = providersRef.current.get(id!);
+            if (provider) {
+                const content = provider();
+                if (content) {
+                    return content;
+                }
+            }
+        }
+        return null;
+    }, []);
+
+    return (
+        <ClipboardContext.Provider value={{ register, getContent }}>
+            {children}
+        </ClipboardContext.Provider>
+    );
+}
+
+/**
+ * Access the clipboard context.
+ */
+export function useClipboardContext(): ClipboardContextValue {
+    const context = useContext(ClipboardContext);
+    if (!context) {
+        throw new Error("useClipboardContext must be used within a ClipboardProviderComponent");
+    }
+    return context;
+}

package/src/tui/context/ExecutorContext.tsx

@@ -0,0 +1,139 @@
+import {
+    createContext,
+    useContext,
+    useCallback,
+    useState,
+    useRef,
+    type ReactNode,
+} from "react";
+import type { AnyCommand, CommandResult } from "../../core/command.ts";
+import type { OptionSchema, OptionValues } from "../../types/command.ts";
+import { AbortError } from "../../core/command.ts";
+
+/**
+ * Outcome of command execution.
+ */
+export interface ExecutionOutcome {
+    success: boolean;
+    result?: CommandResult;
+    error?: Error;
+    cancelled?: boolean;
+}
+
+/**
+ * Executor context value - provides command execution capabilities to screens.
+ */
+export interface ExecutorContextValue {
+    /** Whether a command is currently executing */
+    isExecuting: boolean;
+    /** Execute a command with the given values */
+    execute: (command: AnyCommand, values: Record<string, unknown>) => Promise<ExecutionOutcome>;
+    /** Cancel the currently executing command */
+    cancel: () => void;
+    /** Reset executor state */
+    reset: () => void;
+}
+
+const ExecutorContext = createContext<ExecutorContextValue | null>(null);
+
+interface ExecutorProviderProps {
+    children: ReactNode;
+}
+
+/**
+ * Provider that gives screens access to command execution capabilities.
+ * Screens can execute commands, check execution state, and cancel execution.
+ */
+export function ExecutorProvider({ children }: ExecutorProviderProps) {
+    const [isExecuting, setIsExecuting] = useState(false);
+    const abortControllerRef = useRef<AbortController | null>(null);
+
+    const execute = useCallback(async (
+        command: AnyCommand,
+        values: Record<string, unknown>
+    ): Promise<ExecutionOutcome> => {
+        // Cancel any previous execution
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+        }
+
+        const abortController = new AbortController();
+        abortControllerRef.current = abortController;
+
+        setIsExecuting(true);
+
+        try {
+            // Build config if command supports it
+            let configOrValues: unknown = values;
+            if (command.buildConfig) {
+                configOrValues = await command.buildConfig(values as OptionValues<OptionSchema>);
+            }
+
+            // Execute the command
+            const result = await command.execute(
+                configOrValues as OptionValues<OptionSchema>,
+                { signal: abortController.signal }
+            );
+
+            // Check if aborted during execution
+            if (abortController.signal.aborted) {
+                return { success: false, cancelled: true };
+            }
+
+            return {
+                success: true,
+                result: result as CommandResult | undefined,
+            };
+        } catch (e) {
+            // Check for cancellation
+            if (
+                abortController.signal.aborted ||
+                e instanceof AbortError ||
+                (e instanceof Error && e.name === "AbortError")
+            ) {
+                return { success: false, cancelled: true };
+            }
+
+            const error = e instanceof Error ? e : new Error(String(e));
+            return { success: false, error };
+        } finally {
+            setIsExecuting(false);
+            if (abortControllerRef.current === abortController) {
+                abortControllerRef.current = null;
+            }
+        }
+    }, []);
+
+    const cancel = useCallback(() => {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+            abortControllerRef.current = null;
+        }
+    }, []);
+
+    const reset = useCallback(() => {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+            abortControllerRef.current = null;
+        }
+        setIsExecuting(false);
+    }, []);
+
+    return (
+        <ExecutorContext.Provider value={{ isExecuting, execute, cancel, reset }}>
+            {children}
+        </ExecutorContext.Provider>
+    );
+}
+
+/**
+ * Access the executor context.
+ * @throws Error if used outside of ExecutorProvider
+ */
+export function useExecutor(): ExecutorContextValue {
+    const context = useContext(ExecutorContext);
+    if (!context) {
+        throw new Error("useExecutor must be used within an ExecutorProvider");
+    }
+    return context;
+}

package/src/tui/context/KeyboardContext.tsx

@@ -2,50 +2,43 @@ import {
     createContext,
     useContext,
     useCallback,
+    useEffect,
+    useMemo,
     useRef,
     type ReactNode,
 } from "react";
-import { useKeyboard } from "@opentui/react";
-import type { KeyEvent } from "@opentui/core";
+import type { KeyboardEvent, KeyHandler } from "../adapters/types.ts";
+import { useRenderer } from "./RendererContext.tsx";
 
-/**
- * Priority levels for keyboard event handlers.
- * Higher priority handlers are called first.
- */
-export enum KeyboardPriority {
-    /** Modal/overlay handlers - highest priority, intercept first */
-    Modal = 100,
-    /** Focused section handlers - handle section-specific keys */
-    Focused = 50,
-    /** Global handlers - app-wide shortcuts, lowest priority */
-    Global = 0,
+function useRendererKeyboard() {
+    return useRenderer().keyboard;
 }
 
-/**
- * Extended keyboard event with custom stop propagation.
- * Use `stopPropagation()` to prevent lower-priority handlers from receiving the event.
- * Use `key.preventDefault()` only when you want to also block OpenTUI primitives.
- */
-export interface KeyboardEvent {
-    /** The underlying OpenTUI KeyEvent */
-    key: KeyEvent;
-    /** Stop propagation to lower-priority handlers in our system */
-    stopPropagation: () => void;
-    /** Whether propagation was stopped */
-    stopped: boolean;
-}
-
-export type KeyboardHandler = (event: KeyboardEvent) => void;
 
-interface RegisteredHandler {
-    id: string;
-    handler: KeyboardHandler;
-    priority: KeyboardPriority;
-}
+export type GlobalKeyHandler = (event: KeyboardEvent) => boolean;
 
 interface KeyboardContextValue {
-    register: (id: string, handler: KeyboardHandler, priority: KeyboardPriority) => void;
-    unregister: (id: string) => void;
+    /**
+     * Set the active handler (only one at a time - the topmost screen/modal).
+     * Returns unregister function.
+     */
+    setActiveHandler: (id: string, handler: KeyHandler) => () => void;
+
+    /**
+     * Set the global handler (processed before active handler).
+     * Only one global handler is supported.
+     * Returns unregister function.
+     */
+    setGlobalHandler: (handler: GlobalKeyHandler) => () => void;
+
+    /**
+     * Temporarily capture input (e.g. while an Ink TextInput is focused).
+     *
+     * While captured, only the global handler can receive events; the active handler
+     * stack is skipped. This prevents screens from doing extra work on every
+     * character typed.
+     */
+    setInputCaptured: (captured: boolean) => void;
 }
 
 const KeyboardContext = createContext<KeyboardContextValue | null>(null);
@@ -55,58 +48,79 @@ interface KeyboardProviderProps {
 }
 
 /**
- * Provider that coordinates all keyboard handlers via a single useKeyboard call.
- * Handlers are invoked in descending priority order (highest first).
- * Propagation stops when a handler calls `stopPropagation()`.
+ * Provider that coordinates keyboard handling with a simple model:
+ * 1. Global handler processes keys first (for app-wide shortcuts like Ctrl+L, Ctrl+Y, Esc)
+ * 2. If not handled, the active handler (topmost screen/modal) gets the key
+ * 
+ * Only ONE active handler is registered at a time - when a modal opens, it becomes
+ * the active handler; when it closes, the previous handler is restored.
  */
 export function KeyboardProvider({ children }: KeyboardProviderProps) {
-    const handlersRef = useRef<RegisteredHandler[]>([]);
-
-    const register = useCallback(
-        (id: string, handler: KeyboardHandler, priority: KeyboardPriority) => {
-            // Remove existing handler with same id (if any)
-            handlersRef.current = handlersRef.current.filter((h) => h.id !== id);
-            // Add new handler
-            handlersRef.current.push({ id, handler, priority });
-            // Sort by priority descending (highest first)
-            handlersRef.current.sort((a, b) => b.priority - a.priority);
-        },
-        []
-    );
+    const keyboard = useRendererKeyboard();
 
-    const unregister = useCallback((id: string) => {
-        handlersRef.current = handlersRef.current.filter((h) => h.id !== id);
+    const handlerStackRef = useRef<{ id: string; handler: KeyHandler }[]>([]);
+    const globalHandlerRef = useRef<GlobalKeyHandler | null>(null);
+    const inputCapturedRef = useRef(false);
+
+    const setActiveHandler = useCallback((id: string, handler: KeyHandler) => {
+        handlerStackRef.current = handlerStackRef.current.filter((h) => h.id !== id);
+        handlerStackRef.current.push({ id, handler });
+
+        return () => {
+            handlerStackRef.current = handlerStackRef.current.filter((h) => h.id !== id);
+        };
     }, []);
 
-    // Single useKeyboard call that dispatches to all registered handlers
-    useKeyboard((key: KeyEvent) => {
-        // Create our wrapper event with custom stop propagation
-        const event: KeyboardEvent = {
-            key,
-            stopped: false,
-            stopPropagation() {
-                this.stopped = true;
-            },
+    const setGlobalHandler = useCallback((handler: GlobalKeyHandler) => {
+        const previous = globalHandlerRef.current;
+        globalHandlerRef.current = handler;
+
+        return () => {
+            globalHandlerRef.current = previous;
         };
+    }, []);
+
+    useEffect(() => {
+        const unregister = keyboard.setGlobalHandler((event: KeyboardEvent) => {
+            if (globalHandlerRef.current?.(event)) {
+                return true;
+            }
 
-        for (const { handler } of handlersRef.current) {
-            // Stop if our propagation was stopped or if preventDefault was called
-            if (event.stopped || key.defaultPrevented) {
-                break;
+            if (inputCapturedRef.current) {
+                return false;
             }
-            handler(event);
-        }
-    });
+
+            const activeHandler = handlerStackRef.current[handlerStackRef.current.length - 1];
+            if (activeHandler) {
+                return activeHandler.handler(event);
+            }
+
+            return false;
+        });
+
+        return () => {
+            unregister();
+        };
+    }, [keyboard]);
+
+    const setInputCaptured = useCallback((captured: boolean) => {
+        inputCapturedRef.current = captured;
+    }, []);
+
+    const value = useMemo<KeyboardContextValue>(
+        () => ({ setActiveHandler, setGlobalHandler, setInputCaptured }),
+        [setActiveHandler, setGlobalHandler, setInputCaptured]
+    );
 
     return (
-        <KeyboardContext.Provider value={{ register, unregister }}>
+        <KeyboardContext.Provider value={value}>
             {children}
         </KeyboardContext.Provider>
     );
 }
 
 /**
- * Access the keyboard context for handler registration.
+ * Access the keyboard context.
  * @throws Error if used outside of KeyboardProvider
  */
 export function useKeyboardContext(): KeyboardContextValue {