@pablozaiden/terminatui 0.3.0-beta-1 → 0.4.0

package/src/tui/adapters/opentui/OpenTuiRenderer.tsx

@@ -1,27 +1,178 @@
 import { createCliRenderer, type CliRenderer } from "@opentui/core";
 import { createRoot, type Root } from "@opentui/react";
-import { useLayoutEffect, type ReactNode } from "react";
+import { useEffect, useLayoutEffect, type ReactNode } from "react";
 import { SemanticColors } from "../../theme.ts";
-import type { Renderer, RendererConfig } from "../types.ts";
+import type { KeyboardEvent, Renderer, RendererConfig } from "../types.ts";
+import { SemanticOpenTuiRenderer } from "./SemanticOpenTuiRenderer.tsx";
 import { useOpenTuiKeyboardAdapter } from "./keyboard.ts";
-import { Button } from "./components/Button.tsx";
-import { Code } from "./components/Code.tsx";
-import { CodeHighlight } from "./components/CodeHighlight.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 { Spacer } from "./components/Spacer.tsx";
-import { Spinner } from "./components/Spinner.tsx";
-import { Panel } from "./components/Panel.tsx";
-import { ScrollView as OpenTuiScrollView } from "./components/ScrollView.tsx";
-import { Select } from "./components/Select.tsx";
-import { TextInput } from "./components/TextInput.tsx";
-import { Value } from "./components/Value.tsx";
+
+import { copyToTerminalClipboard } from "../shared/TerminalClipboard.ts";
+import { useTuiDriver } from "../../driver/context/TuiDriverContext.tsx";
+import type { TuiAction } from "../../actions.ts";
+
+function OpenTuiKeyboardHandler({
+    dispatchAction,
+    getScreenKeyHandler,
+    keyboard,
+    onCopyToastChange,
+}: {
+    dispatchAction: (action: TuiAction) => void;
+    getScreenKeyHandler: () => ((event: KeyboardEvent) => boolean) | null;
+    keyboard: Renderer["keyboard"];
+    onCopyToastChange?: (toast: string | null) => void;
+}) {
+    const driver = useTuiDriver();
+
+    useEffect(() => {
+        const cleanup = keyboard.setGlobalHandler((event) => {
+            if (event.name === "escape") {
+                dispatchAction({ type: "nav.back" });
+                return true;
+            }
+
+            if (event.ctrl && event.name === "y") {
+                const payload = driver.getActiveCopyPayload();
+                if (payload) {
+                    // Show toast immediately for instant feedback
+                    onCopyToastChange?.(`Copied ${payload.label}`);
+                    void copyToTerminalClipboard(payload.content).then((success) => {
+                        if (!success) {
+                            onCopyToastChange?.("Copy failed");
+                        }
+                        setTimeout(() => onCopyToastChange?.(null), 1500);
+                    });
+                }
+                return true;
+            }
+
+            if (event.ctrl && event.name === "l") {
+                dispatchAction({ type: "logs.open" });
+                return true;
+            }
+
+            const screenHandler = getScreenKeyHandler();
+            if (screenHandler) {
+                return screenHandler(event);
+            }
+
+            return false;
+        });
+
+        return cleanup;
+    }, [dispatchAction, getScreenKeyHandler, keyboard, driver, onCopyToastChange]);
+
+    return null;
+}
 
 export class OpenTuiRenderer implements Renderer {
+    private readonly semanticRenderer = new SemanticOpenTuiRenderer();
+
+    private semanticScreenKeyHandler: ((event: KeyboardEvent) => boolean) | null = null;
+
+    public renderSemanticAppShell: Renderer["renderSemanticAppShell"] = (props) => {
+        return this.semanticRenderer.renderAppShell(props);
+    };
+    public renderSemanticCommandBrowserScreen: Renderer["renderSemanticCommandBrowserScreen"] = (props) => {
+        this.semanticScreenKeyHandler = (event) => {
+            if (event.ctrl && event.name === "l") {
+                // Adapter-owned logs open — let global handler process it.
+                return false;
+            }
+
+            if (event.name === "up") {
+                props.onSelectCommand(props.selectedCommandIndex - 1);
+                return true;
+            }
+
+            if (event.name === "down") {
+                props.onSelectCommand(props.selectedCommandIndex + 1);
+                return true;
+            }
+
+            if (event.name === "return") {
+                props.onRunSelected();
+                return true;
+            }
+
+            return false;
+        };
+
+        return this.semanticRenderer.renderCommandBrowserScreen(props);
+    };
+
+    public renderSemanticConfigScreen: Renderer["renderSemanticConfigScreen"] = (props) => {
+        this.semanticScreenKeyHandler = (event) => {
+            if (event.ctrl && event.name === "l") {
+                // Adapter-owned logs open — let global handler process it.
+                return false;
+            }
+
+            if (event.name === "up") {
+                props.onSelectionChange(props.selectedFieldIndex - 1);
+                return true;
+            }
+
+            if (event.name === "down") {
+                props.onSelectionChange(props.selectedFieldIndex + 1);
+                return true;
+            }
+
+            if (event.name === "return") {
+                const fieldConfig = props.fieldConfigs[props.selectedFieldIndex];
+                if (fieldConfig) {
+                    props.onEditField(fieldConfig.key);
+                } else {
+                    props.onRun();
+                }
+                return true;
+            }
+
+            return false;
+        };
+
+        return this.semanticRenderer.renderConfigScreen(props);
+    };
+
+    public renderSemanticRunningScreen: Renderer["renderSemanticRunningScreen"] = (props) => {
+        this.semanticScreenKeyHandler = null;
+        return this.semanticRenderer.renderRunningScreen(props);
+    };
+
+    public renderSemanticLogsScreen: Renderer["renderSemanticLogsScreen"] = (props) => {
+        this.semanticScreenKeyHandler = (event) => {
+            if (event.name === "return") {
+                props.onClose();
+                return true;
+            }
+            return false;
+        };
+
+        return this.semanticRenderer.renderLogsScreen(props);
+    };
+
+    public renderSemanticEditorScreen: Renderer["renderSemanticEditorScreen"] = (props) => {
+        this.semanticScreenKeyHandler = (event) => {
+            if (event.name === "return") {
+                props.onSubmit?.();
+                return true;
+            }
+            return false;
+        };
+
+        return this.semanticRenderer.renderEditorScreen(props);
+    };
+
+    public renderKeyboardHandler: Renderer["renderKeyboardHandler"] = ({ dispatchAction, onCopyToastChange }) => {
+        return (
+            <OpenTuiKeyboardHandlerWrapper
+                dispatchAction={dispatchAction}
+                getScreenKeyHandler={() => this.semanticScreenKeyHandler}
+                keyboard={this.keyboard}
+                onCopyToastChange={onCopyToastChange}
+            />
+        );
+    };
+
     private renderer: CliRenderer | null = null;
     private root: Root | null = null;
 
@@ -36,27 +187,6 @@ export class OpenTuiRenderer implements Renderer {
         },
     };
 
