@pablozaiden/terminatui 0.3.0 → 0.4.0

package/src/tui/driver/TuiDriver.tsx

@@ -0,0 +1,148 @@
+import type { AnyCommand } from "../../core/command.ts";
+import type { NavigationAPI } from "../context/NavigationContext.tsx";
+import type { ExecutorContextValue } from "../context/ExecutorContext.tsx";
+import type { LogEvent } from "../../core/logger.ts";
+import type { AppShellProps } from "../semantic/AppShell.tsx";
+
+import { RenderAppShell } from "../semantic/render.tsx";
+
+import type { ConfigRouteParams, CopyPayload, EditorModalParams, TuiRoute } from "./types.ts";
+import { CommandBrowserController } from "../controllers/CommandBrowserController.tsx";
+import { ConfigController } from "../controllers/ConfigController.tsx";
+import { EditorController } from "../controllers/EditorController.tsx";
+import { LogsController } from "../controllers/LogsController.tsx";
+import { OutcomeController } from "../controllers/OutcomeController.tsx";
+
+export class TuiDriver {
+    private navigation: NavigationAPI;
+    private executor: ExecutorContextValue;
+    private logs: LogEvent[];
+
+    private commandBrowser: CommandBrowserController;
+    private config: ConfigController;
+    private editor: EditorController;
+    private logsModal: LogsController;
+    private outcome: OutcomeController;
+
+    public constructor({
+        appName,
+        commands,
+        navigation,
+        executor,
+        logs,
+    }: {
+        appName: string;
+        commands: AnyCommand[];
+        navigation: NavigationAPI;
+        executor: ExecutorContextValue;
+        logs: LogEvent[];
+    }) {
+        this.navigation = navigation;
+        this.executor = executor;
+        this.logs = logs;
+
+        this.config = new ConfigController({ appName, navigation, executor });
+        this.commandBrowser = new CommandBrowserController({ commands, navigation, configController: this.config });
+        this.editor = new EditorController({ navigation });
+        this.logsModal = new LogsController({ navigation });
+        this.outcome = new OutcomeController({ navigation });
+    }
+
+    public get statusMessage(): string {
+        return this.executor.isExecuting ? "Executing..." : "Ready";
+    }
+
+    public getActiveCopyPayload(): CopyPayload | null {
+        // Modal takes priority over screen - if a modal is open, use its copy payload
+        const topModal = this.navigation.modalStack[this.navigation.modalStack.length - 1];
+        if (topModal?.id === "logs") {
+            return this.logsModal.getCopyPayload(this.logs);
+        }
+
+        if (topModal?.id === "editor") {
+            return this.editor.getCopyPayload();
+        }
+
+        // No modal open, check current screen
+        const currentRoute = this.navigation.current.route as TuiRoute;
+        if (currentRoute === "config") {
+            const params = this.navigation.current.params as ConfigRouteParams | undefined;
+            if (params) {
+                return this.config.getCopyPayload(params);
+            }
+        }
+
+        if (currentRoute === "results" || currentRoute === "error") {
+            return this.outcome.getCopyPayload(currentRoute);
+        }
+
+        return null;
+    }
+
+    public renderAppShell({
+        app,
+        copyToast,
+    }: {
+        app: { name: string; displayName?: string; version: string; breadcrumb?: string[] };
+        copyToast?: string | null;
+    }): React.ReactNode {
+        const currentRoute = this.navigation.current.route as TuiRoute;
+
+        const { screen, breadcrumb } = this.renderScreen(currentRoute);
+        const modals = this.renderModals();
+
+        return (
+            <RenderAppShell
+                app={{
+                    name: app.name,
+                    displayName: app.displayName,
+                    version: app.version,
+                    breadcrumb: breadcrumb ?? app.breadcrumb,
+                }}
+                status={{
+                    isExecuting: this.executor.isExecuting,
+                    isCancelling: this.executor.isCancelling,
+                    message: this.statusMessage,
+                }}
+                screen={screen}
+                modals={modals}
+                copyToast={copyToast}
+            />
+        );
+    }
+
+    private renderScreen(route: TuiRoute): { screen: React.ReactNode; breadcrumb?: string[] } {
+        if (route === "commandBrowser") {
+            const { node, breadcrumb } = this.commandBrowser.render();
+            return { screen: node, breadcrumb };
+        }
+
+        if (route === "config") {
+            const { node, breadcrumb } = this.config.render();
+            return { screen: node, breadcrumb };
+        }
+
+        if (route === "running" || route === "results" || route === "error") {
+            const { node } = this.outcome.render(route);
+            return { screen: node };
+        }
+
+        return { screen: null };
+    }
+
+    private renderModals(): AppShellProps["modals"] {
+        const modals: React.ReactNode[] = this.navigation.modalStack.map((modal) => {
+            if (modal.id === "logs") {
+                return this.logsModal.render(this.logs);
+            }
+
+            if (modal.id === "editor") {
+                return this.editor.render(modal.params as EditorModalParams | undefined);
+            }
+
+            return null;
+        });
+
+        return modals.filter(Boolean) as React.ReactNode[];
+    }
+}

