@pablozaiden/terminatui 0.1.2 → 0.3.0-beta-1

package/src/tui/TuiRoot.tsx

@@ -0,0 +1,135 @@
+import type { AnyCommand } from "../core/command.ts";
+import { useClipboard } from "./hooks/useClipboard.ts";
+import { KeyboardProvider } from "./context/KeyboardContext.tsx";
+import { useGlobalKeyHandler } from "./hooks/useGlobalKeyHandler.ts";
+import { LogsProvider } from "./context/LogsContext.tsx";
+import { NavigationProvider, useNavigation } from "./context/NavigationContext.tsx";
+import { ClipboardProviderComponent, useClipboardContext } from "./context/ClipboardContext.tsx";
+import { TuiAppContextProvider, useTuiApp } from "./context/TuiAppContext.tsx";
+import { ExecutorProvider, useExecutor } from "./context/ExecutorContext.tsx";
+import { Header } from "./components/Header.tsx";
+import { StatusBar } from "./components/StatusBar.tsx";
+import { Container } from "./semantic/Container.tsx";
+import { Panel } from "./semantic/Panel.tsx";
+import { getScreen, getModal } from "./registry.ts";
+import { CommandSelectScreen, type CommandSelectParams } from "./screens/CommandSelectScreen.tsx";
+
+interface TuiRootProps {
+    name: string;
+    displayName?: string;
+    version: string;
+    commands: AnyCommand[];
+    onExit: () => void;
+}
+
+export function TuiRoot({ name, displayName, version, commands, onExit }: TuiRootProps) {
+    return (
+        <KeyboardProvider>
+            <ClipboardProviderComponent>
+                <TuiAppContextProvider
+                    name={name}
+                    displayName={displayName}
+                    version={version}
+                    commands={commands}
+                    onExit={onExit}
+                >
+                    <LogsProvider>
+                        <ExecutorProvider>
+                            <NavigationProvider<CommandSelectParams>
+                                initialScreen={{ route: CommandSelectScreen.Id, params: { commandPath: [] } }}
+                                onExit={onExit}
+                            >
+                                <TuiRootContent />
+                            </NavigationProvider>
+                        </ExecutorProvider>
+                    </LogsProvider>
+                </TuiAppContextProvider>
+            </ClipboardProviderComponent>
+        </KeyboardProvider>
+    );
+}
+
+/**
+ * Main TUI content - renders current screen, modals, and handles global shortcuts.
+ * This component knows NOTHING about specific screens or their logic.
+ */
+function TuiRootContent() {
+    const { displayName, name, version } = useTuiApp();
+    const navigation = useNavigation();
+    const executor = useExecutor();
+    const clipboard = useClipboardContext();
+    const { copyWithMessage, lastAction } = useClipboard();
+    
+
+
+    // Global keyboard handler - only truly global shortcuts
+    useGlobalKeyHandler((key) => {
+        // Esc - back/close (delegates to navigation which delegates to screen)
+        if (key.name === "escape") {
+            navigation.goBack();
+            return true;
+        }
+
+        // Ctrl+Y - copy
+        if (key.ctrl && key.name === "y") {
+            const content = clipboard.getContent();
+            if (content) {
+                copyWithMessage(content.content, content.label);
+            }
+            return true;
+        }
+
+        // Ctrl+L - toggle logs modal
+        if (key.ctrl && key.name === "l") {
+            const isLogsOpen = navigation.modalStack.some((m) => m.id === "logs");
+            if (isLogsOpen) {
+                navigation.closeModal();
+            } else {
+                 navigation.openModal("logs");
+
+            }
+            return true;
+        }
+
+        return false;
+    });
+
+    // Get current screen component from registry
+    const ScreenComponent = getScreen(navigation.current.route);
+    
+    // Get breadcrumb from current screen params (if available)
+    const params = navigation.current.params as { commandPath?: string[] } | undefined;
+    const breadcrumb = params?.commandPath;
+
+    return (
+        <Panel flexDirection="column" flex={1} padding={1} border={false}>
+            <Container flexDirection="column" flex={1}>
+                <Header name={displayName ?? name} version={version} breadcrumb={breadcrumb} />
+
+            <Container flexDirection="column" flex={1}>
+                {ScreenComponent ? <ScreenComponent /> : null}
+            </Container>
+
+            <StatusBar
+                status={lastAction || (executor.isExecuting ? "Executing..." : "Ready")}
+                isRunning={executor.isExecuting}
+                shortcuts="Esc Back • Ctrl+Y Copy • Ctrl+L Logs"
+            />
+
+            {/* Render modals from registry */}
+            {navigation.modalStack.map((modal, idx) => {
+                const ModalComponent = getModal(modal.id);
+                if (!ModalComponent) return null;
+
+                return (
+                    <ModalComponent
+                        key={`modal-${modal.id}-${idx}`}
+                        params={modal.params}
+                        onClose={() => navigation.closeModal()}
+                    />
+                );
+            })}
+            </Container>
+        </Panel>
+    );
+}

