Feature: Add progress indicator for large file processing

[ojfbot]

Feature Request

Add visual progress indicators when processing large files (>5MB) for summarization and chat operations.

Problem

Currently, when processing large PDFs or documents:

• No feedback is provided to the user during processing
• API requests may timeout for very large files (>10MB)
• Users don't know if the operation is stuck or progressing

Proposed Solution

1. Frontend Progress UI

• Show determinate or indeterminate progress bar during:
  • PDF text extraction
  • AI summarization
  • First chat message (document context loading)
• Display estimated time or percentage complete
• Allow cancellation for long-running operations

2. Backend Streaming Progress

• Implement chunked processing for large documents
• Stream progress updates via SSE:

  data: {"type": "progress", "percent": 25, "stage": "extracting_text"}
  data: {"type": "progress", "percent": 50, "stage": "generating_summary"}
  data: {"type": "progress", "percent": 75, "stage": "analyzing_content"}
  data: {"type": "complete", "result": {...}}

3. File Size Thresholds

• < 1MB: No progress indicator (instant)
• 1-5MB: Indeterminate spinner
• > 5MB: Determinate progress bar with stages
• > 10MB: Background processing with notification

Implementation Notes

API Changes (bio-files.ts)

// Summarize endpoint with progress
router.post('/files/:fileId/summarize', async (req, res) => {
  const fileSize = file.size
  
  if (fileSize > 10 * 1024 * 1024) {
    // Queue for background processing
    await queueSummarization(fileId)
    return res.json({ queued: true, estimatedTime: '2-3 minutes' })
  }
  
  // For smaller files, stream progress
  res.setHeader('Content-Type', 'text/event-stream')
  
  emitProgress(res, 25, 'extracting_text')
  const text = await parseDocument(file)
  
  emitProgress(res, 50, 'generating_summary')
  const summary = await agent.summarize(text)
  
  emitProgress(res, 100, 'complete')
  res.write(`data: ${JSON.stringify({ type: 'complete', result: summary })}\n\n`)
})

UI Component (DocumentPreviewModal.tsx)

{loading && fileSize > 5 * 1024 * 1024 && (
  <ProgressBar 
    label={`Processing ${(progress.percent).toFixed(0)}%`}
    helperText={progressStageText[progress.stage]}
    value={progress.percent}
  />
)}

Acceptance Criteria

• Progress indicator shows for files > 5MB
• Progress updates stream in real-time
• User can cancel long-running operations
• Files > 10MB process in background with notification
• Progress persists if user navigates away
• Error states show clear messaging
• Works for both summarization and chat operations

Related

• PR Bio Dashboard File Interaction Buttons (Issue #12) #57 (Bio Dashboard File Interactions)
• Performance section of PR review

Priority

Medium - Improves UX for large files but not blocking core functionality

---

🤖 Generated with Claude Code