@orderful/droid 0.2.0 → 0.4.0

package/src/commands/tui.tsx

@@ -0,0 +1,1535 @@
+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 { join } from 'path';
+import {
+  getBundledSkills,
+  getBundledSkillsDir,
+  isSkillInstalled,
+  getInstalledSkill,
+  installSkill,
+  uninstallSkill,
+  isCommandInstalled,
+  installCommand,
+  uninstallCommand,
+} from '../lib/skills.js';
+import { getBundledAgents, getBundledAgentsDir, isAgentInstalled, installAgent, uninstallAgent, type AgentManifest } from '../lib/agents.js';
+import { configExists, loadConfig, saveConfig, loadSkillOverrides, saveSkillOverrides } from '../lib/config.js';
+import { configureAIToolPermissions } from './setup.js';
+import { AITool, BuiltInOutput, ConfigOptionType, type DroidConfig, type OutputPreference, type SkillManifest, type ConfigOption, type SkillOverrides } from '../lib/types.js';
+import { getVersion } from '../lib/version.js';
+
+type Tab = 'skills' | 'commands' | 'agents' | 'settings';
+type View = 'welcome' | 'setup' | 'menu' | 'detail' | 'configure' | 'readme';
+type SetupStep = 'ai_tool' | 'user_mention' | 'output_preference' | 'confirm';
+
+const colors = {
+  primary: '#6366f1',
+  bgSelected: '#2d2d2d',
+  border: '#3a3a3a',
+  text: '#e8e8e8',
+  textMuted: '#999999',
+  textDim: '#6a6a6a',
+  success: '#4ade80',
+  error: '#f87171',
+};
+
+interface Command {
+  name: string;
+  description: string;
+  skillName: string;
+  usage: string[];
+}
+
+function getCommandsFromSkills(): Command[] {
+  const skillsDir = getBundledSkillsDir();
+  const commands: Command[] = [];
+
+  if (!existsSync(skillsDir)) return commands;
+
+  const skillDirs = readdirSync(skillsDir, { withFileTypes: true })
+    .filter((d) => d.isDirectory())
+    .map((d) => d.name);
+
+  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');
+
+      const headerMatch = lines[0]?.match(/^#\s+\/(\S+)\s*-?\s*(.*)/);
+      if (!headerMatch) continue;
+
+      const usage: string[] = [];
+      let inUsage = false;
+      for (const line of lines) {
+        if (line.startsWith('## Usage')) inUsage = true;
+        else if (line.startsWith('## ') && inUsage) break;
+        else if (inUsage && line.startsWith('/')) usage.push(line.trim());
+      }
+
+      commands.push({
+        name: headerMatch[1],
+        description: headerMatch[2] || '',
+        skillName,
+        usage,
+      });
+    }
+  }
+
+  return commands;
+}
+
+function detectAITool(): AITool | null {
+  try {
+    execSync('claude --version', { stdio: 'ignore' });
+    return AITool.ClaudeCode;
+  } catch {
+    // Claude Code not found
+  }
+  try {
+    execSync('opencode --version', { stdio: 'ignore' });
+    return AITool.OpenCode;
+  } catch {
+    // OpenCode not found
+  }
+  return null;
+}
+
+function getOutputOptions(): Array<{ label: string; value: OutputPreference }> {
+  const options: Array<{ label: string; value: OutputPreference }> = [
+    { label: 'Terminal (display in CLI)', value: BuiltInOutput.Terminal },
+    { label: 'Editor ($EDITOR)', value: BuiltInOutput.Editor },
+  ];
+  const skills = getBundledSkills();
+  for (const skill of skills) {
+    if (skill.provides_output) {
+      options.push({ label: `${skill.name} (${skill.description})`, value: skill.name });
+    }
+  }
+  return options;
+}
+
+function WelcomeScreen({ onContinue }: { onContinue: () => void }) {
+  useInput((input, key) => {
+    if (key.return || input === 'q') {
+      onContinue();
+    }
+  });
+
+  return (
+    <Box flexDirection="column" alignItems="center" justifyContent="center" height={16}>
+      <Box
+        flexDirection="column"
+        alignItems="center"
+        borderStyle="single"
+        borderColor={colors.border}
+        paddingX={4}
+        paddingY={1}
+      >
+        <Box flexDirection="column">
+          <Text>
+            <Text color={colors.textDim}>╔═════╗    </Text>
+            <Text color={colors.text}>droid</Text>
+            <Text color={colors.textDim}> v{getVersion()}</Text>
+          </Text>
+          <Text>
+            <Text color={colors.textDim}>║ </Text>
+            <Text color={colors.primary}>●</Text>
+            <Text color={colors.textDim}> </Text>
+            <Text color={colors.primary}>●</Text>
+            <Text color={colors.textDim}> ║    </Text>
+            <Text color={colors.textMuted}>Teaching your droid new tricks</Text>
+          </Text>
+          <Text>
+            <Text color={colors.textDim}>╚═╦═╦═╝    </Text>
+            <Text color={colors.textDim}>github.com/Orderful/droid</Text>
+          </Text>
+        </Box>
+
+        <Box marginTop={2} marginBottom={1}>
+          <Text backgroundColor={colors.primary} color="#ffffff" bold>
+            {' '}I'm probably the droid you are looking for.{' '}
+          </Text>
+        </Box>
+
+        <Text color={colors.textDim}>press enter</Text>
+      </Box>
+    </Box>
+  );
+}
+
+interface SetupScreenProps {
+  onComplete: () => void;
+  onSkip: () => void;
+  initialConfig?: DroidConfig;
+}
+
+function SetupScreen({ onComplete, onSkip, initialConfig }: SetupScreenProps) {
+  const [step, setStep] = useState<SetupStep>('ai_tool');
+  const [aiTool, setAITool] = useState<AITool>(
+    initialConfig?.ai_tool || detectAITool() || AITool.ClaudeCode
+  );
+  const [userMention, setUserMention] = useState(initialConfig?.user_mention || '@user');
+  const [outputPreference, setOutputPreference] = useState<OutputPreference>(
+    initialConfig?.output_preference || BuiltInOutput.Terminal
+  );
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+
+  const aiToolOptions = useMemo(() => [
+    { label: 'Claude Code', value: AITool.ClaudeCode },
+    { label: 'OpenCode', value: AITool.OpenCode },
+  ], []);
+  const outputOptions = useMemo(() => getOutputOptions(), []);
+
+  const steps: SetupStep[] = ['ai_tool', 'user_mention', 'output_preference', 'confirm'];
+  const stepIndex = steps.indexOf(step);
+  const totalSteps = steps.length - 1; // Don't count confirm as a step
+
+  const handleUserMentionSubmit = () => {
+    if (!userMention.startsWith('@')) {
+      setError('Mention should start with @');
+      return;
+    }
+    setError(null);
+    setStep('output_preference');
+    setSelectedIndex(0);
+  };
+
+  // Handle escape during text input (only intercept escape, nothing else)
+  useInput((input, key) => {
+    if (key.escape) {
+      setStep('ai_tool');
+      setSelectedIndex(0);
+    }
+  }, { isActive: step === 'user_mention' });
+
+  // Handle all input for non-text-input steps
+  useInput((input, key) => {
+    if (key.escape) {
+      if (step === 'ai_tool') {
+        onSkip();
+      } else if (step === 'output_preference') {
+        setStep('user_mention');
+      } else if (step === 'confirm') {
+        setStep('output_preference');
+        setSelectedIndex(0);
+      }
+      return;
+    }
+
+    if (step === 'ai_tool') {
+      if (key.upArrow) setSelectedIndex((prev) => Math.max(0, prev - 1));
+      if (key.downArrow) setSelectedIndex((prev) => Math.min(aiToolOptions.length - 1, prev + 1));
+      if (key.return) {
+        setAITool(aiToolOptions[selectedIndex].value);
+        setStep('user_mention');
+      }
+    } else if (step === 'output_preference') {
+      if (key.upArrow) setSelectedIndex((prev) => Math.max(0, prev - 1));
+      if (key.downArrow) setSelectedIndex((prev) => Math.min(outputOptions.length - 1, prev + 1));
+      if (key.return) {
+        setOutputPreference(outputOptions[selectedIndex].value);
+        setStep('confirm');
+      }
+    } else if (step === 'confirm') {
+      if (key.return) {
+        const config: DroidConfig = {
+          ...loadConfig(),
+          ai_tool: aiTool,
+          user_mention: userMention,
+          output_preference: outputPreference,
+        };
+        saveConfig(config);
+        configureAIToolPermissions(aiTool);
+        onComplete();
+      }
+    }
+  }, { isActive: step !== 'user_mention' });
+
+  const renderHeader = () => (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text>
+        <Text color={colors.textDim}>[</Text>
+        <Text color={colors.primary}>●</Text>
+        <Text color={colors.textDim}> </Text>
+        <Text color={colors.primary}>●</Text>
+        <Text color={colors.textDim}>] </Text>
+        <Text color={colors.text} bold>droid setup</Text>
+        <Text color={colors.textDim}> · Step {Math.min(stepIndex + 1, totalSteps)} of {totalSteps}</Text>
+      </Text>
+    </Box>
+  );
+
+  if (step === 'ai_tool') {
+    return (
+      <Box flexDirection="column" padding={1}>
+        {renderHeader()}
+        <Text color={colors.text}>Which AI tool are you using?</Text>
+        <Box flexDirection="column" marginTop={1}>
+          {aiToolOptions.map((option, index) => (
+            <Text key={option.value}>
+              <Text color={colors.textDim}>{index === selectedIndex ? '>' : ' '} </Text>
+              <Text color={index === selectedIndex ? colors.text : colors.textMuted}>{option.label}</Text>
+              {option.value === detectAITool() && <Text color={colors.success}> (detected)</Text>}
+            </Text>
+          ))}
+        </Box>
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>↑↓ select · enter next · esc skip</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (step === 'user_mention') {
+    return (
+      <Box flexDirection="column" padding={1}>
+        {renderHeader()}
+        <Text color={colors.text}>What @mention should be used for you?</Text>
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>{'> '}</Text>
+          <TextInput
+            value={userMention}
+            onChange={setUserMention}
+            onSubmit={handleUserMentionSubmit}
+            placeholder="@user"
+          />
+        </Box>
+        {error && (
+          <Box marginTop={1}>
+            <Text color={colors.error}>{error}</Text>
+          </Box>
+        )}
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>enter next · esc back</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (step === 'output_preference') {
+    return (
+      <Box flexDirection="column" padding={1}>
+        {renderHeader()}
+        <Text color={colors.text}>Default output preference for skill results?</Text>
+        <Box flexDirection="column" marginTop={1}>
+          {outputOptions.map((option, index) => (
+            <Text key={option.value}>
+              <Text color={colors.textDim}>{index === selectedIndex ? '>' : ' '} </Text>
+              <Text color={index === selectedIndex ? colors.text : colors.textMuted}>{option.label}</Text>
+            </Text>
+          ))}
+        </Box>
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>↑↓ select · enter next · esc back</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  // Confirm step
+  return (
+    <Box flexDirection="column" padding={1}>
+      {renderHeader()}
+      <Text color={colors.text} bold>Review your settings</Text>
+      <Box flexDirection="column" marginTop={1}>
+        <Text>
+          <Text color={colors.textDim}>AI Tool:       </Text>
+          <Text color={colors.text}>{aiTool === AITool.ClaudeCode ? 'Claude Code' : 'OpenCode'}</Text>
+        </Text>
+        <Text>
+          <Text color={colors.textDim}>Your @mention: </Text>
+          <Text color={colors.text}>{userMention}</Text>
+        </Text>
+        <Text>
+          <Text color={colors.textDim}>Output:        </Text>
+          <Text color={colors.text}>{outputOptions.find((o) => o.value === outputPreference)?.label || outputPreference}</Text>
+        </Text>
+      </Box>
+      <Box marginTop={2}>
+        <Text backgroundColor={colors.primary} color="#ffffff" bold>
+          {' '}Save{' '}
+        </Text>
+      </Box>
+      <Box marginTop={1}>
+        <Text color={colors.textDim}>enter save · esc back</Text>
+      </Box>
+    </Box>
+  );
+}
+
+function TabBar({ tabs, activeTab }: { tabs: { id: Tab; label: string }[]; activeTab: Tab }) {
+  return (
+    <Box flexDirection="row">
+      {tabs.map((tab) => (
+        <Text
+          key={tab.id}
+          backgroundColor={tab.id === activeTab ? colors.primary : undefined}
+          color={tab.id === activeTab ? '#ffffff' : colors.textMuted}
+          bold={tab.id === activeTab}
+        >
+          {' '}{tab.label}{' '}
+        </Text>
+      ))}
+    </Box>
+  );
+}
+
+function SkillItem({
+  skill,
+  isSelected,
+  isActive,
+}: {
+  skill: SkillManifest;
+  isSelected: boolean;
+  isActive: boolean;
+}) {
+  const installed = isSkillInstalled(skill.name);
+  const installedInfo = getInstalledSkill(skill.name);
+
+  return (
+    <Box paddingX={1} backgroundColor={isActive ? colors.bgSelected : undefined}>
+      <Text>
+        <Text color={colors.textDim}>{isSelected ? '>' : ' '} </Text>
+        <Text color={isSelected || isActive ? colors.text : colors.textMuted}>{skill.name}</Text>
+        {installed && installedInfo && <Text color={colors.textDim}> v{installedInfo.version}</Text>}
+        {installed && <Text color={colors.success}> *</Text>}
+      </Text>
+    </Box>
+  );
+}
+
+function CommandItem({
+  command,
+  isSelected,
+}: {
+  command: Command;
+  isSelected: boolean;
+}) {
+  const installed = isSkillInstalled(command.skillName);
+
+  return (
+    <Box paddingX={1}>
+      <Text>
+        <Text color={colors.textDim}>{isSelected ? '>' : ' '} </Text>
+        <Text color={isSelected ? colors.text : colors.textMuted}>/{command.name}</Text>
+        {installed && <Text color={colors.success}> *</Text>}
+      </Text>
+    </Box>
+  );
+}
+
+function SkillDetails({
+  skill,
+  isFocused,
+  selectedAction,
+}: {
+  skill: SkillManifest | null;
+  isFocused: boolean;
+  selectedAction: number;
+}) {
+  if (!skill) {
+    return (
+      <Box paddingLeft={2} flexGrow={1}>
+        <Text color={colors.textDim}>Select a skill</Text>
+      </Box>
+    );
+  }
+
+  const installed = isSkillInstalled(skill.name);
+  const skillCommands = getCommandsFromSkills().filter((c) => c.skillName === skill.name);
+
+  const actions = installed
+    ? [
+        { id: 'view', label: 'View', variant: 'default' },
+        { id: 'configure', label: 'Configure', variant: 'primary' },
+        { id: 'uninstall', label: 'Uninstall', variant: 'danger' },
+      ]
+    : [
+        { id: 'view', label: 'View', variant: 'default' },
+        { id: 'install', label: 'Install', variant: 'primary' },
+      ];
+
+  return (
+    <Box flexDirection="column" paddingLeft={2} flexGrow={1}>
+      <Text color={colors.text} bold>{skill.name}</Text>
+
+      <Box marginTop={1}>
+        <Text color={colors.textDim}>
+          {skill.version}
+          {skill.status && ` · ${skill.status}`}
+          {installed && <Text color={colors.success}> · installed</Text>}
+        </Text>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={colors.textMuted}>{skill.description}</Text>
+      </Box>
+
+      {skillCommands.length > 0 && (
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>
+            Commands: {skillCommands.map((c) => `/${c.name}`).join(', ')}
+          </Text>
+        </Box>
+      )}
+
+      {skill.examples && skill.examples.length > 0 && (
+        <Box flexDirection="column" marginTop={1}>
+          <Text color={colors.textDim}>
+            Examples{skill.examples.length > 2 ? ` (showing 2 of ${skill.examples.length})` : ''}:
+          </Text>
+          {skill.examples.slice(0, 2).map((example, i) => (
+            <Box key={i} flexDirection="column" marginTop={i > 0 ? 1 : 0}>
+              <Text color={colors.textMuted}>  {example.title}</Text>
+              {example.code
+                .trim()
+                .split('\n')
+                .slice(0, 3)
+                .map((line, j) => (
+                  <Text key={j} color={colors.textDim}>
+                    {'    '}{line}
+                  </Text>
+                ))}
+            </Box>
+          ))}
+        </Box>
+      )}
+
+      {isFocused && (
+        <Box flexDirection="row" marginTop={1}>
+          {actions.map((action, index) => (
+            <Text
+              key={action.id}
+              backgroundColor={
+                selectedAction === index
+                  ? action.variant === 'danger'
+                    ? colors.error
+                    : colors.primary
+                  : colors.bgSelected
+              }
+              color={selectedAction === index ? '#ffffff' : colors.textMuted}
+              bold={selectedAction === index}
+            >
+              {' '}{action.label}{' '}
+            </Text>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+function CommandDetails({
+  command,
+  isFocused,
+  selectedAction,
+}: {
+  command: Command | null;
+  isFocused: boolean;
+  selectedAction: number;
+}) {
+  if (!command) {
+    return (
+      <Box paddingLeft={2} flexGrow={1}>
+        <Text color={colors.textDim}>Select a command</Text>
+      </Box>
+    );
+  }
+
+  const skillInstalled = isSkillInstalled(command.skillName);
+  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 (
+    <Box flexDirection="column" paddingLeft={2} flexGrow={1}>
+      <Text color={colors.text} bold>/{command.name}</Text>
+
+      <Box marginTop={1}>
+        <Text color={colors.textDim}>
+          from {command.skillName}
+          {skillInstalled && <Text color={colors.success}> · via skill</Text>}
+          {!skillInstalled && installed && <Text color={colors.success}> · installed</Text>}
+        </Text>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={colors.textMuted}>{command.description}</Text>
+      </Box>
+
+      {command.usage.length > 0 && (
+        <Box flexDirection="column" marginTop={1}>
+          <Text color={colors.textDim}>Usage:</Text>
+          {command.usage.map((u, i) => (
+            <Text key={i} color={colors.textMuted}>
+              {'  '}{u}
+            </Text>
+          ))}
+        </Box>
+      )}
+
+      {isFocused && (
+        <Box flexDirection="row" marginTop={1}>
+          {actions.map((action, index) => (
+            <Text
+              key={action.id}
+              backgroundColor={
+                selectedAction === index
+                  ? action.variant === 'danger'
+                    ? colors.error
+                    : colors.primary
+                  : colors.bgSelected
+              }
+              color={selectedAction === index ? '#ffffff' : colors.textMuted}
+              bold={selectedAction === index}
+            >
+              {' '}{action.label}{' '}
+            </Text>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+function AgentItem({ agent, isSelected }: { agent: AgentManifest; isSelected: boolean }) {
+  const statusDisplay = agent.status === 'alpha' ? '[alpha]' : agent.status === 'beta' ? '[beta]' : '';
+
+  return (
+    <Box paddingX={1}>
+      <Text>
+        <Text color={colors.textDim}>{isSelected ? '>' : ' '} </Text>
+        <Text color={isSelected ? colors.text : colors.textMuted}>{agent.name}</Text>
+        <Text color={colors.textDim}> v{agent.version}</Text>
+        {statusDisplay && <Text color={colors.textDim}> {statusDisplay}</Text>}
+      </Text>
+    </Box>
+  );
+}
+
+function AgentDetails({
+  agent,
+  isFocused,
+  selectedAction,
+}: {
+  agent: AgentManifest | null;
+  isFocused: boolean;
+  selectedAction: number;
+}) {
+  if (!agent) {
+    return (
+      <Box paddingLeft={2} flexGrow={1}>
+        <Text color={colors.textDim}>Select an agent</Text>
+      </Box>
+    );
+  }
+
+  const installed = isAgentInstalled(agent.name);
+  const 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 (
+    <Box flexDirection="column" paddingLeft={2} flexGrow={1}>
+      <Text color={colors.text} bold>{agent.name}</Text>
+
+      <Box marginTop={1}>
+        <Text color={colors.textDim}>
+          v{agent.version}
+          {statusDisplay && <Text> · {statusDisplay}</Text>}
+          {' · '}{modeDisplay}
+          {installed && <Text color={colors.success}> · installed</Text>}
+        </Text>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={colors.textMuted}>{agent.description}</Text>
+      </Box>
+
+      {agent.tools && agent.tools.length > 0 && (
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>
+            Tools: {agent.tools.join(', ')}
+          </Text>
+        </Box>
+      )}
+
+      {agent.triggers && agent.triggers.length > 0 && (
+        <Box flexDirection="column" marginTop={1}>
+          <Text color={colors.textDim}>Triggers:</Text>
+          {agent.triggers.slice(0, 3).map((trigger, i) => (
+            <Text key={i} color={colors.textMuted}>
+              {'  '}&quot;{trigger}&quot;
+            </Text>
+          ))}
+        </Box>
+      )}
+
+      {isFocused && (
+        <Box flexDirection="row" marginTop={1}>
+          {actions.map((action, index) => (
+            <Text
+              key={action.id}
+              backgroundColor={
+                selectedAction === index
+                  ? action.variant === 'danger'
+                    ? colors.error
+                    : colors.primary
+                  : colors.bgSelected
+              }
+              color={selectedAction === index ? '#ffffff' : colors.textMuted}
+              bold={selectedAction === index}
+            >
+              {' '}{action.label}{' '}
+            </Text>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+function MarkdownLine({ line, inCodeBlock }: { line: string; inCodeBlock: boolean }) {
+  // Code block content
+  if (inCodeBlock) {
+    return <Text color="#a5d6ff">{line || ' '}</Text>;
+  }
+
+  // Code block delimiter
+  if (line.startsWith('```')) {
+    return <Text color={colors.textDim}>{line}</Text>;
+  }
+
+  // Headers
+  if (line.startsWith('# ')) {
+    return <Text color={colors.text} bold>{line.slice(2)}</Text>;
+  }
+  if (line.startsWith('## ')) {
+    return <Text color={colors.text} bold>{line.slice(3)}</Text>;
+  }
+  if (line.startsWith('### ')) {
+    return <Text color="#c9d1d9" bold>{line.slice(4)}</Text>;
+  }
+
+  // YAML frontmatter delimiter
+  if (line === '---') {
+    return <Text color={colors.textDim}>{line}</Text>;
+  }
+
+  // List items
+  if (line.match(/^[\s]*[-*]\s/)) {
+    return <Text color={colors.textMuted}>{line}</Text>;
+  }
+
+  // Blockquotes
+  if (line.startsWith('>')) {
+    return <Text color="#8b949e" italic>{line}</Text>;
+  }
+
+  // Table rows
+  if (line.includes('|')) {
+    return <Text color={colors.textMuted}>{line}</Text>;
+  }
+
+  // Default
+  return <Text color={colors.textMuted}>{line || ' '}</Text>;
+}
+
+function ReadmeViewer({
+  title,
+  content,
+  onClose,
+}: {
+  title: string;
+  content: string;
+  onClose: () => void;
+}) {
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const lines = useMemo(() => content.split('\n'), [content]);
+  const maxVisible = 20;
+
+  // Pre-compute code block state for each line
+  const lineStates = useMemo(() => {
+    const states: boolean[] = [];
+    let inCode = false;
+    for (const line of lines) {
+      if (line.startsWith('```')) {
+        states.push(false); // Delimiter itself is not "in" code block for styling
+        inCode = !inCode;
+      } else {
+        states.push(inCode);
+      }
+    }
+    return states;
+  }, [lines]);
+
+  // Max offset: when at end, we have top indicator + (maxVisible-1) content lines
+  // So max offset is lines.length - (maxVisible - 1) = lines.length - maxVisible + 1
+  const maxOffset = Math.max(0, lines.length - maxVisible + 1);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onClose();
+      return;
+    }
+    if (key.upArrow) {
+      setScrollOffset((prev) => Math.max(0, prev - 1));
+    }
+    if (key.downArrow) {
+      setScrollOffset((prev) => Math.min(maxOffset, prev + 1));
+    }
+    if (key.pageDown || input === ' ') {
+      setScrollOffset((prev) => Math.min(maxOffset, prev + maxVisible));
+    }
+    if (key.pageUp) {
+      setScrollOffset((prev) => Math.max(0, prev - maxVisible));
+    }
+  });
+
+  // Adjust visible lines based on whether indicators are shown
+  const showTopIndicator = scrollOffset > 0;
+  // Reserve space for bottom indicator if not at end
+  const contentLines = maxVisible - (showTopIndicator ? 1 : 0);
+  const endIndex = Math.min(scrollOffset + contentLines, lines.length);
+  const showBottomIndicator = endIndex < lines.length;
+  const actualContentLines = contentLines - (showBottomIndicator ? 1 : 0);
+  const visibleLines = lines.slice(scrollOffset, scrollOffset + actualContentLines);
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Box marginBottom={1}>
+        <Text color={colors.text} bold>{title}</Text>
+        <Text color={colors.textDim}> · {lines.length} lines</Text>
+      </Box>
+
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor={colors.border}
+        paddingX={1}
+      >
+        {showTopIndicator && (
+          <Text color={colors.textDim}>↑ {scrollOffset} more lines</Text>
+        )}
+        {visibleLines.map((line, i) => (
+          <MarkdownLine key={scrollOffset + i} line={line} inCodeBlock={lineStates[scrollOffset + i]} />
+        ))}
+        {showBottomIndicator && (
+          <Text color={colors.textDim}>↓ {lines.length - scrollOffset - actualContentLines} more lines</Text>
+        )}
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={colors.textDim}>↑↓ scroll · space/pgdn page · esc back</Text>
+      </Box>
+    </Box>
+  );
+}
+
+function SettingsDetails({
+  onEditSettings,
+  isFocused,
+}: {
+  onEditSettings: () => void;
+  isFocused: boolean;
+}) {
+  const config = loadConfig();
+  const outputOptions = getOutputOptions();
+
+  return (
+    <Box flexDirection="column" paddingLeft={2} flexGrow={1}>
+      <Text color={colors.text} bold>Settings</Text>
+
+      <Box flexDirection="column" marginTop={1}>
+        <Text>
+          <Text color={colors.textDim}>AI Tool:       </Text>
+          <Text color={colors.text}>
+            {config.ai_tool === AITool.ClaudeCode ? 'Claude Code' : 'OpenCode'}
+          </Text>
+        </Text>
+        <Text>
+          <Text color={colors.textDim}>Your @mention: </Text>
+          <Text color={colors.text}>{config.user_mention}</Text>
+        </Text>
+        <Text>
+          <Text color={colors.textDim}>Output:        </Text>
+          <Text color={colors.text}>
+            {outputOptions.find((o) => o.value === config.output_preference)?.label || config.output_preference}
+          </Text>
+        </Text>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={colors.textDim}>Config: ~/.droid/config.yaml</Text>
+      </Box>
+
+      {isFocused && (
+        <Box marginTop={2}>
+          <Text backgroundColor={colors.primary} color="#ffffff" bold>
+            {' '}Edit Settings{' '}
+          </Text>
+        </Box>
+      )}
+
+      {!isFocused && (
+        <Box marginTop={2}>
+          <Text color={colors.textDim}>press enter to edit</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+interface SkillConfigScreenProps {
+  skill: SkillManifest;
+  onComplete: () => void;
+  onCancel: () => void;
+}
+
+function SkillConfigScreen({ skill, onComplete, onCancel }: SkillConfigScreenProps) {
+  const configSchema = skill.config_schema || {};
+  const configKeys = Object.keys(configSchema);
+
+  const initialOverrides = useMemo(() => loadSkillOverrides(skill.name), [skill.name]);
+
+  // Initialize values from saved overrides or defaults
+  const [values, setValues] = useState<SkillOverrides>(() => {
+    const initial: SkillOverrides = {};
+    for (const key of configKeys) {
+      const option = configSchema[key];
+      initial[key] = initialOverrides[key] ?? option.default ?? (option.type === ConfigOptionType.Boolean ? false : '');
+    }
+    return initial;
+  });
+
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [editingField, setEditingField] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState('');
+
+  const handleSave = () => {
+    saveSkillOverrides(skill.name, values);
+    onComplete();
+  };
+
+  const handleSubmitEdit = () => {
+    if (editingField) {
+      setValues((prev) => ({ ...prev, [editingField]: editValue }));
+      setEditingField(null);
+      setEditValue('');
+    }
+  };
+
+  // Handle text input for string fields
+  useInput((input, key) => {
+    if (key.escape) {
+      setEditingField(null);
+      setEditValue('');
+    }
+  }, { isActive: editingField !== null });
+
+  // Handle navigation and actions when not editing
+  useInput((input, key) => {
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    if (key.upArrow) {
+      setSelectedIndex((prev) => Math.max(0, prev - 1));
+    }
+    if (key.downArrow) {
+      // +1 for the Save button at the end
+      setSelectedIndex((prev) => Math.min(configKeys.length, prev + 1));
+    }
+
+    if (key.return) {
+      // Save button is at index === configKeys.length
+      if (selectedIndex === configKeys.length) {
+        handleSave();
+        return;
+      }
+
+      const key = configKeys[selectedIndex];
+      const option = configSchema[key];
+
+      if (option.type === ConfigOptionType.Boolean) {
+        // Toggle boolean
+        setValues((prev) => ({ ...prev, [key]: !prev[key] }));
+      } else if (option.type === ConfigOptionType.String) {
+        // Enter edit mode for string
+        setEditingField(key);
+        setEditValue(String(values[key] || ''));
+      }
+    }
+  }, { isActive: editingField === null });
+
+  if (configKeys.length === 0) {
+    return (
+      <Box flexDirection="column" padding={1}>
+        <Box marginBottom={1}>
+          <Text>
+            <Text color={colors.textDim}>[</Text>
+            <Text color={colors.primary}>●</Text>
+            <Text color={colors.textDim}> </Text>
+            <Text color={colors.primary}>●</Text>
+            <Text color={colors.textDim}>] </Text>
+            <Text color={colors.text} bold>configure {skill.name}</Text>
+          </Text>
+        </Box>
+        <Text color={colors.textMuted}>This skill has no configuration options.</Text>
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>esc to go back</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Box marginBottom={1}>
+        <Text>
+          <Text color={colors.textDim}>[</Text>
+          <Text color={colors.primary}>●</Text>
+          <Text color={colors.textDim}> </Text>
+          <Text color={colors.primary}>●</Text>
+          <Text color={colors.textDim}>] </Text>
+          <Text color={colors.text} bold>configure {skill.name}</Text>
+        </Text>
+      </Box>
+
+      <Box flexDirection="column">
+        {configKeys.map((key, index) => {
+          const option = configSchema[key];
+          const isSelected = selectedIndex === index;
+          const isEditing = editingField === key;
+
+          return (
+            <Box key={key} flexDirection="column" marginBottom={1}>
+              <Text>
+                <Text color={colors.textDim}>{isSelected ? '>' : ' '} </Text>
+                <Text color={isSelected ? colors.text : colors.textMuted}>{key}</Text>
+              </Text>
+              <Text color={colors.textDim}>    {option.description}</Text>
+              <Box>
+                <Text color={colors.textDim}>    </Text>
+                {option.type === ConfigOptionType.Boolean ? (
+                  <Text color={colors.text}>
+                    [{values[key] ? 'x' : ' '}] {values[key] ? 'enabled' : 'disabled'}
+                  </Text>
+                ) : isEditing ? (
+                  <Box>
+                    <Text color={colors.textDim}>{'> '}</Text>
+                    <TextInput
+                      value={editValue}
+                      onChange={setEditValue}
+                      onSubmit={handleSubmitEdit}
+                    />
+                  </Box>
+                ) : (
+                  <Text color={colors.text}>{String(values[key]) || '(not set)'}</Text>
+                )}
+              </Box>
+            </Box>
+          );
+        })}
+
+        {/* Save button */}
+        <Box marginTop={1}>
+          <Text>
+            <Text color={colors.textDim}>{selectedIndex === configKeys.length ? '>' : ' '} </Text>
+            <Text
+              backgroundColor={selectedIndex === configKeys.length ? colors.primary : undefined}
+              color={selectedIndex === configKeys.length ? '#ffffff' : colors.textMuted}
+              bold={selectedIndex === configKeys.length}
+            >
+              {' '}Save{' '}
+            </Text>
+          </Text>
+        </Box>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={colors.textDim}>
+          {editingField ? 'enter save · esc cancel' : '↑↓ select · enter toggle/edit · esc back'}
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+
+function App() {
+  const { exit } = useApp();
+  const tabs: { id: Tab; label: string }[] = [
+    { id: 'skills', label: 'Skills' },
+    { id: 'commands', label: 'Commands' },
+    { id: 'agents', label: 'Agents' },
+    { id: 'settings', label: 'Settings' },
+  ];
+
+  const [activeTab, setActiveTab] = useState<Tab>('skills');
+  const [tabIndex, setTabIndex] = useState(0);
+  const [view, setView] = useState<View>('welcome');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [selectedAction, setSelectedAction] = useState(0);
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const [message, setMessage] = useState<{ text: string; type: 'success' | 'error' } | null>(null);
+  const [isEditingSettings, setIsEditingSettings] = useState(false);
+  const [readmeContent, setReadmeContent] = useState<{ title: string; content: string } | null>(null);
+
+  const MAX_VISIBLE_ITEMS = 6;
+
+  const skills = getBundledSkills();
+  const commands = getCommandsFromSkills();
+  const agents = getBundledAgents();
+
+  useInput((input, key) => {
+    if (message) setMessage(null);
+
+    if (view === 'welcome') return;
+
+    if (input === 'q') {
+      exit();
+      return;
+    }
+
+    if (view === 'menu') {
+      if (key.leftArrow) {
+        const newIndex = Math.max(0, tabIndex - 1);
+        setTabIndex(newIndex);
+        setActiveTab(tabs[newIndex].id);
+        setSelectedIndex(0);
+        setScrollOffset(0);
+      }
+      if (key.rightArrow) {
+        const newIndex = Math.min(tabs.length - 1, tabIndex + 1);
+        setTabIndex(newIndex);
+        setActiveTab(tabs[newIndex].id);
+        setSelectedIndex(0);
+        setScrollOffset(0);
+      }
+      if (key.upArrow) {
+        setSelectedIndex((prev) => {
+          const newIndex = Math.max(0, prev - 1);
+          // Scroll up if needed
+          if (newIndex < scrollOffset) {
+            setScrollOffset(newIndex);
+          }
+          return newIndex;
+        });
+        setSelectedAction(0);
+      }
+      if (key.downArrow) {
+        const maxIndex =
+          activeTab === 'skills' ? skills.length - 1 : activeTab === 'commands' ? commands.length - 1 : 0;
+        setSelectedIndex((prev) => {
+          const newIndex = Math.min(maxIndex, prev + 1);
+          // Scroll down if needed
+          if (newIndex >= scrollOffset + MAX_VISIBLE_ITEMS) {
+            setScrollOffset(newIndex - MAX_VISIBLE_ITEMS + 1);
+          }
+          return newIndex;
+        });
+        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) {
+          setView('detail');
+        } else if (activeTab === 'settings') {
+          setIsEditingSettings(true);
+          setView('setup');
+        }
+      }
+    } else if (view === 'detail') {
+      if (key.escape || key.backspace) {
+        setView('menu');
+        setSelectedAction(0);
+      }
+      if (key.leftArrow) {
+        setSelectedAction((prev) => Math.max(0, prev - 1));
+      }
+      if (key.rightArrow) {
+        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);
+          // 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}`,
+              type: result.success ? 'success' : 'error',
+            });
+            if (result.success) {
+              setView('menu');
+              setSelectedAction(0);
+            }
+          } else if (!installed && selectedAction === 1) {
+            // Install
+            const result = installSkill(skill.name);
+            setMessage({
+              text: result.success ? `✓ Installed ${skill.name}` : `✗ ${result.message}`,
+              type: result.success ? 'success' : 'error',
+            });
+            if (result.success) {
+              setView('menu');
+              setSelectedAction(0);
+            }
+          }
+        }
+      }
+      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 (
+      <WelcomeScreen
+        onContinue={() => {
+          // If no config exists, show setup first
+          if (!configExists()) {
+            setView('setup');
+          } else {
+            setView('menu');
+          }
+        }}
+      />
+    );
+  }
+
+  if (view === 'setup') {
+    return (
+      <SetupScreen
+        onComplete={() => {
+          setIsEditingSettings(false);
+          setView('menu');
+        }}
+        onSkip={() => {
+          setIsEditingSettings(false);
+          setView('menu');
+        }}
+        initialConfig={isEditingSettings ? loadConfig() : undefined}
+      />
+    );
+  }
+
+  if (view === 'readme' && readmeContent) {
+    return (
+      <ReadmeViewer
+        title={readmeContent.title}
+        content={readmeContent.content}
+        onClose={() => {
+          setReadmeContent(null);
+          setView('detail');
+        }}
+      />
+    );
+  }
+
+  if (view === 'configure' && selectedSkill) {
+    return (
+      <SkillConfigScreen
+        skill={selectedSkill}
+        onComplete={() => {
+          setMessage({ text: `✓ Configuration saved for ${selectedSkill.name}`, type: 'success' });
+          setView('detail');
+        }}
+        onCancel={() => {
+          setView('detail');
+        }}
+      />
+    );
+  }
+
+  return (
+    <Box flexDirection="row" padding={1}>
+      {/* Left column */}
+      <Box
+        flexDirection="column"
+        width={44}
+        borderStyle="single"
+        borderColor={colors.border}
+      >
+        {/* Header */}
+        <Box paddingX={1}>
+          <Text>
+            <Text color={colors.textDim}>[</Text>
+            <Text color={colors.primary}>●</Text>
+            <Text color={colors.textDim}> </Text>
+            <Text color={colors.primary}>●</Text>
+            <Text color={colors.textDim}>] </Text>
+            <Text color={colors.textMuted}>droid</Text>
+          </Text>
+        </Box>
+
+        {/* Tabs */}
+        <Box paddingX={1} marginTop={1}>
+          <TabBar tabs={tabs} activeTab={activeTab} />
+        </Box>
+
+        {/* List */}
+        <Box flexDirection="column" marginTop={1}>
+          {activeTab === 'skills' && (
+            <>
+              {scrollOffset > 0 && (
+                <Box paddingX={1}>
+                  <Text color={colors.textDim}>↑ {scrollOffset} more</Text>
+                </Box>
+              )}
+              {skills.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS).map((skill, index) => (
+                <SkillItem
+                  key={skill.name}
+                  skill={skill}
+                  isSelected={scrollOffset + index === selectedIndex}
+                  isActive={scrollOffset + index === selectedIndex && view === 'detail'}
+                />
+              ))}
+              {scrollOffset + MAX_VISIBLE_ITEMS < skills.length && (
+                <Box paddingX={1}>
+                  <Text color={colors.textDim}>↓ {skills.length - scrollOffset - MAX_VISIBLE_ITEMS} more</Text>
+                </Box>
+              )}
+              {skills.length > MAX_VISIBLE_ITEMS && (
+                <Box paddingX={1} marginTop={1}>
+                  <Text color={colors.textDim}>{skills.length} skills total</Text>
+                </Box>
+              )}
+            </>
+          )}
+
+          {activeTab === 'commands' && (
+            <>
+              {scrollOffset > 0 && (
+                <Box paddingX={1}>
+                  <Text color={colors.textDim}>↑ {scrollOffset} more</Text>
+                </Box>
+              )}
+              {commands.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS).map((cmd, index) => (
+                <CommandItem key={cmd.name} command={cmd} isSelected={scrollOffset + index === selectedIndex} />
+              ))}
+              {scrollOffset + MAX_VISIBLE_ITEMS < commands.length && (
+                <Box paddingX={1}>
+                  <Text color={colors.textDim}>↓ {commands.length - scrollOffset - MAX_VISIBLE_ITEMS} more</Text>
+                </Box>
+              )}
+            </>
+          )}
+
+          {activeTab === 'agents' && (
+            <>
+              {scrollOffset > 0 && (
+                <Box paddingX={1}>
+                  <Text color={colors.textDim}>↑ {scrollOffset} more</Text>
+                </Box>
+              )}
+              {agents.length === 0 ? (
+                <Box paddingX={1}>
+                  <Text color={colors.textDim}>No agents available</Text>
+                </Box>
+              ) : (
+                agents.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS).map((agent, index) => (
+                  <AgentItem key={agent.name} agent={agent} isSelected={scrollOffset + index === selectedIndex} />
+                ))
+              )}
+              {scrollOffset + MAX_VISIBLE_ITEMS < agents.length && (
+                <Box paddingX={1}>
+                  <Text color={colors.textDim}>↓ {agents.length - scrollOffset - MAX_VISIBLE_ITEMS} more</Text>
+                </Box>
+              )}
+            </>
+          )}
+
+          {activeTab === 'settings' && (
+            <Box paddingX={1}>
+              <Text color={colors.textDim}>View and edit config</Text>
+            </Box>
+          )}
+        </Box>
+
+        {/* Footer */}
+        <Box paddingX={1} marginTop={1}>
+          <Text color={colors.textDim}>
+            {view === 'menu' ? '←→ ↑↓ enter q' : '←→ enter esc q'}
+          </Text>
+        </Box>
+      </Box>
+
+      {/* Right column */}
+      {activeTab === 'skills' && (
+        <SkillDetails skill={selectedSkill} isFocused={view === 'detail'} selectedAction={selectedAction} />
+      )}
+
+      {activeTab === 'commands' && (
+        <CommandDetails command={selectedCommand} isFocused={view === 'detail'} selectedAction={selectedAction} />
+      )}
+
+      {activeTab === 'settings' && (
+        <SettingsDetails onEditSettings={() => setView('setup')} isFocused={false} />
+      )}
+
+      {activeTab === 'agents' && (
+        <AgentDetails agent={selectedAgent} isFocused={view === 'detail'} selectedAction={selectedAction} />
+      )}
+
+      {/* Message */}
+      {message && (
+        <Box position="absolute" marginTop={12}>
+          <Text color={message.type === 'success' ? colors.success : colors.error}>{message.text}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export async function tuiCommand(): Promise<void> {
+  // Enter alternate screen (fullscreen mode)
+  process.stdout.write('\x1b[?1049h');
+  process.stdout.write('\x1b[H'); // Move cursor to top-left
+
+  const { unmount, waitUntilExit } = render(<App />);
+
+  await waitUntilExit();
+
+  // Leave alternate screen
+  process.stdout.write('\x1b[?1049l');
+}