@orderful/droid 0.11.1 → 0.13.0

package/src/commands/tui.tsx

@@ -12,15 +12,18 @@ import {
   updateSkill,
   getSkillUpdateStatus,
 } from '../lib/skills.js';
-import { getBundledTools, getBundledToolsDir, isToolInstalled, getToolUpdateStatus, getInstalledToolVersion } from '../lib/tools.js';
-import { configExists, loadConfig, saveConfig, loadSkillOverrides, saveSkillOverrides } from '../lib/config.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';
 
 type Tab = 'tools' | 'settings';
-type View = 'welcome' | 'setup' | 'menu' | 'detail' | 'configure' | 'readme' | 'explorer';
+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';
 
@@ -162,12 +165,13 @@ function getOutputOptions(): Array<{ label: string; value: OutputPreference }> {
 interface WelcomeScreenProps {
   onContinue: () => void;
   onUpdate: () => void;
+  onAlways: () => void;
   onExit: () => void;
   updateInfo: UpdateInfo;
   isUpdating: boolean;
 }
 
-function WelcomeScreen({ onContinue, onUpdate, onExit, updateInfo, isUpdating }: WelcomeScreenProps) {
+function WelcomeScreen({ onContinue, onUpdate, onAlways, onExit, updateInfo, isUpdating }: WelcomeScreenProps) {
   const [selectedButton, setSelectedButton] = useState(0);
   const welcomeQuote = useMemo(() => getRandomQuote(), []);
 
@@ -175,12 +179,17 @@ function WelcomeScreen({ onContinue, onUpdate, onExit, updateInfo, isUpdating }:
     if (isUpdating) return;
 
     if (updateInfo.hasUpdate) {
-      if (key.leftArrow || key.rightArrow) {
-        setSelectedButton((prev) => (prev === 0 ? 1 : 0));
+      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();
         }
@@ -260,17 +269,25 @@ function WelcomeScreen({ onContinue, onUpdate, onExit, updateInfo, isUpdating }:
                 </Text>
                 <Text> </Text>
                 <Text
-                  backgroundColor={selectedButton === 1 ? colors.bgSelected : undefined}
-                  color={selectedButton === 1 ? colors.text : colors.textMuted}
+                  backgroundColor={selectedButton === 1 ? '#eab308' : colors.bgSelected}
+                  color={selectedButton === 1 ? '#000000' : colors.textMuted}
                   bold={selectedButton === 1}
                 >
-                  {' '}Skip for now{' '}
+                  {' '}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</Text>
+              <Text color={colors.textDim}>←→ select · enter · "Always" enables auto-update</Text>
             </Box>
           </>
         ) : (
@@ -289,6 +306,111 @@ function WelcomeScreen({ onContinue, onUpdate, onExit, updateInfo, isUpdating }:
   );
 }
 
+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;
@@ -475,10 +597,12 @@ function ToolItem({
   tool,
   isSelected,
   isActive,
+  wasAutoUpdated,
 }: {
   tool: ToolManifest;
   isSelected: boolean;
   isActive: boolean;
+  wasAutoUpdated?: boolean;
 }) {
   const installed = isToolInstalled(tool.name);
   const installedVersion = getInstalledToolVersion(tool.name);
@@ -491,7 +615,8 @@ function ToolItem({
         <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>}
-        {updateStatus.hasUpdate && <Text color={colors.primary}> ↑</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>}
@@ -521,6 +646,7 @@ function ToolDetails({
   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
     ? [
@@ -529,10 +655,12 @@ function ToolDetails({
           ? [{ id: 'update', label: `Update (${updateStatus.bundledVersion})`, variant: 'primary' }]
           : []),
         { id: 'configure', label: 'Configure', variant: 'default' },
-        { id: 'uninstall', label: 'Uninstall', variant: 'danger' },
+        // 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' },
       ];
 
@@ -930,12 +1058,16 @@ function ToolExplorer({ tool, onViewSource, onClose }: ToolExplorerProps) {
 function SettingsDetails({
   onEditSettings,
   isFocused,
+  onToggleAutoUpdate,
+  selectedSetting,
 }: {
   onEditSettings: () => void;
   isFocused: boolean;
+  onToggleAutoUpdate: () => void;
+  selectedSetting: number;
 }) {
   const config = loadConfig();
-  const outputOptions = getOutputOptions();
+  const autoUpdateConfig = getAutoUpdateConfig();
 
   return (
     <Box flexDirection="column" paddingLeft={2} flexGrow={1}>
@@ -954,21 +1086,53 @@ function SettingsDetails({
         </Text>
       </Box>
 
-      <Box marginTop={1}>
+      <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={colors.primary} color="#ffffff" bold>
-            {' '}Edit Settings{' '}
+          <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 edit</Text>
+          <Text color={colors.textDim}>press enter to configure</Text>
         </Box>
       )}
     </Box>
@@ -1265,11 +1429,16 @@ 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);
@@ -1277,8 +1446,21 @@ function App() {
     setTimeout(() => {
       const result = runUpdate();
       if (result.success) {
-        // Print success message before exiting
-        console.log('\n✅ Update complete! Run `droid` to start the new version.\n');
+        // 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();
       } else {
         setIsUpdating(false);
@@ -1293,6 +1475,142 @@ function App() {
     }, 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);
+      }
+    }
+  };
+
+  // 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
+    if (!configExists()) {
+      setView('setup');
+    } else {
+      setView('menu');
+    }
+  };
+
+  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);
+      }
+
+      if (successCount > 0) {
+        setMessage({
+          text: silent
+            ? `↑ Auto-updated ${successCount} tool${successCount > 1 ? 's' : ''}`
+            : `✓ Updated ${successCount} tool${successCount > 1 ? 's' : ''}${failCount > 0 ? `, ${failCount} failed` : ''}`,
+          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');
+    } else {
+      setView('menu');
+    }
+  };
+
+  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 MAX_VISIBLE_ITEMS = 6;
 
   const tools = getBundledTools();
@@ -1349,27 +1667,47 @@ function App() {
         if (activeTab === 'tools' && tools.length > 0) {
           setView('detail');
         } else if (activeTab === 'settings') {
-          setIsEditingSettings(true);
-          setView('setup');
+          setView('detail');
+          setSelectedSetting(0);
         }
       }
     } else if (view === 'detail') {
       if (key.escape || key.backspace) {
         setView('menu');
         setSelectedAction(0);
+        setSelectedSetting(0);
       }
-      if (key.leftArrow) {
+      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
+        }
+        if (key.return) {
+          if (selectedSetting === 0) {
+            handleToggleAutoUpdateTools();
+          } else if (selectedSetting === 1) {
+            handleToggleAutoUpdateApp();
+          } else if (selectedSetting === 2) {
+            setIsEditingSettings(true);
+            setView('setup');
+          }
+        }
+      }
+      if (key.leftArrow && activeTab === 'tools') {
         setSelectedAction((prev) => Math.max(0, prev - 1));
       }
-      if (key.rightArrow) {
+      if (key.rightArrow && activeTab === 'tools') {
         let maxActions = 0;
-        if (activeTab === 'tools') {
-          const tool = tools[selectedIndex];
-          const installed = tool ? isToolInstalled(tool.name) : false;
-          const hasUpdate = tool ? getToolUpdateStatus(tool.name).hasUpdate : false;
-          // Explore, [Update], Configure, Uninstall or Explore, Install
-          maxActions = installed ? (hasUpdate ? 3 : 2) : 1;
-        }
+        const tool = tools[selectedIndex];
+        const installed = tool ? isToolInstalled(tool.name) : false;
+        const hasUpdate = tool ? getToolUpdateStatus(tool.name).hasUpdate : false;
+        const isSystem = tool ? (tool as ToolManifest & { system?: boolean }).system === true : false;
+        // Explore, [Update], Configure, [Uninstall] or Explore, Install
+        // System tools don't have Uninstall, so one less action
+        maxActions = installed ? (hasUpdate ? (isSystem ? 2 : 3) : (isSystem ? 1 : 2)) : 1;
         setSelectedAction((prev) => Math.min(maxActions, prev + 1));
       }
       if (key.return && activeTab === 'tools') {
@@ -1377,13 +1715,14 @@ function App() {
         if (tool) {
           const installed = isToolInstalled(tool.name);
           const toolUpdateStatus = getToolUpdateStatus(tool.name);
+          const isSystemTool = (tool as ToolManifest & { system?: boolean }).system === true;
           // Build actions array to match ToolDetails
           const toolActions = installed
             ? [
                 { id: 'explore' },
                 ...(toolUpdateStatus.hasUpdate ? [{ id: 'update' }] : []),
                 { id: 'configure' },
-                { id: 'uninstall' },
+                ...(!isSystemTool ? [{ id: 'uninstall' }] : []),
               ]
             : [{ id: 'explore' }, { id: 'install' }];
 
@@ -1443,7 +1782,7 @@ function App() {
         }
       }
     }
-  }, { isActive: view !== 'welcome' && view !== 'setup' && view !== 'configure' && view !== 'explorer' });
+  }, { isActive: view !== 'welcome' && view !== 'tool-updates' && view !== 'setup' && view !== 'configure' && view !== 'explorer' });
 
   const selectedTool = activeTab === 'tools' ? tools[selectedIndex] ?? null : null;
   // For configure view, we need the matching skill manifest
@@ -1457,15 +1796,21 @@ function App() {
         updateInfo={updateInfo}
         isUpdating={isUpdating}
         onUpdate={handleUpdate}
+        onAlways={handleAlwaysUpdate}
         onExit={exit}
-        onContinue={() => {
-          // If no config exists, show setup first
-          if (!configExists()) {
-            setView('setup');
-          } else {
-            setView('menu');
-          }
-        }}
+        onContinue={checkToolUpdatesAndProceed}
+      />
+    );
+  }
+
+  if (view === 'tool-updates' && toolUpdates.length > 0) {
+    return (
+      <ToolUpdatePrompt
+        toolUpdates={toolUpdates}
+        onUpdateAll={() => handleUpdateAllTools()}
+        onAlways={handleAlwaysUpdateTools}
+        onSkip={handleSkipToolUpdates}
+        isUpdating={isUpdatingTools}
       />
     );
   }
@@ -1577,6 +1922,7 @@ function App() {
                   tool={tool}
                   isSelected={scrollOffset + index === selectedIndex}
                   isActive={scrollOffset + index === selectedIndex && view === 'detail'}
+                  wasAutoUpdated={autoUpdatedTools.includes(tool.name)}
                 />
               ))}
               {scrollOffset + MAX_VISIBLE_ITEMS < tools.length && (
@@ -1620,7 +1966,15 @@ function App() {
       )}
 
       {activeTab === 'settings' && (
-        <SettingsDetails onEditSettings={() => setView('setup')} isFocused={false} />
+        <SettingsDetails
+          onEditSettings={() => {
+            setIsEditingSettings(true);
+            setView('setup');
+          }}
+          isFocused={view === 'detail'}
+          onToggleAutoUpdate={handleToggleAutoUpdateTools}
+          selectedSetting={selectedSetting}
+        />
       )}
     </Box>
   );
@@ -1637,4 +1991,10 @@ export async function tuiCommand(): Promise<void> {
 
   // Leave alternate screen
   process.stdout.write('\x1b[?1049l');
+
+  // Print exit message if set (e.g., after successful update)
+  if (exitMessage) {
+    console.log(exitMessage);
+    exitMessage = null;
+  }
 }