@pablozaiden/terminatui 0.1.2 → 0.3.0-beta-1

package/src/tui/screens/ConfigScreen.tsx

@@ -0,0 +1,160 @@
+import { useCallback, useMemo, useState } from "react";
+import type { AnyCommand } from "../../core/command.ts";
+import type { FieldConfig } from "../components/types.ts";
+import { ConfigForm } from "../components/ConfigForm.tsx";
+import { Container } from "../semantic/Container.tsx";
+import { MenuButton } from "../semantic/MenuButton.tsx";
+import { schemaToFieldConfigs } from "../utils/schemaToFields.ts";
+import { useClipboardProvider } from "../hooks/useClipboardProvider.ts";
+import { buildCliCommand } from "../utils/buildCliCommand.ts";
+import { useTuiApp } from "../context/TuiAppContext.tsx";
+import { useNavigation } from "../context/NavigationContext.tsx";
+import { useExecutor } from "../context/ExecutorContext.tsx";
+import type { ScreenComponent } from "../registry.ts";
+import { savePersistedParameters } from "../utils/parameterPersistence.ts";
+import type { OptionSchema, OptionValues } from "../../types/command.ts";
+import { ScreenBase } from "./ScreenBase.ts";
+import type { EditorModalParams } from "../modals/EditorModal.tsx";
+import type { CliModalParams } from "../modals/CliModal.tsx";
+import { RunningScreen, type RunningParams } from "./RunningScreen.tsx";
+import { type ErrorParams, ErrorScreen } from "./ErrorScreen.tsx";
+import { type ResultsParams, ResultsScreen } from "./ResultsScreen.tsx";
+
+/**
+ * Screen state stored in navigation params.
+ */
+export interface ConfigParams {
+    command: AnyCommand;
+    commandPath: string[];
+    values: Record<string, unknown>;
+    fieldConfigs: FieldConfig[];
+}
+
+/**
+ * Config screen for editing command options before execution.
+ * Fully self-contained - gets all data from context and handles its own transitions.
+ */
+export class ConfigScreen extends ScreenBase {
+    static readonly Id = "config";
+    getRoute(): string {
+        return ConfigScreen.Id;
+    }
+
+    override component(): ScreenComponent {
+        return function ConfigScreenComponent() {
+            const { name: appName } = useTuiApp();
+            const navigation = useNavigation();
+            const executor = useExecutor();
+            
+            // Get params from navigation
+            const params = navigation.current.params as ConfigParams | undefined;
+            if (!params) return null;
+            
+            const { command, commandPath, values, fieldConfigs } = params;
+            
+            // Local selection state for the form
+            const [selectedFieldIndex, setSelectedFieldIndex] = useState(0);
+
+            // Derive field configs (in case they weren't passed)
+            const derivedFieldConfigs = useMemo(
+                () => fieldConfigs ?? schemaToFieldConfigs(command.options),
+                [fieldConfigs, command.options]
+            );
+
+            // Register clipboard provider for this screen
+            useClipboardProvider(
+                useCallback(() => ({
+                    content: JSON.stringify(values, null, 2),
+                    label: "Config",
+                }), [values])
+            );
+
+            // Handle running the command
+            const handleRun = useCallback(async () => {
+                // Save parameters for next time
+                savePersistedParameters(appName, command.name, values);
+                
+                // Push to running screen
+                navigation.push<RunningParams>(RunningScreen.Id, {
+                    command,
+                    commandPath,
+                    values,
+                });
+                
+                // Execute the command
+                const outcome = await executor.execute(command, values);
+                
+                if (outcome.cancelled) {
+                    // If cancelled, pop back to config
+                    navigation.pop();
+                    return;
+                }
+                
+                if (outcome.success) {
+                    // Replace running with results
+                    navigation.replace<ResultsParams>(ResultsScreen.Id, {
+                        command,
+                        commandPath,
+                        values,
+                        result: outcome.result ?? null,
+                    });
+                } else {
+                    // Replace running with error
+                    navigation.replace<ErrorParams>(ErrorScreen.Id, {
+                        command,
+                        commandPath,
+                        values,
+                        error: outcome.error ?? new Error("Unknown error"),
+                    });
+                }
+            }, [appName, command, commandPath, values, navigation, executor]);
+
+            // Handle editing a field - open property editor modal
+            const handleEditField = useCallback((fieldKey: string) => {
+                navigation.openModal<EditorModalParams>("property-editor", {
+                    fieldKey,
+                    currentValue: values[fieldKey],
+                    fieldConfigs: derivedFieldConfigs,
+                    onSubmit: (value: unknown) => {
+                        const nextValues = { ...values, [fieldKey]: value };
+                        navigation.replace<ConfigParams>(ConfigScreen.Id, { ...params, values: nextValues });
+                        navigation.closeModal();
+                    },
+                    onCancel: () => navigation.closeModal(),
+                });
+            }, [navigation, values, derivedFieldConfigs, params]);
+
+            // Handle opening the CLI Args modal
+            const handleShowCliArgs = useCallback(() => {
+                const cli = buildCliCommand(appName, commandPath, command.options, values as OptionValues<OptionSchema>);
+                navigation.openModal<CliModalParams>("cli", { command: cli });
+            }, [appName, commandPath, command.options, values, navigation]);
+
+            return (
+                <Container flexDirection="column" flex={1}>
+                    <ConfigForm
+                        title={`Configure: ${command.displayName ?? command.name}`}
+                        fieldConfigs={derivedFieldConfigs}
+                        values={values}
+                        selectedIndex={selectedFieldIndex}
+                        focused={true}
+                        onSelectionChange={setSelectedFieldIndex}
+                        onEditField={handleEditField}
+                        onAction={handleRun}
+                        additionalButtons={
+                            command.supportsCli()
+                                ? [{ label: "CLI Command", onPress: handleShowCliArgs }]
+                                : []
+                        }
+                        actionButton={
+                            <MenuButton
+                                label={command.actionLabel ?? "Run"}
+                                selected={selectedFieldIndex === derivedFieldConfigs.length + 1}
+                            />
+                        }
+                    />
+                </Container>
+            );
+        };
+    }
+}

