@tsplc/debug 0.2.17 → 0.2.19

package/src/ui/recent.ts

@@ -1,7 +1,19 @@
 import type { AppRecord, TimelineEntry, TraceEvent } from "../api.ts";
 import type { DebugEventSite, DebugManifest } from "../manifest.ts";
-import { type View, empty, h, pathLink, recordSourceLink, sourceLink } from "./dom.ts";
-import { formatClock, formatDuration, formatProperties, formatValue } from "./format.ts";
+import {
+	type View,
+	empty,
+	h,
+	pathLink,
+	recordSourceLink,
+	sourceLink,
+} from "./dom.ts";
+import {
+	formatClock,
+	formatDuration,
+	formatProperties,
+	formatValue,
+} from "./format.ts";
 import { requestJobLink, requestStatus } from "./jobs.ts";
 import type { Store } from "./store.ts";
 
@@ -11,14 +23,14 @@ type Kind = AppRecord["kind"] | Exclude<TimelineEntry["kind"], "app">;
 
 const SOURCES: Source[] = ["plc", "server", "agent", "debugger"];
 const KINDS: Kind[] = [
-  "event",
-  "log",
-  "exception",
-  "trace",
-  "request",
-  "deploy",
-  "audit",
-  "connection",
+	"event",
+	"log",
+	"exception",
+	"trace",
+	"request",
+	"deploy",
+	"audit",
+	"connection",
 ];
 const PAGE = 300;
 const RENDER_INTERVAL_MS = 300;
@@ -27,296 +39,337 @@ const hiddenSources = new Set<Source>();
 const hiddenKinds = new Set<Kind>();
 
 const kindOf = (entry: TimelineEntry): Kind =>
-  entry.kind === "app" ? entry.record.kind : entry.kind;
+	entry.kind === "app" ? entry.record.kind : entry.kind;
 
