From 1cd68cabaf02b5dabc75de5e5888112746b164b8 Mon Sep 17 00:00:00 2001
From: arkon <arkon.85@hotmail.com>
Date: Tue, 20 Jan 2026 15:57:30 +0100
Subject: [PATCH] fix: remove completion celebration animation

Remove the large "done" animation that appeared when Ralph loops completed.
The completion state is now simply reflected in the tracker panel without
the intrusive overlay.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/web/public/app.js     | 22 ------------
 src/web/public/index.html | 12 -------
 src/web/public/styles.css | 73 ---------------------------------------
 3 files changed, 107 deletions(-)

diff --git a/src/web/public/app.js b/src/web/public/app.js
index cc7ba772..1580691b 100644
--- a/src/web/public/app.js
+++ b/src/web/public/app.js
@@ -509,17 +509,12 @@ class ClaudemanApp {
       // Clear after 30 seconds to allow re-notification if loop restarts
       setTimeout(() => this._shownCompletions?.delete(completionKey), 30000);
 
-      this.showToast(`Loop completed: ${data.phrase}`, 'success');
       // Update inner state to mark loop as inactive
       const existing = this.innerStates.get(data.sessionId) || {};
       if (existing.loop) {
         existing.loop.active = false;
         this.updateInnerState(data.sessionId, existing);
       }
-      // Show celebration animation if this is the active session
-      if (data.sessionId === this.activeSessionId) {
-        this.showRalphCelebration(data.phrase);
-      }
     });
   }
 
@@ -2293,23 +2288,6 @@ class ClaudemanApp {
     }
   }
 
-  showRalphCelebration(phrase) {
-    const celebration = this.$('ralphCelebration');
-    const text = this.$('ralphCelebrationText');
-    if (!celebration) return;
-
-    if (text) {
-      text.textContent = phrase ? `${phrase}` : 'Complete!';
-    }
-
-    celebration.classList.add('show');
-
-    // Auto-hide after 3 seconds
-    setTimeout(() => {
-      celebration.classList.remove('show');
-    }, 3000);
-  }
-
   // Legacy method for backwards compatibility
   getTodoIcon(status) {
     return this.getRalphTaskIcon(status);
diff --git a/src/web/public/index.html b/src/web/public/index.html
index 171f1c2b..d7603cf0 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -152,18 +152,6 @@
         </div>
       </div>
 
-      <!-- Completion Celebration -->
-      <div class="ralph-celebration" id="ralphCelebration">
-        <div class="ralph-celebration-content">
-          <div class="ralph-checkmark">
-            <svg viewBox="0 0 52 52">
-              <circle class="ralph-checkmark-circle" cx="26" cy="26" r="25" />
-              <path class="ralph-checkmark-check" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
-            </svg>
-          </div>
-          <div class="ralph-celebration-text" id="ralphCelebrationText">Complete!</div>
-        </div>
-      </div>
     </div>
 
     <!-- Main Terminal Area -->
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index b9f722a3..fdc84b9b 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -820,79 +820,6 @@ body {
   text-decoration: line-through;
 }
 
-/* Completion Celebration */
-.ralph-celebration {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  background: rgba(10, 10, 10, 0.95);
-  z-index: 10;
-}
-
-.ralph-celebration.show {
-  display: flex;
-  animation: ralph-celebration-in 0.3s ease-out;
-}
-
-@keyframes ralph-celebration-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.ralph-celebration-content {
-  text-align: center;
-}
-
-.ralph-checkmark {
-  width: 60px;
-  height: 60px;
-  margin: 0 auto 0.75rem;
-}
-
-.ralph-checkmark svg {
-  width: 100%;
-  height: 100%;
-}
-
-.ralph-checkmark-circle {
-  fill: none;
-  stroke: var(--green);
-  stroke-width: 2;
-  stroke-dasharray: 166;
-  stroke-dashoffset: 166;
-  animation: ralph-circle 0.6s ease-out forwards;
-}
-
-.ralph-checkmark-check {
-  fill: none;
-  stroke: var(--green);
-  stroke-width: 3;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-dasharray: 48;
-  stroke-dashoffset: 48;
-  animation: ralph-check 0.3s ease-out 0.4s forwards;
-}
-
-@keyframes ralph-circle {
-  to { stroke-dashoffset: 0; }
-}
-
-@keyframes ralph-check {
-  to { stroke-dashoffset: 0; }
-}
-
-.ralph-celebration-text {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--green);
-}
-
 /* Empty state (legacy support) */
 .inner-state-empty {
   color: var(--text-muted);