Available Funds source rows act as per-source filter; Cost/Payback/Net per source

[steilerDev]

As a homeowner reviewing the Cost Breakdown overview,
I want the Available Funds source rows themselves to act as the per-source filter (with all sources selected by default and Cost / Payback / Net columns aggregated per source),
so that I can see the live impact of including or excluding each fund without a parallel chip toolbar, and so that hidden sources visibly remove their cost contributions from the breakdown and Available Funds total.

Context

This story supersedes the chip-toolbar UX shipped in #1354 / PR #1355. After using that implementation, the redundancy of having both source detail rows and a chip strip (and the static Available Funds total even while filtering) was confirmed to be confusing. This story converts the source rows into the filter affordance and makes Available Funds responsive to the filter.

Parent Epic: none (standalone enhancement; no budget epic currently open)
Priority: Should Have
Supersedes: #1354, PR #1355

Acceptance Criteria

A. Filter affordance lives on the source rows (chip strip removed)

• AC-1: When the Available Funds row is expanded, the chip strip / BudgetSourceChip toolbar is not rendered. There is no separate "all sources" clear button above the source rows.
• AC-2: Each source detail row (and the synthetic "Unassigned" row, when unassigned lines exist) is itself the toggle control. Clicking the row toggles the source's selection state.
• AC-3: The toggle control is keyboard-operable: each source row is reachable via Tab and toggles on Enter or Space. Each row exposes aria-pressed (or equivalent) reflecting the selected state, with an accessible name that includes the source name and selection state.
• AC-4: A screen-reader live region announces the number of currently selected sources (e.g., "3 of 4 sources selected") whenever selection changes.

B. Default state and visual deselection

• AC-5: On initial page load with no filter URL parameter, all sources (including the Unassigned bucket, if present) are selected. No source rows render in the deselected/greyed style.
• AC-6: When a source is deselected, the row renders in a greyed-out / disabled visual treatment per the UX spec (reduced opacity or muted token). The source dot color is preserved at reduced emphasis to keep the source identifiable.
• AC-7: Deselecting all sources is permitted; in that case the breakdown's Sum, Available Funds total, and all areas/items render the empty state already used by the breakdown table.

C. Cost / Payback / Net columns per source row

• AC-8: The Cost column on a source detail row shows the perspective-resolved sum of cost across all budget lines linked to that source (across both Work Items and Household Items), formatted with a leading minus sign consistent with the rest of the cost column. Lines covered by a non-quotation invoice contribute their actual cost; quotation invoices contribute a ±5% range resolved at the active perspective; other lines contribute the confidence-margin range resolved at the active perspective.
• AC-9: The Payback column on a source detail row shows the perspective-resolved sum of subsidy payback attributable to that source's budget lines (see "Architectural questions" below — exact attribution rule must be confirmed by product-architect before implementation). Renders as — when there is no payback for the source.
• AC-10: The Net column on a source detail row shows totalAmount − cost + payback for that source, i.e., remaining funds available for that source given current commitments. The value is colored positive/negative consistent with the existing Net column treatment.
• AC-11: Cost / Payback / Net values on each source row are independent of the source row's selection state — they always reflect that source's full attribution. (Selection toggles cascade only into the filtered breakdown above and the Available Funds total below.)

D. Filter cascade (rows above source rows)

• AC-12: When one or more sources are deselected, budget line rows whose budgetSourceId (or "unassigned" for null) is not in the selected set are excluded from the breakdown rendering.
• AC-13: When a Work Item, Household Item, or Area has zero matching budget lines under the current filter, the entire item or area row is hidden — not rendered as an empty row with zero values.
• AC-14: Work Item / Household Item / Area subtotal rows that remain visible recompute Cost, Payback, and Net to reflect only the lines that pass the filter (consistent with the perspective resolution rules already used).
• AC-15: The Sum row at the top of the summary section recomputes Cost, Payback, and Net from the filtered set of lines. The Remaining Budget row recomputes accordingly.

E. Available Funds total responds to the filter

