@orderful/droid 0.15.0 → 0.16.1

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,
+  };
+}

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

@@ -0,0 +1,110 @@
+import { useState, useCallback } from 'react';
+import {
+  getBundledTools,
+  isToolInstalled,
+  getToolUpdateStatus,
+  getToolsWithUpdates,
+  type ToolUpdateInfo,
+} from '../../../lib/tools';
+import { installSkill, updateSkill } from '../../../lib/skills';
+import { getAutoUpdateConfig, setAutoUpdateConfig } from '../../../lib/config';
+import type { ToolManifest } from '../../../lib/types';
+
+export interface UseToolUpdatesOptions {
+  onUpdateComplete: (result: { successCount: number; failCount: number; updatedNames: string[]; silent: boolean }) => void;
+}
+
+export interface UseToolUpdatesResult {
+  toolUpdates: ToolUpdateInfo[];
+  isUpdatingTools: boolean;
+  autoUpdatedTools: string[];
+  checkForUpdates: () => { updates: ToolUpdateInfo[]; shouldAutoUpdate: boolean };
+  updateAllTools: (updates?: ToolUpdateInfo[], silent?: boolean) => void;
+  enableAutoUpdateAndUpdate: () => void;
+}
+
+export function useToolUpdates({ onUpdateComplete }: UseToolUpdatesOptions): UseToolUpdatesResult {
+  const [toolUpdates, setToolUpdates] = useState<ToolUpdateInfo[]>([]);
+  const [isUpdatingTools, setIsUpdatingTools] = useState(false);
+  const [autoUpdatedTools, setAutoUpdatedTools] = useState<string[]>([]);
+
+  const tools = getBundledTools();
+
+  // Ensure system tools are installed/updated (bypasses auto-update settings)
+  const ensureSystemTools = useCallback(() => {
+    const systemTools = tools.filter(t => (t as ToolManifest & { system?: boolean }).system === true);
+
+    for (const systemTool of systemTools) {
+      const installed = isToolInstalled(systemTool.name);
+      const updateStatus = getToolUpdateStatus(systemTool.name);
+
+      if (!installed || updateStatus.hasUpdate) {
+        const primarySkill = systemTool.includes.skills.find(s => s.required)?.name || systemTool.name;
+        installSkill(primarySkill);
+      }
+    }
+  }, [tools]);
+
+  // Check for updates, returns info for caller to decide what to do
+  const checkForUpdates = useCallback(() => {
+    ensureSystemTools();
+    const updates = getToolsWithUpdates();
+    setToolUpdates(updates);
+
+    const autoUpdateConfig = getAutoUpdateConfig();
+    return {
+      updates,
+      shouldAutoUpdate: autoUpdateConfig.tools && updates.length > 0,
+    };
+  }, [ensureSystemTools]);
+
+  // Update all tools
+  const updateAllTools = useCallback((updates: ToolUpdateInfo[] = toolUpdates, silent = false) => {
+    if (!silent) {
+      setIsUpdatingTools(true);
+    }
+
+    setTimeout(() => {
+      let successCount = 0;
+      let failCount = 0;
+      const updatedNames: string[] = [];
+
+      for (const tool of updates) {
+        const toolManifest = tools.find(t => t.name === tool.name);
+        if (toolManifest) {
+          const primarySkill = toolManifest.includes.skills.find(s => s.required)?.name || toolManifest.name;
+          const result = updateSkill(primarySkill);
+          if (result.success) {
+            successCount++;
+            updatedNames.push(tool.name);
+          } else {
+            failCount++;
+          }
+        }
+      }
+
+      setIsUpdatingTools(false);
+
+      if (silent && updatedNames.length > 0) {
+        setAutoUpdatedTools(updatedNames);
+      }
+
+      onUpdateComplete({ successCount, failCount, updatedNames, silent });
+    }, 100);
+  }, [toolUpdates, tools, onUpdateComplete]);
+
+  // Enable auto-update and run updates
+  const enableAutoUpdateAndUpdate = useCallback(() => {
+    setAutoUpdateConfig({ tools: true });
+    updateAllTools();
+  }, [updateAllTools]);
+
+  return {
+    toolUpdates,
+    isUpdatingTools,
+    autoUpdatedTools,
+    checkForUpdates,
+    updateAllTools,
+    enableAutoUpdateAndUpdate,
+  };
+}

