diff --git a/ui/src/components/chat/ChatView.tsx b/ui/src/components/chat/ChatView.tsx
index dbda402..c8e2218 100644
--- a/ui/src/components/chat/ChatView.tsx
+++ b/ui/src/components/chat/ChatView.tsx
@@ -1,6 +1,7 @@
 import { useRef, useEffect } from 'react';
 import ChatMessage from './ChatMessage';
 import ChatInput from './ChatInput';
+import ThinkingIndicator from './ThinkingIndicator';
 import ThemeToggle from '@/components/ThemeToggle';
 import type { Message, FileAttachment } from '@/lib/llm';
 
@@ -41,6 +42,9 @@ export default function ChatView({
             <ChatMessage key={message.id} message={message} />
           ))}
           
+          {/* Thinking indicator — visible before first stream token */}
+          {isLoading && !streamingContent && <ThinkingIndicator />}
+
           {/* Streaming Message */}
           {streamingContent && (
             <ChatMessage
diff --git a/ui/src/components/chat/ThinkingIndicator.tsx b/ui/src/components/chat/ThinkingIndicator.tsx
new file mode 100644
index 0000000..e73c3b8
--- /dev/null
+++ b/ui/src/components/chat/ThinkingIndicator.tsx
@@ -0,0 +1,12 @@
+export default function ThinkingIndicator() {
+  return (
+    <div className="flex justify-start py-2">
+      <div className="flex items-center gap-1.5 text-muted-foreground text-sm">
+        <span className="animate-bounce [animation-delay:0ms] h-1.5 w-1.5 rounded-full bg-muted-foreground/60" />
+        <span className="animate-bounce [animation-delay:150ms] h-1.5 w-1.5 rounded-full bg-muted-foreground/60" />
+        <span className="animate-bounce [animation-delay:300ms] h-1.5 w-1.5 rounded-full bg-muted-foreground/60" />
+        <span className="ml-1 text-xs">Thinking...</span>
+      </div>
+    </div>
+  );
+}