@classic-homes/agent-chat 0.4.0 → 0.4.1

package/dist/artifact-pages.d.ts

@@ -0,0 +1,18 @@
+/** Pinned Mermaid ESM build, loaded from the CDN the sandbox CSP allows (`script-src https:`). */
+export declare const MERMAID_MODULE_URL = "https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.esm.min.mjs";
+/** How long the renderer may take to load before the page reports a failure. */
+export declare const MERMAID_LOAD_TIMEOUT_MS = 15000;
+/**
+ * Serialize a value as a JavaScript literal that is safe inside an inline `<script>`: no `<`
+ * (so no `</script>` or `<!--` breakout), `>` or `&`, and no raw U+2028/U+2029.
+ */
+export declare function inlineScriptLiteral(value: unknown): string;
+/**
+ * The initialization script of {@link mermaidPage}. It is emitted as `type="module"`, but is
+ * written to parse under either goal (dynamic `import()`, no import declarations, no top-level
+ * await), so a stripped `type` can never again leave the diagram unrendered without a message.
+ */
+export declare function mermaidScript(source: string): string;
+/** A sandbox page that renders Mermaid `source` and shows a visible error if it cannot. */
+export declare function mermaidPage(source: string): string;
+//# sourceMappingURL=artifact-pages.d.ts.map

package/dist/artifact-pages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"artifact-pages.d.ts","sourceRoot":"","sources":["../src/lib/artifact-pages.ts"],"names":[],"mappings":"AAOA,kGAAkG;AAClG,eAAO,MAAM,kBAAkB,yEACyC,CAAC;AAEzE,gFAAgF;AAChF,eAAO,MAAM,uBAAuB,QAAS,CAAC;AAE9C;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAO1D;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAiDpD;AAED,2FAA2F;AAC3F,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAYlD"}

package/dist/artifact-pages.js

@@ -0,0 +1,89 @@
+// Sandbox pages built for artifact types that are not HTML themselves. They render inside the
+// opaque-origin sandbox frame (apps/agent-api/public/frame.html) and inherit its CSP.
+//
+// These builders live in a .ts module on purpose: svelte-package strips `type="…"` from every
+// `<script` it finds in a .svelte file, string literals included, which silently turned the
+// Mermaid loader into a classic script (audit R18). Keep page HTML out of .svelte files.
+/** Pinned Mermaid ESM build, loaded from the CDN the sandbox CSP allows (`script-src https:`). */
+export const MERMAID_MODULE_URL = 'https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.esm.min.mjs';
+/** How long the renderer may take to load before the page reports a failure. */
+export const MERMAID_LOAD_TIMEOUT_MS = 15_000;
+/**
+ * Serialize a value as a JavaScript literal that is safe inside an inline `<script>`: no `<`
+ * (so no `</script>` or `<!--` breakout), `>` or `&`, and no raw U+2028/U+2029.
+ */
+export function inlineScriptLiteral(value) {
+    return JSON.stringify(value)
+        .replace(/</g, '\\u003c')
+        .replace(/>/g, '\\u003e')
+        .replace(/&/g, '\\u0026')
+        .replace(/\u2028/g, '\\u2028')
+        .replace(/\u2029/g, '\\u2029');
+}
+/**
+ * The initialization script of {@link mermaidPage}. It is emitted as `type="module"`, but is
+ * written to parse under either goal (dynamic `import()`, no import declarations, no top-level
+ * await), so a stripped `type` can never again leave the diagram unrendered without a message.
+ */
+export function mermaidScript(source) {
+    return `(function () {
+  var source = ${inlineScriptLiteral(source)};
+  var out = document.getElementById('diagram');
+  var settled = false;
+  function fail(message) {
+    if (settled) return;
+    settled = true;
+    out.removeAttribute('aria-busy');
+    var alert = document.createElement('p');
+    alert.setAttribute('role', 'alert');
+    alert.className = 'error';
+    alert.textContent = message;
+    var pre = document.createElement('pre');
+    pre.textContent = source;
+    out.replaceChildren(alert, pre);
+  }
+  function reason(error) {
+    return error && error.message ? error.message : String(error);
+  }
+  var timer = setTimeout(function () {
+    fail('The diagram renderer did not load in time.');
+  }, ${MERMAID_LOAD_TIMEOUT_MS});
+  import(${inlineScriptLiteral(MERMAID_MODULE_URL)}).then(
+    function (mod) {
+      clearTimeout(timer);
+      if (settled) return;
+      var mermaid = mod.default;
+      // Our own error replaces Mermaid's bomb graphic, which it would append to the page body.
+      mermaid.initialize({ startOnLoad: false, securityLevel: 'strict', suppressErrorRendering: true });
+      return mermaid.render('agent-mermaid-svg', source).then(
+        function (result) {
+          if (settled) return;
+          settled = true;
+          out.removeAttribute('aria-busy');
+          out.innerHTML = result.svg;
+          if (result.bindFunctions) result.bindFunctions(out);
+        },
+        function (error) {
+          fail('The diagram could not be rendered: ' + reason(error));
+        },
+      );
+    },
+    function (error) {
+      clearTimeout(timer);
+      fail('The diagram renderer could not be loaded: ' + reason(error));
+    },
+  );
+})();`;
+}
+/** A sandbox page that renders Mermaid `source` and shows a visible error if it cannot. */
+export function mermaidPage(source) {
+    return ('<!doctype html><html><head><meta charset="utf-8"><style>' +
+        'body{margin:0;padding:12px;font:14px/1.5 system-ui,sans-serif;color:#1f2937}' +
+        '#diagram svg{max-width:100%;height:auto}' +
+        '.error{margin:0 0 8px;color:#b91c1c}' +
+        'pre{margin:0;white-space:pre-wrap;font:12px/1.5 ui-monospace,monospace;color:#4b5563}' +
+        '</style></head><body><div id="diagram" aria-busy="true">Rendering diagram&hellip;</div>' +
+        '<script type="module">' +
+        mermaidScript(source) +
+        '</script></body></html>');
+}

