# Phase 11 Bundle Baseline

**Captured:** 2026-06-16
**Vite version:** 6.4.3
**Node environment:** production

## Command

```bash
cd frontend && ANALYZE=true npm run build
```

Output artifact: `frontend/stats.html` — copied to `.planning/perf/phase11-baseline.html`.

## Bundle Sizes (pre-optimization)

| Chunk | Raw | Gzip |
|---|---|---|
| `index-BGwBmeoY.js` (main bundle) | 264.63 kB | 89.34 kB |
| `index-BtLvezBC.css` (Tailwind CSS) | 98.74 kB | 17.12 kB |
| `AdminAiView-DsyOjb0b.js` | 14.99 kB | 4.68 kB |
| `AdminUsersView-DFHwCZvr.js` | 12.29 kB | 3.76 kB |
| `AdminAuditView-COYge5oc.js` | 9.71 kB | 2.98 kB |
| `AdminQuotasView-Bjrfs1gN.js` | 4.60 kB | 1.88 kB |
| `LoginView-CM2pkdzs.js` | 6.81 kB | 1.90 kB |
| `RegisterView-B2PzAwRW.js` | 3.76 kB | 1.34 kB |
| `AdminLayout-DTKBjMfr.js` | 2.71 kB | 1.10 kB |
| `AdminOverviewView-GYxFAo8h.js` | 3.56 kB | 1.19 kB |
| `AdminLayout-TsYHjENN.css` | 0.75 kB | 0.35 kB |
| `PasswordResetView-BSR1dx14.js` | 2.32 kB | 1.13 kB |
| `SharedView-DTW18Ruc.js` | 2.14 kB | 1.14 kB |
| `admin-D1I3smx6.js` | 2.24 kB | 0.91 kB |
| `NewPasswordView-mjRpmRNW.js` | 2.13 kB | 1.11 kB |

**Total JS (raw):** ~343 kB  
**Total JS (gzip):** ~114 kB

## Key Observations

### Main bundle (264.63 kB raw / 89.34 kB gzip)

The main bundle is large because 5 user-facing routes are still imported synchronously at the top of `router/index.js`:
- `FileManagerView` — intentionally synchronous (critical first authenticated surface, per D-10)
- `TopicsView` — synchronous, should be lazy-loaded
- `DocumentView` — synchronous, should be lazy-loaded
- `SettingsView` — synchronous, should be lazy-loaded
- `CloudStorageView` — synchronous, should be lazy-loaded
- `CloudFolderView` — synchronous, should be lazy-loaded

Plan 11-02 will lazy-load all 5 of the above (keeping `FileManagerView` synchronous).

### Already lazy-loaded (good)

- All auth views: `LoginView`, `RegisterView`, `PasswordResetView`, `NewPasswordView` — each in its own chunk
- All admin views: `AdminOverviewView`, `AdminUsersView`, `AdminQuotasView`, `AdminAiView`, `AdminAuditView` — each in its own chunk
- `AdminLayout` — own chunk
- `SharedView` — own chunk

### Vite warning: auth.js mixed import

Vite warns that `auth.js` is both dynamically imported (from `api/utils.js`) and statically imported by many components. This means `auth.js` stays in the main bundle even when lazy-loading routes. This is expected behavior — `auth.js` must be available synchronously for the navigation guard on every page load.

### CSS

The Tailwind purged CSS at 98.74 kB raw / 17.12 kB gzip is expected for a full admin + user interface. The safelist with dynamic color patterns adds some bulk but is necessary for runtime-generated topic badge colors. No action needed here.

## Routes Audit (lazy vs. synchronous)

| Route path | Component | Pre-11-02 status |
|---|---|---|
| `/` | FileManagerView | synchronous (intentional — D-10) |
| `/topics` | TopicsView | **synchronous** → lazy in 11-02 |
| `/topics/:name` | TopicsView | **synchronous** → lazy in 11-02 |
| `/document/:id` | DocumentView | **synchronous** → lazy in 11-02 |
| `/settings` | SettingsView | **synchronous** → lazy in 11-02 |
| `/folders/:folderId` | FileManagerView | synchronous (reuses main bundle component) |
| `/cloud` | CloudStorageView | **synchronous** → lazy in 11-02 |
| `/cloud/:provider/:folderId(.*)` | CloudFolderView | **synchronous** → lazy in 11-02 |
| `/login` | LoginView | already lazy |
| `/register` | RegisterView | already lazy |
| `/password-reset` | PasswordResetView | already lazy |
| `/password-reset/confirm` | NewPasswordView | already lazy |
| `/shared` | SharedView | already lazy |
| `/admin` (layout) | AdminLayout | already lazy |
| `/admin` (all children) | AdminOverviewView, etc. | already lazy |

Expected main bundle reduction after 11-02: ~30–60 kB raw (splitting out Topics, Document, Settings, Cloud views).

## Responsive / Visual Audit Findings

### Synchronous non-critical route imports (Plan 11-02)

