Aug 18, 2025 · Aug 13, 2025 · Aug 13, 2025 · Aug 13, 2025 · Aug 13, 2025 · Aug 13, 2025
diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx
 import type { FC, HTMLAttributes, ReactNode } from "react";
 import { cn } from "utils/cn";

 export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
 /** Text Message to display, placed inside Typography component */
 cta,
 image,
 isCompact,
 className,
 ...attrs
 }) => {
 return (
 <div
 css={[
 {
 overflow: "hidden",
 display: "flex",
 flexDirection: "column",
 justifyContent: "center",
 alignItems: "center",
 textAlign: "center",
 minHeight: 360,
 padding: "80px 40px",
 position: "relative",
 },
 isCompact && {
 minHeight: 180,
 padding: "10px 40px",
 },
 ]}
 className={cn(
 "overflow-hidden flex flex-col justify-center items-center text-center min-h-96 py-20 px-10 relative",
 isCompact && "min-h-44 py-2.5",
 className,
 )}
 {...attrs}
 >
 <h5css={{ fontSize: 24, fontWeight: 500, margin: 0 }}>{message}</h5>
 <h5className="text-2xl font-medium m-0">{message}</h5>
 {description && (
 <p
 css={(theme) => ({
 marginTop: 16,
 fontSize: 16,
 lineHeight: "140%",
 maxWidth: 480,
 color: theme.palette.text.secondary,
 })}
 >
 <p className="mt-4 line-height-[140%] max-w-md text-content-secondary">
 {description}
 </p>
 )}
 {cta && <divcss={{ marginTop: 24 }}>{cta}</div>}
 {cta && <divclassName="mt-6">{cta}</div>}
 {image}
 </div>
 );
diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx
 }) => {
 return (
 <Margins size="small">
 <PageHeadercss={{ paddingBottom: 24 }}>
 <PageHeaderclassName="pb-6">
 <PageHeaderTitle>{title}</PageHeaderTitle>
 {detail && <PageHeaderSubtitle>{detail}</PageHeaderSubtitle>}
 </PageHeader>
diff --git a/site/src/components/LastSeen/LastSeen.tsx b/site/src/components/LastSeen/LastSeen.tsx
 return (
 <span
 data-chromatic="ignore"
 css={{ color }}
 style={{ color }}
 {...attrs}
 className={cn(["whitespace-nowrap", className])}
 >
diff --git a/site/src/components/Latency/Latency.tsx b/site/src/components/Latency/Latency.tsx
 if (isLoading) {
 return (
 <Tooltip title="Loading latency...">
 <CircularProgress
 size={size}
 css={{ marginLeft: "auto" }}
 style={{ color }}
 />
 <CircularProgress size={size} className="ml-auto" style={{ color }} />
 </Tooltip>
 );
 }
 const notAvailableText = "Latency not available";
 return (
 <Tooltip title={notAvailableText}>
 <CircleHelpIcon
 className="size-icon-sm"
 css={{
 marginLeft: "auto",
 }}
 style={{ color }}
 />
 <>
 <span css={{ ...visuallyHidden }}>{notAvailableText}</span>

 <CircleHelpIcon className="ml-auto size-icon-sm" style={{ color }} />
 </>
 </Tooltip>
 );
 }

 return (
 <p css={{ fontSize: 13, margin: "0 0 0auto" }} style={{ color }}>
 <div className="ml-auto text-sm" style={{ color }}>
 <span css={{ ...visuallyHidden }}>Latency: </span>
 {latency.toFixed(0)}
 <Abbr title="milliseconds">ms</Abbr>
 </p>
 </div>
 );
 };
diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx
 );

 return (
 <div
 css={{
 justifyContent: "center",
 alignItems: "center",
 display: "flex",
 flexDirection: "row",
 padding: "0 20px",
 columnGap: "6px",
 }}
 >
 <div className="flex flex-row items-center justify-center px-5 gap-x-1.5">
 <PaginationNavButton
 disabledMessage="You are already on the first page"
 disabled={isPrevDisabled}
diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx
 return (
 <div css={styles.root}>
 <div>
 <Stack direction="row" alignItems="center"css={{ marginBottom: 24 }}>
 <h5css={styles.title}>{message}</h5>
 <Stack direction="row" alignItems="center"className="mb-6">
 <h5className="font-semibold font-inherit text-xl m-0">{message}</h5>
 <PremiumBadge />
 </Stack>

 {description && <p css={styles.description}>{description}</p>}
 {description && (
 <p className="font-inherit max-w-md text-sm">{description}</p>
 )}
 <Link
 href={documentationLink}
 target="_blank"
 rel="noreferrer"
 css={{ fontWeight: 600 }}
 className="font-semibold"
 >
 Read the documentation
 </Link>
 </div>
 <divcss={styles.separator} />
 <divclassName="w-px h-[220px] bg-highlight-purple/50 ml-2" />
 <Stack direction="column" alignItems="left" spacing={3}>
 <ulcss={styles.featureList}>
 <ulclassName="m-0 px-6 text-sm font-medium">
 <li css={styles.feature}>
 <FeatureIcon />
 High availability & workspace proxies
 Unlimited Git & external auth integrations
 </li>
 </ul>
 <divcss={styles.learnButton}>
 <divclassName="px-7">
 <Button asChild>
 <a
 href="https://coder.com/pricing#compare-plans"
 backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.premium.background})`,
 border: `1px solid ${theme.branding.premium.border}`,
 }),
 title: {
 fontWeight: 600,
 fontFamily: "inherit",
 fontSize: 22,
 margin: 0,
 },
 description: () => ({
 fontFamily: "inherit",
 maxWidth: 460,
 fontSize: 14,
 }),
 separator: (theme) => ({
 width: 1,
 height: 220,
 backgroundColor: theme.branding.premium.divider,
 marginLeft: 8,
 }),
 learnButton: {
 padding: "0 28px",
 },
 featureList: {
 listStyle: "none",
 margin: 0,
 padding: "0 24px",
 fontSize: 14,
 fontWeight: 500,
 },
 featureIcon: (theme) => ({
 color: theme.roles.active.fill.outline,
 }),
 feature: {
 display: "flex",
 alignItems: "center",
diff --git a/site/src/components/SelectMenu/SelectMenu.stories.tsx b/site/src/components/SelectMenu/SelectMenu.stories.tsx
 <SelectMenu>
 <SelectMenuTrigger>
 <SelectMenuButton
 css={{ width: 200 }}
 className="w-48"
 startIcon={<Avatar size="sm" fallback={selectedOpt} />}
 >
 {selectedOpt}
 return (
 <SelectMenu>
 <SelectMenuTrigger>
 <SelectMenuButtoncss={{ width: 200 }}>All users</SelectMenuButton>
 <SelectMenuButtonclassName="w-48">All users</SelectMenuButton>
 </SelectMenuTrigger>
 <SelectMenuContent>
 <SelectMenuSearch onChange={action("search")} />
diff --git a/site/src/components/SelectMenu/SelectMenu.tsx b/site/src/components/SelectMenu/SelectMenu.tsx
 type ReactElement,
 useMemo,
 } from "react";
 import { cn } from "utils/cn";

 const SIDE_PADDING = 16;

 );
 };

 export const SelectMenuList: FC<MenuListProps> = (props) => {
 export const SelectMenuList: FC<MenuListProps> = ({
 children,
 className,
 ...attrs
 }) => {
 const items = useMemo(() => {
 letchildren = Children.toArray(props.children);
 if (!children.every(isValidElement)) {
 letitems = Children.toArray(children);
 if (!items.every(isValidElement)) {
 throw new Error("SelectMenuList only accepts MenuItem children");
 }
 children = moveSelectedElementToFirst(
 children as ReactElement<MenuItemProps>[],
 );
 return children;
 }, [props.children]);
 items = moveSelectedElementToFirst(items as ReactElement<MenuItemProps>[]);
 return items;
 }, [children]);

 return (
 <MenuListcss={{ maxHeight: 480 }} {...props}>
 <MenuListclassName={cn("max-h-[480px]", className)} {...attrs}>
 {items}
 </MenuList>
 );
 return newItems;
 }

 export const SelectMenuIcon: FC<HTMLProps<HTMLDivElement>> = (props) => {
 return <div css={{ marginRight: 16 }} {...props} />;
 export const SelectMenuIcon: FC<HTMLProps<HTMLDivElement>> = ({
 children,
 className,
 ...attrs
 }) => {
 return (
 <div className={cn("mr-4", className)} {...attrs}>
 {children}
 </div>
 );
 };

 export const SelectMenuItem: FC<MenuItemProps> = (props) => {
 export const SelectMenuItem: FC<MenuItemProps> = ({
 children,
 className,
 selected,
 ...attrs
 }) => {
 return (
 <MenuItem
 css={{
 fontSize: 14,
 gap: 0,
 lineHeight: 1,
 padding: `12px ${SIDE_PADDING}px`,
 }}
 {...props}
 className={cn("text-sm gap-0 leading-none py-3 px-4", className)}
 {...attrs}
 >
 {props.children}
 {props.selected && (
 <CheckIcon className="size-icon-xs" css={{ marginLeft: "auto" }} />
 )}
 {children}
 {selected && <CheckIcon className="size-icon-xs ml-auto" />}
 </MenuItem>
 );
 };
diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx
 }
 >
 <Stack alignItems="center" spacing={1.5} direction="row">
 <Iconcss={{ width: 16, height: 16 }} />
 <IconclassName="size-4" />
 {children}
 </Stack>
 </NavLink>
diff --git a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
 return (
 <div
 data-chromatic="ignore"
 css={{
 padding: "8px 0",
 height: "100%",
 className="py-2 h-full"
 style={{
 backgroundColor: theme.monaco.colors["editor.background"],
 }}
 >
diff --git a/site/src/components/TableEmpty/TableEmpty.stories.tsx b/site/src/components/TableEmpty/TableEmpty.stories.tsx
 <img
 src="/featured/templates.webp"
 alt=""
 css={{
 maxWidth: 800,
 height: 320,
 overflow: "hidden",
 objectFit: "cover",
 objectPosition: "top",
 }}
 className="max-w-3xl h-[320px] overflow-hidden object-cover object-top"
 />
 ),
 style: { paddingBottom: 0 },
diff --git a/site/src/components/TableEmpty/TableEmpty.tsx b/site/src/components/TableEmpty/TableEmpty.tsx
 export const TableEmpty: FC<TableEmptyProps> = (props) => {
 return (
 <TableRow>
 <TableCell colSpan={999}css={{ padding: "0 !important" }}>
 <TableCell colSpan={999}className="p-0!">
 <EmptyState {...props} />
 </TableCell>
 </TableRow>
diff --git a/site/src/components/TableToolbar/TableToolbar.tsx b/site/src/components/TableToolbar/TableToolbar.tsx

 export const TableToolbar: FC<PropsWithChildren> = ({ children }) => {
 return (
 <div
 css={(theme) => ({
 fontSize: 13,
 marginBottom: "8px",
 marginTop: 0,
 height: "36px", // The size of a small button
 color: theme.palette.text.secondary,
 display: "flex",
 alignItems: "center",
 "& strong": {
 color: theme.palette.text.primary,
 },
 })}
 >
 <div className="text-sm mb-2 mt-0 h-9 text-content-secondary flex items-center [&_strong]:text-content-primary">
 {children}
 </div>
 );

 if (isLoading) {
 return (
 <divcss={{ height: 24, display: "flex", alignItems: "center" }}>
 <divclassName="h-6flex items-center">
 <Skeleton variant="text" width={160} height={16} />
 </div>
 );
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,5 @@
		import type { FC, HTMLAttributes, ReactNode } from "react";
		import { cn } from "utils/cn";

		export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
		/** Text Message to display, placed inside Typography component */
Expand All		@@ -21,44 +22,25 @@ export const EmptyState: FC<EmptyStateProps> = ({
		cta,
		image,
		isCompact,
		className,
		...attrs
		}) => {
		return (
		<div
		css={[
		{
		overflow: "hidden",
		display: "flex",
		flexDirection: "column",
		justifyContent: "center",
		alignItems: "center",
		textAlign: "center",
		minHeight: 360,
		padding: "80px 40px",
		position: "relative",
		},
		isCompact && {
		minHeight: 180,
		padding: "10px 40px",
		},
		]}
		className={cn(
		"overflow-hidden flex flex-col justify-center items-center text-center min-h-96 py-20 px-10 relative",
		isCompact && "min-h-44 py-2.5",
		className,
		)}
		{...attrs}
		>
		<h5css={{ fontSize: 24, fontWeight: 500, margin: 0 }}>{message}</h5>
		<h5className="text-2xl font-medium m-0">{message}</h5>
		{description && (
		<p
		css={(theme) => ({
		marginTop: 16,
		fontSize: 16,
		lineHeight: "140%",
		maxWidth: 480,
		color: theme.palette.text.secondary,
		})}
		>
		<p className="mt-4 line-height-[140%] max-w-md text-content-secondary">
		{description}
		</p>
		)}
		{cta && <divcss={{ marginTop: 24 }}>{cta}</div>}
		{cta && <divclassName="mt-6">{cta}</div>}
		{image}
		</div>
		);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -19,7 +19,7 @@ export const FullPageForm: FC<FullPageFormProps> = ({
		}) => {
		return (
		<Margins size="small">
		<PageHeadercss={{ paddingBottom: 24 }}>
		<PageHeaderclassName="pb-6">
		<PageHeaderTitle>{title}</PageHeaderTitle>
		{detail && <PageHeaderSubtitle>{detail}</PageHeaderSubtitle>}
		</PageHeader>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -40,7 +40,7 @@ export const LastSeen: FC<LastSeenProps> = ({ at, className, ...attrs }) => {
		return (
		<span
		data-chromatic="ignore"
		css={{ color }}
		style={{ color }}
		{...attrs}
		className={cn(["whitespace-nowrap", className])}
		>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,11 +25,7 @@ export const Latency: FC<LatencyProps> = ({
		if (isLoading) {
		return (
		<Tooltip title="Loading latency...">
		<CircularProgress
		size={size}
		css={{ marginLeft: "auto" }}
		style={{ color }}
		/>
		<CircularProgress size={size} className="ml-auto" style={{ color }} />
		</Tooltip>
		);
		}
Expand All		@@ -38,22 +34,20 @@ export const Latency: FC<LatencyProps> = ({
		const notAvailableText = "Latency not available";
		return (
		<Tooltip title={notAvailableText}>
		<CircleHelpIcon
		className="size-icon-sm"
		css={{
		marginLeft: "auto",
		}}
		style={{ color }}
		/>
		<>
		<span css={{ ...visuallyHidden }}>{notAvailableText}</span>

		<CircleHelpIcon className="ml-auto size-icon-sm" style={{ color }} />
		</>
		</Tooltip>
		);
		}

		return (
		<p css={{ fontSize: 13, margin: "0 0 0auto" }} style={{ color }}>
		<div className="ml-auto text-sm" style={{ color }}>
		<span css={{ ...visuallyHidden }}>Latency: </span>
		{latency.toFixed(0)}
		<Abbr title="milliseconds">ms</Abbr>
		</p>
		</div>
		);
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -39,16 +39,7 @@ export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
		);

		return (
		<div
		css={{
		justifyContent: "center",
		alignItems: "center",
		display: "flex",
		flexDirection: "row",
		padding: "0 20px",
		columnGap: "6px",
		}}
		>
		<div className="flex flex-row items-center justify-center px-5 gap-x-1.5">
		<PaginationNavButton
		disabledMessage="You are already on the first page"
		disabled={isPrevDisabled}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,24 +20,26 @@ export const Paywall: FC<PaywallProps> = ({
		return (
		<div css={styles.root}>
		<div>
		<Stack direction="row" alignItems="center"css={{ marginBottom: 24 }}>
		<h5css={styles.title}>{message}</h5>
		<Stack direction="row" alignItems="center"className="mb-6">
		<h5className="font-semibold font-inherit text-xl m-0">{message}</h5>
		<PremiumBadge />
		</Stack>

		{description && <p css={styles.description}>{description}</p>}
		{description && (
		<p className="font-inherit max-w-md text-sm">{description}</p>
		)}
		<Link
		href={documentationLink}
		target="_blank"
		rel="noreferrer"
		css={{ fontWeight: 600 }}
		className="font-semibold"
		>
		Read the documentation
		</Link>
		</div>
		<divcss={styles.separator} />
		<divclassName="w-px h-[220px] bg-highlight-purple/50 ml-2" />
		<Stack direction="column" alignItems="left" spacing={3}>
		<ulcss={styles.featureList}>
		<ulclassName="m-0 px-6 text-sm font-medium">
		<li css={styles.feature}>
		<FeatureIcon />
		High availability & workspace proxies
Expand All		@@ -55,7 +57,7 @@ export const Paywall: FC<PaywallProps> = ({
		Unlimited Git & external auth integrations
		</li>
		</ul>
		<divcss={styles.learnButton}>
		<divclassName="px-7">
		<Button asChild>
		<a
		href="https://coder.com/pricing#compare-plans"
Expand DownExpand Up		@@ -98,36 +100,6 @@ const styles = {
		backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.premium.background})`,
		border: `1px solid ${theme.branding.premium.border}`,
		}),
		title: {
		fontWeight: 600,
		fontFamily: "inherit",
		fontSize: 22,
		margin: 0,
		},
		description: () => ({
		fontFamily: "inherit",
		maxWidth: 460,
		fontSize: 14,
		}),
		separator: (theme) => ({
		width: 1,
		height: 220,
		backgroundColor: theme.branding.premium.divider,
		marginLeft: 8,
		}),
		learnButton: {
		padding: "0 28px",
		},
		featureList: {
		listStyle: "none",
		margin: 0,
		padding: "0 24px",
		fontSize: 14,
		fontWeight: 500,
		},
		featureIcon: (theme) => ({
		color: theme.roles.active.fill.outline,
		}),
		feature: {
		display: "flex",
		alignItems: "center",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -76,7 +76,7 @@ export const LongButtonText: Story = {
		<SelectMenu>
		<SelectMenuTrigger>
		<SelectMenuButton
		css={{ width: 200 }}
		className="w-48"
		startIcon={<Avatar size="sm" fallback={selectedOpt} />}
		>
		{selectedOpt}
Expand DownExpand Up		@@ -107,7 +107,7 @@ export const NoSelectedOption: Story = {
		return (
		<SelectMenu>
		<SelectMenuTrigger>
		<SelectMenuButtoncss={{ width: 200 }}>All users</SelectMenuButton>
		<SelectMenuButtonclassName="w-48">All users</SelectMenuButton>
		</SelectMenuTrigger>
		<SelectMenuContent>
		<SelectMenuSearch onChange={action("search")} />
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,6 +20,7 @@ import {
		type ReactElement,
		useMemo,
		} from "react";
		import { cn } from "utils/cn";

		const SIDE_PADDING = 16;

Expand DownExpand Up		@@ -76,19 +77,22 @@ export const SelectMenuSearch: FC<SearchFieldProps> = (props) => {
		);
		};

		export const SelectMenuList: FC<MenuListProps> = (props) => {
		export const SelectMenuList: FC<MenuListProps> = ({
		children,
		className,
		...attrs
		}) => {
		const items = useMemo(() => {
		letchildren = Children.toArray(props.children);
		if (!children.every(isValidElement)) {
		letitems = Children.toArray(children);
		if (!items.every(isValidElement)) {
		throw new Error("SelectMenuList only accepts MenuItem children");
		}
		children = moveSelectedElementToFirst(
		children as ReactElement<MenuItemProps>[],
		);
		return children;
		}, [props.children]);
		items = moveSelectedElementToFirst(items as ReactElement<MenuItemProps>[]);
		return items;
		}, [children]);

		return (
		<MenuListcss={{ maxHeight: 480 }} {...props}>
		<MenuListclassName={cn("max-h-[480px]", className)} {...attrs}>
		{items}
		</MenuList>
		);
Expand All		@@ -106,25 +110,31 @@ function moveSelectedElementToFirst(items: ReactElement<MenuItemProps>[]) {
		return newItems;
		}

		export const SelectMenuIcon: FC<HTMLProps<HTMLDivElement>> = (props) => {
		return <div css={{ marginRight: 16 }} {...props} />;
		export const SelectMenuIcon: FC<HTMLProps<HTMLDivElement>> = ({
		children,
		className,
		...attrs
		}) => {
		return (
		<div className={cn("mr-4", className)} {...attrs}>
		{children}
		</div>
		);
		};

		export const SelectMenuItem: FC<MenuItemProps> = (props) => {
		export const SelectMenuItem: FC<MenuItemProps> = ({
		children,
		className,
		selected,
		...attrs
		}) => {
		return (
		<MenuItem
		css={{
		fontSize: 14,
		gap: 0,
		lineHeight: 1,
		padding: `12px ${SIDE_PADDING}px`,
		}}
		{...props}
		className={cn("text-sm gap-0 leading-none py-3 px-4", className)}
		{...attrs}
		>
		{props.children}
		{props.selected && (
		<CheckIcon className="size-icon-xs" css={{ marginLeft: "auto" }} />
		)}
		{children}
		{selected && <CheckIcon className="size-icon-xs ml-auto" />}
		</MenuItem>
		);
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -106,7 +106,7 @@ export const SidebarNavItem: FC<SidebarNavItemProps> = ({
		}
		>
		<Stack alignItems="center" spacing={1.5} direction="row">
		<Iconcss={{ width: 16, height: 16 }} />
		<IconclassName="size-4" />
		{children}
		</Stack>
		</NavLink>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -44,9 +44,8 @@ export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
		return (
		<div
		data-chromatic="ignore"
		css={{
		padding: "8px 0",
		height: "100%",
		className="py-2 h-full"
		style={{
		backgroundColor: theme.monaco.colors["editor.background"],
		}}
		>
Expand Down