package/src/tui/adapters/factory.ts

@@ -0,0 +1,19 @@
+import type { Renderer, RendererConfig } from "./types.ts";
+import { OpenTuiRenderer } from "./opentui/OpenTuiRenderer.tsx";
+import { InkRenderer } from "./ink/InkRenderer.tsx";
+import type { TuiModeOptions } from "../../core/application.ts";
+
+export async function createRenderer(type: TuiModeOptions, config: RendererConfig): Promise<Renderer> {
+    switch (type) {
+        case "opentui": {
+            const renderer = new OpenTuiRenderer(config);
+            await renderer.initialize();
+            return renderer;
+        }
+        case "ink": {
+            const renderer = new InkRenderer(config);
+            await renderer.initialize();
+            return renderer;
+        }
+    }
+}

package/src/tui/adapters/ink/InkRenderer.tsx

@@ -0,0 +1,135 @@
+import { render } from "ink";
+import type { ReactNode } from "react";
+import { useLayoutEffect } from "react";
+
+import type { Renderer, RendererConfig } from "../types.ts";
+import { useInkKeyboardAdapter } from "./keyboard.ts";
+
+import { Button } from "./components/Button.tsx";
+import { Container } from "./components/Container.tsx";
+import { Field } from "./components/Field.tsx";
+import { Label } from "./components/Label.tsx";
+import { MenuButton } from "./components/MenuButton.tsx";
+import { MenuItem } from "./components/MenuItem.tsx";
+import { Overlay } from "./components/Overlay.tsx";
+import { Panel } from "./components/Panel.tsx";
+import { ScrollView } from "./components/ScrollView.tsx";
+import { Select } from "./components/Select.tsx";
+import { Spacer } from "./components/Spacer.tsx";
+import { Spinner } from "./components/Spinner.tsx";
+import { TextInput } from "./components/TextInput.tsx";
+import { Value } from "./components/Value.tsx";
+import { Code } from "./components/Code.tsx";
+import { CodeHighlight } from "./components/CodeHighlight.tsx";
+
+export class InkRenderer implements Renderer {
+    private instance: ReturnType<typeof render> | null = null;
+    private activeKeyboardAdapter: Renderer["keyboard"] | null = null;
+
+    public keyboard: Renderer["keyboard"] = {
+        setActiveHandler: (id, handler) => {
+            return this.activeKeyboardAdapter?.setActiveHandler(id, handler) ?? (() => {});
+        },
+        setGlobalHandler: (handler) => {
+            return this.activeKeyboardAdapter?.setGlobalHandler(handler) ?? (() => {});
+        },
+    };
+
+    public components: Renderer["components"] = {
+        Field,
+        Button,
+        MenuButton,
+        MenuItem,
+
+        Container,
+        Panel,
+        ScrollView,
+
+        Overlay,
+        Spacer,
+        Spinner,
+
+        Label,
+        Value,
+        Code,
+        CodeHighlight,
+
+        Select,
+        TextInput,
+    };
+
+    constructor(_config: RendererConfig) {}
+
+    async initialize(): Promise<void> {
+        return;
+    }
+
+    render(node: ReactNode): void {
+        if (process.stdin.isTTY) {
+            try {
+                process.stdin.setRawMode(true);
+            } catch {
+                // Ignore.
+            }
+            if (process.stdin.isPaused()) {
+                process.stdin.resume();
+            }
+        }
+
+        if (this.instance) {
+            this.instance.rerender(
+                <KeyboardBridge
+                    node={node}
+                    onReady={(keyboard) => {
+                        this.activeKeyboardAdapter = keyboard;
+                    }}
+                />
+            );
+            return;
+        }
+
+        this.instance = render(
+            <KeyboardBridge
+                node={node}
+                onReady={(keyboard) => {
+                    this.activeKeyboardAdapter = keyboard;
+                }}
+            />,
+            {
+                exitOnCtrlC: true,
+                patchConsole: false,
+                stdout: process.stdout,
+                stdin: process.stdin,
+            }
+        );
+    }
+
+    destroy(): void {
+        this.instance?.unmount();
+        this.instance = null;
+
+        if (process.stdin.isTTY) {
+            try {
+                process.stdin.setRawMode(false);
+            } catch {
+                // Ignore.
+            }
+        }
+    }
+}
+
+function KeyboardBridge({
+    node,
+    onReady,
+}: {
+    node: ReactNode;
+    onReady: (keyboard: ReturnType<typeof useInkKeyboardAdapter>) => void;
+}) {
+    const keyboard = useInkKeyboardAdapter();
+
+    useLayoutEffect(() => {
+        onReady(keyboard);
+    }, [onReady, keyboard]);
+
+    return node;
+}

