feat(ui): rework the run page around what happened

The first failed node's error shows without a click. Timeline rows run in
start order and the timeline is only as tall as its rows. Events and printed
output are one filterable log, with failures tinted and query rows linking to
their SQL. The header shows the start time, the project version and the
command. A group run gathers its job runs' log and statements, and lists each
node once.

Author: kvlonge

ui/src/lib/api/http-client.ts

@@ -12,7 +12,7 @@ import { overviewOf } from './http-overview';
 import { toPlatformEvents, toPlatformHealth } from './http-problems';
 import { roleDetailOf, toRoleDefinition } from './http-roles';
 import { jobDetailOf, runWindowOf, toJob, toTick, toTrigger, triggerDetailOf } from './http-jobs';
-import { RUN_WINDOW, toAdhocCheck, runDetailOf, runRowPage, runsMatching, runTabCountsOf, toRunNode, toRuns, toRunEvent, toRunOutput, toRunStatements } from './http-runs';
+import { RUN_WINDOW, groupRunNodes, toAdhocCheck, runDetailOf, runRowPage, runsMatching, runTabCountsOf, toRunNode, toRuns, toRunEvent, toRunOutput, toRunStatements } from './http-runs';
 import type { ChangeSubscription, ChangedChannel, ChangedSignal, ConnectionState } from './signals';
 import type { AuthMode, Bootstrap, Capability, Location, PlatformEvent, Scope, WarehouseSync } from './types';
 import type { Account, AuditEntry, AuditQuery, ConnectionTest, LocationDetail, LocationSummary, PlatformHealth, MaintenanceHistory, RoleAssignment, RoleAssignmentRequest, RoleDefinition, RoleDetail } from './types/platform';
@@ -259,8 +259,8 @@ export function createHttpClient({ baseUrl = '', onUnauthorized }: HttpClientOpt
 			if (!found) return null;
 			const { run, wire, listed } = found;
 			const owners = [run, ...listed.filter((r) => r.parentRunId === run.id)];
-			const nodes = (await Promise.all(owners.map(async (owner) => (await runNodes(scope, owner.id)).map((n) => toRunNode(n, owner))))).flat();
-			return runDetailOf(run, wire, listed, nodes);
+			const [own, ...children] = await Promise.all(owners.map(async (owner) => (await runNodes(scope, owner.id)).map((n) => toRunNode(n, owner))));
+			return runDetailOf(run, wire, listed, groupRunNodes(own, children.flat()));
 		},
 		async listRunEvents(scope: Scope, runId: string, query: { after?: number; limit?: number } = {}): Promise<RunEventPage> {
 			const limit = query.limit ?? 1000;

ui/src/lib/api/http-runs.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import type { components } from '$control/schema.d.ts';
-import { runDetailOf, runRowPage, runTabCountsOf, toRunNode, toRuns, toRunEvent, toRunStatements, toRunOutput } from './http-runs';
+import { groupRunNodes, runDetailOf, runRowPage, runTabCountsOf, toRunNode, toRuns, toRunEvent, toRunStatements, toRunOutput } from './http-runs';
 
 type RunRecord = components['schemas']['RunRecord'];
 type W = components['schemas'];
@@ -176,3 +176,16 @@ describe('run Recall reads', () => {
 	});
 });
 
+
+describe('group run nodes', () => {
+	it("keeps each job run's node and the group's own row only where no job run has the node", () => {
+		const group = toRuns([wire('g', { kind: 'group', job_key: 'nightly' })], LOCATION)[0];
+		const staging = toRuns([wire('s', { parent_run_id: 'g', job_key: 'staging' })], LOCATION)[0];
+		const node = (key: string, status: string, owner = group) => toRunNode({ node_key: key, status } as W['RunNodeRecord'], owner);
+		const nodes = groupRunNodes([node('model:raw', 'success'), node('model:report', 'pending')], [node('model:raw', 'failed', staging)]);
+		expect(nodes.map((n) => [n.nodeKey, n.runId, n.status])).toEqual([
+			['model:report', 'g', 'pending'],
+			['model:raw', 's', 'failed']
+		]);
+	});
+});

ui/src/lib/api/http-runs.ts

