ECHOES-1357 Aggregate repeated same-text toasts of the same variety with a counter badge

[david-cho-lerat-sonarsource]

---

Summary by Gitar

• Toast aggregation:
  • Implemented automatic aggregation for repeated identical text toasts lacking an explicit id.
  • Added a repetitionCount badge to toasts that occur multiple times, capping display at 99+.
• Toast lifecycle management:
  • Introduced registerToastDismissHandler and dismissToast to manage tracking and cleanup of aggregated toasts.
  • Updated toast duration logic to refresh the auto-close timer upon repeat triggers.

_{This will update automatically on new commits.}

[netlify]

✅ Deploy Preview for echoes-react ready!

Name	Link
🔨 Latest commit	406cf77
🔍 Latest deploy log	https://app.netlify.com/projects/echoes-react/deploys/6a22ea9fa3ea7d00081d41b4
😎 Deploy Preview	https://deploy-preview-693--echoes-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[hashicorp-vault-sonar-prod]

ECHOES-1357

[Copilot]

Pull request overview

This PR adds automatic aggregation for repeated “same text + same variety” toast notifications, showing a repetition counter badge instead of rendering duplicate toasts. It extends the toast utility to track repetition state and refresh the auto-close timer on repeats, while updating the Toast UI to display the new counter in an accessible way.

Changes:

• Implemented automatic same-text toast aggregation in src/utils/toasts.tsx, including deterministic IDs, repetition tracking, and timer refresh behavior.
• Updated Toast to accept and render a repetitionCount badge (capped at 99+) with a screen-reader announcement, plus added a new i18n key.
• Added Storybook coverage and unit tests validating aggregation, variety separation, non-text exclusion, counter capping, and timer reset behavior.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
stories/Toast-stories.tsx	Adds an “AggregatedRepeatedToasts” story and aligns controls/defaults to the updated toast behavior.
src/utils/toasts.tsx	Core aggregation logic: computes aggregation IDs from plain text, tracks repetition state, refreshes duration, and clears state on dismiss/auto-close.
src/utils/tests/toasts-test.tsx	Adds unit tests covering aggregation behavior, counter capping, non-text exclusion, and timer refresh.
src/components/badges/BadgeCounter.tsx	Broadens badge props to support standard <span> attributes while keeping value as the rendered content.
src/common/components/Toast.tsx	Renders repetition counter badge + screen-reader label, and adjusts trailing layout to accommodate badge + dismiss button.
i18n/keys.json	Adds toast.repetition-count message used for the repetition announcement.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[david-cho-lerat-sonarsource]

the type was not reflecting what the component was actually accepting. Now we're using it with aria-hidden explicitly, this type is more faithful to the truth.

[sonarqubecloud]

Agentic Analysis: Early Results

Agentic Analysis and Context Augmentation are available on your project. Here are some issues that could have been prevented. Follow the links to learn how to put them into action.

2 issue(s) found across 2 file(s):

Rule	File	Line	Message
typescript:S2966	src/utils/toast-internals/__tests__/repeated-toast-tracking-test.tsx	163	Forbidden non-null assertion.
typescript:S4622	src/utils/toast-internals/repeated-toast-tracking.ts	32	Refactor this union type to have less than 3 elements.

_{Analyzed by SonarQube Agentic Analysis in 3.2 s}

[sonarqube-next]

Quality Gate passed

Issues
0 New issues
0 Fixed issues
0 Accepted issues

Measures
0 Security Hotspots
0 Dependency risks
98.7% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube

[gitar-bot]

CI failed: The test 'toast utility - automatic aggregation' failed due to a synchronization issue where the toast component fails to update the DOM correctly before the assertion. This is likely a race condition in the test's state management that needs to be resolved with proper act() wrappers.

Overview

One functional test failure was identified in the toast utility suite. The CI build is failing because the should reset the aggregation count after a UI dismiss test cannot locate the expected UI element, indicating a state synchronization issue during the toast lifecycle.

Failures

Toast aggregation test failure (confidence: high)

• Type: test
• Affected jobs: 79758691212
• Related to change: yes
• Root cause: The test attempts to assert the state of a toast notification immediately after an interaction, likely before the React component has finished its re-render or state update cycle, causing a mismatch in the DOM.
• Suggested fix: Wrap the toast dismissal interaction and the subsequent assertion in await act(async () => ...) to ensure the DOM is fully updated before query methods attempt to locate the 'Shown 2 times' badge text.

Summary

