@flanksource/clicky-ui 0.3.48 → 0.3.50

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessFacetTable.cjs","sources":["../../../src/data/traces/ProcessFacetTable.tsx"],"sourcesContent":["import { DataTable, type DataTableColumnInput } from \"../DataTable\";\nimport { SAMPLE_FACETS, type FacetReading } from \"./process-facets\";\nimport { formatProcessTimestamp } from \"./process-tree\";\nimport type { ProcessDescriptor, ProcessEnv, ProcessSampleFacet } from \"./types\";\n\ntype EnvRow = { name: string; value: string };\n\nconst addressColumns: Array<DataTableColumnInput<ProcessDescriptor>> = [\n  { key: \"fd\", label: \"FD\", sortable: true },\n  {\n    key: \"protocol\",\n    label: \"Protocol\",\n    sortable: true,\n    filterable: true,\n    accessor: (descriptor) => descriptor.protocol || descriptor.type,\n  },\n  { key: \"state\", label: \"State\", sortable: true, filterable: true },\n  {\n    key: \"localAddr\",\n    label: \"Local\",\n    sortable: true,\n    grow: true,\n    accessor: (descriptor) => descriptor.localAddr || descriptor.name,\n  },\n  { key: \"remoteAddr\", label: \"Remote\", sortable: true },\n];\n\nconst descriptorColumns: Record<ProcessSampleFacet, Array<DataTableColumnInput<ProcessDescriptor>>> = {\n  openFiles: [\n    { key: \"fd\", label: \"FD\", sortable: true },\n    { key: \"type\", label: \"Type\", sortable: true, filterable: true },\n    { key: \"name\", label: \"Path\", sortable: true, grow: true },\n  ],\n  sockets: addressColumns,\n  connections: addressColumns,\n  ports: [\n    { key: \"port\", label: \"Port\", sortable: true },\n    { key: \"protocol\", label: \"Protocol\", sortable: true, filterable: true },\n    { key: \"localAddr\", label: \"Address\", sortable: true, grow: true },\n    { key: \"fd\", label: \"FD\", sortable: true },\n  ],\n};\n\nconst envColumns: Array<DataTableColumnInput<EnvRow>> = [\n  { key: \"name\", label: \"Name\", sortable: true },\n  { key: \"value\", label: \"Value\", grow: true },\n];\n\nconst tableChrome = { autoFilter: true, showThemeControl: false, showFullscreenControl: false } as const;\n\nexport type ProcessFacetTableProps =\n  | {\n      facet: \"env\";\n      /** The environment recorded on the process's `process_tree` node. */\n      environment?: ProcessEnv;\n      /** Why the environment could not be read. */\n      error?: string;\n    }\n  | {\n      facet: ProcessSampleFacet;\n      /** The latest stored list of the facet; undefined when none was stored for this process. */\n      reading: FacetReading | undefined;\n    };\n\n/**\n * One facet of a process as a trace stored it, in a filterable table: its\n * environment (recorded once on its `process_tree` node) or the latest list of\n * its open files, sockets, listening ports or connections from `process_samples`,\n * with the time that list was read. Presentational: nothing is fetched.\n */\nexport function ProcessFacetTable(props: ProcessFacetTableProps) {\n  if (props.facet === \"env\") {\n    const rows: EnvRow[] = Object.entries(props.environment ?? {})\n      .map(([name, value]) => ({ name, value }))\n      .sort((a, b) => a.name.localeCompare(b.name));\n    return (\n      <div className=\"space-y-2\" data-process-facet=\"env\">\n        {props.error && (\n          <div className=\"whitespace-pre-wrap text-xs text-red-700 dark:text-red-400\" role=\"alert\">\n            {props.error}\n          </div>\n        )}\n        {props.environment && (\n          <DataTable<EnvRow>\n            data={rows}\n            columns={envColumns}\n            getRowId={(row) => row.name}\n            emptyMessage=\"The process has no environment variables\"\n            {...tableChrome}\n          />\n        )}\n      </div>\n    );\n  }\n\n  const { reading, facet } = props;\n  return (\n    <div className=\"space-y-2\" data-process-facet={facet}>\n      <div className=\"text-xs text-muted-foreground\">\n        {reading ? `Read at ${formatProcessTimestamp(reading.readAt)}` : \"No reading stored for this process yet\"}\n      </div>\n      {reading && (\n        <DataTable<ProcessDescriptor>\n          data={reading.rows}\n          columns={descriptorColumns[facet]}\n          getRowId={(row, index) => `${row.fd}:${index}`}\n          emptyMessage={SAMPLE_FACETS[facet].empty}\n          {...tableChrome}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["jsxs","jsx","DataTable","formatProcessTimestamp","SAMPLE_FACETS"],"mappings":"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"}

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

@@ -0,0 +1,21 @@
+import { FacetReading } from './process-facets.js';
+import { ProcessEnv, ProcessSampleFacet } from './types.js';
+export type ProcessFacetTableProps = {
+    facet: "env";
+    /** The environment recorded on the process's `process_tree` node. */
+    environment?: ProcessEnv;
+    /** Why the environment could not be read. */
+    error?: string;
+} | {
+    facet: ProcessSampleFacet;
+    /** The latest stored list of the facet; undefined when none was stored for this process. */
+    reading: FacetReading | undefined;
+};
+/**
+ * One facet of a process as a trace stored it, in a filterable table: its
+ * environment (recorded once on its `process_tree` node) or the latest list of
+ * its open files, sockets, listening ports or connections from `process_samples`,
+ * with the time that list was read. Presentational: nothing is fetched.
+ */
+export declare function ProcessFacetTable(props: ProcessFacetTableProps): import("react").JSX.Element;
+//# sourceMappingURL=ProcessFacetTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessFacetTable.d.ts","sourceRoot":"","sources":["../../../src/data/traces/ProcessFacetTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEpE,OAAO,KAAK,EAAqB,UAAU,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA+CjF,MAAM,MAAM,sBAAsB,GAC9B;IACE,KAAK,EAAE,KAAK,CAAC;IACb,qEAAqE;IACrE,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GACD;IACE,KAAK,EAAE,kBAAkB,CAAC;IAC1B,4FAA4F;IAC5F,OAAO,EAAE,YAAY,GAAG,SAAS,CAAC;CACnC,CAAC;AAEN;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BA0C9D"}

