From fbf6fa1d25e88da67af5cc95a215bade1b8d726c Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Fri, 22 May 2026 13:07:14 +0100
Subject: [PATCH] chore(site/src/pages/AgentsPage): use Tailwind size shorthand
 (#25611)

Replace redundant matching Tailwind width and height utilities in
AgentsPage with the `size-*` shorthand. This addresses the AgentsPage
`react-doctor/design-no-redundant-size-axes` findings without changing
rendered dimensions.
---
 .../AgentsPage/AgentAnalyticsPageView.tsx     |  2 +-
 .../pages/AgentsPage/AgentChatPageView.tsx    |  4 +--
 .../AgentsPage/components/AdvisorSettings.tsx |  2 +-
 .../AgentsPage/components/AgentChatInput.tsx  |  6 ++--
 .../AgentsPage/components/AgentPageHeader.tsx |  8 ++---
 .../components/AgentSetupNotice.tsx           |  2 +-
 .../AgentsPage/components/AgentsSkeletons.tsx | 18 +++++-----
 .../components/AttachmentPreview.tsx          | 19 +++++-----
 .../AgentsPage/components/BackButton.tsx      |  2 +-
 .../ChatConversation/AttachmentBlocks.tsx     | 12 +++----
 .../components/ChatCostSummaryView.tsx        |  4 +--
 .../ChatElements/tools/AdvisorTool.tsx        | 10 +++---
 .../tools/AskUserQuestionTool.tsx             | 14 ++++----
 .../ChatElements/tools/ChatSummarizedTool.tsx |  4 +--
 .../ChatElements/tools/ComputerTool.tsx       |  4 +--
 .../tools/CreateWorkspaceTool.tsx             |  8 ++---
 .../ChatElements/tools/EditFilesTool.tsx      |  4 +--
 .../ChatElements/tools/ExecuteTool.tsx        | 25 ++++++-------
 .../tools/InlineDesktopPreview.tsx            |  2 +-
 .../ChatElements/tools/ListTemplatesTool.tsx  |  6 ++--
 .../ChatElements/tools/ProcessOutputTool.tsx  |  4 +--
 .../ChatElements/tools/ProposePlanTool.tsx    |  8 ++---
 .../ChatElements/tools/ReadFileTool.tsx       |  4 +--
 .../ChatElements/tools/ReadSkillTool.tsx      |  6 ++--
 .../ChatElements/tools/ReadTemplateTool.tsx   |  4 +--
 .../ChatElements/tools/RecordingPreview.tsx   | 12 +++----
 .../ChatElements/tools/StartWorkspaceTool.tsx |  6 ++--
 .../ChatElements/tools/SubagentTool.tsx       | 14 ++++----
 .../components/ChatElements/tools/Tool.tsx    |  4 +--
 .../ChatElements/tools/ToolCollapsible.tsx    |  2 +-
 .../ChatElements/tools/ToolIcon.tsx           |  6 ++--
 .../ChatElements/tools/WebSearchSources.tsx   |  4 +--
 .../tools/WorkspaceBuildLogSection.tsx        |  8 ++---
 .../ChatElements/tools/WriteFileTool.tsx      |  4 +--
 .../ChatModelAdminPanel/ModelConfigFields.tsx |  2 +-
 .../ChatModelAdminPanel/ModelForm.tsx         | 22 ++++++------
 .../ModelIdentifierField.tsx                  |  2 +-
 .../ChatModelAdminPanel/ModelsSection.tsx     | 10 +++---
 .../ChatModelAdminPanel/ProviderForm.tsx      |  4 +--
 .../ChatModelAdminPanel/ProviderIcon.tsx      |  4 +--
 .../ChatModelAdminPanel/ProvidersSection.tsx  | 12 +++----
 .../AgentsPage/components/ChatTopBar.tsx      | 28 +++++++--------
 .../components/ChatsSidebar/ChatsSidebar.tsx  |  2 +-
 .../ChatsSidebar/chats/ChatSectionHeader.tsx  |  2 +-
 .../ChatsSidebar/chats/ChatsPanel.tsx         |  8 ++---
 .../ChatsSidebar/dialogs/ChatSearchInput.tsx  |  2 +-
 .../dialogs/ChatSearchResults.tsx             |  8 ++---
 .../ChatsSidebar/dialogs/RenameChatDialog.tsx |  2 +-
 .../ChatsSidebar/filters/FilterDropdown.tsx   |  6 ++--
 .../ChatsSidebar/settings/SettingsNavItem.tsx |  6 ++--
 .../ChatsSidebar/settings/SettingsPanel.tsx   |  4 +--
 .../ChatsSidebar/tabs/SidebarTabView.tsx      | 10 +++---
 .../ChatsSidebar/tree/ChatTreeNode.tsx        | 24 ++++++-------
 .../AgentsPage/components/ChimeButton.tsx     |  2 +-
 .../components/GitPanel/GitPanel.tsx          |  2 +-
 .../LimitsTab/DefaultLimitSection.tsx         |  4 +--
 .../components/MCPServerAdminPanel.tsx        | 36 +++++++++----------
 .../AgentsPage/components/MCPServerPicker.tsx | 14 ++++----
 .../components/QueuedMessagesList.tsx         | 10 +++---
 .../RightPanel/DebugPanel/DebugPanel.tsx      |  2 +-
 .../components/RightPanel/DesktopPanel.tsx    |  8 ++---
 .../UserCompactionThresholdSettings.tsx       |  2 +-
 .../components/VirtualDesktopSettings.tsx     |  2 +-
 .../AgentsPage/components/WebPushButton.tsx   |  2 +-
 64 files changed, 238 insertions(+), 246 deletions(-)

diff --git a/site/src/pages/AgentsPage/AgentAnalyticsPageView.tsx b/site/src/pages/AgentsPage/AgentAnalyticsPageView.tsx
index f6aef93e41..e7e7d5c36a 100644
--- a/site/src/pages/AgentsPage/AgentAnalyticsPageView.tsx
+++ b/site/src/pages/AgentsPage/AgentAnalyticsPageView.tsx
@@ -27,7 +27,7 @@ export const AgentAnalyticsPageView: FC<AgentAnalyticsPageViewProps> = ({
 					description="Review your personal Coder Agents usage and cost breakdowns."
 					action={
 						<div className="flex items-center gap-2 text-xs text-content-secondary">
-							<BarChart3Icon className="h-4 w-4" />
+							<BarChart3Icon className="size-4" />
 							<span>{rangeLabel}</span>
 						</div>
 					}
diff --git a/site/src/pages/AgentsPage/AgentChatPageView.tsx b/site/src/pages/AgentsPage/AgentChatPageView.tsx
index 9226ed560e..a99e3ece9e 100644
--- a/site/src/pages/AgentsPage/AgentChatPageView.tsx
+++ b/site/src/pages/AgentsPage/AgentChatPageView.tsx
@@ -500,13 +500,13 @@ export const AgentChatPageView: FC<AgentChatPageViewProps> = ({
 									aria-live="polite"
 									className="flex shrink-0 items-center gap-2 border-b border-border-warning bg-surface-orange px-4 py-2 text-xs text-content-primary"
 								>
-									<TriangleAlertIcon className="h-4 w-4 shrink-0 text-content-warning" />
+									<TriangleAlertIcon className="size-4 shrink-0 text-content-warning" />
 									{chatOwnerWarning}
 								</div>
 							)}
 							{isArchived && (
 								<div className="flex shrink-0 items-center gap-2 border-b border-border-default bg-surface-secondary px-4 py-2 text-xs text-content-secondary">
-									<ArchiveIcon className="h-4 w-4 shrink-0" />
+									<ArchiveIcon className="size-4 shrink-0" />
 									This agent has been archived and is read-only.
 								</div>
 							)}
diff --git a/site/src/pages/AgentsPage/components/AdvisorSettings.tsx b/site/src/pages/AgentsPage/components/AdvisorSettings.tsx
index 5ce39d5628..6e3659f27c 100644
--- a/site/src/pages/AgentsPage/components/AdvisorSettings.tsx
+++ b/site/src/pages/AgentsPage/components/AdvisorSettings.tsx
@@ -255,7 +255,7 @@ export const AdvisorSettings: FC<AdvisorSettingsProps> = ({
 					Advisor
 				</h3>
 				<Badge size="sm" variant="warning" className="cursor-default">
-					<TriangleAlertIcon className="h-3 w-3" />
+					<TriangleAlertIcon className="size-3" />
 					Experimental feature
 				</Badge>
 			</div>
diff --git a/site/src/pages/AgentsPage/components/AgentChatInput.tsx b/site/src/pages/AgentsPage/components/AgentChatInput.tsx
index d48010a45e..cd272ba232 100644
--- a/site/src/pages/AgentsPage/components/AgentChatInput.tsx
+++ b/site/src/pages/AgentsPage/components/AgentChatInput.tsx
@@ -925,7 +925,7 @@ export const AgentChatInput: FC<AgentChatInputProps> = ({
 				{isEditingHistoryMessage && editingQueuedMessageID === null && (
 					<div className="flex items-center justify-between border-b border-border-warning/50 px-3 py-1.5">
 						<span className="flex items-center gap-1.5 text-xs font-medium text-content-warning">
-							<PencilIcon className="h-3.5 w-3.5" />
+							<PencilIcon className="size-3.5" />
 							Editing will delete all subsequent messages and restart the
 							conversation here.
 						</span>
@@ -938,7 +938,7 @@ export const AgentChatInput: FC<AgentChatInputProps> = ({
 							disabled={isLoading}
 							className="size-6 rounded text-content-warning hover:text-content-primary"
 						>
-							<XIcon className="h-3.5 w-3.5" />
+							<XIcon className="size-3.5" />
 						</Button>
 					</div>
 				)}
@@ -1178,7 +1178,7 @@ export const AgentChatInput: FC<AgentChatInputProps> = ({
 																	}
 																>
 																	{isConnecting ? (
-																		<Spinner loading className="size-2.5" />
+																		<Spinner loading className="h-2.5 w-2.5" />
 																	) : null}
 																	Auth
 																</Button>
diff --git a/site/src/pages/AgentsPage/components/AgentPageHeader.tsx b/site/src/pages/AgentsPage/components/AgentPageHeader.tsx
index c87517e490..7ce5ba02ca 100644
--- a/site/src/pages/AgentsPage/components/AgentPageHeader.tsx
+++ b/site/src/pages/AgentsPage/components/AgentPageHeader.tsx
@@ -122,7 +122,7 @@ export const AgentPageHeader: FC<AgentPageHeaderProps> = ({
 					variant="subtle"
 					size="icon"
 					aria-label={mobileBack.label}
-					className="h-7 w-7 shrink-0 sm:hidden"
+					className="size-7 shrink-0 sm:hidden"
 				>
 					<Link to={mobileBack.to}>
 						<ArrowLeftIcon />
@@ -142,7 +142,7 @@ export const AgentPageHeader: FC<AgentPageHeaderProps> = ({
 					size="icon"
 					onClick={onExpandSidebar}
 					aria-label="Expand sidebar"
-					className="hidden h-7 w-7 min-w-0 shrink-0 sm:inline-flex"
+					className="hidden size-7 min-w-0 shrink-0 sm:inline-flex"
 				>
 					<PanelLeftIcon />
 				</Button>
@@ -159,7 +159,7 @@ export const AgentPageHeader: FC<AgentPageHeaderProps> = ({
 							variant="subtle"
 							size="icon"
 							aria-label="More options"
-							className="h-7 w-7 text-content-secondary hover:text-content-primary sm:hidden"
+							className="size-7 text-content-secondary hover:text-content-primary sm:hidden"
 						>
 							<EllipsisIcon />
 						</Button>
@@ -207,7 +207,7 @@ export const AgentPageHeader: FC<AgentPageHeaderProps> = ({
 								disabled={webPush.loading}
 							>
 								{webPush.loading ? (
-									<Spinner size="sm" loading className="size-icon-sm" />
+									<Spinner size="sm" loading className="h-icon w-icon-sm" />
 								) : webPush.subscribed ? (
 									<BellIcon className="size-icon-sm" />
 								) : (
diff --git a/site/src/pages/AgentsPage/components/AgentSetupNotice.tsx b/site/src/pages/AgentsPage/components/AgentSetupNotice.tsx
index 7cd2357643..5e3abe7b5c 100644
--- a/site/src/pages/AgentsPage/components/AgentSetupNotice.tsx
+++ b/site/src/pages/AgentsPage/components/AgentSetupNotice.tsx
@@ -85,7 +85,7 @@ const AgentSetupStep: FC<AgentSetupStepProps> = ({
 				{isComplete ? (
 					<CheckIcon
 						aria-label="Complete"
-						className="h-5 w-5 text-content-success"
+						className="size-5 text-content-success"
 					/>
 				) : (
 					`${stepNumber}.`
diff --git a/site/src/pages/AgentsPage/components/AgentsSkeletons.tsx b/site/src/pages/AgentsPage/components/AgentsSkeletons.tsx
index 0c40e3fb5b..b1932de2ea 100644
--- a/site/src/pages/AgentsPage/components/AgentsSkeletons.tsx
+++ b/site/src/pages/AgentsPage/components/AgentsSkeletons.tsx
@@ -42,15 +42,15 @@ export const AgentsPageSkeleton: FC = () => {
 				}
 				className="order-2 sm:order-none flex-1 min-h-0 border-t border-border-default sm:flex-none sm:border-t-0 sm:h-full sm:w-[var(--agents-left-sidebar-width)] sm:min-w-[240px] sm:max-w-[min(520px,50vw)] sm:min-h-0 sm:border-b-0"
 			>
-				<div className="relative flex h-full w-full min-h-0 border-0 border-r border-solid overflow-hidden">
+				<div className="relative flex size-full min-h-0 border-0 border-r border-solid overflow-hidden">
 					<div className="absolute inset-0 flex flex-col">
 						<div className="hidden border-b border-border-default px-2 pb-3 pt-1.5 sm:block">
 							<div className="mb-2.5 flex items-center justify-between">
-								<Skeleton className="h-6 w-6 rounded" />
+								<Skeleton className="size-6 rounded" />
 								<div className="flex items-center gap-0.5 -mr-1.5">
-									<Skeleton className="h-7 w-7 rounded" />
-									<Skeleton className="h-7 w-7 rounded" />
-									<Skeleton className="h-7 w-7 rounded" />
+									<Skeleton className="size-7 rounded" />
+									<Skeleton className="size-7 rounded" />
+									<Skeleton className="size-7 rounded" />
 								</div>
 							</div>
 							<Skeleton className="h-9 w-full rounded-md" />
@@ -63,7 +63,7 @@ export const AgentsPageSkeleton: FC = () => {
 										key={i}
 										className="flex items-start gap-2 rounded-md px-2 py-1"
 									>
-										<Skeleton className="mt-0.5 h-5 w-5 shrink-0 rounded-md" />
+										<Skeleton className="mt-0.5 size-5 shrink-0 rounded-md" />
 										<div className="min-w-0 flex-1 space-y-1.5">
 											<Skeleton
 												className="h-3.5"
@@ -173,11 +173,11 @@ export const AgentChatPageSkeleton: FC = () => {
 		>
 			<div className="relative flex h-full min-h-0 min-w-0 flex-1 flex-col">
 				<div className="flex shrink-0 items-center gap-2 px-4 py-1.5">
-					<Skeleton className="h-7 w-7 rounded" />
+					<Skeleton className="size-7 rounded" />
 					<Skeleton className="h-4 w-32" />
 					<div className="flex-1" />
-					<Skeleton className="h-7 w-7 rounded" />
-					<Skeleton className="h-7 w-7 rounded" />
+					<Skeleton className="size-7 rounded" />
+					<Skeleton className="size-7 rounded" />
 				</div>
 				<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
 					<div className="px-4">
diff --git a/site/src/pages/AgentsPage/components/AttachmentPreview.tsx b/site/src/pages/AgentsPage/components/AttachmentPreview.tsx
index aacf5cb6c9..44285ddda8 100644
--- a/site/src/pages/AgentsPage/components/AttachmentPreview.tsx
+++ b/site/src/pages/AgentsPage/components/AttachmentPreview.tsx
@@ -42,7 +42,7 @@ export const ImageThumbnail: FC<{
 		src={previewUrl}
 		alt={name}
 		className={cn(
-			"h-16 w-16 rounded-md border border-border-default object-cover",
+			"size-16 rounded-md border border-border-default object-cover",
 			className,
 		)}
 		onError={onError}
@@ -175,7 +175,7 @@ export const AttachmentPreview: FC<{
 									</span>
 								</button>
 							) : (
-								<div className="flex h-16 w-16 items-center justify-center rounded-md border border-border-default bg-surface-secondary text-xs text-content-secondary">
+								<div className="flex size-16 items-center justify-center rounded-md border border-border-default bg-surface-secondary text-xs text-content-secondary">
 									{file.name.split(".").pop()?.toUpperCase() || "FILE"}
 								</div>
 							)}
@@ -189,13 +189,10 @@ export const AttachmentPreview: FC<{
 										);
 										onInlineText?.(file, nextContent);
 									}}
-									className="absolute -bottom-2 -right-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border-0 bg-surface-primary text-content-secondary shadow-sm opacity-0 transition-opacity hover:bg-surface-secondary hover:text-content-primary group-hover:opacity-100 group-focus-within:opacity-100 focus:opacity-100"
+									className="absolute -bottom-2 -right-2 flex size-6 cursor-pointer items-center justify-center rounded-full border-0 bg-surface-primary text-content-secondary shadow-sm opacity-0 transition-opacity hover:bg-surface-secondary hover:text-content-primary group-hover:opacity-100 group-focus-within:opacity-100 focus:opacity-100"
 									aria-label="Paste inline"
 								>
-									<ClipboardPasteIcon
-										aria-hidden="true"
-										className="h-3.5 w-3.5"
-									/>
+									<ClipboardPasteIcon aria-hidden="true" className="size-3.5" />
 								</button>
 							)}
 							{(uploadState?.status === "pending" ||
@@ -213,7 +210,7 @@ export const AttachmentPreview: FC<{
 											role="img"
 											aria-label="Upload error"
 										>
-											<AlertTriangleIcon className="h-5 w-5 text-content-warning" />
+											<AlertTriangleIcon className="size-5 text-content-warning" />
 										</div>
 									</TooltipTrigger>
 									<TooltipContent side="top">
@@ -226,10 +223,10 @@ export const AttachmentPreview: FC<{
 							<button
 								type="button"
 								onClick={() => onRemove(file)}
-								className="absolute -right-2 -top-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border-0 bg-surface-primary text-content-secondary shadow-sm opacity-0 transition-opacity hover:bg-surface-secondary hover:text-content-primary group-hover:opacity-100 group-focus-within:opacity-100 focus:opacity-100"
+								className="absolute -right-2 -top-2 flex size-6 cursor-pointer items-center justify-center rounded-full border-0 bg-surface-primary text-content-secondary shadow-sm opacity-0 transition-opacity hover:bg-surface-secondary hover:text-content-primary group-hover:opacity-100 group-focus-within:opacity-100 focus:opacity-100"
 								aria-label={`Remove ${file.name}`}
 							>
-								<XIcon aria-hidden="true" className="h-3.5 w-3.5" />
+								<XIcon aria-hidden="true" className="size-3.5" />
 							</button>
 						</div>
 					);
@@ -239,7 +236,7 @@ export const AttachmentPreview: FC<{
 				<div className="space-y-1 px-3 pb-2 text-xs text-content-warning">
 					{draftWarnings.map((warning) => (
 						<div key={warning} className="flex items-start gap-1.5">
-							<AlertTriangleIcon className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+							<AlertTriangleIcon className="mt-0.5 size-3.5 shrink-0" />
 							<span>{warning}</span>
 						</div>
 					))}
diff --git a/site/src/pages/AgentsPage/components/BackButton.tsx b/site/src/pages/AgentsPage/components/BackButton.tsx
index dce4b56b0d..8ae54e4772 100644
--- a/site/src/pages/AgentsPage/components/BackButton.tsx
+++ b/site/src/pages/AgentsPage/components/BackButton.tsx
@@ -11,7 +11,7 @@ export const BackButton: FC<BackButtonProps> = ({ onClick }) => (
 		onClick={onClick}
 		className="mb-4 inline-flex cursor-pointer items-center gap-0.5 border-0 bg-transparent p-0 text-sm text-content-secondary transition-colors hover:text-content-primary"
 	>
-		<ChevronLeftIcon className="h-4 w-4" />
+		<ChevronLeftIcon className="size-4" />
 		Back
 	</button>
 );
diff --git a/site/src/pages/AgentsPage/components/ChatConversation/AttachmentBlocks.tsx b/site/src/pages/AgentsPage/components/ChatConversation/AttachmentBlocks.tsx
index ce8c3e22d9..0ffc8b10a9 100644
--- a/site/src/pages/AgentsPage/components/ChatConversation/AttachmentBlocks.tsx
+++ b/site/src/pages/AgentsPage/components/ChatConversation/AttachmentBlocks.tsx
@@ -147,9 +147,9 @@ const DownloadOverlay: FC<{
 		download={downloadName}
 		onClick={(event) => event.stopPropagation()}
 		aria-label={`Download ${displayName}`}
-		className="invisible absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded bg-surface-primary/80 text-content-secondary opacity-0 shadow-sm backdrop-blur-sm transition-opacity hover:text-content-primary group-hover/attachment:visible group-hover/attachment:opacity-100 group-focus-within/attachment:visible group-focus-within/attachment:opacity-100 [@media(hover:none)]:visible [@media(hover:none)]:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link"
+		className="invisible absolute right-1 top-1 flex size-6 items-center justify-center rounded bg-surface-primary/80 text-content-secondary opacity-0 shadow-sm backdrop-blur-sm transition-opacity hover:text-content-primary group-hover/attachment:visible group-hover/attachment:opacity-100 group-focus-within/attachment:visible group-focus-within/attachment:opacity-100 [@media(hover:none)]:visible [@media(hover:none)]:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link"
 	>
-		<DownloadIcon aria-hidden="true" className="h-3.5 w-3.5" />
+		<DownloadIcon aria-hidden="true" className="size-3.5" />
 	</a>
 );
 
@@ -194,7 +194,7 @@ const AttachmentFallbackTile: FC<{
 	state: AttachmentFailure;
 	labels: AttachmentFailureLabels;
 	className?: string;
-}> = ({ state, labels, className = "h-16 w-16" }) => {
+}> = ({ state, labels, className = "size-16" }) => {
 	const label = state.kind === "expired" ? labels.expired : labels.failed;
 
 	const tile = (
@@ -534,7 +534,7 @@ const FileCard: FC<{
 			aria-label={`Download ${displayName}`}
 			className="inline-flex h-16 max-w-sm items-center gap-3 rounded-md border border-solid border-border-default bg-surface-tertiary px-3 py-2 no-underline transition-colors hover:bg-surface-quaternary"
 		>
-			<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-surface-secondary">
+			<div className="flex size-10 shrink-0 items-center justify-center rounded-md bg-surface-secondary">
 				{badgeLabel ? (
 					<span className="text-[10px] font-semibold tracking-wide text-content-secondary">
 						{badgeLabel}
@@ -542,7 +542,7 @@ const FileCard: FC<{
 				) : (
 					<FileIcon
 						aria-hidden="true"
-						className="h-4 w-4 text-content-secondary"
+						className="size-4 text-content-secondary"
 					/>
 				)}
 			</div>
@@ -554,7 +554,7 @@ const FileCard: FC<{
 			</div>
 			<DownloadIcon
 				aria-hidden="true"
-				className="h-4 w-4 shrink-0 text-content-secondary"
+				className="size-4 shrink-0 text-content-secondary"
 			/>
 		</a>
 	);
diff --git a/site/src/pages/AgentsPage/components/ChatCostSummaryView.tsx b/site/src/pages/AgentsPage/components/ChatCostSummaryView.tsx
index 63fe96e81a..16f854e82f 100644
--- a/site/src/pages/AgentsPage/components/ChatCostSummaryView.tsx
+++ b/site/src/pages/AgentsPage/components/ChatCostSummaryView.tsx
@@ -255,7 +255,7 @@ export const ChatCostSummaryView: FC<ChatCostSummaryViewProps> = ({
 
 			{summary.unpriced_message_count > 0 && (
 				<div className="flex items-start gap-3 rounded-lg border border-border-warning bg-surface-warning p-4 text-sm text-content-primary">
-					<TriangleAlertIcon className="h-5 w-5 shrink-0 text-content-warning" />
+					<TriangleAlertIcon className="size-5 shrink-0 text-content-warning" />
 					<span>
 						{summary.unpriced_message_count} message
 						{summary.unpriced_message_count === 1 ? "" : "s"} could not be
@@ -265,7 +265,7 @@ export const ChatCostSummaryView: FC<ChatCostSummaryViewProps> = ({
 			)}
 
 			<div className="flex items-start gap-3 p-4 text-sm text-content-secondary">
-				<InfoIcon className="h-5 w-5 shrink-0" />
+				<InfoIcon className="size-5 shrink-0" />
 				<span>
 					Automatic title generation uses lightweight models and is not counted
 					towards usage limits.
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/AdvisorTool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/AdvisorTool.tsx
index 4ad6e0c30a..1dac5ba647 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/AdvisorTool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/AdvisorTool.tsx
@@ -94,11 +94,11 @@ export const AdvisorTool: React.FC<AdvisorToolProps> = ({
 						</span>
 					</div>
 					{showLimitReached ? (
-						<TriangleAlertIcon className="mt-0.5 h-3.5 w-3.5 shrink-0 text-content-warning" />
+						<TriangleAlertIcon className="mt-0.5 size-3.5 shrink-0 text-content-warning" />
 					) : showError ? (
-						<CircleAlertIcon className="mt-0.5 h-3.5 w-3.5 shrink-0 text-content-destructive" />
+						<CircleAlertIcon className="mt-0.5 size-3.5 shrink-0 text-content-destructive" />
 					) : isRunning ? (
-						<LoaderIcon className="mt-0.5 h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-content-secondary" />
+						<LoaderIcon className="mt-0.5 size-3.5 shrink-0 animate-spin motion-reduce:animate-none text-content-secondary" />
 					) : null}
 				</>
 			)}
@@ -119,7 +119,7 @@ export const AdvisorTool: React.FC<AdvisorToolProps> = ({
 							role="status"
 							className="flex items-start gap-3 rounded-md border border-solid border-border-warning bg-surface-orange p-3 text-sm text-content-primary"
 						>
-							<TriangleAlertIcon className="mt-0.5 h-4 w-4 shrink-0 text-content-warning" />
+							<TriangleAlertIcon className="mt-0.5 size-4 shrink-0 text-content-warning" />
 							<div className="space-y-1">
 								<p className="m-0 font-medium">Advisor limit reached.</p>
 								<p className="m-0 text-content-primary">
@@ -132,7 +132,7 @@ export const AdvisorTool: React.FC<AdvisorToolProps> = ({
 							role="alert"
 							className="flex items-start gap-3 rounded-md border border-solid border-border-destructive bg-surface-red p-3 text-sm text-content-primary"
 						>
-							<CircleAlertIcon className="mt-0.5 h-4 w-4 shrink-0 text-content-destructive" />
+							<CircleAlertIcon className="mt-0.5 size-4 shrink-0 text-content-destructive" />
 							<div className="space-y-1">
 								<p className="m-0 font-medium">Advisor request failed.</p>
 								<p className="m-0 text-content-primary [overflow-wrap:anywhere]">
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/AskUserQuestionTool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/AskUserQuestionTool.tsx
index 59562edd25..6bb5b1a07c 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/AskUserQuestionTool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/AskUserQuestionTool.tsx
@@ -292,7 +292,7 @@ const QuestionStep: FC<QuestionStepProps> = ({
 			<div className="flex items-start gap-1.5 text-content-secondary">
 				<MessageCircleQuestionIcon
 					aria-hidden="true"
-					className="mt-0.5 h-4 w-4 shrink-0"
+					className="mt-0.5 size-4 shrink-0"
 				/>
 				<p
 					id={questionTextId}
@@ -355,7 +355,7 @@ const AnsweredQuestionText: FC<AnsweredQuestionTextProps> = ({
 		<div className="flex items-start gap-1.5 text-content-secondary">
 			<MessageCircleQuestionIcon
 				aria-hidden="true"
-				className="mt-0.5 h-4 w-4 shrink-0"
+				className="mt-0.5 size-4 shrink-0"
 			/>
 			<p
 				id={`${idPrefix}-question-${questionIndex}-text`}
@@ -543,7 +543,7 @@ export const AskUserQuestionTool: FC<AskUserQuestionToolProps> = ({
 				>
 					<TriangleAlertIcon
 						aria-label="Error"
-						className="h-3.5 w-3.5 shrink-0 text-content-secondary"
+						className="size-3.5 shrink-0 text-content-secondary"
 					/>
 					<span>{errorMessage || "Failed to ask questions"}</span>
 				</TranscriptRow>
@@ -561,7 +561,7 @@ export const AskUserQuestionTool: FC<AskUserQuestionToolProps> = ({
 						</span>
 						<LoaderIcon
 							data-testid="ask-user-question-loading-icon"
-							className="h-3.5 w-3.5 shrink-0 animate-spin text-content-secondary motion-reduce:animate-none"
+							className="size-3.5 shrink-0 animate-spin text-content-secondary motion-reduce:animate-none"
 						/>
 					</TranscriptRow>
 				) : (
@@ -629,7 +629,7 @@ export const AskUserQuestionTool: FC<AskUserQuestionToolProps> = ({
 					role="alert"
 					className="mt-3 flex items-center gap-1.5 text-[13px] text-content-destructive"
 				>
-					<TriangleAlertIcon className="h-3.5 w-3.5 shrink-0" />
+					<TriangleAlertIcon className="size-3.5 shrink-0" />
 					<span>{submitError}</span>
 				</div>
 			)}
@@ -664,7 +664,7 @@ export const AskUserQuestionTool: FC<AskUserQuestionToolProps> = ({
 							disabled={!canSubmitAllAnswers || isSubmitting}
 						>
 							{isSubmitting && (
-								<LoaderIcon className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+								<LoaderIcon className="size-3.5 animate-spin motion-reduce:animate-none" />
 							)}
 							{isSubmitting ? "Submitting..." : "Submit"}
 						</Button>
@@ -683,7 +683,7 @@ export const AskUserQuestionTool: FC<AskUserQuestionToolProps> = ({
 					</span>
 					<LoaderIcon
 						data-testid="ask-user-question-loading-icon"
-						className="h-3.5 w-3.5 shrink-0 animate-spin text-content-secondary motion-reduce:animate-none"
+						className="size-3.5 shrink-0 animate-spin text-content-secondary motion-reduce:animate-none"
 					/>
 				</TranscriptRow>
 			)}
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/ChatSummarizedTool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/ChatSummarizedTool.tsx
index 5a3d24d32e..3319ddfd46 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/ChatSummarizedTool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/ChatSummarizedTool.tsx
@@ -35,7 +35,7 @@ export const ChatSummarizedTool: React.FC<{
 					{isError && (
 						<Tooltip>
 							<TooltipTrigger asChild>
-								<TriangleAlertIcon className="h-3.5 w-3.5 shrink-0 text-current" />
+								<TriangleAlertIcon className="size-3.5 shrink-0 text-current" />
 							</TooltipTrigger>
 							<TooltipContent>
 								{errorMessage || "Failed to summarize conversation"}
@@ -43,7 +43,7 @@ export const ChatSummarizedTool: React.FC<{
 						</Tooltip>
 					)}
 					{isRunning && (
-						<LoaderIcon className="h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
+						<LoaderIcon className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
 					)}
 				</>
 			}
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/ComputerTool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/ComputerTool.tsx
index 06761eecbf..ae70532609 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/ComputerTool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/ComputerTool.tsx
@@ -45,7 +45,7 @@ export const ComputerTool: React.FC<{
 					{isError && (
 						<Tooltip>
 							<TooltipTrigger asChild>
-								<TriangleAlertIcon className="h-3.5 w-3.5 shrink-0 text-current" />
+								<TriangleAlertIcon className="size-3.5 shrink-0 text-current" />
 							</TooltipTrigger>
 							<TooltipContent>
 								{errorMessage || "Failed to take screenshot"}
@@ -53,7 +53,7 @@ export const ComputerTool: React.FC<{
 						</Tooltip>
 					)}
 					{isRunning && (
-						<LoaderIcon className="h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
+						<LoaderIcon className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
 					)}
 				</>
 			}
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/CreateWorkspaceTool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/CreateWorkspaceTool.tsx
index 31c8566916..85a762705d 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/CreateWorkspaceTool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/CreateWorkspaceTool.tsx
@@ -72,12 +72,12 @@ export const CreateWorkspaceTool: React.FC<{
 
 	const header = (
 		<>
-			<MonitorIcon className="h-4 w-4 shrink-0 text-current" />
+			<MonitorIcon className="size-4 shrink-0 text-current" />
 			<span className="text-[13px]">{label}</span>
 			{isError && (
 				<Tooltip>
 					<TooltipTrigger asChild>
-						<TriangleAlertIcon className="h-3.5 w-3.5 shrink-0 text-current" />
+						<TriangleAlertIcon className="size-3.5 shrink-0 text-current" />
 					</TooltipTrigger>
 					<TooltipContent>
 						{errorMessage || "Failed to create workspace"}
@@ -85,7 +85,7 @@ export const CreateWorkspaceTool: React.FC<{
 				</Tooltip>
 			)}
 			{isRunning && (
-				<LoaderIcon className="h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
+				<LoaderIcon className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
 			)}
 			{workspaceLink && !isRunning && (
 				<Link
@@ -94,7 +94,7 @@ export const CreateWorkspaceTool: React.FC<{
 					className="ml-1 inline-flex align-middle text-content-secondary opacity-50 transition-opacity hover:opacity-100"
 					aria-label="View workspace"
 				>
-					<ExternalLinkIcon className="h-3 w-3" />
+					<ExternalLinkIcon className="size-3" />
 				</Link>
 			)}
 		</>
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/EditFilesTool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/EditFilesTool.tsx
index 4d3f6d30cd..4f9f69cced 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/EditFilesTool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/EditFilesTool.tsx
@@ -73,7 +73,7 @@ export const EditFilesTool: React.FC<{
 					{isError && (
 						<Tooltip>
 							<TooltipTrigger asChild>
-								<TriangleAlertIcon className="h-3.5 w-3.5 shrink-0 text-current" />
+								<TriangleAlertIcon className="size-3.5 shrink-0 text-current" />
 							</TooltipTrigger>
 							<TooltipContent>
 								{errorMessage || "Failed to edit files"}
@@ -81,7 +81,7 @@ export const EditFilesTool: React.FC<{
 						</Tooltip>
 					)}
 					{isRunning && (
-						<LoaderIcon className="h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
+						<LoaderIcon className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
 					)}
 				</>
 			}
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/ExecuteTool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/ExecuteTool.tsx
index cd9bb6f51b..7a38ce4be7 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/ExecuteTool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/ExecuteTool.tsx
@@ -118,7 +118,7 @@ const ExecuteToolInner: React.FC<ExecuteToolInnerProps> = ({
 			</TranscriptRow>
 			<TranscriptRow className="col-start-2 row-start-1 shrink-0 gap-1">
 				{isRunning && (
-					<LoaderIcon className="h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-content-secondary" />
+					<LoaderIcon className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none text-content-secondary" />
 				)}
 				{showFailureIndicator && (
 					<Tooltip>
@@ -128,10 +128,7 @@ const ExecuteToolInner: React.FC<ExecuteToolInnerProps> = ({
 								role="img"
 								className="flex shrink-0 text-content-destructive"
 							>
-								<TriangleAlertIcon
-									aria-hidden
-									className="h-3.5 w-3.5 shrink-0"
-								/>
+								<TriangleAlertIcon aria-hidden className="size-3.5 shrink-0" />
 							</span>
 						</TooltipTrigger>
 						<TooltipContent>Command failed</TooltipContent>
@@ -145,7 +142,7 @@ const ExecuteToolInner: React.FC<ExecuteToolInnerProps> = ({
 								role="img"
 								className="flex shrink-0 text-content-secondary"
 							>
-								<LayersIcon aria-hidden className="h-3.5 w-3.5 shrink-0" />
+								<LayersIcon aria-hidden className="size-3.5 shrink-0" />
 							</span>
 						</TooltipTrigger>
 						<TooltipContent>Running in background</TooltipContent>
@@ -210,7 +207,7 @@ const ShellCommandLine: React.FC<{
 			{expanded !== undefined && (
 				<ChevronDownIcon
 					className={cn(
-						"h-3 w-3 shrink-0 text-current transition-transform",
+						"size-3 shrink-0 text-current transition-transform",
 						expanded ? "rotate-0" : "-rotate-90",
 					)}
 				/>
@@ -264,7 +261,7 @@ export const ExecuteAuthRequiredTool: React.FC<{
 	return (
 		<div className="w-full overflow-hidden rounded-md border border-solid border-border-default bg-surface-primary">
 			<div className="flex flex-wrap items-center gap-2 px-3 py-2">
-				<CircleAlertIcon className="h-4 w-4 shrink-0 text-content-warning" />
+				<CircleAlertIcon className="size-4 shrink-0 text-content-warning" />
 				<span className="text-[13px] text-content-primary">
 					Authenticate with {providerLabel} to continue this command.
 				</span>
@@ -278,7 +275,7 @@ export const ExecuteAuthRequiredTool: React.FC<{
 					}
 					className="inline-flex cursor-pointer items-center gap-1 text-xs"
 				>
-					<ExternalLinkIcon className="h-3.5 w-3.5 shrink-0" />
+					<ExternalLinkIcon className="size-3.5 shrink-0" />
 					Authenticate with {providerLabel}
 				</Button>
 				<a
@@ -287,7 +284,7 @@ export const ExecuteAuthRequiredTool: React.FC<{
 					rel="noreferrer"
 					className="inline-flex items-center gap-1 text-xs text-content-link no-underline hover:underline"
 				>
-					<ExternalLinkIcon className="h-3.5 w-3.5 shrink-0" />
+					<ExternalLinkIcon className="size-3.5 shrink-0" />
 					Open authentication link
 				</a>
 			</div>
@@ -331,23 +328,23 @@ export const WaitForExternalAuthTool: React.FC<{
 	const isRunning = status === "running";
 	let label = `Waiting for ${providerLabel} authentication...`;
 	let icon: React.ReactNode = (
-		<LoaderIcon className="h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-content-link" />
+		<LoaderIcon className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none text-content-link" />
 	);
 	if (isError) {
 		label =
 			errorMessage ||
 			`Failed while waiting for ${providerLabel} authentication`;
 		icon = (
-			<TriangleAlertIcon className="h-3.5 w-3.5 shrink-0 text-content-secondary" />
+			<TriangleAlertIcon className="size-3.5 shrink-0 text-content-secondary" />
 		);
 	} else if (timedOut) {
 		label = `Timed out waiting for ${providerLabel} authentication`;
 		icon = (
-			<CircleAlertIcon className="h-3.5 w-3.5 shrink-0 text-content-warning" />
+			<CircleAlertIcon className="size-3.5 shrink-0 text-content-warning" />
 		);
 	} else if (authenticated && !isRunning) {
 		label = `Authenticated with ${providerLabel}`;
-		icon = <CheckIcon className="h-3.5 w-3.5 shrink-0 text-content-success" />;
+		icon = <CheckIcon className="size-3.5 shrink-0 text-content-success" />;
 	}
 
 	return (
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/InlineDesktopPreview.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/InlineDesktopPreview.tsx
index 05e2b1500a..0a887c52ca 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/InlineDesktopPreview.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/InlineDesktopPreview.tsx
@@ -89,7 +89,7 @@ export const InlineDesktopPreview: React.FC<{
 					<span className="text-[13px] font-medium text-white opacity-0 drop-shadow-md transition-opacity group-hover/preview:opacity-100">
 						View desktop
 					</span>
-					<PanelRightOpenIcon className="h-4 w-4 text-white opacity-0 drop-shadow-md transition-opacity group-hover/preview:opacity-100" />
+					<PanelRightOpenIcon className="size-4 text-white opacity-0 drop-shadow-md transition-opacity group-hover/preview:opacity-100" />
 				</button>
 			)}
 		</div>
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/ListTemplatesTool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/ListTemplatesTool.tsx
index c600feeddb..5c40aadad5 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/ListTemplatesTool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/ListTemplatesTool.tsx
@@ -40,7 +40,7 @@ export const ListTemplatesTool: React.FC<{
 					{isError && (
 						<Tooltip>
 							<TooltipTrigger asChild>
-								<TriangleAlertIcon className="h-3.5 w-3.5 shrink-0 text-current" />
+								<TriangleAlertIcon className="size-3.5 shrink-0 text-current" />
 							</TooltipTrigger>
 							<TooltipContent>
 								{errorMessage || "Failed to list templates"}
@@ -48,7 +48,7 @@ export const ListTemplatesTool: React.FC<{
 						</Tooltip>
 					)}
 					{isRunning && (
-						<LoaderIcon className="h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
+						<LoaderIcon className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
 					)}
 				</>
 			}
@@ -79,7 +79,7 @@ export const ListTemplatesTool: React.FC<{
 								className="flex items-center gap-1.5 text-[13px] text-content-secondary opacity-50 transition-opacity hover:opacity-100"
 							>
 								<span>{templateName}</span>
-								<ExternalLinkIcon className="h-3 w-3 shrink-0" />
+								<ExternalLinkIcon className="size-3 shrink-0" />
 							</Link>
 						</div>
 					);
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/ProcessOutputTool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/ProcessOutputTool.tsx
index c0e610d870..ecf7eb15cc 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/ProcessOutputTool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/ProcessOutputTool.tsx
@@ -94,7 +94,7 @@ const ProcessOutputToolInner: React.FC<ProcessOutputToolInnerProps> = ({
 				hasHeaderActions ? (
 					<>
 						{isRunning && (
-							<LoaderIcon className="h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-content-secondary" />
+							<LoaderIcon className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none text-content-secondary" />
 						)}
 						{killedBySignal && !isRunning && (
 							<Tooltip>
@@ -156,7 +156,7 @@ const ProcessOutputToolInner: React.FC<ProcessOutputToolInnerProps> = ({
 				>
 					<ChevronDownIcon
 						className={cn(
-							"h-3 w-3 transition-transform",
+							"size-3 transition-transform",
 							outputFullyExpanded && "rotate-180",
 						)}
 					/>
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/ProposePlanTool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/ProposePlanTool.tsx
index d3c2e41fc4..d4a92d4f46 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/ProposePlanTool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/ProposePlanTool.tsx
@@ -82,7 +82,7 @@ export const ProposePlanTool: React.FC<{
 						<TooltipTrigger asChild>
 							<TriangleAlertIcon
 								aria-label="Error"
-								className="h-3.5 w-3.5 shrink-0 text-content-secondary"
+								className="size-3.5 shrink-0 text-content-secondary"
 							/>
 						</TooltipTrigger>
 						<TooltipContent>
@@ -91,7 +91,7 @@ export const ProposePlanTool: React.FC<{
 					</Tooltip>
 				)}
 				{isRunning && (
-					<LoaderIcon className="h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
+					<LoaderIcon className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
 				)}
 			</TranscriptRow>
 			{hasDisplayContent ? (
@@ -115,7 +115,7 @@ export const ProposePlanTool: React.FC<{
 										aria-label="Implement plan"
 									>
 										{implementPlanMutation.isPending ? (
-											<LoaderIcon className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+											<LoaderIcon className="size-3.5 animate-spin motion-reduce:animate-none" />
 										) : (
 											<PlayIcon />
 										)}
@@ -139,7 +139,7 @@ export const ProposePlanTool: React.FC<{
 			)}
 			{fetchLoading && (
 				<TranscriptRow className="gap-1.5 text-[13px] text-content-secondary">
-					<LoaderIcon className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+					<LoaderIcon className="size-3.5 animate-spin motion-reduce:animate-none" />
 					Loading plan…
 				</TranscriptRow>
 			)}
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/ReadFileTool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/ReadFileTool.tsx
index 6117683103..8d7243fa91 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/ReadFileTool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/ReadFileTool.tsx
@@ -43,7 +43,7 @@ export const ReadFileTool: React.FC<{
 					{isError && (
 						<Tooltip>
 							<TooltipTrigger asChild>
-								<TriangleAlertIcon className="h-3.5 w-3.5 shrink-0 text-current" />
+								<TriangleAlertIcon className="size-3.5 shrink-0 text-current" />
 							</TooltipTrigger>
 							<TooltipContent>
 								{errorMessage || "Failed to read file"}
@@ -51,7 +51,7 @@ export const ReadFileTool: React.FC<{
 						</Tooltip>
 					)}
 					{isRunning && (
-						<LoaderIcon className="h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
+						<LoaderIcon className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
 					)}
 				</>
 			}
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/ReadSkillTool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/ReadSkillTool.tsx
index 2caabb419f..59df11ab67 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/ReadSkillTool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/ReadSkillTool.tsx
@@ -26,14 +26,14 @@ export const ReadSkillTool: React.FC<{
 			hasContent={hasContent}
 			header={
 				<>
-					<BookOpenIcon className="h-4 w-4 shrink-0 text-current" />
+					<BookOpenIcon className="size-4 shrink-0 text-current" />
 					<span className="text-[13px]">
 						{isRunning ? `Reading ${label}…` : `Read ${label}`}
 					</span>
 					{isError && (
 						<Tooltip>
 							<TooltipTrigger asChild>
-								<TriangleAlertIcon className="h-3.5 w-3.5 shrink-0 text-current" />
+								<TriangleAlertIcon className="size-3.5 shrink-0 text-current" />
 							</TooltipTrigger>
 							<TooltipContent>
 								{errorMessage || "Failed to read skill"}
@@ -41,7 +41,7 @@ export const ReadSkillTool: React.FC<{
 						</Tooltip>
 					)}
 					{isRunning && (
-						<LoaderIcon className="h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
+						<LoaderIcon className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
 					)}
 				</>
 			}
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/ReadTemplateTool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/ReadTemplateTool.tsx
index 6bcf356ddf..f8c24bd996 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/ReadTemplateTool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/ReadTemplateTool.tsx
@@ -32,7 +32,7 @@ export const ReadTemplateTool: React.FC<{
 			{isError && (
 				<Tooltip>
 					<TooltipTrigger asChild>
-						<TriangleAlertIcon className="h-3.5 w-3.5 shrink-0 text-current" />
+						<TriangleAlertIcon className="size-3.5 shrink-0 text-current" />
 					</TooltipTrigger>
 					<TooltipContent>
 						{errorMessage || "Failed to read template"}
@@ -40,7 +40,7 @@ export const ReadTemplateTool: React.FC<{
 				</Tooltip>
 			)}
 			{isRunning && (
-				<LoaderIcon className="h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
+				<LoaderIcon className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
 			)}
 		</TranscriptRow>
 	);
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/RecordingPreview.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/RecordingPreview.tsx
index 362107096f..e9d1c15906 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/RecordingPreview.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/RecordingPreview.tsx
@@ -44,20 +44,20 @@ export const RecordingPreview: React.FC<RecordingPreviewProps> = ({
 			style={{ aspectRatio: DEFAULT_ASPECT, height: PREVIEW_HEIGHT }}
 		>
 			{thumbnailError ? (
-				<div className="flex h-full w-full items-center justify-center gap-1.5 bg-surface-secondary text-xs text-content-secondary">
-					<ImageOffIcon className="h-3 w-3" />
+				<div className="flex size-full items-center justify-center gap-1.5 bg-surface-secondary text-xs text-content-secondary">
+					<ImageOffIcon className="size-3" />
 					Thumbnail unavailable
 				</div>
 			) : thumbnailFileId ? (
 				<img
 					src={thumbnailSrcOverride ?? getChatFileURL(thumbnailFileId)}
 					alt="Recording thumbnail"
-					className="h-full w-full pointer-events-none object-cover"
+					className="size-full pointer-events-none object-cover"
 					onError={() => setThumbnailError(true)}
 				/>
 			) : (
 				// No thumbnail available — neutral gray placeholder.
-				<div className="h-full w-full bg-surface-secondary" />
+				<div className="size-full bg-surface-secondary" />
 			)}
 			<button
 				type="button"
@@ -68,8 +68,8 @@ export const RecordingPreview: React.FC<RecordingPreviewProps> = ({
 				}}
 				className="absolute inset-0 z-10 flex cursor-pointer items-center justify-center border-0 bg-black/0 p-0 transition-colors hover:bg-black/50"
 			>
-				<span className="flex h-10 w-10 items-center justify-center rounded-full bg-black/60">
-					<PlayIcon className="h-5 w-5 text-white" />
+				<span className="flex size-10 items-center justify-center rounded-full bg-black/60">
+					<PlayIcon className="size-5 text-white" />
 				</span>
 			</button>
 			<VideoLightbox
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/StartWorkspaceTool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/StartWorkspaceTool.tsx
index 7295ac2884..7cb14e41e1 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/StartWorkspaceTool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/StartWorkspaceTool.tsx
@@ -42,12 +42,12 @@ export const StartWorkspaceTool: FC<StartWorkspaceToolProps> = ({
 
 	const header = (
 		<>
-			<MonitorPlayIcon className="h-4 w-4 shrink-0 text-current" />
+			<MonitorPlayIcon className="size-4 shrink-0 text-current" />
 			<span className="text-[13px]">{label}</span>
 			{isError && (
 				<Tooltip>
 					<TooltipTrigger asChild>
-						<TriangleAlertIcon className="h-3.5 w-3.5 shrink-0 text-current" />
+						<TriangleAlertIcon className="size-3.5 shrink-0 text-current" />
 					</TooltipTrigger>
 					<TooltipContent>
 						{errorMessage || "Failed to start workspace"}
@@ -55,7 +55,7 @@ export const StartWorkspaceTool: FC<StartWorkspaceToolProps> = ({
 				</Tooltip>
 			)}
 			{isRunning && (
-				<LoaderIcon className="h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
+				<LoaderIcon className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
 			)}
 		</>
 	);
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/SubagentTool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/SubagentTool.tsx
index 2e7386b2bb..a6a558a60f 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/SubagentTool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/SubagentTool.tsx
@@ -125,20 +125,20 @@ const SubagentStatusIcon: React.FC<{
 	const subagentCompleted = isSubagentSuccessStatus(subagentStatus);
 	const DefaultIcon = iconKind === "monitor" ? MonitorIcon : BotIcon;
 	if (isTimeout && !subagentCompleted) {
-		return <ClockIcon className="h-4 w-4 shrink-0 text-current" />;
+		return <ClockIcon className="size-4 shrink-0 text-current" />;
 	}
 	if ((isError && !subagentCompleted) || toolStatus === "error") {
-		return <CircleXIcon className="h-4 w-4 shrink-0 text-current" />;
+		return <CircleXIcon className="size-4 shrink-0 text-current" />;
 	}
 	if (toolStatus === "running") {
 		if (showDesktopPreview) {
-			return <MonitorIcon className="h-4 w-4 shrink-0 text-current" />;
+			return <MonitorIcon className="size-4 shrink-0 text-current" />;
 		}
 		return (
-			<LoaderIcon className="h-4 w-4 shrink-0 animate-spin motion-reduce:animate-none text-content-link" />
+			<LoaderIcon className="size-4 shrink-0 animate-spin motion-reduce:animate-none text-content-link" />
 		);
 	}
-	return <DefaultIcon className="h-4 w-4 shrink-0 text-current" />;
+	return <DefaultIcon className="size-4 shrink-0 text-current" />;
 };
 
 /**
@@ -228,14 +228,14 @@ export const SubagentTool: React.FC<{
 								className="ml-1 inline-flex align-middle text-content-secondary opacity-50 transition-opacity hover:opacity-100"
 								aria-label="View agent"
 							>
-								<ExternalLinkIcon className="h-3 w-3" />
+								<ExternalLinkIcon className="size-3" />
 							</Link>
 						)}
 					</span>
 					{hasExpandableContent && (
 						<ChevronDownIcon
 							className={cn(
-								"h-3 w-3 shrink-0 text-current transition-transform",
+								"size-3 shrink-0 text-current transition-transform",
 								expanded ? "rotate-0" : "-rotate-90",
 							)}
 						/>
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/Tool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/Tool.tsx
index c591d59a1a..4f0d0dc84e 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/Tool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/Tool.tsx
@@ -879,13 +879,13 @@ const GenericToolRenderer: FC<ToolRendererProps> = ({
 			{isError && (
 				<Tooltip>
 					<TooltipTrigger asChild>
-						<TriangleAlertIcon className="h-3.5 w-3.5 shrink-0 text-current" />
+						<TriangleAlertIcon className="size-3.5 shrink-0 text-current" />
 					</TooltipTrigger>
 					<TooltipContent>{errorMessage || "Tool call failed"}</TooltipContent>
 				</Tooltip>
 			)}
 			{isRunning && (
-				<LoaderIcon className="h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
+				<LoaderIcon className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
 			)}
 		</>
 	);
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/ToolCollapsible.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/ToolCollapsible.tsx
index cb73422389..8b8f236341 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/ToolCollapsible.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/ToolCollapsible.tsx
@@ -90,7 +90,7 @@ export const ToolCollapsible: FC<ToolCollapsibleProps> = ({
 				{renderedHeader}
 				<ChevronDownIcon
 					className={cn(
-						"h-3 w-3 shrink-0 text-current transition-transform",
+						"size-3 shrink-0 text-current transition-transform",
 						expanded ? "rotate-0" : "-rotate-90",
 					)}
 				/>
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/ToolIcon.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/ToolIcon.tsx
index f4d99ef1c9..ea3ce5e009 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/ToolIcon.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/ToolIcon.tsx
@@ -35,7 +35,7 @@ export const ToolIcon: React.FC<{
 }> = ({ name, iconUrl, isRunning, serverName, subagentIconKind }) => {
 	const [imgError, setImgError] = useState(false);
 	const color = "text-current";
-	const base = cn("h-4 w-4 shrink-0", color, isRunning && "grayscale");
+	const base = cn("size-4 shrink-0", color, isRunning && "grayscale");
 
 	// If an MCP icon URL is provided and hasn't failed, render it.
 	// Strip colour so external icons match the monochrome lucide
@@ -44,12 +44,12 @@ export const ToolIcon: React.FC<{
 	// content-secondary (light ≈ 34% lightness, dark ≈ 65%).
 	if (iconUrl && !imgError) {
 		const img = (
-			<div className="h-4 w-4 shrink-0 overflow-hidden">
+			<div className="size-4 shrink-0 overflow-hidden">
 				<ExternalImage
 					src={iconUrl}
 					alt={`${name} icon`}
 					className={cn(
-						"block h-4 w-4",
+						"block size-4",
 						// Monochrome: brightness-0 strips colour to black,
 						// dark:invert flips to white for dark backgrounds,
 						// opacity tuned per-theme to match content-secondary
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/WebSearchSources.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/WebSearchSources.tsx
index d1bc62308d..b6822b2ef0 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/WebSearchSources.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/WebSearchSources.tsx
@@ -36,7 +36,7 @@ const WebSearchSources: FC<WebSearchSourcesProps> = ({ sources }) => {
 			hasContent={unique.length > 0}
 			header={
 				<>
-					<GlobeIcon className="h-4 w-4 shrink-0 text-current" />
+					<GlobeIcon className="size-4 shrink-0 text-current" />
 					<span className="text-[13px]">
 						Searched <span className="text-content-secondary/60">{detail}</span>
 					</span>
@@ -103,7 +103,7 @@ const SourcePill: FC<{ source: { url: string; title: string } }> = ({
 				/>
 			)}
 			<span className="truncate">{label}</span>
-			<ExternalLinkIcon className="h-3 w-3 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
+			<ExternalLinkIcon className="size-3 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
 		</a>
 	);
 };
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/WorkspaceBuildLogSection.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/WorkspaceBuildLogSection.tsx
index e37e0eabfd..54b7b5e6cb 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/WorkspaceBuildLogSection.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/WorkspaceBuildLogSection.tsx
@@ -108,7 +108,7 @@ export const WorkspaceBuildLogSection: FC<WorkspaceBuildLogSectionProps> = ({
 		if (isRunning && workspaceId) {
 			return (
 				<div className="flex items-center gap-2 py-3 px-4 text-xs text-content-secondary">
-					<LoaderIcon className="h-3 w-3 animate-spin motion-reduce:animate-none" />
+					<LoaderIcon className="size-3 animate-spin motion-reduce:animate-none" />
 					<span>Loading build logs…</span>
 				</div>
 			);
@@ -119,7 +119,7 @@ export const WorkspaceBuildLogSection: FC<WorkspaceBuildLogSectionProps> = ({
 	if (fetchFailed) {
 		return (
 			<div className="flex items-center gap-2 py-3 px-4 text-xs text-content-secondary">
-				<TriangleAlertIcon className="h-3 w-3" />
+				<TriangleAlertIcon className="size-3" />
 				<span>Failed to load build logs.</span>
 			</div>
 		);
@@ -128,7 +128,7 @@ export const WorkspaceBuildLogSection: FC<WorkspaceBuildLogSectionProps> = ({
 	if (timedOut && !hasLogs) {
 		return (
 			<div className="flex items-center gap-2 py-3 px-4 text-xs text-content-secondary">
-				<TriangleAlertIcon className="h-3 w-3" />
+				<TriangleAlertIcon className="size-3" />
 				<span>Build logs are taking longer than expected.</span>
 			</div>
 		);
@@ -150,7 +150,7 @@ export const WorkspaceBuildLogSection: FC<WorkspaceBuildLogSectionProps> = ({
 	if (!logs || logs.length === 0) {
 		return (
 			<div className="flex items-center gap-2 py-3 px-4 text-xs text-content-secondary">
-				<LoaderIcon className="h-3 w-3 animate-spin motion-reduce:animate-none" />
+				<LoaderIcon className="size-3 animate-spin motion-reduce:animate-none" />
 				<span>Loading build logs…</span>
 			</div>
 		);
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/WriteFileTool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/WriteFileTool.tsx
index c98bea1e22..11751bf4d7 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/WriteFileTool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/WriteFileTool.tsx
@@ -57,7 +57,7 @@ export const WriteFileTool: React.FC<{
 					{isError && (
 						<Tooltip>
 							<TooltipTrigger asChild>
-								<TriangleAlertIcon className="h-3.5 w-3.5 shrink-0 text-current" />
+								<TriangleAlertIcon className="size-3.5 shrink-0 text-current" />
 							</TooltipTrigger>
 							<TooltipContent>
 								{errorMessage || "Failed to write file"}
@@ -65,7 +65,7 @@ export const WriteFileTool: React.FC<{
 						</Tooltip>
 					)}
 					{isRunning && (
-						<LoaderIcon className="h-3.5 w-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
+						<LoaderIcon className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none text-current" />
 					)}
 				</>
 			}
diff --git a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelConfigFields.tsx b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelConfigFields.tsx
index e6e44452f2..f56ecf81be 100644
--- a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelConfigFields.tsx
+++ b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelConfigFields.tsx
@@ -149,7 +149,7 @@ const FieldLabel: FC<{
 		{description && (
 			<Tooltip>
 				<TooltipTrigger asChild>
-					<InfoIcon className="h-3 w-3 text-content-secondary" />
+					<InfoIcon className="size-3 text-content-secondary" />
 				</TooltipTrigger>
 				<TooltipContent side="top" className="max-w-[240px]">
 					{description}
diff --git a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelForm.tsx b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelForm.tsx
index 41c5408649..53543797d3 100644
--- a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelForm.tsx
+++ b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelForm.tsx
@@ -278,7 +278,7 @@ export const ModelForm: FC<ModelFormProps> = ({
 					{providerStates.map((ps) => (
 						<SelectItem key={ps.key} value={ps.key}>
 							<span className="flex items-center gap-2">
-								<ProviderIcon provider={ps.provider} className="h-4 w-4" />
+								<ProviderIcon provider={ps.provider} className="size-4" />
 								{ps.label}
 							</span>
 						</SelectItem>
@@ -348,7 +348,7 @@ export const ModelForm: FC<ModelFormProps> = ({
 				{selectedProviderState && (
 					<ProviderIcon
 						provider={selectedProviderState.provider}
-						className="h-8 w-8"
+						className="size-8"
 					/>
 				)}
 				<div className="inline-flex items-center gap-1">
@@ -368,7 +368,7 @@ export const ModelForm: FC<ModelFormProps> = ({
 							placeholder={initialModel?.model ?? "Model name"}
 						/>
 					</div>
-					<PencilIcon className="h-3.5 w-3.5 shrink-0 text-content-secondary" />
+					<PencilIcon className="size-3.5 shrink-0 text-content-secondary" />
 				</div>{" "}
 				{initialModel && (
 					<Tooltip>
@@ -425,7 +425,7 @@ export const ModelForm: FC<ModelFormProps> = ({
 									</span>
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<InfoIcon className="h-3 w-3 text-content-secondary" />
+											<InfoIcon className="size-3 text-content-secondary" />
 										</TooltipTrigger>
 										<TooltipContent side="top" className="max-w-[240px]">
 											Max tokens in the context window.
@@ -481,9 +481,9 @@ export const ModelForm: FC<ModelFormProps> = ({
 								</p>
 							</div>
 							{showPricing ? (
-								<ChevronDownIcon className="mt-0.5 h-4 w-4 shrink-0 text-content-secondary" />
+								<ChevronDownIcon className="mt-0.5 size-4 shrink-0 text-content-secondary" />
 							) : (
-								<ChevronRightIcon className="mt-0.5 h-4 w-4 shrink-0 text-content-secondary" />
+								<ChevronRightIcon className="mt-0.5 size-4 shrink-0 text-content-secondary" />
 							)}
 						</button>
 						{showPricing && (
@@ -515,9 +515,9 @@ export const ModelForm: FC<ModelFormProps> = ({
 								</p>
 							</div>
 							{showProviderConfig ? (
-								<ChevronDownIcon className="mt-0.5 h-4 w-4 shrink-0 text-content-secondary" />
+								<ChevronDownIcon className="mt-0.5 size-4 shrink-0 text-content-secondary" />
 							) : (
-								<ChevronRightIcon className="mt-0.5 h-4 w-4 shrink-0 text-content-secondary" />
+								<ChevronRightIcon className="mt-0.5 size-4 shrink-0 text-content-secondary" />
 							)}
 						</button>
 						{showProviderConfig && (
@@ -549,9 +549,9 @@ export const ModelForm: FC<ModelFormProps> = ({
 								</p>
 							</div>
 							{showAdvanced ? (
-								<ChevronDownIcon className="mt-0.5 h-4 w-4 shrink-0 text-content-secondary" />
+								<ChevronDownIcon className="mt-0.5 size-4 shrink-0 text-content-secondary" />
 							) : (
-								<ChevronRightIcon className="mt-0.5 h-4 w-4 shrink-0 text-content-secondary" />
+								<ChevronRightIcon className="mt-0.5 size-4 shrink-0 text-content-secondary" />
 							)}
 						</button>
 						{showAdvanced && (
@@ -570,7 +570,7 @@ export const ModelForm: FC<ModelFormProps> = ({
 										Compression Threshold
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<InfoIcon className="h-3 w-3 text-content-secondary" />
+												<InfoIcon className="size-3 text-content-secondary" />
 											</TooltipTrigger>
 											<TooltipContent side="top" className="max-w-[240px]">
 												Percentage at which context is compressed.
diff --git a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelIdentifierField.tsx b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelIdentifierField.tsx
index 8d7c5ce4b1..028484f9b0 100644
--- a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelIdentifierField.tsx
+++ b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelIdentifierField.tsx
@@ -463,7 +463,7 @@ export const ModelIdentifierField = ({
 				<span className="text-xs font-bold text-content-destructive">*</span>
 				<Tooltip>
 					<TooltipTrigger asChild>
-						<InfoIcon className="h-3 w-3 text-content-secondary" />
+						<InfoIcon className="size-3 text-content-secondary" />
 					</TooltipTrigger>
 					<TooltipContent side="top" className="max-w-[240px]">
 						The model identifier sent to the provider API.
diff --git a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelsSection.tsx b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelsSection.tsx
index 94b31e4b29..0cc2a554d5 100644
--- a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelsSection.tsx
+++ b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelsSection.tsx
@@ -262,9 +262,9 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
 				<Button size="sm" className="gap-1.5" aria-label="Add model">
-					<PlusIcon className="h-4 w-4" />
+					<PlusIcon className="size-4" />
 					Add
-					<ChevronDownIcon className="h-3.5 w-3.5 text-content-secondary" />
+					<ChevronDownIcon className="size-3.5 text-content-secondary" />
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent align="end">
@@ -276,7 +276,7 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
 						}}
 						className="gap-2"
 					>
-						<ProviderIcon provider={ps.provider} className="h-5 w-5" />
+						<ProviderIcon provider={ps.provider} className="size-5" />
 						{ps.label}
 					</DropdownMenuItem>
 				))}
@@ -356,7 +356,7 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
 								>
 									<ProviderIcon
 										provider={modelConfig.provider}
-										className="h-8 w-8 shrink-0"
+										className="size-8 shrink-0"
 									/>
 									<div className="min-w-0 flex-1">
 										<span
@@ -371,7 +371,7 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
 										</span>
 										{showPricingWarning && (
 											<span className="mt-1 flex items-center gap-1 text-xs text-content-warning">
-												<TriangleAlertIcon className="h-3.5 w-3.5 shrink-0" />
+												<TriangleAlertIcon className="size-3.5 shrink-0" />
 												Model pricing is not defined
 											</span>
 										)}
diff --git a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderForm.tsx b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderForm.tsx
index b1ca342d55..fe817705f7 100644
--- a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderForm.tsx
+++ b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderForm.tsx
@@ -218,7 +218,7 @@ export const ProviderForm: FC<ProviderFormProps> = ({
 		<div className="flex min-h-full flex-col">
 			<BackButton onClick={onBack} />
 			<div className="flex items-center gap-3">
-				<ProviderIcon provider={provider} className="h-8 w-8" />
+				<ProviderIcon provider={provider} className="size-8" />
 				<div className="min-w-0 flex-1">
 					<input
 						type="text"
@@ -231,7 +231,7 @@ export const ProviderForm: FC<ProviderFormProps> = ({
 				</div>
 				<Tooltip>
 					<TooltipTrigger asChild>
-						<InfoIcon className="h-4 w-4 shrink-0 cursor-help text-content-secondary" />
+						<InfoIcon className="size-4 shrink-0 cursor-help text-content-secondary" />
 					</TooltipTrigger>
 					<TooltipContent>
 						Uses the {formatProviderLabel(provider)} API specification
diff --git a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderIcon.tsx b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderIcon.tsx
index 9ee14dac47..4bbf2ed585 100644
--- a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderIcon.tsx
+++ b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderIcon.tsx
@@ -36,7 +36,7 @@ export const ProviderIcon: FC<ProviderIconProps> = ({
 				<ExternalImage
 					src={iconPath}
 					alt={`${formatProviderLabel(provider)} logo`}
-					className="h-3/5 w-3/5"
+					className="size-3/5"
 				/>
 			</div>
 		);
@@ -48,7 +48,7 @@ export const ProviderIcon: FC<ProviderIconProps> = ({
 				className,
 			)}
 		>
-			<ServerIcon className="h-3/5 w-3/5 text-content-secondary" />
+			<ServerIcon className="size-3/5 text-content-secondary" />
 		</div>
 	);
 };
diff --git a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProvidersSection.tsx b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProvidersSection.tsx
index 0e83084756..56b3d293bf 100644
--- a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProvidersSection.tsx
+++ b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProvidersSection.tsx
@@ -211,7 +211,7 @@ export const ProvidersSection: FC<ProvidersSectionProps> = ({
 					size="sm"
 					disabled={providerConfigsUnavailable || isProviderMutationPending}
 				>
-					<PlusIcon className="h-4 w-4" />
+					<PlusIcon className="size-4" />
 					Add provider
 				</Button>
 			</DropdownMenuTrigger>
@@ -222,7 +222,7 @@ export const ProvidersSection: FC<ProvidersSectionProps> = ({
 						className="gap-2"
 						onSelect={() => openNewProviderView(providerType)}
 					>
-						<ProviderIcon provider={providerType} className="h-5 w-5" />
+						<ProviderIcon provider={providerType} className="size-5" />
 						<span>{label}</span>
 					</DropdownMenuItem>
 				))}
@@ -267,7 +267,7 @@ export const ProvidersSection: FC<ProvidersSectionProps> = ({
 						>
 							<ProviderIcon
 								provider={providerState.provider}
-								className="h-8 w-8 shrink-0"
+								className="size-8 shrink-0"
 							/>
 							<div className="min-w-0 flex-1 space-y-1">
 								<div className="flex flex-wrap items-center gap-2">
@@ -282,11 +282,11 @@ export const ProvidersSection: FC<ProvidersSectionProps> = ({
 								</div>
 							</div>
 							{providerState.hasEffectiveAPIKey ? (
-								<CheckCircleIcon className="h-4 w-4 shrink-0 text-content-success" />
+								<CheckCircleIcon className="size-4 shrink-0 text-content-success" />
 							) : (
-								<CircleIcon className="h-4 w-4 shrink-0 text-content-secondary opacity-40" />
+								<CircleIcon className="size-4 shrink-0 text-content-secondary opacity-40" />
 							)}
-							<ChevronRightIcon className="h-5 w-5 shrink-0 text-content-secondary" />
+							<ChevronRightIcon className="size-5 shrink-0 text-content-secondary" />
 						</button>
 					))}
 				</div>
diff --git a/site/src/pages/AgentsPage/components/ChatTopBar.tsx b/site/src/pages/AgentsPage/components/ChatTopBar.tsx
index 0a55c851dd..67548c52be 100644
--- a/site/src/pages/AgentsPage/components/ChatTopBar.tsx
+++ b/site/src/pages/AgentsPage/components/ChatTopBar.tsx
@@ -77,10 +77,10 @@ const ChatSharingTopBarButton: FC<ChatSharingTopBarButtonProps> = ({
 				<Button
 					variant="subtle"
 					size="icon"
-					className="h-7 w-7 text-content-secondary hover:text-content-primary"
+					className="size-7 text-content-secondary hover:text-content-primary"
 					aria-label="Share chat"
 				>
-					<Share2Icon className="h-4 w-4" />
+					<Share2Icon className="size-4" />
 				</Button>
 			</PopoverTrigger>
 			<Fragment key={contentGeneration}>
@@ -127,7 +127,7 @@ export const ChatTopBar: FC<ChatTopBarProps> = ({
 					asChild
 					variant="subtle"
 					size="icon"
-					className="inline-flex h-7 w-7 min-w-0 shrink-0 sm:hidden"
+					className="inline-flex size-7 min-w-0 shrink-0 sm:hidden"
 				>
 					<Link
 						to={{ pathname: "/agents", search: location.search }}
@@ -144,7 +144,7 @@ export const ChatTopBar: FC<ChatTopBarProps> = ({
 					size="icon"
 					onClick={onToggleSidebarCollapsed}
 					aria-label="Expand sidebar"
-					className="hidden h-7 w-7 min-w-0 shrink-0 sm:inline-flex"
+					className="hidden size-7 min-w-0 shrink-0 sm:inline-flex"
 				>
 					<PanelLeftIcon />
 				</Button>
@@ -175,7 +175,7 @@ export const ChatTopBar: FC<ChatTopBarProps> = ({
 										<span className="truncate">{parentChat.title}</span>
 									</Link>
 								</Button>
-								<ChevronRightIcon className="h-3.5 w-3.5 shrink-0 text-content-secondary/70 -ml-0.5" />
+								<ChevronRightIcon className="size-3.5 shrink-0 text-content-secondary/70 -ml-0.5" />
 							</>
 						)}
 						<span
@@ -235,10 +235,10 @@ export const ChatTopBar: FC<ChatTopBarProps> = ({
 							<Button
 								size="icon"
 								variant="subtle"
-								className="h-7 w-7 text-content-secondary hover:text-content-primary"
+								className="size-7 text-content-secondary hover:text-content-primary"
 								aria-label="Open agent actions"
 							>
-								<EllipsisIcon className="h-4 w-4" />
+								<EllipsisIcon className="size-4" />
 							</Button>
 						</DropdownMenuTrigger>
 						<DropdownMenuContent
@@ -251,7 +251,7 @@ export const ChatTopBar: FC<ChatTopBarProps> = ({
 										disabled={isRegenerateTitleDisabled}
 										onSelect={onRegenerateTitle}
 									>
-										<WandSparklesIcon className="h-3.5 w-3.5" />
+										<WandSparklesIcon className="size-3.5" />
 										Generate new title
 									</DropdownMenuItem>
 									<DropdownMenuSeparator />
@@ -259,7 +259,7 @@ export const ChatTopBar: FC<ChatTopBarProps> = ({
 							)}
 							{isArchived ? (
 								<DropdownMenuItem onSelect={onUnarchiveAgent}>
-									<ArchiveRestoreIcon className="h-3.5 w-3.5" />
+									<ArchiveRestoreIcon className="size-3.5" />
 									Unarchive Agent
 								</DropdownMenuItem>
 							) : (
@@ -268,7 +268,7 @@ export const ChatTopBar: FC<ChatTopBarProps> = ({
 										className="text-content-destructive focus:text-content-destructive"
 										onSelect={onArchiveAgent}
 									>
-										<ArchiveIcon className="h-3.5 w-3.5" />
+										<ArchiveIcon className="size-3.5" />
 										Archive Agent
 									</DropdownMenuItem>
 									{hasWorkspace && (
@@ -276,7 +276,7 @@ export const ChatTopBar: FC<ChatTopBarProps> = ({
 											className="text-content-destructive focus:text-content-destructive"
 											onSelect={onArchiveAndDeleteWorkspace}
 										>
-											<Trash2Icon className="h-3.5 w-3.5" />
+											<Trash2Icon className="size-3.5" />
 											Archive & Delete Workspace
 										</DropdownMenuItem>
 									)}
@@ -290,13 +290,13 @@ export const ChatTopBar: FC<ChatTopBarProps> = ({
 						variant="subtle"
 						size="icon"
 						onClick={panel.onToggleSidebar}
-						className="h-7 w-7 text-content-secondary hover:text-content-primary"
+						className="size-7 text-content-secondary hover:text-content-primary"
 						aria-label="Toggle panel"
 					>
 						{panel.showSidebarPanel ? (
-							<PanelRightCloseIcon className="h-4 w-4" />
+							<PanelRightCloseIcon className="size-4" />
 						) : (
-							<PanelRightOpenIcon className="h-4 w-4" />
+							<PanelRightOpenIcon className="size-4" />
 						)}
 					</Button>
 				)}
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/ChatsSidebar.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/ChatsSidebar.tsx
index 3798f75c57..f5fd55d35c 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/ChatsSidebar.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/ChatsSidebar.tsx
@@ -103,7 +103,7 @@ export const ChatsSidebar: FC<ChatsSidebarProps> = (props) => {
 	const [chatPendingRename, setChatPendingRename] = useState<Chat | null>(null);
 
 	return (
-		<div className="relative flex h-full w-full min-h-0 border-0 border-r border-solid overflow-hidden">
+		<div className="relative flex size-full min-h-0 border-0 border-r border-solid overflow-hidden">
 			<ChatsPanel
 				chats={chats}
 				chatErrorReasons={chatErrorReasons}
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatSectionHeader.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatSectionHeader.tsx
index d06b1b9f0b..f2b53b7a5c 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatSectionHeader.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatSectionHeader.tsx
@@ -40,7 +40,7 @@ export const ChatSectionHeader: FC<ChatSectionHeaderProps> = ({
 					<ChevronDownIcon
 						aria-hidden="true"
 						className={cn(
-							"h-3.5 w-3.5 text-current transition-transform",
+							"size-3.5 text-current transition-transform",
 							expanded && "rotate-180",
 						)}
 					/>
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatsPanel.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatsPanel.tsx
index 6a858131cd..d7a5591896 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatsPanel.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatsPanel.tsx
@@ -310,7 +310,7 @@ export const ChatsPanel: FC<ChatsPanelProps> = ({
 							size="icon"
 							aria-label="Settings"
 							className={cn(
-								"h-7 w-7 min-w-0 text-content-secondary hover:text-content-primary",
+								"size-7 min-w-0 text-content-secondary hover:text-content-primary",
 								isSettingsPanel && "text-content-primary",
 							)}
 						>
@@ -327,7 +327,7 @@ export const ChatsPanel: FC<ChatsPanelProps> = ({
 								size="icon"
 								onClick={onCollapse}
 								aria-label="Collapse sidebar"
-								className="h-7 w-7 min-w-0 text-content-secondary hover:text-content-primary"
+								className="size-7 min-w-0 text-content-secondary hover:text-content-primary"
 							>
 								<PanelLeftCloseIcon />
 							</Button>
@@ -366,7 +366,7 @@ export const ChatsPanel: FC<ChatsPanelProps> = ({
 											size="icon"
 											aria-label="Search chats"
 											onClick={onOpenSearchDialog}
-											className="h-7 w-7 justify-end px-0"
+											className="size-7 justify-end px-0"
 										>
 											<SearchIcon />
 										</Button>
@@ -405,7 +405,7 @@ export const ChatsPanel: FC<ChatsPanelProps> = ({
 											key={i}
 											className="flex items-start gap-2 rounded-md px-2 py-1"
 										>
-											<Skeleton className="mt-0.5 h-5 w-5 shrink-0 rounded-md" />
+											<Skeleton className="mt-0.5 size-5 shrink-0 rounded-md" />
 											<div className="min-w-0 flex-1 space-y-1.5">
 												<Skeleton
 													className="h-3.5"
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchInput.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchInput.tsx
index 9b07f591d9..1d5cc66dc0 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchInput.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchInput.tsx
@@ -28,7 +28,7 @@ export const ChatSearchInput: FC<ChatSearchInputProps> = ({
 }) => {
 	return (
 		<div className="relative min-w-0">
-			<SearchIcon className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-content-secondary" />
+			<SearchIcon className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-content-secondary" />
 			<Input
 				ref={inputRef}
 				value={value}
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchResults.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchResults.tsx
index 60bc61b7ec..e4a2cb170a 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchResults.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchResults.tsx
@@ -204,9 +204,7 @@ const ChatSearchResultRow: FC<ChatSearchResultRowProps> = ({
 				isSelected && "bg-surface-tertiary/40 text-content-primary",
 			)}
 		>
-			<StatusIcon
-				className={cn("mt-1 h-3.5 w-3.5 shrink-0", statusClassName)}
-			/>
+			<StatusIcon className={cn("mt-1 size-3.5 shrink-0", statusClassName)} />
 			<div className="min-w-0">
 				<div className="truncate text-sm text-content-primary">
 					{chat.title}
@@ -228,7 +226,7 @@ const ChatSearchResultRow: FC<ChatSearchResultRowProps> = ({
 			<span className="inline-flex shrink-0 items-center gap-1.5 pt-0.5 text-xs text-content-secondary">
 				{chat.has_unread && (
 					<span
-						className="h-1.5 w-1.5 shrink-0 rounded-full bg-content-link"
+						className="size-1.5 shrink-0 rounded-full bg-content-link"
 						aria-hidden="true"
 					/>
 				)}
@@ -245,7 +243,7 @@ const ChatSearchResultsSkeleton: FC = () => (
 				key={`search-skeleton-${index}`}
 				className="flex items-start gap-2 rounded-md px-1.5 py-1"
 			>
-				<Skeleton className="mt-1 h-3.5 w-3.5 shrink-0 rounded-full" />
+				<Skeleton className="mt-1 size-3.5 shrink-0 rounded-full" />
 				<div className="min-w-0 flex-1 space-y-1.5">
 					<Skeleton
 						className="h-3.5"
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/RenameChatDialog.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/RenameChatDialog.tsx
index cc7843e0dd..e17489f0ba 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/RenameChatDialog.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/RenameChatDialog.tsx
@@ -266,7 +266,7 @@ export const RenameChatDialog: FC<RenameChatDialogProps> = ({
 							{isGeneratingTitle ? (
 								<Spinner className="h-[18px] w-[18px]" loading />
 							) : (
-								<SparklesIcon className="h-[18px] w-[18px]" />
+								<SparklesIcon className="size-[18px]" />
 							)}
 							Generate
 						</Button>
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/filters/FilterDropdown.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/filters/FilterDropdown.tsx
index 79c0a27c84..b01811050e 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/filters/FilterDropdown.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/filters/FilterDropdown.tsx
@@ -27,7 +27,7 @@ export const FilterDropdown: FC<FilterDropdownProps> = ({
 				size="icon"
 				aria-label="Filter agents"
 				className={cn(
-					"h-7 w-7 min-w-0 justify-end rounded-none px-0 text-content-secondary hover:text-content-primary",
+					"size-7 min-w-0 justify-end rounded-none px-0 text-content-secondary hover:text-content-primary",
 					archivedFilter === "archived" && "text-content-primary",
 				)}
 			>
@@ -41,13 +41,13 @@ export const FilterDropdown: FC<FilterDropdownProps> = ({
 			<DropdownMenuItem onSelect={() => onArchivedFilterChange?.("active")}>
 				Active
 				{archivedFilter === "active" && (
-					<CheckIcon className="ml-auto h-3.5 w-3.5" />
+					<CheckIcon className="ml-auto size-3.5" />
 				)}
 			</DropdownMenuItem>
 			<DropdownMenuItem onSelect={() => onArchivedFilterChange?.("archived")}>
 				Archived
 				{archivedFilter === "archived" && (
-					<CheckIcon className="ml-auto h-3.5 w-3.5" />
+					<CheckIcon className="ml-auto size-3.5" />
 				)}
 			</DropdownMenuItem>
 		</DropdownMenuContent>
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/settings/SettingsNavItem.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/settings/SettingsNavItem.tsx
index 894068baba..52dc28f0c1 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/settings/SettingsNavItem.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/settings/SettingsNavItem.tsx
@@ -36,7 +36,7 @@ const NavItemContent: FC<{
 	trailingIcon?: FC<{ className?: string }>;
 }> = ({ icon: Icon, label, adminOnly, trailingIcon: TrailingIcon }) => (
 	<>
-		<Icon className="h-4 w-4 shrink-0" />
+		<Icon className="size-4 shrink-0" />
 		<span className="min-w-0 flex-1">{label}</span>
 		{(adminOnly || TrailingIcon) && (
 			<span className="ml-auto flex items-center gap-2">
@@ -44,13 +44,13 @@ const NavItemContent: FC<{
 					<Tooltip>
 						<TooltipTrigger asChild>
 							<span className="inline-flex">
-								<ShieldIcon className="h-3 w-3 shrink-0 opacity-50" />
+								<ShieldIcon className="size-3 shrink-0 opacity-50" />
 							</span>
 						</TooltipTrigger>
 						<TooltipContent side="right">Admin only</TooltipContent>
 					</Tooltip>
 				)}
-				{TrailingIcon && <TrailingIcon className="h-4 w-4 shrink-0" />}
+				{TrailingIcon && <TrailingIcon className="size-4 shrink-0" />}
 			</span>
 		)}
 	</>
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/settings/SettingsPanel.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/settings/SettingsPanel.tsx
index 09a12d3818..6e1ce838e9 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/settings/SettingsPanel.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/settings/SettingsPanel.tsx
@@ -69,7 +69,7 @@ export const SettingsPanel: FC<SettingsPanelProps> = ({
 								? "Back to Settings"
 								: "Back to Agents"
 						}
-						className="relative z-10 h-7 w-7 min-w-0 text-content-secondary hover:text-content-primary"
+						className="relative z-10 size-7 min-w-0 text-content-secondary hover:text-content-primary"
 					>
 						{settingsPanel === "settings-admin" ? (
 							<Link
@@ -94,7 +94,7 @@ export const SettingsPanel: FC<SettingsPanelProps> = ({
 							size="icon"
 							onClick={onCollapse}
 							aria-label="Collapse sidebar"
-							className="relative z-10 hidden h-7 w-7 min-w-0 text-content-secondary hover:text-content-primary sm:inline-flex"
+							className="relative z-10 hidden size-7 min-w-0 text-content-secondary hover:text-content-primary sm:inline-flex"
 						>
 							<PanelLeftCloseIcon />
 						</Button>
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tabs/SidebarTabView.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tabs/SidebarTabView.tsx
index ede6b4d8e1..4047606a02 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/tabs/SidebarTabView.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tabs/SidebarTabView.tsx
@@ -155,7 +155,7 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
 							size="icon"
 							onClick={onClose}
 							aria-label="Close panel"
-							className="h-7 w-7 shrink-0 lg:hidden"
+							className="size-7 shrink-0 lg:hidden"
 						>
 							<ArrowLeftIcon />
 						</Button>
@@ -172,7 +172,7 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
 						size="icon"
 						onClick={onToggleExpanded}
 						aria-label={isExpanded ? "Collapse panel" : "Expand panel"}
-						className="hidden h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary lg:inline-flex"
+						className="hidden size-7 shrink-0 text-content-secondary hover:text-content-primary lg:inline-flex"
 					>
 						{isExpanded ? <MinimizeIcon /> : <MaximizeIcon />}
 					</Button>
@@ -196,7 +196,7 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
 						size="icon"
 						onClick={onClose}
 						aria-label="Close panel"
-						className="h-7 w-7 shrink-0 lg:hidden"
+						className="size-7 shrink-0 lg:hidden"
 					>
 						<ArrowLeftIcon />
 					</Button>
@@ -207,7 +207,7 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
 						size="icon"
 						onClick={onToggleSidebarCollapsed}
 						aria-label="Expand sidebar"
-						className="mr-1 h-7 w-7 shrink-0"
+						className="mr-1 size-7 shrink-0"
 					>
 						<PanelLeftIcon />
 					</Button>
@@ -301,7 +301,7 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
 					size="icon"
 					onClick={onToggleExpanded}
 					aria-label={isExpanded ? "Collapse panel" : "Expand panel"}
-					className="hidden h-7 w-7 shrink-0 text-content-secondary hover:text-content-primary lg:inline-flex"
+					className="hidden size-7 shrink-0 text-content-secondary hover:text-content-primary lg:inline-flex"
 				>
 					{isExpanded ? <MinimizeIcon /> : <MaximizeIcon />}
 				</Button>
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
index 76c63136e8..60d92f6b19 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
@@ -157,12 +157,12 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 				>
 					{chat.pin_order > 0 ? (
 						<>
-							<PinOffIcon className="h-3.5 w-3.5" />
+							<PinOffIcon className="size-3.5" />
 							Unpin agent
 						</>
 					) : (
 						<>
-							<PinIcon className="h-3.5 w-3.5" />
+							<PinIcon className="size-3.5" />
 							Pin agent
 						</>
 					)}
@@ -170,14 +170,14 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 			)}
 			{chat.archived ? (
 				<Item disabled={isArchiving} onSelect={() => onUnarchiveAgent(chat.id)}>
-					<ArchiveRestoreIcon className="h-3.5 w-3.5" />
+					<ArchiveRestoreIcon className="size-3.5" />
 					Unarchive agent
 				</Item>
 			) : (
 				<>
 					{onOpenRenameDialog && (
 						<Item onSelect={() => onOpenRenameDialog(chat)}>
-							<SquarePenIcon className="h-3.5 w-3.5" />
+							<SquarePenIcon className="size-3.5" />
 							Rename chat
 						</Item>
 					)}
@@ -187,7 +187,7 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 						disabled={isArchiving}
 						onSelect={() => onArchiveAgent(chat.id)}
 					>
-						<ArchiveIcon className="h-3.5 w-3.5" />
+						<ArchiveIcon className="size-3.5" />
 						Archive agent
 					</Item>
 					{workspaceId && (
@@ -196,7 +196,7 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 							disabled={isArchiving}
 							onSelect={() => onArchiveAndDeleteWorkspace(chat.id, workspaceId)}
 						>
-							<Trash2Icon className="h-3.5 w-3.5" />
+							<Trash2Icon className="size-3.5" />
 							Archive & delete workspace
 						</Item>
 					)}
@@ -221,13 +221,13 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 					>
 						<div
 							className={cn(
-								"group/icon relative mt-1.5 h-5 w-5 shrink-0",
+								"group/icon relative mt-1.5 size-5 shrink-0",
 								hasChildren && "cursor-pointer",
 							)}
 						>
 							<div
 								className={cn(
-									"flex h-5 w-5 items-center justify-center rounded-md",
+									"flex size-5 items-center justify-center rounded-md",
 									hasChildren &&
 										"[@media(hover:hover)]:group-hover/icon:invisible",
 								)}
@@ -238,7 +238,7 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 											? `agents-tree-executing-${chat.id}`
 											: undefined
 									}
-									className={cn("h-3.5 w-3.5 shrink-0", statusClassName)}
+									className={cn("size-3.5 shrink-0", statusClassName)}
 								/>
 							</div>
 							{hasChildren && (
@@ -247,7 +247,7 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 									size="icon"
 									onClick={() => toggleExpanded(chatID)}
 									className={cn(
-										"absolute inset-0 invisible flex h-5 w-5 min-w-0 items-center justify-center rounded-md p-0 text-content-secondary/60 hover:text-content-primary [&>svg]:size-3.5",
+										"absolute inset-0 invisible flex size-5 min-w-0 items-center justify-center rounded-md p-0 text-content-secondary/60 hover:text-content-primary [&>svg]:size-3.5",
 										"[@media(hover:hover)]:group-hover/icon:visible",
 									)}
 									data-testid={`agents-tree-toggle-${chat.id}`}
@@ -327,7 +327,7 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 									<span className="flex items-center justify-end text-xs text-content-secondary/50 tabular-nums [@media(hover:hover)]:group-hover:hidden group-has-[[data-state=open]]:hidden">
 										{chat.has_unread && !isActiveChat ? (
 											<span
-												className="h-2 w-2 shrink-0 rounded-full bg-content-link"
+												className="size-2 shrink-0 rounded-full bg-content-link"
 												data-testid={`unread-indicator-${chat.id}`}
 												aria-hidden="true"
 											/>
@@ -345,7 +345,7 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 												className="absolute inset-0 flex h-6 w-7 min-w-0 justify-end rounded-none px-0 opacity-0 text-content-secondary hover:text-content-primary [@media(hover:hover)]:group-hover:opacity-100 data-[state=open]:opacity-100"
 												aria-label={`Open actions for ${chat.title}`}
 											>
-												<EllipsisVerticalIcon className="h-3.5 w-3.5" />
+												<EllipsisVerticalIcon className="size-3.5" />
 											</Button>
 										</DropdownMenuTrigger>
 										<DropdownMenuContent
diff --git a/site/src/pages/AgentsPage/components/ChimeButton.tsx b/site/src/pages/AgentsPage/components/ChimeButton.tsx
index a1db1cd5b0..5281ee8d32 100644
--- a/site/src/pages/AgentsPage/components/ChimeButton.tsx
+++ b/site/src/pages/AgentsPage/components/ChimeButton.tsx
@@ -38,7 +38,7 @@ export const ChimeButton: FC<ChimeButtonProps> = ({ enabled, onToggle }) => {
 					aria-label={
 						isEnabled ? "Mute completion chime" : "Enable completion chime"
 					}
-					className="h-7 w-7 text-content-secondary hover:text-content-primary"
+					className="size-7 text-content-secondary hover:text-content-primary"
 				>
 					{isEnabled ? (
 						<Volume2Icon className="text-content-success" />
diff --git a/site/src/pages/AgentsPage/components/GitPanel/GitPanel.tsx b/site/src/pages/AgentsPage/components/GitPanel/GitPanel.tsx
index 0c6e2fdf04..f96379e1db 100644
--- a/site/src/pages/AgentsPage/components/GitPanel/GitPanel.tsx
+++ b/site/src/pages/AgentsPage/components/GitPanel/GitPanel.tsx
@@ -311,7 +311,7 @@ export const GitPanel: FC<GitPanelProps> = ({
 							onClick={handleRefresh}
 							aria-label="Refresh"
 							disabled={!hasGitContext}
-							className="h-6 w-6 text-content-secondary hover:text-content-primary"
+							className="size-6 text-content-secondary hover:text-content-primary"
 						>
 							<RefreshCwIcon
 								className={cn(
diff --git a/site/src/pages/AgentsPage/components/LimitsTab/DefaultLimitSection.tsx b/site/src/pages/AgentsPage/components/LimitsTab/DefaultLimitSection.tsx
index dc2d92aede..db0bfd323a 100644
--- a/site/src/pages/AgentsPage/components/LimitsTab/DefaultLimitSection.tsx
+++ b/site/src/pages/AgentsPage/components/LimitsTab/DefaultLimitSection.tsx
@@ -80,7 +80,7 @@ export const DefaultLimitSection: FC<DefaultLimitSectionProps> = ({
 								<TooltipProvider delayDuration={0}>
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<InfoIcon className="h-3.5 w-3.5 shrink-0 cursor-help text-content-secondary" />
+											<InfoIcon className="size-3.5 shrink-0 cursor-help text-content-secondary" />
 										</TooltipTrigger>
 										<TooltipContent>
 											Only one period can be active at a time. Spend is
@@ -127,7 +127,7 @@ export const DefaultLimitSection: FC<DefaultLimitSectionProps> = ({
 
 			{enabled && unpricedModelCount > 0 && (
 				<div className="flex items-start gap-3 rounded-lg border border-border-warning bg-surface-warning p-4 text-sm text-content-primary">
-					<TriangleAlertIcon className="h-5 w-5 shrink-0 text-content-warning" />
+					<TriangleAlertIcon className="size-5 shrink-0 text-content-warning" />
 					<div>
 						{unpricedModelCount === 1
 							? "1 enabled model does not have pricing configured."
diff --git a/site/src/pages/AgentsPage/components/MCPServerAdminPanel.tsx b/site/src/pages/AgentsPage/components/MCPServerAdminPanel.tsx
index 5ae2659f90..fb952c12af 100644
--- a/site/src/pages/AgentsPage/components/MCPServerAdminPanel.tsx
+++ b/site/src/pages/AgentsPage/components/MCPServerAdminPanel.tsx
@@ -129,7 +129,7 @@ const MCPServerIcon: FC<{
 				<ExternalImage
 					src={iconUrl}
 					alt={`${name} icon`}
-					className="h-3/5 w-3/5"
+					className="size-3/5"
 				/>
 			</div>
 		);
@@ -141,7 +141,7 @@ const MCPServerIcon: FC<{
 				className,
 			)}
 		>
-			<ServerIcon className="h-3/5 w-3/5 text-content-secondary" />
+			<ServerIcon className="size-3/5 text-content-secondary" />
 		</div>
 	);
 };
@@ -183,7 +183,7 @@ const IconPickerField: FC<IconPickerFieldProps> = ({
 			/>
 			<InputGroupAddon align="inline-end" className="gap-1.5">
 				{hasIcon && (
-					<span className="flex h-5 w-5 items-center justify-center [&_img]:max-w-full [&_img]:object-contain">
+					<span className="flex size-5 items-center justify-center [&_img]:max-w-full [&_img]:object-contain">
 						<ExternalImage
 							alt=""
 							src={value}
@@ -255,7 +255,7 @@ const ServerList: FC<ServerListProps> = ({
 				}
 				action={
 					<Button size="sm" onClick={onAdd}>
-						<PlusIcon className="h-4 w-4" />
+						<PlusIcon className="size-4" />
 						Add server
 					</Button>
 				}
@@ -267,7 +267,7 @@ const ServerList: FC<ServerListProps> = ({
 						No MCP servers configured yet.
 					</p>
 					<Button size="sm" onClick={onAdd} aria-label="Add your first server">
-						<PlusIcon className="h-4 w-4" />
+						<PlusIcon className="size-4" />
 						Add your first server
 					</Button>
 				</div>
@@ -287,7 +287,7 @@ const ServerList: FC<ServerListProps> = ({
 							<MCPServerIcon
 								iconUrl={server.icon_url}
 								name={server.display_name}
-								className="h-8 w-8 shrink-0"
+								className="size-8 shrink-0"
 							/>
 							<div className="min-w-0 flex-1">
 								<span
@@ -310,11 +310,11 @@ const ServerList: FC<ServerListProps> = ({
 								</Badge>
 							)}
 							{server.enabled ? (
-								<CheckCircleIcon className="h-4 w-4 shrink-0 text-content-success" />
+								<CheckCircleIcon className="size-4 shrink-0 text-content-success" />
 							) : (
-								<CircleIcon className="h-4 w-4 shrink-0 text-content-secondary opacity-40" />
+								<CircleIcon className="size-4 shrink-0 text-content-secondary opacity-40" />
 							)}
-							<ChevronRightIcon className="h-5 w-5 shrink-0 text-content-secondary" />
+							<ChevronRightIcon className="size-5 shrink-0 text-content-secondary" />
 						</button>
 					))}
 				</div>
@@ -602,9 +602,9 @@ const ServerForm: FC<ServerFormProps> = ({
 										</p>
 									</div>
 									{showDetails ? (
-										<ChevronDownIcon className="mt-0.5 h-4 w-4 shrink-0 text-content-secondary" />
+										<ChevronDownIcon className="mt-0.5 size-4 shrink-0 text-content-secondary" />
 									) : (
-										<ChevronRightIcon className="mt-0.5 h-4 w-4 shrink-0 text-content-secondary" />
+										<ChevronRightIcon className="mt-0.5 size-4 shrink-0 text-content-secondary" />
 									)}
 								</button>
 							</CollapsibleTrigger>
@@ -651,9 +651,9 @@ const ServerForm: FC<ServerFormProps> = ({
 										</p>
 									</div>
 									{showAuth ? (
-										<ChevronDownIcon className="mt-0.5 h-4 w-4 shrink-0 text-content-secondary" />
+										<ChevronDownIcon className="mt-0.5 size-4 shrink-0 text-content-secondary" />
 									) : (
-										<ChevronRightIcon className="mt-0.5 h-4 w-4 shrink-0 text-content-secondary" />
+										<ChevronRightIcon className="mt-0.5 size-4 shrink-0 text-content-secondary" />
 									)}
 								</button>
 							</CollapsibleTrigger>
@@ -869,7 +869,7 @@ const ServerForm: FC<ServerFormProps> = ({
 													variant="outline"
 													size="icon"
 													type="button"
-													className="mt-0 h-9 w-9 shrink-0"
+													className="mt-0 size-9 shrink-0"
 													onClick={() => {
 														form.setFieldValue("customHeadersTouched", true);
 														form.setFieldValue(
@@ -882,7 +882,7 @@ const ServerForm: FC<ServerFormProps> = ({
 													disabled={isDisabled}
 													aria-label={`Remove header ${index + 1}`}
 												>
-													<XIcon className="h-4 w-4" />
+													<XIcon className="size-4" />
 												</Button>
 											</div>
 										))}
@@ -899,7 +899,7 @@ const ServerForm: FC<ServerFormProps> = ({
 											}}
 											disabled={isDisabled}
 										>
-											<PlusIcon className="h-4 w-4" />
+											<PlusIcon className="size-4" />
 											Add header
 										</Button>
 									</div>
@@ -941,9 +941,9 @@ const ServerForm: FC<ServerFormProps> = ({
 										</p>
 									</div>
 									{showBehavior ? (
-										<ChevronDownIcon className="mt-0.5 h-4 w-4 shrink-0 text-content-secondary" />
+										<ChevronDownIcon className="mt-0.5 size-4 shrink-0 text-content-secondary" />
 									) : (
-										<ChevronRightIcon className="mt-0.5 h-4 w-4 shrink-0 text-content-secondary" />
+										<ChevronRightIcon className="mt-0.5 size-4 shrink-0 text-content-secondary" />
 									)}
 								</button>
 							</CollapsibleTrigger>
diff --git a/site/src/pages/AgentsPage/components/MCPServerPicker.tsx b/site/src/pages/AgentsPage/components/MCPServerPicker.tsx
index ab72e847b3..37fd7486ae 100644
--- a/site/src/pages/AgentsPage/components/MCPServerPicker.tsx
+++ b/site/src/pages/AgentsPage/components/MCPServerPicker.tsx
@@ -54,9 +54,9 @@ const MCPIcon: FC<{ iconUrl: string; name: string; className?: string }> = ({
 	className,
 }) => {
 	const icon = iconUrl ? (
-		<ExternalImage src={iconUrl} alt={`${name} icon`} className="h-3/5 w-3/5" />
+		<ExternalImage src={iconUrl} alt={`${name} icon`} className="size-3/5" />
 	) : (
-		<ServerIcon className="h-3/5 w-3/5 text-content-secondary" />
+		<ServerIcon className="size-3/5 text-content-secondary" />
 	);
 
 	return (
@@ -162,12 +162,12 @@ const TriggerIconStack: FC<{
 					<MCPIcon
 						iconUrl={s.icon_url}
 						name={s.display_name}
-						className="h-4 w-4"
+						className="size-4"
 					/>
 				</span>
 			))}
 			{servers.length > ICON_STACK_MAX && (
-				<span className="-ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-secondary text-[9px] font-medium text-content-secondary ring-1 ring-surface-primary">
+				<span className="-ml-1 inline-flex size-4 items-center justify-center rounded-full bg-surface-secondary text-[9px] font-medium text-content-secondary ring-1 ring-surface-primary">
 					+{servers.length - ICON_STACK_MAX}
 				</span>
 			)}
@@ -273,7 +273,7 @@ export const MCPServerPicker: FC<MCPServerPickerProps> = ({
 					{activeServers.length > 0 && (
 						<TriggerIconStack servers={activeServers} />
 					)}
-					<ChevronDownIcon className="ml-auto h-3.5 w-3.5 text-content-secondary transition-colors group-hover:text-content-primary" />
+					<ChevronDownIcon className="ml-auto size-3.5 text-content-secondary transition-colors group-hover:text-content-primary" />
 				</button>
 			</PopoverTrigger>
 			<PopoverContent align="start" className="w-52 p-0">
@@ -294,13 +294,13 @@ export const MCPServerPicker: FC<MCPServerPickerProps> = ({
 											<MCPIcon
 												iconUrl={server.icon_url}
 												name={server.display_name}
-												className="h-5 w-5"
+												className="size-5"
 											/>
 											<span className="min-w-0 flex-1 truncate text-xs text-content-primary">
 												{server.display_name}
 											</span>
 											{isForceOn && (
-												<LockIcon className="h-3 w-3 shrink-0 text-content-secondary" />
+												<LockIcon className="size-3 shrink-0 text-content-secondary" />
 											)}
 											{needsAuth ? (
 												<Button
diff --git a/site/src/pages/AgentsPage/components/QueuedMessagesList.tsx b/site/src/pages/AgentsPage/components/QueuedMessagesList.tsx
index acce523f4d..74786bc253 100644
--- a/site/src/pages/AgentsPage/components/QueuedMessagesList.tsx
+++ b/site/src/pages/AgentsPage/components/QueuedMessagesList.tsx
@@ -209,7 +209,7 @@ export const QueuedMessagesList: FC<QueuedMessagesListProps> = ({
 									aria-label={`${item.attachmentCount} image attachment${item.attachmentCount !== 1 ? "s" : ""}`}
 									className="flex shrink-0 items-center gap-1 text-xs text-content-secondary"
 								>
-									<ImageIcon className="h-3 w-3" aria-hidden="true" />
+									<ImageIcon className="size-3" aria-hidden="true" />
 									<span aria-hidden="true">{item.attachmentCount}</span>
 								</span>
 							)}
@@ -220,7 +220,7 @@ export const QueuedMessagesList: FC<QueuedMessagesListProps> = ({
 										showActions ? "opacity-100" : "opacity-0",
 									)}
 								>
-									<CornerDownLeftIcon className="h-3 w-3" />
+									<CornerDownLeftIcon className="size-3" />
 									to send
 								</span>
 							)}
@@ -243,7 +243,7 @@ export const QueuedMessagesList: FC<QueuedMessagesListProps> = ({
 												}
 												className="size-6 rounded text-content-secondary hover:bg-surface-tertiary hover:text-content-primary"
 											>
-												<PencilIcon className="h-3.5 w-3.5" />
+												<PencilIcon className="size-3.5" />
 											</Button>
 										</TooltipTrigger>
 										<TooltipContent side="top">Edit</TooltipContent>
@@ -262,7 +262,7 @@ export const QueuedMessagesList: FC<QueuedMessagesListProps> = ({
 											{isItemBusy && busyItem.action === "promote" ? (
 												<Spinner className="h-3.5 w-3.5" loading />
 											) : (
-												<ArrowUpIcon className="h-3.5 w-3.5" />
+												<ArrowUpIcon className="size-3.5" />
 											)}
 										</Button>
 									</TooltipTrigger>
@@ -281,7 +281,7 @@ export const QueuedMessagesList: FC<QueuedMessagesListProps> = ({
 											{isItemBusy && busyItem.action === "delete" ? (
 												<Spinner className="h-3.5 w-3.5" loading />
 											) : (
-												<Trash2Icon className="h-3.5 w-3.5" />
+												<Trash2Icon className="size-3.5" />
 											)}
 										</Button>
 									</TooltipTrigger>
diff --git a/site/src/pages/AgentsPage/components/RightPanel/DebugPanel/DebugPanel.tsx b/site/src/pages/AgentsPage/components/RightPanel/DebugPanel/DebugPanel.tsx
index 8e4a868009..e8c56871e0 100644
--- a/site/src/pages/AgentsPage/components/RightPanel/DebugPanel/DebugPanel.tsx
+++ b/site/src/pages/AgentsPage/components/RightPanel/DebugPanel/DebugPanel.tsx
@@ -188,7 +188,7 @@ export const DebugPanel: FC<DebugPanelProps> = ({
 	return (
 		<ScrollArea
 			className="h-full"
-			viewportClassName="h-full [&>div]:!block [&>div]:!w-full"
+			viewportClassName="size-full [&>div]:!block [&>div]:!"
 			scrollBarClassName="w-1.5"
 		>
 			<div className="min-h-full w-full min-w-0 overflow-x-hidden">
diff --git a/site/src/pages/AgentsPage/components/RightPanel/DesktopPanel.tsx b/site/src/pages/AgentsPage/components/RightPanel/DesktopPanel.tsx
index 0e99b51084..ef20dcd86d 100644
--- a/site/src/pages/AgentsPage/components/RightPanel/DesktopPanel.tsx
+++ b/site/src/pages/AgentsPage/components/RightPanel/DesktopPanel.tsx
@@ -109,7 +109,7 @@ export const DesktopPanelView: FC<DesktopPanelViewProps> = ({
 
 	// status === "connected"
 	return (
-		<div className="relative h-full w-full">
+		<div className="relative size-full">
 			{/* "Release Control" button — top-right, only when controlling */}
 			{isControlling && (
 				<Button
@@ -118,7 +118,7 @@ export const DesktopPanelView: FC<DesktopPanelViewProps> = ({
 					onClick={onReleaseControl}
 					className="absolute top-2 right-2 z-20 shadow-xl drop-shadow-lg"
 				>
-					<HandIcon className="h-4 w-4" />
+					<HandIcon className="size-4" />
 					Release control
 				</Button>
 			)}
@@ -127,7 +127,7 @@ export const DesktopPanelView: FC<DesktopPanelViewProps> = ({
 				ref={(el) => {
 					if (el) attach(el);
 				}}
-				className={cn("h-full w-full", !isControlling && "pointer-events-none")}
+				className={cn("size-full", !isControlling && "pointer-events-none")}
 			/>
 			{/* "Take Control" hover overlay — only when NOT controlling */}
 			{!isControlling && (
@@ -140,7 +140,7 @@ export const DesktopPanelView: FC<DesktopPanelViewProps> = ({
 							aria-label="Take control of desktop"
 							className="shadow-xl drop-shadow-lg"
 						>
-							<MousePointer2Icon className="h-4 w-4" />
+							<MousePointer2Icon className="size-4" />
 							Take control
 						</Button>
 					</span>
diff --git a/site/src/pages/AgentsPage/components/UserCompactionThresholdSettings.tsx b/site/src/pages/AgentsPage/components/UserCompactionThresholdSettings.tsx
index ec0f93f2d8..0d32432dfe 100644
--- a/site/src/pages/AgentsPage/components/UserCompactionThresholdSettings.tsx
+++ b/site/src/pages/AgentsPage/components/UserCompactionThresholdSettings.tsx
@@ -283,7 +283,7 @@ export const UserCompactionThresholdSettings: FC<
 										<Badge size="sm" variant="default" className="w-fit">
 											<ProviderIcon
 												provider={modelConfig.provider}
-												className="h-4 w-4"
+												className="size-4"
 											/>
 											{modelName}
 										</Badge>
diff --git a/site/src/pages/AgentsPage/components/VirtualDesktopSettings.tsx b/site/src/pages/AgentsPage/components/VirtualDesktopSettings.tsx
index 69d65914b3..f519537283 100644
--- a/site/src/pages/AgentsPage/components/VirtualDesktopSettings.tsx
+++ b/site/src/pages/AgentsPage/components/VirtualDesktopSettings.tsx
@@ -81,7 +81,7 @@ export const VirtualDesktopSettings: FC<VirtualDesktopSettingsProps> = ({
 						Virtual Desktop
 					</h3>
 					<Badge size="sm" variant="warning" className="cursor-default">
-						<TriangleAlertIcon className="h-3 w-3" />
+						<TriangleAlertIcon className="size-3" />
 						Experimental feature
 					</Badge>
 				</div>
diff --git a/site/src/pages/AgentsPage/components/WebPushButton.tsx b/site/src/pages/AgentsPage/components/WebPushButton.tsx
index 89160814e8..5aeb1ac4d5 100644
--- a/site/src/pages/AgentsPage/components/WebPushButton.tsx
+++ b/site/src/pages/AgentsPage/components/WebPushButton.tsx
@@ -58,7 +58,7 @@ export const WebPushButton: FC<WebPushButtonProps> = ({
 							? "Disable notifications"
 							: "Enable notifications"
 					}
-					className="h-7 w-7 text-content-secondary hover:text-content-primary"
+					className="size-7 text-content-secondary hover:text-content-primary"
 				>
 					{webPushState.loading ? (
 						<Spinner size="sm" loading />