@compilr-dev/cli 0.4.0 → 0.5.1

package/dist/ui/overlay/impl/terminals-overlay-v2.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Terminals Overlay V2 - View active terminal sessions
+ *
+ * Shows all CLI instances currently registered in the session registry.
+ * Provides list and detail views for multi-terminal awareness.
+ */
+import { BaseOverlayV2 } from '../../base/overlay-base-v2.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../index.js';
+interface TerminalsOverlayState {
+    selectedIndex: number;
+    screen: 'list' | 'detail';
+    detailSessionId: string | null;
+}
+export declare class TerminalsOverlayV2 extends BaseOverlayV2<TerminalsOverlayState> {
+    readonly type: "inline";
+    readonly id = "terminals-overlay";
+    constructor();
+    protected renderContent(context: RenderContext): string[];
+    private renderList;
+    private formatSessionLine;
+    private renderDetail;
+    handleKey(key: KeyEvent): OverlayAction<void>;
+    private handleListKey;
+    private handleDetailKey;
+}
+export {};

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

@@ -0,0 +1,217 @@
+/**
+ * Terminals Overlay V2 - View active terminal sessions
+ *
+ * Shows all CLI instances currently registered in the session registry.
+ * Provides list and detail views for multi-terminal awareness.
+ */
+import { BaseOverlayV2 } from '../../base/overlay-base-v2.js';
+import { getSessionRegistry, getActiveTerminalSessionId } from '../../../multi-agent/session-registry.js';
+import { getDb } from '../../../db/index.js';
+/**
+ * Format a relative time string from a SQLite CURRENT_TIMESTAMP datetime.
+ * SQLite stores UTC but without a 'Z' suffix, so we append it.
+ */
+function formatRelativeTime(sqliteDatetime) {
+    const now = Date.now();
+    const utcStr = sqliteDatetime.endsWith('Z') ? sqliteDatetime : sqliteDatetime + 'Z';
+    const then = new Date(utcStr).getTime();
+    const diffMs = now - then;
+    const diffSec = Math.floor(diffMs / 1000);
+    if (diffSec < 60)
+        return `${String(diffSec)}s ago`;
+    const diffMin = Math.floor(diffSec / 60);
+    if (diffMin < 60)
+        return `${String(diffMin)}m ago`;
+    const diffHr = Math.floor(diffMin / 60);
+    return `${String(diffHr)}h ${String(diffMin % 60)}m ago`;
+}
+/**
+ * Cache of project_id → display_name lookups.
+ * Refreshed each time the overlay renders.
+ */
+function getProjectName(projectId) {
+    if (projectId === null)
+        return null;
+    try {
+        const row = getDb().prepare('SELECT display_name FROM projects WHERE id = ?').get(projectId);
+        return row?.display_name ?? null;
+    }
+    catch {
+        return null;
+    }
+}
+export class TerminalsOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'terminals-overlay';
+    constructor() {
+        super({
+            selectedIndex: 0,
+            screen: 'list',
+            detailSessionId: null,
+        });
+    }
+    renderContent(context) {
+        this.minHeight = this.state.screen === 'detail' ? 18 : 12;
+        if (this.state.screen === 'detail') {
+            return this.renderDetail(context);
+        }
+        return this.renderList(context);
+    }
+    renderList(context) {
+        const s = context.styles;
+        const lines = [];
+        // Header
+        lines.push(...this.renderHeader('Active Terminals'));
+        const registry = getSessionRegistry();
+        const sessions = registry?.getActiveSessions() ?? [];
+        const currentId = getActiveTerminalSessionId();
+        // Ensure selected index is valid
+        if (this.state.selectedIndex >= sessions.length) {
+            this.state.selectedIndex = Math.max(0, sessions.length - 1);
+        }
+        if (sessions.length === 0) {
+            lines.push(s.muted('  No active terminal sessions.'));
+            lines.push('');
+        }
+        else {
+            for (let i = 0; i < sessions.length; i++) {
+                const session = sessions[i];
+                const isSelected = i === this.state.selectedIndex;
+                const line = this.formatSessionLine(session, currentId, s);
+                if (isSelected) {
+                    lines.push(s.selected(` ${s.primary('›')} ${line} `));
+                }
+                else {
+                    lines.push(`   ${line}`);
+                }
+            }
+            lines.push('');
+        }
+        // Footer
+        if (sessions.length > 0) {
+            lines.push(...this.renderFooter('↑↓ navigate · Enter view · Esc close'));
+        }
+        else {
+            lines.push(...this.renderFooter('Esc close'));
+        }
+        return lines;
+    }
+    formatSessionLine(session, currentId, s) {
+        const shortId = session.id.slice(0, 8);
+        const isSelf = session.id === currentId;
+        const selfTag = isSelf ? s.success(' (this)') : '';
+        const age = formatRelativeTime(session.last_heartbeat);
+        // Parse agent count
+        let agentCount = 0;
+        try {
+            const agents = JSON.parse(session.agents_json);
+            agentCount = agents.length;
+        }
+        catch {
+            // Ignore parse errors
+        }
+        const agentInfo = agentCount > 0
+            ? `${String(agentCount)} agents`
+            : session.active_agent;
+        const label = session.label ? s.muted(session.label) : '';
+        // Show project name (muted) if assigned
+        const projectName = getProjectName(session.project_id);
+        const projectTag = projectName ? s.muted(` [${projectName}]`) : '';
+        return `${s.secondary(shortId)}${selfTag}  pid:${String(session.pid)}  ${agentInfo}  ${label}${projectTag}  ${s.muted(age)}`;
+    }
+    renderDetail(context) {
+        const s = context.styles;
+        const lines = [];
+        const registry = getSessionRegistry();
+        const sessions = registry?.getActiveSessions() ?? [];
+        const session = sessions.find(sess => sess.id === this.state.detailSessionId);
+        const currentId = getActiveTerminalSessionId();
+        // Header
+        const shortId = this.state.detailSessionId?.slice(0, 8) ?? 'unknown';
+        lines.push(...this.renderHeader(`Terminal: ${shortId}`));
+        if (!session) {
+            lines.push(s.error('  Session not found (may have expired)'));
+            lines.push('');
+            lines.push(...this.renderFooter('Esc back'));
+            return lines;
+        }
+        const isSelf = session.id === currentId;
+        // Info section
+        const projectName = getProjectName(session.project_id);
+        lines.push(`  ${s.primaryBold('Session ID:')} ${session.id}${isSelf ? s.success(' (this terminal)') : ''}`);
+        lines.push(`  ${s.primaryBold('PID:')}        ${String(session.pid)}`);
+        lines.push(`  ${s.primaryBold('TTY:')}        ${session.tty_path ?? s.muted('unknown')}`);
+        lines.push(`  ${s.primaryBold('Label:')}      ${session.label ?? s.muted('none')}`);
+        lines.push(`  ${s.primaryBold('Project:')}    ${projectName ?? s.muted('none')}`);
+        lines.push(`  ${s.primaryBold('Active:')}     ${session.active_agent}`);
+        lines.push(`  ${s.primaryBold('Started:')}    ${formatRelativeTime(session.started_at)}`);
+        lines.push(`  ${s.primaryBold('Heartbeat:')}  ${formatRelativeTime(session.last_heartbeat)}`);
+        lines.push('');
+        lines.push(this.renderBorder());
+        // Agents section
+        let agents = [];
+        try {
+            agents = JSON.parse(session.agents_json);
+        }
+        catch {
+            // Ignore parse errors
+        }
+        if (agents.length > 0) {
+            lines.push(`  ${s.secondary('Agent Roster:')}`);
+            lines.push('');
+            for (const agent of agents) {
+                const isActive = agent.id === session.active_agent;
+                const activeMarker = isActive ? s.success(' ●') : '';
+                lines.push(`    ${agent.mascot} ${s.primaryBold(agent.displayName)} (${s.muted(agent.id)})${activeMarker}`);
+            }
+        }
+        else {
+            lines.push(`  ${s.muted('  No agents registered')}`);
+        }
+        lines.push('');
+        lines.push(...this.renderFooter('Esc back'));
+        return lines;
+    }
+    handleKey(key) {
+        if (this.isCloseKey(key)) {
+            if (this.state.screen === 'detail') {
+                this.state.screen = 'list';
+                this.state.detailSessionId = null;
+                return this.rerender();
+            }
+            return this.close(undefined);
+        }
+        if (this.state.screen === 'detail') {
+            return this.handleDetailKey(key);
+        }
+        return this.handleListKey(key);
+    }
+    handleListKey(key) {
+        const registry = getSessionRegistry();
+        const sessions = registry?.getActiveSessions() ?? [];
+        if (this.isUpKey(key)) {
+            if (this.state.selectedIndex > 0) {
+                this.state.selectedIndex--;
+            }
+            return this.rerender();
+        }
+        if (this.isDownKey(key)) {
+            if (this.state.selectedIndex < sessions.length - 1) {
+                this.state.selectedIndex++;
+            }
+            return this.rerender();
+        }
+        if (this.isEnterKey(key)) {
+            if (sessions.length > 0 && sessions[this.state.selectedIndex]) {
+                this.state.screen = 'detail';
+                this.state.detailSessionId = sessions[this.state.selectedIndex].id;
+            }
+            return this.rerender();
+        }
+        return this.noAction();
+    }
+    handleDetailKey(_key) {
+        // Detail screen only supports Esc (handled above)
+        return this.noAction();
+    }
+}

