feat(ux): Implement retry queue triage UX (NIC-397)#3
Open
Conversation
- Add /dashboard route with query parameter support for v2 interface - Implement tabbed navigation (Overview, Issues, Metrics) - Add clickable issue table with detail page views - Support deep linking: /dashboard?v=2&tab=issues&issueId=NIC-xxx - Enhanced CSS styling for v2 while maintaining v1 compatibility - Add slide-in animations and responsive mobile design
- Add alert detection logic to Presenter for capacity, rate limits, and orchestrator health - Implement alerts panel UI in both v1 and v2 dashboards - Support warning/critical severity levels with color coding - Include specific remediation guidance for each alert type - Graceful empty state when no alerts present - Responsive grid layout for multiple alerts
- Add sticky navigation bar with tabs and quick action buttons - Implement quick refresh, alert jump, and retry queue navigation - Add smooth scrolling with proper scroll margins - Include context-aware button visibility with count badges - Mobile responsive layout with stacked navigation - JavaScript scroll-to event handling for smooth UX
- Add comprehensive device testing matrix for mobile/tablet viewports - Implement performance budget with Core Web Vitals targets - Create automated Lighthouse audit script with mobile focus - Build responsive design test suite using Puppeteer - Include touch target validation and accessibility checks - Set up package.json with test automation scripts Addresses NIC-343: Symphony Mobile QA device matrix + perf budget Testing framework includes: - 5 primary test devices (iPhone 15 Pro, SE, Samsung S24, etc.) - Performance targets: LCP <1.5s, FID <50ms, CLS <0.1 - Automated screenshot capture across viewports - Horizontal overflow detection - Touch target size validation (≥44px) - Text readability checks (≥16px) Ready for immediate use via: npm run full-qa
Complete notification system implementation: 📱 CORE FEATURES: - Smart notification hierarchy (Critical/Important/Info) - Context-aware routing (desktop vs mobile, DnD, workout) - Duplicate suppression with configurable time windows - Intelligent batching to reduce notification noise 🔔 NOTIFICATION TYPES: - Financial alerts (portfolio changes >5%, position moves >15%) - Task/productivity alerts (stuck tasks, ready-for-review) - Health reminders (missing vitals, workout tracking, HRV) - System alerts (service outages, API failures) 🚀 PWA INTEGRATION: - Service Worker with background notification handling - Rich notification actions (Open, Snooze, Dismiss, API calls) - Offline notification queue and caching - Push API integration ready 🧠 SMART ROUTING: - Respects Do Not Disturb (10pm-7am CT, except critical) - Suppresses mobile when desktop active (except critical) - Workout time awareness (emergency only) - User preference enforcement per category 📊 TESTING & QUALITY: - Comprehensive test suite (routing, suppression, factories) - TypeScript with full type safety - Mock browser APIs for testing - Integration test utilities Addresses NIC-342: Symphony Mobile Notifications high-signal alerts Ready for immediate integration into Symphony dashboard. Time to completion: 90 minutes as planned.
Implements a real-time, mobile-first activity feed with smart grouping, infinite scroll, and touch-optimized quick actions. 🚀 **Core Features:** - **Mobile-First Design**: Thumb-friendly navigation, progressive disclosure, and responsive layouts. - **Real-Time & Performant**: WebSocket integration for live updates, virtual scrolling for smooth performance, and infinite scroll with smart preloading. - **Smart UI**: Time-based grouping (Live, Recent, Today, Yesterday), collapsible sections, and contextual quick actions. 📦 **Architecture:** - **ActivityFeed**: Main container component. - **ActivityItem**: Individual activity card. - **ActivityHeader**: Time-based group headers. - **useActivityStream**: Hook for real-time WebSocket connection. - **useInfiniteScroll**: Hook for efficient infinite scrolling. ✅ **Functionality:** - Displays live, incoming activities without a page refresh. - Groups activities logically to reduce cognitive load. - Efficiently handles very large activity lists. - Provides context-sensitive actions directly in the feed. Addresses NIC-340: Symphony Mobile UX live activity timeline. This is Phase 1, providing the core components and real-time functionality. Time to completion: 70 minutes.
✨ Features: - Enhanced sticky top action bar with improved visuals and responsiveness - Quick jump buttons for hot sections (running issues, retry queue, alerts) - Tab icons and badges showing issue counts and status - Keyboard shortcuts for power users (⌘1-3 for tabs, ⌘R refresh, ⌘Home top) - Smooth scrolling with proper offset calculations - Mobile-responsive design with adaptive layouts 🎯 Navigation Improvements: - Persistent sticky navigation that adapts when scrolled - Visual feedback when jumping to sections - Better scroll margins to avoid content hiding under nav - Utility buttons for quick access to key functions 💻 Technical: - New Phoenix LiveView hook for enhanced client-side navigation - Enhanced CSS with smooth transitions and visual feedback - Comprehensive test suite for navigation features - Updated documentation with usage guidelines Closes Linear NIC-401: Symphony Dashboard v2 navigation and sticky quick actions Removes long-scroll pain with instant access to any dashboard section
- Add Auto/Card/Table view modes with responsive toggle UI - Implement localStorage preference persistence with toast notifications - Create mobile-optimized card layout with touch targets - Maintain desktop table view with seamless mode switching - Add responsive breakpoint behavior (card <860px, table ≥860px) - Preserve backward compatibility and all existing functionality Resolves NIC-399: Symphony Dashboard v2: compact card/list modes
…king - Replace raw token counters with interactive sparkline trend charts - Add per-issue budget progress gauges with color-coded status indicators - Implement anomaly detection with automatic spike highlighting - Create interactive dual-axis charts for token consumption and runtime trends - Add budget allocation tracking with utilization metrics and alerts - Integrate Chart.js 4.4.0 with mobile-responsive design - Ensure compatibility with existing card/table view modes Resolves NIC-398: Symphony Dashboard v2: token/runtime visualization
- Adds sorting, filtering, and grouping to the retry queue in the Symphony Dashboard. - Users can now sort by due date, attempt count, or error message. - A text filter allows for isolating specific errors. - Errors are now grouped by root cause to simplify triage. - Adds UI for bulk actions (Retry, Delete, Archive All), with backend logic stubbed as a TODO pending orchestrator API details. - All features are responsive and compatible with both card and table views. Resolves NIC-397.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
This PR implements a significantly improved triage UX for the Symphony Dashboard's retry queue, as detailed in Linear issue NIC-397.
Features Added
Implementation Details
This enhancement transforms the retry queue from a simple list into an actionable triage tool, significantly improving operational efficiency.
Closes NIC-397.