@pablozaiden/terminatui 0.3.0-beta-1 → 0.4.0

package/src/tui/context/NavigationContext.tsx

@@ -8,8 +8,8 @@ import {
     type ReactNode,
 } from "react";
 
-export interface ScreenEntry<TParams = unknown> {
-    route: string;
+export interface ScreenEntry<TRoute extends string = string, TParams = unknown> {
+    route: TRoute;
     params?: TParams;
     meta?: { focus?: string; breadcrumb?: string[] };
 }
@@ -38,6 +38,8 @@ export interface NavigationAPI {
     currentModal?: ModalEntry;
     openModal: <TParams>(id: string, params?: TParams) => void;
     closeModal: () => void;
+    /** Update the topmost modal's params (for reactive state updates) */
+    updateModal: <TParams>(params: TParams) => void;
     hasModal: boolean;
 
     /**
@@ -57,7 +59,7 @@ export interface NavigationAPI {
 }
 
 type NavigationProviderProps<TParams = unknown> = {
-    initialScreen: ScreenEntry<TParams>;
+    initialScreen: ScreenEntry<string, TParams>;
     children: ReactNode;
     /** Called when we can't go back anymore (at root with empty stack) */
     onExit?: () => void;
@@ -69,7 +71,8 @@ type NavigationAction =
     | { type: "reset"; screen: ScreenEntry }
     | { type: "pop" }
     | { type: "openModal"; modal: ModalEntry }
-    | { type: "closeModal" };
+    | { type: "closeModal" }
+    | { type: "updateModal"; params: unknown };
 
 type NavigationState = {
     stack: ScreenEntry[];
@@ -101,6 +104,17 @@ function navigationReducer(
             if (state.modalStack.length === 0) return state;
             return { ...state, modalStack: state.modalStack.slice(0, -1) };
         }
+        case "updateModal": {
+            if (state.modalStack.length === 0) return state;
+            const updatedModal = {
+                ...state.modalStack[state.modalStack.length - 1]!,
+                params: action.params,
+            };
+            return {
+                ...state,
+                modalStack: [...state.modalStack.slice(0, -1), updatedModal],
+            };
+        }
         default:
             return state;
     }
@@ -172,6 +186,8 @@ export function NavigationProvider<TParams = unknown>({
             openModal: <TParams,>(id: string, params?: TParams) =>
                 dispatch({ type: "openModal", modal: { id, params } }),
             closeModal: () => dispatch({ type: "closeModal" }),
+            updateModal: <TParams,>(params: TParams) =>
+                dispatch({ type: "updateModal", params }),
             hasModal: modalStack.length > 0,
             goBack,
             setBackHandler,

package/src/tui/controllers/CommandBrowserController.tsx

@@ -0,0 +1,100 @@
+import type { AnyCommand } from "../../core/command.ts";
+import type { NavigationAPI } from "../context/NavigationContext.tsx";
+
+import { RenderCommandBrowserScreen } from "../semantic/render.tsx";
+import { schemaToFieldConfigs } from "../utils/schemaToFields.ts";
+
+import type { CommandBrowserRouteParams, TuiRoute } from "../driver/types.ts";
+import type { ConfigController } from "./ConfigController.tsx";
+
+export class CommandBrowserController {
+    private commands: AnyCommand[];
+    private configController: ConfigController;
+    private navigation: NavigationAPI;
+
+    private clampSelectedIndex(index: number, commands: AnyCommand[]): number {
+        return Math.max(0, Math.min(index, Math.max(0, commands.length - 1)));
+    }
+
+    public constructor({
+        commands,
+        navigation,
+        configController,
+    }: {
+        commands: AnyCommand[];
+        navigation: NavigationAPI;
+        configController: ConfigController;
+    }) {
+        this.commands = commands;
+        this.navigation = navigation;
+        this.configController = configController;
+    }
+
+    public render(): { node: React.ReactNode; breadcrumb: string[] } {
+        const params = (this.navigation.current.params ?? { commandPath: [] }) as CommandBrowserRouteParams;
+        const commandPath = params.commandPath ?? [];
+        const selectedIndex = params.selectedIndex ?? 0;
+
+        const currentCommands = this.getCommandsAtPath(commandPath);
+
+        return {
+            breadcrumb: commandPath,
+            node: (
+                <RenderCommandBrowserScreen
+                    commandId={commandPath}
+                    commands={currentCommands}
+                    selectedCommandIndex={this.clampSelectedIndex(selectedIndex, currentCommands)}
+                    onOpenPath={(nextPath) => {
+                        this.navigation.replace("commandBrowser" satisfies TuiRoute, { commandPath: nextPath, selectedIndex: 0 });
+                    }}
+                    onSelectCommand={(index) => {
+                        const clampedIndex = this.clampSelectedIndex(index, currentCommands);
+                        this.navigation.replace("commandBrowser" satisfies TuiRoute, { commandPath, selectedIndex: clampedIndex });
+                    }}
+                    onRunSelected={() => {
+                        const clampedIndex = this.clampSelectedIndex(selectedIndex, currentCommands);
+                        const selected = currentCommands[clampedIndex];
+                        if (!selected) {
+                            return;
+                        }
+
+                        // If selected command has navigable subcommands, navigate to them instead of config
+                        const navigableSubCommands = selected.subCommands?.filter((sub) => sub.supportsTui()) ?? [];
+                        if (navigableSubCommands.length > 0) {
+                            this.navigation.replace("commandBrowser" satisfies TuiRoute, { 
+                                commandPath: [...commandPath, selected.name], 
+                                selectedIndex: 0 
+                            });
+                            return;
+                        }
+
+                        this.navigation.push("config" satisfies TuiRoute, {
+                            command: selected,
+                            commandPath,
+                            values: this.configController.initializeValues(selected),
+                            fieldConfigs: schemaToFieldConfigs(selected.options),
+                        });
+                    }}
+                />
+            ),
+        };
+    }
+
+    private getCommandsAtPath(commandPath: string[]): AnyCommand[] {
+        if (commandPath.length === 0) {
+            return this.commands.filter((cmd) => cmd.supportsTui());
+        }
+
+        let current: AnyCommand[] = this.commands;
+        for (const pathPart of commandPath) {
+            const found = current.find((c) => c.name === pathPart);
+            if (found?.subCommands) {
+                current = found.subCommands.filter((sub) => sub.supportsTui());
+            } else {
+                break;
+            }
+        }
+
+        return current;
+    }
+}

package/src/tui/controllers/ConfigController.tsx

@@ -0,0 +1,183 @@
+import type { AnyCommand } from "../../core/command.ts";
+import type { NavigationAPI } from "../context/NavigationContext.tsx";
+import type { ExecutorContextValue } from "../context/ExecutorContext.tsx";
+
+import { RenderConfigScreen } from "../semantic/render.tsx";
+
+import { buildCliCommand } from "../utils/buildCliCommand.ts";
+import { loadPersistedParameters, savePersistedParameters } from "../utils/parameterPersistence.ts";
+
+import type { OptionDef, OptionSchema } from "../../types/command.ts";
+import type {
+    ConfigRouteParams,
+    EditorModalParams,
+    TuiRoute,
+} from "../driver/types.ts";
+
+export class ConfigController {
+    private appName: string;
+    private navigation: NavigationAPI;
+    private executor: ExecutorContextValue;
+
+    public constructor({
+        appName,
+        navigation,
+        executor,
+    }: {
+        appName: string;
+        navigation: NavigationAPI;
+        executor: ExecutorContextValue;
+    }) {
+        this.appName = appName;
+        this.navigation = navigation;
+        this.executor = executor;
+    }
+
+    public async run(params: ConfigRouteParams): Promise<void> {
+        savePersistedParameters(this.appName, params.command.name, params.values);
+
+        this.navigation.push("running" satisfies TuiRoute, {
+            command: params.command,
+            commandPath: params.commandPath,
+            values: params.values,
+        });
+
+        // Set a back handler that cancels the execution when Esc is pressed
+        this.navigation.setBackHandler(() => {
+            this.executor.cancel();
+            return true; // We handle the back action - don't pop the stack yet
+        });
+
+        try {
+            const outcome = await this.executor.execute(params.command, params.values);
+            
+            if (outcome.cancelled) {
+                this.navigation.pop();
+                return;
+            }
+
+            if (outcome.success) {
+                this.navigation.replace("results" satisfies TuiRoute, {
+                    command: params.command,
+                    commandPath: params.commandPath,
+                    values: params.values,
+                    result: outcome.result ?? null,
+                });
+                return;
+            }
+
+            this.navigation.replace("error" satisfies TuiRoute, {
+                command: params.command,
+                commandPath: params.commandPath,
+                values: params.values,
+                error: outcome.error ?? new Error("Unknown error"),
+            });
+        } finally {
+            // Clear the back handler when execution completes
+            this.navigation.setBackHandler(null);
+        }
+    }
+
+    public getCopyPayload(params: {
+        command: AnyCommand;
+        commandPath: string[];
+        values: Record<string, unknown>;
+    }): { label: string; content: string } {
+        const schema = params.command.options as OptionSchema;
+        const cli = buildCliCommand(this.appName, params.commandPath, schema, params.values as any);
+        return { label: "CLI", content: cli };
+    }
+
+    public render(): { node: React.ReactNode; breadcrumb?: string[] } {
+        const params = this.navigation.current.params as ConfigRouteParams | undefined;
+
+        if (!params) {
+            return { node: null };
+        }
+
+        const title = `Configure: ${params.command.displayName ?? params.command.name}`;
+        const selectedFieldIndex = params.selectedFieldIndex ?? 0;
+        const clampedIndex = Math.min(selectedFieldIndex, Math.max(0, params.fieldConfigs.length));
+
+        const schema = params.command.options as OptionSchema;
+        const cliCommand = buildCliCommand(this.appName, params.commandPath, schema, params.values as any);
+
+        return {
+            breadcrumb: params.commandPath,
+            node: (
+                <RenderConfigScreen
+                    title={title}
+                    commandId={params.commandPath}
+                    fieldConfigs={params.fieldConfigs}
+                    values={params.values}
+                    cliCommand={cliCommand}
+                    selectedFieldIndex={clampedIndex}
+                    onSelectionChange={(index) => {
+                        const maxIndex = params.fieldConfigs.length;
+                        const nextIndex = Math.max(0, Math.min(index, maxIndex));
+                        this.navigation.replace("config" satisfies TuiRoute, {
+                            ...params,
+                            selectedFieldIndex: nextIndex,
+                        });
+                    }}
+                    onEditField={(fieldId) => {
+                        const fieldValue = params.values[fieldId];
+                        const fieldConfig = params.fieldConfigs.find((f) => f.key === fieldId);
+                        const fieldDisplayName = fieldConfig?.label ?? fieldId;
+
+                        this.navigation.openModal<EditorModalParams>("editor", {
+                            fieldKey: fieldId,
+                            fieldDisplayName,
+                            currentValue: fieldValue,
+                            fieldConfigs: params.fieldConfigs,
+
+                            onSubmit: (value: unknown) => {
+                                this.navigation.replace("config" satisfies TuiRoute, {
+                                    ...params,
+                                    values: { ...params.values, [fieldId]: value },
+                                });
+                                this.navigation.closeModal();
+                            },
+                            onCancel: () => {
+                                this.navigation.closeModal();
+                            },
+                        });
+                    }}
+                    onRun={() => {
+                        void this.run(params);
+                    }}
+                />
+            ),
+        };
+    }
+
+    public initializeValues(cmd: AnyCommand): Record<string, unknown> {
+        const defaults: Record<string, unknown> = {};
+        const optionDefs = cmd.options as OptionSchema;
+
+        for (const [key, def] of Object.entries(optionDefs)) {
+            const typedDef = def as OptionDef;
+            if (typedDef.default !== undefined) {
+                defaults[key] = typedDef.default;
+            } else {
+                switch (typedDef.type) {
+                    case "string":
+                        defaults[key] = typedDef.enum?.[0] ?? "";
+                        break;
+                    case "number":
+                        defaults[key] = typedDef.min ?? 0;
+                        break;
+                    case "boolean":
+                        defaults[key] = false;
+                        break;
+                    case "array":
+                        defaults[key] = [];
+                        break;
+                }
+            }
+        }
+
+        const persisted = loadPersistedParameters(this.appName, cmd.name);
+        return { ...defaults, ...persisted };
+    }
+}

package/src/tui/controllers/EditorController.tsx

@@ -0,0 +1,169 @@
+import type { NavigationAPI } from "../context/NavigationContext.tsx";
+
+import { RenderEditorScreen } from "../semantic/render.tsx";
+
+import type { CopyPayload, EditorModalParams } from "../driver/types.ts";
+
+export class EditorController {
+    private navigation: NavigationAPI;
+
+    public constructor({ navigation }: { navigation: NavigationAPI }) {
+        this.navigation = navigation;
+    }
+
+    private getSelectIndexForValue(options: { value: string }[], value: string): number {
+        const index = options.findIndex((o) => o.value === value);
+        return index >= 0 ? index : 0;
+    }
+
+    private updateModalBuffer(params: EditorModalParams, bufferValue: string, selectIndex?: number): void {
+        this.navigation.updateModal<EditorModalParams>({
+            ...params,
+            bufferValue,
+            selectIndex,
+        });
+    }
+
+    private parseValueByFieldType(type: string, valueString: string, fallback: unknown): unknown {
+        if (type === "number") {
+            const num = Number(valueString);
+            return Number.isFinite(num) ? num : fallback;
+        }
+
+        if (type === "boolean") {
+            const normalized = valueString.trim().toLowerCase();
+            if (normalized === "true") return true;
+            if (normalized === "false") return false;
+            return fallback;
+        }
+
+        return valueString;
+    }
+
+    public getCopyPayload(): CopyPayload | null {
+        const params = this.navigation.modalStack[this.navigation.modalStack.length - 1]?.params as
+            | EditorModalParams
+            | undefined;
+        if (!params) {
+            return null;
+        }
+
+        const activeModalId = this.navigation.modalStack[this.navigation.modalStack.length - 1]?.id;
+        if (activeModalId !== "editor") {
+            return null;
+        }
+
+        const valueString = params.bufferValue ?? String(params.currentValue ?? "");
+
+        return {
+            label: `Field: ${params.fieldDisplayName}`,
+            content: valueString,
+        };
+    }
+
+    public render(modalParams: EditorModalParams | undefined): React.ReactNode {
+        if (!modalParams) {
+            return null;
+        }
+
+        const fieldConfig = modalParams.fieldConfigs.find((f) => f.key === modalParams.fieldKey);
+        const bufferString = modalParams.bufferValue;
+
+        if (fieldConfig?.type === "enum") {
+            const options = (fieldConfig.options ?? []).map((o) => ({
+                label: String(o.name),
+                value: String(o.value),
+            }));
+
+            const currentValueString = bufferString ?? String(modalParams.currentValue ?? "");
+            const index = modalParams.selectIndex ?? this.getSelectIndexForValue(options, currentValueString);
+
+            return (
+                <RenderEditorScreen
+                    key="modal-editor"
+                    fieldId={modalParams.fieldKey}
+                    label={modalParams.fieldDisplayName}
+                    valueString={options[index]?.value ?? currentValueString}
+                    editorType="select"
+                    selectOptions={options}
+                    selectIndex={index}
+                    onChangeSelectIndex={(nextIndex) => {
+                        const clamped = Math.max(0, Math.min(nextIndex, Math.max(0, options.length - 1)));
+                        const next = options[clamped];
+                        this.updateModalBuffer(modalParams, next ? next.value : "", clamped);
+                    }}
+                    onSubmit={() => {
+                        const valueString = bufferString ?? String(modalParams.currentValue ?? "");
+                        const match = fieldConfig.options?.find((o) => String(o.value) === valueString);
+                        modalParams.onSubmit(match?.value ?? valueString);
+                    }}
+                    onCancel={() => {
+                        this.navigation.closeModal();
+                    }}
+                />
+            );
+        }
+
+        if (fieldConfig?.type === "boolean") {
+            const options = [
+                { label: "true", value: "true" },
+                { label: "false", value: "false" },
+            ];
+
+            const currentBool =
+                bufferString !== undefined ? bufferString.trim().toLowerCase() === "true" : Boolean(modalParams.currentValue);
+            const index = modalParams.selectIndex ?? (currentBool ? 0 : 1);
+
+            return (
+                <RenderEditorScreen
+                    key="modal-editor"
+                    fieldId={modalParams.fieldKey}
+                    label={modalParams.fieldDisplayName}
+                    valueString={options[index]!.value}
+                    editorType="select"
+                    selectOptions={options}
+                    selectIndex={index}
+                    onChangeSelectIndex={(nextIndex) => {
+                        const clamped = Math.max(0, Math.min(nextIndex, 1));
+                        this.updateModalBuffer(modalParams, options[clamped]!.value, clamped);
+                    }}
+                    onSubmit={() => {
+                        const normalized = (bufferString ?? String(Boolean(modalParams.currentValue))).trim().toLowerCase();
+                        modalParams.onSubmit(normalized === "true");
+                    }}
+                    onCancel={() => {
+                        this.navigation.closeModal();
+                    }}
+                />
+            );
+        }
+
+
+        return (
+            <RenderEditorScreen
+                key="modal-editor"
+                fieldId={modalParams.fieldKey}
+                label={modalParams.fieldDisplayName}
+                valueString={bufferString ?? String(modalParams.currentValue ?? "")}
+                editorType={fieldConfig?.type === "number" ? "number" : "text"}
+                onChangeText={(text) => {
+                    this.updateModalBuffer(modalParams, text);
+                }}
+                onSubmit={() => {
+                    const valueString = bufferString ?? String(modalParams.currentValue ?? "");
+
+                    if (!fieldConfig) {
+                        modalParams.onSubmit(valueString);
+                        return;
+                    }
+
+                    const parsed = this.parseValueByFieldType(fieldConfig.type, valueString, modalParams.currentValue);
+                    modalParams.onSubmit(parsed);
+                }}
+                onCancel={() => {
+                    this.navigation.closeModal();
+                }}
+            />
+        );
+    }
+}

package/src/tui/controllers/LogsController.tsx

@@ -0,0 +1,48 @@
+import { LogLevel, type LogEvent } from "../../core/logger.ts";
+import type { NavigationAPI } from "../context/NavigationContext.tsx";
+
+import { RenderLogsScreen } from "../semantic/render.tsx";
+
+import type { CopyPayload } from "../driver/types.ts";
+
+export class LogsController {
+    private navigation: NavigationAPI;
+
+    public constructor({ navigation }: { navigation: NavigationAPI }) {
+        this.navigation = navigation;
+    }
+
+    public getCopyPayload(logs: LogEvent[]): CopyPayload {
+        const text = this.formatLogText(logs);
+        return { label: "Logs", content: text };
+    }
+
+    public render(logs: LogEvent[]): React.ReactNode {
+        const items = this.formatLogItems(logs);
+
+        return (
+            <RenderLogsScreen
+                key="modal-logs"
+                items={items}
+                onClose={() => this.navigation.closeModal()}
+            />
+        );
+    }
+
+    private formatLogItems(logs: LogEvent[]): { level: string; message: string; timestamp: number }[] {
+        return logs.map((l) => ({
+            level: LogLevel[l.level],
+            message: l.message,
+            timestamp: l.timestamp.getTime(),
+        }));
+    }
+
+    private formatLogText(logs: LogEvent[]): string {
+        return logs
+            .map((l) => {
+                const timestamp = l.timestamp.toISOString();
+                return `[${timestamp}] ${LogLevel[l.level].toUpperCase()}: ${l.message}`;
+            })
+            .join("\n");
+    }
+}

package/src/tui/controllers/OutcomeController.tsx

@@ -0,0 +1,110 @@
+import type { CommandResult } from "../../core/command.ts";
+import type { CopyPayload, ErrorRouteParams, ResultsRouteParams, TuiRoute } from "../driver/types.ts";
+import type { NavigationAPI } from "../context/NavigationContext.tsx";
+
+import { RenderRunningScreen } from "../semantic/render.tsx";
+
+export type OutcomeRoute = Extract<TuiRoute, "running" | "results" | "error">;
+
+export class OutcomeController {
+    private navigation: NavigationAPI;
+
+    public constructor({ navigation }: { navigation: NavigationAPI }) {
+        this.navigation = navigation;
+    }
+
+    public render(route: OutcomeRoute): { node: React.ReactNode } {
+        if (route === "running") {
+            return { node: <RenderRunningScreen title="Waiting for results..." kind="running" /> };
+        }
+
+        if (route === "results") {
+            const params = this.navigation.current.params as ResultsRouteParams | undefined;
+            const result = params?.result as CommandResult | undefined;
+            const command = params?.command;
+            
+            // Check if command has a custom result renderer
+            let customContent: React.ReactNode = undefined;
+            if (result && command?.renderResult) {
+                try {
+                    customContent = command.renderResult(result);
+                } catch {
+                    // If custom renderer fails, fall back to default display
+                    customContent = undefined;
+                }
+            }
+
+            return {
+                node: (
+                    <RenderRunningScreen
+                        title="Results"
+                        kind="results"
+                        message={result?.message}
+                        result={result}
+                        customContent={customContent}
+                    />
+                ),
+            };
+        }
+
+        const params = this.navigation.current.params as { error: Error } | undefined;
+        return {
+            node: (
+                <RenderRunningScreen
+                    title="Error"
+                    kind="error"
+                    message={String(params?.error?.message ?? "Unknown error")}
+                />
+            ),
+        };
+    }
+
+    public getCopyPayload(route: OutcomeRoute): CopyPayload | null {
+        if (route === "results") {
+            const params = this.navigation.current.params as ResultsRouteParams | undefined;
+            const result = params?.result as CommandResult | undefined;
+            const command = params?.command;
+            
+            // Check if command has a custom clipboard content provider
+            if (result && command?.getClipboardContent) {
+                try {
+                    const content = command.getClipboardContent(result);
+                    if (content !== undefined) {
+                        return { label: "result", content };
+                    }
+                } catch {
+                    // Fall through to default behavior
+                }
+            }
+
+            if (result !== undefined) {
+                // If result has data, stringify it for clipboard
+                if (result.data !== undefined) {
+                    return {
+                        label: "result",
+                        content: typeof result.data === "object" 
+                            ? JSON.stringify(result.data, null, 2) 
+                            : String(result.data),
+                    };
+                }
+                // Otherwise use the message
+                return {
+                    label: "result",
+                    content: result.message ?? "",
+                };
+            }
+        }
+
+        if (route === "error") {
+            const params = this.navigation.current.params as ErrorRouteParams | undefined;
+            if (params?.error) {
+                return {
+                    label: "error",
+                    content: params.error.message ?? String(params.error),
+                };
+            }
+        }
+
+        return null;
+    }
+}