@orderful/droid 0.3.0 → 0.4.0

package/.claude/CLAUDE.md

@@ -0,0 +1,41 @@
+# CLAUDE.md
+
+Project instructions for Claude Code when working in this repository.
+
+## Project Overview
+
+Droid is a TUI dashboard for managing AI skills, commands, and agents. It installs content to Claude Code (`~/.claude/`) and OpenCode (`~/.config/opencode/`).
+
+## Build & Test
+
+```bash
+npm run build      # Compile TypeScript and copy skills/agents to dist/
+npm run dev        # Watch mode
+npm run test       # Run tests
+npm run start      # Run the TUI (bun dist/bin/droid.js)
+```
+
+## Git Rules
+
+- **NEVER push to main** without explicit user permission
+- Always create a feature branch and PR for changes
+- Branch naming: `tf/<ticket-or-description>` (e.g., `tf/agents-commands-tui`)
+- Use changesets for version bumps: `npm run changeset`
+
+## Structure
+
+```
+src/
+├── bin/           # CLI entry point
+├── commands/      # CLI commands (tui.tsx is the main dashboard)
+├── lib/           # Core logic (skills.ts, agents.ts, config.ts)
+├── skills/        # Bundled skills (copied to dist on build)
+└── agents/        # Bundled agents (copied to dist on build)
+```
+
+## Key Patterns
+
+- Skills install to `~/.claude/skills/` and register in CLAUDE.md
+- Commands install to `~/.claude/commands/`
+- Agents install to `~/.claude/agents/`
+- TUI uses Ink (React for CLI)

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @orderful/droid
 