package/src/tui/driver/context/TuiDriverContext.tsx

@@ -0,0 +1,44 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import type { AnyCommand } from "../../../core/command.ts";
+
+import { useNavigation } from "../../context/NavigationContext.tsx";
+import { useExecutor } from "../../context/ExecutorContext.tsx";
+import { useLogs } from "../../context/LogsContext.tsx";
+
+import { TuiDriver } from "../TuiDriver.tsx";
+
+const TuiDriverContext = createContext<TuiDriver | null>(null);
+
+export function TuiDriverProvider({
+    appName,
+    commands,
+    children,
+}: {
+    appName: string;
+    commands: AnyCommand[];
+    children: ReactNode;
+}) {
+    const navigation = useNavigation();
+    const executor = useExecutor();
+    const { logs } = useLogs();
+
+    const driver = useMemo(() => {
+        return new TuiDriver({
+            appName,
+            commands,
+            navigation,
+            executor,
+            logs,
+        });
+    }, [appName, commands, executor, logs, navigation]);
+
+    return <TuiDriverContext.Provider value={driver}>{children}</TuiDriverContext.Provider>;
+}
+
+export function useTuiDriver(): TuiDriver {
+    const driver = useContext(TuiDriverContext);
+    if (!driver) {
+        throw new Error("useTuiDriver must be used within TuiDriverProvider");
+    }
+    return driver;
+}

package/src/tui/driver/types.ts

@@ -0,0 +1,72 @@
+import type { AnyCommand } from "../../core/command.ts";
+import type { OptionSchema } from "../../types/command.ts";
+import type { schemaToFieldConfigs } from "../utils/schemaToFields.ts";
+
+export type TuiRoute = "commandBrowser" | "config" | "running" | "results" | "error";
+
+export type TuiModalId = "logs" | "editor";
+
+export type EditorModalParams = {
+    fieldKey: string;
+    fieldDisplayName: string;
+    currentValue: unknown;
+    fieldConfigs: ReturnType<typeof schemaToFieldConfigs>;
+    /** Current buffer value (string representation) - used for reactive updates */
+    bufferValue?: string;
+    /** Current select index for enum/boolean fields */
+    selectIndex?: number;
+    onSubmit: (value: unknown) => void;
+    onCancel: () => void;
+};
+
+export type ConfigRouteParams = {
+    command: AnyCommand;
+    commandPath: string[];
+    values: Record<string, unknown>;
+    fieldConfigs: ReturnType<typeof schemaToFieldConfigs>;
+    selectedFieldIndex?: number;
+};
+
+export type CommandBrowserRouteParams = {
+    commandPath: string[];
+    selectedIndex?: number;
+};
+
+export type RunningRouteParams = {
+    command: AnyCommand;
+    commandPath: string[];
+    values: Record<string, unknown>;
+};
+
+export type ResultsRouteParams = {
+    command: AnyCommand;
+    commandPath: string[];
+    values: Record<string, unknown>;
+    result: unknown;
+};
+
+export type ErrorRouteParams = {
+    command: AnyCommand;
+    commandPath: string[];
+    values: Record<string, unknown>;
+    error: Error;
+};
+
+export type RouteParamsById = {
+    commandBrowser: CommandBrowserRouteParams;
+    config: ConfigRouteParams;
+    running: RunningRouteParams;
+    results: ResultsRouteParams;
+    error: ErrorRouteParams;
+};
+
+export type TuiScreenEntry = {
+    [K in TuiRoute]: { route: K; params: RouteParamsById[K] };
+}[TuiRoute];
+
+export type CopyPayload = {
+    label: string;
+    content: string;
+};
+
+export type CommandConfigDefaultsResolver = (schema: OptionSchema) => Record<string, unknown>;

