fix(platform): UI refinements and code review fixes for automations#219
Conversation
Convert legacy !important prefix syntax (!class) to canonical suffix syntax (class!) across ReactFlow components and add unstyled variant to Input component for cleaner style overrides. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add mobile-only version select in header with ghost variant - Move Edit/Publish actions to dropdown menu on mobile - Fix banner centering with responsive max-width constraints - Add purple styling for AI Assistant button in toolbar - Create type declaration for @xyflow/react CSS import Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Format automation-loop-container and automation-step aria-label - Update adaptive-header z-index and use shrink-0 - Format input.tsx trailing commas - Update tab-navigation min-height and formatting - Add viewAutomation translation key - Update generated Convex files and package-lock Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add important modifiers to InvisibleHandle for XYFlow style overrides - Restore sticky positioning on sidepanel header - Fix translation key inconsistency for archived status - Prevent double-submission on automation name input Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
📝 WalkthroughWalkthroughThis PR refactors the automation dashboard UI components by replacing Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
services/platform/components/ui/navigation/tab-navigation.tsx (1)
42-47: JSDoc forstandaloneprop is now stale.The documentation at lines 42-47 states that when
standaloneis true, the component "applies sticky positioning and z-index." However, the implementation at line 147 no longer includessticky—it only appliesbg-background z-10.Either update the JSDoc to reflect the new behavior, or restore
stickyif the removal was unintentional.📝 Suggested JSDoc update
/** - * When true (default), applies sticky positioning and z-index. - * When false, renders without sticky for use inside StickyHeader wrapper. + * When true (default), applies background color and z-index for layering. + * When false, renders without these styles for use inside a StickyHeader wrapper. * `@default` true */ standalone?: boolean;Also applies to: 146-148
🤖 Fix all issues with AI agents
In
`@services/platform/app/`(app)/dashboard/[id]/automations/components/automation-loop-container.tsx:
- Around line 36-43: Remove the redundant className prop from all six
InvisibleHandle usages in this component (the InvisibleHandle elements including
the one with id "top-target") — the styles are already applied internally by
InvisibleHandle; locate each InvisibleHandle instance in
automation-loop-container.tsx and delete the className="..." prop so only props
like type, position, id, isConnectable, and style remain.
In
`@services/platform/app/`(app)/dashboard/[id]/automations/components/automation-navigation.tsx:
- Around line 252-301: The long status check (automation?.status === 'draft' ||
'active' || 'archived') should be replaced with a simple existence check for the
automation object; update the conditional that wraps the DropdownMenu (the
expression using automation?.status) to just check automation (e.g., automation
!= null or Boolean(automation)) so the mobile dropdown renders whenever an
automation exists, leaving the inner status-specific DropdownMenuItem branches
(handlePublish, handleCreateDraft, isPublishing, isCreatingDraft) unchanged.
In
`@services/platform/app/`(app)/dashboard/[id]/automations/components/automation-step.tsx:
- Around line 134-141: The InvisibleHandle component already applies the base
classes ('size-2! border-0! bg-transparent! z-10!') internally, so remove the
redundant className prop from all InvisibleHandle usages in this file (the six
instances currently passing className, e.g., the one with id="top-target" and
the others with different position/id props) to avoid duplication and
maintenance overhead; simply delete the className attribute from each
InvisibleHandle element while keeping its other props (type, position, id,
isConnectable, style) intact.
In `@services/platform/app/`(app)/dashboard/[id]/automations/layout.tsx:
- Around line 59-75: Extract the duplicated versions query and navigation logic
into a shared hook (e.g., useAutomationVersions) that encapsulates the useQuery
call for api.wf_definitions.listVersionsPublic and exposes the fetched versions
plus a navigateToVersion(versionId) function that uses usePathname and
router.push to route to `${currentPath}/automations/${versionId}?panel=ai-chat`;
replace the local usages of versions and handleVersionChange in layout.tsx and
automation-navigation.tsx with this hook (import useAutomationVersions and call
its versions and navigateToVersion) to remove duplication.
- Around line 143-159: Replace the interactive <span role="button"> block with a
semantic <button type="button">: move the onClick and onKeyDown handlers (or
remove onKeyDown since button handles Enter/Space) onto the button, keep the
className ("text-foreground cursor-pointer") and the inner mobile-hidden
separator span, remove the unnecessary tabIndex and role attributes, and ensure
setEditMode(true) is called in the button's onClick so the automation?.name
rendering and behavior (via setEditMode) remain identical.
- Around line 131-141: Replace the non-semantic <span role="button"
tabIndex={0}> with a real <button type="button"> to restore built-in keyboard
accessibility; keep the onClick={handleClickAutomation}, className={cn(...)}
expression and the conditional 'automation?.name' styling, remove role and
tabIndex attributes, and ensure the visible label (t('title')) and spacing are
preserved so behavior and styling remain unchanged.
In `@services/platform/app/`(app)/dashboard/[id]/layout.tsx:
- Line 71: The Tailwind class in the div uses old bracket syntax for a CSS
variable height; update the class on the div with className "md:hidden flex
items-center gap-2 h-[--nav-size] p-2 bg-background" to use Tailwind v4
arbitrary-value parentheses syntax by replacing h-[--nav-size] with
h-(--nav-size) so the height correctly resolves the --nav-size variable.
In `@services/platform/app/globals.css`:
- Around line 343-365: Add a short maintainer comment above the ReactFlow handle
overrides explaining the Tailwind size mappings (e.g., that .size-2\!
corresponds to Tailwind size 0.5rem, .size-2\.5\! to 0.625rem, etc.) or note
that these values mirror the design system so future theme changes should also
update the hardcoded values; alternatively, replace the hardcoded values in the
selectors (.react-flow__handle.size-2\!, .react-flow__handle.size-2\.5\!,
.react-flow__handle.border-0\!, .react-flow__handle.bg-transparent\!,
.react-flow__handle.bg-muted-foreground\!) with CSS variables if such spacing
variables exist in the theme to avoid duplication.
In `@services/platform/components/layout/adaptive-header.tsx`:
- Around line 119-120: The header uses an unexplained arbitrary z-index
('z-520') in the standalone class string (see standalone && 'sticky top-0 z-520
bg-background/50 backdrop-blur-md'); replace it with a standard Tailwind z-index
utility (for example 'z-50' or another existing token) or add a short comment
and documented reason if the high stacking context is required; update the class
string in adaptive-header.tsx accordingly (or expose a prop to control z-index)
so the value is not a one-off arbitrary number.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro (Legacy)
⛔ Files ignored due to path filters (3)
package-lock.jsonis excluded by!**/package-lock.jsonservices/platform/convex/_generated/api.d.tsis excluded by!**/_generated/**services/platform/convex/betterAuth/_generated/component.tsis excluded by!**/_generated/**
📒 Files selected for processing (16)
services/platform/app/(app)/dashboard/[id]/automations/components/add-step-node.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-loop-container.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-navigation.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-sidepanel.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-step.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-steps.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/invisible-handle.tsxservices/platform/app/(app)/dashboard/[id]/automations/layout.tsxservices/platform/app/(app)/dashboard/[id]/chat/components/chat-search-dialog.tsxservices/platform/app/(app)/dashboard/[id]/layout.tsxservices/platform/app/globals.cssservices/platform/components/layout/adaptive-header.tsxservices/platform/components/ui/forms/input.tsxservices/platform/components/ui/navigation/tab-navigation.tsxservices/platform/messages/en.jsonservices/platform/types/xyflow.d.ts
🧰 Additional context used
🧠 Learnings (24)
📚 Learning: 2025-11-25T04:37:44.394Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-11-25T04:37:44.394Z
Learning: Applies to **/*.{tsx,jsx} : Use `leading-normal` instead of `leading-[normal]` in Tailwind classes
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/add-step-node.tsxservices/platform/components/layout/adaptive-header.tsxservices/platform/components/ui/navigation/tab-navigation.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace m-[8px] with m-2
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/add-step-node.tsxservices/platform/app/(app)/dashboard/[id]/layout.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace text-[14px] with text-sm
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/add-step-node.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Never use hardcoded Tailwind gray/black/white color utilities (e.g., text-gray-500, bg-gray-100, border-gray-200, text-black)
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/add-step-node.tsx
📚 Learning: 2025-12-26T02:23:20.245Z
Learnt from: larryro
Repo: tale-project/tale PR: 35
File: services/platform/app/(app)/dashboard/[id]/chat/components/integration-approval-card.tsx:58-90
Timestamp: 2025-12-26T02:23:20.245Z
Learning: In services/platform/app/(app)/dashboard/[id]/chat/components/integration-approval-card.tsx, prefer reading the approving user from the authenticated session context rather than passing a userId from the frontend. The hardcoded 'user' string can be acceptable only as a temporary placeholder during the initial implementation until a user profile feature is added; plan to replace with proper user identity via session context or user service once backend supports it.
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/add-step-node.tsxservices/platform/app/(app)/dashboard/[id]/chat/components/chat-search-dialog.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-navigation.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-step.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-loop-container.tsxservices/platform/components/layout/adaptive-header.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-steps.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/invisible-handle.tsxservices/platform/components/ui/navigation/tab-navigation.tsxservices/platform/components/ui/forms/input.tsxservices/platform/app/(app)/dashboard/[id]/automations/layout.tsxservices/platform/app/(app)/dashboard/[id]/layout.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-sidepanel.tsx
📚 Learning: 2025-07-03T08:43:49.346Z
Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursor/rules/next-best-practice.mdc:0-0
Timestamp: 2025-07-03T08:43:49.346Z
Learning: Applies to **/*.{tsx,jsx} : Use proper navigation with `useRouter` and `Link` components
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/automation-navigation.tsxservices/platform/app/(app)/dashboard/[id]/automations/layout.tsx
📚 Learning: 2025-12-30T06:21:13.183Z
Learnt from: larryro
Repo: tale-project/tale PR: 37
File: services/platform/convex/model/documents/validators.ts:89-102
Timestamp: 2025-12-30T06:21:13.183Z
Learning: Do not flag a missing trailing newline for TypeScript files in code reviews. POSIX text files should end with a trailing newline and Prettier (or your formatter) will enforce this. Treat the trailing newline as a non-issue in reviews for all TS files.
Applied to files:
services/platform/types/xyflow.d.ts
📚 Learning: 2025-08-21T14:59:36.874Z
Learnt from: CR
Repo: talecorp/lanserhof PR: 0
File: .cursorrules:0-0
Timestamp: 2025-08-21T14:59:36.874Z
Learning: Applies to {app,components}/**/*.{tsx,jsx} : Use 'use client' only when needed for interactions/state (client components)
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/automation-step.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-loop-container.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/invisible-handle.tsxservices/platform/components/ui/forms/input.tsx
📚 Learning: 2025-10-11T11:46:02.452Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursorrules:0-0
Timestamp: 2025-10-11T11:46:02.452Z
Learning: Applies to **/*.{tsx,jsx} : Use 'use client' only for components that need interactions or state
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/automation-step.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-loop-container.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/invisible-handle.tsxservices/platform/components/ui/forms/input.tsx
📚 Learning: 2025-07-19T15:30:00.886Z
Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursor/rules/core-rules.mdc:0-0
Timestamp: 2025-07-19T15:30:00.886Z
Learning: Applies to **/*.{tsx,jsx} : Follow the required React component structure: 'use client' (when needed), imports, Props interface, function definition, hooks, effects, event handlers, and render in order
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/automation-step.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-loop-container.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/invisible-handle.tsxservices/platform/components/ui/forms/input.tsx
📚 Learning: 2025-11-30T12:29:39.745Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/workspace_rules.mdc:0-0
Timestamp: 2025-11-30T12:29:39.745Z
Learning: Applies to **/*.{tsx,jsx} : Use `'use client'` directive only for components that require interactions or state management
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/automation-step.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-loop-container.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/invisible-handle.tsxservices/platform/components/ui/forms/input.tsx
📚 Learning: 2025-07-03T08:43:49.346Z
Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursor/rules/next-best-practice.mdc:0-0
Timestamp: 2025-07-03T08:43:49.346Z
Learning: Applies to app/**/*.tsx : Use client components only for user interactions, browser APIs, and state management
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/automation-step.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-loop-container.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/invisible-handle.tsxservices/platform/components/ui/forms/input.tsx
📚 Learning: 2025-10-11T11:46:02.452Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursorrules:0-0
Timestamp: 2025-10-11T11:46:02.452Z
Learning: Applies to **/*.tsx : Follow the required client component structure: imports, Props interface, hooks, effects, handlers, and render order; include 'use client' only when needed
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/automation-step.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-loop-container.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/invisible-handle.tsxservices/platform/components/ui/forms/input.tsx
📚 Learning: 2025-07-19T15:29:09.401Z
Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursorrules:0-0
Timestamp: 2025-07-19T15:29:09.401Z
Learning: Applies to app/components/**/*.{js,jsx,ts,tsx} : Follow the required component structure: 'use client' only when needed, import hooks at the top, define Props interface, use hooks first, effects second, event handlers third, and render last.
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/automation-step.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/automation-loop-container.tsxservices/platform/components/ui/forms/input.tsxservices/platform/app/(app)/dashboard/[id]/automations/layout.tsx
📚 Learning: 2025-08-21T15:01:09.405Z
Learnt from: CR
Repo: talecorp/lanserhof PR: 0
File: .cursor/rules/core-rules.mdc:0-0
Timestamp: 2025-08-21T15:01:09.405Z
Learning: Applies to **/*.{tsx,jsx} : 'use client' directive only when needed at the top of client components
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/automation-step.tsxservices/platform/app/(app)/dashboard/[id]/automations/components/invisible-handle.tsxservices/platform/components/ui/forms/input.tsx
📚 Learning: 2025-07-19T15:29:09.401Z
Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursorrules:0-0
Timestamp: 2025-07-19T15:29:09.401Z
Learning: Applies to app/**/*.{js,jsx,ts,tsx} : Use 'use client' directive only for components that require interactions or state (client components).
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/automation-step.tsxservices/platform/components/ui/forms/input.tsx
📚 Learning: 2025-11-25T04:37:44.394Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-11-25T04:37:44.394Z
Learning: Applies to **/*.{tsx,jsx} : ALWAYS use the Table component (`Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`) instead of custom flex layouts; apply proper column widths using rem units and use semantic colors for all text and backgrounds
Applied to files:
services/platform/app/globals.cssservices/platform/components/ui/navigation/tab-navigation.tsx
📚 Learning: 2025-07-03T08:43:49.346Z
Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursor/rules/next-best-practice.mdc:0-0
Timestamp: 2025-07-03T08:43:49.346Z
Learning: Applies to app/**/*.tsx : Handle async params properly in async components
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/invisible-handle.tsx
📚 Learning: 2025-11-25T04:37:44.394Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-11-25T04:37:44.394Z
Learning: Applies to **/*.{tsx,jsx} : Use semantic spacing classes when available: `p-1` for 4px, `p-2` for 8px, `m-1` for 4px, `m-2` for 8px
Applied to files:
services/platform/components/ui/navigation/tab-navigation.tsx
📚 Learning: 2025-07-19T15:29:09.401Z
Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursorrules:0-0
Timestamp: 2025-07-19T15:29:09.401Z
Learning: Applies to app/components/**/*.{js,jsx,ts,tsx} : Use useCallback for stable function references in React components.
Applied to files:
services/platform/components/ui/forms/input.tsx
📚 Learning: 2025-07-03T08:43:49.346Z
Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursor/rules/next-best-practice.mdc:0-0
Timestamp: 2025-07-03T08:43:49.346Z
Learning: Applies to **/*.{tsx,jsx} : Consistent component structure: hooks, effects, event handlers, render
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/layout.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace m-[4px] with m-1
Applied to files:
services/platform/app/(app)/dashboard/[id]/layout.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace p-[8px] with p-2
Applied to files:
services/platform/app/(app)/dashboard/[id]/layout.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Convert pixel-based width/height utilities to rem using a 16px base (e.g., w-[278px] → w-[17.375rem])
Applied to files:
services/platform/app/(app)/dashboard/[id]/automations/components/automation-sidepanel.tsx
🧬 Code graph analysis (3)
services/platform/app/(app)/dashboard/[id]/automations/components/automation-step.tsx (1)
services/platform/app/(app)/dashboard/[id]/automations/components/invisible-handle.tsx (1)
InvisibleHandle(10-17)
services/platform/app/(app)/dashboard/[id]/automations/components/automation-loop-container.tsx (1)
services/platform/app/(app)/dashboard/[id]/automations/components/invisible-handle.tsx (1)
InvisibleHandle(10-17)
services/platform/app/(app)/dashboard/[id]/automations/layout.tsx (2)
services/platform/components/layout/adaptive-header.tsx (1)
AdaptiveHeaderRoot(101-128)services/platform/app/(app)/dashboard/[id]/automations/components/automation-navigation.tsx (1)
AutomationNavigation(37-305)
🪛 Biome (2.1.2)
services/platform/app/(app)/dashboard/[id]/automations/layout.tsx
[error] 131-139: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 132-132: 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] 144-144: The elements with this role can be changed to the following elements:
For examples and more information, see WAI-ARIA Roles
(lint/a11y/useSemanticElements)
⏰ 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). (1)
- GitHub Check: Build Docker Image
🔇 Additional comments (15)
services/platform/messages/en.json (1)
890-891: LGTM!The new
viewAutomationtranslation entry is correctly added with proper JSON syntax and follows the existing naming conventions. The value is consistent with the existingviewAutomationentry inautomations.sidePanel, ensuring UI consistency across toolbar and sidepanel contexts.services/platform/components/ui/navigation/tab-navigation.tsx (1)
166-168: LGTM!The reformatting of the ternary expression improves readability without changing behavior.
services/platform/components/ui/forms/input.tsx (2)
17-37: Well-structured variant implementation.The variant system is cleanly implemented with
defaultconsolidating the standard styling andunstyledstripping visual chrome for custom contexts. ThedefaultVariantsensures backward compatibility.
98-104: Consistent variant application across both render paths.Both the password and non-password input branches correctly pass
varianttoinputVariants(), andclassNameis positioned last in thecn()call to allow consumer overrides when needed.Also applies to: 154-159
services/platform/app/(app)/dashboard/[id]/chat/components/chat-search-dialog.tsx (1)
116-117: Good use of the new unstyled variant.The
variant="unstyled"correctly strips default Input styling, allowing the dialog header to control the visual presentation. Thepr-9provides adequate clearance for the absolutely-positioned close button atright-4.services/platform/app/(app)/dashboard/[id]/automations/components/automation-sidepanel.tsx (3)
131-135: LGTM! Clean CSS variable approach for dynamic width.The
w-(--panel-width)syntax correctly uses Tailwind v4's parentheses notation for CSS variables, and the inline style properly sets the custom property. Themax-md:w-fulloverride for mobile is appropriately applied without needing the!importantmodifier.
148-148: Sticky positioning may not work as intended.The
sticky top-0on the header requires a scrollable ancestor to function. However, the parent container (line 134) hasoverflow-hidden, and the scrollable content is in a sibling element (overflow-y-autoon line 224), not an ancestor. This means the header won't actually stick when the panel content scrolls.If the intent is for the header to remain visible while scrolling panel content, the current structure already achieves this through the flex layout—the header is a flex item that doesn't scroll, while the content area has its own scroll container. The
stickyclass is effectively a no-op here.Consider whether
stickyis necessary given the existing layout, or restructure so the header and content share a single scrollable parent:- <div className="bg-background/70 backdrop-blur-sm p-3 border-b border-border shrink-0 sticky top-0"> + <div className="bg-background/70 backdrop-blur-sm p-3 border-b border-border shrink-0">Alternatively, if sticky behavior is truly needed, the panel would need restructuring with a single scrollable wrapper containing both header and content.
150-160: LGTM! AI assistant badge styling provides clear visual distinction.The solid purple styling (
bg-purple-600 text-white) differentiates the AI assistant header from other step types that use the bordered/light pattern. This intentional visual hierarchy makes the AI chat state more prominent.services/platform/types/xyflow.d.ts (1)
1-5: LGTM!The ambient module declaration correctly enables TypeScript to recognize imports from
@xyflow/react/dist/style.css. The CSS is imported as a side-effect in the Next.js application (services/platform/app/(app)/dashboard/[id]/automations/components/automation-steps.tsx), and thestringexport type in the declaration allows the import to succeed without TypeScript errors.services/platform/app/globals.css (1)
366-378: LGTM!Standard CSS centering pattern using
left: 50%combined withtranslateX(-50%). The margin reset ensures ReactFlow's default panel margins don't interfere with the centering.services/platform/app/(app)/dashboard/[id]/automations/components/invisible-handle.tsx (1)
10-16: LGTM!Clean implementation with correct Tailwind v4 important modifier syntax. The component properly wraps the ReactFlow Handle with merged className support.
services/platform/app/(app)/dashboard/[id]/automations/components/add-step-node.tsx (1)
18-22: LGTM!Correctly migrated to Tailwind v4 important modifier syntax (suffix instead of prefix).
services/platform/app/(app)/dashboard/[id]/automations/components/automation-steps.tsx (1)
1129-1145: LGTM!The draft banner improvements with centered positioning, responsive max-width, and refined styling are well-implemented. The icon sizing with
shrink-0prevents layout issues.services/platform/app/(app)/dashboard/[id]/automations/components/automation-navigation.tsx (1)
185-215: LGTM - Clean dropdown-based version selector.The version selector implementation is well-structured with proper mobile/desktop visibility toggling. The status labels correctly use common translations.
services/platform/app/(app)/dashboard/[id]/automations/layout.tsx (1)
102-124: Good use of ref guard to prevent double-submission.The
isSubmittingRefpattern correctly prevents race conditions whenonBlurfires after an Enter key press. The guard is properly reset in all code paths.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
1 participant
Summary
tCommon('status.archived'))!importantsyntaxTest plan
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Improvements
Style
✏️ Tip: You can customize this high-level summary in your review settings.