Function FlowDetailPanel

tools/debug-console/components/FlowDetailPanel.tsx:20–139

({ node, locked, nodeCount, edgeCount, onUnlock }: Props)

}

export function FlowDetailPanel({ node, locked, nodeCount, edgeCount, onUnlock }: Props) {
  const t = useT();
  if (!node) {
    return (
      <div className="pointer-events-none absolute bottom-3 right-3 w-80 rounded-lg border border-slate-700 bg-slate-900/80 p-3 text-xs text-slate-500 shadow-xl backdrop-blur">
        <div className="mb-1 text-slate-400">{t("flow.detail_ready")}</div>
        {(nodeCount || edgeCount) && (
          <div className="text-slate-500">
            {t("flow.detail_counts", { n: nodeCount ?? 0, edge: edgeCount ?? 0 })}
          </div>
        )}
        <div className="mt-1 text-slate-600">{t("flow.detail_hint")}</div>
      </div>
    );
  }

  return (
    <div className="pointer-events-auto absolute bottom-3 right-3 max-h-[70%] w-[28rem] overflow-auto rounded-lg border border-cyan-700 bg-slate-900/95 p-3 text-xs shadow-2xl backdrop-blur">
      {/* 顶部：kind 标签 + title + 锁定指示 */}
      <div className="mb-2 flex items-center gap-2">
        <span className={kindBadgeClass(node.kind)}>{kindLabel(node, t)}</span>
        <span className="flex-1 truncate text-sm font-semibold text-slate-100">{node.title}</span>
        {locked && (
          <button
            onClick={onUnlock}
            className="rounded bg-cyan-700 px-1.5 py-0.5 text-[10px] text-cyan-100 hover:bg-cyan-600"
            title={t("flow.detail_lock_tip")}
          >
            {t("flow.detail_locked")}
          </button>
        )}
      </div>

      {/* path / subtitle */}
      {node.path && (
        <div className="mb-2 break-all rounded bg-slate-950/50 p-1.5 font-mono text-[10px] text-cyan-300">
          {node.path}
          {node.anchor && (
            <span className="text-slate-500">
              {node.isBlock ? "#^" : "#"}
              <span className="text-emerald-400">{node.anchor}</span>
            </span>
          )}
        </div>
      )}
      {!node.path && node.subtitle && (
        <div className="mb-2 break-words text-slate-300">{node.subtitle}</div>
      )}

      {/* tool 节点：args + result */}
      {node.kind === "file" || node.kind === "search" || node.kind === "list" || node.kind === "other" ? (
        <>
          {node.toolName && (
            <div className="mb-1 text-slate-500">
              {t("flow.detail_tool")}<span className="text-slate-300">{node.toolName}</span>
              {node.hitCount > 1 && (
                <span className="ml-2 text-amber-400">×{node.hitCount}</span>
              )}