-const sitesByManifest = new WeakMap<DebugManifest, Map<number, DebugEventSite>>();
+const sitesByManifest = new WeakMap<
+	DebugManifest,
+	Map<number, DebugEventSite>
+>();
 const siteOf = (manifest: DebugManifest, id: number) => {
-  let sites = sitesByManifest.get(manifest);
-  if (!sites) {
-    sites = new Map(manifest.events.map((site) => [site.id, site]));
-    sitesByManifest.set(manifest, sites);
-  }
-  return sites.get(id);
+	let sites = sitesByManifest.get(manifest);
+	if (!sites) {
+		sites = new Map(manifest.events.map((site) => [site.id, site]));
+		sitesByManifest.set(manifest, sites);
+	}
+	return sites.get(id);
 };
 
 /** A traced write, worded as what was observed: the value, the scan, and the guards captured with it. */
 const traceBody = (store: Store, trace: TraceEvent) => {
-  const site = siteOf(store.manifest, trace.site);
-  if (!site)
-    return [
-      h(
-        "div",
-        {},
-        `Site ${trace.site} is not in this build's manifest; value ${JSON.stringify(trace.value)} in scan ${trace.scan}.`,
-      ),
-    ];
-  return [
-    h(
-      "div",
-      {},
-      h("span", { class: "tag" }, site.kind),
-      " ",
-      pathLink(site.path),
-      " was ",
-      h("b", { class: "val" }, formatValue(store.manifest, site.type, trace.value)),
-      ` in scan ${trace.scan}`,
-      h("span", { class: "dim" }, ` · ${trace.task}`),
-    ),
-    h("div", {}, h("code", {}, site.text), " ", sourceLink(store, site.range)),
-    trace.operands.length > 0 &&
-      h(
-        "div",
-        { class: "chips" },
-        h("span", { class: "dim" }, "guards in that scan "),
-        ...trace.operands.map((operand, index) => {
-          const declared = site.operands[index];
-          const value = declared
-            ? formatValue(store.manifest, declared.type, operand.value)
-            : JSON.stringify(operand.value);
-          return h(
-            "span",
-            {
-              class: `chip${operand.stable ? "" : " unstable"}`,
-              title: operand.stable
-                ? `${operand.text}, captured at the write`
-                : `${operand.text}, captured at the write; code between the guard and the write can change it, so the guard may have seen another value`,
-            },
-            declared
-              ? sourceLink(store, declared.range, operand.text)
-              : h("code", {}, operand.text),
-            " = ",
-            operand.path ? pathLink(operand.path, value) : h("span", { class: "val" }, value),
-            operand.stable ? "" : h("span", { class: "dim" }, " ~"),
-          );
-        }),
-      ),
-  ];
+	const site = siteOf(store.manifest, trace.site);
+	if (!site) {
+		return [
+			h(
+				"div",
+				{},
+				`Site ${trace.site} is not in this build's manifest; value ${JSON.stringify(trace.value)} in scan ${trace.scan}.`,
+			),
+		];
+	}
+	return [
+		h(
+			"div",
+			{},
+			h("span", { class: "tag" }, site.kind),
+			" ",
+			pathLink(site.path),
+			" was ",
+			h(
+				"b",
+				{ class: "val" },
+				formatValue(store.manifest, site.type, trace.value),
+			),
+			` in scan ${trace.scan}`,
+			h("span", { class: "dim" }, ` · ${trace.task}`),
+		),
+		h("div", {}, h("code", {}, site.text), " ", sourceLink(store, site.range)),
+		trace.operands.length > 0 &&
+			h(
+				"div",
+				{ class: "chips" },
+				h("span", { class: "dim" }, "guards in that scan "),
+				...trace.operands.map((operand, index) => {
+					const declared = site.operands[index];
+					const value = declared
+						? formatValue(store.manifest, declared.type, operand.value)
+						: JSON.stringify(operand.value);
+					return h(
+						"span",
+						{
+							class: `chip${operand.stable ? "" : " unstable"}`,
+							title: operand.stable
+								? `${operand.text}, captured at the write`
+								: `${operand.text}, captured at the write; code between the guard and the write can change it, so the guard may have seen another value`,
+						},
+						declared
+							? sourceLink(store, declared.range, operand.text)
+							: h("code", {}, operand.text),
+						" = ",
+						operand.path
+							? pathLink(operand.path, value)
+							: h("span", { class: "val" }, value),
+						operand.stable ? "" : h("span", { class: "dim" }, " ~"),
+					);
+				}),
+			),
+	];
 };
 
 /** What the program reported: `bin scanned · barcode=CON-MD3… scanner=3 · route-lookup.ts:120`. */
 const appBody = (store: Store, task: string, record: AppRecord) => {
-  const properties = Object.keys(record.properties).length
-    ? h(
-        "span",
-        { class: "mono", title: JSON.stringify(record.properties, null, 1) },
-        ` · ${formatProperties(record.properties)}`,
-      )
-    : "";
-  const origin = [
-    " · ",
-    recordSourceLink(store, record.source),
-    h("span", { class: "dim" }, ` · ${task}`),
-  ];
-  switch (record.kind) {
-    case "event":
-      return [h("div", {}, h("b", {}, record.event), properties, ...origin)];
-    case "log":
-      return [
-        h(
-          "div",
-          {},
-          h("span", { class: `tag lvl-${record.level}` }, record.level),
-          " ",
-          record.message,
-          properties,
-          ...origin,
-        ),
-      ];
-    case "exception":
-      return [
-        h(
-          "div",
-          {},
-          h("b", { class: "err" }, record.name ?? `error ${record.code}`),
-          " · ",
-          record.handled
-            ? h("span", { class: "dim" }, "handled")
-            : h("b", { class: "err" }, "unhandled"),
-          record.function ? h("span", { class: "mono" }, ` · ${record.function}`) : "",
-          record.instance ? h("span", {}, " on ", pathLink(record.instance)) : "",
-          properties,
-          ...origin,
-        ),
-      ];
-  }
+	const properties = Object.keys(record.properties).length
+		? h(
+				"span",
+				{ class: "mono", title: JSON.stringify(record.properties, null, 1) },
+				` · ${formatProperties(record.properties)}`,
+			)
+		: "";
+	const origin = [
+		" · ",
+		recordSourceLink(store, record.source),
+		h("span", { class: "dim" }, ` · ${task}`),
+	];
+	switch (record.kind) {
+		case "event":
+			return [h("div", {}, h("b", {}, record.event), properties, ...origin)];
+		case "log":
+			return [
+				h(
+					"div",
+					{},
+					h("span", { class: `tag lvl-${record.level}` }, record.level),
+					" ",
+					record.message,
+					properties,
+					...origin,
+				),
+			];
+		case "exception":
+			return [
+				h(
+					"div",
+					{},
+					h("b", { class: "err" }, record.name ?? `error ${record.code}`),
+					" · ",
+					record.handled
+						? h("span", { class: "dim" }, "handled")
+						: h("b", { class: "err" }, "unhandled"),
+					record.function
+						? h("span", { class: "mono" }, ` · ${record.function}`)
+						: "",
+					record.instance
+						? h("span", {}, " on ", pathLink(record.instance))
+						: "",
+					properties,
+					...origin,
+				),
+			];
+	}
 };
 
 const byWhom = (entry: { user?: string; host?: string }) =>
