@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/agents-overlay-v2.js

@@ -0,0 +1,809 @@
+/**
+ * Agents Overlay V2
+ *
+ * Modal overlay for viewing and managing agent configurations.
+ * Uses TabbedListOverlayV2 for consistent navigation patterns.
+ *
+ * Features:
+ * - Built-in tab: Lists predefined agent types with detail view
+ * - Custom tab: Lists user-defined agents with detail/edit + create new
+ * - Wizard mode: Step-by-step agent creation
+ */
+import chalk from 'chalk';
+import * as terminal from './terminal.js';
+import { TabbedListOverlayV2, BaseScreen, stay, popScreen, closeOverlay, isEscape, isCtrlC, isEnter, isNavigateUp, isNavigateDown, isBackspace, isClose, extractPrintable, renderBorder, wrapText, } from './base/index.js';
+import { InputFeature } from './features/index.js';
+import { getAgentRegistry } from '../agents/registry.js';
+// =============================================================================
+// Constants
+// =============================================================================
+const TABS = [
+    { id: 'builtin', label: 'Built-in' },
+    { id: 'custom', label: 'Custom' },
+];
+const PAGE_SIZE = 12;
+// =============================================================================
+// Helpers
+// =============================================================================
+function isCreateItem(item) {
+    return item.isCreateNew === true;
+}
+function buildItemsList(registry) {
+    const items = [];
+    // Add built-in agents
+    for (const agent of registry.getBuiltinAgents()) {
+        items.push(agentToItem(agent, true));
+    }
+    // Add custom agents
+    for (const agent of registry.getCustomAgents()) {
+        items.push(agentToItem(agent, false));
+    }
+    // Add "Create new agent" option for custom tab
+    items.push({
+        name: '',
+        model: '',
+        description: '',
+        isBuiltin: false,
+        isCreateNew: true,
+    });
+    return items;
+}
+function agentToItem(agent, isBuiltin) {
+    return {
+        name: agent.name,
+        model: agent.model,
+        description: agent.description,
+        location: agent.location,
+        systemPrompt: agent.systemPrompt,
+        filePath: agent.filePath,
+        isBuiltin,
+    };
+}
+// =============================================================================
+// Detail Screen (View Agent Info)
+// =============================================================================
+class AgentDetailScreen extends BaseScreen {
+    item;
+    registry;
+    styles;
+    onEdit;
+    constructor(item, registry, styles, onEdit) {
+        super();
+        this.item = item;
+        this.registry = registry;
+        this.styles = styles;
+        this.onEdit = onEdit;
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        // Header
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('Agent Details')}`);
+        lines.push('');
+        // Name and model
+        lines.push(`  ${s.muted('Name:')}        ${s.primary(this.item.name)}`);
+        lines.push(`  ${s.muted('Model:')}       ${s.secondary(this.item.model)}`);
+        lines.push(`  ${s.muted('Type:')}        ${this.item.isBuiltin ? s.muted('Built-in') : s.secondary('Custom')}`);
+        // Location for custom agents
+        if (!this.item.isBuiltin && this.item.location) {
+            const locationLabel = this.item.location === 'project' ? 'Project' : 'Personal';
+            lines.push(`  ${s.muted('Location:')}    ${s.secondary(locationLabel)}`);
+        }
+        lines.push('');
+        // Description
+        lines.push(`  ${s.muted('Description:')}`);
+        const descLines = wrapText(this.item.description, cols - 6, '    ');
+        lines.push(...descLines);
+        // System prompt for custom agents
+        if (!this.item.isBuiltin && this.item.systemPrompt) {
+            lines.push('');
+            lines.push(`  ${s.muted('System Prompt:')}`);
+            // Show first few lines of system prompt
+            const promptLines = this.item.systemPrompt.split('\n').slice(0, 5);
+            for (const line of promptLines) {
+                const truncated = line.length > cols - 6 ? line.slice(0, cols - 9) + '...' : line;
+                lines.push(`    ${s.secondary(truncated)}`);
+            }
+            if (this.item.systemPrompt.split('\n').length > 5) {
+                lines.push(`    ${s.muted('...')}`);
+            }
+        }
+        // File path for custom agents
+        if (!this.item.isBuiltin && this.item.filePath) {
+            lines.push('');
+            lines.push(`  ${s.muted('File:')} ${s.secondary(this.item.filePath)}`);
+        }
+        // Usage hint for built-in agents
+        if (this.item.isBuiltin) {
+            lines.push('');
+            lines.push(`  ${s.muted('Usage:')}`);
+            lines.push(`    ${s.secondary('This agent is invoked via the Task tool.')}`);
+            lines.push(`    ${s.secondary(`Example: Task(subagent_type="${this.item.name}", prompt="...")`)}`);
+        }
+        lines.push('');
+        lines.push(border);
+        // Show edit hint for custom agents
+        if (!this.item.isBuiltin) {
+            lines.push(`  ${s.muted('e Edit · q/Esc Back')}`);
+        }
+        else {
+            lines.push(`  ${s.muted('q/Esc Back')}`);
+        }
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        // Ctrl+C closes everything
+        if (isCtrlC(data)) {
+            return closeOverlay(undefined);
+        }
+        // Escape or q - back to list
+        if (isEscape(data) || isClose(data)) {
+            return popScreen();
+        }
+        // 'e' opens edit screen for custom agents
+        const char = extractPrintable(data);
+        if (char === 'e' && !this.item.isBuiltin) {
+            const editScreen = new AgentEditScreen(this.item, this.registry, this.styles);
+            return this.onEdit(editScreen);
+        }
+        return stay(false);
+    }
+    getMinHeight() {
+        return 24;
+    }
+}
+// =============================================================================
+// Edit Screen (Edit Custom Agent)
+// =============================================================================
+class AgentEditScreen extends BaseScreen {
+    originalItem;
+    registry;
+    styles;
+    step = 'field-select';
+    selectedOption = 0;
+    input;
+    error = null;
+    editedAgent;
+    constructor(originalItem, registry, styles) {
+        super();
+        this.originalItem = originalItem;
+        this.registry = registry;
+        this.styles = styles;
+        this.input = new InputFeature({ placeholder: '' });
+        // Initialize with current values
+        const loc = originalItem.location;
+        this.editedAgent = {
+            name: originalItem.name,
+            prompt: originalItem.systemPrompt ?? '',
+            description: originalItem.description,
+            model: originalItem.model,
+            location: (loc === 'project' || loc === 'personal') ? loc : 'project',
+        };
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('Edit Agent:')} ${s.primary(this.originalItem.name)}`);
+        lines.push('');
+        switch (this.step) {
+            case 'field-select': {
+                lines.push(`  ${s.secondary('Select field to edit:')}`);
+                lines.push('');
+                const fields = [
+                    { id: 'model', label: 'Model', value: this.editedAgent.model },
+                    { id: 'description', label: 'Description', value: this.truncate(this.editedAgent.description, 40) },
+                    { id: 'prompt', label: 'System Prompt', value: this.truncate(this.editedAgent.prompt, 40) },
+                    { id: 'save', label: 'Save Changes', value: '' },
+                    { id: 'delete', label: 'Delete Agent', value: '' },
+                    { id: 'cancel', label: 'Cancel', value: '' },
+                ];
+                for (let i = 0; i < fields.length; i++) {
+                    const f = fields[i];
+                    const isSelected = this.selectedOption === i;
+                    const prefix = isSelected ? s.primary(' ❯ ') : '   ';
+                    if (f.id === 'save') {
+                        lines.push(`${prefix}${isSelected ? s.primary(f.label) : s.muted(f.label)}`);
+                    }
+                    else if (f.id === 'delete') {
+                        lines.push(`${prefix}${isSelected ? s.error(f.label) : s.muted(f.label)}`);
+                    }
+                    else if (f.id === 'cancel') {
+                        lines.push(`${prefix}${isSelected ? s.secondary(f.label) : s.muted(f.label)}`);
+                    }
+                    else {
+                        const label = `${f.label.padEnd(16)}${f.value}`;
+                        lines.push(`${prefix}${isSelected ? s.primary(label) : s.muted(label)}`);
+                    }
+                }
+                break;
+            }
+            case 'edit-model': {
+                lines.push(`  ${s.secondary('Select model')}`);
+                lines.push('');
+                const models = [
+                    { id: 'sonnet', label: 'Sonnet', desc: 'Balanced (recommended)' },
+                    { id: 'opus', label: 'Opus', desc: 'Most capable' },
+                    { id: 'haiku', label: 'Haiku', desc: 'Fast and efficient' },
+                    { id: 'inherit', label: 'Inherit', desc: "Use parent's model" },
+                ];
+                for (let i = 0; i < models.length; i++) {
+                    const m = models[i];
+                    const isSelected = this.selectedOption === i;
+                    const prefix = isSelected ? s.primary(' ❯ ') : '   ';
+                    const current = this.editedAgent.model === m.id ? s.muted(' (current)') : '';
+                    const label = `${String(i + 1)}. ${m.label.padEnd(10)} - ${m.desc}${current}`;
+                    lines.push(`${prefix}${isSelected ? s.primary(label) : s.muted(label)}`);
+                }
+                break;
+            }
+            case 'edit-description':
+                lines.push(`  ${s.secondary('Edit description')}`);
+                lines.push('');
+                lines.push(`  When should the LLM use this agent?`);
+                lines.push(`  > ${this.input.render(s)}`);
+                lines.push('');
+                if (this.error) {
+                    lines.push(`  ${s.error(this.error)}`);
+                }
+                else {
+                    lines.push(`  ${s.muted('Press Enter to save, Esc to cancel')}`);
+                }
+                break;
+            case 'edit-prompt':
+                lines.push(`  ${s.secondary('Edit system prompt')}`);
+                lines.push('');
+                lines.push(`  Enter the agent's instructions:`);
+                lines.push(`  > ${this.input.render(s)}`);
+                lines.push('');
+                if (this.error) {
+                    lines.push(`  ${s.error(this.error)}`);
+                }
+                else {
+                    lines.push(`  ${s.muted('Press Enter to save, Esc to cancel')}`);
+                    lines.push(`  ${s.muted('(For multiline prompts, edit the .md file directly)')}`);
+                }
+                break;
+            case 'confirm-delete':
+                lines.push(`  ${s.error('Delete this agent?')}`);
+                lines.push('');
+                lines.push(`  ${s.muted('Name:')} ${s.primary(this.originalItem.name)}`);
+                lines.push(`  ${s.muted('File:')} ${s.secondary(this.originalItem.filePath ?? 'unknown')}`);
+                lines.push('');
+                lines.push(this.selectedOption === 0
+                    ? `  ${s.error(' ❯ Yes, delete')}`
+                    : `  ${s.muted('   Yes, delete')}`);
+                lines.push(this.selectedOption === 1
+                    ? `  ${s.primary(' ❯ No, cancel')}`
+                    : `  ${s.muted('   No, cancel')}`);
+                break;
+        }
+        lines.push('');
+        lines.push(border);
+        lines.push(`  ${s.muted('Esc Back')}`);
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        // Ctrl+C closes everything
+        if (isCtrlC(data)) {
+            return closeOverlay(undefined);
+        }
+        // Escape goes back
+        if (isEscape(data)) {
+            return this.handleBack();
+        }
+        // Text input steps
+        if (this.step === 'edit-description' || this.step === 'edit-prompt') {
+            if (isEnter(data)) {
+                const text = this.input.trimmedValue;
+                if (!text) {
+                    this.error = 'Cannot be empty';
+                    return stay();
+                }
+                if (this.step === 'edit-description') {
+                    this.editedAgent.description = text;
+                }
+                else {
+                    this.editedAgent.prompt = text;
+                }
+                this.step = 'field-select';
+                this.input.clear();
+                this.error = null;
+                return stay();
+            }
+            if (isBackspace(data)) {
+                const result = this.input.handleKey(data);
+                if (result.handled) {
+                    this.error = null;
+                    return stay(result.render);
+                }
+                return stay(false);
+            }
+            // Regular character input
+            const result = this.input.handleKey(data);
+            if (result.handled) {
+                this.error = null;
+                return stay(result.render);
+            }
+            return stay(false);
+        }
+        // Selection steps
+        const maxOptions = this.step === 'field-select' ? 6 : this.step === 'edit-model' ? 4 : 2;
+        if (isNavigateUp(data) && this.selectedOption > 0) {
+            this.selectedOption--;
+            return stay();
+        }
+        if (isNavigateDown(data) && this.selectedOption < maxOptions - 1) {
+            this.selectedOption++;
+            return stay();
+        }
+        if (isEnter(data)) {
+            return this.handleSelect();
+        }
+        return stay(false);
+    }
+    handleBack() {
+        switch (this.step) {
+            case 'field-select':
+                return popScreen();
+            case 'edit-model':
+            case 'edit-description':
+            case 'edit-prompt':
+            case 'confirm-delete':
+                this.step = 'field-select';
+                this.selectedOption = 0;
+                this.input.clear();
+                this.error = null;
+                break;
+        }
+        return stay();
+    }
+    handleSelect() {
+        switch (this.step) {
+            case 'field-select':
+                switch (this.selectedOption) {
+                    case 0: { // Model
+                        this.step = 'edit-model';
+                        const models = ['sonnet', 'opus', 'haiku', 'inherit'];
+                        this.selectedOption = models.indexOf(this.editedAgent.model);
+                        if (this.selectedOption < 0)
+                            this.selectedOption = 0;
+                        break;
+                    }
+                    case 1: // Description
+                        this.step = 'edit-description';
+                        this.input.value = this.editedAgent.description;
+                        break;
+                    case 2: // System Prompt
+                        this.step = 'edit-prompt';
+                        this.input.value = this.editedAgent.prompt;
+                        break;
+                    case 3: // Save
+                        return this.saveAgent();
+                    case 4: // Delete
+                        this.step = 'confirm-delete';
+                        this.selectedOption = 1; // Default to "No"
+                        break;
+                    case 5: // Cancel
+                        return popScreen();
+                }
+                break;
+            case 'edit-model': {
+                const models = ['sonnet', 'opus', 'haiku', 'inherit'];
+                this.editedAgent.model = models[this.selectedOption];
+                this.step = 'field-select';
+                this.selectedOption = 0;
+                break;
+            }
+            case 'confirm-delete':
+                if (this.selectedOption === 0) {
+                    // Delete
+                    return this.deleteAgent();
+                }
+                else {
+                    // Cancel
+                    this.step = 'field-select';
+                    this.selectedOption = 0;
+                }
+                break;
+        }
+        return stay();
+    }
+    saveAgent() {
+        try {
+            this.registry.saveAgent({
+                name: this.editedAgent.name,
+                description: this.editedAgent.description,
+                model: this.editedAgent.model,
+                systemPrompt: this.editedAgent.prompt,
+            }, this.editedAgent.location);
+            this.registry.load();
+            return closeOverlay({ edited: this.editedAgent.name });
+        }
+        catch (error) {
+            this.error = error.message;
+            return stay();
+        }
+    }
+    deleteAgent() {
+        try {
+            this.registry.deleteAgent(this.originalItem.name);
+            this.registry.load();
+            return closeOverlay({ deleted: this.originalItem.name });
+        }
+        catch (error) {
+            this.error = error.message;
+            return stay();
+        }
+    }
+    truncate(text, max) {
+        if (!text)
+            return '';
+        if (text.length <= max)
+            return text;
+        return text.slice(0, max - 3) + '...';
+    }
+    getMinHeight() {
+        return 22;
+    }
+}
+// =============================================================================
+// Wizard Screen (Multi-Step Agent Creation)
+// =============================================================================
+class AgentWizardScreen extends BaseScreen {
+    registry;
+    styles;
+    step = 'location';
+    selectedOption = 0;
+    input;
+    error = null;
+    newAgent = {
+        location: 'project',
+        name: '',
+        prompt: '',
+        description: '',
+        model: 'sonnet',
+    };
+    constructor(registry, styles) {
+        super();
+        this.registry = registry;
+        this.styles = styles;
+        this.input = new InputFeature({ placeholder: '' });
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('Create New Agent')}`);
+        lines.push('');
+        switch (this.step) {
+            case 'location':
+                lines.push(chalk.bold('  Choose location'));
+                lines.push('');
+                lines.push(this.selectedOption === 0
+                    ? `  ${s.primary(' ❯ 1. Project (.compilr-dev/agents/)')}`
+                    : `  ${s.muted('   1. Project (.compilr-dev/agents/)')}`);
+                lines.push(this.selectedOption === 1
+                    ? `  ${s.primary(' ❯ 2. Personal (~/.compilr-dev/agents/)')}`
+                    : `  ${s.muted('   2. Personal (~/.compilr-dev/agents/)')}`);
+                lines.push('');
+                lines.push(`  ${s.muted('Project agents are shared with your team.')}`);
+                lines.push(`  ${s.muted('Personal agents apply to all your projects.')}`);
+                break;
+            case 'name':
+                lines.push(chalk.bold('  Agent name (identifier)'));
+                lines.push('');
+                lines.push('  Enter a unique identifier:');
+                lines.push(`  > ${this.input.render(s)}`);
+                lines.push('');
+                if (this.error) {
+                    lines.push(`  ${s.error(this.error)}`);
+                }
+                else {
+                    lines.push(`  ${s.muted('Use lowercase letters, numbers, hyphens (e.g., code-reviewer)')}`);
+                }
+                break;
+            case 'prompt':
+                lines.push(chalk.bold('  System prompt'));
+                lines.push('');
+                lines.push('  Enter the agent\'s instructions:');
+                lines.push(`  > ${this.input.render(s)}`);
+                lines.push('');
+                lines.push(`  ${s.muted('This defines how the agent behaves.')}`);
+                lines.push(`  ${s.muted('Press Enter to continue.')}`);
+                break;
+            case 'description':
+                lines.push(chalk.bold('  Description'));
+                lines.push('');
+                lines.push('  When should the LLM use this agent?');
+                lines.push(`  > ${this.input.render(s)}`);
+                lines.push('');
+                lines.push(`  ${s.muted('This helps the LLM know when to invoke this agent.')}`);
+                break;
+            case 'model': {
+                lines.push(chalk.bold('  Select model'));
+                lines.push('');
+                const models = [
+                    { id: 'sonnet', label: 'Sonnet', desc: 'Balanced (recommended)' },
+                    { id: 'opus', label: 'Opus', desc: 'Most capable' },
+                    { id: 'haiku', label: 'Haiku', desc: 'Fast and efficient' },
+                    { id: 'inherit', label: 'Inherit', desc: "Use parent's model" },
+                ];
+                for (let i = 0; i < models.length; i++) {
+                    const m = models[i];
+                    const isSelected = this.selectedOption === i;
+                    const prefix = isSelected ? s.primary(' ❯ ') : '   ';
+                    const label = `${String(i + 1)}. ${m.label.padEnd(10)} - ${m.desc}`;
+                    lines.push(`  ${prefix}${isSelected ? s.primary(label) : s.muted(label)}`);
+                }
+                break;
+            }
+            case 'confirm': {
+                lines.push(chalk.bold('  Confirm'));
+                lines.push('');
+                lines.push(`  Name:        ${s.primary(this.newAgent.name)}`);
+                const locationPath = this.newAgent.location === 'project'
+                    ? '.compilr-dev/agents/'
+                    : '~/.compilr-dev/agents/';
+                lines.push(`  Location:    ${s.primary(locationPath)}${this.newAgent.name}.md`);
+                lines.push(`  Model:       ${s.primary(this.newAgent.model)}`);
+                lines.push('');
+                lines.push(chalk.bold('  Description:'));
+                const descPreview = this.newAgent.description.length > 60
+                    ? this.newAgent.description.slice(0, 57) + '...'
+                    : this.newAgent.description;
+                lines.push(`    ${s.muted(descPreview)}`);
+                lines.push('');
+                lines.push(chalk.bold('  System prompt:'));
+                const promptPreview = this.newAgent.prompt.length > 60
+                    ? this.newAgent.prompt.slice(0, 57) + '...'
+                    : this.newAgent.prompt;
+                lines.push(`    ${s.muted(promptPreview)}`);
+                lines.push('');
+                lines.push(this.selectedOption === 0
+                    ? `  ${s.primary(' ❯ Save')}`
+                    : `  ${s.muted('   Save')}`);
+                lines.push(this.selectedOption === 1
+                    ? `  ${s.primary(' ❯ Cancel')}`
+                    : `  ${s.muted('   Cancel')}`);
+                if (this.error) {
+                    lines.push('');
+                    lines.push(`  ${s.error(this.error)}`);
+                }
+                break;
+            }
+        }
+        lines.push('');
+        lines.push(border);
+        lines.push(`  ${s.muted('Esc to go back')}`);
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        // Ctrl+C closes everything
+        if (isCtrlC(data)) {
+            return closeOverlay(undefined);
+        }
+        // Escape goes back
+        if (isEscape(data)) {
+            return this.handleBack();
+        }
+        // Input steps: name, prompt, description
+        if (this.step === 'name' || this.step === 'prompt' || this.step === 'description') {
+            if (isEnter(data)) {
+                const text = this.input.trimmedValue;
+                if (!text) {
+                    return stay(false);
+                }
+                // Validate name
+                if (this.step === 'name') {
+                    if (!/^[a-z][a-z0-9-]{1,49}$/.test(text)) {
+                        this.error = 'Invalid name. Use lowercase letters, numbers, hyphens.';
+                        return stay();
+                    }
+                    if (this.registry.hasAgent(text)) {
+                        this.error = `Agent "${text}" already exists.`;
+                        return stay();
+                    }
+                    this.newAgent.name = text;
+                    this.step = 'prompt';
+                    this.input.clear();
+                    this.error = null;
+                }
+                else if (this.step === 'prompt') {
+                    this.newAgent.prompt = text;
+                    this.step = 'description';
+                    this.input.clear();
+                }
+                else {
+                    this.newAgent.description = text;
+                    this.step = 'model';
+                    this.selectedOption = 0;
+                }
+                return stay();
+            }
+            if (isBackspace(data)) {
+                const result = this.input.handleKey(data);
+                if (result.handled) {
+                    this.error = null;
+                    return stay(result.render);
+                }
+                return stay(false);
+            }
+            // Regular character input
+            const result = this.input.handleKey(data);
+            if (result.handled) {
+                this.error = null;
+                return stay(result.render);
+            }
+            return stay(false);
+        }
+        // Selection steps: location, model, confirm
+        const maxOptions = this.step === 'model' ? 4 : 2;
+        if (isNavigateUp(data) && this.selectedOption > 0) {
+            this.selectedOption--;
+            return stay();
+        }
+        if (isNavigateDown(data) && this.selectedOption < maxOptions - 1) {
+            this.selectedOption++;
+            return stay();
+        }
+        if (isEnter(data)) {
+            return this.handleSelect();
+        }
+        return stay(false);
+    }
+    handleBack() {
+        switch (this.step) {
+            case 'location':
+                return popScreen();
+            case 'name':
+                this.step = 'location';
+                this.selectedOption = this.newAgent.location === 'project' ? 0 : 1;
+                break;
+            case 'prompt':
+                this.step = 'name';
+                this.input.value = this.newAgent.name;
+                break;
+            case 'description':
+                this.step = 'prompt';
+                this.input.value = this.newAgent.prompt;
+                break;
+            case 'model':
+                this.step = 'description';
+                this.input.value = this.newAgent.description;
+                break;
+            case 'confirm': {
+                this.step = 'model';
+                const models = ['sonnet', 'opus', 'haiku', 'inherit'];
+                this.selectedOption = models.indexOf(this.newAgent.model);
+                break;
+            }
+        }
+        this.error = null;
+        return stay();
+    }
+    handleSelect() {
+        switch (this.step) {
+            case 'location':
+                this.newAgent.location = this.selectedOption === 0 ? 'project' : 'personal';
+                this.step = 'name';
+                this.input.clear();
+                break;
+            case 'model': {
+                const models = ['sonnet', 'opus', 'haiku', 'inherit'];
+                this.newAgent.model = models[this.selectedOption];
+                this.step = 'confirm';
+                this.selectedOption = 0;
+                break;
+            }
+            case 'confirm':
+                if (this.selectedOption === 0) {
+                    // Save
+                    try {
+                        this.registry.saveAgent({
+                            name: this.newAgent.name,
+                            description: this.newAgent.description,
+                            model: this.newAgent.model,
+                            systemPrompt: this.newAgent.prompt,
+                        }, this.newAgent.location);
+                        this.registry.load();
+                        return closeOverlay({ created: this.newAgent.name });
+                    }
+                    catch (error) {
+                        this.error = error.message;
+                        return stay();
+                    }
+                }
+                else {
+                    // Cancel
+                    return popScreen();
+                }
+        }
+        return stay();
+    }
+    getMinHeight() {
+        return 22;
+    }
+}
+// =============================================================================
+// Agents Overlay V2
+// =============================================================================
+/**
+ * Agents overlay using TabbedListOverlayV2.
+ * Displays agents in a searchable, tabbed list.
+ */
+export class AgentsOverlayV2 extends TabbedListOverlayV2 {
+    type = 'inline';
+    id = 'agents-overlay-v2';
+    registry;
+    constructor() {
+        const registry = getAgentRegistry();
+        registry.load();
+        const items = buildItemsList(registry);
+        super({
+            title: 'Agents',
+            tabs: TABS,
+            items,
+            pageSize: PAGE_SIZE,
+            filterByTab: (item, tabId) => {
+                if (tabId === 'builtin')
+                    return item.isBuiltin;
+                return !item.isBuiltin;
+            },
+            getSearchText: (item) => {
+                if (isCreateItem(item))
+                    return 'create new';
+                return `${item.name} ${item.description}`;
+            },
+            renderItem: (item, isSelected, styles) => {
+                const prefix = isSelected ? styles.primary(' ❯ ') : '   ';
+                // Special "Create new agent" option
+                if (isCreateItem(item)) {
+                    return isSelected
+                        ? `${prefix}${styles.primary('Create new agent')}`
+                        : `${prefix}${styles.muted('Create new agent')}`;
+                }
+                const cols = terminal.getTerminalWidth();
+                const name = `${item.name} · ${item.model}`;
+                const nameStyled = isSelected
+                    ? styles.primary(name.padEnd(30))
+                    : styles.secondary(name.padEnd(30));
+                if (item.isBuiltin) {
+                    const maxDesc = Math.max(20, cols - 45);
+                    const desc = item.description.slice(0, maxDesc) + (item.description.length > maxDesc ? '...' : '');
+                    return `${prefix}${nameStyled}${styles.muted(desc)}`;
+                }
+                else {
+                    return `${prefix}${nameStyled}${styles.muted(`(${item.location ?? 'unknown'})`)}`;
+                }
+            },
+            footerHints: (searchMode) => {
+                if (searchMode) {
+                    return 'Type to filter · ↑↓/jk Navigate · Enter Select · Esc Exit search';
+                }
+                return 'Tab Filter · ↑↓/jk · / Search · Enter Select · q/Esc Close';
+            },
+            emptyMessage: 'No agents found.',
+            noResultsMessage: 'No agents match the search.',
+        });
+        this.registry = registry;
+    }
+    createDetailScreen(item) {
+        // "Create new agent" opens the wizard
+        if (isCreateItem(item)) {
+            return new AgentWizardScreen(this.registry, this.getStyles());
+        }
+        // All other agents open the detail view
+        return new AgentDetailScreen(item, this.registry, this.getStyles(), (editScreen) => ({ action: 'push', screen: editScreen }));
+    }
+}