@tsplc/debug 0.2.17 → 0.2.18

package/src/ui/header.ts

@@ -2,178 +2,200 @@ import { h } from "./dom.ts";
 import { formatAge, formatClock, formatInterval } from "./format.ts";
 import type { Store, Topic } from "./store.ts";
 
-export const ROUTES = ["overview", "variables", "hardware", "jobs", "recent", "requests"] as const;
+export const ROUTES = [
+	"overview",
+	"variables",
+	"hardware",
+	"jobs",
+	"recent",
+	"requests",
+] as const;
 export type Route = (typeof ROUTES)[number];
 
-const shortId = (id: string | null) => (id === null ? "unknown" : id.slice(0, 10));
+const shortId = (id: string | null) =>
+	id === null ? "unknown" : id.slice(0, 10);
 
 const readout = (label: string, ...value: (Node | string)[]) =>
-  h(
-    "div",
-    { class: "readout" },
-    h("span", { class: "label" }, label),
-    h("span", { class: "reading" }, ...value),
-  );
+	h(
+		"div",
+		{ class: "readout" },
+		h("span", { class: "label" }, label),
+		h("span", { class: "reading" }, ...value),
+	);
 
 /** Always visible: which build runs, how values are read and whether they can be, and how far to trust times. */
 export const header = (store: Store) => {
-  const readouts = h("div", { class: "readouts" });
-  const banners = h("div", { class: "banners" });
-  const links = new Map(ROUTES.map((route) => [route, h("a", { href: `#/${route}` }, route)]));
-  const element = h(
-    "header",
-    {},
-    h(
-      "div",
-      { class: "bar" },
-      h(
-        "div",
-        { class: "brand" },
-        h("b", {}, "tsPLC"),
-        h("span", {}, "debug"),
-        h(
-          "span",
-          { class: "ro", title: "The debugger never writes or forces values" },
-          "read-only",
-        ),
-      ),
-      readouts,
-    ),
-    h("nav", {}, ...links.values()),
-    banners,
-  );
+	const readouts = h("div", { class: "readouts" });
+	const banners = h("div", { class: "banners" });
+	const links = new Map(
+		ROUTES.map((route) => [route, h("a", { href: `#/${route}` }, route)]),
+	);
+	const element = h(
+		"header",
+		{},
+		h(
+			"div",
+			{ class: "bar" },
+			h(
+				"div",
+				{ class: "brand" },
+				h("b", {}, "tsPLC"),
+				h("span", {}, "debug"),
+				h(
+					"span",
+					{ class: "ro", title: "The debugger never writes or forces values" },
+					"read-only",
+				),
+			),
+			readouts,
+		),
+		h("nav", {}, ...links.values()),
+		banners,
+	);
 
-  const render = () => {
-    const { session } = store;
-    const { build, connection, reading } = session;
-    const buildState = build.matches ? "match" : "mismatch";
-    readouts.replaceChildren(
-      readout(
-        "build",
-        h(
-          "span",
-          {
-            class: `build ${buildState}`,
-            title: `manifest ${build.manifest ?? "none"}\ncontroller ${build.controller ?? "unknown"}`,
-          },
-          `manifest ${shortId(build.manifest)}`,
-          h("i", {}, build.matches ? " = " : " ≠ "),
-          `controller ${shortId(build.controller)}`,
-        ),
-      ),
-      readout(
-        "values",
-        h("span", { class: `dot c-${connection.state}`, title: connection.endpoint }),
-        `${reading.method} · every ${formatInterval(reading.intervalMs)}`,
-        h(
-          "span",
-          { class: "dim" },
-          ` · ${connection.state} since ${formatClock(connection.since).slice(0, 8)}`,
-          ` (${formatAge(store.ageOf(connection.since)).replace(" ago", "")})`,
-        ),
-      ),
-      // The PLC clock counts from the runtime's start, so only the precision of the mapping means anything.
-      readout(
-        "plc clock",
-        session.clock
-          ? `±${session.clock.uncertaintyMs.toFixed(1)} ms against the app server's`
-          : "not estimated",
-      ),
-      readout(
-        "scans",
-        ...session.tasks.map((task) => {
-          const interval = store.manifest.tasks.find(
-            (candidate) => candidate.name === task.name,
-          )?.intervalMs;
-          return h(
-            "span",
-            {
-              class: "task",
-              title:
-                interval === undefined
-                  ? task.name
-                  : `${task.name}: configured every ${interval} ms`,
-            },
-            `${task.name} `,
-            h("b", {}, task.scansPerSecond === null ? "—" : task.scansPerSecond.toFixed(1)),
-            "/s",
-            task.dropped > 0
-              ? h(
-                  "span",
-                  {
-                    class: "err",
-                    title:
-                      "Telemetry records overwritten before the PLC sent them: Recent is missing these",
-                  },
-                  ` ${task.dropped} dropped`,
-                )
-              : "",
-          );
-        }),
-      ),
-      readout(
-        "release",
-        session.release
-          ? h(
-              "span",
-              { title: `deployed ${session.release.deployedAt}` },
-              `${session.release.id} · ${session.release.operation} · ${formatAge(store.ageOf(session.release.deployedAt))}`,
-            )
-          : "not reported",
-      ),
-    );
+	const render = () => {
+		const { session } = store;
+		const { build, connection, reading } = session;
+		const buildState = build.matches ? "match" : "mismatch";
+		readouts.replaceChildren(
+			readout(
+				"build",
+				h(
+					"span",
+					{
+						class: `build ${buildState}`,
+						title: `manifest ${build.manifest ?? "none"}\ncontroller ${build.controller ?? "unknown"}`,
+					},
+					`manifest ${shortId(build.manifest)}`,
+					h("i", {}, build.matches ? " = " : " ≠ "),
+					`controller ${shortId(build.controller)}`,
+				),
+			),
+			readout(
+				"values",
+				h("span", {
+					class: `dot c-${connection.state}`,
+					title: connection.endpoint,
+				}),
+				`${reading.method} · every ${formatInterval(reading.intervalMs)}`,
+				h(
+					"span",
+					{ class: "dim" },
+					` · ${connection.state} since ${formatClock(connection.since).slice(0, 8)}`,
+					` (${formatAge(store.ageOf(connection.since)).replace(" ago", "")})`,
+				),
+			),
+			// The PLC clock counts from the runtime's start, so only the precision of the mapping means anything.
+			readout(
+				"plc clock",
+				session.clock
+					? `±${session.clock.uncertaintyMs.toFixed(1)} ms against the app server's`
+					: "not estimated",
+			),
+			readout(
+				"scans",
+				...session.tasks.map((task) => {
+					const interval = store.manifest.tasks.find(
+						(candidate) => candidate.name === task.name,
+					)?.intervalMs;
+					return h(
+						"span",
+						{
+							class: "task",
+							title:
+								interval === undefined
+									? task.name
+									: `${task.name}: configured every ${interval} ms`,
+						},
+						`${task.name} `,
+						h(
+							"b",
+							{},
+							task.scansPerSecond === null
+								? "—"
+								: task.scansPerSecond.toFixed(1),
+						),
+						"/s",
+						task.dropped > 0
+							? h(
+									"span",
+									{
+										class: "err",
+										title:
+											"Telemetry records overwritten before the PLC sent them: Recent is missing these",
+									},
+									` ${task.dropped} dropped`,
+								)
+							: "",
+					);
+				}),
+			),
+			readout(
+				"release",
+				session.release
+					? h(
+							"span",
+							{ title: `deployed ${session.release.deployedAt}` },
+							`${session.release.id} · ${session.release.operation} · ${formatAge(store.ageOf(session.release.deployedAt))}`,
+						)
+					: "not reported",
+			),
+		);
 
-    const notices: [string, string][] = [];
-    if (!build.matches)
-      notices.push([
-        "danger",
-        build.controller === null
-          ? "The controller's build id could not be read, so this manifest may not describe what is running."
-          : `Build mismatch: the controller runs ${build.controller}, but this manifest is ${build.manifest ?? "missing"}. Paths, values and source links may be wrong.`,
-      ]);
-    if (store.stream === "reconnecting")
-      notices.push([
-        "warn",
-        "Lost the stream from the debugger host; reconnecting. Every value is stale until it resumes.",
-      ]);
-    else if (connection.state !== "connected")
-      notices.push([
-        "warn",
-        `${connection.error ?? `Reading values: ${connection.state} since ${formatClock(connection.since)}.`} Values shown are the last read and marked stale.`,
-      ]);
-    if (store.error) notices.push(["error", store.error]);
-    banners.replaceChildren(
-      ...notices.map(([tone, text]) =>
-        h(
-          "div",
-          { class: `banner ${tone}` },
-          text,
-          tone === "error"
-            ? h(
-                "button",
-                { onclick: () => ((store.error = undefined), store.notify("error")) },
-                "dismiss",
-              )
-            : "",
-        ),
-      ),
-    );
-  };
+		const notices: [string, string][] = [];
+		if (!build.matches) {
+			notices.push([
+				"danger",
+				build.controller === null
+					? "The controller's build id could not be read, so this manifest may not describe what is running."
+					: `Build mismatch: the controller runs ${build.controller}, but this manifest is ${build.manifest ?? "missing"}. Paths, values and source links may be wrong.`,
+			]);
+		}
+		if (store.stream === "reconnecting") {
+			notices.push([
+				"warn",
+				"Lost the stream from the debugger host; reconnecting. Every value is stale until it resumes.",
+			]);
+		} else if (connection.state !== "connected") {
+			notices.push([
+				"warn",
+				`${connection.error ?? `Reading values: ${connection.state} since ${formatClock(connection.since)}.`} Values shown are the last read and marked stale.`,
+			]);
+		}
+		if (store.error) {
+			notices.push(["error", store.error]);
+		}
+		banners.replaceChildren(
+			...notices.map(([tone, text]) =>
+				h(
+					"div",
+					{ class: `banner ${tone}` },
+					text,
+					tone === "error"
+						? h("button", { onclick: () => store.clearError() }, "dismiss")
+						: "",
+				),
+			),
+		);
+	};
 
-  render();
-  return {
-    element,
-    update(topics: Set<Topic>) {
-      if (
-        topics.has("session") ||
-        topics.has("stream") ||
-        topics.has("error") ||
-        topics.has("clock")
-      )
-        render();
-    },
-    setRoute(route: Route) {
-      for (const [name, link] of links) link.classList.toggle("on", name === route);
-    },
-  };
+	render();
+	return {
+		element,
+		update(topics: Set<Topic>) {
+			if (
+				topics.has("session") ||
+				topics.has("stream") ||
+				topics.has("error") ||
+				topics.has("clock")
+			) {
+				render();
+			}
+		},
+		setRoute(route: Route) {
+			for (const [name, link] of links) {
+				link.classList.toggle("on", name === route);
+			}
+		},
+	};
 };

