@flanksource/clicky-ui 0.3.48 → 0.3.49

package/dist/data/traces/ProcessTraceTree.cjs

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const format = require("../../lib/format.cjs");
+const utils$1 = require("../../lib/utils.cjs");
+const utils = require("../diagnostics/utils.cjs");
+const Icon = require("../Icon.cjs");
+const Tree = require("../Tree.cjs");
+const processTree = require("./process-tree.cjs");
+const Sparkline = require("./Sparkline.cjs");
+const UiServerProcess = require("../../icons/components/UiServerProcess.cjs");
+const UiDebug = require("../../icons/components/UiDebug.cjs");
+const OPEN_DEPTH = 2;
+function lifetimeMs(row) {
+  const end = row.exitedAt ?? row.lastSeenAt;
+  return Date.parse(end) - Date.parse(row.startedAt);
+}
+function ProcessRow({ node, selected, series }) {
+  const { row, exited } = node;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-process-key": row.key,
+      ...exited ? { "data-exited": "true" } : {},
+      className: utils$1.cn("flex min-w-0 flex-1 items-center gap-1.5", exited && "opacity-60"),
+      title: row.command,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            icon: row.isRoot ? UiServerProcess.UiServerProcess : UiDebug.UiDebug,
+            className: row.isRoot ? "text-base text-blue-600" : "text-base text-muted-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils$1.cn("truncate", selected ? "font-semibold text-primary" : "font-medium text-foreground"), children: utils.processLabel({ pid: row.pid, name: row.name, command: row.command }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "shrink-0 text-xs text-muted-foreground", children: [
+          "pid ",
+          row.pid
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
+        series ? /* @__PURE__ */ jsxRuntime.jsx(Sparkline.Sparkline, { values: series, label: `CPU % over ${series.length} samples` }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: utils$1.cn("inline-flex shrink-0 items-center gap-1 text-xs", utils.processStateColor(row.status)), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: utils.processStateIcon(row.status) }),
+          row.status
+        ] }),
+        exited ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", title: "Lifetime", children: format.formatDuration(lifetimeMs(row)) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", title: "Peak CPU", children: `peak ${row.peakCpuPercent.toFixed(1)}%` }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", title: "Peak RSS", children: `peak ${format.formatBytes(row.peakRssBytes)}` })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", title: `Peak ${row.peakCpuPercent.toFixed(1)}%`, children: `${row.cpuPercent.toFixed(1)}%` }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", title: `Peak ${format.formatBytes(row.peakRssBytes)}`, children: format.formatBytes(row.rssBytes) })
+        ] })
+      ]
+    }
+  );
+}
+function ProcessTraceTree({
+  nodes,
+  samples,
+  onSelect,
+  selectedKey,
+  emptyLabel = "No processes recorded",
+  className
+}) {
+  const roots = react.useMemo(() => processTree.buildProcessForest(nodes), [nodes]);
+  const series = react.useMemo(() => processTree.cpuSeriesByKey(samples ?? []), [samples]);
+  const selected = react.useMemo(
+    () => selectedKey ? processTree.flattenForest(roots).find((node) => node.row.key === selectedKey) ?? null : null,
+    [roots, selectedKey]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tree.Tree,
+    {
+      roots,
+      ...className ? { className } : {},
+      ariaLabel: "Process tree",
+      empty: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-density-6 text-center text-muted-foreground text-sm", children: emptyLabel }),
+      getChildren: (node) => node.children,
+      getKey: (node) => node.row.key,
+      getSearchText: (node) => `${node.row.name} ${node.row.command} ${node.row.pid}`,
+      selected,
+      revealSelected: true,
+      defaultOpen: (_node, depth) => depth < OPEN_DEPTH,
+      onSelect: (node) => onSelect(node.row.key),
+      renderRow: ({ node, selected: isSelected }) => /* @__PURE__ */ jsxRuntime.jsx(ProcessRow, { node, selected: isSelected, series: series.get(node.row.key) }),
+      rowClass: (_node, isSelected) => isSelected ? "bg-primary/10 border-l-2 border-primary" : "hover:bg-accent"
+    }
+  );
+}
+exports.ProcessTraceTree = ProcessTraceTree;
+//# sourceMappingURL=ProcessTraceTree.cjs.map

