@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/agents-overlay.js

@@ -2,500 +2,862 @@
  * Agents Overlay
  *
  * Modal overlay for viewing and managing agent configurations.
- * - Built-in tab: Lists 9 predefined agent types
- * - Custom tab: Lists user-defined agents + create new option
+ * 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 { getStyles } from '../themes/index.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' },
+    { id: 'builtin', label: 'Built-in' },
+    { id: 'custom', label: 'Custom' },
 ];
 // =============================================================================
-// Rendering - List Mode
+// Helper Functions
 // =============================================================================
-function renderListHeader(state) {
-    const s = getStyles();
+function wrapText(text, maxWidth) {
+    if (!text || text.length <= maxWidth)
+        return [text || ''];
+    const words = text.split(' ');
     const lines = [];
-    const cols = terminal.getTerminalWidth();
-    lines.push(s.muted('─'.repeat(Math.max(1, cols - 1))));
-    let tabLine = ' ' + s.primaryBold('Agents') + '  ';
-    for (let i = 0; i < TABS.length; i++) {
-        const tab = TABS[i];
-        if (i === state.currentTab) {
-            tabLine += s.selected(` ${tab.label} `) + '  ';
+    let currentLine = '';
+    for (const word of words) {
+        if (currentLine.length === 0) {
+            currentLine = word;
+        }
+        else if (currentLine.length + 1 + word.length <= maxWidth) {
+            currentLine += ' ' + word;
         }
         else {
-            tabLine += s.muted(` ${tab.label} `) + '  ';
+            lines.push(currentLine);
+            currentLine = word;
         }
     }
-    tabLine += s.muted('(Tab to switch)');
-    lines.push(tabLine);
-    lines.push('');
-    return lines;
-}
-function renderBuiltinTab(state) {
-    const s = getStyles();
-    const lines = [];
-    const agents = state.registry.getBuiltinAgents();
-    lines.push(s.secondary(' Built-in agents (via Task tool):'));
-    lines.push('');
-    for (let i = 0; i < agents.length; i++) {
-        const agent = agents[i];
-        const isSelected = i === state.selectedIndex;
-        const prefix = isSelected ? s.primary(' ❯ ') : '   ';
-        const name = `${agent.name} · ${agent.model}`;
-        const nameStyled = isSelected ? s.primary(name.padEnd(30)) : s.secondary(name.padEnd(30));
-        const desc = s.muted(agent.description);
-        lines.push(prefix + nameStyled + desc);
+    if (currentLine.length > 0) {
+        lines.push(currentLine);
     }
-    lines.push('');
-    lines.push(s.muted(' These agents are available to the LLM via the Task tool.'));
-    return lines;
+    return lines.length > 0 ? lines : [''];
 }
-function renderCustomTab(state) {
-    const s = getStyles();
-    const lines = [];
-    const agents = state.registry.getCustomAgents();
-    if (agents.length === 0) {
-        lines.push(s.muted(' No custom agents found'));
+// =============================================================================
+// 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('');
-        lines.push(state.selectedIndex === 0
-            ? s.primary(' ❯ Create new agent')
-            : s.muted('   Create new agent'));
+        // 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('');
-        lines.push(s.muted(' Custom agents are stored in:'));
-        lines.push(s.muted(`   ${state.registry.getProjectDir()}/     (project)`));
-        lines.push(s.muted(`   ${state.registry.getUserDir()}/   (personal)`));
-    }
-    else {
-        lines.push(s.secondary(' Custom agents:'));
+        // 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('');
-        for (let i = 0; i < agents.length; i++) {
-            const agent = agents[i];
-            const isSelected = i === state.selectedIndex;
-            const prefix = isSelected ? s.primary(' ❯ ') : '   ';
-            const name = `${agent.name} · ${agent.model}`;
-            const nameStyled = isSelected ? s.primary(name.padEnd(30)) : s.secondary(name.padEnd(30));
-            const location = s.muted(`(${agent.location})`);
-            lines.push(prefix + nameStyled + location);
-        }
-        lines.push(s.muted(' ──────────────────────────────────'));
-        const createIdx = agents.length;
-        const isCreateSelected = state.selectedIndex === createIdx;
-        lines.push(isCreateSelected
-            ? s.primary(' ❯ Create new agent')
-            : s.muted('   Create new agent'));
+        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);
     }
-    return lines;
-}
-function renderListFooter() {
-    const s = getStyles();
-    const lines = [];
-    lines.push('');
-    lines.push(s.muted(' ↑↓ Navigate · Tab Switch · Enter Select · Esc Close'));
-    return lines;
 }
-function buildListLines(state) {
-    const allLines = [];
-    allLines.push(...renderListHeader(state));
-    if (TABS[state.currentTab].id === 'builtin') {
-        allLines.push(...renderBuiltinTab(state));
+/**
+ * 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',
+        };
     }
-    else {
-        allLines.push(...renderCustomTab(state));
+    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;
     }
-    allLines.push(...renderListFooter());
-    return allLines;
-}
-// =============================================================================
-// Rendering - Wizard Mode
-// =============================================================================
-function buildWizardLines(state) {
-    const s = getStyles();
-    const lines = [];
-    const cols = terminal.getTerminalWidth();
-    lines.push(s.muted('─'.repeat(Math.max(1, cols - 1))));
-    lines.push(' ' + s.primaryBold('Create new agent'));
-    lines.push('');
-    switch (state.wizardStep) {
-        case 'location':
-            lines.push(s.secondary(' Choose location'));
-            lines.push('');
-            lines.push(state.wizardSelectedOption === 0
-                ? s.primary(' ❯ 1. Project (.compilr-dev/agents/)')
-                : s.muted('   1. Project (.compilr-dev/agents/)'));
-            lines.push(state.wizardSelectedOption === 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(` > ${state.wizardInputBuffer}█`);
-            lines.push('');
-            if (state.wizardError) {
-                lines.push(s.error(` ${state.wizardError}`));
+    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();
             }
-            else {
-                lines.push(s.muted(' Use lowercase letters, numbers, hyphens (e.g., code-reviewer)'));
+            if (isBackspace(data)) {
+                this.inputBuffer = this.inputBuffer.slice(0, -1);
+                this.error = null;
+                return stay();
             }
-            break;
-        case 'prompt':
-            lines.push(s.secondary(' System prompt'));
-            lines.push('');
-            lines.push(' Enter the agent\'s instructions:');
-            lines.push(` > ${state.wizardInputBuffer}█`);
-            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(` > ${state.wizardInputBuffer}█`);
-            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 = state.wizardSelectedOption === i;
-                const prefix = isSelected ? s.primary(' ❯ ') : '   ';
-                const label = isSelected
-                    ? s.primary(`${String(i + 1)}. ${m.label.padEnd(10)} - ${m.desc}`)
-                    : s.muted(`${String(i + 1)}. ${m.label.padEnd(10)} - ${m.desc}`);
-                lines.push(prefix + label);
+            if (char) {
+                this.inputBuffer += char;
+                this.error = null;
+                return stay();
             }
-            break;
+            return stay(false);
         }
-        case 'confirm':
-            lines.push(s.secondary(' Confirm'));
-            lines.push('');
-            lines.push(` Name:        ${s.primary(state.wizardName)}`);
-            lines.push(` Location:    ${s.primary(state.wizardLocation === 'project' ? '.compilr-dev/agents/' : '~/.compilr-dev/agents/')}${state.wizardName}.md`);
-            lines.push(` Model:       ${s.primary(state.wizardModel)}`);
-            lines.push('');
-            lines.push(s.secondary(' Description:'));
-            lines.push(s.muted(`   ${state.wizardDescription.slice(0, 60)}${state.wizardDescription.length > 60 ? '...' : ''}`));
-            lines.push('');
-            lines.push(s.secondary(' System prompt:'));
-            lines.push(s.muted(`   ${state.wizardPrompt.slice(0, 60)}${state.wizardPrompt.length > 60 ? '...' : ''}`));
-            lines.push('');
-            lines.push(state.wizardSelectedOption === 0
-                ? s.primary(' ❯ Save')
-                : s.muted('   Save'));
-            lines.push(state.wizardSelectedOption === 1
-                ? s.primary(' ❯ Cancel')
-                : s.muted('   Cancel'));
-            break;
+        // 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);
     }
-    lines.push('');
-    lines.push(s.muted(' Esc to go back'));
-    return lines;
-}
-// =============================================================================
-// Unified Rendering
-// =============================================================================
-function buildLines(state) {
-    if (state.mode === 'wizard') {
-        return buildWizardLines(state);
+    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) + '...';
     }
-    return buildListLines(state);
-}
-function render(state, prevLineCount) {
-    const lines = buildLines(state);
-    // Clear previous content
-    terminal.clearLinesAbove(prevLineCount);
-    // Write new content
-    terminal.write(lines.join('\n'));
-    return lines.length;
 }
 // =============================================================================
-// Main Export
+// Wizard Screen (Multi-Step Agent Creation)
 // =============================================================================
 /**
- * Show the agents overlay
+ * Screen for creating a new agent via multi-step wizard.
+ * Steps: location, name, prompt, description, model, confirm
  */
-export async function showAgentsOverlay() {
-    const registry = getAgentRegistry();
-    registry.load();
-    const state = {
-        mode: 'list',
-        currentTab: 0,
-        selectedIndex: 0,
-        wizardStep: 'location',
-        wizardLocation: 'project',
-        wizardName: '',
-        wizardPrompt: '',
-        wizardDescription: '',
-        wizardModel: 'sonnet',
-        wizardSelectedOption: 0,
-        wizardInputBuffer: '',
-        wizardError: null,
-        registry,
+class WizardScreen extends BaseScreen {
+    editState;
+    styles;
+    step = 'location';
+    selectedOption = 0;
+    inputBuffer = '';
+    error = null;
+    newAgent = {
+        location: 'project',
+        name: '',
+        prompt: '',
+        description: '',
+        model: 'sonnet',
     };
-    let lineCount = 0;
-    terminal.writeLine('');
-    terminal.hideCursor();
-    const wasRawMode = process.stdin.isRaw;
-    terminal.enableRawMode();
-    lineCount = render(state, 0);
-    const getMaxIndex = () => {
-        if (TABS[state.currentTab].id === 'builtin') {
-            return state.registry.getBuiltinAgents().length - 1;
-        }
-        else {
-            return state.registry.getCustomAgents().length; // includes "Create new"
-        }
-    };
-    // Reset wizard state for a new creation
-    const resetWizard = () => {
-        state.wizardStep = 'location';
-        state.wizardLocation = 'project';
-        state.wizardName = '';
-        state.wizardPrompt = '';
-        state.wizardDescription = '';
-        state.wizardModel = 'sonnet';
-        state.wizardSelectedOption = 0;
-        state.wizardInputBuffer = '';
-        state.wizardError = null;
-    };
-    // Wizard: advance to next step
-    const wizardNextStep = () => {
-        switch (state.wizardStep) {
+    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':
-                state.wizardLocation = state.wizardSelectedOption === 0 ? 'project' : 'personal';
-                state.wizardStep = 'name';
-                state.wizardInputBuffer = '';
+                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':
-                state.wizardName = state.wizardInputBuffer.trim();
-                state.wizardStep = 'prompt';
-                state.wizardInputBuffer = '';
+                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':
-                state.wizardPrompt = state.wizardInputBuffer.trim();
-                state.wizardStep = 'description';
-                state.wizardInputBuffer = '';
+                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':
-                state.wizardDescription = state.wizardInputBuffer.trim();
-                state.wizardStep = 'model';
-                state.wizardSelectedOption = 0;
+                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': {
-                const models = ['sonnet', 'opus', 'haiku', 'inherit'];
-                state.wizardModel = models[state.wizardSelectedOption];
-                state.wizardStep = 'confirm';
-                state.wizardSelectedOption = 0;
+                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':
-                if (state.wizardSelectedOption === 0) {
-                    // Save
-                    try {
-                        registry.saveAgent({
-                            name: state.wizardName,
-                            description: state.wizardDescription,
-                            model: state.wizardModel,
-                            systemPrompt: state.wizardPrompt,
-                        }, state.wizardLocation);
-                        // Success - go back to list
-                        registry.load();
-                        state.mode = 'list';
-                        state.selectedIndex = 0;
-                        return true; // Created successfully
+            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();
                     }
-                    catch (error) {
-                        state.wizardError = error.message;
+                    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 {
-                    // Cancel - go back to list
-                    state.mode = 'list';
+                    this.newAgent.description = text;
+                    this.step = 'model';
+                    this.selectedOption = 0;
                 }
-                break;
+                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);
         }
-        state.wizardError = null;
-        return false;
-    };
-    // Wizard: go back to previous step (or exit wizard)
-    const wizardPrevStep = () => {
-        switch (state.wizardStep) {
+        // 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':
-                // Exit wizard, go back to list
-                state.mode = 'list';
-                break;
+                return popScreen();
             case 'name':
-                state.wizardStep = 'location';
-                state.wizardSelectedOption = state.wizardLocation === 'project' ? 0 : 1;
+                this.step = 'location';
+                this.selectedOption = this.newAgent.location === 'project' ? 0 : 1;
                 break;
             case 'prompt':
-                state.wizardStep = 'name';
-                state.wizardInputBuffer = state.wizardName;
+                this.step = 'name';
+                this.inputBuffer = this.newAgent.name;
                 break;
             case 'description':
-                state.wizardStep = 'prompt';
-                state.wizardInputBuffer = state.wizardPrompt;
+                this.step = 'prompt';
+                this.inputBuffer = this.newAgent.prompt;
                 break;
             case 'model':
-                state.wizardStep = 'description';
-                state.wizardInputBuffer = state.wizardDescription;
+                this.step = 'description';
+                this.inputBuffer = this.newAgent.description;
                 break;
             case 'confirm': {
-                state.wizardStep = 'model';
+                this.step = 'model';
                 const models = ['sonnet', 'opus', 'haiku', 'inherit'];
-                state.wizardSelectedOption = models.indexOf(state.wizardModel);
+                this.selectedOption = models.indexOf(this.newAgent.model);
                 break;
             }
         }
-        state.wizardError = null;
-    };
-    return new Promise((resolve) => {
-        const cleanup = () => {
-            terminal.clearLinesAbove(lineCount);
-            terminal.writeLine('');
-            terminal.showCursor();
-            if (!wasRawMode) {
-                terminal.disableRawMode();
+        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;
             }
-            process.stdin.removeListener('data', onData);
-        };
-        const onData = (data) => {
-            const isEscape = data.length === 1 && data[0] === 0x1b;
-            const isTab = data.length === 1 && data[0] === 0x09;
-            const isUpArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x41;
-            const isDownArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x42;
-            const isCtrlC = data.length === 1 && data[0] === 0x03;
-            const isEnter = data.length === 1 && (data[0] === 0x0d || data[0] === 0x0a);
-            const isBackspace = data.length === 1 && (data[0] === 0x7f || data[0] === 0x08);
-            // ===== LIST MODE =====
-            if (state.mode === 'list') {
-                if (isEscape || isCtrlC) {
-                    cleanup();
-                    resolve();
-                    return;
+            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();
+                    }
                 }
-                if (isTab) {
-                    state.currentTab = (state.currentTab + 1) % TABS.length;
-                    state.selectedIndex = 0;
-                    lineCount = render(state, lineCount);
-                    return;
+                else {
+                    // Cancel
+                    return popScreen();
                 }
-                if (isUpArrow && state.selectedIndex > 0) {
-                    state.selectedIndex--;
-                    lineCount = render(state, lineCount);
-                    return;
+        }
+        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')}`;
                 }
-                if (isDownArrow && state.selectedIndex < getMaxIndex()) {
-                    state.selectedIndex++;
-                    lineCount = render(state, lineCount);
-                    return;
+                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)}`;
                 }
-                if (isEnter) {
-                    if (TABS[state.currentTab].id === 'custom') {
-                        const customAgents = state.registry.getCustomAgents();
-                        if (state.selectedIndex === customAgents.length) {
-                            // "Create new agent" selected - enter wizard mode
-                            resetWizard();
-                            state.mode = 'wizard';
-                            lineCount = render(state, lineCount);
-                        }
-                    }
-                    return;
+                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;
             }
-            // ===== WIZARD MODE =====
-            // Mode is always 'wizard' at this point since we're in the else block
-            {
-                if (isCtrlC) {
-                    cleanup();
-                    resolve();
+            // 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;
                 }
-                if (isEscape) {
-                    wizardPrevStep();
-                    lineCount = render(state, lineCount);
-                    return;
-                }
-                // Input steps: name, prompt, description
-                if (['name', 'prompt', 'description'].includes(state.wizardStep)) {
-                    if (isEnter) {
-                        if (state.wizardInputBuffer.trim()) {
-                            // Validate name
-                            if (state.wizardStep === 'name') {
-                                const name = state.wizardInputBuffer.trim();
-                                if (!/^[a-z][a-z0-9-]{1,49}$/.test(name)) {
-                                    state.wizardError = 'Invalid name. Use lowercase letters, numbers, hyphens.';
-                                    lineCount = render(state, lineCount);
-                                    return;
-                                }
-                                if (registry.hasAgent(name)) {
-                                    state.wizardError = `Agent "${name}" already exists.`;
-                                    lineCount = render(state, lineCount);
-                                    return;
-                                }
-                            }
-                            wizardNextStep();
-                            lineCount = render(state, lineCount);
-                        }
-                        return;
-                    }
-                    if (isBackspace) {
-                        state.wizardInputBuffer = state.wizardInputBuffer.slice(0, -1);
-                        state.wizardError = null;
-                        lineCount = render(state, lineCount);
-                        return;
-                    }
-                    // Regular character input
-                    const char = data.toString('utf-8');
-                    if (char.length === 1 && char.charCodeAt(0) >= 32) {
-                        state.wizardInputBuffer += char;
-                        state.wizardError = null;
-                        lineCount = render(state, lineCount);
-                    }
-                    return;
-                }
-                // Selection steps: location, model, confirm
-                if (['location', 'model', 'confirm'].includes(state.wizardStep)) {
-                    let maxOptions = 2;
-                    if (state.wizardStep === 'model')
-                        maxOptions = 4;
-                    if (isUpArrow && state.wizardSelectedOption > 0) {
-                        state.wizardSelectedOption--;
-                        lineCount = render(state, lineCount);
-                        return;
-                    }
-                    if (isDownArrow && state.wizardSelectedOption < maxOptions - 1) {
-                        state.wizardSelectedOption++;
-                        lineCount = render(state, lineCount);
-                        return;
-                    }
-                    if (isEnter) {
-                        wizardNextStep();
-                        lineCount = render(state, lineCount);
-                        return;
-                    }
-                }
             }
-        };
-        process.stdin.on('data', onData);
-    });
+        }
+        // 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();
 }