package/src/ui/index.ts

@@ -5,15 +5,22 @@ import { html } from "./page.ts";
 let ui: Promise<{ html: string; script: string }> | undefined;
 
 const build = async () => {
-  const result = await Bun.build({
-    entrypoints: [
-      resolve(dirname(createRequire(import.meta.url).resolve("@tsplc/debug")), "../src/ui/main.ts"),
-    ],
-    target: "browser",
-    minify: true,
-  });
-  if (!result.success) throw new AggregateError(result.logs, "Bundling the debugger UI failed");
-  return { html, script: await result.outputs[0]!.text() };
+	const result = await Bun.build({
+		entrypoints: [
+			resolve(
+				dirname(createRequire(import.meta.url).resolve("@tsplc/debug")),
+				"../src/ui/main.ts",
+			),
+		],
+		target: "browser",
+		// Workspace packages resolve to their sources, as they do for the host, so no build is needed first.
+		conditions: ["bun"],
+		minify: true,
+	});
+	if (!result.success) {
+		throw new AggregateError(result.logs, "Bundling the debugger UI failed");
+	}
+	return { html, script: await result.outputs[0]!.text() };
 };
 
 /** The browser UI: serve `html` at `GET /` and `script` at `GET /ui.js`. Bundled on first call, then cached. */