kite/.planning/perf/phase11-baseline-summary.md

Phase 11 Bundle Baseline

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

Command

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.