split help views by modules

.github/workflows/build.yml

@@ -22,12 +22,10 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 20
-
-      - name: Install PNPM
-        run: npm i pnpm -g
+          cache: 'npm'
 
       - name: Install dependencies
-        run: pnpm i
+        run: npm ci
 
       - name: Run build
-        run: pnpm run build
+        run: npm run build

.github/workflows/lint.yml

@@ -22,15 +22,13 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 20
-
-      - name: Install PNPM
-        run: npm i pnpm -g
+          cache: 'npm'
 
       - name: Install dependencies
-        run: pnpm i
+        run: npm ci
 
       - name: Build
-        run: pnpm run build
+        run: npm run build
 
       - name: Run linters
-        run: pnpm run lint
+        run: npm run lint

.github/workflows/test-cli.yml

@@ -15,26 +15,21 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
-
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: '20'
-          cache: 'pnpm'
-      
+          cache: 'npm'
+
       - name: Install dependencies
-        run: pnpm install
-      
+        run: npm ci
+
       - name: Build
-        run: pnpm build
+        run: npm run build
 
       - name: Run E2E tests
-        run: pnpm test:e2e
+        run: npm run test:e2e
         env:
           ELEVENLABS_API_KEY: ${{ secrets.ELEVENLABS_TEST_API_KEY }}
           ELEVENLABS_TEST_API_KEY: ${{ secrets.ELEVENLABS_TEST_API_KEY_SECONDARY }}

.github/workflows/test.yml

@@ -21,15 +21,13 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 20
-
-      - name: Install PNPM
-        run: npm i pnpm -g
+          cache: 'npm'
 
       - name: Install dependencies
-        run: pnpm i
+        run: npm ci
 
       - name: Run build
-        run: pnpm run build
+        run: npm run build
 
       - name: Run tests
-        run: pnpm run test
+        run: npm run test

README.md

@@ -187,7 +187,7 @@ elevenlabs agents init --override         # Override existing files and recreate
 **Override mode** (`--override`): When you need to reset your project:
 - Overwrites all configuration files
 - Recreates directory structure from scratch
-- ⚠️ **Warning**: This will delete all existing configurations in `agent_configs/`, `tool_configs/`, and `test_configs/`
+- **Warning**: This will delete all existing configurations in `agent_configs/`, `tool_configs/`, and `test_configs/`
 
 Use `--override` when:
 - You want to start fresh with a clean configuration

src/agents/commands/index.ts

@@ -1,4 +1,6 @@
 import { Command } from 'commander';
+import { render } from 'ink';
+import React from 'react';
 import { createInitCommand } from './init.js';
 import { createAddCommand } from './add.js';
 import { createListCommand } from './list.js';
@@ -9,11 +11,28 @@
 import { createTemplatesCommand } from './templates.js';
 import { createWidgetCommand } from './widget.js';
 import { createTestCommand } from './test.js';