package/dist/data/traces/ProcessTraceTree.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessTraceTree.cjs","sources":["../../../src/data/traces/ProcessTraceTree.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { UiDebug, UiServerProcess } from \"../../icons\";\nimport { formatBytes, formatDuration } from \"../../lib/format\";\nimport { cn } from \"../../lib/utils\";\nimport { processLabel, processStateColor, processStateIcon } from \"../diagnostics/utils\";\nimport { Icon } from \"../Icon\";\nimport { Tree } from \"../Tree\";\nimport { buildProcessForest, cpuSeriesByKey, flattenForest, type ProcessTreeNode } from \"./process-tree\";\nimport { Sparkline } from \"./Sparkline\";\nimport type { ProcessNodeRow, ProcessSampleRow } from \"./types\";\n\n/** Roots and their direct children start open; deeper levels open on demand or to reveal the selection. */\nconst OPEN_DEPTH = 2;\n\nexport type ProcessTraceTreeProps = {\n  /** `process_tree` trace records, one per process. */\n  nodes: ProcessNodeRow[];\n  /** `process_samples` records; a process with at least two shows a CPU sparkline. */\n  samples?: ProcessSampleRow[];\n  /** Called with the `key` of the clicked process. */\n  onSelect: (key: string) => void;\n  /** `key` of the selected process. */\n  selectedKey?: string | null;\n  /** Shown when there are no processes. */\n  emptyLabel?: string;\n  /** Classes applied to the tree root. */\n  className?: string;\n};\n\nfunction lifetimeMs(row: ProcessNodeRow): number {\n  const end = row.exitedAt ?? row.lastSeenAt;\n  return Date.parse(end) - Date.parse(row.startedAt);\n}\n\nfunction ProcessRow({ node, selected, series }: { node: ProcessTreeNode; selected: boolean; series: number[] | undefined }) {\n  const { row, exited } = node;\n  return (\n    <div\n      data-process-key={row.key}\n      {...(exited ? { \"data-exited\": \"true\" } : {})}\n      className={cn(\"flex min-w-0 flex-1 items-center gap-1.5\", exited && \"opacity-60\")}\n      title={row.command}\n    >\n      <Icon\n        icon={row.isRoot ? UiServerProcess : UiDebug}\n        className={row.isRoot ? \"text-base text-blue-600\" : \"text-base text-muted-foreground\"}\n      />\n      <span className={cn(\"truncate\", selected ? \"font-semibold text-primary\" : \"font-medium text-foreground\")}>\n        {processLabel({ pid: row.pid, name: row.name, command: row.command })}\n      </span>\n      <span className=\"shrink-0 text-xs text-muted-foreground\">pid {row.pid}</span>\n      <span className=\"flex-1\" />\n      {series ? <Sparkline values={series} label={`CPU % over ${series.length} samples`} /> : null}\n      <span className={cn(\"inline-flex shrink-0 items-center gap-1 text-xs\", processStateColor(row.status))}>\n        <Icon icon={processStateIcon(row.status)} />\n        {row.status}\n      </span>\n      {exited ? (\n        <>\n          <span className=\"shrink-0 text-xs tabular-nums text-muted-foreground\" title=\"Lifetime\">\n            {formatDuration(lifetimeMs(row))}\n          </span>\n          <span className=\"shrink-0 text-xs tabular-nums text-muted-foreground\" title=\"Peak CPU\">\n            {`peak ${row.peakCpuPercent.toFixed(1)}%`}\n          </span>\n          <span className=\"shrink-0 text-xs tabular-nums text-muted-foreground\" title=\"Peak RSS\">\n            {`peak ${formatBytes(row.peakRssBytes)}`}\n          </span>\n        </>\n      ) : (\n        <>\n          <span className=\"shrink-0 text-xs tabular-nums text-muted-foreground\" title={`Peak ${row.peakCpuPercent.toFixed(1)}%`}>\n            {`${row.cpuPercent.toFixed(1)}%`}\n          </span>\n          <span className=\"shrink-0 text-xs tabular-nums text-muted-foreground\" title={`Peak ${formatBytes(row.peakRssBytes)}`}>\n            {formatBytes(row.rssBytes)}\n          </span>\n        </>\n      )}\n    </div>\n  );\n}\n\n/**\n * The process tree of a `process_tree` trace: a forest keyed by `key` /\n * `parentKey`, where a process whose parent was never recorded is a root.\n * Exited processes are dimmed and show their lifetime and peak usage. It is\n * built on the same `Tree` primitive and process helpers as `DiagnosticsTree`,\n * which cannot take a forest, key selection or exit information.\n */\nexport function ProcessTraceTree({\n  nodes,\n  samples,\n  onSelect,\n  selectedKey,\n  emptyLabel = \"No processes recorded\",\n  className,\n}: ProcessTraceTreeProps) {\n  const roots = useMemo(() => buildProcessForest(nodes), [nodes]);\n  const series = useMemo(() => cpuSeriesByKey(samples ?? []), [samples]);\n  const selected = useMemo(\n    () => (selectedKey ? (flattenForest(roots).find((node) => node.row.key === selectedKey) ?? null) : null),\n    [roots, selectedKey],\n  );\n\n  return (\n    <Tree<ProcessTreeNode>\n      roots={roots}\n      {...(className ? { className } : {})}\n      ariaLabel=\"Process tree\"\n      empty={<div className=\"p-density-6 text-center text-muted-foreground text-sm\">{emptyLabel}</div>}\n      getChildren={(node) => node.children}\n      getKey={(node) => node.row.key}\n      getSearchText={(node) => `${node.row.name} ${node.row.command} ${node.row.pid}`}\n      selected={selected}\n      revealSelected\n      defaultOpen={(_node, depth) => depth < OPEN_DEPTH}\n      onSelect={(node) => onSelect(node.row.key)}\n      renderRow={({ node, selected: isSelected }) => (\n        <ProcessRow node={node} selected={isSelected} series={series.get(node.row.key)} />\n      )}\n      rowClass={(_node, isSelected) =>\n        isSelected ? \"bg-primary/10 border-l-2 border-primary\" : \"hover:bg-accent\"\n      }\n    />\n  );\n}\n"],"names":["jsxs","cn","jsx","Icon","UiServerProcess","UiDebug","processLabel","Sparkline","processStateColor","processStateIcon","Fragment","formatDuration","formatBytes","useMemo","buildProcessForest","cpuSeriesByKey","flattenForest","Tree"],"mappings":"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"}

package/dist/data/traces/ProcessTraceTree.d.ts

@@ -0,0 +1,24 @@
+import { ProcessNodeRow, ProcessSampleRow } from './types.js';
+export type ProcessTraceTreeProps = {
+    /** `process_tree` trace records, one per process. */
+    nodes: ProcessNodeRow[];
+    /** `process_samples` records; a process with at least two shows a CPU sparkline. */
+    samples?: ProcessSampleRow[];
+    /** Called with the `key` of the clicked process. */
+    onSelect: (key: string) => void;
+    /** `key` of the selected process. */
+    selectedKey?: string | null;
+    /** Shown when there are no processes. */
+    emptyLabel?: string;
+    /** Classes applied to the tree root. */
+    className?: string;
+};
+/**
+ * The process tree of a `process_tree` trace: a forest keyed by `key` /
+ * `parentKey`, where a process whose parent was never recorded is a root.
+ * Exited processes are dimmed and show their lifetime and peak usage. It is
+ * built on the same `Tree` primitive and process helpers as `DiagnosticsTree`,
+ * which cannot take a forest, key selection or exit information.
+ */
+export declare function ProcessTraceTree({ nodes, samples, onSelect, selectedKey, emptyLabel, className, }: ProcessTraceTreeProps): import("react").JSX.Element;
+//# sourceMappingURL=ProcessTraceTree.d.ts.map

package/dist/data/traces/ProcessTraceTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessTraceTree.d.ts","sourceRoot":"","sources":["../../../src/data/traces/ProcessTraceTree.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKhE,MAAM,MAAM,qBAAqB,GAAG;IAClC,qDAAqD;IACrD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,oFAAoF;IACpF,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,oDAAoD;IACpD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAwDF;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,EACX,UAAoC,EACpC,SAAS,GACV,EAAE,qBAAqB,+BA6BvB"}

