-
- );
-}
-```
-
-2. Add to Feed component:
-```typescript
-// src/ui/viewer/components/Feed.tsx
-import { MyCard } from './cards/MyCard';
-
-// In render:
-{myData.map(item => {data.title}
- {data.content}
- 
+```
+
+**Purpose**: The core of the processing indicator. When `isProcessing` is `true`, adds the `spinning` CSS class to the logomark image, triggering the rotation animation.
+
+**File location**: `src/ui/viewer/components/Header.tsx:31`
+
+**Rendered HTML Examples**:
+- Not processing: ``
+- Processing: ``
+
+---
+
+## 6. CSS Styling & Animation
+
+### File: `plugin/ui/viewer.html` (compiled output)
+
+**Lines 342-349: Logomark and spinning class styles**
+
+```css
+.logomark {
+ height: 32px;
+ width: auto;
+}
+
+.logomark.spinning {
+ animation: spin 1.5s linear infinite;
+}
+```
+
+**Purpose**:
+- `.logomark`: Base styles for the logo image (32px height, auto width)
+- `.logomark.spinning`: Applies the spin animation when processing is active
+ - **Duration**: 1.5 seconds per rotation
+ - **Timing**: Linear (constant speed)
+ - **Iteration**: Infinite (continues until class is removed)
+
+**File location**: `plugin/ui/viewer.html:342-349`
+
+---
+
+**Lines 701-705: Spin animation keyframes**
+
+```css
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+```
+
+**Purpose**: Defines the rotation animation. Rotates the element from 0° (implicit) to 360° (full circle).
+
+**File location**: `plugin/ui/viewer.html:701-705`
+
+---
+
+## 7. API Endpoint: Stream
+
+### File: `src/ui/viewer/constants/api.ts`
+
+**Line 11: SSE stream endpoint**
+
+```typescript
+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;
+```
+
+**Purpose**: Centralized API endpoint constant. The `/stream` endpoint is used by `useSSE.ts` to establish the EventSource connection.
+
+---
+
+## Bonus: Feed Skeleton Processing Indicator
+
+While not part of the logomark spinner, the feed also shows processing state with skeleton cards and a smaller spinner.
+
+### File: `src/ui/viewer/components/Feed.tsx`
+
+**Lines 66-80: Create skeleton items for processing sessions**
+
+```typescript
+// 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()
+ });
+ }
+});
+```
+
+**Purpose**: Creates temporary skeleton cards for sessions currently being processed (from `processingSessions` Set).
+
+---
+
+**Line 104: Render SummarySkeleton component**
+
+```typescript
+} else if (item.itemType === 'skeleton') {
+ return
+
+ Generating...
+
+```
+
+**Purpose**: Shows a smaller inline spinner with "Generating..." text in skeleton summary cards.
+
+---
+
+### CSS for Feed Spinner
+
+**Lines 682-690: Processing indicator container**
+
+```css
+.processing-indicator {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ color: var(--color-accent-focus);
+ font-size: 11px;
+ font-weight: 500;
+ margin-left: auto;
+}
+```
+
+---
+
+**Lines 692-700: Small spinner for skeleton cards**
+
+```css
+.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;
+}
+```
+
+**Purpose**: Smaller circular spinner (12px) with faster rotation (0.8s) used in skeleton cards. Uses the same `@keyframes spin` animation.
+
+---
+
+**Lines 711-715: Skeleton card opacity**
+
+```css
+.summary-skeleton {
+ opacity: 0.7;
+}
+
+.summary-skeleton .processing-indicator {
+ margin-left: auto;
+}
+```
+
+---
+
+**Lines 715-740: Skeleton line animations (shimmer effect)**
+
+```css
+.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;
+ }
+}
+```
+
+**Purpose**: Creates animated placeholder lines with a shimmer effect while summary is being generated.
+
+---
+
+## Summary: Complete Processing Flow
+
+1. **User submits prompt** → Claude Code session starts
+2. **Worker receives summarize request** → `worker-service.ts:817` calls `broadcastProcessingStatus(sessionId, true)`
+3. **SSE broadcasts** → `{ type: 'processing_status', processing: { session_id: '...', is_processing: true } }`
+4. **React receives event** → `useSSE.ts:90-104` adds sessionId to `processingSessions` Set
+5. **State flows down** → `App.tsx:92` converts Set size to boolean → `Header.tsx:31` receives `isProcessing={true}`
+6. **CSS class applied** → `className="logomark spinning"` triggers animation
+7. **Logomark spins** → CSS animation `@keyframes spin` rotates 360° every 1.5s
+8. **Feed shows skeleton** → `Feed.tsx:66-80` creates skeleton cards for processing sessions
+9. **Summary completes** → `worker-service.ts:1153` calls `broadcastProcessingStatus(sessionId, false)`
+10. **SSE broadcasts** → `{ type: 'processing_status', processing: { session_id: '...', is_processing: false } }`
+11. **React clears state** → `useSSE.ts:90-104` removes sessionId from Set
+12. **Animation stops** → `isProcessing={false}` removes `spinning` class, logomark stops rotating
+
+---
+
+## File Summary
+
+| File | Lines | Purpose |
+|------|-------|---------|
+| `src/ui/viewer/types.ts` | 45-58 | Defines `StreamEvent` interface with `processing_status` type |
+| `src/services/worker-service.ts` | 247-285, 817, 1153, 1183 | Broadcasts processing status via SSE |
+| `src/ui/viewer/hooks/useSSE.ts` | 12, 73-78, 90-104, 125 | Manages `processingSessions` Set from SSE events |
+| `src/ui/viewer/App.tsx` | 20, 92 | Converts Set to boolean, passes to Header |
+| `src/ui/viewer/components/Header.tsx` | 12, 24, 31 | Applies `spinning` class to logomark |
+| `plugin/ui/viewer.html` (CSS) | 342-349, 701-705 | Styles logomark and defines spin animation |
+| `src/ui/viewer/components/Feed.tsx` | 66-80, 104 | Creates skeleton cards for processing sessions |
+| `src/ui/viewer/components/SummarySkeleton.tsx` | 14-17 | Renders inline spinner in skeleton cards |
+| `plugin/ui/viewer.html` (CSS) | 682-740 | Styles for skeleton cards and inline spinner |
+
+---
+
+## Key Design Decisions
+
+1. **Set vs Boolean**: Using a `Set").replace(x4," ");return` +\v\f\r\x1B !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\xA5]^_\`abcdefghijklmnopqrstuvwxyz{|}\u203E\x7F\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD`},hproman8:{type:"_sbcs",chars:"\x80\x81\x82\x83\x84\x85\x86\x87\x88\x89\x8A\x8B\x8C\x8D\x8E\x8F\x90\x91\x92\x93\x94\x95\x96\x97\x98\x99\x9A\x9B\x9C\x9D\x9E\x9F\xA0\xC0\xC2\xC8\xCA\xCB\xCE\xCF\xB4\u02CB\u02C6\xA8\u02DC\xD9\xDB\u20A4\xAF\xDD\xFD\xB0\xC7\xE7\xD1\xF1\xA1\xBF\xA4\xA3\xA5\xA7\u0192\xA2\xE2\xEA\xF4\xFB\xE1\xE9\xF3\xFA\xE0\xE8\xF2\xF9\xE4\xEB\xF6\xFC\xC5\xEE\xD8\xC6\xE5\xED\xF8\xE6\xC4\xEC\xD6\xDC\xC9\xEF\xDF\xD4\xC1\xC3\xE3\xD0\xF0\xCD\xCC\xD3\xD2\xD5\xF5\u0160\u0161\xDA\u0178\xFF\xDE\xFE\xB7\xB5\xB6\xBE\u2014\xBC\xBD\xAA\xBA\xAB\u25A0\xBB\xB1\uFFFD"},macintosh:{type:"_sbcs",chars:"\xC4\xC5\xC7\xC9\xD1\xD6\xDC\xE1\xE0\xE2\xE4\xE3\xE5\xE7\xE9\xE8\xEA\xEB\xED\xEC\xEE\xEF\xF1\xF3\xF2\xF4\xF6\xF5\xFA\xF9\xFB\xFC\u2020\xB0\xA2\xA3\xA7\u2022\xB6\xDF\xAE\xA9\u2122\xB4\xA8\u2260\xC6\xD8\u221E\xB1\u2264\u2265\xA5\xB5\u2202\u2211\u220F\u03C0\u222B\xAA\xBA\u2126\xE6\xF8\xBF\xA1\xAC\u221A\u0192\u2248\u2206\xAB\xBB\u2026\xA0\xC0\xC3\xD5\u0152\u0153\u2013\u2014\u201C\u201D\u2018\u2019\xF7\u25CA\xFF\u0178\u2044\xA4\u2039\u203A\uFB01\uFB02\u2021\xB7\u201A\u201E\u2030\xC2\xCA\xC1\xCB\xC8\xCD\xCE\xCF\xCC\xD3\xD4\uFFFD\xD2\xDA\xDB\xD9\u0131\u02C6\u02DC\xAF\u02D8\u02D9\u02DA\xB8\u02DD\u02DB\u02C7"},ascii:{type:"_sbcs",chars:"\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD"},tis620:{type:"_sbcs",chars:"\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\uFFFD\u0E01\u0E02\u0E03\u0E04\u0E05\u0E06\u0E07\u0E08\u0E09\u0E0A\u0E0B\u0E0C\u0E0D\u0E0E\u0E0F\u0E10\u0E11\u0E12\u0E13\u0E14\u0E15\u0E16\u0E17\u0E18\u0E19\u0E1A\u0E1B\u0E1C\u0E1D\u0E1E\u0E1F\u0E20\u0E21\u0E22\u0E23\u0E24\u0E25\u0E26\u0E27\u0E28\u0E29\u0E2A\u0E2B\u0E2C\u0E2D\u0E2E\u0E2F\u0E30\u0E31\u0E32\u0E33\u0E34\u0E35\u0E36\u0E37\u0E38\u0E39\u0E3A\uFFFD\uFFFD\uFFFD\uFFFD\u0E3F\u0E40\u0E41\u0E42\u0E43\u0E44\u0E45\u0E46\u0E47\u0E48\u0E49\u0E4A\u0E4B\u0E4C\u0E4D\u0E4E\u0E4F\u0E50\u0E51\u0E52\u0E53\u0E54\u0E55\u0E56\u0E57\u0E58\u0E59\u0E5A\u0E5B\uFFFD\uFFFD\uFFFD\uFFFD"}}});var zf=F(Uf=>{"use strict";var Ms=Da().Buffer;Uf._dbcs=Zr;var At=-1,Mf=-2,ar=-10,Or=-1e3,Ls=new Array(256),Zn=-1;for(to=0;to<256;to++)Ls[to]=At;var to;function Zr(r,e){if(this.encodingName=r.encodingName,!r)throw new Error("DBCS codec is called without the data.");if(!r.table)throw new Error("Encoding '"+this.encodingName+"' has no data.");var a=r.table();this.decodeTables=[],this.decodeTables[0]=Ls.slice(0),this.decodeTableSeq=[];for(var t=0;t
").replace(Mk," ");return` @@ -28,45 +28,36 @@ return fn.apply(this, arguments)
`+e+`-`}pg.exports=S4;function S4(t,e,a){var r=a||{},s=r.env||process.env.NODE_ENV||"development",i=r.onerror;return function(n){var o,l,c;if(!n&&cg(e)){wu("cannot 404 after headers sent");return}if(n?(c=T4(n),c===void 0?c=O4(e):o=P4(n),l=R4(n,c,s)):(c=404,l="Cannot "+t.method+" "+h4(k4(t))),wu("default %s",c),n&&i&&_4(i,n,t,e),cg(e)){wu("cannot %d after headers sent",c),t.socket&&t.socket.destroy();return}C4(t,e,c,o,l)}}function P4(t){if(!(!t.headers||typeof t.headers!="object")){for(var e=Object.create(null),a=Object.keys(t.headers),r=0;r