Function PreviewPanel

tools/debug-console/components/PreviewPanel.tsx:55–269

({ refData, nodeData, workspace, onClose, onOpenRef }: Props)

    };

export function PreviewPanel({ refData, nodeData, workspace, onClose, onOpenRef }: Props) {
  const t = useT();
  // 决定是否需要 fetch（refData 模式 或 nodeData 模式且 kind 是含 path 的 file/ghost/result）
  const fetchTarget: { tool: string; args: Record<string, unknown> } | null = (() => {
    if (refData) return refToToolCall(refData);
    if (
      nodeData &&
      (nodeData.kind === "file" || nodeData.kind === "ghost") &&
      nodeData.path
    ) {
      const ref: WikiRef = {
        path: nodeData.path,
        anchor: nodeData.anchor || null,
        isBlock: !!nodeData.isBlock,
        alias: null,
      };
      return refToToolCall(ref);
    }
    return null;
  })();

  // 显示用的 ref（顶栏路径 / 打开按钮）
  const displayRef: WikiRef | null = refData
    ? refData
    : nodeData?.path
      ? {
          path: nodeData.path,
          anchor: nodeData.anchor || null,
          isBlock: !!nodeData.isBlock,
          alias: null,
        }
      : null;

  const [state, setState] = useState<FetchState>(
    fetchTarget ? { kind: "loading" } : { kind: "ok", rendered: { body: "" } },
  );

  useEffect(() => {
    if (!fetchTarget) {
      setState({ kind: "ok", rendered: { body: "" } });
      return;
    }
    let cancelled = false;
    setState({ kind: "loading" });

    const post = (tool: string, args: Record<string, unknown>) =>
      fetch("/api/preview", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ tool, args, workspace: workspace || undefined }),
      }).then((r) => r.json());

    const path = typeof fetchTarget.args.path === "string" ? fetchTarget.args.path : "";
    const anchor = typeof fetchTarget.args.anchor === "string" ? fetchTarget.args.anchor : "";
    const hadAnchor = fetchTarget.tool !== "read_page" && !!anchor;

    (async () => {
      try {