@compilr-dev/cli 0.4.0 → 0.5.1

package/dist/ui/overlay/impl/team-overlay-v2.js

@@ -0,0 +1,692 @@
+/**
+ * Team Overlay V2
+ *
+ * Modal overlay for managing the multi-agent team.
+ * Uses TabbedListOverlayV2 for consistent list/tab behavior.
+ *
+ * Features:
+ * - Members tab: List team agents, switch, add, remove
+ * - Roles tab: Available roles to add
+ * - Context tab: View per-agent context usage and shared context status
+ */
+import * as terminal from '../../terminal.js';
+import { TabbedListOverlayV2, BaseScreen, stay, popScreen, closeOverlay, isEscape, isCtrlC, isEnter, isClose, extractPrintable, renderBorder, wrapText, renderProgressBar, formatTokens, } from '../../base/index.js';
+import { ROLE_METADATA } from '../../../multi-agent/index.js';
+import { PROFILE_INFO } from '../../../multi-agent/tool-config.js';
+import { TIER_INFO, getModelForTier } from '../../../models/index.js';
+import { getSettings } from '../../../settings/index.js';
+import { getRoleTierDefault, setRoleTierDefault } from '../../../settings/index.js';
+const TABS = [
+    { id: 'members', label: 'Members' },
+    { id: 'roles', label: 'Add Agent' },
+    { id: 'context', label: 'Context' },
+];
+// =============================================================================
+// Detail Screen (View Agent Info)
+// =============================================================================
+const MODEL_TIERS_LIST = ['fast', 'balanced', 'powerful'];
+class AgentDetailScreen extends BaseScreen {
+    item;
+    styles;
+    editingTier = false;
+    selectedTierIndex;
+    originalTierIndex;
+    constructor(item, styles) {
+        super();
+        this.item = item;
+        this.styles = styles;
+        // Initialize tier index from current tier or default to balanced
+        const currentTier = item.modelTier ?? 'balanced';
+        this.selectedTierIndex = MODEL_TIERS_LIST.indexOf(currentTier);
+        if (this.selectedTierIndex === -1)
+            this.selectedTierIndex = 1;
+        this.originalTierIndex = this.selectedTierIndex;
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        const contentWidth = cols - 6;
+        lines.push(border);
+        lines.push(`  ${s.primaryBold(`${this.item.mascot} ${this.item.displayName}`)}`);
+        lines.push('');
+        // Info
+        lines.push(`  ${s.muted('ID:')}     ${s.primary(`$${this.item.id}`)}`);
+        lines.push(`  ${s.muted('Role:')}   ${s.secondary(this.item.role)}`);
+        // Model tier (editable) and model ID
+        const currentTier = MODEL_TIERS_LIST[this.selectedTierIndex];
+        const tierInfo = TIER_INFO[currentTier];
+        const tierChanged = this.selectedTierIndex !== this.originalTierIndex;
+        if (this.editingTier) {
+            const tierLabel = s.primaryBold('▶ Tier:');
+            const tierValue = s.primaryBold(`[${tierInfo.label}]`);
+            const changeHint = tierChanged ? s.warning(' ← will change model') : '';
+            lines.push(`  ${tierLabel}   ${tierValue}${changeHint}`);
+        }
+        else {
+            lines.push(`  ${s.muted('Tier:')}   ${s.primary(`[${tierInfo.label}]`)}`);
+        }
+        // Show actual model ID
+        if (this.item.modelId) {
+            lines.push(`  ${s.muted('Model:')}  ${s.secondary(this.item.modelId)}`);
+        }
+        // Status badges
+        const badges = [];
+        if (this.item.isActive) {
+            badges.push(s.primary('● Active'));
+        }
+        if (this.item.isCoordinator) {
+            badges.push(s.secondary('★ Coordinator'));
+        }
+        if (this.item.hasToolRestrictions) {
+            badges.push(s.warning('◐ Tool Restrictions'));
+        }
+        if (badges.length > 0) {
+            lines.push(`  ${badges.join('  ')}`);
+        }
+        lines.push('');
+        // Description
+        if (this.item.description) {
+            lines.push(`  ${s.muted('Description:')}`);
+            const wrapped = wrapText(this.item.description, contentWidth);
+            for (const line of wrapped) {
+                lines.push(`    ${s.secondary(line)}`);
+            }
+        }
+        // Tool Profile and Skills (for custom agents)
+        if (this.item.role === 'custom' && this.item.toolProfile) {
+            lines.push('');
+            const isValidProfile = this.item.toolProfile in PROFILE_INFO;
+            const profileLabel = isValidProfile
+                ? PROFILE_INFO[this.item.toolProfile].label
+                : this.item.toolProfile;
+            lines.push(`  ${s.muted('Tool Profile:')} ${s.primary(profileLabel)}`);
+            if (isValidProfile) {
+                lines.push(`    ${s.muted(PROFILE_INFO[this.item.toolProfile].description)}`);
+            }
+            // Show enabled skills
+            if (this.item.enabledSkills && this.item.enabledSkills.length > 0) {
+                lines.push(`  ${s.muted('Skills:')} ${s.secondary(this.item.enabledSkills.join(', '))}`);
+            }
+            else {
+                lines.push(`  ${s.muted('Skills:')} ${s.secondary('All skills enabled')}`);
+            }
+        }
+        lines.push('');
+        // Hints - different based on editing mode
+        if (this.editingTier) {
+            lines.push(`  ${s.muted('←→: change tier · Enter: confirm · Esc: cancel')}`);
+            if (tierChanged) {
+                lines.push(`  ${s.warning('Note: Changing tier switches to a different model.')}`);
+                lines.push(`  ${s.warning('Conversation history preserved (thinking blocks stripped).')}`);
+            }
+        }
+        else {
+            lines.push(`  ${s.muted('Enter: switch to agent · t: edit model tier')}`);
+            if (this.item.id !== 'default') {
+                lines.push(`  ${s.muted('d: remove from team · Esc: go back')}`);
+            }
+            else {
+                lines.push(`  ${s.muted('Esc: go back')}`);
+            }
+        }
+        lines.push('');
+        lines.push(border);
+        return lines;
+    }
+    getMinHeight() {
+        // More height for custom agents with tool profile info, and when editing
+        const base = this.item.role === 'custom' ? 22 : 18;
+        return this.editingTier ? base + 2 : base;
+    }
+    handleKey(data) {
+        if (this.editingTier) {
+            // In tier editing mode
+            if (isEscape(data) || isCtrlC(data)) {
+                // Cancel editing, restore original tier
+                this.selectedTierIndex = this.originalTierIndex;
+                this.editingTier = false;
+                return stay();
+            }
+            if (isEnter(data)) {
+                // Confirm tier change
+                this.editingTier = false;
+                const tierChanged = this.selectedTierIndex !== this.originalTierIndex;
+                if (tierChanged) {
+                    const newTier = MODEL_TIERS_LIST[this.selectedTierIndex];
+                    return closeOverlay({
+                        action: 'change-tier',
+                        agentId: this.item.id,
+                        modelTier: newTier,
+                    });
+                }
+                return stay();
+            }
+            // Arrow keys cycle through tiers
+            const key = data.toString();
+            if (key === '\x1b[D' || key === 'h') { // Left arrow or h
+                this.selectedTierIndex = (this.selectedTierIndex - 1 + MODEL_TIERS_LIST.length) % MODEL_TIERS_LIST.length;
+            }
+            else if (key === '\x1b[C' || key === 'l') { // Right arrow or l
+                this.selectedTierIndex = (this.selectedTierIndex + 1) % MODEL_TIERS_LIST.length;
+            }
+            return stay();
+        }
+        // Normal mode
+        if (isEscape(data) || isCtrlC(data) || isClose(data)) {
+            return popScreen();
+        }
+        if (isEnter(data)) {
+            // Switch to this agent
+            return closeOverlay({ action: 'switch', agentId: this.item.id });
+        }
+        const char = extractPrintable(data);
+        if (char === 't') {
+            // Enter tier editing mode
+            this.editingTier = true;
+            return stay();
+        }
+        if (char === 'd' && this.item.id !== 'default') {
+            // Return remove action - command handler will do the actual removal
+            // (including cleanup of custom-agents.json for custom agents)
+            return closeOverlay({ action: 'remove', agentId: this.item.id, role: this.item.role });
+        }
+        return stay();
+    }
+}
+// =============================================================================
+// Add Role Screen (Confirm adding role with optional custom name and model tier)
+// =============================================================================
+class AddRoleScreen extends BaseScreen {
+    item;
+    styles;
+    customName = '';
+    selectedTierIndex;
+    setAsDefault = false;
+    focusedField = 'name';
+    roleDefaultTier;
+    userDefaultTier;
+    constructor(item, styles) {
+        super();
+        this.item = item;
+        this.styles = styles;
+        // Get role's built-in default and user's saved preference
+        this.roleDefaultTier = item.defaultModelTier ?? 'balanced';
+        this.userDefaultTier = getRoleTierDefault(item.role);
+        // Initialize to user preference if set, otherwise role default
+        const initialTier = this.userDefaultTier ?? this.roleDefaultTier;
+        this.selectedTierIndex = MODEL_TIERS_LIST.indexOf(initialTier);
+        if (this.selectedTierIndex === -1)
+            this.selectedTierIndex = 1; // fallback to balanced
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        const contentWidth = cols - 6;
+        lines.push(border);
+        lines.push(`  ${s.primaryBold(`Add ${this.item.mascot} ${this.item.displayName}`)}`);
+        lines.push('');
+        // Description
+        const wrapped = wrapText(this.item.description, contentWidth);
+        for (const line of wrapped) {
+            lines.push(`    ${s.secondary(line)}`);
+        }
+        lines.push('');
+        // Custom name input
+        const defaultId = this.item.role;
+        const displayId = this.customName || defaultId;
+        const nameLabel = this.focusedField === 'name' ? s.primaryBold('▶ Agent ID:') : s.muted('  Agent ID:');
+        lines.push(`  ${nameLabel} ${s.primary(`$${displayId}`)}${this.customName ? '' : s.muted(' (default)')}`);
+        lines.push('');
+        // Model tier - single cycling value
+        const currentTier = MODEL_TIERS_LIST[this.selectedTierIndex];
+        const tierInfo = TIER_INFO[currentTier];
+        const isRoleDefault = currentTier === this.roleDefaultTier;
+        const isUserDefault = currentTier === this.userDefaultTier;
+        let tierSuffix = '';
+        if (isUserDefault) {
+            tierSuffix = ' (your default)';
+        }
+        else if (isRoleDefault) {
+            tierSuffix = ' (default)';
+        }
+        const tierLabel = this.focusedField === 'tier' ? s.primaryBold('▶ Model Tier:') : s.muted('  Model Tier:');
+        const tierValue = this.focusedField === 'tier'
+            ? s.primaryBold(`[${tierInfo.label}${tierSuffix}]`)
+            : s.primary(`[${tierInfo.label}${tierSuffix}]`);
+        lines.push(`  ${tierLabel} ${tierValue}`);
+        lines.push('');
+        // Checkbox for setting as default
+        const checkboxLabel = this.focusedField === 'checkbox' ? s.primaryBold('▶') : ' ';
+        const checkboxValue = this.setAsDefault ? s.primary('[✓]') : s.muted('[ ]');
+        const checkboxText = `Set as default for ${this.item.displayName}`;
+        lines.push(`  ${checkboxLabel} ${checkboxValue} ${this.focusedField === 'checkbox' ? s.primary(checkboxText) : s.secondary(checkboxText)}`);
+        lines.push('');
+        // Hints based on focused field
+        if (this.focusedField === 'name') {
+            lines.push(`  ${s.muted('Type: custom name · Tab: next field · Enter: add · Esc: cancel')}`);
+        }
+        else if (this.focusedField === 'tier') {
+            lines.push(`  ${s.muted('←→: change tier · Tab: next field · Enter: add · Esc: cancel')}`);
+        }
+        else {
+            lines.push(`  ${s.muted('Space: toggle · Tab: next field · Enter: add · Esc: cancel')}`);
+        }
+        lines.push('');
+        lines.push(border);
+        return lines;
+    }
+    getMinHeight() {
+        return 18;
+    }
+    handleKey(data) {
+        if (isEscape(data) || isCtrlC(data) || isClose(data)) {
+            return popScreen();
+        }
+        if (isEnter(data)) {
+            // Save as default if checkbox is checked
+            const modelTier = MODEL_TIERS_LIST[this.selectedTierIndex];
+            if (this.setAsDefault) {
+                setRoleTierDefault(this.item.role, modelTier);
+            }
+            // Return result - command handler will do the actual add
+            const customId = this.customName.trim() || undefined;
+            return closeOverlay({ action: 'add', role: this.item.role, customId, modelTier });
+        }
+        // Tab cycles through fields: name -> tier -> checkbox -> name
+        if (data[0] === 9) { // Tab
+            if (this.focusedField === 'name') {
+                this.focusedField = 'tier';
+            }
+            else if (this.focusedField === 'tier') {
+                this.focusedField = 'checkbox';
+            }
+            else {
+                this.focusedField = 'name';
+            }
+            return stay();
+        }
+        // Field-specific handling
+        if (this.focusedField === 'name') {
+            // Handle backspace
+            if (data[0] === 127 || data[0] === 8) {
+                if (this.customName.length > 0) {
+                    this.customName = this.customName.slice(0, -1);
+                }
+                return stay();
+            }
+            // Handle printable characters for custom name
+            const char = extractPrintable(data);
+            if (char && /^[a-zA-Z0-9_-]$/.test(char)) {
+                this.customName += char.toLowerCase();
+            }
+        }
+        else if (this.focusedField === 'tier') {
+            // Tier selection - left/right arrows cycle through values
+            const key = data.toString();
+            if (key === '\x1b[D' || key === 'h') { // Left arrow or h
+                this.selectedTierIndex = (this.selectedTierIndex - 1 + MODEL_TIERS_LIST.length) % MODEL_TIERS_LIST.length;
+            }
+            else if (key === '\x1b[C' || key === 'l') { // Right arrow or l
+                this.selectedTierIndex = (this.selectedTierIndex + 1) % MODEL_TIERS_LIST.length;
+            }
+        }
+        else {
+            // focusedField === 'checkbox': Space toggles checkbox
+            if (data[0] === 32) { // Space
+                this.setAsDefault = !this.setAsDefault;
+            }
+        }
+        return stay();
+    }
+}
+// =============================================================================
+// Context Detail Screen (View Agent Context Status)
+// =============================================================================
+class ContextDetailScreen extends BaseScreen {
+    item;
+    styles;
+    constructor(item, styles) {
+        super();
+        this.item = item;
+        this.styles = styles;
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        lines.push(border);
+        if (this.item.isSharedContext) {
+            // Shared context detail
+            lines.push(`  ${s.primaryBold('* Shared Team Context')}`);
+            lines.push('');
+            lines.push(`  ${s.muted('Usage:')}  ${renderProgressBar(this.item.utilization / 100, 20, s)}`);
+            lines.push(`  ${s.muted('Tokens:')} ${formatTokens(this.item.currentTokens)} / ${formatTokens(this.item.maxTokens)}`);
+            lines.push('');
+            lines.push(`  ${s.secondary('Shared context is injected into all agent prompts.')}`);
+            lines.push(`  ${s.secondary('It includes project info, decisions, and artifact summaries.')}`);
+        }
+        else {
+            // Agent context detail
+            lines.push(`  ${s.primaryBold(`${this.item.mascot} ${this.item.displayName} - Context`)}`);
+            lines.push('');
+            lines.push(`  ${s.muted('Usage:')}    ${renderProgressBar(this.item.utilization / 100, 20, s)}`);
+            lines.push(`  ${s.muted('Tokens:')}   ${formatTokens(this.item.currentTokens)} / ${formatTokens(this.item.maxTokens)}`);
+            lines.push(`  ${s.muted('Messages:')} ${String(this.item.messageCount)}`);
+            lines.push('');
+            if (this.item.utilization > 70) {
+                lines.push(`  ${s.warning('⚠ Context is getting full. Consider compacting.')}`);
+                lines.push('');
+            }
+            lines.push(`  ${s.muted('Press c to compact this agent\'s context')}`);
+        }
+        lines.push(`  ${s.muted('Press Esc to go back')}`);
+        lines.push('');
+        lines.push(border);
+        return lines;
+    }
+    // renderProgressBar and formatTokens are now imported from '../../base/index.js'
+    getMinHeight() {
+        return 14;
+    }
+    handleKey(data) {
+        if (isEscape(data) || isCtrlC(data) || isClose(data)) {
+            return popScreen();
+        }
+        const char = extractPrintable(data);
+        if (char === 'c' && !this.item.isSharedContext) {
+            // Request compaction for this agent
+            return closeOverlay({ action: 'compact', agentId: this.item.id });
+        }
+        return stay();
+    }
+}
+// =============================================================================
+// Main Overlay
+// =============================================================================
+export class TeamOverlayV2 extends TabbedListOverlayV2 {
+    type = 'inline';
+    id = 'team-overlay-v2';
+    constructor(team, _options = {}) {
+        const memberItems = TeamOverlayV2.buildMemberItems(team);
+        const roleItems = TeamOverlayV2.buildRoleItems(team);
+        const contextItems = TeamOverlayV2.buildContextItems(team);
+        const allItems = [...memberItems, ...roleItems, ...contextItems];
+        super({
+            title: 'Team Management',
+            tabs: TABS,
+            items: allItems,
+            pageSize: 10,
+            filterByTab: (item, tabId) => {
+                if (tabId === 'members')
+                    return item.isMember;
+                if (tabId === 'context')
+                    return item.isContext;
+                // roles tab: neither member nor context
+                return !item.isMember && !item.isContext;
+            },
+            getSearchText: (item) => {
+                if (item.isMember) {
+                    return `${item.id} ${item.displayName} ${item.role}`;
+                }
+                if (item.isContext) {
+                    return `${item.id} ${item.displayName}`;
+                }
+                if ('isCustomCreate' in item && item.isCustomCreate) {
+                    return `custom create ${item.displayName}`;
+                }
+                // RoleItem (TypeScript has narrowed the type)
+                return `${item.role} ${item.displayName} ${item.description}`;
+            },
+            renderItem: (item, isSelected, styles) => {
+                const prefix = isSelected ? styles.primary('❯ ') : '  ';
+                const cols = terminal.getTerminalWidth();
+                const maxWidth = cols - 10;
+                if (item.isMember) {
+                    // TeamMemberItem
+                    const activeIndicator = item.isActive ? styles.primary('●') : ' ';
+                    const coordIndicator = item.isCoordinator ? styles.secondary('★') : '';
+                    const label = `${item.mascot} $${item.id}`;
+                    const name = item.displayName;
+                    // Model tier badge
+                    let tierBadge = '';
+                    if (item.modelTier) {
+                        tierBadge = styles.muted(` [${TIER_INFO[item.modelTier].label}]`);
+                    }
+                    const badges = [activeIndicator, coordIndicator].filter(Boolean).join(' ');
+                    let line = `${prefix}${label} ${styles.muted(`(${name})`)}${tierBadge} ${badges}`;
+                    if (line.length > maxWidth) {
+                        line = line.slice(0, maxWidth - 1) + '…';
+                    }
+                    return isSelected ? styles.primary(line) : line;
+                }
+                else if (item.isContext) {
+                    // ContextItem - show progress bar
+                    const pct = item.utilization;
+                    const barWidth = 10;
+                    const filled = Math.round((pct / 100) * barWidth);
+                    const empty = barWidth - filled;
+                    const bar = '█'.repeat(filled) + '░'.repeat(empty);
+                    const barColor = pct > 80 ? styles.error : pct > 60 ? styles.warning : styles.primary;
+                    let label;
+                    if (item.isSharedContext) {
+                        label = `* Shared Context`;
+                    }
+                    else {
+                        label = `${item.mascot} $${item.id}`;
+                    }
+                    // Pad label to fixed width for alignment (18 chars covers most cases)
+                    const labelWidth = 18;
+                    const paddedLabel = label.padEnd(labelWidth);
+                    const tokens = formatTokens(item.currentTokens);
+                    // Pad percentage to fixed width (3 chars: 0-100)
+                    const pctStr = String(Math.round(pct)).padStart(3);
+                    let line = `${prefix}${paddedLabel} ${barColor(bar)} ${pctStr}% (${tokens})`;
+                    if (line.length > maxWidth) {
+                        line = line.slice(0, maxWidth - 1) + '…';
+                    }
+                    return isSelected ? styles.primary(line) : line;
+                }
+                else if ('isCustomCreate' in item && item.isCustomCreate) {
+                    // CustomCreateItem - special styling
+                    let line = `${prefix}${styles.secondary(item.mascot)} ${styles.primary(item.displayName)}`;
+                    if (line.length > maxWidth) {
+                        line = line.slice(0, maxWidth - 1) + '…';
+                    }
+                    return line;
+                }
+                else {
+                    // RoleItem (TypeScript has narrowed the type)
+                    const label = `${item.mascot} ${item.displayName}`;
+                    // Show profile badge
+                    let profileBadge = '';
+                    if (item.defaultProfile && item.defaultProfile !== 'full') {
+                        profileBadge = styles.muted(` [${PROFILE_INFO[item.defaultProfile].label}]`);
+                    }
+                    // Show tier badge
+                    let tierBadge = '';
+                    if (item.defaultModelTier) {
+                        tierBadge = styles.muted(` [${TIER_INFO[item.defaultModelTier].label}]`);
+                    }
+                    const inTeamBadge = item.alreadyInTeam ? styles.muted(' (in team)') : '';
+                    let line = `${prefix}${label}${profileBadge}${tierBadge}${inTeamBadge}`;
+                    if (line.length > maxWidth) {
+                        line = line.slice(0, maxWidth - 1) + '…';
+                    }
+                    if (item.alreadyInTeam) {
+                        return styles.muted(line);
+                    }
+                    return isSelected ? styles.primary(line) : line;
+                }
+            },
+            showCount: true,
+            emptyMessage: 'No agents in team.',
+            noResultsMessage: 'No agents match the search.',
+            footerHints: (searchMode, tabId) => {
+                if (searchMode) {
+                    return 'Type to search · Enter/Esc Exit search · Backspace Delete';
+                }
+                if (tabId === 'context') {
+                    return 'Enter: view details · c: compact (in detail) · Tab: tabs · q/Esc: close';
+                }
+                return 'Enter: view/add · d: remove (in detail) · Tab: tabs · q/Esc: close';
+            },
+        });
+    }
+    // ---------------------------------------------------------------------------
+    // Static Data Builders
+    // ---------------------------------------------------------------------------
+    static buildMemberItems(team) {
+        const agents = team.getAll();
+        // Get current provider for model resolution
+        const settings = getSettings();
+        const settingsProvider = settings.defaultProvider;
+        // Resolve 'auto' to 'claude' as default (same as CLI startup)
+        const provider = settingsProvider === 'auto' ? 'claude' : settingsProvider;
+        return agents.map((agent) => {
+            // Resolve model ID from tier
+            const tier = agent.modelTier ?? 'balanced';
+            const modelId = getModelForTier(provider, tier);
+            return {
+                id: agent.id,
+                displayName: agent.displayName,
+                mascot: agent.mascot,
+                role: agent.role,
+                description: agent.description,
+                isActive: agent.id === team.activeAgentId,
+                isCoordinator: agent.id === team.coordinatorId,
+                hasToolRestrictions: agent.toolFilter !== undefined && agent.toolFilter.length > 0,
+                toolProfile: agent.toolProfile,
+                enabledSkills: agent.enabledSkills,
+                modelTier: agent.modelTier,
+                modelId,
+                isMember: true,
+                isContext: false,
+            };
+        });
+    }
+    static buildRoleItems(team) {
+        const existingIds = new Set(team.getAgentIds());
+        const items = [];
+        for (const [role, metadata] of Object.entries(ROLE_METADATA)) {
+            if (role === 'default' || role === 'custom')
+                continue;
+            items.push({
+                role: role,
+                displayName: metadata.displayName,
+                mascot: metadata.mascot,
+                description: metadata.description,
+                alreadyInTeam: existingIds.has(role),
+                defaultProfile: metadata.defaultToolProfile,
+                defaultModelTier: metadata.defaultModelTier,
+                isCustomCreate: false,
+                isMember: false,
+                isContext: false,
+            });
+        }
+        // Add custom agent creation option at the bottom
+        items.push({
+            displayName: 'Create Custom Agent...',
+            mascot: '[+]',
+            description: 'Define your own specialized agent',
+            isCustomCreate: true,
+            isMember: false,
+            isContext: false,
+        });
+        return items;
+    }
+    static buildContextItems(team) {
+        const items = [];
+        const agents = team.getAll();
+        // Add per-agent context items
+        for (const teamAgent of agents) {
+            // Use getContextStats() which works for both initialized and restored agents
+            const stats = teamAgent.getContextStats();
+            const currentTokens = stats.estimatedTokens;
+            const messageCount = stats.messageCount;
+            const maxTokens = 200000; // Claude's context window
+            const utilization = Math.min(100, Math.round((currentTokens / maxTokens) * 100));
+            items.push({
+                id: teamAgent.id,
+                displayName: teamAgent.displayName,
+                mascot: teamAgent.mascot,
+                utilization,
+                currentTokens,
+                maxTokens,
+                messageCount,
+                lastActive: undefined, // Could track this in future
+                isSharedContext: false,
+                isMember: false,
+                isContext: true,
+            });
+        }
+        // Add shared context summary row
+        const sharedContext = team.sharedContext;
+        const tokenBudget = sharedContext.getTokenBudget();
+        items.push({
+            id: 'shared',
+            displayName: 'Shared Context',
+            mascot: '*',
+            utilization: sharedContext.getUtilization(),
+            currentTokens: tokenBudget.current,
+            maxTokens: tokenBudget.max,
+            messageCount: 0,
+            isSharedContext: true,
+            isMember: false,
+            isContext: true,
+        });
+        return items;
+    }
+    // ---------------------------------------------------------------------------
+    // Detail Screen Creation
+    // ---------------------------------------------------------------------------
+    createDetailScreen(item) {
+        if (item.isMember) {
+            // TeamMemberItem - show detail screen
+            return new AgentDetailScreen(item, this.getStyles());
+        }
+        else if (item.isContext) {
+            // ContextItem - show context detail screen
+            return new ContextDetailScreen(item, this.getStyles());
+        }
+        else if ('isCustomCreate' in item && item.isCustomCreate) {
+            // CustomCreateItem - handled specially, should not reach here
+            // (handleKey intercepts this case)
+            return null;
+        }
+        else {
+            // RoleItem - show add confirmation (TypeScript has narrowed the type)
+            if (item.alreadyInTeam) {
+                return null; // Already in team, do nothing
+            }
+            return new AddRoleScreen(item, this.getStyles());
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Key Handling Override
+    // ---------------------------------------------------------------------------
+    handleKey(key) {
+        const data = key.raw;
+        // Check if Enter is pressed on CustomCreateItem
+        if (isEnter(data) && this.state.filteredItems.length > 0) {
+            const currentItem = this.state.filteredItems[this.state.selectedIndex];
+            if ('isCustomCreate' in currentItem && currentItem.isCustomCreate) {
+                // Custom agent creation - close overlay and signal to show form
+                return this.close({ action: 'create-custom' });
+            }
+        }
+        // Also handle 'c' shortcut for custom creation in roles tab
+        // Only when on main list (not in a detail screen like AddRoleScreen)
+        const char = extractPrintable(data);
+        const currentTabId = TABS[this.state.currentTab]?.id;
+        if (char === 'c' && currentTabId === 'roles' && !this.state.searchMode && this.screenStack.size() === 1) {
+            return this.close({ action: 'create-custom' });
+        }
+        // Delegate to parent for all other keys
+        return super.handleKey(key);
+    }
+}