@renxqoo/renx-code 0.0.3 → 0.0.4

package/src/agent/runtime/tool-call-buffer.ts

@@ -0,0 +1,60 @@
+import type { AgentToolUseEvent } from './types';
+
+const readToolCallId = (event: AgentToolUseEvent): string | undefined => {
+  const maybeId = (event as { id?: unknown }).id;
+  return typeof maybeId === 'string' && maybeId.length > 0 ? maybeId : undefined;
+};
+
+export class ToolCallBuffer {
+  private readonly plannedOrder: string[] = [];
+  private readonly plannedIds = new Set<string>();
+  private readonly toolCallsById = new Map<string, AgentToolUseEvent>();
+  private readonly emittedIds = new Set<string>();
+
+  register(
+    toolCall: AgentToolUseEvent,
+    emit: (event: AgentToolUseEvent) => void,
+    executing = false
+  ) {
+    const toolCallId = readToolCallId(toolCall);
+    if (!toolCallId) {
+      emit(toolCall);
+      return;
+    }
+
+    this.toolCallsById.set(toolCallId, toolCall);
+    if (!this.plannedIds.has(toolCallId)) {
+      this.plannedIds.add(toolCallId);
+      this.plannedOrder.push(toolCallId);
+    }
+
+    if (executing) {
+      this.emit(toolCallId, emit);
+    }
+  }
+
+  flush(emit: (event: AgentToolUseEvent) => void) {
+    for (const toolCallId of this.plannedOrder) {
+      this.emit(toolCallId, emit);
+    }
+  }
+
+  ensureEmitted(toolCallId: string | undefined, emit: (event: AgentToolUseEvent) => void) {
+    if (!toolCallId) {
+      return;
+    }
+    this.emit(toolCallId, emit);
+  }
+
+  private emit(toolCallId: string, emit: (event: AgentToolUseEvent) => void) {
+    if (this.emittedIds.has(toolCallId)) {
+      return;
+    }
+    const toolCall = this.toolCallsById.get(toolCallId);
+    if (!toolCall) {
+      return;
+    }
+    this.emittedIds.add(toolCallId);
+    emit(toolCall);
+  }
+}

package/src/agent/runtime/tool-confirmation.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import type { AgentEventHandlers, AgentToolConfirmEvent } from './types';
+
+const TOOL_CONFIRM_EVENT: AgentToolConfirmEvent = {
+  toolCallId: 'call_1',
+  toolName: 'glob',
+  args: {
+    pattern: '**/*sandbox*',
+    path: '/tmp/project',
+  },
+  rawArgs: {
+    pattern: '**/*sandbox*',
+    path: '/tmp/project',
+  },
+  reason: 'SEARCH_PATH_NOT_ALLOWED: /tmp/project is outside allowed directories: /workspace',
+  metadata: {
+    requestedPath: '/tmp/project',
+    allowedDirectories: ['/workspace'],
+  },
+};
+
+describe('resolveToolConfirmDecision', () => {
+  it('asks the UI callback when registered', async () => {
+    const { resolveToolConfirmDecision } =
+      await vi.importActual<typeof import('./tool-confirmation')>('./tool-confirmation');
+    const calls: AgentToolConfirmEvent[] = [];
+    const onToolConfirmRequest: NonNullable<
+      AgentEventHandlers['onToolConfirmRequest']
+    > = async event => {
+      calls.push(event);
+      return {
+        approved: false,
+        message: 'Denied by user',
+      };
+    };
+
+    const decision = await resolveToolConfirmDecision(TOOL_CONFIRM_EVENT, { onToolConfirmRequest });
+
+    expect(decision).toEqual({
+      approved: false,
+      message: 'Denied by user',
+    });
+    expect(calls).toEqual([TOOL_CONFIRM_EVENT]);
+  });
+
+  it('falls back to approve when no UI callback is registered', async () => {
+    const { resolveToolConfirmDecision } =
+      await vi.importActual<typeof import('./tool-confirmation')>('./tool-confirmation');
+    const decision = await resolveToolConfirmDecision(TOOL_CONFIRM_EVENT, {});
+
+    expect(decision).toEqual({
+      approved: true,
+    });
+  });
+});

package/src/agent/runtime/tool-confirmation.ts

