@flanksource/clicky-ui 0.3.48 → 0.3.49

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,54 @@
+"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 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 });
+      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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TraceView.cjs","sources":["../../../src/data/traces/TraceView.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { inferColumns } from \"../data-table-utils\";\nimport { DataTable } from \"../DataTable\";\nimport { ProcessTraceTree } from \"./ProcessTraceTree\";\nimport { SqlTraceTable } from \"./SqlTraceTable\";\nimport { TerminalCastPlayer } from \"./TerminalCastPlayer\";\nimport { TraceHarView } from \"./TraceHarView\";\nimport type {\n  HttpExchangeRow,\n  ProcessNodeRow,\n  ProcessSampleRow,\n  SqlStatementRow,\n  TerminalEvent,\n  TraceRow,\n} from \"./types\";\n\nexport type TraceViewProps = {\n  /** The record kind: `http`, `http_proxy`, `pg_proxy`, `sql_statements`, `terminal`, `process_tree`, or any other. */\n  kind: string;\n  /** The kind's records, as its stream stores them. */\n  rows: TraceRow[];\n  /** `process_samples` records of the same root; used by `process_tree` for CPU sparklines. */\n  samples?: TraceRow[];\n  /** Classes applied to the viewer root. */\n  className?: string;\n};\n\n/** Each row of a kind with a dedicated viewer must carry the field that viewer cannot do without. */\nfunction requireField(kind: string, rows: TraceRow[], field: string): void {\n  rows.forEach((row, index) => {\n    if (row[field] === undefined || row[field] === null) {\n      throw new Error(`trace kind \"${kind}\" row ${index} has no \"${field}\"`);\n    }\n  });\n}\n\nfunction GenericTraceTable({ kind, rows }: { kind: string; rows: TraceRow[] }) {\n  const columns = useMemo(() => inferColumns(rows, { literalKeys: true }), [rows]);\n  return <DataTable data={rows} columns={columns} autoFilter emptyMessage={`No ${kind} records`} />;\n}\n\nfunction ProcessTraceView({ rows, samples }: { rows: ProcessNodeRow[]; samples: ProcessSampleRow[] | undefined }) {\n  const [selectedKey, setSelectedKey] = useState<string | null>(null);\n  return <ProcessTraceTree nodes={rows} selectedKey={selectedKey} onSelect={setSelectedKey} {...(samples ? { samples } : {})} />;\n}\n\n/**\n * Renders a trace kind's records with its dedicated viewer: HTTP exchanges in\n * a HAR panel, SQL statements in a table, a terminal session in a cast player,\n * a process tree as a tree. Any other kind gets a table over the row keys.\n */\nexport function TraceView({ kind, rows, samples, className }: TraceViewProps) {\n  const body = (() => {\n    switch (kind) {\n      case \"http\":\n      case \"http_proxy\":\n        requireField(kind, rows, \"request\");\n        requireField(kind, rows, \"response\");\n        return <TraceHarView rows={rows as HttpExchangeRow[]} />;\n      case \"pg_proxy\":\n      case \"sql_statements\":\n        requireField(kind, rows, \"sql\");\n        return <SqlTraceTable rows={rows as SqlStatementRow[]} />;\n      case \"terminal\":\n        requireField(kind, rows, \"kind\");\n        requireField(kind, rows, \"offset\");\n        return <TerminalCastPlayer events={rows as TerminalEvent[]} />;\n      case \"process_tree\":\n        requireField(kind, rows, \"key\");\n        if (samples) requireField(\"process_samples\", samples, \"key\");\n        return <ProcessTraceView rows={rows as ProcessNodeRow[]} samples={samples as ProcessSampleRow[] | undefined} />;\n      default:\n        return <GenericTraceTable kind={kind} rows={rows} />;\n    }\n  })();\n  return <div className={cn(\"flex h-full min-h-0 flex-col\", className)}>{body}</div>;\n}\n"],"names":["useMemo","inferColumns","jsx","DataTable","useState","ProcessTraceTree","TraceHarView","SqlTraceTable","TerminalCastPlayer","cn"],"mappings":";;;;;;;;;;;AA6BA,SAAS,aAAa,MAAc,MAAkB,OAAqB;AACzE,OAAK,QAAQ,CAAC,KAAK,UAAU;AAC3B,QAAI,IAAI,KAAK,MAAM,UAAa,IAAI,KAAK,MAAM,MAAM;AACnD,YAAM,IAAI,MAAM,eAAe,IAAI,SAAS,KAAK,YAAY,KAAK,GAAG;AAAA,IACvE;AAAA,EACF,CAAC;AACH;AAEA,SAAS,kBAAkB,EAAE,MAAM,QAA4C;AAC7E,QAAM,UAAUA,MAAAA,QAAQ,MAAMC,eAAAA,aAAa,MAAM,EAAE,aAAa,KAAA,CAAM,GAAG,CAAC,IAAI,CAAC;AAC/E,SAAOC,2BAAAA,IAACC,UAAAA,WAAA,EAAU,MAAM,MAAM,SAAkB,YAAU,MAAC,cAAc,MAAM,IAAI,WAAA,CAAY;AACjG;AAEA,SAAS,iBAAiB,EAAE,MAAM,WAAgF;AAChH,QAAM,CAAC,aAAa,cAAc,IAAIC,MAAAA,SAAwB,IAAI;AAClE,SAAOF,2BAAAA,IAACG,iBAAAA,kBAAA,EAAiB,OAAO,MAAM,aAA0B,UAAU,gBAAiB,GAAI,UAAU,EAAE,QAAA,IAAY,CAAA,EAAC,CAAI;AAC9H;AAOO,SAAS,UAAU,EAAE,MAAM,MAAM,SAAS,aAA6B;AAC5E,QAAM,QAAQ,MAAM;AAClB,YAAQ,MAAA;AAAA,MACN,KAAK;AAAA,MACL,KAAK;AACH,qBAAa,MAAM,MAAM,SAAS;AAClC,qBAAa,MAAM,MAAM,UAAU;AACnC,eAAOH,+BAACI,aAAAA,gBAAa,MAAiC;AAAA,MACxD,KAAK;AAAA,MACL,KAAK;AACH,qBAAa,MAAM,MAAM,KAAK;AAC9B,eAAOJ,+BAACK,cAAAA,iBAAc,MAAiC;AAAA,MACzD,KAAK;AACH,qBAAa,MAAM,MAAM,MAAM;AAC/B,qBAAa,MAAM,MAAM,QAAQ;AACjC,eAAOL,2BAAAA,IAACM,mBAAAA,oBAAA,EAAmB,QAAQ,KAAA,CAAyB;AAAA,MAC9D,KAAK;AACH,qBAAa,MAAM,MAAM,KAAK;AAC9B,YAAI,QAAS,cAAa,mBAAmB,SAAS,KAAK;AAC3D,eAAON,2BAAAA,IAAC,kBAAA,EAAiB,MAAgC,QAAA,CAAoD;AAAA,MAC/G;AACE,eAAOA,2BAAAA,IAAC,mBAAA,EAAkB,MAAY,KAAA,CAAY;AAAA,IAAA;AAAA,EAExD,GAAA;AACA,wCAAQ,OAAA,EAAI,WAAWO,MAAAA,GAAG,gCAAgC,SAAS,GAAI,UAAA,MAAK;AAC9E;;"}

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

