---
phase: 11-visual-design-responsive-layout-cleanup
plan: 1
type: execute
wave: 0
depends_on: [10-complete]
requirements: [PERF-02]
files_modified:
  - frontend/vite.config.js
  - .planning/phases/11-visual-design-responsive-layout-cleanup/11-RESEARCH.md
  - .planning/perf/phase11-baseline.html
  - .planning/perf/phase11-baseline-summary.md
autonomous: true
---

# Plan 11-01 — Bundle Baseline & UI Audit

## Objective

Capture the Phase 11 pre-optimization bundle baseline before any lazy-loading or visual cleanup begins, then record a targeted audit of the visual/responsive issues Phase 11 will address.

## Tasks

1. Wire existing `rollup-plugin-visualizer` into `frontend/vite.config.js` behind an opt-in environment flag such as `ANALYZE=true`. The dependency already exists in `frontend/package.json`.
2. Run a production build with analysis enabled and write the baseline report to `.planning/perf/phase11-baseline.html`.
3. Add `.planning/perf/phase11-baseline-summary.md` with bundle size, largest chunks, route/component observations, and the exact command used.
4. Update `11-RESEARCH.md` if execution discovers facts that differ from the refresh research.
5. Audit the frontend for Phase 11 targets:
   - synchronous non-critical route imports
   - responsive sidebar/admin sidebar gaps
   - tables or grids that overflow below `sm`/`md`
   - modal overflow below 640px
   - inconsistent form, hover, focus, active, spacing, and typography patterns
   - unreferenced files and imports

## Acceptance Criteria

- Baseline bundle report exists before any Phase 11 optimization commits.
- `vite.config.js` does not generate analyzer output unless explicitly requested.
- `11-RESEARCH.md` remains accurate after the baseline build.
- Audit notes are concrete enough that plans 11-02 through 11-06 can execute without rediscovering scope.
- `cd frontend && npm run build` succeeds with and without analysis enabled.