@tellegen/svelte 0.3.0 → 0.4.0

package/dist/components/AppFooter.svelte

@@ -31,7 +31,7 @@
 		padding: 8px 20px;
 		font-size: 10.5px;
 		color: var(--text-secondary);
-		background: linear-gradient(rgba(236, 233, 226, 0), rgba(236, 233, 226, 0.9));
+		background: linear-gradient(rgb(var(--bg-rgb) / 0), rgb(var(--bg-rgb) / 0.9));
 		animation: rise 0.5s 0.24s ease-out both;
 		pointer-events: none;
 	}
@@ -53,10 +53,12 @@
 		color: var(--text-accent);
 	}
 
+	/* Inside the Network panel on narrow screens, panel text size applies. */
 	footer.inline {
 		position: static;
 		margin-top: 14px;
 		padding: 0;
+		font-size: 12px;
 		background: none;
 		animation: none;
 		pointer-events: auto;
@@ -71,7 +73,6 @@
 
 		footer.inline {
 			margin-top: 4px;
-			font-size: 11px;
 		}
 	}
 

package/dist/components/AppHeader.svelte

@@ -26,10 +26,10 @@
 <header bind:this={headerEl}>
 	<div class="brand">
 		<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
-			<path d="M4 18 L12 6 L20 18" stroke="#b25e00" stroke-width="1.6" fill="none" />
-			<circle cx="4" cy="18" r="2.4" fill="#b25e00" />
-			<circle cx="12" cy="6" r="2.4" fill="#20242b" />
-			<circle cx="20" cy="18" r="2.4" fill="#b25e00" />
+			<path class="brand-accent-stroke" d="M4 18 L12 6 L20 18" stroke-width="1.6" fill="none" />
+			<circle class="brand-accent" cx="4" cy="18" r="2.4" />
+			<circle class="brand-ink" cx="12" cy="6" r="2.4" />
+			<circle class="brand-accent" cx="20" cy="18" r="2.4" />
 		</svg>
 		<h1>tellegen</h1>
 	</div>
@@ -130,7 +130,7 @@
 		justify-content: space-between;
 		gap: 16px;
 		padding: 10px 20px;
-		background: linear-gradient(rgba(236, 233, 226, 0.95), rgba(236, 233, 226, 0));
+		background: linear-gradient(rgb(var(--bg-rgb) / 0.95), rgb(var(--bg-rgb) / 0));
 		animation: drop 0.5s ease-out both;
 	}
 
@@ -141,6 +141,19 @@
 		gap: 10px;
 	}
 
+	/* The brand mark follows the theme: accent legs, ink apex. */
+	.brand-accent {
+		fill: var(--accent);
+	}
+
+	.brand-accent-stroke {
+		stroke: var(--accent);
+	}
+
+	.brand-ink {
+		fill: var(--ink);
+	}
+
 	h1 {
 		margin: 0;
 		font-size: 22px;
@@ -305,8 +318,8 @@
 
 	/* Ghost chip: standing invitation to drop or pick a case file. */
 	.cases > button.ghost {
-		background: rgba(252, 251, 247, 0.36);
-		border: 1px dashed rgba(178, 94, 0, 0.55);
+		background: rgb(var(--paper-rgb) / 0.36);
+		border: 1px dashed rgb(var(--accent-rgb) / 0.55);
 		color: var(--text-secondary);
 		box-shadow: inset 0 0 0 1px rgba(212, 116, 34, 0.08);
 	}
@@ -351,7 +364,7 @@
 			flex-wrap: wrap;
 			gap: 8px;
 			padding: 8px 10px 12px;
-			background: linear-gradient(rgba(236, 233, 226, 0.97), rgba(236, 233, 226, 0.72));
+			background: linear-gradient(rgb(var(--bg-rgb) / 0.97), rgb(var(--bg-rgb) / 0.72));
 		}
 
 		.brand {

package/dist/components/BindingLines.svelte

@@ -59,7 +59,7 @@
 	}
 
 	.head {
-		font-size: 10.5px;
+		font-size: 12.5px;
 		margin: 0 0 4px;
 	}
 

package/dist/components/BusPicker.svelte

@@ -155,7 +155,7 @@
 
 	label {
 		display: block;
-		font-size: 10px;
+		font-size: 12px;
 		text-transform: uppercase;
 		margin-bottom: 3px;
 	}