• AC-16: The Available Funds value on the Available Funds row is the sum of totalAmount across currently selected sources only. With all sources selected, this matches the unfiltered Available Funds figure shown today.
• AC-17: When all sources are deselected, the Available Funds row shows 0 and the Remaining Budget row recomputes against the (zero) filtered Available Funds.
• AC-18: The Available Funds metric in the Budget Health hero card (top of the page) is out of scope for this story and continues to display the unfiltered total. If a follow-up reveals the hero card should also respond, that is a separate story.

F. URL state and persistence

• AC-19: The default state — all sources selected — produces no ?sources= URL parameter (clean URL on page load and after a "select all" interaction).
• AC-20: A non-default selection is encoded in the URL using a clearly-named parameter (recommended: ?deselectedSources=<comma-separated-ids>). The exact parameter name and convention is finalised by product-architect; the chosen convention must be documented in the implementation spec.
• AC-21: Reloading the page with a deselected-sources URL restores the same selection state.
• AC-22: Sharing or bookmarking a URL with deselected sources reproduces the same filter on another browser session.

G. Cleanup

• AC-23: The BudgetSourceChip component, its CSS module, its tests, and its i18n keys are removed if no other consumer remains. If another page consumes it, this fact must be documented in the implementation spec.
• AC-24: The Escape-to-clear keyboard handler tied to the chip toolbar (handleToolbarKeyDown in CostBreakdownTable.tsx) is removed or replaced by an equivalent affordance discovered by ux-designer (e.g., a "select all" action somewhere else). Behavior must be documented in the visual spec.
• AC-25: All E2E and unit tests that previously asserted on the chip toolbar are updated or removed; new tests cover the row-toggle interaction, the per-source Cost/Payback/Net columns, the area/item hiding rule, and the Available Funds re-summation.

UAT Scenarios (Given/When/Then)

UAT-1: Default state shows all sources selected

• Given a project with three budget sources (S1, S2, S3) and assigned budget lines under each
• When I open /budget/overview and expand the Available Funds row
• Then I see three source detail rows, none rendered in the greyed/disabled style
• And there is no chip toolbar above the source rows
• And the URL contains no ?sources= (or ?deselectedSources=) parameter
• And the Available Funds value equals S1.totalAmount + S2.totalAmount + S3.totalAmount

UAT-2: Deselecting a source greys it out and excludes its lines

• Given the default state above and S1 has lines linked to Work Item WI-A
• When I click the S1 source row
• Then the S1 row renders in the greyed/disabled style
• And aria-pressed on the S1 row is false
• And budget lines whose source is S1 are no longer rendered
• And if WI-A has no other selected-source lines, WI-A is no longer rendered
• And the Sum row Cost decreases by the S1-attributed cost
• And the Available Funds row shows S2.totalAmount + S3.totalAmount
• And the URL updates to encode S1 as deselected

UAT-3: Deselecting all sources shows empty state

• Given the default state with S1, S2, S3 selected
• When I deselect S1, S2, S3 in turn
• Then no work items, household items, or areas are rendered in the breakdown body
• And the empty state already used by the breakdown table appears
• And the Available Funds row shows 0
• And the source rows themselves remain visible (so the user can re-select them) and all are greyed

UAT-4: Per-source Cost/Payback/Net columns

• Given S1 has total amount 100,000, lines summing to 40,000 of perspective-resolved cost, and 5,000 of payback attributed to S1's lines
• When I view the S1 source row at any selection state
• Then the Cost cell shows -€40,000 (or locale equivalent)
• And the Payback cell shows €5,000
• And the Net cell shows €65,000 colored positive
• And the values do not change when I toggle S1's selection

UAT-5: URL persistence

• Given S1 deselected, S2 and S3 selected
• When I copy the URL, open it in another tab/session
• Then S1 is rendered greyed and S2/S3 are selected
• And the breakdown body, source-row Cost/Payback/Net, and Available Funds total match those of the original tab

UAT-6: Keyboard operation

• Given a focused source row
• When I press Enter or Space
• Then the row's selection toggles
• And the screen-reader live region announces the new "X of N sources selected" count

Out of Scope

