From 16ae996b9364141ce20d76f10d19dcdd99be7b3b Mon Sep 17 00:00:00 2001 From: TJ Date: Tue, 18 Aug 2026 07:21:08 -0700 Subject: [PATCH] fix(site/src/pages/AgentsPage/components): clean up agents composer borders and normalize dropdown pills (#28230) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Audit pass on the Agents chat composer: borders, the history-edit divider, and making the model selector and workspace pill visually consistent with each other and the left chat-list chevron. ## Borders 1. **Remove the composer outline** — drop `border border-border-default/80` from the `chat-composer` container in `AgentChatInput.tsx`. Focus ring, drag-over ring, history-edit warning shadow, rounded corners, background, and `shadow-sm` are unchanged. 2. **Match the skeleton** — drop the same border from `ChatInputSkeleton` in `AgentsSkeletons.tsx` so the loading placeholder stays consistent with the loaded composer. 3. **Neutral history-edit divider** — the divider under the "Editing will delete all subsequent messages..." warning header used `border-border-warning/50` (a harsh, light gold line in dark mode). Switched to `border-border-default/70`, matching the sibling "editing queued message" divider. The warning text/icon keep `content-warning`. ## Model selector <-> workspace pill consistency The model selector (`ModelSelector.tsx`) and workspace pill (`WorkspacePill.tsx`) rendered inconsistently. Normalized both, using the left `ChatSectionHeader` chevron (`size-3.5`) as the reference: 4. **Chevron size** — model was `size-icon-sm` (18px) and forced to 24px by the shared `Button` `cva` (`[&>svg]:size-icon-lg`); workspace was `size-3` (12px). Both now render `size-3.5` (14px). The model override uses the repo's `[&>svg]:!size-3.5 [&>svg]:p-0` convention since the `Button` variant otherwise wins on specificity. 5. **Chevron color** — removed `opacity-60` from the workspace chevron so both are full-opacity `content-secondary` (and `hover:content-primary`). 6. **Chevron rotation** — the model chevron snapped instead of animating because the Button's `[&>svg]:transition-colors` overrode the icon's `transition-transform`. Switched to `[&>svg]:transition` (covers transform and color) so it rotates smoothly like the workspace/sidebar chevrons. 7. **Pill shape + fill + height** — gave the model selector `bg-surface-secondary` (hover `bg-surface-tertiary`) and `rounded-full` to match the workspace pill, and replaced the fixed `h-8` with the pill's height mechanism (`h-7` mobile, `h-auto` + `py-0.5` at desktop). ## Notes - The composer borders pre-existed in the markup; they became more visually apparent after the recent MUI/Emotion removal (#27821) changed the global baseline/theming layer. - Out of scope: `DiffViewer/CommentableDiffViewer.tsx` uses the same `border border-border-default/80` pattern for the "Add a comment" box on diffs. Separate surface, left unchanged. --- > This PR was generated by Coder Agents on behalf of @tracyjohnsonux. --- site/src/pages/AgentsPage/components/AgentChatInput.tsx | 4 ++-- site/src/pages/AgentsPage/components/AgentsSkeletons.tsx | 2 +- .../AgentsPage/components/ChatElements/ModelSelector.tsx | 4 ++-- site/src/pages/AgentsPage/components/WorkspacePill.tsx | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/site/src/pages/AgentsPage/components/AgentChatInput.tsx b/site/src/pages/AgentsPage/components/AgentChatInput.tsx index e8c7f2ce5c..a6b36853eb 100644 --- a/site/src/pages/AgentsPage/components/AgentChatInput.tsx +++ b/site/src/pages/AgentsPage/components/AgentChatInput.tsx @@ -1156,7 +1156,7 @@ export const AgentChatInput: FC = ({ ref={setComposerElement} data-testid="chat-composer" className={cn( - "relative z-10 rounded-2xl border border-border-default/80 bg-surface-secondary sm:bg-surface-secondary/45 p-1 shadow-sm has-[textarea:focus]:ring-2 has-[textarea:focus]:ring-content-link/40", + "relative z-10 rounded-2xl bg-surface-secondary sm:bg-surface-secondary/45 p-1 shadow-sm has-[textarea:focus]:ring-2 has-[textarea:focus]:ring-content-link/40", showAgentSetupNotice && "sm:bg-surface-secondary", isDragging && "ring-2 ring-content-link/40", isEditingHistoryMessage && @@ -1184,7 +1184,7 @@ export const AgentChatInput: FC = ({ )} {isEditingHistoryMessage && editingQueuedMessageID === null && ( -
+
Editing will delete all subsequent messages and restart the diff --git a/site/src/pages/AgentsPage/components/AgentsSkeletons.tsx b/site/src/pages/AgentsPage/components/AgentsSkeletons.tsx index 5f490cda5e..7e37cbe85c 100644 --- a/site/src/pages/AgentsPage/components/AgentsSkeletons.tsx +++ b/site/src/pages/AgentsPage/components/AgentsSkeletons.tsx @@ -142,7 +142,7 @@ const ChatInputSkeleton: FC<{ fullWidth: boolean }> = ({ fullWidth }) => (
-
+
diff --git a/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx b/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx index 7a54115d69..2633ce070b 100644 --- a/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx +++ b/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx @@ -163,13 +163,13 @@ export const ModelSelector: FC = ({ type="button" variant="subtle" className={cn( - "h-8 min-w-0 shrink justify-start gap-0.5 border-0 bg-transparent px-1 text-xs font-medium shadow-none transition-colors hover:bg-transparent hover:text-content-primary focus:ring-0 focus-visible:ring-2 focus-visible:ring-content-link md:w-auto md:shrink-0 md:gap-1.5 [&>svg]:shrink-0 [&>svg]:transition-colors [&>svg]:hover:text-content-primary", + "h-7 md:h-auto min-w-0 shrink justify-start gap-0.5 rounded-full border-0 bg-surface-secondary px-1 py-0.5 text-xs font-medium shadow-none transition-colors hover:bg-surface-tertiary hover:text-content-primary focus:ring-0 focus-visible:ring-2 focus-visible:ring-content-link md:w-auto md:shrink-0 md:gap-1.5 [&>svg]:!size-3.5 [&>svg]:p-0 [&>svg]:shrink-0 [&>svg]:transition [&>svg]:hover:text-content-primary", className, )} onTouchStart={onTriggerTouchStart} > {triggerLabel} - + = ({