feat(frontend): 增强流程图交互与详情面板展示

- 扩展 Goal 接口，添加可选的 reason 字段，用于记录节点创建理由
- 重构消息类型，支持结构化内容（含工具调用）与字符串内容
- 优化流程图节点渲染，支持 END 节点特殊样式与文本截断
- 在连线上显示节点创建理由标签，提升可读性
- 重构详情面板，根据选中节点显示对应消息链，并支持工具调用内容展示
- 移除冗余的刷新按钮与图例项，简化界面
- 修复 agent 工具导入路径，重命名 glob 模块以避免命名冲突

agent/tools/builtin/__init__.py

@@ -10,7 +10,7 @@
 from agent.tools.builtin.read import read_file
 from agent.tools.builtin.edit import edit_file
 from agent.tools.builtin.write import write_file
-from agent.tools.builtin.glob import glob_files
+from agent.tools.builtin.glob_tool import glob_files
 from agent.tools.builtin.grep import grep_content
 from agent.tools.builtin.bash import bash_command
 from agent.tools.builtin.skill import skill, list_skills

frontend/react-template/src/App.tsx

@@ -1,9 +1,11 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { TopBar } from "./components/TopBar/TopBar";
 import { MainContent } from "./components/MainContent/MainContent";
 import { DetailPanel } from "./components/DetailPanel/DetailPanel";
 import type { Goal } from "./types/goal";
 import type { Edge } from "./types/message";
