@steerable/agent-shell-web 0.6.27 → 0.6.28

package/src/components/settings/LlmSettingsPanel.tsx

@@ -397,9 +397,9 @@ export const LlmSettingsPanel = forwardRef<LlmSettingsPanelHandle, LlmSettingsPa
   }, [saving, savedOk, loading, onSaveUiChange]);
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-3">
           {loading ? (
-            <div className="flex items-center gap-2 py-4 text-sm text-agent-muted-foreground">
+            <div className="flex items-center gap-2 py-2 text-xs text-agent-muted-foreground">
               <LuLoaderCircle className="h-4 w-4 animate-spin" />
               加载当前配置...
             </div>
@@ -413,7 +413,7 @@ export const LlmSettingsPanel = forwardRef<LlmSettingsPanelHandle, LlmSettingsPa
                     data-testid="llm-vendor-select"
                     value={selectedVendor?.id ?? 'custom'}
                     onChange={(e) => handleSwitchVendor(e.target.value)}
-                    className="h-9 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-2 text-sm text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+                    className="h-8 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-2 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
                   >
                     {featuredVendors.length > 0 && (
                       <optgroup label="常用">
@@ -465,7 +465,7 @@ export const LlmSettingsPanel = forwardRef<LlmSettingsPanelHandle, LlmSettingsPa
                         ? 'https://your-gateway.example/v1'
                         : '该服务商没有默认地址，请手动填写')
                     }
-                    className="h-9 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-sm text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+                    className="h-8 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
                   />
                   <p className="mt-1.5 text-[11px] text-agent-muted-foreground">
                     {selectedVendor?.apiBaseUrl
@@ -491,7 +491,7 @@ export const LlmSettingsPanel = forwardRef<LlmSettingsPanelHandle, LlmSettingsPa
                             ? 'sk-... (可选，私有部署可留空)'
                             : 'sk-... (必填，到服务商控制台创建)'
                         }
-                        className="h-9 min-w-0 flex-1 rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-sm text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+                        className="h-8 min-w-0 flex-1 rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
                       />
                       <button
                         type="button"
@@ -499,7 +499,7 @@ export const LlmSettingsPanel = forwardRef<LlmSettingsPanelHandle, LlmSettingsPa
                         title="用当前 URL 和 Key 向网关拉一次模型目录"
                         disabled={!settings.baseUrl?.trim() || keyTest.status === 'testing'}
                         onClick={() => void handleTestKey()}
-                        className="inline-flex h-9 shrink-0 items-center justify-center rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs font-medium text-agent-foreground transition-colors hover:bg-agent-foreground/5 disabled:cursor-not-allowed disabled:opacity-50"
+                        className="inline-flex h-8 shrink-0 items-center justify-center rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs font-medium text-agent-foreground transition-colors hover:bg-agent-foreground/5 disabled:cursor-not-allowed disabled:opacity-50"
                       >
                         {keyTest.status === 'testing' ? (
                           <LuLoaderCircle className="h-4 w-4 animate-spin" />
@@ -551,7 +551,7 @@ export const LlmSettingsPanel = forwardRef<LlmSettingsPanelHandle, LlmSettingsPa
                       aria-label="刷新模型目录"
                       disabled={!settings.baseUrl?.trim() || modelsRefreshing}
                       onClick={() => void handleRefreshModels()}
-                      className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-agent-md border border-agent-border bg-agent-canvas text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                      className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-agent-md border border-agent-border bg-agent-canvas text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground disabled:cursor-not-allowed disabled:opacity-50"
                     >
                       <LuRefreshCw className={`h-4 w-4 ${modelsRefreshing ? 'animate-spin' : ''}`} />
                     </button>
@@ -819,7 +819,7 @@ export const LlmSettingsPanel = forwardRef<LlmSettingsPanelHandle, LlmSettingsPa
                       setSettings((prev) => ({ ...prev, maxTotalTokens: isNaN(val) ? undefined : val }));
                     }}
                     placeholder="60000"
-                    className="h-9 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-sm text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+                    className="h-8 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
                   />
                   <p className="mt-1.5 text-[11px] text-agent-muted-foreground">
                     单次对话中累积消耗的最大 Token 数量（默认 60,000）。超限后将自动停止，防止模型死循环或意外消耗过多 Token。
@@ -827,7 +827,7 @@ export const LlmSettingsPanel = forwardRef<LlmSettingsPanelHandle, LlmSettingsPa
                 </div>
 
                 {/* ───── 超时设置 ───── */}
-                <div className="border-t border-agent-border/60 pt-4 space-y-4">
+                <div className="border-t border-agent-border/60 pt-3 space-y-3">
                   <h4 className="text-xs font-semibold text-agent-muted-foreground uppercase tracking-wide">
                     超时设置
                   </h4>
@@ -842,7 +842,7 @@ export const LlmSettingsPanel = forwardRef<LlmSettingsPanelHandle, LlmSettingsPa
                       value={execTimeoutInput}
                       onChange={(e) => setExecTimeoutInput(e.target.value)}
                       placeholder="留空 = 默认（后台 30s / 终端 60s）"
-                      className="h-9 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-sm text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+                      className="h-8 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
                     />
                     <p className="mt-1.5 text-[11px] text-agent-muted-foreground">
                       执行本地命令时未显式指定超时的默认等待时长。命令行带 “gui” 的启动命令不受此限制：超时后按“程序已启动、仍在运行”处理，不会被判为失败或重复启动。

package/src/components/settings/McpSettingsPanel.tsx

@@ -230,9 +230,9 @@ export function McpSettingsPanel() {
   };
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-3">
       {/* JSON 导入 */}
-      <div className="bg-agent-muted/30 border border-agent-border/60 rounded-agent-md p-3.5 space-y-2">
+      <div className="bg-agent-muted/30 border border-agent-border/60 rounded-agent-md p-2.5 space-y-2">
         <h4 className="text-xs font-semibold text-agent-foreground flex items-center gap-1.5">
           <LuPlug className="h-3.5 w-3.5 text-agent-muted-foreground" />
           粘贴 JSON 导入 (Claude Desktop 格式)
@@ -271,7 +271,7 @@ export function McpSettingsPanel() {
 
       {/* 手动添加 / 编辑表单 */}
       {mcpFormOpen ? (
-        <div className="bg-agent-muted/30 border border-agent-border/60 rounded-agent-md p-3.5 space-y-2.5">
+        <div className="bg-agent-muted/30 border border-agent-border/60 rounded-agent-md p-2.5 space-y-2.5">
           <h4 className="text-xs font-semibold text-agent-foreground">
             {mcpEditingId ? '编辑 MCP 服务' : '手动添加 MCP 服务'}
           </h4>

package/src/components/settings/ModelIdCombobox.tsx

@@ -119,7 +119,7 @@ export function ModelIdCombobox({
                       setOpen(false);
                     }}
                     className={[
-                      'flex w-full flex-col gap-1 px-3 py-1.5 text-left text-sm',
+                      'flex w-full flex-col gap-0.5 px-2.5 py-1 text-left text-xs',
                       selected
                         ? 'bg-agent-foreground/10 text-agent-foreground'
                         : 'text-agent-foreground hover:bg-agent-foreground/5',
@@ -159,7 +159,7 @@ export function ModelIdCombobox({
         }}
         onFocus={show}
         placeholder={placeholder}
-        className="h-9 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 pr-8 text-sm text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+        className="h-8 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-2.5 pr-8 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
       />
       <button
         type="button"

package/src/components/settings/SecuritySettingsPanel.tsx

@@ -122,7 +122,7 @@ export function SecuritySettingsPanel() {
   const optOutReason = posture ? OPT_OUT_REASON_TEXT[posture.reason] : undefined;
 
   return (
-    <div className="bg-agent-muted/30 border border-agent-border/60 rounded-agent-md p-3.5 space-y-3">
+    <div className="bg-agent-muted/30 border border-agent-border/60 rounded-agent-md p-2.5 space-y-2">
       <h4 className="text-xs font-semibold text-agent-foreground flex items-center gap-1.5">
         <LuShieldCheck className="h-3.5 w-3.5 text-agent-muted-foreground" />
         Sidecar 进程沙箱

package/src/components/settings/SettingsSaveButton.tsx

@@ -22,7 +22,7 @@ export function SettingsSaveButton({
       data-testid={testId}
       onClick={onClick}
       disabled={disabled}
-      className="flex h-8 items-center gap-1.5 rounded-full bg-agent-foreground px-5 text-xs font-medium text-agent-canvas transition-all hover:opacity-90 disabled:opacity-50"
+      className="flex h-7 items-center gap-1.5 rounded-full bg-agent-foreground px-3 text-xs font-medium text-agent-canvas transition-all hover:opacity-90 disabled:opacity-50"
     >
       {saving ? (
         <LuLoaderCircle className="h-3.5 w-3.5 animate-spin" />

package/src/components/settings/SkillsSettingsPanel.tsx

@@ -153,9 +153,9 @@ export function SkillsSettingsPanel() {
   };
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-3">
       {/* Import Skill Bar */}
-      <div className="bg-agent-muted/30 border border-agent-border/60 rounded-agent-md p-3.5 space-y-2">
+      <div className="bg-agent-muted/30 border border-agent-border/60 rounded-agent-md p-2.5 space-y-2">
         <h4 className="text-xs font-semibold text-agent-foreground flex items-center gap-1.5">
           <LuBlocks className="h-3.5 w-3.5 text-agent-muted-foreground" />
           导入本地技能目录 (Import Local Skill Directory)

package/src/components/settings/TelemetrySettingsPanel.tsx

@@ -81,8 +81,8 @@ export function TelemetrySettingsPanel() {
   };
 
   return (
-    <div className="space-y-4">
-      <div className="bg-agent-muted/30 border border-agent-border/60 rounded-agent-md p-3.5 space-y-3">
+    <div className="space-y-3">
+      <div className="bg-agent-muted/30 border border-agent-border/60 rounded-agent-md p-2.5 space-y-2">
         <h4 className="text-xs font-semibold text-agent-foreground flex items-center gap-1.5">
           <LuActivity className="h-3.5 w-3.5 text-agent-muted-foreground" />
           OTLP Collector

package/src/components/settings/UsagePanel.tsx

@@ -7,7 +7,7 @@ import { getElectronBridge, isElectron } from '@/lib/electron-bridge';
  *
  * 每轮 CoreLoop 结束后,local-backend 把该轮的累计 token 用量(以及按
  * framework pricing 单价表估算的 USD 成本)落进 `usage_events` 表;本面板
- * 按 model 分桶聚合展示近 N 天的用量与成本。
+ * 按 model 分桶聚合展示近 N 天的用量,成本按固定汇率换算为人民币。
  *
  * 成本口径:只统计有单价的模型(framework `MODEL_PRICES`);本地/未知模型
  * 无单价,token 照常计入但成本列渲染为 "—",不计入总成本。
@@ -52,10 +52,14 @@ function formatTokens(n: number): string {
   return String(n);
 }
 
+/** 展示用估算汇率。底层仍存 USD,仅在面板换成人民币。 */
+const USD_TO_CNY = 7.2;
+
 function formatCost(usd: number | null): string {
   if (usd === null) return '—';
-  if (usd < 0.01) return `$${usd.toFixed(4)}`;
-  return `$${usd.toFixed(2)}`;
+  const cny = usd * USD_TO_CNY;
+  if (cny < 0.01) return `¥${cny.toFixed(4)}`;
+  return `¥${cny.toFixed(2)}`;
 }
 
 export function UsagePanel() {
@@ -86,8 +90,8 @@ export function UsagePanel() {
   }, [fetchSummary, days]);
 
   return (
-    <div className="space-y-4">
-      <div className="bg-agent-muted/30 border border-agent-border/60 rounded-agent-md p-3.5 space-y-3">
+    <div className="space-y-3">
+      <div className="bg-agent-muted/30 border border-agent-border/60 rounded-agent-md p-2.5 space-y-2">
         <div className="flex items-center justify-between">
           <h4 className="text-xs font-semibold text-agent-foreground flex items-center gap-1.5">
             <LuChartBar className="h-3.5 w-3.5 text-agent-muted-foreground" />
@@ -135,19 +139,19 @@ export function UsagePanel() {
             <div className="grid grid-cols-4 gap-2">
               <div className="rounded-agent-md border border-agent-border bg-agent-canvas px-2.5 py-2">
                 <div className="text-[10px] text-agent-muted-foreground">总轮次</div>
-                <div className="text-sm font-semibold text-agent-foreground">{summary.totals.turns}</div>
+                <div className="text-xs font-semibold text-agent-foreground">{summary.totals.turns}</div>
               </div>
               <div className="rounded-agent-md border border-agent-border bg-agent-canvas px-2.5 py-2">
                 <div className="text-[10px] text-agent-muted-foreground">总 Token</div>
-                <div className="text-sm font-semibold text-agent-foreground">{formatTokens(summary.totals.totalTokens)}</div>
+                <div className="text-xs font-semibold text-agent-foreground">{formatTokens(summary.totals.totalTokens)}</div>
               </div>
               <div className="rounded-agent-md border border-agent-border bg-agent-canvas px-2.5 py-2">
                 <div className="text-[10px] text-agent-muted-foreground">缓存命中</div>
-                <div className="text-sm font-semibold text-agent-foreground">{formatTokens(summary.totals.cachedPromptTokens)}</div>
+                <div className="text-xs font-semibold text-agent-foreground">{formatTokens(summary.totals.cachedPromptTokens)}</div>
               </div>
               <div className="rounded-agent-md border border-agent-border bg-agent-canvas px-2.5 py-2">
                 <div className="text-[10px] text-agent-muted-foreground">估算成本</div>
-                <div className="text-sm font-semibold text-agent-foreground">{formatCost(summary.totals.costUsd)}</div>
+                <div className="text-xs font-semibold text-agent-foreground">{formatCost(summary.totals.costUsd)}</div>
               </div>
             </div>
 
@@ -180,7 +184,7 @@ export function UsagePanel() {
             </div>
 
             <p className="text-[10px] text-agent-muted-foreground">
-              成本按 framework 单价表估算,只统计有单价的模型;"—" 表示该模型无单价(本地/未知)。缓存命中为命中 prompt 缓存的 token 数。
+              成本按 framework 单价表估算后按约 1 美元 = 7.2 元换算为人民币,只统计有单价的模型;"—" 表示该模型无单价(本地/未知)。缓存命中为命中 prompt 缓存的 token 数。
             </p>
           </>
         )}

package/src/components/settings/WebSearchSettingsPanel.tsx

@@ -85,8 +85,8 @@ export function WebSearchSettingsPanel() {
   };
 
   return (
-    <div className="space-y-4">
-      <div className="bg-agent-muted/30 border border-agent-border/60 rounded-agent-md p-3.5 space-y-3">
+    <div className="space-y-3">
+      <div className="bg-agent-muted/30 border border-agent-border/60 rounded-agent-md p-2.5 space-y-2">
         <h4 className="text-xs font-semibold text-agent-foreground flex items-center gap-1.5">
           <LuSearch className="h-3.5 w-3.5 text-agent-muted-foreground" />
           网络搜索

package/src/layouts/AgentLayout.tsx

@@ -394,14 +394,14 @@ function AgentLayoutContent() {
   }, [chatId, persistRightPanel]);
 
   // Same drag ergonomics as the sidebar handle, mirrored: the terminal's
-  // right edge is pinned to the window's right padding (p-2 = 8px), so the
+  // right edge is pinned to the window's right padding (p-1.5 = 6px), so the
   // width is the distance from the cursor to that edge.
   useEffect(() => {
     if (!isTerminalResizing) return;
     const onMove = (e: MouseEvent) => {
       const next = Math.min(
         MAX_TERMINAL_WIDTH,
-        Math.max(MIN_TERMINAL_WIDTH, window.innerWidth - 8 - e.clientX),
+        Math.max(MIN_TERMINAL_WIDTH, window.innerWidth - 6 - e.clientX),
       );
       terminalWidthRef.current = next;
       setTerminalWidth(next);
@@ -484,7 +484,7 @@ function AgentLayoutContent() {
           />
         </>
       )}
-      <div className="h-full min-w-0 flex-1 p-2">
+      <div className="h-full min-w-0 flex-1 p-1.5">
         <div className="flex h-full w-full">
           <div className="flex h-full min-w-0 flex-1 flex-col overflow-hidden rounded-agent-lg bg-agent-canvas shadow-sm">
             <div className="min-h-0 flex-1 overflow-hidden">

package/src/lib/chat-transport.ts

@@ -53,8 +53,18 @@ import {
 } from '@steerable/agent-ui/state';
 import type { SSEEvent } from '@steerable/agent-protocol';
 import { getElectronBridge } from './electron-bridge';
-import { appendDelta, syncTools, type TurnBlock } from '@/components/chat/turn-timeline';
+import {
+  appendDelta,
+  freezeReasoningDurations,
+  sealLastBlock,
+  syncTools,
+  type TurnBlock,
+} from '@/components/chat/turn-timeline';
 import type { ExecutedAction } from '@/components/chat/ExecutedActionsCard';
+import {
+  LlmRequestSpeedTracker,
+  type LlmSpeedSnapshot,
+} from '@/components/chat/process-status';
 
 // ---------------------------------------------------------------------------
 // Local-backend SSE adapter — feeds opaque IPC chunks into the framework's
@@ -68,6 +78,7 @@ class LocalBackendSseAdapter {
   private completed = false;
   private readonly parser: SSEParser;
   private timeline: TurnBlock[] = [];
+  private readonly speed = new LlmRequestSpeedTracker();
 
   constructor(private readonly onEvent: (event: SSEEvent) => void) {
     this.parser = new SSEParser({
@@ -78,10 +89,7 @@ class LocalBackendSseAdapter {
         if (ev) this.handleNormalised(ev);
       },
       onComplete: () => {
-        if (!this.completed) {
-          this.completed = true;
-          this.onEvent({ type: 'done' });
-        }
+        this.finishStream();
       },
     });
   }
@@ -92,10 +100,31 @@ class LocalBackendSseAdapter {
 
   end(): void {
     this.parser.end();
-    if (!this.completed) {
-      this.completed = true;
-      this.onEvent({ type: 'done' });
+    this.finishStream();
+  }
+
+  private finishStream(): void {
+    if (this.completed) return;
+    this.completed = true;
+    const frozen = freezeReasoningDurations(this.timeline);
+    if (frozen !== this.timeline) {
+      this.timeline = frozen;
+      this.onEvent({
+        type: 'agent',
+        event: 'turn_timeline',
+        payload: { blocks: this.timeline },
+      });
     }
+    this.emitLlmSpeed(this.speed.endRequest());
+    this.onEvent({ type: 'done' });
+  }
+
+  private emitLlmSpeed(snapshot: LlmSpeedSnapshot): void {
+    this.onEvent({
+      type: 'agent',
+      event: 'llm_speed',
+      payload: snapshot,
+    });
   }
 
   private handleNormalised(event: SSEEvent): void {
@@ -108,13 +137,11 @@ class LocalBackendSseAdapter {
         event: 'budget_exhausted_suppressed',
         payload: { reason: event.message ?? 'budget_exhausted' },
       } as any);
-      if (!this.completed) {
-        this.completed = true;
-        this.onEvent({ type: 'done' });
-      }
+      this.finishStream();
       return;
     }
     const timelineChanged = this.applyToTimeline(event);
+    const speedSnapshot = this.applyLlmClock(event);
     this.onEvent(event);
     if (timelineChanged) {
       this.onEvent({
@@ -123,6 +150,28 @@ class LocalBackendSseAdapter {
         payload: { blocks: this.timeline },
       });
     }
+    if (speedSnapshot) this.emitLlmSpeed(speedSnapshot);
+  }
+
+  private applyLlmClock(event: SSEEvent): LlmSpeedSnapshot | null {
+    if (event.type === 'content' && typeof event.content === 'string' && event.content.length > 0) {
+      return this.speed.noteOutput(event.content);
+    }
+    if (event.type !== 'agent') return null;
+    if (event.event === 'reasoning') {
+      const delta =
+        typeof event.payload?.content === 'string'
+          ? event.payload.content
+          : typeof event.payload?.delta === 'string'
+            ? event.payload.delta
+            : '';
+      if (!delta) return null;
+      return this.speed.noteOutput(delta);
+    }
+    if (event.event === 'round_end') {
+      return this.speed.endRequest();
+    }
+    return null;
   }
 
   private applyToTimeline(event: SSEEvent): boolean {
@@ -148,6 +197,13 @@ class LocalBackendSseAdapter {
       this.timeline = syncTools(this.timeline, actions);
       return true;
     }
+    if (event.event === 'round_end') {
+      if (event.payload?.status === 'cancelled') return false;
+      const next = sealLastBlock(this.timeline);
+      if (next === this.timeline) return false;
+      this.timeline = next;
+      return true;
+    }
     return false;
   }
 }

package/src/lib/show-thinking-content.ts

@@ -1,7 +1,7 @@
 /**
  * 聊天里「显示思考内容」的本机偏好：隐藏 / 显示 5 行 / 完整显示。
  *
- * 默认「显示 5 行」：流式中露出固定行数，结束后折叠，只留状态行。
+ * 默认「显示 5 行」：流式中按轮次各露出 5 行，结束后折叠工作区，只留状态行。
  * 存在 localStorage，设置页切换立即生效，不走后端。
  */
 
@@ -19,9 +19,9 @@ export const THINKING_DISPLAY_OPTIONS: ReadonlyArray<{
   label: string;
   hint: string;
 }> = [
-  { mode: 'hidden', label: '隐藏', hint: '只保留状态行，不展示思考正文。' },
-  { mode: 'peek', label: '显示5行', hint: '流式中露出 5 行思考，结束后自动折叠。' },
-  { mode: 'full', label: '完整显示', hint: '流式中展开全部思考与工具过程，结束后可手动折叠。' },
+  { mode: 'hidden', label: '隐藏', hint: '不展示思考正文，只保留工作状态行。' },
+  { mode: 'peek', label: '显示5行', hint: '当前轮思考最多露出 5 行，不足不撑开；该轮结束后自动折叠。完整正文请用「完整显示」。' },
+  { mode: 'full', label: '完整显示', hint: '当前轮思考完整展开，该轮结束后自动折叠；工作行结束后仍自动折叠。' },
 ];
 
 export function isThinkingDisplayMode(value: unknown): value is ThinkingDisplayMode {

package/src/pages/AgentPage.tsx

@@ -26,6 +26,10 @@ import type { ExecutedAction } from "@/components/chat/ExecutedActionsCard";
 import type { ChildInfo } from "@/components/chat/OrchestrationChildrenCard";
 import { foldOrchestrationChildEvents } from "@/components/chat/orchestration-children-model";
 import { parseTurnBlocks, type TurnBlock } from "@/components/chat/turn-timeline";
+import {
+  parseLlmSpeedPayload,
+  type LlmSpeedSnapshot,
+} from "@/components/chat/process-status";
 import { parseTurnFiles, type TurnFile } from "@/components/chat/turn-files";
 import { readPersistedDurationMs } from "@/components/chat/elapsed";
 import {
@@ -297,7 +301,7 @@ function AgentChatLoader({
 
   if (initialMessages === null) {
     return (
-      <div className="flex h-full w-full items-center justify-center text-sm text-agent-muted-foreground">
+      <div className="flex h-full w-full items-center justify-center text-xs text-agent-muted-foreground">
         加载对话历史…
       </div>
     );
@@ -449,6 +453,13 @@ function AgentChatView({
     number | undefined
   >(undefined);
   const pendingDurationMessageIdRef = useRef<string | null>(null);
+  const [currentLlmSpeed, setCurrentLlmSpeed] = useState<LlmSpeedSnapshot | undefined>(
+    undefined,
+  );
+  const currentLlmSpeedRef = useRef<LlmSpeedSnapshot | null>(null);
+  const [llmSpeedByMessageId, setLlmSpeedByMessageId] = useState<
+    Record<string, LlmSpeedSnapshot>
+  >({});
   // P3.1 编排：本轮子代理生命周期（orchestration_child SSE 事件累积），
   // 与 currentTurnActions 同款 reconcile 模式（message_id 落库后按键归档）。
   const [currentTurnChildren, setCurrentTurnChildren] = useState<ChildInfo[]>([]);
@@ -519,6 +530,13 @@ function AgentChatView({
       }
       return;
     }
+    if (ev.event === "llm_speed") {
+      const snap = parseLlmSpeedPayload(ev.payload);
+      if (!snap) return;
+      currentLlmSpeedRef.current = snap;
+      setCurrentLlmSpeed(snap);
+      return;
+    }
     if (ev.event === "turn_files") {
       // 回合收尾时后端发一次（在 message_id 之前）；先挂 pending，
       // message_id 到达时随其他队列一起归档。
@@ -583,6 +601,13 @@ function AgentChatView({
       const messageId = ev.payload?.messageId as string | undefined;
       if (!messageId) return;
       pendingDurationMessageIdRef.current = messageId;
+      const queuedSpeed = currentLlmSpeedRef.current;
+      if (queuedSpeed) {
+        setLlmSpeedByMessageId((prev) => ({
+          ...prev,
+          [messageId]: queuedSpeed,
+        }));
+      }
       const queued = pendingActionsRef.current;
       if (queued.length > 0) {
         setExecutedActionsByMessageId((prev) => ({
@@ -727,6 +752,25 @@ function AgentChatView({
           }
           return next;
         });
+        const snap = currentLlmSpeedRef.current;
+        if (snap) {
+          const frozen: LlmSpeedSnapshot = {
+            ...snap,
+            live: false,
+            requestStartedAt: null,
+            elapsedMs: snap.elapsedMs,
+          };
+          currentLlmSpeedRef.current = frozen;
+          setCurrentLlmSpeed(frozen);
+          setLlmSpeedByMessageId((prev) => {
+            const next = { ...prev };
+            if (lastAssistant) next[lastAssistant.id] = frozen;
+            if (pendingDurationMessageIdRef.current) {
+              next[pendingDurationMessageIdRef.current] = frozen;
+            }
+            return next;
+          });
+        }
       }
     }
     wasStreamingRef.current = isStreaming;
@@ -770,6 +814,8 @@ function AgentChatView({
       turnStartedAtRef.current = started;
       setCurrentTurnStartedAtMs(started);
       pendingDurationMessageIdRef.current = null;
+      currentLlmSpeedRef.current = null;
+      setCurrentLlmSpeed(undefined);
       // 新一轮开始：记录本轮是否为 plan 模式，并隐藏上一份计划的操作条。
       planTurnRef.current = input.metadata?.mode === "plan";
       setPlanReady(false);
@@ -842,6 +888,8 @@ function AgentChatView({
     turnStartedAtRef.current = started;
     setCurrentTurnStartedAtMs(started);
     pendingDurationMessageIdRef.current = null;
+    currentLlmSpeedRef.current = null;
+    setCurrentLlmSpeed(undefined);
     planTurnRef.current = mode === "plan";
     setPlanReady(false);
     const metadata = {
@@ -987,7 +1035,7 @@ function AgentChatView({
   return (
     <div className="flex h-full w-full flex-col">
       {hydrationError && (
-        <div className="border-b border-agent-border bg-agent-muted/60 px-3 py-1 text-xs text-agent-destructive">
+        <div className="border-b border-agent-border bg-agent-muted/60 px-2.5 py-1 text-xs text-agent-destructive">
           加载对话历史失败：{hydrationError}
         </div>
       )}
@@ -1035,6 +1083,8 @@ function AgentChatView({
         currentTurnTimeline={effectiveCurrentTurnTimeline}
         currentTurnStartedAtMs={currentTurnStartedAtMs}
         durationByMessageId={durationByMessageId}
+        currentLlmSpeed={currentLlmSpeed}
+        llmSpeedByMessageId={llmSpeedByMessageId}
         turnFilesByMessageId={turnFilesByMessageId}
         currentTurnFiles={currentTurnFiles}
         currentTurnChildren={effectiveCurrentTurnChildren}
@@ -1083,7 +1133,7 @@ function AgentChatView({
               onTrustChanged={fetchProjects}
             />
             {planReady && !isStreaming ? (
-            <div className="mx-3 mb-1 flex items-center justify-between gap-3 rounded-agent-md border border-amber-400/50 bg-amber-400/10 px-3 py-2 text-xs">
+            <div className="mx-2.5 mb-1 flex items-center justify-between gap-2 rounded-agent-md border border-amber-400/50 bg-amber-400/10 px-2.5 py-1.5 text-xs">
               <div className="flex items-center gap-2 text-amber-700 dark:text-amber-300">
                 <LuListChecks className="h-4 w-4 shrink-0" />
                 <span>计划已生成。确认无误后可切换到 Agent 模式开始执行。</span>
@@ -1264,15 +1314,15 @@ function EmptyChatGate() {
 
   return (
     <div
-      className="flex h-full w-full items-center justify-center p-4 sm:p-8"
+      className="flex h-full w-full items-center justify-center p-3 sm:p-5"
       data-testid="empty-chat-home"
     >
-      <div className="flex w-full max-w-2xl flex-col items-center gap-6">
+      <div className="flex w-full max-w-2xl flex-col items-center gap-4">
         <div className="text-center">
           <h1 className="text-xl font-semibold tracking-tight text-agent-foreground">
             {BRAND_NAME}
           </h1>
-          <p className="mt-1.5 text-sm text-agent-muted-foreground">
+          <p className="mt-1.5 text-xs text-agent-muted-foreground">
             输入消息，直接开始一段新对话。
           </p>
         </div>

package/src/pages/ChatPanelPreviewPage.tsx

@@ -82,7 +82,28 @@ Tests: 1 failed, 2 passed, 3 total
   },
 ];
 
+const MOCK_TODOS = [
+  { id: 'survey', content: '检查服务连通性', status: 'completed' as const },
+  { id: 'test', content: '跑本目录测试套件', status: 'in_progress' as const },
+  { id: 'fix', content: '修失败的断言颜色', status: 'pending' as const },
+];
+
+const MOCK_TODO_ACTION: ExecutedAction = {
+  tool: 'todo_write',
+  arguments: { todos: MOCK_TODOS },
+  result: {
+    success: true,
+    data: {
+      value: {
+        todos: MOCK_TODOS,
+        summary: { total: 3, pending: 1, inProgress: 1, completed: 1 },
+      },
+    },
+  },
+};
+
 const MOCK_ACTIONS: ExecutedAction[] = [
+  MOCK_TODO_ACTION,
   {
     tool: 'check_connection',
     arguments: { host: '127.0.0.1', port: 8765 },
@@ -107,11 +128,12 @@ const MOCK_ACTIONS: ExecutedAction[] = [
 
 const MOCK_TIMELINE: TurnBlock[] = [
   { type: 'reasoning', content: '先检查服务连通性，再跑测试套件。' },
-  { type: 'tools', actions: [MOCK_ACTIONS[0]] },
-  { type: 'text', content: '连接正常。接下来跑测试套件。' },
+  { type: 'tools', actions: [MOCK_TODO_ACTION] },
   { type: 'tools', actions: [MOCK_ACTIONS[1]] },
-  { type: 'reasoning', content: '测试失败，读一下失败文件再给建议。' },
+  { type: 'text', content: '连接正常。接下来跑测试套件。' },
   { type: 'tools', actions: [MOCK_ACTIONS[2]] },
+  { type: 'reasoning', content: '测试失败，读一下失败文件再给建议。' },
+  { type: 'tools', actions: [MOCK_ACTIONS[3]] },
   { type: 'text', content: MOCK_MESSAGES[1].content ?? '' },
 ];
 
@@ -284,7 +306,7 @@ export function ChatPanelPreviewPage() {
 
   return (
     <div className="flex h-full w-full flex-col bg-agent-muted/30">
-      <div className="flex shrink-0 items-center gap-2 border-b border-agent-border bg-agent-canvas px-3 py-2 text-xs">
+      <div className="flex shrink-0 items-center gap-2 border-b border-agent-border bg-agent-canvas px-2.5 py-1.5 text-xs">
         <span className="text-agent-muted-foreground">
           /preview/chat (dev harness)
         </span>