-    public components: Renderer["components"] = {
-        Field,
-        Button,
-        MenuButton,
-        MenuItem,
-        Container,
-        Panel,
-        ScrollView: OpenTuiScrollView,
-
-        Overlay,
-        Spacer,
-        Spinner,
-        Label,
-        Value,
-        Code,
-        CodeHighlight,
-
-        Select,
-        TextInput,
-    };
-
     constructor(private readonly config: RendererConfig) {}
 
     async initialize(): Promise<void> {
@@ -113,3 +243,24 @@ function KeyboardBridge({
 
     return <>{children}</>;
 }
+
+function OpenTuiKeyboardHandlerWrapper({
+    dispatchAction,
+    getScreenKeyHandler,
+    keyboard,
+    onCopyToastChange,
+}: {
+    dispatchAction: (action: TuiAction) => void;
+    getScreenKeyHandler: () => ((event: KeyboardEvent) => boolean) | null;
+    keyboard: Renderer["keyboard"];
+    onCopyToastChange?: (toast: string | null) => void;
+}) {
+    return (
+        <OpenTuiKeyboardHandler
+            dispatchAction={dispatchAction}
+            getScreenKeyHandler={getScreenKeyHandler}
+            keyboard={keyboard}
+            onCopyToastChange={onCopyToastChange}
+        />
+    );
+}

package/src/tui/adapters/opentui/SemanticOpenTuiRenderer.tsx

@@ -0,0 +1,192 @@
+import type { ReactNode } from "react";
+import type { AppShellProps } from "../../semantic/AppShell.tsx";
+import type { CommandBrowserScreenProps } from "../../semantic/CommandBrowserScreen.tsx";
+import type { ConfigScreenProps } from "../../semantic/ConfigScreen.tsx";
+import type { RunningScreenProps } from "../../semantic/RunningScreen.tsx";
+import type { LogsScreenProps } from "../../semantic/LogsScreen.tsx";
+import type { EditorScreenProps } from "../../semantic/EditorScreen.tsx";
+
+// Platform-native components (OpenTUI)
+import { Panel } from "./components/Panel.tsx";
+import { Label } from "./components/Label.tsx";
+import { Overlay } from "./components/Overlay.tsx";
+import { TextInput } from "./components/TextInput.tsx";
+import { Select } from "./components/Select.tsx";
+import { MenuButton } from "./components/MenuButton.tsx";
+import { Spinner } from "./components/Spinner.tsx";
+
+// Adapter-local UI components
+import { Header } from "./ui/Header.tsx";
+import { CommandSelector } from "./ui/CommandSelector.tsx";
+import { ConfigForm } from "./ui/ConfigForm.tsx";
+import { ResultsPanel } from "./ui/ResultsPanel.tsx";
+import { LogsPanel } from "./ui/LogsPanel.tsx";
+
+export class SemanticOpenTuiRenderer {
+    renderAppShell(props: AppShellProps): ReactNode {
+        return (
+            <Panel flexDirection="column" flex={1} padding={1} border={false}>
+                <box flexDirection="column" flexGrow={1}>
+                    <Header
+                        name={props.app.displayName ?? props.app.name}
+                        version={props.app.version}
+                        breadcrumb={props.app.breadcrumb}
+                    />
+
+                    <box flexDirection="column" flexGrow={1}>
+                        {props.screen}
+                    </box>
+
+                    <Panel dense border={true} flexDirection="column" gap={0} height={4}>
+                        <box flexDirection="row" justifyContent="space-between" paddingLeft={1} paddingRight={1}>
+                            <box flexDirection="row" gap={1}>
+                                <Spinner active={props.status.isExecuting} />
+                                <Label color="mutedText">
+                                    {props.status.isCancelling
+                                        ? "Cancelling..."
+                                        : props.status.isExecuting
+                                          ? "Executing..."
+                                          : "Ready"}
+                                </Label>
+                                {props.copyToast ? (
+                                    <Label color="success" bold>{props.copyToast}</Label>
+                                ) : null}
+                            </box>
+                            <Label color="mutedText">Esc Back  Ctrl+L Logs  Ctrl+Y Copy</Label>
+                        </box>
+                    </Panel>
+
+                    {props.modals}
+                </box>
+            </Panel>
+        );
+    }
+
+    renderCommandBrowserScreen(props: CommandBrowserScreenProps): ReactNode {
+        const commandItems = props.commands.map((command) => ({ command }));
+
+        return (
+            <CommandSelector
+                commands={commandItems}
+                selectedIndex={props.selectedCommandIndex}
+                onSelect={() => {
+                    // Controller handles subcommand navigation in onRunSelected
+                    props.onRunSelected();
+                }}
+                breadcrumb={props.commandId}
+            />
+        );
+    }
+
+    renderConfigScreen(props: ConfigScreenProps): ReactNode {
+        const additionalButtons: { label: string; onPress: () => void }[] = [];
+
+        return (
+            <box flexDirection="column" flexGrow={1}>
+                <ConfigForm
+                    title={props.title}
+                    fieldConfigs={props.fieldConfigs}
+                    values={props.values}
+                    selectedIndex={props.selectedFieldIndex}
+                    focused={true}
+                    additionalButtons={additionalButtons}
+                    actionButton={
+                        <MenuButton
+                            label={"Done"}
+                            selected={props.selectedFieldIndex === props.fieldConfigs.length + additionalButtons.length}
+                        />
+                    }
+                />
+                <box flexDirection="column" paddingTop={1}>
+                    <Label color="mutedText">CLI: {props.cliCommand}</Label>
+                </box>
+            </box>
+        );
+    }
+
+    renderRunningScreen(props: RunningScreenProps): ReactNode {
+        if (props.kind === "running") {
+            return (
+                <box flexDirection="column" flexGrow={1}>
+                    <ResultsPanel result={{ success: true, message: props.title }} error={null} focused={true} />
+                </box>
+            );
+        }
+
+        if (props.kind === "error") {
+            return (
+                <box flexDirection="column" flexGrow={1}>
+                    <ResultsPanel result={null} error={new Error(props.message ?? "Unknown error")} focused={true} />
+                </box>
+            );
+        }
+
+        // kind === "results"
+        // If customContent is provided, render it directly instead of using ResultsPanel's default rendering
+        if (props.customContent !== undefined) {
+            return (
+                <box flexDirection="column" flexGrow={1}>
+                    <ResultsPanel
+                        result={props.result ?? { success: true, message: props.message }}
+                        error={null}
+                        focused={true}
+                        renderResult={() => props.customContent}
+                    />
+                </box>
+            );
+        }
+
+        return (
+            <box flexDirection="column" flexGrow={1}>
+                <ResultsPanel 
+                    result={props.result ?? { success: true, message: props.message }} 
+                    error={null} 
+                    focused={true} 
+                />
+            </box>
+        );
+    }
+
+     renderLogsScreen(props: LogsScreenProps): ReactNode {
+         return <LogsPanel {...props} />;
+     }
+
+    renderEditorScreen(props: EditorScreenProps): ReactNode {
+        // For text input, use more height to give a proper editing area
+        const isTextEditor = props.editorType !== "select";
+        const panelHeight = isTextEditor ? 8 : undefined;
+
+        return (
+            <Overlay>
+                 <Panel flexDirection="column" padding={1} border={true} width={80} height={panelHeight} surface="overlay">
+                     <Label bold>{props.label ?? props.fieldId}</Label>
+
+                    <box flexDirection="column" gap={1} flexGrow={1}>
+                        {props.editorType === "select" ? (
+                            <Select
+                                options={props.selectOptions ?? []}
+                                value={props.valueString}
+                                focused={true}
+                                onChange={(value: string) => {
+                                    const index = (props.selectOptions ?? []).findIndex((o) => o.value === value);
+                                    props.onChangeSelectIndex?.(Math.max(0, index));
+                                }}
+                                onSubmit={() => props.onSubmit?.()}
+                            />
+                        ) : (
+                            <TextInput
+                                value={props.valueString}
+                                placeholder=""
+                                focused={true}
+                                onChange={(next: string) => props.onChangeText?.(next)}
+                                onSubmit={() => props.onSubmit?.()}
+                            />
+                        )}
+                    </box>
+
+                    <Label color="mutedText">Enter to submit  Esc to cancel</Label>
+                </Panel>
+            </Overlay>
+        );
+    }
+}

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

@@ -2,13 +2,13 @@ import type { ReactNode } from "react";
 import type { LabelProps } from "../../../semantic/types.ts";
 import { SemanticColors } from "../../../theme.ts";
 
-export function Label({ color = "text", bold, italic, wrap, children }: LabelProps & { children: ReactNode }) {
+export function Label({ color = "text", bold, italic, children }: LabelProps & { children: ReactNode }) {
     const fg = SemanticColors[color] ?? SemanticColors.text;
 
     const content = bold ? <strong>{children}</strong> : children;
 
     return (
-        <text fg={fg} {...({ wrap } as any)}>
+        <text fg={fg}>
             {italic ? <em>{content}</em> : content}
         </text>
     );

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { OverlayProps } from "../../../semantic/types.ts";
+import type { OverlayProps } from "../../../semantic/layoutTypes.ts";
 
 export function Overlay({
     zIndex = 10,
@@ -12,8 +12,17 @@ export function Overlay({
     children,
 }: OverlayProps & { children?: ReactNode }) {
     return (
-        <box position="absolute" top={0} left={0} right={0} bottom={0} zIndex={zIndex}>
-            <box position="absolute" top={top as any} left={left as any} right={right as any} bottom={bottom as any} width={width as any} height={height as any}>
+        <box
+            position="absolute"
+            top={0}
+            left={0}
+            right={0}
+            bottom={0}
+            zIndex={zIndex}
+            alignItems="center"
+            justifyContent="center"
+        >
+            <box top={top as any} left={left as any} right={right as any} bottom={bottom as any} width={width as any} height={height as any}>
                 {children}
             </box>
         </box>

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { PanelProps, Spacing } from "../../../semantic/types.ts";
+import type { PanelProps, Spacing } from "../../../semantic/layoutTypes.ts";
 import { SemanticColors } from "../../../theme.ts";
 
 function normalizePadding(
@@ -38,6 +38,11 @@ export function Panel({
     flex,
     width,
     height,
+    maxHeight,
+    top,
+    left,
+    right,
+    bottom,
     flexDirection,
     alignItems,
     justifyContent,
@@ -66,6 +71,11 @@ export function Panel({
             flexShrink={noShrink ? 0 : flex === undefined ? undefined : 1}
             width={width as any}
             height={height as any}
+            maxHeight={maxHeight as any}
+            top={top as any}
+            left={left as any}
+            right={right as any}
+            bottom={bottom as any}
             flexDirection={flexDirection as any}
             alignItems={alignItems as any}
             justifyContent={justifyContent as any}

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

@@ -1,6 +1,6 @@
 import { useRef, type ReactNode } from "react";
 import type { ScrollBoxRenderable } from "@opentui/core";
-import type { ScrollViewProps, ScrollViewRef, Spacing } from "../../../semantic/types.ts";
+import type { ScrollViewProps, ScrollViewRef, Spacing } from "../../../semantic/layoutTypes.ts";
 
 function normalizePadding(padding: number | Spacing | undefined): any {
     if (padding === undefined) {
@@ -37,13 +37,6 @@ export function ScrollView({
         const scrollRef = useRef<ScrollBoxRenderable>(null);
 
         const imperativeApi: ScrollViewRef = {
-            scrollToTop: () => {
-                scrollRef.current?.scrollTo(0);
-            },
-            scrollToBottom: () => {
-                // No public "bottom" API in ScrollBoxRenderable; use large index.
-                scrollRef.current?.scrollTo(Number.MAX_SAFE_INTEGER);
-            },
             scrollToIndex: (index: number) => {
                 scrollRef.current?.scrollTo(index);
             },

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

@@ -1,5 +1,5 @@
 import type { SpinnerProps } from "../../../semantic/types.ts";
-import { useSpinner } from "../hooks/useSpinner.ts";
+import { useSpinner } from "../../shared/useSpinner.ts";
 
 export function Spinner({ active }: SpinnerProps) {
     const { frame } = useSpinner(active);

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

@@ -6,10 +6,7 @@ import type { KeyboardAdapter, KeyboardEvent, KeyHandler } from "../types.ts";
 function normalizeKeyEvent(key: KeyEvent): KeyboardEvent {
     return {
         name: key.name,
-        sequence: key.sequence,
         ctrl: key.ctrl,
-        shift: key.shift,
-        meta: key.meta,
     };
 }
 

package/src/tui/adapters/opentui/ui/CommandSelector.tsx

@@ -0,0 +1,55 @@
+import type { Command } from "../../../../core/command.ts";
+import { MenuItem } from "../components/MenuItem.tsx";
+import { Panel } from "../components/Panel.tsx";
+
+interface CommandItem {
+    command: Command;
+    label?: string;
+    description?: string;
+}
+
+interface CommandSelectorProps {
+    commands: CommandItem[];
+    selectedIndex: number;
+    onSelect: (command: Command) => void;
+    breadcrumb?: string[];
+}
+
+export function CommandSelector({ commands, selectedIndex, onSelect, breadcrumb }: CommandSelectorProps) {
+    const title = breadcrumb?.length ? `Select Command (${breadcrumb.join(" > ")})` : "Select Command";
+
+    return (
+        <box flexDirection="column" flexGrow={1} justifyContent="center" alignItems="center" gap={1}>
+            <Panel flexDirection="column" title={title} padding={undefined} width={"80%"} focused>
+                <box flexDirection="column" gap={1}>
+                    {commands.map((item, idx) => {
+                        const isSelected = idx === selectedIndex;
+                        const label = item.label ?? item.command.displayName ?? item.command.name;
+                        const description = item.description ?? item.command.description;
+                        const modeIndicator = getModeIndicator(item.command);
+
+                        return (
+                            <MenuItem
+                                key={item.command.name}
+                                label={label}
+                                description={description}
+                                suffix={modeIndicator}
+                                selected={isSelected}
+                                onActivate={() => onSelect(item.command)}
+                            />
+                        );
+                    })}
+                </box>
+            </Panel>
+        </box>
+    );
+}
+
+function getModeIndicator(command: Command): string {
+    const navigableSubCommands = command.subCommands?.filter((sub) => sub.supportsTui()) ?? [];
+    if (navigableSubCommands.length > 0) {
+        return ">";
+    }
+
+    return "";
+}