package/dist/ui/overlay/impl/theme-overlay-v2.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Theme Overlay V2
+ *
+ * Theme selection overlay using TabbedListOverlayV2 for the new Overlay interface.
+ * Works with TerminalUI's overlay management.
+ *
+ * Features:
+ * - Tabs: Curated (top picks), All, Dark, Light
+ * - Search mode with / toggle
+ * - Live preview with syntax highlighting
+ * - Persists selection to settings
+ */
+import { TabbedListOverlayV2 } from '../../base/index.js';
+import type { KeyEvent, OverlayAction } from '../index.js';
+import { type Theme } from '../../../themes/index.js';
+export interface ThemeOverlayOptions {
+    /** Current theme ID (for highlighting current selection) */
+    currentThemeId?: string;
+}
+export interface ThemeOverlayResult {
+    /** Selected theme ID (if changed) */
+    themeChanged?: string;
+    /** Selected theme name */
+    themeName?: string;
+}
+/**
+ * Theme overlay using the new Overlay interface.
+ * Displays available themes in a searchable, tabbed list with preview.
+ */
+export declare class ThemeOverlayV2 extends TabbedListOverlayV2<Theme, ThemeOverlayResult> {
+    readonly type: "inline";
+    readonly id = "theme-overlay-v2";
+    private readonly currentThemeId;
+    private readonly curatedIds;
+    constructor(options?: ThemeOverlayOptions);
+    handleKey(key: KeyEvent): OverlayAction<ThemeOverlayResult>;
+    private selectTheme;
+    /**
+     * Optional summary shown after overlay closes.
+     */
+    getCloseSummary(result: ThemeOverlayResult): string | null;
+}

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

