@compilr-dev/cli 0.4.0 → 0.5.0

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,218 @@
+/**
+ * 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, } 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.');
+        if (description.length > MAX_DESCRIPTION_LENGTH) {
+            description = description.slice(0, MAX_DESCRIPTION_LENGTH).trim() + '...';
+        }
+        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 = normalizedDesc.length > descWidth
+                    ? normalizedDesc.slice(0, descWidth - 1) + '...'
+                    : normalizedDesc;
+                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());
+    }
+}

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

@@ -0,0 +1,31 @@
+/**
+ * Tutorial Overlay V2
+ *
+ * Interactive tutorial using the new Overlay interface.
+ * Supports guided sequential tour and topic-based navigation.
+ */
+import { BaseOverlayV2 } from '../../base/index.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../index.js';
+export interface TutorialOverlayV2Result {
+    completed: boolean;
+}
+interface TutorialState {
+    topicListIndex: number;
+    currentTopicIndex: number;
+    currentPageIndex: number;
+    isGuidedMode: boolean;
+}
+/**
+ * Tutorial overlay using the new Overlay interface.
+ * Multi-screen overlay for interactive tutorial.
+ */
+export declare class TutorialOverlayV2 extends BaseOverlayV2<TutorialState, TutorialOverlayV2Result> {
+    readonly type: "inline";
+    readonly id = "tutorial-overlay-v2";
+    private readonly screenStack;
+    private topics;
+    constructor();
+    protected renderContent(context: RenderContext): string[];
+    handleKey(key: KeyEvent): OverlayAction<TutorialOverlayV2Result>;
+}
+export {};