pike/glyph Public Public: anyone can read this; nobody can change it.

/**

 * The wall every SVG passes, the reply read back, and the palette swap.

 * The wall is the one place a model's output meets the page, so it is

 * tested by what gets through: nothing that runs, loads or links.

 */

import { expect, test } from "bun:test";

import { claudeEnv, drawArgs, resultText } from "./claude.ts";

import { claudeDrawer } from "./draw.ts";

import { ask, GLOW, INK, inPalette, nameOf, PALETTES, PAPER, parseReply, sanitize } from "./glyph.ts";

const ok = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>Hex Chip</title><path d="M12 2 L52 2" stroke="${INK}" stroke-width="4" stroke-linecap="round"/><circle cx="32" cy="32" r="6" fill="${GLOW}"/></svg>`;

test("a clean SVG comes through as it was", () => {

  expect(sanitize(ok)).toBe(ok);

  expect(nameOf(ok)).toBe("Hex Chip");

});

test("nothing that runs, loads or links gets through", () => {

  const evil = `<svg viewBox="0 0 64 64" onload="alert(1)" style="x">

    <script>alert(1)</script>

    <foreignObject><div onclick="x">hi</div></foreignObject>

    <image href="https://evil.example/x.png"/>

    <a href="javascript:alert(1)"><circle cx="1" cy="1" r="1"/></a>

    <use href="https://evil.example/s.svg#x"/>

    <style>@import url(https://evil.example)</style>

    <path d="M0 0L9 9" fill="url(https://evil.example/#g)" onmouseover="x" stroke="${INK}" transform="translate(2 2)"/>

    <rect x="1" y="1" width="5" height="5" transform="expression(alert(1))"/>

    <!-- <script>alert(2)</script> -->

    <![CDATA[ <script>alert(3)</script> ]]>

  </svg>`;

  const clean = sanitize(evil)!;

  expect(clean).toBeDefined();

  for (const bad of ["script", "onload", "onclick", "onmouseover", "foreignObject", "image", "href", "javascript", "style", "url(", "evil", "expression", "<a", "<use", "alert"])

    expect([bad, clean.includes(bad)]).toEqual([bad, false]);

  // What was allowed inside survives: the path, its colour and its transform; the link's child went with it.

  expect(clean).toContain(`<path d="M0 0L9 9" stroke="${INK}" transform="translate(2 2)"/>`);

  expect(clean).toContain(`<rect x="1" y="1" width="5" height="5"/>`);

  expect(clean).not.toContain("<circle");

});

test("a value is a value: no colour functions, only a transform's own and a local url", () => {

  const svg = sanitize(`<svg viewBox="0 0 8 8"><circle r="1" fill="rgb(1,2,3)" stroke="hsl(1,2%,3%)" transform="rotate(45 4 4)"/></svg>`)!;

  expect(svg).toContain(`<circle r="1" transform="rotate(45 4 4)"/>`);

  // A url points inside the SVG, from a paint or a clip, and nowhere else.

  const refs = sanitize(`<svg viewBox="0 0 8 8"><circle r="1" fill="url(#a1)" stroke="url(data:x)" clip-path="url(#c)" opacity="url(#a1)"/><rect width="1" height="1" fill="url( #a1)" stroke="url(#a1) url(#b)"/></svg>`)!;

  expect(refs).toContain(`<circle r="1" fill="url(#a1)" clip-path="url(#c)"/>`);

  expect(refs).toContain(`<rect width="1" height="1"/>`);

  expect(sanitize(`<svg viewBox="0 0 8 8"><circle r="1" id="1x" fill="url(#1x)"/><circle r="1" id="ok-1"/></svg>`)).toContain(`<circle r="1"/><circle r="1" id="ok-1"/>`);

});

test("depth gets through: gradients, stops and clips, in the placeholder colours", () => {

  const deep = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><title>Lit Orb</title><defs><radialGradient id="a1" cx="0.35" cy="0.3" r="0.8" fx="0.3" fy="0.25" gradientTransform="rotate(10 0.5 0.5)"><stop offset="0" stop-color="${GLOW}"/><stop offset="1" stop-color="${INK}" stop-opacity="0.9"/></radialGradient><linearGradient id="a2" x1="0" y1="0" x2="0" y2="1" gradientUnits="objectBoundingBox" spreadMethod="pad"><stop offset="0%" stop-color="${PAPER}" stop-opacity="0.8"/><stop offset="100%" stop-color="${PAPER}" stop-opacity="0"/></linearGradient><clipPath id="a3" clipPathUnits="userSpaceOnUse"><circle cx="128" cy="128" r="100"/></clipPath></defs><g clip-path="url(#a3)"><circle cx="128" cy="128" r="100" fill="url(#a1)"/><ellipse cx="110" cy="80" rx="50" ry="26" fill="url(#a2)"/></g></svg>`;

  expect(sanitize(deep)).toBe(deep);

  // A gradient's transform is held to a transform's own grammar.

  expect(sanitize(`<svg viewBox="0 0 8 8"><linearGradient id="g" gradientTransform="url(x)"/><circle r="1"/></svg>`)).toContain(`<linearGradient id="g"/>`);

});