package/dist/artifact-pages.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=artifact-pages.test.d.ts.map

package/dist/artifact-pages.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"artifact-pages.test.d.ts","sourceRoot":"","sources":["../src/lib/artifact-pages.test.ts"],"names":[],"mappings":""}

package/dist/artifact-pages.test.js

@@ -0,0 +1,102 @@
+import { readdirSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { runInThisContext, Script } from 'node:vm';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { inlineScriptLiteral, MERMAID_LOAD_TIMEOUT_MS, MERMAID_MODULE_URL, mermaidPage, mermaidScript, } from './artifact-pages.js';
+const BREAKOUT = 'graph TD\n  A["</script><script>alert(1)</script>"] --> B[<!-- x & y >]\u2028';
+function scripts(html) {
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    return [...doc.querySelectorAll('script')].map((s) => ({
+        attrs: s
+            .getAttributeNames()
+            .map((n) => `${n}=${s.getAttribute(n)}`)
+            .join(' '),
+        body: s.textContent ?? '',
+    }));
+}
+/** Run the page's init script against the current (jsdom) document with a stand-in `import()`. */
+function run(source, load) {
+    document.body.innerHTML = '<div id="diagram" aria-busy="true"></div>';
+    const body = mermaidScript(source).replace('import(', '__load(');
+    const init = runInThisContext(`(function (__load) {\n${body}\n})`);
+    init(load);
+}
+describe('mermaidPage', () => {
+    it('initializes the renderer from a module script', () => {
+        const found = scripts(mermaidPage('graph TD; A-->B'));
+        expect(found).toHaveLength(1);
+        expect(found[0].attrs).toBe('type=module');
+        expect(found[0].body).toContain(`import(${JSON.stringify(MERMAID_MODULE_URL)})`);
+    });
+    it('emits a script that parses as a module and as a classic script', async () => {
+        const body = mermaidScript(BREAKOUT);
+        expect(() => new Script(body)).not.toThrow();
+        // Module goal: strict mode, `import`/`await` reserved. vm.SourceTextModule is behind a
+        // flag, so check the module-only constraints the classic parse cannot see.
+        expect(() => new Script(`'use strict';${body}`)).not.toThrow();
+        expect(body).not.toMatch(/^\s*import\s[^(]/m);
+        expect(body).not.toMatch(/^\s*export\s/m);
+    });
+    it('cannot be broken out of by the diagram source', () => {
+        const html = mermaidPage(BREAKOUT);
+        const found = scripts(html);
+        expect(found).toHaveLength(1);
+        expect(html.match(/<\/script/gi)).toHaveLength(1);
+        expect(found[0].body).not.toMatch(/<\/?script|<!--|\u2028|\u2029/i);
+        expect(found[0].body).toContain(inlineScriptLiteral(BREAKOUT));
+        // The literal round-trips to the exact source.
+        expect(JSON.parse(inlineScriptLiteral(BREAKOUT))).toBe(BREAKOUT);
+        expect(runInThisContext(`(${inlineScriptLiteral(BREAKOUT)})`)).toBe(BREAKOUT);
+    });
+});
+describe('mermaid init script', () => {
+    beforeEach(() => vi.useFakeTimers());
+    afterEach(() => vi.useRealTimers());
+    it('renders the SVG and passes the exact source', async () => {
+        const render = vi.fn(async () => ({ svg: '<svg id="ok"></svg>' }));
+        const initialize = vi.fn();
+        const load = vi.fn(async () => ({ default: { initialize, render } }));
+        run(BREAKOUT, load);
+        await vi.runAllTimersAsync();
+        expect(load).toHaveBeenCalledWith(MERMAID_MODULE_URL);
+        expect(initialize).toHaveBeenCalledWith({
+            startOnLoad: false,
+            securityLevel: 'strict',
+            suppressErrorRendering: true,
+        });
+        expect(render).toHaveBeenCalledWith('agent-mermaid-svg', BREAKOUT);
+        expect(document.querySelector('#diagram svg#ok')).not.toBeNull();
+        expect(document.querySelector('[role="alert"]')).toBeNull();
+        expect(document.getElementById('diagram').hasAttribute('aria-busy')).toBe(false);
+    });
+    it('shows an error and the source when the renderer fails to load', async () => {
+        run('graph TD; A-->B', () => Promise.reject(new TypeError('Failed to fetch module')));
+        await vi.runAllTimersAsync();
+        expect(document.querySelector('[role="alert"]')?.textContent).toBe('The diagram renderer could not be loaded: Failed to fetch module');
+        expect(document.querySelector('#diagram pre')?.textContent).toBe('graph TD; A-->B');
+    });
+    it('shows an error when the diagram does not parse', async () => {
+        const render = () => Promise.reject(new Error('Parse error on line 1'));
+        run('graph ??', async () => ({ default: { initialize() { }, render } }));
+        await vi.runAllTimersAsync();
+        expect(document.querySelector('[role="alert"]')?.textContent).toBe('The diagram could not be rendered: Parse error on line 1');
+    });
+    it('shows an error when the renderer never loads', async () => {
+        run('graph TD; A-->B', () => new Promise(() => { }));
+        await vi.advanceTimersByTimeAsync(MERMAID_LOAD_TIMEOUT_MS);
+        expect(document.querySelector('[role="alert"]')?.textContent).toBe('The diagram renderer did not load in time.');
+    });
+});
+describe('svelte-package script-type stripping (R18)', () => {
+    // svelte-package removes `type="…"` from every `<script` in a .svelte file, string literals
+    // included. A .svelte file may hold only its own top-level <script> tags.
+    it('no component builds <script> markup in a string', () => {
+        const dir = join(import.meta.dirname, 'components');
+        for (const file of readdirSync(dir).filter((f) => f.endsWith('.svelte'))) {
+            const text = readFileSync(join(dir, file), 'utf8');
+            const tags = text.match(/<script\b[^>]*>/g) ?? [];
+            const topLevel = text.match(/^<script\b[^>]*>/gm) ?? [];
+            expect(tags, file).toEqual(topLevel);
+        }
+    });
+});

package/dist/components/ArtifactPanel.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Button, cn, Icon } from '@classic-homes/theme-svelte';
   import type { Artifact } from '../reducer.js';
+  import { mermaidPage } from '../artifact-pages.js';
   import { parseMarkdown } from '../markdown.js';
   import Markdown from './Markdown.svelte';
   import SandboxFrame from './SandboxFrame.svelte';
@@ -55,11 +56,6 @@
     if (timer) clearTimeout(timer);
   });
 