• Source CRUD (create/edit/delete sources) — handled in /budget/sources
• Subsidy CRUD or attribution logic on subsidies themselves
• Changes to the Subsidy Adjustments section of the breakdown table (the "oversubscribed" rows below the cost section)
• Changes to the Budget Health hero card (Available Funds, Projected Cost Range, Expected Payback, Remaining metrics)
• Changes to the bar chart segments at the top of the page
• Changes to invoices, vendors, or budget line CRUD pages
• Re-shaping the breakdown API contract to push filter logic to the server. Filtering remains client-side over the existing GET /api/budget/breakdown payload unless product-architect determines the per-source payback aggregate (AC-9) requires a server-side field — in which case a contract addendum is in scope of this story.

Architectural questions for product-architect

These must be resolved before implementation. The dev-team-lead spec must reference the resolution and the wiki must be updated if any new convention lands.

1. Per-source payback attribution (AC-9 / AC-10). The current breakdown service computes subsidy payback per entity (work item or household item), not per budget source. The subsidy engine consumes all of an entity's budget lines and emits a single payback figure. There is no source attribution in the model today. Options:

   • (a) Pro-rata at entity level: split each entity's payback across the entity's lines weighted by plannedAmount, then sum per source. Simple, deterministic, but ignores subsidy-category specificity.
   • (b) Re-run engine per source slice: re-call computeSubsidyEffects against only the subset of an entity's lines linked to a given source. Keeps the engine's category-matching logic honest but is O(entities × sources) and may not preserve the global subsidy cap behavior.
   • (c) New server-side per-source aggregate: extend BudgetSourceSummaryBreakdown with paybackMin/paybackMax computed during the existing per-entity pass, with the attribution rule defined by the architect.
   • Architect to pick (a/b/c) or propose another option, document the rule, and update BudgetSourceSummaryBreakdown and/or the breakdown service accordingly. The story's AC-9 should be considered conditional on this decision.

2. URL-state semantics (AC-19, AC-20). Today the ?sources= parameter encodes selected sources, with empty meaning "all selected" (an inverted convention that is fragile when source IDs change). The story recommends flipping to ?deselectedSources=<ids> so default = clean URL. Architect to confirm the parameter name and any backwards-compatibility for existing bookmarks of the chip-era URL.

3. Subsidy-cap interaction with filtering (AC-15). When sources are deselected, subsidy payback may exceed a subsidy's cap less aggressively than the unfiltered view. Should the Subsidy Adjustments section recompute under the filter, or stay anchored to the full project view? Recommendation: stay anchored (it's a project-wide concept), but architect to confirm.

Notes

• This is a UX rework of an already-shipped feature; expect both code removal (BudgetSourceChip, the chip toolbar block in CostBreakdownTable.tsx lines ~1265-1306, the handleToolbarKeyDown handler and the availFundsButtonRef) and additions (row-toggle, per-source payback, Available Funds re-summation).
• ux-designer must produce a visual spec for the row-as-toggle pattern: greyed style tokens, focus ring, hover treatment, dark-mode parity, and any "select all" action that may replace the Escape-to-clear handler.
• qa-integration-tester owns unit + integration tests; e2e-test-engineer owns Playwright tests for UAT-1 through UAT-6 across desktop, tablet, and mobile viewports.

[steilerDev]

[product-architect]

Decision 1 — Per-source payback aggregation

Choice: Option A (entity-level pro-rata), with the caveats below.

Rule

For each entity (work item or household item) that has subsidy payback, allocate the entity's subsidyPayback and minSubsidyPayback across its budget lines weighted by perspective-resolved cost (computeLineProjected min for minSubsidyPayback, max-aligned value for subsidyPayback), then bucket by budgetSourceId (with null going to the synthetic unassigned bucket). Sum per source.

Pseudocode (server-side, in budgetBreakdownService.ts after entity payback is computed at lines ~577–606 / 740–769, before the per-source aggregation block at ~940):

