From a4990748b5666526f283350ceebc4a11c44ff178 Mon Sep 17 00:00:00 2001
From: Boris Starkov <boris.starkow@gmail.com>
Date: Fri, 24 Oct 2025 15:05:58 +0100
Subject: [PATCH 1/2] split help views by modules

---
 README.md                                |   2 +-
 src/agents/commands/index.ts             |  19 +++
 src/agents/ui/AgentsHelpView.tsx         | 152 ++++++++++++++++++
 src/auth/commands/index.ts               |  19 +++
 src/auth/ui/AuthHelpView.tsx             | 118 ++++++++++++++
 src/cli.ts                               |   7 +-
 src/components/commands/index.ts         |  19 +++
 src/components/ui/ComponentsHelpView.tsx |  82 ++++++++++
 src/tests/commands/index.ts              |  19 +++
 src/tests/ui/TestsHelpView.tsx           | 129 +++++++++++++++
 src/tools/commands/index.ts              |  19 +++
 src/tools/ui/ToolsHelpView.tsx           | 130 +++++++++++++++
 src/ui/views/HelpView.tsx                | 194 ++++-------------------
 13 files changed, 745 insertions(+), 164 deletions(-)
 create mode 100644 src/agents/ui/AgentsHelpView.tsx
 create mode 100644 src/auth/ui/AuthHelpView.tsx
 create mode 100644 src/components/ui/ComponentsHelpView.tsx
 create mode 100644 src/tests/ui/TestsHelpView.tsx
 create mode 100644 src/tools/ui/ToolsHelpView.tsx

diff --git a/README.md b/README.md
index 4d4a2dc..62ce6fc 100644
--- a/README.md
+++ b/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
diff --git a/src/agents/commands/index.ts b/src/agents/commands/index.ts
index 7e20f7f..c9dfc89 100644
--- a/src/agents/commands/index.ts
+++ b/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 { createPullCommand } from './pull.js';
 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());
diff --git a/src/agents/ui/AgentsHelpView.tsx b/src/agents/ui/AgentsHelpView.tsx
new file mode 100644
index 0000000..8fec2eb
--- /dev/null
+++ b/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;
diff --git a/src/auth/commands/index.ts b/src/auth/commands/index.ts
index 17d41a2..c4e737a 100644
--- a/src/auth/commands/index.ts
+++ b/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());
diff --git a/src/auth/ui/AuthHelpView.tsx b/src/auth/ui/AuthHelpView.tsx
new file mode 100644
index 0000000..685a6b0
--- /dev/null
+++ b/src/auth/ui/AuthHelpView.tsx
@@ -0,0 +1,118 @@
+// @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: "login",
+    description: "Login with your ElevenLabs API key",
+    options: [
+      { flag: "--env <environment>", description: "Environment name (default: 'prod')" },
+    ],
+  },
+  {
+    name: "logout",
+    description: "Logout and remove stored API key",
+    options: [
+      { flag: "--env <environment>", description: "Environment to logout from" },
+    ],
+  },
+  {
+    name: "whoami",
+    description: "Show current login status",
+    options: [
+      { flag: "--env <environment>", description: "Environment to check" },
+    ],
+  },
+  {
+    name: "residency [location]",
+    description: "Set the API residency location",
+  },
+];
+
+export const AuthHelpView: 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 auth
+          </Text>
+          <Text color={theme.colors.text.secondary}> - Authentication 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 auth &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 AuthHelpView;
diff --git a/src/cli.ts b/src/cli.ts
index 2b6dab4..d41f522 100644
--- a/src/cli.ts
+++ b/src/cli.ts
@@ -52,9 +52,12 @@ program.addCommand(createToolsCommand());
 program.addCommand(createTestsCommand());
 program.addCommand(createComponentsCommand());
 
-// Show help if no arguments provided
+// Show help if no arguments provided or if only help flag is provided
 const args = process.argv.slice(2);
