feat: add tooltip for errors\warnings

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

@@ -3,6 +3,7 @@
 	import { RefreshCw } from "@lucide/svelte";
 	import { t } from "$lib/i18n/t";
 	import Badge from "$lib/components/ui/Badge.svelte";
+	import DetailBadge from "$lib/components/ui/DetailBadge.svelte";
 	import type { Snippet } from "svelte";
 
 	interface Props {
@@ -15,11 +16,11 @@
 		dims?: string;
 		note?: string;
 		noteTone?: "warning" | "info";
-		// 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.
+		// Runtime warnings (chain/source/download events): shown as badges next
+		// to the derived result note, full message in the "?" popover.
+		warnings?: { label: string; detail?: string }[];
+		// Runtime errors: danger badges; the full message lives in the
+		// DetailBadge popover behind the "?" button.
 		errors?: { label: string; detail?: string }[];
 		actions?: Snippet;
 	}
@@ -61,15 +62,20 @@
 				<Badge tone={noteTone} label={note} />
 			{/if}
 			{#each errors as error (error.label + (error.detail ?? ""))}
-				<Badge
+				<DetailBadge
 					tone="danger"
 					label={error.label}
-					title={error.detail}
+					detail={error.detail}
 					role="alert"
 				/>
 			{/each}
-			{#each warnings as warning (warning)}
-				<Badge tone="warning" label={warning} role="status" />
+			{#each warnings as warning (warning.label + (warning.detail ?? ""))}
+				<DetailBadge
+					tone="warning"
+					label={warning.label}
+					detail={warning.detail}
+					role="status"
+				/>
 			{/each}
 		</span>
 	</figcaption>

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

@@ -1,7 +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 DetailBadge from "$lib/components/ui/DetailBadge.svelte";
 	import type { OutputMime } from "$lib/core/io";
 	import { outputFormatByMime } from "$lib/output-formats";
 	import { t } from "$lib/i18n/t";
@@ -18,7 +18,7 @@
 		limitKb?: number;
 		alphaLoss?: boolean;
 		// Download-zone feedback: size-limit misses and action failures.
-		warnings?: string[];
+		warnings?: { label: string; detail?: string }[];
 		error?: { label: string; detail?: string } | null;
 		onupload: (file: File) => void;
 		ondownload: () => void;
@@ -67,14 +67,19 @@
 			disabled={running}
 		/>
 	{/if}
-	{#each warnings as warning (warning)}
-		<Badge tone="warning" label={warning} role="status" />
+	{#each warnings as warning (warning.label + (warning.detail ?? ""))}
+		<DetailBadge
+			tone="warning"
+			label={warning.label}
+			detail={warning.detail}
+			role="status"
+		/>
 	{/each}
 	{#if error}
-		<Badge
+		<DetailBadge
 			tone="danger"
 			label={error.label}
-			title={error.detail}
+			detail={error.detail}
 			role="alert"
 		/>
 	{/if}

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

@@ -13,7 +13,7 @@
 		resultKind?: ResultKind;
 		result: PixelImage | null;
 		resultNote?: ResultNote | null;
-		warnings?: string[];
+		warnings?: { label: string; detail?: string }[];
 		errors?: { label: string; detail?: string }[];
 		fileResult?: FileResult | null;
 		textResult?: string | null;

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

@@ -15,7 +15,7 @@
 		textSource?: string;
 		running?: boolean;
 		fileCount?: number;
-		warnings?: string[];
+		warnings?: { label: string; detail?: string }[];
 		errors?: { label: string; detail?: string }[];
 		ontextinput?: (text: string) => void;
 		onrendertext?: () => void;

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

@@ -9,9 +9,10 @@
 	import type { PixelImage } from "$lib/core/types";
 	import {
 		chainStepTitle,
-		chainWarningText,
+		chainWarningNotice,
 		pageDescription,
 		pageTitle,
+		type WarningNotice,
 	} from "$lib/i18n/schema-tool-strings";
 	import { t } from "$lib/i18n/t";
 	import { moveStep, type ChainStep } from "$lib/pipeline.svelte";
@@ -124,20 +125,18 @@
 	const stepFileSets = $derived(runner.stepFileSets);
 	const runWarnings = $derived(runner.runWarnings);
 	// Feedback zones: source tile / step tiles / download button area.
-	const sourceWarningTexts = $derived(
-		upload.sourceWarnings.map(chainWarningText),
-	);
+	const sourceNotices = $derived(upload.sourceWarnings.map(chainWarningNotice));
 	const warningsByStep = $derived.by(() => {
-		const byStep: string[][] = steps.map(() => []);
+		const byStep: WarningNotice[][] = 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));
+				byStep[w.step - 1].push(chainWarningNotice(w));
 			}
 		}
 		return byStep;
 	});
-	const downloadWarningTexts = $derived(
-		runner.downloadWarnings.map(chainWarningText),
+	const downloadNotices = $derived(
+		runner.downloadWarnings.map(chainWarningNotice),
 	);
 	const stepError = $derived(runner.stepError);
 	const sourceError = $derived(runner.sourceError);
@@ -305,7 +304,7 @@
 					textSource={upload.textSource}
 					running={busy}
 					fileCount={upload.sourceFiles.length}
-					warnings={sourceWarningTexts}
+					warnings={sourceNotices}
 					errors={errorBadge(sourceError)}
 					ontextinput={(v) => (upload.textSource = v)}
 					onrendertext={run}
@@ -407,7 +406,7 @@
 					quality={output.quality}
 					limitKb={output.limitKb}
 					alphaLoss={output.alphaLoss}
-					warnings={downloadWarningTexts}
+					warnings={downloadNotices}
 					error={actionError
 						? {
 								label: t("actions.actionFailed"),