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

@@ -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);

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 -->

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);