@tsplc/debug 0.2.16 → 0.2.18

package/src/ui/hardware.ts

@@ -2,367 +2,440 @@ import type { DebugDevice } from "../manifest.ts";
 import { mapBits, readBits } from "./bits.ts";
 import type { Quality } from "../api.ts";
 import {
-  type View,
-  deviceHealth,
-  empty,
-  fill,
-  h,
-  healthBadge,
-  pathLink,
-  sourceLink,
+	type View,
+	deviceHealth,
+	deviceHref,
+	devicesWithHealth,
+	empty,
+	fill,
+	h,
+	healthBadge,
+	pathLink,
+	sourceLink,
+	table,
 } from "./dom.ts";
-import { formatScalar, formatValue, valueState, valueStateLabels } from "./format.ts";
+import {
+	formatScalar,
+	formatValue,
+	valueState,
+	valueStateLabels,
+} from "./format.ts";
 import type { Store } from "./store.ts";
 
-const deviceHref = (id: string) => `#/hardware/${encodeURIComponent(id)}`;
-
 const assemblySummary = (device: DebugDevice) =>
-  device.assemblies
-    .map((assembly) => `${assembly.direction === "input" ? "in" : "out"} ${assembly.bytes} B`)
-    .join(" · ");
+	device.assemblies
+		.map(
+			(assembly) =>
+				`${assembly.direction === "input" ? "in" : "out"} ${assembly.bytes} B`,
+		)
+		.join(" · ");
+
+/** Where an assembly's grid comes from, and how far to trust it. */
+const rawBytesNote = (
+	bytes: number[] | null,
+	quality: string,
+	raw: string | undefined,
+) => {
+	if (bytes) {
+		return quality === "good" ? " · raw bytes" : ` · raw bytes, ${quality}`;
+	}
+	if (raw) {
+		return " · raw bytes not read yet";
+	}
+	return " · no raw bytes in this build: it has no generated device tree";
+};
 
 const deviceList = (store: Store): View => {
-  const body = h("tbody");
-  const render = () =>
-    body.replaceChildren(
-      ...store.manifest.devices.map((device) =>
-        h(
-          "tr",
-          { class: "link-row", onclick: () => (location.hash = deviceHref(device.id)) },
-          h("td", {}, healthBadge(deviceHealth(store, device))),
-          h("td", {}, h("a", { href: deviceHref(device.id), class: "mono" }, device.id)),
-          h("td", {}, [device.vendor, device.product].filter(Boolean).join(" ")),
-          h(
-            "td",
-            { class: "mono" },
-            device.network
-              ? `${device.network.address}${device.network.rpiMs === undefined ? "" : ` · RPI ${device.network.rpiMs} ms`}`
-              : "",
-          ),
-          h("td", {}, device.connection ?? ""),
-          h("td", { class: "mono" }, assemblySummary(device)),
-          h("td", { class: "num" }, String(device.channels.length)),
-        ),
-      ),
-    );
-  render();
-  store.show({
-    health: store.manifest.devices.filter((device) => device.health).map(({ id }) => id),
-  });
-  return {
-    element: h(
-      "div",
-      { class: "page" },
-      h("h1", {}, "Hardware"),
-      store.manifest.devices.length
-        ? h(
-            "table",
-            { class: "grid" },
-            h(
-              "thead",
-              {},
-              h(
-                "tr",
-                {},
-                ...[
-                  "Health",
-                  "Device",
-                  "Product",
-                  "Network",
-                  "Connection",
-                  "Assemblies",
-                  "Channels",
-                ].map((label) => h("th", {}, label)),
-              ),
-            ),
-            body,
-          )
-        : empty("This build configures no devices."),
-    ),
-    update(topics) {
-      if (topics.has("devices") || topics.has("stream") || topics.has("session")) render();
-    },
-  };
+	const body = h("tbody");
+	const render = () =>
+		body.replaceChildren(
+			...store.manifest.devices.map((device) =>
+				h(
+					"tr",
+					{
+						class: "link-row",
+						onclick: () => (location.hash = deviceHref(device.id)),
+					},
+					h("td", {}, healthBadge(deviceHealth(store, device))),
+					h(
+						"td",
+						{},
+						h("a", { href: deviceHref(device.id), class: "mono" }, device.id),
+					),
+					h(
+						"td",
+						{},
+						[device.vendor, device.product].filter(Boolean).join(" "),
+					),
+					h(
+						"td",
+						{ class: "mono" },
+						device.network
+							? `${device.network.address}${device.network.rpiMs === undefined ? "" : ` · RPI ${device.network.rpiMs} ms`}`
+							: "",
+					),
+					h("td", {}, device.connection ?? ""),
+					h("td", { class: "mono" }, assemblySummary(device)),
+					h("td", { class: "num" }, String(device.channels.length)),
+				),
+			),
+		);
+	render();
+	store.show({ health: devicesWithHealth(store) });
+	return {
+		element: h(
+			"div",
+			{ class: "page" },
+			h("h1", {}, "Hardware"),
+			store.manifest.devices.length
+				? table(
+						{ class: "grid" },
+						[
+							"Health",
+							"Device",
+							"Product",
+							"Network",
+							"Connection",
+							"Assemblies",
+							"Channels",
+						],
+						body,
+					)
+				: empty("This build configures no devices."),
+		),
+		update(topics) {
+			if (
+				topics.has("devices") ||
+				topics.has("stream") ||
+				topics.has("session")
+			) {
+				render();
+			}
+		},
+	};
 };
 
 const deviceDetail = (store: Store, device: DebugDevice): View => {
-  const io = store.manifest.io.filter((entry) => entry.device === device.id);
-  const badge = h("span");
-  const status = h("dl", { class: "facts readings" });
-  const grids = h("div", { class: "assemblies" });
-  const channelBody = h("tbody");
+	const io = store.manifest.io.filter((entry) => entry.device === device.id);
+	const badge = h("span");
+	const status = h("dl", { class: "facts readings" });
+	const grids = h("div", { class: "assemblies" });
+	const channelBody = h("tbody");
 
-  /** The state for the manifest's `index`th assembly: the host lists them in the same order per direction. */
-  const bytesOf = (index: number) => {
-    const assembly = device.assemblies[index];
-    if (!assembly) return undefined;
-    const sameDirection = device.assemblies
-      .slice(0, index)
-      .filter((other) => other.direction === assembly.direction).length;
-    return store.devices
-      .get(device.id)
-      ?.assemblies.filter((state) => state.direction === assembly.direction)[sameDirection];
-  };
+	/** The state for the manifest's `index`th assembly: the host lists them in the same order per direction. */
+	const bytesOf = (index: number) => {
+		const assembly = device.assemblies[index];
+		if (!assembly) {
+			return undefined;
+		}
+		const sameDirection = device.assemblies
+			.slice(0, index)
+			.filter((other) => other.direction === assembly.direction).length;
+		return store.devices
+			.get(device.id)
+			?.assemblies.filter((state) => state.direction === assembly.direction)[
+			sameDirection
+		];
+	};
 
-  const renderHealth = () => {
-    const health = deviceHealth(store, device);
-    badge.replaceChildren(
-      healthBadge(health),
-      health.detail ? h("span", { class: "dim" }, ` ${health.detail}`) : "",
-    );
-  };
+	const renderHealth = () => {
+		const health = deviceHealth(store, device);
+		badge.replaceChildren(
+			healthBadge(health),
+			health.detail ? h("span", { class: "dim" }, ` ${health.detail}`) : "",
+		);
+	};
 
-  /** Device states carry no sample time, so only the connection marks their values stale. */
-  const reading = (quality: Quality, value: string) => {
-    const state = valueState(quality, 0, {
-      connected: store.connected,
-      intervalMs: store.session.reading.intervalMs,
-    });
-    return [
-      h("span", { class: `value s-${state}` }, value),
-      h("span", { class: `meta s-${state}` }, valueStateLabels[state]),
-    ];
-  };
+	/** Device states carry no sample time, so only the connection marks their values stale. */
+	const reading = (quality: Quality, value: string) => {
+		const state = valueState(quality, 0, {
+			connected: store.connected,
+			intervalMs: store.session.reading.intervalMs,
+		});
+		return [
+			h("span", { class: `value s-${state}` }, value),
+			h("span", { class: `meta s-${state}` }, valueStateLabels[state]),
+		];
+	};
 
-  const renderStatus = () => {
-    const values = store.devices.get(device.id)?.status ?? {};
-    fill(
-      status,
-      ...Object.keys(device.status ?? {}).flatMap((label) => {
-        const entry = values[label];
-        return [
-          h("dt", {}, label),
-          h(
-            "dd",
-            {},
-            ...(entry
-              ? reading(entry.quality, formatScalar(entry.value))
-              : [h("span", { class: "value s-unavailable" }, "not read")]),
-          ),
-        ];
-      }),
-    );
-  };
+	const renderStatus = () => {
+		const values = store.devices.get(device.id)?.status ?? {};
+		fill(
+			status,
+			...Object.keys(device.status ?? {}).flatMap((label) => {
+				const entry = values[label];
+				return [
+					h("dt", {}, label),
+					h(
+						"dd",
+						{},
+						...(entry
+							? reading(entry.quality, formatScalar(entry.value))
+							: [h("span", { class: "value s-unavailable" }, "not read")]),
+					),
+				];
+			}),
+		);
+	};
 
-  const renderGrids = () =>
-    grids.replaceChildren(
-      ...device.assemblies.map((assembly, index) => {
-        const state = bytesOf(index);
-        const bytes = state?.bytes ?? null;
-        const bits = mapBits(device.id, assembly.direction, assembly.bytes, device.channels, io);
-        const quality = !store.connected ? "stale" : state ? state.quality : "unavailable";
-        return h(
-          "section",
-          { class: `panel assembly q-${quality}` },
-          h(
-            "h3",
-            {},
-            `${assembly.direction === "input" ? "Input" : "Output"} assembly · ${assembly.bytes} bytes`,
-            assembly.address ? h("span", { class: "mono dim" }, ` ${assembly.address}`) : "",
-            h(
-              "span",
-              { class: "dim" },
-              bytes
-                ? ` · ${quality === "good" ? "raw bytes" : `raw bytes, ${quality}`}`
-                : assembly.raw
-                  ? " · raw bytes not read yet"
-                  : " · no raw bytes in this build: it has no generated device tree",
-            ),
-          ),
-          h(
-            "div",
-            { class: "bitgrid" },
-            h("span", { class: "bh" }, "byte"),
-            ...Array.from({ length: 8 }, (_, bit) => h("span", { class: "bh" }, `.${bit}`)),
-            h("span", { class: "bh" }, "hex"),
-            h("span", { class: "bh legend-head" }, "mapped"),
-            ...Array.from({ length: assembly.bytes }, (_, byte) => {
-              const value = bytes?.[byte];
-              const starts = device.channels.filter(
-                (channel) =>
-                  channel.direction === assembly.direction && channel.offsetBits >> 3 === byte,
-              );
-              return [
-                h("span", { class: "byte mono" }, `+${byte}`),
-                ...Array.from({ length: 8 }, (_, bit) => {
-                  const mapped = bits[byte * 8 + bit];
-                  const on = value === undefined ? undefined : (value >> bit) & 1;
-                  const where = `byte ${byte} bit ${bit}`;
-                  return h(
-                    "span",
-                    {
-                      class: `bit${mapped ? " mapped" : ""}${on === 1 ? " on" : ""}${on === undefined ? " none" : ""}`,
-                      title: mapped
-                        ? `${where} · ${mapped.channel.name} (${mapped.channel.id})${mapped.paths.map((path) => `\n${path}`).join("")}`
-                        : `${where} · not mapped`,
-                    },
-                    on === undefined ? "·" : String(on),
-                    mapped && mapped.channel.offsetBits === byte * 8 + bit
-                      ? h("small", {}, mapped.channel.id)
-                      : undefined,
-                  );
-                }),
-                h(
-                  "span",
-                  { class: "hex mono" },
-                  value === undefined ? "··" : value.toString(16).padStart(2, "0").toUpperCase(),
-                ),
-                h(
-                  "span",
-                  { class: "legend" },
-                  ...starts.map((channel) =>
-                    h(
-                      "span",
-                      { class: "legend-item" },
-                      h("b", {}, channel.id),
-                      ...io
-                        .filter((entry) => entry.channel === channel.id)
-                        .map((entry) =>
-                          pathLink(entry.path, entry.path.split(".").slice(-3).join(".")),
-                        ),
-                    ),
-                  ),
-                ),
-              ];
-            }).flat(),
-          ),
-        );
-      }),
-    );
+	const renderGrids = () =>
+		grids.replaceChildren(
+			...device.assemblies.map((assembly, index) => {
+				const state = bytesOf(index);
+				const bytes = state?.bytes ?? null;
+				const bits = mapBits(
+					device.id,
+					assembly.direction,
+					assembly.bytes,
+					device.channels,
+					io,
+				);
+				const quality = store.connected
+					? (state?.quality ?? "unavailable")
+					: "stale";
+				return h(
+					"section",
+					{ class: `panel assembly q-${quality}` },
+					h(
+						"h3",
+						{},
+						`${assembly.direction === "input" ? "Input" : "Output"} assembly · ${assembly.bytes} bytes`,
+						assembly.address
+							? h("span", { class: "mono dim" }, ` ${assembly.address}`)
+							: "",
+						h(
+							"span",
+							{ class: "dim" },
+							rawBytesNote(bytes, quality, assembly.raw),
+						),
+					),
+					h(
+						"div",
+						{ class: "bitgrid" },
+						h("span", { class: "bh" }, "byte"),
+						...Array.from({ length: 8 }, (_, bit) =>
+							h("span", { class: "bh" }, `.${bit}`),
+						),
+						h("span", { class: "bh" }, "hex"),
+						h("span", { class: "bh legend-head" }, "mapped"),
+						...Array.from({ length: assembly.bytes }, (_, byte) => {
+							const value = bytes?.[byte];
+							const starts = device.channels.filter(
+								(channel) =>
+									channel.direction === assembly.direction &&
+									channel.offsetBits >> 3 === byte,
+							);
+							return [
+								h("span", { class: "byte mono" }, `+${byte}`),
+								...Array.from({ length: 8 }, (_, bit) => {
+									const mapped = bits[byte * 8 + bit];
+									const on =
+										value === undefined ? undefined : (value >> bit) & 1;
+									const where = `byte ${byte} bit ${bit}`;
+									return h(
+										"span",
+										{
+											class: `bit${mapped ? " mapped" : ""}${on === 1 ? " on" : ""}${on === undefined ? " none" : ""}`,
+											title: mapped
+												? `${where} · ${mapped.channel.name} (${mapped.channel.id})${mapped.paths.map((path) => `\n${path}`).join("")}`
+												: `${where} · not mapped`,
+										},
+										on === undefined ? "·" : String(on),
+										mapped && mapped.channel.offsetBits === byte * 8 + bit
+											? h("small", {}, mapped.channel.id)
+											: undefined,
+									);
+								}),
+								h(
+									"span",
+									{ class: "hex mono" },
+									value === undefined
+										? "··"
+										: value.toString(16).padStart(2, "0").toUpperCase(),
+								),
+								h(
+									"span",
+									{ class: "legend" },
+									...starts.map((channel) =>
+										h(
+											"span",
+											{ class: "legend-item" },
+											h("b", {}, channel.id),
+											...io
+												.filter((entry) => entry.channel === channel.id)
+												.map((entry) =>
+													pathLink(
+														entry.path,
+														entry.path.split(".").slice(-3).join("."),
+													),
+												),
+										),
+									),
+								),
+							];
+						}).flat(),
+					),
+				);
+			}),
+		);
 
-  const renderChannels = () =>
-    channelBody.replaceChildren(
-      ...device.channels.map((channel) => {
-        const index = device.assemblies.findIndex(
-          (assembly) => assembly.direction === channel.direction,
-        );
-        const bytes = index >= 0 ? bytesOf(index)?.bytes : undefined;
-        const raw = bytes ? readBits(bytes, channel.offsetBits, channel.bits) : null;
-        const mapped = io.filter((entry) => entry.channel === channel.id);
-        return h(
-          "tr",
-          {},
-          h("td", { class: "mono" }, channel.id),
-          h(
-            "td",
-            {},
-            channel.name,
-            channel.description ? h("div", { class: "dim" }, channel.description) : "",
-          ),
-          h("td", {}, channel.direction),
-          h(
-            "td",
-            { class: "mono" },
-            `${channel.offsetBits >> 3}.${channel.offsetBits & 7} · ${channel.bits} bit${channel.bits === 1 ? "" : "s"}`,
-          ),
-          h("td", { class: "mono" }, channel.address ?? ""),
-          h(
-            "td",
-            { class: "mono num", title: "Decoded from the raw assembly bytes" },
-            raw === null ? "—" : String(raw),
-            channel.unit ? ` ${channel.unit}` : "",
-          ),
-          h(
-            "td",
-            {},
-            ...(mapped.length
-              ? mapped.map((entry) => {
-                  const bound = store.devices
-                    .get(device.id)
-                    ?.channels.find(
-                      (candidate) => candidate.id === channel.id && candidate.path === entry.path,
-                    );
-                  const node = store.tree.resolve(entry.path);
-                  return h(
-                    "div",
-                    { class: "mapped-path" },
-                    pathLink(entry.path),
-                    entry.inverted ? h("span", { class: "tag" }, "inverted") : "",
-                    ...(bound
-                      ? reading(bound.quality, formatValue(store.manifest, entry.type, bound.value))
-                      : []),
-                    node?.declaration ? sourceLink(store, node.declaration) : "",
-                  );
-                })
-              : [h("span", { class: "dim" }, "not mapped")]),
-          ),
-        );
-      }),
-    );
+	const renderChannels = () =>
+		channelBody.replaceChildren(
+			...device.channels.map((channel) => {
+				const index = device.assemblies.findIndex(
+					(assembly) => assembly.direction === channel.direction,
+				);
+				const bytes = index >= 0 ? bytesOf(index)?.bytes : undefined;
+				const raw = bytes
+					? readBits(bytes, channel.offsetBits, channel.bits)
+					: null;
+				const mapped = io.filter((entry) => entry.channel === channel.id);
+				return h(
+					"tr",
+					{},
+					h("td", { class: "mono" }, channel.id),
+					h(
+						"td",
+						{},
+						channel.name,
+						channel.description
+							? h("div", { class: "dim" }, channel.description)
+							: "",
+					),
+					h("td", {}, channel.direction),
+					h(
+						"td",
+						{ class: "mono" },
+						`${channel.offsetBits >> 3}.${channel.offsetBits & 7} · ${channel.bits} bit${channel.bits === 1 ? "" : "s"}`,
+					),
+					h("td", { class: "mono" }, channel.address ?? ""),
+					h(
+						"td",
+						{ class: "mono num", title: "Decoded from the raw assembly bytes" },
+						raw === null ? "—" : String(raw),
+						channel.unit ? ` ${channel.unit}` : "",
+					),
+					h(
+						"td",
+						{},
+						...(mapped.length
+							? mapped.map((entry) => {
+									const bound = store.devices
+										.get(device.id)
+										?.channels.find(
+											(candidate) =>
+												candidate.id === channel.id &&
+												candidate.path === entry.path,
+										);
+									const node = store.tree.resolve(entry.path);
+									return h(
+										"div",
+										{ class: "mapped-path" },
+										pathLink(entry.path),
+										entry.inverted
+											? h("span", { class: "tag" }, "inverted")
+											: "",
+										...(bound
+											? reading(
+													bound.quality,
+													formatValue(store.manifest, entry.type, bound.value),
+												)
+											: []),
+										node?.declaration
+											? sourceLink(store, node.declaration)
+											: "",
+									);
+								})
+							: [h("span", { class: "dim" }, "not mapped")]),
+					),
+				);
+			}),
+		);
 
-  renderHealth();
-  renderStatus();
-  renderGrids();
-  renderChannels();
-  store.show({ devices: [device.id] });
+	renderHealth();
+	renderStatus();
+	renderGrids();
+	renderChannels();
+	store.show({ devices: [device.id] });
 
-  const identity: [string, string | undefined][] = [
-    ["Vendor", device.vendor],
-    ["Product", device.product],
-    ["Product code", device.productCode],
-    ["Address", device.network?.address],
-    ["RPI", device.network?.rpiMs === undefined ? undefined : `${device.network.rpiMs} ms`],
-    ["Connection", device.connection],
-  ];
-  return {
-    element: h(
-      "div",
-      { class: "page" },
-      h("div", { class: "crumbs" }, h("a", { href: "#/hardware" }, "Hardware"), " / "),
-      h("h1", { class: "mono" }, device.id, " ", badge),
-      h(
-        "dl",
-        { class: "facts" },
-        ...identity.flatMap(([label, value]) =>
-          value === undefined ? [] : [h("dt", {}, label), h("dd", { class: "mono" }, value)],
-        ),
-      ),
-      device.status && h("h2", {}, "Status"),
-      status,
-      grids,
-      h("h2", {}, "Channels"),
-      device.channels.length
-        ? h(
-            "table",
-            { class: "grid" },
-            h(
-              "thead",
-              {},
-              h(
-                "tr",
-                {},
-                ...["Id", "Name", "Dir", "Bits", "Address", "Raw", "TypeScript"].map((label) =>
-                  h("th", {}, label),
-                ),
-              ),
-            ),
-            channelBody,
-          )
-        : empty("No channels configured."),
-    ),
-    update(topics) {
-      if (topics.has("devices") || topics.has("stream") || topics.has("session")) {
-        renderHealth();
-        renderStatus();
-        renderGrids();
-        renderChannels();
-      }
-    },
-  };
+	const identity: [string, string | undefined][] = [
+		["Vendor", device.vendor],
+		["Product", device.product],
+		["Product code", device.productCode],
+		["Address", device.network?.address],
+		[
+			"RPI",
+			device.network?.rpiMs === undefined
+				? undefined
+				: `${device.network.rpiMs} ms`,
+		],
+		["Connection", device.connection],
+	];
+	return {
+		element: h(
+			"div",
+			{ class: "page" },
+			h(
+				"div",
+				{ class: "crumbs" },
+				h("a", { href: "#/hardware" }, "Hardware"),
+				" / ",
+			),
+			h("h1", { class: "mono" }, device.id, " ", badge),
+			h(
+				"dl",
+				{ class: "facts" },
+				...identity.flatMap(([label, value]) =>
+					value === undefined
+						? []
+						: [h("dt", {}, label), h("dd", { class: "mono" }, value)],
+				),
+			),
+			device.status && h("h2", {}, "Status"),
+			status,
+			grids,
+			h("h2", {}, "Channels"),
+			device.channels.length
+				? table(
+						{ class: "grid" },
+						["Id", "Name", "Dir", "Bits", "Address", "Raw", "TypeScript"],
+						channelBody,
+					)
+				: empty("No channels configured."),
+		),
+		update(topics) {
+			if (
+				topics.has("devices") ||
+				topics.has("stream") ||
+				topics.has("session")
+			) {
+				renderHealth();
+				renderStatus();
+				renderGrids();
+				renderChannels();
+			}
+		},
+	};
 };
 
 export const hardwareView = (store: Store, id: string | undefined): View => {
-  if (id === undefined) return deviceList(store);
-  const device = store.manifest.devices.find((candidate) => candidate.id === id);
-  if (device) return deviceDetail(store, device);
-  store.show();
-  return {
-    element: h(
-      "div",
-      { class: "page" },
-      h("h1", {}, "Hardware"),
-      empty(`No device ${id} in this build.`),
-    ),
-    update() {},
-  };
+	if (id === undefined) {
+		return deviceList(store);
+	}
+	const device = store.manifest.devices.find(
+		(candidate) => candidate.id === id,
+	);
+	if (device) {
+		return deviceDetail(store, device);
+	}
+	store.show();
+	return {
+		element: h(
+			"div",
+			{ class: "page" },
+			h("h1", {}, "Hardware"),
+			empty(`No device ${id} in this build.`),
+		),
+		update() {},
+	};
 };