@pablozaiden/terminatui 0.2.0 → 0.3.0-beta-1

package/src/tui/TuiApplication.tsx

@@ -1,44 +1,28 @@
-import { createCliRenderer } from "@opentui/core";
-import { createRoot } from "@opentui/react";
-import { Application, type ApplicationConfig } from "../core/application.ts";
+import { createRenderer } from "./adapters/factory.ts";
+import { RendererProvider } from "./context/RendererContext.tsx";
+import { Application, type ModeOptions, type ApplicationConfig, type TuiModeOptions } from "../core/application.ts";
 import type { AnyCommand } from "../core/command.ts";
-import { TuiApp } from "./TuiApp.tsx";
-import { Theme } from "./theme.ts";
-import type { LogSource, LogEvent } from "./hooks/index.ts";
-import { LogLevel as TuiLogLevel } from "./hooks/index.ts";
-import { LogLevel as CoreLogLevel, type LogEvent as CoreLogEvent } from "../core/logger.ts";
-import type { FieldConfig } from "./components/types.ts";
+import { TuiRoot } from "./TuiRoot.tsx";
+import { LogLevel } from "../core/logger.ts";
 import { createSettingsCommand } from "../builtins/settings.ts";
+import { KNOWN_COMMANDS } from "../core/knownCommands.ts";
 import { loadPersistedParameters } from "./utils/parameterPersistence.ts";
