feat(mvp): phase 5 - board, section & widget system

Add board/section/widget CRUD APIs with permission filtering, board view
page with collapsible sections and app widgets in responsive grid, form-based
board editor, and 9 Svelte components (Board, Section, Widget families).

plans/mvp-web-app-launcher/CONTEXT.md

@@ -6,6 +6,8 @@ Phase 4 (App Registry & Healthcheck) is complete. All app CRUD API routes are im
 
 Phase 3 (Authentication System) is complete. The full local authentication flow is implemented: login, registration, logout, and JWT token refresh. `hooks.server.ts` validates access tokens on every request, injects `event.locals.user`/`session`, and silently rotates expired tokens via refresh tokens. Protected routes redirect to `/login`; guest-accessible board routes are exempt. Login and registration pages use Superforms + Zod with inline validation errors. Registration respects the `SystemSettings.registrationEnabled` toggle. Reusable middleware helpers (`requireAuth`, `requireAdmin`, `requireRole`) are available for downstream phases. The root layout injects user session into all page data. The root page redirects to the default board or login. `jwt.ts` and `password.ts` are thin re-exports from `authService` (no duplication). Build does not pass yet (Big Bang strategy — expected).
 
+Phase 5 (Board, Section & Widget System) is complete. All 20 tasks implemented: 5 API route files for board/section/widget CRUD (`/api/boards`, `/api/boards/[id]`, `/api/boards/[id]/sections`, `/api/boards/[id]/sections/[sid]`, `/api/boards/[id]/sections/[sid]/widgets`), 3 page routes for board list (`/boards`), board view (`/boards/[boardId]`), and board editor (`/boards/[boardId]/edit`), plus 9 Svelte components across board/section/widget directories. Board list API filters by permissions: admins see all, regular users see boards where they have VIEW+ permission via `permissionService.checkPermission()`, guests see only `isGuestAccessible` boards. Board view loads the full hierarchy (board -> sections -> widgets -> app -> latest status) via `boardService.findBoardById`. The board editor uses SvelteKit form actions (updateBoard, addSection/updateSection/deleteSection, addWidget/deleteWidget) with `use:enhance` for progressive enhancement. Section collapse uses Svelte's built-in `slide` transition. Widget grid is responsive CSS grid (2 cols mobile, 3 tablet, 4 desktop). `AppWidget` reuses `AppHealthBadge` for status display.
+
 ## Temporary Workarounds
 
 - Permission model uses polymorphic pattern (entityType/targetType strings) without FK relations to avoid SQLite dual-FK constraint issues. Queries are done manually in `permissionService.ts`.

plans/mvp-web-app-launcher/PLAN.md

@@ -44,7 +44,7 @@ Build a self-hosted web application launcher/dashboard for a TrueNAS server envi
 | Phase 2: Database & Services | backend | ✅ Complete | ⬜ | ⬜ | ⬜ |
 | Phase 3: Authentication | fullstack | ✅ Complete | ⬜ | ⬜ | ⬜ |
 | Phase 4: App & Healthcheck | fullstack | ✅ Complete | ⬜ | ⬜ | ⬜ |
-| Phase 5: Board & Widgets | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
+| Phase 5: Board & Widgets | fullstack | ✅ Complete | ⬜ | ⬜ | ⬜ |
 | Phase 6: Admin Panel | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
 | Phase 7: UI Polish | frontend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
 | Phase 8: Integration & Deploy | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |

plans/mvp-web-app-launcher/phase-5-board-widgets.md

@@ -1,6 +1,6 @@
 # Phase 5: Board, Section & Widget System
 
-**Status:** ⬜ Not Started
+**Status:** ✅ Complete
 **Parent plan:** [PLAN.md](./PLAN.md)
 **Domain:** fullstack
 
@@ -9,26 +9,26 @@ Build the board/section/widget system — the core UI of the dashboard. Implemen
 
 ## Tasks
 
