web-app-launcher/plans/phase-4-7-full-expansion/phase-8-integration-polish.md

Phase 8: Integration & Polish

Status: ✅ Complete Parent plan: PLAN.md Domain: fullstack

Objective

Wire all phases together, resolve cross-phase integration issues, fix the build, run tests, and produce a polished, working codebase. This is the FINAL phase — build and tests MUST pass.

Tasks

8.1 Fix all build errors

• Run npm run build and fix ALL TypeScript/Svelte compilation errors
• Run npm run check and fix ALL type errors
• Run npm run lint and fix ALL lint errors
• Ensure npx prisma generate completes without errors

8.2 Fix cross-phase integration issues

• Verify all new widget types render correctly in WidgetRenderer
• Verify WidgetCreationForm includes all new widget type options
• Verify new API routes are accessible and return correct response format
• Verify new Prisma models work with existing service layer
• Verify board theme overrides work with glassmorphism and wallpapers
• Verify favorites bar appears correctly in board layout
• Verify notification bell integrates with header layout
• Verify tag filter works with the board's widget grid
• Verify keyboard shortcuts don't conflict with search (Cmd+K) or other global handlers
• Verify onboarding wizard triggers correctly on fresh database

8.3 Navigation & routing

• Verify all new routes are accessible:
  • /status — uptime dashboard
  • /settings/notifications — notification preferences
  • /settings/api-tokens — API token management
  • /admin/audit-log — audit log viewer
• Verify sidebar links are updated for new pages
• Verify admin layout guard protects admin-only routes

8.4 Data loading & server functions

• Verify all +page.server.ts load functions work correctly
• Verify form actions handle validation errors properly
• Verify API endpoints handle edge cases (empty data, invalid IDs, unauthorized access)

8.5 Visual consistency

• Verify all new components work in dark mode and light mode
• Verify glassmorphism effect works with all background types
• Verify card size options apply consistently across widget types
• Verify responsive layout on mobile widths for all new components
• Verify animations and transitions are smooth (no jank)

8.6 Test suite

• Run npm test and fix any broken existing tests
• Verify Prisma mock setup handles new models
• Add basic smoke tests for critical new services if time permits

8.7 Final cleanup

• Remove any TODO(phase-N) markers that should have been resolved
• Remove any temporary workarounds that are no longer needed
• Ensure no debug console.logs remain
• Ensure no commented-out code remains
• Format all files: npm run format

Files to Modify/Create

• Various files across all phases — fix compilation errors
• src/routes/+layout.svelte — final integration of all layout components
• src/routes/+layout.server.ts — final data loading integration
• Navigation components — ensure all new routes are linked
• Any test files that need updating for new models

Acceptance Criteria

• npm run build passes with zero errors
• npm run check passes with zero errors
• npm run lint passes with zero errors
• npm test passes (all existing tests + any new tests)
• All 26 features are accessible and functional
• No console errors in browser
• Dark/light mode works everywhere
• Responsive layout works on mobile/tablet/desktop

Notes

• This is the Big Bang final phase — ALL verification commands must pass
• Prioritize build errors first, then type errors, then runtime issues
• If a feature has a minor visual issue but the build passes, note it for follow-up rather than blocking
• Run npm run format as the very last step to ensure consistent formatting

Review Checklist

• All tasks completed
• Code follows project conventions
• No unintended side effects
• Build passes ✅ (MANDATORY for final phase)
• Tests pass ✅ (MANDATORY for final phase)
• Lint passes ✅ (MANDATORY for final phase)

Handoff to Next Phase