@orderful/droid 0.10.5 → 0.11.0

package/dist/commands/tui.js

@@ -3,13 +3,13 @@ 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 } from '../lib/agents.js';
+import { getBundledSkills, installSkill, uninstallSkill, updateSkill, } 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 { configureAIToolPermissions } from './setup.js';
-import { AITool, BuiltInOutput, ConfigOptionType } from '../lib/types.js';
+import { configurePlatformPermissions } from './setup.js';
+import { Platform, BuiltInOutput, ConfigOptionType } from '../lib/types.js';
 import { getVersion, getUpdateInfo, runUpdate } from '../lib/version.js';
 import { getRandomQuote } from '../lib/quotes.js';
 const colors = {
@@ -21,87 +21,61 @@ const colors = {
     textDim: '#6a6a6a',
     success: '#4ade80',
     error: '#f87171',
+    // Component type badges
+    skill: '#ec4899', // pink/magenta
+    command: '#22d3ee', // cyan
+    agent: '#fbbf24', // yellow/amber
 };
-function getCommandsFromSkills() {
-    const skillsDir = getBundledSkillsDir();
-    const commands = [];
-    if (!existsSync(skillsDir))
-        return commands;
-    const skillDirs = readdirSync(skillsDir, { withFileTypes: true })
-        .filter((d) => d.isDirectory())
-        .map((d) => d.name);
-    for (const skillName of skillDirs) {
-        const commandsDir = join(skillsDir, skillName, 'commands');
-        if (!existsSync(commandsDir))
-            continue;
-        const cmdFiles = readdirSync(commandsDir).filter((f) => f.endsWith('.md'));
-        for (const file of cmdFiles) {
-            const content = readFileSync(join(commandsDir, file), 'utf-8');
-            const lines = content.split('\n');
-            // 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;
-                    }
-                }
-            }
-            // Find first H1 header
-            let headerMatch = 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 = [];
-            let inUsage = false;
-            for (const line of lines) {
-                if (line.startsWith('## Usage'))
-                    inUsage = true;
-                else if (line.startsWith('## ') && inUsage)
-                    break;
-                else if (inUsage && line.startsWith('/'))
-                    usage.push(line.trim());
-            }
-            commands.push({
-                name: headerMatch[1],
-                description: headerMatch[2] || '',
-                skillName,
-                usage,
-            });
-        }
+function Badge({ type, label, isSelected = false, dimmed = false, }) {
+    const color = colors[type];
+    const displayLabel = label || type.charAt(0).toUpperCase() + type.slice(1);
+    if (dimmed) {
+        return (_jsx(Text, { color: colors.textDim, children: displayLabel }));
+    }
+    return (_jsx(Text, { backgroundColor: isSelected ? color : undefined, color: isSelected ? '#000000' : color, bold: isSelected, children: isSelected ? ` ${displayLabel} ` : displayLabel }));
+}
+function ComponentBadges({ tool, compact = false }) {
+    const hasSkills = tool.includes.skills.length > 0;
+    const hasCommands = tool.includes.commands.length > 0;
+    const hasAgents = tool.includes.agents.length > 0;
+    if (compact) {
+        // Show colored squares for list view (single char with spacing)
+        const parts = [];
+        if (hasSkills)
+            parts.push('skill');
+        if (hasCommands)
+            parts.push('command');
+        if (hasAgents)
+            parts.push('agent');
+        return (_jsx(Box, { flexDirection: "row", children: parts.map((type, i) => (_jsxs(Text, { children: [_jsx(Text, { backgroundColor: colors[type], children: " " }), i < parts.length - 1 && ' '] }, type))) }));
     }
-    return commands;
+    return (_jsxs(Box, { flexDirection: "row", children: [hasSkills && (_jsx(Box, { marginRight: 1, children: _jsx(Text, { backgroundColor: colors.skill, color: "#000000", bold: true, children: ` ${tool.includes.skills.length} skill${tool.includes.skills.length > 1 ? 's' : ''} ` }) })), hasCommands && (_jsx(Box, { marginRight: 1, children: _jsx(Text, { backgroundColor: colors.command, color: "#000000", bold: true, children: ` ${tool.includes.commands.length} cmd${tool.includes.commands.length > 1 ? 's' : ''} ` }) })), hasAgents && (_jsx(Box, { marginRight: 1, children: _jsx(Text, { backgroundColor: colors.agent, color: "#000000", bold: true, children: ` ${tool.includes.agents.length} agent${tool.includes.agents.length > 1 ? 's' : ''} ` }) }))] }));
 }
