improved AI chat

src/App.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount, onDestroy } from 'svelte';
     import { consoleCapture } from './lib/services/console-capture';
+    import { consoleForwarder } from './lib/services/console-forward';
     import { registerShortcuts, shortcuts } from './lib/config/shortcuts';
     import { loadingStore } from './lib/stores/loading';
     import AppHeader from './lib/components/layout/AppHeader.svelte';
@@ -11,23 +12,25 @@
     
     onMount(() => {
         loadingStore.startLoading();
-        
+
         consoleCapture.setup();
+        consoleForwarder.start();
         unregisterShortcuts = registerShortcuts(shortcuts);
-        
+
         setTimeout(() => {
             loadingStore.setProgress(60);
         }, 100);
-        
+
         requestAnimationFrame(() => {
             requestAnimationFrame(() => {
                 loadingStore.finishLoading();
             });
         });
     });
-    
+
     onDestroy(() => {
         consoleCapture.teardown();
+        consoleForwarder.stop();
         if (unregisterShortcuts) unregisterShortcuts();
     });
 </script>

src/lib/components/chat/ChatPanel.svelte

@@ -6,6 +6,8 @@
     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";
 
     let inputValue = "";
     let messagesContainer: HTMLDivElement;
@@ -197,29 +199,43 @@
             {#if $agentStore.messages.length === 0 && $isConnected}
                 <div class="ready-message">Ready to Chat!</div>
             {/if}
+
+            {#if $agentStore.streamingStatus !== "idle" && (!$agentStore.streamingContent || $agentStore.streamingStatus === "thinking")}
+                <InProgressBlock
+                    status={$agentStore.streamingStatus === "completing" ? "completing" : $agentStore.streamingStatus}
+                    content={$agentStore.streamingContent}
+                    startTime={$agentStore.thinkingStartTime || Date.now()}
+                    isExpanded={false}
+                />
+            {/if}
+
             {#each $agentStore.messages as message}
-                <div class="message {message.role}">
-                    {#if message.reasoning && message.role === "assistant"}
-                        <ReasoningBlock reasoning={message.reasoning} />
-                    {/if}
-                    <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 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}
+                        <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}
+                                {#if message.streaming}
+                                    <span class="cursor">▊</span>
                                 {/if}
-                            {/each}
-                            {#if message.streaming}
-                                <span class="cursor">▊</span>
+                            {:else}
+                                {message.content.trim()}
                             {/if}
-                        {:else}
-                            {message.content.trim()}
-                        {/if}
+                        </div>
                     </div>
-                </div>
+                {/if}
             {/each}
             {#if $agentStore.error}
                 <div class="error-message">

src/lib/components/chat/InProgressBlock.svelte

@@ -0,0 +1,351 @@
+<script lang="ts">
+    import { onMount, onDestroy } from "svelte";
+    import gsap from "gsap";
+
+    export let status: "thinking" | "streaming" | "completing" = "thinking";
+    export let content: string = "";
+    export let startTime: number = Date.now();
+    export let isExpanded: boolean = false;
+    export let autoCollapse: boolean = true;
+
+    let blockElement: HTMLDivElement;
+    let contentElement: HTMLDivElement;
+    let expandIcon: HTMLSpanElement;
+    let collapseTimeout: number | null = null;
+
+    $: duration = Date.now() - startTime;
+    $: formattedDuration = formatDuration(duration);
+
+    function formatDuration(ms: number): string {
+        if (ms < 1000) return `${ms}ms`;
+        return `${(ms / 1000).toFixed(1)}s`;
+    }
+
+    function toggleExpanded() {
+        isExpanded = !isExpanded;
+        updateExpandState();
+    }
+
+    function updateExpandState() {
+        if (!expandIcon || !contentElement) return;
+
+        if (isExpanded) {
+            gsap.to(expandIcon, {
+                rotation: 90,
+                duration: 0.2,
+                ease: "power2.out",
+            });
+
+            gsap.set(contentElement, { display: "block" });
+            gsap.fromTo(
+                contentElement,
+                { opacity: 0, maxHeight: 0 },
+                { opacity: 1, maxHeight: 500, duration: 0.3, ease: "power2.out" },
+            );
+        } else {
+            gsap.to(expandIcon, {
+                rotation: 0,
+                duration: 0.2,
+                ease: "power2.in",
+            });
+
+            gsap.to(contentElement, {
+                opacity: 0,
+                maxHeight: 0,
+                duration: 0.2,
+                ease: "power2.in",
+                onComplete: () => {
+                    gsap.set(contentElement, { display: "none" });
+                },
+            });
+        }
+    }
+
+    function getStatusIcon() {
+        switch (status) {
+            case "thinking":
+                return "🤔";
+            case "streaming":
+                return "✍️";
+            case "completing":
+                return "✨";
+            default:
+                return "⚡";
+        }
+    }
+
+    function getStatusText() {
+        switch (status) {
+            case "thinking":
+                return "Thinking";
+            case "streaming":
+                return "Writing response";
+            case "completing":
+                return "Finalizing response";
+            default:
+                return "Processing";
+        }
+    }
+
+    $: if (status === "completing" && autoCollapse && isExpanded) {
+        if (collapseTimeout) clearTimeout(collapseTimeout);
+        collapseTimeout = window.setTimeout(() => {
+            isExpanded = false;
+            updateExpandState();
+        }, 500);
+    }
+
+    onMount(() => {
+        if (blockElement) {
+            gsap.fromTo(
+                blockElement,
+                { opacity: 0, y: -10 },
+                { opacity: 1, y: 0, duration: 0.3, ease: "power2.out" },
+            );
+        }
+
+        const interval = setInterval(() => {
+            duration = Date.now() - startTime;
+        }, 100);
+
+        return () => clearInterval(interval);
+    });
+
+    onDestroy(() => {
+        if (collapseTimeout) clearTimeout(collapseTimeout);
+    });
+</script>
+
+<div class="in-progress-block {status}" bind:this={blockElement}>
+    <button class="progress-header" on:click={toggleExpanded} aria-expanded={isExpanded}>
+        <span class="status-icon">
+            {#if status === "streaming"}
+                <span class="animated-icon">{getStatusIcon()}</span>
+            {:else if status === "thinking"}
+                <span class="spinning-icon">{getStatusIcon()}</span>
+            {:else}
+                {getStatusIcon()}
+            {/if}
+        </span>
+
+        <span class="status-text">
+            {getStatusText()}<span class="dots"></span>
+        </span>
+
+        <span class="progress-meta">
+            <span class="duration">{formattedDuration}</span>
+            {#if content}
+                <span class="char-count">{content.length} chars</span>
+            {/if}
+        </span>
+
+        <span bind:this={expandIcon} class="expand-icon">▶</span>
+    </button>
+
+    <div bind:this={contentElement} class="progress-content" style="display: none;">
+        {#if content}
+            <div class="content-wrapper">
+                <div class="content-text">{content}</div>
+                <span class="cursor">▊</span>
+            </div>
+        {:else}
+            <div class="waiting-message">Waiting for response to begin...</div>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .in-progress-block {
+        margin: 0.4rem 0;
+        border-radius: 4px;
+        overflow: hidden;
+        border: 1px solid rgba(255, 210, 30, 0.2);
+        background: rgba(255, 210, 30, 0.05);
+        transition: all 0.2s ease;
+    }
+
+    .in-progress-block.thinking {
+        border-color: rgba(255, 210, 30, 0.3);
+        background: rgba(255, 210, 30, 0.08);
+    }
+
+    .in-progress-block.streaming {
+        border-color: rgba(65, 105, 225, 0.3);
+        background: rgba(65, 105, 225, 0.08);
+    }
+
+    .in-progress-block.completing {
+        border-color: rgba(0, 255, 0, 0.2);
+        background: rgba(0, 255, 0, 0.05);
+    }
+
+    .progress-header {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        width: 100%;
+        padding: 0.5rem 0.75rem;
+        background: transparent;
+        border: none;
+        color: inherit;
+        font: inherit;
+        text-align: left;
+        cursor: pointer;
+        transition: background 0.2s ease;
+    }
+
+    .progress-header:hover {
+        background: rgba(255, 255, 255, 0.02);
+    }
+
+    .status-icon {
+        font-size: 1rem;
+        width: 1.5rem;
+        text-align: center;
+    }
+
+    .spinning-icon {
+        display: inline-block;
+        animation: spin 1s linear infinite;
+    }
+
+    .animated-icon {
+        display: inline-block;
+        animation: bounce 1s ease-in-out infinite;
+    }
+
+    @keyframes spin {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    @keyframes bounce {
+        0%,
+        100% {
+            transform: translateY(0);
+        }
+        50% {
+            transform: translateY(-2px);
+        }
+    }
+
+    .status-text {
+        flex: 1;
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 0.875rem;
+    }
+
+    .dots::after {
+        content: "";
+        animation: dots 1.5s steps(4, end) infinite;
+    }
+
+    @keyframes dots {
+        0%,
+        20% {
+            content: "";
+        }
+        40% {
+            content: ".";
+        }
+        60% {
+            content: "..";
+        }
+        80%,
+        100% {
+            content: "...";
+        }
+    }
+
+    .progress-meta {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        color: rgba(255, 255, 255, 0.4);
+        font-size: 0.75rem;
+        font-family: "Monaco", "Menlo", monospace;
+    }
+
+    .duration {
+        min-width: 3rem;
+    }
+
+    .char-count {
+        opacity: 0.7;
+    }
+
+    .expand-icon {
+        font-size: 0.7rem;
+        color: rgba(255, 255, 255, 0.4);
+        transition: transform 0.2s ease;
+        transform-origin: center;
+    }
+
+    .progress-content {
+        padding: 0.75rem;
+        background: rgba(0, 0, 0, 0.2);
+        border-top: 1px solid rgba(255, 255, 255, 0.05);
+        max-height: 300px;
+        overflow-y: auto;
+    }
+
+    .content-wrapper {
+        font-family: "Monaco", "Menlo", monospace;
+        font-size: 0.8rem;
+        line-height: 1.5;
+        color: rgba(255, 255, 255, 0.8);
+    }
+
+    .content-text {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        display: inline;
+    }
+
+    .cursor {
+        display: inline-block;
+        animation: blink 1s infinite;
+        color: rgba(65, 105, 225, 0.8);
+        font-weight: bold;
+    }
+
+    @keyframes blink {
+        0%,
+        50% {
+            opacity: 1;
+        }
+        51%,
+        100% {
+            opacity: 0;
+        }
+    }
+
+    .waiting-message {
+        text-align: center;
+        color: rgba(255, 255, 255, 0.4);
+        font-style: italic;
+        font-size: 0.85rem;
+        padding: 1rem;
+    }
+
+    ::-webkit-scrollbar {
+        width: 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/StreamingIndicator.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import gsap from "gsap";
+
+    export let status: "thinking" | "streaming" = "thinking";
+    export let content: string = "";
+    export let duration: number = 0;
+
+    let indicatorElement: HTMLDivElement;
+    let truncatedContent = "";
+    const maxPreviewLength = 100;
+
+    $: truncatedContent =
+        content.length > maxPreviewLength ? content.slice(0, maxPreviewLength) + "..." : content;
+
+    $: formattedDuration = duration > 0 ? `${(duration / 1000).toFixed(1)}s` : "";
+
+    onMount(() => {
+        if (indicatorElement) {
+            gsap.fromTo(
+                indicatorElement,
+                { opacity: 0, y: -5 },
+                { opacity: 1, y: 0, duration: 0.3, ease: "power2.out" },
+            );
+        }
+    });
+</script>
+
+<div class="streaming-indicator" bind:this={indicatorElement}>
+    <div class="indicator-header">
+        <span class="status-icon">
+            {#if status === "thinking"}
+                <span class="thinking-icon">🤔</span>
+            {:else}
+                <span class="streaming-icon">✍️</span>
+            {/if}
+        </span>
+        <span class="status-text">
+            {#if status === "thinking"}
+                Thinking<span class="dots"></span>
+            {:else}
+                Responding<span class="dots"></span>
+            {/if}
+        </span>
+        {#if formattedDuration}
+            <span class="duration">{formattedDuration}</span>
+        {/if}
+    </div>
+
+    {#if truncatedContent}
+        <div class="preview-content">
+            {truncatedContent}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .streaming-indicator {
+        background: rgba(65, 105, 225, 0.08);
+        border: 1px solid rgba(65, 105, 225, 0.2);
+        border-radius: 4px;
+        padding: 0.5rem 0.75rem;
+        margin: 0.25rem 0;
+        font-size: 0.875rem;
+    }
+
+    .indicator-header {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        color: rgba(255, 255, 255, 0.7);
+    }
+
+    .status-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.2rem;
+        height: 1.2rem;
+    }
+
+    .thinking-icon {
+        animation: pulse 1.5s ease-in-out infinite;
+    }
+
+    .streaming-icon {
+        animation: write 1s ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+        0%,
+        100% {
+            transform: scale(1);
+            opacity: 0.8;
+        }
+        50% {
+            transform: scale(1.1);
+            opacity: 1;
+        }
+    }
+
+    @keyframes write {
+        0%,
+        100% {
+            transform: translateX(0);
+        }
+        25% {
+            transform: translateX(-1px);
+        }
+        75% {
+            transform: translateX(1px);
+        }
+    }
+
+    .status-text {
+        flex: 1;
+    }
+
+    .dots::after {
+        content: "";
+        animation: dots 1.5s steps(4, end) infinite;
+    }
+
+    @keyframes dots {
+        0%,
+        20% {
+            content: "";
+        }
+        40% {
+            content: ".";
+        }
+        60% {
+            content: "..";
+        }
+        80%,
+        100% {
+            content: "...";
+        }
+    }
+
+    .duration {
+        color: rgba(255, 255, 255, 0.4);
+        font-size: 0.75rem;
+        font-family: "Monaco", "Menlo", monospace;
+    }
+
+    .preview-content {
+        margin-top: 0.5rem;
+        padding-top: 0.5rem;
+        border-top: 1px solid rgba(255, 255, 255, 0.05);
+        color: rgba(255, 255, 255, 0.6);
+        font-family: "Monaco", "Menlo", monospace;
+        font-size: 0.8rem;
+        line-height: 1.4;
+        word-break: break-word;
+    }
+</style>

src/lib/components/chat/ToolCallBlock.svelte

@@ -0,0 +1,373 @@
+<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/context.md

@@ -7,13 +7,14 @@ AI chat interface with markdown rendering and tool visualization.
 - `ChatPanel.svelte` - Main chat UI with message display
 - `ReasoningBlock.svelte` - Collapsible AI thinking viewer
 - `MarkdownRenderer.svelte` - Markdown parser and renderer
-- `ToolCallDisplay.svelte` - Visual badges for tool calls
+- `ToolCallDisplay.svelte` - Inline badges for [TOOL:] patterns
+- `ToolCallBlock.svelte` - Expandable tool execution tracker
 
 ## Features
 
 - Real-time message streaming
 - Markdown formatting for assistant messages
-- Tool call visualization with icons
+- Expandable tool execution tracking with status
 - Collapsible thinking blocks (0.1s collapse)
 - Authentication integration
 - GSAP animations

src/lib/server/api.ts

@@ -3,6 +3,7 @@ import type { WebSocket } from "ws";
 import { LangGraphAgent } from "./langgraph-agent";
 import { HumanMessage, AIMessage, BaseMessage } from "@langchain/core/messages";
 import { updateEditorContent } from "./tools";
+import { consoleBuffer } from "./console-buffer";
 
 export interface WebSocketMessage {
   type:
@@ -13,7 +14,8 @@ export interface WebSocketMessage {
     | "auth"
     | "editor_update"
     | "editor_sync"
-    | "tool_execution";
+    | "tool_execution"
+    | "console_sync";
   payload: {
     content?: string;
     role?: string;
@@ -26,6 +28,8 @@ export interface WebSocketMessage {
     toolName?: string;
     toolArgs?: Record<string, unknown>;
     toolResult?: string;
+    id?: string;
+    type?: string;
   };
   timestamp: number;
 }
@@ -101,6 +105,21 @@ class WebSocketManager {
         }
         break;
 
+      case "console_sync":
+        if (
+          message.payload.id &&
+          message.payload.type &&
+          message.payload.message
+        ) {
+          consoleBuffer.addMessage({
+            id: message.payload.id,
+            type: message.payload.type as "log" | "warn" | "error" | "info",
+            message: message.payload.message,
+            timestamp: message.timestamp,
+          });
+        }
+        break;
+
       case "chat":
         try {
           if (!connectionData?.agent) {

src/lib/server/console-buffer.ts

@@ -0,0 +1,91 @@
+export interface ConsoleBufferMessage {
+  id: string;
+  type: "log" | "warn" | "error" | "info";
+  message: string;
+  timestamp: number;
+}
+
+export class ConsoleBuffer {
+  private static instance: ConsoleBuffer | null = null;
+  private messages: ConsoleBufferMessage[] = [];
+  private maxMessages = 100;
+  private lastReadTimestamp = 0;
+
+  private constructor() {}
+
+  static getInstance(): ConsoleBuffer {
+    if (!ConsoleBuffer.instance) {
+      ConsoleBuffer.instance = new ConsoleBuffer();
+    }
+    return ConsoleBuffer.instance;
+  }
+
+  addMessage(message: ConsoleBufferMessage): void {
+    this.messages.push(message);
+
+    if (this.messages.length > this.maxMessages) {
+      this.messages = this.messages.slice(-this.maxMessages);
+    }
+  }
+
+  getRecentMessages(since?: number): ConsoleBufferMessage[] {
+    const sinceTimestamp = since || this.lastReadTimestamp;
+    return this.messages.filter((msg) => msg.timestamp > sinceTimestamp);
+  }
+
+  getAllMessages(): ConsoleBufferMessage[] {
+    return [...this.messages];
+  }
+
+  markAsRead(): void {
+    if (this.messages.length > 0) {
+      this.lastReadTimestamp =
+        this.messages[this.messages.length - 1].timestamp;
+    }
+  }
+
+  clear(): void {
+    this.messages = [];
+    this.lastReadTimestamp = Date.now();
+  }
+
+  getGameStateFromMessages(): {
+    isLoading: boolean;
+    hasError: boolean;
+    lastError?: string;
+    isReady: boolean;
+  } {
+    const recentMessages = this.getRecentMessages(Date.now() - 3000);
+
+    const hasStartMessage = recentMessages.some(
+      (msg) =>
+        msg.message.includes("🎮 Starting game") ||
+        msg.message.includes("Starting game"),
+    );
+
+    const hasSuccessMessage = recentMessages.some(
+      (msg) =>
+        msg.message.includes("✅ Game started") ||
+        msg.message.includes("Game started!"),
+    );
+
+    const errorMessages = recentMessages.filter(
+      (msg) => msg.type === "error" || msg.message.includes("❌ Error"),
+    );
+
+    const lastError =
+      errorMessages.length > 0
+        ? errorMessages[errorMessages.length - 1].message
+        : undefined;
+
+    return {
+      isLoading:
+        hasStartMessage && !hasSuccessMessage && errorMessages.length === 0,
+      hasError: errorMessages.length > 0,
+      lastError,
+      isReady: hasSuccessMessage,
+    };
+  }
+}
+
+export const consoleBuffer = ConsoleBuffer.getInstance();

src/lib/server/context.md

@@ -4,19 +4,21 @@ WebSocket server with React Agent pattern for AI-assisted game development.
 
 ## Key Components
 
-- **api.ts** - WebSocket routing with editor sync and tool feedback
+- **api.ts** - WebSocket routing with editor sync, console forwarding, and tool feedback
 - **langgraph-agent.ts** - React Agent with conditional loops for tool execution
-- **tools.ts** - Editor read/write with WebSocket-based state sync
+- **tools.ts** - Editor read/write with game reload feedback, console observation
+- **console-buffer.ts** - Server-side console message storage and game state tracking
 - **documentation.ts** - VibeGame documentation loader
 - **prompts.ts** - Documentation formatting utilities
 
 ## Architecture
 
 React Agent pattern with conditional execution flow:
+
 - Agent node processes messages and executes tools
-- Conditional edges loop back after tool execution
-- Tool results feed back into agent for final response
-- Real-time tool execution feedback via WebSocket
+- Tool results include console feedback from game reload
+- Console messages forwarded from client to server buffer
+- Write operations wait for game state before returning
 
 ## Message Types
 
@@ -24,6 +26,10 @@ React Agent pattern with conditional execution flow:
 - `chat` - User messages
 - `editor_sync` - Sync editor content with server
 - `editor_update` - Server updates client editor
-- `tool_execution` - Tool execution notifications
+- `console_sync` - Forward console messages to server
+- `tool_start` - Tool begins execution with status
+- `tool_output` - Streaming tool output chunks
+- `tool_complete` - Tool execution completed
+- `tool_error` - Tool execution failed
 - `stream` - Response streaming
 - `status` - Connection and processing status

src/lib/server/langgraph-agent.ts

@@ -9,6 +9,7 @@ import {
 import {
   readEditorTool,
   writeEditorTool,
+  observeConsoleTool,
   setWebSocketConnection,
 } from "./tools";
 import { documentationService } from "./documentation";
@@ -27,7 +28,7 @@ const AgentState = Annotation.Root({
 export class LangGraphAgent {
   private client: InferenceClient | null = null;
   private graph!: ReturnType<typeof StateGraph.prototype.compile>;
-  private model: string = "Qwen/Qwen2.5-Coder-32B-Instruct";
+  private model: string = "Qwen/Qwen3-Next-80B-A3B-Instruct";
   private documentation: string = "";
   private ws: WebSocket | null = null;
 
@@ -122,7 +123,8 @@ ${this.documentation}
 
 AVAILABLE TOOLS:
 - read_editor: Read the current code in the editor
-- write_editor: Write new code to 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:
@@ -133,6 +135,7 @@ or with parameters:
 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
@@ -191,12 +194,23 @@ Be concise, accurate, and focus on practical solutions.`;
     response: string,
   ): Array<{ name: string; args: Record<string, unknown> }> {
     const toolCalls = [];
-    const toolRegex = /\[TOOL:\s*(\w+)(?:\s+({[^}]+}))?\]/g;
+    const toolRegex = /\[TOOL:\s*(\w+)(?:\s+({.*?}))?\]/gs;
     let match;
 
     while ((match = toolRegex.exec(response)) !== null) {
       const toolName = match[1];
-      const params = match[2] ? JSON.parse(match[2]) : {};
+      let params = {};
+
+      if (match[2]) {
+        try {
+          params = JSON.parse(match[2]);
+        } catch {
+          console.error(
+            `Failed to parse tool parameters for ${toolName}: ${match[2]}`,
+          );
+          params = {};
+        }
+      }
 
       toolCalls.push({
         name: toolName,
@@ -213,15 +227,18 @@ Be concise, accurate, and focus on practical solutions.`;
     const results = [];
 
     for (const call of toolCalls) {
+      const toolId = `${call.name}_${Date.now()}`;
+
       try {
         if (this.ws && this.ws.readyState === this.ws.OPEN) {
           this.ws.send(
             JSON.stringify({
-              type: "tool_execution",
+              type: "tool_start",
               payload: {
+                toolId,
                 toolName: call.name,
                 toolArgs: call.args,
-                message: `Executing ${call.name}...`,
+                toolStatus: "running",
               },
               timestamp: Date.now(),
             }),
@@ -233,6 +250,26 @@ Be concise, accurate, and focus on practical solutions.`;
           result = await readEditorTool.func("");
         } else if (call.name === "write_editor") {
           result = await writeEditorTool.func(call.args as { content: string });
+
+          const consoleMatch = result.match(/Console output:\n([\s\S]*?)$/);
+          if (consoleMatch && this.ws && this.ws.readyState === this.ws.OPEN) {
+            const consoleLines = consoleMatch[1]
+              .split("\n")
+              .filter((line) => line.trim());
+            this.ws.send(
+              JSON.stringify({
+                type: "tool_output",
+                payload: {
+                  toolId,
+                  toolOutput: "",
+                  consoleOutput: consoleLines,
+                },
+                timestamp: Date.now(),
+              }),
+            );
+          }
+        } else if (call.name === "observe_console") {
+          result = await observeConsoleTool.func("");
         } else {
           result = `Unknown tool: ${call.name}`;
         }
@@ -240,11 +277,12 @@ Be concise, accurate, and focus on practical solutions.`;
         if (this.ws && this.ws.readyState === this.ws.OPEN) {
           this.ws.send(
             JSON.stringify({
-              type: "tool_execution",
+              type: "tool_complete",
               payload: {
+                toolId,
                 toolName: call.name,
                 toolResult: result,
-                message: `${call.name} completed`,
+                toolStatus: "completed",
               },
               timestamp: Date.now(),
             }),
@@ -254,15 +292,30 @@ Be concise, accurate, and focus on practical solutions.`;
         results.push(
           new ToolMessage({
             content: result,
-            tool_call_id: `${call.name}_${Date.now()}`,
+            tool_call_id: toolId,
             name: call.name,
           }),
         );
       } catch (error) {
+        if (this.ws && this.ws.readyState === this.ws.OPEN) {
+          this.ws.send(
+            JSON.stringify({
+              type: "tool_error",
+              payload: {
+                toolId,
+                toolName: call.name,
+                error: error instanceof Error ? error.message : String(error),
+                toolStatus: "error",
+              },
+              timestamp: Date.now(),
+            }),
+          );
+        }
+
         results.push(
           new ToolMessage({
             content: `Error executing ${call.name}: ${error}`,
-            tool_call_id: `${call.name}_${Date.now()}`,
+            tool_call_id: toolId,
             name: call.name,
           }),
         );

src/lib/server/tools.ts

@@ -1,5 +1,6 @@
 import { DynamicStructuredTool, DynamicTool } from "@langchain/core/tools";
 import { z } from "zod";
+import { consoleBuffer } from "./console-buffer";
 
 let currentEditorContent = `<canvas id="game-canvas"></canvas>
 
@@ -41,13 +42,15 @@ export const readEditorTool = new DynamicTool({
 
 export const writeEditorTool = new DynamicStructuredTool({
   name: "write_editor",
-  description: "Write new code to the editor",
+  description: "Write new code to the editor and wait for game to reload",
   schema: z.object({
     content: z.string().describe("The code content to write to the editor"),
   }),
   func: async (input: { content: string }) => {
     currentEditorContent = input.content;
 
+    consoleBuffer.clear();
+
     if (wsConnection) {
       wsConnection.send({
         type: "editor_update",
@@ -55,8 +58,61 @@ export const writeEditorTool = new DynamicStructuredTool({
       });
     }
 
-    return "Code updated successfully in the editor";
+    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 `Code updated 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 `Code updated 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 `Code updated. Game reload status uncertain (timeout).\nConsole output:\n${messages.map((m) => `[${m.type}] ${m.message}`).join("\n")}`;
+  },
+});
+
+export const observeConsoleTool = new DynamicTool({
+  name: "observe_console",
+  description: "Read recent console messages from the game",
+  func: async () => {
+    const messages = consoleBuffer.getRecentMessages();
+    const gameState = consoleBuffer.getGameStateFromMessages();
+
+    consoleBuffer.markAsRead();
+
+    if (messages.length === 0) {
+      return "No new console messages.";
+    }
+
+    let output = "Console Messages:\n";
+    output += messages.map((msg) => `[${msg.type}] ${msg.message}`).join("\n");
+
+    output += "\n\nGame State:";
+    output += `\n- Loading: ${gameState.isLoading}`;
+    output += `\n- Ready: ${gameState.isReady}`;
+    output += `\n- Has Error: ${gameState.hasError}`;
+    if (gameState.lastError) {
+      output += `\n- Last Error: ${gameState.lastError}`;
+    }
+
+    return output;
   },
 });
 
-export const tools = [readEditorTool, writeEditorTool];
+export const tools = [readEditorTool, writeEditorTool, observeConsoleTool];

src/lib/services/console-forward.ts

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

src/lib/services/context.md

@@ -16,6 +16,7 @@ services/
 ├── auth.ts             # Hugging Face OAuth authentication
 ├── game-engine.ts      # Game lifecycle management
 ├── console-capture.ts  # Console interception
+├── console-forward.ts  # WebSocket console forwarding
 └── html-parser.ts      # Game HTML parsing
 ```
 
@@ -33,6 +34,8 @@ services/
 - `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.stop()` - Stop console forwarding
 - `HTMLParser.extractGameContent()` - Parse world from HTML
 
 ## Dependencies

src/lib/stores/agent.ts

@@ -2,14 +2,28 @@ 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;
+}
+
 export interface ChatMessage {
   id: string;
-  role: "user" | "assistant" | "system";
+  role: "user" | "assistant" | "system" | "tool";
   content: string;
   timestamp: number;
   streaming?: boolean;
   reasoning?: string;
   showReasoning?: boolean;
+  toolExecutions?: ToolExecution[];
 }
 
 export interface AgentState {
@@ -18,6 +32,8 @@ export interface AgentState {
   messages: ChatMessage[];
   error: string | null;
   streamingContent: string;
+  streamingStatus: "idle" | "thinking" | "streaming" | "completing";
+  thinkingStartTime: number | null;
 }
 
 function createAgentStore() {
@@ -27,6 +43,8 @@ function createAgentStore() {
     messages: [],
     error: null,
     streamingContent: "",
+    streamingStatus: "idle",
+    thinkingStartTime: null,
   });
 
   let ws: WebSocket | null = null;
@@ -121,14 +139,21 @@ function createAgentStore() {
       toolArgs?: Record<string, unknown>;
       toolResult?: string;
       message?: string;
+      toolId?: string;
+      toolStatus?: "pending" | "running" | "completed" | "error";
+      toolOutput?: string;
+      consoleOutput?: string[];
     };
   }) {
     switch (message.type) {
       case "status":
         if (message.payload.processing !== undefined) {
+          const isProcessing = message.payload.processing as boolean;
           update((state) => ({
             ...state,
-            processing: message.payload.processing as boolean,
+            processing: isProcessing,
+            streamingStatus: isProcessing ? "thinking" : "idle",
+            thinkingStartTime: isProcessing ? Date.now() : null,
           }));
         }
         if (message.payload.connected !== undefined) {
@@ -158,6 +183,7 @@ function createAgentStore() {
               ...state,
               streamingContent: newContent,
               messages: [...state.messages, streamMessage],
+              streamingStatus: "streaming",
             };
           } else {
             const messages = state.messages.map((msg) => {
@@ -174,6 +200,7 @@ function createAgentStore() {
               ...state,
               streamingContent: newContent,
               messages,
+              streamingStatus: "streaming",
             };
           }
         });
@@ -193,6 +220,8 @@ function createAgentStore() {
               ...state,
               streamingContent: "",
               messages,
+              streamingStatus: "idle",
+              thinkingStartTime: null,
             };
           } else {
             if (message.payload.role && message.payload.content) {
@@ -217,6 +246,8 @@ function createAgentStore() {
           ...state,
           error: message.payload.error || null,
           processing: false,
+          streamingStatus: "idle",
+          thinkingStartTime: null,
         }));
         break;
 
@@ -226,23 +257,121 @@ function createAgentStore() {
         }
         break;
 
-      case "tool_execution":
+      case "tool_start":
         update((state) => {
-          const toolMessage: ChatMessage = {
-            id: `tool_${Date.now()}`,
-            role: "system",
-            content: `🔧 ${message.payload.toolName}: ${message.payload.message || "Executing..."}`,
-            timestamp: Date.now(),
+          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,
           };
 
-          if (message.payload.toolResult) {
-            toolMessage.content = `🔧 ${message.payload.toolName} completed`;
+          let toolMessage = state.messages.find(
+            (msg) =>
+              msg.role === "tool" && msg.id === `tools_${currentStreamId}`,
+          );
+
+          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;
+            });
+            return { ...state, messages };
           }
+        });
+        break;
 
-          return {
-            ...state,
-            messages: [...state.messages, toolMessage],
-          };
+      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 { ...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 };
+            }
+            return msg;
+          });
+          return { ...state, messages };
         });
         break;
     }
@@ -276,12 +405,20 @@ function createAgentStore() {
     );
   }
 
+  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;
   }
@@ -313,6 +450,7 @@ function createAgentStore() {
     connect,
     disconnect,
     sendMessage,
+    sendRawMessage,
     clearMessages,
     reauthenticate,
   };