@flanksource/clicky-ui 0.3.49 → 0.3.50

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessTraceDetail.cjs","sources":["../../../src/data/traces/ProcessTraceDetail.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { Select } from \"../../components/select\";\nimport { UiDebug, UiDebugSmall, UiLoader, UiServerProcess } from \"../../icons\";\nimport { Tabs, type TabItem } from \"../../layout/Tabs\";\nimport { formatBytes, formatDuration } from \"../../lib/format\";\nimport { cn } from \"../../lib/utils\";\nimport { ConfirmDialog } from \"../../overlay/ConfirmDialog\";\nimport { MetricTile } from \"../diagnostics/MetricTile\";\nimport { cpuTone } from \"../diagnostics/metric-tone\";\nimport { StackDumpView } from \"../diagnostics/StackDumpView\";\nimport { processLabel, processStateColor, processStateIcon } from \"../diagnostics/utils\";\nimport { Icon } from \"../Icon\";\nimport {\n  SAMPLE_FACETS,\n  armedFacets,\n  diskSeries,\n  facetCountSeries,\n  latestFacetReading,\n} from \"./process-facets\";\nimport {\n  formatCpuPercent,\n  formatProcessTimestamp,\n  isProcessExited,\n  processLifetimeMs,\n  processSeries,\n} from \"./process-tree\";\nimport { ProcessFacetTable } from \"./ProcessFacetTable\";\nimport { stackCheckpoints } from \"./stack-checkpoints\";\nimport { LabeledSparkline } from \"./Sparkline\";\nimport type { ProcessNodeRow, ProcessSampleFacet, ProcessSampleRow, ProcessStackTransport, StackRecord } from \"./types\";\n\ntype TransportSpec = {\n  label: (hasStack: boolean) => string;\n  title: string;\n  /** Shown when a destructive collection asks for confirmation. */\n  warning?: (pid: number) => string;\n};\n\n/** How each stack transport a node offers in `stackTransports` is presented. */\nconst STACK_TRANSPORTS: Record<string, TransportSpec> = {\n  inprocess: {\n    label: (hasStack) => (hasStack ? \"Refresh stack trace\" : \"Collect stack trace\"),\n    title: \"Take a fresh observation and dump the goroutine stacks\",\n  },\n  native: {\n    label: () => \"Native sample\",\n    title: \"Sample the process's native threads without interrupting it\",\n  },\n  pprof: {\n    label: () => \"Collect via pprof\",\n    title: \"Read the goroutine profile from the process's pprof endpoint\",\n  },\n  gops: {\n    label: () => \"Collect via gops\",\n    title: \"Read the goroutine stacks from the process's gops agent\",\n  },\n  sigquit: {\n    label: () => \"Dump goroutines & kill\",\n    title: \"Send SIGQUIT: the process prints every goroutine's stack and exits\",\n    warning: (pid) => `This sends SIGQUIT to pid ${pid}. The process prints every goroutine's stack and exits.`,\n  },\n};\n\nfunction transportSpec(transport: string): TransportSpec {\n  const spec = STACK_TRANSPORTS[transport];\n  if (!spec) {\n    throw new Error(`unknown stack transport \"${transport}\"; expected one of ${Object.keys(STACK_TRANSPORTS).join(\", \")}`);\n  }\n  return spec;\n}\n\ntype DetailTab = \"overview\" | \"env\" | ProcessSampleFacet;\n\nconst NO_STACKS: StackRecord[] = [];\n\nexport type ProcessTraceDetailProps = {\n  /** The selected `process_tree` record; null renders the empty selection state. */\n  node: ProcessNodeRow | null;\n  /**\n   * `process_samples` records; those of other processes are ignored. They carry\n   * the resource series, and the facet counts and lists: a facet tab is shown\n   * only when the samples carry that facet's count, that is when the session\n   * armed it.\n   */\n  samples: ProcessSampleRow[];\n  /** `stacks` records; those of other processes are ignored. */\n  stacks?: StackRecord[];\n  /** Host content at the top of Overview, for example a link to the fixture step that started the process. */\n  links?: ReactNode;\n  /**\n   * Collects a stack for a process over one of its `stackTransports`. Without it\n   * no collect buttons are shown. A destructive transport (sigquit) kills the\n   * process, so it asks for confirmation first.\n   */\n  onCollectStack?: (key: string, transport: string) => void | Promise<void>;\n  /** A collection is in flight: collect buttons are disabled. */\n  collecting?: boolean;\n  /** Why the last collection failed. */\n  collectError?: string;\n  className?: string;\n};\n\nfunction Section({ title, children }: { title: string; children: ReactNode }) {\n  return (\n    <section>\n      <div className=\"mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground\">{title}</div>\n      {children}\n    </section>\n  );\n}\n\nfunction InfoTile({ label, value, wide }: { label: string; value: string; wide?: boolean }) {\n  return (\n    <div className={`rounded-lg border border-border bg-muted/50 px-2.5 py-density-2 ${wide ? \"col-span-2\" : \"\"}`}>\n      <div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">{label}</div>\n      <div className=\"mt-0.5 break-all text-xs font-medium text-foreground\">{value}</div>\n    </div>\n  );\n}\n\nfunction Header({ node }: { node: ProcessNodeRow }) {\n  return (\n    <div className=\"min-w-0\">\n      <div className=\"flex items-center gap-density-2\">\n        <Icon icon={node.isRoot ? UiServerProcess : UiDebug} className=\"shrink-0 text-2xl text-blue-600\" />\n        <h2 className=\"break-words text-lg font-bold text-foreground\">{processLabel(node)}</h2>\n      </div>\n      <div className=\"mt-1 flex flex-wrap items-center gap-density-2 text-xs text-muted-foreground\">\n        <span className=\"font-mono\">pid {node.pid}</span>\n        {node.ppid ? <span className=\"font-mono\">ppid {node.ppid}</span> : null}\n        <span className={`inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 ${processStateColor(node.status)}`}>\n          <Icon icon={processStateIcon(node.status)} />\n          {node.status}\n        </span>\n      </div>\n    </div>\n  );\n}\n\nfunction CollectButtons({\n  transports,\n  hasStack,\n  collecting,\n  onCollect,\n}: {\n  transports: ProcessStackTransport[];\n  hasStack: boolean;\n  collecting: boolean;\n  onCollect: (transport: ProcessStackTransport) => void;\n}) {\n  return (\n    <div className=\"flex items-center gap-density-1\" data-stack-actions=\"\">\n      {transports.map((transport) => {\n        const spec = transportSpec(transport.transport);\n        return (\n          <Button\n            key={transport.transport}\n            size=\"sm\"\n            variant={transport.destructive ? \"destructive\" : hasStack ? \"outline\" : \"default\"}\n            disabled={collecting}\n            title={spec.title}\n            onClick={() => onCollect(transport)}\n          >\n            <Icon icon={collecting ? UiLoader : UiDebugSmall} className={collecting ? \"mr-1 animate-spin\" : \"mr-1\"} />\n            {spec.label(hasStack)}\n          </Button>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction StackSection({\n  node,\n  stacks,\n  onCollectStack,\n  collecting,\n  collectError,\n}: Pick<ProcessTraceDetailProps, \"onCollectStack\" | \"collecting\" | \"collectError\"> & {\n  node: ProcessNodeRow;\n  stacks: StackRecord[];\n}) {\n  const [confirming, setConfirming] = useState<ProcessStackTransport | null>(null);\n  const [picked, setPicked] = useState<string | null>(null);\n  const checkpoints = useMemo(() => stackCheckpoints(stacks, node.key), [stacks, node.key]);\n  const transports = node.stackTransports ?? [];\n  const canCollect = Boolean(onCollectStack) && transports.length > 0;\n  if (checkpoints.length === 0 && !canCollect) return null;\n\n  const selected = checkpoints.find((checkpoint) => checkpoint.checkpointId === picked) ?? checkpoints[checkpoints.length - 1];\n  const buttons = canCollect ? (\n    <CollectButtons\n      transports={transports}\n      hasStack={Boolean(selected)}\n      collecting={Boolean(collecting)}\n      onCollect={(transport) => (transport.destructive ? setConfirming(transport) : void onCollectStack?.(node.key, transport.transport))}\n    />\n  ) : null;\n  const confirmingSpec = confirming ? transportSpec(confirming.transport) : null;\n\n  return (\n    <Section title=\"Stack\">\n      {collectError && (\n        <div className=\"mb-2 whitespace-pre-wrap text-xs text-red-700 dark:text-red-400\" role=\"alert\">\n          {collectError}\n        </div>\n      )}\n      {selected ? (\n        <div className=\"space-y-density-1\">\n          {checkpoints.length > 1 && (\n            <div className=\"max-w-md\">\n              <Select\n                aria-label=\"Stack checkpoint\"\n                value={selected.checkpointId}\n                onChange={(event) => setPicked(event.target.value)}\n                options={[...checkpoints].reverse().map((checkpoint) => ({\n                  value: checkpoint.checkpointId,\n                  label: [\n                    formatProcessTimestamp(checkpoint.takenAt),\n                    checkpoint.reason,\n                    checkpoint.transport,\n                    checkpoint.failed ? \"failed\" : \"\",\n                  ]\n                    .filter(Boolean)\n                    .join(\" · \"),\n                }))}\n              />\n            </div>\n          )}\n          <StackDumpView\n            key={`${node.key}:${selected.checkpointId}`}\n            records={selected.records}\n            {...(buttons ? { headerActions: buttons } : {})}\n          />\n        </div>\n      ) : (\n        <div className=\"flex items-center justify-between gap-3\">\n          <div className=\"text-xs text-muted-foreground\">\n            {collecting ? \"Collecting stack trace...\" : \"No stack trace collected yet.\"}\n          </div>\n          {buttons}\n        </div>\n      )}\n      <ConfirmDialog\n        open={confirming !== null}\n        title={`${confirmingSpec?.label(false) ?? \"\"}?`}\n        warning={\n          confirmingSpec?.warning?.(node.pid) ??\n          `Collecting this stack over ${confirming?.transport ?? \"\"} terminates pid ${node.pid}.`\n        }\n        message=\"The stack is shown here once the dump arrives. Use a non-destructive transport to look without killing.\"\n        confirmLabel={confirmingSpec?.label(false) ?? \"Collect\"}\n        variant=\"destructive\"\n        onCancel={() => setConfirming(null)}\n        onConfirm={() => {\n          const transport = confirming;\n          setConfirming(null);\n          if (transport) void onCollectStack?.(node.key, transport.transport);\n        }}\n      />\n    </Section>\n  );\n}\n\nfunction Overview({\n  node,\n  samples,\n  links,\n  ...stack\n}: Pick<ProcessTraceDetailProps, \"samples\" | \"links\" | \"onCollectStack\" | \"collecting\" | \"collectError\"> & {\n  node: ProcessNodeRow;\n  stacks: StackRecord[];\n}) {\n  const exited = isProcessExited(node);\n  const series = processSeries(samples, node.key);\n  const disk = diskSeries(samples, node.key);\n  const lastDisk = { read: disk.read[disk.read.length - 1], write: disk.write[disk.write.length - 1] };\n  return (\n    <div className=\"space-y-density-3\">\n      {links}\n\n      <Section title=\"Command\">\n        <pre className=\"whitespace-pre-wrap break-all rounded bg-blue-50 p-2 font-mono text-xs text-foreground dark:bg-blue-500/10\">\n          {node.command}\n        </pre>\n      </Section>\n\n      <Section title=\"Process\">\n        <div className=\"grid grid-cols-2 gap-density-2 text-sm\">\n          <InfoTile label=\"Cwd\" value={node.cwd || \"Unavailable\"} wide />\n          <InfoTile label=\"Started\" value={formatProcessTimestamp(node.startedAt)} />\n          <InfoTile\n            label=\"Exited\"\n            value={exited ? formatProcessTimestamp(node.exitedAt ?? node.lastSeenAt) : \"running\"}\n          />\n          <InfoTile\n            label=\"Lifetime\"\n            value={`${formatDuration(processLifetimeMs(node))}${exited ? \"\" : \" so far\"}`}\n          />\n        </div>\n      </Section>\n\n      <Section title=\"Resources\">\n        <div className=\"grid grid-cols-2 gap-density-1 sm:grid-cols-4\">\n          <MetricTile\n            label=\"CPU\"\n            value={formatCpuPercent(node.cpuPercent)}\n            barPct={Math.min(100, node.cpuPercent ?? 0)}\n            tone={cpuTone(node.cpuPercent ?? 0)}\n          />\n          <MetricTile label=\"RSS\" value={formatBytes(node.rssBytes)} />\n          <MetricTile\n            label=\"Peak CPU\"\n            value={formatCpuPercent(node.peakCpuPercent)}\n            tone={cpuTone(node.peakCpuPercent ?? 0)}\n          />\n          <MetricTile label=\"Peak RSS\" value={formatBytes(node.peakRssBytes)} />\n          {lastDisk.read !== undefined && <MetricTile label=\"Disk read\" value={formatBytes(lastDisk.read)} />}\n          {lastDisk.write !== undefined && <MetricTile label=\"Disk write\" value={formatBytes(lastDisk.write)} />}\n        </div>\n        <div className=\"mt-2 grid grid-cols-2 gap-density-2\">\n          <LabeledSparkline label=\"CPU %\" values={series.cpu} format={(value) => `${value.toFixed(1)}%`} />\n          <LabeledSparkline label=\"RSS\" values={series.rss} format={formatBytes} />\n          {disk.read.length > 0 && <LabeledSparkline label=\"Disk read\" values={disk.read} format={formatBytes} />}\n          {disk.write.length > 0 && <LabeledSparkline label=\"Disk write\" values={disk.write} format={formatBytes} />}\n        </div>\n      </Section>\n\n      <StackSection key={node.key} node={node} {...stack} />\n    </div>\n  );\n}\n\nfunction FacetTab({\n  node,\n  samples,\n  facet,\n}: {\n  node: ProcessNodeRow;\n  samples: ProcessSampleRow[];\n  facet: ProcessSampleFacet;\n}) {\n  const { label } = SAMPLE_FACETS[facet];\n  return (\n    <div className=\"space-y-density-3\">\n      <LabeledSparkline label={label} values={facetCountSeries(samples, node.key, facet)} format={String} />\n      <ProcessFacetTable facet={facet} reading={latestFacetReading(samples, node.key, facet)} />\n    </div>\n  );\n}\n\n/**\n * Everything the trace knows about one process: its command and lifetime,\n * resource usage (CPU, RSS, disk IO) and sparklines, and its stack with a\n * chooser across the checkpoints that dumped it and collect buttons for the\n * transports it offers. Tabs for open files, sockets, ports and connections\n * appear when the samples carry that facet, showing the latest stored list and\n * a count sparkline, and one for the environment when the node recorded it.\n * Props-only: the host supplies the selected row and the trace records.\n */\nexport function ProcessTraceDetail({\n  node,\n  samples,\n  stacks = NO_STACKS,\n  links,\n  onCollectStack,\n  collecting,\n  collectError,\n  className,\n}: ProcessTraceDetailProps) {\n  const [tab, setTab] = useState<DetailTab>(\"overview\");\n\n  if (!node) {\n    return (\n      <div className=\"flex h-full items-center justify-center text-sm text-muted-foreground\">\n        <div className=\"text-center\">\n          <Icon icon={UiServerProcess} className=\"mb-2 block text-4xl\" />\n          Select a process to view its trace\n        </div>\n      </div>\n    );\n  }\n\n  const hasEnvironment = Boolean(node.environment || node.environmentError);\n  const tabs: Array<TabItem & { id: DetailTab }> = [\n    { id: \"overview\", label: \"Overview\" },\n    ...(hasEnvironment ? [{ id: \"env\" as const, label: \"Environment\" }] : []),\n    ...armedFacets(samples).map((facet) => ({ id: facet, label: SAMPLE_FACETS[facet].label })),\n  ];\n  const active = tabs.some((item) => item.id === tab) ? tab : \"overview\";\n\n  return (\n    <div className={cn(\"h-full space-y-density-3 overflow-y-auto p-density-4\", className)} data-process-detail={node.key}>\n      <Header node={node} />\n      {tabs.length > 1 && <Tabs tabs={tabs} value={active} onChange={(id) => setTab(id as DetailTab)} />}\n      {active === \"overview\" ? (\n        <Overview\n          node={node}\n          samples={samples}\n          stacks={stacks}\n          links={links}\n          {...(onCollectStack ? { onCollectStack } : {})}\n          {...(collecting !== undefined ? { collecting } : {})}\n          {...(collectError ? { collectError } : {})}\n        />\n      ) : active === \"env\" ? (\n        <ProcessFacetTable\n          facet=\"env\"\n          {...(node.environment ? { environment: node.environment } : {})}\n          {...(node.environmentError ? { error: node.environmentError } : {})}\n        />\n      ) : (\n        <FacetTab key={`${node.key}:${active}`} node={node} samples={samples} facet={active} />\n      )}\n    </div>\n  );\n}\n"],"names":["jsx","jsxs","Icon","UiServerProcess","UiDebug","processLabel","processStateColor","processStateIcon","Button","UiLoader","UiDebugSmall","useState","useMemo","stackCheckpoints","Select","formatProcessTimestamp","StackDumpView","ConfirmDialog","isProcessExited","processSeries","diskSeries","formatDuration","processLifetimeMs","MetricTile","formatCpuPercent","cpuTone","formatBytes","LabeledSparkline","SAMPLE_FACETS","facetCountSeries","ProcessFacetTable","latestFacetReading","armedFacets","cn","Tabs"],"mappings":"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"}

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

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { ProcessNodeRow, ProcessSampleRow, StackRecord } from './types.js';
+export type ProcessTraceDetailProps = {
+    /** The selected `process_tree` record; null renders the empty selection state. */
+    node: ProcessNodeRow | null;
+    /**
+     * `process_samples` records; those of other processes are ignored. They carry
+     * the resource series, and the facet counts and lists: a facet tab is shown
+     * only when the samples carry that facet's count, that is when the session
+     * armed it.
+     */
+    samples: ProcessSampleRow[];
+    /** `stacks` records; those of other processes are ignored. */
+    stacks?: StackRecord[];
+    /** Host content at the top of Overview, for example a link to the fixture step that started the process. */
+    links?: ReactNode;
+    /**
+     * Collects a stack for a process over one of its `stackTransports`. Without it
+     * no collect buttons are shown. A destructive transport (sigquit) kills the
+     * process, so it asks for confirmation first.
+     */
+    onCollectStack?: (key: string, transport: string) => void | Promise<void>;
+    /** A collection is in flight: collect buttons are disabled. */
+    collecting?: boolean;
+    /** Why the last collection failed. */
+    collectError?: string;
+    className?: string;
+};
+/**
+ * Everything the trace knows about one process: its command and lifetime,
+ * resource usage (CPU, RSS, disk IO) and sparklines, and its stack with a
+ * chooser across the checkpoints that dumped it and collect buttons for the
+ * transports it offers. Tabs for open files, sockets, ports and connections
+ * appear when the samples carry that facet, showing the latest stored list and
+ * a count sparkline, and one for the environment when the node recorded it.
+ * Props-only: the host supplies the selected row and the trace records.
+ */
+export declare function ProcessTraceDetail({ node, samples, stacks, links, onCollectStack, collecting, collectError, className, }: ProcessTraceDetailProps): import("react").JSX.Element;
+//# sourceMappingURL=ProcessTraceDetail.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessTraceDetail.d.ts","sourceRoot":"","sources":["../../../src/data/traces/ProcessTraceDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA8B1D,OAAO,KAAK,EAAE,cAAc,EAAsB,gBAAgB,EAAyB,WAAW,EAAE,MAAM,SAAS,CAAC;AA8CxH,MAAM,MAAM,uBAAuB,GAAG;IACpC,kFAAkF;IAClF,IAAI,EAAE,cAAc,GAAG,IAAI,CAAC;IAC5B;;;;;OAKG;IACH,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,8DAA8D;IAC9D,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,4GAA4G;IAC5G,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1E,+DAA+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA2PF;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,MAAkB,EAClB,KAAK,EACL,cAAc,EACd,UAAU,EACV,YAAY,EACZ,SAAS,GACV,EAAE,uBAAuB,+BA+CzB"}