-function detectInstalledAITools() {
+function detectInstalledPlatforms() {
     const installed = new Set();
     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() {
-    const installed = detectInstalledAITools();
-    if (installed.has(AITool.ClaudeCode))
-        return AITool.ClaudeCode;
-    if (installed.has(AITool.OpenCode))
-        return AITool.OpenCode;
-    return AITool.ClaudeCode;
+function getDefaultPlatform() {
+    const installed = detectInstalledPlatforms();
+    if (installed.has(Platform.ClaudeCode))
+        return Platform.ClaudeCode;
+    if (installed.has(Platform.OpenCode))
+        return Platform.OpenCode;
+    return Platform.ClaudeCode;
 }
 function getOutputOptions() {
     const options = [
@@ -116,50 +90,6 @@ function getOutputOptions() {
     }
     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) {
-    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) {
-    // 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;
-}
 function WelcomeScreen({ onContinue, onUpdate, onExit, updateInfo, isUpdating }) {
     const [selectedButton, setSelectedButton] = useState(0);
     const welcomeQuote = useMemo(() => getRandomQuote(), []);
@@ -195,18 +125,18 @@ function WelcomeScreen({ onContinue, onUpdate, onExit, updateInfo, isUpdating })
     return (_jsx(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", height: 18, children: _jsxs(Box, { flexDirection: "column", alignItems: "center", borderStyle: "single", borderColor: hasUpdate ? '#eab308' : colors.border, paddingX: 4, paddingY: 1, children: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "\u2554\u2550\u2550\u2550\u2550\u2550\u2557    " }), _jsx(Text, { color: colors.text, children: "droid" }), _jsxs(Text, { color: colors.textDim, children: [" v", updateInfo.currentVersion] })] }), _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "\u2551 " }), _jsx(Text, { color: hasUpdate ? '#eab308' : colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: " " }), _jsx(Text, { color: hasUpdate ? '#eab308' : colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: " \u2551    " }), _jsx(Text, { color: colors.textMuted, children: "Droid, teaching your AI new tricks" })] }), _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "\u255A\u2550\u2566\u2550\u2566\u2550\u255D    " }), _jsx(Text, { color: colors.textDim, children: "github.com/Orderful/droid" })] })] }), hasUpdate ? (_jsxs(_Fragment, { children: [_jsxs(Box, { marginTop: 2, marginBottom: 1, flexDirection: "column", alignItems: "center", children: [_jsx(Text, { color: "#eab308", italic: true, children: "\"The odds of functioning optimally without this" }), _jsx(Text, { color: "#eab308", italic: true, children: "update are approximately 3,720 to 1.\"" })] }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: colors.textMuted, children: ["v", updateInfo.currentVersion, " \u2192 v", updateInfo.latestVersion] }) }), isUpdating ? (_jsx(Text, { color: "#eab308", children: "Updating..." })) : (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { backgroundColor: selectedButton === 0 ? '#eab308' : colors.bgSelected, color: selectedButton === 0 ? '#000000' : colors.textMuted, bold: selectedButton === 0, children: [' ', "Update", ' '] }), _jsx(Text, { children: " " }), _jsxs(Text, { backgroundColor: selectedButton === 1 ? colors.bgSelected : undefined, color: selectedButton === 1 ? colors.text : colors.textMuted, bold: selectedButton === 1, children: [' ', "Skip for now", ' '] })] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "\u2190\u2192 select \u00B7 enter" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Box, { marginTop: 2, marginBottom: 1, children: _jsx(Text, { backgroundColor: colors.primary, color: "#ffffff", bold: true, children: ` ${welcomeQuote} ` }) }), _jsx(Text, { color: colors.textDim, children: "press enter" })] }))] }) }));
 }
 function SetupScreen({ onComplete, onSkip, initialConfig }) {
-    const [step, setStep] = useState('ai_tool');
-    const [aiTool, setAITool] = useState(initialConfig?.ai_tool || getDefaultAITool());
+    const [step, setStep] = useState('platform');
+    const [platform, setPlatform] = useState(initialConfig?.platform || getDefaultPlatform());
     const [userMention, setUserMention] = useState(initialConfig?.user_mention || '@user');
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [error, setError] = useState(null);
     // Cache detection results once on mount (avoids re-running execSync on every render)
-    const 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 = ['ai_tool', 'user_mention', 'confirm'];
+    const steps = ['platform', 'user_mention', 'confirm'];
     const stepIndex = steps.indexOf(step);
     const totalSteps = steps.length - 1; // Don't count confirm as a step
     const handleUserMentionSubmit = () => {
@@ -219,14 +149,14 @@ function SetupScreen({ onComplete, onSkip, initialConfig }) {
     // 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' });
     // 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') {
@@ -234,63 +164,60 @@ function SetupScreen({ onComplete, onSkip, initialConfig }) {
             }
             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));
+                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 = {
-                    ...loadConfig(),
-                    ai_tool: aiTool,
+                    ...existingConfig,
+                    platform: platform,
                     user_mention: userMention,
                     output_preference: BuiltInOutput.Terminal, // Default to terminal
                 };
                 saveConfig(config);
-                configureAIToolPermissions(aiTool);
+                configurePlatformPermissions(platform);
                 onComplete();
             }
         }
     }, { isActive: step !== 'user_mention' });
     const renderHeader = () => (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "[" }), _jsx(Text, { color: colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: " " }), _jsx(Text, { color: colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: "] " }), _jsx(Text, { color: colors.text, bold: true, children: "droid setup" }), _jsxs(Text, { color: colors.textDim, children: [" \u00B7 Step ", Math.min(stepIndex + 1, totalSteps), " of ", totalSteps] })] }) }));