package/dist/data/traces/ProcessFacetTable.js

@@ -0,0 +1,79 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { DataTable } from "../DataTable.js";
+import { SAMPLE_FACETS } from "./process-facets.js";
+import { formatProcessTimestamp } from "./process-tree.js";
+const addressColumns = [
+  { key: "fd", label: "FD", sortable: true },
+  {
+    key: "protocol",
+    label: "Protocol",
+    sortable: true,
+    filterable: true,
+    accessor: (descriptor) => descriptor.protocol || descriptor.type
+  },
+  { key: "state", label: "State", sortable: true, filterable: true },
+  {
+    key: "localAddr",
+    label: "Local",
+    sortable: true,
+    grow: true,
+    accessor: (descriptor) => descriptor.localAddr || descriptor.name
+  },
+  { key: "remoteAddr", label: "Remote", sortable: true }
+];
+const descriptorColumns = {
+  openFiles: [
+    { key: "fd", label: "FD", sortable: true },
+    { key: "type", label: "Type", sortable: true, filterable: true },
+    { key: "name", label: "Path", sortable: true, grow: true }
+  ],
+  sockets: addressColumns,
+  connections: addressColumns,
+  ports: [
+    { key: "port", label: "Port", sortable: true },
+    { key: "protocol", label: "Protocol", sortable: true, filterable: true },
+    { key: "localAddr", label: "Address", sortable: true, grow: true },
+    { key: "fd", label: "FD", sortable: true }
+  ]
+};
+const envColumns = [
+  { key: "name", label: "Name", sortable: true },
+  { key: "value", label: "Value", grow: true }
+];
+const tableChrome = { autoFilter: true, showThemeControl: false, showFullscreenControl: false };
+function ProcessFacetTable(props) {
+  if (props.facet === "env") {
+    const rows = Object.entries(props.environment ?? {}).map(([name, value]) => ({ name, value })).sort((a, b) => a.name.localeCompare(b.name));
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", "data-process-facet": "env", children: [
+      props.error && /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-xs text-red-700 dark:text-red-400", role: "alert", children: props.error }),
+      props.environment && /* @__PURE__ */ jsx(
+        DataTable,
+        {
+          data: rows,
+          columns: envColumns,
+          getRowId: (row) => row.name,
+          emptyMessage: "The process has no environment variables",
+          ...tableChrome
+        }
+      )
+    ] });
+  }
+  const { reading, facet } = props;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", "data-process-facet": facet, children: [
+    /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: reading ? `Read at ${formatProcessTimestamp(reading.readAt)}` : "No reading stored for this process yet" }),
+    reading && /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        data: reading.rows,
+        columns: descriptorColumns[facet],
+        getRowId: (row, index) => `${row.fd}:${index}`,
+        emptyMessage: SAMPLE_FACETS[facet].empty,
+        ...tableChrome
+      }
+    )
+  ] });
+}
+export {
+  ProcessFacetTable
+};
+//# sourceMappingURL=ProcessFacetTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessFacetTable.js","sources":["../../../src/data/traces/ProcessFacetTable.tsx"],"sourcesContent":["import { DataTable, type DataTableColumnInput } from \"../DataTable\";\nimport { SAMPLE_FACETS, type FacetReading } from \"./process-facets\";\nimport { formatProcessTimestamp } from \"./process-tree\";\nimport type { ProcessDescriptor, ProcessEnv, ProcessSampleFacet } from \"./types\";\n\ntype EnvRow = { name: string; value: string };\n\nconst addressColumns: Array<DataTableColumnInput<ProcessDescriptor>> = [\n  { key: \"fd\", label: \"FD\", sortable: true },\n  {\n    key: \"protocol\",\n    label: \"Protocol\",\n    sortable: true,\n    filterable: true,\n    accessor: (descriptor) => descriptor.protocol || descriptor.type,\n  },\n  { key: \"state\", label: \"State\", sortable: true, filterable: true },\n  {\n    key: \"localAddr\",\n    label: \"Local\",\n    sortable: true,\n    grow: true,\n    accessor: (descriptor) => descriptor.localAddr || descriptor.name,\n  },\n  { key: \"remoteAddr\", label: \"Remote\", sortable: true },\n];\n\nconst descriptorColumns: Record<ProcessSampleFacet, Array<DataTableColumnInput<ProcessDescriptor>>> = {\n  openFiles: [\n    { key: \"fd\", label: \"FD\", sortable: true },\n    { key: \"type\", label: \"Type\", sortable: true, filterable: true },\n    { key: \"name\", label: \"Path\", sortable: true, grow: true },\n  ],\n  sockets: addressColumns,\n  connections: addressColumns,\n  ports: [\n    { key: \"port\", label: \"Port\", sortable: true },\n    { key: \"protocol\", label: \"Protocol\", sortable: true, filterable: true },\n    { key: \"localAddr\", label: \"Address\", sortable: true, grow: true },\n    { key: \"fd\", label: \"FD\", sortable: true },\n  ],\n};\n\nconst envColumns: Array<DataTableColumnInput<EnvRow>> = [\n  { key: \"name\", label: \"Name\", sortable: true },\n  { key: \"value\", label: \"Value\", grow: true },\n];\n\nconst tableChrome = { autoFilter: true, showThemeControl: false, showFullscreenControl: false } as const;\n\nexport type ProcessFacetTableProps =\n  | {\n      facet: \"env\";\n      /** The environment recorded on the process's `process_tree` node. */\n      environment?: ProcessEnv;\n      /** Why the environment could not be read. */\n      error?: string;\n    }\n  | {\n      facet: ProcessSampleFacet;\n      /** The latest stored list of the facet; undefined when none was stored for this process. */\n      reading: FacetReading | undefined;\n    };\n\n/**\n * One facet of a process as a trace stored it, in a filterable table: its\n * environment (recorded once on its `process_tree` node) or the latest list of\n * its open files, sockets, listening ports or connections from `process_samples`,\n * with the time that list was read. Presentational: nothing is fetched.\n */\nexport function ProcessFacetTable(props: ProcessFacetTableProps) {\n  if (props.facet === \"env\") {\n    const rows: EnvRow[] = Object.entries(props.environment ?? {})\n      .map(([name, value]) => ({ name, value }))\n      .sort((a, b) => a.name.localeCompare(b.name));\n    return (\n      <div className=\"space-y-2\" data-process-facet=\"env\">\n        {props.error && (\n          <div className=\"whitespace-pre-wrap text-xs text-red-700 dark:text-red-400\" role=\"alert\">\n            {props.error}\n          </div>\n        )}\n        {props.environment && (\n          <DataTable<EnvRow>\n            data={rows}\n            columns={envColumns}\n            getRowId={(row) => row.name}\n            emptyMessage=\"The process has no environment variables\"\n            {...tableChrome}\n          />\n        )}\n      </div>\n    );\n  }\n\n  const { reading, facet } = props;\n  return (\n    <div className=\"space-y-2\" data-process-facet={facet}>\n      <div className=\"text-xs text-muted-foreground\">\n        {reading ? `Read at ${formatProcessTimestamp(reading.readAt)}` : \"No reading stored for this process yet\"}\n      </div>\n      {reading && (\n        <DataTable<ProcessDescriptor>\n          data={reading.rows}\n          columns={descriptorColumns[facet]}\n          getRowId={(row, index) => `${row.fd}:${index}`}\n          emptyMessage={SAMPLE_FACETS[facet].empty}\n          {...tableChrome}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAOA,MAAM,iBAAiE;AAAA,EACrE,EAAE,KAAK,MAAM,OAAO,MAAM,UAAU,KAAA;AAAA,EACpC;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,UAAU,CAAC,eAAe,WAAW,YAAY,WAAW;AAAA,EAAA;AAAA,EAE9D,EAAE,KAAK,SAAS,OAAO,SAAS,UAAU,MAAM,YAAY,KAAA;AAAA,EAC5D;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA,IACV,MAAM;AAAA,IACN,UAAU,CAAC,eAAe,WAAW,aAAa,WAAW;AAAA,EAAA;AAAA,EAE/D,EAAE,KAAK,cAAc,OAAO,UAAU,UAAU,KAAA;AAClD;AAEA,MAAM,oBAAgG;AAAA,EACpG,WAAW;AAAA,IACT,EAAE,KAAK,MAAM,OAAO,MAAM,UAAU,KAAA;AAAA,IACpC,EAAE,KAAK,QAAQ,OAAO,QAAQ,UAAU,MAAM,YAAY,KAAA;AAAA,IAC1D,EAAE,KAAK,QAAQ,OAAO,QAAQ,UAAU,MAAM,MAAM,KAAA;AAAA,EAAK;AAAA,EAE3D,SAAS;AAAA,EACT,aAAa;AAAA,EACb,OAAO;AAAA,IACL,EAAE,KAAK,QAAQ,OAAO,QAAQ,UAAU,KAAA;AAAA,IACxC,EAAE,KAAK,YAAY,OAAO,YAAY,UAAU,MAAM,YAAY,KAAA;AAAA,IAClE,EAAE,KAAK,aAAa,OAAO,WAAW,UAAU,MAAM,MAAM,KAAA;AAAA,IAC5D,EAAE,KAAK,MAAM,OAAO,MAAM,UAAU,KAAA;AAAA,EAAK;AAE7C;AAEA,MAAM,aAAkD;AAAA,EACtD,EAAE,KAAK,QAAQ,OAAO,QAAQ,UAAU,KAAA;AAAA,EACxC,EAAE,KAAK,SAAS,OAAO,SAAS,MAAM,KAAA;AACxC;AAEA,MAAM,cAAc,EAAE,YAAY,MAAM,kBAAkB,OAAO,uBAAuB,MAAA;AAsBjF,SAAS,kBAAkB,OAA+B;AAC/D,MAAI,MAAM,UAAU,OAAO;AACzB,UAAM,OAAiB,OAAO,QAAQ,MAAM,eAAe,EAAE,EAC1D,IAAI,CAAC,CAAC,MAAM,KAAK,OAAO,EAAE,MAAM,QAAQ,EACxC,KAAK,CAAC,GAAG,MAAM,EAAE,KAAK,cAAc,EAAE,IAAI,CAAC;AAC9C,WACE,qBAAC,OAAA,EAAI,WAAU,aAAY,sBAAmB,OAC3C,UAAA;AAAA,MAAA,MAAM,6BACJ,OAAA,EAAI,WAAU,8DAA6D,MAAK,SAC9E,gBAAM,MAAA,CACT;AAAA,MAED,MAAM,eACL;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,SAAS;AAAA,UACT,UAAU,CAAC,QAAQ,IAAI;AAAA,UACvB,cAAa;AAAA,UACZ,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN,GAEJ;AAAA,EAEJ;AAEA,QAAM,EAAE,SAAS,MAAA,IAAU;AAC3B,SACE,qBAAC,OAAA,EAAI,WAAU,aAAY,sBAAoB,OAC7C,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,iCACZ,UAAA,UAAU,WAAW,uBAAuB,QAAQ,MAAM,CAAC,KAAK,yCAAA,CACnE;AAAA,IACC,WACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,QAAQ;AAAA,QACd,SAAS,kBAAkB,KAAK;AAAA,QAChC,UAAU,CAAC,KAAK,UAAU,GAAG,IAAI,EAAE,IAAI,KAAK;AAAA,QAC5C,cAAc,cAAc,KAAK,EAAE;AAAA,QAClC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GAEJ;AAEJ;"}

