@flanksource/clicky-ui 0.3.48 → 0.3.50

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, UiLoader, 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 {\n  buildProcessForest,\n  cpuSeriesByKey,\n  flattenForest,\n  formatCpuPercent,\n  processLifetimeMs,\n  pruneExitedProcesses,\n  type ProcessTreeNode,\n} 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   * Tri-state expand-all: true opens every process, false closes them, null\n   * restores the default depth. Without `onExpandAllChange` the host owns the\n   * state and the tree's own Expand / Collapse buttons are hidden.\n   */\n  expandAll?: boolean | null;\n  /** Called when the tree's Expand all / Collapse all buttons change the state. */\n  onExpandAllChange?: (next: boolean | null) => void;\n  /** Drop exited processes, keeping an exited one only while a live descendant hangs off it. */\n  hideExited?: boolean;\n  /** Called with the checkbox state; providing it shows the \"N processes / Hide exited\" toolbar. */\n  onHideExitedChange?: (hide: boolean) => void;\n  /** No trace has arrived yet: with no processes, show a waiting spinner instead of the empty label. */\n  loading?: boolean;\n  /** A load failure, shown as a banner above the tree. */\n  error?: string;\n};\n\n/** The tree is controlled by a host that owns the expand-all buttons, so the tree never changes it. */\nconst hostOwnedExpandAll = () => {};\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=\"min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground\" title={row.command} data-process-command=\"\">\n        {row.command}\n      </span>\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(processLifetimeMs(row))}\n          </span>\n          <span className=\"shrink-0 text-xs tabular-nums text-muted-foreground\" title=\"Peak CPU\">\n            {`peak ${formatCpuPercent(row.peakCpuPercent)}`}\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 ${formatCpuPercent(row.peakCpuPercent)}`}>\n            {formatCpuPercent(row.cpuPercent)}\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 * Each row shows the process, its truncated command, state and usage; exited\n * processes are dimmed and show their lifetime and peak usage. It is built on\n * the same `Tree` primitive and process helpers as `DiagnosticsTree`, which\n * 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  expandAll,\n  onExpandAllChange,\n  hideExited = false,\n  onHideExitedChange,\n  loading = false,\n  error,\n}: ProcessTraceTreeProps) {\n  const full = useMemo(() => buildProcessForest(nodes), [nodes]);\n  const roots = useMemo(() => (hideExited ? pruneExitedProcesses(full) : full), [full, hideExited]);\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  const empty =\n    nodes.length === 0 ? (\n      error ? null : loading ? (\n        <div className=\"p-density-6 text-center text-sm text-muted-foreground\" role=\"status\">\n          <Icon icon={UiLoader} className=\"animate-spin text-3xl text-blue-500\" />\n          <p className=\"mt-2\">Waiting for process trace…</p>\n        </div>\n      ) : (\n        <div className=\"p-density-6 text-center text-sm text-muted-foreground\">{emptyLabel}</div>\n      )\n    ) : (\n      <div className=\"p-density-6 text-center text-sm text-muted-foreground\">Every process has exited</div>\n    );\n\n  const hostOwnsExpandAll = expandAll !== undefined && onExpandAllChange === undefined;\n\n  return (\n    <div className={cn(\"flex min-h-0 flex-col\", className)}>\n      {onHideExitedChange && (\n        <div\n          className=\"flex items-center justify-between gap-2 border-b border-border bg-background px-3 py-1.5 text-xs text-muted-foreground\"\n          data-process-toolbar=\"\"\n        >\n          <span>\n            {nodes.length} {nodes.length === 1 ? \"process\" : \"processes\"}\n          </span>\n          <label className=\"inline-flex cursor-pointer items-center gap-1.5\">\n            <input\n              type=\"checkbox\"\n              checked={hideExited}\n              onChange={(event) => onHideExitedChange(event.target.checked)}\n            />\n            Hide exited\n          </label>\n        </div>\n      )}\n      {error && (\n        <div className=\"whitespace-pre-wrap px-3 py-2 text-xs text-red-700 dark:text-red-400\" role=\"alert\">\n          {error}\n        </div>\n      )}\n      <Tree<ProcessTreeNode>\n        roots={roots}\n        className=\"min-h-0 flex-1\"\n        ariaLabel=\"Process tree\"\n        empty={empty}\n        showControls={!hostOwnsExpandAll}\n        {...(expandAll !== undefined ? { expandAll, onExpandAllChange: onExpandAllChange ?? hostOwnedExpandAll } : {})}\n        {...(expandAll === undefined && onExpandAllChange ? { onExpandAllChange } : {})}\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    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx","Icon","UiServerProcess","UiDebug","processLabel","Sparkline","processStateColor","processStateIcon","Fragment","formatDuration","processLifetimeMs","formatCpuPercent","formatBytes","useMemo","buildProcessForest","pruneExitedProcesses","cpuSeriesByKey","flattenForest","UiLoader","Tree"],"mappings":"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"}

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