-- [ ] Task 1: Create `src/routes/api/boards/+server.ts` — GET (list, filtered by permissions), POST
-- [ ] Task 2: Create `src/routes/api/boards/[id]/+server.ts` — GET, PATCH, DELETE
-- [ ] Task 3: Create `src/routes/api/boards/[id]/sections/+server.ts` — GET, POST
-- [ ] Task 4: Create `src/routes/api/boards/[id]/sections/[sid]/+server.ts` — GET, PATCH, DELETE
-- [ ] Task 5: Create `src/routes/api/boards/[id]/sections/[sid]/widgets/+server.ts` — GET, POST, PATCH, DELETE
-- [ ] Task 6: Create `src/routes/boards/+page.server.ts` — load board list
-- [ ] Task 7: Create `src/routes/boards/+page.svelte` — board list page
-- [ ] Task 8: Create `src/routes/boards/[boardId]/+page.server.ts` — load board with sections, widgets, app data
-- [ ] Task 9: Create `src/routes/boards/[boardId]/+page.svelte` — board view page
-- [ ] Task 10: Create `src/routes/boards/[boardId]/edit/+page.server.ts` — board editor data + actions
-- [ ] Task 11: Create `src/routes/boards/[boardId]/edit/+page.svelte` — board editor page
-- [ ] Task 12: Create `src/lib/components/board/Board.svelte` — board container
-- [ ] Task 13: Create `src/lib/components/board/BoardHeader.svelte` — board title, description, actions
-- [ ] Task 14: Create `src/lib/components/board/BoardCard.svelte` — board card for list view
-- [ ] Task 15: Create `src/lib/components/section/Section.svelte` — section container
-- [ ] Task 16: Create `src/lib/components/section/SectionHeader.svelte` — section title with collapse toggle
-- [ ] Task 17: Create `src/lib/components/section/SectionCollapsible.svelte` — collapsible wrapper
-- [ ] Task 18: Create `src/lib/components/widget/AppWidget.svelte` — app widget displaying icon, name, status
-- [ ] Task 19: Create `src/lib/components/widget/WidgetContainer.svelte` — generic widget wrapper
-- [ ] Task 20: Create `src/lib/components/widget/WidgetGrid.svelte` — responsive grid layout for widgets
+- [x] Task 1: Create `src/routes/api/boards/+server.ts` — GET (list, filtered by permissions), POST
+- [x] Task 2: Create `src/routes/api/boards/[id]/+server.ts` — GET, PATCH, DELETE
+- [x] Task 3: Create `src/routes/api/boards/[id]/sections/+server.ts` — GET, POST
+- [x] Task 4: Create `src/routes/api/boards/[id]/sections/[sid]/+server.ts` — GET, PATCH, DELETE
+- [x] Task 5: Create `src/routes/api/boards/[id]/sections/[sid]/widgets/+server.ts` — GET, POST, PATCH, DELETE
+- [x] Task 6: Create `src/routes/boards/+page.server.ts` — load board list
+- [x] Task 7: Create `src/routes/boards/+page.svelte` — board list page
+- [x] Task 8: Create `src/routes/boards/[boardId]/+page.server.ts` — load board with sections, widgets, app data
+- [x] Task 9: Create `src/routes/boards/[boardId]/+page.svelte` — board view page
+- [x] Task 10: Create `src/routes/boards/[boardId]/edit/+page.server.ts` — board editor data + actions
+- [x] Task 11: Create `src/routes/boards/[boardId]/edit/+page.svelte` — board editor page
+- [x] Task 12: Create `src/lib/components/board/Board.svelte` — board container
+- [x] Task 13: Create `src/lib/components/board/BoardHeader.svelte` — board title, description, actions
+- [x] Task 14: Create `src/lib/components/board/BoardCard.svelte` — board card for list view
+- [x] Task 15: Create `src/lib/components/section/Section.svelte` — section container
+- [x] Task 16: Create `src/lib/components/section/SectionHeader.svelte` — section title with collapse toggle
+- [x] Task 17: Create `src/lib/components/section/SectionCollapsible.svelte` — collapsible wrapper
+- [x] Task 18: Create `src/lib/components/widget/AppWidget.svelte` — app widget displaying icon, name, status
+- [x] Task 19: Create `src/lib/components/widget/WidgetContainer.svelte` — generic widget wrapper
+- [x] Task 20: Create `src/lib/components/widget/WidgetGrid.svelte` — responsive grid layout for widgets
 
 ## Files to Modify/Create
 - `src/routes/api/boards/+server.ts`
@@ -61,14 +61,25 @@ Build the board/section/widget system — the core UI of the dashboard. Implemen
 - Section collapse uses Svelte `slide` transition
 - Board editor is a form-based editor (drag-and-drop is post-MVP Phase 2)
 - Permission filtering on board list uses permissionService
-- ⚠️ Big Bang: functional but minimally styled until Phase 7
+- Big Bang: functional but minimally styled until Phase 7
 
 ## Review Checklist
-- [ ] All tasks completed
-- [ ] Code follows project conventions
-- [ ] No unintended side effects
+- [x] All tasks completed
+- [x] Code follows project conventions
+- [x] No unintended side effects
 - [ ] Build passes
 - [ ] Tests pass (new + existing)
 
 ## Handoff to Next Phase
-<!-- Filled in by the implementation agent after completing this phase. -->
+
+Phase 5 is complete. All board, section, and widget CRUD APIs are implemented with permission-based filtering (admin sees all, regular users see permitted boards, guests see guest-accessible boards only). The board view page loads the full board hierarchy (board -> sections -> widgets -> app + status) via `boardService.findBoardById`. The board editor provides form-based management of board properties, sections (add/delete), and widgets (add app widgets from a dropdown, remove). All Svelte components use runes mode and follow existing patterns:
+- `Board.svelte` renders sections in order
+- `Section.svelte` uses `SectionHeader` (chevron toggle) + `SectionCollapsible` (Svelte `slide` transition)
+- `WidgetGrid.svelte` uses a responsive CSS grid (2/3/4 cols)
+- `AppWidget.svelte` displays app icon, name, and health status badge (reuses `AppHealthBadge`)
+- `BoardCard.svelte` shows board summary with section count, default/guest badges
+
+Key files for Phase 6 (Admin Panel):
+- Board API routes at `/api/boards/**` are ready for admin operations
+- Permission checking via `permissionService.checkPermission()` is integrated into all write operations
+- Board editor at `/boards/[boardId]/edit` is functional for admin use