@@ -0,0 +1,135 @@
+/**
+ * Theme Overlay V2
+ *
+ * Theme selection overlay using TabbedListOverlayV2 for the new Overlay interface.
+ * Works with TerminalUI's overlay management.
+ *
+ * Features:
+ * - Tabs: Curated (top picks), All, Dark, Light
+ * - Search mode with / toggle
+ * - Live preview with syntax highlighting
+ * - Persists selection to settings
+ */
+import chalk from 'chalk';
+import { TabbedListOverlayV2, } from '../../base/index.js';
+import { getCuratedThemes, getCurrentTheme, setCurrentTheme, getAllThemes, getThemeCount, clearStyleCache, } from '../../../themes/index.js';
+// =============================================================================
+// Constants
+// =============================================================================
+const PAGE_SIZE = 10;
+const TABS = [
+    { id: 'curated', label: 'Curated' },
+    { id: 'all', label: 'All' },
+    { id: 'dark', label: 'Dark' },
+    { id: 'light', label: 'Light' },
+];
+// =============================================================================
+// Helper Functions
+// =============================================================================
+function renderPreview(theme, styles) {
+    const lines = [];
+    const colors = theme.colors;
+    lines.push(styles.muted('  Preview:'));
+    // Use chalk for hex colors in preview
+    const primary = chalk.hex(colors.primary);
+    const secondary = chalk.hex(colors.secondary || colors.primary);
+    const muted = chalk.hex(colors.muted);
+    const fg = chalk.hex(colors.foreground);
+    lines.push('  ' + primary.bold('function') + ' ' + secondary('greet') + fg('() {'));
+    lines.push('    ' + muted('// Say hello'));
+    lines.push('    ' + fg('console.') + secondary('log') + fg('("Hello, ') + primary('World') + fg('!");'));
+    lines.push('  ' + fg('}'));
+    return lines;
+}
+// =============================================================================
+// Theme Overlay V2 Class
+// =============================================================================
+/**
+ * Theme overlay using the new Overlay interface.
+ * Displays available themes in a searchable, tabbed list with preview.
+ */
+export class ThemeOverlayV2 extends TabbedListOverlayV2 {
+    type = 'inline';
+    id = 'theme-overlay-v2';
+    currentThemeId;
+    curatedIds;
+    constructor(options = {}) {
+        const currentTheme = getCurrentTheme();
+        const currentThemeId = options.currentThemeId ?? currentTheme.id;
+        const curatedThemes = getCuratedThemes();
+        const curatedIds = new Set(curatedThemes.map(t => t.id));
+        const allThemes = getAllThemes();
+        const counts = getThemeCount();
+        super({
+            title: `Select Theme (${String(counts.total)})`,
+            tabs: TABS,
+            items: allThemes,
+            pageSize: PAGE_SIZE,
+            showCount: false, // We show count in title
+            filterByTab: (theme, tabId) => {
+                switch (tabId) {
+                    case 'curated':
+                        return curatedIds.has(theme.id);
+                    case 'dark':
+                        return theme.type === 'dark';
+                    case 'light':
+                        return theme.type === 'light';
+                    default:
+                        return true; // 'all'
+                }
+            },
+            getSearchText: (theme) => {
+                return `${theme.name} ${theme.id}`;
+            },
+            renderItem: (theme, isSelected, styles) => {
+                const isCurrent = theme.id === currentThemeId;
+                const prefix = isSelected ? styles.primary('> ') : '  ';
+                const icon = theme.type === 'dark' ? 'D' : 'L';
+                const checkmark = isCurrent ? styles.success(' *') : '';
+                // Pad the plain name first, then apply styling (ANSI codes break padEnd)
+                const paddedName = theme.name.padEnd(33);
+                const label = isSelected ? styles.primary(paddedName) : paddedName;
+                return `  ${prefix}${label}${icon}${checkmark}`;
+            },
+            renderSelectedPreview: (theme, styles) => {
+                return renderPreview(theme, styles);
+            },
+            footerHints: (searchMode) => {
+                if (searchMode) {
+                    return 'Type to filter · ↑↓/jk Navigate · Enter Select · Esc Exit search';
+                }
+                return 'Tab Filter · ↑↓/jk · ←→/hl Pages · / Search · Enter Select · q/Esc Close';
+            },
+            emptyMessage: 'No themes available.',
+            noResultsMessage: 'No themes match the search.',
+        });
+        this.currentThemeId = currentThemeId;
+        this.curatedIds = curatedIds;
+    }
+    handleKey(key) {
+        // Handle Enter/Space to select theme
+        if ((key.name === 'return' || key.name === 'space') && this.state.filteredItems.length > 0) {
+            const theme = this.state.filteredItems[this.state.selectedIndex];
+            return this.selectTheme(theme);
+        }
+        // Let parent handle other keys
+        return super.handleKey(key);
+    }
+    selectTheme(theme) {
+        setCurrentTheme(theme.id);
+        clearStyleCache();
+        return this.close({
+            themeChanged: theme.id,
+            themeName: theme.name,
+        });
+    }
+    /**
+     * Optional summary shown after overlay closes.
+     */
+    getCloseSummary(result) {
+        if (result.themeName) {
+            return `Theme changed to: ${result.themeName}`;
+        }
+        return null;
+    }
+}

