refactor: standardize icon sizing to size-3 and refine hover styles in message views

[impoiler]

Summary

Standardizes icon sizing across the prompts UI by replacing individual h-* and w-* classes with the size-* utility class, and updates hover states for attachment removal buttons to use a more consistent background color.

Changes

• Replaced h-3 w-3, h-3.5 w-3.5, and h-4 w-4 classes with size-3 for consistent icon sizing across message views, attachment displays, and sidebar components
• Updated attachment removal button hover states from hover:bg-destructive/20 to hover:bg-card for better visual consistency
• Reduced horizontal padding in the messages view container from p-4 to px-1 py-4 for improved spacing
• Adjusted sidebar content padding from p-2 to p-2 px-3 for better alignment
• Removed unused getPromptHref function and related parameters from sidebar components

Type of change

• Refactor
• Bug fix
• Feature
• Documentation
• Chore/CI

Affected areas

• Core (Go)
• Transports (HTTP)
• Providers/Integrations
• Plugins
• UI (Next.js)
• Docs

How to test

Verify that all icons maintain consistent sizing and hover states work properly across the prompts interface:

# UI
cd ui
pnpm i || npm i
pnpm test || npm test
pnpm build || npm run build

Test the following areas:

• Message view icons (edit, delete, info tooltips)
• Attachment badges and removal buttons
• Sidebar folder and prompt icons
• Hover states on interactive elements

Screenshots/Recordings

N/A - Visual changes are subtle consistency improvements to icon sizing and hover states.

Breaking changes

• Yes
• No

Related issues

N/A

Security considerations

None - this is a purely cosmetic refactoring of CSS classes.

Checklist

• I read docs/contributing/README.md and followed the guidelines
• I added/updated tests where appropriate
• I updated documentation where needed
• I verified builds succeed (Go and UI)
• I verified the CI pipeline passes locally if applicable

[coderabbitai]

📝 Walkthrough

Summary by CodeRabbit

• Style

  • Standardized icon sizing across all message views and attachments for consistent visual appearance
  • Updated cursor feedback and hover styling on interactive action buttons
  • Refined layout padding in the message sidebar

• Refactor

  • Removed URL-based navigation functionality from the prompt sidebar components

Walkthrough

This PR standardizes icon sizing across message and attachment components (consolidating mixed utilities to size-3), adjusts attachment remove-button hover/cursor styles, tweaks root message container horizontal padding, and removes href/getPromptHref props and related usages from the prompt sidebar and its child components.

Changes

Cohort / File(s)	Summary
Message View Icon Sizing Normalization ui/components/prompts/components/messagesView/assistantMessageView.tsx, ui/components/prompts/components/messagesView/errorMessageView.tsx, ui/components/prompts/components/messagesView/messageRoleSwitcher.tsx, ui/components/prompts/components/messagesView/systemMessageView.tsx, ui/components/prompts/components/messagesView/toolCallResultView.tsx, ui/components/prompts/components/messagesView/toolCallView.tsx, ui/components/prompts/components/messagesView/userMessageView.tsx	Replaced mixed icon size classes (h-3, h-3.5, h-4, w-*) with unified size-3 on various icons (InfoIcon, AlertCircle, PencilIcon, XIcon, ChevronDown, Wrench, Paperclip). No behavioral changes.
Attachment Views Refinement ui/components/prompts/components/messagesView/attachmentViews.tsx	Unified icon sizing to size-3 for Mic, FileIcon, XIcon; added cursor-pointer to interactive remove elements; changed hover background from destructive variants to hover:bg-card while preserving removal behavior.
Root Message Container Layout ui/components/prompts/components/messagesView/rootMessageView.tsx	Adjusted root wrapper padding from p-4 to px-1 py-4 to add horizontal padding while keeping vertical spacing.
Sidebar Navigation Refactor ui/components/prompts/fragments/sidebar.tsx	Removed getPromptHref / href props and related href-based navigation from RootDropZone, DroppableFolder, and DraggablePromptItem prop types and usages; inlined/adjusted Button structures and updated icon/text sizing and spacing.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐇 I hopped through classes, neat and spry,

