@allbluecn/web-app 0.19.2 → 0.19.4

package/src/components/harness/ai-citations/components/source-components.tsx

@@ -166,6 +166,17 @@ export function SourcePreview({
     onSourceClick?.(source);
   }, [onSourceClick, source]);
 
+  // 外链协议守卫：source.url 来自搜索/AI 结果，javascript: 等伪协议
+  // 在点击时执行脚本（XSS sink）——非 http(s) 一律降级为纯文本
+  const isSafeUrl = (() => {
+    try {
+      const u = new URL(source.url);
+      return u.protocol === "http:" || u.protocol === "https:";
+    } catch {
+      return false;
+    }
+  })();
+
   return (
     <Collapsible onOpenChange={setIsSnippetOpen} open={isSnippetOpen}>
       <article
@@ -177,7 +188,15 @@ export function SourcePreview({
           "touch-manipulation [-webkit-tap-highlight-color:transparent]"
         )}
         onClick={handleClick}
+        onKeyDown={(e) => {
+          // 键盘等价操作：article 可点击但不可聚焦会让键盘用户无法触发 onSourceClick
+          if ((e.key === "Enter" || e.key === " ") && e.target === e.currentTarget) {
+            e.preventDefault();
+            handleClick();
+          }
+        }}
         role="article"
+        tabIndex={0}
       >
         <div className="flex flex-col items-center justify-between gap-3 sm:flex-row">
           <div className="flex min-w-0 flex-1 items-start gap-3">
@@ -222,22 +241,32 @@ export function SourcePreview({
                 />
               </CollapsibleTrigger>
             )}
-            <a
-              aria-label={m.chat_citations_openInNewTab({ title: source.title })}
-              className={cn(
-                "flex shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors",
-                "min-h-[44px] min-w-[44px] sm:min-h-[24px] sm:min-w-[24px]",
-                "hover:bg-background hover:text-foreground",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-                "[-webkit-tap-highlight-color:transparent] active:bg-background/80"
-              )}
-              href={source.url}
-              onClick={(e) => e.stopPropagation()}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <ExternalLink aria-hidden="true" className="size-3.5" />
-            </a>
+            {isSafeUrl ? (
+              <a
+                aria-label={m.chat_citations_openInNewTab({ title: source.title })}
+                className={cn(
+                  "flex shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors",
+                  "min-h-[44px] min-w-[44px] sm:min-h-[24px] sm:min-w-[24px]",
+                  "hover:bg-background hover:text-foreground",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+                  "[-webkit-tap-highlight-color:transparent] active:bg-background/80"
+                )}
+                href={source.url}
+                onClick={(e) => e.stopPropagation()}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <ExternalLink aria-hidden="true" className="size-3.5" />
+              </a>
+            ) : (
+              // 非安全协议：降级为纯图标占位，不渲染可点击外链
+              <span
+                aria-hidden="true"
+                className="flex shrink-0 items-center justify-center rounded-md text-muted-foreground/40 min-h-[24px] min-w-[24px] sm:min-h-[24px] sm:min-w-[24px]"
+              >
+                <ExternalLink className="size-3.5" />
+              </span>
+            )}
           </div>
         </div>
         {source.snippet && (

package/src/components/harness/ai-message/components/markdown-content.tsx

@@ -37,7 +37,6 @@ export function MarkdownContent({
       children,
       ...props
     }: {
-      node?: any;
       className?: string;
       children?: React.ReactNode;
     }) => {

package/src/components/harness/ai-message/utils/__tests__/dom-utils.test.ts

@@ -0,0 +1,38 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { describe, expect, it } from "vitest";
+import { parseInlineStyle } from "../dom-utils";
+
+// 回归哨兵：分隔符曾是 split('_')，导致样式值恒 undefined、
+// shiki 代码高亮颜色全部静默丢失（审计 A7x-web-comp-8 🟠）
+describe("parseInlineStyle", () => {
+  it("按冒号解析属性名与值", () => {
+    expect(parseInlineStyle("color: #fff; font-weight: bold")).toEqual({
+      color: "#fff",
+      fontWeight: "bold",
+    });
+  });
+
+  it("值内含冒号（url）时仅按第一个冒号切分", () => {
+    expect(parseInlineStyle("background: url(https://example.com/a.png); color: red")).toEqual({
+      background: "url(https://example.com/a.png)",
+      color: "red",
+    });
+  });
+
+  it("kebab-case 转 camelCase", () => {
+    expect(parseInlineStyle("background-color:red")).toEqual({
+      backgroundColor: "red",
+    });
+  });
+
+  it("忽略空声明与缺值声明", () => {
+    expect(parseInlineStyle(";color:;  ;display:none;")).toEqual({
+      display: "none",
+    });
+  });
+
+  it("空串返回空对象", () => {
+    expect(parseInlineStyle("")).toEqual({});
+  });
+});

package/src/components/harness/ai-message/utils/dom-utils.ts

@@ -20,7 +20,13 @@ import React from "react";
 export function parseInlineStyle(styleText: string): React.CSSProperties {
   const styleObject: React.CSSProperties = {};
   for (const declaration of styleText.split(";")) {
-    const [prop, value] = declaration.split('_').map((s) => s.trim());
+    // CSS 声明以「:」分隔属性名与值（误用 split('_') 会丢失全部样式，
+    // shiki token 颜色/pre 背景整体失效）；值内可能含冒号（如 url(data:)），
+    // 仅按第一个冒号切分
+    const idx = declaration.indexOf(":");
+    if (idx === -1) continue;
+    const prop = declaration.slice(0, idx).trim();
+    const value = declaration.slice(idx + 1).trim();
     if (prop && value) {
       const camelProp = prop.replace(/-([a-z])/g, (_m, c) => c.toUpperCase());
       (styleObject as Record<string, string>)[camelProp] = value;

package/src/components/harness/ai-thinking.tsx

@@ -36,13 +36,6 @@ const DIMENSIONS = {
   FADE_HEIGHT: "80px",
 } as const;
 
-const SHIMMER_CONFIG = {
-  DURATION: "5s",
-  GRADIENT:
-    "linear-gradient(110deg, #404040 35%, #fff 50%, #404040 75%, #404040)",
-  BACKGROUND_SIZE: "200% 100%",
-} as const;
-
 function useTimer() {
   const [timer, setTimer] = useState(0);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
@@ -63,7 +56,7 @@ function useTimer() {
 }
 
 function useAutoScroll(contentRef: React.RefObject<HTMLDivElement | null>) {
-  const [scrollPosition, setScrollPosition] = useState(0);
+  const positionRef = useRef(0);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
@@ -81,10 +74,13 @@ function useAutoScroll(contentRef: React.RefObject<HTMLDivElement | null>) {
       if (maxScroll <= 0) return;
 
       intervalRef.current = setInterval(() => {
-        setScrollPosition((prev) => {
-          const newPosition = prev + 1;
-          return newPosition >= maxScroll ? 0 : newPosition;
-        });
+        const el = contentRef.current;
+        if (!el) return;
+        // 直接改 scrollTop（零 re-render）：state 方案每 5ms 一次 setState
+        // 触发全组件重渲染，纯属浪费
+        const next = positionRef.current + 1 >= maxScroll ? 0 : positionRef.current + 1;
+        positionRef.current = next;
+        el.scrollTop = next;
       }, SCROLL_CONFIG.SPEED);
     };
 
@@ -97,14 +93,6 @@ function useAutoScroll(contentRef: React.RefObject<HTMLDivElement | null>) {
       }
     };
   }, [contentRef]);
-
-  useEffect(() => {
-    if (contentRef.current) {
-      contentRef.current.scrollTop = scrollPosition;
-    }
-  }, [scrollPosition, contentRef]);
-
-  return scrollPosition;
 }
 
 interface ThinkingHeaderProps {
@@ -188,20 +176,6 @@ function ContentCard({ contentRef, content }: ContentCardProps) {
   );
 }
 
-function ShimmerStyles() {
-  return (
-    <style>{`
-      @keyframes shimmer {
-        0% { background-position: 200% 0; }
-        100% { background-position: -200% 0; }
-      }
-      @media (prefers-reduced-motion: reduce) {
-        [style*="shimmer"] { animation: none; }
-      }
-    `}</style>
-  );
-}
-
 export default function AIThinking({
   className,
   content,

package/src/components/harness/chat-ui.tsx

@@ -142,7 +142,8 @@ export function HarnessPartsFactory(
     return (
       <>
         {parts.map((part, i) => (
-          <HarnessSelectedPart key={i} part={part} />
+          // selectMessageUI 已产出稳定 part.key：index key 在流式增删时会复用错实例
+          <HarnessSelectedPart key={part.key ?? i} part={part} />
         ))}
       </>
     );

package/src/components/harness/code/changeset-panel.tsx

@@ -97,10 +97,19 @@ export function ChangesetPanel({ changes }: ChangesetPanelProps) {
             </button>
             {expanded && entry.diff && (
               <pre className="mx-3 mb-2 overflow-x-auto rounded border border-border bg-background p-2 font-mono text-[11px] leading-4">
-                {truncateDiff(entry.diff).text}
-                {truncateDiff(entry.diff).truncated && (
-                  <span className="text-muted-foreground">... ({m.chat_sandbox_moreChanges({ count: 0 })})</span>
-                )}
+                {(() => {
+                  // truncateDiff 全量切行开销不小：取一次结果复用（勿连续调用两次）
+                  const t = truncateDiff(entry.diff)
+                  const remaining = Math.max(0, entry.diff.split("\n").length - MAX_DIFF_LINES)
+                  return (
+                    <>
+                      {t.text}
+                      {t.truncated && (
+                        <span className="text-muted-foreground">... ({m.chat_sandbox_moreChanges({ count: remaining })})</span>
+                      )}
+                    </>
+                  )
+                })()}
               </pre>
             )}
           </div>

package/src/components/harness/code/code-workspace-sidebar.tsx

@@ -28,6 +28,7 @@ import { useWorkspace } from "./workspace-context"
 import { buildFileUri } from "@/components/harness/dock/resource-uri"
 import { dockRegistry } from "@/components/harness/dock/dock-registry"
 import { GalleryGrid } from "@/components/harness/gallery/gallery-grid"
+import { toast } from "@/components/ui/toast"
 import { m } from "@/paraglide/messages.js"
 
 type CodeTab = "files" | "changes" | "terminal" | "preview" | "gallery"
@@ -71,7 +72,8 @@ export function CodeWorkspaceSidebar({ initialTab = "files", mediaRoute = "code"
               setActiveTab("preview")
             }
           } catch {
-            // 忽略读取失败
+            // 目录句柄失效/权限吊销/文件过大等：给出可见反馈而非静默无响应
+            toast.error(m.chat_code_fileReadFailed())
           }
         })()
       }
@@ -79,10 +81,6 @@ export function CodeWorkspaceSidebar({ initialTab = "files", mediaRoute = "code"
     [workspace],
   )
 
-  const handleClearTerminal = useCallback(() => {
-    // 清除终端行状态由外部管理，此处仅重置 tab 显示
-  }, [])
-
   return (
     <div className="flex h-full flex-col">
       <Tabs
@@ -122,7 +120,7 @@ export function CodeWorkspaceSidebar({ initialTab = "files", mediaRoute = "code"
             <ChangesetPanel changes={changes} />
           </TabsContent>
           <TabsContent value="terminal" className="h-full data-[state=active]:flex">
-            <TerminalPanel onClear={handleClearTerminal} />
+            <TerminalPanel />
           </TabsContent>
           <TabsContent value="preview" className="h-full data-[state=active]:flex">
             <PreviewPanel html={previewHtml} title={previewTitle} route={mediaRoute} onRouteChange={onMediaRouteChange} />

package/src/components/harness/code/file-tree.tsx

@@ -44,12 +44,12 @@ function buildTreeFromPaths(paths: string[]): FileTreeItem[] {
   for (const p of paths) {
     const parts = p.split("/").filter(Boolean)
     let current = root
-    let lastItem: FileTreeItem | undefined
     for (let i = 0; i < parts.length; i++) {
       const part = parts[i]
       const isLast = i === parts.length - 1
-      const key = isLast ? `file:${p}` : `dir:${p.slice(0, p.lastIndexOf(part) + part.length)}`
-      const fullPath = p.slice(0, p.lastIndexOf(part) + part.length)
+      // 按段序拼接完整路径：lastIndexOf(part) 会在段名互为子串时
+      // （如 src/old-src/x.ts 的 src 命中 old-src 内部）截出错误目录路径
+      const fullPath = parts.slice(0, i + 1).join("/")
       if (!current[part]) {
         const item: FileTreeItem = isLast
           ? { path: fullPath, type: "file" }
@@ -62,7 +62,6 @@ function buildTreeFromPaths(paths: string[]): FileTreeItem[] {
         if (!childNode.children) childNode.children = []
         current = childNode.children as unknown as Record<string, FileTreeItem>
       }
-      lastItem = current[part]
     }
   }
   // Rebuild with proper structure
@@ -210,7 +209,9 @@ export function FileTree({ onFileOpen }: FileTreeProps) {
       {workspace?.type === "cloud" && (
         <div className="shrink-0 border-b px-2 py-1.5">
           <AIFileUpload
-            acceptedTypes={["image/*", ".pdf", ".md", ".txt"]}
+            // 仅收纯文本：上传通道是 readAsText（服务端 content 为 text 列），
+            // image/*、.pdf 等二进制按 UTF-8 解码会不可逆损坏
+            acceptedTypes={[".md", ".txt"]}
             maxSize={4 * 1024 * 1024}
             maxFiles={6}
             showPreview
@@ -226,11 +227,8 @@ export function FileTree({ onFileOpen }: FileTreeProps) {
             item={file}
             depth={0}
             onFileOpen={(path) => {
-              if (workspace?.type === "cloud") {
-                onFileOpen?.(path)
-              } else if (workspace?.type === "local-fsap") {
-                onFileOpen?.(path)
-              }
+              // 云端与 FSAP 两工作区的打开路径一致，无需分支
+              onFileOpen?.(path)
             }}
           />
         ))}

package/src/components/harness/code/preview-panel.tsx

@@ -100,7 +100,8 @@ function SpecRenderer({ node }: { node: UiSpecNode }) {
       return (
         <div style={baseStyle}>
           {children?.map((child, i) => (
-            <SpecRenderer key={i} node={child} />
+            // spec 树为 AI 输出可能流式增删：type+i 组合 key 降低兄弟复用错位
+            <SpecRenderer key={`${child.type ?? "node"}-${i}`} node={child} />
           ))}
         </div>
       )

package/src/components/harness/code/terminal-panel.tsx

@@ -17,6 +17,7 @@
 
 
 import { useEffect, useRef, useState } from "react"
+import { Button } from "@/components/ui/button"
 import { useHarnessSandboxEvents } from "../harness-chat-slots"
 import { m } from "@/paraglide/messages.js"
 
@@ -26,23 +27,28 @@ export interface TerminalLine {
   timestamp: number
 }
 
-interface TerminalPanelProps {
-  onClear?: () => void
-}
+/** 行数上限：长会话防无界增长 */
+const MAX_LINES = 500
 
-export function TerminalPanel({ onClear }: TerminalPanelProps) {
+export function TerminalPanel() {
   const bottomRef = useRef<HTMLDivElement>(null)
   const { changes, runState } = useHarnessSandboxEvents()
   const [lines, setLines] = useState<TerminalLine[]>([])
+  const lineIdRef = useRef(0)
   const isStreaming = runState === "created" || runState === "resumed"
 
   useEffect(() => {
     // 沙箱事件流：每次 sandbox.created/resumed 追加占位行（真实终端输出 P4c 接）
     if (runState === "created" || runState === "resumed") {
-      const ts = Date.now()
+      // 自增 id：同毫秒多次状态切换时 Date.now() 会产生重复 React key
+      const id = ++lineIdRef.current
       setLines((prev) => [
-        ...prev,
-        { id: ts, text: `[sandbox] ${runState === "created" ? "started" : "resumed"}`, timestamp: ts },
+        ...prev.slice(-(MAX_LINES - 1)),
+        {
+          id,
+          text: runState === "created" ? m.chat_terminal_started() : m.chat_terminal_resumed(),
+          timestamp: Date.now(),
+        },
       ])
     }
   }, [runState])
@@ -62,13 +68,14 @@ export function TerminalPanel({ onClear }: TerminalPanelProps) {
   return (
     <div className="relative">
       <div className="absolute right-2 top-2 z-10">
-        <button
-          type="button"
-          onClick={onClear}
-          className="text-xs text-muted-foreground hover:text-foreground"
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-5 px-1.5 text-xs text-muted-foreground hover:text-foreground"
+          onClick={() => setLines([])}
         >
           {m.chat_code_clearTerminal()}
-        </button>
+        </Button>
       </div>
       <pre className="overflow-y-auto font-mono text-[11px] leading-5 text-foreground whitespace-pre-wrap break-all">
         {lines.map((line) => (

package/src/components/harness/code/workspace-picker.tsx

@@ -154,14 +154,12 @@ export function WorkspacePicker({ value, onChange }: WorkspacePickerProps) {
           {!hasGithubToken ? (
             <div className="space-y-2">
               <p className="text-sm text-muted-foreground">{m.chat_workspace_githubConnect()}</p>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => window.open("https://github.com/login/oauth/authorize", "_blank")}
-                type="button"
-              >
+              {/* 真实 OAuth 发起端点未接线：裸 authorize URL 缺 client_id/redirect_uri
+                  打开即 GitHub 报错页，先禁用并提示（接入后端 OAuth 后替换） */}
+              <Button variant="outline" size="sm" disabled type="button">
                 {m.chat_workspace_connectGithub()}
               </Button>
+              <p className="text-xs text-muted-foreground">{m.chat_workspace_githubNotWired()}</p>
             </div>
           ) : (
             <>

package/src/components/harness/composer/attachments/attachment-policy.ts

@@ -24,17 +24,14 @@ export interface BatchCheck {
 }
 
 export function isImage(file: File): boolean {
+  // 通道选择器语义（图片走 dataURL、非图片走 BlobStore），不做白名单判断——
+  // 白名单收敛统一由 isSupported 执行，避免 image/heic 等绕过 fail-closed 注释
   return file.type.startsWith("image/")
 }
 
-/** 非图片但白名单内的类型：走 BlobStore 上传通道 */
-export function isBlobSupported(file: File): boolean {
-  return SUPPORTED_MIME_TYPES.has(file.type) && !isImage(file)
-}
-
-/** 该文件是否被白名单允许（图片 / 非图片 Blob 二选一） */
+/** 该文件是否被白名单允许（含图片在内统一走白名单，fail-closed） */
 export function isSupported(file: File): boolean {
-  return isImage(file) || isBlobSupported(file)
+  return SUPPORTED_MIME_TYPES.has(file.type)
 }
 
 export function checkAttachmentBatch(files: File[]): BatchCheck {

package/src/components/harness/composer/attachments/attachment-tray.tsx

@@ -18,7 +18,9 @@
 
 import { X, Image as ImageIcon } from "lucide-react"
 import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
 import type { Attachment } from "./use-attachments"
+import { m } from "@/paraglide/messages.js"
 
 export interface AttachmentTrayProps {
   attachments: Attachment[]
@@ -56,14 +58,16 @@ export function AttachmentTray({ attachments, onRemove, className }: AttachmentT
               {(att.file.size / 1024).toFixed(1)} KB
             </span>
           </div>
-          <button
-            aria-label="移除附件"
-            className="ml-auto rounded-full p-0.5 hover:bg-accent"
+          <Button
+            variant="ghost"
+            size="icon"
+            aria-label={m.harness_attachment_remove()}
+            className="ml-auto size-5 rounded-full p-0.5 hover:bg-accent"
             onClick={() => onRemove(att.id)}
             type="button"
           >
             <X className="size-3" />
-          </button>
+          </Button>
         </div>
       ))}
     </div>

package/src/components/harness/composer/attachments/use-attachments.ts

@@ -16,8 +16,10 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useCallback, useState } from "react"
-import { checkAttachmentBatch, isImage, isBlobSupported, type BatchCheck } from "./attachment-policy"
+import { checkAttachmentBatch, isImage, isSupported, MAX_COUNT, MAX_SINGLE_MB, MAX_TOTAL_MB, type BatchCheck } from "./attachment-policy"
 import { uploadBlobFn } from "@/server/serverFns/blob-upload"
+import { toast } from "@/components/ui/toast"
+import { m } from "@/paraglide/messages.js"
 
 export interface Attachment {
   id: string
@@ -64,6 +66,16 @@ function fileToBase64(file: File): Promise<string> {
   })
 }
 
+/** 单批校验失败的用户提示（按原因映射） */
+function batchRejectMessage(reason?: BatchCheck["reason"]): string {
+  switch (reason) {
+    case "count": return m.harness_attachment_maxCount({ count: MAX_COUNT })
+    case "singleSize": return m.harness_attachment_maxSize({ size: MAX_SINGLE_MB })
+    case "totalSize": return m.harness_attachment_maxTotal({ size: MAX_TOTAL_MB })
+    default: return m.harness_attachment_unsupportedType()
+  }
+}
+
 export function useAttachments() {
   const [attachments, setAttachments] = useState<Attachment[]>([])
 
@@ -72,7 +84,23 @@ export function useAttachments() {
     if (fileArray.length === 0) return
 
     const check: BatchCheck = checkAttachmentBatch(fileArray)
-    if (!check.ok) return
+    if (!check.ok) {
+      // 校验失败必须可见，静默 return 会让用户以为附件已添加
+      toast.error(batchRejectMessage(check.reason))
+      return
+    }
+
+    // 与已有附件合并后再校验总数/总量，防止分批多次绕过上限
+    if (attachments.length + fileArray.length > MAX_COUNT) {
+      toast.error(m.harness_attachment_maxCount({ count: MAX_COUNT }))
+      return
+    }
+    const totalBytes = attachments.reduce((s, a) => s + a.file.size, 0)
+      + fileArray.reduce((s, f) => s + f.size, 0)
+    if (totalBytes > MAX_TOTAL_MB * 1024 * 1024) {
+      toast.error(m.harness_attachment_maxTotal({ size: MAX_TOTAL_MB }))
+      return
+    }
 
     const newAttachments: Attachment[] = fileArray.map((file) => ({
       id: generateId(),
@@ -89,15 +117,20 @@ export function useAttachments() {
         if (isImage(att.file)) {
           const dataUrl = await fileToDataUrl(att.file)
           setAttachments((prev) =>
-            prev.map((a) => (a.id === att.id ? { ...a, dataUrl } : a)),
+            prev.map((a) =>
+              // 读取失败（resolve undefined）标 error，防止停在 ready 却无 dataUrl
+              a.id === att.id
+                ? { ...a, dataUrl, status: dataUrl ? "ready" : "error", error: dataUrl ? undefined : m.harness_attachment_uploadFailed() }
+                : a,
+            ),
           )
           return
         }
 
-        if (!isBlobSupported(att.file)) {
+        if (!isSupported(att.file)) {
           setAttachments((prev) =>
             prev.map((a) =>
-              a.id === att.id ? { ...a, status: "error", error: "不支持的文件类型" } : a,
+              a.id === att.id ? { ...a, status: "error", error: m.harness_attachment_unsupportedType() } : a,
             ),
           )
           return
@@ -117,26 +150,22 @@ export function useAttachments() {
           } else {
             setAttachments((prev) =>
               prev.map((a) =>
-                a.id === att.id ? { ...a, status: "error", error: "上传失败" } : a,
+                a.id === att.id ? { ...a, status: "error", error: m.harness_attachment_uploadFailed() } : a,
               ),
             )
           }
-        } catch (err) {
+        } catch {
           setAttachments((prev) =>
             prev.map((a) =>
               a.id === att.id
-                ? {
-                    ...a,
-                    status: "error",
-                    error: err instanceof Error ? "上传失败" : "上传失败",
-                  }
+                ? { ...a, status: "error", error: m.harness_attachment_uploadFailed() }
                 : a,
             ),
           )
         }
       }),
     )
-  }, [])
+  }, [attachments])
 
   const removeAttachment = useCallback((id: string) => {
     setAttachments((prev) => prev.filter((a) => a.id !== id))

package/src/components/harness/composer/composer-editor.tsx

@@ -24,6 +24,7 @@ import Placeholder from "@tiptap/extension-placeholder"
 import { MentionExtension } from "@/components/tiptap/node/mention-extension"
 import { MentionSuggestionMenu } from "./mention/mention-suggestion-menu"
 import { draftsStore } from "./use-drafts"
+import { useDebouncedCallback } from "@/lib/pacer"
 import { m } from "@/paraglide/messages.js"
 
 const DRAFT_KEY_PREFIX = "draft"
@@ -115,6 +116,11 @@ export function ComposerEditor({
 }: ComposerEditorProps) {
   const draftKey = `${DRAFT_KEY_PREFIX}:${threadId}`
   const mentionKbIdsRef = useRef<string[]>([])
+  // 草稿落盘防抖（pacer，禁止手写 setTimeout）：避免逐键全量重写 sessionStorage
+  const saveDraft = useDebouncedCallback(
+    (key: string, json: string) => draftsStore.save(key, json),
+    { wait: 400 },
+  )
   // 在草稿基础上追加 handoff 预填文本（按 doc 语义合并，草稿串 parse 回 doc）
   const resolvedDraft = useMemo(
     () => resolveInitialContent(prefillText, draftsStore.load(draftKey)),
@@ -169,13 +175,11 @@ export function ComposerEditor({
       },
     },
     onUpdate: ({ editor }) => {
-      draftsStore.save(
-        draftKey,
-        editor.getJSON() ? JSON.stringify(editor.getJSON()) : "",
-      )
+      // getJSON() 全量序列化开销显著：取一次复用，勿连续调用
+      const doc = editor.getJSON()
+      saveDraft(draftKey, doc.content?.length ? JSON.stringify(doc) : "")
       onTextChange(editor.isEmpty)
       // 收集当前编辑器中所有 @mention chip 的 kbId
-      const doc = editor.getJSON()
       const ids: string[] = []
       const walk = (nodes: unknown[]) => {
         for (const n of nodes) {