# Phase 8: Frontend Design Consistency Review

**Status:** ✅ Done
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** frontend

## Objective
Review all new frontend UI created in Phases 5-6 for visual consistency, design quality, and UX polish using the frontend-design skill agent. Fix any issues found.

## Tasks

- [x] Task 1: Review Audio Processing Templates section for design consistency
  - Card layout, spacing, typography alignment with existing sections
  - Filter editor modal — controls alignment, visual hierarchy, grouping
  - Responsive behavior at different viewport widths
- [x] Task 2: Review Processed Audio Source cards for design consistency
  - Card style matches existing source cards (capture, picture, value sources)
  - EntitySelect pickers are visually consistent
  - Type badges/icons are clear and distinguishable
- [x] Task 3: Review Capture Audio Source card (relabeled)
  - Label/icon updates look correct
  - No visual regressions from the rename
- [x] Task 4: Review source type picker/creation flow
  - Type selector is clear and accessible
  - Transition between types is smooth
  - Empty states handled properly
- [x] Task 5: Review real-time audio preview UI
  - Spectrum visualization looks polished
  - Source picker and controls are well-placed
  - Loading/error states
- [x] Task 6: Fix all design issues found in Tasks 1-5
  - CSS adjustments for spacing, alignment, typography
  - Icon/color consistency
  - Dark mode compatibility (if applicable)
  - Hover/focus/active states on interactive elements
- [x] Task 7: Cross-browser spot-check (if applicable)

## Files to Modify/Create
- `static/css/dashboard.css` — **modify** — design fixes
- `static/js/features/audio-processing-templates.ts` — **modify** — UX fixes
- `static/js/features/audio-processing-template-modal.ts` — **modify** — UX fixes
- `static/js/features/audio-sources.ts` — **modify** — UX fixes
- Any template/HTML files — **modify** — structural fixes

## Acceptance Criteria
- All new UI sections are visually consistent with existing sections
- No orphaned styles or visual regressions
- Filter editor is intuitive and well-organized
- Cards, modals, and controls follow existing design language
- Interactive elements have proper hover/focus/active states

## Notes
- This phase uses the frontend-design skill agent for review
- Focus on consistency with existing UI, not a complete redesign
- The project uses vanilla CSS (no framework) — fixes must use the existing stylesheet approach

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

## Handoff to Next Phase
<!-- N/A — final phase -->