@pellux/goodvibes-tui 0.18.4

package/src/providers/tool-formats.ts

@@ -0,0 +1,414 @@
+import type { ToolDefinition, ToolCall } from '@pellux/goodvibes-sdk/platform/types/tools';
+import type { ProviderMessage, ContentPart } from './interface.ts';
+import { logger } from '@pellux/goodvibes-sdk/platform/utils/logger';
+import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils/error-display';
+
+// ---------------------------------------------------------------------------
+// OpenAI wire format
+// ---------------------------------------------------------------------------
+
+export interface OpenAITool {
+  type: 'function';
+  function: {
+    name: string;
+    description: string;
+    parameters: Record<string, unknown>;
+  };
+}
+
+export interface OpenAIToolCall {
+  id: string;
+  type: 'function';
+  function: { name: string; arguments: string };
+}
+
+export type OpenAIContentPart =
+  | { type: 'text'; text: string }
+  | { type: 'image_url'; image_url: { url: string } };
+
+export interface OpenAIMessage {
+  role: 'system' | 'user' | 'assistant' | 'tool';
+  content: string | OpenAIContentPart[] | null;
+  tool_calls?: OpenAIToolCall[];
+  tool_call_id?: string;
+}
+
+/** Convert internal ToolDefinitions to OpenAI tools array. */
+export function toOpenAITools(tools: ToolDefinition[]): OpenAITool[] {
+  return tools.map((t) => ({
+    type: 'function',
+    function: {
+      name: t.name,
+      description: t.description,
+      parameters: t.parameters,
+    },
+  }));
+}
+
+/** Parse OpenAI tool_calls from a response into internal ToolCall[]. */
+export function fromOpenAIToolCalls(calls: OpenAIToolCall[]): ToolCall[] {
+  return calls.map((c) => ({
+    id: c.id,
+    name: c.function.name,
+    arguments: parseJson(c.function.arguments),
+  }));
+}
+
+/** Convert internal ProviderMessages to OpenAI message array. */
+export function toOpenAIMessages(
+  messages: ProviderMessage[],
+  systemPrompt?: string,
+): OpenAIMessage[] {
+  const result: OpenAIMessage[] = [];
+
+  if (systemPrompt) {
+    result.push({ role: 'system', content: systemPrompt });
+  }
+
+  for (const msg of messages) {
+    if (msg.role === 'user') {
+      if (Array.isArray(msg.content)) {
+        // ContentPart[] — convert to OpenAI multimodal parts
+        const parts: OpenAIContentPart[] = msg.content.map((part: ContentPart) => {
+          if (part.type === 'text') return { type: 'text', text: part.text };
+          return { type: 'image_url', image_url: { url: `data:${part.mediaType};base64,${part.data}` } };
+        });
+        result.push({ role: 'user', content: parts });
+      } else {
+        result.push({ role: 'user', content: msg.content });
+      }
+    } else if (msg.role === 'assistant') {
+      const m: OpenAIMessage = { role: 'assistant', content: msg.content ?? '' };
+      if (msg.toolCalls && msg.toolCalls.length > 0) {
+        m.tool_calls = msg.toolCalls.map((tc) => ({
+          id: tc.id,
+          type: 'function',
+          function: { name: tc.name, arguments: JSON.stringify(tc.arguments) },
+        }));
+      }
+      result.push(m);
+    } else if (msg.role === 'tool') {
+      result.push({
+        role: 'tool',
+        content: msg.content,
+        tool_call_id: msg.callId,
+      });
+    }
+  }
+
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// Anthropic wire format
+// ---------------------------------------------------------------------------
+
+export interface AnthropicTool {
+  name: string;
+  description: string;
+  input_schema: Record<string, unknown>;
+}
+
+export type AnthropicContentBlock =
+  | { type: 'text'; text: string }
+  | { type: 'image'; source: { type: 'base64'; media_type: 'image/png' | 'image/jpeg' | 'image/gif' | 'image/webp'; data: string } }
+  | { type: 'tool_use'; id: string; name: string; input: Record<string, unknown> }
+  | { type: 'tool_result'; tool_use_id: string; content: string };
+
+export interface AnthropicMessage {
+  role: 'user' | 'assistant';
+  content: string | AnthropicContentBlock[];
+}
+
+/** Convert internal ToolDefinitions to Anthropic tools array. */
+export function toAnthropicTools(tools: ToolDefinition[]): AnthropicTool[] {
+  return tools.map((t) => ({
+    name: t.name,
+    description: t.description,
+    input_schema: t.parameters,
+  }));
+}
+
+/** Parse Anthropic response content blocks into text + ToolCall[]. */
+export function fromAnthropicContent(content: AnthropicContentBlock[]): {
+  text: string;
+  toolCalls: ToolCall[];
+} {
+  let text = '';
+  const toolCalls: ToolCall[] = [];
+
+  for (const block of content) {
+    if (block.type === 'text') {
+      text += block.text;
+    } else if (block.type === 'tool_use') {
+      toolCalls.push({ id: block.id, name: block.name, arguments: block.input });
+    }
+  }
+
+  return { text, toolCalls };
+}
+
+/** Convert internal ProviderMessages to Anthropic message array. */
+export function toAnthropicMessages(messages: ProviderMessage[]): AnthropicMessage[] {
+  const result: AnthropicMessage[] = [];
+
+  // Collect consecutive tool results to merge into one user message
+  let pendingToolResults: AnthropicContentBlock[] = [];
+
+  function flushToolResults(): void {
+    if (pendingToolResults.length > 0) {
+      result.push({ role: 'user', content: pendingToolResults });
+      pendingToolResults = [];
+    }
+  }
+
+  for (const msg of messages) {
+    if (msg.role === 'user') {
+      flushToolResults();
+      if (Array.isArray(msg.content)) {
+        // ContentPart[] — convert to Anthropic content blocks
+        const blocks: AnthropicContentBlock[] = msg.content.map((part: ContentPart) => {
+          if (part.type === 'text') return { type: 'text' as const, text: part.text };
+          return {
+            type: 'image' as const,
+            source: { type: 'base64' as const, media_type: part.mediaType as 'image/png' | 'image/jpeg' | 'image/gif' | 'image/webp', data: part.data },
+          };
+        });
+        result.push({ role: 'user', content: blocks });
+      } else {
+        result.push({ role: 'user', content: msg.content });
+      }
+    } else if (msg.role === 'assistant') {
+      flushToolResults();
+      if (msg.toolCalls && msg.toolCalls.length > 0) {
+        const blocks: AnthropicContentBlock[] = [];
+        if (msg.content) blocks.push({ type: 'text', text: msg.content });
+        for (const tc of msg.toolCalls) {
+          blocks.push({ type: 'tool_use', id: tc.id, name: tc.name, input: tc.arguments });
+        }
+        result.push({ role: 'assistant', content: blocks });
+      } else {
+        result.push({ role: 'assistant', content: msg.content });
+      }
+    } else if (msg.role === 'tool') {
+      pendingToolResults.push({
+        type: 'tool_result',
+        tool_use_id: msg.callId,
+        content: msg.content,
+      });
+    }
+  }
+
+  flushToolResults();
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// Gemini wire format
+// ---------------------------------------------------------------------------
+
+export interface GeminiFunctionDeclaration {
+  name: string;
+  description: string;
+  parameters: Record<string, unknown>;
+}
+
+export interface GeminiPart {
+  text?: string;
+  inlineData?: { mimeType: string; data: string };
+  functionCall?: { name: string; args: Record<string, unknown> };
+  functionResponse?: { name: string; response: { content: string } };
+}
+
+export interface GeminiContent {
+  role: 'user' | 'model';
+  parts: GeminiPart[];
+}
+
+/** Strip properties that Gemini's API doesn't support (e.g. additionalProperties). */
+function stripUnsupportedProperties(obj: unknown): unknown {
+  if (Array.isArray(obj)) return obj.map(stripUnsupportedProperties);
+  if (obj !== null && typeof obj === 'object') {
+    const result: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(obj as Record<string, unknown>)) {
+      if (key === 'additionalProperties') continue;
+      result[key] = stripUnsupportedProperties(value);
+    }
+    return result;
+  }
+  return obj;
+}
+
+/** Convert internal ToolDefinitions to Gemini functionDeclarations. */
+export function toGeminiFunctionDeclarations(
+  tools: ToolDefinition[],
+): GeminiFunctionDeclaration[] {
+  return tools.map((t) => ({
+    name: t.name,
+    description: t.description,
+    parameters: stripUnsupportedProperties(t.parameters) as Record<string, unknown>,
+  }));
+}
+
+/** Parse Gemini response parts into text + ToolCall[]. */
+export function fromGeminiParts(parts: GeminiPart[]): {
+  text: string;
+  toolCalls: ToolCall[];
+} {
+  let text = '';
+  const toolCalls: ToolCall[] = [];
+
+  for (const part of parts) {
+    if (part.text) {
+      text += part.text;
+    } else if (part.functionCall) {
+      toolCalls.push({
+        id: crypto.randomUUID(),
+        name: part.functionCall.name,
+        arguments: part.functionCall.args,
+      });
+    }
+  }
+
+  return { text, toolCalls };
+}
+
+/** Convert internal ProviderMessages to Gemini contents array. */
+export function toGeminiContents(
+  messages: ProviderMessage[],
+  systemPrompt?: string,
+): { contents: GeminiContent[]; systemInstruction?: { parts: GeminiPart[] } } {
+  const contents: GeminiContent[] = [];
+  const systemInstruction = systemPrompt
+    ? { parts: [{ text: systemPrompt }] }
+    : undefined;
+
+  let pendingFunctionResponses: GeminiPart[] = [];
+
+  function flushFunctionResponses(): void {
+    if (pendingFunctionResponses.length > 0) {
+      contents.push({ role: 'user', parts: pendingFunctionResponses });
+      pendingFunctionResponses = [];
+    }
+  }
+
+  for (const msg of messages) {
+    if (msg.role === 'user') {
+      flushFunctionResponses();
+      if (Array.isArray(msg.content)) {
+        // ContentPart[] — convert to Gemini parts
+        const parts: GeminiPart[] = msg.content.map((part: ContentPart) => {
+          if (part.type === 'text') return { text: part.text };
+          return { inlineData: { mimeType: part.mediaType, data: part.data } };
+        });
+        contents.push({ role: 'user', parts });
+      } else {
+        contents.push({ role: 'user', parts: [{ text: msg.content }] });
+      }
+    } else if (msg.role === 'assistant') {
+      flushFunctionResponses();
+      const parts: GeminiPart[] = [];
+      if (msg.content) parts.push({ text: msg.content });
+      if (msg.toolCalls) {
+        for (const tc of msg.toolCalls) {
+          parts.push({ functionCall: { name: tc.name, args: tc.arguments } });
+        }
+      }
+      contents.push({ role: 'model', parts });
+    } else if (msg.role === 'tool') {
+      pendingFunctionResponses.push({
+        functionResponse: {
+          name: msg.name ?? msg.callId,
+          response: { content: msg.content },
+        },
+      });
+    }
+  }
+
+  flushFunctionResponses();
+  return { contents, systemInstruction };
+}
+
+// ---------------------------------------------------------------------------
+// Text-based tool call extraction (for models that emit tool calls as tokens)
+// ---------------------------------------------------------------------------
+
+/**
+ * Extracts tool calls from raw text content for models (e.g. kimi-k2-thinking
+ * via ollama-cloud) that emit tool calls as text tokens instead of using the
+ * OpenAI function-calling wire format.
+ *
+ * Supports two delimiter formats (both emitted by kimi variants):
+ *   Without underscores: <|toolcallbegin|>functions.TOOLNAME:INDEX<|toolcallargumentbegin|>JSON_ARGS<|toolcallend|>
+ *   With underscores:    <|tool_call_begin|>functions.TOOLNAME:INDEX<|tool_call_argument_begin|>JSON_ARGS<|tool_call_end|>
+ *
+ * A trailing <|tool_calls_section_end|> or <|toolcallssectionend|> is also
+ * stripped from the cleaned content.
+ *
+ * @returns Extracted ToolCall array and the content with all tool-call tokens
+ * removed (trimmed). Returns empty array when no text-based calls are found.
+ */
+export function extractTextToolCalls(content: string): {
+  toolCalls: ToolCall[];
+  cleanedContent: string;
+} {
+  // Fast path: skip regex work when neither sentinel variant is present
+  if (!content.includes('<|toolcallbegin|>') && !content.includes('<|tool_call_begin|>')) {
+    return { toolCalls: [], cleanedContent: content };
+  }
+
+  // Match both delimiter variants using optional underscores.
+  // The `.*?` lazy match with /s is safe here: backtracking is bounded by
+  // the end delimiter, which appears within kilobytes of the argument-begin
+  // delimiter — the span of a single tool call's JSON args.
+  // kimi is the known model that emits these delimiter formats.
+  const pattern =
+    /<\|tool_?call_?begin\|>functions\.([^:]+):\d+<\|tool_?call_?argument_?begin\|>(.*?)<\|tool_?call_?end\|>/gs;
+
+  const toolCalls: ToolCall[] = [];
+  // Build cleaned content in a single pass by collecting match spans,
+  // avoiding a second regex execution over the same string.
+  const segments: string[] = [];
+  let lastEnd = 0;
+  let index = 0;
+
+  for (const match of content.matchAll(pattern)) {
+    const matchStart = match.index!;
+    const matchEnd = matchStart + match[0].length;
+    // Collect the text before this match
+    segments.push(content.slice(lastEnd, matchStart));
+    lastEnd = matchEnd;
+
+    const toolName = match[1];
+    const rawArgs = match[2];
+    toolCalls.push({
+      id: `text-call-${index}`,
+      name: toolName,
+      arguments: parseJson(rawArgs),
+    });
+    index++;
+  }
+  // Append any trailing text after the last match
+  segments.push(content.slice(lastEnd));
+
+  // Strip section-end sentinels (both variants) and trim
+  const cleanedContent = segments
+    .join('')
+    .replace(/<\|tool_?calls_?section_?end\|>/g, '')
+    .trim();
+
+  return { toolCalls, cleanedContent };
+}
+
+// ---------------------------------------------------------------------------
+// Shared helper
+// ---------------------------------------------------------------------------
+
+function parseJson(raw: string): Record<string, unknown> {
+  try {
+    return JSON.parse(raw) as Record<string, unknown>;
+  } catch (err) {
+    logger.warn('tool-formats: failed to parse JSON tool arguments', { error: summarizeError(err) });
+    return {};
+  }
+}

package/src/renderer/agent-detail-modal.ts

@@ -0,0 +1,285 @@
+import { join } from 'path';
+import { readFile } from 'fs/promises';
+import { type Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { ModalFactory } from './modal-factory.ts';
+import type { AgentManager } from '../tools/agent/index.ts';
+import type { AgentMessageBus } from '../agents/message-bus.ts';
+import { formatDuration } from './modal-utils.ts';
+import { logger } from '@pellux/goodvibes-sdk/platform/utils/logger';
+import { getOverlaySurfaceMetrics, getStableOverlayContentRows } from './overlay-viewport.ts';
+import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils/error-display';
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const TOKENS_PER_TOOL_CALL = 400;
+const MAX_LOG_ENTRIES = 10;
+const AGENT_ID_DISPLAY_LENGTH = 16;
+
+export interface AgentDetailModalDeps {
+  readonly agentManager: Pick<AgentManager, 'getStatus'>;
+  readonly agentMessageBus: Pick<AgentMessageBus, 'getMessages'>;
+  readonly sessionLogPathResolver: (agentId: string) => string;
+}
+
+// ─── AgentDetailModal ─────────────────────────────────────────────────────────
+
+/**
+ * AgentDetailModal — deep-view modal for a single running/completed agent.
+ *
+ * Displays task description, template, model, status, duration, tool-call
+ * count, estimated token usage, recent messages from AgentMessageBus, and
+ * the agent's current progress note.
+ */
+export class AgentDetailModal {
+  public active = false;
+  public agentId: string | null = null;
+
+  /** Cached JSONL log entries, loaded on open(). */
+  public logEntries: Record<string, unknown>[] = [];
+  public logTotal = 0;
+
+  private refreshTimer: ReturnType<typeof setInterval> | null = null;
+  private onRefresh: (() => void) | null = null;
+
+  constructor(readonly deps: AgentDetailModalDeps) {}
+
+  /** Set a callback to trigger re-render when log data updates. */
+  setOnRefresh(fn: () => void): void {
+    this.onRefresh = fn;
+  }
+
+  open(agentId: string): void {
+    this.agentId = agentId;
+    this.active = true;
+    this.logEntries = [];
+    this.logTotal = 0;
+    this.loadLog().catch(() => {});
+    // Auto-refresh log every 500ms while modal is open
+    if (this.refreshTimer) clearInterval(this.refreshTimer);
+    this.refreshTimer = setInterval(() => {
+      this.loadLog().then(() => this.onRefresh?.()).catch(() => {});
+    }, 500);
+  }
+
+  close(): void {
+    this.active = false;
+    this.agentId = null;
+    this.logEntries = [];
+    this.logTotal = 0;
+    if (this.refreshTimer) {
+      clearInterval(this.refreshTimer);
+      this.refreshTimer = null;
+    }
+  }
+
+  async loadLog(): Promise<void> {
+    if (!this.agentId) { this.logEntries = []; this.logTotal = 0; return; }
+    try {
+      const sessionFile = this.deps.sessionLogPathResolver(this.agentId);
+      const logContent = await readFile(sessionFile, 'utf-8');
+      const logLines = logContent.trim().split('\n');
+      this.logTotal = logLines.length;
+      const parsed = logLines.slice(-MAX_LOG_ENTRIES).map(line => {
+        try { return JSON.parse(line) as Record<string, unknown>; } catch { return null; }
+      });
+      const failedCount = parsed.filter(e => e === null).length;
+      if (failedCount > 0) {
+        logger.debug('AgentDetailModal: skipped malformed JSONL lines', { count: failedCount });
+      }
+      this.logEntries = parsed.filter((e): e is Record<string, unknown> => e !== null);
+    } catch (err) {
+      const code = (err as NodeJS.ErrnoException).code;
+      if (code !== 'ENOENT') {
+        logger.debug('AgentDetailModal: failed to load session log', { error: summarizeError(err) });
+      }
+      this.logEntries = [];
+      this.logTotal = 0;
+    }
+  }
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+/** Rough token estimate: toolCallCount * avg tokens per tool exchange. */
+function estimateTokens(toolCallCount: number): number {
+  return toolCallCount * TOKENS_PER_TOOL_CALL;
+}
+
+// ─── renderAgentDetailModal ───────────────────────────────────────────────────
+
+/**
+ * Render the agent detail modal as Line[] for overlay in the viewport.
+ *
+ * Shows a deep view of the selected agent: task, template, model, status,
+ * duration, tool call count, token estimate, recent bus messages, and
+ * progress text.
+ *
+ * @param modal  AgentDetailModal state
+ * @param width  Terminal width
+ */
+export function renderAgentDetailModal(
+  modal: AgentDetailModal,
+  width: number,
+  viewportHeight = 24,
+): Line[] {
+  if (!modal.agentId) return [];
+  const metrics = getOverlaySurfaceMetrics(width, viewportHeight, {
+    margin: 2,
+    maxWidth: width - 4,
+    chromeRows: 6,
+    minContentRows: 10,
+    maxContentRows: 22,
+  });
+  const targetContentRows = Math.max(18, Math.min(22, getStableOverlayContentRows(metrics.contentRows, 12) + 8));
+
+  const rec = modal.deps.agentManager.getStatus(modal.agentId);
+  if (!rec) {
+    return ModalFactory.createModal({
+      title: 'Agent Detail',
+      width: metrics.boxWidth,
+      margin: metrics.margin,
+      targetContentRows,
+      sections: [
+        { type: 'text', content: '(agent not found)' },
+      ],
+      hints: ['[Esc] Close'],
+    }, width);
+  }
+
+  const now = Date.now();
+  const elapsedMs = (rec.completedAt ?? now) - rec.startedAt;
+  const tokenEst = estimateTokens(rec.toolCallCount);
+
+  // ── Build sections ────────────────────────────────────────────────────────
+
+  const sections: import('./modal-factory.ts').ModalSection[] = [];
+
+  // Task — show first line only, capped at 120 chars
+  const taskFirstLine = rec.task.split('\n')[0].replace(/^(WRFC\s+(Fix|Review)\s+Request\s*)/i, '').trim();
+  const taskDisplay = taskFirstLine.length > 120 ? taskFirstLine.slice(0, 117) + '\u2026' : taskFirstLine;
+  sections.push({
+    type: 'text',
+    content: `Task: ${taskDisplay}`,
+    style: { bold: true },
+  });
+  sections.push({ type: 'separator' });
+
+  // Metadata grid
+  const modelStr = rec.model ? `${rec.provider ?? ''}/${rec.model}` : (rec.provider ?? '(default)');
+  sections.push({ type: 'text', content: `Template : ${rec.template}` });
+  sections.push({ type: 'text', content: `Model    : ${modelStr}` });
+  sections.push({ type: 'text', content: `Status   : ${rec.status}` });
+  sections.push({ type: 'text', content: `Duration : ${formatDuration(elapsedMs)}` });
+  sections.push({ type: 'separator' });
+
+  // Metrics
+  sections.push({ type: 'text', content: `Tool calls : ${rec.toolCallCount}` });
+  sections.push({ type: 'text', content: `Est tokens : ~${tokenEst.toLocaleString()}` });
+
+  // Progress
+  if (rec.progress) {
+    sections.push({ type: 'separator' });
+    sections.push({
+      type: 'text',
+      content: `Progress: ${rec.progress}`,
+      style: { fg: '#00ffcc' },
+    });
+  }
+
+  // Error
+  if (rec.error) {
+    sections.push({ type: 'separator' });
+    sections.push({
+      type: 'text',
+      content: `Error: ${rec.error}`,
+      style: { fg: '#ff6666' },
+    });
+  }
+
+  // Recent messages from AgentMessageBus
+  const recentMessages = modal.deps.agentMessageBus
+    .getMessages(modal.agentId)
+    .slice(-4); // last 4 messages
+
+  if (recentMessages.length > 0) {
+    sections.push({ type: 'separator' });
+    sections.push({
+      type: 'text',
+      content: `Recent messages (${recentMessages.length}):`,
+      style: { dim: true },
+    });
+    for (const msg of recentMessages) {
+      const fromLabel = msg.from === '*' ? 'broadcast' : msg.from.slice(0, 12);
+      const preview = msg.content.length > 50
+        ? msg.content.slice(0, 47) + '\u2026'
+        : msg.content;
+      sections.push({
+        type: 'text',
+        content: `  [${fromLabel}] ${preview}`,
+        style: { fg: '246' },
+      });
+    }
+  }
+
+  // Execution history from cached JSONL session log (loaded on open())
+  if (modal.logEntries.length > 0) {
+    sections.push({ type: 'separator' });
+    sections.push({
+      type: 'text',
+      content: `Execution Log (${modal.logTotal} events, showing last ${modal.logEntries.length}):`,
+      style: { dim: true },
+    });
+    for (const entry of modal.logEntries) {
+      const entryType = String(entry.type ?? 'unknown');
+      const rawTs = entry.timestamp;
+      const ts = typeof rawTs === 'string' && rawTs.length >= 19
+        ? rawTs.slice(11, 19)
+        : '';
+      let detail = '';
+      if (entryType === 'tool_execution') detail = ` ${entry.toolName}`;
+      if (entryType === 'llm_response') detail = ` (${entry.toolCallCount} tools, ${entry.contentLength} chars)`;
+      if (entryType === 'session_end') detail = ` [${entry.status}]`;
+      sections.push({
+        type: 'text',
+        content: `  ${ts} ${entryType}${detail}`,
+        style: { fg: '246' },
+      });
+    }
+  }
+
+  // Streaming content — show live output when agent is actively streaming
+  const STREAMING_MAX_CHARS = 500;
+  if (rec.status === 'running' && rec.streamingContent) {
+    const content = rec.streamingContent;
+    const truncated = content.length > STREAMING_MAX_CHARS;
+    const display = truncated ? content.slice(-STREAMING_MAX_CHARS) : content;
+    sections.push({ type: 'separator' });
+    sections.push({
+      type: 'text',
+      content: truncated
+        ? `Streaming (last ${STREAMING_MAX_CHARS} of ${content.length} chars \u2191 scroll for more):`
+        : 'Streaming:',
+      style: { fg: '#00ffcc', dim: true },
+    });
+    // Split into display lines, capped at width for readability
+    const maxLineWidth = Math.max(width - 10, 40);
+    const streamLines = display.split('\n');
+    for (const line of streamLines) {
+      const trimmed = line.length > maxLineWidth ? line.slice(0, maxLineWidth - 1) + '\u2026' : line;
+      sections.push({
+        type: 'text',
+        content: `  ${trimmed}`,
+        style: { fg: '#aaffee' },
+      });
+    }
+  }
+
+  return ModalFactory.createModal({
+    title: `Agent: ${rec.id.slice(0, AGENT_ID_DISPLAY_LENGTH)}`,
+    width: metrics.boxWidth,
+    margin: metrics.margin,
+    targetContentRows,
+    sections,
+    hints: ['[Esc] Close'],
+  }, width);
+}