@@ -0,0 +1,41 @@
+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;
+    /**
+     * Tri-state expand-all: true opens every process, false closes them, null
+     * restores the default depth. Without `onExpandAllChange` the host owns the
+     * state and the tree's own Expand / Collapse buttons are hidden.
+     */
+    expandAll?: boolean | null;
+    /** Called when the tree's Expand all / Collapse all buttons change the state. */
+    onExpandAllChange?: (next: boolean | null) => void;
+    /** Drop exited processes, keeping an exited one only while a live descendant hangs off it. */
+    hideExited?: boolean;
+    /** Called with the checkbox state; providing it shows the "N processes / Hide exited" toolbar. */
+    onHideExitedChange?: (hide: boolean) => void;
+    /** No trace has arrived yet: with no processes, show a waiting spinner instead of the empty label. */
+    loading?: boolean;
+    /** A load failure, shown as a banner above the tree. */
+    error?: 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.
+ * Each row shows the process, its truncated command, state and usage; 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, expandAll, onExpandAllChange, hideExited, onHideExitedChange, loading, error, }: 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":"AAiBA,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;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3B,iFAAiF;IACjF,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,8FAA8F;IAC9F,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kGAAkG;IAClG,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,sGAAsG;IACtG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAwDF;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,EACX,UAAoC,EACpC,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,UAAkB,EAClB,kBAAkB,EAClB,OAAe,EACf,KAAK,GACN,EAAE,qBAAqB,+BA0EvB"}

package/dist/data/traces/ProcessTraceTree.js