package/src/tui/adapters/ink/components/Button.tsx

@@ -0,0 +1,12 @@
+import { Text } from "ink";
+import type { ButtonProps } from "../../../semantic/types.ts";
+
+export function Button({ label, selected }: ButtonProps) {
+    const prefix = selected ? "> " : "  ";
+    return (
+        <Text>
+            {prefix}
+            {label}
+        </Text>
+    );
+}

package/src/tui/adapters/ink/components/Code.tsx

@@ -0,0 +1,6 @@
+import { Text } from "ink";
+import type { CodeProps } from "../../../semantic/types.ts";
+
+export function Code({ children }: CodeProps) {
+    return <Text color="gray">{children}</Text>;
+}

package/src/tui/adapters/ink/components/CodeHighlight.tsx

@@ -0,0 +1,6 @@
+import { Text } from "ink";
+import type { CodeHighlightProps } from "../../../semantic/types.ts";
+
+export function CodeHighlight({ tokens }: CodeHighlightProps) {
+    return <Text>{tokens.map((t) => t.value).join("")}</Text>;
+}

package/src/tui/adapters/ink/components/Container.tsx

@@ -0,0 +1,5 @@
+import type { ContainerProps } from "../../../semantic/types.ts";
+
+export function Container({ children }: ContainerProps) {
+    return <>{children}</>;
+}

package/src/tui/adapters/ink/components/Field.tsx

@@ -0,0 +1,12 @@
+import { Text } from "ink";
+import type { FieldProps } from "../../../semantic/types.ts";
+
+export function Field({ label, value, selected }: FieldProps) {
+    const prefix = selected ? "> " : "  ";
+    return (
+        <Text>
+            {prefix}
+            {label}: {value as any}
+        </Text>
+    );
+}

package/src/tui/adapters/ink/components/Label.tsx

@@ -0,0 +1,24 @@
+import { Text } from "ink";
+import type { LabelProps } from "../../../semantic/types.ts";
+import { toPlainText } from "../utils.ts";
+
+const COLOR_MAP: Record<string, string> = {
+    text: "white",
+    mutedText: "gray",
+    primary: "cyan",
+    success: "green",
+    warning: "yellow",
+    error: "red",
+    value: "magenta",
+    code: "gray",
+};
+
+export function Label({ color, bold, italic, children }: LabelProps) {
+    const text = toPlainText(children);
+    const inkColor = color ? (COLOR_MAP[color] ?? color) : undefined;
+    return (
+        <Text color={inkColor} bold={bold} italic={italic}>
+            {text}
+        </Text>
+    );
+}

package/src/tui/adapters/ink/components/MenuButton.tsx

@@ -0,0 +1,12 @@
+import { Text } from "ink";
+import type { MenuButtonProps } from "../../../semantic/types.ts";
+
+export function MenuButton({ label, selected }: MenuButtonProps) {
+    const prefix = selected ? "> " : "  ";
+    return (
+        <Text>
+            {prefix}
+            {label}
+        </Text>
+    );
+}

