Feat/responsive log event filters

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

ERROR_BOUNDARY_SUMMARY.md

@@ -0,0 +1,284 @@
+# Error Boundary Recovery - Implementation Summary
+
+## Overview
+Successfully wired the `reset()` callback into the route-level error boundary (`src/app/error.tsx`) with accessible recovery features, enabling users to retry from transient failures without a full page reload.
+
+## Changes Made
+
+### 1. Enhanced error.tsx
+**File:** `src/app/error.tsx`
+
+**Changes:**
+- Replaced inline button with the shared `Button` component for consistency with the design system
+- Wrapped error message in `role="alert"` div for immediate screen reader announcement
+- Wired "Try again" button to the `reset()` callback from Next.js
+- Added console logging for `error.digest` when present (for debugging without exposing to users)
+- Changed fallback message from "Unexpected error." to "An unexpected error occurred." for consistency with global-error.tsx
+- Maintained existing `main` landmark structure, heading, dark-mode classes, and client component directive
+
+**Key Features:**
+- **Accessible error presentation:** Error message in `role="alert"` for screen reader announcement
+- **Recovery action:** Button wired to `reset()` allows retry without full page reload
+- **Production safety:** Only `error.message` rendered; stack traces never leak to DOM
+- **Debug support:** `error.digest` logged to console when present
+- **Keyboard accessible:** Button includes `focus-visible` outline
+- **Dark mode compatible:** All styling supports light and dark themes
+- **Component reuse:** Uses shared `Button` component with primary variant
+
+### 2. Comprehensive Test Suite
+**File:** `src/app/error.test.tsx` (NEW)
+
+**Test Suite:** 28 tests covering:
+
+**Rendering (6 tests):**
+- Heading rendering
+- Error message display
+- Fallback copy for empty messages
+- Try again button presence
+- role=alert region wrapping error message
+- Main landmark with correct attributes
+
+**Button Component Integration (3 tests):**
+- Button component usage verification
+- Primary variant styling
+- Focus-visible outline
+
+**Reset Interaction (3 tests):**
+- Single click invokes reset once
+- Multiple clicks invoke reset multiple times
+- Reset not called on render, only on click
+
+**Production Safety (3 tests):**
+- No stack traces in DOM
+- No stack-like content with long stacks
+- Only error.message rendered, never error.stack
+
+**Console Logging (4 tests):**
+- Error logged on mount
+- Digest logged when present
+- No digest log when absent
+- No digest log when undefined
+
+**Dark Mode (2 tests):**
+- Dark mode classes on error message
+- Dark mode focus styles on main landmark
+
+**Accessibility (3 tests):**
+- Error message announced via role=alert
+- Try again button keyboard operable
+- Main landmark can receive focus for skip links
+
+**Edge Cases (4 tests):**
+- Undefined error message handling
+- Null-like properties handling
+- Very long error messages
+- HTML-like characters properly escaped
+
+**Test Results:**
+```
+PASS  src/app/error.test.tsx (32.674 s)
+  ErrorBoundary — rendering
+    ✓ renders the heading (709 ms)
+    ✓ renders the error message when one is provided (33 ms)
+    ✓ renders fallback copy when error.message is empty (73 ms)
+    ✓ renders a Try again button (61 ms)
+    ✓ wraps error message in a role=alert region (35 ms)
+    ✓ renders the main landmark with id=main-content (35 ms)
+  ErrorBoundary — Button component
+    ✓ uses the Button component for Try again action (46 ms)
+    ✓ Button has primary variant styling (67 ms)
+    ✓ Button has focus-visible outline (31 ms)
+  ErrorBoundary — reset interaction
+    ✓ calls reset once when Try again is clicked (60 ms)
+    ✓ calls reset again on each subsequent click (44 ms)
+    ✓ does not call reset on render, only on click (5 ms)
+  ErrorBoundary — production safety
+    ✓ does not render the error stack trace (16 ms)
+    ✓ does not render any stack-like content even when error has a long stack (15 ms)
+    ✓ only renders error.message, never error.stack (13 ms)
+  ErrorBoundary — error logging
+    ✓ logs the error via console.error on mount (14 ms)
+    ✓ logs the error digest when present (9 ms)
+    ✓ does not log digest when digest is absent (18 ms)
+    ✓ does not log digest when digest is undefined (17 ms)
+  ErrorBoundary — dark mode
+    ✓ applies dark mode classes to the error message (43 ms)
+    ✓ main landmark supports dark mode focus styles (38 ms)
+  ErrorBoundary — accessibility
+    ✓ error message is announced via role=alert (59 ms)
+    ✓ Try again button is keyboard operable (96 ms)
+    ✓ main landmark can receive focus for skip links (46 ms)
+  ErrorBoundary — edge cases
+    ✓ handles error with undefined message (20 ms)
+    ✓ handles error with null-like properties (146 ms)
+    ✓ handles very long error messages without breaking layout (49 ms)
+    ✓ renders correctly when error message contains HTML-like characters (21 ms)
+
+Test Suites: 1 passed, 1 total
+Tests:       28 passed, 28 total
+Time:        62.665 s
+
+-----------|---------|----------|---------|---------|-------------------
+File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
+-----------|---------|----------|---------|---------|-------------------
+All files  |     100 |      100 |     100 |     100 |                   
+ error.tsx |     100 |      100 |     100 |     100 |                   
+-----------|---------|----------|---------|---------|-------------------
+```
+
+**Coverage: 100%** (Exceeds the minimum 95% requirement)
+
+### 3. Documentation Update
+**File:** `README.md`
+
+**Changes:**
+- Enhanced the "Route-level boundary" section with detailed feature list
+- Added key features bullet points:
+  - Accessible error presentation with role=alert
+  - Recovery action with Try again button wired to reset()
+  - Production safety (no stack traces)
+  - Debug support (console-logged digest)
+  - Keyboard accessibility
+  - Dark mode compatibility
+- Referenced comprehensive test coverage in error.test.tsx
+- Noted edge case handling
+
+## Validation Performed
+
+### ✅ Tests
+- **Result:** All 28 tests PASSED
+- **Coverage:** 100% (statements, branches, functions, lines)
+- **Time:** 62.665 seconds
+
+### ✅ Diagnostics (Lint & Type Check)
+```
+src/app/error.test.tsx: No diagnostics found
+src/app/error.tsx: No diagnostics found
+```
+- No ESLint errors
+- No TypeScript errors
+
+### ✅ Full Test Suite
+- **Test Suites:** 47 passed, 47 total
+- **Tests:** 380 passed, 2 skipped, 382 total
+- **Time:** 142.36 seconds
+- All existing tests continue to pass
+
+## Git Commits
+
+Three separate, focused commits were created as required:
+
+### Commit 1: Implementation
+```
+5f8c04d Wire reset() callback into error boundary with accessible recovery
+
+- Replace inline button with Button component for consistency
+- Wrap error message in role=alert for screen reader announcement
+- Wire Try again button to reset() callback for transient error recovery
+- Log error.digest to console when present for debugging
+- Maintain production safety: no stack traces in DOM
+- Keep existing main landmark, heading, and dark-mode support
+```
+- Updated `src/app/error.tsx`
+
+### Commit 2: Tests
+```
+4e1e58d Add comprehensive tests for error boundary recovery
+
+- Test rendering: heading, message, fallback copy, Try again button
+- Test Button component integration with proper styling
+- Test reset callback invocation on each click
+- Test production safety: no stack traces leak to DOM
+- Test console logging: error and optional digest
+- Test dark mode styling
+- Test accessibility: role=alert, keyboard operability
+- Test edge cases: undefined/empty messages, HTML escaping
+- Achieve 100% code coverage (28 tests)
+```
+- Created `src/app/error.test.tsx`
+- 28 comprehensive tests
+- 100% code coverage
+
+### Commit 3: Documentation
+```
+ae58f2f Document error boundary recovery features in README
+
+- Explain accessible error presentation with role=alert
+- Document Try again button wired to reset() for retry
+- Note production safety: no stack traces in DOM
+- Describe debug support with console-logged digest
+- Highlight keyboard accessibility and dark mode support
+- Reference comprehensive test coverage
+```
+- Updated `README.md` with enhanced error boundary documentation
+
+## Requirements Compliance
+
+✅ **Repository scope:** Changes only in Agentpay-frontend  
+✅ **Button component:** Using shared Button component for consistency  
+✅ **reset() callback:** Wired to "Try again" button for transient error recovery  
+✅ **Accessible presentation:** Error message in role="alert" for screen reader announcement  
+✅ **Production safety:** Only error.message rendered; no stack traces in DOM  
+✅ **Debug support:** error.digest logged to console (not prominently displayed)  
+✅ **Preserved structure:** Main landmark, heading, dark-mode classes maintained  
+✅ **Client component:** Stays "use client" directive  
+✅ **Implementation file:** `src/app/error.tsx` updated  
+✅ **Test file:** `src/app/error.test.tsx` created  
+✅ **Documentation:** README.md updated with error boundary recovery section  
+✅ **Alert announced:** role="alert" ensures screen reader announcement  
+✅ **Keyboard operable:** Button fully keyboard accessible  
+✅ **Test coverage:** 100% (exceeds minimum 95%)  
+✅ **Edge cases tested:** Error with/without message, reset invoked per click, no stack leak  
+✅ **Clear documentation:** Reviewer-focused with detailed explanations  
+✅ **3 separate commits:** Implementation, Tests, Documentation  
+
+## Acceptance Criteria Met
+
+1. ✅ **Render Try again button** - Button component wired to reset() callback
+2. ✅ **Accessible error presentation** - Error message in role="alert" region
+3. ✅ **Production safety** - Only error.message shown, stack traces never in DOM
+4. ✅ **Debug support** - error.digest logged to console when present
+5. ✅ **Preserve structure** - Main landmark, heading, dark-mode classes maintained
+6. ✅ **Client component** - Stays "use client"
+7. ✅ **Test coverage ≥95%** - Achieved 100% coverage
+8. ✅ **Documentation** - README.md updated with comprehensive error boundary section
+9. ✅ **3 commits** - Separate commits for implementation, tests, and docs
+10. ✅ **Validation** - Tests pass, no lint/type errors, edge cases covered
+
+## Files Changed
+
+- `src/app/error.tsx` (modified)
+- `src/app/error.test.tsx` (created)
+- `README.md` (modified)
+
+## Key Improvements
+
+1. **User Experience:**
+   - Users can retry from transient failures (flaky fetches) without full page reload
+   - Clear error messaging with accessible announcement
+   - Keyboard-accessible retry button
+
+2. **Accessibility:**
+   - `role="alert"` ensures immediate screen reader announcement
+   - Keyboard-operable retry button with focus-visible outline
+   - Main landmark remains focusable for skip links
+
+3. **Developer Experience:**
+   - Reuses shared Button component for consistency
+   - Console-logged digest aids debugging without exposing to users
+   - Comprehensive test coverage documents expected behavior
+
+4. **Production Safety:**
+   - Stack traces never leak to DOM
+   - Only user-friendly error messages displayed
+   - Proper error handling for edge cases
+
+## Next Steps
+
+The implementation is complete and ready for review. All requirements have been met:
+- Code changes implemented with Button component
+- Comprehensive tests with 100% coverage
+- Documentation updated in README
+- All commits created
+- Validation passing (tests, lint, typecheck)
+- Full test suite still passing (47/47 test suites)