recomposable 1.1.2 → 1.1.3

package/dist/lib/renderer.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CLEAR_EOS = exports.CLEAR_EOL = void 0;
 exports.visLen = visLen;
 exports.padVisible = padVisible;
 exports.padVisibleStart = padVisibleStart;
@@ -13,6 +14,7 @@ exports.renderLegend = renderLegend;
 exports.renderListView = renderListView;
 exports.truncateLine = truncateLine;
 exports.highlightSearchInLine = highlightSearchInLine;
+exports.wrapPlainLine = wrapPlainLine;
 exports.renderLogView = renderLogView;
 exports.renderExecView = renderExecView;
 const state_1 = require("./state");
@@ -46,7 +48,21 @@ function padVisibleStart(str, width) {
     const pad = Math.max(0, width - visLen(str));
     return ' '.repeat(pad) + str;
 }
+exports.CLEAR_EOL = `${ESC}K`;
+exports.CLEAR_EOS = `${ESC}J`;
 const PATTERN_COLORS = [FG_YELLOW, FG_RED, FG_CYAN, FG_WHITE];
+function logLineColor(line, patterns) {
+    let color = null;
+    for (let pi = 0; pi < patterns.length; pi++) {
+        if (line.includes(patterns[pi])) {
+            color = PATTERN_COLORS[pi % PATTERN_COLORS.length];
+        }
+    }
+    return color;
+}
+// Cached separator line — recomputed only when terminal width changes
+let cachedSepColumns = 0;
+let cachedSepLine = '';
 function patternLabel(pattern) {
     return pattern.replace(/^[\[\(\{<]/, '').replace(/[\]\)\}>]$/, '');
 }
