@flanksource/clicky-ui 0.3.48 → 0.3.50

package/dist/data/traces/SqlTraceTable.js

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

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

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

package/dist/data/traces/TerminalCastPlayer.cjs

@@ -0,0 +1,162 @@
+"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 SegmentedControl = require("../../components/SegmentedControl.cjs");
+const utils = require("../../lib/utils.cjs");
+const AnsiHtml = require("../AnsiHtml.cjs");
+const Badge = require("../Badge.cjs");
+const Icon = require("../Icon.cjs");
+const cast = require("./cast.cjs");
+const terminalScreen = require("./terminal-screen.cjs");
+const terminalTimeline = require("./terminal-timeline.cjs");
+const UiPause = require("../../icons/components/UiPause.cjs");
+const UiPlay = require("../../icons/components/UiPlay.cjs");
+const UiSkipForward = require("../../icons/components/UiSkipForward.cjs");
+const TICK_MS = 50;
+const SPEEDS = ["1", "2", "4"];
+const SPEED_OPTIONS = SPEEDS.map((speed) => ({ id: speed, label: `${speed}x` }));
+const VIEW_OPTIONS = [
+  { id: "replay", label: "Replay" },
+  { id: "settled", label: "Settled screen" }
+];
+function resolveEvents(events, castText) {
+  if (events === void 0 === (castText === void 0)) {
+    throw new Error("TerminalCastPlayer takes either events or castText, not both or neither");
+  }
+  return events ?? cast.parseCast(castText);
+}
+function seconds(value) {
+  return `${value.toFixed(1)}s`;
+}
+function ExitBadge({ exit }) {
+  if (exit.exitCode === void 0) return /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { variant: "outline", tone: "neutral", size: "sm", children: "exited" });
+  return /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { variant: "soft", tone: exit.exitCode === 0 ? "success" : "danger", size: "sm", className: "font-mono", children: `exit ${exit.exitCode}` });
+}
+function useReplayScreen(timeline, position) {
+  const cache = react.useRef(void 0);
+  const count = terminalTimeline.stepCountAt(timeline.steps, position);
+  return react.useMemo(() => {
+    var _a;
+    const previous = ((_a = cache.current) == null ? void 0 : _a.timeline) === timeline ? cache.current.replay : void 0;
+    const replay = terminalTimeline.replayTo(previous, timeline, count);
+    cache.current = { timeline, replay };
+    return { ansi: terminalScreen.screenToAnsi(replay.screen), cols: replay.screen.width, rows: replay.screen.height };
+  }, [timeline, count]);
+}
+function TerminalCastPlayer({
+  events,
+  castText,
+  autoPlay = false,
+  emptyLabel = "No terminal output recorded",
+  className
+}) {
+  var _a, _b;
+  const timeline = react.useMemo(() => terminalTimeline.buildTimeline(resolveEvents(events, castText)), [events, castText]);
+  const [position, setPosition] = react.useState(0);
+  const [playing, setPlaying] = react.useState(autoPlay);
+  const [speed, setSpeed] = react.useState("1");
+  const [view, setView] = react.useState("replay");
+  const replay = useReplayScreen(timeline, position);
+  react.useEffect(() => {
+    if (!playing) return;
+    let last = Date.now();
+    const timer = setInterval(() => {
+      const now = Date.now();
+      const elapsed = (now - last) / 1e3;
+      last = now;
+      setPosition((current) => Math.min(timeline.duration, current + elapsed * Number(speed)));
+    }, TICK_MS);
+    return () => clearInterval(timer);
+  }, [playing, speed, timeline.duration]);
+  react.useEffect(() => {
+    if (playing && position >= timeline.duration) setPlaying(false);
+  }, [playing, position, timeline.duration]);
+  if (timeline.steps.length === 0 && timeline.settled === void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-density-6 text-center text-muted-foreground text-sm", children: emptyLabel });
+  }
+  const hasSettled = timeline.settled !== void 0;
+  const showSettled = view === "settled" && hasSettled;
+  const play = () => {
+    if (position >= timeline.duration) setPosition(0);
+    setPlaying(true);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex min-h-0 flex-col gap-density-2", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-density-2 text-xs text-muted-foreground", children: [
+      ((_a = timeline.exit) == null ? void 0 : _a.command) ? /* @__PURE__ */ jsxRuntime.jsx("code", { className: "font-mono text-foreground", children: timeline.exit.command }) : null,
+      timeline.exit ? /* @__PURE__ */ jsxRuntime.jsx(ExitBadge, { exit: timeline.exit }) : null,
+      ((_b = timeline.exit) == null ? void 0 : _b.truncated) ? /* @__PURE__ */ jsxRuntime.jsx("span", { title: "Size caps or a full buffer stopped some output events being recorded", children: /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { variant: "soft", tone: "warning", size: "sm", children: "output truncated" }) }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: `${timeline.width}x${timeline.height}` }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
+      hasSettled && timeline.steps.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(SegmentedControl.SegmentedControl, { size: "sm", "aria-label": "Screen view", value: view, options: VIEW_OPTIONS, onChange: setView }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "region",
+        "aria-label": "Terminal screen",
+        "data-cols": showSettled ? void 0 : replay.cols,
+        className: "overflow-auto rounded border bg-black p-density-2",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          AnsiHtml.AnsiHtml,
+          {
+            text: showSettled ? timeline.settled : replay.ansi,
+            className: "font-mono text-xs leading-5 whitespace-pre text-gray-100"
+          }
+        )
+      }
+    ),
+    timeline.steps.length > 0 && !showSettled ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-density-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          "aria-label": playing ? "Pause" : "Play",
+          onClick: playing ? () => setPlaying(false) : play,
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: playing ? UiPause.UiPause : UiPlay.UiPlay })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "range",
+          "aria-label": "Seek",
+          className: "min-w-0 flex-1 accent-primary",
+          min: 0,
+          max: timeline.duration,
+          step: "any",
+          value: position,
+          onChange: (event) => setPosition(Number(event.target.value))
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: `${seconds(position)} / ${seconds(timeline.duration)}` }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SegmentedControl.SegmentedControl,
+        {
+          size: "sm",
+          "aria-label": "Playback speed",
+          value: speed,
+          options: SPEED_OPTIONS,
+          onChange: setSpeed
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          "aria-label": "Jump to end",
+          onClick: () => {
+            setPlaying(false);
+            setPosition(timeline.duration);
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiSkipForward.UiSkipForward })
+        }
+      )
+    ] }) : null
+  ] });
+}
+exports.TerminalCastPlayer = TerminalCastPlayer;
+//# sourceMappingURL=TerminalCastPlayer.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalCastPlayer.cjs","sources":["../../../src/data/traces/TerminalCastPlayer.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { SegmentedControl } from \"../../components/SegmentedControl\";\nimport { UiPause, UiPlay, UiSkipForward } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport { AnsiHtml } from \"../AnsiHtml\";\nimport { Badge } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport { parseCast } from \"./cast\";\nimport { screenToAnsi } from \"./terminal-screen\";\nimport {\n  buildTimeline,\n  replayTo,\n  stepCountAt,\n  type ScreenReplay,\n  type TerminalTimeline,\n} from \"./terminal-timeline\";\nimport type { TerminalEvent } from \"./types\";\n\nconst TICK_MS = 50;\nconst SPEEDS = [\"1\", \"2\", \"4\"] as const;\ntype Speed = (typeof SPEEDS)[number];\ntype View = \"replay\" | \"settled\";\n\nconst SPEED_OPTIONS = SPEEDS.map((speed) => ({ id: speed, label: `${speed}x` }));\nconst VIEW_OPTIONS: { id: View; label: string }[] = [\n  { id: \"replay\", label: \"Replay\" },\n  { id: \"settled\", label: \"Settled screen\" },\n];\n\nexport type TerminalCastPlayerProps = {\n  /** `terminal` trace records. Give this or `castText`. */\n  events?: TerminalEvent[];\n  /** An asciinema v2 cast, such as a downloaded `.cast`. Give this or `events`. */\n  castText?: string;\n  /** Start playing on mount. */\n  autoPlay?: boolean;\n  /** Shown when the session recorded no events. */\n  emptyLabel?: string;\n  /** Classes applied to the player root. */\n  className?: string;\n};\n\nfunction resolveEvents(events: TerminalEvent[] | undefined, castText: string | undefined): TerminalEvent[] {\n  if ((events === undefined) === (castText === undefined)) {\n    throw new Error(\"TerminalCastPlayer takes either events or castText, not both or neither\");\n  }\n  return events ?? parseCast(castText!);\n}\n\nfunction seconds(value: number): string {\n  return `${value.toFixed(1)}s`;\n}\n\nfunction ExitBadge({ exit }: { exit: TerminalEvent }) {\n  if (exit.exitCode === undefined) return <Badge variant=\"outline\" tone=\"neutral\" size=\"sm\">exited</Badge>;\n  return (\n    <Badge variant=\"soft\" tone={exit.exitCode === 0 ? \"success\" : \"danger\"} size=\"sm\" className=\"font-mono\">\n      {`exit ${exit.exitCode}`}\n    </Badge>\n  );\n}\n\n/** Feeds the timeline to a screen as the position moves, reusing the screen while moving forward. */\nfunction useReplayScreen(timeline: TerminalTimeline, position: number) {\n  const cache = useRef<{ timeline: TerminalTimeline; replay: ScreenReplay } | undefined>(undefined);\n  const count = stepCountAt(timeline.steps, position);\n  return useMemo(() => {\n    const previous = cache.current?.timeline === timeline ? cache.current.replay : undefined;\n    const replay = replayTo(previous, timeline, count);\n    cache.current = { timeline, replay };\n    return { ansi: screenToAnsi(replay.screen), cols: replay.screen.width, rows: replay.screen.height };\n  }, [timeline, count]);\n}\n\n/**\n * Replays a `terminal` trace: output events over time with play/pause, a\n * scrubber, 1x/2x/4x speed and jump-to-end, honouring resizes. A downloaded\n * asciinema cast renders the same way through `castText`. When the capture\n * settled a screen, it is offered as the \"Settled screen\" view.\n */\nexport function TerminalCastPlayer({\n  events,\n  castText,\n  autoPlay = false,\n  emptyLabel = \"No terminal output recorded\",\n  className,\n}: TerminalCastPlayerProps) {\n  const timeline = useMemo(() => buildTimeline(resolveEvents(events, castText)), [events, castText]);\n  const [position, setPosition] = useState(0);\n  const [playing, setPlaying] = useState(autoPlay);\n  const [speed, setSpeed] = useState<Speed>(\"1\");\n  const [view, setView] = useState<View>(\"replay\");\n  const replay = useReplayScreen(timeline, position);\n\n  useEffect(() => {\n    if (!playing) return;\n    let last = Date.now();\n    const timer = setInterval(() => {\n      const now = Date.now();\n      const elapsed = (now - last) / 1000;\n      last = now;\n      setPosition((current) => Math.min(timeline.duration, current + elapsed * Number(speed)));\n    }, TICK_MS);\n    return () => clearInterval(timer);\n  }, [playing, speed, timeline.duration]);\n\n  useEffect(() => {\n    if (playing && position >= timeline.duration) setPlaying(false);\n  }, [playing, position, timeline.duration]);\n\n  if (timeline.steps.length === 0 && timeline.settled === undefined) {\n    return <div className=\"p-density-6 text-center text-muted-foreground text-sm\">{emptyLabel}</div>;\n  }\n\n  const hasSettled = timeline.settled !== undefined;\n  const showSettled = view === \"settled\" && hasSettled;\n  const play = () => {\n    if (position >= timeline.duration) setPosition(0);\n    setPlaying(true);\n  };\n\n  return (\n    <div className={cn(\"flex min-h-0 flex-col gap-density-2\", className)}>\n      <div className=\"flex flex-wrap items-center gap-density-2 text-xs text-muted-foreground\">\n        {timeline.exit?.command ? <code className=\"font-mono text-foreground\">{timeline.exit.command}</code> : null}\n        {timeline.exit ? <ExitBadge exit={timeline.exit} /> : null}\n        {timeline.exit?.truncated ? (\n          <span title=\"Size caps or a full buffer stopped some output events being recorded\">\n            <Badge variant=\"soft\" tone=\"warning\" size=\"sm\">output truncated</Badge>\n          </span>\n        ) : null}\n        <span className=\"tabular-nums\">{`${timeline.width}x${timeline.height}`}</span>\n        <span className=\"flex-1\" />\n        {hasSettled && timeline.steps.length > 0 ? (\n          <SegmentedControl size=\"sm\" aria-label=\"Screen view\" value={view} options={VIEW_OPTIONS} onChange={setView} />\n        ) : null}\n      </div>\n\n      <div\n        role=\"region\"\n        aria-label=\"Terminal screen\"\n        data-cols={showSettled ? undefined : replay.cols}\n        className=\"overflow-auto rounded border bg-black p-density-2\"\n      >\n        <AnsiHtml\n          text={showSettled ? timeline.settled! : replay.ansi}\n          className=\"font-mono text-xs leading-5 whitespace-pre text-gray-100\"\n        />\n      </div>\n\n      {timeline.steps.length > 0 && !showSettled ? (\n        <div className=\"flex items-center gap-density-2\">\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            aria-label={playing ? \"Pause\" : \"Play\"}\n            onClick={playing ? () => setPlaying(false) : play}\n          >\n            <Icon icon={playing ? UiPause : UiPlay} />\n          </Button>\n          <input\n            type=\"range\"\n            aria-label=\"Seek\"\n            className=\"min-w-0 flex-1 accent-primary\"\n            min={0}\n            max={timeline.duration}\n            step=\"any\"\n            value={position}\n            onChange={(event) => setPosition(Number(event.target.value))}\n          />\n          <span className=\"shrink-0 text-xs tabular-nums text-muted-foreground\">\n            {`${seconds(position)} / ${seconds(timeline.duration)}`}\n          </span>\n          <SegmentedControl\n            size=\"sm\"\n            aria-label=\"Playback speed\"\n            value={speed}\n            options={SPEED_OPTIONS}\n            onChange={setSpeed}\n          />\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            aria-label=\"Jump to end\"\n            onClick={() => {\n              setPlaying(false);\n              setPosition(timeline.duration);\n            }}\n          >\n            <Icon icon={UiSkipForward} />\n          </Button>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["parseCast","jsx","Badge","useRef","stepCountAt","useMemo","replayTo","screenToAnsi","buildTimeline","useState","useEffect","cn","jsxs","SegmentedControl","AnsiHtml","Button","Icon","UiPause","UiPlay","UiSkipForward"],"mappings":"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"}