package/src/tui/adapters/ink/components/MenuItem.tsx

@@ -0,0 +1,17 @@
+import { Text } from "ink";
+import type { MenuItemProps } from "../../../semantic/types.ts";
+
+export function MenuItem({ label, description, suffix, selected }: MenuItemProps) {
+    const prefix = selected ? "> " : "  ";
+    const desc = description ? ` — ${description}` : "";
+    const suffixText = suffix ? ` ${suffix}` : "";
+
+    return (
+        <Text>
+            {prefix}
+            {label}
+            {desc}
+            {suffixText}
+        </Text>
+    );
+}

package/src/tui/adapters/ink/components/Overlay.tsx

@@ -0,0 +1,5 @@
+import type { OverlayProps } from "../../../semantic/types.ts";
+
+export function Overlay({ children }: OverlayProps) {
+    return <>{children}</>;
+}

package/src/tui/adapters/ink/components/Panel.tsx

@@ -0,0 +1,15 @@
+import { Text } from "ink";
+import type { PanelProps } from "../../../semantic/types.ts";
+
+export function Panel({ title, children }: PanelProps) {
+    return (
+        <>
+            {title ? (
+                <Text bold>
+                    {title}
+                </Text>
+            ) : null}
+            {children}
+        </>
+    );
+}

package/src/tui/adapters/ink/components/ScrollView.tsx

@@ -0,0 +1,5 @@
+import type { ScrollViewProps } from "../../../semantic/types.ts";
+
+export function ScrollView({ children }: ScrollViewProps) {
+    return <>{children}</>;
+}

package/src/tui/adapters/ink/components/Select.tsx

@@ -0,0 +1,44 @@
+import InkSelectInput from "ink-select-input";
+import { Text } from "ink";
+import { useMemo } from "react";
+import type { SelectProps } from "../../../semantic/types.ts";
+
+type Item = { label: string; value: string };
+
+type ItemComponentProps = {
+    isSelected?: boolean;
+    label: string;
+};
+
+function ItemComponent({ label }: ItemComponentProps) {
+    // ink-select-input already provides its own selection marker.
+    // Keep this as plain text to avoid double-marking.
+    return <Text>{label}</Text>;
+}
+
+export function Select({ options, value, focused, onChange, onSubmit }: SelectProps) {
+    const items = useMemo(
+        () => options.map((o) => ({ label: o.label, value: o.value }) as Item),
+        [options]
+    );
+
+    const initialIndex = Math.max(
+        0,
+        options.findIndex((o) => o.value === value)
+    );
+
+    // Force remount so ink-select-input respects updated initialIndex.
+    const key = `${value}:${options.length}`;
+
+    return (
+        <InkSelectInput
+            key={key}
+            items={items}
+            isFocused={focused}
+            initialIndex={initialIndex}
+            itemComponent={ItemComponent}
+            onHighlight={(item) => onChange(item.value)}
+            onSelect={() => onSubmit?.()}
+        />
+    );
+}

package/src/tui/adapters/ink/components/Spacer.tsx

@@ -0,0 +1,15 @@
+import { Text } from "ink";
+import type { SpacerProps } from "../../../semantic/types.ts";
+
+export function Spacer({ size, axis }: SpacerProps) {
+    if (axis === "horizontal") {
+        return <Text>{" ".repeat(size)}</Text>;
+    }
+    return (
+        <>
+            {Array.from({ length: size }).map((_, idx) => (
+                <Text key={idx} />
+            ))}
+        </>
+    );
+}

package/src/tui/adapters/ink/components/Spinner.tsx

@@ -0,0 +1,5 @@
+import type { SpinnerProps } from "../../../semantic/types.ts";
+
+export function Spinner(_: SpinnerProps) {
+    return null;
+}

package/src/tui/adapters/ink/components/TextInput.tsx

