Merge remote-tracking branch 'origin/master' into master

frontend-web/scripts/check-chrome109-css.mjs

@@ -31,6 +31,16 @@ const requiredLegacyFallbacks = [
     pattern: /<InputGroup className="h-auto min-h-16">/,
     description: "Prompt textarea must not rely on :has() for its parent height",
   },
+  {
+    file: "src/core/utils/mermaid.ts",
+    pattern: /htmlLabels:\s*false[\s\S]*secure:\s*\[[\s\S]*"htmlLabels"/,
+    description: "Sandbox flowcharts must use native SVG labels in legacy browsers",
+  },
+  {
+    file: "src/core/utils/legacy-html-preview.ts",
+    pattern: /export function downlevelModernColors[\s\S]*function injectLegacyChartShim/,
+    description: "Generated HTML charts must downlevel modern CSS colors for Chrome 109",
+  },
 ];
 
 for (const file of cssFiles) {

frontend-web/src/components/html-preview-frame.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-import { injectInPageAnchorHandler } from "@/core/utils/markdown";
+import { prepareGeneratedHtml } from "@/core/utils/legacy-html-preview";
 
 /**
  * Sandboxed preview of a generated HTML document.
@@ -26,7 +26,7 @@ export function HtmlPreviewFrame({
   const [url, setUrl] = useState<string>();
 
   useEffect(() => {
-    const blob = new Blob([injectInPageAnchorHandler(html ?? "")], {
+    const blob = new Blob([prepareGeneratedHtml(html ?? "")], {
       type: "text/html;charset=utf-8",
     });
     const objectUrl = URL.createObjectURL(blob);

frontend-web/src/components/workspace/agents/agent-gallery.tsx

@@ -615,7 +615,11 @@ export function AgentGallery() {
           </TabsContent>
         )}
       </Tabs>
-      <AgentGuide stage="list" eligible={isAgentGuideEnvironment()} />
+      <AgentGuide
+        stage="list"
+        eligible={isAgentGuideEnvironment()}
+        autoStart={false}
+      />
     </div>
   );
 }

frontend-web/src/components/workspace/agents/agent-guide.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useRouter } from "next/navigation";
 import { Guide, type GuideStep } from "tdesign-react";
 
 import { env } from "@/env";
@@ -13,7 +12,8 @@ import { isWujieEnv } from "@/core/embed/wujie";
  * 「浏览管理 → 创建与配置 → 发起问答」流程：
  *
  *   - list   ：智能体列表页（/page/workspace/agents）——分区、搜索排序、卡片操作、
- *              创建入口；最后一步「去创建智能体 →」直接跳到创建页衔接下一段。
+ *              创建入口；完成 / 跳过就地结束，不跳转创建页（创建页有自己的一段
+ *              引导，点「创建智能体」进入时自动演示）。
  *   - create ：创建页（/page/workspace/agents/new）——对话式创建、基本信息、模型、
  *              知识空间、SOUL.md、技能、保存。
  *   - chat   ：智能体对话页（/page/workspace/agents/:id/chats/...）——侧栏切换与
@@ -23,6 +23,10 @@ import { isWujieEnv } from "@/core/embed/wujie";
  * localStorage 标记，**只有用户显式点「完成」或「跳过」才写入**；中途刷新/离开
  * 不记忆，下次进入该页面还会自动演示。各页头部的「使用引导」按钮可随时强制重放。
  *
+ * 自动演示范围：只有 create 段（进入新建页）与 chat 段自动弹；list 段挂在
+ * 智能体列表页但不自动演示（`autoStart={false}`，避免一进列表页就弹引导），
+ * 仅由头部「使用引导」按钮手动触发。
+ *
  * 高亮目标通过 `data-agent-guide` 标记在各组件上；启动时按目标是否存在过滤步骤
  * （如新用户无智能体卡片、无预设常用问题时自动剔除该步）——Guide 对找不到的
  * 目标元素会抛错，不能盲传。
@@ -121,7 +125,7 @@ const LIST_STEPS: StepSpec[] = [
     mode: "popup",
     placement: "bottom-left",
     title: "创建智能体",
-    body: "准备好了就点这里，开始创建你的专属智能体。点「去创建智能体」直接进入下一站。",
+    body: "准备好了就点这里，开始创建你的专属智能体；进入创建页后还会有一段配置引导。",
   },
 ];
 
@@ -260,17 +264,19 @@ function buildSteps(stage: AgentGuideStage): GuideStep[] {
 }
 
 /**
- * 智能体三段引导的运行组件：`stage` 决定步骤内容，`eligible` 为false 时完全
- * 静默（不监听、不自动弹）。挂在三个页面各自的作用域内。
+ * 智能体三段引导的运行组件：`stage` 决定步骤内容，`eligible` 为 false 时完全
+ * 静默（不监听、不自动弹）。挂在三个页面各自的作用域内；`autoStart` 为 false
+ * 时仅响应手动触发（列表页不自动弹，进新建页才自动演示）。
  */
 export function AgentGuide({
   stage,
   eligible,
+  autoStart = true,
 }: {
   stage: AgentGuideStage;
   eligible: boolean;
+  autoStart?: boolean;
 }) {
-  const router = useRouter();
   const [current, setCurrent] = useState(-1);
   const stepsRef = useRef<GuideStep[]>([]);
 
@@ -285,7 +291,7 @@ export function AgentGuide({
   // 「已看过」只由 finish 回调（完成/跳过）写入。
   const autoTriedRef = useRef(false);
   useEffect(() => {
-    if (!eligible || autoTriedRef.current) return;
+    if (!eligible || !autoStart || autoTriedRef.current) return;
     autoTriedRef.current = true;
     if (isStageFinished(stage)) return;
     const timer = setTimeout(start, START_DELAY_MS);
@@ -294,7 +300,7 @@ export function AgentGuide({
       // 组件在计时窗口内卸载（用户迅速离开页面）则下次进入再演示。
       autoTriedRef.current = false;
     };
-  }, [eligible, stage, start]);
+  }, [eligible, autoStart, stage, start]);
 
   // 手动触发：页面头部「使用引导」按钮广播事件，忽略已看过记忆强制重放。
   useEffect(() => {
@@ -305,15 +311,11 @@ export function AgentGuide({
       window.removeEventListener(startEventName(stage), handler);
   }, [eligible, stage, start]);
 
-  // 完成 / 跳过是用户显式结束引导 —— 只有这两种情况才记忆「已看过」。
-  // list 阶段的最后一步按钮文案是「去创建智能体 →」，完成即跳转衔接下一段。
+  // 完成 / 跳过都是用户显式结束引导，就地关闭并记忆「已看过」，不跳转任何页面。
   const finish = useCallback(() => {
     markStageFinished(stage);
     setCurrent(-1);
-    if (stage === "list") {
-      router.push("/page/workspace/agents/new");
-    }
-  }, [stage, router]);
+  }, [stage]);
 
   if (!eligible) return null;
 
@@ -324,9 +326,6 @@ export function AgentGuide({
       onChange={setCurrent}
       onFinish={finish}
       onSkip={finish}
-      finishButtonProps={
-        stage === "list" ? { content: "去创建智能体 →" } : undefined
-      }
     />
   );
 }

frontend-web/src/components/workspace/artifacts/artifact-file-detail.tsx

@@ -97,9 +97,9 @@ import {
   openMermaidSvgInNewTab,
   renderMermaidToSvg,
 } from "@/core/utils/mermaid";
+import { prepareGeneratedHtml } from "@/core/utils/legacy-html-preview";
 import {
   createMarkdownAnchorResolver,
-  injectInPageAnchorHandler,
   isInPageAnchor,
   scrollToInPageAnchor,
 } from "@/core/utils/markdown";
@@ -1422,7 +1422,9 @@ export function ArtifactFileDetail({
       toast.error("文件内容为空，暂时无法在新窗口打开");
       return;
     }
-    const blob = new Blob([source], { type: "text/html;charset=utf-8" });
+    const blob = new Blob([prepareGeneratedHtml(source)], {
+      type: "text/html;charset=utf-8",
+    });
     const url = URL.createObjectURL(blob);
     window.open(url, "_blank", "noopener,noreferrer");
     window.setTimeout(() => URL.revokeObjectURL(url), 60_000);
@@ -1460,7 +1462,7 @@ export function ArtifactFileDetail({
 
   return (
     <Artifact className={cn(className)}>
-      <ArtifactHeader className="relative flex flex-wrap items-center gap-3 px-4 py-3 pr-14">
+      <ArtifactHeader className="relative flex flex-wrap items-center gap-3 px-4 py-3 pr-14">
         <div className="flex min-w-0 items-center gap-2">
           <div
             className={cn(
@@ -1554,8 +1556,8 @@ export function ArtifactFileDetail({
             </div>
           )}
         </div>
-        <div className="flex min-w-0 w-full items-center justify-end gap-2 md:ml-auto md:w-auto">
-          <ArtifactActions className="bg-muted/45 min-w-0 max-w-full flex-wrap justify-end rounded-3xl border border-black/6 p-1 dark:border-white/8">
+        <div className="flex min-w-0 w-full items-center justify-end gap-2 md:ml-auto md:w-auto">
+          <ArtifactActions className="bg-muted/45 min-w-0 max-w-full flex-wrap justify-end rounded-3xl border border-black/6 p-1 dark:border-white/8">
             {canPublishToKnowledge && (
               <ArtifactAction
                 icon={isPublishingToKnowledge ? LoaderIcon : UploadCloudIcon}
@@ -1683,18 +1685,18 @@ export function ArtifactFileDetail({
                 }
               }}
             />
-          </ArtifactActions>
-        </div>
-        {/* 文件目录会压缩详情区宽度。关闭入口固定在右上角，不再跟随可换行的
-            动作组，避免工具较多或面板较窄时最右侧按钮被裁掉。 */}
-        <ArtifactAction
-          className="bg-background/90 hover:bg-accent absolute top-3 right-3 z-10 border shadow-sm"
-          icon={XIcon}
-          label="收起文件面板"
-          onClick={() => (onClose ? onClose() : setOpen(false))}
-          tooltip="收起文件面板"
-        />
-      </ArtifactHeader>
+          </ArtifactActions>
+        </div>
+        {/* 文件目录会压缩详情区宽度。关闭入口固定在右上角，不再跟随可换行的
+            动作组，避免工具较多或面板较窄时最右侧按钮被裁掉。 */}
+        <ArtifactAction
+          className="bg-background/90 hover:bg-accent absolute top-3 right-3 z-10 border shadow-sm"
+          icon={XIcon}
+          label="收起文件面板"
+          onClick={() => (onClose ? onClose() : setOpen(false))}
+          tooltip="收起文件面板"
+        />
+      </ArtifactHeader>
       <ArtifactContent
         ref={artifactContentRef}
         className="relative p-0"
@@ -2084,7 +2086,7 @@ export function ArtifactFilePreview({
     // <meta charset> 就会中文乱码。与下方下载/新窗口打开的 blobType 保持一致。
     // Intercept in-page anchor clicks so they scroll within the iframe instead
     // of navigating the sandboxed blob: document (which blanks the frame).
-    const blob = new Blob([injectInPageAnchorHandler(content ?? "")], {
+    const blob = new Blob([prepareGeneratedHtml(content ?? "")], {
       type: "text/html;charset=utf-8",
     });
     const url = URL.createObjectURL(blob);

frontend-web/src/components/workspace/messages/markdown-content.tsx

@@ -143,6 +143,7 @@ export function MarkdownContent({
         className={className}
         remarkPlugins={remarkPlugins}
         rehypePlugins={rehypePlugins}
+        mermaidConfig={streamdownPlugins.mermaidConfig}
         components={components}
       >
         {content}

frontend-web/src/core/streamdown/plugins.ts

@@ -5,22 +5,27 @@ import remarkMath from "remark-math";
 import type { StreamdownProps } from "streamdown";
 
 import { rehypeSplitWordsIntoSpans } from "../rehype";
+import { SANDBOX_MERMAID_CONFIG } from "../utils/mermaid";
+import { remarkSanitizeMermaid } from "./remark-sanitize-mermaid";
 
 export const streamdownPlugins = {
   remarkPlugins: [
     remarkGfm,
     [remarkMath, { singleDollarTextMath: true }],
+    remarkSanitizeMermaid,
   ] as StreamdownProps["remarkPlugins"],
   rehypePlugins: [
     rehypeRaw,
     [rehypeKatex, { output: "html" }],
   ] as StreamdownProps["rehypePlugins"],
+  mermaidConfig: SANDBOX_MERMAID_CONFIG,
 };
 
 export const streamdownPluginsWithWordAnimation = {
   remarkPlugins: [
     remarkGfm,
     [remarkMath, { singleDollarTextMath: true }],
+    remarkSanitizeMermaid,
   ] as StreamdownProps["remarkPlugins"],
   rehypePlugins: [
     [rehypeKatex, { output: "html" }],

frontend-web/src/core/streamdown/remark-sanitize-mermaid.ts

@@ -0,0 +1,18 @@
+import { visit } from "unist-util-visit";
+
+import { sanitizeMermaidSource } from "../utils/mermaid";
+
+type MermaidCodeNode = {
+  lang?: string | null;
+  value: string;
+};
+
+export function remarkSanitizeMermaid() {
+  return (tree: unknown) => {
+    visit(tree as never, "code", (node: MermaidCodeNode) => {
+      const lang = (node.lang ?? "").toLowerCase();
+      if (lang !== "mermaid" && lang !== "mmd") return;
+      node.value = sanitizeMermaidSource(node.value);
+    });
+  };
+}

frontend-web/src/core/threads/hooks.ts

@@ -36,6 +36,7 @@ import {
 import {
   collectHumanMessageIds,
   hasServerEchoedOptimisticHuman,
+  isStaleStreamFinish,
   mergeStreamDisplayValues,
   shouldDiscardTerminalOverlay,
 } from "./stream-display";
@@ -195,11 +196,9 @@ function getRunMetadataStorage(): {
 
 /**
  * SDK ``useStream`` stores the in-flight run id at ``lg:stream:{threadId}``
- * but **deletes that key on stream onSuccess**. A premature SSE close
- * (proxy timeout / false-positive disconnect) looks like success, so the
- * reconnect key vanishes while the backend run is still occupying the
- * thread. We keep a second key the SDK never touches and only clear it
- * after ``runs.get`` confirms a terminal status.
+ * but **deletes that key on stream onSuccess**. We keep a second key the SDK
+ * never touches so a 409 / dropped-SSE exception can still rejoin. Normal
+ * SSE close clears it immediately — do not wait for ``runs.get``.
  */
 const ACTIVE_RUN_STORAGE_PREFIX = "df:active-run:";
 
@@ -281,36 +280,18 @@ export async function stopThreadRun(
 /**
  * 协助卡提交前：若上一轮还在流式（弱模型出卡后偶发未停干净），先取消服务端 run
  * 并断开本地 SSE，避免 409「已有活跃 run」或用户点了选项却发不出去。
+ *
+ * 不在发送前 GET /runs —— 协助卡出现时图多半已经结束，为兜底去查会让每次
+ * 点选项都卡住。未在流式则直接发；真遇到 409 再走 confirmOrRejoin。
  */
 export async function stopActiveThreadBeforeClarificationReply(
   threadId: string | null | undefined,
   thread: { isLoading?: boolean; stop: () => void | Promise<void> },
 ): Promise<void> {
-  let storedRunId: string | null = null;
-  if (threadId && typeof window !== "undefined") {
-    try {
-      storedRunId =
-        normalizeStoredRunId(
-          window.sessionStorage.getItem(`lg:stream:${threadId}`),
-        ) || readActiveRunId(threadId);
-    } catch {
-      storedRunId = null;
-    }
+  if (!thread.isLoading) {
+    if (threadId) clearActiveRunId(threadId);
+    return;
   }
-  // 协助卡出现时图已经 jump_to=end，run 多半已是 terminal。再 stop()/cancel
-  // 会再触发 onFinish → getState overlay，把刚发出的用户回复冻住、整段攒着出。
-  if (storedRunId && threadId) {
-    try {
-      const run = await getAPIClient().runs.get(threadId, storedRunId);
-      if (run && !isInflightRunStatus(run.status)) {
-        clearActiveRunId(threadId);
-        return;
-      }
-    } catch {
-      /* 404 / 网络：按下面的 best-effort stop 走 */
-    }
-  }
-  if (!thread.isLoading && !storedRunId) return;
   try {
     await stopThreadRun(threadId);
   } catch {
@@ -325,7 +306,7 @@ export async function stopActiveThreadBeforeClarificationReply(
   await new Promise((resolve) => setTimeout(resolve, 120));
 }
 
-function getStreamErrorMessage(error: unknown): string {
+function getStreamErrorMessage(error: unknown): string {
   if (typeof error === "string" && error.trim()) {
     return error;
   }
@@ -345,21 +326,21 @@ function getStreamErrorMessage(error: unknown): string {
       return nestedError;
     }
   }
-  return "Request failed.";
-}
-
-/**
- * React production error #185 is the minified form of "Maximum update depth
- * exceeded".  It is a client render-loop guard, not a backend/model failure,
- * so it must never be surfaced as the answer's stream error.
- */
-function isReactMaximumUpdateDepthError(message: string): boolean {
-  return (
-    /maximum update depth exceeded/i.test(message) ||
-    /minified react error\s*#185\b/i.test(message) ||
-    /react\.dev\/errors\/185\b/i.test(message)
-  );
-}
+  return "Request failed.";
+}
+
+/**
+ * React production error #185 is the minified form of "Maximum update depth
+ * exceeded".  It is a client render-loop guard, not a backend/model failure,
+ * so it must never be surfaced as the answer's stream error.
+ */
+function isReactMaximumUpdateDepthError(message: string): boolean {
+  return (
+    /maximum update depth exceeded/i.test(message) ||
+    /minified react error\s*#185\b/i.test(message) ||
+    /react\.dev\/errors\/185\b/i.test(message)
+  );
+}
 
 const TERMINAL_RUN_STATUSES = new Set([
   "success",
@@ -368,12 +349,9 @@ const TERMINAL_RUN_STATUSES = new Set([
   "interrupted",
 ]);
 
-// A completed server run normally sends a terminal SSE event.  In local
-// development, however, a Vite hot update, a proxy disconnect, or a brief
-// network interruption can make the browser miss that final event while the
-// backend continues (and successfully completes) the run.  Do not probe on
-// every render: only treat the stream as suspicious after it has been quiet
-// for a while, then reconcile it from the authoritative run/state endpoints.
+// Only probe /runs after an *exception* path has already set streamHoldOpen
+// (dropped SSE, 409, React #185). Normal Q&A must not GET /runs on finish or
+// every 5s — that made every send wait for a status round-trip.
 const STREAM_RECONCILIATION_IDLE_MS = 12_000;
 const STREAM_RECONCILIATION_POLL_MS = 5_000;
 // A run can legitimately be quiet while a long tool call / slow model write is
@@ -616,14 +594,9 @@ export function useThreadStream({
       "terminal" | "rejoined" | "unknown"
     >
   >(async () => "unknown");
-  // Keep the send button in "stop" until we confirm the backend run is
-  // terminal. A premature SSE close must not look like the turn ended.
-  const [streamHoldOpen, setStreamHoldOpen] = useState(
-    () =>
-      Boolean(
-        threadId && typeof window !== "undefined" && readActiveRunId(threadId),
-      ),
-  );
+  // Held only on exception recovery (dropped SSE / 409). Normal turns rely
+  // on SDK `isLoading` so the send button unlocks as soon as SSE closes.
+  const [streamHoldOpen, setStreamHoldOpen] = useState(false);
   const sendInFlightRef = useRef(false);
   const sendEpochRef = useRef(0);
   // Filled after useStream; onFinish/onError may read it asynchronously.
@@ -695,17 +668,17 @@ export function useThreadStream({
     runMetadataStorageRef.current = getRunMetadataStorage();
   }
 
-  const thread = useStream<AgentThreadState>({
-    client: getAPIClient(isMock),
-    assistantId: assistantId ?? "lead_agent",
-    threadId: onStreamThreadId,
-    // The SDK's current implementation falls back to synchronous external-
-    // store notifications when this option is omitted. A network chunk can
-    // contain dozens of token events, causing nested React renders and the
-    // intermittent production-only React #185 error. Coalesce notifications
-    // to one visual update per frame; stream data itself is not dropped.
-    throttle: 16,
-    reconnectOnMount: runMetadataStorageRef.current
+  const thread = useStream<AgentThreadState>({
+    client: getAPIClient(isMock),
+    assistantId: assistantId ?? "lead_agent",
+    threadId: onStreamThreadId,
+    // The SDK's current implementation falls back to synchronous external-
+    // store notifications when this option is omitted. A network chunk can
+    // contain dozens of token events, causing nested React renders and the
+    // intermittent production-only React #185 error. Coalesce notifications
+    // to one visual update per frame; stream data itself is not dropped.
+    throttle: 16,
+    reconnectOnMount: runMetadataStorageRef.current
       ? () => runMetadataStorageRef.current!
       : false,
     fetchStateHistory: { limit: 1 },
@@ -715,7 +688,6 @@ export function useThreadStream({
       if (meta.run_id) {
         activeRunIdRef.current = meta.run_id;
         persistActiveRunId(meta.thread_id, meta.run_id);
-        setStreamHoldOpen(true);
       }
       const metadataAgentId = context.agent_id ?? context.agent_name;
       const extraMetadata =
@@ -870,21 +842,21 @@ export function useThreadStream({
         toast(e.message);
       }
     },
-    onError(error) {
-      markStreamActivity();
-      const message = getStreamErrorMessage(error);
-      // A synchronous SDK store notification used to let React's update-depth
-      // guard escape into the stream promise. Do not present that internal UI
-      // exception as a model failure. Reconcile/rejoin on the next task so the
-      // backend run can continue and the current answer is preserved.
-      if (isReactMaximumUpdateDepthError(message)) {
-        window.setTimeout(() => {
-          setStreamHoldOpen(true);
-          void confirmOrRejoinRef.current("error");
-        }, 0);
-        return;
-      }
-      // Replacing a stalled local SSE reader aborts the in-flight fetch. That
+    onError(error) {
+      markStreamActivity();
+      const message = getStreamErrorMessage(error);
+      // A synchronous SDK store notification used to let React's update-depth
+      // guard escape into the stream promise. Do not present that internal UI
+      // exception as a model failure. Reconcile/rejoin on the next task so the
+      // backend run can continue and the current answer is preserved.
+      if (isReactMaximumUpdateDepthError(message)) {
+        window.setTimeout(() => {
+          setStreamHoldOpen(true);
+          void confirmOrRejoinRef.current("error");
+        }, 0);
+        return;
+      }
+      // Replacing a stalled local SSE reader aborts the in-flight fetch. That
       // is expected and must not look like a user-facing "network" failure.
       if (isAbortLikeError(error)) {
         return;
@@ -952,34 +924,30 @@ export function useThreadStream({
       }
       toast.error(message);
     },
-    onFinish(state) {
+    onFinish(state, runMeta) {
       lastStreamActivityAtRef.current = Date.now();
-      // Do not trust a clean SSE close as "the run is done". streamResumable
-      // chats keep the backend run alive on disconnect; the SDK still fires
-      // onFinish and would otherwise restore the send button.
-      //
-      // If a newer turn is already streaming (common: 用户协助卡提交后，上一轮
-      // interrupt 的迟到 onFinish 才到), do not freeze/rejoin — that would
-      // steal the live SSE and dump tokens only at the end.
-      if (threadStreamRef.current?.isLoading || sendInFlightRef.current) {
+      // Trust a clean SSE close. Querying /runs here blocked every send for
+      // ~5s to paper over a rare premature disconnect; that case is handled
+      // when the next send hits 409 (or onError for a dropped stream).
+      if (
+        isStaleStreamFinish({
+          finishingRunId: runMeta?.run_id,
+          currentRunId: activeRunIdRef.current,
+        })
+      ) {
         return;
       }
-      setStreamHoldOpen(true);
-      void confirmOrRejoinRef.current("finish").then((result) => {
-        if (result === "rejoined") {
-          return;
-        }
-        if (threadStreamRef.current?.isLoading || sendInFlightRef.current) {
-          return;
-        }
-        setStreamHoldOpen(false);
-        // run 真正终结（非 rejoin）：若深度研究报告流仍 active（tool_finished
-        // 帧丢失/被取消），标记中断，避免进度条永久转圈。
-        const finThreadId = threadIdRef.current ?? onStreamThreadId ?? null;
-        if (finThreadId) finalizeResearchReportStream(finThreadId);
+      const finThreadId = threadIdRef.current ?? onStreamThreadId ?? null;
+      if (finThreadId) {
+        clearActiveRunId(finThreadId);
+        finalizeResearchReportStream(finThreadId);
+      }
+      activeRunIdRef.current = null;
+      setStreamHoldOpen(false);
+      if (state?.values) {
         listeners.current.onFinish?.(state.values);
-        void queryClient.invalidateQueries({ queryKey: ["threads", "search"] });
-      });
+      }
+      void queryClient.invalidateQueries({ queryKey: ["threads", "search"] });
     },
   });
 
@@ -1017,14 +985,6 @@ export function useThreadStream({
       if (streamReconciliationInFlightRef.current && reason === "poll") {
         return "unknown";
       }
-      // Stale finish/error from a prior interrupt must not joinStream over a
-      // turn the user already started (协助卡提交后的实时流会被打断并攒批)。
-      if (
-        (reason === "finish" || reason === "error") &&
-        (sendInFlightRef.current || threadStreamRef.current?.isLoading)
-      ) {
-        return "rejoined";
-      }
       streamReconciliationInFlightRef.current = true;
       const epochAtStart = sendEpochRef.current;
       try {
@@ -1200,11 +1160,10 @@ export function useThreadStream({
       if (dropped && idleFor < 800) {
         return;
       }
-      const stored = activeRunIdRef.current ?? readActiveRunId(activeThreadId);
-      if (!stored && !streamHoldOpen && threadStreamRef.current?.isLoading) {
-        return;
-      }
-      if (!stored && !streamHoldOpen) {
+      // Do not probe just because a run id is stored. Only the exception
+      // path sets streamHoldOpen; polling otherwise made every turn wait
+      // on GET /runs before the user could send again.
+      if (!streamHoldOpen) {
         return;
       }
       await confirmOrRejoin("poll");
@@ -1723,20 +1682,20 @@ export function useThreadStream({
       thread.isLoading,
     ) ?? thread.values;
 
-  const mergedMessages =
+  const mergedMessages =
     Array.isArray(mergedValues?.messages)
       ? (mergedValues.messages as Message[])
-      : thread.messages;
-
-  const visibleThreadError =
-    thread.error &&
-    isReactMaximumUpdateDepthError(getStreamErrorMessage(thread.error))
-      ? undefined
-      : thread.error;
-
-  const mergedThread = {
-    ...thread,
-    error: visibleThreadError,
+      : thread.messages;
+
+  const visibleThreadError =
+    thread.error &&
+    isReactMaximumUpdateDepthError(getStreamErrorMessage(thread.error))
+      ? undefined
+      : thread.error;
+
+  const mergedThread = {
+    ...thread,
+    error: visibleThreadError,
     values: mergedValues,
     messages:
       optimisticMessages.length > 0

frontend-web/src/core/threads/stream-display.test.ts

@@ -5,6 +5,7 @@ import type { Message } from "@langchain/langgraph-sdk";
 import {
   collectHumanMessageIds,
   hasServerEchoedOptimisticHuman,
+  isStaleStreamFinish,
   mergeStreamDisplayValues,
   shouldDiscardTerminalOverlay,
 } from "./stream-display";
@@ -28,6 +29,30 @@ test("live streaming ignores frozen checkpoint messages so tokens can paint", ()
   assert.deepEqual(afterStream?.messages, overrides.messages);
 });
 
+test("late onFinish of a prior run is stale once a newer run is live", () => {
+  assert.equal(
+    isStaleStreamFinish({
+      finishingRunId: "old-run",
+      currentRunId: "new-run",
+    }),
+    true,
+  );
+  assert.equal(
+    isStaleStreamFinish({
+      finishingRunId: "run-1",
+      currentRunId: "run-1",
+    }),
+    false,
+  );
+  assert.equal(
+    isStaleStreamFinish({
+      finishingRunId: "run-1",
+      currentRunId: null,
+    }),
+    false,
+  );
+});
+
 test("a later send discards the previous run's getState overlay", () => {
   assert.equal(
     shouldDiscardTerminalOverlay({

frontend-web/src/core/threads/stream-display.ts

@@ -51,6 +51,25 @@ export function shouldDiscardTerminalOverlay(opts: {
   return false;
 }
 
+/**
+ * True when an SSE onFinish belongs to a *previous* run, after the user
+ * already started a newer turn (协助卡提交是典型场景).
+ *
+ * Do **not** use `sendInFlight` / `isLoading` for this: `submit()` stays
+ * pending until the current stream ends, so those flags are still true on a
+ * normal same-turn finish and would skip unlock for every Q&A.
+ */
+export function isStaleStreamFinish(opts: {
+  finishingRunId?: string | null;
+  currentRunId?: string | null;
+}): boolean {
+  return Boolean(
+    opts.finishingRunId &&
+      opts.currentRunId &&
+      opts.finishingRunId !== opts.currentRunId,
+  );
+}
+
 export function collectHumanMessageIds(
   ...groups: Array<Message[] | undefined>
 ): Set<string> {

frontend-web/src/core/utils/legacy-html-preview.test.ts

@@ -0,0 +1,48 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { downlevelModernColors, prepareGeneratedHtml } from "./legacy-html-preview";
+
+test("rewrites oklch chart fills to comma rgb", () => {
+  const html = `<svg><path fill="oklch(0.7 0.15 40)"/></svg>`;
+  const out = downlevelModernColors(html);
+  assert.match(out, /fill="rgb\(\d+, \d+, \d+\)"/);
+  assert.doesNotMatch(out, /oklch\(/);
+});
+
+test("rewrites space-separated rgb and hsl used by pie slices", () => {
+  const html = `.slice{fill:rgb(255 99 71 / 80%);stroke:hsl(220 90% 56%)}`;
+  const out = downlevelModernColors(html);
+  assert.match(out, /rgba\(255, 99, 71, 0\.8\)/);
+  assert.match(out, /rgb\(\d+, \d+, \d+\)/);
+  assert.doesNotMatch(out, /rgb\(255 99 71/);
+  assert.doesNotMatch(out, /hsl\(220 90%/);
+});
+
+test("rewrites color-mix after nested oklch is converted", () => {
+  const html = `background:color-mix(in srgb, oklch(0.63 0.2 27) 40%, #ffffff);`;
+  const out = downlevelModernColors(html);
+  assert.match(out, /rgb\(\d+, \d+, \d+\)/);
+  assert.doesNotMatch(out, /color-mix\(|oklch\(/);
+});
+
+test("turns Tailwind-style rgb channels on custom props into comma form", () => {
+  const html = `:root{--c: 37 99 235;} .bar{background:rgb(var(--c) / 50%)}`;
+  const out = downlevelModernColors(html);
+  assert.match(out, /--c: 37, 99, 235;/);
+  assert.match(out, /rgba\(var\(--c\), 0\.5\)/);
+});
+
+test("leaves already-legacy rgb() alone", () => {
+  const html = `<rect fill="rgb(16, 185, 129)"/>`;
+  assert.equal(downlevelModernColors(html), html);
+});
+
+test("prepareGeneratedHtml injects the ES5 chart size shim and anchor handler", () => {
+  const html = `<!doctype html><html><body><svg viewBox="0 0 100 80"></svg></body></html>`;
+  const out = prepareGeneratedHtml(html);
+  assert.match(out, /data-df-legacy-charts="1"/);
+  assert.match(out, /getElementsByTagName\("svg"\)/);
+  assert.match(out, /getElementsByTagName\("canvas"\)/);
+  assert.doesNotMatch(out, /\?\.|=>|`/);
+});

frontend-web/src/core/utils/legacy-html-preview.ts

@@ -0,0 +1,491 @@
+/**
+ * Prepare generated HTML so pie/bar/line charts still paint on Chrome 100–109
+ * (the Win7-era baseline this app targets).
+ *
+ * Model-written pages often copy modern design tokens: `oklch()`, `color-mix()`,
+ * and space-separated `rgb(r g b / a)`. Those declarations are ignored on
+ * Chrome 109, so SVG/CSS/canvas fills become transparent and the chart looks
+ * blank even though the markup is there. This rewrite happens in the parent
+ * before the blob iframe loads; the injected shim is ES5.
+ */
+
+import { injectInPageAnchorHandler } from "./markdown";
+
+const MAX_PASSES = 12;
+
+export function prepareGeneratedHtml(html: string): string {
+  return injectInPageAnchorHandler(injectLegacyChartShim(downlevelModernColors(html ?? "")));
+}
+
+export function downlevelModernColors(html: string): string {
+  let current = rewriteSpaceSeparatedCustomProps(html);
+  current = rewriteVarAlphaRgb(current);
+  let previous = "";
+  for (let pass = 0; pass < MAX_PASSES && current !== previous; pass += 1) {
+    previous = current;
+    current = replaceFunctionCalls(current, "oklch", convertOklch);
+    current = replaceFunctionCalls(current, "oklab", convertOklab);
+    current = replaceFunctionCalls(current, "lch", convertLch);
+    current = replaceFunctionCalls(current, "lab", convertLab);
+    current = replaceFunctionCalls(current, "rgba", convertModernRgb);
+    current = replaceFunctionCalls(current, "rgb", convertModernRgb);
+    current = replaceFunctionCalls(current, "hsla", convertModernHsl);
+    current = replaceFunctionCalls(current, "hsl", convertModernHsl);
+    current = replaceFunctionCalls(current, "color-mix", convertColorMix);
+  }
+  return current;
+}
+
+function injectLegacyChartShim(html: string): string {
+  if (html.includes("data-df-legacy-charts")) return html;
+  const script = `<script data-df-legacy-charts="1">(function(){
+  function viewBox(svg){
+    var vb=svg.getAttribute("viewBox")||svg.getAttribute("viewbox");
+    if(!vb)return null;
+    var p=vb.replace(/,/g," ").replace(/^\\s+|\\s+$/g,"").split(/\\s+/);
+    if(p.length<4)return null;
+    var w=parseFloat(p[2]), h=parseFloat(p[3]);
+    if(!(w>0&&h>0))return null;
+    return {w:w,h:h};
+  }
+  function fixSvg(svg){
+    var box=svg.getBoundingClientRect();
+    if(box.height>=8&&box.width>=8)return;
+    var vb=viewBox(svg);
+    if(!vb)return;
+    if(!svg.getAttribute("width"))svg.setAttribute("width",String(vb.w));
+    if(!svg.getAttribute("height"))svg.setAttribute("height",String(vb.h));
+    svg.style.maxWidth="100%";
+    svg.style.height="auto";
+    svg.style.display="block";
+  }
+  function fixCanvas(c){
+    var box=c.getBoundingClientRect();
+    var parent=c.parentElement;
+    var pw=parent?parent.clientWidth:0;
+    var ph=parent?parent.clientHeight:0;
+    if(c.width<8||box.width<8){
+      c.width=Math.max(pw,320);
+      c.style.width="100%";
+    }
+    if(c.height<8||box.height<8){
+      c.height=Math.max(ph,220);
+      c.style.height=c.height+"px";
+    }
+  }
+  function run(){
+    var svgs=document.getElementsByTagName("svg");
+    for(var i=0;i<svgs.length;i++)fixSvg(svgs[i]);
+    var canvases=document.getElementsByTagName("canvas");
+    for(var j=0;j<canvases.length;j++)fixCanvas(canvases[j]);
+  }
+  if(document.readyState==="complete"||document.readyState==="interactive"){
+    setTimeout(run,0);
+    setTimeout(run,400);
+  }else if(document.addEventListener){
+    document.addEventListener("DOMContentLoaded",function(){
+      run();
+      setTimeout(run,400);
+    });
+  }
+  if(window.addEventListener)window.addEventListener("load",function(){setTimeout(run,50);});
+})();</script>`;
+  if (/<\/body>/i.test(html)) {
+    return html.replace(/<\/body>/i, `${script}</body>`);
+  }
+  return html + script;
+}
+
+function rewriteSpaceSeparatedCustomProps(html: string): string {
+  return html.replace(
+    /(--[\w-]+)\s*:\s*(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s*;/g,
+    "$1: $2, $3, $4;",
+  );
+}
+
+function rewriteVarAlphaRgb(html: string): string {
+  return html.replace(
+    /\brgba?\(\s*var\((--[\w-]+)\)\s*\/\s*([^)]+?)\)/gi,
+    (_, name: string, alpha: string) => `rgba(var(${name}), ${normalizeAlpha(alpha.trim())})`,
+  );
+}
+
+function replaceFunctionCalls(
+  source: string,
+  name: string,
+  replace: (args: string) => string | null,
+): string {
+  const lower = source.toLowerCase();
+  const token = `${name.toLowerCase()}(`;
+  let output = "";
+  let cursor = 0;
+  while (cursor < source.length) {
+    const index = lower.indexOf(token, cursor);
+    if (index < 0) {
+      output += source.slice(cursor);
+      break;
+    }
+    const before = index === 0 ? "" : source[index - 1]!;
+    if (index > 0 && /[A-Za-z0-9_-]/.test(before)) {
+      output += source.slice(cursor, index + 1);
+      cursor = index + 1;
+      continue;
+    }
+    const open = index + name.length;
+    const close = matchClosingParen(source, open);
+    if (close < 0) {
+      output += source.slice(cursor);
+      break;
+    }
+    const args = source.slice(open + 1, close);
+    const next = replace(args);
+    output += source.slice(cursor, index) + (next ?? source.slice(index, close + 1));
+    cursor = close + 1;
+  }
+  return output;
+}
+
+function matchClosingParen(source: string, openIndex: number): number {
+  let depth = 0;
+  let quote: string | null = null;
+  for (let i = openIndex; i < source.length; i += 1) {
+    const char = source[i]!;
+    if (quote) {
+      if (char === "\\") {
+        i += 1;
+        continue;
+      }
+      if (char === quote) quote = null;
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      quote = char;
+      continue;
+    }
+    if (char === "(") depth += 1;
+    else if (char === ")") {
+      depth -= 1;
+      if (depth === 0) return i;
+    }
+  }
+  return -1;
+}
+
+function convertOklch(args: string): string | null {
+  if (/\bfrom\b/i.test(args)) return null;
+  const { values, alpha } = splitSlashAlpha(args);
+  if (values.length < 3) return null;
+  const L = parseLightness(values[0]!);
+  const C = parseNumber(values[1]!);
+  const H = parseHue(values[2]!);
+  if (L == null || C == null || H == null) return null;
+  const [a, b] = polarToLab(C, H);
+  return formatRgba(oklabToSrgb(L, a, b), alpha);
+}
+
+function convertOklab(args: string): string | null {
+  if (/\bfrom\b/i.test(args)) return null;
+  const { values, alpha } = splitSlashAlpha(args);
+  if (values.length < 3) return null;
+  const L = parseLightness(values[0]!);
+  const a = parseNumber(values[1]!);
+  const b = parseNumber(values[2]!);
+  if (L == null || a == null || b == null) return null;
+  return formatRgba(oklabToSrgb(L, a, b), alpha);
+}
+
+function convertLch(args: string): string | null {
+  if (/\bfrom\b/i.test(args)) return null;
+  const { values, alpha } = splitSlashAlpha(args);
+  if (values.length < 3) return null;
+  const L = parsePercentOrNumber(values[0]!, 100);
+  const C = parseNumber(values[1]!);
+  const H = parseHue(values[2]!);
+  if (L == null || C == null || H == null) return null;
+  const [a, b] = polarToLab(C, H);
+  return formatRgba(labToSrgb(L, a, b), alpha);
+}
+
+function convertLab(args: string): string | null {
+  if (/\bfrom\b/i.test(args)) return null;
+  const { values, alpha } = splitSlashAlpha(args);
+  if (values.length < 3) return null;
+  const L = parsePercentOrNumber(values[0]!, 100);
+  const a = parseNumber(values[1]!);
+  const b = parseNumber(values[2]!);
+  if (L == null || a == null || b == null) return null;
+  return formatRgba(labToSrgb(L, a, b), alpha);
+}
+
+function convertColorMix(args: string): string | null {
+  const parts = splitTopLevel(args, ",");
+  if (parts.length < 2) return null;
+  const colorParts = parts.slice(1);
+  const left = parseMixStop(colorParts[0] ?? "");
+  const right = parseMixStop(colorParts[1] ?? "transparent");
+  if (!left.color && !right.color) return null;
+  const leftPct = left.percent ?? (right.percent == null ? 50 : 100 - right.percent);
+  const rightPct = right.percent ?? 100 - leftPct;
+  const sum = leftPct + rightPct || 1;
+  const leftRgb = resolveMixColor(left.color) ?? [0, 0, 0, 0];
+  const rightRgb = resolveMixColor(right.color) ?? [0, 0, 0, 0];
+  const t = rightPct / sum;
+  return formatRgba(
+    [
+      leftRgb[0] + (rightRgb[0] - leftRgb[0]) * t,
+      leftRgb[1] + (rightRgb[1] - leftRgb[1]) * t,
+      leftRgb[2] + (rightRgb[2] - leftRgb[2]) * t,
+    ],
+    leftRgb[3] + (rightRgb[3] - leftRgb[3]) * t,
+  );
+}
+
+function convertModernRgb(args: string): string | null {
+  if (args.includes("var(") || /\bfrom\b/i.test(args)) return null;
+  if (args.includes(",") && !args.includes("/")) return null;
+  const { values, alpha } = splitSlashAlpha(args);
+  if (values.length < 3) return null;
+  const r = parseRgbChannel(values[0]!);
+  const g = parseRgbChannel(values[1]!);
+  const b = parseRgbChannel(values[2]!);
+  if (r == null || g == null || b == null) return null;
+  return formatRgba([r, g, b], alpha);
+}
+
+function convertModernHsl(args: string): string | null {
+  if (args.includes("var(") || /\bfrom\b/i.test(args)) return null;
+  if (args.includes(",") && !args.includes("/")) return null;
+  const { values, alpha } = splitSlashAlpha(args);
+  if (values.length < 3) return null;
+  const h = parseHue(values[0]!);
+  const s = parsePercentOrNumber(values[1]!, 1);
+  const l = parsePercentOrNumber(values[2]!, 1);
+  if (h == null || s == null || l == null) return null;
+  return formatRgba(hslToSrgb(h, s, l), alpha);
+}
+
+function parseMixStop(raw: string): { color: string; percent: number | null } {
+  const trimmed = raw.trim();
+  const match = trimmed.match(/^(.*?)(?:\s+(-?[\d.]+%))?\s*$/);
+  const color = (match?.[1] ?? trimmed).trim();
+  const percent = match?.[2] ? Number.parseFloat(match[2]) : null;
+  return { color, percent: Number.isFinite(percent) ? percent : null };
+}
+
+function resolveMixColor(value: string): [number, number, number, number] | null {
+  const text = value.trim();
+  if (!text || /^var\(/i.test(text)) return null;
+  if (/^transparent$/i.test(text)) return [0, 0, 0, 0];
+  const hex = parseHex(text);
+  if (hex) return hex;
+  const rgbMatch = text.match(/^rgba?\((.+)\)$/i);
+  if (rgbMatch) {
+    const converted = convertModernRgb(rgbMatch[1]!) ?? (/,\s*/.test(rgbMatch[1]!) ? `rgba(${rgbMatch[1]})` : null);
+    if (converted) {
+      const inner = converted.match(/^rgba?\((.+)\)$/i);
+      if (inner) {
+        const bits = inner[1]!.split(",").map((part) => Number.parseFloat(part.trim()));
+        if (bits.length >= 3 && bits.every((n) => Number.isFinite(n))) {
+          return [bits[0]!, bits[1]!, bits[2]!, bits[3] ?? 1];
+        }
+      }
+    }
+  }
+  return NAMED[text.toLowerCase()] ?? null;
+}
+
+function splitSlashAlpha(args: string): { values: string[]; alpha: number } {
+  const pieces = splitTopLevel(args, "/");
+  const values = tokenizeCssList(pieces[0] ?? "");
+  const alpha = pieces.length > 1 ? normalizeAlpha(pieces[1]!.trim()) : 1;
+  return { values, alpha };
+}
+
+function splitTopLevel(source: string, separator: string): string[] {
+  const parts: string[] = [];
+  let current = "";
+  let depth = 0;
+  let quote: string | null = null;
+  for (let i = 0; i < source.length; i += 1) {
+    const char = source[i]!;
+    if (quote) {
+      current += char;
+      if (char === "\\" && i + 1 < source.length) {
+        current += source[i + 1];
+        i += 1;
+      } else if (char === quote) {
+        quote = null;
+      }
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      quote = char;
+      current += char;
+      continue;
+    }
+    if (char === "(") depth += 1;
+    if (char === ")") depth -= 1;
+    if (depth === 0 && char === separator) {
+      parts.push(current);
+      current = "";
+      continue;
+    }
+    current += char;
+  }
+  if (current.trim()) parts.push(current);
+  return parts;
+}
+
+function tokenizeCssList(source: string): string[] {
+  return source
+    .trim()
+    .split(/[\s,]+/)
+    .map((part) => part.trim())
+    .filter(Boolean);
+}
+
+function parseLightness(raw: string): number | null {
+  const value = parseNumber(raw);
+  if (value == null) return null;
+  if (/%$/.test(raw.trim()) || value > 1) return clamp(value / 100, 0, 1);
+  return clamp(value, 0, 1);
+}
+
+function parsePercentOrNumber(raw: string, percentBase: number): number | null {
+  const value = parseNumber(raw);
+  if (value == null) return null;
+  if (/%$/.test(raw.trim())) return value / 100 * (percentBase === 100 ? 100 : 1);
+  if (percentBase === 100 && value <= 1) return value * 100;
+  return value;
+}
+
+function parseRgbChannel(raw: string): number | null {
+  const value = parseNumber(raw);
+  if (value == null) return null;
+  if (/%$/.test(raw.trim())) return clamp(value * 2.55, 0, 255);
+  if (value >= 0 && value <= 1 && /0?\.\d+/.test(raw.trim())) return clamp(value * 255, 0, 255);
+  return clamp(value, 0, 255);
+}
+
+function parseHue(raw: string): number | null {
+  const text = raw.trim().toLowerCase();
+  const value = parseNumber(text);
+  if (value == null) return null;
+  if (text.endsWith("rad")) return (value * 180) / Math.PI;
+  if (text.endsWith("turn")) return value * 360;
+  return value;
+}
+
+function parseNumber(raw: string): number | null {
+  const value = Number.parseFloat(raw.trim().replace(/deg|rad|turn|%/gi, ""));
+  return Number.isFinite(value) ? value : null;
+}
+
+function normalizeAlpha(raw: string): number {
+  const value = parseNumber(raw);
+  if (value == null) return 1;
+  if (/%$/.test(raw.trim()) || value > 1) return clamp(value / 100, 0, 1);
+  return clamp(value, 0, 1);
+}
+
+function parseHex(value: string): [number, number, number, number] | null {
+  const hex = value.trim();
+  const short = /^#([\da-f]{3})$/i.exec(hex);
+  if (short) {
+    const [r, g, b] = short[1]!.split("").map((ch) => Number.parseInt(ch + ch, 16));
+    return [r!, g!, b!, 1];
+  }
+  const long = /^#([\da-f]{6})([\da-f]{2})?$/i.exec(hex);
+  if (!long) return null;
+  const n = Number.parseInt(long[1]!, 16);
+  const alpha = long[2] ? Number.parseInt(long[2], 16) / 255 : 1;
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255, alpha];
+}
+
+function polarToLab(c: number, hueDeg: number): [number, number] {
+  const hue = (hueDeg * Math.PI) / 180;
+  return [c * Math.cos(hue), c * Math.sin(hue)];
+}
+
+function oklabToSrgb(L: number, a: number, b: number): [number, number, number] {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+  return linearToSrgb([
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
+  ]);
+}
+
+function labToSrgb(L: number, a: number, b: number): [number, number, number] {
+  const y = (L + 16) / 116;
+  const x = a / 500 + y;
+  const z = y - b / 200;
+  const xn = 0.95047;
+  const yn = 1;
+  const zn = 1.08883;
+  const [X, Y, Z] = [xn * labFn(x), yn * labFn(y), zn * labFn(z)];
+  return linearToSrgb([
+    3.2404542 * X - 1.5371385 * Y - 0.4985314 * Z,
+    -0.969266 * X + 1.8760108 * Y + 0.041556 * Z,
+    0.0556434 * X - 0.2040259 * Y + 1.0572252 * Z,
+  ]);
+}
+
+function labFn(t: number): number {
+  const d = 6 / 29;
+  return t > d ? t * t * t : 3 * d * d * (t - 4 / 29);
+}
+
+function hslToSrgb(h: number, s: number, l: number): [number, number, number] {
+  const sat = clamp(s, 0, 1);
+  const light = clamp(l, 0, 1);
+  const c = (1 - Math.abs(2 * light - 1)) * sat;
+  const hp = (((h % 360) + 360) % 360) / 60;
+  const x = c * (1 - Math.abs((hp % 2) - 1));
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (hp >= 0 && hp < 1) [r, g, b] = [c, x, 0];
+  else if (hp < 2) [r, g, b] = [x, c, 0];
+  else if (hp < 3) [r, g, b] = [0, c, x];
+  else if (hp < 4) [r, g, b] = [0, x, c];
+  else if (hp < 5) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+  const m = light - c / 2;
+  return [(r + m) * 255, (g + m) * 255, (b + m) * 255];
+}
+
+function linearToSrgb(channels: [number, number, number]): [number, number, number] {
+  return channels.map((channel) => {
+    const c = clamp(channel, 0, 1);
+    const gamma = c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
+    return gamma * 255;
+  }) as [number, number, number];
+}
+
+function formatRgba(rgb: [number, number, number], alpha: number): string {
+  const r = Math.round(clamp(rgb[0], 0, 255));
+  const g = Math.round(clamp(rgb[1], 0, 255));
+  const b = Math.round(clamp(rgb[2], 0, 255));
+  const a = clamp(alpha, 0, 1);
+  if (a >= 0.999) return `rgb(${r}, ${g}, ${b})`;
+  return `rgba(${r}, ${g}, ${b}, ${Number(a.toFixed(3))})`;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+const NAMED: Record<string, [number, number, number, number]> = {
+  black: [0, 0, 0, 1],
+  white: [255, 255, 255, 1],
+  red: [255, 0, 0, 1],
+  green: [0, 128, 0, 1],
+  blue: [0, 0, 255, 1],
+  transparent: [0, 0, 0, 0],
+};

frontend-web/src/core/utils/mermaid-sanitize.test.ts

@@ -0,0 +1,71 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { sanitizeMermaidSource } from "./mermaid";
+
+test("inserts a missing arrow before a bare edge label", () => {
+  const input = "E --> G|价值输出 V_s| H[PPO 损失]";
+  assert.equal(
+    sanitizeMermaidSource(input),
+    "E --> G -->|价值输出 V_s| H[PPO 损失]",
+  );
+});
+
+test("leaves already-valid labeled edges unchanged", () => {
+  const input = "E -->|价值输出 V_s| H[PPO 损失]\nG -->|状态| I";
+  assert.equal(sanitizeMermaidSource(input), input);
+});
+
+test("fixes a label attached to a shaped node", () => {
+  const input = "E[Actor 网络]|价值输出 V_s| H[PPO 损失]";
+  assert.equal(
+    sanitizeMermaidSource(input),
+    "E[Actor 网络] -->|价值输出 V_s| H[PPO 损失]",
+  );
+});
+
+test("fixes several bare labels on one line", () => {
+  const input = "A|x| B|y| C";
+  assert.equal(sanitizeMermaidSource(input), "A -->|x| B -->|y| C");
+});
+
+test("inserts a space after class when the model starts the id list with a comma", () => {
+  const input = "    class,E,F,G,H,I,J,K loss;";
+  assert.equal(
+    sanitizeMermaidSource(input),
+    "    class E,F,G,H,I,J,K loss;",
+  );
+});
+
+test("splits zip-assigned class names onto one statement per class", () => {
+  const input = "    class A,B,C,D input,module,module,module;";
+  assert.equal(
+    sanitizeMermaidSource(input),
+    "    class A input;\n    class B,C,D module;",
+  );
+});
+
+test("leaves a valid class assignment and classDef alone", () => {
+  const input = [
+    "    classDef input fill:#e3f2fd,stroke:#1565c0;",
+    "    class A,B input;",
+  ].join("\n");
+  assert.equal(sanitizeMermaidSource(input), input);
+});
+
+test("repairs the DAC-PPO architecture diagram class block", () => {
+  const input = `graph TD
+    A[智能体观测 o_t] --> B[个体 Encoder]
+    E --> G -->|价值输出 V_s| H[PPO 损失]
+    classDef input fill:#e3f2fd,stroke:#1565c0;
+    classDef module fill:#fff3e0,stroke:#e65100;
+    classDef loss fill:#e8f5e9,stroke:#2e7d32;
+    class A,B,C,D input,module,module,module;
+    class,E,F,G,H,I,J,K loss;`;
+  const output = sanitizeMermaidSource(input);
+  assert.match(output, /class A input;/);
+  assert.match(output, /class B,C,D module;/);
+  assert.match(output, /class E,F,G,H,I,J,K loss;/);
+  assert.doesNotMatch(output, /class,/);
+  assert.doesNotMatch(output, /input,module/);
+});

frontend-web/src/core/utils/mermaid.ts

@@ -2,6 +2,100 @@ import { getFileName } from "./files";
 
 let mermaidInitialized = false;
 
+/**
+ * Keep sandbox diagrams on the SVG-only Mermaid rendering path.
+ *
+ * Mermaid's default HTML labels are implemented with SVG `foreignObject`.
+ * Although that looks a little richer in current browsers, many Windows 7
+ * Chromium shells either do not support it or calculate its dimensions
+ * incorrectly, leaving nodes blank or overlapping. Native SVG text works in
+ * the Chrome 100 baseline used by this application and in older Win7 browser
+ * shells as well.
+ *
+ * `htmlLabels` is marked secure so a diagram's front matter/directive cannot
+ * switch this preview back to `foreignObject` rendering.
+ */
+export const SANDBOX_MERMAID_CONFIG = {
+  startOnLoad: false,
+  securityLevel: "strict" as const,
+  htmlLabels: false,
+  fontFamily: '"Microsoft YaHei", "Microsoft YaHei UI", SimSun, Arial, sans-serif',
+  flowchart: {
+    // A simple path is more reliable than the spline renderer in older
+    // Chromium SVG implementations and is easier to read at small sizes.
+    curve: "linear" as const,
+    useMaxWidth: false,
+  },
+  secure: [
+    "secure",
+    "securityLevel",
+    "startOnLoad",
+    "maxTextSize",
+    "suppressErrorRendering",
+    "maxEdges",
+    "htmlLabels",
+  ],
+};
+
+/**
+ * Models often emit almost-Mermaid that the parser rejects:
+ * - `A --> B|label| C` instead of `A --> B -->|label| C`
+ * - `class,E,F loss;` (comma after `class`) instead of `class E,F loss;`
+ * - `class A,B input,module;` (one class name per node) instead of
+ *   separate `class` statements
+ *
+ * Already-valid `-->|label|` links and single-class assignments are kept.
+ */
+export function sanitizeMermaidSource(source: string): string {
+  return sanitizeMermaidClassStatements(
+    source
+      .replace(
+        /(^|[\s;])([A-Za-z][\w-]*|[\u4e00-\u9fff]+)\|([^|\n]+)\|/gm,
+        "$1$2 -->|$3|",
+      )
+      .replace(/(\])\|([^|\n]+)\|/g, "$1 -->|$2|"),
+  );
+}
+
+const CLASS_NODE_LIST = /[A-Za-z][\w-]*(?:\s*,\s*[A-Za-z][\w-]*)*/;
+const CLASS_NAME_LIST = /[A-Za-z][\w-]*(?:\s*,\s*[A-Za-z][\w-]*)*/;
+
+function sanitizeMermaidClassStatements(source: string): string {
+  return source.replace(
+    /^([ \t]*)class(?!Def\b)[ \t]*,?[ \t]*(\S[^\n]*)$/gm,
+    (full, indent: string, rest: string) => {
+      const trimmed = rest.replace(/;+\s*$/, "").trim();
+      const matched = trimmed.match(
+        new RegExp(`^(${CLASS_NODE_LIST.source})\\s+(${CLASS_NAME_LIST.source})$`),
+      );
+      if (!matched) {
+        return full;
+      }
+      const nodeIds = matched[1].split(/\s*,\s*/).filter(Boolean);
+      const classNames = matched[2].split(/\s*,\s*/).filter(Boolean);
+      if (nodeIds.length === 0 || classNames.length === 0) {
+        return full;
+      }
+      if (classNames.length === 1) {
+        return `${indent}class ${nodeIds.join(",")} ${classNames[0]};`;
+      }
+      const groups: Array<{ name: string; ids: string[] }> = [];
+      for (let index = 0; index < nodeIds.length; index += 1) {
+        const name = classNames[index] ?? classNames[classNames.length - 1];
+        const last = groups[groups.length - 1];
+        if (last && last.name === name) {
+          last.ids.push(nodeIds[index]);
+        } else {
+          groups.push({ name, ids: [nodeIds[index]] });
+        }
+      }
+      return groups
+        .map((group) => `${indent}class ${group.ids.join(",")} ${group.name};`)
+        .join("\n");
+    },
+  );
+}
+
 export function isMermaidFile(filepath: string): boolean {
   return /\.mmd$/i.test(filepath);
 }
@@ -14,17 +108,14 @@ async function getMermaidModule() {
   const mod = await import("mermaid");
   const mermaid = mod.default;
   if (!mermaidInitialized) {
-    mermaid.initialize({
-      startOnLoad: false,
-      securityLevel: "strict",
-    });
+    mermaid.initialize(SANDBOX_MERMAID_CONFIG);
     mermaidInitialized = true;
   }
   return mermaid;
 }
 
 export async function renderMermaidToSvg(source: string): Promise<string> {
-  const text = source.trim();
+  const text = sanitizeMermaidSource(source).trim();
   if (!text) {
     throw new Error("Mermaid 内容为空，无法生成图片");
   }