@orderful/droid 0.14.0 → 0.16.0

package/dist/tools/droid/skills/droid/SKILL.md

@@ -4,6 +4,7 @@ description: "Core droid meta-skill for update awareness and tool discovery. Che
 globs:
   - "**/*"
 alwaysApply: false
+allowed-tools: Bash
 ---
 
 # Droid

package/dist/tools/project/skills/project/SKILL.md

@@ -4,6 +4,7 @@ description: "Manage project context files for persistent AI memory across sessi
 globs:
   - "**/PROJECT.md"
 alwaysApply: false
+allowed-tools: Read, Write, Glob, Grep
 ---
 
 # Project Skill

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orderful/droid",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "AI workflow toolkit for sharing skills, commands, and agents across the team",
   "type": "module",
   "bin": {
@@ -8,12 +8,12 @@
   },
   "main": "dist/index.js",
   "scripts": {
-    "build": "tsc && cp -r src/tools dist/",
+    "build": "eslint src --ext .ts,.tsx && tsc && cp -r src/tools dist/",
     "dev": "tsc --watch",
     "start": "bun dist/bin/droid.js",
     "test": "bun test src/",
     "test:watch": "bun test src/ --watch",
-    "lint": "eslint src --ext .ts",
+    "lint": "eslint src --ext .ts,.tsx",
     "format": "prettier --write 'src/**/*.ts'",
     "changeset": "changeset",
     "version": "changeset version",

package/src/bin/droid.ts

@@ -1,14 +1,14 @@
 #!/usr/bin/env node
 
 import { program } from 'commander';
-import { setupCommand } from '../commands/setup.js';
-import { configCommand } from '../commands/config.js';
-import { skillsCommand } from '../commands/skills.js';
-import { installCommand } from '../commands/install.js';
-import { uninstallCommand } from '../commands/uninstall.js';
-import { updateCommand } from '../commands/update.js';
-import { tuiCommand } from '../commands/tui.js';
-import { getVersion } from '../lib/version.js';
+import { setupCommand } from '../commands/setup';
+import { configCommand } from '../commands/config';
+import { skillsCommand } from '../commands/skills';
+import { installCommand } from '../commands/install';
+import { uninstallCommand } from '../commands/uninstall';
+import { updateCommand } from '../commands/update';
+import { tuiCommand } from '../commands/tui';
+import { getVersion } from '../lib/version';
 
 const version = getVersion();
 

package/src/commands/config.ts

@@ -6,7 +6,7 @@ import {
   getConfigValue,
   setConfigValue,
   configExists,
-} from '../lib/config.js';
+} from '../lib/config';
 
 interface ConfigOptions {
   edit?: boolean;

package/src/commands/install.ts

@@ -1,7 +1,7 @@
 import chalk from 'chalk';
-import { installSkill } from '../lib/skills.js';
-import { getBundledTools, isToolInstalled } from '../lib/tools.js';
-import { promptForSkillConfig } from '../lib/skill-config.js';
+import { installSkill } from '../lib/skills';
+import { getBundledTools, isToolInstalled } from '../lib/tools';
+import { promptForSkillConfig } from '../lib/skill-config';
 
 export async function installCommand(toolName: string): Promise<void> {
   // Check if tool exists

package/src/commands/setup.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, mock, spyOn } from 'bun:te
 import { existsSync, mkdirSync, rmSync, readFileSync, writeFileSync } from 'fs';
 import { join } from 'path';
 import { tmpdir } from 'os';
-import { Platform } from '../lib/types.js';
+import { Platform } from '../lib/types';
 
 // We need to mock homedir() before importing the module
 // Create a test directory that will act as our fake home

package/src/commands/setup.ts

@@ -4,9 +4,9 @@ import { execSync } from 'child_process';
 import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
 import { join } from 'path';
 import { homedir } from 'os';
-import { loadConfig, saveConfig, configExists } from '../lib/config.js';
-import { getBundledSkills } from '../lib/skills.js';
-import { Platform, BuiltInOutput, type DroidConfig, type OutputPreference } from '../lib/types.js';
+import { loadConfig, saveConfig, configExists } from '../lib/config';
+import { getBundledSkills } from '../lib/skills';
+import { Platform, BuiltInOutput, type DroidConfig, type OutputPreference } from '../lib/types';
 
 /**
  * Permissions droid needs to operate without constant prompts

package/src/commands/skills.ts

@@ -1,9 +1,9 @@
 import inquirer from 'inquirer';
 import chalk from 'chalk';
-import { installSkill, uninstallSkill } from '../lib/skills.js';
-import { getBundledTools, isToolInstalled, getInstalledToolVersion } from '../lib/tools.js';
-import { promptForSkillConfig } from '../lib/skill-config.js';
-import { SkillStatus, type ToolManifest } from '../lib/types.js';
+import { installSkill, uninstallSkill } from '../lib/skills';
+import { getBundledTools, isToolInstalled, getInstalledToolVersion } from '../lib/tools';
+import { promptForSkillConfig } from '../lib/skill-config';
+import { SkillStatus, type ToolManifest } from '../lib/types';
 
 function formatToolChoice(tool: ToolManifest): string {
   const installed = isToolInstalled(tool.name);

package/src/commands/tui/components/Badge.tsx

@@ -0,0 +1,86 @@
+import { Box, Text } from 'ink';
+import type { ComponentType } from '../types';
+import { colors } from '../constants';
+import type { ToolManifest } from '../../../lib/types';
+
+export function Badge({
+  type,
+  label,
+  isSelected = false,
+  dimmed = false,
+}: {
+  type: ComponentType;
+  label?: string;
+  isSelected?: boolean;
+  dimmed?: boolean;
+}) {
+  const color = colors[type];
+  const displayLabel = label || type.charAt(0).toUpperCase() + type.slice(1);
+
+  if (dimmed) {
+    return (
+      <Text color={colors.textDim}>{displayLabel}</Text>
+    );
+  }
+
+  return (
+    <Text
+      backgroundColor={isSelected ? color : undefined}
+      color={isSelected ? '#000000' : color}
+      bold={isSelected}
+    >
+      {isSelected ? ` ${displayLabel} ` : displayLabel}
+    </Text>
+  );
+}
+
+export function ComponentBadges({ tool, compact = false }: { tool: ToolManifest; compact?: boolean }) {
+  const hasSkills = tool.includes.skills.length > 0;
+  const hasCommands = tool.includes.commands.length > 0;
+  const hasAgents = tool.includes.agents.length > 0;
+
+  if (compact) {
+    // Show colored squares for list view (single char with spacing)
+    const parts: string[] = [];
+    if (hasSkills) parts.push('skill');
+    if (hasCommands) parts.push('command');
+    if (hasAgents) parts.push('agent');
+
+    return (
+      <Box flexDirection="row">
+        {parts.map((type, i) => (
+          <Text key={type}>
+            <Text backgroundColor={colors[type as ComponentType]}> </Text>
+            {i < parts.length - 1 && ' '}
+          </Text>
+        ))}
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="row">
+      {hasSkills && (
+        <Box marginRight={1}>
+          <Text backgroundColor={colors.skill} color="#000000" bold>
+            {` ${tool.includes.skills.length} skill${tool.includes.skills.length > 1 ? 's' : ''} `}
+          </Text>
+        </Box>
+      )}
+      {hasCommands && (
+        <Box marginRight={1}>
+          <Text backgroundColor={colors.command} color="#000000" bold>
+            {` ${tool.includes.commands.length} cmd${tool.includes.commands.length > 1 ? 's' : ''} `}
+          </Text>
+        </Box>
+      )}
+      {hasAgents && (
+        <Box marginRight={1}>
+          <Text backgroundColor={colors.agent} color="#000000" bold>
+            {` ${tool.includes.agents.length} agent${tool.includes.agents.length > 1 ? 's' : ''} `}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/commands/tui/components/Markdown.tsx

@@ -0,0 +1,48 @@
+import { Text } from 'ink';
+import { colors } from '../constants';
+
+export 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>;
+}

package/src/commands/tui/components/SettingsDetails.tsx

@@ -0,0 +1,70 @@
+import { Box, Text } from 'ink';
+import { loadConfig, getAutoUpdateConfig } from '../../../lib/config';
+import { Platform } from '../../../lib/types';
+import { colors } from '../constants';
+
+export interface SettingsDetailsProps {
+  isFocused: boolean;
+}
+
+export function SettingsDetails({
+  isFocused,
+}: SettingsDetailsProps) {
+  const config = loadConfig();
+  const autoUpdateConfig = getAutoUpdateConfig();
+
+  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}>Platform:           </Text>
+          <Text color={colors.text}>
+            {config.platform === Platform.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}>Auto-update tools:  </Text>
+          <Text color={colors.text}>{autoUpdateConfig.tools ? 'enabled' : 'disabled'}</Text>
+        </Text>
+        <Text>
+          <Text color={colors.textDim}>Auto-update app:    </Text>
+          <Text color={colors.text}>{autoUpdateConfig.app ? 'enabled' : 'disabled'}</Text>
+        </Text>
+      </Box>
+
+      <Box marginTop={2}>
+        <Text color={colors.textDim}>Config: ~/.droid/config.yaml</Text>
+      </Box>
+
+      {isFocused && (
+        <Box marginTop={2}>
+          <Text
+            backgroundColor={colors.primary}
+            color="#ffffff"
+            bold
+          >
+            {' '}Edit{' '}
+          </Text>
+        </Box>
+      )}
+
+      {isFocused && (
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>enter edit · esc back</Text>
+        </Box>
+      )}
+
+      {!isFocused && (
+        <Box marginTop={2}>
+          <Text color={colors.textDim}>press enter to edit</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/commands/tui/components/TabBar.tsx

@@ -0,0 +1,26 @@
+import { Box, Text } from 'ink';
+import type { Tab } from '../types';
+import { colors } from '../constants';
+
+export interface TabBarProps {
+  tabs: { id: Tab; label: string }[];
+  activeTab: Tab;
+}
+
+export function TabBar({ tabs, activeTab }: TabBarProps) {
+  return (
+    <Box flexDirection="row" flexWrap="wrap">
+      {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}
+          wrap="truncate"
+        >
+          {' '}{tab.label}{' '}
+        </Text>
+      ))}
+    </Box>
+  );
+}

package/src/commands/tui/components/ToolDetails.tsx

@@ -0,0 +1,117 @@
+import { Box, Text } from 'ink';
+import { isToolInstalled, getInstalledToolVersion, getToolUpdateStatus } from '../../../lib/tools';
+import type { ToolManifest } from '../../../lib/types';
+import { colors } from '../constants';
+import { ComponentBadges } from './Badge';
+
+export interface ToolDetailsProps {
+  tool: ToolManifest | null;
+  isFocused: boolean;
+  selectedAction: number;
+}
+
+export function ToolDetails({
+  tool,
+  isFocused,
+  selectedAction,
+}: ToolDetailsProps) {
+  if (!tool) {
+    return (
+      <Box paddingLeft={2} flexGrow={1}>
+        <Text color={colors.textDim}>Select a tool</Text>
+      </Box>
+    );
+  }
+
+  const installed = isToolInstalled(tool.name);
+  const installedVersion = getInstalledToolVersion(tool.name);
+  const updateStatus = getToolUpdateStatus(tool.name);
+  const isSystemTool = (tool as ToolManifest & { system?: boolean }).system === true;
+
+  const actions = installed
+    ? [
+        { id: 'explore', label: 'Explore', variant: 'default' },
+        ...(updateStatus.hasUpdate
+          ? [{ id: 'update', label: `Update (${updateStatus.bundledVersion})`, variant: 'primary' }]
+          : []),
+        { id: 'configure', label: 'Configure', variant: 'default' },
+        // System tools can't be uninstalled
+        ...(!isSystemTool ? [{ id: 'uninstall', label: 'Uninstall', variant: 'danger' }] : []),
+      ]
+    : [
+        { id: 'explore', label: 'Explore', variant: 'default' },
+        // System tools auto-install, but show Install for manual trigger if needed
+        { id: 'install', label: 'Install', variant: 'primary' },
+      ];
+
+  return (
+    <Box flexDirection="column" paddingLeft={2} flexGrow={1}>
+      <Text color={colors.text} bold>{tool.name}</Text>
+
+      <Box marginTop={1}>
+        <Text color={colors.textDim}>
+          {tool.version}
+          {tool.status && ` · ${tool.status}`}
+          {installed && <Text color={colors.success}> · installed</Text>}
+          {updateStatus.hasUpdate && (
+            <Text color={colors.primary}> · update ({installedVersion} → {updateStatus.bundledVersion})</Text>
+          )}
+        </Text>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={colors.textMuted}>{tool.description}</Text>
+      </Box>
+
+      {/* Colored component badges */}
+      <Box flexDirection="column" marginTop={1}>
+        <Text color={colors.textDim}>Includes:</Text>
+        <Box marginTop={1}>
+          <ComponentBadges tool={tool} />
+        </Box>
+        {/* Show names below badges */}
+        <Box flexDirection="column" marginTop={1} marginLeft={1}>
+          {tool.includes.skills.length > 0 && (
+            <Text>
+              <Text color={colors.skill}>Skills: </Text>
+              <Text color={colors.textMuted}>{tool.includes.skills.map(s => s.name).join(', ')}</Text>
+            </Text>
+          )}
+          {tool.includes.commands.length > 0 && (
+            <Text>
+              <Text color={colors.command}>Commands: </Text>
+              <Text color={colors.textMuted}>{tool.includes.commands.map(c => `/${c}`).join(', ')}</Text>
+            </Text>
+          )}
+          {tool.includes.agents.length > 0 && (
+            <Text>
+              <Text color={colors.agent}>Agents: </Text>
+              <Text color={colors.textMuted}>{tool.includes.agents.join(', ')}</Text>
+            </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>
+  );
+}