package/dist/data/traces/TerminalCastPlayer.js

@@ -0,0 +1,162 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useEffect, useRef } from "react";
+import { Button } from "../../components/button.js";
+import { SegmentedControl } from "../../components/SegmentedControl.js";
+import { cn } from "../../lib/utils.js";
+import { AnsiHtml } from "../AnsiHtml.js";
+import { Badge } from "../Badge.js";
+import { Icon } from "../Icon.js";
+import { parseCast } from "./cast.js";
+import { screenToAnsi } from "./terminal-screen.js";
+import { buildTimeline, stepCountAt, replayTo } from "./terminal-timeline.js";
+import { UiPause } from "../../icons/components/UiPause.js";
+import { UiPlay } from "../../icons/components/UiPlay.js";
+import { UiSkipForward } from "../../icons/components/UiSkipForward.js";
+const TICK_MS = 50;
+const SPEEDS = ["1", "2", "4"];
+const SPEED_OPTIONS = SPEEDS.map((speed) => ({ id: speed, label: `${speed}x` }));
+const VIEW_OPTIONS = [
+  { id: "replay", label: "Replay" },
+  { id: "settled", label: "Settled screen" }
+];
+function resolveEvents(events, castText) {
+  if (events === void 0 === (castText === void 0)) {
+    throw new Error("TerminalCastPlayer takes either events or castText, not both or neither");
+  }
+  return events ?? parseCast(castText);
+}
+function seconds(value) {
+  return `${value.toFixed(1)}s`;
+}
+function ExitBadge({ exit }) {
+  if (exit.exitCode === void 0) return /* @__PURE__ */ jsx(Badge, { variant: "outline", tone: "neutral", size: "sm", children: "exited" });
+  return /* @__PURE__ */ jsx(Badge, { variant: "soft", tone: exit.exitCode === 0 ? "success" : "danger", size: "sm", className: "font-mono", children: `exit ${exit.exitCode}` });
+}
+function useReplayScreen(timeline, position) {
+  const cache = useRef(void 0);
+  const count = stepCountAt(timeline.steps, position);
+  return useMemo(() => {
+    var _a;
+    const previous = ((_a = cache.current) == null ? void 0 : _a.timeline) === timeline ? cache.current.replay : void 0;
+    const replay = replayTo(previous, timeline, count);
+    cache.current = { timeline, replay };
+    return { ansi: screenToAnsi(replay.screen), cols: replay.screen.width, rows: replay.screen.height };
+  }, [timeline, count]);
+}
+function TerminalCastPlayer({
+  events,
+  castText,
+  autoPlay = false,
+  emptyLabel = "No terminal output recorded",
+  className
+}) {
+  var _a, _b;
+  const timeline = useMemo(() => buildTimeline(resolveEvents(events, castText)), [events, castText]);
+  const [position, setPosition] = useState(0);
+  const [playing, setPlaying] = useState(autoPlay);
+  const [speed, setSpeed] = useState("1");
+  const [view, setView] = useState("replay");
+  const replay = useReplayScreen(timeline, position);
+  useEffect(() => {
+    if (!playing) return;
+    let last = Date.now();
+    const timer = setInterval(() => {
+      const now = Date.now();
+      const elapsed = (now - last) / 1e3;
+      last = now;
+      setPosition((current) => Math.min(timeline.duration, current + elapsed * Number(speed)));
+    }, TICK_MS);
+    return () => clearInterval(timer);
+  }, [playing, speed, timeline.duration]);
+  useEffect(() => {
+    if (playing && position >= timeline.duration) setPlaying(false);
+  }, [playing, position, timeline.duration]);
+  if (timeline.steps.length === 0 && timeline.settled === void 0) {
+    return /* @__PURE__ */ jsx("div", { className: "p-density-6 text-center text-muted-foreground text-sm", children: emptyLabel });
+  }
+  const hasSettled = timeline.settled !== void 0;
+  const showSettled = view === "settled" && hasSettled;
+  const play = () => {
+    if (position >= timeline.duration) setPosition(0);
+    setPlaying(true);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 flex-col gap-density-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-density-2 text-xs text-muted-foreground", children: [
+      ((_a = timeline.exit) == null ? void 0 : _a.command) ? /* @__PURE__ */ jsx("code", { className: "font-mono text-foreground", children: timeline.exit.command }) : null,
+      timeline.exit ? /* @__PURE__ */ jsx(ExitBadge, { exit: timeline.exit }) : null,
+      ((_b = timeline.exit) == null ? void 0 : _b.truncated) ? /* @__PURE__ */ jsx("span", { title: "Size caps or a full buffer stopped some output events being recorded", children: /* @__PURE__ */ jsx(Badge, { variant: "soft", tone: "warning", size: "sm", children: "output truncated" }) }) : null,
+      /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: `${timeline.width}x${timeline.height}` }),
+      /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+      hasSettled && timeline.steps.length > 0 ? /* @__PURE__ */ jsx(SegmentedControl, { size: "sm", "aria-label": "Screen view", value: view, options: VIEW_OPTIONS, onChange: setView }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "region",
+        "aria-label": "Terminal screen",
+        "data-cols": showSettled ? void 0 : replay.cols,
+        className: "overflow-auto rounded border bg-black p-density-2",
+        children: /* @__PURE__ */ jsx(
+          AnsiHtml,
+          {
+            text: showSettled ? timeline.settled : replay.ansi,
+            className: "font-mono text-xs leading-5 whitespace-pre text-gray-100"
+          }
+        )
+      }
+    ),
+    timeline.steps.length > 0 && !showSettled ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-density-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          "aria-label": playing ? "Pause" : "Play",
+          onClick: playing ? () => setPlaying(false) : play,
+          children: /* @__PURE__ */ jsx(Icon, { icon: playing ? UiPause : UiPlay })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          "aria-label": "Seek",
+          className: "min-w-0 flex-1 accent-primary",
+          min: 0,
+          max: timeline.duration,
+          step: "any",
+          value: position,
+          onChange: (event) => setPosition(Number(event.target.value))
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: `${seconds(position)} / ${seconds(timeline.duration)}` }),
+      /* @__PURE__ */ jsx(
+        SegmentedControl,
+        {
+          size: "sm",
+          "aria-label": "Playback speed",
+          value: speed,
+          options: SPEED_OPTIONS,
+          onChange: setSpeed
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          "aria-label": "Jump to end",
+          onClick: () => {
+            setPlaying(false);
+            setPosition(timeline.duration);
+          },
+          children: /* @__PURE__ */ jsx(Icon, { icon: UiSkipForward })
+        }
+      )
+    ] }) : null
+  ] });
+}
+export {
+  TerminalCastPlayer
+};
+//# sourceMappingURL=TerminalCastPlayer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalCastPlayer.js","sources":["../../../src/data/traces/TerminalCastPlayer.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { SegmentedControl } from \"../../components/SegmentedControl\";\nimport { UiPause, UiPlay, UiSkipForward } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport { AnsiHtml } from \"../AnsiHtml\";\nimport { Badge } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport { parseCast } from \"./cast\";\nimport { screenToAnsi } from \"./terminal-screen\";\nimport {\n  buildTimeline,\n  replayTo,\n  stepCountAt,\n  type ScreenReplay,\n  type TerminalTimeline,\n} from \"./terminal-timeline\";\nimport type { TerminalEvent } from \"./types\";\n\nconst TICK_MS = 50;\nconst SPEEDS = [\"1\", \"2\", \"4\"] as const;\ntype Speed = (typeof SPEEDS)[number];\ntype View = \"replay\" | \"settled\";\n\nconst SPEED_OPTIONS = SPEEDS.map((speed) => ({ id: speed, label: `${speed}x` }));\nconst VIEW_OPTIONS: { id: View; label: string }[] = [\n  { id: \"replay\", label: \"Replay\" },\n  { id: \"settled\", label: \"Settled screen\" },\n];\n\nexport type TerminalCastPlayerProps = {\n  /** `terminal` trace records. Give this or `castText`. */\n  events?: TerminalEvent[];\n  /** An asciinema v2 cast, such as a downloaded `.cast`. Give this or `events`. */\n  castText?: string;\n  /** Start playing on mount. */\n  autoPlay?: boolean;\n  /** Shown when the session recorded no events. */\n  emptyLabel?: string;\n  /** Classes applied to the player root. */\n  className?: string;\n};\n\nfunction resolveEvents(events: TerminalEvent[] | undefined, castText: string | undefined): TerminalEvent[] {\n  if ((events === undefined) === (castText === undefined)) {\n    throw new Error(\"TerminalCastPlayer takes either events or castText, not both or neither\");\n  }\n  return events ?? parseCast(castText!);\n}\n\nfunction seconds(value: number): string {\n  return `${value.toFixed(1)}s`;\n}\n\nfunction ExitBadge({ exit }: { exit: TerminalEvent }) {\n  if (exit.exitCode === undefined) return <Badge variant=\"outline\" tone=\"neutral\" size=\"sm\">exited</Badge>;\n  return (\n    <Badge variant=\"soft\" tone={exit.exitCode === 0 ? \"success\" : \"danger\"} size=\"sm\" className=\"font-mono\">\n      {`exit ${exit.exitCode}`}\n    </Badge>\n  );\n}\n\n/** Feeds the timeline to a screen as the position moves, reusing the screen while moving forward. */\nfunction useReplayScreen(timeline: TerminalTimeline, position: number) {\n  const cache = useRef<{ timeline: TerminalTimeline; replay: ScreenReplay } | undefined>(undefined);\n  const count = stepCountAt(timeline.steps, position);\n  return useMemo(() => {\n    const previous = cache.current?.timeline === timeline ? cache.current.replay : undefined;\n    const replay = replayTo(previous, timeline, count);\n    cache.current = { timeline, replay };\n    return { ansi: screenToAnsi(replay.screen), cols: replay.screen.width, rows: replay.screen.height };\n  }, [timeline, count]);\n}\n\n/**\n * Replays a `terminal` trace: output events over time with play/pause, a\n * scrubber, 1x/2x/4x speed and jump-to-end, honouring resizes. A downloaded\n * asciinema cast renders the same way through `castText`. When the capture\n * settled a screen, it is offered as the \"Settled screen\" view.\n */\nexport function TerminalCastPlayer({\n  events,\n  castText,\n  autoPlay = false,\n  emptyLabel = \"No terminal output recorded\",\n  className,\n}: TerminalCastPlayerProps) {\n  const timeline = useMemo(() => buildTimeline(resolveEvents(events, castText)), [events, castText]);\n  const [position, setPosition] = useState(0);\n  const [playing, setPlaying] = useState(autoPlay);\n  const [speed, setSpeed] = useState<Speed>(\"1\");\n  const [view, setView] = useState<View>(\"replay\");\n  const replay = useReplayScreen(timeline, position);\n\n  useEffect(() => {\n    if (!playing) return;\n    let last = Date.now();\n    const timer = setInterval(() => {\n      const now = Date.now();\n      const elapsed = (now - last) / 1000;\n      last = now;\n      setPosition((current) => Math.min(timeline.duration, current + elapsed * Number(speed)));\n    }, TICK_MS);\n    return () => clearInterval(timer);\n  }, [playing, speed, timeline.duration]);\n\n  useEffect(() => {\n    if (playing && position >= timeline.duration) setPlaying(false);\n  }, [playing, position, timeline.duration]);\n\n  if (timeline.steps.length === 0 && timeline.settled === undefined) {\n    return <div className=\"p-density-6 text-center text-muted-foreground text-sm\">{emptyLabel}</div>;\n  }\n\n  const hasSettled = timeline.settled !== undefined;\n  const showSettled = view === \"settled\" && hasSettled;\n  const play = () => {\n    if (position >= timeline.duration) setPosition(0);\n    setPlaying(true);\n  };\n\n  return (\n    <div className={cn(\"flex min-h-0 flex-col gap-density-2\", className)}>\n      <div className=\"flex flex-wrap items-center gap-density-2 text-xs text-muted-foreground\">\n        {timeline.exit?.command ? <code className=\"font-mono text-foreground\">{timeline.exit.command}</code> : null}\n        {timeline.exit ? <ExitBadge exit={timeline.exit} /> : null}\n        {timeline.exit?.truncated ? (\n          <span title=\"Size caps or a full buffer stopped some output events being recorded\">\n            <Badge variant=\"soft\" tone=\"warning\" size=\"sm\">output truncated</Badge>\n          </span>\n        ) : null}\n        <span className=\"tabular-nums\">{`${timeline.width}x${timeline.height}`}</span>\n        <span className=\"flex-1\" />\n        {hasSettled && timeline.steps.length > 0 ? (\n          <SegmentedControl size=\"sm\" aria-label=\"Screen view\" value={view} options={VIEW_OPTIONS} onChange={setView} />\n        ) : null}\n      </div>\n\n      <div\n        role=\"region\"\n        aria-label=\"Terminal screen\"\n        data-cols={showSettled ? undefined : replay.cols}\n        className=\"overflow-auto rounded border bg-black p-density-2\"\n      >\n        <AnsiHtml\n          text={showSettled ? timeline.settled! : replay.ansi}\n          className=\"font-mono text-xs leading-5 whitespace-pre text-gray-100\"\n        />\n      </div>\n\n      {timeline.steps.length > 0 && !showSettled ? (\n        <div className=\"flex items-center gap-density-2\">\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            aria-label={playing ? \"Pause\" : \"Play\"}\n            onClick={playing ? () => setPlaying(false) : play}\n          >\n            <Icon icon={playing ? UiPause : UiPlay} />\n          </Button>\n          <input\n            type=\"range\"\n            aria-label=\"Seek\"\n            className=\"min-w-0 flex-1 accent-primary\"\n            min={0}\n            max={timeline.duration}\n            step=\"any\"\n            value={position}\n            onChange={(event) => setPosition(Number(event.target.value))}\n          />\n          <span className=\"shrink-0 text-xs tabular-nums text-muted-foreground\">\n            {`${seconds(position)} / ${seconds(timeline.duration)}`}\n          </span>\n          <SegmentedControl\n            size=\"sm\"\n            aria-label=\"Playback speed\"\n            value={speed}\n            options={SPEED_OPTIONS}\n            onChange={setSpeed}\n          />\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            aria-label=\"Jump to end\"\n            onClick={() => {\n              setPlaying(false);\n              setPosition(timeline.duration);\n            }}\n          >\n            <Icon icon={UiSkipForward} />\n          </Button>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/traces/TraceHarView.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const HarPanel = require("../har/HarPanel.cjs");
+const harAdapter = require("./har-adapter.cjs");
+function TraceHarView({ rows, emptyLabel = "No HTTP exchanges recorded", ...panel }) {
+  const entries = react.useMemo(
+    () => rows.map((row, index) => harAdapter.exchangeToHarEntry(row, { id: `${row.startedAt}#${index}` })),
+    [rows]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(HarPanel.HarPanel, { entries, emptyLabel, ...panel });
+}
+exports.TraceHarView = TraceHarView;
+//# sourceMappingURL=TraceHarView.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TraceHarView.cjs","sources":["../../../src/data/traces/TraceHarView.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { HarPanel, type HarPanelProps } from \"../har/HarPanel\";\nimport { exchangeToHarEntry } from \"./har-adapter\";\nimport type { HttpExchangeRow } from \"./types\";\n\nexport type TraceHarViewProps = Omit<HarPanelProps, \"entries\"> & {\n  /** `http` / `http_proxy` trace records. */\n  rows: HttpExchangeRow[];\n};\n\n/**\n * `http` / `http_proxy` trace records rendered by the shared HarPanel. Bodies\n * the store parsed into structure are shown as JSON; a tunnelled CONNECT shows\n * its bytes in and out where a body would be.\n */\nexport function TraceHarView({ rows, emptyLabel = \"No HTTP exchanges recorded\", ...panel }: TraceHarViewProps) {\n  const entries = useMemo(\n    () => rows.map((row, index) => exchangeToHarEntry(row, { id: `${row.startedAt}#${index}` })),\n    [rows],\n  );\n  return <HarPanel entries={entries} emptyLabel={emptyLabel} {...panel} />;\n}\n"],"names":["useMemo","exchangeToHarEntry","jsx","HarPanel"],"mappings":";;;;;;AAeO,SAAS,aAAa,EAAE,MAAM,aAAa,8BAA8B,GAAG,SAA4B;AAC7G,QAAM,UAAUA,MAAAA;AAAAA,IACd,MAAM,KAAK,IAAI,CAAC,KAAK,UAAUC,WAAAA,mBAAmB,KAAK,EAAE,IAAI,GAAG,IAAI,SAAS,IAAI,KAAK,GAAA,CAAI,CAAC;AAAA,IAC3F,CAAC,IAAI;AAAA,EAAA;AAEP,SAAOC,2BAAAA,IAACC,SAAAA,UAAA,EAAS,SAAkB,YAAyB,GAAG,OAAO;AACxE;;"}

package/dist/data/traces/TraceHarView.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { HarPanel } from "../har/HarPanel.js";
+import { exchangeToHarEntry } from "./har-adapter.js";
+function TraceHarView({ rows, emptyLabel = "No HTTP exchanges recorded", ...panel }) {
+  const entries = useMemo(
+    () => rows.map((row, index) => exchangeToHarEntry(row, { id: `${row.startedAt}#${index}` })),
+    [rows]
+  );
+  return /* @__PURE__ */ jsx(HarPanel, { entries, emptyLabel, ...panel });
+}
+export {
+  TraceHarView
+};
+//# sourceMappingURL=TraceHarView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TraceHarView.js","sources":["../../../src/data/traces/TraceHarView.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { HarPanel, type HarPanelProps } from \"../har/HarPanel\";\nimport { exchangeToHarEntry } from \"./har-adapter\";\nimport type { HttpExchangeRow } from \"./types\";\n\nexport type TraceHarViewProps = Omit<HarPanelProps, \"entries\"> & {\n  /** `http` / `http_proxy` trace records. */\n  rows: HttpExchangeRow[];\n};\n\n/**\n * `http` / `http_proxy` trace records rendered by the shared HarPanel. Bodies\n * the store parsed into structure are shown as JSON; a tunnelled CONNECT shows\n * its bytes in and out where a body would be.\n */\nexport function TraceHarView({ rows, emptyLabel = \"No HTTP exchanges recorded\", ...panel }: TraceHarViewProps) {\n  const entries = useMemo(\n    () => rows.map((row, index) => exchangeToHarEntry(row, { id: `${row.startedAt}#${index}` })),\n    [rows],\n  );\n  return <HarPanel entries={entries} emptyLabel={emptyLabel} {...panel} />;\n}\n"],"names":[],"mappings":";;;;AAeO,SAAS,aAAa,EAAE,MAAM,aAAa,8BAA8B,GAAG,SAA4B;AAC7G,QAAM,UAAU;AAAA,IACd,MAAM,KAAK,IAAI,CAAC,KAAK,UAAU,mBAAmB,KAAK,EAAE,IAAI,GAAG,IAAI,SAAS,IAAI,KAAK,GAAA,CAAI,CAAC;AAAA,IAC3F,CAAC,IAAI;AAAA,EAAA;AAEP,SAAO,oBAAC,UAAA,EAAS,SAAkB,YAAyB,GAAG,OAAO;AACxE;"}

package/dist/data/traces/TraceView.cjs

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../../lib/utils.cjs");
+const dataTableUtils = require("../data-table-utils.cjs");
+const DataTable = require("../DataTable.cjs");
+const ProcessRecordViews = require("./ProcessRecordViews.cjs");
+const ProcessTraceTree = require("./ProcessTraceTree.cjs");
+const SqlTraceTable = require("./SqlTraceTable.cjs");
+const TerminalCastPlayer = require("./TerminalCastPlayer.cjs");
+const TraceHarView = require("./TraceHarView.cjs");
+function requireField(kind, rows, field) {
+  rows.forEach((row, index) => {
+    if (row[field] === void 0 || row[field] === null) {
+      throw new Error(`trace kind "${kind}" row ${index} has no "${field}"`);
+    }
+  });
+}
+function GenericTraceTable({ kind, rows }) {
+  const columns = react.useMemo(() => dataTableUtils.inferColumns(rows, { literalKeys: true }), [rows]);
+  return /* @__PURE__ */ jsxRuntime.jsx(DataTable.DataTable, { data: rows, columns, autoFilter: true, emptyMessage: `No ${kind} records` });
+}
+function ProcessTraceView({ rows, samples }) {
+  const [selectedKey, setSelectedKey] = react.useState(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(ProcessTraceTree.ProcessTraceTree, { nodes: rows, selectedKey, onSelect: setSelectedKey, ...samples ? { samples } : {} });
+}
+function TraceView({ kind, rows, samples, className }) {
+  const body = (() => {
+    switch (kind) {
+      case "http":
+      case "http_proxy":
+        requireField(kind, rows, "request");
+        requireField(kind, rows, "response");
+        return /* @__PURE__ */ jsxRuntime.jsx(TraceHarView.TraceHarView, { rows });
+      case "pg_proxy":
+      case "sql_statements":
+        requireField(kind, rows, "sql");
+        return /* @__PURE__ */ jsxRuntime.jsx(SqlTraceTable.SqlTraceTable, { rows });
+      case "terminal":
+        requireField(kind, rows, "kind");
+        requireField(kind, rows, "offset");
+        return /* @__PURE__ */ jsxRuntime.jsx(TerminalCastPlayer.TerminalCastPlayer, { events: rows });
+      case "process_tree":
+        requireField(kind, rows, "key");
+        if (samples) requireField("process_samples", samples, "key");
+        return /* @__PURE__ */ jsxRuntime.jsx(ProcessTraceView, { rows, samples });
+      case "goprof":
+        requireField(kind, rows, "key");
+        requireField(kind, rows, "checkpointId");
+        return /* @__PURE__ */ jsxRuntime.jsx(ProcessRecordViews.GoProfileTraceView, { rows });
+      case "stacks":
+        requireField(kind, rows, "key");
+        requireField(kind, rows, "checkpointId");
+        return /* @__PURE__ */ jsxRuntime.jsx(ProcessRecordViews.StackTraceView, { rows });
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(GenericTraceTable, { kind, rows });
+    }
+  })();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("flex h-full min-h-0 flex-col", className), children: body });
+}
+exports.TraceView = TraceView;
+//# sourceMappingURL=TraceView.cjs.map