@pablozaiden/terminatui 0.1.0

package/src/tui/components/EditorModal.tsx

@@ -0,0 +1,177 @@
+import { useState, useEffect } from "react";
+import type { SelectOption } from "@opentui/core";
+import { Theme } from "../theme.ts";
+import { useKeyboardHandler, KeyboardPriority } from "../hooks/useKeyboardHandler.ts";
+import type { FieldConfig } from "./types.ts";
+
+interface EditorModalProps {
+    /** The key of the field being edited */
+    fieldKey: string | null;
+    /** The current value of the field */
+    currentValue: unknown;
+    /** Whether the modal is visible */
+    visible: boolean;
+    /** Called when the user submits a new value */
+    onSubmit: (value: unknown) => void;
+    /** Called when the user cancels editing */
+    onCancel: () => void;
+    /** Field configurations */
+    fieldConfigs: FieldConfig[];
+}
+
+/**
+ * Modal for editing field values.
+ * Supports text, number, enum, and boolean types.
+ */
+export function EditorModal({
+    fieldKey,
+    currentValue,
+    visible,
+    onSubmit,
+    onCancel,
+    fieldConfigs,
+}: EditorModalProps) {
+    const [inputValue, setInputValue] = useState("");
+    const [selectIndex, setSelectIndex] = useState(0);
+
+    // Reset state when field changes
+    useEffect(() => {
+        if (fieldKey && visible) {
+            setInputValue(String(currentValue ?? ""));
+
+            // For enums, find current index
+            const fieldConfig = fieldConfigs.find((f) => f.key === fieldKey);
+            if (fieldConfig?.options) {
+                const idx = fieldConfig.options.findIndex((o) => o.value === currentValue);
+                setSelectIndex(idx >= 0 ? idx : 0);
+            }
+        }
+    }, [fieldKey, currentValue, visible, fieldConfigs]);
+
+    // Modal keyboard handler - blocks all keys from bubbling out of the modal
+    useKeyboardHandler(
+        (event) => {
+            if (event.key.name === "escape") {
+                onCancel();
+            }
+        },
+        KeyboardPriority.Modal,
+        { enabled: visible, modal: true }
+    );
+
+    if (!visible || !fieldKey) {
+        return null;
+    }
+
+    const fieldConfig = fieldConfigs.find((f) => f.key === fieldKey);
+    if (!fieldConfig) {
+        return null;
+    }
+
+    const isEnum = fieldConfig.type === "enum" && fieldConfig.options;
+    const isBoolean = fieldConfig.type === "boolean";
+    const isNumber = fieldConfig.type === "number";
+
+    const handleInputSubmit = (value: string) => {
+        if (isNumber) {
+            onSubmit(parseInt(value.replace(/[^0-9-]/g, ""), 10) || 0);
+        } else {
+            onSubmit(value);
+        }
+    };
+
+    const handleSelectIndexChange = (index: number, _option: SelectOption | null) => {
+        setSelectIndex(index);
+    };
+
+    const handleSelectSubmit = (_index: number, option: SelectOption | null) => {
+        if (option) {
+            onSubmit(option.value);
+        }
+    };
+
+    const handleBooleanSubmit = (_index: number, option: SelectOption | null) => {
+        if (option) {
+            onSubmit(option.value === true);
+        }
+    };
+
+    // Boolean uses select with True/False options
+    const booleanOptions: SelectOption[] = [
+        { name: "False", description: "", value: false },
+        { name: "True", description: "", value: true },
+    ];
+
+    return (
+        <box
+            position="absolute"
+            top={4}
+            left={6}
+            width="60%"
+            height={12}
+            backgroundColor={Theme.overlay}
+            border={true}
+            borderStyle="rounded"
+            borderColor={Theme.overlayTitle}
+            padding={1}
+            flexDirection="column"
+            gap={1}
+            zIndex={20}
+        >
+            <text fg={Theme.overlayTitle}>
+                <strong>Edit: {fieldConfig.label}</strong>
+            </text>
+
+            {isEnum && fieldConfig.options && (
+                <select
+                    options={fieldConfig.options.map((o) => ({
+                        name: o.name,
+                        value: o.value,
+                        description: "",
+                    }))}
+                    selectedIndex={selectIndex}
+                    focused={true}
+                    onChange={handleSelectIndexChange}
+                    onSelect={handleSelectSubmit}
+                    showScrollIndicator={true}
+                    showDescription={false}
+                    height={6}
+                    width="100%"
+                    wrapSelection={true}
+                    selectedBackgroundColor="#61afef"
+                    selectedTextColor="#1e2127"
+                />
+            )}
+
+            {isBoolean && (
+                <select
+                    options={booleanOptions}
+                    selectedIndex={currentValue ? 1 : 0}
+                    focused={true}
+                    onSelect={handleBooleanSubmit}
+                    showScrollIndicator={false}
+                    showDescription={false}
+                    height={2}
+                    width="100%"
+                    wrapSelection={true}
+                    selectedBackgroundColor="#61afef"
+                    selectedTextColor="#1e2127"
+                />
+            )}
+
+            {!isEnum && !isBoolean && (
+                <input
+                    value={inputValue}
+                    placeholder={fieldConfig.placeholder ?? `Enter ${fieldConfig.label.toLowerCase()}...`}
+                    focused={true}
+                    onInput={(value) => setInputValue(value)}
+                    onSubmit={handleInputSubmit}
+                />
+            )}
+
+            <text fg={Theme.statusText}>
+                Enter to save, Esc to cancel
+            </text>
+        </box>
+    );
+}