-  entry.user || entry.host
-    ? h(
-        "span",
-        { class: "dim" },
-        ` by ${entry.user ?? "unknown user"}${entry.host ? ` on ${entry.host}` : ""}`,
-      )
-    : "";
+	entry.user || entry.host
+		? h(
+				"span",
+				{ class: "dim" },
+				` by ${entry.user ?? "unknown user"}${entry.host ? ` on ${entry.host}` : ""}`,
+			)
+		: "";
 
 const entryBody = (store: Store, entry: TimelineEntry) => {
-  switch (entry.kind) {
-    case "app":
-      return appBody(store, entry.task, entry.record);
-    case "trace":
-      return traceBody(store, entry.trace);
-    case "request": {
-      const { request } = entry;
-      return [
-        h(
-          "div",
-          {},
-          h("b", { class: "mono" }, request.service),
-          " ",
-          requestStatus(request),
-          request.durationMs === undefined ? "" : ` in ${formatDuration(request.durationMs)}`,
-          request.job === undefined
-            ? ""
-            : h("span", {}, " · from ", requestJobLink(store, request.job, request.sequence)),
-          request.error ? h("div", { class: "err" }, request.error) : "",
-        ),
-      ];
-    }
-    case "deploy":
-      return [
-        h(
-          "div",
-          {},
-          `Release ${entry.release} · ${entry.operation}`,
-          entry.build ? h("span", { class: "mono dim" }, ` build ${entry.build}`) : "",
-          byWhom(entry),
-        ),
-      ];
-    case "audit":
-      return [
-        h(
-          "div",
-          {},
-          h("b", { class: "mono" }, `tsplc ${entry.command}`),
-          byWhom(entry),
-          entry.error ? h("span", { class: "err" }, ` · ${entry.error}`) : "",
-        ),
-        h(
-          "div",
-          { class: "chips" },
-          ...Object.entries(entry.values).map(([path, value]) =>
-            h(
-              "span",
-              { class: "chip" },
-              pathLink(path),
-              value === "" ? " unforced" : ` = ${value}`,
-              entry.previous?.[path] === undefined
-                ? ""
-                : h("span", { class: "dim" }, ` (was ${entry.previous[path]})`),
-            ),
-          ),
-        ),
-      ];
-    case "connection":
-      return [
-        h(
-          "div",
-          {},
-          `Reading values: ${entry.state}`,
-          entry.error ? h("span", { class: "err" }, ` · ${entry.error}`) : "",
-        ),
-      ];
-  }
+	switch (entry.kind) {
+		case "app":
+			return appBody(store, entry.task, entry.record);
+		case "trace":
+			return traceBody(store, entry.trace);
+		case "request": {
+			const { request } = entry;
+			return [
+				h(
+					"div",
+					{},
+					h("b", { class: "mono" }, request.service),
+					" ",
+					requestStatus(request),
+					request.durationMs === undefined
+						? ""
+						: ` in ${formatDuration(request.durationMs)}`,
+					request.job === undefined
+						? ""
+						: h(
+								"span",
+								{},
+								" · from ",
+								requestJobLink(store, request.job, request.sequence),
+							),
+					request.error ? h("div", { class: "err" }, request.error) : "",
+				),
+			];
+		}
+		case "deploy":
+			return [
+				h(
+					"div",
+					{},
+					`Release ${entry.release} · ${entry.operation}`,
+					entry.build
+						? h("span", { class: "mono dim" }, ` build ${entry.build}`)
+						: "",
+					byWhom(entry),
+				),
+			];
+		case "audit":
+			return [
+				h(
+					"div",
+					{},
+					h("b", { class: "mono" }, `tsplc ${entry.command}`),
+					byWhom(entry),
+					entry.error ? h("span", { class: "err" }, ` · ${entry.error}`) : "",
+				),
+				h(
+					"div",
+					{ class: "chips" },
+					...Object.entries(entry.values).map(([path, value]) =>
+						h(
+							"span",
+							{ class: "chip" },
+							pathLink(path),
+							value === "" ? " unforced" : ` = ${value}`,
+							entry.previous?.[path] === undefined
+								? ""
+								: h("span", { class: "dim" }, ` (was ${entry.previous[path]})`),
+						),
+					),
+				),
+			];
+		case "connection":
+			return [
+				h(
+					"div",
+					{},
+					`Reading values: ${entry.state}`,
+					entry.error ? h("span", { class: "err" }, ` · ${entry.error}`) : "",
+				),
+			];
+	}
 };
 
 export const recentEntry = (store: Store, entry: TimelineEntry) =>