icons aligned beneath the sky,
hrefs tucked away, padding made right,
buttons now click with gentler light,
a tiny rabbit cheers the sight. ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main changes: standardizing icon sizing to size-3 and refining hover styles in message views, which aligns with the primary objectives of the PR.
Description check	✅ Passed	The description provides clear summary, changes, type of change, affected areas, testing steps, and breaking changes declaration. However, UI (Next.js) is marked as unaffected when this is actually a UI-only change, and multiple unrelated areas are incorrectly marked as affected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 03-17-prompt_playground_style_fixes

📝 Coding Plan

• Generate coding plan for human review comments

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[impoiler]

• refactor: extract CEL rule builder into reusable component and add menu portal support #2237 : 2 dependent PRs (#2234 , #2327 )
• feat: add variables support to prompt sessions and versions with database migration #2154
• feat: add variables support to prompt sessions and versions with persistence #2134
• feat: add selective message inclusion when committing prompt sessions to versions #2132
• refactor: standardize icon sizing to size-3 and refine hover styles in message views #2119 👈 (View in Graphite)
• docs: add prompt playground documentation with setup guide and feature overview #2112
• feat: improve message UI with JSON editor, smaller icons, and better scroll behavior #2094
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

🧹 Nitpick comments (3)

ui/components/prompts/components/messagesView/attachmentViews.tsx (1)

26-32: Consider adding data-testid attributes to removal buttons in a follow-up PR.

The removal buttons in AttachmentBadge and AttachmentDisplay lack data-testid attributes. Per coding guidelines, interactive elements should follow the pattern data-testid="<entity>-<element>-<qualifier>" (e.g., attachment-remove-btn).

Based on learnings: "When adding data-testid attributes in UI components, plan to include them in a dedicated PR that also updates related e2e tests, rather than sprinkling data-testid additions across feature PRs."

Also applies to: 57-62, 76-83, 97-104

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@ui/components/prompts/components/messagesView/attachmentViews.tsx` around
lines 26 - 32, Add a data-testid attribute to the removal buttons in
AttachmentBadge and AttachmentDisplay using the project pattern (e.g.,
data-testid="attachment-remove-btn") so e2e tests can target them; update the
button that calls onRemove (the element rendering <XIcon className="size-3" />)
and the other similar remove buttons in the file to use the same naming
convention, and put these changes in a dedicated follow-up PR that also updates
related e2e tests.

ui/components/prompts/fragments/sidebar.tsx (2)

220-220: Prefer explicit vertical padding utility for readability.

p-2 px-3 works, but py-2 px-3 is clearer and avoids override-style class stacking.

♻️ Suggested cleanup

-					<div className="flex flex-col p-2 px-3">
+					<div className="flex flex-col py-2 px-3">

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@ui/components/prompts/fragments/sidebar.tsx` at line 220, The className on
the div using "p-2 px-3" is ambiguous/redundant; update the element that renders
the sidebar fragment (the div with className "flex flex-col p-2 px-3") to use
explicit vertical padding by replacing "p-2" with "py-2" so the final className
is "flex flex-col py-2 px-3" for clearer intent and to avoid override-style
stacking.

---

361-363: Consider completing icon size token normalization in this component.

A few icons in these updated paths still use explicit h-4 w-4; if the stack is converging on shared size tokens, finishing that pass here would improve consistency.

As per coding guidelines, "**: always check the stack if there is one for the current PR. do not give localized reviews for the PR, always see all changes in the light of the whole stack of PRs."

Also applies to: 402-402, 415-415

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@ui/components/prompts/fragments/sidebar.tsx` around lines 361 - 363, Replace
the explicit size classes "h-4 w-4" on icon components in this sidebar fragment
with the project's shared icon size token used across the PR stack; specifically
update the FolderOpen and FolderIcon usages (and the other icon instances noted
in the comment) to use the shared token/class instead of hard-coded "h-4 w-4" so
all icons in this component follow the common size token convention.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@ui/components/prompts/components/messagesView/attachmentViews.tsx`:
- Around line 26-32: Add a data-testid attribute to the removal buttons in
AttachmentBadge and AttachmentDisplay using the project pattern (e.g.,
data-testid="attachment-remove-btn") so e2e tests can target them; update the
button that calls onRemove (the element rendering <XIcon className="size-3" />)
and the other similar remove buttons in the file to use the same naming
convention, and put these changes in a dedicated follow-up PR that also updates
related e2e tests.

