feat(budget): rework per-source filter to use source rows as toggles with Cost/Payback/Net columns

[steilerDev]

Summary

Reworks the per-source filter UX shipped in #1354/#1355 per user feedback.

• Each source row in the expanded Available Funds is now itself the toggle (<tr role="button" aria-pressed>); the chip toolbar above the rows is removed.
• All sources start selected; URL state stores deselections as ?deselectedSources=<id1>,<id2> (clean default URL).
• Deselecting a source greys the row, hides its budget lines and any item/area with no surviving lines, drops the Available Funds total to the sum of selected sources, and shows a "(X of Y selected)" caption.
• New per-source Cost · Payback · Net columns. Payback is computed client-side via entity-level pro-rata; Net = totalAmount + payback − cost.
• Backend response shape unchanged.

Closes #1356

Test plan

• Unit / integration tests pass (Quality Gates → Test shards)
• E2E tests pass (16 shards × 3 viewports) — covers default state, deselection, cascade hide, available funds re-summation, URL round-trip, keyboard, mobile, dark mode
• Pre-commit auto-fix bot does not report unfixable lint

[steilerDev]

[product-architect] Approved (posted as comment — cannot self-approve).

Verified all five architect decisions from issue #1356 are honored:

1. Per-source payback formula (computePerSourcePayback, CostBreakdownTable.tsx): entity-level pro-rata, weighted by max-perspective line cost (plannedAmount * (1 + margin) / actualCost / quotation * 1.05 per branch). Equal-distribution fallback (weight = 1/n) correctly triggers when totalCost === 0 and entityPayback > 0. Computed across the full breakdown via walkWi/walkHi regardless of selection (AC-11).
2. URL param is ?deselectedSources=. Legacy ?sources= is explicitly ignored (verified by unit test ignores legacy ?sources= URL param and E2E assertions). Empty selection = clean URL.
3. Subsidy Adjustments stays project-wide — payback computation runs over the full breakdown; no filter applied to adjustments section.
4. Net formula: source rows use source.totalAmount + payback - allocatedCost; unassigned pseudo-row correctly drops totalAmount (no source budget). Sign coloring driven by net >= 0.
5. Cascade hide applied at both item level (WorkItemRow/HouseholdItemRow early-return when no line in visibleLineIds) and area level (WorkItemAreaSection/HouseholdItemAreaSection via areaHasVisibleLines recursive walk).

No leakage: zero changes under server/, shared/, e2e/containers, or db/migrations. Backend response shape unchanged. BudgetSourceChip directory fully deleted (component, CSS module, test, index) with no remaining references.

Component reuse: source rows use native <tr> with role="button", tabIndex, aria-pressed, and Enter/Space/Escape keydown — no parallel toggle component introduced. Consistent with existing table-row interaction patterns.

Schema, API contract, and ADR documentation require no updates for this change.

[steilerDev]

[product-owner] Review against AC-1 to AC-25 from #1356.

Functional ACs verified — all PASS

