Repository navigation
UI Consistency: 2 issues found
Two concrete consistency findings in the new teleport UI:
apps/web/src/components/teleport/TeleportOutButton.tsx— icon-only header action usessize="xs"(text size:h-7 gap-1 px-2) plus a hand-setsize-3icon, so it renders wider/non-square and with a smaller glyph than thesize="icon-xs"peers rendered beside it byOpenInPickerandGitActionsControl. Suggestedsize="icon-xs"and letting the primitive size the icon.apps/web/src/components/chat/DraftHeroHeadline.tsx— the new "Import a native CLI session" action is a raw<button>reconstructing a text/ghost button withoutcursor-pointer. Tailwind v4 has no default pointer cursor for buttons and the repo has no global rule; the sibling raw button in the same file and theButtonprimitive both set it, and the primitive also supplies the coarse-pointer hit target. Suggested usingButton(variant="link"/"ghost",size="sm") or at minimum restoringcursor-pointer.
Both were posted as inline review comments with suggested fixes.
Details
Note
Your check run agent prompt is: .macroscope/check-run-agents/ui-consistency.md
More information about how Check Run Agents work can be found in our Help Center.
Files examined in scope: commandPaletteBus.ts, components/ChatView.tsx, components/CommandPalette.tsx / .logic.ts / tests, components/chat/ChatComposer.tsx, components/chat/ChatHeader.tsx, components/chat/DraftHeroHeadline.tsx, components/teleport/TeleportOutButton.tsx, lib/teleport.ts, state/teleport.ts.
Checks performed:
- Compared the new header control against
components/ui/button.tsxvariants and existing header controls (OpenInPicker,GitActionsControl,ProjectScriptsControl); repo-wide, icon-only buttons consistently usesize="icon-xs". - Verified no global
button { cursor: pointer }rule exists inapps/web/src/index.cssand that the project is on Tailwind v4, confirming the missing pointer cursor is a real interaction inconsistency. - Command palette additions reuse
ITEM_ICON_CLASS/ADDON_ICON_CLASS, the existing view-stack helpers, and the disabled-item pattern; the spinner icon usage matches prevailingLoaderIcon+animate-spinusage elsewhere. ChatComposerplaceholder/disabled changes reuse the existing disabled expression pattern;ChatHeaderlayout and gaps are unchanged aside from the appended control.DraftHeroHeadline's wrapper change preservesmx-auto w-full max-w-5xl text-centergeometry and keepspointer-events-autoon interactive children.- No CSS files were modified, so no emitted-CSS or theme-variant review was required.
🔍 Agent activity — 1 tool call
💭 Looking at the web UI changes in scope, I'm reviewing the modified files across the apps/web/src directory—including the command palette bus, chat view components, composer, header, and draft hero headline, along with some telecom-related components. I'm identifying UI consistency issues, particularly in DraftHeroHeadline.tsx where there's a raw button element with custom classes that duplicates Button component styling, and in TeleportOutButton.tsx where I need to verify the icon sizing matches other header buttons. Let me examine the actual files to check for these patterns and ensure consistency across the component library usage. Looking at the DraftHeroHeadline button, I notice there's already a precedent for a raw button in this file with the project selector, though that one is inline text within the heading. The new button would be a standalone inline-flex element combining text and an icon—more like a link or ghost button style. I should check if the Button primitive has a link variant available, and also compare how TeleportOutButton handles its styling with
size="xs"and icon sizing to ensure consistency. I'm noticing that TeleportOutButton is usingsize="xs"with just an icon, but that's not the right choice—peers like OpenInPicker usesize="icon-xs"for icon-only buttons. Thexssize gives it height and horizontal padding that makes it rectangular rather than a proper square icon button, and it loses the hit-target geometry thaticon-xsprovides. There's also a hardcodedsize-3on the icon itself, whereas the primitive default forxsissize-4/sm:size-3.5, and other similar controls usesize-3.5. Since providing asize-class disables the default sizing, this creates an inconsistency. The fix would be to switch tosize="icon-xs"and either let the primitive handle the icon sizing or explicitly usesize-3.5to match siblings. I should check GitActionsControl to see how it handles icon-only buttons in the header for comparison, and then look at DraftHeroHeadline's raw button implementation. Now examining whether the new button beneath the headline should be aButton variant="link"instead of a custom raw button — it has text plus icon, custom focus ring, and hover color changes that duplicate what the primitive already provides. The design here is a muted ghost text action with specific spacing and styling, but the rule is to prefer primitives over local reconstructions. The real issue I'm spotting: this raw button is missingcursor-pointer, while the project selector button in the same file includes it. Since Tailwind v4 removed the defaultcursor: pointeron buttons, the new import button will show a default arrow cursor instead of the pointer cursor that all other clickable controls display — that's a concrete interaction inconsistency I can flag with a straightforward fix. Let me verify the Tailwind version being used in the repo. I need to check the Tailwind v4 configuration file, specifically around lines 890 and 1798 in index.css, to see if there's a global button cursor rule that might be affecting things. The DraftHeroHeadline button is missing the global cursor-pointer style that every other clickable element has, which is a real inconsistency since the Button primitive and other raw buttons in the same file all include it. I should also check the CommandPalette changes to see if there's a shared Spinner component in the codebase instead of using the LoaderIcon with animate-spin directly. Looking at the Spinner component usage across the codebase — there's a shared spinner in ui/spinner.tsx, but I'm noticing that line 161 uses LoaderIcon with animate-spin directly rather than the Spinner primitive. This pattern appears elsewhere too, with palette items accepting a ReactNode icon and applying ITEM_ICON_CLASS. Let me dig into the spinner.tsx file to understand the full picture. Looking at the TeleportOutButton implementation, it's an icon-only button using extra-small sizing. I'm checking how other icon-only buttons in the header like GitActionsControl and ProjectScriptsControl handle this pattern. There's also a pending state where the button gets disabled without showing a spinner—it's acceptable for a new component, though I should verify if similar components display loading indicators instead. I'm noticing that TeleportOutButton's icon-only control usessize="xs"with a manual size-3 icon, which creates a wider, non-square button that doesn't match theicon-xspeers in the same header row—both in dimensions and icon size. There's also an incomplete className attribute that needs attention. For the DraftHeroHeadline raw button, I'm weighing whether to flag the missingcursor-pointeror suggest using the Button component instead. The button has icon, label, hover color transition, and focus ring—characteristics that suggest it could be aButtonwithvariant="link"andsize="sm", but that would introduce an underline and h-8 height that don't match the design intent of muted text under the headline. Since this is a standalone action rather than inline text like the sibling raw buttons, the strongest finding is probably the missing cursor pointer as a minimal fix that preserves the current styling. I'm also noticing the ChatComposer swapped its placeholder and disabled logic—the textarea gets disabled when teleported out, and the placeholder comparison uses a string flag which feels a bit brittle, though it's not technically a UI consistency violation. Looking at the other changes: ChatView.tsx adds toast and sendDisabledReason handling, CommandPalette.tsx introduces new views with disabled items for import sessions and empty states (consistent with existing MenuItem patterns), and there's a loader icon with a spinning animation for loading states. For DraftHeroHeadline, the refactoring wraps the h1 in a div container while preserving the same layout classes—mx-auto, w-full, max-w-5xl, text-center—so no regression there. The new button includes pointer-events-auto to ensure it stays interactive even if the parent has pointer-events-none. Now I need to compile my findings and post inline comments, starting with TeleportOutButton.tsx around line 153 for the Button props. I'm looking at a code review comment about updating thesizeprop on line 71 from"xs"to"icon-xs", and also removing an explicitsize-3class from line 153 so the icon sizing is handled consistently by the primitive component. For the second comment, I'm addingcursor-pointerto the className on line 179 of the DraftHeroHeadline button as an inline suggestion, while also noting that using the Button primitive would be the preferred approach here. I'll mark this review as failing since these are concrete consistency issues, even if minor.
1. modify_pr — Two small consistency findings in the new teleport UI. Everything else in the changed web files (command palette views, composer disabled/placeholder handling, ChatView toast) follows the existing primitives and layout conventions.
Agent Credits: 220 credits