Hello!
\nThis is a simple HTML page with some basic styling.
\n \nFeatures:
\n- \n
- Clean design \n
- Responsive layout \n
- Interactive button \n
+
+ ()}
+ .isStreaming=${state.isStreaming}
+ >
+
+
+
+ `;
+ }
+
+ private renderStats() {
+ if (!this.session) return html``;
+
+ const state = this.session.state;
+ const totals = state.messages
+ .filter((m) => m.role === "assistant")
+ .reduce(
+ (acc, msg: any) => {
+ const usage = msg.usage;
+ if (usage) {
+ acc.input += usage.input;
+ acc.output += usage.output;
+ acc.cacheRead += usage.cacheRead;
+ acc.cacheWrite += usage.cacheWrite;
+ acc.cost.total += usage.cost.total;
+ }
+ return acc;
+ },
+ {
+ input: 0,
+ output: 0,
+ cacheRead: 0,
+ cacheWrite: 0,
+ cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, total: 0 },
+ } satisfies Usage,
+ );
+
+ const hasTotals = totals.input || totals.output || totals.cacheRead || totals.cacheWrite;
+ const totalsText = hasTotals ? formatUsage(totals) : "";
+
+ return html`
+
+
+ `;
+ }
+
+ override render() {
+ if (!this.session)
+ return html`
+ ${this.showThemeToggle ? html`
+ ${totalsText ? html`${totalsText}` : ""}
+ ${i18n("No session set")}
`;
+
+ const session = this.session;
+ const state = this.session.state;
+ return html`
+
+
+
+ `;
+ }
+}
+
+// Register custom element with guard
+if (!customElements.get("agent-interface")) {
+ customElements.define("agent-interface", AgentInterface);
+}
diff --git a/packages/web-ui/src/components/AttachmentTile.ts b/packages/web-ui/src/components/AttachmentTile.ts
new file mode 100644
index 00000000..15d3dd03
--- /dev/null
+++ b/packages/web-ui/src/components/AttachmentTile.ts
@@ -0,0 +1,112 @@
+import { html, icon } from "@mariozechner/mini-lit";
+import { LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { FileSpreadsheet, FileText, X } from "lucide";
+import { AttachmentOverlay } from "../dialogs/AttachmentOverlay.js";
+import type { Attachment } from "../utils/attachment-utils.js";
+import { i18n } from "../utils/i18n.js";
+
+@customElement("attachment-tile")
+export class AttachmentTile extends LitElement {
+ @property({ type: Object }) attachment!: Attachment;
+ @property({ type: Boolean }) showDelete = false;
+ @property() onDelete?: () => void;
+
+ protected override createRenderRoot(): HTMLElement | DocumentFragment {
+ return this;
+ }
+
+ override connectedCallback(): void {
+ super.connectedCallback();
+ this.style.display = "block";
+ this.classList.add("max-h-16");
+ }
+
+ private handleClick = () => {
+ AttachmentOverlay.open(this.attachment);
+ };
+
+ override render() {
+ const hasPreview = !!this.attachment.preview;
+ const isImage = this.attachment.type === "image";
+ const isPdf = this.attachment.mimeType === "application/pdf";
+ const isDocx =
+ this.attachment.mimeType?.includes("wordprocessingml") ||
+ this.attachment.fileName.toLowerCase().endsWith(".docx");
+ const isPptx =
+ this.attachment.mimeType?.includes("presentationml") ||
+ this.attachment.fileName.toLowerCase().endsWith(".pptx");
+ const isExcel =
+ this.attachment.mimeType?.includes("spreadsheetml") ||
+ this.attachment.fileName.toLowerCase().endsWith(".xlsx") ||
+ this.attachment.fileName.toLowerCase().endsWith(".xls");
+
+ // Choose the appropriate icon
+ const getDocumentIcon = () => {
+ if (isExcel) return icon(FileSpreadsheet, "md");
+ return icon(FileText, "md");
+ };
+
+ return html`
+
+
+
+
+ ${this.renderMessages()}
+
+
+
+ {
+ this.sendMessage(input, attachments);
+ }}
+ .onAbort=${() => session.abort()}
+ .onModelSelect=${() => {
+ ModelSelector.open(state.model, (model) => session.setModel(model));
+ }}
+ .onThinkingChange=${
+ this.enableThinking
+ ? (level: "off" | "minimal" | "low" | "medium" | "high") => {
+ session.setThinkingLevel(level);
+ }
+ : undefined
+ }
+ >
+ ${this.renderStats()}
+
+
+ ${
+ hasPreview
+ ? html`
+
+ `;
+ }
+}
diff --git a/packages/web-ui/src/components/ConsoleBlock.ts b/packages/web-ui/src/components/ConsoleBlock.ts
new file mode 100644
index 00000000..b4949bee
--- /dev/null
+++ b/packages/web-ui/src/components/ConsoleBlock.ts
@@ -0,0 +1,67 @@
+import { html, icon } from "@mariozechner/mini-lit";
+import { LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
+import { Check, Copy } from "lucide";
+import { i18n } from "../utils/i18n.js";
+
+export class ConsoleBlock extends LitElement {
+ @property() content: string = "";
+ @state() private copied = false;
+
+ protected override createRenderRoot(): HTMLElement | DocumentFragment {
+ return this;
+ }
+
+ override connectedCallback(): void {
+ super.connectedCallback();
+ this.style.display = "block";
+ }
+
+ private async copy() {
+ try {
+ await navigator.clipboard.writeText(this.content || "");
+ this.copied = true;
+ setTimeout(() => {
+ this.copied = false;
+ }, 1500);
+ } catch (e) {
+ console.error("Copy failed", e);
+ }
+ }
+
+ override updated() {
+ // Auto-scroll to bottom on content changes
+ const container = this.querySelector(".console-scroll") as HTMLElement | null;
+ if (container) {
+ container.scrollTop = container.scrollHeight;
+ }
+ }
+
+ override render() {
+ return html`
+
+ 
+ ${
+ isPdf
+ ? html`
+
+
+ `
+ : html`
+
+
+
+ `
+ : ""
+ }
+ ${i18n("PDF")}
+
+ ${getDocumentIcon()}
+
+ `
+ }
+ ${
+ this.showDelete
+ ? html`
+
+ `
+ : ""
+ }
+
+ ${
+ this.attachment.fileName.length > 10
+ ? this.attachment.fileName.substring(0, 8) + "..."
+ : this.attachment.fileName
+ }
+
+
+
+ `;
+ }
+}
+
+// Register custom element
+if (!customElements.get("console-block")) {
+ customElements.define("console-block", ConsoleBlock);
+}
diff --git a/packages/web-ui/src/components/Input.ts b/packages/web-ui/src/components/Input.ts
new file mode 100644
index 00000000..f88e44bf
--- /dev/null
+++ b/packages/web-ui/src/components/Input.ts
@@ -0,0 +1,112 @@
+import { type BaseComponentProps, fc, html } from "@mariozechner/mini-lit";
+import { type Ref, ref } from "lit/directives/ref.js";
+import { i18n } from "../utils/i18n.js";
+
+export type InputType = "text" | "email" | "password" | "number" | "url" | "tel" | "search";
+export type InputSize = "sm" | "md" | "lg";
+
+export interface InputProps extends BaseComponentProps {
+ type?: InputType;
+ size?: InputSize;
+ value?: string;
+ placeholder?: string;
+ label?: string;
+ error?: string;
+ disabled?: boolean;
+ required?: boolean;
+ name?: string;
+ autocomplete?: string;
+ min?: number;
+ max?: number;
+ step?: number;
+ inputRef?: Ref
+ ${i18n("console")}
+
+
+
+
+
+${this.content || ""}
+
+ ${
+ label
+ ? html`
+
+ `
+ : ""
+ }
+
+ ${error ? html`${error}` : ""}
+
+ `;
+ },
+);
diff --git a/packages/web-ui/src/components/MessageEditor.ts b/packages/web-ui/src/components/MessageEditor.ts
new file mode 100644
index 00000000..7e35c2b8
--- /dev/null
+++ b/packages/web-ui/src/components/MessageEditor.ts
@@ -0,0 +1,272 @@
+import { Button, html, icon } from "@mariozechner/mini-lit";
+import type { Model } from "@mariozechner/pi-ai";
+import { LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { Loader2, Paperclip, Send, Sparkles, Square } from "lucide";
+import "./AttachmentTile.js";
+import { type Attachment, loadAttachment } from "../utils/attachment-utils.js";
+import { i18n } from "../utils/i18n.js";
+
+@customElement("message-editor")
+export class MessageEditor extends LitElement {
+ private _value = "";
+ private textareaRef = createRef
+
+ ${
+ this.attachments.length > 0
+ ? html`
+
+ `;
+ }
+}
diff --git a/packages/web-ui/src/components/MessageList.ts b/packages/web-ui/src/components/MessageList.ts
new file mode 100644
index 00000000..7c6dc790
--- /dev/null
+++ b/packages/web-ui/src/components/MessageList.ts
@@ -0,0 +1,82 @@
+import { html } from "@mariozechner/mini-lit";
+import type {
+ AgentTool,
+ AssistantMessage as AssistantMessageType,
+ Message,
+ ToolResultMessage as ToolResultMessageType,
+} from "@mariozechner/pi-ai";
+import { LitElement, type TemplateResult } from "lit";
+import { property } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+
+export class MessageList extends LitElement {
+ @property({ type: Array }) messages: Message[] = [];
+ @property({ type: Array }) tools: AgentTool[] = [];
+ @property({ type: Object }) pendingToolCalls?: Set
+ ${this.attachments.map(
+ (attachment) => html`
+ this.removeFile(attachment.id)}
+ >
+ `,
+ )}
+
+ `
+ : ""
+ }
+
+
+
+
+
+
+
+
+
+
+
+ ${
+ this.showAttachmentButton
+ ? this.processingFiles
+ ? html`
+
+
+
+
+ ${icon(Loader2, "sm", "animate-spin text-muted-foreground")}
+
+ `
+ : html`
+ ${Button({
+ variant: "ghost",
+ size: "icon",
+ className: "h-8 w-8",
+ onClick: this.handleAttachmentClick,
+ children: icon(Paperclip, "sm"),
+ })}
+ `
+ : ""
+ }
+
+ ${
+ this.showModelSelector && this.currentModel
+ ? html`
+ ${Button({
+ variant: "ghost",
+ size: "sm",
+ onClick: () => {
+ // Focus textarea before opening model selector so focus returns there
+ this.textareaRef.value?.focus();
+ // Wait for next frame to ensure focus takes effect before dialog captures it
+ requestAnimationFrame(() => {
+ this.onModelSelect?.();
+ });
+ },
+ children: html`
+ ${icon(Sparkles, "sm")}
+ ${this.currentModel.id}
+ `,
+ className: "h-8 text-xs truncate",
+ })}
+ `
+ : ""
+ }
+ ${
+ this.isStreaming
+ ? html`
+ ${Button({
+ variant: "ghost",
+ size: "icon",
+ onClick: this.onAbort,
+ children: icon(Square, "sm"),
+ className: "h-8 w-8",
+ })}
+ `
+ : html`
+ ${Button({
+ variant: "ghost",
+ size: "icon",
+ onClick: this.handleSend,
+ disabled: (!this.value.trim() && this.attachments.length === 0) || this.processingFiles,
+ children: html`
+ ${icon(Send, "sm")}
`,
+ className: "h-8 w-8",
+ })}
+ `
+ }
+
+ ${repeat(
+ items,
+ (it) => it.key,
+ (it) => it.template,
+ )}
+
`;
+ }
+}
+
+// Register custom element
+if (!customElements.get("message-list")) {
+ customElements.define("message-list", MessageList);
+}
diff --git a/packages/web-ui/src/components/Messages.ts b/packages/web-ui/src/components/Messages.ts
new file mode 100644
index 00000000..951f49b2
--- /dev/null
+++ b/packages/web-ui/src/components/Messages.ts
@@ -0,0 +1,310 @@
+import { Button, html, icon } from "@mariozechner/mini-lit";
+import type {
+ AgentTool,
+ AssistantMessage as AssistantMessageType,
+ ToolCall,
+ ToolResultMessage as ToolResultMessageType,
+ UserMessage as UserMessageType,
+} from "@mariozechner/pi-ai";
+import type { AgentToolResult } from "@mariozechner/pi-ai/dist/agent/types.js";
+import { LitElement, type TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { Bug, Loader, Wrench } from "lucide";
+import { renderToolParams, renderToolResult } from "../tools/index.js";
+import type { Attachment } from "../utils/attachment-utils.js";
+import { formatUsage } from "../utils/format.js";
+import { i18n } from "../utils/i18n.js";
+
+export type UserMessageWithAttachments = UserMessageType & { attachments?: Attachment[] };
+export type AppMessage = AssistantMessageType | UserMessageWithAttachments | ToolResultMessageType;
+
+@customElement("user-message")
+export class UserMessage extends LitElement {
+ @property({ type: Object }) message!: UserMessageWithAttachments;
+
+ protected override createRenderRoot(): HTMLElement | DocumentFragment {
+ return this;
+ }
+
+ override connectedCallback(): void {
+ super.connectedCallback();
+ this.style.display = "block";
+ }
+
+ override render() {
+ const content =
+ typeof this.message.content === "string"
+ ? this.message.content
+ : this.message.content.find((c) => c.type === "text")?.text || "";
+
+ return html`
+
+
+ `;
+ }
+}
+
+@customElement("assistant-message")
+export class AssistantMessage extends LitElement {
+ @property({ type: Object }) message!: AssistantMessageType;
+ @property({ type: Array }) tools?: AgentTool
+ ${this.message.attachments.map(
+ (attachment) => html`
+ `
+ : ""
+ }
+
+ ${orderedParts.length ? html`
+ `;
+ }
+}
+
+@customElement("tool-message-debug")
+export class ToolMessageDebugView extends LitElement {
+ @property({ type: Object }) callArgs: any;
+ @property({ type: String }) result?: AgentToolResult${orderedParts}
` : ""}
+ ${
+ this.message.usage
+ ? html` ${formatUsage(this.message.usage)}
`
+ : ""
+ }
+ ${
+ this.message.stopReason === "error" && this.message.errorMessage
+ ? html`
+
+ ${i18n("Error:")} ${this.message.errorMessage}
+
+ `
+ : ""
+ }
+ ${
+ this.message.stopReason === "aborted"
+ ? html`${i18n("Request aborted")}`
+ : ""
+ }
+
+
+ `;
+ }
+}
+
+@customElement("tool-message")
+export class ToolMessage extends LitElement {
+ @property({ type: Object }) toolCall!: ToolCall;
+ @property({ type: Object }) tool?: AgentTool
+
+ ${i18n("Call")}
+
+
+ ${i18n("Result")}
+ ${
+ this.hasResult
+ ? html`${i18n("(no result)")}
`
+ }
+
+
+ `;
+ }
+}
+
+@customElement("aborted-message")
+export class AbortedMessage extends LitElement {
+ protected override createRenderRoot(): HTMLElement | DocumentFragment {
+ return this;
+ }
+
+ override connectedCallback(): void {
+ super.connectedCallback();
+ this.style.display = "block";
+ }
+
+ protected override render(): unknown {
+ return html`${i18n("Request aborted")}`;
+ }
+}
diff --git a/packages/web-ui/src/components/SandboxedIframe.ts b/packages/web-ui/src/components/SandboxedIframe.ts
index bdc042ae..24990c2d 100644
--- a/packages/web-ui/src/components/SandboxedIframe.ts
+++ b/packages/web-ui/src/components/SandboxedIframe.ts
@@ -1,5 +1,5 @@
import { LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
import type { Attachment } from "../utils/attachment-utils.js";
export interface SandboxFile {
@@ -15,10 +15,23 @@ export interface SandboxResult {
error?: { message: string; stack: string };
}
+/**
+ * Function that returns the URL to the sandbox HTML file.
+ * Used in browser extensions to load sandbox.html via chrome.runtime.getURL().
+ */
+export type SandboxUrlProvider = () => string;
+
@customElement("sandbox-iframe")
export class SandboxIframe extends LitElement {
private iframe?: HTMLIFrameElement;
+ /**
+ * Optional: Provide a function that returns the sandbox HTML URL.
+ * If provided, the iframe will use this URL instead of srcdoc.
+ * This is required for browser extensions with strict CSP.
+ */
+ @property({ attribute: false }) sandboxUrlProvider?: SandboxUrlProvider;
+
createRenderRoot() {
return this;
}
@@ -41,6 +54,48 @@ export class SandboxIframe extends LitElement {
public loadContent(sandboxId: string, htmlContent: string, attachments: Attachment[]): void {
const completeHtml = this.prepareHtmlDocument(sandboxId, htmlContent, attachments);
+ if (this.sandboxUrlProvider) {
+ // Browser extension mode: use sandbox.html with postMessage
+ this.loadViaSandboxUrl(sandboxId, completeHtml, attachments);
+ } else {
+ // Web mode: use srcdoc
+ this.loadViaSrcdoc(completeHtml);
+ }
+ }
+
+ private loadViaSandboxUrl(sandboxId: string, completeHtml: string, attachments: Attachment[]): void {
+ // Wait for sandbox-ready and send content
+ const readyHandler = (e: MessageEvent) => {
+ if (e.data.type === "sandbox-ready" && e.source === this.iframe?.contentWindow) {
+ window.removeEventListener("message", readyHandler);
+ this.iframe?.contentWindow?.postMessage(
+ {
+ type: "sandbox-load",
+ sandboxId,
+ code: completeHtml,
+ attachments,
+ },
+ "*",
+ );
+ }
+ };
+ window.addEventListener("message", readyHandler);
+
+ // Always recreate iframe to ensure fresh sandbox and sandbox-ready message
+ this.iframe?.remove();
+ this.iframe = document.createElement("iframe");
+ this.iframe.sandbox.add("allow-scripts");
+ this.iframe.sandbox.add("allow-modals");
+ this.iframe.style.width = "100%";
+ this.iframe.style.height = "100%";
+ this.iframe.style.border = "none";
+
+ this.iframe.src = this.sandboxUrlProvider!();
+
+ this.appendChild(this.iframe);
+ }
+
+ private loadViaSrcdoc(completeHtml: string): void {
// Always recreate iframe to ensure fresh sandbox
this.iframe?.remove();
this.iframe = document.createElement("iframe");
@@ -50,7 +105,7 @@ export class SandboxIframe extends LitElement {
this.iframe.style.height = "100%";
this.iframe.style.border = "none";
- // Set content directly via srcdoc (no CSP restrictions in web-ui)
+ // Set content directly via srcdoc (no CSP restrictions in web apps)
this.iframe.srcdoc = completeHtml;
this.appendChild(this.iframe);
@@ -125,9 +180,14 @@ export class SandboxIframe extends LitElement {
}
};
+ let readyHandler: ((e: MessageEvent) => void) | undefined;
+
const cleanup = () => {
window.removeEventListener("message", messageHandler);
signal?.removeEventListener("abort", abortHandler);
+ if (readyHandler) {
+ window.removeEventListener("message", readyHandler);
+ }
clearTimeout(timeoutId);
};
@@ -148,19 +208,52 @@ export class SandboxIframe extends LitElement {
}
}, 30000);
- // NOW create and append iframe AFTER all listeners are set up
- this.iframe?.remove();
- this.iframe = document.createElement("iframe");
- this.iframe.sandbox.add("allow-scripts");
- this.iframe.sandbox.add("allow-modals");
- this.iframe.style.width = "100%";
- this.iframe.style.height = "100%";
- this.iframe.style.border = "none";
+ if (this.sandboxUrlProvider) {
+ // Browser extension mode: wait for sandbox-ready and send content
+ readyHandler = (e: MessageEvent) => {
+ if (e.data.type === "sandbox-ready" && e.source === this.iframe?.contentWindow) {
+ window.removeEventListener("message", readyHandler!);
+ // Send the complete HTML
+ this.iframe?.contentWindow?.postMessage(
+ {
+ type: "sandbox-load",
+ sandboxId,
+ code: completeHtml,
+ attachments,
+ },
+ "*",
+ );
+ }
+ };
+ window.addEventListener("message", readyHandler);
- // Set content via srcdoc BEFORE appending to DOM (no CSP restrictions in web-ui)
- this.iframe.srcdoc = completeHtml;
+ // Create iframe AFTER all listeners are set up
+ this.iframe?.remove();
+ this.iframe = document.createElement("iframe");
+ this.iframe.sandbox.add("allow-scripts");
+ this.iframe.sandbox.add("allow-modals");
+ this.iframe.style.width = "100%";
+ this.iframe.style.height = "100%";
+ this.iframe.style.border = "none";
- this.appendChild(this.iframe);
+ this.iframe.src = this.sandboxUrlProvider();
+
+ this.appendChild(this.iframe);
+ } else {
+ // Web mode: use srcdoc
+ this.iframe?.remove();
+ this.iframe = document.createElement("iframe");
+ this.iframe.sandbox.add("allow-scripts");
+ this.iframe.sandbox.add("allow-modals");
+ this.iframe.style.width = "100%";
+ this.iframe.style.height = "100%";
+ this.iframe.style.border = "none";
+
+ // Set content via srcdoc BEFORE appending to DOM
+ this.iframe.srcdoc = completeHtml;
+
+ this.appendChild(this.iframe);
+ }
});
}
diff --git a/packages/web-ui/src/components/StreamingMessageContainer.ts b/packages/web-ui/src/components/StreamingMessageContainer.ts
new file mode 100644
index 00000000..d4c4b4a6
--- /dev/null
+++ b/packages/web-ui/src/components/StreamingMessageContainer.ts
@@ -0,0 +1,101 @@
+import { html } from "@mariozechner/mini-lit";
+import type { AgentTool, Message, ToolResultMessage } from "@mariozechner/pi-ai";
+import { LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
+
+export class StreamingMessageContainer extends LitElement {
+ @property({ type: Array }) tools: AgentTool[] = [];
+ @property({ type: Boolean }) isStreaming = false;
+ @property({ type: Object }) pendingToolCalls?: Set
+
+
+ ${
+ this._showDebug
+ ? html`
+ ${statusIcon}
+ ${toolLabel}
+
+ ${Button({
+ variant: this._showDebug ? "default" : "ghost",
+ size: "sm",
+ onClick: this.toggleDebug,
+ children: icon(Bug, "sm"),
+ className: "text-muted-foreground",
+ })}
+ ${paramsTpl}
+ ${
+ this.pending && !hasResult
+ ? html`${i18n("Waiting for tool result…")}
`
+ : ""
+ }
+ ${
+ this.aborted && !hasResult
+ ? html`${i18n("Call was aborted; no result.")}
`
+ : ""
+ }
+ ${
+ hasResult && isError
+ ? html`
+ ${errorMessage}
+
`
+ : ""
+ }
+ ${resultTpl ? html`${resultTpl}
` : ""}
+ `
+ }
+
+
+
`;
+ return html``; // Empty until a message is set
+ }
+ const msg = this._message;
+
+ if (msg.role === "toolResult") {
+ // Skip standalone tool result in streaming; the stable list will render paired tool-message
+ return html``;
+ } else if (msg.role === "user") {
+ // Skip standalone tool result in streaming; the stable list will render it immediiately
+ return html``;
+ } else if (msg.role === "assistant") {
+ // Assistant message - render inline tool messages during streaming
+ return html`
+
+
+ `;
+ }
+ }
+}
+
+// Register custom element
+if (!customElements.get("streaming-message-container")) {
+ customElements.define("streaming-message-container", StreamingMessageContainer);
+}
diff --git a/packages/web-ui/src/dialogs/ApiKeysDialog.ts b/packages/web-ui/src/dialogs/ApiKeysDialog.ts
new file mode 100644
index 00000000..30254f9d
--- /dev/null
+++ b/packages/web-ui/src/dialogs/ApiKeysDialog.ts
@@ -0,0 +1,273 @@
+import { Alert, Badge, Button, DialogBase, DialogHeader, html, type TemplateResult } from "@mariozechner/mini-lit";
+import { type Context, complete, getModel, getProviders } from "@mariozechner/pi-ai";
+import type { PropertyValues } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { Input } from "../components/Input.js";
+import { keyStore } from "../state/KeyStore.js";
+import { i18n } from "../utils/i18n.js";
+
+// Test models for each provider - known to be reliable and cheap
+const TEST_MODELS: Record
+
+
+ `;
+ }
+}
diff --git a/packages/web-ui/src/dialogs/AttachmentOverlay.ts b/packages/web-ui/src/dialogs/AttachmentOverlay.ts
new file mode 100644
index 00000000..ad68bcf0
--- /dev/null
+++ b/packages/web-ui/src/dialogs/AttachmentOverlay.ts
@@ -0,0 +1,635 @@
+import { Button, html, icon } from "@mariozechner/mini-lit";
+import "@mariozechner/mini-lit/dist/ModeToggle.js";
+import { renderAsync } from "docx-preview";
+import { LitElement } from "lit";
+import { state } from "lit/decorators.js";
+import { Download, X } from "lucide";
+import * as pdfjsLib from "pdfjs-dist";
+import * as XLSX from "xlsx";
+import type { Attachment } from "../utils/attachment-utils.js";
+import { i18n } from "../utils/i18n.js";
+
+type FileType = "image" | "pdf" | "docx" | "pptx" | "excel" | "text";
+
+export class AttachmentOverlay extends LitElement {
+ @state() private attachment?: Attachment;
+ @state() private showExtractedText = false;
+ @state() private error: string | null = null;
+
+ // Track current loading task to cancel if needed
+ private currentLoadingTask: any = null;
+ private onCloseCallback?: () => void;
+ private boundHandleKeyDown?: (e: KeyboardEvent) => void;
+
+ protected override createRenderRoot(): HTMLElement | DocumentFragment {
+ return this;
+ }
+
+ static open(attachment: Attachment, onClose?: () => void) {
+ const overlay = new AttachmentOverlay();
+ overlay.attachment = attachment;
+ overlay.onCloseCallback = onClose;
+ document.body.appendChild(overlay);
+ overlay.setupEventListeners();
+ }
+
+ private setupEventListeners() {
+ this.boundHandleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ this.close();
+ }
+ };
+ window.addEventListener("keydown", this.boundHandleKeyDown);
+ }
+
+ private close() {
+ this.cleanup();
+ if (this.boundHandleKeyDown) {
+ window.removeEventListener("keydown", this.boundHandleKeyDown);
+ }
+ this.onCloseCallback?.();
+ this.remove();
+ }
+
+ private getFileType(): FileType {
+ if (!this.attachment) return "text";
+
+ if (this.attachment.type === "image") return "image";
+ if (this.attachment.mimeType === "application/pdf") return "pdf";
+ if (this.attachment.mimeType?.includes("wordprocessingml")) return "docx";
+ if (
+ this.attachment.mimeType?.includes("presentationml") ||
+ this.attachment.fileName.toLowerCase().endsWith(".pptx")
+ )
+ return "pptx";
+ if (
+ this.attachment.mimeType?.includes("spreadsheetml") ||
+ this.attachment.mimeType?.includes("ms-excel") ||
+ this.attachment.fileName.toLowerCase().endsWith(".xlsx") ||
+ this.attachment.fileName.toLowerCase().endsWith(".xls")
+ )
+ return "excel";
+
+ return "text";
+ }
+
+ private getFileTypeLabel(): string {
+ const type = this.getFileType();
+ switch (type) {
+ case "pdf":
+ return i18n("PDF");
+ case "docx":
+ return i18n("Document");
+ case "pptx":
+ return i18n("Presentation");
+ case "excel":
+ return i18n("Spreadsheet");
+ default:
+ return "";
+ }
+ }
+
+ private handleBackdropClick = () => {
+ this.close();
+ };
+
+ private handleDownload = () => {
+ if (!this.attachment) return;
+
+ // Create a blob from the base64 content
+ const byteCharacters = atob(this.attachment.content);
+ const byteNumbers = new Array(byteCharacters.length);
+ for (let i = 0; i < byteCharacters.length; i++) {
+ byteNumbers[i] = byteCharacters.charCodeAt(i);
+ }
+ const byteArray = new Uint8Array(byteNumbers);
+ const blob = new Blob([byteArray], { type: this.attachment.mimeType });
+
+ // Create download link
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = this.attachment.fileName;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ };
+
+ private cleanup() {
+ this.showExtractedText = false;
+ this.error = null;
+ // Cancel any loading PDF task when closing
+ if (this.currentLoadingTask) {
+ this.currentLoadingTask.destroy();
+ this.currentLoadingTask = null;
+ }
+ }
+
+ override render() {
+ if (!this.attachment) return html``;
+
+ return html`
+
+
+ ${DialogHeader({ title: i18n("API Keys Configuration") })}
+
+
+
+ ${
+ this.error
+ ? html`
+ + ${i18n("Configure API keys for LLM providers. Keys are stored locally in your browser.")} +
+${Alert(this.error, "destructive")}
+ `
+ : ""
+ }
+
+
+
+
+
+
+
+
+ ${providers.map(
+ (provider) => html`
+
+
+
+ `,
+ )}
+
+ ${provider}
+ ${
+ this.apiKeys[provider]
+ ? Badge({ children: i18n("Configured"), variant: "default" })
+ : Badge({ children: i18n("Not configured"), variant: "secondary" })
+ }
+ ${
+ this.testResults[provider] === "success"
+ ? Badge({ children: i18n("✓ Valid"), variant: "default" })
+ : this.testResults[provider] === "error"
+ ? Badge({ children: i18n("✗ Invalid"), variant: "destructive" })
+ : this.testResults[provider] === "testing"
+ ? Badge({ children: i18n("Testing..."), variant: "secondary" })
+ : ""
+ }
+
+
+
+ ${Input({
+ type: "password",
+ placeholder: this.apiKeys[provider] ? i18n("Update API key") : i18n("Enter API key"),
+ value: this.apiKeyInputs[provider] || "",
+ onInput: (e: Event) => {
+ this.apiKeyInputs[provider] = (e.target as HTMLInputElement).value;
+ this.requestUpdate();
+ },
+ className: "flex-1",
+ })}
+
+ ${Button({
+ onClick: () => this.saveKey(provider),
+ variant: "default",
+ size: "sm",
+ disabled: !this.apiKeyInputs[provider] || this.savingProvider === provider,
+ loading: this.savingProvider === provider,
+ children:
+ this.savingProvider === provider
+ ? i18n("Testing...")
+ : this.apiKeys[provider]
+ ? i18n("Update")
+ : i18n("Save"),
+ })}
+
+ ${
+ this.apiKeys[provider]
+ ? html`
+ ${Button({
+ onClick: () => this.testExistingKey(provider),
+ variant: "outline",
+ size: "sm",
+ loading: this.testingProvider === provider,
+ disabled: this.testingProvider !== "" && this.testingProvider !== provider,
+ children:
+ this.testingProvider === provider ? i18n("Testing...") : i18n("Test"),
+ })}
+ ${Button({
+ onClick: () => this.removeKey(provider),
+ variant: "ghost",
+ size: "sm",
+ children: i18n("Remove"),
+ })}
+ `
+ : ""
+ }
+
+
+
+ + ${i18n("API keys are required to use AI models. Get your keys from the provider's website.")} +
+
+
+
+ `;
+ }
+
+ private renderToggle() {
+ if (!this.attachment) return html``;
+
+ const fileType = this.getFileType();
+ const hasExtractedText = !!this.attachment.extractedText;
+ const showToggle = fileType !== "image" && fileType !== "text" && fileType !== "pptx" && hasExtractedText;
+
+ if (!showToggle) return html``;
+
+ const fileTypeLabel = this.getFileTypeLabel();
+
+ return html`
+ e.stopPropagation()}>
+
+
+
+
+
+
+ ${this.attachment.fileName}
+
+
+ ${this.renderToggle()}
+ ${Button({
+ variant: "ghost",
+ size: "icon",
+ onClick: this.handleDownload,
+ children: icon(Download, "sm"),
+ className: "h-8 w-8",
+ })}
+ ${Button({
+ variant: "ghost",
+ size: "icon",
+ onClick: () => this.close(),
+ children: icon(X, "sm"),
+ className: "h-8 w-8",
+ })}
+
+ e.stopPropagation()}>
+ ${this.renderContent()}
+
+
+
+ `;
+ }
+
+ // Content based on file type
+ return this.renderFileContent();
+ }
+
+ private renderFileContent() {
+ if (!this.attachment) return html``;
+
+ const fileType = this.getFileType();
+
+ // Show extracted text if toggled
+ if (this.showExtractedText && fileType !== "image") {
+ return html`
+ ${i18n("Error loading file")}
+ ${this.error}
+
+
+ `;
+ }
+
+ // Render based on file type
+ switch (fileType) {
+ case "image": {
+ const imageUrl = `data:${this.attachment.mimeType};base64,${this.attachment.content}`;
+ return html`
+ ${
+ this.attachment.extractedText || i18n("No text content available")
+ }
+
+
+ `;
+ }
+ }
+
+ override async updated(changedProperties: Map${
+ this.attachment.extractedText || i18n("No content available")
+ }
+
+ ${DialogHeader({ title: i18n("Select Model") })}
+ ${Input({
+ placeholder: i18n("Search models..."),
+ value: this.searchQuery,
+ inputRef: this.searchInputRef,
+ onInput: (e: Event) => {
+ this.searchQuery = (e.target as HTMLInputElement).value;
+ this.selectedIndex = 0;
+ // Reset scroll position when search changes
+ if (this.scrollContainerRef.value) {
+ this.scrollContainerRef.value.scrollTop = 0;
+ }
+ },
+ })}
+
+
+
+
+ ${Button({
+ variant: this.filterThinking ? "default" : "secondary",
+ size: "sm",
+ onClick: () => {
+ this.filterThinking = !this.filterThinking;
+ this.selectedIndex = 0;
+ if (this.scrollContainerRef.value) {
+ this.scrollContainerRef.value.scrollTop = 0;
+ }
+ },
+ className: "rounded-full",
+ children: html`${icon(Brain, "sm")} ${i18n("Thinking")}`,
+ })}
+ ${Button({
+ variant: this.filterVision ? "default" : "secondary",
+ size: "sm",
+ onClick: () => {
+ this.filterVision = !this.filterVision;
+ this.selectedIndex = 0;
+ if (this.scrollContainerRef.value) {
+ this.scrollContainerRef.value.scrollTop = 0;
+ }
+ },
+ className: "rounded-full",
+ children: html`${icon(ImageIcon, "sm")} ${i18n("Vision")}`,
+ })}
+
+
+ ${filteredModels.map(({ provider, id, model }, index) => {
+ // Check if this is the current model by comparing IDs
+ const isCurrent = this.currentModel?.id === model.id;
+ const isSelected = index === this.selectedIndex;
+ return html`
+
+ `;
+ })}
+
+ `;
+ }
+}
diff --git a/packages/web-ui/src/index.ts b/packages/web-ui/src/index.ts
new file mode 100644
index 00000000..0d3c0151
--- /dev/null
+++ b/packages/web-ui/src/index.ts
@@ -0,0 +1,55 @@
+// Main chat interface
+export { ChatPanel } from "./ChatPanel.js";
+
+// Components
+export { AgentInterface } from "./components/AgentInterface.js";
+export { AttachmentTile } from "./components/AttachmentTile.js";
+export { ConsoleBlock } from "./components/ConsoleBlock.js";
+export { Input } from "./components/Input.js";
+export { MessageEditor } from "./components/MessageEditor.js";
+export { MessageList } from "./components/MessageList.js";
+// Message components
+export { AssistantMessage, ToolMessage, UserMessage } from "./components/Messages.js";
+export {
+ type SandboxFile,
+ SandboxIframe,
+ type SandboxResult,
+ type SandboxUrlProvider,
+} from "./components/SandboxedIframe.js";
+export { StreamingMessageContainer } from "./components/StreamingMessageContainer.js";
+export { ApiKeysDialog } from "./dialogs/ApiKeysDialog.js";
+export { AttachmentOverlay } from "./dialogs/AttachmentOverlay.js";
+// Dialogs
+export { ModelSelector } from "./dialogs/ModelSelector.js";
+
+// State management
+export { AgentSession } from "./state/agent-session.js";
+export type { KeyStore, StorageAdapter } from "./state/KeyStore.js";
+export { KeyStoreImpl, keyStore } from "./state/KeyStore.js";
+
+// Transports
+export { DirectTransport } from "./state/transports/DirectTransport.js";
+export { ProxyTransport } from "./state/transports/ProxyTransport.js";
+export type { ProxyAssistantMessageEvent } from "./state/transports/proxy-types.js";
+export type { AgentRunConfig, AgentTransport } from "./state/transports/types.js";
+// Artifacts
+export { ArtifactElement } from "./tools/artifacts/ArtifactElement.js";
+export { type Artifact, ArtifactsPanel, type ArtifactsParams } from "./tools/artifacts/artifacts.js";
+export { HtmlArtifact } from "./tools/artifacts/HtmlArtifact.js";
+export { MarkdownArtifact } from "./tools/artifacts/MarkdownArtifact.js";
+export { SvgArtifact } from "./tools/artifacts/SvgArtifact.js";
+export { TextArtifact } from "./tools/artifacts/TextArtifact.js";
+// Tools
+export { getToolRenderer, registerToolRenderer, renderToolParams, renderToolResult } from "./tools/index.js";
+export { BashRenderer } from "./tools/renderers/BashRenderer.js";
+export { CalculateRenderer } from "./tools/renderers/CalculateRenderer.js";
+// Tool renderers
+export { DefaultRenderer } from "./tools/renderers/DefaultRenderer.js";
+export { GetCurrentTimeRenderer } from "./tools/renderers/GetCurrentTimeRenderer.js";
+export type { ToolRenderer } from "./tools/types.js";
+export type { Attachment } from "./utils/attachment-utils.js";
+// Utils
+export { loadAttachment } from "./utils/attachment-utils.js";
+export { clearAuthToken, getAuthToken } from "./utils/auth-token.js";
+export { formatCost, formatModelCost, formatTokenCount, formatUsage } from "./utils/format.js";
+export { i18n, setLanguage } from "./utils/i18n.js";
diff --git a/packages/web-ui/src/state/KeyStore.ts b/packages/web-ui/src/state/KeyStore.ts
new file mode 100644
index 00000000..c0700c02
--- /dev/null
+++ b/packages/web-ui/src/state/KeyStore.ts
@@ -0,0 +1,96 @@
+import { getProviders } from "@mariozechner/pi-ai";
+
+/**
+ * Generic storage adapter interface
+ */
+export interface StorageAdapter {
+ get(key: string): Promise
+ ${toggle}
+ ${copyButton}
+ ${DownloadButton({ content: this._content, filename: this.filename, mimeType: "text/html", title: i18n("Download HTML") })}
+
+ `;
+ }
+
+ override set content(value: string) {
+ const oldValue = this._content;
+ this._content = value;
+ if (oldValue !== value) {
+ // Reset logs when content changes
+ this.logs = [];
+ if (this.consoleLogsRef.value) {
+ this.consoleLogsRef.value.innerHTML = "";
+ }
+ this.requestUpdate();
+ // Execute content in sandbox if it exists
+ if (this.sandboxIframeRef.value && value) {
+ this.updateConsoleButton();
+ this.executeContent(value);
+ }
+ }
+ }
+
+ private executeContent(html: string) {
+ const sandbox = this.sandboxIframeRef.value;
+ if (!sandbox) return;
+
+ // Configure sandbox URL provider if provided (for browser extensions)
+ if (this.sandboxUrlProvider) {
+ sandbox.sandboxUrlProvider = this.sandboxUrlProvider;
+ }
+
+ // Remove previous message handler if it exists
+ if (this.messageHandler) {
+ window.removeEventListener("message", this.messageHandler);
+ }
+
+ const sandboxId = `artifact-${this.filename}`;
+
+ // Set up message listener to collect logs
+ this.messageHandler = (e: MessageEvent) => {
+ if (e.data.sandboxId !== sandboxId) return;
+
+ if (e.data.type === "console") {
+ this.logs.push({
+ type: e.data.method === "error" ? "error" : "log",
+ text: e.data.text,
+ });
+ this.updateConsoleButton();
+ }
+ };
+ window.addEventListener("message", this.messageHandler);
+
+ // Load content (iframe persists, doesn't get removed)
+ sandbox.loadContent(sandboxId, html, this.attachments);
+ }
+
+ override get content(): string {
+ return this._content;
+ }
+
+ override disconnectedCallback() {
+ super.disconnectedCallback();
+ // Clean up message handler when element is removed from DOM
+ if (this.messageHandler) {
+ window.removeEventListener("message", this.messageHandler);
+ this.messageHandler = undefined;
+ }
+ }
+
+ override firstUpdated() {
+ // Execute initial content
+ if (this._content && this.sandboxIframeRef.value) {
+ this.executeContent(this._content);
+ }
+ }
+
+ override updated(changedProperties: Map
+
+ `;
+ }
+}
diff --git a/packages/web-ui/src/tools/artifacts/MarkdownArtifact.ts b/packages/web-ui/src/tools/artifacts/MarkdownArtifact.ts
new file mode 100644
index 00000000..07b6181b
--- /dev/null
+++ b/packages/web-ui/src/tools/artifacts/MarkdownArtifact.ts
@@ -0,0 +1,81 @@
+import { CopyButton, DownloadButton, PreviewCodeToggle } from "@mariozechner/mini-lit";
+import hljs from "highlight.js";
+import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { i18n } from "../../utils/i18n.js";
+import "@mariozechner/mini-lit/dist/MarkdownBlock.js";
+import { ArtifactElement } from "./ArtifactElement.js";
+
+@customElement("markdown-artifact")
+export class MarkdownArtifact extends ArtifactElement {
+ @property() override filename = "";
+ @property({ attribute: false }) override displayTitle = "";
+
+ private _content = "";
+ override get content(): string {
+ return this._content;
+ }
+ override set content(value: string) {
+ this._content = value;
+ this.requestUpdate();
+ }
+
+ @state() private viewMode: "preview" | "code" = "preview";
+
+ protected override createRenderRoot(): HTMLElement | DocumentFragment {
+ return this; // light DOM
+ }
+
+ private setViewMode(mode: "preview" | "code") {
+ this.viewMode = mode;
+ }
+
+ public getHeaderButtons() {
+ const toggle = new PreviewCodeToggle();
+ toggle.mode = this.viewMode;
+ toggle.addEventListener("mode-change", (e: Event) => {
+ this.setViewMode((e as CustomEvent).detail);
+ });
+
+ const copyButton = new CopyButton();
+ copyButton.text = this._content;
+ copyButton.title = i18n("Copy Markdown");
+ copyButton.showText = false;
+
+ return html`
+
+
+
+
+
+
+
+
+
+ ${this.consoleOpen ? html` ` : ""}
+
+ `
+ : ""
+ }
+
+
+ ${unsafeHTML(
+ hljs.highlight(this._content, { language: "html" }).value,
+ )}
+ ${toggle}
+ ${copyButton}
+ ${DownloadButton({
+ content: this._content,
+ filename: this.filename,
+ mimeType: "text/markdown",
+ title: i18n("Download Markdown"),
+ })}
+
+ `;
+ }
+
+ override render() {
+ return html`
+
+
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "markdown-artifact": MarkdownArtifact;
+ }
+}
diff --git a/packages/web-ui/src/tools/artifacts/SvgArtifact.ts b/packages/web-ui/src/tools/artifacts/SvgArtifact.ts
new file mode 100644
index 00000000..51c24236
--- /dev/null
+++ b/packages/web-ui/src/tools/artifacts/SvgArtifact.ts
@@ -0,0 +1,77 @@
+import { CopyButton, DownloadButton, PreviewCodeToggle } from "@mariozechner/mini-lit";
+import hljs from "highlight.js";
+import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { i18n } from "../../utils/i18n.js";
+import { ArtifactElement } from "./ArtifactElement.js";
+
+@customElement("svg-artifact")
+export class SvgArtifact extends ArtifactElement {
+ @property() override filename = "";
+ @property({ attribute: false }) override displayTitle = "";
+
+ private _content = "";
+ override get content(): string {
+ return this._content;
+ }
+ override set content(value: string) {
+ this._content = value;
+ this.requestUpdate();
+ }
+
+ @state() private viewMode: "preview" | "code" = "preview";
+
+ protected override createRenderRoot(): HTMLElement | DocumentFragment {
+ return this; // light DOM
+ }
+
+ private setViewMode(mode: "preview" | "code") {
+ this.viewMode = mode;
+ }
+
+ public getHeaderButtons() {
+ const toggle = new PreviewCodeToggle();
+ toggle.mode = this.viewMode;
+ toggle.addEventListener("mode-change", (e: Event) => {
+ this.setViewMode((e as CustomEvent).detail);
+ });
+
+ const copyButton = new CopyButton();
+ copyButton.text = this._content;
+ copyButton.title = i18n("Copy SVG");
+ copyButton.showText = false;
+
+ return html`
+
+ ${
+ this.viewMode === "preview"
+ ? html`
+ ${unsafeHTML(
+ hljs.highlight(this.content, { language: "markdown", ignoreIllegals: true }).value,
+ )}
+ ${toggle}
+ ${copyButton}
+ ${DownloadButton({ content: this._content, filename: this.filename, mimeType: "image/svg+xml", title: i18n("Download SVG") })}
+
+ `;
+ }
+
+ override render() {
+ return html`
+
+ = {
+ js: "javascript",
+ ts: "typescript",
+ py: "python",
+ rb: "ruby",
+ yml: "yaml",
+ ps1: "powershell",
+ bat: "batch",
+ };
+ return languageMap[ext] || ext;
+ }
+
+ private getMimeType(): string {
+ const ext = this.filename.split(".").pop()?.toLowerCase() || "";
+ if (ext === "svg") return "image/svg+xml";
+ if (ext === "md" || ext === "markdown") return "text/markdown";
+ return "text/plain";
+ }
+
+ public getHeaderButtons() {
+ const copyButton = new CopyButton();
+ copyButton.text = this.content;
+ copyButton.title = i18n("Copy");
+ copyButton.showText = false;
+
+ return html`
+ ;
+
+// Minimal helper to render plain text outputs consistently
+function plainOutput(text: string): TemplateResult {
+ return html` {
+ @state() private _artifacts = new Map();
+ @state() private _activeFilename: string | null = null;
+
+ // Programmatically managed artifact elements
+ private artifactElements = new Map();
+ private contentRef: Ref = createRef();
+
+ // External provider for attachments (decouples panel from AgentInterface)
+ @property({ attribute: false }) attachmentsProvider?: () => Attachment[];
+ // Sandbox URL provider for browser extensions (optional)
+ @property({ attribute: false }) sandboxUrlProvider?: () => string;
+ // Callbacks
+ @property({ attribute: false }) onArtifactsChange?: () => void;
+ @property({ attribute: false }) onClose?: () => void;
+ @property({ attribute: false }) onOpen?: () => void;
+ // Collapsed mode: hides panel content but can show a floating reopen pill
+ @property({ type: Boolean }) collapsed = false;
+ // Overlay mode: when true, panel renders full-screen overlay (mobile)
+ @property({ type: Boolean }) overlay = false;
+
+ // Public getter for artifacts
+ get artifacts() {
+ return this._artifacts;
+ }
+
+ protected override createRenderRoot(): HTMLElement | DocumentFragment {
+ return this; // light DOM for shared styles
+ }
+
+ override connectedCallback(): void {
+ super.connectedCallback();
+ this.style.display = "block";
+ this.style.height = "100%";
+ // Reattach existing artifact elements when panel is re-inserted into the DOM
+ requestAnimationFrame(() => {
+ const container = this.contentRef.value;
+ if (!container) return;
+ // Ensure we have an active filename
+ if (!this._activeFilename && this._artifacts.size > 0) {
+ this._activeFilename = Array.from(this._artifacts.keys())[0];
+ }
+ this.artifactElements.forEach((element, name) => {
+ if (!element.parentElement) container.appendChild(element);
+ element.style.display = name === this._activeFilename ? "block" : "none";
+ });
+ });
+ }
+
+ override disconnectedCallback() {
+ super.disconnectedCallback();
+ // Do not tear down artifact elements; keep them to restore on next mount
+ }
+
+ // Helper to determine file type from extension
+ private getFileType(filename: string): "html" | "svg" | "markdown" | "text" {
+ const ext = filename.split(".").pop()?.toLowerCase();
+ if (ext === "html") return "html";
+ if (ext === "svg") return "svg";
+ if (ext === "md" || ext === "markdown") return "markdown";
+ return "text";
+ }
+
+ // Helper to determine language for syntax highlighting
+ private getLanguageFromFilename(filename?: string): string {
+ if (!filename) return "text";
+ const ext = filename.split(".").pop()?.toLowerCase();
+ const languageMap: Record = {
+ js: "javascript",
+ jsx: "javascript",
+ ts: "typescript",
+ tsx: "typescript",
+ html: "html",
+ css: "css",
+ scss: "scss",
+ json: "json",
+ py: "python",
+ md: "markdown",
+ svg: "xml",
+ xml: "xml",
+ yaml: "yaml",
+ yml: "yaml",
+ sh: "bash",
+ bash: "bash",
+ sql: "sql",
+ java: "java",
+ c: "c",
+ cpp: "cpp",
+ cs: "csharp",
+ go: "go",
+ rs: "rust",
+ php: "php",
+ rb: "ruby",
+ swift: "swift",
+ kt: "kotlin",
+ r: "r",
+ };
+ return languageMap[ext || ""] || "text";
+ }
+
+ // Get or create artifact element
+ private getOrCreateArtifactElement(filename: string, content: string, title: string): ArtifactElement {
+ let element = this.artifactElements.get(filename);
+
+ if (!element) {
+ const type = this.getFileType(filename);
+ if (type === "html") {
+ element = new HtmlArtifact();
+ (element as HtmlArtifact).attachments = this.attachmentsProvider?.() || [];
+ if (this.sandboxUrlProvider) {
+ (element as HtmlArtifact).sandboxUrlProvider = this.sandboxUrlProvider;
+ }
+ } else if (type === "svg") {
+ element = new SvgArtifact();
+ } else if (type === "markdown") {
+ element = new MarkdownArtifact();
+ } else {
+ element = new TextArtifact();
+ }
+ element.filename = filename;
+ element.displayTitle = title;
+ element.content = content;
+ element.style.display = "none";
+ element.style.height = "100%";
+
+ // Store element
+ this.artifactElements.set(filename, element);
+
+ // Add to DOM - try immediately if container exists, otherwise schedule
+ const newElement = element;
+ if (this.contentRef.value) {
+ this.contentRef.value.appendChild(newElement);
+ } else {
+ requestAnimationFrame(() => {
+ if (this.contentRef.value && !newElement.parentElement) {
+ this.contentRef.value.appendChild(newElement);
+ }
+ });
+ }
+ } else {
+ // Just update content
+ element.content = content;
+ element.displayTitle = title;
+ if (element instanceof HtmlArtifact) {
+ element.attachments = this.attachmentsProvider?.() || [];
+ }
+ }
+
+ return element;
+ }
+
+ // Show/hide artifact elements
+ private showArtifact(filename: string) {
+ // Ensure the active element is in the DOM
+ requestAnimationFrame(() => {
+ this.artifactElements.forEach((element, name) => {
+ if (this.contentRef.value && !element.parentElement) {
+ this.contentRef.value.appendChild(element);
+ }
+ element.style.display = name === filename ? "block" : "none";
+ });
+ });
+ this._activeFilename = filename;
+ this.requestUpdate(); // Only for tab bar update
+ }
+
+ // Open panel and focus an artifact tab by filename
+ private openArtifact(filename: string) {
+ if (this._artifacts.has(filename)) {
+ this.showArtifact(filename);
+ // Ask host to open panel (AgentInterface demo listens to onOpen)
+ this.onOpen?.();
+ }
+ }
+
+ // Build the AgentTool (no details payload; return only output strings)
+ public get tool(): AgentTool {
+ return {
+ label: "Artifacts",
+ name: "artifacts",
+ description: `Creates and manages file artifacts. Each artifact is a file with a filename and content.
+
+IMPORTANT: Always prefer updating existing files over creating new ones. Check available files first.
+
+Commands:
+1. create: Create a new file
+ - filename: Name with extension (required, e.g., 'index.html', 'script.js', 'README.md')
+ - title: Display name for the tab (optional, defaults to filename)
+ - content: File content (required)
+
+2. update: Update part of an existing file
+ - filename: File to update (required)
+ - old_str: Exact string to replace (required)
+ - new_str: Replacement string (required)
+
+3. rewrite: Completely replace a file's content
+ - filename: File to rewrite (required)
+ - content: New content (required)
+ - title: Optionally update display title
+
+4. get: Retrieve the full content of a file
+ - filename: File to retrieve (required)
+ - Returns the complete file content
+
+5. delete: Delete a file
+ - filename: File to delete (required)
+
+6. logs: Get console logs and errors (HTML files only)
+ - filename: HTML file to get logs for (required)
+ - Returns all console output and runtime errors
+
+For text/html artifacts with attachments:
+- HTML artifacts automatically have access to user attachments via JavaScript
+- Available global functions in HTML artifacts:
+ * listFiles() - Returns array of {id, fileName, mimeType, size} for all attachments
+ * readTextFile(attachmentId) - Returns text content of attachment (for CSV, JSON, text files)
+ * readBinaryFile(attachmentId) - Returns Uint8Array of binary data (for images, Excel, etc.)
+- Example HTML artifact that processes a CSV attachment:
+
+
+For text/html artifacts:
+- Must be a single self-contained file
+- External scripts: Use CDNs like https://esm.sh, https://unpkg.com, or https://cdnjs.cloudflare.com
+- Preferred: Use https://esm.sh for npm packages (e.g., https://esm.sh/three for Three.js)
+- For ES modules, use:
+- For Three.js specifically: import from 'https://esm.sh/three' or 'https://esm.sh/three@0.160.0'
+- For addons: import from 'https://esm.sh/three/examples/jsm/controls/OrbitControls.js'
+- No localStorage/sessionStorage - use in-memory variables only
+- CSS should be included inline
+- CRITICAL REMINDER FOR HTML ARTIFACTS:
+ - ALWAYS set a background color inline in \n\n\n
+ ${
+ this.viewMode === "preview"
+ ? html`
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "svg-artifact": SvgArtifact;
+ }
+}
diff --git a/packages/web-ui/src/tools/artifacts/TextArtifact.ts b/packages/web-ui/src/tools/artifacts/TextArtifact.ts
new file mode 100644
index 00000000..b7899316
--- /dev/null
+++ b/packages/web-ui/src/tools/artifacts/TextArtifact.ts
@@ -0,0 +1,148 @@
+import { CopyButton, DownloadButton } from "@mariozechner/mini-lit";
+import hljs from "highlight.js";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { i18n } from "../../utils/i18n.js";
+import { ArtifactElement } from "./ArtifactElement.js";
+
+// Known code file extensions for highlighting
+const CODE_EXTENSIONS = [
+ "js",
+ "javascript",
+ "ts",
+ "typescript",
+ "jsx",
+ "tsx",
+ "py",
+ "python",
+ "java",
+ "c",
+ "cpp",
+ "cs",
+ "php",
+ "rb",
+ "ruby",
+ "go",
+ "rust",
+ "swift",
+ "kotlin",
+ "scala",
+ "dart",
+ "html",
+ "css",
+ "scss",
+ "sass",
+ "less",
+ "json",
+ "xml",
+ "yaml",
+ "yml",
+ "toml",
+ "sql",
+ "sh",
+ "bash",
+ "ps1",
+ "bat",
+ "r",
+ "matlab",
+ "julia",
+ "lua",
+ "perl",
+ "vue",
+ "svelte",
+];
+
+@customElement("text-artifact")
+export class TextArtifact extends ArtifactElement {
+ @property() override filename = "";
+ @property({ attribute: false }) override displayTitle = "";
+
+ private _content = "";
+ override get content(): string {
+ return this._content;
+ }
+ override set content(value: string) {
+ this._content = value;
+ this.requestUpdate();
+ }
+
+ protected override createRenderRoot(): HTMLElement | DocumentFragment {
+ return this; // light DOM
+ }
+
+ private isCode(): boolean {
+ const ext = this.filename.split(".").pop()?.toLowerCase() || "";
+ return CODE_EXTENSIONS.includes(ext);
+ }
+
+ private getLanguageFromExtension(ext: string): string {
+ const languageMap: Record
+ ${unsafeHTML(this.content.replace(/)/i, (_m, p1) => `
+
+ ${copyButton}
+ ${DownloadButton({
+ content: this.content,
+ filename: this.filename,
+ mimeType: this.getMimeType(),
+ title: i18n("Download"),
+ })}
+
+ `;
+ }
+
+ override render() {
+ const isCode = this.isCode();
+ const ext = this.filename.split(".").pop() || "";
+ return html`
+
+
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "text-artifact": TextArtifact;
+ }
+}
diff --git a/packages/web-ui/src/tools/artifacts/artifacts.ts b/packages/web-ui/src/tools/artifacts/artifacts.ts
new file mode 100644
index 00000000..cc10d5ac
--- /dev/null
+++ b/packages/web-ui/src/tools/artifacts/artifacts.ts
@@ -0,0 +1,888 @@
+import { Button, Diff, icon } from "@mariozechner/mini-lit";
+import { type AgentTool, type Message, StringEnum, type ToolCall, type ToolResultMessage } 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 { Attachment } from "../../utils/attachment-utils.js";
+import { i18n } from "../../utils/i18n.js";
+import type { ToolRenderer } from "../types.js";
+import type { ArtifactElement } from "./ArtifactElement.js";
+import { HtmlArtifact } from "./HtmlArtifact.js";
+import { MarkdownArtifact } from "./MarkdownArtifact.js";
+import { SvgArtifact } from "./SvgArtifact.js";
+import { TextArtifact } from "./TextArtifact.js";
+import "@mariozechner/mini-lit/dist/MarkdownBlock.js";
+import "@mariozechner/mini-lit/dist/CodeBlock.js";
+
+// Simple artifact model
+export interface Artifact {
+ filename: string;
+ title: string;
+ content: string;
+ createdAt: Date;
+ updatedAt: Date;
+}
+
+// JSON-schema friendly parameters object (LLM-facing)
+const artifactsParamsSchema = Type.Object({
+ command: StringEnum(["create", "update", "rewrite", "get", "delete", "logs"], {
+ description: "The operation to perform",
+ }),
+ filename: Type.String({ description: "Filename including extension (e.g., 'index.html', 'script.js')" }),
+ title: Type.Optional(Type.String({ description: "Display title for the tab (defaults to filename)" })),
+ content: Type.Optional(Type.String({ description: "File content" })),
+ old_str: Type.Optional(Type.String({ description: "String to replace (for update command)" })),
+ new_str: Type.Optional(Type.String({ description: "Replacement string (for update command)" })),
+});
+export type ArtifactsParams = Static
+ ${
+ isCode
+ ? html`
+
+ ${unsafeHTML(
+ hljs.highlight(this.content, {
+ language: this.getLanguageFromExtension(ext.toLowerCase()),
+ ignoreIllegals: true,
+ }).value,
+ )}${this.content} `
+ }
+ ${text}
`;
+}
+
+@customElement("artifacts-panel")
+export class ArtifactsPanel extends LitElement implements ToolRenderer\n
\n\nHello, World!
\nThis is a minimal HTML5 page.
\n