Worker Service
  └─> broadcastProcessingStatus(sessionId, isProcessing)
      └─> broadcastSSE({ type: 'processing_status', ... })
          └─> SSE Event Stream (/stream)
              └─> useSSE Hook (React)
                  └─> processingSessions Set<string>
                      └─> App.tsx: isProcessing={processingSessions.size > 0}
                          └─> Header.tsx: className={isProcessing ? 'spinning' : ''}
                              └─> CSS Animation: @keyframes spin

export interface StreamEvent {
  type: 'initial_load' | 'new_observation' | 'new_summary' | 'new_prompt' | 'processing_status';
  observations?: Observation[];
  summaries?: Summary[];
  prompts?: UserPrompt[];
  projects?: string[];
  observation?: Observation;
  summary?: Summary;
  prompt?: UserPrompt;
  processing?: {
    session_id: string;
    is_processing: boolean;
  };
}

/**
 * Broadcast SSE event to all connected clients
 */
private broadcastSSE(event: any): void {
  if (this.sseClients.size === 0) {
    return; // No clients connected, skip broadcast
  }

  const data = `data: ${JSON.stringify(event)}\n\n`;
  const clientsToRemove: Response[] = [];

  for (const client of this.sseClients) {
    try {
      client.write(data);
    } catch (error) {
      // Client disconnected, mark for removal
      clientsToRemove.push(client);
    }
  }

  // Clean up disconnected clients
  for (const client of clientsToRemove) {
    this.sseClients.delete(client);
  }

  if (clientsToRemove.length > 0) {
    logger.info('WORKER', `SSE cleaned up disconnected clients`, { count: clientsToRemove.length });
  }
}

/**
 * Broadcast processing status to SSE clients
 */
private broadcastProcessingStatus(claudeSessionId: string, isProcessing: boolean): void {
  this.broadcastSSE({
    type: 'processing_status',
    processing: {
      session_id: claudeSessionId,
      is_processing: isProcessing
    }
  });
}

// Notify UI that processing is active
this.broadcastProcessingStatus(session.claudeSessionId, true);

// Notify UI that processing is complete (summary is the final step)
this.broadcastProcessingStatus(session.claudeSessionId, false);

// Still mark processing as complete even if no summary was generated
this.broadcastProcessingStatus(session.claudeSessionId, false);

const [processingSessions, setProcessingSessions] = useState<Set<string>>(new Set());

case 'processing_status':
  if (data.processing) {
    const processing = data.processing;
    console.log('[SSE] Processing status:', processing);
    setProcessingSessions(prev => {
      const next = new Set(prev);
      if (processing.is_processing) {
        next.add(processing.session_id);
      } else {
        next.delete(processing.session_id);
      }
      return next;
    });
  }
  break;

// Mark session as no longer processing (summary is the final step)
setProcessingSessions(prev => {
  const next = new Set(prev);
  next.delete(summary.session_id);
  return next;
});

return { observations, summaries, prompts, projects, processingSessions, isConnected };

const { observations, summaries, prompts, projects, processingSessions, isConnected } = useSSE();

isProcessing={processingSessions.size > 0}

interface HeaderProps {
  isConnected: boolean;
  projects: string[];
  currentFilter: string;
  onFilterChange: (filter: string) => void;
  onSettingsToggle: () => void;
  sidebarOpen: boolean;
  isProcessing: boolean;  // ← Processing indicator prop
  themePreference: ThemePreference;
  onThemeChange: (theme: ThemePreference) => void;
}

export function Header({
  isConnected,
  projects,
  currentFilter,
  onFilterChange,
  onSettingsToggle,
  sidebarOpen,
  isProcessing,  // ← Received from App.tsx
  themePreference,
  onThemeChange
}: HeaderProps) {

<img src="claude-mem-logomark.webp" alt="" className={`logomark ${isProcessing ? 'spinning' : ''}`} />

.logomark {
  height: 32px;
  width: auto;
}

.logomark.spinning {
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

export const API_ENDPOINTS = {
  OBSERVATIONS: '/api/observations',
  SUMMARIES: '/api/summaries',
  PROMPTS: '/api/prompts',
  SETTINGS: '/api/settings',
  STATS: '/api/stats',
  STREAM: '/stream',  // ← SSE endpoint for processing events
} as const;

// Create skeleton items for sessions being processed that don't have summaries yet
const skeletons: FeedItem[] = [];
processingSessions.forEach(sessionId => {
  if (!sessionsWithSummaries.has(sessionId)) {
    const prompt = sessionPrompts.get(sessionId);
    skeletons.push({
      itemType: 'skeleton',
      id: sessionId,
      session_id: sessionId,
      project: prompt?.project,
      // Always use current time so skeletons appear at top of feed
      created_at_epoch: Date.now()
    });
  }
});

} else if (item.itemType === 'skeleton') {
  return <SummarySkeleton key={key} sessionId={item.session_id} project={item.project} />;

<div className="processing-indicator">
  <div className="spinner"></div>
  <span>Generating...</span>
</div>

.processing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-accent-focus);
  font-size: 11px;
  font-weight: 500;
  margin-left: auto;
}

.spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-border-primary);
  border-top-color: var(--color-accent-focus);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.summary-skeleton {
  opacity: 0.7;
}

.summary-skeleton .processing-indicator {
  margin-left: auto;
}

.skeleton-line {
  height: 16px;
  background: linear-gradient(90deg, var(--color-skeleton-base) 25%, var(--color-skeleton-highlight) 50%, var(--color-skeleton-base) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-title {
  height: 20px;
  width: 80%;
  margin-bottom: 10px;
}

.skeleton-subtitle {
  height: 16px;
  width: 90%;
}

.skeleton-subtitle.short {
  width: 60%;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}