-    if (step === 'ai_tool') {
-        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [renderHeader(), _jsx(Text, { color: colors.text, children: "Which AI tool are you using?" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: aiToolOptions.map((option, index) => (_jsxs(Text, { children: [_jsxs(Text, { color: colors.textDim, children: [index === selectedIndex ? '>' : ' ', " "] }), _jsx(Text, { color: index === selectedIndex ? colors.text : colors.textMuted, children: option.label }), installedTools.has(option.value) && _jsx(Text, { color: colors.success, children: " (detected)" })] }, option.value))) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "\u2191\u2193 select \u00B7 enter next \u00B7 esc skip" }) })] }));
+    if (step === 'platform') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [renderHeader(), _jsx(Text, { color: colors.text, children: "Which platform are you using?" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: platformOptions.map((option, index) => (_jsxs(Text, { children: [_jsxs(Text, { color: colors.textDim, children: [index === selectedIndex ? '>' : ' ', " "] }), _jsx(Text, { color: index === selectedIndex ? colors.text : colors.textMuted, children: option.label }), installedPlatforms.has(option.value) && _jsx(Text, { color: colors.success, children: " (detected)" })] }, option.value))) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "\u2191\u2193 select \u00B7 enter next \u00B7 esc skip" }) })] }));
     }
     if (step === 'user_mention') {
         return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [renderHeader(), _jsx(Text, { color: colors.text, children: "What @mention should be used for you?" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: colors.textDim, children: '> ' }), _jsx(TextInput, { value: userMention, onChange: setUserMention, onSubmit: handleUserMentionSubmit, placeholder: "@user" })] }), error && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.error, children: error }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "enter next \u00B7 esc back" }) })] }));
     }
     // Confirm step
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [renderHeader(), _jsx(Text, { color: colors.text, bold: true, children: "Review your settings" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "AI Tool:       " }), _jsx(Text, { color: colors.text, children: aiTool === AITool.ClaudeCode ? 'Claude Code' : 'OpenCode' })] }), _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "Your @mention: " }), _jsx(Text, { color: colors.text, children: userMention })] })] }), _jsx(Box, { marginTop: 2, children: _jsxs(Text, { backgroundColor: colors.primary, color: "#ffffff", bold: true, children: [' ', "Save", ' '] }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "enter save \u00B7 esc back" }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [renderHeader(), _jsx(Text, { color: colors.text, bold: true, children: "Review your settings" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "Platform:      " }), _jsx(Text, { color: colors.text, children: platform === Platform.ClaudeCode ? 'Claude Code' : 'OpenCode' })] }), _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "Your @mention: " }), _jsx(Text, { color: colors.text, children: userMention })] })] }), _jsx(Box, { marginTop: 2, children: _jsxs(Text, { backgroundColor: colors.primary, color: "#ffffff", bold: true, children: [' ', "Save", ' '] }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "enter save \u00B7 esc back" }) })] }));
 }
 function TabBar({ tabs, activeTab }) {
     return (_jsx(Box, { flexDirection: "row", flexWrap: "wrap", children: tabs.map((tab) => (_jsxs(Text, { backgroundColor: tab.id === activeTab ? colors.primary : undefined, color: tab.id === activeTab ? '#ffffff' : colors.textMuted, bold: tab.id === activeTab, wrap: "truncate", children: [' ', tab.label, ' '] }, tab.id))) }));
 }
-function SkillItem({ skill, isSelected, isActive, }) {
-    const installed = isSkillInstalled(skill.name);
-    const installedInfo = getInstalledSkill(skill.name);
-    const updateStatus = getSkillUpdateStatus(skill.name);
-    return (_jsx(Box, { paddingX: 1, backgroundColor: isActive ? colors.bgSelected : undefined, children: _jsxs(Text, { children: [_jsxs(Text, { color: colors.textDim, children: [isSelected ? '>' : ' ', " "] }), _jsx(Text, { color: isSelected || isActive ? colors.text : colors.textMuted, children: skill.name }), installed && installedInfo && _jsxs(Text, { color: colors.textDim, children: [" v", installedInfo.version] }), installed && _jsx(Text, { color: colors.success, children: " *" }), updateStatus.hasUpdate && _jsx(Text, { color: colors.primary, children: " \u2191" })] }) }));
+function ToolItem({ tool, isSelected, isActive, }) {
+    const installed = isToolInstalled(tool.name);
+    const installedVersion = getInstalledToolVersion(tool.name);
+    const updateStatus = getToolUpdateStatus(tool.name);
+    return (_jsx(Box, { paddingX: 1, backgroundColor: isActive ? colors.bgSelected : undefined, children: _jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { color: colors.textDim, children: [isSelected ? '>' : ' ', " "] }), _jsx(Text, { color: isSelected || isActive ? colors.text : colors.textMuted, children: tool.name }), installed && installedVersion && _jsxs(Text, { color: colors.textDim, children: [" v", installedVersion] }), installed && _jsx(Text, { color: colors.success, children: " \u2713" }), updateStatus.hasUpdate && _jsx(Text, { color: colors.primary, children: " \u2191" }), _jsx(Text, { children: " " }), tool.includes.skills.length > 0 && _jsx(Text, { color: colors.skill, children: "\u25CF " }), tool.includes.commands.length > 0 && _jsx(Text, { color: colors.command, children: "\u25CF " }), tool.includes.agents.length > 0 && _jsx(Text, { color: colors.agent, children: "\u25CF" })] }) }));
 }