@@ -76,7 +92,14 @@ function relativeTime(ts) {
     return `${DIM}${days}d ago${RESET}`;
 }
 function clearScreen() {
-    return `${ESC}2J${ESC}H${ESC}?25l`;
+    return `${ESC}H${ESC}?25l`;
+}
+function separatorLine(columns) {
+    if (columns !== cachedSepColumns) {
+        cachedSepColumns = columns;
+        cachedSepLine = ` ${FG_GRAY}${'\u2500'.repeat(Math.max(0, columns - 2))}${RESET}`;
+    }
+    return cachedSepLine;
 }
 function showCursor() {
     return `${ESC}?25h`;
@@ -133,7 +156,7 @@ function formatMem(bytes) {
     return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)}G`;
 }
 function renderLegend(opts = {}) {
-    const { logPanelActive = false, logsScrollMode = false, noCacheActive = false, watchActive = false, execMode = false, execInline = false } = opts;
+    const { logPanelActive = false, logsScrollMode = false, noCacheActive = false, noDepsActive = false, watchActive = false, execMode = false, execInline = false } = opts;
     const item = (text, active) => {
         if (active)
             return `${BG_HIGHLIGHT} ${text} ${RESET}`;
@@ -159,8 +182,9 @@ function renderLegend(opts = {}) {
         ].join('  ');
     }
     if (logsScrollMode) {
+        const hasSearch = opts.hasLogSearch || false;
         return [
-            item('[Esc] back', false),
+            item(hasSearch ? '[Esc] clear search' : '[Esc] back', false),
             item('[j/k] scroll', false),
             item('[G] bottom', false),
             item('[gg] top', false),
@@ -176,6 +200,7 @@ function renderLegend(opts = {}) {
         item('Sto[P]', false),
         item('[W]atch', watchActive),
         item('[N]o cache', noCacheActive),
+        item('n[O] deps', noDepsActive),
         item('[e]xec', false),
         item('[F]ull logs', false),
         item('[L]og panel', logPanelActive),
@@ -186,6 +211,7 @@ function renderListView(state) {
     const columns = process.stdout.columns ?? 80;
     const rows = process.stdout.rows ?? 24;
     const patterns = state.config.logScanPatterns || [];
+    const sep = separatorLine(columns);
     const buf = [];
     for (const line of LOGO) {
         buf.push(line);
@@ -193,13 +219,13 @@ function renderListView(state) {
     const watchActive = state.watching.size > 0;
     const help = state.execActive
         ? renderLegend({ execInline: true })
-        : renderLegend({ logPanelActive: state.showBottomLogs, noCacheActive: state.noCache, watchActive });
-    buf.push(` ${FG_GRAY}${'\u2500'.repeat(Math.max(0, columns - 2))}${RESET}`);
+        : renderLegend({ logPanelActive: state.showBottomLogs, noCacheActive: state.noCache, noDepsActive: state.noDeps, watchActive });
+    buf.push(sep);
     buf.push(` ${help}`);
     const headerHeight = buf.length;
     const bottomBuf = [];
     if (state.execActive && state.execService) {
-        bottomBuf.push(` ${FG_GRAY}${'\u2500'.repeat(Math.max(0, columns - 2))}${RESET}`);
+        bottomBuf.push(sep);
         const runningIndicator = state.execChild ? `${FG_YELLOW}running${RESET}` : `${FG_GREEN}ready${RESET}`;
         const cwdInfo = state.execCwd ? `  ${DIM}${state.execCwd}${RESET}` : '';
         bottomBuf.push(` ${FG_CYAN}exec ${BOLD}${state.execService}${RESET}  ${runningIndicator}${cwdInfo}`);
@@ -217,7 +243,7 @@ function renderListView(state) {
             // Check for cascade progress
             const cascade = state.cascading.get(sk);
             if (cascade) {
-                bottomBuf.push(` ${FG_GRAY}${'\u2500'.repeat(Math.max(0, columns - 2))}${RESET}`);
+                bottomBuf.push(sep);
                 bottomBuf.push(` ${FG_YELLOW}cascading ${BOLD}${selEntry.service}${RESET}`);
                 for (let si = 0; si < cascade.steps.length; si++) {
                     const step = cascade.steps[si];
@@ -240,22 +266,36 @@ function renderListView(state) {
             const info = state.bottomLogLines.get(sk);
             if (info) {
                 if (!cascade) {
-                    bottomBuf.push(` ${FG_GRAY}${'\u2500'.repeat(Math.max(0, columns - 2))}${RESET}`);
+                    bottomBuf.push(sep);
                 }
-                const actionColor = info.action === 'rebuilding' || info.action === 'restarting' || info.action === 'stopping' || info.action === 'starting' || info.action === 'cascading' ? FG_YELLOW
-                    : info.action === 'watching' ? FG_CYAN : FG_GREEN;
-                let headerLine = ` ${actionColor}${info.action} ${BOLD}${info.service}${RESET}`;
+                const isFailed = info.action === 'build_failed' || info.action === 'restart_failed' || info.action === 'stop_failed' || info.action === 'start_failed';
+                const actionColor = isFailed ? FG_RED
+                    : info.action === 'rebuilding' || info.action === 'restarting' || info.action === 'stopping' || info.action === 'starting' || info.action === 'cascading' ? FG_YELLOW
+                        : info.action === 'watching' ? FG_CYAN : FG_GREEN;
+                const actionLabel = isFailed ? info.action.replace('_', ' ').toUpperCase() : info.action;
+                let headerLine = ` ${actionColor}${actionLabel} ${BOLD}${info.service}${RESET}`;
                 const bq = state.bottomSearchQuery || '';
                 if (bq && !state.bottomSearchActive) {
-                    const matchCount = info.lines.filter(l => l.toLowerCase().includes(bq.toLowerCase())).length;
-                    headerLine += matchCount > 0
-                        ? `  ${DIM}search: "${bq}" (${matchCount} match${matchCount !== 1 ? 'es' : ''})${RESET}`
-                        : `  ${FG_RED}search: "${bq}" (no matches)${RESET}`;
+                    if (state.bottomSearchLoading) {
+                        headerLine += `  ${FG_YELLOW}searching "${bq}"...${RESET}`;
+                    }
+                    else {
+                        const totalMatches = state.bottomSearchTotalMatches;
+                        headerLine += totalMatches > 0
+                            ? `  ${DIM}search: "${bq}" (${totalMatches} match${totalMatches !== 1 ? 'es' : ''} in full log)${RESET}`
+                            : `  ${FG_RED}search: "${bq}" (no matches)${RESET}`;
+                    }
                 }
                 bottomBuf.push(headerLine);
+                if (info.lines.length === 0 && info.action === 'logs') {
+                    bottomBuf.push(`  ${DIM}loading...${RESET}`);
+                }
                 const searchQuery = bq && !state.bottomSearchActive ? bq : '';
-                for (const line of info.lines) {
+                const maxBottomLines = state.config.bottomLogCount || 10;
+                const visibleLines = info.lines.slice(-maxBottomLines);
+                for (const line of visibleLines) {
                     let coloredLine = line.substring(0, columns - 4);
+                    const lineColor = logLineColor(coloredLine, patterns) || FG_GRAY;
                     if (searchQuery) {
                         const lowerLine = coloredLine.toLowerCase();
                         const lowerQ = searchQuery.toLowerCase();
@@ -269,20 +309,13 @@ function renderListView(state) {
                                     break;
                                 }
                                 result += coloredLine.substring(pos, idx);
-                                result += `${REVERSE}${FG_YELLOW}${coloredLine.substring(idx, idx + searchQuery.length)}${RESET}${FG_GRAY}`;
+                                result += `${REVERSE}${FG_YELLOW}${coloredLine.substring(idx, idx + searchQuery.length)}${RESET}${lineColor}`;
                                 pos = idx + searchQuery.length;
                             }
                             coloredLine = result;
                         }
                     }
-                    for (let pi = 0; pi < patterns.length; pi++) {
-                        const p = patterns[pi];
-                        if (coloredLine.includes(p)) {
-                            const color = PATTERN_COLORS[pi % PATTERN_COLORS.length];
-                            coloredLine = coloredLine.split(p).join(`${color}${p}${RESET}${FG_GRAY}`);
-                        }
-                    }
-                    bottomBuf.push(`  ${FG_GRAY}${coloredLine}${RESET}`);
+                    bottomBuf.push(`  ${lineColor}${coloredLine}${RESET}`);
                 }
                 if (state.bottomSearchActive) {
                     bottomBuf.push(`${BOLD}/${RESET}${state.bottomSearchQuery}${BOLD}_${RESET}`);
@@ -291,100 +324,113 @@ function renderListView(state) {
         }
     }
     const bottomHeight = bottomBuf.length;
-    const lines = [];
+    // Pass 1: build lightweight stubs (type + index only, no text computation)
+    const stubs = [];
     let currentGroup = -1;
     for (let i = 0; i < state.flatList.length; i++) {
         const entry = state.flatList[i];
         if (entry.groupIdx !== currentGroup) {
             currentGroup = entry.groupIdx;
-            const group = state.groups[entry.groupIdx];
-            if (lines.length > 0)
-                lines.push({ type: 'blank', text: '' });
-            const label = ` ${BOLD}${group.label}${RESET}`;
-            if (group.error) {
-                lines.push({ type: 'header', text: `${label}  ${FG_RED}(${group.error})${RESET}` });
-            }
-            else {
-                lines.push({ type: 'header', text: label });
-            }
-            let colHeader = `${DIM}     ${'SERVICE'.padEnd(24)} ${'STATUS'.padEnd(22)} ${'BUILT'.padEnd(12)} ${'RESTARTED'.padEnd(12)}`;
-            for (const p of patterns)
-                colHeader += patternLabel(p).padStart(5) + ' ';
-            colHeader += `   ${'CPU/MEM'.padStart(16)} ${'PORTS'.padEnd(14)}`;
-            lines.push({ type: 'colheader', text: colHeader + RESET });
-        }
-        const sk = (0, state_1.statusKey)(entry.file, entry.service);
-        const st = state.statuses.get(sk);
-        const rebuilding = state.rebuilding.has(sk);
-        const restarting = state.restarting.has(sk);
-        const stopping = state.stopping.has(sk);
-        const starting = state.starting.has(sk);
-        const isWatching = state.watching.has(sk);
-        const isCascading = state.cascading.has(sk);
-        const icon = statusIcon(st, rebuilding || isCascading, restarting, stopping, starting);
-        const stext = statusText(st, rebuilding || isCascading, restarting, stopping, starting);
-        const watchIndicator = isWatching ? `${FG_CYAN}W${RESET}` : ' ';
-        const name = entry.service.padEnd(24);
-        const statusPadded = padVisible(stext, 22);
-        let cpuMemStr;
-        const stats = state.containerStats ? state.containerStats.get(sk) : null;
-        if (stats && st && st.state === 'running') {
-            const cpu = stats.cpuPercent;
-            const mem = stats.memUsageBytes;
-            const cpuWarn = state.config.cpuWarnThreshold || 50;
-            const cpuDanger = state.config.cpuDangerThreshold || 100;
-            const memWarn = (state.config.memWarnThreshold || 512) * 1024 * 1024;
-            const memDanger = (state.config.memDangerThreshold || 1024) * 1024 * 1024;
-            let color = DIM;
-            if (cpu > cpuDanger || mem > memDanger)
-                color = FG_RED;
-            else if (cpu > cpuWarn || mem > memWarn)
-                color = FG_YELLOW;
-            const cpuText = cpu.toFixed(1) + '%';
-            const memText = formatMem(mem);
-            cpuMemStr = padVisible(`${color}${cpuText} / ${memText}${RESET}`, 16);
-        }
-        else {
-            cpuMemStr = padVisible(`${DIM}-${RESET}`, 16);
-        }
-        let portsStr;
-        if (st && st.ports && st.ports.length > 0) {
-            const portsText = st.ports.map(p => p.published).join(' ');
-            portsStr = padVisible(`${DIM}${portsText}${RESET}`, 14);
-        }
-        else {
-            portsStr = padVisible(`${DIM}-${RESET}`, 14);
-        }
-        const built = padVisible(relativeTime(st ? st.createdAt : null), 12);
-        const restarted = padVisible(relativeTime(st ? st.startedAt : null), 12);
-        const pointer = i === state.cursor ? `${REVERSE}` : '';
-        const endPointer = i === state.cursor ? `${RESET}` : '';
-        let countsStr = '';
-        const logCounts = state.logCounts.get(sk);
-        for (let pi = 0; pi < patterns.length; pi++) {
-            const count = logCounts ? (logCounts.get(patterns[pi]) || 0) : 0;
-            const color = count > 0 ? PATTERN_COLORS[pi % PATTERN_COLORS.length] : DIM;
-            const countText = count > 0 ? `${color}${count}${RESET}` : `${color}-${RESET}`;
-            countsStr += padVisibleStart(countText, 5) + ' ';
+            if (stubs.length > 0)
+                stubs.push({ type: 'blank', flatIdx: -1, groupIdx: entry.groupIdx });
+            stubs.push({ type: 'header', flatIdx: -1, groupIdx: entry.groupIdx });
+            stubs.push({ type: 'colheader', flatIdx: -1, groupIdx: entry.groupIdx });
         }
-        lines.push({
-            type: 'service',
-            text: `${pointer}  ${watchIndicator}${icon} ${FG_WHITE}${name}${RESET} ${statusPadded} ${built} ${restarted}${countsStr}  ${cpuMemStr} ${portsStr}${endPointer}`,
-            flatIdx: i,
-        });
+        stubs.push({ type: 'service', flatIdx: i, groupIdx: entry.groupIdx });
     }
     const availableRows = Math.max(3, rows - headerHeight - bottomHeight);
-    const cursorLineIdx = lines.findIndex(l => l.type === 'service' && l.flatIdx === state.cursor);
-    if (cursorLineIdx < state.scrollOffset) {
-        state.scrollOffset = cursorLineIdx;
+    // Find cursor position in stubs
+    const cursorStubIdx = stubs.findIndex(s => s.type === 'service' && s.flatIdx === state.cursor);
+    if (cursorStubIdx < state.scrollOffset) {
+        state.scrollOffset = cursorStubIdx;
     }
-    else if (cursorLineIdx >= state.scrollOffset + availableRows) {
-        state.scrollOffset = cursorLineIdx - availableRows + 1;
+    else if (cursorStubIdx >= state.scrollOffset + availableRows) {
+        state.scrollOffset = cursorStubIdx - availableRows + 1;
     }
-    state.scrollOffset = Math.max(0, Math.min(lines.length - availableRows, state.scrollOffset));
-    const visible = lines.slice(state.scrollOffset, state.scrollOffset + availableRows);
-    for (const line of visible) {
-        buf.push(line.text || '');
+    state.scrollOffset = Math.max(0, Math.min(stubs.length - availableRows, state.scrollOffset));
+    // Pass 2: render text only for visible stubs
+    const visEnd = Math.min(stubs.length, state.scrollOffset + availableRows);
+    for (let si = state.scrollOffset; si < visEnd; si++) {
+        const stub = stubs[si];
+        switch (stub.type) {
+            case 'blank':
+                buf.push('');
+                break;
+            case 'header': {
+                const group = state.groups[stub.groupIdx];
+                const label = ` ${BOLD}${group.label}${RESET}`;
+                buf.push(group.error ? `${label}  ${FG_RED}(${group.error})${RESET}` : label);
+                break;
+            }
+            case 'colheader': {
+                let colHeader = `${DIM}     ${'SERVICE'.padEnd(24)} ${'STATUS'.padEnd(22)} ${'BUILT'.padEnd(12)} ${'RESTARTED'.padEnd(12)}`;
+                for (const p of patterns)
+                    colHeader += patternLabel(p).padStart(5) + ' ';
+                colHeader += `   ${'CPU/MEM'.padStart(16)} ${'PORTS'.padEnd(14)}`;
+                buf.push(colHeader + RESET);
+                break;
+            }
+            case 'service': {
+                const i = stub.flatIdx;
+                const entry = state.flatList[i];
+                const sk = (0, state_1.statusKey)(entry.file, entry.service);
+                const st = state.statuses.get(sk);
+                const rebuilding = state.rebuilding.has(sk);
+                const restarting = state.restarting.has(sk);
+                const stopping = state.stopping.has(sk);
+                const starting = state.starting.has(sk);
+                const isWatching = state.watching.has(sk);
+                const isCascading = state.cascading.has(sk);
+                const icon = statusIcon(st, rebuilding || isCascading, restarting, stopping, starting);
+                const stext = statusText(st, rebuilding || isCascading, restarting, stopping, starting);
+                const watchIndicator = isWatching ? `${FG_CYAN}W${RESET}` : ' ';
+                const name = entry.service.padEnd(24);
+                const statusPadded = padVisible(stext, 22);
+                let cpuMemStr;
+                const stats = state.containerStats ? state.containerStats.get(sk) : null;
+                if (stats && st && st.state === 'running') {
+                    const cpu = stats.cpuPercent;
+                    const mem = stats.memUsageBytes;
+                    const cpuWarn = state.config.cpuWarnThreshold || 50;
+                    const cpuDanger = state.config.cpuDangerThreshold || 100;
+                    const memWarn = (state.config.memWarnThreshold || 512) * 1024 * 1024;
+                    const memDanger = (state.config.memDangerThreshold || 1024) * 1024 * 1024;
+                    let color = DIM;
+                    if (cpu > cpuDanger || mem > memDanger)
+                        color = FG_RED;
+                    else if (cpu > cpuWarn || mem > memWarn)
+                        color = FG_YELLOW;
+                    const cpuText = cpu.toFixed(1) + '%';
+                    const memText = formatMem(mem);
+                    cpuMemStr = padVisible(`${color}${cpuText} / ${memText}${RESET}`, 16);
+                }
+                else {
+                    cpuMemStr = padVisible(`${DIM}-${RESET}`, 16);
+                }
+                let portsStr;
+                if (st && st.ports && st.ports.length > 0) {
+                    const portsText = st.ports.map(p => p.published).join(' ');
+                    portsStr = padVisible(`${DIM}${portsText}${RESET}`, 14);
+                }
+                else {
+                    portsStr = padVisible(`${DIM}-${RESET}`, 14);
+                }
+                const built = padVisible(relativeTime(st ? st.createdAt : null), 12);
+                const restarted = padVisible(relativeTime(st ? st.startedAt : null), 12);
+                const pointer = i === state.cursor ? `${REVERSE}` : '';
+                const endPointer = i === state.cursor ? `${RESET}` : '';
+                let countsStr = '';
+                const logCounts = state.logCounts.get(sk);
+                for (let pi = 0; pi < patterns.length; pi++) {
+                    const count = logCounts ? (logCounts.get(patterns[pi]) || 0) : 0;
+                    const color = count > 0 ? PATTERN_COLORS[pi % PATTERN_COLORS.length] : DIM;
+                    const countText = count > 0 ? `${color}${count}${RESET}` : `${color}-${RESET}`;
+                    countsStr += padVisibleStart(countText, 5) + ' ';
+                }
+                buf.push(`${pointer}  ${watchIndicator}${icon} ${FG_WHITE}${name}${RESET} ${statusPadded} ${built} ${restarted}${countsStr}  ${cpuMemStr} ${portsStr}${endPointer}`);
+                break;
+            }
+        }
     }
     const usedLines = buf.length + bottomHeight;
     const paddingNeeded = Math.max(0, rows - usedLines);
@@ -392,7 +438,7 @@ function renderListView(state) {
         buf.push('');
     }
     buf.push(...bottomBuf);
-    return buf.join('\n');
+    return buf.join(exports.CLEAR_EOL + '\n');
 }
 function truncateLine(str, maxWidth) {
     let visPos = 0;
@@ -418,11 +464,12 @@ function truncateLine(str, maxWidth) {
     }
     return str;
 }
-function highlightSearchInLine(line, query) {
+function highlightSearchInLine(line, query, baseColor) {
     if (!query)
         return line;
     const lowerLine = line.toLowerCase();
     const lowerQuery = query.toLowerCase();
+    const restore = baseColor || '';
     let result = '';
     let pos = 0;
     while (pos < line.length) {
@@ -432,11 +479,20 @@ function highlightSearchInLine(line, query) {
             break;
         }
         result += line.substring(pos, idx);
-        result += `${REVERSE}${FG_YELLOW}${line.substring(idx, idx + query.length)}${RESET}`;
+        result += `${REVERSE}${FG_YELLOW}${line.substring(idx, idx + query.length)}${RESET}${restore}`;
         pos = idx + query.length;
     }
     return result;
 }
+function wrapPlainLine(line, width) {
+    if (width <= 0 || line.length <= width)
+        return [line];
+    const result = [];
+    for (let i = 0; i < line.length; i += width) {
+        result.push(line.substring(i, i + width));
+    }
+    return result;
+}
 function renderLogView(state) {
     const columns = process.stdout.columns ?? 80;
     const rows = process.stdout.rows ?? 24;
@@ -444,17 +500,43 @@ function renderLogView(state) {
     for (const line of LOGO) {
         buf.push(line);
     }
-    buf.push(` ${FG_GRAY}${'\u2500'.repeat(Math.max(0, columns - 2))}${RESET}`);
-    buf.push(` ${renderLegend({ logsScrollMode: true })}`);
+    buf.push(separatorLine(columns));
+    const hasLogSearch = !!state.logSearchQuery && !state.logSearchActive;
+    buf.push(` ${renderLegend({ logsScrollMode: true, hasLogSearch })}`);
     const entry = state.flatList[state.cursor];
     const serviceName = entry ? entry.service : '???';
     const totalLines = state.logLines.length;
-    let statusLine = ` ${FG_GREEN}full logs ${BOLD}${serviceName}${RESET}`;
-    const scrollStatus = state.logAutoScroll
-        ? `${FG_GREEN}live${RESET}`
-        : `${FG_YELLOW}paused ${DIM}line ${Math.max(1, totalLines - state.logScrollOffset)} / ${totalLines}${RESET}`;
+    let statusLine;
+    if (state.logBuildKey) {
+        const buildInfo = state.bottomLogLines.get(state.logBuildKey);
+        const isBuilding = state.rebuilding.has(state.logBuildKey) || state.cascading.has(state.logBuildKey);
+        if (buildInfo && buildInfo.action === 'build_failed') {
+            statusLine = ` ${FG_RED}build failed ${BOLD}${serviceName}${RESET}`;
+        }
+        else if (isBuilding) {
+            statusLine = ` ${FG_YELLOW}rebuilding ${BOLD}${serviceName}${RESET}`;
+        }
+        else {
+            statusLine = ` ${FG_GREEN}build logs ${BOLD}${serviceName}${RESET}`;
+        }
+    }
+    else {
+        statusLine = ` ${FG_GREEN}full logs ${BOLD}${serviceName}${RESET}`;
+    }
+    let scrollStatus;
+    if (state.logAutoScroll) {
+        scrollStatus = `${FG_GREEN}live${RESET}`;
+    }
+    else {
+        const currentLine = Math.max(1, totalLines - state.logScrollOffset);
+        const pct = totalLines > 0 ? Math.round((currentLine / totalLines) * 100) : 100;
+        scrollStatus = `${FG_YELLOW}paused ${DIM}line ${currentLine} / ${totalLines} (${pct}%)${RESET}`;
+    }
     statusLine += `  ${scrollStatus}`;
-    if (state.logSearchQuery && state.logSearchMatches.length > 0) {
+    if (state.logSearchPending || state.logHistoryLoading) {
+        statusLine += `  ${FG_YELLOW}loading history...${RESET}`;
+    }
+    else if (state.logSearchQuery && state.logSearchMatches.length > 0) {
         statusLine += `  ${DIM}match ${state.logSearchMatchIdx + 1}/${state.logSearchMatches.length}${RESET}`;
     }
     else if (state.logSearchQuery && state.logSearchMatches.length === 0) {
@@ -469,18 +551,38 @@ function renderLogView(state) {
         endLine = totalLines;
     }
     else {
-        endLine = Math.max(0, totalLines - state.logScrollOffset);
+        endLine = Math.max(Math.min(availableRows, totalLines), totalLines - state.logScrollOffset);
+    }
+    if (totalLines === 0) {
+        buf.push(`  ${DIM}loading...${RESET}`);
     }
-    const startLine = Math.max(0, endLine - availableRows);
     const searchQuery = state.logSearchQuery || '';
     const matchSet = searchQuery ? new Set(state.logSearchMatches) : null;
-    for (let i = startLine; i < endLine; i++) {
-        let line = state.logLines[i];
-        if (matchSet && matchSet.has(i)) {
-            line = highlightSearchInLine(line, searchQuery);
+    const patterns = state.config.logScanPatterns || [];
+    // Build display lines by wrapping log lines, working backwards from endLine
+    const displayLines = [];
+    for (let i = endLine - 1; i >= 0 && displayLines.length < availableRows; i--) {
+        const line = state.logLines[i];
+        const wrapped = wrapPlainLine(line, columns);
+        const isMatch = matchSet && matchSet.has(i);
+        const lineColor = logLineColor(line, patterns);
+        for (let w = wrapped.length - 1; w >= 0; w--) {
+            let segment = wrapped[w];
+            if (isMatch) {
+                segment = highlightSearchInLine(segment, searchQuery, lineColor || undefined);
+            }
+            if (lineColor) {
+                segment = `${lineColor}${segment}${RESET}`;
+            }
+            displayLines.push(segment);
         }
-        buf.push(truncateLine(line, columns));
     }
+    displayLines.reverse();
+    // Trim to fit available rows (keep the bottom portion)
+    const trimmed = displayLines.length > availableRows
+        ? displayLines.slice(displayLines.length - availableRows)
+        : displayLines;
+    buf.push(...trimmed);
     const targetRows = rows - bottomReserved;
     for (let i = buf.length; i < targetRows; i++) {
         buf.push('');
@@ -488,7 +590,7 @@ function renderLogView(state) {
     if (state.logSearchActive) {
         buf.push(`${BOLD}/${RESET}${state.logSearchQuery}${BOLD}_${RESET}`);
     }
-    return buf.join('\n');
+    return buf.join(exports.CLEAR_EOL + '\n');
 }
 function renderExecView(state) {
     const columns = process.stdout.columns ?? 80;
@@ -497,7 +599,7 @@ function renderExecView(state) {
     for (const line of LOGO) {
         buf.push(line);
     }
-    buf.push(` ${FG_GRAY}${'\u2500'.repeat(Math.max(0, columns - 2))}${RESET}`);
+    buf.push(separatorLine(columns));
     buf.push(` ${renderLegend({ execMode: true })}`);
     const serviceName = state.execService || '???';
     const runningIndicator = state.execChild ? `${FG_YELLOW}running${RESET}` : `${FG_GREEN}ready${RESET}`;
@@ -519,6 +621,6 @@ function renderExecView(state) {
     }
     // Command prompt
     buf.push(`${FG_GREEN}$ ${RESET}${state.execInput}${BOLD}_${RESET}`);
-    return buf.join('\n');
+    return buf.join(exports.CLEAR_EOL + '\n');
 }
 //# sourceMappingURL=renderer.js.map