examples prompts, stop button

eslint.config.js

@@ -35,6 +35,8 @@ export default [
         clearInterval: "readonly",
         sessionStorage: "readonly",
         localStorage: "readonly",
+        AbortController: "readonly",
+        AbortSignal: "readonly",
       },
     },
     plugins: {

src/lib/components/chat/ChatPanel.svelte

@@ -9,12 +9,15 @@
     import MarkdownRenderer from "./MarkdownRenderer.svelte";
     import InProgressBlock from "./InProgressBlock.svelte";
     import MessageSegment from "./MessageSegment.svelte";
+    import ExampleMessages from "./ExampleMessages.svelte";
 
     let inputValue = "";
     let messagesContainer: HTMLDivElement;
     let sendButton: HTMLButtonElement;
+    let stopButton: HTMLButtonElement;
     let inputTextarea: HTMLTextAreaElement;
     let authPromptBtn: HTMLButtonElement;
+    let clearButton: HTMLButtonElement;
 
     let hasConnected = false;
 
@@ -134,6 +137,54 @@
         }
     }
 
+    function handleStop() {
+        if ($isProcessing) {
+            if (stopButton) {
+                gsap.to(stopButton, {
+                    scale: 0.9,
+                    duration: 0.1,
+                    ease: "power2.in",
+                    onComplete: () => {
+                        if (stopButton) {
+                            gsap.to(stopButton, {
+                                scale: 1,
+                                duration: 0.2,
+                                ease: "elastic.out(1, 0.5)",
+                            });
+                        }
+                    },
+                });
+            }
+
+            agentService.stopConversation();
+        }
+    }
+
+    function handleExampleMessage(message: string) {
+        if ($authStore.isAuthenticated && $isConnected && !$isProcessing) {
+            agentService.sendMessage(message);
+        }
+    }
+
+    function handleClearConversation() {
+        if (clearButton) {
+            gsap.to(clearButton, {
+                scale: 0.9,
+                duration: 0.1,
+                ease: "power2.in",
+                onComplete: () => {
+                    gsap.to(clearButton, {
+                        scale: 1,
+                        duration: 0.2,
+                        ease: "elastic.out(1, 0.5)",
+                    });
+                },
+            });
+        }
+
+        agentStore.clearMessages();
+    }
+
     function handleKeydown(event: KeyboardEvent) {
         if (event.key === "Enter" && !event.shiftKey) {
             event.preventDefault();
@@ -182,8 +233,8 @@
     }
 
     $: {
-        if (sendButton) {
-            if (!$authStore.isAuthenticated || !$isConnected || $isProcessing || !inputValue.trim()) {
+        if (sendButton && !$isProcessing) {
+            if (!$authStore.isAuthenticated || !$isConnected || !inputValue.trim()) {
                 gsap.to(sendButton, {
                     opacity: 0.3,
                     duration: 0.2,
@@ -201,6 +252,24 @@
 </script>
 
 <div class="chat-panel">
+    <div class="chat-header">
+        <span class="chat-title">Chat</span>
+        {#if $agentStore.messages.length > 0 && $authStore.isAuthenticated && !$isProcessing}
+            <button
+                bind:this={clearButton}
+                class="clear-button"
+                on:click={handleClearConversation}
+                title="Clear conversation"
+                transition:fade={{ duration: 200 }}
+            >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14zM10 11v6M14 11v6" />
+                </svg>
+                <span>Clear</span>
+            </button>
+        {/if}
+    </div>
+
     {#if isUserScrolling}
         <button
             class="scroll-to-bottom"
@@ -224,7 +293,7 @@
             </div>
         {:else}
             {#if $agentStore.messages.length === 0 && $isConnected}
-                <div class="ready-message">Ready to Chat!</div>
+                <ExampleMessages onSendMessage={handleExampleMessage} />
             {/if}
 
             {#each $agentStore.messages as message (message.id)}
@@ -282,19 +351,30 @@
             disabled={!$authStore.isAuthenticated || !$isConnected || $isProcessing}
             rows="1"
         />
-        <button
-            bind:this={sendButton}
-            on:click={handleSubmit}
-            on:mouseenter={handleButtonMouseEnter}
-            on:mouseleave={handleButtonMouseLeave}
-            on:mousedown={handleButtonMouseDown}
-            on:mouseup={handleButtonMouseUp}
-            disabled={!$authStore.isAuthenticated || !$isConnected || $isProcessing || !inputValue.trim()}
-            class="send-btn"
-            title="Send message"
-        >
-            →
-        </button>
+        {#if $isProcessing}
+            <button
+                bind:this={stopButton}
+                on:click={handleStop}
+                class="stop-btn"
+                title="Stop conversation"
+            >
+                ■
+            </button>
+        {:else}
+            <button
+                bind:this={sendButton}
+                on:click={handleSubmit}
+                on:mouseenter={handleButtonMouseEnter}
+                on:mouseleave={handleButtonMouseLeave}
+                on:mousedown={handleButtonMouseDown}
+                on:mouseup={handleButtonMouseUp}
+                disabled={!$authStore.isAuthenticated || !$isConnected || !inputValue.trim()}
+                class="send-btn"
+                title="Send message"
+            >
+                →
+            </button>
+        {/if}
     </div>
 </div>
 
@@ -309,6 +389,51 @@
         position: relative;
     }
 
+    .chat-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.5rem 0.75rem;
+        background: rgba(0, 0, 0, 0.3);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        min-height: 2.5rem;
+    }
+
+    .chat-title {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.7);
+    }
+
+    .clear-button {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.25rem 0.5rem;
+        background: transparent;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: 4px;
+        color: rgba(255, 255, 255, 0.6);
+        font-size: 0.75rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    .clear-button:hover {
+        background: rgba(244, 67, 54, 0.1);
+        border-color: rgba(244, 67, 54, 0.3);
+        color: rgba(244, 67, 54, 0.9);
+    }
+
+    .clear-button:active {
+        transform: scale(0.95);
+    }
+
+    .clear-button svg {
+        width: 14px;
+        height: 14px;
+    }
+
     .scroll-to-bottom {
         position: absolute;
         bottom: 4.5rem;
@@ -459,6 +584,34 @@
         cursor: not-allowed;
     }
 
+    .stop-btn {
+        padding: 0.4rem 0.8rem;
+        background: rgba(244, 67, 54, 0.2);
+        color: #f44336;
+        border: 1px solid rgba(244, 67, 54, 0.3);
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 1rem;
+        transform-origin: center;
+        will-change: transform;
+        animation: pulse 1.5s ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+        0%, 100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.6;
+        }
+    }
+
+    .stop-btn:hover {
+        background: rgba(244, 67, 54, 0.3);
+        border-color: rgba(244, 67, 54, 0.5);
+        animation: none;
+    }
+
     ::-webkit-scrollbar {
         width: 6px;
     }
@@ -518,25 +671,4 @@
         transform: translateY(0);
     }
 
-    .ready-message {
-        color: rgba(255, 255, 255, 0.2);
-        font-size: 0.875rem;
-        text-align: center;
-        font-style: italic;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        min-height: 200px;
-        animation: gentle-fade 3s ease-in-out infinite;
-    }
-    
-    @keyframes gentle-fade {
-        0%, 100% {
-            opacity: 0.7;
-        }
-        50% {
-            opacity: 1;
-        }
-    }
 </style>

src/lib/components/chat/ExampleMessages.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { fade } from "svelte/transition";
+    import gsap from "gsap";
+
+    export let onSendMessage: (message: string) => void;
+
+    const examples = [
+        { icon: "🏀", text: "add another ball" },
+        { icon: "📝", text: "explain what the code does" },
+        { icon: "🎮", text: "make an obby" },
+        { icon: "⬆️", text: "increase the player jump height" }
+    ];
+
+    let exampleCards: HTMLButtonElement[] = [];
+
+    onMount(() => {
+        exampleCards.forEach((card, index) => {
+            if (!card) return;
+
+            gsap.fromTo(card, {
+                opacity: 0,
+                y: 15,
+                scale: 0.97
+            }, {
+                opacity: 1,
+                y: 0,
+                scale: 1,
+                duration: 0.2,
+                delay: index * 0.02,
+                ease: "power3.out"
+            });
+        });
+    });
+
+    function handleClick(text: string) {
+        onSendMessage(text);
+    }
+
+    function handleMouseEnter(event: MouseEvent) {
+        const card = event.currentTarget as HTMLButtonElement;
+        gsap.to(card, {
+            scale: 1.03,
+            boxShadow: "0 6px 24px rgba(65, 105, 225, 0.25)",
+            borderColor: "rgba(65, 105, 225, 0.5)",
+            duration: 0.1,
+            ease: "power3.out"
+        });
+    }
+
+    function handleMouseLeave(event: MouseEvent) {
+        const card = event.currentTarget as HTMLButtonElement;
+        gsap.to(card, {
+            scale: 1,
+            boxShadow: "0 2px 10px rgba(0, 0, 0, 0.2)",
+            borderColor: "rgba(255, 255, 255, 0.05)",
+            duration: 0.12,
+            ease: "power2.inOut"
+        });
+    }
+
+    function handleMouseDown(event: MouseEvent) {
+        const card = event.currentTarget as HTMLButtonElement;
+        gsap.to(card, {
+            scale: 0.97,
+            duration: 0.05,
+            ease: "power1.in"
+        });
+    }
+
+    function handleMouseUp(event: MouseEvent) {
+        const card = event.currentTarget as HTMLButtonElement;
+        gsap.to(card, {
+            scale: 1.03,
+            duration: 0.08,
+            ease: "back.out(1.7)"
+        });
+    }
+</script>
+
+<div class="examples-container" transition:fade={{ duration: 200 }}>
+    <div class="examples-header">
+        <span class="header-text">Try an example</span>
+    </div>
+    <div class="examples-grid">
+        {#each examples as example, i}
+            <button
+                bind:this={exampleCards[i]}
+                class="example-card"
+                on:click={() => handleClick(example.text)}
+                on:mouseenter={handleMouseEnter}
+                on:mouseleave={handleMouseLeave}
+                on:mousedown={handleMouseDown}
+                on:mouseup={handleMouseUp}
+            >
+                <span class="example-icon">{example.icon}</span>
+                <span class="example-text">{example.text}</span>
+            </button>
+        {/each}
+    </div>
+</div>
+
+<style>
+    .examples-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 2rem 1rem;
+        height: 100%;
+        min-height: 300px;
+        gap: 1.5rem;
+    }
+
+    .examples-header {
+        color: rgba(255, 255, 255, 0.3);
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        font-weight: 500;
+    }
+
+    .header-text {
+        animation: gentle-pulse 3s ease-in-out infinite;
+    }
+
+    @keyframes gentle-pulse {
+        0%, 100% {
+            opacity: 0.5;
+        }
+        50% {
+            opacity: 0.8;
+        }
+    }
+
+    .examples-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 0.75rem;
+        width: 100%;
+        max-width: 600px;
+    }
+
+    .example-card {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 1rem;
+        background: rgba(255, 255, 255, 0.02);
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        font-family: "Monaco", "Menlo", monospace;
+        font-size: 0.875rem;
+        color: rgba(255, 255, 255, 0.85);
+        will-change: transform, box-shadow;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    }
+
+    .example-card:hover {
+        background: rgba(65, 105, 225, 0.05);
+    }
+
+    .example-icon {
+        font-size: 1rem;
+        opacity: 0.8;
+    }
+
+    .example-text {
+        flex: 1;
+    }
+
+    @media (max-width: 600px) {
+        .examples-grid {
+            grid-template-columns: 1fr;
+        }
+    }
+</style>

src/lib/components/chat/context.md

@@ -1,10 +1,11 @@
 # Chat Context
 
-AI chat interface with real-time streaming.
+AI chat interface with real-time streaming and conversation control.
 
 ## Components
 
-- `ChatPanel.svelte` - Main chat UI with smooth scroll
+- `ChatPanel.svelte` - Main chat UI with header bar, clear button, smooth scroll, stop button when processing
+- `ExampleMessages.svelte` - Clickable prompt suggestions when chat is empty
 - `MessageSegment.svelte` - Renders text, tool invocations, and results
 - `StreamingText.svelte` - Optimized character streaming with state persistence
 - `ToolInvocation.svelte` - Tool execution and results display
@@ -19,3 +20,4 @@ AI chat interface with real-time streaming.
 - Batch character processing (3 chars/cycle) at 120 chars/sec
 - Tool invocations displayed through dedicated segments
 - Clean separation between text and tool content
+- Abortable conversations via stop button during processing

src/lib/components/layout/AppHeader.svelte

@@ -66,6 +66,15 @@
       <span class="app-icon">🥕</span>
       <span class="app-name">VibeGame</span>
     </div>
+    <a href="https://github.com/dylanebert/VibeGame"
+       target="_blank"
+       rel="noopener noreferrer"
+       class="github-link"
+       aria-label="View on GitHub">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+      </svg>
+    </a>
   </div>
   
   <div class="header-center">
@@ -137,20 +146,21 @@
 
   .header-left {
     justify-content: flex-start;
+    gap: 0.75rem;
   }
-  
+
   .app-title {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     user-select: none;
   }
-  
+
   .app-icon {
     font-size: 1.25rem;
     line-height: 1;
   }
-  
+
   .app-name {
     font-size: 0.875rem;
     font-weight: 600;
@@ -158,6 +168,44 @@
     letter-spacing: 0.025em;
   }
 
+  .github-link {
+    display: flex;
+    align-items: center;
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+    color: rgba(251, 248, 244, 0.5);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+  }
+
+  .github-link::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 0.25rem;
+    background: rgba(139, 115, 85, 0.08);
+    opacity: 0;
+    transition: opacity 0.2s ease-out;
+  }
+
+  .github-link:hover {
+    color: rgba(251, 248, 244, 0.9);
+    transform: scale(1.05);
+  }
+
+  .github-link:hover::before {
+    opacity: 1;
+  }
+
+  .github-link:active {
+    transform: scale(0.98);
+  }
+
+  .github-link svg {
+    width: 16px;
+    height: 16px;
+  }
+
   .header-center {
     justify-content: center;
   }

src/lib/server/api.ts

@@ -18,7 +18,8 @@ export interface WebSocketMessage {
     | "editor_update"
     | "editor_sync"
     | "tool_execution"
-    | "console_sync";
+    | "console_sync"
+    | "abort";
   payload: {
     content?: string;
     role?: string;
@@ -41,7 +42,12 @@ export interface WebSocketMessage {
 class WebSocketManager {
   private connections: Map<
     WebSocket,
-    { token?: string; agent?: LangGraphAgent; messages?: BaseMessage[] }
+    {
+      token?: string;
+      agent?: LangGraphAgent;
+      messages?: BaseMessage[];
+      abortController?: AbortController;
+    }
   > = new Map();
 
   handleConnection(ws: WebSocket, _request: IncomingMessage) {
@@ -124,6 +130,18 @@ class WebSocketManager {
         }
         break;
 
+      case "abort":
+        if (connectionData?.abortController) {
+          connectionData.abortController.abort();
+
+          this.sendMessage(ws, {
+            type: "status",
+            payload: { processing: false, message: "Conversation stopped" },
+            timestamp: Date.now(),
+          });
+        }
+        break;
+
       case "chat":
         try {
           if (!connectionData?.agent) {
@@ -137,6 +155,8 @@ class WebSocketManager {
             throw new Error("No message content provided");
           }
 
+          connectionData.abortController = new AbortController();
+
           this.sendMessage(ws, {
             type: "status",
             payload: { processing: true },
@@ -170,6 +190,7 @@ class WebSocketManager {
               });
             },
             messageId,
+            connectionData.abortController.signal,
           );
 
           connectionData.messages.push(new AIMessage(response));
@@ -190,10 +211,26 @@ class WebSocketManager {
           });
         } catch (error) {
           console.error("Error processing chat message:", error);
-          this.sendError(
-            ws,
-            error instanceof Error ? error.message : "Unknown error",
-          );
+
+          if (error instanceof Error && error.name === "AbortError") {
+            this.sendMessage(ws, {
+              type: "stream_end",
+              payload: {
+                messageId: `msg_${Date.now()}`,
+                content: "",
+              },
+              timestamp: Date.now(),
+            });
+          } else {
+            this.sendError(
+              ws,
+              error instanceof Error ? error.message : "Unknown error",
+            );
+          }
+        } finally {
+          if (connectionData) {
+            connectionData.abortController = undefined;
+          }
         }
         break;
 

src/lib/server/context.md

@@ -4,8 +4,8 @@ WebSocket server with LangGraph agent for AI-assisted game development.
 
 ## Key Components
 
-- **api.ts** - WebSocket message routing
-- **langgraph-agent.ts** - LangGraph agent with buffered streaming
+- **api.ts** - WebSocket message routing with abort handling
+- **langgraph-agent.ts** - LangGraph agent with buffered streaming and abort signals
 - **tools.ts** - Editor manipulation: full read/write, line-based reading, text/regex search, search-replace editing
 - **console-buffer.ts** - Console message storage
 - **documentation.ts** - VibeGame documentation loader
@@ -17,11 +17,13 @@ LangGraph state machine with real-time streaming:
 - Buffers and filters tool patterns from text segments
 - Tool invocations handled separately from text content
 - Explicit message IDs required for all segment operations
+- AbortController for canceling running conversations
 
 ## Message Protocol
 
 - `auth` - HF token authentication
 - `chat` - User messages
+- `abort` - Stop running conversation
 - `stream_start/token/end` - Legacy streaming
 - `segment_start/token/end` - Segment streaming
 - `editor_sync` - Sync editor content

src/lib/server/langgraph-agent.ts

@@ -72,10 +72,16 @@ export class LangGraphAgent {
       let currentSegmentContent = "";
       let buffer = "";
       const messageId = config?.metadata?.messageId;
+      const abortSignal = config?.metadata?.abortSignal as
+        | AbortSignal
+        | undefined;
 
       const toolRegex = /TOOL:\s*(\w+)\s+ARGS:\s*({[^}]*})/g;
 
-      for await (const token of this.streamModelResponse(messages)) {
+      for await (const token of this.streamModelResponse(
+        messages,
+        abortSignal,
+      )) {
         fullResponse += token;
         config?.writer?.({ type: "token", content: token });
         buffer += token;
@@ -309,7 +315,10 @@ CRITICAL INSTRUCTIONS:
 VIBEGAME CONTEXT:
 ${this.documentation}
 
-The game auto-reloads on every change. The GAME import is automatically provided by the framework.
+IMPORTANT:
+- The game auto-reloads on every change. 
+- The GAME import is automatically provided by the framework.
+- The player is automatically created at [0, 0, 0] if not specified.
 
 AVAILABLE TOOLS:
 1. search_editor - Find text/patterns in code
@@ -340,6 +349,7 @@ IMPORTANT: You are an executor. Take action immediately using tools, don't expla
 
   private async *streamModelResponse(
     messages: Array<{ role: string; content: string }>,
+    abortSignal?: AbortSignal,
   ): AsyncGenerator<string, string, unknown> {
     if (!this.client) {
       throw new Error("Agent not initialized");
@@ -355,6 +365,10 @@ IMPORTANT: You are an executor. Take action immediately using tools, don't expla
     });
 
     for await (const chunk of stream) {
+      if (abortSignal?.aborted) {
+        throw new Error("AbortError");
+      }
+
       const token = chunk.choices[0]?.delta?.content || "";
       if (token) {
         fullContent += token;
@@ -622,6 +636,7 @@ IMPORTANT: You are an executor. Take action immediately using tools, don't expla
     messageHistory: BaseMessage[] = [],
     onStream?: (chunk: string) => void,
     messageId?: string,
+    abortSignal?: AbortSignal,
   ): Promise<string> {
     if (!this.client) {
       throw new Error("Agent not initialized");
@@ -634,13 +649,17 @@ IMPORTANT: You are an executor. Take action immediately using tools, don't expla
       },
       {
         streamMode: ["custom", "updates"] as const,
-        metadata: { messageId },
+        metadata: { messageId, abortSignal },
       },
     );
 
     let fullResponse = "";
 
     for await (const chunk of stream) {
+      if (abortSignal?.aborted) {
+        throw new Error("AbortError");
+      }
+
       if (Array.isArray(chunk)) {
         const [mode, data] = chunk;
         if (mode === "custom" && data?.type === "token") {

src/lib/services/agent.ts

@@ -52,6 +52,18 @@ export class AgentService {
     });
   }
 
+  stopConversation(): void {
+    if (!websocketService.isConnected()) {
+      return;
+    }
+
+    websocketService.send({
+      type: "abort",
+      payload: {},
+      timestamp: Date.now(),
+    });
+  }
+
   sendRawMessage(message: unknown): void {
     if (websocketService.isConnected()) {
       websocketService.send(message as WebSocketMessage);

src/lib/services/console-sync.ts

@@ -30,7 +30,9 @@ export class ConsoleSyncService {
             firstArg.includes("[VibeGame] Console forwarding") ||
             firstArg.includes("[DEBUG]") ||
             firstArg.includes("hot updated:") ||
-            firstArg.includes("using deprecated parameters for the initialization function")
+            firstArg.includes(
+              "using deprecated parameters for the initialization function",
+            )
           ) {
             return;
           }