In `@ui/components/prompts/fragments/sidebar.tsx`:
- Line 220: The className on the div using "p-2 px-3" is ambiguous/redundant;
update the element that renders the sidebar fragment (the div with className
"flex flex-col p-2 px-3") to use explicit vertical padding by replacing "p-2"
with "py-2" so the final className is "flex flex-col py-2 px-3" for clearer
intent and to avoid override-style stacking.
- Around line 361-363: Replace the explicit size classes "h-4 w-4" on icon
components in this sidebar fragment with the project's shared icon size token
used across the PR stack; specifically update the FolderOpen and FolderIcon
usages (and the other icon instances noted in the comment) to use the shared
token/class instead of hard-coded "h-4 w-4" so all icons in this component
follow the common size token convention.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 6d354bee-0d1d-4f68-ac7e-20e226080f32

📥 Commits

Reviewing files that changed from the base of the PR and between e4be9d9 and fa396ea.

📒 Files selected for processing (10)

• ui/components/prompts/components/messagesView/assistantMessageView.tsx
• ui/components/prompts/components/messagesView/attachmentViews.tsx
• ui/components/prompts/components/messagesView/errorMessageView.tsx
• ui/components/prompts/components/messagesView/messageRoleSwitcher.tsx
• ui/components/prompts/components/messagesView/rootMessageView.tsx
• ui/components/prompts/components/messagesView/systemMessageView.tsx
• ui/components/prompts/components/messagesView/toolCallResultView.tsx
• ui/components/prompts/components/messagesView/toolCallView.tsx
• ui/components/prompts/components/messagesView/userMessageView.tsx
• ui/components/prompts/fragments/sidebar.tsx

[coderabbitai]

Note

Docstrings generation - SUCCESS
Generated docstrings for this pull request at #2122

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

ui/components/prompts/fragments/sidebar.tsx (1)

458-475: ⚠️ Potential issue | 🟠 Major

Prompt row is click-only and not keyboard operable.

Line 463 renders the selectable prompt row as a plain div with only onClick, so keyboard users cannot activate selection. This is an accessibility regression after removing href-based interaction.