All 5 identified in route table above.

### Responsive sidebar/admin sidebar gaps (Plan 11-03)

- `App.vue`: desktop-only `flex h-screen overflow-hidden` shell; `AppSidebar` is always visible (no mobile handling).
- `AdminLayout.vue`: identical desktop-only pattern; `AdminSidebar` always visible.
- No hamburger button, no drawer, no mobile nav exists anywhere.
- Required: hamburger button + slide-in overlay drawer with `<Teleport to="body">` backdrop.
- State location: layout-local `ref()` in `App.vue` and `AdminLayout.vue` (route-change watcher closes drawer) — not a shared Pinia store (per D-05, R-15 research verdict).

### Tables / grids that overflow below sm/md (Plan 11-03)

- `StorageBrowser.vue` header row and all data rows: `grid-cols-[2rem_1fr_6rem_8rem_6rem]` — fixed 5-column grid.
- The "Size" column header has `hidden md:block`, data cells have `hidden md:block` — correct.
- The "Modified" column header has `hidden sm:block`, data cells have `hidden sm:block` — correct.
- But the `grid-cols` template is still `5-column` even when the last 2 columns are hidden — this leaves empty grid tracks on mobile. The grid template needs to be responsive: `grid-cols-[2rem_1fr_auto]` on small, `grid-cols-[2rem_1fr_6rem_auto]` on md, `grid-cols-[2rem_1fr_6rem_8rem_6rem]` on sm/lg.
- Row action buttons: `p-1.5` on `w-3.5 h-3.5` icons → button is ~26px at most. Below md, touch targets need `min-h-[36px] min-w-[36px]`.

### Modal overflow below 640px (Plan 11-04)

- `ShareModal.vue`: no `max-h` or `overflow-y-auto`; panel uses `max-w-md w-full mx-4`. Will overflow on very short phones.
- `CloudCredentialModal.vue`: no `max-h` or `overflow-y-auto`; Nextcloud form with advanced section can be tall; panel uses `max-w-md p-6`. Overflow risk is concrete.
- `FolderDeleteModal.vue`: smaller content, less risk, but should get the standard safe pattern for consistency.
- `DocumentPreviewModal.vue`: full-screen overlay (`fixed inset-0`). Structurally correct for full-screen; preserves full-screen behavior. Header uses `px-6 py-3`; no overflow risk. No action needed except verifying narrow-screen header doesn't clip.

### Inconsistent focus states (Plan 11-05)

- Current pattern: `focus:ring-2 focus:ring-indigo-500` used throughout, but `focus-visible:` is rarely used.
- Should normalize to `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1` per research convention.
- Mouse clicks will no longer show focus rings (correct a11y behavior); keyboard navigation will still show them.

### Inconsistent form patterns (Plan 11-04)

- `@tailwindcss/forms` is active and normalizes browser defaults. Many inputs still carry redundant `border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500` — partially redundant with forms plugin. Plan 11-04 should normalize these.
- Some inputs lack `focus-visible:` (use `focus:` instead) — part of focus normalization.

### Inconsistent spacing/typography (Plan 11-05)

- Skeleton widths: `AppSidebar.vue` uses `:style="{ width: (50 + n * 15) + 'px' }"` for decorative skeleton widths — can be converted to `w-20`, `w-24`, `w-28` static Tailwind classes.
- Typography conventions found in codebase (to be normalized):
  - Page titles: mostly `text-2xl font-semibold` — consistent.
  - Section titles: `text-lg font-semibold` / `font-semibold text-gray-800` / `font-semibold text-gray-900` — the color drifts; normalize to `text-lg font-semibold text-gray-900`.
  - Labels: `text-sm font-semibold text-gray-700` / `text-sm font-semibold text-gray-900` — normalize to `text-sm font-semibold text-gray-700`.
  - Body text: `text-sm text-gray-600` — mostly consistent.
  - Captions/metadata: `text-xs text-gray-400` — mostly consistent.
- Border radius: `rounded-xl` vs `rounded-2xl` on modal panels — `ShareModal` and `FolderDeleteModal` use `rounded-2xl`; `CloudCredentialModal` uses `rounded-xl`. Normalize to `rounded-xl`.

### Unreferenced files and imports (Plan 11-06)

- `AccountView.vue`: exists at `src/views/AccountView.vue`. The router has `{ path: '/account', redirect: '/settings' }` but does NOT import or render `AccountView`. It is completely unreferenced. SAFE TO DELETE in Plan 11-06 (verify no other reference before deleting).
- `HomeView.vue` and `FolderView.vue`: confirmed absent (per AGENTS.md requirement). No action.
- Admin test files `AdminAiConfigTab.test.js`, `AdminQuotasTab.test.js`, `AdminUsersTab.test.js` — may reference deleted components (old tab-based admin). Classify in Plan 11-06.
- Unused imports: a scan during Plan 11-06 pass will catch per-file orphans.

## Deviation from 11-RESEARCH.md

None. All research findings confirmed by live code review and build output.