@selvajs/ui 6.6.0-beta.9 → 7.0.0

package/src/lib/components/compute/AppLayout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { UISchema, SupportedTypes, ParameterPreset } from '@selvajs/schemas';
-	import type { SolveSettlement } from '@selvajs/solve/client';
+	import type { LiveSolveState, SolveSettlement } from '@selvajs/solve/client';
 	import type { ActionButton } from '../../types/actionButton';
 	import type { PresetLabels } from '../../types/presetLabels';
 	import { ChevronUp, Download, Ellipsis, Upload } from '@lucide/svelte';
@@ -11,9 +11,9 @@
 	import SolvingIndicator from '../primitives/SolvingIndicator.svelte';
 	import TabLayout from '../preview/TabLayout.svelte';
 	import CollapsedPanelStrip from './CollapsedPanelStrip.svelte';
-	import * as Resizable from '$lib/components/primitives/resizable';
-	import * as DropdownMenu from '$lib/components/primitives/dropdown-menu/index.js';
-	import { Button } from '$lib';
+	import * as Resizable from '#lib/components/primitives/resizable/index.js';
+	import * as DropdownMenu from '#lib/components/primitives/dropdown-menu/index.js';
+	import { Button } from '#lib';
 	import ParameterPresetManager from './ParameterPresetManager.svelte';
 	import { runPanelAction } from '../../compute/run-panel-action';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
@@ -34,8 +34,20 @@
 		showViewer: boolean;
 		meshes?: any[];
 		isSolving: boolean;
+		/**
+		 * `createSolvingIndicator(...).show`, not `isSolving`: grows the action row's solve status,
+		 * which would otherwise flash on every sub-second solve.
+		 */
 		showSolvingIndicator?: boolean;
-		/** `SolvingIndicator`'s `placement`; `inline` puts it in the action row. */
+		/** `createSolvingIndicator(...).slow`: the solve status grows into a card with progress. */
+		solveIsSlow?: boolean;
+		/** The session's live channel: step, count and bar for that card. */
+		live?: LiveSolveState;
+		/** Abort in that card. The host's `SolveMessages` should then take `progressShownByHost`. */
+		onabort?: () => void;
+		/** As passed to `createSolvingIndicator`. */
+		freezesDuringSolve?: boolean;
+		/** @deprecated Ignored: the solving status always sits in the action row. */
 		solvingIndicatorPlacement?: 'floating' | 'inline';
 		/** Rendered above the action row, for a host that keeps the solve's messages in the flow. */
 		solveMessages?: Snippet;
@@ -68,7 +80,10 @@
 		meshes = [],
 		isSolving,
 		showSolvingIndicator = false,
-		solvingIndicatorPlacement = 'floating',
+		solveIsSlow = false,
+		live,
+		onabort,
+		freezesDuringSolve = false,
 		solveMessages,
 		hasPendingChanges = false,
 		hasNeverSolved = false,
@@ -150,6 +165,14 @@
 		return () => mqMobile.removeEventListener('change', update);
 	});
 
+	// Without a viewer there's nothing to sit beside, so a narrow host (a docked Rhino panel) gets
+	// the phone's single edge-to-edge column instead of a card floating in its own margins.
+	const STACK_BELOW_WIDTH = 900;
+	let rootWidth = $state(0);
+	const stacked = $derived(
+		isMobile || (!hasViewer && rootWidth > 0 && rootWidth < STACK_BELOW_WIDTH)
+	);
+
 	let leftCollapsed = $state(false);
 	let rightCollapsed = $state(false);
 	let leftPaneRef = $state<{ expand: () => void } | null>(null);
