@mariozechner/pi-web-ui 0.5.44 → 0.5.46

package/dist/tools/artifacts/artifacts.js

@@ -4,35 +4,37 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Button, Diff, icon } from "@mariozechner/mini-lit";
+import { Button, icon } from "@mariozechner/mini-lit";
+import "@mariozechner/mini-lit/dist/MarkdownBlock.js";
 import { StringEnum } from "@mariozechner/pi-ai";
 import { Type } from "@sinclair/typebox";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { X } from "lucide";
+import { ArtifactsRuntimeProvider } from "../../components/sandbox/ArtifactsRuntimeProvider.js";
+import { AttachmentsRuntimeProvider } from "../../components/sandbox/AttachmentsRuntimeProvider.js";
+import { ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION_RO, ARTIFACTS_TOOL_DESCRIPTION, ATTACHMENTS_RUNTIME_DESCRIPTION, } from "../../prompts/prompts.js";
 import { i18n } from "../../utils/i18n.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";
 // 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)" })),
 });
-// Minimal helper to render plain text outputs consistently
-function plainOutput(text) {
-    return html `<div class="text-xs text-muted-foreground whitespace-pre-wrap font-mono">${text}</div>`;
-}
 let ArtifactsPanel = class ArtifactsPanel extends LitElement {
     constructor() {
         super(...arguments);
@@ -50,6 +52,25 @@ let ArtifactsPanel = class ArtifactsPanel extends LitElement {
     get artifacts() {
         return this._artifacts;
     }
+    // Get runtime providers for HTML artifacts (read-only: attachments + artifacts)
+    getHtmlArtifactRuntimeProviders() {
+        const providers = [];
+        // Get attachments from agent messages
+        if (this.agent) {
+            const attachments = [];
+            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;
+    }
     createRenderRoot() {
         return this; // light DOM for shared styles
     }
@@ -86,53 +107,53 @@ let ArtifactsPanel = class ArtifactsPanel extends LitElement {
             return "svg";
         if (ext === "md" || ext === "markdown")
             return "markdown";
-        return "text";
-    }
-    // Helper to determine language for syntax highlighting
-    getLanguageFromFilename(filename) {
-        if (!filename)
+        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";
-        const ext = filename.split(".").pop()?.toLowerCase();
-        const languageMap = {
-            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";
+        // Everything else gets generic fallback
+        return "generic";
     }
     // Get or create artifact element
-    getOrCreateArtifactElement(filename, content, title) {
+    getOrCreateArtifactElement(filename, content) {
         let element = this.artifactElements.get(filename);
         if (!element) {
             const type = this.getFileType(filename);
             if (type === "html") {
                 element = new HtmlArtifact();
-                element.attachments = this.attachmentsProvider?.() || [];
+                element.runtimeProviders = this.getHtmlArtifactRuntimeProviders();
                 if (this.sandboxUrlProvider) {
                     element.sandboxUrlProvider = this.sandboxUrlProvider;
                 }
@@ -143,11 +164,25 @@ let ArtifactsPanel = class ArtifactsPanel extends LitElement {
             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%";
@@ -169,9 +204,8 @@ let ArtifactsPanel = class ArtifactsPanel extends LitElement {
         else {
             // Just update content
             element.content = content;
-            element.displayTitle = title;
             if (element instanceof HtmlArtifact) {
-                element.attachments = this.attachmentsProvider?.() || [];
+                element.runtimeProviders = this.getHtmlArtifactRuntimeProviders();
             }
         }
         return element;
@@ -189,6 +223,13 @@ let ArtifactsPanel = class ArtifactsPanel extends LitElement {
         });
         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
     openArtifact(filename) {
@@ -203,103 +244,14 @@ let ArtifactsPanel = class ArtifactsPanel extends LitElement {
         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, args, _signal) => {
@@ -308,143 +260,6 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
             },
         };
     }
-    // ToolRenderer implementation
-    renderParams(params, isStreaming) {
-        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, result) {
-        // 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)
     async reconstructFromMessages(messages) {
         const toolCalls = new Map();
@@ -462,7 +277,33 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
         // 2) Build an ordered list of successful artifact operations
         const operations = [];
         for (const m of messages) {
-            if (m.role === "toolResult" && m.toolName === artifactToolName && !m.isError) {
+            if (m.role === "artifact") {
+                const artifactMsg = m;
+                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.role === "toolResult" && m.toolName === artifactToolName && !m.isError) {
                 const toolCallId = m.toolCallId;
                 const call = toolCalls.get(toolCallId);
                 if (!call)
@@ -473,30 +314,29 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
                 operations.push(params);
             }
         }
+        // 3) Compute final state per filename by simulating operations in-memory
         const finalArtifacts = new Map();
         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;
@@ -520,8 +360,8 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
         this._activeFilename = null;
         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 = { command: "create", filename, title, content };
+        for (const [filename, content] of finalArtifacts.entries()) {
+            const createParams = { command: "create", filename, content };
             try {
                 await this.createArtifact(createParams, { skipWait: true, silent: true });
             }
@@ -563,48 +403,25 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
             return "";
         }
         return new Promise((resolve) => {
-            let resolved = false;
-            // Listen for the execution-complete message
-            const messageHandler = (event) => {
-                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)
+    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);
+            }
+        });
+    }
     async createArtifact(params, options = {}) {
         if (!params.filename || !params.content) {
             return "Error: create command requires filename and content";
@@ -612,10 +429,8 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
         if (this._artifacts.has(params.filename)) {
             return `Error: File ${params.filename} already exists`;
         }
-        const title = params.title || params.filename;
         const artifact = {
             filename: params.filename,
-            title: title,
             content: params.content,
             createdAt: new Date(),
             updatedAt: new Date(),
@@ -623,17 +438,19 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
         this._artifacts.set(params.filename, artifact);
         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;
     }
@@ -655,18 +472,20 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
         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?.();
             this.requestUpdate();
         }
         // 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;
     }
@@ -682,22 +501,22 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
             return "Error: rewrite command requires content";
         }
         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?.();
         }
         // 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;
     }
@@ -740,6 +559,8 @@ 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}`;
     }
     getLogs(params) {
@@ -774,6 +595,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>
@@ -810,7 +632,7 @@ __decorate([
 ], ArtifactsPanel.prototype, "_activeFilename", void 0);
 __decorate([
     property({ attribute: false })
-], ArtifactsPanel.prototype, "attachmentsProvider", void 0);
+], ArtifactsPanel.prototype, "agent", void 0);
 __decorate([
     property({ attribute: false })
 ], ArtifactsPanel.prototype, "sandboxUrlProvider", void 0);