feat(frontend): add real-time SSE log streaming with LiveLogViewer, fixes #329

[samarthsugandhi]

Summary

Adds a LiveLogViewer component to TaskDetails that streams real-time
scan output via the existing SSE endpoint (/task/{taskId}/stream),
rendering stdout and stderr lines with distinct visual treatment,
auto-scroll with pause control, and live/terminated status indicators.
Closes #329.

Changes

New files

• frontend/src/components/LiveLogViewer.tsx — real-time log viewer with:
  • Animated live indicator during active streams
  • stdout (silver) vs stderr (amber) line coloring
  • Line numbers and stream type badges per row
  • Filter input, Pause/Resume scroll toggle, Copy log button
  • Auto-scroll follows new lines; stops when paused
  • Graceful empty state for both live-awaiting and no-output cases

Modified files

• frontend/src/pages/TaskDetails.tsx:
  • Added logLines: LogLine[], isStreaming, copiedLog state
  • EventSource output handler now parses structured
    { line, stream, ts } events AND legacy { chunk } format
  • Added done and error_event SSE sentinel handlers that
    close the stream and trigger a final loadTask() refresh
  • termination_reason field in status events surfaces
    terminated:timeout / terminated:memory_limit as a
    distinct status badge
  • Raw Output tab renders LiveLogViewer when streaming or
    log lines exist; falls back to the existing static viewer
    for completed tasks loaded from stored results
  • Added copyLog handler that copies structured log lines

How to test

1. Start a scan and open Task Details → go to Raw Output tab
2. Confirm the green Live_Stream pulse indicator appears
3. Confirm stdout lines render in silver, stderr lines in amber
4. Confirm auto-scroll follows new output as it arrives
5. Click Pause_Scroll — confirm scroll stops while lines keep arriving
6. Click Resume_Scroll — confirm it jumps to latest line
7. Type in the filter box — confirm only matching lines show
8. Click Copy_Log — paste into editor and confirm all lines present
9. Let the scan complete — confirm stream closes and results load
10. Revisit a completed task — confirm static fallback viewer renders

Notes

• No backend changes — integrates with the existing
  /task/{taskId}/stream SSE route
• Backward-compatible: handles both { chunk } (legacy) and
  { line, stream, ts } (structured) output event formats
• EventSource is torn down on component unmount via the
  useEffect cleanup function — no zombie connections

Closes #329

[utksh1]

This overlaps the same TaskDetails/EventSource area as #410, which now has the broader backend-backed phase implementation and test coverage. Please rebase on top of #410/main after it lands and integrate the live log viewer without regressing phase events or completed-task raw-output replay. Please also add focused frontend tests for output chunks, stderr labels, and completed-task replay so the streaming UI is protected.

[samarthsugandhi]

Hi @utksh1 — addressed all three points:

1. Rebased on top of main after feat(ui): progressive scan phase indicators with real-time SSE updates #410 landed — TaskDetails.tsx
   conflict resolved preserving both phase event handling from
   feat(ui): progressive scan phase indicators with real-time SSE updates #410 and LiveLogViewer integration without regression.
2. Added LiveLogViewer.test.tsx with 12 focused unit tests covering:
   stdout chunk rendering, stderr label and ERR badge, stderr count,
   Live_Stream indicator, awaiting/no-output empty states, filter
   input, onCopy callback, copied label, line count, and
   Pause/Resume scroll toggle.
3. Completed-task raw-output replay fallback static viewer is
   preserved unchanged.

Ready for re-review.

[utksh1]

Re-reviewed after the latest push. Still blocked: real-time log streaming needs to preserve the current task stream contract, handle reconnect/terminal states without duplicate output, and include tests for SSE lifecycle and fallback/error behavior before approval.