@@ -220,7 +220,7 @@
 		background: var(--panel);
 		border: 1px solid var(--line);
 		border-radius: var(--radius-xs, 2px);
-		box-shadow: 0 4px 18px rgba(32, 36, 43, 0.14);
+		box-shadow: var(--elev-menu);
 	}
 
 	li {
@@ -244,7 +244,7 @@
 		border: 1px solid var(--line);
 		border-radius: var(--radius-xs, 2px);
 		box-shadow: var(--elev-1);
-		font-size: 10.5px;
+		font-size: 12.5px;
 		margin: 4px 0 0;
 	}
 

package/dist/components/DemandSlider.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getAppState, getController } from '../context.svelte.js';
 	import { fmt, signed } from '../format.js';
+	import { sliderKeyValue } from '../slider.js';
 
 	const app = getAppState();
 	const ctrl = getController();
@@ -37,7 +38,7 @@
 			<span class="val">{signed(ctrl.sliderValue)} MW</span>
 		</div>
 		<div class="range-mode">
-			<div class="segment mono" aria-label="demand range">
+			<div class="segment mono" role="group" aria-label="demand range">
 				<button
 					type="button"
 					class:active={app.demandRangeMode === 'local'}
@@ -51,7 +52,7 @@
 					type="button"
 					class:active={app.demandRangeMode === 'full'}
 					aria-pressed={app.demandRangeMode === 'full'}
-					aria-label="full demand range"
+					aria-label="full range of demand"
 					{disabled}
 					title="range from zero load to the local physical limit"
 					onclick={() => ctrl.setDemandRangeMode('full')}>full range</button
@@ -79,7 +80,15 @@
 				bind:value={ctrl.sliderCurrent, ctrl.setSliderPreview}
 				aria-label="demand delta at selected bus"
 				onpointerdown={() => ctrl.setSliderPreview(ctrl.sliderValue)}
-				onkeydown={() => ctrl.setSliderPreview(ctrl.sliderValue)}
+				onkeydown={(e) => {
+					const next = sliderKeyValue(e.key, ctrl.sliderValue, ctrl.sliderMin, ctrl.sliderMax);
+					if (next === null) {
+						ctrl.setSliderPreview(ctrl.sliderValue);
+						return;
+					}
+					e.preventDefault();
+					ctrl.setSliderPreview(next);
+				}}
 				onpointerup={(e) => ctrl.finishDemandInput(Number(e.currentTarget.value))}
 				onkeyup={(e) => ctrl.finishDemandInput(Number(e.currentTarget.value))}
 				onchange={(e) => ctrl.finishDemandInput(Number(e.currentTarget.value))}
@@ -120,7 +129,7 @@
 	.slider-head {
 		display: flex;
 		justify-content: space-between;
-		font-size: 11.5px;
+		font-size: 13.5px;
 		color: var(--text-secondary);
 		margin-bottom: 4px;
 	}
@@ -135,7 +144,7 @@
 		justify-content: space-between;
 		gap: 8px;
 		margin: 6px 0 7px;