• Change-related failures: 1 test failure in the toast utility module.
• Infrastructure/flaky failures: 0.
• Recommended action: Update the toast utility test file to properly wrap state-triggering interactions in act to ensure consistent DOM synchronization.

Code Review ✅ Approved 10 resolved / 10 findings

Aggregates repeated text toasts with a capped counter badge and refines lifecycle management to ensure timer consistency. All identified concerns regarding i18n, accessibility, and state management have been successfully resolved.

✅ 10 resolved

✅ Edge Case: Repetition counter badge has no upper bound

📄 src/common/components/Toast.tsx:159-160 📄 src/common/components/Toast.tsx:200 📄 src/components/badges/BadgeCounter.tsx:30 📄 src/components/badges/BadgeCounter.tsx:37
ToastRepetitionCounter is rendered with value={visibleRepetitionCount}, where visibleRepetitionCount is the raw aggregation count (a number). BadgeCounter renders value verbatim and performs no capping. While BadgeCounter supports overflow strings like '23+', the toast path always passes a plain number, so a toast aggregated a large number of times (e.g. hundreds/thousands of rapid repeats) renders the full number, which can stretch the badge and the toast's trailing content layout. Consider capping the displayed value (e.g. show '99+' when visibleRepetitionCount > 99) before passing it to the badge.

✅ Quality: Screen-reader "Repeated {count} times" is off-by-one vs occurrences

📄 src/common/components/Toast.tsx:188-202
visibleRepetitionCount equals the total number of times the toast was shown (count starts at 1 on first display, becomes 2 on the first repeat, etc.). The badge showing the total occurrence count is intuitive, but the screen-reader message Repeated {count} times. announces the same number, which reads as one more than the number of actual repeats (a toast shown 3 times has only been repeated twice). This is a minor accessibility wording nuance; if the intent is to convey total occurrences, consider wording like "Shown {count} times" to avoid ambiguity, or subtract one for the "repeated" phrasing.

✅ Quality: New i18n key 'toast.repetition-count' missing from i18n/keys.json

📄 src/common/components/Toast.tsx:191-199 📄 src/common/components/Toast.tsx:191-200
The new screen-reader message toast.repetition-count is used via intl.formatMessage in Toast.tsx, but it has not been added to i18n/keys.json, the extracted message catalog used by the translation pipeline. Every other toast message (e.g. toast.dismiss, toast.prefix.*) is registered there. Until the key is extracted (via npm run build-intl-keys) and committed, this string cannot be translated and the consistency check in CI may fail. Run the extraction script and commit the regenerated i18n/keys.json.

✅ Quality: hasActiveToast relies on undocumented sonner internals

📄 src/utils/toasts.tsx:387-401
hasActiveToast (src/utils/toasts.tsx:393-401) inspects sonner's internal toast objects via 'dismiss' in toast ? !toast.dismiss : !toast.delete. These dismiss/delete flags are not part of sonner's public, typed API (sonner 2.0.7) — the ternary itself hints that the field varies across versions. This check is load-bearing for the aggregation feature: it is the only mechanism that resets the counter once a toast disappears. If a future sonner upgrade changes this internal shape, the function could silently always-return-false (counter never increments, badge never shown) or always-return-true (stale counts grow across unrelated occurrences). Consider pinning/asserting the sonner version, adding a regression test against this behavior, or wrapping the access defensively with an explicit fallback so a shape change degrades gracefully rather than silently breaking aggregation.

✅ Quality: Timer refresh relies on undocumented Sonner duration behavior

📄 src/utils/toasts.tsx:365-375
getEffectiveDurationValue deliberately adds a toggling durationOffset (0/1 ms) to the numeric duration so that Sonner restarts the auto-close timer when an aggregated toast is updated. The accompanying comment ("Sonner only restarts the auto-close timer when the numeric duration changes") documents the trick, but it depends on internal/undocumented Sonner behaviour rather than a public API contract. A future Sonner upgrade that changes how duration changes are detected (e.g. comparing object identity, debouncing, or restarting on every update) would silently break timer refresh: aggregated toasts could auto-close based on the first occurrence's timer instead of being extended on each repeat. The existing test (should refresh the auto-close timer when an aggregated toast is updated) is the only guard. Consider pinning the Sonner version range and/or adding a comment referencing the specific Sonner version this behaviour was verified against, so the fragility is visible during dependency bumps.

...and 5 more resolved from earlier reviews

Tip

Comment Gitar fix CI or enable auto-apply: gitar auto-apply:on

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Showing less information.

Comment with these commands to change:

Auto-apply	Compact
gitar auto-apply:on	gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}

[Copilot]

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.