package/src/tui/semantic/AppShell.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+
+export interface AppIdentity {
+    name: string;
+    displayName?: string;
+    version: string;
+    breadcrumb?: string[];
+}
+
+export interface AppStatus {
+    isExecuting: boolean;
+    isCancelling: boolean;
+    message: string;
+}
+
+export interface AppShellProps {
+    app: AppIdentity;
+    status: AppStatus;
+
+    screen: ReactNode;
+    modals: ReactNode[];
+
+    /** Optional copy toast message (adapter-owned display) */
+    copyToast?: string | null;
+}
+
+export function AppShell(_props: AppShellProps) {
+    // This is a semantic-only marker component. The adapter owns layout.
+    return null;
+}

package/src/tui/semantic/CommandBrowserScreen.tsx

@@ -0,0 +1,16 @@
+import type { AnyCommand } from "../../core/command.ts";
+
+export interface CommandBrowserScreenProps {
+    commandId: string[];
+    commands: AnyCommand[];
+    selectedCommandIndex: number;
+
+    onOpenPath: (commandId: string[]) => void;
+    onSelectCommand: (index: number) => void;
+    onRunSelected: () => void;
+}
+
+export function CommandBrowserScreen(_props: CommandBrowserScreenProps) {
+    // Semantic-only marker component. Adapter renders this.
+    return null;
+}

package/src/tui/semantic/ConfigScreen.tsx

@@ -0,0 +1,23 @@
+import type { FieldConfig } from "./types.ts";
+
+export interface ConfigScreenProps {
+    title: string;
+
+    commandId: string[];
+    fieldConfigs: FieldConfig[];
+    values: Record<string, unknown>;
+
+    /** CLI command string for display and copy */
+    cliCommand: string;
+
+    selectedFieldIndex: number;
+    onSelectionChange: (index: number) => void;
+
+    onEditField: (fieldId: string) => void;
+    onRun: () => void;
+}
+
+export function ConfigScreen(_props: ConfigScreenProps) {
+    // Semantic-only marker component. Adapter renders this.
+    return null;
+}

package/src/tui/semantic/EditorScreen.tsx

@@ -0,0 +1,20 @@
+export interface EditorScreenProps {
+    fieldId: string;
+    label: string;
+    valueString: string;
+
+    editorType: "text" | "number" | "select";
+
+    selectOptions?: { label: string; value: string }[];
+    selectIndex?: number;
+
+    onChangeText?: (text: string) => void;
+    onChangeSelectIndex?: (index: number) => void;
+    onSubmit?: () => void;
+    onCancel: () => void;
+}
+
+export function EditorScreen(_props: EditorScreenProps) {
+    // Semantic-only marker component. Adapter renders this.
+    return null;
+}

package/src/tui/semantic/LogsScreen.tsx

@@ -0,0 +1,9 @@
+export interface LogsScreenProps {
+    items: { level: string; message: string; timestamp: number }[];
+    onClose: () => void;
+}
+
+export function LogsScreen(_props: LogsScreenProps) {
+    // Semantic-only marker component. Adapter renders this.
+    return null;
+}

