@pablozaiden/terminatui 0.3.0-beta-1 → 0.4.0

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

@@ -0,0 +1,74 @@
+import { useRef, useEffect, type ReactNode } from "react";
+import { Field } from "../components/Field.tsx";
+import { MenuButton } from "../components/MenuButton.tsx";
+import { Panel } from "../components/Panel.tsx";
+import { ScrollView } from "../components/ScrollView.tsx";
+import type { FieldConfig } from "../../../semantic/types.ts";
+import type { ScrollViewRef } from "../../../semantic/layoutTypes.ts";
+
+interface ConfigFormProps {
+    title: string;
+    fieldConfigs: FieldConfig[];
+    values: Record<string, unknown>;
+    selectedIndex: number;
+    focused: boolean;
+    getDisplayValue?: (key: string, value: unknown, type: string) => string;
+    actionButton: ReactNode;
+    additionalButtons?: { label: string; onPress: () => void }[];
+}
+
+function defaultGetDisplayValue(_key: string, value: unknown, type: string): string {
+    if (type === "boolean") {
+        return value ? "True" : "False";
+    }
+    const strValue = String(value ?? "");
+    if (strValue === "") {
+        return "(empty)";
+    }
+    return strValue.length > 60 ? strValue.substring(0, 57) + "..." : strValue;
+}
+
+export function ConfigForm({
+    title,
+    fieldConfigs,
+    values,
+    selectedIndex,
+    focused,
+    getDisplayValue = defaultGetDisplayValue,
+    actionButton,
+    additionalButtons = [],
+}: ConfigFormProps) {
+    const scrollViewRef = useRef<ScrollViewRef | null>(null);
+
+    useEffect(() => {
+        scrollViewRef.current?.scrollToIndex(selectedIndex);
+    }, [selectedIndex]);
+
+    return (
+        <Panel title={title} focused={focused} flex={1} padding={1} flexDirection="column">
+            <ScrollView
+                axis="vertical"
+                flex={1}
+                scrollRef={(ref) => {
+                    scrollViewRef.current = ref;
+                }}
+            >
+                <box flexDirection="column" gap={0}>
+                    {fieldConfigs.map((field, idx) => {
+                        const isSelected = idx === selectedIndex;
+                        const displayValue = getDisplayValue(field.key, values[field.key], field.type);
+
+                        return <Field key={field.key} label={field.label} value={displayValue} selected={isSelected} />;
+                    })}
+
+                    {additionalButtons.map((btn, idx) => {
+                        const buttonSelectedIndex = fieldConfigs.length + idx;
+                        return <MenuButton key={btn.label} label={btn.label} selected={selectedIndex === buttonSelectedIndex} />;
+                    })}
+
+                    {actionButton}
+                </box>
+            </ScrollView>
+        </Panel>
+    );
+}

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

@@ -0,0 +1,24 @@
+import { Label } from "../components/Label.tsx";
+
+interface HeaderProps {
+    name: string;
+    version: string;
+    breadcrumb?: string[];
+}
+
+export function Header({ name, version, breadcrumb }: HeaderProps) {
+    const breadcrumbStr = breadcrumb?.length ? ` 3 ${breadcrumb.join(" 3 ")}` : "";
+
+    return (
+        <box flexDirection="column" flexShrink={0}>
+            <box flexDirection="row" justifyContent="space-between">
+                <Label color="mutedText" bold>
+                    {name}
+                    {breadcrumbStr}
+                </Label>
+                <Label color="mutedText">v{version}</Label>
+            </box>
+            <box height={1} />
+        </box>
+    );
+}

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

