@orderful/droid 0.2.0 → 0.4.0

package/dist/commands/tui.js

@@ -0,0 +1,737 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { render, Box, Text, useInput, useApp } from 'ink';
+import TextInput from 'ink-text-input';
+import { useState, useMemo } from 'react';
+import { execSync } from 'child_process';
+import { existsSync, readdirSync, readFileSync } from 'fs';
+import { join } from 'path';
+import { getBundledSkills, getBundledSkillsDir, isSkillInstalled, getInstalledSkill, installSkill, uninstallSkill, isCommandInstalled, installCommand, uninstallCommand, } from '../lib/skills.js';
+import { getBundledAgents, getBundledAgentsDir, isAgentInstalled, installAgent, uninstallAgent } from '../lib/agents.js';
+import { configExists, loadConfig, saveConfig, loadSkillOverrides, saveSkillOverrides } from '../lib/config.js';
+import { configureAIToolPermissions } from './setup.js';
+import { AITool, BuiltInOutput, ConfigOptionType } from '../lib/types.js';
+import { getVersion } from '../lib/version.js';
+const colors = {
+    primary: '#6366f1',
+    bgSelected: '#2d2d2d',
+    border: '#3a3a3a',
+    text: '#e8e8e8',
+    textMuted: '#999999',
+    textDim: '#6a6a6a',
+    success: '#4ade80',
+    error: '#f87171',
+};
+function getCommandsFromSkills() {
+    const skillsDir = getBundledSkillsDir();
+    const commands = [];
+    if (!existsSync(skillsDir))
+        return commands;
+    const skillDirs = readdirSync(skillsDir, { withFileTypes: true })
+        .filter((d) => d.isDirectory())
+        .map((d) => d.name);
+    for (const skillName of skillDirs) {
+        const commandsDir = join(skillsDir, skillName, 'commands');
+        if (!existsSync(commandsDir))
+            continue;
+        const cmdFiles = readdirSync(commandsDir).filter((f) => f.endsWith('.md'));
+        for (const file of cmdFiles) {
+            const content = readFileSync(join(commandsDir, file), 'utf-8');
+            const lines = content.split('\n');
+            const headerMatch = lines[0]?.match(/^#\s+\/(\S+)\s*-?\s*(.*)/);
+            if (!headerMatch)
+                continue;
+            const usage = [];
+            let inUsage = false;
+            for (const line of lines) {
+                if (line.startsWith('## Usage'))
+                    inUsage = true;
+                else if (line.startsWith('## ') && inUsage)
+                    break;
+                else if (inUsage && line.startsWith('/'))
+                    usage.push(line.trim());
+            }
+            commands.push({
+                name: headerMatch[1],
+                description: headerMatch[2] || '',
+                skillName,
+                usage,
+            });
+        }
+    }
+    return commands;
+}
+function detectAITool() {
+    try {
+        execSync('claude --version', { stdio: 'ignore' });
+        return AITool.ClaudeCode;
+    }
+    catch {
+        // Claude Code not found
+    }
+    try {
+        execSync('opencode --version', { stdio: 'ignore' });
+        return AITool.OpenCode;
+    }
+    catch {
+        // OpenCode not found
+    }
+    return null;
+}
+function getOutputOptions() {
+    const options = [
+        { label: 'Terminal (display in CLI)', value: BuiltInOutput.Terminal },
+        { label: 'Editor ($EDITOR)', value: BuiltInOutput.Editor },
+    ];
+    const skills = getBundledSkills();
+    for (const skill of skills) {
+        if (skill.provides_output) {
+            options.push({ label: `${skill.name} (${skill.description})`, value: skill.name });
+        }
+    }
+    return options;
+}
+function WelcomeScreen({ onContinue }) {
+    useInput((input, key) => {
+        if (key.return || input === 'q') {
+            onContinue();
+        }
+    });
+    return (_jsx(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", height: 16, children: _jsxs(Box, { flexDirection: "column", alignItems: "center", borderStyle: "single", borderColor: colors.border, paddingX: 4, paddingY: 1, children: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "\u2554\u2550\u2550\u2550\u2550\u2550\u2557    " }), _jsx(Text, { color: colors.text, children: "droid" }), _jsxs(Text, { color: colors.textDim, children: [" v", getVersion()] })] }), _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "\u2551 " }), _jsx(Text, { color: colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: " " }), _jsx(Text, { color: colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: " \u2551    " }), _jsx(Text, { color: colors.textMuted, children: "Teaching your droid new tricks" })] }), _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "\u255A\u2550\u2566\u2550\u2566\u2550\u255D    " }), _jsx(Text, { color: colors.textDim, children: "github.com/Orderful/droid" })] })] }), _jsx(Box, { marginTop: 2, marginBottom: 1, children: _jsxs(Text, { backgroundColor: colors.primary, color: "#ffffff", bold: true, children: [' ', "I'm probably the droid you are looking for.", ' '] }) }), _jsx(Text, { color: colors.textDim, children: "press enter" })] }) }));
+}
+function SetupScreen({ onComplete, onSkip, initialConfig }) {
+    const [step, setStep] = useState('ai_tool');
+    const [aiTool, setAITool] = useState(initialConfig?.ai_tool || detectAITool() || AITool.ClaudeCode);
+    const [userMention, setUserMention] = useState(initialConfig?.user_mention || '@user');
+    const [outputPreference, setOutputPreference] = useState(initialConfig?.output_preference || BuiltInOutput.Terminal);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [error, setError] = useState(null);
+    const aiToolOptions = useMemo(() => [
+        { label: 'Claude Code', value: AITool.ClaudeCode },
+        { label: 'OpenCode', value: AITool.OpenCode },
+    ], []);
+    const outputOptions = useMemo(() => getOutputOptions(), []);
+    const steps = ['ai_tool', 'user_mention', 'output_preference', 'confirm'];
+    const stepIndex = steps.indexOf(step);
+    const totalSteps = steps.length - 1; // Don't count confirm as a step
+    const handleUserMentionSubmit = () => {
+        if (!userMention.startsWith('@')) {
+            setError('Mention should start with @');
+            return;
+        }
+        setError(null);
+        setStep('output_preference');
+        setSelectedIndex(0);
+    };
+    // Handle escape during text input (only intercept escape, nothing else)
+    useInput((input, key) => {
+        if (key.escape) {
+            setStep('ai_tool');
+            setSelectedIndex(0);
+        }
+    }, { isActive: step === 'user_mention' });
+    // Handle all input for non-text-input steps
+    useInput((input, key) => {
+        if (key.escape) {
+            if (step === 'ai_tool') {
+                onSkip();
+            }
+            else if (step === 'output_preference') {
+                setStep('user_mention');
+            }
+            else if (step === 'confirm') {
+                setStep('output_preference');
+                setSelectedIndex(0);
+            }
+            return;
+        }
+        if (step === 'ai_tool') {
+            if (key.upArrow)
+                setSelectedIndex((prev) => Math.max(0, prev - 1));
+            if (key.downArrow)
+                setSelectedIndex((prev) => Math.min(aiToolOptions.length - 1, prev + 1));
+            if (key.return) {
+                setAITool(aiToolOptions[selectedIndex].value);
+                setStep('user_mention');
+            }
+        }
+        else if (step === 'output_preference') {
+            if (key.upArrow)
+                setSelectedIndex((prev) => Math.max(0, prev - 1));
+            if (key.downArrow)
+                setSelectedIndex((prev) => Math.min(outputOptions.length - 1, prev + 1));
+            if (key.return) {
+                setOutputPreference(outputOptions[selectedIndex].value);
+                setStep('confirm');
+            }
+        }
+        else if (step === 'confirm') {
+            if (key.return) {
+                const config = {
+                    ...loadConfig(),
+                    ai_tool: aiTool,
+                    user_mention: userMention,
+                    output_preference: outputPreference,
+                };
+                saveConfig(config);
+                configureAIToolPermissions(aiTool);
+                onComplete();
+            }
+        }
+    }, { isActive: step !== 'user_mention' });
+    const renderHeader = () => (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "[" }), _jsx(Text, { color: colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: " " }), _jsx(Text, { color: colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: "] " }), _jsx(Text, { color: colors.text, bold: true, children: "droid setup" }), _jsxs(Text, { color: colors.textDim, children: [" \u00B7 Step ", Math.min(stepIndex + 1, totalSteps), " of ", totalSteps] })] }) }));
+    if (step === 'ai_tool') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [renderHeader(), _jsx(Text, { color: colors.text, children: "Which AI tool are you using?" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: aiToolOptions.map((option, index) => (_jsxs(Text, { children: [_jsxs(Text, { color: colors.textDim, children: [index === selectedIndex ? '>' : ' ', " "] }), _jsx(Text, { color: index === selectedIndex ? colors.text : colors.textMuted, children: option.label }), option.value === detectAITool() && _jsx(Text, { color: colors.success, children: " (detected)" })] }, option.value))) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "\u2191\u2193 select \u00B7 enter next \u00B7 esc skip" }) })] }));
+    }
+    if (step === 'user_mention') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [renderHeader(), _jsx(Text, { color: colors.text, children: "What @mention should be used for you?" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: colors.textDim, children: '> ' }), _jsx(TextInput, { value: userMention, onChange: setUserMention, onSubmit: handleUserMentionSubmit, placeholder: "@user" })] }), error && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.error, children: error }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "enter next \u00B7 esc back" }) })] }));
+    }
+    if (step === 'output_preference') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [renderHeader(), _jsx(Text, { color: colors.text, children: "Default output preference for skill results?" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: outputOptions.map((option, index) => (_jsxs(Text, { children: [_jsxs(Text, { color: colors.textDim, children: [index === selectedIndex ? '>' : ' ', " "] }), _jsx(Text, { color: index === selectedIndex ? colors.text : colors.textMuted, children: option.label })] }, option.value))) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "\u2191\u2193 select \u00B7 enter next \u00B7 esc back" }) })] }));
+    }
+    // Confirm step
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [renderHeader(), _jsx(Text, { color: colors.text, bold: true, children: "Review your settings" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "AI Tool:       " }), _jsx(Text, { color: colors.text, children: aiTool === AITool.ClaudeCode ? 'Claude Code' : 'OpenCode' })] }), _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "Your @mention: " }), _jsx(Text, { color: colors.text, children: userMention })] }), _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "Output:        " }), _jsx(Text, { color: colors.text, children: outputOptions.find((o) => o.value === outputPreference)?.label || outputPreference })] })] }), _jsx(Box, { marginTop: 2, children: _jsxs(Text, { backgroundColor: colors.primary, color: "#ffffff", bold: true, children: [' ', "Save", ' '] }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "enter save \u00B7 esc back" }) })] }));
+}
+function TabBar({ tabs, activeTab }) {
+    return (_jsx(Box, { flexDirection: "row", children: tabs.map((tab) => (_jsxs(Text, { backgroundColor: tab.id === activeTab ? colors.primary : undefined, color: tab.id === activeTab ? '#ffffff' : colors.textMuted, bold: tab.id === activeTab, children: [' ', tab.label, ' '] }, tab.id))) }));
+}
+function SkillItem({ skill, isSelected, isActive, }) {
+    const installed = isSkillInstalled(skill.name);
+    const installedInfo = getInstalledSkill(skill.name);
+    return (_jsx(Box, { paddingX: 1, backgroundColor: isActive ? colors.bgSelected : undefined, children: _jsxs(Text, { children: [_jsxs(Text, { color: colors.textDim, children: [isSelected ? '>' : ' ', " "] }), _jsx(Text, { color: isSelected || isActive ? colors.text : colors.textMuted, children: skill.name }), installed && installedInfo && _jsxs(Text, { color: colors.textDim, children: [" v", installedInfo.version] }), installed && _jsx(Text, { color: colors.success, children: " *" })] }) }));
+}
+function CommandItem({ command, isSelected, }) {
+    const installed = isSkillInstalled(command.skillName);
+    return (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { children: [_jsxs(Text, { color: colors.textDim, children: [isSelected ? '>' : ' ', " "] }), _jsxs(Text, { color: isSelected ? colors.text : colors.textMuted, children: ["/", command.name] }), installed && _jsx(Text, { color: colors.success, children: " *" })] }) }));
+}
+function SkillDetails({ skill, isFocused, selectedAction, }) {
+    if (!skill) {
+        return (_jsx(Box, { paddingLeft: 2, flexGrow: 1, children: _jsx(Text, { color: colors.textDim, children: "Select a skill" }) }));
+    }
+    const installed = isSkillInstalled(skill.name);
+    const skillCommands = getCommandsFromSkills().filter((c) => c.skillName === skill.name);
+    const actions = installed
+        ? [
+            { id: 'view', label: 'View', variant: 'default' },
+            { id: 'configure', label: 'Configure', variant: 'primary' },
+            { id: 'uninstall', label: 'Uninstall', variant: 'danger' },
+        ]
+        : [
+            { id: 'view', label: 'View', variant: 'default' },
+            { id: 'install', label: 'Install', variant: 'primary' },
+        ];
+    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, flexGrow: 1, children: [_jsx(Text, { color: colors.text, bold: true, children: skill.name }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: [skill.version, skill.status && ` · ${skill.status}`, installed && _jsx(Text, { color: colors.success, children: " \u00B7 installed" })] }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textMuted, children: skill.description }) }), skillCommands.length > 0 && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: ["Commands: ", skillCommands.map((c) => `/${c.name}`).join(', ')] }) })), skill.examples && skill.examples.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: colors.textDim, children: ["Examples", skill.examples.length > 2 ? ` (showing 2 of ${skill.examples.length})` : '', ":"] }), skill.examples.slice(0, 2).map((example, i) => (_jsxs(Box, { flexDirection: "column", marginTop: i > 0 ? 1 : 0, children: [_jsxs(Text, { color: colors.textMuted, children: ["  ", example.title] }), example.code
+                                .trim()
+                                .split('\n')
+                                .slice(0, 3)
+                                .map((line, j) => (_jsxs(Text, { color: colors.textDim, children: ['    ', line] }, j)))] }, i)))] })), isFocused && (_jsx(Box, { flexDirection: "row", marginTop: 1, children: actions.map((action, index) => (_jsxs(Text, { backgroundColor: selectedAction === index
+                        ? action.variant === 'danger'
+                            ? colors.error
+                            : colors.primary
+                        : colors.bgSelected, color: selectedAction === index ? '#ffffff' : colors.textMuted, bold: selectedAction === index, children: [' ', action.label, ' '] }, action.id))) }))] }));
+}
+function CommandDetails({ command, isFocused, selectedAction, }) {
+    if (!command) {
+        return (_jsx(Box, { paddingLeft: 2, flexGrow: 1, children: _jsx(Text, { color: colors.textDim, children: "Select a command" }) }));
+    }
+    const skillInstalled = isSkillInstalled(command.skillName);
+    const installed = isCommandInstalled(command.name, command.skillName);
+    // If skill is installed, command comes with it - no standalone uninstall
+    const actions = skillInstalled
+        ? [{ id: 'view', label: 'View', variant: 'default' }]
+        : installed
+            ? [
+                { id: 'view', label: 'View', variant: 'default' },
+                { id: 'uninstall', label: 'Uninstall', variant: 'danger' },
+            ]
+            : [
+                { id: 'view', label: 'View', variant: 'default' },
+                { id: 'install', label: 'Install', variant: 'primary' },
+            ];
+    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, flexGrow: 1, children: [_jsxs(Text, { color: colors.text, bold: true, children: ["/", command.name] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: ["from ", command.skillName, skillInstalled && _jsx(Text, { color: colors.success, children: " \u00B7 via skill" }), !skillInstalled && installed && _jsx(Text, { color: colors.success, children: " \u00B7 installed" })] }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textMuted, children: command.description }) }), command.usage.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: colors.textDim, children: "Usage:" }), command.usage.map((u, i) => (_jsxs(Text, { color: colors.textMuted, children: ['  ', u] }, i)))] })), isFocused && (_jsx(Box, { flexDirection: "row", marginTop: 1, children: actions.map((action, index) => (_jsxs(Text, { backgroundColor: selectedAction === index
+                        ? action.variant === 'danger'
+                            ? colors.error
+                            : colors.primary
+                        : colors.bgSelected, color: selectedAction === index ? '#ffffff' : colors.textMuted, bold: selectedAction === index, children: [' ', action.label, ' '] }, action.id))) }))] }));
+}
+function AgentItem({ agent, isSelected }) {
+    const statusDisplay = agent.status === 'alpha' ? '[alpha]' : agent.status === 'beta' ? '[beta]' : '';
+    return (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { children: [_jsxs(Text, { color: colors.textDim, children: [isSelected ? '>' : ' ', " "] }), _jsx(Text, { color: isSelected ? colors.text : colors.textMuted, children: agent.name }), _jsxs(Text, { color: colors.textDim, children: [" v", agent.version] }), statusDisplay && _jsxs(Text, { color: colors.textDim, children: [" ", statusDisplay] })] }) }));
+}
+function AgentDetails({ agent, isFocused, selectedAction, }) {
+    if (!agent) {
+        return (_jsx(Box, { paddingLeft: 2, flexGrow: 1, children: _jsx(Text, { color: colors.textDim, children: "Select an agent" }) }));
+    }
+    const installed = isAgentInstalled(agent.name);
+    const statusDisplay = agent.status === 'alpha' ? '[alpha]' : agent.status === 'beta' ? '[beta]' : '';
+    const modeDisplay = agent.mode === 'primary' ? 'primary' : agent.mode === 'all' ? 'primary/subagent' : 'subagent';
+    const actions = installed
+        ? [
+            { id: 'view', label: 'View', variant: 'default' },
+            { id: 'uninstall', label: 'Uninstall', variant: 'danger' },
+        ]
+        : [
+            { id: 'view', label: 'View', variant: 'default' },
+            { id: 'install', label: 'Install', variant: 'primary' },
+        ];
+    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, flexGrow: 1, children: [_jsx(Text, { color: colors.text, bold: true, children: agent.name }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: ["v", agent.version, statusDisplay && _jsxs(Text, { children: [" \u00B7 ", statusDisplay] }), ' · ', modeDisplay, installed && _jsx(Text, { color: colors.success, children: " \u00B7 installed" })] }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textMuted, children: agent.description }) }), agent.tools && agent.tools.length > 0 && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: ["Tools: ", agent.tools.join(', ')] }) })), agent.triggers && agent.triggers.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: colors.textDim, children: "Triggers:" }), agent.triggers.slice(0, 3).map((trigger, i) => (_jsxs(Text, { color: colors.textMuted, children: ['  ', "\"", trigger, "\""] }, i)))] })), isFocused && (_jsx(Box, { flexDirection: "row", marginTop: 1, children: actions.map((action, index) => (_jsxs(Text, { backgroundColor: selectedAction === index
+                        ? action.variant === 'danger'
+                            ? colors.error
+                            : colors.primary
+                        : colors.bgSelected, color: selectedAction === index ? '#ffffff' : colors.textMuted, bold: selectedAction === index, children: [' ', action.label, ' '] }, action.id))) }))] }));
+}
+function MarkdownLine({ line, inCodeBlock }) {
+    // Code block content
+    if (inCodeBlock) {
+        return _jsx(Text, { color: "#a5d6ff", children: line || ' ' });
+    }
+    // Code block delimiter
+    if (line.startsWith('```')) {
+        return _jsx(Text, { color: colors.textDim, children: line });
+    }
+    // Headers
+    if (line.startsWith('# ')) {
+        return _jsx(Text, { color: colors.text, bold: true, children: line.slice(2) });
+    }
+    if (line.startsWith('## ')) {
+        return _jsx(Text, { color: colors.text, bold: true, children: line.slice(3) });
+    }
+    if (line.startsWith('### ')) {
+        return _jsx(Text, { color: "#c9d1d9", bold: true, children: line.slice(4) });
+    }
+    // YAML frontmatter delimiter
+    if (line === '---') {
+        return _jsx(Text, { color: colors.textDim, children: line });
+    }
+    // List items
+    if (line.match(/^[\s]*[-*]\s/)) {
+        return _jsx(Text, { color: colors.textMuted, children: line });
+    }
+    // Blockquotes
+    if (line.startsWith('>')) {
+        return _jsx(Text, { color: "#8b949e", italic: true, children: line });
+    }
+    // Table rows
+    if (line.includes('|')) {
+        return _jsx(Text, { color: colors.textMuted, children: line });
+    }
+    // Default
+    return _jsx(Text, { color: colors.textMuted, children: line || ' ' });
+}
+function ReadmeViewer({ title, content, onClose, }) {
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const lines = useMemo(() => content.split('\n'), [content]);
+    const maxVisible = 20;
+    // Pre-compute code block state for each line
+    const lineStates = useMemo(() => {
+        const states = [];
+        let inCode = false;
+        for (const line of lines) {
+            if (line.startsWith('```')) {
+                states.push(false); // Delimiter itself is not "in" code block for styling
+                inCode = !inCode;
+            }
+            else {
+                states.push(inCode);
+            }
+        }
+        return states;
+    }, [lines]);
+    // Max offset: when at end, we have top indicator + (maxVisible-1) content lines
+    // So max offset is lines.length - (maxVisible - 1) = lines.length - maxVisible + 1
+    const maxOffset = Math.max(0, lines.length - maxVisible + 1);
+    useInput((input, key) => {
+        if (key.escape) {
+            onClose();
+            return;
+        }
+        if (key.upArrow) {
+            setScrollOffset((prev) => Math.max(0, prev - 1));
+        }
+        if (key.downArrow) {
+            setScrollOffset((prev) => Math.min(maxOffset, prev + 1));
+        }
+        if (key.pageDown || input === ' ') {
+            setScrollOffset((prev) => Math.min(maxOffset, prev + maxVisible));
+        }
+        if (key.pageUp) {
+            setScrollOffset((prev) => Math.max(0, prev - maxVisible));
+        }
+    });
+    // Adjust visible lines based on whether indicators are shown
+    const showTopIndicator = scrollOffset > 0;
+    // Reserve space for bottom indicator if not at end
+    const contentLines = maxVisible - (showTopIndicator ? 1 : 0);
+    const endIndex = Math.min(scrollOffset + contentLines, lines.length);
+    const showBottomIndicator = endIndex < lines.length;
+    const actualContentLines = contentLines - (showBottomIndicator ? 1 : 0);
+    const visibleLines = lines.slice(scrollOffset, scrollOffset + actualContentLines);
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: colors.text, bold: true, children: title }), _jsxs(Text, { color: colors.textDim, children: [" \u00B7 ", lines.length, " lines"] })] }), _jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: colors.border, paddingX: 1, children: [showTopIndicator && (_jsxs(Text, { color: colors.textDim, children: ["\u2191 ", scrollOffset, " more lines"] })), visibleLines.map((line, i) => (_jsx(MarkdownLine, { line: line, inCodeBlock: lineStates[scrollOffset + i] }, scrollOffset + i))), showBottomIndicator && (_jsxs(Text, { color: colors.textDim, children: ["\u2193 ", lines.length - scrollOffset - actualContentLines, " more lines"] }))] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "\u2191\u2193 scroll \u00B7 space/pgdn page \u00B7 esc back" }) })] }));
+}
+function SettingsDetails({ onEditSettings, isFocused, }) {
+    const config = loadConfig();
+    const outputOptions = getOutputOptions();
+    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, flexGrow: 1, children: [_jsx(Text, { color: colors.text, bold: true, children: "Settings" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "AI Tool:       " }), _jsx(Text, { color: colors.text, children: config.ai_tool === AITool.ClaudeCode ? 'Claude Code' : 'OpenCode' })] }), _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "Your @mention: " }), _jsx(Text, { color: colors.text, children: config.user_mention })] }), _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "Output:        " }), _jsx(Text, { color: colors.text, children: outputOptions.find((o) => o.value === config.output_preference)?.label || config.output_preference })] })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "Config: ~/.droid/config.yaml" }) }), isFocused && (_jsx(Box, { marginTop: 2, children: _jsxs(Text, { backgroundColor: colors.primary, color: "#ffffff", bold: true, children: [' ', "Edit Settings", ' '] }) })), !isFocused && (_jsx(Box, { marginTop: 2, children: _jsx(Text, { color: colors.textDim, children: "press enter to edit" }) }))] }));
+}
+function SkillConfigScreen({ skill, onComplete, onCancel }) {
+    const configSchema = skill.config_schema || {};
+    const configKeys = Object.keys(configSchema);
+    const initialOverrides = useMemo(() => loadSkillOverrides(skill.name), [skill.name]);
+    // Initialize values from saved overrides or defaults
+    const [values, setValues] = useState(() => {
+        const initial = {};
+        for (const key of configKeys) {
+            const option = configSchema[key];
+            initial[key] = initialOverrides[key] ?? option.default ?? (option.type === ConfigOptionType.Boolean ? false : '');
+        }
+        return initial;
+    });
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [editingField, setEditingField] = useState(null);
+    const [editValue, setEditValue] = useState('');
+    const handleSave = () => {
+        saveSkillOverrides(skill.name, values);
+        onComplete();
+    };
+    const handleSubmitEdit = () => {
+        if (editingField) {
+            setValues((prev) => ({ ...prev, [editingField]: editValue }));
+            setEditingField(null);
+            setEditValue('');
+        }
+    };
+    // Handle text input for string fields
+    useInput((input, key) => {
+        if (key.escape) {
+            setEditingField(null);
+            setEditValue('');
+        }
+    }, { isActive: editingField !== null });
+    // Handle navigation and actions when not editing
+    useInput((input, key) => {
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        if (key.upArrow) {
+            setSelectedIndex((prev) => Math.max(0, prev - 1));
+        }
+        if (key.downArrow) {
+            // +1 for the Save button at the end
+            setSelectedIndex((prev) => Math.min(configKeys.length, prev + 1));
+        }
+        if (key.return) {
+            // Save button is at index === configKeys.length
+            if (selectedIndex === configKeys.length) {
+                handleSave();
+                return;
+            }
+            const key = configKeys[selectedIndex];
+            const option = configSchema[key];
+            if (option.type === ConfigOptionType.Boolean) {
+                // Toggle boolean
+                setValues((prev) => ({ ...prev, [key]: !prev[key] }));
+            }
+            else if (option.type === ConfigOptionType.String) {
+                // Enter edit mode for string
+                setEditingField(key);
+                setEditValue(String(values[key] || ''));
+            }
+        }
+    }, { isActive: editingField === null });
+    if (configKeys.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "[" }), _jsx(Text, { color: colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: " " }), _jsx(Text, { color: colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: "] " }), _jsxs(Text, { color: colors.text, bold: true, children: ["configure ", skill.name] })] }) }), _jsx(Text, { color: colors.textMuted, children: "This skill has no configuration options." }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "esc to go back" }) })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "[" }), _jsx(Text, { color: colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: " " }), _jsx(Text, { color: colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: "] " }), _jsxs(Text, { color: colors.text, bold: true, children: ["configure ", skill.name] })] }) }), _jsxs(Box, { flexDirection: "column", children: [configKeys.map((key, index) => {
+                        const option = configSchema[key];
+                        const isSelected = selectedIndex === index;
+                        const isEditing = editingField === key;
+                        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { children: [_jsxs(Text, { color: colors.textDim, children: [isSelected ? '>' : ' ', " "] }), _jsx(Text, { color: isSelected ? colors.text : colors.textMuted, children: key })] }), _jsxs(Text, { color: colors.textDim, children: ["    ", option.description] }), _jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, children: "    " }), option.type === ConfigOptionType.Boolean ? (_jsxs(Text, { color: colors.text, children: ["[", values[key] ? 'x' : ' ', "] ", values[key] ? 'enabled' : 'disabled'] })) : isEditing ? (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, children: '> ' }), _jsx(TextInput, { value: editValue, onChange: setEditValue, onSubmit: handleSubmitEdit })] })) : (_jsx(Text, { color: colors.text, children: String(values[key]) || '(not set)' }))] })] }, key));
+                    }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsxs(Text, { color: colors.textDim, children: [selectedIndex === configKeys.length ? '>' : ' ', " "] }), _jsxs(Text, { backgroundColor: selectedIndex === configKeys.length ? colors.primary : undefined, color: selectedIndex === configKeys.length ? '#ffffff' : colors.textMuted, bold: selectedIndex === configKeys.length, children: [' ', "Save", ' '] })] }) })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: editingField ? 'enter save · esc cancel' : '↑↓ select · enter toggle/edit · esc back' }) })] }));
+}
+function App() {
+    const { exit } = useApp();
+    const tabs = [
+        { id: 'skills', label: 'Skills' },
+        { id: 'commands', label: 'Commands' },
+        { id: 'agents', label: 'Agents' },
+        { id: 'settings', label: 'Settings' },
+    ];
+    const [activeTab, setActiveTab] = useState('skills');
+    const [tabIndex, setTabIndex] = useState(0);
+    const [view, setView] = useState('welcome');
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [selectedAction, setSelectedAction] = useState(0);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const [message, setMessage] = useState(null);
+    const [isEditingSettings, setIsEditingSettings] = useState(false);
+    const [readmeContent, setReadmeContent] = useState(null);
+    const MAX_VISIBLE_ITEMS = 6;
+    const skills = getBundledSkills();
+    const commands = getCommandsFromSkills();
+    const agents = getBundledAgents();
+    useInput((input, key) => {
+        if (message)
+            setMessage(null);
+        if (view === 'welcome')
+            return;
+        if (input === 'q') {
+            exit();
+            return;
+        }
+        if (view === 'menu') {
+            if (key.leftArrow) {
+                const newIndex = Math.max(0, tabIndex - 1);
+                setTabIndex(newIndex);
+                setActiveTab(tabs[newIndex].id);
+                setSelectedIndex(0);
+                setScrollOffset(0);
+            }
+            if (key.rightArrow) {
+                const newIndex = Math.min(tabs.length - 1, tabIndex + 1);
+                setTabIndex(newIndex);
+                setActiveTab(tabs[newIndex].id);
+                setSelectedIndex(0);
+                setScrollOffset(0);
+            }
+            if (key.upArrow) {
+                setSelectedIndex((prev) => {
+                    const newIndex = Math.max(0, prev - 1);
+                    // Scroll up if needed
+                    if (newIndex < scrollOffset) {
+                        setScrollOffset(newIndex);
+                    }
+                    return newIndex;
+                });
+                setSelectedAction(0);
+            }
+            if (key.downArrow) {
+                const maxIndex = activeTab === 'skills' ? skills.length - 1 : activeTab === 'commands' ? commands.length - 1 : 0;
+                setSelectedIndex((prev) => {
+                    const newIndex = Math.min(maxIndex, prev + 1);
+                    // Scroll down if needed
+                    if (newIndex >= scrollOffset + MAX_VISIBLE_ITEMS) {
+                        setScrollOffset(newIndex - MAX_VISIBLE_ITEMS + 1);
+                    }
+                    return newIndex;
+                });
+                setSelectedAction(0);
+            }
+            if (key.return) {
+                if (activeTab === 'skills' && skills.length > 0) {
+                    setView('detail');
+                }
+                else if (activeTab === 'commands' && commands.length > 0) {
+                    setView('detail');
+                }
+                else if (activeTab === 'agents' && agents.length > 0) {
+                    setView('detail');
+                }
+                else if (activeTab === 'settings') {
+                    setIsEditingSettings(true);
+                    setView('setup');
+                }
+            }
+        }
+        else if (view === 'detail') {
+            if (key.escape || key.backspace) {
+                setView('menu');
+                setSelectedAction(0);
+            }
+            if (key.leftArrow) {
+                setSelectedAction((prev) => Math.max(0, prev - 1));
+            }
+            if (key.rightArrow) {
+                let maxActions = 0;
+                if (activeTab === 'skills') {
+                    const skill = skills[selectedIndex];
+                    const installed = skill ? isSkillInstalled(skill.name) : false;
+                    maxActions = installed ? 2 : 1; // View, Configure, Uninstall or View, Install
+                }
+                else if (activeTab === 'agents') {
+                    maxActions = 1; // View, Install/Uninstall
+                }
+                else if (activeTab === 'commands') {
+                    const command = commands[selectedIndex];
+                    // If parent skill is installed, only View is available
+                    const skillInstalled = command ? isSkillInstalled(command.skillName) : false;
+                    maxActions = skillInstalled ? 0 : 1;
+                }
+                setSelectedAction((prev) => Math.min(maxActions, prev + 1));
+            }
+            if (key.return && activeTab === 'skills') {
+                const skill = skills[selectedIndex];
+                if (skill) {
+                    const installed = isSkillInstalled(skill.name);
+                    // Actions: installed = [View, Configure, Uninstall], not installed = [View, Install]
+                    if (selectedAction === 0) {
+                        // View
+                        const skillMdPath = join(getBundledSkillsDir(), skill.name, 'SKILL.md');
+                        if (existsSync(skillMdPath)) {
+                            const content = readFileSync(skillMdPath, 'utf-8');
+                            setReadmeContent({ title: `${skill.name}/SKILL.md`, content });
+                            setView('readme');
+                        }
+                    }
+                    else if (installed && selectedAction === 1) {
+                        // Configure
+                        setView('configure');
+                    }
+                    else if (installed && selectedAction === 2) {
+                        // Uninstall
+                        const result = uninstallSkill(skill.name);
+                        setMessage({
+                            text: result.success ? `✓ Uninstalled ${skill.name}` : `✗ ${result.message}`,
+                            type: result.success ? 'success' : 'error',
+                        });
+                        if (result.success) {
+                            setView('menu');
+                            setSelectedAction(0);
+                        }
+                    }
+                    else if (!installed && selectedAction === 1) {
+                        // Install
+                        const result = installSkill(skill.name);
+                        setMessage({
+                            text: result.success ? `✓ Installed ${skill.name}` : `✗ ${result.message}`,
+                            type: result.success ? 'success' : 'error',
+                        });
+                        if (result.success) {
+                            setView('menu');
+                            setSelectedAction(0);
+                        }
+                    }
+                }
+            }
+            if (key.return && activeTab === 'agents') {
+                const agent = agents[selectedIndex];
+                if (agent) {
+                    const installed = isAgentInstalled(agent.name);
+                    if (selectedAction === 0) {
+                        // View
+                        const agentMdPath = join(getBundledAgentsDir(), agent.name, 'AGENT.md');
+                        if (existsSync(agentMdPath)) {
+                            const content = readFileSync(agentMdPath, 'utf-8');
+                            setReadmeContent({ title: `${agent.name}/AGENT.md`, content });
+                            setView('readme');
+                        }
+                    }
+                    else if (installed && selectedAction === 1) {
+                        // Uninstall
+                        const result = uninstallAgent(agent.name);
+                        setMessage({
+                            text: result.success ? `✓ Uninstalled ${agent.name}` : `✗ ${result.message}`,
+                            type: result.success ? 'success' : 'error',
+                        });
+                        if (result.success) {
+                            setView('menu');
+                            setSelectedAction(0);
+                        }
+                    }
+                    else if (!installed && selectedAction === 1) {
+                        // Install
+                        const result = installAgent(agent.name);
+                        setMessage({
+                            text: result.success ? `✓ ${result.message}` : `✗ ${result.message}`,
+                            type: result.success ? 'success' : 'error',
+                        });
+                        if (result.success) {
+                            setView('menu');
+                            setSelectedAction(0);
+                        }
+                    }
+                }
+            }
+            if (key.return && activeTab === 'commands') {
+                const command = commands[selectedIndex];
+                if (command) {
+                    const installed = isCommandInstalled(command.name, command.skillName);
+                    // Command file: extract part after skill name (e.g., "comments check" → "check.md")
+                    const cmdPart = command.name.startsWith(command.skillName + ' ')
+                        ? command.name.slice(command.skillName.length + 1)
+                        : command.name;
+                    const commandMdPath = join(getBundledSkillsDir(), command.skillName, 'commands', `${cmdPart}.md`);
+                    if (selectedAction === 0) {
+                        // View
+                        if (existsSync(commandMdPath)) {
+                            const content = readFileSync(commandMdPath, 'utf-8');
+                            setReadmeContent({ title: `/${command.name}`, content });
+                            setView('readme');
+                        }
+                    }
+                    else if (installed && selectedAction === 1) {
+                        // Uninstall
+                        const result = uninstallCommand(command.name, command.skillName);
+                        setMessage({
+                            text: result.success ? `✓ ${result.message}` : `✗ ${result.message}`,
+                            type: result.success ? 'success' : 'error',
+                        });
+                        if (result.success) {
+                            setView('menu');
+                            setSelectedAction(0);
+                        }
+                    }
+                    else if (!installed && selectedAction === 1) {
+                        // Install
+                        const result = installCommand(command.name, command.skillName);
+                        setMessage({
+                            text: result.success ? `✓ ${result.message}` : `✗ ${result.message}`,
+                            type: result.success ? 'success' : 'error',
+                        });
+                        if (result.success) {
+                            setView('menu');
+                            setSelectedAction(0);
+                        }
+                    }
+                }
+            }
+        }
+    });
+    const selectedSkill = activeTab === 'skills' ? skills[selectedIndex] ?? null : null;
+    const selectedCommand = activeTab === 'commands' ? commands[selectedIndex] ?? null : null;
+    const selectedAgent = activeTab === 'agents' ? agents[selectedIndex] ?? null : null;
+    if (view === 'welcome') {
+        return (_jsx(WelcomeScreen, { onContinue: () => {
+                // If no config exists, show setup first
+                if (!configExists()) {
+                    setView('setup');
+                }
+                else {
+                    setView('menu');
+                }
+            } }));
+    }
+    if (view === 'setup') {
+        return (_jsx(SetupScreen, { onComplete: () => {
+                setIsEditingSettings(false);
+                setView('menu');
+            }, onSkip: () => {
+                setIsEditingSettings(false);
+                setView('menu');
+            }, initialConfig: isEditingSettings ? loadConfig() : undefined }));
+    }
+    if (view === 'readme' && readmeContent) {
+        return (_jsx(ReadmeViewer, { title: readmeContent.title, content: readmeContent.content, onClose: () => {
+                setReadmeContent(null);
+                setView('detail');
+            } }));
+    }
+    if (view === 'configure' && selectedSkill) {
+        return (_jsx(SkillConfigScreen, { skill: selectedSkill, onComplete: () => {
+                setMessage({ text: `✓ Configuration saved for ${selectedSkill.name}`, type: 'success' });
+                setView('detail');
+            }, onCancel: () => {
+                setView('detail');
+            } }));
+    }
+    return (_jsxs(Box, { flexDirection: "row", padding: 1, children: [_jsxs(Box, { flexDirection: "column", width: 44, borderStyle: "single", borderColor: colors.border, children: [_jsx(Box, { paddingX: 1, children: _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "[" }), _jsx(Text, { color: colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: " " }), _jsx(Text, { color: colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: "] " }), _jsx(Text, { color: colors.textMuted, children: "droid" })] }) }), _jsx(Box, { paddingX: 1, marginTop: 1, children: _jsx(TabBar, { tabs: tabs, activeTab: activeTab }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [activeTab === 'skills' && (_jsxs(_Fragment, { children: [scrollOffset > 0 && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, children: ["\u2191 ", scrollOffset, " more"] }) })), skills.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS).map((skill, index) => (_jsx(SkillItem, { skill: skill, isSelected: scrollOffset + index === selectedIndex, isActive: scrollOffset + index === selectedIndex && view === 'detail' }, skill.name))), scrollOffset + MAX_VISIBLE_ITEMS < skills.length && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, children: ["\u2193 ", skills.length - scrollOffset - MAX_VISIBLE_ITEMS, " more"] }) })), skills.length > MAX_VISIBLE_ITEMS && (_jsx(Box, { paddingX: 1, marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: [skills.length, " skills total"] }) }))] })), activeTab === 'commands' && (_jsxs(_Fragment, { children: [scrollOffset > 0 && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, children: ["\u2191 ", scrollOffset, " more"] }) })), commands.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS).map((cmd, index) => (_jsx(CommandItem, { command: cmd, isSelected: scrollOffset + index === selectedIndex }, cmd.name))), scrollOffset + MAX_VISIBLE_ITEMS < commands.length && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, children: ["\u2193 ", commands.length - scrollOffset - MAX_VISIBLE_ITEMS, " more"] }) }))] })), activeTab === 'agents' && (_jsxs(_Fragment, { children: [scrollOffset > 0 && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, children: ["\u2191 ", scrollOffset, " more"] }) })), agents.length === 0 ? (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: colors.textDim, children: "No agents available" }) })) : (agents.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS).map((agent, index) => (_jsx(AgentItem, { agent: agent, isSelected: scrollOffset + index === selectedIndex }, agent.name)))), scrollOffset + MAX_VISIBLE_ITEMS < agents.length && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, children: ["\u2193 ", agents.length - scrollOffset - MAX_VISIBLE_ITEMS, " more"] }) }))] })), activeTab === 'settings' && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: colors.textDim, children: "View and edit config" }) }))] }), _jsx(Box, { paddingX: 1, marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: view === 'menu' ? '←→ ↑↓ enter q' : '←→ enter esc q' }) })] }), activeTab === 'skills' && (_jsx(SkillDetails, { skill: selectedSkill, isFocused: view === 'detail', selectedAction: selectedAction })), activeTab === 'commands' && (_jsx(CommandDetails, { command: selectedCommand, isFocused: view === 'detail', selectedAction: selectedAction })), activeTab === 'settings' && (_jsx(SettingsDetails, { onEditSettings: () => setView('setup'), isFocused: false })), activeTab === 'agents' && (_jsx(AgentDetails, { agent: selectedAgent, isFocused: view === 'detail', selectedAction: selectedAction })), message && (_jsx(Box, { position: "absolute", marginTop: 12, children: _jsx(Text, { color: message.type === 'success' ? colors.success : colors.error, children: message.text }) }))] }));
+}
+export async function tuiCommand() {
+    // Enter alternate screen (fullscreen mode)
+    process.stdout.write('\x1b[?1049h');
+    process.stdout.write('\x1b[H'); // Move cursor to top-left
+    const { unmount, waitUntilExit } = render(_jsx(App, {}));
+    await waitUntilExit();
+    // Leave alternate screen
+    process.stdout.write('\x1b[?1049l');
+}
+//# sourceMappingURL=tui.js.map