Sep 26, 2025 · Sep 25, 2025 · Sep 26, 2025 · Sep 26, 2025 · Sep 26, 2025 · Sep 26, 2025
diff --git a/site/.storybook/preview.tsx b/site/.storybook/preview.tsx
 import { DecoratorHelpers } from "@storybook/addon-themes";
 import isChromatic from "chromatic/isChromatic";
 import { StrictMode } from "react";
 import { HelmetProvider } from "react-helmet-async";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { withRouter } from "storybook-addon-remix-react-router";
 import "theme/globalFonts";
 },
 };

 const withHelmet: Decorator = (Story) => {
 return (
 <HelmetProvider>
 <Story />
 </HelmetProvider>
 );
 };

 const withQuery: Decorator = (Story, { parameters }) => {
 const queryClient = new QueryClient({
 defaultOptions: {
 );
 };

 export const decorators: Decorator[] = [
 withRouter,
 withQuery,
 withHelmet,
 withTheme,
 ];
 export const decorators: Decorator[] = [withRouter, withQuery, withTheme];

 // Try to fix storybook rendering fonts inconsistently
 // https://www.chromatic.com/docs/font-loading/#solution-c-check-fonts-have-loaded-in-a-loader
diff --git a/site/index.html b/site/index.html
 <meta property="docs-url" content="{{ .DocsURL }}" />
 <meta property="logo-url" content="{{ .LogoURL }}" />
 <meta property="tasks-tab-visible" content="{{ .TasksTabVisible }}" />
 <!-- We need to set data-react-helmet to be able to override it in the workspace page -->
 <link
 rel="alternate icon"
 type="image/png"
 href="/favicons/favicon-light.png"
 media="(prefers-color-scheme: dark)"
 data-react-helmet="true"
 />
 <link
 rel="icon"
 type="image/svg+xml"
 href="/favicons/favicon-light.svg"
 media="(prefers-color-scheme: dark)"
 data-react-helmet="true"
 />
 <link
 rel="alternate icon"
 type="image/png"
 href="/favicons/favicon-dark.png"
 media="(prefers-color-scheme: light)"
 data-react-helmet="true"
 />
 <link
 rel="icon"
 type="image/svg+xml"
 href="/favicons/favicon-dark.svg"
 media="(prefers-color-scheme: light)"
 data-react-helmet="true"
 />
 </head>

diff --git a/site/package.json b/site/package.json
 "react-confetti": "6.2.2",
 "react-date-range": "1.4.0",
 "react-dom": "19.1.1",
 "react-helmet-async": "2.0.5",
 "react-markdown": "9.0.3",
 "react-query": "npm:@tanstack/react-query@5.77.0",
 "react-resizable-panels": "3.0.3",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/App.tsx b/site/src/App.tsx
 useEffect,
 useState,
 } from "react";
 import { HelmetProvider } from "react-helmet-async";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { RouterProvider } from "react-router";
 import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
 }, []);

 return (
 <HelmetProvider>
 <QueryClientProvider client={queryClient}>
 <AuthProvider>
 <ThemeProvider>
 {children}
 <GlobalSnackbar />
 </ThemeProvider>
 </AuthProvider>
 {showDevtools && <ReactQueryDevtools initialIsOpen={showDevtools} />}
 </QueryClientProvider>
 </HelmetProvider>
 <QueryClientProvider client={queryClient}>
 <AuthProvider>
 <ThemeProvider>
 {children}
 <GlobalSnackbar />
 </ThemeProvider>
 </AuthProvider>
 {showDevtools && <ReactQueryDevtools initialIsOpen={showDevtools} />}
 </QueryClientProvider>
 );
 };

diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
 type ReactNode,
 useState,
 } from "react";

 export type AlertColor = MuiAlertColor;

 export type AlertProps = MuiAlertProps & {
diff --git a/site/src/components/Avatar/AvatarDataSkeleton.tsx b/site/src/components/Avatar/AvatarDataSkeleton.tsx
 import Skeleton from "@mui/material/Skeleton";
 import type { FC } from "react";

 export const AvatarDataSkeleton: FC = () => {
 return (
 <div className="flex items-center gap-3 w-full">
diff --git a/site/src/components/Checkbox/Checkbox.tsx b/site/src/components/Checkbox/Checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check, Minus } from "lucide-react";
 import * as React from "react";

 import { cn } from "utils/cn";

 /**
diff --git a/site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx b/site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx
 import { Link } from "components/Link/Link";
 import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
 import { type FC, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import {
 type ErrorResponse,
 isRouteErrorResponse,

 return (
 <div className="bg-surface-primary text-center w-full h-full flex justify-center items-center">
 <Helmet>
 <title>{errorPageTitle}</title>
 </Helmet>
 <title>{errorPageTitle}</title>

 <main className="flex gap-6 w-full max-w-prose p-4 flex-col flex-nowrap">
 <div className="flex gap-2 flex-col items-center">
diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx
 PageHeaderTitle,
 } from "components/PageHeader/PageHeader";
 import type { FC, ReactNode } from "react";

 export interface FullPageFormProps {
 title: string;
 detail?: ReactNode;
diff --git a/site/src/components/Icons/DockerIcon.tsx b/site/src/components/Icons/DockerIcon.tsx
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";

 import type { JSX } from "react";

 export const DockerIcon = (props: SvgIconProps): JSX.Element => (
 <SvgIcon {...props} viewBox="0 0 32 32">
 <path
diff --git a/site/src/components/Icons/EditSquare.tsx b/site/src/components/Icons/EditSquare.tsx
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";

 import type { JSX } from "react";

 export const EditSquare = (props: SvgIconProps): JSX.Element => (
 <SvgIcon {...props} viewBox="0 0 48 48">
 <path d="M9 47.4q-1.2 0-2.1-.9-.9-.9-.9-2.1v-30q0-1.2.9-2.1.9-.9 2.1-.9h20.25l-3 3H9v30h30V27l3-3v20.4q0 1.2-.9 2.1-.9.9-2.1.9Zm15-18Zm9.1-17.6 2.15 2.1L21 28.1v4.3h4.25l14.3-14.3 2.1 2.1L26.5 35.4H18v-8.5Zm8.55 8.4-8.55-8.4 5-5q.85-.85 2.125-.85t2.125.9l4.2 4.25q.85.9.85 2.125t-.9 2.075Z" />
diff --git a/site/src/components/Icons/ErrorIcon.tsx b/site/src/components/Icons/ErrorIcon.tsx
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";

 import type { JSX } from "react";

 export const ErrorIcon = (props: SvgIconProps): JSX.Element => (
 <SvgIcon {...props} viewBox="0 0 24 24">
 <path
diff --git a/site/src/components/Icons/GitIcon.tsx b/site/src/components/Icons/GitIcon.tsx
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";

 import type { JSX } from "react";

 export const GitIcon = (props: SvgIconProps): JSX.Element => (
 <SvgIcon {...props} viewBox="0 0 96 96">
 <path d="M92.71 44.408 52.591 4.291c-2.31-2.311-6.057-2.311-8.369 0l-8.33 8.332L46.459 23.19c2.456-.83 5.272-.273 7.229 1.685 1.969 1.97 2.521 4.81 1.67 7.275l10.186 10.185c2.465-.85 5.307-.3 7.275 1.671 2.75 2.75 2.75 7.206 0 9.958-2.752 2.751-7.208 2.751-9.961 0-2.068-2.07-2.58-5.11-1.531-7.658l-9.5-9.499v24.997c.67.332 1.303.774 1.861 1.332 2.75 2.75 2.75 7.206 0 9.959-2.75 2.749-7.209 2.749-9.957 0-2.75-2.754-2.75-7.21 0-9.959.68-.679 1.467-1.193 2.307-1.537v-25.23c-.84-.344-1.625-.853-2.307-1.537-2.083-2.082-2.584-5.14-1.516-7.698L31.798 16.715 4.288 44.222c-2.311 2.313-2.311 6.06 0 8.371l40.121 40.118c2.31 2.311 6.056 2.311 8.369 0L92.71 52.779c2.311-2.311 2.311-6.06 0-8.371z" />
diff --git a/site/src/components/Icons/JetBrainsIcon.tsx b/site/src/components/Icons/JetBrainsIcon.tsx
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";

 import type { JSX } from "react";

 export const JetBrainsIcon = (props: SvgIconProps): JSX.Element => (
 <SvgIcon {...props} viewBox="0 0 100 100">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" width="180">
diff --git a/site/src/components/Icons/RocketIcon.tsx b/site/src/components/Icons/RocketIcon.tsx
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";

 import type { JSX } from "react";

 export const RocketIcon = (props: SvgIconProps): JSX.Element => (
 <SvgIcon {...props} viewBox="0 0 24 24">
 <path d="M12 2.5s4.5 2.04 4.5 10.5c0 2.49-1.04 5.57-1.6 7H9.1c-.56-1.43-1.6-4.51-1.6-7C7.5 4.54 12 2.5 12 2.5zm2 8.5c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-6.31 9.52c-.48-1.23-1.52-4.17-1.67-6.87l-1.13.75c-.56.38-.89 1-.89 1.67V22l3.69-1.48zM20 22v-5.93c0-.67-.33-1.29-.89-1.66l-1.13-.75c-.15 2.69-1.2 5.64-1.67 6.87L20 22z" />
diff --git a/site/src/components/Icons/TerminalIcon.tsx b/site/src/components/Icons/TerminalIcon.tsx
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";

 import type { JSX } from "react";

 export const TerminalIcon = (props: SvgIconProps): JSX.Element => (
 <SvgIcon {...props} viewBox="0 0 24 24">
 <path d="M20 4H4c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H4V8h16v10zm-2-1h-6v-2h6v2zM7.5 17l-1.41-1.41L8.67 13l-2.59-2.59L7.5 9l4 4-4 4z" />
diff --git a/site/src/components/Icons/VSCodeIcon.tsx b/site/src/components/Icons/VSCodeIcon.tsx
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";

 import type { JSX } from "react";

 export const VSCodeIcon = (props: SvgIconProps): JSX.Element => (
 <SvgIcon {...props} viewBox="0 0 100 100">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
diff --git a/site/src/components/Icons/VSCodeInsidersIcon.tsx b/site/src/components/Icons/VSCodeInsidersIcon.tsx
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";

 import type { JSX } from "react";

 export const VSCodeInsidersIcon = (props: SvgIconProps): JSX.Element => (
 <SvgIcon {...props} viewBox="0 0 256 256">
 <svg
diff --git a/site/src/components/InputGroup/InputGroup.tsx b/site/src/components/InputGroup/InputGroup.tsx
 import type { FC, HTMLProps } from "react";

 export const InputGroup: FC<HTMLProps<HTMLDivElement>> = (props) => {
 return (
 <div
diff --git a/site/src/components/Label/Label.tsx b/site/src/components/Label/Label.tsx
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva, type VariantProps } from "class-variance-authority";
 import { forwardRef } from "react";

 import { cn } from "utils/cn";

 const labelVariants = cva(
diff --git a/site/src/components/Menu/MenuSearch.tsx b/site/src/components/Menu/MenuSearch.tsx
 type SearchFieldProps,
 } from "components/SearchField/SearchField";
 import type { FC } from "react";

 export const MenuSearch: FC<SearchFieldProps> = (props) => {
 return (
 <SearchField
diff --git a/site/src/components/RadioGroup/RadioGroup.tsx b/site/src/components/RadioGroup/RadioGroup.tsx
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { Circle } from "lucide-react";
 import * as React from "react";

 import { cn } from "utils/cn";

 export const RadioGroup = React.forwardRef<
diff --git a/site/src/components/SearchField/SearchField.tsx b/site/src/components/SearchField/SearchField.tsx
 import { useEffectEvent } from "hooks/hookPolyfills";
 import { SearchIcon, XIcon } from "lucide-react";
 import { type FC, useLayoutEffect, useRef } from "react";

 export type SearchFieldProps = Omit<TextFieldProps, "onChange"> & {
 onChange: (query: string) => void;
 autoFocus?: boolean;
diff --git a/site/src/components/Separator/Separator.tsx b/site/src/components/Separator/Separator.tsx
 * @see {@link https://ui.shadcn.com/docs/components/separator}
 */
 import type * as React from "react";

 import { cn } from "utils/cn";

 function Separator({
diff --git a/site/src/components/SignInLayout/SignInLayout.tsx b/site/src/components/SignInLayout/SignInLayout.tsx
 import type { FC, PropsWithChildren } from "react";

 export const SignInLayout: FC<PropsWithChildren> = ({ children }) => {
 return (
 <div className="grow basis-0 h-screen flex justify-center items-center">
diff --git a/site/src/components/Slider/Slider.tsx b/site/src/components/Slider/Slider.tsx
 */
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import * as React from "react";

 import { cn } from "utils/cn";

 export const Slider = React.forwardRef<
diff --git a/site/src/components/SyntaxHighlighter/coderTheme.ts b/site/src/components/SyntaxHighlighter/coderTheme.ts
 import { useTheme } from "@emotion/react";
 import { useMonaco } from "@monaco-editor/react";
 import { useEffect, useState } from "react";

 export const useCoderTheme = (): { isLoading: boolean; name: string } => {
 const [isLoading, setIsLoading] = useState(true);
 const monaco = useMonaco();
diff --git a/site/src/components/TableToolbar/TableToolbar.tsx b/site/src/components/TableToolbar/TableToolbar.tsx
 import Skeleton from "@mui/material/Skeleton";
 import type { FC, PropsWithChildren } from "react";

 export const TableToolbar: FC<PropsWithChildren> = ({ children }) => {
 return (
 <div className="text-sm mb-2 mt-0 h-9 text-content-secondary flex items-center [&_strong]:text-content-primary">
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,7 +9,6 @@ import {
		import { DecoratorHelpers } from "@storybook/addon-themes";
		import isChromatic from "chromatic/isChromatic";
		import { StrictMode } from "react";
		import { HelmetProvider } from "react-helmet-async";
		import { QueryClient, QueryClientProvider } from "react-query";
		import { withRouter } from "storybook-addon-remix-react-router";
		import "theme/globalFonts";
Expand DownExpand Up		@@ -62,14 +61,6 @@ export const parameters: Parameters = {
		},
		};

		const withHelmet: Decorator = (Story) => {
		return (
		<HelmetProvider>
		<Story />
		</HelmetProvider>
		);
		};

		const withQuery: Decorator = (Story, { parameters }) => {
		const queryClient = new QueryClient({
		defaultOptions: {
Expand DownExpand Up		@@ -118,12 +109,7 @@ const withTheme: Decorator = (Story, context) => {
		);
		};

		export const decorators: Decorator[] = [
		withRouter,
		withQuery,
		withHelmet,
		withTheme,
		];
		export const decorators: Decorator[] = [withRouter, withQuery, withTheme];

		// Try to fix storybook rendering fonts inconsistently
		// https://www.chromatic.com/docs/font-loading/#solution-c-check-fonts-have-loaded-in-a-loader
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -28,34 +28,29 @@
		<meta property="docs-url" content="{{ .DocsURL }}" />
		<meta property="logo-url" content="{{ .LogoURL }}" />
		<meta property="tasks-tab-visible" content="{{ .TasksTabVisible }}" />
		<!-- We need to set data-react-helmet to be able to override it in the workspace page -->
		<link
		rel="alternate icon"
		type="image/png"
		href="/favicons/favicon-light.png"
		media="(prefers-color-scheme: dark)"
		data-react-helmet="true"
		/>
		<link
		rel="icon"
		type="image/svg+xml"
		href="/favicons/favicon-light.svg"
		media="(prefers-color-scheme: dark)"
		data-react-helmet="true"
		/>
		<link
		rel="alternate icon"
		type="image/png"
		href="/favicons/favicon-dark.png"
		media="(prefers-color-scheme: light)"
		data-react-helmet="true"
		/>
		<link
		rel="icon"
		type="image/svg+xml"
		href="/favicons/favicon-dark.svg"
		media="(prefers-color-scheme: light)"
		data-react-helmet="true"
		/>
		</head>

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -99,7 +99,6 @@
		"react-confetti": "6.2.2",
		"react-date-range": "1.4.0",
		"react-dom": "19.1.1",
		"react-helmet-async": "2.0.5",
		"react-markdown": "9.0.3",
		"react-query": "npm:@tanstack/react-query@5.77.0",
		"react-resizable-panels": "3.0.3",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,7 +7,6 @@ import {
		useEffect,
		useState,
		} from "react";
		import { HelmetProvider } from "react-helmet-async";
		import { QueryClient, QueryClientProvider } from "react-query";
		import { RouterProvider } from "react-router";
		import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
Expand DownExpand Up		@@ -51,17 +50,15 @@ export const AppProviders: FC<AppProvidersProps> = ({
		}, []);

		return (
		<HelmetProvider>
		<QueryClientProvider client={queryClient}>
		<AuthProvider>
		<ThemeProvider>
		{children}
		<GlobalSnackbar />
		</ThemeProvider>
		</AuthProvider>
		{showDevtools && <ReactQueryDevtools initialIsOpen={showDevtools} />}
		</QueryClientProvider>
		</HelmetProvider>
		<QueryClientProvider client={queryClient}>
		<AuthProvider>
		<ThemeProvider>
		{children}
		<GlobalSnackbar />
		</ThemeProvider>
		</AuthProvider>
		{showDevtools && <ReactQueryDevtools initialIsOpen={showDevtools} />}
		</QueryClientProvider>
		);
		};

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,7 +11,6 @@ import {
		type ReactNode,
		useState,
		} from "react";

		export type AlertColor = MuiAlertColor;

		export type AlertProps = MuiAlertProps & {
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,5 @@
		import Skeleton from "@mui/material/Skeleton";
		import type { FC } from "react";

		export const AvatarDataSkeleton: FC = () => {
		return (
		<div className="flex items-center gap-3 w-full">
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,7 +5,6 @@
		import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
		import { Check, Minus } from "lucide-react";
		import * as React from "react";

		import { cn } from "utils/cn";

		/**
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,7 +3,6 @@ import { CoderIcon } from "components/Icons/CoderIcon";
		import { Link } from "components/Link/Link";
		import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
		import { type FC, useState } from "react";
		import { Helmet } from "react-helmet-async";
		import {
		type ErrorResponse,
		isRouteErrorResponse,
Expand DownExpand Up		@@ -34,9 +33,7 @@ export const GlobalErrorBoundaryInner: FC<GlobalErrorBoundaryInnerProps> = ({

		return (
		<div className="bg-surface-primary text-center w-full h-full flex justify-center items-center">
		<Helmet>
		<title>{errorPageTitle}</title>
		</Helmet>
		<title>{errorPageTitle}</title>

		<main className="flex gap-6 w-full max-w-prose p-4 flex-col flex-nowrap">
		<div className="flex gap-2 flex-col items-center">
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,7 +5,6 @@ import {
		PageHeaderTitle,
		} from "components/PageHeader/PageHeader";
		import type { FC, ReactNode } from "react";

		export interface FullPageFormProps {
		title: string;
		detail?: ReactNode;
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,6 @@
		import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";

		import type { JSX } from "react";

		export const DockerIcon = (props: SvgIconProps): JSX.Element => (
		<SvgIcon {...props} viewBox="0 0 32 32">
		<path
Expand Down