@@ -226,6 +226,15 @@ export function runDetailOf(run: Run, wire: Wire['RunRecord'], listed: Run[], no
 	};
 }
 
+/**
+ * A run's nodes with its job runs' nodes. A group run's own rows repeat its job runs' nodes, so they
+ * stay only for nodes no job run has, such as those of members that never started.
+ */
+export function groupRunNodes(own: RunNode[], children: RunNode[]): RunNode[] {
+	const covered = new Set(children.map((n) => n.nodeKey));
+	return [...own.filter((n) => !covered.has(n.nodeKey)), ...children];
+}
+
 const KNOWN_EVENTS: ReadonlySet<string> = new Set(RECALL_EVENT_TYPES);
 /** Scheduler facts are stored as `run_<fact>` events in the scheduler invocation. */
 const SCHEDULER_EVENTS: ReadonlySet<string> = new Set(SCHEDULER_FACTS.map((f) => `run_${f}`));

ui/src/lib/api/mock/operate-store.ts

@@ -296,8 +296,8 @@ export class MockOperate {
 	listRunEvents(scope: Scope, runId: string, query: { after?: number; limit?: number } = {}): Promise<RunEventPage> {
 		const rec = this.#require(runId);
 		const now = Date.now();
-		const all = [rec, ...this.#children(rec)]
-			.flatMap((r) => execution(r, this.#nodesOf(r, now)).events)
+		// Each run's own, as the server returns; the run page gathers a group's job runs itself.
+		const all = execution(rec, this.#nodesOf(rec, now)).events
 			.sort((a, b) => a.occurredAt.localeCompare(b.occurredAt) || a.storageId - b.storageId)
 			.map((e, i) => ({ ...e, storageId: i + 1 }));
 		const after = query.after ?? 0;
@@ -310,24 +310,22 @@ export class MockOperate {
 	listRunStatements(scope: Scope, runId: string): Promise<RunStatement[]> {
 		const rec = this.#require(runId);
 		const now = Date.now();
-		return this.#ctx.reply([rec, ...this.#children(rec)].flatMap((r) => execution(r, this.#nodesOf(r, now), now).statements));
+		return this.#ctx.reply(execution(rec, this.#nodesOf(rec, now), now).statements);
 	}
 
 	getStatementSql(scope: Scope, runId: string, statementId: string): Promise<StatementSql> {
 		this.#need('view.sql');
 		const rec = this.#require(runId);
 		const now = Date.now();
-		const statement = [rec, ...this.#children(rec)]
-			.flatMap((r) => execution(r, this.#nodesOf(r, now), now).statements)
-			.find((st) => st.id === statementId);
+		const statement = execution(rec, this.#nodesOf(rec, now), now).statements.find((st) => st.id === statementId);
 		if (!statement) throw new ApiError(`Unknown statement ${statementId}`, 404);
 		return this.#ctx.reply({ statementId, sql: statement.sqlRecorded ? sqlFor(statement.nodeKey, statement.kind, this.#ctx.target(scope)) : null });
 	}
 
 	listRunOutput(scope: Scope, runId: string): Promise<RunOutputLine[]> {
 		const rec = this.#require(runId);
 		const now = Date.now();
-		return this.#ctx.reply([rec, ...this.#children(rec)].flatMap((r) => execution(r, this.#nodesOf(r, now)).output));
+		return this.#ctx.reply(execution(rec, this.#nodesOf(rec, now)).output);
 	}
 
 	listQueue(scope: Scope): Promise<QueueEntry[]> {

ui/src/routes/runs/[id]/events-tab.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { app } from '$lib/state/app.svelte';
 	import CopyButton from '$lib/components/copy-button.svelte';
 	import type { RunNode, RunNodeError } from '$lib/api';
@@ -30,6 +31,15 @@
 		}
 	}
 
+	// The first failure opens on its own, so the error is on screen without a click: one audited read per visit.
+	let opened = false;
+	$effect(() => {
+		const first = failed[0];
+		if (opened || !first || !(first.errorDetail || readable)) return;
+		opened = true;
+		untrack(() => void toggle(first));
+	});
+
 	function read(key: string): RunNodeError | null {
 		const found = errors[key];
 		return found && 'nodeKey' in found ? found : null;