coder · aslilac · Jul 21, 2025 · Jul 21, 2025 · Jul 21, 2025 · Jul 21, 2025
diff --git a/site/.storybook/main.js b/site/.storybook/main.js
@@ -5,17 +5,9 @@ module.exports = {
 
 	addons: [
 		"@chromatic-com/storybook",
-		{
-			name: "@storybook/addon-essentials",
-			options: {
-				backgrounds: false,
-			},
-		},
+		"@storybook/addon-docs",
 		"@storybook/addon-links",
-		"@storybook/addon-mdx-gfm",
 		"@storybook/addon-themes",
-		"@storybook/addon-actions",
-		"@storybook/addon-interactions",
 		"storybook-addon-remix-react-router",
 	],
 

diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
@@ -9,8 +9,8 @@
  * @typedef {import("react").PropsWithChildren} PropsWithChildren
  * @typedef {import("react").FC<PropsWithChildren>} FC
  *
- * @typedef {import("@storybook/react").StoryContext} StoryContext
- * @typedef {import("@storybook/react").Preview} Preview
+ * @typedef {import("@storybook/react-vite").StoryContext} StoryContext
+ * @typedef {import("@storybook/react-vite").Preview} Preview
  *
  * @typedef {(Story: FC, Context: StoryContext) => React.JSX.Element} Decorator A
  * Storybook decorator function used to inject baseline data dependencies into

diff --git a/site/package.json b/site/package.json
@@ -103,7 +103,7 @@
 		"react-markdown": "9.0.3",
 		"react-query": "npm:@tanstack/react-query@5.77.0",
 		"react-resizable-panels": "3.0.3",
-		"react-router-dom": "6.26.2",
+		"react-router": "7.7.0",
 		"react-syntax-highlighter": "15.6.1",
 		"react-textarea-autosize": "8.5.9",
 		"react-virtualized-auto-sizer": "1.0.24",
@@ -125,19 +125,13 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",
-		"@chromatic-com/storybook": "3.2.2",
+		"@chromatic-com/storybook": "4.0.1",
 		"@octokit/types": "12.3.0",
 		"@playwright/test": "1.47.0",
-		"@storybook/addon-actions": "8.5.2",
-		"@storybook/addon-essentials": "8.4.6",
-		"@storybook/addon-interactions": "8.5.3",
-		"@storybook/addon-links": "8.5.2",
-		"@storybook/addon-mdx-gfm": "8.5.2",
-		"@storybook/addon-themes": "8.4.6",
-		"@storybook/preview-api": "8.5.3",
-		"@storybook/react": "8.4.6",
-		"@storybook/react-vite": "8.4.6",
-		"@storybook/test": "8.4.6",
+		"@storybook/addon-docs": "9.0.17",
+		"@storybook/addon-links": "9.0.17",
+		"@storybook/addon-themes": "9.0.17",
+		"@storybook/react-vite": "9.0.17",
 		"@swc/core": "1.3.38",
 		"@swc/jest": "0.2.37",
 		"@tailwindcss/typography": "0.5.16",
@@ -182,8 +176,8 @@
 		"rollup-plugin-visualizer": "5.14.0",
 		"rxjs": "7.8.1",
 		"ssh2": "1.16.0",
-		"storybook": "8.5.3",
-		"storybook-addon-remix-react-router": "3.1.0",
+		"storybook": "9.0.17",
+		"storybook-addon-remix-react-router": "5.0.0",
 		"tailwindcss": "3.4.17",
 		"ts-proto": "1.164.0",
 		"typescript": "5.6.3",
@@ -197,7 +191,7 @@
 		"semver": "7.6.2"
 	},
 	"engines": {
-		"npm": ">=9.0.0 <10.0.0",
+		"pnpm": ">=9.0.0 <10.0.0",
 		"node": ">=18.0.0 <21.0.0"
 	},
 	"pnpm": {

diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/@types/storybook.d.ts b/site/src/@types/storybook.d.ts
@@ -9,7 +9,7 @@ import type {
 import type { Permissions } from "modules/permissions";
 import type { QueryKey } from "react-query";
 
-declare module "@storybook/react" {
+declare module "@storybook/react-vite" {
 	type WebSocketEvent =
 		| { event: "message"; data: string }
 		| { event: "error" | "close" };

diff --git a/site/src/App.tsx b/site/src/App.tsx
@@ -9,7 +9,7 @@ import {
 } from "react";
 import { HelmetProvider } from "react-helmet-async";
 import { QueryClient, QueryClientProvider } from "react-query";
-import { RouterProvider } from "react-router-dom";
+import { RouterProvider } from "react-router";
 import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
 import { ThemeProvider } from "./contexts/ThemeProvider";
 import { AuthProvider } from "./contexts/auth/AuthProvider";

diff --git a/site/src/components/Abbr/Abbr.stories.tsx b/site/src/components/Abbr/Abbr.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Abbr } from "./Abbr";
 
 const meta: Meta<typeof Abbr> = {

diff --git a/site/src/components/ActiveUserChart/ActiveUserChart.stories.tsx b/site/src/components/ActiveUserChart/ActiveUserChart.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ActiveUserChart } from "./ActiveUserChart";
 
 const meta: Meta<typeof ActiveUserChart> = {

diff --git a/site/src/components/Alert/Alert.stories.tsx b/site/src/components/Alert/Alert.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "components/Button/Button";
 import { Alert } from "./Alert";
 

diff --git a/site/src/components/Alert/ErrorAlert.stories.tsx b/site/src/components/Alert/ErrorAlert.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "components/Button/Button";
 import { mockApiError } from "testHelpers/entities";
 import { ErrorAlert } from "./ErrorAlert";

diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Avatar } from "./Avatar";
 
 const meta: Meta<typeof Avatar> = {

diff --git a/site/src/components/Avatar/AvatarCard.stories.tsx b/site/src/components/Avatar/AvatarCard.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { AvatarCard } from "./AvatarCard";
 
 const meta: Meta<typeof AvatarCard> = {

diff --git a/site/src/components/Avatar/AvatarData.stories.tsx b/site/src/components/Avatar/AvatarData.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { AvatarData } from "./AvatarData";
 
 const meta: Meta<typeof AvatarData> = {

diff --git a/site/src/components/Avatar/AvatarDataSkeleton.stories.tsx b/site/src/components/Avatar/AvatarDataSkeleton.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { AvatarDataSkeleton } from "./AvatarDataSkeleton";
 
 const meta: Meta<typeof AvatarDataSkeleton> = {

diff --git a/site/src/components/Badge/Badge.stories.tsx b/site/src/components/Badge/Badge.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Settings, TriangleAlert } from "lucide-react";
 import { Badge } from "./Badge";
 

diff --git a/site/src/components/Badges/Badges.stories.tsx b/site/src/components/Badges/Badges.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
 	AlphaBadge,
 	Badges,

diff --git a/site/src/components/Breadcrumb/Breadcrumb.stories.tsx b/site/src/components/Breadcrumb/Breadcrumb.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
 	Breadcrumb,
 	BreadcrumbEllipsis,

diff --git a/site/src/components/BuildIcon/BuildIcon.stories.tsx b/site/src/components/BuildIcon/BuildIcon.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { BuildIcon } from "./BuildIcon";
 
 const meta: Meta<typeof BuildIcon> = {

diff --git a/site/src/components/Button/Button.stories.tsx b/site/src/components/Button/Button.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { PlusIcon } from "lucide-react";
 import { Button } from "./Button";
 

diff --git a/site/src/components/Chart/Chart.stories.tsx b/site/src/components/Chart/Chart.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import {
 	type ChartConfig,

diff --git a/site/src/components/Checkbox/Checkbox.stories.tsx b/site/src/components/Checkbox/Checkbox.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { Checkbox } from "./Checkbox";
 

diff --git a/site/src/components/CodeExample/CodeExample.stories.tsx b/site/src/components/CodeExample/CodeExample.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CodeExample } from "./CodeExample";
 
 const meta: Meta<typeof CodeExample> = {

diff --git a/site/src/components/Collapsible/Collapsible.stories.tsx b/site/src/components/Collapsible/Collapsible.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "components/Button/Button";
 import { ChevronsUpDown } from "lucide-react";
 import {

diff --git a/site/src/components/CollapsibleSummary/CollapsibleSummary.stories.tsx b/site/src/components/CollapsibleSummary/CollapsibleSummary.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "../Button/Button";
 import { CollapsibleSummary } from "./CollapsibleSummary";
 

diff --git a/site/src/components/Combobox/Combobox.stories.tsx b/site/src/components/Combobox/Combobox.stories.tsx
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, screen, userEvent, waitFor, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
 import { Combobox } from "./Combobox";
 
 const simpleOptions = ["Go", "Gleam", "Kotlin", "Rust"];
@@ -31,7 +31,9 @@ const advancedOptions = [
 
 const ComboboxWithHooks = ({
 	options = advancedOptions,
-}: { options?: React.ComponentProps<typeof Combobox>["options"] }) => {
+}: {
+	options?: React.ComponentProps<typeof Combobox>["options"];
+}) => {
 	const [value, setValue] = useState("");
 	const [open, setOpen] = useState(false);
 	const [inputValue, setInputValue] = useState("");

diff --git a/site/src/components/Conditionals/ChooseOne.stories.tsx b/site/src/components/Conditionals/ChooseOne.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ChooseOne, Cond } from "./ChooseOne";
 
 const meta: Meta<typeof ChooseOne> = {

diff --git a/site/src/components/CopyButton/CopyButton.stories.tsx b/site/src/components/CopyButton/CopyButton.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CopyButton } from "./CopyButton";
 
 const meta: Meta<typeof CopyButton> = {

diff --git a/site/src/components/CopyableValue/CopyableValue.stories.tsx b/site/src/components/CopyableValue/CopyableValue.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CopyableValue } from "./CopyableValue";
 
 const meta: Meta<typeof CopyableValue> = {

diff --git a/site/src/components/Dialog/Dialog.stories.tsx b/site/src/components/Dialog/Dialog.stories.tsx
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "components/Button/Button";
+import { userEvent, within } from "storybook/test";
 import {
 	Dialog,
 	DialogContent,

diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx
@@ -1,5 +1,5 @@
-import { action } from "@storybook/addon-actions";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { action } from "storybook/actions";
 import { ConfirmDialog } from "./ConfirmDialog";
 
 const meta: Meta<typeof ConfirmDialog> = {

diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.stories.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.stories.tsx
@@ -1,7 +1,7 @@
-import { action } from "@storybook/addon-actions";
-import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { within } from "@testing-library/react";
+import { action } from "storybook/actions";
+import { userEvent } from "storybook/test";
 import { DeleteDialog } from "./DeleteDialog";
 
 const meta: Meta<typeof DeleteDialog> = {

diff --git a/site/src/components/DropdownArrow/DropdownArrow.stories.tsx b/site/src/components/DropdownArrow/DropdownArrow.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { chromatic } from "testHelpers/chromatic";
 import { DropdownArrow } from "./DropdownArrow";
 

diff --git a/site/src/components/DropdownMenu/DropdownMenu.stories.tsx b/site/src/components/DropdownMenu/DropdownMenu.stories.tsx
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "components/Button/Button";
+import { userEvent, within } from "storybook/test";
 import {
 	DropdownMenu,
 	DropdownMenuContent,

diff --git a/site/src/components/DurationField/DurationField.stories.tsx b/site/src/components/DurationField/DurationField.stories.tsx
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
 import { DurationField } from "./DurationField";
 
 const meta: Meta<typeof DurationField> = {

diff --git a/site/src/components/EmptyState/EmptyState.stories.tsx b/site/src/components/EmptyState/EmptyState.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "components/Button/Button";
 import { EmptyState } from "./EmptyState";
 

diff --git a/site/src/components/ErrorBoundary/GlobalErrorBoundary.stories.tsx b/site/src/components/ErrorBoundary/GlobalErrorBoundary.stories.tsx
@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, userEvent } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { within } from "@testing-library/react";
-import type { ErrorResponse } from "react-router-dom";
+import type { ErrorResponse } from "react-router";
+import { expect, userEvent } from "storybook/test";
 import { GlobalErrorBoundaryInner } from "./GlobalErrorBoundary";
 
 /**

diff --git a/site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx b/site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx
@@ -9,7 +9,7 @@ import {
 	isRouteErrorResponse,
 	useLocation,
 	useRouteError,
-} from "react-router-dom";
+} from "react-router";
 
 const errorPageTitle = "Something went wrong";
 

diff --git a/site/src/components/Expander/Expander.stories.tsx b/site/src/components/Expander/Expander.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Expander } from "./Expander";
 
 const meta: Meta<typeof Expander> = {

diff --git a/site/src/components/FeatureStageBadge/FeatureStageBadge.stories.tsx b/site/src/components/FeatureStageBadge/FeatureStageBadge.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { FeatureStageBadge } from "./FeatureStageBadge";
 
 const meta: Meta<typeof FeatureStageBadge> = {

diff --git a/site/src/components/FileUpload/FileUpload.stories.tsx b/site/src/components/FileUpload/FileUpload.stories.tsx
@@ -1,5 +1,5 @@
 import Link from "@mui/material/Link";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { FileUpload } from "./FileUpload";
 
 const meta: Meta<typeof FileUpload> = {

diff --git a/site/src/components/Filter/Filter.tsx b/site/src/components/Filter/Filter.tsx
@@ -16,7 +16,7 @@ import { useDebouncedFunction } from "hooks/debounce";
 import { ExternalLinkIcon } from "lucide-react";
 import { ChevronDownIcon } from "lucide-react";
 import { type FC, type ReactNode, useEffect, useRef, useState } from "react";
-import type { useSearchParams } from "react-router-dom";
+import type { useSearchParams } from "react-router";
 
 type PresetFilter = {
 	name: string;

diff --git a/site/src/components/Filter/SelectFilter.stories.tsx b/site/src/components/Filter/SelectFilter.stories.tsx
@@ -1,8 +1,8 @@
-import { action } from "@storybook/addon-actions";
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Avatar } from "components/Avatar/Avatar";
 import { useState } from "react";
+import { action } from "storybook/actions";
+import { expect, userEvent, within } from "storybook/test";
 import { withDesktopViewport } from "testHelpers/storybook";
 import {
 	SelectFilter,

diff --git a/site/src/components/Filter/storyHelpers.ts b/site/src/components/Filter/storyHelpers.ts
@@ -1,4 +1,4 @@
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import type { UseFilterResult } from "./Filter";
 import type { UseFilterMenuResult } from "./menu";
 

diff --git a/site/src/components/Form/Form.stories.tsx b/site/src/components/Form/Form.stories.tsx
@@ -1,5 +1,5 @@
 import TextField from "@mui/material/TextField";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Form, FormFields, FormSection } from "./Form";
 
 const meta: Meta<typeof Form> = {

diff --git a/site/src/components/FullPageForm/FullPageForm.stories.tsx b/site/src/components/FullPageForm/FullPageForm.stories.tsx
@@ -1,5 +1,5 @@
 import TextField from "@mui/material/TextField";
-import type { Meta, StoryObj } from "@storybook/react";
+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";

diff --git a/site/src/components/FullPageLayout/Sidebar.tsx b/site/src/components/FullPageLayout/Sidebar.tsx
@@ -1,6 +1,6 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import type { ComponentProps, FC, HTMLAttributes } from "react";
-import { Link, type LinkProps } from "react-router-dom";
+import { Link, type LinkProps } from "react-router";
 import { TopbarIconButton } from "./Topbar";
 
 export const Sidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {

diff --git a/site/src/components/GlobalSnackbar/EnterpriseSnackbar.stories.tsx b/site/src/components/GlobalSnackbar/EnterpriseSnackbar.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { EnterpriseSnackbar } from "./EnterpriseSnackbar";
 
 const meta: Meta<typeof EnterpriseSnackbar> = {