@compilr-dev/cli 0.5.0 → 0.5.2

package/dist/ui/footer-renderer.js

@@ -0,0 +1,431 @@
+/**
+ * Footer renderer.
+ *
+ * Extracted from TerminalUI — owns render state (line height tracking,
+ * spinner animation) and the render pipeline (clear, render, line builders).
+ * Reads application state through the host's getRenderData() snapshot.
+ */
+import * as terminal from './terminal.js';
+import { getPhysicalLineCount, getVisibleLength } from './line-utils.js';
+import { getStyles } from '../themes/index.js';
+import { formatTokens } from './base/index.js';
+import { formatInputText } from './terminal-autocomplete-utils.js';
+import { buildTodoLine, formatDuration } from './terminal-line-builders.js';
+import { getDefaultShellManager } from '@compilr-dev/sdk';
+import { MASCOT } from './terminal-types.js';
+import { MODE_INFO } from './types.js';
+import { getPendingRequestsManager } from '../multi-agent/index.js';
+import { getSessionRegistry } from '../multi-agent/session-registry.js';
+import { getNotificationManager } from '../multi-agent/notification-manager.js';
+export class FooterRenderer {
+    lastRenderHeight = 0;
+    cursorLineFromBottom = 0;
+    spinnerFrame = 0;
+    spinnerTimer = null;
+    spinnerFrames = MASCOT.crt;
+    host;
+    constructor(host) {
+        this.host = host;
+    }
+    // ===========================================================================
+    // Clear / Render
+    // ===========================================================================
+    clear() {
+        if (this.lastRenderHeight === 0) {
+            return;
+        }
+        terminal.moveCursorToLineStart();
+        // Move cursor to TOP of footer
+        // cursorRowFromTop = which row the cursor is on (1-indexed from top of footer)
+        const cursorRowFromTop = this.lastRenderHeight - this.cursorLineFromBottom;
+        const rowsToMoveUp = cursorRowFromTop - 1;
+        if (rowsToMoveUp > 0) {
+            terminal.moveCursorUp(rowsToMoveUp);
+        }
+        terminal.clearToEndOfScreen();
+        this.lastRenderHeight = 0;
+        this.cursorLineFromBottom = 0;
+    }
+    render() {
+        if (!this.host.isFooterRenderAllowed()) {
+            return;
+        }
+        const data = this.host.getRenderData();
+        const termWidth = terminal.getTerminalWidth();
+        const s = getStyles();
+        // Build all lines in order
+        const lines = [];
+        // 0. LiveRegion (if has items) - rendered at top of footer
+        if (data.liveRegion.hasItems()) {
+            const liveLines = data.liveRegion.render({
+                width: termWidth,
+                verbose: data.liveVerbose,
+                showTokens: true,
+            });
+            for (const line of liveLines) {
+                lines.push({
+                    content: line,
+                    physicalLines: getPhysicalLineCount(line, termWidth),
+                });
+            }
+            // Blank line after live region for spacing
+            if (liveLines.length > 0) {
+                lines.push({ content: '', physicalLines: 1 });
+            }
+        }
+        // 1. Header: Spinner (when running) or "Todos" (when idle with todos)
+        if (data.agentRunning) {
+            const spinnerLine = this.buildSpinnerLine(data);
+            lines.push({
+                content: spinnerLine,
+                physicalLines: getPhysicalLineCount(spinnerLine, termWidth),
+            });
+        }
+        else if (data.todos.length > 0) {
+            const headerLine = s.muted('Todos');
+            lines.push({
+                content: headerLine,
+                physicalLines: 1,
+            });
+        }
+        // 2. Todo list (show if there are todos AND showTodos is true)
+        //    Sort: in_progress → pending → completed (completed sink to bottom)
+        //    Stable sort preserves original order within each status group.
+        if (data.todos.length > 0 && data.showTodos) {
+            const indexed = data.todos.map((todo, i) => ({ todo, taskNumber: i + 1 }));
+            const statusOrder = { in_progress: 0, pending: 1, completed: 2 };
+            const sorted = [...indexed].sort((a, b) => (statusOrder[a.todo.status] ?? 1) - (statusOrder[b.todo.status] ?? 1));
+            for (const { todo, taskNumber } of sorted) {
+                const todoLine = buildTodoLine(todo, taskNumber);
+                lines.push({
+                    content: todoLine,
+                    physicalLines: getPhysicalLineCount(todoLine, termWidth),
+                });
+            }
+            // Blank line after todos for spacing
+            lines.push({ content: '', physicalLines: 1 });
+        }
+        // 3. Queued inputs (show multiline as single line with ↵ indicator)
+        for (const queued of data.queuedInputs) {
+            const displayText = queued.replace(/\n/g, ' ↵ ');
+            const queuedLine = s.muted(`queued: "${displayText}"`);
+            lines.push({
+                content: queuedLine,
+                physicalLines: getPhysicalLineCount(queuedLine, termWidth),
+            });
+        }
+        // 4. Top separator
+        const separator = '─'.repeat(termWidth);
+        lines.push({ content: separator, physicalLines: 1 });
+        // 5. Input prompt (multiline support)
+        const continuationPrompt = s.muted('   \\ ');
+        const continuationPromptLen = getVisibleLength(continuationPrompt);
+        const cursorLineIndex = lines.length + data.currentLine; // Index where cursor is
+        for (let i = 0; i < data.lines.length; i++) {
+            const linePrompt = i === 0 ? data.promptPrefix : continuationPrompt;
+            const linePromptLen = i === 0 ? data.promptPrefixLen : continuationPromptLen;
+            const lineContent = data.lines[i];
+            // Show ghost text on first line when input is empty and no autocomplete
+            let fullLine;
+            let totalLen;
+            if (i === 0 &&
+                lineContent === '' &&
+                data.lines.length === 1 &&
+                data.suggestion &&
+                !data.ac.isActive()) {
+                // Build: [prompt][suggestion]...[↵ send]
+                const rightHint = '↵ send';
+                const leftContent = linePrompt + s.muted(data.suggestion);
+                const leftLen = linePromptLen + data.suggestion.length;
+                const rightLen = rightHint.length;
+                const padding = Math.max(1, termWidth - leftLen - rightLen);
+                fullLine = leftContent + ' '.repeat(padding) + s.muted(rightHint);
+                totalLen = termWidth; // Full width
+            }
+            else {
+                // Format special prefixes: $agent, @path, /command
+                const formattedContent = formatInputText(lineContent);
+                fullLine = linePrompt + formattedContent;
+                totalLen = linePromptLen + getVisibleLength(lineContent);
+            }
+            const physicalLines = totalLen === 0 ? 1 : Math.ceil(totalLen / termWidth) || 1;
+            lines.push({
+                content: fullLine,
+                physicalLines,
+            });
+        }
+        // 6. Bottom separator
+        lines.push({ content: separator, physicalLines: 1 });
+        // 7. Mode indicator
+        const modeLine = this.buildModeLine(data, termWidth);
+        lines.push({
+            content: modeLine,
+            physicalLines: getPhysicalLineCount(modeLine, termWidth),
+        });
+        // 7b. Status bar indicators (single horizontal line)
+        const statusItems = data.statusBar.getItems();
+        if (statusItems.length > 0) {
+            const pendingCount = getPendingRequestsManager().getCount();
+            const terminalCount = getSessionRegistry()?.getProjectScopedSessionCount() ?? 0;
+            const notifCount = getNotificationManager()?.getUnreadCount() ?? 0;
+            const segments = [];
+            for (let idx = 0; idx < statusItems.length; idx++) {
+                const item = statusItems[idx];
+                const isSelected = data.statusBar.navActive && data.statusBar.selectedIndex === idx;
+                let label;
+                if (item.id === 'notifications') {
+                    label = `[!] ${String(notifCount)} notif`;
+                }
+                else if (item.id === 'pending') {
+                    label = `pending: ${String(pendingCount)}`;
+                }
+                else if (item.id === 'terminals') {
+                    label = `terminals: ${String(terminalCount)}`;
+                }
+                else if (item.id === 'mcp') {
+                    label = 'mcp: connecting...';
+                }
+                else {
+                    label = `bg: ${String(data.statusBar.backgroundAgentCount)}`;
+                }
+                if (isSelected) {
+                    segments.push(s.inverse(` ${label} `));
+                }
+                else if (data.statusBar.navActive) {
+                    segments.push(s.muted(label));
+                }
+                else {
+                    segments.push(s.warning(label));
+                }
+            }
+            let statusLine = segments.join('  ');
+            if (data.statusBar.navActive) {
+                statusLine += '  ' + s.muted('[Enter]');
+            }
+            else {
+                statusLine += '  ' + s.muted('[↓]');
+            }
+            lines.push({
+                content: statusLine,
+                physicalLines: getPhysicalLineCount(statusLine, termWidth),
+            });
+        }
+        // 8. Autocomplete dropdown (if active) - agent > file > command priority
+        const agentAutocompleteLines = data.ac.buildAgentLines(termWidth);
+        const fileAutocompleteLines = data.ac.buildFileLines(termWidth);
+        const autocompleteLines = agentAutocompleteLines.length > 0
+            ? agentAutocompleteLines
+            : fileAutocompleteLines.length > 0
+                ? fileAutocompleteLines
+                : data.ac.buildCommandLines(termWidth);
+        for (const line of autocompleteLines) {
+            lines.push({
+                content: line,
+                physicalLines: getPhysicalLineCount(line, termWidth),
+            });
+        }
+        // Calculate total physical height
+        let totalPhysicalLines = 0;
+        for (const line of lines) {
+            totalPhysicalLines += line.physicalLines;
+        }
+        // Clear existing footer
+        this.clear();
+        // Write all lines
+        for (let i = 0; i < lines.length; i++) {
+            terminal.write(lines[i].content);
+            if (i < lines.length - 1) {
+                terminal.write('\n');
+            }
+        }
+        // Calculate cursor position (for multiline, position on the line where cursor is)
+        let rowsAfterCursor = 0;
+        for (let i = cursorLineIndex + 1; i < lines.length; i++) {
+            rowsAfterCursor += lines[i].physicalLines;
+        }
+        if (rowsAfterCursor > 0) {
+            terminal.moveCursorUp(rowsAfterCursor);
+        }
+        // Calculate column within current line
+        const currentLinePromptLen = data.currentLine === 0 ? data.promptPrefixLen : continuationPromptLen;
+        const totalPos = currentLinePromptLen + data.cursorPos;
+        const cursorCol = (totalPos % termWidth) + 1;
+        terminal.moveCursorToColumn(cursorCol);
+        terminal.showCursor();
+        this.lastRenderHeight = totalPhysicalLines;
+        this.cursorLineFromBottom = rowsAfterCursor;
+    }
+    // ===========================================================================
+    // Render state reset
+    // ===========================================================================
+    resetRenderState() {
+        this.lastRenderHeight = 0;
+        this.cursorLineFromBottom = 0;
+    }
+    // ===========================================================================
+    // Spinner animation
+    // ===========================================================================
+    startSpinnerAnimation(onTick) {
+        if (this.spinnerTimer)
+            return;
+        this.spinnerTimer = setInterval(() => {
+            this.spinnerFrame++;
+            onTick();
+        }, 200); // Slower, more relaxed animation
+    }
+    stopSpinnerAnimation() {
+        if (this.spinnerTimer) {
+            clearInterval(this.spinnerTimer);
+            this.spinnerTimer = null;
+        }
+        this.spinnerFrame = 0;
+    }
+    // ===========================================================================
+    // Line builders (private)
+    // ===========================================================================
+    buildSpinnerLine(data) {
+        const s = getStyles();
+        const frame = this.spinnerFrames[this.spinnerFrame % this.spinnerFrames.length];
+        const text = data.currentTool ?? data.spinnerText ?? 'Thinking...';
+        // Build hints (Claude Code style: ctrl+c to interrupt · time · tokens · thinking)
+        const hints = ['esc to interrupt'];
+        // Show "ctrl+b to background" hint if bash running for more than 3 seconds
+        if (data.activeBashInfo && (Date.now() - data.activeBashInfo.startTime) > 3000) {
+            hints.push('ctrl+b to background');
+        }
+        // Add elapsed time
+        if (data.turnMetrics.startTime > 0) {
+            const elapsedMs = Date.now() - data.turnMetrics.startTime;
+            hints.push(formatDuration(elapsedMs));
+        }
+        // Add token counts (↓ input ↑ output) with thinking/cache tokens and API call count
+        if (data.turnMetrics.inputTokens > 0 || data.turnMetrics.outputTokens > 0) {
+            const inputStr = formatTokens(data.turnMetrics.inputTokens);
+            const outputStr = formatTokens(data.turnMetrics.outputTokens);
+            let tokenDisplay = `↓ ${inputStr} ↑ ${outputStr}`;
+            // Build parenthetical for thinking/cache tokens
+            const extras = [];
+            if (data.turnMetrics.thinkingTokens > 0) {
+                extras.push(`think: ${formatTokens(data.turnMetrics.thinkingTokens)}`);
+            }
+            if (data.turnMetrics.cacheReadTokens > 0) {
+                extras.push(`cache: ${formatTokens(data.turnMetrics.cacheReadTokens)}`);
+            }
+            if (extras.length > 0) {
+                tokenDisplay += ` (${extras.join(', ')})`;
+            }
+            // Add API call count if multiple calls
+            if (data.turnMetrics.apiCalls > 1) {
+                tokenDisplay += ` (${String(data.turnMetrics.apiCalls)} calls)`;
+            }
+            hints.push(tokenDisplay);
+        }
+        // Add "thinking" indicator when extended thinking is active
+        if (data.turnMetrics.isThinking) {
+            hints.push('thinking');
+        }
+        // Add background task count
+        const bgTaskCount = getDefaultShellManager().listRunning().length;
+        if (bgTaskCount > 0) {
+            hints.push(`bg: ${String(bgTaskCount)}`);
+        }
+        if (data.todos.length > 0 && data.showTodos) {
+            hints.push('ctrl+t to hide todos');
+        }
+        else if (data.todos.length > 0 && !data.showTodos) {
+            hints.push('ctrl+t to show todos');
+        }
+        const hintsText = hints.length > 0 ? ` (${hints.join(' · ')})` : '';
+        // Format: [CRT scanner] text (hints)
+        return s.muted(`${frame} ${text}${hintsText}`);
+    }
+    buildModeLine(data, termWidth) {
+        const s = getStyles();
+        const modeInfo = MODE_INFO[data.mode];
+        // Build mode part (left)
+        let modePart;
+        let modePartLen;
+        switch (data.mode) {
+            case 'normal':
+                modePart = s.muted(`mode: ${modeInfo.label}`);
+                modePartLen = `mode: ${modeInfo.label}`.length;
+                break;
+            case 'auto-accept':
+                modePart = s.warning(`mode: ${modeInfo.label}`);
+                modePartLen = `mode: ${modeInfo.label}`.length;
+                break;
+            case 'plan':
+                if (data.activePlanName) {
+                    modePart = s.info(`mode: ${modeInfo.label}`) + s.secondary(` [${data.activePlanName}]`);
+                    modePartLen = `mode: ${modeInfo.label} [${data.activePlanName}]`.length;
+                }
+                else {
+                    modePart = s.info(`mode: ${modeInfo.label}`);
+                    modePartLen = `mode: ${modeInfo.label}`.length;
+                }
+                break;
+            default:
+                modePart = s.muted(`mode: ${modeInfo.label}`);
+                modePartLen = `mode: ${modeInfo.label}`.length;
+        }
+        // Add background task count indicator after mode (if any running)
+        const bgCount = getDefaultShellManager().listRunning().length;
+        if (bgCount > 0) {
+            modePart += ' ' + s.info(`[bg: ${String(bgCount)}]`);
+            modePartLen += 1 + `[bg: ${String(bgCount)}]`.length;
+        }
+        // Add conversation filter indicator (if active)
+        if (data.conversationFilterActive) {
+            const filterText = '[/f: on]';
+            modePart += ' ' + s.secondary(filterText);
+            modePartLen += 1 + filterText.length;
+        }
+        // Add restored history hint (if available, only when not running)
+        if (!data.agentRunning && data.hasRestoredHistory) {
+            const histHint = '[ctrl+r: history]';
+            modePart += ' ' + s.muted(histHint);
+            modePartLen += 1 + histHint.length;
+        }
+        // Build agent part (center) - only if not default
+        let agentPart = '';
+        let agentPartLen = 0;
+        if (data.activeTeamAgent && data.activeTeamAgent.id !== 'default') {
+            const agent = data.activeTeamAgent;
+            agentPart = s.secondary(`${agent.mascot} $${agent.id}`) + s.muted(` (${agent.displayName})`);
+            agentPartLen = `${agent.mascot} $${agent.id} (${agent.displayName})`.length;
+        }
+        // Build project part (right)
+        let projectPart = '';
+        let projectPartLen = 0;
+        if (data.projectName) {
+            const projectText = `Project: ${data.projectName}`;
+            projectPart = s.muted(projectText);
+            projectPartLen = projectText.length;
+        }
+        // Calculate layout
+        const totalContentLen = modePartLen + agentPartLen + projectPartLen;
+        const availableSpace = termWidth - totalContentLen;
+        if (availableSpace < 4) {
+            // Not enough space - just put mode on left, project on right, skip agent
+            if (!data.projectName) {
+                return modePart;
+            }
+            const padding = Math.max(2, termWidth - modePartLen - projectPartLen);
+            return modePart + ' '.repeat(padding) + projectPart;
+        }
+        // Distribute space: split between left-center and center-right gaps
+        if (agentPartLen > 0) {
+            const leftGap = Math.floor(availableSpace / 2);
+            const rightGap = availableSpace - leftGap;
+            return modePart + ' '.repeat(Math.max(2, leftGap)) + agentPart + ' '.repeat(Math.max(2, rightGap)) + projectPart;
+        }
+        else {
+            // No agent, just mode and project
+            if (!data.projectName) {
+                return modePart;
+            }
+            const padding = Math.max(2, termWidth - modePartLen - projectPartLen);
+            return modePart + ' '.repeat(padding) + projectPart;
+        }
+    }
+}

