codemini-cli 0.1.18 → 0.2.0

package/src/tui/chat-app.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Box, Text, useApp, useInput } from 'ink';
 import { shouldCaptureEscapeSequence } from './input-escape.js';
+import { classifyCommandIntent } from '../core/shell.js';
 
 const h = React.createElement;
 const SUGGESTION_PAGE_SIZE = 8;
@@ -63,6 +64,8 @@ const TUI_COPY = {
       ready: '就绪',
       noMessagesYet: '还没有消息',
       code: '代码',
+      codeActivity: '代码活动',
+      textNotes: '说明文本',
       live: '运行中',
       idle: '空闲',
       plan: '计划',
@@ -81,7 +84,7 @@ const TUI_COPY = {
       pendingQueue: '等待队列',
       commandPaletteGroupedSelect: '命令面板 | 分组选择模式',
       commandPaletteGroupedSuggestions: '命令面板 | 分组候选',
-      startupHint: '使用 /help、/commands、/exit、!<shell>。Tab 可自动补全 slash 命令。',
+      startupHint: '使用 /help、/commands、/compact、/exit、!<shell>。Tab 可自动补全 slash 命令。',
       toolSummaryExpanded: '工具摘要：已展开',
       toolSummaryCollapsed: '工具摘要：已收起',
       toggleToolSummary: 'Ctrl+T 切换',
@@ -103,8 +106,12 @@ const TUI_COPY = {
       blocked: '工具被拦截',
       doneRead: '已读取文件',
       doingRead: '正在读取文件',
+      doneEdit: '已编辑文件',
+      doingEdit: '正在编辑文件',
       doneWrite: '已写入文件',
       doingWrite: '正在写入文件',
+      donePatch: '已应用补丁',
+      doingPatch: '正在应用补丁',
       doneList: '已查看目录',
       doingList: '正在查看目录',
       doneCommand: '已执行命令',
@@ -115,6 +122,22 @@ const TUI_COPY = {
       doingUpdateTask: '正在更新任务',
       doneGeneric: '已完成工具',
       doingGeneric: '正在执行工具',
+      doneInstall: '已安装依赖',
+      doingInstall: '正在安装依赖',
+      doneBuild: '已完成构建',
+      doingBuild: '正在构建',
+      doneTest: '已完成测试',
+      doingTest: '正在运行测试',
+      doneFrontend: '已启动前端服务',
+      doingFrontend: '正在启动前端服务',
+      doneBackend: '已启动后端服务',
+      doingBackend: '正在启动后端服务',
+      doneDatabase: '已启动数据库服务',
+      doingDatabase: '正在启动数据库服务',
+      doneDocker: '已完成 Docker 命令',
+      doingDocker: '正在执行 Docker 命令',
+      doneCodeGeneration: '已生成代码',
+      doingCodeGeneration: '正在生成代码',
       doneSkill: '已完成技能',
       doingSkill: '正在执行技能',
       toolFailed: (name) => `工具执行失败: ${name}`,
@@ -137,6 +160,7 @@ const TUI_COPY = {
       modelThinking: '模型正在思考',
       requestDelivered: '请求已送达，等待首个 token',
       generatingReply: '正在生成回复',
+      generatingCode: '正在生成代码中',
       streamingReply: '回复正在流式输出',
       replyCompleted: '回复已完成',
       outputFinished: '本轮输出结束',
@@ -147,6 +171,7 @@ const TUI_COPY = {
       skillRunning: '技能执行中',
       skillCompleted: '技能已完成',
       skillFailed: '技能执行失败',
+      autoSkillInjected: (names) => `自动启用技能: ${names.map((name) => `/${name}`).join(', ')}`,
       compactingContext: '正在压缩上下文',
       autoCompactTriggered: (mode, threshold) => `自动压缩已触发（${mode}，阈值 ${threshold}%）`,
       requestFailed: '请求失败',
@@ -165,6 +190,8 @@ const TUI_COPY = {
       ready: 'ready',
       noMessagesYet: 'No messages yet',
       code: 'code',
+      codeActivity: 'CODE ACTIVITY',
+      textNotes: 'NOTES',
       live: 'LIVE',
       idle: 'IDLE',
       plan: 'PLAN',
@@ -183,7 +210,7 @@ const TUI_COPY = {
       pendingQueue: 'pending queue',
       commandPaletteGroupedSelect: 'command palette | grouped select mode',
       commandPaletteGroupedSuggestions: 'command palette | grouped suggestions',
-      startupHint: 'Use /help, /commands, /exit, !<shell>. Tab for slash autocomplete.',
+      startupHint: 'Use /help, /commands, /compact, /exit, !<shell>. Tab for slash autocomplete.',
       toolSummaryExpanded: 'Tool summary: expanded',
       toolSummaryCollapsed: 'Tool summary: collapsed',
       toggleToolSummary: 'Ctrl+T to toggle',
@@ -205,8 +232,12 @@ const TUI_COPY = {
       blocked: 'Tool blocked',
       doneRead: 'Read file',
       doingRead: 'Reading file',
+      doneEdit: 'Edited file',
+      doingEdit: 'Editing file',
       doneWrite: 'Wrote file',
       doingWrite: 'Writing file',
+      donePatch: 'Applied patch',
+      doingPatch: 'Applying patch',
       doneList: 'Listed directory',
       doingList: 'Listing directory',
       doneCommand: 'Ran command',
@@ -217,6 +248,22 @@ const TUI_COPY = {
       doingUpdateTask: 'Updating task',
       doneGeneric: 'Completed tool',
       doingGeneric: 'Running tool',
+      doneInstall: 'Dependencies installed',
+      doingInstall: 'Installing dependencies',
+      doneBuild: 'Build completed',
+      doingBuild: 'Building',
+      doneTest: 'Tests completed',
+      doingTest: 'Running tests',
+      doneFrontend: 'Frontend started',
+      doingFrontend: 'Starting frontend service',
+      doneBackend: 'Backend started',
+      doingBackend: 'Starting backend service',
+      doneDatabase: 'Database started',
+      doingDatabase: 'Starting database service',
+      doneDocker: 'Docker command completed',
+      doingDocker: 'Running Docker command',
+      doneCodeGeneration: 'Code generated',
+      doingCodeGeneration: 'Generating code',
       doneSkill: 'Completed skill',
       doingSkill: 'Running skill',
       toolFailed: (name) => `Tool failed: ${name}`,
@@ -239,6 +286,7 @@ const TUI_COPY = {
       modelThinking: 'model is thinking',
       requestDelivered: 'request sent, waiting for first token',
       generatingReply: 'generating reply',
+      generatingCode: 'generating code',
       streamingReply: 'reply is streaming',
       replyCompleted: 'reply completed',
       outputFinished: 'turn output finished',
@@ -249,6 +297,7 @@ const TUI_COPY = {
       skillRunning: 'skill running',
       skillCompleted: 'skill completed',
       skillFailed: 'skill failed',
+      autoSkillInjected: (names) => `auto-enabled skills: ${names.map((name) => `/${name}`).join(', ')}`,
       compactingContext: 'compacting context',
       autoCompactTriggered: (mode, threshold) => `auto-compact triggered (${mode}, threshold ${threshold}%)`,
       requestFailed: 'request failed',
@@ -294,6 +343,14 @@ function trimText(value, maxLen = 88) {
   return `${text.slice(0, maxLen - 3)}...`;
 }
 
+function safeJsonParse(raw) {
+  try {
+    return JSON.parse(String(raw || '{}'));
+  } catch {
+    return null;
+  }
+}
+
 function parseToolDisplayName(name) {
   const raw = String(name || '').trim();
   const match = raw.match(/^([^(]+)\((.*)\)$/);
@@ -304,18 +361,85 @@ function parseToolDisplayName(name) {
   };
 }
 
+function isCodeGenerationActivityName(name) {
+  return String(name || '').trim() === 'Code generation';
+}
+
+function formatDurationMs(ms) {
+  const safeMs = Math.max(0, Number(ms) || 0);
+  return `${(safeMs / 1000).toFixed(1)}s`;
+}
+
+function getIntentLabel(kind) {
+  switch (kind) {
+    case 'install':
+      return 'Install';
+    case 'build':
+      return 'Build';
+    case 'test':
+      return 'Test';
+    case 'frontend-service':
+      return 'Frontend';
+    case 'backend-service':
+      return 'Backend';
+    case 'database-service':
+      return 'Database';
+    case 'docker-service':
+      return 'Docker';
+    case 'service':
+      return 'Service';
+    default:
+      return 'Run';
+  }
+}
+
+export function formatActivityDurationText(row, nowMs = Date.now()) {
+  if (!row) return '';
+  if (row.status === 'running' && Number.isFinite(Number(row.startedAt))) {
+    const startedAt = Number(row.startedAt);
+    const endedAt = Number(row.endedAt);
+    const elapsed = Number.isFinite(endedAt) && endedAt > startedAt ? endedAt - startedAt : Math.max(0, Number(nowMs) - startedAt);
+    return formatDurationMs(elapsed);
+  }
+  if (typeof row.durationText === 'string' && row.durationText.trim()) {
+    return row.durationText.trim();
+  }
+  if (Number.isFinite(Number(row.durationMs))) {
+    return formatDurationMs(Number(row.durationMs));
+  }
+  return '';
+}
+
 function getActivityDisplayParts(activity) {
+  if (isCodeGenerationActivityName(activity?.name)) {
+    return {
+      primary: 'Code',
+      secondary: ' (generation)'
+    };
+  }
+  const parsed = parseToolDisplayName(activity?.name);
+  if (parsed.base === 'run' || parsed.base === 'start_service') {
+    const intent = classifyCommandIntent(parsed.target);
+    return {
+      primary: getIntentLabel(intent.kind),
+      secondary: parsed.target ? `(${parsed.target})` : ''
+    };
+  }
   if ((activity?.type || 'tool') === 'skill') {
     return {
       primary: `Skill`,
       secondary: `(${activity?.name || 'unknown'})`
     };
   }
-  const parsed = parseToolDisplayName(activity?.name);
   const labels = {
-    read_file: 'Read',
-    write_file: 'Write',
-    run_command: 'Command',
+    read: 'Read',
+    edit: 'Edit',
+    write: 'Write',
+    patch: 'Patch',
+    run: 'Run',
+    grep: 'Grep',
+    glob: 'Glob',
+    list: 'List',
     start_service: 'Service',
     list_services: 'Service',
     get_service_status: 'Service',
@@ -332,35 +456,117 @@ function getActivityDisplayParts(activity) {
 }
 
 function describeToolActivity(name, copy, { done = false, blocked = false } = {}) {
+  const parsed = parseToolDisplayName(name);
+  if (parsed.base === 'run' || parsed.base === 'start_service') {
+    const intent = classifyCommandIntent(parsed.target);
+    const target = parsed.target || intent.kind || 'command';
+    if (intent.kind === 'install') {
+      return blocked
+        ? `${copy.toolActivity.blocked}: ${target}`
+        : done
+          ? `${copy.toolActivity.doneInstall}: ${target}`
+          : `${copy.toolActivity.doingInstall}: ${target}`;
+    }
+    if (intent.kind === 'build') {
+      return blocked
+        ? `${copy.toolActivity.blocked}: ${target}`
+        : done
+          ? `${copy.toolActivity.doneBuild}: ${target}`
+          : `${copy.toolActivity.doingBuild}: ${target}`;
+    }
+    if (intent.kind === 'test') {
+      return blocked
+        ? `${copy.toolActivity.blocked}: ${target}`
+        : done
+          ? `${copy.toolActivity.doneTest}: ${target}`
+          : `${copy.toolActivity.doingTest}: ${target}`;
+    }
+    if (intent.kind === 'frontend-service') {
+      return blocked
+        ? `${copy.toolActivity.blocked}: ${target}`
+        : done
+          ? `${copy.toolActivity.doneFrontend}: ${target}`
+          : `${copy.toolActivity.doingFrontend}: ${target}`;
+    }
+    if (intent.kind === 'backend-service') {
+      return blocked
+        ? `${copy.toolActivity.blocked}: ${target}`
+        : done
+          ? `${copy.toolActivity.doneBackend}: ${target}`
+          : `${copy.toolActivity.doingBackend}: ${target}`;
+    }
+    if (intent.kind === 'database-service') {
+      return blocked
+        ? `${copy.toolActivity.blocked}: ${target}`
+        : done
+          ? `${copy.toolActivity.doneDatabase}: ${target}`
+          : `${copy.toolActivity.doingDatabase}: ${target}`;
+    }
+    if (intent.kind === 'docker-service') {
+      return blocked
+        ? `${copy.toolActivity.blocked}: ${target}`
+        : done
+          ? `${copy.toolActivity.doneDocker}: ${target}`
+          : `${copy.toolActivity.doingDocker}: ${target}`;
+    }
+    if (intent.kind === 'service') {
+      return blocked
+        ? `${copy.toolActivity.blocked}: ${target}`
+        : done
+          ? `${copy.toolActivity.doneGeneric}: ${target}`
+          : `${copy.toolActivity.doingGeneric}: ${target}`;
+    }
+  }
+  if (isCodeGenerationActivityName(name)) {
+    return blocked
+      ? `${copy.toolActivity.blocked}: code generation`
+      : done
+        ? copy.toolActivity.doneCodeGeneration
+        : copy.toolActivity.doingCodeGeneration;
+  }
   const { raw, base, target } = parseToolDisplayName(name);
   const safeTarget = trimText(target, 72);
-  if (base === 'read_file') {
+  if (base === 'read') {
     return blocked
-      ? `${copy.toolActivity.blocked}: read_file(${safeTarget || '.'})`
+      ? `${copy.toolActivity.blocked}: ${base}(${safeTarget || '.'})`
       : done
         ? `${copy.toolActivity.doneRead}: ${safeTarget || '.'}`
         : `${copy.toolActivity.doingRead}: ${safeTarget || '.'}`;
   }
-  if (base === 'write_file') {
+  if (base === 'edit') {
+    return blocked
+      ? `${copy.toolActivity.blocked}: ${base}(${safeTarget || '.'})`
+      : done
+        ? `${copy.toolActivity.doneEdit}: ${safeTarget || '.'}`
+        : `${copy.toolActivity.doingEdit}: ${safeTarget || '.'}`;
+  }
+  if (base === 'write') {
     return blocked
-      ? `${copy.toolActivity.blocked}: write_file(${safeTarget || '.'})`
+      ? `${copy.toolActivity.blocked}: ${base}(${safeTarget || '.'})`
       : done
         ? `${copy.toolActivity.doneWrite}: ${safeTarget || '.'}`
         : `${copy.toolActivity.doingWrite}: ${safeTarget || '.'}`;
   }
-  if (base === 'list_files') {
+  if (base === 'patch') {
+    return blocked
+      ? `${copy.toolActivity.blocked}: ${base}(${safeTarget || '.'})`
+      : done
+        ? `${copy.toolActivity.donePatch}: ${safeTarget || '.'}`
+        : `${copy.toolActivity.doingPatch}: ${safeTarget || '.'}`;
+  }
+  if (base === 'list' || base === 'glob' || base === 'grep') {
     return blocked
-      ? `${copy.toolActivity.blocked}: list_files(${safeTarget || '.'})`
+      ? `${copy.toolActivity.blocked}: ${base}(${safeTarget || '.'})`
       : done
         ? `${copy.toolActivity.doneList}: ${safeTarget || '.'}`
         : `${copy.toolActivity.doingList}: ${safeTarget || '.'}`;
   }
-  if (base === 'run_command') {
+  if (base === 'run') {
     return blocked
-      ? `${copy.toolActivity.blocked}: ${safeTarget || 'run_command'}`
+      ? `${copy.toolActivity.blocked}: ${safeTarget || base}`
       : done
-        ? `${copy.toolActivity.doneCommand}: ${safeTarget || 'run_command'}`
-        : `${copy.toolActivity.doingCommand}: ${safeTarget || 'run_command'}`;
+        ? `${copy.toolActivity.doneCommand}: ${safeTarget || base}`
+        : `${copy.toolActivity.doingCommand}: ${safeTarget || base}`;
   }
   if (base === 'start_service' || base === 'list_services' || base === 'get_service_status' || base === 'get_service_logs' || base === 'stop_service') {
     return blocked
@@ -384,6 +590,21 @@ function describeSkillActivity(name, copy, { done = false, failed = false } = {}
   return `${copy.toolActivity.doingSkill}: /${name}`;
 }
 
+function describeAutoSkillActivity(names, copy) {
+  const safeNames = Array.isArray(names) ? names.filter(Boolean) : [];
+  if (safeNames.length === 0) return '';
+  return copy.runtime.autoSkillInjected(safeNames);
+}
+
+function formatAutoSkillBadge(names, copy) {
+  const safeNames = Array.isArray(names) ? names.filter(Boolean) : [];
+  if (safeNames.length === 0) return '';
+  const [first, ...rest] = safeNames;
+  const suffix = rest.length > 0 ? ` +${rest.length}` : '';
+  const prefix = copy?.roleLabels?.system === 'SYSTEM' ? 'AUTO' : '自动';
+  return `${prefix} /${first}${suffix}`;
+}
+
 function normalizeRuntimeStatus(status, copy) {
   if (status && typeof status === 'object') {
     return {
@@ -451,6 +672,52 @@ function RuntimeStrip({ busy, runtimeStatus, loaderTick, copy }) {
   );
 }
 
+function ContextProgressMeter({ runtimeState, runtimeStatus, compact = false }) {
+  const maxContextTokens = Number(runtimeState?.maxContextTokens || 0);
+  const currentContextTokens = Number(runtimeState?.currentContextTokens || 0);
+  const pctRaw =
+    Number.isFinite(runtimeState?.contextUsagePct) && runtimeState.contextUsagePct >= 0
+      ? runtimeState.contextUsagePct
+      : maxContextTokens > 0
+        ? (currentContextTokens / maxContextTokens) * 100
+        : 0;
+  const pct = Math.min(100, Math.max(0, pctRaw));
+  const filled = Math.min(12, Math.max(0, Math.round((pct / 100) * 12)));
+  const activeColor = pct < 40 ? 'greenBright' : pct < 75 ? 'yellowBright' : 'redBright';
+  const statusColor = runtimeStatus?.color || activeColor;
+  const chunks = Array.from({ length: 12 }, (_, idx) => {
+    const zoneColor = idx < 5 ? 'greenBright' : idx < 9 ? 'yellowBright' : 'redBright';
+    const color = idx < filled ? zoneColor : 'gray';
+    return h(Text, { key: `context-meter-${idx}`, color }, '|');
+  });
+
+  if (compact) {
+    return h(
+      Box,
+      { justifyContent: 'flex-end', alignItems: 'center' },
+      h(Text, { color: 'gray' }, '上下文 '),
+      h(Text, { color: statusColor }, `${Math.round(pct)}% `),
+      h(
+        Box,
+        { flexDirection: 'row' },
+        ...chunks
+      )
+    );
+  }
+
+  return h(
+    Box,
+    { justifyContent: 'flex-end', alignItems: 'center' },
+    h(Text, { color: 'gray' }, '上下文 '),
+    h(Text, { color: statusColor }, `${Math.round(pct)}% `),
+    h(
+      Box,
+      null,
+      ...chunks
+    )
+  );
+}
+
 function PlanStrip({ planState, copy }) {
   if (!planState || !planState.total) return null;
   const progress = `${planState.current}/${planState.total}`;
@@ -611,6 +878,188 @@ export function parsePlanProgressLine(text) {
   };
 }
 
+function getTailPreviewLines(text, maxLines = 3) {
+  const source = String(text || '');
+  if (!source.trim()) return [];
+
+  const lines = source.split('\n').map((line) => line.replace(/\r$/, ''));
+  let insideFence = false;
+  let fenceLines = [];
+  let latestClosedFenceLines = [];
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (trimmed.startsWith('```')) {
+      if (insideFence) {
+        latestClosedFenceLines = fenceLines.slice();
+        insideFence = false;
+        fenceLines = [];
+        continue;
+      }
+      insideFence = true;
+      fenceLines = [];
+      continue;
+    }
+    if (insideFence) {
+      fenceLines.push(line);
+    }
+  }
+
+  if (insideFence) {
+    const codeLines = fenceLines.filter((line) => line.trim().length > 0);
+    if (codeLines.length > 0) {
+      return codeLines.slice(-Math.max(1, maxLines));
+    }
+  }
+
+  const closedFenceLines = latestClosedFenceLines.filter((line) => line.trim().length > 0);
+  if (closedFenceLines.length > 0) {
+    return closedFenceLines.slice(-Math.max(1, maxLines));
+  }
+
+  const tailLines = source
+    .split('\n')
+    .map((line) => line.replace(/\r$/, ''))
+    .filter((line) => line.trim().length > 0);
+  if (tailLines.length === 0) return [];
+  return tailLines.slice(-Math.max(1, maxLines));
+}
+
+function collectPreviewStrings(value, out = []) {
+  if (out.length >= 3 || value == null) return out;
+  if (typeof value === 'string') {
+    if (value.trim()) out.push(value);
+    return out;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      collectPreviewStrings(item, out);
+      if (out.length >= 3) break;
+    }
+    return out;
+  }
+  if (typeof value !== 'object') return out;
+
+  const priorityKeys = ['content', 'new_content', 'new_text', 'patch', 'text', 'code', 'body', 'script', 'source', 'value'];
+  if (value.edit && typeof value.edit === 'object') {
+    collectPreviewStrings(value.edit, out);
+  }
+  for (const key of priorityKeys) {
+    if (out.length >= 3) break;
+    collectPreviewStrings(value[key], out);
+  }
+  return out;
+}
+
+function extractPreviewTextFromRawArguments(raw) {
+  const source = String(raw || '');
+  if (!source.trim()) return '';
+
+  const contentMatch = source.match(/"(content|new_content|new_text|patch|code|body|script|source|value)"\s*:\s*"([\s\S]*)$/);
+  if (!contentMatch) return '';
+
+  return contentMatch[2]
+    .replace(/\\n/g, '\n')
+    .replace(/\\"/g, '"')
+    .replace(/\\\\/g, '\\')
+    .replace(/",?\s*$/g, '')
+    .trim();
+}
+
+function compactPreviewLine(line, maxChars = 56) {
+  const text = String(line || '').replace(/\t/g, '  ').trimEnd();
+  if (!text) return '';
+  if (text.length <= maxChars) return text;
+  return `${text.slice(0, Math.max(1, maxChars - 3))}...`;
+}
+
+function getLatestToolPreviewLines(msg, maxLines = 3) {
+  const toolCalls = [
+    ...(Array.isArray(msg?.pendingToolCalls) ? msg.pendingToolCalls : []),
+    ...(Array.isArray(msg?.toolCalls) ? msg.toolCalls : [])
+  ];
+  const codeTools = new Set(['edit', 'write', 'patch', 'generate_diff']);
+  for (let index = toolCalls.length - 1; index >= 0; index -= 1) {
+    const tool = toolCalls[index];
+    const parsed = parseToolDisplayName(tool?.name);
+    if (!codeTools.has(parsed.base)) continue;
+    const rawArgumentPreview =
+      typeof tool?.arguments === 'string' ? extractPreviewTextFromRawArguments(tool.arguments) : '';
+    const previewSource = rawArgumentPreview
+      ? [rawArgumentPreview]
+      : collectPreviewStrings(tool?.arguments || tool?.content || tool?.summary || []);
+    if (previewSource.length === 0) continue;
+    const combined = previewSource.join('\n');
+    const previewLines = getTailPreviewLines(combined, maxLines);
+    if (previewLines.length > 0) return previewLines.map((line) => compactPreviewLine(line));
+  }
+  return [];
+}
+
+export function getGeneratingCodePlaceholderRows(msg, copy, contentWidth = 72) {
+  const liveStatus = String(msg?.liveStatus || '').trim();
+  if (!msg?.loading || (msg?.phase !== 'generating' && msg?.phase !== 'tooling')) return [];
+  if (liveStatus !== String(copy?.runtime?.generatingCode || '').trim()) return [];
+
+  const previewLines = getLatestToolPreviewLines(msg, 3);
+  if (previewLines.length === 0) return [];
+
+  return previewLines.map((line, idx) => ({
+    kind: 'code-placeholder',
+    lineNo: idx + 1,
+    text: line,
+    color: 'gray'
+  }));
+}
+
+export function getCodeGenerationActivityRows(msg) {
+  const startedAt = Number(msg?.codeGenerationStartedAt);
+  const endedAt = Number(msg?.codeGenerationEndedAt);
+  if (!startedAt || !msg?.loading || endedAt > 0) return [];
+
+  const status = 'running';
+  const durationMs = Math.max(0, Date.now() - startedAt);
+
+  return [
+    {
+      kind: 'activity',
+      activityType: 'tool',
+      name: 'Code generation',
+      status,
+      statusIcon: status === 'done' ? '✓' : '…',
+      statusColor: status === 'done' ? 'greenBright' : 'yellow',
+      durationMs,
+      durationText: formatDurationMs(durationMs),
+      isLatestTool: true,
+      synthetic: true
+    }
+  ];
+}
+
+export function ensureCodeGenerationTiming(msg, now = Date.now()) {
+  if (!msg || msg.codeGenerationStartedAt) return msg;
+  return {
+    ...msg,
+    codeGenerationStartedAt: now,
+    codeGenerationEndedAt: undefined
+  };
+}
+
+export function shouldAppendAssistantResult(result, activeAssistantId, streamedAssistantHandled = false) {
+  if (result?.type !== 'assistant') return true;
+  if (streamedAssistantHandled) return false;
+  return !activeAssistantId;
+}
+
+function finishCodeGeneration(msg, now = Date.now()) {
+  if (!msg?.codeGenerationStartedAt || msg?.codeGenerationEndedAt) return msg;
+  return {
+    ...msg,
+    codeGenerationEndedAt: now,
+    pendingToolCalls: []
+  };
+}
+
 export function injectPlanStateMessage(messages, planState, activeUserMessageId, activeAssistantId) {
   const source = Array.isArray(messages) ? messages : [];
   if (!planState || !planState.total) return source;
@@ -632,6 +1081,21 @@ export function injectPlanStateMessage(messages, planState, activeUserMessageId,
   return [...withNoPlanStrip, synthetic];
 }
 
+export function injectRuntimeStateMessage(messages, runtimeState, runtimeStatus, busy, activeUserMessageId, activeAssistantId) {
+  const source = Array.isArray(messages) ? messages : [];
+  if (!runtimeState) return source;
+  const withoutRuntimeStrip = source.filter((message) => !message?.runtimeStrip);
+  const userIdx = withoutRuntimeStrip.findIndex((message) => message.id === activeUserMessageId);
+  if (userIdx !== -1) {
+    return withoutRuntimeStrip;
+  }
+  const assistantIdx = withoutRuntimeStrip.findIndex((message) => message.id === activeAssistantId);
+  if (assistantIdx !== -1) {
+    return withoutRuntimeStrip;
+  }
+  return withoutRuntimeStrip;
+}
+
 function PlanSummaryBubble({ msg, copy }) {
   const theme = roleStyle(msg.label);
   const summary = msg.planSummary || parseAutoPlanSummaryMessage(msg.text);
@@ -817,6 +1281,56 @@ function isBlankTextRow(row) {
   return row?.kind === 'text' && String(row?.text || '').trim() === '';
 }
 
+function isCodeActivityName(name) {
+  const parsed = parseToolDisplayName(name);
+  return new Set([
+    'edit',
+    'write',
+    'write_file',
+    'patch',
+    'replace_text',
+    'replace_block',
+    'insert_before',
+    'insert_after',
+    'validate_edit',
+    'generate_diff'
+  ]).has(parsed.base);
+}
+
+export function isCodeLikeRow(row) {
+  if (!row) return false;
+  if (row.kind === 'code' || row.kind === 'activity' || row.kind === 'activity-summary') return true;
+  if (row.kind === 'status') return true;
+  return false;
+}
+
+export function splitMessageRows(rows) {
+  const textRows = [];
+  const codeRows = [];
+  for (const row of Array.isArray(rows) ? rows : []) {
+    if (isCodeLikeRow(row)) codeRows.push(row);
+    else textRows.push(row);
+  }
+  return { textRows, codeRows };
+}
+
+export function insertRowsAfterLastCodeRow(rows, extraRows) {
+  const source = Array.isArray(rows) ? rows : [];
+  const inserts = Array.isArray(extraRows) ? extraRows.filter(Boolean) : [];
+  if (inserts.length === 0) return source.slice();
+
+  let insertIndex = -1;
+  for (let index = source.length - 1; index >= 0; index -= 1) {
+    if (source[index]?.kind === 'code') {
+      insertIndex = index + 1;
+      break;
+    }
+  }
+
+  if (insertIndex === -1) return [...source, ...inserts];
+  return [...source.slice(0, insertIndex), ...inserts, ...source.slice(insertIndex)];
+}
+
 export function normalizeActivitySpacingRows(inputRows) {
   const rows = Array.isArray(inputRows) ? inputRows : [];
   const normalized = [];
@@ -863,7 +1377,7 @@ export function normalizeActivitySpacingRows(inputRows) {
 
 function isReadActivityName(name) {
   const parsed = parseToolDisplayName(name);
-  return parsed.base === 'read_file' || parsed.base === 'Read';
+  return parsed.base === 'read' || parsed.base === 'Read';
 }
 
 function isIgnorableSegmentAfterRead(item, activityType, activityName) {
@@ -917,7 +1431,7 @@ export function mergeActivitySummary(previousSummary, nextSummary, activityName)
   return lines.join('\n');
 }
 
-function buildMessageRows(msg, showToolDetails, contentWidth = 72) {
+function buildMessageRows(msg, showToolDetails, contentWidth = 72, copy) {
   const rows = [];
   const pushTextRows = (text) => {
     const lines = String(text || '').split('\n');
@@ -1000,18 +1514,130 @@ function buildMessageRows(msg, showToolDetails, contentWidth = 72) {
     toolCalls.forEach((tool, idx) => pushActivityRows(tool, idx, toolCalls.length));
   }
 
+  const codeGenerationRows = getCodeGenerationActivityRows(msg);
+  const generatingCodeRows = getGeneratingCodePlaceholderRows(msg, copy, contentWidth);
+  const syntheticRows = [...codeGenerationRows, ...generatingCodeRows];
   if (msg?.loading && (msg?.liveStatus || msg?.phase)) {
+    const statusRows = [];
     pushWrappedRow(
-      rows,
+      statusRows,
       {
         kind: 'status',
         text: trimText(msg.liveStatus || msg.phase, 144)
       },
       Math.max(8, contentWidth - 2)
     );
+    syntheticRows.push(...statusRows);
   }
 
-  return normalizeActivitySpacingRows(rows);
+  return normalizeActivitySpacingRows(insertRowsAfterLastCodeRow(rows, syntheticRows));
+}
+
+function renderMessageRow(msg, row, idx, loaderTick) {
+  if (row.kind === 'activity') {
+    const activity = { type: row.activityType, name: row.name, status: row.status };
+    const display = getActivityDisplayParts(activity);
+    const dotColor =
+      row.status === 'error' || row.status === 'blocked'
+        ? 'redBright'
+        : row.status === 'done'
+          ? 'greenBright'
+          : 'yellowBright';
+    const textColor =
+      activity.type === 'skill'
+        ? row.status === 'error'
+          ? 'redBright'
+          : 'cyanBright'
+        : row.status === 'error' || row.status === 'blocked'
+          ? 'redBright'
+          : 'cyanBright';
+    const durationText = formatActivityDurationText(row);
+    return h(
+      Box,
+      { key: `row-tool-${msg.id}-${idx}` },
+      h(Text, { color: 'gray' }, ' '),
+      h(Text, { color: dotColor }, '●'),
+      h(Text, { color: 'gray' }, ' '),
+      h(Text, { color: textColor }, display.primary),
+      h(Text, { color: 'gray' }, display.secondary),
+      durationText ? h(Text, { color: row.statusColor }, ` ${durationText}`) : null
+    );
+  }
+  if (row.kind === 'activity-summary') {
+    return h(
+      Box,
+      { key: `row-tool-summary-${msg.id}-${idx}`, marginLeft: 1 },
+      h(Text, { color: 'gray' }, `└ ${row.text}`)
+    );
+  }
+  if (row.kind === 'plan-progress') {
+    return h(
+      Box,
+      { key: `row-plan-progress-${msg.id}-${idx}`, marginTop: 1, marginBottom: 1 },
+      h(Text, { color: 'cyanBright' }, '[plan] '),
+      h(Text, { color: 'yellowBright' }, `Step ${row.current}/${row.total}`),
+      h(Text, { color: 'gray' }, '  ->  '),
+      h(Text, { color: 'magentaBright' }, String(row.role || 'agent').toUpperCase()),
+      h(Text, { color: 'gray' }, ': '),
+      h(Text, { color: 'white' }, row.title)
+    );
+  }
+  if (row.kind === 'status') {
+    const dots = '.'.repeat((loaderTick % 3) + 1);
+    const phase = msg.phase;
+    const color =
+      phase === 'sending'
+        ? 'yellowBright'
+        : phase === 'queued'
+          ? 'cyanBright'
+          : phase === 'tooling'
+            ? 'magentaBright'
+          : phase === 'generating'
+            ? 'greenBright'
+          : 'cyanBright';
+    return h(
+      Box,
+      { key: `row-status-${msg.id}-${idx}`, marginTop: 1 },
+      h(Text, { color: 'gray' }, '  '),
+      h(Text, { color }, `${row.text}${dots}`)
+    );
+  }
+  if (row.kind === 'quote') {
+    return h(
+      Box,
+      { key: `row-quote-${msg.id}-${idx}`, marginTop: 1, marginLeft: 1, paddingLeft: 1 },
+      h(Text, { color: 'yellow' }, '▍ '),
+      h(Text, { color: row.color }, ...renderInlineCode(row.text, row.color))
+    );
+  }
+  if (row.kind === 'tree') {
+    return h(
+      Box,
+      { key: `row-tree-${msg.id}-${idx}`, marginLeft: 1 },
+      h(Text, { color: row.color }, row.text)
+    );
+  }
+  if (row.kind === 'code') {
+    return h(
+      Box,
+      { key: `row-code-${msg.id}-${idx}`, marginLeft: 1 },
+      h(Text, { color: 'gray' }, row.text)
+    );
+  }
+  if (row.kind === 'code-placeholder') {
+    return h(
+      Box,
+      { key: `row-code-placeholder-${msg.id}-${idx}`, marginLeft: 1 },
+      h(Text, { color: 'gray', dimColor: true }, String(row.lineNo || idx + 1).padStart(2, ' ')),
+      h(Text, { color: 'gray' }, ' │ '),
+      h(Text, { color: 'gray', dimColor: true }, row.text)
+    );
+  }
+  return renderTextLine(msg, row.text, idx, row.color);
+}
+
+function renderMessageRowsInOrder(msg, rows, loaderTick, copy) {
+  return rows.map((row, idx) => renderMessageRow(msg, row, idx, loaderTick));
 }
 
 
@@ -1124,104 +1750,12 @@ function MessageBubble({ msg, loaderTick, showToolDetails, rowWindow = null, con
     return h(PlanSummaryBubble, { msg, copy });
   }
   const theme = roleStyle(msg.label);
-  const allRows = buildMessageRows(msg, showToolDetails, contentWidth);
+  const allRows = buildMessageRows(msg, showToolDetails, contentWidth, copy);
   const start = rowWindow ? Math.max(0, rowWindow.start || 0) : 0;
   const end = rowWindow ? Math.max(start, rowWindow.end || allRows.length) : allRows.length;
   const visibleRows = allRows.slice(start, end);
-  const rendered = visibleRows.map((row, idx) => {
-    if (row.kind === 'activity') {
-      const activity = { type: row.activityType, name: row.name, status: row.status };
-      const display = getActivityDisplayParts(activity);
-      const dotColor =
-        activity.type === 'skill'
-          ? row.status === 'error'
-            ? 'redBright'
-            : 'blueBright'
-          : row.status === 'error' || row.status === 'blocked'
-            ? 'redBright'
-            : 'greenBright';
-      const textColor =
-        activity.type === 'skill'
-          ? row.status === 'error'
-            ? 'redBright'
-            : 'cyanBright'
-          : row.status === 'error' || row.status === 'blocked'
-            ? 'redBright'
-            : 'greenBright';
-      return h(
-        Box,
-        { key: `row-tool-${msg.id}-${idx}` },
-        h(Text, { color: 'gray' }, '  '),
-        h(Text, { color: dotColor }, '●'),
-        h(Text, { color: 'gray' }, ' '),
-        h(Text, { color: textColor }, display.primary),
-        h(Text, { color: 'gray' }, display.secondary),
-        row.durationText ? h(Text, { color: row.statusColor }, ` ${row.durationText}`) : null
-      );
-    }
-    if (row.kind === 'activity-summary') {
-      return h(
-        Box,
-        { key: `row-tool-summary-${msg.id}-${idx}`, marginLeft: 2 },
-        h(Text, { color: 'gray' }, `└ ${row.text}`)
-      );
-    }
-    if (row.kind === 'plan-progress') {
-      return h(
-        Box,
-        { key: `row-plan-progress-${msg.id}-${idx}`, marginTop: 1, marginBottom: 1 },
-        h(Text, { color: 'cyanBright' }, '[plan] '),
-        h(Text, { color: 'yellowBright' }, `Step ${row.current}/${row.total}`),
-        h(Text, { color: 'gray' }, '  ->  '),
-        h(Text, { color: 'magentaBright' }, String(row.role || 'agent').toUpperCase()),
-        h(Text, { color: 'gray' }, ': '),
-        h(Text, { color: 'white' }, row.title)
-      );
-    }
-    if (row.kind === 'status') {
-      const dots = '.'.repeat((loaderTick % 3) + 1);
-      const phase = msg.phase;
-      const color =
-        phase === 'sending'
-          ? 'yellowBright'
-          : phase === 'queued'
-            ? 'cyanBright'
-            : phase === 'tooling'
-              ? 'magentaBright'
-            : phase === 'generating'
-              ? 'greenBright'
-            : 'cyanBright';
-      return h(
-        Box,
-        { key: `row-status-${msg.id}-${idx}`, marginTop: 1 },
-        h(Text, { color: 'gray' }, '  '),
-        h(Text, { color }, `${row.text}${dots}`)
-      );
-    }
-    if (row.kind === 'quote') {
-      return h(
-        Box,
-        { key: `row-quote-${msg.id}-${idx}`, marginTop: 1, marginLeft: 1, paddingLeft: 1 },
-        h(Text, { color: 'yellow' }, '▍ '),
-        h(Text, { color: row.color }, ...renderInlineCode(row.text, row.color))
-      );
-    }
-    if (row.kind === 'tree') {
-      return h(
-        Box,
-        { key: `row-tree-${msg.id}-${idx}`, marginLeft: 1 },
-        h(Text, { color: row.color }, row.text)
-      );
-    }
-    if (row.kind === 'code') {
-      return h(
-        Box,
-        { key: `row-code-${msg.id}-${idx}`, marginLeft: 1 },
-        h(Text, { color: 'gray' }, row.text)
-      );
-    }
-    return renderTextLine(msg, row.text, idx, row.color);
-  });
+  const rendered = renderMessageRowsInOrder(msg, visibleRows, loaderTick, copy);
+  const autoSkillBadge = formatAutoSkillBadge(msg.autoSkillNames, copy);
 
   return h(
     Box,
@@ -1245,7 +1779,9 @@ function MessageBubble({ msg, loaderTick, showToolDetails, rowWindow = null, con
           null,
           h(Text, { color: theme.badgeText, backgroundColor: theme.badgeBg }, ` ${messageLabel(msg.label, copy)} `)
         ),
-        h(Text, { color: theme.chrome }, ' ')
+        autoSkillBadge
+          ? h(Text, { color: 'blueBright' }, autoSkillBadge)
+          : h(Text, { color: theme.chrome }, ' ')
       ),
       ...rendered
     )
@@ -1336,7 +1872,7 @@ function PendingPanel({ pendingQueue, copy }) {
   return h(
     Box,
     {
-      marginTop: 1,
+      marginTop: 0,
       flexDirection: 'column',
       borderStyle: 'round',
       borderColor: 'cyan',
@@ -1398,7 +1934,7 @@ function InputBar({
   return h(
     Box,
     {
-      marginTop: 1,
+      marginTop: 0,
       flexDirection: 'column',
       borderStyle: 'round',
       borderColor: 'cyan',
@@ -1416,11 +1952,10 @@ function InputBar({
       ),
       h(
         Box,
-        null,
-        h(Text, { color: 'black', backgroundColor: 'greenBright' }, ` ${copy.generic.safeMode} `),
-        inputStage !== 'idle' || busy ? h(Text, { color: status.color }, `  ${status.tag}`) : null,
-        pendingQueueLength > 0 ? h(Text, { color: 'cyanBright' }, `  ${copy.generic.queued} ${pendingQueueLength}`) : null,
-        h(Text, { color: showToolDetails ? 'greenBright' : 'gray' }, `  ${copy.generic.tools} ${showToolDetails ? copy.generic.open : copy.generic.collapsed}`)
+        { flexDirection: 'column', alignItems: 'flex-end' },
+        h(Text, { color: showToolDetails ? 'greenBright' : 'gray' }, ` ${copy.generic.tools} ${showToolDetails ? copy.generic.open : copy.generic.collapsed}`),
+        pendingQueueLength > 0 ? h(Text, { color: 'cyanBright' }, ` ${copy.generic.queued} ${pendingQueueLength}`) : null,
+        inputStage !== 'idle' || busy ? h(Text, { color: status.color }, ` ${status.tag}`) : null
       )
     ),
     h(
@@ -1503,6 +2038,7 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
   const [runtimeStatus, setRuntimeStatus] = useState(
     makeIdleStatus(copy, runtime.getRuntimeState?.(), 'ready')
   );
+  const [runtimeState, setRuntimeState] = useState(runtime.getRuntimeState?.() || null);
   const [inputStage, setInputStage] = useState('idle');
   const [planState, setPlanState] = useState({
     current: 0,
@@ -1516,15 +2052,22 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
   const [lastKeyDebug, setLastKeyDebug] = useState('');
   const [showToolDetails, setShowToolDetails] = useState(false);
   const activeAssistantIdRef = useRef(null);
+  const activeAssistantAutoSkillNamesRef = useRef([]);
+  const streamedAssistantHandledRef = useRef(false);
   const activeUserMessageIdRef = useRef(null);
   const cursorIndexRef = useRef(0);
   const inFlightRef = useRef(false);
+  const messagesRef = useRef([]);
   const pendingQueueRef = useRef([]);
   const deltaBufferRef = useRef('');
   const deltaFlushTimerRef = useRef(null);
   const escSeqRef = useRef('');
   const planTextBufferRef = useRef('');
   const { exit } = useApp();
+
+  useEffect(() => {
+    messagesRef.current = messages;
+  }, [messages]);
   const startupHint = copy.generic.startupHint;
   const isBackspaceKey = (value, key) =>
     Boolean(key?.backspace) || value === '\u0008' || value === '\u007f' || (key?.ctrl && value === 'h');
@@ -1565,6 +2108,7 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
     if (!snapshot) return;
     setDisplaySessionId(snapshot.sessionId || sessionId);
     setDisplayModel(snapshot.model || model);
+    setRuntimeState(snapshot);
     setRuntimeStatus(makeIdleStatus(copy, snapshot, variant));
   };
 
@@ -1620,7 +2164,12 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
         } else {
           segments.push({ type: 'text', text: delta });
         }
-        return { ...m, text: `${m.text}${delta}`, segments };
+        const nextText = `${m.text}${delta}`;
+        return {
+          ...m,
+          text: nextText,
+          segments
+        };
       })
     );
   };
@@ -1644,6 +2193,7 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
         const toolCalls = Array.isArray(m.toolCalls) ? [...m.toolCalls] : [];
         const activityType = toolEvent.type || 'tool';
         const idx = findActivityUpdateIndex(toolCalls, toolEvent);
+        const startedAt = toolEvent.status === 'running' ? Date.now() : undefined;
 
         if (idx === -1) {
           toolCalls.push({
@@ -1651,6 +2201,8 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
             id: toolEvent.id || '',
             name: toolEvent.name,
             status: toolEvent.status,
+            ...(toolEvent.arguments !== undefined ? { arguments: toolEvent.arguments } : {}),
+            ...(startedAt ? { startedAt } : {}),
             ...(toolEvent.durationMs !== undefined ? { durationMs: toolEvent.durationMs } : {}),
             ...(toolEvent.summary ? { summary: toolEvent.summary } : {})
           });
@@ -1660,6 +2212,8 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
             type: activityType,
             id: toolEvent.id || toolCalls[idx].id,
             status: toolEvent.status,
+            ...(toolEvent.arguments !== undefined ? { arguments: toolEvent.arguments } : {}),
+            ...(startedAt ? { startedAt } : {}),
             ...(toolEvent.durationMs !== undefined ? { durationMs: toolEvent.durationMs } : {}),
             ...(toolEvent.summary
               ? { summary: mergeActivitySummary(toolCalls[idx].summary, toolEvent.summary, toolEvent.name) }
@@ -1673,6 +2227,8 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
           id: toolEvent.id || '',
           name: toolEvent.name,
           status: toolEvent.status,
+          ...(toolEvent.arguments !== undefined ? { arguments: toolEvent.arguments } : {}),
+          ...(startedAt ? { startedAt } : {}),
           ...(toolEvent.durationMs !== undefined ? { durationMs: toolEvent.durationMs } : {}),
           ...(toolEvent.summary ? { summary: toolEvent.summary } : {})
         };
@@ -1737,7 +2293,13 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
       if (!activeAssistantIdRef.current && result.text) {
         setMessages((prev) => [
           ...prev,
-          { id: nextId(), label: 'coder', text: result.text, color: 'greenBright' }
+          {
+            id: nextId(),
+            label: 'coder',
+            text: result.text,
+            color: 'greenBright',
+            autoSkillNames: activeAssistantAutoSkillNamesRef.current
+          }
         ]);
       }
       return;
@@ -1761,8 +2323,38 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
     setMessages((prev) => prev.map((m) => (m.id === targetId ? { ...m, ...patch } : m)));
   };
 
+  const updatePendingToolCallOnActiveAssistant = (toolCall) => {
+    const targetId = activeAssistantIdRef.current;
+    if (!targetId || !toolCall) return;
+    setMessages((prev) =>
+      prev.map((m) => {
+        if (m.id !== targetId) return m;
+        const pendingToolCalls = Array.isArray(m.pendingToolCalls) ? [...m.pendingToolCalls] : [];
+        const nextCall = {
+          id: toolCall.id || '',
+          name: toolCall.name || '',
+          arguments: typeof toolCall.arguments === 'string' ? safeJsonParse(toolCall.arguments) ?? toolCall.arguments : toolCall.arguments,
+          status: 'pending',
+          type: 'tool'
+        };
+        const idx = pendingToolCalls.findIndex((entry) => entry.id && entry.id === nextCall.id);
+        if (idx === -1) pendingToolCalls.push(nextCall);
+        else pendingToolCalls[idx] = { ...pendingToolCalls[idx], ...nextCall };
+        return { ...m, pendingToolCalls };
+      })
+    );
+  };
+
   const finalizeActiveAssistant = () => {
-    setActiveAssistantMeta({ loading: false, phase: undefined, liveStatus: undefined, planStep: undefined });
+    setActiveAssistantMeta({
+      loading: false,
+      phase: undefined,
+      liveStatus: undefined,
+      planStep: undefined,
+      pendingToolCalls: [],
+      codeGenerationEndedAt: undefined,
+      autoSkillNames: activeAssistantAutoSkillNamesRef.current
+    });
   };
 
   const ensureActiveAssistant = () => {
@@ -1780,7 +2372,8 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
         segments: [],
         loading: true,
         phase: 'thinking',
-        liveStatus: copy.runtime.modelThinking
+        liveStatus: copy.runtime.modelThinking,
+        autoSkillNames: activeAssistantAutoSkillNamesRef.current
       }
     ]);
     return aid;
@@ -1795,11 +2388,14 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
     setPlanState({ current: 0, total: 0, role: '', title: '', failed: false, steps: [] });
     planTextBufferRef.current = '';
     activeAssistantIdRef.current = null;
+    activeAssistantAutoSkillNamesRef.current = [];
+    streamedAssistantHandledRef.current = false;
     deltaBufferRef.current = '';
 
     runtime
       .submit(line, (event) => {
         if (event?.type === 'assistant:start') {
+          streamedAssistantHandledRef.current = true;
           setRuntimeStatus(makeStatus(copy.runtime.modelThinking, copy.runtime.requestDelivered, 'cyanBright'));
           setInputStage('thinking');
           updateMessageMeta(activeUserMessageIdRef.current, {
@@ -1815,15 +2411,85 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
           updatePlanProgressFromText(event.text);
           setRuntimeStatus(makeStatus(copy.runtime.generatingReply, copy.runtime.streamingReply, 'greenBright'));
           setInputStage('streaming');
-          setActiveAssistantMeta({ loading: true, phase: 'generating', liveStatus: copy.runtime.generatingReply });
+          setActiveAssistantMeta((() => {
+            const targetId = activeAssistantIdRef.current;
+            let liveStatus = copy.runtime.generatingReply;
+            if (targetId) {
+              const current = messagesRef.current?.find?.((m) => m.id === targetId);
+              const pendingToolCalls = Array.isArray(current?.pendingToolCalls) ? current.pendingToolCalls : [];
+              if (pendingToolCalls.length > 0) {
+                liveStatus = copy.runtime.generatingCode;
+              }
+            }
+            return { loading: true, phase: 'generating', liveStatus };
+          })());
           queueAssistantDelta(event.text);
         }
+        if (event?.type === 'assistant:tool_call_delta') {
+          ensureActiveAssistant();
+          const parsed = parseToolDisplayName(event.toolCall?.name);
+          const isCodeTool = new Set(['write', 'edit', 'patch', 'generate_diff']).has(parsed.base);
+          if (isCodeTool) {
+            setRuntimeStatus(makeStatus(copy.runtime.generatingCode, copy.runtime.streamingReply, 'greenBright'));
+            setInputStage('streaming');
+            const startedAt = Date.now();
+            const targetId = activeAssistantIdRef.current;
+            if (targetId) {
+              setMessages((prev) =>
+                prev.map((m) => {
+                  if (m.id !== targetId) return m;
+                  return ensureCodeGenerationTiming(
+                    {
+                      ...m,
+                      loading: true,
+                      phase: 'generating',
+                      liveStatus: copy.runtime.generatingCode
+                    },
+                    startedAt
+                  );
+                })
+              );
+            }
+          }
+          updatePendingToolCallOnActiveAssistant(event.toolCall);
+        }
         if (event?.type === 'assistant:response') {
-          setRuntimeStatus(makeStatus(copy.runtime.replyCompleted, copy.runtime.outputFinished, 'greenBright'));
-          setInputStage('idle');
+          const hasPlannedTools = Array.isArray(event.toolCalls) && event.toolCalls.length > 0;
+          if (hasPlannedTools) {
+            setRuntimeStatus(makeStatus(copy.runtime.toolRunning, copy.runtime.waitingToolStart || copy.runtime.streamingReply, 'magentaBright'));
+            setInputStage('thinking');
+          } else {
+            setRuntimeStatus(makeStatus(copy.runtime.replyCompleted, copy.runtime.outputFinished, 'greenBright'));
+            setInputStage('idle');
+          }
           flushAssistantDelta();
-          finalizeActiveAssistant();
-          if (!activeAssistantIdRef.current && event.text) {
+          const targetId = activeAssistantIdRef.current;
+          const hadActiveAssistant = Boolean(targetId);
+          if (hadActiveAssistant) {
+            streamedAssistantHandledRef.current = true;
+          }
+          if (targetId && !hasPlannedTools) {
+            setMessages((prev) =>
+              prev.map((m) => {
+                if (m.id !== targetId) return m;
+                return {
+                  ...m,
+                  ...(typeof event.text === 'string' && event.text.length > 0 ? { text: event.text } : {}),
+                  loading: false,
+                  phase: undefined,
+                  liveStatus: undefined,
+                  planStep: undefined,
+                  pendingToolCalls: [],
+                  autoSkillNames: activeAssistantAutoSkillNamesRef.current,
+                  ...(m.codeGenerationStartedAt && !m.codeGenerationEndedAt ? { codeGenerationEndedAt: Date.now() } : {})
+                };
+              })
+            );
+          }
+          if (!hasPlannedTools) {
+            activeAssistantIdRef.current = null;
+          }
+          if (!hadActiveAssistant && !hasPlannedTools && event.text) {
             setMessages((prev) => [
               ...prev,
               { id: nextId(), label: 'coder', text: event.text, color: 'greenBright' }
@@ -1835,12 +2501,28 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
           const detail = describeToolActivity(event.name, copy);
           setRuntimeStatus(makeStatus(copy.runtime.toolRunning, detail, 'magentaBright'));
           setInputStage('tooling');
-          setActiveAssistantMeta({ loading: true, phase: 'tooling', liveStatus: detail });
+          const targetId = activeAssistantIdRef.current;
+          if (targetId) {
+            const finishedAt = Date.now();
+            setMessages((prev) =>
+              prev.map((m) => {
+                if (m.id !== targetId) return m;
+                const nextMessage = isCodeActivityName(event.name) ? finishCodeGeneration(m, finishedAt) : m;
+                return {
+                  ...nextMessage,
+                  loading: true,
+                  phase: 'tooling',
+                  liveStatus: detail
+                };
+              })
+            );
+          }
           updateActivityStatusOnActiveAssistant({
             type: 'tool',
             id: event.id,
             name: event.name,
-            status: 'running'
+            status: 'running',
+            arguments: event.arguments
           });
         }
         if (event?.type === 'tool:end') {
@@ -1854,7 +2536,8 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
             name: event.name,
             status: 'done',
             durationMs: event.durationMs,
-            summary: event.summary
+            summary: event.summary,
+            arguments: event.arguments
           });
         }
         if (event?.type === 'tool:blocked') {
@@ -1873,7 +2556,8 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
             type: 'tool',
             id: event.id,
             name: event.name,
-            status: 'blocked'
+            status: 'blocked',
+            arguments: event.arguments
           });
         }
         if (event?.type === 'tool:error') {
@@ -1894,7 +2578,8 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
             name: event.name,
             status: 'error',
             durationMs: event.durationMs,
-            summary: event.summary
+            summary: event.summary,
+            arguments: event.arguments
           });
         }
         if (event?.type === 'skill:start') {
@@ -1932,6 +2617,21 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
             summary: event.summary
           });
         }
+        if (event?.type === 'skill:auto') {
+          const detail = describeAutoSkillActivity(event.names, copy);
+          if (Array.isArray(event.names) && event.names.length > 0) {
+            activeAssistantAutoSkillNamesRef.current = event.names.filter(Boolean);
+            const targetId = activeAssistantIdRef.current;
+            if (targetId) {
+              setMessages((prev) =>
+                prev.map((m) => (m.id === targetId ? { ...m, autoSkillNames: activeAssistantAutoSkillNamesRef.current } : m))
+              );
+            }
+          }
+          if (detail) {
+            setRuntimeStatus(makeStatus(copy.runtime.skillRunning, detail, 'blueBright'));
+          }
+        }
         if (event?.type === 'compact:auto') {
           setRuntimeStatus(makeStatus(copy.runtime.compactingContext, `auto compact ${event.mode}`, 'yellowBright'));
           setMessages((prev) => [
@@ -1971,6 +2671,7 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
         }
         syncRuntimeVisualState(result.type === 'noop' ? 'ready' : 'after');
         if (result.type === 'noop') return;
+        if (!shouldAppendAssistantResult(result, activeAssistantIdRef.current, streamedAssistantHandledRef.current)) return;
         appendResultMessage(result);
       })
       .catch((err) => {
@@ -1997,6 +2698,7 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
         flushAssistantDelta();
         finalizeActiveAssistant();
         activeAssistantIdRef.current = null;
+        streamedAssistantHandledRef.current = false;
         activeUserMessageIdRef.current = null;
         if (deltaFlushTimerRef.current) {
           clearTimeout(deltaFlushTimerRef.current);
@@ -2386,7 +3088,6 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
     Box,
     { flexDirection: 'column' },
     h(Header, { sessionId: displaySessionId, model: displayModel, shellName }),
-    h(RuntimeStrip, { busy, runtimeStatus, loaderTick, copy }),
     h(MessageList, {
       messages: visibleMessages,
       loaderTick,
@@ -2396,12 +3097,17 @@ export function ChatApp({ runtime, sessionId, model, language = 'zh', shellName
     }),
     h(
       Box,
-      { marginTop: 1 },
+      { marginTop: 0, marginBottom: 0, justifyContent: 'space-between', width: '100%' },
       h(
-        Text,
-        { color: 'gray' },
-        `${showToolDetails ? copy.generic.toolSummaryExpanded : copy.generic.toolSummaryCollapsed} (${copy.generic.toggleToolSummary})  ·  ${copy.generic.scrollHint}`
-      )
+        Box,
+        { flexGrow: 1 },
+        h(
+          Text,
+          { color: 'gray' },
+          `${showToolDetails ? copy.generic.toolSummaryExpanded : copy.generic.toolSummaryCollapsed} (${copy.generic.toggleToolSummary})  ·  ${copy.generic.scrollHint}`
+        )
+      ),
+      h(ContextProgressMeter, { runtimeState, runtimeStatus, compact: true })
     ),
     h(SuggestionPanel, { commandSuggestions, suggestionNav, menuIndex, copy }),
     h(PendingPanel, { pendingQueue, copy }),