# Phase 4: Unified Proxy Viewer UI

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

## Objective
Build a unified proxy viewer page showing ALL proxies (deploy-managed and standalone) with grouping, filtering, and real-time health indicators.

## Tasks

- [ ] Task 1: Create route `/proxies` with `+page.svelte` and `+page.ts` data loader
- [ ] Task 2: Create ProxyCard component — displays: domain, destination, SSL badge, health indicator (green/yellow/red dot), proxy type badge (managed/standalone), last health check timestamp
- [ ] Task 3: Create ProxyGroup component — collapsible section with project name header, stage sub-groups, proxy count badge
- [ ] Task 4: Create StandaloneProxyGroup component — separate collapsible section for user-created proxies
- [ ] Task 5: Implement filtering: by project, stage, health status (healthy/unhealthy/unknown), proxy type (managed/standalone), free-text search by domain/destination
- [ ] Task 6: Filter bar component with dropdown selects and search input
- [ ] Task 7: SSE integration — subscribe to proxy health events, update health indicators in real-time
- [ ] Task 8: Empty state — friendly message when no proxies exist, with link to create one
- [ ] Task 9: Add navigation link in sidebar layout (+layout.svelte)
- [ ] Task 10: Add i18n keys for proxy viewer page

## Files to Modify/Create
- `web/src/routes/proxies/+page.svelte` — NEW: Proxy viewer page
- `web/src/routes/proxies/+page.ts` — NEW: Data loader
- `web/src/lib/components/ProxyCard.svelte` — NEW: Individual proxy display
- `web/src/lib/components/ProxyGroup.svelte` — NEW: Collapsible project/stage group
- `web/src/lib/components/ProxyFilter.svelte` — NEW: Filter bar
- `web/src/routes/+layout.svelte` — Add proxies nav link
- `web/src/lib/i18n/en.ts` (or equivalent) — Add proxy viewer strings

## Acceptance Criteria
- All proxies visible: both deploy-managed and standalone
- Proxies grouped by project/stage in collapsible sections
- Health indicators show real-time status (green=healthy, red=unhealthy, yellow=unknown)
- Filtering works: project, stage, health, type, text search
- SSE updates health indicators without page refresh
- Navigation accessible from sidebar
- Responsive layout (mobile-friendly)

## Notes
- Use existing component patterns (ConfirmDialog, FormField styles, etc.)
- Follow existing Svelte 5 patterns ($state, $derived, $effect)
- The /api/proxies/all endpoint from Phase 3 provides the data source
- Health indicator should pulse/animate briefly on status change
- Consider: show proxy count in sidebar nav 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. -->