Add morphing orange dot processing indicator

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

Co-Authored-By: Claude <noreply@anthropic.com>

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;

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