@@ -0,0 +1,15 @@
+import type { AgentEventHandlers, AgentToolConfirmDecision, AgentToolConfirmEvent } from './types';
+
+const DEFAULT_FALLBACK_DECISION: AgentToolConfirmDecision = { approved: true };
+
+export const resolveToolConfirmDecision = async (
+  event: AgentToolConfirmEvent,
+  handlers: AgentEventHandlers
+): Promise<AgentToolConfirmDecision> => {
+  if (!handlers.onToolConfirmRequest) {
+    return DEFAULT_FALLBACK_DECISION;
+  }
+
+  const decision = await handlers.onToolConfirmRequest(event);
+  return decision ?? { approved: false, message: 'Tool confirmation was not resolved.' };
+};

package/src/agent/runtime/types.ts

@@ -0,0 +1,99 @@
+export type AgentTextDeltaEvent = {
+  text: string;
+  isReasoning?: boolean;
+};
+
+export type AgentToolStreamEvent = {
+  toolCallId: string;
+  toolName: string;
+  type: string;
+  sequence: number;
+  timestamp: number;
+  content?: string;
+  data?: unknown;
+};
+
+export type AgentToolConfirmEvent = {
+  toolCallId: string;
+  toolName: string;
+  args: Record<string, unknown>;
+  rawArgs: Record<string, unknown>;
+  reason?: string;
+  metadata?: Record<string, unknown>;
+};
+
+export type AgentToolConfirmDecision = {
+  approved: boolean;
+  message?: string;
+};
+
+export type AgentStepEvent = {
+  stepIndex: number;
+  finishReason?: string;
+  toolCallsCount: number;
+};
+
+export type AgentToolUseEvent = {
+  [key: string]: unknown;
+};
+
+export type AgentToolResultEvent = {
+  toolCall: unknown;
+  result: unknown;
+};
+
+export type AgentLoopEvent = {
+  loopIndex: number;
+  steps: number;
+};
+
+export type AgentStopEvent = {
+  reason: string;
+  message?: string;
+};
+
+export type AgentUsageEvent = {
+  promptTokens: number;
+  completionTokens: number;
+  totalTokens: number;
+  cumulativePromptTokens?: number;
+  cumulativeCompletionTokens?: number;
+  cumulativeTotalTokens?: number;
+  contextTokens?: number;
+  contextLimit?: number;
+  contextUsagePercent?: number;
+};
+
+export type AgentContextUsageEvent = {
+  stepIndex: number;
+  messageCount: number;
+  contextTokens: number;
+  contextLimit: number;
+  contextUsagePercent: number;
+};
+
+export type AgentEventHandlers = {
+  onTextDelta?: (event: AgentTextDeltaEvent) => void;
+  onTextComplete?: (text: string) => void;
+  onToolStream?: (event: AgentToolStreamEvent) => void;
+  onToolConfirm?: (event: AgentToolConfirmEvent) => void;
+  onToolConfirmRequest?: (
+    event: AgentToolConfirmEvent
+  ) => AgentToolConfirmDecision | Promise<AgentToolConfirmDecision>;
+  onToolUse?: (event: AgentToolUseEvent) => void;
+  onToolResult?: (event: AgentToolResultEvent) => void;
+  onStep?: (event: AgentStepEvent) => void;
+  onLoop?: (event: AgentLoopEvent) => void;
+  onStop?: (event: AgentStopEvent) => void;
+  onContextUsage?: (event: AgentContextUsageEvent) => void;
+  onUsage?: (event: AgentUsageEvent) => void;
+};
+
+export type AgentRunResult = {
+  text: string;
+  completionReason: string;
+  completionMessage?: string;
+  durationSeconds: number;
+  modelLabel: string;
+  usage?: AgentUsageEvent;
+};

package/src/commands/slash-commands.test.ts