@@ -0,0 +1,20 @@
+import { tokenizeJsonValue } from "../../../utils/jsonTokenizer.ts";
+import { CodeHighlight } from "../components/CodeHighlight.tsx";
+
+export interface JsonHighlightProps {
+    value: unknown;
+}
+
+export function JsonHighlight({ value }: JsonHighlightProps) {
+    const lines = tokenizeJsonValue(value);
+    return (
+        <box flexDirection="column" gap={0}>
+            {lines.map((tokens, lineIdx) => (
+                <CodeHighlight
+                    key={`json-${lineIdx}`}
+                    tokens={tokens.map((token) => ({ type: token.type, value: token.value }))}
+                />
+            ))}
+        </box>
+    );
+}

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

@@ -0,0 +1,44 @@
+import { useTerminalDimensions } from "@opentui/react";
+import { Label } from "../components/Label.tsx";
+import { Overlay } from "../components/Overlay.tsx";
+import { SemanticColors } from "../../../theme.ts";
+import type { LogsScreenProps } from "../../../semantic/LogsScreen.tsx";
+
+export function LogsPanel({ items }: LogsScreenProps) {
+    const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
+    
+    // Panel takes most of terminal size, leaving some margin to show it's a modal
+    // ~90% width/height with minimum sizes
+    const panelHeight = Math.max(10, Math.floor(terminalHeight * 0.75));
+    const panelWidth = Math.max(40, Math.floor(terminalWidth * 0.85));
+    
+    // Scrollbox height = panel height - border (2) - padding (2) - title (1) - footer (1)
+    const scrollboxHeight = panelHeight - 6;
+
+    return (
+        <Overlay>
+            <box
+                flexDirection="column"
+                padding={1}
+                border={true}
+                borderStyle="rounded"
+                borderColor={SemanticColors.warning}
+                backgroundColor={SemanticColors.overlay}
+                width={panelWidth}
+                height={panelHeight}
+            >
+                <Label bold>Logs</Label>
+                <scrollbox scrollY height={scrollboxHeight}>
+                    <box flexDirection="column">
+                        {items.map((item) => (
+                            <Label color="value" key={item.timestamp}>
+                                {`[${item.level}] ${Bun.stripANSI(item.message)}`}
+                            </Label>
+                        ))}
+                    </box>
+                </scrollbox>
+                <Label color="mutedText">Enter or Esc to close</Label>
+            </box>
+        </Overlay>
+    );
+}

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

@@ -0,0 +1,62 @@
+import type { ReactNode } from "react";
+import type { CommandResult } from "../../../../core/command.ts";
+
+// Platform-native components (OpenTUI)
+import { Panel } from "../components/Panel.tsx";
+import { ScrollView } from "../components/ScrollView.tsx";
+import { Label } from "../components/Label.tsx";
+
+// Adapter-local JSON highlighting
+import { JsonHighlight } from "./JsonHighlight.tsx";
+
+interface ResultsPanelProps {
+    result: CommandResult | null;
+    error: Error | null;
+    focused: boolean;
+    renderResult?: (result: CommandResult) => ReactNode;
+}
+
+export function ResultsPanel({ result, error, focused, renderResult }: ResultsPanelProps) {
+    let content: ReactNode;
+
+    if (error) {
+        content = (
+            <box flexDirection="column" gap={1}>
+                <Label color="error" bold>
+                    Error
+                </Label>
+                <Label color="error">{error.message}</Label>
+            </box>
+        );
+    } else if (result) {
+        if (renderResult) {
+            const customContent = renderResult(result);
+            if (typeof customContent === "string" || typeof customContent === "number" || typeof customContent === "boolean") {
+                content = <Label color="value">{String(customContent)}</Label>;
+            } else {
+                content = customContent as ReactNode;
+            }
+        } else {
+            content = (
+                <box flexDirection="column" gap={1}>
+                    {result.message && <Label color={result.success ? "success" : "error"}>{result.message}</Label>}
+                    {result.data !== undefined && result.data !== null && (
+                        typeof result.data === "object" 
+                            ? <JsonHighlight value={result.data} />
+                            : <Label color="value">{String(result.data)}</Label>
+                    )}
+                </box>
+            );
+        }
+    } else {
+        content = <Label color="mutedText">No results yet...</Label>;
+    }
+
+    return (
+        <Panel title="Results" focused={focused} flex={1} padding={1} flexDirection="column">
+            <ScrollView axis="vertical" flex={1} focused={focused}>
+                <box flexDirection="column">{content}</box>
+            </ScrollView>
+        </Panel>
+    );
+}