-		font-size: 10.5px;
+		font-size: 12.5px;
 	}
 
 	.slider-track {
@@ -256,13 +265,13 @@
 
 	.pred {
 		margin: 2px 0 0;
-		font-size: 11px;
+		font-size: 13px;
 		min-height: 16px;
 	}
 
 	.score {
 		margin: 8px 0 0;
-		font-size: 11px;
+		font-size: 13px;
 		color: var(--ink);
 		min-height: 16px;
 	}

package/dist/components/DiagramCanvas.svelte

@@ -350,7 +350,7 @@
 							cy={bus.lat}
 							r={Math.max(5, busRadius(Math.max(bus.demand_mw, bus.gen_mw))) / scale}
 							fill={color(bus)}
-							stroke={selectedBus === bus.id ? '#2f6fbb' : '#756a5b'}
+							style:stroke={selectedBus === bus.id ? '#2f6fbb' : 'var(--diagram-bus-stroke)'}
 							stroke-width={selectedBus === bus.id ? 3 : 1}
 							vector-effect="non-scaling-stroke"
 						/>

package/dist/components/DisplayControls.svelte

@@ -59,10 +59,14 @@
 			</span>
 		{/if}
 	</div>
-{:else}
+{:else if ctrl.activeSolvable?.solving}
 	<p class="dim small blink">
 		Solving {formulationLabel(ctrl.activeFormulation)}&hellip;
 	</p>
+{:else}
+	<p class="dim small">
+		No {formulationLabel(ctrl.activeFormulation)} results available.
+	</p>
 {/if}
 
 <style>

package/dist/components/DropZone.svelte

@@ -19,7 +19,7 @@
 		inset: 0;
 		z-index: 20;
 		pointer-events: none;
-		background: rgba(236, 233, 226, 0.75);
+		background: rgb(var(--bg-rgb) / 0.75);
 	}
 
 	.dropframe {

package/dist/components/FormulationSelector.svelte

@@ -53,7 +53,7 @@
 
 	.formulation-row select {
 		font-family: var(--font-mono);
-		font-size: 11px;
+		font-size: 13px;
 		padding: 3px 22px 3px 8px;
 		border: 1px solid var(--line);
 		border-radius: 2px;

package/dist/components/LocalCaseDetails.svelte

@@ -11,6 +11,7 @@
 	const EXPORT_FORMATS = [
 		{ token: 'matpower', label: 'MATPOWER (.m)' },
 		{ token: 'psse', label: 'PSS/E (.raw)' },
+		{ token: 'psse35', label: 'PSS/E v35 (.raw)' },
 		{ token: 'powerworld', label: 'PowerWorld (.aux)' },
 		{ token: 'pslf', label: 'PSLF (.epc)' },
 		{ token: 'powermodels-json', label: 'PowerModels (.json)' },
@@ -117,6 +118,8 @@
 			<p class="footnote mono">
 				no coordinates in this file: click the map or drop a geographic file
 			</p>
+		{:else if lc.coordsKind === 'synthetic' && lc.summary.coords_method === 'generated'}
+			<p class="footnote mono">coordinates: synthetic grid sited on real geography</p>
 		{:else if lc.coordsKind === 'synthetic' || lc.coordsKind === 'manual'}
 			<p class="footnote mono">
 				coordinates: {lc.coordsKind} topology layout centered where it was placed
@@ -222,7 +225,7 @@
 
 	.footnote {
 		margin: 8px 0 0;
-		font-size: 10px;
+		font-size: 12px;
 		color: var(--text-tertiary);
 		letter-spacing: 0;
 	}
@@ -231,7 +234,7 @@
 		margin: 8px 0 0;
 		padding: 0;
 		list-style: none;
-		font-size: 10.5px;
+		font-size: 12.5px;
 		line-height: 1.5;
 		color: var(--text-accent);
 	}
@@ -254,7 +257,7 @@
 		padding: 4px;
 		list-style: none;
 		min-width: 100%;
-		background: var(--surface, #fff);
+		background: var(--surface, var(--surface-menu));
 		border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
 		border-radius: 6px;
 		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);

package/dist/components/McResults.svelte

@@ -1,19 +1,43 @@
 <script lang="ts">
-	import type { McPfResult, McComplex, DistGraph } from '@tellegen/engine';
+	import {
+		mcPfResultDetail,
+		summarizeMcPfResult,
+		type DistGraph,
+		type McComplex,
+		type McPfDetail,
+		type McPfDetailQuery,
+		type McPfResult,
+		type McPfSummary
+	} from '@tellegen/engine';
 	import { neutralTerminal } from '../multiconductor.js';
+	import type { McEditTiming } from '../state.svelte.js';
 	let {
 		result,
+		detail,
+		timing = null,
 		elapsedMs,
 		selectedBus,
 		selectedEdge,
 		graph
 	}: {
-		result: McPfResult;
+		/** A live session's summary, or a stored full result. */
+		result: McPfSummary | McPfResult;
+		/** Fetches one bus's terminals and a page of equipment ports. A full
+		 * `result` serves its own pages when this is omitted. */
+		detail?: (query: McPfDetailQuery) => Promise<McPfDetail | null>;
+		timing?: McEditTiming | null;
 		elapsedMs: number | null;
 		selectedBus: string | null;
 		selectedEdge: string | null;
 		graph: DistGraph | null;
 	} = $props();
+	const summary = $derived('terminals' in result ? summarizeMcPfResult(result) : result);
+	const load = $derived.by(() => {
+		if (detail) return detail;
+		if (!('terminals' in result)) return null;
+		const full = result;
+		return (query: McPfDetailQuery) => Promise.resolve(mcPfResultDetail(full, query));
+	});
 	let busChoice = $state('');
 	let edgeChoice = $state('');
 	const busId = $derived(
@@ -23,29 +47,48 @@
 	);
 	const bus = $derived(graph?.buses.find((b) => b.id === busId));
 	const neutralName = $derived(bus ? neutralTerminal(bus.terminals, bus.neutral_terminal) : null);
-	const neutral = $derived(
-		result.terminals.find((t) => t.bus === busId && t.terminal === neutralName)?.voltage
-	);
 	const edgeId = $derived(selectedEdge ?? edgeChoice);
-	const sourcePower = $derived(
-		result.source_reactions.reduce(
-			(sum, port) => ({
-				re: sum.re + port.power_into_network.re,
-				im: sum.im + port.power_into_network.im
-			}),
-			{ re: 0, im: 0 }
-		)
-	);
-	const passiveLoss = $derived(
-		result.element_ports
-			.filter((port) => !['load', 'generator', 'ibr'].includes(port.kind))
-			.reduce((sum, port) => sum + port.power_into_element.re, 0)
-	);
 	let search = $state('');
 	let page = $state(0);
 	const size = 20;
+	let portPage = $state(0);
+	// Only the selected bus and one equipment page are fetched; the previous
+	// rows stay visible until the page for a new operating point arrives.
+	let current = $state.raw<McPfDetail | null>(null);
+	let requested = 0;
+	$effect(() => {
+		const fetchDetail = load;
+		const query: McPfDetailQuery = {
+			bus: busId || null,
+			element: edgeId || null,
+			port_offset: portPage * size,
+			port_limit: size
+		};
+		void result;
+		if (!fetchDetail) {
+			current = null;
+			return;
+		}
+		const seq = ++requested;
+		fetchDetail(query).then(
+			(next) => {
+				if (seq !== requested || !next) return;
+				if (next.element_port_total > 0 && query.port_offset! >= next.element_port_total) {
+					portPage = 0;
+					return;
+				}
+				current = next;
+			},
+			() => {}
+		);
+	});
+	const neutral = $derived(
+		current?.terminals.find((t) => t.bus === busId && t.terminal === neutralName)?.voltage
+	);
+	const sourcePower = $derived(summary.source_power_into_network);
+	const passiveLoss = $derived(summary.passive_loss.re);
 	const terminals = $derived(
-		result.terminals.filter(
+		(current?.terminals ?? []).filter(
 			(row) =>
 				(!busId || row.bus === busId) &&
 				`${row.bus} ${row.terminal}`.toLowerCase().includes(search.toLowerCase())
@@ -54,13 +97,13 @@
 	const pageCount = $derived(Math.max(1, Math.ceil(terminals.length / size)));
 	const currentPage = $derived(Math.min(page, pageCount - 1));
 	const visible = $derived(terminals.slice(currentPage * size, (currentPage + 1) * size));
-	const ports = $derived(result.element_ports.filter((row) => !edgeId || row.element === edgeId));
-	let portPage = $state(0);
-	const portPages = $derived(Math.max(1, Math.ceil(ports.length / size)));
+	const portTotal = $derived(current?.element_port_total ?? 0);
+	const portPages = $derived(Math.max(1, Math.ceil(portTotal / size)));
 	const currentPortPage = $derived(Math.min(portPage, portPages - 1));
-	const visiblePorts = $derived(ports.slice(currentPortPage * size, (currentPortPage + 1) * size));
+	const visiblePorts = $derived(current?.element_ports ?? []);
 	const magnitude = (value: McComplex) => Math.hypot(value.re, value.im);
 	const fixed = (value: number) => (Number.isFinite(value) ? value.toFixed(3) : '-');
+	const ms = (value: number | null) => (value === null ? '-' : `${value.toFixed(1)} ms`);
 	const angle = (value: McComplex) =>
 		magnitude(value) > 1e-12 ? ((Math.atan2(value.im, value.re) * 180) / Math.PI).toFixed(2) : '-';
 </script>
@@ -68,7 +111,7 @@
 <section aria-label="AC power flow results" class="mc-results">
 	<div class="result-heading">
 		<strong>AC power flow</strong><span
-			>{result.iterations} iterations{elapsedMs === null
+			>{summary.iterations} iterations{elapsedMs === null
 				? ''
 				: `, ${Math.round(elapsedMs)} ms`}</span
 		>
@@ -76,15 +119,15 @@
 	<dl class="totals">
 		<div>
 			<dt>Status</dt>
-			<dd>{result.converged ? 'Converged' : 'Not converged'}</dd>
+			<dd>{summary.converged ? 'Converged' : 'Not converged'}</dd>
 		</div>
 		<div>
 			<dt>Voltage band</dt>
-			<dd>{result.voltage_valid ? 'Valid' : `${result.voltage_violations.length} violations`}</dd>
+			<dd>{summary.voltage_valid ? 'Valid' : `${summary.voltage_violation_count} violations`}</dd>
 		</div>
 		<div>
 			<dt>Load voltage range</dt>
-			<dd>{result.min_voltage_pu == null || result.max_voltage_pu == null ? 'n/a' : `${fixed(result.min_voltage_pu)}–${fixed(result.max_voltage_pu)} pu`}</dd>
+			<dd>{summary.min_voltage_pu == null || summary.max_voltage_pu == null ? 'n/a' : `${fixed(summary.min_voltage_pu)}–${fixed(summary.max_voltage_pu)} pu`}</dd>
 		</div>
 		<div>
 			<dt>Source P / Q</dt>
@@ -212,7 +255,7 @@
 			</table>
 		</div>
 		<div class="pagination">
-			<span>{ports.length} connections</span>{#if portPages > 1}<button
+			<span>{portTotal} connections</span>{#if portPages > 1}<button
 					disabled={currentPortPage === 0}
 					onclick={() => (portPage = currentPortPage - 1)}
 					aria-label="Previous currents">Previous</button
@@ -228,28 +271,48 @@
 		<dl>
 			<div>
 				<dt>Maximum KCL residual</dt>
-				<dd>{result.physical_kcl_residual.toExponential(3)} A</dd>
+				<dd>{summary.physical_kcl_residual.toExponential(3)} A</dd>
 			</div>
 			<div>
 				<dt>Scaled KCL residual</dt>
-				<dd>{result.scaled_kcl_residual.toExponential(3)}</dd>
+				<dd>{summary.scaled_kcl_residual.toExponential(3)}</dd>
 			</div>
 			<div>
 				<dt>Voltage change</dt>
-				<dd>{result.voltage_change.toExponential(3)} V</dd>
+				<dd>{summary.voltage_change.toExponential(3)} V</dd>
 			</div>
 			<div>
 				<dt>Matrix size</dt>
-				<dd>{result.matrix_dimension}</dd>
+				<dd>{summary.matrix_dimension}</dd>
 			</div>
 			<div>
 				<dt>Nonzero entries</dt>
-				<dd>{result.matrix_nonzeros}</dd>
+				<dd>{summary.matrix_nonzeros}</dd>
 			</div>
 			<div>
 				<dt>Factorizations</dt>
-				<dd>{result.factorization_count}</dd>
+				<dd>{summary.factorization_count}</dd>
 			</div>
+			{#if timing}
+				<div>
+					<dt>Engine solve</dt>
+					<dd>{ms(timing.engine_ms)}</dd>
+				</div>
+				<div>
+					<dt>Transfer and parse</dt>
+					<dd>
+						{ms(
+							timing.engine_ms === null
+								? null
+								: timing.round_trip_ms - timing.engine_ms + timing.parse_ms
+						)}
+					</dd>
+				</div>
+				<div>
+					<dt>Total update</dt>
+					<dd>{ms(timing.total_ms)}</dd>
+				</div>
+			{/if}
 		</dl>
 		<p>
 			Voltage is measured to ground. Net current is the injection into the network. The calculation

package/dist/components/McResults.svelte.d.ts

@@ -1,6 +1,12 @@
-import type { McPfResult, DistGraph } from '@tellegen/engine';
+import { type DistGraph, type McPfDetail, type McPfDetailQuery, type McPfResult, type McPfSummary } from '@tellegen/engine';
+import type { McEditTiming } from '../state.svelte.js';
 type $$ComponentProps = {
-    result: McPfResult;
+    /** A live session's summary, or a stored full result. */
+    result: McPfSummary | McPfResult;
+    /** Fetches one bus's terminals and a page of equipment ports. A full
+     * `result` serves its own pages when this is omitted. */
+    detail?: (query: McPfDetailQuery) => Promise<McPfDetail | null>;
+    timing?: McEditTiming | null;
     elapsedMs: number | null;
     selectedBus: string | null;
     selectedEdge: string | null;

package/dist/components/ModelDetails.svelte

@@ -138,7 +138,7 @@
     display: grid;
     gap: 6px;
     margin: 12px 0;
-    font-size: 11px;
+    font-size: 13px;
   }
   input {
     min-width: 0;
@@ -158,7 +158,7 @@
   table {
     width: 100%;
     border-collapse: collapse;
-    font-size: 10px;
+    font-size: 12px;
   }
   caption {
     text-align: left;
@@ -194,7 +194,7 @@
     justify-content: space-between;
     gap: 8px;
     margin: 10px 0;
-    font-size: 10px;
+    font-size: 12px;
     color: var(--text-secondary);
   }
   button {
@@ -218,13 +218,13 @@
   }
   .references {
     margin-top: 12px;
-    font-size: 10px;
+    font-size: 12px;
   }
   .references dl > div {
     grid-template-columns: 42px minmax(0, 1fr);
   }
   code {
     overflow-wrap: anywhere;
-    font: 10px/1.5 var(--font-mono);
+    font: 12px/1.5 var(--font-mono);
   }
 </style>

package/dist/components/MulticonductorDetails.svelte

@@ -306,7 +306,7 @@
 
 	.tag {
 		margin: 0 0 10px;
-		font-size: 10px;
+		font-size: 12px;
 		color: var(--text-secondary);
 		letter-spacing: 0;
 		text-transform: uppercase;
@@ -353,7 +353,7 @@
 		background: color-mix(in srgb, var(--tc) 26%, transparent);
 		color: var(--ink);
 		font-family: var(--font-mono);
-		font-size: 11px;
+		font-size: 13px;
 	}
 
 	.term.grounded {
@@ -377,7 +377,7 @@
 		border-radius: 3px;
 		background: var(--bc);
 		color: #fff;
-		font-size: 10px;
+		font-size: 12px;
 		letter-spacing: 0;
 	}
 
@@ -389,7 +389,7 @@
 
 	.load-editor h4 {
 		margin: 0 0 8px;
-		font-size: 11px;
+		font-size: 13px;
 	}
 
 	.load-row {
@@ -404,7 +404,7 @@
 		display: flex;
 		flex-direction: column;
 		gap: 2px;
-		font-size: 9px;
+		font-size: 12px;
 		color: var(--text-secondary);
 	}
 
@@ -412,11 +412,11 @@
 		min-width: 0;
 		width: 100%;
 		box-sizing: border-box;
-		font: 10px var(--font-mono);
+		font: 12px var(--font-mono);
 	}
 
 	.load-row button {
-		font-size: 9px;
+		font-size: 12px;
 	}
 
 	/* The global stylesheet's .legend is the 6px color-ramp strip; its height
@@ -426,7 +426,7 @@
 		flex-direction: column;
 		gap: 4px;
 		margin-top: 12px;
-		font-size: 10px;
+		font-size: 12px;
 		color: var(--text-secondary);
 	}
 
@@ -469,7 +469,7 @@
 
 	.footnote {
 		margin: 8px 0 0;
-		font-size: 10px;
+		font-size: 12px;
 		color: var(--text-tertiary);
 		letter-spacing: 0;
 	}

package/dist/components/NotificationCenter.svelte

@@ -12,14 +12,16 @@
 	const observed = new WeakSet<object>();
 	$effect(() => {
 		const message = app.error;
+		const detail = app.errorDetail;
 		const revision = app.errorRevision;
 		const retry = app.errorRetry;
 		if (message)
 			untrack(() =>
 				notices.push({
 					kind: 'error',
-					title: errorNoticeTitle(message),
-					details: message,
+					// A message with its own detail is already written for people.
+					title: detail ? message : errorNoticeTitle(message),
+					details: detail ?? message,
 					retry: () => ctrl.retryError(),
 					canRetry: () =>
 						app.errorRevision === revision && app.error === message && app.errorRetry === retry