chore: tighten .vscode IDE and typescript configuration (#24537)

This branch tightens import hygiene and editor guidance to reduce
accidental use of legacy or discouraged patterns.
It also updates consumers too, by propagating the new `lucide-react`
import convention across the existing UI surfaces that reference those
icons.

- Updated `.vscode/settings.json` to prefer non-relative imports and
improve TypeScript auto-import behavior.
- Re-enabled and expanded Biome restricted-import enforcement in
`biome.jsonc` for migration guardrails.
- Added/used `lucide-react` `-Icon` naming conventions for clarity and
consistency.
- Updated consumers too across components, modules, and pages so the new
import rules are applied end-to-end.

site/src/modules/management/DeploymentSidebarView.tsx

@@ -1,4 +1,4 @@
-import { ArrowUpRight } from "lucide-react";
+import { ArrowUpRightIcon } from "lucide-react";
 import type { FC } from "react";
 import type { BuildInfoResponse, Experiment } from "#/api/typesGenerated";
 import {
@@ -87,7 +87,7 @@ export const DeploymentSidebarView: FC<DeploymentSidebarViewProps> = ({
 				{permissions.viewAnyGroup && (
 					<SidebarNavItem href="/deployment/groups">
 						<Stack direction="row" alignItems="center" spacing={0.5}>
-							Groups {showOrganizations && <ArrowUpRight size={16} />}
+							Groups {showOrganizations && <ArrowUpRightIcon size={16} />}
 						</Stack>
 					</SidebarNavItem>
 				)}

site/src/modules/management/OrganizationSidebarView.tsx

@@ -1,4 +1,4 @@
-import { Check, Plus } from "lucide-react";
+import { CheckIcon, PlusIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { useNavigate } from "react-router";
 import type { Organization } from "#/api/typesGenerated";
@@ -110,7 +110,7 @@ export const OrganizationSidebarView: FC<
 												{organization?.display_name || organization?.name}
 											</span>
 											{activeOrganization?.name === organization.name && (
-												<Check className="ml-auto" />
+												<CheckIcon className="ml-auto" />
 											)}
 										</CommandItem>
 									))}
@@ -129,7 +129,7 @@ export const OrganizationSidebarView: FC<
 												}, 200);
 											}}
 										>
-											<Plus /> Create Organization
+											<PlusIcon /> Create Organization
 										</CommandItem>
 									</CommandGroup>
 								</>

site/src/modules/notifications/NotificationsInbox/InboxItem.tsx

@@ -1,4 +1,4 @@
-import { SquareCheckBig } from "lucide-react";
+import { SquareCheckBigIcon } from "lucide-react";
 import type { FC } from "react";
 import Markdown from "react-markdown";
 import { Link as RouterLink } from "react-router";
