From 34f498b128b375a8e3af455676775bd6abee9647 Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Wed, 7 Oct 2026 19:13:24 +0300
Subject: [PATCH] artifacts: the height ratchet fixed, invert switch persisted
 + restyled (release polish 7.2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- bridge measures the BODY (scrollHeight + rect + margins) instead of the
  viewport-clamped documentElement — documentElement.scrollHeight latches
  at the parent's own height, so demos could grow but never shrink on
  window resize (owner-reported); smoke: 1036 → 2386 → 1036 px
- invert now PERSISTS as details.ui.inverted on the steer record, written
  by the silent artifact-ui route (dismissal pattern: no wake, no SSE) and
  seeded through the projection (SubagentArtifactData.ui); survives
  navigation + reload, never enters teacher context or exports
- invert restyled as the house Toggle switch (settings controls) on both
  cards; demo header is the caption grammar: 'INTERACTIVE DEMO — title'
  left (title normal-case, same size/tracking), switch + download far
  right; figure header: label left, switch/download/open far right

1439 tests green (route + pure-seam pins added); live smoke passed
---
 app/api/chats/[id]/artifact-ui/route.ts | 41 +++++++++++
 components/artifacts/demo-card.tsx      | 91 ++++++++++++++++++-------
 components/artifacts/steer-card.tsx     |  4 +-
 components/artifacts/visual-card.tsx    | 70 +++++++++++--------
 src/core/contracts/jobs.ts              | 24 +++++++
 src/core/view.ts                        |  7 +-
 tests/artifact-ui.test.ts               | 90 ++++++++++++++++++++++++
 tests/demos.test.tsx                    | 46 ++++++++++++-
 8 files changed, 312 insertions(+), 61 deletions(-)
 create mode 100644 app/api/chats/[id]/artifact-ui/route.ts
 create mode 100644 tests/artifact-ui.test.ts

diff --git a/app/api/chats/[id]/artifact-ui/route.ts b/app/api/chats/[id]/artifact-ui/route.ts
new file mode 100644
index 0000000..4bf1b86
--- /dev/null
+++ b/app/api/chats/[id]/artifact-ui/route.ts
@@ -0,0 +1,41 @@
+/**
+ * THE ARTIFACT-UI ROUTE (owner, 2026-10-07): persists the learner's invert
+ * switch onto a demo/figure steer message (details.ui.inverted) so it
+ * survives session navigation and restarts. Modeled on the dismissal
+ * route's SILENCE: no wake, no agent, no tokens, no SSE — the record is
+ * the only state that moves, and the client already holds the toggled
+ * state optimistically (no refetch churn).
+ *
+ * Guards: 404 unknown chat, 400 for a body that isn't
+ * { input: { messageId, inverted } } or targets no demo/visual steer.
+ */
+import { setSteerUiInverted, type SteerDetails } from "@/src/core";
+import { getChat, stores } from "@/src/server";
+
+export async function POST(req: Request, ctx: { params: Promise<{ id: string }> }): Promise<Response> {
+	const { id } = await ctx.params;
+	const chat = getChat(id);
+	if (!chat) return Response.json({ error: "Unknown chat" }, { status: 404 });
+
+	const body = (await req.json().catch(() => null)) as { input?: unknown } | null;
+	const input = body?.input as { messageId?: unknown; inverted?: unknown } | null | undefined;
+	if (
+		!input ||
+		typeof input !== "object" ||
+		typeof input.messageId !== "string" ||
+		typeof input.inverted !== "boolean"
+	) {
+		return Response.json({ error: "input must be { messageId: string, inverted: boolean }" }, { status: 400 });
+	}
+
+	// Honesty: the target must actually be a demo/figure steer.
+	const target = chat.messages.find((m) => m.id === input.messageId);
+	const details = target ? ((target as { details?: unknown }).details as Partial<SteerDetails> | undefined) : undefined;
+	if (!details || (details.kind !== "demo" && details.kind !== "visual")) {
+		return Response.json({ error: "No demo/figure steer with that message id" }, { status: 400 });
+	}
+
+	const messages = setSteerUiInverted(chat.messages, input.messageId, input.inverted);
+	stores.chatStore.saveMessages(id, messages);
+	return Response.json({ ok: true });
+}
diff --git a/components/artifacts/demo-card.tsx b/components/artifacts/demo-card.tsx
index 574cd93..305ef4a 100644
--- a/components/artifacts/demo-card.tsx
+++ b/components/artifacts/demo-card.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
-import { ContrastIcon, DownloadIcon } from "lucide-react";
+import { DownloadIcon } from "lucide-react";
+import { Toggle } from "@/components/settings/controls";
 import { ChatActionsContext } from "@/components/chat";
 import { downloadFile, slugFilename } from "@/components/artifacts/download";
 import { DispatchCard } from "@/components/artifacts/dispatch-card";
@@ -28,7 +29,14 @@ import type { ArtifactPartProps, DemoResult } from "@/src/core";
 
 export const DEMO_BRIDGE_SCRIPT = `<script>(function(){
 var send=function(m){try{parent.postMessage(m,"*")}catch(e){}};
-var post=function(){send({type:"demo-resize",height:document.documentElement.scrollHeight})};
+var post=function(){
+var b=document.body;
+if(!b){send({type:"demo-resize",height:document.documentElement.scrollHeight});return}
+var h=Math.max(b.scrollHeight,b.getBoundingClientRect().height);
+var cs=getComputedStyle(b);
+h+=(parseFloat(cs.marginTop)||0)+(parseFloat(cs.marginBottom)||0);
+send({type:"demo-resize",height:Math.ceil(h)})
+};
 if(typeof ResizeObserver!=="undefined"){new ResizeObserver(post).observe(document.documentElement)}
 window.addEventListener("resize",post);
 window.addEventListener("load",post);
@@ -79,8 +87,18 @@ export function DemoCard({ part }: ArtifactPartProps) {
 	return <DispatchCard toolCallId={part.toolCallId} kind="demo" />;
 }
 
-/** The demo artifact — exported: the steer card renders the delivered result. */
-export function DemoOutputCard({ output }: { output: unknown }) {
+/** The demo artifact — exported: the steer card renders the delivered
+ *  result. `messageId` + `initialInverted` carry the PERSISTED invert
+ *  switch (details.ui.inverted via the artifact-ui route, owner 2026-10-07). */
+export function DemoOutputCard({
+	output,
+	messageId,
+	initialInverted = false,
+}: {
+	output: unknown;
+	messageId?: string;
+	initialInverted?: boolean;
+}) {
 	const result = output as DemoResult | undefined;
 	if (!result || typeof result.html !== "string" || typeof result.title !== "string") {
 		return (
@@ -101,18 +119,42 @@ export function DemoOutputCard({ output }: { output: unknown }) {
 			</div>
 		);
 	}
-	return <DemoFrame title={result.title} html={result.html} />;
+	return (
+		<DemoFrame title={result.title} html={result.html} messageId={messageId} initialInverted={initialInverted} />
+	);
 }
 
-function DemoFrame({ title, html }: { title: string; html: string }) {
+function DemoFrame({
+	title,
+	html,
+	messageId,
+	initialInverted = false,
+}: {
+	title: string;
+	html: string;
+	messageId?: string;
+	initialInverted?: boolean;
+}) {
 	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);
+	// Brightness inversion (owner, 2026-10-07): the switch state PERSISTS on
+	// the steer record (details.ui.inverted) — seeded here, written through
+	// the silent artifact-ui route on toggle. Without a chat page (tests,
+	// previews) the toggle stays local-only. The filter rides the iframe
+	// element, which carries the card's white backing, so one filter flips
+	// page + content together while hue-rotate(180deg) undoes invert's hue
+	// flip.
+	const [inverted, setInverted] = useState(initialInverted);
+	const toggleInverted = (next: boolean) => {
+		setInverted(next);
+		if (!actions?.chatId || !messageId) return;
+		void fetch(`/api/chats/${actions.chatId}/artifact-ui`, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ input: { messageId, inverted: next } }),
+		}).catch(() => {});
+	};
 	const srcDoc = useMemo(() => buildDemoSrcDoc(html), [html]);
 
 	useEffect(() => {
@@ -128,20 +170,18 @@ function DemoFrame({ title, html }: { title: string; html: string }) {
 
 	return (
 		<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="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>
+			{/* Caption header (owner, 2026-10-07): kind label + title in the
+			   label's size/tracking (title normal-case, foreground) — the
+			   figure card's grammar plus a name. Switch + download far right. */}
+			<div className="flex items-center justify-between gap-2">
+				<div className="flex min-w-0 items-baseline gap-2">
+					<span className="shrink-0 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+						interactive demo
+					</span>
+					<span className="truncate text-xs font-medium tracking-wide text-foreground">{title}</span>
+				</div>
+				<div className="flex shrink-0 items-center gap-1.5">
+					<Toggle checked={inverted} onChange={toggleInverted} label="Invert demo brightness" />
 					<button
 						type="button"
 						aria-label="Download demo as HTML"
@@ -152,7 +192,6 @@ function DemoFrame({ title, html }: { title: string; html: string }) {
 					>
 						<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 && (
diff --git a/components/artifacts/steer-card.tsx b/components/artifacts/steer-card.tsx
index 8e54cb1..636b361 100644
--- a/components/artifacts/steer-card.tsx
+++ b/components/artifacts/steer-card.tsx
@@ -56,9 +56,9 @@ export function SubagentSteerCard({ message }: { message: LhViewMessage }) {
 				<PdfCompleteBadge result={data.result as PdfResult} />
 			);
 		case "demo":
-			return <DemoOutputCard output={data.result} />;
+			return <DemoOutputCard output={data.result} messageId={message.id} initialInverted={data.ui?.inverted ?? false} />;
 		case "visual":
-			return <VisualOutputCard output={data.result} />;
+			return <VisualOutputCard output={data.result} messageId={message.id} initialInverted={data.ui?.inverted ?? false} />;
 	}
 }
 
diff --git a/components/artifacts/visual-card.tsx b/components/artifacts/visual-card.tsx
index 4288520..4ec956a 100644
--- a/components/artifacts/visual-card.tsx
+++ b/components/artifacts/visual-card.tsx
@@ -1,7 +1,9 @@
 "use client";
 
-import { useState } from "react";
-import { ContrastIcon, DownloadIcon, MaximizeIcon } from "lucide-react";
+import { useContext, useState } from "react";
+import { ChatActionsContext } from "@/components/chat";
+import { DownloadIcon, MaximizeIcon } from "lucide-react";
+import { Toggle } from "@/components/settings/controls";
 import { useSessionMermaid } from "@/components/session-overlay";
 import { downloadFile } from "@/components/artifacts/download";
 import { DispatchCard } from "@/components/artifacts/dispatch-card";
@@ -49,13 +51,33 @@ export function VisualCard({ part }: ArtifactPartProps) {
 }
 
 /** The figure itself — exported: the steer card renders the delivered artifact. */
-export function VisualOutputCard({ output }: { output: unknown }) {
+export function VisualOutputCard({
+	output,
+	messageId,
+	initialInverted = false,
+}: {
+	output: unknown;
+	messageId?: string;
+	initialInverted?: boolean;
+}) {
 	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 actions = useContext(ChatActionsContext);
+	// Brightness inversion (owner, 2026-10-07): the switch state PERSISTS on
+	// the steer record (details.ui.inverted) — seeded here, written through
+	// the silent artifact-ui route on toggle; without a chat page (tests,
+	// previews) it stays local-only. The toggled state also feeds the
+	// fullscreen overlay (openFigure).
+	const [inverted, setInverted] = useState(initialInverted);
+	const toggleInverted = (next: boolean) => {
+		setInverted(next);
+		if (!actions?.chatId || !messageId) return;
+		void fetch(`/api/chats/${actions.chatId}/artifact-ui`, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ input: { messageId, inverted: next } }),
+		}).catch(() => {});
+	};
 	const natural = result && typeof result.svg === "string" ? svgNaturalWidth(result.svg) : null;
 	if (!result || typeof result.svg !== "string") {
 		return (
@@ -80,7 +102,18 @@ export function VisualOutputCard({ output }: { output: unknown }) {
 		<div className="rounded-xl border bg-card p-4 text-card-foreground" data-testid="visual-card">
 			<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">
+				<div className="flex items-center gap-1.5">
+					<Toggle checked={inverted} onChange={toggleInverted} label="Invert figure brightness" />
+					<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>
 					{overlay && (
 						<button
 							type="button"
@@ -93,27 +126,6 @@ export function VisualOutputCard({ output }: { output: unknown }) {
 							<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
diff --git a/src/core/contracts/jobs.ts b/src/core/contracts/jobs.ts
index 9158b0d..dd55d0c 100644
--- a/src/core/contracts/jobs.ts
+++ b/src/core/contracts/jobs.ts
@@ -271,12 +271,36 @@ export interface SubagentResultMeta {
 export interface SubagentArtifactData {
 	kind: JobKind;
 	result: ResearchResult | DemoResult | VisualResult | PdfResult;
+	/** The learner's pinned UI state (invert switch) riding the record. */
+	ui?: { inverted?: boolean };
 }
 
 /** A result steer's marker details: the UI's meta + artifact in one
  *  payload (the projection splits it into metadata + data part). */
 export interface SteerDetails extends SubagentResultMeta {
 	result: ResearchResult | DemoResult | VisualResult | PdfResult;
+	/** LEARNER UI state pinned onto the artifact (owner, 2026-10-07): the
+	 *  invert switch's position, persisted so navigating away and back (or
+	 *  restarting) keeps it. A VIEW preference — never enters the teacher's
+	 *  context, never exports (the markdown engine reads `result` only). */
+	ui?: { inverted?: boolean };
+}
+
+/** Set a steer message's ui.inverted (pure): returns a NEW message array
+ *  with the target's details updated — no-op (same array) when the message
+ *  is missing or not an invertible artifact steer. The silent route's
+ *  whole body. */
+export function setSteerUiInverted(
+	messages: readonly LhMessage[],
+	messageId: string,
+	inverted: boolean,
+): LhMessage[] {
+	return messages.map((m) => {
+		if (m.id !== messageId) return m;
+		const d = (m as LhMarkerMessage).details as Partial<SteerDetails> | undefined;
+		if (!d || (d.kind !== "demo" && d.kind !== "visual")) return m;
+		return { ...m, details: { ...d, ui: { ...d.ui, inverted } } } as LhMessage;
+	});
 }
 
 /** Anything the wake pipeline may queue and deliver — a native marker. */
diff --git a/src/core/view.ts b/src/core/view.ts
index 1bf6148..609de06 100644
--- a/src/core/view.ts
+++ b/src/core/view.ts
@@ -368,6 +368,7 @@ function projectMarker(marker: LhMarkerMessage, out: LhViewMessage[]): void {
 			const artifact = marker.details as {
 				kind: SubagentArtifactData["kind"];
 				result: SubagentArtifactData["result"];
+				ui?: SubagentArtifactData["ui"];
 			};
 			out.push({
 				id: marker.id,
@@ -375,7 +376,11 @@ function projectMarker(marker: LhMarkerMessage, out: LhViewMessage[]): void {
 				metadata: { subagentResult: meta },
 				parts: [
 					textPart(marker.content),
-					{ type: "data-subagent-artifact", id: `sa_${marker.id}`, data: { kind: artifact.kind, result: artifact.result } },
+					{
+						type: "data-subagent-artifact",
+						id: `sa_${marker.id}`,
+						data: { kind: artifact.kind, result: artifact.result, ui: artifact.ui },
+					},
 				],
 			});
 			return;
diff --git a/tests/artifact-ui.test.ts b/tests/artifact-ui.test.ts
new file mode 100644
index 0000000..2096f3c
--- /dev/null
+++ b/tests/artifact-ui.test.ts
@@ -0,0 +1,90 @@
+/**
+ * THE ARTIFACT-UI ROUTE (owner, 2026-10-07): POST /api/chats/:id/artifact-ui
+ * persists the learner's invert switch onto a demo/figure steer message
+ * (details.ui.inverted) — the silent record-write route (no wake, no SSE).
+ * The pure core (setSteerUiInverted) is pinned in tests/demos.test.tsx;
+ * this file pins the ROUTE contract: 404 unknown chat, 400 for a bad body
+ * or a non-artifact message id, and the record actually carrying the flag
+ * after a write.
+ *
+ * Runs under an isolated LH_DATA_DIR (the chat-birth-stamp discipline:
+ * the seam is set before any config-loading import, so every app-module
+ * import is dynamic).
+ */
+import assert from "node:assert/strict";
+import fs from "node:fs";
+import * as os from "node:os";
+import * as path from "node:path";
+import { after, before, describe, it } from "node:test";
+
+// ── the seam, BEFORE any config-loading import ──────────────────────────────
+const TMP_DATA = fs.mkdtempSync(path.join(os.tmpdir(), "lh-artifact-ui-"));
+process.env.LH_DATA_DIR = TMP_DATA;
+
+type Post = (req: Request, ctx: { params: Promise<{ id: string }> }) => Promise<Response>;
+let POST: Post;
+let createChat: (title: string, kind?: "practice") => { id: string; title: string };
+let saveMessages: (id: string, messages: unknown[]) => void;
+let getChat: (id: string) => { messages: unknown[] } | undefined;
+let buildSubagentSteerFn: typeof import("../src/core/contracts.ts").buildSubagentSteer;
+
+before(async () => {
+	const route = await import("../app/api/chats/[id]/artifact-ui/route.ts");
+	POST = route.POST;
+	const server = await import("../src/server/chats.ts");
+	createChat = server.createChat;
+	getChat = server.getChat as typeof getChat;
+	const { chatStore } = await import("../src/store/chats.ts");
+	saveMessages = (id, messages) => chatStore.saveMessages(id, messages as never);
+	const contracts = await import("../src/core/contracts.ts");
+	buildSubagentSteerFn = contracts.buildSubagentSteer;
+});
+
+const post = (id: string, body: unknown) =>
+	POST(new Request("http://x/api", { method: "POST", body: JSON.stringify(body) }), {
+		params: Promise.resolve({ id }),
+	});
+
+describe("POST /api/chats/:id/artifact-ui", () => {
+	it("404s an unknown chat", async () => {
+		const res = await post("nope", { input: { messageId: "x", inverted: true } });
+		assert.equal(res.status, 404);
+	});
+
+	it("400s a malformed body and a non-artifact message id", async () => {
+		const chat = createChat("Artifact UI guards");
+		const steer = buildSubagentSteerFn(
+			{ id: "jg", kind: "demo", toolCallId: "cg" },
+			{ title: "T", html: "<p>x</p>", tested: true },
+		);
+		saveMessages(chat.id, [
+			{ id: "m1", role: "user", content: "hi" },
+			steer as never,
+		]);
+		assert.equal((await post(chat.id, { input: { messageId: "m1", inverted: true } })).status, 400);
+		assert.equal((await post(chat.id, { input: { messageId: "missing", inverted: true } })).status, 400);
+		assert.equal((await post(chat.id, {})).status, 400);
+		assert.equal((await post(chat.id, { input: { messageId: "m1", inverted: "yes" } })).status, 400);
+	});
+
+	it("persists ui.inverted onto the demo steer and toggles it back", async () => {
+		const chat = createChat("Artifact UI round trip");
+		const steer = buildSubagentSteerFn(
+			{ id: "jk", kind: "visual", toolCallId: "ck" },
+			{ svg: '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"></svg>' },
+		);
+		saveMessages(chat.id, [steer as never]);
+
+		assert.equal((await post(chat.id, { input: { messageId: steer.id, inverted: true } })).status, 200);
+		let saved = getChat(chat.id)!.messages as [{ details: { ui?: { inverted?: boolean } } }];
+		assert.equal(saved[0]!.details.ui?.inverted, true, "the flag rides the record");
+
+		assert.equal((await post(chat.id, { input: { messageId: steer.id, inverted: false } })).status, 200);
+		saved = getChat(chat.id)!.messages as [{ details: { ui?: { inverted?: boolean } } }];
+		assert.equal(saved[0]!.details.ui?.inverted, false, "and toggles back off");
+	});
+});
+
+after(() => {
+	fs.rmSync(TMP_DATA, { recursive: true, force: true });
+});
diff --git a/tests/demos.test.tsx b/tests/demos.test.tsx
index 6181b77..990814f 100644
--- a/tests/demos.test.tsx
+++ b/tests/demos.test.tsx
@@ -34,6 +34,7 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { PATHS } from "../config.ts";
 import {
 	buildDemoSrcDoc,
+	DEMO_BRIDGE_SCRIPT,
 	DemoCard,
 	DemoErrorChip,
 	INITIAL_DEMO_BRIDGE_STATE,
@@ -52,7 +53,7 @@ import { runDemoBuilder } from "../src/agent/subagents/demo-builder.ts";
 import { headlessOverride, type DemoRunResult, type HeadlessApi } from "../src/agent/subagents/headless.ts";
 import { createJobRunner, demoModelOverride, visualModelOverride } from "../src/agent/subagents/runner.ts";
 import { runVisualMaker } from "../src/agent/subagents/visual-maker.ts";
-import { buildAbortSteer, buildSubagentSteer, isSubagentFailure, type SteerMessage } from "../src/core/contracts.ts";
+import { buildAbortSteer, buildSubagentSteer, isSubagentFailure, setSteerUiInverted, type SteerMessage } from "../src/core/contracts.ts";
 import type { JobRecord } from "../src/core/contracts.ts";
 import { createTeacherTools } from "../src/agent/tools.ts";
 import { chatStore } from "../src/store/chats.ts";
@@ -488,15 +489,17 @@ describe("artifact chrome — scrollbar, invert toggles, downloads (release poli
 		);
 		const html = renderToStaticMarkup(<SubagentSteerCard message={projectNative([steer])[0] as never} />);
 		assert.match(html, /scrolling="no"/, "no internal scrollbar — the wheel chains to the session");
-		assert.match(html, /data-testid="demo-invert"/);
+		assert.match(html, /toggle-invert-demo-brightness/, "the invert switch (house Toggle)");
 		assert.match(html, /data-testid="demo-download"/);
 		assert.ok(!html.includes("hue-rotate"), "inversion is OFF by default — a manual toggle only");
+		assert.match(html, /interactive demo/, "the kind label lives in the caption header");
+		assert.match(html, /Wave interference/, "the title rides beside the kind label");
 	});
 
 	it("figure card: invert + download buttons; NO fullscreen button without a chat page (the context is null there)", () => {
 		const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"><circle cx="50" cy="50" r="20"/></svg>';
 		const html = renderToStaticMarkup(<VisualOutputCard output={{ svg }} />);
-		assert.match(html, /data-testid="visual-invert"/);
+		assert.match(html, /toggle-invert-figure-brightness/, "the invert switch (house Toggle)");
 		assert.match(html, /data-testid="visual-download"/);
 		assert.ok(!html.includes('data-testid="visual-open"'), "fullscreen needs the session overlay context");
 		assert.ok(!html.includes("hue-rotate"), "inversion OFF by default");
@@ -526,6 +529,43 @@ describe("artifact chrome — scrollbar, invert toggles, downloads (release poli
 	});
 });
 
+describe("bridge height: the body-based measure (ratchet fix, 2026-10-07)", () => {
+	it("DEMO_BRIDGE_SCRIPT measures the BODY (scrollHeight + rect + margins), not the viewport-clamped documentElement", () => {
+		// documentElement.scrollHeight = max(content, viewport) latches at
+		// the parent's own height — a demo could grow but never shrink on
+		// window resize (owner-reported). The body metrics are pure content.
+		assert.ok(DEMO_BRIDGE_SCRIPT.includes("Math.max(b.scrollHeight,b.getBoundingClientRect().height)"));
+		assert.ok(DEMO_BRIDGE_SCRIPT.includes("getComputedStyle(b)"));
+		assert.ok(!/post=function\(\)\{send\(\{type:"demo-resize",height:document\.documentElement\.scrollHeight\}\)\};/.test(DEMO_BRIDGE_SCRIPT));
+	});
+});
+
+describe("setSteerUiInverted (the persisted invert switch, 2026-10-07)", () => {
+	const demoSteer = buildSubagentSteer(
+		{ id: "jx", kind: "demo", toolCallId: "cx" },
+		{ title: "T", html: "<p>x</p>", tested: true },
+	);
+	const other = { id: "other", role: "user" as const, content: "hi", timestamp: 1 };
+
+	it("writes ui.inverted on the target steer and leaves everything else untouched", () => {
+		const out = setSteerUiInverted([other, demoSteer], demoSteer.id, true);
+		assert.equal(out.length, 2);
+		assert.deepEqual(
+			(out[1] as { details: { ui?: { inverted?: boolean } } }).details.ui,
+			{ inverted: true },
+		);
+		assert.equal(out[0], other, "untouched messages pass through by identity");
+	});
+
+	it("toggles back to false; missing or non-artifact messages are no-ops (same array members)", () => {
+		const on = setSteerUiInverted([demoSteer], demoSteer.id, true);
+		const off = setSteerUiInverted(on, demoSteer.id, false);
+		assert.equal((off[0] as { details: { ui?: { inverted?: boolean } } }).details.ui?.inverted, false);
+		const missing = setSteerUiInverted([demoSteer], "nope", true);
+		assert.equal(missing[0], demoSteer, "no target → identity");
+	});
+});
+
 describe("sanitizeSvg", () => {
 	it("strips script blocks, event handlers, and javascript: urls, keeps geometry", () => {
 		const dirty = '<svg width="10" height="10" onload="alert(1)"><script>alert(2)</script><circle r="1" onclick="pwn()"/><a href="javascript:alert(3)"><rect width="2" height="2"/></a></svg>';