package/dist/data/traces/ProcessTraceTree.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { formatDuration, formatBytes } from "../../lib/format.js";
+import { cn } from "../../lib/utils.js";
+import { processLabel, processStateIcon, processStateColor } from "../diagnostics/utils.js";
+import { Icon } from "../Icon.js";
+import { Tree } from "../Tree.js";
+import { buildProcessForest, cpuSeriesByKey, flattenForest } from "./process-tree.js";
+import { Sparkline } from "./Sparkline.js";
+import { UiServerProcess } from "../../icons/components/UiServerProcess.js";
+import { UiDebug } from "../../icons/components/UiDebug.js";
+const OPEN_DEPTH = 2;
+function lifetimeMs(row) {
+  const end = row.exitedAt ?? row.lastSeenAt;
+  return Date.parse(end) - Date.parse(row.startedAt);
+}
+function ProcessRow({ node, selected, series }) {
+  const { row, exited } = node;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-process-key": row.key,
+      ...exited ? { "data-exited": "true" } : {},
+      className: cn("flex min-w-0 flex-1 items-center gap-1.5", exited && "opacity-60"),
+      title: row.command,
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: row.isRoot ? UiServerProcess : UiDebug,
+            className: row.isRoot ? "text-base text-blue-600" : "text-base text-muted-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: cn("truncate", selected ? "font-semibold text-primary" : "font-medium text-foreground"), children: processLabel({ pid: row.pid, name: row.name, command: row.command }) }),
+        /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-xs text-muted-foreground", children: [
+          "pid ",
+          row.pid
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+        series ? /* @__PURE__ */ jsx(Sparkline, { values: series, label: `CPU % over ${series.length} samples` }) : null,
+        /* @__PURE__ */ jsxs("span", { className: cn("inline-flex shrink-0 items-center gap-1 text-xs", processStateColor(row.status)), children: [
+          /* @__PURE__ */ jsx(Icon, { icon: processStateIcon(row.status) }),
+          row.status
+        ] }),
+        exited ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", title: "Lifetime", children: formatDuration(lifetimeMs(row)) }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", title: "Peak CPU", children: `peak ${row.peakCpuPercent.toFixed(1)}%` }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", title: "Peak RSS", children: `peak ${formatBytes(row.peakRssBytes)}` })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", title: `Peak ${row.peakCpuPercent.toFixed(1)}%`, children: `${row.cpuPercent.toFixed(1)}%` }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", title: `Peak ${formatBytes(row.peakRssBytes)}`, children: formatBytes(row.rssBytes) })
+        ] })
+      ]
+    }
+  );
+}
+function ProcessTraceTree({
+  nodes,
+  samples,
+  onSelect,
+  selectedKey,
+  emptyLabel = "No processes recorded",
+  className
+}) {
+  const roots = useMemo(() => buildProcessForest(nodes), [nodes]);
+  const series = useMemo(() => cpuSeriesByKey(samples ?? []), [samples]);
+  const selected = useMemo(
+    () => selectedKey ? flattenForest(roots).find((node) => node.row.key === selectedKey) ?? null : null,
+    [roots, selectedKey]
+  );
+  return /* @__PURE__ */ jsx(
+    Tree,
+    {
+      roots,
+      ...className ? { className } : {},
+      ariaLabel: "Process tree",
+      empty: /* @__PURE__ */ jsx("div", { className: "p-density-6 text-center text-muted-foreground text-sm", children: emptyLabel }),
+      getChildren: (node) => node.children,
+      getKey: (node) => node.row.key,
+      getSearchText: (node) => `${node.row.name} ${node.row.command} ${node.row.pid}`,
+      selected,
+      revealSelected: true,
+      defaultOpen: (_node, depth) => depth < OPEN_DEPTH,
+      onSelect: (node) => onSelect(node.row.key),
+      renderRow: ({ node, selected: isSelected }) => /* @__PURE__ */ jsx(ProcessRow, { node, selected: isSelected, series: series.get(node.row.key) }),
+      rowClass: (_node, isSelected) => isSelected ? "bg-primary/10 border-l-2 border-primary" : "hover:bg-accent"
+    }
+  );
+}
+export {
+  ProcessTraceTree
+};
+//# sourceMappingURL=ProcessTraceTree.js.map