package/dist/ui/overlay/impl/tools-overlay-v2.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Tools Overlay V2
+ *
+ * Displays available agent tools in a categorized, searchable list.
+ * Uses TabbedListOverlayV2 for the new Overlay interface.
+ *
+ * Features:
+ * - Tabs: All, Files, Code, Git, Project, Agent
+ * - Search with / toggle
+ * - Detail view for full tool information
+ * - Works with TerminalUI's overlay management
+ */
+import { TabbedListOverlayV2, BaseScreen } from '../../base/index.js';
+export interface ToolParameter {
+    name: string;
+    type: string;
+    description?: string;
+    required: boolean;
+}
+export interface ToolPermissionInfo {
+    level: 'once' | 'always' | 'session';
+    description: string;
+}
+export interface ToolInfo {
+    name: string;
+    description?: string;
+    parameters?: ToolParameter[];
+    permission?: ToolPermissionInfo;
+}
+export interface ToolsOverlayV2Options {
+    /** List of available tools */
+    tools: ToolInfo[];
+}
+export interface ToolsOverlayV2Result {
+    /** Whether the overlay was dismissed without action */
+    dismissed: boolean;
+}
+/**
+ * Tools overlay using the new Overlay interface.
+ * Displays available tools in a searchable, tabbed list.
+ */
+export declare class ToolsOverlayV2 extends TabbedListOverlayV2<ToolInfo, ToolsOverlayV2Result> {
+    readonly type: "inline";
+    readonly id = "tools-overlay-v2";
+    constructor(options: ToolsOverlayV2Options);
+    protected createDetailScreen(tool: ToolInfo): BaseScreen | null;
+}

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

