fix: update error\warning flow

web/src/lib/components/schema/PreviewTile.svelte

@@ -18,6 +18,9 @@
 		// Runtime warnings (chain/download events): shown as badges next to the
 		// derived result note, but from a different source.
 		warnings?: string[];
+		// Runtime errors: danger badges; detail goes to the native tooltip until
+		// a popover with full text exists.
+		errors?: { label: string; detail?: string }[];
 		actions?: Snippet;
 	}
 	let {
@@ -31,6 +34,7 @@
 		note = undefined,
 		noteTone = "warning",
 		warnings = [],
+		errors = [],
 		actions = undefined,
 	}: Props = $props();
 </script>
@@ -56,6 +60,14 @@
 			{#if note}
 				<Badge tone={noteTone} label={note} />
 			{/if}
+			{#each errors as error (error.label + (error.detail ?? ""))}
+				<Badge
+					tone="danger"
+					label={error.label}
+					title={error.detail}
+					role="alert"
+				/>
+			{/each}
 			{#each warnings as warning (warning)}
 				<Badge tone="warning" label={warning} role="status" />
 			{/each}

web/src/lib/components/schema/SchemaActions.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import DownloadButton from "$lib/components/ui/DownloadButton.svelte";
 	import UploadButton from "$lib/components/ui/UploadButton.svelte";
+	import Badge from "$lib/components/ui/Badge.svelte";
 	import type { OutputMime } from "$lib/core/io";
 	import { outputFormatByMime } from "$lib/output-formats";
 	import { t } from "$lib/i18n/t";
@@ -16,6 +17,9 @@
 		quality?: number;
 		limitKb?: number;
 		alphaLoss?: boolean;
+		// Download-zone feedback: size-limit misses and action failures.
+		warnings?: string[];
+		error?: { label: string; detail?: string } | null;
 		onupload: (file: File) => void;
 		ondownload: () => void;
 		onformat?: (mime: OutputMime) => void;
@@ -31,6 +35,8 @@
 		quality = undefined,
 		limitKb = undefined,
 		alphaLoss = false,
+		warnings = [],
+		error = null,
 		onupload,
 		ondownload,
 		onformat,
@@ -61,6 +67,17 @@
 			disabled={running}
 		/>
 	{/if}
+	{#each warnings as warning (warning)}
+		<Badge tone="warning" label={warning} role="status" />
+	{/each}
+	{#if error}
+		<Badge
+			tone="danger"
+			label={error.label}
+			title={error.detail}
+			role="alert"
+		/>
+	{/if}
 </div>
 {#if canDownload && alphaLoss}
 	<p class="alpha-warning" role="status">

web/src/lib/components/schema/SchemaResultTile.svelte

@@ -14,6 +14,7 @@
 		result: PixelImage | null;
 		resultNote?: ResultNote | null;
 		warnings?: string[];
+		errors?: { label: string; detail?: string }[];
 		fileResult?: FileResult | null;
 		textResult?: string | null;
 		textVars?: Record<string, string | number>;
@@ -30,6 +31,7 @@
 		result,
 		resultNote = null,
 		warnings = [],
+		errors = [],
 		fileResult = null,
 		textResult = null,
 		textVars = undefined,
@@ -71,6 +73,7 @@
 	note={resultNote ? t(resultNote.key) : undefined}
 	noteTone={resultNote?.tone ?? "warning"}
 	{warnings}
+	{errors}
 >
 	{#snippet actions()}
 		{#if ontogglemask}

web/src/lib/components/schema/SchemaSourceTile.svelte

@@ -15,6 +15,8 @@
 		textSource?: string;
 		running?: boolean;
 		fileCount?: number;
+		warnings?: string[];
+		errors?: { label: string; detail?: string }[];
 		ontextinput?: (text: string) => void;
 		onrendertext?: () => void;
 		onupload?: (file: File) => void;
@@ -27,6 +29,8 @@
 		textSource = "",
 		running = false,
 		fileCount = 0,
+		warnings = [],
+		errors = [],
 		ontextinput,
 		onrendertext,
 		onupload,
@@ -83,7 +87,13 @@
 	}
 </script>
 
-<PreviewTile label={t("sourceCard.source")} viewMode={mode} dims={sourceDims}>
+<PreviewTile
+	label={t("sourceCard.source")}
+	viewMode={mode}
+	dims={sourceDims}
+	{warnings}
+	{errors}
+>
 	{#if mode === "text"}
 		<div class="text-source-wrap">
 			<SchemaTextSource

web/src/lib/components/schema/SchemaToolView.svelte

@@ -32,6 +32,7 @@
 	import { createOutputControls } from "./output-controls.svelte";
 	import { hasPreviewResult } from "./schema-preview-model";
 	import { createSchemaToolRunner } from "./schema-tool-runner.svelte";
+	import type { DisplayError } from "./schema-tool-runner.svelte";
 	import {
 		createSchemaToolState,
 		toolSchemaOf,
@@ -63,7 +64,7 @@
 		setSteps: (v) => (stepState.steps = v),
 		touchedFor: (key) => stepState.touchedFor(key),
 		reportError: (e) => runner.reportError(e),
-		clearError: () => (runner.displayError = null),
+		clearError: () => runner.clearSourceError(),
 	});
 
 	const stepState = createSchemaToolState({
@@ -122,12 +123,36 @@
 	const stepResults = $derived(runner.stepResults);
 	const stepFileSets = $derived(runner.stepFileSets);
 	const runWarnings = $derived(runner.runWarnings);
-	const displayError = $derived(runner.displayError);
-	const warningTexts = $derived(
-		[...upload.sourceWarnings, ...runWarnings, ...runner.downloadWarnings].map(
-			chainWarningText,
-		),
+	// Feedback zones: source tile / step tiles / download button area.
+	const sourceWarningTexts = $derived(
+		upload.sourceWarnings.map(chainWarningText),
 	);
+	const warningsByStep = $derived.by(() => {
+		const byStep: string[][] = steps.map(() => []);
+		for (const w of runWarnings) {
+			if ("step" in w && w.step >= 1 && w.step <= byStep.length) {
+				byStep[w.step - 1].push(chainWarningText(w));
+			}
+		}
+		return byStep;
+	});
+	const downloadWarningTexts = $derived(
+		runner.downloadWarnings.map(chainWarningText),
+	);
+	const stepError = $derived(runner.stepError);
+	const sourceError = $derived(runner.sourceError);
+	const actionError = $derived(runner.actionError);
+
+	function displayText(e: DisplayError | null): string {
+		if (!e) return "";
+		return e.kind === "i18n" ? t(e.key, e.vars) : e.text;
+	}
+
+	function errorBadge(e: DisplayError | null) {
+		return e
+			? [{ label: t("actions.actionFailed"), detail: displayText(e) }]
+			: [];
+	}
 
 	const masks = createStepMasks({
 		steps: () => steps,
@@ -176,14 +201,6 @@
 			: null,
 	);
 
-	const errorText = $derived.by(() => {
-		const current = displayError;
-		if (!current) return "";
-		return current.kind === "i18n"
-			? t(current.key, current.vars)
-			: current.text;
-	});
-
 	const debouncedRun = debounce(() => run(), 200);
 
 	$effect(() => {
@@ -288,6 +305,8 @@
 					textSource={upload.textSource}
 					running={busy}
 					fileCount={upload.sourceFiles.length}
+					warnings={sourceWarningTexts}
+					errors={errorBadge(sourceError)}
 					ontextinput={(v) => (upload.textSource = v)}
 					onrendertext={run}
 					onupload={upload.handleFile}
@@ -320,7 +339,10 @@
 					resultKind={displayResultKind}
 					result={out}
 					{resultNote}
-					warnings={warningTexts}
+					warnings={warningsByStep[i] ?? []}
+					errors={stepError && stepError.step === i
+						? [{ label: stepError.label, detail: stepError.detail }]
+						: []}
 					{fileResult}
 					{textResult}
 					textVars={verdictVars}
@@ -341,6 +363,10 @@
 					viewMode="image"
 					dims={out ? `${out.width} × ${out.height}` : undefined}
 					parts={outSet.length > 1 ? outSet.length : undefined}
+					warnings={warningsByStep[i] ?? []}
+					errors={stepError && stepError.step === i
+						? [{ label: stepError.label, detail: stepError.detail }]
+						: []}
 				>
 					{#snippet actions()}
 						{@render maskChip(i)}
@@ -381,6 +407,13 @@
 					quality={output.quality}
 					limitKb={output.limitKb}
 					alphaLoss={output.alphaLoss}
+					warnings={downloadWarningTexts}
+					error={actionError
+						? {
+								label: t("actions.actionFailed"),
+								detail: displayText(actionError),
+							}
+						: null}
 					onupload={upload.handleFile}
 					ondownload={download}
 					onformat={(v) => (output.format = v)}
@@ -442,9 +475,6 @@
 					</section>
 				</div>
 			{/if}
-			{#if errorText}
-				<p class="error" role="alert">{errorText}</p>
-			{/if}
 			<StepReorderOverlay {steps} dnd={stepDnd} />
 		</DragDropProvider>
 	</div>
@@ -611,11 +641,6 @@
 		border-radius: 0 0 var(--radius-m) var(--radius-m);
 		background: var(--color-panel);
 	}
-	.error {
-		margin: var(--space-l) 0 0;
-		color: var(--color-danger);
-		font: var(--font-size-s) var(--font-mono);
-	}
 	.empty {
 		font: var(--font-size-s) var(--font-mono);
 	}

web/src/lib/components/schema/schema-tool-runner.svelte.ts

@@ -58,7 +58,12 @@ interface RunnerState {
 	runWarnings: ChainWarning[];
 	// Size-limit feedback from the last download (limit unreachable etc.).
 	downloadWarnings: ChainWarning[];
-	displayError: DisplayError | null;
+	// Chain step failure: badge lands on that step's tile (0-based index).
+	stepError: { step: number; label: string; detail: string } | null;
+	// Source decode/upload failures (via reportError): badge on the source tile.
+	sourceError: DisplayError | null;
+	// Download/copy and non-chain run failures: badge near the download button.
+	actionError: DisplayError | null;
 }
 
 function toDisplayError(e: unknown): DisplayError {
@@ -101,7 +106,8 @@ async function run(s: RunnerState, ctx: SchemaToolRunnerCtx) {
 	const steps = ctx.steps();
 	if (!schema || steps.length === 0) return;
 	const gen = ++s.runGen;
-	s.displayError = null;
+	s.stepError = null;
+	s.actionError = null;
 	s.running = true;
 	try {
 		const source = ctx.source();
@@ -125,16 +131,17 @@ async function run(s: RunnerState, ctx: SchemaToolRunnerCtx) {
 		if (e instanceof ChainStepError) {
 			const base = toDisplayError(e.cause);
 			const msg = base.kind === "i18n" ? t(base.key, base.vars) : base.text;
-			s.displayError = {
-				kind: "plain",
-				text: t("toolPage.stepError", {
+			s.stepError = {
+				step: e.stepIndex,
+				label: t("chain.stepFailed", { n: e.stepIndex + 1 }),
+				detail: t("toolPage.stepError", {
 					n: e.stepIndex + 1,
 					title: chainStepTitle(e.toolId),
 					msg,
 				}),
 			};
 		} else {
-			s.displayError = toDisplayError(e);
+			s.actionError = toDisplayError(e);
 		}
 	} finally {
 		if (gen === s.runGen) s.running = false;
@@ -144,7 +151,7 @@ async function run(s: RunnerState, ctx: SchemaToolRunnerCtx) {
 async function download(s: RunnerState, ctx: SchemaToolRunnerCtx) {
 	if (!ctx.schema()) return;
 	s.downloading = true;
-	s.displayError = null;
+	s.actionError = null;
 	try {
 		if (s.fileResult) {
 			await downloadZip(s.fileResult.files, `${ctx.pageSlug()}.zip`);
@@ -179,7 +186,7 @@ async function download(s: RunnerState, ctx: SchemaToolRunnerCtx) {
 			downloadBlob(blob, `${ctx.pageSlug()}.${out.ext}`);
 		}
 	} catch (e) {
-		s.displayError = toDisplayError(e);
+		s.actionError = toDisplayError(e);
 	} finally {
 		s.downloading = false;
 	}
@@ -195,7 +202,7 @@ async function copyText(s: RunnerState, ctx: SchemaToolRunnerCtx) {
 	try {
 		await navigator.clipboard.writeText(copyValue);
 	} catch (e) {
-		s.displayError = toDisplayError(e);
+		s.actionError = toDisplayError(e);
 	}
 }
 
@@ -205,7 +212,7 @@ async function downloadText(s: RunnerState, ctx: SchemaToolRunnerCtx) {
 		const blob = new Blob([s.textResult], { type: "text/plain" });
 		downloadBlob(blob, `${ctx.pageSlug()}.txt`);
 	} catch (e) {
-		s.displayError = toDisplayError(e);
+		s.actionError = toDisplayError(e);
 	}
 }
 
@@ -215,7 +222,8 @@ function clearResults(s: RunnerState) {
 	s.textResult = null;
 	s.verdictVars = undefined;
 	s.downloadWarnings = [];
-	s.displayError = null;
+	s.stepError = null;
+	s.actionError = null;
 }
 
 // Execution state and actions of SchemaToolView: run/download/clipboard and
@@ -234,7 +242,9 @@ export function createSchemaToolRunner(ctx: SchemaToolRunnerCtx) {
 		stepFileSets: [],
 		runWarnings: [],
 		downloadWarnings: [],
-		displayError: null,
+		stepError: null,
+		sourceError: null,
+		actionError: null,
 	});
 	return {
 		get running() {
@@ -270,11 +280,17 @@ export function createSchemaToolRunner(ctx: SchemaToolRunnerCtx) {
 		get downloadWarnings() {
 			return s.downloadWarnings;
 		},
-		get displayError() {
-			return s.displayError;
+		get stepError() {
+			return s.stepError;
 		},
-		set displayError(v: DisplayError | null) {
-			s.displayError = v;
+		get sourceError() {
+			return s.sourceError;
+		},
+		get actionError() {
+			return s.actionError;
+		},
+		clearSourceError: () => {
+			s.sourceError = null;
 		},
 		run: () => run(s, ctx),
 		download: () => download(s, ctx),
@@ -290,7 +306,7 @@ export function createSchemaToolRunner(ctx: SchemaToolRunnerCtx) {
 		},
 		clearResults: () => clearResults(s),
 		reportError: (e: unknown) => {
-			s.displayError = toDisplayError(e);
+			s.sourceError = toDisplayError(e);
 		},
 	};
 }