package/dist/data/traces/ProcessTraceTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessTraceTree.js","sources":["../../../src/data/traces/ProcessTraceTree.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { UiDebug, UiServerProcess } from \"../../icons\";\nimport { formatBytes, formatDuration } from \"../../lib/format\";\nimport { cn } from \"../../lib/utils\";\nimport { processLabel, processStateColor, processStateIcon } from \"../diagnostics/utils\";\nimport { Icon } from \"../Icon\";\nimport { Tree } from \"../Tree\";\nimport { buildProcessForest, cpuSeriesByKey, flattenForest, type ProcessTreeNode } from \"./process-tree\";\nimport { Sparkline } from \"./Sparkline\";\nimport type { ProcessNodeRow, ProcessSampleRow } from \"./types\";\n\n/** Roots and their direct children start open; deeper levels open on demand or to reveal the selection. */\nconst OPEN_DEPTH = 2;\n\nexport type ProcessTraceTreeProps = {\n  /** `process_tree` trace records, one per process. */\n  nodes: ProcessNodeRow[];\n  /** `process_samples` records; a process with at least two shows a CPU sparkline. */\n  samples?: ProcessSampleRow[];\n  /** Called with the `key` of the clicked process. */\n  onSelect: (key: string) => void;\n  /** `key` of the selected process. */\n  selectedKey?: string | null;\n  /** Shown when there are no processes. */\n  emptyLabel?: string;\n  /** Classes applied to the tree root. */\n  className?: string;\n};\n\nfunction lifetimeMs(row: ProcessNodeRow): number {\n  const end = row.exitedAt ?? row.lastSeenAt;\n  return Date.parse(end) - Date.parse(row.startedAt);\n}\n\nfunction ProcessRow({ node, selected, series }: { node: ProcessTreeNode; selected: boolean; series: number[] | undefined }) {\n  const { row, exited } = node;\n  return (\n    <div\n      data-process-key={row.key}\n      {...(exited ? { \"data-exited\": \"true\" } : {})}\n      className={cn(\"flex min-w-0 flex-1 items-center gap-1.5\", exited && \"opacity-60\")}\n      title={row.command}\n    >\n      <Icon\n        icon={row.isRoot ? UiServerProcess : UiDebug}\n        className={row.isRoot ? \"text-base text-blue-600\" : \"text-base text-muted-foreground\"}\n      />\n      <span className={cn(\"truncate\", selected ? \"font-semibold text-primary\" : \"font-medium text-foreground\")}>\n        {processLabel({ pid: row.pid, name: row.name, command: row.command })}\n      </span>\n      <span className=\"shrink-0 text-xs text-muted-foreground\">pid {row.pid}</span>\n      <span className=\"flex-1\" />\n      {series ? <Sparkline values={series} label={`CPU % over ${series.length} samples`} /> : null}\n      <span className={cn(\"inline-flex shrink-0 items-center gap-1 text-xs\", processStateColor(row.status))}>\n        <Icon icon={processStateIcon(row.status)} />\n        {row.status}\n      </span>\n      {exited ? (\n        <>\n          <span className=\"shrink-0 text-xs tabular-nums text-muted-foreground\" title=\"Lifetime\">\n            {formatDuration(lifetimeMs(row))}\n          </span>\n          <span className=\"shrink-0 text-xs tabular-nums text-muted-foreground\" title=\"Peak CPU\">\n            {`peak ${row.peakCpuPercent.toFixed(1)}%`}\n          </span>\n          <span className=\"shrink-0 text-xs tabular-nums text-muted-foreground\" title=\"Peak RSS\">\n            {`peak ${formatBytes(row.peakRssBytes)}`}\n          </span>\n        </>\n      ) : (\n        <>\n          <span className=\"shrink-0 text-xs tabular-nums text-muted-foreground\" title={`Peak ${row.peakCpuPercent.toFixed(1)}%`}>\n            {`${row.cpuPercent.toFixed(1)}%`}\n          </span>\n          <span className=\"shrink-0 text-xs tabular-nums text-muted-foreground\" title={`Peak ${formatBytes(row.peakRssBytes)}`}>\n            {formatBytes(row.rssBytes)}\n          </span>\n        </>\n      )}\n    </div>\n  );\n}\n\n/**\n * The process tree of a `process_tree` trace: a forest keyed by `key` /\n * `parentKey`, where a process whose parent was never recorded is a root.\n * Exited processes are dimmed and show their lifetime and peak usage. It is\n * built on the same `Tree` primitive and process helpers as `DiagnosticsTree`,\n * which cannot take a forest, key selection or exit information.\n */\nexport function ProcessTraceTree({\n  nodes,\n  samples,\n  onSelect,\n  selectedKey,\n  emptyLabel = \"No processes recorded\",\n  className,\n}: ProcessTraceTreeProps) {\n  const roots = useMemo(() => buildProcessForest(nodes), [nodes]);\n  const series = useMemo(() => cpuSeriesByKey(samples ?? []), [samples]);\n  const selected = useMemo(\n    () => (selectedKey ? (flattenForest(roots).find((node) => node.row.key === selectedKey) ?? null) : null),\n    [roots, selectedKey],\n  );\n\n  return (\n    <Tree<ProcessTreeNode>\n      roots={roots}\n      {...(className ? { className } : {})}\n      ariaLabel=\"Process tree\"\n      empty={<div className=\"p-density-6 text-center text-muted-foreground text-sm\">{emptyLabel}</div>}\n      getChildren={(node) => node.children}\n      getKey={(node) => node.row.key}\n      getSearchText={(node) => `${node.row.name} ${node.row.command} ${node.row.pid}`}\n      selected={selected}\n      revealSelected\n      defaultOpen={(_node, depth) => depth < OPEN_DEPTH}\n      onSelect={(node) => onSelect(node.row.key)}\n      renderRow={({ node, selected: isSelected }) => (\n        <ProcessRow node={node} selected={isSelected} series={series.get(node.row.key)} />\n      )}\n      rowClass={(_node, isSelected) =>\n        isSelected ? \"bg-primary/10 border-l-2 border-primary\" : \"hover:bg-accent\"\n      }\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAYA,MAAM,aAAa;AAiBnB,SAAS,WAAW,KAA6B;AAC/C,QAAM,MAAM,IAAI,YAAY,IAAI;AAChC,SAAO,KAAK,MAAM,GAAG,IAAI,KAAK,MAAM,IAAI,SAAS;AACnD;AAEA,SAAS,WAAW,EAAE,MAAM,UAAU,UAAsF;AAC1H,QAAM,EAAE,KAAK,OAAA,IAAW;AACxB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,oBAAkB,IAAI;AAAA,MACrB,GAAI,SAAS,EAAE,eAAe,OAAA,IAAW,CAAA;AAAA,MAC1C,WAAW,GAAG,4CAA4C,UAAU,YAAY;AAAA,MAChF,OAAO,IAAI;AAAA,MAEX,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM,IAAI,SAAS,kBAAkB;AAAA,YACrC,WAAW,IAAI,SAAS,4BAA4B;AAAA,UAAA;AAAA,QAAA;AAAA,QAEtD,oBAAC,UAAK,WAAW,GAAG,YAAY,WAAW,+BAA+B,6BAA6B,GACpG,UAAA,aAAa,EAAE,KAAK,IAAI,KAAK,MAAM,IAAI,MAAM,SAAS,IAAI,QAAA,CAAS,GACtE;AAAA,QACA,qBAAC,QAAA,EAAK,WAAU,0CAAyC,UAAA;AAAA,UAAA;AAAA,UAAK,IAAI;AAAA,QAAA,GAAI;AAAA,QACtE,oBAAC,QAAA,EAAK,WAAU,SAAA,CAAS;AAAA,QACxB,SAAS,oBAAC,WAAA,EAAU,QAAQ,QAAQ,OAAO,cAAc,OAAO,MAAM,WAAA,CAAY,IAAK;AAAA,QACxF,qBAAC,UAAK,WAAW,GAAG,mDAAmD,kBAAkB,IAAI,MAAM,CAAC,GAClG,UAAA;AAAA,UAAA,oBAAC,MAAA,EAAK,MAAM,iBAAiB,IAAI,MAAM,GAAG;AAAA,UACzC,IAAI;AAAA,QAAA,GACP;AAAA,QACC,SACC,qBAAA,UAAA,EACE,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,uDAAsD,OAAM,YACzE,UAAA,eAAe,WAAW,GAAG,CAAC,EAAA,CACjC;AAAA,UACA,oBAAC,QAAA,EAAK,WAAU,uDAAsD,OAAM,YACzE,UAAA,QAAQ,IAAI,eAAe,QAAQ,CAAC,CAAC,KACxC;AAAA,UACA,oBAAC,QAAA,EAAK,WAAU,uDAAsD,OAAM,YACzE,UAAA,QAAQ,YAAY,IAAI,YAAY,CAAC,GAAA,CACxC;AAAA,QAAA,EAAA,CACF,IAEA,qBAAA,UAAA,EACE,UAAA;AAAA,UAAA,oBAAC,UAAK,WAAU,uDAAsD,OAAO,QAAQ,IAAI,eAAe,QAAQ,CAAC,CAAC,KAC/G,UAAA,GAAG,IAAI,WAAW,QAAQ,CAAC,CAAC,KAC/B;AAAA,UACA,oBAAC,QAAA,EAAK,WAAU,uDAAsD,OAAO,QAAQ,YAAY,IAAI,YAAY,CAAC,IAC/G,UAAA,YAAY,IAAI,QAAQ,EAAA,CAC3B;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AASO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AACF,GAA0B;AACxB,QAAM,QAAQ,QAAQ,MAAM,mBAAmB,KAAK,GAAG,CAAC,KAAK,CAAC;AAC9D,QAAM,SAAS,QAAQ,MAAM,eAAe,WAAW,EAAE,GAAG,CAAC,OAAO,CAAC;AACrE,QAAM,WAAW;AAAA,IACf,MAAO,cAAe,cAAc,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,QAAQ,WAAW,KAAK,OAAQ;AAAA,IACnG,CAAC,OAAO,WAAW;AAAA,EAAA;AAGrB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACC,GAAI,YAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MACjC,WAAU;AAAA,MACV,OAAO,oBAAC,OAAA,EAAI,WAAU,yDAAyD,UAAA,YAAW;AAAA,MAC1F,aAAa,CAAC,SAAS,KAAK;AAAA,MAC5B,QAAQ,CAAC,SAAS,KAAK,IAAI;AAAA,MAC3B,eAAe,CAAC,SAAS,GAAG,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,OAAO,IAAI,KAAK,IAAI,GAAG;AAAA,MAC7E;AAAA,MACA,gBAAc;AAAA,MACd,aAAa,CAAC,OAAO,UAAU,QAAQ;AAAA,MACvC,UAAU,CAAC,SAAS,SAAS,KAAK,IAAI,GAAG;AAAA,MACzC,WAAW,CAAC,EAAE,MAAM,UAAU,iBAC5B,oBAAC,YAAA,EAAW,MAAY,UAAU,YAAY,QAAQ,OAAO,IAAI,KAAK,IAAI,GAAG,GAAG;AAAA,MAElF,UAAU,CAAC,OAAO,eAChB,aAAa,4CAA4C;AAAA,IAAA;AAAA,EAAA;AAIjE;"}

package/dist/data/traces/Sparkline.cjs

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../../lib/utils.cjs");
+const processTree = require("./process-tree.cjs");
+function Sparkline({ values, label, width = 64, height = 16, className }) {
+  const points = processTree.sparklinePoints(values, width, height);
+  if (!points) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      role: "img",
+      "aria-label": label,
+      viewBox: `0 0 ${width} ${height}`,
+      width,
+      height,
+      className: utils.cn("shrink-0 overflow-visible text-primary", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points, fill: "none", stroke: "currentColor", strokeWidth: 1.25, strokeLinejoin: "round" })
+    }
+  );
+}
+exports.Sparkline = Sparkline;
+//# sourceMappingURL=Sparkline.cjs.map