test("a title's text is text, and markup in values is refused", () => {

  const svg = sanitize(`<svg viewBox="0 0 8 8"><title>A &amp; B <b>bold</b></title><circle cx="4" cy="4" r="2" fill="&quot;&gt;&lt;script&gt;"/></svg>`)!;

  // An element inside a title goes with its content; the entity stays an entity.

  expect(svg).toContain("<title>A &amp; B </title>");

  expect(sanitize(`<svg viewBox="0 0 8 8"><title>R&D</title><circle r="1"/></svg>`)).toContain("<title>R&amp;D</title>");

  expect(svg).toContain(`<circle cx="4" cy="4" r="2"/>`);

});

test("no SVG, an empty one, a second root or a huge one is not kept", () => {

  expect(sanitize("just words")).toBeUndefined();

  expect(sanitize(`<svg viewBox="0 0 8 8"><title>Nothing</title></svg>`)).toBeUndefined();

  expect(sanitize(`<svg><circle r="2"/></svg>`)).toBeUndefined(); // no viewBox

  expect(sanitize(`<svg viewBox="0 0 8 8"><svg viewBox="0 0 8 8"><circle r="1"/></svg></svg>`)).toBeUndefined();

  const huge = `<svg viewBox="0 0 8 8">${`<circle cx="1" cy="1" r="1"/>`.repeat(2000)}</svg>`;

  expect(sanitize(huge)).toBeUndefined();

  // Unclosed tags are closed.

  expect(sanitize(`<svg viewBox="0 0 8 8"><g><circle r="1"/>`)).toBe(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><g><circle r="1"/></g></svg>`);

});

test("the reply's fenced blocks are read, bad ones dropped, at most four kept", () => {

  const reply = ["```svg", ok, "```", "```svg", "<svg>nope</svg>", "```", ...Array(5).fill(["```svg", ok, "```"]).flat()].join("\n");

  expect(parseReply(reply)).toEqual([ok, ok, ok, ok]);

  // No fences: the bare SVGs in the text.

  expect(parseReply(`Here: ${ok} and ${ok}`)).toEqual([ok, ok]);

  expect(parseReply("I can't draw that.")).toEqual([]);

});

test("a palette swaps ink and glow, even when one palette's ink is another's placeholder", () => {

  const neon = inPalette(ok, "neon");

  expect(neon).toContain(`stroke="${PALETTES.neon!.ink}"`);

  expect(neon).toContain(`fill="${PALETTES.neon!.glow}"`);

  expect(neon).not.toContain(INK);

  expect(inPalette(ok, "sage")).toBe(ok);

  expect(inPalette(ok.toUpperCase().replace("<SVG", "<svg"), "mono")).toContain(PALETTES.mono!.ink);

  // Paper is the palette's ground, swapped once even where a ground is some placeholder.

  const papered = `<svg viewBox="0 0 8 8"><stop stop-color="${PAPER}"/><circle r="1" fill="${INK}" stroke="${GLOW}"/></svg>`;

  for (const [key, p] of Object.entries(PALETTES))

    expect([key, inPalette(papered, key as keyof typeof PALETTES)]).toEqual([

      key,

      `<svg viewBox="0 0 8 8"><stop stop-color="${p.ground}"/><circle r="1" fill="${p.ink}" stroke="${p.glow}"/></svg>`,

    ]);

});

test("the ask names the brief, the kind, the colours and the count", () => {

  const text = ask("a fox", "badge");

  for (const part of ["a fox", "badge", INK, GLOW, PAPER, "4 distinct", "viewBox=\"0 0 256 256\"", "radialGradient", "url(#"])

    expect([part, text.includes(part)]).toEqual([part, true]);

});

test("Claude is started with no tools, and with nothing of ours but its token and the way out", () => {

  const args = drawArgs();

  expect(args.slice(args.indexOf("--tools"), args.indexOf("--tools") + 2)).toEqual(["--tools", ""]);

  expect(args).toContain("--no-session-persistence");

  const env = claudeEnv("tok", "/data/claude", {

    PATH: "/bin",

    HTTPS_PROXY: "http://127.0.0.1:3128",

    FORGE_APP_IDENTITY_KEY: "secret",

    SOMETHING_ELSE: "x",

  });

  expect(env).toMatchObject({ CLAUDE_CODE_OAUTH_TOKEN: "tok", CLAUDE_CONFIG_DIR: "/data/claude", HTTPS_PROXY: "http://127.0.0.1:3128" });

  expect(env.FORGE_APP_IDENTITY_KEY).toBeUndefined();

  expect(env.SOMETHING_ELSE).toBeUndefined();

});

test("Claude's answer is read, and a refusal or junk is a sentence, not a crash", async () => {

  const answer = JSON.stringify({ type: "result", is_error: false, result: "```svg\n" + ok + "\n```" });

  expect(resultText(answer)).toEqual({ ok: true, text: "```svg\n" + ok + "\n```" });

  expect(resultText("not json").ok).toBe(false);

  expect(resultText(JSON.stringify({ is_error: true, result: "Not logged in" }))).toEqual({ ok: false, why: "Claude stopped: Not logged in" });

  const seen: string[][] = [];

  const draw = claudeDrawer(async (args) => {

    seen.push([...args]);

    return answer;

  });

  expect(await draw("a fox", "mark")).toEqual([ok]);

  expect(seen[0]).toEqual(drawArgs());

  const empty = claudeDrawer(async () => JSON.stringify({ result: "Sorry, no." }));

  await expect(empty("a fox", "mark")).rejects.toThrow("no drawing in it passed");

});