# Phase 4: UI Redesign + DX Polish

> **Goal:** Replace generic dark UI with a polished sidebar-layout developer dashboard. Add rollback, log viewer, image cleanup, and registry insight.

**Design system** (from ui-ux-pro-max + ckm-ui-styling):
- Style: Dark Mode (OLED), single-color accent green `#22C55E`, Inter font
- Layout: persistent sidebar (220px) + content; top bar shows breadcrumb + global actions
- Surface tokens: bg `#09090B`, surface `#0F1115`, elevated `#15171C`, border `#1F2228`, accent `#22C55E`, danger `#EF4444`, warn `#F59E0B`, success `#22C55E`, info `#3B82F6`
- Typography: Inter 13/14/16/20/28, monospace JetBrains Mono for hashes/paths/versions
- Components: status pill, KPI tile, sidebar nav, deploy log viewer, copy-on-click hash

---

## Task 1: Foundation — fonts, tokens, utility helpers

**Files:**
- Modify: `src/app/layout.tsx` — load Inter + JetBrains Mono via next/font
- Modify: `src/app/globals.css` — refined OLED palette, scrollbar styles, status colors
- Modify: `tailwind.config.js` — add brand tokens, monospace family
- Create: `src/components/ui/badge.tsx` — status pill (success/danger/warn/info/muted)
- Create: `src/components/ui/kpi.tsx` — KPI tile (label, value, trend optional)
- Create: `src/components/ui/copy-text.tsx` — click-to-copy mono span
- Create: `src/components/ui/empty-state.tsx` — icon + title + body + cta

## Task 2: Layout shell — sidebar + top bar

**Files:**
- Create: `src/components/layout/sidebar.tsx` — logo, primary nav (Dashboard, Projects, Targets, Deployments, Settings), active state, footer status
- Create: `src/components/layout/topbar.tsx` — breadcrumb, "Rescan" / "Add" actions, account menu
- Create: `src/components/layout/shell.tsx` — composes sidebar + topbar + main
- Modify: `src/app/page.tsx`, `src/app/projects/[id]/page.tsx`, `src/app/projects/new/page.tsx`, `src/app/deploy-targets/page.tsx`, `src/app/deploy-targets/new/page.tsx` — wrap in `<Shell>`
- Delete: `src/components/nav.tsx` (replaced by Shell)

## Task 3: Dashboard redesign

**Files:**
- Modify: `src/app/page.tsx` — header "Dashboard", KPI row (Total projects, Running, Deployed today, Failed deploys), recent activity panel (last 8 commits + last 5 deploys), project grid
- Modify: `src/components/project-card.tsx` — refined: status dot, larger name, branch badge, version mono, last commit preview, deploy status pill
- Add: `src/lib/dashboard.ts` — server helper to compute KPIs

## Task 4: Project detail redesign

**Files:**
- Modify: `src/app/projects/[id]/page.tsx` — 2-column: left = overview + actions, right = activity tabs (Deploys / Commits / Logs)
- Create: `src/components/project-overview.tsx` — refined field grid w/ copy-on-click for path/hash/remote
- Modify: `src/components/deploy-history.tsx` — table-like rows with status pill, image tag mono, time-ago, expand-on-click for log
- Modify: `src/components/commit-log.tsx` — git-graph-style left rail, hash badge, message
- Create: `src/components/deploy-log-viewer.tsx` — modal/drawer rendering ANSI-stripped logBlob with monospace, scroll-to-bottom auto, copy button

## Task 5: Login page redesign

**Files:**
- Modify: `src/app/login/page.tsx` — centered card with brand mark, app name + tagline, refined input, primary CTA, "single-password access" microcopy

## Task 6: Phase 4 features

**Files:**
- Create: `src/app/api/projects/[id]/rollback/route.ts` — POST `{ deployId }` → enqueues deploy job with old imageTag (no rebuild)
- Modify: `src/worker/jobs/deploy.ts` — if `BuildJob.skipBuild` then jump straight to deploy queue (refactor: split rollback into deploy queue directly from API)
- Modify: `src/components/deploy-history.tsx` — "Rollback to this" action menu on each successful row
- Create: `src/app/api/admin/cleanup/route.ts` — POST keeps last N images per project, prunes registry + LXC docker
- Create: `src/app/admin/page.tsx` — "Cleanup", "Registry usage", "Disk free"
- Modify: `src/app/api/projects/[id]/deploy/route.ts` — return `deployId` and SSE topic so client can stream

## Task 7: Build cache acceleration

**Files:**
- Modify: `Dockerfile` — use `npm ci --prefer-offline`, `--mount=type=cache,target=/root/.npm`
- Add: `.dockerignore` — ensure node_modules, .next, .git not in context

## Task 8: Verification

- Build app: `npm run build` (must succeed)
- Smoke trigger deploy via UI → log viewer streams → success
- Rollback to previous image → swap container → verify
- Lighthouse-style mental check: no horizontal scroll on 1024px; sidebar collapses on <768px (use `md:` breakpoint)