package/dist/data/traces/ProcessRecordViews.cjs

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const StackDumpView = require("../diagnostics/StackDumpView.cjs");
+const GoProfileView = require("./GoProfileView.cjs");
+const stackCheckpoints = require("./stack-checkpoints.cjs");
+function byProcess(records) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const record of records) groups.set(record.key, [...groups.get(record.key) ?? [], record]);
+  return [...groups];
+}
+function ProcessSections({ processes, render }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 space-y-density-3 overflow-auto p-density-2", children: processes.map(([key, own]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-trace-process": key, children: [
+    processes.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 font-mono text-xs text-muted-foreground", children: key }),
+    render(key, own)
+  ] }, key)) });
+}
+function GoProfileTraceView({ rows }) {
+  const processes = react.useMemo(() => byProcess(rows), [rows]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ProcessSections, { processes, render: (key, own) => /* @__PURE__ */ jsxRuntime.jsx(GoProfileView.GoProfileView, { records: own, processKey: key }) });
+}
+function StackTraceView({ rows }) {
+  const processes = react.useMemo(() => byProcess(rows).map(([key]) => [key, stackCheckpoints.stackCheckpoints(rows, key).reverse()]), [rows]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ProcessSections,
+    {
+      processes,
+      render: (_key, checkpoints) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-density-2", children: checkpoints.map((checkpoint) => /* @__PURE__ */ jsxRuntime.jsx("section", { className: "rounded border border-border px-density-2", "data-stack-checkpoint": checkpoint.checkpointId, children: /* @__PURE__ */ jsxRuntime.jsx(
+        StackDumpView.StackDumpView,
+        {
+          records: checkpoint.records,
+          headerActions: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[11px] text-muted-foreground", children: checkpoint.transport })
+        }
+      ) }, checkpoint.checkpointId)) })
+    }
+  );
+}
+exports.GoProfileTraceView = GoProfileTraceView;
+exports.StackTraceView = StackTraceView;
+//# sourceMappingURL=ProcessRecordViews.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessRecordViews.cjs","sources":["../../../src/data/traces/ProcessRecordViews.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from \"react\";\nimport { StackDumpView } from \"../diagnostics/StackDumpView\";\nimport { GoProfileView } from \"./GoProfileView\";\nimport { stackCheckpoints } from \"./stack-checkpoints\";\nimport type { GoProfileRecord, StackRecord } from \"./types\";\n\n/** Splits records by the `process_tree` key they belong to, in the order the keys first appear. */\nfunction byProcess<T extends { key: string }>(records: T[]): Array<[string, T[]]> {\n  const groups = new Map<string, T[]>();\n  for (const record of records) groups.set(record.key, [...(groups.get(record.key) ?? []), record]);\n  return [...groups];\n}\n\n/** One section per process; the key is only named when the records span several processes. */\nfunction ProcessSections<T>({ processes, render }: { processes: Array<readonly [string, T]>; render: (key: string, own: T) => ReactNode }) {\n  return (\n    <div className=\"min-h-0 flex-1 space-y-density-3 overflow-auto p-density-2\">\n      {processes.map(([key, own]) => (\n        <div key={key} data-trace-process={key}>\n          {processes.length > 1 && <div className=\"mb-1 font-mono text-xs text-muted-foreground\">{key}</div>}\n          {render(key, own)}\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/**\n * The `goprof` records of a trace window: one `GoProfileView` per process key,\n * because a profile view shows the checkpoints of one process.\n */\nexport function GoProfileTraceView({ rows }: { rows: GoProfileRecord[] }) {\n  const processes = useMemo(() => byProcess(rows), [rows]);\n  return <ProcessSections processes={processes} render={(key, own) => <GoProfileView records={own} processKey={key} />} />;\n}\n\n/**\n * The `stacks` records of a trace window: for each process, one `StackDumpView`\n * per checkpoint, latest first, each labelled with the transport it was taken by.\n */\nexport function StackTraceView({ rows }: { rows: StackRecord[] }) {\n  const processes = useMemo(() => byProcess(rows).map(([key]) => [key, stackCheckpoints(rows, key).reverse()] as const), [rows]);\n  return (\n    <ProcessSections\n      processes={processes}\n      render={(_key, checkpoints) => (\n        <div className=\"space-y-density-2\">\n          {checkpoints.map((checkpoint) => (\n            <section key={checkpoint.checkpointId} className=\"rounded border border-border px-density-2\" data-stack-checkpoint={checkpoint.checkpointId}>\n              <StackDumpView\n                records={checkpoint.records}\n                headerActions={<span className=\"font-mono text-[11px] text-muted-foreground\">{checkpoint.transport}</span>}\n              />\n            </section>\n          ))}\n        </div>\n      )}\n    />\n  );\n}\n"],"names":["jsx","jsxs","useMemo","GoProfileView","stackCheckpoints","StackDumpView"],"mappings":";;;;;;;AAOA,SAAS,UAAqC,SAAoC;AAChF,QAAM,6BAAa,IAAA;AACnB,aAAW,UAAU,QAAS,QAAO,IAAI,OAAO,KAAK,CAAC,GAAI,OAAO,IAAI,OAAO,GAAG,KAAK,CAAA,GAAK,MAAM,CAAC;AAChG,SAAO,CAAC,GAAG,MAAM;AACnB;AAGA,SAAS,gBAAmB,EAAE,WAAW,UAAkG;AACzI,SACEA,2BAAAA,IAAC,OAAA,EAAI,WAAU,8DACZ,oBAAU,IAAI,CAAC,CAAC,KAAK,GAAG,MACvBC,2BAAAA,KAAC,OAAA,EAAc,sBAAoB,KAChC,UAAA;AAAA,IAAA,UAAU,SAAS,KAAKD,+BAAC,OAAA,EAAI,WAAU,gDAAgD,UAAA,KAAI;AAAA,IAC3F,OAAO,KAAK,GAAG;AAAA,EAAA,KAFR,GAGV,CACD,GACH;AAEJ;AAMO,SAAS,mBAAmB,EAAE,QAAqC;AACxE,QAAM,YAAYE,MAAAA,QAAQ,MAAM,UAAU,IAAI,GAAG,CAAC,IAAI,CAAC;AACvD,SAAOF,2BAAAA,IAAC,iBAAA,EAAgB,WAAsB,QAAQ,CAAC,KAAK,QAAQA,2BAAAA,IAACG,cAAAA,eAAA,EAAc,SAAS,KAAK,YAAY,KAAK,GAAI;AACxH;AAMO,SAAS,eAAe,EAAE,QAAiC;AAChE,QAAM,YAAYD,MAAAA,QAAQ,MAAM,UAAU,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,KAAKE,iBAAAA,iBAAiB,MAAM,GAAG,EAAE,QAAA,CAAS,CAAU,GAAG,CAAC,IAAI,CAAC;AAC7H,SACEJ,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,QAAQ,CAAC,MAAM,gBACbA,2BAAAA,IAAC,OAAA,EAAI,WAAU,qBACZ,UAAA,YAAY,IAAI,CAAC,eAChBA,2BAAAA,IAAC,WAAA,EAAsC,WAAU,6CAA4C,yBAAuB,WAAW,cAC7H,UAAAA,2BAAAA;AAAAA,QAACK,cAAAA;AAAAA,QAAA;AAAA,UACC,SAAS,WAAW;AAAA,UACpB,eAAeL,2BAAAA,IAAC,QAAA,EAAK,WAAU,+CAA+C,qBAAW,UAAA,CAAU;AAAA,QAAA;AAAA,MAAA,KAHzF,WAAW,YAKzB,CACD,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAIR;;;"}

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

