feat: Add real-time queue depth indicator to viewer UI

Implements a visual badge that displays the count of active work items (queued + currently processing) in the worker service. The badge appears next to the claude-mem logo and updates in real-time via SSE.

Features:
- Shows count of pending messages + active SDK generators
- Only displays when queueDepth > 0
- Subtle pulse animation for visual feedback
- Theme-aware styling

Backend changes:
- Added getTotalActiveWork() method to SessionManager
- Updated worker-service to broadcast queueDepth via SSE
- Enhanced processing status API endpoint

Frontend changes:
- Updated Header component to display queue bubble
- Enhanced useSSE hook to track queueDepth state
- Added CSS styling with pulse animation

Closes #122
Closes #96
Closes #97

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

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

src/ui/viewer/components/Header.tsx

@@ -10,6 +10,7 @@ interface HeaderProps {
   onSettingsToggle: () => void;
   sidebarOpen: boolean;
   isProcessing: boolean;
+  queueDepth: number;
   themePreference: ThemePreference;
   onThemeChange: (theme: ThemePreference) => void;
 }
@@ -22,13 +23,21 @@ export function Header({
   onSettingsToggle,
   sidebarOpen,
   isProcessing,
+  queueDepth,
   themePreference,
   onThemeChange
 }: HeaderProps) {
   return (
     <div className="header">
       <h1>
-        <img src="claude-mem-logomark.webp" alt="" className={`logomark ${isProcessing ? 'spinning' : ''}`} />
+        <div style={{ position: 'relative', display: 'inline-block' }}>
+          <img src="claude-mem-logomark.webp" alt="" className={`logomark ${isProcessing ? 'spinning' : ''}`} />
+          {queueDepth > 0 && (
+            <div className="queue-bubble">
+              {queueDepth}
+            </div>
+          )}
+        </div>
         <span className="logo-text">claude-mem</span>
       </h1>
       <div className="status">