package/src/tui/screens/ErrorScreen.tsx

@@ -0,0 +1,58 @@
+import { useCallback } from "react";
+import type { AnyCommand } from "../../core/command.ts";
+import { useNavigation } from "../context/NavigationContext.tsx";
+import { ResultsPanel } from "../components/ResultsPanel.tsx";
+import { useClipboardProvider } from "../hooks/useClipboardProvider.ts";
+import type { ScreenComponent } from "../registry.ts";
+import { ScreenBase } from "./ScreenBase.ts";
+
+/**
+ * Screen state stored in navigation params.
+ */
+export interface ErrorParams {
+    command: AnyCommand;
+    commandPath: string[];
+    values: Record<string, unknown>;
+    error: Error;
+}
+
+/**
+ * Error screen - shows command execution errors.
+ * Fully self-contained - gets all data from context and handles its own transitions.
+ */
+export class ErrorScreen extends ScreenBase {
+    static readonly Id = "error";
+
+    getRoute(): string {
+        return ErrorScreen.Id;
+    }
+
+    override component(): ScreenComponent {
+        return function ErrorScreenComponent() {
+            const navigation = useNavigation();
+            
+            // Get params from navigation
+            const params = navigation.current.params as ErrorParams | undefined;
+            if (!params) return null;
+            
+            const { error, command } = params;
+
+            // Register clipboard provider for this screen
+            useClipboardProvider(
+                useCallback(() => ({
+                    content: error.message,
+                    label: "Error",
+                }), [error])
+            );
+
+            return (
+                <ResultsPanel
+                    result={null}
+                    error={error}
+                    focused={true}
+                    renderResult={command.renderResult}
+                />
+            );
+        };
+    }
+}

package/src/tui/screens/ResultsScreen.tsx

