@tabularis/explain 0.2.0 → 0.3.0

package/dist/react.js

@@ -1,9 +1,9 @@
-import { memo, useState, useEffect, useCallback, useMemo } from 'react';
+import { memo, useCallback, useState, useRef, useEffect, 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 { Network, BarChart3, TableProperties, PieChart, FileText, Sparkles, CircleSlash, DatabaseZap, Repeat, Users, Layers, ScanSearch, Filter, HardDrive, TrendingDown, TrendingUp, Flame, Info, AlertTriangle, Check, Copy, RotateCcw, Download, Layers2, Clock3, Database, LayoutDashboard, ChevronDown, ChevronRight, BookOpenText } from 'lucide-react';
 import clsx from 'clsx';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -87,16 +87,10 @@ function computeExplainMetrics(plan) {
   let maxExclusiveBuffers = 0;
   let totalExclusiveTimeMs = 0;
   for (const metrics of order) {
-    maxExclusiveTimeMs = Math.max(
-      maxExclusiveTimeMs,
-      metrics.exclusiveTimeMs ?? 0
-    );
+    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
-    );
+    maxExclusiveBuffers = Math.max(maxExclusiveBuffers, metrics.exclusiveBuffers ?? 0);
     totalExclusiveTimeMs += metrics.exclusiveTimeMs ?? 0;
   }
   if (totalExclusiveTimeMs > 0) {
@@ -295,7 +289,7 @@ function getRowEstimateRatio(node) {
   }
   return node.actual_rows / node.plan_rows;
 }
-function getMismatchMagnitude(node) {
+function getRowEstimateGap(node) {
   const ratio = getRowEstimateRatio(node);
   if (ratio == null) {
     return null;
@@ -341,7 +335,7 @@ function getExplainPlanSummary(plan, metrics) {
       };
     }
     const ratio = getRowEstimateRatio(node);
-    const magnitude = getMismatchMagnitude(node);
+    const magnitude = getRowEstimateGap(node);
     if (ratio != null && magnitude != null && (largestRowMismatchNode == null || magnitude > largestRowMismatchNode.value)) {
       largestRowMismatchNode = {
         nodeId: node.id,
@@ -385,14 +379,27 @@ function getExplainDriverLegend(plan) {
         "editor.visualExplain.mysqlEstimateLegend2"
       ];
     case "sqlite":
-      return [
-        "editor.visualExplain.sqliteLegend1",
-        "editor.visualExplain.sqliteLegend2"
-      ];
+      return ["editor.visualExplain.sqliteLegend1", "editor.visualExplain.sqliteLegend2"];
     default:
       return [];
   }
 }
+function getExplainTableRow(node, hasAnalyzeData, nodeMetrics, fallbackIndex = 1) {
+  return {
+    index: nodeMetrics?.index ?? fallbackIndex,
+    depth: nodeMetrics?.depth ?? 0,
+    nodeType: node.node_type,
+    relation: node.relation ?? null,
+    startupCost: node.startup_cost ?? null,
+    totalCost: node.total_cost ?? null,
+    planRows: node.plan_rows ?? null,
+    actualRows: hasAnalyzeData ? node.actual_rows ?? null : null,
+    actualLoops: hasAnalyzeData ? node.actual_loops ?? null : null,
+    exclusiveTimeMs: hasAnalyzeData ? nodeMetrics?.exclusiveTimeMs ?? null : null,
+    estimateGap: getRowEstimateGap(node),
+    filter: node.filter ?? null
+  };
+}
 var KIND_ICONS = {
   hotspot: Flame,
   "over-estimate": TrendingUp,
@@ -461,9 +468,7 @@ function ExplainDiagnosticChips({
     );
   }) });
 }
-function ExplainDiagnosticList({
-  diagnostics
-}) {
+function ExplainDiagnosticList({ diagnostics }) {
   const { t } = useTranslation();
   if (diagnostics.length === 0) {
     return null;
@@ -475,7 +480,10 @@ function ExplainDiagnosticList({
         Icon,
         {
           size: 13,
-          className: clsx("mt-0.5 shrink-0", severityTextClass(diagnostic.severity))
+          className: clsx(
+            "mt-0.5 shrink-0",
+            severityTextClass(diagnostic.severity)
+          )
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
@@ -497,127 +505,125 @@ function ExplainDiagnosticList({
     ] }, 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 })
+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
             ] }),
-            node.relation && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted mt-0.5", children: [
-              t("editor.visualExplain.relation"),
-              ": ",
-              node.relation
-            ] })
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-bold text-primary", children: node.node_type })
           ] }),