-if (args.length === 0 || args.includes('--help') || args.includes('-h')) {
+const isMainHelp = args.length === 0 ||
+  (args.length === 1 && (args[0] === '--help' || args[0] === '-h'));
+
+if (isMainHelp) {
   (async () => {
     const { waitUntilExit } = render(
       React.createElement(HelpView)
diff --git a/src/components/commands/index.ts b/src/components/commands/index.ts
index eea9af1..b679a9d 100644
--- a/src/components/commands/index.ts
+++ b/src/components/commands/index.ts
@@ -1,10 +1,29 @@
 import { Command } from 'commander';
+import { render } from 'ink';
+import React from 'react';
 import { createAddCommand } from './add.js';
+import ComponentsHelpView from '../ui/ComponentsHelpView.js';
 
 export function createComponentsCommand(): Command {
   const components = new Command('components');
   components.description('Import components from the ElevenLabs UI registry (https://ui.elevenlabs.io)');
 
+  // Disable default help
+  components.helpOption(false);
+  components.addHelpCommand(false);
+
+  // Add custom help option
+  components.option('-h, --help', 'Display help information');
+
+  // Custom action when components command is run without subcommands
+  components.action(async (options) => {
+    const { waitUntilExit } = render(
+      React.createElement(ComponentsHelpView)
+    );
+    await waitUntilExit();
+    process.exit(0);
+  });
+
   components.addCommand(createAddCommand());
 
   return components;
diff --git a/src/components/ui/ComponentsHelpView.tsx b/src/components/ui/ComponentsHelpView.tsx
new file mode 100644
index 0000000..0cb2aa3
--- /dev/null
+++ b/src/components/ui/ComponentsHelpView.tsx
@@ -0,0 +1,82 @@
+// @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;
+}
+
+const commands: Command[] = [
+  {
+    name: "add [name]",
+    description: "Add a component from the ElevenLabs UI registry",
+  },
+];
+
+export const ComponentsHelpView: 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 components
+          </Text>
+          <Text color={theme.colors.text.secondary}> - UI component management</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 components &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} 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>
+          ))}
+        </Box>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={theme.colors.text.muted}>
+          Components are sourced from https://ui.elevenlabs.io
+        </Text>
+      </Box>
+    </App>
+  );
+};
+
+export default ComponentsHelpView;
diff --git a/src/tests/commands/index.ts b/src/tests/commands/index.ts
index c8d5e4e..0300213 100644
--- a/src/tests/commands/index.ts
+++ b/src/tests/commands/index.ts
@@ -1,13 +1,32 @@
 import { Command } from 'commander';
+import { render } from 'ink';
+import React from 'react';
 import { createAddCommand } from './add.js';
 import { createDeleteCommand } from './delete.js';
 import { createPushCommand } from './push.js';
 import { createPullCommand } from './pull.js';
