@orderful/droid 0.14.0 → 0.16.0

package/dist/commands/tui.js

@@ -1,595 +1,26 @@
 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, readFileSync } from 'fs';
-import { join } from 'path';
-import { getBundledSkills, installSkill, uninstallSkill, updateSkill, } from '../lib/skills.js';
-import { getBundledTools, getBundledToolsDir, isToolInstalled, getToolUpdateStatus, getInstalledToolVersion, getToolsWithUpdates } from '../lib/tools.js';
-import { configExists, loadConfig, saveConfig, loadSkillOverrides, saveSkillOverrides, getAutoUpdateConfig, setAutoUpdateConfig } from '../lib/config.js';
-import { configurePlatformPermissions } from './setup.js';
-import { Platform, BuiltInOutput, ConfigOptionType } from '../lib/types.js';
-import { getVersion, getUpdateInfo, runUpdate } from '../lib/version.js';
-import { getRandomQuote } from '../lib/quotes.js';
+import { useState } from 'react';
+import { getBundledSkills, installSkill, uninstallSkill, updateSkill, } from '../lib/skills';
+import { getBundledTools, isToolInstalled, getToolUpdateStatus } from '../lib/tools';
+import { configExists, loadConfig } from '../lib/config';
+import { Platform } from '../lib/types';
+import { getVersion } from '../lib/version';
+import { colors, MAX_VISIBLE_ITEMS } from './tui/constants';
+import { TabBar } from './tui/components/TabBar';
+import { ToolItem } from './tui/components/ToolItem';
+import { ToolDetails } from './tui/components/ToolDetails';
+import { SettingsDetails } from './tui/components/SettingsDetails';
+import { WelcomeScreen } from './tui/views/WelcomeScreen';
+import { ToolUpdatePrompt } from './tui/views/ToolUpdatePrompt';
+import { SetupScreen } from './tui/views/SetupScreen';
+import { ReadmeViewer } from './tui/views/ReadmeViewer';
+import { ToolExplorer } from './tui/views/ToolExplorer';
+import { SkillConfigScreen } from './tui/views/SkillConfigScreen';
+import { useAppUpdate } from './tui/hooks/useAppUpdate';
+import { useToolUpdates } from './tui/hooks/useToolUpdates';
 // Module-level variable to store exit message (printed after leaving alternate screen)
 let exitMessage = null;