for each entity:
  totalLineMaxCost = sum(computeLineProjected(line).max) over entity.budgetLines
  if totalLineMaxCost > 0:
    for each line in entity.budgetLines:
      lineWeight = computeLineProjected(line).max / totalLineMaxCost
      paybackForLine = entity.subsidyPayback * lineWeight
      minPaybackForLine = entity.minSubsidyPayback * (lineMin / totalLineMin)
      sourceId = line.budgetSourceId ?? 'unassigned'
      sourcePaybackMap[sourceId].max += paybackForLine
      sourcePaybackMap[sourceId].min += minPaybackForLine

Why option A over B/C

• Correctness: The subsidy engine has no concept of budget source (subsidyCalculationEngine.ts lines 4–9, 40–120). Subsidies attach to entities and match by budgetCategoryId. Source filtering is purely a UX/funding-attribution layer; it has no semantic relationship to subsidies.
• Why not B (per-source engine re-runs): Re-running the engine over a source-filtered slice of an entity's lines is semantically meaningless — a subsidy that matches a category will pay back regardless of which fund pays for that line. It would also break the project-wide subsidy cap aggregation (applySubsidyCaps, lines 821–929), which depends on summing uncapped entity totals across the whole project.
• Why not C (new server aggregate computed during the existing pass): The "rule for attribution" still has to be invented; the only honest rule is pro-rata, which can be done client-side from data we already ship. Server-side adds complexity and a new shared type field with no correctness benefit.
• Pro-rata's known limitation: If an entity has lines in different categories where one category matches a subsidy and the other doesn't, pro-rata over-attributes payback to the non-matching lines. This is acceptable because (1) the per-source Payback column is a directional indicator, not an authoritative payout schedule, (2) the entity-level payback in the breakdown body is unchanged (still exact), (3) the project-wide subsidy adjustments table is unchanged (still exact). The only inexact figure is the per-source breakdown row Payback column.

Type contract — no schema change, no DB migration

BudgetSourceSummaryBreakdown (in shared/src/types/budgetBreakdown.ts lines 118–124) stays unchanged on the server. Per-source payback is computed on the client in CostBreakdownTable.tsx from data the breakdown response already carries:

• budgetLines[] per entity (each carries budgetSourceId, plannedAmount, confidence, actualCost, hasInvoice, isQuotation)
• entity-level subsidyPayback and minSubsidyPayback

A new client-side helper computePerSourcePayback(breakdown, perspective) returns Map<sourceId, { min: number; max: number }> keyed by sourceId | 'unassigned'. Render at the active perspective alongside cost/net.

This keeps the decision reversible: if we later want exact per-source attribution, we can add paybackMin/paybackMax to BudgetSourceSummaryBreakdown server-side without touching the client component shape.

Implications for AC-9 / AC-10 / AC-11

• AC-9 (Payback column per source row): pro-rata as above; render — when min and max are both 0.
• AC-10 (Net = totalAmount − cost + payback): use the same per-source pro-rata payback. Net stays an approximation when entities mix categories, which matches Net's already-approximate nature.
• AC-11 (values independent of selection): correct — the pro-rata is computed over all entities; toggling a source does not recompute it.

DB / migration

None. Payback remains computed, not stored.

[steilerDev]

[product-architect]

Decision 2 — URL state for deselection

Choice: Option B (clean break) — flip to ?deselectedSources=<ids>.

Rule

