gsap safety

.claude/commands/nourish.md

@@ -7,7 +7,6 @@ Complete conversation by updating context and applying cleanup.
 @CLAUDE.md
 @layers/structure.md
 @layers/context-template.md
-@llms.txt
 
 User arguments: "$ARGUMENTS"
 

src/lib/components/chat/ChatPanel.svelte

@@ -40,6 +40,17 @@
 
     onDestroy(() => {
         agentService.disconnect();
+
+        if (scrollAnimation) {
+            scrollAnimation.kill();
+        }
+
+        if (sendButton) gsap.killTweensOf(sendButton);
+        if (stopButton) gsap.killTweensOf(stopButton);
+        if (inputTextarea) gsap.killTweensOf(inputTextarea);
+        if (authPromptBtn) gsap.killTweensOf(authPromptBtn);
+        if (clearButton) gsap.killTweensOf(clearButton);
+        if (messagesContainer) gsap.killTweensOf(messagesContainer);
     });
 
     $: if ($authStore.isAuthenticated && !$authStore.loading && !hasConnected) {
@@ -286,7 +297,6 @@
     <div class="messages" bind:this={messagesContainer} on:scroll={handleScroll}>
         {#if !$authStore.isAuthenticated && !$authStore.loading}
             <div class="auth-prompt">
-                <p>Sign in to chat.</p>
                 <button bind:this={authPromptBtn} on:click={() => authStore.login()} class="auth-prompt-btn">
                     Sign in with 🤗 Hugging Face
                 </button>
@@ -639,12 +649,6 @@
         text-align: center;
     }
 
-    .auth-prompt p {
-        color: rgba(255, 255, 255, 0.6);
-        margin-bottom: 1.5rem;
-        font-size: 0.875rem;
-    }
-
     .auth-prompt-btn {
         padding: 0.6rem 1.8rem;
         background: rgba(255, 210, 30, 0.08);

src/lib/components/chat/ExampleMessages.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from "svelte";
+    import { onMount, onDestroy } from "svelte";
     import { fade } from "svelte/transition";
     import gsap from "gsap";
 
@@ -33,6 +33,14 @@
         });
     });
 
+    onDestroy(() => {
+        exampleCards.forEach((card) => {
+            if (card) {
+                gsap.killTweensOf(card);
+            }
+        });
+    });
+
     function handleClick(text: string) {
         onSendMessage(text);
     }

src/lib/components/chat/InProgressBlock.svelte

@@ -189,19 +189,11 @@
         if (collapseTimeout) clearTimeout(collapseTimeout);
         if (timeline) timeline.kill();
 
-        if (progressBar && blockElement) {
-            gsap.to(progressBar, {
-                width: "100%",
-                duration: 0.2,
-                ease: "power2.out",
-            });
-            gsap.to(blockElement, {
-                opacity: 0,
-                scale: 0.95,
-                duration: 0.3,
-                ease: "power2.in",
-            });
-        }
+        if (expandIcon) gsap.killTweensOf(expandIcon);
+        if (contentElement) gsap.killTweensOf(contentElement);
+        if (statusElement) gsap.killTweensOf(statusElement);
+        if (progressBar) gsap.killTweensOf(progressBar);
+        if (blockElement) gsap.killTweensOf(blockElement);
     });
 </script>
 

src/lib/components/chat/ReasoningBlock.svelte

@@ -11,6 +11,7 @@
     let contentElement: HTMLDivElement;
     let blockElement: HTMLDivElement;
     let collapseTimeout: number | null = null;
+    let activeTimeline: gsap.core.Timeline | null = null;
 
     $: if (responseComplete && autoCollapse && isExpanded) {
         if (collapseTimeout) clearTimeout(collapseTimeout);
@@ -35,7 +36,9 @@
     function animateExpand() {
         if (!iconElement || !contentElement) return;
 
-        gsap.timeline()
+        if (activeTimeline) activeTimeline.kill();
+
+        activeTimeline = gsap.timeline()
             .to(iconElement, {
                 rotation: 180,
                 duration: 0.15,
@@ -58,7 +61,9 @@
     function animateCollapse() {
         if (!iconElement || !contentElement) return;
 
-        gsap.timeline()
+        if (activeTimeline) activeTimeline.kill();
+
+        activeTimeline = gsap.timeline()
             .to(iconElement, {
                 rotation: 0,
                 duration: 0.1,
@@ -71,7 +76,9 @@
                 duration: 0.1,
                 ease: "power2.in",
                 onComplete: () => {
-                    gsap.set(contentElement, { display: 'none' });
+                    if (contentElement) {
+                        gsap.set(contentElement, { display: 'none' });
+                    }
                 }
             }, 0)
             .to(blockElement, {
@@ -119,6 +126,11 @@
 
     onDestroy(() => {
         if (collapseTimeout) clearTimeout(collapseTimeout);
+        if (activeTimeline) activeTimeline.kill();
+
+        if (iconElement) gsap.killTweensOf(iconElement);
+        if (contentElement) gsap.killTweensOf(contentElement);
+        if (blockElement) gsap.killTweensOf(blockElement);
     });
 </script>
 

src/lib/components/chat/context.md

@@ -4,7 +4,7 @@ AI chat interface with real-time streaming and conversation control.
 
 ## Components
 
-- `ChatPanel.svelte` - Main chat UI with header bar, clear button, smooth scroll, stop button when processing
+- `ChatPanel.svelte` - Main chat UI with header bar, clear button, smooth scroll, stop button
 - `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
@@ -21,3 +21,4 @@ AI chat interface with real-time streaming and conversation control.
 - Tool invocations displayed through dedicated segments
 - Clean separation between text and tool content
 - Abortable conversations via stop button during processing
+- All GSAP animations properly cleaned up on component destruction

src/main.ts

@@ -1,6 +1,11 @@
 import "./app.css";
 import App from "./App.svelte";
 import { consoleSyncService } from "./lib/services/console-sync";
+import gsap from "gsap";
+
+gsap.config({
+  nullTargetWarn: false,
+});
 
 const app = new App({
   target: document.getElementById("app")!,