-function CommandItem({ command, isSelected, }) {
-    const installed = isSkillInstalled(command.skillName);
-    return (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { children: [_jsxs(Text, { color: colors.textDim, children: [isSelected ? '>' : ' ', " "] }), _jsxs(Text, { color: isSelected ? colors.text : colors.textMuted, children: ["/", command.name] }), installed && _jsx(Text, { color: colors.success, children: " *" })] }) }));
-}
-function SkillDetails({ skill, isFocused, selectedAction, }) {
-    if (!skill) {
-        return (_jsx(Box, { paddingLeft: 2, flexGrow: 1, children: _jsx(Text, { color: colors.textDim, children: "Select a skill" }) }));
+function ToolDetails({ tool, isFocused, selectedAction, }) {
+    if (!tool) {
+        return (_jsx(Box, { paddingLeft: 2, flexGrow: 1, children: _jsx(Text, { color: colors.textDim, children: "Select a tool" }) }));
     }
-    const installed = 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' }]
                 : []),
@@ -298,59 +225,10 @@ function SkillDetails({ skill, isFocused, selectedAction, }) {
             { 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 (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, flexGrow: 1, children: [_jsx(Text, { color: colors.text, bold: true, children: skill.name }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: [skill.version, skill.status && ` · ${skill.status}`, installed && _jsx(Text, { color: colors.success, children: " \u00B7 installed" }), updateStatus.hasUpdate && (_jsxs(Text, { color: colors.primary, children: [" \u00B7 update available (", updateStatus.installedVersion, " \u2192 ", updateStatus.bundledVersion, ")"] }))] }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textMuted, children: skill.description }) }), skillCommands.length > 0 && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: ["Commands: ", skillCommands.map((c) => `/${c.name}`).join(', ')] }) })), skill.examples && skill.examples.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: colors.textDim, children: ["Examples", skill.examples.length > 2 ? ` (showing 2 of ${skill.examples.length})` : '', ":"] }), skill.examples.slice(0, 2).map((example, i) => (_jsxs(Box, { flexDirection: "column", marginTop: i > 0 ? 1 : 0, children: [_jsxs(Text, { color: colors.textMuted, children: ["  ", example.title] }), example.code
-                                .trim()
-                                .split('\n')
-                                .slice(0, 3)
-                                .map((line, j) => (_jsxs(Text, { color: colors.textDim, children: ['    ', line] }, j)))] }, i)))] })), isFocused && (_jsx(Box, { flexDirection: "row", marginTop: 1, children: actions.map((action, index) => (_jsxs(Text, { backgroundColor: selectedAction === index
-                        ? action.variant === 'danger'
-                            ? colors.error
-                            : colors.primary
-                        : colors.bgSelected, color: selectedAction === index ? '#ffffff' : colors.textMuted, bold: selectedAction === index, children: [' ', action.label, ' '] }, action.id))) }))] }));
-}
-function CommandDetails({ command, isFocused, selectedAction, }) {
-    if (!command) {
-        return (_jsx(Box, { paddingLeft: 2, flexGrow: 1, children: _jsx(Text, { color: colors.textDim, children: "Select a command" }) }));
-    }
-    const skillInstalled = isSkillInstalled(command.skillName);
-    // Commands belong to skills - only show View, install via skill
-    const actions = [{ id: 'view', label: 'View', variant: 'default' }];
-    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, flexGrow: 1, children: [_jsxs(Text, { color: colors.text, bold: true, children: ["/", command.name] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: ["from ", command.skillName, skillInstalled && _jsx(Text, { color: colors.success, children: " \u00B7 installed" })] }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textMuted, children: command.description }) }), command.usage.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: colors.textDim, children: "Usage:" }), command.usage.map((u, i) => (_jsxs(Text, { color: colors.textMuted, children: ['  ', u] }, i)))] })), isFocused && (_jsx(Box, { flexDirection: "row", marginTop: 1, children: actions.map((action, index) => (_jsxs(Text, { backgroundColor: selectedAction === index
-                        ? action.variant === 'danger'
-                            ? colors.error
-                            : colors.primary
-                        : colors.bgSelected, color: selectedAction === index ? '#ffffff' : colors.textMuted, bold: selectedAction === index, children: [' ', action.label, ' '] }, action.id))) }))] }));
-}
-function AgentItem({ agent, isSelected }) {
-    const statusDisplay = agent.status === 'alpha' ? '[alpha]' : agent.status === 'beta' ? '[beta]' : '';
-    return (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { children: [_jsxs(Text, { color: colors.textDim, children: [isSelected ? '>' : ' ', " "] }), _jsx(Text, { color: isSelected ? colors.text : colors.textMuted, children: agent.name }), _jsxs(Text, { color: colors.textDim, children: [" v", agent.version] }), statusDisplay && _jsxs(Text, { color: colors.textDim, children: [" ", statusDisplay] })] }) }));
-}
-function AgentDetails({ agent, isFocused, selectedAction, }) {
-    if (!agent) {
-        return (_jsx(Box, { paddingLeft: 2, flexGrow: 1, children: _jsx(Text, { color: colors.textDim, children: "Select an agent" }) }));
-    }
-    const installed = isAgentInstalled(agent.name);
-    const 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 (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, flexGrow: 1, children: [_jsx(Text, { color: colors.text, bold: true, children: agent.name }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: ["v", agent.version, statusDisplay && _jsxs(Text, { children: [" \u00B7 ", statusDisplay] }), ' · ', modeDisplay, bundledSkill && _jsxs(Text, { color: colors.textMuted, children: [" \u00B7 from ", bundledSkill] }), skillInstalled && _jsx(Text, { color: colors.success, children: " \u00B7 installed" }), !bundledSkill && installed && _jsx(Text, { color: colors.success, children: " \u00B7 installed" })] }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textMuted, children: agent.description }) }), agent.tools && agent.tools.length > 0 && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: ["Tools: ", agent.tools.join(', ')] }) })), agent.triggers && agent.triggers.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: colors.textDim, children: "Triggers:" }), agent.triggers.slice(0, 3).map((trigger, i) => (_jsxs(Text, { color: colors.textMuted, children: ['  ', "\"", trigger, "\""] }, i)))] })), isFocused && (_jsx(Box, { flexDirection: "row", marginTop: 1, children: actions.map((action, index) => (_jsxs(Text, { backgroundColor: selectedAction === index
+    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, flexGrow: 1, children: [_jsx(Text, { color: colors.text, bold: true, children: tool.name }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: [tool.version, tool.status && ` · ${tool.status}`, installed && _jsx(Text, { color: colors.success, children: " \u00B7 installed" }), updateStatus.hasUpdate && (_jsxs(Text, { color: colors.primary, children: [" \u00B7 update (", installedVersion, " \u2192 ", updateStatus.bundledVersion, ")"] }))] }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textMuted, children: tool.description }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: colors.textDim, children: "Includes:" }), _jsx(Box, { marginTop: 1, children: _jsx(ComponentBadges, { tool: tool }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, marginLeft: 1, children: [tool.includes.skills.length > 0 && (_jsxs(Text, { children: [_jsx(Text, { color: colors.skill, children: "Skills: " }), _jsx(Text, { color: colors.textMuted, children: tool.includes.skills.map(s => s.name).join(', ') })] })), tool.includes.commands.length > 0 && (_jsxs(Text, { children: [_jsx(Text, { color: colors.command, children: "Commands: " }), _jsx(Text, { color: colors.textMuted, children: tool.includes.commands.map(c => `/${c}`).join(', ') })] })), tool.includes.agents.length > 0 && (_jsxs(Text, { children: [_jsx(Text, { color: colors.agent, children: "Agents: " }), _jsx(Text, { color: colors.textMuted, children: tool.includes.agents.join(', ') })] }))] })] }), isFocused && (_jsx(Box, { flexDirection: "row", marginTop: 1, children: actions.map((action, index) => (_jsxs(Text, { backgroundColor: selectedAction === index
                         ? action.variant === 'danger'
                             ? colors.error
                             : colors.primary
@@ -444,10 +322,88 @@ function ReadmeViewer({ title, content, onClose, }) {
     const visibleLines = lines.slice(scrollOffset, scrollOffset + actualContentLines);
     return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: colors.text, bold: true, children: title }), _jsxs(Text, { color: colors.textDim, children: [" \u00B7 ", lines.length, " lines"] })] }), _jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: colors.border, paddingX: 1, children: [showTopIndicator && (_jsxs(Text, { color: colors.textDim, children: ["\u2191 ", scrollOffset, " more lines"] })), visibleLines.map((line, i) => (_jsx(MarkdownLine, { line: line, inCodeBlock: lineStates[scrollOffset + i] }, scrollOffset + i))), showBottomIndicator && (_jsxs(Text, { color: colors.textDim, children: ["\u2193 ", lines.length - scrollOffset - actualContentLines, " more lines"] }))] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "\u2191\u2193 scroll \u00B7 space/pgdn page \u00B7 esc back" }) })] }));
 }
