fix(site/src/pages/AgentsPage/components): clean up agents composer borders and normalize dropdown pills (#28230)

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

@@ -1156,7 +1156,7 @@ export const AgentChatInput: FC<AgentChatInputProps> = ({
 				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<AgentChatInputProps> = ({
 					</div>
 				)}
 				{isEditingHistoryMessage && editingQueuedMessageID === null && (
-					<div className="flex items-center justify-between border-b border-border-warning/50 px-3 py-1.5">
+					<div className="flex items-center justify-between border-b border-border-default/70 px-3 py-1.5">
 						<span className="flex items-center gap-1.5 text-xs font-medium text-content-warning">
 							<PencilIcon className="size-3.5" />
 							Editing will delete all subsequent messages and restart the

site/src/pages/AgentsPage/components/AgentsSkeletons.tsx

@@ -142,7 +142,7 @@ const ChatInputSkeleton: FC<{ fullWidth: boolean }> = ({ fullWidth }) => (
 		<div
 			className={cn("mx-auto w-full pb-0 sm:pb-4", chatWidthClass(fullWidth))}
 		>
-			<div className="rounded-2xl border border-border-default/80 bg-surface-secondary/45 p-1 shadow-sm">
+			<div className="rounded-2xl bg-surface-secondary/45 p-1 shadow-sm">
 				<div className="min-h-[60px] sm:min-h-24 px-3 py-2" />
 				<div className="flex items-center justify-between gap-2 px-2.5 pb-1.5">
 					<Skeleton className="h-6 w-24 rounded" />

site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx

@@ -163,13 +163,13 @@ export const ModelSelector: FC<ModelSelectorProps> = ({
 					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}
 				>
 					<span className="truncate">{triggerLabel}</span>
-					<ChevronDownIcon open={open} className="size-icon-sm" />
+					<ChevronDownIcon open={open} />
 				</Button>
 			</PopoverTrigger>
 			<PopoverContent

site/src/pages/AgentsPage/components/WorkspacePill.tsx

@@ -149,7 +149,7 @@ export const WorkspacePill: FC<WorkspacePillProps> = ({
 								</span>
 								<ChevronDownIcon
 									className={cn(
-										"hidden size-3 shrink-0 opacity-60 transition-transform md:block",
+										"hidden size-3.5 shrink-0 transition-transform md:block",
 										open && "rotate-180",
 									)}
 								/>