@selvajs/ui 6.5.1-beta.1 → 6.6.0-beta.12

package/dist/components/compute/ParameterPresetManager.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Download, Upload, AlertTriangle, CheckCircle } from '@lucide/svelte';
+	import { Upload } from '@lucide/svelte';
 	import type { UISchema, ParameterPreset } from '@selvajs/schemas';
 	import {
 		createSavedState,
@@ -8,18 +8,14 @@
 		exportStateAsJson,
 		importStateFromJson
 	} from '../../schema/param-exporter';
-	import { Button, Input, Label, Textarea, Dialog, Card, toast } from '../primitives';
-
-	import type { ActionButton } from '../../types/actionButton';
+	import { Button, Input, Label, Textarea, Dialog, Callout, IssueList, toast } from '../primitives';
 	import { DEFAULT_PRESET_LABELS, type PresetLabels } from '../../types/presetLabels';
+	import { pickFile } from '../../utils/host-files';
 
 	interface Props {
 		schema: UISchema;
 		currentValues: Record<string, unknown>;
 		onLoadValues: (values: Record<string, unknown>) => void;
-		showSaveButton?: boolean;
-		showLoadButton?: boolean;
-		actions?: ActionButton[];
 		/** When set, persist saved states via this callback instead of downloading a .slvp file. */
 		onSaveState?: (state: ParameterPreset) => void | Promise<void>;
 		/** When set, the Load dialog lists these states instead of showing a file input. */
@@ -28,17 +24,7 @@
 		labels?: Partial<PresetLabels>;
 	}
 
-	let {
-		schema,
-		currentValues,
-		onLoadValues,
-		showSaveButton = true,
-		showLoadButton = true,
-		actions = [],
-		onSaveState,
-		onListStates,
-		labels
-	}: Props = $props();
+	let { schema, currentValues, onLoadValues, onSaveState, onListStates, labels }: Props = $props();
 
 	const t = $derived({ ...DEFAULT_PRESET_LABELS, ...labels });
 
@@ -52,13 +38,13 @@
 	let showLoadDialog = $state(false);
 	let loadResult = $state<PresetLoadResult | null>(null);
 	let loadingPresetName = $state('');
-	let fileInputRef = $state<HTMLInputElement | null>(null);
 
 	let listedStates = $state<ParameterPreset[]>([]);
 	let isLoadingList = $state(false);
 	let listError = $state('');
 
-	function openExportDialog() {
+	/** Opens the save dialog. The panel footer's menu calls it. */
+	export function openSave() {
 		exportName = `State ${new Date().toLocaleDateString()}`;
 		exportDescription = '';
 		exportAuthor = schema.author || '';
@@ -83,7 +69,7 @@
 		});
 
 		if (onSaveState) await onSaveState(state);
-		else exportStateAsJson(state);
+		else await exportStateAsJson(state);
 		showExportDialog = false;
 	}
 
@@ -100,19 +86,16 @@
 		}
 	}
 