@@ -255,9 +278,9 @@
 <!-- One primary action and one menu. A definition that solves on every change has no Calculate,
      so the menu sits alone at the end of the row. -->
 {#snippet footer()}
-	{#if solveMessages}
-		<div class="px-2">{@render solveMessages()}</div>
-	{/if}
+	<!-- No wrapper: it would always render (the messages' live region is never empty) and pick up
+	     the drawer footer's row padding, leaving a gap above Calculate with nothing in it. -->
+	{@render solveMessages?.()}
 	{#if schema.instanceSolve === false}
 		<CalculateButton
 			{hasPendingChanges}
@@ -266,13 +289,18 @@
 			{oncalculate}
 			trailing={hasMenu ? actionsMenu : undefined}
 		/>
-	{:else if hasMenu || solvingIndicatorPlacement === 'inline'}
-		<div class="mt-3 pb-3 pt-2 px-2 gap-2 flex items-center border-t border-border/50">
-			{#if solvingIndicatorPlacement === 'inline'}
-				<SolvingIndicator show={showSolvingIndicator} placement="inline" />
-			{/if}
+	{:else}
+		<div class="mt-3 pb-3 pt-2 px-2 gap-2 flex items-center border-t border-border">
+			<SolvingIndicator
+				{isSolving}
+				show={showSolvingIndicator}
+				slow={solveIsSlow}
+				{live}
+				{onabort}
+				{freezesDuringSolve}
+			/>
 			{#if hasMenu}
-				<div class="ml-auto">{@render actionsMenu()}</div>
+				{@render actionsMenu()}
 			{/if}
 		</div>
 	{/if}
@@ -287,9 +315,9 @@
 )}
 	<div class="panel-content-wrapper">
 		{#if schema.layout.type === 'tabbed'}
-			<TabLayout {schema} {values} {onValueChange} {panelFilter} {requestedTabId} bare={isMobile} />
+			<TabLayout {schema} {values} {onValueChange} {panelFilter} {requestedTabId} bare={stacked} />
 		{/if}
-		{#if hostsFooter && !isMobile}
+		{#if hostsFooter && !stacked}
 			<div class="panel-footer px-1">
 				{@render footer()}
 			</div>
@@ -306,15 +334,16 @@
 
 <main
 	data-layout-root
-	class="min-h-0 sm:flex-row sm:py-(--page-py) flex flex-1 flex-col overflow-hidden {leftCollapsed
-		? 'sm:pl-0'
-		: 'sm:pl-(--page-px)'} {rightCollapsed ? 'sm:pr-0' : 'sm:pr-(--page-px)'}"
+	class="min-h-0 flex flex-1 flex-col overflow-hidden {stacked
+		? ''
+		: `sm:flex-row sm:py-2 ${leftCollapsed ? 'sm:pl-0' : 'sm:pl-2'} ${rightCollapsed ? 'sm:pr-0' : 'sm:pr-2'}`}"
 	class:fullscreen-layout={isViewerFullscreen}
 	class:relative={isMobile}
-	class:mobile-root={isMobile}
+	class:mobile-root={stacked}
+	bind:clientWidth={rootWidth}
 >
-	{#if isMobile}
-		{#if hasViewer}
+	{#if stacked}
+		{#if isMobile && hasViewer}
 			<!-- Ends above the drawer rather than behind it, so the model stays centred in what is
 			     visible. It jumps straight to its new size: animating it would resize the canvas,
 			     and its render targets, on every frame of the drawer's slide. -->
@@ -322,20 +351,20 @@
 				<Viewer
 					{meshes}
 					bind:isFullscreen={isViewerFullscreen}
-					{isSolving}
 					drawerOpen={drawer === 'full'}
 					{logoUrl}
 					{onViewerReady}
 					viewerConfig={{
 						...viewerConfig,
-						backgroundColor: schema?.viewerOptions?.backgroundColor,
+						backgroundColor: schema?.viewerOptions?.backgroundColor ?? viewerConfig.backgroundColor,
+						look: schema?.viewerOptions?.look ?? viewerConfig.look,
 						showSceneManager: false
 					}}
 				/>
 			</div>
 
 			<div
-				class="drawer-container rounded-t-2xl z-40 border-t bg-background shadow-sheet drawer-{drawer}"
+				class="drawer-container z-40 rounded-t-xl border-t bg-background shadow-sheet drawer-{drawer}"
 			>
 				<!-- Named by its visible label; aria-expanded carries the open/closed state. -->
 				<button
@@ -381,7 +410,7 @@
 			</div>
 		{:else}
 			<div class="flex flex-1 flex-col overflow-hidden">
-				<div class="px-3 pt-3 flex-1 overflow-y-auto">
+				<div class="px-3 pt-3 sm:px-5 flex-1 overflow-y-auto">
 					{#if hasLeftPanel}
 						{@render panelContent(hasRightPanel ? 'left' : undefined, requestedLeftTabId, false)}
 					{/if}
@@ -401,7 +430,7 @@
 		{/if}
 	{:else if !hasViewer && !isTwoPanelMode && hasLeftPanel !== hasRightPanel}
 		<!-- Single centered panel (left-only or right-only), no viewer -->
-		<div class="min-h-0 flex h-full flex-1 justify-center">
+		<div class="min-h-0 p-1 flex h-full flex-1 justify-center">
 			<div class="min-h-0 flex h-full w-4/5 flex-col">
 				{@render panelContent(
 					hasRightPanel ? 'right' : undefined,
@@ -428,7 +457,7 @@
 			<Resizable.PaneGroup
 				direction="horizontal"
 				autoSaveId="selva-layout-{layoutKey}"
-				class="min-h-0 flex-1"
+				class="min-h-0 m-1 flex-1"
 			>
 				{#if hasLeftPanel}
 					<Resizable.Pane
@@ -441,7 +470,6 @@
 						collapsedSize={0}
 						onCollapse={() => (leftCollapsed = true)}
 						onExpand={() => (leftCollapsed = false)}
-						class="ml-1"
 					>
 						<div
 							class="min-h-0 flex h-full flex-col {isViewerFullscreen || leftCollapsed
@@ -454,6 +482,7 @@
 					<Resizable.Handle
 						withHandle
 						line={false}
+						class="translate-x-1.5 z-20"
 						data-collapsed={leftCollapsed}
 						onclick={() => {
 							if (leftCollapsed) leftPaneRef?.expand();
@@ -462,30 +491,34 @@
 				{/if}
 
 				{#if hasViewer}
-					<Resizable.Pane order={2} minSize={20} class="min-h-0 mx-1 flex flex-col">
+					<Resizable.Pane order={2} minSize={20} class="min-h-0 flex flex-col">
 						<Viewer
 							{meshes}
 							bind:isFullscreen={isViewerFullscreen}
-							{isSolving}
 							{logoUrl}
 							{onViewerReady}
 							viewerConfig={{
 								...viewerConfig,
-								backgroundColor: schema?.viewerOptions?.backgroundColor
+								backgroundColor:
+									schema?.viewerOptions?.backgroundColor ?? viewerConfig.backgroundColor,
+								look: schema?.viewerOptions?.look ?? viewerConfig.look
 							}}
 						/>
 					</Resizable.Pane>
 				{/if}
 
 				{#if hasRightPanel}
-					<Resizable.Handle
-						withHandle
-						line={false}
-						data-collapsed={rightCollapsed}
-						onclick={() => {
-							if (rightCollapsed) rightPaneRef?.expand();
-						}}
-					/>
+					{#if hasViewer || !hasLeftPanel}
+						<Resizable.Handle
+							withHandle
+							line={false}
+							class="-translate-x-1.5 z-20"
+							data-collapsed={rightCollapsed}
+							onclick={() => {
+								if (rightCollapsed) rightPaneRef?.expand();
+							}}
+						/>
+					{/if}
 					<Resizable.Pane
 						bind:this={rightPaneRef}
 						order={3}
@@ -496,7 +529,6 @@
 						collapsedSize={0}
 						onCollapse={() => (rightCollapsed = true)}
 						onExpand={() => (rightCollapsed = false)}
-						class="mr-1"
 					>
 						<div
 							class="min-h-0 flex h-full flex-col {isViewerFullscreen || rightCollapsed
@@ -523,10 +555,6 @@
 			{/if}
 		</div>
 	{/if}
-
-	{#if solvingIndicatorPlacement === 'floating'}
-		<SolvingIndicator show={showSolvingIndicator} />
-	{/if}
 </main>
 
 <!-- The save, load and validation dialogs; the footer's menu opens them. -->

package/src/lib/components/compute/CollapsedPanelStrip.svelte

@@ -20,12 +20,14 @@
 		[
 			'gap-1 py-2 lg:py-3 lg:flex-col lg:w-auto px-2 lg:px-0',
 			'flex w-full shrink-0 flex-row items-center',
-			'backdrop-blur-sm bg-background/90 cursor-pointer'
+			'backdrop-blur-sm bg-background/90 cursor-pointer',
+			side === 'left' ? 'lg:border-r' : 'lg:border-l',
+			'border-border'
 		].join(' ')
 	);
 
 	const tabButtonClass =
-		'w-8 h-8 rounded cursor-pointer flex shrink-0 items-center justify-center text-muted-foreground transition-colors hover:bg-accent hover:text-foreground';
+		'w-8 h-8 rounded-md cursor-pointer flex shrink-0 items-center justify-center text-muted-foreground transition-colors hover:bg-hover hover:text-foreground';
 </script>
 
 <div

package/src/lib/components/compute/ComputeApp.svelte

@@ -57,7 +57,7 @@
 		footerText?: string;
 		/**
 		 * How long one solve may take before the client aborts it (ms). Pass the same value the
-		 * server enforces (`COMPUTE_SOLVE_DEADLINE_MS`), or the client aborts solves that would
+		 * server enforces for this definition's compute server, or the client aborts solves that would
 		 * have finished.
 		 */
 		solveDeadlineMs: number;
@@ -286,7 +286,10 @@
 					showViewer={!!schema.viewerOptions?.enableRemote}
 					meshes={session.meshes}
 					isSolving={session.isSolving}
-					showSolvingIndicator={schema.instanceSolve !== false && solvingIndicator.show}
+					showSolvingIndicator={solvingIndicator.show}
+					solveIsSlow={solvingIndicator.slow}
+					live={session.live}
+					onabort={() => session.abort()}
 					hasPendingChanges={session.hasPendingChanges}
 					hasNeverSolved={session.hasNeverSolved}
 					bind:isViewerFullscreen
@@ -317,4 +320,5 @@
 	onabort={() => session.abort()}
 	onconfirm={() => session.acknowledge()}
 	ondiscard={() => session.discard()}
+	progressShownByHost={schema?.instanceSolve !== false}
 />

package/src/lib/components/compute/ComputeMessagesDialog.svelte

@@ -8,10 +8,10 @@
 
 	import type { Snippet } from 'svelte';
 	import type { SolveDiagnostic } from '@selvajs/solve/shared';
-	import * as Dialog from '$lib/components/primitives/dialog';
-	import IssueList, { type Issue } from '$lib/components/primitives/IssueList.svelte';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
-	import { formatCount } from '$lib/i18n/messages';
+	import * as Dialog from '#lib/components/primitives/dialog/index.js';
+	import IssueList, { type Issue } from '#lib/components/primitives/IssueList.svelte';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { formatCount } from '#lib/i18n/messages.js';
 
 	interface Props {
 		/** The last solve's messages. Preferred over `errors`/`warnings` when both are given. */

package/src/lib/components/compute/ParameterPresetManager.svelte

@@ -203,7 +203,7 @@
 							<button
 								type="button"
 								onclick={() => selectListedState(preset)}
-								class="p-3 w-full rounded-lg border text-left transition-colors hover:bg-muted"
+								class="p-3 w-full rounded-lg border text-left transition-colors hover:bg-hover"
 							>
 								<div class="text-sm font-medium">{preset.name}</div>
 								{#if preset.description}

package/src/lib/components/compute/SolveMessages.svelte

@@ -16,10 +16,11 @@
 	import { LoaderCircle } from '@lucide/svelte';
 	import type { SolveDiagnostic } from '@selvajs/solve/shared';
 	import type { LiveSolveState, SolvePhase } from '@selvajs/solve/client';
-	import { Button } from '$lib/components/primitives/button';
-	import IssueList, { type Issue } from '$lib/components/primitives/IssueList.svelte';
-	import SeverityIcon from '$lib/components/primitives/SeverityIcon.svelte';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { Button } from '#lib/components/primitives/button/index.js';
+	import IssueList, { type Issue } from '#lib/components/primitives/IssueList.svelte';
+	import SeverityIcon from '#lib/components/primitives/SeverityIcon.svelte';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { createLiveProgress } from '#lib/compute/liveProgress.svelte.js';
 
 	interface Props {
 		/** What the running (or most recent) solve has said over the live channel. */
@@ -38,6 +39,11 @@
 		freezesDuringSolve?: boolean;
 		/** `floating` overlays the bottom centre; `inline` sits in the flow below the host's content. */
 		placement?: 'floating' | 'inline';
+		/**
+		 * The host shows progress and Abort itself (`AppLayout`'s solve status), so the live view
+		 * keeps only the messages that arrive mid-solve.
+		 */
+		progressShownByHost?: boolean;
 	}
 
 	let {
@@ -48,7 +54,8 @@
 		onconfirm,
 		ondiscard,
 		freezesDuringSolve = false,
-		placement = 'floating'
+		placement = 'floating',
+		progressShownByHost = false
 	}: Props = $props();
 
 	const locale = getLocaleContext();
@@ -56,50 +63,10 @@
 
 	const REMARK_LINGER_MS = 6000;
 
-	const progress = $derived([...live.progress.values()]);
-
-	// A report only arrives when a step starts, so a bar that just shows `fraction` stands still
-	// through the step and then jumps. When the plugin knows how long the step took last time, the
-	// bar runs linearly to where the step will end, over that time. Steps are weighted by time, so
-	// linear gives one steady speed across the solve; any easing curve visibly speeds up and
-	// crawls within each step. A slower run waits at the step's end; a faster one snaps ahead.
-	let bars = $state.raw<Record<string, { width: number; ms: number }>>({});
-	// Any live event re-runs the effect below. Only a source with a new report may re-snap;
-	// the rest keep easing where they are.
-	let seen = new Map<string, unknown>();
-	let targets: Record<string, { width: number; ms: number }> = {};
-	$effect(() => {
-		const snapped: Record<string, { width: number; ms: number }> = {};
-		const eased: Record<string, { width: number; ms: number }> = {};
-		const current = untrack(() => bars);
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- bookkeeping for this effect; reactive reads here would re-trigger it
-		const nextSeen = new Map<string, unknown>();
-		for (const p of progress) {
-			if (p.fraction === undefined) continue;
-			const key = p.source ?? '';
-			nextSeen.set(key, p);
-			if (seen.get(key) === p && current[key]) {
-				snapped[key] = current[key];
-				// This run's cleanup cancelled the frame that would have started the ease.
-				if (targets[key] && current[key] !== targets[key]) eased[key] = targets[key];
-				continue;
-			}
-			snapped[key] = { width: p.fraction, ms: 150 };
-			if (p.nextFraction !== undefined && p.stepMs !== undefined) {
-				eased[key] = { width: p.nextFraction, ms: p.stepMs };
-			}
-		}
-		seen = nextSeen;
-		targets = eased;
-		bars = snapped;
-		if (Object.keys(eased).length === 0) return;
-		// Two frames: the snapped width must be painted before the eased one is set, or the
-		// browser folds both into one style change and there is nothing to transition from.
-		let frame = requestAnimationFrame(() => {
-			frame = requestAnimationFrame(() => (bars = { ...snapped, ...eased }));
-		});
-		return () => cancelAnimationFrame(frame);
-	});
+	const liveProgress = createLiveProgress(() => live);
+	const progress = $derived(liveProgress.progress);
+	const bars = $derived(liveProgress.bars);
+	const headline = $derived(liveProgress.headline);
 	// Grasshopper's own complaints stay in the footer log; this panel shows what the author wrote.
 	const authored = $derived(diagnostics.filter((d) => d.isGate));
 
@@ -126,16 +93,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);
@@ -181,7 +162,7 @@
 	// 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.
@@ -193,37 +174,11 @@
 		}))
 	);
 
-	// Steps a few milliseconds long would swap the headline faster than it can be read. Each one
-	// stays up for at least this long; steps that end sooner are skipped in the label but still
-	// count in the bar. The label and its step count move together so they never disagree.
-	const HEADLINE_MIN_MS = 200;
-	let headline = $state.raw<(typeof progress)[number] | undefined>(undefined);
-	let headlineAt = 0;
-	$effect(() => {
-		const next = progress[0];
-		const shown = untrack(() => headline);
-		if (next?.label === shown?.label && next?.done === shown?.done) {
-			headline = next;
-			return;
-		}
-		const show = () => {
-			headline = next;
-			headlineAt = performance.now();
-		};
-		const wait = HEADLINE_MIN_MS - (performance.now() - headlineAt);
-		if (!shown || wait <= 0) {
-			show();
-			return;
-		}
-		const timer = setTimeout(show, wait);
-		return () => clearTimeout(timer);
-	});
-
 	const visible = $derived(
 		view === 'review' || view === 'blocked'
 			? true
 			: view === 'live'
-				? revealed && (rows.length > 0 || progress.length > 0)
+				? revealed && (rows.length > 0 || (!progressShownByHost && progress.length > 0))
 				: rows.length > 0 && lingering
 	);
 
@@ -245,10 +200,14 @@
 	}
 
 	// 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>
@@ -269,18 +228,17 @@
 		</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="p-3 border {placement === 'inline'
-			? 'mt-3 rounded-md bg-muted/40'
-			: 'bottom-4 shadow-lg w-lg fixed left-1/2 z-50 max-w-screen-inset -translate-x-1/2 rounded-lg bg-background'} {view ===
-		'blocked'
-			? 'border-destructive/50'
-			: ''}"
+		class={placement === 'inline'
+			? `px-2 py-2 border-t ${view === 'blocked' ? 'border-destructive/40' : 'border-border'}`
+			: `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}
 	>
-		{#if view === 'live'}
+		{#if view === 'live' && !progressShownByHost}
 			{@const head = headline ?? progress[0]}
 			<div>
 				<div>
@@ -298,8 +256,13 @@
 							class="-my-1 shrink-0"
 							disabled={finishing}
 							onclick={onabort}
+							aria-keyshortcuts="Escape"
+							title={t.solveMessagesEscHint}
 						>
 							{t.solveMessagesAbort}
+							<kbd class="px-1 rounded-sm border border-border font-sans text-2xs opacity-70">
+								Esc
+							</kbd>
 						</Button>
 					</div>
 					{#each progress as p, i (p.source ?? '')}
@@ -338,6 +301,30 @@
 					{/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">
@@ -356,12 +343,16 @@
 		{/if}
 
 		{#if rows.length > 0}
-			<div class="max-h-40 overflow-y-auto {view === 'live' ? 'mt-3 pt-3 border-t' : ''}">
+			<div
+				class="max-h-40 overflow-y-auto {view === 'live' && !progressShownByHost
+					? '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}>{t.solveMessagesDismiss}</Button>

package/src/lib/components/layout/AppShell.svelte

@@ -94,14 +94,14 @@
 	const sidenavWrapClass = $derived(
 		_mode === 'fixed'
 			? 'flex shrink-0'
-			: 'flex shrink-0 sm:self-start sm:sticky sm:top-(--header-h) sm:max-h-[calc(100svh-var(--header-h))]'
+			: 'flex shrink-0 sm:self-start sm:sticky sm:top-(--header-h) sm:max-h-(--below-header-h)'
 	);
 
 	// The sticky wrapper is only as tall as its content, so in scroll mode the divider comes
 	// from the main column's left edge — that one spans the full body height.
 	const mainClass = $derived(
 		_mode === 'fixed'
-			? 'min-h-0 flex-1 overflow-y-auto'
+			? 'min-h-0 min-w-0 flex-1 overflow-y-auto'
 			: 'min-w-0 flex-1 overflow-y-auto border-border sm:border-l'
 	);
 </script>

package/src/lib/components/layout/FooterItemRenderer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { FooterItem } from '$lib/contexts/footerContext.svelte';
+	import type { FooterItem } from '#lib/contexts/footerContext.svelte.js';
 
 	let { item }: { item: FooterItem } = $props();
 
@@ -9,7 +9,7 @@
 {#if item.onClick}
 	<button
 		onclick={item.onClick}
-		class="gap-1.5 px-2 py-0.5 rounded flex cursor-pointer items-center transition-colors hover:bg-muted"
+		class="gap-1.5 px-2 py-0.5 flex cursor-pointer items-center rounded-sm transition-colors hover:bg-hover"
 	>
 		<item.component {...itemProps} />
 	</button>

package/src/lib/components/layout/PageContent.svelte

@@ -7,6 +7,7 @@
 	let { class: className = '', children }: PageContentProps = $props();
 </script>
 
-<main class={`px-(--page-px) py-(--page-py) ${className}`}>
+<!-- One content width for every page, so moving between pages doesn't change the frame. -->
+<div class={`max-w-6xl min-w-0 mx-auto w-full px-(--page-px) py-(--page-py) ${className}`}>
 	{@render children?.()}
-</main>
+</div>