-  function mermaidPage(source: string): string {
-    const escaped = source.replace(/</g, '&lt;');
-    return `<!doctype html><html><body><pre class="mermaid">${escaped}</pre><script>import m from "https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.esm.min.mjs";m.initialize({startOnLoad:true});<\/script></body></html>`;
-  }
-
   async function copy(): Promise<void> {
     if (selected) await navigator.clipboard.writeText(selected.text);
   }
@@ -119,7 +115,8 @@
     <div class="min-h-0 flex-1 overflow-auto p-3">
       {#if selected.mediaType === 'text/markdown'}
         <Markdown html={markdownHtml} />
-      {:else if selected.mediaType === 'application/vnd.ant.code'}
+      {:else if selected.mediaType === 'application/vnd.ant.code' || (selected.mediaType === 'application/vnd.ant.mermaid' && selected.open)}
+        <!-- Mermaid renders once the artifact is complete; a partial diagram is a parse error. -->
         <pre class="overflow-auto whitespace-pre font-mono text-[13px] leading-relaxed"><code
             >{selected.text}</code
           ></pre>

package/dist/components/ArtifactPanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArtifactPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ArtifactPanel.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAM5C,UAAU,KAAK;IACb,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAkHH,QAAA,MAAM,aAAa,qDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ArtifactPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ArtifactPanel.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAO5C,UAAU,KAAK;IACb,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA+GH,QAAA,MAAM,aAAa,qDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/agent-chat",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "private": false,
   "type": "module",
   "description": "Svelte 5 chat UI for Classic Agent: session state, message list, composer, tool timeline, artifacts and MCP-UI sandbox frames. Consumed by the Classic App.",
@@ -17,8 +17,8 @@
     "dist"
   ],
   "dependencies": {
-    "@classic-homes/agent-client": "0.4.0",
-    "@classic-homes/agent-contracts": "0.4.0",
+    "@classic-homes/agent-client": "0.4.1",
+    "@classic-homes/agent-contracts": "0.4.1",
     "dompurify": "3.4.17"
   },
   "peerDependencies": {