@@ -0,0 +1,216 @@
+import { describe, expect, it } from 'vitest';
+
+import { SLASH_COMMANDS, filterSlashCommands, resolveSlashCommand } from './slash-commands';
+
+describe('slash-commands', () => {
+  describe('resolveSlashCommand', () => {
+    it('should return null for empty input', () => {
+      expect(resolveSlashCommand('')).toBe(null);
+      expect(resolveSlashCommand('   ')).toBe(null);
+      expect(resolveSlashCommand('\t\n')).toBe(null);
+    });
+
+    it('should return null for non-slash commands', () => {
+      expect(resolveSlashCommand('hello world')).toBe(null);
+      // 'help me' returns help command because the first token 'help' matches
+      // but the caller checks text.startsWith('/') before using runCommand
+      expect(resolveSlashCommand('help me')?.name).toBe('help');
+      expect(resolveSlashCommand('/invalid')).toBe(null);
+    });
+
+    it('should resolve commands by name', () => {
+      const helpCommand = resolveSlashCommand('/help');
+      expect(helpCommand).not.toBe(null);
+      expect(helpCommand?.name).toBe('help');
+      expect(helpCommand?.action).toBe('help');
+
+      const clearCommand = resolveSlashCommand('/clear');
+      expect(clearCommand?.name).toBe('clear');
+      expect(clearCommand?.action).toBe('clear');
+
+      const exitCommand = resolveSlashCommand('/exit');
+      expect(exitCommand?.name).toBe('exit');
+      expect(exitCommand?.action).toBe('exit');
+
+      const modelsCommand = resolveSlashCommand('/models');
+      expect(modelsCommand?.name).toBe('models');
+      expect(modelsCommand?.action).toBe('models');
+
+      const filesCommand = resolveSlashCommand('/files');
+      expect(filesCommand?.name).toBe('files');
+      expect(filesCommand?.action).toBe('files');
+    });
+
+    it('should resolve commands with aliases', () => {
+      // Test aliases for clear
+      const clearAlias1 = resolveSlashCommand('/new');
+      expect(clearAlias1?.name).toBe('clear');
+      expect(clearAlias1?.action).toBe('clear');
+
+      // Test aliases for exit
+      const exitAlias1 = resolveSlashCommand('/quit');
+      expect(exitAlias1?.name).toBe('exit');
+      expect(exitAlias1?.action).toBe('exit');
+
+      const exitAlias2 = resolveSlashCommand('/q');
+      expect(exitAlias2?.name).toBe('exit');
+      expect(exitAlias2?.action).toBe('exit');
+
+      // Test aliases for help
+      const helpAlias1 = resolveSlashCommand('/commands');
+      expect(helpAlias1?.name).toBe('help');
+      expect(helpAlias1?.action).toBe('help');
+
+      // Test aliases for models
+      const modelsAlias1 = resolveSlashCommand('/model');
+      expect(modelsAlias1?.name).toBe('models');
+      expect(modelsAlias1?.action).toBe('models');
+
+      const filesAlias1 = resolveSlashCommand('/file');
+      expect(filesAlias1?.name).toBe('files');
+      expect(filesAlias1?.action).toBe('files');
+    });
+
+    it('should resolve commands with extra text after command', () => {
+      const helpCommand = resolveSlashCommand('/help please');
+      expect(helpCommand?.name).toBe('help');
+
+      const clearCommand = resolveSlashCommand('/clear now');
+      expect(clearCommand?.name).toBe('clear');
+
+      const modelsCommand = resolveSlashCommand('/models with space');
+      expect(modelsCommand?.name).toBe('models');
+
+      const filesCommand = resolveSlashCommand('/files pick');
+      expect(filesCommand?.name).toBe('files');
+    });
+
+    it('should be case insensitive', () => {
+      expect(resolveSlashCommand('/HELP')?.name).toBe('help');
+      expect(resolveSlashCommand('/Help')?.name).toBe('help');
+      expect(resolveSlashCommand('/hElP')?.name).toBe('help');
+
+      expect(resolveSlashCommand('/CLEAR')?.name).toBe('clear');
+      expect(resolveSlashCommand('/Clear')?.name).toBe('clear');
+
+      expect(resolveSlashCommand('/MODELS')?.name).toBe('models');
+      expect(resolveSlashCommand('/Models')?.name).toBe('models');
+
+      expect(resolveSlashCommand('/FILES')?.name).toBe('files');
+      expect(resolveSlashCommand('/File')?.name).toBe('files');
+    });
+
+    it('should handle commands with leading/trailing spaces', () => {
+      expect(resolveSlashCommand('  /help  ')?.name).toBe('help');
+      expect(resolveSlashCommand('\t/clear\n')?.name).toBe('clear');
+      expect(resolveSlashCommand('  /models  please')?.name).toBe('models');
+      expect(resolveSlashCommand('  /files  now')?.name).toBe('files');
+    });
+
+    it('should return unsupported commands', () => {
+      const exportCommand = resolveSlashCommand('/export');
+      expect(exportCommand?.name).toBe('export');
+      expect(exportCommand?.action).toBe('unsupported');
+
+      const forkCommand = resolveSlashCommand('/fork');
+      expect(forkCommand?.name).toBe('fork');
+      expect(forkCommand?.action).toBe('unsupported');
+    });
+  });
+
+  describe('filterSlashCommands', () => {
+    it('should return all commands for empty query', () => {
+      const result = filterSlashCommands('');
+      expect(result).toEqual(SLASH_COMMANDS);
+
+      const result2 = filterSlashCommands('   ');
+      expect(result2).toEqual(SLASH_COMMANDS);
+    });
+
+    it('should filter commands by name prefix', () => {
+      const result = filterSlashCommands('h');
+      expect(result.length).toBeGreaterThan(0);
+      expect(
+        result.every(
+          cmd => cmd.name.includes('h') || cmd.aliases?.some(alias => alias.includes('h'))
+        )
+      ).toBe(true);
+
+      const result2 = filterSlashCommands('he');
+      const helpCommands = result2.filter(
+        cmd => cmd.name.startsWith('he') || cmd.aliases?.some(alias => alias.startsWith('he'))
+      );
+      expect(helpCommands.length).toBeGreaterThan(0);
+    });
+
+    it('should filter commands by name substring', () => {
+      const result = filterSlashCommands('elp'); // part of "help"
+      expect(result.length).toBeGreaterThan(0);
+      expect(result.some(cmd => cmd.name === 'help')).toBe(true);
+    });
+
+    it('should filter commands by alias', () => {
+      const result = filterSlashCommands('q'); // alias for exit
+      expect(result.some(cmd => cmd.name === 'exit')).toBe(true);
+
+      const result2 = filterSlashCommands('commands'); // alias for help
+      expect(result2.some(cmd => cmd.name === 'help')).toBe(true);
+    });
+
+    it('should be case insensitive', () => {
+      const result1 = filterSlashCommands('HELP');
+      const result2 = filterSlashCommands('help');
+      expect(result1).toEqual(result2);
+
+      const result3 = filterSlashCommands('CLEAR');
+      const result4 = filterSlashCommands('clear');
+      expect(result3).toEqual(result4);
+    });
+
+    it('should handle queries with spaces', () => {
+      const result = filterSlashCommands('  help  ');
+      expect(result.some(cmd => cmd.name === 'help')).toBe(true);
+    });
+
+    it('should return empty array for non-matching query', () => {
+      const result = filterSlashCommands('xyz123nonexistent');
+      expect(result).toEqual([]);
+    });
+  });
+
+  describe('SLASH_COMMANDS', () => {
+    it('should have required fields for all commands', () => {
+      SLASH_COMMANDS.forEach(command => {
+        expect(command.name).toBeDefined();
+        expect(command.description).toBeDefined();
+        expect(command.action).toBeDefined();
+        expect(['help', 'clear', 'exit', 'models', 'files', 'unsupported']).toContain(
+          command.action
+        );
+      });
+    });
+
+    it('should have unique names', () => {
+      const names = SLASH_COMMANDS.map(cmd => cmd.name);
+      const uniqueNames = new Set(names);
+      expect(names.length).toBe(uniqueNames.size);
+    });
+
+    it('should have proper aliases', () => {
+      const clearCommand = SLASH_COMMANDS.find(cmd => cmd.name === 'clear');
+      expect(clearCommand?.aliases).toEqual(['new']);
+
+      const exitCommand = SLASH_COMMANDS.find(cmd => cmd.name === 'exit');
+      expect(exitCommand?.aliases).toEqual(['quit', 'q']);
+
+      const helpCommand = SLASH_COMMANDS.find(cmd => cmd.name === 'help');
+      expect(helpCommand?.aliases).toEqual(['commands']);
+
+      const modelsCommand = SLASH_COMMANDS.find(cmd => cmd.name === 'models');
+      expect(modelsCommand?.aliases).toEqual(['model']);
+
+      const filesCommand = SLASH_COMMANDS.find(cmd => cmd.name === 'files');
+      expect(filesCommand?.aliases).toEqual(['file']);
+    });
+  });
+});

