sorokin.oleg.edu/learnharness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

artifacts: the height ratchet fixed, invert switch persisted + restyled (release polish 7.2)

Browse Source 
- 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
This commit is contained in:
amosblomqvist
2026-10-07 19:13:24 +03:00
parent 4070cc7926
commit 34f498b128
8 changed files with 312 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/artifact-ui.test.ts
+90
View File
@@ -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 });
});
tests/demos.test.tsx
+43 -3
View File
@@ -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>';