manage/.pi-tmp/slice2-worker-out.md

Slice 2 — Dashboard mobile layout (worker output)

Files changed

File	Status	Lines
frontend/src/pages/Dashboard.tsx	modified	+128 / -7
frontend/src/pages/__tests__/Dashboard.test.tsx	modified	+178 / -2

Total: ~306 changed lines (299 insertions, 7 deletions). Under the 400-line budget.

What was implemented

2.1 — Single-column grid below md

Below md (isMobile === true), widgets render inside MobileWidgetSections which uses grid grid-cols-1 gap-4. At md and above, the existing flat visibleWidgets.map(...) renders unchanged — no grid wrapper is introduced on desktop (preserving the exact previous behavior).

2.2 — Section anchor bar

Below md, a horizontally scrollable pill bar (MobileWidgetSections anchor bar) groups widgets by section. Clicking a pill calls document.getElementById(...).scrollIntoView({ behavior: "smooth", block: "start" }). Each section renders with scroll-mt-16 so the sticky TopBar doesn't cover the heading.

Section-to-widget mapping:

• Observability (Activity icon): service-bound widgets whose service_type is alertmanager, prometheus, or grafana.
• Media (Monitor icon): service-bound widgets whose service_type is jellyfin.
• Backups (DatabaseBackup icon): built-in widgets with widget_kind === "backups".
• Custom (LayoutDashboard icon): built-in static, ssh_tasks, nextcloud, and any unmatched widget.

Section order: Observability → Media → Backups → Custom. Empty sections are not rendered.

Icons match the existing nav (App.tsx navItems): Activity for Observability, Monitor for Media, DatabaseBackup for Backups.

2.3 — Tests

Extended Dashboard.test.tsx with 3 new tests (6 total, all passing):

1. Mobile renders single column with anchor bar: verifies Observability/Media/Backups sections appear, Custom does NOT (empty section hidden), all widgets render.
2. Desktop hides anchor bar: verifies no section headings or pills at desktop width.
3. Anchor pill jumps via scrollIntoView: spies on Element.prototype.scrollIntoView, clicks the Media pill, asserts the spy was called.

matchMedia mock: Added setMatchMedia(matches: boolean) helper that stubs window.matchMedia for the (max-width: 768px) query. Called in beforeEach with false (desktop default). Each mobile test calls setMatchMedia(true).

Validation

npm run lint   → 0 errors, 2 pre-existing warnings (UsersPage.impl.tsx, unrelated)
npm run build  → ✓ built in 855ms (tsc -b + vite)
npm run test   → 25 files / 89 tests passed (was 86; +3 new)

Deviations from design

1. Desktop path preserved as bare map (no grid wrapper). The design pseudocode said grid grid-cols-1 md:grid-cols-*. The actual existing desktop code has no grid — it's a flat visibleWidgets.map(...) inside a flex flex-col gap-4 parent. The task explicitly said "preserve whatever the current code does" and "do NOT change desktop behavior". Adding a grid wrapper (even grid-cols-1) around the desktop path would be a structural change. So the isMobile branch renders MobileWidgetSections (which has its own grid grid-cols-1) on mobile, and the bare map on desktop. Desktop DOM is byte-for-byte identical to before.

2. Section headings (<h3>) on mobile. The design/spec did not explicitly name section headings, only the anchor bar. I added a subtle <h3 className="text-sm font-semibold text-muted-foreground"> per section so the sections are visually identifiable after scrolling. This is additive mobile-only markup; desktop is unaffected.

3. useServiceInstances() added to Dashboard. Required to resolve service-bound widget types for section grouping. TanStack Query dedupes by key, so this shares the cache with WidgetInstanceCard's own useServiceInstances() call — no extra network request.

skill_resolution

none — no project/user SKILL.md paths were injected by the parent, and no .atl/skill-registry.md was found. The task was self-contained against the OpenSpec design/tasks docs.

Residual risks

• jsdom matchMedia state is per-test, not reactive: the useIsMobile hook reads matchMedia synchronously during useState init, then sets up a listener. The test sets matchMedia before render. If a test needed to simulate a live resize mid-render, the mock's addEventListener is a no-op (no event fires). This is adequate for breakpoint-branch tests but cannot test responsive transitions. Acceptable for this slice.
• Anchor pill duplicate text: each section label appears in both the pill and the <h3>. Tests use getAllByText or getByRole("button", { name }) to disambiguate. This is a minor testing concern, not a runtime issue.

Review findings

No blockers identified during self-review. All validation commands green.