@projectarachne/cli 0.1.0-beta.1

package/dist/tui/App.js

@@ -0,0 +1,1078 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { Box, Text, useApp, useInput } from 'ink';
+import { readdir, readFile, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { parse, stringify } from 'yaml';
+import { Header, Splash, CommandInput, Help, Settings as SettingsPanel, COMMANDS, Frame, ChatInput, ThemeDesigner, WorkflowPicker, PlannerView, } from './components/index.js';
+import { generatePlanFromGoal } from './services/generateSteps.js';
+import { scanProjectContext } from './services/context.js';
+import { executeStep } from './services/executor.js';
+import { getUserName } from './services/user.js';
+import { detectProvidersSync } from './services/providers.js';
+import { loadConfig } from './services/settings.js';
+import { loadTheme } from './services/theme.js';
+import { ThemeProvider } from './theme-context.js';
+const loadWorkflowFiles = async (dir) => {
+    try {
+        const entries = await readdir(dir, { withFileTypes: true });
+        return entries
+            .filter((entry) => entry.isFile() &&
+            (entry.name.endsWith('.yaml') || entry.name.endsWith('.yml')))
+            .map((entry) => ({
+            name: entry.name,
+            path: join(dir, entry.name),
+        }))
+            .sort((a, b) => a.name.localeCompare(b.name));
+    }
+    catch {
+        return [];
+    }
+};
+const parseWorkflowFile = async (path) => {
+    try {
+        const content = await readFile(path, 'utf-8');
+        const parsed = parse(content);
+        if (!parsed)
+            return null;
+        const steps = (parsed.steps || parsed.nodes || []).map(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (s, index) => ({
+            id: s.id || `step_${index + 1}`,
+            provider: (s.provider || s.agent || s.agentId || 'codex'),
+            model: s.model,
+            title: s.title,
+            phase: s.phase || s.phaseTitle,
+            prompt: s.prompt || s.promptTemplate || '',
+            approvalMode: s.approvalMode,
+            status: 'pending',
+        }));
+        return {
+            name: parsed.name || path.split('/').pop() || 'Untitled',
+            description: parsed.description,
+            path,
+            steps,
+            dirty: false,
+        };
+    }
+    catch {
+        return null;
+    }
+};
+const buildPhasesFromSteps = (steps) => {
+    const phases = [];
+    const phaseMap = new Map();
+    steps.forEach((step) => {
+        const phaseTitle = step.phase || 'Execution';
+        let phase = phaseMap.get(phaseTitle);
+        if (!phase) {
+            phase = {
+                id: phaseTitle.toLowerCase().replace(/\s+/g, '-'),
+                title: phaseTitle,
+                steps: [],
+            };
+            phaseMap.set(phaseTitle, phase);
+            phases.push(phase);
+        }
+        phase.steps.push(step);
+    });
+    return phases;
+};
+const flattenPhases = (phases) => {
+    return phases.flatMap((phase) => phase.steps.map((step) => ({
+        ...step,
+        phase: phase.title,
+    })));
+};
+const wrapPromptLines = (text, width) => {
+    if (!text)
+        return [''];
+    const safeWidth = Math.max(10, width);
+    const lines = [];
+    text.split('\n').forEach((rawLine) => {
+        let line = rawLine.replace(/\t/g, '  ');
+        if (line.length === 0) {
+            lines.push('');
+            return;
+        }
+        while (line.length > safeWidth) {
+            lines.push(line.slice(0, safeWidth));
+            line = line.slice(safeWidth);
+        }
+        lines.push(line);
+    });
+    return lines;
+};
+const getPromptViewerLayout = (prompt) => {
+    const columns = process.stdout?.columns ?? 80;
+    const rows = process.stdout?.rows ?? 24;
+    const width = Math.max(50, Math.min(columns - 6, 100));
+    const height = Math.max(8, Math.min(Math.floor(rows * 0.6), 18));
+    const lines = wrapPromptLines(prompt, width - 4);
+    const maxScroll = Math.max(0, lines.length - height);
+    return { width, height, lines, maxScroll };
+};
+export const App = () => {
+    const { exit } = useApp();
+    const initialConfig = useMemo(() => loadConfig(), []);
+    const [theme, setTheme] = useState(() => loadTheme());
+    const [state, setState] = useState(() => ({
+        view: 'home',
+        workflow: null,
+        workflowFiles: [],
+        selectedFileIndex: 0,
+        selectedStepIndex: 0,
+        providers: detectProvidersSync(),
+        history: [],
+        output: [],
+        error: null,
+        focusArea: 'sidebar',
+        settings: {
+            defaultProvider: initialConfig.defaults.provider,
+            defaultModel: initialConfig.defaults.model,
+            defaultApprovalMode: initialConfig.defaults.approvalMode,
+            defaultRunMode: initialConfig.defaults.runMode,
+        },
+    }));
+    const lastEscAtRef = useRef(0);
+    const [planningOutput, setPlanningOutput] = useState([]);
+    const planningBufferRef = useRef('');
+    const [showPromptViewer, setShowPromptViewer] = useState(false);
+    const [promptScroll, setPromptScroll] = useState(0);
+    const [editingField, setEditingField] = useState(null);
+    const [isRunning, setIsRunning] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [goal, setGoal] = useState('');
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [generatingStatus, setGeneratingStatus] = useState('');
+    const [projectContext, setProjectContext] = useState(null);
+    const [isPaused, setIsPaused] = useState(false);
+    const [showSplash, setShowSplash] = useState(true);
+    // Refs for synchronous access in async loops
+    const isRunningRef = useRef(false);
+    const isPausedRef = useRef(false);
+    const [userName, setUserName] = useState('');
+    const [showCommandPalette, setShowCommandPalette] = useState(false);
+    const [showHelp, setShowHelp] = useState(false);
+    const [showSettings, setShowSettings] = useState(false);
+    const [showThemeDesigner, setShowThemeDesigner] = useState(false);
+    const [chatInput, setChatInput] = useState('');
+    const [chatActive, setChatActive] = useState(false);
+    const reloadSettings = useCallback(() => {
+        const config = loadConfig();
+        setState((s) => ({
+            ...s,
+            settings: {
+                defaultProvider: config.defaults.provider,
+                defaultModel: config.defaults.model,
+                defaultApprovalMode: config.defaults.approvalMode,
+                defaultRunMode: config.defaults.runMode,
+            },
+        }));
+    }, []);
+    const reloadTheme = useCallback(() => {
+        setTheme(loadTheme());
+    }, []);
+    const closeSettings = useCallback(() => {
+        setShowSettings(false);
+        reloadSettings();
+        reloadTheme();
+    }, [reloadSettings, reloadTheme]);
+    const closeThemeDesigner = useCallback(() => {
+        setShowThemeDesigner(false);
+        reloadTheme();
+    }, [reloadTheme]);
+    // Initialize on mount
+    useEffect(() => {
+        const init = async () => {
+            // Get user name immediately
+            const name = getUserName();
+            setUserName(name);
+            setLoading(true);
+            const providers = detectProvidersSync();
+            const workflowFiles = await loadWorkflowFiles(process.cwd());
+            const context = await scanProjectContext(process.cwd());
+            setProjectContext(context);
+            setState((s) => ({ ...s, providers, workflowFiles }));
+            setLoading(false);
+        };
+        init();
+    }, []);
+    // Load workflow when selected file changes
+    const loadSelectedWorkflow = useCallback(async () => {
+        const file = state.workflowFiles[state.selectedFileIndex];
+        if (!file)
+            return;
+        const workflow = await parseWorkflowFile(file.path);
+        if (workflow) {
+            setState((s) => ({
+                ...s,
+                workflow,
+                selectedStepIndex: 0,
+                view: 'main',
+            }));
+        }
+    }, [state.workflowFiles, state.selectedFileIndex]);
+    // Handle keyboard input
+    useInput((input, key) => {
+        // During splash, any key skips it
+        if (showSplash) {
+            setShowSplash(false);
+            return;
+        }
+        // Close overlays first / handle escape flow
+        if (key.escape) {
+            const now = Date.now();
+            if (chatActive) {
+                setChatActive(false);
+                setChatInput('');
+                return;
+            }
+            if (showPromptViewer) {
+                setShowPromptViewer(false);
+                return;
+            }
+            if (showSettings) {
+                closeSettings();
+                return;
+            }
+            if (showThemeDesigner) {
+                closeThemeDesigner();
+                return;
+            }
+            if (showHelp) {
+                setShowHelp(false);
+                return;
+            }
+            if (showCommandPalette) {
+                setShowCommandPalette(false);
+                return;
+            }
+            if (editingField) {
+                setEditingField(null);
+                return;
+            }
+            if (state.view === 'main') {
+                setState((s) => ({ ...s, view: 'home', workflow: null }));
+                lastEscAtRef.current = now;
+                return;
+            }
+            if (state.view === 'load') {
+                setState((s) => ({ ...s, view: 'home' }));
+                lastEscAtRef.current = now;
+                return;
+            }
+            if (state.view === 'running' || state.view === 'output') {
+                setState((s) => ({ ...s, view: 'main' }));
+                return;
+            }
+            if (state.view === 'home') {
+                if (now - lastEscAtRef.current < 600) {
+                    exit();
+                    return;
+                }
+                lastEscAtRef.current = now;
+                return;
+            }
+            return;
+        }
+        // Prompt viewer input
+        if (showPromptViewer) {
+            const currentPrompt = state.workflow?.steps[state.selectedStepIndex]?.prompt ?? '';
+            const { maxScroll } = getPromptViewerLayout(currentPrompt);
+            if (key.upArrow) {
+                setPromptScroll((s) => Math.max(0, s - 1));
+            }
+            else if (key.downArrow) {
+                setPromptScroll((s) => Math.min(maxScroll, s + 1));
+            }
+            else if (input.toLowerCase() === 'e') {
+                if (state.workflow?.steps[state.selectedStepIndex]) {
+                    setEditingField('prompt');
+                    setShowPromptViewer(false);
+                }
+            }
+            return;
+        }
+        // Don't process other keys if overlays are open or typing in goal input
+        if (showHelp || showCommandPalette || showSettings || showThemeDesigner)
+            return;
+        if (chatActive)
+            return;
+        // Ctrl+C to cancel running workflow
+        if ((key.ctrl && input.toLowerCase() === 'c') || input === '\u0003') {
+            if (isRunning) {
+                setIsRunning(false);
+                isRunningRef.current = false;
+                setIsPaused(false);
+                isPausedRef.current = false;
+                setState((s) => ({
+                    ...s,
+                    output: [...s.output, '\n✗ Workflow cancelled by user.'],
+                }));
+            }
+            return;
+        }
+        // Global quit
+        if (input === 'q' && !editingField) {
+            exit();
+            return;
+        }
+        // Open command palette
+        if (input === '/' && !editingField) {
+            setShowCommandPalette(true);
+            setShowHelp(false);
+            setShowSettings(false);
+            setShowThemeDesigner(false);
+            return;
+        }
+        // Open help
+        if (input === '?' && !editingField) {
+            setShowHelp(true);
+            setShowCommandPalette(false);
+            setShowSettings(false);
+            setShowThemeDesigner(false);
+            return;
+        }
+        if (input.toLowerCase() === 'c' && !editingField && !isRunning && !isGenerating) {
+            setChatActive(true);
+            setChatInput('');
+            return;
+        }
+        // If editing, don't process other keys
+        if (editingField) {
+            if (key.return) {
+                setEditingField(null);
+            }
+            return;
+        }
+        // Load view navigation
+        if (state.view === 'load') {
+            if (key.upArrow) {
+                setState((s) => ({
+                    ...s,
+                    selectedFileIndex: Math.max(0, s.selectedFileIndex - 1),
+                }));
+                return;
+            }
+            if (key.downArrow) {
+                setState((s) => ({
+                    ...s,
+                    selectedFileIndex: Math.min(Math.max(0, s.workflowFiles.length - 1), s.selectedFileIndex + 1),
+                }));
+                return;
+            }
+            if (key.return) {
+                if (state.workflowFiles.length > 0) {
+                    loadSelectedWorkflow();
+                }
+                else {
+                    setState((s) => ({ ...s, error: 'No workflow files found.' }));
+                }
+                return;
+            }
+        }
+        if (key.tab &&
+            state.workflow &&
+            (state.view === 'main' || state.view === 'running' || state.view === 'output')) {
+            setState((s) => ({
+                ...s,
+                focusArea: s.focusArea === 'sidebar' ? 'content' : 'sidebar',
+            }));
+            return;
+        }
+        // Planner view - step navigation
+        if ((state.view === 'main' || state.view === 'running' || state.view === 'output') && state.workflow) {
+            if (state.focusArea === 'sidebar') {
+                if (key.upArrow) {
+                    setState((s) => ({
+                        ...s,
+                        selectedStepIndex: Math.max(0, s.selectedStepIndex - 1),
+                    }));
+                    return;
+                }
+                if (key.downArrow) {
+                    setState((s) => ({
+                        ...s,
+                        selectedStepIndex: Math.min((s.workflow?.steps.length || 1) - 1, s.selectedStepIndex + 1),
+                    }));
+                    return;
+                }
+            }
+        }
+        // Global shortcuts
+        switch (input.toLowerCase()) {
+            case 'a':
+                if (state.view === 'home') {
+                    if (!isRunning && !isGenerating) {
+                        setChatActive(true);
+                        setChatInput('');
+                        setGoal('');
+                    }
+                }
+                else if (state.workflow?.steps[state.selectedStepIndex]) {
+                    // Change provider
+                    setEditingField('provider');
+                }
+                break;
+            case 'l':
+                if (state.workflowFiles.length > 0) {
+                    setState((s) => ({ ...s, view: 'load' }));
+                }
+                else {
+                    setState((s) => ({ ...s, error: 'No workflow files found.' }));
+                }
+                break;
+            case 'm':
+                if (state.view === 'home' || state.view === 'load') {
+                    if (!isRunning && !isGenerating) {
+                        setChatActive(false);
+                        setChatInput('');
+                        setGoal('');
+                        createNewWorkflow(undefined, '');
+                    }
+                }
+                else if (state.workflow?.steps[state.selectedStepIndex]) {
+                    // Change model
+                    setEditingField('model');
+                }
+                break;
+            case 'e':
+                // Edit prompt
+                if (state.workflow?.steps[state.selectedStepIndex]) {
+                    setEditingField('prompt');
+                    setShowPromptViewer(false);
+                }
+                break;
+            case '-':
+                // Delete step
+                deleteStep();
+                break;
+            case 's':
+                if ((state.view === 'home' || state.view === 'load') && !editingField) {
+                    setShowSettings(true);
+                    setShowCommandPalette(false);
+                    setShowHelp(false);
+                    setShowThemeDesigner(false);
+                }
+                else if (key.ctrl || !editingField) {
+                    // Save
+                    saveWorkflow();
+                }
+                break;
+            case 'r':
+                // Run or Resume
+                if (isRunning && isPaused) {
+                    setIsPaused(false);
+                    isPausedRef.current = false;
+                }
+                else if (!isRunning) {
+                    runWorkflow();
+                }
+                break;
+            case 'p':
+                if (isRunning) {
+                    if (isPaused) {
+                        setIsPaused(false);
+                        isPausedRef.current = false;
+                    }
+                    else {
+                        setIsPaused(true);
+                        isPausedRef.current = true;
+                    }
+                }
+                else if (!isGenerating && state.view !== 'home') {
+                    setChatActive(true);
+                    setChatInput('');
+                }
+                break;
+            case 'v':
+                if (state.focusArea === 'content' &&
+                    state.workflow?.steps[state.selectedStepIndex]) {
+                    setPromptScroll(0);
+                    setShowPromptViewer(true);
+                }
+                break;
+            case '+':
+                // Add step (alternative to separate action)
+                addStep();
+                break;
+        }
+        if (input === ' ') {
+            if (isRunning) {
+                if (isPaused) {
+                    setIsPaused(false);
+                    isPausedRef.current = false;
+                }
+                else {
+                    setIsPaused(true);
+                    isPausedRef.current = true;
+                }
+            }
+        }
+    });
+    const createNewWorkflow = (stepsOrPhases, description) => {
+        const defaultProvider = state.settings.defaultProvider;
+        const steps = Array.isArray(stepsOrPhases)
+            ? (stepsOrPhases.length > 0 && 'steps' in stepsOrPhases[0]
+                ? flattenPhases(stepsOrPhases)
+                : stepsOrPhases)
+            : undefined;
+        const newWorkflow = {
+            name: 'New Workflow',
+            description: description ?? goal ?? '',
+            steps: steps || [
+                {
+                    id: 'step_1',
+                    provider: defaultProvider,
+                    prompt: '',
+                    phase: 'Phase 1',
+                    status: 'pending',
+                },
+            ],
+            dirty: true,
+        };
+        setState((s) => ({
+            ...s,
+            workflow: newWorkflow,
+            selectedStepIndex: 0,
+            focusArea: 'sidebar',
+            view: 'main',
+        }));
+    };
+    const generateWorkflow = async (goalText) => {
+        const targetGoal = goalText ?? goal;
+        if (!targetGoal.trim() || isGenerating || !projectContext)
+            return;
+        setIsGenerating(true);
+        setGeneratingStatus('Scanning project...');
+        setPlanningOutput([]);
+        planningBufferRef.current = '';
+        try {
+            // Re-scan context to get latest state
+            const context = await scanProjectContext(process.cwd());
+            setProjectContext(context);
+            // Use the user's default provider for planning
+            const defaultProviderName = state.settings.defaultProvider;
+            const planningProvider = state.providers.find((p) => p.name === defaultProviderName && p.available && p.supportsAgentic)
+                || state.providers.find((p) => p.available && p.supportsAgentic);
+            const provider = planningProvider?.name || 'codex';
+            const phases = await generatePlanFromGoal(targetGoal, context, provider, setGeneratingStatus, (chunk) => {
+                const text = chunk.replace(/\r/g, '');
+                const buffer = planningBufferRef.current + text;
+                const lines = buffer.split('\n');
+                planningBufferRef.current = lines.pop() ?? '';
+                const cleaned = lines
+                    .map((line) => line.trimEnd())
+                    .filter((line) => line.length > 0);
+                if (cleaned.length === 0)
+                    return;
+                setPlanningOutput((prev) => {
+                    const next = [...prev, ...cleaned];
+                    return next.slice(-40);
+                });
+            });
+            setGeneratingStatus('Creating workflow...');
+            createNewWorkflow(phases, targetGoal);
+            setGoal('');
+            setChatInput('');
+        }
+        catch (error) {
+            setState((s) => ({
+                ...s,
+                error: `Generation failed: ${error}`,
+            }));
+            // Fall back to empty workflow
+            createNewWorkflow(undefined, targetGoal);
+        }
+        finally {
+            setIsGenerating(false);
+            setGeneratingStatus('');
+        }
+    };
+    const handleChatSubmit = async () => {
+        const text = chatInput.trim();
+        if (!text) {
+            setChatActive(false);
+            setChatInput('');
+            return;
+        }
+        if (text.startsWith('/')) {
+            const query = text.slice(1).trim().toLowerCase();
+            const cmd = COMMANDS.find((command) => command.name.toLowerCase() === query ||
+                command.aliases.some((alias) => alias.toLowerCase() === query));
+            if (cmd) {
+                handleCommand(cmd);
+            }
+            else {
+                setState((s) => ({ ...s, error: `Unknown command: /${query}` }));
+            }
+            setChatActive(false);
+            setChatInput('');
+            return;
+        }
+        setChatActive(false);
+        setGoal(text);
+        await generateWorkflow(text);
+    };
+    const addStep = () => {
+        if (!state.workflow)
+            return;
+        const defaultProvider = state.settings.defaultProvider;
+        const currentPhase = state.workflow.steps[state.selectedStepIndex]?.phase || 'Phase 1';
+        const newStep = {
+            id: `step_${state.workflow.steps.length + 1}`,
+            provider: defaultProvider,
+            prompt: '',
+            phase: currentPhase,
+            status: 'pending',
+        };
+        setState((s) => ({
+            ...s,
+            workflow: s.workflow
+                ? {
+                    ...s.workflow,
+                    steps: [...s.workflow.steps, newStep],
+                    dirty: true,
+                }
+                : null,
+            selectedStepIndex: s.workflow ? s.workflow.steps.length : 0,
+        }));
+    };
+    const deleteStep = () => {
+        if (!state.workflow || state.workflow.steps.length <= 1)
+            return;
+        setState((s) => {
+            if (!s.workflow)
+                return s;
+            const newSteps = s.workflow.steps.filter((_, i) => i !== s.selectedStepIndex);
+            return {
+                ...s,
+                workflow: {
+                    ...s.workflow,
+                    steps: newSteps,
+                    dirty: true,
+                },
+                selectedStepIndex: Math.min(s.selectedStepIndex, newSteps.length - 1),
+            };
+        });
+    };
+    const updateStepPrompt = (value) => {
+        setState((s) => {
+            if (!s.workflow)
+                return s;
+            const newSteps = [...s.workflow.steps];
+            newSteps[s.selectedStepIndex] = {
+                ...newSteps[s.selectedStepIndex],
+                prompt: value,
+            };
+            return {
+                ...s,
+                workflow: {
+                    ...s.workflow,
+                    steps: newSteps,
+                    dirty: true,
+                },
+            };
+        });
+    };
+    const updateStepProvider = (provider) => {
+        setState((s) => {
+            if (!s.workflow)
+                return s;
+            const newSteps = [...s.workflow.steps];
+            const providerConfig = s.providers.find((p) => p.name === provider);
+            newSteps[s.selectedStepIndex] = {
+                ...newSteps[s.selectedStepIndex],
+                provider,
+                model: providerConfig?.defaultModel, // Reset to provider's default model
+            };
+            return {
+                ...s,
+                workflow: {
+                    ...s.workflow,
+                    steps: newSteps,
+                    dirty: true,
+                },
+            };
+        });
+        setEditingField(null);
+    };
+    const updateStepModel = (model) => {
+        setState((s) => {
+            if (!s.workflow)
+                return s;
+            const newSteps = [...s.workflow.steps];
+            newSteps[s.selectedStepIndex] = {
+                ...newSteps[s.selectedStepIndex],
+                model,
+            };
+            return {
+                ...s,
+                workflow: {
+                    ...s.workflow,
+                    steps: newSteps,
+                    dirty: true,
+                },
+            };
+        });
+        setEditingField(null);
+    };
+    const saveWorkflow = async () => {
+        if (!state.workflow)
+            return;
+        const yamlContent = stringify({
+            version: '1',
+            name: state.workflow.name,
+            description: state.workflow.description || '',
+            steps: state.workflow.steps.map((s) => ({
+                id: s.id,
+                provider: s.provider,
+                ...(s.model ? { model: s.model } : {}),
+                ...(s.title ? { title: s.title } : {}),
+                ...(s.phase ? { phase: s.phase } : {}),
+                prompt: s.prompt,
+                ...(s.approvalMode ? { approvalMode: s.approvalMode } : {}),
+            })),
+        });
+        const path = state.workflow.path || join(process.cwd(), 'workflow.yaml');
+        try {
+            await writeFile(path, yamlContent, 'utf-8');
+            setState((s) => ({
+                ...s,
+                workflow: s.workflow
+                    ? { ...s.workflow, path, dirty: false }
+                    : null,
+            }));
+        }
+        catch (error) {
+            setState((s) => ({
+                ...s,
+                error: `Failed to save: ${error}`,
+            }));
+        }
+    };
+    const runWorkflow = async () => {
+        if (!state.workflow || isRunning)
+            return;
+        const workingDir = projectContext?.workingDir || process.cwd();
+        const defaultApprovalMode = state.settings.defaultApprovalMode;
+        const defaultRunMode = state.settings.defaultRunMode;
+        const manualMode = defaultRunMode === 'manual';
+        const phases = buildPhasesFromSteps(state.workflow.steps);
+        const phaseByStepId = new Map();
+        phases.forEach((phase) => {
+            const lastStep = phase.steps[phase.steps.length - 1];
+            phase.steps.forEach((step) => {
+                phaseByStepId.set(step.id, {
+                    title: phase.title,
+                    lastStepId: lastStep?.id || step.id,
+                });
+            });
+        });
+        // Save first if dirty
+        if (state.workflow.dirty) {
+            await saveWorkflow();
+        }
+        setIsRunning(true);
+        isRunningRef.current = true;
+        setIsPaused(false);
+        isPausedRef.current = false;
+        setState((s) => ({
+            ...s,
+            view: 'running',
+            output: [],
+            workflow: s.workflow
+                ? {
+                    ...s.workflow,
+                    steps: s.workflow.steps.map((step) => ({
+                        ...step,
+                        status: 'pending',
+                        output: undefined,
+                        error: undefined,
+                        commitHash: undefined,
+                    })),
+                }
+                : null,
+        }));
+        // Add initial context info
+        setState((s) => ({
+            ...s,
+            output: [
+                `Working directory: ${workingDir}`,
+                `Project type: ${projectContext?.projectType || 'Unknown'}`,
+                `Git branch: ${projectContext?.gitBranch || 'N/A'}`,
+                `Approval mode: ${defaultApprovalMode}`,
+                `Run mode: ${defaultRunMode}`,
+                '─'.repeat(50),
+                '',
+            ],
+        }));
+        const workflow = state.workflow;
+        if (manualMode) {
+            setIsPaused(true);
+            isPausedRef.current = true;
+            setState((s) => ({
+                ...s,
+                output: [...s.output, 'Manual mode enabled. Press [R] to run the next step.'],
+            }));
+        }
+        for (let i = 0; i < workflow.steps.length; i++) {
+            // Check if cancelled
+            if (!isRunningRef.current)
+                break;
+            // Check if paused
+            if (isPausedRef.current) {
+                setState((s) => ({
+                    ...s,
+                    output: [...s.output, '\n⏸ Workflow paused. Press [R] to resume.'],
+                }));
+                // Wait for resume
+                while (isPausedRef.current && isRunningRef.current) {
+                    await new Promise((resolve) => setTimeout(resolve, 100));
+                }
+                if (!isRunningRef.current)
+                    break;
+            }
+            const step = workflow.steps[i];
+            const phaseMeta = phaseByStepId.get(step.id);
+            // Mark step as running
+            setState((s) => {
+                if (!s.workflow)
+                    return s;
+                const newSteps = [...s.workflow.steps];
+                newSteps[i] = { ...newSteps[i], status: 'running' };
+                return {
+                    ...s,
+                    workflow: { ...s.workflow, steps: newSteps },
+                };
+            });
+            // Execute the step with real agent
+            const approvalMode = step.approvalMode || defaultApprovalMode;
+            const result = await executeStep(step, workingDir, approvalMode, projectContext, (output) => {
+                setState((s) => ({
+                    ...s,
+                    output: [...s.output, output],
+                }));
+            });
+            if (result.success) {
+                setState((s) => {
+                    if (!s.workflow)
+                        return s;
+                    const newSteps = [...s.workflow.steps];
+                    newSteps[i] = {
+                        ...newSteps[i],
+                        status: 'success',
+                        output: result.output,
+                        duration: result.duration,
+                        commitHash: result.commitHash,
+                    };
+                    return {
+                        ...s,
+                        workflow: { ...s.workflow, steps: newSteps },
+                    };
+                });
+                if (phaseMeta && phaseMeta.lastStepId === step.id) {
+                    setState((s) => ({
+                        ...s,
+                        output: [...s.output, `✓ Phase complete: ${phaseMeta.title}`],
+                    }));
+                }
+                if (manualMode && i < workflow.steps.length - 1) {
+                    setIsPaused(true);
+                    isPausedRef.current = true;
+                    setState((s) => ({
+                        ...s,
+                        output: [...s.output, 'Manual mode: press [R] to run the next step.'],
+                    }));
+                }
+            }
+            else {
+                setState((s) => {
+                    if (!s.workflow)
+                        return s;
+                    const newSteps = [...s.workflow.steps];
+                    newSteps[i] = {
+                        ...newSteps[i],
+                        status: 'failed',
+                        error: result.error,
+                        duration: result.duration,
+                    };
+                    return {
+                        ...s,
+                        workflow: { ...s.workflow, steps: newSteps },
+                    };
+                });
+                if (phaseMeta) {
+                    setState((s) => ({
+                        ...s,
+                        output: [...s.output, `✗ Phase failed: ${phaseMeta.title}`],
+                    }));
+                }
+                // Stop on failure
+                break;
+            }
+        }
+        setIsRunning(false);
+        isRunningRef.current = false;
+        setState((s) => ({
+            ...s,
+            output: [...s.output, '', '═'.repeat(50), 'Workflow execution complete.'],
+        }));
+    };
+    // Handle command from command palette
+    const handleCommand = (command) => {
+        switch (command.name) {
+            case 'new':
+                if (!isRunning && !isGenerating) {
+                    setChatActive(true);
+                    setChatInput('');
+                    setGoal('');
+                }
+                break;
+            case 'manual':
+                if (!isRunning && !isGenerating) {
+                    setChatActive(false);
+                    setChatInput('');
+                    setGoal('');
+                    createNewWorkflow(undefined, '');
+                }
+                break;
+            case 'open':
+                setState((s) => ({ ...s, view: 'load' }));
+                break;
+            case 'save':
+                saveWorkflow();
+                break;
+            case 'run':
+                runWorkflow();
+                break;
+            case 'plan':
+                if (!isRunning && !isGenerating) {
+                    setChatActive(true);
+                    setChatInput('');
+                }
+                break;
+            case 'add':
+                addStep();
+                break;
+            case 'edit':
+                if (state.workflow?.steps[state.selectedStepIndex]) {
+                    setEditingField('prompt');
+                }
+                break;
+            case 'delete':
+                deleteStep();
+                break;
+            case 'settings':
+                setShowSettings(true);
+                setShowCommandPalette(false);
+                setShowHelp(false);
+                setShowThemeDesigner(false);
+                break;
+            case 'theme':
+                setShowThemeDesigner(true);
+                setShowCommandPalette(false);
+                setShowHelp(false);
+                setShowSettings(false);
+                break;
+            case 'help':
+                setShowHelp(true);
+                setShowCommandPalette(false);
+                setShowSettings(false);
+                setShowThemeDesigner(false);
+                break;
+            case 'quit':
+                exit();
+                break;
+            case 'refresh':
+                loadWorkflowFiles(process.cwd()).then((files) => {
+                    setState((s) => ({ ...s, workflowFiles: files }));
+                });
+                break;
+            case 'clear':
+                setState((s) => ({ ...s, output: [] }));
+                break;
+        }
+    };
+    const showOverlay = showCommandPalette || showHelp || showSettings || showThemeDesigner || showPromptViewer;
+    const promptView = useMemo(() => {
+        if (!showPromptViewer || !state.workflow)
+            return null;
+        const step = state.workflow.steps[state.selectedStepIndex];
+        if (!step)
+            return null;
+        const layout = getPromptViewerLayout(step.prompt || '');
+        const scroll = Math.min(promptScroll, layout.maxScroll);
+        const visibleLines = layout.lines.slice(scroll, scroll + layout.height);
+        return {
+            title: step.title || step.id,
+            prompt: step.prompt || '',
+            scroll,
+            visibleLines,
+            ...layout,
+        };
+    }, [showPromptViewer, state.workflow, state.selectedStepIndex, promptScroll]);
+    useEffect(() => {
+        if (promptView && promptScroll > promptView.maxScroll) {
+            setPromptScroll(promptView.maxScroll);
+        }
+    }, [promptScroll, promptView]);
+    // Build commands with actions
+    const commands = COMMANDS.map((cmd) => ({
+        ...cmd,
+        action: () => handleCommand(cmd),
+    }));
+    // Show splash screen
+    if (showSplash) {
+        return (_jsx(Splash, { userName: userName, onComplete: () => setShowSplash(false) }));
+    }
+    const renderChatContent = () => {
+        if (isGenerating) {
+            return (_jsxs(Box, { flexDirection: "column", padding: 1, gap: 1, flexGrow: 1, children: [_jsx(Text, { color: theme.colors.accent, bold: true, children: "Planning..." }), generatingStatus ? (_jsx(Text, { color: theme.colors.muted, children: generatingStatus })) : (_jsx(Text, { color: theme.colors.muted, children: "Preparing workflow plan." })), _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.panel.border, paddingX: 1, paddingY: 0, flexGrow: 1, children: planningOutput.length === 0 ? (_jsx(Text, { color: theme.colors.muted, dimColor: true, children: "Waiting for model output..." })) : (planningOutput.slice(-12).map((line, index) => (_jsx(Text, { color: theme.colors.text, wrap: "wrap", children: line }, `${index}-${line.slice(0, 12)}`)))) })] }));
+        }
+        if (state.view === 'load') {
+            return (_jsx(WorkflowPicker, { workflows: state.workflowFiles, selectedIndex: state.selectedFileIndex }));
+        }
+        if (state.view === 'home') {
+            return _jsx(Box, { flexGrow: 1 });
+        }
+        if (state.workflow) {
+            const phases = buildPhasesFromSteps(state.workflow.steps);
+            return (_jsx(PlannerView, { phases: phases, selectedStepIndex: state.selectedStepIndex, detailsFocused: state.focusArea === 'content', providers: state.providers, output: state.output, isRunning: isRunning, editingField: editingField, onPromptChange: updateStepPrompt, onProviderSelect: updateStepProvider, onModelSelect: updateStepModel, onEditingChange: setEditingField }));
+        }
+        return (_jsx(Box, { padding: 1, children: _jsx(Text, { color: theme.colors.muted, children: "No workflow loaded." }) }));
+    };
+    const quickActions = state.view === 'home'
+        ? [
+            { key: 'A', label: 'Auto plan' },
+            { key: 'M', label: 'Manual plan' },
+            { key: 'L', label: 'Load workflow' },
+            { key: 'S', label: 'Settings' },
+        ]
+        : state.view === 'load'
+            ? [
+                { key: 'P', label: 'Plan' },
+                { key: 'M', label: 'Manual plan' },
+                { key: 'L', label: 'Load workflow' },
+                { key: 'S', label: 'Settings' },
+            ]
+            : [
+                { key: 'A', label: 'Provider' },
+                { key: 'M', label: 'Model' },
+                { key: 'P', label: isRunning ? 'Pause' : 'Plan' },
+                { key: 'S', label: 'Save' },
+                { key: 'L', label: 'Load' },
+                { key: 'R', label: isRunning ? (isPaused ? 'Resume' : 'Running') : 'Run' },
+                { key: 'C', label: 'Input' },
+            ];
+    return (_jsx(ThemeProvider, { value: theme, children: _jsx(Frame, { children: _jsxs(Box, { flexDirection: "column", width: "100%", height: "100%", children: [_jsx(Header, { userName: userName, version: "0.1", gitBranch: projectContext?.gitBranch }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [!showOverlay && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.panel.borderFocus, paddingX: 1, paddingY: 1, flexGrow: 1, children: [state.workflow?.name && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.colors.accent, bold: true, children: state.workflow.name }) })), _jsx(Box, { flexGrow: 1, children: renderChatContent() }), _jsx(Box, { marginTop: 1, children: _jsx(ChatInput, { value: chatInput, active: chatActive, disabled: isRunning || isGenerating, disabledMessage: isGenerating
+                                                ? generatingStatus
+                                                    ? `Planning: ${generatingStatus}`
+                                                    : 'Planning...'
+                                                : 'Input disabled while running.', placeholder: "Describe a goal or type /command", onChange: setChatInput, onSubmit: handleChatSubmit }) })] })), showPromptViewer && promptView && (_jsx(Box, { flexGrow: 1, alignItems: "center", justifyContent: "center", children: _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.panel.borderFocus, paddingX: 2, paddingY: 1, width: promptView.width, children: [_jsxs(Box, { justifyContent: "space-between", marginBottom: 1, children: [_jsx(Text, { color: theme.colors.accent, bold: true, children: "Prompt Viewer" }), _jsx(Text, { color: theme.colors.muted, children: "[Esc] Close" })] }), _jsx(Text, { color: theme.colors.muted, dimColor: true, children: promptView.title }), _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.panel.border, paddingX: 1, paddingY: 0, marginTop: 1, height: promptView.height, children: promptView.visibleLines.length === 0 ? (_jsx(Text, { color: theme.colors.muted, dimColor: true, children: "No prompt text." })) : (promptView.visibleLines.map((line, index) => (_jsx(Text, { color: theme.colors.text, children: line }, `${promptView.scroll + index}-${line.slice(0, 8)}`)))) }), _jsxs(Box, { marginTop: 1, justifyContent: "space-between", children: [_jsx(Text, { color: theme.colors.muted, dimColor: true, children: "\u2191\u2193 Scroll \u2022 E Edit" }), promptView.maxScroll > 0 && (_jsxs(Text, { color: theme.colors.muted, dimColor: true, children: [promptView.scroll + 1, "/", promptView.maxScroll + 1] }))] })] }) })), showCommandPalette && (_jsx(Box, { flexGrow: 1, alignItems: "center", justifyContent: "center", children: _jsx(CommandInput, { commands: commands, onClose: () => setShowCommandPalette(false), onExecute: (cmd) => {
+                                        handleCommand(cmd);
+                                        setShowCommandPalette(false);
+                                    } }) })), showHelp && (_jsx(Box, { flexGrow: 1, alignItems: "center", justifyContent: "center", children: _jsx(Help, { onClose: () => setShowHelp(false) }) })), showSettings && (_jsx(Box, { flexGrow: 1, alignItems: "center", justifyContent: "center", children: _jsx(SettingsPanel, { onClose: closeSettings }) })), showThemeDesigner && (_jsx(Box, { flexGrow: 1, alignItems: "center", justifyContent: "center", children: _jsx(ThemeDesigner, { provider: state.settings.defaultProvider, onClose: closeThemeDesigner, onSaved: reloadTheme }) }))] }), !showOverlay && (_jsx(Box, { flexDirection: "row", gap: 3, paddingX: 1, paddingY: 1, children: quickActions.map((action) => (_jsxs(Text, { color: theme.colors.text, children: [_jsxs(Text, { color: theme.colors.warning, children: ["[", action.key, "]"] }), " ", action.label] }, action.key))) })), !showOverlay && (_jsxs(Box, { marginTop: 1, flexDirection: "row", justifyContent: "space-between", children: [state.view === 'home' ? (_jsx(Text, { color: theme.colors.muted, dimColor: true, children: projectContext?.workingDir || process.cwd() })) : (_jsx(Text, { children: " " })), _jsx(Text, { color: theme.colors.muted, dimColor: true, children: "[/] Commands  [?] Help  [Q] Quit" })] })), state.error && (_jsx(Box, { borderStyle: "round", borderColor: theme.colors.danger, paddingX: 1, marginTop: 1, children: _jsx(Text, { color: theme.colors.danger, children: state.error }) }))] }) }) }));
+};
+//# sourceMappingURL=App.js.map