Simplify ArtifactsRuntimeProvider constructor

- Take artifactsPanel and agent directly instead of 5 separate function parameters
- Define minimal ArtifactsPanelLike and AgentLike interfaces to avoid circular deps
- Update all call sites (ChatPanel, browser-javascript) to use simplified constructor
- Much cleaner and easier to use

packages/web-ui/src/ChatPanel.ts

@@ -112,34 +112,7 @@ export class ChatPanel extends LitElement {
 			}
 
 			// Add artifacts provider (always available)
-			providers.push(
+			providers.push(new ArtifactsRuntimeProvider(this.artifactsPanel!, this.agent!));
-				new ArtifactsRuntimeProvider(
-					() => this.artifactsPanel!.artifacts,
-					async (filename: string, content: string) => {
-						await this.artifactsPanel!.tool.execute("", {
-							command: "create",
-							filename,
-							content,
-						});
-					},
-					async (filename: string, content: string) => {
-						await this.artifactsPanel!.tool.execute("", {
-							command: "rewrite",
-							filename,
-							content,
-						});
-					},
-					async (filename: string) => {
-						await this.artifactsPanel!.tool.execute("", {
-							command: "delete",
-							filename,
-						});
-					},
-					(message: any) => {
-						this.agent!.appendMessage(message);
-					},
-				),
-			);
 
 			return providers;
 		};

packages/web-ui/src/components/sandbox/ArtifactsRuntimeProvider.ts

@@ -1,6 +1,18 @@
 import { ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION } from "../../prompts/tool-prompts.js";
 import type { SandboxRuntimeProvider } from "./SandboxRuntimeProvider.js";
 
+// Define minimal interface for ArtifactsPanel to avoid circular dependencies
+interface ArtifactsPanelLike {
+	artifacts: Map<string, { content: string }>;
+	tool: {
+		execute(toolCallId: string, args: { command: string; filename: string; content?: string }): Promise<any>;
+	};
+}
+
+interface AgentLike {
+	appendMessage(message: any): void;
+}
+
 /**
  * Artifacts Runtime Provider
  *
@@ -10,18 +22,14 @@ import type { SandboxRuntimeProvider } from "./SandboxRuntimeProvider.js";
  */
 export class ArtifactsRuntimeProvider implements SandboxRuntimeProvider {
 	constructor(
-		private getArtifactsFn: () => Map<string, { content: string }>,
+		private artifactsPanel: ArtifactsPanelLike,
-		private createArtifactFn: (filename: string, content: string, title?: string) => Promise<void>,
+		private agent?: AgentLike,
-		private updateArtifactFn: (filename: string, content: string, title?: string) => Promise<void>,
-		private deleteArtifactFn: (filename: string) => Promise<void>,
-		private appendMessageFn?: (message: any) => void,
 	) {}
 
 	getData(): Record<string, any> {
 		// Inject artifact snapshot for offline mode
 		const snapshot: Record<string, string> = {};
-		const artifacts = this.getArtifactsFn();
+		this.artifactsPanel.artifacts.forEach((artifact, filename) => {
-		artifacts.forEach((artifact, filename) => {
 			snapshot[filename] = artifact.content;
 		});
 		return { artifacts: snapshot };
@@ -153,15 +161,13 @@ export class ArtifactsRuntimeProvider implements SandboxRuntimeProvider {
 		try {
 			switch (action) {
 				case "has": {
-					const artifacts = this.getArtifactsFn();
+					const exists = this.artifactsPanel.artifacts.has(filename);
-					const exists = artifacts.has(filename);
 					respond({ success: true, result: exists });
 					break;
 				}
 
 				case "get": {
-					const artifacts = this.getArtifactsFn();
+					const artifact = this.artifactsPanel.artifacts.get(filename);
-					const artifact = artifacts.get(filename);
 					if (!artifact) {
 						respond({ success: false, error: `Artifact not found: ${filename}` });
 					} else {
@@ -172,8 +178,12 @@ export class ArtifactsRuntimeProvider implements SandboxRuntimeProvider {
 
 				case "create": {
 					try {
-						await this.createArtifactFn(filename, content, filename);
+						await this.artifactsPanel.tool.execute("", {
-						this.appendMessageFn?.({
+							command: "create",
+							filename,
+							content,
+						});
+						this.agent?.appendMessage({
 							role: "artifact",
 							action: "create",
 							filename,
@@ -190,8 +200,12 @@ export class ArtifactsRuntimeProvider implements SandboxRuntimeProvider {
 
 				case "update": {
 					try {
-						await this.updateArtifactFn(filename, content, filename);
+						await this.artifactsPanel.tool.execute("", {
-						this.appendMessageFn?.({
+							command: "rewrite",
+							filename,
+							content,
+						});
+						this.agent?.appendMessage({
 							role: "artifact",
 							action: "update",
 							filename,
@@ -207,8 +221,11 @@ export class ArtifactsRuntimeProvider implements SandboxRuntimeProvider {
 
 				case "delete": {
 					try {
-						await this.deleteArtifactFn(filename);
+						await this.artifactsPanel.tool.execute("", {
-						this.appendMessageFn?.({
+							command: "delete",
+							filename,
+						});
+						this.agent?.appendMessage({
 							role: "artifact",
 							action: "delete",
 							filename,