artifacts: demo scrollbar death, figure natural sizing + fullscreen, downloads, invert toggles (release polish 7)

- demo iframe: scrolling=no (the bridge auto-sizes; a scrollable iframe
  trapped the wheel) + content-box so the bridge height is the viewport
- figures: svgNaturalWidth hug + center (w-fit max-w-full mx-auto),
  full-width fallback for viewBox-only svgs
- fullscreen: MermaidOverlay figure mode (raw svg, white stage, invert
  carried); openFigure context; figureFocus rides the mermaid Esc layer
- downloads: figure.svg + <slug>.html (raw pre-bridge), shared download.ts
- invert: manual ContrastIcon toggle on both cards — invert(1)
  hue-rotate(180deg) on the white-bearing element, default off, no
  detection, no theme wiring (owner rulings 2026-10-07)

1433 tests green; live smoke passed (hug/center measured, filters verified,
downloads fired, Esc closed; wheel-chaining structurally sound)

components/artifacts/demo-card.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { ContrastIcon, DownloadIcon } from "lucide-react";
 import { ChatActionsContext } from "@/components/chat";
+import { downloadFile, slugFilename } from "@/components/artifacts/download";
 import { DispatchCard } from "@/components/artifacts/dispatch-card";
 import type { ArtifactPartProps, DemoResult } from "@/src/core";
 
