优化渲染节点功能，使用 ref 文件渲染大量节点

src/components/chat/ChatToolCallBlock.tsx

@@ -268,12 +268,7 @@ function getToolDescription(toolCall: ToolCall): string {
       return (params.title as string | undefined) ?? "数据图表";
     }
     case "render_junctions": {
-      const nodeAreaMap =
-        params.node_area_map && typeof params.node_area_map === "object"
-          ? (params.node_area_map as Record<string, unknown>)
-          : {};
-      const areaIds = Array.isArray(params.area_ids) ? params.area_ids : [];
-      return `${Object.keys(nodeAreaMap).length} 个节点 · ${areaIds.length || new Set(Object.values(nodeAreaMap).map(String)).size} 个分区`;
+      return (params.render_ref as string | undefined) ?? "渲染引用";
     }
     default:
       return "";
@@ -398,28 +393,14 @@ function buildAction(toolCall: ToolCall): ChatToolAction | null {
         yAxisName: params.y_axis_name as string | undefined,
       };
     case "render_junctions": {
-      const nodeAreaMap =
-        params.node_area_map && typeof params.node_area_map === "object"
-          ? Object.fromEntries(
-              Object.entries(params.node_area_map as Record<string, unknown>)
-                .map(([key, value]) => [String(key), String(value ?? "")])
-                .filter(([, value]) => value.trim().length > 0),
-            )
-          : {};
+      const renderRef =
+        typeof params.render_ref === "string" ? params.render_ref.trim() : "";
+      if (!renderRef) {
+        return null;
+      }
       return {
         type: "render_junctions",
-        nodeAreaMap,
-        areaIds: Array.isArray(params.area_ids)
-          ? params.area_ids.map((item) => String(item).trim()).filter(Boolean)
-          : [],
-        areaColors:
-          params.area_colors && typeof params.area_colors === "object"
-            ? Object.fromEntries(
-                Object.entries(params.area_colors as Record<string, unknown>)
-                  .map(([key, value]) => [String(key), String(value ?? "")])
-                  .filter(([, value]) => value.trim().length > 0),
-              )
-            : {},
+        renderRef,
       };
     }
     default:

src/components/chat/GlobalChatbox.tsx

@@ -1,7 +1,13 @@
 "use client";
 
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Box, Drawer, alpha, useTheme } from "@mui/material";
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { Box, Drawer, alpha, useMediaQuery, useTheme } from "@mui/material";
 
 import type { AgentModel } from "@/lib/chatStream";
 import { AgentComposer } from "./AgentComposer";
@@ -27,6 +33,7 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
   const bottomRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
   const theme = useTheme();
+  const isDesktop = useMediaQuery(theme.breakpoints.up("sm"));
 
   const {
     speechState,
@@ -158,6 +165,32 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
     };
   }, [isResizing]);
 
+  useLayoutEffect(() => {
+    const body = document.body;
+    const html = document.documentElement;
+    const previousBodyPaddingRight = body.style.paddingRight;
+    const previousBodyTransition = body.style.transition;
+    const previousBodyBoxSizing = body.style.boxSizing;
+    const previousHtmlBoxSizing = html.style.boxSizing;
+    const reservedWidth = open && isDesktop ? `${width}px` : "0px";
+
+    body.style.boxSizing = "border-box";
+    html.style.boxSizing = "border-box";
+    body.style.paddingRight = reservedWidth;
+    body.style.transition = isResizing
+      ? previousBodyTransition
+      : [previousBodyTransition, "padding-right 240ms cubic-bezier(0.2, 0.8, 0.2, 1)"]
+          .filter(Boolean)
+          .join(", ");
+
+    return () => {
+      body.style.paddingRight = previousBodyPaddingRight;
+      body.style.transition = previousBodyTransition;
+      body.style.boxSizing = previousBodyBoxSizing;
+      html.style.boxSizing = previousHtmlBoxSizing;
+    };
+  }, [isDesktop, isResizing, open, width]);
+
   return (
     <Drawer
       anchor="right"

src/components/chat/hooks/useAgentToolActions.ts

@@ -136,26 +136,6 @@ const resolveTimeRange = (params: Record<string, unknown>) => ({
     (params.end as string | undefined),
 });
 
-const resolveStringRecord = (value: unknown): Record<string, string> => {
-  if (!value || typeof value !== "object" || Array.isArray(value)) {
-    return {};
-  }
-
-  return Object.fromEntries(
-    Object.entries(value as Record<string, unknown>)
-      .map(([key, recordValue]) => [String(key), String(recordValue ?? "")])
-      .filter(([, recordValue]) => recordValue.trim().length > 0),
-  );
-};
-
-const resolveStringArray = (value: unknown): string[] => {
-  if (!Array.isArray(value)) {
-    return [];
-  }
-
-  return value.map((item) => String(item).trim()).filter(Boolean);
-};
-
 const compactNames = (names: string[]) => {
   if (!names.length) return "";
   return names.length > 3
@@ -251,20 +231,20 @@ const buildToolAction = (
   }
 
   if (tool === "render_junctions") {
-    const nodeAreaMap = resolveStringRecord(params.node_area_map);
-    const areaIds = resolveStringArray(params.area_ids);
-    const areaColors = resolveStringRecord(params.area_colors);
+    const renderRef =
+      typeof params.render_ref === "string" ? params.render_ref.trim() : "";
 
     return {
-      action: {
-        type: "render_junctions",
-        nodeAreaMap,
-        areaIds,
-        areaColors,
-      },
+      action: renderRef
+        ? {
+            type: "render_junctions",
+            renderRef,
+            sessionId: undefined,
+          }
+        : null,
       kind: "map",
       title: "渲染节点分区",
-      description: `${Object.keys(nodeAreaMap).length} 个节点`,
+      description: renderRef || "渲染引用",
     };
   }
 
@@ -286,6 +266,11 @@ export const useAgentToolActions = () => {
         event.params,
       );
 
+      const normalizedAction =
+        action?.type === "render_junctions"
+          ? { ...action, sessionId: event.sessionId }
+          : action;
+
       options.appendArtifact(options.assistantMessageId, {
         id: `${event.tool}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
         tool: event.tool,
@@ -295,8 +280,8 @@ export const useAgentToolActions = () => {
         params: event.params,
       });
 
-      if (action) {
-        dispatchToolAction(action);
+      if (normalizedAction) {
+        dispatchToolAction(normalizedAction);
       }
     },
     [dispatchToolAction],