package/dist/data/traces/Sparkline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.cjs","sources":["../../../src/data/traces/Sparkline.tsx"],"sourcesContent":["import { cn } from \"../../lib/utils\";\nimport { sparklinePoints } from \"./process-tree\";\n\nexport type SparklineProps = {\n  /** Values in order; at least two are needed to draw a line. */\n  values: number[];\n  /** Accessible description of what the line plots. */\n  label: string;\n  width?: number;\n  height?: number;\n  /** Classes applied to the svg; the stroke follows the text colour. */\n  className?: string;\n};\n\n/** A dependency-free inline SVG line, scaled so the largest value touches the top. */\nexport function Sparkline({ values, label, width = 64, height = 16, className }: SparklineProps) {\n  const points = sparklinePoints(values, width, height);\n  if (!points) return null;\n  return (\n    <svg\n      role=\"img\"\n      aria-label={label}\n      viewBox={`0 0 ${width} ${height}`}\n      width={width}\n      height={height}\n      className={cn(\"shrink-0 overflow-visible text-primary\", className)}\n    >\n      <polyline points={points} fill=\"none\" stroke=\"currentColor\" strokeWidth={1.25} strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n"],"names":["sparklinePoints","jsx","cn"],"mappings":";;;;;AAeO,SAAS,UAAU,EAAE,QAAQ,OAAO,QAAQ,IAAI,SAAS,IAAI,aAA6B;AAC/F,QAAM,SAASA,YAAAA,gBAAgB,QAAQ,OAAO,MAAM;AACpD,MAAI,CAAC,OAAQ,QAAO;AACpB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,SAAS,OAAO,KAAK,IAAI,MAAM;AAAA,MAC/B;AAAA,MACA;AAAA,MACA,WAAWC,MAAAA,GAAG,0CAA0C,SAAS;AAAA,MAEjE,UAAAD,2BAAAA,IAAC,YAAA,EAAS,QAAgB,MAAK,QAAO,QAAO,gBAAe,aAAa,MAAM,gBAAe,QAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AAG5G;;"}

package/dist/data/traces/Sparkline.d.ts

@@ -0,0 +1,13 @@
+export type SparklineProps = {
+    /** Values in order; at least two are needed to draw a line. */
+    values: number[];
+    /** Accessible description of what the line plots. */
+    label: string;
+    width?: number;
+    height?: number;
+    /** Classes applied to the svg; the stroke follows the text colour. */
+    className?: string;
+};
+/** A dependency-free inline SVG line, scaled so the largest value touches the top. */
+export declare function Sparkline({ values, label, width, height, className }: SparklineProps): import("react").JSX.Element | null;
+//# sourceMappingURL=Sparkline.d.ts.map

package/dist/data/traces/Sparkline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../../src/data/traces/Sparkline.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG;IAC3B,+DAA+D;IAC/D,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,sFAAsF;AACtF,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAU,EAAE,MAAW,EAAE,SAAS,EAAE,EAAE,cAAc,sCAe9F"}

package/dist/data/traces/Sparkline.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { sparklinePoints } from "./process-tree.js";
+function Sparkline({ values, label, width = 64, height = 16, className }) {
+  const points = sparklinePoints(values, width, height);
+  if (!points) return null;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      role: "img",
+      "aria-label": label,
+      viewBox: `0 0 ${width} ${height}`,
+      width,
+      height,
+      className: cn("shrink-0 overflow-visible text-primary", className),
+      children: /* @__PURE__ */ jsx("polyline", { points, fill: "none", stroke: "currentColor", strokeWidth: 1.25, strokeLinejoin: "round" })
+    }
+  );
+}
+export {
+  Sparkline
+};
+//# sourceMappingURL=Sparkline.js.map

package/dist/data/traces/Sparkline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.js","sources":["../../../src/data/traces/Sparkline.tsx"],"sourcesContent":["import { cn } from \"../../lib/utils\";\nimport { sparklinePoints } from \"./process-tree\";\n\nexport type SparklineProps = {\n  /** Values in order; at least two are needed to draw a line. */\n  values: number[];\n  /** Accessible description of what the line plots. */\n  label: string;\n  width?: number;\n  height?: number;\n  /** Classes applied to the svg; the stroke follows the text colour. */\n  className?: string;\n};\n\n/** A dependency-free inline SVG line, scaled so the largest value touches the top. */\nexport function Sparkline({ values, label, width = 64, height = 16, className }: SparklineProps) {\n  const points = sparklinePoints(values, width, height);\n  if (!points) return null;\n  return (\n    <svg\n      role=\"img\"\n      aria-label={label}\n      viewBox={`0 0 ${width} ${height}`}\n      width={width}\n      height={height}\n      className={cn(\"shrink-0 overflow-visible text-primary\", className)}\n    >\n      <polyline points={points} fill=\"none\" stroke=\"currentColor\" strokeWidth={1.25} strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n"],"names":[],"mappings":";;;AAeO,SAAS,UAAU,EAAE,QAAQ,OAAO,QAAQ,IAAI,SAAS,IAAI,aAA6B;AAC/F,QAAM,SAAS,gBAAgB,QAAQ,OAAO,MAAM;AACpD,MAAI,CAAC,OAAQ,QAAO;AACpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,SAAS,OAAO,KAAK,IAAI,MAAM;AAAA,MAC/B;AAAA,MACA;AAAA,MACA,WAAW,GAAG,0CAA0C,SAAS;AAAA,MAEjE,UAAA,oBAAC,YAAA,EAAS,QAAgB,MAAK,QAAO,QAAO,gBAAe,aAAa,MAAM,gBAAe,QAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AAG5G;"}

