From abf81a11767ba9f3f7331fa420bd82ccfc3fe991 Mon Sep 17 00:00:00 2001
From: andrepimenta <andrepimenta7@gmail.com>
Date: Tue, 2 Dec 2025 00:07:08 +0000
Subject: [PATCH] Add morphing orange dot processing indicator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/script.ts    | 30 +++++++++++++++++++++++++++
 src/ui-styles.ts | 54 +++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 83 insertions(+), 1 deletion(-)

diff --git a/src/script.ts b/src/script.ts
index 897a36b..3d5b069 100644
--- a/src/script.ts
+++ b/src/script.ts
@@ -125,6 +125,7 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
 			}
 			
 			messagesDiv.appendChild(messageDiv);
+			moveProcessingIndicatorToLast();
 			scrollToBottomIfNeeded(messagesDiv, shouldScroll);
 		}
 
@@ -247,6 +248,7 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
 			}
 			
 			messagesDiv.appendChild(messageDiv);
+			moveProcessingIndicatorToLast();
 			scrollToBottomIfNeeded(messagesDiv, shouldScroll);
 		}
 
@@ -394,6 +396,7 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
 			}
 			
 			messagesDiv.appendChild(messageDiv);
+			moveProcessingIndicatorToLast();
 			scrollToBottomIfNeeded(messagesDiv, shouldScroll);
 		}
 
@@ -952,6 +955,31 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
 			requestStartTime = null;
 		}
 
+		function showProcessingIndicator() {
+			// Remove any existing indicator first
+			hideProcessingIndicator();
+
+			// Create the indicator and append after all messages
+			const indicator = document.createElement('div');
+			indicator.className = 'processing-indicator';
+			indicator.innerHTML = '<div class="morph-dot"></div>';
+			messagesDiv.appendChild(indicator);
+		}
+
+		function hideProcessingIndicator() {
+			const indicator = document.querySelector('.processing-indicator');
+			if (indicator) {
+				indicator.remove();
+			}
+		}
+
+		function moveProcessingIndicatorToLast() {
+			// Only move if we're processing
+			if (isProcessing) {
+				showProcessingIndicator();
+			}
+		}
+
 		// Auto-resize textarea
 		function adjustTextareaHeight() {
 			// Reset height to calculate new height
@@ -2008,10 +2036,12 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
 						startRequestTimer(message.data.requestStartTime);
 						showStopButton();
 						disableButtons();
+						showProcessingIndicator();
 					} else {
 						stopRequestTimer();
 						hideStopButton();
 						enableButtons();
+						hideProcessingIndicator();
 					}
 					updateStatusWithTotals();
 					break;
diff --git a/src/ui-styles.ts b/src/ui-styles.ts
index 80eac90..d95da60 100644
--- a/src/ui-styles.ts
+++ b/src/ui-styles.ts
@@ -1181,7 +1181,6 @@ const styles = `
         align-items: center;
         justify-content: space-between;
         gap: 8px;
-        margin-bottom: 8px;
     }
 
     .diff-file-path {
@@ -2928,6 +2927,59 @@ const styles = `
         overflow: hidden;
         text-overflow: ellipsis;
     }
+
+    /* Processing indicator - morphing orange dot */
+    .processing-indicator {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        padding: 12px 0;
+        margin-top: 8px;
+    }
+
+    .processing-indicator .morph-dot {
+        width: 8px;
+        height: 8px;
+        background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
+        box-shadow: 0 0 8px rgba(255, 149, 0, 0.5);
+        animation: morphShape 3s ease-in-out infinite;
+    }
+
+    @keyframes morphShape {
+        0%, 100% {
+            border-radius: 50%;
+            transform: scale(1) rotate(0deg);
+        }
+        15% {
+            border-radius: 50%;
+            transform: scale(1.3) rotate(0deg);
+        }
+        25% {
+            border-radius: 20%;
+            transform: scale(1) rotate(45deg);
+        }
+        40% {
+            border-radius: 20%;
+            transform: scale(1.2) rotate(90deg);
+        }
+        50% {
+            border-radius: 50% 50% 50% 0%;
+            transform: scale(1) rotate(135deg);
+        }
+        65% {
+            border-radius: 0%;
+            transform: scale(1.3) rotate(180deg);
+        }
+        75% {
+            border-radius: 50% 0% 50% 0%;
+            transform: scale(1) rotate(270deg);
+        }
+        85% {
+            border-radius: 30%;
+            transform: scale(1.2) rotate(315deg);
+        }
+    }
 </style>`
 
 export default styles
\ No newline at end of file