@@ -0,0 +1,60 @@
+import { useCallback } from "react";
+import type { AnyCommand, CommandResult } from "../../core/command.ts";
+import { useNavigation } from "../context/NavigationContext.tsx";
+import { ResultsPanel } from "../components/ResultsPanel.tsx";
+import { useClipboardProvider } from "../hooks/useClipboardProvider.ts";
+import { type ScreenComponent } from "../registry.ts";
+import { ScreenBase } from "./ScreenBase.ts";
+
+/**
+ * Screen state stored in navigation params.
+ */
+export interface ResultsParams {
+    command: AnyCommand;
+    commandPath: string[];
+    values: Record<string, unknown>;
+    result: unknown;
+}
+
+export class ResultsScreen extends ScreenBase {
+    static readonly Id = "results";
+
+    getRoute(): string {
+        return ResultsScreen.Id;
+    }
+    /**
+     * Results screen - shows command execution results.
+     * Fully self-contained - gets all data from context and handles its own transitions.
+     */
+    override component(): ScreenComponent {
+        return function ResultsScreenComponent() {
+            const navigation = useNavigation();
+
+            // Get params from navigation
+            const params = navigation.current.params as ResultsParams | undefined;
+            if (!params) return null;
+
+            const { result, command } = params;
+
+            // Register clipboard provider for this screen
+            useClipboardProvider(
+                useCallback(() => {
+                    if (command.getClipboardContent) {
+                        const custom = command.getClipboardContent(result as CommandResult);
+                        if (custom) return { content: custom, label: "Results" };
+                    }
+                    return { content: JSON.stringify(result, null, 2), label: "Results" };
+                }, [result, command])
+            );
+
+            return (
+                <ResultsPanel
+                    result={result as CommandResult | null}
+                    error={null}
+                    focused={true}
+                    renderResult={command.renderResult}
+                />
+            );
+        }
+    }
+}

package/src/tui/screens/RunningScreen.tsx

@@ -0,0 +1,72 @@
+import { useCallback } from "react";
+import type { AnyCommand } from "../../core/command.ts";
+import { useNavigation } from "../context/NavigationContext.tsx";
+import { useExecutor } from "../context/ExecutorContext.tsx";
+import { useBackHandler } from "../hooks/useBackHandler.ts";
+import type { ScreenComponent } from "../registry.ts";
+import { ScreenBase } from "./ScreenBase.ts";
+import { Container } from "../semantic/Container.tsx";
+import { Label } from "../semantic/Label.tsx";
+import { Panel } from "../semantic/Panel.tsx";
+
+/**
+ * Screen state stored in navigation params.
+ */
+export interface RunningParams {
+    command: AnyCommand;
+    commandPath: string[];
+    values: Record<string, unknown>;
+}
+
+/**
+ * Running screen - shows while a command is executing.
+ * Fully self-contained - gets all data from context and handles its own transitions.
+ */
+export class RunningScreen extends ScreenBase {
+    static readonly Id = "running";
+    getRoute(): string {
+        return RunningScreen.Id;
+    }
+
+    override component(): ScreenComponent {
+        return function RunningScreenComponent() {
+            const navigation = useNavigation();
+            const executor = useExecutor();
+            
+            // Get params from navigation
+            const params = navigation.current.params as RunningParams | undefined;
+            if (!params) return null;
+            
+            const { command } = params;
+
+            // Register back handler - cancel execution on back
+            useBackHandler(useCallback(() => {
+                if (executor.isExecuting) {
+                    executor.cancel();
+                    executor.reset();
+                    // Pop back to config screen
+                    navigation.pop();
+                    return true;
+                }
+                return false;
+            }, [executor, navigation]));
+
+            return (
+                <Panel
+                    flexDirection="column"
+                    flex={1}
+                    title={`Running ${command.displayName ?? command.name}`}
+                    padding={1}
+                    focused
+                >
+                    <Container flexDirection="column" flex={1} gap={1}>
+                        <Label color="mutedText">
+                            Check logs for progress.
+                        </Label>
+                        <Label color="mutedText">Press Esc to cancel.</Label>
+                    </Container>
+                </Panel>
+            );
+        };
+    }
+}

package/src/tui/screens/ScreenBase.ts

