@pablozaiden/terminatui 0.3.0-beta-1 → 0.4.0

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

@@ -0,0 +1,210 @@
+import type { ReactNode } from "react";
+import { Box } from "ink";
+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 (Ink)
+import { Panel } from "./components/Panel.tsx";
+import { Label } from "./components/Label.tsx";
+import { Overlay } from "./components/Overlay.tsx";
+import { ScrollView } from "./components/ScrollView.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";
+
+function SemanticInkAppShell(props: AppShellProps) {
+    return (
+        <Panel flexDirection="column" flex={1} padding={0} 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} padding={0}>
+                    {props.screen}
+                </Box>
+
+                <Panel dense border={true} flexDirection="column" gap={0} height={4}>
+                    <Box height={1} />
+                    <Box flexDirection="column">
+                        <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>
+                        <Box>
+                            <Label color="mutedText">Esc Back  Ctrl+L Logs  Ctrl+Y Copy</Label>
+                        </Box>
+                    </Box>
+                </Panel>
+
+                {props.modals}
+            </Box>
+        </Panel>
+    );
+}
+
+export class SemanticInkRenderer {
+    renderAppShell(props: AppShellProps): ReactNode {
+        return <SemanticInkAppShell {...props} />;
+    }
+
+    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 (
+            <Overlay>
+                <Panel flexDirection="column" padding={0} border={true} width={80} height={20}>
+                    <Label bold>Logs</Label>
+                    <Box height={1} />
+                    <ScrollView axis="vertical" flex={1}>
+                        {props.items.map((item) => (
+                            <Label color="value" key={item.timestamp}>{`[${item.level}] ${Bun.stripANSI(item.message)}`}</Label>
+                        ))}
+                    </ScrollView>
+                    <Box height={1} />
+                    <Label color="mutedText">Enter or Esc to close</Label>
+                </Panel>
+            </Overlay>
+        );
+    }
+
+    renderEditorScreen(props: EditorScreenProps): ReactNode {
+        return (
+            <Overlay>
+                <Panel flexDirection="column" padding={0} border={true}>
+                    <Label bold>{props.label ?? props.fieldId}: </Label>
+
+                    <Box flexDirection="column" gap={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/ink/components/Button.tsx

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

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

@@ -1,5 +1,11 @@
-import type { OverlayProps } from "../../../semantic/types.ts";
+import type { OverlayProps } from "../../../semantic/layoutTypes.ts";
+import { Box } from "ink";
 
 export function Overlay({ children }: OverlayProps) {
-    return <>{children}</>;
+    return (
+        <Box flexDirection="column" flexGrow={1}>
+            <Box height={1}></Box>
+            {children}
+        </Box>
+    );
 }

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

@@ -1,15 +1,36 @@
-import { Text } from "ink";
-import type { PanelProps } from "../../../semantic/types.ts";
+import { Box, Text } from "ink";
+import type { PanelProps } from "../../../semantic/layoutTypes.ts";
+
+function normalizePadding(padding: PanelProps["padding"], opts: { dense: boolean }): { padding?: number } {
+    if (typeof padding === "number") {
+        return { padding };
+    }
+
+    if (padding && typeof padding === "object") {
+        const top = padding.top ?? 0;
+        const right = padding.right ?? 0;
+        const bottom = padding.bottom ?? 0;
+        const left = padding.left ?? 0;
+        const fallback = opts.dense ? 0 : 1;
+
+        const pad = top === right && right === bottom && bottom === left ? top : fallback;
+        return { padding: pad };
+    }
+
+    return { padding: opts.dense ? 0 : 1 };
+}
+
+export function Panel({ title, children, padding, dense = false, flexDirection = "column" }: PanelProps) {
+    const resolvedPadding = normalizePadding(padding, { dense });
 
-export function Panel({ title, children }: PanelProps) {
     return (
-        <>
+        <Box flexDirection={flexDirection} padding={resolvedPadding.padding}>
             {title ? (
                 <Text bold>
                     {title}
                 </Text>
             ) : null}
             {children}
-        </>
+        </Box>
     );
 }

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

@@ -1,5 +1,46 @@
-import type { ScrollViewProps } from "../../../semantic/types.ts";
+import { useEffect } from "react";
+import { Box } from "ink";
+import type { ScrollViewProps, ScrollViewRef } from "../../../semantic/layoutTypes.ts";
 
-export function ScrollView({ children }: ScrollViewProps) {
-    return <>{children}</>;
+/**
+ * Ink ScrollView - a simple container that provides scroll-like semantics.
+ * 
+ * Note: Ink doesn't have native scroll container support like OpenTUI.
+ * This component provides the ScrollViewRef interface but scrolling is a no-op.
+ * Content will naturally flow/wrap in the terminal.
+ */
+export function ScrollView({ 
+    children, 
+    scrollRef,
+    flex,
+    width,
+    height,
+    flexDirection = "column",
+    alignItems,
+    justifyContent,
+    gap,
+}: ScrollViewProps) {
+    // Provide a dummy imperative API for compatibility
+    useEffect(() => {
+        if (scrollRef) {
+            const noOpRef: ScrollViewRef = {
+                scrollToIndex: () => {},
+            };
+            scrollRef(noOpRef);
+        }
+    }, [scrollRef]);
+
+    return (
+        <Box
+            flexGrow={flex}
+            width={width as any}
+            height={height as any}
+            flexDirection={flexDirection}
+            alignItems={alignItems}
+            justifyContent={justifyContent}
+            gap={gap}
+        >
+            {children}
+        </Box>
+    );
 }

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

@@ -1,5 +1,11 @@
 import type { SpinnerProps } from "../../../semantic/types.ts";
 
-export function Spinner(_: SpinnerProps) {
-    return null;
+export function Spinner({ active }: SpinnerProps) {
+    //const { frame } = useSpinner(active);
+
+    if (!active) {
+        return null;
+    }
+
+    return <></>;
 }

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

@@ -5,10 +5,7 @@ import type { KeyboardAdapter, KeyboardEvent, KeyHandler } from "../types.ts";
 function normalizeKeyName(input: string, key: Key): KeyboardEvent {
     const event: KeyboardEvent = {
         name: input,
-        sequence: input,
         ctrl: Boolean(key.ctrl),
-        shift: Boolean(key.shift),
-        meta: Boolean(key.meta),
     };
 
     if (key.return) {

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

@@ -0,0 +1,56 @@
+import { Box } from "ink";
+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} >
+            <Panel flexDirection="column" title={title} padding={0} width={60} focused>
+                <Box flexDirection="column">
+                    {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 "";
+}

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

@@ -0,0 +1,77 @@
+import { useRef, useEffect, type ReactNode } from "react";
+import { Box } from "ink";
+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={0} 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} />;
+                    })}
+                    
+                    <Box height={1} />
+
+                    {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/ink/ui/Header.tsx

@@ -0,0 +1,25 @@
+import { Box } from "ink";
+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/ink/ui/JsonHighlight.tsx

@@ -0,0 +1,21 @@
+import { Box } from "ink";
+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/ink/ui/ResultsPanel.tsx

@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+import { Box } from "ink";
+import type { CommandResult } from "../../../../core/command.ts";
+
+// Platform-native components (Ink)
+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 }: 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) {
+        // for now we ignore renderResult in ink version
+        
+        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>
+    );
+}