package/dist/data/traces/ProcessTraceDetail.js

@@ -0,0 +1,316 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { Button } from "../../components/button.js";
+import { Select } from "../../components/select.js";
+import { Tabs } from "../../layout/Tabs.js";
+import { formatDuration, formatBytes } from "../../lib/format.js";
+import { cn } from "../../lib/utils.js";
+import { ConfirmDialog } from "../../overlay/ConfirmDialog.js";
+import { MetricTile } from "../diagnostics/MetricTile.js";
+import { cpuTone } from "../diagnostics/metric-tone.js";
+import { StackDumpView } from "../diagnostics/StackDumpView.js";
+import { processLabel, processStateIcon, processStateColor } from "../diagnostics/utils.js";
+import { Icon } from "../Icon.js";
+import { armedFacets, SAMPLE_FACETS, diskSeries, facetCountSeries, latestFacetReading } from "./process-facets.js";
+import { isProcessExited, processSeries, formatProcessTimestamp, processLifetimeMs, formatCpuPercent } from "./process-tree.js";
+import { ProcessFacetTable } from "./ProcessFacetTable.js";
+import { stackCheckpoints } from "./stack-checkpoints.js";
+import { LabeledSparkline } from "./Sparkline.js";
+import { UiServerProcess } from "../../icons/components/UiServerProcess.js";
+import { UiDebug } from "../../icons/components/UiDebug.js";
+import { UiLoader } from "../../icons/components/UiLoader.js";
+import { UiDebugSmall } from "../../icons/components/UiDebugSmall.js";
+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__ */ jsxs("section", { children: [
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: `rounded-lg border border-border bg-muted/50 px-2.5 py-density-2 ${wide ? "col-span-2" : ""}`, children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "mt-0.5 break-all text-xs font-medium text-foreground", children: value })
+  ] });
+}
+function Header({ node }) {
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-density-2", children: [
+      /* @__PURE__ */ jsx(Icon, { icon: node.isRoot ? UiServerProcess : UiDebug, className: "shrink-0 text-2xl text-blue-600" }),
+      /* @__PURE__ */ jsx("h2", { className: "break-words text-lg font-bold text-foreground", children: processLabel(node) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-density-2 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+        "pid ",
+        node.pid
+      ] }),
+      node.ppid ? /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+        "ppid ",
+        node.ppid
+      ] }) : null,
+      /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 ${processStateColor(node.status)}`, children: [
+        /* @__PURE__ */ jsx(Icon, { icon: processStateIcon(node.status) }),
+        node.status
+      ] })
+    ] })
+  ] });
+}
+function CollectButtons({
+  transports,
+  hasStack,
+  collecting,
+  onCollect
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-density-1", "data-stack-actions": "", children: transports.map((transport) => {
+    const spec = transportSpec(transport.transport);
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        size: "sm",
+        variant: transport.destructive ? "destructive" : hasStack ? "outline" : "default",
+        disabled: collecting,
+        title: spec.title,
+        onClick: () => onCollect(transport),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { icon: collecting ? UiLoader : 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] = useState(null);
+  const [picked, setPicked] = useState(null);
+  const checkpoints = useMemo(() => 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__ */ 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__ */ jsxs(Section, { title: "Stack", children: [
+    collectError && /* @__PURE__ */ jsx("div", { className: "mb-2 whitespace-pre-wrap text-xs text-red-700 dark:text-red-400", role: "alert", children: collectError }),
+    selected ? /* @__PURE__ */ jsxs("div", { className: "space-y-density-1", children: [
+      checkpoints.length > 1 && /* @__PURE__ */ jsx("div", { className: "max-w-md", children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          "aria-label": "Stack checkpoint",
+          value: selected.checkpointId,
+          onChange: (event) => setPicked(event.target.value),
+          options: [...checkpoints].reverse().map((checkpoint) => ({
+            value: checkpoint.checkpointId,
+            label: [
+              formatProcessTimestamp(checkpoint.takenAt),
+              checkpoint.reason,
+              checkpoint.transport,
+              checkpoint.failed ? "failed" : ""
+            ].filter(Boolean).join(" · ")
+          }))
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        StackDumpView,
+        {
+          records: selected.records,
+          ...buttons ? { headerActions: buttons } : {}
+        },
+        `${node.key}:${selected.checkpointId}`
+      )
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: collecting ? "Collecting stack trace..." : "No stack trace collected yet." }),
+      buttons
+    ] }),
+    /* @__PURE__ */ jsx(
+      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 = isProcessExited(node);
+  const series = processSeries(samples, node.key);
+  const disk = diskSeries(samples, node.key);
+  const lastDisk = { read: disk.read[disk.read.length - 1], write: disk.write[disk.write.length - 1] };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-density-3", children: [
+    links,
+    /* @__PURE__ */ jsx(Section, { title: "Command", children: /* @__PURE__ */ 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__ */ jsx(Section, { title: "Process", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-density-2 text-sm", children: [
+      /* @__PURE__ */ jsx(InfoTile, { label: "Cwd", value: node.cwd || "Unavailable", wide: true }),
+      /* @__PURE__ */ jsx(InfoTile, { label: "Started", value: formatProcessTimestamp(node.startedAt) }),
+      /* @__PURE__ */ jsx(
+        InfoTile,
+        {
+          label: "Exited",
+          value: exited ? formatProcessTimestamp(node.exitedAt ?? node.lastSeenAt) : "running"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InfoTile,
+        {
+          label: "Lifetime",
+          value: `${formatDuration(processLifetimeMs(node))}${exited ? "" : " so far"}`
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(Section, { title: "Resources", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-density-1 sm:grid-cols-4", children: [
+        /* @__PURE__ */ jsx(
+          MetricTile,
+          {
+            label: "CPU",
+            value: formatCpuPercent(node.cpuPercent),
+            barPct: Math.min(100, node.cpuPercent ?? 0),
+            tone: cpuTone(node.cpuPercent ?? 0)
+          }
+        ),
+        /* @__PURE__ */ jsx(MetricTile, { label: "RSS", value: formatBytes(node.rssBytes) }),
+        /* @__PURE__ */ jsx(
+          MetricTile,
+          {
+            label: "Peak CPU",
+            value: formatCpuPercent(node.peakCpuPercent),
+            tone: cpuTone(node.peakCpuPercent ?? 0)
+          }
+        ),
+        /* @__PURE__ */ jsx(MetricTile, { label: "Peak RSS", value: formatBytes(node.peakRssBytes) }),
+        lastDisk.read !== void 0 && /* @__PURE__ */ jsx(MetricTile, { label: "Disk read", value: formatBytes(lastDisk.read) }),
+        lastDisk.write !== void 0 && /* @__PURE__ */ jsx(MetricTile, { label: "Disk write", value: formatBytes(lastDisk.write) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 grid grid-cols-2 gap-density-2", children: [
+        /* @__PURE__ */ jsx(LabeledSparkline, { label: "CPU %", values: series.cpu, format: (value) => `${value.toFixed(1)}%` }),
+        /* @__PURE__ */ jsx(LabeledSparkline, { label: "RSS", values: series.rss, format: formatBytes }),
+        disk.read.length > 0 && /* @__PURE__ */ jsx(LabeledSparkline, { label: "Disk read", values: disk.read, format: formatBytes }),
+        disk.write.length > 0 && /* @__PURE__ */ jsx(LabeledSparkline, { label: "Disk write", values: disk.write, format: formatBytes })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(StackSection, { node, ...stack }, node.key)
+  ] });
+}
+function FacetTab({
+  node,
+  samples,
+  facet
+}) {
+  const { label } = SAMPLE_FACETS[facet];
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-density-3", children: [
+    /* @__PURE__ */ jsx(LabeledSparkline, { label, values: facetCountSeries(samples, node.key, facet), format: String }),
+    /* @__PURE__ */ jsx(ProcessFacetTable, { facet, reading: latestFacetReading(samples, node.key, facet) })
+  ] });
+}
+function ProcessTraceDetail({
+  node,
+  samples,
+  stacks = NO_STACKS,
+  links,
+  onCollectStack,
+  collecting,
+  collectError,
+  className
+}) {
+  const [tab, setTab] = useState("overview");
+  if (!node) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx(Icon, { icon: 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" }] : [],
+    ...armedFacets(samples).map((facet) => ({ id: facet, label: SAMPLE_FACETS[facet].label }))
+  ];
+  const active = tabs.some((item) => item.id === tab) ? tab : "overview";
+  return /* @__PURE__ */ jsxs("div", { className: cn("h-full space-y-density-3 overflow-y-auto p-density-4", className), "data-process-detail": node.key, children: [
+    /* @__PURE__ */ jsx(Header, { node }),
+    tabs.length > 1 && /* @__PURE__ */ jsx(Tabs, { tabs, value: active, onChange: (id) => setTab(id) }),
+    active === "overview" ? /* @__PURE__ */ jsx(
+      Overview,
+      {
+        node,
+        samples,
+        stacks,
+        links,
+        ...onCollectStack ? { onCollectStack } : {},
+        ...collecting !== void 0 ? { collecting } : {},
+        ...collectError ? { collectError } : {}
+      }
+    ) : active === "env" ? /* @__PURE__ */ jsx(
+      ProcessFacetTable,
+      {
+        facet: "env",
+        ...node.environment ? { environment: node.environment } : {},
+        ...node.environmentError ? { error: node.environmentError } : {}
+      }
+    ) : /* @__PURE__ */ jsx(FacetTab, { node, samples, facet: active }, `${node.key}:${active}`)
+  ] });
+}
+export {
+  ProcessTraceDetail
+};
+//# sourceMappingURL=ProcessTraceDetail.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessTraceDetail.js","sources":["../../../src/data/traces/ProcessTraceDetail.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { Select } from \"../../components/select\";\nimport { UiDebug, UiDebugSmall, UiLoader, UiServerProcess } from \"../../icons\";\nimport { Tabs, type TabItem } from \"../../layout/Tabs\";\nimport { formatBytes, formatDuration } from \"../../lib/format\";\nimport { cn } from \"../../lib/utils\";\nimport { ConfirmDialog } from \"../../overlay/ConfirmDialog\";\nimport { MetricTile } from \"../diagnostics/MetricTile\";\nimport { cpuTone } from \"../diagnostics/metric-tone\";\nimport { StackDumpView } from \"../diagnostics/StackDumpView\";\nimport { processLabel, processStateColor, processStateIcon } from \"../diagnostics/utils\";\nimport { Icon } from \"../Icon\";\nimport {\n  SAMPLE_FACETS,\n  armedFacets,\n  diskSeries,\n  facetCountSeries,\n  latestFacetReading,\n} from \"./process-facets\";\nimport {\n  formatCpuPercent,\n  formatProcessTimestamp,\n  isProcessExited,\n  processLifetimeMs,\n  processSeries,\n} from \"./process-tree\";\nimport { ProcessFacetTable } from \"./ProcessFacetTable\";\nimport { stackCheckpoints } from \"./stack-checkpoints\";\nimport { LabeledSparkline } from \"./Sparkline\";\nimport type { ProcessNodeRow, ProcessSampleFacet, ProcessSampleRow, ProcessStackTransport, StackRecord } from \"./types\";\n\ntype TransportSpec = {\n  label: (hasStack: boolean) => string;\n  title: string;\n  /** Shown when a destructive collection asks for confirmation. */\n  warning?: (pid: number) => string;\n};\n\n/** How each stack transport a node offers in `stackTransports` is presented. */\nconst STACK_TRANSPORTS: Record<string, TransportSpec> = {\n  inprocess: {\n    label: (hasStack) => (hasStack ? \"Refresh stack trace\" : \"Collect stack trace\"),\n    title: \"Take a fresh observation and dump the goroutine stacks\",\n  },\n  native: {\n    label: () => \"Native sample\",\n    title: \"Sample the process's native threads without interrupting it\",\n  },\n  pprof: {\n    label: () => \"Collect via pprof\",\n    title: \"Read the goroutine profile from the process's pprof endpoint\",\n  },\n  gops: {\n    label: () => \"Collect via gops\",\n    title: \"Read the goroutine stacks from the process's gops agent\",\n  },\n  sigquit: {\n    label: () => \"Dump goroutines & kill\",\n    title: \"Send SIGQUIT: the process prints every goroutine's stack and exits\",\n    warning: (pid) => `This sends SIGQUIT to pid ${pid}. The process prints every goroutine's stack and exits.`,\n  },\n};\n\nfunction transportSpec(transport: string): TransportSpec {\n  const spec = STACK_TRANSPORTS[transport];\n  if (!spec) {\n    throw new Error(`unknown stack transport \"${transport}\"; expected one of ${Object.keys(STACK_TRANSPORTS).join(\", \")}`);\n  }\n  return spec;\n}\n\ntype DetailTab = \"overview\" | \"env\" | ProcessSampleFacet;\n\nconst NO_STACKS: StackRecord[] = [];\n\nexport type ProcessTraceDetailProps = {\n  /** The selected `process_tree` record; null renders the empty selection state. */\n  node: ProcessNodeRow | null;\n  /**\n   * `process_samples` records; those of other processes are ignored. They carry\n   * the resource series, and the facet counts and lists: a facet tab is shown\n   * only when the samples carry that facet's count, that is when the session\n   * armed it.\n   */\n  samples: ProcessSampleRow[];\n  /** `stacks` records; those of other processes are ignored. */\n  stacks?: StackRecord[];\n  /** Host content at the top of Overview, for example a link to the fixture step that started the process. */\n  links?: ReactNode;\n  /**\n   * Collects a stack for a process over one of its `stackTransports`. Without it\n   * no collect buttons are shown. A destructive transport (sigquit) kills the\n   * process, so it asks for confirmation first.\n   */\n  onCollectStack?: (key: string, transport: string) => void | Promise<void>;\n  /** A collection is in flight: collect buttons are disabled. */\n  collecting?: boolean;\n  /** Why the last collection failed. */\n  collectError?: string;\n  className?: string;\n};\n\nfunction Section({ title, children }: { title: string; children: ReactNode }) {\n  return (\n    <section>\n      <div className=\"mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground\">{title}</div>\n      {children}\n    </section>\n  );\n}\n\nfunction InfoTile({ label, value, wide }: { label: string; value: string; wide?: boolean }) {\n  return (\n    <div className={`rounded-lg border border-border bg-muted/50 px-2.5 py-density-2 ${wide ? \"col-span-2\" : \"\"}`}>\n      <div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">{label}</div>\n      <div className=\"mt-0.5 break-all text-xs font-medium text-foreground\">{value}</div>\n    </div>\n  );\n}\n\nfunction Header({ node }: { node: ProcessNodeRow }) {\n  return (\n    <div className=\"min-w-0\">\n      <div className=\"flex items-center gap-density-2\">\n        <Icon icon={node.isRoot ? UiServerProcess : UiDebug} className=\"shrink-0 text-2xl text-blue-600\" />\n        <h2 className=\"break-words text-lg font-bold text-foreground\">{processLabel(node)}</h2>\n      </div>\n      <div className=\"mt-1 flex flex-wrap items-center gap-density-2 text-xs text-muted-foreground\">\n        <span className=\"font-mono\">pid {node.pid}</span>\n        {node.ppid ? <span className=\"font-mono\">ppid {node.ppid}</span> : null}\n        <span className={`inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 ${processStateColor(node.status)}`}>\n          <Icon icon={processStateIcon(node.status)} />\n          {node.status}\n        </span>\n      </div>\n    </div>\n  );\n}\n\nfunction CollectButtons({\n  transports,\n  hasStack,\n  collecting,\n  onCollect,\n}: {\n  transports: ProcessStackTransport[];\n  hasStack: boolean;\n  collecting: boolean;\n  onCollect: (transport: ProcessStackTransport) => void;\n}) {\n  return (\n    <div className=\"flex items-center gap-density-1\" data-stack-actions=\"\">\n      {transports.map((transport) => {\n        const spec = transportSpec(transport.transport);\n        return (\n          <Button\n            key={transport.transport}\n            size=\"sm\"\n            variant={transport.destructive ? \"destructive\" : hasStack ? \"outline\" : \"default\"}\n            disabled={collecting}\n            title={spec.title}\n            onClick={() => onCollect(transport)}\n          >\n            <Icon icon={collecting ? UiLoader : UiDebugSmall} className={collecting ? \"mr-1 animate-spin\" : \"mr-1\"} />\n            {spec.label(hasStack)}\n          </Button>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction StackSection({\n  node,\n  stacks,\n  onCollectStack,\n  collecting,\n  collectError,\n}: Pick<ProcessTraceDetailProps, \"onCollectStack\" | \"collecting\" | \"collectError\"> & {\n  node: ProcessNodeRow;\n  stacks: StackRecord[];\n}) {\n  const [confirming, setConfirming] = useState<ProcessStackTransport | null>(null);\n  const [picked, setPicked] = useState<string | null>(null);\n  const checkpoints = useMemo(() => stackCheckpoints(stacks, node.key), [stacks, node.key]);\n  const transports = node.stackTransports ?? [];\n  const canCollect = Boolean(onCollectStack) && transports.length > 0;\n  if (checkpoints.length === 0 && !canCollect) return null;\n\n  const selected = checkpoints.find((checkpoint) => checkpoint.checkpointId === picked) ?? checkpoints[checkpoints.length - 1];\n  const buttons = canCollect ? (\n    <CollectButtons\n      transports={transports}\n      hasStack={Boolean(selected)}\n      collecting={Boolean(collecting)}\n      onCollect={(transport) => (transport.destructive ? setConfirming(transport) : void onCollectStack?.(node.key, transport.transport))}\n    />\n  ) : null;\n  const confirmingSpec = confirming ? transportSpec(confirming.transport) : null;\n\n  return (\n    <Section title=\"Stack\">\n      {collectError && (\n        <div className=\"mb-2 whitespace-pre-wrap text-xs text-red-700 dark:text-red-400\" role=\"alert\">\n          {collectError}\n        </div>\n      )}\n      {selected ? (\n        <div className=\"space-y-density-1\">\n          {checkpoints.length > 1 && (\n            <div className=\"max-w-md\">\n              <Select\n                aria-label=\"Stack checkpoint\"\n                value={selected.checkpointId}\n                onChange={(event) => setPicked(event.target.value)}\n                options={[...checkpoints].reverse().map((checkpoint) => ({\n                  value: checkpoint.checkpointId,\n                  label: [\n                    formatProcessTimestamp(checkpoint.takenAt),\n                    checkpoint.reason,\n                    checkpoint.transport,\n                    checkpoint.failed ? \"failed\" : \"\",\n                  ]\n                    .filter(Boolean)\n                    .join(\" · \"),\n                }))}\n              />\n            </div>\n          )}\n          <StackDumpView\n            key={`${node.key}:${selected.checkpointId}`}\n            records={selected.records}\n            {...(buttons ? { headerActions: buttons } : {})}\n          />\n        </div>\n      ) : (\n        <div className=\"flex items-center justify-between gap-3\">\n          <div className=\"text-xs text-muted-foreground\">\n            {collecting ? \"Collecting stack trace...\" : \"No stack trace collected yet.\"}\n          </div>\n          {buttons}\n        </div>\n      )}\n      <ConfirmDialog\n        open={confirming !== null}\n        title={`${confirmingSpec?.label(false) ?? \"\"}?`}\n        warning={\n          confirmingSpec?.warning?.(node.pid) ??\n          `Collecting this stack over ${confirming?.transport ?? \"\"} terminates pid ${node.pid}.`\n        }\n        message=\"The stack is shown here once the dump arrives. Use a non-destructive transport to look without killing.\"\n        confirmLabel={confirmingSpec?.label(false) ?? \"Collect\"}\n        variant=\"destructive\"\n        onCancel={() => setConfirming(null)}\n        onConfirm={() => {\n          const transport = confirming;\n          setConfirming(null);\n          if (transport) void onCollectStack?.(node.key, transport.transport);\n        }}\n      />\n    </Section>\n  );\n}\n\nfunction Overview({\n  node,\n  samples,\n  links,\n  ...stack\n}: Pick<ProcessTraceDetailProps, \"samples\" | \"links\" | \"onCollectStack\" | \"collecting\" | \"collectError\"> & {\n  node: ProcessNodeRow;\n  stacks: StackRecord[];\n}) {\n  const exited = isProcessExited(node);\n  const series = processSeries(samples, node.key);\n  const disk = diskSeries(samples, node.key);\n  const lastDisk = { read: disk.read[disk.read.length - 1], write: disk.write[disk.write.length - 1] };\n  return (\n    <div className=\"space-y-density-3\">\n      {links}\n\n      <Section title=\"Command\">\n        <pre className=\"whitespace-pre-wrap break-all rounded bg-blue-50 p-2 font-mono text-xs text-foreground dark:bg-blue-500/10\">\n          {node.command}\n        </pre>\n      </Section>\n\n      <Section title=\"Process\">\n        <div className=\"grid grid-cols-2 gap-density-2 text-sm\">\n          <InfoTile label=\"Cwd\" value={node.cwd || \"Unavailable\"} wide />\n          <InfoTile label=\"Started\" value={formatProcessTimestamp(node.startedAt)} />\n          <InfoTile\n            label=\"Exited\"\n            value={exited ? formatProcessTimestamp(node.exitedAt ?? node.lastSeenAt) : \"running\"}\n          />\n          <InfoTile\n            label=\"Lifetime\"\n            value={`${formatDuration(processLifetimeMs(node))}${exited ? \"\" : \" so far\"}`}\n          />\n        </div>\n      </Section>\n\n      <Section title=\"Resources\">\n        <div className=\"grid grid-cols-2 gap-density-1 sm:grid-cols-4\">\n          <MetricTile\n            label=\"CPU\"\n            value={formatCpuPercent(node.cpuPercent)}\n            barPct={Math.min(100, node.cpuPercent ?? 0)}\n            tone={cpuTone(node.cpuPercent ?? 0)}\n          />\n          <MetricTile label=\"RSS\" value={formatBytes(node.rssBytes)} />\n          <MetricTile\n            label=\"Peak CPU\"\n            value={formatCpuPercent(node.peakCpuPercent)}\n            tone={cpuTone(node.peakCpuPercent ?? 0)}\n          />\n          <MetricTile label=\"Peak RSS\" value={formatBytes(node.peakRssBytes)} />\n          {lastDisk.read !== undefined && <MetricTile label=\"Disk read\" value={formatBytes(lastDisk.read)} />}\n          {lastDisk.write !== undefined && <MetricTile label=\"Disk write\" value={formatBytes(lastDisk.write)} />}\n        </div>\n        <div className=\"mt-2 grid grid-cols-2 gap-density-2\">\n          <LabeledSparkline label=\"CPU %\" values={series.cpu} format={(value) => `${value.toFixed(1)}%`} />\n          <LabeledSparkline label=\"RSS\" values={series.rss} format={formatBytes} />\n          {disk.read.length > 0 && <LabeledSparkline label=\"Disk read\" values={disk.read} format={formatBytes} />}\n          {disk.write.length > 0 && <LabeledSparkline label=\"Disk write\" values={disk.write} format={formatBytes} />}\n        </div>\n      </Section>\n\n      <StackSection key={node.key} node={node} {...stack} />\n    </div>\n  );\n}\n\nfunction FacetTab({\n  node,\n  samples,\n  facet,\n}: {\n  node: ProcessNodeRow;\n  samples: ProcessSampleRow[];\n  facet: ProcessSampleFacet;\n}) {\n  const { label } = SAMPLE_FACETS[facet];\n  return (\n    <div className=\"space-y-density-3\">\n      <LabeledSparkline label={label} values={facetCountSeries(samples, node.key, facet)} format={String} />\n      <ProcessFacetTable facet={facet} reading={latestFacetReading(samples, node.key, facet)} />\n    </div>\n  );\n}\n\n/**\n * Everything the trace knows about one process: its command and lifetime,\n * resource usage (CPU, RSS, disk IO) and sparklines, and its stack with a\n * chooser across the checkpoints that dumped it and collect buttons for the\n * transports it offers. Tabs for open files, sockets, ports and connections\n * appear when the samples carry that facet, showing the latest stored list and\n * a count sparkline, and one for the environment when the node recorded it.\n * Props-only: the host supplies the selected row and the trace records.\n */\nexport function ProcessTraceDetail({\n  node,\n  samples,\n  stacks = NO_STACKS,\n  links,\n  onCollectStack,\n  collecting,\n  collectError,\n  className,\n}: ProcessTraceDetailProps) {\n  const [tab, setTab] = useState<DetailTab>(\"overview\");\n\n  if (!node) {\n    return (\n      <div className=\"flex h-full items-center justify-center text-sm text-muted-foreground\">\n        <div className=\"text-center\">\n          <Icon icon={UiServerProcess} className=\"mb-2 block text-4xl\" />\n          Select a process to view its trace\n        </div>\n      </div>\n    );\n  }\n\n  const hasEnvironment = Boolean(node.environment || node.environmentError);\n  const tabs: Array<TabItem & { id: DetailTab }> = [\n    { id: \"overview\", label: \"Overview\" },\n    ...(hasEnvironment ? [{ id: \"env\" as const, label: \"Environment\" }] : []),\n    ...armedFacets(samples).map((facet) => ({ id: facet, label: SAMPLE_FACETS[facet].label })),\n  ];\n  const active = tabs.some((item) => item.id === tab) ? tab : \"overview\";\n\n  return (\n    <div className={cn(\"h-full space-y-density-3 overflow-y-auto p-density-4\", className)} data-process-detail={node.key}>\n      <Header node={node} />\n      {tabs.length > 1 && <Tabs tabs={tabs} value={active} onChange={(id) => setTab(id as DetailTab)} />}\n      {active === \"overview\" ? (\n        <Overview\n          node={node}\n          samples={samples}\n          stacks={stacks}\n          links={links}\n          {...(onCollectStack ? { onCollectStack } : {})}\n          {...(collecting !== undefined ? { collecting } : {})}\n          {...(collectError ? { collectError } : {})}\n        />\n      ) : active === \"env\" ? (\n        <ProcessFacetTable\n          facet=\"env\"\n          {...(node.environment ? { environment: node.environment } : {})}\n          {...(node.environmentError ? { error: node.environmentError } : {})}\n        />\n      ) : (\n        <FacetTab key={`${node.key}:${active}`} node={node} samples={samples} facet={active} />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAM,mBAAkD;AAAA,EACtD,WAAW;AAAA,IACT,OAAO,CAAC,aAAc,WAAW,wBAAwB;AAAA,IACzD,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACN,OAAO,MAAM;AAAA,IACb,OAAO;AAAA,EAAA;AAAA,EAET,OAAO;AAAA,IACL,OAAO,MAAM;AAAA,IACb,OAAO;AAAA,EAAA;AAAA,EAET,MAAM;AAAA,IACJ,OAAO,MAAM;AAAA,IACb,OAAO;AAAA,EAAA;AAAA,EAET,SAAS;AAAA,IACP,OAAO,MAAM;AAAA,IACb,OAAO;AAAA,IACP,SAAS,CAAC,QAAQ,6BAA6B,GAAG;AAAA,EAAA;AAEtD;AAEA,SAAS,cAAc,WAAkC;AACvD,QAAM,OAAO,iBAAiB,SAAS;AACvC,MAAI,CAAC,MAAM;AACT,UAAM,IAAI,MAAM,4BAA4B,SAAS,sBAAsB,OAAO,KAAK,gBAAgB,EAAE,KAAK,IAAI,CAAC,EAAE;AAAA,EACvH;AACA,SAAO;AACT;AAIA,MAAM,YAA2B,CAAA;AA6BjC,SAAS,QAAQ,EAAE,OAAO,YAAoD;AAC5E,8BACG,WAAA,EACC,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,kFAAkF,UAAA,OAAM;AAAA,IACtG;AAAA,EAAA,GACH;AAEJ;AAEA,SAAS,SAAS,EAAE,OAAO,OAAO,QAA0D;AAC1F,8BACG,OAAA,EAAI,WAAW,mEAAmE,OAAO,eAAe,EAAE,IACzG,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,6DAA6D,UAAA,OAAM;AAAA,IAClF,oBAAC,OAAA,EAAI,WAAU,wDAAwD,UAAA,MAAA,CAAM;AAAA,EAAA,GAC/E;AAEJ;AAEA,SAAS,OAAO,EAAE,QAAkC;AAClD,SACE,qBAAC,OAAA,EAAI,WAAU,WACb,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,MAAA,oBAAC,QAAK,MAAM,KAAK,SAAS,kBAAkB,SAAS,WAAU,mCAAkC;AAAA,0BAChG,MAAA,EAAG,WAAU,iDAAiD,UAAA,aAAa,IAAI,EAAA,CAAE;AAAA,IAAA,GACpF;AAAA,IACA,qBAAC,OAAA,EAAI,WAAU,gFACb,UAAA;AAAA,MAAA,qBAAC,QAAA,EAAK,WAAU,aAAY,UAAA;AAAA,QAAA;AAAA,QAAK,KAAK;AAAA,MAAA,GAAI;AAAA,MACzC,KAAK,OAAO,qBAAC,QAAA,EAAK,WAAU,aAAY,UAAA;AAAA,QAAA;AAAA,QAAM,KAAK;AAAA,MAAA,EAAA,CAAK,IAAU;AAAA,MACnE,qBAAC,UAAK,WAAW,oEAAoE,kBAAkB,KAAK,MAAM,CAAC,IACjH,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAK,MAAM,iBAAiB,KAAK,MAAM,GAAG;AAAA,QAC1C,KAAK;AAAA,MAAA,EAAA,CACR;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,SACE,oBAAC,SAAI,WAAU,mCAAkC,sBAAmB,IACjE,UAAA,WAAW,IAAI,CAAC,cAAc;AAC7B,UAAM,OAAO,cAAc,UAAU,SAAS;AAC9C,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,SAAS,UAAU,cAAc,gBAAgB,WAAW,YAAY;AAAA,QACxE,UAAU;AAAA,QACV,OAAO,KAAK;AAAA,QACZ,SAAS,MAAM,UAAU,SAAS;AAAA,QAElC,UAAA;AAAA,UAAA,oBAAC,MAAA,EAAK,MAAM,aAAa,WAAW,cAAc,WAAW,aAAa,sBAAsB,OAAA,CAAQ;AAAA,UACvG,KAAK,MAAM,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MARf,UAAU;AAAA,IAAA;AAAA,EAWrB,CAAC,EAAA,CACH;AAEJ;AAEA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGG;;AACD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAuC,IAAI;AAC/E,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAwB,IAAI;AACxD,QAAM,cAAc,QAAQ,MAAM,iBAAiB,QAAQ,KAAK,GAAG,GAAG,CAAC,QAAQ,KAAK,GAAG,CAAC;AACxF,QAAM,aAAa,KAAK,mBAAmB,CAAA;AAC3C,QAAM,aAAa,QAAQ,cAAc,KAAK,WAAW,SAAS;AAClE,MAAI,YAAY,WAAW,KAAK,CAAC,WAAY,QAAO;AAEpD,QAAM,WAAW,YAAY,KAAK,CAAC,eAAe,WAAW,iBAAiB,MAAM,KAAK,YAAY,YAAY,SAAS,CAAC;AAC3H,QAAM,UAAU,aACd;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU,QAAQ,QAAQ;AAAA,MAC1B,YAAY,QAAQ,UAAU;AAAA,MAC9B,WAAW,CAAC,cAAe,UAAU,cAAc,cAAc,SAAS,IAAI,MAAK,iDAAiB,KAAK,KAAK,UAAU;AAAA,IAAS;AAAA,EAAA,IAEjI;AACJ,QAAM,iBAAiB,aAAa,cAAc,WAAW,SAAS,IAAI;AAE1E,SACE,qBAAC,SAAA,EAAQ,OAAM,SACZ,UAAA;AAAA,IAAA,oCACE,OAAA,EAAI,WAAU,mEAAkE,MAAK,SACnF,UAAA,cACH;AAAA,IAED,WACC,qBAAC,OAAA,EAAI,WAAU,qBACZ,UAAA;AAAA,MAAA,YAAY,SAAS,KACpB,oBAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,cAAW;AAAA,UACX,OAAO,SAAS;AAAA,UAChB,UAAU,CAAC,UAAU,UAAU,MAAM,OAAO,KAAK;AAAA,UACjD,SAAS,CAAC,GAAG,WAAW,EAAE,QAAA,EAAU,IAAI,CAAC,gBAAgB;AAAA,YACvD,OAAO,WAAW;AAAA,YAClB,OAAO;AAAA,cACL,uBAAuB,WAAW,OAAO;AAAA,cACzC,WAAW;AAAA,cACX,WAAW;AAAA,cACX,WAAW,SAAS,WAAW;AAAA,YAAA,EAE9B,OAAO,OAAO,EACd,KAAK,KAAK;AAAA,UAAA,EACb;AAAA,QAAA;AAAA,MAAA,GAEN;AAAA,MAEF;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,SAAS,SAAS;AAAA,UACjB,GAAI,UAAU,EAAE,eAAe,YAAY,CAAA;AAAA,QAAC;AAAA,QAFxC,GAAG,KAAK,GAAG,IAAI,SAAS,YAAY;AAAA,MAAA;AAAA,IAG3C,EAAA,CACF,IAEA,qBAAC,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,iCACZ,UAAA,aAAa,8BAA8B,iCAC9C;AAAA,MACC;AAAA,IAAA,GACH;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,eAAe;AAAA,QACrB,OAAO,IAAG,iDAAgB,MAAM,WAAU,EAAE;AAAA,QAC5C,WACE,sDAAgB,YAAhB,wCAA0B,KAAK,SAC/B,+BAA8B,yCAAY,cAAa,EAAE,mBAAmB,KAAK,GAAG;AAAA,QAEtF,SAAQ;AAAA,QACR,eAAc,iDAAgB,MAAM,WAAU;AAAA,QAC9C,SAAQ;AAAA,QACR,UAAU,MAAM,cAAc,IAAI;AAAA,QAClC,WAAW,MAAM;AACf,gBAAM,YAAY;AAClB,wBAAc,IAAI;AAClB,cAAI,UAAW,OAAK,iDAAiB,KAAK,KAAK,UAAU;AAAA,QAC3D;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAGG;AACD,QAAM,SAAS,gBAAgB,IAAI;AACnC,QAAM,SAAS,cAAc,SAAS,KAAK,GAAG;AAC9C,QAAM,OAAO,WAAW,SAAS,KAAK,GAAG;AACzC,QAAM,WAAW,EAAE,MAAM,KAAK,KAAK,KAAK,KAAK,SAAS,CAAC,GAAG,OAAO,KAAK,MAAM,KAAK,MAAM,SAAS,CAAC,EAAA;AACjG,SACE,qBAAC,OAAA,EAAI,WAAU,qBACZ,UAAA;AAAA,IAAA;AAAA,IAED,oBAAC,SAAA,EAAQ,OAAM,WACb,UAAA,oBAAC,SAAI,WAAU,8GACZ,UAAA,KAAK,QAAA,CACR,EAAA,CACF;AAAA,wBAEC,SAAA,EAAQ,OAAM,WACb,UAAA,qBAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,MAAA,oBAAC,UAAA,EAAS,OAAM,OAAM,OAAO,KAAK,OAAO,eAAe,MAAI,KAAA,CAAC;AAAA,MAC7D,oBAAC,YAAS,OAAM,WAAU,OAAO,uBAAuB,KAAK,SAAS,GAAG;AAAA,MACzE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAO,SAAS,uBAAuB,KAAK,YAAY,KAAK,UAAU,IAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAE7E;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAO,GAAG,eAAe,kBAAkB,IAAI,CAAC,CAAC,GAAG,SAAS,KAAK,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAC7E,EAAA,CACF,EAAA,CACF;AAAA,IAEA,qBAAC,SAAA,EAAQ,OAAM,aACb,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAU,iDACb,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,OAAO,iBAAiB,KAAK,UAAU;AAAA,YACvC,QAAQ,KAAK,IAAI,KAAK,KAAK,cAAc,CAAC;AAAA,YAC1C,MAAM,QAAQ,KAAK,cAAc,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpC,oBAAC,cAAW,OAAM,OAAM,OAAO,YAAY,KAAK,QAAQ,GAAG;AAAA,QAC3D;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,OAAO,iBAAiB,KAAK,cAAc;AAAA,YAC3C,MAAM,QAAQ,KAAK,kBAAkB,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAExC,oBAAC,cAAW,OAAM,YAAW,OAAO,YAAY,KAAK,YAAY,GAAG;AAAA,QACnE,SAAS,SAAS,UAAa,oBAAC,YAAA,EAAW,OAAM,aAAY,OAAO,YAAY,SAAS,IAAI,EAAA,CAAG;AAAA,QAChG,SAAS,UAAU,UAAa,oBAAC,YAAA,EAAW,OAAM,cAAa,OAAO,YAAY,SAAS,KAAK,EAAA,CAAG;AAAA,MAAA,GACtG;AAAA,MACA,qBAAC,OAAA,EAAI,WAAU,uCACb,UAAA;AAAA,QAAA,oBAAC,kBAAA,EAAiB,OAAM,SAAQ,QAAQ,OAAO,KAAK,QAAQ,CAAC,UAAU,GAAG,MAAM,QAAQ,CAAC,CAAC,KAAK;AAAA,QAC/F,oBAAC,oBAAiB,OAAM,OAAM,QAAQ,OAAO,KAAK,QAAQ,aAAa;AAAA,QACtE,KAAK,KAAK,SAAS,KAAK,oBAAC,kBAAA,EAAiB,OAAM,aAAY,QAAQ,KAAK,MAAM,QAAQ,YAAA,CAAa;AAAA,QACpG,KAAK,MAAM,SAAS,KAAK,oBAAC,kBAAA,EAAiB,OAAM,cAAa,QAAQ,KAAK,OAAO,QAAQ,YAAA,CAAa;AAAA,MAAA,EAAA,CAC1G;AAAA,IAAA,GACF;AAAA,wBAEC,cAAA,EAA4B,MAAa,GAAG,MAAA,GAA1B,KAAK,GAA4B;AAAA,EAAA,GACtD;AAEJ;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,MAAA,IAAU,cAAc,KAAK;AACrC,SACE,qBAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,IAAA,oBAAC,kBAAA,EAAiB,OAAc,QAAQ,iBAAiB,SAAS,KAAK,KAAK,KAAK,GAAG,QAAQ,OAAA,CAAQ;AAAA,IACpG,oBAAC,qBAAkB,OAAc,SAAS,mBAAmB,SAAS,KAAK,KAAK,KAAK,EAAA,CAAG;AAAA,EAAA,GAC1F;AAEJ;AAWO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,CAAC,KAAK,MAAM,IAAI,SAAoB,UAAU;AAEpD,MAAI,CAAC,MAAM;AACT,+BACG,OAAA,EAAI,WAAU,yEACb,UAAA,qBAAC,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAK,MAAM,iBAAiB,WAAU,uBAAsB;AAAA,MAAE;AAAA,IAAA,EAAA,CAEjE,EAAA,CACF;AAAA,EAEJ;AAEA,QAAM,iBAAiB,QAAQ,KAAK,eAAe,KAAK,gBAAgB;AACxE,QAAM,OAA2C;AAAA,IAC/C,EAAE,IAAI,YAAY,OAAO,WAAA;AAAA,IACzB,GAAI,iBAAiB,CAAC,EAAE,IAAI,OAAgB,OAAO,cAAA,CAAe,IAAI,CAAA;AAAA,IACtE,GAAG,YAAY,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,OAAO,OAAO,cAAc,KAAK,EAAE,QAAQ;AAAA,EAAA;AAE3F,QAAM,SAAS,KAAK,KAAK,CAAC,SAAS,KAAK,OAAO,GAAG,IAAI,MAAM;AAE5D,SACE,qBAAC,SAAI,WAAW,GAAG,wDAAwD,SAAS,GAAG,uBAAqB,KAAK,KAC/G,UAAA;AAAA,IAAA,oBAAC,UAAO,MAAY;AAAA,IACnB,KAAK,SAAS,KAAK,oBAAC,MAAA,EAAK,MAAY,OAAO,QAAQ,UAAU,CAAC,OAAO,OAAO,EAAe,EAAA,CAAG;AAAA,IAC/F,WAAW,aACV;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAI,iBAAiB,EAAE,eAAA,IAAmB,CAAA;AAAA,QAC1C,GAAI,eAAe,SAAY,EAAE,WAAA,IAAe,CAAA;AAAA,QAChD,GAAI,eAAe,EAAE,iBAAiB,CAAA;AAAA,MAAC;AAAA,IAAA,IAExC,WAAW,QACb;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACL,GAAI,KAAK,cAAc,EAAE,aAAa,KAAK,YAAA,IAAgB,CAAA;AAAA,QAC3D,GAAI,KAAK,mBAAmB,EAAE,OAAO,KAAK,iBAAA,IAAqB,CAAA;AAAA,MAAC;AAAA,IAAA,IAGnE,oBAAC,UAAA,EAAuC,MAAY,SAAkB,OAAO,OAAA,GAA9D,GAAG,KAAK,GAAG,IAAI,MAAM,EAAiD;AAAA,EAAA,GAEzF;AAEJ;"}