refactor(ui): migrates accordion to Kobalte, fixes scroll/a11y

- Replaces custom accordion with @kobalte/core Accordion (aria, keyboard
  nav, heading semantics via h3)
- Extracts OrgContent sub-component for SolidJS reactivity isolation
- Fixes FLIP animation scroll preservation (reads-before-writes pattern)
- Fixes accordion default expansion mid-load shift (stable initial value)
- Uses unfiltered selectedCount in accordion badge
- Adds fill-mode: forwards to accordion CSS animation
- Adds 8 new tests (1580 total): FLIP rAF callback with call-order
  assertion, accordion threshold transitions, loading/error states,
  selectedCount filter invariant

Author: wgordon17

src/app/components/onboarding/RepoSelector.tsx

@@ -136,6 +136,25 @@
   scrollbar-color: color-mix(in oklch, var(--color-base-content) 30%, transparent) var(--color-base-200);
 }
 
+/* ── Kobalte accordion animation ─────────────────────────────────────────── */
+
+.kb-accordion-content {
+  overflow: hidden;
+  animation: kb-accordion-down 200ms ease-in-out forwards;
+}
+.kb-accordion-content[data-closed] {
+  animation: kb-accordion-up 200ms ease-in-out forwards;
+}
+
+@keyframes kb-accordion-down {
+  from { height: 0; }
+  to { height: var(--kb-accordion-content-height); }
+}
+@keyframes kb-accordion-up {
+  from { height: var(--kb-accordion-content-height); }
+  to { height: 0; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .animate-slow-pulse,
   .animate-toast-in, .animate-toast-out,
@@ -145,7 +164,8 @@
   .loading {
     animation: none;
   }
-  .accordion-panel {
-    transition: none;
+  .kb-accordion-content,
+  .kb-accordion-content[data-closed] {
+    animation: none;
   }
 }

src/app/index.css

@@ -5,7 +5,11 @@
  */
 export function withScrollLock(fn: () => void): void {
   const y = window.scrollY;
-  try { fn(); } finally { window.scrollTo(0, y); }
+  try {
+    fn();
+  } finally {
+    window.scrollTo(0, y);
+  }
 }
 
 /**
@@ -34,18 +38,29 @@ export function withFlipAnimation(fn: () => void): void {
   }
 
   // Execute state change (SolidJS updates DOM synchronously)
+  const scrollY = window.scrollY;
   fn();
 
-  // Last, Invert, Play
+  // Last, Invert, Play — reads before writes to avoid layout thrash.
+  // All getBoundingClientRect calls happen before scrollTo so the browser
+  // doesn't force a synchronous layout recalculation between them.
   requestAnimationFrame(() => {
     const afterItems = document.querySelectorAll<HTMLElement>("[data-repo-group]");
+    const scrollDrift = window.scrollY - scrollY;
+    const deltas: { el: HTMLElement; dy: number }[] = [];
     for (const el of afterItems) {
       const key = el.dataset.repoGroup!;
       const old = before.get(key);
       if (!old) continue;
       const now = el.getBoundingClientRect();
-      const dy = old.top - now.top;
+      // Adjust for scroll drift: old.top was measured at scrollY,
+      // now.top is measured at the current (possibly drifted) scroll position.
+      const dy = old.top - now.top - scrollDrift;
       if (Math.abs(dy) < 1) continue;
+      deltas.push({ el, dy });
+    }
+    window.scrollTo(0, scrollY);
+    for (const { el, dy } of deltas) {
       el.animate(
         [{ transform: `translateY(${dy}px)` }, { transform: "translateY(0)" }],
         { duration: 200, easing: "ease-in-out" },

src/app/lib/scroll.ts

@@ -682,6 +682,17 @@ describe("DashboardPage — onAuthCleared integration", () => {
 });
 
 describe("DashboardPage — scroll preservation on poll refresh", () => {
+  // MOCK INVARIANT: fetchAllData is mocked via vi.fn() and never calls its
+  // onLightData callback, so phaseOneFired is always false inside pollFetch().
+  // This means every poll cycle takes the withScrollLock branch (not the
+  // fine-grained produce() path). If fetchAllData is ever changed to invoke
+  // onLightData in tests, phaseOneFired will become true and withScrollLock
+  // will NOT be called, silently breaking this test.
+  //
+  // window.scrollTo is the correct behavioral proxy for withScrollLock:
+  // withScrollLock captures scrollY then calls window.scrollTo(0, y) after
+  // the setter. Asserting scrollTo was called with the saved position is
+  // equivalent to asserting withScrollLock ran and completed successfully.
   it("preserves scroll position when setDashboardData replaces arrays", async () => {
     const issues = [makeIssue({ id: 1, title: "Scroll test issue" })];
     vi.mocked(pollService.fetchAllData).mockResolvedValue({
@@ -700,11 +711,15 @@ describe("DashboardPage — scroll preservation on poll refresh", () => {
     document.documentElement.scrollTop = 500;
     vi.spyOn(window, "scrollTo");
 
-    // Trigger a second poll (subsequent refresh — the path that uses withScrollLock)
+    // Trigger a second poll (subsequent refresh — the path that uses withScrollLock).
+    // phaseOneFired is false (mock never calls onLightData), so withScrollLock
+    // wraps the full atomic setDashboardData replacement and restores scroll.
     if (capturedFetchAll) {
       await capturedFetchAll();
     }
 
+    // window.scrollTo(0, 500) is the observable side-effect of withScrollLock
+    // saving and restoring the pre-update scroll position.
     expect(window.scrollTo).toHaveBeenCalledWith(0, 500);
     vi.restoreAllMocks();
     document.documentElement.scrollTop = 0;