-
-/**
- * Custom field configuration for TUI forms.
- * Allows adding application-specific fields that aren't part of command options.
- */
-export interface CustomField extends FieldConfig {
-    /** Default value for the field */
-    default?: unknown;
-    /** Called when the field value changes */
-    onChange?: (value: unknown, allValues: Record<string, unknown>) => void;
-}
+import { AppContext } from "../core/context.ts";
+import { registerAllModals, registerAllScreens } from "./registry.ts";
 
 /**
  * Extended configuration for TUI-enabled applications.
  */
 export interface TuiApplicationConfig extends ApplicationConfig {
-    /** Enable interactive TUI mode */
+    /** Enable TUI mode (when renderer is opentui/ink/default) */
     enableTui?: boolean;
-    /** Log source for TUI log panel */
-    logSource?: LogSource;
-    /** Custom fields to add to the TUI form */
-    customFields?: CustomField[];
 }
 
 /**
  * Application class with built-in TUI support.
  * 
  * Extends the base Application to provide automatic TUI rendering
- * when running interactively or with the --interactive flag.
+ * when running with `--renderer` set to a TUI renderer (or default).
  * 
  * @example
  * ```typescript
@@ -53,19 +37,15 @@ export interface TuiApplicationConfig extends ApplicationConfig {
  *   }
  * }
  * 
- * await new MyApp().run(process.argv.slice(2));
+ * await new MyApp().run();
  * ```
  */
 export class TuiApplication extends Application {
     private readonly enableTui: boolean;
-    private readonly logSource?: LogSource;
-    private readonly customFields?: CustomField[];
 
     constructor(config: TuiApplicationConfig) {
         super(config);
         this.enableTui = config.enableTui ?? true;
-        this.logSource = config.logSource;
-        this.customFields = config.customFields;
     }
 
     /**
@@ -74,130 +54,92 @@ export class TuiApplication extends Application {
      * If no arguments are provided and TUI is enabled, launches the TUI.
      * Otherwise, runs in CLI mode.
      */
-    override async run(argv: string[] = process.argv.slice(2)): Promise<void> {
-        // Check for --interactive or -i flag
-        const hasInteractiveFlag = argv.includes("--interactive") || argv.includes("-i");
-        const filteredArgs = argv.filter((arg) => arg !== "--interactive" && arg !== "-i");
-
-        // Launch TUI if:
-        // 1. Explicit --interactive flag, or
-        // 2. No args and TUI is enabled
-        if (hasInteractiveFlag || (filteredArgs.length === 0 && this.enableTui)) {
-            await this.runTui();
+    override async run(): Promise<void> {
+        return this.runFromArgs(Bun.argv.slice(2));
+    }
+
+    override async runFromArgs(argv: string[]): Promise<void> {
+        const { globalOptions } = this.parseGlobalOptions(argv);
+
+        const mode = globalOptions["mode"] as ModeOptions ?? "default";
+        const resolvedMode = mode === "default" ? this.defaultMode : mode;
+
+        if (resolvedMode === "cli") {
+            await super.runFromArgs(argv);
+            return;
+        }
+
+        if (!this.enableTui) {
+            throw new Error("TUI mode is disabled for this application");
+        }
+
+        if (resolvedMode === "opentui" || resolvedMode === "ink") {
+            this.applyGlobalOptions(globalOptions);
+
+            await this.runTui(resolvedMode);
             return;
         }
 
-        // Otherwise run CLI mode
-        await super.run(filteredArgs);
+        throw new Error(`Unknown mode '${resolvedMode}'`);
     }
 
     /**
-     * Launch the interactive TUI.
+     * Launch the TUI.
      */
-    async runTui(): Promise<void> {
+    async runTui(rendererType: TuiModeOptions): Promise<void> {
+        await registerAllScreens();
+        await registerAllModals();
+        
         // Get all commands that support TUI or have options
         const commands = this.getExecutableCommands();
 
         // Load and apply persisted settings (log-level, detailed-logs)
         this.loadPersistedSettings();
 
-        // Enable TUI mode on the logger so logs go to the event emitter
-        // instead of stderr (which would corrupt the TUI display)
-        this.context.logger.setTuiMode(true);
-
-        // Create a log source from the logger if one wasn't provided
-        const logSource = this.logSource ?? this.createLogSourceFromLogger();
-
-        const renderer = await createCliRenderer({
+        const renderer = await createRenderer(rendererType, {
             useAlternateScreen: true,
-            useConsole: false,
-            exitOnCtrlC: true,
-            backgroundColor: Theme.background,
-            useMouse: true,
-            enableMouseMovement: true,
-            openConsoleOnError: false,
         });
 
         return new Promise<void>((resolve) => {
             const handleExit = () => {
-                // Restore CLI mode on exit
-                this.context.logger.setTuiMode(false);
                 renderer.destroy();
                 resolve();
             };
 
-            const root = createRoot(renderer);
-            root.render(
-                <TuiApp
-                    name={this.name}
-                    displayName={this.displayName}
-                    version={this.version}
-                    commands={commands}
-                    context={this.context}
-                    logSource={logSource}
-                    customFields={this.customFields}
-                    onExit={handleExit}
-                />
+            renderer.render(
+                <RendererProvider renderer={renderer}>
+                    <TuiRoot
+                        name={this.name}
+                        displayName={this.displayName}
+                        version={this.version}
+                        commands={commands}
+                        onExit={handleExit}
+                    />
+                </RendererProvider>
             );
-
-            renderer.start();
         });
     }
 
-    /**
-     * Create a LogSource adapter from the application logger.
-     */
-    private createLogSourceFromLogger(): LogSource {
-        const logger = this.context.logger;
-        
-        // Map core log levels to TUI log levels
-        const mapLogLevel = (level: CoreLogLevel): TuiLogLevel => {
-            switch (level) {
-                case CoreLogLevel.Silly: return TuiLogLevel.Silly;
-                case CoreLogLevel.Trace: return TuiLogLevel.Trace;
-                case CoreLogLevel.Debug: return TuiLogLevel.Debug;
-                case CoreLogLevel.Info: return TuiLogLevel.Info;
-                case CoreLogLevel.Warn: return TuiLogLevel.Warn;
-                case CoreLogLevel.Error: return TuiLogLevel.Error;
-                case CoreLogLevel.Fatal: return TuiLogLevel.Fatal;
-                default: return TuiLogLevel.Info;
-            }
-        };
-
-        return {
-            subscribe: (callback: (event: LogEvent) => void) => {
-                return logger.onLogEvent((coreEvent: CoreLogEvent) => {
-                    callback({
-                        level: mapLogLevel(coreEvent.level),
-                        message: coreEvent.message,
-                    });
-                });
-            },
-        };
-    }
-
     /**
      * Load persisted settings and apply them to the logger.
      * Settings are saved when the user uses the Settings command.
      */
     private loadPersistedSettings(): void {
         try {
-            const settings = loadPersistedParameters(this.name, "settings");
-            
+            const settings = loadPersistedParameters(this.name, KNOWN_COMMANDS.settings);
+
             // Apply log-level if set
             if (settings["log-level"]) {
                 const levelStr = String(settings["log-level"]).toLowerCase();
-                const level = Object.entries(CoreLogLevel).find(
-                    ([key, val]) => typeof val === "number" && key.toLowerCase() === levelStr
-                )?.[1] as CoreLogLevel | undefined;
+                const level = LogLevel[levelStr as keyof typeof LogLevel];
                 if (level !== undefined) {
-                    this.context.logger.setMinLevel(level);
+                    AppContext.current.logger.setMinLevel(level);
                 }
             }
-            
+
             // Apply detailed-logs if set
             if (settings["detailed-logs"] !== undefined) {
-                this.context.logger.setDetailed(Boolean(settings["detailed-logs"]));
+                AppContext.current.logger.setDetailed(Boolean(settings["detailed-logs"]));
             }
         } catch {
             // Silently ignore errors loading settings
@@ -212,15 +154,16 @@ export class TuiApplication extends Application {
         const userCommands = this.registry
             .list()
             .filter((cmd) => {
-                // Exclude version and help from main menu
-                if (cmd.name === "version" || cmd.name === "help") {
+                // Exclude internal/built-in commands from the TUI main menu
+                if (cmd.tuiHidden) {
                     return false;
                 }
-                // Exclude settings if already defined by user (they shouldn't)
-                if (cmd.name === "settings") {
+
+                // Extra safety: keep known internal command names out
+                if (cmd.name === KNOWN_COMMANDS.help || cmd.name === KNOWN_COMMANDS.version || cmd.name === KNOWN_COMMANDS.settings) {
                     return false;
                 }
-                // Include commands that have options or execute methods
+
                 return true;
             });
 

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}</>;
+}