# Phase 5: Stale Containers UI **Status:** ⬜ Not Started **Parent plan:** [PLAN.md](./PLAN.md) **Domain:** frontend ## Objective Build the stale containers dashboard widget and dedicated view, with cleanup actions and settings configuration. ## Tasks - [ ] Task 1: Add API functions in api.ts: fetchStaleContainers, cleanupStaleContainer, bulkCleanupStaleContainers - [ ] Task 2: Create StaleContainerCard component — shows: container name, project, stage, image tag, last alive timestamp, "X days stale" badge (color-coded by severity) - [ ] Task 3: Create stale containers section on dashboard (+page.svelte) — count badge, mini-list of top 5 offenders, "View all" link - [ ] Task 4: Create dedicated route `/containers/stale` with full stale container list - [ ] Task 5: Individual cleanup action — ConfirmDialog with warning, calls cleanup API - [ ] Task 6: Bulk cleanup action — "Clean up all" button with confirmation, progress indicator - [ ] Task 7: Settings integration — add stale_threshold_days field to settings page with validation (min 1 day) - [ ] Task 8: Add navigation link or sub-nav for stale containers - [ ] Task 9: Add i18n keys for stale containers ## Files to Modify/Create - `web/src/lib/api.ts` — Add stale container API functions - `web/src/lib/types.ts` — Add StaleContainer interface - `web/src/lib/components/StaleContainerCard.svelte` — NEW: Stale container display - `web/src/routes/+page.svelte` — Add stale containers dashboard widget - `web/src/routes/containers/stale/+page.svelte` — NEW: Dedicated stale view - `web/src/routes/containers/stale/+page.ts` — NEW: Data loader - `web/src/routes/settings/+page.svelte` — Add stale threshold setting field - `web/src/routes/+layout.svelte` — Add nav link if needed ## Acceptance Criteria - Dashboard shows stale container count and top offenders - Dedicated page lists all stale containers with details - Individual cleanup removes container with confirmation - Bulk cleanup works with progress feedback - Settings page allows configuring stale threshold - Severity coloring: 7-14 days = yellow, 14+ days = red - Responsive layout ## Notes - Reuse existing ConfirmDialog for destructive actions - Dashboard widget should not slow down initial page load (lazy load or small payload) - Stale container data comes from GET /api/containers/stale (Phase 2) - Settings update uses existing PUT /api/settings endpoint ## Review Checklist - [ ] All tasks completed - [ ] Code follows project conventions - [ ] No unintended side effects - [ ] Build passes - [ ] Tests pass (new + existing) ## Handoff to Next Phase