# Phase 7: Event Log UI

**Status:** ⬜ Not Started
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** frontend

## Objective
Build a persistent, searchable event log viewer with real-time streaming, filters, and resource linking.

## Tasks

- [ ] Task 1: Create route `/events` with `+page.svelte` and `+page.ts` data loader
- [ ] Task 2: Create EventLogEntry component — timestamp, severity badge (info=blue, warn=yellow, error=red), source icon (container/proxy/deploy/system), message text, expandable metadata section
- [ ] Task 3: Create EventLogFilter component — filters: severity multi-select, source multi-select, date range picker (start/end), free-text search
- [ ] Task 4: Implement pagination — "Load more" button at bottom (offset/limit pattern matching API)
- [ ] Task 5: SSE integration — subscribe to event_log events, prepend new entries at top with subtle highlight animation
- [ ] Task 6: Quick actions — clickable links to related resources (e.g., click container name → go to project/stage, click proxy domain → go to proxy viewer)
- [ ] Task 7: Stats header — show counts by severity (from GET /api/events/log/stats), with colored badges
- [ ] Task 8: Add navigation link in sidebar
- [ ] Task 9: Add i18n keys for event log page

## Files to Modify/Create
- `web/src/routes/events/+page.svelte` — NEW: Event log page
- `web/src/routes/events/+page.ts` — NEW: Data loader
- `web/src/lib/components/EventLogEntry.svelte` — NEW: Event entry display
- `web/src/lib/components/EventLogFilter.svelte` — NEW: Filter controls
- `web/src/routes/+layout.svelte` — Add events nav link
- `web/src/lib/sse.ts` — Add event_log SSE subscription helper (if needed)

## Acceptance Criteria
- Event log shows all persistent events with severity and source
- Filters work: severity, source, date range, text search
- New events stream in real-time via SSE without page refresh
- Pagination loads older events on demand
- Quick actions link to related resources
- Stats header shows severity distribution
- Responsive layout

## Notes
- Follow existing SSE patterns from deploy logs viewer
- Date range filter: consider "last hour", "last 24h", "last 7 days" presets + custom range
- Metadata section is JSON — render as formatted key-value pairs, not raw JSON
- Resource linking: parse source and metadata to construct navigation URLs
- Consider: auto-scroll to top when new event arrives (if user is at top), otherwise show "N new events" badge

## Review Checklist
- [ ] All tasks completed
- [ ] Code follows project conventions
- [ ] No unintended side effects
- [ ] Build passes
- [ ] Tests pass (new + existing)

## Handoff to Next Phase
<!-- Filled in by the implementation agent after completing this phase. -->