+import TestsHelpView from '../ui/TestsHelpView.js';
 
 export function createTestsCommand(): Command {
   const tests = new Command('tests');
   tests.description('Manage ElevenLabs tests');
 
+  // Disable default help
+  tests.helpOption(false);
+  tests.addHelpCommand(false);
+
+  // Add custom help option
+  tests.option('-h, --help', 'Display help information');
+
+  // Custom action when tests command is run without subcommands
+  tests.action(async (options) => {
+    const { waitUntilExit } = render(
+      React.createElement(TestsHelpView)
+    );
+    await waitUntilExit();
+    process.exit(0);
+  });
+
   tests.addCommand(createAddCommand());
   tests.addCommand(createDeleteCommand());
   tests.addCommand(createPushCommand());
diff --git a/src/tests/ui/TestsHelpView.tsx b/src/tests/ui/TestsHelpView.tsx
new file mode 100644
index 0000000..25e965a
--- /dev/null
+++ b/src/tests/ui/TestsHelpView.tsx
@@ -0,0 +1,129 @@
+// @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: "add <name>",
+    description: "Add a new test",
+    options: [
+      { flag: "--template <template>", description: "Test template type (default: 'basic-llm')" },
+      { flag: "--env <environment>", description: "Environment to create test in (default: 'prod')" },
+    ],
+  },
+  {
+    name: "delete [test_id]",
+    description: "Delete a test locally and from ElevenLabs",
+    options: [
+      { flag: "--all", description: "Delete all tests" },
+      { flag: "--env <environment>", description: "Filter tests by environment (use with --all)" },
+    ],
+  },
+  {
+    name: "push",
+    description: "Push tests to ElevenLabs API",
+    options: [
+      { flag: "--env <environment>", description: "Filter tests by environment" },
+      { flag: "--dry-run", description: "Show what would be done without making changes" },
+    ],
+  },
+  {
+    name: "pull",
+    description: "Pull tests from ElevenLabs",
+    options: [
+      { flag: "--test <test_id>", description: "Specific test ID to pull" },
+      { flag: "--output-dir <directory>", description: "Output directory for configs (default: 'test_configs')" },
+      { flag: "--dry-run", description: "Show what would be done without making changes" },
+      { flag: "--update", description: "Update existing items only, skip new" },
+      { flag: "--all", description: "Pull all (new + existing)" },
+      { flag: "--env <environment>", description: "Environment to pull from" },
+    ],
+  },
+];
+
+export const TestsHelpView: 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 tests
+          </Text>
+          <Text color={theme.colors.text.secondary}> - Test 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 tests &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 TestsHelpView;
diff --git a/src/tools/commands/index.ts b/src/tools/commands/index.ts
index a367d74..25019b0 100644
--- a/src/tools/commands/index.ts
+++ b/src/tools/commands/index.ts
@@ -1,13 +1,32 @@
 import { Command } from 'commander';
+import { render } from 'ink';
+import React from 'react';
 import { createAddCommand } from './add.js';
 import { createDeleteCommand } from './delete.js';
 import { createPushCommand } from './push.js';
 import { createPullCommand } from './pull.js';
+import ToolsHelpView from '../ui/ToolsHelpView.js';
 
 export function createToolsCommand(): Command {
   const tools = new Command('tools');
   tools.description('Manage ElevenLabs tools');
 
+  // Disable default help
+  tools.helpOption(false);
+  tools.addHelpCommand(false);
+
+  // Add custom help option
+  tools.option('-h, --help', 'Display help information');
+
+  // Custom action when tools command is run without subcommands
+  tools.action(async (options) => {
+    const { waitUntilExit } = render(
+      React.createElement(ToolsHelpView)
+    );
+    await waitUntilExit();
+    process.exit(0);
+  });
+
   tools.addCommand(createAddCommand());
   tools.addCommand(createDeleteCommand());
   tools.addCommand(createPushCommand());
diff --git a/src/tools/ui/ToolsHelpView.tsx b/src/tools/ui/ToolsHelpView.tsx
new file mode 100644
index 0000000..13851e1
--- /dev/null
+++ b/src/tools/ui/ToolsHelpView.tsx
@@ -0,0 +1,130 @@
+// @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: "add <name>",
+    description: "Add a new tool",
+    options: [
+      { flag: "--type <type>", description: "Tool type: webhook or client (default: 'webhook')" },
+      { flag: "--config-path <path>", description: "Custom config path" },
+      { flag: "--env <environment>", description: "Environment to create tool in (default: 'prod')" },
+    ],
+  },
+  {
+    name: "delete [tool_id]",
+    description: "Delete a tool locally and from ElevenLabs",
+    options: [
+      { flag: "--all", description: "Delete all tools" },
+      { flag: "--env <environment>", description: "Filter tools by environment (use with --all)" },
+    ],
+  },
+  {
+    name: "push",
+    description: "Push tools to ElevenLabs API",
+    options: [
+      { flag: "--env <environment>", description: "Filter tools by environment" },
+      { flag: "--dry-run", description: "Show what would be done without making changes" },
+    ],
+  },
+  {
+    name: "pull",
+    description: "Pull tools from ElevenLabs",
+    options: [
+      { flag: "--tool <tool_id>", description: "Specific tool ID to pull" },
+      { flag: "--output-dir <directory>", description: "Output directory for configs (default: 'tool_configs')" },
+      { flag: "--dry-run", description: "Show what would be done without making changes" },
+      { flag: "--update", description: "Update existing items only, skip new" },
+      { flag: "--all", description: "Pull all (new + existing)" },
+      { flag: "--env <environment>", description: "Environment to pull from" },
+    ],
+  },
+];
+
+export const ToolsHelpView: 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 tools
+          </Text>
+          <Text color={theme.colors.text.secondary}> - Tool 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 tools &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 ToolsHelpView;
diff --git a/src/ui/views/HelpView.tsx b/src/ui/views/HelpView.tsx
index d7fcd02..4d98517 100644
--- a/src/ui/views/HelpView.tsx
+++ b/src/ui/views/HelpView.tsx
@@ -14,145 +14,32 @@ const packageJson = JSON.parse(
 );
 const { version } = packageJson;
 
