@mariozechner/pi-web-ui 0.5.44 → 0.5.45

package/src/tools/artifacts/artifacts.ts

@@ -1,25 +1,37 @@
-import { Button, Diff, icon } from "@mariozechner/mini-lit";
-import { type AgentTool, type Message, StringEnum, type ToolCall, type ToolResultMessage } from "@mariozechner/pi-ai";
+import { Button, icon } from "@mariozechner/mini-lit";
+import "@mariozechner/mini-lit/dist/MarkdownBlock.js";
+import { type AgentTool, type Message, 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 { Agent } from "../../agent/agent.js";
+import type { ArtifactMessage } from "../../components/Messages.js";
+import { ArtifactsRuntimeProvider } from "../../components/sandbox/ArtifactsRuntimeProvider.js";
+import { AttachmentsRuntimeProvider } from "../../components/sandbox/AttachmentsRuntimeProvider.js";
+import type { SandboxRuntimeProvider } from "../../components/sandbox/SandboxRuntimeProvider.js";
+import {
+	ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION_RO,
+	ARTIFACTS_TOOL_DESCRIPTION,
+	ATTACHMENTS_RUNTIME_DESCRIPTION,
+} from "../../prompts/prompts.js";
 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 { DocxArtifact } from "./DocxArtifact.js";
+import { ExcelArtifact } from "./ExcelArtifact.js";
+import { GenericArtifact } from "./GenericArtifact.js";
 import { HtmlArtifact } from "./HtmlArtifact.js";
+import { ImageArtifact } from "./ImageArtifact.js";
 import { MarkdownArtifact } from "./MarkdownArtifact.js";
+import { PdfArtifact } from "./PdfArtifact.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;
@@ -31,20 +43,14 @@ const artifactsParamsSchema = Type.Object({
 		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<typeof artifactsParamsSchema>;
 
-// Minimal helper to render plain text outputs consistently
-function plainOutput(text: string): TemplateResult {
-	return html`<div class="text-xs text-muted-foreground whitespace-pre-wrap font-mono">${text}</div>`;
-}
-
 @customElement("artifacts-panel")
-export class ArtifactsPanel extends LitElement implements ToolRenderer<ArtifactsParams, undefined> {
+export class ArtifactsPanel extends LitElement {
 	@state() private _artifacts = new Map<string, Artifact>();
 	@state() private _activeFilename: string | null = null;
 
@@ -52,8 +58,8 @@ export class ArtifactsPanel extends LitElement implements ToolRenderer<Artifacts
 	private artifactElements = new Map<string, ArtifactElement>();
 	private contentRef: Ref<HTMLDivElement> = createRef();
 
-	// External provider for attachments (decouples panel from AgentInterface)
-	@property({ attribute: false }) attachmentsProvider?: () => Attachment[];
+	// Agent reference (needed to get attachments for HTML artifacts)
+	@property({ attribute: false }) agent?: Agent;
 	// Sandbox URL provider for browser extensions (optional)
 	@property({ attribute: false }) sandboxUrlProvider?: () => string;
 	// Callbacks
@@ -70,6 +76,29 @@ export class ArtifactsPanel extends LitElement implements ToolRenderer<Artifacts
 		return this._artifacts;
 	}
 
+	// Get runtime providers for HTML artifacts (read-only: attachments + artifacts)
+	private getHtmlArtifactRuntimeProviders(): SandboxRuntimeProvider[] {
+		const providers: SandboxRuntimeProvider[] = [];
+
+		// Get attachments from agent messages
+		if (this.agent) {
+			const attachments: Attachment[] = [];
+			for (const message of this.agent.state.messages) {
+				if (message.role === "user" && message.attachments) {
+					attachments.push(...message.attachments);
+				}
+			}
+			if (attachments.length > 0) {
+				providers.push(new AttachmentsRuntimeProvider(attachments));
+			}
+		}
+
+		// Add read-only artifacts provider
+		providers.push(new ArtifactsRuntimeProvider(this, this.agent, false));
+
+		return providers;
+	}
+
 	protected override createRenderRoot(): HTMLElement | DocumentFragment {
 		return this; // light DOM for shared styles
 	}
@@ -99,60 +128,63 @@ export class ArtifactsPanel extends LitElement implements ToolRenderer<Artifacts
 	}
 
 	// Helper to determine file type from extension
-	private getFileType(filename: string): "html" | "svg" | "markdown" | "text" {
+	private getFileType(
+		filename: string,
+	): "html" | "svg" | "markdown" | "image" | "pdf" | "excel" | "docx" | "text" | "generic" {
 		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<string, string> = {
-			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";
+		if (ext === "pdf") return "pdf";
+		if (ext === "xlsx" || ext === "xls") return "excel";
+		if (ext === "docx") return "docx";
+		if (
+			ext === "png" ||
+			ext === "jpg" ||
+			ext === "jpeg" ||
+			ext === "gif" ||
+			ext === "webp" ||
+			ext === "bmp" ||
+			ext === "ico"
+		)
+			return "image";
+		// Text files
+		if (
+			ext === "txt" ||
+			ext === "json" ||
+			ext === "xml" ||
+			ext === "yaml" ||
+			ext === "yml" ||
+			ext === "csv" ||
+			ext === "js" ||
+			ext === "ts" ||
+			ext === "jsx" ||
+			ext === "tsx" ||
+			ext === "py" ||
+			ext === "java" ||
+			ext === "c" ||
+			ext === "cpp" ||
+			ext === "h" ||
+			ext === "css" ||
+			ext === "scss" ||
+			ext === "sass" ||
+			ext === "less" ||
+			ext === "sh"
+		)
+			return "text";
+		// Everything else gets generic fallback
+		return "generic";
 	}
 
 	// Get or create artifact element
-	private getOrCreateArtifactElement(filename: string, content: string, title: string): ArtifactElement {
+	private getOrCreateArtifactElement(filename: string, content: 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?.() || [];
+				(element as HtmlArtifact).runtimeProviders = this.getHtmlArtifactRuntimeProviders();
 				if (this.sandboxUrlProvider) {
 					(element as HtmlArtifact).sandboxUrlProvider = this.sandboxUrlProvider;
 				}
@@ -160,11 +192,20 @@ export class ArtifactsPanel extends LitElement implements ToolRenderer<Artifacts
 				element = new SvgArtifact();
 			} else if (type === "markdown") {
 				element = new MarkdownArtifact();
-			} else {
+			} else if (type === "image") {
+				element = new ImageArtifact();
+			} else if (type === "pdf") {
+				element = new PdfArtifact();
+			} else if (type === "excel") {
+				element = new ExcelArtifact();
+			} else if (type === "docx") {
+				element = new DocxArtifact();
+			} else if (type === "text") {
 				element = new TextArtifact();
+			} else {
+				element = new GenericArtifact();
 			}
 			element.filename = filename;
-			element.displayTitle = title;
 			element.content = content;
 			element.style.display = "none";
 			element.style.height = "100%";
@@ -186,9 +227,8 @@ export class ArtifactsPanel extends LitElement implements ToolRenderer<Artifacts
 		} else {
 			// Just update content
 			element.content = content;
-			element.displayTitle = title;
 			if (element instanceof HtmlArtifact) {
-				element.attachments = this.attachmentsProvider?.() || [];
+				element.runtimeProviders = this.getHtmlArtifactRuntimeProviders();
 			}
 		}
 
@@ -208,10 +248,18 @@ export class ArtifactsPanel extends LitElement implements ToolRenderer<Artifacts
 		});
 		this._activeFilename = filename;
 		this.requestUpdate(); // Only for tab bar update
+
+		// Scroll the active tab into view after render
+		requestAnimationFrame(() => {
+			const activeButton = this.querySelector(`button[data-filename="${filename}"]`);
+			if (activeButton) {
+				activeButton.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+			}
+		});
 	}
 
 	// Open panel and focus an artifact tab by filename
-	private openArtifact(filename: string) {
+	public openArtifact(filename: string) {
 		if (this._artifacts.has(filename)) {
 			this.showArtifact(filename);
 			// Ask host to open panel (AgentInterface demo listens to onOpen)
@@ -224,103 +272,14 @@ export class ArtifactsPanel extends LitElement implements ToolRenderer<Artifacts
 		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:
-  <script>
-    // List available files
-    const files = listFiles();
-    console.log('Available files:', files);
-
-    // Find CSV file
-    const csvFile = files.find(f => f.mimeType === 'text/csv');
-    if (csvFile) {
-      const csvContent = readTextFile(csvFile.id);
-      // Process CSV data...
-    }
-
-    // Display image
-    const imageFile = files.find(f => f.mimeType.startsWith('image/'));
-    if (imageFile) {
-      const bytes = readBinaryFile(imageFile.id);
-      const blob = new Blob([bytes], {type: imageFile.mimeType});
-      const url = URL.createObjectURL(blob);
-      document.body.innerHTML = '<img src="' + url + '">';
-    }
-  </script>
-
-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: <script type="module">import * as THREE from 'https://esm.sh/three';</script>
-- 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 <style> or directly on body element
-	- Failure to set a background color is a COMPLIANCE ERROR
-	- Background color MUST be explicitly defined to ensure visibility and proper rendering
-- Can embed base64 images directly in img tags
-- Ensure the layout is responsive as the iframe might be resized
-- Note: Network errors (404s) for external scripts may not be captured in logs due to browser security
-
-For application/vnd.ant.code artifacts:
-- Include the language parameter for syntax highlighting
-- Supports all major programming languages
-
-For text/markdown:
-- Standard markdown syntax
-- Will be rendered with full formatting
-- Can include base64 images using markdown syntax
-
-For image/svg+xml:
-- Complete SVG markup
-- Will be rendered inline
-- Can embed raster images as base64 in SVG
-
-CRITICAL REMINDER FOR ALL ARTIFACTS:
-- Prefer to update existing files rather than creating new ones
-- Keep filenames consistent and descriptive
-- Use appropriate file extensions
-- Ensure HTML artifacts have a defined background color
-`,
+			get description() {
+				// HTML artifacts have read-only access to attachments and artifacts
+				const runtimeProviderDescriptions = [
+					ATTACHMENTS_RUNTIME_DESCRIPTION,
+					ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION_RO,
+				];
+				return ARTIFACTS_TOOL_DESCRIPTION(runtimeProviderDescriptions);
+			},
 			parameters: artifactsParamsSchema,
 			// Execute mutates our local store and returns a plain output
 			execute: async (_toolCallId: string, args: Static<typeof artifactsParamsSchema>, _signal?: AbortSignal) => {
@@ -330,155 +289,10 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
 		};
 	}
 
-	// ToolRenderer implementation
-	renderParams(params: ArtifactsParams, isStreaming?: boolean): TemplateResult {
-		if (isStreaming && !params.command) {
-			return html`<div class="text-sm text-muted-foreground">${i18n("Processing artifact...")}</div>`;
-		}
-
-		let commandLabel = i18n("Processing");
-		if (params.command) {
-			switch (params.command) {
-				case "create":
-					commandLabel = i18n("Create");
-					break;
-				case "update":
-					commandLabel = i18n("Update");
-					break;
-				case "rewrite":
-					commandLabel = i18n("Rewrite");
-					break;
-				case "get":
-					commandLabel = i18n("Get");
-					break;
-				case "delete":
-					commandLabel = i18n("Delete");
-					break;
-				case "logs":
-					commandLabel = i18n("Get logs");
-					break;
-				default:
-					commandLabel = params.command.charAt(0).toUpperCase() + params.command.slice(1);
-			}
-		}
-		const filename = params.filename || "";
-
-		switch (params.command) {
-			case "create":
-				return html`
-					<div
-						class="text-sm cursor-pointer hover:bg-muted/50 rounded-sm px-2 py-1"
-						@click=${() => this.openArtifact(params.filename)}
-					>
-						<div>
-							<span class="font-medium">${i18n("Create")}</span>
-							<span class="text-muted-foreground ml-1">${filename}</span>
-						</div>
-						${
-							params.content
-								? html`<code-block
-									.code=${params.content}
-									language=${this.getLanguageFromFilename(params.filename)}
-									class="mt-2"
-								></code-block>`
-								: ""
-						}
-					</div>
-				`;
-			case "update":
-				return html`
-					<div
-						class="text-sm cursor-pointer hover:bg-muted/50 rounded-sm px-2 py-1"
-						@click=${() => this.openArtifact(params.filename)}
-					>
-						<div>
-							<span class="font-medium">${i18n("Update")}</span>
-							<span class="text-muted-foreground ml-1">${filename}</span>
-						</div>
-						${
-							params.old_str !== undefined && params.new_str !== undefined
-								? Diff({ oldText: params.old_str, newText: params.new_str, className: "mt-2" })
-								: ""
-						}
-					</div>
-				`;
-			case "rewrite":
-				return html`
-					<div
-						class="text-sm cursor-pointer hover:bg-muted/50 rounded-sm px-2 py-1"
-						@click=${() => this.openArtifact(params.filename)}
-					>
-						<div>
-							<span class="font-medium">${i18n("Rewrite")}</span>
-							<span class="text-muted-foreground ml-1">${filename}</span>
-						</div>
-						${
-							params.content
-								? html`<code-block
-									.code=${params.content}
-									language=${this.getLanguageFromFilename(params.filename)}
-									class="mt-2"
-								></code-block>`
-								: ""
-						}
-					</div>
-				`;
-			case "get":
-				return html`
-					<div
-						class="text-sm cursor-pointer hover:bg-muted/50 rounded-sm px-2 py-1"
-						@click=${() => this.openArtifact(params.filename)}
-					>
-						<span class="font-medium">${i18n("Get")}</span>
-						<span class="text-muted-foreground ml-1">${filename}</span>
-					</div>
-				`;
-			case "delete":
-				return html`
-					<div
-						class="text-sm cursor-pointer hover:bg-muted/50 rounded-sm px-2 py-1"
-						@click=${() => this.openArtifact(params.filename)}
-					>
-						<span class="font-medium">${i18n("Delete")}</span>
-						<span class="text-muted-foreground ml-1">${filename}</span>
-					</div>
-				`;
-			case "logs":
-				return html`
-					<div
-						class="text-sm cursor-pointer hover:bg-muted/50 rounded-sm px-2 py-1"
-						@click=${() => this.openArtifact(params.filename)}
-					>
-						<span class="font-medium">${i18n("Get logs")}</span>
-						<span class="text-muted-foreground ml-1">${filename}</span>
-					</div>
-				`;
-			default:
-				// Fallback for any command not yet handled during streaming
-				return html`
-					<div
-						class="text-sm cursor-pointer hover:bg-muted/50 rounded-sm px-2 py-1"
-						@click=${() => this.openArtifact(params.filename)}
-					>
-						<span class="font-medium">${commandLabel}</span>
-						<span class="text-muted-foreground ml-1">${filename}</span>
-					</div>
-				`;
-		}
-	}
-
-	renderResult(params: ArtifactsParams, result: ToolResultMessage<undefined>): TemplateResult {
-		// Make result clickable to focus the referenced file when applicable
-		const content = result.output || i18n("(no output)");
-		return html`
-			<div class="cursor-pointer hover:bg-muted/50 rounded-sm px-2 py-1" @click=${() => this.openArtifact(params.filename)}>
-				${plainOutput(content)}
-			</div>
-		`;
-	}
-
 	// Re-apply artifacts by scanning a message list (optional utility)
-	public async reconstructFromMessages(messages: Array<Message | { role: "aborted" }>): Promise<void> {
+	public async reconstructFromMessages(
+		messages: Array<Message | { role: "aborted" } | { role: "artifact" }>,
+	): Promise<void> {
 		const toolCalls = new Map<string, ToolCall>();
 		const artifactToolName = "artifacts";
 
@@ -496,7 +310,33 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
 		// 2) Build an ordered list of successful artifact operations
 		const operations: Array<ArtifactsParams> = [];
 		for (const m of messages) {
-			if ((m as any).role === "toolResult" && (m as any).toolName === artifactToolName && !(m as any).isError) {
+			if ((m as any).role === "artifact") {
+				const artifactMsg = m as ArtifactMessage;
+				switch (artifactMsg.action) {
+					case "create":
+						operations.push({
+							command: "create",
+							filename: artifactMsg.filename,
+							content: artifactMsg.content,
+						});
+						break;
+					case "update":
+						operations.push({
+							command: "rewrite",
+							filename: artifactMsg.filename,
+							content: artifactMsg.content,
+						});
+						break;
+					case "delete":
+						operations.push({
+							command: "delete",
+							filename: artifactMsg.filename,
+						});
+						break;
+				}
+			}
+			// Handle tool result messages (from artifacts tool calls)
+			else if ((m as any).role === "toolResult" && (m as any).toolName === artifactToolName && !(m as any).isError) {
 				const toolCallId = (m as any).toolCallId as string;
 				const call = toolCalls.get(toolCallId);
 				if (!call) continue;
@@ -507,30 +347,27 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
 		}
 
 		// 3) Compute final state per filename by simulating operations in-memory
-		type FinalArtifact = { title: string; content: string };
-		const finalArtifacts = new Map<string, FinalArtifact>();
+		const finalArtifacts = new Map<string, string>();
 		for (const op of operations) {
 			const filename = op.filename;
 			switch (op.command) {
 				case "create": {
 					if (op.content) {
-						finalArtifacts.set(filename, { title: op.title || filename, content: op.content });
+						finalArtifacts.set(filename, op.content);
 					}
 					break;
 				}
 				case "rewrite": {
 					if (op.content) {
-						// If file didn't exist earlier but rewrite succeeded, treat as fresh content
-						const existing = finalArtifacts.get(filename);
-						finalArtifacts.set(filename, { title: op.title || existing?.title || filename, content: op.content });
+						finalArtifacts.set(filename, op.content);
 					}
 					break;
 				}
 				case "update": {
-					const existing = finalArtifacts.get(filename);
+					let existing = finalArtifacts.get(filename);
 					if (!existing) break; // skip invalid update (shouldn't happen for successful results)
 					if (op.old_str !== undefined && op.new_str !== undefined) {
-						existing.content = existing.content.replace(op.old_str, op.new_str);
+						existing = existing.replace(op.old_str, op.new_str);
 						finalArtifacts.set(filename, existing);
 					}
 					break;
@@ -556,8 +393,8 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
 		this._artifacts = new Map(this._artifacts);
 
 		// 5) Create artifacts in a single pass without waiting for iframe execution or tab switching
-		for (const [filename, { title, content }] of finalArtifacts.entries()) {
-			const createParams: ArtifactsParams = { command: "create", filename, title, content } as const;
+		for (const [filename, content] of finalArtifacts.entries()) {
+			const createParams: ArtifactsParams = { command: "create", filename, content } as const;
 			try {
 				await this.createArtifact(createParams, { skipWait: true, silent: true });
 			} catch {
@@ -605,50 +442,27 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
 		}
 
 		return new Promise((resolve) => {
-			let resolved = false;
-
-			// Listen for the execution-complete message
-			const messageHandler = (event: MessageEvent) => {
-				if (event.data?.type === "execution-complete" && event.data?.artifactId === filename) {
-					if (!resolved) {
-						resolved = true;
-						window.removeEventListener("message", messageHandler);
-
-						// Get the logs from the element
-						const logs = element.getLogs();
-						if (logs.includes("[error]")) {
-							resolve(`\n\nExecution completed with errors:\n${logs}`);
-						} else if (logs !== `No logs for ${filename}`) {
-							resolve(`\n\nExecution logs:\n${logs}`);
-						} else {
-							resolve("");
-						}
-					}
-				}
-			};
-
-			window.addEventListener("message", messageHandler);
-
-			// Fallback timeout in case the message never arrives
+			// Fallback timeout - just get logs after execution should complete
 			setTimeout(() => {
-				if (!resolved) {
-					resolved = true;
-					window.removeEventListener("message", messageHandler);
-
-					// Get whatever logs we have so far
-					const logs = element.getLogs();
-					if (logs.includes("[error]")) {
-						resolve(`\n\nExecution timed out with errors:\n${logs}`);
-					} else if (logs !== `No logs for ${filename}`) {
-						resolve(`\n\nExecution timed out. Partial logs:\n${logs}`);
-					} else {
-						resolve("");
-					}
-				}
+				// Get whatever logs we have
+				const logs = element.getLogs();
+				resolve(logs);
 			}, 1500);
 		});
 	}
 
+	// Reload all HTML artifacts (called when any artifact changes)
+	private reloadAllHtmlArtifacts() {
+		this.artifactElements.forEach((element) => {
+			if (element instanceof HtmlArtifact && element.sandboxIframeRef.value) {
+				// Update runtime providers with latest artifact state
+				element.runtimeProviders = this.getHtmlArtifactRuntimeProviders();
+				// Re-execute the HTML content
+				element.executeContent(element.content);
+			}
+		});
+	}
+
 	private async createArtifact(
 		params: ArtifactsParams,
 		options: { skipWait?: boolean; silent?: boolean } = {},
@@ -660,10 +474,8 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
 			return `Error: File ${params.filename} already exists`;
 		}
 
-		const title = params.title || params.filename;
 		const artifact: Artifact = {
 			filename: params.filename,
-			title: title,
 			content: params.content,
 			createdAt: new Date(),
 			updatedAt: new Date(),
@@ -672,18 +484,21 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
 		this._artifacts = new Map(this._artifacts);
 
 		// Create or update element
-		this.getOrCreateArtifactElement(params.filename, params.content, title);
+		this.getOrCreateArtifactElement(params.filename, params.content);
 		if (!options.silent) {
 			this.showArtifact(params.filename);
 			this.onArtifactsChange?.();
 			this.requestUpdate();
 		}
 
+		// Reload all HTML artifacts since they might depend on this new artifact
+		this.reloadAllHtmlArtifacts();
+
 		// For HTML files, wait for execution
 		let result = `Created file ${params.filename}`;
 		if (this.getFileType(params.filename) === "html" && !options.skipWait) {
 			const logs = await this.waitForHtmlExecution(params.filename);
-			result += logs;
+			result += `\n${logs}`;
 		}
 
 		return result;
@@ -711,7 +526,7 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
 		this._artifacts.set(params.filename, artifact);
 
 		// Update element
-		this.getOrCreateArtifactElement(params.filename, artifact.content, artifact.title);
+		this.getOrCreateArtifactElement(params.filename, artifact.content);
 		if (!options.silent) {
 			this.onArtifactsChange?.();
 			this.requestUpdate();
@@ -720,11 +535,14 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
 		// Show the artifact
 		this.showArtifact(params.filename);
 
+		// Reload all HTML artifacts since they might depend on this updated artifact
+		this.reloadAllHtmlArtifacts();
+
 		// For HTML files, wait for execution
 		let result = `Updated file ${params.filename}`;
 		if (this.getFileType(params.filename) === "html" && !options.skipWait) {
 			const logs = await this.waitForHtmlExecution(params.filename);
-			result += logs;
+			result += `\n${logs}`;
 		}
 
 		return result;
@@ -745,12 +563,11 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
 		}
 
 		artifact.content = params.content;
-		if (params.title) artifact.title = params.title;
 		artifact.updatedAt = new Date();
 		this._artifacts.set(params.filename, artifact);
 
 		// Update element
-		this.getOrCreateArtifactElement(params.filename, artifact.content, artifact.title);
+		this.getOrCreateArtifactElement(params.filename, artifact.content);
 		if (!options.silent) {
 			this.onArtifactsChange?.();
 		}
@@ -758,11 +575,14 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
 		// Show the artifact
 		this.showArtifact(params.filename);
 
+		// Reload all HTML artifacts since they might depend on this rewritten artifact
+		this.reloadAllHtmlArtifacts();
+
 		// For HTML files, wait for execution
-		let result = `Rewrote file ${params.filename}`;
+		let result = "";
 		if (this.getFileType(params.filename) === "html" && !options.skipWait) {
 			const logs = await this.waitForHtmlExecution(params.filename);
-			result += logs;
+			result += `\n${logs}`;
 		}
 
 		return result;
@@ -809,6 +629,9 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
 		this.onArtifactsChange?.();
 		this.requestUpdate();
 
+		// Reload all HTML artifacts since they might have depended on this deleted artifact
+		this.reloadAllHtmlArtifacts();
+
 		return `Deleted file ${params.filename}`;
 	}
 
@@ -852,6 +675,7 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
 							return html`
 								<button
 									class="px-3 py-2 whitespace-nowrap border-b-2 ${activeClass}"
+									data-filename="${a.filename}"
 									@click=${() => this.showArtifact(a.filename)}
 								>
 									<span class="font-mono text-xs">${a.filename}</span>