feat(M14): 3-pane backlog — generic SplitPane, BacklogStore, SSE realtime, card-grid TaskPanel (#22)

* feat(split-pane): refactor to generic n-pane SplitPane with cookie persistence

New API: panes[], defaultSplit[], cookieKey, tabLabels. Supports arbitrary
number of panes with n-1 draggable dividers and JSON cookie persistence.
Replaces TriplePane; mobile renders tabs.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(split-pane): migrate callers to new panes[] API

Backlog page and sprint board now use generic SplitPane.
TriplePane removed; sprint board uses 3-pane with defaultSplit=[28,35,37].

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* test(split-pane): add unit tests for 2/3-pane, cookie-restore, mobile tabs

Added jsdom + @testing-library/react devDeps for component testing.
7 cases: render, divider count, cookie restore, invalid cookie fallback,
mobile tab render/switch, and no-dividers-on-mobile.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(backlog): add BacklogStore Zustand store with applyChange reducer

State: pbis, storiesByPbi, tasksByStory. setInitialData for server
hydration; applyChange(entity, op, data) handles I/U/D for SSE events.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(backlog): server-fetch tasks + hydrate BacklogStore on page load

Page now fetches tasks parallel to stories and groups by story_id.
BacklogHydrationWrapper calls setInitialData on mount so the store
is ready for downstream SSE consumers.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(backlog): add EmptyPanel shared component, replace inline empty states

EmptyPanel takes title?, message, and optional action with DemoTooltip.
Replaces duplicate inline empty-state markup in pbi-list and story-panel.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(backlog): add TaskPanel with sortable rows and TaskDialog wiring

Reads selectedStoryId + tasksByStory from stores. DnD reorder via
reorderTasksAction. Row click → ?editTask, + button → ?newTask&storyId.
DemoTooltip on drag handles and + button.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(backlog): wire TaskPanel + TaskDialog into backlog page

3-pane SplitPane [20,45,35]. searchParams for newTask/editTask.
TaskDialog and EditTaskLoader render on ?newTask and ?editTask.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* test(backlog): add TaskPanel tests for render states and click handlers

7 cases: no-story empty, no-tasks empty+action, tasks render, + button
router.push, row click router.push, demo disabled button, demo disabled handles.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(backlog): migrate PbiList to store-driven via useBacklogStore

Removes pbis prop; reads from useBacklogStore(s => s.pbis) so SSE
updates reflect in real-time without prop drilling.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(backlog): migrate StoryPanel to store-driven + selectStory on click

Removes storiesByPbi prop; reads from useBacklogStore. Card click now
dispatches selectStory(id) + shows isSelected highlight. Edit moved to
inline pencil button. page.tsx drops pbis/storiesByPbi props.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* test(backlog): add 3-pane integration tests for click-cascade flow

Covers: empty states, PBI→stories, story→tasks, cascade-reset,
isSelected highlight. localStorage mocked for sort-mode persistence.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ST-1115): SSE backlog realtime — endpoint, hook, hydration mount, tests

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ST-1116): mobile auto-switch tabs + back button in BacklogSplitPane

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(ST-1116): update functional-spec (3-pane backlog + mobile) and architecture (backlog SSE + backlog-store)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ST-1117): TaskPanel card-grid — BacklogCard + rectSortingStrategy, tests updated

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(tests): correct PbiStatusApi type and remove duplicate mock keys

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

__tests__/components/backlog/integration.test.tsx

