@orderful/droid 0.33.1 → 0.34.0

package/src/commands/repos.ts

@@ -0,0 +1,185 @@
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+import {
+  getRepos,
+  getRepo,
+  addRepo,
+  removeRepo,
+  getRepoPath,
+} from '../lib/config';
+import type { RepoConfig } from '../lib/types';
+
+interface ReposListOptions {
+  json?: boolean;
+}
+
+/**
+ * List all repos
+ */
+export async function reposListCommand(options?: ReposListOptions): Promise<void> {
+  const repos = getRepos();
+
+  if (repos.length === 0) {
+    console.log(chalk.yellow('No repos configured.'));
+    console.log(chalk.gray('\nAdd a repo with:'));
+    console.log(chalk.gray('  droid repos add <name>'));
+    return;
+  }
+
+  if (options?.json) {
+    console.log(JSON.stringify(repos, null, 2));
+    return;
+  }
+
+  console.log(chalk.bold('\n📦 Registered Repos\n'));
+
+  for (const repo of repos) {
+    const expandedPath = getRepoPath(repo.name);
+    console.log(chalk.cyan(`${repo.name}`));
+    console.log(chalk.gray(`  Path: ${expandedPath}`));
+    if (repo.description) {
+      console.log(chalk.gray(`  ${repo.description}`));
+    }
+    console.log();
+  }
+}
+
+/**
+ * Add a repo
+ */
+export async function reposAddCommand(
+  name?: string,
+  path?: string,
+  description?: string,
+): Promise<void> {
+  let repoName = name;
+  let repoPath = path;
+  let repoDescription = description;
+
+  // Interactive prompts if arguments not provided
+  if (!repoName) {
+    const answers = await inquirer.prompt([
+      {
+        type: 'input',
+        name: 'name',
+        message: 'Repo name:',
+        validate: (input) => (input.trim() ? true : 'Name is required'),
+      },
+    ]);
+    repoName = answers.name;
+  }
+
+  if (!repoPath) {
+    const answers = await inquirer.prompt([
+      {
+        type: 'input',
+        name: 'path',
+        message: 'Repo path:',
+        default: `~/src/github.com/${repoName}`,
+        validate: (input) => (input.trim() ? true : 'Path is required'),
+      },
+    ]);
+    repoPath = answers.path;
+  }
+
+  if (!repoDescription) {
+    const answers = await inquirer.prompt([
+      {
+        type: 'input',
+        name: 'description',
+        message: 'Description (optional):',
+      },
+    ]);
+    repoDescription = answers.description || undefined;
+  }
+
+  // At this point, repoName and repoPath should be defined
+  if (!repoName || !repoPath) {
+    console.error(chalk.red('Name and path are required'));
+    return;
+  }
+
+  const repo: RepoConfig = {
+    name: repoName,
+    path: repoPath,
+    description: repoDescription,
+  };
+
+  addRepo(repo);
+
+  const expandedPath = getRepoPath(repoName);
+  console.log(chalk.green(`\n✓ Added repo: ${repoName}`));
+  console.log(chalk.gray(`  Path: ${expandedPath}`));
+  if (repoDescription) {
+    console.log(chalk.gray(`  ${repoDescription}`));
+  }
+}
+
+/**
+ * Remove a repo
+ */
+export async function reposRemoveCommand(name?: string): Promise<void> {
+  let repoName = name;
+
+  if (!repoName) {
+    const repos = getRepos();
+
+    if (repos.length === 0) {
+      console.log(chalk.yellow('No repos configured.'));
+      return;
+    }
+
+    const answers = await inquirer.prompt([
+      {
+        type: 'list',
+        name: 'name',
+        message: 'Select repo to remove:',
+        choices: repos.map((r) => r.name),
+      },
+    ]);
+    repoName = answers.name;
+  }
+
+  // At this point, repoName should be defined
+  if (!repoName) {
+    console.error(chalk.red('Repo name is required'));
+    return;
+  }
+
+  // Confirm removal
+  const answers = await inquirer.prompt([
+    {
+      type: 'confirm',
+      name: 'confirm',
+      message: `Remove repo '${repoName}'?`,
+      default: false,
+    },
+  ]);
+
+  if (!answers.confirm) {
+    console.log(chalk.gray('Cancelled'));
+    return;
+  }
+
+  const existed = removeRepo(repoName);
+
+  if (existed) {
+    console.log(chalk.green(`\n✓ Removed repo: ${repoName}`));
+  } else {
+    console.log(chalk.yellow(`\nRepo '${repoName}' not found`));
+  }
+}
+
+/**
+ * Get a single repo (for scripts)
+ */
+export async function reposGetCommand(name: string): Promise<void> {
+  const repo = getRepo(name);
+
+  if (!repo) {
+    console.error(chalk.red(`Repo '${name}' not found`));
+    process.exit(1);
+  }
+
+  console.log(JSON.stringify(repo, null, 2));
+}

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

