@orderful/droid 0.10.4 → 0.11.0

package/src/commands/tui.tsx

@@ -2,28 +2,27 @@ import { render, Box, Text, useInput, useApp } from 'ink';
 import TextInput from 'ink-text-input';
 import { useState, useMemo } from 'react';
 import { execSync } from 'child_process';
-import { existsSync, readdirSync, readFileSync } from 'fs';
+import { existsSync, readFileSync } from 'fs';
 import { join } from 'path';
 import {
   getBundledSkills,
-  getBundledSkillsDir,
   isSkillInstalled,
-  getInstalledSkill,
   installSkill,
   uninstallSkill,
   updateSkill,
   getSkillUpdateStatus,
 } from '../lib/skills.js';
-import { getBundledAgents, getBundledAgentsDir, isAgentInstalled, installAgent, uninstallAgent, type AgentManifest } from '../lib/agents.js';
+import { getBundledTools, getBundledToolsDir, isToolInstalled, getToolUpdateStatus, getInstalledToolVersion } from '../lib/tools.js';
 import { configExists, loadConfig, saveConfig, loadSkillOverrides, saveSkillOverrides } from '../lib/config.js';
-import { configureAIToolPermissions } from './setup.js';
-import { AITool, BuiltInOutput, ConfigOptionType, type DroidConfig, type OutputPreference, type SkillManifest, type ConfigOption, type SkillOverrides } from '../lib/types.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 = 'skills' | 'commands' | 'agents' | 'settings';
-type View = 'welcome' | 'setup' | 'menu' | 'detail' | 'configure' | 'readme';
-type SetupStep = 'ai_tool' | 'user_mention' | 'confirm';
+type Tab = 'tools' | 'settings';
+type View = 'welcome' | 'setup' | 'menu' | 'detail' | 'configure' | 'readme' | 'explorer';
+type SetupStep = 'platform' | 'user_mention' | 'confirm';
+type ComponentType = 'skill' | 'command' | 'agent';
 
 const colors = {
   primary: '#6366f1',
@@ -34,95 +33,116 @@ const colors = {
   textDim: '#6a6a6a',
   success: '#4ade80',
   error: '#f87171',
+  // Component type badges
+  skill: '#ec4899',     // pink/magenta
+  command: '#22d3ee',   // cyan
+  agent: '#fbbf24',     // yellow/amber
 };
 
-interface Command {
-  name: string;
-  description: string;
-  skillName: string;
-  usage: string[];
-}
-
-function getCommandsFromSkills(): Command[] {
-  const skillsDir = getBundledSkillsDir();
-  const commands: Command[] = [];
-
-  if (!existsSync(skillsDir)) return commands;
-
-  const skillDirs = readdirSync(skillsDir, { withFileTypes: true })
-    .filter((d) => d.isDirectory())
-    .map((d) => d.name);
+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);
 
-  for (const skillName of skillDirs) {
-    const commandsDir = join(skillsDir, skillName, 'commands');
-    if (!existsSync(commandsDir)) continue;
+  if (dimmed) {
+    return (
+      <Text color={colors.textDim}>{displayLabel}</Text>
+    );
+  }
 
-    const cmdFiles = readdirSync(commandsDir).filter((f) => f.endsWith('.md'));
-    for (const file of cmdFiles) {
-      const content = readFileSync(join(commandsDir, file), 'utf-8');
-      const lines = content.split('\n');
+  return (
+    <Text
+      backgroundColor={isSelected ? color : undefined}
+      color={isSelected ? '#000000' : color}
+      bold={isSelected}
+    >
+      {isSelected ? ` ${displayLabel} ` : displayLabel}
+    </Text>
+  );
+}
 
-      // Skip YAML frontmatter if present
-      let startLine = 0;
-      if (lines[0]?.trim() === '---') {
-        for (let i = 1; i < lines.length; i++) {
-          if (lines[i]?.trim() === '---') {
-            startLine = i + 1;
-            break;
-          }
-        }
-      }
+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;
 
-      // Find first H1 header
-      let headerMatch: RegExpMatchArray | null = null;
-      for (let i = startLine; i < lines.length; i++) {
-        headerMatch = lines[i]?.match(/^#\s+\/(\S+)\s*-?\s*(.*)/);
-        if (headerMatch) break;
-      }
-      if (!headerMatch) continue;
-
-      const usage: string[] = [];
-      let inUsage = false;
-      for (const line of lines) {
-        if (line.startsWith('## Usage')) inUsage = true;
-        else if (line.startsWith('## ') && inUsage) break;
-        else if (inUsage && line.startsWith('/')) usage.push(line.trim());
-      }
+  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');
 
-      commands.push({
-        name: headerMatch[1],
-        description: headerMatch[2] || '',
-        skillName,
-        usage,
-      });
-    }
+    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 commands;
+  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 detectInstalledAITools(): Set<AITool> {
-  const installed = new Set<AITool>();
+function detectInstalledPlatforms(): Set<Platform> {
+  const installed = new Set<Platform>();
   try {
     execSync('claude --version', { stdio: 'ignore' });
-    installed.add(AITool.ClaudeCode);
+    installed.add(Platform.ClaudeCode);
   } catch {
     // Claude Code not found
   }
   try {
     execSync('opencode --version', { stdio: 'ignore' });
-    installed.add(AITool.OpenCode);
+    installed.add(Platform.OpenCode);
   } catch {
     // OpenCode not found
   }
   return installed;
 }
 
-function getDefaultAITool(): AITool {
-  const installed = detectInstalledAITools();
-  if (installed.has(AITool.ClaudeCode)) return AITool.ClaudeCode;
-  if (installed.has(AITool.OpenCode)) return AITool.OpenCode;
-  return AITool.ClaudeCode;
+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 }> {
@@ -139,56 +159,6 @@ function getOutputOptions(): Array<{ label: string; value: OutputPreference }> {
   return options;
 }
 
-/**
- * Check if an agent belongs to a skill bundle (whether installed or not)
- * Returns the skill name if so, null otherwise
- */
-function getAgentBundledSkill(agentName: string): string | null {
-  const skillsDir = getBundledSkillsDir();
-  if (!existsSync(skillsDir)) return null;
-
-  const skillDirs = readdirSync(skillsDir, { withFileTypes: true })
-    .filter((d) => d.isDirectory())
-    .map((d) => d.name);
-
-  for (const skillName of skillDirs) {
-    const agentDir = join(skillsDir, skillName, 'agents', agentName);
-    if (existsSync(agentDir)) {
-      return skillName;
-    }
-  }
-  return null;
-}
-
-/**
- * Find the source path for an agent's AGENT.md
- * Checks both standalone agents dir and skill-bundled agents
- */
-function findAgentSourcePath(agentName: string): string | null {
-  // Check standalone agents first
-  const standalonePath = join(getBundledAgentsDir(), agentName, 'AGENT.md');
-  if (existsSync(standalonePath)) {
-    return standalonePath;
-  }
-
-  // Check skill-bundled agents
-  const skillsDir = getBundledSkillsDir();
-  if (existsSync(skillsDir)) {
-    const skillDirs = readdirSync(skillsDir, { withFileTypes: true })
-      .filter((d) => d.isDirectory())
-      .map((d) => d.name);
-
-    for (const skillName of skillDirs) {
-      const skillAgentPath = join(skillsDir, skillName, 'agents', agentName, 'AGENT.md');
-      if (existsSync(skillAgentPath)) {
-        return skillAgentPath;
-      }
-    }
-  }
-
-  return null;
-}
-
 interface WelcomeScreenProps {
   onContinue: () => void;
   onUpdate: () => void;
@@ -326,22 +296,22 @@ interface SetupScreenProps {
 }
 
 function SetupScreen({ onComplete, onSkip, initialConfig }: SetupScreenProps) {
-  const [step, setStep] = useState<SetupStep>('ai_tool');
-  const [aiTool, setAITool] = useState<AITool>(
-    initialConfig?.ai_tool || getDefaultAITool()
+  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 installedTools = useMemo(() => detectInstalledAITools(), []);
-  const aiToolOptions = useMemo(() => [
-    { label: 'Claude Code', value: AITool.ClaudeCode },
-    { label: 'OpenCode', value: AITool.OpenCode },
+  const installedPlatforms = useMemo(() => detectInstalledPlatforms(), []);
+  const platformOptions = useMemo(() => [
+    { label: 'Claude Code', value: Platform.ClaudeCode },
+    { label: 'OpenCode', value: Platform.OpenCode },
   ], []);
 
-  const steps: SetupStep[] = ['ai_tool', 'user_mention', 'confirm'];
+  const steps: SetupStep[] = ['platform', 'user_mention', 'confirm'];
   const stepIndex = steps.indexOf(step);
   const totalSteps = steps.length - 1; // Don't count confirm as a step
 
@@ -356,7 +326,7 @@ function SetupScreen({ onComplete, onSkip, initialConfig }: SetupScreenProps) {
   // Handle escape during text input (only intercept escape, nothing else)
   useInput((input, key) => {
     if (key.escape) {
-      setStep('ai_tool');
+      setStep('platform');
       setSelectedIndex(0);
     }
   }, { isActive: step === 'user_mention' });
@@ -364,7 +334,7 @@ function SetupScreen({ onComplete, onSkip, initialConfig }: SetupScreenProps) {
   // Handle all input for non-text-input steps
   useInput((input, key) => {
     if (key.escape) {
-      if (step === 'ai_tool') {
+      if (step === 'platform') {
         onSkip();
       } else if (step === 'confirm') {
         setStep('user_mention');
@@ -372,23 +342,24 @@ function SetupScreen({ onComplete, onSkip, initialConfig }: SetupScreenProps) {
       return;
     }
 
-    if (step === 'ai_tool') {
+    if (step === 'platform') {
       if (key.upArrow) setSelectedIndex((prev) => Math.max(0, prev - 1));
-      if (key.downArrow) setSelectedIndex((prev) => Math.min(aiToolOptions.length - 1, prev + 1));
+      if (key.downArrow) setSelectedIndex((prev) => Math.min(platformOptions.length - 1, prev + 1));
       if (key.return) {
-        setAITool(aiToolOptions[selectedIndex].value);
+        setPlatform(platformOptions[selectedIndex].value);
         setStep('user_mention');
       }
     } else if (step === 'confirm') {
       if (key.return) {
+        const existingConfig = loadConfig();
         const config: DroidConfig = {
-          ...loadConfig(),
-          ai_tool: aiTool,
+          ...existingConfig,
+          platform: platform,
           user_mention: userMention,
           output_preference: BuiltInOutput.Terminal, // Default to terminal
         };
         saveConfig(config);
-        configureAIToolPermissions(aiTool);
+        configurePlatformPermissions(platform);
         onComplete();
       }
     }
@@ -408,17 +379,17 @@ function SetupScreen({ onComplete, onSkip, initialConfig }: SetupScreenProps) {
     </Box>
   );
 
-  if (step === 'ai_tool') {
+  if (step === 'platform') {
     return (
       <Box flexDirection="column" padding={1}>
         {renderHeader()}
-        <Text color={colors.text}>Which AI tool are you using?</Text>
+        <Text color={colors.text}>Which platform are you using?</Text>
         <Box flexDirection="column" marginTop={1}>
-          {aiToolOptions.map((option, index) => (
+          {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>
-              {installedTools.has(option.value) && <Text color={colors.success}> (detected)</Text>}
+              {installedPlatforms.has(option.value) && <Text color={colors.success}> (detected)</Text>}
             </Text>
           ))}
         </Box>
@@ -462,8 +433,8 @@ function SetupScreen({ onComplete, onSkip, initialConfig }: SetupScreenProps) {
       <Text color={colors.text} bold>Review your settings</Text>
       <Box flexDirection="column" marginTop={1}>
         <Text>
-          <Text color={colors.textDim}>AI Tool:       </Text>
-          <Text color={colors.text}>{aiTool === AITool.ClaudeCode ? 'Claude Code' : 'OpenCode'}</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>
@@ -500,76 +471,60 @@ function TabBar({ tabs, activeTab }: { tabs: { id: Tab; label: string }[]; activ
   );
 }
 
-function SkillItem({
-  skill,
+function ToolItem({
+  tool,
   isSelected,
   isActive,
 }: {
-  skill: SkillManifest;
+  tool: ToolManifest;
   isSelected: boolean;
   isActive: boolean;
 }) {
-  const installed = isSkillInstalled(skill.name);
-  const installedInfo = getInstalledSkill(skill.name);
-  const updateStatus = getSkillUpdateStatus(skill.name);
+  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>
+      <Text wrap="truncate">
         <Text color={colors.textDim}>{isSelected ? '>' : ' '} </Text>
-        <Text color={isSelected || isActive ? colors.text : colors.textMuted}>{skill.name}</Text>
-        {installed && installedInfo && <Text color={colors.textDim}> v{installedInfo.version}</Text>}
-        {installed && <Text color={colors.success}> *</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>}
         {updateStatus.hasUpdate && <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 CommandItem({
-  command,
-  isSelected,
-}: {
-  command: Command;
-  isSelected: boolean;
-}) {
-  const installed = isSkillInstalled(command.skillName);
-
-  return (
-    <Box paddingX={1}>
-      <Text>
-        <Text color={colors.textDim}>{isSelected ? '>' : ' '} </Text>
-        <Text color={isSelected ? colors.text : colors.textMuted}>/{command.name}</Text>
-        {installed && <Text color={colors.success}> *</Text>}
-      </Text>
-    </Box>
-  );
-}
-
-function SkillDetails({
-  skill,
+function ToolDetails({
+  tool,
   isFocused,
   selectedAction,
 }: {
-  skill: SkillManifest | null;
+  tool: ToolManifest | null;
   isFocused: boolean;
   selectedAction: number;
 }) {
-  if (!skill) {
+  if (!tool) {
     return (
       <Box paddingLeft={2} flexGrow={1}>
-        <Text color={colors.textDim}>Select a skill</Text>
+        <Text color={colors.textDim}>Select a tool</Text>
       </Box>
     );
   }
 
-  const installed = isSkillInstalled(skill.name);
-  const updateStatus = getSkillUpdateStatus(skill.name);
-  const skillCommands = getCommandsFromSkills().filter((c) => c.skillName === skill.name);
+  const installed = isToolInstalled(tool.name);
+  const installedVersion = getInstalledToolVersion(tool.name);
+  const updateStatus = getToolUpdateStatus(tool.name);
 
   const actions = installed
     ? [
-        { id: 'view', label: 'View', variant: 'default' },
+        { id: 'explore', label: 'Explore', variant: 'default' },
         ...(updateStatus.hasUpdate
           ? [{ id: 'update', label: `Update (${updateStatus.bundledVersion})`, variant: 'primary' }]
           : []),
@@ -577,245 +532,58 @@ function SkillDetails({
         { id: 'uninstall', label: 'Uninstall', variant: 'danger' },
       ]
     : [
-        { id: 'view', label: 'View', variant: 'default' },
+        { id: 'explore', label: 'Explore', variant: 'default' },
         { id: 'install', label: 'Install', variant: 'primary' },
       ];
 
   return (
     <Box flexDirection="column" paddingLeft={2} flexGrow={1}>
-      <Text color={colors.text} bold>{skill.name}</Text>
+      <Text color={colors.text} bold>{tool.name}</Text>
 
       <Box marginTop={1}>
         <Text color={colors.textDim}>
-          {skill.version}
-          {skill.status && ` · ${skill.status}`}
+          {tool.version}
+          {tool.status && ` · ${tool.status}`}
           {installed && <Text color={colors.success}> · installed</Text>}
           {updateStatus.hasUpdate && (
-            <Text color={colors.primary}> · update available ({updateStatus.installedVersion} → {updateStatus.bundledVersion})</Text>
+            <Text color={colors.primary}> · update ({installedVersion} → {updateStatus.bundledVersion})</Text>
           )}
         </Text>
       </Box>
 
       <Box marginTop={1}>
-        <Text color={colors.textMuted}>{skill.description}</Text>
+        <Text color={colors.textMuted}>{tool.description}</Text>
       </Box>
 
-      {skillCommands.length > 0 && (
+      {/* Colored component badges */}
+      <Box flexDirection="column" marginTop={1}>
+        <Text color={colors.textDim}>Includes:</Text>
         <Box marginTop={1}>
-          <Text color={colors.textDim}>
-            Commands: {skillCommands.map((c) => `/${c.name}`).join(', ')}
-          </Text>
+          <ComponentBadges tool={tool} />
         </Box>
-      )}
-
-      {skill.examples && skill.examples.length > 0 && (
-        <Box flexDirection="column" marginTop={1}>
-          <Text color={colors.textDim}>
-            Examples{skill.examples.length > 2 ? ` (showing 2 of ${skill.examples.length})` : ''}:
-          </Text>
-          {skill.examples.slice(0, 2).map((example, i) => (
-            <Box key={i} flexDirection="column" marginTop={i > 0 ? 1 : 0}>
-              <Text color={colors.textMuted}>  {example.title}</Text>
-              {example.code
-                .trim()
-                .split('\n')
-                .slice(0, 3)
-                .map((line, j) => (
-                  <Text key={j} color={colors.textDim}>
-                    {'    '}{line}
-                  </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}{' '}
+        {/* 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>
-          ))}
-        </Box>
-      )}
-    </Box>
-  );
-}
-
-function CommandDetails({
-  command,
-  isFocused,
-  selectedAction,
-}: {
-  command: Command | null;
-  isFocused: boolean;
-  selectedAction: number;
-}) {
-  if (!command) {
-    return (
-      <Box paddingLeft={2} flexGrow={1}>
-        <Text color={colors.textDim}>Select a command</Text>
-      </Box>
-    );
-  }
-
-  const skillInstalled = isSkillInstalled(command.skillName);
-
-  // Commands belong to skills - only show View, install via skill
-  const actions = [{ id: 'view', label: 'View', variant: 'default' }];
-
-  return (
-    <Box flexDirection="column" paddingLeft={2} flexGrow={1}>
-      <Text color={colors.text} bold>/{command.name}</Text>
-
-      <Box marginTop={1}>
-        <Text color={colors.textDim}>
-          from {command.skillName}
-          {skillInstalled && <Text color={colors.success}> · installed</Text>}
-        </Text>
-      </Box>
-
-      <Box marginTop={1}>
-        <Text color={colors.textMuted}>{command.description}</Text>
-      </Box>
-
-      {command.usage.length > 0 && (
-        <Box flexDirection="column" marginTop={1}>
-          <Text color={colors.textDim}>Usage:</Text>
-          {command.usage.map((u, i) => (
-            <Text key={i} color={colors.textMuted}>
-              {'  '}{u}
+          )}
+          {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>
-          ))}
-        </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}{' '}
+          )}
+          {tool.includes.agents.length > 0 && (
+            <Text>
+              <Text color={colors.agent}>Agents: </Text>
+              <Text color={colors.textMuted}>{tool.includes.agents.join(', ')}</Text>
             </Text>
-          ))}
+          )}
         </Box>
-      )}
-    </Box>
-  );
-}
-
-function AgentItem({ agent, isSelected }: { agent: AgentManifest; isSelected: boolean }) {
-  const statusDisplay = agent.status === 'alpha' ? '[alpha]' : agent.status === 'beta' ? '[beta]' : '';
-
-  return (
-    <Box paddingX={1}>
-      <Text>
-        <Text color={colors.textDim}>{isSelected ? '>' : ' '} </Text>
-        <Text color={isSelected ? colors.text : colors.textMuted}>{agent.name}</Text>
-        <Text color={colors.textDim}> v{agent.version}</Text>
-        {statusDisplay && <Text color={colors.textDim}> {statusDisplay}</Text>}
-      </Text>
-    </Box>
-  );
-}
-
-function AgentDetails({
-  agent,
-  isFocused,
-  selectedAction,
-}: {
-  agent: AgentManifest | null;
-  isFocused: boolean;
-  selectedAction: number;
-}) {
-  if (!agent) {
-    return (
-      <Box paddingLeft={2} flexGrow={1}>
-        <Text color={colors.textDim}>Select an agent</Text>
-      </Box>
-    );
-  }
-
-  const installed = isAgentInstalled(agent.name);
-  const bundledSkill = getAgentBundledSkill(agent.name);
-  const skillInstalled = bundledSkill ? isSkillInstalled(bundledSkill) : false;
-  const statusDisplay = agent.status === 'alpha' ? '[alpha]' : agent.status === 'beta' ? '[beta]' : '';
-  const modeDisplay = agent.mode === 'primary' ? 'primary' : agent.mode === 'all' ? 'primary/subagent' : 'subagent';
-
-  // If agent belongs to a skill, only show View (install via skill)
-  // Otherwise show Install/Uninstall for standalone agents
-  const actions = bundledSkill
-    ? [{ id: 'view', label: 'View', variant: 'default' }]
-    : installed
-      ? [
-          { id: 'view', label: 'View', variant: 'default' },
-          { id: 'uninstall', label: 'Uninstall', variant: 'danger' },
-        ]
-      : [
-          { id: 'view', label: 'View', variant: 'default' },
-          { id: 'install', label: 'Install', variant: 'primary' },
-        ];
-
-  return (
-    <Box flexDirection="column" paddingLeft={2} flexGrow={1}>
-      <Text color={colors.text} bold>{agent.name}</Text>
-
-      <Box marginTop={1}>
-        <Text color={colors.textDim}>
-          v{agent.version}
-          {statusDisplay && <Text> · {statusDisplay}</Text>}
-          {' · '}{modeDisplay}
-          {bundledSkill && <Text color={colors.textMuted}> · from {bundledSkill}</Text>}
-          {skillInstalled && <Text color={colors.success}> · installed</Text>}
-          {!bundledSkill && installed && <Text color={colors.success}> · installed</Text>}
-        </Text>
-      </Box>
-
-      <Box marginTop={1}>
-        <Text color={colors.textMuted}>{agent.description}</Text>
       </Box>
 
-      {agent.tools && agent.tools.length > 0 && (
-        <Box marginTop={1}>
-          <Text color={colors.textDim}>
-            Tools: {agent.tools.join(', ')}
-          </Text>
-        </Box>
-      )}
-
-      {agent.triggers && agent.triggers.length > 0 && (
-        <Box flexDirection="column" marginTop={1}>
-          <Text color={colors.textDim}>Triggers:</Text>
-          {agent.triggers.slice(0, 3).map((trigger, i) => (
-            <Text key={i} color={colors.textMuted}>
-              {'  '}&quot;{trigger}&quot;
-            </Text>
-          ))}
-        </Box>
-      )}
-
       {isFocused && (
         <Box flexDirection="row" marginTop={1}>
           {actions.map((action, index) => (
@@ -977,6 +745,188 @@ function ReadmeViewer({
   );
 }
 
+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`),
+      });
+    }
+
+    // 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: 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,
@@ -993,9 +943,9 @@ function SettingsDetails({
 
       <Box flexDirection="column" marginTop={1}>
         <Text>
-          <Text color={colors.textDim}>AI Tool:       </Text>
+          <Text color={colors.textDim}>Platform:      </Text>
           <Text color={colors.text}>
-            {config.ai_tool === AITool.ClaudeCode ? 'Claude Code' : 'OpenCode'}
+            {config.platform === Platform.ClaudeCode ? 'Claude Code' : 'OpenCode'}
           </Text>
         </Text>
         <Text>
@@ -1302,13 +1252,11 @@ function SkillConfigScreen({ skill, onComplete, onCancel }: SkillConfigScreenPro
 function App() {
   const { exit } = useApp();
   const tabs: { id: Tab; label: string }[] = [
-    { id: 'skills', label: 'Skills' },
-    { id: 'commands', label: 'Commands' },
-    { id: 'agents', label: 'Agents' },
+    { id: 'tools', label: 'Tools' },
     { id: 'settings', label: 'Settings' },
   ];
 
-  const [activeTab, setActiveTab] = useState<Tab>('skills');
+  const [activeTab, setActiveTab] = useState<Tab>('tools');
   const [tabIndex, setTabIndex] = useState(0);
   const [view, setView] = useState<View>('welcome');
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -1318,6 +1266,7 @@ function App() {
   const [isEditingSettings, setIsEditingSettings] = useState(false);
   const [readmeContent, setReadmeContent] = useState<{ title: string; content: string } | null>(null);
   const [isUpdating, setIsUpdating] = useState(false);
+  const [previousView, setPreviousView] = useState<View>('detail'); // Track where to return from readme
 
   // Check for updates once on mount
   const updateInfo = useMemo(() => getUpdateInfo(), []);
@@ -1346,9 +1295,9 @@ function App() {
 
   const MAX_VISIBLE_ITEMS = 6;
 
+  const tools = getBundledTools();
+  // Keep skills for configure view (tools configure via their primary skill)
   const skills = getBundledSkills();
-  const commands = getCommandsFromSkills();
-  const agents = getBundledAgents();
 
   useInput((input, key) => {
     if (message) setMessage(null);
@@ -1385,11 +1334,7 @@ function App() {
         setSelectedAction(0);
       }
       if (key.downArrow) {
-        const maxIndex =
-          activeTab === 'skills' ? skills.length - 1
-          : activeTab === 'commands' ? commands.length - 1
-          : activeTab === 'agents' ? agents.length - 1
-          : 0;
+        const maxIndex = activeTab === 'tools' ? tools.length - 1 : 0;
         setSelectedIndex((prev) => {
           const newIndex = Math.min(maxIndex, prev + 1);
           // Scroll down if needed
@@ -1401,11 +1346,7 @@ function App() {
         setSelectedAction(0);
       }
       if (key.return) {
-        if (activeTab === 'skills' && skills.length > 0) {
-          setView('detail');
-        } else if (activeTab === 'commands' && commands.length > 0) {
-          setView('detail');
-        } else if (activeTab === 'agents' && agents.length > 0) {
+        if (activeTab === 'tools' && tools.length > 0) {
           setView('detail');
         } else if (activeTab === 'settings') {
           setIsEditingSettings(true);
@@ -1422,50 +1363,41 @@ function App() {
       }
       if (key.rightArrow) {
         let maxActions = 0;
-        if (activeTab === 'skills') {
-          const skill = skills[selectedIndex];
-          const installed = skill ? isSkillInstalled(skill.name) : false;
-          const hasUpdate = skill ? getSkillUpdateStatus(skill.name).hasUpdate : false;
-          // View, [Update], Configure, Uninstall or View, Install
+        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;
-        } else if (activeTab === 'agents') {
-          maxActions = 1; // View, Install/Uninstall
-        } else if (activeTab === 'commands') {
-          const command = commands[selectedIndex];
-          // If parent skill is installed, only View is available
-          const skillInstalled = command ? isSkillInstalled(command.skillName) : false;
-          maxActions = skillInstalled ? 0 : 1;
         }
         setSelectedAction((prev) => Math.min(maxActions, prev + 1));
       }
-      if (key.return && activeTab === 'skills') {
-        const skill = skills[selectedIndex];
-        if (skill) {
-          const installed = isSkillInstalled(skill.name);
-          const skillUpdateStatus = getSkillUpdateStatus(skill.name);
-          // Build actions array to match SkillDetails
-          const skillActions = installed
+      if (key.return && activeTab === 'tools') {
+        const tool = tools[selectedIndex];
+        if (tool) {
+          const installed = isToolInstalled(tool.name);
+          const toolUpdateStatus = getToolUpdateStatus(tool.name);
+          // Build actions array to match ToolDetails
+          const toolActions = installed
             ? [
-                { id: 'view' },
-                ...(skillUpdateStatus.hasUpdate ? [{ id: 'update' }] : []),
+                { id: 'explore' },
+                ...(toolUpdateStatus.hasUpdate ? [{ id: 'update' }] : []),
                 { id: 'configure' },
                 { id: 'uninstall' },
               ]
-            : [{ id: 'view' }, { id: 'install' }];
+            : [{ id: 'explore' }, { id: 'install' }];
 
-          const actionId = skillActions[selectedAction]?.id;
+          const actionId = toolActions[selectedAction]?.id;
 
-          if (actionId === 'view') {
-            const skillMdPath = join(getBundledSkillsDir(), skill.name, 'SKILL.md');
-            if (existsSync(skillMdPath)) {
-              const content = readFileSync(skillMdPath, 'utf-8');
-              setReadmeContent({ title: `${skill.name}/SKILL.md`, content });
-              setView('readme');
-            }
+          if (actionId === 'explore') {
+            // Open the tool explorer view
+            setView('explorer');
           } else if (actionId === 'update') {
-            const result = updateSkill(skill.name);
+            // Update the primary skill of the tool
+            const primarySkill = tool.includes.skills.find(s => s.required)?.name || tool.name;
+            const result = updateSkill(primarySkill);
             setMessage({
-              text: result.success ? `✓ ${result.message}` : `✗ ${result.message}`,
+              text: result.success ? `✓ Updated ${tool.name}` : `✗ ${result.message}`,
               type: result.success ? 'success' : 'error',
             });
             if (result.success) {
@@ -1474,9 +1406,11 @@ function App() {
           } else if (actionId === 'configure') {
             setView('configure');
           } else if (actionId === 'uninstall') {
-            const result = uninstallSkill(skill.name);
+            // Uninstall the primary skill of the tool
+            const primarySkill = tool.includes.skills.find(s => s.required)?.name || tool.name;
+            const result = uninstallSkill(primarySkill);
             setMessage({
-              text: result.success ? `✓ Uninstalled ${skill.name}` : `✗ ${result.message}`,
+              text: result.success ? `✓ Uninstalled ${tool.name}` : `✗ ${result.message}`,
               type: result.success ? 'success' : 'error',
             });
             if (result.success) {
@@ -1484,14 +1418,16 @@ function App() {
               setSelectedAction(0);
             }
           } else if (actionId === 'install') {
-            const result = installSkill(skill.name);
+            // Install the primary skill of the tool
+            const primarySkill = tool.includes.skills.find(s => s.required)?.name || tool.name;
+            const result = installSkill(primarySkill);
             setMessage({
-              text: result.success ? `✓ Installed ${skill.name}` : `✗ ${result.message}`,
+              text: result.success ? `✓ Installed ${tool.name}` : `✗ ${result.message}`,
               type: result.success ? 'success' : 'error',
             });
             if (result.success) {
-              // Check if skill has required config (options without defaults)
-              const configSchema = skill.config_schema || {};
+              // Check if tool has required config (options without defaults)
+              const configSchema = tool.config_schema || {};
               const hasRequiredConfig = Object.values(configSchema).some(
                 (option) => (option as ConfigOption).default === undefined
               );
@@ -1506,67 +1442,14 @@ function App() {
           }
         }
       }
-      if (key.return && activeTab === 'agents') {
-        const agent = agents[selectedIndex];
-        if (agent) {
-          const installed = isAgentInstalled(agent.name);
-          const bundledSkill = getAgentBundledSkill(agent.name);
-          if (selectedAction === 0) {
-            // View
-            const agentMdPath = findAgentSourcePath(agent.name);
-            if (agentMdPath) {
-              const content = readFileSync(agentMdPath, 'utf-8');
-              setReadmeContent({ title: `${agent.name}/AGENT.md`, content });
-              setView('readme');
-            }
-          } else if (!bundledSkill && installed && selectedAction === 1) {
-            // Uninstall (only for standalone agents)
-            const result = uninstallAgent(agent.name);
-            setMessage({
-              text: result.success ? `✓ Uninstalled ${agent.name}` : `✗ ${result.message}`,
-              type: result.success ? 'success' : 'error',
-            });
-            if (result.success) {
-              setView('menu');
-              setSelectedAction(0);
-            }
-          } else if (!bundledSkill && !installed && selectedAction === 1) {
-            // Install (only for standalone agents)
-            const result = installAgent(agent.name);
-            setMessage({
-              text: result.success ? `✓ ${result.message}` : `✗ ${result.message}`,
-              type: result.success ? 'success' : 'error',
-            });
-            if (result.success) {
-              setView('menu');
-              setSelectedAction(0);
-            }
-          }
-        }
-      }
-      if (key.return && activeTab === 'commands') {
-        const command = commands[selectedIndex];
-        if (command) {
-          // Command file: extract part after skill name (e.g., "comments check" → "check.md")
-          const cmdPart = command.name.startsWith(command.skillName + ' ')
-            ? command.name.slice(command.skillName.length + 1)
-            : command.name;
-          const commandMdPath = join(getBundledSkillsDir(), command.skillName, 'commands', `${cmdPart}.md`);
-
-          // Only View action available - commands install via skills
-          if (selectedAction === 0 && existsSync(commandMdPath)) {
-            const content = readFileSync(commandMdPath, 'utf-8');
-            setReadmeContent({ title: `/${command.name}`, content });
-            setView('readme');
-          }
-        }
-      }
     }
-  }, { isActive: view !== 'welcome' && view !== 'setup' && view !== 'configure' });
+  }, { isActive: view !== 'welcome' && view !== 'setup' && view !== 'configure' && view !== 'explorer' });
 
-  const selectedSkill = activeTab === 'skills' ? skills[selectedIndex] ?? null : null;
-  const selectedCommand = activeTab === 'commands' ? commands[selectedIndex] ?? null : null;
-  const selectedAgent = activeTab === 'agents' ? agents[selectedIndex] ?? null : null;
+  const selectedTool = activeTab === 'tools' ? tools[selectedIndex] ?? null : null;
+  // For configure view, we need the matching skill manifest
+  const selectedSkillForConfig = selectedTool
+    ? skills.find(s => s.name === (selectedTool.includes.skills.find(sk => sk.required)?.name || selectedTool.name))
+    : null;
 
   if (view === 'welcome') {
     return (
@@ -1610,18 +1493,34 @@ function App() {
         content={readmeContent.content}
         onClose={() => {
           setReadmeContent(null);
+          setView(previousView);
+        }}
+      />
+    );
+  }
+
+  if (view === 'explorer' && selectedTool) {
+    return (
+      <ToolExplorer
+        tool={selectedTool}
+        onViewSource={(title, content) => {
+          setPreviousView('explorer');
+          setReadmeContent({ title, content });
+          setView('readme');
+        }}
+        onClose={() => {
           setView('detail');
         }}
       />
     );
   }
 
-  if (view === 'configure' && selectedSkill) {
+  if (view === 'configure' && selectedSkillForConfig) {
     return (
       <SkillConfigScreen
-        skill={selectedSkill}
+        skill={selectedSkillForConfig}
         onComplete={() => {
-          setMessage({ text: `✓ Configuration saved for ${selectedSkill.name}`, type: 'success' });
+          setMessage({ text: `✓ Configuration saved for ${selectedTool?.name || selectedSkillForConfig.name}`, type: 'success' });
           setView('detail');
         }}
         onCancel={() => {
@@ -1652,6 +1551,11 @@ function App() {
             <Text color={colors.textDim}> v{getVersion()}</Text>
           </Text>
         </Box>
+        <Box paddingX={1}>
+          <Text color={colors.textDim}>
+            {loadConfig().platform === Platform.ClaudeCode ? 'Claude Code' : 'OpenCode'}
+          </Text>
+        </Box>
 
         {/* Tabs */}
         <Box paddingX={1} marginTop={1}>
@@ -1660,71 +1564,29 @@ function App() {
 
         {/* List */}
         <Box flexDirection="column" marginTop={1}>
-          {activeTab === 'skills' && (
+          {activeTab === 'tools' && (
             <>
               {scrollOffset > 0 && (
                 <Box paddingX={1}>
                   <Text color={colors.textDim}>↑ {scrollOffset} more</Text>
                 </Box>
               )}
-              {skills.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS).map((skill, index) => (
-                <SkillItem
-                  key={skill.name}
-                  skill={skill}
+              {tools.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS).map((tool, index) => (
+                <ToolItem
+                  key={tool.name}
+                  tool={tool}
                   isSelected={scrollOffset + index === selectedIndex}
                   isActive={scrollOffset + index === selectedIndex && view === 'detail'}
                 />
               ))}
-              {scrollOffset + MAX_VISIBLE_ITEMS < skills.length && (
+              {scrollOffset + MAX_VISIBLE_ITEMS < tools.length && (
                 <Box paddingX={1}>
-                  <Text color={colors.textDim}>↓ {skills.length - scrollOffset - MAX_VISIBLE_ITEMS} more</Text>
+                  <Text color={colors.textDim}>↓ {tools.length - scrollOffset - MAX_VISIBLE_ITEMS} more</Text>
                 </Box>
               )}
-              {skills.length > MAX_VISIBLE_ITEMS && (
+              {tools.length > MAX_VISIBLE_ITEMS && (
                 <Box paddingX={1} marginTop={1}>
-                  <Text color={colors.textDim}>{skills.length} skills total</Text>
-                </Box>
-              )}
-            </>
-          )}
-
-          {activeTab === 'commands' && (
-            <>
-              {scrollOffset > 0 && (
-                <Box paddingX={1}>
-                  <Text color={colors.textDim}>↑ {scrollOffset} more</Text>
-                </Box>
-              )}
-              {commands.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS).map((cmd, index) => (
-                <CommandItem key={cmd.name} command={cmd} isSelected={scrollOffset + index === selectedIndex} />
-              ))}
-              {scrollOffset + MAX_VISIBLE_ITEMS < commands.length && (
-                <Box paddingX={1}>
-                  <Text color={colors.textDim}>↓ {commands.length - scrollOffset - MAX_VISIBLE_ITEMS} more</Text>
-                </Box>
-              )}
-            </>
-          )}
-
-          {activeTab === 'agents' && (
-            <>
-              {scrollOffset > 0 && (
-                <Box paddingX={1}>
-                  <Text color={colors.textDim}>↑ {scrollOffset} more</Text>
-                </Box>
-              )}
-              {agents.length === 0 ? (
-                <Box paddingX={1}>
-                  <Text color={colors.textDim}>No agents available</Text>
-                </Box>
-              ) : (
-                agents.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS).map((agent, index) => (
-                  <AgentItem key={agent.name} agent={agent} isSelected={scrollOffset + index === selectedIndex} />
-                ))
-              )}
-              {scrollOffset + MAX_VISIBLE_ITEMS < agents.length && (
-                <Box paddingX={1}>
-                  <Text color={colors.textDim}>↓ {agents.length - scrollOffset - MAX_VISIBLE_ITEMS} more</Text>
+                  <Text color={colors.textDim}>{tools.length} tools total</Text>
                 </Box>
               )}
             </>
@@ -1753,21 +1615,13 @@ function App() {
       </Box>
 
       {/* Right column */}
-      {activeTab === 'skills' && (
-        <SkillDetails skill={selectedSkill} isFocused={view === 'detail'} selectedAction={selectedAction} />
-      )}
-
-      {activeTab === 'commands' && (
-        <CommandDetails command={selectedCommand} isFocused={view === 'detail'} selectedAction={selectedAction} />
+      {activeTab === 'tools' && (
+        <ToolDetails tool={selectedTool} isFocused={view === 'detail'} selectedAction={selectedAction} />
       )}
 
       {activeTab === 'settings' && (
         <SettingsDetails onEditSettings={() => setView('setup')} isFocused={false} />
       )}
-
-      {activeTab === 'agents' && (
-        <AgentDetails agent={selectedAgent} isFocused={view === 'detail'} selectedAction={selectedAction} />
-      )}
     </Box>
   );
 }