feat: ACP 协议版本 remote control (#293)

* fix: 添加 usage 字段缺失时的防御性防护

第三方 API（如智谱 GLM）在某些流式响应中不返回 usage 字段，
导致 usage.input_tokens 访问 undefined 崩溃并连锁影响后续所有请求。

- claude.ts: content_block_stop 创建消息时 fallback 到 EMPTY_USAGE
- LocalAgentTask.tsx: usage 为 undefined 时提前返回
- tokens.ts: getTokenCountFromUsage 加 null guard 和 ?? 0
- cost-tracker.ts: input_tokens/output_tokens 加 ?? 0

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: ACP Plan 展示 — 支持 session/update plan 类型的可视化

补全 PlanUpdate 类型定义（PlanEntry/Priority/Status），新建 PlanView 组件
渲染进度条、状态图标和优先级标签，在 ChatInterface 中处理 plan 更新逻辑。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: 穷鬼模式下跳过 verification agent 以节省 token

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* test: 补充 RCS 后端 + 前端测试覆盖 (+116 tests)

后端新增 3 个测试文件 (70 tests):
- automationState: normalize/snapshot/equals 纯函数
- client-payload: toClientPayload 协议转换
- transport-normalize: normalizePayload + extractContent

前端新增 2 个测试文件 (46 tests):
- utils: formatTime/statusClass/truncate/extractEventText 等
- api-client: getUuid/setUuid/api GET/POST 错误处理

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: RCS ACP 页面添加权限模式选择器 + 权限响应修复

- 新增权限模式选择器 UI（6种模式：默认/自动接受编辑/跳过权限/规划/不询问/自动判断）
- 权限模式通过 ACP _meta 从 web → acp-link → agent 全链路传递
- 修复 PermissionPanel 点击"允许"发送 cancelled 而非 selected 的 bug
- 权限模式和模型选择持久化到 localStorage
- acp-link 直接连接路径同步支持 permissionMode 透传

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: RCS Web UI 重构 + QR 修复 + ACP 扫描自动跳转

- RCS Web UI 组件全面重构: Dialog 迁移 Radix UI, lazy loading,
  主题系统改进, 组件样式优化
- IdentityPanel QR 码显示修复: requestAnimationFrame 延迟绘制
  解决 Radix Dialog Portal 挂载时序问题
- ACP QR 扫描自动跳转: IdentityPanel 扫描 ACP 格式 { url, token }
  后存储 sessionStorage 并跳转 /code/?acp=1
- 新增 ACPDirectView 组件: ACP 直连视图, 用 ACPClient 连接并
  渲染 ACPMain 聊天界面

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: ACP 权限管道改进 — 模式同步 + bypass 检测 + 统一权限流水线

- agent.ts: applySessionMode 同步 appState.toolPermissionContext.mode
- agent.ts: bypassPermissions 可用性检测 (非 root 或 sandbox 环境)
- permissions.ts: createAcpCanUseTool 接入 hasPermissionsToUseTool
  统一权限流水线, 替代原来分散的处理逻辑
- permissions.ts: 支持 onModeChange 回调, 模式变更时实时同步

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: acp-link 支持 permissionMode 默认值传递给 agent

客户端 (Zed/VS Code 等) 的 new_session 不一定携带 permissionMode,
导致 agent 收到 _meta: undefined, permission 回退到 default。

修复: handleNewSession 使用 fallback 链:
  客户端传值 > config.permissionMode > ACP_PERMISSION_MODE 环境变量

使用: ACP_PERMISSION_MODE=auto acp-link claude

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* docs: 更新文档及说明

* fix: 修复类型错误

* chore: 提交脚本

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

packages/remote-control-server/web/components/chat/ChatInput.tsx

@@ -71,8 +71,12 @@ export function ChatInput({
           setShowCommandMenu(false);
           return;
         }
-        // Let cmdk handle arrow keys and Enter for selection
-        // Tab also closes the menu
+        // Arrow keys and Enter are handled by CommandMenu via document-level listener
+        // Don't submit or move cursor when menu is open
+        if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "Enter") {
+          e.preventDefault();
+          return;
+        }
         if (e.key === "Tab") {
           e.preventDefault();
           setShowCommandMenu(false);
@@ -161,7 +165,7 @@ export function ChatInput({
   const canSend = (text.trim() || images.length > 0) && !disabled;
 
   return (
-    <div className={cn("w-full max-w-3xl mx-auto px-3 sm:px-4 pb-4 pt-2", className)}>
+    <div className={cn("w-full max-w-3xl mx-auto px-4 sm:px-8 pb-4 pt-2", className)}>
       <div className="relative">
         {/* Slash command menu — floating above input */}
         {showCommandMenu && commands && commands.length > 0 && (
@@ -187,13 +191,14 @@ export function ChatInput({
               <div key={i} className="relative group">
                 <img
                   src={`data:${img.mimeType};base64,${img.data}`}
-                  alt="附件"
+                  alt={`Attached image ${i + 1}`}
                   className="h-14 w-14 object-cover rounded-lg border border-border"
                 />
                 <button
                   type="button"
                   onClick={() => removeImage(i)}
-                  className="absolute -top-1.5 -right-1.5 h-5 w-5 rounded-full bg-surface-2 border border-border flex items-center justify-center text-text-muted hover:text-text-primary text-xs opacity-0 group-hover:opacity-100 transition-opacity"
+                  className="absolute -top-1.5 -right-1.5 min-h-[32px] min-w-[32px] h-5 w-5 rounded-full bg-surface-2 border border-border flex items-center justify-center text-text-muted hover:text-text-primary text-xs opacity-0 group-hover:opacity-100 transition-opacity"
+                  aria-label={`Remove image ${i + 1}`}
                 >
                   {"\u00D7"}
                 </button>
@@ -214,6 +219,7 @@ export function ChatInput({
                 disabled={disabled}
               >
                 <Paperclip className="h-4 w-4" />
+                <span className="sr-only">Attach file</span>
               </button>
               <input
                 ref={fileInputRef}

packages/remote-control-server/web/components/chat/ChatView.tsx

@@ -1,7 +1,8 @@
-import type { ThreadEntry, ToolCallEntry } from "../../src/lib/types";
+import type { ThreadEntry, ToolCallEntry, PlanDisplayEntry } from "../../src/lib/types";
 import { cn } from "../../src/lib/utils";
 import { UserBubble, AssistantBubble } from "./MessageBubble";
 import { ToolCallGroup } from "./ToolCallGroup";
+import { PlanDisplay } from "./PlanView";
 import { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButtons } from "../ai-elements/conversation";
 
 // =============================================================================
@@ -59,13 +60,13 @@ export function ChatView({
 
             {/* 思考指示器 — Anthropic 打字动画 */}
             {showThinking && (
-              <div className="flex gap-3 items-start">
-                <div className="w-7 h-7 rounded-lg bg-brand/10 flex items-center justify-center flex-shrink-0">
-                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
-                    <path d="M7 2L12 12H2L7 2Z" fill="var(--color-brand)" opacity=".85" />
+              <div className="flex gap-4 items-start">
+                <div className="w-8 h-8 rounded-lg bg-brand/8 flex items-center justify-center flex-shrink-0">
+                  <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z" fill="var(--color-brand)" fillRule="nonzero" />
                   </svg>
                 </div>
-                <div className="flex items-center gap-1 pt-1">
+                <div className="flex items-center gap-1 pt-2">
                   <span className="chat-typing-indicator" aria-hidden="true">
                     <span></span><span></span><span></span>
                   </span>
@@ -86,19 +87,23 @@ export function ChatView({
 
 function entrySpacing(entries: ThreadEntry[], index: number): string {
   const entry = entries[index];
-  // 用户消息前面多留白
+  // 用户消息前后大留白 — Claude.ai 式宽松间距
   if (entry?.type === "user_message") {
-    return "pt-6 pb-2";
+    return "pt-10 pb-3";
   }
-  // 助手消息后面多留白（除非紧跟工具调用）
+  // 助手消息 — 工具调用紧贴，否则多留白
   if (entry?.type === "assistant_message") {
     const next = entries[index + 1];
     if (next?.type === "tool_call") {
-      return "pt-2 pb-1";
+      return "pt-3 pb-1";
     }
-    return "pt-2 pb-4";
+    return "pt-3 pb-8";
   }
-  return "py-1";
+  // Plan 条目
+  if (entry?.type === "plan") {
+    return "pt-3 pb-3";
+  }
+  return "py-2";
 }
 
 // =============================================================================
@@ -126,6 +131,8 @@ function EntryRenderer({
           onPermissionRespond={onPermissionRespond}
         />
       );
+    case "plan":
+      return <PlanDisplay entry={entry as PlanDisplayEntry} />;
     default:
       return null;
   }

packages/remote-control-server/web/components/chat/CommandMenu.tsx

@@ -1,11 +1,4 @@
-import { useMemo, useRef, useEffect } from "react";
-import {
-  Command,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-} from "../ui/command";
+import { useMemo, useRef, useEffect, useState } from "react";
 import { cn } from "../../src/lib/utils";
 import type { AvailableCommand } from "../../src/acp/types";
 
@@ -23,20 +16,11 @@ interface CommandMenuProps {
 }
 
 /**
- * Fuzzy match — checks if all query chars appear in order in the text.
- * Same algorithm as ModelSelectorPicker.
+ * Prefix match — checks if the text starts with the query.
  */
-function fuzzyMatch(query: string, text: string): boolean {
+function prefixMatch(query: string, text: string): boolean {
   if (!query) return true;
-  const lowerQuery = query.toLowerCase();
-  const lowerText = text.toLowerCase();
-  let queryIdx = 0;
-  for (let i = 0; i < lowerText.length && queryIdx < lowerQuery.length; i++) {
-    if (lowerText[i] === lowerQuery[queryIdx]) {
-      queryIdx++;
-    }
-  }
-  return queryIdx === lowerQuery.length;
+  return text.toLowerCase().startsWith(query.toLowerCase());
 }
 
 export function CommandMenu({
@@ -47,6 +31,20 @@ export function CommandMenu({
   className,
 }: CommandMenuProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  // Filter commands by current input
+  const filtered = useMemo(() => {
+    if (!filter) return commands;
+    return commands.filter(
+      (cmd) => prefixMatch(filter, cmd.name),
+    );
+  }, [commands, filter]);
+
+  // Reset active index when filter changes
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [filter]);
 
   // Close on outside click
   useEffect(() => {
@@ -59,13 +57,35 @@ export function CommandMenu({
     return () => document.removeEventListener("mousedown", handleClick);
   }, [onClose]);
 
-  // Filter commands by current input
-  const filtered = useMemo(() => {
-    if (!filter) return commands;
-    return commands.filter(
-      (cmd) => fuzzyMatch(filter, cmd.name) || fuzzyMatch(filter, cmd.description),
-    );
-  }, [commands, filter]);
+  // Handle keyboard navigation (ArrowUp/ArrowDown/Enter) via document-level listener
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (filtered.length === 0) return;
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((prev) => (prev + 1) % filtered.length);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((prev) => (prev - 1 + filtered.length) % filtered.length);
+      } else if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        const cmd = filtered[activeIndex];
+        if (cmd) onSelect(cmd);
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown, true); // capture phase
+    return () => document.removeEventListener("keydown", handleKeyDown, true);
+  }, [filtered, activeIndex, onSelect]);
+
+  // Scroll active item into view
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const active = container.querySelector("[data-active='true']");
+    active?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex]);
 
   return (
     <div
@@ -75,39 +95,43 @@ export function CommandMenu({
         className,
       )}
     >
-      <Command shouldFilter={false}>
-        <CommandList className="max-h-[320px]">
-          <CommandEmpty className="text-xs text-text-muted font-display py-3">
+      <div className="max-h-[320px] overflow-y-auto py-1">
+        {filtered.length === 0 ? (
+          <div className="text-xs text-text-muted font-display py-3 text-center">
             没有匹配的命令
-          </CommandEmpty>
-          <CommandGroup>
-            {filtered.map((cmd) => (
-              <CommandItem
-                key={cmd.name}
-                value={cmd.name}
-                onSelect={() => onSelect(cmd)}
-                className={cn(
-                  "flex items-center gap-2 px-3 py-2 cursor-pointer",
-                  "rounded-lg mx-1",
-                  "data-[selected=true]:bg-brand/8 data-[selected=true]:text-text-primary",
-                )}
-              >
-                <span className="text-sm font-display font-medium text-brand">
-                  /{cmd.name}
+          </div>
+        ) : (
+          filtered.map((cmd, index) => (
+            <button
+              key={cmd.name}
+              type="button"
+              data-active={index === activeIndex}
+              onClick={() => onSelect(cmd)}
+              onMouseEnter={() => setActiveIndex(index)}
+              className={cn(
+                "flex w-full items-center gap-2 px-3 py-2 cursor-pointer rounded-lg mx-1 text-left",
+                "transition-colors",
+                index === activeIndex
+                  ? "bg-brand/10 text-text-primary"
+                  : "text-text-secondary hover:bg-surface-1/50",
+              )}
+              style={{ width: "calc(100% - 8px)" }}
+            >
+              <span className="text-sm font-display font-medium text-brand">
+                /{cmd.name}
+              </span>
+              <span className="text-xs text-text-muted truncate flex-1">
+                {cmd.description}
+              </span>
+              {cmd.input?.hint && (
+                <span className="text-[10px] text-text-muted italic">
+                  {cmd.input.hint}
                 </span>
-                <span className="text-xs text-text-muted truncate flex-1">
-                  {cmd.description}
-                </span>
-                {cmd.input?.hint && (
-                  <span className="text-[10px] text-text-muted italic">
-                    {cmd.input.hint}
-                  </span>
-                )}
-              </CommandItem>
-            ))}
-          </CommandGroup>
-        </CommandList>
-      </Command>
+              )}
+            </button>
+          ))
+        )}
+      </div>
     </div>
   );
 }

packages/remote-control-server/web/components/chat/MessageBubble.tsx

@@ -1,11 +1,15 @@
+import { useState, useRef, useEffect, useCallback } from "react";
 import type { UserMessageEntry, AssistantMessageEntry, UserMessageImage } from "../../src/lib/types";
 import { cn, esc } from "../../src/lib/utils";
 import { MessageResponse } from "../ai-elements/message";
 import { Reasoning, ReasoningTrigger, ReasoningContent } from "../ai-elements/reasoning";
+import { ChevronDown } from "lucide-react";
+
+// 用户消息折叠最大高度（px）
+const COLLAPSED_MAX_HEIGHT = 200;
 
 // =============================================================================
-// 用户消息 — 右对齐，深色反转背景，无气泡边框
-// Anthropic: right-aligned, inverted dark bg, rounded-xl with bottom-right notch
+// 用户消息 — 右对齐，品牌色淡底，可折叠
 // =============================================================================
 
 interface UserBubbleProps {
@@ -13,9 +17,23 @@ interface UserBubbleProps {
 }
 
 export function UserBubble({ entry }: UserBubbleProps) {
+  const [expanded, setExpanded] = useState(false);
+  const [overflowing, setOverflowing] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const checkOverflow = useCallback(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    setOverflowing(el.scrollHeight > COLLAPSED_MAX_HEIGHT + 4);
+  }, []);
+
+  useEffect(() => {
+    checkOverflow();
+  }, [checkOverflow, entry.content]);
+
   return (
     <div className="flex justify-end">
-      <div className="max-w-[85%] sm:max-w-[75%]">
+      <div className="max-w-[85%] sm:max-w-[70%]">
         {/* 图片附件 */}
         {entry.images && entry.images.length > 0 && (
           <div className="flex flex-wrap gap-2 mb-2 justify-end">
@@ -24,10 +42,32 @@ export function UserBubble({ entry }: UserBubbleProps) {
             ))}
           </div>
         )}
-        {/* 文本内容 */}
+        {/* 文本内容 — 品牌色淡底 + 折叠 */}
         {entry.content && (
-          <div className="rounded-2xl rounded-br-md bg-bg-inverted px-4 py-2.5 text-sm text-text-inverted whitespace-pre-wrap font-display leading-relaxed">
-            {esc(entry.content)}
+          <div className="relative rounded-2xl rounded-br-md bg-user-bubble border border-user-bubble-border overflow-hidden">
+            <div
+              ref={contentRef}
+              className={cn(
+                "px-5 py-3 text-sm text-white whitespace-pre-wrap font-display leading-relaxed",
+                !expanded && overflowing && `max-h-[${COLLAPSED_MAX_HEIGHT}px]`,
+              )}
+              style={!expanded && overflowing ? { maxHeight: `${COLLAPSED_MAX_HEIGHT}px` } : undefined}
+            >
+              {esc(entry.content)}
+            </div>
+            {/* 折叠渐变遮罩 + 展开按钮 */}
+            {!expanded && overflowing && (
+              <div className="absolute bottom-0 inset-x-0 flex flex-col items-center pt-8 bg-gradient-to-t from-user-bubble via-user-bubble/80 to-transparent">
+                <button
+                  type="button"
+                  onClick={() => setExpanded(true)}
+                  className="flex items-center gap-1 px-3 py-1 rounded-full text-xs font-display font-medium text-white/90 hover:bg-white/15 transition-colors"
+                >
+                  <span>展开</span>
+                  <ChevronDown className="h-3 w-3" />
+                </button>
+              </div>
+            )}
           </div>
         )}
       </div>
@@ -37,7 +77,6 @@ export function UserBubble({ entry }: UserBubbleProps) {
 
 // =============================================================================
 // 助手消息 — 左对齐，无背景卡片，编辑式排版
-// Anthropic: avatar + plain text, no bubble/card wrapper, serif body font
 // =============================================================================
 
 interface AssistantBubbleProps {
@@ -47,17 +86,17 @@ interface AssistantBubbleProps {
 
 export function AssistantBubble({ entry, isStreaming }: AssistantBubbleProps) {
   return (
-    <div className="flex gap-3 items-start">
+    <div className="flex gap-4 items-start">
       {/* Orange triangle avatar */}
-      <div className="w-7 h-7 rounded-lg bg-brand/10 flex items-center justify-center flex-shrink-0 mt-0.5">
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
-          <path d="M7 2L12 12H2L7 2Z" fill="var(--color-brand)" opacity=".85" />
+      <div className="w-8 h-8 rounded-lg bg-brand/8 flex items-center justify-center flex-shrink-0 mt-0.5">
+        <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z" fill="var(--color-brand)" fillRule="nonzero" />
         </svg>
       </div>
       {/* 内容 — 无卡片背景，直接排版 */}
-      <div className="flex-1 min-w-0 space-y-3">
+      <div className="flex-1 min-w-0 space-y-4">
         {/* Sender label */}
-        <span className="text-sm font-medium text-text-primary font-display">Claude</span>
+        <span className="text-sm font-semibold text-text-primary font-display">Claude</span>
         {entry.chunks.map((chunk, i) => {
           if (chunk.type === "thought") {
             const isLastChunk = i === entry.chunks.length - 1;
@@ -66,7 +105,7 @@ export function AssistantBubble({ entry, isStreaming }: AssistantBubbleProps) {
               <Reasoning key={i} isStreaming={isThoughtStreaming}>
                 <ReasoningTrigger />
                 <ReasoningContent>
-                  <div className="text-sm text-text-secondary">
+                  <div className="text-sm text-text-secondary leading-relaxed">
                     {chunk.text}
                   </div>
                 </ReasoningContent>
@@ -75,7 +114,7 @@ export function AssistantBubble({ entry, isStreaming }: AssistantBubbleProps) {
           }
           // 普通消息块 — 直接输出，无包裹卡片
           return (
-            <div key={i} className="message-content text-text-primary leading-loose">
+            <div key={i} className="message-content text-text-primary leading-[1.75]">
               <MessageResponse>{chunk.text}</MessageResponse>
             </div>
           );
@@ -96,7 +135,6 @@ function ImageThumbnail({ image }: { image: UserMessageImage }) {
       type="button"
       className="rounded-lg overflow-hidden border border-border hover:border-brand/40 transition-colors cursor-pointer"
       onClick={() => {
-        // 简单的点击放大 — 在新标签页打开图片
         const w = window.open("");
         if (w) {
           w.document.write(`<img src="${dataUrl}" style="max-width:100%;max-height:100%" />`);
@@ -105,7 +143,7 @@ function ImageThumbnail({ image }: { image: UserMessageImage }) {
     >
       <img
         src={dataUrl}
-        alt="用户上传的图片"
+        alt="Uploaded image"
         className="h-20 w-20 object-cover"
       />
     </button>

packages/remote-control-server/web/components/chat/PermissionPanel.tsx

@@ -41,7 +41,7 @@ interface PermissionCardProps {
 
 function PermissionCard({ request, onRespond }: PermissionCardProps) {
   return (
-    <div className="flex items-center gap-3 rounded-xl border border-warning-border/30 border-l-3 border-l-warning-border bg-warning-bg/50 px-4 py-3">
+    <div className="flex items-center gap-3 rounded-xl border border-warning-border/30 bg-warning-bg/50 px-4 py-3">
       <ShieldAlert className="h-5 w-5 text-warning-text flex-shrink-0" />
       <div className="flex-1 min-w-0">
         <div className="text-sm font-medium text-warning-text">

packages/remote-control-server/web/components/chat/PlanView.tsx

@@ -0,0 +1,143 @@
+import { useState } from "react";
+import type { PlanDisplayEntry } from "../../src/lib/types";
+import type { PlanEntry, PlanEntryPriority, PlanEntryStatus } from "../../src/acp/types";
+import { cn } from "../../src/lib/utils";
+import { CheckCircle2, Loader2, Circle } from "lucide-react";
+
+// =============================================================================
+// Plan 展示组件 — 执行计划可视化
+// =============================================================================
+
+interface PlanDisplayProps {
+  entry: PlanDisplayEntry;
+}
+
+export function PlanDisplay({ entry }: PlanDisplayProps) {
+  const [collapsed, setCollapsed] = useState(false);
+  const { entries } = entry;
+
+  if (entries.length === 0) return null;
+
+  const completed = entries.filter((e) => e.status === "completed").length;
+  const total = entries.length;
+  const percentage = total > 0 ? Math.round((completed / total) * 100) : 0;
+
+  return (
+    <div className="pl-10">
+      <div className="rounded-xl border border-border bg-brand/5 overflow-hidden">
+        {/* Header */}
+        <button
+          type="button"
+          className="w-full flex items-center gap-2 px-3 py-2.5 text-sm hover:bg-surface-1/50 transition-colors"
+          onClick={() => setCollapsed(!collapsed)}
+        >
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            className={cn("transition-transform text-text-muted flex-shrink-0", collapsed && "rotate-90")}
+          >
+            <path d="M4 2L8 6L4 10" stroke="currentColor" strokeWidth="1.5" fill="none" />
+          </svg>
+
+          <span className="text-xs font-display font-medium text-text-secondary">
+            执行计划
+          </span>
+
+          <span className="text-[10px] text-text-muted font-mono">
+            {completed}/{total}
+          </span>
+
+          {/* Progress bar */}
+          <div className="flex-1 h-1 rounded-full bg-surface-1 overflow-hidden ml-1 mr-2">
+            <div
+              className="h-full rounded-full bg-brand/70 transition-all duration-500"
+              style={{ width: `${percentage}%` }}
+            />
+          </div>
+
+          <span className="text-[10px] text-text-muted font-mono">
+            {percentage}%
+          </span>
+        </button>
+
+        {/* Entry list */}
+        {!collapsed && (
+          <div className={cn(
+            "border-t border-border px-3 py-1.5 space-y-0.5",
+            total > 5 && "max-h-64 overflow-y-auto",
+          )}>
+            {entries.map((planEntry, i) => (
+              <PlanEntryRow key={i} entry={planEntry} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// =============================================================================
+// 单条 Plan 条目
+// =============================================================================
+
+function PlanEntryRow({ entry }: { entry: PlanEntry }) {
+  return (
+    <div className="flex items-start gap-2 py-1.5 px-1">
+      <span className="flex-shrink-0 mt-0.5">
+        <StatusIcon status={entry.status} />
+      </span>
+      <span className={cn(
+        "text-xs leading-relaxed flex-1",
+        entry.status === "completed" ? "text-text-muted line-through" : "text-text-secondary",
+        entry.status === "in_progress" && "text-text-primary font-medium",
+      )}>
+        {entry.content}
+      </span>
+      <PriorityBadge priority={entry.priority} />
+    </div>
+  );
+}
+
+// =============================================================================
+// 状态图标
+// =============================================================================
+
+function StatusIcon({ status }: { status: PlanEntryStatus }) {
+  switch (status) {
+    case "completed":
+      return <CheckCircle2 className="h-3.5 w-3.5 text-status-active" />;
+    case "in_progress":
+      return <Loader2 className="h-3.5 w-3.5 text-brand animate-spin" style={{ animationDuration: "2s" }} />;
+    case "pending":
+      return <Circle className="h-3.5 w-3.5 text-text-muted" />;
+  }
+}
+
+// =============================================================================
+// 优先级标签
+// =============================================================================
+
+function PriorityBadge({ priority }: { priority: PlanEntryPriority }) {
+  const styles: Record<PlanEntryPriority, string> = {
+    high: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300",
+    medium: "bg-brand/10 text-brand dark:bg-brand/20",
+    low: "bg-surface-1 text-text-muted",
+  };
+
+  const labels: Record<PlanEntryPriority, string> = {
+    high: "高",
+    medium: "中",
+    low: "低",
+  };
+
+  return (
+    <span className={cn(
+      "text-[9px] font-display rounded-full px-1.5 py-0.5 flex-shrink-0 leading-none",
+      styles[priority],
+    )}>
+      {labels[priority]}
+    </span>
+  );
+}

packages/remote-control-server/web/components/chat/SessionSidebar.tsx

@@ -80,10 +80,10 @@ export function SessionSidebar({
                   type="button"
                   onClick={() => onSelect?.(session.id)}
                   className={cn(
-                    "w-full flex items-center gap-2 px-3 py-2 text-left transition-colors border-l-2",
+                    "w-full flex items-center gap-2 px-3 py-2 text-left transition-colors",
                     session.id === activeId
-                      ? "bg-brand/10 text-text-primary border-l-brand"
-                      : "text-text-secondary hover:bg-surface-1/50 hover:text-text-primary border-l-transparent",
+                      ? "bg-brand/10 text-text-primary"
+                      : "text-text-secondary hover:bg-surface-1/50 hover:text-text-primary",
                   )}
                   title={session.title || session.id}
                 >

packages/remote-control-server/web/components/chat/ToolCallGroup.tsx

@@ -17,12 +17,13 @@ export function ToolCallGroup({ entries, onPermissionRespond }: ToolCallGroupPro
 
   if (entries.length === 0) return null;
 
-  // 单个工具调用
+  // 单个工具调用 — 默认折叠，不展开内容详情
   if (entries.length === 1) {
     return (
       <div className="pl-10">
         <SingleToolCard
           tool={entries[0].toolCall}
+          compact
           onPermissionRespond={onPermissionRespond}
         />
       </div>
@@ -34,7 +35,7 @@ export function ToolCallGroup({ entries, onPermissionRespond }: ToolCallGroupPro
 
   return (
     <div className="pl-10">
-      <div className="rounded-lg border border-border border-l-3 border-l-brand/50 bg-surface-2/50 overflow-hidden">
+      <div className="rounded-lg border border-border bg-surface-2/50 overflow-hidden">
         {/* 折叠头 */}
         <button
           type="button"
@@ -108,8 +109,9 @@ function SingleToolCard({ tool, compact, onPermissionRespond }: SingleToolCardPr
   return (
     <div className={cn("px-3 py-2", compact && "py-1.5")}>
       {/* 标题行 — 单行紧凑 */}
-      <div
-        className="flex items-center gap-1.5 cursor-pointer group"
+      <button
+        type="button"
+        className="flex w-full items-center gap-1.5 text-left group"
         onClick={() => setExpanded(!expanded)}
       >
         {statusIcon}
@@ -119,7 +121,7 @@ function SingleToolCard({ tool, compact, onPermissionRespond }: SingleToolCardPr
         {tool.status === "running" && (
           <span className="text-[10px] text-status-running animate-pulse">running</span>
         )}
-      </div>
+      </button>
 
       {/* 权限请求按钮 */}
       {tool.status === "waiting_for_confirmation" && tool.permissionRequest && (

packages/remote-control-server/web/components/chat/index.ts

@@ -1,6 +1,7 @@
 export { ChatView } from "./ChatView";
 export { UserBubble, AssistantBubble } from "./MessageBubble";
 export { ToolCallGroup } from "./ToolCallGroup";
+export { PlanDisplay } from "./PlanView";
 export { ChatInput } from "./ChatInput";
 export { PermissionPanel } from "./PermissionPanel";
 export { SessionSidebar } from "./SessionSidebar";