• AC-1 to AC-5 (filter affordance lives on rows): chip toolbar + BudgetSourceChip directory deleted, source rows render as <tr role="button" tabIndex={0} aria-pressed>, default state has all sources selected, deselected rows greyed via [aria-pressed="false"] styling with dot-opacity 0.4 and muted text. Verified.
• AC-6 to AC-8 (Cost · Payback · Net columns): 4 columns rendered per source row. Cost = resolveProjected(source.projectedMin, source.projectedMax, perspective) formatted with leading minus. Payback resolved via computePerSourcePayback map. Net = source.totalAmount + payback − allocatedCost, sign-coloured. Unassigned pseudo-row drops totalAmount (correctly modelled as having no source budget).
• AC-9 to AC-11 (per-source payback aggregation): computePerSourcePayback walks WI + HI areas, weights by max-perspective line cost (plannedAmount * (1 + margin) / actualCost / actualCost * 1.05), with the equal-distribution fallback 1/n when totalCost === 0 per architect decision (a). Computed across the full breakdown — independent of selection (AC-11 honoured).
• AC-12 to AC-15 (cascade hide): visibleLineIds filters lines by deselectedSourceIds; item rows + area sections short-circuit when no surviving lines (areaHasVisibleLines). Sum/Remaining recompute from filtered set. Subsidy Adjustments stays project-wide per architect decision.
• AC-16 to AC-18 (Available Funds re-summation): filteredAvailableFunds = sum(selected sources' totalAmount) when filtering, else overview.availableFunds. Empty selection → 0. Hero card untouched (out of scope).
• AC-19 to AC-22 (URL state): ?deselectedSources=<ids> is the canonical param; default produces clean URL; legacy ?sources= is silently ignored (covered by ignores legacy ?sources= URL param unit test + E2E).
• AC-23 to AC-25 (cleanup): BudgetSourceChip directory fully deleted (component + css + test + index); handleToolbarKeyDown replaced by per-row onKeyDown (Enter/Space toggle, Escape select-all); chip-toolbar tests removed and replaced with tr[role="button"] assertions.

Non-functional gap — MUST FIX before merge

statusAnnouncement live region (line 1638) and activeFilterCaption (line 1414) compute "selected" as budgetSources.length − deselectedSourceIds.size. When the user deselects the Unassigned pseudo-row, deselectedSourceIds contains the literal key 'unassigned' (not a member of budgetSources), so the selected count is decremented against the wrong denominator. Total uses budgetSources.length + (hasUnassignedLines ? 1 : 0) — the selected count needs the symmetrical adjustment. Concretely with 2 sources + unassigned, all 3 selected: caption hidden (correct). Deselect Unassigned: caption shows "(2 of 3 selected)" — wrong, should be "(2 of 3)" only if deselectedSourceIds doesn't contain 'unassigned'; it does, so current code outputs 2 − 1 = 1 → "(1 of 3 selected)". Off-by-one.

Fix: compute selected as (budgetSources.length + (hasUnassignedLines ? 1 : 0)) − deselectedSourceIds.size, or filter deselectedSourceIds against the actual key set before subtracting. Apply to both the visible caption and the SR live region for AC-4 / AC-17 alignment.

Posting as comment (non-blocking on functional ACs); please patch before merge.

[steilerDev]

[ux-designer] Design review for PR #1357 — per-source filter rework.

Verdict: Comment (non-blocking, fix before merge)

Passing checks

• <tr role="button" tabIndex={0} aria-pressed> semantics: implemented correctly on both named source rows and the unassigned pseudo-row.
• Selected state: border-left: 3px solid var(--chip-dot) on .colName — colored accent present via the scoped --chip-dot CSS var, matches spec.
• Deselected state: color: var(--color-text-muted) on all td cells, opacity: 0.4 on .sourceDot, border-left: 3px solid transparent on .colName — all three non-color signals from the spec are present.
• Hover: var(--color-bg-hover) on td cells.
• Focus ring: box-shadow: var(--shadow-focus) on :focus-visible (not outline).
• Transitions: var(--transition-normal) used throughout; prefers-reduced-motion guard removes transitions.
• Chip toolbar removed: no role="toolbar", no BudgetSourceChip import/usage.
• Available Funds total recomputes from filteredAvailableFunds.
• "(X of Y selected)" caption: rendered in availableFundsFilterCaption with var(--font-size-xs) + var(--color-text-muted) — matches spec.
• Mobile touch target: padding-top/bottom: var(--spacing-4) inside @media (max-width: 767px) gives ≥44px row height. Confirmed.
• No new design tokens introduced.
• Escape key on source row calls onSelectAllSources — correct.

Finding (Medium — fix before merge)

.srOnly class deleted from CSS module but still referenced in JSX.

CostBreakdownTable.module.css removes the .srOnly block entirely, but the role="status" live region div still uses className={styles.srOnly}. In CSS Modules, a missing class resolves silently to undefined, so the live region will render as a visible block in the DOM instead of being visually hidden. This means the screen-reader status announcement is displayed on screen — a functional accessibility regression.

Fix: move .srOnly to shared.module.css (it already belongs there as a utility class) and import it as sharedStyles.srOnly, or restore the definition in the module CSS.

Informational

The selected-state CSS on .rowSourceDetailToggle[aria-pressed="true"] .colName does not declare a transition for the border-left change (the transition is only declared on the deselected td block). This means toggling selected→deselected animates in, but deselected→selected does not animate out. Low impact but worth noting for refinement.

[github-actions]

🎉 This PR is included in version 2.4.0-beta.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 2.4.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