improve agent

bun.lock

@@ -14,7 +14,7 @@
         "marked": "^16.2.1",
         "monaco-editor": "^0.50.0",
         "svelte-splitpanes": "^8.0.5",
-        "vibegame": "^0.1.3",
+        "vibegame": "^0.1.4",
         "zod": "^4.1.8",
       },
       "devDependencies": {
@@ -780,7 +780,7 @@
 
     "uuid": ["[email protected]", "", { "bin": { "uuid": "dist/bin/uuid" } }, "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ=="],
 
-    "vibegame": ["[email protected].3", "", { "dependencies": { "@dimforge/rapier3d-compat": "^0.18.2", "gsap": "^3.13.0", "zod": "^4.1.5" }, "peerDependencies": { "bitecs": ">=0.3.40", "three": ">=0.170.0" } }, "sha512-pUUK8yjHhb9UCgaBKZerKovn3rR+RD8AKoF8iFoYRIOhtDBXjGV+hLzJ2Z9QLpymCCjEuo+vDTdfatagARQ1wg=="],
+    "vibegame": ["[email protected].4", "", { "dependencies": { "@dimforge/rapier3d-compat": "^0.18.2", "gsap": "^3.13.0", "zod": "^4.1.5" }, "peerDependencies": { "bitecs": ">=0.3.40", "three": ">=0.170.0" } }, "sha512-U8iZzedz/egganPKym2Kjc7ZG1YJpnZ2CuB1q+e+1H3tOPrH5rBrwUKK+5jfBtgdUkMVT451GIcXioF+YBsKHg=="],
 
     "vite": ["[email protected]", "", { "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", "rollup": "^4.20.0" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || >=20.0.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.4.0" }, "optionalPeers": ["@types/node", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser"], "bin": { "vite": "bin/vite.js" } }, "sha512-j3lYzGC3P+B5Yfy/pfKNgVEg4+UtcIJcVRt2cDjIOmhLourAqPqf8P7acgxeiSgUB7E3p2P8/3gNIgDLpwzs4g=="],
 

llms.txt

@@ -101,9 +101,10 @@ const Health = GAME.defineComponent({
 });
 
 // System = Logic only
