curo1305andClaude Sonnet 4.6
123ae5b29b
Moves phases 08–11 execution artifacts from .planning/phases/ to .planning/milestones/v0.2-phases/ to keep .planning/phases/ clean for the next milestone. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
100 lines
4.3 KiB
Markdown
100 lines
4.3 KiB
Markdown
---
|
|
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
|