package/src/commands/tui/types.ts

@@ -0,0 +1,4 @@
+export type Tab = 'tools' | 'settings';
+export type View = 'welcome' | 'tool-updates' | 'setup' | 'menu' | 'detail' | 'configure' | 'readme' | 'explorer';
+export type SetupStep = 'platform' | 'user_mention' | 'auto_update' | 'confirm';
+export type ComponentType = 'skill' | 'command' | 'agent';

package/src/commands/tui/views/ReadmeViewer.tsx

@@ -0,0 +1,93 @@
+import { Box, Text, useInput } from 'ink';
+import { useState, useMemo } from 'react';
+import { colors } from '../constants';
+import { MarkdownLine } from '../components/Markdown';
+
+export interface ReadmeViewerProps {
+  title: string;
+  content: string;
+  onClose: () => void;
+}
+
+export function ReadmeViewer({ title, content, onClose }: ReadmeViewerProps) {
+  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>
+  );
+}

package/src/commands/tui/views/SetupScreen.tsx

@@ -0,0 +1,242 @@
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { useState } from 'react';
+import { colors } from '../constants';
+import type { SetupStep } from '../types';
+import { Platform, BuiltInOutput, type DroidConfig } from '../../../lib/types';
+import { loadConfig, saveConfig, getAutoUpdateConfig, setAutoUpdateConfig } from '../../../lib/config';
+import { configurePlatformPermissions } from '../../setup';
+
+export interface SetupScreenProps {
+  onComplete: () => void;
+  onSkip: () => void;
+  initialConfig?: DroidConfig;
+}
+
+const platformOptions = [
+  { label: 'Claude Code', value: Platform.ClaudeCode },
+  { label: 'OpenCode', value: Platform.OpenCode },
+];
+
+export function SetupScreen({ onComplete, onSkip, initialConfig }: SetupScreenProps) {
+  const [step, setStep] = useState<SetupStep>('platform');
+  const [platform, setPlatform] = useState<Platform>(
+    initialConfig?.platform || Platform.ClaudeCode
+  );
+  const [userMention, setUserMention] = useState(initialConfig?.user_mention || '@user');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+
+  // Auto-update state
+  const existingAutoUpdate = getAutoUpdateConfig();
+  const [autoUpdateTools, setAutoUpdateTools] = useState(existingAutoUpdate.tools);
+  const [autoUpdateApp, setAutoUpdateApp] = useState(existingAutoUpdate.app);
+  const [autoUpdateSelectedIndex, setAutoUpdateSelectedIndex] = useState(0);
+
+  const steps: SetupStep[] = ['platform', 'user_mention', 'auto_update', 'confirm'];
+  const stepIndex = steps.indexOf(step);
+  const totalSteps = steps.length - 1; // Don't count confirm as a step
+
+  const handleUserMentionSubmit = () => {
+    // Auto-add @ prefix if missing
+    const mention = userMention.startsWith('@') ? userMention : `@${userMention}`;
+    setUserMention(mention);
+    setError(null);
+    setStep('auto_update');
+    setAutoUpdateSelectedIndex(0);
+  };
+
+  // Handle escape during text input (only intercept escape, nothing else)
+  useInput((input, key) => {
+    if (key.escape) {
+      setStep('platform');
+      setSelectedIndex(0);
+    }
+  }, { isActive: step === 'user_mention' });
+
+  // Handle all input for non-text-input steps
+  useInput((input, key) => {
+    if (key.escape) {
+      if (step === 'platform') {
+        onSkip();
+      } else if (step === 'auto_update') {
+        setStep('user_mention');
+      } else if (step === 'confirm') {
+        setStep('auto_update');
+        setAutoUpdateSelectedIndex(0);
+      }
+      return;
+    }
+
+    if (step === 'platform') {
+      if (key.upArrow) setSelectedIndex((prev) => Math.max(0, prev - 1));
+      if (key.downArrow) setSelectedIndex((prev) => Math.min(platformOptions.length - 1, prev + 1));
+      if (key.return) {
+        setPlatform(platformOptions[selectedIndex].value);
+        setStep('user_mention');
+      }
+    } else if (step === 'auto_update') {
+      // 0 = auto-update tools, 1 = auto-update app, 2 = next button
+      if (key.upArrow) setAutoUpdateSelectedIndex((prev) => Math.max(0, prev - 1));
+      if (key.downArrow) setAutoUpdateSelectedIndex((prev) => Math.min(2, prev + 1));
+      if (key.return) {
+        if (autoUpdateSelectedIndex === 0) {
+          setAutoUpdateTools(!autoUpdateTools);
+        } else if (autoUpdateSelectedIndex === 1) {
+          setAutoUpdateApp(!autoUpdateApp);
+        } else {
+          setStep('confirm');
+        }
+      }
+    } else if (step === 'confirm') {
+      if (key.return) {
+        const existingConfig = loadConfig();
+        const config: DroidConfig = {
+          ...existingConfig,
+          platform: platform,
+          user_mention: userMention,
+          output_preference: BuiltInOutput.Terminal, // Default to terminal
+        };
+        saveConfig(config);
+        setAutoUpdateConfig({ tools: autoUpdateTools, app: autoUpdateApp });
+        configurePlatformPermissions(platform);
+        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 === 'platform') {
+    return (
+      <Box flexDirection="column" padding={1}>
+        {renderHeader()}
+        <Text color={colors.text}>Which platform are you using?</Text>
+        <Box flexDirection="column" marginTop={1}>
+          {platformOptions.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 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 === 'auto_update') {
+    return (
+      <Box flexDirection="column" padding={1}>
+        {renderHeader()}
+        <Text color={colors.text}>Configure auto-update behaviour</Text>
+        <Box flexDirection="column" marginTop={1}>
+          <Box>
+            <Text>
+              <Text color={colors.textDim}>{autoUpdateSelectedIndex === 0 ? '>' : ' '} </Text>
+              <Text color={autoUpdateSelectedIndex === 0 ? colors.text : colors.textMuted}>
+                [{autoUpdateTools ? 'x' : ' '}] Auto-update tools
+              </Text>
+            </Text>
+          </Box>
+          <Text color={colors.textDim}>    Update tools automatically when droid starts</Text>
+          <Box marginTop={1}>
+            <Text>
+              <Text color={colors.textDim}>{autoUpdateSelectedIndex === 1 ? '>' : ' '} </Text>
+              <Text color={autoUpdateSelectedIndex === 1 ? colors.text : colors.textMuted}>
+                [{autoUpdateApp ? 'x' : ' '}] Auto-update app
+              </Text>
+            </Text>
+          </Box>
+          <Text color={colors.textDim}>    Update droid automatically when a new version is available</Text>
+        </Box>
+        <Box marginTop={2}>
+          <Text
+            backgroundColor={autoUpdateSelectedIndex === 2 ? colors.primary : colors.bgSelected}
+            color={autoUpdateSelectedIndex === 2 ? '#ffffff' : colors.textMuted}
+            bold={autoUpdateSelectedIndex === 2}
+          >
+            {' '}Next{' '}
+          </Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>↑↓ select · enter toggle/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}>Platform:          </Text>
+          <Text color={colors.text}>{platform === Platform.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}>Auto-update tools: </Text>
+          <Text color={colors.text}>{autoUpdateTools ? 'enabled' : 'disabled'}</Text>
+        </Text>
+        <Text>
+          <Text color={colors.textDim}>Auto-update app:   </Text>
+          <Text color={colors.text}>{autoUpdateApp ? 'enabled' : 'disabled'}</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>
+  );
+}