@tabularis/explain 0.1.0

package/dist/react.js

@@ -0,0 +1,1617 @@
+import { memo, useState, useEffect, useCallback, useMemo } from 'react';
+import { Handle, Position, ReactFlowProvider, useReactFlow, useNodesState, useEdgesState, ReactFlow, Background, Controls, MiniMap } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import dagre from 'dagre';
+import { useTranslation } from 'react-i18next';
+import { Network, BarChart3, TableProperties, PieChart, FileText, Sparkles, CircleSlash, DatabaseZap, Repeat, Users, Layers, ScanSearch, Filter, HardDrive, TrendingDown, TrendingUp, Flame, Info, AlertTriangle, ChevronDown, ChevronRight, Layers2, Clock3, Database, LayoutDashboard, BookOpenText } from 'lucide-react';
+import clsx from 'clsx';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/ExplainGraph.tsx
+
+// src/metrics.ts
+var EXPLAIN_METRIC_KINDS = [
+  "time",
+  "rows",
+  "cost",
+  "buffers"
+];
+function loopCount(node) {
+  return node.actual_loops != null && node.actual_loops > 0 ? node.actual_loops : 1;
+}
+function isSubplanChild(node) {
+  const relationship = node.extra["Parent Relationship"];
+  return relationship === "InitPlan" || relationship === "SubPlan";
+}
+function bufferCount(node) {
+  if (node.buffers_hit == null && node.buffers_read == null) {
+    return null;
+  }
+  return (node.buffers_hit ?? 0) + (node.buffers_read ?? 0);
+}
+function selfValue(total, childSum) {
+  if (total == null) {
+    return null;
+  }
+  return Math.max(0, total - childSum);
+}
+function computeExplainMetrics(plan) {
+  const byId = /* @__PURE__ */ new Map();
+  const order = [];
+  let nextIndex = 1;
+  function walk(node, depth) {
+    const metrics = {
+      nodeId: node.id,
+      index: nextIndex,
+      depth,
+      inclusiveTimeMs: null,
+      exclusiveTimeMs: null,
+      totalCost: node.total_cost,
+      exclusiveCost: null,
+      totalRows: null,
+      inclusiveBuffers: bufferCount(node),
+      exclusiveBuffers: null,
+      timeShare: null,
+      neverExecuted: node.actual_loops === 0
+    };
+    nextIndex += 1;
+    byId.set(node.id, metrics);
+    order.push(metrics);
+    let childTimeMs = 0;
+    let childCost = 0;
+    let childBuffers = 0;
+    for (const child of node.children) {
+      const contribution = walk(child, depth + 1);
+      childCost += contribution.cost;
+      childBuffers += contribution.buffers;
+      if (!isSubplanChild(child)) {
+        childTimeMs += contribution.timeMs;
+      }
+    }
+    const loops = loopCount(node);
+    metrics.inclusiveTimeMs = node.actual_time_ms != null ? node.actual_time_ms * loops : null;
+    metrics.exclusiveTimeMs = selfValue(metrics.inclusiveTimeMs, childTimeMs);
+    metrics.exclusiveCost = selfValue(metrics.totalCost, childCost);
+    metrics.exclusiveBuffers = selfValue(metrics.inclusiveBuffers, childBuffers);
+    metrics.totalRows = node.actual_rows != null ? node.actual_rows * loops : null;
+    return {
+      timeMs: metrics.inclusiveTimeMs ?? 0,
+      cost: metrics.totalCost ?? 0,
+      buffers: metrics.inclusiveBuffers ?? 0
+    };
+  }
+  walk(plan.root, 0);
+  let maxExclusiveTimeMs = 0;
+  let maxExclusiveCost = 0;
+  let maxTotalRows = 0;
+  let maxExclusiveBuffers = 0;
+  let totalExclusiveTimeMs = 0;
+  for (const metrics of order) {
+    maxExclusiveTimeMs = Math.max(
+      maxExclusiveTimeMs,
+      metrics.exclusiveTimeMs ?? 0
+    );
+    maxExclusiveCost = Math.max(maxExclusiveCost, metrics.exclusiveCost ?? 0);
+    maxTotalRows = Math.max(maxTotalRows, metrics.totalRows ?? 0);
+    maxExclusiveBuffers = Math.max(
+      maxExclusiveBuffers,
+      metrics.exclusiveBuffers ?? 0
+    );
+    totalExclusiveTimeMs += metrics.exclusiveTimeMs ?? 0;
+  }
+  if (totalExclusiveTimeMs > 0) {
+    for (const metrics of order) {
+      if (metrics.exclusiveTimeMs != null) {
+        metrics.timeShare = metrics.exclusiveTimeMs / totalExclusiveTimeMs;
+      }
+    }
+  }
+  return {
+    byId,
+    order,
+    maxExclusiveTimeMs,
+    maxExclusiveCost,
+    maxTotalRows,
+    maxExclusiveBuffers,
+    totalExclusiveTimeMs
+  };
+}
+function getMetricValue(metrics, kind) {
+  switch (kind) {
+    case "time":
+      return metrics.exclusiveTimeMs;
+    case "rows":
+      return metrics.totalRows;
+    case "cost":
+      return metrics.exclusiveCost;
+    case "buffers":
+      return metrics.exclusiveBuffers;
+  }
+}
+function getMetricMax(metrics, kind) {
+  switch (kind) {
+    case "time":
+      return metrics.maxExclusiveTimeMs;
+    case "rows":
+      return metrics.maxTotalRows;
+    case "cost":
+      return metrics.maxExclusiveCost;
+    case "buffers":
+      return metrics.maxExclusiveBuffers;
+  }
+}
+function isMetricAvailable(metrics, kind) {
+  return metrics.order.some((node) => getMetricValue(node, kind) != null);
+}
+function getAvailableMetricKinds(metrics) {
+  return EXPLAIN_METRIC_KINDS.filter((kind) => isMetricAvailable(metrics, kind));
+}
+function getDefaultMetricKind(metrics) {
+  if (metrics.maxExclusiveTimeMs > 0) {
+    return "time";
+  }
+  const available = getAvailableMetricKinds(metrics);
+  return available.includes("cost") ? "cost" : available[0] ?? null;
+}
+
+// src/flow.ts
+function explainPlanToFlow(plan, selectedNodeId, metrics, diagnostics) {
+  const planMetrics = metrics ?? computeExplainMetrics(plan);
+  const rawNodes = [];
+  const edges = [];
+  function walk(node) {
+    const nodeMetrics = planMetrics.byId.get(node.id);
+    const data = {
+      node,
+      metrics: nodeMetrics ?? null,
+      maxExclusiveCost: planMetrics.maxExclusiveCost,
+      maxExclusiveTimeMs: planMetrics.maxExclusiveTimeMs,
+      diagnostics: diagnostics?.get(node.id) ?? [],
+      hasAnalyzeData: plan.has_analyze_data,
+      isSelected: selectedNodeId === node.id
+    };
+    rawNodes.push({
+      id: node.id,
+      type: "explainPlan",
+      position: { x: 0, y: 0 },
+      data
+    });
+    for (const child of node.children) {
+      edges.push({
+        id: `${node.id}-${child.id}`,
+        source: node.id,
+        target: child.id,
+        animated: true,
+        style: { stroke: "#6366f1" }
+      });
+      walk(child);
+    }
+  }
+  walk(plan.root);
+  return layoutExplainNodes(rawNodes, edges);
+}
+function layoutExplainNodes(nodes, edges) {
+  const g = new dagre.graphlib.Graph();
+  g.setDefaultEdgeLabel(() => ({}));
+  g.setGraph({ rankdir: "TB", ranksep: 80, nodesep: 40 });
+  const NODE_WIDTH = 280;
+  for (const node of nodes) {
+    const data = node.data;
+    const lines = 3 + (data.hasAnalyzeData ? 2 : 0) + (data.node.filter ? 1 : 0) + (data.diagnostics.length > 0 ? 1 : 0);
+    const height = 28 + lines * 22;
+    g.setNode(node.id, { width: NODE_WIDTH, height });
+  }
+  for (const edge of edges) {
+    g.setEdge(edge.source, edge.target);
+  }
+  dagre.layout(g);
+  const layoutedNodes = nodes.map((node) => {
+    const pos = g.node(node.id);
+    return {
+      ...node,
+      position: {
+        x: pos.x - NODE_WIDTH / 2,
+        y: pos.y - pos.height / 2
+      }
+    };
+  });
+  return { nodes: layoutedNodes, edges };
+}
+
+// src/plan.ts
+function getNodeCostStyle(cost, maxCost) {
+  if (maxCost <= 0) return { border: "border-l-green-500", headerBg: "bg-green-950/30" };
+  const ratio = cost / maxCost;
+  if (ratio < 0.2) return { border: "border-l-green-500", headerBg: "bg-green-950/30" };
+  if (ratio < 0.6) return { border: "border-l-yellow-500", headerBg: "bg-yellow-950/30" };
+  return { border: "border-l-red-500", headerBg: "bg-red-950/30" };
+}
+function getHeatBarClass(value, max) {
+  if (max <= 0) return "bg-green-500/70";
+  const ratio = value / max;
+  if (ratio < 0.2) return "bg-green-500/70";
+  if (ratio < 0.6) return "bg-yellow-500/70";
+  return "bg-red-500/70";
+}
+function formatCost(n) {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}K`;
+  if (n >= 100) return n.toFixed(0);
+  if (n >= 1) return n.toFixed(1);
+  return n.toFixed(2);
+}
+function formatTime(ms) {
+  if (ms >= 1e3) return `${(ms / 1e3).toFixed(2)} s`;
+  if (ms >= 1) return `${ms.toFixed(2)} ms`;
+  return `${(ms * 1e3).toFixed(0)} us`;
+}
+function formatRows(n) {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}K`;
+  return n.toFixed(0);
+}
+function formatRatio(n) {
+  if (n >= 100) return `${n.toFixed(0)}x`;
+  if (n >= 10) return `${n.toFixed(1)}x`;
+  return `${n.toFixed(2)}x`;
+}
+function getMaxCost(node) {
+  let max = node.total_cost ?? 0;
+  for (const child of node.children) {
+    const childMax = getMaxCost(child);
+    if (childMax > max) max = childMax;
+  }
+  return max;
+}
+function flattenExplainNodes(root) {
+  const nodes = [];
+  function walk(node) {
+    nodes.push(node);
+    for (const child of node.children) {
+      walk(child);
+    }
+  }
+  walk(root);
+  return nodes;
+}
+function findExplainNode(root, nodeId) {
+  if (!nodeId) {
+    return null;
+  }
+  if (root.id === nodeId) {
+    return root;
+  }
+  for (const child of root.children) {
+    const found = findExplainNode(child, nodeId);
+    if (found) {
+      return found;
+    }
+  }
+  return null;
+}
+function getRowEstimateRatio(node) {
+  if (node.plan_rows == null || node.actual_rows == null || node.plan_rows <= 0 || node.actual_rows <= 0) {
+    return null;
+  }
+  return node.actual_rows / node.plan_rows;
+}
+function getMismatchMagnitude(node) {
+  const ratio = getRowEstimateRatio(node);
+  if (ratio == null) {
+    return null;
+  }
+  return ratio >= 1 ? ratio : 1 / ratio;
+}
+function isSequentialScan(node) {
+  const normalizedType = node.node_type.toLowerCase();
+  const accessType = typeof node.extra.access_type === "string" ? node.extra.access_type.toLowerCase() : "";
+  return normalizedType.includes("seq scan") || normalizedType.includes("table scan") || normalizedType.includes("full scan") || accessType === "all";
+}
+function isTempOperation(node) {
+  const normalizedType = node.node_type.toLowerCase();
+  const extraText = Object.values(node.extra).filter((value) => typeof value === "string").join(" ").toLowerCase();
+  return normalizedType.includes("sort") || normalizedType.includes("filesort") || normalizedType.includes("temporary") || extraText.includes("using temporary") || extraText.includes("using filesort");
+}
+function getExplainPlanSummary(plan, metrics) {
+  const nodes = flattenExplainNodes(plan.root);
+  const planMetrics = metrics ?? computeExplainMetrics(plan);
+  let highestCostNode = null;
+  let slowestNode = null;
+  let largestRowMismatchNode = null;
+  let sequentialScans = 0;
+  let tempOperations = 0;
+  for (const node of nodes) {
+    const nodeMetrics = planMetrics.byId.get(node.id);
+    const exclusiveCost = nodeMetrics?.exclusiveCost ?? null;
+    const exclusiveTimeMs = nodeMetrics?.exclusiveTimeMs ?? null;
+    if (exclusiveCost != null && (highestCostNode == null || exclusiveCost > highestCostNode.value)) {
+      highestCostNode = {
+        nodeId: node.id,
+        nodeType: node.node_type,
+        relation: node.relation,
+        value: exclusiveCost
+      };
+    }
+    if (exclusiveTimeMs != null && (slowestNode == null || exclusiveTimeMs > slowestNode.value)) {
+      slowestNode = {
+        nodeId: node.id,
+        nodeType: node.node_type,
+        relation: node.relation,
+        value: exclusiveTimeMs
+      };
+    }
+    const ratio = getRowEstimateRatio(node);
+    const magnitude = getMismatchMagnitude(node);
+    if (ratio != null && magnitude != null && (largestRowMismatchNode == null || magnitude > largestRowMismatchNode.value)) {
+      largestRowMismatchNode = {
+        nodeId: node.id,
+        nodeType: node.node_type,
+        relation: node.relation,
+        value: magnitude,
+        ratio
+      };
+    }
+    if (isSequentialScan(node)) {
+      sequentialScans += 1;
+    }
+    if (isTempOperation(node)) {
+      tempOperations += 1;
+    }
+  }
+  return {
+    highestCostNode,
+    slowestNode,
+    largestRowMismatchNode,
+    sequentialScans,
+    tempOperations
+  };
+}
+function getExplainDriverLegend(plan) {
+  switch (plan.driver) {
+    case "postgres":
+      return plan.has_analyze_data ? [
+        "editor.visualExplain.postgresAnalyzeLegend1",
+        "editor.visualExplain.postgresAnalyzeLegend2"
+      ] : [
+        "editor.visualExplain.postgresEstimateLegend1",
+        "editor.visualExplain.postgresEstimateLegend2"
+      ];
+    case "mysql":
+      return plan.has_analyze_data ? [
+        "editor.visualExplain.mysqlAnalyzeLegend1",
+        "editor.visualExplain.mysqlAnalyzeLegend2"
+      ] : [
+        "editor.visualExplain.mysqlEstimateLegend1",
+        "editor.visualExplain.mysqlEstimateLegend2"
+      ];
+    case "sqlite":
+      return [
+        "editor.visualExplain.sqliteLegend1",
+        "editor.visualExplain.sqliteLegend2"
+      ];
+    default:
+      return [];
+  }
+}
+var KIND_ICONS = {
+  hotspot: Flame,
+  "over-estimate": TrendingUp,
+  "under-estimate": TrendingDown,
+  "disk-sort": HardDrive,
+  "filter-loss": Filter,
+  "large-seq-scan": ScanSearch,
+  "heap-fetches": Layers,
+  "workers-underused": Users,
+  "high-loops": Repeat,
+  "cache-miss": DatabaseZap,
+  "never-executed": CircleSlash
+};
+var SEVERITY_ICONS = {
+  critical: AlertTriangle,
+  warning: AlertTriangle,
+  info: Info
+};
+function severityChipClass(severity) {
+  switch (severity) {
+    case "critical":
+      return "border-red-500/40 bg-red-950/30 text-red-200";
+    case "warning":
+      return "border-amber-500/40 bg-amber-950/30 text-amber-200";
+    case "info":
+      return "border-default bg-surface-secondary/40 text-secondary";
+  }
+}
+function severityTextClass(severity) {
+  switch (severity) {
+    case "critical":
+      return "text-red-300";
+    case "warning":
+      return "text-amber-300";
+    case "info":
+      return "text-secondary";
+  }
+}
+function ExplainDiagnosticChips({
+  diagnostics,
+  iconsOnly = false,
+  className
+}) {
+  const { t } = useTranslation();
+  if (diagnostics.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: clsx("flex flex-wrap items-center gap-1", className), children: diagnostics.map((diagnostic) => {
+    const Icon = KIND_ICONS[diagnostic.kind];
+    const label = t(diagnostic.labelKey);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        title: `${label}${diagnostic.value ? ` (${diagnostic.value})` : ""} \u2014 ${t(diagnostic.descriptionKey)}`,
+        className: clsx(
+          "inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-[10px] leading-none",
+          severityChipClass(diagnostic.severity)
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { size: 10, className: "shrink-0" }),
+          !iconsOnly && /* @__PURE__ */ jsx("span", { className: "font-medium", children: label }),
+          diagnostic.value && /* @__PURE__ */ jsx("span", { className: "font-mono opacity-90", children: diagnostic.value })
+        ]
+      },
+      diagnostic.kind
+    );
+  }) });
+}
+function ExplainDiagnosticList({
+  diagnostics
+}) {
+  const { t } = useTranslation();
+  if (diagnostics.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "divide-y divide-default/40", children: diagnostics.map((diagnostic) => {
+    const Icon = SEVERITY_ICONS[diagnostic.severity];
+    return /* @__PURE__ */ jsxs("div", { className: "flex gap-2 px-4 py-2.5", children: [
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          size: 13,
+          className: clsx("mt-0.5 shrink-0", severityTextClass(diagnostic.severity))
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: clsx(
+                "text-[11px] font-semibold",
+                severityTextClass(diagnostic.severity)
+              ),
+              children: t(diagnostic.labelKey)
+            }
+          ),
+          diagnostic.value && /* @__PURE__ */ jsx("span", { className: "font-mono text-[11px] text-secondary", children: diagnostic.value })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 text-[11px] leading-relaxed text-muted", children: t(diagnostic.descriptionKey) })
+      ] })
+    ] }, diagnostic.kind);
+  }) });
+}
+var ExplainPlanNodeComponent = memo(
+  ({ data }) => {
+    const { t } = useTranslation();
+    const {
+      node,
+      metrics,
+      maxExclusiveCost,
+      maxExclusiveTimeMs,
+      diagnostics,
+      hasAnalyzeData,
+      isSelected
+    } = data;
+    const useTimeHeat = hasAnalyzeData && maxExclusiveTimeMs > 0;
+    const costStyle = useTimeHeat ? getNodeCostStyle(metrics?.exclusiveTimeMs ?? 0, maxExclusiveTimeMs) : getNodeCostStyle(metrics?.exclusiveCost ?? 0, maxExclusiveCost);
+    const rowRatio = getRowEstimateRatio(node);
+    const mismatch = rowRatio != null && (rowRatio >= 4 || rowRatio <= 0.25) ? rowRatio >= 1 ? {
+      value: formatRatio(rowRatio),
+      label: t("editor.visualExplain.overEstimate")
+    } : {
+      value: formatRatio(1 / rowRatio),
+      label: t("editor.visualExplain.underEstimate")
+    } : null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          "bg-elevated border border-strong rounded shadow-xl min-w-[260px] max-w-[300px] overflow-hidden transition-all",
+          "border-l-4",
+          costStyle.border,
+          isSelected && "ring-2 ring-blue-400/70 border-blue-400/70"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: clsx("px-3 py-2 border-b border-default", costStyle.headerBg), children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              metrics && /* @__PURE__ */ jsxs("span", { className: "shrink-0 rounded bg-surface-secondary/70 px-1.5 py-0.5 font-mono text-[10px] text-muted", children: [
+                "#",
+                metrics.index
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-bold text-primary", children: node.node_type })
+            ] }),
+            node.relation && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted mt-0.5", children: [
+              t("editor.visualExplain.relation"),
+              ": ",
+              node.relation
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 space-y-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted", children: t("editor.visualExplain.estRows") }),
+              /* @__PURE__ */ jsx("span", { className: "text-secondary font-mono", children: node.plan_rows != null ? formatRows(node.plan_rows) : "-" })
+            ] }),
+            metrics?.exclusiveCost != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted", children: t("editor.visualExplain.selfCost") }),
+              /* @__PURE__ */ jsx("span", { className: "text-secondary font-mono", children: formatCost(metrics.exclusiveCost) })
+            ] }),
+            mismatch && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted", children: t("editor.visualExplain.largestEstimateGap") }),
+              /* @__PURE__ */ jsx("span", { className: "text-amber-300 font-mono font-semibold", children: mismatch.value })
+            ] }),
+            hasAnalyzeData && node.actual_rows != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted", children: t("editor.visualExplain.actualRows") }),
+              /* @__PURE__ */ jsx("span", { className: "text-primary font-mono font-semibold", children: formatRows(node.actual_rows) })
+            ] }),
+            hasAnalyzeData && metrics?.exclusiveTimeMs != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted", children: t("editor.visualExplain.selfTime") }),
+              /* @__PURE__ */ jsxs("span", { className: "text-primary font-mono font-semibold", children: [
+                formatTime(metrics.exclusiveTimeMs),
+                metrics.timeShare != null && /* @__PURE__ */ jsxs("span", { className: "ml-1 text-muted font-normal", children: [
+                  "(",
+                  Math.round(metrics.timeShare * 100),
+                  "%)"
+                ] })
+              ] })
+            ] }),
+            hasAnalyzeData && metrics?.inclusiveTimeMs != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted", children: t("editor.visualExplain.totalTime") }),
+              /* @__PURE__ */ jsx("span", { className: "text-secondary font-mono", children: formatTime(metrics.inclusiveTimeMs) })
+            ] }),
+            hasAnalyzeData && node.actual_loops != null && node.actual_loops > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted", children: t("editor.visualExplain.loops") }),
+              /* @__PURE__ */ jsx("span", { className: "text-secondary font-mono", children: node.actual_loops })
+            ] }),
+            diagnostics.length > 0 && /* @__PURE__ */ jsx(
+              ExplainDiagnosticChips,
+              {
+                diagnostics,
+                className: "border-t border-default/50 pt-1.5"
+              }
+            ),
+            node.filter && /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-muted mt-1 font-mono truncate border-t border-default/50 pt-1", children: [
+              t("editor.visualExplain.filter"),
+              ": ",
+              node.filter
+            ] }),
+            node.index_condition && /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-muted font-mono truncate", children: [
+              t("editor.visualExplain.indexCondition"),
+              ": ",
+              node.index_condition
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Handle,
+            {
+              type: "target",
+              position: Position.Top,
+              className: "!w-2 !h-2 !bg-indigo-500 !border-strong"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Handle,
+            {
+              type: "source",
+              position: Position.Bottom,
+              className: "!w-2 !h-2 !bg-indigo-500 !border-strong"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var nodeTypes = {
+  explainPlan: ExplainPlanNodeComponent
+};
+function ExplainGraphInner({
+  plan,
+  metrics,
+  diagnostics,
+  selectedNodeId,
+  onSelectNode
+}) {
+  const { fitView } = useReactFlow();
+  const { nodes: initialNodes, edges: initialEdges } = useMemo(
+    () => explainPlanToFlow(plan, selectedNodeId, metrics, diagnostics),
+    [plan, selectedNodeId, metrics, diagnostics]
+  );
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  useEffect(() => {
+    setNodes(initialNodes);
+    setEdges(initialEdges);
+  }, [initialNodes, initialEdges, setNodes, setEdges]);
+  const handleInit = useCallback(() => {
+    setTimeout(() => fitView({ padding: 0.2 }), 50);
+  }, [fitView]);
+  return /* @__PURE__ */ jsxs(
+    ReactFlow,
+    {
+      nodes,
+      edges,
+      onNodesChange,
+      onEdgesChange,
+      nodeTypes,
+      onInit: handleInit,
+      onNodeClick: (_, node) => onSelectNode(node.id),
+      fitView: true,
+      proOptions: { hideAttribution: true },
+      minZoom: 0.1,
+      maxZoom: 2,
+      children: [
+        /* @__PURE__ */ jsx(Background, {}),
+        /* @__PURE__ */ jsx(Controls, {}),
+        nodes.length > 10 && /* @__PURE__ */ jsx(
+          MiniMap,
+          {
+            nodeStrokeWidth: 3,
+            className: "!bg-base !border-default"
+          }
+        )
+      ]
+    }
+  );
+}
+var ExplainGraph = ({
+  plan,
+  metrics,
+  diagnostics,
+  selectedNodeId,
+  onSelectNode
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
+    ExplainGraphInner,
+    {
+      plan,
+      metrics,
+      diagnostics,
+      selectedNodeId,
+      onSelectNode
+    }
+  ) }) });
+};
+function ExplainNodeDetails({
+  node,
+  hasAnalyzeData,
+  metrics = null,
+  diagnostics = []
+}) {
+  const { t } = useTranslation();
+  if (!node) {
+    return /* @__PURE__ */ jsx("div", { className: "p-4 text-xs text-muted", children: t("editor.visualExplain.selectNode") });
+  }
+  const generalEntries = [
+    [t("editor.visualExplain.nodeType"), node.node_type],
+    ...node.relation ? [[t("editor.visualExplain.relation"), node.relation]] : [],
+    ...node.startup_cost != null && node.total_cost != null ? [
+      [
+        t("editor.visualExplain.cost"),
+        `${formatCost(node.startup_cost)} - ${formatCost(node.total_cost)}`
+      ]
+    ] : node.total_cost != null ? [[t("editor.visualExplain.cost"), formatCost(node.total_cost)]] : [],
+    ...metrics?.exclusiveCost != null ? [
+      [
+        t("editor.visualExplain.selfCost"),
+        formatCost(metrics.exclusiveCost)
+      ]
+    ] : [],
+    ...node.plan_rows != null ? [[t("editor.visualExplain.estRows"), formatRows(node.plan_rows)]] : [],
+    ...node.filter ? [[t("editor.visualExplain.filter"), node.filter]] : [],
+    ...node.index_condition ? [[t("editor.visualExplain.indexCondition"), node.index_condition]] : [],
+    ...node.join_type ? [[t("editor.visualExplain.joinType"), node.join_type]] : [],
+    ...node.hash_condition ? [[t("editor.visualExplain.hashCondition"), node.hash_condition]] : []
+  ];
+  const analyzeEntries = hasAnalyzeData ? [
+    ...node.actual_rows != null ? [[t("editor.visualExplain.actualRows"), formatRows(node.actual_rows)]] : [],
+    ...metrics?.totalRows != null && node.actual_loops != null && node.actual_loops > 1 ? [
+      [
+        t("editor.visualExplain.rowsAllLoops"),
+        formatRows(metrics.totalRows)
+      ]
+    ] : [],
+    ...metrics?.exclusiveTimeMs != null ? [
+      [
+        t("editor.visualExplain.selfTime"),
+        metrics.timeShare != null ? `${formatTime(metrics.exclusiveTimeMs)} (${Math.round(metrics.timeShare * 100)}%)` : formatTime(metrics.exclusiveTimeMs)
+      ]
+    ] : [],
+    ...metrics?.inclusiveTimeMs != null ? [
+      [
+        t("editor.visualExplain.totalTime"),
+        formatTime(metrics.inclusiveTimeMs)
+      ]
+    ] : [],
+    ...node.actual_time_ms != null ? [
+      [
+        t("editor.visualExplain.timePerLoop"),
+        formatTime(node.actual_time_ms)
+      ]
+    ] : [],
+    ...node.actual_loops != null ? [[t("editor.visualExplain.loops"), String(node.actual_loops)]] : [],
+    ...node.buffers_hit != null ? [[t("editor.visualExplain.buffersHit"), String(node.buffers_hit)]] : [],
+    ...node.buffers_read != null ? [[t("editor.visualExplain.buffersRead"), String(node.buffers_read)]] : []
+  ] : [];
+  const extraEntries = Object.entries(node.extra).map(
+    ([key, value]) => [key, typeof value === "string" ? value : JSON.stringify(value)]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "text-xs", children: [
+    diagnostics.length > 0 && /* @__PURE__ */ jsxs("div", { className: "border-b border-default/60", children: [
+      /* @__PURE__ */ jsx("div", { className: "bg-base/60 px-4 py-3 text-[11px] font-semibold uppercase tracking-wide text-muted", children: t("editor.visualExplain.diagnostics.title") }),
+      /* @__PURE__ */ jsx(ExplainDiagnosticList, { diagnostics })
+    ] }),
+    /* @__PURE__ */ jsx(
+      DetailSection,
+      {
+        title: t("editor.visualExplain.general"),
+        entries: generalEntries
+      }
+    ),
+    analyzeEntries.length > 0 && /* @__PURE__ */ jsx(
+      DetailSection,
+      {
+        title: t("editor.visualExplain.analyzeData"),
+        entries: analyzeEntries
+      }
+    ),
+    extraEntries.length > 0 && /* @__PURE__ */ jsx(
+      DetailSection,
+      {
+        title: t("editor.visualExplain.extraDetails"),
+        entries: extraEntries
+      }
+    )
+  ] });
+}
+function DetailSection({ title, entries }) {
+  if (entries.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "border-b border-default/60 last:border-b-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-4 py-3 text-[11px] uppercase tracking-wide text-muted font-semibold bg-base/60", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "divide-y divide-default/40", children: entries.map(([label, value]) => /* @__PURE__ */ jsxs("div", { className: "px-4 py-2.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-[11px] text-muted mb-1", children: label }),
+      /* @__PURE__ */ jsx("div", { className: "text-secondary break-words font-mono leading-relaxed", children: value })
+    ] }, label)) })
+  ] });
+}
+function ExplainTableView({
+  plan,
+  metrics,
+  diagnostics,
+  selectedId,
+  onSelect
+}) {
+  const { t } = useTranslation();
+  const [expandedIds, setExpandedIds] = useState(
+    () => collectExpandedIds(plan.root)
+  );
+  useEffect(() => {
+    setExpandedIds(collectExpandedIds(plan.root));
+  }, [plan]);
+  const toggleExpand = useCallback((id) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+  const selectedNode = findExplainNode(plan.root, selectedId);
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto border-r border-default min-w-0", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-xs", children: [
+      /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 bg-base border-b border-default", children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { className: "text-left px-3 py-2 text-muted font-semibold whitespace-nowrap", children: "#" }),
+        /* @__PURE__ */ jsx("th", { className: "text-left px-3 py-2 text-muted font-semibold whitespace-nowrap", children: t("editor.visualExplain.nodeType") }),
+        /* @__PURE__ */ jsx("th", { className: "text-left px-3 py-2 text-muted font-semibold whitespace-nowrap", children: t("editor.visualExplain.relation") }),
+        /* @__PURE__ */ jsx("th", { className: "text-right px-3 py-2 text-muted font-semibold whitespace-nowrap", children: t("editor.visualExplain.cost") }),
+        /* @__PURE__ */ jsx("th", { className: "text-right px-3 py-2 text-muted font-semibold whitespace-nowrap", children: t("editor.visualExplain.estRows") }),
+        plan.has_analyze_data && /* @__PURE__ */ jsx("th", { className: "text-right px-3 py-2 text-muted font-semibold whitespace-nowrap", children: t("editor.visualExplain.actualRows") }),
+        /* @__PURE__ */ jsx("th", { className: "text-right px-3 py-2 text-muted font-semibold whitespace-nowrap", children: t("editor.visualExplain.selfTime") }),
+        /* @__PURE__ */ jsx("th", { className: "text-right px-3 py-2 text-muted font-semibold whitespace-nowrap", children: t("editor.visualExplain.largestEstimateGap") }),
+        /* @__PURE__ */ jsx("th", { className: "text-left px-3 py-2 text-muted font-semibold whitespace-nowrap", children: t("editor.visualExplain.filter") })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(
+        TreeRows,
+        {
+          node: plan.root,
+          depth: 0,
+          expandedIds,
+          selectedId,
+          onToggle: toggleExpand,
+          onSelect,
+          hasAnalyzeData: plan.has_analyze_data,
+          metrics,
+          diagnostics
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "w-[320px] shrink-0 overflow-y-auto bg-base/50", children: /* @__PURE__ */ jsx(
+      ExplainNodeDetails,
+      {
+        node: selectedNode,
+        hasAnalyzeData: plan.has_analyze_data,
+        metrics: selectedNode ? metrics.byId.get(selectedNode.id) ?? null : null,
+        diagnostics: selectedNode ? diagnostics.get(selectedNode.id) ?? [] : []
+      }
+    ) })
+  ] });
+}
+function TreeRows({
+  node,
+  depth,
+  expandedIds,
+  selectedId,
+  onToggle,
+  onSelect,
+  hasAnalyzeData,
+  metrics,
+  diagnostics
+}) {
+  const isExpanded = expandedIds.has(node.id);
+  const hasChildren = node.children.length > 0;
+  const isSelected = selectedId === node.id;
+  const nodeMetrics = metrics.byId.get(node.id);
+  const nodeDiagnostics = diagnostics.get(node.id) ?? [];
+  const costStr = node.startup_cost != null && node.total_cost != null ? `${formatCost(node.startup_cost)} - ${formatCost(node.total_cost)}` : node.total_cost != null ? formatCost(node.total_cost) : "-";
+  const timeStr = hasAnalyzeData && nodeMetrics?.exclusiveTimeMs != null ? formatTime(nodeMetrics.exclusiveTimeMs) : "-";
+  const rowsStr = node.plan_rows != null ? formatRows(node.plan_rows) : "-";
+  const actualRowsStr = hasAnalyzeData && node.actual_rows != null ? formatRows(node.actual_rows) : "-";
+  const rowRatio = getRowEstimateRatio(node);
+  const ratioStr = rowRatio != null ? rowRatio >= 1 ? formatRatio(rowRatio) : formatRatio(1 / rowRatio) : "-";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        className: clsx(
+          "cursor-pointer transition-colors border-b border-default/30",
+          isSelected ? "bg-blue-900/30" : "hover:bg-surface-hover"
+        ),
+        onClick: () => onSelect(node.id),
+        children: [
+          /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 font-mono text-[10px] text-muted whitespace-nowrap", children: nodeMetrics ? `#${nodeMetrics.index}` : "" }),
+          /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 whitespace-nowrap", children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center gap-1",
+              style: { paddingLeft: `${depth * 20}px` },
+              children: [
+                hasChildren ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onToggle(node.id);
+                    },
+                    className: "p-0.5 text-muted hover:text-primary",
+                    children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 12 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 12 })
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: "w-4" }),
+                /* @__PURE__ */ jsx("span", { className: "text-primary font-medium", children: node.node_type }),
+                nodeDiagnostics.length > 0 && /* @__PURE__ */ jsx(ExplainDiagnosticChips, { diagnostics: nodeDiagnostics, iconsOnly: true })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-secondary whitespace-nowrap", children: node.relation ?? "" }),
+          /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right text-secondary font-mono whitespace-nowrap", children: costStr }),
+          /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right text-secondary font-mono whitespace-nowrap", children: rowsStr }),
+          hasAnalyzeData && /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right text-secondary font-mono whitespace-nowrap", children: actualRowsStr }),
+          /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right text-secondary font-mono whitespace-nowrap", children: timeStr }),
+          /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right whitespace-nowrap", children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: clsx(
+                "font-mono",
+                rowRatio == null ? "text-secondary" : rowRatio >= 4 || rowRatio <= 0.25 ? "text-amber-300" : "text-secondary"
+              ),
+              children: ratioStr
+            }
+          ) }),
+          /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-muted truncate max-w-[200px]", children: node.filter ?? "" })
+        ]
+      }
+    ),
+    isExpanded && node.children.map((child) => /* @__PURE__ */ jsx(
+      TreeRows,
+      {
+        node: child,
+        depth: depth + 1,
+        expandedIds,
+        selectedId,
+        onToggle,
+        onSelect,
+        hasAnalyzeData,
+        metrics,
+        diagnostics
+      },
+      child.id
+    ))
+  ] });
+}
+function collectExpandedIds(root) {
+  const ids = /* @__PURE__ */ new Set();
+  function walk(node) {
+    ids.add(node.id);
+    for (const child of node.children) {
+      walk(child);
+    }
+  }
+  walk(root);
+  return ids;
+}
+var METRIC_LABEL_KEYS = {
+  time: "editor.visualExplain.selfTime",
+  rows: "editor.visualExplain.actualRows",
+  cost: "editor.visualExplain.selfCost",
+  buffers: "editor.visualExplain.buffers"
+};
+function formatMetricValue(value, kind) {
+  switch (kind) {
+    case "time":
+      return formatTime(value);
+    case "cost":
+      return formatCost(value);
+    case "rows":
+    case "buffers":
+      return formatRows(value);
+  }
+}
+function ExplainDiagramView({
+  plan,
+  metrics,
+  diagnostics,
+  selectedId,
+  onSelect
+}) {
+  const { t } = useTranslation();
+  const availableKinds = useMemo(
+    () => getAvailableMetricKinds(metrics),
+    [metrics]
+  );
+  const defaultKind = useMemo(() => getDefaultMetricKind(metrics), [metrics]);
+  const [requestedKind, setRequestedKind] = useState(
+    null
+  );
+  const metricKind = requestedKind != null && availableKinds.includes(requestedKind) ? requestedKind : defaultKind;
+  const rows = useMemo(() => {
+    const nodesById = new Map(
+      flattenExplainNodes(plan.root).map((node) => [node.id, node])
+    );
+    return metrics.order.flatMap((nodeMetrics) => {
+      const node = nodesById.get(nodeMetrics.nodeId);
+      return node ? [{ node, metrics: nodeMetrics }] : [];
+    });
+  }, [plan, metrics]);
+  const max = metricKind != null ? getMetricMax(metrics, metricKind) : 0;
+  const selectedNode = findExplainNode(plan.root, selectedId);
+  const handleSelect = useCallback(
+    (id) => {
+      onSelect(id);
+    },
+    [onSelect]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex flex-col border-r border-default", children: [
+      availableKinds.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-default bg-base/50 px-4 py-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[11px] uppercase tracking-wide text-muted font-semibold", children: t("editor.visualExplain.metric") }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 rounded-lg bg-surface-secondary p-0.5", children: availableKinds.map((kind) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setRequestedKind(kind),
+            className: clsx(
+              "rounded px-2 py-1 text-xs transition-colors",
+              metricKind === kind ? "bg-blue-900/40 text-blue-300" : "text-muted hover:text-primary"
+            ),
+            children: t(METRIC_LABEL_KEYS[kind])
+          },
+          kind
+        )) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: rows.length === 0 || metricKind == null ? /* @__PURE__ */ jsx("div", { className: "p-4 text-xs text-muted", children: t("editor.visualExplain.noMetricData") }) : /* @__PURE__ */ jsx("table", { className: "w-full text-xs", children: /* @__PURE__ */ jsx("tbody", { children: rows.map(({ node, metrics: nodeMetrics }) => {
+        const value = getMetricValue(nodeMetrics, metricKind);
+        const ratio = value != null && max > 0 ? value / max : 0;
+        const nodeDiagnostics = diagnostics.get(node.id) ?? [];
+        const isSelected = selectedId === node.id;
+        return /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            onClick: () => handleSelect(node.id),
+            className: clsx(
+              "cursor-pointer border-b border-default/30 transition-colors",
+              isSelected ? "bg-blue-900/30" : "hover:bg-surface-hover"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("td", { className: "w-10 px-3 py-1.5 align-top font-mono text-[10px] text-muted", children: [
+                "#",
+                nodeMetrics.index
+              ] }),
+              /* @__PURE__ */ jsx("td", { className: "px-1 py-1.5 align-top", children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: { paddingLeft: `${nodeMetrics.depth * 12}px` },
+                  className: "min-w-0",
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "truncate font-medium text-primary", children: node.node_type }),
+                    node.relation && /* @__PURE__ */ jsx("div", { className: "truncate text-[11px] text-muted", children: node.relation }),
+                    nodeDiagnostics.length > 0 && /* @__PURE__ */ jsx(
+                      ExplainDiagnosticChips,
+                      {
+                        diagnostics: nodeDiagnostics,
+                        iconsOnly: true,
+                        className: "mt-1"
+                      }
+                    )
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx("td", { className: "w-1/2 px-3 py-1.5 align-middle", children: /* @__PURE__ */ jsx("div", { className: "h-2.5 w-full overflow-hidden rounded bg-surface-secondary/60", children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: clsx(
+                    "h-full rounded transition-all",
+                    getHeatBarClass(value ?? 0, max)
+                  ),
+                  style: {
+                    width: `${Math.min(100, Math.max(ratio * 100, value != null && value > 0 ? 1 : 0))}%`
+                  }
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx("td", { className: "w-24 whitespace-nowrap px-3 py-1.5 text-right align-middle font-mono text-secondary", children: value != null ? formatMetricValue(value, metricKind) : "-" })
+            ]
+          },
+          node.id
+        );
+      }) }) }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "w-[320px] shrink-0 overflow-y-auto bg-base/50", children: /* @__PURE__ */ jsx(
+      ExplainNodeDetails,
+      {
+        node: selectedNode,
+        hasAnalyzeData: plan.has_analyze_data,
+        metrics: selectedNode ? metrics.byId.get(selectedNode.id) ?? null : null,
+        diagnostics: selectedNode ? diagnostics.get(selectedNode.id) ?? [] : []
+      }
+    ) })
+  ] });
+}
+
+// src/stats.ts
+function addTo(sum, value) {
+  if (value != null) {
+    sum.total += value;
+    sum.hasData = true;
+  }
+}
+function resolve(sum) {
+  return sum.hasData ? sum.total : null;
+}
+function newSum() {
+  return { total: 0, hasData: false };
+}
+function indexNameOf(node) {
+  const value = node.extra["Index Name"];
+  return typeof value === "string" && value.length > 0 ? value : null;
+}
+function getExplainPlanStats(plan, metrics) {
+  const nodes = flattenExplainNodes(plan.root);
+  const byNodeType = /* @__PURE__ */ new Map();
+  const byRelation = /* @__PURE__ */ new Map();
+  const byIndex = /* @__PURE__ */ new Map();
+  let maxDepth = 0;
+  let neverExecutedCount = 0;
+  const totalTime = newSum();
+  for (const node of nodes) {
+    const nodeMetrics = metrics.byId.get(node.id);
+    const exclusiveTimeMs = nodeMetrics?.exclusiveTimeMs ?? null;
+    maxDepth = Math.max(maxDepth, (nodeMetrics?.depth ?? 0) + 1);
+    if (nodeMetrics?.neverExecuted) {
+      neverExecutedCount += 1;
+    }
+    addTo(totalTime, exclusiveTimeMs);
+    const typeStat = byNodeType.get(node.node_type) ?? {
+      count: 0,
+      time: newSum()
+    };
+    typeStat.count += 1;
+    addTo(typeStat.time, exclusiveTimeMs);
+    byNodeType.set(node.node_type, typeStat);
+    if (node.relation) {
+      const relationStat = byRelation.get(node.relation) ?? {
+        accessCount: 0,
+        nodeTypes: [],
+        time: newSum(),
+        rows: newSum()
+      };
+      relationStat.accessCount += 1;
+      if (!relationStat.nodeTypes.includes(node.node_type)) {
+        relationStat.nodeTypes.push(node.node_type);
+      }
+      addTo(relationStat.time, exclusiveTimeMs);
+      addTo(relationStat.rows, nodeMetrics?.totalRows ?? null);
+      byRelation.set(node.relation, relationStat);
+    }
+    const indexName = indexNameOf(node);
+    if (indexName) {
+      const indexStat = byIndex.get(indexName) ?? {
+        relation: node.relation,
+        scanCount: 0,
+        time: newSum()
+      };
+      indexStat.scanCount += 1;
+      indexStat.relation = indexStat.relation ?? node.relation;
+      addTo(indexStat.time, exclusiveTimeMs);
+      byIndex.set(indexName, indexStat);
+    }
+  }
+  const planTotalTime = resolve(totalTime);
+  const nodeTypes2 = Array.from(byNodeType.entries()).map(([nodeType, stat]) => {
+    const exclusiveTimeMs = resolve(stat.time);
+    return {
+      nodeType,
+      count: stat.count,
+      exclusiveTimeMs,
+      timeShare: exclusiveTimeMs != null && planTotalTime != null && planTotalTime > 0 ? exclusiveTimeMs / planTotalTime : null
+    };
+  }).sort(compareByTimeThenCount);
+  const relations = Array.from(byRelation.entries()).map(([relation, stat]) => ({
+    relation,
+    accessCount: stat.accessCount,
+    nodeTypes: stat.nodeTypes,
+    exclusiveTimeMs: resolve(stat.time),
+    totalRows: resolve(stat.rows)
+  })).sort(
+    (a, b) => (b.exclusiveTimeMs ?? 0) - (a.exclusiveTimeMs ?? 0) || b.accessCount - a.accessCount || a.relation.localeCompare(b.relation)
+  );
+  const indexes = Array.from(byIndex.entries()).map(([indexName, stat]) => ({
+    indexName,
+    relation: stat.relation,
+    scanCount: stat.scanCount,
+    exclusiveTimeMs: resolve(stat.time)
+  })).sort(
+    (a, b) => (b.exclusiveTimeMs ?? 0) - (a.exclusiveTimeMs ?? 0) || b.scanCount - a.scanCount || a.indexName.localeCompare(b.indexName)
+  );
+  return {
+    nodeCount: nodes.length,
+    maxDepth,
+    neverExecutedCount,
+    totalExclusiveTimeMs: planTotalTime,
+    nodeTypes: nodeTypes2,
+    relations,
+    indexes
+  };
+}
+function compareByTimeThenCount(a, b) {
+  return (b.exclusiveTimeMs ?? 0) - (a.exclusiveTimeMs ?? 0) || b.count - a.count || a.nodeType.localeCompare(b.nodeType);
+}
+function ExplainStatsView({ plan, metrics }) {
+  const { t } = useTranslation();
+  const stats = useMemo(
+    () => getExplainPlanStats(plan, metrics),
+    [plan, metrics]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "h-full overflow-y-auto px-4 py-3 text-xs", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsx(
+        StatTile,
+        {
+          label: t("editor.visualExplain.stats.nodeCount"),
+          value: String(stats.nodeCount)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatTile,
+        {
+          label: t("editor.visualExplain.stats.maxDepth"),
+          value: String(stats.maxDepth)
+        }
+      ),
+      stats.totalExclusiveTimeMs != null && /* @__PURE__ */ jsx(
+        StatTile,
+        {
+          label: t("editor.visualExplain.stats.totalSelfTime"),
+          value: formatTime(stats.totalExclusiveTimeMs)
+        }
+      ),
+      stats.neverExecutedCount > 0 && /* @__PURE__ */ jsx(
+        StatTile,
+        {
+          label: t("editor.visualExplain.stats.neverExecutedNodes"),
+          value: String(stats.neverExecutedCount)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(StatsSection, { title: t("editor.visualExplain.stats.byNodeType"), children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx(
+        StatsHeaderRow,
+        {
+          columns: [
+            { key: "type", label: t("editor.visualExplain.nodeType") },
+            { key: "count", label: t("editor.visualExplain.stats.count"), align: "right" },
+            { key: "time", label: t("editor.visualExplain.selfTime"), align: "right" },
+            { key: "share", label: t("editor.visualExplain.stats.share") }
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx("tbody", { children: stats.nodeTypes.map((entry) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-default/25", children: [
+        /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-primary", children: entry.nodeType }),
+        /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right font-mono text-secondary", children: entry.count }),
+        /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right font-mono text-secondary", children: entry.exclusiveTimeMs != null ? formatTime(entry.exclusiveTimeMs) : "-" }),
+        /* @__PURE__ */ jsx("td", { className: "w-1/3 px-3 py-1.5", children: /* @__PURE__ */ jsx(ShareBar, { share: entry.timeShare }) })
+      ] }, entry.nodeType)) })
+    ] }) }),
+    stats.relations.length > 0 && /* @__PURE__ */ jsx(StatsSection, { title: t("editor.visualExplain.stats.byRelation"), children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx(
+        StatsHeaderRow,
+        {
+          columns: [
+            { key: "relation", label: t("editor.visualExplain.relation") },
+            {
+              key: "accesses",
+              label: t("editor.visualExplain.stats.accesses"),
+              align: "right"
+            },
+            { key: "ops", label: t("editor.visualExplain.stats.operations") },
+            {
+              key: "rows",
+              label: t("editor.visualExplain.actualRows"),
+              align: "right"
+            },
+            {
+              key: "time",
+              label: t("editor.visualExplain.selfTime"),
+              align: "right"
+            }
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx("tbody", { children: stats.relations.map((entry) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-default/25", children: [
+        /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 font-mono text-primary", children: entry.relation }),
+        /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right font-mono text-secondary", children: entry.accessCount }),
+        /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-muted", children: entry.nodeTypes.join(", ") }),
+        /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right font-mono text-secondary", children: entry.totalRows != null ? formatRows(entry.totalRows) : "-" }),
+        /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right font-mono text-secondary", children: entry.exclusiveTimeMs != null ? formatTime(entry.exclusiveTimeMs) : "-" })
+      ] }, entry.relation)) })
+    ] }) }),
+    stats.indexes.length > 0 && /* @__PURE__ */ jsx(StatsSection, { title: t("editor.visualExplain.stats.byIndex"), children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx(
+        StatsHeaderRow,
+        {
+          columns: [
+            { key: "index", label: t("editor.visualExplain.stats.indexName") },
+            { key: "relation", label: t("editor.visualExplain.relation") },
+            {
+              key: "scans",
+              label: t("editor.visualExplain.stats.scans"),
+              align: "right"
+            },
+            {
+              key: "time",
+              label: t("editor.visualExplain.selfTime"),
+              align: "right"
+            }
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx("tbody", { children: stats.indexes.map((entry) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-default/25", children: [
+        /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 font-mono text-primary", children: entry.indexName }),
+        /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 font-mono text-secondary", children: entry.relation ?? "-" }),
+        /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right font-mono text-secondary", children: entry.scanCount }),
+        /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right font-mono text-secondary", children: entry.exclusiveTimeMs != null ? formatTime(entry.exclusiveTimeMs) : "-" })
+      ] }, entry.indexName)) })
+    ] }) })
+  ] });
+}
+function StatTile({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-[130px] rounded-xl border border-default bg-surface-secondary/20 px-3 py-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-[0.14em] text-muted", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1 font-mono text-sm font-semibold text-primary", children: value })
+  ] });
+}
+function StatsSection({ title, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 overflow-hidden rounded-xl border border-default", children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-default bg-base/60 px-3 py-2 text-[11px] font-semibold uppercase tracking-wide text-muted", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children })
+  ] });
+}
+function StatsHeaderRow({ columns }) {
+  return /* @__PURE__ */ jsx("tr", { className: "border-b border-default/60", children: columns.map((column) => /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: clsx(
+        "whitespace-nowrap px-3 py-1.5 font-semibold text-muted",
+        column.align === "right" ? "text-right" : "text-left"
+      ),
+      children: column.label
+    },
+    column.key
+  )) });
+}
+function ShareBar({ share }) {
+  if (share == null) {
+    return /* @__PURE__ */ jsx("span", { className: "text-muted", children: "-" });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-2 flex-1 overflow-hidden rounded bg-surface-secondary/60", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-full rounded bg-blue-500/70",
+        style: { width: `${Math.min(100, share * 100)}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("span", { className: "w-10 shrink-0 text-right font-mono text-[11px] text-muted", children: [
+      Math.round(share * 100),
+      "%"
+    ] })
+  ] });
+}
+function ExplainOverviewBar({
+  plan,
+  metrics,
+  onSelectNode
+}) {
+  const { t } = useTranslation();
+  const summary = useMemo(
+    () => getExplainPlanSummary(plan, metrics),
+    [plan, metrics]
+  );
+  const legend = useMemo(() => getExplainDriverLegend(plan), [plan]);
+  const [overviewExpanded, setOverviewExpanded] = useState(true);
+  const findings = [
+    summary.highestCostNode && {
+      key: "highest-cost",
+      label: t("editor.visualExplain.highestSelfCost"),
+      value: formatCost(summary.highestCostNode.value),
+      description: formatNodeLabel(
+        summary.highestCostNode.nodeType,
+        summary.highestCostNode.relation
+      ),
+      nodeId: summary.highestCostNode.nodeId,
+      icon: Layers2,
+      tone: "blue"
+    },
+    summary.slowestNode && {
+      key: "slowest-step",
+      label: t("editor.visualExplain.slowestSelfStep"),
+      value: formatTime(summary.slowestNode.value),
+      description: formatNodeLabel(
+        summary.slowestNode.nodeType,
+        summary.slowestNode.relation
+      ),
+      nodeId: summary.slowestNode.nodeId,
+      icon: Clock3,
+      tone: "amber"
+    },
+    summary.largestRowMismatchNode?.ratio != null && {
+      key: "estimate-gap",
+      label: t("editor.visualExplain.largestEstimateGap"),
+      value: formatRatio(summary.largestRowMismatchNode.value),
+      description: t(
+        summary.largestRowMismatchNode.ratio >= 1 ? "editor.visualExplain.overEstimate" : "editor.visualExplain.underEstimate"
+      ),
+      nodeId: summary.largestRowMismatchNode.nodeId,
+      icon: AlertTriangle,
+      tone: "red"
+    },
+    summary.sequentialScans > 0 && {
+      key: "sequential-scans",
+      label: t("editor.visualExplain.sequentialScans"),
+      value: String(summary.sequentialScans),
+      description: t("editor.visualExplain.scanOperations"),
+      nodeId: summary.highestCostNode?.nodeId ?? plan.root.id,
+      icon: ScanSearch,
+      tone: "amber"
+    },
+    summary.tempOperations > 0 && {
+      key: "temp-operations",
+      label: t("editor.visualExplain.tempOperations"),
+      value: String(summary.tempOperations),
+      description: t("editor.visualExplain.sortOrTempOperations"),
+      nodeId: summary.slowestNode?.nodeId ?? plan.root.id,
+      icon: Database,
+      tone: "purple"
+    }
+  ].filter(Boolean);
+  return /* @__PURE__ */ jsx("div", { className: "border-b border-default bg-base/40 px-4 py-2", children: /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-default bg-surface-secondary/20 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setOverviewExpanded((prev) => !prev),
+        className: "w-full flex items-center gap-3 px-3 py-2.5 hover:bg-surface-secondary/35 transition-colors",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "p-1.5 rounded-md bg-blue-900/25 text-blue-300", children: /* @__PURE__ */ jsx(LayoutDashboard, { size: 13 }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 text-left", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-[11px] uppercase tracking-[0.14em] text-muted font-semibold", children: t("editor.visualExplain.overview") }),
+            /* @__PURE__ */ jsxs("div", { className: "text-xs text-secondary", children: [
+              findings.length,
+              " ",
+              t("editor.visualExplain.topIssues").toLowerCase(),
+              legend.length > 0 ? ` \u2022 ${legend.length} ${t("editor.visualExplain.driverNotes").toLowerCase()}` : ""
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2 text-[11px] text-muted", children: [
+            /* @__PURE__ */ jsx("span", { children: overviewExpanded ? t("editor.visualExplain.hideOverview") : t("editor.visualExplain.showOverview") }),
+            overviewExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+          ] })
+        ]
+      }
+    ),
+    overviewExpanded && /* @__PURE__ */ jsxs("div", { className: "px-3 pb-3 space-y-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: findings.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-xs text-secondary", children: t("editor.visualExplain.noIssues") }) : findings.map((finding) => {
+        if (!finding) {
+          return null;
+        }
+        const Icon = finding.icon;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onSelectNode(finding.nodeId),
+            className: clsx(
+              "min-w-[170px] flex items-start gap-2 rounded-xl border px-3 py-2 text-left transition-colors",
+              getToneClass(finding.tone)
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Icon, { size: 14, className: "mt-0.5 shrink-0" }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-[0.14em] opacity-80", children: finding.label }),
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold leading-tight mt-1", children: finding.value }),
+                /* @__PURE__ */ jsx("div", { className: "text-[11px] opacity-80 mt-1", children: finding.description })
+              ] })
+            ]
+          },
+          finding.key
+        );
+      }) }),
+      legend.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-default bg-base/45 px-3 py-2.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "p-1.5 rounded-md bg-cyan-900/30 text-cyan-300", children: /* @__PURE__ */ jsx(BookOpenText, { size: 13 }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] uppercase tracking-[0.14em] text-muted font-semibold", children: t("editor.visualExplain.driverNotes") })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-1.5", children: legend.map((entry) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-start gap-2 text-xs text-secondary leading-relaxed max-w-[720px]",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "mt-[6px] h-1.5 w-1.5 shrink-0 rounded-full bg-cyan-400/80" }),
+              /* @__PURE__ */ jsx("span", { children: t(entry) })
+            ]
+          },
+          entry
+        )) })
+      ] })
+    ] })
+  ] }) });
+}
+function formatNodeLabel(nodeType, relation) {
+  return relation ? `${nodeType} \xB7 ${relation}` : nodeType;
+}
+function getToneClass(tone) {
+  switch (tone) {
+    case "blue":
+      return "border-blue-500/30 bg-blue-950/20 text-blue-200 hover:bg-blue-950/30";
+    case "amber":
+      return "border-amber-500/30 bg-amber-950/20 text-amber-200 hover:bg-amber-950/30";
+    case "red":
+      return "border-red-500/30 bg-red-950/20 text-red-200 hover:bg-red-950/30";
+    case "purple":
+      return "border-fuchsia-500/30 bg-fuchsia-950/20 text-fuchsia-200 hover:bg-fuchsia-950/30";
+  }
+}
+var ExplainSummaryBar = memo(
+  ({ plan, viewMode, onViewModeChange, aiEnabled }) => {
+    const { t } = useTranslation();
+    if (!plan) return null;
+    const maxCost = getMaxCost(plan.root);
+    const toggleButtonClass = (mode) => `flex items-center gap-1.5 px-2 py-1 rounded text-xs transition-colors ${viewMode === mode ? mode === "ai" ? "bg-purple-900/40 text-purple-300" : "bg-blue-900/40 text-blue-300" : "text-muted hover:text-primary"}`;
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 px-4 py-2 border-b border-default bg-base/50 text-xs", children: [
+      plan.planning_time_ms != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted", children: [
+          t("editor.visualExplain.planningTime"),
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-primary font-mono font-semibold", children: formatTime(plan.planning_time_ms) })
+      ] }),
+      plan.execution_time_ms != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted", children: [
+          t("editor.visualExplain.executionTime"),
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-primary font-mono font-semibold", children: formatTime(plan.execution_time_ms) })
+      ] }),
+      maxCost > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted", children: [
+          t("editor.visualExplain.totalCost"),
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-primary font-mono font-semibold", children: formatCost(maxCost) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 bg-surface-secondary rounded-lg p-0.5", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onViewModeChange("graph"),
+            className: toggleButtonClass("graph"),
+            children: [
+              /* @__PURE__ */ jsx(Network, { size: 12 }),
+              t("editor.visualExplain.graphView")
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onViewModeChange("diagram"),
+            className: toggleButtonClass("diagram"),
+            children: [
+              /* @__PURE__ */ jsx(BarChart3, { size: 12 }),
+              t("editor.visualExplain.diagramView")
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onViewModeChange("table"),
+            className: toggleButtonClass("table"),
+            children: [
+              /* @__PURE__ */ jsx(TableProperties, { size: 12 }),
+              t("editor.visualExplain.tableView")
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onViewModeChange("stats"),
+            className: toggleButtonClass("stats"),
+            children: [
+              /* @__PURE__ */ jsx(PieChart, { size: 12 }),
+              t("editor.visualExplain.statsView")
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onViewModeChange("raw"),
+            className: toggleButtonClass("raw"),
+            children: [
+              /* @__PURE__ */ jsx(FileText, { size: 12 }),
+              t("editor.visualExplain.rawOutput")
+            ]
+          }
+        ),
+        aiEnabled && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onViewModeChange("ai"),
+            className: toggleButtonClass("ai"),
+            children: [
+              /* @__PURE__ */ jsx(Sparkles, { size: 12 }),
+              t("editor.visualExplain.aiAnalysis")
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+
+export { ExplainDiagnosticChips, ExplainDiagnosticList, ExplainDiagramView, ExplainGraph, ExplainNodeDetails, ExplainOverviewBar, ExplainPlanNodeComponent, ExplainStatsView, ExplainSummaryBar, ExplainTableView };