@orderful/droid 0.15.0 → 0.16.0

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

@@ -0,0 +1,278 @@
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { useState, useMemo } from 'react';
+import { loadSkillOverrides, saveSkillOverrides } from '../../../lib/config';
+import { ConfigOptionType, type SkillManifest, type SkillOverrides } from '../../../lib/types';
+import { colors, MAX_VISIBLE_CONFIG_ITEMS } from '../constants';
+
+export interface SkillConfigScreenProps {
+  skill: SkillManifest;
+  onComplete: () => void;
+  onCancel: () => void;
+}
+
+export 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 [scrollOffset, setScrollOffset] = useState(0);
+  const [editingField, setEditingField] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState('');
+  const [editingSelect, setEditingSelect] = useState<string | null>(null);
+  const [selectOptionIndex, setSelectOptionIndex] = useState(0);
+
+  // Total items = config keys + Save button
+  const totalItems = configKeys.length + 1;
+
+  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 select field editing
+  useInput((input, key) => {
+    if (!editingSelect) return;
+    const option = configSchema[editingSelect];
+    if (!option?.options) return;
+
+    if (key.escape) {
+      setEditingSelect(null);
+      return;
+    }
+    if (key.leftArrow || key.upArrow) {
+      setSelectOptionIndex((prev) => Math.max(0, prev - 1));
+    }
+    if (key.rightArrow || key.downArrow) {
+      setSelectOptionIndex((prev) => Math.min(option.options!.length - 1, prev + 1));
+    }
+    if (key.return) {
+      setValues((prev) => ({ ...prev, [editingSelect]: option.options![selectOptionIndex] }));
+      setEditingSelect(null);
+    }
+  }, { isActive: editingSelect !== null });
+
+  // Handle navigation and actions when not editing
+  useInput((input, key) => {
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    if (key.upArrow) {
+      setSelectedIndex((prev) => {
+        const newIndex = Math.max(0, prev - 1);
+        // Scroll up if needed
+        if (newIndex < scrollOffset) {
+          setScrollOffset(newIndex);
+        }
+        return newIndex;
+      });
+    }
+    if (key.downArrow) {
+      // +1 for the Save button at the end
+      setSelectedIndex((prev) => {
+        const newIndex = Math.min(totalItems - 1, prev + 1);
+        // Scroll down if needed
+        if (newIndex >= scrollOffset + MAX_VISIBLE_CONFIG_ITEMS) {
+          setScrollOffset(newIndex - MAX_VISIBLE_CONFIG_ITEMS + 1);
+        }
+        return newIndex;
+      });
+    }
+
+    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.Select && option.options) {
+        // Enter select edit mode
+        const currentValue = String(values[key] || option.options[0]);
+        const currentIndex = option.options.indexOf(currentValue);
+        setSelectOptionIndex(currentIndex >= 0 ? currentIndex : 0);
+        setEditingSelect(key);
+      } else if (option.type === ConfigOptionType.String) {
+        // Enter edit mode for string
+        setEditingField(key);
+        setEditValue(String(values[key] || ''));
+      }
+    }
+  }, { isActive: editingField === null && editingSelect === 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>
+    );
+  }
+
+  // Calculate visible range
+  const visibleEndIndex = Math.min(scrollOffset + MAX_VISIBLE_CONFIG_ITEMS, totalItems);
+  const visibleConfigKeys = configKeys.slice(scrollOffset, Math.min(scrollOffset + MAX_VISIBLE_CONFIG_ITEMS, configKeys.length));
+  const showSaveButton = visibleEndIndex > configKeys.length || scrollOffset + MAX_VISIBLE_CONFIG_ITEMS > configKeys.length;
+  const showTopIndicator = scrollOffset > 0;
+  const showBottomIndicator = scrollOffset + MAX_VISIBLE_CONFIG_ITEMS < totalItems;
+
+  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">
+        {/* Scroll up indicator */}
+        {showTopIndicator && (
+          <Box marginBottom={1}>
+            <Text color={colors.textDim}>  ↑ {scrollOffset} more</Text>
+          </Box>
+        )}
+
+        {visibleConfigKeys.map((configKey) => {
+          const actualIndex = configKeys.indexOf(configKey);
+          const option = configSchema[configKey];
+          const isSelected = selectedIndex === actualIndex;
+          const isEditing = editingField === configKey;
+
+          return (
+            <Box key={configKey} flexDirection="column" marginBottom={1}>
+              <Text>
+                <Text color={colors.textDim}>{isSelected ? '>' : ' '} </Text>
+                <Text color={isSelected ? colors.text : colors.textMuted}>{configKey}</Text>
+              </Text>
+              <Text color={colors.textDim}>    {option.description}</Text>
+              <Box>
+                <Text color={colors.textDim}>    </Text>
+                {option.type === ConfigOptionType.Boolean ? (
+                  <Text color={colors.text}>
+                    [{values[configKey] ? 'x' : ' '}] {values[configKey] ? 'enabled' : 'disabled'}
+                  </Text>
+                ) : option.type === ConfigOptionType.Select && option.options ? (
+                  <Text color={colors.text}>
+                    {option.options.map((opt, i) => {
+                      const isCurrentValue = String(values[configKey]) === opt;
+                      const isEditingThis = editingSelect === configKey;
+                      const isHighlighted = isEditingThis && selectOptionIndex === i;
+                      return (
+                        <Text key={opt}>
+                          {i > 0 && <Text color={colors.textDim}> · </Text>}
+                          <Text
+                            color={isHighlighted ? '#ffffff' : isCurrentValue ? colors.primary : colors.textMuted}
+                            backgroundColor={isHighlighted ? colors.primary : undefined}
+                          >
+                            {isCurrentValue && !isEditingThis ? `[${opt}]` : isHighlighted ? ` ${opt} ` : opt}
+                          </Text>
+                        </Text>
+                      );
+                    })}
+                  </Text>
+                ) : isEditing ? (
+                  <Box>
+                    <Text color={colors.textDim}>{'> '}</Text>
+                    <TextInput
+                      value={editValue}
+                      onChange={setEditValue}
+                      onSubmit={handleSubmitEdit}
+                    />
+                  </Box>
+                ) : (
+                  <Text color={colors.text}>{String(values[configKey]) || '(not set)'}</Text>
+                )}
+              </Box>
+            </Box>
+          );
+        })}
+
+        {/* Save button - show if in visible range */}
+        {showSaveButton && (
+          <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>
+        )}
+
+        {/* Scroll down indicator */}
+        {showBottomIndicator && (
+          <Box marginTop={1}>
+            <Text color={colors.textDim}>  ↓ {totalItems - scrollOffset - MAX_VISIBLE_CONFIG_ITEMS} more</Text>
+          </Box>
+        )}
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={colors.textDim}>
+          {editingField
+            ? 'enter save · esc cancel'
+            : editingSelect
+              ? '←→ choose · enter select · esc cancel'
+              : '↑↓ select · enter toggle/edit · esc back'}
+        </Text>
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1,190 @@
+import { Box, Text, useInput } from 'ink';
+import { useState, useMemo } from 'react';
+import { existsSync, readFileSync } from 'fs';
+import { join } from 'path';
+import { getBundledToolsDir } from '../../../lib/tools';
+import type { ToolManifest } from '../../../lib/types';
+import { colors } from '../constants';
+import type { ComponentType } from '../types';
+
+interface ExplorerItem {
+  type: ComponentType;
+  name: string;
+  path: string;
+}
+
+export interface ToolExplorerProps {
+  tool: ToolManifest;
+  onViewSource: (title: string, content: string) => void;
+  onClose: () => void;
+}
+
+export function ToolExplorer({ tool, onViewSource, onClose }: ToolExplorerProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  // Build list of all explorable items
+  const items: ExplorerItem[] = useMemo(() => {
+    const result: ExplorerItem[] = [];
+    const toolDir = getBundledToolsDir();
+
+    // Add skills
+    for (const skill of tool.includes.skills) {
+      result.push({
+        type: 'skill',
+        name: skill.name,
+        path: join(toolDir, tool.name, 'skills', skill.name, 'SKILL.md'),
+      });
+    }
+
+    // Add commands
+    for (const cmd of tool.includes.commands) {
+      result.push({
+        type: 'command',
+        name: `/${cmd}`,
+        path: join(toolDir, tool.name, 'commands', `${cmd}.md`),
+      });
+    }
+
+    // Add agents
+    for (const agent of tool.includes.agents) {
+      result.push({
+        type: 'agent',
+        name: agent,
+        path: join(toolDir, tool.name, 'agents', agent, 'AGENT.md'),
+      });
+    }
+
+    return result;
+  }, [tool]);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onClose();
+      return;
+    }
+
+    if (key.leftArrow || key.upArrow) {
+      setSelectedIndex((prev) => Math.max(0, prev - 1));
+    }
+    if (key.rightArrow || key.downArrow) {
+      setSelectedIndex((prev) => Math.min(items.length - 1, prev + 1));
+    }
+
+    if (key.return && items.length > 0) {
+      const item = items[selectedIndex];
+      if (existsSync(item.path)) {
+        const content = readFileSync(item.path, 'utf-8');
+        onViewSource(`${tool.name} / ${item.name}`, content);
+      } else {
+        // Try YAML fallback for skills/agents
+        const yamlPath = item.path.replace('.md', '.yaml');
+        if (existsSync(yamlPath)) {
+          const content = readFileSync(yamlPath, 'utf-8');
+          onViewSource(`${tool.name} / ${item.name}`, content);
+        }
+      }
+    }
+  });
+
+  // Group items by type for display
+  const skillItems = items.filter(i => i.type === 'skill');
+  const commandItems = items.filter(i => i.type === 'command');
+  const agentItems = items.filter(i => i.type === 'agent');
+
+  const getItemIndex = (item: ExplorerItem) => items.indexOf(item);
+
+  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>{tool.name}</Text>
+        </Text>
+      </Box>
+
+      <Box marginBottom={1}>
+        <Text color={colors.textMuted}>{tool.description}</Text>
+      </Box>
+
+      {/* Skills section */}
+      {skillItems.length > 0 && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text color={colors.skill} bold>Skills</Text>
+          <Box flexDirection="row" flexWrap="wrap" marginTop={1}>
+            {skillItems.map((item) => {
+              const idx = getItemIndex(item);
+              const isSelected = selectedIndex === idx;
+              return (
+                <Box key={item.name} marginRight={1} marginBottom={1}>
+                  <Text
+                    backgroundColor={isSelected ? colors.skill : colors.bgSelected}
+                    color={isSelected ? '#000000' : colors.skill}
+                    bold={isSelected}
+                  >
+                    {` ${item.name} `}
+                  </Text>
+                </Box>
+              );
+            })}
+          </Box>
+        </Box>
+      )}
+
+      {/* Commands section */}
+      {commandItems.length > 0 && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text color={colors.command} bold>Commands</Text>
+          <Box flexDirection="row" flexWrap="wrap" marginTop={1}>
+            {commandItems.map((item) => {
+              const idx = getItemIndex(item);
+              const isSelected = selectedIndex === idx;
+              return (
+                <Box key={item.name} marginRight={1} marginBottom={1}>
+                  <Text
+                    backgroundColor={isSelected ? colors.command : colors.bgSelected}
+                    color={isSelected ? '#000000' : colors.command}
+                    bold={isSelected}
+                  >
+                    {` ${item.name} `}
+                  </Text>
+                </Box>
+              );
+            })}
+          </Box>
+        </Box>
+      )}
+
+      {/* Agents section */}
+      {agentItems.length > 0 && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text color={colors.agent} bold>Agents</Text>
+          <Box flexDirection="row" flexWrap="wrap" marginTop={1}>
+            {agentItems.map((item) => {
+              const idx = getItemIndex(item);
+              const isSelected = selectedIndex === idx;
+              return (
+                <Box key={item.name} marginRight={1} marginBottom={1}>
+                  <Text
+                    backgroundColor={isSelected ? colors.agent : colors.bgSelected}
+                    color={isSelected ? '#000000' : colors.agent}
+                    bold={isSelected}
+                  >
+                    {` ${item.name} `}
+                  </Text>
+                </Box>
+              );
+            })}
+          </Box>
+        </Box>
+      )}
+
+      <Box marginTop={1}>
+        <Text color={colors.textDim}>←→ navigate · enter view source · esc back</Text>
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1,109 @@
+import { Box, Text, useInput } from 'ink';
+import { useState } from 'react';
+import { colors } from '../constants';
+import type { ToolUpdateInfo } from '../../../lib/tools';
+
+export interface ToolUpdatePromptProps {
+  toolUpdates: ToolUpdateInfo[];
+  onUpdateAll: () => void;
+  onAlways: () => void;
+  onSkip: () => void;
+  isUpdating: boolean;
+}
+
+export function ToolUpdatePrompt({ toolUpdates, onUpdateAll, onAlways, onSkip, isUpdating }: ToolUpdatePromptProps) {
+  const [selectedButton, setSelectedButton] = useState(0);
+
+  useInput((input, key) => {
+    if (isUpdating) return;
+
+    if (key.leftArrow) {
+      setSelectedButton((prev) => Math.max(0, prev - 1));
+    }
+    if (key.rightArrow) {
+      setSelectedButton((prev) => Math.min(2, prev + 1));
+    }
+    if (key.return) {
+      if (selectedButton === 0) {
+        onUpdateAll();
+      } else if (selectedButton === 1) {
+        onAlways();
+      } else {
+        onSkip();
+      }
+    }
+    if (input === 'q') {
+      onSkip();
+    }
+  });
+
+  const buttons = [
+    { label: 'Update All', action: onUpdateAll },
+    { label: 'Always', action: onAlways },
+    { label: 'Skip', action: onSkip },
+  ];
+
+  return (
+    <Box flexDirection="column" alignItems="center" justifyContent="center" height={18}>
+      <Box
+        flexDirection="column"
+        alignItems="center"
+        borderStyle="single"
+        borderColor={colors.primary}
+        paddingX={4}
+        paddingY={1}
+      >
+        <Box flexDirection="column">
+          <Text>
+            <Text color={colors.textDim}>╔═════╗    </Text>
+            <Text color={colors.text}>Tool Updates</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}>{toolUpdates.length} tool{toolUpdates.length > 1 ? 's have' : ' has'} updates available</Text>
+          </Text>
+          <Text>
+            <Text color={colors.textDim}>╚═╦═╦═╝</Text>
+          </Text>
+        </Box>
+
+        <Box marginTop={1} marginBottom={1} flexDirection="column">
+          {toolUpdates.slice(0, 5).map((tool) => (
+            <Text key={tool.name} color={colors.textMuted}>
+              <Text color={colors.primary}>↑</Text> {tool.name}
+              <Text color={colors.textDim}> {tool.installedVersion} → {tool.bundledVersion}</Text>
+            </Text>
+          ))}
+          {toolUpdates.length > 5 && (
+            <Text color={colors.textDim}>...and {toolUpdates.length - 5} more</Text>
+          )}
+        </Box>
+
+        {isUpdating ? (
+          <Text color={colors.primary}>Updating tools...</Text>
+        ) : (
+          <Box flexDirection="row">
+            {buttons.map((button, index) => (
+              <Text
+                key={button.label}
+                backgroundColor={selectedButton === index ? colors.primary : colors.bgSelected}
+                color={selectedButton === index ? '#000000' : colors.textMuted}
+                bold={selectedButton === index}
+              >
+                {' '}{button.label}{' '}
+              </Text>
+            ))}
+          </Box>
+        )}
+
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>←→ select · enter · "Always" enables auto-update</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}