-const colors = {
-    primary: '#6366f1',
-    bgSelected: '#2d2d2d',
-    border: '#3a3a3a',
-    text: '#e8e8e8',
-    textMuted: '#999999',
-    textDim: '#6a6a6a',
-    success: '#4ade80',
-    error: '#f87171',
-    // Component type badges
-    skill: '#ec4899', // pink/magenta
-    command: '#22d3ee', // cyan
-    agent: '#fbbf24', // yellow/amber
-};
-function Badge({ type, label, isSelected = false, dimmed = false, }) {
-    const color = colors[type];
-    const displayLabel = label || type.charAt(0).toUpperCase() + type.slice(1);
-    if (dimmed) {
-        return (_jsx(Text, { color: colors.textDim, children: displayLabel }));
-    }
-    return (_jsx(Text, { backgroundColor: isSelected ? color : undefined, color: isSelected ? '#000000' : color, bold: isSelected, children: isSelected ? ` ${displayLabel} ` : displayLabel }));
-}
-function ComponentBadges({ tool, compact = false }) {
-    const hasSkills = tool.includes.skills.length > 0;
-    const hasCommands = tool.includes.commands.length > 0;
-    const hasAgents = tool.includes.agents.length > 0;
-    if (compact) {
-        // Show colored squares for list view (single char with spacing)
-        const parts = [];
-        if (hasSkills)
-            parts.push('skill');
-        if (hasCommands)
-            parts.push('command');
-        if (hasAgents)
-            parts.push('agent');
-        return (_jsx(Box, { flexDirection: "row", children: parts.map((type, i) => (_jsxs(Text, { children: [_jsx(Text, { backgroundColor: colors[type], children: " " }), i < parts.length - 1 && ' '] }, type))) }));
-    }
-    return (_jsxs(Box, { flexDirection: "row", children: [hasSkills && (_jsx(Box, { marginRight: 1, children: _jsx(Text, { backgroundColor: colors.skill, color: "#000000", bold: true, children: ` ${tool.includes.skills.length} skill${tool.includes.skills.length > 1 ? 's' : ''} ` }) })), hasCommands && (_jsx(Box, { marginRight: 1, children: _jsx(Text, { backgroundColor: colors.command, color: "#000000", bold: true, children: ` ${tool.includes.commands.length} cmd${tool.includes.commands.length > 1 ? 's' : ''} ` }) })), hasAgents && (_jsx(Box, { marginRight: 1, children: _jsx(Text, { backgroundColor: colors.agent, color: "#000000", bold: true, children: ` ${tool.includes.agents.length} agent${tool.includes.agents.length > 1 ? 's' : ''} ` }) }))] }));
-}
-function detectInstalledPlatforms() {
-    const installed = new Set();
-    try {
-        execSync('claude --version', { stdio: 'ignore' });
-        installed.add(Platform.ClaudeCode);
-    }
-    catch {
-        // Claude Code not found
-    }
-    try {
-        execSync('opencode --version', { stdio: 'ignore' });
-        installed.add(Platform.OpenCode);
-    }
-    catch {
-        // OpenCode not found
-    }
-    return installed;
-}
-function getDefaultPlatform() {
-    const installed = detectInstalledPlatforms();
-    if (installed.has(Platform.ClaudeCode))
-        return Platform.ClaudeCode;
-    if (installed.has(Platform.OpenCode))
-        return Platform.OpenCode;
-    return Platform.ClaudeCode;
-}
-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, onUpdate, onAlways, onExit, updateInfo, isUpdating }) {
-    const [selectedButton, setSelectedButton] = useState(0);
-    const welcomeQuote = useMemo(() => getRandomQuote(), []);
-    useInput((input, key) => {
-        if (isUpdating)
-            return;
-        if (updateInfo.hasUpdate) {
-            if (key.leftArrow) {
-                setSelectedButton((prev) => Math.max(0, prev - 1));
-            }
-            if (key.rightArrow) {
-                setSelectedButton((prev) => Math.min(2, prev + 1));
-            }
-            if (key.return) {
-                if (selectedButton === 0) {
-                    onUpdate();
-                }
-                else if (selectedButton === 1) {
-                    onAlways();
-                }
-                else {
-                    onContinue();
-                }
-            }
-            if (input === 'q') {
-                onExit();
-            }
-        }
-        else {
-            if (key.return) {
-                onContinue();
-            }
-            if (input === 'q') {
-                onExit();
-            }
-        }
-    });
-    const hasUpdate = updateInfo.hasUpdate && updateInfo.latestVersion;
-    return (_jsx(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", height: 18, children: _jsxs(Box, { flexDirection: "column", alignItems: "center", borderStyle: "single", borderColor: hasUpdate ? '#eab308' : 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", updateInfo.currentVersion] })] }), _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "\u2551 " }), _jsx(Text, { color: hasUpdate ? '#eab308' : colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: " " }), _jsx(Text, { color: hasUpdate ? '#eab308' : colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: " \u2551    " }), _jsx(Text, { color: colors.textMuted, children: "Droid, teaching your AI 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" })] })] }), hasUpdate ? (_jsxs(_Fragment, { children: [_jsxs(Box, { marginTop: 2, marginBottom: 1, flexDirection: "column", alignItems: "center", children: [_jsx(Text, { color: "#eab308", italic: true, children: "\"The odds of functioning optimally without this" }), _jsx(Text, { color: "#eab308", italic: true, children: "update are approximately 3,720 to 1.\"" })] }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: colors.textMuted, children: ["v", updateInfo.currentVersion, " \u2192 v", updateInfo.latestVersion] }) }), isUpdating ? (_jsx(Text, { color: "#eab308", children: "Updating..." })) : (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { backgroundColor: selectedButton === 0 ? '#eab308' : colors.bgSelected, color: selectedButton === 0 ? '#000000' : colors.textMuted, bold: selectedButton === 0, children: [' ', "Update", ' '] }), _jsx(Text, { children: " " }), _jsxs(Text, { backgroundColor: selectedButton === 1 ? '#eab308' : colors.bgSelected, color: selectedButton === 1 ? '#000000' : colors.textMuted, bold: selectedButton === 1, children: [' ', "Always", ' '] }), _jsx(Text, { children: " " }), _jsxs(Text, { backgroundColor: selectedButton === 2 ? colors.bgSelected : undefined, color: selectedButton === 2 ? colors.text : colors.textMuted, bold: selectedButton === 2, children: [' ', "Skip", ' '] })] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "\u2190\u2192 select \u00B7 enter \u00B7 \"Always\" enables auto-update" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Box, { marginTop: 2, marginBottom: 1, children: _jsx(Text, { backgroundColor: colors.primary, color: "#ffffff", bold: true, children: ` ${welcomeQuote} ` }) }), _jsx(Text, { color: colors.textDim, children: "press enter" })] }))] }) }));
-}
-function ToolUpdatePrompt({ toolUpdates, onUpdateAll, onAlways, onSkip, isUpdating }) {
-    const [selectedButton, setSelectedButton] = useState(0);
-    useInput((input, key) => {
-        if (isUpdating)
-            return;
-        if (key.leftArrow) {
-            setSelectedButton((prev) => Math.max(0, prev - 1));
-        }
-        if (key.rightArrow) {
-            setSelectedButton((prev) => Math.min(2, prev + 1));
-        }
-        if (key.return) {
-            if (selectedButton === 0) {
-                onUpdateAll();
-            }
-            else if (selectedButton === 1) {
-                onAlways();
-            }
-            else {
-                onSkip();
-            }
-        }
-        if (input === 'q') {
-            onSkip();
-        }
-    });
-    const buttons = [
-        { label: 'Update All', action: onUpdateAll },
-        { label: 'Always', action: onAlways },
-        { label: 'Skip', action: onSkip },
-    ];
-    return (_jsx(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", height: 18, children: _jsxs(Box, { flexDirection: "column", alignItems: "center", borderStyle: "single", borderColor: colors.primary, 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: "Tool Updates" })] }), _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    " }), _jsxs(Text, { color: colors.textMuted, children: [toolUpdates.length, " tool", toolUpdates.length > 1 ? 's have' : ' has', " updates available"] })] }), _jsx(Text, { children: _jsx(Text, { color: colors.textDim, children: "\u255A\u2550\u2566\u2550\u2566\u2550\u255D" }) })] }), _jsxs(Box, { marginTop: 1, marginBottom: 1, flexDirection: "column", children: [toolUpdates.slice(0, 5).map((tool) => (_jsxs(Text, { color: colors.textMuted, children: [_jsx(Text, { color: colors.primary, children: "\u2191" }), " ", tool.name, _jsxs(Text, { color: colors.textDim, children: [" ", tool.installedVersion, " \u2192 ", tool.bundledVersion] })] }, tool.name))), toolUpdates.length > 5 && (_jsxs(Text, { color: colors.textDim, children: ["...and ", toolUpdates.length - 5, " more"] }))] }), isUpdating ? (_jsx(Text, { color: colors.primary, children: "Updating tools..." })) : (_jsx(Box, { flexDirection: "row", children: buttons.map((button, index) => (_jsxs(Text, { backgroundColor: selectedButton === index ? colors.primary : colors.bgSelected, color: selectedButton === index ? '#000000' : colors.textMuted, bold: selectedButton === index, children: [' ', button.label, ' '] }, button.label))) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "\u2190\u2192 select \u00B7 enter \u00B7 \"Always\" enables auto-update" }) })] }) }));
-}
-function SetupScreen({ onComplete, onSkip, initialConfig }) {
-    const [step, setStep] = useState('platform');
-    const [platform, setPlatform] = useState(initialConfig?.platform || getDefaultPlatform());
-    const [userMention, setUserMention] = useState(initialConfig?.user_mention || '@user');
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const [error, setError] = useState(null);
-    // Cache detection results once on mount (avoids re-running execSync on every render)
-    const installedPlatforms = useMemo(() => detectInstalledPlatforms(), []);
-    const platformOptions = useMemo(() => [
-        { label: 'Claude Code', value: Platform.ClaudeCode },
-        { label: 'OpenCode', value: Platform.OpenCode },
-    ], []);
-    const steps = ['platform', 'user_mention', 'confirm'];
-    const stepIndex = steps.indexOf(step);
-    const totalSteps = steps.length - 1; // Don't count confirm as a step
-    const handleUserMentionSubmit = () => {
-        // Auto-add @ prefix if missing
-        const mention = userMention.startsWith('@') ? userMention : `@${userMention}`;
-        setUserMention(mention);
-        setError(null);
-        setStep('confirm');
-    };
-    // Handle escape during text input (only intercept escape, nothing else)
-    useInput((input, key) => {
-        if (key.escape) {
-            setStep('platform');
-            setSelectedIndex(0);
-        }
-    }, { isActive: step === 'user_mention' });
-    // Handle all input for non-text-input steps
-    useInput((input, key) => {
-        if (key.escape) {
-            if (step === 'platform') {
-                onSkip();
-            }
-            else if (step === 'confirm') {
-                setStep('user_mention');
-            }
-            return;
-        }
-        if (step === 'platform') {
-            if (key.upArrow)
-                setSelectedIndex((prev) => Math.max(0, prev - 1));
-            if (key.downArrow)
-                setSelectedIndex((prev) => Math.min(platformOptions.length - 1, prev + 1));
-            if (key.return) {
-                setPlatform(platformOptions[selectedIndex].value);
-                setStep('user_mention');
-            }
-        }
-        else if (step === 'confirm') {
-            if (key.return) {
-                const existingConfig = loadConfig();
-                const config = {
-                    ...existingConfig,
-                    platform: platform,
-                    user_mention: userMention,
-                    output_preference: BuiltInOutput.Terminal, // Default to terminal
-                };
-                saveConfig(config);
-                configurePlatformPermissions(platform);
-                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 === 'platform') {
-        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [renderHeader(), _jsx(Text, { color: colors.text, children: "Which platform are you using?" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: platformOptions.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 }), installedPlatforms.has(option.value) && _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" }) })] }));
-    }
-    // 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: "Platform:      " }), _jsx(Text, { color: colors.text, children: platform === Platform.ClaudeCode ? 'Claude Code' : 'OpenCode' })] }), _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "Your @mention: " }), _jsx(Text, { color: colors.text, children: userMention })] })] }), _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", flexWrap: "wrap", children: tabs.map((tab) => (_jsxs(Text, { backgroundColor: tab.id === activeTab ? colors.primary : undefined, color: tab.id === activeTab ? '#ffffff' : colors.textMuted, bold: tab.id === activeTab, wrap: "truncate", children: [' ', tab.label, ' '] }, tab.id))) }));
-}
-function ToolItem({ tool, isSelected, isActive, wasAutoUpdated, }) {
-    const installed = isToolInstalled(tool.name);
-    const installedVersion = getInstalledToolVersion(tool.name);
-    const updateStatus = getToolUpdateStatus(tool.name);
-    return (_jsx(Box, { paddingX: 1, backgroundColor: isActive ? colors.bgSelected : undefined, children: _jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { color: colors.textDim, children: [isSelected ? '>' : ' ', " "] }), _jsx(Text, { color: isSelected || isActive ? colors.text : colors.textMuted, children: tool.name }), installed && installedVersion && _jsxs(Text, { color: colors.textDim, children: [" v", installedVersion] }), installed && _jsx(Text, { color: colors.success, children: " \u2713" }), wasAutoUpdated && _jsx(Text, { color: colors.success, children: " \u2191" }), updateStatus.hasUpdate && !wasAutoUpdated && _jsx(Text, { color: colors.primary, children: " \u2191" }), _jsx(Text, { children: " " }), tool.includes.skills.length > 0 && _jsx(Text, { color: colors.skill, children: "\u25CF " }), tool.includes.commands.length > 0 && _jsx(Text, { color: colors.command, children: "\u25CF " }), tool.includes.agents.length > 0 && _jsx(Text, { color: colors.agent, children: "\u25CF" })] }) }));
-}
-function ToolDetails({ tool, isFocused, selectedAction, }) {
-    if (!tool) {
-        return (_jsx(Box, { paddingLeft: 2, flexGrow: 1, children: _jsx(Text, { color: colors.textDim, children: "Select a tool" }) }));
-    }
-    const installed = isToolInstalled(tool.name);
-    const installedVersion = getInstalledToolVersion(tool.name);
-    const updateStatus = getToolUpdateStatus(tool.name);
-    const isSystemTool = tool.system === true;
-    const actions = installed
-        ? [
-            { id: 'explore', label: 'Explore', variant: 'default' },
-            ...(updateStatus.hasUpdate
-                ? [{ id: 'update', label: `Update (${updateStatus.bundledVersion})`, variant: 'primary' }]
-                : []),
-            { id: 'configure', label: 'Configure', variant: 'default' },
-            // System tools can't be uninstalled
-            ...(!isSystemTool ? [{ id: 'uninstall', label: 'Uninstall', variant: 'danger' }] : []),
-        ]
-        : [
-            { id: 'explore', label: 'Explore', variant: 'default' },
-            // System tools auto-install, but show Install for manual trigger if needed
-            { id: 'install', label: 'Install', variant: 'primary' },
-        ];
-    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, flexGrow: 1, children: [_jsx(Text, { color: colors.text, bold: true, children: tool.name }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: [tool.version, tool.status && ` · ${tool.status}`, installed && _jsx(Text, { color: colors.success, children: " \u00B7 installed" }), updateStatus.hasUpdate && (_jsxs(Text, { color: colors.primary, children: [" \u00B7 update (", installedVersion, " \u2192 ", updateStatus.bundledVersion, ")"] }))] }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textMuted, children: tool.description }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: colors.textDim, children: "Includes:" }), _jsx(Box, { marginTop: 1, children: _jsx(ComponentBadges, { tool: tool }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, marginLeft: 1, children: [tool.includes.skills.length > 0 && (_jsxs(Text, { children: [_jsx(Text, { color: colors.skill, children: "Skills: " }), _jsx(Text, { color: colors.textMuted, children: tool.includes.skills.map(s => s.name).join(', ') })] })), tool.includes.commands.length > 0 && (_jsxs(Text, { children: [_jsx(Text, { color: colors.command, children: "Commands: " }), _jsx(Text, { color: colors.textMuted, children: tool.includes.commands.map(c => `/${c}`).join(', ') })] })), tool.includes.agents.length > 0 && (_jsxs(Text, { children: [_jsx(Text, { color: colors.agent, children: "Agents: " }), _jsx(Text, { color: colors.textMuted, children: tool.includes.agents.join(', ') })] }))] })] }), 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 ToolExplorer({ tool, onViewSource, onClose }) {
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    // Build list of all explorable items
-    const items = useMemo(() => {
-        const result = [];
-        const toolDir = getBundledToolsDir();
-        // Add skills
-        for (const skill of tool.includes.skills) {
-            result.push({
-                type: 'skill',
-                name: skill.name,
-                path: join(toolDir, tool.name, 'skills', skill.name, 'SKILL.md'),
-            });
-        }
-        // Add commands
-        for (const cmd of tool.includes.commands) {
-            result.push({
-                type: 'command',
-                name: `/${cmd}`,
-                path: join(toolDir, tool.name, 'commands', `${cmd}.md`),
-            });
-        }
-        // Add agents
-        for (const agent of tool.includes.agents) {
-            result.push({
-                type: 'agent',
-                name: agent,
-                path: join(toolDir, tool.name, 'agents', agent, 'AGENT.md'),
-            });
-        }
-        return result;
-    }, [tool]);
-    useInput((input, key) => {
-        if (key.escape) {
-            onClose();
-            return;
-        }
-        if (key.leftArrow || key.upArrow) {
-            setSelectedIndex((prev) => Math.max(0, prev - 1));
-        }
-        if (key.rightArrow || key.downArrow) {
-            setSelectedIndex((prev) => Math.min(items.length - 1, prev + 1));
-        }
-        if (key.return && items.length > 0) {
-            const item = items[selectedIndex];
-            if (existsSync(item.path)) {
-                const content = readFileSync(item.path, 'utf-8');
-                onViewSource(`${tool.name} / ${item.name}`, content);
-            }
-            else {
-                // Try YAML fallback for skills/agents
-                const yamlPath = item.path.replace('.md', '.yaml');
-                if (existsSync(yamlPath)) {
-                    const content = readFileSync(yamlPath, 'utf-8');
-                    onViewSource(`${tool.name} / ${item.name}`, content);
-                }
-            }
-        }
-    });
-    // Group items by type for display
-    const skillItems = items.filter(i => i.type === 'skill');
-    const commandItems = items.filter(i => i.type === 'command');
-    const agentItems = items.filter(i => i.type === 'agent');
-    const getItemIndex = (item) => items.indexOf(item);
-    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: "] " }), _jsx(Text, { color: colors.text, bold: true, children: tool.name })] }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: colors.textMuted, children: tool.description }) }), skillItems.length > 0 && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: colors.skill, bold: true, children: "Skills" }), _jsx(Box, { flexDirection: "row", flexWrap: "wrap", marginTop: 1, children: skillItems.map((item) => {
-                            const idx = getItemIndex(item);
-                            const isSelected = selectedIndex === idx;
-                            return (_jsx(Box, { marginRight: 1, marginBottom: 1, children: _jsx(Text, { backgroundColor: isSelected ? colors.skill : colors.bgSelected, color: isSelected ? '#000000' : colors.skill, bold: isSelected, children: ` ${item.name} ` }) }, item.name));
-                        }) })] })), commandItems.length > 0 && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: colors.command, bold: true, children: "Commands" }), _jsx(Box, { flexDirection: "row", flexWrap: "wrap", marginTop: 1, children: commandItems.map((item) => {
-                            const idx = getItemIndex(item);
-                            const isSelected = selectedIndex === idx;
-                            return (_jsx(Box, { marginRight: 1, marginBottom: 1, children: _jsx(Text, { backgroundColor: isSelected ? colors.command : colors.bgSelected, color: isSelected ? '#000000' : colors.command, bold: isSelected, children: ` ${item.name} ` }) }, item.name));
-                        }) })] })), agentItems.length > 0 && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: colors.agent, bold: true, children: "Agents" }), _jsx(Box, { flexDirection: "row", flexWrap: "wrap", marginTop: 1, children: agentItems.map((item) => {
-                            const idx = getItemIndex(item);
-                            const isSelected = selectedIndex === idx;
-                            return (_jsx(Box, { marginRight: 1, marginBottom: 1, children: _jsx(Text, { backgroundColor: isSelected ? colors.agent : colors.bgSelected, color: isSelected ? '#000000' : colors.agent, bold: isSelected, children: ` ${item.name} ` }) }, item.name));
-                        }) })] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "\u2190\u2192 navigate \u00B7 enter view source \u00B7 esc back" }) })] }));
-}
-function SettingsDetails({ onEditSettings, isFocused, onToggleAutoUpdate, selectedSetting, }) {
-    const config = loadConfig();
-    const autoUpdateConfig = getAutoUpdateConfig();
-    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: "Platform:      " }), _jsx(Text, { color: colors.text, children: config.platform === Platform.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(Box, { flexDirection: "column", marginTop: 2, children: [_jsx(Text, { color: colors.text, bold: true, children: "Auto-Update" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: isFocused && selectedSetting === 0 ? '> ' : '  ' }), _jsxs(Text, { color: isFocused && selectedSetting === 0 ? colors.text : colors.textMuted, children: ["[", autoUpdateConfig.tools ? 'x' : ' ', "] Auto-update tools"] })] }) }), _jsx(Text, { color: colors.textDim, children: "    Update tools automatically when droid starts" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: isFocused && selectedSetting === 1 ? '> ' : '  ' }), _jsxs(Text, { color: isFocused && selectedSetting === 1 ? colors.text : colors.textMuted, children: ["[", autoUpdateConfig.app ? 'x' : ' ', "] Auto-update app"] })] }) }), _jsx(Text, { color: colors.textDim, children: "    Update droid automatically when a new version is available" })] }), _jsx(Box, { marginTop: 2, children: _jsx(Text, { color: colors.textDim, children: "Config: ~/.droid/config.yaml" }) }), isFocused && (_jsx(Box, { marginTop: 2, children: _jsxs(Text, { backgroundColor: selectedSetting === 2 ? colors.primary : colors.bgSelected, color: selectedSetting === 2 ? '#ffffff' : colors.textMuted, bold: selectedSetting === 2, children: [' ', "Edit Profile", ' '] }) })), isFocused && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "\u2191\u2193 select \u00B7 enter toggle/edit \u00B7 esc back" }) })), !isFocused && (_jsx(Box, { marginTop: 2, children: _jsx(Text, { color: colors.textDim, children: "press enter to configure" }) }))] }));
-}
-const MAX_VISIBLE_CONFIG_ITEMS = 4; // Each config item takes ~3 lines
-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 [scrollOffset, setScrollOffset] = useState(0);
-    const [editingField, setEditingField] = useState(null);
-    const [editValue, setEditValue] = useState('');
-    const [editingSelect, setEditingSelect] = useState(null);
-    const [selectOptionIndex, setSelectOptionIndex] = useState(0);
-    // Total items = config keys + Save button
-    const totalItems = configKeys.length + 1;
-    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 select field editing
-    useInput((input, key) => {
-        if (!editingSelect)
-            return;
-        const option = configSchema[editingSelect];
-        if (!option?.options)
-            return;
-        if (key.escape) {
-            setEditingSelect(null);
-            return;
-        }
-        if (key.leftArrow || key.upArrow) {
-            setSelectOptionIndex((prev) => Math.max(0, prev - 1));
-        }
-        if (key.rightArrow || key.downArrow) {
-            setSelectOptionIndex((prev) => Math.min(option.options.length - 1, prev + 1));
-        }
-        if (key.return) {
-            setValues((prev) => ({ ...prev, [editingSelect]: option.options[selectOptionIndex] }));
-            setEditingSelect(null);
-        }
-    }, { isActive: editingSelect !== null });
-    // Handle navigation and actions when not editing
-    useInput((input, key) => {
-        if (key.escape) {
-            onCancel();
-            return;
-        }
-        if (key.upArrow) {
-            setSelectedIndex((prev) => {
-                const newIndex = Math.max(0, prev - 1);
-                // Scroll up if needed
-                if (newIndex < scrollOffset) {
-                    setScrollOffset(newIndex);
-                }
-                return newIndex;
-            });
-        }
-        if (key.downArrow) {
-            // +1 for the Save button at the end
-            setSelectedIndex((prev) => {
-                const newIndex = Math.min(totalItems - 1, prev + 1);
-                // Scroll down if needed
-                if (newIndex >= scrollOffset + MAX_VISIBLE_CONFIG_ITEMS) {
-                    setScrollOffset(newIndex - MAX_VISIBLE_CONFIG_ITEMS + 1);
-                }
-                return newIndex;
-            });
-        }
-        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.Select && option.options) {
-                // Enter select edit mode
-                const currentValue = String(values[key] || option.options[0]);
-                const currentIndex = option.options.indexOf(currentValue);
-                setSelectOptionIndex(currentIndex >= 0 ? currentIndex : 0);
-                setEditingSelect(key);
-            }
-            else if (option.type === ConfigOptionType.String) {
-                // Enter edit mode for string
-                setEditingField(key);
-                setEditValue(String(values[key] || ''));
-            }
-        }
-    }, { isActive: editingField === null && editingSelect === 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" }) })] }));
-    }
-    // Calculate visible range
-    const visibleEndIndex = Math.min(scrollOffset + MAX_VISIBLE_CONFIG_ITEMS, totalItems);
-    const visibleConfigKeys = configKeys.slice(scrollOffset, Math.min(scrollOffset + MAX_VISIBLE_CONFIG_ITEMS, configKeys.length));
-    const showSaveButton = visibleEndIndex > configKeys.length || scrollOffset + MAX_VISIBLE_CONFIG_ITEMS > configKeys.length;
-    const showTopIndicator = scrollOffset > 0;
-    const showBottomIndicator = scrollOffset + MAX_VISIBLE_CONFIG_ITEMS < totalItems;
-    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: [showTopIndicator && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: colors.textDim, children: ["  \u2191 ", scrollOffset, " more"] }) })), visibleConfigKeys.map((key) => {
-                        const actualIndex = configKeys.indexOf(key);
-                        const option = configSchema[key];
-                        const isSelected = selectedIndex === actualIndex;
-                        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'] })) : option.type === ConfigOptionType.Select && option.options ? (_jsx(Text, { color: colors.text, children: option.options.map((opt, i) => {
-                                                const isCurrentValue = String(values[key]) === opt;
-                                                const isEditingThis = editingSelect === key;
-                                                const isHighlighted = isEditingThis && selectOptionIndex === i;
-                                                return (_jsxs(Text, { children: [i > 0 && _jsx(Text, { color: colors.textDim, children: " \u00B7 " }), _jsx(Text, { color: isHighlighted ? '#ffffff' : isCurrentValue ? colors.primary : colors.textMuted, backgroundColor: isHighlighted ? colors.primary : undefined, children: isCurrentValue && !isEditingThis ? `[${opt}]` : isHighlighted ? ` ${opt} ` : opt })] }, opt));
-                                            }) })) : 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));
-                    }), showSaveButton && (_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", ' '] })] }) })), showBottomIndicator && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: ["  \u2193 ", totalItems - scrollOffset - MAX_VISIBLE_CONFIG_ITEMS, " more"] }) }))] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: editingField
-                        ? 'enter save · esc cancel'
-                        : editingSelect
-                            ? '←→ choose · enter select · esc cancel'
-                            : '↑↓ select · enter toggle/edit · esc back' }) })] }));
-}
 function App() {
     const { exit } = useApp();
     const tabs = [
@@ -605,88 +36,22 @@ function App() {
     const [message, setMessage] = useState(null);
     const [isEditingSettings, setIsEditingSettings] = useState(false);
     const [readmeContent, setReadmeContent] = useState(null);
-    const [selectedSetting, setSelectedSetting] = useState(0);
-    const [isUpdating, setIsUpdating] = useState(false);
-    const [isUpdatingTools, setIsUpdatingTools] = useState(false);
     const [previousView, setPreviousView] = useState('detail'); // Track where to return from readme
-    const [toolUpdates, setToolUpdates] = useState([]);
-    const [autoUpdatedTools, setAutoUpdatedTools] = useState([]);
-    // Check for updates once on mount
-    const updateInfo = useMemo(() => getUpdateInfo(), []);
-    const autoUpdateConfig = useMemo(() => getAutoUpdateConfig(), []);
-    const handleUpdate = () => {
-        setIsUpdating(true);
-        // Run update in next tick to allow UI to show "Updating..."
-        setTimeout(() => {
-            const result = runUpdate();
-            if (result.success) {
-                // Store message to print after leaving alternate screen (with ANSI colors)
-                const blue = '\x1b[38;2;99;102;241m'; // #6366f1
-                const dim = '\x1b[38;2;106;106;106m';
-                const reset = '\x1b[0m';
-                exitMessage = `
-${dim}────────────────────────────────────────────────────────${reset}
-
-    ${dim}╔═════╗${reset}
-    ${dim}║${reset} ${blue}●${reset} ${blue}●${reset} ${dim}║${reset}   ${blue}"It's quite possible this system${reset}
-    ${dim}╚═╦═╦═╝${reset}    ${blue}is now fully operational."${reset}
-
-             Run ${blue}droid${reset} to start the new version.
-
-${dim}────────────────────────────────────────────────────────${reset}
-`;
-                exit();
+    const { updateInfo, isUpdating, handleUpdate, handleAlwaysUpdate } = useAppUpdate({
+        onUpdateSuccess: (msg) => {
+            exitMessage = msg;
+        },
+        onUpdateFailure: (error) => {
+            setMessage({ text: error, type: 'error' });
+            if (!configExists()) {
+                setView('setup');
             }
             else {
-                setIsUpdating(false);
-                setMessage({ text: result.message, type: 'error' });
-                // Continue to menu on failure
-                if (!configExists()) {
-                    setView('setup');
-                }
-                else {
-                    setView('menu');
-                }
-            }
-        }, 100);
-    };
-    const handleAlwaysUpdate = () => {
-        // Enable auto-update for app in config
-        setAutoUpdateConfig({ app: true });
-        // Then run the update
-        handleUpdate();
-    };
-    // Ensure system tools (marked with system: true in TOOL.yaml) are always installed and current
-    const ensureSystemTools = () => {
-        // Find all tools marked as system tools
-        const systemTools = tools.filter(t => t.system === true);
-        for (const systemTool of systemTools) {
-            const installed = isToolInstalled(systemTool.name);
-            const updateStatus = getToolUpdateStatus(systemTool.name);
-            // Install if not installed, or update if outdated (regardless of auto-update settings)
-            if (!installed || updateStatus.hasUpdate) {
-                const primarySkill = systemTool.includes.skills.find(s => s.required)?.name || systemTool.name;
-                installSkill(primarySkill);
+                setView('menu');
             }
-        }
-    };
-    // Check for tool updates and proceed to next view
-    const checkToolUpdatesAndProceed = () => {
-        // Always ensure system tools are current (bypasses auto-update settings)
-        ensureSystemTools();
-        const updates = getToolsWithUpdates();
-        setToolUpdates(updates);
-        // If auto_update.tools is true, auto-update silently
-        if (autoUpdateConfig.tools && updates.length > 0) {
-            handleUpdateAllTools(updates, true);
-            return;
-        }
-        // If there are updates and auto-update is off, show prompt
-        if (updates.length > 0) {
-            setView('tool-updates');
-            return;
-        }
-        // No updates, proceed to setup or menu
+        },
+    });
+    const proceedToNextView = () => {
         if (!configExists()) {
             setView('setup');
         }
@@ -694,34 +59,8 @@ ${dim}────────────────────────
             setView('menu');
         }
     };
-    const handleUpdateAllTools = (updates = toolUpdates, silent = false) => {
-        if (!silent) {
-            setIsUpdatingTools(true);
-        }
-        setTimeout(() => {
-            let successCount = 0;
-            let failCount = 0;
-            const updatedNames = [];
-            for (const tool of updates) {
-                // Find the tool to get its primary skill
-                const toolManifest = tools.find(t => t.name === tool.name);
-                if (toolManifest) {
-                    const primarySkill = toolManifest.includes.skills.find(s => s.required)?.name || toolManifest.name;
-                    const result = updateSkill(primarySkill);
-                    if (result.success) {
-                        successCount++;
-                        updatedNames.push(tool.name);
-                    }
-                    else {
-                        failCount++;
-                    }
-                }
-            }
-            setIsUpdatingTools(false);
-            // Track which tools were auto-updated for visual indicator
-            if (silent && updatedNames.length > 0) {
-                setAutoUpdatedTools(updatedNames);
-            }
+    const { toolUpdates, isUpdatingTools, autoUpdatedTools, checkForUpdates, updateAllTools, enableAutoUpdateAndUpdate, } = useToolUpdates({
+        onUpdateComplete: ({ successCount, failCount, silent }) => {
             if (successCount > 0) {
                 setMessage({
                     text: silent
@@ -730,47 +69,25 @@ ${dim}────────────────────────
                     type: failCount > 0 ? 'error' : 'success',
                 });
             }
-            // Proceed to next view
-            if (!configExists()) {
-                setView('setup');
-            }
-            else {
-                setView('menu');
-            }
-        }, 100);
-    };
-    const handleAlwaysUpdateTools = () => {
-        // Enable auto-update in config
-        setAutoUpdateConfig({ tools: true });
-        // Then update all
-        handleUpdateAllTools();
-    };
-    const handleSkipToolUpdates = () => {
-        if (!configExists()) {
-            setView('setup');
+            proceedToNextView();
+        },
+    });
+    // Check for tool updates and proceed to next view
+    const checkToolUpdatesAndProceed = () => {
+        const { updates, shouldAutoUpdate } = checkForUpdates();
+        if (shouldAutoUpdate) {
+            updateAllTools(updates, true);
+            return;
         }
-        else {
-            setView('menu');
+        if (updates.length > 0) {
+            setView('tool-updates');
+            return;
         }
+        proceedToNextView();
     };
-    const handleToggleAutoUpdateTools = () => {
-        const current = getAutoUpdateConfig();
-        setAutoUpdateConfig({ tools: !current.tools });
-        // Force re-render by setting message (auto-clears on next input)
-        setMessage({
-            text: `✓ Auto-update tools ${!current.tools ? 'enabled' : 'disabled'}`,
-            type: 'success',
-        });
-    };
-    const handleToggleAutoUpdateApp = () => {
-        const current = getAutoUpdateConfig();
-        setAutoUpdateConfig({ app: !current.app });
-        setMessage({
-            text: `✓ Auto-update app ${!current.app ? 'enabled' : 'disabled'}`,
-            type: 'success',
-        });
+    const handleSkipToolUpdates = () => {
+        proceedToNextView();
     };
-    const MAX_VISIBLE_ITEMS = 6;
     const tools = getBundledTools();
     // Keep skills for configure view (tools configure via their primary skill)
     const skills = getBundledSkills();
@@ -825,7 +142,6 @@ ${dim}────────────────────────
                 }
                 else if (activeTab === 'settings') {
                     setView('detail');
-                    setSelectedSetting(0);
                 }
             }
         }
@@ -833,27 +149,12 @@ ${dim}────────────────────────
             if (key.escape || key.backspace) {
                 setView('menu');
                 setSelectedAction(0);
-                setSelectedSetting(0);
             }
             if (activeTab === 'settings') {
-                // Settings detail view navigation
-                if (key.upArrow) {
-                    setSelectedSetting((prev) => Math.max(0, prev - 1));
-                }
-                if (key.downArrow) {
-                    setSelectedSetting((prev) => Math.min(2, prev + 1)); // 0: auto-update tools, 1: auto-update app, 2: edit profile
-                }
+                // Settings detail view - just enter to edit
                 if (key.return) {
-                    if (selectedSetting === 0) {
-                        handleToggleAutoUpdateTools();
-                    }
-                    else if (selectedSetting === 1) {
-                        handleToggleAutoUpdateApp();
-                    }
-                    else if (selectedSetting === 2) {
-                        setIsEditingSettings(true);
-                        setView('setup');
-                    }
+                    setIsEditingSettings(true);
+                    setView('setup');
                 }
             }
             if (key.leftArrow && activeTab === 'tools') {
@@ -953,7 +254,7 @@ ${dim}────────────────────────
         return (_jsx(WelcomeScreen, { updateInfo: updateInfo, isUpdating: isUpdating, onUpdate: handleUpdate, onAlways: handleAlwaysUpdate, onExit: exit, onContinue: checkToolUpdatesAndProceed }));
     }
     if (view === 'tool-updates' && toolUpdates.length > 0) {
-        return (_jsx(ToolUpdatePrompt, { toolUpdates: toolUpdates, onUpdateAll: () => handleUpdateAllTools(), onAlways: handleAlwaysUpdateTools, onSkip: handleSkipToolUpdates, isUpdating: isUpdatingTools }));
+        return (_jsx(ToolUpdatePrompt, { toolUpdates: toolUpdates, onUpdateAll: () => updateAllTools(), onAlways: enableAutoUpdateAndUpdate, onSkip: handleSkipToolUpdates, isUpdating: isUpdatingTools }));
     }
     if (view === 'setup') {
         return (_jsx(SetupScreen, { onComplete: () => {
@@ -987,16 +288,13 @@ ${dim}────────────────────────
                 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" }), _jsxs(Text, { color: colors.textDim, children: [" v", getVersion()] })] }) }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { color: colors.textDim, children: loadConfig().platform === Platform.ClaudeCode ? 'Claude Code' : 'OpenCode' }) }), _jsx(Box, { paddingX: 1, marginTop: 1, children: _jsx(TabBar, { tabs: tabs, activeTab: activeTab }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [activeTab === 'tools' && (_jsxs(_Fragment, { children: [scrollOffset > 0 && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, children: ["\u2191 ", scrollOffset, " more"] }) })), tools.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS).map((tool, index) => (_jsx(ToolItem, { tool: tool, isSelected: scrollOffset + index === selectedIndex, isActive: scrollOffset + index === selectedIndex && view === 'detail', wasAutoUpdated: autoUpdatedTools.includes(tool.name) }, tool.name))), scrollOffset + MAX_VISIBLE_ITEMS < tools.length && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, children: ["\u2193 ", tools.length - scrollOffset - MAX_VISIBLE_ITEMS, " more"] }) })), tools.length > MAX_VISIBLE_ITEMS && (_jsx(Box, { paddingX: 1, marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: [tools.length, " tools total"] }) }))] })), activeTab === 'settings' && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: colors.textDim, children: "View and edit config" }) }))] }), message && (_jsx(Box, { paddingX: 1, marginTop: 1, children: _jsx(Text, { color: message.type === 'success' ? colors.success : colors.error, children: message.text }) })), _jsx(Box, { paddingX: 1, marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: view === 'menu' ? '←→ ↑↓ enter q' : '←→ enter esc q' }) })] }), activeTab === 'tools' && (_jsx(ToolDetails, { tool: selectedTool, isFocused: view === 'detail', selectedAction: selectedAction })), activeTab === 'settings' && (_jsx(SettingsDetails, { onEditSettings: () => {
-                    setIsEditingSettings(true);
-                    setView('setup');
-                }, isFocused: view === 'detail', onToggleAutoUpdate: handleToggleAutoUpdateTools, selectedSetting: selectedSetting }))] }));
+    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" }), _jsxs(Text, { color: colors.textDim, children: [" v", getVersion()] })] }) }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { color: colors.textDim, children: loadConfig().platform === Platform.ClaudeCode ? 'Claude Code' : 'OpenCode' }) }), _jsx(Box, { paddingX: 1, marginTop: 1, children: _jsx(TabBar, { tabs: tabs, activeTab: activeTab }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [activeTab === 'tools' && (_jsxs(_Fragment, { children: [scrollOffset > 0 && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, children: ["\u2191 ", scrollOffset, " more"] }) })), tools.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS).map((tool, index) => (_jsx(ToolItem, { tool: tool, isSelected: scrollOffset + index === selectedIndex, isActive: scrollOffset + index === selectedIndex && view === 'detail', wasAutoUpdated: autoUpdatedTools.includes(tool.name) }, tool.name))), scrollOffset + MAX_VISIBLE_ITEMS < tools.length && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, children: ["\u2193 ", tools.length - scrollOffset - MAX_VISIBLE_ITEMS, " more"] }) })), tools.length > MAX_VISIBLE_ITEMS && (_jsx(Box, { paddingX: 1, marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: [tools.length, " tools total"] }) }))] })), activeTab === 'settings' && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: colors.textDim, children: "View and edit config" }) }))] }), message && (_jsx(Box, { paddingX: 1, marginTop: 1, children: _jsx(Text, { color: message.type === 'success' ? colors.success : colors.error, children: message.text }) })), _jsx(Box, { paddingX: 1, marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: view === 'menu' ? '←→ ↑↓ enter q' : '←→ enter esc q' }) })] }), activeTab === 'tools' && (_jsx(ToolDetails, { tool: selectedTool, isFocused: view === 'detail', selectedAction: selectedAction })), activeTab === 'settings' && (_jsx(SettingsDetails, { isFocused: view === 'detail' }))] }));
 }
 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, {}));
+    const { waitUntilExit } = render(_jsx(App, {}));
     await waitUntilExit();
     // Leave alternate screen
     process.stdout.write('\x1b[?1049l');