+import AgentsHelpView from '../ui/AgentsHelpView.js';
 
 export function createAgentsCommand(): Command {
   const agents = new Command('agents');
   agents.description('Manage ElevenLabs agents');
 
+  // Disable default help
+  agents.helpOption(false);
+  agents.addHelpCommand(false);
+
+  // Add custom help option
+  agents.option('-h, --help', 'Display help information');
+
+  // Custom action when agents command is run without subcommands
+  agents.action(async (options) => {
+    const { waitUntilExit } = render(
+      React.createElement(AgentsHelpView)
+    );
+    await waitUntilExit();
+    process.exit(0);
+  });
+
   agents.addCommand(createInitCommand());
   agents.addCommand(createAddCommand());
   agents.addCommand(createListCommand());

src/agents/ui/AgentsHelpView.tsx

@@ -0,0 +1,152 @@
+// @ts-nocheck
+import React, { useEffect } from "react";
+import { Box, Text, useApp } from "ink";
+import App from "../../ui/App.js";
+import theme from "../../ui/themes/elevenlabs.js";
+
+interface Command {
+  name: string;
+  description: string;
+  options?: Array<{ flag: string; description: string }>;
+}
+
+const commands: Command[] = [
+  {
+    name: "init [path]",
+    description: "Initialize project",
+    options: [
+      { flag: "--override", description: "Recreate existing project" },
+    ],
+  },
+  {
+    name: "add <name>",
+    description: "Create a new agent and push to remote",
+    options: [
+      { flag: "--config-path <path>", description: "Custom config path" },
+      { flag: "--template <template>", description: "Template type to use (default: 'default')" },
+      { flag: "--env <environment>", description: "Environment to create agent in (default: 'prod')" },
+    ],
+  },
+  {
+    name: "list",
+    description: "List all local agents",
+  },
+  {
+    name: "delete [agent_id]",
+    description: "Delete agent",
+    options: [
+      { flag: "--all", description: "Delete all agents" },
+    ],
+  },
+  {
+    name: "status",
+    description: "Show the status of agents",
+  },
+  {
+    name: "push",
+    description: "Push agents to ElevenLabs",
+  },
+  {
+    name: "pull",
+    description: "Pull agents from ElevenLabs",
+    options: [
+      { flag: "--update", description: "Update existing agents" },
+      { flag: "--all", description: "Pull all agents" },
+    ],
+  },
+  {
+    name: "test <agent>",
+    description: "Run tests for an agent",
+  },
+  {
+    name: "templates [action]",
+    description: "Manage agent templates",
+    options: [
+      { flag: "list", description: "List available templates" },
+      { flag: "show <name>", description: "Show template details" },
+    ],
+  },
+  {
+    name: "widget <name>",
+    description: "Generate HTML widget snippet",
+  },
+];
+
+export const AgentsHelpView: React.FC = () => {
+  const { exit } = useApp();
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      exit();
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [exit]);
+
+  return (
+    <App>
+      <Box flexDirection="column" marginBottom={1}>
+        <Box marginBottom={1}>
+          <Text color={theme.colors.accent.primary} bold>
+            elevenlabs agents
+          </Text>
+          <Text color={theme.colors.text.secondary}> - Agent management commands</Text>
+        </Box>
+      </Box>
+
+      <Box flexDirection="column" marginBottom={1}>
+        <Box marginBottom={1}>
+          <Text color={theme.colors.accent.primary} bold>
+            Usage:
+          </Text>
+        </Box>
+        <Box marginLeft={2}>
+          <Text color={theme.colors.text.primary}>
+            elevenlabs agents &lt;command&gt; [options]
+          </Text>
+        </Box>
+      </Box>
+
+      <Box flexDirection="column" marginBottom={1}>
+        <Box marginBottom={1}>
+          <Text color={theme.colors.accent.primary} bold>
+            Commands:
+          </Text>
+        </Box>
+
+        <Box flexDirection="column">
+          {commands.map((cmd, index) => (
+            <Box key={index} flexDirection="column" marginBottom={1}>
+              <Box marginLeft={2}>
+                <Box width={28}>
+                  <Text color={theme.colors.text.primary}>{cmd.name}</Text>
+                </Box>
+                <Text color={theme.colors.text.secondary}>{cmd.description}</Text>
+              </Box>
+              {cmd.options && cmd.options.length > 0 && (
+                <Box flexDirection="column" marginLeft={4}>
+                  {cmd.options.map((opt, optIndex) => (
+                    <Box key={optIndex}>
+                      <Box width={26}>
+                        <Text color={theme.colors.text.muted}>{opt.flag}</Text>
+                      </Box>
+                      <Text color={theme.colors.text.muted}>{opt.description}</Text>
+                    </Box>
+                  ))}
+                </Box>
+              )}
+            </Box>
+          ))}
+        </Box>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={theme.colors.text.muted}>
+          Disable UI mode with --no-ui flag for any command
+        </Text>
+      </Box>
+    </App>
+  );
+};
+
+export default AgentsHelpView;

src/auth/commands/index.ts

@@ -1,13 +1,32 @@
 import { Command } from 'commander';
+import { render } from 'ink';
+import React from 'react';
 import { createLoginCommand } from './login.js';
 import { createLogoutCommand } from './logout.js';
 import { createWhoamiCommand } from './whoami.js';
 import { createResidencyCommand } from './residency.js';
+import AuthHelpView from '../ui/AuthHelpView.js';
 
 export function createAuthCommand(): Command {
   const auth = new Command('auth');
   auth.description('Authentication and configuration commands');
 
+  // Disable default help
+  auth.helpOption(false);
+  auth.addHelpCommand(false);
+
+  // Add custom help option
+  auth.option('-h, --help', 'Display help information');
+
+  // Custom action when auth command is run without subcommands
+  auth.action(async (options) => {
+    const { waitUntilExit } = render(
+      React.createElement(AuthHelpView)
+    );
+    await waitUntilExit();
+    process.exit(0);
+  });
+
   auth.addCommand(createLoginCommand());
   auth.addCommand(createLogoutCommand());
   auth.addCommand(createWhoamiCommand());