package/src/commands/slash-commands.ts

@@ -0,0 +1,64 @@
+export type SlashCommandAction = 'help' | 'clear' | 'exit' | 'models' | 'files' | 'unsupported';
+
+export type SlashCommandDefinition = {
+  name: string;
+  description: string;
+  action: SlashCommandAction;
+  aliases?: string[];
+};
+
+export const SLASH_COMMANDS: SlashCommandDefinition[] = [
+  { name: 'help', description: 'Help', action: 'help', aliases: ['commands'] },
+  { name: 'clear', description: 'Clear conversation', action: 'clear', aliases: ['new'] },
+  { name: 'exit', description: 'Exit app', action: 'exit', aliases: ['quit', 'q'] },
+  { name: 'export', description: 'Export session transcript', action: 'unsupported' },
+  { name: 'fork', description: 'Fork from message', action: 'unsupported' },
+  { name: 'init', description: 'create/update AGENTS.md', action: 'unsupported' },
+  { name: 'mcps', description: 'Toggle MCPs', action: 'unsupported', aliases: ['mcp'] },
+  { name: 'models', description: 'Switch model', action: 'models', aliases: ['model'] },
+  { name: 'files', description: 'Attach workspace files', action: 'files', aliases: ['file'] },
+  { name: 'rename', description: 'Rename session', action: 'unsupported' },
+  { name: 'review', description: 'Review changes', action: 'unsupported' },
+  { name: 'sessions', description: 'Switch session', action: 'unsupported', aliases: ['session'] },
+];
+
+const normalize = (value: string) => value.trim().toLowerCase();
+
+const getCommandToken = (value: string): string => {
+  const normalized = normalize(value);
+  const token = normalized.split(/\s+/, 1)[0] ?? '';
+  return token.startsWith('/') ? token.slice(1) : token;
+};
+
+export const resolveSlashCommand = (value: string): SlashCommandDefinition | null => {
+  const token = getCommandToken(value);
+  if (!token) {
+    return null;
+  }
+
+  return (
+    SLASH_COMMANDS.find(command => {
+      if (command.name === token) {
+        return true;
+      }
+      return command.aliases?.includes(token) ?? false;
+    }) ?? null
+  );
+};
+
+export const filterSlashCommands = (query: string): SlashCommandDefinition[] => {
+  const normalizedQuery = normalize(query);
+  if (!normalizedQuery) {
+    return SLASH_COMMANDS;
+  }
+
+  return SLASH_COMMANDS.filter(command => {
+    if (command.name.startsWith(normalizedQuery)) {
+      return true;
+    }
+    if (command.name.includes(normalizedQuery)) {
+      return true;
+    }
+    return command.aliases?.some(alias => alias.includes(normalizedQuery)) ?? false;
+  });
+};