package/dist/data/traces/SqlTraceTable.cjs

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Switch = require("../../components/Switch.cjs");
+const utils = require("../../lib/utils.cjs");
+const Badge = require("../Badge.cjs");
+const CodeBlock = require("../CodeBlock.cjs");
+const DataTable = require("../DataTable.cjs");
+const JsonView = require("../JsonView.cjs");
+const sqlTrace = require("./sql-trace.cjs");
+const COLUMNS = [
+  { key: "startedAt", label: "Time", kind: "timestamp", shrink: true },
+  {
+    key: "op",
+    label: "Op",
+    shrink: true,
+    filterable: true,
+    render: (value) => /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { variant: "soft", tone: "neutral", size: "xs", className: "font-mono", children: String(value) })
+  },
+  { key: "tables", label: "Tables", kind: "tags", shrink: true },
+  {
+    key: "sql",
+    label: "SQL",
+    grow: true,
+    render: (_value, row) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-density-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { inline: true, language: "sql", source: row.sql }),
+      row.count > 1 ? /* @__PURE__ */ jsxRuntime.jsx("span", { title: `${row.count} executions`, children: /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { variant: "soft", tone: "info", size: "xs", children: `×${row.count}` }) }) : null
+    ] })
+  },
+  {
+    key: "durationMs",
+    label: "Duration",
+    align: "right",
+    shrink: true,
+    render: (value, row) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", title: row.count > 1 ? `${row.count} executions in total` : void 0, children: sqlTrace.formatStatementDuration(Number(value)) }),
+    sortValue: (value) => Number(value)
+  },
+  {
+    key: "rows",
+    label: "Rows",
+    align: "right",
+    shrink: true,
+    render: (value) => Number(value) < 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "—" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: String(value) }),
+    sortValue: (value) => Number(value)
+  },
+  {
+    key: "error",
+    label: "Error",
+    grow: true,
+    render: (value, row) => value ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate text-destructive", title: String(value), children: [
+      String(value),
+      row.count > 1 ? ` (${row.failed} of ${row.count} failed)` : ""
+    ] }) : null
+  }
+];
+function StatementDetails({ row }) {
+  var _a;
+  const [first] = row.occurrences;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-density-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { language: "sql", source: row.sql, copyable: true }),
+    row.error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 font-semibold text-foreground", children: "Error" }),
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap break-all text-destructive", children: row.error })
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground", children: [
+      first.connection,
+      " · ",
+      first.driver,
+      ((_a = first.truncated) == null ? void 0 : _a.length) ? ` · truncated: ${first.truncated.join(", ")}` : ""
+    ] }),
+    row.count > 1 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1 text-xs", "aria-label": "Executions", children: row.occurrences.map((occurrence, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: utils.cn("flex items-baseline gap-density-3", occurrence.error && "text-destructive"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums text-muted-foreground", children: occurrence.startedAt }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: sqlTrace.formatStatementDuration(occurrence.durationMs) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: occurrence.rows < 0 ? "— rows" : `${occurrence.rows} rows` }),
+      occurrence.args ? /* @__PURE__ */ jsxRuntime.jsx("code", { className: "font-mono", children: JSON.stringify(occurrence.args) }) : null,
+      occurrence.error ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: occurrence.error }) : null
+    ] }, index)) }) : first.args ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 font-semibold text-foreground", children: "Arguments" }),
+      /* @__PURE__ */ jsxRuntime.jsx(JsonView.JsonView, { data: first.args })
+    ] }) : null
+  ] });
+}
+function SqlTraceTable({ rows, groupRepeated = true, emptyLabel = "No SQL statements recorded", className }) {
+  const [group, setGroup] = react.useState(groupRepeated);
+  const displayRows = react.useMemo(() => sqlTrace.groupStatements(rows, { group }), [rows, group]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex h-full min-h-0 flex-col gap-density-2", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Switch.Switch, { checked: group, onChange: setGroup, label: "Group repeated statements", className: "self-start px-density-2" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DataTable.DataTable,
+      {
+        data: displayRows,
+        columns: COLUMNS,
+        autoFilter: true,
+        emptyMessage: emptyLabel,
+        globalFilterPlaceholder: "Filter SQL, table, or error…",
+        getRowId: (row) => row.id,
+        renderExpandedRow: (row) => /* @__PURE__ */ jsxRuntime.jsx(StatementDetails, { row })
+      }
+    )
+  ] });
+}
+exports.SqlTraceTable = SqlTraceTable;
+//# sourceMappingURL=SqlTraceTable.cjs.map

package/dist/data/traces/SqlTraceTable.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlTraceTable.cjs","sources":["../../../src/data/traces/SqlTraceTable.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { Switch } from \"../../components/Switch\";\nimport { cn } from \"../../lib/utils\";\nimport { Badge } from \"../Badge\";\nimport { CodeBlock } from \"../CodeBlock\";\nimport { DataTable, type DataTableColumn } from \"../DataTable\";\nimport { JsonView } from \"../JsonView\";\nimport { formatStatementDuration, groupStatements, type SqlDisplayRow } from \"./sql-trace\";\nimport type { SqlStatementRow } from \"./types\";\n\nexport type SqlTraceTableProps = {\n  /** `pg_proxy` / `sql_statements` trace records. */\n  rows: SqlStatementRow[];\n  /** Start with statements sharing a `repeatKey` collapsed into one counted row. Defaults to true. */\n  groupRepeated?: boolean;\n  /** Shown when there are no statements. */\n  emptyLabel?: string;\n  /** Classes applied to the table root. */\n  className?: string;\n};\n\nconst COLUMNS: DataTableColumn<SqlDisplayRow>[] = [\n  { key: \"startedAt\", label: \"Time\", kind: \"timestamp\", shrink: true },\n  {\n    key: \"op\",\n    label: \"Op\",\n    shrink: true,\n    filterable: true,\n    render: (value) => (\n      <Badge variant=\"soft\" tone=\"neutral\" size=\"xs\" className=\"font-mono\">\n        {String(value)}\n      </Badge>\n    ),\n  },\n  { key: \"tables\", label: \"Tables\", kind: \"tags\", shrink: true },\n  {\n    key: \"sql\",\n    label: \"SQL\",\n    grow: true,\n    render: (_value, row) => (\n      <span className=\"flex min-w-0 items-center gap-density-2\">\n        <CodeBlock inline language=\"sql\" source={row.sql} />\n        {row.count > 1 ? (\n          <span title={`${row.count} executions`}>\n            <Badge variant=\"soft\" tone=\"info\" size=\"xs\">\n              {`×${row.count}`}\n            </Badge>\n          </span>\n        ) : null}\n      </span>\n    ),\n  },\n  {\n    key: \"durationMs\",\n    label: \"Duration\",\n    align: \"right\",\n    shrink: true,\n    render: (value, row) => (\n      <span className=\"tabular-nums\" title={row.count > 1 ? `${row.count} executions in total` : undefined}>\n        {formatStatementDuration(Number(value))}\n      </span>\n    ),\n    sortValue: (value) => Number(value),\n  },\n  {\n    key: \"rows\",\n    label: \"Rows\",\n    align: \"right\",\n    shrink: true,\n    render: (value) => (Number(value) < 0 ? <span className=\"text-muted-foreground\">—</span> : <span className=\"tabular-nums\">{String(value)}</span>),\n    sortValue: (value) => Number(value),\n  },\n  {\n    key: \"error\",\n    label: \"Error\",\n    grow: true,\n    render: (value, row) =>\n      value ? (\n        <span className=\"truncate text-destructive\" title={String(value)}>\n          {String(value)}\n          {row.count > 1 ? ` (${row.failed} of ${row.count} failed)` : \"\"}\n        </span>\n      ) : null,\n  },\n];\n\nfunction StatementDetails({ row }: { row: SqlDisplayRow }) {\n  const [first] = row.occurrences as [SqlStatementRow, ...SqlStatementRow[]];\n  return (\n    <div className=\"space-y-density-3\">\n      <CodeBlock language=\"sql\" source={row.sql} copyable />\n      {row.error ? (\n        <div>\n          <div className=\"mb-1 font-semibold text-foreground\">Error</div>\n          <pre className=\"whitespace-pre-wrap break-all text-destructive\">{row.error}</pre>\n        </div>\n      ) : null}\n      <div className=\"text-xs text-muted-foreground\">\n        {first.connection} · {first.driver}\n        {first.truncated?.length ? ` · truncated: ${first.truncated.join(\", \")}` : \"\"}\n      </div>\n      {row.count > 1 ? (\n        <ul className=\"space-y-1 text-xs\" aria-label=\"Executions\">\n          {row.occurrences.map((occurrence, index) => (\n            <li key={index} className={cn(\"flex items-baseline gap-density-3\", occurrence.error && \"text-destructive\")}>\n              <span className=\"tabular-nums text-muted-foreground\">{occurrence.startedAt}</span>\n              <span className=\"tabular-nums\">{formatStatementDuration(occurrence.durationMs)}</span>\n              <span className=\"tabular-nums\">{occurrence.rows < 0 ? \"— rows\" : `${occurrence.rows} rows`}</span>\n              {occurrence.args ? <code className=\"font-mono\">{JSON.stringify(occurrence.args)}</code> : null}\n              {occurrence.error ? <span>{occurrence.error}</span> : null}\n            </li>\n          ))}\n        </ul>\n      ) : first.args ? (\n        <div>\n          <div className=\"mb-1 font-semibold text-foreground\">Arguments</div>\n          <JsonView data={first.args} />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * `pg_proxy` / `sql_statements` records as a DataTable: time, op, tables, SQL,\n * duration, rows and error. Statements that differ only by their values share a\n * `repeatKey` and collapse into one row with a count badge and their total\n * duration; the switch above the table shows each execution instead.\n */\nexport function SqlTraceTable({ rows, groupRepeated = true, emptyLabel = \"No SQL statements recorded\", className }: SqlTraceTableProps) {\n  const [group, setGroup] = useState(groupRepeated);\n  const displayRows = useMemo(() => groupStatements(rows, { group }), [rows, group]);\n  return (\n    <div className={cn(\"flex h-full min-h-0 flex-col gap-density-2\", className)}>\n      <Switch checked={group} onChange={setGroup} label=\"Group repeated statements\" className=\"self-start px-density-2\" />\n      <DataTable\n        data={displayRows}\n        columns={COLUMNS}\n        autoFilter\n        emptyMessage={emptyLabel}\n        globalFilterPlaceholder=\"Filter SQL, table, or error…\"\n        getRowId={(row) => row.id}\n        renderExpandedRow={(row) => <StatementDetails row={row} />}\n      />\n    </div>\n  );\n}\n"],"names":["jsx","Badge","jsxs","CodeBlock","formatStatementDuration","cn","JsonView","useState","useMemo","groupStatements","Switch","DataTable"],"mappings":"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"}

