improve chat

src/lib/components/chat/ChatPanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { onMount, onDestroy, afterUpdate } from "svelte";
+    import { fade } from "svelte/transition";
     import { agentStore, isConnected, isProcessing } from "../../stores/agent";
     import { authStore } from "../../services/auth";
     import gsap from "gsap";
@@ -8,6 +9,7 @@
     import ToolCallDisplay from "./ToolCallDisplay.svelte";
     import ToolCallBlock from "./ToolCallBlock.svelte";
     import InProgressBlock from "./InProgressBlock.svelte";
+    import MessageSegment from "./MessageSegment.svelte";
 
     let inputValue = "";
     let messagesContainer: HTMLDivElement;
@@ -92,12 +94,59 @@
         });
     }
 
+    let autoScroll = true;
+    let isUserScrolling = false;
+    let scrollAnimation: gsap.core.Tween | null = null;
+
     afterUpdate(() => {
-        if (messagesContainer) {
-            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+        if (messagesContainer && autoScroll) {
+            setTimeout(() => smoothScrollToBottom(), 100);
         }
     });
 
+    function smoothScrollToBottom() {
+        if (!messagesContainer || isUserScrolling) return;
+
+        if (scrollAnimation) {
+            scrollAnimation.kill();
+        }
+
+        const targetScroll = messagesContainer.scrollHeight - messagesContainer.clientHeight;
+        const currentScroll = messagesContainer.scrollTop;
+        const distance = Math.abs(targetScroll - currentScroll);
+        const duration = Math.min(0.5, distance / 1000);
+
+        scrollAnimation = gsap.to(messagesContainer, {
+            scrollTop: targetScroll,
+            duration: duration,
+            ease: "power2.out",
+            onComplete: () => {
+                scrollAnimation = null;
+            }
+        });
+    }
+
+    function handleScroll() {
+        if (!messagesContainer) return;
+
+        const isNearBottom =
+            messagesContainer.scrollHeight - messagesContainer.scrollTop - messagesContainer.clientHeight < 100;
+
+        autoScroll = isNearBottom;
+
+        if (!autoScroll && !isUserScrolling) {
+            isUserScrolling = true;
+        } else if (autoScroll) {
+            isUserScrolling = false;
+        }
+    }
+
+    function scrollToBottom() {
+        autoScroll = true;
+        isUserScrolling = false;
+        smoothScrollToBottom();
+    }
+
     function handleSubmit() {
         if (inputValue.trim() && $authStore.isAuthenticated && $isConnected && !$isProcessing) {
             if (sendButton) {
@@ -187,7 +236,20 @@
 </script>
 
 <div class="chat-panel">
-    <div class="messages" bind:this={messagesContainer}>
+    {#if isUserScrolling}
+        <button
+            class="scroll-to-bottom"
+            on:click={scrollToBottom}
+            title="Scroll to bottom"
+            transition:fade={{ duration: 200 }}
+        >
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M10 14L5 9L6.41 7.59L10 11.17L13.59 7.59L15 9L10 14Z" />
+            </svg>
+        </button>
+    {/if}
+
+    <div class="messages" bind:this={messagesContainer} on:scroll={handleScroll}>
         {#if !$authStore.isAuthenticated && !$authStore.loading}
             <div class="auth-prompt">
                 <p>Sign in to chat.</p>
@@ -200,16 +262,7 @@
                 <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}
+            {#each $agentStore.messages as message (message.id)}
                 {#if message.role === "tool" && message.toolExecutions}
                     <ToolCallBlock toolExecutions={message.toolExecutions} />
                 {:else}
@@ -217,26 +270,41 @@
                         {#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}
+                        {#if message.segments && message.segments.length > 0}
+                            <div class="message-segments">
+                                {#each message.segments as segment (segment.id)}
+                                    <MessageSegment {segment} />
                                 {/each}
-                                {#if message.streaming}
-                                    <span class="cursor">▊</span>
+                            </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}
-                            {:else}
-                                {message.content.trim()}
-                            {/if}
-                        </div>
+                            </div>
+                        {/if}
                     </div>
                 {/if}
             {/each}
+
+            {#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}
+
             {#if $agentStore.error}
                 <div class="error-message">
                     Error: {$agentStore.error}
@@ -284,6 +352,36 @@
         width: 100%;
         background: rgba(20, 20, 20, 0.5);
         border-top: 1px solid rgba(255, 255, 255, 0.1);
+        position: relative;
+    }
+
+    .scroll-to-bottom {
+        position: absolute;
+        bottom: 4.5rem;
+        right: 1rem;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        background: rgba(65, 105, 225, 0.2);
+        border: 1px solid rgba(65, 105, 225, 0.3);
+        color: rgba(65, 105, 225, 0.9);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        z-index: 10;
+        transition: all 0.2s ease;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    }
+
+    .scroll-to-bottom:hover {
+        background: rgba(65, 105, 225, 0.3);
+        border-color: rgba(65, 105, 225, 0.5);
+        transform: scale(1.1);
+    }
+
+    .scroll-to-bottom:active {
+        transform: scale(0.95);
     }
 
     .messages {
@@ -332,6 +430,11 @@
         display: block;
     }
 
+    .message-segments {
+        display: flex;
+        flex-direction: column;
+    }
+
     .message.user .message-content {
         color: rgba(255, 255, 255, 0.9);
         line-height: 1.5;
@@ -339,21 +442,6 @@
         word-wrap: break-word;
     }
 
-    .cursor {
-        animation: blink 1s infinite;
-    }
-
-    @keyframes blink {
-        0%,
-        50% {
-            opacity: 1;
-        }
-        51%,
-        100% {
-            opacity: 0;
-        }
-    }
-
     .error-message {
         background: rgba(244, 67, 54, 0.1);
         border-left: 2px solid #f44336;

src/lib/components/chat/InProgressBlock.svelte

@@ -11,11 +11,20 @@
     let blockElement: HTMLDivElement;
     let contentElement: HTMLDivElement;
     let expandIcon: HTMLSpanElement;
+    let statusElement: HTMLSpanElement;
+    let progressBar: HTMLDivElement;
     let collapseTimeout: number | null = null;
+    let prevStatus: string = status;
+    let timeline: gsap.core.Timeline | null = null;
 
     $: duration = Date.now() - startTime;
     $: formattedDuration = formatDuration(duration);
 
+    $: if (status !== prevStatus && statusElement) {
+        animateStatusTransition(prevStatus, status);
+        prevStatus = status;
+    }
+
     function formatDuration(ms: number): string {
         if (ms < 1000) return `${ms}ms`;
         return `${(ms / 1000).toFixed(1)}s`;
@@ -29,38 +38,92 @@
     function updateExpandState() {
         if (!expandIcon || !contentElement) return;
 
-        if (isExpanded) {
-            gsap.to(expandIcon, {
-                rotation: 90,
-                duration: 0.2,
-                ease: "power2.out",
-            });
+        if (timeline) timeline.kill();
+        timeline = gsap.timeline();
 
-            gsap.set(contentElement, { display: "block" });
-            gsap.fromTo(
-                contentElement,
-                { opacity: 0, maxHeight: 0 },
-                { opacity: 1, maxHeight: 500, duration: 0.3, ease: "power2.out" },
-            );
+        if (isExpanded) {
+            timeline
+                .to(expandIcon, {
+                    rotation: 90,
+                    duration: 0.2,
+                    ease: "power2.out",
+                })
+                .set(contentElement, { display: "block" })
+                .fromTo(
+                    contentElement,
+                    { opacity: 0, maxHeight: 0, y: -10 },
+                    { opacity: 1, maxHeight: 500, y: 0, duration: 0.3, ease: "power2.out" },
+                    "-=0.1"
+                );
         } 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" });
-                },
-            });
+            timeline
+                .to(expandIcon, {
+                    rotation: 0,
+                    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" });
+                    },
+                }, "-=0.1");
+        }
+    }
+
+    function animateStatusTransition(_from: string, to: string) {
+        if (!statusElement || !blockElement) return;
+
+        const tl = gsap.timeline();
+
+        tl.to(blockElement, {
+            duration: 0.4,
+            ease: "power2.inOut",
+            onUpdate: function() {
+                updateBlockStyle(to);
+            }
+        });
+
+        tl.to(statusElement, {
+            scale: 0.9,
+            opacity: 0,
+            duration: 0.15,
+            ease: "power2.in",
+            onComplete: () => {}
+        })
+        .to(statusElement, {
+            scale: 1,
+            opacity: 1,
+            duration: 0.15,
+            ease: "power2.out"
+        });
+
+        if (progressBar) {
+            if (to === "streaming") {
+                gsap.to(progressBar, {
+                    width: "60%",
+                    duration: 1,
+                    ease: "power2.out"
+                });
+            } else if (to === "completing") {
+                gsap.to(progressBar, {
+                    width: "90%",
+                    duration: 0.5,
+                    ease: "power2.out"
+                });
+            }
         }
     }
 
+    function updateBlockStyle(status: string) {
+        if (!blockElement) return;
+        blockElement.className = `in-progress-block ${status}`;
+    }
+
     function getStatusIcon() {
         switch (status) {
             case "thinking":
@@ -99,8 +162,15 @@
         if (blockElement) {
             gsap.fromTo(
                 blockElement,
-                { opacity: 0, y: -10 },
-                { opacity: 1, y: 0, duration: 0.3, ease: "power2.out" },
+                { opacity: 0, y: -10, scale: 0.95 },
+                { opacity: 1, y: 0, scale: 1, duration: 0.4, ease: "back.out(1.2)" },
+            );
+        }
+
+        if (progressBar) {
+            gsap.fromTo(progressBar,
+                { width: "0%" },
+                { width: "30%", duration: 0.5, ease: "power2.out" }
             );
         }
 
@@ -113,10 +183,15 @@
 
     onDestroy(() => {
         if (collapseTimeout) clearTimeout(collapseTimeout);
+        if (timeline) timeline.kill();
     });
 </script>
 
 <div class="in-progress-block {status}" bind:this={blockElement}>
+    <div class="progress-bar-track">
+        <div bind:this={progressBar} class="progress-bar"></div>
+    </div>
+
     <button class="progress-header" on:click={toggleExpanded} aria-expanded={isExpanded}>
         <span class="status-icon">
             {#if status === "streaming"}
@@ -128,7 +203,7 @@
             {/if}
         </span>
 
-        <span class="status-text">
+        <span bind:this={statusElement} class="status-text">
             {getStatusText()}<span class="dots"></span>
         </span>
 
@@ -162,6 +237,7 @@
         border: 1px solid rgba(255, 210, 30, 0.2);
         background: rgba(255, 210, 30, 0.05);
         transition: all 0.2s ease;
+        position: relative;
     }
 
     .in-progress-block.thinking {
@@ -179,6 +255,41 @@
         background: rgba(0, 255, 0, 0.05);
     }
 
+    .progress-bar-track {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: rgba(255, 255, 255, 0.05);
+        overflow: hidden;
+    }
+
+    .progress-bar {
+        height: 100%;
+        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%);
+        box-shadow: 0 0 10px rgba(65, 105, 225, 0.4);
+        transition: width 0.3s ease;
+    }
+
+    .in-progress-block.thinking .progress-bar {
+        background: rgba(255, 210, 30, 0.6);
+        box-shadow: 0 0 10px rgba(255, 210, 30, 0.4);
+    }
+
+    .in-progress-block.streaming .progress-bar {
+        background: rgba(65, 105, 225, 0.6);
+        box-shadow: 0 0 10px rgba(65, 105, 225, 0.4);
+    }
+
+    .in-progress-block.completing .progress-bar {
+        background: rgba(0, 255, 0, 0.6);
+        box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
+    }
+
     .progress-header {
         display: flex;
         align-items: center;

src/lib/components/chat/MarkdownRenderer.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
     import { marked } from "marked";
+    import StreamingText from "./StreamingText.svelte";
 
     export let content: string;
     export let streaming: boolean = false;
 
     let htmlContent = "";
+    let useStreamingText = false;
 
     const renderer = new marked.Renderer();
-    
+
     renderer.code = ({ text, lang }) => {
         const language = lang || "text";
         return `<pre><code class="language-${language}">${escapeHtml(text)}</code></pre>`;
@@ -31,21 +33,33 @@
         gfm: true,
     });
 
-    $: if (content) {
-        try {
-            htmlContent = marked.parse(content) as string;
-        } catch {
-            htmlContent = escapeHtml(content);
+    $: {
+        if (streaming && content) {
+            useStreamingText = true;
+            htmlContent = "";
+        } else if (content) {
+            useStreamingText = false;
+            try {
+                htmlContent = marked.parse(content) as string;
+            } catch {
+                htmlContent = escapeHtml(content);
+            }
         }
     }
 </script>
 
-<div class="markdown-content">
-    {@html htmlContent}
-    {#if streaming}
-        <span class="cursor">▊</span>
-    {/if}
-</div>
+{#if useStreamingText}
+    <div class="markdown-content">
+        <StreamingText {content} {streaming} speed={120} />
+    </div>
+{:else}
+    <div class="markdown-content">
+        {@html htmlContent}
+        {#if streaming}
+            <span class="cursor">▊</span>
+        {/if}
+    </div>
+{/if}
 
 <style>
     .markdown-content {

src/lib/components/chat/MessageSegment.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+    import type { MessageSegment } from "../../stores/agent";
+    import MarkdownRenderer from "./MarkdownRenderer.svelte";
+    import ToolInvocation from "./ToolInvocation.svelte";
+
+    export let segment: MessageSegment;
+    export let hideToolResult: boolean = false;
+</script>
+
+{#if segment.type === "text"}
+    {#if segment.content.trim()}
+        <div class="text-segment">
+            <MarkdownRenderer content={segment.content} streaming={segment.streaming} />
+        </div>
+    {/if}
+{:else if segment.type === "tool-invocation"}
+    <ToolInvocation {segment} />
+{:else if segment.type === "tool-result"}
+    {#if !hideToolResult}
+        <ToolInvocation {segment} />
+    {/if}
+{:else if segment.type === "reasoning"}
+    <div class="reasoning-segment">
+        <details class="reasoning-details">
+            <summary>Thinking...</summary>
+            <div class="reasoning-content">
+                {segment.content}
+            </div>
+        </details>
+    </div>
+{/if}
+
+<style>
+    .text-segment {
+        margin: 0.25rem 0;
+    }
+
+    .reasoning-segment {
+        margin: 0.25rem 0;
+        padding: 0.4rem 0.6rem;
+        background: rgba(255, 255, 255, 0.02);
+        border-radius: 3px;
+        border-left: 2px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .reasoning-details {
+        cursor: pointer;
+    }
+
+    .reasoning-details summary {
+        color: rgba(255, 255, 255, 0.5);
+        font-size: 0.8rem;
+        user-select: none;
+    }
+
+    .reasoning-details summary:hover {
+        color: rgba(255, 255, 255, 0.7);
+    }
+
+    .reasoning-content {
+        margin-top: 0.5rem;
+        padding: 0.5rem;
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 3px;
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 0.825rem;
+        font-family: "Monaco", "Menlo", monospace;
+        white-space: pre-wrap;
+    }
+</style>

src/lib/components/chat/ReasoningBlock.svelte

@@ -1,30 +1,48 @@
 <script lang="ts">
-    import { onMount } from "svelte";
+    import { onMount, onDestroy } from "svelte";
     import gsap from "gsap";
-    
+
     export let reasoning: string;
     export let isExpanded = false;
-    
+    export let autoCollapse = true;
+    export let responseComplete = false;
+
     let iconElement: HTMLSpanElement;
     let contentElement: HTMLDivElement;
-    
+    let blockElement: HTMLDivElement;
+    let collapseTimeout: number | null = null;
+
+    $: if (responseComplete && autoCollapse && isExpanded) {
+        if (collapseTimeout) clearTimeout(collapseTimeout);
+        collapseTimeout = window.setTimeout(() => {
+            isExpanded = false;
+            animateCollapse();
+        }, 800);
+    }
+
     function toggleExpanded() {
         isExpanded = !isExpanded;
-        
+
         if (!iconElement || !contentElement) return;
-        
+
         if (isExpanded) {
-            gsap.to(iconElement, {
+            animateExpand();
+        } else {
+            animateCollapse();
+        }
+    }
+
+    function animateExpand() {
+        if (!iconElement || !contentElement) return;
+
+        gsap.timeline()
+            .to(iconElement, {
                 rotation: 180,
                 duration: 0.15,
                 ease: "power2.out"
-            });
-            
-            gsap.set(contentElement, { 
-                display: 'block'
-            });
-            
-            gsap.fromTo(contentElement, {
+            })
+            .set(contentElement, { display: 'block' }, 0)
+            .fromTo(contentElement, {
                 opacity: 0,
                 maxHeight: 0,
                 y: -10
@@ -34,16 +52,19 @@
                 y: 0,
                 duration: 0.2,
                 ease: "power2.out"
-            });
-            
-        } else {
-            gsap.to(iconElement, {
+            }, 0);
+    }
+
+    function animateCollapse() {
+        if (!iconElement || !contentElement) return;
+
+        gsap.timeline()
+            .to(iconElement, {
                 rotation: 0,
                 duration: 0.1,
                 ease: "power2.in"
-            });
-            
-            gsap.to(contentElement, {
+            })
+            .to(contentElement, {
                 opacity: 0,
                 maxHeight: 0,
                 y: -5,
@@ -52,10 +73,19 @@
                 onComplete: () => {
                     gsap.set(contentElement, { display: 'none' });
                 }
+            }, 0)
+            .to(blockElement, {
+                scale: 0.98,
+                duration: 0.1,
+                ease: "power2.in"
+            }, 0)
+            .to(blockElement, {
+                scale: 1,
+                duration: 0.2,
+                ease: "back.out(1.5)"
             });
-        }
     }
-    
+
     onMount(() => {
         if (iconElement) {
             gsap.set(iconElement, {
@@ -63,7 +93,7 @@
                 rotation: isExpanded ? 180 : 0
             });
         }
-        
+
         if (contentElement) {
             gsap.set(contentElement, {
                 display: isExpanded ? 'block' : 'none',
@@ -72,11 +102,28 @@
                 y: isExpanded ? 0 : -10
             });
         }
+
+        if (blockElement) {
+            gsap.fromTo(blockElement,
+                { opacity: 0, scale: 0.95, y: -5 },
+                {
+                    opacity: 1,
+                    scale: 1,
+                    y: 0,
+                    duration: 0.3,
+                    ease: "power2.out"
+                }
+            );
+        }
+    });
+
+    onDestroy(() => {
+        if (collapseTimeout) clearTimeout(collapseTimeout);
     });
 </script>
 
-<div class="reasoning-block">
-    <button 
+<div bind:this={blockElement} class="reasoning-block">
+    <button
         class="reasoning-toggle"
         on:click={toggleExpanded}
         title={isExpanded ? "Hide AI thinking" : "Show AI thinking"}

src/lib/components/chat/StreamingText.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+    import { onMount, afterUpdate } from "svelte";
+    import gsap from "gsap";
+
+    export let content: string = "";
+    export let streaming: boolean = false;
+    export let speed: number = 60;
+    export let onComplete: (() => void) | undefined = undefined;
+
+    let displayedContent = "";
+    let cursorElement: HTMLSpanElement;
+    let containerElement: HTMLDivElement;
+    let animationTimeline: any = null;
+    let buffer: string[] = [];
+    let isProcessing = false;
+    let lastProcessedLength = 0;
+
+    $: if (streaming && content) {
+        // Only process truly new content
+        if (content.length > lastProcessedLength) {
+            const newChars = content.slice(lastProcessedLength);
+            if (newChars) {
+                buffer.push(...newChars.split(''));
+                lastProcessedLength = content.length;
+                processBuffer();
+            }
+        }
+    } else if (!streaming && content !== displayedContent) {
+        displayedContent = content;
+        lastProcessedLength = content.length;
+        if (animationTimeline) {
+            animationTimeline.kill();
+        }
+        hideCursor();
+    }
+
+    async function processBuffer() {
+        if (isProcessing || buffer.length === 0) return;
+        isProcessing = true;
+
+        while (buffer.length > 0) {
+            // Process multiple characters at once for better performance
+            const chunkSize = Math.min(3, buffer.length);
+            const chunk = buffer.splice(0, chunkSize).join('');
+            displayedContent += chunk;
+
+            // Only delay if there are more characters to process
+            if (buffer.length > 0) {
+                await new Promise(resolve => setTimeout(resolve, 1000 / speed));
+            }
+        }
+
+        isProcessing = false;
+
+        if (!streaming && displayedContent === content) {
+            hideCursor();
+            onComplete?.();
+        }
+    }
+
+    function showCursor() {
+        if (cursorElement) {
+            gsap.set(cursorElement, { display: "inline-block", opacity: 1 });
+            gsap.to(cursorElement, {
+                opacity: 0,
+                duration: 0.5,
+                repeat: -1,
+                yoyo: true,
+                ease: "steps(1)"
+            });
+        }
+    }
+
+    function hideCursor() {
+        if (cursorElement) {
+            gsap.killTweensOf(cursorElement);
+            gsap.to(cursorElement, {
+                opacity: 0,
+                duration: 0.2,
+                onComplete: () => {
+                    if (cursorElement) {
+                        gsap.set(cursorElement, { display: "none" });
+                    }
+                }
+            });
+        }
+    }
+
+    onMount(() => {
+        if (streaming) {
+            showCursor();
+            // Reset tracking when component mounts with streaming
+            lastProcessedLength = 0;
+            displayedContent = "";
+
+            gsap.fromTo(containerElement,
+                { opacity: 0, y: 5 },
+                { opacity: 1, y: 0, duration: 0.3, ease: "power2.out" }
+            );
+        }
+
+        return () => {
+            if (animationTimeline) {
+                animationTimeline.kill();
+            }
+        };
+    });
+
+    afterUpdate(() => {
+        if (streaming && cursorElement) {
+            showCursor();
+        }
+    });
+</script>
+
+<div class="streaming-text" bind:this={containerElement}>
+    <span class="text-content">{displayedContent}</span>
+    {#if streaming}
+        <span bind:this={cursorElement} class="cursor">▊</span>
+    {/if}
+</div>
+
+<style>
+    .streaming-text {
+        display: inline;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+    }
+
+    .text-content {
+        color: inherit;
+        font-family: inherit;
+        line-height: inherit;
+    }
+
+    .cursor {
+        display: inline-block;
+        color: rgba(65, 105, 225, 0.8);
+        font-weight: bold;
+        margin-left: 1px;
+        animation: none;
+        vertical-align: baseline;
+    }
+</style>

src/lib/components/chat/ToolInvocation.svelte

@@ -0,0 +1,458 @@
+<script lang="ts">
+    import { onMount, onDestroy } from "svelte";
+    import gsap from "gsap";
+    import type { MessageSegment } from "../../stores/agent";
+
+    export let segment: MessageSegment;
+
+    let element: HTMLDivElement;
+    let expanded = false;
+    let statusIcon: HTMLSpanElement;
+    let progressRing: SVGCircleElement;
+    let detailsElement: HTMLDivElement;
+    let timeline: gsap.core.Timeline | null = null;
+    let prevStatus = segment.toolStatus;
+
+    const toolIcons: Record<string, string> = {
+        read_editor: "📄",
+        write_editor: "✏️",
+        observe_console: "📟",
+        default: "🔧",
+    };
+
+    const statusIcons: Record<string, string> = {
+        pending: "⏳",
+        running: "⚡",
+        completed: "✅",
+        error: "❌",
+    };
+
+    $: if (segment.toolStatus !== prevStatus && statusIcon) {
+        animateStatusChange(prevStatus, segment.toolStatus);
+        prevStatus = segment.toolStatus;
+    }
+
+    function toggle() {
+        expanded = !expanded;
+        animateToggle();
+    }
+
+    function animateToggle() {
+        if (!detailsElement) return;
+
+        if (timeline) timeline.kill();
+        timeline = gsap.timeline();
+
+        if (expanded) {
+            timeline
+                .set(detailsElement, { display: "block" })
+                .fromTo(detailsElement,
+                    { opacity: 0, height: 0, y: -10 },
+                    { opacity: 1, height: "auto", y: 0, duration: 0.3, ease: "power2.out" }
+                );
+        } else {
+            timeline
+                .to(detailsElement,
+                    { opacity: 0, height: 0, y: -5, duration: 0.2, ease: "power2.in" }
+                )
+                .set(detailsElement, { display: "none" });
+        }
+    }
+
+    function animateStatusChange(_from: string | undefined, to: string | undefined) {
+        if (!statusIcon || !element) return;
+
+        gsap.timeline()
+            .to(statusIcon, {
+                scale: 1.3,
+                duration: 0.15,
+                ease: "power2.in"
+            })
+            .to(statusIcon, {
+                scale: 1,
+                duration: 0.15,
+                ease: "back.out(2)"
+            });
+
+        if (to === "completed") {
+            gsap.to(element, {
+                borderColor: "rgba(0, 255, 0, 0.3)",
+                backgroundColor: "rgba(0, 255, 0, 0.05)",
+                duration: 0.3,
+                ease: "power2.out"
+            });
+        } else if (to === "error") {
+            gsap.to(element, {
+                borderColor: "rgba(255, 0, 0, 0.4)",
+                backgroundColor: "rgba(255, 0, 0, 0.1)",
+                duration: 0.3,
+                ease: "power2.out"
+            });
+        }
+
+        if (progressRing) {
+            if (to === "running") {
+                gsap.to(progressRing, {
+                    strokeDashoffset: 50,
+                    duration: 1,
+                    ease: "power2.inOut",
+                    repeat: -1,
+                    yoyo: true
+                });
+            } else if (to === "completed") {
+                gsap.to(progressRing, {
+                    strokeDashoffset: 0,
+                    duration: 0.3,
+                    ease: "power2.out"
+                });
+            }
+        }
+    }
+
+    function formatDuration(): string {
+        if (!segment.startTime) return "";
+        const duration = (segment.endTime || Date.now()) - segment.startTime;
+        if (duration < 1000) {
+            return `${duration}ms`;
+        }
+        return `${(duration / 1000).toFixed(1)}s`;
+    }
+
+    onMount(() => {
+        gsap.fromTo(
+            element,
+            { opacity: 0, x: -20, scale: 0.95 },
+            {
+                opacity: 1,
+                x: 0,
+                scale: 1,
+                duration: 0.4,
+                ease: "back.out(1.5)"
+            }
+        );
+
+        if (segment.toolStatus === "running" && progressRing) {
+            gsap.to(progressRing, {
+                strokeDashoffset: 50,
+                duration: 1,
+                ease: "power2.inOut",
+                repeat: -1,
+                yoyo: true
+            });
+        }
+    });
+
+    onDestroy(() => {
+        if (timeline) timeline.kill();
+    });
+</script>
+
+<div class="tool-invocation {segment.toolStatus}" bind:this={element}>
+    <button class="tool-header" on:click={toggle} aria-expanded={expanded}>
+        <div class="status-indicator">
+            <svg class="progress-ring" width="24" height="24">
+                <circle
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="rgba(255, 255, 255, 0.1)"
+                    stroke-width="2"
+                    fill="none"
+                />
+                <circle
+                    bind:this={progressRing}
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    fill="none"
+                    stroke-dasharray="62.83"
+                    stroke-dashoffset="62.83"
+                    transform="rotate(-90 12 12)"
+                />
+            </svg>
+            <span bind:this={statusIcon} class="status-icon">
+                {#if segment.toolStatus === "running"}
+                    <span class="spinner">{statusIcons[segment.toolStatus || "pending"]}</span>
+                {:else}
+                    {statusIcons[segment.toolStatus || "pending"]}
+                {/if}
+            </span>
+        </div>
+        <span class="tool-icon">{toolIcons[segment.toolName || "default"] || toolIcons.default}</span>
+        <span class="tool-name">
+            {#if segment.toolStatus === "running"}
+                Calling {segment.toolName}...
+            {:else if segment.toolStatus === "completed"}
+                Called {segment.toolName}
+            {:else if segment.toolStatus === "error"}
+                Failed to call {segment.toolName}
+            {:else}
+                Preparing {segment.toolName}...
+            {/if}
+        </span>
+        {#if segment.startTime}
+            <span class="duration">{formatDuration()}</span>
+        {/if}
+        <span class="expand-icon" class:rotated={expanded}>▶</span>
+    </button>
+
+    <div bind:this={detailsElement} class="tool-details" style="display: none;">
+        {#if segment.toolArgs && Object.keys(segment.toolArgs).length > 0}
+            <div class="section-title">Parameters:</div>
+            <div class="params">
+                {#each Object.entries(segment.toolArgs) 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>
+        {/if}
+        {#if segment.toolOutput || segment.toolResult}
+            <div class="section-title">Result:</div>
+            <div class="tool-output">
+                <pre>{segment.toolOutput || segment.toolResult}</pre>
+            </div>
+        {/if}
+        {#if segment.consoleOutput && segment.consoleOutput.length > 0}
+            <div class="section-title">Console Output:</div>
+            <div class="console-output">
+                {#each segment.consoleOutput as line}
+                    <div class="console-line">{line}</div>
+                {/each}
+            </div>
+        {/if}
+        {#if segment.toolError}
+            <div class="section-title">Error:</div>
+            <div class="tool-error">
+                {segment.toolError}
+            </div>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .tool-invocation {
+        margin: 0.5rem 0;
+        margin-left: 1rem;
+        border-radius: 4px;
+        overflow: hidden;
+        border: 1px solid rgba(65, 105, 225, 0.2);
+        background: rgba(65, 105, 225, 0.05);
+        transition: all 0.2s ease;
+    }
+
+    .tool-invocation.running {
+        background: rgba(255, 210, 30, 0.08);
+        border-color: rgba(255, 210, 30, 0.3);
+        animation: pulse 2s ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+        0%, 100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.8;
+        }
+    }
+
+    .tool-invocation.completed {
+        background: rgba(0, 255, 0, 0.04);
+        border-color: rgba(0, 255, 0, 0.15);
+    }
+
+    .tool-invocation.error {
+        background: rgba(255, 0, 0, 0.08);
+        border-color: rgba(255, 0, 0, 0.3);
+    }
+
+    .tool-header {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        width: 100%;
+        padding: 0.35rem 0.5rem;
+        background: transparent;
+        border: none;
+        color: inherit;
+        font: inherit;
+        text-align: left;
+        cursor: pointer;
+        transition: background 0.2s ease;
+    }
+
+    .tool-header:hover {
+        background: rgba(255, 255, 255, 0.02);
+    }
+
+    .status-indicator {
+        position: relative;
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .progress-ring {
+        position: absolute;
+        top: 0;
+        left: 0;
+        color: rgba(65, 105, 225, 0.6);
+    }
+
+    .tool-invocation.running .progress-ring {
+        color: rgba(255, 210, 30, 0.8);
+    }
+
+    .tool-invocation.completed .progress-ring {
+        color: rgba(0, 255, 0, 0.6);
+    }
+
+    .tool-invocation.error .progress-ring {
+        color: rgba(255, 0, 0, 0.6);
+    }
+
+    .status-icon {
+        font-size: 0.85rem;
+        position: relative;
+        z-index: 1;
+    }
+
+    .tool-icon {
+        font-size: 0.95rem;
+    }
+
+    .tool-name {
+        flex: 1;
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 0.8rem;
+    }
+
+    .duration {
+        color: rgba(255, 255, 255, 0.4);
+        font-size: 0.7rem;
+        font-family: "Monaco", "Menlo", monospace;
+    }
+
+    .expand-icon {
+        font-size: 0.65rem;
+        color: rgba(255, 255, 255, 0.4);
+        transition: transform 0.2s ease;
+    }
+
+    .expand-icon.rotated {
+        transform: rotate(90deg);
+    }
+
+    .tool-details {
+        padding: 0.5rem;
+        background: rgba(0, 0, 0, 0.2);
+        border-top: 1px solid rgba(255, 255, 255, 0.05);
+    }
+
+    .section-title {
+        color: rgba(255, 255, 255, 0.5);
+        font-size: 0.7rem;
+        font-weight: 600;
+        margin-bottom: 0.25rem;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    .params {
+        font-family: "Monaco", "Menlo", monospace;
+        font-size: 0.75rem;
+    }
+
+    .param {
+        display: flex;
+        gap: 0.5rem;
+        margin: 0.2rem 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.4rem;
+        background: rgba(0, 0, 0, 0.3);
+        border-radius: 3px;
+        font-size: 0.7rem;
+        overflow-x: auto;
+        max-height: 150px;
+    }
+
+    .spinner {
+        display: inline-block;
+        animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+    }
+
+    .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);
+        border-radius: 3px;
+    }
+
+    .tool-output pre {
+        margin: 0;
+        font-family: "Monaco", "Menlo", monospace;
+        font-size: 0.7rem;
+        color: rgba(0, 255, 0, 0.8);
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        max-height: 200px;
+        overflow-y: auto;
+    }
+
+    .console-output {
+        margin-top: 0.5rem;
+        background: rgba(0, 0, 0, 0.3);
+        border-radius: 3px;
+        padding: 0.4rem;
+        font-family: "Monaco", "Menlo", monospace;
+        font-size: 0.7rem;
+        color: rgba(255, 255, 255, 0.8);
+        overflow-x: auto;
+        max-height: 200px;
+        overflow-y: auto;
+    }
+
+    .console-line {
+        margin: 0.1rem 0;
+    }
+
+    .tool-error {
+        margin-top: 0.5rem;
+        padding: 0.5rem;
+        background: rgba(255, 0, 0, 0.08);
+        border: 1px solid rgba(255, 0, 0, 0.2);
+        border-radius: 3px;
+        color: rgba(255, 100, 100, 0.9);
+        font-size: 0.75rem;
+        font-family: "Monaco", "Menlo", monospace;
+    }
+</style>

src/lib/components/chat/context.md

@@ -1,20 +1,22 @@
 # Chat Context
 
-AI chat interface with markdown rendering and tool visualization.
+AI chat interface with real-time streaming.
 
 ## Components
 
-- `ChatPanel.svelte` - Main chat UI with message display
-- `ReasoningBlock.svelte` - Collapsible AI thinking viewer
-- `MarkdownRenderer.svelte` - Markdown parser and renderer
-- `ToolCallDisplay.svelte` - Inline badges for [TOOL:] patterns
-- `ToolCallBlock.svelte` - Expandable tool execution tracker
+- `ChatPanel.svelte` - Main chat UI with smooth scroll and keyed message iteration
+- `MessageSegment.svelte` - Renders text, tool invocations, and results
+- `StreamingText.svelte` - Optimized character streaming with state persistence
+- `ToolInvocation.svelte` - Consolidated 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)
 
-## Features
+## Architecture
 
-- Real-time message streaming
-- Markdown formatting for assistant messages
-- Expandable tool execution tracking with status
-- Collapsible thinking blocks (0.1s collapse)
-- Authentication integration
-- GSAP animations
+- Explicit message IDs with proper component keying
+- 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

src/lib/server/api.ts

@@ -11,6 +11,9 @@ export interface WebSocketMessage {
     | "error"
     | "status"
     | "stream"
+    | "stream_start"
+    | "stream_token"
+    | "stream_end"
     | "auth"
     | "editor_update"
     | "editor_sync"
@@ -20,16 +23,17 @@ export interface WebSocketMessage {
     content?: string;
     role?: string;
     chunk?: string;
+    token?: string;
     error?: string;
     processing?: boolean;
     connected?: boolean;
     message?: string;
-    token?: string;
     toolName?: string;
     toolArgs?: Record<string, unknown>;
     toolResult?: string;
     id?: string;
     type?: string;
+    messageId?: string;
   };
   timestamp: number;
 }
@@ -144,24 +148,36 @@ class WebSocketManager {
           }
           connectionData.messages.push(new HumanMessage(userMessage));
 
+          const messageId = `msg_${Date.now()}`;
+
+          this.sendMessage(ws, {
+            type: "stream_start",
+            payload: { messageId },
+            timestamp: Date.now(),
+          });
+
           const response = await connectionData.agent.processMessage(
             userMessage,
             connectionData.messages.slice(0, -1),
             (chunk: string) => {
               this.sendMessage(ws, {
-                type: "stream",
-                payload: { chunk },
+                type: "stream_token",
+                payload: {
+                  token: chunk,
+                  messageId,
+                },
                 timestamp: Date.now(),
               });
             },
+            messageId,
           );
 
           connectionData.messages.push(new AIMessage(response));
 
           this.sendMessage(ws, {
-            type: "chat",
+            type: "stream_end",
             payload: {
-              role: "assistant",
+              messageId,
               content: response,
             },
             timestamp: Date.now(),

src/lib/server/context.md

@@ -1,35 +1,29 @@
 # Server Context
 
-WebSocket server with React Agent pattern for AI-assisted game development.
+WebSocket server with LangGraph agent for AI-assisted game development.
 
 ## Key Components
 
-- **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 game reload feedback, console observation
-- **console-buffer.ts** - Server-side console message storage and game state tracking
+- **api.ts** - WebSocket message routing
+- **langgraph-agent.ts** - LangGraph agent with character streaming
+- **tools.ts** - Editor read/write with game reload
+- **console-buffer.ts** - Console message storage
 - **documentation.ts** - VibeGame documentation loader
-- **prompts.ts** - Documentation formatting utilities
 
 ## Architecture
 
-React Agent pattern with conditional execution flow:
+LangGraph state machine with real-time streaming:
 
-- Agent node processes messages and executes tools
-- Tool results include console feedback from game reload
-- Console messages forwarded from client to server buffer
-- Write operations wait for game state before returning
+- Streams text segments character-by-character as they arrive
+- Tool invocations interrupt text streaming
+- Explicit message IDs required for all segment operations
 
-## Message Types
+## Message Protocol
 
 - `auth` - HF token authentication
 - `chat` - User messages
-- `editor_sync` - Sync editor content with server
-- `editor_update` - Server updates client editor
-- `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
+- `stream_start/token/end` - Legacy streaming
+- `segment_start/token/end` - Segment streaming
+- `editor_sync` - Sync editor content
+- `console_sync` - Forward console messages
+- `status` - Connection and processing state

src/lib/server/langgraph-agent.ts

@@ -60,28 +60,113 @@ export class LangGraphAgent {
   private setupGraph() {
     const graph = new StateGraph(AgentState);
 
-    graph.addNode("agent", async (state) => {
+    graph.addNode("agent", async (state, config) => {
       const systemPrompt = this.buildSystemPrompt();
       const messages = this.formatMessages(state.messages, systemPrompt);
 
-      const response = await this.callModel(messages);
-      const toolCalls = this.parseToolCalls(response);
+      let fullResponse = "";
+      let currentSegmentId: string | null = null;
+      let currentSegmentContent = "";
+      let inToolCall = false;
+      const messageId = config?.metadata?.messageId;
 
-      if (toolCalls.length > 0) {
-        const toolResults = await this.executeTools(toolCalls);
-        const toolMessage = new AIMessage({
-          content: response,
-          additional_kwargs: { has_tool_calls: true },
-        });
+      for await (const token of this.streamModelResponse(messages)) {
+        fullResponse += token;
+        config?.writer?.({ type: "token", content: token });
+
+        const isToolStart = token.includes("[TOOL:");
+        const isToolEnd = inToolCall && token.includes("]");
+
+        if (isToolStart) {
+          if (currentSegmentId && currentSegmentContent.trim() && this.ws) {
+            this.ws.send(
+              JSON.stringify({
+                type: "segment_end",
+                payload: {
+                  segmentId: currentSegmentId,
+                  content: currentSegmentContent,
+                  messageId,
+                },
+                timestamp: Date.now(),
+              }),
+            );
+          }
+          currentSegmentId = null;
+          currentSegmentContent = "";
+          inToolCall = true;
+        } else if (isToolEnd) {
+          inToolCall = false;
+        } else if (!inToolCall) {
+          if (!currentSegmentId && token.trim() && 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 += token;
+            if (this.ws) {
+              this.ws.send(
+                JSON.stringify({
+                  type: "segment_token",
+                  payload: {
+                    segmentId: currentSegmentId,
+                    token,
+                    messageId,
+                  },
+                  timestamp: Date.now(),
+                }),
+              );
+            }
+          }
+        }
+      }
+
+      if (currentSegmentId && currentSegmentContent.trim() && this.ws) {
+        this.ws.send(
+          JSON.stringify({
+            type: "segment_end",
+            payload: {
+              segmentId: currentSegmentId,
+              content: currentSegmentContent,
+              messageId,
+            },
+            timestamp: Date.now(),
+          }),
+        );
+      }
 
+      const toolCalls = this.parseToolCalls(fullResponse);
+
+      if (toolCalls.length > 0) {
+        const toolResults = await this.executeToolsWithSegments(
+          toolCalls,
+          config?.metadata?.messageId as string | undefined,
+        );
         return {
-          messages: [toolMessage, ...toolResults],
+          messages: [
+            new AIMessage({
+              content: fullResponse,
+              additional_kwargs: { has_tool_calls: true },
+            }),
+            ...toolResults,
+          ],
           hasToolCalls: true,
         };
       }
 
       return {
-        messages: [new AIMessage(response)],
+        messages: [new AIMessage(fullResponse)],
         hasToolCalls: false,
       };
     });
@@ -173,21 +258,31 @@ Be concise, accurate, and focus on practical solutions.`;
     return formatted;
   }
 
-  private async callModel(
+  private async *streamModelResponse(
     messages: Array<{ role: string; content: string }>,
-  ): Promise<string> {
+  ): AsyncGenerator<string, string, unknown> {
     if (!this.client) {
       throw new Error("Agent not initialized");
     }
 
-    const response = await this.client.chatCompletion({
+    let fullContent = "";
+
+    const stream = this.client.chatCompletionStream({
       model: this.model,
       messages,
       temperature: 0.3,
       max_tokens: 2048,
     });
 
-    return response.choices[0].message.content || "";
+    for await (const chunk of stream) {
+      const token = chunk.choices[0]?.delta?.content || "";
+      if (token) {
+        fullContent += token;
+        yield token;
+      }
+    }
+
+    return fullContent;
   }
 
   private parseToolCalls(
@@ -221,24 +316,38 @@ Be concise, accurate, and focus on practical solutions.`;
     return toolCalls;
   }
 
-  private async executeTools(
+  private async executeToolsWithSegments(
     toolCalls: Array<{ name: string; args: Record<string, unknown> }>,
+    messageId?: string,
   ): Promise<BaseMessage[]> {
     const results = [];
 
     for (const call of toolCalls) {
-      const toolId = `${call.name}_${Date.now()}`;
+      const segmentId = `seg_tool_${Date.now()}_${Math.random()}`;
 
       try {
         if (this.ws && this.ws.readyState === this.ws.OPEN) {
           this.ws.send(
             JSON.stringify({
-              type: "tool_start",
+              type: "segment_start",
               payload: {
-                toolId,
+                segmentId,
+                segmentType: "tool-invocation",
+                messageId,
                 toolName: call.name,
                 toolArgs: call.args,
+              },
+              timestamp: Date.now(),
+            }),
+          );
+
+          this.ws.send(
+            JSON.stringify({
+              type: "segment_end",
+              payload: {
+                segmentId,
                 toolStatus: "running",
+                messageId,
               },
               timestamp: Date.now(),
             }),
@@ -246,27 +355,18 @@ Be concise, accurate, and focus on practical solutions.`;
         }
 
         let result;
+        let consoleOutput: string[] = [];
+
         if (call.name === "read_editor") {
           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]
+          if (consoleMatch) {
+            consoleOutput = 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("");
@@ -277,12 +377,40 @@ Be concise, accurate, and focus on practical solutions.`;
         if (this.ws && this.ws.readyState === this.ws.OPEN) {
           this.ws.send(
             JSON.stringify({
-              type: "tool_complete",
+              type: "segment_end",
               payload: {
-                toolId,
+                segmentId,
+                toolStatus: "completed",
+                messageId,
+              },
+              timestamp: Date.now(),
+            }),
+          );
+
+          const resultSegmentId = `seg_result_${Date.now()}_${Math.random()}`;
+          this.ws.send(
+            JSON.stringify({
+              type: "segment_start",
+              payload: {
+                segmentId: resultSegmentId,
+                segmentType: "tool-result",
+                messageId,
                 toolName: call.name,
-                toolResult: result,
+              },
+              timestamp: Date.now(),
+            }),
+          );
+
+          this.ws.send(
+            JSON.stringify({
+              type: "segment_end",
+              payload: {
+                segmentId: resultSegmentId,
+                toolOutput: result,
+                consoleOutput:
+                  consoleOutput.length > 0 ? consoleOutput : undefined,
                 toolStatus: "completed",
+                messageId,
               },
               timestamp: Date.now(),
             }),
@@ -292,7 +420,7 @@ Be concise, accurate, and focus on practical solutions.`;
         results.push(
           new ToolMessage({
             content: result,
-            tool_call_id: toolId,
+            tool_call_id: segmentId,
             name: call.name,
           }),
         );
@@ -300,12 +428,13 @@ Be concise, accurate, and focus on practical solutions.`;
         if (this.ws && this.ws.readyState === this.ws.OPEN) {
           this.ws.send(
             JSON.stringify({
-              type: "tool_error",
+              type: "segment_end",
               payload: {
-                toolId,
-                toolName: call.name,
-                error: error instanceof Error ? error.message : String(error),
+                segmentId,
                 toolStatus: "error",
+                toolError:
+                  error instanceof Error ? error.message : String(error),
+                messageId,
               },
               timestamp: Date.now(),
             }),
@@ -315,7 +444,7 @@ Be concise, accurate, and focus on practical solutions.`;
         results.push(
           new ToolMessage({
             content: `Error executing ${call.name}: ${error}`,
-            tool_call_id: toolId,
+            tool_call_id: segmentId,
             name: call.name,
           }),
         );
@@ -329,58 +458,35 @@ Be concise, accurate, and focus on practical solutions.`;
     message: string,
     messageHistory: BaseMessage[] = [],
     onStream?: (chunk: string) => void,
+    messageId?: string,
   ): Promise<string> {
     if (!this.client) {
       throw new Error("Agent not initialized");
     }
 
-    const messages = [...messageHistory, new HumanMessage(message)];
-
-    const stream = await this.graph.stream({
-      messages,
-      hasToolCalls: false,
-    });
+    const stream = await this.graph.stream(
+      {
+        messages: [...messageHistory, new HumanMessage(message)],
+        hasToolCalls: false,
+      },
+      {
+        streamMode: ["custom", "updates"] as const,
+        metadata: { messageId },
+      },
+    );
 
     let fullResponse = "";
-    let isStreaming = false;
-    let lastAIResponse = "";
-    let hasExecutedTools = false;
 
     for await (const chunk of stream) {
-      if (chunk.agent?.messages) {
-        for (const msg of chunk.agent.messages) {
-          if (msg instanceof AIMessage) {
-            const content = msg.content as string;
-
-            if (msg.additional_kwargs?.has_tool_calls) {
-              hasExecutedTools = true;
-              lastAIResponse = content;
-            } else {
-              if (!isStreaming) {
-                isStreaming = true;
-                for (const char of content) {
-                  fullResponse += char;
-                  onStream?.(char);
-                  await new Promise((resolve) => setTimeout(resolve, 5));
-                }
-              } else {
-                fullResponse = content;
-              }
-              lastAIResponse = content;
-            }
-          } else if (msg instanceof ToolMessage) {
-            if (onStream && !hasExecutedTools) {
-              const toolNotification = `\n🔧 ${msg.name}\n`;
-              for (const char of toolNotification) {
-                onStream(char);
-                await new Promise((resolve) => setTimeout(resolve, 5));
-              }
-            }
-          }
+      if (Array.isArray(chunk)) {
+        const [mode, data] = chunk;
+        if (mode === "custom" && data?.type === "token") {
+          fullResponse += data.content;
+          onStream?.(data.content);
         }
       }
     }
 
-    return fullResponse || lastAIResponse;
+    return fullResponse;
   }
 }

src/lib/stores/agent.ts

@@ -15,6 +15,30 @@ export interface ToolExecution {
   expanded?: boolean;
 }
 
+export type MessageSegmentType =
+  | "text"
+  | "tool-invocation"
+  | "tool-result"
+  | "reasoning";
+
+export interface MessageSegment {
+  id: string;
+  type: MessageSegmentType;
+  content: string;
+  toolName?: string;
+  toolArgs?: Record<string, unknown>;
+  toolStatus?: "pending" | "running" | "completed" | "error";
+  toolOutput?: string;
+  toolResult?: string;
+  toolError?: string;
+  startTime?: number;
+  endTime?: number;
+  consoleOutput?: string[];
+  expanded?: boolean;
+  streaming?: boolean;
+  mergeWithPrevious?: boolean;
+}
+
 export interface ChatMessage {
   id: string;
   role: "user" | "assistant" | "system" | "tool";
@@ -24,6 +48,7 @@ export interface ChatMessage {
   reasoning?: string;
   showReasoning?: boolean;
   toolExecutions?: ToolExecution[];
+  segments?: MessageSegment[];
 }
 
 export interface AgentState {
@@ -131,6 +156,8 @@ function createAgentStore() {
       processing?: boolean;
       connected?: boolean;
       chunk?: string;
+      token?: string;
+      messageId?: string;
       reasoning?: string;
       role?: string;
       content?: string;
@@ -142,7 +169,10 @@ function createAgentStore() {
       toolId?: string;
       toolStatus?: "pending" | "running" | "completed" | "error";
       toolOutput?: string;
+      toolError?: string;
       consoleOutput?: string[];
+      segmentId?: string;
+      segmentType?: MessageSegmentType;
     };
   }) {
     switch (message.type) {
@@ -164,45 +194,73 @@ function createAgentStore() {
         }
         break;
 
-      case "stream":
+      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.chunk || "");
-
-          if (!currentStreamId) {
-            currentStreamId = `msg_${Date.now()}`;
-            const streamMessage: ChatMessage = {
-              id: currentStreamId,
-              role: "assistant",
-              content: newContent,
-              timestamp: Date.now(),
-              streaming: true,
-              reasoning: message.payload.reasoning,
-            };
-            return {
-              ...state,
-              streamingContent: newContent,
-              messages: [...state.messages, streamMessage],
-              streamingStatus: "streaming",
-            };
-          } else {
-            const messages = state.messages.map((msg) => {
-              if (msg.id === currentStreamId) {
-                return {
-                  ...msg,
-                  content: newContent,
-                  reasoning: message.payload.reasoning || msg.reasoning,
-                };
-              }
-              return msg;
-            });
-            return {
-              ...state,
-              streamingContent: newContent,
-              messages,
-              streamingStatus: "streaming",
-            };
-          }
+            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;
 
@@ -374,6 +432,134 @@ function createAgentStore() {
           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;
     }
   }
 
@@ -384,10 +570,11 @@ function createAgentStore() {
     }
 
     const userMessage: ChatMessage = {
-      id: `msg_${Date.now()}`,
+      id: `user_${Date.now()}`,
       role: "user",
       content,
       timestamp: Date.now(),
+      streaming: false,
     };
 
     update((state) => ({

src/lib/stores/editor.ts

@@ -10,6 +10,8 @@ const DEFAULT_CONTENT =
   `<canvas id="game-canvas"></canvas>
 
 <world canvas="#game-canvas" sky="#87ceeb">
+  <player pos="0 0 0"></player>
+
   <!-- Ground -->
   <static-part pos="0 -0.5 0" shape="box" size="20 1 20" color="#90ee90"></static-part>