@hyperspaceng/neural-web-ui 0.68.2 → 0.69.1

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## [Unreleased]
 
+## [0.69.0] - 2026-04-22
+
+### Breaking Changes
+
+- Migrated the web UI's TypeBox-based tool definitions and runtime dependency from `@sinclair/typebox` 0.34.x to `typebox` 1.x. Install and import from `typebox` instead of `@sinclair/typebox` when embedding or extending `@mariozechner/pi-web-ui` with shared TypeBox schemas ([#3112](https://github.com/badlogic/pi-mono/issues/3112))
+
+### Fixed
+
+- Render SVG artifact previews through a blob-backed image instead of injecting untrusted SVG markup into the page DOM ([#3552](https://github.com/badlogic/pi-mono/issues/3552))
+
 ## [0.68.1] - 2026-04-22
 
 ## [0.68.0] - 2026-04-20

package/example/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pi-web-ui-example",
-	"version": "0.68.2",
+	"version": "0.69.1",
 	"private": true,
 	"type": "module",
 	"scripts": {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyperspaceng/neural-web-ui",
-	"version": "0.68.2",
+	"version": "0.69.1",
 	"description": "Reusable web UI components for AI chat interfaces powered by @mariozechner/pi-ai",
 	"type": "module",
 	"main": "dist/index.js",
@@ -18,8 +18,9 @@
 	},
 	"dependencies": {
 		"@lmstudio/sdk": "^1.5.0",
-		"@hyperspaceng/neural-ai": "^0.68.2",
-		"@hyperspaceng/neural-tui": "^0.68.2",
+		"@hyperspaceng/neural-ai": "^0.69.1",
+		"@hyperspaceng/neural-tui": "^0.69.1",
+		"typebox": "^1.1.24",
 		"docx-preview": "^0.3.7",
 		"jszip": "^3.10.1",
 		"lucide": "^0.544.0",

package/src/tools/artifacts/SvgArtifact.ts

@@ -13,11 +13,17 @@ export class SvgArtifact extends ArtifactElement {
 	@property() override filename = "";
 
 	private _content = "";
+	@state() private previewUrl = "";
+
 	override get content(): string {
 		return this._content;
 	}
 	override set content(value: string) {
+		if (this._content === value) {
+			return;
+		}
 		this._content = value;
+		this.updatePreviewUrl();
 		this.requestUpdate();
 	}
 
@@ -31,6 +37,21 @@ export class SvgArtifact extends ArtifactElement {
 		this.viewMode = mode;
 	}
 
+	private revokePreviewUrl() {
+		if (this.previewUrl) {
+			URL.revokeObjectURL(this.previewUrl);
+			this.previewUrl = "";
+		}
+	}
+
+	private updatePreviewUrl() {
+		this.revokePreviewUrl();
+		if (!this._content) {
+			return;
+		}
+		this.previewUrl = URL.createObjectURL(new Blob([this._content], { type: "image/svg+xml" }));
+	}
+
 	public getHeaderButtons() {
 		const toggle = new PreviewCodeToggle();
 		toggle.mode = this.viewMode;
@@ -52,14 +73,34 @@ export class SvgArtifact extends ArtifactElement {
 		`;
 	}
 
+	override connectedCallback() {
+		super.connectedCallback();
+		if (this._content && !this.previewUrl) {
+			this.updatePreviewUrl();
+		}
+	}
+
+	override disconnectedCallback() {
+		super.disconnectedCallback();
+		this.revokePreviewUrl();
+	}
+
 	override render() {
 		return html`
 			<div class="h-full flex flex-col">
 				<div class="flex-1 overflow-auto">
 					${
 						this.viewMode === "preview"
-							? html`<div class="h-full flex items-center justify-center">
-								${unsafeHTML(this.content.replace(/<svg(\s|>)/i, (_m, p1) => `<svg class="w-full h-full"${p1}`))}
+							? html`<div class="h-full flex items-center justify-center p-4">
+								${
+									this.previewUrl
+										? html`<img
+												class="max-w-full max-h-full w-full h-full object-contain"
+												src="${this.previewUrl}"
+												alt="${this.filename}"
+											/>`
+										: ""
+								}
 							</div>`
 							: html`<pre class="m-0 p-4 text-xs"><code class="hljs language-xml">${unsafeHTML(
 									hljs.highlight(this.content, { language: "xml", ignoreIllegals: true }).value,

package/src/tools/artifacts/artifacts.ts

@@ -3,11 +3,11 @@ import "@mariozechner/mini-lit/dist/MarkdownBlock.js";
 import { Button } from "@mariozechner/mini-lit/dist/Button.js";
 import type { Agent, AgentMessage, AgentTool } from "@mariozechner/pi-agent-core";
 import { StringEnum, type ToolCall } from "@mariozechner/pi-ai";
-import { type Static, Type } from "@sinclair/typebox";
 import { html, LitElement, type TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createRef, type Ref, ref } from "lit/directives/ref.js";
 import { X } from "lucide";
+import { type Static, Type } from "typebox";
 import type { ArtifactMessage } from "../../components/Messages.js";
 import { ArtifactsRuntimeProvider } from "../../components/sandbox/ArtifactsRuntimeProvider.js";
 import { AttachmentsRuntimeProvider } from "../../components/sandbox/AttachmentsRuntimeProvider.js";

package/src/tools/extract-document.ts

@@ -1,9 +1,9 @@
 import type { AgentTool } from "@mariozechner/pi-agent-core";
 import type { ToolResultMessage } from "@mariozechner/pi-ai";
-import { type Static, Type } from "@sinclair/typebox";
 import { html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { FileText } from "lucide";
+import { type Static, Type } from "typebox";
 import { EXTRACT_DOCUMENT_DESCRIPTION } from "../prompts/prompts.js";
 import { loadAttachment } from "../utils/attachment-utils.js";
 import { isCorsError } from "../utils/proxy-utils.js";

package/src/tools/javascript-repl.ts

@@ -1,10 +1,10 @@
 import { i18n } from "@mariozechner/mini-lit";
 import type { AgentTool } from "@mariozechner/pi-agent-core";
 import type { ToolResultMessage } from "@mariozechner/pi-ai";
-import { type Static, Type } from "@sinclair/typebox";
 import { html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { Code } from "lucide";
+import { type Static, Type } from "typebox";
 import { type SandboxFile, SandboxIframe, type SandboxResult } from "../components/SandboxedIframe.js";
 import type { SandboxRuntimeProvider } from "../components/sandbox/SandboxRuntimeProvider.js";
 import { JAVASCRIPT_REPL_TOOL_DESCRIPTION } from "../prompts/prompts.js";