---
phase: 11-visual-design-responsive-layout-cleanup
plan: 1
subsystem: frontend/build
tags: [perf, audit, bundle, baseline]
dependency_graph:
  requires: [10-complete]
  provides: [phase11-bundle-baseline, phase11-audit]
  affects: [frontend/vite.config.js, .planning/perf/]
tech_stack:
  added: []
  patterns: [rollup-plugin-visualizer behind ANALYZE=true env flag]
key_files:
  created:
    - .planning/perf/phase11-baseline.html
    - .planning/perf/phase11-baseline-summary.md
  modified:
    - frontend/vite.config.js
    - .gitignore
decisions:
  - "Async defineConfig factory: visualizer dynamically imported only when ANALYZE=true; zero overhead on normal builds"
  - "stats.html added to .gitignore; canonical copy stored at .planning/perf/phase11-baseline.html"
  - "FileManagerView stays synchronous for / per D-10; 5 other user routes are lazy-load candidates for 11-02"
  - "AccountView.vue is confirmed orphaned (router redirects /account → /settings without rendering it)"
metrics:
  duration_minutes: 3
  tasks_completed: 5
  files_created: 2
  files_modified: 2
  completed_date: "2026-06-16"
---

# Phase 11 Plan 1: Bundle Baseline & UI Audit Summary

Wired `rollup-plugin-visualizer` behind `ANALYZE=true` opt-in, captured the pre-optimization bundle baseline, and completed a full frontend audit to ground plans 11-02 through 11-06.

## What Was Built

### Task 1 — vite.config.js analyzer wiring

`frontend/vite.config.js` converted from a static `defineConfig` object to an async factory. The visualizer is dynamically imported (`import('rollup-plugin-visualizer')`) only when `ANALYZE=true` is present in the environment, ensuring zero overhead on normal `npm run build` runs. `frontend/stats.html` added to `.gitignore` since it is a build artifact.

### Tasks 2-3 — Bundle baseline

Ran `cd frontend && ANALYZE=true npm run build`. Committed the report to `.planning/perf/phase11-baseline.html` (225 kB interactive treemap). Added `phase11-baseline-summary.md` with chunk sizes, route audit table, and per-plan findings.

**Key numbers:**
- Main bundle: 264.63 kB raw / 89.34 kB gzip
- CSS: 98.74 kB raw / 17.12 kB gzip (Tailwind purged)
- 5 user routes still synchronous in main bundle → lazy-load in 11-02

### Tasks 4-5 — Research validation and frontend audit

Build output confirmed `11-RESEARCH.md` findings exactly — no updates needed. Audit documented in `phase11-baseline-summary.md`:

**Synchronous routes for 11-02:** `TopicsView`, `DocumentView`, `SettingsView`, `CloudStorageView`, `CloudFolderView` (5 routes; `FileManagerView` stays synchronous per D-10).

**Responsive gaps for 11-03:**
- `App.vue` and `AdminLayout.vue`: desktop-only shell; no hamburger, no drawer, no mobile nav
- `StorageBrowser.vue`: 5-column `grid-cols` stays fixed even when last 2 columns are hidden below `md`/`sm`; needs responsive `grid-cols` variant
- Row action buttons `p-1.5` are ~26px — below `md` touch target minimum of 36px

**Modal overflow for 11-04:**
- `ShareModal.vue`, `CloudCredentialModal.vue`, `FolderDeleteModal.vue`: no `max-h` or `overflow-y-auto`
- `DocumentPreviewModal.vue`: full-screen — structurally correct; header safe

**Focus/form normalization for 11-04/11-05:**
- `focus:ring-2` used throughout; needs `focus-visible:` variant instead
- Inputs carry redundant border/focus class stacks next to `@tailwindcss/forms` defaults
- Skeleton inline styles in `AppSidebar.vue` can become static Tailwind widths

**Dead code for 11-06:**
- `AccountView.vue`: confirmed orphan — router redirects `/account → /settings` without importing or rendering it
- Admin tab test files (`AdminAiConfigTab.test.js`, `AdminQuotasTab.test.js`, `AdminUsersTab.test.js`): classify in 11-06

## Verification

- `npm run build` (no ANALYZE): 152 modules transformed, built in 1.06s — no stats.html generated
- `ANALYZE=true npm run build`: identical build + `stats.html` written
- `npm test`: 219 tests pass (30 test files)

## Deviations from Plan

None — plan executed exactly as written.

## Known Stubs

None.

## Threat Flags

None — this plan makes no network, auth, or schema changes.

## Self-Check: PASSED

- `.planning/perf/phase11-baseline.html`: EXISTS (committed at 6d56d25)
- `.planning/perf/phase11-baseline-summary.md`: EXISTS (committed at 6d56d25)
- `frontend/vite.config.js`: EXISTS and modified (committed at 0fb2a53)
- Both commits present in git log: confirmed