-  h(
-    "div",
-    { class: `entry k-${kindOf(entry)}` },
-    h(
-      "span",
-      { class: "when mono" },
-      formatClock(entry.at),
-      entry.approximate
-        ? h(
-            "span",
-            {
-              class: "approx",
-              title:
-                "Placed through another clock, so its order against other sources is approximate",
-            },
-            "≈",
-          )
-        : "",
-    ),
-    h("span", { class: `source src-${entry.source}` }, entry.source),
-    h("div", { class: "body" }, ...entryBody(store, entry)),
-  );
+	h(
+		"div",
+		{ class: `entry k-${kindOf(entry)}` },
+		h(
+			"span",
+			{ class: "when mono" },
+			formatClock(entry.at),
+			entry.approximate
+				? h(
+						"span",
+						{
+							class: "approx",
+							title:
+								"Placed through another clock, so its order against other sources is approximate",
+						},
+						"≈",
+					)
+				: "",
+		),
+		h("span", { class: `source src-${entry.source}` }, entry.source),
+		h("div", { class: "body" }, ...entryBody(store, entry)),
+	);
 
 const clockNote = (store: Store) => {
-  const clock = store.session.clock;
-  return `PLC records are placed on the app server's clock from their age when it received them${
-    clock ? `, within ±${clock.uncertaintyMs.toFixed(1)} ms` : ""
-  }, so their order against other sources is approximate (≈).`;
+	const clock = store.session.clock;
+	return `PLC records are placed on the app server's clock from their age when it received them${
+		clock ? `, within ±${clock.uncertaintyMs.toFixed(1)} ms` : ""
+	}, so their order against other sources is approximate (≈).`;
 };
 
 export const recentView = (store: Store): View => {
-  let shown = PAGE;
-  let renderTimer: ReturnType<typeof setTimeout> | undefined;
-  const list = h("div", { class: "entries" });
-  const more = h("button", { onclick: () => ((shown += PAGE), render()) }, `Show ${PAGE} older`);
-  const note = h("p", { class: "hint" });
+	let shown = PAGE;
+	let renderTimer: ReturnType<typeof setTimeout> | undefined;
+	const list = h("div", { class: "entries" });
+	const more = h(
+		"button",
+		{
+			onclick: () => {
+				shown += PAGE;
+				render();
+			},
+		},
+		`Show ${PAGE} older`,
+	);
+	const note = h("p", { class: "hint" });
 
-  const toggles = <T extends string>(values: T[], hidden: Set<T>) =>
-    values.map((value) => {
-      const input = h("input", { type: "checkbox", checked: !hidden.has(value) });
-      input.addEventListener("change", () => {
-        if (input.checked) hidden.delete(value);
-        else hidden.add(value);
-        render();
-      });
-      return h("label", { class: "check" }, input, value);
-    });
+	const toggles = <T extends string>(values: T[], hidden: Set<T>) =>
+		values.map((value) => {
+			const input = h("input", {
+				type: "checkbox",
+				checked: !hidden.has(value),
+			});
+			input.addEventListener("change", () => {
+				if (input.checked) {
+					hidden.delete(value);
+				} else {
+					hidden.add(value);
+				}
+				render();
+			});
+			return h("label", { class: "check" }, input, value);
+		});
 
-  const render = () => {
-    clearTimeout(renderTimer);
-    renderTimer = undefined;
-    note.textContent = clockNote(store);
-    const visible = store.timeline.filter(
-      (entry) => !hiddenSources.has(entry.source) && !hiddenKinds.has(kindOf(entry)),
-    );
-    list.replaceChildren(
-      ...(visible.length
-        ? visible
-            .slice(-shown)
-            .reverse()
-            .map((entry) => recentEntry(store, entry))
-        : [empty("Nothing in the recent window matches these filters.")]),
-    );
-    more.hidden = visible.length <= shown;
-  };
+	const render = () => {
+		clearTimeout(renderTimer);
+		renderTimer = undefined;
+		note.textContent = clockNote(store);
+		const visible = store.timeline.filter(
+			(entry) =>
+				!hiddenSources.has(entry.source) && !hiddenKinds.has(kindOf(entry)),
+		);
+		list.replaceChildren(
+			...(visible.length
+				? visible
+						.slice(-shown)
+						.reverse()
+						.map((entry) => recentEntry(store, entry))
+				: [empty("Nothing in the recent window matches these filters.")]),
+		);
+		more.hidden = visible.length <= shown;
+	};
 
-  render();
-  store.show();
-  return {
-    element: h(
-      "div",
-      { class: "page recent" },
-      h("h1", {}, "Recent"),
-      h(
-        "p",
-        { class: "hint" },
-        "The app server's recent window: what the program reported, its traced writes when the trace is on, and the requests it made, with the agent's deployments and audited commands. History lives in the app's telemetry sink, such as PostHog.",
-      ),
-      h(
-        "div",
-        { class: "toolbar" },
-        h("span", { class: "dim" }, "Source"),
-        ...toggles(SOURCES, hiddenSources),
-        h("span", { class: "dim sep" }, "Kind"),
-        ...toggles(KINDS, hiddenKinds),
-      ),
-      note,
-      list,
-      more,
-    ),
-    update(topics) {
-      if (!topics.has("timeline") && !topics.has("session")) return;
-      renderTimer ??= setTimeout(render, RENDER_INTERVAL_MS);
-    },
-    dispose() {
-      clearTimeout(renderTimer);
-    },
-  };
+	render();
+	store.show();
+	return {
+		element: h(
+			"div",
+			{ class: "page recent" },
+			h("h1", {}, "Recent"),
+			h(
+				"p",
+				{ class: "hint" },
+				"The app server's recent window: what the program reported, its traced writes when the trace is on, and the requests it made, with the agent's deployments and audited commands. History lives in the app's telemetry sink, such as PostHog.",
+			),
+			h(
+				"div",
+				{ class: "toolbar" },
+				h("span", { class: "dim" }, "Source"),
+				...toggles(SOURCES, hiddenSources),
+				h("span", { class: "dim sep" }, "Kind"),
+				...toggles(KINDS, hiddenKinds),
+			),
+			note,
+			list,
+			more,
+		),
+		update(topics) {
+			if (!topics.has("timeline") && !topics.has("session")) {
+				return;
+			}
+			renderTimer ??= setTimeout(render, RENDER_INTERVAL_MS);
+		},
+		dispose() {
+			clearTimeout(renderTimer);
+		},
+	};
 };