Fix background log previews

Author: dannote

extensions/background.ts

@@ -9,20 +9,22 @@
 
 import type { ExtensionAPI, ExtensionContext } from '@earendil-works/pi-coding-agent'
 import { DynamicBorder, truncateTail } from '@earendil-works/pi-coding-agent'
-import { Container, Text } from '@earendil-works/pi-tui'
+import { Container, Text, visibleWidth } from '@earendil-works/pi-tui'
 import { errorMessage } from './shared/errors'
 import {
   firstText,
   meta,
-  primary,
   renderError,
   renderLines,
   renderMuted,
+  renderTextLinesPreview,
   renderToolCall,
   title,
+  truncateLine,
   toolError,
   toolText
 } from './shared/render'
+import { compactLines, normalizeTerminalOutput } from './shared/format'
 import { Type } from 'typebox'
 import { spawn, spawnSync } from 'child_process'
 import * as crypto from 'crypto'
@@ -223,22 +225,6 @@ function stopProcess(projectDir: string, name: string): void {
   }
 }
 
-function stripProgressNoise(text: string): string {
-  // eslint-disable-next-line no-control-regex
-  let clean = text.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, '')
-
-  clean = clean
-    .split('\n')
-    .map((line) => {
-      if (!line.includes('\r')) return line
-      const parts = line.split('\r')
-      return parts[parts.length - 1]
-    })
-    .join('\n')
-
-  return clean
-}
-
 function readLogs(projectDir: string, name: string, lines: number): string {
   const dir = findProcessDir(projectDir, name)
   if (!dir) {
@@ -254,7 +240,7 @@ function readLogs(projectDir: string, name: string, lines: number): string {
     encoding: 'utf8'
   })
 
-  const raw = stripProgressNoise(result.stdout || result.stderr || '')
+  const raw = normalizeTerminalOutput(result.stdout || result.stderr || '')
   const truncation = truncateTail(raw, { maxLines: lines })
 
   if (truncation.truncated) {
@@ -364,15 +350,39 @@ function updateStatus(ctx: ExtensionContext) {
         for (const proc of running) {
           const displayName = getDisplayName(proc)
           try {
-            const logs = readLogs(ctx.cwd, proc.name, 2)
-            container.addChild(new Text(theme.fg('muted', ` ${displayName} `), 0, 0))
-            if (logs.trim()) {
-              for (const line of logs.trim().split('\n')) {
-                container.addChild(new Text(theme.fg('dim', ` ${line}`), 0, 0))
-              }
+            const logs = readLogs(ctx.cwd, proc.name, 10)
+            const lines = compactLines(logs)
+            const latest = lines.at(-1)
+            const hidden = Math.max(0, lines.length - 1)
+            container.addChild({
+              render: (width) => [
+                truncateLine(theme.fg('muted', ` ${displayName} `), width, theme.fg('muted', '…'))
+              ],
+              invalidate: () => undefined
+            })
+            if (latest) {
+              container.addChild({
+                render: (width) => {
+                  const suffix = hidden > 0 ? ` ${theme.fg('muted', `… ${hidden} more lines`)}` : ''
+                  const suffixWidth = visibleWidth(suffix)
+                  if (suffixWidth >= width)
+                    return [truncateLine(suffix, width, theme.fg('muted', '…'))]
+                  const available = Math.max(1, width - suffixWidth)
+                  return [
+                    truncateLine(theme.fg('dim', ` ${latest}`), available, theme.fg('dim', '…')) +
+                      suffix
+                  ]
+                },
+                invalidate: () => undefined
+              })
             }
           } catch {
-            container.addChild(new Text(theme.fg('muted', ` ${displayName} `), 0, 0))
+            container.addChild({
+              render: (width) => [
+                truncateLine(theme.fg('muted', ` ${displayName} `), width, theme.fg('muted', '…'))
+              ],
+              invalidate: () => undefined
+            })
             container.addChild(new Text(theme.fg('dim', ' (no logs)'), 0, 0))
           }
         }
@@ -635,20 +645,23 @@ export default function (pi: ExtensionAPI) {
       const safeArgs = args ?? {}
       return renderToolCall(theme, 'bg logs', {
         segments: [{ text: safeArgs.name }],
-        suffix: safeArgs.lines ? `${safeArgs.lines} lines` : undefined
+        suffix: safeArgs.lines ? `last ${safeArgs.lines}` : undefined
       })
     },
 
-    renderResult(result, _options, theme) {
+    renderResult(result, { expanded }, theme) {
       const details = result.details as LogsDetails
       if (details.error) return renderError(firstText(result, 'Error'), theme)
-      if (!details.logs.trim()) return renderMuted('(empty)', theme)
-      const preview = details.logs.split('\n').slice(-3)
-      return renderLines([
-        ...renderProcessRow(theme, details.name, `logs  last ${preview.length}`),
-        '',
-        ...preview.map((line) => primary(line, theme))
-      ])
+      const lines = compactLines(details.logs)
+      if (lines.length === 0) return renderMuted('(empty)', theme)
+      return renderTextLinesPreview(lines, theme, {
+        expanded,
+        compactLimit: 3,
+        mode: 'tail',
+        hiddenUnit: 'hidden',
+        inlineHidden: true,
+        truncationMarker: theme.fg('toolOutput', '…')
+      })
     }
   })
 }

extensions/shared/format.test.ts

@@ -1,6 +1,14 @@
 import { describe, expect, test } from 'vitest'
 
-import { compactText, formatBytes, formatDuration } from './format'
+import {
+  compactLines,
+  compactText,
+  formatBytes,
+  formatDuration,
+  normalizeTerminalOutput,
+  stripAnsi,
+  stripCarriageReturnProgress
+} from './format'
 
 describe('formatBytes', () => {
   test('formats byte counts for human metadata', () => {
@@ -22,3 +30,21 @@ describe('compactText', () => {
     expect(compactText('hello world', 6)).toBe('hello…')
   })
 })
+
+describe('terminal output helpers', () => {
+  test('strips ansi escape sequences', () => {
+    expect(stripAnsi('\u001b[31mred\u001b[0m')).toBe('red')
+  })
+
+  test('keeps the final carriage-return progress frame', () => {
+    expect(stripCarriageReturnProgress('10%\r20%\ndone')).toBe('20%\ndone')
+  })
+
+  test('normalizes terminal output', () => {
+    expect(normalizeTerminalOutput('\u001b[32m10%\r20%\u001b[0m')).toBe('20%')
+  })
+
+  test('compacts non-empty terminal lines', () => {
+    expect(compactLines('one\n\n two\t three ', 20)).toEqual(['one', 'two three'])
+  })
+})

extensions/shared/format.ts

@@ -15,3 +15,35 @@ export function compactText(text: string, maxChars: number): string {
   const compact = text.replace(/\s+/gu, ' ').trim()
   return compact.length > maxChars ? `${compact.slice(0, Math.max(0, maxChars - 1))}…` : compact
 }
+
+export function stripAnsi(text: string): string {
+  // eslint-disable-next-line no-control-regex
+  return text.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, '')
+}
+
+export function stripCarriageReturnProgress(text: string): string {
+  return text
+    .split('\n')
+    .map((line) => {
+      if (!line.includes('\r')) return line
+      const parts = line.split('\r')
+      return parts[parts.length - 1] ?? ''
+    })
+    .join('\n')
+}
+
+export function normalizeTerminalOutput(text: string): string {
+  return stripCarriageReturnProgress(stripAnsi(text))
+}
+
+export function compactLines(
+  text: string,
+  maxChars = Number.MAX_SAFE_INTEGER,
+  options: { normalizeTerminal?: boolean } = {}
+): string[] {
+  const content = options.normalizeTerminal === false ? text : normalizeTerminalOutput(text)
+  return content
+    .split('\n')
+    .map((line) => compactText(line, maxChars))
+    .filter(Boolean)
+}

extensions/shared/render.test.ts

@@ -10,6 +10,7 @@ import {
   renderErrorOrPartial,
   renderLines,
   renderMarkdownPreview,
+  renderTextLinesPreview,
   renderToolCall,
   toolError,
   toolLoading
@@ -35,6 +36,17 @@ describe('renderLines', () => {
     expect(visibleWidth(line)).toBeLessThanOrEqual(10)
     expect(line).toContain('…')
   })
+
+  test('supports explicit truncation marker', () => {
+    const [, line] = renderTextLinesPreview(['abcdefghijklmnopqrstuvwxyz'], theme, {
+      expanded: false,
+      compactLimit: 1,
+      truncationMarker: '...'
+    }).render(10)
+
+    expect(visibleWidth(line)).toBeLessThanOrEqual(10)
+    expect(line).toContain('...')
+  })
 })
 
 describe('renderErrorOrPartial', () => {
@@ -111,6 +123,56 @@ describe('renderMarkdownPreview', () => {
   })
 })
 
+describe('renderTextLinesPreview', () => {
+  test('renders a compact tail preview with expand footer', () => {
+    const lines = renderTextLinesPreview(['one', 'two', 'three'], theme, {
+      expanded: false,
+      compactLimit: 1,
+      header: ['logs'],
+      mode: 'tail'
+    }).render(120)
+
+    expect(lines).toContain('logs')
+    expect(lines).toContain('three')
+    expect(lines).toContain('… 2 more lines')
+    expect(lines.join('\n')).toContain('ctrl+o')
+    expect(lines).not.toContain('one')
+  })
+
+  test('renders all lines when expanded', () => {
+    const lines = renderTextLinesPreview(['one', 'two'], theme, {
+      expanded: true,
+      compactLimit: 1,
+      mode: 'tail'
+    }).render(120)
+
+    expect(lines).toEqual(['', 'one', 'two'])
+  })
+
+  test('supports inline hidden counts without extra footer lines', () => {
+    const lines = renderTextLinesPreview(['one', 'two', 'three'], theme, {
+      expanded: false,
+      compactLimit: 1,
+      header: ['logs'],
+      mode: 'tail',
+      inlineHidden: true
+    }).render(120)
+
+    expect(lines).toEqual(['', 'logs', 'three … 2 more lines (ctrl+o to expand)'])
+  })
+
+  test('limits expanded previews when requested', () => {
+    const lines = renderTextLinesPreview(['one', 'two', 'three', 'four'], theme, {
+      expanded: true,
+      compactLimit: 1,
+      expandedLimit: 3,
+      mode: 'tail'
+    }).render(120)
+
+    expect(lines).toEqual(['', 'two', 'three', 'four'])
+  })
+})
+
 describe('renderEntryList', () => {
   test('renders compact entries with hidden footer', () => {
     const lines = renderEntryList(['one', 'two'], theme, {