@orderful/droid 0.15.0 → 0.16.0

package/src/commands/tui.tsx

@@ -1,1416 +1,32 @@
 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 { useState } from 'react';
 import {
   getBundledSkills,
-  isSkillInstalled,
   installSkill,
   uninstallSkill,
   updateSkill,
-  getSkillUpdateStatus,
-} from '../lib/skills.js';
-import { getBundledTools, getBundledToolsDir, isToolInstalled, getToolUpdateStatus, getInstalledToolVersion, getToolsWithUpdates, type ToolUpdateInfo } 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, type DroidConfig, type OutputPreference, type SkillManifest, type ConfigOption, type SkillOverrides, type ToolManifest } from '../lib/types.js';
-import { getVersion, getUpdateInfo, runUpdate, type UpdateInfo } from '../lib/version.js';
-import { getRandomQuote } from '../lib/quotes.js';
+} from '../lib/skills';
+import { getBundledTools, isToolInstalled, getToolUpdateStatus } from '../lib/tools';
+import { configExists, loadConfig } from '../lib/config';
+import { Platform, type ConfigOption, type ToolManifest } from '../lib/types';
+import { getVersion } from '../lib/version';
+import { type Tab, type View } from './tui/types';
+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';
 
-type Tab = 'tools' | 'settings';
-type View = 'welcome' | 'tool-updates' | 'setup' | 'menu' | 'detail' | 'configure' | 'readme' | 'explorer';
-
-// Module-level variable to store exit message (printed after leaving alternate screen)
-let exitMessage: string | null = null;
-type SetupStep = 'platform' | 'user_mention' | 'confirm';
-type ComponentType = 'skill' | 'command' | 'agent';
-
-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,
-}: {
-  type: ComponentType;
-  label?: string;
-  isSelected?: boolean;
-  dimmed?: boolean;
-}) {
-  const color = colors[type];
-  const displayLabel = label || type.charAt(0).toUpperCase() + type.slice(1);
-
-  if (dimmed) {
-    return (
-      <Text color={colors.textDim}>{displayLabel}</Text>
-    );
-  }
-
-  return (
-    <Text
-      backgroundColor={isSelected ? color : undefined}
-      color={isSelected ? '#000000' : color}
-      bold={isSelected}
-    >
-      {isSelected ? ` ${displayLabel} ` : displayLabel}
-    </Text>
-  );
-}
-
-function ComponentBadges({ tool, compact = false }: { tool: ToolManifest; compact?: boolean }) {
-  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: string[] = [];
-    if (hasSkills) parts.push('skill');
-    if (hasCommands) parts.push('command');
-    if (hasAgents) parts.push('agent');
-
-    return (
-      <Box flexDirection="row">
-        {parts.map((type, i) => (
-          <Text key={type}>
-            <Text backgroundColor={colors[type as ComponentType]}> </Text>
-            {i < parts.length - 1 && ' '}
-          </Text>
-        ))}
-      </Box>
-    );
-  }
-
-  return (
-    <Box flexDirection="row">
-      {hasSkills && (
-        <Box marginRight={1}>
-          <Text backgroundColor={colors.skill} color="#000000" bold>
-            {` ${tool.includes.skills.length} skill${tool.includes.skills.length > 1 ? 's' : ''} `}
-          </Text>
-        </Box>
-      )}
-      {hasCommands && (
-        <Box marginRight={1}>
-          <Text backgroundColor={colors.command} color="#000000" bold>
-            {` ${tool.includes.commands.length} cmd${tool.includes.commands.length > 1 ? 's' : ''} `}
-          </Text>
-        </Box>
-      )}
-      {hasAgents && (
-        <Box marginRight={1}>
-          <Text backgroundColor={colors.agent} color="#000000" bold>
-            {` ${tool.includes.agents.length} agent${tool.includes.agents.length > 1 ? 's' : ''} `}
-          </Text>
-        </Box>
-      )}
-    </Box>
-  );
-}
-
-function detectInstalledPlatforms(): Set<Platform> {
-  const installed = new Set<Platform>();
-  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(): Platform {
-  const installed = detectInstalledPlatforms();
-  if (installed.has(Platform.ClaudeCode)) return Platform.ClaudeCode;
-  if (installed.has(Platform.OpenCode)) return Platform.OpenCode;
-  return Platform.ClaudeCode;
-}
-
-function getOutputOptions(): Array<{ label: string; value: OutputPreference }> {
-  const options: Array<{ label: string; value: OutputPreference }> = [
-    { 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;
-}
-
-interface WelcomeScreenProps {
-  onContinue: () => void;
-  onUpdate: () => void;
-  onAlways: () => void;
-  onExit: () => void;
-  updateInfo: UpdateInfo;
-  isUpdating: boolean;
-}
-
-function WelcomeScreen({ onContinue, onUpdate, onAlways, onExit, updateInfo, isUpdating }: WelcomeScreenProps) {
-  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 (
-    <Box flexDirection="column" alignItems="center" justifyContent="center" height={18}>
-      <Box
-        flexDirection="column"
-        alignItems="center"
-        borderStyle="single"
-        borderColor={hasUpdate ? '#eab308' : colors.border}
-        paddingX={4}
-        paddingY={1}
-      >
-        <Box flexDirection="column">
-          <Text>
-            <Text color={colors.textDim}>╔═════╗    </Text>
-            <Text color={colors.text}>droid</Text>
-            <Text color={colors.textDim}> v{updateInfo.currentVersion}</Text>
-          </Text>
-          <Text>
-            <Text color={colors.textDim}>║ </Text>
-            <Text color={hasUpdate ? '#eab308' : colors.primary}>●</Text>
-            <Text color={colors.textDim}> </Text>
-            <Text color={hasUpdate ? '#eab308' : colors.primary}>●</Text>
-            <Text color={colors.textDim}> ║    </Text>
-            <Text color={colors.textMuted}>Droid, teaching your AI new tricks</Text>
-          </Text>
-          <Text>
-            <Text color={colors.textDim}>╚═╦═╦═╝    </Text>
-            <Text color={colors.textDim}>github.com/Orderful/droid</Text>
-          </Text>
-        </Box>
-
-        {hasUpdate ? (
-          <>
-            <Box marginTop={2} marginBottom={1} flexDirection="column" alignItems="center">
-              <Text color="#eab308" italic>
-                "The odds of functioning optimally without this
-              </Text>
-              <Text color="#eab308" italic>
-                update are approximately 3,720 to 1."
-              </Text>
-            </Box>
-
-            <Box marginBottom={1}>
-              <Text color={colors.textMuted}>
-                v{updateInfo.currentVersion} → v{updateInfo.latestVersion}
-              </Text>
-            </Box>
-
-            {isUpdating ? (
-              <Text color="#eab308">Updating...</Text>
-            ) : (
-              <Box flexDirection="row">
-                <Text
-                  backgroundColor={selectedButton === 0 ? '#eab308' : colors.bgSelected}
-                  color={selectedButton === 0 ? '#000000' : colors.textMuted}
-                  bold={selectedButton === 0}
-                >
-                  {' '}Update{' '}
-                </Text>
-                <Text> </Text>
-                <Text
-                  backgroundColor={selectedButton === 1 ? '#eab308' : colors.bgSelected}
-                  color={selectedButton === 1 ? '#000000' : colors.textMuted}
-                  bold={selectedButton === 1}
-                >
-                  {' '}Always{' '}
-                </Text>
-                <Text> </Text>
-                <Text
-                  backgroundColor={selectedButton === 2 ? colors.bgSelected : undefined}
-                  color={selectedButton === 2 ? colors.text : colors.textMuted}
-                  bold={selectedButton === 2}
-                >
-                  {' '}Skip{' '}
-                </Text>
-              </Box>
-            )}
-
-            <Box marginTop={1}>
-              <Text color={colors.textDim}>←→ select · enter · "Always" enables auto-update</Text>
-            </Box>
-          </>
-        ) : (
-          <>
-            <Box marginTop={2} marginBottom={1}>
-              <Text backgroundColor={colors.primary} color="#ffffff" bold>
-                {` ${welcomeQuote} `}
-              </Text>
-            </Box>
-
-            <Text color={colors.textDim}>press enter</Text>
-          </>
-        )}
-      </Box>
-    </Box>
-  );
-}
-
-interface ToolUpdatePromptProps {
-  toolUpdates: ToolUpdateInfo[];
-  onUpdateAll: () => void;
-  onAlways: () => void;
-  onSkip: () => void;
-  isUpdating: boolean;
-}
-
-function ToolUpdatePrompt({ toolUpdates, onUpdateAll, onAlways, onSkip, isUpdating }: ToolUpdatePromptProps) {
-  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 (
-    <Box flexDirection="column" alignItems="center" justifyContent="center" height={18}>
-      <Box
-        flexDirection="column"
-        alignItems="center"
-        borderStyle="single"
-        borderColor={colors.primary}
-        paddingX={4}
-        paddingY={1}
-      >
-        <Box flexDirection="column">
-          <Text>
-            <Text color={colors.textDim}>╔═════╗    </Text>
-            <Text color={colors.text}>Tool Updates</Text>
-          </Text>
-          <Text>
-            <Text color={colors.textDim}>║ </Text>
-            <Text color={colors.primary}>●</Text>
-            <Text color={colors.textDim}> </Text>
-            <Text color={colors.primary}>●</Text>
-            <Text color={colors.textDim}> ║    </Text>
-            <Text color={colors.textMuted}>{toolUpdates.length} tool{toolUpdates.length > 1 ? 's have' : ' has'} updates available</Text>
-          </Text>
-          <Text>
-            <Text color={colors.textDim}>╚═╦═╦═╝</Text>
-          </Text>
-        </Box>
-
-        <Box marginTop={1} marginBottom={1} flexDirection="column">
-          {toolUpdates.slice(0, 5).map((tool) => (
-            <Text key={tool.name} color={colors.textMuted}>
-              <Text color={colors.primary}>↑</Text> {tool.name}
-              <Text color={colors.textDim}> {tool.installedVersion} → {tool.bundledVersion}</Text>
-            </Text>
-          ))}
-          {toolUpdates.length > 5 && (
-            <Text color={colors.textDim}>...and {toolUpdates.length - 5} more</Text>
-          )}
-        </Box>
-
-        {isUpdating ? (
-          <Text color={colors.primary}>Updating tools...</Text>
-        ) : (
-          <Box flexDirection="row">
-            {buttons.map((button, index) => (
-              <Text
-                key={button.label}
-                backgroundColor={selectedButton === index ? colors.primary : colors.bgSelected}
-                color={selectedButton === index ? '#000000' : colors.textMuted}
-                bold={selectedButton === index}
-              >
-                {' '}{button.label}{' '}
-              </Text>
-            ))}
-          </Box>
-        )}
-
-        <Box marginTop={1}>
-          <Text color={colors.textDim}>←→ select · enter · "Always" enables auto-update</Text>
-        </Box>
-      </Box>
-    </Box>
-  );
-}
-
-interface SetupScreenProps {
-  onComplete: () => void;
-  onSkip: () => void;
-  initialConfig?: DroidConfig;
-}
-
-function SetupScreen({ onComplete, onSkip, initialConfig }: SetupScreenProps) {
-  const [step, setStep] = useState<SetupStep>('platform');
-  const [platform, setPlatform] = useState<Platform>(
-    initialConfig?.platform || getDefaultPlatform()
-  );
-  const [userMention, setUserMention] = useState(initialConfig?.user_mention || '@user');
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [error, setError] = useState<string | null>(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: SetupStep[] = ['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: DroidConfig = {
-          ...existingConfig,
-          platform: platform,
-          user_mention: userMention,
-          output_preference: BuiltInOutput.Terminal, // Default to terminal
-        };
-        saveConfig(config);
-        configurePlatformPermissions(platform);
-        onComplete();
-      }
-    }
-  }, { isActive: step !== 'user_mention' });
-
-  const renderHeader = () => (
-    <Box flexDirection="column" marginBottom={1}>
-      <Text>
-        <Text color={colors.textDim}>[</Text>
-        <Text color={colors.primary}>●</Text>
-        <Text color={colors.textDim}> </Text>
-        <Text color={colors.primary}>●</Text>
-        <Text color={colors.textDim}>] </Text>
-        <Text color={colors.text} bold>droid setup</Text>
-        <Text color={colors.textDim}> · Step {Math.min(stepIndex + 1, totalSteps)} of {totalSteps}</Text>
-      </Text>
-    </Box>
-  );
-
-  if (step === 'platform') {
-    return (
-      <Box flexDirection="column" padding={1}>
-        {renderHeader()}
-        <Text color={colors.text}>Which platform are you using?</Text>
-        <Box flexDirection="column" marginTop={1}>
-          {platformOptions.map((option, index) => (
-            <Text key={option.value}>
-              <Text color={colors.textDim}>{index === selectedIndex ? '>' : ' '} </Text>
-              <Text color={index === selectedIndex ? colors.text : colors.textMuted}>{option.label}</Text>
-              {installedPlatforms.has(option.value) && <Text color={colors.success}> (detected)</Text>}
-            </Text>
-          ))}
-        </Box>
-        <Box marginTop={1}>
-          <Text color={colors.textDim}>↑↓ select · enter next · esc skip</Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  if (step === 'user_mention') {
-    return (
-      <Box flexDirection="column" padding={1}>
-        {renderHeader()}
-        <Text color={colors.text}>What @mention should be used for you?</Text>
-        <Box marginTop={1}>
-          <Text color={colors.textDim}>{'> '}</Text>
-          <TextInput
-            value={userMention}
-            onChange={setUserMention}
-            onSubmit={handleUserMentionSubmit}
-            placeholder="@user"
-          />
-        </Box>
-        {error && (
-          <Box marginTop={1}>
-            <Text color={colors.error}>{error}</Text>
-          </Box>
-        )}
-        <Box marginTop={1}>
-          <Text color={colors.textDim}>enter next · esc back</Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  // Confirm step
-  return (
-    <Box flexDirection="column" padding={1}>
-      {renderHeader()}
-      <Text color={colors.text} bold>Review your settings</Text>
-      <Box flexDirection="column" marginTop={1}>
-        <Text>
-          <Text color={colors.textDim}>Platform:      </Text>
-          <Text color={colors.text}>{platform === Platform.ClaudeCode ? 'Claude Code' : 'OpenCode'}</Text>
-        </Text>
-        <Text>
-          <Text color={colors.textDim}>Your @mention: </Text>
-          <Text color={colors.text}>{userMention}</Text>
-        </Text>
-      </Box>
-      <Box marginTop={2}>
-        <Text backgroundColor={colors.primary} color="#ffffff" bold>
-          {' '}Save{' '}
-        </Text>
-      </Box>
-      <Box marginTop={1}>
-        <Text color={colors.textDim}>enter save · esc back</Text>
-      </Box>
-    </Box>
-  );
-}
-
-function TabBar({ tabs, activeTab }: { tabs: { id: Tab; label: string }[]; activeTab: Tab }) {
-  return (
-    <Box flexDirection="row" flexWrap="wrap">
-      {tabs.map((tab) => (
-        <Text
-          key={tab.id}
-          backgroundColor={tab.id === activeTab ? colors.primary : undefined}
-          color={tab.id === activeTab ? '#ffffff' : colors.textMuted}
-          bold={tab.id === activeTab}
-          wrap="truncate"
-        >
-          {' '}{tab.label}{' '}
-        </Text>
-      ))}
-    </Box>
-  );
-}
-
-function ToolItem({
-  tool,
-  isSelected,
-  isActive,
-  wasAutoUpdated,
-}: {
-  tool: ToolManifest;
-  isSelected: boolean;
-  isActive: boolean;
-  wasAutoUpdated?: boolean;
-}) {
-  const installed = isToolInstalled(tool.name);
-  const installedVersion = getInstalledToolVersion(tool.name);
-  const updateStatus = getToolUpdateStatus(tool.name);
-
-  return (
-    <Box paddingX={1} backgroundColor={isActive ? colors.bgSelected : undefined}>
-      <Text wrap="truncate">
-        <Text color={colors.textDim}>{isSelected ? '>' : ' '} </Text>
-        <Text color={isSelected || isActive ? colors.text : colors.textMuted}>{tool.name}</Text>
-        {installed && installedVersion && <Text color={colors.textDim}> v{installedVersion}</Text>}
-        {installed && <Text color={colors.success}> ✓</Text>}
-        {wasAutoUpdated && <Text color={colors.success}> ↑</Text>}
-        {updateStatus.hasUpdate && !wasAutoUpdated && <Text color={colors.primary}> ↑</Text>}
-        <Text> </Text>
-        {tool.includes.skills.length > 0 && <Text color={colors.skill}>● </Text>}
-        {tool.includes.commands.length > 0 && <Text color={colors.command}>● </Text>}
-        {tool.includes.agents.length > 0 && <Text color={colors.agent}>●</Text>}
-      </Text>
-    </Box>
-  );
-}
-
-function ToolDetails({
-  tool,
-  isFocused,
-  selectedAction,
-}: {
-  tool: ToolManifest | null;
-  isFocused: boolean;
-  selectedAction: number;
-}) {
-  if (!tool) {
-    return (
-      <Box paddingLeft={2} flexGrow={1}>
-        <Text color={colors.textDim}>Select a tool</Text>
-      </Box>
-    );
-  }
-
-  const installed = isToolInstalled(tool.name);
-  const installedVersion = getInstalledToolVersion(tool.name);
-  const updateStatus = getToolUpdateStatus(tool.name);
-  const isSystemTool = (tool as ToolManifest & { system?: boolean }).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 (
-    <Box flexDirection="column" paddingLeft={2} flexGrow={1}>
-      <Text color={colors.text} bold>{tool.name}</Text>
-
-      <Box marginTop={1}>
-        <Text color={colors.textDim}>
-          {tool.version}
-          {tool.status && ` · ${tool.status}`}
-          {installed && <Text color={colors.success}> · installed</Text>}
-          {updateStatus.hasUpdate && (
-            <Text color={colors.primary}> · update ({installedVersion} → {updateStatus.bundledVersion})</Text>
-          )}
-        </Text>
-      </Box>
-
-      <Box marginTop={1}>
-        <Text color={colors.textMuted}>{tool.description}</Text>
-      </Box>
-
-      {/* Colored component badges */}
-      <Box flexDirection="column" marginTop={1}>
-        <Text color={colors.textDim}>Includes:</Text>
-        <Box marginTop={1}>
-          <ComponentBadges tool={tool} />
-        </Box>
-        {/* Show names below badges */}
-        <Box flexDirection="column" marginTop={1} marginLeft={1}>
-          {tool.includes.skills.length > 0 && (
-            <Text>
-              <Text color={colors.skill}>Skills: </Text>
-              <Text color={colors.textMuted}>{tool.includes.skills.map(s => s.name).join(', ')}</Text>
-            </Text>
-          )}
-          {tool.includes.commands.length > 0 && (
-            <Text>
-              <Text color={colors.command}>Commands: </Text>
-              <Text color={colors.textMuted}>{tool.includes.commands.map(c => `/${c}`).join(', ')}</Text>
-            </Text>
-          )}
-          {tool.includes.agents.length > 0 && (
-            <Text>
-              <Text color={colors.agent}>Agents: </Text>
-              <Text color={colors.textMuted}>{tool.includes.agents.join(', ')}</Text>
-            </Text>
-          )}
-        </Box>
-      </Box>
-
-      {isFocused && (
-        <Box flexDirection="row" marginTop={1}>
-          {actions.map((action, index) => (
-            <Text
-              key={action.id}
-              backgroundColor={
-                selectedAction === index
-                  ? action.variant === 'danger'
-                    ? colors.error
-                    : colors.primary
-                  : colors.bgSelected
-              }
-              color={selectedAction === index ? '#ffffff' : colors.textMuted}
-              bold={selectedAction === index}
-            >
-              {' '}{action.label}{' '}
-            </Text>
-          ))}
-        </Box>
-      )}
-    </Box>
-  );
-}
-
-function MarkdownLine({ line, inCodeBlock }: { line: string; inCodeBlock: boolean }) {
-  // Code block content
-  if (inCodeBlock) {
-    return <Text color="#a5d6ff">{line || ' '}</Text>;
-  }
-
-  // Code block delimiter
-  if (line.startsWith('```')) {
-    return <Text color={colors.textDim}>{line}</Text>;
-  }
-
-  // Headers
-  if (line.startsWith('# ')) {
-    return <Text color={colors.text} bold>{line.slice(2)}</Text>;
-  }
-  if (line.startsWith('## ')) {
-    return <Text color={colors.text} bold>{line.slice(3)}</Text>;
-  }
-  if (line.startsWith('### ')) {
-    return <Text color="#c9d1d9" bold>{line.slice(4)}</Text>;
-  }
-
-  // YAML frontmatter delimiter
-  if (line === '---') {
-    return <Text color={colors.textDim}>{line}</Text>;
-  }
-
-  // List items
-  if (line.match(/^[\s]*[-*]\s/)) {
-    return <Text color={colors.textMuted}>{line}</Text>;
-  }
-
-  // Blockquotes
-  if (line.startsWith('>')) {
-    return <Text color="#8b949e" italic>{line}</Text>;
-  }
-
-  // Table rows
-  if (line.includes('|')) {
-    return <Text color={colors.textMuted}>{line}</Text>;
-  }
-
-  // Default
-  return <Text color={colors.textMuted}>{line || ' '}</Text>;
-}
-
-function ReadmeViewer({
-  title,
-  content,
-  onClose,
-}: {
-  title: string;
-  content: string;
-  onClose: () => void;
-}) {
-  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: boolean[] = [];
-    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 (
-    <Box flexDirection="column" padding={1}>
-      <Box marginBottom={1}>
-        <Text color={colors.text} bold>{title}</Text>
-        <Text color={colors.textDim}> · {lines.length} lines</Text>
-      </Box>
-
-      <Box
-        flexDirection="column"
-        borderStyle="single"
-        borderColor={colors.border}
-        paddingX={1}
-      >
-        {showTopIndicator && (
-          <Text color={colors.textDim}>↑ {scrollOffset} more lines</Text>
-        )}
-        {visibleLines.map((line, i) => (
-          <MarkdownLine key={scrollOffset + i} line={line} inCodeBlock={lineStates[scrollOffset + i]} />
-        ))}
-        {showBottomIndicator && (
-          <Text color={colors.textDim}>↓ {lines.length - scrollOffset - actualContentLines} more lines</Text>
-        )}
-      </Box>
-
-      <Box marginTop={1}>
-        <Text color={colors.textDim}>↑↓ scroll · space/pgdn page · esc back</Text>
-      </Box>
-    </Box>
-  );
-}
-
-interface ExplorerItem {
-  type: ComponentType;
-  name: string;
-  path: string;
-}
-
-interface ToolExplorerProps {
-  tool: ToolManifest;
-  onViewSource: (title: string, content: string) => void;
-  onClose: () => void;
-}
-
-function ToolExplorer({ tool, onViewSource, onClose }: ToolExplorerProps) {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  // Build list of all explorable items
-  const items: ExplorerItem[] = useMemo(() => {
-    const result: ExplorerItem[] = [];
-    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`),
-      });
-    }
-
-    for (const agent of tool.includes.agents) {
-      result.push({
-        type: 'agent',
-        name: agent,
-        path: join(toolDir, tool.name, 'agents', `${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: ExplorerItem) => items.indexOf(item);
-
-  return (
-    <Box flexDirection="column" padding={1}>
-      <Box marginBottom={1}>
-        <Text>
-          <Text color={colors.textDim}>[</Text>
-          <Text color={colors.primary}>●</Text>
-          <Text color={colors.textDim}> </Text>
-          <Text color={colors.primary}>●</Text>
-          <Text color={colors.textDim}>] </Text>
-          <Text color={colors.text} bold>{tool.name}</Text>
-        </Text>
-      </Box>
-
-      <Box marginBottom={1}>
-        <Text color={colors.textMuted}>{tool.description}</Text>
-      </Box>
-
-      {/* Skills section */}
-      {skillItems.length > 0 && (
-        <Box flexDirection="column" marginBottom={1}>
-          <Text color={colors.skill} bold>Skills</Text>
-          <Box flexDirection="row" flexWrap="wrap" marginTop={1}>
-            {skillItems.map((item) => {
-              const idx = getItemIndex(item);
-              const isSelected = selectedIndex === idx;
-              return (
-                <Box key={item.name} marginRight={1} marginBottom={1}>
-                  <Text
-                    backgroundColor={isSelected ? colors.skill : colors.bgSelected}
-                    color={isSelected ? '#000000' : colors.skill}
-                    bold={isSelected}
-                  >
-                    {` ${item.name} `}
-                  </Text>
-                </Box>
-              );
-            })}
-          </Box>
-        </Box>
-      )}
-
-      {/* Commands section */}
-      {commandItems.length > 0 && (
-        <Box flexDirection="column" marginBottom={1}>
-          <Text color={colors.command} bold>Commands</Text>
-          <Box flexDirection="row" flexWrap="wrap" marginTop={1}>
-            {commandItems.map((item) => {
-              const idx = getItemIndex(item);
-              const isSelected = selectedIndex === idx;
-              return (
-                <Box key={item.name} marginRight={1} marginBottom={1}>
-                  <Text
-                    backgroundColor={isSelected ? colors.command : colors.bgSelected}
-                    color={isSelected ? '#000000' : colors.command}
-                    bold={isSelected}
-                  >
-                    {` ${item.name} `}
-                  </Text>
-                </Box>
-              );
-            })}
-          </Box>
-        </Box>
-      )}
-
-      {/* Agents section */}
-      {agentItems.length > 0 && (
-        <Box flexDirection="column" marginBottom={1}>
-          <Text color={colors.agent} bold>Agents</Text>
-          <Box flexDirection="row" flexWrap="wrap" marginTop={1}>
-            {agentItems.map((item) => {
-              const idx = getItemIndex(item);
-              const isSelected = selectedIndex === idx;
-              return (
-                <Box key={item.name} marginRight={1} marginBottom={1}>
-                  <Text
-                    backgroundColor={isSelected ? colors.agent : colors.bgSelected}
-                    color={isSelected ? '#000000' : colors.agent}
-                    bold={isSelected}
-                  >
-                    {` ${item.name} `}
-                  </Text>
-                </Box>
-              );
-            })}
-          </Box>
-        </Box>
-      )}
-
-      <Box marginTop={1}>
-        <Text color={colors.textDim}>←→ navigate · enter view source · esc back</Text>
-      </Box>
-    </Box>
-  );
-}
-
-function SettingsDetails({
-  onEditSettings,
-  isFocused,
-  onToggleAutoUpdate,
-  selectedSetting,
-}: {
-  onEditSettings: () => void;
-  isFocused: boolean;
-  onToggleAutoUpdate: () => void;
-  selectedSetting: number;
-}) {
-  const config = loadConfig();
-  const autoUpdateConfig = getAutoUpdateConfig();
-
-  return (
-    <Box flexDirection="column" paddingLeft={2} flexGrow={1}>
-      <Text color={colors.text} bold>Settings</Text>
-
-      <Box flexDirection="column" marginTop={1}>
-        <Text>
-          <Text color={colors.textDim}>Platform:      </Text>
-          <Text color={colors.text}>
-            {config.platform === Platform.ClaudeCode ? 'Claude Code' : 'OpenCode'}
-          </Text>
-        </Text>
-        <Text>
-          <Text color={colors.textDim}>Your @mention: </Text>
-          <Text color={colors.text}>{config.user_mention}</Text>
-        </Text>
-      </Box>
-
-      <Box flexDirection="column" marginTop={2}>
-        <Text color={colors.text} bold>Auto-Update</Text>
-        <Box marginTop={1}>
-          <Text>
-            <Text color={colors.textDim}>{isFocused && selectedSetting === 0 ? '> ' : '  '}</Text>
-            <Text color={isFocused && selectedSetting === 0 ? colors.text : colors.textMuted}>
-              [{autoUpdateConfig.tools ? 'x' : ' '}] Auto-update tools
-            </Text>
-          </Text>
-        </Box>
-        <Text color={colors.textDim}>    Update tools automatically when droid starts</Text>
-        <Box marginTop={1}>
-          <Text>
-            <Text color={colors.textDim}>{isFocused && selectedSetting === 1 ? '> ' : '  '}</Text>
-            <Text color={isFocused && selectedSetting === 1 ? colors.text : colors.textMuted}>
-              [{autoUpdateConfig.app ? 'x' : ' '}] Auto-update app
-            </Text>
-          </Text>
-        </Box>
-        <Text color={colors.textDim}>    Update droid automatically when a new version is available</Text>
-      </Box>
-
-      <Box marginTop={2}>
-        <Text color={colors.textDim}>Config: ~/.droid/config.yaml</Text>
-      </Box>
-
-      {isFocused && (
-        <Box marginTop={2}>
-          <Text
-            backgroundColor={selectedSetting === 2 ? colors.primary : colors.bgSelected}
-            color={selectedSetting === 2 ? '#ffffff' : colors.textMuted}
-            bold={selectedSetting === 2}
-          >
-            {' '}Edit Profile{' '}
-          </Text>
-        </Box>
-      )}
-
-      {isFocused && (
-        <Box marginTop={1}>
-          <Text color={colors.textDim}>↑↓ select · enter toggle/edit · esc back</Text>
-        </Box>
-      )}
-
-      {!isFocused && (
-        <Box marginTop={2}>
-          <Text color={colors.textDim}>press enter to configure</Text>
-        </Box>
-      )}
-    </Box>
-  );
-}
-
-interface SkillConfigScreenProps {
-  skill: SkillManifest;
-  onComplete: () => void;
-  onCancel: () => void;
-}
-
-const MAX_VISIBLE_CONFIG_ITEMS = 4; // Each config item takes ~3 lines
-
-function SkillConfigScreen({ skill, onComplete, onCancel }: SkillConfigScreenProps) {
-  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<SkillOverrides>(() => {
-    const initial: SkillOverrides = {};
-    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<string | null>(null);
-  const [editValue, setEditValue] = useState('');
-  const [editingSelect, setEditingSelect] = useState<string | null>(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 (
-      <Box flexDirection="column" padding={1}>
-        <Box marginBottom={1}>
-          <Text>
-            <Text color={colors.textDim}>[</Text>
-            <Text color={colors.primary}>●</Text>
-            <Text color={colors.textDim}> </Text>
-            <Text color={colors.primary}>●</Text>
-            <Text color={colors.textDim}>] </Text>
-            <Text color={colors.text} bold>configure {skill.name}</Text>
-          </Text>
-        </Box>
-        <Text color={colors.textMuted}>This skill has no configuration options.</Text>
-        <Box marginTop={1}>
-          <Text color={colors.textDim}>esc to go back</Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  // 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 (
-    <Box flexDirection="column" padding={1}>
-      <Box marginBottom={1}>
-        <Text>
-          <Text color={colors.textDim}>[</Text>
-          <Text color={colors.primary}>●</Text>
-          <Text color={colors.textDim}> </Text>
-          <Text color={colors.primary}>●</Text>
-          <Text color={colors.textDim}>] </Text>
-          <Text color={colors.text} bold>configure {skill.name}</Text>
-        </Text>
-      </Box>
-
-      <Box flexDirection="column">
-        {/* Scroll up indicator */}
-        {showTopIndicator && (
-          <Box marginBottom={1}>
-            <Text color={colors.textDim}>  ↑ {scrollOffset} more</Text>
-          </Box>
-        )}
-
-        {visibleConfigKeys.map((key) => {
-          const actualIndex = configKeys.indexOf(key);
-          const option = configSchema[key];
-          const isSelected = selectedIndex === actualIndex;
-          const isEditing = editingField === key;
-
-          return (
-            <Box key={key} flexDirection="column" marginBottom={1}>
-              <Text>
-                <Text color={colors.textDim}>{isSelected ? '>' : ' '} </Text>
-                <Text color={isSelected ? colors.text : colors.textMuted}>{key}</Text>
-              </Text>
-              <Text color={colors.textDim}>    {option.description}</Text>
-              <Box>
-                <Text color={colors.textDim}>    </Text>
-                {option.type === ConfigOptionType.Boolean ? (
-                  <Text color={colors.text}>
-                    [{values[key] ? 'x' : ' '}] {values[key] ? 'enabled' : 'disabled'}
-                  </Text>
-                ) : option.type === ConfigOptionType.Select && option.options ? (
-                  <Text color={colors.text}>
-                    {option.options.map((opt, i) => {
-                      const isCurrentValue = String(values[key]) === opt;
-                      const isEditingThis = editingSelect === key;
-                      const isHighlighted = isEditingThis && selectOptionIndex === i;
-                      return (
-                        <Text key={opt}>
-                          {i > 0 && <Text color={colors.textDim}> · </Text>}
-                          <Text
-                            color={isHighlighted ? '#ffffff' : isCurrentValue ? colors.primary : colors.textMuted}
-                            backgroundColor={isHighlighted ? colors.primary : undefined}
-                          >
-                            {isCurrentValue && !isEditingThis ? `[${opt}]` : isHighlighted ? ` ${opt} ` : opt}
-                          </Text>
-                        </Text>
-                      );
-                    })}
-                  </Text>
-                ) : isEditing ? (
-                  <Box>
-                    <Text color={colors.textDim}>{'> '}</Text>
-                    <TextInput
-                      value={editValue}
-                      onChange={setEditValue}
-                      onSubmit={handleSubmitEdit}
-                    />
-                  </Box>
-                ) : (
-                  <Text color={colors.text}>{String(values[key]) || '(not set)'}</Text>
-                )}
-              </Box>
-            </Box>
-          );
-        })}
-
-        {/* Save button - show if in visible range */}
-        {showSaveButton && (
-          <Box marginTop={1}>
-            <Text>
-              <Text color={colors.textDim}>{selectedIndex === configKeys.length ? '>' : ' '} </Text>
-              <Text
-                backgroundColor={selectedIndex === configKeys.length ? colors.primary : undefined}
-                color={selectedIndex === configKeys.length ? '#ffffff' : colors.textMuted}
-                bold={selectedIndex === configKeys.length}
-              >
-                {' '}Save{' '}
-              </Text>
-            </Text>
-          </Box>
-        )}
-
-        {/* Scroll down indicator */}
-        {showBottomIndicator && (
-          <Box marginTop={1}>
-            <Text color={colors.textDim}>  ↓ {totalItems - scrollOffset - MAX_VISIBLE_CONFIG_ITEMS} more</Text>
-          </Box>
-        )}
-      </Box>
-
-      <Box marginTop={1}>
-        <Text color={colors.textDim}>
-          {editingField
-            ? 'enter save · esc cancel'
-            : editingSelect
-              ? '←→ choose · enter select · esc cancel'
-              : '↑↓ select · enter toggle/edit · esc back'}
-        </Text>
-      </Box>
-    </Box>
-  );
-}
+// Module-level variable to store exit message (printed after leaving alternate screen)
+let exitMessage: string | null = null;
 
 function App() {
   const { exit } = useApp();
@@ -1428,97 +44,23 @@ function App() {
   const [message, setMessage] = useState<{ text: string; type: 'success' | 'error' } | null>(null);
   const [isEditingSettings, setIsEditingSettings] = useState(false);
   const [readmeContent, setReadmeContent] = useState<{ title: string; content: string } | null>(null);
-  const [selectedSetting, setSelectedSetting] = useState(0);
-  const [isUpdating, setIsUpdating] = useState(false);
-  const [isUpdatingTools, setIsUpdatingTools] = useState(false);
   const [previousView, setPreviousView] = useState<View>('detail'); // Track where to return from readme
-  const [toolUpdates, setToolUpdates] = useState<ToolUpdateInfo[]>([]);
-  const [autoUpdatedTools, setAutoUpdatedTools] = useState<string[]>([]);
-
-  // 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 as ToolManifest & { system?: boolean }).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');
     } else {
@@ -1526,38 +68,15 @@ ${dim}────────────────────────
     }
   };
 
-  const handleUpdateAllTools = (updates: ToolUpdateInfo[] = toolUpdates, silent = false) => {
-    if (!silent) {
-      setIsUpdatingTools(true);
-    }
-
-    setTimeout(() => {
-      let successCount = 0;
-      let failCount = 0;
-      const updatedNames: string[] = [];
-
-      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
@@ -1566,52 +85,31 @@ ${dim}────────────────────────
           type: failCount > 0 ? 'error' : 'success',
         });
       }
+      proceedToNextView();
+    },
+  });
 
-      // Proceed to next view
-      if (!configExists()) {
-        setView('setup');
-      } else {
-        setView('menu');
-      }
-    }, 100);
-  };
+  // Check for tool updates and proceed to next view
+  const checkToolUpdatesAndProceed = () => {
+    const { updates, shouldAutoUpdate } = checkForUpdates();
 
-  const handleAlwaysUpdateTools = () => {
-    // Enable auto-update in config
-    setAutoUpdateConfig({ tools: true });
-    // Then update all
-    handleUpdateAllTools();
-  };
+    if (shouldAutoUpdate) {
+      updateAllTools(updates, true);
+      return;
+    }
 
-  const handleSkipToolUpdates = () => {
-    if (!configExists()) {
-      setView('setup');
-    } else {
-      setView('menu');
+    if (updates.length > 0) {
+      setView('tool-updates');
+      return;
     }
-  };
 
-  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',
-    });
+    proceedToNextView();
   };
 
-  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();
@@ -1667,32 +165,18 @@ ${dim}────────────────────────
           setView('detail');
         } else if (activeTab === 'settings') {
           setView('detail');
-          setSelectedSetting(0);
         }
       }
     } else if (view === 'detail') {
       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') {
@@ -1806,8 +290,8 @@ ${dim}────────────────────────
     return (
       <ToolUpdatePrompt
         toolUpdates={toolUpdates}
-        onUpdateAll={() => handleUpdateAllTools()}
-        onAlways={handleAlwaysUpdateTools}
+        onUpdateAll={() => updateAllTools()}
+        onAlways={enableAutoUpdateAndUpdate}
         onSkip={handleSkipToolUpdates}
         isUpdating={isUpdatingTools}
       />
@@ -1966,13 +450,7 @@ ${dim}────────────────────────
 
       {activeTab === 'settings' && (
         <SettingsDetails
-          onEditSettings={() => {
-            setIsEditingSettings(true);
-            setView('setup');
-          }}
           isFocused={view === 'detail'}
-          onToggleAutoUpdate={handleToggleAutoUpdateTools}
-          selectedSetting={selectedSetting}
         />
       )}
     </Box>
@@ -1984,7 +462,7 @@ export async function tuiCommand(): Promise<void> {
   process.stdout.write('\x1b[?1049h');
   process.stdout.write('\x1b[H'); // Move cursor to top-left
 
-  const { unmount, waitUntilExit } = render(<App />);
+  const { waitUntilExit } = render(<App />);
 
   await waitUntilExit();