package/dist/ui/footer.d.ts

@@ -1,16 +1,20 @@
 /**
+ * @deprecated DEAD CODE — This class is never instantiated. Do NOT modify this file.
+ *
+ * The active footer/render pipeline is in TerminalUI (src/ui/terminal-ui.ts).
+ * TerminalUI has its own inline render loop with numbered sections (1-8),
+ * status bar items, mode indicator, etc. All footer changes should go there.
+ *
+ * This file is kept only because it is type-imported by terminal-renderer.ts
+ * and memory-handler.ts. It can be safely deleted once those imports are removed.
+ *
+ * --- Original description ---
  * Footer Orchestrator
  *
  * Manages all persistent UI elements below the scrolling zone:
  * - TodoZone (spinner + todo list)
  * - Queued input display
  * - InputPrompt
- *
- * Handles:
- * - Coordinated rendering via single render loop
- * - Event forwarding from InputPrompt
- * - Clearing for scrolling output
- * - State management for agent running/idle modes
  */
 import { EventEmitter } from 'events';
 import type { TodoItem, AgentMode } from './types.js';
@@ -40,6 +44,7 @@ export declare class Footer extends EventEmitter {
     private cursorLineFromBottom;
     private projectName;
     private externalRendererEnabled;
+    private activeTeamAgent;
     private readonly renderInterval;
     private renderTimer;
     private needsRender;
@@ -77,6 +82,31 @@ export declare class Footer extends EventEmitter {
      * Get the current project name
      */
     getProjectName(): string | null;
+    /**
+     * Set the active team agent (displayed in footer)
+     * Pass null to clear (default agent or no team)
+     */
+    setActiveTeamAgent(agent: {
+        id: string;
+        displayName: string;
+        mascot: string;
+    } | null): void;
+    /**
+     * Set the callback to get available team agents for $ autocomplete
+     */
+    setAgentSuggestionsCallback(callback: (() => {
+        id: string;
+        displayName: string;
+        mascot: string;
+    }[]) | undefined): void;
+    /**
+     * Get the active team agent
+     */
+    getActiveTeamAgent(): {
+        id: string;
+        displayName: string;
+        mascot: string;
+    } | null;
     /**
      * Update the todo list
      */
@@ -95,9 +125,26 @@ export declare class Footer extends EventEmitter {
      */
     setSpinnerText(text: string | null): void;
     /**
-     * Add tokens to the spinner counter
+     * Add tokens to the spinner counter (legacy)
      */
     addTokens(count: number): void;
+    /**
+     * Add input/output tokens separately (new API for live display)
+     */
+    addTokensDetailed(inputTokens: number, outputTokens: number): void;
+    /**
+     * Get current token counts
+     */
+    getTokenCounts(): {
+        input: number;
+        output: number;
+        total: number;
+    };
+    /**
+     * Set whether extended thinking mode is active
+     * Shows "thinking" indicator in status line
+     */
+    setThinking(thinking: boolean): void;
     /**
      * Called when a subagent starts
      */
@@ -248,6 +295,26 @@ export declare class Footer extends EventEmitter {
      * Render mode indicator line
      */
     private renderModeIndicator;
+    /**
+     * Render agent indicator line (only when team agent is active and not default)
+     * Returns empty string if no team agent or default agent.
+     * Format: "[◈_◈] $arch (Solution Architect)  /team to switch"
+     */
+    private renderAgentIndicator;
+    /**
+     * Render pending requests indicator (Phase 3b: Background Agents)
+     * Shows count of pending requests from background agents if any.
+     * Format: "⚠ 2 pending requests [/pending to view]"
+     * Returns empty string if no pending requests.
+     */
+    private renderPendingRequestsIndicator;
+    /**
+     * Render terminal count indicator (multi-terminal awareness).
+     * Shows count of active terminal sessions if more than 1.
+     * Format: "+ 2 terminals [/terminals]"
+     * Returns empty string if only this terminal is active.
+     */
+    private renderTerminalCountIndicator;
     /**
      * Calculate how many terminal rows a line takes (accounting for wrapping)
      * Uses unified line-utils for consistent calculation across all components.