+import { useFlowChartData } from "./components/FlowChart/hooks/useFlowChartData";
+import { useTrace } from "./hooks/useTrace";
 import "./styles/global.css";
 
 function App() {
@@ -14,14 +16,14 @@ function App() {
   const [isDragging, setIsDragging] = useState(false);
   const bodyRef = useRef<HTMLDivElement | null>(null);
 
-  const handleNodeClick = (node: Goal) => {
-    setSelectedNode(node);
-    setSelectedEdge(null);
-  };
+  // 获取数据以传递给 DetailPanel
+  const { trace } = useTrace(selectedTraceId);
+  const initialGoals = useMemo(() => trace?.goal_tree?.goals ?? [], [trace]);
+  const { msgGroups } = useFlowChartData(selectedTraceId, initialGoals);
 
-  const handleEdgeClick = (edge: Edge) => {
-    setSelectedEdge(edge);
-    setSelectedNode(null);
+  const handleNodeClick = (node: Goal, edge?: Edge) => {
+    setSelectedNode(node);
+    setSelectedEdge(edge || null);
   };
 
   const handleCloseDetail = () => {
@@ -29,6 +31,19 @@ function App() {
     setSelectedEdge(null);
   };
 
+  // 根据选中的节点获取对应的消息
+  const selectedMessages = useMemo(() => {
+    if (selectedNode) {
+      return msgGroups[selectedNode.id] || [];
+    }
+    // 如果点击的是边，且该边是主链上的边，通常我们显示源节点的消息（如果需要）
+    // 但根据用户需求 "边里面的信息，显示对应msgGroup里面的所有的子集的描述"
+    // 如果 selectedEdge 存在且 selectedNode 为空（虽然目前逻辑是联动），这里可以做处理
+    // 目前 handleNodeClick 会设置 selectedNode 为 link.source
+    // 所以 selectedNode.id 就是边的源节点 ID，直接取 msgGroups 即可
+    return [];
+  }, [selectedNode, msgGroups]);
+
   useEffect(() => {
     if (!isDragging) return;
     const handleMove = (event: MouseEvent) => {
@@ -61,7 +76,6 @@ function App() {
           <MainContent
             traceId={selectedTraceId}
             onNodeClick={handleNodeClick}
-            onEdgeClick={handleEdgeClick}
           />
         </div>
         {(selectedNode || selectedEdge) && (
@@ -82,6 +96,7 @@ function App() {
               <DetailPanel
                 node={selectedNode}
                 edge={selectedEdge}
+                messages={selectedMessages}
                 onClose={handleCloseDetail}
               />
             </div>

frontend/react-template/src/components/DetailPanel/DetailPanel.module.css

@@ -33,6 +33,25 @@
   flex: 1;
 }
 
+.sectionTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sectionTitle::before {
+  content: "";
+  display: block;
+  width: 4px;
+  height: 16px;
+  background: #2d72d2;
+  border-radius: 2px;
+}
+
 .section {
   margin-bottom: 16px;
 }
@@ -48,3 +67,76 @@
   color: #333;
   word-break: break-all;
 }
+
+.toolCalls {
+  margin-top: 4px;
+}
+
+.toolCall {
+  background: #f5f5f5;
+  border-radius: 4px;
+  padding: 8px;
+  margin-bottom: 8px;
+}
+
+.toolCall:last-child {
+  margin-bottom: 0;
+}
+
+.toolName {
+  font-size: 12px;
+  font-weight: 600;
+  color: #555;
+  margin-bottom: 4px;
+}
+
+.toolArgs {
+  font-family: monospace;
+  font-size: 11px;
+  color: #666;
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+  background: rgba(0, 0, 0, 0.03);
+  padding: 4px;
+  border-radius: 2px;
+}
+
+.messages {
+  margin-top: 24px;
+  border-top: 1px solid #eee;
+  padding-top: 16px;
+}
+
+.messageList {
+  max-height: 400px;
+  overflow-y: auto;
+  padding-right: 4px; /* Space for scrollbar */
+}
+
+/* Custom scrollbar for message list */
+.messageList::-webkit-scrollbar {
+  width: 4px;
+}
+
+.messageList::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 2px;
+}
+
+.messageList::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.messageItem {
+  background: #fff;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 12px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.messageItem:last-child {
+  margin-bottom: 0;
+}

frontend/react-template/src/components/DetailPanel/DetailPanel.tsx

@@ -1,15 +1,44 @@
 import type { Goal } from "../../types/goal";
-import type { Edge } from "../../types/message";
+import type { Edge, Message } from "../../types/message";
 import styles from "./DetailPanel.module.css";
 
 interface DetailPanelProps {
   node: Goal | null;
   edge: Edge | null;
+  messages?: Message[];
   onClose: () => void;
 }
 
-export const DetailPanel = ({ node, edge, onClose }: DetailPanelProps) => {
+export const DetailPanel = ({ node, edge, messages = [], onClose }: DetailPanelProps) => {
   const title = node ? "节点详情" : edge ? "连线详情" : "详情";
+
+  const renderMessageContent = (content: Message["content"]) => {
+    if (!content) return "";
+    if (typeof content === "string") return content;
+
+    // 如果有 text，优先显示 text
+    if (content.text) return content.text;
+
+    // 如果有 tool_calls，展示 tool_calls 信息
+    if (content.tool_calls && content.tool_calls.length > 0) {
+      return (
+        <div className={styles.toolCalls}>
+          {content.tool_calls.map((call) => (
+            <div
+              key={call.id}
+              className={styles.toolCall}
+            >
+              <div className={styles.toolName}>工具调用: {call.name}</div>
+              <pre className={styles.toolArgs}>{JSON.stringify(call.arguments, null, 2)}</pre>
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    return JSON.stringify(content);
+  };
+
   return (
     <aside className={styles.panel}>
       <div className={styles.header}>
@@ -25,35 +54,54 @@ export const DetailPanel = ({ node, edge, onClose }: DetailPanelProps) => {
       <div className={styles.content}>
         {node && (
           <>
+            <div className={styles.sectionTitle}>节点</div>
             <div className={styles.section}>
               <div className={styles.label}>ID</div>
               <div className={styles.value}>{node.id}</div>
             </div>
             <div className={styles.section}>
-              <div className={styles.label}>描述</div>
+              <div className={styles.label}>目标描述</div>
               <div className={styles.value}>{node.description}</div>
             </div>
+            {node.reason && (
+              <div className={styles.section}>
+                <div className={styles.label}>创建理由</div>
+                <div className={styles.value}>{node.reason}</div>
+              </div>
+            )}
+            {node.summary && (
+              <div className={styles.section}>
+                <div className={styles.label}>总结</div>
+                <div className={styles.value}>{node.summary}</div>
+              </div>
+            )}
             <div className={styles.section}>
               <div className={styles.label}>状态</div>
               <div className={styles.value}>{node.status}</div>
             </div>
           </>
         )}
-        {edge && (
-          <>
-            <div className={styles.section}>
-              <div className={styles.label}>ID</div>
-              <div className={styles.value}>{edge.id}</div>
-            </div>
-            <div className={styles.section}>
-              <div className={styles.label}>起点</div>
-              <div className={styles.value}>{edge.source}</div>
+        {messages && messages.length > 0 && (
+          <div className={styles.messages}>
+            <div className={styles.sectionTitle}>边</div>
+            <div className={styles.messageList}>
+              {messages.map((msg, idx) => (
+                <div
+                  key={msg.id || idx}
+                  className={styles.messageItem}
+                >
+                  <div className={styles.section}>
+                    <div className={styles.label}>描述</div>
+                    <div className={styles.value}>{msg.description || "-"}</div>
+                  </div>
+                  <div className={styles.section}>
+                    <div className={styles.label}>内容</div>
+                    <div className={styles.value}>{renderMessageContent(msg.content)}</div>
+                  </div>
+                </div>
+              ))}
             </div>
-            <div className={styles.section}>
-              <div className={styles.label}>终点</div>
-              <div className={styles.value}>{edge.target}</div>
-            </div>
-          </>
+          </div>
         )}
       </div>
     </aside>

frontend/react-template/src/components/FlowChart/FlowChart.tsx

@@ -14,7 +14,6 @@ interface FlowChartProps {
   goals: Goal[];
   msgGroups?: Record<string, Message[]>;
   onNodeClick?: (node: Goal, edge?: EdgeType) => void;
-  onEdgeClick?: (edge: EdgeType) => void;
 }
 
 interface LayoutNode extends d3.HierarchyPointNode<Goal> {
@@ -25,8 +24,23 @@ interface LayoutNode extends d3.HierarchyPointNode<Goal> {
 type TreeGoal = Goal & { children?: TreeGoal[] };
 const VIRTUAL_ROOT_ID = "__VIRTUAL_ROOT__";
 
-export const FlowChart: FC<FlowChartProps> = ({ goals, msgGroups = {}, onNodeClick, onEdgeClick }) => {
-  console.log("%c [ msgGroups ]-29", "font-size:13px; background:pink; color:#bf2c9f;", msgGroups);
+export const FlowChart: FC<FlowChartProps> = ({ goals, msgGroups = {}, onNodeClick }) => {
+  // 确保 goals 中包含 END 节点
+  const displayGoals = useMemo(() => {
+    if (!goals) return [];
+    const hasEnd = goals.some((g) => g.id === "END");
+    if (hasEnd) return goals;
+    const endGoal: Goal = {
+      id: "END",
+      description: "终止",
+      status: "completed",
+      created_at: new Date().toISOString(),
+      reason: "",
+    };
+    return [...goals, endGoal];
+  }, [goals]);
+
+  console.log("%c [ goals ]-28", "font-size:13px; background:pink; color:#bf2c9f;", displayGoals);
   const svgRef = useRef<SVGSVGElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const [dimensions, setDimensions] = useState({ width: 1200, height: 800 });
@@ -82,8 +96,8 @@ export const FlowChart: FC<FlowChartProps> = ({ goals, msgGroups = {}, onNodeCli
 
   // 计算树布局坐标（横向）
   const layoutData = useMemo(() => {
-    if (!goals || goals.length === 0) return null;
-    const root = buildHierarchy(goals);
+    if (!displayGoals || displayGoals.length === 0) return null;
+    const root = buildHierarchy(displayGoals);
     const margin = { top: 60, right: 140, bottom: 60, left: 140 };
     const treeLayout = d3
       .tree<Goal>()
@@ -95,7 +109,7 @@ export const FlowChart: FC<FlowChartProps> = ({ goals, msgGroups = {}, onNodeCli
       links: treeData.links(),
       margin,
     };
-  }, [goals, dimensions]);
+  }, [displayGoals, dimensions]);
 
   // 选中节点到根的路径，用于高亮与弱化
   const pathNodeIds = useMemo(() => {
@@ -115,18 +129,52 @@ export const FlowChart: FC<FlowChartProps> = ({ goals, msgGroups = {}, onNodeCli
     const nonVirtualLinks = layoutData.links.filter(
       (link) => link.source.data.id !== VIRTUAL_ROOT_ID && link.target.data.id !== VIRTUAL_ROOT_ID,
     );
-    if (nonVirtualLinks.length > 0) return nonVirtualLinks;
+    // Remove the early return so we can merge nonVirtualLinks with manual sibling links
+    // if (nonVirtualLinks.length > 0) return nonVirtualLinks;
+
     const nodeMap = new Map(layoutData.nodes.map((node) => [node.data.id, node]));
-    const orderedNodes = goals.map((goal) => nodeMap.get(goal.id)).filter((node): node is LayoutNode => Boolean(node));
+    const orderedNodes = displayGoals
+      .map((goal) => nodeMap.get(goal.id))
+      .filter((node): node is LayoutNode => Boolean(node));
     const links: d3.HierarchyPointLink<Goal>[] = [];
+
+    // 处理主链（Sibling 顺序连接）
     for (let i = 0; i < orderedNodes.length - 1; i += 1) {
-      links.push({
-        source: orderedNodes[i],
-        target: orderedNodes[i + 1],
-      });
+      const current = orderedNodes[i];
+      const next = orderedNodes[i + 1];
+
+      // 如果是 END 节点前的节点，且该节点有子节点（非 END 的子节点），则不直接连接到 END
+      // 而是将子节点连接到 END
+      if (next.data.id === "END" && current.children && current.children.length > 0) {
+        // 过滤掉已经在 mainLinks 中的连接（理论上 current -> children 已经在 nonVirtualLinks 中）
+        // 这里添加 children -> END 的连接
+        current.children.forEach((child) => {
+          // 确保 child 不是 END（虽然 END 此时是 sibling）
+          if (child.data.id !== "END") {
+            links.push({
+              source: child as LayoutNode,
+              target: next,
+            });
+          }
+        });
+        // 不添加 current -> END
+        continue;
+      }
+
+      // 避免重复：如果 nonVirtualLinks 中已经存在 current -> next（即父子关系），则跳过
+      const exists = nonVirtualLinks.some(
+        (l) => l.source.data.id === current.data.id && l.target.data.id === next.data.id,
+      );
+      if (!exists) {
+        links.push({
+          source: current,
+          target: next,
+        });
+      }
     }
-    return links;
-  }, [layoutData, goals]);
+
+    return [...nonVirtualLinks, ...links];
+  }, [layoutData, displayGoals]);
 
   // 节点点击：记录选中状态并回传对应边
   const handleNodeClick = (node: LayoutNode) => {
@@ -143,17 +191,6 @@ export const FlowChart: FC<FlowChartProps> = ({ goals, msgGroups = {}, onNodeCli
     onNodeClick?.(node.data, edge);
   };
 
-  // 边点击：构造 Edge 类型回传
-  const handleEdgeClick = (link: d3.HierarchyPointLink<Goal>) => {
-    const edge: EdgeType = {
-      id: `${link.source.data.id}-${link.target.data.id}`,
-      source: link.source.data.id,
-      target: link.target.data.id,
-      label: "",
-    };
-    onEdgeClick?.(edge);
-  };
-
   // 当前选中节点的消息链
   const selectedMessages = useMemo(() => {
     if (!selectedNodeId) return [];
@@ -165,60 +202,54 @@ export const FlowChart: FC<FlowChartProps> = ({ goals, msgGroups = {}, onNodeCli
     if (!layoutData || !selectedNodeId || selectedMessages.length === 0) return null;
     const anchorNode = layoutData.nodes.find((n) => n.data.id === selectedNodeId);
     if (!anchorNode) return null;
-
-    const startPt = { x: anchorNode.x, y: anchorNode.y };
+    const anchorX = anchorNode.x;
+    const anchorY = anchorNode.y;
     const count = selectedMessages.length;
+    const sides = count + 2;
+    const radius = Math.max(90, 44 + count * 16 + Math.max(0, count - 4) * 6);
+    const centerX = anchorX;
+    const centerY = anchorY + radius;
+    const angleStep = (Math.PI * 2) / sides;
 
-    const nextGoalLink = mainLinks.find((l) => l.source.data.id === selectedNodeId);
-    // 如果没有下一个节点，则虚拟一个终点在右侧，形成自然的抛物线
-    const endPt = nextGoalLink
-      ? { x: nextGoalLink.target.x, y: nextGoalLink.target.y }
-      : { x: startPt.x + 400 + Math.max(0, count - 4) * 80, y: startPt.y };
-
-    // 计算悬链线控制点 (Quadratic Bezier)
-    // 深度随节点数增加，确保不拥挤
-    // 当节点数 > 4 时，额外增加深度以拉开间距
-    const depth = 120 + count * 35 + Math.max(0, count - 4) * 40;
-    const midX = (startPt.x + endPt.x) / 2;
-    const bottomY = Math.max(startPt.y, endPt.y);
-    const controlPt = { x: midX, y: bottomY + depth };
-
-    const getQuadraticBezierPoint = (
-      t: number,
-      p0: { x: number; y: number },
-      p1: { x: number; y: number },
-      p2: { x: number; y: number },
-    ) => {
-      const oneMinusT = 1 - t;
+    const msgNodes = selectedMessages.map((message, index) => {
+      const angle = -Math.PI / 2 - angleStep * (index + 1);
       return {
-        x: oneMinusT * oneMinusT * p0.x + 2 * oneMinusT * t * p1.x + t * t * p2.x,
-        y: oneMinusT * oneMinusT * p0.y + 2 * oneMinusT * t * p1.y + t * t * p2.y,
+        x: centerX + Math.cos(angle) * radius,
+        y: centerY + Math.sin(angle) * radius,
+        message,
       };
+    });
+
+    const nextGoalLink = mainLinks.find((l) => l.source.data.id === selectedNodeId);
+    const nextGoalTarget = nextGoalLink?.target;
+
+    // 节点半高度，用于计算下边界连接点
+    const nodeHalfH = 5;
+
+    const paths: { d: string; dashed?: boolean; terminal?: boolean }[] = [];
+    const buildSegment = (sx: number, sy: number, tx: number, ty: number) => {
+      const controlX = (sx + tx) / 2 - 40;
+      const controlY = Math.max(sy, ty) - 30;
+      return `M${sx},${sy} Q${controlX},${controlY} ${tx},${ty}`;
     };
 
-    // 采样点：起点 -> 消息点... -> 终点
-    const totalSegments = count + 1;
-    const points = [startPt];
-    const msgNodes = [];
-
-    for (let i = 1; i <= count; i += 1) {
-      const t = i / totalSegments;
-      const pos = getQuadraticBezierPoint(t, startPt, controlPt, endPt);
-      msgNodes.push({
-        x: pos.x,
-        y: pos.y,
-        message: selectedMessages[i - 1],
-      });
-      points.push(pos);
+    for (let i = -1; i < msgNodes.length - 1; i += 1) {
+      // 起始点：如果是第一个点(i < 0)，则从 anchorNode 的下边界开始 (anchorY + nodeHalfH)
+      // 否则从上一个 msgNode 开始
+      const from = i < 0 ? { x: anchorX, y: anchorY + nodeHalfH } : msgNodes[i];
+      const to = msgNodes[i + 1];
+      const d = buildSegment(from.x, from.y, to.x, to.y);
+      paths.push({ d, dashed: true, terminal: true });
     }
-    points.push(endPt);
 
-    const paths: { d: string; dashed?: boolean; terminal?: boolean }[] = [];
-    for (let i = 0; i < points.length - 1; i += 1) {
-      const p1 = points[i];
-      const p2 = points[i + 1];
-      // 使用直线段连接采样点，形成带箭头的折线链，整体逼近曲线
-      const d = `M${p1.x},${p1.y} L${p2.x},${p2.y}`;
+    if (nextGoalTarget && msgNodes.length > 0) {
+      const last = msgNodes[msgNodes.length - 1];
+      const tx = nextGoalTarget.x;
+      // 结束点：连接到 nextGoalTarget 的下边界 (ty + nodeHalfH)
+      const ty = nextGoalTarget.y + nodeHalfH;
+      const controlX = (last.x + tx) / 2;
+      const controlY = Math.max(last.y, ty) - 2;
+      const d = `M${last.x},${last.y} Q${controlX},${controlY} ${tx},${ty}`;
       paths.push({ d, dashed: true, terminal: true });
     }
 
@@ -303,11 +334,13 @@ export const FlowChart: FC<FlowChartProps> = ({ goals, msgGroups = {}, onNodeCli
                         const dimmed = false;
                         return (
                           <Edge
-                            key={index}
+                            key={`edge-line-${index}`}
                             link={link}
+                            label={link.target.data.reason}
                             highlighted={isInPath}
                             dimmed={dimmed}
-                            onClick={() => handleEdgeClick(link)}
+                            onClick={() => handleNodeClick(link.source)}
+                            mode="line"
                           />
                         );
                       })}
@@ -330,6 +363,30 @@ export const FlowChart: FC<FlowChartProps> = ({ goals, msgGroups = {}, onNodeCli
                         );
                       })}
                   </g>
+                  <g className={styles.links}>
+                    {mainLinks
+                      .filter(
+                        (link) => link.source.data.id !== VIRTUAL_ROOT_ID && link.target.data.id !== VIRTUAL_ROOT_ID,
+                      )
+                      .map((link, index) => {
+                        const isInPath =
+                          pathNodeIds.size > 0 &&
+                          pathNodeIds.has(link.source.data.id) &&
+                          pathNodeIds.has(link.target.data.id);
+                        const dimmed = false;
+                        return (
+                          <Edge
+                            key={`edge-label-${index}`}
+                            link={link}
+                            label={link.target.data.reason}
+                            highlighted={isInPath}
+                            dimmed={dimmed}
+                            onClick={() => handleNodeClick(link.source)}
+                            mode="label"
+                          />
+                        );
+                      })}
+                  </g>
                   {messageOverlay && (
                     <g>
                       {messageOverlay.paths.map((p, idx) => (
@@ -347,28 +404,24 @@ export const FlowChart: FC<FlowChartProps> = ({ goals, msgGroups = {}, onNodeCli
                       ))}
                       {messageOverlay.msgNodes.map((mn, idx) =>
                         (() => {
-                          const fullText = mn.message.description || mn.message.content || "";
-                          const shortText = fullText.length > 6 ? `${fullText.slice(0, 6)}...` : fullText;
-                          const isLast = idx === messageOverlay.msgNodes.length - 1;
+                          const content = mn.message.content;
+                          let contentStr = "";
+                          if (typeof content === "string") {
+                            contentStr = content;
+                          } else if (content) {
+                            contentStr = content.text || JSON.stringify(content);
+                          }
+                          const fullText = mn.message.description || contentStr || "";
+                          const truncateMiddle = (text: string, limit: number) => {
+                            if (text.length <= limit) return text;
+                            return `${text.slice(0, 2)}...${text.slice(-2)}`;
+                          };
+                          const shortText = truncateMiddle(fullText, 6);
                           return (
                             <g
                               key={`msg-node-${idx}`}
                               transform={`translate(${mn.x},${mn.y})`}
                             >
-                              {isLast ? (
-                                <path
-                                  d="M-2,-4 L6,0 L-2,4 Z"
-                                  fill="#7aa0d6"
-                                />
-                              ) : (
-                                <circle
-                                  r={4.5}
-                                  fill="#7aa0d6"
-                                  stroke="#ffffff"
-                                  strokeWidth={2}
-                                />
-                              )}
-
                               <Tooltip content={fullText}>
                                 <text
                                   x={0}

frontend/react-template/src/components/FlowChart/components/Edge.tsx

@@ -2,17 +2,25 @@ import type { FC } from "react";
 import * as d3 from "d3";
 import type { Goal } from "../../../types/goal";
 import styles from "../styles/Edge.module.css";
+import { Tooltip } from "@douyinfe/semi-ui";
 
 // 主链连接线：根据目标状态决定颜色与箭头，支持选中高亮
 interface EdgeProps {
   link: d3.HierarchyPointLink<Goal>;
+  label?: string;
   highlighted: boolean;
   dimmed: boolean;
   onClick: () => void;
+  mode?: "line" | "label";
 }
 
-export const Edge: FC<EdgeProps> = ({ link, highlighted, dimmed, onClick }) => {
+export const Edge: FC<EdgeProps> = ({ link, label, highlighted, dimmed, onClick, mode = "line" }) => {
   const { source, target } = link;
+  const truncateMiddle = (text: string, limit: number) => {
+    console.log("%c [ text ]-20", "font-size:13px; background:pink; color:#bf2c9f;", text);
+    if (text.length <= limit) return text;
+    return `${text.slice(0, 2)}...${text.slice(-2)}`;
+  };
 
   const createPath = () => {
     const sourceX = source.x;
@@ -57,23 +65,83 @@ export const Edge: FC<EdgeProps> = ({ link, highlighted, dimmed, onClick }) => {
     }
   };
 
-  return (
-    <g className={`${styles.edge} ${highlighted ? styles.selected : ""} ${dimmed ? styles.dimmed : ""}`}>
-      <path
-        d={createPath()}
-        fill="none"
-        stroke="transparent"
-        strokeWidth={24}
-        onClick={onClick}
+  const renderLabel = () => {
+    if (!label) return null;
+    const sourceX = source.x;
+    const sourceY = source.y;
+    const targetX = target.x;
+    const targetY = target.y;
+    const nodeHalfW = 80;
+    const direction = targetX >= sourceX ? 1 : -1;
+    const startX = sourceX + direction * nodeHalfW;
+    const endX = targetX - direction * nodeHalfW;
+    const midX = (startX + endX) / 2;
+    const midY = (sourceY + targetY) / 2;
+
+    const truncated = truncateMiddle(label, 6);
+
+    return (
+      <g
+        transform={`translate(${midX},${midY})`}
         style={{ cursor: "pointer" }}
-      />
-      <path
-        d={createPath()}
-        fill="none"
-        stroke={getStrokeColor()}
-        strokeWidth={3}
-        markerEnd={getMarkerUrl()}
-      />
+      >
+        <title>{label}</title>
+        <rect
+          x={-30}
+          y={-10}
+          width={60}
+          height={20}
+          rx={4}
+          fill="#fff"
+          fillOpacity={1}
+          stroke="#fff"
+          strokeWidth={1}
+        />
+        <Tooltip
+          content={label}
+          position="top"
+        >
+          <text
+            textAnchor="middle"
+            dy="0.35em"
+            fontSize={11}
+            fill="#1f2937"
+            style={{ userSelect: "none" }}
+          >
+            {truncated}
+          </text>
+        </Tooltip>
+      </g>
+    );
+  };
+
+  return (
+    <g className={styles.edge}>
+      {mode === "line" && (
+        <>
+          <path
+            d={createPath()}
+            fill="none"
+            stroke="transparent"
+            strokeWidth={15}
+            style={{ cursor: "pointer" }}
+            onClick={(e) => {
+              e.stopPropagation();
+              onClick();
+            }}
+          />
+          <path
+            d={createPath()}
+            fill="none"
+            stroke={getStrokeColor()}
+            strokeWidth={highlighted ? 3 : 2}
+            markerEnd={getMarkerUrl()}
+            opacity={dimmed ? 0.2 : 1}
+            style={{ pointerEvents: "none" }}
+          />
+        </>
+      )}
+      {mode === "label" && renderLabel()}
     </g>
   );
 };

frontend/react-template/src/components/FlowChart/components/Node.tsx

@@ -15,25 +15,31 @@ interface NodeProps {
 export const Node: FC<NodeProps> = ({ node, selected, highlighted, dimmed, onClick }) => {
   const { x, y, data } = node;
 
-  const truncateText = (text: string, maxLength: number): string => {
-    return text.length > maxLength ? `${text.slice(0, maxLength)}...` : text;
+  const truncateMiddle = (text: string, limit: number) => {
+    if (text.length <= limit) return text;
+    const half = Math.floor((limit - 3) / 2);
+    return `${text.slice(0, half)}...${text.slice(-half)}`;
   };
 
+  const isEndNode = data.id === "END";
+
   return (
     <g
-      className={`${styles.node} ${selected ? styles.selected : ""} ${dimmed ? styles.dimmed : ""}`}
+      className={`${styles.node} ${selected ? styles.selected : ""} ${dimmed ? styles.dimmed : ""} ${isEndNode ? styles.endNode : ""}`}
       transform={`translate(${x},${y})`}
       onClick={onClick}
       style={{ cursor: "pointer" }}
     >
+      <title>{data.description}</title>
       <rect
         x={-70}
         y={-26}
         width={140}
         height={52}
         rx={8}
-        fill="transparent"
-        stroke="none"
+        fill={isEndNode ? "#fff" : "transparent"}
+        stroke={isEndNode ? "#ff4d4f" : "none"}
+        strokeDasharray={isEndNode ? "4 4" : "none"}
       />
       <text
         textAnchor="middle"
@@ -41,9 +47,9 @@ export const Node: FC<NodeProps> = ({ node, selected, highlighted, dimmed, onCli
         fontSize={16}
         fill={dimmed ? "#999" : "#333"}
         fontWeight={selected || highlighted ? 600 : 400}
-        style={{ opacity: dimmed ? 0.35 : 1 }}
+        style={{ opacity: dimmed ? 0.35 : 1, pointerEvents: "none" }}
       >
-        {truncateText(data.description || data.id, 16)}
+        {truncateMiddle(data.description || data.id, 10)}
       </text>
       {data.status === "running" && (
         <circle

frontend/react-template/src/components/MainContent/MainContent.tsx

@@ -10,10 +10,9 @@ import styles from "./MainContent.module.css";
 interface MainContentProps {
   traceId: string | null;
   onNodeClick?: (node: Goal, edge?: Edge) => void;
-  onEdgeClick?: (edge: Edge) => void;
 }
 
-export const MainContent: FC<MainContentProps> = ({ traceId, onNodeClick, onEdgeClick }) => {
+export const MainContent: FC<MainContentProps> = ({ traceId, onNodeClick }) => {
   const { trace, loading } = useTrace(traceId);
   const initialGoals = useMemo(() => trace?.goal_tree?.goals ?? [], [trace]);
   const { goals, connected, msgGroups } = useFlowChartData(traceId, initialGoals);
@@ -35,17 +34,10 @@ export const MainContent: FC<MainContentProps> = ({ traceId, onNodeClick, onEdge
   return (
     <div className={styles.main}>
       <div className={styles.header}>
-        <div className={styles.title}>{trace?.task || "流程图"}</div>
+        <div className={styles.title}></div>
         <div className={styles.headerRight}>
           <div className={styles.status}>{connected ? "WebSocket 已连接" : "WebSocket 未连接"}</div>
           <div className={styles.legend}>
-            <div className={styles.legendItem}>
-              <span
-                className={styles.legendDot}
-                style={{ background: "#ff6b6b" }}
-              />
-              选中
-            </div>
             <div className={styles.legendItem}>
               <span
                 className={styles.legendDot}
@@ -87,7 +79,6 @@ export const MainContent: FC<MainContentProps> = ({ traceId, onNodeClick, onEdge
             goals={goals}
             msgGroups={msgGroups}
             onNodeClick={onNodeClick}
-            onEdgeClick={onEdgeClick}
           />
         )}
       </div>

frontend/react-template/src/components/TopBar/TopBar.tsx

@@ -64,13 +64,13 @@ export const TopBar: FC<TopBarProps> = ({ onTraceSelect }) => {
           <option value="completed">已完成</option>
           <option value="failed">失败</option>
         </select>
-        <button
+        {/* <button
           onClick={() => loadTraces(statusFilter)}
           className={styles.button}
           disabled={loading}
         >
           {loading ? "加载中..." : "刷新"}
-        </button>
+        </button> */}
       </div>
     </header>
   );

frontend/react-template/src/types/goal.ts

@@ -1,6 +1,7 @@
 export interface Goal {
   id: string;
   description: string;
+  reason?: string;
   status: "pending" | "running" | "completed" | "failed";
   summary?: string;
   parent_id?: string;

frontend/react-template/src/types/message.ts

@@ -1,9 +1,20 @@
+export interface ToolCall {
+  id: string;
+  name: string;
+  arguments: Record<string, unknown>;
+}
+
+export interface MessageContent {
+  text?: string;
+  tool_calls?: ToolCall[];
+}
+
 export interface Message {
   id?: string;
   message_id?: string;
   goal_id?: string;
   role?: string;
-  content?: string;
+  content?: string | MessageContent;
   description?: string;
   tokens?: number | null;
 }