@@ -0,0 +1,16 @@
+import { GoProfileRecord, StackRecord } from './types.js';
+/**
+ * The `goprof` records of a trace window: one `GoProfileView` per process key,
+ * because a profile view shows the checkpoints of one process.
+ */
+export declare function GoProfileTraceView({ rows }: {
+    rows: GoProfileRecord[];
+}): import("react").JSX.Element;
+/**
+ * The `stacks` records of a trace window: for each process, one `StackDumpView`
+ * per checkpoint, latest first, each labelled with the transport it was taken by.
+ */
+export declare function StackTraceView({ rows }: {
+    rows: StackRecord[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=ProcessRecordViews.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessRecordViews.d.ts","sourceRoot":"","sources":["../../../src/data/traces/ProcessRecordViews.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAuB5D;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,eAAe,EAAE,CAAA;CAAE,+BAGvE;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,EAAE,CAAA;CAAE,+BAmB/D"}

package/dist/data/traces/ProcessRecordViews.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { StackDumpView } from "../diagnostics/StackDumpView.js";
+import { GoProfileView } from "./GoProfileView.js";
+import { stackCheckpoints } from "./stack-checkpoints.js";
+function byProcess(records) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const record of records) groups.set(record.key, [...groups.get(record.key) ?? [], record]);
+  return [...groups];
+}
+function ProcessSections({ processes, render }) {
+  return /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 space-y-density-3 overflow-auto p-density-2", children: processes.map(([key, own]) => /* @__PURE__ */ jsxs("div", { "data-trace-process": key, children: [
+    processes.length > 1 && /* @__PURE__ */ jsx("div", { className: "mb-1 font-mono text-xs text-muted-foreground", children: key }),
+    render(key, own)
+  ] }, key)) });
+}
+function GoProfileTraceView({ rows }) {
+  const processes = useMemo(() => byProcess(rows), [rows]);
+  return /* @__PURE__ */ jsx(ProcessSections, { processes, render: (key, own) => /* @__PURE__ */ jsx(GoProfileView, { records: own, processKey: key }) });
+}
+function StackTraceView({ rows }) {
+  const processes = useMemo(() => byProcess(rows).map(([key]) => [key, stackCheckpoints(rows, key).reverse()]), [rows]);
+  return /* @__PURE__ */ jsx(
+    ProcessSections,
+    {
+      processes,
+      render: (_key, checkpoints) => /* @__PURE__ */ jsx("div", { className: "space-y-density-2", children: checkpoints.map((checkpoint) => /* @__PURE__ */ jsx("section", { className: "rounded border border-border px-density-2", "data-stack-checkpoint": checkpoint.checkpointId, children: /* @__PURE__ */ jsx(
+        StackDumpView,
+        {
+          records: checkpoint.records,
+          headerActions: /* @__PURE__ */ jsx("span", { className: "font-mono text-[11px] text-muted-foreground", children: checkpoint.transport })
+        }
+      ) }, checkpoint.checkpointId)) })
+    }
+  );
+}
+export {
+  GoProfileTraceView,
+  StackTraceView
+};
+//# sourceMappingURL=ProcessRecordViews.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessRecordViews.js","sources":["../../../src/data/traces/ProcessRecordViews.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from \"react\";\nimport { StackDumpView } from \"../diagnostics/StackDumpView\";\nimport { GoProfileView } from \"./GoProfileView\";\nimport { stackCheckpoints } from \"./stack-checkpoints\";\nimport type { GoProfileRecord, StackRecord } from \"./types\";\n\n/** Splits records by the `process_tree` key they belong to, in the order the keys first appear. */\nfunction byProcess<T extends { key: string }>(records: T[]): Array<[string, T[]]> {\n  const groups = new Map<string, T[]>();\n  for (const record of records) groups.set(record.key, [...(groups.get(record.key) ?? []), record]);\n  return [...groups];\n}\n\n/** One section per process; the key is only named when the records span several processes. */\nfunction ProcessSections<T>({ processes, render }: { processes: Array<readonly [string, T]>; render: (key: string, own: T) => ReactNode }) {\n  return (\n    <div className=\"min-h-0 flex-1 space-y-density-3 overflow-auto p-density-2\">\n      {processes.map(([key, own]) => (\n        <div key={key} data-trace-process={key}>\n          {processes.length > 1 && <div className=\"mb-1 font-mono text-xs text-muted-foreground\">{key}</div>}\n          {render(key, own)}\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/**\n * The `goprof` records of a trace window: one `GoProfileView` per process key,\n * because a profile view shows the checkpoints of one process.\n */\nexport function GoProfileTraceView({ rows }: { rows: GoProfileRecord[] }) {\n  const processes = useMemo(() => byProcess(rows), [rows]);\n  return <ProcessSections processes={processes} render={(key, own) => <GoProfileView records={own} processKey={key} />} />;\n}\n\n/**\n * The `stacks` records of a trace window: for each process, one `StackDumpView`\n * per checkpoint, latest first, each labelled with the transport it was taken by.\n */\nexport function StackTraceView({ rows }: { rows: StackRecord[] }) {\n  const processes = useMemo(() => byProcess(rows).map(([key]) => [key, stackCheckpoints(rows, key).reverse()] as const), [rows]);\n  return (\n    <ProcessSections\n      processes={processes}\n      render={(_key, checkpoints) => (\n        <div className=\"space-y-density-2\">\n          {checkpoints.map((checkpoint) => (\n            <section key={checkpoint.checkpointId} className=\"rounded border border-border px-density-2\" data-stack-checkpoint={checkpoint.checkpointId}>\n              <StackDumpView\n                records={checkpoint.records}\n                headerActions={<span className=\"font-mono text-[11px] text-muted-foreground\">{checkpoint.transport}</span>}\n              />\n            </section>\n          ))}\n        </div>\n      )}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AAOA,SAAS,UAAqC,SAAoC;AAChF,QAAM,6BAAa,IAAA;AACnB,aAAW,UAAU,QAAS,QAAO,IAAI,OAAO,KAAK,CAAC,GAAI,OAAO,IAAI,OAAO,GAAG,KAAK,CAAA,GAAK,MAAM,CAAC;AAChG,SAAO,CAAC,GAAG,MAAM;AACnB;AAGA,SAAS,gBAAmB,EAAE,WAAW,UAAkG;AACzI,SACE,oBAAC,OAAA,EAAI,WAAU,8DACZ,oBAAU,IAAI,CAAC,CAAC,KAAK,GAAG,MACvB,qBAAC,OAAA,EAAc,sBAAoB,KAChC,UAAA;AAAA,IAAA,UAAU,SAAS,KAAK,oBAAC,OAAA,EAAI,WAAU,gDAAgD,UAAA,KAAI;AAAA,IAC3F,OAAO,KAAK,GAAG;AAAA,EAAA,KAFR,GAGV,CACD,GACH;AAEJ;AAMO,SAAS,mBAAmB,EAAE,QAAqC;AACxE,QAAM,YAAY,QAAQ,MAAM,UAAU,IAAI,GAAG,CAAC,IAAI,CAAC;AACvD,SAAO,oBAAC,iBAAA,EAAgB,WAAsB,QAAQ,CAAC,KAAK,QAAQ,oBAAC,eAAA,EAAc,SAAS,KAAK,YAAY,KAAK,GAAI;AACxH;AAMO,SAAS,eAAe,EAAE,QAAiC;AAChE,QAAM,YAAY,QAAQ,MAAM,UAAU,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,KAAK,iBAAiB,MAAM,GAAG,EAAE,QAAA,CAAS,CAAU,GAAG,CAAC,IAAI,CAAC;AAC7H,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,QAAQ,CAAC,MAAM,gBACb,oBAAC,OAAA,EAAI,WAAU,qBACZ,UAAA,YAAY,IAAI,CAAC,eAChB,oBAAC,WAAA,EAAsC,WAAU,6CAA4C,yBAAuB,WAAW,cAC7H,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,WAAW;AAAA,UACpB,eAAe,oBAAC,QAAA,EAAK,WAAU,+CAA+C,qBAAW,UAAA,CAAU;AAAA,QAAA;AAAA,MAAA,KAHzF,WAAW,YAKzB,CACD,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/data/traces/ProcessTraceDetail.cjs

