@orderful/droid 0.3.0 → 0.4.0

package/src/commands/tui.tsx

@@ -11,14 +11,18 @@ import {
   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';
+type View = 'welcome' | 'setup' | 'menu' | 'detail' | 'configure' | 'readme';
 type SetupStep = 'ai_tool' | 'user_mention' | 'output_preference' | 'confirm';
 
 const colors = {
@@ -444,10 +448,14 @@ function SkillDetails({
 
   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 (
     <Box flexDirection="column" paddingLeft={2} flexGrow={1}>
@@ -519,7 +527,15 @@ function SkillDetails({
   );
 }
 
-function CommandDetails({ command }: { command: Command | null }) {
+function CommandDetails({
+  command,
+  isFocused,
+  selectedAction,
+}: {
+  command: Command | null;
+  isFocused: boolean;
+  selectedAction: number;
+}) {
   if (!command) {
     return (
       <Box paddingLeft={2} flexGrow={1}>
@@ -528,7 +544,21 @@ function CommandDetails({ command }: { command: Command | null }) {
     );
   }
 
-  const installed = isSkillInstalled(command.skillName);
+  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}>
@@ -537,7 +567,8 @@ function CommandDetails({ command }: { command: Command | null }) {
       <Box marginTop={1}>
         <Text color={colors.textDim}>
           from {command.skillName}
-          {installed && <Text color={colors.success}> · installed</Text>}
+          {skillInstalled && <Text color={colors.success}> · via skill</Text>}
+          {!skillInstalled && installed && <Text color={colors.success}> · installed</Text>}
         </Text>
       </Box>
 
@@ -555,6 +586,270 @@ function CommandDetails({ command }: { command: Command | null }) {
           ))}
         </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>
   );
 }
@@ -807,11 +1102,13 @@ function App() {
   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);
@@ -865,6 +1162,10 @@ function App() {
       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');
@@ -879,16 +1180,39 @@ 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}`,
@@ -898,10 +1222,8 @@ function App() {
               setView('menu');
               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}`,
@@ -914,11 +1236,91 @@ 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 (
@@ -951,6 +1353,19 @@ function App() {
     );
   }
 
+  if (view === 'readme' && readmeContent) {
+    return (
+      <ReadmeViewer
+        title={readmeContent.title}
+        content={readmeContent.content}
+        onClose={() => {
+          setReadmeContent(null);
+          setView('detail');
+        }}
+      />
+    );
+  }
+
   if (view === 'configure' && selectedSkill) {
     return (
       <SkillConfigScreen
@@ -1041,9 +1456,27 @@ function App() {
           )}
 
           {activeTab === 'agents' && (
-            <Box paddingX={1}>
-              <Text color={colors.textDim}>Coming soon</Text>
-            </Box>
+            <>
+              {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' && (
@@ -1066,16 +1499,16 @@ function App() {
         <SkillDetails skill={selectedSkill} isFocused={view === 'detail'} selectedAction={selectedAction} />
       )}
 
-      {activeTab === 'commands' && <CommandDetails command={selectedCommand} />}
+      {activeTab === 'commands' && (
+        <CommandDetails command={selectedCommand} isFocused={view === 'detail'} selectedAction={selectedAction} />
+      )}
 
       {activeTab === 'settings' && (
         <SettingsDetails onEditSettings={() => setView('setup')} isFocused={false} />
       )}
 
       {activeTab === 'agents' && (
-        <Box paddingLeft={2} flexGrow={1}>
-          <Text color={colors.textDim}>Coming soon</Text>
-        </Box>
+        <AgentDetails agent={selectedAgent} isFocused={view === 'detail'} selectedAction={selectedAction} />
       )}
 
       {/* Message */}