package/src/tui/adapters/shared/TerminalClipboard.ts

@@ -0,0 +1,65 @@
+export async function copyToTerminalClipboard(text: string): Promise<boolean> {
+    try {
+        const cleanText = Bun.stripANSI(text);
+
+        // On macOS, prefer pbcopy as it's more reliable than OSC52
+        // OSC52 doesn't work well in alternate screen mode (OpenTUI) or Apple Terminal
+        if (process.platform === "darwin") {
+            try {
+                const proc = Bun.spawn(["pbcopy"], {
+                    stdin: "pipe",
+                    stdout: "ignore",
+                    stderr: "ignore",
+                });
+
+                proc.stdin.write(cleanText);
+                proc.stdin.end();
+
+                const exitCode = await proc.exited;
+                if (exitCode === 0) {
+                    return true;
+                }
+            } catch {
+                // pbcopy not available, fall through to OSC52
+            }
+        }
+
+        // On Linux/other, try xclip or xsel first
+        if (process.platform === "linux") {
+            try {
+                const proc = Bun.spawn(["xclip", "-selection", "clipboard"], {
+                    stdin: "pipe",
+                    stdout: "ignore",
+                    stderr: "ignore",
+                });
+
+                proc.stdin.write(cleanText);
+                proc.stdin.end();
+
+                const exitCode = await proc.exited;
+                if (exitCode === 0) {
+                    return true;
+                }
+            } catch {
+                // xclip not available, fall through to OSC52
+            }
+        }
+
+        // Fallback: Use OSC52 in most terminals; it works across SSH.
+        const base64 = Buffer.from(cleanText).toString("base64");
+        // Use ESC \ as terminator instead of BEL for better compatibility
+        const osc52 = `\x1b]52;c;${base64}\x1b\\`;
+
+        // Write to /dev/tty if possible, else stdout.
+        try {
+            const tty = Bun.file("/dev/tty");
+            await Bun.write(tty, osc52);
+        } catch {
+            process.stdout.write(osc52);
+        }
+
+        return true;
+    } catch {
+        return false;
+    }
+}

