Conversation
Co-authored-by: Aiden Bai <aidenybai@users.noreply.github.com>
|
Cursor Agent can help with this pull request. Just |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@react-grab/cli
grab
@react-grab/ami
@react-grab/amp
@react-grab/claude-code
@react-grab/codex
@react-grab/copilot
@react-grab/cursor
@react-grab/droid
@react-grab/gemini
@react-grab/opencode
react-grab
@react-grab/relay
@react-grab/utils
commit: |
|
This run croaked 😵 The workflow encountered an error before any progress could be reported. Please check the workflow run logs for details. |
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
| </span> | ||
| <Tooltip open={isTooltipOpen} onOpenChange={setIsTooltipOpen}> | ||
| <TooltipTrigger asChild> | ||
| <Link href={href} rel="noreferrer" className={className}> |
There was a problem hiding this comment.
Missing exit animations on tooltip content motion.div causes visual snap when tooltip closes instead of smooth animation out
|
|
||
| useEffect(() => { | ||
| const handleKeyDown = (event: KeyboardEvent) => { | ||
| if (event.key === "Enter" && !isDropdownOpen) { |
There was a problem hiding this comment.
The Select dropdown doesn't close after selecting an editor because handleEditorChange no longer calls setIsEditorSelectOpen(false)
| <div className="relative"> | ||
| <ScrollArea | ||
| className={cn( | ||
| "overflow-y-auto rounded-md [scrollbar-width:none] [&_[data-slot='scroll-area-scrollbar']]:opacity-0 [&_[data-slot='scroll-area-scrollbar']]:transition-opacity hover:[&_[data-slot='scroll-area-scrollbar']]:opacity-100", |
There was a problem hiding this comment.
| "overflow-y-auto rounded-md [scrollbar-width:none] [&_[data-slot='scroll-area-scrollbar']]:opacity-0 [&_[data-slot='scroll-area-scrollbar']]:transition-opacity hover:[&_[data-slot='scroll-area-scrollbar']]:opacity-100", | |
| "overflow-y-auto rounded-md [scrollbar-width:none] [&_[data-slot=scroll-area-scrollbar]]:opacity-0 [&_[data-slot=scroll-area-scrollbar]]:transition-opacity hover:[&_[data-slot=scroll-area-scrollbar]]:opacity-100", |
CSS selector with quoted attribute values inside Tailwind arbitrary bracket notation may be incorrectly parsed due to complex nested bracket and quote handling
| > | ||
| {children} | ||
| </motion.div> | ||
| <CollapsiblePrimitive.Content forceMount asChild> |
There was a problem hiding this comment.
| <CollapsiblePrimitive.Content forceMount asChild> | |
| <CollapsiblePrimitive.Content asChild> |
The CollapsiblePrimitive.Content component has forceMount prop that conflicts with AnimatePresence conditional rendering, causing potential animation issues
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
7 issues found across 24 files
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="packages/website/components/ui/collapsible.tsx">
<violation number="1" location="packages/website/components/ui/collapsible.tsx:65">
P2: Avoid animating `height` in this transition; it causes layout/repaint work and violates the project animation guideline to animate compositor-friendly properties only.</violation>
</file>
<file name="packages/website/components/ui/button.tsx">
<violation number="1" location="packages/website/components/ui/button.tsx:9">
P2: The shared button primitive is missing `touch-action: manipulation`, which is required by the project interaction guidelines and can cause suboptimal touch behavior (e.g., double-tap zoom delays).</violation>
</file>
<file name="packages/website/components/blocks/read-tool-call-block.tsx">
<violation number="1" location="packages/website/components/blocks/read-tool-call-block.tsx:46">
P2: The new Button classes override shadcn size constraints and can reduce the interactive hit target below accessibility minimums.</violation>
</file>
<file name="packages/website/components/ui/card.tsx">
<violation number="1" location="packages/website/components/ui/card.tsx:1">
P2: Remove the unnecessary `"use client"` directive from this presentational component to avoid forcing an avoidable client boundary and hydration cost.</violation>
</file>
<file name="packages/website/components/ui/tooltip.tsx">
<violation number="1" location="packages/website/components/ui/tooltip.tsx:8">
P2: Default tooltip delay is disabled (`delayDuration = 0`), which breaks the required "delay first tooltip" interaction behavior.</violation>
<violation number="2" location="packages/website/components/ui/tooltip.tsx:24">
P2: Wrapping every `Tooltip` in an inner `TooltipProvider` overrides outer provider settings and breaks group-level tooltip timing behavior.</violation>
</file>
<file name="packages/website/app/open-file/page.tsx">
<violation number="1" location="packages/website/app/open-file/page.tsx:119">
P2: Pressing Enter on the editor Select trigger can unexpectedly call `handleOpen()` and navigate away before the Select opens, due to the global Enter handler relying only on `isEditorSelectOpen`.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| initial={{ opacity: 0, height: 0 }} | ||
| animate={{ opacity: 1, height: "auto" }} | ||
| exit={{ opacity: 0, height: 0 }} |
There was a problem hiding this comment.
P2: Avoid animating height in this transition; it causes layout/repaint work and violates the project animation guideline to animate compositor-friendly properties only.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/website/components/ui/collapsible.tsx, line 65:
<comment>Avoid animating `height` in this transition; it causes layout/repaint work and violates the project animation guideline to animate compositor-friendly properties only.</comment>
<file context>
@@ -31,44 +33,47 @@ export const Collapsible = ({
- </motion.div>
+ <CollapsiblePrimitive.Content forceMount asChild>
+ <motion.div
+ initial={{ opacity: 0, height: 0 }}
+ animate={{ opacity: 1, height: "auto" }}
+ exit={{ opacity: 0, height: 0 }}
</file context>
| initial={{ opacity: 0, height: 0 }} | |
| animate={{ opacity: 1, height: "auto" }} | |
| exit={{ opacity: 0, height: 0 }} | |
| initial={{ opacity: 0 }} | |
| animate={{ opacity: 1 }} | |
| exit={{ opacity: 0 }} |
| import { cn } from "@/utils/cn"; | ||
|
|
||
| const buttonVariants = cva( | ||
| "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,background-color,border-color,box-shadow,transform,opacity] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background aria-invalid:border-destructive", |
There was a problem hiding this comment.
P2: The shared button primitive is missing touch-action: manipulation, which is required by the project interaction guidelines and can cause suboptimal touch behavior (e.g., double-tap zoom delays).
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/website/components/ui/button.tsx, line 9:
<comment>The shared button primitive is missing `touch-action: manipulation`, which is required by the project interaction guidelines and can cause suboptimal touch behavior (e.g., double-tap zoom delays).</comment>
<file context>
@@ -0,0 +1,65 @@
+import { cn } from "@/utils/cn";
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,background-color,border-color,box-shadow,transform,opacity] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background aria-invalid:border-destructive",
+ {
+ variants: {
</file context>
| className="max-w-full break-all text-left transition-colors duration-300" | ||
| variant="ghost" | ||
| size="sm" | ||
| className="h-auto max-w-full break-all px-0 py-0 text-left font-normal transition-colors duration-300 hover:bg-transparent" |
There was a problem hiding this comment.
P2: The new Button classes override shadcn size constraints and can reduce the interactive hit target below accessibility minimums.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/website/components/blocks/read-tool-call-block.tsx, line 46:
<comment>The new Button classes override shadcn size constraints and can reduce the interactive hit target below accessibility minimums.</comment>
<file context>
@@ -38,15 +39,17 @@ export const ReadToolCallBlock = ({
- className="max-w-full break-all text-left transition-colors duration-300"
+ variant="ghost"
+ size="sm"
+ className="h-auto max-w-full break-all px-0 py-0 text-left font-normal transition-colors duration-300 hover:bg-transparent"
style={{
color: isClicked ? "#ffffff" : "#5b5b5b",
</file context>
| @@ -0,0 +1,91 @@ | |||
| "use client"; | |||
There was a problem hiding this comment.
P2: Remove the unnecessary "use client" directive from this presentational component to avoid forcing an avoidable client boundary and hydration cost.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/website/components/ui/card.tsx, line 1:
<comment>Remove the unnecessary `"use client"` directive from this presentational component to avoid forcing an avoidable client boundary and hydration cost.</comment>
<file context>
@@ -0,0 +1,91 @@
+"use client";
+
+import type { HTMLAttributes, ReactElement } from "react";
</file context>
| import { cn } from "@/utils/cn"; | ||
|
|
||
| export const TooltipProvider = ({ | ||
| delayDuration = 0, |
There was a problem hiding this comment.
P2: Default tooltip delay is disabled (delayDuration = 0), which breaks the required "delay first tooltip" interaction behavior.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/website/components/ui/tooltip.tsx, line 8:
<comment>Default tooltip delay is disabled (`delayDuration = 0`), which breaks the required "delay first tooltip" interaction behavior.</comment>
<file context>
@@ -0,0 +1,59 @@
+import { cn } from "@/utils/cn";
+
+export const TooltipProvider = ({
+ delayDuration = 0,
+ ...props
+}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>): ReactElement => {
</file context>
| ...props | ||
| }: ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>): ReactElement => { | ||
| return ( | ||
| <TooltipProvider> |
There was a problem hiding this comment.
P2: Wrapping every Tooltip in an inner TooltipProvider overrides outer provider settings and breaks group-level tooltip timing behavior.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/website/components/ui/tooltip.tsx, line 24:
<comment>Wrapping every `Tooltip` in an inner `TooltipProvider` overrides outer provider settings and breaks group-level tooltip timing behavior.</comment>
<file context>
@@ -0,0 +1,59 @@
+ ...props
+}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>): ReactElement => {
+ return (
+ <TooltipProvider>
+ <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+ </TooltipProvider>
</file context>
| useEffect(() => { | ||
| const handleKeyDown = (event: KeyboardEvent) => { | ||
| if (event.key === "Enter" && !isDropdownOpen) { | ||
| if (event.key === "Enter" && !isEditorSelectOpen) { |
There was a problem hiding this comment.
P2: Pressing Enter on the editor Select trigger can unexpectedly call handleOpen() and navigate away before the Select opens, due to the global Enter handler relying only on isEditorSelectOpen.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/website/app/open-file/page.tsx, line 119:
<comment>Pressing Enter on the editor Select trigger can unexpectedly call `handleOpen()` and navigate away before the Select opens, due to the global Enter handler relying only on `isEditorSelectOpen`.</comment>
<file context>
@@ -115,31 +116,30 @@ const OpenFileContent = () => {
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
- if (event.key === "Enter" && !isDropdownOpen) {
+ if (event.key === "Enter" && !isEditorSelectOpen) {
handleOpen();
}
</file context>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 3 potential issues.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
| )} | ||
| > | ||
| <SelectValue placeholder="Select editor" /> | ||
| </SelectTrigger> |
There was a problem hiding this comment.
Duplicate editor icon in Select trigger
Medium Severity
The SelectTrigger contains an explicit icon (selectedEditor?.icon) alongside a SelectValue. Since each SelectItem wraps its full children (including the icon and name) inside SelectPrimitive.ItemText, and SelectValue renders the ItemText content of the selected item, the editor icon appears twice in the trigger — once from the explicit span and once from the SelectValue rendering.
Additional Locations (1)
| <thead> | ||
| <tr className="border-b border-[#2a2a2a]"> | ||
| <th className="text-left py-2 px-4 text-xs font-medium text-neutral-500 uppercase tracking-wider"> | ||
| <Table className="max-w-2xl border-collapse text-sm"> |
There was a problem hiding this comment.
Table wrapper div breaks flex centering layout
Medium Severity
The Table component introduces a wrapper div with w-full around the <table>. When placed inside the parent div with flex justify-center, this w-full wrapper stretches to the full container width, defeating the centering. Previously the <table> (with max-w-2xl) was the direct flex item and got centered; now it's left-aligned inside the full-width wrapper. The benchmark summary table loses its centered layout on wider viewports.
Additional Locations (1)
| > | ||
| {parameter} | ||
| </button> | ||
| </Button> |
There was a problem hiding this comment.
Button base whitespace-nowrap prevents file path wrapping
Medium Severity
The Button base class includes whitespace-nowrap, which overrides the break-all class on the ReadToolCallBlock button. The old plain <button> had no whitespace-nowrap, so long file paths wrapped naturally. Now white-space: nowrap suppresses all line breaks, making word-break: break-all ineffective, so file path parameter text will overflow its container instead of wrapping.
Additional Locations (1)
2 participants
Migrate website interactive UI components to shadcn to standardize the component library and improve maintainability.
Summary by cubic
Migrated website UI to shadcn/Radix primitives for consistent styling, simpler code, and easier maintenance. Replaced custom elements across pages with shared components.
Refactors
Dependencies
Written for commit e8769ce. Summary will update on new commits.
Note
Medium Risk
Moderate UI refactor replacing custom dropdown/tooltip/scroll/interactive elements with new Radix-based primitives; risk is mainly styling/behavior regressions and focus/keyboard interaction changes, with no backend or data-flow impact.
Overview
Standardizes the website’s UI component layer by introducing shadcn-style primitives (
Button,Card,Input,Select,Tabs,Table,Tooltip,ScrollArea) built on Radix +class-variance-authority.Refactors multiple interactive surfaces (e.g.,
open-fileeditor picker, install tabs, benchmark tooltip/tables, code/copy controls, demo footer, GitHub/docs buttons, collapsibles, and scrollable areas) to use these shared components, removing bespoke dropdown/tooltip/scrollbar logic and aligning styling/behavior.Adds required Radix dependencies in
packages/website/package.jsonand updatespnpm-lock.yamlaccordingly.Written by Cursor Bugbot for commit e8769ce. This will update automatically on new commits. Configure here.