@@ -0,0 +1,6 @@
+import type { ScreenComponent } from "../registry";
+
+export abstract class ScreenBase {
+    abstract component(): ScreenComponent;
+    abstract getRoute(): string;
+}

package/src/tui/semantic/Button.tsx

@@ -0,0 +1,7 @@
+import type { ButtonProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function Button(props: ButtonProps) {
+    const renderer = useRenderer();
+    return renderer.components.Button(props);
+}

package/src/tui/semantic/Code.tsx

@@ -0,0 +1,7 @@
+import type { CodeProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function Code(props: CodeProps) {
+    const renderer = useRenderer();
+    return renderer.components.Code(props);
+}

package/src/tui/semantic/CodeHighlight.tsx

@@ -0,0 +1,7 @@
+import type { CodeHighlightProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function CodeHighlight(props: CodeHighlightProps) {
+    const renderer = useRenderer();
+    return renderer.components.CodeHighlight(props);
+}

package/src/tui/semantic/Container.tsx

@@ -0,0 +1,7 @@
+import type { ContainerProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function Container(props: ContainerProps) {
+    const renderer = useRenderer();
+    return renderer.components.Container(props);
+}

package/src/tui/semantic/Field.tsx

@@ -0,0 +1,7 @@
+import type { FieldProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function Field(props: FieldProps) {
+    const renderer = useRenderer();
+    return renderer.components.Field(props);
+}

package/src/tui/semantic/Label.tsx

@@ -0,0 +1,7 @@
+import type { LabelProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function Label(props: LabelProps) {
+    const renderer = useRenderer();
+    return renderer.components.Label(props);
+}

package/src/tui/semantic/MenuButton.tsx

@@ -0,0 +1,7 @@
+import type { MenuButtonProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function MenuButton(props: MenuButtonProps) {
+    const renderer = useRenderer();
+    return renderer.components.MenuButton(props);
+}

package/src/tui/semantic/MenuItem.tsx

@@ -0,0 +1,7 @@
+import type { MenuItemProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function MenuItem(props: MenuItemProps) {
+    const renderer = useRenderer();
+    return renderer.components.MenuItem(props);
+}

package/src/tui/semantic/Overlay.tsx

@@ -0,0 +1,7 @@
+import type { OverlayProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function Overlay(props: OverlayProps) {
+    const renderer = useRenderer();
+    return renderer.components.Overlay(props);
+}

package/src/tui/semantic/Panel.tsx

@@ -0,0 +1,7 @@
+import type { PanelProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function Panel(props: PanelProps) {
+    const renderer = useRenderer();
+    return renderer.components.Panel(props);
+}

package/src/tui/semantic/ScrollView.tsx

@@ -0,0 +1,9 @@
+import type { ScrollViewProps, ScrollViewRef } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function ScrollView(props: ScrollViewProps) {
+    const renderer = useRenderer();
+    return renderer.components.ScrollView(props);
+}
+
+export type { ScrollViewRef };

package/src/tui/semantic/Select.tsx

@@ -0,0 +1,7 @@
+import type { SelectProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function Select(props: SelectProps) {
+    const renderer = useRenderer();
+    return renderer.components.Select(props);
+}

package/src/tui/semantic/Spacer.tsx

@@ -0,0 +1,7 @@
+import type { SpacerProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function Spacer(props: SpacerProps) {
+    const renderer = useRenderer();
+    return renderer.components.Spacer(props);
+}

package/src/tui/semantic/Spinner.tsx

@@ -0,0 +1,7 @@
+import type { SpinnerProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function Spinner(props: SpinnerProps) {
+    const renderer = useRenderer();
+    return renderer.components.Spinner(props);
+}

package/src/tui/semantic/TextInput.tsx

@@ -0,0 +1,7 @@
+import type { TextInputProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function TextInput(props: TextInputProps) {
+    const renderer = useRenderer();
+    return renderer.components.TextInput(props);
+}

package/src/tui/semantic/Value.tsx

@@ -0,0 +1,7 @@
+import type { ValueProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function Value(props: ValueProps) {
+    const renderer = useRenderer();
+    return renderer.components.Value(props);
+}