@@ -0,0 +1,135 @@
+import { jsxs, jsx, 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, pruneExitedProcesses, cpuSeriesByKey, flattenForest, processLifetimeMs, formatCpuPercent } from "./process-tree.js";
+import { Sparkline } from "./Sparkline.js";
+import { UiLoader } from "../../icons/components/UiLoader.js";
+import { UiServerProcess } from "../../icons/components/UiServerProcess.js";
+import { UiDebug } from "../../icons/components/UiDebug.js";
+const OPEN_DEPTH = 2;
+const hostOwnedExpandAll = () => {
+};
+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: "min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground", title: row.command, "data-process-command": "", children: row.command }),
+        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(processLifetimeMs(row)) }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", title: "Peak CPU", children: `peak ${formatCpuPercent(row.peakCpuPercent)}` }),
+          /* @__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 ${formatCpuPercent(row.peakCpuPercent)}`, children: formatCpuPercent(row.cpuPercent) }),
+          /* @__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,
+  expandAll,
+  onExpandAllChange,
+  hideExited = false,
+  onHideExitedChange,
+  loading = false,
+  error
+}) {
+  const full = useMemo(() => buildProcessForest(nodes), [nodes]);
+  const roots = useMemo(() => hideExited ? pruneExitedProcesses(full) : full, [full, hideExited]);
+  const series = useMemo(() => cpuSeriesByKey(samples ?? []), [samples]);
+  const selected = useMemo(
+    () => selectedKey ? flattenForest(roots).find((node) => node.row.key === selectedKey) ?? null : null,
+    [roots, selectedKey]
+  );
+  const empty = nodes.length === 0 ? error ? null : loading ? /* @__PURE__ */ jsxs("div", { className: "p-density-6 text-center text-sm text-muted-foreground", role: "status", children: [
+    /* @__PURE__ */ jsx(Icon, { icon: UiLoader, className: "animate-spin text-3xl text-blue-500" }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2", children: "Waiting for process trace…" })
+  ] }) : /* @__PURE__ */ jsx("div", { className: "p-density-6 text-center text-sm text-muted-foreground", children: emptyLabel }) : /* @__PURE__ */ jsx("div", { className: "p-density-6 text-center text-sm text-muted-foreground", children: "Every process has exited" });
+  const hostOwnsExpandAll = expandAll !== void 0 && onExpandAllChange === void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 flex-col", className), children: [
+    onHideExitedChange && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center justify-between gap-2 border-b border-border bg-background px-3 py-1.5 text-xs text-muted-foreground",
+        "data-process-toolbar": "",
+        children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            nodes.length,
+            " ",
+            nodes.length === 1 ? "process" : "processes"
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "inline-flex cursor-pointer items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: hideExited,
+                onChange: (event) => onHideExitedChange(event.target.checked)
+              }
+            ),
+            "Hide exited"
+          ] })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap px-3 py-2 text-xs text-red-700 dark:text-red-400", role: "alert", children: error }),
+    /* @__PURE__ */ jsx(
+      Tree,
+      {
+        roots,
+        className: "min-h-0 flex-1",
+        ariaLabel: "Process tree",
+        empty,
+        showControls: !hostOwnsExpandAll,
+        ...expandAll !== void 0 ? { expandAll, onExpandAllChange: onExpandAllChange ?? hostOwnedExpandAll } : {},
+        ...expandAll === void 0 && onExpandAllChange ? { onExpandAllChange } : {},
+        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, UiLoader, 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 {\n  buildProcessForest,\n  cpuSeriesByKey,\n  flattenForest,\n  formatCpuPercent,\n  processLifetimeMs,\n  pruneExitedProcesses,\n  type ProcessTreeNode,\n} 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   * Tri-state expand-all: true opens every process, false closes them, null\n   * restores the default depth. Without `onExpandAllChange` the host owns the\n   * state and the tree's own Expand / Collapse buttons are hidden.\n   */\n  expandAll?: boolean | null;\n  /** Called when the tree's Expand all / Collapse all buttons change the state. */\n  onExpandAllChange?: (next: boolean | null) => void;\n  /** Drop exited processes, keeping an exited one only while a live descendant hangs off it. */\n  hideExited?: boolean;\n  /** Called with the checkbox state; providing it shows the \"N processes / Hide exited\" toolbar. */\n  onHideExitedChange?: (hide: boolean) => void;\n  /** No trace has arrived yet: with no processes, show a waiting spinner instead of the empty label. */\n  loading?: boolean;\n  /** A load failure, shown as a banner above the tree. */\n  error?: string;\n};\n\n/** The tree is controlled by a host that owns the expand-all buttons, so the tree never changes it. */\nconst hostOwnedExpandAll = () => {};\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=\"min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground\" title={row.command} data-process-command=\"\">\n        {row.command}\n      </span>\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(processLifetimeMs(row))}\n          </span>\n          <span className=\"shrink-0 text-xs tabular-nums text-muted-foreground\" title=\"Peak CPU\">\n            {`peak ${formatCpuPercent(row.peakCpuPercent)}`}\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 ${formatCpuPercent(row.peakCpuPercent)}`}>\n            {formatCpuPercent(row.cpuPercent)}\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 * Each row shows the process, its truncated command, state and usage; exited\n * processes are dimmed and show their lifetime and peak usage. It is built on\n * the same `Tree` primitive and process helpers as `DiagnosticsTree`, which\n * 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  expandAll,\n  onExpandAllChange,\n  hideExited = false,\n  onHideExitedChange,\n  loading = false,\n  error,\n}: ProcessTraceTreeProps) {\n  const full = useMemo(() => buildProcessForest(nodes), [nodes]);\n  const roots = useMemo(() => (hideExited ? pruneExitedProcesses(full) : full), [full, hideExited]);\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  const empty =\n    nodes.length === 0 ? (\n      error ? null : loading ? (\n        <div className=\"p-density-6 text-center text-sm text-muted-foreground\" role=\"status\">\n          <Icon icon={UiLoader} className=\"animate-spin text-3xl text-blue-500\" />\n          <p className=\"mt-2\">Waiting for process trace…</p>\n        </div>\n      ) : (\n        <div className=\"p-density-6 text-center text-sm text-muted-foreground\">{emptyLabel}</div>\n      )\n    ) : (\n      <div className=\"p-density-6 text-center text-sm text-muted-foreground\">Every process has exited</div>\n    );\n\n  const hostOwnsExpandAll = expandAll !== undefined && onExpandAllChange === undefined;\n\n  return (\n    <div className={cn(\"flex min-h-0 flex-col\", className)}>\n      {onHideExitedChange && (\n        <div\n          className=\"flex items-center justify-between gap-2 border-b border-border bg-background px-3 py-1.5 text-xs text-muted-foreground\"\n          data-process-toolbar=\"\"\n        >\n          <span>\n            {nodes.length} {nodes.length === 1 ? \"process\" : \"processes\"}\n          </span>\n          <label className=\"inline-flex cursor-pointer items-center gap-1.5\">\n            <input\n              type=\"checkbox\"\n              checked={hideExited}\n              onChange={(event) => onHideExitedChange(event.target.checked)}\n            />\n            Hide exited\n          </label>\n        </div>\n      )}\n      {error && (\n        <div className=\"whitespace-pre-wrap px-3 py-2 text-xs text-red-700 dark:text-red-400\" role=\"alert\">\n          {error}\n        </div>\n      )}\n      <Tree<ProcessTreeNode>\n        roots={roots}\n        className=\"min-h-0 flex-1\"\n        ariaLabel=\"Process tree\"\n        empty={empty}\n        showControls={!hostOwnsExpandAll}\n        {...(expandAll !== undefined ? { expandAll, onExpandAllChange: onExpandAllChange ?? hostOwnedExpandAll } : {})}\n        {...(expandAll === undefined && onExpandAllChange ? { onExpandAllChange } : {})}\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    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/traces/Sparkline.cjs

@@ -0,0 +1,45 @@
+"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, fill = false, 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}`,
+      ...fill ? { preserveAspectRatio: "none" } : { width, height },
+      className: utils.cn(fill ? "w-full" : "shrink-0", "overflow-visible text-primary", className),
+      style: fill ? { height } : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "polyline",
+        {
+          points,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 1.25,
+          strokeLinejoin: "round",
+          ...fill ? { vectorEffect: "non-scaling-stroke" } : {}
+        }
+      )
+    }
+  );
+}
+function LabeledSparkline({ label, values, format, className }) {
+  const max = Math.max(...values, 0);
+  const only = values[0];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("rounded-lg border border-border bg-muted/50 px-2.5 py-density-2", className), "data-sparkline": label, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-[10px] uppercase tracking-wide text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: values.length > 0 ? `max ${format(max)}` : "" })
+    ] }),
+    values.length < 2 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-[11px] text-muted-foreground", children: only === void 0 ? "No samples" : `${format(only)} (1 sample)` }) : /* @__PURE__ */ jsxRuntime.jsx(Sparkline, { fill: true, values, label: `${label} over time`, width: 160, height: 36, className: "mt-1" })
+  ] });
+}
+exports.LabeledSparkline = LabeledSparkline;
+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  /** Stretch to the width of the container instead of the fixed pixel width. */\n  fill?: boolean;\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, fill = false, 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      {...(fill ? { preserveAspectRatio: \"none\" } : { width, height })}\n      className={cn(fill ? \"w-full\" : \"shrink-0\", \"overflow-visible text-primary\", className)}\n      style={fill ? { height } : undefined}\n    >\n      <polyline\n        points={points}\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={1.25}\n        strokeLinejoin=\"round\"\n        {...(fill ? { vectorEffect: \"non-scaling-stroke\" } : {})}\n      />\n    </svg>\n  );\n}\n\nexport type LabeledSparklineProps = {\n  /** What the line plots, for example \"CPU %\". */\n  label: string;\n  values: number[];\n  /** Formats a value for the max label and the single-sample text. */\n  format: (value: number) => string;\n  className?: string;\n};\n\n/**\n * A sparkline in a labelled tile: the label and the series maximum above the\n * line, \"No samples\" for none and \"<value> (1 sample)\" for one, since a line\n * needs two points.\n */\nexport function LabeledSparkline({ label, values, format, className }: LabeledSparklineProps) {\n  const max = Math.max(...values, 0);\n  const only = values[0];\n  return (\n    <div className={cn(\"rounded-lg border border-border bg-muted/50 px-2.5 py-density-2\", className)} data-sparkline={label}>\n      <div className=\"flex items-center justify-between text-[10px] uppercase tracking-wide text-muted-foreground\">\n        <span>{label}</span>\n        <span>{values.length > 0 ? `max ${format(max)}` : \"\"}</span>\n      </div>\n      {values.length < 2 ? (\n        <div className=\"mt-1 text-[11px] text-muted-foreground\">\n          {only === undefined ? \"No samples\" : `${format(only)} (1 sample)`}\n        </div>\n      ) : (\n        <Sparkline fill values={values} label={`${label} over time`} width={160} height={36} className=\"mt-1\" />\n      )}\n    </div>\n  );\n}\n"],"names":["sparklinePoints","jsx","cn","jsxs"],"mappings":";;;;;AAiBO,SAAS,UAAU,EAAE,QAAQ,OAAO,QAAQ,IAAI,SAAS,IAAI,OAAO,OAAO,UAAA,GAA6B;AAC7G,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,MAC9B,GAAI,OAAO,EAAE,qBAAqB,WAAW,EAAE,OAAO,OAAA;AAAA,MACvD,WAAWC,MAAAA,GAAG,OAAO,WAAW,YAAY,iCAAiC,SAAS;AAAA,MACtF,OAAO,OAAO,EAAE,OAAA,IAAW;AAAA,MAE3B,UAAAD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAa;AAAA,UACb,gBAAe;AAAA,UACd,GAAI,OAAO,EAAE,cAAc,yBAAyB,CAAA;AAAA,QAAC;AAAA,MAAA;AAAA,IACxD;AAAA,EAAA;AAGN;AAgBO,SAAS,iBAAiB,EAAE,OAAO,QAAQ,QAAQ,aAAoC;AAC5F,QAAM,MAAM,KAAK,IAAI,GAAG,QAAQ,CAAC;AACjC,QAAM,OAAO,OAAO,CAAC;AACrB,SACEE,gCAAC,SAAI,WAAWD,MAAAA,GAAG,mEAAmE,SAAS,GAAG,kBAAgB,OAChH,UAAA;AAAA,IAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,+FACb,UAAA;AAAA,MAAAF,2BAAAA,IAAC,UAAM,UAAA,MAAA,CAAM;AAAA,MACbA,2BAAAA,IAAC,QAAA,EAAM,UAAA,OAAO,SAAS,IAAI,OAAO,OAAO,GAAG,CAAC,KAAK,GAAA,CAAG;AAAA,IAAA,GACvD;AAAA,IACC,OAAO,SAAS,IACfA,2BAAAA,IAAC,OAAA,EAAI,WAAU,0CACZ,UAAA,SAAS,SAAY,eAAe,GAAG,OAAO,IAAI,CAAC,cAAA,CACtD,IAEAA,2BAAAA,IAAC,WAAA,EAAU,MAAI,MAAC,QAAgB,OAAO,GAAG,KAAK,cAAc,OAAO,KAAK,QAAQ,IAAI,WAAU,OAAA,CAAO;AAAA,EAAA,GAE1G;AAEJ;;;"}

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

@@ -0,0 +1,29 @@
+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;
+    /** Stretch to the width of the container instead of the fixed pixel width. */
+    fill?: boolean;
+    /** 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, fill, className }: SparklineProps): import("react").JSX.Element | null;
+export type LabeledSparklineProps = {
+    /** What the line plots, for example "CPU %". */
+    label: string;
+    values: number[];
+    /** Formats a value for the max label and the single-sample text. */
+    format: (value: number) => string;
+    className?: string;
+};
+/**
+ * A sparkline in a labelled tile: the label and the series maximum above the
+ * line, "No samples" for none and "<value> (1 sample)" for one, since a line
+ * needs two points.
+ */
+export declare function LabeledSparkline({ label, values, format, className }: LabeledSparklineProps): import("react").JSX.Element;
+//# 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,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,sFAAsF;AACtF,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAU,EAAE,MAAW,EAAE,IAAY,EAAE,SAAS,EAAE,EAAE,cAAc,sCAsB5G;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,oEAAoE;IACpE,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,qBAAqB,+BAkB3F"}

