@agentdeck/bridge 0.1.0 → 0.2.0

package/dist/tui/renderer.js

@@ -0,0 +1,758 @@
+/**
+ * TUI Dashboard renderer — layout calculation + panel rendering.
+ *
+ * Width invariant: every output line is exactly `cols` characters wide (visually).
+ * Box structure:
+ *   Wide:     ┌─leftW─┬─rightW─┐  where leftW + rightW + 3 = cols
+ *   Std/Nar:  ┌──w────┐         where w + 2 = cols
+ *   Split:    │ lh │ rh │       where lh + rh + 3 = cols
+ */
+import { cursor, screen as screenCodes, RESET, colors, box, hLine, sgr, stateColor, stateIcon, truncText, padRight, visLen, terminalCaps, centerText, fg, } from './ansi.js';
+import { blockGauge, resetTimeStr, formatTokens } from './gauge.js';
+import { sortSessions, assignDisplayNames } from '@agentdeck/shared';
+// ===== Layout Breakpoints =====
+export function getLayout(cols, rows) {
+    if (cols >= 120)
+        return 'wide';
+    if (cols >= 80)
+        return 'standard';
+    return 'narrow';
+}
+export function shouldShowTerrarium(cols, rows) {
+    if (cols < 60)
+        return false;
+    if (rows < 16)
+        return false;
+    return true;
+}
+// ===== Border Line Builder =====
+function borderFill(prefix, suffix, targetWidth) {
+    const fillLen = Math.max(0, targetWidth - visLen(prefix) - visLen(suffix));
+    return prefix + `${colors.border}${hLine(fillLen)}${RESET}` + suffix;
+}
+// ===== Pixel Font (4 wide × 6 tall → 4×3 half-block) =====
+const FONT = {
+    A: ['.##.', '#..#', '####', '#..#', '#..#', '....'],
+    G: ['.###', '#...', '#.##', '#..#', '.##.', '....'],
+    E: ['####', '#...', '###.', '#...', '####', '....'],
+    N: ['#..#', '##.#', '#.##', '#..#', '#..#', '....'],
+    T: ['####', '.##.', '.##.', '.##.', '.##.', '....'],
+    D: ['###.', '#..#', '#..#', '#..#', '###.', '....'],
+    C: ['.###', '#...', '#...', '#...', '.###', '....'],
+    K: ['#..#', '#.#.', '##..', '#.#.', '#..#', '....'],
+};
+/** Render a word in half-block pixel font. Returns 3 terminal lines. */
+function renderPixelFont(word) {
+    const result = ['', '', ''];
+    for (let li = 0; li < word.length; li++) {
+        if (li > 0) {
+            result[0] += ' ';
+            result[1] += ' ';
+            result[2] += ' ';
+        }
+        const pixels = FONT[word[li]];
+        if (!pixels)
+            continue;
+        for (let hr = 0; hr < 3; hr++) {
+            const topRow = pixels[hr * 2];
+            const botRow = pixels[hr * 2 + 1];
+            for (let col = 0; col < 4; col++) {
+                const top = topRow[col] === '#';
+                const bot = botRow[col] === '#';
+                if (top && bot)
+                    result[hr] += '\u2588'; // █
+                else if (top)
+                    result[hr] += '\u2580'; // ▀
+                else if (bot)
+                    result[hr] += '\u2584'; // ▄
+                else
+                    result[hr] += ' ';
+            }
+        }
+    }
+    return result;
+}
+// Pre-render logo lines — "AGENT" + "DECK" stacked, sky blue
+const LOGO_AGENT = renderPixelFont('AGENT'); // 3 lines, 24 chars wide
+const LOGO_DECK = renderPixelFont('DECK'); // 3 lines, 19 chars wide
+// ===== Timeline Icons =====
+function typeIcon(type) {
+    if (!terminalCaps.unicode) {
+        switch (type) {
+            case 'chat_start': return '>';
+            case 'chat_end': return '=';
+            case 'chat_response': return ':';
+            case 'tool_request':
+            case 'tool_exec': return '*';
+            case 'tool_resolved': return '+';
+            case 'error': return 'x';
+            case 'model_call':
+            case 'model_response': return 'm';
+            case 'memory_recall': return 'r';
+            case 'scheduled': return 's';
+            case 'user_action': return 'u';
+            case 'eval_result': return '#';
+            default: return '*';
+        }
+    }
+    switch (type) {
+        case 'chat_start':
+        case 'user_action': return '\u25B6';
+        case 'chat_end': return '\u25A0';
+        case 'chat_response': return '\u25A1';
+        case 'tool_request':
+        case 'tool_exec': return '\u25C6';
+        case 'tool_resolved': return '\u2713';
+        case 'error': return '\u2717';
+        case 'model_call':
+        case 'model_response': return '\u25C8';
+        case 'memory_recall': return '\u25CC';
+        case 'scheduled': return '\u25D1';
+        case 'eval_result': return '\u2605'; // ★
+        default: return '\u25C6';
+    }
+}
+function typeColor(type) {
+    switch (type) {
+        case 'chat_start':
+        case 'user_action': return colors.chat;
+        case 'chat_end':
+        case 'chat_response': return colors.end;
+        case 'tool_request':
+        case 'tool_exec':
+        case 'tool_resolved': return colors.tool;
+        case 'error': return colors.errorTl;
+        case 'model_call':
+        case 'model_response': return sgr(35);
+        case 'memory_recall': return sgr(33);
+        case 'eval_result': return sgr(33); // yellow/amber
+        default: return colors.dim;
+    }
+}
+const SPINNER_FRAMES = ['\u280B', '\u2819', '\u2839', '\u2838', '\u283C', '\u2834', '\u2826', '\u2827', '\u2807', '\u280F'];
+export function spinner(frame) {
+    return SPINNER_FRAMES[Math.floor(frame / 2) % SPINNER_FRAMES.length];
+}
+// ===== Creature Icon Helper =====
+function creatureEmoji(agentType) {
+    if (!terminalCaps.emoji) {
+        if (agentType === 'daemon')
+            return 'D';
+        if (agentType === 'openclaw')
+            return 'C';
+        if (agentType === 'codex-cli')
+            return 'X';
+        if (agentType === 'opencode')
+            return 'O';
+        return '*';
+    }
+    if (agentType === 'daemon')
+        return '\u2699\uFE0F'; // ⚙️
+    if (agentType === 'openclaw')
+        return '\uD83E\uDD9E'; // 🦞
+    if (agentType === 'codex-cli')
+        return '\u2601'; // ☁ (cloud — matches creature)
+    if (agentType === 'opencode')
+        return '\u25A3'; // ▣ (nested square — matches creature)
+    return '\u273B'; // ✻ (teardrop-spoked asterisk — Claude sparkle)
+}
+function creatureBrandColor(agentType) {
+    if (!terminalCaps.trueColor)
+        return '';
+    switch (agentType) {
+        case 'claude-code': return fg(192, 112, 88); // terracotta
+        case 'openclaw': return fg(255, 77, 77); // red
+        case 'codex-cli': return fg(177, 167, 255); // indigo
+        case 'opencode': return fg(241, 236, 236); // warm gray (#F1ECEC)
+        default: return '';
+    }
+}
+function compactStateLabel(state) {
+    switch (state) {
+        case 'processing': return 'PROC';
+        case 'awaiting_permission': return 'PERM';
+        case 'awaiting_option': return 'OPT';
+        case 'awaiting_diff': return 'DIFF';
+        case 'disconnected': return 'DISC';
+        case 'idle':
+        default:
+            return 'IDLE';
+    }
+}
+function currentSessionSummary(state, width) {
+    const parts = [];
+    if (state.projectName)
+        parts.push(state.projectName);
+    if (state.modelName)
+        parts.push(state.modelName);
+    if (state.state)
+        parts.push(compactStateLabel(state.state));
+    if (parts.length === 0)
+        return 'No session';
+    return truncText(parts.join(' · '), width);
+}
+// stateRank, sortSessions imported from @agentdeck/shared
+function sessionHotkeyLabel(index) {
+    if (index === null || index > 8)
+        return '·';
+    return String(index + 1);
+}
+function sessionHotkeyIndex(session, nextIndex) {
+    if (!session.port || session.controlMode === 'observed')
+        return null;
+    return nextIndex;
+}
+function observedDetailParts(session) {
+    if (!session)
+        return [];
+    const parts = [];
+    if (session.controlMode === 'observed')
+        parts.push('observed');
+    if (typeof session.contextPercent === 'number')
+        parts.push(`${Math.round(session.contextPercent)}% ctx`);
+    if (session.currentTask)
+        parts.push(session.currentTask);
+    return parts;
+}
+// ===== Panel Renderers =====
+function renderAgentLines(state, maxWidth, useLogo) {
+    const lines = [];
+    // Big pixel-font logo (AGENT + DECK stacked, sky blue)
+    const logoColor = terminalCaps.trueColor ? fg(100, 180, 255) : colors.header; // sky blue
+    if (useLogo && maxWidth >= 24) {
+        for (const l of LOGO_AGENT)
+            lines.push(`${logoColor}${l}${RESET}`);
+        for (const l of LOGO_DECK)
+            lines.push(`${logoColor} ${l}${RESET}`);
+    }
+    else if (useLogo && maxWidth >= 10) {
+        lines.push(`${logoColor} AgentDeck${RESET}`);
+    }
+    lines.push('');
+    // Session list
+    const renderSession = (proj, model, sessState, agentType, hotkeyIndex, session) => {
+        const col = stateColor(sessState);
+        const hotkey = `${colors.dim}[${sessionHotkeyLabel(hotkeyIndex)}]${RESET}`;
+        const name = truncText(proj, maxWidth - 16);
+        const emoji = `${creatureBrandColor(agentType)}${creatureEmoji(agentType)}${RESET}`;
+        const secondary = [model, ...observedDetailParts(session), compactStateLabel(sessState)]
+            .filter(Boolean)
+            .join(' - ');
+        lines.push(` ${hotkey} ${emoji} ${col}${name}${RESET}`);
+        lines.push(`${colors.dim}    ${truncText(secondary, maxWidth - 4)}${RESET}`);
+    };
+    // #N suffix via shared assignDisplayNames
+    // Daemon mode: sessions list already contains all agents (including virtual OpenClaw).
+    // Also applies when daemon relays OpenClaw (agentType='openclaw' but sessions has the entry).
+    // Session bridge mode: sessions has siblings only — prepend self.
+    const isDaemonLike = state.agentType === 'daemon' ||
+        (state.agentType && state.sessions.some(s => s.agentType === state.agentType));
+    if (isDaemonLike) {
+        const sorted = sortSessions(state.sessions);
+        const displayed = assignDisplayNames(sorted.map(s => ({
+            id: s.id, projectName: s.projectName || 'unknown', agentType: s.agentType, state: s.state,
+            modelName: s.modelName,
+            port: s.port, controlMode: s.controlMode,
+            currentTask: s.currentTask,
+            contextPercent: s.contextPercent,
+            totalTokens: s.totalTokens,
+        })));
+        let focusableIndex = 0;
+        for (const d of displayed) {
+            const hotkeyIndex = sessionHotkeyIndex(d.session, focusableIndex);
+            if (hotkeyIndex !== null)
+                focusableIndex += 1;
+            renderSession(d.displayName, d.session.modelName, d.session.state || 'idle', d.session.agentType, hotkeyIndex, d.session);
+        }
+    }
+    else if (state.state) {
+        // Self (primary session)
+        renderSession(state.projectName || 'unknown', state.modelName ?? undefined, state.state, state.agentType ?? undefined, null);
+        // Siblings — include self as virtual entry for correct #N numbering
+        const sorted = sortSessions(state.sessions);
+        const selfEntry = {
+            id: '__self__', projectName: state.projectName || 'unknown',
+            agentType: state.agentType ?? undefined, state: state.state,
+        };
+        const allForNumbering = [selfEntry, ...sorted.map(s => ({
+                id: s.id, projectName: s.projectName || 'unknown', agentType: s.agentType, state: s.state,
+                modelName: s.modelName,
+                port: s.port, controlMode: s.controlMode,
+                currentTask: s.currentTask,
+                contextPercent: s.contextPercent,
+                totalTokens: s.totalTokens,
+            }))];
+        const displayed = assignDisplayNames(allForNumbering);
+        // Skip the self entry (index 0), render siblings with hotkey indices
+        let focusableIndex = 0;
+        for (let i = 1; i < displayed.length; i++) {
+            const d = displayed[i];
+            const sessionInfo = d.session;
+            const hotkeyIndex = sessionHotkeyIndex(sessionInfo, focusableIndex);
+            if (hotkeyIndex !== null)
+                focusableIndex += 1;
+            renderSession(d.displayName, d.session.modelName, d.session.state || 'idle', d.session.agentType, hotkeyIndex, sessionInfo);
+        }
+    }
+    // Virtual OpenClaw entry when gateway detected but not in sessions list
+    const hasOcSession = state.sessions.some(s => s.agentType === 'openclaw' || s.agentType === 'gateway');
+    if (state.gatewayAvailable && !hasOcSession) {
+        renderSession('OpenClaw', undefined, state.crayfishRouting ? 'processing' : 'idle', 'openclaw', null);
+    }
+    // Gateway error warning
+    if (state.gatewayHasError) {
+        lines.push(`${colors.error} \u26A0 Gateway Error${RESET}`);
+    }
+    // Voice assistant indicator
+    if (state.voiceAssistantState && state.voiceAssistantState !== 'disabled' && state.voiceAssistantState !== 'idle') {
+        lines.push('');
+        if (state.voiceAssistantState === 'listening') {
+            lines.push(` ${colors.idle}\uD83C\uDFA4 Listening...${RESET}`);
+        }
+        else if (state.voiceAssistantState === 'processing') {
+            const text = state.voiceAssistantText ? truncText(state.voiceAssistantText, maxWidth - 6) : '...';
+            lines.push(` ${colors.processing}\uD83C\uDFA4 ${text}${RESET}`);
+        }
+        else if (state.voiceAssistantState === 'speaking') {
+            lines.push(` ${sgr(32)}\uD83D\uDD0A Speaking...${RESET}`);
+        }
+    }
+    lines.push('');
+    if (state.usage) {
+        const u = state.usage;
+        if (u.inputTokens || u.outputTokens) {
+            lines.push(`${colors.dim} Tokens: ${formatTokens(u.inputTokens)}/${formatTokens(u.outputTokens)}${RESET}`);
+        }
+        if (u.estimatedCostUsd) {
+            lines.push(`${colors.dim} Cost: $${u.estimatedCostUsd.toFixed(2)}${RESET}`);
+        }
+    }
+    return lines;
+}
+// ===== Status Panel: LIMITS | MODELS =====
+function renderStatusLimitsLines(state, width) {
+    const lines = [];
+    const u = state.usage;
+    if (!u)
+        return lines;
+    const gaugeW = Math.min(10, Math.floor(width * 0.3));
+    if (u.fiveHourPercent !== undefined) {
+        const pct = Math.round(u.fiveHourPercent);
+        lines.push(` 5h [${blockGauge(pct, gaugeW)}] ${pct}%`);
+        const reset = resetTimeStr(u.fiveHourResetsAt);
+        if (reset)
+            lines.push(`${colors.dim}    ${reset}${RESET}`);
+    }
+    if (u.sevenDayPercent !== undefined) {
+        const pct = Math.round(u.sevenDayPercent);
+        lines.push(` 7d [${blockGauge(pct, gaugeW)}] ${pct}%`);
+        const reset = resetTimeStr(u.sevenDayResetsAt);
+        if (reset)
+            lines.push(`${colors.dim}    ${reset}${RESET}`);
+    }
+    if (state.currentTool) {
+        lines.push(` ${colors.tool}${truncText(state.currentTool, width - 2)}${RESET}`);
+    }
+    return lines;
+}
+function renderStatusModelsLines(state, width) {
+    const lines = [];
+    const u = state.usage;
+    if (state.modelName) {
+        const dot = u?.oauthConnected ? `${colors.idle}\u25CF${RESET}` : `${colors.dim}\u25CB${RESET}`;
+        lines.push(` ${dot} ${truncText(state.modelName, width - 4)}`);
+    }
+    lines.push(...renderOauthCatalogLines(state.modelCatalog, u?.oauthConnected, width));
+    lines.push(...renderOllamaSummaryLines(u?.ollamaStatus, width));
+    return lines;
+}
+function renderStatusLines(state, width) {
+    const lines = [];
+    const u = state.usage;
+    if (u) {
+        const gaugeW = Math.min(12, Math.floor(width * 0.15));
+        if (u.fiveHourPercent !== undefined) {
+            const pct = Math.round(u.fiveHourPercent);
+            lines.push(` 5h [${blockGauge(pct, gaugeW)}] ${pct}% ${colors.dim}${resetTimeStr(u.fiveHourResetsAt)}${RESET}`);
+        }
+        if (u.sevenDayPercent !== undefined) {
+            const pct = Math.round(u.sevenDayPercent);
+            lines.push(` 7d [${blockGauge(pct, gaugeW)}] ${pct}% ${colors.dim}${resetTimeStr(u.sevenDayResetsAt)}${RESET}`);
+        }
+    }
+    if (state.currentTool)
+        lines.push(` ${colors.tool}Tool: ${truncText(state.currentTool, width - 8)}${RESET}`);
+    if (state.modelName)
+        lines.push(`${colors.dim} Model: ${state.modelName}${RESET}`);
+    lines.push(...renderOauthCatalogLines(state.modelCatalog, u?.oauthConnected, width));
+    const ollamaLines = renderOllamaSummaryLines(u?.ollamaStatus, width);
+    lines.push(...ollamaLines);
+    return lines;
+}
+function renderOauthCatalogLines(modelCatalog, oauthConnected, width) {
+    const lines = [];
+    const models = modelCatalog.filter((m) => m.available).map((m) => m.name);
+    if (models.length > 0) {
+        return wrapCommaList(' OAuth: ', models, width);
+    }
+    if (oauthConnected === true) {
+        lines.push(`${colors.dim}${truncText(' OAuth: connected', width)}${RESET}`);
+    }
+    else if (oauthConnected === false) {
+        lines.push(`${colors.dim}${truncText(' OAuth: disconnected', width)}${RESET}`);
+    }
+    return lines;
+}
+function wrapCommaList(prefix, items, width) {
+    const lines = [];
+    const indent = ' '.repeat(prefix.length);
+    let current = prefix;
+    for (let i = 0; i < items.length; i++) {
+        const chunk = i === 0 ? items[i] : `, ${items[i]}`;
+        if (visLen(current) + visLen(chunk) <= width) {
+            current += chunk;
+            continue;
+        }
+        if (visLen(current) > visLen(prefix)) {
+            lines.push(`${colors.dim}${padRight(current, width)}${RESET}`.trimEnd());
+            current = indent + items[i];
+            continue;
+        }
+        lines.push(`${colors.dim}${truncText(current + chunk, width)}${RESET}`);
+        current = indent;
+    }
+    if (visLen(current.trim()) > 0) {
+        lines.push(`${colors.dim}${truncText(current, width)}${RESET}`);
+    }
+    return lines;
+}
+function renderOllamaSummaryLines(ollamaStatus, width) {
+    if (!ollamaStatus)
+        return [];
+    if (!ollamaStatus.available || ollamaStatus.models.length === 0) {
+        return [`${colors.dim}${truncText(' Ollama: stopped', width)}${RESET}`];
+    }
+    return ollamaStatus.models.map((m) => {
+        const size = m.sizeVram > 0 ? m.sizeVram : m.size;
+        const sizeText = size > 0 ? ` ${(size / 1e9).toFixed(1)}G` : '';
+        return `${colors.dim}${truncText(` Ollama: ${m.name}${sizeText}`, width)}${RESET}`;
+    });
+}
+function renderTimelineLines(state, width, maxLines, scrollOffset) {
+    const lines = [];
+    const entries = state.timeline;
+    if (entries.length === 0) {
+        lines.push(`${colors.dim} No events yet${RESET}`);
+        return lines;
+    }
+    const start = Math.max(0, entries.length - maxLines - scrollOffset);
+    const end = Math.min(entries.length, start + maxLines);
+    for (let i = start; i < end; i++) {
+        const e = entries[i];
+        const time = new Date(e.ts);
+        const timeStr = `${String(time.getHours()).padStart(2, '0')}:${String(time.getMinutes()).padStart(2, '0')}`;
+        const raw = truncText(e.raw, width - 10);
+        const pending = e.status === 'pending' ? `${colors.dim} [PENDING]${RESET}` : '';
+        lines.push(` ${colors.dim}${timeStr}${RESET} ${typeColor(e.type)}${typeIcon(e.type)}${RESET} ${raw}${pending}`);
+    }
+    return lines;
+}
+function timelineHeader(state, width, maxLines, scrollOffset) {
+    const total = state.timeline.length;
+    if (total === 0)
+        return `${colors.header} TIMELINE${RESET}`;
+    const shown = Math.min(total, maxLines);
+    const offset = scrollOffset > 0 ? ` · -${scrollOffset}` : '';
+    return truncText(`${colors.header} TIMELINE${RESET}${colors.dim} ${shown}/${total}${offset}${RESET}`, width);
+}
+function renderHelpOverlay(state, cols, rows) {
+    const boxW = Math.min(cols - 4, 78);
+    const boxH = Math.min(rows - 4, 18);
+    const left = Math.max(1, Math.floor((cols - boxW) / 2));
+    const top = Math.max(1, Math.floor((rows - boxH) / 2));
+    const lines = [
+        `${colors.header}AgentDeck TUI Help${RESET}`,
+        '',
+        `${colors.bold}Navigation${RESET}`,
+        ' q        quit dashboard',
+        ' ? / h    toggle help',
+        ' ↑ ↓      scroll timeline',
+        ' j / k    vim-style timeline scroll',
+        ' 1-9      connect to listed session',
+        ' Esc      close help',
+        '',
+        `${colors.bold}Reading The UI${RESET}`,
+        ' Header   current project, model, and state',
+        ' Sessions busiest first, numbered for switching',
+        ' STATUS   limits, models, OAuth, Ollama',
+        ' TIMELINE shown/total and scroll offset',
+        '',
+        `${colors.bold}Terminal${RESET}`,
+        ` Unicode: ${terminalCaps.unicode ? 'on' : 'fallback'}  Color: ${terminalCaps.trueColor ? 'truecolor' : '16-color'}  Emoji: ${terminalCaps.emoji ? 'on' : 'fallback'}`,
+    ];
+    let output = cursor.moveTo(1, 1) + screenCodes.clear;
+    output += cursor.moveTo(top, left) + `${colors.border}${box.tl}${hLine(boxW - 2)}${box.tr}${RESET}`;
+    for (let i = 0; i < boxH - 2; i++) {
+        const content = lines[i] ?? '';
+        output += cursor.moveTo(top + 1 + i, left) +
+            `${colors.border}${box.v}${RESET}` +
+            padRight(i === 0 ? centerText(content, boxW - 2) : content, boxW - 2) +
+            `${colors.border}${box.v}${RESET}`;
+    }
+    output += cursor.moveTo(top + boxH - 1, left) + `${colors.border}${box.bl}${hLine(boxW - 2)}${box.br}${RESET}`;
+    output += cursor.moveTo(Math.min(rows, top + boxH), left) +
+        `${colors.dim}Press ? or Esc to return${RESET}`;
+    return output;
+}
+// ===== Output Helper =====
+/** Write buf lines to screen. Last row reserved for q quit hint. */
+function flushBuf(buf, cols, rows, footerHint) {
+    const maxBoxRows = rows - 1;
+    let output = cursor.moveTo(1, 1);
+    const limit = Math.min(buf.length, maxBoxRows);
+    for (let i = 0; i < limit; i++) {
+        output += cursor.moveTo(i + 1, 1) + screenCodes.clearLine + buf[i];
+    }
+    for (let i = limit; i < maxBoxRows; i++) {
+        output += cursor.moveTo(i + 1, 1) + screenCodes.clearLine;
+    }
+    // q quit on last row
+    output += cursor.moveTo(rows, 1) + screenCodes.clearLine +
+        ` ${colors.dimCyan}${truncText(footerHint, cols - 2)}${RESET}`;
+    return output;
+}
+// ===== Main Render =====
+export function renderDashboard(state, cols, rows, terrariumLines, frame, scrollOffset) {
+    if (state.helpVisible) {
+        return renderHelpOverlay(state, cols, rows);
+    }
+    const layout = getLayout(cols, rows);
+    if (cols < 40 || rows < 10) {
+        return cursor.moveTo(1, 1) + screenCodes.clear +
+            `Resize terminal to at least 60\u00D716 (current: ${cols}\u00D7${rows})`;
+    }
+    const connIcon = state.connectionStatus === 'connected' ? `${colors.idle}\u25CF` :
+        state.connectionStatus === 'reconnecting' ? `${colors.processing}\u25D4` :
+            `${colors.disconnected}\u25CB`;
+    const staleTag = state.isStale ? ` ${colors.error}[STALE]${RESET}` : '';
+    const spinnerStr = state.state === 'processing'
+        ? ` ${colors.processing}${spinner(frame)}${RESET}` : '';
+    const footerHint = state.sessions.length > 0
+        ? 'q quit  ↑↓/j k scroll  1-9 switch session'
+        : 'q quit  ↑↓/j k scroll';
+    if (layout === 'wide')
+        return renderWideLayout(state, cols, rows, terrariumLines, frame, scrollOffset, connIcon, staleTag, spinnerStr, footerHint);
+    if (layout === 'standard')
+        return renderStandardLayout(state, cols, rows, terrariumLines, frame, scrollOffset, connIcon, staleTag, spinnerStr, footerHint);
+    return renderNarrowLayout(state, cols, rows, frame, scrollOffset, connIcon, staleTag, spinnerStr, footerHint);
+}
+// ===== Wide Layout =====
+function renderWideLayout(state, cols, rows, terrariumLines, frame, scrollOffset, connIcon, staleTag, spinnerStr, footerHint) {
+    const leftW = Math.max(20, Math.floor(cols * 0.22));
+    const rightW = cols - leftW - 3;
+    const buf = [];
+    const summary = currentSessionSummary(state, Math.max(16, rightW - 16));
+    // Top border
+    const topLeft = `${colors.border}${box.tl}${RESET}`;
+    const topMid = `${colors.border}${box.tee}${box.h} ${summary} ${RESET}${connIcon}${RESET}${spinnerStr}${staleTag} `;
+    const topRight = `${colors.border}${box.tr}${RESET}`;
+    const leftFillLen = Math.max(0, leftW + 1 - visLen(topLeft));
+    const rightFillLen = Math.max(0, rightW + 2 - visLen(topMid) - visLen(topRight));
+    buf.push(topLeft + `${colors.border}${hLine(leftFillLen)}${RESET}` + topMid + `${colors.border}${hLine(rightFillLen)}${RESET}` + topRight);
+    const agentLines = renderAgentLines(state, leftW - 2, true);
+    // Status: LIMITS | MODELS
+    const tH = terrariumLines.length;
+    const statusLimitW = Math.floor(rightW * 0.4);
+    const statusModelW = rightW - statusLimitW - 1;
+    const limitsLines = renderStatusLimitsLines(state, statusLimitW);
+    const modelsLines = renderStatusModelsLines(state, statusModelW);
+    const statusH = Math.max(3, Math.max(limitsLines.length, modelsLines.length) + 1);
+    const boxContentRows = rows - 3; // top border + bottom border + q quit row
+    const timelineH = Math.max(3, boxContentRows - tH - statusH - 2);
+    const tlLines = renderTimelineLines(state, rightW - 2, timelineH - 1, scrollOffset);
+    for (let r = 0; r < boxContentRows; r++) {
+        const leftContent = padRight(r < agentLines.length ? agentLines[r] : '', leftW);
+        let rightContent = '';
+        if (r < tH) {
+            rightContent = terrariumLines[r] || '';
+        }
+        else if (r === tH) {
+            rightContent = `${colors.border}${hLine(statusLimitW)}${RESET}` +
+                `${colors.border}\u252C${RESET}` +
+                `${colors.border}${hLine(statusModelW)}${RESET}`;
+        }
+        else if (r < tH + 1 + statusH) {
+            const si = r - tH - 1;
+            if (si === 0) {
+                rightContent = padRight(`${colors.header} LIMITS${RESET}`, statusLimitW) +
+                    `${colors.border}${box.v}${RESET}` +
+                    padRight(`${colors.header} MODELS${RESET}`, statusModelW);
+            }
+            else {
+                const li = si - 1;
+                rightContent = padRight(li < limitsLines.length ? limitsLines[li] : '', statusLimitW) +
+                    `${colors.border}${box.v}${RESET}` +
+                    padRight(li < modelsLines.length ? modelsLines[li] : '', statusModelW);
+            }
+        }
+        else if (r === tH + 1 + statusH) {
+            rightContent = `${colors.border}${hLine(rightW)}${RESET}`;
+        }
+        else {
+            const ti = r - tH - statusH - 2;
+            if (ti === 0)
+                rightContent = timelineHeader(state, rightW, timelineH - 1, scrollOffset);
+            else
+                rightContent = ti - 1 < tlLines.length ? tlLines[ti - 1] : '';
+        }
+        buf.push(`${colors.border}${box.v}${RESET}${padRight(leftContent, leftW)}` +
+            `${colors.border}${box.v}${RESET}${padRight(rightContent, rightW)}` +
+            `${colors.border}${box.v}${RESET}`);
+    }
+    buf.push(`${colors.border}${box.bl}${hLine(leftW)}${box.bTee}${hLine(rightW)}${box.br}${RESET}`);
+    return flushBuf(buf, cols, rows, footerHint);
+}
+// ===== Standard Layout =====
+function renderStandardLayout(state, cols, rows, terrariumLines, frame, scrollOffset, connIcon, staleTag, spinnerStr, footerHint) {
+    const w = cols - 2;
+    const buf = [];
+    const summary = currentSessionSummary(state, Math.max(16, w - 18));
+    buf.push(borderFill(`${colors.border}${box.tl}${box.h} ${summary} ${RESET}${connIcon}${RESET}${spinnerStr}${staleTag} `, `${colors.border}${box.tr}${RESET}`, cols));
+    for (const tl of terrariumLines) {
+        buf.push(`${colors.border}${box.v}${RESET}${padRight(tl, w)}${colors.border}${box.v}${RESET}`);
+    }
+    const leftHalf = Math.floor(w / 2);
+    const rightHalf = w - leftHalf - 1;
+    const splitPrefix = `${colors.border}${box.lTee}${box.h} STATUS ${RESET}`;
+    const splitMid = `${colors.border}${box.tee}${RESET}`;
+    const splitSuffix = `${colors.border}${box.rTee}${RESET}`;
+    buf.push(splitPrefix + `${colors.border}${hLine(Math.max(0, leftHalf + 1 - visLen(splitPrefix)))}${RESET}` +
+        splitMid + `${colors.border}${hLine(Math.max(0, rightHalf + 2 - visLen(splitMid) - visLen(splitSuffix)))}${RESET}` + splitSuffix);
+    const statusLines = renderStatusLines(state, leftHalf - 1);
+    const agentCompact = renderAgentCompactLines(state, rightHalf - 1);
+    const pairRows = Math.max(statusLines.length, agentCompact.length, 3);
+    for (let r = 0; r < pairRows; r++) {
+        buf.push(`${colors.border}${box.v}${RESET}${padRight(r < statusLines.length ? statusLines[r] : '', leftHalf)}` +
+            `${colors.border}${box.v}${RESET}${padRight(r < agentCompact.length ? agentCompact[r] : '', rightHalf)}` +
+            `${colors.border}${box.v}${RESET}`);
+    }
+    buf.push(`${colors.border}${box.lTee}${hLine(leftHalf)}${box.bTee}${hLine(rightHalf)}${box.rTee}${RESET}`);
+    const tlAvailable = Math.max(2, rows - buf.length - 2);
+    buf.push(`${colors.border}${box.v}${RESET}${padRight(timelineHeader(state, w, tlAvailable, scrollOffset), w)}` +
+        `${colors.border}${box.v}${RESET}`);
+    const tlLines = renderTimelineLines(state, w - 1, tlAvailable, scrollOffset);
+    for (const tl of tlLines) {
+        buf.push(`${colors.border}${box.v}${RESET}${padRight(tl, w)}${colors.border}${box.v}${RESET}`);
+    }
+    buf.push(`${colors.border}${box.bl}${hLine(w)}${box.br}${RESET}`);
+    return flushBuf(buf, cols, rows, footerHint);
+}
+function renderAgentCompactLines(state, width) {
+    const lines = [];
+    const isDaemonLikeCompact = state.agentType === 'daemon' ||
+        (state.agentType && state.sessions.some(s => s.agentType === state.agentType));
+    if (isDaemonLikeCompact) {
+        let focusableIndex = 0;
+        for (const s of sortSessions(state.sessions)) {
+            const renderInfo = s;
+            const st = s.state || 'idle';
+            const col = stateColor(st);
+            const emoji = `${creatureBrandColor(s.agentType)}${creatureEmoji(s.agentType)}${RESET}`;
+            const status = `${col}${stateIcon(st)} ${compactStateLabel(st)}${RESET}`;
+            const detail = renderInfo.currentTask || s.modelName;
+            const model = detail ? `${colors.dim} · ${truncText(detail, Math.max(8, width - 24))}${RESET}` : '';
+            const marker = renderInfo.controlMode === 'observed' ? `${colors.dim} · obs${RESET}` : '';
+            const project = truncText(s.projectName || '?', Math.max(8, width - 20));
+            const hotkeyIndex = sessionHotkeyIndex(renderInfo, focusableIndex);
+            if (hotkeyIndex !== null)
+                focusableIndex += 1;
+            lines.push(` ${colors.dim}[${sessionHotkeyLabel(hotkeyIndex)}]${RESET} ${emoji} ${project} ${status}${marker}${model}`);
+        }
+    }
+    else if (state.state) {
+        // Self first
+        const col = stateColor(state.state);
+        const proj = truncText(state.projectName || '?', Math.max(8, width - 16));
+        const status = `${col}${stateIcon(state.state)} ${compactStateLabel(state.state)}${RESET}`;
+        const model = state.modelName ? `${colors.dim} · ${truncText(state.modelName, Math.max(8, width - 24))}${RESET}` : '';
+        const emoji = `${creatureBrandColor(state.agentType ?? undefined)}${creatureEmoji(state.agentType ?? undefined)}${RESET}`;
+        lines.push(` ${emoji} ${proj} ${status}${model}`);
+        // Siblings
+        let focusableIndex = 0;
+        for (const s of sortSessions(state.sessions)) {
+            const renderInfo = s;
+            const st = s.state || 'idle';
+            const sCol = stateColor(st);
+            const sEmoji = `${creatureBrandColor(s.agentType)}${creatureEmoji(s.agentType)}${RESET}`;
+            const sStatus = `${sCol}${stateIcon(st)} ${compactStateLabel(st)}${RESET}`;
+            const detail = renderInfo.currentTask || s.modelName;
+            const sModel = detail ? `${colors.dim} · ${truncText(detail, Math.max(8, width - 24))}${RESET}` : '';
+            const marker = renderInfo.controlMode === 'observed' ? `${colors.dim} · obs${RESET}` : '';
+            const sProject = truncText(s.projectName || '?', Math.max(8, width - 20));
+            const hotkeyIndex = sessionHotkeyIndex(renderInfo, focusableIndex);
+            if (hotkeyIndex !== null)
+                focusableIndex += 1;
+            lines.push(` ${colors.dim}[${sessionHotkeyLabel(hotkeyIndex)}]${RESET} ${sEmoji} ${sProject} ${sStatus}${marker}${sModel}`);
+        }
+    }
+    // Virtual OpenClaw entry
+    const hasOcCompact = state.sessions.some(s => s.agentType === 'openclaw' || s.agentType === 'gateway');
+    if (state.gatewayAvailable && !hasOcCompact) {
+        const ocState = state.crayfishRouting ? 'processing' : 'idle';
+        const ocCol = stateColor(ocState);
+        const ocEmoji = `${creatureBrandColor('openclaw')}${creatureEmoji('openclaw')}${RESET}`;
+        lines.push(` ${ocEmoji} OpenClaw ${ocCol}${stateIcon(ocState)}${ocState.toUpperCase()}${RESET}`);
+    }
+    // Gateway error warning
+    if (state.gatewayHasError) {
+        lines.push(`${colors.error} \u26A0 Gateway Error${RESET}`);
+    }
+    // Voice assistant indicator (compact)
+    if (state.voiceAssistantState && state.voiceAssistantState !== 'disabled' && state.voiceAssistantState !== 'idle') {
+        if (state.voiceAssistantState === 'listening') {
+            lines.push(` ${colors.idle}\uD83C\uDFA4 Listening...${RESET}`);
+        }
+        else if (state.voiceAssistantState === 'processing') {
+            const text = state.voiceAssistantText ? truncText(state.voiceAssistantText, width - 6) : '...';
+            lines.push(` ${colors.processing}\uD83C\uDFA4 ${text}${RESET}`);
+        }
+        else if (state.voiceAssistantState === 'speaking') {
+            lines.push(` ${sgr(32)}\uD83D\uDD0A Speaking...${RESET}`);
+        }
+    }
+    if (state.usage) {
+        const u = state.usage;
+        const parts = [];
+        if (u.inputTokens || u.outputTokens)
+            parts.push(`${formatTokens(u.inputTokens)}/${formatTokens(u.outputTokens)}`);
+        if (u.estimatedCostUsd)
+            parts.push(`$${u.estimatedCostUsd.toFixed(2)}`);
+        if (parts.length > 0)
+            lines.push(`${colors.dim} ${parts.join('  ')}${RESET}`);
+    }
+    return lines;
+}
+// ===== Narrow Layout =====
+function renderNarrowLayout(state, cols, rows, frame, scrollOffset, connIcon, staleTag, spinnerStr, footerHint) {
+    const w = cols - 2;
+    const buf = [];
+    const summary = currentSessionSummary(state, Math.max(12, w - 18));
+    buf.push(borderFill(`${colors.border}${box.tl}${box.h} ${summary} ${RESET}${connIcon}${RESET}${spinnerStr}${staleTag} `, `${colors.border}${box.tr}${RESET}`, cols));
+    for (const al of renderAgentCompactLines(state, w - 1)) {
+        buf.push(`${colors.border}${box.v}${RESET}${padRight(al, w)}${colors.border}${box.v}${RESET}`);
+    }
+    buf.push(`${colors.border}${box.lTee}${hLine(w)}${box.rTee}${RESET}`);
+    for (const sl of renderStatusLines(state, w - 1)) {
+        buf.push(`${colors.border}${box.v}${RESET}${padRight(sl, w)}${colors.border}${box.v}${RESET}`);
+    }
+    const tlAvailable = Math.max(2, rows - buf.length - 2);
+    buf.push(`${colors.border}${box.lTee}${hLine(w)}${box.rTee}${RESET}`);
+    buf.push(`${colors.border}${box.v}${RESET}${padRight(timelineHeader(state, w, tlAvailable, scrollOffset), w)}${colors.border}${box.v}${RESET}`);
+    const tlLines = renderTimelineLines(state, w - 1, tlAvailable, scrollOffset);
+    for (const tl of tlLines) {
+        buf.push(`${colors.border}${box.v}${RESET}${padRight(tl, w)}${colors.border}${box.v}${RESET}`);
+    }
+    buf.push(`${colors.border}${box.bl}${hLine(w)}${box.br}${RESET}`);
+    return flushBuf(buf, cols, rows, footerHint);
+}
+//# sourceMappingURL=renderer.js.map