+function ToolExplorer({ tool, onViewSource, onClose }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    // Build list of all explorable items
+    const items = useMemo(() => {
+        const result = [];
+        const toolDir = getBundledToolsDir();
+        // Add skills
+        for (const skill of tool.includes.skills) {
+            result.push({
+                type: 'skill',
+                name: skill.name,
+                path: join(toolDir, tool.name, 'skills', skill.name, 'SKILL.md'),
+            });
+        }
+        // Add commands
+        for (const cmd of tool.includes.commands) {
+            result.push({
+                type: 'command',
+                name: `/${cmd}`,
+                path: join(toolDir, tool.name, 'commands', `${cmd}.md`),
+            });
+        }
+        // Add agents
+        for (const agent of tool.includes.agents) {
+            result.push({
+                type: 'agent',
+                name: agent,
+                path: join(toolDir, tool.name, 'agents', agent, 'AGENT.md'),
+            });
+        }
+        return result;
+    }, [tool]);
+    useInput((input, key) => {
+        if (key.escape) {
+            onClose();
+            return;
+        }
+        if (key.leftArrow || key.upArrow) {
+            setSelectedIndex((prev) => Math.max(0, prev - 1));
+        }
+        if (key.rightArrow || key.downArrow) {
+            setSelectedIndex((prev) => Math.min(items.length - 1, prev + 1));
+        }
+        if (key.return && items.length > 0) {
+            const item = items[selectedIndex];
+            if (existsSync(item.path)) {
+                const content = readFileSync(item.path, 'utf-8');
+                onViewSource(`${tool.name} / ${item.name}`, content);
+            }
+            else {
+                // Try YAML fallback for skills/agents
+                const yamlPath = item.path.replace('.md', '.yaml');
+                if (existsSync(yamlPath)) {
+                    const content = readFileSync(yamlPath, 'utf-8');
+                    onViewSource(`${tool.name} / ${item.name}`, content);
+                }
+            }
+        }
+    });
+    // Group items by type for display
+    const skillItems = items.filter(i => i.type === 'skill');
+    const commandItems = items.filter(i => i.type === 'command');
+    const agentItems = items.filter(i => i.type === 'agent');
+    const getItemIndex = (item) => items.indexOf(item);
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "[" }), _jsx(Text, { color: colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: " " }), _jsx(Text, { color: colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: "] " }), _jsx(Text, { color: colors.text, bold: true, children: tool.name })] }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: colors.textMuted, children: tool.description }) }), skillItems.length > 0 && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: colors.skill, bold: true, children: "Skills" }), _jsx(Box, { flexDirection: "row", flexWrap: "wrap", marginTop: 1, children: skillItems.map((item) => {
+                            const idx = getItemIndex(item);
+                            const isSelected = selectedIndex === idx;
+                            return (_jsx(Box, { marginRight: 1, marginBottom: 1, children: _jsx(Text, { backgroundColor: isSelected ? colors.skill : colors.bgSelected, color: isSelected ? '#000000' : colors.skill, bold: isSelected, children: ` ${item.name} ` }) }, item.name));
+                        }) })] })), commandItems.length > 0 && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: colors.command, bold: true, children: "Commands" }), _jsx(Box, { flexDirection: "row", flexWrap: "wrap", marginTop: 1, children: commandItems.map((item) => {
+                            const idx = getItemIndex(item);
+                            const isSelected = selectedIndex === idx;
+                            return (_jsx(Box, { marginRight: 1, marginBottom: 1, children: _jsx(Text, { backgroundColor: isSelected ? colors.command : colors.bgSelected, color: isSelected ? '#000000' : colors.command, bold: isSelected, children: ` ${item.name} ` }) }, item.name));
+                        }) })] })), agentItems.length > 0 && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: colors.agent, bold: true, children: "Agents" }), _jsx(Box, { flexDirection: "row", flexWrap: "wrap", marginTop: 1, children: agentItems.map((item) => {
+                            const idx = getItemIndex(item);
+                            const isSelected = selectedIndex === idx;
+                            return (_jsx(Box, { marginRight: 1, marginBottom: 1, children: _jsx(Text, { backgroundColor: isSelected ? colors.agent : colors.bgSelected, color: isSelected ? '#000000' : colors.agent, bold: isSelected, children: ` ${item.name} ` }) }, item.name));
+                        }) })] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "\u2190\u2192 navigate \u00B7 enter view source \u00B7 esc back" }) })] }));
+}
 function SettingsDetails({ onEditSettings, isFocused, }) {
     const config = loadConfig();
     const outputOptions = getOutputOptions();
-    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, flexGrow: 1, children: [_jsx(Text, { color: colors.text, bold: true, children: "Settings" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "AI Tool:       " }), _jsx(Text, { color: colors.text, children: config.ai_tool === AITool.ClaudeCode ? 'Claude Code' : 'OpenCode' })] }), _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "Your @mention: " }), _jsx(Text, { color: colors.text, children: config.user_mention })] })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "Config: ~/.droid/config.yaml" }) }), isFocused && (_jsx(Box, { marginTop: 2, children: _jsxs(Text, { backgroundColor: colors.primary, color: "#ffffff", bold: true, children: [' ', "Edit Settings", ' '] }) })), !isFocused && (_jsx(Box, { marginTop: 2, children: _jsx(Text, { color: colors.textDim, children: "press enter to edit" }) }))] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, flexGrow: 1, children: [_jsx(Text, { color: colors.text, bold: true, children: "Settings" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "Platform:      " }), _jsx(Text, { color: colors.text, children: config.platform === Platform.ClaudeCode ? 'Claude Code' : 'OpenCode' })] }), _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "Your @mention: " }), _jsx(Text, { color: colors.text, children: config.user_mention })] })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "Config: ~/.droid/config.yaml" }) }), isFocused && (_jsx(Box, { marginTop: 2, children: _jsxs(Text, { backgroundColor: colors.primary, color: "#ffffff", bold: true, children: [' ', "Edit Settings", ' '] }) })), !isFocused && (_jsx(Box, { marginTop: 2, children: _jsx(Text, { color: colors.textDim, children: "press enter to edit" }) }))] }));
 }
 const MAX_VISIBLE_CONFIG_ITEMS = 4; // Each config item takes ~3 lines
 function SkillConfigScreen({ skill, onComplete, onCancel }) {
@@ -593,12 +549,10 @@ function SkillConfigScreen({ skill, onComplete, onCancel }) {
 function App() {
     const { exit } = useApp();
     const tabs = [
-        { id: 'skills', label: 'Skills' },
-        { id: 'commands', label: 'Commands' },
-        { id: 'agents', label: 'Agents' },
+        { id: 'tools', label: 'Tools' },
         { id: 'settings', label: 'Settings' },
     ];
-    const [activeTab, setActiveTab] = useState('skills');
+    const [activeTab, setActiveTab] = useState('tools');
     const [tabIndex, setTabIndex] = useState(0);
     const [view, setView] = useState('welcome');
     const [selectedIndex, setSelectedIndex] = useState(0);
@@ -608,6 +562,7 @@ function App() {
     const [isEditingSettings, setIsEditingSettings] = useState(false);
     const [readmeContent, setReadmeContent] = useState(null);
     const [isUpdating, setIsUpdating] = useState(false);
+    const [previousView, setPreviousView] = useState('detail'); // Track where to return from readme
     // Check for updates once on mount
     const updateInfo = useMemo(() => getUpdateInfo(), []);
     const handleUpdate = () => {
@@ -634,9 +589,9 @@ function App() {
         }, 100);
     };
     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);
@@ -671,10 +626,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
@@ -686,13 +638,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') {
@@ -711,51 +657,40 @@ 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' }];
-                    const actionId = skillActions[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');
-                        }
+                        : [{ id: 'explore' }, { id: 'install' }];
+                    const actionId = toolActions[selectedAction]?.id;
+                    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) {
@@ -766,9 +701,11 @@ function App() {
                         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) {
@@ -777,14 +714,16 @@ function App() {
                         }
                     }
                     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.default === undefined);
                             if (hasRequiredConfig) {
                                 // Go to configure view for required setup
@@ -798,67 +737,13 @@ 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' });
-    const selectedSkill = activeTab === 'skills' ? skills[selectedIndex] ?? null : null;
-    const selectedCommand = activeTab === 'commands' ? commands[selectedIndex] ?? null : null;
-    const selectedAgent = activeTab === 'agents' ? agents[selectedIndex] ?? null : null;
+    }, { isActive: view !== 'welcome' && view !== 'setup' && view !== 'configure' && view !== 'explorer' });
+    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 (_jsx(WelcomeScreen, { updateInfo: updateInfo, isUpdating: isUpdating, onUpdate: handleUpdate, onExit: exit, onContinue: () => {
                 // If no config exists, show setup first
@@ -882,18 +767,27 @@ function App() {
     if (view === 'readme' && readmeContent) {
         return (_jsx(ReadmeViewer, { title: readmeContent.title, content: readmeContent.content, onClose: () => {
                 setReadmeContent(null);
+                setView(previousView);
+            } }));
+    }
+    if (view === 'explorer' && selectedTool) {
+        return (_jsx(ToolExplorer, { tool: selectedTool, onViewSource: (title, content) => {
+                setPreviousView('explorer');
+                setReadmeContent({ title, content });
+                setView('readme');
+            }, onClose: () => {
                 setView('detail');
             } }));
     }
-    if (view === 'configure' && selectedSkill) {
-        return (_jsx(SkillConfigScreen, { skill: selectedSkill, onComplete: () => {
-                setMessage({ text: `✓ Configuration saved for ${selectedSkill.name}`, type: 'success' });
+    if (view === 'configure' && selectedSkillForConfig) {
+        return (_jsx(SkillConfigScreen, { skill: selectedSkillForConfig, onComplete: () => {
+                setMessage({ text: `✓ Configuration saved for ${selectedTool?.name || selectedSkillForConfig.name}`, type: 'success' });
                 setView('detail');
             }, onCancel: () => {
                 setView('detail');
             } }));
     }
-    return (_jsxs(Box, { flexDirection: "row", padding: 1, children: [_jsxs(Box, { flexDirection: "column", width: 44, borderStyle: "single", borderColor: colors.border, children: [_jsx(Box, { paddingX: 1, children: _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "[" }), _jsx(Text, { color: colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: " " }), _jsx(Text, { color: colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: "] " }), _jsx(Text, { color: colors.textMuted, children: "droid" }), _jsxs(Text, { color: colors.textDim, children: [" v", getVersion()] })] }) }), _jsx(Box, { paddingX: 1, marginTop: 1, children: _jsx(TabBar, { tabs: tabs, activeTab: activeTab }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [activeTab === 'skills' && (_jsxs(_Fragment, { children: [scrollOffset > 0 && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, children: ["\u2191 ", scrollOffset, " more"] }) })), skills.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS).map((skill, index) => (_jsx(SkillItem, { skill: skill, isSelected: scrollOffset + index === selectedIndex, isActive: scrollOffset + index === selectedIndex && view === 'detail' }, skill.name))), scrollOffset + MAX_VISIBLE_ITEMS < skills.length && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, children: ["\u2193 ", skills.length - scrollOffset - MAX_VISIBLE_ITEMS, " more"] }) })), skills.length > MAX_VISIBLE_ITEMS && (_jsx(Box, { paddingX: 1, marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: [skills.length, " skills total"] }) }))] })), activeTab === 'commands' && (_jsxs(_Fragment, { children: [scrollOffset > 0 && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, children: ["\u2191 ", scrollOffset, " more"] }) })), commands.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS).map((cmd, index) => (_jsx(CommandItem, { command: cmd, isSelected: scrollOffset + index === selectedIndex }, cmd.name))), scrollOffset + MAX_VISIBLE_ITEMS < commands.length && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, children: ["\u2193 ", commands.length - scrollOffset - MAX_VISIBLE_ITEMS, " more"] }) }))] })), activeTab === 'agents' && (_jsxs(_Fragment, { children: [scrollOffset > 0 && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, children: ["\u2191 ", scrollOffset, " more"] }) })), agents.length === 0 ? (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: colors.textDim, children: "No agents available" }) })) : (agents.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS).map((agent, index) => (_jsx(AgentItem, { agent: agent, isSelected: scrollOffset + index === selectedIndex }, agent.name)))), scrollOffset + MAX_VISIBLE_ITEMS < agents.length && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, children: ["\u2193 ", agents.length - scrollOffset - MAX_VISIBLE_ITEMS, " more"] }) }))] })), activeTab === 'settings' && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: colors.textDim, children: "View and edit config" }) }))] }), message && (_jsx(Box, { paddingX: 1, marginTop: 1, children: _jsx(Text, { color: message.type === 'success' ? colors.success : colors.error, children: message.text }) })), _jsx(Box, { paddingX: 1, marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: view === 'menu' ? '←→ ↑↓ enter q' : '←→ enter esc q' }) })] }), activeTab === 'skills' && (_jsx(SkillDetails, { skill: selectedSkill, isFocused: view === 'detail', selectedAction: selectedAction })), activeTab === 'commands' && (_jsx(CommandDetails, { command: selectedCommand, isFocused: view === 'detail', selectedAction: selectedAction })), activeTab === 'settings' && (_jsx(SettingsDetails, { onEditSettings: () => setView('setup'), isFocused: false })), activeTab === 'agents' && (_jsx(AgentDetails, { agent: selectedAgent, isFocused: view === 'detail', selectedAction: selectedAction }))] }));
+    return (_jsxs(Box, { flexDirection: "row", padding: 1, children: [_jsxs(Box, { flexDirection: "column", width: 44, borderStyle: "single", borderColor: colors.border, children: [_jsx(Box, { paddingX: 1, children: _jsxs(Text, { children: [_jsx(Text, { color: colors.textDim, children: "[" }), _jsx(Text, { color: colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: " " }), _jsx(Text, { color: colors.primary, children: "\u25CF" }), _jsx(Text, { color: colors.textDim, children: "] " }), _jsx(Text, { color: colors.textMuted, children: "droid" }), _jsxs(Text, { color: colors.textDim, children: [" v", getVersion()] })] }) }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { color: colors.textDim, children: loadConfig().platform === Platform.ClaudeCode ? 'Claude Code' : 'OpenCode' }) }), _jsx(Box, { paddingX: 1, marginTop: 1, children: _jsx(TabBar, { tabs: tabs, activeTab: activeTab }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [activeTab === 'tools' && (_jsxs(_Fragment, { children: [scrollOffset > 0 && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, children: ["\u2191 ", scrollOffset, " more"] }) })), tools.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS).map((tool, index) => (_jsx(ToolItem, { tool: tool, isSelected: scrollOffset + index === selectedIndex, isActive: scrollOffset + index === selectedIndex && view === 'detail' }, tool.name))), scrollOffset + MAX_VISIBLE_ITEMS < tools.length && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, children: ["\u2193 ", tools.length - scrollOffset - MAX_VISIBLE_ITEMS, " more"] }) })), tools.length > MAX_VISIBLE_ITEMS && (_jsx(Box, { paddingX: 1, marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: [tools.length, " tools total"] }) }))] })), activeTab === 'settings' && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: colors.textDim, children: "View and edit config" }) }))] }), message && (_jsx(Box, { paddingX: 1, marginTop: 1, children: _jsx(Text, { color: message.type === 'success' ? colors.success : colors.error, children: message.text }) })), _jsx(Box, { paddingX: 1, marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: view === 'menu' ? '←→ ↑↓ enter q' : '←→ enter esc q' }) })] }), activeTab === 'tools' && (_jsx(ToolDetails, { tool: selectedTool, isFocused: view === 'detail', selectedAction: selectedAction })), activeTab === 'settings' && (_jsx(SettingsDetails, { onEditSettings: () => setView('setup'), isFocused: false }))] }));
 }
 export async function tuiCommand() {
     // Enter alternate screen (fullscreen mode)