package/src/components/chat/assistant-reply.test.tsx

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest';
+
+import type { AssistantReply as AssistantReplyType } from '../../types/chat';
+import { buildUsageItems, getCompletionErrorMessage } from './assistant-reply';
+
+const createReply = (overrides: Partial<AssistantReplyType> = {}): AssistantReplyType => ({
+  agentLabel: '',
+  modelLabel: 'glm-5',
+  durationSeconds: 0.8,
+  segments: [],
+  status: 'done',
+  ...overrides,
+});
+
+describe('assistant-reply helpers', () => {
+  it('extracts completion error messages for error replies', () => {
+    const reply = createReply({
+      status: 'error',
+      completionReason: 'error',
+      completionMessage: 'Server returned 500: upstream provider timeout',
+    });
+
+    expect(getCompletionErrorMessage(reply)).toBe('Server returned 500: upstream provider timeout');
+  });
+
+  it('ignores completion messages for non-error replies', () => {
+    const reply = createReply({
+      status: 'done',
+      completionReason: 'stop',
+      completionMessage: 'Should not be shown',
+    });
+
+    expect(getCompletionErrorMessage(reply)).toBeUndefined();
+  });
+
+  it('keeps usage items compact and directional', () => {
+    const reply = createReply({
+      usagePromptTokens: 1250,
+      usageCompletionTokens: 2400,
+    });
+
+    expect(buildUsageItems(reply)).toEqual([
+      { icon: '↑', value: '1.25k' },
+      { icon: '↓', value: '2.40k' },
+    ]);
+  });
+});

package/src/components/chat/assistant-reply.tsx