package/dist/data/traces/SqlTraceTable.d.ts

@@ -0,0 +1,19 @@
+import { SqlStatementRow } from './types.js';
+export type SqlTraceTableProps = {
+    /** `pg_proxy` / `sql_statements` trace records. */
+    rows: SqlStatementRow[];
+    /** Start with statements sharing a `repeatKey` collapsed into one counted row. Defaults to true. */
+    groupRepeated?: boolean;
+    /** Shown when there are no statements. */
+    emptyLabel?: string;
+    /** Classes applied to the table root. */
+    className?: string;
+};
+/**
+ * `pg_proxy` / `sql_statements` records as a DataTable: time, op, tables, SQL,
+ * duration, rows and error. Statements that differ only by their values share a
+ * `repeatKey` and collapse into one row with a count badge and their total
+ * duration; the switch above the table shows each execution instead.
+ */
+export declare function SqlTraceTable({ rows, groupRepeated, emptyLabel, className }: SqlTraceTableProps): import("react").JSX.Element;
+//# sourceMappingURL=SqlTraceTable.d.ts.map

package/dist/data/traces/SqlTraceTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlTraceTable.d.ts","sourceRoot":"","sources":["../../../src/data/traces/SqlTraceTable.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,mDAAmD;IACnD,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,oGAAoG;IACpG,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAwGF;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,aAAoB,EAAE,UAAyC,EAAE,SAAS,EAAE,EAAE,kBAAkB,+BAiBrI"}

package/dist/data/traces/SqlTraceTable.js

@@ -0,0 +1,104 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { Switch } from "../../components/Switch.js";
+import { cn } from "../../lib/utils.js";
+import { Badge } from "../Badge.js";
+import { CodeBlock } from "../CodeBlock.js";
+import { DataTable } from "../DataTable.js";
+import { JsonView } from "../JsonView.js";
+import { groupStatements, formatStatementDuration } from "./sql-trace.js";
+const COLUMNS = [
+  { key: "startedAt", label: "Time", kind: "timestamp", shrink: true },
+  {
+    key: "op",
+    label: "Op",
+    shrink: true,
+    filterable: true,
+    render: (value) => /* @__PURE__ */ jsx(Badge, { variant: "soft", tone: "neutral", size: "xs", className: "font-mono", children: String(value) })
+  },
+  { key: "tables", label: "Tables", kind: "tags", shrink: true },
+  {
+    key: "sql",
+    label: "SQL",
+    grow: true,
+    render: (_value, row) => /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-density-2", children: [
+      /* @__PURE__ */ jsx(CodeBlock, { inline: true, language: "sql", source: row.sql }),
+      row.count > 1 ? /* @__PURE__ */ jsx("span", { title: `${row.count} executions`, children: /* @__PURE__ */ jsx(Badge, { variant: "soft", tone: "info", size: "xs", children: `×${row.count}` }) }) : null
+    ] })
+  },
+  {
+    key: "durationMs",
+    label: "Duration",
+    align: "right",
+    shrink: true,
+    render: (value, row) => /* @__PURE__ */ jsx("span", { className: "tabular-nums", title: row.count > 1 ? `${row.count} executions in total` : void 0, children: formatStatementDuration(Number(value)) }),
+    sortValue: (value) => Number(value)
+  },
+  {
+    key: "rows",
+    label: "Rows",
+    align: "right",
+    shrink: true,
+    render: (value) => Number(value) < 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" }) : /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: String(value) }),
+    sortValue: (value) => Number(value)
+  },
+  {
+    key: "error",
+    label: "Error",
+    grow: true,
+    render: (value, row) => value ? /* @__PURE__ */ jsxs("span", { className: "truncate text-destructive", title: String(value), children: [
+      String(value),
+      row.count > 1 ? ` (${row.failed} of ${row.count} failed)` : ""
+    ] }) : null
+  }
+];
+function StatementDetails({ row }) {
+  var _a;
+  const [first] = row.occurrences;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-density-3", children: [
+    /* @__PURE__ */ jsx(CodeBlock, { language: "sql", source: row.sql, copyable: true }),
+    row.error ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-1 font-semibold text-foreground", children: "Error" }),
+      /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap break-all text-destructive", children: row.error })
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+      first.connection,
+      " · ",
+      first.driver,
+      ((_a = first.truncated) == null ? void 0 : _a.length) ? ` · truncated: ${first.truncated.join(", ")}` : ""
+    ] }),
+    row.count > 1 ? /* @__PURE__ */ jsx("ul", { className: "space-y-1 text-xs", "aria-label": "Executions", children: row.occurrences.map((occurrence, index) => /* @__PURE__ */ jsxs("li", { className: cn("flex items-baseline gap-density-3", occurrence.error && "text-destructive"), children: [
+      /* @__PURE__ */ jsx("span", { className: "tabular-nums text-muted-foreground", children: occurrence.startedAt }),
+      /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: formatStatementDuration(occurrence.durationMs) }),
+      /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: occurrence.rows < 0 ? "— rows" : `${occurrence.rows} rows` }),
+      occurrence.args ? /* @__PURE__ */ jsx("code", { className: "font-mono", children: JSON.stringify(occurrence.args) }) : null,
+      occurrence.error ? /* @__PURE__ */ jsx("span", { children: occurrence.error }) : null
+    ] }, index)) }) : first.args ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-1 font-semibold text-foreground", children: "Arguments" }),
+      /* @__PURE__ */ jsx(JsonView, { data: first.args })
+    ] }) : null
+  ] });
+}
+function SqlTraceTable({ rows, groupRepeated = true, emptyLabel = "No SQL statements recorded", className }) {
+  const [group, setGroup] = useState(groupRepeated);
+  const displayRows = useMemo(() => groupStatements(rows, { group }), [rows, group]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 flex-col gap-density-2", className), children: [
+    /* @__PURE__ */ jsx(Switch, { checked: group, onChange: setGroup, label: "Group repeated statements", className: "self-start px-density-2" }),
+    /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        data: displayRows,
+        columns: COLUMNS,
+        autoFilter: true,
+        emptyMessage: emptyLabel,
+        globalFilterPlaceholder: "Filter SQL, table, or error…",
+        getRowId: (row) => row.id,
+        renderExpandedRow: (row) => /* @__PURE__ */ jsx(StatementDetails, { row })
+      }
+    )
+  ] });
+}
+export {
+  SqlTraceTable
+};
+//# sourceMappingURL=SqlTraceTable.js.map