package/dist/data/traces/Sparkline.js

@@ -0,0 +1,45 @@
+import { jsxs, 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, fill = false, 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}`,
+      ...fill ? { preserveAspectRatio: "none" } : { width, height },
+      className: cn(fill ? "w-full" : "shrink-0", "overflow-visible text-primary", className),
+      style: fill ? { height } : void 0,
+      children: /* @__PURE__ */ jsx(
+        "polyline",
+        {
+          points,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 1.25,
+          strokeLinejoin: "round",
+          ...fill ? { vectorEffect: "non-scaling-stroke" } : {}
+        }
+      )
+    }
+  );
+}
+function LabeledSparkline({ label, values, format, className }) {
+  const max = Math.max(...values, 0);
+  const only = values[0];
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border border-border bg-muted/50 px-2.5 py-density-2", className), "data-sparkline": label, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-[10px] uppercase tracking-wide text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { children: label }),
+      /* @__PURE__ */ jsx("span", { children: values.length > 0 ? `max ${format(max)}` : "" })
+    ] }),
+    values.length < 2 ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-[11px] text-muted-foreground", children: only === void 0 ? "No samples" : `${format(only)} (1 sample)` }) : /* @__PURE__ */ jsx(Sparkline, { fill: true, values, label: `${label} over time`, width: 160, height: 36, className: "mt-1" })
+  ] });
+}
+export {
+  LabeledSparkline,
+  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  /** Stretch to the width of the container instead of the fixed pixel width. */\n  fill?: boolean;\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, fill = false, 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      {...(fill ? { preserveAspectRatio: \"none\" } : { width, height })}\n      className={cn(fill ? \"w-full\" : \"shrink-0\", \"overflow-visible text-primary\", className)}\n      style={fill ? { height } : undefined}\n    >\n      <polyline\n        points={points}\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={1.25}\n        strokeLinejoin=\"round\"\n        {...(fill ? { vectorEffect: \"non-scaling-stroke\" } : {})}\n      />\n    </svg>\n  );\n}\n\nexport type LabeledSparklineProps = {\n  /** What the line plots, for example \"CPU %\". */\n  label: string;\n  values: number[];\n  /** Formats a value for the max label and the single-sample text. */\n  format: (value: number) => string;\n  className?: string;\n};\n\n/**\n * A sparkline in a labelled tile: the label and the series maximum above the\n * line, \"No samples\" for none and \"<value> (1 sample)\" for one, since a line\n * needs two points.\n */\nexport function LabeledSparkline({ label, values, format, className }: LabeledSparklineProps) {\n  const max = Math.max(...values, 0);\n  const only = values[0];\n  return (\n    <div className={cn(\"rounded-lg border border-border bg-muted/50 px-2.5 py-density-2\", className)} data-sparkline={label}>\n      <div className=\"flex items-center justify-between text-[10px] uppercase tracking-wide text-muted-foreground\">\n        <span>{label}</span>\n        <span>{values.length > 0 ? `max ${format(max)}` : \"\"}</span>\n      </div>\n      {values.length < 2 ? (\n        <div className=\"mt-1 text-[11px] text-muted-foreground\">\n          {only === undefined ? \"No samples\" : `${format(only)} (1 sample)`}\n        </div>\n      ) : (\n        <Sparkline fill values={values} label={`${label} over time`} width={160} height={36} className=\"mt-1\" />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAiBO,SAAS,UAAU,EAAE,QAAQ,OAAO,QAAQ,IAAI,SAAS,IAAI,OAAO,OAAO,UAAA,GAA6B;AAC7G,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,MAC9B,GAAI,OAAO,EAAE,qBAAqB,WAAW,EAAE,OAAO,OAAA;AAAA,MACvD,WAAW,GAAG,OAAO,WAAW,YAAY,iCAAiC,SAAS;AAAA,MACtF,OAAO,OAAO,EAAE,OAAA,IAAW;AAAA,MAE3B,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAa;AAAA,UACb,gBAAe;AAAA,UACd,GAAI,OAAO,EAAE,cAAc,yBAAyB,CAAA;AAAA,QAAC;AAAA,MAAA;AAAA,IACxD;AAAA,EAAA;AAGN;AAgBO,SAAS,iBAAiB,EAAE,OAAO,QAAQ,QAAQ,aAAoC;AAC5F,QAAM,MAAM,KAAK,IAAI,GAAG,QAAQ,CAAC;AACjC,QAAM,OAAO,OAAO,CAAC;AACrB,SACE,qBAAC,SAAI,WAAW,GAAG,mEAAmE,SAAS,GAAG,kBAAgB,OAChH,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,+FACb,UAAA;AAAA,MAAA,oBAAC,UAAM,UAAA,MAAA,CAAM;AAAA,MACb,oBAAC,QAAA,EAAM,UAAA,OAAO,SAAS,IAAI,OAAO,OAAO,GAAG,CAAC,KAAK,GAAA,CAAG;AAAA,IAAA,GACvD;AAAA,IACC,OAAO,SAAS,IACf,oBAAC,OAAA,EAAI,WAAU,0CACZ,UAAA,SAAS,SAAY,eAAe,GAAG,OAAO,IAAI,CAAC,cAAA,CACtD,IAEA,oBAAC,WAAA,EAAU,MAAI,MAAC,QAAgB,OAAO,GAAG,KAAK,cAAc,OAAO,KAAK,QAAQ,IAAI,WAAU,OAAA,CAAO;AAAA,EAAA,GAE1G;AAEJ;"}

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"}