💭 I'm noticing that MessagesTimeline.tsx is using a raw <button> element for the Cancel action, but I should check if other buttons in that same row are using the Button primitive instead—if so, I'd want to keep the styling consistent. Checking whether a raw <button> element violates the component conventions here, since it's being used as a text link-style action in a message row—I should look at the Button primitive in the UI components to see if there's a link variant available. I'm checking the variant names in that section of the file to see what options are available, like ghost and link styles. I'm noticing a raw <button> element that mimics the link variant styling with destructive text color and medium font weight, which matches the existing Button component's link variant exactly. This is a concrete finding since it recreates Button functionality without using the component, and it's missing the focus ring and other accessibility features that the variant provides. The button does have text content ("Cancel"), though an aria-label matching the mobile version's "Cancel queued message" would be clearer. More importantly, it's missing the cursor-pointer style and focus-visible ring that other raw buttons in the file explicitly add, and the parent container's focus-within opacity change suggests keyboard navigation is important here. The fix is straightforward: replace the raw button with the Button component using the link variant, destructive text color, and compact size, which automatically includes all the necessary accessibility and styling features. For the destructive text color, I need to verify that text-destructive is actually defined as a valid class in this codebase since I see text-destructive-foreground used elsewhere. Let me search for existing usage to confirm it's available. I'm noticing that variant="link" isn't actually used anywhere in the codebase, but there are similar text-link buttons in other files that include cursor-pointer and hover styling. The new button here follows that general pattern of raw text links, though it's missing the explicit cursor-pointer class that those other examples include, which is a bit inconsistent with the repo's standard for interactive elements. The raw Cancel button is missing the cursor pointer styling, focus-visible ring, and adequate hit target for coarse pointers that the Button component normally provides—this is a legitimate accessibility issue. The container's focus-within opacity change also suggests keyboard navigation should be considered here. I'm thinking the fix would be to use Button with a link variant and destructive text color, keeping it minimal to match the surrounding icon buttons in size. Let me check what size MessageCopyButton uses to ensure consistency. I should add an inline comment suggesting the Button component with a link variant and extra small size, and include an aria-label attribute with "Cancel queued message" for better accessibility — that covers both the styling and the missing accessible name that the mobile version has.

1. modify_pr — One consistency finding in the new web queued-message affordance in apps/web/src/components/chat/MessagesTimeline.tsx. See the inline comment.