@compilr-dev/cli 0.5.0 → 0.5.1

package/dist/ui/agents-overlay.js

@@ -1,863 +0,0 @@
-/**
- * Agents Overlay
- *
- * Modal overlay for viewing and managing agent configurations.
- * Uses TabbedListOverlay for consistent list/tab/search behavior.
- *
- * 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 * as terminal from './terminal.js';
-import { TabbedListOverlay, BaseScreen, stay, popScreen, closeOverlay, isEscape, isCtrlC, isEnter, isNavigateUp, isNavigateDown, isBackspace, isClose, extractPrintable, renderBorder, } from './base/index.js';
-import { getAgentRegistry } from '../agents/registry.js';
-const TABS = [
-    { id: 'builtin', label: 'Built-in' },
-    { id: 'custom', label: 'Custom' },
-];
-// =============================================================================
-// Helper Functions
-// =============================================================================
-function wrapText(text, maxWidth) {
-    if (!text || text.length <= maxWidth)
-        return [text || ''];
-    const words = text.split(' ');
-    const lines = [];
-    let currentLine = '';
-    for (const word of words) {
-        if (currentLine.length === 0) {
-            currentLine = word;
-        }
-        else if (currentLine.length + 1 + word.length <= maxWidth) {
-            currentLine += ' ' + word;
-        }
-        else {
-            lines.push(currentLine);
-            currentLine = word;
-        }
-    }
-    if (currentLine.length > 0) {
-        lines.push(currentLine);
-    }
-    return lines.length > 0 ? lines : [''];
-}
-// =============================================================================
-// Detail Screen (View Agent Info)
-// =============================================================================
-/**
- * Screen for viewing agent details.
- * Shows name, model, description, and for custom agents: system prompt.
- * Press 'e' to edit custom agents.
- */
-class DetailScreen extends BaseScreen {
-    item;
-    styles;
-    editState;
-    onEdit;
-    constructor(item, styles, editState, onEdit) {
-        super();
-        this.item = item;
-        this.styles = styles;
-        this.editState = editState;
-        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);
-        for (const line of descLines) {
-            lines.push(`    ${s.secondary(line)}`);
-        }
-        // 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 EditScreen(this.item, this.editState, this.styles);
-            this.onEdit(editScreen);
-            return stay();
-        }
-        return stay(false);
-    }
-}
-/**
- * Screen for editing an existing custom agent.
- * Allows editing: model, description, system prompt.
- * Also allows deleting the agent.
- */
-class EditScreen extends BaseScreen {
-    originalItem;
-    editState;
-    styles;
-    step = 'field-select';
-    selectedOption = 0;
-    inputBuffer = '';
-    error = null;
-    // Working copy of agent data (location is only 'project' | 'personal' since we don't edit built-in)
-    editedAgent;
-    constructor(originalItem, editState, styles) {
-        super();
-        this.originalItem = originalItem;
-        this.editState = editState;
-        this.styles = styles;
-        // Initialize with current values
-        // Custom agents can only be 'project' or 'personal', never 'builtin'
-        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') {
-                        const label = s.primary(f.label);
-                        lines.push(`  ${prefix}${isSelected ? label : s.muted(f.label)}`);
-                    }
-                    else if (f.id === 'delete') {
-                        const label = s.error(f.label);
-                        lines.push(`  ${prefix}${isSelected ? 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.inputBuffer}█`);
-                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.inputBuffer}█`);
-                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) {
-        const char = extractPrintable(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.inputBuffer.trim();
-                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.inputBuffer = '';
-                this.error = null;
-                return stay();
-            }
-            if (isBackspace(data)) {
-                this.inputBuffer = this.inputBuffer.slice(0, -1);
-                this.error = null;
-                return stay();
-            }
-            if (char) {
-                this.inputBuffer += char;
-                this.error = null;
-                return stay();
-            }
-            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.inputBuffer = '';
-                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.inputBuffer = this.editedAgent.description;
-                        break;
-                    case 2: // System Prompt
-                        this.step = 'edit-prompt';
-                        this.inputBuffer = 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.editState.registry.saveAgent({
-                name: this.editedAgent.name,
-                description: this.editedAgent.description,
-                model: this.editedAgent.model,
-                systemPrompt: this.editedAgent.prompt,
-            }, this.editedAgent.location);
-            this.editState.registry.load();
-            // Pop twice: EditScreen -> DetailScreen -> List
-            return popScreen();
-        }
-        catch (error) {
-            this.error = error.message;
-            return stay();
-        }
-    }
-    deleteAgent() {
-        try {
-            this.editState.registry.deleteAgent(this.originalItem.name);
-            this.editState.registry.load();
-            // Pop twice: EditScreen -> DetailScreen -> List
-            return popScreen();
-        }
-        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) + '...';
-    }
-}
-// =============================================================================
-// Wizard Screen (Multi-Step Agent Creation)
-// =============================================================================
-/**
- * Screen for creating a new agent via multi-step wizard.
- * Steps: location, name, prompt, description, model, confirm
- */
-class WizardScreen extends BaseScreen {
-    editState;
-    styles;
-    step = 'location';
-    selectedOption = 0;
-    inputBuffer = '';
-    error = null;
-    newAgent = {
-        location: 'project',
-        name: '',
-        prompt: '',
-        description: '',
-        model: 'sonnet',
-    };
-    constructor(editState, styles) {
-        super();
-        this.editState = editState;
-        this.styles = styles;
-    }
-    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(`  ${s.secondary('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(`  ${s.secondary('Agent name (identifier)')}`);
-                lines.push('');
-                lines.push(`  Enter a unique identifier:`);
-                lines.push(`  > ${this.inputBuffer}█`);
-                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(`  ${s.secondary('System prompt')}`);
-                lines.push('');
-                lines.push(`  Enter the agent's instructions:`);
-                lines.push(`  > ${this.inputBuffer}█`);
-                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(`  ${s.secondary('Description')}`);
-                lines.push('');
-                lines.push(`  When should the LLM use this agent?`);
-                lines.push(`  > ${this.inputBuffer}█`);
-                lines.push('');
-                lines.push(`  ${s.muted('This helps the LLM know when to invoke this agent.')}`);
-                break;
-            case '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 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(`  ${s.secondary('Confirm')}`);
-                lines.push('');
-                lines.push(`  Name:        ${s.primary(this.newAgent.name)}`);
-                lines.push(`  Location:    ${s.primary(this.newAgent.location === 'project' ? '.compilr-dev/agents/' : '~/.compilr-dev/agents/')}${this.newAgent.name}.md`);
-                lines.push(`  Model:       ${s.primary(this.newAgent.model)}`);
-                lines.push('');
-                lines.push(`  ${s.secondary('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(`  ${s.secondary('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')}`);
-                break;
-            }
-        }
-        lines.push('');
-        lines.push(border);
-        lines.push(`  ${s.muted('Esc Back')}`);
-        lines.push(border);
-        return lines;
-    }
-    handleKey(data) {
-        const char = extractPrintable(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.inputBuffer.trim();
-                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.editState.registry.hasAgent(text)) {
-                        this.error = `Agent "${text}" already exists.`;
-                        return stay();
-                    }
-                    this.newAgent.name = text;
-                    this.step = 'prompt';
-                    this.inputBuffer = '';
-                    this.error = null;
-                }
-                else if (this.step === 'prompt') {
-                    this.newAgent.prompt = text;
-                    this.step = 'description';
-                    this.inputBuffer = '';
-                }
-                else {
-                    this.newAgent.description = text;
-                    this.step = 'model';
-                    this.selectedOption = 0;
-                }
-                return stay();
-            }
-            if (isBackspace(data)) {
-                this.inputBuffer = this.inputBuffer.slice(0, -1);
-                this.error = null;
-                return stay();
-            }
-            if (char) {
-                this.inputBuffer += char;
-                this.error = null;
-                return stay();
-            }
-            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.inputBuffer = this.newAgent.name;
-                break;
-            case 'description':
-                this.step = 'prompt';
-                this.inputBuffer = this.newAgent.prompt;
-                break;
-            case 'model':
-                this.step = 'description';
-                this.inputBuffer = 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.inputBuffer = '';
-                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.editState.registry.saveAgent({
-                            name: this.newAgent.name,
-                            description: this.newAgent.description,
-                            model: this.newAgent.model,
-                            systemPrompt: this.newAgent.prompt,
-                        }, this.newAgent.location);
-                        this.editState.registry.load();
-                        return popScreen();
-                    }
-                    catch (error) {
-                        this.error = error.message;
-                        return stay();
-                    }
-                }
-                else {
-                    // Cancel
-                    return popScreen();
-                }
-        }
-        return stay();
-    }
-}
-// =============================================================================
-// Agents Overlay
-// =============================================================================
-class AgentsOverlay extends TabbedListOverlay {
-    editState;
-    constructor() {
-        const registry = getAgentRegistry();
-        registry.load();
-        // Build items from registry
-        const items = AgentsOverlay.buildItems(registry);
-        const config = {
-            title: 'Agents',
-            tabs: TABS,
-            items,
-            pageSize: 12,
-            detailScreensFullScreen: false,
-            filterByTab: (item, tabId) => {
-                if (tabId === 'builtin')
-                    return item.isBuiltin;
-                return !item.isBuiltin;
-            },
-            getSearchText: (item) => `${item.name} ${item.description}`,
-            renderItem: (item, isSelected, styles) => {
-                const prefix = isSelected ? styles.primary('❯ ') : '  ';
-                // Special "Create new agent" option
-                if (item.isCreateNew) {
-                    return isSelected
-                        ? `${prefix}${styles.primary('Create new agent')}`
-                        : `${prefix}${styles.muted('Create new agent')}`;
-                }
-                const name = `${item.name} · ${item.model}`;
-                const nameStyled = isSelected
-                    ? styles.primary(name.padEnd(30))
-                    : styles.secondary(name.padEnd(30));
-                if (item.isBuiltin) {
-                    return `${prefix}${nameStyled}${styles.muted(item.description)}`;
-                }
-                else {
-                    return `${prefix}${nameStyled}${styles.muted(`(${item.location ?? 'unknown'})`)}`;
-                }
-            },
-            showCount: true,
-            emptyMessage: 'No agents found.',
-            noResultsMessage: 'No agents match the search.',
-            footerHints: (searchMode) => {
-                if (searchMode) {
-                    return 'Type to search · Enter/Esc Exit search · Backspace Delete';
-                }
-                return '/ Search · ↑↓/jk Navigate · Tab Switch tabs · Enter Details · q/Esc Close';
-            },
-        };
-        super(config);
-        this.editState = { registry };
-    }
-    static buildItems(registry) {
-        const items = [];
-        // Add built-in agents
-        for (const agent of registry.getBuiltinAgents()) {
-            items.push(AgentsOverlay.agentToItem(agent, true));
-        }
-        // Add custom agents
-        for (const agent of registry.getCustomAgents()) {
-            items.push(AgentsOverlay.agentToItem(agent, false));
-        }
-        // Add "Create new agent" option for custom tab
-        items.push({
-            name: '',
-            model: '',
-            description: '',
-            isBuiltin: false,
-            isCreateNew: true,
-        });
-        return items;
-    }
-    static agentToItem(agent, isBuiltin) {
-        return {
-            name: agent.name,
-            model: agent.model,
-            description: agent.description,
-            location: agent.location,
-            systemPrompt: agent.systemPrompt,
-            filePath: agent.filePath,
-            isBuiltin,
-        };
-    }
-    createDetailScreen(item) {
-        // "Create new agent" opens the wizard
-        if (item.isCreateNew) {
-            return new WizardScreen(this.editState, this.styles);
-        }
-        // All other agents open the detail view
-        // The onEdit callback pushes the edit screen when user presses 'e'
-        return new DetailScreen(item, this.styles, this.editState, (editScreen) => {
-            this.screenStack.push(editScreen);
-            this.update();
-        });
-    }
-    handleKey(data) {
-        // Only intercept when on the main list screen
-        if (this.screenStack.size() === 1) {
-            // Ctrl+C always closes
-            if (isCtrlC(data)) {
-                this.close(undefined);
-                return;
-            }
-            // Only handle custom keys when not in search mode
-            if (!this.state.searchMode) {
-                const char = extractPrintable(data);
-                // 'q' or Esc closes
-                if (char === 'q' || isEscape(data)) {
-                    this.close(undefined);
-                    return;
-                }
-            }
-        }
-        // After wizard completes, rebuild items
-        const prevStackSize = this.screenStack.size();
-        super.handleKey(data);
-        // If we just popped from wizard, refresh items
-        if (prevStackSize > 1 && this.screenStack.size() === 1) {
-            this.refreshItems();
-        }
-    }
-    refreshItems() {
-        this.editState.registry.load();
-        const items = AgentsOverlay.buildItems(this.editState.registry);
-        this.state.items = items;
-        // Re-apply filters
-        const currentTabId = this.listConfig.tabs[this.state.currentTab]?.id ?? 'builtin';
-        let filtered = items.filter((item) => this.listConfig.filterByTab(item, currentTabId));
-        if (this.state.searchQuery) {
-            const query = this.state.searchQuery.toLowerCase();
-            filtered = filtered.filter((item) => this.listConfig.getSearchText(item).toLowerCase().includes(query));
-        }
-        this.state.filteredItems = filtered;
-        // Clamp selected index
-        if (this.state.selectedIndex >= filtered.length) {
-            this.state.selectedIndex = Math.max(0, filtered.length - 1);
-        }
-    }
-}
-// =============================================================================
-// Export Function (Backward Compatible)
-// =============================================================================
-export async function showAgentsOverlay() {
-    return new AgentsOverlay().show();
-}