@@ -1,11 +1,12 @@
 import { Box, Text } from 'ink';
-import { loadConfig, getAutoUpdateConfig } from '../../../lib/config';
+import { loadConfig, getAutoUpdateConfig, getRepos } from '../../../lib/config';
 import { Platform } from '../../../lib/types';
 import { colors } from '../constants';
 
 export interface SettingsDetailsProps {
   isFocused: boolean;
   detectedPlatforms: Platform[];
+  selectedAction: number;
   onRedetect?: () => void;
 }
 
@@ -18,10 +19,12 @@ const PLATFORM_LABELS: Record<Platform, string> = {
 export function SettingsDetails({
   isFocused,
   detectedPlatforms,
+  selectedAction,
   onRedetect: _onRedetect, // TODO: Add re-detect button when no platforms found
 }: SettingsDetailsProps) {
   const config = loadConfig();
   const autoUpdateConfig = getAutoUpdateConfig();
+  const repos = getRepos();
 
   const platformsText = detectedPlatforms.length > 0
     ? detectedPlatforms.map(p => PLATFORM_LABELS[p]).join(', ')
@@ -31,50 +34,76 @@ export function SettingsDetails({
     <Box flexDirection="column" paddingLeft={2} flexGrow={1}>
       <Text color={colors.text} bold>Settings</Text>
 
+      {/* Global Settings */}
       <Box flexDirection="column" marginTop={1}>
+        <Text color={colors.textDim} bold>Global</Text>
         <Text>
-          <Text color={colors.textDim}>Platforms:          </Text>
+          <Text color={colors.textDim}>  Detected platforms: </Text>
           <Text color={colors.text}>{platformsText}</Text>
         </Text>
         <Text>
-          <Text color={colors.textDim}>Your @mention:      </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.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.textDim}>  Auto-update app:    </Text>
           <Text color={colors.text}>{autoUpdateConfig.app ? 'enabled' : 'disabled'}</Text>
         </Text>
       </Box>
 
-      <Box marginTop={2}>
+      {/* Repos */}
+      <Box flexDirection="column" marginTop={1}>
+        <Text color={colors.textDim} bold>Repos</Text>
+        {repos.length === 0 ? (
+          <Text color={colors.textDim}>  No repos configured</Text>
+        ) : (
+          <Text color={colors.textDim}>  {repos.map(r => r.name).join(', ')} ({repos.length} total)</Text>
+        )}
+      </Box>
+
+      <Box marginTop={1}>
         <Text color={colors.textDim}>Config: ~/.droid/config.yaml</Text>
       </Box>
 
       {isFocused && (
-        <Box marginTop={2}>
+        <Box marginTop={2} flexDirection="row" gap={2}>
+          <Text
+            backgroundColor={selectedAction === 0 ? colors.primary : undefined}
+            color={selectedAction === 0 ? '#ffffff' : colors.textDim}
+            bold={selectedAction === 0}
+          >
+            {' '}Edit Config{' '}
+          </Text>
+          <Text
+            backgroundColor={selectedAction === 1 ? colors.primary : undefined}
+            color={selectedAction === 1 ? '#ffffff' : colors.textDim}
+            bold={selectedAction === 1}
+          >
+            {' '}View Repos{' '}
+          </Text>
           <Text
-            backgroundColor={colors.primary}
-            color="#ffffff"
-            bold
+            backgroundColor={selectedAction === 2 ? colors.primary : undefined}
+            color={selectedAction === 2 ? '#ffffff' : colors.textDim}
+            bold={selectedAction === 2}
           >
-            {' '}Edit{' '}
+            {' '}Manage Repos{' '}
           </Text>
         </Box>
       )}
 
       {isFocused && (
         <Box marginTop={1}>
-          <Text color={colors.textDim}>enter edit · esc back</Text>
+          <Text color={colors.textDim}>←→ select · enter confirm · esc back</Text>
         </Box>
       )}
 
       {!isFocused && (
         <Box marginTop={2}>
-          <Text color={colors.textDim}>press enter to edit</Text>
+          <Text color={colors.textDim}>press enter for options</Text>
         </Box>
       )}
     </Box>

package/src/commands/tui/types.ts

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

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

@@ -0,0 +1,291 @@
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { useState } from 'react';
+import { getRepos, addRepo, removeRepo } from '../../../lib/config';
+import type { RepoConfig } from '../../../lib/types';
+import { colors } from '../constants';
+
+export interface ReposManagementScreenProps {
+  onComplete: () => void;
+  onCancel: () => void;
+}
+
+type Screen = 'list' | 'add-name' | 'add-path' | 'add-desc' | 'confirm-delete';
+
+export function ReposManagementScreen({ onComplete: _onComplete, onCancel }: ReposManagementScreenProps) {
+  const [repos, setRepos] = useState<RepoConfig[]>(() => getRepos());
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [screen, setScreen] = useState<Screen>('list');
+  const [message, setMessage] = useState<{ text: string; type: 'success' | 'error' } | null>(null);
+
+  // Add repo state
+  const [newRepoName, setNewRepoName] = useState('');
+  const [newRepoPath, setNewRepoPath] = useState('');
+  const [newRepoDesc, setNewRepoDesc] = useState('');
+
+  // Delete repo state
+  const [repoToDelete, setRepoToDelete] = useState<string | null>(null);
+
+  const handleAddRepo = () => {
+    if (!newRepoName || !newRepoPath) {
+      setMessage({ text: 'Name and path are required', type: 'error' });
+      return;
+    }
+
+    const newRepo: RepoConfig = {
+      name: newRepoName,
+      path: newRepoPath,
+      description: newRepoDesc || undefined,
+    };
+
+    addRepo(newRepo);
+    setRepos(getRepos());
+    setMessage({ text: `Added ${newRepoName}`, type: 'success' });
+
+    // Reset form
+    setNewRepoName('');
+    setNewRepoPath('');
+    setNewRepoDesc('');
+    setScreen('list');
+  };
+
+  const handleDeleteRepo = (repoName: string) => {
+    removeRepo(repoName);
+    setRepos(getRepos());
+    setMessage({ text: `Removed ${repoName}`, type: 'success' });
+    setRepoToDelete(null);
+    setScreen('list');
+
+    // Adjust selected index if needed
+    if (selectedIndex >= repos.length - 1) {
+      setSelectedIndex(Math.max(0, repos.length - 2));
+    }
+  };
+
+  // List screen navigation
+  useInput((input, key) => {
+    if (message) setMessage(null);
+
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    if (key.upArrow) {
+      setSelectedIndex((prev) => Math.max(0, prev - 1));
+    }
+
+    if (key.downArrow) {
+      // +1 for "Add New Repo" option
+      const maxIndex = repos.length;
+      setSelectedIndex((prev) => Math.min(maxIndex, prev + 1));
+    }
+
+    if (key.return) {
+      if (selectedIndex === repos.length) {
+        // "Add New Repo" selected
+        setScreen('add-name');
+      } else if (selectedIndex < repos.length) {
+        // Repo selected - prompt to delete
+        setRepoToDelete(repos[selectedIndex].name);
+        setScreen('confirm-delete');
+      }
+    }
+  }, { isActive: screen === 'list' });
+
+  // Add name input
+  useInput((input, key) => {
+    if (key.escape) {
+      setNewRepoName('');
+      setScreen('list');
+    }
+  }, { isActive: screen === 'add-name' });
+
+  // Add path input
+  useInput((input, key) => {
+    if (key.escape) {
+      setNewRepoPath('');
+      setScreen('add-name');
+    }
+  }, { isActive: screen === 'add-path' });
+
+  // Add description input
+  useInput((input, key) => {
+    if (key.escape) {
+      setNewRepoDesc('');
+      setScreen('add-path');
+    }
+  }, { isActive: screen === 'add-desc' });
+
+  // Confirm delete
+  useInput((input, key) => {
+    if (key.escape || input === 'n') {
+      setRepoToDelete(null);
+      setScreen('list');
+    }
+    if (input === 'y' && repoToDelete) {
+      handleDeleteRepo(repoToDelete);
+    }
+  }, { isActive: screen === 'confirm-delete' });
+
+  if (screen === 'add-name') {
+    return (
+      <Box flexDirection="column" padding={2}>
+        <Text color={colors.text} bold>Add Repository</Text>
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>Repository name: </Text>
+          <TextInput
+            value={newRepoName}
+            onChange={setNewRepoName}
+            onSubmit={() => {
+              if (newRepoName) {
+                setScreen('add-path');
+              }
+            }}
+          />
+        </Box>
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>esc cancel</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (screen === 'add-path') {
+    return (
+      <Box flexDirection="column" padding={2}>
+        <Text color={colors.text} bold>Add Repository</Text>
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>Name: </Text>
+          <Text color={colors.text}>{newRepoName}</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>Path (e.g., ~/src/github.com/{newRepoName}): </Text>
+          <TextInput
+            value={newRepoPath}
+            onChange={setNewRepoPath}
+            onSubmit={() => {
+              if (newRepoPath) {
+                setScreen('add-desc');
+              }
+            }}
+            placeholder={`~/src/github.com/${newRepoName}`}
+          />
+        </Box>
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>esc back</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (screen === 'add-desc') {
+    return (
+      <Box flexDirection="column" padding={2}>
+        <Text color={colors.text} bold>Add Repository</Text>
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>Name: </Text>
+          <Text color={colors.text}>{newRepoName}</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>Path: </Text>
+          <Text color={colors.text}>{newRepoPath}</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>Description (optional): </Text>
+          <TextInput
+            value={newRepoDesc}
+            onChange={setNewRepoDesc}
+            onSubmit={handleAddRepo}
+          />
+        </Box>
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>enter save · esc back</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (screen === 'confirm-delete' && repoToDelete) {
+    const repo = repos.find((r) => r.name === repoToDelete);
+    return (
+      <Box flexDirection="column" padding={2}>
+        <Text color={colors.text} bold>Remove Repository</Text>
+        <Box marginTop={1} flexDirection="column">
+          <Text color={colors.text}>{repo?.name}</Text>
+          <Text color={colors.textDim}>{repo?.path}</Text>
+        </Box>
+        <Box marginTop={2}>
+          <Text color={colors.error}>Remove this repository from the registry?</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>y yes · n no</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  // List screen
+  return (
+    <Box flexDirection="column" padding={2}>
+      <Text color={colors.text} bold>Manage Repositories</Text>
+
+      {message && (
+        <Box marginTop={1}>
+          <Text color={message.type === 'success' ? colors.success : colors.error}>
+            {message.text}
+          </Text>
+        </Box>
+      )}
+
+      <Box flexDirection="column" marginTop={1}>
+        {repos.length === 0 ? (
+          <Box marginY={1}>
+            <Text color={colors.textDim}>No repos configured</Text>
+          </Box>
+        ) : (
+          repos.map((repo, index) => (
+            <Box key={repo.name} flexDirection="column" marginTop={index > 0 ? 1 : 0}>
+              <Box>
+                <Text
+                  color={selectedIndex === index ? colors.primary : colors.text}
+                  bold={selectedIndex === index}
+                >
+                  {selectedIndex === index ? '> ' : '  '}
+                  {repo.name}
+                </Text>
+              </Box>
+              <Box paddingLeft={2}>
+                <Text color={colors.textDim}>{repo.path}</Text>
+              </Box>
+              {repo.description && (
+                <Box paddingLeft={2}>
+                  <Text color={colors.textDim}>{repo.description}</Text>
+                </Box>
+              )}
+            </Box>
+          ))
+        )}
+
+        {/* Add New Repo option */}
+        <Box marginTop={repos.length > 0 ? 2 : 0}>
+          <Text
+            color={selectedIndex === repos.length ? colors.primary : colors.textDim}
+            bold={selectedIndex === repos.length}
+          >
+            {selectedIndex === repos.length ? '> ' : '  '}
+            + Add New Repository
+          </Text>
+        </Box>
+      </Box>
+
+      <Box marginTop={2}>
+        <Text color={colors.textDim}>
+          {repos.length > 0 && selectedIndex < repos.length
+            ? 'enter remove · esc back'
+            : '↑↓ navigate · enter select · esc back'}
+        </Text>
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1,49 @@
+import { Box, Text, useInput } from 'ink';
+import { getRepos } from '../../../lib/config';
+import { colors } from '../constants';
+
+export interface ReposViewerScreenProps {
+  onClose: () => void;
+}
+
+export function ReposViewerScreen({ onClose }: ReposViewerScreenProps) {
+  const repos = getRepos();
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onClose();
+    }
+  });
+
+  return (
+    <Box flexDirection="column" padding={2}>
+      <Text color={colors.text} bold>Repositories</Text>
+
+      {repos.length === 0 ? (
+        <Box marginTop={1}>
+          <Text color={colors.textDim}>No repos configured</Text>
+        </Box>
+      ) : (
+        <Box flexDirection="column" marginTop={1}>
+          {repos.map((repo, index) => (
+            <Box key={repo.name} flexDirection="column" marginTop={index > 0 ? 2 : 0}>
+              <Text color={colors.text} bold>{repo.name}</Text>
+              <Box marginTop={0}>
+                <Text color={colors.textDim}>Path: {repo.path}</Text>
+              </Box>
+              {repo.description && (
+                <Box marginTop={0}>
+                  <Text color={colors.textDim}>{repo.description}</Text>
+                </Box>
+              )}
+            </Box>
+          ))}
+        </Box>
+      )}
+
+      <Box marginTop={2}>
+        <Text color={colors.textDim}>esc back</Text>
+      </Box>
+    </Box>
+  );
+}