chore: remove react-helmet (#19963)

Since React 19 supports head tags natively, we no longer need to use
`react-helmet`.

---------

Co-authored-by: ケイラ <mckayla@hey.com>
Co-authored-by: Andrew Aquino <dawneraq@gmail.com>

site/.storybook/preview.tsx

@@ -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";
@@ -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: {
@@ -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

site/index.html

@@ -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>
 

site/package.json

@@ -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",

site/pnpm-lock.yaml

@@ -211,9 +211,6 @@ importers:
       react-dom:
         specifier: 19.1.1
         version: 19.1.1(react@19.1.1)
-      react-helmet-async:
-        specifier: 2.0.5
-        version: 2.0.5(react@19.1.1)
       react-markdown:
         specifier: 9.0.3
         version: 9.0.3(@types/react@19.1.13)(react@19.1.1)
@@ -3987,9 +3984,6 @@ packages:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==, tarball: https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz}
     engines: {node: '>=12'}
 
-  invariant@2.2.4:
-    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==, tarball: https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz}
-
   ipaddr.js@1.9.1:
     resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==, tarball: https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz}
     engines: {node: '>= 0.10'}
@@ -5238,14 +5232,6 @@ packages:
   react-fast-compare@2.0.4:
     resolution: {integrity: sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==, tarball: https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz}
 
-  react-fast-compare@3.2.2:
-    resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==, tarball: https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz}
-
-  react-helmet-async@2.0.5:
-    resolution: {integrity: sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==, tarball: https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.5.tgz}
-    peerDependencies:
-      react: ^16.6.0 || ^17.0.0 || ^18.0.0
-
   react-inspector@6.0.2:
     resolution: {integrity: sha512-x+b7LxhmHXjHoU/VrFAzw5iutsILRoYyDq97EDYdFpPLcvqtEzk4ZSZSQjnFPbr5T57tLXnHcqFYoN1pI6u8uQ==, tarball: https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.2.tgz}
     peerDependencies:
@@ -5554,9 +5540,6 @@ packages:
   shallow-equal@1.2.1:
     resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==, tarball: https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz}
 
-  shallowequal@1.1.0:
-    resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==, tarball: https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz}
-
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==, tarball: https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz}
     engines: {node: '>=8'}
@@ -10137,10 +10120,6 @@ snapshots:
 
   internmap@2.0.3: {}
 
-  invariant@2.2.4:
-    dependencies:
-      loose-envify: 1.4.0
-
   ipaddr.js@1.9.1: {}
 
   is-alphabetical@1.0.4: {}
@@ -11900,15 +11879,6 @@ snapshots:
 
   react-fast-compare@2.0.4: {}
 
-  react-fast-compare@3.2.2: {}
-
-  react-helmet-async@2.0.5(react@19.1.1):
-    dependencies:
-      invariant: 2.2.4
-      react: 19.1.1
-      react-fast-compare: 3.2.2
-      shallowequal: 1.1.0
-
   react-inspector@6.0.2(react@19.1.1):
     dependencies:
       react: 19.1.1
@@ -12296,8 +12266,6 @@ snapshots:
 
   shallow-equal@1.2.1: {}
 
-  shallowequal@1.1.0: {}
-
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0

site/src/App.tsx

@@ -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";
@@ -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>
 	);
 };
 

site/src/components/Alert/Alert.tsx

@@ -11,7 +11,6 @@ import {
 	type ReactNode,
 	useState,
 } from "react";