package/src/tui/components/FieldRow.tsx

@@ -0,0 +1,30 @@
+import { Theme } from "../theme.ts";
+
+interface FieldRowProps {
+    /** Field label */
+    label: string;
+    /** Field value to display */
+    value: string;
+    /** Whether this row is selected */
+    isSelected: boolean;
+}
+
+/**
+ * A single row in a config form displaying a field label and value.
+ */
+export function FieldRow({ label, value, isSelected }: FieldRowProps) {
+    const prefix = isSelected ? "► " : "  ";
+    const labelColor = isSelected ? Theme.borderFocused : Theme.label;
+    const valueColor = isSelected ? Theme.value : Theme.statusText;
+
+    return (
+        <box flexDirection="row" gap={1}>
+            <text fg={labelColor}>
+                {prefix}{label}:
+            </text>
+            <text fg={valueColor}>
+                {value}
+            </text>
+        </box>
+    );
+}

package/src/tui/components/Header.tsx

@@ -0,0 +1,31 @@
+import { Theme } from "../theme.ts";
+
+interface HeaderProps {
+    /** Application name */
+    name: string;
+    /** Application version */
+    version: string;
+    /** Optional breadcrumb path (e.g., ["run", "config"]) */
+    breadcrumb?: string[];
+}
+
+/**
+ * Application header with name, version, and optional breadcrumb.
+ */
+export function Header({ name, version, breadcrumb }: HeaderProps) {
+    const breadcrumbStr = breadcrumb?.length 
+        ? ` › ${breadcrumb.join(" › ")}`
+        : "";
+
+    return (
+        <box flexDirection="row" justifyContent="space-between" marginBottom={1}>
+            <text fg={Theme.header}>
+                <strong>{name}</strong>
+                {breadcrumbStr}
+            </text>
+            <text fg={Theme.label}>
+                v{version}
+            </text>
+        </box>
+    );
+}

package/src/tui/components/JsonHighlight.tsx