@@ -0,0 +1,22 @@
+import InkTextInput from "ink-text-input";
+import { Text } from "ink";
+import type { TextInputProps } from "../../../semantic/types.ts";
+
+export function TextInput({ value, placeholder, focused, onChange, onSubmit }: TextInputProps) {
+    // ink-text-input renders nothing if you pass empty placeholder; provide a minimal hint.
+    const hint = placeholder ?? "";
+
+    return (
+        <Text>
+            <InkTextInput
+                value={value}
+                placeholder={hint}
+                focus={focused}
+                onChange={onChange}
+                onSubmit={() => {
+                    onSubmit?.();
+                }}
+            />
+        </Text>
+    );
+}

package/src/tui/adapters/ink/components/Value.tsx

@@ -0,0 +1,7 @@
+import { Text } from "ink";
+import type { ValueProps } from "../../../semantic/types.ts";
+import { toPlainText } from "../utils.ts";
+
+export function Value({ children }: ValueProps) {
+    return <Text color="magenta">{toPlainText(children)}</Text>;
+}

package/src/tui/adapters/ink/keyboard.ts

@@ -0,0 +1,97 @@
+import { useInput, type Key } from "ink";
+import { useCallback, useMemo, useRef } from "react";
+import type { KeyboardAdapter, KeyboardEvent, KeyHandler } from "../types.ts";
+
+function normalizeKeyName(input: string, key: Key): KeyboardEvent {
+    const event: KeyboardEvent = {
+        name: input,
+        sequence: input,
+        ctrl: Boolean(key.ctrl),
+        shift: Boolean(key.shift),
+        meta: Boolean(key.meta),
+    };
+
+    if (key.return) {
+        event.name = "return";
+    } else if (key.escape) {
+        event.name = "escape";
+    } else if (key.backspace) {
+        event.name = "backspace";
+    } else if (key.delete) {
+        // Terminals often send escape sequences for “Delete” that some libraries
+        // expose as `delete`, others as `del`. Keep it normalized.
+        event.name = "delete";
+    } else if (key.tab) {
+        event.name = "tab";
+    } else if (key.upArrow) {
+        event.name = "up";
+    } else if (key.downArrow) {
+        event.name = "down";
+    } else if (key.leftArrow) {
+        event.name = "left";
+    } else if (key.rightArrow) {
+        event.name = "right";
+    } else if (key.pageUp) {
+        event.name = "pageup";
+    } else if (key.pageDown) {
+        event.name = "pagedown";
+    } else if (key.home) {
+        event.name = "home";
+    } else if (key.end) {
+        event.name = "end";
+    }
+
+    // Normalize enter -> return (some code checks either)
+    if (event.name === "enter") {
+        event.name = "return";
+    }
+
+    return event;
+}
+
+export function useInkKeyboardAdapter(): KeyboardAdapter {
+    const handlerStackRef = useRef<{ id: string; handler: KeyHandler }[]>([]);
+    const globalHandlerRef = useRef<KeyHandler | null>(null);
+
+    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);
+        };
+    }, []);
+
+    const setGlobalHandler = useCallback((handler: KeyHandler) => {
+        const previous = globalHandlerRef.current;
+        globalHandlerRef.current = handler;
+
+        return () => {
+            globalHandlerRef.current = previous;
+        };
+    }, []);
+
+    useInput((input, key) => {
+        const event = normalizeKeyName(input, key);
+
+        if (globalHandlerRef.current) {
+            const handled = globalHandlerRef.current(event);
+            if (handled) {
+                return;
+            }
+        }
+
+        const activeHandler = handlerStackRef.current[handlerStackRef.current.length - 1];
+        if (activeHandler) {
+            activeHandler.handler(event);
+        }
+    });
+
+    return useMemo(
+        () => ({
+            setActiveHandler,
+            setGlobalHandler,
+        }),
+        [setActiveHandler, setGlobalHandler]
+    );
+}

package/src/tui/adapters/ink/utils.ts

@@ -0,0 +1,16 @@
+export function toPlainText(node: unknown): string {
+    if (node === null || node === undefined || typeof node === "boolean") {
+        return "";
+    }
+    if (typeof node === "string" || typeof node === "number") {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map(toPlainText).join("");
+    }
+    if (typeof node === "object" && node && "props" in node) {
+        const anyNode = node as any;
+        return toPlainText(anyNode.props?.children);
+    }
+    return "";
+}