Skip to content

merge(teleport): stack OpenCode on Grok

MacroscopeApp / Macroscope - UI Consistency failed Aug 15, 2026 in 2m 32s

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 uses size="xs" (text size: h-7 gap-1 px-2) plus a hand-set size-3 icon, so it renders wider/non-square and with a smaller glyph than the size="icon-xs" peers rendered beside it by OpenInPicker and GitActionsControl. Suggested size="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 without cursor-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 the Button primitive both set it, and the primitive also supplies the coarse-pointer hit target. Suggested using Button (variant="link"/"ghost", size="sm") or at minimum restoring cursor-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.tsx variants and existing header controls (OpenInPicker, GitActionsControl, ProjectScriptsControl); repo-wide, icon-only buttons consistently use size="icon-xs".
  • Verified no global button { cursor: pointer } rule exists in apps/web/src/index.css and 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 prevailing LoaderIcon + animate-spin usage elsewhere.
  • ChatComposer placeholder/disabled changes reuse the existing disabled expression pattern; ChatHeader layout and gaps are unchanged aside from the appended control.
  • DraftHeroHeadline's wrapper change preserves mx-auto w-full max-w-5xl text-center geometry and keeps pointer-events-auto on 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 using size="xs" with just an icon, but that's not the right choice—peers like OpenInPicker use size="icon-xs" for icon-only buttons. The xs size gives it height and horizontal padding that makes it rectangular rather than a proper square icon button, and it loses the hit-target geometry that icon-xs provides. There's also a hardcoded size-3 on the icon itself, whereas the primitive default for xs is size-4 / sm:size-3.5, and other similar controls use size-3.5. Since providing a size- class disables the default sizing, this creates an inconsistency. The fix would be to switch to size="icon-xs" and either let the primitive handle the icon sizing or explicitly use size-3.5 to 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 a Button 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 missing cursor-pointer, while the project selector button in the same file includes it. Since Tailwind v4 removed the default cursor: pointer on 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 uses size="xs" with a manual size-3 icon, which creates a wider, non-square button that doesn't match the icon-xs peers 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 missing cursor-pointer or suggest using the Button component instead. The button has icon, label, hover color transition, and focus ring—characteristics that suggest it could be a Button with variant="link" and size="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 the size prop on line 71 from "xs" to "icon-xs", and also removing an explicit size-3 class from line 153 so the icon sizing is handled consistently by the primitive component. For the second comment, I'm adding cursor-pointer to 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