package/src/commands/tui/components/ToolItem.tsx

@@ -0,0 +1,39 @@
+import { Box, Text } from 'ink';
+import { isToolInstalled, getInstalledToolVersion, getToolUpdateStatus } from '../../../lib/tools';
+import type { ToolManifest } from '../../../lib/types';
+import { colors } from '../constants';
+
+export interface ToolItemProps {
+  tool: ToolManifest;
+  isSelected: boolean;
+  isActive: boolean;
+  wasAutoUpdated?: boolean;
+}
+
+export function ToolItem({
+  tool,
+  isSelected,
+  isActive,
+  wasAutoUpdated,
+}: ToolItemProps) {
+  const installed = isToolInstalled(tool.name);
+  const installedVersion = getInstalledToolVersion(tool.name);
+  const updateStatus = getToolUpdateStatus(tool.name);
+
+  return (
+    <Box paddingX={1} backgroundColor={isActive ? colors.bgSelected : undefined}>
+      <Text wrap="truncate">
+        <Text color={colors.textDim}>{isSelected ? '>' : ' '} </Text>
+        <Text color={isSelected || isActive ? colors.text : colors.textMuted}>{tool.name}</Text>
+        {installed && installedVersion && <Text color={colors.textDim}> v{installedVersion}</Text>}
+        {installed && <Text color={colors.success}> ✓</Text>}
+        {wasAutoUpdated && <Text color={colors.success}> ↑</Text>}
+        {updateStatus.hasUpdate && !wasAutoUpdated && <Text color={colors.primary}> ↑</Text>}
+        <Text> </Text>
+        {tool.includes.skills.length > 0 && <Text color={colors.skill}>● </Text>}
+        {tool.includes.commands.length > 0 && <Text color={colors.command}>● </Text>}
+        {tool.includes.agents.length > 0 && <Text color={colors.agent}>●</Text>}
+      </Text>
+    </Box>
+  );
+}

