Function ToolCallCard

tools/debug-console/components/ToolCallCard.tsx:81–242

({ call }: { call: ToolCallVizData })

}

export function ToolCallCard({ call }: { call: ToolCallVizData }) {
  const t = useT();
  const [expanded, setExpanded] = useState(false);
  const [rawView, setRawView] = useState(false);
  const summary = summaryForArgs(call.args);
  const adminLink = openInAdmin(call.args);
  const result = call.result;
  const pending = !result;
  const ok = result?.ok ?? null;

  // read_page / read_section / read_block 的返回里带 markdown 正文（content 字段）——
  // 渲染成 markdown 效果，而不是把整坨 JSON 塞进 <pre>。结构化工具（search / outline /
  // backlinks…）没有 content、继续看原始 JSON。可用 raw/rendered 开关切回 JSON 调试。
  const mdContent =
    result?.ok &&
    result.data &&
    typeof result.data === "object" &&
    typeof (result.data as { content?: unknown }).content === "string"
      ? (result.data as { content: string }).content
      : null;

  const status = pending
    ? { label: t("tool.pending"), color: "var(--amber)" }
    : ok
      ? { label: t("tool.ok"), color: "var(--emerald)" }
      : { label: t("tool.fail"), color: "var(--vermilion)" };

  const argEntries = Object.entries(call.args);

  return (
    <div
      className={`relative my-3 max-w-[68ch] border bg-[var(--ink-2)]/60 ${
        pending
          ? "border-[var(--amber)] shadow-[0_0_0_1px_rgba(255,179,71,0.15)]"
          : ok
            ? "border-[var(--line)]"
            : "border-[var(--vermilion)]"
      } ${call.synthetic ? "border-dashed" : ""}`}
    >
      <span className="k-corner-tl" />
      <span className="k-corner-br" />

      {/* 折叠态 chip 行 */}
      <button
        onClick={() => setExpanded(!expanded)}
        className="group flex w-full items-center gap-3 px-3 py-2 text-left hover:bg-[var(--ink-3)]/60"
      >
        {/* 状态印章 */}
        <span
          className="k-stamp-solid shrink-0"
          style={{
            background: status.color,
            color: "var(--ink)",
          }}
        >
          {pending && (
            <span className="mr-0.5 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-[var(--ink)]" />
          )}