♿ Suggested fix

 function DraggablePromptItem({ prompt, isSelected, onSelect, onEdit, onDelete, canUpdate, canDelete }: DraggablePromptItemProps) {
   const { ref, isDragging } = useDraggable({ id: `prompt-${prompt.id}`, disabled: !canUpdate });
   const showActions = canUpdate || canDelete;

   return (
     <div
       ref={ref}
       data-testid={`sidebar-prompt-${prompt.id}`}
+      role="button"
+      tabIndex={0}
+      aria-current={isSelected ? "true" : undefined}
       className={cn(
         "group mb-1 flex h-[30px] cursor-pointer items-center gap-2 rounded-sm px-2 last:mb-0",
         isSelected ? "bg-primary/10 text-primary" : "hover:bg-muted/50",
         isDragging && "opacity-50",
       )}
+      onKeyDown={(e) => {
+        if (isDragging) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect();
+        }
+      }}
       onClick={(e) => {
         // Don't navigate if this was a drag
         if (isDragging) return;
         onSelect();
       }}
     >

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@ui/components/prompts/fragments/sidebar.tsx` around lines 458 - 475, The
prompt row in DraggablePromptItem is a plain div with only onClick, making it
inaccessible to keyboard users; update the root element (the div with ref and
data-testid `sidebar-prompt-${prompt.id}` in function DraggablePromptItem) to be
keyboard-operable by adding tabIndex={0}, role="button" (or role="option" if
part of a listbox), and an onKeyDown handler that triggers onSelect() when Enter
or Space is pressed (respecting the existing isDragging guard so it doesn't
activate during a drag). Also ensure focus styles remain visible and keep the
existing onClick behavior intact.

🧹 Nitpick comments (1)

ui/components/prompts/components/messagesView/messageRoleSwitcher.tsx (1)

26-34: Consider adding data-testid to the button for test coverage.

The button element is an interactive trigger but lacks a data-testid attribute. This is a pre-existing omission rather than something introduced by this PR. As per coding guidelines, interactive elements should have data-testid attributes following the pattern <entity>-<element>-<qualifier>.

A suitable testid would be: data-testid="message-role-switcher-btn".

🧪 Optional: Add data-testid for test coverage

 <button
+	data-testid="message-role-switcher-btn"
 	className={cn(
 		"-ml-1.5 flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs font-medium uppercase",
 		!disabled && "hover:bg-muted cursor-pointer",
 	)}
 >

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@ui/components/prompts/components/messagesView/messageRoleSwitcher.tsx` around
lines 26 - 34, The button in the MessageRoleSwitcher component lacks a test
identifier; update the button element in messageRoleSwitcher.tsx (the button
that renders {role} and <ChevronDown /> and uses the cn(...) call) to include
data-testid="message-role-switcher-btn" so tests can target this interactive
trigger; ensure the attribute is added directly on the same <button> element
that currently has the className and children.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@ui/components/prompts/fragments/sidebar.tsx`:
- Around line 458-475: The prompt row in DraggablePromptItem is a plain div with
only onClick, making it inaccessible to keyboard users; update the root element
(the div with ref and data-testid `sidebar-prompt-${prompt.id}` in function
DraggablePromptItem) to be keyboard-operable by adding tabIndex={0},
role="button" (or role="option" if part of a listbox), and an onKeyDown handler
that triggers onSelect() when Enter or Space is pressed (respecting the existing
isDragging guard so it doesn't activate during a drag). Also ensure focus styles
remain visible and keep the existing onClick behavior intact.

---

Nitpick comments:
In `@ui/components/prompts/components/messagesView/messageRoleSwitcher.tsx`:
- Around line 26-34: The button in the MessageRoleSwitcher component lacks a
test identifier; update the button element in messageRoleSwitcher.tsx (the
button that renders {role} and <ChevronDown /> and uses the cn(...) call) to
include data-testid="message-role-switcher-btn" so tests can target this
interactive trigger; ensure the attribute is added directly on the same <button>
element that currently has the className and children.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5108d4d0-b129-4097-bbda-6af21c37aead

📥 Commits

Reviewing files that changed from the base of the PR and between fa396ea and f49ca80.

📒 Files selected for processing (10)

• ui/components/prompts/components/messagesView/assistantMessageView.tsx
• ui/components/prompts/components/messagesView/attachmentViews.tsx
• ui/components/prompts/components/messagesView/errorMessageView.tsx
• ui/components/prompts/components/messagesView/messageRoleSwitcher.tsx
• ui/components/prompts/components/messagesView/rootMessageView.tsx
• ui/components/prompts/components/messagesView/systemMessageView.tsx
• ui/components/prompts/components/messagesView/toolCallResultView.tsx
• ui/components/prompts/components/messagesView/toolCallView.tsx
• ui/components/prompts/components/messagesView/userMessageView.tsx
• ui/components/prompts/fragments/sidebar.tsx

🚧 Files skipped from review as they are similar to previous changes (7)

• ui/components/prompts/components/messagesView/assistantMessageView.tsx
• ui/components/prompts/components/messagesView/attachmentViews.tsx
• ui/components/prompts/components/messagesView/toolCallView.tsx
• ui/components/prompts/components/messagesView/rootMessageView.tsx
• ui/components/prompts/components/messagesView/toolCallResultView.tsx
• ui/components/prompts/components/messagesView/userMessageView.tsx
• ui/components/prompts/components/messagesView/systemMessageView.tsx

[akshaydeo]

Merge activity

• Mar 17, 12:54 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Mar 17, 12:55 PM UTC: @akshaydeo merged this pull request with Graphite.