Add image artifact support with proper binary downloads

- Add ImageArtifact component for displaying images (.png, .jpg, .jpeg, .gif, .webp, .bmp, .ico)
- Images stored as base64, displayed via data URLs
- Download button properly decodes base64 to Uint8Array for valid binary downloads
- Fix Lit ChildPart error: use CSS rotation instead of innerHTML manipulation in collapsible headers

Changes:
- web-ui/src/tools/artifacts/ImageArtifact.ts: New image artifact component
- web-ui/src/tools/artifacts/artifacts.ts: Add "image" file type support
- web-ui/src/tools/renderer-registry.ts: Fix collapsible chevron to use CSS rotation
- web-ui/src/index.ts: Export ImageArtifact

packages/web-ui/src/index.ts

@@ -66,6 +66,7 @@ export { ArtifactPill } from "./tools/artifacts/ArtifactPill.js";
 export { type Artifact, ArtifactsPanel, type ArtifactsParams } from "./tools/artifacts/artifacts.js";
 export { ArtifactsToolRenderer } from "./tools/artifacts/artifacts-tool-renderer.js";
 export { HtmlArtifact } from "./tools/artifacts/HtmlArtifact.js";
+export { ImageArtifact } from "./tools/artifacts/ImageArtifact.js";
 export { MarkdownArtifact } from "./tools/artifacts/MarkdownArtifact.js";
 export { SvgArtifact } from "./tools/artifacts/SvgArtifact.js";
 export { TextArtifact } from "./tools/artifacts/TextArtifact.js";

packages/web-ui/src/tools/artifacts/ImageArtifact.ts

@@ -0,0 +1,116 @@
+import { DownloadButton } from "@mariozechner/mini-lit";
+import { html, type TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { i18n } from "../../utils/i18n.js";
+import { ArtifactElement } from "./ArtifactElement.js";
+
+@customElement("image-artifact")
+export class ImageArtifact extends ArtifactElement {
+	@property({ type: String }) private _content = "";
+
+	get content(): string {
+		return this._content;
+	}
+
+	set content(value: string) {
+		this._content = value;
+		this.requestUpdate();
+	}
+
+	protected override createRenderRoot(): HTMLElement | DocumentFragment {
+		return this;
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		this.style.display = "block";
+		this.style.height = "100%";
+	}
+
+	private getMimeType(): string {
+		const ext = this.filename.split(".").pop()?.toLowerCase();
+		if (ext === "jpg" || ext === "jpeg") return "image/jpeg";
+		if (ext === "gif") return "image/gif";
+		if (ext === "webp") return "image/webp";
+		if (ext === "svg") return "image/svg+xml";
+		if (ext === "bmp") return "image/bmp";
+		if (ext === "ico") return "image/x-icon";
+		return "image/png";
+	}
+
+	private getImageUrl(): string {
+		// If content is already a data URL, use it directly
+		if (this._content.startsWith("data:")) {
+			return this._content;
+		}
+		// Otherwise assume it's base64 and construct data URL
+		return `data:${this.getMimeType()};base64,${this._content}`;
+	}
+
+	private decodeBase64(): Uint8Array {
+		let base64Data: string;
+
+		// If content is a data URL, extract the base64 part
+		if (this._content.startsWith("data:")) {
+			const base64Match = this._content.match(/base64,(.+)/);
+			if (base64Match) {
+				base64Data = base64Match[1];
+			} else {
+				// Not a base64 data URL, return empty
+				return new Uint8Array(0);
+			}
+		} else {
+			// Otherwise use content as-is
+			base64Data = this._content;
+		}
+
+		// Decode base64 to binary string
+		const binaryString = atob(base64Data);
+
+		// Convert binary string to Uint8Array
+		const bytes = new Uint8Array(binaryString.length);
+		for (let i = 0; i < binaryString.length; i++) {
+			bytes[i] = binaryString.charCodeAt(i);
+		}
+
+		return bytes;
+	}
+
+	public getHeaderButtons() {
+		return html`
+			<div class="flex items-center gap-1">
+				${DownloadButton({
+					content: this.decodeBase64(),
+					filename: this.filename,
+					mimeType: this.getMimeType(),
+					title: i18n("Download"),
+				})}
+			</div>
+		`;
+	}
+
+	override render(): TemplateResult {
+		return html`
+			<div class="h-full flex flex-col bg-background overflow-auto">
+				<div class="flex-1 flex items-center justify-center p-4">
+					<img
+						src="${this.getImageUrl()}"
+						alt="${this.filename}"
+						class="max-w-full max-h-full object-contain"
+						@error=${(e: Event) => {
+							const target = e.target as HTMLImageElement;
+							target.src =
+								"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='50' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3EImage Error%3C/text%3E%3C/svg%3E";
+						}}
+					/>
+				</div>
+			</div>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"image-artifact": ImageArtifact;
+	}
+}

packages/web-ui/src/tools/artifacts/artifacts.ts

@@ -12,6 +12,7 @@ import { buildArtifactsDescription } from "../../prompts/tool-prompts.js";
 import { i18n } from "../../utils/i18n.js";
 import type { ArtifactElement } from "./ArtifactElement.js";
 import { HtmlArtifact } from "./HtmlArtifact.js";
+import { ImageArtifact } from "./ImageArtifact.js";
 import { MarkdownArtifact } from "./MarkdownArtifact.js";
 import { SvgArtifact } from "./SvgArtifact.js";
 import { TextArtifact } from "./TextArtifact.js";
@@ -92,11 +93,21 @@ export class ArtifactsPanel extends LitElement {
 	}
 
 	// Helper to determine file type from extension
-	private getFileType(filename: string): "html" | "svg" | "markdown" | "text" {
+	private getFileType(filename: string): "html" | "svg" | "markdown" | "image" | "text" {
 		const ext = filename.split(".").pop()?.toLowerCase();
 		if (ext === "html") return "html";
 		if (ext === "svg") return "svg";
 		if (ext === "md" || ext === "markdown") return "markdown";
+		if (
+			ext === "png" ||
+			ext === "jpg" ||
+			ext === "jpeg" ||
+			ext === "gif" ||
+			ext === "webp" ||
+			ext === "bmp" ||
+			ext === "ico"
+		)
+			return "image";
 		return "text";
 	}
 
@@ -117,6 +128,8 @@ export class ArtifactsPanel extends LitElement {
 				element = new SvgArtifact();
 			} else if (type === "markdown") {
 				element = new MarkdownArtifact();
+			} else if (type === "image") {
+				element = new ImageArtifact();
 			} else {
 				element = new TextArtifact();
 			}