-          /* @__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),
-                  "%)"
-                ] })
+          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,
+          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,
             {
-              type: "target",
-              position: Position.Top,
-              className: "!w-2 !h-2 !bg-indigo-500 !border-strong"
+              diagnostics,
+              className: "border-t border-default/50 pt-1.5"
             }
           ),
-          /* @__PURE__ */ jsx(
-            Handle,
-            {
-              type: "source",
-              position: Position.Bottom,
-              className: "!w-2 !h-2 !bg-indigo-500 !border-strong"
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+          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
 };
@@ -659,13 +665,7 @@ function ExplainGraphInner({
       children: [
         /* @__PURE__ */ jsx(Background, {}),
         /* @__PURE__ */ jsx(Controls, {}),
-        nodes.length > 10 && /* @__PURE__ */ jsx(
-          MiniMap,
-          {
-            nodeStrokeWidth: 3,
-            className: "!bg-base !border-default"
-          }
-        )
+        nodes.length > 10 && /* @__PURE__ */ jsx(MiniMap, { nodeStrokeWidth: 3, className: "!bg-base !border-default" })
       ]
     }
   );
@@ -688,96 +688,340 @@ var ExplainGraph = ({
     }
   ) }) });
 };
-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") });
+
+// src/tableColumns.ts
+var EXPLAIN_TABLE_COLUMNS = [
+  "operation",
+  "relation",
+  "cost",
+  "estRows",
+  "actualRows",
+  "loops",
+  "selfTime",
+  "estimateGap",
+  "filter"
+];
+var EXPLAIN_TABLE_ANALYZE_COLUMNS = /* @__PURE__ */ new Set([
+  "actualRows",
+  "loops"
+]);
+function isExplainTableColumnId(value) {
+  return typeof value === "string" && EXPLAIN_TABLE_COLUMNS.includes(value);
+}
+function normalizeExplainTableColumnOrder(saved) {
+  const order = [];
+  if (Array.isArray(saved)) {
+    for (const id of saved) {
+      if (isExplainTableColumnId(id) && !order.includes(id)) order.push(id);
+    }
   }
+  EXPLAIN_TABLE_COLUMNS.forEach((id, defaultIndex) => {
+    if (order.includes(id)) return;
+    const previous = EXPLAIN_TABLE_COLUMNS.slice(0, defaultIndex).reverse();
+    const anchor = previous.find((candidate) => order.includes(candidate));
+    order.splice(anchor ? order.indexOf(anchor) + 1 : 0, 0, id);
+  });
+  return order;
+}
+function moveExplainTableColumn(order, column, target) {
+  const from = order.indexOf(column);
+  const to = order.indexOf(target);
+  if (from === -1 || to === -1 || from === to) return order;
+  const next = order.filter((id) => id !== column);
+  next.splice(to, 0, column);
+  return next;
+}
+function shiftExplainTableColumn(order, column, direction, visible = order) {
+  const shown = order.filter((id) => visible.includes(id));
+  const at = shown.indexOf(column);
+  const neighbour = at === -1 ? void 0 : shown[at + direction];
+  return neighbour ? moveExplainTableColumn(order, column, neighbour) : order;
+}
+function isDefaultExplainTableColumnOrder(order) {
+  return order.length === EXPLAIN_TABLE_COLUMNS.length && order.every((id, index) => id === EXPLAIN_TABLE_COLUMNS[index]);
+}
+
+// src/nodeDetails.ts
+var DEFAULT_LABELS = {
+  "editor.visualExplain.nodeType": "Operation",
+  "editor.visualExplain.relation": "Table",
+  "editor.visualExplain.cost": "Cost",
+  "editor.visualExplain.selfCost": "Self Cost",
+  "editor.visualExplain.estRows": "Est. Rows",
+  "editor.visualExplain.filter": "Filter",
+  "editor.visualExplain.indexCondition": "Index Cond.",
+  "editor.visualExplain.joinType": "Join Type",
+  "editor.visualExplain.hashCondition": "Hash Cond.",
+  "editor.visualExplain.actualRows": "Actual Rows",
+  "editor.visualExplain.rowsAllLoops": "Rows (All Loops)",
+  "editor.visualExplain.selfTime": "Self Time",
+  "editor.visualExplain.totalTime": "Total Time",
+  "editor.visualExplain.timePerLoop": "Time per Loop",
+  "editor.visualExplain.loops": "Loops",
+  "editor.visualExplain.buffersHit": "Buffers Hit",
+  "editor.visualExplain.buffersRead": "Buffers Read",
+  "editor.visualExplain.general": "General",
+  "editor.visualExplain.analyzeData": "Analyze Data",
+  "editor.visualExplain.extraDetails": "Extra",
+  "editor.visualExplain.diagnostics.title": "Diagnostics"
+};
+function getExplainNodeDetailSections(node, options = {}) {
+  const { hasAnalyzeData = false, metrics = null, diagnostics = [], t } = options;
+  const tr = (key, fallback) => {
+    if (t) {
+      return t(key, fallback ?? DEFAULT_LABELS[key] ?? key);
+    }
+    return fallback ?? DEFAULT_LABELS[key] ?? key;
+  };
   const generalEntries = [
-    [t("editor.visualExplain.nodeType"), node.node_type],
-    ...node.relation ? [[t("editor.visualExplain.relation"), node.relation]] : [],
+    { label: tr("editor.visualExplain.nodeType", "Operation"), value: node.node_type },
+    ...node.relation ? [{ label: tr("editor.visualExplain.relation", "Table"), value: 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)]] : [],
+      {
+        label: tr("editor.visualExplain.cost", "Cost"),
+        value: `${formatCost(node.startup_cost)} - ${formatCost(node.total_cost)}`
+      }
+    ] : node.total_cost != null ? [
+      {
+        label: tr("editor.visualExplain.cost", "Cost"),
+        value: formatCost(node.total_cost)
+      }
+    ] : [],
     ...metrics?.exclusiveCost != null ? [
-      [
-        t("editor.visualExplain.selfCost"),
-        formatCost(metrics.exclusiveCost)
-      ]
+      {
+        label: tr("editor.visualExplain.selfCost", "Self Cost"),
+        value: 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]] : []
+    ...node.plan_rows != null ? [
+      {
+        label: tr("editor.visualExplain.estRows", "Est. Rows"),
+        value: formatRows(node.plan_rows)
+      }
+    ] : [],
+    ...node.filter ? [{ label: tr("editor.visualExplain.filter", "Filter"), value: node.filter }] : [],
+    ...node.index_condition ? [
+      {
+        label: tr("editor.visualExplain.indexCondition", "Index Cond."),
+        value: node.index_condition
+      }
+    ] : [],
+    ...node.join_type ? [{ label: tr("editor.visualExplain.joinType", "Join Type"), value: node.join_type }] : [],
+    ...node.hash_condition ? [
+      {
+        label: tr("editor.visualExplain.hashCondition", "Hash Cond."),
+        value: node.hash_condition
+      }
+    ] : []
   ];
   const analyzeEntries = hasAnalyzeData ? [
-    ...node.actual_rows != null ? [[t("editor.visualExplain.actualRows"), formatRows(node.actual_rows)]] : [],
+    ...node.actual_rows != null ? [
+      {
+        label: tr("editor.visualExplain.actualRows", "Actual Rows"),
+        value: formatRows(node.actual_rows)
+      }
+    ] : [],
     ...metrics?.totalRows != null && node.actual_loops != null && node.actual_loops > 1 ? [
-      [
-        t("editor.visualExplain.rowsAllLoops"),
-        formatRows(metrics.totalRows)
-      ]
+      {
+        label: tr("editor.visualExplain.rowsAllLoops", "Rows (All Loops)"),
+        value: formatRows(metrics.totalRows)
+      }
     ] : [],
     ...metrics?.exclusiveTimeMs != null ? [
-      [
-        t("editor.visualExplain.selfTime"),
-        metrics.timeShare != null ? `${formatTime(metrics.exclusiveTimeMs)} (${Math.round(metrics.timeShare * 100)}%)` : formatTime(metrics.exclusiveTimeMs)
-      ]
+      {
+        label: tr("editor.visualExplain.selfTime", "Self Time"),
+        value: metrics.timeShare != null ? `${formatTime(metrics.exclusiveTimeMs)} (${Math.round(metrics.timeShare * 100)}%)` : formatTime(metrics.exclusiveTimeMs)
+      }
     ] : [],
     ...metrics?.inclusiveTimeMs != null ? [
-      [
-        t("editor.visualExplain.totalTime"),
-        formatTime(metrics.inclusiveTimeMs)
-      ]
+      {
+        label: tr("editor.visualExplain.totalTime", "Total Time"),
+        value: formatTime(metrics.inclusiveTimeMs)
+      }
     ] : [],
     ...node.actual_time_ms != null ? [
-      [
-        t("editor.visualExplain.timePerLoop"),
-        formatTime(node.actual_time_ms)
-      ]
+      {
+        label: tr("editor.visualExplain.timePerLoop", "Time per Loop"),
+        value: 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,
+    ...node.actual_loops != null ? [
       {
-        title: t("editor.visualExplain.general"),
-        entries: generalEntries
+        label: tr("editor.visualExplain.loops", "Loops"),
+        value: String(node.actual_loops)
       }
-    ),
-    analyzeEntries.length > 0 && /* @__PURE__ */ jsx(
-      DetailSection,
+    ] : [],
+    ...node.buffers_hit != null ? [
       {
-        title: t("editor.visualExplain.analyzeData"),
-        entries: analyzeEntries
+        label: tr("editor.visualExplain.buffersHit", "Buffers Hit"),
+        value: String(node.buffers_hit)
       }
-    ),
-    extraEntries.length > 0 && /* @__PURE__ */ jsx(
-      DetailSection,
+    ] : [],
+    ...node.buffers_read != null ? [
       {
-        title: t("editor.visualExplain.extraDetails"),
-        entries: extraEntries
+        label: tr("editor.visualExplain.buffersRead", "Buffers Read"),
+        value: String(node.buffers_read)
+      }
+    ] : []
+  ] : [];
+  const extraEntries = Object.entries(node.extra ?? {}).map(
+    ([key, value]) => ({
+      label: key,
+      value: typeof value === "string" ? value : JSON.stringify(value)
+    })
+  );
+  const sections = [];
+  if (generalEntries.length > 0) {
+    sections.push({
+      title: tr("editor.visualExplain.general", "General"),
+      titleKey: "editor.visualExplain.general",
+      entries: generalEntries
+    });
+  }
+  if (analyzeEntries.length > 0) {
+    sections.push({
+      title: tr("editor.visualExplain.analyzeData", "Analyze Data"),
+      titleKey: "editor.visualExplain.analyzeData",
+      entries: analyzeEntries
+    });
+  }
+  if (extraEntries.length > 0) {
+    sections.push({
+      title: tr("editor.visualExplain.extraDetails", "Extra"),
+      titleKey: "editor.visualExplain.extraDetails",
+      entries: extraEntries
+    });
+  }
+  if (diagnostics && diagnostics.length > 0) {
+    const diagEntries = diagnostics.map((d) => ({
+      label: tr(d.labelKey, d.kind),
+      value: d.value ? `${tr(d.descriptionKey, d.kind)} (${d.value})` : tr(d.descriptionKey, d.kind)
+    }));
+    sections.push({
+      title: tr("editor.visualExplain.diagnostics.title", "Diagnostics"),
+      titleKey: "editor.visualExplain.diagnostics.title",
+      entries: diagEntries
+    });
+  }
+  return sections;
+}
+function formatExplainNodeDetails(node, options = {}) {
+  const sections = getExplainNodeDetailSections(node, options);
+  const parts = [];
+  for (const section of sections) {
+    if (section.entries.length === 0) continue;
+    const lines = section.entries.map((entry) => `${entry.label}: ${entry.value}`);
+    if (options.includeSectionHeaders || section.titleKey !== "editor.visualExplain.general") {
+      parts.push(`${section.title}:
+${lines.join("\n")}`);
+    } else {
+      parts.push(lines.join("\n"));
+    }
+  }
+  return parts.join("\n\n");
+}
+function ExplainNodeDetails({
+  node,
+  hasAnalyzeData,
+  metrics = null,
+  diagnostics = [],
+  onCopyDetails,
+  className
+}) {
+  const { t } = useTranslation();
+  const translate = useCallback(
+    (key, fallback) => {
+      return t(key, fallback ? { defaultValue: fallback } : void 0) || fallback || key;
+    },
+    [t]
+  );
+  const [copiedNodeId, setCopiedNodeId] = useState(null);
+  const copied = node !== null && copiedNodeId === node.id;
+  const [isCopying, setIsCopying] = useState(false);
+  const timerRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+  const handleCopy = useCallback(async () => {
+    if (!node || isCopying) return;
+    const text = formatExplainNodeDetails(node, {
+      hasAnalyzeData,
+      metrics,
+      diagnostics,
+      t: translate
+    });
+    setIsCopying(true);
+    try {
+      let success = false;
+      if (onCopyDetails) {
+        const result = await onCopyDetails(text);
+        if (result !== false) {
+          success = true;
+        }
+      } else if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+        success = true;
       }
-    )
+      if (success) {
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+        }
+        setCopiedNodeId(node.id);
+        timerRef.current = setTimeout(() => {
+          setCopiedNodeId(null);
+        }, 2e3);
+      }
+    } catch (err) {
+      console.error("Failed to copy node details:", err);
+    } finally {
+      setIsCopying(false);
+    }
+  }, [node, isCopying, hasAnalyzeData, metrics, diagnostics, translate, onCopyDetails]);
+  const sections = node ? getExplainNodeDetailSections(node, {
+    hasAnalyzeData,
+    metrics,
+    t: translate
+  }) : [];
+  return /* @__PURE__ */ jsxs("div", { className: clsx("text-xs flex flex-col", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-b border-default/60 bg-base/60 sticky top-0 z-10", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted", children: t("editor.visualExplain.nodeDetails", "Node Details") }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleCopy,
+          disabled: !node || isCopying,
+          className: "flex items-center gap-1.5 px-2 py-0.5 text-xs rounded border border-default bg-surface hover:bg-surface-secondary text-primary disabled:opacity-40 disabled:cursor-not-allowed transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-focus",
+          title: node ? t("editor.visualExplain.copyDetails", "Copy Details") : t("editor.visualExplain.selectNode", "Select a node to view details"),
+          "aria-label": t("editor.visualExplain.copyDetails", "Copy Details"),
+          children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Check, { size: 12, className: "text-accent-success" }),
+            /* @__PURE__ */ jsx("span", { className: "text-accent-success text-[11px]", children: t("editor.visualExplain.copied", "Copied") })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Copy, { size: 12, className: "text-secondary" }),
+            /* @__PURE__ */ jsx("span", { className: "text-secondary text-[11px]", children: t("editor.visualExplain.copyDetails", "Copy Details") })
+          ] })
+        }
+      )
+    ] }),
+    !node ? /* @__PURE__ */ jsx("div", { className: "p-4 text-xs text-muted", children: t("editor.visualExplain.selectNode", "Select a node to view details") }) : /* @__PURE__ */ jsxs("div", { 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", "Diagnostics") }),
+        /* @__PURE__ */ jsx(ExplainDiagnosticList, { diagnostics })
+      ] }),
+      sections.map((section) => /* @__PURE__ */ jsx(
+        DetailSection,
+        {
+          title: section.title,
+          entries: section.entries
+        },
+        section.title
+      ))
+    ] })
   ] });
 }
 function DetailSection({ title, entries }) {
@@ -786,20 +1030,146 @@ function DetailSection({ title, entries }) {
   }
   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: "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)) })
   ] });
 }
