better tools

.claude/commands/peel.md

@@ -6,7 +6,6 @@ Load relevant context for the current conversation.
 
 @CLAUDE.md
 @layers/structure.md
-@llms.txt
 
 User arguments: "$ARGUMENTS"
 

bun.lock

@@ -14,7 +14,7 @@
         "marked": "^16.2.1",
         "monaco-editor": "^0.50.0",
         "svelte-splitpanes": "^8.0.5",
-        "vibegame": "^0.1.1",
+        "vibegame": "^0.1.3",
         "zod": "^4.1.8",
       },
       "devDependencies": {
@@ -108,7 +108,7 @@
 
     "@eslint/plugin-kit": ["@eslint/plugin-kit@0.3.5", "", { "dependencies": { "@eslint/core": "^0.15.2", "levn": "^0.4.1" } }, "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w=="],
 
-    "@huggingface/hub": ["@huggingface/hub@2.6.3", "", { "dependencies": { "@huggingface/tasks": "^0.19.45" }, "optionalDependencies": { "cli-progress": "^3.12.0" }, "bin": { "hfjs": "dist/cli.js" } }, "sha512-IEZ67adV+gWqg98A//mU0Ed+Q6xGPQxMfK+aV36b0Ww7R4EXG1O0zyiCcbLE/cvryfCD8+PNEwQgiPU+v63tsQ=="],
+    "@huggingface/hub": ["@huggingface/hub@2.6.4", "", { "dependencies": { "@huggingface/tasks": "^0.19.45" }, "optionalDependencies": { "cli-progress": "^3.12.0" }, "bin": { "hfjs": "dist/cli.js" } }, "sha512-eqJjP0DAIShc8O90neoK1SFAlgikK6jpreTcOue4hXkKRa+BkC4WCLGintI8HIDk2Y+pHgQwUvsdb4Ruo4inSg=="],
 
     "@huggingface/inference": ["@huggingface/inference@4.8.0", "", { "dependencies": { "@huggingface/jinja": "^0.5.1", "@huggingface/tasks": "^0.19.45" } }, "sha512-Eq98EAXqYn4rKMfrbEXuhc3IjKfaeIO6eXNOZk9xk6v5akrIWRtd6d1h0fjAWyX4zRbdUpXRh6MvsqXnzGvXCA=="],
 
@@ -196,7 +196,7 @@
 
     "@sveltejs/vite-plugin-svelte-inspector": ["@sveltejs/vite-plugin-svelte-inspector@2.1.0", "", { "dependencies": { "debug": "^4.3.4" }, "peerDependencies": { "@sveltejs/vite-plugin-svelte": "^3.0.0", "svelte": "^4.0.0 || ^5.0.0-next.0", "vite": "^5.0.0" } }, "sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg=="],
 
-    "@types/bun": ["@types/bun@1.2.21", "", { "dependencies": { "bun-types": "1.2.21" } }, "sha512-NiDnvEqmbfQ6dmZ3EeUO577s4P5bf4HCTXtI6trMc6f6RzirY5IrF3aIookuSpyslFzrnvv2lmEWv5HyC1X79A=="],
+    "@types/bun": ["@types/bun@1.2.22", "", { "dependencies": { "bun-types": "1.2.22" } }, "sha512-5A/KrKos2ZcN0c6ljRSOa1fYIyCKhZfIVYeuyb4snnvomnpFqC0tTsEkdqNxbAgExV384OETQ//WAjl3XbYqQA=="],
 
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
 
@@ -206,7 +206,7 @@
 
     "@types/marked": ["@types/marked@6.0.0", "", { "dependencies": { "marked": "*" } }, "sha512-jmjpa4BwUsmhxcfsgUit/7A9KbrC48Q0q8KvnY107ogcjGgTFDlIL3RpihNpx2Mu1hM4mdFQjoVc4O6JoGKHsA=="],
 
-    "@types/node": ["@types/node@24.3.3", "", { "dependencies": { "undici-types": "~7.10.0" } }, "sha512-GKBNHjoNw3Kra1Qg5UXttsY5kiWMEfoHq2TmXb+b1rcm6N7B3wTrFYIf/oSZ1xNQ+hVVijgLkiDZh7jRRsh+Gw=="],
+    "@types/node": ["@types/node@24.4.0", "", { "dependencies": { "undici-types": "~7.11.0" } }, "sha512-gUuVEAK4/u6F9wRLznPUU4WGUacSEBDPoC2TrBkw3GAnOLHBL45QdfHOXp1kJ4ypBGLxTOB+t7NJLpKoC3gznQ=="],
 
     "@types/pug": ["@types/pug@2.0.10", "", {}, "sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA=="],
 
@@ -286,7 +286,7 @@
 
     "buffer-crc32": ["buffer-crc32@1.0.0", "", {}, "sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w=="],
 
-    "bun-types": ["bun-types@1.2.21", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-sa2Tj77Ijc/NTLS0/Odjq/qngmEPZfbfnOERi0KRUYhT9R8M4VBioWVmMWE5GrYbKMc+5lVybXygLdibHaqVqw=="],
+    "bun-types": ["bun-types@1.2.22", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-hwaAu8tct/Zn6Zft4U9BsZcXkYomzpHJX28ofvx7k0Zz2HNz54n1n+tDgxoWFGB4PcFvJXJQloPhaV2eP3Q6EA=="],
 
     "call-bind": ["call-bind@1.0.8", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.0", "es-define-property": "^1.0.0", "get-intrinsic": "^1.2.4", "set-function-length": "^1.2.2" } }, "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww=="],
 
@@ -326,7 +326,7 @@
 
     "data-view-byte-offset": ["data-view-byte-offset@1.0.1", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "is-data-view": "^1.0.1" } }, "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ=="],
 
-    "debug": ["debug@4.4.1", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ=="],
+    "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
     "decamelize": ["decamelize@1.2.0", "", {}, "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="],
 
@@ -570,7 +570,7 @@
 
     "magic-string": ["magic-string@0.30.19", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw=="],
 
-    "marked": ["marked@16.2.1", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-r3UrXED9lMlHF97jJByry90cwrZBBvZmjG1L68oYfuPMW+uDTnuMbyJDymCWwbTE+f+3LhpNDKfpR3a3saFyjA=="],
+    "marked": ["marked@16.3.0", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-K3UxuKu6l6bmA5FUwYho8CfJBlsUWAooKtdGgMcERSpF7gcBUrCGsLH7wDaaNOzwq18JzSUDyoEb/YsrqMac3w=="],
 
     "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
 
@@ -774,13 +774,13 @@
 
     "unbox-primitive": ["unbox-primitive@1.1.0", "", { "dependencies": { "call-bound": "^1.0.3", "has-bigints": "^1.0.2", "has-symbols": "^1.1.0", "which-boxed-primitive": "^1.1.1" } }, "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw=="],
 
-    "undici-types": ["undici-types@7.10.0", "", {}, "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag=="],
+    "undici-types": ["undici-types@7.11.0", "", {}, "sha512-kt1ZriHTi7MU+Z/r9DOdAI3ONdaR3M3csEaRc6ewa4f4dTvX4cQCbJ4NkEn0ohE4hHtq85+PhPSTY+pO/1PwgA=="],
 
     "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
 
     "uuid": ["uuid@10.0.0", "", { "bin": { "uuid": "dist/bin/uuid" } }, "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ=="],
 
-    "vibegame": ["vibegame@0.1.1", "", { "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-HjWMlO4qUus9ChEBsD+abS9UGle/qiDZWukIqkve811N2oliKjWE7WYCDhqaDhWS18FaaYaY1a/Vc8yF0HaS1Q=="],
+    "vibegame": ["vibegame@0.1.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=="],
 
     "vite": ["vite@5.4.20", "", { "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

@@ -487,7 +487,7 @@ Available in all systems via the `state` parameter:
 ### Time
 - `time.delta: number` - Frame time in seconds
 - `time.elapsed: number` - Total time in seconds
-- `time.fixed: number` - Fixed timestep (1/60)
+- `time.fixed: number` - Fixed timestep (1/50)
 
 ### Physics Helpers
 - `addComponent(entity, ApplyImpulse, {x, y, z})` - One-time push

package.json

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

src/lib/components/chat/ChatPanel.svelte

@@ -3,11 +3,10 @@
     import { fade } from "svelte/transition";
     import { agentStore, isConnected, isProcessing } from "../../stores/agent";
     import { authStore } from "../../services/auth";
+    import { agentService } from "../../services/agent";
     import gsap from "gsap";
     import ReasoningBlock from "./ReasoningBlock.svelte";
     import MarkdownRenderer from "./MarkdownRenderer.svelte";
-    import ToolCallDisplay from "./ToolCallDisplay.svelte";
-    import ToolCallBlock from "./ToolCallBlock.svelte";
     import InProgressBlock from "./InProgressBlock.svelte";
     import MessageSegment from "./MessageSegment.svelte";
 
@@ -19,43 +18,9 @@
 
     let hasConnected = false;
 
-    const TOOL_PATTERN = /\[TOOL:\s*(\w+)(?:\s+({[^}]+}))?\]/g;
-
-    function parseMessageContent(content: string) {
-        const parts: Array<{ type: 'text' | 'tool', content: string, toolName?: string, params?: any }> = [];
-        let lastIndex = 0;
-
-        const matches = Array.from(content.matchAll(TOOL_PATTERN));
-        
-        for (const match of matches) {
-            const [fullMatch, toolName, paramsStr] = match;
-            const index = match.index!;
-            
-            if (index > lastIndex) {
-                parts.push({ type: 'text', content: content.slice(lastIndex, index) });
-            }
-            
-            let params = null;
-            if (paramsStr) {
-                try {
-                    params = JSON.parse(paramsStr);
-                } catch {}
-            }
-            
-            parts.push({ type: 'tool', content: fullMatch, toolName, params });
-            lastIndex = index + fullMatch.length;
-        }
-        
-        if (lastIndex < content.length) {
-            parts.push({ type: 'text', content: content.slice(lastIndex) });
-        }
-        
-        return parts.length > 0 ? parts : [{ type: 'text' as const, content }];
-    }
-
     onMount(() => {
         if ($authStore.isAuthenticated && !$authStore.loading) {
-            agentStore.connect();
+            agentService.connect();
             hasConnected = true;
         }
         
@@ -71,11 +36,11 @@
     });
 
     onDestroy(() => {
-        agentStore.disconnect();
+        agentService.disconnect();
     });
 
     $: if ($authStore.isAuthenticated && !$authStore.loading && !hasConnected) {
-        agentStore.connect();
+        agentService.connect();
         hasConnected = true;
     }
     
@@ -164,7 +129,7 @@
                 });
             }
 
-            agentStore.sendMessage(inputValue.trim());
+            agentService.sendMessage(inputValue.trim());
             inputValue = "";
         }
     }
@@ -263,37 +228,26 @@
             {/if}
 
             {#each $agentStore.messages as message (message.id)}
-                {#if message.role === "tool" && message.toolExecutions}
-                    <ToolCallBlock toolExecutions={message.toolExecutions} />
-                {:else}
-                    <div class="message {message.role}">
-                        {#if message.reasoning && message.role === "assistant"}
-                            <ReasoningBlock reasoning={message.reasoning} />
-                        {/if}
-                        {#if message.segments && message.segments.length > 0}
-                            <div class="message-segments">
-                                {#each message.segments as segment (segment.id)}
-                                    <MessageSegment {segment} />
-                                {/each}
-                            </div>
-                        {:else}
-                            <div class="message-content">
-                                {#if message.role === "assistant"}
-                                    {@const parts = parseMessageContent(message.content.trim())}
-                                    {#each parts as part}
-                                        {#if part.type === 'text' && part.content.trim()}
-                                            <MarkdownRenderer content={part.content} streaming={false} />
-                                        {:else if part.type === 'tool' && part.toolName}
-                                            <ToolCallDisplay toolName={part.toolName} parameters={part.params} />
-                                        {/if}
-                                    {/each}
-                                {:else}
-                                    {message.content.trim()}
-                                {/if}
-                            </div>
-                        {/if}
-                    </div>
-                {/if}
+                <div class="message {message.role}">
+                    {#if message.reasoning && message.role === "assistant"}
+                        <ReasoningBlock reasoning={message.reasoning} />
+                    {/if}
+                    {#if message.segments && message.segments.length > 0}
+                        <div class="message-segments">
+                            {#each message.segments as segment (segment.id)}
+                                <MessageSegment {segment} />
+                            {/each}
+                        </div>
+                    {:else if message.content && message.content.trim()}
+                        <div class="message-content">
+                            {#if message.role === "assistant"}
+                                <MarkdownRenderer content={message.content.trim()} streaming={false} />
+                            {:else}
+                                {message.content.trim()}
+                            {/if}
+                        </div>
+                    {/if}
+                </div>
             {/each}
 
             {#if $agentStore.streamingStatus !== "idle" && (!$agentStore.streamingContent || $agentStore.streamingStatus === "thinking")}

src/lib/components/chat/InProgressBlock.svelte

@@ -53,7 +53,7 @@
                     contentElement,
                     { opacity: 0, maxHeight: 0, y: -10 },
                     { opacity: 1, maxHeight: 500, y: 0, duration: 0.3, ease: "power2.out" },
-                    "-=0.1"
+                    "-=0.1",
                 );
         } else {
             timeline
@@ -62,16 +62,20 @@
                     duration: 0.2,
                     ease: "power2.in",
                 })
-                .to(contentElement, {
-                    opacity: 0,
-                    maxHeight: 0,
-                    y: -5,
-                    duration: 0.2,
-                    ease: "power2.in",
-                    onComplete: () => {
-                        gsap.set(contentElement, { display: "none" });
+                .to(
+                    contentElement,
+                    {
+                        opacity: 0,
+                        maxHeight: 0,
+                        y: -5,
+                        duration: 0.2,
+                        ease: "power2.in",
+                        onComplete: () => {
+                            gsap.set(contentElement, { display: "none" });
+                        },
                     },
-                }, "-=0.1");
+                    "-=0.1",
+                );
         }
     }
 
@@ -83,9 +87,9 @@
         tl.to(blockElement, {
             duration: 0.4,
             ease: "power2.inOut",
-            onUpdate: function() {
+            onUpdate: function () {
                 updateBlockStyle(to);
-            }
+            },
         });
 
         tl.to(statusElement, {
@@ -93,13 +97,12 @@
             opacity: 0,
             duration: 0.15,
             ease: "power2.in",
-            onComplete: () => {}
-        })
-        .to(statusElement, {
+            onComplete: () => {},
+        }).to(statusElement, {
             scale: 1,
             opacity: 1,
             duration: 0.15,
-            ease: "power2.out"
+            ease: "power2.out",
         });
 
         if (progressBar) {
@@ -107,13 +110,13 @@
                 gsap.to(progressBar, {
                     width: "60%",
                     duration: 1,
-                    ease: "power2.out"
+                    ease: "power2.out",
                 });
             } else if (to === "completing") {
                 gsap.to(progressBar, {
-                    width: "90%",
+                    width: "100%",
                     duration: 0.5,
-                    ease: "power2.out"
+                    ease: "power2.out",
                 });
             }
         }
@@ -168,9 +171,10 @@
         }
 
         if (progressBar) {
-            gsap.fromTo(progressBar,
+            gsap.fromTo(
+                progressBar,
                 { width: "0%" },
-                { width: "30%", duration: 0.5, ease: "power2.out" }
+                { width: "30%", duration: 0.5, ease: "power2.out" },
             );
         }
 
@@ -184,6 +188,20 @@
     onDestroy(() => {
         if (collapseTimeout) clearTimeout(collapseTimeout);
         if (timeline) timeline.kill();
+
+        if (progressBar && blockElement) {
+            gsap.to(progressBar, {
+                width: "100%",
+                duration: 0.2,
+                ease: "power2.out",
+            });
+            gsap.to(blockElement, {
+                opacity: 0,
+                scale: 0.95,
+                duration: 0.3,
+                ease: "power2.in",
+            });
+        }
     });
 </script>
 
@@ -267,10 +285,12 @@
 
     .progress-bar {
         height: 100%;
-        background: linear-gradient(90deg,
+        background: linear-gradient(
+            90deg,
             rgba(255, 210, 30, 0.6) 0%,
             rgba(65, 105, 225, 0.6) 50%,
-            rgba(0, 255, 0, 0.6) 100%);
+            rgba(0, 255, 0, 0.6) 100%
+        );
         box-shadow: 0 0 10px rgba(65, 105, 225, 0.4);
         transition: width 0.3s ease;
     }

src/lib/components/chat/ToolCallBlock.svelte

@@ -1,373 +0,0 @@
-<script lang="ts">
-    import { onMount } from "svelte";
-    import gsap from "gsap";
-    import type { ToolExecution } from "../../stores/agent";
-
-    export let toolExecutions: ToolExecution[] = [];
-
-    let blockElement: HTMLDivElement;
-    let expandedTools: Set<string> = new Set();
-
-    const toolIcons: Record<string, string> = {
-        read_editor: "📄",
-        write_editor: "✏️",
-        observe_console: "📟",
-        default: "🔧",
-    };
-
-    const statusIcons: Record<string, string> = {
-        pending: "⏳",
-        running: "⚡",
-        completed: "✅",
-        error: "❌",
-    };
-
-    const statusMessages: Record<string, (name: string) => string> = {
-        read_editor: (name) => ({
-            pending: "Preparing to read code...",
-            running: "Reading editor content...",
-            completed: "Code read successfully",
-            error: "Failed to read code"
-        }[name] || name),
-        write_editor: (name) => ({
-            pending: "Preparing to write code...",
-            running: "Writing code and reloading game...",
-            completed: "Code updated successfully",
-            error: "Failed to write code"
-        }[name] || name),
-        observe_console: (name) => ({
-            pending: "Preparing to read console...",
-            running: "Reading console output...",
-            completed: "Console read successfully",
-            error: "Failed to read console"
-        }[name] || name),
-    };
-
-    function toggleTool(toolId: string) {
-        if (expandedTools.has(toolId)) {
-            expandedTools.delete(toolId);
-        } else {
-            expandedTools.add(toolId);
-        }
-        expandedTools = expandedTools;
-    }
-
-    function getStatusMessage(tool: ToolExecution): string {
-        const messageFunc = statusMessages[tool.name] || statusMessages.default;
-        return messageFunc ? messageFunc(tool.status) : `${tool.name}: ${tool.status}`;
-    }
-
-    function formatDuration(startTime: number, endTime?: number): string {
-        const duration = (endTime || Date.now()) - startTime;
-        if (duration < 1000) {
-            return `${duration}ms`;
-        }
-        return `${(duration / 1000).toFixed(1)}s`;
-    }
-
-    onMount(() => {
-        gsap.fromTo(
-            blockElement,
-            { opacity: 0, y: -10 },
-            { opacity: 1, y: 0, duration: 0.3, ease: "power2.out" }
-        );
-    });
-</script>
-
-<div class="tool-block" bind:this={blockElement}>
-    {#each toolExecutions as tool (tool.id)}
-            <div class="tool-item {tool.status}" class:expanded={expandedTools.has(tool.id)}>
-                <button
-                    class="tool-item-header"
-                    on:click={() => toggleTool(tool.id)}
-                    aria-expanded={expandedTools.has(tool.id)}
-                >
-                    <span class="tool-status-icon">
-                        {#if tool.status === "running"}
-                            <span class="spinner-small">{statusIcons[tool.status]}</span>
-                        {:else}
-                            {statusIcons[tool.status]}
-                        {/if}
-                    </span>
-                    <span class="tool-icon">{toolIcons[tool.name] || toolIcons.default}</span>
-                    <span class="tool-name">{getStatusMessage(tool)}</span>
-                    <span class="tool-duration">
-                        {formatDuration(tool.startTime, tool.endTime)}
-                    </span>
-                    <span class="expand-icon" class:rotated={expandedTools.has(tool.id)}>
-                        ▶
-                    </span>
-                </button>
-
-                {#if expandedTools.has(tool.id)}
-                    <div class="tool-details">
-                        {#if tool.args && Object.keys(tool.args).length > 0}
-                            <div class="tool-section">
-                                <div class="section-title">Parameters:</div>
-                                <div class="params">
-                                    {#each Object.entries(tool.args) as [key, value]}
-                                        <div class="param">
-                                            <span class="param-key">{key}:</span>
-                                            <span class="param-value">
-                                                {#if typeof value === 'string' && value.length > 100}
-                                                    <pre>{value}</pre>
-                                                {:else}
-                                                    {JSON.stringify(value)}
-                                                {/if}
-                                            </span>
-                                        </div>
-                                    {/each}
-                                </div>
-                            </div>
-                        {/if}
-
-                        {#if tool.output}
-                            <div class="tool-section">
-                                <div class="section-title">Output:</div>
-                                <pre class="tool-output">{tool.output}</pre>
-                            </div>
-                        {/if}
-
-                        {#if tool.consoleOutput && tool.consoleOutput.length > 0}
-                            <div class="tool-section">
-                                <div class="section-title">Console Output:</div>
-                                <div class="console-output">
-                                    {#each tool.consoleOutput as line}
-                                        <div class="console-line">{line}</div>
-                                    {/each}
-                                </div>
-                            </div>
-                        {/if}
-
-                        {#if tool.error}
-                            <div class="tool-section error">
-                                <div class="section-title">Error:</div>
-                                <div class="error-message">{tool.error}</div>
-                            </div>
-                        {/if}
-
-                        {#if tool.status === "running" && !tool.output}
-                            <div class="tool-section">
-                                <div class="loading-indicator">
-                                    <span class="loading-dots">Processing</span>
-                                </div>
-                            </div>
-                        {/if}
-                    </div>
-                {/if}
-            </div>
-    {/each}
-</div>
-
-<style>
-    .tool-block {
-        margin: 0.25rem 0;
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
-    }
-
-    .tool-item {
-        border-radius: 4px;
-        overflow: hidden;
-        transition: all 0.2s ease;
-        border: 1px solid rgba(65, 105, 225, 0.2);
-        background: rgba(65, 105, 225, 0.05);
-    }
-
-    .tool-item.running {
-        background: rgba(255, 210, 30, 0.08);
-        border: 1px solid rgba(255, 210, 30, 0.3);
-    }
-
-    .tool-item.completed {
-        background: rgba(0, 255, 0, 0.05);
-        border: 1px solid rgba(0, 255, 0, 0.2);
-    }
-
-    .tool-item.error {
-        background: rgba(255, 0, 0, 0.08);
-        border: 1px solid rgba(255, 0, 0, 0.3);
-    }
-
-    .tool-item-header {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        width: 100%;
-        padding: 0.4rem 0.6rem;
-        background: transparent;
-        border: none;
-        color: inherit;
-        font: inherit;
-        text-align: left;
-        cursor: pointer;
-        transition: background 0.2s ease;
-    }
-
-    .tool-item-header:hover {
-        background: rgba(255, 255, 255, 0.02);
-    }
-
-    .tool-status-icon {
-        font-size: 0.9rem;
-        width: 1.2rem;
-        text-align: center;
-    }
-
-    .tool-icon {
-        font-size: 1rem;
-    }
-
-    .tool-name {
-        flex: 1;
-        color: rgba(255, 255, 255, 0.9);
-        font-size: 0.825rem;
-    }
-
-    .tool-duration {
-        color: rgba(255, 255, 255, 0.4);
-        font-size: 0.75rem;
-        font-family: "Monaco", "Menlo", monospace;
-    }
-
-    .expand-icon {
-        font-size: 0.7rem;
-        color: rgba(255, 255, 255, 0.4);
-        transition: transform 0.2s ease;
-    }
-
-    .expand-icon.rotated {
-        transform: rotate(90deg);
-    }
-
-    .tool-details {
-        padding: 0.75rem;
-        background: rgba(0, 0, 0, 0.2);
-        border-top: 1px solid rgba(255, 255, 255, 0.05);
-    }
-
-    .tool-section {
-        margin-bottom: 0.75rem;
-    }
-
-    .tool-section:last-child {
-        margin-bottom: 0;
-    }
-
-    .section-title {
-        color: rgba(255, 255, 255, 0.5);
-        font-size: 0.75rem;
-        font-weight: 600;
-        margin-bottom: 0.25rem;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-    }
-
-    .params {
-        font-family: "Monaco", "Menlo", monospace;
-        font-size: 0.8rem;
-    }
-
-    .param {
-        display: flex;
-        gap: 0.5rem;
-        margin: 0.25rem 0;
-    }
-
-    .param-key {
-        color: rgba(255, 255, 255, 0.5);
-    }
-
-    .param-value {
-        color: rgba(255, 210, 30, 0.8);
-        word-break: break-all;
-    }
-
-    .param-value pre {
-        margin: 0;
-        padding: 0.5rem;
-        background: rgba(0, 0, 0, 0.3);
-        border-radius: 4px;
-        font-size: 0.75rem;
-        overflow-x: auto;
-        max-height: 200px;
-    }
-
-    .tool-output, .console-output {
-        background: rgba(0, 0, 0, 0.3);
-        border-radius: 4px;
-        padding: 0.5rem;
-        font-family: "Monaco", "Menlo", monospace;
-        font-size: 0.75rem;
-        color: rgba(255, 255, 255, 0.8);
-        overflow-x: auto;
-        max-height: 300px;
-        overflow-y: auto;
-    }
-
-    .console-line {
-        margin: 0.1rem 0;
-    }
-
-    .error-message {
-        color: #ff6b6b;
-        font-family: "Monaco", "Menlo", monospace;
-        font-size: 0.8rem;
-        padding: 0.5rem;
-        background: rgba(255, 0, 0, 0.1);
-        border-radius: 4px;
-    }
-
-    .loading-indicator {
-        text-align: center;
-        padding: 1rem;
-        color: rgba(255, 255, 255, 0.5);
-        font-size: 0.85rem;
-    }
-
-    .loading-dots::after {
-        content: "";
-        animation: dots 1.5s steps(4, end) infinite;
-    }
-
-    @keyframes dots {
-        0%, 20% { content: ""; }
-        40% { content: "."; }
-        60% { content: ".."; }
-        80%, 100% { content: "..."; }
-    }
-
-    .spinner {
-        display: inline-block;
-        animation: spin 1s linear infinite;
-    }
-
-    .spinner-small {
-        display: inline-block;
-        animation: spin 0.8s linear infinite;
-    }
-
-    @keyframes spin {
-        from { transform: rotate(0deg); }
-        to { transform: rotate(360deg); }
-    }
-
-    ::-webkit-scrollbar {
-        width: 6px;
-        height: 6px;
-    }
-
-    ::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: 3px;
-    }
-
-    ::-webkit-scrollbar-thumb:hover {
-        background: rgba(255, 255, 255, 0.2);
-    }
-</style>

src/lib/components/chat/ToolCallDisplay.svelte

@@ -1,89 +0,0 @@
-<script lang="ts">
-    import { onMount } from "svelte";
-    import gsap from "gsap";
-
-    export let toolName: string;
-    export let parameters: any = null;
-
-    let element: HTMLDivElement;
-
-    onMount(() => {
-        gsap.fromTo(
-            element,
-            { opacity: 0, scale: 0.9, y: -5 },
-            { opacity: 1, scale: 1, y: 0, duration: 0.3, ease: "back.out(1.5)" }
-        );
-    });
-
-    const toolIcons: Record<string, string> = {
-        read_game_code: "📄",
-        edit_game_code: "✏️",
-        read_console: "📟",
-        clear_console: "🧹",
-        run_game: "▶️",
-        stop_game: "⏹",
-        default: "🔧",
-    };
-
-    $: icon = toolIcons[toolName] || toolIcons.default;
-</script>
-
-<div class="tool-call" bind:this={element}>
-    <span class="tool-icon">{icon}</span>
-    <span class="tool-name">{toolName}</span>
-    {#if parameters && Object.keys(parameters).length > 0}
-        <span class="tool-params">
-            {#each Object.entries(parameters) as [key, value]}
-                <span class="param">
-                    <span class="param-key">{key}:</span>
-                    <span class="param-value">{typeof value === 'string' && value.length > 20 ? value.substring(0, 20) + '...' : value}</span>
-                </span>
-            {/each}
-        </span>
-    {/if}
-</div>
-
-<style>
-    .tool-call {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-        background: rgba(65, 105, 225, 0.1);
-        border: 1px solid rgba(65, 105, 225, 0.3);
-        border-radius: 4px;
-        padding: 0.25rem 0.5rem;
-        margin: 0.25rem 0;
-        font-size: 0.8rem;
-        font-family: "Monaco", "Menlo", monospace;
-    }
-
-    .tool-icon {
-        font-size: 1rem;
-        line-height: 1;
-    }
-
-    .tool-name {
-        color: rgba(65, 105, 225, 1);
-        font-weight: 600;
-    }
-
-    .tool-params {
-        display: flex;
-        gap: 0.5rem;
-        color: rgba(255, 255, 255, 0.6);
-        font-size: 0.75rem;
-    }
-
-    .param {
-        display: flex;
-        gap: 0.25rem;
-    }
-
-    .param-key {
-        color: rgba(255, 255, 255, 0.5);
-    }
-
-    .param-value {
-        color: rgba(255, 210, 30, 0.7);
-    }
-</style>

src/lib/components/chat/ToolInvocation.svelte

@@ -76,8 +76,8 @@
 
         if (to === "completed") {
             gsap.to(element, {
-                borderColor: "rgba(0, 255, 0, 0.3)",
-                backgroundColor: "rgba(0, 255, 0, 0.05)",
+                borderColor: "rgba(100, 200, 180, 0.3)",
+                backgroundColor: "rgba(100, 200, 180, 0.05)",
                 duration: 0.3,
                 ease: "power2.out"
             });
@@ -266,8 +266,8 @@
     }
 
     .tool-invocation.completed {
-        background: rgba(0, 255, 0, 0.04);
-        border-color: rgba(0, 255, 0, 0.15);
+        background: rgba(100, 200, 180, 0.04);
+        border-color: rgba(100, 200, 180, 0.15);
     }
 
     .tool-invocation.error {
@@ -315,7 +315,7 @@
     }
 
     .tool-invocation.completed .progress-ring {
-        color: rgba(0, 255, 0, 0.6);
+        color: rgba(100, 200, 180, 0.6);
     }
 
     .tool-invocation.error .progress-ring {
@@ -375,18 +375,22 @@
     }
 
     .param {
-        display: flex;
-        gap: 0.5rem;
-        margin: 0.2rem 0;
+        display: block;
+        margin: 0.4rem 0;
     }
 
     .param-key {
         color: rgba(255, 255, 255, 0.5);
+        display: block;
+        margin-bottom: 0.2rem;
+        font-size: 0.7rem;
     }
 
     .param-value {
         color: rgba(255, 210, 30, 0.8);
         word-break: break-all;
+        display: block;
+        margin-left: 0.5rem;
     }
 
     .param-value pre {
@@ -396,9 +400,29 @@
         border-radius: 3px;
         font-size: 0.7rem;
         overflow-x: auto;
+        overflow-y: auto;
         max-height: 150px;
     }
 
+    .param-value pre::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    .param-value pre::-webkit-scrollbar-track {
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 4px;
+    }
+
+    .param-value pre::-webkit-scrollbar-thumb {
+        background: rgba(100, 200, 180, 0.3);
+        border-radius: 4px;
+    }
+
+    .param-value pre::-webkit-scrollbar-thumb:hover {
+        background: rgba(100, 200, 180, 0.5);
+    }
+
     .spinner {
         display: inline-block;
         animation: spin 0.8s linear infinite;
@@ -412,8 +436,8 @@
     .tool-output {
         margin-top: 0.5rem;
         padding: 0.5rem;
-        background: rgba(0, 255, 0, 0.05);
-        border: 1px solid rgba(0, 255, 0, 0.1);
+        background: rgba(100, 200, 180, 0.05);
+        border: 1px solid rgba(100, 200, 180, 0.1);
         border-radius: 3px;
     }
 
@@ -421,13 +445,32 @@
         margin: 0;
         font-family: "Monaco", "Menlo", monospace;
         font-size: 0.7rem;
-        color: rgba(0, 255, 0, 0.8);
+        color: rgba(100, 200, 180, 0.9);
         white-space: pre-wrap;
         word-wrap: break-word;
         max-height: 200px;
         overflow-y: auto;
     }
 
+    .tool-output pre::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    .tool-output pre::-webkit-scrollbar-track {
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 4px;
+    }
+
+    .tool-output pre::-webkit-scrollbar-thumb {
+        background: rgba(100, 200, 180, 0.3);
+        border-radius: 4px;
+    }
+
+    .tool-output pre::-webkit-scrollbar-thumb:hover {
+        background: rgba(100, 200, 180, 0.5);
+    }
+
     .console-output {
         margin-top: 0.5rem;
         background: rgba(0, 0, 0, 0.3);
@@ -441,6 +484,25 @@
         overflow-y: auto;
     }
 
+    .console-output::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    .console-output::-webkit-scrollbar-track {
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 4px;
+    }
+
+    .console-output::-webkit-scrollbar-thumb {
+        background: rgba(65, 105, 225, 0.3);
+        border-radius: 4px;
+    }
+
+    .console-output::-webkit-scrollbar-thumb:hover {
+        background: rgba(65, 105, 225, 0.5);
+    }
+
     .console-line {
         margin: 0.1rem 0;
     }

src/lib/components/chat/context.md

@@ -4,19 +4,18 @@ AI chat interface with real-time streaming.
 
 ## Components
 
-- `ChatPanel.svelte` - Main chat UI with smooth scroll and keyed message iteration
+- `ChatPanel.svelte` - Main chat UI with smooth scroll
 - `MessageSegment.svelte` - Renders text, tool invocations, and results
 - `StreamingText.svelte` - Optimized character streaming with state persistence
-- `ToolInvocation.svelte` - Consolidated tool execution and results display
+- `ToolInvocation.svelte` - Tool execution and results display
 - `InProgressBlock.svelte` - Status indicator with progress bar
 - `ReasoningBlock.svelte` - Auto-collapsing thinking viewer
 - `MarkdownRenderer.svelte` - Markdown parser with configurable streaming speed
-- `ToolCallDisplay.svelte`, `ToolCallBlock.svelte` - Legacy tool rendering (deprecated)
 
 ## Architecture
 
-- Explicit message IDs with proper component keying
+- Segment-based messaging with unique IDs
 - StreamingText tracks processed content length to prevent duplication
 - Batch character processing (3 chars/cycle) at 120 chars/sec
-- Tool invocations and results merged in single visual blocks
-- Segments keyed by ID for stable component identity
+- Tool invocations displayed through dedicated segments
+- Clean separation between text and tool content

src/lib/server/context.md

@@ -5,8 +5,8 @@ WebSocket server with LangGraph agent for AI-assisted game development.
 ## Key Components
 
 - **api.ts** - WebSocket message routing
-- **langgraph-agent.ts** - LangGraph agent with character streaming
-- **tools.ts** - Editor read/write with game reload
+- **langgraph-agent.ts** - LangGraph agent with buffered streaming
+- **tools.ts** - Editor manipulation: full read/write, line-based reading, text/regex search, search-replace editing
 - **console-buffer.ts** - Console message storage
 - **documentation.ts** - VibeGame documentation loader
 
@@ -14,8 +14,8 @@ WebSocket server with LangGraph agent for AI-assisted game development.
 
 LangGraph state machine with real-time streaming:
 
-- Streams text segments character-by-character as they arrive
-- Tool invocations interrupt text streaming
+- Buffers and filters tool patterns from text segments
+- Tool invocations handled separately from text content
 - Explicit message IDs required for all segment operations
 
 ## Message Protocol

src/lib/server/langgraph-agent.ts

@@ -8,6 +8,9 @@ import {
 } from "@langchain/core/messages";
 import {
   readEditorTool,
+  readEditorLinesTool,
+  searchEditorTool,
+  editEditorTool,
   writeEditorTool,
   observeConsoleTool,
   setWebSocketConnection,
@@ -67,17 +70,60 @@ export class LangGraphAgent {
       let fullResponse = "";
       let currentSegmentId: string | null = null;
       let currentSegmentContent = "";
-      let inToolCall = false;
+      let buffer = "";
       const messageId = config?.metadata?.messageId;
+      const toolRegex = /\[TOOL:\s*(\w+)(?:\s+({[^}]+}))?\]/g;
 
       for await (const token of this.streamModelResponse(messages)) {
         fullResponse += token;
         config?.writer?.({ type: "token", content: token });
+        buffer += token;
 
-        const isToolStart = token.includes("[TOOL:");
-        const isToolEnd = inToolCall && token.includes("]");
+        // Process buffer to separate text from tool calls
+        let processedUpTo = 0;
+        let match;
+        toolRegex.lastIndex = 0; // Reset regex state
 
-        if (isToolStart) {
+        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) {
+              currentSegmentId = `seg_${Date.now()}_${Math.random()}`;
+              currentSegmentContent = "";
+              this.ws.send(
+                JSON.stringify({
+                  type: "segment_start",
+                  payload: {
+                    segmentId: currentSegmentId,
+                    segmentType: "text",
+                    messageId,
+                  },
+                  timestamp: Date.now(),
+                }),
+              );
+            }
+
+            if (currentSegmentId) {
+              currentSegmentContent += textBefore;
+              if (this.ws) {
+                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({
@@ -90,14 +136,19 @@ export class LangGraphAgent {
                 timestamp: Date.now(),
               }),
             );
+            currentSegmentId = null;
+            currentSegmentContent = "";
           }
-          currentSegmentId = null;
-          currentSegmentContent = "";
-          inToolCall = true;
-        } else if (isToolEnd) {
-          inToolCall = false;
-        } else if (!inToolCall) {
-          if (!currentSegmentId && token.trim() && this.ws) {
+
+          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
+          if (!currentSegmentId && buffer.trim() && this.ws) {
             currentSegmentId = `seg_${Date.now()}_${Math.random()}`;
             currentSegmentContent = "";
             this.ws.send(
@@ -114,14 +165,14 @@ export class LangGraphAgent {
           }
 
           if (currentSegmentId) {
-            currentSegmentContent += token;
+            currentSegmentContent += buffer;
             if (this.ws) {
               this.ws.send(
                 JSON.stringify({
                   type: "segment_token",
                   payload: {
                     segmentId: currentSegmentId,
-                    token,
+                    token: buffer,
                     messageId,
                   },
                   timestamp: Date.now(),
@@ -129,6 +180,46 @@ export class LangGraphAgent {
               );
             }
           }
+          buffer = "";
+        }
+      }
+
+      // Flush remaining buffer after stream ends
+      if (
+        buffer.trim() &&
+        !buffer.match(/\[TOOL:\s*(\w+)(?:\s+({[^}]+}))?\]/)
+      ) {
+        if (!currentSegmentId && this.ws) {
+          currentSegmentId = `seg_${Date.now()}_${Math.random()}`;
+          currentSegmentContent = "";
+          this.ws.send(
+            JSON.stringify({
+              type: "segment_start",
+              payload: {
+                segmentId: currentSegmentId,
+                segmentType: "text",
+                messageId,
+              },
+              timestamp: Date.now(),
+            }),
+          );
+        }
+
+        if (currentSegmentId) {
+          currentSegmentContent += buffer;
+          if (this.ws) {
+            this.ws.send(
+              JSON.stringify({
+                type: "segment_token",
+                payload: {
+                  segmentId: currentSegmentId,
+                  token: buffer,
+                  messageId,
+                },
+                timestamp: Date.now(),
+              }),
+            );
+          }
         }
       }
 
@@ -207,28 +298,69 @@ VIBEGAME DOCUMENTATION:
 ${this.documentation}
 
 AVAILABLE TOOLS:
-- read_editor: Read the current code in the editor
-- write_editor: Write new code to the editor and wait for game to reload
-- observe_console: Read recent console messages from the game
 
-TOOL USAGE FORMAT:
-To use a tool, format your response with the tool call in this exact format:
-[TOOL: tool_name]
-or with parameters:
-[TOOL: tool_name {"param": "value"}]
-
-Example:
-To read the editor: [TOOL: read_editor]
-To write code: [TOOL: write_editor {"content": "<world>...</world>"}]
-To check console: [TOOL: observe_console]
-
-IMPORTANT WORKFLOW:
-1. When asked to modify code, FIRST use read_editor to see the current code
-2. After receiving tool results, CONTINUE with your analysis and next steps
-3. Use write_editor to make the requested changes
-4. After writing, provide a clear explanation of what was changed
-
-When you receive tool results, use them to inform your next action. Do not stop after using a tool - continue until the task is complete.
+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.`;
   }
@@ -359,6 +491,29 @@ Be concise, accurate, and focus on practical solutions.`;
 
         if (call.name === "read_editor") {
           result = await readEditorTool.func("");
+        } else if (call.name === "read_editor_lines") {
+          result = await readEditorLinesTool.func(
+            call.args as { startLine: number; endLine?: number },
+          );
+        } else if (call.name === "search_editor") {
+          result = await searchEditorTool.func(
+            call.args as {
+              query: string;
+              mode?: "text" | "regex";
+              contextLines?: number;
+            },
+          );
+        } else if (call.name === "edit_editor") {
+          result = await editEditorTool.func(
+            call.args as { oldText: string; newText: string },
+          );
+
+          const consoleMatch = result.match(/Console output:\n([\s\S]*?)$/);
+          if (consoleMatch) {
+            consoleOutput = consoleMatch[1]
+              .split("\n")
+              .filter((line) => line.trim());
+          }
         } else if (call.name === "write_editor") {
           result = await writeEditorTool.func(call.args as { content: string });
 

src/lib/server/tools.ts

@@ -34,15 +34,127 @@ export function updateEditorContent(content: string) {
 
 export const readEditorTool = new DynamicTool({
   name: "read_editor",
-  description: "Read the current code in the editor",
+  description:
+    "Read the complete editor content - use for initial exploration or when search returns no results",
   func: async () => {
     return `Current editor content (html):\n${currentEditorContent}`;
   },
 });
 
+export const readEditorLinesTool = new DynamicStructuredTool({
+  name: "read_editor_lines",
+  description:
+    "Read specific lines from the editor - use AFTER search_editor to examine found code sections in detail",
+  schema: z.object({
+    startLine: z
+      .number()
+      .min(1)
+      .describe("The starting line number (1-indexed)"),
+    endLine: z
+      .number()
+      .min(1)
+      .optional()
+      .describe(
+        "The ending line number (inclusive). If not provided, only the start line is returned",
+      ),
+  }),
+  func: async (input: { startLine: number; endLine?: number }) => {
+    const lines = currentEditorContent.split("\n");
+    const totalLines = lines.length;
+
+    if (input.startLine > totalLines) {
+      return `Error: Start line ${input.startLine} exceeds total lines (${totalLines})`;
+    }
+
+    const endLine = input.endLine || input.startLine;
+    if (endLine > totalLines) {
+      return `Error: End line ${endLine} exceeds total lines (${totalLines})`;
+    }
+
+    if (input.startLine > endLine) {
+      return `Error: Start line (${input.startLine}) cannot be greater than end line (${endLine})`;
+    }
+
+    const selectedLines = lines.slice(input.startLine - 1, endLine);
+    const lineNumbers: number[] = [];
+    for (let i = input.startLine; i <= endLine; i++) {
+      lineNumbers.push(i);
+    }
+
+    const result = selectedLines
+      .map((line, index) => `${lineNumbers[index]}: ${line}`)
+      .join("\n");
+
+    return `Lines ${input.startLine}-${endLine} of ${totalLines}:\n${result}`;
+  },
+});
+
+export const editEditorTool = new DynamicStructuredTool({
+  name: "edit_editor",
+  description:
+    "Replace specific text in the editor - use for targeted changes after locating code with search_editor",
+  schema: z.object({
+    oldText: z.string().describe("The exact text to find and replace"),
+    newText: z.string().describe("The text to replace it with"),
+  }),
+  func: async (input: { oldText: string; newText: string }) => {
+    if (!currentEditorContent.includes(input.oldText)) {
+      return `Error: Could not find the specified text to replace. Make sure the oldText matches exactly, including whitespace.`;
+    }
+
+    const occurrences = currentEditorContent.split(input.oldText).length - 1;
+    if (occurrences > 1) {
+      return `Warning: Found ${occurrences} occurrences of the text. Use write_editor for multiple replacements or be more specific.`;
+    }
+
+    const newContent = currentEditorContent.replace(
+      input.oldText,
+      input.newText,
+    );
+    currentEditorContent = newContent;
+
+    consoleBuffer.clear();
+
+    if (wsConnection) {
+      wsConnection.send({
+        type: "editor_update",
+        payload: { content: newContent },
+      });
+    }
+
+    const startTime = Date.now();
+    const maxWaitTime = 3000;
+
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    while (Date.now() - startTime < maxWaitTime) {
+      const gameState = consoleBuffer.getGameStateFromMessages();
+
+      if (gameState.isReady) {
+        const messages = consoleBuffer.getRecentMessages();
+        consoleBuffer.markAsRead();
+        return `Text replaced successfully. Game reloaded without errors.\nRecent console output:\n${messages.map((m) => `[${m.type}] ${m.message}`).join("\n")}`;
+      }
+
+      if (gameState.hasError) {
+        const messages = consoleBuffer.getRecentMessages();
+        consoleBuffer.markAsRead();
+        return `Text replaced but game failed to start.\nError: ${gameState.lastError}\nFull console output:\n${messages.map((m) => `[${m.type}] ${m.message}`).join("\n")}`;
+      }
+
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    }
+
+    const messages = consoleBuffer.getRecentMessages();
+    consoleBuffer.markAsRead();
+    return `Text replaced. Game reload status uncertain (timeout).\nConsole output:\n${messages.map((m) => `[${m.type}] ${m.message}`).join("\n")}`;
+  },
+});
+
 export const writeEditorTool = new DynamicStructuredTool({
   name: "write_editor",
-  description: "Write new code to the editor and wait for game to reload",
+  description:
+    "Replace entire editor content - use for creating new files or complete rewrites",
   schema: z.object({
     content: z.string().describe("The code content to write to the editor"),
   }),
@@ -87,9 +199,102 @@ export const writeEditorTool = new DynamicStructuredTool({
   },
 });
 
+export const searchEditorTool = new DynamicStructuredTool({
+  name: "search_editor",
+  description:
+    "Search for code elements and get line numbers - use FIRST to locate specific functions, classes, or components before reading or editing",
+  schema: z.object({
+    query: z.string().describe("Text or regex pattern to search for"),
+    mode: z
+      .enum(["text", "regex"])
+      .optional()
+      .describe(
+        "Search mode: 'text' for literal text search, 'regex' for pattern matching (default: text)",
+      ),
+    contextLines: z
+      .number()
+      .min(0)
+      .max(5)
+      .optional()
+      .describe(
+        "Number of context lines before/after match (default: 2, max: 5)",
+      ),
+  }),
+  func: async (input: {
+    query: string;
+    mode?: "text" | "regex";
+    contextLines?: number;
+  }) => {
+    const lines = currentEditorContent.split("\n");
+    const totalLines = lines.length;
+    const mode = input.mode || "text";
+    const contextLines = input.contextLines ?? 2;
+
+    const matches: Array<{
+      lineNumber: number;
+      line: string;
+      context: string[];
+    }> = [];
+
+    for (let i = 0; i < lines.length; i++) {
+      let isMatch = false;
+
+      if (mode === "text") {
+        isMatch = lines[i].includes(input.query);
+      } else if (mode === "regex") {
+        try {
+          const regex = new RegExp(input.query);
+          isMatch = regex.test(lines[i]);
+        } catch (e) {
+          return `Error: Invalid regex pattern "${input.query}"`;
+        }
+      }
+
+      if (isMatch) {
+        const startContext = Math.max(0, i - contextLines);
+        const endContext = Math.min(lines.length - 1, i + contextLines);
+
+        const contextArray: string[] = [];
+        for (let j = startContext; j <= endContext; j++) {
+          const lineNum = j + 1;
+          const prefix = j === i ? ">>> " : "    ";
+          contextArray.push(`${prefix}${lineNum}: ${lines[j]}`);
+        }
+
+        matches.push({
+          lineNumber: i + 1,
+          line: lines[i],
+          context: contextArray,
+        });
+      }
+    }
+
+    if (matches.length === 0) {
+      return `No matches found for "${input.query}" in editor content (${totalLines} lines searched)`;
+    }
+
+    const totalMatches = matches.length;
+    const displayMatches = matches.slice(0, 10);
+
+    let output = `Found ${totalMatches} match${totalMatches > 1 ? "es" : ""} for "${input.query}":\n\n`;
+
+    displayMatches.forEach((match, index) => {
+      if (index > 0) output += "\n---\n\n";
+      output += match.context.join("\n");
+    });
+
+    if (totalMatches > 10) {
+      output += `\n\n(Showing first 10 of ${totalMatches} matches. Use more specific search terms to narrow results)`;
+    }
+
+    return output;
+  },
+});
+
 export const observeConsoleTool = new DynamicTool({
   name: "observe_console",
-  description: "Read recent console messages from the game",
+  description:
+    "Read console messages and game state - use to check for errors after making changes",
   func: async () => {
     const messages = consoleBuffer.getRecentMessages();
     const gameState = consoleBuffer.getGameStateFromMessages();
@@ -115,4 +320,11 @@ export const observeConsoleTool = new DynamicTool({
   },
 });
 
-export const tools = [readEditorTool, writeEditorTool, observeConsoleTool];
+export const tools = [
+  readEditorTool,
+  readEditorLinesTool,
+  searchEditorTool,
+  editEditorTool,
+  writeEditorTool,
+  observeConsoleTool,
+];

src/lib/services/agent.ts

@@ -0,0 +1,120 @@
+import { websocketService, type WebSocketMessage } from "./websocket";
+import { messageHandler } from "./message-handler";
+import { authStore } from "./auth";
+import { agentStore, type ChatMessage } from "../stores/agent";
+import { editorStore } from "../stores/editor";
+import { get } from "svelte/store";
+
+export class AgentService {
+  private isInitialized = false;
+  private unsubscribeHandlers: Array<() => void> = [];
+
+  connect(): void {
+    if (this.isInitialized) return;
+
+    this.unsubscribeHandlers.push(
+      websocketService.onConnection(this.handleConnection.bind(this)),
+      websocketService.onMessage(this.handleMessage.bind(this)),
+    );
+
+    websocketService.connect();
+    this.isInitialized = true;
+  }
+
+  disconnect(): void {
+    websocketService.disconnect();
+    this.unsubscribeHandlers.forEach((unsubscribe) => unsubscribe());
+    this.unsubscribeHandlers = [];
+    this.isInitialized = false;
+  }
+
+  sendMessage(content: string): void {
+    if (!websocketService.isConnected()) {
+      agentStore.setError("Not connected to server");
+      return;
+    }
+
+    const userMessage: ChatMessage = {
+      id: `user_${Date.now()}`,
+      role: "user",
+      content,
+      timestamp: Date.now(),
+      streaming: false,
+    };
+
+    agentStore.addMessage(userMessage);
+    agentStore.setError(null);
+
+    websocketService.send({
+      type: "chat",
+      payload: { content },
+      timestamp: Date.now(),
+    });
+  }
+
+  sendRawMessage(message: unknown): void {
+    if (websocketService.isConnected()) {
+      websocketService.send(message as WebSocketMessage);
+    }
+  }
+
+  reauthenticate(): void {
+    if (websocketService.isConnected()) {
+      const token = authStore.getToken();
+      if (token) {
+        websocketService.send({
+          type: "auth",
+          payload: { token },
+          timestamp: Date.now(),
+        });
+      }
+    }
+  }
+
+  private handleConnection(connected: boolean): void {
+    agentStore.setConnected(connected);
+
+    if (connected) {
+      this.authenticate();
+      this.syncEditor();
+    }
+  }
+
+  private handleMessage(message: WebSocketMessage): void {
+    messageHandler.handleMessage(message);
+  }
+
+  private authenticate(): void {
+    const token = authStore.getToken();
+    if (token) {
+      websocketService.send({
+        type: "auth",
+        payload: { token },
+        timestamp: Date.now(),
+      });
+    } else {
+      agentStore.setError(
+        "Authentication required. Please sign in with Hugging Face.",
+      );
+      agentStore.setConnected(false);
+      websocketService.disconnect();
+    }
+  }
+
+  private syncEditor(): void {
+    const editorState = get(editorStore);
+    if (editorState?.content) {
+      setTimeout(() => {
+        if (websocketService.isConnected()) {
+          websocketService.send({
+            type: "editor_sync",
+            payload: { content: editorState.content },
+            timestamp: Date.now(),
+          });
+        }
+      }, 500);
+    }
+  }
+}
+
+export const agentService = new AgentService();

src/lib/services/console-forward.ts

@@ -1,5 +1,5 @@
 import { consoleStore, type ConsoleMessage } from "../stores/console";
-import { agentStore } from "../stores/agent";
+import { agentService } from "./agent";
 
 export class ConsoleForwarder {
   private static instance: ConsoleForwarder | null = null;
@@ -40,7 +40,7 @@ export class ConsoleForwarder {
 
   private forwardMessages(messages: ConsoleMessage[]): void {
     messages.forEach((message) => {
-      agentStore.sendRawMessage({
+      agentService.sendRawMessage({
         type: "console_sync",
         payload: {
           id: message.id,

src/lib/services/context.md

@@ -14,6 +14,9 @@ Business logic layer with pure functions and singleton services
 services/
 ├── context.md          # This file
 ├── auth.ts             # Hugging Face OAuth authentication
+├── agent.ts            # High-level agent coordination
+├── 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
@@ -31,10 +34,14 @@ services/
 - `authStore.logout()` - Clear authentication
 - `authStore.getToken()` - Get current token
 - `authStore.isTokenValid()` - Check token validity
+- `agentService.connect()` - Connect to WebSocket server
+- `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 to WebSocket
+- `consoleForwarder.start()` - Start forwarding console messages
 - `consoleForwarder.stop()` - Stop console forwarding
 - `HTMLParser.extractGameContent()` - Parse world from HTML
 

src/lib/services/message-handler.ts

@@ -0,0 +1,202 @@
+import type { WebSocketMessage } from "./websocket";
+import { agentStore } from "../stores/agent";
+import { editorStore } from "../stores/editor";
+import type {
+  ChatMessage,
+  MessageSegment,
+  MessageSegmentType,
+} from "../stores/agent";
+
+interface StreamState {
+  currentStreamId: string | null;
+  streamingContent: string;
+}
+
+export class MessageHandler {
+  private streamState: StreamState = {
+    currentStreamId: null,
+    streamingContent: "",
+  };
+
+  handleMessage(message: WebSocketMessage): void {
+    const handlers: Record<string, () => void> = {
+      status: () => this.handleStatus(message),
+      stream_start: () => this.handleStreamStart(message),
+      stream_token: () => this.handleStreamToken(message),
+      stream_end: () => this.handleStreamEnd(message),
+      chat: () => this.handleChat(message),
+      error: () => this.handleError(message),
+      editor_update: () => this.handleEditorUpdate(message),
+      segment_start: () => this.handleSegmentStart(message),
+      segment_token: () => this.handleSegmentToken(message),
+      segment_end: () => this.handleSegmentEnd(message),
+    };
+
+    const handler = handlers[message.type];
+    if (handler) {
+      handler();
+    }
+  }
+
+  private handleStatus(message: WebSocketMessage): void {
+    const { processing, connected } = message.payload;
+
+    if (processing !== undefined) {
+      agentStore.setProcessing(processing as boolean);
+    }
+    if (connected !== undefined) {
+      agentStore.setConnected(connected as boolean);
+    }
+  }
+
+  private handleStreamStart(message: WebSocketMessage): void {
+    const messageId =
+      (message.payload.messageId as string) || `assistant_${Date.now()}`;
+    this.streamState.currentStreamId = messageId;
+    this.streamState.streamingContent = "";
+
+    const newMessage: ChatMessage = {
+      id: messageId,
+      role: "assistant",
+      content: "",
+      timestamp: Date.now(),
+      streaming: true,
+      segments: [],
+    };
+
+    agentStore.addMessage(newMessage);
+    agentStore.setStreamingStatus("streaming");
+  }
+
+  private handleStreamToken(message: WebSocketMessage): void {
+    const messageId = message.payload.messageId as string;
+    const token = (message.payload.token as string) || "";
+
+    if (!messageId) {
+      console.error("stream_token without messageId");
+      return;
+    }
+
+    this.streamState.streamingContent += token;
+    agentStore.updateMessageContent(
+      messageId,
+      this.streamState.streamingContent,
+    );
+  }
+
+  private handleStreamEnd(message: WebSocketMessage): void {
+    const messageId = message.payload.messageId as string;
+    const content =
+      (message.payload.content as string) || this.streamState.streamingContent;
+
+    if (!messageId) {
+      console.error("stream_end without messageId");
+      return;
+    }
+
+    agentStore.updateMessage(messageId, { content, streaming: false });
+    agentStore.setStreamingStatus("idle");
+
+    this.streamState.currentStreamId = null;
+    this.streamState.streamingContent = "";
+  }
+
+  private handleChat(message: WebSocketMessage): void {
+    if (this.streamState.currentStreamId) {
+      agentStore.updateMessage(this.streamState.currentStreamId, {
+        streaming: false,
+      });
+      agentStore.setStreamingStatus("idle");
+      this.streamState.currentStreamId = null;
+      this.streamState.streamingContent = "";
+    } else {
+      const { role, content } = message.payload;
+      if (role && content) {
+        const newMessage: ChatMessage = {
+          id: `msg_${Date.now()}`,
+          role: role as "user" | "assistant" | "system",
+          content: content as string,
+          timestamp: Date.now(),
+        };
+        agentStore.addMessage(newMessage);
+      }
+    }
+  }
+
+  private handleError(message: WebSocketMessage): void {
+    agentStore.setError((message.payload.error as string) || null);
+    agentStore.setProcessing(false);
+    agentStore.setStreamingStatus("idle");
+  }
+
+  private handleEditorUpdate(message: WebSocketMessage): void {
+    const content = message.payload.content as string;
+    if (content) {
+      editorStore.setContent(content);
+    }
+  }
+
+  private handleSegmentStart(message: WebSocketMessage): void {
+    const messageId = message.payload.messageId as string;
+    const segmentId =
+      (message.payload.segmentId as string) || `seg_${Date.now()}`;
+    const segmentType = message.payload.segmentType as MessageSegmentType;
+
+    if (!messageId) {
+      console.error("segment_start without messageId");
+      return;
+    }
+
+    const newSegment: MessageSegment = {
+      id: segmentId,
+      type: segmentType,
+      content: "",
+      toolName: message.payload.toolName as string | undefined,
+      toolArgs: message.payload.toolArgs as Record<string, unknown> | undefined,
+      startTime: Date.now(),
+      streaming: segmentType === "text",
+      toolStatus: segmentType === "tool-invocation" ? "pending" : undefined,
+    };
+
+    agentStore.addSegment(messageId, newSegment);
+  }
+
+  private handleSegmentToken(message: WebSocketMessage): void {
+    const messageId = message.payload.messageId as string;
+    const segmentId = message.payload.segmentId as string;
+    const token = (message.payload.token as string) || "";
+
+    if (!messageId || !segmentId) {
+      console.error("segment_token missing messageId or segmentId");
+      return;
+    }
+
+    agentStore.updateSegmentContent(messageId, segmentId, token);
+  }
+
+  private handleSegmentEnd(message: WebSocketMessage): void {
+    const messageId = message.payload.messageId as string;
+    const segmentId = message.payload.segmentId as string;
+
+    if (!messageId || !segmentId) {
+      console.error("segment_end missing messageId or segmentId");
+      return;
+    }
+
+    const updates: Partial<MessageSegment> = {
+      streaming: false,
+      content: message.payload.content as string | undefined,
+      toolOutput: message.payload.toolOutput as string | undefined,
+      toolResult: message.payload.toolResult as string | undefined,
+      toolStatus: message.payload.toolStatus as MessageSegment["toolStatus"],
+      toolError: message.payload.toolError as string | undefined,
+      endTime: Date.now(),
+      consoleOutput: message.payload.consoleOutput as string[] | undefined,
+    };
+
+    agentStore.updateSegment(messageId, segmentId, updates);
+    agentStore.mergeSegmentsIfNeeded(messageId);
+  }
+}
+
+export const messageHandler = new MessageHandler();

src/lib/services/websocket.ts

@@ -0,0 +1,104 @@
+export type WebSocketMessage = {
+  type: string;
+  payload: Record<string, unknown>;
+  timestamp?: number;
+};
+
+export type MessageHandler = (message: WebSocketMessage) => void;
+export type ConnectionHandler = (connected: boolean) => void;
+
+export class WebSocketService {
+  private ws: WebSocket | null = null;
+  private messageHandlers = new Set<MessageHandler>();
+  private connectionHandlers = new Set<ConnectionHandler>();
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  private url: string;
+
+  constructor() {
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    this.url = `${protocol}//${window.location.host}/ws`;
+  }
+
+  connect(): void {
+    if (this.ws?.readyState === WebSocket.OPEN) return;
+
+    this.ws = new WebSocket(this.url);
+
+    this.ws.onopen = () => {
+      this.notifyConnection(true);
+      if (this.reconnectTimer) {
+        clearTimeout(this.reconnectTimer);
+        this.reconnectTimer = null;
+      }
+    };
+
+    this.ws.onmessage = (event) => {
+      try {
+        const message = JSON.parse(event.data) as WebSocketMessage;
+        this.notifyMessage(message);
+      } catch (error) {
+        console.error("Error parsing WebSocket message:", error);
+      }
+    };
+
+    this.ws.onerror = (error) => {
+      console.error("WebSocket error:", error);
+    };
+
+    this.ws.onclose = () => {
+      this.notifyConnection(false);
+      this.scheduleReconnect();
+    };
+  }
+
+  disconnect(): void {
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+  }
+
+  send(message: WebSocketMessage): void {
+    if (this.ws?.readyState !== WebSocket.OPEN) {
+      throw new Error("WebSocket not connected");
+    }
+    this.ws.send(JSON.stringify(message));
+  }
+
+  isConnected(): boolean {
+    return this.ws?.readyState === WebSocket.OPEN;
+  }
+
+  onMessage(handler: MessageHandler): () => void {
+    this.messageHandlers.add(handler);
+    return () => this.messageHandlers.delete(handler);
+  }
+
+  onConnection(handler: ConnectionHandler): () => void {
+    this.connectionHandlers.add(handler);
+    return () => this.connectionHandlers.delete(handler);
+  }
+
+  private notifyMessage(message: WebSocketMessage): void {
+    this.messageHandlers.forEach((handler) => handler(message));
+  }
+
+  private notifyConnection(connected: boolean): void {
+    this.connectionHandlers.forEach((handler) => handler(connected));
+  }
+
+  private scheduleReconnect(): void {
+    if (!this.reconnectTimer) {
+      this.reconnectTimer = setTimeout(() => {
+        this.reconnectTimer = null;
+        this.connect();
+      }, 3000);
+    }
+  }
+}
+
+export const websocketService = new WebSocketService();

src/lib/stores/agent.ts

@@ -1,19 +1,4 @@
-import { writable, derived, get } from "svelte/store";
-import { authStore } from "../services/auth";
-import { editorStore } from "./editor";
-
-export interface ToolExecution {
-  id: string;
-  name: string;
-  status: "pending" | "running" | "completed" | "error";
-  args?: Record<string, unknown>;
-  output?: string;
-  error?: string;
-  startTime: number;
-  endTime?: number;
-  consoleOutput?: string[];
-  expanded?: boolean;
-}
+import { writable, derived } from "svelte/store";
 
 export type MessageSegmentType =
   | "text"
@@ -41,13 +26,12 @@ export interface MessageSegment {
 
 export interface ChatMessage {
   id: string;
-  role: "user" | "assistant" | "system" | "tool";
+  role: "user" | "assistant" | "system";
   content: string;
   timestamp: number;
   streaming?: boolean;
   reasoning?: string;
   showReasoning?: boolean;
-  toolExecutions?: ToolExecution[];
   segments?: MessageSegment[];
 }
 
@@ -72,579 +56,165 @@ function createAgentStore() {
     thinkingStartTime: null,
   });
 
-  let ws: WebSocket | null = null;
-  let currentStreamId: string | null = null;
-
-  function connect() {
-    if (ws && ws.readyState === WebSocket.OPEN) {
-      return;
-    }
-
-    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    const wsUrl = `${protocol}//${window.location.host}/ws`;
-
-    ws = new WebSocket(wsUrl);
-
-    ws.onopen = () => {
-      update((state) => ({ ...state, connected: true, error: null }));
-
-      const token = authStore.getToken();
-      if (token && ws) {
-        ws.send(
-          JSON.stringify({
-            type: "auth",
-            payload: { token },
-            timestamp: Date.now(),
-          }),
-        );
-
-        const editorState = get(editorStore);
-        if (editorState && editorState.content) {
-          setTimeout(() => {
-            if (ws && ws.readyState === WebSocket.OPEN) {
-              ws.send(
-                JSON.stringify({
-                  type: "editor_sync",
-                  payload: { content: editorState.content },
-                  timestamp: Date.now(),
-                }),
-              );
-            }
-          }, 500);
-        }
-      } else {
-        update((state) => ({
-          ...state,
-          error: "Authentication required. Please sign in with Hugging Face.",
-          connected: false,
-        }));
-        if (ws) {
-          ws.close();
-        }
-      }
-    };
-
-    ws.onmessage = (event) => {
-      try {
-        const message = JSON.parse(event.data);
-        handleWebSocketMessage(message);
-      } catch (error) {
-        console.error("Error parsing WebSocket message:", error);
-      }
-    };
-
-    ws.onerror = (error) => {
-      console.error("WebSocket error:", error);
-      update((state) => ({ ...state, error: "Connection error" }));
-    };
-
-    ws.onclose = () => {
-      update((state) => ({ ...state, connected: false }));
-
-      const token = authStore.getToken();
-      if (token) {
-        setTimeout(() => {
-          connect();
-        }, 3000);
-      }
-    };
-  }
-
-  function handleWebSocketMessage(message: {
-    type: string;
-    payload: {
-      processing?: boolean;
-      connected?: boolean;
-      chunk?: string;
-      token?: string;
-      messageId?: string;
-      reasoning?: string;
-      role?: string;
-      content?: string;
-      error?: string;
-      toolName?: string;
-      toolArgs?: Record<string, unknown>;
-      toolResult?: string;
-      message?: string;
-      toolId?: string;
-      toolStatus?: "pending" | "running" | "completed" | "error";
-      toolOutput?: string;
-      toolError?: string;
-      consoleOutput?: string[];
-      segmentId?: string;
-      segmentType?: MessageSegmentType;
-    };
-  }) {
-    switch (message.type) {
-      case "status":
-        if (message.payload.processing !== undefined) {
-          const isProcessing = message.payload.processing as boolean;
-          update((state) => ({
-            ...state,
-            processing: isProcessing,
-            streamingStatus: isProcessing ? "thinking" : "idle",
-            thinkingStartTime: isProcessing ? Date.now() : null,
-          }));
-        }
-        if (message.payload.connected !== undefined) {
-          update((state) => ({
-            ...state,
-            connected: message.payload.connected as boolean,
-          }));
-        }
-        break;
-
-      case "stream_start": {
-        const assistantId =
-          message.payload.messageId || `assistant_${Date.now()}`;
-        currentStreamId = assistantId;
-        update((state) => {
-          return {
-            ...state,
-            streamingContent: "",
-            messages: [
-              ...state.messages,
-              {
-                id: assistantId,
-                role: "assistant",
-                content: "",
-                timestamp: Date.now(),
-                streaming: true,
-                segments: [],
-              },
-            ],
-            streamingStatus: "streaming",
-            thinkingStartTime: null,
-          };
-        });
-        break;
-      }
-
-      case "stream_token":
-        if (!message.payload.messageId) {
-          console.error("stream_token without messageId");
-          break;
-        }
-        update((state) => {
-          const newContent =
-            state.streamingContent + (message.payload.token || "");
-          return {
-            ...state,
-            streamingContent: newContent,
-            messages: state.messages.map((msg) =>
-              msg.id === message.payload.messageId
-                ? { ...msg, content: newContent }
-                : msg,
-            ),
-            streamingStatus: "streaming",
-          };
-        });
-        break;
-
-      case "stream_end":
-        if (!message.payload.messageId) {
-          console.error("stream_end without messageId");
-          break;
-        }
-        update((state) => {
-          const finalContent =
-            message.payload.content || state.streamingContent;
-          currentStreamId = null;
-          return {
-            ...state,
-            streamingContent: "",
-            messages: state.messages.map((msg) =>
-              msg.id === message.payload.messageId
-                ? { ...msg, content: finalContent, streaming: false }
-                : msg,
-            ),
-            streamingStatus: "idle",
-            thinkingStartTime: null,
-          };
-        });
-        break;
-
-      case "chat":
-        update((state) => {
-          if (currentStreamId) {
-            const messages = state.messages.map((msg) => {
-              if (msg.id === currentStreamId) {
-                return { ...msg, streaming: false };
-              }
-              return msg;
-            });
-            currentStreamId = null;
-            return {
-              ...state,
-              streamingContent: "",
-              messages,
-              streamingStatus: "idle",
-              thinkingStartTime: null,
-            };
-          } else {
-            if (message.payload.role && message.payload.content) {
-              const newMessage: ChatMessage = {
-                id: `msg_${Date.now()}`,
-                role: message.payload.role as "user" | "assistant" | "system",
-                content: message.payload.content,
-                timestamp: Date.now(),
-              };
-              return {
-                ...state,
-                messages: [...state.messages, newMessage],
-              };
-            }
-            return state;
-          }
-        });
-        break;
-
-      case "error":
-        update((state) => ({
-          ...state,
-          error: message.payload.error || null,
-          processing: false,
-          streamingStatus: "idle",
-          thinkingStartTime: null,
-        }));
-        break;
-
-      case "editor_update":
-        if (message.payload.content) {
-          editorStore.setContent(message.payload.content);
-        }
-        break;
+  return {
+    subscribe,
 
-      case "tool_start":
-        update((state) => {
-          const toolExecution: ToolExecution = {
-            id: message.payload.toolId || `tool_${Date.now()}`,
-            name: message.payload.toolName || "unknown",
-            status: "running",
-            args: message.payload.toolArgs,
-            startTime: Date.now(),
-            expanded: false,
-          };
+    setConnected(connected: boolean) {
+      update((state) => ({ ...state, connected }));
+    },
+
+    setProcessing(processing: boolean) {
+      update((state) => ({
+        ...state,
+        processing,
+        streamingStatus: processing ? "thinking" : state.streamingStatus,
+        thinkingStartTime: processing ? Date.now() : state.thinkingStartTime,
+      }));
+    },
+
+    setStreamingStatus(status: AgentState["streamingStatus"]) {
+      update((state) => ({
+        ...state,
+        streamingStatus: status,
+        thinkingStartTime: status === "idle" ? null : state.thinkingStartTime,
+      }));
+    },
+
+    setError(error: string | null) {
+      update((state) => ({ ...state, error }));
+    },
+
+    addMessage(message: ChatMessage) {
+      update((state) => ({
+        ...state,
+        messages: [...state.messages, message],
+      }));
+    },
+
+    updateMessage(messageId: string, updates: Partial<ChatMessage>) {
+      update((state) => ({
+        ...state,
+        messages: state.messages.map((msg) =>
+          msg.id === messageId ? { ...msg, ...updates } : msg,
+        ),
+      }));
+    },
+
+    updateMessageContent(messageId: string, content: string) {
+      update((state) => ({
+        ...state,
+        streamingContent: content,
+        messages: state.messages.map((msg) =>
+          msg.id === messageId ? { ...msg, content } : msg,
+        ),
+      }));
+    },
+
+    addSegment(messageId: string, segment: MessageSegment) {
+      update((state) => ({
+        ...state,
+        messages: state.messages.map((msg) =>
+          msg.id === messageId
+            ? { ...msg, segments: [...(msg.segments || []), segment] }
+            : msg,
+        ),
+      }));
+    },
+
+    updateSegment(
+      messageId: string,
+      segmentId: string,
+      updates: Partial<MessageSegment>,
+    ) {
+      update((state) => ({
+        ...state,
+        messages: state.messages.map((msg) => {
+          if (msg.id !== messageId) return msg;
+
+          const segments = msg.segments?.map((seg) =>
+            seg.id === segmentId ? { ...seg, ...updates } : seg,
+          );
 
-          let toolMessage = state.messages.find(
-            (msg) =>
-              msg.role === "tool" && msg.id === `tools_${currentStreamId}`,
+          return { ...msg, segments };
+        }),
+      }));
+    },
+
+    updateSegmentContent(messageId: string, segmentId: string, token: string) {
+      update((state) => ({
+        ...state,
+        messages: state.messages.map((msg) => {
+          if (msg.id !== messageId) return msg;
+
+          const segments = msg.segments?.map((seg) =>
+            seg.id === segmentId
+              ? { ...seg, content: seg.content + token }
+              : seg,
           );
 
-          if (!toolMessage) {
-            toolMessage = {
-              id: `tools_${currentStreamId || Date.now()}`,
-              role: "tool",
-              content: "",
-              timestamp: Date.now(),
-              toolExecutions: [toolExecution],
-            };
-            return {
-              ...state,
-              messages: [...state.messages, toolMessage],
-            };
-          } else {
-            const messages = state.messages.map((msg) => {
-              if (msg.id === toolMessage!.id) {
-                return {
-                  ...msg,
-                  toolExecutions: [
-                    ...(msg.toolExecutions || []),
-                    toolExecution,
-                  ],
-                };
+          return { ...msg, segments };
+        }),
+      }));
+    },
+
+    mergeSegmentsIfNeeded(messageId: string) {
+      update((state) => ({
+        ...state,
+        messages: state.messages.map((msg) => {
+          if (msg.id !== messageId || !msg.segments) return msg;
+
+          const segments = msg.segments.map((seg, index, allSegs) => {
+            if (seg.type === "tool-result" && index > 0) {
+              const prevSegment = allSegs[index - 1];
+              if (
+                prevSegment.type === "tool-invocation" &&
+                prevSegment.toolName === seg.toolName
+              ) {
+                return { ...seg, mergeWithPrevious: true };
               }
-              return msg;
-            });
-            return { ...state, messages };
-          }
-        });
-        break;
-
-      case "tool_output":
-        update((state) => {
-          const messages = state.messages.map((msg) => {
-            if (msg.role === "tool" && msg.toolExecutions) {
-              const toolExecutions = msg.toolExecutions.map((exec) => {
-                if (exec.id === message.payload.toolId) {
-                  return {
-                    ...exec,
-                    output:
-                      (exec.output || "") + (message.payload.toolOutput || ""),
-                    consoleOutput:
-                      message.payload.consoleOutput || exec.consoleOutput,
-                  };
-                }
-                return exec;
-              });
-              return { ...msg, toolExecutions };
-            }
-            return msg;
-          });
-          return { ...state, messages };
-        });
-        break;
-
-      case "tool_complete":
-        update((state) => {
-          const messages = state.messages.map((msg) => {
-            if (msg.role === "tool" && msg.toolExecutions) {
-              const toolExecutions = msg.toolExecutions.map((exec) => {
-                if (exec.id === message.payload.toolId) {
-                  return {
-                    ...exec,
-                    status: "completed" as const,
-                    output: message.payload.toolResult || exec.output,
-                    endTime: Date.now(),
-                    consoleOutput:
-                      message.payload.consoleOutput || exec.consoleOutput,
-                  };
-                }
-                return exec;
-              });
-              return { ...msg, toolExecutions };
             }
-            return msg;
+            return seg;
           });
-          return { ...state, messages };
-        });
-        break;
 
-      case "tool_error":
-        update((state) => {
-          const messages = state.messages.map((msg) => {
-            if (msg.role === "tool" && msg.toolExecutions) {
-              const toolExecutions = msg.toolExecutions.map((exec) => {
-                if (exec.id === message.payload.toolId) {
-                  return {
-                    ...exec,
-                    status: "error" as const,
-                    error: message.payload.error || "Unknown error",
-                    endTime: Date.now(),
-                  };
-                }
-                return exec;
-              });
-              return { ...msg, toolExecutions };
+          const mergedSegments = segments.reduce((acc, seg, index) => {
+            if (seg.mergeWithPrevious && index > 0 && acc.length > 0) {
+              const prevIndex = acc.length - 1;
+              acc[prevIndex] = {
+                ...acc[prevIndex],
+                toolOutput: seg.toolOutput || acc[prevIndex].toolOutput,
+                toolResult: seg.toolResult || seg.toolOutput,
+                toolError: seg.toolError || acc[prevIndex].toolError,
+                toolStatus: seg.toolStatus || acc[prevIndex].toolStatus,
+                consoleOutput:
+                  seg.consoleOutput || acc[prevIndex].consoleOutput,
+                endTime: seg.endTime,
+              };
+              return acc;
             }
-            return msg;
-          });
-          return { ...state, messages };
-        });
-        break;
-
-      case "segment_start":
-        update((state) => {
-          const segmentId = message.payload.segmentId || `seg_${Date.now()}`;
-          const segmentType = message.payload.segmentType as MessageSegmentType;
-          const newSegment: MessageSegment = {
-            id: segmentId,
-            type: segmentType,
-            content: "",
-            toolName: message.payload.toolName,
-            toolArgs: message.payload.toolArgs,
-            startTime: Date.now(),
-            streaming: segmentType === "text",
-            toolStatus:
-              segmentType === "tool-invocation" ? "pending" : undefined,
-          };
-
-          if (!message.payload.messageId) {
-            console.error("segment_start without messageId");
-            return state;
-          }
-          return {
-            ...state,
-            messages: state.messages.map((msg) => {
-              if (msg.id === message.payload.messageId) {
-                return {
-                  ...msg,
-                  segments: [...(msg.segments || []), newSegment],
-                };
-              }
-              return msg;
-            }),
-          };
-        });
-        break;
-
-      case "segment_token":
-        if (!message.payload.messageId) {
-          console.error("segment_token without messageId");
-          break;
-        }
-        update((state) => {
-          return {
-            ...state,
-            messages: state.messages.map((msg) => {
-              if (msg.id === message.payload.messageId) {
-                const segments = msg.segments?.map((seg) => {
-                  if (seg.id === message.payload.segmentId) {
-                    return {
-                      ...seg,
-                      content: seg.content + (message.payload.token || ""),
-                    };
-                  }
-                  return seg;
-                });
-                return { ...msg, segments };
-              }
-              return msg;
-            }),
-          };
-        });
-        break;
-
-      case "segment_end":
-        if (!message.payload.messageId) {
-          console.error("segment_end without messageId");
-          break;
-        }
-        update((state) => {
-          return {
-            ...state,
-            messages: state.messages.map((msg) => {
-              if (msg.id === message.payload.messageId) {
-                const segments = msg.segments?.map((seg, index, allSegs) => {
-                  if (seg.id === message.payload.segmentId) {
-                    const updatedSegment = {
-                      ...seg,
-                      streaming: false,
-                      content: message.payload.content || seg.content,
-                      toolOutput: message.payload.toolOutput,
-                      toolResult: message.payload.toolResult,
-                      toolStatus: message.payload.toolStatus || seg.toolStatus,
-                      toolError: message.payload.toolError,
-                      endTime: Date.now(),
-                      consoleOutput: message.payload.consoleOutput,
-                    };
-
-                    if (seg.type === "tool-result" && index > 0) {
-                      const prevSegment = allSegs[index - 1];
-                      if (
-                        prevSegment.type === "tool-invocation" &&
-                        prevSegment.toolName === seg.toolName
-                      ) {
-                        return { ...updatedSegment, mergeWithPrevious: true };
-                      }
-                    }
-                    return updatedSegment;
-                  }
-                  return seg;
-                });
-
-                const mergedSegments = segments?.reduce((acc, seg, index) => {
-                  if (seg.mergeWithPrevious && index > 0 && acc.length > 0) {
-                    const prevIndex = acc.length - 1;
-                    acc[prevIndex] = {
-                      ...acc[prevIndex],
-                      toolOutput: seg.toolOutput || acc[prevIndex].toolOutput,
-                      toolResult: seg.toolResult || seg.toolOutput,
-                      toolError: seg.toolError || acc[prevIndex].toolError,
-                      toolStatus: seg.toolStatus || acc[prevIndex].toolStatus,
-                      consoleOutput:
-                        seg.consoleOutput || acc[prevIndex].consoleOutput,
-                      endTime: seg.endTime,
-                    };
-                    return acc;
-                  }
-                  const cleanSegment = { ...seg };
-                  delete cleanSegment.mergeWithPrevious;
-                  return [...acc, cleanSegment];
-                }, [] as MessageSegment[]);
-
-                return { ...msg, segments: mergedSegments };
-              }
-              return msg;
-            }),
-          };
-        });
-        break;
-    }
-  }
-
-  function sendMessage(content: string) {
-    if (!ws || ws.readyState !== WebSocket.OPEN) {
-      update((state) => ({ ...state, error: "Not connected to server" }));
-      return;
-    }
-
-    const userMessage: ChatMessage = {
-      id: `user_${Date.now()}`,
-      role: "user",
-      content,
-      timestamp: Date.now(),
-      streaming: false,
-    };
-
-    update((state) => ({
-      ...state,
-      messages: [...state.messages, userMessage],
-      error: null,
-    }));
-
-    ws.send(
-      JSON.stringify({
-        type: "chat",
-        payload: { content },
-        timestamp: Date.now(),
-      }),
-    );
-  }
-
-  function sendRawMessage(message: unknown) {
-    if (ws && ws.readyState === WebSocket.OPEN) {
-      ws.send(JSON.stringify(message));
-    }
-  }
-
-  function clearMessages() {
-    update((state) => ({
-      ...state,
-      messages: [],
-      streamingContent: "",
-      error: null,
-      streamingStatus: "idle",
-      thinkingStartTime: null,
-    }));
-    currentStreamId = null;
-  }
-
-  function disconnect() {
-    if (ws) {
-      ws.close();
-      ws = null;
-    }
-  }
-
-  function reauthenticate() {
-    if (ws && ws.readyState === WebSocket.OPEN) {
-      const token = authStore.getToken();
-      if (token) {
-        ws.send(
-          JSON.stringify({
-            type: "auth",
-            payload: { token },
-            timestamp: Date.now(),
-          }),
-        );
-      }
-    }
-  }
-
-  return {
-    subscribe,
-    connect,
-    disconnect,
-    sendMessage,
-    sendRawMessage,
-    clearMessages,
-    reauthenticate,
+            const cleanSegment = { ...seg };
+            delete cleanSegment.mergeWithPrevious;
+            return [...acc, cleanSegment];
+          }, [] as MessageSegment[]);
+
+          return { ...msg, segments: mergedSegments };
+        }),
+      }));
+    },
+
+    clearMessages() {
+      update((state) => ({
+        ...state,
+        messages: [],
+        streamingContent: "",
+        error: null,
+        streamingStatus: "idle",
+        thinkingStartTime: null,
+      }));
+    },
   };
 }
 
 export const agentStore = createAgentStore();
 
 export const isProcessing = derived(agentStore, ($agent) => $agent.processing);
-
 export const isConnected = derived(agentStore, ($agent) => $agent.connected);

src/lib/stores/context.md

@@ -17,7 +17,7 @@ stores/
 ├── game.ts        # Game instance and running state
 ├── console.ts     # Console messages with unique IDs
 ├── editor.ts      # Editor content and settings
-├── agent.ts       # WebSocket agent connection
+├── agent.ts       # Agent chat state and messages
 └── ui.ts          # UI state (view mode, errors)
 ```