@@ -69,7 +69,7 @@ export const InboxItem: FC<InboxItemProps> = ({
 							variant="outline"
 							size="sm"
 						>
-							<SquareCheckBig />
+							<SquareCheckBigIcon />
 							mark as read
 						</Button>
 					</>

site/src/modules/resources/AgentApps/AgentApps.tsx

@@ -1,4 +1,4 @@
-import { Folder } from "lucide-react";
+import { FolderIcon } from "lucide-react";
 import type { FC } from "react";
 import type {
 	Workspace,
@@ -29,7 +29,7 @@ export const AgentApps: FC<AgentAppsProps> = ({
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
 				<AgentButton>
-					<Folder />
+					<FolderIcon />
 					{section.group}
 				</AgentButton>
 			</DropdownMenuTrigger>

site/src/modules/resources/AgentDevcontainerCard.tsx

@@ -1,4 +1,4 @@
-import { Container, ExternalLinkIcon } from "lucide-react";
+import { ContainerIcon, ExternalLinkIcon } from "lucide-react";
 import type { FC } from "react";
 import { useMutation, useQueryClient } from "react-query";
 import { toast } from "sonner";
@@ -184,7 +184,7 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
 				bg-surface-primary px-2
 				text-xs text-content-secondary"
 			>
-				<Container size={12} className="mr-1.5" />
+				<ContainerIcon size={12} className="mr-1.5" />
 				{devcontainer.subagent_id ? (
 					<Tooltip>
 						<TooltipTrigger asChild>

site/src/modules/resources/AgentDevcontainerMoreActions.tsx

@@ -1,4 +1,4 @@
-import { EllipsisVertical } from "lucide-react";
+import { EllipsisVerticalIcon } from "lucide-react";
 import { type FC, useId, useState } from "react";
 import { Button } from "#/components/Button/Button";
 import { ConfirmDialog } from "#/components/Dialogs/ConfirmDialog/ConfirmDialog";
@@ -24,7 +24,7 @@ export const AgentDevcontainerMoreActions: FC<
 		<DropdownMenu open={open} onOpenChange={setOpen}>
 			<DropdownMenuTrigger asChild>
 				<Button size="icon-lg" variant="subtle" aria-controls={menuContentId}>
-					<EllipsisVertical aria-hidden="true" />
+					<EllipsisVerticalIcon aria-hidden="true" />
 					<span className="sr-only">Dev Container actions</span>
 				</Button>
 			</DropdownMenuTrigger>

site/src/modules/resources/PortForwardButton.tsx

@@ -13,7 +13,7 @@ import {
 	LockOpenIcon,
 	RadioIcon,
 	ShareIcon,
-	X as XIcon,
+	XIcon,
 } from "lucide-react";
 import { type FC, useState } from "react";
 import { useMutation, useQuery } from "react-query";

site/src/modules/users/AISeatCell.tsx

@@ -1,4 +1,4 @@
-import { CircleCheck, X } from "lucide-react";
+import { CircleCheckIcon, XIcon } from "lucide-react";
 import type { FC } from "react";
 import { TableCell } from "#/components/Table/Table";
 
@@ -10,12 +10,12 @@ export const AISeatCell: FC<AISeatCellProps> = ({ hasAISeat }) => {
 	return (
 		<TableCell>
 			{hasAISeat ? (
-				<CircleCheck
+				<CircleCheckIcon
 					className="size-5 text-content-success"
 					aria-label="Consuming AI seat"
 				/>
 			) : (
-				<X
+				<XIcon
 					className="size-5 text-content-disabled"
 					aria-label="Not consuming AI seat"
 				/>

site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx

@@ -1,12 +1,12 @@
 import {
-	CircleAlert,
-	Eye,
-	EyeOff,
-	Hourglass,
-	Info,
+	CircleAlertIcon,
+	EyeIcon,
+	EyeOffIcon,
+	HourglassIcon,
+	InfoIcon,
 	LinkIcon,
-	Settings,
-	TriangleAlert,
+	SettingsIcon,
+	TriangleAlertIcon,
 } from "lucide-react";
 import { type FC, useId, useRef, useState } from "react";
 import * as Yup from "yup";
@@ -142,7 +142,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
 								<TooltipTrigger asChild>
 									<span className="flex items-center">
 										<Badge size="sm" variant="warning">
-											<TriangleAlert />
+											<TriangleAlertIcon />
 											Immutable
 										</Badge>
 									</span>
@@ -160,7 +160,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
 								<TooltipTrigger asChild>
 									<span className="flex items-center">
 										<Badge size="sm" variant="green">
-											<Hourglass />
+											<HourglassIcon />
 											Ephemeral
 										</Badge>
 									</span>
@@ -178,7 +178,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
 								<TooltipTrigger asChild>
 									<span className="flex items-center">
 										<Badge size="sm">
-											<Settings />
+											<SettingsIcon />
 											Preset
 										</Badge>
 									</span>
@@ -529,9 +529,9 @@ const MaskableInput: FC<MaskableInputProps> = ({
 					disabled={disabled}
 				>
 					{showMaskedInput ? (
-						<EyeOff className="h-4 w-4" />
+						<EyeOffIcon className="h-4 w-4" />
 					) : (
-						<Eye className="h-4 w-4" />
+						<EyeIcon className="h-4 w-4" />
 					)}
 				</Button>
 			)}
@@ -583,9 +583,9 @@ const MaskableTextArea: FC<MaskableInputProps> = ({
 					disabled={disabled}
 				>
 					{showMaskedInput ? (
-						<EyeOff className="h-4 w-4" />
+						<EyeOffIcon className="h-4 w-4" />
 					) : (
-						<Eye className="h-4 w-4" />
+						<EyeIcon className="h-4 w-4" />
 					)}
 				</Button>
 			)}
@@ -637,7 +637,7 @@ const OptionDisplay: FC<OptionDisplayProps> = ({ option }) => {
 				<TooltipProvider delayDuration={100}>
 					<Tooltip>
 						<TooltipTrigger asChild>
-							<Info className="w-3.5 h-3.5 text-content-secondary" />
+							<InfoIcon className="w-3.5 h-3.5 text-content-secondary" />
 						</TooltipTrigger>
 						<TooltipContent side="right" sideOffset={10}>
 							{option.description}
@@ -934,13 +934,13 @@ export const Diagnostics: FC<DiagnosticsProps> = ({ diagnostics }) => {
 				>
 					<div className="flex flex-row items-start">
 						{diagnostic.severity === "error" && (
-							<CircleAlert
+							<CircleAlertIcon
 								className="me-2 inline-flex shrink-0 text-content-destructive size-icon-sm"
 								aria-hidden="true"
 							/>
 						)}
 						{diagnostic.severity === "warning" && (
-							<TriangleAlert
+							<TriangleAlertIcon
 								className="me-2 inline-flex shrink-0 text-content-warning size-icon-sm"
 								aria-hidden="true"
 							/>

site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceMoreActions.tsx

@@ -1,7 +1,7 @@
 import {
 	CopyIcon,
 	DownloadIcon,
-	EllipsisVertical,
+	EllipsisVerticalIcon,
 	HistoryIcon,
 	SettingsIcon,
 	SquareIcon,
@@ -134,7 +134,7 @@ export const WorkspaceMoreActions: FC<WorkspaceMoreActionsProps> = ({
 						aria-controls="workspace-options"
 						disabled={disabled}
 					>
-						<EllipsisVertical aria-hidden="true" />
+						<EllipsisVerticalIcon aria-hidden="true" />
 						<span className="sr-only">Workspace actions</span>
 					</Button>
 				</DropdownMenuTrigger>

site/src/modules/workspaces/WorkspaceSharingForm/UserOrGroupAutocomplete.tsx

@@ -1,4 +1,4 @@
-import { Check } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { keepPreviousData, useQuery } from "react-query";
 import { groupsByOrganization } from "#/api/queries/groups";
@@ -122,7 +122,7 @@ export const UserOrGroupAutocomplete: FC<UserOrGroupAutocompleteProps> = ({
 						subtitle={isGroup(option) ? getGroupSubtitle(option) : option.email}
 						src={option.avatar_url}
 					/>
-					{isSelected && <Check className="size-4 shrink-0" />}
+					{isSelected && <CheckIcon className="size-4 shrink-0" />}
 				</div>
 			)}
 			open={open}

site/src/modules/workspaces/WorkspaceSharingForm/WorkspaceSharingForm.tsx

@@ -1,4 +1,4 @@
-import { EllipsisVertical, UserPlusIcon } from "lucide-react";
+import { EllipsisVerticalIcon, UserPlusIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
 import { useQuery } from "react-query";
 import { workspaceSharingSettings } from "#/api/queries/organizations";
@@ -279,7 +279,7 @@ export const WorkspaceSharingForm: FC<WorkspaceSharingFormProps> = ({
 												variant="subtle"
 												aria-label="Open menu"
 											>
-												<EllipsisVertical aria-hidden="true" />
+												<EllipsisVerticalIcon aria-hidden="true" />
 												<span className="sr-only">Open menu</span>
 											</Button>
 										</DropdownMenuTrigger>
@@ -327,7 +327,7 @@ export const WorkspaceSharingForm: FC<WorkspaceSharingFormProps> = ({
 												variant="subtle"
 												aria-label="Open menu"
 											>
-												<EllipsisVertical aria-hidden="true" />
+												<EllipsisVerticalIcon aria-hidden="true" />
 												<span className="sr-only">Open menu</span>
 											</Button>
 										</DropdownMenuTrigger>