+
+// src/components/columnDrag.ts
+function startColumnDrag(startX, startY, options) {
+  const { threshold = 4, onDragStart, onDragMove, onDrop, onEnd } = options;
+  let started = false;
+  let overlay = null;
+  const handleMouseMove = (event) => {
+    if (!started) {
+      if (Math.abs(event.clientX - startX) < threshold && Math.abs(event.clientY - startY) < threshold) {
+        return;
+      }
+      started = true;
+      overlay = document.createElement("div");
+      overlay.style.cssText = "position:fixed;inset:0;z-index:9999;cursor:grabbing;user-select:none";
+      document.body.appendChild(overlay);
+      onDragStart();
+    }
+    onDragMove(event.clientX, event.clientY);
+  };
+  const handleMouseUp = (event) => {
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("mouseup", handleMouseUp);
+    if (started) {
+      overlay?.remove();
+      const suppressClick = (clickEvent) => {
+        clickEvent.stopPropagation();
+        clickEvent.preventDefault();
+        window.removeEventListener("click", suppressClick, true);
+      };
+      window.addEventListener("click", suppressClick, true);
+      setTimeout(() => window.removeEventListener("click", suppressClick, true), 0);
+      onDrop(event.clientX, event.clientY);
+    }
+    onEnd();
+  };
+  document.addEventListener("mousemove", handleMouseMove);
+  document.addEventListener("mouseup", handleMouseUp);
+}
+var COLUMN_LABEL_KEYS = {
+  operation: "editor.visualExplain.nodeType",
+  relation: "editor.visualExplain.relation",
+  cost: "editor.visualExplain.cost",
+  estRows: "editor.visualExplain.estRows",
+  actualRows: "editor.visualExplain.actualRows",
+  loops: "editor.visualExplain.loops",
+  selfTime: "editor.visualExplain.selfTime",
+  estimateGap: "editor.visualExplain.largestEstimateGap",
+  filter: "editor.visualExplain.filter"
+};
+var LEFT_ALIGNED_COLUMNS = /* @__PURE__ */ new Set([
+  "operation",
+  "relation",
+  "filter"
+]);
 function ExplainTableView({
   plan,
   metrics,
   diagnostics,
   selectedId,
-  onSelect
+  onSelect,
+  onExportCsv,
+  isExportingCsv,
+  columnOrder,
+  onColumnOrderChange,
+  onCopyDetails
 }) {
   const { t } = useTranslation();
+  const [ownColumnOrder, setOwnColumnOrder] = useState(EXPLAIN_TABLE_COLUMNS);
+  const order = useMemo(
+    () => normalizeExplainTableColumnOrder(columnOrder ?? ownColumnOrder),
+    [columnOrder, ownColumnOrder]
+  );
+  const visibleColumns = useMemo(
+    () => order.filter((id) => plan.has_analyze_data || !EXPLAIN_TABLE_ANALYZE_COLUMNS.has(id)),
+    [order, plan.has_analyze_data]
+  );
+  const isDefaultOrder = isDefaultExplainTableColumnOrder(order);
+  const [draggedColumn, setDraggedColumn] = useState(null);
+  const [dropTarget, setDropTarget] = useState(null);
+  const changeOrder = useCallback(
+    (next) => {
+      if (next === order) return;
+      setOwnColumnOrder(next);
+      onColumnOrderChange?.(next);
+    },
+    [order, onColumnOrderChange]
+  );
+  const headerRowRef = useRef(null);
+  const columnAt = useCallback((x) => {
+    const headers = headerRowRef.current?.querySelectorAll("th[data-column]");
+    for (const header of headers ?? []) {
+      const rect = header.getBoundingClientRect();
+      if (x >= rect.left && x <= rect.right) {
+        return header.dataset.column;
+      }
+    }
+    return null;
+  }, []);
+  const handleHeaderMouseDown = useCallback(
+    (event, column) => {
+      if (event.button !== 0) return;
+      let target = null;
+      startColumnDrag(event.clientX, event.clientY, {
+        onDragStart: () => setDraggedColumn(column),
+        onDragMove: (x) => {
+          target = columnAt(x);
+          setDropTarget(target);
+        },
+        onDrop: () => {
+          if (target) changeOrder(moveExplainTableColumn(order, column, target));
+        },
+        onEnd: () => {
+          setDraggedColumn(null);
+          setDropTarget(null);
+        }
+      });
+    },
+    [changeOrder, columnAt, order]
+  );
+  const handleHeaderKeyDown = useCallback(
+    (event, column) => {
+      if (!event.altKey || event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+      event.preventDefault();
+      changeOrder(
+        shiftExplainTableColumn(
+          order,
+          column,
+          event.key === "ArrowLeft" ? -1 : 1,
+          visibleColumns
+        )
+      );
+    },
+    [changeOrder, order, visibleColumns]
+  );
   const [expandedIds, setExpandedIds] = useState(
     () => collectExpandedIds(plan.root)
   );
@@ -816,40 +1186,98 @@ function ExplainTableView({
   }, []);
   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__ */ jsxs("div", { className: "flex-1 flex flex-col min-w-0 border-r border-default", children: [
+      (onExportCsv || !isDefaultOrder) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-default bg-base/50 text-xs shrink-0", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted font-medium", children: t("editor.visualExplain.tableTitle", "Plan Tree") }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          !isDefaultOrder && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => changeOrder(EXPLAIN_TABLE_COLUMNS),
+              className: "flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium text-secondary hover:text-primary hover:bg-surface-secondary transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+              children: [
+                /* @__PURE__ */ jsx(RotateCcw, { size: 13, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { children: t(
+                  "editor.visualExplain.resetColumnOrder",
+                  "Reset column order"
+                ) })
+              ]
+            }
+          ),
+          onExportCsv && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onExportCsv,
+              disabled: isExportingCsv,
+              className: "flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium text-secondary hover:text-primary hover:bg-surface-secondary transition-colors disabled:opacity-50 disabled:pointer-events-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+              "aria-label": t("editor.visualExplain.exportCsv", "Export CSV"),
+              title: t("editor.visualExplain.exportCsv", "Export CSV"),
+              children: [
+                /* @__PURE__ */ jsx(Download, { size: 13, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { children: isExportingCsv ? t("editor.visualExplain.exportingCsv", "Exporting...") : t("editor.visualExplain.exportCsv", "Export CSV") })
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto min-h-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", { ref: headerRowRef, children: [
+          /* @__PURE__ */ jsx("th", { className: "text-left px-3 py-2 text-muted font-semibold whitespace-nowrap", children: "#" }),
+          visibleColumns.map((column) => /* @__PURE__ */ jsx(
+            "th",
+            {
+              "data-column": column,
+              className: clsx(
+                "px-3 py-2 text-muted font-semibold whitespace-nowrap transition-colors",
+                LEFT_ALIGNED_COLUMNS.has(column) ? "text-left" : "text-right",
+                draggedColumn === column && "opacity-50",
+                dropTarget === column && draggedColumn !== column && "bg-accent-primary/15"
+              ),
+              children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onMouseDown: (event) => handleHeaderMouseDown(event, column),
+                  onKeyDown: (event) => handleHeaderKeyDown(event, column),
+                  title: t(
+                    "editor.visualExplain.moveColumnHint",
+                    "Drag to reorder, or press Alt+Left / Alt+Right"
+                  ),
+                  className: "cursor-grab font-semibold rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+                  children: t(COLUMN_LABEL_KEYS[column])
+                }
+              )
+            },
+            column
+          ))
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(
+          TreeRows,
+          {
+            node: plan.root,
+            depth: 0,
+            expandedIds,
+            selectedId,
+            onToggle: toggleExpand,
+            onSelect,
+            hasAnalyzeData: plan.has_analyze_data,
+            metrics,
+            diagnostics,
+            columns: visibleColumns
+          }
+        ) })
+      ] }) })
+    ] }),
     /* @__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) ?? [] : []
+        diagnostics: selectedNode ? diagnostics.get(selectedNode.id) ?? [] : [],
+        onCopyDetails
       }
     ) })
   ] });
@@ -863,19 +1291,74 @@ function TreeRows({
   onSelect,
   hasAnalyzeData,
   metrics,
-  diagnostics
+  diagnostics,
+  columns
 }) {
   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) : "-";
+  const row = getExplainTableRow(node, hasAnalyzeData, nodeMetrics);
+  const cells = {
+    operation: () => /* @__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 })
+    ] }) }, "operation"),
+    relation: () => /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-secondary whitespace-nowrap", children: row.relation ?? "" }, "relation"),
+    cost: () => /* @__PURE__ */ jsx(NumberCell, { value: formatRowCost(row) }, "cost"),
+    estRows: () => /* @__PURE__ */ jsx(
+      NumberCell,
+      {
+        value: row.planRows != null ? formatRows(row.planRows) : "-"
+      },
+      "estRows"
+    ),
+    actualRows: () => /* @__PURE__ */ jsx(
+      NumberCell,
+      {
+        value: row.actualRows != null ? formatRows(row.actualRows) : "-"
+      },
+      "actualRows"
+    ),
+    loops: () => /* @__PURE__ */ jsx(
+      NumberCell,
+      {
+        value: row.actualLoops != null ? formatRows(row.actualLoops) : "-",
+        title: row.actualLoops != null ? String(row.actualLoops) : void 0
+      },
+      "loops"
+    ),
+    selfTime: () => /* @__PURE__ */ jsx(
+      NumberCell,
+      {
+        value: row.exclusiveTimeMs != null ? formatTime(row.exclusiveTimeMs) : "-"
+      },
+      "selfTime"
+    ),
+    estimateGap: () => /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right whitespace-nowrap", children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: clsx(
+          "font-mono",
+          row.estimateGap != null && row.estimateGap >= 4 ? "text-amber-300" : "text-secondary"
+        ),
+        children: row.estimateGap != null ? formatRatio(row.estimateGap) : "-"
+      }
+    ) }, "estimateGap"),
+    filter: () => /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-muted truncate max-w-[200px]", children: row.filter ?? "" }, "filter")
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "tr",
@@ -887,44 +1370,7 @@ function TreeRows({
         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 ?? "" })
