Function FlowGraphInner

tools/debug-console/components/FlowGraph.tsx:80–201

({ message, userQuery, onOpenRef, onOpenNode, streaming }: Props)

}

function FlowGraphInner({ message, userQuery, onOpenRef, onOpenNode, streaming }: Props) {
  const t = useT();
  const { locale } = useLocale();
  // 结构签名作为 memo 依赖（而非 message 本身）——流式逐字增量不重建图，保持稳定。
  const signature = graphSignature(message, userQuery);
  const { nodes, edges } = useMemo(() => {
    const built = buildFlowGraph(message, userQuery, locale);
    const positioned = layoutGraph(built.nodes, built.edges, "LR");
    const toolNodes = positioned.filter(
      (n) => n.data.kind === "file" || n.data.kind === "search" || n.data.kind === "list",
    );
    const pending = toolNodes.find((n) => n.data.status === "pending");
    const latest = pending?.data || toolNodes[toolNodes.length - 1]?.data || null;
    const enriched: GraphNode[] = positioned.map((n) => ({
      ...n,
      data: {
        ...n.data,
        onOpenRef,
        isLatestActive: streaming && latest && n.data.key === latest.key,
      },
    }));
    return { nodes: enriched, edges: built.edges };
    // 依赖用 signature（结构指纹）+ streaming/locale/onOpenRef；message/userQuery 已被 signature 概括。
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [signature, streaming, onOpenRef, locale]);

  const rf = useReactFlow();

  // 自动聚焦（fitView）：每当出现新卡片（nodes.length 变化）就平滑取景到全景，
  // 让新卡片入画、整张图整体可见。这不会像以前那样「一直晃」——图已由结构签名 memo 把关，
  // nodes.length 只在「真有新卡片 / 结构变化」时才变（逐字流式增量不触发），所以是
  // 「每张新卡片聚焦一次」而非每帧重排。streaming 变化（如刚结束补齐答案卡）也触发一次，
  // 保证最终把全景框好。
  useEffect(() => {
    if (nodes.length === 0) return;
    const id = setTimeout(() => {
      rf.fitView({ padding: 0.2, duration: 400 });
    }, 80);
    return () => clearTimeout(id);
  }, [nodes.length, streaming, rf]);

  // styledEdges 用 memo（依赖 edges）——edges 只在结构变化时变，流式逐字增量不会产生新的
  // 连线数组引用，react-flow 不会每帧重渲染连线 → 蚂蚁线 CSS 动画的 DOM 持续存在、不被打断，
  // 流动既不闪烁也不卡顿。注意 useMemo 必须在下面的提前 return 之前（hooks 规则）。
  const styledEdges: Edge[] = useMemo(
    () =>
      edges.map((e) => {
        const color = edgeColor(e.data.stepType, e.data.isGhost, e.data.isSynthetic);
        return {
          ...e,
          style: {
            stroke: color,
            strokeWidth: e.data.isGhost
              ? 1.5
              : e.data.isSynthetic
                ? 2.5
                : e.data.isFanIn
                  ? 2.5