@pellux/goodvibes-tui 0.26.0 → 0.28.0

package/src/panels/agent-inspector-panel.ts

@@ -77,6 +77,8 @@ const COLOR = {
   selected:    '#ffee88',
   dimmed:      '#555566',
   expandHint:  '#445566',
+  stalled:     '#f59e0b',   // amber — stalled-agent warning
+  cursorBg:    '#1a2233',   // timeline cursor row background
 } as const;
 
 // ---------------------------------------------------------------------------
@@ -91,6 +93,15 @@ export interface AgentInspectorPanelDeps {
   readonly workingDirectory: string;
   /** Cancel the agent by id. Uses the same orphan-free path as WRFC. Returns true if cancelled. */
   readonly cancelAgent: (agentId: string) => boolean;
+  /**
+   * Request a compositor repaint. The 500ms refresh timer and other async
+   * update paths call this (via markDirty) so live agent output is painted
+   * while the main thread is idle — render() is otherwise only invoked on
+   * input/turn/resize, which makes a running agent's timeline look frozen.
+   * Optional: when omitted the panel still marks dirty and repaints on the
+   * next event.
+   */
+  readonly requestRender?: () => void;
 }
 
 export class AgentInspectorPanel extends BasePanel {
@@ -115,6 +126,9 @@ export class AgentInspectorPanel extends BasePanel {
   /** Pending cancel confirmation — subject is the agent id to cancel. */
   private confirmCancel: ConfirmState<string> | null = null;
 
+  /** True while this panel is the active view — gates async repaint requests. */
+  private _active = false;
+
   constructor(private readonly deps: AgentInspectorPanelDeps) {
     super('inspector', 'Inspector', 'I', 'agent');
   }
@@ -131,6 +145,10 @@ export class AgentInspectorPanel extends BasePanel {
   override markDirty(): void {
     this._cachedRows = null;
     super.markDirty();
+    // T17: a bare markDirty() does not repaint — render() only runs on
+    // input/turn/resize. While active, ask the compositor for a frame so
+    // timer/async refreshes (live streaming output) are not stuck off-screen.
+    if (this._active) this.deps.requestRender?.();
   }
 
   // -------------------------------------------------------------------------
@@ -152,11 +170,13 @@ export class AgentInspectorPanel extends BasePanel {
   // -------------------------------------------------------------------------
 
   override onActivate(): void {
+    this._active = true;
     this.needsRender = true;
     this._startRefresh();
   }
 
   override onDeactivate(): void {
+    this._active = false;
     this._stopRefresh();
   }
 
@@ -238,9 +258,11 @@ export class AgentInspectorPanel extends BasePanel {
               width,
               agents.length === 0 ? ' No agents running' : ' No agent selected',
               agents.length === 0
-                ? 'Spawn an agent to inspect its live and historical timeline.'
+                ? 'Spawn an agent to inspect its live and historical timeline, tool calls, and output.'
                 : 'Press Tab to cycle through available agents and open one in the inspector.',
-              [],
+              agents.length === 0
+                ? [{ command: '/spawn <task>', summary: 'launch an agent, then Tab here to inspect its timeline' }]
+                : [{ command: 'Tab', summary: 'select the first available agent' }],
               DEFAULT_PANEL_PALETTE,
             ),
           },
@@ -256,7 +278,7 @@ export class AgentInspectorPanel extends BasePanel {
     const now = Date.now();
     const isStalled = this._isAgentStalled(rec, now);
     if (isStalled) {
-      summaryLines.push(buildPanelLine(width, [['  STALLED', '#f59e0b'], [' — no activity for 5+ minutes', DEFAULT_PANEL_PALETTE.dim]]));
+      summaryLines.push(buildPanelLine(width, [['  STALLED', COLOR.stalled], [' — no activity for 5+ minutes', DEFAULT_PANEL_PALETTE.dim]]));
     }
     const allRows = this._getCachedRows();
     if (allRows.length === 0) {
@@ -270,8 +292,12 @@ export class AgentInspectorPanel extends BasePanel {
             lines: buildEmptyState(
               width,
               ' No messages yet',
-              'The selected agent has not emitted any visible timeline entries yet.',
-              [],
+              rec.status === 'running'
+                ? 'The selected agent is running but has not emitted visible timeline entries yet — live output streams in as it works.'
+                : 'The selected agent has not emitted any visible timeline entries.',
+              rec.status === 'running'
+                ? [{ command: 'c', summary: 'cancel this running agent if it appears stalled' }]
+                : [{ command: 'Tab', summary: 'cycle to another agent with timeline activity' }],
               DEFAULT_PANEL_PALETTE,
             ),
           },
@@ -379,9 +405,7 @@ export class AgentInspectorPanel extends BasePanel {
     const elapsed = (rec.completedAt ?? now) - rec.startedAt;
     const taskPreview = rec.task.split('\n')[0] ?? '';
     const maxTask = Math.max(0, width - 40);
-    const taskDisplay = taskPreview.length > maxTask
-      ? taskPreview.slice(0, maxTask - 1) + '\u2026'
-      : taskPreview;
+    const taskDisplay = truncateDisplay(taskPreview, maxTask);
     return buildPanelLine(width, [
       [' Status ', DEFAULT_PANEL_PALETTE.label],
       [rec.status.toUpperCase(), rec.status === 'running' ? DEFAULT_PANEL_PALETTE.good : rec.status === 'failed' ? DEFAULT_PANEL_PALETTE.bad : DEFAULT_PANEL_PALETTE.dim],
@@ -407,7 +431,7 @@ export class AgentInspectorPanel extends BasePanel {
     row: DisplayRow,
     isCursor: boolean,
   ): Line {
-    const bg = isCursor ? '#1a2233' : '';
+    const bg = isCursor ? COLOR.cursorBg : '';
     const ts = shortTime(row.timestamp);
     const { fg, prefix } = agentKindStyle(row.kind, COLOR);
     const hint = row.hasDetail ? (row.expanded ? ' ▾' : ' ▸') : '';
@@ -441,8 +465,21 @@ export class AgentInspectorPanel extends BasePanel {
 
     // Merge bus messages (live) + JSONL (historical), sorted by timestamp
     const busEntries = this._busToTimeline();
-    const merged = [...this.timeline, ...busEntries]
-      .sort((a, b) => a.timestamp - b.timestamp);
+    const merged = [...this.timeline, ...busEntries];
+
+    // T13: the JSONL timeline only records coarse per-turn summaries
+    // ([assistant] N chars, M tool calls) and never the model's actual text,
+    // so a mid-turn agent looks idle here. Surface the selected agent's live
+    // streaming output while it runs, and its final output once terminal.
+    const liveRec = this.selectedAgentId
+      ? this.deps.agentManager.getStatus(this.selectedAgentId)
+      : null;
+    if (liveRec) {
+      const liveEntry = this._buildLiveOutputEntry(liveRec);
+      if (liveEntry) merged.push(liveEntry);
+    }
+
+    merged.sort((a, b) => a.timestamp - b.timestamp);
 
     // Deduplicate: bus messages that already appear in JSONL will have
     // approximate timestamps. We just show all — bus msgs tend to have
@@ -496,15 +533,52 @@ export class AgentInspectorPanel extends BasePanel {
         kind,
         timestamp: msg.timestamp,
         label: msg.from,
-        content: msg.content.length > 200
-          ? msg.content.slice(0, 197) + '\u2026'
-          : msg.content,
+        content: truncateDisplay(msg.content, 200),
         expanded: false,
       } satisfies TimelineEntry);
     }
     return result;
   }
 
+  /**
+   * Build a synthetic timeline entry exposing the selected agent's live model
+   * output. While the agent runs this is the streaming token buffer
+   * (tail-truncated like AgentDetailModal); once it terminates it is the final
+   * assistant text (expandable). Exactly one is produced — the SDK clears
+   * streamingContent on completion — so live and final rows never coexist.
+   * Returns null when there is nothing to show.
+   */
+  private _buildLiveOutputEntry(rec: AgentRecord): TimelineEntry | null {
+    const STREAM_MAX_CHARS = 500;
+    if (rec.status === 'running' && rec.streamingContent) {
+      const sc = rec.streamingContent;
+      const truncated = sc.length > STREAM_MAX_CHARS;
+      const tail = (truncated ? sc.slice(-STREAM_MAX_CHARS) : sc)
+        .replace(/\s+/g, ' ')
+        .trim();
+      return {
+        kind: 'assistant',
+        timestamp: Date.now(),
+        label: 'streaming',
+        content: `(live) ${truncated ? '…' : ''}${tail}`,
+        expanded: false,
+      } satisfies TimelineEntry;
+    }
+    if (AGENT_TERMINAL_STATUSES.has(rec.status) && rec.fullOutput) {
+      const fo = rec.fullOutput;
+      const firstLine = (fo.split('\n').find((l) => l.trim().length > 0) ?? '').trim();
+      return {
+        kind: 'assistant',
+        timestamp: rec.completedAt ?? Date.now(),
+        label: 'output',
+        content: `(final) ${firstLine}`,
+        detail: fo,
+        expanded: false,
+      } satisfies TimelineEntry;
+    }
+    return null;
+  }
+
   // -------------------------------------------------------------------------
   // Private — refresh
   // -------------------------------------------------------------------------
@@ -599,7 +673,8 @@ export class AgentInspectorPanel extends BasePanel {
     if (!this.selectedAgentId) return;
     const rec = this.deps.agentManager.getStatus(this.selectedAgentId);
     if (!rec || AGENT_TERMINAL_STATUSES.has(rec.status)) return;
-    const label = rec.task.split('\n')[0]?.slice(0, 40) ?? rec.id.slice(-8);
+    const firstLine = rec.task.split('\n')[0];
+    const label = firstLine ? truncateDisplay(firstLine, 40) : rec.id.slice(-8);
     this.confirmCancel = { subject: rec.id, label };
     this.markDirty();
   }

package/src/panels/agent-inspector-shared.ts

@@ -1,3 +1,5 @@
+import { formatDuration } from '../utils/format-duration.ts';
+
 export type AgentInspectorEntryKind = 'user' | 'assistant' | 'tool_call' | 'tool_result' | 'session' | 'error';
 
 // ---------------------------------------------------------------------------
@@ -61,9 +63,7 @@ export function agentStatusColor(status: string, colors: Record<string, string>)
 }
 
 export function formatAgentDuration(ms: number): string {
-  if (ms < 1000) return `${ms}ms`;
-  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
-  return `${Math.floor(ms / 60000)}m${Math.floor((ms % 60000) / 1000)}s`;
+  return formatDuration(ms);
 }
 
 export function formatAgentTime(ts: number): string {

package/src/panels/agent-logs-panel.ts

@@ -1,6 +1,5 @@
 import { promises as fsPromises, watch, type FSWatcher } from 'fs';
 import type { Line } from '../types/grid.ts';
-import { createEmptyLine, createStyledCell } from '../types/grid.ts';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import type { AgentManager, AgentRecord } from '@pellux/goodvibes-sdk/platform/tools';
 import type { AgentEvent } from '@/runtime/index.ts';
@@ -29,8 +28,17 @@ import {
 const POLL_INTERVAL_MS = 500;
 
 export interface AgentLogsPanelDeps {
-  readonly agentManager: Pick<AgentManager, 'list'>;
+  readonly agentManager: Pick<AgentManager, 'list'> & Partial<Pick<AgentManager, 'getStatus'>>;
   readonly workingDirectory: string;
+  /**
+   * Request a compositor repaint. The 500ms poll timer, fs.watch callback and
+   * other async update paths call this (via markDirty) so new log lines and
+   * live streaming output are painted while the main thread is idle — render()
+   * is otherwise only invoked on input/turn/resize, which makes a running
+   * agent's log tail look frozen. Optional: when omitted the panel still marks
+   * dirty and repaints on the next event.
+   */
+  readonly requestRender?: () => void;
 }
 
 
@@ -47,12 +55,22 @@ export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
   private allEntries: LogEntry[] = []; // raw parsed JSONL for selected agent
   private filteredEntries: LogEntry[] = []; // after filter applied
   private lastFileSize = 0;
+  /**
+   * Length of the selected agent's live streamingContent buffer at the last
+   * poll. During an LLM turn the record's streamingContent grows token-by-token
+   * with NO JSONL append, so the file-size gate alone never repaints the live
+   * tail; we also watch this length and markDirty when it advances.
+   */
+  private lastStreamLen = 0;
 
   // ── Modes ────────────────────────────────────────────────────────────────
   private autoFollow = true;
   private paused = false;
   private filter: FilterType = 'all';
 
+  /** True while this panel is the active view — gates async repaint requests. */
+  private _active = false;
+
   // ── Infrastructure ───────────────────────────────────────────────────────
   private pollTimer: ReturnType<typeof setInterval> | null = null;
   private fsWatcher: FSWatcher | null = null;
@@ -81,12 +99,14 @@ export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
   // ── Lifecycle ─────────────────────────────────────────────────────────────
 
   override onActivate(): void {
+    this._active = true;
     super.onActivate();
     this._refreshAgents();
     this._pollCurrentAgent();
   }
 
   override onDeactivate(): void {
+    this._active = false;
     super.onDeactivate();
   }
 
@@ -95,6 +115,18 @@ export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
     this._unsubscribeEvents();
   }
 
+  /**
+   * T17: a bare markDirty() does not repaint — render() only runs on
+   * input/turn/resize. While active, ask the compositor for a frame so the
+   * background poll / fs.watch updates (new log lines, live streaming output)
+   * are not stuck off-screen. Gated on active state so the always-on poller
+   * does not force full-frame rebuilds while this panel is hidden.
+   */
+  protected override markDirty(): void {
+    super.markDirty();
+    if (this._active) this.deps.requestRender?.();
+  }
+
   // ── Input ─────────────────────────────────────────────────────────────────
 
   handleInput(key: string): boolean {
@@ -128,19 +160,28 @@ export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
 
   render(width: number, height: number): Line[] {
     this.needsRender = false;
-    const footerLines = [
-      buildPanelLine(width, [
-        [' Tab', DEFAULT_PANEL_PALETTE.info], [' next agent', DEFAULT_PANEL_PALETTE.dim],
-        ['   Space', DEFAULT_PANEL_PALETTE.info], [' pause', DEFAULT_PANEL_PALETTE.dim],
-        ['   f', DEFAULT_PANEL_PALETTE.info], [' filter', DEFAULT_PANEL_PALETTE.dim],
-        ['   g/G', DEFAULT_PANEL_PALETTE.info], [' scroll', DEFAULT_PANEL_PALETTE.dim],
-      ]),
-    ];
+    // Context-aware footer: when there are no agents only the Tab cycle is
+    // meaningless, so hide the per-stream keys; otherwise reflect live state
+    // (Space toggles pause→resume, g/G only matter once there is a tail).
+    const runningCount = this.agents.filter((a) => a.status === 'running' || a.status === 'pending').length;
+    const footerLines = this.agents.length === 0
+      ? [buildPanelLine(width, [[' Waiting for an agent session to start...', DEFAULT_PANEL_PALETTE.dim]])]
+      : [
+          buildPanelLine(width, [
+            [` ${this.selectedAgentIndex + 1}/${this.agents.length}`, DEFAULT_PANEL_PALETTE.dim],
+            ['   Tab', DEFAULT_PANEL_PALETTE.info], [' next agent', DEFAULT_PANEL_PALETTE.dim],
+            ['   Space', DEFAULT_PANEL_PALETTE.info], [this.paused ? ' resume' : ' pause', DEFAULT_PANEL_PALETTE.dim],
+            ['   f', DEFAULT_PANEL_PALETTE.info], [' filter', DEFAULT_PANEL_PALETTE.dim],
+            ['   g/G', DEFAULT_PANEL_PALETTE.info], [this.autoFollow ? ' top/follow' : ' top/bottom', DEFAULT_PANEL_PALETTE.dim],
+          ]),
+        ];
 
     const summaryLines = [
       buildPanelLine(width, [
         [' Agents ', DEFAULT_PANEL_PALETTE.label],
         [String(this.agents.length), DEFAULT_PANEL_PALETTE.value],
+        ['   Running ', DEFAULT_PANEL_PALETTE.label],
+        [String(runningCount), runningCount > 0 ? DEFAULT_PANEL_PALETTE.good : DEFAULT_PANEL_PALETTE.dim],
         ['   Filter ', DEFAULT_PANEL_PALETTE.label],
         [FILTER_LABELS[this.filter], DEFAULT_PANEL_PALETTE.info],
         ['   Mode ', DEFAULT_PANEL_PALETTE.label],
@@ -158,8 +199,11 @@ export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
             lines: buildEmptyState(
               width,
               ' No agents running',
-              'Spawn or attach to an agent session and its structured logs will appear here.',
-              [],
+              'Spawn or attach to an agent session and its structured logs stream here in real time.',
+              [
+                { command: '/spawn <task>', summary: 'launch an agent and watch its live session log here' },
+                { command: '/inspector', summary: 'open the inspector for a per-agent timeline and tool activity' },
+              ],
               DEFAULT_PANEL_PALETTE,
             ),
           },
@@ -180,7 +224,17 @@ export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
       ]));
     }
 
-    if (this.filteredEntries.length === 0) {
+    // T13: surface the selected agent's live streaming output (running) or
+    // final output (terminal) — the per-turn JSONL tail never carries it. Pull
+    // the freshest record via getStatus so the streaming buffer reflects the
+    // current turn; the list() snapshot in this.agents only refreshes on
+    // spawn/complete/fail events, never mid-stream.
+    const liveAgent = selectedAgent
+      ? (this.deps.agentManager.getStatus?.(selectedAgent.id) ?? selectedAgent)
+      : null;
+    const liveLines = liveAgent ? this._buildLiveOutputLines(width, liveAgent) : [];
+
+    if (this.filteredEntries.length === 0 && liveLines.length === 0) {
       return buildPanelWorkspace(width, height, {
         title: ' Agents',
         intro: 'View-only live session stream for running agents, with per-agent switching and filtered event tails.',
@@ -202,9 +256,13 @@ export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
       });
     }
 
+    const scrollableLines = [
+      ...this.filteredEntries.map((entry) => this._renderEntry(entry, width)),
+      ...liveLines,
+    ];
     const focusIndex = this.autoFollow
-      ? Math.max(0, this.filteredEntries.length - 1)
-      : Math.min(this.selectedIndex, Math.max(0, this.filteredEntries.length - 1));
+      ? Math.max(0, scrollableLines.length - 1)
+      : Math.min(this.selectedIndex, Math.max(0, scrollableLines.length - 1));
     const summarySection = { title: 'Summary', lines: summaryLines } as const;
     const agentsSection = { title: 'Agents', lines: [selectorLine] } as const;
     const logStreamSection = resolveScrollablePanelSection(width, height, {
@@ -214,7 +272,7 @@ export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
       beforeSections: [summarySection, agentsSection],
       section: {
         title: 'Log Stream',
-        scrollableLines: this.filteredEntries.map((entry) => this._renderEntry(entry, width)),
+        scrollableLines,
         selectedIndex: focusIndex,
         scrollOffset: this.scrollStart,
         minRows: 8,
@@ -264,28 +322,50 @@ export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
     const agent = this._selectedAgent();
     if (!agent) return;
 
+    // Detect live streaming growth even when no JSONL is written this tick.
+    // During an LLM turn the record's streamingContent grows token-by-token
+    // with no session-log append, so the file-size gate below would never fire
+    // and the live tail (_buildLiveOutputLines) would never repaint.
+    let streamChanged = false;
+    const live = this.deps.agentManager.getStatus?.(agent.id);
+    if (live) {
+      const streamLen = (live.streamingContent ?? '').length;
+      if (streamLen !== this.lastStreamLen) {
+        this.lastStreamLen = streamLen;
+        streamChanged = true;
+      }
+    }
+
     const sessionFile = this._sessionFilePath(agent.id);
+    let fileExists = true;
     try {
       await fsPromises.access(sessionFile);
     } catch {
-      return;
+      fileExists = false;
     }
 
-    try {
-      const content = await fsPromises.readFile(sessionFile, 'utf-8');
-      if (content.length === this.lastFileSize) return;
-      this.lastFileSize = content.length;
-
-      // Re-parse all lines (simple: no partial-line tracking needed at 500ms)
-      this.allEntries = parseAgentJsonl(content);
-      this._applyFilter();
-      if (this.autoFollow) {
-        this.selectedIndex = Math.max(0, this.filteredEntries.length - 1);
+    if (fileExists) {
+      try {
+        const content = await fsPromises.readFile(sessionFile, 'utf-8');
+        if (content.length !== this.lastFileSize) {
+          this.lastFileSize = content.length;
+
+          // Re-parse all lines (simple: no partial-line tracking needed at 500ms)
+          this.allEntries = parseAgentJsonl(content);
+          this._applyFilter();
+          if (this.autoFollow) {
+            this.selectedIndex = Math.max(0, this.filteredEntries.length - 1);
+          }
+          this.markDirty();
+          return;
+        }
+      } catch {
+        // Non-fatal: file may be mid-write
       }
-      this.markDirty();
-    } catch {
-      // Non-fatal: file may be mid-write
     }
+
+    // File unchanged or absent, but the live stream advanced — repaint the tail.
+    if (streamChanged) this.markDirty();
   }
 
   // ── Private: fs.watch (supplemental) ─────────────────────────────────────
@@ -382,6 +462,7 @@ export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
     this.allEntries = [];
     this.filteredEntries = [];
     this.lastFileSize = 0;
+    this.lastStreamLen = 0;
     this.selectedIndex = 0;
     this.scrollStart = 0;
     this.autoFollow = true;
@@ -414,6 +495,7 @@ export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
       this.allEntries = [];
       this.filteredEntries = [];
       this.lastFileSize = 0;
+      this.lastStreamLen = 0;
       this.markDirty();
       return;
     }
@@ -473,22 +555,6 @@ export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
 
   // ── Private: rendering helpers ─────────────────────────────────────────────
 
-  /** Top header bar: title + filter label + mode indicators */
-  private _renderHeader(width: number): Line {
-    const title = ' Agent Logs ';
-    const filterLabel = `[${FILTER_LABELS[this.filter]}] `;
-    const pause = this.paused ? ' PAUSED ' : '';
-    const follow = this.autoFollow ? ' AUTO-FOLLOW ' : '';
-    const keyhints = '  Tab:next  Space:pause  f:filter  g/G:scroll ';
-    return buildStyledPanelLine(width, [
-      { text: title, fg: COLOR.header_accent, bold: true },
-      { text: filterLabel, fg: COLOR.filter_active },
-      { text: pause, fg: COLOR.paused },
-      { text: follow, fg: COLOR.auto_follow },
-      { text: keyhints, fg: COLOR.header_label },
-    ]);
-  }
-
   /** Agent selector bar: shows running agents with cycle indicator */
   private _renderAgentSelector(width: number): Line {
     const prefix = ' Agents: ';
@@ -512,32 +578,6 @@ export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
     return buildStyledPanelLine(width, segments);
   }
 
-  private _renderNoAgents(width: number): Line {
-    const msg = ' No agents running. ';
-    return buildStyledPanelLine(width, [{ text: msg, fg: COLOR.dim }]);
-  }
-
-  private _renderSeparator(width: number): Line {
-    return buildStyledPanelLine(width, [{ text: '─'.repeat(width), fg: COLOR.separator }]);
-  }
-
-  private _renderEmpty(width: number, bodyHeight: number): Line[] {
-    const lines: Line[] = [];
-    const msg = this.agents.length === 0
-      ? ' No agents running '
-      : ` No ${this.filter === 'all' ? '' : this.filter + ' '}log entries yet `;
-    const offset = Math.max(0, Math.floor((width - msg.length) / 2));
-    const textLine = buildStyledPanelLine(width, [
-      { text: ' '.repeat(offset), fg: COLOR.dim },
-      { text: msg, fg: COLOR.dim },
-    ]);
-    lines.push(textLine);
-    while (lines.length < bodyHeight) {
-      lines.push(createEmptyLine(width));
-    }
-    return lines;
-  }
-
   private _renderEntry(entry: LogEntry, width: number): Line {
     // Indent non-session entries
     const prefix = entry.type === 'session_start' ? '' : '  ';
@@ -545,6 +585,43 @@ export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
     return buildStyledPanelLine(width, [{ text: fullText, fg: entry.color, bold: entry.bold }]);
   }
 
+  /**
+   * Build trailing lines exposing the selected agent's live model output. The
+   * JSONL tail is written per-turn, so while an agent is mid-turn its actual
+   * work is invisible here; this surfaces the streaming token buffer
+   * (tail-truncated like AgentDetailModal) for a running agent, and the final
+   * assistant text once it terminates. Empty when there is nothing live to show.
+   */
+  private _buildLiveOutputLines(width: number, agent: AgentRecord): Line[] {
+    const STREAM_MAX_CHARS = 500;
+    if (agent.status === 'running' && agent.streamingContent) {
+      const sc = agent.streamingContent;
+      const truncated = sc.length > STREAM_MAX_CHARS;
+      const display = truncated ? sc.slice(-STREAM_MAX_CHARS) : sc;
+      const header = truncated
+        ? `  streaming (last ${STREAM_MAX_CHARS} of ${sc.length} chars):`
+        : '  streaming:';
+      const lines: Line[] = [
+        buildStyledPanelLine(width, [{ text: header, fg: COLOR.auto_follow, bold: true }]),
+      ];
+      for (const raw of display.split('\n')) {
+        lines.push(buildStyledPanelLine(width, [{ text: `    ${raw}`, fg: COLOR.assistant }]));
+      }
+      return lines;
+    }
+    if (agent.status !== 'running' && agent.status !== 'pending' && agent.fullOutput) {
+      const fo = agent.fullOutput;
+      const lines: Line[] = [
+        buildStyledPanelLine(width, [{ text: '  output:', fg: COLOR.header_accent, bold: true }]),
+      ];
+      for (const raw of fo.split('\n')) {
+        lines.push(buildStyledPanelLine(width, [{ text: `    ${raw}`, fg: COLOR.assistant }]));
+      }
+      return lines;
+    }
+    return [];
+  }
+
   private _agentStatusColor(status: AgentRecord['status']): string {
     switch (status) {
       case 'running': return COLOR.agent_running;