shishantbiswas/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-06-02 20:48:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(site/src/pages/AgentsPage): use Tailwind size shorthand (#25611)

Browse Source 
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.
This commit is contained in:
Danielle Maywood
2026-05-22 13:07:14 +01:00
committed by GitHub
parent e5293c81f9
commit fbf6fa1d25
64 changed files with 238 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/AgentsPage/AgentAnalyticsPageView.tsx
+1 -1
View File
@@ -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>
}
site/src/pages/AgentsPage/AgentChatPageView.tsx
+2 -2
View File
@@ -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>
)}
site/src/pages/AgentsPage/components/AdvisorSettings.tsx
+1 -1
View File
@@ -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>
site/src/pages/AgentsPage/components/AgentChatInput.tsx
+3 -3
View File
@@ -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>
site/src/pages/AgentsPage/components/AgentPageHeader.tsx
+4 -4
View File
@@ -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" />
) : (
site/src/pages/AgentsPage/components/AgentSetupNotice.tsx
+1 -1
View File
@@ -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}.`
site/src/pages/AgentsPage/components/AgentsSkeletons.tsx
+9 -9
View File
@@ -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">
site/src/pages/AgentsPage/components/AttachmentPreview.tsx
+8 -11
View File
@@ -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>
))}
site/src/pages/AgentsPage/components/BackButton.tsx
+1 -1
View File
@@ -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>
);
site/src/pages/AgentsPage/components/ChatConversation/AttachmentBlocks.tsx
+6 -6
View File
@@ -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>
);
site/src/pages/AgentsPage/components/ChatCostSummaryView.tsx
+2 -2
View File
@@ -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.
site/src/pages/AgentsPage/components/ChatElements/tools/AdvisorTool.tsx
+5 -5
View File
@@ -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]">
site/src/pages/AgentsPage/components/ChatElements/tools/AskUserQuestionTool.tsx
+7 -7
View File
@@ -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>
)}
site/src/pages/AgentsPage/components/ChatElements/tools/ChatSummarizedTool.tsx
+2 -2
View File
@@ -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" />
)}
</>
}
site/src/pages/AgentsPage/components/ChatElements/tools/ComputerTool.tsx
+2 -2
View File
@@ -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" />
)}
</>
}
site/src/pages/AgentsPage/components/ChatElements/tools/CreateWorkspaceTool.tsx
+4 -4
View File
@@ -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>
)}
</>
site/src/pages/AgentsPage/components/ChatElements/tools/EditFilesTool.tsx
+2 -2
View File
@@ -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" />
)}
</>
}
site/src/pages/AgentsPage/components/ChatElements/tools/ExecuteTool.tsx
+11 -14
View File
@@ -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 (
site/src/pages/AgentsPage/components/ChatElements/tools/InlineDesktopPreview.tsx
+1 -1
View File
@@ -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>
site/src/pages/AgentsPage/components/ChatElements/tools/ListTemplatesTool.tsx
+3 -3
View File
@@ -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>
);
site/src/pages/AgentsPage/components/ChatElements/tools/ProcessOutputTool.tsx
+2 -2
View File
@@ -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",
)}
/>
site/src/pages/AgentsPage/components/ChatElements/tools/ProposePlanTool.tsx
+4 -4
View File
@@ -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>
)}
site/src/pages/AgentsPage/components/ChatElements/tools/ReadFileTool.tsx
+2 -2
View File
@@ -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" />
)}
</>
}
site/src/pages/AgentsPage/components/ChatElements/tools/ReadSkillTool.tsx
+3 -3
View File
@@ -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" />
)}
</>
}
site/src/pages/AgentsPage/components/ChatElements/tools/ReadTemplateTool.tsx
+2 -2
View File
@@ -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>
);
site/src/pages/AgentsPage/components/ChatElements/tools/RecordingPreview.tsx
+6 -6
View File
@@ -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
site/src/pages/AgentsPage/components/ChatElements/tools/StartWorkspaceTool.tsx
+3 -3
View File
@@ -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" />
)}
</>
);
site/src/pages/AgentsPage/components/ChatElements/tools/SubagentTool.tsx
+7 -7
View File
@@ -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",
)}
/>
site/src/pages/AgentsPage/components/ChatElements/tools/Tool.tsx
+2 -2
View File
@@ -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" />
)}
</>
);
site/src/pages/AgentsPage/components/ChatElements/tools/ToolCollapsible.tsx
+1 -1
View File
@@ -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",
)}
/>
site/src/pages/AgentsPage/components/ChatElements/tools/ToolIcon.tsx
+3 -3
View File
@@ -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
site/src/pages/AgentsPage/components/ChatElements/tools/WebSearchSources.tsx
+2 -2
View File
@@ -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>
);
};
site/src/pages/AgentsPage/components/ChatElements/tools/WorkspaceBuildLogSection.tsx
+4 -4
View File
@@ -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>
);
site/src/pages/AgentsPage/components/ChatElements/tools/WriteFileTool.tsx
+2 -2
View File
@@ -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" />
)}
</>
}
site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelConfigFields.tsx
+1 -1
View File
@@ -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}
site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelForm.tsx
+11 -11
View File
@@ -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.
site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelIdentifierField.tsx
+1 -1
View File
@@ -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.
site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelsSection.tsx
+5 -5
View File
@@ -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>
)}
site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderForm.tsx
+2 -2
View File
@@ -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
site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderIcon.tsx
+2 -2
View File
@@ -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>
);
};
site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProvidersSection.tsx
+6 -6
View File
@@ -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>
site/src/pages/AgentsPage/components/ChatTopBar.tsx
+14 -14
View File
@@ -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>
)}
site/src/pages/AgentsPage/components/ChatsSidebar/ChatsSidebar.tsx
+1 -1
View File
@@ -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}
site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatSectionHeader.tsx
+1 -1
View File
@@ -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",
)}
/>
site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatsPanel.tsx
+4 -4
View File
@@ -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"
site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchInput.tsx
+1 -1
View File
@@ -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}
site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchResults.tsx
+3 -5
View File
@@ -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"
site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/RenameChatDialog.tsx
+1 -1
View File
@@ -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>
site/src/pages/AgentsPage/components/ChatsSidebar/filters/FilterDropdown.tsx
+3 -3
View File
@@ -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>
site/src/pages/AgentsPage/components/ChatsSidebar/settings/SettingsNavItem.tsx
+3 -3
View File
@@ -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>
)}
</>
site/src/pages/AgentsPage/components/ChatsSidebar/settings/SettingsPanel.tsx
+2 -2
View File
@@ -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>
site/src/pages/AgentsPage/components/ChatsSidebar/tabs/SidebarTabView.tsx
+5 -5
View File
@@ -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>
site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
+12 -12
View File
@@ -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
site/src/pages/AgentsPage/components/ChimeButton.tsx
+1 -1
View File
@@ -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" />
site/src/pages/AgentsPage/components/GitPanel/GitPanel.tsx
+1 -1
View File
@@ -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(
site/src/pages/AgentsPage/components/LimitsTab/DefaultLimitSection.tsx
+2 -2
View File
@@ -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."
site/src/pages/AgentsPage/components/MCPServerAdminPanel.tsx
+18 -18
View File
@@ -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>
site/src/pages/AgentsPage/components/MCPServerPicker.tsx
+7 -7
View File
@@ -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
site/src/pages/AgentsPage/components/QueuedMessagesList.tsx
+5 -5
View File
@@ -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>
site/src/pages/AgentsPage/components/RightPanel/DebugPanel/DebugPanel.tsx
+1 -1
View File
@@ -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">
site/src/pages/AgentsPage/components/RightPanel/DesktopPanel.tsx
+4 -4
View File
@@ -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>
site/src/pages/AgentsPage/components/UserCompactionThresholdSettings.tsx
+1 -1
View File
@@ -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>
site/src/pages/AgentsPage/components/VirtualDesktopSettings.tsx
+1 -1
View File
@@ -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>
site/src/pages/AgentsPage/components/WebPushButton.tsx
+1 -1
View File
@@ -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 />