@@ -0,0 +1,18 @@
+import { TraceRow } from './types.js';
+export type TraceViewProps = {
+    /** The record kind: `http`, `http_proxy`, `pg_proxy`, `sql_statements`, `terminal`, `process_tree`, or any other. */
+    kind: string;
+    /** The kind's records, as its stream stores them. */
+    rows: TraceRow[];
+    /** `process_samples` records of the same root; used by `process_tree` for CPU sparklines. */
+    samples?: TraceRow[];
+    /** Classes applied to the viewer root. */
+    className?: string;
+};
+/**
+ * Renders a trace kind's records with its dedicated viewer: HTTP exchanges in
+ * a HAR panel, SQL statements in a table, a terminal session in a cast player,
+ * a process tree as a tree. Any other kind gets a table over the row keys.
+ */
+export declare function TraceView({ kind, rows, samples, className }: TraceViewProps): import("react").JSX.Element;
+//# sourceMappingURL=TraceView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TraceView.d.ts","sourceRoot":"","sources":["../../../src/data/traces/TraceView.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAMV,QAAQ,EACT,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,cAAc,GAAG;IAC3B,qHAAqH;IACrH,IAAI,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,6FAA6F;IAC7F,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAqBF;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,cAAc,+BAyB3E"}

package/dist/data/traces/TraceView.js

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { cn } from "../../lib/utils.js";
+import { inferColumns } from "../data-table-utils.js";
+import { DataTable } from "../DataTable.js";
+import { ProcessTraceTree } from "./ProcessTraceTree.js";
+import { SqlTraceTable } from "./SqlTraceTable.js";
+import { TerminalCastPlayer } from "./TerminalCastPlayer.js";
+import { TraceHarView } from "./TraceHarView.js";
+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 = useMemo(() => inferColumns(rows, { literalKeys: true }), [rows]);
+  return /* @__PURE__ */ jsx(DataTable, { data: rows, columns, autoFilter: true, emptyMessage: `No ${kind} records` });
+}
+function ProcessTraceView({ rows, samples }) {
+  const [selectedKey, setSelectedKey] = useState(null);
+  return /* @__PURE__ */ jsx(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__ */ jsx(TraceHarView, { rows });
+      case "pg_proxy":
+      case "sql_statements":
+        requireField(kind, rows, "sql");
+        return /* @__PURE__ */ jsx(SqlTraceTable, { rows });
+      case "terminal":
+        requireField(kind, rows, "kind");
+        requireField(kind, rows, "offset");
+        return /* @__PURE__ */ jsx(TerminalCastPlayer, { events: rows });
+      case "process_tree":
+        requireField(kind, rows, "key");
+        if (samples) requireField("process_samples", samples, "key");
+        return /* @__PURE__ */ jsx(ProcessTraceView, { rows, samples });
+      default:
+        return /* @__PURE__ */ jsx(GenericTraceTable, { kind, rows });
+    }
+  })();
+  return /* @__PURE__ */ jsx("div", { className: cn("flex h-full min-h-0 flex-col", className), children: body });
+}
+export {
+  TraceView
+};
+//# sourceMappingURL=TraceView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TraceView.js","sources":["../../../src/data/traces/TraceView.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { inferColumns } from \"../data-table-utils\";\nimport { DataTable } from \"../DataTable\";\nimport { ProcessTraceTree } from \"./ProcessTraceTree\";\nimport { SqlTraceTable } from \"./SqlTraceTable\";\nimport { TerminalCastPlayer } from \"./TerminalCastPlayer\";\nimport { TraceHarView } from \"./TraceHarView\";\nimport type {\n  HttpExchangeRow,\n  ProcessNodeRow,\n  ProcessSampleRow,\n  SqlStatementRow,\n  TerminalEvent,\n  TraceRow,\n} from \"./types\";\n\nexport type TraceViewProps = {\n  /** The record kind: `http`, `http_proxy`, `pg_proxy`, `sql_statements`, `terminal`, `process_tree`, or any other. */\n  kind: string;\n  /** The kind's records, as its stream stores them. */\n  rows: TraceRow[];\n  /** `process_samples` records of the same root; used by `process_tree` for CPU sparklines. */\n  samples?: TraceRow[];\n  /** Classes applied to the viewer root. */\n  className?: string;\n};\n\n/** Each row of a kind with a dedicated viewer must carry the field that viewer cannot do without. */\nfunction requireField(kind: string, rows: TraceRow[], field: string): void {\n  rows.forEach((row, index) => {\n    if (row[field] === undefined || row[field] === null) {\n      throw new Error(`trace kind \"${kind}\" row ${index} has no \"${field}\"`);\n    }\n  });\n}\n\nfunction GenericTraceTable({ kind, rows }: { kind: string; rows: TraceRow[] }) {\n  const columns = useMemo(() => inferColumns(rows, { literalKeys: true }), [rows]);\n  return <DataTable data={rows} columns={columns} autoFilter emptyMessage={`No ${kind} records`} />;\n}\n\nfunction ProcessTraceView({ rows, samples }: { rows: ProcessNodeRow[]; samples: ProcessSampleRow[] | undefined }) {\n  const [selectedKey, setSelectedKey] = useState<string | null>(null);\n  return <ProcessTraceTree nodes={rows} selectedKey={selectedKey} onSelect={setSelectedKey} {...(samples ? { samples } : {})} />;\n}\n\n/**\n * Renders a trace kind's records with its dedicated viewer: HTTP exchanges in\n * a HAR panel, SQL statements in a table, a terminal session in a cast player,\n * a process tree as a tree. Any other kind gets a table over the row keys.\n */\nexport function TraceView({ kind, rows, samples, className }: TraceViewProps) {\n  const body = (() => {\n    switch (kind) {\n      case \"http\":\n      case \"http_proxy\":\n        requireField(kind, rows, \"request\");\n        requireField(kind, rows, \"response\");\n        return <TraceHarView rows={rows as HttpExchangeRow[]} />;\n      case \"pg_proxy\":\n      case \"sql_statements\":\n        requireField(kind, rows, \"sql\");\n        return <SqlTraceTable rows={rows as SqlStatementRow[]} />;\n      case \"terminal\":\n        requireField(kind, rows, \"kind\");\n        requireField(kind, rows, \"offset\");\n        return <TerminalCastPlayer events={rows as TerminalEvent[]} />;\n      case \"process_tree\":\n        requireField(kind, rows, \"key\");\n        if (samples) requireField(\"process_samples\", samples, \"key\");\n        return <ProcessTraceView rows={rows as ProcessNodeRow[]} samples={samples as ProcessSampleRow[] | undefined} />;\n      default:\n        return <GenericTraceTable kind={kind} rows={rows} />;\n    }\n  })();\n  return <div className={cn(\"flex h-full min-h-0 flex-col\", className)}>{body}</div>;\n}\n"],"names":[],"mappings":";;;;;;;;;AA6BA,SAAS,aAAa,MAAc,MAAkB,OAAqB;AACzE,OAAK,QAAQ,CAAC,KAAK,UAAU;AAC3B,QAAI,IAAI,KAAK,MAAM,UAAa,IAAI,KAAK,MAAM,MAAM;AACnD,YAAM,IAAI,MAAM,eAAe,IAAI,SAAS,KAAK,YAAY,KAAK,GAAG;AAAA,IACvE;AAAA,EACF,CAAC;AACH;AAEA,SAAS,kBAAkB,EAAE,MAAM,QAA4C;AAC7E,QAAM,UAAU,QAAQ,MAAM,aAAa,MAAM,EAAE,aAAa,KAAA,CAAM,GAAG,CAAC,IAAI,CAAC;AAC/E,SAAO,oBAAC,WAAA,EAAU,MAAM,MAAM,SAAkB,YAAU,MAAC,cAAc,MAAM,IAAI,WAAA,CAAY;AACjG;AAEA,SAAS,iBAAiB,EAAE,MAAM,WAAgF;AAChH,QAAM,CAAC,aAAa,cAAc,IAAI,SAAwB,IAAI;AAClE,SAAO,oBAAC,kBAAA,EAAiB,OAAO,MAAM,aAA0B,UAAU,gBAAiB,GAAI,UAAU,EAAE,QAAA,IAAY,CAAA,EAAC,CAAI;AAC9H;AAOO,SAAS,UAAU,EAAE,MAAM,MAAM,SAAS,aAA6B;AAC5E,QAAM,QAAQ,MAAM;AAClB,YAAQ,MAAA;AAAA,MACN,KAAK;AAAA,MACL,KAAK;AACH,qBAAa,MAAM,MAAM,SAAS;AAClC,qBAAa,MAAM,MAAM,UAAU;AACnC,eAAO,oBAAC,gBAAa,MAAiC;AAAA,MACxD,KAAK;AAAA,MACL,KAAK;AACH,qBAAa,MAAM,MAAM,KAAK;AAC9B,eAAO,oBAAC,iBAAc,MAAiC;AAAA,MACzD,KAAK;AACH,qBAAa,MAAM,MAAM,MAAM;AAC/B,qBAAa,MAAM,MAAM,QAAQ;AACjC,eAAO,oBAAC,oBAAA,EAAmB,QAAQ,KAAA,CAAyB;AAAA,MAC9D,KAAK;AACH,qBAAa,MAAM,MAAM,KAAK;AAC9B,YAAI,QAAS,cAAa,mBAAmB,SAAS,KAAK;AAC3D,eAAO,oBAAC,kBAAA,EAAiB,MAAgC,QAAA,CAAoD;AAAA,MAC/G;AACE,eAAO,oBAAC,mBAAA,EAAkB,MAAY,KAAA,CAAY;AAAA,IAAA;AAAA,EAExD,GAAA;AACA,6BAAQ,OAAA,EAAI,WAAW,GAAG,gCAAgC,SAAS,GAAI,UAAA,MAAK;AAC9E;"}