@provos/ironcurtain 0.7.2 → 0.9.0

package/dist/mux/mux-renderer.js

@@ -12,8 +12,9 @@
  * The PTY viewport size is constant regardless of input mode.
  * Command-mode UI overlays the bottom of the viewport.
  */
-import { calculateLayout } from './types.js';
+import { calculateLayout, isPickerMode, isBottomPanelPicker, } from './types.js';
 import { createSplashScreen } from './mux-splash.js';
+import { formatRelativeTime } from './session-scanner.js';
 // -- xterm.js color mode constants (from IBufferCell.getFgColorMode/getBgColorMode) --
 const CM_DEFAULT = 0;
 const CM_P16 = 16777216; // 0x01000000
@@ -76,6 +77,7 @@ export function createMuxRenderer(term, cols, rows, deps) {
     let renderScheduled = false;
     let lastRenderTime = 0;
     let renderTimeout = null;
+    let _destroyed = false;
     // Splash screen (shown when no tabs exist)
     let _splash = null;
     // Multiline input scroll offset (first visible visual line index)
@@ -146,7 +148,8 @@ export function createMuxRenderer(term, cols, rows, deps) {
         const mode = deps.getMode();
         if (mode === 'command')
             return _layout.overlayRows;
-        if (mode === 'picker')
+        // Escalation picker floats over the full viewport -- no rows reserved.
+        if (isBottomPanelPicker(mode))
             return _layout.pickerRows;
         return 0;
     }
@@ -180,12 +183,13 @@ export function createMuxRenderer(term, cols, rows, deps) {
         const scrollOffset = deps.getScrollOffset();
         const readFrom = scrollOffset ?? baseY;
         const cells = readTerminalBuffer(xtermTerminal, readFrom, _layout.ptyViewportRows, _cols);
-        // Determine how many rows to render (skip overlay in command/picker mode)
+        // Determine how many rows to render (skip overlay in command/bottom-panel picker mode).
+        // Escalation picker floats over the full viewport -- no rows subtracted.
         const mode = deps.getMode();
         let visibleRows = _layout.ptyViewportRows;
         if (mode === 'command')
             visibleRows -= _layout.overlayRows;
-        else if (mode === 'picker')
+        else if (isBottomPanelPicker(mode))
             visibleRows -= _layout.pickerRows;
         let lastStyle = null;
         for (let y = 0; y < visibleRows; y++) {
@@ -247,7 +251,7 @@ export function createMuxRenderer(term, cols, rows, deps) {
                 term.bgWhite.black(' ^^A ');
                 term.styleReset();
                 if (pendingCount > 0) {
-                    term.dim(` command mode \u00b7 ${pendingCount} escalation${pendingCount !== 1 ? 's' : ''} pending \u2014 /approve or /deny`);
+                    term.dim(` command mode \u00b7 ${pendingCount} escalation${pendingCount !== 1 ? 's' : ''} pending \u2014 Ctrl-E to review`);
                 }
                 else {
                     term.dim(' command mode \u00b7 type a message to enable auto-approver \u00b7 Shift+drag to select');
@@ -324,6 +328,21 @@ export function createMuxRenderer(term, cols, rows, deps) {
                     currentY++;
                     rowsUsed++;
                 }
+                // Whitelist candidate line (shows what /approve+ would whitelist)
+                if (rowsUsed < _layout.escalationPanelRows &&
+                    esc.request.whitelistCandidates &&
+                    esc.request.whitelistCandidates.length > 0) {
+                    const candidate = esc.request.whitelistCandidates[0];
+                    clearLine(currentY);
+                    moveTo(6, currentY);
+                    term.dim('/approve+ ');
+                    term.cyan(candidate.description);
+                    if (candidate.warning) {
+                        term.yellow(` (${candidate.warning})`);
+                    }
+                    currentY++;
+                    rowsUsed++;
+                }
             }
             // Overflow indicator when not all escalations fit
             const remaining = pendingEscalations.length - shownCount;
@@ -341,6 +360,8 @@ export function createMuxRenderer(term, cols, rows, deps) {
         if (pendingCount > 0) {
             term.cyan('/approve');
             term.dim(' N  ');
+            term.cyan('/approve+');
+            term.dim(' N  ');
             term.cyan('/deny');
             term.dim(' N  ');
             term.cyan('/approve all');
@@ -352,6 +373,8 @@ export function createMuxRenderer(term, cols, rows, deps) {
         else {
             term.cyan('/new');
             term.dim('  ');
+            term.cyan('/resume');
+            term.dim('  ');
             term.cyan('/tab');
             term.dim(' N  ');
             term.cyan('/close');
@@ -411,6 +434,236 @@ export function createMuxRenderer(term, cols, rows, deps) {
         const cursorScreenRow = startY + _layout.escalationPanelRows + 1 + (cursorVis.row - _inputScrollOffset);
         moveTo(2 + 2 + cursorVis.col, cursorScreenRow);
     }
+    /**
+     * Draws a single row of the escalation dialog box at the given screen
+     * position, wrapped in box-drawing side borders. Content is rendered
+     * by the `renderContent` callback which receives the inner width.
+     */
+    function drawBoxRow(y, boxX, innerWidth, renderContent) {
+        moveTo(boxX, y);
+        term.brightCyan('\u2502');
+        term(' ');
+        // Clear the full inner area with spaces first to avoid stale characters
+        // from previous redraws. We cannot use eraseLineAfter because that would
+        // wipe PTY content to the right of the floating overlay.
+        term(' '.repeat(innerWidth));
+        // Move back and render content over the cleared area
+        moveTo(boxX + 2, y);
+        renderContent(innerWidth);
+        moveTo(boxX + innerWidth + 2, y);
+        term(' ');
+        term.brightCyan('\u2502');
+    }
+    function drawEscalationPickerOverlay() {
+        const eps = deps.getEscalationPickerState();
+        if (!eps)
+            return;
+        const pending = deps.getEscalationState().pendingEscalations;
+        const sortedEscalations = [...pending.values()].sort((a, b) => a.displayNumber - b.displayNumber);
+        if (sortedEscalations.length === 0)
+            return;
+        const focused = pending.get(eps.focusedDisplayNumber);
+        if (!focused)
+            return;
+        // Compute dialog dimensions -- centered in the PTY viewport
+        const viewportRows = _layout.ptyViewportRows;
+        const viewportY = _layout.ptyViewportY;
+        // Horizontal sizing: leave 3-column margin on each side, max 80 inner width.
+        // Clamp to available columns so we never draw past the right edge.
+        const boxMargin = 3;
+        const maxInnerWidth = 80;
+        const minBoxWidth = 12; // absolute minimum to show anything useful
+        const innerWidth = Math.min(maxInnerWidth, Math.max(minBoxWidth - 4, _cols - boxMargin * 2 - 4));
+        const boxWidth = innerWidth + 4; // 4 = border + space on each side
+        if (boxWidth > _cols)
+            return; // terminal too narrow for overlay
+        const boxX = Math.max(0, Math.floor((_cols - boxWidth) / 2));
+        // Content rows: tab bar + separator + header + separator + detail area + separator + hint bar
+        const minContentRows = 7; // minimum: tab + sep + header + sep + 1 detail + sep + hints
+        const maxContentRows = Math.max(minContentRows, viewportRows - 4); // leave 2 rows margin top+bottom
+        const detailBudget = maxContentRows - 6; // 6 = tab bar + 2 separators + header + separator + hint bar
+        // Collect detail lines — use innerWidth (minus arg indent) so line
+        // packing matches the actual box geometry.
+        const argLines = formatArgLines(focused.request.arguments, innerWidth - 2);
+        const detailLines = [];
+        if (argLines.length > 0) {
+            detailLines.push({ kind: 'label', text: 'Arguments:' });
+            for (const line of argLines) {
+                detailLines.push({ kind: 'arg', text: line });
+            }
+        }
+        detailLines.push({ kind: 'reason', text: `Reason: ${focused.request.reason}` });
+        if (focused.request.whitelistCandidates && focused.request.whitelistCandidates.length > 0) {
+            const candidate = focused.request.whitelistCandidates[0];
+            const wlText = candidate.warning ? `${candidate.description} (${candidate.warning})` : candidate.description;
+            detailLines.push({ kind: 'whitelist', text: `/approve+ ${wlText}` });
+        }
+        const actualDetailRows = Math.min(detailLines.length, detailBudget);
+        const totalBoxRows = 6 + actualDetailRows; // includes top+bottom border
+        const totalBoxHeight = totalBoxRows + 2; // +2 for top and bottom border lines
+        if (totalBoxHeight > viewportRows)
+            return; // terminal too small
+        // Vertical centering within the viewport
+        const startY = viewportY + Math.max(0, Math.floor((viewportRows - totalBoxHeight) / 2));
+        let currentY = startY;
+        // Top border with title
+        moveTo(boxX, currentY);
+        const title = ' Escalation ';
+        const borderAfterTitle = Math.max(0, boxWidth - 2 - title.length);
+        term.brightCyan('\u250c' + title);
+        term.brightCyan('\u2500'.repeat(borderAfterTitle) + '\u2510');
+        term.styleReset();
+        currentY++;
+        // Escalation tab bar
+        drawBoxRow(currentY, boxX, innerWidth, (w) => {
+            const tabs = sortedEscalations.map((esc) => ({
+                displayNumber: esc.displayNumber,
+                label: `[${esc.displayNumber}] ${esc.request.serverName}/${esc.request.toolName}`,
+            }));
+            const fitted = fitTabLabels(tabs, eps.focusedDisplayNumber, w);
+            let written = 0;
+            for (const tab of fitted) {
+                if (tab.isFocused) {
+                    term.bgCyan.black(' ' + tab.label + ' ');
+                }
+                else {
+                    term.dim(' ' + tab.label + ' ');
+                }
+                term.styleReset();
+                written += tab.label.length + 2;
+            }
+            const pad = Math.max(0, w - written);
+            if (pad > 0)
+                term(' '.repeat(pad));
+        });
+        currentY++;
+        // Separator
+        drawBoxRow(currentY, boxX, innerWidth, (w) => {
+            term.dim('\u2500'.repeat(w));
+            term.styleReset();
+        });
+        currentY++;
+        // Tool header (truncated to fit within inner width)
+        drawBoxRow(currentY, boxX, innerWidth, (w) => {
+            const timeAgo = formatRelativeTime(focused.receivedAt.toISOString());
+            const sessionPrefix = `Session #${focused.sessionDisplayNumber}  `;
+            const toolName = `${focused.request.serverName}/${focused.request.toolName}`;
+            const timeSuffix = `  ${timeAgo}`;
+            const totalLen = sessionPrefix.length + toolName.length + timeSuffix.length;
+            if (totalLen <= w) {
+                // Everything fits
+                term(sessionPrefix);
+                term.cyan(toolName);
+                term.dim(timeSuffix);
+            }
+            else {
+                // Truncate the tool name to fit; drop time suffix if still too long
+                const budgetForTool = w - sessionPrefix.length - timeSuffix.length;
+                if (budgetForTool >= 4) {
+                    term(sessionPrefix);
+                    term.cyan(truncate(toolName, budgetForTool));
+                    term.dim(timeSuffix);
+                }
+                else {
+                    // Not enough room for time suffix -- drop it entirely
+                    const toolBudget = w - sessionPrefix.length;
+                    if (toolBudget > 0) {
+                        term(sessionPrefix);
+                        term.cyan(truncate(toolName, toolBudget));
+                    }
+                    else {
+                        term(truncate(sessionPrefix, w));
+                    }
+                }
+            }
+            term.styleReset();
+        });
+        currentY++;
+        // Separator
+        drawBoxRow(currentY, boxX, innerWidth, (w) => {
+            term.dim('\u2500'.repeat(w));
+            term.styleReset();
+        });
+        currentY++;
+        // Detail rows — drawBoxRow pre-clears the inner area with spaces and
+        // handles right-border positioning, so callbacks only need to write
+        // content (no manual padding required).
+        for (let i = 0; i < actualDetailRows; i++) {
+            const detail = detailLines[i];
+            drawBoxRow(currentY, boxX, innerWidth, (w) => {
+                const indent = detail.kind === 'arg' ? 2 : 0;
+                const maxTextWidth = w - indent;
+                if (indent > 0)
+                    term(' '.repeat(indent));
+                if (detail.kind === 'label') {
+                    term.dim(truncate(detail.text, maxTextWidth));
+                }
+                else if (detail.kind === 'reason') {
+                    term.dim('Reason: ');
+                    term.styleReset();
+                    term(truncate(focused.request.reason, maxTextWidth - 8));
+                }
+                else if (detail.kind === 'whitelist') {
+                    term.dim('/approve+ ');
+                    term.styleReset();
+                    const candidate = focused.request.whitelistCandidates?.[0];
+                    if (candidate) {
+                        const descBudget = maxTextWidth - 10;
+                        if (candidate.warning) {
+                            const warnText = ` (${candidate.warning})`;
+                            term.cyan(truncate(candidate.description, Math.max(1, descBudget - warnText.length)));
+                            term.yellow(truncate(warnText, descBudget));
+                        }
+                        else {
+                            term.cyan(truncate(candidate.description, descBudget));
+                        }
+                    }
+                }
+                else {
+                    term(truncate(detail.text, maxTextWidth));
+                }
+                term.styleReset();
+            });
+            currentY++;
+        }
+        // Separator before hint bar
+        drawBoxRow(currentY, boxX, innerWidth, (w) => {
+            term.dim('\u2500'.repeat(w));
+            term.styleReset();
+        });
+        currentY++;
+        // Hint bar
+        drawBoxRow(currentY, boxX, innerWidth, () => {
+            term.bgWhite.black(' a ');
+            term.styleReset();
+            term.dim(' approve ');
+            term.bgWhite.black(' d ');
+            term.styleReset();
+            term.dim(' deny ');
+            term.bgWhite.black(' w ');
+            term.styleReset();
+            term.dim(' approve+ ');
+            if (sortedEscalations.length > 1) {
+                term.bgWhite.black(' A ');
+                term.styleReset();
+                term.dim(' all ');
+                term.bgWhite.black(' D ');
+                term.styleReset();
+                term.dim(' deny all ');
+                term.bgWhite.black(' \u2190\u2192 ');
+                term.styleReset();
+                term.dim(' switch ');
+            }
+            term.bgWhite.black(' Esc ');
+            term.styleReset();
+            term.dim(' dismiss');
+        });
+        currentY++;
+        // Bottom border
+        moveTo(boxX, currentY);
+        term.brightCyan('\u2514' + '\u2500'.repeat(boxWidth - 2) + '\u2518');
+        term.styleReset();
+    }
     function drawActiveOverlay() {
         const mode = deps.getMode();
         if (mode === 'command') {
@@ -419,6 +672,15 @@ export function createMuxRenderer(term, cols, rows, deps) {
         else if (mode === 'picker') {
             drawPickerOverlay();
         }
+        else if (mode === 'resume-picker') {
+            drawResumePickerOverlay();
+        }
+        else if (mode === 'persona-picker') {
+            drawPersonaPickerOverlay();
+        }
+        else if (mode === 'escalation-picker') {
+            drawEscalationPickerOverlay();
+        }
     }
     function drawPickerOverlay() {
         const ps = deps.getPickerState();
@@ -452,7 +714,8 @@ export function createMuxRenderer(term, cols, rows, deps) {
         term.cyan('\u2502');
     }
     function drawPickerMenu(ps, startY, totalRows) {
-        const menuHeight = 4;
+        const hasPersonas = ps.menuItemCount >= 3;
+        const menuHeight = hasPersonas ? 5 : 4;
         const topPad = Math.max(0, Math.floor((totalRows - menuHeight) / 2));
         for (let y = startY; y < startY + totalRows; y++) {
             clearLine(y);
@@ -464,9 +727,13 @@ export function createMuxRenderer(term, cols, rows, deps) {
         term.cyan('\u250c /new ' + '\u2500'.repeat(Math.max(0, boxWidth - 6)) + '\u2510');
         drawMenuOption(y0 + 1, ' New sandbox', ps.menuSelection === 0, boxWidth);
         drawMenuOption(y0 + 2, ' Existing directory', ps.menuSelection === 1, boxWidth);
+        if (hasPersonas) {
+            drawMenuOption(y0 + 3, ' Use a persona', ps.menuSelection === 2, boxWidth);
+        }
         // Bottom border
-        clearLine(y0 + 3);
-        moveTo(2, y0 + 3);
+        const bottomY = hasPersonas ? y0 + 4 : y0 + 3;
+        clearLine(bottomY);
+        moveTo(2, bottomY);
         term.cyan('\u2514' + '\u2500'.repeat(boxWidth) + '\u2518');
         term.styleReset();
     }
@@ -572,6 +839,166 @@ export function createMuxRenderer(term, cols, rows, deps) {
         // Position terminal cursor on the input line (for accessibility)
         moveTo(cursorX, startY);
     }
+    function drawResumePickerOverlay() {
+        const rps = deps.getResumePickerState();
+        if (!rps)
+            return;
+        const startY = _layout.pickerY;
+        const totalRows = _layout.pickerRows;
+        if (totalRows < 3)
+            return;
+        let currentY = startY;
+        // Title
+        clearLine(currentY);
+        moveTo(2, currentY);
+        term.cyan('/resume');
+        term.dim(' \u2014 select a session to resume');
+        term.eraseLineAfter();
+        currentY++;
+        if (rps.sessions.length === 0) {
+            clearLine(currentY);
+            moveTo(4, currentY);
+            term.dim('No resumable sessions found');
+            term.eraseLineAfter();
+            currentY++;
+            for (let y = currentY; y < startY + totalRows; y++) {
+                clearLine(y);
+            }
+            return;
+        }
+        // Session list
+        const listRows = Math.max(0, totalRows - 2); // title + hint bar
+        // Scroll adjustment (render-time only; do not mutate rps)
+        let scrollOffset = rps.scrollOffset;
+        if (rps.selectedIndex < scrollOffset) {
+            scrollOffset = rps.selectedIndex;
+        }
+        else if (rps.selectedIndex >= scrollOffset + listRows) {
+            scrollOffset = rps.selectedIndex - listRows + 1;
+        }
+        for (let i = 0; i < listRows; i++) {
+            clearLine(currentY);
+            const idx = scrollOffset + i;
+            if (idx < rps.sessions.length) {
+                const s = rps.sessions[idx];
+                const isSelected = idx === rps.selectedIndex;
+                const shortId = s.sessionId.substring(0, 8);
+                const timeAgo = formatRelativeTime(s.lastActivity);
+                const line = `${shortId}  ${s.agent}  ${s.label}  ${timeAgo}  [${s.status}]`;
+                moveTo(2, currentY);
+                if (isSelected) {
+                    term.bgCyan.black('> ' + truncate(line, Math.max(1, _cols - 6)));
+                    term.styleReset();
+                }
+                else {
+                    term('  ');
+                    term.dim(shortId);
+                    term('  ');
+                    term(s.agent);
+                    term('  ');
+                    term.cyan(truncate(s.label, Math.max(10, _cols - 50)));
+                    term('  ');
+                    term.dim(timeAgo);
+                    term('  ');
+                    term.dim(`[${s.status}]`);
+                }
+            }
+            term.eraseLineAfter();
+            currentY++;
+        }
+        // Hint bar
+        clearLine(currentY);
+        moveTo(2, currentY);
+        term.bgWhite.black(' Enter ');
+        term.styleReset();
+        term.dim(' resume  ');
+        term.bgWhite.black(' Esc ');
+        term.styleReset();
+        term.dim(' cancel');
+        term.styleReset();
+        term.eraseLineAfter();
+    }
+    function drawPersonaPickerOverlay() {
+        const pps = deps.getPersonaPickerState();
+        if (!pps)
+            return;
+        const startY = _layout.pickerY;
+        const totalRows = _layout.pickerRows;
+        if (totalRows < 3)
+            return;
+        let currentY = startY;
+        // Title
+        clearLine(currentY);
+        moveTo(2, currentY);
+        term.cyan('/new');
+        term.dim(' \u2014 select a persona');
+        term.eraseLineAfter();
+        currentY++;
+        if (pps.personas.length === 0) {
+            clearLine(currentY);
+            moveTo(4, currentY);
+            term.dim('No personas found');
+            term.eraseLineAfter();
+            currentY++;
+            for (let y = currentY; y < startY + totalRows; y++) {
+                clearLine(y);
+            }
+            return;
+        }
+        // Persona list
+        const listRows = Math.max(0, totalRows - 2); // title + hint bar
+        // Scroll adjustment
+        let scrollOffset = pps.scrollOffset;
+        if (pps.selectedIndex < scrollOffset) {
+            scrollOffset = pps.selectedIndex;
+        }
+        else if (pps.selectedIndex >= scrollOffset + listRows) {
+            scrollOffset = pps.selectedIndex - listRows + 1;
+        }
+        for (let i = 0; i < listRows; i++) {
+            clearLine(currentY);
+            const idx = scrollOffset + i;
+            if (idx < pps.personas.length) {
+                const p = pps.personas[idx];
+                const isSelected = idx === pps.selectedIndex;
+                const status = p.compiled ? '' : ' [not compiled]';
+                const desc = truncate(p.description, Math.max(10, _cols - p.name.length - status.length - 10));
+                const line = `${p.name}  ${desc}${status}`;
+                moveTo(2, currentY);
+                if (isSelected) {
+                    term.bgCyan.black('> ' + truncate(line, Math.max(1, _cols - 6)));
+                    term.styleReset();
+                }
+                else {
+                    term('  ');
+                    if (p.compiled) {
+                        term.cyan(p.name);
+                    }
+                    else {
+                        term.dim(p.name);
+                    }
+                    term('  ');
+                    term.dim(desc);
+                    if (!p.compiled) {
+                        term.yellow(status);
+                    }
+                }
+            }
+            term.eraseLineAfter();
+            currentY++;
+        }
+        // Hint bar
+        clearLine(currentY);
+        moveTo(2, currentY);
+        term.bgWhite.black(' Enter ');
+        term.styleReset();
+        term.dim(' spawn  ');
+        term.bgWhite.black(' Esc ');
+        term.styleReset();
+        term.dim(' cancel');
+        term.styleReset();
+        term.eraseLineAfter();
+    }
     return {
         get layout() {
             return _layout;
@@ -595,7 +1022,7 @@ export function createMuxRenderer(term, cols, rows, deps) {
         redrawCommandArea() {
             recalcLayout();
             const mode = deps.getMode();
-            if (mode === 'command' || mode === 'picker') {
+            if (mode === 'command' || isPickerMode(mode)) {
                 // Repaint viewport first to clear stale overlay rows from a
                 // previously larger overlay (e.g., after resolving an escalation).
                 drawPtyViewport();
@@ -612,6 +1039,7 @@ export function createMuxRenderer(term, cols, rows, deps) {
             _splash?.resize(_cols, _layout.ptyViewportRows, _layout.ptyViewportY, activeOverlayRows());
         },
         destroy() {
+            _destroyed = true;
             tearDownSplash();
             if (renderTimeout) {
                 clearTimeout(renderTimeout);
@@ -634,7 +1062,7 @@ export function createMuxRenderer(term, cols, rows, deps) {
             drawFooter();
         },
         scheduleRedraw() {
-            if (renderScheduled)
+            if (_destroyed || renderScheduled)
                 return;
             renderScheduled = true;
             const elapsed = Date.now() - lastRenderTime;
@@ -842,9 +1270,36 @@ function formatArgValue(value) {
         return String(value);
     return JSON.stringify(value);
 }
-function truncate(str, maxLen) {
+export function truncate(str, maxLen) {
     if (str.length <= maxLen)
         return str;
     return str.slice(0, maxLen - 1) + '\u2026';
 }
+/**
+ * Computes which tab labels to render in the escalation tab bar,
+ * truncating the focused tab if needed. Returns an array of
+ * { label, isFocused } entries that fit within `width`.
+ *
+ * Exported for testing.
+ */
+export function fitTabLabels(tabs, focusedDisplayNumber, width) {
+    const result = [];
+    let written = 0;
+    for (const tab of tabs) {
+        const isFocused = tab.displayNumber === focusedDisplayNumber;
+        const cellWidth = tab.label.length + 2; // +2 for surrounding spaces
+        if (written + cellWidth > width) {
+            // Truncate the focused tab to fit; need at least 3 cols: space + 1 char + space
+            const remaining = width - written;
+            if (isFocused && remaining >= 3) {
+                const truncatedLabel = truncate(tab.label, remaining - 2);
+                result.push({ label: truncatedLabel, isFocused: true });
+            }
+            break;
+        }
+        result.push({ label: tab.label, isFocused });
+        written += cellWidth;
+    }
+    return result;
+}
 //# sourceMappingURL=mux-renderer.js.map