diff --git a/frontend/packages/inspector/index.html b/frontend/packages/inspector/index.html
index 181546f..a527d32 100644
--- a/frontend/packages/inspector/index.html
+++ b/frontend/packages/inspector/index.html
@@ -892,6 +892,34 @@
         51%, 100% { opacity: 0; }
       }
 
+      .thinking-indicator {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 0;
+      }
+
+      .thinking-dot {
+        width: 6px;
+        height: 6px;
+        background: var(--muted);
+        border-radius: 50%;
+        animation: thinking 1.4s ease-in-out infinite;
+      }
+
+      .thinking-dot:nth-child(2) {
+        animation-delay: 0.2s;
+      }
+
+      .thinking-dot:nth-child(3) {
+        animation-delay: 0.4s;
+      }
+
+      @keyframes thinking {
+        0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
+        30% { opacity: 1; transform: scale(1); }
+      }
+
       /* Input Area */
       .approvals-inline {
         padding: 12px 16px;
diff --git a/frontend/packages/inspector/src/components/chat/ChatMessages.tsx b/frontend/packages/inspector/src/components/chat/ChatMessages.tsx
index 49f7049..8136d75 100644
--- a/frontend/packages/inspector/src/components/chat/ChatMessages.tsx
+++ b/frontend/packages/inspector/src/components/chat/ChatMessages.tsx
@@ -61,6 +61,12 @@ const ChatMessages = ({
                   {entry.deltaText}
                   {isInProgress && <span className="cursor" />}
                 </span>
+              ) : isInProgress ? (
+                <span className="thinking-indicator">
+                  <span className="thinking-dot" />
+                  <span className="thinking-dot" />
+                  <span className="thinking-dot" />
+                </span>
               ) : (
                 <span className="muted">No content yet.</span>
               )}