@@ -106,6 +108,11 @@ function DemoFrame({ title, html }: { title: string; html: string }) {
 	const actions = useContext(ChatActionsContext);
 	const iframeRef = useRef<HTMLIFrameElement | null>(null);
 	const [state, setState] = useState<DemoBridgeState>(INITIAL_DEMO_BRIDGE_STATE);
+	// Brightness inversion (owner, 2026-10-07): a MANUAL toggle only — no
+	// detection, no theme wiring. The filter rides the iframe element, which
+	// carries the card's white backing, so one class flips page + content
+	// together while hue-rotate(180deg) undoes invert's hue flip.
+	const [inverted, setInverted] = useState(false);
 	const srcDoc = useMemo(() => buildDemoSrcDoc(html), [html]);
 
 	useEffect(() => {
@@ -123,8 +130,29 @@ function DemoFrame({ title, html }: { title: string; html: string }) {
 		<div className="rounded-xl border bg-card p-4 text-card-foreground" data-testid="demo-card">
 			<div className="flex items-baseline justify-between gap-2">
 				<div className="font-medium">{title}</div>
-				<div className="shrink-0 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-					interactive demo
+				<div className="flex shrink-0 items-center gap-0.5">
+					<button
+						type="button"
+						aria-label="Invert brightness"
+						aria-pressed={inverted}
+						title="Invert brightness"
+						onClick={() => setInverted((v) => !v)}
+						data-testid="demo-invert"
+						className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+					>
+						<ContrastIcon className="size-3.5" />
+					</button>
+					<button
+						type="button"
+						aria-label="Download demo as HTML"
+						title="Download as HTML"
+						onClick={() => downloadFile(`${slugFilename(title)}.html`, html, "text/html")}
+						data-testid="demo-download"
+						className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+					>
+						<DownloadIcon className="size-3.5" />
+					</button>
+					<div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">interactive demo</div>
 				</div>
 			</div>
 			{state.error && (
@@ -141,8 +169,21 @@ function DemoFrame({ title, html }: { title: string; html: string }) {
 				// but never touch the app's storage, cookies, or DOM.
 				sandbox="allow-scripts"
 				srcDoc={srcDoc}
+				// scrolling OFF (owner, 2026-10-07): the bridge auto-sizes the
+				// iframe to its content, so an internal scrollbar can only appear
+				// before the first resize lands — and a scrollable iframe TRAPS
+				// the wheel (session scrolling stalls over the demo). With
+				// scrolling disabled the wheel chains straight to the session.
+				scrolling="no"
 				className="mt-2 w-full rounded-lg border bg-white"
-				style={{ height: state.height ?? 360 }}
+				// content-box: the bridge reports the CONTENT height — with the
+				// preflight's border-box the 2px border would eat into it and clip
+				// the bottom of the demo (smoke finding, 2026-10-07).
+				style={{
+					height: state.height ?? 360,
+					boxSizing: "content-box",
+					filter: inverted ? "invert(1) hue-rotate(180deg)" : undefined,
+				}}
 				data-testid="demo-iframe"
 			/>
 		</div>

components/artifacts/download.ts

@@ -0,0 +1,32 @@
+/**
+ * Artifact download helpers (release polish, 2026-10-07): the tiny
+ * save-a-blob seam shared by the demo + figure cards, plus the filename
+ * slug. The slug is pure (test-pinned); downloadFile touches the DOM and
+ * only runs on click.
+ */
+
+/** Slugify a demo title into a filename stem — lowercase, accents folded,
+ *  runs of non-alphanumerics collapsed to "-", trimmed, capped at 64
+ *  chars. Empty/fully-symbolic titles fall back to "demo". */
+export function slugFilename(title: string): string {
+	const slug = title
+		.toLowerCase()
+		.normalize("NFKD")
+		.replace(/[\u0300-\u036f]/g, "")
+		.replace(/[^a-z0-9]+/g, "-")
+		.replace(/^-+|-+$/g, "")
+		.slice(0, 64);
+	return slug || "demo";
+}
+
+/** Save text as a downloaded file. The blob URL is revoked right after the
+ *  click — Chromium keeps the download alive past the revoke. */
+export function downloadFile(name: string, text: string, mime: string): void {
+	const blob = new Blob([text], { type: mime });
+	const url = URL.createObjectURL(blob);
+	const a = document.createElement("a");
+	a.href = url;
+	a.download = name;
+	a.click();
+	URL.revokeObjectURL(url);
+}

components/artifacts/visual-card.tsx

@@ -1,5 +1,9 @@
 "use client";
 
+import { useState } from "react";
+import { ContrastIcon, DownloadIcon, MaximizeIcon } from "lucide-react";
+import { useSessionMermaid } from "@/components/session-overlay";
+import { downloadFile } from "@/components/artifacts/download";
 import { DispatchCard } from "@/components/artifacts/dispatch-card";
 import type { ArtifactPartProps, VisualResult } from "@/src/core";
 
@@ -25,6 +29,20 @@ export function sanitizeSvg(svg: string): string {
 		.replace(/(href|xlink:href)\s*=\s*(?:"\s*(?:javascript|data:text\/html)[^"]*"|'\s*(?:javascript|data:text\/html)[^']*'|(?:javascript|data:text\/html)[^\s>]*)/gi, "");
 }
 
+/** The svg root's DECLARED width in px, when there is one — the natural
+ *  size the card displays at instead of stretching to full width (owner,
+ *  2026-10-07). %, em, "auto", or a missing attribute → null (the caller
+ *  falls back to full-width). Pure. */
+export function svgNaturalWidth(svg: string): number | null {
+	const m = /<svg\b[^>]*?\bwidth\s*=\s*["']([^"']+)["'][^>]*>/i.exec(svg);
+	if (!m) return null;
+	const value = m[1]!.trim();
+	const px = /^(\d+(?:\.\d+)?)(?:px)?$/i.exec(value);
+	if (!px) return null;
+	const n = Number.parseFloat(px[1]!);
+	return Number.isFinite(n) && n > 0 ? n : null;
+}
+
 export function VisualCard({ part }: ArtifactPartProps) {
 	if (part.state !== "output-available") return null;
 	return <DispatchCard toolCallId={part.toolCallId} kind="visual" />;
@@ -33,6 +51,12 @@ export function VisualCard({ part }: ArtifactPartProps) {
 /** The figure itself — exported: the steer card renders the delivered artifact. */
 export function VisualOutputCard({ output }: { output: unknown }) {
 	const result = output as VisualResult | undefined;
+	const overlay = useSessionMermaid();
+	// Brightness inversion (owner, 2026-10-07): a MANUAL toggle only — no
+	// detection, no theme wiring. Default off; a toggled figure passes its
+	// state into the fullscreen overlay (openFigure).
+	const [inverted, setInverted] = useState(false);
+	const natural = result && typeof result.svg === "string" ? svgNaturalWidth(result.svg) : null;
 	if (!result || typeof result.svg !== "string") {
 		return (
 			<div className="rounded-xl border bg-card p-4 text-sm text-muted-foreground">
@@ -54,13 +78,58 @@ export function VisualOutputCard({ output }: { output: unknown }) {
 	}
 	return (
 		<div className="rounded-xl border bg-card p-4 text-card-foreground" data-testid="visual-card">
-			<div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Figure</div>
-			{/* Scale to the display area: the svg always fills the card's width
-			   (w-full), h-auto keeps the aspect ratio — no white strips beside
-			   narrower figures, oversized ones shrink to fit. bg-white stays as a
-			   neutral backing for svgs without their own background. */}
+			<div className="flex items-center justify-between gap-2">
+				<div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Figure</div>
+				<div className="flex items-center gap-0.5">
+					{overlay && (
+						<button
+							type="button"
+							aria-label="Open figure fullscreen"
+							title="Open fullscreen"
+							onClick={() => overlay.openFigure(result.svg, inverted)}
+							data-testid="visual-open"
+							className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+						>
+							<MaximizeIcon className="size-3.5" />
+						</button>
+					)}
+					<button
+						type="button"
+						aria-label="Invert brightness"
+						aria-pressed={inverted}
+						title="Invert brightness"
+						onClick={() => setInverted((v) => !v)}
+						data-testid="visual-invert"
+						className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+					>
+						<ContrastIcon className="size-3.5" />
+					</button>
+					<button
+						type="button"
+						aria-label="Download figure as SVG"
+						title="Download as SVG"
+						onClick={() => downloadFile("figure.svg", result.svg, "image/svg+xml")}
+						data-testid="visual-download"
+						className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+					>
+						<DownloadIcon className="size-3.5" />
+					</button>
+				</div>
+			</div>
+			{/* Natural sizing (owner, 2026-10-07): a declared-width svg sits at
+			   ITS size — the white figure area hugs it and centers (mx-auto),
+			   max-w-full still shrinks oversized ones to fit the card. No
+			   declared size (viewBox-only, %-width) keeps the old full-width
+			   law. The invert filter rides the bg-white holder, so the backing
+			   flips white→black together with the strokes; transparent areas
+			   ARE the backing. */}
 			<div
-				className="mt-2 overflow-hidden rounded-lg bg-white [&_svg]:h-auto [&_svg]:w-full"
+				className={
+					natural !== null
+						? "mx-auto mt-2 w-fit max-w-full overflow-hidden rounded-lg bg-white [&_svg]:h-auto [&_svg]:max-w-full"
+						: "mt-2 w-full overflow-hidden rounded-lg bg-white [&_svg]:h-auto [&_svg]:w-full"
+				}
+				style={{ filter: inverted ? "invert(1) hue-rotate(180deg)" : undefined }}
 				dangerouslySetInnerHTML={{ __html: sanitizeSvg(result.svg) }}
 				data-testid="visual-svg"
 			/>

components/chat.tsx

@@ -349,7 +349,7 @@ export function Chat({
 		const onAbort = () => {
 			const target = escAbortTarget({
 				abortAsk: abortAskRef.current !== null,
-				mermaidFocus: mermaidFocusRef.current !== null,
+				mermaidFocus: mermaidFocusRef.current !== null || figureFocusRef.current !== null,
 				planOpen: planOpenRef.current,
 				setupOpen: setupOpenRef.current,
 				pending: pendingRef.current !== null,
@@ -790,12 +790,21 @@ export function Chat({
 	// popup) mount INSIDE the session-area div — both are session-scoped, so
 	// the drag bar stays sharp and draggable while a focus owns the area.
 	const [mermaidFocus, setMermaidFocus] = useState<string | null>(null);
+	// Figure focus (2026-10-07): the figure card's fullscreen button — same
+	// overlay shell as mermaid, but carrying the raw svg + the card's invert
+	// state so the fullscreen view stays faithful to the toggled card.
+	const [figureFocus, setFigureFocus] = useState<{ svg: string; inverted: boolean } | null>(null);
 
 	// Overlay mirrors for the layered-Esc gate (owner 2026-10-04): the
 	// lh:kbd-abort-turn handler reads these at EVENT time — declared here
 	// beside their states, consumed below wherever the states live.
 	const mermaidFocusRef = useRef(mermaidFocus);
 	mermaidFocusRef.current = mermaidFocus;
+	// The figure focus rides the mermaid layer in the Esc gate — the same
+	// overlay class (session-scoped diagram focus, Esc claimed at the
+	// document level by the overlay itself); the window chain must stay out.
+	const figureFocusRef = useRef(figureFocus);
+	figureFocusRef.current = figureFocus;
 	const planOpenRef = useRef(planOpen);
 	planOpenRef.current = planOpen;
 	const setupOpenRef = useRef(setupOpen);
@@ -1137,7 +1146,12 @@ export function Chat({
 				openSetup: () => setSetupOpen(true),
 			}}
 		>
-		<SessionMermaidContext.Provider value={{ openMermaid: setMermaidFocus }}>
+		<SessionMermaidContext.Provider
+			value={{
+				openMermaid: setMermaidFocus,
+				openFigure: (svg, inverted) => setFigureFocus({ svg, inverted }),
+			}}
+		>
 		<JobsContext.Provider value={jobs}>
 		{/* The session surface: the transcript column (header + scroller) and
 		    the plan-tree panel as full-height SIBLINGS — the panel spans top to
@@ -1601,6 +1615,13 @@ export function Chat({
 				{mermaidFocus !== null && (
 					<MermaidOverlay chart={mermaidFocus} onClose={() => setMermaidFocus(null)} />
 				)}
+				{figureFocus !== null && (
+					<MermaidOverlay
+						svg={figureFocus.svg}
+						inverted={figureFocus.inverted}
+						onClose={() => setFigureFocus(null)}
+					/>
+				)}
 				{planOpen && <PlanPopup messages={messages} onClose={() => setPlanOpen(false)} />}
 				<AbortTurnDialog mode={abortAsk} onClose={() => setAbortAsk(null)} onConfirm={confirmAbort} busy={busy} />
 				</div>

components/session-overlay.tsx

@@ -27,10 +27,14 @@ import { Hint } from "@/components/ui/hint";
  */
 
 /** The expand seam: md-blocks' mermaid hover button calls openMermaid with
- *  the chart source; the chat page (which provides this context) opens the
- *  overlay. Null when no chat page is mounted (sidebar previews etc.) — the
- *  expand button simply doesn't render there. */
-export const SessionMermaidContext = createContext<{ openMermaid: (chart: string) => void } | null>(null);
+ *  the chart source; the figure card's fullscreen button calls openFigure
+ *  with the raw svg (+ its invert state). The chat page (which provides
+ *  this context) opens the overlay. Null when no chat page is mounted
+ *  (sidebar previews etc.) — the buttons simply don't render there. */
+export const SessionMermaidContext = createContext<{
+	openMermaid: (chart: string) => void;
+	openFigure: (svg: string, inverted: boolean) => void;
+} | null>(null);
 
 export function useSessionMermaid() {
 	return useContext(SessionMermaidContext);
@@ -38,7 +42,9 @@ export function useSessionMermaid() {
 
 /** A chart svg's natural size — mermaid always emits a viewBox; this is the
  *  extent at zoom 1 (1 svg unit = 1 px), like the plan diagram's natural
- *  size. The fallback covers a degenerate no-viewBox svg. Pure. */
+ *  size. Figure svgs (2026-10-07) may declare width/height instead — that
+ *  pair is the fallback. The final fallback covers a degenerate svg with
+ *  neither. Pure. */
 export function chartSize(svg: string): { w: number; h: number } {
 	const m = /<svg[^>]*\bviewBox="([\d.eE+-]+)\s+([\d.eE+-]+)\s+([\d.eE+-]+)\s+([\d.eE+-]+)"/.exec(svg);
 	if (m) {
@@ -46,19 +52,48 @@ export function chartSize(svg: string): { w: number; h: number } {
 		const h = Number.parseFloat(m[4]!);
 		if (Number.isFinite(w) && Number.isFinite(h) && w > 0 && h > 0) return { w, h };
 	}
+	const attr = (name: string): number | null => {
+		const a = new RegExp(`<svg\\b[^>]*?\\b${name}\\s*=\\s*["'](\\d+(?:\\.\d+)?)(?:px)?["']`, "i").exec(svg);
+		if (!a) return null;
+		const n = Number.parseFloat(a[1]!);
+		return Number.isFinite(n) && n > 0 ? n : null;
+	};
+	const w = attr("width");
+	const h = attr("height");
+	if (w !== null && h !== null) return { w, h };
 	return { w: 600, h: 400 };
 }
 
-/** The mermaid focus: the chart at natural size inside a pan/zoom viewport
+/** The diagram focus: the chart at natural size inside a pan/zoom viewport
  *  (the plan popup's fit-floor semantics — fitGraphView/zoomedGraphView in
  *  pan-zoom.ts), Esc/X close. Renders its own copy of the chart (mermaid
- *  ids are per-render), not the injected inline svg. */
-export function MermaidOverlay({ chart, onClose }: { chart: string; onClose: () => void }) {
-	// ── chart render (own instance, own ids) ──
-	const [svg, setSvg] = useState<string | null>(null);
+ *  ids are per-render), not the injected inline svg. FIGURE MODE
+ *  (2026-10-07): pass a raw `svg` instead of a mermaid `chart` — the same
+ *  shell then focuses a figure card's svg on a white stage, with the
+ *  caller's invert state carried over (the filter rides the white stage,
+ *  exactly like the in-card holder). */
+export function MermaidOverlay({
+	chart,
+	svg: rawSvg,
+	inverted = false,
+	onClose,
+}: {
+	chart?: string;
+	svg?: string;
+	inverted?: boolean;
+	onClose: () => void;
+}) {
+	// ── chart render (own instance, own ids); figure mode uses the raw svg ──
+	const [svg, setSvg] = useState<string | null>(rawSvg ?? null);
 	const [error, setError] = useState<string | null>(null);
 	const [attempt, setAttempt] = useState(0);
 	useEffect(() => {
+		if (rawSvg !== undefined) {
+			setSvg(rawSvg);
+			setError(null);
+			return;
+		}
+		if (chart === undefined) return;
 		let cancelled = false;
 		setSvg(null);
 		setError(null);
@@ -72,7 +107,7 @@ export function MermaidOverlay({ chart, onClose }: { chart: string; onClose: ()
 		return () => {
 			cancelled = true;
 		};
-	}, [chart, attempt]);
+	}, [rawSvg, chart, attempt]);
 
 	// Esc closes — claimed at the document level (THE ONE-ESC LAW, owner
 	// keyboard round 2026-10-06): one Esc, one action; the window chain
@@ -213,7 +248,7 @@ export function MermaidOverlay({ chart, onClose }: { chart: string; onClose: ()
 			>
 				{error ? (
 					<div className="flex h-full items-center justify-center p-4">
-						<MermaidError chart={chart} error={error} retry={() => setAttempt((a) => a + 1)} />
+						<MermaidError chart={chart ?? ""} error={error} retry={() => setAttempt((a) => a + 1)} />
 					</div>
 				) : svg ? (
 					<>
@@ -237,10 +272,17 @@ export function MermaidOverlay({ chart, onClose }: { chart: string; onClose: ()
 							{/* data-lh-overlay-chart: globals.css pins the svg to the
 							    wrapper's width (kills mermaid's inline max-width cap)
 							    so the wrapper IS the natural-size box the fit math
-							    centers. */}
+							    centers. FIGURE MODE: a white stage (the figure's
+							    backing law — models draw for a white page) with the
+							    caller's invert filter riding it, exactly like the
+							    in-card holder. */}
 							<div
 								data-lh-overlay-chart
-								className="[&_svg]:h-auto [&_svg]:w-full"
+								className={cn(
+									"[&_svg]:h-auto [&_svg]:w-full",
+									rawSvg !== undefined && "bg-white",
+								)}
+								style={rawSvg !== undefined && inverted ? { filter: "invert(1) hue-rotate(180deg)" } : undefined}
 								dangerouslySetInnerHTML={{ __html: svg }}
 							/>
 						</div>