@tsplc/debug 0.2.17 → 0.2.18

package/src/ui/jobs.ts

@@ -1,5 +1,13 @@
 import type { JobState, RequestTrace } from "../api.ts";
-import { type View, empty, h, pathLink, recordSourceLink, sourceLink } from "./dom.ts";
+import {
+	type View,
+	empty,
+	h,
+	pathLink,
+	recordSourceLink,
+	sourceLink,
+	table,
+} from "./dom.ts";
 import { formatDuration } from "./format.ts";
 import type { Store } from "./store.ts";
 
@@ -7,243 +15,284 @@ type JobFilter = "all" | "busy" | "failed";
 
 /** Failed while idle since its last unhandled failure: a later start that ended well clears it. */
 const failed = (job: JobState) =>
-  job.busy === false &&
-  job.failure !== undefined &&
-  (job.startedAt === undefined || job.failure.at >= job.startedAt);
+	job.busy === false &&
+	job.failure !== undefined &&
+	(job.startedAt === undefined || job.failure.at >= job.startedAt);
 
 const jobStatus = (job: JobState) => {
-  if (job.cancelling) return "cancelling";
-  if (job.busy) return "busy";
-  if (job.busy === null) return "unknown";
-  if (failed(job)) return "failed";
-  return "idle";
+	if (job.cancelling) {
+		return "cancelling";
+	}
+	if (job.busy) {
+		return "busy";
+	}
+	if (job.busy === null) {
+		return "unknown";
+	}
+	if (failed(job)) {
+		return "failed";
+	}
+	return "idle";
 };
 
 export const isActive = (job: JobState) => job.busy === true || failed(job);
 
 const failureName = (store: Store, failure: NonNullable<JobState["failure"]>) =>
-  failure.name ?? store.manifest.errors[String(failure.code)] ?? `error ${failure.code}`;
+	failure.name ??
+	store.manifest.errors[String(failure.code)] ??
+	`error ${failure.code}`;
 
 /**
  * A traced request's job, as a link: the user's job that awaits a compiler-made service job, which
  * is the one whose id the request carries, or that job itself.
  */
