Feat/phase 5 frontend improvements#6
Conversation
Replaced generic ResponseSkeleton with purpose-built skeletons: - SearchSkeleton: pipeline status, badges, response text, source cards - CompareSkeleton: side-by-side comparison layout SearchSkeleton is now used during query processing instead of ResponseSkeleton, providing a more accurate preview of what the response will look like. This reduces perceived loading time and gives users a visual structure to anticipate. Updated App.jsx to import and use SearchSkeleton in processing state.
Improved error display in App.jsx: - Added AlertTriangle icon for visual error identification - Added 'Retry query' button that re-submits the last failed query - Uses the same submittedQuery to retry without re-typing - Animated fade-in for smooth error appearance This gives users a clear path to recover from API failures instead of just showing a static error message.
Added accessibility attributes to improve screen reader support: CitationGrounding section: - aria-label on section and list containers - aria-label on each source button with full context - aria-current for active source state - role='list' and role='listitem' for proper semantics Source Documents section: - aria-label on list container - aria-label on each source card with index, title, section, match % - aria-current for active source state - role='list' and role='listitem' for proper semantics These changes make the response display navigable via keyboard and readable by assistive technologies.
Lazy-loaded the ComparisonView component which is only needed when compare mode is active. This reduces the initial bundle size by deferring the comparison UI code until the user activates compare mode. Changes: - Import ComparisonView with React.lazy() - Wrapped in Suspense with CompareSkeleton fallback - CompareSkeleton shown while ComparisonView loads This is a first step toward full route-based code splitting.
User preferences now persist across page reloads: - Sidebar collapsed/expanded state (hector.sidebarCollapsed) - Compare mode toggle (hector.compareMode) Both use the same localStorage pattern as bookmarks and history. Initial state is loaded from localStorage on mount, and changes are persisted via useEffect hooks. This improves UX by remembering the user's layout preferences.
|
Warning Review limit reached
More reviews will be available in 50 minutes and 57 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
1 participant
No description provided.