package/src/tui/semantic/RunningScreen.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import type { CommandResult } from "../../core/command.ts";
+
+export interface RunningScreenProps {
+    title: string;
+    kind: "running" | "results" | "error";
+    message?: string;
+    /** The actual result object when kind is "results" */
+    result?: CommandResult;
+    /** Custom content rendered by the command's renderResult method */
+    customContent?: ReactNode;
+}
+
+export function RunningScreen(_props: RunningScreenProps) {
+    // Semantic-only marker component. Adapter renders this.
+    return null;
+}

package/src/tui/semantic/layoutTypes.ts

@@ -0,0 +1,72 @@
+import type { ReactNode } from "react";
+
+export type Align = "flex-start" | "center" | "flex-end" | "stretch";
+export type Justify = "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+export type FlexDirection = "row" | "column";
+
+export interface Spacing {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+
+export interface LayoutProps {
+    flex?: number;
+    width?: number | string;
+    height?: number | string;
+    maxHeight?: number | string;
+
+    /** Positioning props for absolute/relative layouts */
+    top?: number | string;
+    left?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+
+    flexDirection?: FlexDirection;
+    alignItems?: Align;
+    justifyContent?: Justify;
+
+    gap?: number;
+    padding?: number | Spacing;
+
+    /** When set, should prevent the node from shrinking in flex layouts. */
+    noShrink?: boolean;
+}
+
+export type PanelSurface = "panel" | "overlay";
+
+export interface PanelProps extends LayoutProps {
+    title?: string;
+    focused?: boolean;
+    border?: boolean;
+    surface?: PanelSurface;
+
+    /** Renderer-level compact styling (e.g. no default padding). */
+    dense?: boolean;
+
+    children?: ReactNode;
+}
+
+export interface ScrollViewRef {
+    scrollToIndex: (index: number) => void;
+}
+
+export interface ScrollViewProps extends LayoutProps {
+    axis?: "vertical" | "horizontal" | "both";
+    stickyToEnd?: boolean;
+    focused?: boolean;
+    scrollRef?: (ref: ScrollViewRef | null) => void;
+    children?: ReactNode;
+}
+
+export interface OverlayProps {
+    zIndex?: number;
+    top?: number | string;
+    left?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    width?: number | string;
+    height?: number | string;
+    children?: ReactNode;
+}

package/src/tui/semantic/render.tsx

@@ -0,0 +1,44 @@
+import { AppShell, type AppShellProps } from "./AppShell.tsx";
+import { CommandBrowserScreen, type CommandBrowserScreenProps } from "./CommandBrowserScreen.tsx";
+import { ConfigScreen, type ConfigScreenProps } from "./ConfigScreen.tsx";
+import { RunningScreen, type RunningScreenProps } from "./RunningScreen.tsx";
+import { LogsScreen, type LogsScreenProps } from "./LogsScreen.tsx";
+import { EditorScreen, type EditorScreenProps } from "./EditorScreen.tsx";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function RenderAppShell(props: AppShellProps) {
+    const renderer = useRenderer();
+    // Keep marker component in tree for debugging/introspection.
+    void AppShell;
+    return renderer.renderSemanticAppShell(props);
+}
+
+export function RenderCommandBrowserScreen(props: CommandBrowserScreenProps) {
+    const renderer = useRenderer();
+    void CommandBrowserScreen;
+    return renderer.renderSemanticCommandBrowserScreen(props);
+}
+
+export function RenderConfigScreen(props: ConfigScreenProps) {
+    const renderer = useRenderer();
+    void ConfigScreen;
+    return renderer.renderSemanticConfigScreen(props);
+}
+
+export function RenderRunningScreen(props: RunningScreenProps) {
+    const renderer = useRenderer();
+    void RunningScreen;
+    return renderer.renderSemanticRunningScreen(props);
+}
+
+export function RenderLogsScreen(props: LogsScreenProps) {
+    const renderer = useRenderer();
+    void LogsScreen;
+    return renderer.renderSemanticLogsScreen(props);
+}
+
+export function RenderEditorScreen(props: EditorScreenProps) {
+    const renderer = useRenderer();
+    void EditorScreen;
+    return renderer.renderSemanticEditorScreen(props);
+}

package/src/tui/semantic/types.ts

@@ -1,15 +1,6 @@
 import type { ReactNode } from "react";
 
-export type Align = "flex-start" | "center" | "flex-end" | "stretch";
-export type Justify = "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly";
-export type FlexDirection = "row" | "column";
-
-export interface Spacing {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
-}
+export * from "./layoutTypes.ts";
 
 export interface ThemeConfig {
     colors: {
@@ -41,93 +32,6 @@ export interface ThemeConfig {
 
 export type SemanticColor = keyof ThemeConfig["colors"];
 
-export interface LayoutProps {
-    flex?: number;
-    width?: number | string;
-    height?: number | string;
-
-    flexDirection?: FlexDirection;
-    alignItems?: Align;
-    justifyContent?: Justify;
-
-    gap?: number;
-    padding?: number | Spacing;
-
-    /** When set, should prevent the node from shrinking in flex layouts. */
-    noShrink?: boolean;
-}
-
-export type PanelSurface = "panel" | "overlay";
-
-export interface PanelProps extends LayoutProps {
-    title?: string;
-    focused?: boolean;
-    border?: boolean;
-    surface?: PanelSurface;
-
-    /** Renderer-level compact styling (e.g. no default padding). */
-    dense?: boolean;
-
-    children?: ReactNode;
-}
-
-export interface ContainerProps extends LayoutProps {
-    children?: ReactNode;
-}
-
-export interface ScrollViewRef {
-    scrollToTop: () => void;
-    scrollToBottom: () => void;
-    scrollToIndex: (index: number) => void;
-}
-
-export interface ScrollViewProps extends LayoutProps {
-    axis?: "vertical" | "horizontal" | "both";
-    stickyToEnd?: boolean;
-    focused?: boolean;
-    scrollRef?: (ref: ScrollViewRef | null) => void;
-    children?: ReactNode;
-}
-
-export interface OverlayProps {
-    zIndex?: number;
-    top?: number | string;
-    left?: number | string;
-    right?: number | string;
-    bottom?: number | string;
-    width?: number | string;
-    height?: number | string;
-    children?: ReactNode;
-}
-
-export interface SpacerProps {
-    size: number;
-    axis?: "horizontal" | "vertical";
-}
-
-export interface SpinnerProps {
-    active: boolean;
-}
-
-export interface LabelProps {
-    color?: SemanticColor;
-    bold?: boolean;
-    italic?: boolean;
-    wrap?: boolean;
-    children: ReactNode;
-}
-
-export interface ValueProps {
-    color?: SemanticColor;
-    truncate?: boolean;
-    children: ReactNode;
-}
-
-export interface CodeProps {
-    color?: SemanticColor;
-    children: string;
-}
-
 export type CodeTokenType =
     | "punctuation"
     | "string"
@@ -146,6 +50,13 @@ export interface CodeHighlightProps {
     tokens: CodeToken[];
 }
 
+export interface LabelProps {
+    color?: SemanticColor;
+    bold?: boolean;
+    italic?: boolean;
+    children: ReactNode;
+}
+
 export interface FieldProps {
     label: string;
     value: ReactNode;
@@ -192,4 +103,26 @@ export interface MenuItemProps {
     suffix?: string;
     selected?: boolean;
     onActivate?: () => void;
-}
+}
+
+export interface SpinnerProps {
+    active: boolean;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// FieldConfig types (used by ConfigScreen, schemaToFields, adapter ConfigForm)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type FieldType = "text" | "number" | "boolean" | "enum";
+
+export interface FieldOption {
+    name: string;
+    value: unknown;
+}
+
+export interface FieldConfig {
+    key: string;
+    label: string;
+    type: FieldType;
+    options?: FieldOption[];
+}