+## 0.4.0
+
+### Minor Changes
+
+- [`e7686f1`](https://github.com/Orderful/droid/commit/e7686f18615ff4730efef1cfe9440c268d957500) Thanks [@frytyler](https://github.com/frytyler)! - Add agents and commands install/uninstall functionality
+
+  **Agents:**
+  - New Agents tab in TUI with install/uninstall support
+  - Agents install to `~/.claude/agents/{name}.md`
+  - New schema fields: `mode` (primary/subagent/all), `tools` (allowed tools list)
+  - Sample `code-reviewer` agent included
+
+  **Commands:**
+  - Commands can now be installed independently of their parent skill
+  - Install copies command to `~/.claude/commands/`
+  - Smart handling: commands installed via skill show "via skill" and can't be uninstalled independently
+
+  **TUI Improvements:**
+  - View action for skills, commands, and agents with markdown syntax highlighting
+  - Fixed Enter key navigation for commands and agents tabs
+  - Scrolling fixes in markdown viewer
+  - Contributor README files for skills, commands, and agents
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/agents/README.md

@@ -0,0 +1,137 @@
+# Contributing Agents
+
+Agents are specialized AI personas with specific expertise or roles. They augment the AI's capabilities for particular tasks.
+
+## Directory Structure
+
+Each agent is a directory containing:
+
+```
+agents/
+└── my-agent/
+    ├── AGENT.yaml      # Required: Manifest with metadata and persona
+    └── AGENT.md        # Required: Documentation for users
+```
+
+## AGENT.yaml (Manifest)
+
+```yaml
+name: my-agent                          # Must match directory name
+description: Short description          # Shown in TUI and listings
+version: 1.0.0                          # Semver
+status: alpha                           # alpha | beta | stable (optional)
+
+# Agent type (required)
+mode: subagent                          # primary | subagent | all
+
+# Tools this agent can use (optional)
+tools:
+  - Read
+  - Glob
+  - Grep
+  - Bash
+
+# Suggested triggers - phrases that might invoke this agent
+triggers:
+  - "review my code"
+  - "check for bugs"
+
+# Persona - system prompt additions for this agent (used if AGENT.md is minimal)
+persona: |
+  You are a specialized assistant focused on...
+
+  Your priorities are:
+  1. First priority
+  2. Second priority
+
+  Always be specific and constructive.
+```
+
+### Agent Modes
+
+- **`primary`** - Main agents you interact with directly. Cycle through them with Tab key.
+- **`subagent`** - Specialized helpers invoked via @mention (e.g., `@code-reviewer check this`) or by primary agents.
+- **`all`** - Agent works as both primary and subagent.
+
+## AGENT.md (Documentation)
+
+The AGENT.md file documents the agent for users:
+
+```markdown
+---
+name: my-agent
+description: Short description (must match AGENT.yaml)
+---
+
+# My Agent
+
+Description of what this agent does and when to use it.
+
+## What It Does
+
+- Bullet points of capabilities
+- What it focuses on
+- What it ignores
+
+## Usage
+
+Examples of how to invoke or use this agent.
+
+## Output Format
+
+Description of how the agent formats its responses.
+```
+
+## Example Agent
+
+See `code-reviewer/` for a complete example:
+
+- Reviews code for bugs, security issues, style
+- Categorizes issues by severity (critical/warning/suggestion)
+- References specific file and line numbers
+
+## Ideas for Agents
+
+- **test-writer** - Generates unit tests for code
+- **doc-writer** - Writes documentation and comments
+- **refactorer** - Suggests and applies refactoring patterns
+- **security-auditor** - Deep security analysis
+- **performance-optimizer** - Identifies performance bottlenecks
+
+## Installation
+
+When you install an agent via the TUI, droid:
+
+1. Reads `AGENT.yaml` for metadata (name, description, tools)
+2. Reads `AGENT.md` for the agent's instructions/persona
+3. Combines them into a single `.md` file with frontmatter
+4. Writes to `~/.claude/agents/{name}.md`
+
+The installed format matches what Claude Code expects:
+
+```markdown
+---
+name: my-agent
+description: Short description
+tools: Read, Glob, Grep, Bash
+---
+
+[Content from AGENT.md]
+```
+
+## Testing Your Agent
+
+1. Run `npm run build` to compile
+2. Run `droid` to open the TUI
+3. Navigate to Agents tab
+4. Verify your agent appears with correct metadata
+5. Install and verify it appears in `~/.claude/agents/`
+
+## Checklist
+
+- [ ] `AGENT.yaml` has all required fields (name, description, version, mode)
+- [ ] `AGENT.md` contains the agent's instructions/persona
+- [ ] Name matches directory name
+- [ ] Description is clear and concise
+- [ ] Mode is appropriate (subagent for specialized tasks, primary for main assistants)
+- [ ] Tools list only includes what the agent needs

package/dist/commands/tui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tui.d.ts","sourceRoot":"","sources":["../../src/commands/tui.tsx"],"names":[],"mappings":"AAkkCA,wBAAsB,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,CAWhD"}
+{"version":3,"file":"tui.d.ts","sourceRoot":"","sources":["../../src/commands/tui.tsx"],"names":[],"mappings":"AAm/CA,wBAAsB,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,CAWhD"}

package/dist/commands/tui.js

@@ -5,7 +5,8 @@ import { useState, useMemo } from 'react';
 import { execSync } from 'child_process';
 import { existsSync, readdirSync, readFileSync } from 'fs';
 import { join } from 'path';
-import { getBundledSkills, getBundledSkillsDir, isSkillInstalled, getInstalledSkill, installSkill, uninstallSkill, } from '../lib/skills.js';
+import { getBundledSkills, getBundledSkillsDir, isSkillInstalled, getInstalledSkill, installSkill, uninstallSkill, isCommandInstalled, installCommand, uninstallCommand, } from '../lib/skills.js';
+import { getBundledAgents, getBundledAgentsDir, isAgentInstalled, installAgent, uninstallAgent } from '../lib/agents.js';
 import { configExists, loadConfig, saveConfig, loadSkillOverrides, saveSkillOverrides } from '../lib/config.js';
 import { configureAIToolPermissions } from './setup.js';
 import { AITool, BuiltInOutput, ConfigOptionType } from '../lib/types.js';
@@ -210,10 +211,14 @@ function SkillDetails({ skill, isFocused, selectedAction, }) {
     const skillCommands = getCommandsFromSkills().filter((c) => c.skillName === skill.name);
     const actions = installed
         ? [
-            { id: 'uninstall', label: 'Uninstall', variant: 'danger' },
+            { id: 'view', label: 'View', variant: 'default' },
             { id: 'configure', label: 'Configure', variant: 'primary' },
+            { id: 'uninstall', label: 'Uninstall', variant: 'danger' },
         ]
-        : [{ id: 'install', label: 'Install', variant: 'primary' }];
+        : [
+            { 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: 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" })] }) }), _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')
@@ -224,12 +229,143 @@ function SkillDetails({ skill, isFocused, selectedAction, }) {
                             : colors.primary
                         : colors.bgSelected, color: selectedAction === index ? '#ffffff' : colors.textMuted, bold: selectedAction === index, children: [' ', action.label, ' '] }, action.id))) }))] }));
 }