+const healthQuery = GAME.defineQuery([Health]);
 const DamageSystem: GAME.System = {
   update: (state) => {
-    const entities = GAME.defineQuery([Health])(state.world);
+    const entities = healthQuery(state.world);
     for (const entity of entities) {
       Health.current[entity] -= 1 * state.time.delta;
       if (Health.current[entity] <= 0) {

package.json

@@ -46,7 +46,7 @@
     "marked": "^16.2.1",
     "monaco-editor": "^0.50.0",
     "svelte-splitpanes": "^8.0.5",
-    "vibegame": "^0.1.3",
+    "vibegame": "^0.1.4",
     "zod": "^4.1.8"
   }
 }

src/App.svelte

@@ -1,20 +1,16 @@
 <script lang="ts">
     import { onMount, onDestroy } from 'svelte';
-    import { consoleCapture } from './lib/services/console-capture';
-    import { consoleForwarder } from './lib/services/console-forward';
     import { registerShortcuts, shortcuts } from './lib/config/shortcuts';
     import { loadingStore } from './lib/stores/loading';
     import AppHeader from './lib/components/layout/AppHeader.svelte';
     import SplitView from './lib/components/layout/SplitView.svelte';
     import LoadingScreen from './lib/components/layout/LoadingScreen.svelte';
-    
+
     let unregisterShortcuts: () => void;
-    
+
     onMount(() => {
         loadingStore.startLoading();
 
-        consoleCapture.setup();
-        consoleForwarder.start();
         unregisterShortcuts = registerShortcuts(shortcuts);
 
         setTimeout(() => {
@@ -29,8 +25,6 @@
     });
 
     onDestroy(() => {
-        consoleCapture.teardown();
-        consoleForwarder.stop();
         if (unregisterShortcuts) unregisterShortcuts();
     });
 </script>

src/lib/components/chat/StreamingText.svelte

@@ -16,7 +16,6 @@
     let lastProcessedLength = 0;
 
     $: if (streaming && content) {
-        // Only process truly new content
         if (content.length > lastProcessedLength) {
             const newChars = content.slice(lastProcessedLength);
             if (newChars) {
@@ -39,12 +38,10 @@
         isProcessing = true;
 
         while (buffer.length > 0) {
-            // Process multiple characters at once for better performance
             const chunkSize = Math.min(3, buffer.length);
             const chunk = buffer.splice(0, chunkSize).join('');
             displayedContent += chunk;
 
-            // Only delay if there are more characters to process
             if (buffer.length > 0) {
                 await new Promise(resolve => setTimeout(resolve, 1000 / speed));
             }
@@ -89,10 +86,15 @@
     onMount(() => {
         if (streaming) {
             showCursor();
-            // Reset tracking when component mounts with streaming
             lastProcessedLength = 0;
             displayedContent = "";
 
+            if (content) {
+                buffer.push(...content.split(''));
+                lastProcessedLength = content.length;
+                processBuffer();
+            }
+
             gsap.fromTo(containerElement,
                 { opacity: 0, y: 5 },
                 { opacity: 1, y: 0, duration: 0.3, ease: "power2.out" }
@@ -141,4 +143,4 @@
         animation: none;
         vertical-align: baseline;
     }
-</style>
+</style>

src/lib/components/game/GameCanvas.svelte

@@ -10,24 +10,33 @@
   let reloadTimer: any;
   let previousContent = '';
   let isInitialized = false;
-  
+  let lastRestartTime = 0;
+
   $: if ($editorStore.content !== previousContent && $gameStore.isAutoRunning && isInitialized) {
     previousContent = $editorStore.content;
     clearTimeout(reloadTimer);
-    reloadTimer = setTimeout(async () => {
-      if (!$gameStore.isStarting) {
-        const worldContent = HTMLParser.extractGameContent($editorStore.content);
-        await gameEngine.start(worldContent);
-      }
-    }, 800);
+
+    const now = Date.now();
+    if (now - lastRestartTime >= 2000) {
+      reloadTimer = setTimeout(async () => {
+        const currentTime = Date.now();
+        if (currentTime - lastRestartTime < 2000 || $gameStore.isStarting) {
+          return;
+        }
+        lastRestartTime = currentTime;
+
+        const { world, scripts } = HTMLParser.extractGameContent($editorStore.content);
+        await gameEngine.start(world, scripts);
+      }, 1500);
+    }
   }
-  
+
   onMount(async () => {
     previousContent = $editorStore.content;
     setTimeout(async () => {
       if (!$gameStore.instance && $gameStore.isAutoRunning) {
-        const worldContent = HTMLParser.extractGameContent($editorStore.content);
-        await gameEngine.start(worldContent);
+        const { world, scripts } = HTMLParser.extractGameContent($editorStore.content);
+        await gameEngine.start(world, scripts);
       }
       isInitialized = true;
     }, 400);

src/lib/components/layout/AppHeader.svelte

@@ -9,8 +9,8 @@
   import gsap from 'gsap';
   
   async function restartGame() {
-    const worldContent = HTMLParser.extractGameContent($editorStore.content);
-    await gameEngine.start(worldContent);
+    const { world, scripts } = HTMLParser.extractGameContent($editorStore.content);
+    await gameEngine.start(world, scripts);
   }
   
   function handleViewModeChange(mode: 'code' | 'preview') {

src/lib/server/langgraph-agent.ts

@@ -72,24 +72,23 @@ export class LangGraphAgent {
       let currentSegmentContent = "";
       let buffer = "";
       const messageId = config?.metadata?.messageId;
-      const toolRegex = /\[TOOL:\s*(\w+)(?:\s+({[^}]+}))?\]/g;
+
+      const toolRegex = /TOOL:\s*(\w+)\s+ARGS:\s*({[^}]*})/g;
 
       for await (const token of this.streamModelResponse(messages)) {
         fullResponse += token;
         config?.writer?.({ type: "token", content: token });
         buffer += token;
 
-        // Process buffer to separate text from tool calls
         let processedUpTo = 0;
         let match;
-        toolRegex.lastIndex = 0; // Reset regex state
+        toolRegex.lastIndex = 0;
 
         while ((match = toolRegex.exec(buffer)) !== null) {
-          // Send any text before the tool call
           const textBefore = buffer.substring(processedUpTo, match.index);
 
-          if (textBefore.trim()) {
-            if (!currentSegmentId && this.ws) {
+          if (textBefore.trim() && this.ws) {
+            if (!currentSegmentId) {
               currentSegmentId = `seg_${Date.now()}_${Math.random()}`;
               currentSegmentContent = "";
               this.ws.send(
@@ -105,25 +104,20 @@ export class LangGraphAgent {
               );
             }
 
-            if (currentSegmentId) {
-              currentSegmentContent += textBefore;
-              if (this.ws) {
-                this.ws.send(
-                  JSON.stringify({
-                    type: "segment_token",
-                    payload: {
-                      segmentId: currentSegmentId,
-                      token: textBefore,
-                      messageId,
-                    },
-                    timestamp: Date.now(),
-                  }),
-                );
-              }
-            }
+            currentSegmentContent += textBefore;
+            this.ws.send(
+              JSON.stringify({
+                type: "segment_token",
+                payload: {
+                  segmentId: currentSegmentId,
+                  token: textBefore,
+                  messageId,
+                },
+                timestamp: Date.now(),
+              }),
+            );
           }
 
-          // End current text segment before tool
           if (currentSegmentId && currentSegmentContent.trim() && this.ws) {
             this.ws.send(
               JSON.stringify({
@@ -143,11 +137,9 @@ export class LangGraphAgent {
           processedUpTo = match.index + match[0].length;
         }
 
-        // Keep unprocessed text in buffer or flush if no potential tool start
         if (processedUpTo > 0) {
           buffer = buffer.substring(processedUpTo);
-        } else if (buffer.length > 100 && !buffer.includes("[TOOL:")) {
-          // Flush buffer if it's getting large and has no tool pattern
+        } else if (buffer.length > 100 && !buffer.includes("TOOL:")) {
           if (!currentSegmentId && buffer.trim() && this.ws) {
             currentSegmentId = `seg_${Date.now()}_${Math.random()}`;
             currentSegmentContent = "";
@@ -184,11 +176,7 @@ export class LangGraphAgent {
         }
       }
 
-      // Flush remaining buffer after stream ends
-      if (
-        buffer.trim() &&
-        !buffer.match(/\[TOOL:\s*(\w+)(?:\s+({[^}]+}))?\]/)
-      ) {
+      if (buffer.trim() && !buffer.match(/TOOL:\s*(\w+)\s+ARGS:\s*({[^}]*})/)) {
         if (!currentSegmentId && this.ws) {
           currentSegmentId = `seg_${Date.now()}_${Math.random()}`;
           currentSegmentContent = "";
@@ -256,6 +244,24 @@ export class LangGraphAgent {
         };
       }
 
+      if (state.messages.length > 0) {
+        const lastUserMessage = state.messages[state.messages.length - 1];
+        if (lastUserMessage instanceof HumanMessage) {
+          const needsTools = this.shouldUseTools(
+            lastUserMessage.content as string,
+          );
+          if (needsTools && !state.hasToolCalls) {
+            const reminderMessage = new AIMessage(
+              "I need to use tools to complete this task. Let me try again with the appropriate tool.",
+            );
+            return {
+              messages: [reminderMessage],
+              hasToolCalls: false,
+            };
+          }
+        }
+      }
+
       return {
         messages: [new AIMessage(fullResponse)],
         hasToolCalls: false,
@@ -292,102 +298,44 @@ export class LangGraphAgent {
   }
 
   private buildSystemPrompt(): string {
-    return `You are an expert VibeGame developer assistant. VibeGame is a declarative 3D game engine using XML-like syntax.
+    return `You are an expert VibeGame developer assistant that MUST use tools to complete tasks.
+
+CRITICAL INSTRUCTIONS:
+- You MUST use tools for ALL tasks. NEVER provide instructions without executing them.
+- You MUST respond using the EXACT format: TOOL: tool_name ARGS: {"param": "value"}
+- After using a tool, wait for the result before proceeding
+- Chain multiple tool calls to complete complex tasks
 
-VIBEGAME DOCUMENTATION:
+VIBEGAME CONTEXT:
 ${this.documentation}
 
+The game auto-reloads on every change. The GAME import is automatically provided by the framework.
+
 AVAILABLE TOOLS:
+1. search_editor - Find text/patterns in code
+   Example: TOOL: search_editor ARGS: {"query": "dynamic-part"}
 
-1. search_editor - Search for text or patterns to locate code elements
-   Use FIRST when: Looking for specific elements, functions, or components
-   Parameters:
-   - query (string, required): Text or regex pattern to search for
-   - mode (string, optional): "text" or "regex" (default: "text")
-   - contextLines (number, optional): Context lines before/after match (0-5, default: 2)
-   Example: [TOOL: search_editor {"query": "dynamic-part", "mode": "text"}]
-
-2. read_editor - Read the entire code in the editor
-   Use when: Need complete file overview or search returned no results
-   No parameters needed
-   Example: [TOOL: read_editor]
-
-3. read_editor_lines - Read specific lines from the editor
-   Use AFTER search_editor: To read detailed context around found elements
-   Parameters:
-   - startLine (number, required): Starting line number (1-indexed)
-   - endLine (number, optional): Ending line number (inclusive)
-   Example: [TOOL: read_editor_lines {"startLine": 5, "endLine": 10}]
-
-4. edit_editor - Replace specific text in the editor
-   Use when: Making targeted changes to existing code
-   Parameters:
-   - oldText (string, required): Exact text to find and replace
-   - newText (string, required): Replacement text
-   Example: [TOOL: edit_editor {"oldText": "color=\"#ff4500\"", "newText": "color=\"#00ff00\""}]
-
-5. write_editor - Replace entire editor content
-   Use when: Creating new file or complete rewrite
-   Parameters:
-   - content (string, required): Complete new content
-   Example: [TOOL: write_editor {"content": "<world>...</world>"}]
-
-6. observe_console - Read recent console messages
-   Use when: Checking for errors or game state after changes
-   No parameters needed
-   Example: [TOOL: observe_console]
-
-EDITOR EXPLORATION WORKFLOW:
-1. For understanding code structure:
-   - Use search_editor to locate specific elements (classes, functions, components)
-   - Use read_editor_lines with found line numbers for detailed context
-
-2. For making targeted changes:
-   - First search_editor to find exact location
-   - Then read_editor_lines to understand surrounding context (if needed)
-   - Finally edit_editor with precise text replacement
-
-3. For broad understanding:
-   - Use read_editor to see complete file structure
-   - Then search_editor to navigate to specific sections
-
-EXAMPLE WORKFLOW - "Change the ball color to blue":
-1. [TOOL: search_editor {"query": "ball", "mode": "text"}]
-2. [TOOL: search_editor {"query": "dynamic-part", "mode": "text"}]
-3. [TOOL: read_editor_lines {"startLine": 12, "endLine": 12}]
-4. [TOOL: edit_editor {"oldText": "color=\"#ff4500\"", "newText": "color=\"#0000ff\""}]
-
-IMPORTANT NOTES:
-- When search_editor returns no matches, try alternative search terms or use read_editor
-- Always continue after receiving tool results - don't stop until task is complete
-- After making changes, check observe_console for any errors
-
-Be concise, accurate, and focus on practical solutions.`;
-  }
+2. read_editor - Read entire editor content
+   Example: TOOL: read_editor ARGS: {}
 
-  private formatMessages(
-    messages: BaseMessage[],
-    systemPrompt: string,
-  ): Array<{ role: string; content: string }> {
-    const formatted = [
-      { role: "system", content: systemPrompt },
-      ...messages.map((msg) => {
-        let role = "assistant";
-        if (msg instanceof HumanMessage) {
-          role = "user";
-        } else if (msg instanceof ToolMessage) {
-          const content = `Tool result for ${msg.name}: ${msg.content}`;
-          return { role: "assistant", content };
-        }
+3. read_editor_lines - Read specific lines (use after search_editor)
+   Example: TOOL: read_editor_lines ARGS: {"startLine": 10, "endLine": 20}
 
-        const content =
-          typeof msg.content === "string"
-            ? msg.content
-            : JSON.stringify(msg.content);
-        return { role, content };
-      }),
-    ];
-    return formatted;
+4. edit_editor - Replace specific text
+   Example: TOOL: edit_editor ARGS: {"oldText": "color='red'", "newText": "color='blue'"}
+
+5. write_editor - Replace entire content
+   Example: TOOL: write_editor ARGS: {"content": "<world>...</world>"}
+
+6. observe_console - Check console for errors
+   Example: TOOL: observe_console ARGS: {}
+
+WORKFLOW:
+- To find code: TOOL: search_editor ARGS: {"query": "search_term"}
+- To make changes: TOOL: edit_editor ARGS: {"oldText": "...", "newText": "..."}
+- After changes: TOOL: observe_console ARGS: {}
+
+IMPORTANT: You are an executor. Take action immediately using tools, don't explain what you would do.`;
   }
 
   private async *streamModelResponse(
@@ -421,7 +369,7 @@ Be concise, accurate, and focus on practical solutions.`;
     response: string,
   ): Array<{ name: string; args: Record<string, unknown> }> {
     const toolCalls = [];
-    const toolRegex = /\[TOOL:\s*(\w+)(?:\s+({.*?}))?\]/gs;
+    const toolRegex = /TOOL:\s*(\w+)\s+ARGS:\s*({[^}]*})/gs;
     let match;
 
     while ((match = toolRegex.exec(response)) !== null) {
@@ -448,6 +396,66 @@ Be concise, accurate, and focus on practical solutions.`;
     return toolCalls;
   }
 
+  private shouldUseTools(content: string): boolean {
+    const lowerContent = content.toLowerCase();
+
+    const actionKeywords = [
+      "find",
+      "search",
+      "look for",
+      "where",
+      "change",
+      "modify",
+      "update",
+      "edit",
+      "replace",
+      "show",
+      "display",
+      "read",
+      "what",
+      "check",
+      "create",
+      "write",
+      "add",
+      "implement",
+      "fix",
+      "debug",
+      "error",
+      "console",
+    ];
+
+    return actionKeywords.some((keyword) => lowerContent.includes(keyword));
+  }
+
+  private formatMessages(
+    messages: BaseMessage[],
+    systemPrompt: string,
+  ): Array<{ role: string; content: string }> {
+    const formatted = [
+      { role: "system", content: systemPrompt },
+      ...messages.map((msg) => {
+        let role = "assistant";
+        if (msg instanceof HumanMessage) {
+          role = "user";
+        } else if (msg instanceof ToolMessage) {
+          const content = `Tool result for ${msg.name}: ${
+            typeof msg.content === "string"
+              ? msg.content
+              : JSON.stringify(msg.content)
+          }`;
+          return { role: "assistant", content };
+        }
+
+        const content =
+          typeof msg.content === "string"
+            ? msg.content
+            : JSON.stringify(msg.content);
+        return { role, content };
+      }),
+    ];
+    return formatted;
+  }
+
   private async executeToolsWithSegments(
     toolCalls: Array<{ name: string; args: Record<string, unknown> }>,
     messageId?: string,

src/lib/server/tools.ts

@@ -245,7 +245,7 @@ export const searchEditorTool = new DynamicStructuredTool({
         try {
           const regex = new RegExp(input.query);
           isMatch = regex.test(lines[i]);
-        } catch (e) {
+        } catch {
           return `Error: Invalid regex pattern "${input.query}"`;
         }
       }

src/lib/services/console-forward.ts

@@ -1,65 +0,0 @@
-import { consoleStore, type ConsoleMessage } from "../stores/console";
-import { agentService } from "./agent";
-
-export class ConsoleForwarder {
-  private static instance: ConsoleForwarder | null = null;
-  private unsubscribe: (() => void) | null = null;
-  private lastForwardedId: string | null = null;
-
-  private constructor() {}
-
-  static getInstance(): ConsoleForwarder {
-    if (!ConsoleForwarder.instance) {
-      ConsoleForwarder.instance = new ConsoleForwarder();
-    }
-    return ConsoleForwarder.instance;
-  }
-
-  start(): void {
-    if (this.unsubscribe) return;
-
-    this.unsubscribe = consoleStore.subscribe((state) => {
-      if (state.messages.length === 0) return;
-
-      const messagesToForward = this.lastForwardedId
-        ? state.messages.filter(
-            (msg) =>
-              msg.timestamp >
-              (state.messages.find((m) => m.id === this.lastForwardedId)
-                ?.timestamp || 0),
-          )
-        : state.messages;
-
-      if (messagesToForward.length > 0) {
-        this.forwardMessages(messagesToForward);
-        this.lastForwardedId =
-          messagesToForward[messagesToForward.length - 1].id;
-      }
-    });
-  }
-
-  private forwardMessages(messages: ConsoleMessage[]): void {
-    messages.forEach((message) => {
-      agentService.sendRawMessage({
-        type: "console_sync",
-        payload: {
-          id: message.id,
-          type: message.type,
-          message: message.message,
-          timestamp: message.timestamp,
-        },
-        timestamp: Date.now(),
-      });
-    });
-  }
-
-  stop(): void {
-    if (this.unsubscribe) {
-      this.unsubscribe();
-      this.unsubscribe = null;
-    }
-    this.lastForwardedId = null;
-  }
-}
-
-export const consoleForwarder = ConsoleForwarder.getInstance();

src/lib/services/{console-capture.ts → console-sync.ts}

@@ -1,50 +1,35 @@
 import { consoleStore } from "../stores/console";
+import { agentService } from "./agent";
 
 type ConsoleMethod = "log" | "warn" | "error" | "info";
-type ConsoleMethodFunc = (...args: unknown[]) => void;
-type OriginalConsole = Record<ConsoleMethod, ConsoleMethodFunc>;
 
-export class ConsoleCapture {
-  private static instance: ConsoleCapture | null = null;
-  private originalConsole: OriginalConsole = {} as OriginalConsole;
-  private isCapturing = false;
-
-  private constructor() {}
-
-  static getInstance(): ConsoleCapture {
-    if (!ConsoleCapture.instance) {
-      ConsoleCapture.instance = new ConsoleCapture();
-    }
-    return ConsoleCapture.instance;
-  }
+export class ConsoleSyncService {
+  private isSetup = false;
+  private originalConsole: Record<ConsoleMethod, (...args: unknown[]) => void> =
+    {} as Record<ConsoleMethod, (...args: unknown[]) => void>;
 
   setup(): void {
-    if (this.isCapturing) return;
+    if (this.isSetup) return;
 
     this.originalConsole = {
-      log: console.log,
-      warn: console.warn,
-      error: console.error,
-      info: console.info,
+      log: console.log.bind(console),
+      warn: console.warn.bind(console),
+      error: console.error.bind(console),
+      info: console.info.bind(console),
     };
 
-    const methods: Array<"log" | "warn" | "error" | "info"> = [
-      "log",
-      "warn",
-      "error",
-      "info",
-    ];
-
-    methods.forEach((method) => {
+    const interceptConsole = (method: ConsoleMethod) => {
+      const original = this.originalConsole[method];
       console[method] = (...args: unknown[]) => {
-        this.originalConsole[method]?.apply(console, args);
+        original(...args);
 
         const firstArg = args[0];
         if (typeof firstArg === "string") {
           if (
             firstArg.includes("[vite]") ||
             firstArg.includes("[VibeGame] Console forwarding") ||
-            firstArg.includes("[DEBUG]")
+            firstArg.includes("[DEBUG]") ||
+            firstArg.includes("hot updated:")
           ) {
             return;
           }
@@ -65,26 +50,42 @@ export class ConsoleCapture {
           })
           .join(" ");
 
-        consoleStore.addMessage(method, message);
+        const messageId = `${Date.now()}-${Math.random()}`;
+        consoleStore.addMessage(method === "log" ? "info" : method, message);
+
+        agentService.sendRawMessage({
+          type: "console_sync",
+          payload: {
+            id: messageId,
+            type: method === "log" ? "info" : method,
+            message: message,
+            timestamp: Date.now(),
+          },
+          timestamp: Date.now(),
+        });
       };
-    });
+    };
 
-    this.isCapturing = true;
+    (["log", "warn", "error", "info"] as ConsoleMethod[]).forEach(
+      interceptConsole,
+    );
+    this.isSetup = true;
   }
 
   teardown(): void {
-    if (!this.isCapturing) return;
-
-    if (this.originalConsole.log) {
-      console.log = this.originalConsole.log;
-      console.warn = this.originalConsole.warn;
-      console.error = this.originalConsole.error;
-      console.info = this.originalConsole.info;
-    }
-
-    this.originalConsole = {} as OriginalConsole;
-    this.isCapturing = false;
+    if (!this.isSetup) return;
+
+    console.log = this.originalConsole.log;
+    console.warn = this.originalConsole.warn;
+    console.error = this.originalConsole.error;
+    console.info = this.originalConsole.info;
+
+    this.originalConsole = {} as Record<
+      ConsoleMethod,
+      (...args: unknown[]) => void
+    >;
+    this.isSetup = false;
   }
 }
 
-export const consoleCapture = ConsoleCapture.getInstance();
+export const consoleSyncService = new ConsoleSyncService();

src/lib/services/context.md

@@ -18,8 +18,7 @@ services/
 ├── websocket.ts        # WebSocket connection management
 ├── message-handler.ts  # WebSocket message processing
 ├── game-engine.ts      # Game lifecycle management
-├── console-capture.ts  # Console interception
-├── console-forward.ts  # WebSocket console forwarding
+├── console-sync.ts     # VibeGame console synchronization
 └── html-parser.ts      # Game HTML parsing
 ```
 
@@ -38,12 +37,12 @@ services/
 - `agentService.disconnect()` - Disconnect from server
 - `agentService.sendMessage()` - Send chat message
 - `agentService.sendRawMessage()` - Send raw WebSocket message
-- `gameEngine.start()` - Start game with world content
-- `gameEngine.stop()` - Clean up game instance
-- `consoleCapture.setup()` - Begin console interception
-- `consoleForwarder.start()` - Start forwarding console messages
-- `consoleForwarder.stop()` - Stop console forwarding
-- `HTMLParser.extractGameContent()` - Parse world from HTML
+- `gameEngine.start(worldContent, scripts)` - Start game with parsed world and scripts
+- `gameEngine.stop()` - Destroy game instance and clean up
+- `gameEngine.isRunning()` - Check if game is active
+- `consoleSyncService.setup()` - Intercept console methods
+- `consoleSyncService.teardown()` - Restore original console
+- `HTMLParser.extractGameContent(html)` - Parse world and scripts from HTML
 
 ## Dependencies
 

src/lib/services/game-engine.ts

@@ -1,4 +1,5 @@
 import * as GAME from "vibegame";
+import type { System, Plugin, Component, BuilderOptions } from "vibegame";
 import { gameStore } from "../stores/game";
 import { consoleStore } from "../stores/console";
 import { uiStore } from "../stores/ui";
@@ -18,11 +19,15 @@ export class GameEngine {
     return GameEngine.instance;
   }
 
-  async start(worldContent: string): Promise<void> {
+  async start(worldContent: string, scripts: string[] = []): Promise<void> {
+    if (this.gameInstance) {
+      consoleStore.addMessage("info", "Stopping previous game instance...");
+      this.stop();
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    }
+
     gameStore.setStarting(true);
     consoleStore.addMessage("info", "🎮 Starting game...");
-
-    this.stop();
     uiStore.setError(null);
 
     try {
@@ -33,6 +38,69 @@ export class GameEngine {
 
       container.innerHTML = worldContent;
 
+      GAME.resetBuilder();
+
+      const gameProxy = {
+        withSystem: (system: System) => {
+          GAME.withSystem(system);
+          return gameProxy;
+        },
+        withPlugin: (plugin: Plugin) => {
+          GAME.withPlugin(plugin);
+          return gameProxy;
+        },
+        withComponent: (name: string, component: Component) => {
+          GAME.withComponent(name, component);
+          return gameProxy;
+        },
+        configure: (options: BuilderOptions) => {
+          GAME.configure(options);
+          return gameProxy;
+        },
+        withoutDefaultPlugins: () => {
+          GAME.withoutDefaultPlugins();
+          return gameProxy;
+        },
+        run: () => {
+          console.warn(
+            "GAME.run() is not available in user scripts - the framework handles game lifecycle",
+          );
+          return Promise.resolve({
+            stop: () => {},
+            destroy: () => {},
+            step: () => {},
+            getState: () => null,
+          });
+        },
+        defineComponent: GAME.defineComponent,
+        defineQuery: GAME.defineQuery,
+        Types: GAME.Types,
+      };
+
+      (window as unknown as { GAME: typeof gameProxy }).GAME = gameProxy;
+
+      let scriptExecutionFailed = false;
+      for (const script of scripts) {
+        try {
+          const cleanedScript = script.replace(/GAME\.run\(\)/g, "");
+          eval(cleanedScript);
+        } catch (scriptError) {
+          scriptExecutionFailed = true;
+          const errorMsg =
+            scriptError instanceof Error
+              ? scriptError.message
+              : String(scriptError);
+          console.error("Error executing user script:", errorMsg);
+          consoleStore.addMessage("error", `Script error: ${errorMsg}`);
+        }
+      }
+
+      (window as unknown as { GAME: typeof gameProxy | null }).GAME = null;
+
+      if (scriptExecutionFailed) {
+        throw new Error("Script execution failed - game not started");
+      }
+
       this.gameInstance = await GAME.run();
       gameStore.setInstance(this.gameInstance);
       consoleStore.addMessage("info", "✅ Game started!");
@@ -41,6 +109,7 @@ export class GameEngine {
       uiStore.setError(errorMsg);
       consoleStore.addMessage("error", `❌ Error: ${errorMsg}`);
       gameStore.setInstance(null);
+      this.gameInstance = null;
     } finally {
       gameStore.setStarting(false);
     }
@@ -49,13 +118,11 @@ export class GameEngine {
   stop(): void {
     if (this.gameInstance) {
       try {
-        if (typeof this.gameInstance.destroy === "function") {
-          this.gameInstance.destroy();
-        } else if (typeof this.gameInstance.stop === "function") {
-          this.gameInstance.stop();
-        }
+        this.gameInstance.destroy();
+        consoleStore.addMessage("info", "Game instance destroyed");
       } catch (error) {
-        console.error("Error stopping game:", error);
+        console.error("Error destroying game:", error);
+        consoleStore.addMessage("error", `Error destroying game: ${error}`);
       }
       this.gameInstance = null;
       gameStore.setInstance(null);
@@ -67,6 +134,8 @@ export class GameEngine {
         container.removeChild(container.firstChild);
       }
     }
+
+    GAME.resetBuilder();
   }
 
   isRunning(): boolean {

src/lib/services/html-parser.ts

@@ -1,7 +1,27 @@
+export interface GameContent {
+  world: string;
+  scripts: string[];
+}
+
 export class HTMLParser {
-  static extractGameContent(html: string): string {
+  static extractGameContent(html: string): GameContent {
     const worldMatch = html.match(/<world[^>]*>[\s\S]*?<\/world>/);
-    return worldMatch ? worldMatch[0] : '<world canvas="#game-canvas"></world>';
+    const world = worldMatch
+      ? worldMatch[0]
+      : '<world canvas="#game-canvas"></world>';
+
+    const scripts: string[] = [];
+    const scriptRegex = /<script[^>]*>([\s\S]*?)<\/script>/gi;
+    let match;
+
+    while ((match = scriptRegex.exec(html)) !== null) {
+      const scriptContent = match[1].trim();
+      if (scriptContent) {
+        scripts.push(scriptContent);
+      }
+    }
+
+    return { world, scripts };
   }
 
   static validateGameHTML(html: string): { valid: boolean; error?: string } {

src/lib/stores/editor.ts

@@ -6,8 +6,7 @@ export interface EditorState {
   theme: string;
 }
 
-const DEFAULT_CONTENT =
-  `<canvas id="game-canvas"></canvas>
+const DEFAULT_CONTENT = `<canvas id="game-canvas"></canvas>
 
 <world canvas="#game-canvas" sky="#87ceeb">
   <player pos="0 0 0"></player>
@@ -17,13 +16,41 @@ const DEFAULT_CONTENT =
 
   <!-- Ball -->
   <dynamic-part pos="-2 4 -3" shape="sphere" size="1" color="#ff4500"></dynamic-part>
+
+  <!-- Custom component -->
+  <entity my-component="value: 0"></entity>
 </world>
 
-<script type="module">
-  import * as GAME from 'vibegame';
-  
-  GAME.run();
-<` + `/script>`;
+<script>
+  // GAME is automatically provided by the framework
+  console.log("Game script loaded!");
+
+  const MyComponent = GAME.defineComponent({
+    value: GAME.Types.i32,
+  });
+
+  const myQuery = GAME.defineQuery([MyComponent]);
+
+  const MySystem = {
+    update: (state) => {
+      const entities = myQuery(state.world);
+      for (const entity of entities) {
+        MyComponent.value[entity]++;
+        if (MyComponent.value[entity] === 100) {
+          console.log("Entity value is 100");
+        }
+      }
+    }
+  };
+
+  const MyPlugin = {
+    components: { MyComponent },
+    systems: [MySystem],
+  };
+
+  GAME.withPlugin(MyPlugin);
+  // .run() is handled by the framework
+</script>`;
 
 function createEditorStore() {
   const { subscribe, set, update } = writable<EditorState>({

src/main.ts

@@ -1,8 +1,11 @@
 import "./app.css";
 import App from "./App.svelte";
+import { consoleSyncService } from "./lib/services/console-sync";
 
 const app = new App({
   target: document.getElementById("app")!,
 });
 
+consoleSyncService.setup();
+
 export default app;