chore: additional typescript import modernization (#23536)

site/src/App.tsx

@@ -1,6 +1,5 @@
 import "./theme/globalFonts";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { TooltipProvider } from "components/Tooltip/Tooltip";
 import {
 	type FC,
 	type ReactNode,
@@ -10,6 +9,7 @@ import {
 } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { RouterProvider } from "react-router";
+import { TooltipProvider } from "#/components/Tooltip/Tooltip";
 import { Toaster } from "./components/Toaster/Toaster";
 import { AuthProvider } from "./contexts/auth/AuthProvider";
 import { DiffsWorkerPoolProvider } from "./contexts/DiffsWorkerPoolProvider";

site/src/api/queries/aiBridge.ts

@@ -1,7 +1,7 @@
 import { API } from "api/api";
 import type { AIBridgeListInterceptionsResponse } from "api/typesGenerated";
-import { useFilterParamsKey } from "components/Filter/Filter";
 import type { UsePaginatedQueryOptions } from "hooks/usePaginatedQuery";
+import { useFilterParamsKey } from "#/components/Filter/Filter";
 
 export const paginatedInterceptions = (
 	searchParams: URLSearchParams,

site/src/api/queries/audits.ts

@@ -1,7 +1,7 @@
 import { API } from "api/api";
 import type { AuditLogResponse } from "api/typesGenerated";
-import { useFilterParamsKey } from "components/Filter/Filter";
 import type { UsePaginatedQueryOptions } from "hooks/usePaginatedQuery";
+import { useFilterParamsKey } from "#/components/Filter/Filter";
 
 export function paginatedAudits(
 	searchParams: URLSearchParams,

site/src/api/queries/connectionlog.ts

@@ -1,7 +1,7 @@
 import { API } from "api/api";
 import type { ConnectionLogResponse } from "api/typesGenerated";
-import { useFilterParamsKey } from "components/Filter/Filter";
 import type { UsePaginatedQueryOptions } from "hooks/usePaginatedQuery";
+import { useFilterParamsKey } from "#/components/Filter/Filter";
 
 export function paginatedConnectionLogs(
 	searchParams: URLSearchParams,

site/src/components/ActiveUserChart/ActiveUserChart.tsx

@@ -1,19 +1,19 @@
+import type { FC } from "react";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { formatDate } from "utils/time";
 import {
 	type ChartConfig,
 	ChartContainer,
 	ChartTooltip,
 	ChartTooltipContent,
-} from "components/Chart/Chart";
+} from "#/components/Chart/Chart";
 import {
 	HelpTooltip,
 	HelpTooltipContent,
 	HelpTooltipIconTrigger,
 	HelpTooltipText,
 	HelpTooltipTitle,
-} from "components/HelpTooltip/HelpTooltip";
-import type { FC } from "react";
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
-import { formatDate } from "utils/time";
+} from "#/components/HelpTooltip/HelpTooltip";
 
 const chartConfig = {
 	amount: {

site/src/components/Alert/Alert.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "components/Button/Button";
+import { Button } from "#/components/Button/Button";
 import { Alert } from "./Alert";
 
 const meta: Meta<typeof Alert> = {

site/src/components/Alert/Alert.tsx

@@ -1,5 +1,4 @@
 import { cva } from "class-variance-authority";
-import { Button } from "components/Button/Button";
 import {
 	CircleAlertIcon,
 	CircleCheckIcon,
@@ -9,6 +8,7 @@ import {
 } from "lucide-react";
 import { type FC, type ReactNode, useState } from "react";
 import { cn } from "utils/cn";
+import { Button } from "#/components/Button/Button";
 
 const alertVariants = cva(
 	"relative w-full rounded-lg border border-solid p-4 text-left",

site/src/components/Alert/ErrorAlert.stories.tsx

@@ -1,6 +1,6 @@
 import { mockApiError } from "testHelpers/entities";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "components/Button/Button";
+import { Button } from "#/components/Button/Button";
 import { ErrorAlert } from "./ErrorAlert";
 
 const mockError = mockApiError({

site/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Avatar } from "components/Avatar/Avatar";
-import { AvatarData } from "components/Avatar/AvatarData";
 import { Check } from "lucide-react";
 import { useState } from "react";
 import { expect, fn, screen, userEvent, waitFor, within } from "storybook/test";
+import { Avatar } from "#/components/Avatar/Avatar";
+import { AvatarData } from "#/components/Avatar/AvatarData";
 import { Autocomplete } from "./Autocomplete";
 
 const meta: Meta<typeof Autocomplete> = {

site/src/components/Autocomplete/Autocomplete.tsx

@@ -1,18 +1,3 @@
-import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
-import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-	CommandList,
-} from "components/Command/Command";
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "components/Popover/Popover";
-import { Spinner } from "components/Spinner/Spinner";
 import { Check, X } from "lucide-react";
 import {
 	type KeyboardEvent,
@@ -21,6 +6,21 @@ import {
 	useState,
 } from "react";
 import { cn } from "utils/cn";
+import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "#/components/Command/Command";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "#/components/Popover/Popover";
+import { Spinner } from "#/components/Spinner/Spinner";
 
 interface AutocompleteProps<TOption> {
 	value: TOption | null;

site/src/components/Avatar/AvatarCard.tsx

@@ -1,6 +1,6 @@
 import { type CSSObject, useTheme } from "@emotion/react";
-import { Avatar } from "components/Avatar/Avatar";
 import type { FC, ReactNode } from "react";
+import { Avatar } from "#/components/Avatar/Avatar";
 
 type AvatarCardProps = {
 	header: string;

site/src/components/Avatar/AvatarData.tsx

@@ -1,5 +1,5 @@
-import { Avatar } from "components/Avatar/Avatar";
 import type { FC, ReactNode } from "react";
+import { Avatar } from "#/components/Avatar/Avatar";
 
 interface AvatarDataProps {
 	title: ReactNode;

site/src/components/Badges/Badges.tsx

@@ -1,5 +1,5 @@
-import { Badge } from "components/Badge/Badge";
-import { Stack } from "components/Stack/Stack";
+import { Badge } from "#/components/Badge/Badge";
+import { Stack } from "#/components/Stack/Stack";
 
 export const EnabledBadge: React.FC = () => {
 	return (

site/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -8,7 +8,7 @@ import {
 	BreadcrumbList,
 	BreadcrumbPage,
 	BreadcrumbSeparator,
-} from "components/Breadcrumb/Breadcrumb";
+} from "#/components/Breadcrumb/Breadcrumb";
 
 const meta: Meta<typeof Breadcrumb> = {
 	title: "components/Breadcrumb",

site/src/components/ChatMessageInput/FileReferenceNode.tsx

@@ -1,5 +1,4 @@
 import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
-import { FileIcon } from "components/FileIcon/FileIcon";
 import {
 	$getNodeByKey,
 	DecoratorNode,
@@ -12,6 +11,7 @@ import {
 import { XIcon } from "lucide-react";
 import { type FC, memo, type ReactNode } from "react";
 import { cn } from "utils/cn";
+import { FileIcon } from "#/components/FileIcon/FileIcon";
 
 type SerializedFileReferenceNode = Spread<
 	{

site/src/components/CodeExample/CodeExample.tsx

@@ -1,13 +1,13 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import { Button } from "components/Button/Button";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { type FC, useState } from "react";
+import { MONOSPACE_FONT_FAMILY } from "theme/constants";
+import { Button } from "#/components/Button/Button";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
-import { EyeIcon, EyeOffIcon } from "lucide-react";
-import { type FC, useState } from "react";
-import { MONOSPACE_FONT_FAMILY } from "theme/constants";
+} from "#/components/Tooltip/Tooltip";
 import { CopyButton } from "../CopyButton/CopyButton";
 
 interface CodeExampleProps {

site/src/components/Collapsible/Collapsible.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "components/Button/Button";
 import { ChevronsUpDown } from "lucide-react";
+import { Button } from "#/components/Button/Button";
 import {
 	Collapsible,
 	CollapsibleContent,

site/src/components/Combobox/Combobox.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { SelectFilterOption } from "components/Filter/SelectFilter";
 import { useState } from "react";
 import { expect, screen, userEvent, waitFor, within } from "storybook/test";
+import type { SelectFilterOption } from "#/components/Filter/SelectFilter";
 import {
 	Combobox,
 	ComboboxButton,

site/src/components/Combobox/Combobox.tsx

@@ -1,22 +1,22 @@
-import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
-import { Button } from "components/Button/Button";
+import { CheckIcon } from "lucide-react";
+import type React from "react";
+import { createContext, useContext, useState } from "react";
+import { cn } from "utils/cn";
+import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
+import { Button } from "#/components/Button/Button";
 import {
 	Command,
 	CommandEmpty,
 	CommandInput,
 	CommandItem,
 	CommandList,
-} from "components/Command/Command";
-import type { SelectFilterOption } from "components/Filter/SelectFilter";
+} from "#/components/Command/Command";
+import type { SelectFilterOption } from "#/components/Filter/SelectFilter";
 import {
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
-} from "components/Popover/Popover";
-import { CheckIcon } from "lucide-react";
-import type React from "react";
-import { createContext, useContext, useState } from "react";
-import { cn } from "utils/cn";
+} from "#/components/Popover/Popover";
 
 type ComboboxContextProps = {
 	open: boolean;

site/src/components/CopyButton/CopyButton.tsx

@@ -1,13 +1,13 @@
-import { CheckIcon } from "components/AnimatedIcons/Check";
-import { Button, type ButtonProps } from "components/Button/Button";
+import { useClipboard } from "hooks/useClipboard";
+import { CopyIcon } from "lucide-react";
+import type { FC } from "react";
+import { CheckIcon } from "#/components/AnimatedIcons/Check";
+import { Button, type ButtonProps } from "#/components/Button/Button";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
-import { useClipboard } from "hooks/useClipboard";
-import { CopyIcon } from "lucide-react";
-import type { FC } from "react";
+} from "#/components/Tooltip/Tooltip";
 
 type CopyButtonProps = ButtonProps & {
 	text: string;

site/src/components/CopyableValue/CopyableValue.tsx

@@ -1,12 +1,12 @@
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
 import { useClickable } from "hooks/useClickable";
 import { useClipboard } from "hooks/useClipboard";
 import { type FC, type HTMLAttributes, useState } from "react";
 import { cn } from "utils/cn";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "#/components/Tooltip/Tooltip";
 
 type TooltipSide = "top" | "right" | "bottom" | "left";
 

site/src/components/CustomLogo/CustomLogo.tsx

@@ -1,7 +1,7 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import { CoderIcon } from "components/Icons/CoderIcon";
 import type { FC } from "react";
 import { getApplicationName, getLogoURL } from "utils/appearance";
+import { CoderIcon } from "#/components/Icons/CoderIcon";
 
 /**
  * Enterprise customers can set a custom logo for their Coder application. Use

site/src/components/Dialog/Dialog.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "components/Button/Button";
 import { userEvent, within } from "storybook/test";
+import { Button } from "#/components/Button/Button";
 import {
 	Dialog,
 	DialogContent,

site/src/components/Dialogs/Dialog.tsx

@@ -1,7 +1,7 @@
 import MuiDialog, { type DialogProps } from "@mui/material/Dialog";
-import { Button } from "components/Button/Button";
-import { Spinner } from "components/Spinner/Spinner";
 import type { FC, ReactNode } from "react";
+import { Button } from "#/components/Button/Button";
+import { Spinner } from "#/components/Spinner/Spinner";
 import type { ConfirmDialogType } from "./types";
 
 export interface DialogActionButtonsProps {

site/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "components/Button/Button";
 import { userEvent, within } from "storybook/test";
+import { Button } from "#/components/Button/Button";
 import {
 	DropdownMenu,
 	DropdownMenuContent,

site/src/components/EmptyState/EmptyState.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "components/Button/Button";
+import { Button } from "#/components/Button/Button";
 import { EmptyState } from "./EmptyState";
 
 const meta: Meta<typeof EmptyState> = {

site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx

@@ -1,6 +1,3 @@
-import { Button } from "components/Button/Button";
-import { CoderIcon } from "components/Icons/CoderIcon";
-import { Link } from "components/Link/Link";
 import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
 import { type FC, useState } from "react";
 import {
@@ -9,6 +6,9 @@ import {
 	useLocation,
 	useRouteError,
 } from "react-router";
+import { Button } from "#/components/Button/Button";
+import { CoderIcon } from "#/components/Icons/CoderIcon";
+import { Link } from "#/components/Link/Link";
 
 const errorPageTitle = "Something went wrong";
 

site/src/components/Expander/Expander.tsx

@@ -1,10 +1,10 @@
-import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
+import type { FC, ReactNode } from "react";
+import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
 import {
 	Collapsible,
 	CollapsibleContent,
 	CollapsibleTrigger,
-} from "components/Collapsible/Collapsible";
-import type { FC, ReactNode } from "react";
+} from "#/components/Collapsible/Collapsible";
 
 interface ExpanderProps {
 	expanded: boolean;

site/src/components/FeatureStageBadge/FeatureStageBadge.tsx

@@ -1,12 +1,12 @@
-import { Link } from "components/Link/Link";
+import type { FC, HTMLAttributes, ReactNode } from "react";
+import { cn } from "utils/cn";
+import { docs } from "utils/docs";
+import { Link } from "#/components/Link/Link";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
-import type { FC, HTMLAttributes, ReactNode } from "react";
-import { cn } from "utils/cn";
-import { docs } from "utils/docs";
+} from "#/components/Tooltip/Tooltip";
 
 /**
  * All types of feature that we are currently supporting. Defined as record to

site/src/components/FileUpload/FileUpload.tsx

@@ -1,10 +1,10 @@
 import { css, type Interpolation, type Theme } from "@emotion/react";
 import CircularProgress from "@mui/material/CircularProgress";
 import IconButton from "@mui/material/IconButton";
-import { Stack } from "components/Stack/Stack";
 import { useClickable } from "hooks/useClickable";
 import { CloudUploadIcon, FolderIcon, TrashIcon } from "lucide-react";
 import { type DragEvent, type FC, type ReactNode, useRef } from "react";
+import { Stack } from "#/components/Stack/Stack";
 
 interface FileUploadProps {
 	isUploading: boolean;
@@ -137,18 +137,18 @@ const useFileDrop = (
 
 const styles = {
 	root: (theme) => css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 8px;
-    border: 2px dashed ${theme.palette.divider};
-    padding: 48px;
-    cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8px;
+		border: 2px dashed ${theme.palette.divider};
+		padding: 48px;
+		cursor: pointer;
 
-    &:hover {
-      background-color: ${theme.palette.background.paper};
-    }
-  `,
+		&:hover {
+			background-color: ${theme.palette.background.paper};
+		}
+	`,
 
 	disabled: {
 		pointerEvents: "none",

site/src/components/Filter/Filter.tsx

@@ -6,7 +6,10 @@ import {
 	hasError,
 	isApiValidationError,
 } from "api/errors";
-import { Button } from "components/Button/Button";
+import { useDebouncedFunction } from "hooks/debounce";
+import { ExternalLinkIcon, SlidersHorizontal } from "lucide-react";
+import { type FC, type ReactNode, useEffect, useRef, useState } from "react";
+import { Button } from "#/components/Button/Button";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -15,11 +18,8 @@ import {
 	DropdownMenuRadioItem,
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
-} from "components/DropdownMenu/DropdownMenu";
-import { SearchField } from "components/SearchField/SearchField";
-import { useDebouncedFunction } from "hooks/debounce";
-import { ExternalLinkIcon, SlidersHorizontal } from "lucide-react";
-import { type FC, type ReactNode, useEffect, useRef, useState } from "react";
+} from "#/components/DropdownMenu/DropdownMenu";
+import { SearchField } from "#/components/SearchField/SearchField";
 
 type PresetFilter = {
 	name: string;

site/src/components/Filter/SelectFilter.stories.tsx

@@ -1,9 +1,9 @@
 import { withDesktopViewport } from "testHelpers/storybook";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Avatar } from "components/Avatar/Avatar";
-import { ComboboxInput } from "components/Combobox/Combobox";
 import { useState } from "react";
 import { expect, screen, userEvent, within } from "storybook/test";
+import { Avatar } from "#/components/Avatar/Avatar";
+import { ComboboxInput } from "#/components/Combobox/Combobox";
 import { SelectFilter, type SelectFilterOption } from "./SelectFilter";
 
 const options: SelectFilterOption[] = Array.from({ length: 50 }, (_, i) => ({

site/src/components/Filter/SelectFilter.tsx

@@ -1,3 +1,5 @@
+import type { FC, ReactNode } from "react";
+import { cn } from "utils/cn";
 import {
 	Combobox,
 	ComboboxButton,
@@ -6,10 +8,8 @@ import {
 	ComboboxItem,
 	ComboboxList,
 	ComboboxTrigger,
-} from "components/Combobox/Combobox";
-import { Spinner } from "components/Spinner/Spinner";
-import type { FC, ReactNode } from "react";
-import { cn } from "utils/cn";
+} from "#/components/Combobox/Combobox";
+import { Spinner } from "#/components/Spinner/Spinner";
 
 const BASE_WIDTH = 200;
 

site/src/components/Filter/UserFilter.tsx

@@ -1,12 +1,12 @@
 import { API } from "api/api";
-import { Avatar } from "components/Avatar/Avatar";
-import { ComboboxInput } from "components/Combobox/Combobox";
+import { useAuthenticated } from "hooks";
+import type { FC } from "react";
+import { Avatar } from "#/components/Avatar/Avatar";
+import { ComboboxInput } from "#/components/Combobox/Combobox";
 import {
 	SelectFilter,
 	type SelectFilterOption,
-} from "components/Filter/SelectFilter";
-import { useAuthenticated } from "hooks";
-import type { FC } from "react";
+} from "#/components/Filter/SelectFilter";
 import { type UseFilterMenuOptions, useFilterMenu } from "./menu";
 
 export const DEFAULT_USER_FILTER_WIDTH = 175;

site/src/components/Filter/UsersFilter.tsx

@@ -1,15 +1,19 @@
-import { Filter, MenuSkeleton, type useFilter } from "components/Filter/Filter";
+import type { FC } from "react";
+import { docs } from "utils/docs";
+import {
+	Filter,
+	MenuSkeleton,
+	type useFilter,
+} from "#/components/Filter/Filter";
 import {
 	type UseFilterMenuOptions,
 	useFilterMenu,
-} from "components/Filter/menu";
+} from "#/components/Filter/menu";
 import {
 	SelectFilter,
 	type SelectFilterOption,
-} from "components/Filter/SelectFilter";
-import { StatusIndicatorDot } from "components/StatusIndicator/StatusIndicator";
-import type { FC } from "react";
-import { docs } from "utils/docs";
+} from "#/components/Filter/SelectFilter";
+import { StatusIndicatorDot } from "#/components/StatusIndicator/StatusIndicator";
 
 const userFilterQuery = {
 	active: "status:active",

site/src/components/Filter/menu.ts

@@ -1,6 +1,6 @@
-import type { SelectFilterOption } from "components/Filter/SelectFilter";
 import { useMemo, useRef, useState } from "react";
 import { keepPreviousData, useQuery } from "react-query";
+import type { SelectFilterOption } from "#/components/Filter/SelectFilter";
 
 export type UseFilterMenuOptions = {
 	id: string;

site/src/components/Form/Form.tsx

@@ -1,6 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import { AlphaBadge, DeprecatedBadge } from "components/Badges/Badges";
-import { Stack } from "components/Stack/Stack";
 import {
 	type ComponentProps,
 	createContext,
@@ -10,6 +8,8 @@ import {
 	useContext,
 } from "react";
 import { cn } from "utils/cn";
+import { AlphaBadge, DeprecatedBadge } from "#/components/Badges/Badges";
+import { Stack } from "#/components/Stack/Stack";
 
 type FormContextValue = { direction?: "horizontal" | "vertical" };
 

site/src/components/FormField/FormField.tsx

@@ -1,8 +1,8 @@
-import { Input } from "components/Input/Input";
-import { Label } from "components/Label/Label";
 import { type FC, type ReactNode, useId } from "react";
 import { cn } from "utils/cn";
 import type { FormHelpers } from "utils/formUtils";
+import { Input } from "#/components/Input/Input";
+import { Label } from "#/components/Label/Label";
 
 type FormFieldProps = React.ComponentPropsWithRef<"input"> & {
 	field: FormHelpers;

site/src/components/FullPageForm/FullPageForm.stories.tsx

@@ -1,8 +1,8 @@
 import TextField from "@mui/material/TextField";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "components/Button/Button";
-import { FormFooter } from "components/Form/Form";
 import type { FC } from "react";
+import { Button } from "#/components/Button/Button";
+import { FormFooter } from "#/components/Form/Form";
 import { Stack } from "../Stack/Stack";
 import { FullPageForm, type FullPageFormProps } from "./FullPageForm";
 

site/src/components/FullPageForm/FullPageForm.tsx

@@ -1,10 +1,10 @@
-import { Margins } from "components/Margins/Margins";
+import type { FC, ReactNode } from "react";
+import { Margins } from "#/components/Margins/Margins";
 import {
 	PageHeader,
 	PageHeaderSubtitle,
 	PageHeaderTitle,
-} from "components/PageHeader/PageHeader";
-import type { FC, ReactNode } from "react";
+} from "#/components/PageHeader/PageHeader";
 export interface FullPageFormProps {
 	title: string;
 	detail?: ReactNode;

site/src/components/FullPageForm/FullPageHorizontalForm.tsx

@@ -1,11 +1,11 @@
-import { Button } from "components/Button/Button";
-import { Margins } from "components/Margins/Margins";
+import type { FC, ReactNode } from "react";
+import { Button } from "#/components/Button/Button";
+import { Margins } from "#/components/Margins/Margins";
 import {
 	PageHeader,
 	PageHeaderSubtitle,
 	PageHeaderTitle,
-} from "components/PageHeader/PageHeader";
-import type { FC, ReactNode } from "react";
+} from "#/components/PageHeader/PageHeader";
 
 interface FullPageHorizontalFormProps {
 	title: string;

site/src/components/FullPageLayout/Topbar.tsx

@@ -1,7 +1,5 @@
 import { useTheme } from "@emotion/react";
 import IconButton, { type IconButtonProps } from "@mui/material/IconButton";
-import { Avatar, type AvatarProps } from "components/Avatar/Avatar";
-import { Button, type ButtonProps } from "components/Button/Button";
 import {
 	cloneElement,
 	type FC,
@@ -10,6 +8,8 @@ import {
 	type Ref,
 } from "react";
 import { cn } from "utils/cn";
+import { Avatar, type AvatarProps } from "#/components/Avatar/Avatar";
+import { Button, type ButtonProps } from "#/components/Button/Button";
 
 export const Topbar: FC<HTMLAttributes<HTMLElement>> = ({
 	className,

site/src/components/GitDeviceAuth/GitDeviceAuth.tsx

@@ -4,10 +4,10 @@ import Link from "@mui/material/Link";
 import type { ApiErrorResponse } from "api/errors";
 import type { ExternalAuthDevice } from "api/typesGenerated";
 import { isAxiosError } from "axios";
-import { Alert, AlertDescription, AlertTitle } from "components/Alert/Alert";
-import { CopyButton } from "components/CopyButton/CopyButton";
 import { ExternalLinkIcon } from "lucide-react";
 import type { FC } from "react";
+import { Alert, AlertDescription, AlertTitle } from "#/components/Alert/Alert";
+import { CopyButton } from "#/components/CopyButton/CopyButton";
 
 interface GitDeviceAuthProps {
 	externalAuthDevice?: ExternalAuthDevice;

site/src/components/HelpTooltip/HelpTooltip.tsx

@@ -1,13 +1,13 @@
+import { CircleHelpIcon, ExternalLinkIcon } from "lucide-react";
+import type { FC, HTMLAttributes, PropsWithChildren, ReactNode } from "react";
+import { cn } from "utils/cn";
 import {
 	Tooltip,
 	TooltipContent,
 	type TooltipContentProps,
 	type TooltipProps,
 	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
-import { CircleHelpIcon, ExternalLinkIcon } from "lucide-react";
-import type { FC, HTMLAttributes, PropsWithChildren, ReactNode } from "react";
-import { cn } from "utils/cn";
+} from "#/components/Tooltip/Tooltip";
 
 type Icon = typeof CircleHelpIcon;
 

site/src/components/IconField/IconField.tsx

@@ -1,16 +1,16 @@
 import { css, Global, useTheme } from "@emotion/react";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
-import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
-import { Button } from "components/Button/Button";
-import { ExternalImage } from "components/ExternalImage/ExternalImage";
-import { Loader } from "components/Loader/Loader";
+import { type FC, lazy, Suspense, useState } from "react";
+import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
+import { Button } from "#/components/Button/Button";
+import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
+import { Loader } from "#/components/Loader/Loader";
 import {
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
-} from "components/Popover/Popover";
-import { type FC, lazy, Suspense, useState } from "react";
+} from "#/components/Popover/Popover";
 
 type IconFieldProps = TextFieldProps & {
 	onPickEmoji: (value: string) => void;

site/src/components/InfoTooltip/InfoTooltip.tsx

@@ -1,3 +1,6 @@
+import type { FC, ReactNode } from "react";
+import type { ThemeRole } from "theme/roles";
+import { cn } from "utils/cn";
 import {
 	HelpTooltip,
 	HelpTooltipContent,
@@ -5,10 +8,7 @@ import {
 	HelpTooltipIconTrigger,
 	HelpTooltipText,
 	HelpTooltipTitle,
-} from "components/HelpTooltip/HelpTooltip";
-import type { FC, ReactNode } from "react";
-import type { ThemeRole } from "theme/roles";
-import { cn } from "utils/cn";
+} from "#/components/HelpTooltip/HelpTooltip";
 
 interface InfoTooltipProps {
 	type?: ThemeRole;

site/src/components/InputGroup/InputGroup.tsx

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from "class-variance-authority";
-import { Button, type ButtonProps } from "components/Button/Button";
-import { Input } from "components/Input/Input";
 import { cn } from "utils/cn";
+import { Button, type ButtonProps } from "#/components/Button/Button";
+import { Input } from "#/components/Input/Input";
 
 export const InputGroup: React.FC<React.ComponentProps<"div">> = ({
 	className,

site/src/components/Latency/Latency.tsx

@@ -1,14 +1,14 @@
 import CircularProgress from "@mui/material/CircularProgress";
-import { Abbr } from "components/Abbr/Abbr";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
 import { CircleHelpIcon } from "lucide-react";
 import type { FC } from "react";
 import { cn } from "utils/cn";
 import { getLatencyColor } from "utils/latency";
+import { Abbr } from "#/components/Abbr/Abbr";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "#/components/Tooltip/Tooltip";
 
 interface LatencyProps {
 	latency?: number;

site/src/components/Loader/Loader.tsx

@@ -1,6 +1,6 @@
-import { Spinner } from "components/Spinner/Spinner";
 import type { FC, HTMLAttributes } from "react";
 import { cn } from "utils/cn";
+import { Spinner } from "#/components/Spinner/Spinner";
 
 interface LoaderProps extends HTMLAttributes<HTMLDivElement> {
 	fullscreen?: boolean;

site/src/components/Markdown/Markdown.tsx

@@ -1,12 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import Link from "@mui/material/Link";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHeader,
-	TableRow,
-} from "components/Table/Table";
 import isEqual from "lodash/isEqual";
 import {
 	type FC,
@@ -22,6 +15,13 @@ import { dracula } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import gfm from "remark-gfm";
 import colors from "theme/tailwindColors";
 import { cn } from "utils/cn";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHeader,
+	TableRow,
+} from "#/components/Table/Table";
 
 interface MarkdownProps {
 	/**

site/src/components/Menu/MenuSearch.tsx

@@ -1,8 +1,8 @@
+import type { FC } from "react";
 import {
 	SearchField,
 	type SearchFieldProps,
-} from "components/SearchField/SearchField";
-import type { FC } from "react";
+} from "#/components/SearchField/SearchField";
 export const MenuSearch: FC<SearchFieldProps> = (props) => {
 	return <SearchField className="w-full [&_input]:rounded-none" {...props} />;
 };

site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx

@@ -3,20 +3,6 @@
  * @see {@link https://shadcnui-expansions.typeart.cc/docs/multiple-selector}
  */
 import { Command as CommandPrimitive, useCommandState } from "cmdk";
-import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
-import { Avatar } from "components/Avatar/Avatar";
-import { Badge } from "components/Badge/Badge";
-import {
-	Command,
-	CommandGroup,
-	CommandItem,
-	CommandList,
-} from "components/Command/Command";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
 import { useDebouncedValue } from "hooks/debounce";
 import { Info, X } from "lucide-react";
 import {
@@ -32,6 +18,20 @@ import {
 	useState,
 } from "react";
 import { cn } from "utils/cn";
+import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
+import { Avatar } from "#/components/Avatar/Avatar";
+import { Badge } from "#/components/Badge/Badge";
+import {
+	Command,
+	CommandGroup,
+	CommandItem,
+	CommandList,
+} from "#/components/Command/Command";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "#/components/Tooltip/Tooltip";
 
 export interface Option {
 	value: string;

site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx

@@ -1,9 +1,12 @@
 import { checkAuthorization } from "api/queries/authCheck";
 import { organizations } from "api/queries/organizations";
 import type { AuthorizationCheck, Organization } from "api/typesGenerated";
-import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
-import { Avatar } from "components/Avatar/Avatar";
-import { Button } from "components/Button/Button";
+import { Check } from "lucide-react";
+import { type FC, useEffect, useState } from "react";
+import { useQuery } from "react-query";
+import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
+import { Avatar } from "#/components/Avatar/Avatar";
+import { Button } from "#/components/Button/Button";
 import {
 	Command,
 	CommandEmpty,
@@ -11,15 +14,12 @@ import {
 	CommandInput,
 	CommandItem,
 	CommandList,
-} from "components/Command/Command";
+} from "#/components/Command/Command";
 import {
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
-} from "components/Popover/Popover";
-import { Check } from "lucide-react";
-import { type FC, useEffect, useState } from "react";
-import { useQuery } from "react-query";
+} from "#/components/Popover/Popover";
 
 type OrganizationAutocompleteProps = {
 	onChange: (organization: Organization | null) => void;

site/src/components/PaginationWidget/PageButtons.tsx

@@ -1,5 +1,5 @@
-import { Button } from "components/Button/Button";
 import type { FC, ReactNode } from "react";
+import { Button } from "#/components/Button/Button";
 
 type NumberedPageButtonProps = {
 	pageNumber: number;

site/src/components/PaginationWidget/PaginationNavButton.tsx

@@ -1,5 +1,5 @@
-import { Button } from "components/Button/Button";
 import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { Button } from "#/components/Button/Button";
 
 type PaginationNavButtonProps = Omit<
 	ButtonHTMLAttributes<HTMLButtonElement>,

site/src/components/Paywall/Paywall.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { PremiumBadge } from "components/Badges/Badges";
+import { PremiumBadge } from "#/components/Badges/Badges";
 import {
 	Paywall,
 	PaywallContent,

site/src/components/Paywall/Paywall.tsx

@@ -1,8 +1,8 @@
-import { Button } from "components/Button/Button";
 import { CircleCheckBigIcon } from "lucide-react";
 import type React from "react";
 import type { FC } from "react";
 import { cn } from "utils/cn";
+import { Button } from "#/components/Button/Button";
 
 export const Paywall = ({
 	className,

site/src/components/Paywall/PaywallAIGovernance.tsx

@@ -1,5 +1,5 @@
-import { PremiumBadge } from "components/Badges/Badges";
 import { docs } from "utils/docs";
+import { PremiumBadge } from "#/components/Badges/Badges";
 import {
 	Paywall,
 	PaywallContent,

site/src/components/Paywall/PaywallPremium.tsx

@@ -1,6 +1,6 @@
-import { PremiumBadge } from "components/Badges/Badges";
 import type { ReactNode } from "react";
 import { cn } from "utils/cn";
+import { PremiumBadge } from "#/components/Badges/Badges";
 import {
 	Paywall,
 	PaywallContent,

site/src/components/Popover/Popover.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "components/Button/Button";
 import { expect, screen, userEvent, waitFor, within } from "storybook/test";
+import { Button } from "#/components/Button/Button";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
 
 const meta: Meta<typeof Popover> = {

site/src/components/RichParameterInput/RichParameterInput.tsx

@@ -6,22 +6,22 @@ import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
 import type { TemplateVersionParameter } from "api/typesGenerated";
-import { Button } from "components/Button/Button";
-import { ExternalImage } from "components/ExternalImage/ExternalImage";
-import { MemoizedMarkdown } from "components/Markdown/Markdown";
-import { Pill } from "components/Pill/Pill";
-import { Stack } from "components/Stack/Stack";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
 import { CircleAlertIcon, SettingsIcon } from "lucide-react";
 import { type FC, type ReactNode, useState } from "react";
 import type {
 	AutofillBuildParameter,
 	AutofillSource,
 } from "utils/richParameters";
+import { Button } from "#/components/Button/Button";
+import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
+import { MemoizedMarkdown } from "#/components/Markdown/Markdown";
+import { Pill } from "#/components/Pill/Pill";
+import { Stack } from "#/components/Stack/Stack";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "#/components/Tooltip/Tooltip";
 import { TagInput } from "../TagInput/TagInput";
 
 const isBoolean = (parameter: TemplateVersionParameter) => {

site/src/components/SearchField/SearchField.tsx

@@ -1,17 +1,17 @@
+import { useEffectEvent } from "hooks/hookPolyfills";
+import { SearchIcon, XIcon } from "lucide-react";
+import { type Ref, useLayoutEffect, useRef } from "react";
 import {
 	InputGroup,
 	InputGroupAddon,
 	InputGroupButton,
 	InputGroupInput,
-} from "components/InputGroup/InputGroup";
+} from "#/components/InputGroup/InputGroup";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
-import { useEffectEvent } from "hooks/hookPolyfills";
-import { SearchIcon, XIcon } from "lucide-react";
-import { type Ref, useLayoutEffect, useRef } from "react";
+} from "#/components/Tooltip/Tooltip";
 
 export type SearchFieldProps = {
 	value: string;

site/src/components/Select/Select.tsx

@@ -3,13 +3,13 @@
  * @see {@link https://ui.shadcn.com/docs/components/select}
  */
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
 import {
 	Check,
 	ChevronUp,
 	ChevronDown as LucideChevronDown,
 } from "lucide-react";
 import { cn } from "utils/cn";
+import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
 
 export const Select = SelectPrimitive.Root;
 

site/src/components/SelectMenu/SelectMenu.stories.tsx

@@ -1,8 +1,8 @@
 import { withDesktopViewport } from "testHelpers/storybook";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Avatar } from "components/Avatar/Avatar";
 import { action } from "storybook/actions";
 import { userEvent, within } from "storybook/test";
+import { Avatar } from "#/components/Avatar/Avatar";
 import {
 	SelectMenu,
 	SelectMenuButton,

site/src/components/SelectMenu/SelectMenu.tsx

@@ -1,18 +1,5 @@
 import MenuItem, { type MenuItemProps } from "@mui/material/MenuItem";
 import MenuList, { type MenuListProps } from "@mui/material/MenuList";
-import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
-import { Button, type ButtonProps } from "components/Button/Button";
-import {
-	Popover,
-	PopoverContent,
-	type PopoverContentProps,
-	PopoverTrigger,
-	type PopoverTriggerProps,
-} from "components/Popover/Popover";
-import {
-	SearchField,
-	type SearchFieldProps,
-} from "components/SearchField/SearchField";
 import { CheckIcon } from "lucide-react";
 import {
 	Children,
@@ -23,6 +10,19 @@ import {
 	useMemo,
 } from "react";
 import { cn } from "utils/cn";
+import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
+import { Button, type ButtonProps } from "#/components/Button/Button";
+import {
+	Popover,
+	PopoverContent,
+	type PopoverContentProps,
+	PopoverTrigger,
+	type PopoverTriggerProps,
+} from "#/components/Popover/Popover";
+import {
+	SearchField,
+	type SearchFieldProps,
+} from "#/components/SearchField/SearchField";
 
 export const SelectMenu = Popover;
 

site/src/components/SettingsHeader/SettingsHeader.tsx

@@ -1,8 +1,8 @@
 import { cva, type VariantProps } from "class-variance-authority";
-import { Button } from "components/Button/Button";
 import { SquareArrowOutUpRightIcon } from "lucide-react";
 import type { FC, PropsWithChildren, ReactNode } from "react";
 import { cn } from "utils/cn";
+import { Button } from "#/components/Button/Button";
 
 type SettingsHeaderProps = Readonly<
 	PropsWithChildren<{

site/src/components/Sidebar/Sidebar.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Avatar } from "components/Avatar/Avatar";
 import {
 	CalendarCogIcon,
 	FingerprintIcon,
@@ -8,6 +7,7 @@ import {
 	UserIcon,
 } from "lucide-react";
 import { Outlet } from "react-router";
+import { Avatar } from "#/components/Avatar/Avatar";
 import { Sidebar, SidebarHeader, SidebarNavItem } from "./Sidebar";
 
 const meta: Meta<typeof Sidebar> = {

site/src/components/Sidebar/Sidebar.tsx

@@ -1,7 +1,7 @@
-import { Stack } from "components/Stack/Stack";
 import type { ElementType, FC, ReactNode } from "react";
 import { Link, NavLink } from "react-router";
 import { cn } from "utils/cn";
+import { Stack } from "#/components/Stack/Stack";
 
 interface SidebarProps {
 	children?: ReactNode;

site/src/components/StackLabel/StackLabel.tsx

@@ -1,9 +1,9 @@
 import FormHelperText, {
 	type FormHelperTextProps,
 } from "@mui/material/FormHelperText";
-import { Stack } from "components/Stack/Stack";
 import type { ComponentProps, FC } from "react";
 import { cn } from "utils/cn";
+import { Stack } from "#/components/Stack/Stack";
 
 /**
  * Use these components as the label in FormControlLabel when implementing radio

site/src/components/StatusIndicator/StatusIndicator.tsx

@@ -1,11 +1,11 @@
 import { cva, type VariantProps } from "class-variance-authority";
+import { createContext, type FC, useContext } from "react";
+import { cn } from "utils/cn";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
-import { createContext, type FC, useContext } from "react";
-import { cn } from "utils/cn";
+} from "#/components/Tooltip/Tooltip";
 
 const statusIndicatorVariants = cva(
 	"font-medium inline-flex items-center gap-2",

site/src/components/StatusPill/StatusPill.tsx

@@ -1,11 +1,11 @@
-import { Pill } from "components/Pill/Pill";
+import type { FC } from "react";
+import { httpStatusColor } from "utils/http";
+import { Pill } from "#/components/Pill/Pill";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
-import type { FC } from "react";
-import { httpStatusColor } from "utils/http";
+} from "#/components/Tooltip/Tooltip";
 
 interface StatusPillProps {
 	code: number;

site/src/components/TableEmpty/TableEmpty.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { CodeExample } from "components/CodeExample/CodeExample";
-import { Table, TableBody } from "components/Table/Table";
+import { CodeExample } from "#/components/CodeExample/CodeExample";
+import { Table, TableBody } from "#/components/Table/Table";
 import { TableEmpty } from "./TableEmpty";
 
 const meta: Meta<typeof TableEmpty> = {

site/src/components/TableEmpty/TableEmpty.tsx

@@ -1,9 +1,9 @@
+import type { FC } from "react";
 import {
 	EmptyState,
 	type EmptyStateProps,
-} from "components/EmptyState/EmptyState";
-import { TableCell, TableRow } from "components/Table/Table";
-import type { FC } from "react";
+} from "#/components/EmptyState/EmptyState";
+import { TableCell, TableRow } from "#/components/Table/Table";
 
 type TableEmptyProps = EmptyStateProps;
 

site/src/components/TableLoader/TableLoader.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Table, TableBody } from "components/Table/Table";
+import { Table, TableBody } from "#/components/Table/Table";
 import { TableLoader } from "./TableLoader";
 
 const meta: Meta<typeof TableLoader> = {

site/src/components/TableLoader/TableLoader.tsx

@@ -1,9 +1,9 @@
+import { cloneElement, type FC, isValidElement, type ReactNode } from "react";
 import {
 	TableCell,
 	TableRow,
 	type TableRowProps,
-} from "components/Table/Table";
-import { cloneElement, type FC, isValidElement, type ReactNode } from "react";
+} from "#/components/Table/Table";
 import { Loader } from "../Loader/Loader";
 
 export const TableLoader: FC = () => {

site/src/components/TagInput/TagInput.tsx

@@ -1,7 +1,7 @@
-import { Badge } from "components/Badge/Badge";
-import { Button } from "components/Button/Button";
 import { X } from "lucide-react";
 import { type FC, useId, useMemo } from "react";
+import { Badge } from "#/components/Badge/Badge";
+import { Button } from "#/components/Button/Button";
 
 type TagInputProps = {
 	label: string;

site/src/components/Timeline/Timeline.tsx

@@ -1,5 +1,5 @@
-import { TimelineDateRow } from "components/Timeline/TimelineDateRow";
 import { Fragment, type JSX } from "react";
+import { TimelineDateRow } from "#/components/Timeline/TimelineDateRow";
 
 type GetDateFn<TData> = (data: TData) => Date;
 

site/src/components/Timeline/TimelineDateRow.tsx

@@ -1,7 +1,7 @@
 import { css, useTheme } from "@emotion/react";
-import { TableCell, TableRow } from "components/Table/Table";
 import type { FC } from "react";
 import { formatDate } from "utils/time";
+import { TableCell, TableRow } from "#/components/Table/Table";
 import { createDisplayDate } from "./utils";
 
 export interface TimelineDateRow {
@@ -14,10 +14,10 @@ export const TimelineDateRow: FC<TimelineDateRow> = ({ date }) => {
 	return (
 		<TableRow
 			css={css`
-        &:not(:first-of-type) td {
-          border-top: 1px solid ${theme.palette.divider};
-        }
-      `}
+				&:not(:first-of-type) td {
+					border-top: 1px solid ${theme.palette.divider};
+				}
+			`}
 		>
 			<TableCell
 				css={{

site/src/components/Timeline/TimelineEntry.tsx

@@ -1,5 +1,5 @@
-import { TableRow, type TableRowProps } from "components/Table/Table";
 import { cn } from "utils/cn";
+import { TableRow, type TableRowProps } from "#/components/Table/Table";
 
 interface TimelineEntryProps extends TableRowProps {
 	ref?: React.Ref<HTMLTableRowElement>;

site/src/components/Toaster/Toaster.tsx

@@ -1,4 +1,3 @@
-import { Spinner } from "components/Spinner/Spinner";
 import {
 	CheckIcon,
 	InfoIcon,
@@ -8,6 +7,7 @@ import {
 } from "lucide-react";
 import { Toaster as Sonner, type ToasterProps as SonnerProps } from "sonner";
 import { cn } from "utils/cn";
+import { Spinner } from "#/components/Spinner/Spinner";
 
 export const Toaster = ({ ...props }: SonnerProps) => {
 	return (

site/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "components/Button/Button";
+import { Button } from "#/components/Button/Button";
 import {
 	Tooltip,
 	TooltipContent,

site/src/components/UserAutocomplete/UserAutocomplete.tsx

@@ -6,10 +6,15 @@ import type {
 	OrganizationMemberWithUserData,
 	User,
 } from "api/typesGenerated";
-import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown";
-import { Avatar } from "components/Avatar/Avatar";
-import { AvatarData } from "components/Avatar/AvatarData";
-import { Button } from "components/Button/Button";
+import { useDebouncedFunction, useDebouncedValue } from "hooks/debounce";
+import { type FC, useId, useState } from "react";
+import { keepPreviousData, useQuery } from "react-query";
+import { cn } from "utils/cn";
+import { prepareQuery } from "utils/filters";
+import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
+import { Avatar } from "#/components/Avatar/Avatar";
+import { AvatarData } from "#/components/Avatar/AvatarData";
+import { Button } from "#/components/Button/Button";
 import {
 	Combobox,
 	ComboboxContent,
@@ -18,14 +23,9 @@ import {
 	ComboboxItem,
 	ComboboxList,
 	ComboboxTrigger,
-} from "components/Combobox/Combobox";
-import { Label } from "components/Label/Label";
-import { Spinner } from "components/Spinner/Spinner";
-import { useDebouncedFunction, useDebouncedValue } from "hooks/debounce";
-import { type FC, useId, useState } from "react";
-import { keepPreviousData, useQuery } from "react-query";
-import { cn } from "utils/cn";
-import { prepareQuery } from "utils/filters";
+} from "#/components/Combobox/Combobox";
+import { Label } from "#/components/Label/Label";
+import { Spinner } from "#/components/Spinner/Spinner";
 
 // The common properties between users and org members that we need.
 type SelectedUser = {

site/src/components/ai-elements/model-selector.tsx

@@ -1,3 +1,5 @@
+import type { FC } from "react";
+import { cn } from "utils/cn";
 import {
 	Select,
 	SelectContent,
@@ -5,15 +7,13 @@ import {
 	SelectItem,
 	SelectTrigger,
 	SelectValue,
-} from "components/Select/Select";
+} from "#/components/Select/Select";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipProvider,
 	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
-import type { FC } from "react";
-import { cn } from "utils/cn";
+} from "#/components/Tooltip/Tooltip";
 
 export interface ModelSelectorOption {
 	id: string;

site/src/components/ai-elements/tool/ChatSummarizedTool.tsx

@@ -1,12 +1,12 @@
-import { ScrollArea } from "components/ScrollArea/ScrollArea";
+import { CircleAlertIcon, LoaderIcon } from "lucide-react";
+import type React from "react";
+import { cn } from "utils/cn";
+import { ScrollArea } from "#/components/ScrollArea/ScrollArea";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
-import { CircleAlertIcon, LoaderIcon } from "lucide-react";
-import type React from "react";
-import { cn } from "utils/cn";
+} from "#/components/Tooltip/Tooltip";
 import { Response } from "../response";
 import { ToolCollapsible } from "./ToolCollapsible";
 import type { ToolStatus } from "./utils";

site/src/components/ai-elements/tool/ComputerTool.tsx

@@ -1,11 +1,11 @@
+import { CircleAlertIcon, LoaderIcon } from "lucide-react";
+import type React from "react";
+import { cn } from "utils/cn";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
-import { CircleAlertIcon, LoaderIcon } from "lucide-react";
-import type React from "react";
-import { cn } from "utils/cn";
+} from "#/components/Tooltip/Tooltip";
 import { ToolCollapsible } from "./ToolCollapsible";
 import type { ToolStatus } from "./utils";
 

site/src/components/ai-elements/tool/CreateWorkspaceTool.tsx

@@ -1,12 +1,12 @@
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
 import { CircleAlertIcon, ExternalLinkIcon, LoaderIcon } from "lucide-react";
 import type React from "react";
 import { Link } from "react-router";
 import { cn } from "utils/cn";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "#/components/Tooltip/Tooltip";
 import { asRecord, asString, type ToolStatus } from "./utils";
 
 /**

site/src/components/ai-elements/tool/EditFilesTool.tsx

@@ -1,15 +1,15 @@
 import { useTheme } from "@emotion/react";
 import type { FileDiffMetadata } from "@pierre/diffs";
 import { FileDiff } from "@pierre/diffs/react";
-import { ScrollArea } from "components/ScrollArea/ScrollArea";
+import { CircleAlertIcon, LoaderIcon } from "lucide-react";
+import type React from "react";
+import { cn } from "utils/cn";
+import { ScrollArea } from "#/components/ScrollArea/ScrollArea";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
-import { CircleAlertIcon, LoaderIcon } from "lucide-react";
-import type React from "react";
-import { cn } from "utils/cn";
+} from "#/components/Tooltip/Tooltip";
 import { ToolCollapsible } from "./ToolCollapsible";
 import {
 	DIFFS_FONT_STYLE,

site/src/components/ai-elements/tool/ExecuteTool.tsx

@@ -1,6 +1,3 @@
-import { Button } from "components/Button/Button";
-import { CopyButton } from "components/CopyButton/CopyButton";
-import { ScrollArea } from "components/ScrollArea/ScrollArea";
 import {
 	CheckIcon,
 	ChevronDownIcon,
@@ -11,6 +8,9 @@ import {
 import type React from "react";
 import { useRef, useState } from "react";
 import { cn } from "utils/cn";
+import { Button } from "#/components/Button/Button";
+import { CopyButton } from "#/components/CopyButton/CopyButton";
+import { ScrollArea } from "#/components/ScrollArea/ScrollArea";
 import {
 	BORDER_BG_STYLE,
 	COLLAPSED_OUTPUT_HEIGHT,

site/src/components/ai-elements/tool/ListTemplatesTool.tsx

@@ -1,12 +1,12 @@
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
 import { CircleAlertIcon, ExternalLinkIcon, LoaderIcon } from "lucide-react";
 import type React from "react";
 import { Link } from "react-router";
 import { cn } from "utils/cn";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "#/components/Tooltip/Tooltip";
 import { ToolCollapsible } from "./ToolCollapsible";
 import { asRecord, asString, type ToolStatus } from "./utils";
 

site/src/components/ai-elements/tool/ProcessOutputTool.tsx

@@ -1,9 +1,9 @@
-import { CopyButton } from "components/CopyButton/CopyButton";
-import { ScrollArea } from "components/ScrollArea/ScrollArea";
 import { ChevronDownIcon, LoaderIcon } from "lucide-react";
 import type React from "react";
 import { useRef, useState } from "react";
 import { cn } from "utils/cn";
+import { CopyButton } from "#/components/CopyButton/CopyButton";
+import { ScrollArea } from "#/components/ScrollArea/ScrollArea";
 import { COLLAPSED_OUTPUT_HEIGHT } from "./utils";
 
 /**

site/src/components/ai-elements/tool/ProposePlanTool.tsx

@@ -1,13 +1,13 @@
 import { API } from "api/api";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
 import { CircleAlertIcon, LoaderIcon } from "lucide-react";
 import type React from "react";
 import { useQuery } from "react-query";
 import { cn } from "utils/cn";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "#/components/Tooltip/Tooltip";
 import { Response } from "../response";
 import type { ToolStatus } from "./utils";
 

site/src/components/ai-elements/tool/ReadFileTool.tsx

@@ -1,14 +1,14 @@
 import { useTheme } from "@emotion/react";
 import { File as FileViewer } from "@pierre/diffs/react";
-import { ScrollArea } from "components/ScrollArea/ScrollArea";
+import { CircleAlertIcon, LoaderIcon } from "lucide-react";
+import type React from "react";
+import { cn } from "utils/cn";
+import { ScrollArea } from "#/components/ScrollArea/ScrollArea";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
-import { CircleAlertIcon, LoaderIcon } from "lucide-react";
-import type React from "react";
-import { cn } from "utils/cn";
+} from "#/components/Tooltip/Tooltip";
 import { ToolCollapsible } from "./ToolCollapsible";
 import {
 	DIFFS_FONT_STYLE,

site/src/components/ai-elements/tool/ReadTemplateTool.tsx

@@ -1,11 +1,11 @@
+import { CircleAlertIcon, LoaderIcon } from "lucide-react";
+import type React from "react";
+import { cn } from "utils/cn";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
-import { CircleAlertIcon, LoaderIcon } from "lucide-react";
-import type React from "react";
-import { cn } from "utils/cn";
+} from "#/components/Tooltip/Tooltip";
 import type { ToolStatus } from "./utils";
 
 /**

site/src/components/ai-elements/tool/SubagentTool.tsx

@@ -1,4 +1,3 @@
-import { ScrollArea } from "components/ScrollArea/ScrollArea";
 import {
 	BotIcon,
 	ChevronDownIcon,
@@ -10,6 +9,7 @@ import type React from "react";
 import { useState } from "react";
 import { Link } from "react-router";
 import { cn } from "utils/cn";
+import { ScrollArea } from "#/components/ScrollArea/ScrollArea";
 import { Response } from "../response";
 import {
 	isSubagentSuccessStatus,

site/src/components/ai-elements/tool/Tool.tsx

@@ -1,9 +1,9 @@
 import { useTheme } from "@emotion/react";
 import { FileDiff, File as FileViewer } from "@pierre/diffs/react";
 import type * as TypesGen from "api/typesGenerated";
-import { ScrollArea } from "components/ScrollArea/ScrollArea";
 import { type ComponentPropsWithRef, type FC, memo } from "react";
 import { cn } from "utils/cn";
+import { ScrollArea } from "#/components/ScrollArea/ScrollArea";
 import { ChatSummarizedTool } from "./ChatSummarizedTool";
 import { ComputerTool } from "./ComputerTool";
 import { CreateWorkspaceTool } from "./CreateWorkspaceTool";

site/src/components/ai-elements/tool/ToolIcon.tsx

@@ -1,4 +1,3 @@
-import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import {
 	BotIcon,
 	ClipboardListIcon,
@@ -12,6 +11,7 @@ import {
 import type React from "react";
 import { useState } from "react";
 import { cn } from "utils/cn";
+import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
 
 export const ToolIcon: React.FC<{
 	name: string;

site/src/components/ai-elements/tool/WriteFileTool.tsx

@@ -1,15 +1,15 @@
 import { useTheme } from "@emotion/react";
 import type { FileDiffMetadata } from "@pierre/diffs";
 import { FileDiff } from "@pierre/diffs/react";
-import { ScrollArea } from "components/ScrollArea/ScrollArea";
+import { CircleAlertIcon, LoaderIcon } from "lucide-react";
+import type React from "react";
+import { cn } from "utils/cn";
+import { ScrollArea } from "#/components/ScrollArea/ScrollArea";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
-import { CircleAlertIcon, LoaderIcon } from "lucide-react";
-import type React from "react";
-import { cn } from "utils/cn";
+} from "#/components/Tooltip/Tooltip";
 import { ToolCollapsible } from "./ToolCollapsible";
 import {
 	DIFFS_FONT_STYLE,

site/src/contexts/auth/RequireAuth.tsx

@@ -1,11 +1,11 @@
 import { API } from "api/api";
 import { isApiError } from "api/errors";
-import { Loader } from "components/Loader/Loader";
 import { ProxyProvider as ProductionProxyProvider } from "contexts/ProxyContext";
 import { DashboardProvider as ProductionDashboardProvider } from "modules/dashboard/DashboardProvider";
 import { type FC, useEffect } from "react";
 import { Navigate, Outlet, useLocation } from "react-router";
 import { embedRedirect } from "utils/redirect";
+import { Loader } from "#/components/Loader/Loader";
 import { useAuthContext } from "./AuthProvider";
 
 type RequireAuthProps = Readonly<{

site/src/hooks/useAuthenticated.ts

@@ -1,7 +1,7 @@
 import {
 	type AuthContextValue,
 	useAuthContext,
-} from "contexts/auth/AuthProvider";
+} from "#/contexts/auth/AuthProvider";
 
 type RequireKeys<T, R extends keyof T> = Omit<T, R> & {
 	[K in keyof Pick<T, R>]-?: NonNullable<T[K]>;

site/src/hooks/usePagination.ts

@@ -1,4 +1,4 @@
-import { DEFAULT_RECORDS_PER_PAGE } from "components/PaginationWidget/utils";
+import { DEFAULT_RECORDS_PER_PAGE } from "#/components/PaginationWidget/utils";
 
 const paginationKey = "page";