package/src/commands/tui/constants.ts

@@ -0,0 +1,17 @@
+export const colors = {
+  primary: '#6366f1',
+  bgSelected: '#2d2d2d',
+  border: '#3a3a3a',
+  text: '#e8e8e8',
+  textMuted: '#999999',
+  textDim: '#6a6a6a',
+  success: '#4ade80',
+  error: '#f87171',
+  // Component type badges
+  skill: '#ec4899',     // pink/magenta
+  command: '#22d3ee',   // cyan
+  agent: '#fbbf24',     // yellow/amber
+} as const;
+
+export const MAX_VISIBLE_ITEMS = 6;
+export const MAX_VISIBLE_CONFIG_ITEMS = 4; // Each config item takes ~3 lines

package/src/commands/tui/hooks/useAppUpdate.ts

@@ -0,0 +1,67 @@
+import { useState, useMemo } from 'react';
+import { useApp } from 'ink';
+import { getUpdateInfo, runUpdate, type UpdateInfo } from '../../../lib/version';
+import { setAutoUpdateConfig } from '../../../lib/config';
+
+export interface UseAppUpdateOptions {
+  onUpdateSuccess: (message: string) => void;
+  onUpdateFailure: (error: string) => void;
+}
+
+export interface UseAppUpdateResult {
+  updateInfo: UpdateInfo;
+  isUpdating: boolean;
+  handleUpdate: () => void;
+  handleAlwaysUpdate: () => void;
+}
+
+export function useAppUpdate({ onUpdateSuccess, onUpdateFailure }: UseAppUpdateOptions): UseAppUpdateResult {
+  const { exit } = useApp();
+  const [isUpdating, setIsUpdating] = useState(false);
+
+  const updateInfo = useMemo(() => getUpdateInfo(), []);
+
+  const handleUpdate = () => {
+    setIsUpdating(true);
+    // Run update in next tick to allow UI to show "Updating..."
+    setTimeout(() => {
+      const result = runUpdate();
+      if (result.success) {
+        // Build exit message with ANSI colors
+        const blue = '\x1b[38;2;99;102;241m'; // #6366f1
+        const dim = '\x1b[38;2;106;106;106m';
+        const reset = '\x1b[0m';
+        const message = `
+${dim}────────────────────────────────────────────────────────${reset}
+
+    ${dim}╔═════╗${reset}
+    ${dim}║${reset} ${blue}●${reset} ${blue}●${reset} ${dim}║${reset}   ${blue}"It's quite possible this system${reset}
+    ${dim}╚═╦═╦═╝${reset}    ${blue}is now fully operational."${reset}
+
+             Run ${blue}droid${reset} to start the new version.
+
+${dim}────────────────────────────────────────────────────────${reset}
+`;
+        onUpdateSuccess(message);
+        exit();
+      } else {
+        setIsUpdating(false);
+        onUpdateFailure(result.message);
+      }
+    }, 100);
+  };
+
+  const handleAlwaysUpdate = () => {
+    // Enable auto-update for app in config
+    setAutoUpdateConfig({ app: true });
+    // Then run the update
+    handleUpdate();
+  };
+
+  return {
+    updateInfo,
+    isUpdating,
+    handleUpdate,
+    handleAlwaysUpdate,
+  };
+}