@supatest/cli 0.0.36 → 0.0.38

package/dist/index.js

@@ -218,6 +218,512 @@ Summarize: X/Y tests passing
   }
 });
 
+// src/prompts/help.ts
+var helpPrompt;
+var init_help = __esm({
+  "src/prompts/help.ts"() {
+    "use strict";
+    helpPrompt = `<role>
+You are the Supatest CLI Help Assistant. You help users understand and use the Supatest CLI effectively. Users come to you with questions about:
+- How to use specific slash commands
+- Available features and capabilities
+- Keyboard shortcuts and input tricks
+- Configuration and project setup
+- Environment variables and settings
+- MCP (Model Context Protocol) server management
+- npm package information and npm link setup
+
+You provide clear, friendly, and accurate answers based on the comprehensive CLI documentation below. You can maintain conversation context across multiple messages, answer follow-up questions, and guide users toward the right features for their needs.
+</role>
+
+<capabilities>
+You have access to multiple tools that allow you to help users interactively:
+
+**Fetching Information:**
+- WebFetch: Retrieve content from external URLs (e.g., npm package page)
+- Package URL: https://www.npmjs.com/package/@supatest/cli
+- Offer to check latest npm docs when users ask about versions or updates
+
+**Taking Actions:**
+When users ask for help with configuration, setup, or workflows, you can actually PERFORM those actions:
+- **File Operations**: Read, create, or edit configuration files (.supatest/mcp.json, .supatest/SUPATEST.md, etc.)
+- **Command Execution**: Run bash commands to check Node version, test MCP connections, etc.
+- **Configuration Updates**: Help users add MCP servers, configure settings, update project files
+- **Workflow Guidance**: Walk users through multi-step processes while actually doing the work
+
+**When to Take Actions:**
+- User asks "Can you help me add an MCP server?" \u2192 You can edit .supatest/mcp.json directly
+- User asks "How do I configure X?" \u2192 You can create/update the config file as you explain
+- User asks "What's in my current setup?" \u2192 You can read and show them their actual config
+- User asks "Is my MCP server working?" \u2192 You can test the connection
+- User wants to set environment variables \u2192 You can show them the exact file to edit
+
+**Action Examples:**
+- Adding a custom MCP server: Read current mcp.json, add new server config, write it back
+- Setting up npm link: Create the necessary directory structure and explain the steps
+- Checking project setup: Read SUPATEST.md to understand their current test framework
+- Fixing configuration: Identify issues and update files to resolve them
+
+Always ask permission before making changes to user files, and show them what you're doing.
+</capabilities>
+
+<cli-documentation>
+
+## Slash Commands
+
+Use these commands in interactive mode (type them and press Enter):
+
+### Setup & Discovery
+- **/setup** - Check prerequisites and set up required tools
+  - Verifies Node.js version (requires 18+)
+  - Checks for required browsers and frameworks
+  - Configures the default Playwright MCP server
+  - Run this once when starting with a new project
+
+- **/discover** - Scan your project to detect test framework and structure
+  - Reads your package.json to find the test command
+  - Examines existing tests to learn patterns and conventions
+  - Writes findings to .supatest/SUPATEST.md
+  - Helps Supatest understand your project setup
+  - Useful when you want to refresh project information
+
+### Navigation & View
+- **/help** or **/?** - Show this help system
+  - Enter help mode to get answers about CLI features
+  - You can ask follow-up questions and explore topics
+  - Type regular questions or just ask about what you need
+
+- **/resume** - Resume a previous session
+  - View recent sessions and pick one to continue
+  - Useful when you want to continue work where you left off
+  - Sessions are tracked with their progress and results
+
+- **/clear** - Clear the message history
+  - Removes displayed messages from the terminal
+  - Note: This clears the terminal view but starts a new session
+  - Useful when you want a fresh start without losing context
+
+### Configuration & Control
+- **/model** - Cycle through available AI models
+  - Switch between different Claude model versions
+  - Useful if one model works better for your use case
+  - Model choice affects reasoning capability and speed
+
+- **/provider** - Select your LLM provider
+  - Choose between "Supatest Managed" (default) or "Claude Max"
+  - Supatest Managed: Uses models through Supatest infrastructure
+  - Claude Max: Uses your Claude subscription directly
+  - Requires Claude Code login for Claude Max
+  - Available on macOS, Linux, and Windows
+
+- **/mcp** - Show configured MCP servers
+  - View all Model Context Protocol servers available to the agent
+  - See connection status of each server
+  - Add, remove, or test servers
+  - MCP servers extend capabilities (e.g., Playwright for browser automation)
+
+- **/login** - Authenticate with Supatest
+  - Opens your browser to log in to your Supatest account
+  - Creates a secure session token
+  - Required for most features
+
+- **/logout** - Log out of Supatest
+  - Clears your authentication token
+  - Closes your current session
+
+### Feedback & Exit
+- **/feedback** - Report an issue or request a feature
+  - Send feedback directly to the Supatest team
+  - Describe problems, suggest improvements, or request features
+  - Helps improve the product
+
+- **/exit** - Exit the CLI
+  - Cleanly shut down the Supatest CLI
+  - Saves session data
+
+### Project Custom Commands
+If your project has custom commands in .supatest/commands/:
+- **/command-name** - Run a project-specific command
+  - Type /help to see all available commands
+  - Custom commands appear under "Project Commands" section
+  - Use Tab to autocomplete command names
+
+## Keyboard Shortcuts
+
+These work in interactive mode:
+
+### Getting Help
+- **?** - Toggle help (when input is empty)
+- **Ctrl+H** - Toggle help menu anytime
+- **ESC or Q** - Close overlays (help, menus, dialogs)
+
+### Navigation
+- **Ctrl+M** - Cycle through available models
+- **Ctrl+P** - Cycle through LLM providers
+
+### Input & Text Editing
+- **Enter** - Submit your task/prompt
+- **Shift+Enter** - Add a new line in your input (for multi-line prompts)
+- **Ctrl+U** - Clear the current input line
+- **Ctrl+C** - Exit (or clear input if you have content typed)
+- **Ctrl+D** - Exit immediately
+
+### Display & Output
+- **Ctrl+L** - Clear terminal screen
+- **Ctrl+O** - Toggle showing tool outputs
+  - Useful when you want to hide verbose command execution logs
+
+### Interrupt & Control
+- **ESC** - Interrupt a running agent
+  - Stops the current operation immediately
+
+## File References
+
+You can reference files in your prompts using the @filename syntax:
+
+**Syntax**: @path/to/file.ts
+- Example: "Fix the bug in @src/app.ts"
+- Tab autocomplete: Type @ and press Tab to autocomplete file paths
+- Drag & drop: You can drag files from your file explorer directly into the terminal
+
+This tells the agent which files are relevant to your request.
+
+## Configuration
+
+### Environment Variables
+
+Set these environment variables to configure Supatest:
+
+- **SUPATEST_API_KEY** - Your Supatest API key for CI/CD automation
+  - Get from your Supatest dashboard
+  - Use in CI pipelines instead of interactive login
+  - Enables team/org sessions
+
+- **SUPATEST_API_URL** - Custom API endpoint (advanced)
+  - Default: Supatest production API
+  - Use for self-hosted or development instances
+
+- **SUPATEST_DEV** - Enable debug logging
+  - Set to any value to enable verbose debug output
+  - Useful for troubleshooting issues
+  - Writes detailed logs for analysis
+
+- **CLAUDE_API_KEY** - Claude API key for Claude Max
+  - Automatically detected from Claude Code credentials when using Claude Max
+  - Only needed if automatic detection fails
+
+### .supatest/ Directory Structure
+
+Supatest creates and uses a .supatest/ directory in your project:
+
+**Key files:**
+- **.supatest/SUPATEST.md** - Project documentation written by /discover
+  - Contains test framework information
+  - Documents patterns, conventions, and setup
+  - Used by the agent to understand your project
+
+- **.supatest/mcp.json** - MCP server configuration
+  - Defines Model Context Protocol servers available to the agent
+  - Can be project-level (committed to version control) or global
+  - Created by /setup with default Playwright server
+
+- **.supatest/settings.json** - Project settings
+  - Stores user preferences
+  - Auto-generated when you make selections
+
+**Custom content:**
+- **.supatest/commands/** - Custom project commands
+  - Create .md files here to define project-specific slash commands
+  - Format: markdown with YAML frontmatter describing the command
+  - Discovered and shown in /help under "Project Commands"
+
+- **.supatest/agents/** - Custom agent definitions (advanced)
+  - Define specialized agents for specific tasks
+  - Loaded automatically by the system prompt
+
+## MCP (Model Context Protocol) Servers
+
+MCP servers extend Supatest with additional tools and capabilities.
+
+### What is MCP?
+Model Context Protocol is a standard that allows AI agents to interact with external tools and services. MCP servers provide access to:
+- Browser automation (Playwright)
+- File system operations
+- Custom project tools
+- External services
+
+### Default Setup
+When you run /setup, Supatest automatically configures:
+- **Playwright MCP Server** - Browser automation for E2E testing
+  - Command: npx @modelcontextprotocol/server-playwright
+  - Enables: Opening browsers, navigating pages, interacting with UI elements
+
+### Configuration
+
+MCP servers are configured in JSON files. Two levels of configuration:
+
+**Project-level** (.supatest/mcp.json):
+- Specific to your project
+- Committed to version control
+- Shared with your team
+
+**Global** (~/.supatest/mcp.json):
+- Applies to all projects on your machine
+- Personal setup
+
+Project servers take precedence over global servers with the same name.
+
+### Configuration Format
+
+\`\`\`json
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": ["@modelcontextprotocol/server-playwright"],
+      "description": "Browser automation via Playwright",
+      "enabled": true
+    },
+    "custom-tool": {
+      "command": "node",
+      "args": ["/path/to/server.js"],
+      "env": {
+        "API_KEY": "value"
+      },
+      "description": "My custom tool",
+      "enabled": true
+    }
+  }
+}
+\`\`\`
+
+**Fields:**
+- **command** (required) - Executable to run (npx, node, python, etc.)
+- **args** (optional) - Arguments to pass to the command
+- **env** (optional) - Environment variables for the server process
+- **description** (optional) - Human-readable description
+- **enabled** (optional) - Whether server is active (default: true)
+
+### Managing Servers with /mcp
+
+Type /mcp to open the MCP server management interface:
+
+- **View** - See all configured servers with their status and details
+- **A** - Add a new server (guided setup)
+- **R** - Remove a server
+- **T** - Test connection to all servers
+- **ESC/Q** - Close the interface
+
+## npm Package Information
+
+The Supatest CLI is published on npm as **@supatest/cli**.
+
+### Package Details
+- **Name**: @supatest/cli
+- **Registry**: https://www.npmjs.com/package/@supatest/cli
+- **Installation**: npm install -g @supatest/cli (global)
+- **Usage without install**: npx @supatest/cli
+
+### npm Link Setup
+
+For local development of the Supatest CLI package:
+
+**What is npm link?**
+- Creates a symbolic link from your package to global node_modules
+- Allows testing local changes without publishing to npm
+- Perfect for development and testing
+
+**Setup steps:**
+
+1. Clone the Supatest repository
+2. Navigate to cli/ directory: \`cd cli\`
+3. Link the package: \`npm link\`
+4. Now run \`supatest\` anywhere to use your local development version
+
+**Usage:**
+- Run \`supatest\` commands normally - they use your linked local version
+- Changes you make are immediately reflected
+- Useful for testing features before submitting pull requests
+
+**To unlink:**
+- Run \`npm unlink -g @supatest/cli\` to restore the npm version
+
+**For team members:**
+- Shared development: Other devs can link to the same directory
+- Ensure you're on the same branch
+- Test against each other's changes
+
+### Checking Latest Docs
+
+I can fetch the latest information from the npm package page if you'd like:
+- Current version and release notes
+- Package size and dependencies
+- Recent updates and changes
+- How to report issues or contribute
+
+Just ask: "Can you check the npm docs?" or "What's the latest version?"
+
+## Usage Tips & Tricks
+
+### Multi-line Prompts
+- Use Shift+Enter to write prompts across multiple lines
+- Useful for complex instructions: "Test the login flow. First, verify email validation. Then test password reset."
+
+### Referencing Files
+- Drag files from your file explorer into the terminal to add paths
+- Use @filename syntax with Tab autocomplete
+- The agent will examine those files when analyzing your request
+
+### Terminal Integration
+- Most terminals support drag-and-drop of files
+- Works with logs, test output, configuration files
+- Paste long outputs and the agent will analyze them
+
+### Running vs Reading Tests
+- The agent can create, run, and fix tests automatically
+- Provide clear descriptions of what to test
+- The agent will handle framework-specific syntax
+
+### Session Persistence
+- Your conversations are saved and can be resumed
+- Use /resume to continue work from where you left off
+- Useful for long-running projects
+
+### Efficient Feedback
+- Be specific about what's wrong or what you need
+- Include error messages when reporting issues
+- Describe expected vs actual behavior
+
+</cli-documentation>
+
+<conversation-guidelines>
+When answering questions:
+
+1. **Be direct**: Answer the question asked first, then offer related information
+2. **Show examples**: Include practical examples when explaining features
+3. **Cross-reference**: When relevant, mention related commands or features
+4. **Offer help**: Ask if the user needs clarification or has follow-up questions
+5. **Know your limits**: For questions outside CLI features or npm link setup, suggest appropriate next steps
+
+When users ask about npm documentation or want latest info:
+- Offer to check the npm package page
+- Use WebFetch to retrieve current information
+- Share relevant details (versions, changes, links)
+
+When users mix help with actual test building:
+- Answer their help question
+- Then ask if they want to start building tests or need more information
+
+</conversation-guidelines>
+
+<action-guide>
+## How to Help Users with Actions
+
+Beyond answering questions, you can actively help users by taking actions. Here are common scenarios and how to handle them:
+
+### Adding an MCP Server
+
+**When user asks:** "Can you help me add an MCP server?" or "How do I add a custom MCP tool?"
+
+**Action steps:**
+1. Ask what the MCP server is (command, args, optional env vars, description)
+2. Check if .supatest/mcp.json exists: \`read .supatest/mcp.json\`
+3. Parse the existing config (or create empty structure if missing)
+4. Add the new server to mcpServers object
+5. Write the updated config back
+6. Show the user what was added and test it if they want
+
+**Example interaction:**
+- User: "I want to add a custom database tool as MCP server"
+- You: "Great! I can help. Tell me the command to run, any arguments, and what it does"
+- User: "node /path/to/db-tool.js --debug"
+- You: "I'll add that to your .supatest/mcp.json. Let me read your current config first..."
+  [Read file, add server, write back]
+- You: "Done! I've added your 'db-tool' server. Let me test the connection..."
+  [Run test command]
+
+### Checking Current Configuration
+
+**When user asks:** "What's my current setup?" or "Show me my MCP servers"
+
+**Action steps:**
+1. Read .supatest/SUPATEST.md to show test framework info
+2. Read .supatest/mcp.json to show configured servers
+3. Check .supatest/settings.json for saved preferences
+4. Display the information clearly formatted
+5. Explain what each configuration means
+
+### Fixing Configuration Issues
+
+**When user says:** "My MCP server isn't working" or "I think my config is wrong"
+
+**Action steps:**
+1. Read their configuration files
+2. Test the MCP connection if it's a server
+3. Check for common issues:
+   - Missing .supatest/ directory
+   - Malformed JSON
+   - Invalid command paths
+   - Missing required fields
+4. Suggest fixes and apply them with user permission
+5. Test again to confirm resolution
+
+### Setting Up npm Link
+
+**When user asks:** "How do I set up npm link for development?"
+
+**Action steps:**
+1. Verify they're in the cli/ directory (check current location)
+2. Explain the steps
+3. Run the npm link command for them (with permission)
+4. Verify it worked by checking if supatest command is available
+5. Show them how to unlink when done
+
+### Environment Variable Help
+
+**When user asks:** "How do I set SUPATEST_API_KEY?" or "Where do I put environment variables?"
+
+**Action steps:**
+1. Explain the options (export, .env file, shell config)
+2. If they want help creating a .env file, offer to create one
+3. Show them the format they need
+4. For shell profile setup, show the exact lines to add
+
+### Project Instructions Update
+
+**When user says:** "Can you help me document my project setup?"
+
+**Action steps:**
+1. Read their current .supatest/SUPATEST.md if it exists
+2. Ask about their test framework, patterns, conventions
+3. Create/update the documentation
+4. Show them the result and ask if it looks good
+5. Write it back with their approval
+
+### Permission and Transparency
+
+**Critical rules for actions:**
+- ALWAYS ask permission before modifying files
+- SHOW what you're about to do before doing it
+- After making changes, DISPLAY what was added/modified
+- Explain WHY each change was necessary
+- Offer to undo or adjust if user isn't happy with the result
+- When in doubt, read the file first and show it to user before editing
+
+### Tools You Can Use
+
+- **Read**: Check configuration and setup files
+- **Write/Edit**: Create or update config files
+- **Bash**: Run commands to check Node version, test connections, verify npm link
+- **WebFetch**: Get latest npm documentation when requested
+
+Use these tools naturally when helping - not as a last resort, but as the primary way to provide hands-on assistance.
+
+</action-guide>
+`;
+  }
+});
+
 // src/prompts/planner.ts
 var plannerPrompt;
 var init_planner = __esm({
@@ -290,6 +796,7 @@ var init_prompts = __esm({
     init_builder();
     init_discover();
     init_fixer();
+    init_help();
     init_planner();
   }
 });
@@ -5384,7 +5891,7 @@ var CLI_VERSION;
 var init_version = __esm({
   "src/version.ts"() {
     "use strict";
-    CLI_VERSION = "0.0.36";
+    CLI_VERSION = "0.0.38";
   }
 });
 
@@ -6240,6 +6747,7 @@ var init_command_discovery = __esm({
 
 // src/utils/mcp-loader.ts
 import { existsSync as existsSync3, readFileSync as readFileSync2 } from "fs";
+import { homedir as homedir2 } from "os";
 import { join as join4 } from "path";
 function expandEnvVar(value) {
   return value.replace(/\$\{([^}]+)\}/g, (_, expr) => {
@@ -6262,8 +6770,7 @@ function expandServerConfig(config2) {
   }
   return expanded;
 }
-function loadMcpServers(cwd) {
-  const mcpPath = join4(cwd, ".supatest", "mcp.json");
+function loadMcpServersFromFile(mcpPath) {
   if (!existsSync3(mcpPath)) {
     return {};
   }
@@ -6275,6 +6782,9 @@ function loadMcpServers(cwd) {
     }
     const expanded = {};
     for (const [name, serverConfig] of Object.entries(config2.mcpServers)) {
+      if (serverConfig.enabled === false) {
+        continue;
+      }
       expanded[name] = expandServerConfig(serverConfig);
     }
     return expanded;
@@ -6286,6 +6796,13 @@ function loadMcpServers(cwd) {
     return {};
   }
 }
+function loadMcpServers(cwd) {
+  const globalMcpPath = join4(homedir2(), ".supatest", "mcp.json");
+  const globalServers = loadMcpServersFromFile(globalMcpPath);
+  const projectMcpPath = join4(cwd, ".supatest", "mcp.json");
+  const projectServers = loadMcpServersFromFile(projectMcpPath);
+  return { ...globalServers, ...projectServers };
+}
 var init_mcp_loader = __esm({
   "src/utils/mcp-loader.ts"() {
     "use strict";
@@ -6318,7 +6835,7 @@ var init_project_instructions = __esm({
 
 // src/core/agent.ts
 import { createRequire } from "module";
-import { homedir as homedir2 } from "os";
+import { homedir as homedir3 } from "os";
 import { dirname, join as join6 } from "path";
 import { query } from "@anthropic-ai/claude-agent-sdk";
 var CoreAgent;
@@ -6419,7 +6936,7 @@ ${projectInstructions}`,
           this.presenter.onLog(`Auth: Using Claude Max (default Claude Code credentials)`);
           logger.debug("[agent] Claude Max mode: Using default ~/.claude/ config, cleared provider credentials");
         } else {
-          const internalConfigDir = join6(homedir2(), ".supatest", "claude-internal");
+          const internalConfigDir = join6(homedir3(), ".supatest", "claude-internal");
           cleanEnv.CLAUDE_CONFIG_DIR = internalConfigDir;
           cleanEnv.ANTHROPIC_API_KEY = config2.supatestApiKey || "";
           cleanEnv.ANTHROPIC_BASE_URL = process.env.ANTHROPIC_BASE_URL || "";
@@ -6450,9 +6967,17 @@ ${projectInstructions}`,
           // MCP servers from .supatest/mcp.json
           // Users can add servers like Playwright if needed
           mcpServers: (() => {
+            logger.debug("[agent] Loading MCP servers for query", { cwd });
             const servers = loadMcpServers(cwd);
+            logger.debug("[agent] MCP servers loaded", {
+              count: Object.keys(servers).length,
+              serverNames: Object.keys(servers),
+              fullConfig: servers
+            });
             if (Object.keys(servers).length > 0) {
               this.presenter.onLog(`MCP servers: ${Object.keys(servers).join(", ")}`);
+            } else {
+              logger.debug("[agent] No MCP servers configured");
             }
             return servers;
           })(),
@@ -6512,7 +7037,14 @@ ${projectInstructions}`,
             maxTurns: options.maxTurns,
             permissionMode: options.permissionMode,
             hasResume: !!options.resume,
-            cwd: options.cwd
+            cwd: options.cwd,
+            mcpServerCount: Object.keys(options.mcpServers || {}).length,
+            mcpServerNames: Object.keys(options.mcpServers || {})
+          });
+          logger.debug("[agent] Full query options", {
+            ...options,
+            // Don't log sensitive env vars
+            env: Object.keys(options.env || {})
           });
           const queryIterator = query({ prompt, options });
           if (this.messageBridge) {
@@ -8425,7 +8957,7 @@ var init_encryption = __esm({
 
 // src/utils/token-storage.ts
 import { existsSync as existsSync5, mkdirSync as mkdirSync2, readFileSync as readFileSync4, unlinkSync as unlinkSync2, writeFileSync } from "fs";
-import { homedir as homedir4 } from "os";
+import { homedir as homedir5 } from "os";
 import { join as join7 } from "path";
 function getTokenFilePath() {
   const apiUrl = process.env.SUPATEST_API_URL || PRODUCTION_API_URL;
@@ -8500,7 +9032,7 @@ var init_token_storage = __esm({
   "src/utils/token-storage.ts"() {
     "use strict";
     init_encryption();
-    CONFIG_DIR = join7(homedir4(), ".supatest");
+    CONFIG_DIR = join7(homedir5(), ".supatest");
     PRODUCTION_API_URL = "https://code-api.supatest.ai";
     STORAGE_VERSION = 2;
     TOKEN_FILE = join7(CONFIG_DIR, "token.json");
@@ -8625,18 +9157,22 @@ async function exchangeCodeForToken(code, state) {
 function openBrowser(url) {
   const os3 = platform();
   let command;
+  let args;
   switch (os3) {
     case "darwin":
       command = "open";
+      args = [url];
       break;
     case "win32":
       command = "start";
+      args = ["", url];
       break;
     default:
       command = "xdg-open";
+      args = [url];
   }
   const options = { detached: true, stdio: "ignore", shell: os3 === "win32" };
-  spawn2(command, [url], options).unref();
+  spawn2(command, args, options).unref();
 }
 function startCallbackServer(port, expectedState) {
   return new Promise((resolve2, reject) => {
@@ -8975,7 +9511,7 @@ var init_login = __esm({
 // src/utils/claude-max.ts
 import { execSync as execSync5 } from "child_process";
 import { existsSync as existsSync6, readFileSync as readFileSync5 } from "fs";
-import { homedir as homedir5 } from "os";
+import { homedir as homedir6 } from "os";
 import { join as join8 } from "path";
 function isClaudeMaxAvailable() {
   const platform2 = process.platform;
@@ -9012,7 +9548,7 @@ function checkMacOSKeychain() {
 }
 function checkCredentialsFile() {
   try {
-    const credentialsPath = join8(homedir5(), ".claude", ".credentials.json");
+    const credentialsPath = join8(homedir6(), ".claude", ".credentials.json");
     if (!existsSync6(credentialsPath)) {
       logger.debug("[claude-max] Credentials file not found", { path: credentialsPath });
       return false;
@@ -9040,16 +9576,248 @@ var init_claude_max = __esm({
   }
 });
 
-// src/utils/settings-loader.ts
+// src/utils/mcp-manager.ts
 import { existsSync as existsSync7, mkdirSync as mkdirSync3, readFileSync as readFileSync6, writeFileSync as writeFileSync2 } from "fs";
+import { homedir as homedir7 } from "os";
 import { join as join9 } from "path";
+function getGlobalMcpPath() {
+  return join9(homedir7(), ".supatest", "mcp.json");
+}
+function getProjectMcpPath(cwd) {
+  return join9(cwd, ".supatest", "mcp.json");
+}
+function loadMcpConfigFromFile(mcpPath, scope) {
+  if (!existsSync7(mcpPath)) {
+    return {};
+  }
+  try {
+    const content = readFileSync6(mcpPath, "utf-8");
+    const config2 = JSON.parse(content);
+    if (!config2.mcpServers) {
+      return {};
+    }
+    const servers = {};
+    for (const [name, serverConfig] of Object.entries(config2.mcpServers)) {
+      servers[name] = {
+        name,
+        command: serverConfig.command,
+        args: serverConfig.args,
+        env: serverConfig.env,
+        enabled: serverConfig.enabled !== false,
+        // Default to enabled
+        description: serverConfig.description,
+        scope
+      };
+    }
+    return servers;
+  } catch (error) {
+    console.warn(
+      `Warning: Failed to load MCP config from ${mcpPath}:`,
+      error instanceof Error ? error.message : String(error)
+    );
+    return {};
+  }
+}
+function loadMcpConfig(cwd) {
+  const globalServers = loadMcpConfigFromFile(getGlobalMcpPath(), "global");
+  const projectServers = loadMcpConfigFromFile(getProjectMcpPath(cwd), "project");
+  return { ...globalServers, ...projectServers };
+}
+function saveMcpConfigToFile(mcpPath, servers) {
+  const mcpDir = join9(mcpPath, "..");
+  if (!existsSync7(mcpDir)) {
+    mkdirSync3(mcpDir, { recursive: true });
+  }
+  const config2 = {
+    mcpServers: {}
+  };
+  for (const [name, server] of Object.entries(servers)) {
+    config2.mcpServers[name] = {
+      command: server.command,
+      args: server.args,
+      env: server.env,
+      enabled: server.enabled,
+      description: server.description
+    };
+  }
+  writeFileSync2(mcpPath, JSON.stringify(config2, null, 2), "utf-8");
+}
+function saveMcpConfig(cwd, servers) {
+  const globalServers = {};
+  const projectServers = {};
+  for (const [name, server] of Object.entries(servers)) {
+    if (server.scope === "global") {
+      globalServers[name] = server;
+    } else {
+      projectServers[name] = server;
+    }
+  }
+  if (Object.keys(globalServers).length > 0) {
+    saveMcpConfigToFile(getGlobalMcpPath(), globalServers);
+  }
+  if (Object.keys(projectServers).length > 0) {
+    saveMcpConfigToFile(getProjectMcpPath(cwd), projectServers);
+  }
+}
+function addMcpServer(cwd, name, command, args, env, description, scope = "project") {
+  const servers = loadMcpConfig(cwd);
+  const isUpdate = !!servers[name];
+  servers[name] = {
+    name,
+    command,
+    args,
+    env,
+    enabled: true,
+    description,
+    scope
+  };
+  try {
+    saveMcpConfig(cwd, servers);
+    const action = isUpdate ? "updated" : "added";
+    const scopeLabel = scope === "global" ? "(global)" : "(project)";
+    return {
+      success: true,
+      message: `MCP server "${name}" ${action} successfully ${scopeLabel}`,
+      isUpdate
+    };
+  } catch (error) {
+    return {
+      success: false,
+      message: `Failed to add MCP server: ${error instanceof Error ? error.message : String(error)}`,
+      isUpdate
+    };
+  }
+}
+function removeMcpServer(cwd, name) {
+  const servers = loadMcpConfig(cwd);
+  if (!servers[name]) {
+    return {
+      success: false,
+      message: `MCP server "${name}" not found`
+    };
+  }
+  delete servers[name];
+  try {
+    saveMcpConfig(cwd, servers);
+    return {
+      success: true,
+      message: `MCP server "${name}" removed successfully`
+    };
+  } catch (error) {
+    return {
+      success: false,
+      message: `Failed to remove MCP server: ${error instanceof Error ? error.message : String(error)}`
+    };
+  }
+}
+function enableMcpServer(cwd, name) {
+  const servers = loadMcpConfig(cwd);
+  if (!servers[name]) {
+    return {
+      success: false,
+      message: `MCP server "${name}" not found`
+    };
+  }
+  servers[name].enabled = true;
+  try {
+    saveMcpConfig(cwd, servers);
+    return {
+      success: true,
+      message: `MCP server "${name}" enabled`
+    };
+  } catch (error) {
+    return {
+      success: false,
+      message: `Failed to enable MCP server: ${error instanceof Error ? error.message : String(error)}`
+    };
+  }
+}
+function disableMcpServer(cwd, name) {
+  const servers = loadMcpConfig(cwd);
+  if (!servers[name]) {
+    return {
+      success: false,
+      message: `MCP server "${name}" not found`
+    };
+  }
+  servers[name].enabled = false;
+  try {
+    saveMcpConfig(cwd, servers);
+    return {
+      success: true,
+      message: `MCP server "${name}" disabled`
+    };
+  } catch (error) {
+    return {
+      success: false,
+      message: `Failed to disable MCP server: ${error instanceof Error ? error.message : String(error)}`
+    };
+  }
+}
+async function testMcpConnection(name, server) {
+  try {
+    let Client;
+    let StdioClientTransport;
+    try {
+      const clientModule = await import("@modelcontextprotocol/sdk/client");
+      const stdioModule = await import("@modelcontextprotocol/sdk/client/stdio.js");
+      Client = clientModule.Client;
+      StdioClientTransport = stdioModule.StdioClientTransport;
+    } catch (error) {
+      return {
+        status: "failed",
+        message: `MCP SDK not installed for server "${name}"`,
+        error: `Install @modelcontextprotocol/sdk to enable connection testing: ${error instanceof Error ? error.message : String(error)}`
+      };
+    }
+    const client = new Client({
+      name: "supatest-mcp-test",
+      version: "1.0.0"
+    });
+    const transport = new StdioClientTransport({
+      command: server.command,
+      args: server.args || [],
+      env: { ...process.env, ...server.env }
+    });
+    const timeoutPromise = new Promise((_, reject) => {
+      setTimeout(() => reject(new Error("Connection timeout (5s)")), 5e3);
+    });
+    await Promise.race([
+      (async () => {
+        await client.connect(transport);
+        await client.close();
+      })(),
+      timeoutPromise
+    ]);
+    return {
+      status: "connected",
+      message: `MCP server "${name}" connected successfully`
+    };
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    return {
+      status: "failed",
+      message: `Failed to connect to MCP server "${name}"`,
+      error: errorMessage
+    };
+  }
+}
+var init_mcp_manager = __esm({
+  "src/utils/mcp-manager.ts"() {
+    "use strict";
+  }
+});
+
+// src/utils/settings-loader.ts
+import { existsSync as existsSync8, mkdirSync as mkdirSync4, readFileSync as readFileSync7, writeFileSync as writeFileSync3 } from "fs";
+import { join as join10 } from "path";
 function loadSupatestSettings(cwd) {
-  const settingsPath = join9(cwd, ".supatest", "settings.json");
-  if (!existsSync7(settingsPath)) {
+  const settingsPath = join10(cwd, ".supatest", "settings.json");
+  if (!existsSync8(settingsPath)) {
     return {};
   }
   try {
-    const content = readFileSync6(settingsPath, "utf-8");
+    const content = readFileSync7(settingsPath, "utf-8");
     return JSON.parse(content);
   } catch (error) {
     console.warn(
@@ -9060,11 +9828,11 @@ function loadSupatestSettings(cwd) {
   }
 }
 function saveSupatestSettings(cwd, settings) {
-  const settingsDir = join9(cwd, ".supatest");
-  const settingsPath = join9(settingsDir, "settings.json");
+  const settingsDir = join10(cwd, ".supatest");
+  const settingsPath = join10(settingsDir, "settings.json");
   try {
-    if (!existsSync7(settingsDir)) {
-      mkdirSync3(settingsDir, { recursive: true });
+    if (!existsSync8(settingsDir)) {
+      mkdirSync4(settingsDir, { recursive: true });
     }
     const existingSettings = loadSupatestSettings(cwd);
     const mergedSettings = {
@@ -9080,7 +9848,7 @@ function saveSupatestSettings(cwd, settings) {
         ...settings.hooks
       }
     };
-    writeFileSync2(settingsPath, JSON.stringify(mergedSettings, null, 2), "utf-8");
+    writeFileSync3(settingsPath, JSON.stringify(mergedSettings, null, 2), "utf-8");
   } catch (error) {
     console.warn(
       `Warning: Failed to save settings to ${settingsPath}:`,
@@ -10497,56 +11265,6 @@ var init_FixFlow = __esm({
   }
 });
 
-// src/ui/components/HelpMenu.tsx
-import { Box as Box20, Text as Text18, useInput as useInput5 } from "ink";
-import React23, { useEffect as useEffect9, useState as useState9 } from "react";
-var HelpMenu;
-var init_HelpMenu = __esm({
-  "src/ui/components/HelpMenu.tsx"() {
-    "use strict";
-    init_command_discovery();
-    init_theme();
-    HelpMenu = ({ isAuthenticated, onClose, cwd }) => {
-      const [customCommands, setCustomCommands] = useState9([]);
-      useEffect9(() => {
-        const projectDir = cwd || process.cwd();
-        const commands = discoverCommands(projectDir);
-        setCustomCommands(commands);
-      }, [cwd]);
-      useInput5((input, key) => {
-        if (key.escape || input === "q" || input === "?" || key.ctrl && input === "h") {
-          onClose();
-        }
-      });
-      return /* @__PURE__ */ React23.createElement(
-        Box20,
-        {
-          borderColor: theme.border.accent,
-          borderStyle: "round",
-          flexDirection: "column",
-          paddingX: 2,
-          paddingY: 1
-        },
-        /* @__PURE__ */ React23.createElement(Text18, { bold: true, color: theme.text.accent }, "\u{1F4D6} Supatest AI CLI - Help"),
-        /* @__PURE__ */ React23.createElement(Box20, { marginTop: 1 }),
-        /* @__PURE__ */ React23.createElement(Text18, { bold: true, color: theme.text.secondary }, "Slash Commands:"),
-        /* @__PURE__ */ React23.createElement(Box20, { flexDirection: "column", marginLeft: 2, marginTop: 0 }, /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "/help"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " or "), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "/?"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Toggle this help menu")), /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "/resume"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Resume a previous session")), /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "/clear"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Clear message history")), /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "/model"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Cycle through available models")), /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "/provider"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Select LLM provider (Supatest Managed or Claude Max)")), /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "/setup"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Initial setup for Supatest CLI")), /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "/discover"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Discover test framework and write to SUPATEST.md")), /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "/feedback"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Report an issue or request a feature")), isAuthenticated ? /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "/logout"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Log out of Supatest")) : /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "/login"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Authenticate with Supatest")), /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "/exit"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Exit the CLI"))),
-        customCommands.length > 0 && /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Box20, { marginTop: 1 }), /* @__PURE__ */ React23.createElement(Text18, { bold: true, color: theme.text.secondary }, "Project Commands:"), /* @__PURE__ */ React23.createElement(Box20, { flexDirection: "column", marginLeft: 2, marginTop: 0 }, customCommands.slice(0, 5).map((cmd) => /* @__PURE__ */ React23.createElement(Text18, { key: cmd.name }, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "/", cmd.name), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, cmd.description ? ` - ${cmd.description}` : ""))), customCommands.length > 5 && /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, "...and ", customCommands.length - 5, " more (use Tab to autocomplete)"))),
-        /* @__PURE__ */ React23.createElement(Box20, { marginTop: 1 }),
-        /* @__PURE__ */ React23.createElement(Text18, { bold: true, color: theme.text.secondary }, "Keyboard Shortcuts:"),
-        /* @__PURE__ */ React23.createElement(Box20, { flexDirection: "column", marginLeft: 2, marginTop: 0 }, /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "?"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " ", "- Toggle help (when input is empty)")), /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "Ctrl+H"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Toggle help")), /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "Ctrl+C"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " ", "- Exit (or clear input if not empty)")), /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "Ctrl+D"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Exit immediately")), /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "Ctrl+L"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Clear terminal screen")), /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "Ctrl+U"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Clear current input line")), /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "ESC"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Interrupt running agent")), /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "Shift+Enter"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Add new line in input")), /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "ctrl+o"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Toggle tool outputs")), /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "Ctrl+M"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " - Cycle through models"))),
-        /* @__PURE__ */ React23.createElement(Box20, { marginTop: 1 }),
-        /* @__PURE__ */ React23.createElement(Text18, { bold: true, color: theme.text.secondary }, "File References:"),
-        /* @__PURE__ */ React23.createElement(Box20, { flexDirection: "column", marginLeft: 2, marginTop: 0 }, /* @__PURE__ */ React23.createElement(Text18, null, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.accent }, "@filename"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, " ", "- Reference a file (autocomplete with Tab)")), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, 'Example: "Fix the bug in @src/app.ts"')),
-        /* @__PURE__ */ React23.createElement(Box20, { marginTop: 1 }),
-        /* @__PURE__ */ React23.createElement(Text18, { bold: true, color: theme.text.secondary }, "Tips:"),
-        /* @__PURE__ */ React23.createElement(Box20, { flexDirection: "column", marginLeft: 2, marginTop: 0 }, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, "\u2022 Press Enter to submit your task"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, "\u2022 Use Shift+Enter to write multi-line prompts"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, "\u2022 Drag and drop files into the terminal to add file paths"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, "\u2022 The agent will automatically run tools and fix issues"), /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, "\u2022 Use Ctrl+L to clear the terminal screen without clearing the messages history")),
-        /* @__PURE__ */ React23.createElement(Box20, { marginTop: 1 }, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, "Press ", /* @__PURE__ */ React23.createElement(Text18, { bold: true }, "ESC"), " or ", /* @__PURE__ */ React23.createElement(Text18, { bold: true }, "?"), " to close"))
-      );
-    };
-  }
-});
-
 // src/ui/utils/file-completion.ts
 import fs4 from "fs";
 import path4 from "path";
@@ -10630,8 +11348,8 @@ var init_file_completion = __esm({
 });
 
 // src/ui/components/ModelSelector.tsx
-import { Box as Box21, Text as Text19, useInput as useInput6 } from "ink";
-import React24, { useState as useState10 } from "react";
+import { Box as Box20, Text as Text18, useInput as useInput5 } from "ink";
+import React23, { useState as useState9 } from "react";
 function getAvailableModels(isClaudeMax) {
   if (isClaudeMax) {
     return AVAILABLE_MODELS.map((m) => ({
@@ -10666,8 +11384,8 @@ var init_ModelSelector = __esm({
     }) => {
       const models = getAvailableModels(isClaudeMax);
       const currentIndex = models.findIndex((m) => m.id === currentModel);
-      const [selectedIndex, setSelectedIndex] = useState10(currentIndex >= 0 ? currentIndex : 0);
-      useInput6((input, key) => {
+      const [selectedIndex, setSelectedIndex] = useState9(currentIndex >= 0 ? currentIndex : 0);
+      useInput5((input, key) => {
         if (key.upArrow) {
           setSelectedIndex((prev) => prev > 0 ? prev - 1 : models.length - 1);
         } else if (key.downArrow) {
@@ -10678,12 +11396,12 @@ var init_ModelSelector = __esm({
           onCancel();
         }
       });
-      return /* @__PURE__ */ React24.createElement(Box21, { borderColor: theme.border.accent, borderStyle: "round", flexDirection: "column", padding: 1 }, /* @__PURE__ */ React24.createElement(Box21, { marginBottom: 1 }, /* @__PURE__ */ React24.createElement(Text19, { bold: true, color: theme.text.accent }, "Select Model")), /* @__PURE__ */ React24.createElement(Box21, { marginBottom: 1 }, /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.dim }, "Cost: ", /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.info }, "0.5x"), " (Small) \u2022 ", /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.info }, "1x"), " (Medium) \u2022 ", /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.info }, "2x"), " (Premium)")), /* @__PURE__ */ React24.createElement(Box21, { flexDirection: "column" }, models.map((model, index) => {
+      return /* @__PURE__ */ React23.createElement(Box20, { borderColor: theme.border.accent, borderStyle: "round", flexDirection: "column", padding: 1 }, /* @__PURE__ */ React23.createElement(Box20, { marginBottom: 1 }, /* @__PURE__ */ React23.createElement(Text18, { bold: true, color: theme.text.accent }, "Select Model")), /* @__PURE__ */ React23.createElement(Box20, { marginBottom: 1 }, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, "Cost: ", /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.info }, "0.5x"), " (Small) \u2022 ", /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.info }, "1x"), " (Medium) \u2022 ", /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.info }, "2x"), " (Premium)")), /* @__PURE__ */ React23.createElement(Box20, { flexDirection: "column" }, models.map((model, index) => {
         const isSelected = index === selectedIndex;
         const isCurrent = model.id === currentModel;
         const indicator = isSelected ? "\u25B6 " : "  ";
-        return /* @__PURE__ */ React24.createElement(Box21, { gap: 1, key: model.id }, /* @__PURE__ */ React24.createElement(
-          Text19,
+        return /* @__PURE__ */ React23.createElement(Box20, { gap: 1, key: model.id }, /* @__PURE__ */ React23.createElement(
+          Text18,
           {
             backgroundColor: isSelected ? theme.text.accent : void 0,
             bold: isSelected,
@@ -10691,15 +11409,15 @@ var init_ModelSelector = __esm({
           },
           indicator,
           model.name.padEnd(12)
-        ), /* @__PURE__ */ React24.createElement(
-          Text19,
+        ), /* @__PURE__ */ React23.createElement(
+          Text18,
           {
             backgroundColor: isSelected ? theme.text.accent : void 0,
             color: isSelected ? "black" : theme.text.dim
           },
           model.description
-        ), isCurrent && /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.success }, " (current)"));
-      })), /* @__PURE__ */ React24.createElement(Box21, { marginTop: 1 }, /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.dim }, /* @__PURE__ */ React24.createElement(Text19, { bold: true }, "\u2191\u2193"), " navigate \u2022 ", /* @__PURE__ */ React24.createElement(Text19, { bold: true }, "Enter"), " select \u2022 ", /* @__PURE__ */ React24.createElement(Text19, { bold: true }, "ESC"), " cancel")));
+        ), isCurrent && /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.success }, " (current)"));
+      })), /* @__PURE__ */ React23.createElement(Box20, { marginTop: 1 }, /* @__PURE__ */ React23.createElement(Text18, { color: theme.text.dim }, /* @__PURE__ */ React23.createElement(Text18, { bold: true }, "\u2191\u2193"), " navigate \u2022 ", /* @__PURE__ */ React23.createElement(Text18, { bold: true }, "Enter"), " select \u2022 ", /* @__PURE__ */ React23.createElement(Text18, { bold: true }, "ESC"), " cancel")));
     };
   }
 });
@@ -10707,8 +11425,8 @@ var init_ModelSelector = __esm({
 // src/ui/components/InputPrompt.tsx
 import path5 from "path";
 import chalk4 from "chalk";
-import { Box as Box22, Text as Text20 } from "ink";
-import React25, { forwardRef, useEffect as useEffect10, useImperativeHandle, useState as useState11 } from "react";
+import { Box as Box21, Text as Text19 } from "ink";
+import React24, { forwardRef, useEffect as useEffect9, useImperativeHandle, useState as useState10 } from "react";
 var InputPrompt;
 var init_InputPrompt = __esm({
   "src/ui/components/InputPrompt.tsx"() {
@@ -10732,13 +11450,13 @@ var init_InputPrompt = __esm({
       isClaudeMax = false
     }, ref) => {
       const { messages, agentMode, selectedModel, setSelectedModel, isAgentRunning, usageStats } = useSession();
-      const [value, setValue] = useState11("");
-      const [cursorOffset, setCursorOffset] = useState11(0);
-      const [allFiles, setAllFiles] = useState11([]);
-      const [suggestions, setSuggestions] = useState11([]);
-      const [activeSuggestion, setActiveSuggestion] = useState11(0);
-      const [showSuggestions, setShowSuggestions] = useState11(false);
-      const [mentionStartIndex, setMentionStartIndex] = useState11(-1);
+      const [value, setValue] = useState10("");
+      const [cursorOffset, setCursorOffset] = useState10(0);
+      const [allFiles, setAllFiles] = useState10([]);
+      const [suggestions, setSuggestions] = useState10([]);
+      const [activeSuggestion, setActiveSuggestion] = useState10(0);
+      const [showSuggestions, setShowSuggestions] = useState10(false);
+      const [mentionStartIndex, setMentionStartIndex] = useState10(-1);
       const BUILTIN_SLASH_COMMANDS = [
         { name: "/help", desc: "Show help" },
         { name: "/resume", desc: "Resume session" },
@@ -10749,13 +11467,14 @@ var init_InputPrompt = __esm({
         { name: "/feedback", desc: "Report an issue" },
         { name: "/setup", desc: "Install Playwright browsers" },
         { name: "/discover", desc: "Discover test framework" },
+        { name: "/mcp", desc: "Show MCP servers" },
         { name: "/login", desc: "Authenticate with Supatest" },
         { name: "/logout", desc: "Log out" },
         { name: "/exit", desc: "Exit CLI" }
       ];
-      const [customCommands, setCustomCommands] = useState11([]);
-      const [isSlashCommand, setIsSlashCommand] = useState11(false);
-      useEffect10(() => {
+      const [customCommands, setCustomCommands] = useState10([]);
+      const [isSlashCommand, setIsSlashCommand] = useState10(false);
+      useEffect9(() => {
         try {
           const projectDir = cwd || process.cwd();
           const discovered = discoverCommands(projectDir);
@@ -10776,7 +11495,7 @@ var init_InputPrompt = __esm({
           onInputChange?.("");
         }
       }));
-      useEffect10(() => {
+      useEffect9(() => {
         setTimeout(() => {
           try {
             const files = getFiles();
@@ -10890,8 +11609,8 @@ var init_InputPrompt = __esm({
             setSelectedModel(getNextModel(selectedModel, isClaudeMax));
             return;
           }
-          if (input === "?" && value.length === 0 && onHelpToggle) {
-            onHelpToggle();
+          if (input === "?" && value.length === 0) {
+            onSubmit("/help");
             return;
           }
           if (showSuggestions && !key.shift) {
@@ -10976,8 +11695,8 @@ var init_InputPrompt = __esm({
         }
         charCount += lineLength + 1;
       }
-      return /* @__PURE__ */ React25.createElement(Box22, { flexDirection: "column", width: "100%" }, showSuggestions && /* @__PURE__ */ React25.createElement(
-        Box22,
+      return /* @__PURE__ */ React24.createElement(Box21, { flexDirection: "column", width: "100%" }, showSuggestions && /* @__PURE__ */ React24.createElement(
+        Box21,
         {
           borderColor: theme.border.default,
           borderStyle: "round",
@@ -10988,12 +11707,12 @@ var init_InputPrompt = __esm({
         suggestions.map((item, idx) => {
           const isSeparator = item.startsWith("\u2500\u2500\u2500\u2500\u2500");
           if (isSeparator) {
-            return /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.dim, key: item }, "  ", item);
+            return /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.dim, key: item }, "  ", item);
           }
-          return /* @__PURE__ */ React25.createElement(Text20, { color: idx === activeSuggestion ? theme.text.accent : theme.text.dim, key: item }, idx === activeSuggestion ? "\u276F " : "  ", item);
+          return /* @__PURE__ */ React24.createElement(Text19, { color: idx === activeSuggestion ? theme.text.accent : theme.text.dim, key: item }, idx === activeSuggestion ? "\u276F " : "  ", item);
         })
-      ), /* @__PURE__ */ React25.createElement(
-        Box22,
+      ), /* @__PURE__ */ React24.createElement(
+        Box21,
         {
           borderColor: disabled ? theme.border.default : theme.border.accent,
           borderStyle: "round",
@@ -11003,24 +11722,288 @@ var init_InputPrompt = __esm({
           paddingX: 1,
           width: "100%"
         },
-        /* @__PURE__ */ React25.createElement(Box22, { flexDirection: "row" }, /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.accent }, "\u276F "), /* @__PURE__ */ React25.createElement(Box22, { flexDirection: "column", flexGrow: 1 }, !hasContent && !disabled && /* @__PURE__ */ React25.createElement(Text20, null, chalk4.inverse(placeholder.slice(0, 1)), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.dim, italic: true }, placeholder.slice(1))), lines.length > 0 && /* @__PURE__ */ React25.createElement(Box22, { flexDirection: "column" }, lines.map((line, idx) => {
+        /* @__PURE__ */ React24.createElement(Box21, { flexDirection: "row" }, /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.accent }, "\u276F "), /* @__PURE__ */ React24.createElement(Box21, { flexDirection: "column", flexGrow: 1 }, !hasContent && !disabled && /* @__PURE__ */ React24.createElement(Text19, null, chalk4.inverse(placeholder.slice(0, 1)), /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.dim, italic: true }, placeholder.slice(1))), lines.length > 0 && /* @__PURE__ */ React24.createElement(Box21, { flexDirection: "column" }, lines.map((line, idx) => {
           if (idx === cursorLine && !disabled) {
             const before = line.slice(0, cursorCol);
             const charAtCursor = line[cursorCol] || " ";
             const after = line.slice(cursorCol + 1);
-            return /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.primary, key: idx }, before, chalk4.inverse(charAtCursor), after);
+            return /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.primary, key: idx }, before, chalk4.inverse(charAtCursor), after);
           }
-          return /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.primary, key: idx }, line);
-        })), !hasContent && disabled && /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.dim, italic: true }, "Waiting for agent to complete...")))
-      ), /* @__PURE__ */ React25.createElement(Box22, { justifyContent: "space-between", paddingX: 1 }, /* @__PURE__ */ React25.createElement(Box22, { gap: 2 }, /* @__PURE__ */ React25.createElement(Box22, null, /* @__PURE__ */ React25.createElement(Text20, { color: agentMode === "plan" ? theme.status.inProgress : theme.text.dim }, agentMode === "plan" ? "\u23F8 plan" : "\u25B6 build"), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.dim }, " (shift+tab)")), /* @__PURE__ */ React25.createElement(Box22, null, /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.dim }, "model:"), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.info }, getModelDisplayName(selectedModel)), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.dim }, " (Cost: "), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.info }, getModelCostLabel(selectedModel)), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.dim }, ") (shift+m)"))), /* @__PURE__ */ React25.createElement(Box22, null, /* @__PURE__ */ React25.createElement(Text20, { color: usageStats && usageStats.contextPct >= 90 ? theme.text.error : usageStats && usageStats.contextPct >= 75 ? theme.text.warning : theme.text.dim }, usageStats?.contextPct ?? 0, "% context used"), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.dim }, " ", "(", usageStats ? usageStats.inputTokens >= 1e3 ? `${(usageStats.inputTokens / 1e3).toFixed(1)}K` : usageStats.inputTokens : 0, " / ", usageStats ? usageStats.contextWindow >= 1e3 ? `${(usageStats.contextWindow / 1e3).toFixed(0)}K` : usageStats.contextWindow : "200K", ")"))));
+          return /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.primary, key: idx }, line);
+        })), !hasContent && disabled && /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.dim, italic: true }, "Waiting for agent to complete...")))
+      ), /* @__PURE__ */ React24.createElement(Box21, { justifyContent: "space-between", paddingX: 1 }, /* @__PURE__ */ React24.createElement(Box21, { gap: 2 }, /* @__PURE__ */ React24.createElement(Box21, null, /* @__PURE__ */ React24.createElement(Text19, { color: agentMode === "plan" ? theme.status.inProgress : theme.text.dim }, agentMode === "plan" ? "\u23F8 plan" : "\u25B6 build"), /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.dim }, " (shift+tab)")), /* @__PURE__ */ React24.createElement(Box21, null, /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.dim }, "model:"), /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.info }, getModelDisplayName(selectedModel)), /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.dim }, " (Cost: "), /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.info }, getModelCostLabel(selectedModel)), /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.dim }, ") (shift+m)"))), /* @__PURE__ */ React24.createElement(Box21, null, /* @__PURE__ */ React24.createElement(Text19, { color: usageStats && usageStats.contextPct >= 90 ? theme.text.error : usageStats && usageStats.contextPct >= 75 ? theme.text.warning : theme.text.dim }, usageStats?.contextPct ?? 0, "% context used"), /* @__PURE__ */ React24.createElement(Text19, { color: theme.text.dim }, " ", "(", usageStats ? usageStats.inputTokens >= 1e3 ? `${(usageStats.inputTokens / 1e3).toFixed(1)}K` : usageStats.inputTokens : 0, " / ", usageStats ? usageStats.contextWindow >= 1e3 ? `${(usageStats.contextWindow / 1e3).toFixed(0)}K` : usageStats.contextWindow : "200K", ")"))));
     });
     InputPrompt.displayName = "InputPrompt";
   }
 });
 
-// src/ui/components/ProviderSelector.tsx
+// src/ui/components/McpAddDialog.tsx
+import { Box as Box22, Text as Text20, useInput as useInput6 } from "ink";
+import React25, { useState as useState11 } from "react";
+var McpAddDialog;
+var init_McpAddDialog = __esm({
+  "src/ui/components/McpAddDialog.tsx"() {
+    "use strict";
+    init_theme();
+    McpAddDialog = ({ onConfirm, onCancel }) => {
+      const [mode, setMode] = useState11("name" /* Name */);
+      const [serverName, setServerName] = useState11("");
+      const [command, setCommand] = useState11("");
+      const [args, setArgs] = useState11("");
+      const [description, setDescription] = useState11("");
+      const [scope, setScope] = useState11("project");
+      useInput6((input, key) => {
+        if (key.escape) {
+          onCancel();
+          return;
+        }
+        if (key.return) {
+          if (mode === "name" /* Name */ && serverName.trim()) {
+            setMode("command" /* Command */);
+          } else if (mode === "command" /* Command */ && command.trim()) {
+            setMode("args" /* Args */);
+          } else if (mode === "args" /* Args */) {
+            setMode("description" /* Description */);
+          } else if (mode === "description" /* Description */) {
+            setMode("scope" /* Scope */);
+          } else if (mode === "scope" /* Scope */) {
+            setMode("confirm" /* Confirm */);
+          } else if (mode === "confirm" /* Confirm */) {
+            const parsedArgs = args.trim().split(/\s+/).filter((a) => a);
+            onConfirm(serverName, command, parsedArgs.length > 0 ? parsedArgs : void 0, {}, description, scope);
+          }
+          return;
+        }
+        if (mode === "name" /* Name */) {
+          if (input.length === 1 && /[a-zA-Z0-9-_]/.test(input)) {
+            setServerName((prev) => prev + input);
+          } else if (key.backspace && serverName.length > 0) {
+            setServerName((prev) => prev.slice(0, -1));
+          }
+        } else if (mode === "command" /* Command */) {
+          if (input.length === 1) {
+            setCommand((prev) => prev + input);
+          } else if (key.backspace && command.length > 0) {
+            setCommand((prev) => prev.slice(0, -1));
+          }
+        } else if (mode === "args" /* Args */) {
+          if (input.length === 1) {
+            setArgs((prev) => prev + input);
+          } else if (key.backspace && args.length > 0) {
+            setArgs((prev) => prev.slice(0, -1));
+          }
+        } else if (mode === "description" /* Description */) {
+          if (input.length === 1) {
+            setDescription((prev) => prev + input);
+          } else if (key.backspace && description.length > 0) {
+            setDescription((prev) => prev.slice(0, -1));
+          }
+        } else if (mode === "scope" /* Scope */) {
+          if (key.upArrow) {
+            setScope("project");
+          } else if (key.downArrow) {
+            setScope("global");
+          }
+        } else if (mode === "confirm" /* Confirm */) {
+          if (input === "y" || input === "Y") {
+            const parsedArgs = args.trim().split(/\s+/).filter((a) => a);
+            onConfirm(
+              serverName,
+              command,
+              parsedArgs.length > 0 ? parsedArgs : void 0,
+              {},
+              description,
+              scope
+            );
+          } else if (input === "n" || input === "N") {
+            onCancel();
+          }
+        }
+      });
+      return /* @__PURE__ */ React25.createElement(
+        Box22,
+        {
+          borderColor: theme.border.accent,
+          borderStyle: "round",
+          flexDirection: "column",
+          paddingX: 2,
+          paddingY: 1
+        },
+        /* @__PURE__ */ React25.createElement(Text20, { bold: true, color: theme.text.accent }, "\u2795 Add MCP Server"),
+        /* @__PURE__ */ React25.createElement(Box22, { marginTop: 1 }),
+        mode === "name" /* Name */ && /* @__PURE__ */ React25.createElement(Box22, { flexDirection: "column" }, /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Server name (alphanumeric, - or _):"), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.accent }, "> ", serverName || "_")),
+        mode === "command" /* Command */ && /* @__PURE__ */ React25.createElement(Box22, { flexDirection: "column" }, /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Server name: ", serverName), /* @__PURE__ */ React25.createElement(Box22, { marginTop: 0 }), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Command (e.g., npx, node, python):"), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.accent }, "> ", command || "_")),
+        mode === "args" /* Args */ && /* @__PURE__ */ React25.createElement(Box22, { flexDirection: "column" }, /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Server name: ", serverName), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Command: ", command), /* @__PURE__ */ React25.createElement(Box22, { marginTop: 0 }), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Arguments (space-separated, press Enter to skip):"), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.accent }, "> ", args || "(none)")),
+        mode === "description" /* Description */ && /* @__PURE__ */ React25.createElement(Box22, { flexDirection: "column" }, /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Server name: ", serverName), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Command: ", command), args && /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Args: ", args), /* @__PURE__ */ React25.createElement(Box22, { marginTop: 0 }), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Description (optional, press Enter to skip):"), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.accent }, "> ", description || "(none)")),
+        mode === "scope" /* Scope */ && /* @__PURE__ */ React25.createElement(Box22, { flexDirection: "column" }, /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Server name: ", serverName), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Command: ", command), args && /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Args: ", args), description && /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Description: ", description), /* @__PURE__ */ React25.createElement(Box22, { marginTop: 0 }), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Choose scope (\u2191\u2193 to navigate):"), /* @__PURE__ */ React25.createElement(Box22, { flexDirection: "row", marginLeft: 2, marginTop: 1 }, /* @__PURE__ */ React25.createElement(Text20, { bold: scope === "project", color: scope === "project" ? theme.text.accent : theme.text.dim }, scope === "project" ? "\u25B6 " : "  ", "Project (.supatest/mcp.json)")), /* @__PURE__ */ React25.createElement(Box22, { flexDirection: "row", marginLeft: 2 }, /* @__PURE__ */ React25.createElement(Text20, { bold: scope === "global", color: scope === "global" ? theme.text.accent : theme.text.dim }, scope === "global" ? "\u25B6 " : "  ", "Global (~/.supatest/mcp.json)")), /* @__PURE__ */ React25.createElement(Box22, { marginTop: 1 }), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.dim }, "Press Enter to continue")),
+        mode === "confirm" /* Confirm */ && /* @__PURE__ */ React25.createElement(Box22, { flexDirection: "column" }, /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Review configuration:"), /* @__PURE__ */ React25.createElement(Box22, { marginTop: 0 }), /* @__PURE__ */ React25.createElement(Box22, { flexDirection: "column", marginLeft: 2 }, /* @__PURE__ */ React25.createElement(Text20, null, /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Name: "), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.accent }, serverName)), /* @__PURE__ */ React25.createElement(Text20, null, /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Command: "), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.accent }, command)), args && /* @__PURE__ */ React25.createElement(Text20, null, /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Args: "), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.accent }, args)), description && /* @__PURE__ */ React25.createElement(Text20, null, /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Description: "), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.accent }, description)), /* @__PURE__ */ React25.createElement(Text20, null, /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Scope: "), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.accent }, scope))), /* @__PURE__ */ React25.createElement(Box22, { marginTop: 1 }), /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.secondary }, "Add this server? (y/n)")),
+        /* @__PURE__ */ React25.createElement(Box22, { marginTop: 1 }),
+        /* @__PURE__ */ React25.createElement(Text20, { color: theme.text.dim }, "Press ESC to cancel")
+      );
+    };
+  }
+});
+
+// src/ui/components/McpServerSelector.tsx
 import { Box as Box23, Text as Text21, useInput as useInput7 } from "ink";
 import React26, { useState as useState12 } from "react";
+var McpServerSelector;
+var init_McpServerSelector = __esm({
+  "src/ui/components/McpServerSelector.tsx"() {
+    "use strict";
+    init_theme();
+    McpServerSelector = ({
+      servers,
+      action,
+      onSelect,
+      onCancel
+    }) => {
+      const [selectedIndex, setSelectedIndex] = useState12(0);
+      useInput7((input, key) => {
+        if (key.escape) {
+          onCancel();
+          return;
+        }
+        if (key.upArrow) {
+          setSelectedIndex((prev) => prev > 0 ? prev - 1 : servers.length - 1);
+        } else if (key.downArrow) {
+          setSelectedIndex((prev) => prev < servers.length - 1 ? prev + 1 : 0);
+        } else if (key.return) {
+          onSelect(servers[selectedIndex].name);
+        }
+      });
+      const actionLabels = {
+        remove: "Remove MCP Server",
+        enable: "Enable MCP Server",
+        disable: "Disable MCP Server",
+        test: "Test MCP Server Connection"
+      };
+      const actionColors = {
+        remove: theme.text.error,
+        enable: theme.text.success,
+        disable: theme.text.warning,
+        test: theme.text.accent
+      };
+      return /* @__PURE__ */ React26.createElement(
+        Box23,
+        {
+          borderColor: theme.border.accent,
+          borderStyle: "round",
+          flexDirection: "column",
+          paddingX: 2,
+          paddingY: 1
+        },
+        /* @__PURE__ */ React26.createElement(Text21, { bold: true, color: actionColors[action] }, actionLabels[action]),
+        /* @__PURE__ */ React26.createElement(Box23, { marginTop: 1 }),
+        servers.length === 0 ? /* @__PURE__ */ React26.createElement(Box23, { flexDirection: "column" }, /* @__PURE__ */ React26.createElement(Text21, { color: theme.text.dim }, "No MCP servers configured.")) : /* @__PURE__ */ React26.createElement(Box23, { flexDirection: "column" }, servers.map((server, index) => {
+          const isSelected = index === selectedIndex;
+          const statusEmoji = server.enabled ? "\u2713" : "\u2717";
+          return /* @__PURE__ */ React26.createElement(Box23, { flexDirection: "row", key: server.name }, /* @__PURE__ */ React26.createElement(
+            Text21,
+            {
+              bold: isSelected,
+              color: isSelected ? theme.text.accent : theme.text.dim
+            },
+            isSelected ? "\u276F " : "  "
+          ), /* @__PURE__ */ React26.createElement(Text21, { color: isSelected ? theme.text.accent : theme.text.secondary }, statusEmoji, " ", server.name), server.scope && /* @__PURE__ */ React26.createElement(Text21, { color: theme.text.dim }, " (", server.scope, ")"), server.description && /* @__PURE__ */ React26.createElement(Text21, { color: theme.text.dim }, " - ", server.description));
+        })),
+        /* @__PURE__ */ React26.createElement(Box23, { marginTop: 1 }),
+        /* @__PURE__ */ React26.createElement(Text21, { color: theme.text.dim }, "Use \u2191\u2193 to select, Enter to confirm, ESC to cancel")
+      );
+    };
+  }
+});
+
+// src/ui/components/McpServersDisplay.tsx
+import { Box as Box24, Text as Text22, useInput as useInput8 } from "ink";
+import Spinner3 from "ink-spinner";
+import React27, { useEffect as useEffect10, useState as useState13 } from "react";
+var McpServersDisplay;
+var init_McpServersDisplay = __esm({
+  "src/ui/components/McpServersDisplay.tsx"() {
+    "use strict";
+    init_mcp_manager();
+    init_theme();
+    McpServersDisplay = ({
+      onClose,
+      onAdd,
+      onRemove,
+      onTest,
+      cwd
+    }) => {
+      const [servers, setServers] = useState13([]);
+      const [isTestingAll, setIsTestingAll] = useState13(false);
+      useEffect10(() => {
+        const projectDir = cwd || process.cwd();
+        const loadedServers = loadMcpConfig(projectDir);
+        const serversArray = Object.values(loadedServers).map((server) => ({
+          ...server,
+          status: "unknown"
+        }));
+        setServers(serversArray);
+      }, [cwd]);
+      useInput8((input, key) => {
+        if (key.escape || input === "q") {
+          onClose();
+        } else if (input === "a") {
+          onAdd?.();
+        } else if (input === "r") {
+          onRemove?.();
+        } else if (input === "t") {
+          onTest?.();
+        }
+      });
+      return /* @__PURE__ */ React27.createElement(
+        Box24,
+        {
+          borderColor: theme.border.accent,
+          borderStyle: "round",
+          flexDirection: "column",
+          paddingX: 2,
+          paddingY: 1
+        },
+        /* @__PURE__ */ React27.createElement(Text22, { bold: true, color: theme.text.accent }, "\u{1F50C} Model Context Protocol (MCP) Servers"),
+        /* @__PURE__ */ React27.createElement(Box24, { marginTop: 1 }),
+        servers.length === 0 ? /* @__PURE__ */ React27.createElement(Box24, { flexDirection: "column" }, /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.dim }, "No MCP servers configured."), /* @__PURE__ */ React27.createElement(Box24, { marginTop: 1 }), /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.dim }, "Press ", /* @__PURE__ */ React27.createElement(Text22, { bold: true }, "A"), " to add a new server, or create", " ", /* @__PURE__ */ React27.createElement(Text22, { bold: true }, ".supatest/mcp.json"), ":"), /* @__PURE__ */ React27.createElement(Box24, { marginTop: 1 }), /* @__PURE__ */ React27.createElement(
+          Box24,
+          {
+            borderColor: theme.border.default,
+            borderStyle: "round",
+            flexDirection: "column",
+            marginLeft: 2,
+            paddingX: 1,
+            paddingY: 0
+          },
+          /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.dim }, `{
+  "mcpServers": {
+    "server-name": {
+      "command": "npx",
+      "args": ["@modelcontextprotocol/server-package"]
+    }
+  }
+}`)
+        )) : /* @__PURE__ */ React27.createElement(Box24, { flexDirection: "column" }, isTestingAll && /* @__PURE__ */ React27.createElement(Box24, { flexDirection: "row", marginBottom: 1 }, /* @__PURE__ */ React27.createElement(Box24, { width: 2 }, /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.accent }, /* @__PURE__ */ React27.createElement(Spinner3, { type: "dots" }))), /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.secondary }, "Testing connections...")), servers.map((server, index) => {
+          let statusIndicator = "";
+          let statusText = "";
+          if (server.status === "connected") {
+            statusIndicator = "\u2713";
+            statusText = " - Connected";
+          } else if (server.status === "failed") {
+            statusIndicator = "\u2717";
+            statusText = " - Failed";
+          }
+          return /* @__PURE__ */ React27.createElement(Box24, { flexDirection: "column", key: server.name }, index > 0 && /* @__PURE__ */ React27.createElement(Box24, { marginTop: 1 }), /* @__PURE__ */ React27.createElement(Box24, { flexDirection: "row" }, statusIndicator && /* @__PURE__ */ React27.createElement(Text22, { color: server.status === "connected" ? theme.text.success : theme.text.error }, statusIndicator, " "), /* @__PURE__ */ React27.createElement(Text22, { bold: true, color: theme.text.accent }, server.name), server.scope && /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.dim }, " (", server.scope, ")"), !server.enabled && /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.warning }, " [disabled]"), statusText && /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.dim }, statusText)), /* @__PURE__ */ React27.createElement(Box24, { flexDirection: "column", marginLeft: 2, marginTop: 0 }, /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.secondary }, "Command: ", /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.dim }, server.command)), server.args && server.args.length > 0 && /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.secondary }, "Args: ", /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.dim }, server.args.join(" "))), server.env && Object.keys(server.env).length > 0 && /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.secondary }, "Env: ", /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.dim }, Object.entries(server.env).map(([k, v]) => `${k}=${v}`).join(", "))), server.description && /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.secondary }, "Description:", " ", /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.dim }, server.description)), server.status === "failed" && server.errorMessage && /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.error }, "Error: ", server.errorMessage)));
+        })),
+        /* @__PURE__ */ React27.createElement(Box24, { marginTop: 1 }),
+        /* @__PURE__ */ React27.createElement(Box24, { flexDirection: "column" }, /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.dim }, /* @__PURE__ */ React27.createElement(Text22, { bold: true }, "A"), " - Add server | ", /* @__PURE__ */ React27.createElement(Text22, { bold: true }, "R"), " - Remove | ", /* @__PURE__ */ React27.createElement(Text22, { bold: true }, "T"), " - Test"), /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.dim }, "Press ", /* @__PURE__ */ React27.createElement(Text22, { bold: true }, "ESC"), " or ", /* @__PURE__ */ React27.createElement(Text22, { bold: true }, "Q"), " to close"))
+      );
+    };
+  }
+});
+
+// src/ui/components/ProviderSelector.tsx
+import { Box as Box25, Text as Text23, useInput as useInput9 } from "ink";
+import React28, { useState as useState14 } from "react";
 var PROVIDERS, ProviderSelector;
 var init_ProviderSelector = __esm({
   "src/ui/components/ProviderSelector.tsx"() {
@@ -11050,10 +12033,10 @@ var init_ProviderSelector = __esm({
       const currentIndex = availableProviders.findIndex(
         (p) => p.id === currentProvider
       );
-      const [selectedIndex, setSelectedIndex] = useState12(
+      const [selectedIndex, setSelectedIndex] = useState14(
         currentIndex >= 0 ? currentIndex : 0
       );
-      useInput7((input, key) => {
+      useInput9((input, key) => {
         if (key.upArrow) {
           setSelectedIndex(
             (prev) => prev > 0 ? prev - 1 : availableProviders.length - 1
@@ -11068,12 +12051,12 @@ var init_ProviderSelector = __esm({
           onCancel();
         }
       });
-      return /* @__PURE__ */ React26.createElement(Box23, { borderColor: theme.border.accent, borderStyle: "round", flexDirection: "column", padding: 1 }, /* @__PURE__ */ React26.createElement(Box23, { marginBottom: 1 }, /* @__PURE__ */ React26.createElement(Text21, { bold: true, color: theme.text.accent }, "Select LLM Provider")), /* @__PURE__ */ React26.createElement(Box23, { flexDirection: "column" }, availableProviders.map((provider, index) => {
+      return /* @__PURE__ */ React28.createElement(Box25, { borderColor: theme.border.accent, borderStyle: "round", flexDirection: "column", padding: 1 }, /* @__PURE__ */ React28.createElement(Box25, { marginBottom: 1 }, /* @__PURE__ */ React28.createElement(Text23, { bold: true, color: theme.text.accent }, "Select LLM Provider")), /* @__PURE__ */ React28.createElement(Box25, { flexDirection: "column" }, availableProviders.map((provider, index) => {
         const isSelected = index === selectedIndex;
         const isCurrent = provider.id === currentProvider;
         const indicator = isSelected ? "\u25B6 " : "  ";
-        return /* @__PURE__ */ React26.createElement(
-          Text21,
+        return /* @__PURE__ */ React28.createElement(
+          Text23,
           {
             backgroundColor: isSelected ? theme.text.accent : void 0,
             bold: isSelected,
@@ -11082,17 +12065,17 @@ var init_ProviderSelector = __esm({
           },
           indicator,
           provider.name,
-          isCurrent && /* @__PURE__ */ React26.createElement(Text21, { color: isSelected ? "black" : theme.text.success }, " (current)"),
-          /* @__PURE__ */ React26.createElement(Text21, { color: isSelected ? "black" : theme.text.dim }, " - ", provider.description)
+          isCurrent && /* @__PURE__ */ React28.createElement(Text23, { color: isSelected ? "black" : theme.text.success }, " (current)"),
+          /* @__PURE__ */ React28.createElement(Text23, { color: isSelected ? "black" : theme.text.dim }, " - ", provider.description)
         );
-      })), /* @__PURE__ */ React26.createElement(Box23, { marginTop: 1 }, /* @__PURE__ */ React26.createElement(Text21, { color: theme.text.dim }, /* @__PURE__ */ React26.createElement(Text21, { bold: true }, "\u2191\u2193"), " navigate \u2022 ", /* @__PURE__ */ React26.createElement(Text21, { bold: true }, "Enter"), " select \u2022", " ", /* @__PURE__ */ React26.createElement(Text21, { bold: true }, "ESC"), " cancel")));
+      })), /* @__PURE__ */ React28.createElement(Box25, { marginTop: 1 }, /* @__PURE__ */ React28.createElement(Text23, { color: theme.text.dim }, /* @__PURE__ */ React28.createElement(Text23, { bold: true }, "\u2191\u2193"), " navigate \u2022 ", /* @__PURE__ */ React28.createElement(Text23, { bold: true }, "Enter"), " select \u2022", " ", /* @__PURE__ */ React28.createElement(Text23, { bold: true }, "ESC"), " cancel")));
     };
   }
 });
 
 // src/ui/components/SessionSelector.tsx
-import { Box as Box24, Text as Text22, useInput as useInput8 } from "ink";
-import React27, { useEffect as useEffect11, useState as useState13 } from "react";
+import { Box as Box26, Text as Text24, useInput as useInput10 } from "ink";
+import React29, { useEffect as useEffect11, useState as useState15 } from "react";
 function getSessionPrefix(authMethod) {
   return authMethod === "api-key" ? "[Team]" : "[Me]";
 }
@@ -11107,12 +12090,12 @@ var init_SessionSelector = __esm({
       onSelect,
       onCancel
     }) => {
-      const [allSessions, setAllSessions] = useState13([]);
-      const [selectedIndex, setSelectedIndex] = useState13(0);
-      const [isLoading, setIsLoading] = useState13(false);
-      const [hasMore, setHasMore] = useState13(true);
-      const [totalSessions, setTotalSessions] = useState13(0);
-      const [error, setError] = useState13(null);
+      const [allSessions, setAllSessions] = useState15([]);
+      const [selectedIndex, setSelectedIndex] = useState15(0);
+      const [isLoading, setIsLoading] = useState15(false);
+      const [hasMore, setHasMore] = useState15(true);
+      const [totalSessions, setTotalSessions] = useState15(0);
+      const [error, setError] = useState15(null);
       useEffect11(() => {
         loadMoreSessions();
       }, []);
@@ -11139,7 +12122,7 @@ var init_SessionSelector = __esm({
           setIsLoading(false);
         }
       };
-      useInput8((input, key) => {
+      useInput10((input, key) => {
         if (allSessions.length === 0) {
           if (key.escape || input === "q") {
             onCancel();
@@ -11163,13 +12146,13 @@ var init_SessionSelector = __esm({
         }
       });
       if (error) {
-        return /* @__PURE__ */ React27.createElement(Box24, { borderColor: "red", borderStyle: "round", flexDirection: "column", padding: 1 }, /* @__PURE__ */ React27.createElement(Text22, { bold: true, color: "red" }, "Error Loading Sessions"), /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.dim }, error), /* @__PURE__ */ React27.createElement(Box24, { marginTop: 1 }, /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.dim }, "Press ", /* @__PURE__ */ React27.createElement(Text22, { bold: true }, "ESC"), " to cancel")));
+        return /* @__PURE__ */ React29.createElement(Box26, { borderColor: "red", borderStyle: "round", flexDirection: "column", padding: 1 }, /* @__PURE__ */ React29.createElement(Text24, { bold: true, color: "red" }, "Error Loading Sessions"), /* @__PURE__ */ React29.createElement(Text24, { color: theme.text.dim }, error), /* @__PURE__ */ React29.createElement(Box26, { marginTop: 1 }, /* @__PURE__ */ React29.createElement(Text24, { color: theme.text.dim }, "Press ", /* @__PURE__ */ React29.createElement(Text24, { bold: true }, "ESC"), " to cancel")));
       }
       if (allSessions.length === 0 && isLoading) {
-        return /* @__PURE__ */ React27.createElement(Box24, { borderColor: "cyan", borderStyle: "round", flexDirection: "column", padding: 1 }, /* @__PURE__ */ React27.createElement(Text22, { bold: true, color: "cyan" }, "Loading Sessions..."), /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.dim }, "Fetching your sessions from the server"));
+        return /* @__PURE__ */ React29.createElement(Box26, { borderColor: "cyan", borderStyle: "round", flexDirection: "column", padding: 1 }, /* @__PURE__ */ React29.createElement(Text24, { bold: true, color: "cyan" }, "Loading Sessions..."), /* @__PURE__ */ React29.createElement(Text24, { color: theme.text.dim }, "Fetching your sessions from the server"));
       }
       if (allSessions.length === 0 && !isLoading) {
-        return /* @__PURE__ */ React27.createElement(Box24, { borderColor: "yellow", borderStyle: "round", flexDirection: "column", padding: 1 }, /* @__PURE__ */ React27.createElement(Text22, { bold: true, color: "yellow" }, "No Sessions Found"), /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.dim }, "No previous sessions available. Start a new conversation!"), /* @__PURE__ */ React27.createElement(Box24, { marginTop: 1 }, /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.dim }, "Press ", /* @__PURE__ */ React27.createElement(Text22, { bold: true }, "ESC"), " to cancel")));
+        return /* @__PURE__ */ React29.createElement(Box26, { borderColor: "yellow", borderStyle: "round", flexDirection: "column", padding: 1 }, /* @__PURE__ */ React29.createElement(Text24, { bold: true, color: "yellow" }, "No Sessions Found"), /* @__PURE__ */ React29.createElement(Text24, { color: theme.text.dim }, "No previous sessions available. Start a new conversation!"), /* @__PURE__ */ React29.createElement(Box26, { marginTop: 1 }, /* @__PURE__ */ React29.createElement(Text24, { color: theme.text.dim }, "Press ", /* @__PURE__ */ React29.createElement(Text24, { bold: true }, "ESC"), " to cancel")));
       }
       const VISIBLE_ITEMS3 = 10;
       let startIndex;
@@ -11189,7 +12172,7 @@ var init_SessionSelector = __esm({
       const visibleSessions = allSessions.slice(startIndex, endIndex);
       const MAX_TITLE_WIDTH = 50;
       const PREFIX_WIDTH = 6;
-      return /* @__PURE__ */ React27.createElement(Box24, { borderColor: "cyan", borderStyle: "round", flexDirection: "column", padding: 1 }, /* @__PURE__ */ React27.createElement(Box24, { marginBottom: 1 }, /* @__PURE__ */ React27.createElement(Text22, { bold: true, color: "cyan" }, "Select a Session to Resume")), /* @__PURE__ */ React27.createElement(Box24, { flexDirection: "column" }, visibleSessions.map((item, index) => {
+      return /* @__PURE__ */ React29.createElement(Box26, { borderColor: "cyan", borderStyle: "round", flexDirection: "column", padding: 1 }, /* @__PURE__ */ React29.createElement(Box26, { marginBottom: 1 }, /* @__PURE__ */ React29.createElement(Text24, { bold: true, color: "cyan" }, "Select a Session to Resume")), /* @__PURE__ */ React29.createElement(Box26, { flexDirection: "column" }, visibleSessions.map((item, index) => {
         const actualIndex = startIndex + index;
         const isSelected = actualIndex === selectedIndex;
         const title = item.session.title || "Untitled session";
@@ -11213,8 +12196,8 @@ var init_SessionSelector = __esm({
         const prefixColor = item.prefix === "[Me]" ? "cyan" : "yellow";
         const indicator = isSelected ? "\u25B6 " : "  ";
         const bgColor = isSelected ? theme.text.accent : void 0;
-        return /* @__PURE__ */ React27.createElement(Box24, { key: item.session.id, width: "100%" }, /* @__PURE__ */ React27.createElement(Text22, { backgroundColor: bgColor, bold: isSelected, color: isSelected ? "black" : theme.text.primary }, indicator), /* @__PURE__ */ React27.createElement(Text22, { backgroundColor: bgColor, bold: isSelected, color: prefixColor }, prefix), /* @__PURE__ */ React27.createElement(Text22, { backgroundColor: bgColor, bold: isSelected, color: isSelected ? "black" : theme.text.primary }, displayTitle), /* @__PURE__ */ React27.createElement(Text22, { backgroundColor: bgColor, color: theme.text.dim }, "(", dateStr, ")"));
-      })), /* @__PURE__ */ React27.createElement(Box24, { flexDirection: "column", marginTop: 1 }, (allSessions.length > VISIBLE_ITEMS3 || totalSessions > allSessions.length) && /* @__PURE__ */ React27.createElement(Box24, { marginBottom: 1 }, /* @__PURE__ */ React27.createElement(Text22, { color: "yellow" }, "Showing ", startIndex + 1, "-", endIndex, " of ", totalSessions || allSessions.length, " sessions", hasMore && !isLoading && /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.dim }, " \u2022 Scroll for more"))), /* @__PURE__ */ React27.createElement(Box24, null, /* @__PURE__ */ React27.createElement(Text22, { color: theme.text.dim }, "Use ", /* @__PURE__ */ React27.createElement(Text22, { bold: true }, "\u2191\u2193"), " to navigate \u2022 ", /* @__PURE__ */ React27.createElement(Text22, { bold: true }, "Enter"), " to select \u2022 ", /* @__PURE__ */ React27.createElement(Text22, { bold: true }, "ESC"), " to cancel")), isLoading && /* @__PURE__ */ React27.createElement(Box24, { marginTop: 1 }, /* @__PURE__ */ React27.createElement(Text22, { color: "cyan" }, "Loading more sessions..."))));
+        return /* @__PURE__ */ React29.createElement(Box26, { key: item.session.id, width: "100%" }, /* @__PURE__ */ React29.createElement(Text24, { backgroundColor: bgColor, bold: isSelected, color: isSelected ? "black" : theme.text.primary }, indicator), /* @__PURE__ */ React29.createElement(Text24, { backgroundColor: bgColor, bold: isSelected, color: prefixColor }, prefix), /* @__PURE__ */ React29.createElement(Text24, { backgroundColor: bgColor, bold: isSelected, color: isSelected ? "black" : theme.text.primary }, displayTitle), /* @__PURE__ */ React29.createElement(Text24, { backgroundColor: bgColor, color: theme.text.dim }, "(", dateStr, ")"));
+      })), /* @__PURE__ */ React29.createElement(Box26, { flexDirection: "column", marginTop: 1 }, (allSessions.length > VISIBLE_ITEMS3 || totalSessions > allSessions.length) && /* @__PURE__ */ React29.createElement(Box26, { marginBottom: 1 }, /* @__PURE__ */ React29.createElement(Text24, { color: "yellow" }, "Showing ", startIndex + 1, "-", endIndex, " of ", totalSessions || allSessions.length, " sessions", hasMore && !isLoading && /* @__PURE__ */ React29.createElement(Text24, { color: theme.text.dim }, " \u2022 Scroll for more"))), /* @__PURE__ */ React29.createElement(Box26, null, /* @__PURE__ */ React29.createElement(Text24, { color: theme.text.dim }, "Use ", /* @__PURE__ */ React29.createElement(Text24, { bold: true }, "\u2191\u2193"), " to navigate \u2022 ", /* @__PURE__ */ React29.createElement(Text24, { bold: true }, "Enter"), " to select \u2022 ", /* @__PURE__ */ React29.createElement(Text24, { bold: true }, "ESC"), " to cancel")), isLoading && /* @__PURE__ */ React29.createElement(Box26, { marginTop: 1 }, /* @__PURE__ */ React29.createElement(Text24, { color: "cyan" }, "Loading more sessions..."))));
     };
   }
 });
@@ -11264,10 +12247,10 @@ var init_useOverlayEscapeGuard = __esm({
 
 // src/ui/App.tsx
 import { execSync as execSync6 } from "child_process";
-import { homedir as homedir6 } from "os";
-import { Box as Box25, Text as Text23, useApp as useApp2, useStdout as useStdout2 } from "ink";
-import Spinner3 from "ink-spinner";
-import React28, { useEffect as useEffect13, useRef as useRef5, useState as useState14 } from "react";
+import { homedir as homedir8 } from "os";
+import { Box as Box27, Text as Text25, useApp as useApp2, useStdout as useStdout2 } from "ink";
+import Spinner4 from "ink-spinner";
+import React30, { useEffect as useEffect13, useRef as useRef5, useState as useState16 } from "react";
 var getGitBranch2, getCurrentFolder2, AppContent, App;
 var init_App = __esm({
   "src/ui/App.tsx"() {
@@ -11278,6 +12261,7 @@ var init_App = __esm({
     init_prompts();
     init_claude_max();
     init_command_discovery();
+    init_mcp_manager();
     init_settings_loader();
     init_stdio();
     init_token_storage();
@@ -11286,8 +12270,10 @@ var init_App = __esm({
     init_AuthDialog();
     init_FeedbackDialog();
     init_FixFlow();
-    init_HelpMenu();
     init_InputPrompt();
+    init_McpAddDialog();
+    init_McpServerSelector();
+    init_McpServersDisplay();
     init_MessageList();
     init_ModelSelector();
     init_ProviderSelector();
@@ -11307,7 +12293,7 @@ var init_App = __esm({
     };
     getCurrentFolder2 = (configCwd) => {
       const cwd = configCwd || process.cwd();
-      const home = homedir6();
+      const home = homedir8();
       if (cwd.startsWith(home)) {
         return `~${cwd.slice(home.length)}`;
       }
@@ -11318,27 +12304,43 @@ var init_App = __esm({
       const { stdout } = useStdout2();
       const { addMessage, clearMessages, isAgentRunning, messages, setSessionId, setWebUrl, setShouldInterruptAgent, setIsAgentRunning, toggleAllToolOutputs, allToolsExpanded, selectedModel, setSelectedModel, refreshStatic, toggleToolGroups, llmProvider, setLlmProvider } = useSession();
       useModeToggle();
-      const [terminalWidth, setTerminalWidth] = useState14(process.stdout.columns || 80);
-      const [showHelp, setShowHelp] = useState14(false);
-      const [showInput, setShowInput] = useState14(true);
-      const [gitBranch] = useState14(() => getGitBranch2());
-      const [currentFolder] = useState14(() => getCurrentFolder2(config2.cwd));
-      const [hasInputContent, setHasInputContent] = useState14(false);
-      const [exitWarning, setExitWarning] = useState14(null);
+      const [terminalWidth, setTerminalWidth] = useState16(process.stdout.columns || 80);
+      const [showInput, setShowInput] = useState16(true);
+      const [gitBranch] = useState16(() => getGitBranch2());
+      const [currentFolder] = useState16(() => getCurrentFolder2(config2.cwd));
+      const [hasInputContent, setHasInputContent] = useState16(false);
+      const [exitWarning, setExitWarning] = useState16(null);
       const inputPromptRef = useRef5(null);
-      const [showSessionSelector, setShowSessionSelector] = useState14(false);
-      const [showModelSelector, setShowModelSelector] = useState14(false);
-      const [showProviderSelector, setShowProviderSelector] = useState14(false);
-      const [showFeedbackDialog, setShowFeedbackDialog] = useState14(false);
-      const [isLoadingSession, setIsLoadingSession] = useState14(false);
-      const [showFixFlow, setShowFixFlow] = useState14(false);
-      const [fixRunId, setFixRunId] = useState14(void 0);
-      const [authState, setAuthState] = useState14(
+      const [showSessionSelector, setShowSessionSelector] = useState16(false);
+      const [showModelSelector, setShowModelSelector] = useState16(false);
+      const [showProviderSelector, setShowProviderSelector] = useState16(false);
+      const [showFeedbackDialog, setShowFeedbackDialog] = useState16(false);
+      const [isLoadingSession, setIsLoadingSession] = useState16(false);
+      const [showFixFlow, setShowFixFlow] = useState16(false);
+      const [fixRunId, setFixRunId] = useState16(void 0);
+      const [showMcpServers, setShowMcpServers] = useState16(false);
+      const [showMcpAdd, setShowMcpAdd] = useState16(false);
+      const [showMcpSelector, setShowMcpSelector] = useState16(false);
+      const [mcpSelectorAction, setMcpSelectorAction] = useState16(
+        "remove"
+      );
+      const [mcpServers, setMcpServers] = useState16([]);
+      const [authState, setAuthState] = useState16(
         () => config2.supatestApiKey ? "authenticated" /* Authenticated */ : "unauthenticated" /* Unauthenticated */
       );
-      const [showAuthDialog, setShowAuthDialog] = useState14(false);
+      const [showAuthDialog, setShowAuthDialog] = useState16(false);
       const { isOverlayOpen, isCancelSuppressed, markOverlayClosed } = useOverlayEscapeGuard({
-        overlays: [showHelp, showSessionSelector, showAuthDialog, showModelSelector, showProviderSelector, showFeedbackDialog, showFixFlow]
+        overlays: [
+          showSessionSelector,
+          showAuthDialog,
+          showModelSelector,
+          showProviderSelector,
+          showFeedbackDialog,
+          showFixFlow,
+          showMcpServers,
+          showMcpAdd,
+          showMcpSelector
+        ]
       });
       useEffect13(() => {
         if (!config2.supatestApiKey) {
@@ -11396,7 +12398,7 @@ var init_App = __esm({
             return;
           }
           if (command === "/help" || command === "/?") {
-            setShowHelp((prev) => !prev);
+            onSubmitTask?.(helpPrompt);
             return;
           }
           if (command === "/login") {
@@ -11525,6 +12527,10 @@ var init_App = __esm({
             onSubmitTask?.(discoverPrompt);
             return;
           }
+          if (command === "/mcp") {
+            setShowMcpServers(true);
+            return;
+          }
           const projectDir = config2.cwd || process.cwd();
           const spaceIndex = trimmedTask.indexOf(" ");
           const commandName = spaceIndex > 0 ? trimmedTask.slice(1, spaceIndex) : trimmedTask.slice(1);
@@ -11677,9 +12683,112 @@ var init_App = __esm({
         setIsAgentRunning(true);
         onSubmitTask?.(prompt);
       };
-      const handleHelpClose = () => {
+      const handleMcpServersClose = () => {
         markOverlayClosed();
-        setShowHelp(false);
+        setShowMcpServers(false);
+      };
+      const loadMcpServersForSelector = () => {
+        const servers = Object.values(loadMcpConfig(config2.cwd || process.cwd()));
+        setMcpServers(servers);
+      };
+      const handleMcpAdd = () => {
+        setShowMcpServers(false);
+        setShowMcpAdd(true);
+      };
+      const handleMcpAddConfirm = (name, command, args, env, description, scope) => {
+        const result = addMcpServer(config2.cwd || process.cwd(), name, command, args, env, description, scope);
+        setShowMcpAdd(false);
+        markOverlayClosed();
+        if (result.success) {
+          addMessage({
+            type: "assistant",
+            content: result.message
+          });
+          setShowMcpServers(true);
+        } else {
+          addMessage({
+            type: "error",
+            content: result.message,
+            errorType: "error"
+          });
+        }
+      };
+      const handleMcpAddCancel = () => {
+        setShowMcpAdd(false);
+        markOverlayClosed();
+        setShowMcpServers(true);
+      };
+      const handleMcpRemove = () => {
+        loadMcpServersForSelector();
+        setMcpSelectorAction("remove");
+        setShowMcpServers(false);
+        setShowMcpSelector(true);
+      };
+      const handleMcpTest = () => {
+        loadMcpServersForSelector();
+        setMcpSelectorAction("test");
+        setShowMcpServers(false);
+        setShowMcpSelector(true);
+      };
+      const handleMcpSelectorConfirm = async (serverName) => {
+        const cwd = config2.cwd || process.cwd();
+        const servers = loadMcpConfig(cwd);
+        const server = servers[serverName];
+        if (!server) {
+          addMessage({
+            type: "error",
+            content: `Server "${serverName}" not found`,
+            errorType: "error"
+          });
+          setShowMcpSelector(false);
+          markOverlayClosed();
+          setShowMcpServers(true);
+          return;
+        }
+        setShowMcpSelector(false);
+        markOverlayClosed();
+        if (mcpSelectorAction === "remove") {
+          const result = removeMcpServer(cwd, serverName);
+          addMessage({
+            type: "assistant",
+            content: result.message
+          });
+        } else if (mcpSelectorAction === "test") {
+          addMessage({
+            type: "assistant",
+            content: `Testing connection to "${serverName}"...`
+          });
+          const result = await testMcpConnection(serverName, server);
+          addMessage({
+            type: "assistant",
+            content: result.message
+          });
+          if (result.error) {
+            addMessage({
+              type: "error",
+              content: `Error: ${result.error}`,
+              errorType: "warning"
+            });
+          }
+        } else if (mcpSelectorAction === "enable") {
+          const result = enableMcpServer(cwd, serverName);
+          addMessage({
+            type: "assistant",
+            content: result.message
+          });
+        } else if (mcpSelectorAction === "disable") {
+          const result = disableMcpServer(cwd, serverName);
+          addMessage({
+            type: "assistant",
+            content: result.message
+          });
+        }
+        setShowMcpServers(true);
+      };
+      const handleMcpSelectorCancel = () => {
+        setShowMcpSelector(false);
+        markOverlayClosed();
+        setShowMcpServers(true);
       };
       const isInitialMount = useRef5(true);
       useEffect13(() => {
@@ -11743,9 +12852,6 @@ var init_App = __esm({
             exit();
             onExit(true);
           }
-          if (key.ctrl && key.name === "h" && !showHelp) {
-            setShowHelp(true);
-          }
           if (key.ctrl && key.name === "l") {
             clearTerminalViewportAndScrollback();
           }
@@ -11763,21 +12869,14 @@ var init_App = __esm({
           });
         }
       }, []);
-      return /* @__PURE__ */ React28.createElement(
-        Box25,
+      return /* @__PURE__ */ React30.createElement(
+        Box27,
         {
           flexDirection: "column",
           paddingX: 1
         },
-        /* @__PURE__ */ React28.createElement(MessageList, { currentFolder, gitBranch, queuedTasks, terminalWidth }),
-        showHelp && /* @__PURE__ */ React28.createElement(
-          HelpMenu,
-          {
-            isAuthenticated: authState === "authenticated" /* Authenticated */,
-            onClose: handleHelpClose
-          }
-        ),
-        showSessionSelector && apiClient && /* @__PURE__ */ React28.createElement(
+        /* @__PURE__ */ React30.createElement(MessageList, { currentFolder, gitBranch, queuedTasks, terminalWidth }),
+        showSessionSelector && apiClient && /* @__PURE__ */ React30.createElement(
           SessionSelector,
           {
             apiClient,
@@ -11785,8 +12884,8 @@ var init_App = __esm({
             onSelect: handleSessionSelect
           }
         ),
-        isLoadingSession && /* @__PURE__ */ React28.createElement(Box25, { borderColor: "cyan", borderStyle: "round", flexDirection: "column", padding: 1 }, /* @__PURE__ */ React28.createElement(Box25, { flexDirection: "row" }, /* @__PURE__ */ React28.createElement(Box25, { width: 2 }, /* @__PURE__ */ React28.createElement(Text23, { color: theme.text.accent }, /* @__PURE__ */ React28.createElement(Spinner3, { type: "dots" }))), /* @__PURE__ */ React28.createElement(Text23, { bold: true, color: "cyan" }, "Loading session...")), /* @__PURE__ */ React28.createElement(Text23, { color: theme.text.dim }, "Fetching queries and context")),
-        showModelSelector && /* @__PURE__ */ React28.createElement(
+        isLoadingSession && /* @__PURE__ */ React30.createElement(Box27, { borderColor: "cyan", borderStyle: "round", flexDirection: "column", padding: 1 }, /* @__PURE__ */ React30.createElement(Box27, { flexDirection: "row" }, /* @__PURE__ */ React30.createElement(Box27, { width: 2 }, /* @__PURE__ */ React30.createElement(Text25, { color: theme.text.accent }, /* @__PURE__ */ React30.createElement(Spinner4, { type: "dots" }))), /* @__PURE__ */ React30.createElement(Text25, { bold: true, color: "cyan" }, "Loading session...")), /* @__PURE__ */ React30.createElement(Text25, { color: theme.text.dim }, "Fetching queries and context")),
+        showModelSelector && /* @__PURE__ */ React30.createElement(
           ModelSelector,
           {
             currentModel: selectedModel,
@@ -11795,7 +12894,7 @@ var init_App = __esm({
             onSelect: handleModelSelect
           }
         ),
-        showProviderSelector && /* @__PURE__ */ React28.createElement(
+        showProviderSelector && /* @__PURE__ */ React30.createElement(
           ProviderSelector,
           {
             claudeMaxAvailable: isClaudeMaxAvailable(),
@@ -11804,20 +12903,20 @@ var init_App = __esm({
             onSelect: handleProviderSelect
           }
         ),
-        showAuthDialog && /* @__PURE__ */ React28.createElement(
+        showAuthDialog && /* @__PURE__ */ React30.createElement(
           AuthDialog,
           {
             onLogin: handleLogin
           }
         ),
-        showFeedbackDialog && /* @__PURE__ */ React28.createElement(
+        showFeedbackDialog && /* @__PURE__ */ React30.createElement(
           FeedbackDialog,
           {
             onCancel: handleFeedbackCancel,
             onSubmit: handleFeedbackSubmit
           }
         ),
-        showFixFlow && apiClient && /* @__PURE__ */ React28.createElement(
+        showFixFlow && apiClient && /* @__PURE__ */ React30.createElement(
           FixFlow,
           {
             apiClient,
@@ -11827,14 +12926,33 @@ var init_App = __esm({
             onStartFix: handleFixStart
           }
         ),
-        /* @__PURE__ */ React28.createElement(Box25, { flexDirection: "column" }, !showAuthDialog && /* @__PURE__ */ React28.createElement(AuthBanner, { authState }), showInput && !showSessionSelector && !showAuthDialog && !showHelp && !showModelSelector && !showProviderSelector && !showFeedbackDialog && !showFixFlow && !isLoadingSession && /* @__PURE__ */ React28.createElement(Box25, { flexDirection: "column", marginTop: 0, width: "100%" }, exitWarning && /* @__PURE__ */ React28.createElement(Box25, { marginBottom: 0, paddingX: 1 }, /* @__PURE__ */ React28.createElement(Text23, { color: "yellow" }, exitWarning)), /* @__PURE__ */ React28.createElement(
+        showMcpServers && /* @__PURE__ */ React30.createElement(
+          McpServersDisplay,
+          {
+            cwd: config2.cwd,
+            onAdd: handleMcpAdd,
+            onClose: handleMcpServersClose,
+            onRemove: handleMcpRemove,
+            onTest: handleMcpTest
+          }
+        ),
+        showMcpAdd && /* @__PURE__ */ React30.createElement(McpAddDialog, { onCancel: handleMcpAddCancel, onConfirm: handleMcpAddConfirm }),
+        showMcpSelector && /* @__PURE__ */ React30.createElement(
+          McpServerSelector,
+          {
+            action: mcpSelectorAction,
+            onCancel: handleMcpSelectorCancel,
+            onSelect: handleMcpSelectorConfirm,
+            servers: mcpServers
+          }
+        ),
+        /* @__PURE__ */ React30.createElement(Box27, { flexDirection: "column" }, !showAuthDialog && /* @__PURE__ */ React30.createElement(AuthBanner, { authState }), showInput && !showSessionSelector && !showAuthDialog && !showModelSelector && !showProviderSelector && !showFeedbackDialog && !showFixFlow && !showMcpServers && !showMcpAdd && !showMcpSelector && !isLoadingSession && /* @__PURE__ */ React30.createElement(Box27, { flexDirection: "column", marginTop: 0, width: "100%" }, exitWarning && /* @__PURE__ */ React30.createElement(Box27, { marginBottom: 0, paddingX: 1 }, /* @__PURE__ */ React30.createElement(Text25, { color: "yellow" }, exitWarning)), /* @__PURE__ */ React30.createElement(
           InputPrompt,
           {
             currentFolder,
             cwd: config2.cwd,
             gitBranch,
             isClaudeMax: !!config2.oauthToken,
-            onHelpToggle: () => setShowHelp((prev) => !prev),
             onInputChange: (val) => setHasInputContent(val.trim().length > 0),
             onSubmit: handleSubmitTask,
             placeholder: "Enter your task...",
@@ -11844,7 +12962,7 @@ var init_App = __esm({
       );
     };
     App = (props) => {
-      return /* @__PURE__ */ React28.createElement(AppContent, { ...props });
+      return /* @__PURE__ */ React30.createElement(AppContent, { ...props });
     };
   }
 });
@@ -11880,7 +12998,7 @@ __export(interactive_exports, {
   runInteractive: () => runInteractive
 });
 import { render as render2 } from "ink";
-import React29, { useEffect as useEffect15, useRef as useRef6 } from "react";
+import React31, { useEffect as useEffect15, useRef as useRef6 } from "react";
 function getToolDescription2(toolName, input) {
   switch (toolName) {
     case "Read":
@@ -12013,7 +13131,7 @@ async function runInteractive(config2) {
       webUrl = session.webUrl;
     }
     const { unmount, waitUntilExit } = render2(
-      /* @__PURE__ */ React29.createElement(
+      /* @__PURE__ */ React31.createElement(
         InteractiveApp,
         {
           apiClient,
@@ -12205,17 +13323,17 @@ var init_interactive = __esm({
         setIsAgentRunning,
         setUsageStats
       } = useSession();
-      const [sessionId, setSessionId] = React29.useState(initialSessionId);
-      const [currentTask, setCurrentTask] = React29.useState(config2.task);
-      const [taskId, setTaskId] = React29.useState(0);
-      const [shouldRunAgent, setShouldRunAgent] = React29.useState(!!config2.task);
-      const [taskQueue, setTaskQueue] = React29.useState([]);
-      const [providerSessionId, setProviderSessionId] = React29.useState();
-      const messageBridgeRef = React29.useRef(null);
-      const lastSubmitRef = React29.useRef(null);
-      const [pendingInjected, setPendingInjected] = React29.useState([]);
-      const pendingInjectedRef = React29.useRef([]);
-      React29.useEffect(() => {
+      const [sessionId, setSessionId] = React31.useState(initialSessionId);
+      const [currentTask, setCurrentTask] = React31.useState(config2.task);
+      const [taskId, setTaskId] = React31.useState(0);
+      const [shouldRunAgent, setShouldRunAgent] = React31.useState(!!config2.task);
+      const [taskQueue, setTaskQueue] = React31.useState([]);
+      const [providerSessionId, setProviderSessionId] = React31.useState();
+      const messageBridgeRef = React31.useRef(null);
+      const lastSubmitRef = React31.useRef(null);
+      const [pendingInjected, setPendingInjected] = React31.useState([]);
+      const pendingInjectedRef = React31.useRef([]);
+      React31.useEffect(() => {
         pendingInjectedRef.current = pendingInjected;
       }, [pendingInjected]);
       const handleSubmitTask = async (task) => {
@@ -12278,7 +13396,7 @@ var init_interactive = __esm({
       if (shouldRunAgent && !messageBridgeRef.current) {
         messageBridgeRef.current = new MessageBridge(providerSessionId || "");
       }
-      React29.useEffect(() => {
+      React31.useEffect(() => {
         if (!shouldRunAgent && taskQueue.length > 0) {
           const [nextTask, ...remaining] = taskQueue;
           setTaskQueue(remaining);
@@ -12292,14 +13410,14 @@ var init_interactive = __esm({
           setShouldRunAgent(true);
         }
       }, [shouldRunAgent, taskQueue, addMessage, providerSessionId]);
-      const handleClearSession = React29.useCallback(() => {
+      const handleClearSession = React31.useCallback(() => {
         setSessionId(void 0);
         setContextSessionId(void 0);
         setProviderSessionId(void 0);
         setTaskQueue([]);
         setPendingInjected([]);
       }, [setContextSessionId]);
-      return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(
+      return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(
         App,
         {
           apiClient,
@@ -12362,7 +13480,7 @@ var init_interactive = __esm({
           sessionId,
           webUrl
         }
-      ), shouldRunAgent && currentTask && sessionId && messageBridgeRef.current && /* @__PURE__ */ React29.createElement(
+      ), shouldRunAgent && currentTask && sessionId && messageBridgeRef.current && /* @__PURE__ */ React31.createElement(
         AgentRunner,
         {
           apiClient,
@@ -12387,7 +13505,7 @@ var init_interactive = __esm({
       useBracketedPaste();
       const settings = loadSupatestSettings(props.config.cwd || process.cwd());
       const initialProvider = settings.llmProvider || "supatest-managed";
-      return /* @__PURE__ */ React29.createElement(KeypressProvider, null, /* @__PURE__ */ React29.createElement(SessionProvider, { initialLlmProvider: initialProvider, initialModel: props.config.selectedModel }, /* @__PURE__ */ React29.createElement(InteractiveAppContent, { ...props })));
+      return /* @__PURE__ */ React31.createElement(KeypressProvider, null, /* @__PURE__ */ React31.createElement(SessionProvider, { initialLlmProvider: initialProvider, initialModel: props.config.selectedModel }, /* @__PURE__ */ React31.createElement(InteractiveAppContent, { ...props })));
     };
   }
 });
@@ -12411,7 +13529,7 @@ init_react();
 init_MessageList();
 init_SessionContext();
 import { execSync as execSync2 } from "child_process";
-import { homedir as homedir3 } from "os";
+import { homedir as homedir4 } from "os";
 import { Box as Box13, useApp } from "ink";
 import React14, { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
 var getGitBranch = () => {
@@ -12423,7 +13541,7 @@ var getGitBranch = () => {
 };
 var getCurrentFolder = () => {
   const cwd = process.cwd();
-  const home = homedir3();
+  const home = homedir4();
   if (cwd.startsWith(home)) {
     return `~${cwd.slice(home.length)}`;
   }
@@ -12867,7 +13985,7 @@ program.name("supatest").description(
     if (options.verbose) {
       logger.setVerbose(true);
     }
-    const isDev = process.env.NODE_ENV === "development";
+    const isDev = process.env.NODE_ENV === "development" || process.env.SUPATEST_DEV === "true";
     logger.enableFileLogging(isDev);
     let prompt = task;
     let logs;