-function CommandDetails({ command }) {
+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 installed = isSkillInstalled(command.skillName);
-    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, installed && _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)))] }))] }));
+    const skillInstalled = isSkillInstalled(command.skillName);
+    const installed = isCommandInstalled(command.name, command.skillName);
+    // If skill is installed, command comes with it - no standalone uninstall
+    const actions = skillInstalled
+        ? [{ 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: [_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 via skill" }), !skillInstalled && installed && _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 statusDisplay = agent.status === 'alpha' ? '[alpha]' : agent.status === 'beta' ? '[beta]' : '';
+    const modeDisplay = agent.mode === 'primary' ? 'primary' : agent.mode === 'all' ? 'primary/subagent' : 'subagent';
+    const actions = 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, 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
+                        ? action.variant === 'danger'
+                            ? colors.error
+                            : colors.primary
+                        : colors.bgSelected, color: selectedAction === index ? '#ffffff' : colors.textMuted, bold: selectedAction === index, children: [' ', action.label, ' '] }, action.id))) }))] }));
+}
+function MarkdownLine({ line, inCodeBlock }) {
+    // Code block content
+    if (inCodeBlock) {
+        return _jsx(Text, { color: "#a5d6ff", children: line || ' ' });
+    }
+    // Code block delimiter
+    if (line.startsWith('```')) {
+        return _jsx(Text, { color: colors.textDim, children: line });
+    }
+    // Headers
+    if (line.startsWith('# ')) {
+        return _jsx(Text, { color: colors.text, bold: true, children: line.slice(2) });
+    }
+    if (line.startsWith('## ')) {
+        return _jsx(Text, { color: colors.text, bold: true, children: line.slice(3) });
+    }
+    if (line.startsWith('### ')) {
+        return _jsx(Text, { color: "#c9d1d9", bold: true, children: line.slice(4) });
+    }
+    // YAML frontmatter delimiter
+    if (line === '---') {
+        return _jsx(Text, { color: colors.textDim, children: line });
+    }
+    // List items
+    if (line.match(/^[\s]*[-*]\s/)) {
+        return _jsx(Text, { color: colors.textMuted, children: line });
+    }
+    // Blockquotes
+    if (line.startsWith('>')) {
+        return _jsx(Text, { color: "#8b949e", italic: true, children: line });
+    }
+    // Table rows
+    if (line.includes('|')) {
+        return _jsx(Text, { color: colors.textMuted, children: line });
+    }
+    // Default
+    return _jsx(Text, { color: colors.textMuted, children: line || ' ' });
+}
+function ReadmeViewer({ title, content, onClose, }) {
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const lines = useMemo(() => content.split('\n'), [content]);
+    const maxVisible = 20;
+    // Pre-compute code block state for each line
+    const lineStates = useMemo(() => {
+        const states = [];
+        let inCode = false;
+        for (const line of lines) {
+            if (line.startsWith('```')) {
+                states.push(false); // Delimiter itself is not "in" code block for styling
+                inCode = !inCode;
+            }
+            else {
+                states.push(inCode);
+            }
+        }
+        return states;
+    }, [lines]);
+    // Max offset: when at end, we have top indicator + (maxVisible-1) content lines
+    // So max offset is lines.length - (maxVisible - 1) = lines.length - maxVisible + 1
+    const maxOffset = Math.max(0, lines.length - maxVisible + 1);
+    useInput((input, key) => {
+        if (key.escape) {
+            onClose();
+            return;
+        }
+        if (key.upArrow) {
+            setScrollOffset((prev) => Math.max(0, prev - 1));
+        }
+        if (key.downArrow) {
+            setScrollOffset((prev) => Math.min(maxOffset, prev + 1));
+        }
+        if (key.pageDown || input === ' ') {
+            setScrollOffset((prev) => Math.min(maxOffset, prev + maxVisible));
+        }
+        if (key.pageUp) {
+            setScrollOffset((prev) => Math.max(0, prev - maxVisible));
+        }
+    });
+    // Adjust visible lines based on whether indicators are shown
+    const showTopIndicator = scrollOffset > 0;
+    // Reserve space for bottom indicator if not at end
+    const contentLines = maxVisible - (showTopIndicator ? 1 : 0);
+    const endIndex = Math.min(scrollOffset + contentLines, lines.length);
+    const showBottomIndicator = endIndex < lines.length;
+    const actualContentLines = contentLines - (showBottomIndicator ? 1 : 0);
+    const visibleLines = lines.slice(scrollOffset, scrollOffset + actualContentLines);
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: colors.text, bold: true, children: title }), _jsxs(Text, { color: colors.textDim, children: [" \u00B7 ", lines.length, " lines"] })] }), _jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: colors.border, paddingX: 1, children: [showTopIndicator && (_jsxs(Text, { color: colors.textDim, children: ["\u2191 ", scrollOffset, " more lines"] })), visibleLines.map((line, i) => (_jsx(MarkdownLine, { line: line, inCodeBlock: lineStates[scrollOffset + i] }, scrollOffset + i))), showBottomIndicator && (_jsxs(Text, { color: colors.textDim, children: ["\u2193 ", lines.length - scrollOffset - actualContentLines, " more lines"] }))] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, children: "\u2191\u2193 scroll \u00B7 space/pgdn page \u00B7 esc back" }) })] }));
 }
 function SettingsDetails({ onEditSettings, isFocused, }) {
     const config = loadConfig();
@@ -328,9 +464,11 @@ function App() {
     const [scrollOffset, setScrollOffset] = useState(0);
     const [message, setMessage] = useState(null);
     const [isEditingSettings, setIsEditingSettings] = useState(false);
+    const [readmeContent, setReadmeContent] = useState(null);
     const MAX_VISIBLE_ITEMS = 6;
     const skills = getBundledSkills();
     const commands = getCommandsFromSkills();
+    const agents = getBundledAgents();
     useInput((input, key) => {
         if (message)
             setMessage(null);
@@ -382,6 +520,12 @@ function App() {
                 if (activeTab === 'skills' && skills.length > 0) {
                     setView('detail');
                 }
+                else if (activeTab === 'commands' && commands.length > 0) {
+                    setView('detail');
+                }
+                else if (activeTab === 'agents' && agents.length > 0) {
+                    setView('detail');
+                }
                 else if (activeTab === 'settings') {
                     setIsEditingSettings(true);
                     setView('setup');
@@ -397,16 +541,43 @@ function App() {
                 setSelectedAction((prev) => Math.max(0, prev - 1));
             }
             if (key.rightArrow) {
-                const skill = skills[selectedIndex];
-                const installed = skill ? isSkillInstalled(skill.name) : false;
-                const maxActions = installed ? 1 : 0;
+                let maxActions = 0;
+                if (activeTab === 'skills') {
+                    const skill = skills[selectedIndex];
+                    const installed = skill ? isSkillInstalled(skill.name) : false;
+                    maxActions = installed ? 2 : 1; // View, Configure, Uninstall or View, Install
+                }
+                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);
-                    if (installed && selectedAction === 0) {
+                    // Actions: installed = [View, Configure, Uninstall], not installed = [View, Install]
+                    if (selectedAction === 0) {
+                        // 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');
+                        }
+                    }
+                    else if (installed && selectedAction === 1) {
+                        // Configure
+                        setView('configure');
+                    }
+                    else if (installed && selectedAction === 2) {
+                        // Uninstall
                         const result = uninstallSkill(skill.name);
                         setMessage({
                             text: result.success ? `✓ Uninstalled ${skill.name}` : `✗ ${result.message}`,
@@ -417,11 +588,8 @@ function App() {
                             setSelectedAction(0);
                         }
                     }
-                    else if (installed && selectedAction === 1) {
-                        // Configure
-                        setView('configure');
-                    }
-                    else if (!installed) {
+                    else if (!installed && selectedAction === 1) {
+                        // Install
                         const result = installSkill(skill.name);
                         setMessage({
                             text: result.success ? `✓ Installed ${skill.name}` : `✗ ${result.message}`,
@@ -434,10 +602,93 @@ function App() {
                     }
                 }
             }
+            if (key.return && activeTab === 'agents') {
+                const agent = agents[selectedIndex];
+                if (agent) {
+                    const installed = isAgentInstalled(agent.name);
+                    if (selectedAction === 0) {
+                        // View
+                        const agentMdPath = join(getBundledAgentsDir(), agent.name, 'AGENT.md');
+                        if (existsSync(agentMdPath)) {
+                            const content = readFileSync(agentMdPath, 'utf-8');
+                            setReadmeContent({ title: `${agent.name}/AGENT.md`, content });
+                            setView('readme');
+                        }
+                    }
+                    else if (installed && selectedAction === 1) {
+                        // Uninstall
+                        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 (!installed && selectedAction === 1) {
+                        // Install
+                        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) {
+                    const installed = isCommandInstalled(command.name, command.skillName);
+                    // 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`);
+                    if (selectedAction === 0) {
+                        // View
+                        if (existsSync(commandMdPath)) {
+                            const content = readFileSync(commandMdPath, 'utf-8');
+                            setReadmeContent({ title: `/${command.name}`, content });
+                            setView('readme');
+                        }
+                    }
+                    else if (installed && selectedAction === 1) {
+                        // Uninstall
+                        const result = uninstallCommand(command.name, command.skillName);
+                        setMessage({
+                            text: result.success ? `✓ ${result.message}` : `✗ ${result.message}`,
+                            type: result.success ? 'success' : 'error',
+                        });
+                        if (result.success) {
+                            setView('menu');
+                            setSelectedAction(0);
+                        }
+                    }
+                    else if (!installed && selectedAction === 1) {
+                        // Install
+                        const result = installCommand(command.name, command.skillName);
+                        setMessage({
+                            text: result.success ? `✓ ${result.message}` : `✗ ${result.message}`,
+                            type: result.success ? 'success' : 'error',
+                        });
+                        if (result.success) {
+                            setView('menu');
+                            setSelectedAction(0);
+                        }
+                    }
+                }
+            }
         }
     });
     const selectedSkill = activeTab === 'skills' ? skills[selectedIndex] ?? null : null;
     const selectedCommand = activeTab === 'commands' ? commands[selectedIndex] ?? null : null;
+    const selectedAgent = activeTab === 'agents' ? agents[selectedIndex] ?? null : null;
     if (view === 'welcome') {
         return (_jsx(WelcomeScreen, { onContinue: () => {
                 // If no config exists, show setup first
@@ -458,6 +709,12 @@ function App() {
                 setView('menu');
             }, initialConfig: isEditingSettings ? loadConfig() : undefined }));
     }
+    if (view === 'readme' && readmeContent) {
+        return (_jsx(ReadmeViewer, { title: readmeContent.title, content: readmeContent.content, onClose: () => {
+                setReadmeContent(null);
+                setView('detail');
+            } }));
+    }
     if (view === 'configure' && selectedSkill) {
         return (_jsx(SkillConfigScreen, { skill: selectedSkill, onComplete: () => {
                 setMessage({ text: `✓ Configuration saved for ${selectedSkill.name}`, type: 'success' });
@@ -466,7 +723,7 @@ function App() {
                 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" })] }) }), _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' && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: colors.textDim, children: "Coming soon" }) })), activeTab === 'settings' && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: colors.textDim, children: "View and edit config" }) }))] }), _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 }), activeTab === 'settings' && (_jsx(SettingsDetails, { onEditSettings: () => setView('setup'), isFocused: false })), activeTab === 'agents' && (_jsx(Box, { paddingLeft: 2, flexGrow: 1, children: _jsx(Text, { color: colors.textDim, children: "Coming soon" }) })), message && (_jsx(Box, { position: "absolute", marginTop: 12, children: _jsx(Text, { color: message.type === 'success' ? colors.success : colors.error, children: message.text }) }))] }));
+    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" })] }) }), _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" }) }))] }), _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 })), message && (_jsx(Box, { position: "absolute", marginTop: 12, children: _jsx(Text, { color: message.type === 'success' ? colors.success : colors.error, children: message.text }) }))] }));
 }
 export async function tuiCommand() {
     // Enter alternate screen (fullscreen mode)