@@ -0,0 +1,316 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const button = require("../../components/button.cjs");
+const select = require("../../components/select.cjs");
+const Tabs = require("../../layout/Tabs.cjs");
+const format = require("../../lib/format.cjs");
+const utils = require("../../lib/utils.cjs");
+const ConfirmDialog = require("../../overlay/ConfirmDialog.cjs");
+const MetricTile = require("../diagnostics/MetricTile.cjs");
+const metricTone = require("../diagnostics/metric-tone.cjs");
+const StackDumpView = require("../diagnostics/StackDumpView.cjs");
+const utils$1 = require("../diagnostics/utils.cjs");
+const Icon = require("../Icon.cjs");
+const processFacets = require("./process-facets.cjs");
+const processTree = require("./process-tree.cjs");
+const ProcessFacetTable = require("./ProcessFacetTable.cjs");
+const stackCheckpoints = require("./stack-checkpoints.cjs");
+const Sparkline = require("./Sparkline.cjs");
+const UiServerProcess = require("../../icons/components/UiServerProcess.cjs");
+const UiDebug = require("../../icons/components/UiDebug.cjs");
+const UiLoader = require("../../icons/components/UiLoader.cjs");
+const UiDebugSmall = require("../../icons/components/UiDebugSmall.cjs");
+const STACK_TRANSPORTS = {
+  inprocess: {
+    label: (hasStack) => hasStack ? "Refresh stack trace" : "Collect stack trace",
+    title: "Take a fresh observation and dump the goroutine stacks"
+  },
+  native: {
+    label: () => "Native sample",
+    title: "Sample the process's native threads without interrupting it"
+  },
+  pprof: {
+    label: () => "Collect via pprof",
+    title: "Read the goroutine profile from the process's pprof endpoint"
+  },
+  gops: {
+    label: () => "Collect via gops",
+    title: "Read the goroutine stacks from the process's gops agent"
+  },
+  sigquit: {
+    label: () => "Dump goroutines & kill",
+    title: "Send SIGQUIT: the process prints every goroutine's stack and exits",
+    warning: (pid) => `This sends SIGQUIT to pid ${pid}. The process prints every goroutine's stack and exits.`
+  }
+};
+function transportSpec(transport) {
+  const spec = STACK_TRANSPORTS[transport];
+  if (!spec) {
+    throw new Error(`unknown stack transport "${transport}"; expected one of ${Object.keys(STACK_TRANSPORTS).join(", ")}`);
+  }
+  return spec;
+}
+const NO_STACKS = [];
+function Section({ title, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: title }),
+    children
+  ] });
+}
+function InfoTile({ label, value, wide }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `rounded-lg border border-border bg-muted/50 px-2.5 py-density-2 ${wide ? "col-span-2" : ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 break-all text-xs font-medium text-foreground", children: value })
+  ] });
+}
+function Header({ node }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-density-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: node.isRoot ? UiServerProcess.UiServerProcess : UiDebug.UiDebug, className: "shrink-0 text-2xl text-blue-600" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "break-words text-lg font-bold text-foreground", children: utils$1.processLabel(node) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-density-2 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+        "pid ",
+        node.pid
+      ] }),
+      node.ppid ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+        "ppid ",
+        node.ppid
+      ] }) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 ${utils$1.processStateColor(node.status)}`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: utils$1.processStateIcon(node.status) }),
+        node.status
+      ] })
+    ] })
+  ] });
+}
+function CollectButtons({
+  transports,
+  hasStack,
+  collecting,
+  onCollect
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-density-1", "data-stack-actions": "", children: transports.map((transport) => {
+    const spec = transportSpec(transport.transport);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      button.Button,
+      {
+        size: "sm",
+        variant: transport.destructive ? "destructive" : hasStack ? "outline" : "default",
+        disabled: collecting,
+        title: spec.title,
+        onClick: () => onCollect(transport),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: collecting ? UiLoader.UiLoader : UiDebugSmall.UiDebugSmall, className: collecting ? "mr-1 animate-spin" : "mr-1" }),
+          spec.label(hasStack)
+        ]
+      },
+      transport.transport
+    );
+  }) });
+}
+function StackSection({
+  node,
+  stacks,
+  onCollectStack,
+  collecting,
+  collectError
+}) {
+  var _a;
+  const [confirming, setConfirming] = react.useState(null);
+  const [picked, setPicked] = react.useState(null);
+  const checkpoints = react.useMemo(() => stackCheckpoints.stackCheckpoints(stacks, node.key), [stacks, node.key]);
+  const transports = node.stackTransports ?? [];
+  const canCollect = Boolean(onCollectStack) && transports.length > 0;
+  if (checkpoints.length === 0 && !canCollect) return null;
+  const selected = checkpoints.find((checkpoint) => checkpoint.checkpointId === picked) ?? checkpoints[checkpoints.length - 1];
+  const buttons = canCollect ? /* @__PURE__ */ jsxRuntime.jsx(
+    CollectButtons,
+    {
+      transports,
+      hasStack: Boolean(selected),
+      collecting: Boolean(collecting),
+      onCollect: (transport) => transport.destructive ? setConfirming(transport) : void (onCollectStack == null ? void 0 : onCollectStack(node.key, transport.transport))
+    }
+  ) : null;
+  const confirmingSpec = confirming ? transportSpec(confirming.transport) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Section, { title: "Stack", children: [
+    collectError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 whitespace-pre-wrap text-xs text-red-700 dark:text-red-400", role: "alert", children: collectError }),
+    selected ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-density-1", children: [
+      checkpoints.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-md", children: /* @__PURE__ */ jsxRuntime.jsx(
+        select.Select,
+        {
+          "aria-label": "Stack checkpoint",
+          value: selected.checkpointId,
+          onChange: (event) => setPicked(event.target.value),
+          options: [...checkpoints].reverse().map((checkpoint) => ({
+            value: checkpoint.checkpointId,
+            label: [
+              processTree.formatProcessTimestamp(checkpoint.takenAt),
+              checkpoint.reason,
+              checkpoint.transport,
+              checkpoint.failed ? "failed" : ""
+            ].filter(Boolean).join(" · ")
+          }))
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        StackDumpView.StackDumpView,
+        {
+          records: selected.records,
+          ...buttons ? { headerActions: buttons } : {}
+        },
+        `${node.key}:${selected.checkpointId}`
+      )
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: collecting ? "Collecting stack trace..." : "No stack trace collected yet." }),
+      buttons
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ConfirmDialog.ConfirmDialog,
+      {
+        open: confirming !== null,
+        title: `${(confirmingSpec == null ? void 0 : confirmingSpec.label(false)) ?? ""}?`,
+        warning: ((_a = confirmingSpec == null ? void 0 : confirmingSpec.warning) == null ? void 0 : _a.call(confirmingSpec, node.pid)) ?? `Collecting this stack over ${(confirming == null ? void 0 : confirming.transport) ?? ""} terminates pid ${node.pid}.`,
+        message: "The stack is shown here once the dump arrives. Use a non-destructive transport to look without killing.",
+        confirmLabel: (confirmingSpec == null ? void 0 : confirmingSpec.label(false)) ?? "Collect",
+        variant: "destructive",
+        onCancel: () => setConfirming(null),
+        onConfirm: () => {
+          const transport = confirming;
+          setConfirming(null);
+          if (transport) void (onCollectStack == null ? void 0 : onCollectStack(node.key, transport.transport));
+        }
+      }
+    )
+  ] });
+}
+function Overview({
+  node,
+  samples,
+  links,
+  ...stack
+}) {
+  const exited = processTree.isProcessExited(node);
+  const series = processTree.processSeries(samples, node.key);
+  const disk = processFacets.diskSeries(samples, node.key);
+  const lastDisk = { read: disk.read[disk.read.length - 1], write: disk.write[disk.write.length - 1] };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-density-3", children: [
+    links,
+    /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Command", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap break-all rounded bg-blue-50 p-2 font-mono text-xs text-foreground dark:bg-blue-500/10", children: node.command }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Process", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-density-2 text-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InfoTile, { label: "Cwd", value: node.cwd || "Unavailable", wide: true }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoTile, { label: "Started", value: processTree.formatProcessTimestamp(node.startedAt) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoTile,
+        {
+          label: "Exited",
+          value: exited ? processTree.formatProcessTimestamp(node.exitedAt ?? node.lastSeenAt) : "running"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoTile,
+        {
+          label: "Lifetime",
+          value: `${format.formatDuration(processTree.processLifetimeMs(node))}${exited ? "" : " so far"}`
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Section, { title: "Resources", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-density-1 sm:grid-cols-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MetricTile.MetricTile,
+          {
+            label: "CPU",
+            value: processTree.formatCpuPercent(node.cpuPercent),
+            barPct: Math.min(100, node.cpuPercent ?? 0),
+            tone: metricTone.cpuTone(node.cpuPercent ?? 0)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(MetricTile.MetricTile, { label: "RSS", value: format.formatBytes(node.rssBytes) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MetricTile.MetricTile,
+          {
+            label: "Peak CPU",
+            value: processTree.formatCpuPercent(node.peakCpuPercent),
+            tone: metricTone.cpuTone(node.peakCpuPercent ?? 0)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(MetricTile.MetricTile, { label: "Peak RSS", value: format.formatBytes(node.peakRssBytes) }),
+        lastDisk.read !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(MetricTile.MetricTile, { label: "Disk read", value: format.formatBytes(lastDisk.read) }),
+        lastDisk.write !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(MetricTile.MetricTile, { label: "Disk write", value: format.formatBytes(lastDisk.write) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 grid grid-cols-2 gap-density-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Sparkline.LabeledSparkline, { label: "CPU %", values: series.cpu, format: (value) => `${value.toFixed(1)}%` }),
+        /* @__PURE__ */ jsxRuntime.jsx(Sparkline.LabeledSparkline, { label: "RSS", values: series.rss, format: format.formatBytes }),
+        disk.read.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Sparkline.LabeledSparkline, { label: "Disk read", values: disk.read, format: format.formatBytes }),
+        disk.write.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Sparkline.LabeledSparkline, { label: "Disk write", values: disk.write, format: format.formatBytes })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(StackSection, { node, ...stack }, node.key)
+  ] });
+}
+function FacetTab({
+  node,
+  samples,
+  facet
+}) {
+  const { label } = processFacets.SAMPLE_FACETS[facet];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-density-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Sparkline.LabeledSparkline, { label, values: processFacets.facetCountSeries(samples, node.key, facet), format: String }),
+    /* @__PURE__ */ jsxRuntime.jsx(ProcessFacetTable.ProcessFacetTable, { facet, reading: processFacets.latestFacetReading(samples, node.key, facet) })
+  ] });
+}
+function ProcessTraceDetail({
+  node,
+  samples,
+  stacks = NO_STACKS,
+  links,
+  onCollectStack,
+  collecting,
+  collectError,
+  className
+}) {
+  const [tab, setTab] = react.useState("overview");
+  if (!node) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiServerProcess.UiServerProcess, className: "mb-2 block text-4xl" }),
+      "Select a process to view its trace"
+    ] }) });
+  }
+  const hasEnvironment = Boolean(node.environment || node.environmentError);
+  const tabs = [
+    { id: "overview", label: "Overview" },
+    ...hasEnvironment ? [{ id: "env", label: "Environment" }] : [],
+    ...processFacets.armedFacets(samples).map((facet) => ({ id: facet, label: processFacets.SAMPLE_FACETS[facet].label }))
+  ];
+  const active = tabs.some((item) => item.id === tab) ? tab : "overview";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("h-full space-y-density-3 overflow-y-auto p-density-4", className), "data-process-detail": node.key, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Header, { node }),
+    tabs.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(Tabs.Tabs, { tabs, value: active, onChange: (id) => setTab(id) }),
+    active === "overview" ? /* @__PURE__ */ jsxRuntime.jsx(
+      Overview,
+      {
+        node,
+        samples,
+        stacks,
+        links,
+        ...onCollectStack ? { onCollectStack } : {},
+        ...collecting !== void 0 ? { collecting } : {},
+        ...collectError ? { collectError } : {}
+      }
+    ) : active === "env" ? /* @__PURE__ */ jsxRuntime.jsx(
+      ProcessFacetTable.ProcessFacetTable,
+      {
+        facet: "env",
+        ...node.environment ? { environment: node.environment } : {},
+        ...node.environmentError ? { error: node.environmentError } : {}
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(FacetTab, { node, samples, facet: active }, `${node.key}:${active}`)
+  ] });
+}
+exports.ProcessTraceDetail = ProcessTraceDetail;
+//# sourceMappingURL=ProcessTraceDetail.cjs.map