@@ -0,0 +1,136 @@
+import { useEffect, useState } from 'react';
+
+import type { AssistantReply as AssistantReplyType } from '../../types/chat';
+import { uiTheme } from '../../ui/theme';
+import { AssistantSegment } from './assistant-segment';
+import { AssistantToolGroup } from './assistant-tool-group';
+import { buildReplyRenderItems } from './segment-groups';
+
+type AssistantReplyProps = {
+  reply: AssistantReplyType;
+};
+
+export type AssistantReplyUsageItem = {
+  icon: '↓' | '↑';
+  value: string;
+};
+
+const renderStatus = (status: AssistantReplyType['status']) => {
+  if (status === 'streaming') {
+    return 'streaming';
+  }
+  if (status === 'error') {
+    return 'error';
+  }
+  return undefined;
+};
+
+const formatDurationSeconds = (reply: AssistantReplyType, nowMs: number): string => {
+  if (reply.status !== 'streaming') {
+    return reply.durationSeconds.toFixed(1);
+  }
+  if (typeof reply.startedAtMs !== 'number') {
+    return reply.durationSeconds.toFixed(1);
+  }
+  const elapsedSeconds = Math.max(0, (nowMs - reply.startedAtMs) / 1000);
+  return Math.max(reply.durationSeconds, elapsedSeconds).toFixed(1);
+};
+
+const formatTokenCount = (tokens: number): string => {
+  if (tokens >= 1_000_000) {
+    return `${(tokens / 1_000_000).toFixed(2)}M`;
+  }
+  return `${(tokens / 1_000).toFixed(2)}k`;
+};
+
+const normalizeUsageTokens = (tokens: number | undefined): string | undefined => {
+  if (typeof tokens !== 'number' || !Number.isFinite(tokens)) {
+    return undefined;
+  }
+  return formatTokenCount(Math.max(0, Math.round(tokens)));
+};
+
+export const buildUsageItems = (
+  reply: Pick<AssistantReplyType, 'usagePromptTokens' | 'usageCompletionTokens'>
+): AssistantReplyUsageItem[] => {
+  const items: AssistantReplyUsageItem[] = [];
+  const promptTokens = normalizeUsageTokens(reply.usagePromptTokens);
+  const completionTokens = normalizeUsageTokens(reply.usageCompletionTokens);
+
+  if (promptTokens) {
+    items.push({ icon: '↑', value: promptTokens });
+  }
+  if (completionTokens) {
+    items.push({ icon: '↓', value: completionTokens });
+  }
+
+  return items;
+};
+
+export const getCompletionErrorMessage = (reply: AssistantReplyType): string | undefined => {
+  if (reply.status !== 'error' && reply.completionReason !== 'error') {
+    return undefined;
+  }
+
+  const message = reply.completionMessage?.trim();
+  return message ? message : undefined;
+};
+
+export const AssistantReply = ({ reply }: AssistantReplyProps) => {
+  const status = renderStatus(reply.status);
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  const items = buildReplyRenderItems(reply.segments);
+  const isStreaming = reply.status === 'streaming';
+
+  useEffect(() => {
+    if (reply.status !== 'streaming') {
+      return;
+    }
+    const timer = setInterval(() => {
+      setNowMs(Date.now());
+    }, 100);
+    return () => {
+      clearInterval(timer);
+    };
+  }, [reply.status]);
+
+  const durationText = formatDurationSeconds(reply, nowMs);
+  const usageItems = buildUsageItems(reply);
+  const completionErrorMessage = getCompletionErrorMessage(reply);
+
+  return (
+    <box flexDirection="column" gap={1}>
+      {items.map((item, index) =>
+        item.type === 'tool' ? (
+          <AssistantToolGroup
+            key={`tool-group:${item.group.toolCallId}:${index}`}
+            group={item.group}
+          />
+        ) : (
+          <AssistantSegment key={item.segment.id} segment={item.segment} streaming={isStreaming} />
+        )
+      )}
+      {completionErrorMessage ? (
+        <box backgroundColor={uiTheme.surface} paddingX={2} paddingY={1}>
+          <text fg="#c2410c" attributes={uiTheme.typography.body} wrapMode="word">
+            {completionErrorMessage}
+          </text>
+        </box>
+      ) : null}
+      <box flexDirection="row" gap={1} paddingLeft={3}>
+        <text fg={uiTheme.muted} attributes={uiTheme.typography.muted}>
+          <span fg={uiTheme.accent}>▣</span> assistant
+          <span fg={uiTheme.muted}> · {reply.modelLabel}</span>
+          <span fg={uiTheme.muted}> · {durationText}s</span>
+          {usageItems.map(item => (
+            <span key={`${item.icon}:${item.value}`} fg={uiTheme.muted}>
+              {' · '}
+              {item.icon} {item.value}
+            </span>
+          ))}
+          {status ? <span fg={uiTheme.muted}> · {status}</span> : null}
+        </text>
+      </box>
+    </box>
+  );
+};