-interface Command {
+interface Module {
   name: string;
   description: string;
-  subcommands?: Command[];
 }
 
-const commands: Command[][] = [
-  [
-    {
-      name: "auth",
-      description: "Authentication commands",
-      subcommands: [
-        {
-          name: "login",
-          description: "Login with your ElevenLabs API key",
-        },
-        {
-          name: "logout",
-          description: "Logout and remove stored API key",
-        },
-        {
-          name: "whoami",
-          description: "Show current login status",
-        },
-        {
-          name: "residency [location]",
-          description: "Set the API residency location",
-        },
-      ],
-    },
-  ],
-  [
-    {
-      name: "agents",
-      description: "Agent management commands",
-      subcommands: [
-        {
-          name: "init [path]",
-          description: "Initialize project (use --override to recreate)",
-        },
-        {
-          name: "add <name>",
-          description: "Create a new agent and push to remote",
-        },
-        {
-          name: "list",
-          description: "List all local agents",
-        },
-        {
-          name: "delete [agent_id]",
-          description: "Delete agent (use --all for all)",
-        },
-        {
-          name: "status",
-          description: "Show the status of agents",
-        },
-        {
-          name: "push",
-          description: "Push agents to ElevenLabs",
-        },
-        {
-          name: "pull",
-          description: "Pull agents (--update, --all options)",
-        },
-        {
-          name: "test <agent>",
-          description: "Run tests for an agent",
-        },
-        {
-          name: "templates",
-          description: "Manage agent templates (list, show)",
-        },
-        {
-          name: "widget <name>",
-          description: "Generate HTML widget snippet",
-        },
-      ],
-    },
-  ],
-  [
-    {
-      name: "tools",
-      description: "Tool management commands",
-      subcommands: [
-        {
-          name: "add <name>",
-          description: "Add tool (--type webhook|client)",
-        },
-        {
-          name: "delete [tool_id]",
-          description: "Delete tool (use --all for all)",
-        },
-        {
-          name: "push",
-          description: "Push tools to ElevenLabs API",
-        },
-        {
-          name: "pull",
-          description: "Pull tools (--update, --all options)",
-        },
-      ],
-    },
-  ],
-  [
-    {
-      name: "tests",
-      description: "Test management commands",
-      subcommands: [
-        {
-          name: "add <name>",
-          description: "Add a new test",
-        },
-        {
-          name: "delete [test_id]",
-          description: "Delete test (use --all for all)",
-        },
-        {
-          name: "push",
-          description: "Push tests to ElevenLabs API",
-        },
-        {
-          name: "pull",
-          description: "Pull tests (--update, --all options)",
-        },
-      ],
-    },
-  ],
-  [
-    {
-      name: "components",
-      description: "UI component management",
-      subcommands: [
-        {
-          name: "add [name]",
-          description: "Add component from ElevenLabs UI registry",
-        },
-      ],
-    },
-  ],
+const modules: Module[] = [
+  {
+    name: "auth",
+    description: "Authentication commands",
+  },
+  {
+    name: "agents",
+    description: "Agent management commands",
+  },
+  {
+    name: "tools",
+    description: "Tool management commands",
+  },
+  {
+    name: "tests",
+    description: "Test management commands",
+  },
+  {
+    name: "components",
+    description: "UI component management",
+  },
 ];
 
 export const HelpView: React.FC = () => {
@@ -193,35 +80,20 @@ export const HelpView: React.FC = () => {
       <Box flexDirection="column" marginBottom={1}>
         <Box marginBottom={1}>
           <Text color={theme.colors.accent.primary} bold>
-            Commands:
+            Modules:
           </Text>
         </Box>
 
-        {commands.map((group, groupIndex) => (
-          <Box key={groupIndex} flexDirection="column" marginBottom={1}>
-            {group.map((cmd, cmdIndex) => (
-              <Box key={cmdIndex} flexDirection="column">
-                <Box marginLeft={2}>
-                  <Box width={24}>
-                    <Text color={theme.colors.text.primary}>{cmd.name}</Text>
-                  </Box>
-                  <Text color={theme.colors.text.secondary}>{cmd.description}</Text>
-                </Box>
-                {cmd.subcommands &&
-                  cmd.subcommands.map((subcmd, subIndex) => (
-                    <Box key={subIndex} marginLeft={4}>
-                      <Box width={22}>
-                        <Text color={theme.colors.text.muted}>{subcmd.name}</Text>
-                      </Box>
-                      <Text color={theme.colors.text.muted}>
-                        {subcmd.description}
-                      </Text>
-                    </Box>
-                  ))}
+        <Box flexDirection="column">
+          {modules.map((module, index) => (
+            <Box key={index} marginLeft={2}>
+              <Box width={16}>
+                <Text color={theme.colors.text.primary}>{module.name}</Text>
               </Box>
-            ))}
-          </Box>
-        ))}
+              <Text color={theme.colors.text.secondary}>{module.description}</Text>
+            </Box>
+          ))}
+        </Box>
       </Box>
 
       <Box flexDirection="column" marginTop={1}>
@@ -255,7 +127,7 @@ export const HelpView: React.FC = () => {
 
       <Box marginTop={1}>
         <Text color={theme.colors.text.muted}>
-          For more information on a command, use: elevenlabs [command] --help
+          For more information on a module, use: elevenlabs &lt;module&gt; --help
         </Text>
       </Box>
 

From 4a841dd0c8c8036f662aff322891de80cd61b094 Mon Sep 17 00:00:00 2001
From: Boris Starkov <boris.starkow@gmail.com>
Date: Fri, 24 Oct 2025 16:16:51 +0100
Subject: [PATCH 2/2] update workflows to use npm

---
 .github/workflows/build.yml    |  8 +++-----
 .github/workflows/lint.yml     | 10 ++++------
 .github/workflows/test-cli.yml | 19 +++++++------------
 .github/workflows/test.yml     | 10 ++++------
 4 files changed, 18 insertions(+), 29 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 9fc6c67..9f03fe5 100644
--- a/.github/workflows/build.yml
+++ b/.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
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 87c0119..5686f42 100644
--- a/.github/workflows/lint.yml
+++ b/.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
diff --git a/.github/workflows/test-cli.yml b/.github/workflows/test-cli.yml
index b060c43..271b148 100644
--- a/.github/workflows/test-cli.yml
+++ b/.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 }}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 484380e..e00f9bc 100644
--- a/.github/workflows/test.yml
+++ b/.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