package/src/tui/adapters/{opentui/hooks → shared}/useSpinner.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 
-const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const SPINNER_FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
 const SPINNER_INTERVAL = 80;
 
 interface UseSpinnerResult {
@@ -8,6 +8,10 @@ interface UseSpinnerResult {
     frame: string;
 }
 
+/**
+ * Shared spinner animation hook for terminal adapters.
+ * Returns the current frame character to display.
+ */
 export function useSpinner(active: boolean): UseSpinnerResult {
     const [frameIndex, setFrameIndex] = useState(0);
 

package/src/tui/adapters/types.ts

@@ -1,29 +1,15 @@
 import type { ReactNode } from "react";
-import type {
-    ButtonProps,
-    CodeHighlightProps,
-    CodeProps,
-    ContainerProps,
-    FieldProps,
-    LabelProps,
-    MenuButtonProps,
-    MenuItemProps,
-    OverlayProps,
-    PanelProps,
-    ScrollViewProps,
-    SelectProps,
-    SpacerProps,
-    SpinnerProps,
-    TextInputProps,
-    ValueProps,
-} from "../semantic/types.ts";
+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";
+import type { TuiAction } from "../actions.ts";
 
 export interface KeyboardEvent {
     name: string;
-    sequence?: string;
     ctrl?: boolean;
-    shift?: boolean;
-    meta?: boolean;
 }
 
 export type KeyHandler = (event: KeyboardEvent) => boolean;
@@ -37,34 +23,28 @@ export interface RendererConfig {
     useAlternateScreen?: boolean;
 }
 
-export interface RendererComponents {
-    Field: (props: FieldProps) => ReactNode;
-    Button: (props: ButtonProps) => ReactNode;
-    MenuButton: (props: MenuButtonProps) => ReactNode;
-    MenuItem: (props: MenuItemProps) => ReactNode;
-
-    Container: (props: ContainerProps) => ReactNode;
-    Panel: (props: PanelProps) => ReactNode;
-    ScrollView: (props: ScrollViewProps) => ReactNode;
-
-    Overlay: (props: OverlayProps) => ReactNode;
-    Spacer: (props: SpacerProps) => ReactNode;
-    Spinner: (props: SpinnerProps) => ReactNode;
-
-    Label: (props: LabelProps) => ReactNode;
-    Value: (props: ValueProps) => ReactNode;
-    Code: (props: CodeProps) => ReactNode;
-    CodeHighlight: (props: CodeHighlightProps) => ReactNode;
-
-    TextInput: (props: TextInputProps) => ReactNode;
-    Select: (props: SelectProps) => ReactNode;
-}
-
 export interface Renderer {
     initialize: () => Promise<void>;
     render: (node: ReactNode) => void;
     destroy: () => void;
 
     keyboard: KeyboardAdapter;
-    components: RendererComponents;
+
+    renderSemanticAppShell: (props: AppShellProps) => ReactNode;
+    renderSemanticCommandBrowserScreen: (props: CommandBrowserScreenProps) => ReactNode;
+    renderSemanticConfigScreen: (props: ConfigScreenProps) => ReactNode;
+    renderSemanticRunningScreen: (props: RunningScreenProps) => ReactNode;
+    renderSemanticLogsScreen: (props: LogsScreenProps) => ReactNode;
+    renderSemanticEditorScreen: (props: EditorScreenProps) => ReactNode;
+
+    /** 
+     * Renders an invisible component that handles global keyboard bindings.
+     * This component can use hooks and will dispatch actions via the provided dispatcher.
+     */
+    renderKeyboardHandler?: (props: {
+        dispatchAction: (action: TuiAction) => void;
+        getScreenKeyHandler: () => ((event: KeyboardEvent) => boolean) | null;
+        onCopyToastChange?: (toast: string | null) => void;
+    }) => ReactNode;
+
 }

package/src/tui/components/JsonHighlight.tsx

@@ -1,121 +1,51 @@
-import { Container } from "../semantic/Container.tsx";
-import { CodeHighlight } from "../semantic/CodeHighlight.tsx";
-import type { CodeTokenType } from "../semantic/types.ts";
+import { tokenizeJsonValue, type JsonToken } from "../utils/jsonTokenizer.ts";
+import { SemanticColors } from "../theme.ts";
 
 /**
- * JSON syntax highlighting types and colors
+ * JSON syntax highlighting utility.
+ *
+ * This is intentionally kept under `src/tui/components/*` because it can be used
+ * by external apps importing from this package.
+ * 
+ * Returns an ANSI-colored string suitable for terminal output.
  */
-type JsonTokenType = Exclude<CodeTokenType, "unknown">;
-type JsonToken = { type: JsonTokenType; value: string };
-type JsonLineTokens = JsonToken[];
-
-
-function tokenizeJson(value: unknown, indent = 0): JsonLineTokens[] {
-    const pad = "  ".repeat(indent);
-    const padToken = (): JsonToken => ({ type: "punctuation", value: pad });
+export interface JsonHighlightProps {
+    value: unknown;
+}
 
-    if (value === null) {
-        return [[padToken(), { type: "null", value: "null" }]];
-    }
-    if (typeof value === "boolean") {
-        return [[padToken(), { type: "boolean", value: String(value) }]];
-    }
-    if (typeof value === "number") {
-        return [[padToken(), { type: "number", value: String(value) }]];
-    }
-    if (typeof value === "string") {
-        return [[padToken(), { type: "string", value: JSON.stringify(value) }]];
+function getTokenColor(type: JsonToken["type"]): string {
+    switch (type) {
+        case "punctuation":
+            return SemanticColors.mutedText;
+        case "key":
+            return SemanticColors.primary;
+        case "string":
+            return SemanticColors.success;
+        case "number":
+            return SemanticColors.warning;
+        case "boolean":
+            return SemanticColors.primary;
+        case "null":
+            return SemanticColors.mutedText;
     }
-    if (Array.isArray(value)) {
-        if (value.length === 0) {
-            return [[padToken(), { type: "punctuation", value: "[]" }]];
-        }
-        const lines: JsonLineTokens[] = [[padToken(), { type: "punctuation", value: "[" }]];
-        value.forEach((item, idx) => {
-            const itemLines = tokenizeJson(item, indent + 1);
-            const isLast = idx === value.length - 1;
-            itemLines.forEach((line, lineIdx) => {
-                if (lineIdx === itemLines.length - 1 && !isLast) {
-                    lines.push([...line, { type: "punctuation", value: "," }]);
-                } else {
-                    lines.push(line);
-                }
-            });
-        });
-        lines.push([padToken(), { type: "punctuation", value: "]" }]);
-        return lines;
-    }
-    if (typeof value === "object") {
-        const entries = Object.entries(value);
-        if (entries.length === 0) {
-            return [[padToken(), { type: "punctuation", value: "{}" }]];
-        }
-        const lines: JsonLineTokens[] = [[padToken(), { type: "punctuation", value: "{" }]];
-        const innerPad = "  ".repeat(indent + 1);
-        
-        entries.forEach(([key, val], idx) => {
-            const valLines = tokenizeJson(val, indent + 1);
-            const isLast = idx === entries.length - 1;
-            
-            // First value line - prepend key
-            const firstValLine = valLines[0] ?? [];
-            // Remove the padding from value's first line (we'll add our own with the key)
-            const valTokens = firstValLine.filter(t => t.value !== "  ".repeat(indent + 1));
-            
-            const keyLine: JsonLineTokens = [
-                { type: "punctuation", value: innerPad },
-                { type: "key", value: `"${key}"` },
-                { type: "punctuation", value: ": " },
-                ...valTokens,
-            ];
-            
-            if (valLines.length === 1) {
-                // Single line value
-                if (!isLast) keyLine.push({ type: "punctuation", value: "," });
-                lines.push(keyLine);
-            } else {
-                // Multi-line value
-                lines.push(keyLine);
-                valLines.slice(1, -1).forEach(line => lines.push(line));
-                const lastLine = valLines[valLines.length - 1] ?? [];
-                if (!isLast) {
-                    lines.push([...lastLine, { type: "punctuation", value: "," }]);
-                } else {
-                    lines.push(lastLine);
-                }
-            }
-        });
-        lines.push([padToken(), { type: "punctuation", value: "}" }]);
-        return lines;
-    }
-    return [];
 }
 
-export interface JsonHighlightProps {
-    /** The value to render as syntax-highlighted JSON */
-    value: unknown;
+function toAnsiColor(hex: string): string {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `\x1b[38;2;${r};${g};${b}m`;
 }
 
-/**
- * Render JSON with syntax highlighting.
- * 
- * Tokenizes the JSON value and renders each token with appropriate colors:
- * - Keys: blue
- * - Strings: green
- * - Numbers: orange
- * - Booleans/null: purple
- * - Punctuation: theme label color
- */
-export function JsonHighlight({ value }: JsonHighlightProps) {
-    const lines = tokenizeJson(value);
-    return (
-        <Container flexDirection="column" gap={0}>
-            {lines.map((tokens, lineIdx) => (
-                <CodeHighlight
-                    key={`json-${lineIdx}`}
-                    tokens={tokens.map((token) => ({ type: token.type, value: token.value }))}
-                />
-            ))}
-        </Container>
-    );
+const RESET = "\x1b[0m";
+
+export function JsonHighlight({ value }: JsonHighlightProps): string {
+    const lines = tokenizeJsonValue(value);
+    
+    return lines.map((tokens) => 
+        tokens.map((token) => {
+            const color = getTokenColor(token.type);
+            return `${toAnsiColor(color)}${token.value}${RESET}`;
+        }).join("")
+    ).join("\n");
 }

package/src/tui/context/ActionContext.tsx

@@ -0,0 +1,51 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import type { NavigationAPI } from "./NavigationContext.tsx";
+import type { TuiAction } from "../actions.ts";
+
+export type TuiActionDispatcher = (action: TuiAction) => void;
+
+interface ActionContextValue {
+    dispatchAction: TuiActionDispatcher;
+}
+
+const ActionContext = createContext<ActionContextValue | null>(null);
+
+export function ActionProvider({
+    children,
+    navigation,
+}: {
+    children: ReactNode;
+    navigation: NavigationAPI;
+}) {
+    const dispatchAction = useMemo<TuiActionDispatcher>(() => {
+        return (action) => {
+            if (action.type === "nav.back") {
+                navigation.goBack();
+                return;
+            }
+
+
+            if (action.type === "logs.open") {
+                // Prevent stacking: only open if logs modal is not already open
+                const isLogsAlreadyOpen = navigation.modalStack.some((m) => m.id === "logs");
+                if (!isLogsAlreadyOpen) {
+                    navigation.openModal("logs");
+                }
+            }
+        };
+    }, [navigation]);
+
+    return (
+        <ActionContext.Provider value={{ dispatchAction }}>
+            {children}
+        </ActionContext.Provider>
+    );
+}
+
+export function useAction(): ActionContextValue {
+    const context = useContext(ActionContext);
+    if (!context) {
+        throw new Error("useAction must be used within an ActionProvider");
+    }
+    return context;
+}

package/src/tui/context/ExecutorContext.tsx

@@ -26,6 +26,8 @@ export interface ExecutionOutcome {
 export interface ExecutorContextValue {
     /** Whether a command is currently executing */
     isExecuting: boolean;
+    /** Whether a cancellation has been requested */
+    isCancelling: boolean;
     /** Execute a command with the given values */
     execute: (command: AnyCommand, values: Record<string, unknown>) => Promise<ExecutionOutcome>;
     /** Cancel the currently executing command */
@@ -46,6 +48,7 @@ interface ExecutorProviderProps {
  */
 export function ExecutorProvider({ children }: ExecutorProviderProps) {
     const [isExecuting, setIsExecuting] = useState(false);
+    const [isCancelling, setIsCancelling] = useState(false);
     const abortControllerRef = useRef<AbortController | null>(null);
 
     const execute = useCallback(async (
@@ -98,6 +101,7 @@ export function ExecutorProvider({ children }: ExecutorProviderProps) {
             return { success: false, error };
         } finally {
             setIsExecuting(false);
+            setIsCancelling(false);
             if (abortControllerRef.current === abortController) {
                 abortControllerRef.current = null;
             }
@@ -106,6 +110,7 @@ export function ExecutorProvider({ children }: ExecutorProviderProps) {
 
     const cancel = useCallback(() => {
         if (abortControllerRef.current) {
+            setIsCancelling(true);
             abortControllerRef.current.abort();
             abortControllerRef.current = null;
         }
@@ -117,10 +122,11 @@ export function ExecutorProvider({ children }: ExecutorProviderProps) {
             abortControllerRef.current = null;
         }
         setIsExecuting(false);
+        setIsCancelling(false);
     }, []);
 
     return (
-        <ExecutorContext.Provider value={{ isExecuting, execute, cancel, reset }}>
+        <ExecutorContext.Provider value={{ isExecuting, isCancelling, execute, cancel, reset }}>
             {children}
         </ExecutorContext.Provider>
     );