+          columns.map((column) => cells[column]())
         ]
       }
     ),
@@ -939,12 +1385,29 @@ function TreeRows({
         onSelect,
         hasAnalyzeData,
         metrics,
-        diagnostics
+        diagnostics,
+        columns
       },
       child.id
     ))
   ] });
 }
+function formatRowCost(row) {
+  if (row.startupCost != null && row.totalCost != null) {
+    return `${formatCost(row.startupCost)} - ${formatCost(row.totalCost)}`;
+  }
+  return row.totalCost != null ? formatCost(row.totalCost) : "-";
+}
+function NumberCell({ value, title }) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: "px-3 py-1.5 text-right text-secondary font-mono whitespace-nowrap",
+      title,
+      children: value
+    }
+  );
+}
 function collectExpandedIds(root) {
   const ids = /* @__PURE__ */ new Set();
   function walk(node) {
@@ -978,17 +1441,13 @@ function ExplainDiagramView({
   metrics,
   diagnostics,
   selectedId,
-  onSelect
+  onSelect,
+  onCopyDetails
 }) {
   const { t } = useTranslation();
-  const availableKinds = useMemo(
-    () => getAvailableMetricKinds(metrics),
-    [metrics]
-  );
+  const availableKinds = useMemo(() => getAvailableMetricKinds(metrics), [metrics]);
   const defaultKind = useMemo(() => getDefaultMetricKind(metrics), [metrics]);
-  const [requestedKind, setRequestedKind] = useState(
-    null
-  );
+  const [requestedKind, setRequestedKind] = useState(null);
   const metricKind = requestedKind != null && availableKinds.includes(requestedKind) ? requestedKind : defaultKind;
   const rows = useMemo(() => {
     const nodesById = new Map(
@@ -1045,7 +1504,9 @@ function ExplainDiagramView({
               /* @__PURE__ */ jsx("td", { className: "px-1 py-1.5 align-top", children: /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  style: { paddingLeft: `${nodeMetrics.depth * 12}px` },
+                  style: {
+                    paddingLeft: `${nodeMetrics.depth * 12}px`
+                  },
                   className: "min-w-0",
                   children: [
                     /* @__PURE__ */ jsx("div", { className: "truncate font-medium text-primary", children: node.node_type }),
@@ -1086,7 +1547,8 @@ function ExplainDiagramView({
         node: selectedNode,
         hasAnalyzeData: plan.has_analyze_data,
         metrics: selectedNode ? metrics.byId.get(selectedNode.id) ?? null : null,
-        diagnostics: selectedNode ? diagnostics.get(selectedNode.id) ?? [] : []
+        diagnostics: selectedNode ? diagnostics.get(selectedNode.id) ?? [] : [],
+        onCopyDetails
       }
     ) })
   ] });
@@ -1202,10 +1664,7 @@ function compareByTimeThenCount(a, b) {
 }
 function ExplainStatsView({ plan, metrics }) {
   const { t } = useTranslation();
-  const stats = useMemo(
-    () => getExplainPlanStats(plan, metrics),
-    [plan, metrics]
-  );
+  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(
@@ -1243,8 +1702,16 @@ function ExplainStatsView({ plan, metrics }) {
         {
           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: "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") }
           ]
         }
@@ -1294,7 +1761,10 @@ function ExplainStatsView({ plan, metrics }) {
         StatsHeaderRow,
         {
           columns: [
-            { key: "index", label: t("editor.visualExplain.stats.indexName") },
+            {
+              key: "index",
+              label: t("editor.visualExplain.stats.indexName")
+            },
             { key: "relation", label: t("editor.visualExplain.relation") },
             {
               key: "scans",
@@ -1361,16 +1831,9 @@ function ShareBar({ share }) {
     ] })
   ] });
 }
-function ExplainOverviewBar({
-  plan,
-  metrics,
-  onSelectNode
-}) {
+function ExplainOverviewBar({ plan, metrics, onSelectNode }) {
   const { t } = useTranslation();
-  const summary = useMemo(
-    () => getExplainPlanSummary(plan, metrics),
-    [plan, metrics]
-  );
+  const summary = useMemo(() => getExplainPlanSummary(plan, metrics), [plan, metrics]);
   const legend = useMemo(() => getExplainDriverLegend(plan), [plan]);
   const [overviewExpanded, setOverviewExpanded] = useState(true);
   const findings = [