@@ -0,0 +1,133 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { useSelectionStore } from '@/stores/selection-store'
+import { useBacklogStore } from '@/stores/backlog-store'
+
+// Mock next/navigation
+const mockPush = vi.fn()
+vi.mock('next/navigation', () => ({ useRouter: () => ({ push: mockPush }) }))
+
+// localStorage mock for StoryPanel sort mode persistence
+const localStorageMock = (() => {
+  let store: Record<string, string> = {}
+  return {
+    getItem: (k: string) => store[k] ?? null,
+    setItem: (k: string, v: string) => { store[k] = v },
+    removeItem: (k: string) => { delete store[k] },
+    clear: () => { store = {} },
+  }
+})()
+Object.defineProperty(globalThis, 'localStorage', { value: localStorageMock, writable: true })
+
+// Mock server actions
+vi.mock('@/actions/stories', () => ({
+  reorderStoriesAction: vi.fn().mockResolvedValue({ success: true }),
+  reorderPbisAction: vi.fn().mockResolvedValue({ success: true }),
+  updatePbiPriorityAction: vi.fn().mockResolvedValue({ success: true }),
+}))
+vi.mock('@/actions/pbis', () => ({ deletePbiAction: vi.fn().mockResolvedValue({ success: true }) }))
+vi.mock('@/actions/tasks', () => ({ reorderTasksAction: vi.fn().mockResolvedValue({ success: true }) }))
+vi.mock('sonner', () => ({ toast: { error: vi.fn(), success: vi.fn() } }))
+
+// Mock dnd-kit
+vi.mock('@dnd-kit/core', () => ({
+  DndContext: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  PointerSensor: class {},
+  KeyboardSensor: class {},
+  useSensor: vi.fn(),
+  useSensors: vi.fn(() => []),
+  closestCenter: vi.fn(),
+  DragOverlay: () => null,
+}))
+vi.mock('@dnd-kit/sortable', () => ({
+  SortableContext: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  useSortable: () => ({
+    attributes: {}, listeners: {}, setNodeRef: vi.fn(),
+    transform: null, transition: undefined, isDragging: false,
+  }),
+  verticalListSortingStrategy: {},
+  rectSortingStrategy: {},
+  sortableKeyboardCoordinates: {},
+  arrayMove: (arr: unknown[]) => arr,
+}))
+vi.mock('@dnd-kit/utilities', () => ({ CSS: { Transform: { toString: () => '' } } }))
+
+import { StoryPanel } from '@/components/backlog/story-panel'
+import { TaskPanel } from '@/components/backlog/task-panel'
+
+const PRODUCT_ID = 'prod-1'
+const PBI_ID = 'pbi-1'
+const ALT_PBI_ID = 'pbi-2'
+const STORY_ID = 'story-1'
+
+const STORIES = [
+  { id: STORY_ID, code: 'ST-1', title: 'Eerste story', description: null, acceptance_criteria: null, priority: 2, status: 'OPEN', pbi_id: PBI_ID, created_at: new Date() },
+]
+const TASKS = [
+  { id: 'task-1', title: 'Eerste taak', description: null, priority: 2, status: 'TO_DO', sort_order: 1, story_id: STORY_ID, created_at: new Date() },
+]
+
+function resetStores() {
+  useSelectionStore.setState({ selectedPbiId: null, selectedStoryId: null })
+  useBacklogStore.setState({
+    pbis: [],
+    storiesByPbi: { [PBI_ID]: STORIES },
+    tasksByStory: { [STORY_ID]: TASKS },
+  })
+}
+
+describe('Backlog 3-pane integration', () => {
+  beforeEach(() => {
+    mockPush.mockClear()
+    resetStores()
+  })
+
+  it('StoryPanel shows empty state when no PBI selected', () => {
+    render(<StoryPanel productId={PRODUCT_ID} isDemo={false} />)
+    expect(screen.getByText('Selecteer een PBI om de stories te bekijken.')).toBeTruthy()
+  })
+
+  it('StoryPanel shows stories when PBI is selected', () => {
+    useSelectionStore.setState({ selectedPbiId: PBI_ID, selectedStoryId: null })
+    render(<StoryPanel productId={PRODUCT_ID} isDemo={false} />)
+    expect(screen.getByText('Eerste story')).toBeTruthy()
+  })
+
+  it('clicking a story dispatches selectStory to the store', () => {
+    useSelectionStore.setState({ selectedPbiId: PBI_ID, selectedStoryId: null })
+    render(<StoryPanel productId={PRODUCT_ID} isDemo={false} />)
+    fireEvent.click(screen.getByText('Eerste story'))
+    expect(useSelectionStore.getState().selectedStoryId).toBe(STORY_ID)
+  })
+
+  it('cascade-reset: selecting different PBI clears selectedStoryId', () => {
+    useSelectionStore.setState({ selectedPbiId: PBI_ID, selectedStoryId: STORY_ID })
+    useSelectionStore.getState().selectPbi(ALT_PBI_ID)
+    expect(useSelectionStore.getState().selectedStoryId).toBeNull()
+  })
+
+  it('TaskPanel shows tasks after story is selected', () => {
+    useSelectionStore.setState({ selectedPbiId: PBI_ID, selectedStoryId: STORY_ID })
+    render(<TaskPanel productId={PRODUCT_ID} isDemo={false} closePath={`/products/${PRODUCT_ID}`} />)
+    expect(screen.getByText('Eerste taak')).toBeTruthy()
+  })
+
+  it('TaskPanel shows empty state after cascade-reset', () => {
+    useSelectionStore.setState({ selectedPbiId: PBI_ID, selectedStoryId: STORY_ID })
+    render(<TaskPanel productId={PRODUCT_ID} isDemo={false} closePath={`/products/${PRODUCT_ID}`} />)
+    // Reset via selectPbi
+    useSelectionStore.getState().selectPbi(ALT_PBI_ID)
+    // Re-render reflects new store state
+    render(<TaskPanel productId={PRODUCT_ID} isDemo={false} closePath={`/products/${PRODUCT_ID}`} />)
+    expect(screen.getAllByText('Selecteer een story om de taken te bekijken.').length).toBeGreaterThan(0)
+  })
+
+  it('selected story card has isSelected highlight class applied', () => {
+    useSelectionStore.setState({ selectedPbiId: PBI_ID, selectedStoryId: STORY_ID })
+    const { container } = render(<StoryPanel productId={PRODUCT_ID} isDemo={false} />)
+    // bg-primary-container is applied when isSelected
+    const selected = container.querySelector('.bg-primary-container')
+    expect(selected).toBeTruthy()
+  })
+})