Conversation
- Introduced `Kbd` and `KbdGroup` components for keyboard shortcuts display. - Added `NavigationMenu` components including `NavigationMenuList`, `NavigationMenuItem`, `NavigationMenuTrigger`, `NavigationMenuContent`, `NavigationMenuLink`, and `NavigationMenuIndicator` for enhanced navigation functionality. - Implemented `Pagination` components with `PaginationContent`, `PaginationItem`, `PaginationLink`, `PaginationPrevious`, `PaginationNext`, and `PaginationEllipsis` for pagination controls. - Created `ResizablePanelGroup`, `ResizablePanel`, and `ResizableHandle` components for resizable panels. - Developed a comprehensive `Sidebar` component with various subcomponents including `SidebarTrigger`, `SidebarRail`, `SidebarContent`, `SidebarHeader`, `SidebarFooter`, `SidebarGroup`, and `SidebarMenu` for a responsive sidebar layout. - Added `Slider` component for range selection. - Integrated `Toaster` component for notifications with customizable icons and themes. - Implemented `Table` components including `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, and `TableCaption` for structured data representation.
Learn moreAll Green is an AI agent that automatically: ✅ Addresses code review comments ✅ Fixes failing CI checks ✅ Resolves merge conflicts |
|
Warning Rate limit exceeded@ssdeanx has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 23 minutes and 58 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (4)
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds many new UI components and utilities, refactors the navbar to use a NavigationMenu, introduces a mobile-detection hook, updates package dependencies, and changes several agent markdown configs (expanded tools, policies, and a new orchestrator). No public API removals detected; multiple new exports introduced across ui/*. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50–70 minutes Areas to focus during review:
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
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 |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
|
🤖 Hi @ssdeanx, I've received your request, and I'm working on it now! You can track my progress in the logs for more details. |
Summary of ChangesHello @ssdeanx, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the application's user interface by introducing a wide array of new, reusable UI components. Concurrently, it refines the underlying agent system with updated configurations and the addition of specialized agents designed to improve development workflows and coordination. These changes collectively aim to provide a more robust, feature-rich, and maintainable codebase. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
🤖 I'm sorry @ssdeanx, but I was unable to process your request. Please see the logs for more details. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a significant number of new UI components, effectively creating a comprehensive component library for the application. The new components include NavigationMenu, Pagination, Resizable Panels, a detailed Sidebar, Slider, Toaster, and Table elements, among others. Dependencies in package.json have been updated accordingly. Additionally, several agent configuration files have been modified and new ones added. My review focuses on the correctness and potential issues in both the new component implementations and the configuration files. I've identified a few critical issues, including a typo that breaks styling in the Select component and a logic error in the Slider component that could cause a runtime crash. There are also some medium-to-high severity issues related to configuration and component implementation best practices.
| @@ -1,5 +1,3 @@ | |||
| "use client" | |||
There was a problem hiding this comment.
The "use client" directive has been removed from this file. Since this component uses React hooks via Radix UI primitives (React.ComponentProps<typeof HoverCardPrimitive.Root>), it should be explicitly marked as a Client Component. While Next.js might infer this if it's imported by another client component, it's safer and better practice to include the directive to prevent potential server-side rendering errors and improve maintainability.
| @@ -1,26 +1,48 @@ | |||
| --- | |||
| description: 'Beast Mode 2.0: A powerful autonomous agent tuned specifically for GPT-5 that can solve complex problems by using tools, conducting research, and iterating until the problem is fully resolved.' | |||
| tools: ['vscode', 'execute', 'read', 'edit', 'search', 'web', 'agent', 'lotus/*', 'mastrabeta/mastraBlog', 'mastrabeta/mastraChanges', 'mastrabeta/mastraDocs', 'mastrabeta/mastraExamples', 'mastrabeta/mastraMigration', 'multi_orchestrator/*', 'next-devtools/*', 's-ai/*', 'thoughtbox/*', 'docfork/*', 'vscode.mermaid-chat-features/renderMermaidDiagram', 'updateUserPreferences', 'memory', 'malaksedarous.copilot-context-optimizer/askAboutFile', 'malaksedarous.copilot-context-optimizer/runAndExtract', 'malaksedarous.copilot-context-optimizer/askFollowUp', 'malaksedarous.copilot-context-optimizer/researchTopic', 'malaksedarous.copilot-context-optimizer/deepResearch', 'ms-python.python/getPythonEnvironmentInfo', 'ms-python.python/getPythonExecutableCommand', 'ms-python.python/installPythonPackage', 'ms-python.python/configurePythonEnvironment', 'search/changes', 'ms-vscode.vscode-websearchforcopilot/websearch', 'todo', 'search/changes', 'vscode/openSimpleBrowser',"search/codebase", "edit/editFiles", 'vscode/extensions', 'web/githubRepo', 'vscode/openSimpleBrowser', 'read/problems'] | |||
There was a problem hiding this comment.
The tools list contains duplicate entries. Specifically, search/changes and vscode/openSimpleBrowser are listed twice. While this may not break functionality, it adds unnecessary clutter and can lead to confusion. Please remove the duplicates to keep the configuration clean and maintainable.
| useEffect(() => { | ||
| if (prevPathnameRef.current !== pathname) { | ||
| setMobileOpen(false) | ||
| startTransition(() => setMobileOpen(false)) |
There was a problem hiding this comment.
Using startTransition here is a great optimization to prevent the UI from blocking when the mobile menu is closed upon navigation. This improves the user experience by keeping the interface responsive.
| const openItems = React.useMemo( | ||
| () => (value !== undefined ? (Array.isArray(value) ? value : [value]) : internalOpen), | ||
| [value, internalOpen] | ||
| ) |
There was a problem hiding this comment.
Wrapping the calculation of openItems in React.useMemo is a good micro-optimization. It prevents this value from being re-calculated on every render, only updating when value or internalOpen changes, which can contribute to better performance in complex components.
Greptile SummaryThis PR adds a comprehensive suite of UI components and updates the navigation system to support the Mastra framework's expanding interface needs. Key Changes
Issues Found
Confidence Score: 3/5
Important Files Changed
Sequence DiagramsequenceDiagram
participant User
participant Navbar
participant NavigationMenu
participant Sidebar
participant useIsMobile
participant Sheet
participant SidebarProvider
User->>Navbar: Clicks Products menu
Navbar->>NavigationMenu: Opens NavigationMenuTrigger
NavigationMenu->>NavigationMenu: Shows NavigationMenuContent
NavigationMenu-->>User: Displays dropdown with links
User->>Sidebar: Clicks SidebarTrigger
Sidebar->>useIsMobile: Check if mobile
useIsMobile-->>Sidebar: Returns isMobile state
alt Mobile View
Sidebar->>Sheet: Opens mobile sheet
Sheet-->>User: Shows sidebar in overlay
else Desktop View
Sidebar->>SidebarProvider: Toggle sidebar state
SidebarProvider->>SidebarProvider: Updates cookie state
SidebarProvider-->>Sidebar: Updates open/collapsed state
Sidebar-->>User: Animates sidebar transition
end
User->>Sidebar: Presses Cmd+B / Ctrl+B
Sidebar->>SidebarProvider: Keyboard shortcut handler
SidebarProvider->>SidebarProvider: Calls toggleSidebar()
SidebarProvider-->>Sidebar: Updates state
Sidebar-->>User: Toggles sidebar visibility
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined) | ||
|
|
||
| React.useEffect(() => { | ||
| const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) | ||
| const onChange = () => { | ||
| setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) | ||
| } | ||
| mql.addEventListener("change", onChange) | ||
| setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) | ||
| return () => mql.removeEventListener("change", onChange) | ||
| }, []) | ||
|
|
||
| return !!isMobile |
There was a problem hiding this comment.
logic: hydration mismatch - server renders undefined, client renders boolean
| const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined) | |
| React.useEffect(() => { | |
| const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) | |
| const onChange = () => { | |
| setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) | |
| } | |
| mql.addEventListener("change", onChange) | |
| setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) | |
| return () => mql.removeEventListener("change", onChange) | |
| }, []) | |
| return !!isMobile | |
| const [isMobile, setIsMobile] = React.useState<boolean>(false) | |
| React.useEffect(() => { | |
| const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) | |
| const onChange = () => { | |
| setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) | |
| } | |
| mql.addEventListener("change", onChange) | |
| setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) | |
| return () => mql.removeEventListener("change", onChange) | |
| }, []) | |
| return isMobile |
Prompt To Fix With AI
This is a comment left during a code review.
Path: hooks/use-mobile.ts
Line: 6:18
Comment:
**logic:** hydration mismatch - server renders `undefined`, client renders boolean
```suggestion
const [isMobile, setIsMobile] = React.useState<boolean>(false)
React.useEffect(() => {
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
const onChange = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
}
mql.addEventListener("change", onChange)
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
return () => mql.removeEventListener("change", onChange)
}, [])
return isMobile
```
How can I resolve this? If you propose a fix, please make it concise.There was a problem hiding this comment.
Pull request overview
This pull request introduces a comprehensive set of new UI components and enhances the application's navigation functionality, significantly expanding the UI component library with production-ready patterns.
Key additions:
- 14 new UI components including Table, Pagination, NavigationMenu, Sidebar, Slider, Toaster, Resizable panels, and specialized components (Kbd, InputOTP, Field, Empty, Chart, Breadcrumb)
- Enhanced navbar with dropdown navigation menu using the new NavigationMenu component
- Custom hook
useIsMobilefor responsive behavior - Several new agent configuration files for SE orchestration
Critical issues found:
- Invalid Tailwind CSS selectors in multiple files (sheet.tsx, select.tsx, popover.tsx, hover-card.tsx) using
closed:*instead ofdata-[state=closed]:* - Typo in select.tsx:
data-disa2bledshould bedata-disabled - Major version downgrade of recharts (3.6.0 → 2.15.4) needs verification
Reviewed changes
Copilot reviewed 30 out of 31 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/table.tsx | New table component with header, body, footer, row, cell, and caption subcomponents |
| ui/sonner.tsx | Toast notification component with theme support and custom icons |
| ui/slider.tsx | Range slider component with Radix UI integration |
| ui/sidebar.tsx | Comprehensive sidebar with collapsible variants, mobile support, and keyboard shortcuts |
| ui/resizable.tsx | Resizable panel system for flexible layouts |
| ui/pagination.tsx | Pagination controls with previous/next/ellipsis components |
| ui/navigation-menu.tsx | Dropdown navigation menu with viewport and trigger components |
| ui/kbd.tsx | Keyboard shortcut display components |
| ui/input-otp.tsx | OTP input with groups and slots |
| ui/field.tsx | Form field wrapper with label, description, error handling |
| ui/empty.tsx | Empty state component with header, title, description |
| ui/chart.tsx | Recharts integration with theming and tooltip support |
| ui/breadcrumb.tsx | Breadcrumb navigation component |
| ui/tabs.tsx | Changed nullish coalescing operator usage |
| ui/switch.tsx | Simplified controlled state logic, added eslint disable comment |
| ui/sheet.tsx | Invalid CSS selector changes - broken animations |
| ui/select.tsx | Invalid CSS selectors and typo - broken styling |
| ui/radio-group.tsx | Simplified controlled state, added eslint comments |
| ui/progress.tsx | Changed to nullish coalescing operator |
| ui/popover.tsx | Invalid CSS selector changes - broken animations |
| ui/hover-card.tsx | Removed "use client" directive, invalid CSS selectors |
| ui/accordion.tsx | Memoized openItems calculation, added eslint comments |
| package.json | Added new dependencies, downgraded recharts version |
| hooks/use-mobile.ts | New custom hook for mobile breakpoint detection |
| app/components/navbar.tsx | Enhanced with NavigationMenu component and product dropdown |
| .github/agents/* | New SE agent configurations for orchestration workflows |
| ref={ref} | ||
| className={cn( | ||
| "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", | ||
| "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in closed:animate-out closed:duration-300 data-[state=open]:duration-500", |
There was a problem hiding this comment.
Same issue as line 19 - the CSS selectors closed:animate-out and closed:duration-300 are invalid. They should be data-[state=closed]:animate-out and data-[state=closed]:duration-300 to properly target the closed state animation.
| data-slot="select-content" | ||
| className={cn( | ||
| "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", | ||
| "bg-popover text-popover-foreground data-[state=open]:animate-in closed:animate-out closed:fade-out-0 data-[state=open]:fade-in-0 closed:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", |
There was a problem hiding this comment.
Multiple invalid CSS selectors: closed:animate-out, closed:fade-out-0, and closed:zoom-out-95 should all use the format data-[state=closed]:* to properly target the closed state animations.
| data-slot="select-item" | ||
| className={cn( | ||
| "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", | ||
| "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disa2bled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", |
There was a problem hiding this comment.
There's a typo in the class name: data-disa2bled:opacity-50 should be data-disabled:opacity-50. This typo will prevent the disabled state styling from being applied correctly.
| "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disa2bled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", | |
| "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", |
| "data-[state=open]:animate-in closed:animate-out", | ||
| "closed:fade-out-0 data-[state=open]:fade-in-0", | ||
| "closed:zoom-out-95 data-[state=open]:zoom-in-95", |
There was a problem hiding this comment.
The same invalid CSS selector pattern appears here: closed:animate-out, closed:fade-out-0, and closed:zoom-out-95 should all use data-[state=closed]:* format for proper state targeting.
| "data-[state=open]:animate-in closed:animate-out", | |
| "closed:fade-out-0 data-[state=open]:fade-in-0", | |
| "closed:zoom-out-95 data-[state=open]:zoom-in-95", | |
| "data-[state=open]:animate-in data-[state=closed]:animate-out", | |
| "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", | |
| "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", |
| sideOffset={sideOffset} | ||
| className={cn( | ||
| "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", | ||
| "bg-popover text-popover-foreground data-[state=open]:animate-in closed:animate-out closed:fade-out-0 data-[state=open]:fade-in-0 closed:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", |
There was a problem hiding this comment.
Invalid CSS selectors: closed:animate-out, closed:fade-out-0, and closed:zoom-out-95 should use the format data-[state=closed]:* to properly match the closed state.
| "react-dom": "^19.2.3", | ||
| "recharts": "^3.6.0", | ||
| "react-resizable-panels": "^4.0.7", | ||
| "recharts": "^2.15.4", |
There was a problem hiding this comment.
The version downgrade from recharts ^3.6.0 to ^2.15.4 is a major version change that could introduce breaking changes or remove features. This should be documented in the PR description with reasoning and confirmation that all existing chart functionality still works correctly.
| "recharts": "^2.15.4", | |
| "recharts": "^3.6.0", |
| <DialogPrimitive.Overlay | ||
| className={cn( | ||
| "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", | ||
| "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in closed:animate-out closed:fade-out-0 data-[state=open]:fade-in-0", |
There was a problem hiding this comment.
There's a typo in the data attribute selector. The code uses closed:animate-out and closed:fade-out-0 which should be data-[state=closed]:animate-out and data-[state=closed]:fade-out-0. The current selectors won't match any valid Tailwind CSS syntax and the animations won't work as intended.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 31
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
ui/radio-group.tsx (1)
41-51: Critical: Nullish coalescing creates inconsistent controlled/uncontrolled state.The change from
value !== undefined ? value : internalValuetovalue ?? internalValueintroduces a logic bug:
- Line 41: Uses
??operator, treating bothnullandundefinedas "use internal value"- Line 45: Checks
value === undefinedto determine if component is uncontrolledProblem: If
value={null}is passed:
controlledValuewill resolve tointernalValue(becausenull ?? internalValue=internalValue)- The
onChangehandler will NOT updateinternalValue(becausenull !== undefined)- Result: Component displays internal state but won't update it → broken state management
This violates React's controlled component pattern where
undefined= uncontrolled, and any other value (includingnull) = controlled.Fix: Revert to explicit undefined check for consistency
- const controlledValue = value ?? internalValue + const controlledValue = value !== undefined ? value : internalValueAlternatively, if you want to treat
nullas uncontrolled, update BOTH checks:- const controlledValue = value ?? internalValue + const controlledValue = value ?? internalValue const onChange = React.useCallback( (newValue: string) => { - if (value === undefined) { + if (value == null) { setInternalValue(newValue) } onValueChange?.(newValue) }, [value, onValueChange] )However, the first approach (explicit
undefinedcheck) aligns with standard React patterns.ui/switch.tsx (1)
15-24: Critical: Nullish coalescing creates inconsistent controlled/uncontrolled state.Identical issue as in
radio-group.tsx— the nullish coalescing operator creates a mismatch with the state update logic:
- Line 15:
checked ?? isCheckedtreats bothnullandundefinedas "use internal state"- Line 19:
checked === undefinedonly treatsundefinedas uncontrolledProblem: If
checked={null}is passed:
controlledCheckedresolves toisChecked(becausenull ?? isChecked=isChecked)handleChangewill NOT updateisChecked(becausenull !== undefined)- Result: Component displays internal state but won't update it → broken toggle behavior
Fix: Revert to explicit undefined check
- const controlledChecked = checked ?? isChecked + const controlledChecked = checked !== undefined ? checked : isCheckedThis maintains React's standard controlled component pattern where
undefinedindicates an uncontrolled component.Alternatively, if intentionally treating
nullas uncontrolled, update both checks:const controlledChecked = checked ?? isChecked const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { const newChecked = e.target.checked - if (checked === undefined) { + if (checked == null) { setIsChecked(newChecked) } onCheckedChange?.(newChecked) onChange?.(e) }However, the explicit
undefinedcheck is recommended for consistency with React conventions.ui/popover.tsx (1)
4-4: Critical: Incorrect Radix UI import.Line 4 imports
PopoverPrimitivefrom@radix-ui/react-hover-card, but it should import from@radix-ui/react-popover. This is a copy-paste error that will cause the Popover component to malfunction.🔎 Apply this diff to fix the import:
-import * as PopoverPrimitive from "@radix-ui/react-hover-card" +import * as PopoverPrimitive from "@radix-ui/react-popover"app/components/navbar.tsx (1)
231-283: Consider extracting shared SVG icons to reduce duplication.The SVG icons for Chat, Networks, and Workflows are duplicated between desktop (lines 93-147) and mobile (lines 231-283) navigation. Extract these into reusable icon components to improve maintainability.
🔎 Example extraction
// Could be in a separate file or at the top of navbar.tsx const ChatIcon = ({ className }: { className?: string }) => ( <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-label="Chat"> <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/> <circle cx="9" cy="10" r="1"/> <circle cx="12" cy="10" r="1"/> <circle cx="15" cy="10" r="1"/> </svg> ) // Similar for NetworksIcon, WorkflowsIcon
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (30)
.github/agents/4.1-Beast.agent.md(1 hunks).github/agents/gpt-5-beast-mode.agent.md(2 hunks).github/agents/se-code-specialist.agent.md(1 hunks).github/agents/se-gitops-ci-specialist.agent.md(1 hunks).github/agents/se-orchestrator.agent.md(1 hunks)app/components/navbar.tsx(4 hunks)hooks/use-mobile.ts(1 hunks)package.json(7 hunks)ui/accordion.tsx(3 hunks)ui/breadcrumb.tsx(1 hunks)ui/chart.tsx(1 hunks)ui/empty.tsx(1 hunks)ui/field.tsx(1 hunks)ui/hover-card.tsx(1 hunks)ui/input-otp.tsx(1 hunks)ui/kbd.tsx(1 hunks)ui/navigation-menu.tsx(1 hunks)ui/pagination.tsx(1 hunks)ui/popover.tsx(1 hunks)ui/progress.tsx(1 hunks)ui/radio-group.tsx(3 hunks)ui/resizable.tsx(1 hunks)ui/select.tsx(4 hunks)ui/sheet.tsx(2 hunks)ui/sidebar.tsx(1 hunks)ui/slider.tsx(1 hunks)ui/sonner.tsx(1 hunks)ui/switch.tsx(1 hunks)ui/table.tsx(1 hunks)ui/tabs.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (22)
**/hooks/**/*.{js,ts}
📄 CodeRabbit inference engine (.github/instructions/next-js.instructions.md)
Use camelCase for hook file names (e.g.,
useHookName.jsoruseHookName.ts).
Files:
hooks/use-mobile.ts
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/next-js.instructions.md)
**/*.{js,jsx,ts,tsx}: Usenext/dynamicfor dynamic imports to load components only when needed, improving initial load time.
Usenext/imagecomponent for automatic image optimization, including lazy loading and responsive images.
Use React.memo to prevent unnecessary re-renders of components.
Use the<Link prefetch>tag to prefetch pages that are likely to be visited.
Use getServerSideProps, getStaticProps, or server components for fetching data on the server-side.
Use SWR or React Query for client-side data fetching and caching.
Use CSS Modules, Styled Components, or Tailwind CSS for component-level styling. Prefer Tailwind CSS for rapid development.
Use React Context, Zustand, Jotai, or Recoil for managing global state. Avoid Redux unless necessary.
Usereact-hook-formfor managing forms and validation.
Only fetch the data that is needed by the component to avoid over-fetching.
Avoid long-running synchronous operations in the main thread to prevent blocking.
Always usesetStateor hooks to update state instead of mutating state directly.
Include a complete dependency array inuseEffecthooks to prevent unexpected behavior.
Avoid writing server-side code in client components to prevent exposing secrets or causing unexpected behavior.
Usetry...catchblocks for handling errors in asynchronous operations.
Implement error boundary components usinggetDerivedStateFromErrororcomponentDidCatchlifecycle methods.
Sanitize user input to prevent Cross-Site Scripting (XSS) attacks. Be especially careful when rendering HTML directly from user input.
Store authentication tokens in HTTP-only cookies or local storage securely.
Implement role-based access control to restrict access to sensitive resources.
Clean up event listeners and timers inuseEffecthooks to avoid memory leaks.
Only update state when necessary to reduce the number of re-renders and improve performance.
Use immutable data structures and avoid mutating data directly to prevent unexpected...
Files:
hooks/use-mobile.tsui/resizable.tsxui/slider.tsxui/input-otp.tsxui/hover-card.tsxui/breadcrumb.tsxui/tabs.tsxui/popover.tsxui/sonner.tsxui/kbd.tsxapp/components/navbar.tsxui/chart.tsxui/empty.tsxui/field.tsxui/sheet.tsxui/table.tsxui/accordion.tsxui/progress.tsxui/select.tsxui/navigation-menu.tsxui/pagination.tsxui/switch.tsxui/radio-group.tsxui/sidebar.tsx
**/*.{js,ts}
📄 CodeRabbit inference engine (.github/instructions/next-js.instructions.md)
Use parameterized queries or an ORM to prevent SQL injection attacks.
Files:
hooks/use-mobile.ts
**/*.{ts,tsx,js,jsx,py,java,cs,rb,go,rs,cpp,c,h,hpp,swift,kotlin,php,scala,clj,groovy,lua,sh,bash}
📄 CodeRabbit inference engine (.github/instructions/self-explanatory-code-commenting.instructions.md)
**/*.{ts,tsx,js,jsx,py,java,cs,rb,go,rs,cpp,c,h,hpp,swift,kotlin,php,scala,clj,groovy,lua,sh,bash}: Write code that speaks for itself. Comment only when necessary to explain WHY, not WHAT. Avoid obvious comments that state what the code literally does.
Avoid redundant comments that simply repeat what the code is doing
Keep comments accurate and up-to-date with code changes. Remove or update outdated comments that no longer match the implementation.
Write comments for complex business logic that explain the WHY behind specific calculations or business rules
Document non-obvious algorithms with comments explaining the algorithm choice and its reasoning
Add comments explaining what regex patterns match, especially for complex patterns
Document API constraints, rate limits, gotchas, and external dependencies with explanatory comments
Avoid commenting out dead code. Use version control instead of maintaining commented code blocks.
Do not maintain code change history or modification logs as comments. Rely on git history and commit messages instead.
Avoid decorative divider comments (e.g., lines of equals signs or asterisks) for section separation
Ensure comments are placed appropriately above or adjacent to the code they describe
Write comments using proper grammar, spelling, and professional language
Prefer self-documenting code with clear variable/function names over adding comments to explain unclear code
Files:
hooks/use-mobile.tsui/resizable.tsxui/slider.tsxui/input-otp.tsxui/hover-card.tsxui/breadcrumb.tsxui/tabs.tsxui/popover.tsxui/sonner.tsxui/kbd.tsxapp/components/navbar.tsxui/chart.tsxui/empty.tsxui/field.tsxui/sheet.tsxui/table.tsxui/accordion.tsxui/progress.tsxui/select.tsxui/navigation-menu.tsxui/pagination.tsxui/switch.tsxui/radio-group.tsxui/sidebar.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/instructions/self-explanatory-code-commenting.instructions.md)
**/*.{ts,tsx,js,jsx}: Document public APIs with TSDoc/JSDoc comments including parameter descriptions, return types, examples, and thrown exceptions
Add TSDoc comments to configuration constants and environment variables explaining their source, reasoning, or constraints
Use TSDoc annotation tags (TODO, FIXME, HACK, NOTE, WARNING, PERF, SECURITY, BUG, REFACTOR, DEPRECATED) to mark special comments
Include file headers with @fileoverview, @author, @copyright, and @license tags to document file purpose and ownership
Document function parameters with @param tags, return values with @returns tags, and exceptions with @throws tags in TSDoc comments
Use @see tags in TSDoc comments to reference related functions, methods, or documentation
Include @example tags in public API documentation with code examples showing typical usageUse ESLint configuration from eslint.config.cjs with TypeScript rules and Prettier integration
Files:
hooks/use-mobile.tsui/resizable.tsxui/slider.tsxui/input-otp.tsxui/hover-card.tsxui/breadcrumb.tsxui/tabs.tsxui/popover.tsxui/sonner.tsxui/kbd.tsxapp/components/navbar.tsxui/chart.tsxui/empty.tsxui/field.tsxui/sheet.tsxui/table.tsxui/accordion.tsxui/progress.tsxui/select.tsxui/navigation-menu.tsxui/pagination.tsxui/switch.tsxui/radio-group.tsxui/sidebar.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/self-explanatory-code-commenting.instructions.md)
**/*.{ts,tsx}: Document interface and type definitions with TSDoc comments explaining their purpose and usage context
Document interface properties with /** */ comments explaining each field's purpose and constraints
Document generic type parameters with @template tags explaining what each type parameter represents
Use type guards with comments explaining the runtime validation logic being performed
Document advanced/complex TypeScript types with explanatory comments about their purpose and use cases
Files:
hooks/use-mobile.tsui/resizable.tsxui/slider.tsxui/input-otp.tsxui/hover-card.tsxui/breadcrumb.tsxui/tabs.tsxui/popover.tsxui/sonner.tsxui/kbd.tsxapp/components/navbar.tsxui/chart.tsxui/empty.tsxui/field.tsxui/sheet.tsxui/table.tsxui/accordion.tsxui/progress.tsxui/select.tsxui/navigation-menu.tsxui/pagination.tsxui/switch.tsxui/radio-group.tsxui/sidebar.tsx
**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
For Next.js projects, always utilize the
next-devtools-mcpserver for all Next.js related queries
Files:
hooks/use-mobile.tsui/resizable.tsxui/slider.tsxui/input-otp.tsxui/hover-card.tsxui/breadcrumb.tsxui/tabs.tsxui/popover.tsxui/sonner.tsxui/kbd.tsxapp/components/navbar.tsxui/chart.tsxui/empty.tsxui/field.tsxui/sheet.tsxui/table.tsxui/accordion.tsxui/progress.tsxui/select.tsxui/navigation-menu.tsxui/pagination.tsxui/switch.tsxui/radio-group.tsxui/sidebar.tsxpackage.json
**/*.{js,ts,jsx,tsx,java,py,cs,go,rb,php,swift,kt,scala,rs,cpp,c,h}
📄 CodeRabbit inference engine (.github/instructions/code-review-generic.instructions.md)
**/*.{js,ts,jsx,tsx,java,py,cs,go,rb,php,swift,kt,scala,rs,cpp,c,h}: Use descriptive and meaningful names for variables, functions, and classes
Apply Single Responsibility Principle: each function/class does one thing well
Follow DRY (Don't Repeat Yourself): eliminate code duplication
Keep functions small and focused (ideally < 20-30 lines)
Avoid deeply nested code (max 3-4 levels)
Avoid magic numbers and strings; use named constants instead
Code should be self-documenting; use comments only when necessary
Implement proper error handling at appropriate levels with meaningful error messages
Avoid silent failures or ignored exceptions; fail fast and validate inputs early
Use appropriate error types/exceptions with meaningful context
Validate and sanitize all user inputs
Use parameterized queries for database access; never use string concatenation for SQL queries
Implement proper authentication checks before accessing resources
Verify user has permission to perform actions; implement proper authorization
Use established cryptographic libraries; never roll your own crypto implementation
Avoid N+1 query problems; use proper indexing and eager loading for database queries
Use appropriate algorithms with suitable time/space complexity for the use case
Utilize caching for expensive or repeated operations
Ensure proper cleanup of connections, files, and streams to prevent resource leaks
Implement pagination for large result sets
Load data only when needed (lazy loading pattern)
Document all public APIs with purpose, parameters, and return values
Add explanatory comments for non-obvious logic
No commented-out code or unresolved TODO comments without associated tickets should remain in commits
Ensure code follows consistent style and conventions with the rest of the codebase
Files:
hooks/use-mobile.tsui/resizable.tsxui/slider.tsxui/input-otp.tsxui/hover-card.tsxui/breadcrumb.tsxui/tabs.tsxui/popover.tsxui/sonner.tsxui/kbd.tsxapp/components/navbar.tsxui/chart.tsxui/empty.tsxui/field.tsxui/sheet.tsxui/table.tsxui/accordion.tsxui/progress.tsxui/select.tsxui/navigation-menu.tsxui/pagination.tsxui/switch.tsxui/radio-group.tsxui/sidebar.tsx
**/*.{js,ts,jsx,tsx,java,py,cs,go,rb,php,swift,kt,scala,rs,cpp,c,h,json,yaml,yml,env,config}
📄 CodeRabbit inference engine (.github/instructions/code-review-generic.instructions.md)
Never include passwords, API keys, tokens, or PII in code or logs
Files:
hooks/use-mobile.tsui/resizable.tsxui/slider.tsxui/input-otp.tsxui/hover-card.tsxui/breadcrumb.tsxui/tabs.tsxui/popover.tsxui/sonner.tsxui/kbd.tsxapp/components/navbar.tsxui/chart.tsxui/empty.tsxui/field.tsxui/sheet.tsxui/table.tsxui/accordion.tsxui/progress.tsxui/select.tsxui/navigation-menu.tsxui/pagination.tsxui/switch.tsxui/radio-group.tsxui/sidebar.tsxpackage.json
**/*.{ts,tsx,java,cs,go,php,swift,kt,scala}
📄 CodeRabbit inference engine (.github/instructions/code-review-generic.instructions.md)
Prefer small, focused interfaces (Interface Segregation Principle)
Files:
hooks/use-mobile.tsui/resizable.tsxui/slider.tsxui/input-otp.tsxui/hover-card.tsxui/breadcrumb.tsxui/tabs.tsxui/popover.tsxui/sonner.tsxui/kbd.tsxapp/components/navbar.tsxui/chart.tsxui/empty.tsxui/field.tsxui/sheet.tsxui/table.tsxui/accordion.tsxui/progress.tsxui/select.tsxui/navigation-menu.tsxui/pagination.tsxui/switch.tsxui/radio-group.tsxui/sidebar.tsx
**/*.{js,mjs,cjs,ts,tsx,jsx,py,java,cs,go,rb,php,rs,cpp,c,h,hpp}
📄 CodeRabbit inference engine (.github/instructions/update-docs-on-code-change.instructions.md)
Use automated documentation generators for code documentation - JSDoc/TSDoc for JavaScript/TypeScript, Sphinx/pdoc for Python, Javadoc for Java, xmldoc for C#, godoc for Go, rustdoc for Rust
Files:
hooks/use-mobile.tsui/resizable.tsxui/slider.tsxui/input-otp.tsxui/hover-card.tsxui/breadcrumb.tsxui/tabs.tsxui/popover.tsxui/sonner.tsxui/kbd.tsxapp/components/navbar.tsxui/chart.tsxui/empty.tsxui/field.tsxui/sheet.tsxui/table.tsxui/accordion.tsxui/progress.tsxui/select.tsxui/navigation-menu.tsxui/pagination.tsxui/switch.tsxui/radio-group.tsxui/sidebar.tsx
**/*.{ts,tsx,js,jsx,json,md}
📄 CodeRabbit inference engine (AGENTS.md)
Use Prettier for code formatting with ES5 trailing commas, 4-space tabs, and single quotes
Files:
hooks/use-mobile.tsui/resizable.tsxui/slider.tsxui/input-otp.tsxui/hover-card.tsxui/breadcrumb.tsxui/tabs.tsxui/popover.tsxui/sonner.tsxui/kbd.tsxapp/components/navbar.tsxui/chart.tsxui/empty.tsxui/field.tsxui/sheet.tsxui/table.tsxui/accordion.tsxui/progress.tsxui/select.tsxui/navigation-menu.tsxui/pagination.tsxui/switch.tsxui/radio-group.tsxui/sidebar.tsxpackage.json
**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript with ES2022 target and Next.js path aliases configured in tsconfig.json
Files:
hooks/use-mobile.ts
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Style UI components with Tailwind CSS 4 using oklch color variables
Files:
ui/resizable.tsxui/slider.tsxui/input-otp.tsxui/hover-card.tsxui/breadcrumb.tsxui/tabs.tsxui/popover.tsxui/sonner.tsxui/kbd.tsxapp/components/navbar.tsxui/chart.tsxui/empty.tsxui/field.tsxui/sheet.tsxui/table.tsxui/accordion.tsxui/progress.tsxui/select.tsxui/navigation-menu.tsxui/pagination.tsxui/switch.tsxui/radio-group.tsxui/sidebar.tsx
ui/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Use shadcn/ui base components (34 components) from the ui/ directory for common UI patterns
Files:
ui/resizable.tsxui/slider.tsxui/input-otp.tsxui/hover-card.tsxui/breadcrumb.tsxui/tabs.tsxui/popover.tsxui/sonner.tsxui/kbd.tsxui/chart.tsxui/empty.tsxui/field.tsxui/sheet.tsxui/table.tsxui/accordion.tsxui/progress.tsxui/select.tsxui/navigation-menu.tsxui/pagination.tsxui/switch.tsxui/radio-group.tsxui/sidebar.tsx
**/app/**
📄 CodeRabbit inference engine (.github/instructions/next-js.instructions.md)
Use the
app/directory structure for route handlers, server components, and client components (Next.js 13+). Prefer this over thepages/directory for new projects.
Files:
app/components/navbar.tsx
**/components/**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/next-js.instructions.md)
Use PascalCase for component file names (e.g.,
ComponentName.jsxorComponentName.tsx).
Files:
app/components/navbar.tsx
app/**/*.{tsx,ts}
📄 CodeRabbit inference engine (app/AGENTS.md)
app/**/*.{tsx,ts}: Use Tailwind CSS 4 with oklch color variables for styling in Next.js App Router pages and layouts
Use React 19 latest features in component implementations within the app directory
Files:
app/components/navbar.tsx
app/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
app/**/*.{ts,tsx}: Use Next.js 16 App Router with React 19 for frontend development
Use MastraClient for fetching agent, workflow, tool, and thread data in frontend applications
Files:
app/components/navbar.tsx
app/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Use TanStack Query hooks from
lib/hooks/use-dashboard-queries.tsfor agents, workflows, tools, traces, threads, and messages
Files:
app/components/navbar.tsx
**/{next.config.{js,ts},package.json,tsconfig.json,jsconfig.json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
For Next.js projects, automatically call the
inittool from next-devtools-mcp server first to establish proper context and ensure all Next.js queries use official documentation
Files:
package.json
**/{package.json,package-lock.json,yarn.lock,pom.xml,build.gradle,Pipfile,Pipfile.lock,requirements.txt,composer.json,composer.lock,pubspec.yaml,Gemfile,Gemfile.lock,go.mod,go.sum,Cargo.toml,Cargo.lock}
📄 CodeRabbit inference engine (.github/instructions/code-review-generic.instructions.md)
Check dependencies for known vulnerabilities and keep them up-to-date
Files:
package.json
🧬 Code graph analysis (2)
hooks/use-mobile.ts (1)
lib/hooks/use-mobile.ts (1)
useIsMobile(5-21)
ui/pagination.tsx (1)
ui/button.tsx (2)
Button(60-60)buttonVariants(60-60)
🪛 ast-grep (0.40.0)
ui/chart.tsx
[warning] 80-80: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html
(react-unsafe-html-injection)
🪛 Biome (2.1.2)
ui/input-otp.tsx
[error] 69-69: The HTML element with the interactive role "separator" is not focusable.
A non-interactive HTML element that is not focusable may not be reachable for users that rely on keyboard navigation, even with an added role like "separator".
Add a tabIndex attribute to make this element focusable.
(lint/a11y/useFocusableInteractive)
[error] 69-69: The elements with this role can be changed to the following elements:
For examples and more information, see WAI-ARIA Roles
(lint/a11y/useSemanticElements)
[error] 69-69: The element with the separator ARIA role does not have the required ARIA attributes.
Missing ARIA prop(s):
(lint/a11y/useAriaPropsForRole)
ui/breadcrumb.tsx
[error] 54-61: The HTML element with the interactive role "link" is not focusable.
A non-interactive HTML element that is not focusable may not be reachable for users that rely on keyboard navigation, even with an added role like "link".
Add a tabIndex attribute to make this element focusable.
(lint/a11y/useFocusableInteractive)
app/components/navbar.tsx
[error] 93-93: Alternative text title element cannot be empty
For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
(lint/a11y/noSvgWithoutTitle)
[error] 106-106: Alternative text title element cannot be empty
For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
(lint/a11y/noSvgWithoutTitle)
[error] 134-134: Alternative text title element cannot be empty
For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
(lint/a11y/noSvgWithoutTitle)
ui/chart.tsx
[error] 81-81: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
ui/pagination.tsx
[error] 14-14: Using the role attribute 'navigation' on the 'nav' element is redundant, because it is implied by its semantic.
Unsafe fix: Remove the role attribute.
(lint/a11y/noRedundantRoles)
🪛 LanguageTool
.github/agents/se-code-specialist.agent.md
[grammar] ~65-~65: Ensure spelling is correct
Context: ...o-specific search/pull-request helpers, runSubagent calls for checks, and avoid destructive...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[uncategorized] ~198-~198: The official name of this software platform is spelled with a capital “H”.
Context: ...ation). - Add a GitHub Actions workflow `.github/workflows/agents-validate-se-code-speci...
(GITHUB)
🪛 markdownlint-cli2 (0.18.1)
.github/agents/se-code-specialist.agent.md
41-41: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
54-54: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
68-68: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
84-84: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
96-96: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
109-109: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
123-123: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
134-134: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
141-141: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
150-150: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
174-174: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
200-200: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
.github/agents/se-orchestrator.agent.md
41-41: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
54-54: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
68-68: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
84-84: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
96-96: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Codacy Security Scan
- GitHub Check: Agent
- GitHub Check: CodeQL analysis (javascript-typescript)
- GitHub Check: Greptile Review
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (36)
ui/progress.tsx (1)
23-23: LGTM! Excellent improvement to null handling.The change from
value || 0tovalue ?? 0is more semantically correct and type-safe. The nullish coalescing operator (??) only defaults to 0 whenvalueisnullorundefined, while preserving0as a valid progress value (0% complete). This prevents potential edge cases where other falsy values might be incorrectly coerced and aligns with modern TypeScript best practices for handling nullable types.ui/accordion.tsx (1)
50-53: Good use of useMemo for derived state.The addition of
useMemoto computeopenItemsprevents unnecessary recalculations and improves performance, especially when the accordion re-renders frequently. The dependency array[value, internalOpen]is correct..github/agents/se-code-specialist.agent.md (1)
198-198: Use correct capitalization for GitHub.Line 198 references "github" but the official name is "GitHub" with a capital "H".
🔎 Apply this diff:
-- Add a GitHub Actions workflow `.github/workflows/agents-validate-se-code-specialist.yml` to run the test harness on PRs and pushes. +- Add a GitHub Actions workflow `.github/workflows/agents-validate-se-code-specialist.yml` to run the test harness on PRs and pushes.Likely an incorrect or invalid review comment.
ui/sheet.tsx (1)
19-19: Verifyclosed:variant is configured in Tailwind CSS.Both
SheetOverlay(Line 19) andSheetContent(Line 51) now useclosed:prefixed animation variants. This pattern is consistent across the PR but requires proper Tailwind configuration.Verify that the
closed:variant is properly configured in your Tailwind setup:#!/bin/bash # Description: Verify closed: variant configuration in Tailwind # Find Tailwind config fd -e js -e ts -e cjs -e mjs 'tailwind.config' --exec cat {} # Check for state-based variant plugins rg -n "data-\[state" --type-add 'css:*.css' --type cssAlso applies to: 51-51
ui/hover-card.tsx (1)
33-33: Theclosed:variant is properly configured in your Tailwind CSS v4 setup via the@custom-variantdirective inapp/globals.css. No action required—the className is valid and the variant is functional.Likely an incorrect or invalid review comment.
ui/popover.tsx (1)
21-23: No action needed—theclosed:variant is already properly configured.The custom state variant
closed:is defined inapp/globals.css(line 9) as@custom-variant closed (&:is([data-state="closed"]));. The Popover component correctly uses this configured variant along with the complementaryopen:variant for consistent state-based animations.ui/tabs.tsx (1)
36-36: LGTM: More precise nullish coalescing.The change from
||to??is more semantically correct. The nullish coalescing operator (??) only treatsnullorundefinedas absent values, whereas||would treat any falsy value (including""or0) as absent. For this use case withstring | undefined,??is the more precise choice.ui/slider.tsx (2)
14-22: Verify intended default behavior for slider thumbs.The fallback logic
[min, max]creates a two-thumb range slider by default when neithervaluenordefaultValueis provided. This is unusual - most slider components default to a single thumb.Verify this is intentional. If a single-value slider is the expected default, consider changing the fallback to
[min]instead of[min, max].
50-56: Index as key acceptable for slider thumbs.Using array index as
key(line 53) is generally discouraged, but for slider thumbs it's acceptable since each thumb's position in the values array is stable and corresponds to its semantic role. The thumbs are not reorderable by the user.ui/resizable.tsx (1)
29-52: LGTM: Well-structured resizable handle with accessibility support.The component properly handles both horizontal and vertical orientations through data attributes and CSS transforms. Focus states are implemented correctly with
focus-visiblefor keyboard navigation..github/agents/gpt-5-beast-mode.agent.md (1)
1-104: LGTM: Comprehensive agent configuration with clear policies.The updates add detailed tool usage policies and explicit workflow steps, including test execution via
runCommands. The documentation is well-structured and provides clear guidance for the agent's operation.ui/kbd.tsx (1)
3-16: LGTM: Semantic keyboard shortcut component with accessibility features.The component correctly uses the semantic
<kbd>element and includes appropriate accessibility attributes (pointer-events-none,select-none). The className composition follows established patterns in the UI library..github/agents/se-orchestrator.agent.md (1)
1-103: LGTM: Well-structured orchestrator agent configuration.The agent definition clearly outlines responsibilities, subagent handoffs, escalation rules, and execution flow. The document provides comprehensive guidance for orchestrating multiple specialized SE agents.
Note: The markdown linter flags missing blank lines around fenced code blocks, but these appear to be false positives related to the YAML front matter format used for agent configuration.
ui/sonner.tsx (1)
25-32: Ensure CSS custom properties are defined in the project's theme.The Sonner component maps its styling to the following CSS variables:
--popover,--popover-foreground,--border, and--radius. These must be defined in your global CSS or Tailwind configuration for the toast styling to work correctly. If these variables are not defined, toasts will render without proper styling.package.json (2)
188-188: Zod v4.1.13 is a stable, production-ready version.Zod 4 is stable and version 4.1.13 is a published release on npm. The
^4.1.13specification is valid. If the codebase uses Zod schemas, verify they align with Zod 4's API changes by reviewing the migration guide, particularly changes to error customization and function definitions.
160-160: Recharts version is compatible with current usage patterns.The codebase uses only standard Recharts components (ResponsiveContainer, Bar, Area, Pie, Line, RadialBar, Radar, Scatter) that are available in both v2 and v3. The ui/chart.tsx theming wrapper and all chart widgets are compatible with Recharts v2.15.4. No v3-specific APIs are detected in the current implementation.
ui/select.tsx (1)
40-40: LGTM - Tailwind v4 syntax updates.The updated syntax for data attribute selectors (
data-placeholder:shorthand) and CSS variable references (h-(--radix-select-trigger-height)) aligns with Tailwind CSS v4 conventions.Verify that your Tailwind configuration is set up for v4 to ensure these utility classes are recognized correctly.
Also applies to: 79-79
ui/input-otp.tsx (1)
7-35: LGTM!
InputOTPandInputOTPGroupare cleanly implemented, following the established patterns for UI component composition with proper data-slot attributes and className merging.ui/breadcrumb.tsx (1)
7-50: LGTM - Well-structured accessible breadcrumb components.The implementation follows WAI-ARIA breadcrumb patterns correctly:
- Semantic
nav > ol > listructure- Proper
aria-labelon the navigation- Decorative separators hidden from assistive technology with
role="presentation"andaria-hidden- Screen reader text for ellipsis
- Flexible
asChildpattern forBreadcrumbLinkAlso applies to: 65-99
ui/pagination.tsx (2)
45-66: LGTM - Ensure consumers providehreffor accessibility.The
PaginationLinkcomponent correctly usesaria-currentfor active state. Since it renders an<a>element, consumers should always provide anhrefprop for keyboard navigation and accessibility compliance.
23-39: LGTM - Clean pagination implementation.The remaining pagination components are well-implemented:
- Proper semantic structure with
ul > li- Responsive labels that hide on mobile
- Screen reader text for ellipsis
- Accessible aria-labels for navigation actions
Also applies to: 68-117
ui/chart.tsx (3)
70-101: ReviewdangerouslySetInnerHTMLusage inChartStyle.The static analysis flags XSS risk, but the CSS is generated from
ChartConfigkeys and color values which are developer-controlled, not user input. The risk is low in typical usage. However, if config keys or colors were derived from untrusted sources, this could become an injection vector.Consider sanitizing the color values or using CSS-in-JS approaches if the config might contain user-provided data:
Verify that
ChartConfigvalues are never derived from user input. If they could be, add validation:const isValidCSSColor = (color: string) => /^(#[0-9a-fA-F]{3,8}|rgb|hsl|oklch|var\(--[\w-]+\))/.test(color)
25-68: LGTM - Clean context pattern with proper error handling.
useChartcorrectly throws an error when used outsideChartContainer, providing clear feedback for misuse. The container properly generates unique IDs and provides config context to child components.
253-346: LGTM - Robust payload config extraction.
ChartLegendContentandgetPayloadConfigFromPayloadcorrectly handle Recharts' payload structure with proper fallbacks for various data shapes. The helper function cleanly abstracts the config lookup logic.ui/table.tsx (1)
105-114: LGTM!Clean export structure with all table components properly exposed.
ui/empty.tsx (1)
31-59: LGTM!
EmptyMediavariant system is well-implemented usingcvawith clear default and icon variants. Thedata-variantattribute enables external styling hooks.ui/field.tsx (2)
184-233: Good accessibility implementation.The
FieldErrorcomponent correctly usesrole="alert"for screen reader announcements, and the memoization of content prevents unnecessary re-renders. The deduplication logic is a nice touch for handling multiple validation errors.
126-137: Verify intentional duplicatedata-slotvalue.
FieldTitleusesdata-slot="field-label"(line 129), which is the same asFieldLabel(line 114). If this is intentional for shared styling, consider adding a comment. Otherwise, use a distinct slot like"field-title".ui/navigation-menu.tsx (1)
8-30: LGTM!Clean implementation with the
viewportprop providing flexibility. Conditionally rendering the viewport based on the prop is a good pattern for different navigation menu use cases.app/components/navbar.tsx (1)
37-42: Good use ofstartTransitionfor mobile menu state.Wrapping
setMobileOpen(false)instartTransitioncorrectly marks this as a non-urgent update, allowing React to prioritize more important renders during navigation.ui/sidebar.tsx (6)
1-33: Well-structured imports and constants.The module-level constants are appropriately defined with clear naming. The 7-day cookie expiration and configurable widths provide good defaults.
35-54: LGTM!The context pattern is well-implemented with proper null checking and a clear error message when the hook is used outside the provider.
256-280: LGTM!The trigger properly composes the onClick handler and includes accessible labeling via the sr-only span.
282-305: LGTM!The rail implementation appropriately uses
tabIndex={-1}as this is a secondary toggle mechanism. Users can access the primarySidebarTriggeror use the keyboard shortcut (Ctrl/Cmd + B) for keyboard navigation.
602-638: LGTM!The random width generation inside
useMemowith an empty dependency array is intentional — each skeleton instance gets a unique but stable width, creating a natural visual variation for loading states.
701-726: LGTM!The exports are comprehensive and properly organized. The component API surface is well-structured for composition.
| - label: 'ADR Generator' | ||
| agent: 'ADR-Generator' | ||
| prompt: 'Produce an ADR when code introduces architectural changes' | ||
| send: false | ||
| --- | ||
|
|
||
| > **Maintainer:** dev-tools • **Version:** 0.2.0 • **Agent thresholds:** max_files_autofix=3, min_confidence_for_autofix=0.92 | ||
|
|
||
|
|
||
| # SE Main Code Agent (alias: Code Specialist) | ||
|
|
||
| Purpose | ||
| - Act as the primary automated code agent for the repository. Perform small, well-scoped edits (<= `metadata.thresholds.max_files_autofix` files), add or update unit tests, run linters/tests, prepare a PR with a clear description, and attach test artifacts. | ||
| - When a change touches security, privacy, architectural boundaries, or models, automatically call the appropriate SE subagent(s) and **block** automated changes until human review if those subagents return issues. | ||
|
|
||
| Core responsibilities | ||
| - Implement small, low-risk fixes and refactors (<= 3 files by default). | ||
| - Add or extend unit tests to cover new cases and edge conditions. | ||
| - Run linters and CI locally (or via CI job) and include results in the PR description. | ||
| - Always produce a single unified diff (git patch) and suggested PR title/body; do NOT push or merge without explicit human approval. | ||
|
|
||
| Behavior rules & safety | ||
| - Scope: If intended changes affect > `metadata.thresholds.max_files_autofix` files or are ambiguous, request clarifying question(s) and wait for human instructions. | ||
| - No auto-merge: This agent must never merge changes or push directly to protected branches. Create a draft PR and tag reviewers. | ||
| - Least privilege: Limit tools to repo-specific search/pull-request helpers, runSubagent calls for checks, and avoid destructive actions. | ||
| - High-risk escalation: If any subagent returns a `HIGH` severity issue (security/RAI/arch), set `status: needs-review` and recommend blocking the PR until the issue is resolved. | ||
|
|
||
| Integration with SE subagents (use exact @runSubagent directives) | ||
| - Call security checks when handling input validation, auth, DB, or network code: | ||
| @runSubagent se-security-reviewer "Security reviewer: OWASP & LLM checks — return plain summary, score, and issues" | ||
|
|
||
| - Call responsible AI checks when touching ML/LLM inference code, prompt building, or model inputs: | ||
| @runSubagent se-responsible-ai "Responsible AI reviewer: bias/privacy checks and test vectors, return summary and failing cases" | ||
|
|
||
| - Call CI/GitOps checks when changes touch deployment, infra or CI config: | ||
| @runSubagent se-gitops-ci-specialist "CI/GitOps specialist: run CI jobs, check rollout scripts, return summary and failing job logs" | ||
|
|
||
| - Call technical writer for PR description and docs diffs when changing public APIs or UX: | ||
| @runSubagent se-technical-writer "Technical writer: produce PR description and short docs diff, return summary and suggested diff" | ||
|
|
||
| - Call architecture or UX reviewers for cross-cutting concerns as needed: | ||
| @runSubagent se-system-architecture-reviewer "Architecture reviewer: evaluate scalability, failover, and ADR gaps, return summary and recommendations" | ||
| @runSubagent se-ux-ui-designer "UX reviewer: accessibility and flow review, return summary and list of UX issues" | ||
|
|
||
| Invocation patterns & sample prompts | ||
| - Small fix: "Fix rounding bug in `src/pricing.ts` and add unit tests to cover currency rounding edge cases" | ||
| - Add tests: "Add unit tests for `api/payment` to cover invalid currencies and negative amounts" | ||
| - Refactor: "Refactor `src/utils/transform.ts` to reduce cyclomatic complexity < 10 and add tests" | ||
| - Safety-first: "Implement suggested fix but call security/RAI checks before proposing PR" | ||
|
|
||
| Plain response output format (human-friendly) | ||
| Summary: Short summary (1-2 sentences) of what changed and why. | ||
| Patch: unified git diff (git format-patch or unified diff) | ||
| Tests: PASS/FAIL summary plus failing test names and stack traces | ||
| Artifacts: links to test logs, lint output, suggested PR title and body | ||
| Recommendation: e.g., "Ready for review", "Needs human approval because security issues found" | ||
|
|
||
| Example output | ||
| ``` | ||
| Summary: Fix rounding bug in calculateTotal and add tests for negative amounts | ||
| Patch: | ||
| --- a/src/pricing.ts | ||
| +++ b/src/pricing.ts | ||
| @@ -23,7 +23,7 @@ | ||
| - return Math.round(price * 100) / 100 | ||
| + return Number((price).toFixed(2)) | ||
|
|
||
| Tests: PASS (34 tests, 0 failures) | ||
| Artifacts: /tmp/test-run-123.log | ||
| Recommendation: Ready for review - no security issues found | ||
| ``` | ||
|
|
||
| Testing & CI for the agent | ||
| - Add example prompts and expected outputs under `tests/agents/se-code-specialist/` (JSON or plain text) to validate behavior. | ||
| - Add a GitHub Actions job `agents/validate-se-code-specialist.yml` that runs a small test harness validating parsing of prompts, runSubagent parsing, and output schema (presence of Summary/Patch/Tests fields). | ||
|
|
||
| Example CI job outline (implement on request): | ||
| ```yaml | ||
| name: Validate SE Code Agent | ||
| on: [push, pull_request] | ||
| jobs: | ||
| agent-tests: | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - uses: actions/checkout@v4 | ||
| - uses: actions/setup-node@v4 | ||
| - run: node ./scripts/agents/run-se-code-specialist-tests.js | ||
| ``` | ||
|
|
||
| Development rules & good practices | ||
| - Ask one clarifying question for ambiguous tasks before making changes. | ||
| - Keep changes small and well-tested; prefer safe, incremental improvements. | ||
| - Annotate PRs with the `agent:se-code-specialist` label and include a short testing checklist. | ||
| - If automated changes create new public surface, add an entry in `CHANGELOG.md` and reference an ADR if needed. | ||
|
|
||
| When to escalate to human | ||
| - Changes affecting auth, encryption, PII handling, or ML inference | ||
| - Multi-file refactors spanning modules without tests | ||
| - Conflicting opinions from subagents (security vs. performance tradeoffs) | ||
|
|
||
| Notes | ||
| - This agent should be the default for coding requests (set `infer: true`) but must still obey safety constraints. | ||
| - Keep a simple audit log (session id, user prompt, actions suggested) for traceability. | ||
|
|
||
| Commands & Automation | ||
| - Slash commands (recommended): | ||
| - `/code-fix <path/issue>` — run a small fix and add tests (scope limit applies) | ||
| - `/generate-tests <module>` — produce unit tests and edge cases | ||
| - `/safe-refactor <module>` — perform a small refactor and add tests | ||
|
|
||
| RunSubagent integrations (exact, verbatim lines to use) | ||
| @runSubagent QA-Agent "QA Agent: run exhaustive tests and validate usability, performance, security, and maintainability" | ||
| @runSubagent Task Planner "Task Planner: break down larger changes into sub-tasks and produce an implementation plan" | ||
| @runSubagent Debug Agent "Debug Agent: reproduce failing tests locally and provide debug steps/logs" | ||
| @runSubagent ADR-Generator "ADR Generator: create an ADR for architecture-impacting changes" | ||
|
|
||
| Quality checklist (MUST be satisfied before creating PR) | ||
| - [ ] Tests added or updated to cover behavior (no regressions) | ||
| - [ ] Linting & static analysis pass locally | ||
| - [ ] Coverage delta checked (do not decrease coverage by more than 2%) | ||
| - [ ] No `HIGH` severity security/RAI findings from subagents | ||
| - [ ] QA-Agent returned PASS or minor findings addressed | ||
| - [ ] PR description includes testing steps, artifacts, and changelog entry when public surface changed | ||
| - [ ] ADR created if the change impacts architecture or API contracts | ||
| - [ ] Session id and short audit log included in PR body | ||
|
|
||
| Gating rules (strict) | ||
| - Max auto-fix files: 3 (enforced) | ||
| - Min confidence for auto-fix: 0.92 (if below, set `status: needs-review` and ask clarifying question) | ||
| - Any `HIGH` severity issue from `se-security-reviewer` or `se-responsible-ai` → block and escalate (create incident or require human triage) | ||
|
|
||
| Plain handoff header (use for subagent calls) | ||
| --- | ||
| CALL: <agent-name> | ||
| TASK: <task-name> | ||
| CONTEXT: | ||
| - repo: owner/repo | ||
| - pr: 123 | ||
| - changed_files: [list] | ||
| - notes: short notes | ||
| --- | ||
|
|
||
| Plain response template (what to expect from subagents) | ||
| --- | ||
| STATUS: pass|fail|needs-review | ||
| SCORE: 0-10 | ||
| CONFIDENCE: 0.0-1.0 | ||
| ISSUES: | ||
| - [SEVERITY] file: message — fix suggestion | ||
| ARTIFACTS: | ||
| - /path/to/log | ||
| RECOMMENDATION: Short actionable sentence | ||
| --- | ||
|
|
||
| Testing & CI for the agent (done on request) | ||
| - Add example prompts and expected outputs under `tests/agents/se-code-specialist/`. | ||
| - Add a Node.js test runner in `scripts/agents/run-se-code-specialist-tests.js` that validates parsing and the presence of required output fields (Summary, Patch, Tests, Artifacts, Recommendation). | ||
| - Add a GitHub Actions workflow `.github/workflows/agents-validate-se-code-specialist.yml` to run the test harness on PRs and pushes. | ||
|
|
||
| I will implement all three deliverables now: 1) strengthen agent doc (this section), 2) add test harness + example prompts, and 3) add CI job to run the harness. If that's correct, I'll create the test files and the workflow next. |
There was a problem hiding this comment.
Add blank lines around fenced code blocks for markdown compliance.
Multiple fenced code blocks throughout the file are missing blank lines before and after them, violating the MD031 markdown rule. This affects readability and parsing by some markdown processors.
Add blank lines before and after fenced code blocks at the following locations:
- Around line 41, 54, 68, 84, 96, 109, 123, 134, 141, 150, 174, and 200
Example fix pattern:
Some text before code block
+
```yaml
code contentSome text after code block
</details>
> Committable suggestion skipped: line range outside the PR's diff.
<details>
<summary>🧰 Tools</summary>
<details>
<summary>🪛 LanguageTool</summary>
[grammar] ~65-~65: Ensure spelling is correct
Context: ...o-specific search/pull-request helpers, runSubagent calls for checks, and avoid destructive...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
---
[uncategorized] ~198-~198: The official name of this software platform is spelled with a capital “H”.
Context: ...ation). - Add a GitHub Actions workflow `.github/workflows/agents-validate-se-code-speci...
(GITHUB)
</details>
<details>
<summary>🪛 markdownlint-cli2 (0.18.1)</summary>
41-41: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
---
54-54: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
---
68-68: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
---
84-84: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
---
96-96: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
---
109-109: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
---
123-123: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
---
134-134: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
---
141-141: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
---
150-150: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
---
174-174: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
---
200-200: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
</details>
</details>
<details>
<summary>🤖 Prompt for AI Agents</summary>
In .github/agents/se-code-specialist.agent.md (around lines 41–200) several
fenced code blocks lack blank lines before and/or after them (MD031). For each
fenced block at or near lines 41, 54, 68, 84, 96, 109, 123, 134, 141, 150, 174,
and 200, insert a single blank line immediately before the opening fence and a
single blank line immediately after the closing fence; ensure no extra
indentation or other formatting changes, run the repo markdown linter (or
markdownlint) to verify MD031 is satisfied, and commit the minimal edits.
</details>
<!-- fingerprinting:phantom:poseidon:puma -->
<!-- This is an auto-generated comment by CodeRabbit -->
| const docsLinks = [ | ||
| { href: "/docs", label: "All Docs", desc: "Full documentation" }, | ||
| { href: "/docs/getting-started", label: "Getting started", desc: "Quick start and tutorials" }, | ||
| { href: "/docs/ai-sdk", label: "AI SDK", desc: "AI SDK integration" }, | ||
| { href: "/docs/components", label: "Components", desc: "UI components & patterns" }, | ||
| { href: "/docs/configuration", label: "Configuration", desc: "Config & setup" }, | ||
| { href: "/docs/core-concepts", label: "Core concepts", desc: "Architecture & concepts" }, | ||
| { href: "/docs/prompts/kiro-lite", label: "Prompts", desc: "Prompt patterns" }, | ||
| { href: "/docs/rag", label: "RAG", desc: "Retrieval-augmented generation" }, | ||
| { href: "/docs/runtime-context", label: "Runtime context", desc: "RuntimeContext patterns" }, | ||
| { href: "/docs/security", label: "Security", desc: "Security practices" }, | ||
| { href: "/docs/ui", label: "UI", desc: "Design & UI" }, | ||
| ] |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Extract docsLinks outside the component.
docsLinks is recreated on every render. Since it's static data, move it outside the component to avoid unnecessary allocations.
🔎 Apply this fix
+const docsLinks = [
+ { href: "/docs", label: "All Docs", desc: "Full documentation" },
+ { href: "/docs/getting-started", label: "Getting started", desc: "Quick start and tutorials" },
+ { href: "/docs/ai-sdk", label: "AI SDK", desc: "AI SDK integration" },
+ { href: "/docs/components", label: "Components", desc: "UI components & patterns" },
+ { href: "/docs/configuration", label: "Configuration", desc: "Config & setup" },
+ { href: "/docs/core-concepts", label: "Core concepts", desc: "Architecture & concepts" },
+ { href: "/docs/prompts/kiro-lite", label: "Prompts", desc: "Prompt patterns" },
+ { href: "/docs/rag", label: "RAG", desc: "Retrieval-augmented generation" },
+ { href: "/docs/runtime-context", label: "Runtime context", desc: "RuntimeContext patterns" },
+ { href: "/docs/security", label: "Security", desc: "Security practices" },
+ { href: "/docs/ui", label: "UI", desc: "Design & UI" },
+] as const
+
export function Navbar() {
const [mobileOpen, setMobileOpen] = useState(false)
// ...
- const docsLinks = [
- { href: "/docs", label: "All Docs", desc: "Full documentation" },
- // ... rest of array
- ]🤖 Prompt for AI Agents
In app/components/navbar.tsx around lines 44 to 56, the docsLinks array is
defined inside the component causing it to be recreated on every render; move
this static array to the module scope (above the component) as a top-level const
(e.g., export const DOCS_LINKS = [...] or const docsLinks = [...]), keep the
same shape and update any references in the component to use the top-level name;
if using TypeScript, annotate the array (or use "as const") to preserve
types/readonly semantics.
| <NavigationMenuTrigger asChild> | ||
| <Button variant="ghost" className={`relative group overflow-hidden h-9 px-4 transition-all duration-200 ${(pathname === "/chat" || pathname === "/networks" || pathname === "/workflows" || pathname === "/docs" || pathname === "/pricing") ? "bg-primary/10 shadow-sm" : ""}`}> | ||
| <span className="font-medium">Products</span> | ||
| <ChevronDownIcon className="ml-2 size-3" /> | ||
| <span className={`absolute inset-x-0 bottom-0 h-0.5 bg-primary transition-all duration-200 ${(pathname === "/chat" || pathname === "/networks" || pathname === "/workflows" || pathname === "/docs" || pathname === "/pricing") ? "scale-x-100" : "scale-x-0"} group-hover:scale-x-100`} /> | ||
| </Button> | ||
| </NavigationMenuTrigger> |
There was a problem hiding this comment.
Remove duplicate chevron icon or reconsider trigger structure.
The NavigationMenuTrigger component automatically includes a ChevronDownIcon. Using asChild to wrap your Button doesn't prevent this default icon from rendering, so you'll get two chevrons: one from the trigger and one from line 84. Either remove the manual ChevronDownIcon or use a different approach.
🤖 Prompt for AI Agents
In app/components/navbar.tsx around lines 81 to 87, the NavigationMenuTrigger
already renders a ChevronDownIcon so your manual ChevronDownIcon at line 84
causes a duplicate; fix by removing the manual <ChevronDownIcon ... /> element
(simplest), or alternatively stop using asChild and render your Button as the
trigger's child in a way that relies on the trigger's built-in icon (choose one
approach and remove the redundant icon).
| <svg className="size-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> | ||
| <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/> | ||
| <circle cx="9" cy="10" r="1"/> | ||
| <circle cx="12" cy="10" r="1"/> | ||
| <circle cx="15" cy="10" r="1"/> | ||
| </svg> |
There was a problem hiding this comment.
Add accessibility labels to SVG icons.
Static analysis correctly identifies that these inline SVGs lack alternative text. For accessibility, add aria-label or include a <title> element within each SVG.
🔎 Apply this pattern to all three SVGs
-<svg className="size-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+<svg className="size-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-label="Chat">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>Apply similar changes:
- Line 106:
aria-label="Networks" - Line 134:
aria-label="Workflows"
Also applies to: 106-126, 134-142
🧰 Tools
🪛 Biome (2.1.2)
[error] 93-93: Alternative text title element cannot be empty
For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
(lint/a11y/noSvgWithoutTitle)
🤖 Prompt for AI Agents
In app/components/navbar.tsx around lines 93-98 (and similarly for 106-126 and
134-142), the inline SVGs are missing accessible labels; add accessibility by
giving each SVG either an aria-label (e.g., aria-label="Messages" for lines
93-98, "Networks" at ~106, "Workflows" at ~134) or include a <title> element
inside the SVG and ensure role="img" is present; update all three SVGs
accordingly so screen readers can announce them and remove any aria-hidden if
present.
| export function useIsMobile() { | ||
| const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined) | ||
|
|
||
| React.useEffect(() => { | ||
| const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) | ||
| const onChange = () => { | ||
| setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) | ||
| } | ||
| mql.addEventListener("change", onChange) | ||
| setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) | ||
| return () => mql.removeEventListener("change", onChange) | ||
| }, []) | ||
|
|
||
| return !!isMobile | ||
| } |
There was a problem hiding this comment.
Potential SSR hydration mismatch with initial state.
The hook initializes isMobile as undefined (Line 6), but returns !!isMobile (Line 18) which evaluates to false before the effect runs. In Next.js SSR, this can cause a hydration mismatch: the server renders with false, but the client might render true after the effect executes.
Consider returning undefined during the initial render or using a more SSR-friendly pattern:
🔎 Apply this diff to fix the SSR hydration issue:
export function useIsMobile() {
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
React.useEffect(() => {
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
const onChange = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
}
mql.addEventListener("change", onChange)
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
return () => mql.removeEventListener("change", onChange)
}, [])
- return !!isMobile
+ return isMobile ?? falseOr for a more robust SSR pattern:
export function useIsMobile() {
- const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+ const [isMobile, setIsMobile] = React.useState<boolean>(() => {
+ if (typeof window === 'undefined') return false
+ return window.innerWidth < MOBILE_BREAKPOINT
+ })
React.useEffect(() => {
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
const onChange = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
}
mql.addEventListener("change", onChange)
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
return () => mql.removeEventListener("change", onChange)
}, [])
return isMobile📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export function useIsMobile() { | |
| const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined) | |
| React.useEffect(() => { | |
| const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) | |
| const onChange = () => { | |
| setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) | |
| } | |
| mql.addEventListener("change", onChange) | |
| setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) | |
| return () => mql.removeEventListener("change", onChange) | |
| }, []) | |
| return !!isMobile | |
| } | |
| export function useIsMobile() { | |
| const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined) | |
| React.useEffect(() => { | |
| const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) | |
| const onChange = () => { | |
| setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) | |
| } | |
| mql.addEventListener("change", onChange) | |
| setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) | |
| return () => mql.removeEventListener("change", onChange) | |
| }, []) | |
| return isMobile ?? false | |
| } |
🤖 Prompt for AI Agents
In hooks/use-mobile.ts around lines 5 to 19, the hook currently initializes
isMobile as undefined but returns !!isMobile which yields false on the server
and can cause Next.js hydration mismatches; change the hook to preserve the
undefined initial state on first render and return isMobile (type boolean |
undefined) instead of coercing to a boolean, or alternatively detect SSR (if
typeof window === "undefined") and return undefined during SSR then set the
boolean on mount—update the state/type and the return value accordingly so the
initial server render matches the first client render.
| function SidebarMenuSubButton({ | ||
| asChild = false, | ||
| size = "md", | ||
| isActive = false, | ||
| className, | ||
| ...props | ||
| }: React.ComponentProps<"a"> & { | ||
| asChild?: boolean | ||
| size?: "sm" | "md" | ||
| isActive?: boolean | ||
| }) { | ||
| const Comp = asChild ? Slot : "a" | ||
|
|
||
| return ( | ||
| <Comp | ||
| data-slot="sidebar-menu-sub-button" | ||
| data-sidebar="menu-sub-button" | ||
| data-size={size} | ||
| data-active={isActive} | ||
| className={cn( | ||
| "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", | ||
| "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", | ||
| size === "sm" && "text-xs", | ||
| size === "md" && "text-sm", | ||
| "group-data-[collapsible=icon]:hidden", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| ) | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider adding TSDoc comments to exported components.
As per coding guidelines, public APIs should include TSDoc comments with parameter descriptions and usage examples. This would improve discoverability and documentation for this comprehensive component library.
For example:
/**
* A sub-menu button component for nested navigation items.
* @param asChild - When true, merges props onto the child element via Slot
* @param size - Button size variant: "sm" or "md"
* @param isActive - Whether the button represents the currently active route
* @example
* <SidebarMenuSubButton href="/settings/profile" isActive>
* Profile
* </SidebarMenuSubButton>
*/🤖 Prompt for AI Agents
ui/sidebar.tsx around lines 669 to 699: the exported component
SidebarMenuSubButton lacks TSDoc comments; add a concise TSDoc block immediately
above the function declaration describing the component purpose, each parameter
(asChild, size, isActive, className, and props), and include a short usage
example showing href and isActive usage; ensure the comment follows TSDoc format
(/** ... */) so it surfaces in IDEs and documentation generation.
| // eslint-disable-next-line no-unused-vars | ||
| onCheckedChange?: (checked: boolean) => void |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Remove unnecessary ESLint disable comment.
This eslint-disable-next-line no-unused-vars comment is unnecessary for a TypeScript interface property. The function parameter in the type definition is for documentation and type inference. Configure ESLint to not flag interface method signatures instead of suppressing warnings inline.
ESLint configuration approach
Apply the same ESLint configuration fix as suggested for radio-group.tsx:
// eslint.config.cjs
{
rules: {
'@typescript-eslint/no-unused-vars': ['warn', {
argsIgnorePattern: '^_',
args: 'after-used'
}]
}
}🤖 Prompt for AI Agents
In ui/switch.tsx around lines 8 to 9, remove the unnecessary inline comment "//
eslint-disable-next-line no-unused-vars" from the interface property
declaration; then update the shared ESLint configuration (same change applied to
radio-group.tsx) to avoid flagging interface method signatures by configuring
@typescript-eslint/no-unused-vars with argsIgnorePattern '^_' and args set to
'after-used' (apply this to eslint.config.cjs or your central ESLint config).
| function Table({ className, ...props }: React.ComponentProps<"table">) { | ||
| return ( | ||
| <div | ||
| data-slot="table-container" | ||
| className="relative w-full overflow-x-auto" | ||
| > | ||
| <table | ||
| data-slot="table" | ||
| className={cn("w-full caption-bottom text-sm", className)} | ||
| {...props} | ||
| /> | ||
| </div> | ||
| ) | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider adding ref forwarding for DOM access.
These table components don't forward refs, which may limit consumers who need direct DOM access (e.g., for focus management or measurements). React 19 allows ref as a regular prop, so this works, but explicit forwarding via the ref prop pattern would be clearer.
The implementation is clean and follows consistent patterns. If ref access isn't a requirement, this is fine as-is.
🤖 Prompt for AI Agents
In ui/table.tsx around lines 5 to 18, the Table component doesn’t forward refs
so callers can’t get the underlying table DOM node; change the component to use
React.forwardRef, accept (props, ref) and forward the ref to the <table>
element, update the TypeScript typing to accept a ref for HTMLTableElement
(e.g., React.ComponentPropsWithRef<"table"> or
React.ForwardedRef<HTMLTableElement>), keep className and {...props} spread
behavior intact, and export/set a displayName if desired.
| function TableHead({ className, ...props }: React.ComponentProps<"th">) { | ||
| return ( | ||
| <th | ||
| data-slot="table-head" | ||
| className={cn( | ||
| "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| function TableCell({ className, ...props }: React.ComponentProps<"td">) { | ||
| return ( | ||
| <td | ||
| data-slot="table-cell" | ||
| className={cn( | ||
| "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| ) | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
whitespace-nowrap may cause layout issues with long content.
Both TableHead (line 71) and TableCell (line 84) apply whitespace-nowrap, which prevents text wrapping. This could cause horizontal overflow or truncation issues with longer content. Consider making this opt-in via a prop or removing it to let consumers control wrapping behavior.
🔎 Suggested approach
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
return (
<th
data-slot="table-head"
className={cn(
- "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+ "text-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className
)}
{...props}
/>
)
}Consumers can add whitespace-nowrap via className when needed.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function TableHead({ className, ...props }: React.ComponentProps<"th">) { | |
| return ( | |
| <th | |
| data-slot="table-head" | |
| className={cn( | |
| "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", | |
| className | |
| )} | |
| {...props} | |
| /> | |
| ) | |
| } | |
| function TableCell({ className, ...props }: React.ComponentProps<"td">) { | |
| return ( | |
| <td | |
| data-slot="table-cell" | |
| className={cn( | |
| "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", | |
| className | |
| )} | |
| {...props} | |
| /> | |
| ) | |
| } | |
| function TableHead({ className, ...props }: React.ComponentProps<"th">) { | |
| return ( | |
| <th | |
| data-slot="table-head" | |
| className={cn( | |
| "text-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", | |
| className | |
| )} | |
| {...props} | |
| /> | |
| ) | |
| } | |
| function TableCell({ className, ...props }: React.ComponentProps<"td">) { | |
| return ( | |
| <td | |
| data-slot="table-cell" | |
| className={cn( | |
| "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", | |
| className | |
| )} | |
| {...props} | |
| /> | |
| ) | |
| } |
🤖 Prompt for AI Agents
In ui/table.tsx around lines 66 to 90, both TableHead and TableCell hard-code
"whitespace-nowrap" which prevents text wrapping and can cause horizontal
overflow; remove "whitespace-nowrap" from the default class list and instead
accept an optional prop (e.g., noWrap?: boolean) or rely on consumers' className
to opt into nowrap so wrapping is allowed by default; update the component prop
types and className composition to conditionally append "whitespace-nowrap" only
when the new prop is true (or when className already includes it).
| // eslint-disable-next-line no-unused-vars | ||
| onValueChange?: (value: string) => void |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Investigate unnecessary ESLint suppression.
The onValueChange parameter is used on line 44 via optional chaining (onValueChange?.(newValue)). The ESLint suppression appears unnecessary unless there's a configuration issue with how ESLint handles optional chaining in callback props.
Consider investigating the ESLint rule configuration or removing this suppression if it's not actually needed.
🤖 Prompt for AI Agents
In ui/tabs.tsx around lines 24-25, the inline ESLint suppression "//
eslint-disable-next-line no-unused-vars" is unnecessary because the
onValueChange prop is actually invoked later via optional chaining
(onValueChange?.(newValue)). Remove that suppression line so the declaration
reads normally, then run the linter; if the linter still flags a false positive,
update the ESLint config/rules (or the specific rule override in the file
header) to correctly handle optional chaining for callback props instead of
disabling no-unused-vars inline.
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
KbdandKbdGroupcomponents for keyboard shortcuts display.NavigationMenucomponents includingNavigationMenuList,NavigationMenuItem,NavigationMenuTrigger,NavigationMenuContent,NavigationMenuLink, andNavigationMenuIndicatorfor enhanced navigation functionality.Paginationcomponents withPaginationContent,PaginationItem,PaginationLink,PaginationPrevious,PaginationNext, andPaginationEllipsisfor pagination controls.ResizablePanelGroup,ResizablePanel, andResizableHandlecomponents for resizable panels.Sidebarcomponent with various subcomponents includingSidebarTrigger,SidebarRail,SidebarContent,SidebarHeader,SidebarFooter,SidebarGroup, andSidebarMenufor a responsive sidebar layout.Slidercomponent for range selection.Toastercomponent for notifications with customizable icons and themes.Tablecomponents includingTableHeader,TableBody,TableFooter,TableRow,TableHead,TableCell, andTableCaptionfor structured data representation.