-
 export type AlertColor = MuiAlertColor;
 
 export type AlertProps = MuiAlertProps & {

site/src/components/Avatar/AvatarDataSkeleton.tsx

@@ -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">

site/src/components/Checkbox/Checkbox.tsx

@@ -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";
 
 /**

site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx

@@ -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,
@@ -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">

site/src/components/FullPageForm/FullPageForm.tsx

@@ -5,7 +5,6 @@ import {
 	PageHeaderTitle,
 } from "components/PageHeader/PageHeader";
 import type { FC, ReactNode } from "react";
-
 export interface FullPageFormProps {
 	title: string;
 	detail?: ReactNode;

site/src/components/Icons/DockerIcon.tsx

@@ -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

site/src/components/Icons/EditSquare.tsx

@@ -1,7 +1,6 @@
 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" />

site/src/components/Icons/ErrorIcon.tsx

@@ -1,7 +1,6 @@
 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

site/src/components/Icons/GitIcon.tsx

@@ -1,7 +1,6 @@
 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" />

site/src/components/Icons/JetBrainsIcon.tsx

@@ -1,7 +1,6 @@
 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">

site/src/components/Icons/RocketIcon.tsx

@@ -1,7 +1,6 @@
 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" />

site/src/components/Icons/TerminalIcon.tsx

@@ -1,7 +1,6 @@
 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" />

site/src/components/Icons/VSCodeIcon.tsx

@@ -1,7 +1,6 @@
 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">

site/src/components/Icons/VSCodeInsidersIcon.tsx

@@ -1,7 +1,6 @@
 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

site/src/components/InputGroup/InputGroup.tsx

@@ -1,5 +1,4 @@
 import type { FC, HTMLProps } from "react";
-
 export const InputGroup: FC<HTMLProps<HTMLDivElement>> = (props) => {
 	return (
 		<div

site/src/components/Label/Label.tsx

@@ -5,7 +5,6 @@
 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(

site/src/components/Menu/MenuSearch.tsx

@@ -3,7 +3,6 @@ import {
 	type SearchFieldProps,
 } from "components/SearchField/SearchField";
 import type { FC } from "react";
-
 export const MenuSearch: FC<SearchFieldProps> = (props) => {
 	return (
 		<SearchField

site/src/components/RadioGroup/RadioGroup.tsx

@@ -5,7 +5,6 @@
 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<

site/src/components/SearchField/SearchField.tsx

@@ -5,7 +5,6 @@ import Tooltip from "@mui/material/Tooltip";
 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;

site/src/components/Separator/Separator.tsx

@@ -4,7 +4,6 @@ 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";
 
 function Separator({

site/src/components/SignInLayout/SignInLayout.tsx

@@ -1,5 +1,4 @@
 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">

site/src/components/Slider/Slider.tsx

@@ -4,7 +4,6 @@
  */
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import * as React from "react";
-
 import { cn } from "utils/cn";
 
 export const Slider = React.forwardRef<

site/src/components/SyntaxHighlighter/coderTheme.ts

@@ -1,7 +1,6 @@
 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();

site/src/components/TableToolbar/TableToolbar.tsx

@@ -1,6 +1,5 @@
 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">

site/src/components/Textarea/Textarea.tsx

@@ -3,7 +3,6 @@
  * @see {@link https://ui.shadcn.com/docs/components/textarea}
  */
 import * as React from "react";
-
 import { cn } from "utils/cn";
 
 export const Textarea = React.forwardRef<

site/src/hooks/hookPolyfills.ts

@@ -7,7 +7,6 @@
  * hooks do, especially for dependency arrays.
  */
 import { useCallback, useLayoutEffect, useRef } from "react";
-
 /**
  * A DIY version of useEffectEvent.
  *

site/src/hooks/useEmbeddedMetadata.ts

@@ -8,7 +8,6 @@ import type {
 	UserAppearanceSettings,
 } from "api/typesGenerated";
 import { useMemo, useSyncExternalStore } from "react";
-
 export const DEFAULT_METADATA_KEY = "property";
 
 /**

site/src/hooks/useWindowSize.ts

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-
 export function useWindowSize() {
 	const [windowSize, setWindowSize] = useState({
 		width: window.innerWidth,

site/src/hooks/useWorkspaceBuildLogs.ts

@@ -2,7 +2,6 @@ import { watchBuildLogsByBuildId } from "api/api";
 import type { ProvisionerJobLog } from "api/typesGenerated";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { useEffect, useRef, useState } from "react";
-
 export const useWorkspaceBuildLogs = (
 	// buildId is optional because sometimes the build is not loaded yet
 	buildId: string | undefined,

site/src/modules/provisioners/ProvisionerAlert.tsx

@@ -3,7 +3,6 @@ import AlertTitle from "@mui/material/AlertTitle";
 import { Alert, type AlertColor, AlertDetail } from "components/Alert/Alert";
 import { ProvisionerTag } from "modules/provisioners/ProvisionerTag";
 import type { FC } from "react";
-
 export enum AlertVariant {
 	// Alerts are usually styled with a full rounded border and meant to use as a visually distinct element of the page.
 	// The Standalone variant conforms to this styling.

site/src/modules/resources/AgentButton.tsx

@@ -1,6 +1,5 @@
 import { Button, type ButtonProps } from "components/Button/Button";
 import { forwardRef } from "react";
-
 export const AgentButton = forwardRef<HTMLButtonElement, ButtonProps>(
 	(props, ref) => {
 		return <Button variant="outline" ref={ref} {...props} />;

site/src/modules/resources/AgentLogs/AgentLogLine.tsx

@@ -2,7 +2,6 @@ import type { Interpolation, Theme } from "@emotion/react";
 import AnsiToHTML from "ansi-to-html";
 import { type Line, LogLine, LogLinePrefix } from "components/Logs/LogLine";
 import { type FC, type ReactNode, useMemo } from "react";
-
 // Approximate height of a log line. Used to control virtualized list height.
 export const AGENT_LOG_LINE_HEIGHT = 20;
 

site/src/modules/resources/AppLink/AppPreview.tsx

@@ -1,6 +1,5 @@
 import { Stack } from "components/Stack/Stack";
 import type { FC, PropsWithChildren } from "react";
-
 export const AppPreview: FC<PropsWithChildren> = ({ children }) => {
 	return (
 		<Stack

site/src/modules/tableFiltering/options.tsx

@@ -19,7 +19,6 @@ import {
 	SelectFilterSearch,
 } from "components/Filter/SelectFilter";
 import type { FC } from "react";
-
 // Organization helpers ////////////////////////////////////////////////////////
 
 export const useOrganizationsFilterMenu = ({

site/src/modules/templates/useWatchVersionLogs.ts

@@ -2,7 +2,6 @@ import { watchBuildLogsByTemplateVersionId } from "api/api";
 import type { ProvisionerJobLog, TemplateVersion } from "api/typesGenerated";
 import { useEffectEvent } from "hooks/hookPolyfills";
 import { useEffect, useState } from "react";
-
 export const useWatchVersionLogs = (
 	templateVersion: TemplateVersion | undefined,
 	options?: { onDone: () => Promise<unknown> },

site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx

@@ -1,6 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import { type ButtonHTMLAttributes, forwardRef, type HTMLProps } from "react";
-
 export type BarColors = {
 	stroke: string;
 	fill: string;

site/src/modules/workspaces/WorkspaceTiming/Chart/YAxis.tsx

@@ -1,6 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import type { FC, HTMLProps } from "react";
-
 export const YAxis: FC<HTMLProps<HTMLDivElement>> = (props) => {
 	return <div css={styles.root} {...props} />;
 };

site/src/pages/AuditPage/AuditPage.tsx

@@ -7,7 +7,6 @@ import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { useOrganizationsFilterMenu } from "modules/tableFiltering/options";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useSearchParams } from "react-router";
 import { pageTitle } from "utils/page";
 import { useActionFilterMenu, useResourceTypeFilterMenu } from "./AuditFilter";
@@ -76,9 +75,7 @@ const AuditPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Audit")}</title>
-			</Helmet>
+			<title>{pageTitle("Audit")}</title>
 
 			<AuditPageView
 				auditLogs={auditsQuery.data?.audit_logs}

site/src/pages/CliAuthPage/CliAuthPage.tsx

@@ -1,6 +1,5 @@
 import { apiKey } from "api/queries/users";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { pageTitle } from "utils/page";
 import { CliAuthPageView } from "./CliAuthPageView";
@@ -10,9 +9,7 @@ const CliAuthenticationPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("CLI Auth")}</title>
-			</Helmet>
+			<title>{pageTitle("CLI Auth")}</title>
 			<CliAuthPageView sessionToken={data?.key} />
 		</>
 	);

site/src/pages/CliInstallPage/CliInstallPage.tsx

@@ -1,6 +1,5 @@
 import isChromatic from "chromatic/isChromatic";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
 import { CliInstallPageView } from "./CliInstallPageView";
 
@@ -9,9 +8,7 @@ const CliInstallPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Install the Coder CLI")}</title>
-			</Helmet>
+			<title>{pageTitle("Install the Coder CLI")}</title>
 			<CliInstallPageView origin={origin} />
 		</>
 	);

site/src/pages/ConnectionLogPage/ConnectionLogPage.tsx

@@ -7,7 +7,6 @@ import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { useOrganizationsFilterMenu } from "modules/tableFiltering/options";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useSearchParams } from "react-router";
 import { pageTitle } from "utils/page";
 import { useStatusFilterMenu, useTypeFilterMenu } from "./ConnectionLogFilter";
@@ -72,9 +71,7 @@ const ConnectionLogPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Connection Log")}</title>
-			</Helmet>
+			<title>{pageTitle("Connection Log")}</title>
 
 			<ConnectionLogPageView
 				connectionLogs={connectionlogsQuery.data?.connection_logs}

site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPage.tsx

@@ -1,6 +1,5 @@
 import { templateExamples } from "api/queries/templates";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { pageTitle } from "utils/page";
 import { getTemplatesByTag } from "utils/starterTemplates";
@@ -14,9 +13,8 @@ const CreateTemplatesGalleryPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Create a Template")}</title>
-			</Helmet>
+			<title>{pageTitle("Create a Template")}</title>
+
 			<CreateTemplateGalleryPageView
 				error={templateExamplesQuery.error}
 				starterTemplatesByTag={starterTemplatesByTag}

site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx

@@ -3,7 +3,6 @@ import type { TemplateVersion } from "api/typesGenerated";
 import { FullPageHorizontalForm } from "components/FullPageForm/FullPageHorizontalForm";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import { type FC, useRef, useState } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation } from "react-query";
 import { useNavigate, useSearchParams } from "react-router";
 import { pageTitle } from "utils/page";
@@ -46,9 +45,7 @@ const CreateTemplatePage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Create Template")}</title>
-			</Helmet>
+			<title>{pageTitle("Create Template")}</title>
 
 			<FullPageHorizontalForm title="Create Template" onCancel={onCancel}>
 				{searchParams.has("fromTemplate") ? (

site/src/pages/CreateTokenPage/CreateTokenPage.tsx

@@ -7,7 +7,6 @@ import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
 import { useFormik } from "formik";
 import { type FC, useState } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery } from "react-query";
 import { useNavigate } from "react-router";
 import { pageTitle } from "utils/page";
@@ -89,9 +88,8 @@ const CreateTokenPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Create Token")}</title>
-			</Helmet>
+			<title>{pageTitle("Create Token")}</title>
+
 			{tokenFetchFailed && <ErrorAlert error={tokenFetchError} />}
 			<FullPageHorizontalForm
 				title="Create Token"

site/src/pages/CreateUserPage/CreateUserPage.tsx

@@ -3,7 +3,6 @@ import { displaySuccess } from "components/GlobalSnackbar/utils";
 import { Margins } from "components/Margins/Margins";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { useNavigate } from "react-router";
 import { pageTitle } from "utils/page";
@@ -22,9 +21,7 @@ const CreateUserPage: FC = () => {
 
 	return (
 		<Margins>
-			<Helmet>
-				<title>{pageTitle("Create User")}</title>
-			</Helmet>
+			<title>{pageTitle("Create User")}</title>
 
 			<CreateUserForm
 				error={createUserMutation.error}

site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx

@@ -20,7 +20,6 @@ import { useExternalAuth } from "hooks/useExternalAuth";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { generateWorkspaceName } from "modules/workspaces/generateWorkspaceName";
 import { type FC, useCallback, useEffect, useRef, useState } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { useNavigate, useParams, useSearchParams } from "react-router";
 import { pageTitle } from "utils/page";
@@ -203,9 +202,8 @@ const CreateWorkspacePage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle(title)}</title>
-			</Helmet>
+			<title>{pageTitle(title)}</title>
+
 			{isLoadingFormData || isLoadingExternalAuth || autoCreateReady ? (
 				<Loader />
 			) : (

site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx

@@ -26,7 +26,6 @@ import {
 	useRef,
 	useState,
 } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { useNavigate, useParams, useSearchParams } from "react-router";
 import { pageTitle } from "utils/page";
@@ -283,9 +282,8 @@ const CreateWorkspacePageExperimental: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle(title)}</title>
-			</Helmet>
+			<title>{pageTitle(title)}</title>
+
 			{shouldShowLoader ? (
 				<Loader />
 			) : (

site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx

@@ -5,7 +5,6 @@ import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQueryClient } from "react-query";
 import { pageTitle } from "utils/page";
 import { AppearanceSettingsPageView } from "./AppearanceSettingsPageView";
@@ -38,9 +37,7 @@ const AppearanceSettingsPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Appearance Settings")}</title>
-			</Helmet>
+			<title>{pageTitle("Appearance Settings")}</title>
 
 			<AppearanceSettingsPageView
 				appearance={appearance}

site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage.tsx

@@ -1,6 +1,5 @@
 import { useDeploymentConfig } from "modules/management/DeploymentConfigProvider";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
 import { ExternalAuthSettingsPageView } from "./ExternalAuthSettingsPageView";
 
@@ -9,9 +8,8 @@ const ExternalAuthSettingsPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("External Authentication Settings")}</title>
-			</Helmet>
+			<title>{pageTitle("External Authentication Settings")}</title>
+
 			<ExternalAuthSettingsPageView config={deploymentConfig.config} />
 		</>
 	);

site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx

@@ -12,7 +12,6 @@ import { Paywall } from "components/Paywall/Paywall";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { type FC, useEffect, useState } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { docs } from "utils/docs";
 import { pageTitle } from "utils/page";
@@ -61,9 +60,7 @@ const IdpOrgSyncPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Organization IdP Sync")}</title>
-			</Helmet>
+			<title>{pageTitle("Organization IdP Sync")}</title>
 
 			<div className="flex flex-col gap-12">
 				<header className="flex flex-row items-baseline justify-between">

site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePage.tsx

@@ -1,7 +1,6 @@
 import { API } from "api/api";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation } from "react-query";
 import { useNavigate } from "react-router";
 import { pageTitle } from "utils/page";
@@ -38,9 +37,7 @@ const AddNewLicensePage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("License Settings")}</title>
-			</Helmet>
+			<title>{pageTitle("License Settings")}</title>
 
 			<AddNewLicensePageView
 				isSavingLicense={isCreating}

site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/DividerWithText.tsx

@@ -1,6 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import type { FC, PropsWithChildren } from "react";
-
 export const DividerWithText: FC<PropsWithChildren> = ({ children }) => {
 	return (
 		<div css={styles.container}>

site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPage.tsx

@@ -5,7 +5,6 @@ import { insightsUserStatusCounts } from "api/queries/insights";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
 import { type FC, useEffect, useState } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { useSearchParams } from "react-router";
 import { pageTitle } from "utils/page";
@@ -72,9 +71,8 @@ const LicensesSettingsPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("License Settings")}</title>
-			</Helmet>
+			<title>{pageTitle("License Settings")}</title>
+
 			<LicensesSettingsPageView
 				showConfetti={confettiOn}
 				isLoading={isLoading}

site/src/pages/DeploymentSettingsPage/NetworkSettingsPage/NetworkSettingsPage.tsx

@@ -1,6 +1,5 @@
 import { useDeploymentConfig } from "modules/management/DeploymentConfigProvider";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
 import { NetworkSettingsPageView } from "./NetworkSettingsPageView";
 
@@ -9,9 +8,8 @@ const NetworkSettingsPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Network Settings")}</title>
-			</Helmet>
+			<title>{pageTitle("Network Settings")}</title>
+
 			<NetworkSettingsPageView options={deploymentConfig.options} />
 		</>
 	);

site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx

@@ -17,7 +17,6 @@ import { useSearchParamsKey } from "hooks/useSearchParamsKey";
 import { useDeploymentConfig } from "modules/management/DeploymentConfigProvider";
 import { castNotificationMethod } from "modules/notifications/utils";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useQueries } from "react-query";
 import { deploymentGroupHasParent } from "utils/deployOptions";
 import { docs } from "utils/docs";
@@ -59,9 +58,7 @@ const NotificationsPage: FC = () => {
 	};
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Notifications Settings")}</title>
-			</Helmet>
+			<title>{pageTitle("Notifications Settings")}</title>
 
 			<SettingsHeader
 				actions={

site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPage.tsx

@@ -1,7 +1,6 @@
 import { postApp } from "api/queries/oauth2";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQueryClient } from "react-query";
 import { useNavigate } from "react-router";
 import { pageTitle } from "utils/page";
@@ -14,9 +13,7 @@ const CreateOAuth2AppPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("New OAuth2 Application")}</title>
-			</Helmet>
+			<title>{pageTitle("New OAuth2 Application")}</title>
 
 			<CreateOAuth2AppPageView
 				isUpdating={postAppMutation.isPending}

site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPage.tsx

@@ -2,7 +2,6 @@ import * as oauth2 from "api/queries/oauth2";
 import type * as TypesGen from "api/typesGenerated";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { type FC, useState } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { useNavigate, useParams } from "react-router";
 import { pageTitle } from "utils/page";
@@ -29,9 +28,7 @@ const EditOAuth2AppPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Edit OAuth2 Application")}</title>
-			</Helmet>
+			<title>{pageTitle("Edit OAuth2 Application")}</title>
 
 			<EditOAuth2AppPageView
 				app={appQuery.data}

site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPage.tsx

@@ -1,6 +1,5 @@
 import { getApps } from "api/queries/oauth2";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { pageTitle } from "utils/page";
 import OAuth2AppsSettingsPageView from "./OAuth2AppsSettingsPageView";
@@ -10,9 +9,8 @@ const OAuth2AppsSettingsPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("OAuth2 Applications")}</title>
-			</Helmet>
+			<title>{pageTitle("OAuth2 Applications")}</title>
+
 			<OAuth2AppsSettingsPageView
 				apps={appsQuery.data}
 				isLoading={appsQuery.isLoading}

site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx

@@ -2,7 +2,6 @@ import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { useDeploymentConfig } from "modules/management/DeploymentConfigProvider";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
 import { ObservabilitySettingsPageView } from "./ObservabilitySettingsPageView";
 
@@ -13,9 +12,8 @@ const ObservabilitySettingsPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Observability Settings")}</title>
-			</Helmet>
+			<title>{pageTitle("Observability Settings")}</title>
+
 			<ObservabilitySettingsPageView
 				options={deploymentConfig.options}
 				featureAuditLogEnabled={entitlements.features.audit_log.enabled}

site/src/pages/DeploymentSettingsPage/OverviewPage/OverviewPage.tsx

@@ -7,7 +7,6 @@ import {
 import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
 import { useDeploymentConfig } from "modules/management/DeploymentConfigProvider";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { pageTitle } from "utils/page";
 import { OverviewPageView } from "./OverviewPageView";
@@ -29,9 +28,8 @@ const OverviewPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Overview", "Deployment")}</title>
-			</Helmet>
+			<title>{pageTitle("Overview", "Deployment")}</title>
+
 			<OverviewPageView
 				deploymentOptions={deploymentConfig.options}
 				dailyActiveUsers={dailyActiveUsers}

site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPage.tsx

@@ -1,6 +1,5 @@
 import { useDashboard } from "modules/dashboard/useDashboard";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
 import { PremiumPageView } from "./PremiumPageView";
 
@@ -9,9 +8,8 @@ const PremiumPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Premium Features")}</title>
-			</Helmet>
+			<title>{pageTitle("Premium Features")}</title>
+
 			<PremiumPageView isEnterprise={entitlements.has_license} />
 		</>
 	);

site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx

@@ -1,7 +1,6 @@
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { useDeploymentConfig } from "modules/management/DeploymentConfigProvider";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
 import { SecuritySettingsPageView } from "./SecuritySettingsPageView";
 
@@ -11,9 +10,8 @@ const SecuritySettingsPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Security Settings")}</title>
-			</Helmet>
+			<title>{pageTitle("Security Settings")}</title>
+
 			<SecuritySettingsPageView
 				options={deploymentConfig.options}
 				featureBrowserOnlyEnabled={entitlements.features.browser_only.enabled}

site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx

@@ -1,6 +1,5 @@
 import { useDeploymentConfig } from "modules/management/DeploymentConfigProvider";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
 import { UserAuthSettingsPageView } from "./UserAuthSettingsPageView";
 
@@ -9,9 +8,8 @@ const UserAuthSettingsPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("User Authentication Settings")}</title>
-			</Helmet>
+			<title>{pageTitle("User Authentication Settings")}</title>
+
 			<UserAuthSettingsPageView options={deploymentConfig.options} />
 		</>
 	);

site/src/pages/GroupsPage/CreateGroupPage.tsx

@@ -1,6 +1,5 @@
 import { createGroup } from "api/queries/groups";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQueryClient } from "react-query";
 import { useNavigate, useParams } from "react-router";
 import { pageTitle } from "utils/page";
@@ -16,9 +15,8 @@ const CreateGroupPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Create Group")}</title>
-			</Helmet>
+			<title>{pageTitle("Create Group")}</title>
+
 			<CreateGroupPageView
 				onSubmit={async (data) => {
 					const newGroup = await createGroupMutation.mutateAsync(data);

site/src/pages/GroupsPage/GroupPage.tsx

@@ -55,7 +55,6 @@ import {
 	UserPlusIcon,
 } from "lucide-react";
 import { type FC, useState } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { Link as RouterLink, useNavigate, useParams } from "react-router";
 import { isEveryoneGroup } from "utils/groups";
@@ -81,14 +80,10 @@ const GroupPage: FC = () => {
 	const isLoading = groupQuery.isLoading || !groupData || !permissions;
 	const canUpdateGroup = permissions ? permissions.canUpdateGroup : false;
 
-	const helmet = (
-		<Helmet>
-			<title>
-				{pageTitle(
-					(groupData?.display_name || groupData?.name) ?? "Loading...",
-				)}
-			</title>
-		</Helmet>
+	const title = (
+		<title>
+			{pageTitle((groupData?.display_name || groupData?.name) ?? "Loading...")}
+		</title>
 	);
 
 	if (groupQuery.error) {
@@ -98,7 +93,7 @@ const GroupPage: FC = () => {
 	if (isLoading) {
 		return (
 			<>
-				{helmet}
+				{title}
 				<Loader />
 			</>
 		);
@@ -107,7 +102,7 @@ const GroupPage: FC = () => {
 
 	return (
 		<>
-			{helmet}
+			{title}
 
 			<Stack
 				alignItems="baseline"

site/src/pages/GroupsPage/GroupSettingsPage.tsx

@@ -4,7 +4,6 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { useNavigate, useParams } from "react-router";
 import { pageTitle } from "utils/page";
@@ -24,11 +23,7 @@ const GroupSettingsPage: FC = () => {
 		navigate(`/organizations/${organization}/groups/${groupName}`);
 	};
 
-	const helmet = (
-		<Helmet>
-			<title>{pageTitle("Settings Group")}</title>
-		</Helmet>
-	);
+	const title = <title>{pageTitle("Settings Group")}</title>;
 
 	if (groupQuery.error) {
 		return <ErrorAlert error={groupQuery.error} />;
@@ -37,7 +32,7 @@ const GroupSettingsPage: FC = () => {
 	if (groupQuery.isLoading || !groupQuery.data) {
 		return (
 			<>
-				{helmet}
+				{title}
 				<Loader />
 			</>
 		);
@@ -46,7 +41,7 @@ const GroupSettingsPage: FC = () => {
 
 	return (
 		<>
-			{helmet}
+			{title}
 
 			<GroupSettingsPageView
 				onCancel={navigateToGroup}

site/src/pages/GroupsPage/GroupsPage.tsx

@@ -15,7 +15,6 @@ import { PlusIcon } from "lucide-react";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { RequirePermission } from "modules/permissions/RequirePermission";
 import { type FC, useEffect } from "react";
-import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { Link as RouterLink } from "react-router";
 import { pageTitle } from "utils/page";
@@ -58,18 +57,14 @@ const GroupsPage: FC = () => {
 		return <Loader />;
 	}
 
-	const helmet = (
-		<Helmet>
-			<title>{pageTitle("Groups")}</title>
-		</Helmet>
-	);
+	const title = <title>{pageTitle("Groups")}</title>;
 
 	const permissions = permissionsQuery.data?.[organization.id];
 
 	if (!permissions?.viewGroups) {
 		return (
 			<>
-				{helmet}
+				{title}
 				<RequirePermission isFeatureVisible={false} />
 			</>
 		);
@@ -77,7 +72,7 @@ const GroupsPage: FC = () => {
 
 	return (
 		<div className="w-full max-w-screen-2xl pb-10">
-			{helmet}
+			{title}
 
 			<Stack
 				alignItems="baseline"

site/src/pages/HealthPage/AccessURLPage.tsx

@@ -1,6 +1,5 @@
 import type { HealthcheckReport } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
-import { Helmet } from "react-helmet-async";
 import { useOutletContext } from "react-router";
 import { pageTitle } from "utils/page";
 import {
@@ -21,9 +20,7 @@ const AccessURLPage = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Access URL - Health")}</title>
-			</Helmet>
+			<title>{pageTitle("Access URL - Health")}</title>
 
 			<Header>
 				<HeaderTitle>

site/src/pages/HealthPage/DERPPage.tsx

@@ -8,7 +8,6 @@ import type {
 } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { Link, useOutletContext } from "react-router";
 import { pageTitle } from "utils/page";
 import {
@@ -51,9 +50,7 @@ const DERPPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("DERP - Health")}</title>
-			</Helmet>
+			<title>{pageTitle("DERP - Health")}</title>
 
 			<Header>
 				<HeaderTitle>

site/src/pages/HealthPage/DERPRegionPage.tsx

@@ -9,7 +9,6 @@ import type {
 import { Alert } from "components/Alert/Alert";
 import { ChevronLeftIcon, CodeIcon, HashIcon } from "lucide-react";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { Link, useOutletContext, useParams } from "react-router";
 import { getLatencyColor } from "utils/latency";
 import { pageTitle } from "utils/page";
@@ -38,9 +37,7 @@ const DERPRegionPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle(region!.RegionName, "Health")}</title>
-			</Helmet>
+			<title>{pageTitle(region!.RegionName, "Health")}</title>
 
 			<Header>
 				<hgroup>

site/src/pages/HealthPage/DatabasePage.tsx

@@ -1,6 +1,5 @@
 import type { HealthcheckReport } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
-import { Helmet } from "react-helmet-async";
 import { useOutletContext } from "react-router";
 import { pageTitle } from "utils/page";
 import {
@@ -21,9 +20,7 @@ const DatabasePage = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Database - Health")}</title>
-			</Helmet>
+			<title>{pageTitle("Database - Health")}</title>
 
 			<Header>
 				<HeaderTitle>

site/src/pages/HealthPage/HealthLayout.tsx

@@ -11,7 +11,6 @@ import { Loader } from "components/Loader/Loader";
 import kebabCase from "lodash/fp/kebabCase";
 import { DashboardFullPage } from "modules/dashboard/DashboardLayout";
 import { type FC, Suspense } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { NavLink, Outlet } from "react-router";
 import { cn } from "utils/cn";
@@ -70,9 +69,7 @@ export const HealthLayout: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Health")}</title>
-			</Helmet>
+			<title>{pageTitle("Health")}</title>
 
 			<DashboardFullPage>
 				<div className="flex basis-0 flex-1 overflow-hidden">

site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx

@@ -2,7 +2,6 @@ import type { HealthcheckReport } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
 import { Provisioner } from "modules/provisioners/Provisioner";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useOutletContext } from "react-router";
 import { pageTitle } from "utils/page";
 import {
@@ -20,9 +19,7 @@ const ProvisionerDaemonsPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Provisioner Daemons - Health")}</title>
-			</Helmet>
+			<title>{pageTitle("Provisioner Daemons - Health")}</title>
 
 			<Header>
 				<HeaderTitle>

site/src/pages/HealthPage/WebsocketPage.tsx

@@ -3,7 +3,6 @@ import Tooltip from "@mui/material/Tooltip";
 import type { HealthcheckReport } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
 import { CodeIcon } from "lucide-react";
-import { Helmet } from "react-helmet-async";
 import { useOutletContext } from "react-router";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { pageTitle } from "utils/page";
@@ -24,9 +23,7 @@ const WebsocketPage = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Websocket - Health")}</title>
-			</Helmet>
+			<title>{pageTitle("Websocket - Health")}</title>
 
 			<Header>
 				<HeaderTitle>

site/src/pages/HealthPage/WorkspaceProxyPage.tsx

@@ -5,7 +5,6 @@ import type { HealthcheckReport } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
 import { HashIcon } from "lucide-react";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useOutletContext } from "react-router";
 import { createDayString } from "utils/createDayString";
 import { pageTitle } from "utils/page";
@@ -28,9 +27,7 @@ const WorkspaceProxyPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Workspace Proxy - Health")}</title>
-			</Helmet>
+			<title>{pageTitle("Workspace Proxy - Health")}</title>
 
 			<Header>
 				<HeaderTitle>

site/src/pages/IconsPage/IconsPage.tsx

@@ -15,7 +15,6 @@ import {
 import { Stack } from "components/Stack/Stack";
 import { SearchIcon, XIcon } from "lucide-react";
 import { type FC, type ReactNode, useMemo, useState } from "react";
-import { Helmet } from "react-helmet-async";
 import {
 	defaultParametersForBuiltinIcons,
 	parseImageParameters,
@@ -73,9 +72,7 @@ const IconsPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Icons")}</title>
-			</Helmet>
+			<title>{pageTitle("Icons")}</title>
 			<Margins>
 				<PageHeader
 					actions={

site/src/pages/LoginPage/LoginPage.tsx

@@ -3,7 +3,6 @@ import { authMethods } from "api/queries/users";
 import { useAuthContext } from "contexts/auth/AuthProvider";
 import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
 import { type FC, useEffect } from "react";
-import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { Navigate, useLocation, useNavigate } from "react-router";
 import { getApplicationName } from "utils/appearance";
@@ -77,9 +76,7 @@ const LoginPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>Sign in to {applicationName}</title>
-			</Helmet>
+			<title>Sign in to {applicationName}</title>
 			<LoginPageView
 				authMethods={authMethodsQuery.data}
 				error={signInError ?? redirectError}

site/src/pages/OrganizationSettingsPage/CustomRolesPage/CreateEditRolePage.tsx

@@ -11,7 +11,6 @@ import { Loader } from "components/Loader/Loader";
 import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
 import { RequirePermission } from "modules/permissions/RequirePermission";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { useNavigate, useParams } from "react-router";
 import { pageTitle } from "utils/page";
@@ -53,13 +52,11 @@ const CreateEditRolePage: FC = () => {
 					: organizationPermissions.createOrgRoles
 			}
 		>
-			<Helmet>
-				<title>
-					{pageTitle(
-						role !== undefined ? "Edit Custom Role" : "Create Custom Role",
-					)}
-				</title>
-			</Helmet>
+			<title>
+				{pageTitle(
+					role !== undefined ? "Edit Custom Role" : "Create Custom Role",
+				)}
+			</title>
 
 			<CreateEditRolePageView
 				role={role}

site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPage.tsx

@@ -14,7 +14,6 @@ import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
 import { RequirePermission } from "modules/permissions/RequirePermission";
 import { type FC, useEffect, useState } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { useParams } from "react-router";
 import { pageTitle } from "utils/page";
@@ -59,14 +58,13 @@ const CustomRolesPage: FC = () => {
 
 	return (
 		<div className="w-full max-w-screen-2xl pb-10">
-			<Helmet>
-				<title>
-					{pageTitle(
-						"Custom Roles",
-						organization.display_name || organization.name,
-					)}
-				</title>
-			</Helmet>
+			<title>
+				{pageTitle(
+					"Custom Roles",
+					organization.display_name || organization.name,
+				)}
+			</title>
+
 			<RequirePermission
 				isFeatureVisible={organizationPermissions?.viewOrgRoles ?? false}
 			>

site/src/pages/OrganizationSettingsPage/Horizontal.tsx

@@ -1,6 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import type { FC, HTMLAttributes, ReactNode } from "react";
-
 export const HorizontalContainer: FC<HTMLAttributes<HTMLDivElement>> = ({
 	...attrs
 }) => {

site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx

@@ -17,7 +17,6 @@ import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
 import { RequirePermission } from "modules/permissions/RequirePermission";
 import { type FC, useEffect, useState } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQueries, useQuery, useQueryClient } from "react-query";
 import { useParams, useSearchParams } from "react-router";
 import { docs } from "utils/docs";
@@ -85,18 +84,16 @@ const IdpSyncPage: FC = () => {
 		return <EmptyState message="Organization not found" />;
 	}
 
-	const helmet = (
-		<Helmet>
-			<title>
-				{pageTitle("IdP Sync", organization.display_name || organization.name)}
-			</title>
-		</Helmet>
+	const title = (
+		<title>
+			{pageTitle("IdP Sync", organization.display_name || organization.name)}
+		</title>
 	);
 
 	if (!organizationPermissions?.viewIdpSyncSettings) {
 		return (
 			<>
-				{helmet}
+				{title}
 				<RequirePermission isFeatureVisible={false} />
 			</>
 		);
@@ -118,7 +115,7 @@ const IdpSyncPage: FC = () => {
 
 	return (
 		<div className="w-full max-w-screen-2xl pb-10">
-			{helmet}
+			{title}
 
 			<div className="flex flex-col gap-12">
 				<header className="flex flex-row items-baseline justify-between">

site/src/pages/OrganizationSettingsPage/OrganizationMembersPage.tsx

@@ -17,7 +17,6 @@ import { usePaginatedQuery } from "hooks/usePaginatedQuery";
 import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
 import { RequirePermission } from "modules/permissions/RequirePermission";
 import { type FC, useState } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { useParams, useSearchParams } from "react-router";
 import { pageTitle } from "utils/page";
@@ -65,18 +64,16 @@ const OrganizationMembersPage: FC = () => {
 		return <EmptyState message="Organization not found" />;
 	}
 
-	const helmet = (
-		<Helmet>
-			<title>
-				{pageTitle("Members", organization.display_name || organization.name)}
-			</title>
-		</Helmet>
+	const title = (
+		<title>
+			{pageTitle("Members", organization.display_name || organization.name)}
+		</title>
 	);
 
 	if (!organizationPermissions) {
 		return (
 			<>
-				{helmet}
+				{title}
 				<RequirePermission isFeatureVisible={false} />
 			</>
 		);
@@ -84,7 +81,7 @@ const OrganizationMembersPage: FC = () => {
 
 	return (
 		<>
-			{helmet}
+			{title}
 			<OrganizationMembersPageView
 				allAvailableRoles={organizationRolesQuery.data}
 				canEditMembers={organizationPermissions.editMembers}

site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/OrganizationProvisionerJobsPageView.tsx

@@ -42,7 +42,6 @@ import {
 } from "components/Tooltip/Tooltip";
 import { XIcon } from "lucide-react";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { docs } from "utils/docs";
 import { pageTitle } from "utils/page";
 import { JobRow } from "./JobRow";
@@ -90,9 +89,8 @@ const OrganizationProvisionerJobsPageView: FC<
 	if (!organization) {
 		return (
 			<>
-				<Helmet>
-					<title>{pageTitle("Provisioner Jobs")}</title>
-				</Helmet>
+				<title>{pageTitle("Provisioner Jobs")}</title>
+
 				<EmptyState message="Organization not found" />
 			</>
 		);
@@ -100,14 +98,12 @@ const OrganizationProvisionerJobsPageView: FC<
 
 	return (
 		<div className="w-full max-w-screen-2xl pb-10">
-			<Helmet>
-				<title>
-					{pageTitle(
-						"Provisioner Jobs",
-						organization.display_name || organization.name,
-					)}
-				</title>
-			</Helmet>
+			<title>
+				{pageTitle(
+					"Provisioner Jobs",
+					organization.display_name || organization.name,
+				)}
+			</title>
 
 			<section>
 				<SettingsHeader>

site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPage.tsx

@@ -4,7 +4,6 @@ import { useDashboard } from "modules/dashboard/useDashboard";
 import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
 import { RequirePermission } from "modules/permissions/RequirePermission";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { useParams } from "react-router";
 import { pageTitle } from "utils/page";
@@ -26,21 +25,19 @@ const OrganizationProvisionerKeysPage: FC = () => {
 		return <EmptyState message="Organization not found" />;
 	}
 
-	const helmet = (
-		<Helmet>
-			<title>
-				{pageTitle(
-					"Provisioner Keys",
-					organization.display_name || organization.name,
-				)}
-			</title>
-		</Helmet>
+	const title = (
+		<title>
+			{pageTitle(
+				"Provisioner Keys",
+				organization.display_name || organization.name,
+			)}
+		</title>
 	);
 
 	if (!organizationPermissions?.viewProvisioners) {
 		return (
 			<>
-				{helmet}
+				{title}
 				<RequirePermission isFeatureVisible={false} />
 			</>
 		);
@@ -48,7 +45,7 @@ const OrganizationProvisionerKeysPage: FC = () => {
 
 	return (
 		<>
-			{helmet}
+			{title}
 			<OrganizationProvisionerKeysPageView
 				showPaywall={!entitlements.features.multiple_organizations.enabled}
 				provisionerKeyDaemons={provisionerKeyDaemonsQuery.data}

site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/LastConnectionHead.tsx

@@ -6,7 +6,6 @@ import {
 } from "components/Tooltip/Tooltip";
 import { InfoIcon } from "lucide-react";
 import type { FC } from "react";
-
 export const LastConnectionHead: FC = () => {
 	return (
 		<span className="flex items-center gap-1 whitespace-nowrap text-xs font-medium text-content-secondary">

site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPage.tsx

@@ -6,7 +6,6 @@ import { useDashboard } from "modules/dashboard/useDashboard";
 import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
 import { RequirePermission } from "modules/permissions/RequirePermission";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { useParams, useSearchParams } from "react-router";
 import { pageTitle } from "utils/page";
@@ -37,21 +36,19 @@ const OrganizationProvisionersPage: FC = () => {
 		return <EmptyState message="Organization not found" />;
 	}
 
-	const helmet = (
-		<Helmet>
-			<title>
-				{pageTitle(
-					"Provisioners",
-					organization.display_name || organization.name,
-				)}
-			</title>
-		</Helmet>
+	const title = (
+		<title>
+			{pageTitle(
+				"Provisioners",
+				organization.display_name || organization.name,
+			)}
+		</title>
 	);
 
 	if (!organizationPermissions?.viewProvisioners) {
 		return (
 			<>
-				{helmet}
+				{title}
 				<RequirePermission isFeatureVisible={false} />
 			</>
 		);
@@ -59,7 +56,7 @@ const OrganizationProvisionersPage: FC = () => {
 
 	return (
 		<>
-			{helmet}
+			{title}
 			<OrganizationProvisionersPageView
 				showPaywall={!entitlements.features.multiple_organizations.enabled}
 				error={provisionersQuery.error}

site/src/pages/OrganizationSettingsPage/OrganizationSettingsPage.tsx

@@ -8,7 +8,6 @@ import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
 import { RequirePermission } from "modules/permissions/RequirePermission";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQueryClient } from "react-query";
 import { useNavigate } from "react-router";
 import { pageTitle } from "utils/page";
@@ -30,18 +29,16 @@ const OrganizationSettingsPage: FC = () => {
 		return <EmptyState message="Organization not found" />;
 	}
 
-	const helmet = (
-		<Helmet>
-			<title>
-				{pageTitle("Settings", organization.display_name || organization.name)}
-			</title>
-		</Helmet>
+	const title = (
+		<title>
+			{pageTitle("Settings", organization.display_name || organization.name)}
+		</title>
 	);
 
 	if (!organizationPermissions?.editSettings) {
 		return (
 			<>
-				{helmet}
+				{title}
 				<RequirePermission isFeatureVisible={false} />
 			</>
 		);
@@ -52,7 +49,7 @@ const OrganizationSettingsPage: FC = () => {
 
 	return (
 		<>
-			{helmet}
+			{title}
 			<OrganizationSettingsPageView
 				organization={organization}
 				error={error}

site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx

@@ -11,11 +11,11 @@ import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import { useFormik } from "formik";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation } from "react-query";
 import { Link as RouterLink, useNavigate, useSearchParams } from "react-router";
 import { getApplicationName } from "utils/appearance";
 import { getFormHelpers } from "utils/formUtils";
+import { pageTitle } from "utils/page";
 import * as yup from "yup";
 
 const validationSchema = yup.object({
@@ -66,9 +66,7 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
 
 	return (
 		<>
-			<Helmet>
-				<title>Reset Password - {applicationName}</title>
-			</Helmet>
+			<title>{pageTitle("Reset Password", applicationName)}</title>
 
 			<div css={styles.root}>
 				<main css={styles.container}>

site/src/pages/ResetPasswordPage/RequestOTPPage.tsx

@@ -7,10 +7,10 @@ import { CustomLogo } from "components/CustomLogo/CustomLogo";
 import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation } from "react-query";
 import { Link as RouterLink } from "react-router";
 import { getApplicationName } from "utils/appearance";
+import { pageTitle } from "utils/page";
 
 const RequestOTPPage: FC = () => {
 	const applicationName = getApplicationName();
@@ -18,9 +18,7 @@ const RequestOTPPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>Reset Password - {applicationName}</title>
-			</Helmet>
+			<title>{pageTitle("Reset Password", applicationName)}</title>
 
 			<main css={styles.root}>
 				<CustomLogo css={styles.logo} />

site/src/pages/SetupPage/SetupPage.tsx

@@ -4,7 +4,6 @@ import { Loader } from "components/Loader/Loader";
 import { useAuthContext } from "contexts/auth/AuthProvider";
 import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
 import { type FC, useEffect, useRef } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery } from "react-query";
 import { Navigate } from "react-router";
 import { pageTitle } from "utils/page";
@@ -57,9 +56,7 @@ export const SetupPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("Set up your account")}</title>
-			</Helmet>
+			<title>{pageTitle("Set up your account")}</title>
 			<SetupPageView
 				authMethods={authMethodsQuery.data}
 				isLoading={isSigningIn || createFirstUserMutation.isPending}

site/src/pages/StarterTemplatePage/StarterTemplatePage.tsx

@@ -1,6 +1,5 @@
 import { templateExamples } from "api/queries/templates";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { useParams } from "react-router";
 import { pageTitle } from "utils/page";
@@ -15,9 +14,7 @@ const StarterTemplatePage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle(starterTemplate?.name ?? exampleId)}</title>
-			</Helmet>
+			<title>{pageTitle(starterTemplate?.name ?? exampleId)}</title>
 
 			<StarterTemplatePageView
 				starterTemplate={starterTemplate}

site/src/pages/TaskPage/TaskPage.tsx

@@ -28,7 +28,6 @@ import {
 	useLayoutEffect,
 	useRef,
 } from "react";
-import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { Link as RouterLink, useParams } from "react-router";
@@ -71,9 +70,7 @@ const TaskPage = () => {
 	if (error) {
 		return (
 			<TaskPageLayout>
-				<Helmet>
-					<title>{pageTitle("Error loading task")}</title>
-				</Helmet>
+				<title>{pageTitle("Error loading task")}</title>
 
 				<div className="w-full min-h-80 flex items-center justify-center">
 					<div className="flex flex-col items-center">
@@ -104,9 +101,7 @@ const TaskPage = () => {
 	if (!task) {
 		return (
 			<TaskPageLayout>
-				<Helmet>
-					<title>{pageTitle("Loading task")}</title>
-				</Helmet>
+				<title>{pageTitle("Loading task")}</title>
 				<Loader className="w-full h-full" />
 			</TaskPageLayout>
 		);
@@ -159,9 +154,7 @@ const TaskPage = () => {
 
 	return (
 		<TaskPageLayout>
-			<Helmet>
-				<title>{pageTitle(task.workspace.name)}</title>
-			</Helmet>
+			<title>{pageTitle(task.workspace.name)}</title>
 
 			<TaskTopbar task={task} />
 			{content}

site/src/pages/TasksPage/TasksPage.tsx

@@ -12,7 +12,6 @@ import {
 import { useAuthenticated } from "hooks";
 import { useSearchParamsKey } from "hooks/useSearchParamsKey";
 import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { cn } from "utils/cn";
 import { pageTitle } from "utils/page";
@@ -61,9 +60,7 @@ const TasksPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle("AI Tasks")}</title>
-			</Helmet>
+			<title>{pageTitle("AI Tasks")}</title>
 			<Margins>
 				<PageHeader>
 					<span className="flex flex-row gap-2">

site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx

@@ -2,7 +2,7 @@ import { useTheme } from "@emotion/react";
 import { MemoizedMarkdown } from "components/Markdown/Markdown";
 import frontMatter from "front-matter";
 import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
-import { Helmet } from "react-helmet-async";
+
 import { pageTitle } from "utils/page";
 
 export default function TemplateDocsPage() {
@@ -13,9 +13,7 @@ export default function TemplateDocsPage() {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle(template.name, "Documentation")}</title>
-			</Helmet>
+			<title>{pageTitle(template.name, "Documentation")}</title>
 
 			<div
 				css={{

site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx

@@ -14,7 +14,6 @@ import { useClipboard } from "hooks/useClipboard";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
 import { type FC, useEffect, useId, useState } from "react";
-import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { nameValidator } from "utils/formUtils";
 import { pageTitle } from "utils/page";
@@ -34,9 +33,8 @@ const TemplateEmbedPage: FC = () => {
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle(template.name)}</title>
-			</Helmet>
+			<title>{pageTitle(template.name)}</title>
+
 			<TemplateEmbedPageView
 				template={template}
 				templateParameters={templateParameters?.filter(
@@ -124,9 +122,8 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
 
 	return (
 		<>
-			<Helmet>
-				<title>{pageTitle(template.name)}</title>
-			</Helmet>
+			<title>{pageTitle(template.name)}</title>
+
 			{!buttonValues || !templateParameters ? (
 				<Loader />
 			) : (