• Parameter name: deselectedSources
• Default state (all selected): parameter absent from URL — clean URL on initial load
• Non-default state: ?deselectedSources=<id1>,<id2>,...,unassigned (comma-separated; the literal string unassigned represents the synthetic null-source bucket, mirroring today's convention in BudgetOverviewPage.tsx line 197)
• All sources deselected: every source ID (including unassigned if any unassigned lines exist) listed in the parameter. We do NOT introduce a ?deselectedSources=all sentinel — the explicit list is unambiguous and round-trips through bookmarks correctly.
• Stale IDs: IDs in deselectedSources that no longer exist as sources are silently ignored on parse (same forgiving behavior as today's ?sources= reader at BudgetOverviewPage.tsx lines 189–193).

Why option B over A/C

• Why not A (?sources= with none sentinel): The current parameter inverts cleanly only by accident — empty meant "all" because nothing was selected by default. Now that all-selected is the default, keeping ?sources= would force a sentinel for "no sources" AND a sentinel for "all sources", and bookmarks would mean opposite things depending on creation date. That's worse than a clean rename.
• Why not C (accept both): Cornerstone is self-hosted with 1–5 users (CLAUDE.md), and the chip-era ?sources= URL only shipped today (feat(budget): add source attribution badges and per-source filter to cost breakdown overview #1355, this same epic). The bookmark population is effectively zero. Carrying two parameter names forever to support a one-day-old URL format is gratuitous complexity. Pre-existing ?sources= URLs simply load with all sources selected — graceful degradation.

Implementation notes for the spec

• Replace searchParams.get('sources') with searchParams.get('deselectedSources') in client/src/pages/BudgetOverviewPage/BudgetOverviewPage.tsx lines 187–214. The derived state changes meaning: selectedSourceIds becomes selectedSourceIds = allSourceIds − deselectedFromUrl.
• The component contract should change too. Today CostBreakdownTable props include selectedSourceIds: Set<string> (line 59) where empty Set means "no filter active". The new contract:
  • selectedSourceIds: Set<string> — always reflects the current selected set, never empty as a sentinel
  • allSourceIds: Set<string> — the universe of available sources (for default-everything-selected derivation)
  • The page derives selectedSourceIds = allSourceIds − deselectedFromUrl and passes both down. This eliminates the "empty Set means everything" ambiguity that today's code carries (e.g., hasSourceFilter = selectedSourceIds.size > 0 at line 790 must be reworked).

Persistence / sharing

AC-21 and AC-22 are satisfied: the URL is the source of truth, and selectedSourceIds is derived purely from deselectedSources plus the universe of source IDs in the breakdown payload. No localStorage fallback.

[steilerDev]

[product-architect]

Decision 3 — Subsidy Adjustments section anchoring

Choice: Option A (stay anchored to project-wide totals). Confirmed.

Rule

The Subsidy Adjustments section (oversubscribed subsidies, project-wide reductions) always renders the unfiltered, project-wide values regardless of the source filter state. The values come from breakdown.subsidyAdjustments[] exactly as the server emits them today.

Why

• Subsidies have no source attribution. They attach to entities (work items / household items) and match by budgetCategoryId. They are paid out from external programs (KfW, BAFA, regional grants), not from a budget source. Filtering them by a fund the user is using to pay for the project would be category-confused.
• Cap enforcement is a project-wide concept. applySubsidyCaps (in subsidyCalculationEngine.ts lines 163–214) compares each subsidy's uncapped payback against its maximumAmount cap. That cap is set on the subsidy program, not on a fund. Recomputing oversubscription against a source-filtered slice would tell the user "you're not oversubscribed if you pretend this fund doesn't exist" — actively misleading.
• The section is informational. It tells the user "these subsidies are over their caps and you're losing money." That fact does not change when the user toggles a source visibility chip.
• Consistency with AC-18. The story explicitly puts the Budget Health hero card out of scope (Available Funds there stays at the project total). The Subsidy Adjustments section sits in the same conceptual layer — project-wide truth — and should follow the same rule.

Visual treatment

The section renders identically whether 0, 1, or all sources are deselected. No greying, no annotation. The dev-team-lead spec should explicitly state that subsidyAdjustments rows are not part of the filter cascade described in AC-12 through AC-15.

Edge case — all sources deselected

When all sources are deselected (AC-7, AC-17 — empty state for the breakdown body and Available Funds = 0), the Subsidy Adjustments section continues to render at full project-wide values. This is intentional: the user has hidden the cost view, not deleted the project. The empty-state message in the breakdown body covers that "nothing matches your filter" UX; the Subsidy Adjustments section remains a project-wide fact.

[steilerDev]

[ux-designer]

Visual specification for #1356 — per-source filter rework (chip toolbar removed; source detail rows become the filter affordance).

---

Prop / API changes

CostBreakdownTableProps changes:

• selectedSourceIds: Set<string> → rename to deselectedSourceIds: Set<string> (inverted semantics: absent = all visible)
• onSourceToggle remains (sourceId: string | null) => void
• onClearSources → rename to onSelectAllSources (clears deselection set)
• BudgetOverviewPage URL param: ?sources= → ?deselectedSources= (clean break per architect decision)

Filter logic inversion: hasSourceFilter = deselectedSourceIds.size > 0; a line is hidden when deselectedSourceIds.has(lineKey), visible otherwise.

---

1. Source detail row as interactive toggle

Each rowSourceDetail <tr> becomes a toggle control:

role="button"
tabIndex={0}
aria-pressed={isSelected}     // true = included (default), false = deselected
aria-label={t('...rowToggleLabel', { name: source.name, state: isSelected ? 'selected' : 'deselected' })}
cursor: pointer (via .rowSourceDetailToggle CSS class)

Keyboard handlers on the <tr>:

• onClick / onKeyDown with e.key === 'Enter' || e.key === ' ' → call onSourceToggle(source.id), e.preventDefault() on Space to prevent page scroll
• e.key === 'Escape' → call onSelectAllSources() (select-all, mirrors the now-removed Clear button)

Do not nest interactive children that would intercept clicks — the entire row surface is the target.

---

2. Column structure (Source · Cost · Payback · Net)

Repurpose the existing four columns — no header changes needed (headers already read "Name", "Cost", "Payback", "Net"):

Column	Content	Token
Source (colName)	sourceDot + source.name	var(--color-text-body) selected; var(--color-text-muted) deselected
Cost (colBudget)	-formatCurrency(allocatedCost)	var(--color-danger-text-on-light) via existing .valueNegative
Payback (colPayback)	formatCurrency(payback) or 0 (never —)	var(--color-success-text-on-light) via existing .valuePositive; use 0 when zero
Net (colRemaining)	totalAmount + payback - allocatedCost, via existing renderNet(...)	existing .valuePositive / .valueNegative

allocatedCost = perspective-resolved sum of this source's budget lines (= current source.projectedMin/Max already on BudgetSourceSummaryBreakdown). Payback is the new per-source pro-rata figure from the architect's client-side computation.

---

3. Visual states

.rowSourceDetailToggle (new class, add to CostBreakdownTable.module.css)

.rowSourceDetailToggle {
  cursor: pointer;
  /* base: inherits rowSourceDetail background */
}

/* Selected (default) — keep existing left-border accent */
.rowSourceDetailToggle[aria-pressed="true"] td {
  /* no change from current rowSourceDetailSelected */
}
.rowSourceDetailToggle[aria-pressed="true"] .colName {
  border-left: 3px solid var(--chip-dot);
}

/* Deselected — grey out the entire row */
.rowSourceDetailToggle[aria-pressed="false"] td {
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  transition: background-color var(--transition-normal), color var(--transition-normal), opacity var(--transition-normal);
}
.rowSourceDetailToggle[aria-pressed="false"] .colName {
  border-left: 3px solid transparent;
}
.rowSourceDetailToggle[aria-pressed="false"] .sourceDot {
  opacity: 0.4;
}
/* Deselected numeric values also muted — override valuePositive/valueNegative */
.rowSourceDetailToggle[aria-pressed="false"] .valuePositive,
.rowSourceDetailToggle[aria-pressed="false"] .valueNegative {
  color: var(--color-text-muted);
}

/* Hover — both selected and deselected */
.rowSourceDetailToggle:hover td {
  background: var(--color-bg-hover);
  transition: background-color var(--transition-normal);
}

/* Focus */
.rowSourceDetailToggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  position: relative;
  z-index: 1;
}

Deselected state uses two independent signals: (a) border-left: transparent removes the color accent; (b) opacity: 0.4 on the dot desaturates it; (c) text shifts to var(--color-text-muted). Color is never the only differentiator.

Reduced motion

@media (prefers-reduced-motion: reduce) {
  .rowSourceDetailToggle td,
  .rowSourceDetailToggle .sourceDot {
    transition: none;
  }
}

---

4. Available Funds total row

When filter is active (deselectedSourceIds.size > 0), the Available Funds <td colSpan={3}> value switches to the sum of selected sources' totalAmount. Add an inline caption below the value:

t('overview.costBreakdown.availableFundsActiveFilter', { selected: N, total: M })

Style: var(--font-size-xs), var(--color-text-muted), display: block, margin-top: var(--spacing-0-5). Render only when filter is active.

---

5. Cascade — empty subtree hiding

Items, areas, and category nodes whose entire subtree has no visible budget lines must render null. This is a logic-layer requirement, not a CSS change. Front-end developer must propagate visibleLineIds up through WorkItemAreaSection / HouseholdItemAreaSection to suppress parent rows when all children are hidden.

When all lines are hidden: existing EmptyState in the hasSourceFilter && visibleLineIds.size === 0 guard covers this correctly — no visual change needed.

---

6. Cleanup

Remove entirely:

• <div role="toolbar"> strip and its handleToolbarKeyDown handler
• All BudgetSourceChip usages within CostBreakdownTable
• The sourceFilterStrip CSS class
• BudgetSourceChip component directory (client/src/components/BudgetSourceChip/) — grep confirms it is used only in CostBreakdownTable.tsx

Keep:

• .rowSourceDetail, .rowSourceDetailSelected → rename/repurpose into .rowSourceDetailToggle pattern above
• role="status" live region at the bottom of .tableWrapper — move inside .breakdownCard (outside tableWrapper) so it is always mounted regardless of scroll position. Update announcement text:
  • Filter active: t('overview.costBreakdown.sourceFilter.activeAnnouncement', { selected: N, total: M })
  • All selected: t('overview.costBreakdown.sourceFilter.allSourcesAnnouncement')
  • Keep aria-atomic="true" (no aria-live — role="status" implies aria-live="polite")

---

7. Accessibility checklist

• <tr role="button" tabIndex={0} aria-pressed> pattern is valid; VoiceOver/NVDA read it as "Bank Loan, button, pressed" in a table context
• Focus order: source rows appear in DOM order after the Available Funds expand <button> — no change needed
• Keyboard: Tab navigates between rows; Space/Enter toggle; Escape selects-all
• Non-color deselected signal: border removed + dot opacity 0.4 + text color shift to --color-text-muted
• Live region announces on every toggle

---

8. Mobile / responsive

No column hiding. The existing tableWrapper with overflow-x: auto handles narrow viewports already. Source rows need a minimum 44px touch target on mobile:

@media (max-width: 767px) {
  .rowSourceDetailToggle td {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
  }
  /* sticky colName background must match row state */
  .rowSourceDetailToggle[aria-pressed="true"] .colName {
    background: var(--color-bg-secondary);
  }
  .rowSourceDetailToggle[aria-pressed="false"] .colName {
    background: var(--color-bg-secondary);
  }
}

---

9. No new tokens required

Confirmed by reading tokens.css. All required values are covered:

Purpose	Token
Deselected text	var(--color-text-muted)
Hover bg	var(--color-bg-hover)
Focus ring	var(--shadow-focus)
Row transition	var(--transition-normal) (0.15s ease)
Source color	var(--color-source-N-dot) via existing --chip-dot CSS custom property on the <tr> style
Positive/Negative values	existing .valuePositive / .valueNegative

---

10. Animations

• State transition: background-color, color, opacity at var(--transition-normal) — wrapped in prefers-reduced-motion: reduce guard (transition: none)
• Disappearing rows when filtered: no fade-out. Rows vanish immediately (rendering null) — delay-free response is correct
• Appearing rows (rowFiltered): existing fadeIn animation kept as-is

---

Component mapping

UI Element	Shared Component	Change
Source detail rows (toggle)	None (inline <tr>)	Convert existing rowSourceDetail to role="button" toggle pattern
Filter chip toolbar	BudgetSourceChip	Delete — functionality absorbed by source detail rows
Available Funds caption	inline <span>	New, no shared component needed
SR live region	inline <div role="status">	Keep, relocate outside tableWrapper
Empty state	EmptyState	Unchanged