package/dist/data/traces/SqlTraceTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlTraceTable.js","sources":["../../../src/data/traces/SqlTraceTable.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { Switch } from \"../../components/Switch\";\nimport { cn } from \"../../lib/utils\";\nimport { Badge } from \"../Badge\";\nimport { CodeBlock } from \"../CodeBlock\";\nimport { DataTable, type DataTableColumn } from \"../DataTable\";\nimport { JsonView } from \"../JsonView\";\nimport { formatStatementDuration, groupStatements, type SqlDisplayRow } from \"./sql-trace\";\nimport type { SqlStatementRow } from \"./types\";\n\nexport type SqlTraceTableProps = {\n  /** `pg_proxy` / `sql_statements` trace records. */\n  rows: SqlStatementRow[];\n  /** Start with statements sharing a `repeatKey` collapsed into one counted row. Defaults to true. */\n  groupRepeated?: boolean;\n  /** Shown when there are no statements. */\n  emptyLabel?: string;\n  /** Classes applied to the table root. */\n  className?: string;\n};\n\nconst COLUMNS: DataTableColumn<SqlDisplayRow>[] = [\n  { key: \"startedAt\", label: \"Time\", kind: \"timestamp\", shrink: true },\n  {\n    key: \"op\",\n    label: \"Op\",\n    shrink: true,\n    filterable: true,\n    render: (value) => (\n      <Badge variant=\"soft\" tone=\"neutral\" size=\"xs\" className=\"font-mono\">\n        {String(value)}\n      </Badge>\n    ),\n  },\n  { key: \"tables\", label: \"Tables\", kind: \"tags\", shrink: true },\n  {\n    key: \"sql\",\n    label: \"SQL\",\n    grow: true,\n    render: (_value, row) => (\n      <span className=\"flex min-w-0 items-center gap-density-2\">\n        <CodeBlock inline language=\"sql\" source={row.sql} />\n        {row.count > 1 ? (\n          <span title={`${row.count} executions`}>\n            <Badge variant=\"soft\" tone=\"info\" size=\"xs\">\n              {`×${row.count}`}\n            </Badge>\n          </span>\n        ) : null}\n      </span>\n    ),\n  },\n  {\n    key: \"durationMs\",\n    label: \"Duration\",\n    align: \"right\",\n    shrink: true,\n    render: (value, row) => (\n      <span className=\"tabular-nums\" title={row.count > 1 ? `${row.count} executions in total` : undefined}>\n        {formatStatementDuration(Number(value))}\n      </span>\n    ),\n    sortValue: (value) => Number(value),\n  },\n  {\n    key: \"rows\",\n    label: \"Rows\",\n    align: \"right\",\n    shrink: true,\n    render: (value) => (Number(value) < 0 ? <span className=\"text-muted-foreground\">—</span> : <span className=\"tabular-nums\">{String(value)}</span>),\n    sortValue: (value) => Number(value),\n  },\n  {\n    key: \"error\",\n    label: \"Error\",\n    grow: true,\n    render: (value, row) =>\n      value ? (\n        <span className=\"truncate text-destructive\" title={String(value)}>\n          {String(value)}\n          {row.count > 1 ? ` (${row.failed} of ${row.count} failed)` : \"\"}\n        </span>\n      ) : null,\n  },\n];\n\nfunction StatementDetails({ row }: { row: SqlDisplayRow }) {\n  const [first] = row.occurrences as [SqlStatementRow, ...SqlStatementRow[]];\n  return (\n    <div className=\"space-y-density-3\">\n      <CodeBlock language=\"sql\" source={row.sql} copyable />\n      {row.error ? (\n        <div>\n          <div className=\"mb-1 font-semibold text-foreground\">Error</div>\n          <pre className=\"whitespace-pre-wrap break-all text-destructive\">{row.error}</pre>\n        </div>\n      ) : null}\n      <div className=\"text-xs text-muted-foreground\">\n        {first.connection} · {first.driver}\n        {first.truncated?.length ? ` · truncated: ${first.truncated.join(\", \")}` : \"\"}\n      </div>\n      {row.count > 1 ? (\n        <ul className=\"space-y-1 text-xs\" aria-label=\"Executions\">\n          {row.occurrences.map((occurrence, index) => (\n            <li key={index} className={cn(\"flex items-baseline gap-density-3\", occurrence.error && \"text-destructive\")}>\n              <span className=\"tabular-nums text-muted-foreground\">{occurrence.startedAt}</span>\n              <span className=\"tabular-nums\">{formatStatementDuration(occurrence.durationMs)}</span>\n              <span className=\"tabular-nums\">{occurrence.rows < 0 ? \"— rows\" : `${occurrence.rows} rows`}</span>\n              {occurrence.args ? <code className=\"font-mono\">{JSON.stringify(occurrence.args)}</code> : null}\n              {occurrence.error ? <span>{occurrence.error}</span> : null}\n            </li>\n          ))}\n        </ul>\n      ) : first.args ? (\n        <div>\n          <div className=\"mb-1 font-semibold text-foreground\">Arguments</div>\n          <JsonView data={first.args} />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * `pg_proxy` / `sql_statements` records as a DataTable: time, op, tables, SQL,\n * duration, rows and error. Statements that differ only by their values share a\n * `repeatKey` and collapse into one row with a count badge and their total\n * duration; the switch above the table shows each execution instead.\n */\nexport function SqlTraceTable({ rows, groupRepeated = true, emptyLabel = \"No SQL statements recorded\", className }: SqlTraceTableProps) {\n  const [group, setGroup] = useState(groupRepeated);\n  const displayRows = useMemo(() => groupStatements(rows, { group }), [rows, group]);\n  return (\n    <div className={cn(\"flex h-full min-h-0 flex-col gap-density-2\", className)}>\n      <Switch checked={group} onChange={setGroup} label=\"Group repeated statements\" className=\"self-start px-density-2\" />\n      <DataTable\n        data={displayRows}\n        columns={COLUMNS}\n        autoFilter\n        emptyMessage={emptyLabel}\n        globalFilterPlaceholder=\"Filter SQL, table, or error…\"\n        getRowId={(row) => row.id}\n        renderExpandedRow={(row) => <StatementDetails row={row} />}\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}