-export const requestJobLink = (store: Store, id: number, sequence: number | undefined) => {
-  const { jobs } = store.manifest;
-  const job =
-    jobs.find((job) => !job.generated && job.requests.some((call) => call.job === id)) ??
-    jobs.find((job) => job.id === id);
-  return h(
-    "a",
-    { href: `#/jobs?id=${job?.id ?? id}` },
-    job ? `${job.name}${job.instance ? ` · ${job.instance}` : ""}` : `job ${id}`,
-    ` #${sequence ?? "?"}`,
-  );
+export const requestJobLink = (
+	store: Store,
+	id: number,
+	sequence: number | undefined,
+) => {
+	const { jobs } = store.manifest;
+	const job =
+		jobs.find(
+			(job) => !job.generated && job.requests.some((call) => call.job === id),
+		) ?? jobs.find((job) => job.id === id);
+	return h(
+		"a",
+		{ href: `#/jobs?id=${job?.id ?? id}` },
+		job
+			? `${job.name}${job.instance ? ` · ${job.instance}` : ""}`
+			: `job ${id}`,
+		` #${sequence ?? "?"}`,
+	);
 };
 
 export const requestStatus = (trace: RequestTrace) =>
-  h(
-    "span",
-    { class: `st st-${trace.status}` },
-    trace.status,
-    trace.httpStatus === undefined ? "" : ` ${trace.httpStatus}`,
-  );
+	h(
+		"span",
+		{ class: `st st-${trace.status}` },
+		trace.status,
+		trace.httpStatus === undefined ? "" : ` ${trace.httpStatus}`,
+	);
+
+/** The step a busy job waits at, when its details were read. */
+const waitingOn = (store: Store, job: JobState) => {
+	if (job.unread) {
+		return h("span", { class: "dim" }, "details not read (too many busy jobs)");
+	}
+	if (!job.current) {
+		return h("span", { class: "dim" }, "—");
+	}
+	return h(
+		"span",
+		{},
+		h("span", { class: "tag" }, job.current.kind),
+		" ",
+		h("code", {}, job.current.text),
+		" ",
+		sourceLink(store, job.current.range),
+	);
+};
 
 /** One job: what it is, where it is waiting and what it asked the backend. */
 export const jobRow = (store: Store, job: JobState, highlighted = false) => {
-  const definition = store.manifest.jobs.find((candidate) => candidate.id === job.id);
-  const status = jobStatus(job);
-  const trace = job.request?.trace;
-  const quality = store.connected ? job.quality : "stale";
-  return h(
-    "tr",
-    { class: highlighted ? "highlight" : undefined, id: `job-${job.id}` },
-    h(
-      "td",
-      {},
-      h("b", { class: "mono" }, definition?.name ?? `job ${job.id}`),
-      definition ? h("div", {}, sourceLink(store, definition.declaration)) : "",
-    ),
-    h(
-      "td",
-      {},
-      definition?.instance ? pathLink(definition.instance) : h("span", { class: "dim" }, "—"),
-    ),
-    h(
-      "td",
-      {},
-      h(
-        "span",
-        {
-          class: `st st-${status}`,
-          title:
-            status === "unknown" ? "Not read: shown jobs are read through the login" : undefined,
-        },
-        status,
-      ),
-      quality === "good" || job.busy === null
-        ? ""
-        : h("span", { class: `meta s-${quality}` }, ` ${quality}`),
-    ),
-    h(
-      "td",
-      { class: "await" },
-      job.unread
-        ? h("span", { class: "dim" }, "details not read (too many busy jobs)")
-        : job.current
-          ? h(
-              "span",
-              {},
-              h("span", { class: "tag" }, job.current.kind),
-              " ",
-              h("code", {}, job.current.text),
-              " ",
-              sourceLink(store, job.current.range),
-            )
-          : h("span", { class: "dim" }, "—"),
-    ),
-    h(
-      "td",
-      { class: "mono num" },
-      job.elapsedMs === undefined ? "—" : formatDuration(job.elapsedMs),
-    ),
-    h(
-      "td",
-      { class: "err" },
-      job.failure
-        ? h(
-            "span",
-            { title: `Unhandled at ${job.failure.at}` },
-            failureName(store, job.failure),
-            " ",
-            recordSourceLink(store, job.failure.source),
-          )
-        : "",
-    ),
-    h(
-      "td",
-      { class: "nowrap" },
-      job.request
-        ? h(
-            "span",
-            {},
-            h(
-              "a",
-              { href: `#/requests?seq=${trace?.seq ?? ""}`, class: "mono" },
-              `${job.request.service} #${job.request.sequence}`,
-            ),
-            " ",
-            trace ? requestStatus(trace) : h("span", { class: "dim" }, "no trace"),
-            trace?.durationMs === undefined
-              ? ""
-              : h("span", { class: "mono dim" }, ` ${formatDuration(trace.durationMs)}`),
-          )
-        : h("span", { class: "dim" }, "—"),
-    ),
-  );
+	const definition = store.manifest.jobs.find(
+		(candidate) => candidate.id === job.id,
+	);
+	const status = jobStatus(job);
+	const trace = job.request?.trace;
+	const quality = store.connected ? job.quality : "stale";
+	return h(
+		"tr",
+		{ class: highlighted ? "highlight" : undefined, id: `job-${job.id}` },
+		h(
+			"td",
+			{},
+			h("b", { class: "mono" }, definition?.name ?? `job ${job.id}`),
+			definition ? h("div", {}, sourceLink(store, definition.declaration)) : "",
+		),
+		h(
+			"td",
+			{},
+			definition?.instance
+				? pathLink(definition.instance)
+				: h("span", { class: "dim" }, "—"),
+		),
+		h(
+			"td",
+			{},
+			h(
+				"span",
+				{
+					class: `st st-${status}`,
+					title:
+						status === "unknown"
+							? "Not read: shown jobs are read through the login"
+							: undefined,
+				},
+				status,
+			),
+			quality === "good" || job.busy === null
+				? ""
+				: h("span", { class: `meta s-${quality}` }, ` ${quality}`),
+		),
+		h("td", { class: "await" }, waitingOn(store, job)),
+		h(
+			"td",
+			{ class: "mono num" },
+			job.elapsedMs === undefined ? "—" : formatDuration(job.elapsedMs),
+		),
+		h(
+			"td",
+			{ class: "err" },
+			job.failure
+				? h(
+						"span",
+						{ title: `Unhandled at ${job.failure.at}` },
+						failureName(store, job.failure),
+						" ",
+						recordSourceLink(store, job.failure.source),
+					)
+				: "",
+		),
+		h(
+			"td",
+			{ class: "nowrap" },
+			job.request
+				? h(
+						"span",
+						{},
+						h(
+							"a",
+							{ href: `#/requests?seq=${trace?.seq ?? ""}`, class: "mono" },
+							`${job.request.service} #${job.request.sequence}`,
+						),
+						" ",
+						trace
+							? requestStatus(trace)
+							: h("span", { class: "dim" }, "no trace"),
+						trace?.durationMs === undefined
+							? ""
+							: h(
+									"span",
+									{ class: "mono dim" },
+									` ${formatDuration(trace.durationMs)}`,
+								),
+					)
+				: h("span", { class: "dim" }, "—"),
+		),
+	);
 };
 
 export const jobTable = (rows: HTMLElement[]) =>
-  h(
-    "table",
-    { class: "grid jobs" },
-    h(
-      "thead",
-      {},
-      h(
-        "tr",
-        {},
-        ...["Function", "Instance", "State", "Waiting on", "Elapsed", "Error", "Request"].map(
-          (label) => h("th", {}, label),
-        ),
-      ),
-    ),
-    h("tbody", {}, ...rows),
-  );
+	table(
+		{ class: "grid jobs" },
+		[
+			"Function",
+			"Instance",
+			"State",
+			"Waiting on",
+			"Elapsed",
+			"Error",
+			"Request",
+		],
+		h("tbody", {}, ...rows),
+	);
 
 const FILTERS: JobFilter[] = ["all", "busy", "failed"];
-const filters: Record<JobFilter, { label: string; keep: (job: JobState) => boolean }> = {
-  all: { label: "All", keep: () => true },
-  busy: { label: "Busy", keep: (job) => job.busy === true },
-  failed: { label: "Failed", keep: failed },
+const filters: Record<
+	JobFilter,
+	{ label: string; keep: (job: JobState) => boolean }
+> = {
+	all: { label: "All", keep: () => true },
+	busy: { label: "Busy", keep: (job) => job.busy === true },
+	failed: { label: "Failed", keep: failed },
 };
 
 export const jobsView = (store: Store, params: URLSearchParams): View => {
-  let filter = FILTERS.find((key) => key === params.get("filter")) ?? "all";
-  const highlighted = Number(params.get("id") ?? Number.NaN);
-  // Compiler-made jobs, such as each service call's own, are hidden unless asked for or linked to.
-  const generated = new Set(
-    store.manifest.jobs.filter((job) => job.generated).map((job) => job.id),
-  );
-  const generatedToggle = h("input", { type: "checkbox", checked: generated.has(highlighted) });
-  const shown = (job: { id: number }) => generatedToggle.checked || !generated.has(job.id);
-  const bar = h("div", { class: "tabs" });
-  const body = h("div");
-  const render = () => {
-    bar.replaceChildren(
-      ...FILTERS.map((key) =>
-        h(
-          "button",
-          {
-            class: `tab${key === filter ? " on" : ""}`,
-            onclick: () => {
-              filter = key;
-              history.replaceState(null, "", `#/jobs?filter=${key}`);
-              render();
-            },
-          },
-          filters[key].label,
-          h(
-            "span",
-            { class: "n" },
-            String(
-              [...store.jobs.values()].filter((job) => shown(job) && filters[key].keep(job)).length,
-            ),
-          ),
-        ),
-      ),
-      h("label", { class: "check" }, generatedToggle, "show generated"),
-    );
-    const jobs = [...store.jobs.values()]
-      .filter((job) => shown(job) && filters[filter].keep(job))
-      .sort((a, b) => Number(isActive(b)) - Number(isActive(a)) || a.id - b.id);
-    body.replaceChildren(
-      jobs.length
-        ? jobTable(jobs.map((job) => jobRow(store, job, job.id === highlighted)))
-        : empty("No jobs match."),
-    );
-  };
-  const showJobs = () =>
-    store.show({
-      jobs: store.manifest.jobs.filter(shown).map(({ id }) => id),
-    });
-  generatedToggle.addEventListener("change", () => {
-    showJobs();
-    render();
-  });
-  render();
-  showJobs();
-  return {
-    element: h(
-      "div",
-      { class: "page" },
-      h("h1", {}, "Jobs"),
-      h(
-        "p",
-        { class: "hint" },
-        "Busy and idle come from the trace when it is on; otherwise each listed job's busy flag is read through the login, and the details of busy ones. Failures are the program's unhandled exceptions.",
-      ),
-      bar,
-      body,
-    ),
-    update(topics) {
-      if (
-        topics.has("jobs") ||
-        topics.has("stream") ||
-        topics.has("session") ||
-        topics.has("timeline")
-      )
-        render();
-    },
-  };
+	let filter = FILTERS.find((key) => key === params.get("filter")) ?? "all";
+	const highlighted = Number(params.get("id") ?? Number.NaN);
+	// Compiler-made jobs, such as each service call's own, are hidden unless asked for or linked to.
+	const generated = new Set(
+		store.manifest.jobs.filter((job) => job.generated).map((job) => job.id),
+	);
+	const generatedToggle = h("input", {
+		type: "checkbox",
+		checked: generated.has(highlighted),
+	});
+	const shown = (job: { id: number }) =>
+		generatedToggle.checked || !generated.has(job.id);
+	const bar = h("div", { class: "tabs" });
+	const body = h("div");
+	const render = () => {
+		bar.replaceChildren(
+			...FILTERS.map((key) =>
+				h(
+					"button",
+					{
+						class: `tab${key === filter ? " on" : ""}`,
+						onclick: () => {
+							filter = key;
+							history.replaceState(null, "", `#/jobs?filter=${key}`);
+							render();
+						},
+					},
+					filters[key].label,
+					h(
+						"span",
+						{ class: "n" },
+						String(
+							[...store.jobs.values()].filter(
+								(job) => shown(job) && filters[key].keep(job),
+							).length,
+						),
+					),
+				),
+			),
+			h("label", { class: "check" }, generatedToggle, "show generated"),
+		);
+		const jobs = [...store.jobs.values()]
+			.filter((job) => shown(job) && filters[filter].keep(job))
+			.sort((a, b) => Number(isActive(b)) - Number(isActive(a)) || a.id - b.id);
+		body.replaceChildren(
+			jobs.length
+				? jobTable(
+						jobs.map((job) => jobRow(store, job, job.id === highlighted)),
+					)
+				: empty("No jobs match."),
+		);
+	};
+	const showJobs = () =>
+		store.show({
+			jobs: store.manifest.jobs.filter(shown).map(({ id }) => id),
+		});
+	generatedToggle.addEventListener("change", () => {
+		showJobs();
+		render();
+	});
+	render();
+	showJobs();
+	return {
+		element: h(
+			"div",
+			{ class: "page" },
+			h("h1", {}, "Jobs"),
+			h(
+				"p",
+				{ class: "hint" },
+				"Busy and idle come from the trace when it is on; otherwise each listed job's busy flag is read through the login, and the details of busy ones. Failures are the program's unhandled exceptions.",
+			),
+			bar,
+			body,
+		),
+		update(topics) {
+			if (
+				topics.has("jobs") ||
+				topics.has("stream") ||
+				topics.has("session") ||
+				topics.has("timeline")
+			) {
+				render();
+			}
+		},
+	};
 };

package/src/ui/main.ts

@@ -1,3 +1,4 @@
+import { errorMessage } from "../errors.ts";
 import { getJson } from "./client.ts";
 import { type View, h } from "./dom.ts";
 import { hardwareView } from "./hardware.ts";
@@ -10,65 +11,68 @@ import { Store } from "./store.ts";
 import { variablesView } from "./variables.ts";
 
 interface RouteMatch {
-  route: Route;
-  rest: string[];
-  params: URLSearchParams;
+	route: Route;
+	rest: string[];
+	params: URLSearchParams;
 }
 
 const parseHash = (): RouteMatch => {
-  const [path = "", query = ""] = location.hash.replace(/^#\/?/, "").split("?");
-  const [name, ...rest] = path.split("/");
-  return {
-    route: ROUTES.find((route) => route === name) ?? "overview",
-    rest: rest.map(decodeURIComponent),
-    params: new URLSearchParams(query),
-  };
+	const [path = "", query = ""] = location.hash.replace(/^#\/?/, "").split("?");
+	const [name, ...rest] = path.split("/");
+	return {
+		route: ROUTES.find((route) => route === name) ?? "overview",
+		rest: rest.map(decodeURIComponent),
+		params: new URLSearchParams(query),
+	};
 };
 
 const views: Record<Route, (store: Store, at: RouteMatch) => View> = {
-  overview: (store) => overviewView(store),
-  variables: (store, at) => variablesView(store, at.params),
-  hardware: (store, at) => hardwareView(store, at.rest[0]),
-  jobs: (store, at) => jobsView(store, at.params),
-  recent: (store) => recentView(store),
-  requests: (store, at) => requestsView(store, at.params),
+	overview: (store) => overviewView(store),
+	variables: (store, at) => variablesView(store, at.params),
+	hardware: (store, at) => hardwareView(store, at.rest[0]),
+	jobs: (store, at) => jobsView(store, at.params),
+	recent: (store) => recentView(store),
+	requests: (store, at) => requestsView(store, at.params),
 };
 
 const start = async () => {
-  const [manifest, session] = await Promise.all([getJson("manifest"), getJson("session")]);
-  let view: View | undefined;
-  const store = new Store(manifest, session, (topics) => {
-    top.update(topics);
-    view?.update(topics);
-  });
-  const top = header(store);
-  const main = h("main");
-  document.body.replaceChildren(top.element, main);
+	const [manifest, session] = await Promise.all([
+		getJson("manifest"),
+		getJson("session"),
+	]);
+	let view: View | undefined;
+	const store = new Store(manifest, session, (topics) => {
+		top.update(topics);
+		view?.update(topics);
+	});
+	const top = header(store);
+	const main = h("main");
+	document.body.replaceChildren(top.element, main);
 
-  const show = () => {
-    const at = parseHash();
-    view?.dispose?.();
-    view = views[at.route](store, at);
-    top.setRoute(at.route);
-    main.replaceChildren(view.element);
-    main.scrollTop = 0;
-  };
-  addEventListener("hashchange", show);
-  show();
+	const show = () => {
+		const at = parseHash();
+		view?.dispose?.();
+		view = views[at.route](store, at);
+		top.setRoute(at.route);
+		main.replaceChildren(view.element);
+		main.scrollTop = 0;
+	};
+	addEventListener("hashchange", show);
+	show();
 };
 
 start().catch((error: unknown) =>
-  document.body.replaceChildren(
-    h(
-      "div",
-      { class: "fatal" },
-      h("h1", {}, "The debugger could not start"),
-      h("p", {}, error instanceof Error ? error.message : String(error)),
-      h(
-        "p",
-        { class: "dim" },
-        "Check that the debugger host is running and, under the agent, that the URL carries a valid ?token=.",
-      ),
-    ),
-  ),
+	document.body.replaceChildren(
+		h(
+			"div",
+			{ class: "fatal" },
+			h("h1", {}, "The debugger could not start"),
+			h("p", {}, errorMessage(error)),
+			h(
+				"p",
+				{ class: "dim" },
+				"Check that the debugger host is running and, under the agent, that the URL carries a valid ?token=.",
+			),
+		),
+	),
 );