@@ -0,0 +1,128 @@
+import { Theme } from "../theme.ts";
+
+/**
+ * JSON syntax highlighting types and colors
+ */
+type JsonTokenType = "key" | "string" | "number" | "boolean" | "null" | "punctuation";
+type JsonToken = { type: JsonTokenType; value: string };
+type JsonLineTokens = JsonToken[];
+
+const TOKEN_COLORS: Record<JsonTokenType, string> = {
+    key: "#61afef",      // blue
+    string: "#98c379",   // green
+    number: "#d19a66",   // orange
+    boolean: "#c678dd",  // purple
+    null: "#c678dd",     // purple
+    punctuation: Theme.label,
+};
+
+function tokenizeJson(value: unknown, indent = 0): JsonLineTokens[] {
+    const pad = "  ".repeat(indent);
+    const padToken = (): JsonToken => ({ type: "punctuation", value: pad });
+
+    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) }]];
+    }
+    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;
+}
+
+/**
+ * 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 (
+        <box flexDirection="column">
+            {lines.map((tokens, lineIdx) => (
+                <text key={`json-${lineIdx}`}>
+                    {tokens.map((token, tokenIdx) => (
+                        <span key={tokenIdx} fg={TOKEN_COLORS[token.type]}>{token.value}</span>
+                    ))}
+                </text>
+            ))}
+        </box>
+    );
+}

package/src/tui/components/LogsPanel.tsx

@@ -0,0 +1,86 @@
+import { Theme } from "../theme.ts";
+import { LogLevel, type LogEntry } from "../hooks/useLogStream.ts";
+
+// Colors for different log levels
+const LogColors: Record<LogLevel, string> = {
+    [LogLevel.Silly]: "#8c8c8c",
+    [LogLevel.Trace]: "#6dd6ff",
+    [LogLevel.Debug]: "#7bdcb5",
+    [LogLevel.Info]: "#d6dde6",
+    [LogLevel.Warn]: "#f5c542",
+    [LogLevel.Error]: "#f78888",
+    [LogLevel.Fatal]: "#ff5c8d",
+};
+
+interface LogsPanelProps {
+    /** Log entries to display */
+    logs: LogEntry[];
+    /** Whether the panel is visible */
+    visible: boolean;
+    /** Whether the panel is focused */
+    focused: boolean;
+    /** Whether to expand to fill available space */
+    expanded?: boolean;
+}
+
+/**
+ * Panel displaying log entries with color-coded levels.
+ */
+export function LogsPanel({
+    logs,
+    visible,
+    focused,
+    expanded = false,
+}: LogsPanelProps) {
+    if (!visible) {
+        return null;
+    }
+
+    const borderColor = focused ? Theme.borderFocused : Theme.border;
+    const title = `Logs - ${logs.length}`;
+
+    // When expanded, grow to fill. Otherwise fixed height.
+    const boxProps = expanded
+        ? { flexGrow: 1 }
+        : { height: 10, flexShrink: 0 };
+
+    return (
+        <box
+            flexDirection="column"
+            border={true}
+            borderStyle="rounded"
+            borderColor={borderColor}
+            title={title}
+            padding={1}
+            {...boxProps}
+        >
+            <scrollbox
+                scrollY={true}
+                flexGrow={1}
+                stickyScroll={true}
+                stickyStart="bottom"
+                focused={focused}
+            >
+                <box flexDirection="column" gap={0}>
+                    {logs.map((log, idx) => {
+                        const color = LogColors[log.level] ?? Theme.statusText;
+                        // Strip ANSI codes but preserve line breaks
+                        const sanitized = typeof Bun !== "undefined"
+                            ? Bun.stripANSI(log.message).trim()
+                            : log.message.replace(/\x1B\[[0-9;]*[a-zA-Z]/g, "").trim();
+
+                        return (
+                            <text key={`${log.timestamp.getTime()}-${idx}`} fg={color}>
+                                {sanitized}
+                            </text>
+                        );
+                    })}
+
+                    {logs.length === 0 && (
+                        <text fg={Theme.label}>No logs yet...</text>
+                    )}
+                </box>
+            </scrollbox>
+        </box>
+    );
+}

package/src/tui/components/ResultsPanel.tsx

@@ -0,0 +1,93 @@
+import type { ReactNode } from "react";
+import { Theme } from "../theme.ts";
+import type { CommandResult } from "../../core/command.ts";
+
+interface ResultsPanelProps {
+    /** The result to display */
+    result: CommandResult | null;
+    /** Error to display (if any) */
+    error: Error | null;
+    /** Whether the panel is focused */
+    focused: boolean;
+    /** Custom result renderer */
+    renderResult?: (result: CommandResult) => ReactNode;
+}
+
+/**
+ * Panel displaying command execution results.
+ */
+export function ResultsPanel({
+    result,
+    error,
+    focused,
+    renderResult,
+}: ResultsPanelProps) {
+    const borderColor = focused ? Theme.borderFocused : Theme.border;
+
+    // Determine content to display
+    let content: ReactNode;
+
+    if (error) {
+        content = (
+            <box flexDirection="column" gap={1}>
+                <text fg={Theme.error}>
+                    <strong>Error</strong>
+                </text>
+                <text fg={Theme.error}>
+                    {error.message}
+                </text>
+            </box>
+        );
+    } else if (result) {
+        if (renderResult) {
+            const customContent = renderResult(result);
+
+            if (typeof customContent === "string" || typeof customContent === "number" || typeof customContent === "boolean") {
+                // Wrap primitive results so the renderer gets a text node
+                content = (
+                    <text fg={Theme.value}>
+                        {String(customContent)}
+                    </text>
+                );
+            } else {
+                content = customContent as ReactNode;
+            }
+        } else {
+            // Default JSON display
+            content = (
+                <box flexDirection="column" gap={1}>
+                    {result.message && (
+                        <text fg={result.success ? Theme.success : Theme.error}>
+                            {result.message}
+                        </text>
+                    )}
+                    {result.data !== undefined && result.data !== null && (
+                        <text fg={Theme.value}>
+                            {JSON.stringify(result.data, null, 2)}
+                        </text>
+                    )}
+                </box>
+            );
+        }
+    } else {
+        content = (
+            <text fg={Theme.label}>No results yet...</text>
+        );
+    }
+
+    return (
+        <box
+            flexDirection="column"
+            border={true}
+            borderStyle="rounded"
+            borderColor={borderColor}
+            title="Results"
+            padding={1}
+            flexGrow={1}
+        >
+            <scrollbox scrollY={true} flexGrow={1} focused={focused}>
+                {content}
+            </scrollbox>
+        </box>
+    );
+}

package/src/tui/components/StatusBar.tsx

@@ -0,0 +1,59 @@
+import { Theme } from "../theme.ts";
+import { useSpinner } from "../hooks/useSpinner.ts";
+
+interface StatusBarProps {
+    /** Status message to display */
+    status: string;
+    /** Whether the app is currently running a command */
+    isRunning?: boolean;
+    /** Whether to show keyboard shortcuts */
+    showShortcuts?: boolean;
+    /** Custom shortcuts string (defaults to standard shortcuts) */
+    shortcuts?: string;
+}
+
+/**
+ * Status bar showing current status, spinner, and keyboard shortcuts.
+ */
+export function StatusBar({ 
+    status, 
+    isRunning = false, 
+    showShortcuts = true,
+    shortcuts = "L Logs • C CLI • Tab Switch • Ctrl+Y Copy • Esc Back"
+}: StatusBarProps) {
+    const { frame } = useSpinner(isRunning);
+    const spinner = isRunning ? `${frame} ` : "";
+    
+    return (
+        <box
+            flexDirection="column"
+            gap={0}
+            border={true}
+            borderStyle="rounded"
+            borderColor={isRunning ? "#4ade80" : Theme.border}
+            flexShrink={0}
+        >
+            {/* Main status with spinner */}
+            <box
+                flexDirection="row"
+                justifyContent="space-between"
+                backgroundColor={isRunning ? "#1a1a2e" : undefined}
+                paddingLeft={1}
+                paddingRight={1}
+            >
+                <text fg={isRunning ? "#4ade80" : Theme.statusText}>
+                    {isRunning ? <strong>{spinner}{status}</strong> : <>{spinner}{status}</>}
+                </text>
+            </box>
+            
+            {/* Keyboard shortcuts */}
+            {showShortcuts && (
+                <box paddingLeft={1} paddingRight={1}>
+                    <text fg={Theme.label}>
+                        {shortcuts}
+                    </text>
+                </box>
+            )}
+        </box>
+    );
+}

package/src/tui/components/index.ts

@@ -0,0 +1,13 @@
+export { FieldRow } from "./FieldRow.tsx";
+export { ActionButton } from "./ActionButton.tsx";
+export { Header } from "./Header.tsx";
+export { StatusBar } from "./StatusBar.tsx";
+export { LogsPanel } from "./LogsPanel.tsx";
+export { ResultsPanel } from "./ResultsPanel.tsx";
+export { ConfigForm } from "./ConfigForm.tsx";
+export { EditorModal } from "./EditorModal.tsx";
+export { CliModal } from "./CliModal.tsx";
+export { CommandSelector } from "./CommandSelector.tsx";
+export { JsonHighlight, type JsonHighlightProps } from "./JsonHighlight.tsx";
+
+export type { FieldType, FieldOption, FieldConfig } from "./types.ts";

package/src/tui/components/types.ts

@@ -0,0 +1,30 @@
+/**
+ * Field type for TUI forms.
+ */
+export type FieldType = "text" | "number" | "enum" | "boolean";
+
+/**
+ * Option for enum/select fields.
+ */
+export interface FieldOption {
+    name: string;
+    value: unknown;
+}
+
+/**
+ * Field configuration for TUI forms.
+ */
+export interface FieldConfig {
+    /** Field key (must match a key in values) */
+    key: string;
+    /** Display label */
+    label: string;
+    /** Field type */
+    type: FieldType;
+    /** Options for enum type */
+    options?: FieldOption[];
+    /** Placeholder text for input fields */
+    placeholder?: string;
+    /** Group name for organizing fields */
+    group?: string;
+}