chore: modernize utils/ imports (#23698)

site/e2e/api.ts

@@ -9,7 +9,7 @@ import type { SerpentOption } from "#/api/typesGenerated";
 dayjs.extend(duration);
 dayjs.extend(relativeTime);
 
-import { humanDuration } from "utils/time";
+import { humanDuration } from "#/utils/time";
 import { coderPort, defaultPassword } from "./constants";
 import { findSessionToken, type LoginOptions, randomName } from "./helpers";
 

site/e2e/helpers.ts

@@ -7,12 +7,12 @@ import { type BrowserContext, expect, type Page, test } from "@playwright/test";
 import express from "express";
 import capitalize from "lodash/capitalize";
 import * as ssh from "ssh2";
-import { TarWriter } from "utils/tar";
 import { API } from "#/api/api";
 import type {
 	UpdateTemplateMeta,
 	WorkspaceBuildParameter,
 } from "#/api/typesGenerated";
+import { TarWriter } from "#/utils/tar";
 import {
 	agentPProfPort,
 	coderBinary,

site/src/api/queries/groups.ts

@@ -1,5 +1,4 @@
 import type { QueryClient, UseQueryOptions } from "react-query";
-import { prepareQuery } from "utils/filters";
 import { API } from "#/api/api";
 import type {
 	CreateGroupRequest,
@@ -10,6 +9,7 @@ import type {
 	UsersRequest,
 } from "#/api/typesGenerated";
 import type { UsePaginatedQueryOptions } from "#/hooks/usePaginatedQuery";
+import { prepareQuery } from "#/utils/filters";
 
 type GroupSortOrder = "asc" | "desc";
 

site/src/api/queries/templates.ts

@@ -1,6 +1,4 @@
 import type { MutationOptions, QueryClient, QueryOptions } from "react-query";
-import { delay } from "utils/delay";
-import { getTemplateVersionFiles } from "utils/templateVersion";
 import {
 	API,
 	type GetTemplatesOptions,
@@ -16,6 +14,8 @@ import type {
 	TemplateVersion,
 	UsersRequest,
 } from "#/api/typesGenerated";
+import { delay } from "#/utils/delay";
+import { getTemplateVersionFiles } from "#/utils/templateVersion";
 
 const templateKey = (templateId: string) => ["template", templateId];
 

site/src/api/queries/users.ts

@@ -4,7 +4,6 @@ import type {
 	UseMutationOptions,
 	UseQueryOptions,
 } from "react-query";
-import { prepareQuery } from "utils/filters";
 import { API } from "#/api/api";
 import type {
 	AuthorizationRequest,
@@ -26,6 +25,7 @@ import {
 	type MetadataState,
 } from "#/hooks/useEmbeddedMetadata";
 import type { UsePaginatedQueryOptions } from "#/hooks/usePaginatedQuery";
+import { prepareQuery } from "#/utils/filters";
 import { getAuthorizationKey } from "./authCheck";
 import { cachedQuery } from "./util";
 

site/src/components/Abbr/Abbr.tsx

@@ -1,5 +1,5 @@
 import type { FC, HTMLAttributes } from "react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 type Pronunciation = "shorthand" | "acronym" | "initialism";
 

site/src/components/ActiveUserChart/ActiveUserChart.tsx

@@ -1,6 +1,5 @@
 import type { FC } from "react";
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
-import { formatDate } from "utils/time";
 import {
 	type ChartConfig,
 	ChartContainer,
@@ -14,6 +13,7 @@ import {
 	HelpTooltipText,
 	HelpTooltipTitle,
 } from "#/components/HelpTooltip/HelpTooltip";
+import { formatDate } from "#/utils/time";
 
 const chartConfig = {
 	amount: {

site/src/components/Alert/Alert.tsx

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

site/src/components/AnimatedIcons/Check.tsx

@@ -1,5 +1,5 @@
 import { CheckIcon as LucideCheckIcon } from "lucide-react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 type CheckIconProps = React.ComponentProps<typeof LucideCheckIcon>;
 

site/src/components/AnimatedIcons/ChevronDown.tsx

@@ -1,5 +1,5 @@
 import { ChevronDown as LucideChevronDown } from "lucide-react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 interface ChevronDownIconProps
 	extends React.ComponentProps<typeof LucideChevronDown> {

site/src/components/Autocomplete/Autocomplete.tsx

@@ -5,7 +5,6 @@ import {
 	useCallback,
 	useState,
 } from "react";
-import { cn } from "utils/cn";
 import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
 import {
 	Command,
@@ -21,6 +20,7 @@ import {
 	PopoverTrigger,
 } from "#/components/Popover/Popover";
 import { Spinner } from "#/components/Spinner/Spinner";
+import { cn } from "#/utils/cn";
 
 interface AutocompleteProps<TOption> {
 	value: TOption | null;

site/src/components/Avatar/Avatar.tsx

@@ -13,8 +13,8 @@
 import { useTheme } from "@emotion/react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "utils/cn";
 import { getExternalImageStylesFromUrl } from "#/theme/externalImages";
+import { cn } from "#/utils/cn";
 
 const avatarVariants = cva(
 	"relative flex shrink-0 overflow-hidden rounded border border-solid bg-surface-secondary text-content-secondary",

site/src/components/Badge/Badge.tsx

@@ -4,7 +4,7 @@
  */
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 const badgeVariants = cva(
 	`

site/src/components/Breadcrumb/Breadcrumb.tsx

@@ -4,7 +4,7 @@
  */
 import { Slot } from "@radix-ui/react-slot";
 import { MoreHorizontal } from "lucide-react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 type BreadcrumbProps = React.ComponentPropsWithRef<"nav"> & {
 	separator?: React.ReactNode;

site/src/components/Button/Button.tsx

@@ -4,7 +4,7 @@
  */
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 // Be careful when changing the child styles from the button such as images
 // because they can override the styles from other components like Avatar.

site/src/components/Chart/Chart.tsx

@@ -11,7 +11,7 @@ import {
 	useMemo,
 } from "react";
 import * as RechartsPrimitive from "recharts";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const;

site/src/components/ChatMessageInput/ChatMessageInput.tsx

@@ -32,7 +32,7 @@ import {
 	useMemo,
 	useRef,
 } from "react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 import {
 	$createFileReferenceNode,
 	FileReferenceNode,

site/src/components/ChatMessageInput/FileReferenceNode.tsx

@@ -10,8 +10,8 @@ import {
 } from "lexical";
 import { XIcon } from "lucide-react";
 import { type FC, memo, type ReactNode } from "react";
-import { cn } from "utils/cn";
 import { FileIcon } from "#/components/FileIcon/FileIcon";
+import { cn } from "#/utils/cn";
 
 type SerializedFileReferenceNode = Spread<
 	{

site/src/components/Checkbox/Checkbox.tsx

@@ -4,7 +4,7 @@
  */
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check, Minus } from "lucide-react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 /**
  * To allow for an indeterminate state the checkbox must be controlled, otherwise the checked prop would remain undefined

site/src/components/CollapsibleSummary/CollapsibleSummary.tsx

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import { ChevronRightIcon } from "lucide-react";
 import { type FC, type ReactNode, useState } from "react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 const collapsibleSummaryVariants = cva(
 	`flex items-center gap-1 p-0 bg-transparent border-0 text-inherit cursor-pointer

site/src/components/Combobox/Combobox.tsx

@@ -1,7 +1,6 @@
 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 {
@@ -17,6 +16,7 @@ import {
 	PopoverContent,
 	PopoverTrigger,
 } from "#/components/Popover/Popover";
+import { cn } from "#/utils/cn";
 
 type ComboboxContextProps = {
 	open: boolean;

site/src/components/Command/Command.tsx

@@ -1,6 +1,6 @@
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 export const Command: React.FC<
 	React.ComponentPropsWithRef<typeof CommandPrimitive>

site/src/components/CopyableValue/CopyableValue.tsx

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

site/src/components/CustomLogo/CustomLogo.tsx

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

site/src/components/Dialog/Dialog.tsx

@@ -4,7 +4,7 @@
  */
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 export const Dialog = DialogPrimitive.Root;
 

site/src/components/DropdownMenu/DropdownMenu.tsx

@@ -8,7 +8,7 @@
 
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check } from "lucide-react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 export const DropdownMenu = DropdownMenuPrimitive.Root;
 

site/src/components/DurationField/DurationField.tsx

@@ -9,7 +9,7 @@ import {
 	durationInHours,
 	suggestedTimeUnit,
 	type TimeUnit,
-} from "utils/time";
+} from "#/utils/time";
 
 type DurationFieldProps = Omit<TextFieldProps, "value" | "onChange"> & {
 	valueMs: number;

site/src/components/EmptyState/EmptyState.tsx

@@ -1,5 +1,5 @@
 import type { FC, HTMLAttributes, ReactNode } from "react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
 	/** Text Message to display, placed inside Typography component */

site/src/components/FeatureStageBadge/FeatureStageBadge.tsx

@@ -1,12 +1,12 @@
 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 { cn } from "#/utils/cn";
+import { docs } from "#/utils/docs";
 
 /**
  * All types of feature that we are currently supporting. Defined as record to

site/src/components/Filter/SelectFilter.tsx

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

site/src/components/Filter/UsersFilter.tsx

@@ -1,5 +1,4 @@
 import type { FC } from "react";
-import { docs } from "utils/docs";
 import {
 	Filter,
 	MenuSkeleton,
@@ -14,6 +13,7 @@ import {
 	type SelectFilterOption,
 } from "#/components/Filter/SelectFilter";
 import { StatusIndicatorDot } from "#/components/StatusIndicator/StatusIndicator";
+import { docs } from "#/utils/docs";
 
 const userFilterQuery = {
 	active: "status:active",

site/src/components/Form/Form.tsx

@@ -7,9 +7,9 @@ import {
 	type ReactNode,
 	useContext,
 } from "react";
-import { cn } from "utils/cn";
 import { AlphaBadge, DeprecatedBadge } from "#/components/Badges/Badges";
 import { Stack } from "#/components/Stack/Stack";
+import { cn } from "#/utils/cn";
 
 type FormContextValue = { direction?: "horizontal" | "vertical" };
 

site/src/components/FormField/FormField.tsx

@@ -1,8 +1,8 @@
 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";
+import { cn } from "#/utils/cn";
+import type { FormHelpers } from "#/utils/formUtils";
 
 type FormFieldProps = React.ComponentPropsWithRef<"input"> & {
 	field: FormHelpers;

site/src/components/FullPageLayout/Sidebar.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps, FC, HTMLAttributes } from "react";
 import { Link, type LinkProps } from "react-router";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 import { TopbarIconButton } from "./Topbar";
 
 export const Sidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {

site/src/components/FullPageLayout/Topbar.tsx

@@ -7,9 +7,9 @@ import {
 	type ReactElement,
 	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";
+import { cn } from "#/utils/cn";
 
 export const Topbar: FC<HTMLAttributes<HTMLElement>> = ({
 	className,

site/src/components/HelpTooltip/HelpTooltip.tsx

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

site/src/components/Icons/CoderIcon.tsx

@@ -1,6 +1,6 @@
 import type { SvgIconProps } from "@mui/material/SvgIcon";
 import type { FC } from "react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 /**
  * CoderIcon represents the cloud with brackets Coder brand icon. It does not

site/src/components/InfoTooltip/InfoTooltip.tsx

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

site/src/components/Input/Input.tsx

@@ -2,7 +2,7 @@
  * Copied from shadc/ui on 11/13/2024
  * @see {@link https://ui.shadcn.com/docs/components/input}
  */
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 export const Input: React.FC<React.ComponentPropsWithRef<"input">> = ({
 	className,

site/src/components/InputGroup/InputGroup.tsx

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

site/src/components/Kbd/Kbd.tsx

@@ -1,4 +1,4 @@
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
 	return (

site/src/components/Label/Label.tsx

@@ -4,7 +4,7 @@
  */
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 const labelVariants = cva(
 	"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",

site/src/components/LastSeen/LastSeen.tsx

@@ -1,8 +1,8 @@
 import { useTheme } from "@emotion/react";
 import dayjs from "dayjs";
 import type { FC, HTMLAttributes } from "react";
-import { cn } from "utils/cn";
-import { isAfter, relativeTime, subtractTime } from "utils/time";
+import { cn } from "#/utils/cn";
+import { isAfter, relativeTime, subtractTime } from "#/utils/time";
 
 interface LastSeenProps
 	extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {

site/src/components/Latency/Latency.tsx

@@ -1,14 +1,14 @@
 import CircularProgress from "@mui/material/CircularProgress";
 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";
+import { cn } from "#/utils/cn";
+import { getLatencyColor } from "#/utils/latency";
 
 interface LatencyProps {
 	latency?: number;

site/src/components/Link/Link.tsx

@@ -1,7 +1,7 @@
 import { Slot, Slottable } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import { SquareArrowOutUpRightIcon } from "lucide-react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 const linkVariants = cva(
 	`relative inline-flex items-center no-underline font-medium text-content-link hover:cursor-pointer

site/src/components/Loader/Loader.tsx

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

site/src/components/Markdown/Markdown.tsx

@@ -13,7 +13,6 @@ import ReactMarkdown, { type Options } from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { dracula } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import gfm from "remark-gfm";
-import { cn } from "utils/cn";
 import {
 	Table,
 	TableBody,
@@ -22,6 +21,7 @@ import {
 	TableRow,
 } from "#/components/Table/Table";
 import colors from "#/theme/tailwindColors";
+import { cn } from "#/utils/cn";
 
 interface MarkdownProps {
 	/**

site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx

@@ -16,7 +16,6 @@ import {
 	useRef,
 	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";
@@ -32,6 +31,7 @@ import {
 	TooltipTrigger,
 } from "#/components/Tooltip/Tooltip";
 import { useDebouncedValue } from "#/hooks/debounce";
+import { cn } from "#/utils/cn";
 
 export interface Option {
 	value: string;

site/src/components/MultiUserSelect/MultiUserSelect.tsx

@@ -20,8 +20,8 @@ import { useDebouncedFunction } from "hooks/debounce";
 import { useClickableTableRow } from "hooks/useClickableTableRow";
 import { type FC, type ReactNode, useState } from "react";
 import { keepPreviousData, useQuery } from "react-query";
-import { cn } from "utils/cn";
-import { prepareQuery } from "utils/filters";
+import { cn } from "#/utils/cn";
+import { prepareQuery } from "#/utils/filters";
 
 const DEBOUNCE_MS = 750;
 

site/src/components/PageHeader/PageHeader.tsx

@@ -1,5 +1,5 @@
 import type { FC, PropsWithChildren, ReactNode } from "react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 interface PageHeaderProps {
 	actions?: ReactNode;

site/src/components/Paywall/Paywall.tsx

@@ -1,8 +1,8 @@
 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";
+import { cn } from "#/utils/cn";
 
 export const Paywall = ({
 	className,

site/src/components/Paywall/PaywallAIGovernance.tsx

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

site/src/components/Paywall/PaywallPremium.tsx

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

site/src/components/Popover/Popover.tsx

@@ -3,7 +3,7 @@
  * @see {@link https://ui.shadcn.com/docs/components/popover}
  */
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 export type PopoverContentProps = PopoverPrimitive.PopoverContentProps;
 

site/src/components/RadioGroup/RadioGroup.tsx

@@ -4,7 +4,7 @@
  */
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { Circle } from "lucide-react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 export const RadioGroup: React.FC<
 	React.ComponentPropsWithRef<typeof RadioGroupPrimitive.Root>

site/src/components/RichParameterInput/RichParameterInput.tsx

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

site/src/components/ScrollArea/ScrollArea.tsx

@@ -4,7 +4,7 @@
  */
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { useCallback, useRef } from "react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 interface ScrollAreaProps
 	extends React.ComponentPropsWithRef<typeof ScrollAreaPrimitive.Root> {

site/src/components/Search/Search.tsx

@@ -1,6 +1,6 @@
 import { SearchIcon } from "lucide-react";
 import type { FC, HTMLAttributes, InputHTMLAttributes, Ref } from "react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 interface SearchProps extends HTMLAttributes<HTMLDivElement> {
 	ref?: Ref<HTMLDivElement>;

site/src/components/Select/Select.tsx

@@ -8,8 +8,8 @@ import {
 	ChevronUp,
 	ChevronDown as LucideChevronDown,
 } from "lucide-react";
-import { cn } from "utils/cn";
 import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
+import { cn } from "#/utils/cn";
 
 export const Select = SelectPrimitive.Root;
 

site/src/components/SelectMenu/SelectMenu.tsx

@@ -9,7 +9,6 @@ import {
 	type ReactElement,
 	useMemo,
 } from "react";
-import { cn } from "utils/cn";
 import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
 import { Button, type ButtonProps } from "#/components/Button/Button";
 import {
@@ -23,6 +22,7 @@ import {
 	SearchField,
 	type SearchFieldProps,
 } from "#/components/SearchField/SearchField";
+import { cn } from "#/utils/cn";
 
 export const SelectMenu = Popover;
 

site/src/components/Separator/Separator.tsx

@@ -4,7 +4,7 @@ import * as SeparatorPrimitive from "@radix-ui/react-separator";
  * @see {@link https://ui.shadcn.com/docs/components/separator}
  */
 import type * as React from "react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 function Separator({
 	className,

site/src/components/SettingsHeader/SettingsHeader.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { docs } from "utils/docs";
+import { docs } from "#/utils/docs";
 import {
 	SettingsHeader,
 	SettingsHeaderDescription,

site/src/components/SettingsHeader/SettingsHeader.tsx

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

site/src/components/Sidebar/Sidebar.tsx

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

site/src/components/Skeleton/Skeleton.tsx

@@ -2,7 +2,7 @@
  * Copied from shadc/ui on 06/20/2025
  * @see {@link https://ui.shadcn.com/docs/components/skeleton}
  */
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
 	return (

site/src/components/Slider/Slider.tsx

@@ -3,7 +3,7 @@
  * @see {@link https://ui.shadcn.com/docs/components/slider}
  */
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 export const Slider: React.FC<
 	React.ComponentPropsWithRef<typeof SliderPrimitive.Root>

site/src/components/Spinner/Spinner.tsx

@@ -7,7 +7,7 @@
 import isChromatic from "chromatic/isChromatic";
 import { cva, type VariantProps } from "class-variance-authority";
 import type { ReactNode } from "react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 const leaves = Array.from({ length: 8 }).map((_, i) => i);
 

site/src/components/StackLabel/StackLabel.tsx

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

site/src/components/Stats/Stats.tsx

@@ -1,5 +1,5 @@
 import type { FC, HTMLAttributes, ReactNode } from "react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 export const Stats: FC<HTMLAttributes<HTMLDivElement>> = ({
 	children,

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 { cn } from "#/utils/cn";
 
 const statusIndicatorVariants = cva(
 	"font-medium inline-flex items-center gap-2",

site/src/components/StatusPill/StatusPill.tsx

@@ -1,11 +1,11 @@
 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 { httpStatusColor } from "#/utils/http";
 
 interface StatusPillProps {
 	code: number;

site/src/components/Switch/Switch.tsx

@@ -3,7 +3,7 @@
  * @see {@link https://ui.shadcn.com/docs/components/switch}
  */
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 export const Switch: React.FC<
 	React.ComponentPropsWithRef<typeof SwitchPrimitives.Root>

site/src/components/Table/Table.tsx

@@ -3,7 +3,7 @@
  * @see {@link https://ui.shadcn.com/docs/components/table}
  */
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 export const Table: React.FC<React.ComponentPropsWithRef<"table">> = ({
 	className,

site/src/components/Tabs/Tabs.tsx

@@ -9,7 +9,7 @@ import {
 	useRef,
 } from "react";
 import { Link, type LinkProps } from "react-router";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 // Keeping this for now because of a workaround in WorkspaceBUildPageView
 export const TAB_PADDING_X = 16;

site/src/components/Textarea/Textarea.tsx

@@ -2,7 +2,7 @@
  * Copied from shadc/ui on 11/13/2024
  * @see {@link https://ui.shadcn.com/docs/components/textarea}
  */
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 export const Textarea: React.FC<React.ComponentPropsWithRef<"textarea">> = ({
 	className,

site/src/components/Timeline/TimelineDateRow.tsx

@@ -1,7 +1,7 @@
 import { css, useTheme } from "@emotion/react";
 import type { FC } from "react";
-import { formatDate } from "utils/time";
 import { TableCell, TableRow } from "#/components/Table/Table";
+import { formatDate } from "#/utils/time";
 import { createDisplayDate } from "./utils";
 
 export interface TimelineDateRow {

site/src/components/Timeline/TimelineEntry.tsx

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

site/src/components/Timeline/utils.ts

@@ -1,6 +1,6 @@
 import dayjs from "dayjs";
 import calendar from "dayjs/plugin/calendar";
-import { formatDate } from "utils/time";
+import { formatDate } from "#/utils/time";
 
 dayjs.extend(calendar);
 

site/src/components/Toaster/Toaster.tsx

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

site/src/components/Tooltip/Tooltip.tsx

@@ -3,7 +3,7 @@
  * @see {@link https://ui.shadcn.com/docs/components/tooltip}
  */
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 export const TooltipProvider = TooltipPrimitive.Provider;
 

site/src/components/UserAutocomplete/UserAutocomplete.tsx

@@ -1,7 +1,5 @@
 import { type FC, useId, useState } from "react";
 import { keepPreviousData, useQuery } from "react-query";
-import { cn } from "utils/cn";
-import { prepareQuery } from "utils/filters";
 import { getErrorMessage } from "#/api/errors";
 import { organizationMembers } from "#/api/queries/organizations";
 import { users, workspaceAvailableUsers } from "#/api/queries/users";
@@ -26,6 +24,8 @@ import {
 import { Label } from "#/components/Label/Label";
 import { Spinner } from "#/components/Spinner/Spinner";
 import { useDebouncedFunction, useDebouncedValue } from "#/hooks/debounce";
+import { cn } from "#/utils/cn";
+import { prepareQuery } from "#/utils/filters";
 
 // The common properties between users and org members that we need.
 type SelectedUser = {

site/src/components/ai-elements/conversation.tsx

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithRef } from "react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 type ConversationProps = ComponentPropsWithRef<"div">;
 

site/src/components/ai-elements/message.tsx

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithRef } from "react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 type MessageProps = ComponentPropsWithRef<"div">;
 

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

@@ -1,5 +1,4 @@
 import type { FC } from "react";
-import { cn } from "utils/cn";
 import {
 	Select,
 	SelectContent,
@@ -14,6 +13,7 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "#/components/Tooltip/Tooltip";
+import { cn } from "#/utils/cn";
 
 export interface ModelSelectorOption {
 	id: string;

site/src/components/ai-elements/response.tsx

@@ -10,7 +10,7 @@ import {
 	Streamdown,
 	type UrlTransform,
 } from "streamdown";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 interface ResponseProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
 	children: string;

site/src/components/ai-elements/shimmer.tsx

@@ -2,7 +2,7 @@ import type { MotionProps } from "motion/react";
 import { MotionConfig, motion } from "motion/react";
 import type { CSSProperties, ElementType, JSX } from "react";
 
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 type MotionHTMLProps = MotionProps & Record<string, unknown>;
 

site/src/components/ai-elements/thinking.tsx

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithRef } from "react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 type ThinkingProps = ComponentPropsWithRef<"div">;
 

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

@@ -1,12 +1,12 @@
 import { LoaderIcon, TriangleAlertIcon } 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 { cn } from "#/utils/cn";
 import { Response } from "../response";
 import { ToolCollapsible } from "./ToolCollapsible";
 import type { ToolStatus } from "./utils";

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

@@ -1,13 +1,13 @@
 import { LoaderIcon, TriangleAlertIcon } from "lucide-react";
 import type React from "react";
 import { useState } from "react";
-import { cn } from "utils/cn";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
 } from "#/components/Tooltip/Tooltip";
 import { ImageLightbox } from "#/pages/AgentsPage/components/ImageLightbox";
+import { cn } from "#/utils/cn";
 import { ToolCollapsible } from "./ToolCollapsible";
 import type { ToolStatus } from "./utils";
 

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

@@ -1,12 +1,12 @@
 import { ExternalLinkIcon, LoaderIcon, TriangleAlertIcon } 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 { cn } from "#/utils/cn";
 import { asRecord, asString, type ToolStatus } from "./utils";
 
 /**

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

@@ -3,13 +3,13 @@ import type { FileDiffMetadata } from "@pierre/diffs";
 import { FileDiff } from "@pierre/diffs/react";
 import { LoaderIcon, TriangleAlertIcon } 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 { cn } from "#/utils/cn";
 import { ToolCollapsible } from "./ToolCollapsible";
 import {
 	DIFFS_FONT_STYLE,

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

@@ -9,7 +9,6 @@ import {
 } from "lucide-react";
 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";
@@ -18,6 +17,7 @@ import {
 	TooltipContent,
 	TooltipTrigger,
 } from "#/components/Tooltip/Tooltip";
+import { cn } from "#/utils/cn";
 import {
 	BORDER_BG_STYLE,
 	COLLAPSED_OUTPUT_HEIGHT,

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

@@ -1,12 +1,12 @@
 import { ExternalLinkIcon, LoaderIcon, TriangleAlertIcon } 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 { cn } from "#/utils/cn";
 import { ToolCollapsible } from "./ToolCollapsible";
 import { asRecord, asString, type ToolStatus } from "./utils";
 

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

@@ -1,9 +1,9 @@
 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 { cn } from "#/utils/cn";
 import { COLLAPSED_OUTPUT_HEIGHT } from "./utils";
 
 /**

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

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

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

@@ -2,13 +2,13 @@ import { useTheme } from "@emotion/react";
 import { File as FileViewer } from "@pierre/diffs/react";
 import { LoaderIcon, TriangleAlertIcon } 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 { cn } from "#/utils/cn";
 import { ToolCollapsible } from "./ToolCollapsible";
 import {
 	DIFFS_FONT_STYLE,

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

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

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

@@ -10,8 +10,8 @@ import {
 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 { cn } from "#/utils/cn";
 import { Response } from "../response";
 import { useDesktopPanel } from "./DesktopPanelContext";
 import { InlineDesktopPreview } from "./InlineDesktopPreview";

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

@@ -2,7 +2,6 @@ import { useTheme } from "@emotion/react";
 import { FileDiff, File as FileViewer } from "@pierre/diffs/react";
 import { LoaderIcon, TriangleAlertIcon } from "lucide-react";
 import { type ComponentPropsWithRef, type FC, memo } from "react";
-import { cn } from "utils/cn";
 import type * as TypesGen from "#/api/typesGenerated";
 import { ScrollArea } from "#/components/ScrollArea/ScrollArea";
 import {
@@ -10,6 +9,7 @@ import {
 	TooltipContent,
 	TooltipTrigger,
 } from "#/components/Tooltip/Tooltip";
+import { cn } from "#/utils/cn";
 import { ChatSummarizedTool } from "./ChatSummarizedTool";
 import { ComputerTool } from "./ComputerTool";
 import { CreateWorkspaceTool } from "./CreateWorkspaceTool";

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

@@ -1,7 +1,7 @@
 import { ChevronDownIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
 import { useState } from "react";
-import { cn } from "utils/cn";
+import { cn } from "#/utils/cn";
 
 interface ToolCollapsibleProps {
 	children: ReactNode;