@@ -0,0 +1,214 @@
+/**
+ * Tools Overlay V2
+ *
+ * Displays available agent tools in a categorized, searchable list.
+ * Uses TabbedListOverlayV2 for the new Overlay interface.
+ *
+ * Features:
+ * - Tabs: All, Files, Code, Git, Project, Agent
+ * - Search with / toggle
+ * - Detail view for full tool information
+ * - Works with TerminalUI's overlay management
+ */
+import * as terminal from '../../terminal.js';
+import { TabbedListOverlayV2, BaseScreen, stay, popScreen, closeOverlay, isEscape, isCtrlC, isClose, renderBorder, wrapText, truncate, } from '../../base/index.js';
+// =============================================================================
+// Tab Definitions & Tool Categories
+// =============================================================================
+const TOOL_TABS = [
+    { id: 'all', label: 'All' },
+    { id: 'files', label: 'Files' },
+    { id: 'code', label: 'Code' },
+    { id: 'git', label: 'Git' },
+    { id: 'project', label: 'Project' },
+    { id: 'agent', label: 'Agent' },
+];
+/**
+ * Tool category mappings.
+ * Uses exact names or prefix patterns (ending with *).
+ */
+const TOOL_CATEGORIES = {
+    all: null, // No filter - show all tools
+    files: ['read_file', 'write_file', 'edit', 'glob', 'readFile', 'writeFile'],
+    code: ['grep', 'bash', 'bashOutput', 'run_tests', 'run_lint', 'detect_project', 'find_project_root', 'detectProject', 'findProjectRoot'],
+    git: ['git_*', 'gitStatus', 'gitDiff', 'gitLog', 'gitCommit', 'gitBranch'],
+    project: ['project_*', 'workitem_*', 'document_*', 'anchor_*'],
+    agent: ['task', 'todo_write', 'todo_read', 'todoWrite', 'todoRead', 'suggest', 'ask_user', 'ask_user_simple', 'askUser', 'askUserSimple', 'webFetch'],
+};
+/**
+ * Check if a tool matches a category filter.
+ */
+function toolMatchesCategory(toolName, categoryId) {
+    const patterns = TOOL_CATEGORIES[categoryId];
+    if (patterns === null)
+        return true; // 'all' category
+    for (const pattern of patterns) {
+        if (pattern.endsWith('*')) {
+            // Prefix match
+            const prefix = pattern.slice(0, -1);
+            if (toolName.startsWith(prefix))
+                return true;
+        }
+        else {
+            // Exact match
+            if (toolName === pattern)
+                return true;
+        }
+    }
+    return false;
+}
+// =============================================================================
+// Constants
+// =============================================================================
+const PAGE_SIZE = 12;
+const NAME_WIDTH = 26;
+const MAX_DESCRIPTION_LENGTH = 300;
+const MAX_PARAMETERS_SHOWN = 5;
+/**
+ * Normalize text by replacing newlines with spaces (for single-line display)
+ */
+function normalizeText(text) {
+    return text.replace(/\n+/g, ' ').replace(/\s+/g, ' ').trim();
+}
+// =============================================================================
+// Detail Screen
+// =============================================================================
+/**
+ * Detail screen - shows full information for selected tool
+ */
+class ToolDetailScreen extends BaseScreen {
+    tool;
+    styles;
+    constructor(tool, styles) {
+        super();
+        this.tool = tool;
+        this.styles = styles;
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        // Header
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('Tool Details')}`);
+        lines.push('');
+        // Tool name
+        lines.push(`  ${s.muted('Name:')}  ${s.primaryBold(this.tool.name)}`);
+        lines.push('');
+        // Permission info
+        if (this.tool.permission) {
+            const levelColor = this.tool.permission.level === 'once' ? s.warning : s.muted;
+            lines.push(`  ${s.muted('Permission:')}  ${levelColor(this.tool.permission.level)} ${s.muted(`(${this.tool.permission.description})`)}`);
+        }
+        else {
+            lines.push(`  ${s.muted('Permission:')}  ${s.success('always')} ${s.muted('(no approval required)')}`);
+        }
+        lines.push('');
+        // Description (normalize newlines for proper wrapping)
+        lines.push(`  ${s.muted('Description:')}`);
+        let description = normalizeText(this.tool.description ?? 'No description available.');
+        description = truncate(description, MAX_DESCRIPTION_LENGTH);
+        const wrappedDesc = wrapText(description, cols - 6);
+        for (const line of wrappedDesc) {
+            lines.push(`    ${s.secondary(line)}`);
+        }
+        lines.push('');
+        // Parameters
+        if (this.tool.parameters && this.tool.parameters.length > 0) {
+            // Sort: required first, then optional
+            const sorted = [...this.tool.parameters].sort((a, b) => {
+                if (a.required && !b.required)
+                    return -1;
+                if (!a.required && b.required)
+                    return 1;
+                return 0;
+            });
+            const shown = sorted.slice(0, MAX_PARAMETERS_SHOWN);
+            const hidden = sorted.length - shown.length;
+            lines.push(`  ${s.muted('Parameters:')}`);
+            for (const param of shown) {
+                const requiredBadge = param.required ? s.warning('*') : ' ';
+                const typeStr = s.muted(`(${param.type})`);
+                lines.push(`    ${requiredBadge} ${s.secondary(param.name)} ${typeStr}`);
+            }
+            if (hidden > 0) {
+                lines.push(`    ${s.muted(`  + ${String(hidden)} more optional parameters`)}`);
+            }
+            lines.push('');
+            lines.push(`    ${s.muted('* = required')}`);
+        }
+        else {
+            lines.push(`  ${s.muted('Parameters:')}  ${s.muted('None')}`);
+        }
+        // Footer
+        lines.push(border);
+        lines.push(`  ${s.muted('q/Esc Back')}`);
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        // Ctrl+C closes overlay completely
+        if (isCtrlC(data)) {
+            return closeOverlay({ dismissed: true });
+        }
+        // Esc or q goes back to list
+        if (isEscape(data) || isClose(data)) {
+            return popScreen();
+        }
+        return stay(false);
+    }
+    /**
+     * Minimum height for stable rendering.
+     */
+    getMinHeight() {
+        return 20;
+    }
+}
+// =============================================================================
+// Tools Overlay V2 Class
+// =============================================================================
+/**
+ * Tools overlay using the new Overlay interface.
+ * Displays available tools in a searchable, tabbed list.
+ */
+export class ToolsOverlayV2 extends TabbedListOverlayV2 {
+    type = 'inline';
+    id = 'tools-overlay-v2';
+    constructor(options) {
+        // Sort tools alphabetically
+        const sortedTools = [...options.tools].sort((a, b) => a.name.localeCompare(b.name));
+        super({
+            title: 'Available Tools',
+            tabs: TOOL_TABS,
+            items: sortedTools,
+            pageSize: PAGE_SIZE,
+            filterByTab: (tool, tabId) => toolMatchesCategory(tool.name, tabId),
+            getSearchText: (tool) => `${tool.name} ${tool.description ?? ''}`,
+            renderItem: (tool, isSelected, styles) => {
+                const cols = terminal.getTerminalWidth();
+                const descWidth = Math.max(20, cols - NAME_WIDTH - 10);
+                const cursor = isSelected ? styles.primary('> ') : '  ';
+                const name = isSelected
+                    ? styles.primary(tool.name.padEnd(NAME_WIDTH))
+                    : styles.muted(tool.name.padEnd(NAME_WIDTH));
+                // Normalize and truncate description
+                const normalizedDesc = normalizeText(tool.description ?? '');
+                const desc = truncate(normalizedDesc, descWidth);
+                const descColor = isSelected ? styles.secondary(desc) : styles.muted(desc);
+                return `  ${cursor}${name}  ${descColor}`;
+            },
+            footerHints: (searchMode) => {
+                if (searchMode) {
+                    return 'Type to filter · ↑↓/jk Navigate · Enter Details · Esc Exit search';
+                }
+                return 'Tab Filter · ↑↓/jk · ←→/hl Pages · / Search · Enter Details · q/Esc Close';
+            },
+            emptyMessage: 'No tools available.',
+            noResultsMessage: 'No tools match the current filter.',
+        });
+    }
+    createDetailScreen(tool) {
+        return new ToolDetailScreen(tool, this.getStyles());
+    }
+}