-	async function handleImport(event: Event) {
-		const input = event.target as HTMLInputElement;
-		if (!input.files || input.files.length === 0) return;
+	async function importFromFile() {
+		// .sps is the pre-rename extension; files with it exist on users' drives, so keep accepting it.
+		const file = await pickFile({ accept: '.slvp,.sps' });
+		if (!file) return;
 
 		try {
-			const imported = await importStateFromJson(input.files[0]);
-			tryLoad(imported);
+			tryLoad(await importStateFromJson(file));
 		} catch (error) {
 			toast.error(t.loadImportError + (error as Error).message);
 		}
-
-		// Reset so re-picking the same file fires `change` again.
-		input.value = '';
 	}
 
 	function confirmLoad() {
@@ -128,7 +111,8 @@
 		loadResult = null;
 	}
 
-	async function openLoadDialog() {
+	/** Opens the load dialog. The panel footer's menu calls it. */
+	export async function openLoad() {
 		showLoadDialog = true;
 		if (!onListStates) return;
 
@@ -145,8 +129,8 @@
 	}
 
 	function handleLoadClick() {
-		fileInputRef?.click();
 		showLoadDialog = false;
+		void importFromFile();
 	}
 
 	function selectListedState(preset: ParameterPreset) {
@@ -155,39 +139,6 @@
 	}
 </script>
 
-{#if showSaveButton}
-	<Button variant="default" size="sm" onclick={openExportDialog}>
-		<Download class="mr-2 h-4 w-4" />
-		{t.saveButton}
-	</Button>
-{/if}
-
-{#if showLoadButton}
-	<Button variant="outline" size="sm" onclick={openLoadDialog}>
-		<Upload class="mr-2 h-4 w-4" />
-		{t.loadButton}
-	</Button>
-{/if}
-
-{#each actions as action (action.id)}
-	<Button variant={action.variant ?? 'outline'} size={action.size ?? 'sm'} onclick={action.onclick}>
-		{#if action.icon}
-			{@const IconComponent = action.icon}
-			<IconComponent class="mr-2 h-4 w-4" />
-		{/if}
-		{action.label}
-	</Button>
-{/each}
-
-<!-- .sps is the pre-rename extension; files with it exist on users' drives, so keep accepting it. -->
-<input
-	bind:this={fileInputRef}
-	type="file"
-	accept=".slvp,.sps"
-	onchange={handleImport}
-	class="hidden"
-/>
-
 <!-- Save Dialog -->
 <Dialog.Root bind:open={showExportDialog}>
 	<Dialog.Content>
@@ -225,7 +176,7 @@
 
 		<Dialog.Footer>
 			<Button variant="outline" onclick={() => (showExportDialog = false)}>{t.cancelButton}</Button>
-			<Button onclick={handleExport}>{t.saveButton}</Button>
+			<Button onclick={handleExport}>{t.saveConfirmButton}</Button>
 		</Dialog.Footer>
 	</Dialog.Content>
 </Dialog.Root>
@@ -239,7 +190,7 @@
 		</Dialog.Header>
 
 		{#if onListStates}
-			<div class="py-4 max-h-[60vh] overflow-y-auto">
+			<div class="py-4">
 				{#if isLoadingList}
 					<p class="text-sm py-8 text-center text-muted-foreground">…</p>
 				{:else if listError}
@@ -283,7 +234,7 @@
 
 <!-- Validation Dialog -->
 <Dialog.Root bind:open={showValidationDialog}>
-	<Dialog.Content class="max-w-2xl max-h-[80vh] overflow-y-auto">
+	<Dialog.Content class="max-w-2xl">
 		<Dialog.Header>
 			<Dialog.Title>{t.validationTitle}</Dialog.Title>
 			<Dialog.Description>
@@ -296,75 +247,31 @@
 		{#if loadResult}
 			<div class="gap-4 py-4 grid">
 				{#if loadResult.isValid}
-					<Card.Root class="p-4 border-success/30 bg-success/5">
-						<div class="gap-3 flex items-start">
-							<CheckCircle class="h-5 w-5 text-success" />
-							<div>
-								<h4 class="text-sm font-semibold text-success-foreground">
-									{t.validationNoIssuesTitle}
-								</h4>
-								<p class="text-sm mt-1 text-success-foreground/80">
-									{t.validationNoIssuesBody}
-								</p>
-							</div>
-						</div>
-					</Card.Root>
+					<Callout tone="success" title={t.validationNoIssuesTitle}>
+						{t.validationNoIssuesBody}
+					</Callout>
 				{:else if loadResult.canLoad}
-					<Card.Root class="p-4 border-warning/30 bg-warning/5">
-						<div class="gap-3 flex items-start">
-							<AlertTriangle class="h-5 w-5 text-warning" />
-							<div>
-								<h4 class="text-sm font-semibold text-warning-foreground">
-									{t.validationWarningsTitle}
-								</h4>
-								<p class="text-sm mt-1 text-warning-foreground/80">
-									{t.validationWarningsBody.replace('{count}', String(loadResult.issues.length))}
-								</p>
-							</div>
-						</div>
-					</Card.Root>
+					<Callout tone="warning" title={t.validationWarningsTitle}>
+						{t.validationWarningsBody.replace('{count}', String(loadResult.issues.length))}
+					</Callout>
 				{:else}
-					<Card.Root class="p-4 border-destructive/30 bg-destructive/5">
-						<div class="gap-3 flex items-start">
-							<AlertTriangle class="h-5 w-5 text-destructive" />
-							<div>
-								<h4 class="text-sm font-semibold text-destructive">{t.validationErrorsTitle}</h4>
-								<p class="text-sm mt-1 text-destructive/80">
-									{t.validationErrorsBody}
-								</p>
-							</div>
-						</div>
-					</Card.Root>
+					<Callout tone="danger" title={t.validationErrorsTitle}>
+						{t.validationErrorsBody}
+					</Callout>
 				{/if}
 
 				{#if !loadResult.isValid}
-					<div class="space-y-2">
+					<div class="gap-2 flex flex-col">
 						<h4 class="text-sm font-medium">{t.validationIssuesHeading}</h4>
-						{#each loadResult.issues as issue (issue.message)}
-							<div
-								class="p-3 rounded-lg border {issue.severity === 'error'
-									? 'border-destructive/30 bg-destructive/5'
-									: 'border-warning/30 bg-warning/5'}"
-							>
-								<div class="gap-2 flex items-start">
-									<AlertTriangle
-										class="h-4 w-4 mt-0.5 {issue.severity === 'error'
-											? 'text-destructive'
-											: 'text-warning'}"
-									/>
-									<div class="flex-1">
-										<p class="text-sm font-medium">{issue.message}</p>
-										{#if issue.details}
-											<p class="text-xs mt-1 text-muted-foreground">
-												{t.validationExpected}
-												{issue.details.expected} → {t.validationActual}
-												{issue.details.actual}
-											</p>
-										{/if}
-									</div>
-								</div>
-							</div>
-						{/each}
+						<IssueList
+							issues={loadResult.issues.map((issue) => ({
+								severity: issue.severity === 'error' ? 'error' : 'warning',
+								message: issue.message,
+								detail: issue.details
+									? `${t.validationExpected} ${issue.details.expected} → ${t.validationActual} ${issue.details.actual}`
+									: undefined
+							}))}
+						/>
 					</div>
 				{/if}
 			</div>

package/dist/components/compute/ParameterPresetManager.svelte.d.ts

@@ -1,13 +1,9 @@
 import type { UISchema, ParameterPreset } from '@selvajs/schemas';
-import type { ActionButton } from '../../types/actionButton';
 import { type PresetLabels } from '../../types/presetLabels';
 interface Props {
     schema: UISchema;
     currentValues: Record<string, unknown>;
     onLoadValues: (values: Record<string, unknown>) => void;
-    showSaveButton?: boolean;
-    showLoadButton?: boolean;
-    actions?: ActionButton[];
     /** When set, persist saved states via this callback instead of downloading a .slvp file. */
     onSaveState?: (state: ParameterPreset) => void | Promise<void>;
     /** When set, the Load dialog lists these states instead of showing a file input. */
@@ -15,6 +11,9 @@ interface Props {
     /** Overrides merged over `DEFAULT_PRESET_LABELS`. */
     labels?: Partial<PresetLabels>;
 }
-declare const ParameterPresetManager: import("svelte").Component<Props, {}, "">;
+declare const ParameterPresetManager: import("svelte").Component<Props, {
+    openSave: () => void;
+    openLoad: () => Promise<void>;
+}, "">;
 type ParameterPresetManager = ReturnType<typeof ParameterPresetManager>;
 export default ParameterPresetManager;

package/dist/components/compute/SolveMessages.svelte

@@ -13,10 +13,13 @@
 	// anything, so it appears on its own after the solve and fades.
 
 	import { untrack } from 'svelte';
-	import { CircleAlert, TriangleAlert, Info, LoaderCircle } from '@lucide/svelte';
+	import { LoaderCircle } from '@lucide/svelte';
 	import type { SolveDiagnostic } from '@selvajs/solve/shared';
 	import type { LiveSolveState, SolvePhase } from '@selvajs/solve/client';
 	import { Button } from '../primitives/button';
+	import IssueList, { type Issue } from '../primitives/IssueList.svelte';
+	import SeverityIcon from '../primitives/SeverityIcon.svelte';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte';
 
 	interface Props {
 		/** What the running (or most recent) solve has said over the live channel. */
@@ -28,33 +31,15 @@
 		onabort: () => void;
 		onconfirm: () => void;
 		ondiscard: () => void;
-		labels?: Labels;
+		/**
+		 * See `createSolvingIndicator`. The live panel would only paint once the solve is over, so
+		 * an Esc hint stands in for it; the result's messages still show.
+		 */
+		freezesDuringSolve?: boolean;
+		/** `floating` overlays the bottom centre; `inline` sits in the flow below the host's content. */
+		placement?: 'floating' | 'inline';
 	}
 
-	interface Labels {
-		solving: string;
-		blockedTitle: string;
-		messagesTitle: string;
-		blockedDescription: string;
-		messagesDescription: string;
-		confirm: string;
-		discard: string;
-		abort: string;
-		dismiss: string;
-	}
-
-	const DEFAULT_LABELS: Labels = {
-		solving: 'Solving…',
-		blockedTitle: 'Solve stopped',
-		messagesTitle: 'Solve messages',
-		blockedDescription: 'The definition stopped this solve. No results were produced.',
-		messagesDescription: 'This solve reported the following. Continue to see the result.',
-		confirm: 'Continue',
-		discard: 'Discard',
-		abort: 'Abort',
-		dismiss: 'Dismiss'
-	};
-
 	let {
 		live,
 		phase: sessionPhase,
@@ -62,9 +47,13 @@
 		onabort,
 		onconfirm,
 		ondiscard,
-		labels = DEFAULT_LABELS
+		freezesDuringSolve = false,
+		placement = 'floating'
 	}: Props = $props();
 
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
 	const REMARK_LINGER_MS = 6000;
 
 	const progress = $derived([...live.progress.values()]);
@@ -137,16 +126,30 @@
 	// Keyed on the diagnostics array's identity, which every report renews, rather than on a
 	// solve id: only the live channel has one, and on the Compute path remarks arrive with the
 	// result. Once per array, so remarks that sat behind a review do not reappear after Continue.
+	//
+	// A remark is shown once while it stays raised, not after every solve. Every report repeats
+	// it: Grasshopper keeps runtime messages on a Message component an input change did not
+	// reach, and Compute re-solves the whole definition. It shows again once a solve stops
+	// raising it and a later one raises it anew.
 	let lingering = $state(false);
 	let lingeredFor: SolveDiagnostic[] | null = null;
+	let shownRemarks: ReadonlySet<string> = new Set();
+	let freshRemarks = $state.raw<SolveDiagnostic[]>([]);
+	const remarkKey = (d: SolveDiagnostic) => `${d.source ?? ''}\u0000${d.message}`;
 	$effect(() => {
 		if (phase === 'live') {
 			lingering = false;
 			return;
 		}
-		if (authoredRemarks.length === 0 || lingeredFor === diagnostics) return;
+		if (lingeredFor === diagnostics) return;
 		lingeredFor = diagnostics;
-		if (phase !== 'idle') return;
+		const raised = authoredRemarks.map(remarkKey);
+		const stillShown = raised.filter((k) => shownRemarks.has(k));
+		const fresh = authoredRemarks.filter((d) => !shownRemarks.has(remarkKey(d)));
+		const showNow = phase === 'idle' && fresh.length > 0;
+		shownRemarks = new Set(showNow ? [...stillShown, ...fresh.map(remarkKey)] : stillShown);
+		if (!showNow) return;
+		freshRemarks = fresh;
 		lingering = true;
 		const timer = setTimeout(() => (lingering = false), REMARK_LINGER_MS);
 		return () => clearTimeout(timer);
@@ -165,6 +168,7 @@
 	$effect(() => {
 		if (phase === 'live') {
 			finishing = false;
+			if (freezesDuringSolve) return;
 			const timer = setTimeout(() => {
 				revealed = true;
 				revealedAt = performance.now();
@@ -191,7 +195,16 @@
 	// While solving, the live channel is all there is. Once the result lands it is authoritative
 	// — it carries remarks too — so the live list is dropped entirely and nothing is shown twice.
 	const rows = $derived<SolveDiagnostic[]>(
-		view === 'live' ? [...live.diagnostics] : view === 'idle' ? authoredRemarks : authoredGating
+		view === 'live' ? [...live.diagnostics] : view === 'idle' ? freshRemarks : authoredGating
+	);
+
+	// A remark states something without asking anything, so it reads as a quiet note.
+	const issues = $derived<Issue[]>(
+		rows.map((d) => ({
+			severity: d.level === 'remark' ? 'note' : d.level,
+			message: d.message,
+			source: d.source
+		}))
 	);
 
 	// Steps a few milliseconds long would swap the headline faster than it can be read. Each one
@@ -228,28 +241,59 @@
 				: rows.length > 0 && lingering
 	);
 
+	// What a screen reader hears of the passive views, through a region that outlives the panel: one
+	// created together with its text is not announced. The step name, not its counter, so a long
+	// solve announces each step rather than every tick. Review and blocked are alerts of their own.
+	const announcement = $derived(
+		!visible
+			? ''
+			: view === 'live'
+				? ((headline ?? progress[0])?.label ?? t.solveSolving)
+				: view === 'idle'
+					? rows.map((d) => d.message).join(' ')
+					: ''
+	);
+
 	function dismiss() {
 		dismissedFor = diagnostics;
 	}
 
 	// Escape resolves to the safe side — discard, keeping what is on screen — never to silently
-	// applying a result the user has not accepted.
+	// applying a result the user has not accepted. A frozen host gets no keydown until the solve
+	// ends; there the plugin aborts on the key state, which only counts while Rhino is in front, so
+	// a browser tab (local or Compute) has to abort from the page.
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key !== 'Escape') return;
-		if (phase === 'review') ondiscard();
+		if (phase === 'live') {
+			if (!freezesDuringSolve) onabort();
+		} else if (phase === 'review') ondiscard();
 		else if (phase === 'blocked') dismiss();
 	}
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
-{#if visible}
+<div class="sr-only" role="status" aria-live="polite">{announcement}</div>
+
+{#if freezesDuringSolve && view === 'live'}
+	<!-- Painted before the solve takes the thread; Abort could not be clicked until it ends. Inline,
+	     the solving chip carries the hint instead: a line here would resize the footer mid-solve. -->
+	{#if placement === 'floating'}
+		<p
+			class="bottom-4 text-xs fixed left-1/2 z-50 -translate-x-1/2 text-muted-foreground"
+			data-testid="solve-esc-hint"
+		>
+			{t.solveMessagesEscHint}
+		</p>
+	{/if}
+{:else if visible}
+	<!-- Inline, it is a row of the host's footer like the Calculate row under it, not a card: a
+	     framed box inside an edge-to-edge column reads as a dialog glued into the page. -->
 	<div
-		class="bottom-4 p-3 shadow-lg fixed left-1/2 z-50 w-[min(32rem,calc(100vw-2rem))] -translate-x-1/2 rounded-lg border bg-background {view ===
-		'blocked'
-			? 'border-destructive/50'
-			: ''}"
-		role={view === 'live' || view === 'idle' ? 'status' : 'alert'}
+		class={placement === 'inline'
+			? `px-2 py-2 border-t ${view === 'blocked' ? 'border-destructive/40' : 'border-border/50'}`
+			: `p-3 bottom-4 shadow-lg w-lg fixed left-1/2 z-50 max-w-screen-inset -translate-x-1/2 rounded-lg border bg-background ${view === 'blocked' ? 'border-destructive/50' : ''}`}
+		role={view === 'review' || view === 'blocked' ? 'alert' : undefined}
 		data-testid="solve-messages"
 		data-view={view}
 	>
@@ -259,7 +303,7 @@
 				<div>
 					<div class="gap-2 flex items-center">
 						<LoaderCircle class="h-4 w-4 animate-spin shrink-0 text-muted-foreground" />
-						<span class="min-w-0 text-sm flex-1 truncate">{head?.label ?? labels.solving}</span>
+						<span class="min-w-0 text-sm flex-1 truncate">{head?.label ?? t.solveSolving}</span>
 						{#if head?.done !== undefined && head?.total !== undefined}
 							<span class="text-xs shrink-0 text-muted-foreground tabular-nums">
 								{head.done} / {head.total}
@@ -267,12 +311,17 @@
 						{/if}
 						<Button
 							variant="secondary"
-							size="sm"
-							class="-my-1 h-7 px-3 text-xs shrink-0"
+							size="xs"
+							class="-my-1 shrink-0"
 							disabled={finishing}
 							onclick={onabort}
+							aria-keyshortcuts="Escape"
+							title={t.solveMessagesEscHint}
 						>
-							{labels.abort}
+							{t.solveMessagesAbort}
+							<kbd class="px-1 font-sans rounded border border-border/60 text-2xs opacity-70">
+								Esc
+							</kbd>
 						</Button>
 					</div>
 					{#each progress as p, i (p.source ?? '')}
@@ -289,7 +338,7 @@
 							<div
 								class="h-1 overflow-hidden rounded-full bg-muted"
 								role="progressbar"
-								aria-label={p.label ?? p.source ?? labels.solving}
+								aria-label={p.label ?? p.source ?? t.solveSolving}
 								aria-valuemin={0}
 								aria-valuemax={100}
 								aria-valuenow={p.fraction !== undefined ? Math.round(p.fraction * 100) : undefined}
@@ -299,8 +348,9 @@
 										? { width: 1, ms: FINISH_MS }
 										: (bars[p.source ?? ''] ?? { width: p.fraction, ms: 150 })}
 									<div
-										class="h-full rounded-full bg-primary transition-[width] ease-linear"
-										style="width: {bar.width * 100}%; transition-duration: {bar.ms}ms"
+										class="h-full w-(--bar-width) rounded-full bg-primary transition-all duration-(--bar-ms) ease-linear"
+										style:--bar-width="{bar.width * 100}%"
+										style:--bar-ms="{bar.ms}ms"
 									></div>
 								{:else}
 									<div class="animate-pulse h-full w-1/3 rounded-full bg-primary/60"></div>
@@ -310,56 +360,60 @@
 					{/each}
 				</div>
 			</div>
+		{:else if (view === 'review' || view === 'blocked') && placement === 'inline'}
+			<!-- Each message carries its own icon, so the label goes without one; the buttons share
+			     its row rather than adding one under a single line of text. -->
+			<div class="mb-1.5 gap-2 flex items-center">
+				<span
+					class="min-w-0 text-xs font-medium flex-1 truncate {view === 'blocked'
+						? 'text-destructive'
+						: 'text-muted-foreground'}"
+				>
+					{view === 'blocked' ? t.solveBlockedTitle : t.solveMessagesTitle}
+				</span>
+				{#if view === 'blocked'}
+					<Button variant="ghost" size="xs" class="-my-1 shrink-0" onclick={dismiss}>
+						{t.solveMessagesDismiss}
+					</Button>
+				{:else}
+					<Button variant="ghost" size="xs" class="-my-1 shrink-0" onclick={ondiscard}>
+						{t.solveMessagesDiscard}
+					</Button>
+					<Button size="xs" class="-my-1 shrink-0" onclick={onconfirm}>
+						{t.solveMessagesConfirm}
+					</Button>
+				{/if}
+			</div>
 		{:else if view === 'review' || view === 'blocked'}
 			<div class="mb-2">
 				<div class="gap-2 text-sm font-medium flex items-center">
 					{#if view === 'blocked'}
-						<CircleAlert class="h-4 w-4 shrink-0 text-destructive" />
-						{labels.blockedTitle}
+						<SeverityIcon severity="error" />
+						{t.solveBlockedTitle}
 					{:else}
-						<TriangleAlert class="h-4 w-4 text-amber-500 shrink-0" />
-						{labels.messagesTitle}
+						<SeverityIcon severity="warning" />
+						{t.solveMessagesTitle}
 					{/if}
 				</div>
 				<p class="text-xs text-muted-foreground">
-					{view === 'blocked' ? labels.blockedDescription : labels.messagesDescription}
+					{view === 'blocked' ? t.solveBlocked : t.solveMessagesDescription}
 				</p>
 			</div>
 		{/if}
 
 		{#if rows.length > 0}
-			<ul
-				class="max-h-40 space-y-2 text-sm overflow-y-auto {view === 'live'
-					? 'mt-3 pt-3 border-t'
-					: ''}"
-			>
-				{#each rows as row, i (i)}
-					<li class="gap-2 flex">
-						{#if row.level === 'error'}
-							<CircleAlert class="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
-						{:else if row.level === 'warning'}
-							<TriangleAlert class="mt-0.5 h-4 w-4 text-amber-500 shrink-0" />
-						{:else}
-							<Info class="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
-						{/if}
-						<div class="min-w-0 flex-1">
-							<p class="wrap-anywhere">{row.message}</p>
-							{#if row.source}
-								<p class="text-xs text-muted-foreground">{row.source}</p>
-							{/if}
-						</div>
-					</li>
-				{/each}
-			</ul>
+			<div class="max-h-40 overflow-y-auto {view === 'live' ? 'mt-3 pt-3 border-t' : ''}">
+				<IssueList {issues} variant="plain" />
+			</div>
 		{/if}
 
-		{#if view === 'review' || view === 'blocked'}
+		{#if (view === 'review' || view === 'blocked') && placement === 'floating'}
 			<div class="mt-3 gap-2 flex justify-end">
 				{#if view === 'blocked'}
-					<Button variant="outline" size="sm" onclick={dismiss}>{labels.dismiss}</Button>
+					<Button variant="outline" size="sm" onclick={dismiss}>{t.solveMessagesDismiss}</Button>
 				{:else}
-					<Button variant="outline" size="sm" onclick={ondiscard}>{labels.discard}</Button>
-					<Button size="sm" onclick={onconfirm}>{labels.confirm}</Button>
+					<Button variant="outline" size="sm" onclick={ondiscard}>{t.solveMessagesDiscard}</Button>
+					<Button size="sm" onclick={onconfirm}>{t.solveMessagesConfirm}</Button>
 				{/if}
 			</div>
 		{/if}

package/dist/components/compute/SolveMessages.svelte.d.ts

@@ -1,16 +1,5 @@
 import type { SolveDiagnostic } from '@selvajs/solve/shared';
 import type { LiveSolveState, SolvePhase } from '@selvajs/solve/client';
-interface Labels {
-    solving: string;
-    blockedTitle: string;
-    messagesTitle: string;
-    blockedDescription: string;
-    messagesDescription: string;
-    confirm: string;
-    discard: string;
-    abort: string;
-    dismiss: string;
-}
 interface Props {
     /** What the running (or most recent) solve has said over the live channel. */
     live: LiveSolveState;
@@ -21,7 +10,13 @@ interface Props {
     onabort: () => void;
     onconfirm: () => void;
     ondiscard: () => void;
-    labels?: Labels;
+    /**
+     * See `createSolvingIndicator`. The live panel would only paint once the solve is over, so
+     * an Esc hint stands in for it; the result's messages still show.
+     */
+    freezesDuringSolve?: boolean;
+    /** `floating` overlays the bottom centre; `inline` sits in the flow below the host's content. */
+    placement?: 'floating' | 'inline';
 }
 declare const SolveMessages: import("svelte").Component<Props, {}, "">;
 type SolveMessages = ReturnType<typeof SolveMessages>;