chore: update versions (#2758)

This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @nhost/dashboard@1.18.0

### Minor Changes

- 502abad: feat: add services health checks indicators to the overview
page
-   b3ff6ad: chore: update title text on service status modal
- dbadf59: feat: add project configuration TOML editor to the settings
page

## @nhost/docs@2.14.0

### Minor Changes

-   79ce7ca: feat: add react-native quickstart guide
-   bedbb82: feat: functions: added runtime/pkg manager information

## @nhost-examples/nextjs-server-components@0.4.8

### Patch Changes

- 9c9137f: fix: disable autoRefreshToken when running nhost server side

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

dashboard/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nhost/dashboard
 
+## 1.18.0
+
+### Minor Changes
+
+- 502abad: feat: add services health checks indicators to the overview page
+- b3ff6ad: chore: update title text on service status modal
+- dbadf59: feat: add project configuration TOML editor to the settings page
+
+## 1.17.0
+
+### Minor Changes
+
+- 77fba27: fix: postgres version validation when activating ai in ai settings page
+- ac6d1b6: feat: use name instead of awsName
+
 ## 1.16.3
 
 ### Patch Changes

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "1.16.3",
+  "version": "1.18.0",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -21,17 +21,20 @@
   "dependencies": {
     "@apollo/client": "^3.9.9",
     "@codemirror/lang-sql": "^6.6.2",
+    "@codemirror/language": "^6.10.1",
+    "@codemirror/legacy-modes": "^6.4.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.5",
     "@fontsource/inter": "^5.0.17",
     "@fontsource/roboto-mono": "^5.0.17",
-    "@graphiql/react": "^0.20.3",
+    "@graphiql/react": "^0.22.3",
     "@graphiql/toolkit": "^0.9.1",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^1.0.6",
     "@hookform/resolvers": "^3.3.4",
+    "@iarna/toml": "^2.2.5",
     "@mui/base": "5.0.0-beta.31",
     "@mui/material": "^5.15.14",
     "@mui/system": "^5.15.14",
@@ -45,6 +48,7 @@
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-table": "^8.15.3",
     "@tanstack/react-virtual": "^3.2.0",
+    "@uiw/codemirror-theme-bbedit": "^4.22.2",
     "@uiw/codemirror-theme-github": "^4.21.25",
     "@uiw/react-codemirror": "^4.21.25",
     "analytics-node": "^6.2.0",
@@ -53,7 +57,7 @@
     "date-fns": "^2.30.0",
     "framer-motion": "^10.18.0",
     "generate-password": "^1.7.1",
-    "graphiql": "^3.1.1",
+    "graphiql": "^3.3.1",
     "graphql": "16.8.1",
     "graphql-request": "^6.1.0",
     "graphql-tag": "^2.12.6",

dashboard/src/components/layout/SettingsLayout/SettingsLayout.tsx

@@ -45,7 +45,7 @@ export default function SettingsLayout({
 
       <Box
         sx={{ backgroundColor: 'background.default' }}
-        className="flex w-full flex-auto flex-col overflow-scroll overflow-x-hidden"
+        className="flex w-full flex-auto flex-col overflow-y-auto overflow-x-hidden"
       >
         <RetryableErrorBoundary>
           <div className="flex flex-col space-y-2">

dashboard/src/components/layout/SettingsSidebar/SettingsSidebar.tsx

@@ -3,6 +3,7 @@ import { Backdrop } from '@/components/ui/v2/Backdrop';
 import type { BoxProps } from '@/components/ui/v2/Box';
 import { Box } from '@/components/ui/v2/Box';
 import { IconButton } from '@/components/ui/v2/IconButton';
+import { SlidersIcon } from '@/components/ui/v2/icons/SlidersIcon';
 import { List } from '@/components/ui/v2/List';
 import type { ListItemButtonProps } from '@/components/ui/v2/ListItem';
 import { ListItem } from '@/components/ui/v2/ListItem';
@@ -27,12 +28,17 @@ interface SettingsNavLinkProps extends ListItemButtonProps {
    * @default true
    */
   exact?: boolean;
+  /**
+   * Class name passed to the text element.
+   */
+  textClassName?: string;
 }
 
 function SettingsNavLink({
   exact = true,
   href,
   children,
+  textClassName,
   ...props
 }: SettingsNavLinkProps) {
   const router = useRouter();
@@ -52,7 +58,7 @@ function SettingsNavLink({
         selected={active}
         {...props}
       >
-        <ListItem.Text>{children}</ListItem.Text>
+        <ListItem.Text className={textClassName}>{children}</ListItem.Text>
       </ListItem.Button>
     </ListItem.Root>
   );
@@ -114,13 +120,13 @@ export default function SettingsSidebar({
       <Box
         component="aside"
         className={twMerge(
-          'absolute top-0 z-[35] h-full w-full overflow-auto border-r-1 px-2 pb-17 pt-2 motion-safe:transition-transform md:relative md:z-0 md:h-full md:py-2.5 md:transition-none',
+          'absolute top-0 z-[35] flex h-full w-full flex-col justify-between overflow-auto border-r-1 pb-17 pt-2 motion-safe:transition-transform md:relative md:z-0 md:h-full md:pb-0 md:pt-2.5 md:transition-none',
           expanded ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
           className,
         )}
         {...props}
       >
-        <nav aria-label="Settings navigation">
+        <nav aria-label="Settings navigation" className="px-2">
           <List className="grid gap-2">
             <SettingsNavLink
               href="/general"
@@ -220,6 +226,20 @@ export default function SettingsSidebar({
             </SettingsNavLink>
           </List>
         </nav>
+        <Box className="border-t">
+          <SettingsNavLink
+            href="/editor"
+            exact={false}
+            onClick={handleSelect}
+            className="flex w-full border group-focus-within:pr-9 group-hover:pr-9 group-active:pr-9"
+            textClassName="flex w-full justify-center"
+          >
+            <div className="flex w-full flex-row items-center justify-center space-x-4 py-2.5">
+              <SlidersIcon />
+              <span className="flex">Configuration Editor</span>
+            </div>
+          </SettingsNavLink>
+        </Box>
       </Box>
 
       <IconButton

dashboard/src/components/presentational/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,132 @@
+import { clsx } from 'clsx';
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ForwardedRef,
+  type ReactElement,
+} from 'react';
+
+import { Box } from '@/components/ui/v2/Box';
+import { CopyToClipboardButton as CopyToClipboardButtonOriginal } from './CopyToClipboardButton';
+import { getNodeText } from './getNodeText';
+
+export interface CodeBlockPropsBase {
+  filename?: string;
+  /**
+   *  Color of the filename text and the border underneath it when content is being shown.
+   */
+  filenameColor?: string;
+  /**
+   * Text of the toast that appears when the code is copied to the clipboard.
+   */
+  copyToClipboardToastTitle?: string;
+}
+
+export type CodeBlockProps = CodeBlockPropsBase &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof CodeBlockPropsBase>;
+
+/**
+ * Different from CodeGroup because we cannot use Headless UI's Tab component outside a Tab.Group
+ * Styling should look the same though.
+ */
+function CodeTabBar({
+  filename,
+  filenameColor,
+  children,
+}: {
+  filename: string;
+  filenameColor?: string;
+  children?: ReactElement;
+}) {
+  return (
+    <div className="flex text-xs leading-6 text-slate-400">
+      <div
+        className="flex flex-none items-center border-b border-t border-t-transparent px-4 py-1"
+        style={{ color: filenameColor, borderBottomColor: filenameColor }}
+      >
+        {filename}
+      </div>
+      <div className="bg-codeblock-tabs flex flex-auto items-center rounded-t border border-slate-500/30">
+        {children && (
+          <div className="flex flex-auto items-center justify-end space-x-4 px-4">
+            {children}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface CopyToClipboardButtonProps
+  extends Partial<
+    ComponentPropsWithoutRef<typeof CopyToClipboardButtonOriginal>
+  > {
+  filenameColor?: string;
+  tooltipColor?: string;
+  toastTitle?: string;
+}
+
+function CopyToClipboardButton({
+  tooltipColor,
+  filenameColor,
+  textToCopy,
+  toastTitle,
+  ...props
+}: CopyToClipboardButtonProps) {
+  return (
+    <CopyToClipboardButtonOriginal
+      textToCopy={textToCopy}
+      title={toastTitle}
+      {...props}
+    />
+  );
+}
+
+export const CodeBlock = forwardRef(
+  (
+    {
+      filename,
+      filenameColor,
+      children,
+      className,
+      copyToClipboardToastTitle,
+      ...props
+    }: CodeBlockProps,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => (
+    <Box
+      sx={{
+        backgroundColor: (theme) =>
+          theme.palette.mode === 'dark' ? 'grey.200' : 'grey.200',
+      }}
+      className={clsx(
+        'not-prose relative mt-5 px-2',
+        filename && 'pt-2',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      {filename ? (
+        <CodeTabBar filename={filename} filenameColor={filenameColor}>
+          <CopyToClipboardButton
+            filenameColor={filenameColor}
+            textToCopy={getNodeText(children)}
+            toastTitle={copyToClipboardToastTitle}
+            className="relative"
+          />
+        </CodeTabBar>
+      ) : (
+        <CopyToClipboardButton
+          filenameColor={filenameColor}
+          textToCopy={getNodeText(children)}
+          toastTitle={copyToClipboardToastTitle}
+          className="absolute right-3 top-0"
+        />
+      )}
+      <pre className="overflow-x-auto">
+        <code className="font-mono">{children}</code>
+      </pre>
+    </Box>
+  ),
+);

dashboard/src/components/presentational/CodeBlock/CopyToClipboardButton.tsx

@@ -0,0 +1,55 @@
+import { clsx } from 'clsx';
+import { useEffect, useState } from 'react';
+
+import {
+  IconButton,
+  type IconButtonProps,
+} from '@/components/ui/v2/IconButton';
+import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
+import { copy } from '@/utils/copy';
+
+export function CopyToClipboardButton({
+  textToCopy,
+  className,
+  title,
+  ...props
+}: {
+  textToCopy: string;
+  title: string;
+} & IconButtonProps) {
+  const [disabled, setDisabled] = useState(true);
+
+  useEffect(() => {
+    // Hide copy button if the browser does not support it
+    if (typeof window !== 'undefined' && !navigator?.clipboard) {
+      console.error(
+        "The browser's Clipboard API is unavailable. The Clipboard API is only available on HTTPS.",
+      );
+      setDisabled(true);
+    } else {
+      setDisabled(false);
+    }
+  }, []);
+
+  // Hide copy button if you would copy an empty string
+  if (!textToCopy || disabled) {
+    return null;
+  }
+
+  return (
+    <IconButton
+      variant="borderless"
+      color="secondary"
+      className={clsx('group', className)}
+      onClick={(event) => {
+        event.stopPropagation();
+
+        copy(textToCopy, title);
+      }}
+      aria-label={textToCopy}
+      {...props}
+    >
+      <CopyIcon className="top-5 h-4 w-4" />
+    </IconButton>
+  );
+}

dashboard/src/components/presentational/CodeBlock/getNodeText.ts

@@ -0,0 +1,17 @@
+// Gets the text from a component as if you selected it with a mouse and copied it.
+export const getNodeText = (node: any): string => {
+  if (['string', 'number'].includes(typeof node)) {
+    // Convert number into string
+    return node.toString();
+  }
+
+  if (node instanceof Array) {
+    return node.map(getNodeText).join('');
+  }
+
+  if (typeof node === 'object' && node?.props?.children) {
+    return getNodeText(node.props.children);
+  }
+
+  return '';
+};

dashboard/src/components/presentational/CodeBlock/index.ts

@@ -0,0 +1,8 @@
+import {
+  CodeBlock,
+  type CodeBlockProps,
+  type CodeBlockPropsBase,
+} from './CodeBlock';
+
+export type { CodeBlockPropsBase, CodeBlockProps };
+export { CodeBlock };

dashboard/src/components/ui/v2/Accordion/Accordion.tsx

@@ -0,0 +1,28 @@
+import { styled } from '@mui/material';
+import type { AccordionProps as MaterialAccordionProps } from '@mui/material/Accordion';
+
+import MaterialAccordion, { accordionClasses } from '@mui/material/Accordion';
+
+export interface AccordionProps extends MaterialAccordionProps {}
+
+const Accordion = styled(MaterialAccordion)<AccordionProps>(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.pxToRem(12),
+  lineHeight: theme.typography.pxToRem(16),
+  borderBottom: `transparent solid 0px`,
+  boxShadow: `none`,
+  [`&.${accordionClasses.disabled}`]: {
+    backgroundColor: 'transparent',
+  },
+  [`&.${accordionClasses.root}`]: {
+    overflowX: 'hidden',
+  },
+  [`&.${accordionClasses.expanded}`]: {
+    marginTop: 0,
+    marginBottom: 0,
+  },
+}));
+
+Accordion.displayName = 'NhostAccordion';
+
+export default Accordion;

dashboard/src/components/ui/v2/Accordion/AccordionActions.tsx

@@ -0,0 +1,18 @@
+import { styled } from '@mui/material';
+import type { AccordionActionsProps as MaterialAccordionActionsProps } from '@mui/material/AccordionActions';
+
+import MaterialAccordionActions from '@mui/material/AccordionActions';
+
+export interface AccordionActionsProps extends MaterialAccordionActionsProps {}
+
+const AccordionActions = styled(
+  MaterialAccordionActions,
+)<AccordionActionsProps>(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.pxToRem(12),
+  lineHeight: theme.typography.pxToRem(16),
+}));
+
+AccordionActions.displayName = 'NhostAccordionActions';
+
+export default AccordionActions;

dashboard/src/components/ui/v2/Accordion/AccordionDetails.tsx

@@ -0,0 +1,21 @@
+import { styled } from '@mui/material';
+import type { AccordionDetailsProps as MaterialAccordionDetailsProps } from '@mui/material/AccordionDetails';
+
+import MaterialAccordionDetails from '@mui/material/AccordionDetails';
+
+export interface AccordionDetailsProps extends MaterialAccordionDetailsProps {}
+
+const AccordionDetails = styled(
+  MaterialAccordionDetails,
+)<AccordionDetailsProps>(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.pxToRem(12),
+  lineHeight: theme.typography.pxToRem(16),
+  backgroundColor: theme.palette.grey[200],
+  marginTop: 0,
+  marginBottom: 0,
+}));
+
+AccordionDetails.displayName = 'NhostAccordionDetails';
+
+export default AccordionDetails;

dashboard/src/components/ui/v2/Accordion/AccordionSummary.tsx

@@ -0,0 +1,24 @@
+import { styled } from '@mui/material';
+import type { AccordionSummaryProps as MaterialAccordionSummaryProps } from '@mui/material/AccordionSummary';
+
+import MaterialAccordionSummary, {
+  accordionSummaryClasses,
+} from '@mui/material/AccordionSummary';
+
+export interface AccordionSummaryProps extends MaterialAccordionSummaryProps {}
+
+const AccordionSummary = styled(
+  MaterialAccordionSummary,
+)<AccordionSummaryProps>(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.pxToRem(12),
+  lineHeight: theme.typography.pxToRem(16),
+  [`&.${accordionSummaryClasses.disabled}`]: {
+    backgroundColor: 'transparent',
+    opacity: 1,
+  },
+}));
+
+AccordionSummary.displayName = 'NhostAccordionSummary';
+
+export default AccordionSummary;

dashboard/src/components/ui/v2/Accordion/index.ts

@@ -0,0 +1,19 @@
+import AccordionRoot from './Accordion';
+import AccordionActions from './AccordionActions';
+import AccordionDetails from './AccordionDetails';
+import AccordionSummary from './AccordionSummary';
+
+export { default as BaseAccordion } from './Accordion';
+export * from './AccordionActions';
+export { default as AccordionActions } from './AccordionActions';
+export * from './AccordionDetails';
+export { default as AccordionDetails } from './AccordionDetails';
+export * from './AccordionSummary';
+export { default as AccordionSummary } from './AccordionSummary';
+
+export const Accordion = {
+  Root: AccordionRoot,
+  Details: AccordionDetails,
+  Summary: AccordionSummary,
+  Actions: AccordionActions,
+};

dashboard/src/components/ui/v2/Badge/Badge.tsx

@@ -0,0 +1,44 @@
+import { styled } from '@mui/material';
+import type { BadgeProps as MaterialBadgeProps } from '@mui/material/Badge';
+import MaterialBadge from '@mui/material/Badge';
+import type { ElementType } from 'react';
+
+export interface BadgeProps extends MaterialBadgeProps {
+  /**
+   * Custom component for the root node.
+   */
+  component?: ElementType;
+}
+
+const Badge = styled(MaterialBadge)<BadgeProps>(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.pxToRem(12),
+  lineHeight: theme.typography.pxToRem(16),
+  fontWeight: 500,
+  padding: 0,
+  '& .MuiBadge-dot': {
+    minWidth: '0.625rem',
+    minHeight: '0.625rem',
+    borderRadius: '50%',
+  },
+  '& .MuiBadge-standard': {
+    padding: 0,
+    margin: 0,
+    minWidth: '0.625rem',
+    height: '0.625rem',
+    borderRadius: '50%',
+  },
+  '& .MuiBadge-colorError': {
+    backgroundColor: theme.palette.error.main,
+  },
+  '& .MuiBadge-colorWarning': {
+    backgroundColor: theme.palette.warning.main,
+  },
+  '& .MuiBadge-colorSuccess': {
+    backgroundColor: theme.palette.success.dark,
+  },
+}));
+
+Badge.displayName = 'NhostBadge';
+
+export default Badge;

dashboard/src/components/ui/v2/Badge/index.ts

@@ -0,0 +1,2 @@
+export * from './Badge';
+export { default as Badge } from './Badge';

dashboard/src/components/ui/v2/Dialog/DialogRoot.tsx

@@ -1,12 +1,12 @@
 import { Backdrop } from '@/components/ui/v2/Backdrop';
 import type { ButtonProps } from '@/components/ui/v2/Button';
+import type { DialogTitleProps } from '@/components/ui/v2/Dialog';
 import { styled } from '@mui/material';
 import type { DialogProps as MaterialDialogProps } from '@mui/material/Dialog';
 import MaterialDialog from '@mui/material/Dialog';
 import type { DialogActionsProps } from '@mui/material/DialogActions';
 import type { DialogContentProps } from '@mui/material/DialogContent';
 import type { DialogContentTextProps } from '@mui/material/DialogContentText';
-import type { DialogTitleProps } from '@mui/material/DialogTitle';
 import Paper from '@mui/material/Paper';
 import type { ReactNode } from 'react';
 

dashboard/src/components/ui/v2/icons/ExclamationFilledIcon/ExclamationFilledIcon.tsx

@@ -0,0 +1,33 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+import type { ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+
+function ExclamationFilledIcon(
+  props: IconProps,
+  ref: ForwardedRef<SVGSVGElement>,
+) {
+  return (
+    <SvgIcon
+      width="7"
+      height="7"
+      viewBox="0 0 7 7"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Exclamation mark"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7 3.5C7 5.433 5.433 7 3.5 7C1.567 7 0 5.433 0 3.5C0 1.567 1.567 0 3.5 0C5.433 0 7 1.567 7 3.5ZM3.96667 5.36667C3.96667 5.6244 3.75773 5.83333 3.5 5.83333C3.24227 5.83333 3.03333 5.6244 3.03333 5.36667C3.03333 5.10893 3.24227 4.9 3.5 4.9C3.75773 4.9 3.96667 5.10893 3.96667 5.36667ZM3.5 1.16667C3.20564 1.16667 2.97296 1.41615 2.99345 1.70979L3.16724 4.20075C3.17943 4.37554 3.32478 4.51111 3.5 4.51111C3.67522 4.51111 3.82057 4.37554 3.83276 4.20075L4.00655 1.70979C4.02704 1.41615 3.79436 1.16667 3.5 1.16667Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+}
+
+ExclamationFilledIcon.displayName = 'NhostExclamationFilledIcon';
+
+export default forwardRef(ExclamationFilledIcon);

dashboard/src/components/ui/v2/icons/ExclamationFilledIcon/index.ts

@@ -0,0 +1 @@
+export { default as ExclamationFilledIcon } from './ExclamationFilledIcon';

dashboard/src/components/ui/v2/icons/ServicesOutlinedIcon/ServicesOutlinedIcon.tsx

@@ -0,0 +1,63 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+
+function ServicesOutlinedIcon(props: IconProps) {
+  return (
+    <SvgIcon
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Services"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.8521 7.06294C15.8143 7.03192 15.485 6.77435 14.7986 6.73709C14.7878 6.7365 14.7769 6.73597 14.7659 6.73549C14.7223 6.7336 14.6772 6.7326 14.6307 6.7326C14.458 6.73338 14.2857 6.74604 14.1147 6.77049C14.0763 6.77598 14.0379 6.78208 13.9996 6.78876C13.9966 6.76748 13.9934 6.74642 13.9899 6.72556C13.9367 6.41145 13.8247 6.14509 13.6926 5.92522C13.5869 5.74941 13.4683 5.60332 13.3565 5.48631C13.1377 5.25722 12.9451 5.13955 12.9269 5.12843L12.7118 5L12.5703 5.21132C12.4532 5.39906 12.3569 5.59952 12.2832 5.80884C12.2455 5.916 12.2137 6.02549 12.188 6.13679C12.1785 6.17826 12.17 6.21957 12.1626 6.26069C12.0784 6.72436 12.1218 7.16514 12.2887 7.56346C12.3311 7.66471 12.3815 7.76323 12.4399 7.85868C12.0678 8.07332 11.471 8.12616 11.3503 8.13083H1.46954C1.21146 8.1312 1.00204 8.34712 1.00063 8.6143C0.989105 9.51047 1.13576 10.4013 1.43337 11.2429C1.77374 12.1671 2.28012 12.8478 2.93893 13.2644C3.67717 13.7325 4.87658 14 6.23616 14C6.85036 14.0019 7.4634 13.9444 8.06725 13.8281C8.90666 13.6685 9.71439 13.3648 10.457 12.9294C11.0689 12.5625 11.6196 12.0958 12.0879 11.5472C12.8644 10.6371 13.3296 9.62426 13.6755 8.72167C13.6783 8.7144 13.6811 8.70714 13.6839 8.69989H13.8221C14.6792 8.69989 15.2062 8.3448 15.4969 8.04724C15.69 7.85746 15.8408 7.62628 15.9386 7.36986L16 7.18397L15.8521 7.06294ZM11.9029 9.4592C11.6843 9.49512 11.4987 9.51062 11.3978 9.51453L11.374 9.51544H2.35702C2.41226 9.93468 2.51073 10.3477 2.65136 10.7474C2.90985 11.445 3.24967 11.8492 3.60646 12.0748L3.60778 12.0757C4.05853 12.3615 4.98755 12.6153 6.23616 12.6153H6.24016C6.77497 12.6171 7.30873 12.567 7.83441 12.4657L7.83733 12.4652C8.53499 12.3325 9.20535 12.0806 9.82092 11.7205C10.31 11.4265 10.7488 11.0538 11.1211 10.6177M11.9029 9.4592C11.6864 9.86254 11.4322 10.2531 11.1211 10.6177L11.9029 9.4592Z"
+        fill="currentColor"
+      />
+      <path
+        d="M2.38514 7.54505H3.7092C3.77306 7.54505 3.8248 7.49328 3.8248 7.42944V6.25005C3.82516 6.18619 3.77369 6.13415 3.70985 6.13379C3.70964 6.13379 3.70941 6.13379 3.7092 6.13379H2.38514C2.32128 6.13379 2.26953 6.18556 2.26953 6.24939V6.25005V7.42942C2.26953 7.49328 2.32128 7.54505 2.38514 7.54505Z"
+        fill="currentColor"
+      />
+      <path
+        d="M4.21003 7.54505H5.53409C5.59794 7.54505 5.64969 7.49328 5.64969 7.42944V6.25005C5.65005 6.18619 5.59857 6.13415 5.53472 6.13379C5.53451 6.13379 5.53427 6.13379 5.53407 6.13379H4.21001C4.14579 6.13379 4.09375 6.18583 4.09375 6.25005V7.42942C4.09413 7.49339 4.14606 7.54505 4.21003 7.54505Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.06192 7.54505H7.38597C7.44983 7.54505 7.50157 7.49328 7.50157 7.42944V6.25005C7.50193 6.18619 7.45046 6.13415 7.3866 6.13379C7.38639 6.13379 7.38616 6.13379 7.38595 6.13379H6.06189C5.99804 6.13379 5.94629 6.18556 5.94629 6.24939V6.25005V7.42942C5.94631 7.49328 5.99808 7.54505 6.06192 7.54505Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.89295 7.54505H9.21701C9.28097 7.54505 9.33291 7.49341 9.33326 7.42944V6.25005C9.33326 6.18583 9.28122 6.13379 9.21701 6.13379H7.89295C7.82909 6.13379 7.77734 6.18556 7.77734 6.24939V6.25005V7.42942C7.77734 7.49328 7.82911 7.54505 7.89295 7.54505Z"
+        fill="currentColor"
+      />
+      <path
+        d="M4.21001 5.84874H5.53406C5.59801 5.84839 5.64967 5.79643 5.64967 5.73249V4.55311C5.64967 4.48925 5.5979 4.4375 5.53406 4.4375H4.21001C4.14606 4.4375 4.09411 4.48914 4.09375 4.55311V5.73249C4.09411 5.79656 4.14594 5.84839 4.21001 5.84874Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.06189 5.84874H7.38595C7.4499 5.84839 7.50156 5.79643 7.50156 5.73249V4.55311C7.50156 4.48925 7.44979 4.4375 7.38595 4.4375H6.06189C5.99804 4.4375 5.94629 4.48927 5.94629 4.55311V5.73249C5.94629 5.79643 5.99795 5.84839 6.06189 5.84874Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.89295 5.84874H9.21701C9.28108 5.84839 9.33291 5.79656 9.33326 5.73249V4.55311C9.33291 4.48914 9.28097 4.4375 9.21701 4.4375H7.89295C7.82909 4.4375 7.77734 4.48927 7.77734 4.55311V5.73249C7.77734 5.79643 7.82901 5.84839 7.89295 5.84874Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.89295 4.1515H9.21701C9.28097 4.1515 9.33291 4.09983 9.33326 4.03589V2.85584C9.33291 2.79188 9.28097 2.74023 9.21701 2.74023H7.89295C7.82909 2.74023 7.77734 2.79198 7.77734 2.85584V4.03587C7.77734 4.09973 7.82911 4.1515 7.89295 4.1515Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.73963 7.54505H11.0637C11.1277 7.54505 11.1796 7.49341 11.1799 7.42944V6.25005C11.1799 6.18583 11.1279 6.13379 11.0637 6.13379H9.73963C9.67579 6.13379 9.62402 6.18556 9.62402 6.24939V6.25005V7.42942C9.62402 7.49328 9.67579 7.54505 9.73963 7.54505Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+}
+
+ServicesOutlinedIcon.displayName = 'NhostServicesIcon';
+
+export default ServicesOutlinedIcon;

dashboard/src/components/ui/v2/icons/ServicesOutlinedIcon/index.ts

@@ -0,0 +1 @@
+export { default as ServicesOutlinedIcon } from './ServicesOutlinedIcon';

dashboard/src/components/ui/v2/icons/SlidersIcon/SlidersIcon.tsx

@@ -0,0 +1,34 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+
+function SlidersIcon(props: IconProps) {
+  return (
+    <SvgIcon
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Sliders"
+      {...props}
+    >
+      <line x1="21" x2="14" y1="4" y2="4" />
+      <line x1="10" x2="3" y1="4" y2="4" />
+      <line x1="21" x2="12" y1="12" y2="12" />
+      <line x1="8" x2="3" y1="12" y2="12" />
+      <line x1="21" x2="16" y1="20" y2="20" />
+      <line x1="12" x2="3" y1="20" y2="20" />
+      <line x1="14" x2="14" y1="2" y2="6" />
+      <line x1="8" x2="8" y1="10" y2="14" />
+      <line x1="16" x2="16" y1="18" y2="22" />
+    </SvgIcon>
+  );
+}
+
+SlidersIcon.displayName = 'NhostSlidersIcon';
+
+export default SlidersIcon;

dashboard/src/components/ui/v2/icons/SlidersIcon/index.ts

@@ -0,0 +1 @@
+export { default as SlidersIcon } from './SlidersIcon';

dashboard/src/features/ai/settings/components/AISettings.tsx

@@ -32,8 +32,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';
 import { DisableAIServiceConfirmationDialog } from './DisableAIServiceConfirmationDialog';
-
-const MIN_POSTGRES_VERSION_SUPPORTING_AI = '14.6-20231018-1';
+import { isPostgresVersionValidForAI } from '@/features/ai/settings/utils/isPostgresVersionValidForAI';
 
 const validationSchema = Yup.object({
   version: Yup.object({
@@ -165,7 +164,7 @@ export default function AISettings() {
   ]);
 
   const toggleAIService = async (enabled: boolean) => {
-    if (postgresVersion < MIN_POSTGRES_VERSION_SUPPORTING_AI) {
+    if (!isPostgresVersionValidForAI(postgresVersion)) {
       toast.error(
         'In order to enable the AI service you need to update your database version to 14.6-20231018-1 or newer.',
         {
@@ -495,3 +494,4 @@ export default function AISettings() {
     </Box>
   );
 }
+

dashboard/src/features/ai/settings/utils/isPostgresVersionValidForAI/index.ts

@@ -0,0 +1 @@
+export { default as isPostgresVersionValidForAI } from './isPostgresVersionValidForAI';

dashboard/src/features/ai/settings/utils/isPostgresVersionValidForAI/isPostgresVersionValidForAI.test.ts

@@ -0,0 +1,22 @@
+import { test, vi } from 'vitest';
+
+import isPostgresVersionValidForAI from './isPostgresVersionValidForAI';
+
+beforeEach(() => {
+  vi.resetModules();
+});
+
+test('greater than minimum version, minor version with two digits, should be valid', () => {
+  const postgresVersion = '14.11-20240515-1';
+  expect(isPostgresVersionValidForAI(postgresVersion)).toBe(true);
+});
+
+test('less than minimum version, should be invalid', () => {
+  const postgresVersion = '14.6-20221110-1';
+  expect(isPostgresVersionValidForAI(postgresVersion)).toBe(false);
+});
+
+test('equal to minimum version, should be valid', () => {
+  const postgresVersion = '14.6-20231018-1';
+  expect(isPostgresVersionValidForAI(postgresVersion)).toBe(true);
+});

dashboard/src/features/ai/settings/utils/isPostgresVersionValidForAI/isPostgresVersionValidForAI.ts

@@ -0,0 +1,18 @@
+/**
+ * Check if the given postgres version is valid for enabling AI in the project
+ *
+ * @param postgresVersion - Postgres version used in the project.
+ * @returns Whether is valid for enabling AI.
+ */
+export default function isPostgresVersionValidForAI(
+  postgresVersion: string,
+): boolean {
+  const MIN_POSTGRES_VERSION_SUPPORTING_AI = '14.6-20231018-1';
+
+  if (/^14\.6-/.test(postgresVersion)) {
+    return postgresVersion >= MIN_POSTGRES_VERSION_SUPPORTING_AI;
+  }
+
+  // Note: No need to account for versions less than 14.6
+  return true;
+}

dashboard/src/features/projects/common/components/ApplicationLive/ApplicationLive.tsx

@@ -7,6 +7,7 @@ import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import { OverviewDeployments } from '@/features/projects/overview/components/OverviewDeployments';
 import { OverviewDocumentation } from '@/features/projects/overview/components/OverviewDocumentation';
 import { OverviewMetrics } from '@/features/projects/overview/components/OverviewMetrics';
+import { OverviewProjectHealth } from '@/features/projects/overview/components/OverviewProjectHealth';
 import { OverviewProjectInfo } from '@/features/projects/overview/components/OverviewProjectInfo';
 import { OverviewRepository } from '@/features/projects/overview/components/OverviewRepository';
 import { OverviewTopBar } from '@/features/projects/overview/components/OverviewTopBar';
@@ -92,6 +93,8 @@ export default function ApplicationLive({
         </div>
 
         <div className="grid grid-flow-row content-start gap-8 lg:col-span-1 lg:gap-12">
+          <OverviewProjectHealth />
+          <Divider />
           <OverviewProjectInfo />
           <Divider />
           <OverviewRepository />

dashboard/src/features/projects/common/components/settings/TOMLEditor/TOMLEditor.tsx

@@ -0,0 +1,191 @@
+import { ApplyLocalSettingsDialog } from '@/components/common/ApplyLocalSettingsDialog';
+import { useDialog } from '@/components/common/DialogProvider';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Text } from '@/components/ui/v2/Text';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
+import {
+  useGetConfigRawJsonQuery,
+  useReplaceConfigRawJsonMutation,
+} from '@/utils/__generated__/graphql';
+import { StreamLanguage } from '@codemirror/language';
+import { toml } from '@codemirror/legacy-modes/mode/toml';
+import * as TOML from '@iarna/toml';
+import { useTheme } from '@mui/material';
+import { bbedit } from '@uiw/codemirror-theme-bbedit';
+import { githubDark } from '@uiw/codemirror-theme-github';
+import CodeMirror from '@uiw/react-codemirror';
+import { useCallback, useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
+
+export default function TOMLEditor() {
+  const theme = useTheme();
+  const isPlatform = useIsPlatform();
+
+  const [tomlCode, setTOMLCode] = useState('');
+  const [previousTOMLCode, setPreviousTOMLCode] = useState(''); // used to revert changes
+  const [isDirty, setIsDirty] = useState(false);
+  const [isSaving, setIsSaving] = useState(false); // used to show loading spinner on save
+
+  const { openDialog } = useDialog();
+
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const localMimirClient = useLocalMimirClient();
+
+  // fetch the initial TOML code from the server
+  const { data, loading } = useGetConfigRawJsonQuery({
+    variables: {
+      appID: currentProject?.id,
+    },
+    skip: !currentProject,
+  });
+
+  const [saveConfigMutation] = useReplaceConfigRawJsonMutation({
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const removeTOMLIndentation = (tomlStr: string) => {
+    const trimmedLines = tomlStr.split('\n').map((line) => line.trimStart());
+    return trimmedLines.join('\n');
+  };
+
+  useEffect(() => {
+    // Load TOML code from the server on initial load
+    if (!loading && data) {
+      const jsonData = JSON.parse(data?.configRawJSON);
+      const tomlStr = TOML.stringify(jsonData);
+      const unindentedTOMLConfig = removeTOMLIndentation(tomlStr);
+      setTOMLCode(unindentedTOMLConfig);
+      setPreviousTOMLCode(unindentedTOMLConfig);
+    }
+  }, [loading, data]);
+
+  const onChange = useCallback((value: string) => {
+    setTOMLCode(value);
+    setIsDirty(true);
+  }, []);
+
+  const handleRevert = () => {
+    setTOMLCode(previousTOMLCode);
+    setIsDirty(false);
+  };
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    let jsonEditedConfig;
+    try {
+      jsonEditedConfig = TOML.parse(tomlCode);
+    } catch (error) {
+      const toastStyle = getToastStyleProps();
+      const { line, col } = error;
+      let message = `An error occurred while parsing the TOML file. Please check the syntax.`;
+      if (line !== undefined && col !== undefined) {
+        message = `An error occurred while parsing the TOML file. Please check the syntax at line ${line}, column ${col}.`;
+      }
+      toast.error(message, {
+        style: toastStyle.style,
+        ...toastStyle.error,
+      });
+      setIsSaving(false);
+      return;
+    }
+    const rawJSONString = JSON.stringify(jsonEditedConfig);
+
+    await execPromiseWithErrorToast(
+      async () => {
+        const {
+          data: { replaceConfigRawJSON: updatedConfig },
+        } = await saveConfigMutation({
+          variables: {
+            appID: currentProject?.id,
+            rawJSON: rawJSONString,
+          },
+        });
+
+        if (updatedConfig) {
+          const jsonUpdatedConfig = JSON.parse(updatedConfig);
+          const updatedTOMLConfig = TOML.stringify(jsonUpdatedConfig);
+          const unindentedTOMLConfig = removeTOMLIndentation(updatedTOMLConfig);
+          setTOMLCode(unindentedTOMLConfig);
+          setPreviousTOMLCode(unindentedTOMLConfig);
+        }
+
+        if (!isPlatform) {
+          openDialog({
+            title: 'Apply your changes',
+            component: <ApplyLocalSettingsDialog />,
+            props: {
+              PaperProps: {
+                className: 'max-w-2xl',
+              },
+            },
+          });
+        }
+        setIsDirty(false);
+        setIsSaving(false);
+      },
+      {
+        loadingMessage: 'Saving configuration...',
+        successMessage: 'Configuration has been saved successfully.',
+        errorMessage:
+          'An error occurred while saving configuration. Please try again.',
+        onError: () => {
+          setIsSaving(false);
+        },
+      },
+    );
+  };
+
+  return (
+    <Box className="flex h-full flex-col">
+      <Box className="flex w-full flex-col space-y-2 border-b p-4">
+        <Text className="font-semibold">Configuration Editor</Text>
+      </Box>
+      <Box className="h-full overflow-auto">
+        {loading ? (
+          <Box
+            className="h-full w-full animate-pulse"
+            sx={{ backgroundColor: 'grey.200' }}
+          />
+        ) : (
+          <CodeMirror
+            value={tomlCode}
+            height="100%"
+            width="100%"
+            theme={theme.palette.mode === 'light' ? bbedit : githubDark}
+            basicSetup={{
+              searchKeymap: false,
+            }}
+            extensions={[StreamLanguage.define(toml)]}
+            onChange={onChange}
+          />
+        )}
+      </Box>
+      <Box className="grid w-full grid-flow-col justify-end gap-3 place-self-end border-t-1 px-4 py-3 md:justify-between">
+        <Button
+          variant="outlined"
+          disabled={loading || !isDirty}
+          onClick={handleRevert}
+          color="secondary"
+        >
+          Revert changes
+        </Button>
+
+        <Button
+          type="submit"
+          disabled={loading || !isDirty}
+          loading={isSaving}
+          className="justify-self-end"
+          onClick={handleSave}
+        >
+          Save
+        </Button>
+      </Box>
+    </Box>
+  );
+}

dashboard/src/features/projects/common/components/settings/TOMLEditor/index.ts

@@ -0,0 +1 @@
+export { default as TOMLEditor } from './TOMLEditor';

dashboard/src/features/projects/common/hooks/useCurrentWorkspaceAndProject/useCurrentWorkspaceAndProject.ts

@@ -108,7 +108,7 @@ export default function useCurrentWorkspaceAndProject(): UseCurrentWorkspaceAndP
         id: null,
         countryCode: null,
         city: null,
-        awsName: null,
+        name: null,
         domain: null,
       },
       createdAt: new Date().toISOString(),

dashboard/src/features/projects/common/utils/generateAppServiceUrl/generateAppServiceUrl.test.ts

@@ -31,7 +31,7 @@ afterEach(() => {
 
 const region: ProjectFragment['region'] = {
   id: '1',
-  awsName: 'eu-west-1',
+  name: 'eu-west-1',
   domain: 'nhost.run',
   city: 'Dublin',
   countryCode: 'IE',

dashboard/src/features/projects/common/utils/generateAppServiceUrl/generateAppServiceUrl.ts

@@ -89,7 +89,7 @@ export default function generateAppServiceUrl(
   const constructedDomain = [
     subdomain,
     service,
-    region?.awsName,
+    region?.name,
     region?.domain || 'nhost.run',
   ]
     .filter(Boolean)

dashboard/src/features/projects/custom-domains/settings/components/AuthDomain/AuthDomain.tsx

@@ -165,7 +165,7 @@ export default function AuthDomain() {
             <VerifyDomain
               recordType="CNAME"
               hostname={auth_fqdn}
-              value={`lb.${currentProject.region.awsName}.${currentProject.region.domain}.`}
+              value={`lb.${currentProject.region.name}.${currentProject.region.domain}.`}
               onHostNameVerified={() => setIsVerified(true)}
             />
           </div>

dashboard/src/features/projects/custom-domains/settings/components/HasuraDomain/HasuraDomain.tsx

@@ -167,7 +167,7 @@ export default function HasuraDomain() {
             <VerifyDomain
               recordType="CNAME"
               hostname={hasura_fqdn}
-              value={`lb.${currentProject.region.awsName}.${currentProject.region.domain}.`}
+              value={`lb.${currentProject.region.name}.${currentProject.region.domain}.`}
               onHostNameVerified={() => setIsVerified(true)}
             />
           </div>

dashboard/src/features/projects/custom-domains/settings/components/RunServicePortDomain/RunServicePortDomain.tsx

@@ -162,7 +162,7 @@ export default function RunServicePortDomain({
           <VerifyDomain
             recordType="CNAME"
             hostname={runServicePortFQDN}
-            value={`lb.${currentProject.region.awsName}.${currentProject.region.domain}.`}
+            value={`lb.${currentProject.region.name}.${currentProject.region.domain}.`}
             onHostNameVerified={() => setIsVerified(true)}
           />
         </div>

dashboard/src/features/projects/custom-domains/settings/components/ServerlessFunctionsDomain/ServerlessFunctionsDomain.tsx

@@ -169,7 +169,7 @@ export default function ServerlessFunctionsDomain() {
             <VerifyDomain
               recordType="CNAME"
               hostname={functions_fqdn}
-              value={`lb.${currentProject.region.awsName}.${currentProject.region.domain}.`}
+              value={`lb.${currentProject.region.name}.${currentProject.region.domain}.`}
               onHostNameVerified={() => setIsVerified(true)}
             />
           </div>

dashboard/src/features/projects/environmentVariables/settings/components/SystemEnvironmentVariableSettings/SystemEnvironmentVariableSettings.tsx

@@ -101,7 +101,7 @@ export default function SystemEnvironmentVariableSettings() {
 
   const systemEnvironmentVariables = [
     { key: 'NHOST_SUBDOMAIN', value: currentProject.subdomain },
-    { key: 'NHOST_REGION', value: currentProject.region.awsName },
+    { key: 'NHOST_REGION', value: currentProject.region.name },
     {
       key: 'NHOST_HASURA_URL',
       value:

dashboard/src/features/projects/overview/components/OverviewProjectHealth/OverviewProjectHealth.tsx

@@ -0,0 +1,341 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { AIIcon } from '@/components/ui/v2/icons/AIIcon';
+import { DatabaseIcon } from '@/components/ui/v2/icons/DatabaseIcon';
+import { HasuraIcon } from '@/components/ui/v2/icons/HasuraIcon';
+import { ServicesOutlinedIcon } from '@/components/ui/v2/icons/ServicesOutlinedIcon';
+import { StorageIcon } from '@/components/ui/v2/icons/StorageIcon';
+import { UserIcon } from '@/components/ui/v2/icons/UserIcon';
+import { Text } from '@/components/ui/v2/Text';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import { OverviewProjectHealthModal } from '@/features/projects/overview/components/OverviewProjectHealthModal';
+import { ProjectHealthCard } from '@/features/projects/overview/components/ProjectHealthCard';
+import { ServiceVersionTooltip } from '@/features/projects/overview/components/ServiceVersionTooltip';
+import {
+  baseServices,
+  findHighestImportanceState,
+  serviceStateToThemeColor,
+  type ServiceHealthInfo,
+} from '@/features/projects/overview/health';
+import {
+  ServiceState,
+  useGetConfiguredVersionsQuery,
+  useGetProjectServicesHealthQuery,
+  useGetRecommendedSoftwareVersionsQuery,
+} from '@/generated/graphql';
+
+interface RunStatusTooltipProps {
+  servicesStatusInfo?: Array<ServiceHealthInfo>;
+  openHealthModal?: (
+    defaultExpanded?: keyof typeof baseServices | 'run',
+  ) => void;
+}
+
+function RunStatusTooltip({
+  servicesStatusInfo,
+  openHealthModal,
+}: RunStatusTooltipProps) {
+  return (
+    <div className="flex w-full flex-col gap-3 px-2 py-3">
+      <ol className="m-0 flex flex-col gap-3">
+        {servicesStatusInfo.map((service) => (
+          <li
+            key={service.name}
+            className="flex flex-row items-center gap-4 text-ellipsis text-nowrap leading-5"
+          >
+            <Box
+              sx={{
+                backgroundColor: serviceStateToThemeColor.get(service.state),
+              }}
+              className={`h-3 w-3 flex-shrink-0 rounded-full ${
+                service.state === ServiceState.Updating ? 'animate-pulse' : ''
+              }`}
+            />
+            <Text
+              sx={{
+                color: (theme) =>
+                  theme.palette.mode === 'dark'
+                    ? 'text.primary'
+                    : 'text.primary',
+              }}
+              className="font-semibold"
+            >
+              {service.name}
+            </Text>
+          </li>
+        ))}
+      </ol>
+      <Button variant="outlined" onClick={() => openHealthModal('run')}>
+        View state
+      </Button>
+    </div>
+  );
+}
+
+export default function OverviewProjectHealth() {
+  const isPlatform = useIsPlatform();
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const { data: recommendedVersionsData, loading: loadingRecommendedVersions } =
+    useGetRecommendedSoftwareVersionsQuery({
+      skip: !isPlatform || !currentProject,
+    });
+
+  const { openDialog, closeDialog } = useDialog();
+
+  const { data: configuredVersionsData, loading: loadingConfiguredVersions } =
+    useGetConfiguredVersionsQuery({
+      variables: {
+        appId: currentProject?.id,
+      },
+      skip: !isPlatform || !currentProject,
+    });
+
+  const {
+    data: projectServicesHealthData,
+    loading: loadingProjectServicesHealth,
+  } = useGetProjectServicesHealthQuery({
+    variables: {
+      appId: currentProject?.id,
+    },
+    skip: !isPlatform || !currentProject,
+  });
+
+  if (
+    loadingRecommendedVersions ||
+    loadingConfiguredVersions ||
+    loadingProjectServicesHealth
+  ) {
+    return (
+      <div className="grid grid-flow-row content-start gap-6">
+        <Text variant="h3">Project Health</Text>
+        <div className="flex flex-row flex-wrap items-center justify-start gap-2 lg:gap-2">
+          <ProjectHealthCard
+            isLoading
+            icon={<UserIcon className="m-1 h-6 w-6" />}
+          />
+          <ProjectHealthCard
+            isLoading
+            icon={<DatabaseIcon className="m-1 h-6 w-6" />}
+          />
+          <ProjectHealthCard
+            isLoading
+            icon={<StorageIcon className="m-1 h-6 w-6" />}
+          />
+          <ProjectHealthCard
+            isLoading
+            icon={<HasuraIcon className="m-1 h-6 w-6" />}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  const isAIServiceEnabled = !!configuredVersionsData?.config?.ai;
+
+  const getRecommendedVersions = (softwareName: string): string[] =>
+    recommendedVersionsData?.softwareVersions.reduce(
+      (recommendedVersions, service) => {
+        if (service.software === softwareName) {
+          recommendedVersions.push(service.version);
+        }
+        return recommendedVersions;
+      },
+      [],
+    ) ?? [];
+
+  const authRecommendedVersions = getRecommendedVersions(
+    baseServices['hasura-auth'].softwareVersionsName,
+  );
+  const hasuraRecommendedVersions = getRecommendedVersions(
+    baseServices.hasura.softwareVersionsName,
+  );
+  const postgresRecommendedVersions = getRecommendedVersions(
+    baseServices.postgres.softwareVersionsName,
+  );
+  const storageRecommendedVersions = getRecommendedVersions(
+    baseServices['hasura-storage'].softwareVersionsName,
+  );
+  const aiRecommendedVersions = getRecommendedVersions(
+    baseServices.ai.softwareVersionsName,
+  );
+
+  // Check if configured version can't be found in recommended versions
+  const isAuthVersionMismatch = !authRecommendedVersions.find(
+    (version) => configuredVersionsData?.config?.auth?.version === version,
+  );
+
+  const isHasuraVersionMismatch = !hasuraRecommendedVersions.find(
+    (version) => configuredVersionsData?.config?.hasura?.version === version,
+  );
+
+  const isPostgresVersionMismatch = !postgresRecommendedVersions.find(
+    (version) => configuredVersionsData?.config?.postgres?.version === version,
+  );
+
+  const isStorageVersionMismatch = !storageRecommendedVersions.find(
+    (version) => configuredVersionsData?.config?.storage?.version === version,
+  );
+
+  const isAIVersionMismatch = !aiRecommendedVersions.find(
+    (version) => configuredVersionsData?.config?.ai?.version === version,
+  );
+
+  const serviceMap: { [key: string]: ServiceHealthInfo | undefined } = {};
+  projectServicesHealthData?.getProjectStatus?.services.forEach((service) => {
+    serviceMap[service.name] = service;
+  });
+  const {
+    'hasura-auth': authStatus,
+    'hasura-storage': storageStatus,
+    postgres: postgresStatus,
+    hasura: hasuraStatus,
+    ai: aiStatus,
+    ...otherServicesStatus
+  } = serviceMap;
+
+  const openHealthModal = async (
+    defaultExpanded: keyof typeof baseServices | 'run',
+  ) => {
+    openDialog({
+      component: (
+        <OverviewProjectHealthModal
+          servicesHealth={projectServicesHealthData}
+          defaultExpanded={defaultExpanded}
+        />
+      ),
+      props: {
+        PaperProps: { className: 'p-0 max-w-2xl w-full' },
+        titleProps: {
+          onClose: closeDialog,
+        },
+      },
+      title: 'Service State',
+    });
+  };
+
+  const authTooltipElem = (
+    <ServiceVersionTooltip
+      serviceName={baseServices['hasura-auth'].displayName}
+      serviceKey="hasura-auth"
+      usedVersion={configuredVersionsData?.config?.auth?.version ?? ''}
+      recommendedVersionMismatch={isAuthVersionMismatch}
+      recommendedVersions={authRecommendedVersions}
+      openHealthModal={openHealthModal}
+      state={authStatus?.state}
+    />
+  );
+
+  const hasuraTooltipElem = (
+    <ServiceVersionTooltip
+      serviceName={baseServices.hasura.displayName}
+      serviceKey="hasura"
+      usedVersion={configuredVersionsData?.config?.hasura?.version ?? ''}
+      recommendedVersionMismatch={isHasuraVersionMismatch}
+      recommendedVersions={hasuraRecommendedVersions}
+      openHealthModal={openHealthModal}
+      state={hasuraStatus?.state}
+    />
+  );
+
+  const postgresTooltipElem = (
+    <ServiceVersionTooltip
+      serviceName={baseServices.postgres.displayName}
+      serviceKey="postgres"
+      usedVersion={configuredVersionsData?.config?.postgres?.version ?? ''}
+      recommendedVersionMismatch={isPostgresVersionMismatch}
+      recommendedVersions={postgresRecommendedVersions}
+      openHealthModal={openHealthModal}
+      state={postgresStatus?.state}
+    />
+  );
+
+  const storageTooltipElem = (
+    <ServiceVersionTooltip
+      serviceName={baseServices['hasura-storage'].displayName}
+      serviceKey="hasura-storage"
+      usedVersion={configuredVersionsData?.config?.storage?.version ?? ''}
+      recommendedVersionMismatch={isStorageVersionMismatch}
+      recommendedVersions={storageRecommendedVersions}
+      openHealthModal={openHealthModal}
+      state={storageStatus?.state}
+    />
+  );
+
+  const aiTooltipElem = (
+    <ServiceVersionTooltip
+      serviceName={baseServices.ai.displayName}
+      serviceKey="ai"
+      usedVersion={configuredVersionsData?.config?.ai?.version ?? ''}
+      recommendedVersionMismatch={isAIVersionMismatch}
+      recommendedVersions={aiRecommendedVersions}
+      openHealthModal={openHealthModal}
+      state={aiStatus?.state}
+    />
+  );
+
+  const runServices = Object.values(otherServicesStatus).filter((service) =>
+    service.name.startsWith('run-'),
+  );
+
+  const runServicesStates = runServices.map((service) => service.state);
+
+  const runServicesState = findHighestImportanceState(runServicesStates);
+
+  return (
+    <div className="grid grid-flow-row content-start gap-6">
+      <Text variant="h3">Project Health</Text>
+
+      {currentProject && (
+        <div className="flex flex-row flex-wrap items-center justify-start gap-2 lg:gap-2">
+          <ProjectHealthCard
+            icon={<UserIcon className="m-1 h-6 w-6" />}
+            tooltip={authTooltipElem}
+            isVersionMismatch={isAuthVersionMismatch}
+            state={authStatus?.state}
+          />
+          <ProjectHealthCard
+            icon={<DatabaseIcon className="m-1 h-6 w-6" />}
+            tooltip={postgresTooltipElem}
+            isVersionMismatch={isPostgresVersionMismatch}
+            state={postgresStatus?.state}
+          />
+          <ProjectHealthCard
+            icon={<StorageIcon className="m-1 h-6 w-6" />}
+            tooltip={storageTooltipElem}
+            isVersionMismatch={isStorageVersionMismatch}
+            state={storageStatus?.state}
+          />
+          <ProjectHealthCard
+            icon={<HasuraIcon className="m-1 h-6 w-6" />}
+            tooltip={hasuraTooltipElem}
+            isVersionMismatch={isHasuraVersionMismatch}
+            state={hasuraStatus?.state}
+          />
+          {isAIServiceEnabled && (
+            <ProjectHealthCard
+              icon={<AIIcon className="m-1 h-6 w-6" />}
+              tooltip={aiTooltipElem}
+              isVersionMismatch={isAIVersionMismatch}
+              state={aiStatus?.state}
+            />
+          )}
+          {Object.values(runServices).length > 0 && (
+            <ProjectHealthCard
+              icon={<ServicesOutlinedIcon className="m-1 h-6 w-6" />}
+              tooltip={
+                <RunStatusTooltip
+                  servicesStatusInfo={Object.values(runServices)}
+                  openHealthModal={openHealthModal}
+                />
+              }
+              state={runServicesState}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

dashboard/src/features/projects/overview/components/OverviewProjectHealth/index.ts

@@ -0,0 +1 @@
+export { default as OverviewProjectHealth } from './OverviewProjectHealth';

dashboard/src/features/projects/overview/components/OverviewProjectHealthModal/OverviewProjectHealthModal.tsx

@@ -0,0 +1,301 @@
+import { CodeBlock } from '@/components/presentational/CodeBlock';
+import { Accordion } from '@/components/ui/v2/Accordion';
+import { Box } from '@/components/ui/v2/Box';
+import { Divider } from '@/components/ui/v2/Divider';
+import { AIIcon } from '@/components/ui/v2/icons/AIIcon';
+import { CheckIcon } from '@/components/ui/v2/icons/CheckIcon';
+import { ChevronDownIcon } from '@/components/ui/v2/icons/ChevronDownIcon';
+import { DatabaseIcon } from '@/components/ui/v2/icons/DatabaseIcon';
+import { HasuraIcon } from '@/components/ui/v2/icons/HasuraIcon';
+import { ServicesOutlinedIcon } from '@/components/ui/v2/icons/ServicesOutlinedIcon';
+import { StorageIcon } from '@/components/ui/v2/icons/StorageIcon';
+import { UserIcon } from '@/components/ui/v2/icons/UserIcon';
+import { Text } from '@/components/ui/v2/Text';
+import {
+  findHighestImportanceState,
+  serviceStateToThemeColor,
+  type baseServices,
+  type ServiceHealthInfo,
+} from '@/features/projects/overview/health';
+import { removeTypename } from '@/utils/helpers';
+import {
+  ServiceState,
+  type GetProjectServicesHealthQuery,
+} from '@/utils/__generated__/graphql';
+import Image from 'next/image';
+import { type ReactElement } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+interface ServiceAccordionProps {
+  serviceName: string;
+  serviceHealth: ServiceHealthInfo;
+  replicas: ServiceHealthInfo['replicas'];
+  serviceState: ServiceState;
+  /**
+   * Icon to display on the accordion.
+   */
+  icon?: string | ReactElement;
+  /**
+   * Label of the icon.
+   */
+  alt?: string;
+  iconIsComponent?: boolean;
+  defaultExpanded?: boolean;
+}
+
+function ServiceAccordion({
+  serviceName,
+  serviceHealth,
+  replicas,
+  serviceState,
+  icon,
+  iconIsComponent = true,
+  alt,
+  defaultExpanded = false,
+}: ServiceAccordionProps) {
+  const replicasLabel = replicas.length === 1 ? 'replica' : 'replicas';
+
+  const serviceInfo = removeTypename(serviceHealth);
+
+  return (
+    <Accordion.Root defaultExpanded={defaultExpanded}>
+      <Accordion.Summary
+        expandIcon={
+          <ChevronDownIcon
+            sx={{
+              color: 'text.primary',
+            }}
+          />
+        }
+        aria-controls="panel1-content"
+        id="panel1-header"
+        className="px-6"
+      >
+        <div className="flex flex-row justify-between gap-2 py-2">
+          <div className="flex items-center gap-3">
+            {iconIsComponent
+              ? icon
+              : typeof icon === 'string' && <Image src={icon} alt={alt} />}
+            <Text
+              sx={{ color: 'text.primary' }}
+              variant="h4"
+              className="font-semibold"
+            >
+              {serviceName}{' '}
+              <Text
+                sx={{
+                  color: 'text.secondary',
+                }}
+                component="span"
+                className="font-semibold"
+              >
+                ({replicas.length} {replicasLabel})
+              </Text>
+            </Text>
+            {serviceState === ServiceState.Running ? (
+              <Box
+                sx={{
+                  backgroundColor: serviceStateToThemeColor.get(serviceState),
+                }}
+                className="flex h-2 w-2 items-center justify-center rounded-full"
+              >
+                <CheckIcon className="h-3/4 w-3/4 stroke-2 text-white" />
+              </Box>
+            ) : (
+              <Box
+                sx={{
+                  backgroundColor: serviceStateToThemeColor.get(serviceState),
+                }}
+                className="h-2 w-2 rounded-full"
+              />
+            )}
+          </div>
+        </div>
+      </Accordion.Summary>
+      <Accordion.Details>
+        <CodeBlock copyToClipboardToastTitle={`${serviceName} status`}>
+          {JSON.stringify(serviceInfo, null, 2)}
+        </CodeBlock>
+      </Accordion.Details>
+    </Accordion.Root>
+  );
+}
+
+interface RunServicesAccordionProps {
+  servicesHealth: Array<ServiceHealthInfo>;
+  serviceStates: ServiceState[];
+  /**
+   * Icon to display on the accordion.
+   */
+  icon?: string | ReactElement;
+  /**
+   * Label of the icon.
+   */
+  alt?: string;
+  iconIsComponent?: boolean;
+  defaultExpanded?: boolean;
+}
+
+function RunServicesAccordion({
+  serviceStates,
+  servicesHealth,
+  icon,
+  iconIsComponent = true,
+  defaultExpanded = false,
+  alt,
+}: RunServicesAccordionProps) {
+  const globalState = findHighestImportanceState(serviceStates);
+
+  const serviceInfo = removeTypename(servicesHealth);
+
+  return (
+    <Accordion.Root defaultExpanded={defaultExpanded}>
+      <Accordion.Summary
+        expandIcon={
+          <ChevronDownIcon
+            sx={{
+              color: 'text.primary',
+            }}
+          />
+        }
+        aria-controls="panel1-content"
+        id="panel1-header"
+        className="px-6"
+      >
+        <div className="flex flex-row justify-between gap-2 py-2">
+          <div className="flex items-center gap-3">
+            {iconIsComponent
+              ? icon
+              : typeof icon === 'string' && <Image src={icon} alt={alt} />}
+            <Text
+              sx={{ color: 'text.primary' }}
+              variant="h4"
+              className="font-semibold"
+            >
+              Run
+            </Text>
+            <Box
+              sx={{
+                backgroundColor: serviceStateToThemeColor.get(globalState),
+              }}
+              className="h-2 w-2 rounded-full"
+            />
+          </div>
+        </div>
+      </Accordion.Summary>
+      <Accordion.Details>
+        <CodeBlock copyToClipboardToastTitle="Run services status">
+          {JSON.stringify(serviceInfo, null, 2)}
+        </CodeBlock>
+      </Accordion.Details>
+    </Accordion.Root>
+  );
+}
+
+export interface OverviewProjectHealthModalProps {
+  servicesHealth?: GetProjectServicesHealthQuery;
+  defaultExpanded?: keyof typeof baseServices | 'run';
+}
+
+export default function OverviewProjectHealthModal({
+  servicesHealth,
+  defaultExpanded,
+}: OverviewProjectHealthModalProps) {
+  const serviceMap: { [key: string]: ServiceHealthInfo | undefined } = {};
+  servicesHealth.getProjectStatus.services.forEach((service) => {
+    serviceMap[service.name] = service;
+  });
+  const {
+    'hasura-auth': auth,
+    'hasura-storage': storage,
+    postgres,
+    hasura,
+    ai,
+    ...otherServices
+  } = serviceMap;
+
+  const runServices = Object.values(otherServices).filter((service) =>
+    service.name.startsWith('run-'),
+  );
+
+  const isAuthExpandedByDefault = defaultExpanded === 'hasura-auth';
+  const isPostgresExpandedByDefault = defaultExpanded === 'postgres';
+  const isStorageExpandedByDefault = defaultExpanded === 'hasura-storage';
+  const isHasuraExpandedByDefault = defaultExpanded === 'hasura';
+  const isAIExpandedByDefault = defaultExpanded === 'ai';
+  const isRunExpandedByDefault = defaultExpanded === 'run';
+
+  return (
+    <Box className={twMerge('w-full rounded-lg pt-2 text-left')}>
+      <Box
+        sx={{
+          borderColor: 'text.dark',
+        }}
+        className="grid grid-flow-row"
+      >
+        <Divider />
+        <ServiceAccordion
+          icon={<UserIcon className="h-4 w-4" />}
+          serviceName="Auth"
+          serviceHealth={auth}
+          replicas={auth?.replicas}
+          serviceState={auth?.state}
+          defaultExpanded={isAuthExpandedByDefault}
+        />
+        <Divider />
+        <ServiceAccordion
+          icon={<DatabaseIcon className="h-4 w-4" />}
+          serviceName="Postgres"
+          serviceHealth={postgres}
+          replicas={postgres?.replicas}
+          serviceState={postgres?.state}
+          defaultExpanded={isPostgresExpandedByDefault}
+        />
+        <Divider />
+        <ServiceAccordion
+          icon={<StorageIcon className="h-4 w-4" />}
+          serviceName="Storage"
+          serviceHealth={storage}
+          replicas={storage?.replicas}
+          serviceState={storage?.state}
+          defaultExpanded={isStorageExpandedByDefault}
+        />
+        <Divider />
+        <ServiceAccordion
+          icon={<HasuraIcon className="h-4 w-4" />}
+          serviceName="Hasura"
+          serviceHealth={hasura}
+          replicas={hasura?.replicas}
+          serviceState={hasura?.state}
+          defaultExpanded={isHasuraExpandedByDefault}
+        />
+        {ai ? (
+          <>
+            <Divider />
+            <ServiceAccordion
+              icon={<AIIcon className="h-4 w-4" />}
+              serviceName="AI"
+              serviceHealth={ai}
+              replicas={ai.replicas}
+              serviceState={ai.state}
+              defaultExpanded={isAIExpandedByDefault}
+            />
+          </>
+        ) : null}
+        {Object.values(runServices).length > 0 ? (
+          <>
+            <Divider />
+            <RunServicesAccordion
+              servicesHealth={Object.values(runServices)}
+              icon={<ServicesOutlinedIcon className="h-4 w-4" />}
+              serviceStates={Object.values(runServices).map(
+                (service) => service.state,
+              )}
+              defaultExpanded={isRunExpandedByDefault}
+            />
+          </>
+        ) : null}
+      </Box>
+    </Box>
+  );
+}

dashboard/src/features/projects/overview/components/OverviewProjectHealthModal/index.ts

@@ -0,0 +1 @@
+export { default as OverviewProjectHealthModal } from './OverviewProjectHealthModal';

dashboard/src/features/projects/overview/components/OverviewProjectInfo/OverviewProjectInfo.tsx

@@ -7,7 +7,7 @@ export default function OverviewProjectInfo() {
   const { currentProject } = useCurrentWorkspaceAndProject();
   const { region, subdomain } = currentProject || {};
   const isRegionAvailable =
-    region?.awsName && region?.countryCode && region?.city;
+    region?.name && region?.countryCode && region?.city;
 
   return (
     <div className="grid grid-flow-row content-start gap-6">
@@ -17,7 +17,7 @@ export default function OverviewProjectInfo() {
         <div className="grid grid-flow-row gap-3">
           <InfoCard
             title="Region"
-            value={region?.awsName}
+            value={region?.name}
             customValue={
               region?.countryCode &&
               region?.city && (
@@ -30,7 +30,7 @@ export default function OverviewProjectInfo() {
                   />
 
                   <Text className="truncate text-sm font-medium">
-                    {region.city} ({region.awsName})
+                    {region.city} ({region.name})
                   </Text>
                 </div>
               )

dashboard/src/features/projects/overview/components/ProjectHealthCard/ProjectHealthCard.tsx

@@ -0,0 +1,211 @@
+import { Badge, type BadgeProps } from '@/components/ui/v2/Badge';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
+import { CheckIcon } from '@/components/ui/v2/icons/CheckIcon';
+import { ExclamationFilledIcon } from '@/components/ui/v2/icons/ExclamationFilledIcon';
+import { Tooltip, tooltipClasses } from '@/components/ui/v2/Tooltip';
+import { serviceStateToBadgeColor } from '@/features/projects/overview/health';
+import { ServiceState } from '@/utils/__generated__/graphql';
+import type { ImageProps } from 'next/image';
+import Image from 'next/image';
+import type { ReactElement } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+interface HealthBadgeProps extends BadgeProps {
+  badgeVariant?: 'standard' | 'dot';
+  badgeColor?: 'success' | 'error' | 'warning';
+  showExclamation?: boolean;
+  showCheckIcon?: boolean;
+  isLoading?: boolean;
+}
+
+function HealthBadge({
+  badgeColor,
+  badgeVariant,
+  showExclamation,
+  showCheckIcon,
+  children,
+  ...props
+}: HealthBadgeProps) {
+  if (!badgeColor) {
+    return <div>{children}</div>;
+  }
+
+  if (showExclamation) {
+    return (
+      <Badge
+        variant="standard"
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        badgeContent={
+          <ExclamationFilledIcon
+            sx={{
+              color: (theme) =>
+                theme.palette.mode === 'dark' ? 'grey.900' : 'grey.600',
+            }}
+            className="h-2.5 w-2.5"
+          />
+        }
+      >
+        <Badge
+          color={badgeColor}
+          variant={badgeVariant}
+          badgeContent={
+            showCheckIcon ? (
+              <CheckIcon
+                sx={{
+                  color: (theme) =>
+                    theme.palette.mode === 'dark' ? 'grey.200' : 'grey.100',
+                }}
+                className="h-2 w-2 stroke-2"
+              />
+            ) : null
+          }
+          sx={{
+            color: (theme) =>
+              theme.palette.mode === 'dark' ? 'grey.900' : 'text.primary',
+          }}
+          {...props}
+        >
+          {children}
+        </Badge>
+      </Badge>
+    );
+  }
+
+  return (
+    <Badge
+      color={badgeColor}
+      variant={badgeVariant}
+      badgeContent={
+        showCheckIcon ? (
+          <CheckIcon
+            sx={{
+              color: (theme) =>
+                theme.palette.mode === 'dark' ? 'grey.200' : 'grey.100',
+            }}
+            className="h-2 w-2 stroke-2"
+          />
+        ) : null
+      }
+      {...props}
+    >
+      {children}
+    </Badge>
+  );
+}
+
+export interface ProjectHealthCardProps extends BoxProps {
+  /**
+   * Label of the card icon.
+   */
+  alt?: string;
+  /**
+   * Tooltip of the card.
+   */
+  tooltip?: ReactElement | null;
+  /**
+   * Icon to display on the card.
+   */
+  icon: string | ReactElement;
+  /**
+   * Light version of the icon. This is used for the dark mode.
+   */
+  lightIcon?: string | ReactElement;
+  /**
+   * Determines whether the icon should have a background.
+   * @default false
+   */
+  disableIconBackground?: boolean;
+  /**
+   * Determines whether the icon is a react component.
+   * @default true
+   */
+  iconIsComponent?: boolean;
+  /**
+   * Props to be passed to the internal components.
+   */
+  slotProps?: {
+    imgIcon?: Partial<ImageProps>;
+  };
+  /**
+   * State of the service.
+   */
+  state?: ServiceState;
+
+  /**
+   * Determines whether the version is mismatched with recommended version.
+   */
+  isVersionMismatch?: boolean;
+
+  /**
+   * Determines whether the card is loading.
+   */
+  isLoading?: boolean;
+}
+
+export default function ProjectHealthCard({
+  alt,
+  tooltip,
+  icon,
+  iconIsComponent = true,
+  className,
+  slotProps = {},
+  isVersionMismatch = false,
+  isLoading = false,
+  state,
+  ...props
+}: ProjectHealthCardProps) {
+  const badgeColor = serviceStateToBadgeColor.get(state);
+  const badgeVariant = state === ServiceState.Running ? 'standard' : 'dot';
+  const showCheckIcon = state === ServiceState.Running;
+
+  return (
+    <Tooltip
+      title={tooltip}
+      slotProps={{
+        popper: {
+          sx: {
+            [`&.${tooltipClasses.popper} .${tooltipClasses.tooltip}`]: {
+              backgroundColor: (theme) =>
+                theme.palette.mode === 'dark' ? 'grey.100' : 'grey.200',
+              minWidth: '18rem',
+            },
+          },
+        },
+      }}
+    >
+      <Box
+        className={twMerge(
+          'grid aspect-square min-w-12 max-w-14 grid-flow-row gap-0 rounded-md p-0',
+          className,
+        )}
+        sx={{ backgroundColor: 'grey.200' }}
+        {...props}
+      >
+        <div className="grid grid-flow-col items-center justify-center">
+          <HealthBadge
+            badgeColor={!isLoading ? badgeColor : undefined}
+            badgeVariant={badgeVariant}
+            showCheckIcon={showCheckIcon}
+            showExclamation={isVersionMismatch}
+          >
+            {iconIsComponent
+              ? icon
+              : typeof icon === 'string' && (
+                  <Image
+                    src={icon}
+                    alt={alt}
+                    width={slotProps.imgIcon?.width}
+                    height={slotProps.imgIcon?.height}
+                    {...slotProps.imgIcon}
+                  />
+                )}
+          </HealthBadge>
+        </div>
+      </Box>
+    </Tooltip>
+  );
+}

dashboard/src/features/projects/overview/components/ProjectHealthCard/index.ts

@@ -0,0 +1 @@
+export { default as ProjectHealthCard } from './ProjectHealthCard';

dashboard/src/features/projects/overview/components/ServiceVersionTooltip/ServiceVersionTooltip.tsx

@@ -0,0 +1,161 @@
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Text } from '@/components/ui/v2/Text';
+import type { baseServices } from '@/features/projects/overview/health';
+import { ServiceState } from '@/utils/__generated__/graphql';
+import { useTheme } from '@mui/material';
+
+interface ServiceVersionTooltipProps {
+  serviceName?: string;
+  serviceKey?: keyof typeof baseServices;
+  usedVersion?: string;
+  recommendedVersionMismatch?: boolean;
+  recommendedVersions?: string[];
+  children?: React.ReactNode;
+  openHealthModal?: (
+    defaultExpanded?: keyof typeof baseServices | 'run',
+  ) => void;
+  state?: ServiceState;
+}
+
+function ServiceVersionTooltip({
+  serviceName,
+  usedVersion,
+  recommendedVersionMismatch,
+  recommendedVersions,
+  children,
+  openHealthModal,
+  state,
+  serviceKey,
+}: ServiceVersionTooltipProps) {
+  const theme = useTheme();
+
+  let errorMessage = '';
+  if (state === ServiceState.UpdateError) {
+    errorMessage =
+      'degraded or failed to update, click on view state for further details';
+  } else if (state === ServiceState.Error || state === ServiceState.None) {
+    errorMessage =
+      'is offline due to errors, click on view state for further details';
+  }
+
+  return (
+    <div className="flex flex-col gap-3 px-2 py-3">
+      <div className="flex flex-row justify-between gap-6">
+        <Text
+          sx={{
+            color:
+              theme.palette.mode === 'dark'
+                ? 'text.secondary'
+                : 'text.secondary',
+          }}
+          variant="h4"
+          component="p"
+          className="text-sm+"
+        >
+          service
+        </Text>
+        <Text
+          sx={{
+            color:
+              theme.palette.mode === 'dark' ? 'text.primary' : 'text.primary',
+          }}
+          variant="h4"
+          component="p"
+          className="text-sm+ font-semibold"
+        >
+          {serviceName}
+        </Text>
+      </div>
+      <div className="flex flex-row justify-between gap-6">
+        <Text
+          sx={{
+            color:
+              theme.palette.mode === 'dark'
+                ? 'text.secondary'
+                : 'text.secondary',
+          }}
+          variant="h4"
+          component="p"
+          className="text-sm+"
+        >
+          version
+        </Text>
+        <Text
+          sx={{
+            color:
+              theme.palette.mode === 'dark' ? 'text.primary' : 'text.primary',
+          }}
+          variant="h4"
+          component="p"
+          className="text-sm+ font-bold"
+        >
+          {usedVersion}
+        </Text>
+      </div>
+      {recommendedVersionMismatch && (
+        <Box
+          sx={{
+            backgroundColor:
+              theme.palette.mode === 'dark' ? 'grey.200' : 'grey.300',
+          }}
+          className="rounded-md p-2"
+        >
+          <Text
+            sx={{
+              color:
+                theme.palette.mode === 'dark' ? 'text.primary' : 'text.primary',
+            }}
+            variant="body1"
+            component="p"
+            className="text-sm+"
+          >
+            {serviceName} is not using a recommended version. Recommended
+            version(s):
+          </Text>
+          <ul className="list-disc text-sm+">
+            {recommendedVersions.map((version) => (
+              <li className="ml-6 list-item" key={version}>
+                <Text
+                  sx={{
+                    color:
+                      theme.palette.mode === 'dark'
+                        ? 'text.primary'
+                        : 'text.primary',
+                  }}
+                  variant="body1"
+                  component="p"
+                >
+                  {version}
+                </Text>
+              </li>
+            ))}
+          </ul>
+        </Box>
+      )}
+      {errorMessage ? (
+        <Box
+          sx={{
+            backgroundColor:
+              theme.palette.mode === 'dark' ? 'error.dark' : 'error.main',
+          }}
+          className="rounded-md p-2"
+        >
+          <Text
+            variant="body1"
+            component="p"
+            className="text-sm+ font-semibold text-white"
+          >
+            {serviceName} {errorMessage}
+          </Text>
+        </Box>
+      ) : null}
+      <Button variant="outlined" onClick={() => openHealthModal(serviceKey)}>
+        View state
+      </Button>
+      {children}
+    </div>
+  );
+}
+
+export default ServiceVersionTooltip;

dashboard/src/features/projects/overview/components/ServiceVersionTooltip/index.ts

@@ -0,0 +1 @@
+export { default as ServiceVersionTooltip } from './ServiceVersionTooltip';

dashboard/src/features/projects/overview/health/health.ts

@@ -0,0 +1,80 @@
+import {
+  ServiceState,
+  type GetProjectServicesHealthQuery,
+} from '@/utils/__generated__/graphql';
+
+export type ServiceHealthInfo =
+  GetProjectServicesHealthQuery['getProjectStatus']['services'][number];
+
+export const baseServices = {
+  'hasura-auth': {
+    displayName: 'Auth',
+    softwareVersionsName: 'Auth',
+  },
+  hasura: {
+    displayName: 'Hasura',
+    softwareVersionsName: 'Hasura',
+  },
+  postgres: {
+    displayName: 'Postgres',
+    softwareVersionsName: 'PostgreSQL',
+  },
+  'hasura-storage': {
+    displayName: 'Storage',
+    softwareVersionsName: 'Storage',
+  },
+  ai: {
+    displayName: 'Graphite',
+    softwareVersionsName: 'Graphite',
+  },
+} as const;
+
+export const serviceStateToThemeColor = new Map<ServiceState, string>([
+  [ServiceState.Running, 'success.dark'],
+  [ServiceState.Error, 'error.main'],
+  [ServiceState.UpdateError, 'error.main'],
+  [ServiceState.Updating, 'warning.dark'],
+  [ServiceState.None, 'error.main'],
+  [undefined, 'error.main'],
+]);
+
+export const serviceStateToBadgeColor = new Map<
+  ServiceState,
+  'success' | 'error' | 'warning'
+>([
+  [ServiceState.Running, 'success'],
+  [ServiceState.Error, 'error'],
+  [ServiceState.UpdateError, 'error'],
+  [ServiceState.Updating, 'warning'],
+  [ServiceState.None, 'error'],
+  [undefined, 'error'],
+]);
+
+/**
+ * Returns the highest importance state from a list of service states
+ * Example: [Running, Running, Error] => Error
+ */
+export const findHighestImportanceState = (
+  servicesStates: ServiceState[],
+): ServiceState => {
+  const serviceStateToImportance = new Map([
+    [ServiceState.Running, 0],
+    [ServiceState.Updating, 1],
+    [ServiceState.UpdateError, 2],
+    [ServiceState.Error, 3],
+    [ServiceState.None, 4],
+  ]);
+
+  if (servicesStates.length === 0) {
+    return ServiceState.None;
+  }
+
+  return servicesStates.reduce((acc, state) => {
+    if (
+      serviceStateToImportance.get(state) > serviceStateToImportance.get(acc)
+    ) {
+      return state;
+    }
+    return acc;
+  }, ServiceState.Running);
+};

dashboard/src/features/projects/overview/health/index.ts

@@ -0,0 +1 @@
+export * from './health';

dashboard/src/features/services/components/ServiceForm/ServiceForm.tsx

@@ -190,7 +190,7 @@ export default function ServiceForm({
               image:
                 values.image.length > 0
                   ? values.image
-                  : `registry.${currentProject.region.awsName}.${currentProject.region.domain}/${newServiceID}`,
+                  : `registry.${currentProject.region.name}.${currentProject.region.domain}/${newServiceID}`,
             },
           },
         },
@@ -361,7 +361,7 @@ export default function ServiceForm({
         {isPlatform && serviceID && serviceImage && (
           <InfoCard
             title="Private registry"
-            value={`registry.${currentProject.region.awsName}.${currentProject.region.domain}/${serviceID}`}
+            value={`registry.${currentProject.region.name}.${currentProject.region.domain}/${serviceID}`}
           />
         )}
 

dashboard/src/features/services/components/ServiceForm/components/PortsFormSection/PortsFormSection.tsx

@@ -43,7 +43,7 @@ export default function PortsFormSection() {
   const getPortURL = (_port: string | number, subdomain: string) => {
     const port = Number(_port) > 0 ? Number(_port) : '[port]';
 
-    return `https://${subdomain}-${port}.svc.${currentProject?.region.awsName}.${currentProject?.region.domain}`;
+    return `https://${subdomain}-${port}.svc.${currentProject?.region.name}.${currentProject?.region.domain}`;
   };
 
   return (

dashboard/src/features/services/components/ServiceForm/components/ServiceDetailsDialog/ServiceDetailsDialog.tsx

@@ -35,7 +35,7 @@ export default function ServiceDetailsDialog({
   const getPortURL = (_port: string | number) => {
     const port = Number(_port) > 0 ? Number(_port) : '[port]';
 
-    return `https://${subdomain}-${port}.svc.${currentProject?.region.awsName}.${currentProject?.region.domain}`;
+    return `https://${subdomain}-${port}.svc.${currentProject?.region.name}.${currentProject?.region.domain}`;
   };
 
   return (
@@ -44,7 +44,7 @@ export default function ServiceDetailsDialog({
         <Text color="secondary">Private registry</Text>
         <InfoCard
           title=""
-          value={`registry.${currentProject.region.awsName}.${currentProject.region.domain}/${serviceID}`}
+          value={`registry.${currentProject.region.name}.${currentProject.region.domain}/${serviceID}`}
         />
       </div>
 

dashboard/src/gql/app/getConfiguredVersions.graphql

@@ -0,0 +1,19 @@
+query getConfiguredVersions($appId: uuid!) {
+  config(appID: $appId, resolve: true) {
+    auth {
+      version
+    }
+    postgres {
+      version
+    }
+    hasura {
+      version
+    }
+    ai {
+      version
+    }
+    storage {
+      version
+    }
+  }
+}

dashboard/src/gql/app/getProjectServicesHealth.gql

@@ -0,0 +1,20 @@
+query getProjectServicesHealth($appId: String!) {
+  getProjectStatus(appID: $appId) {
+    services {
+      name
+      state
+      replicas {
+        ready
+        date
+        errors {
+          name
+          lastError {
+            reason
+            exitCode
+            message
+          }
+        }
+      }
+    }
+  }
+}

dashboard/src/gql/app/settings/getConfigRawJSON.graphql

@@ -0,0 +1,3 @@
+query getConfigRawJSON ($appID: uuid!) {
+  configRawJSON(appID: $appID, resolve: false)
+}

dashboard/src/gql/app/settings/replaceConfigRawJSON.graphql

@@ -0,0 +1,3 @@
+mutation ReplaceConfigRawJSON($appID: uuid!, $rawJSON: String!) {
+  replaceConfigRawJSON(appID: $appID, rawJSON: $rawJSON)
+}

dashboard/src/gql/fragments/project.gql

@@ -39,7 +39,7 @@ fragment Project on apps {
   region {
     id
     countryCode
-    awsName
+    name
     domain
     city
   }

dashboard/src/gql/platform/getRecommendedSoftwareVersions.gql

@@ -0,0 +1,6 @@
+query getRecommendedSoftwareVersions {
+  softwareVersions {
+    software
+    version
+  }
+}

dashboard/src/pages/[workspaceSlug]/[appSlug]/settings/editor/index.tsx

@@ -0,0 +1,11 @@
+import { SettingsLayout } from '@/components/layout/SettingsLayout';
+import { TOMLEditor } from '@/features/projects/common/components/settings/TOMLEditor';
+import type { ReactElement } from 'react';
+
+export default function TOMLEditorPage() {
+  return <TOMLEditor />;
+}
+
+TOMLEditorPage.getLayout = function getLayout(page: ReactElement) {
+  return <SettingsLayout>{page}</SettingsLayout>;
+};

dashboard/src/tests/mocks.ts

@@ -50,7 +50,7 @@ export const mockApplication: Project = {
   appStates: [],
   subdomain: '',
   region: {
-    awsName: 'us-east-1',
+    name: 'us-east-1',
     city: 'New York',
     countryCode: 'US',
     id: '1',

dashboard/src/utils/__generated__/graphql.ts

@@ -1037,6 +1037,26 @@ export type ConfigAuthsessionaccessTokenCustomClaimsUpdateInput = {
   value?: InputMaybe<Scalars['String']>;
 };
 
+export type ConfigAutoscaler = {
+  __typename?: 'ConfigAutoscaler';
+  maxReplicas: Scalars['ConfigUint8'];
+};
+
+export type ConfigAutoscalerComparisonExp = {
+  _and?: InputMaybe<Array<ConfigAutoscalerComparisonExp>>;
+  _not?: InputMaybe<ConfigAutoscalerComparisonExp>;
+  _or?: InputMaybe<Array<ConfigAutoscalerComparisonExp>>;
+  maxReplicas?: InputMaybe<ConfigUint8ComparisonExp>;
+};
+
+export type ConfigAutoscalerInsertInput = {
+  maxReplicas: Scalars['ConfigUint8'];
+};
+
+export type ConfigAutoscalerUpdateInput = {
+  maxReplicas?: InputMaybe<Scalars['ConfigUint8']>;
+};
+
 export type ConfigBooleanComparisonExp = {
   _eq?: InputMaybe<Scalars['Boolean']>;
   _in?: InputMaybe<Array<Scalars['Boolean']>>;
@@ -1803,6 +1823,7 @@ export type ConfigPostgresInsertInput = {
 /** Resources for the service */
 export type ConfigPostgresResources = {
   __typename?: 'ConfigPostgresResources';
+  autoscaler?: Maybe<ConfigAutoscaler>;
   compute?: Maybe<ConfigResourcesCompute>;
   enablePublicAccess?: Maybe<Scalars['Boolean']>;
   networking?: Maybe<ConfigNetworking>;
@@ -1815,6 +1836,7 @@ export type ConfigPostgresResourcesComparisonExp = {
   _and?: InputMaybe<Array<ConfigPostgresResourcesComparisonExp>>;
   _not?: InputMaybe<ConfigPostgresResourcesComparisonExp>;
   _or?: InputMaybe<Array<ConfigPostgresResourcesComparisonExp>>;
+  autoscaler?: InputMaybe<ConfigAutoscalerComparisonExp>;
   compute?: InputMaybe<ConfigResourcesComputeComparisonExp>;
   enablePublicAccess?: InputMaybe<ConfigBooleanComparisonExp>;
   networking?: InputMaybe<ConfigNetworkingComparisonExp>;
@@ -1823,6 +1845,7 @@ export type ConfigPostgresResourcesComparisonExp = {
 };
 
 export type ConfigPostgresResourcesInsertInput = {
+  autoscaler?: InputMaybe<ConfigAutoscalerInsertInput>;
   compute?: InputMaybe<ConfigResourcesComputeInsertInput>;
   enablePublicAccess?: InputMaybe<Scalars['Boolean']>;
   networking?: InputMaybe<ConfigNetworkingInsertInput>;
@@ -1831,6 +1854,7 @@ export type ConfigPostgresResourcesInsertInput = {
 };
 
 export type ConfigPostgresResourcesUpdateInput = {
+  autoscaler?: InputMaybe<ConfigAutoscalerUpdateInput>;
   compute?: InputMaybe<ConfigResourcesComputeUpdateInput>;
   enablePublicAccess?: InputMaybe<Scalars['Boolean']>;
   networking?: InputMaybe<ConfigNetworkingUpdateInput>;
@@ -1992,6 +2016,7 @@ export type ConfigProviderUpdateInput = {
 /** Resource configuration for a service */
 export type ConfigResources = {
   __typename?: 'ConfigResources';
+  autoscaler?: Maybe<ConfigAutoscaler>;
   compute?: Maybe<ConfigResourcesCompute>;
   networking?: Maybe<ConfigNetworking>;
   /** Number of replicas for a service */
@@ -2002,6 +2027,7 @@ export type ConfigResourcesComparisonExp = {
   _and?: InputMaybe<Array<ConfigResourcesComparisonExp>>;
   _not?: InputMaybe<ConfigResourcesComparisonExp>;
   _or?: InputMaybe<Array<ConfigResourcesComparisonExp>>;
+  autoscaler?: InputMaybe<ConfigAutoscalerComparisonExp>;
   compute?: InputMaybe<ConfigResourcesComputeComparisonExp>;
   networking?: InputMaybe<ConfigNetworkingComparisonExp>;
   replicas?: InputMaybe<ConfigUint8ComparisonExp>;
@@ -2034,12 +2060,14 @@ export type ConfigResourcesComputeUpdateInput = {
 };
 
 export type ConfigResourcesInsertInput = {
+  autoscaler?: InputMaybe<ConfigAutoscalerInsertInput>;
   compute?: InputMaybe<ConfigResourcesComputeInsertInput>;
   networking?: InputMaybe<ConfigNetworkingInsertInput>;
   replicas?: InputMaybe<Scalars['ConfigUint8']>;
 };
 
 export type ConfigResourcesUpdateInput = {
+  autoscaler?: InputMaybe<ConfigAutoscalerUpdateInput>;
   compute?: InputMaybe<ConfigResourcesComputeUpdateInput>;
   networking?: InputMaybe<ConfigNetworkingUpdateInput>;
   replicas?: InputMaybe<Scalars['ConfigUint8']>;
@@ -2157,6 +2185,7 @@ export type ConfigRunServicePortUpdateInput = {
 /** Resource configuration for a service */
 export type ConfigRunServiceResources = {
   __typename?: 'ConfigRunServiceResources';
+  autoscaler?: Maybe<ConfigAutoscaler>;
   compute: ConfigComputeResources;
   /** Number of replicas for a service */
   replicas: Scalars['ConfigUint8'];
@@ -2167,12 +2196,14 @@ export type ConfigRunServiceResourcesComparisonExp = {
   _and?: InputMaybe<Array<ConfigRunServiceResourcesComparisonExp>>;
   _not?: InputMaybe<ConfigRunServiceResourcesComparisonExp>;
   _or?: InputMaybe<Array<ConfigRunServiceResourcesComparisonExp>>;
+  autoscaler?: InputMaybe<ConfigAutoscalerComparisonExp>;
   compute?: InputMaybe<ConfigComputeResourcesComparisonExp>;
   replicas?: InputMaybe<ConfigUint8ComparisonExp>;
   storage?: InputMaybe<ConfigRunServiceResourcesStorageComparisonExp>;
 };
 
 export type ConfigRunServiceResourcesInsertInput = {
+  autoscaler?: InputMaybe<ConfigAutoscalerInsertInput>;
   compute: ConfigComputeResourcesInsertInput;
   replicas: Scalars['ConfigUint8'];
   storage?: InputMaybe<Array<ConfigRunServiceResourcesStorageInsertInput>>;
@@ -2209,6 +2240,7 @@ export type ConfigRunServiceResourcesStorageUpdateInput = {
 };
 
 export type ConfigRunServiceResourcesUpdateInput = {
+  autoscaler?: InputMaybe<ConfigAutoscalerUpdateInput>;
   compute?: InputMaybe<ConfigComputeResourcesUpdateInput>;
   replicas?: InputMaybe<Scalars['ConfigUint8']>;
   storage?: InputMaybe<Array<ConfigRunServiceResourcesStorageUpdateInput>>;
@@ -2657,6 +2689,12 @@ export type ConfigUserRoleComparisonExp = {
   _nin?: InputMaybe<Array<Scalars['ConfigUserRole']>>;
 };
 
+export type ContainerError = {
+  __typename?: 'ContainerError';
+  lastError: LastError;
+  name: Scalars['String'];
+};
+
 /** Boolean expression to compare columns of type "Int". All fields are combined with logical 'AND'. */
 export type Int_Comparison_Exp = {
   _eq?: InputMaybe<Scalars['Int']>;
@@ -2683,6 +2721,13 @@ export type InvoiceSummary = {
   items: Array<InvoiceItem>;
 };
 
+export type LastError = {
+  __typename?: 'LastError';
+  exitCode: Scalars['Int'];
+  message: Scalars['String'];
+  reason: Scalars['String'];
+};
+
 export type Log = {
   __typename?: 'Log';
   log: Scalars['String'];
@@ -2695,6 +2740,33 @@ export type Metrics = {
   value: Scalars['float64'];
 };
 
+export type ProjectStatusResponse = {
+  __typename?: 'ProjectStatusResponse';
+  services: Array<ServiceStatus>;
+};
+
+export type ReplicaStatus = {
+  __typename?: 'ReplicaStatus';
+  date: Scalars['Timestamp'];
+  errors: Array<ContainerError>;
+  ready: Scalars['Boolean'];
+};
+
+export enum ServiceState {
+  Error = 'Error',
+  None = 'None',
+  Running = 'Running',
+  UpdateError = 'UpdateError',
+  Updating = 'Updating'
+}
+
+export type ServiceStatus = {
+  __typename?: 'ServiceStatus';
+  name: Scalars['String'];
+  replicas: Array<ReplicaStatus>;
+  state: ServiceState;
+};
+
 export type StatsLiveApps = {
   __typename?: 'StatsLiveApps';
   appID: Array<Scalars['uuid']>;
@@ -12172,6 +12244,7 @@ export type Mutation_Root = {
   pauseAppsExceedUsage: Array<Scalars['String']>;
   pauseInactiveApps: Array<Scalars['String']>;
   replaceConfig: ConfigConfig;
+  replaceConfigRawJSON: Scalars['String'];
   replaceRunServiceConfig: ConfigRunServiceConfig;
   resetPostgresPassword: Scalars['Boolean'];
   restoreApplicationDatabase: Scalars['Boolean'];
@@ -13663,6 +13736,13 @@ export type Mutation_RootReplaceConfigArgs = {
 };
 
 
+/** mutation root */
+export type Mutation_RootReplaceConfigRawJsonArgs = {
+  appID: Scalars['uuid'];
+  rawJSON: Scalars['String'];
+};
+
+
 /** mutation root */
 export type Mutation_RootReplaceRunServiceConfigArgs = {
   appID: Scalars['uuid'];
@@ -15169,6 +15249,7 @@ export type Plans = {
   deprecated: Scalars['Boolean'];
   featureAdvancedGraphql: Scalars['Boolean'];
   featureBackupEnabled: Scalars['Boolean'];
+  featureBackupRetentionDays: Scalars['Int'];
   featureCustomDomainsEnabled: Scalars['Boolean'];
   featureCustomEmailTemplatesEnabled: Scalars['Boolean'];
   featureCustomResources: Scalars['Boolean'];
@@ -15251,6 +15332,7 @@ export type Plans_Aggregate_FieldsCountArgs = {
 /** aggregate avg on columns */
 export type Plans_Avg_Fields = {
   __typename?: 'plans_avg_fields';
+  featureBackupRetentionDays?: Maybe<Scalars['Float']>;
   /** Function execution timeout in seconds */
   featureFunctionExecutionTimeout?: Maybe<Scalars['Float']>;
   featureMaxDbSize?: Maybe<Scalars['Float']>;
@@ -15272,6 +15354,7 @@ export type Plans_Bool_Exp = {
   deprecated?: InputMaybe<Boolean_Comparison_Exp>;
   featureAdvancedGraphql?: InputMaybe<Boolean_Comparison_Exp>;
   featureBackupEnabled?: InputMaybe<Boolean_Comparison_Exp>;
+  featureBackupRetentionDays?: InputMaybe<Int_Comparison_Exp>;
   featureCustomDomainsEnabled?: InputMaybe<Boolean_Comparison_Exp>;
   featureCustomEmailTemplatesEnabled?: InputMaybe<Boolean_Comparison_Exp>;
   featureCustomResources?: InputMaybe<Boolean_Comparison_Exp>;
@@ -15306,6 +15389,7 @@ export enum Plans_Constraint {
 
 /** input type for incrementing numeric columns in table "plans" */
 export type Plans_Inc_Input = {
+  featureBackupRetentionDays?: InputMaybe<Scalars['Int']>;
   /** Function execution timeout in seconds */
   featureFunctionExecutionTimeout?: InputMaybe<Scalars['Int']>;
   featureMaxDbSize?: InputMaybe<Scalars['Int']>;
@@ -15323,6 +15407,7 @@ export type Plans_Insert_Input = {
   deprecated?: InputMaybe<Scalars['Boolean']>;
   featureAdvancedGraphql?: InputMaybe<Scalars['Boolean']>;
   featureBackupEnabled?: InputMaybe<Scalars['Boolean']>;
+  featureBackupRetentionDays?: InputMaybe<Scalars['Int']>;
   featureCustomDomainsEnabled?: InputMaybe<Scalars['Boolean']>;
   featureCustomEmailTemplatesEnabled?: InputMaybe<Scalars['Boolean']>;
   featureCustomResources?: InputMaybe<Scalars['Boolean']>;
@@ -15356,6 +15441,7 @@ export type Plans_Insert_Input = {
 export type Plans_Max_Fields = {
   __typename?: 'plans_max_fields';
   createdAt?: Maybe<Scalars['timestamptz']>;
+  featureBackupRetentionDays?: Maybe<Scalars['Int']>;
   /** Function execution timeout in seconds */
   featureFunctionExecutionTimeout?: Maybe<Scalars['Int']>;
   featureMaxDbSize?: Maybe<Scalars['Int']>;
@@ -15380,6 +15466,7 @@ export type Plans_Max_Fields = {
 export type Plans_Min_Fields = {
   __typename?: 'plans_min_fields';
   createdAt?: Maybe<Scalars['timestamptz']>;
+  featureBackupRetentionDays?: Maybe<Scalars['Int']>;
   /** Function execution timeout in seconds */
   featureFunctionExecutionTimeout?: Maybe<Scalars['Int']>;
   featureMaxDbSize?: Maybe<Scalars['Int']>;
@@ -15430,6 +15517,7 @@ export type Plans_Order_By = {
   deprecated?: InputMaybe<Order_By>;
   featureAdvancedGraphql?: InputMaybe<Order_By>;
   featureBackupEnabled?: InputMaybe<Order_By>;
+  featureBackupRetentionDays?: InputMaybe<Order_By>;
   featureCustomDomainsEnabled?: InputMaybe<Order_By>;
   featureCustomEmailTemplatesEnabled?: InputMaybe<Order_By>;
   featureCustomResources?: InputMaybe<Order_By>;
@@ -15472,6 +15560,8 @@ export enum Plans_Select_Column {
   /** column name */
   FeatureBackupEnabled = 'featureBackupEnabled',
   /** column name */
+  FeatureBackupRetentionDays = 'featureBackupRetentionDays',
+  /** column name */
   FeatureCustomDomainsEnabled = 'featureCustomDomainsEnabled',
   /** column name */
   FeatureCustomEmailTemplatesEnabled = 'featureCustomEmailTemplatesEnabled',
@@ -15527,6 +15617,7 @@ export type Plans_Set_Input = {
   deprecated?: InputMaybe<Scalars['Boolean']>;
   featureAdvancedGraphql?: InputMaybe<Scalars['Boolean']>;
   featureBackupEnabled?: InputMaybe<Scalars['Boolean']>;
+  featureBackupRetentionDays?: InputMaybe<Scalars['Int']>;
   featureCustomDomainsEnabled?: InputMaybe<Scalars['Boolean']>;
   featureCustomEmailTemplatesEnabled?: InputMaybe<Scalars['Boolean']>;
   featureCustomResources?: InputMaybe<Scalars['Boolean']>;
@@ -15559,6 +15650,7 @@ export type Plans_Set_Input = {
 /** aggregate stddev on columns */
 export type Plans_Stddev_Fields = {
   __typename?: 'plans_stddev_fields';
+  featureBackupRetentionDays?: Maybe<Scalars['Float']>;
   /** Function execution timeout in seconds */
   featureFunctionExecutionTimeout?: Maybe<Scalars['Float']>;
   featureMaxDbSize?: Maybe<Scalars['Float']>;
@@ -15572,6 +15664,7 @@ export type Plans_Stddev_Fields = {
 /** aggregate stddev_pop on columns */
 export type Plans_Stddev_Pop_Fields = {
   __typename?: 'plans_stddev_pop_fields';
+  featureBackupRetentionDays?: Maybe<Scalars['Float']>;
   /** Function execution timeout in seconds */
   featureFunctionExecutionTimeout?: Maybe<Scalars['Float']>;
   featureMaxDbSize?: Maybe<Scalars['Float']>;
@@ -15585,6 +15678,7 @@ export type Plans_Stddev_Pop_Fields = {
 /** aggregate stddev_samp on columns */
 export type Plans_Stddev_Samp_Fields = {
   __typename?: 'plans_stddev_samp_fields';
+  featureBackupRetentionDays?: Maybe<Scalars['Float']>;
   /** Function execution timeout in seconds */
   featureFunctionExecutionTimeout?: Maybe<Scalars['Float']>;
   featureMaxDbSize?: Maybe<Scalars['Float']>;
@@ -15609,6 +15703,7 @@ export type Plans_Stream_Cursor_Value_Input = {
   deprecated?: InputMaybe<Scalars['Boolean']>;
   featureAdvancedGraphql?: InputMaybe<Scalars['Boolean']>;
   featureBackupEnabled?: InputMaybe<Scalars['Boolean']>;
+  featureBackupRetentionDays?: InputMaybe<Scalars['Int']>;
   featureCustomDomainsEnabled?: InputMaybe<Scalars['Boolean']>;
   featureCustomEmailTemplatesEnabled?: InputMaybe<Scalars['Boolean']>;
   featureCustomResources?: InputMaybe<Scalars['Boolean']>;
@@ -15641,6 +15736,7 @@ export type Plans_Stream_Cursor_Value_Input = {
 /** aggregate sum on columns */
 export type Plans_Sum_Fields = {
   __typename?: 'plans_sum_fields';
+  featureBackupRetentionDays?: Maybe<Scalars['Int']>;
   /** Function execution timeout in seconds */
   featureFunctionExecutionTimeout?: Maybe<Scalars['Int']>;
   featureMaxDbSize?: Maybe<Scalars['Int']>;
@@ -15662,6 +15758,8 @@ export enum Plans_Update_Column {
   /** column name */
   FeatureBackupEnabled = 'featureBackupEnabled',
   /** column name */
+  FeatureBackupRetentionDays = 'featureBackupRetentionDays',
+  /** column name */
   FeatureCustomDomainsEnabled = 'featureCustomDomainsEnabled',
   /** column name */
   FeatureCustomEmailTemplatesEnabled = 'featureCustomEmailTemplatesEnabled',
@@ -15723,6 +15821,7 @@ export type Plans_Updates = {
 /** aggregate var_pop on columns */
 export type Plans_Var_Pop_Fields = {
   __typename?: 'plans_var_pop_fields';
+  featureBackupRetentionDays?: Maybe<Scalars['Float']>;
   /** Function execution timeout in seconds */
   featureFunctionExecutionTimeout?: Maybe<Scalars['Float']>;
   featureMaxDbSize?: Maybe<Scalars['Float']>;
@@ -15736,6 +15835,7 @@ export type Plans_Var_Pop_Fields = {
 /** aggregate var_samp on columns */
 export type Plans_Var_Samp_Fields = {
   __typename?: 'plans_var_samp_fields';
+  featureBackupRetentionDays?: Maybe<Scalars['Float']>;
   /** Function execution timeout in seconds */
   featureFunctionExecutionTimeout?: Maybe<Scalars['Float']>;
   featureMaxDbSize?: Maybe<Scalars['Float']>;
@@ -15749,6 +15849,7 @@ export type Plans_Var_Samp_Fields = {
 /** aggregate variance on columns */
 export type Plans_Variance_Fields = {
   __typename?: 'plans_variance_fields';
+  featureBackupRetentionDays?: Maybe<Scalars['Float']>;
   /** Function execution timeout in seconds */
   featureFunctionExecutionTimeout?: Maybe<Scalars['Float']>;
   featureMaxDbSize?: Maybe<Scalars['Float']>;
@@ -15948,6 +16049,7 @@ export type Query_Root = {
   getLogsVolume: Metrics;
   getPostgresVolumeCapacity: Metrics;
   getPostgresVolumeUsage: Metrics;
+  getProjectStatus: ProjectStatusResponse;
   /**
    * Returns list of label values for a given label within a range of time.
    *
@@ -16801,6 +16903,11 @@ export type Query_RootGetPostgresVolumeUsageArgs = {
 };
 
 
+export type Query_RootGetProjectStatusArgs = {
+  appID: Scalars['String'];
+};
+
+
 export type Query_RootGetServiceLabelValuesArgs = {
   appID: Scalars['String'];
 };
@@ -17427,6 +17534,7 @@ export type Regions = {
   domain: Scalars['String'];
   id: Scalars['uuid'];
   isGdprCompliant: Scalars['Boolean'];
+  name: Scalars['String'];
   /** An object relationship */
   region_type: Region_Type;
   /** An array relationship */
@@ -17804,6 +17912,7 @@ export type Regions_Bool_Exp = {
   domain?: InputMaybe<String_Comparison_Exp>;
   id?: InputMaybe<Uuid_Comparison_Exp>;
   isGdprCompliant?: InputMaybe<Boolean_Comparison_Exp>;
+  name?: InputMaybe<String_Comparison_Exp>;
   region_type?: InputMaybe<Region_Type_Bool_Exp>;
   regions_allowed_workspaces?: InputMaybe<Regions_Allowed_Workspace_Bool_Exp>;
   regions_allowed_workspaces_aggregate?: InputMaybe<Regions_Allowed_Workspace_Aggregate_Bool_Exp>;
@@ -17831,6 +17940,7 @@ export type Regions_Insert_Input = {
   domain?: InputMaybe<Scalars['String']>;
   id?: InputMaybe<Scalars['uuid']>;
   isGdprCompliant?: InputMaybe<Scalars['Boolean']>;
+  name?: InputMaybe<Scalars['String']>;
   region_type?: InputMaybe<Region_Type_Obj_Rel_Insert_Input>;
   regions_allowed_workspaces?: InputMaybe<Regions_Allowed_Workspace_Arr_Rel_Insert_Input>;
   type?: InputMaybe<Region_Type_Enum>;
@@ -17847,6 +17957,7 @@ export type Regions_Max_Fields = {
   description?: Maybe<Scalars['String']>;
   domain?: Maybe<Scalars['String']>;
   id?: Maybe<Scalars['uuid']>;
+  name?: Maybe<Scalars['String']>;
   updatedAt?: Maybe<Scalars['timestamptz']>;
 };
 
@@ -17859,6 +17970,7 @@ export type Regions_Max_Order_By = {
   description?: InputMaybe<Order_By>;
   domain?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  name?: InputMaybe<Order_By>;
   updatedAt?: InputMaybe<Order_By>;
 };
 
@@ -17872,6 +17984,7 @@ export type Regions_Min_Fields = {
   description?: Maybe<Scalars['String']>;
   domain?: Maybe<Scalars['String']>;
   id?: Maybe<Scalars['uuid']>;
+  name?: Maybe<Scalars['String']>;
   updatedAt?: Maybe<Scalars['timestamptz']>;
 };
 
@@ -17884,6 +17997,7 @@ export type Regions_Min_Order_By = {
   description?: InputMaybe<Order_By>;
   domain?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  name?: InputMaybe<Order_By>;
   updatedAt?: InputMaybe<Order_By>;
 };
 
@@ -17924,6 +18038,7 @@ export type Regions_Order_By = {
   domain?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
   isGdprCompliant?: InputMaybe<Order_By>;
+  name?: InputMaybe<Order_By>;
   region_type?: InputMaybe<Region_Type_Order_By>;
   regions_allowed_workspaces_aggregate?: InputMaybe<Regions_Allowed_Workspace_Aggregate_Order_By>;
   type?: InputMaybe<Order_By>;
@@ -17956,6 +18071,8 @@ export enum Regions_Select_Column {
   /** column name */
   IsGdprCompliant = 'isGdprCompliant',
   /** column name */
+  Name = 'name',
+  /** column name */
   Type = 'type',
   /** column name */
   UpdatedAt = 'updatedAt'
@@ -17988,6 +18105,7 @@ export type Regions_Set_Input = {
   domain?: InputMaybe<Scalars['String']>;
   id?: InputMaybe<Scalars['uuid']>;
   isGdprCompliant?: InputMaybe<Scalars['Boolean']>;
+  name?: InputMaybe<Scalars['String']>;
   type?: InputMaybe<Region_Type_Enum>;
   updatedAt?: InputMaybe<Scalars['timestamptz']>;
 };
@@ -18011,6 +18129,7 @@ export type Regions_Stream_Cursor_Value_Input = {
   domain?: InputMaybe<Scalars['String']>;
   id?: InputMaybe<Scalars['uuid']>;
   isGdprCompliant?: InputMaybe<Scalars['Boolean']>;
+  name?: InputMaybe<Scalars['String']>;
   type?: InputMaybe<Region_Type_Enum>;
   updatedAt?: InputMaybe<Scalars['timestamptz']>;
 };
@@ -18036,6 +18155,8 @@ export enum Regions_Update_Column {
   /** column name */
   IsGdprCompliant = 'isGdprCompliant',
   /** column name */
+  Name = 'name',
+  /** column name */
   Type = 'type',
   /** column name */
   UpdatedAt = 'updatedAt'
@@ -22765,7 +22886,7 @@ export type DeleteApplicationMutation = { __typename?: 'mutation_root', deleteAp
 export type GetAllWorkspacesAndProjectsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetAllWorkspacesAndProjectsQuery = { __typename?: 'query_root', workspaces: Array<{ __typename?: 'workspaces', id: any, name: string, slug: string, creatorUserId?: any | null, workspaceMembers: Array<{ __typename?: 'workspaceMembers', id: any, type: string, user: { __typename?: 'users', id: any, email?: any | null, displayName: string } }>, projects: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, createdAt: any, desiredState: number, nhostBaseFolder: string, config?: { __typename?: 'ConfigConfig', observability: { __typename?: 'ConfigObservability', grafana: { __typename?: 'ConfigGrafana', adminPassword: string } }, hasura: { __typename?: 'ConfigHasura', adminSecret: string, settings?: { __typename?: 'ConfigHasuraSettings', enableConsole?: boolean | null } | null }, ai?: { __typename?: 'ConfigAI', version?: string | null } | null } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, domain: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, price: number, isFree: boolean, featureMaxDbSize: number }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null }> }> };
+export type GetAllWorkspacesAndProjectsQuery = { __typename?: 'query_root', workspaces: Array<{ __typename?: 'workspaces', id: any, name: string, slug: string, creatorUserId?: any | null, workspaceMembers: Array<{ __typename?: 'workspaceMembers', id: any, type: string, user: { __typename?: 'users', id: any, email?: any | null, displayName: string } }>, projects: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, createdAt: any, desiredState: number, nhostBaseFolder: string, config?: { __typename?: 'ConfigConfig', observability: { __typename?: 'ConfigObservability', grafana: { __typename?: 'ConfigGrafana', adminPassword: string } }, hasura: { __typename?: 'ConfigHasura', adminSecret: string, settings?: { __typename?: 'ConfigHasuraSettings', enableConsole?: boolean | null } | null }, ai?: { __typename?: 'ConfigAI', version?: string | null } | null } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, name: string, domain: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, price: number, isFree: boolean, featureMaxDbSize: number }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null }> }> };
 
 export type GetAppPlanAndGlobalPlansAppFragment = { __typename?: 'apps', id: any, subdomain: string, workspace: { __typename?: 'workspaces', id: any, paymentMethods: Array<{ __typename?: 'paymentMethods', id: any }> }, plan: { __typename?: 'plans', id: any, name: string } };
 
@@ -22794,6 +22915,13 @@ export type GetApplicationStateQueryVariables = Exact<{
 
 export type GetApplicationStateQuery = { __typename?: 'query_root', app?: { __typename?: 'apps', id: any, name: string, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }> } | null };
 
+export type GetConfiguredVersionsQueryVariables = Exact<{
+  appId: Scalars['uuid'];
+}>;
+
+
+export type GetConfiguredVersionsQuery = { __typename?: 'query_root', config?: { __typename?: 'ConfigConfig', auth?: { __typename?: 'ConfigAuth', version?: string | null } | null, postgres?: { __typename?: 'ConfigPostgres', version?: string | null } | null, hasura: { __typename?: 'ConfigHasura', version?: string | null }, ai?: { __typename?: 'ConfigAI', version?: string | null } | null, storage?: { __typename?: 'ConfigStorage', version?: string | null } | null } | null };
+
 export type GetProjectLocalesQueryVariables = Exact<{
   appId: Scalars['uuid'];
 }>;
@@ -22811,6 +22939,13 @@ export type GetProjectMetricsQueryVariables = Exact<{
 
 export type GetProjectMetricsQuery = { __typename?: 'query_root', logsVolume: { __typename?: 'Metrics', value: any }, cpuSecondsUsage: { __typename?: 'Metrics', value: any }, functionInvocations: { __typename?: 'Metrics', value: any }, functionsDuration: { __typename?: 'Metrics', value: any }, postgresVolumeCapacity: { __typename?: 'Metrics', value: any }, postgresVolumeUsage: { __typename?: 'Metrics', value: any }, totalRequests: { __typename?: 'Metrics', value: any }, egressVolume: { __typename?: 'Metrics', value: any } };
 
+export type GetProjectServicesHealthQueryVariables = Exact<{
+  appId: Scalars['String'];
+}>;
+
+
+export type GetProjectServicesHealthQuery = { __typename?: 'query_root', getProjectStatus: { __typename?: 'ProjectStatusResponse', services: Array<{ __typename?: 'ServiceStatus', name: string, state: ServiceState, replicas: Array<{ __typename?: 'ReplicaStatus', ready: boolean, date: any, errors: Array<{ __typename?: 'ContainerError', name: string, lastError: { __typename?: 'LastError', reason: string, exitCode: number, message: string } }> }> }> } };
+
 export type GetRemoteAppRolesQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -22822,7 +22957,7 @@ export type GetWorkspaceAndProjectQueryVariables = Exact<{
 }>;
 
 
-export type GetWorkspaceAndProjectQuery = { __typename?: 'query_root', workspaces: Array<{ __typename?: 'workspaces', id: any, name: string, slug: string, creatorUserId?: any | null, workspaceMembers: Array<{ __typename?: 'workspaceMembers', id: any, type: string, user: { __typename?: 'users', id: any, email?: any | null, displayName: string } }>, projects: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, createdAt: any, desiredState: number, nhostBaseFolder: string, config?: { __typename?: 'ConfigConfig', observability: { __typename?: 'ConfigObservability', grafana: { __typename?: 'ConfigGrafana', adminPassword: string } }, hasura: { __typename?: 'ConfigHasura', adminSecret: string, settings?: { __typename?: 'ConfigHasuraSettings', enableConsole?: boolean | null } | null }, ai?: { __typename?: 'ConfigAI', version?: string | null } | null } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, domain: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, price: number, isFree: boolean, featureMaxDbSize: number }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null }> }> };
+export type GetWorkspaceAndProjectQuery = { __typename?: 'query_root', workspaces: Array<{ __typename?: 'workspaces', id: any, name: string, slug: string, creatorUserId?: any | null, workspaceMembers: Array<{ __typename?: 'workspaceMembers', id: any, type: string, user: { __typename?: 'users', id: any, email?: any | null, displayName: string } }>, projects: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, createdAt: any, desiredState: number, nhostBaseFolder: string, config?: { __typename?: 'ConfigConfig', observability: { __typename?: 'ConfigObservability', grafana: { __typename?: 'ConfigGrafana', adminPassword: string } }, hasura: { __typename?: 'ConfigHasura', adminSecret: string, settings?: { __typename?: 'ConfigHasuraSettings', enableConsole?: boolean | null } | null }, ai?: { __typename?: 'ConfigAI', version?: string | null } | null } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, name: string, domain: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, price: number, isFree: boolean, featureMaxDbSize: number }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null }> }> };
 
 export type InsertApplicationMutationVariables = Exact<{
   app: Apps_Insert_Input;
@@ -22867,6 +23002,21 @@ export type GetEnvironmentVariablesQueryVariables = Exact<{
 
 export type GetEnvironmentVariablesQuery = { __typename?: 'query_root', config?: { __typename: 'ConfigConfig', id: 'ConfigConfig', global?: { __typename?: 'ConfigGlobal', environment?: Array<{ __typename?: 'ConfigGlobalEnvironmentVariable', name: string, value: string, id: string }> | null } | null, hasura: { __typename?: 'ConfigHasura', adminSecret: string, webhookSecret: string, jwtSecrets?: Array<{ __typename?: 'ConfigJWTSecret', issuer?: string | null, key?: string | null, type?: string | null, jwk_url?: any | null, header?: string | null, claims_namespace_path?: string | null, claims_namespace?: string | null, claims_format?: string | null, audience?: string | null, allowed_skew?: any | null }> | null } } | null };
 
+export type GetConfigRawJsonQueryVariables = Exact<{
+  appID: Scalars['uuid'];
+}>;
+
+
+export type GetConfigRawJsonQuery = { __typename?: 'query_root', configRawJSON: string };
+
+export type ReplaceConfigRawJsonMutationVariables = Exact<{
+  appID: Scalars['uuid'];
+  rawJSON: Scalars['String'];
+}>;
+
+
+export type ReplaceConfigRawJsonMutation = { __typename?: 'mutation_root', replaceConfigRawJSON: string };
+
 export type PermissionVariableFragment = { __typename?: 'ConfigAuthsessionaccessTokenCustomClaims', key: string, value: string, id: string };
 
 export type GetRolesPermissionsQueryVariables = Exact<{
@@ -23014,9 +23164,9 @@ export type GetFilesAggregateQuery = { __typename?: 'query_root', filesAggregate
 
 export type AppStateHistoryFragment = { __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any };
 
-export type ProjectFragment = { __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, createdAt: any, desiredState: number, nhostBaseFolder: string, config?: { __typename?: 'ConfigConfig', observability: { __typename?: 'ConfigObservability', grafana: { __typename?: 'ConfigGrafana', adminPassword: string } }, hasura: { __typename?: 'ConfigHasura', adminSecret: string, settings?: { __typename?: 'ConfigHasuraSettings', enableConsole?: boolean | null } | null }, ai?: { __typename?: 'ConfigAI', version?: string | null } | null } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, domain: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, price: number, isFree: boolean, featureMaxDbSize: number }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null };
+export type ProjectFragment = { __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, createdAt: any, desiredState: number, nhostBaseFolder: string, config?: { __typename?: 'ConfigConfig', observability: { __typename?: 'ConfigObservability', grafana: { __typename?: 'ConfigGrafana', adminPassword: string } }, hasura: { __typename?: 'ConfigHasura', adminSecret: string, settings?: { __typename?: 'ConfigHasuraSettings', enableConsole?: boolean | null } | null }, ai?: { __typename?: 'ConfigAI', version?: string | null } | null } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, name: string, domain: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, price: number, isFree: boolean, featureMaxDbSize: number }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null };
 
-export type WorkspaceFragment = { __typename?: 'workspaces', id: any, name: string, slug: string, creatorUserId?: any | null, workspaceMembers: Array<{ __typename?: 'workspaceMembers', id: any, type: string, user: { __typename?: 'users', id: any, email?: any | null, displayName: string } }>, projects: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, createdAt: any, desiredState: number, nhostBaseFolder: string, config?: { __typename?: 'ConfigConfig', observability: { __typename?: 'ConfigObservability', grafana: { __typename?: 'ConfigGrafana', adminPassword: string } }, hasura: { __typename?: 'ConfigHasura', adminSecret: string, settings?: { __typename?: 'ConfigHasuraSettings', enableConsole?: boolean | null } | null }, ai?: { __typename?: 'ConfigAI', version?: string | null } | null } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, domain: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, price: number, isFree: boolean, featureMaxDbSize: number }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null }> };
+export type WorkspaceFragment = { __typename?: 'workspaces', id: any, name: string, slug: string, creatorUserId?: any | null, workspaceMembers: Array<{ __typename?: 'workspaceMembers', id: any, type: string, user: { __typename?: 'users', id: any, email?: any | null, displayName: string } }>, projects: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, createdAt: any, desiredState: number, nhostBaseFolder: string, config?: { __typename?: 'ConfigConfig', observability: { __typename?: 'ConfigObservability', grafana: { __typename?: 'ConfigGrafana', adminPassword: string } }, hasura: { __typename?: 'ConfigHasura', adminSecret: string, settings?: { __typename?: 'ConfigHasuraSettings', enableConsole?: boolean | null } | null }, ai?: { __typename?: 'ConfigAI', version?: string | null } | null } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, name: string, domain: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, price: number, isFree: boolean, featureMaxDbSize: number }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null }> };
 
 export type GithubRepositoryFragment = { __typename?: 'githubRepositories', id: any, name: string, fullName: string, private: boolean, githubAppInstallation: { __typename?: 'githubAppInstallations', id: any, accountLogin?: string | null, accountType?: string | null, accountAvatarUrl?: string | null } };
 
@@ -23099,6 +23249,11 @@ export type GetPlansQueryVariables = Exact<{
 
 export type GetPlansQuery = { __typename?: 'query_root', plans: Array<{ __typename?: 'plans', id: any, name: string, isFree: boolean, price: number }> };
 
+export type GetRecommendedSoftwareVersionsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetRecommendedSoftwareVersionsQuery = { __typename?: 'query_root', softwareVersions: Array<{ __typename?: 'software_versions', software: Software_Type_Enum, version: string }> };
+
 export type GetSoftwareVersionsQueryVariables = Exact<{
   software: Software_Type_Enum;
 }>;
@@ -23559,7 +23714,7 @@ export const ProjectFragmentDoc = gql`
   region {
     id
     countryCode
-    awsName
+    name
     domain
     city
   }
@@ -24619,6 +24774,58 @@ export type GetApplicationStateQueryResult = Apollo.QueryResult<GetApplicationSt
 export function refetchGetApplicationStateQuery(variables: GetApplicationStateQueryVariables) {
       return { query: GetApplicationStateDocument, variables: variables }
     }
+export const GetConfiguredVersionsDocument = gql`
+    query getConfiguredVersions($appId: uuid!) {
+  config(appID: $appId, resolve: true) {
+    auth {
+      version
+    }
+    postgres {
+      version
+    }
+    hasura {
+      version
+    }
+    ai {
+      version
+    }
+    storage {
+      version
+    }
+  }
+}
+    `;
+
+/**
+ * __useGetConfiguredVersionsQuery__
+ *
+ * To run a query within a React component, call `useGetConfiguredVersionsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetConfiguredVersionsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetConfiguredVersionsQuery({
+ *   variables: {
+ *      appId: // value for 'appId'
+ *   },
+ * });
+ */
+export function useGetConfiguredVersionsQuery(baseOptions: Apollo.QueryHookOptions<GetConfiguredVersionsQuery, GetConfiguredVersionsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetConfiguredVersionsQuery, GetConfiguredVersionsQueryVariables>(GetConfiguredVersionsDocument, options);
+      }
+export function useGetConfiguredVersionsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetConfiguredVersionsQuery, GetConfiguredVersionsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetConfiguredVersionsQuery, GetConfiguredVersionsQueryVariables>(GetConfiguredVersionsDocument, options);
+        }
+export type GetConfiguredVersionsQueryHookResult = ReturnType<typeof useGetConfiguredVersionsQuery>;
+export type GetConfiguredVersionsLazyQueryHookResult = ReturnType<typeof useGetConfiguredVersionsLazyQuery>;
+export type GetConfiguredVersionsQueryResult = Apollo.QueryResult<GetConfiguredVersionsQuery, GetConfiguredVersionsQueryVariables>;
+export function refetchGetConfiguredVersionsQuery(variables: GetConfiguredVersionsQueryVariables) {
+      return { query: GetConfiguredVersionsDocument, variables: variables }
+    }
 export const GetProjectLocalesDocument = gql`
     query getProjectLocales($appId: uuid!) {
   config(appID: $appId, resolve: false) {
@@ -24735,6 +24942,59 @@ export type GetProjectMetricsQueryResult = Apollo.QueryResult<GetProjectMetricsQ
 export function refetchGetProjectMetricsQuery(variables: GetProjectMetricsQueryVariables) {
       return { query: GetProjectMetricsDocument, variables: variables }
     }
+export const GetProjectServicesHealthDocument = gql`
+    query getProjectServicesHealth($appId: String!) {
+  getProjectStatus(appID: $appId) {
+    services {
+      name
+      state
+      replicas {
+        ready
+        date
+        errors {
+          name
+          lastError {
+            reason
+            exitCode
+            message
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useGetProjectServicesHealthQuery__
+ *
+ * To run a query within a React component, call `useGetProjectServicesHealthQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetProjectServicesHealthQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetProjectServicesHealthQuery({
+ *   variables: {
+ *      appId: // value for 'appId'
+ *   },
+ * });
+ */
+export function useGetProjectServicesHealthQuery(baseOptions: Apollo.QueryHookOptions<GetProjectServicesHealthQuery, GetProjectServicesHealthQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetProjectServicesHealthQuery, GetProjectServicesHealthQueryVariables>(GetProjectServicesHealthDocument, options);
+      }
+export function useGetProjectServicesHealthLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetProjectServicesHealthQuery, GetProjectServicesHealthQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetProjectServicesHealthQuery, GetProjectServicesHealthQueryVariables>(GetProjectServicesHealthDocument, options);
+        }
+export type GetProjectServicesHealthQueryHookResult = ReturnType<typeof useGetProjectServicesHealthQuery>;
+export type GetProjectServicesHealthLazyQueryHookResult = ReturnType<typeof useGetProjectServicesHealthLazyQuery>;
+export type GetProjectServicesHealthQueryResult = Apollo.QueryResult<GetProjectServicesHealthQuery, GetProjectServicesHealthQueryVariables>;
+export function refetchGetProjectServicesHealthQuery(variables: GetProjectServicesHealthQueryVariables) {
+      return { query: GetProjectServicesHealthDocument, variables: variables }
+    }
 export const GetRemoteAppRolesDocument = gql`
     query getRemoteAppRoles {
   authRoles {
@@ -25017,6 +25277,74 @@ export type GetEnvironmentVariablesQueryResult = Apollo.QueryResult<GetEnvironme
 export function refetchGetEnvironmentVariablesQuery(variables: GetEnvironmentVariablesQueryVariables) {
       return { query: GetEnvironmentVariablesDocument, variables: variables }
     }
+export const GetConfigRawJsonDocument = gql`
+    query getConfigRawJSON($appID: uuid!) {
+  configRawJSON(appID: $appID, resolve: false)
+}
+    `;
+
+/**
+ * __useGetConfigRawJsonQuery__
+ *
+ * To run a query within a React component, call `useGetConfigRawJsonQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetConfigRawJsonQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetConfigRawJsonQuery({
+ *   variables: {
+ *      appID: // value for 'appID'
+ *   },
+ * });
+ */
+export function useGetConfigRawJsonQuery(baseOptions: Apollo.QueryHookOptions<GetConfigRawJsonQuery, GetConfigRawJsonQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetConfigRawJsonQuery, GetConfigRawJsonQueryVariables>(GetConfigRawJsonDocument, options);
+      }
+export function useGetConfigRawJsonLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetConfigRawJsonQuery, GetConfigRawJsonQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetConfigRawJsonQuery, GetConfigRawJsonQueryVariables>(GetConfigRawJsonDocument, options);
+        }
+export type GetConfigRawJsonQueryHookResult = ReturnType<typeof useGetConfigRawJsonQuery>;
+export type GetConfigRawJsonLazyQueryHookResult = ReturnType<typeof useGetConfigRawJsonLazyQuery>;
+export type GetConfigRawJsonQueryResult = Apollo.QueryResult<GetConfigRawJsonQuery, GetConfigRawJsonQueryVariables>;
+export function refetchGetConfigRawJsonQuery(variables: GetConfigRawJsonQueryVariables) {
+      return { query: GetConfigRawJsonDocument, variables: variables }
+    }
+export const ReplaceConfigRawJsonDocument = gql`
+    mutation ReplaceConfigRawJSON($appID: uuid!, $rawJSON: String!) {
+  replaceConfigRawJSON(appID: $appID, rawJSON: $rawJSON)
+}
+    `;
+export type ReplaceConfigRawJsonMutationFn = Apollo.MutationFunction<ReplaceConfigRawJsonMutation, ReplaceConfigRawJsonMutationVariables>;
+
+/**
+ * __useReplaceConfigRawJsonMutation__
+ *
+ * To run a mutation, you first call `useReplaceConfigRawJsonMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useReplaceConfigRawJsonMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [replaceConfigRawJsonMutation, { data, loading, error }] = useReplaceConfigRawJsonMutation({
+ *   variables: {
+ *      appID: // value for 'appID'
+ *      rawJSON: // value for 'rawJSON'
+ *   },
+ * });
+ */
+export function useReplaceConfigRawJsonMutation(baseOptions?: Apollo.MutationHookOptions<ReplaceConfigRawJsonMutation, ReplaceConfigRawJsonMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<ReplaceConfigRawJsonMutation, ReplaceConfigRawJsonMutationVariables>(ReplaceConfigRawJsonDocument, options);
+      }
+export type ReplaceConfigRawJsonMutationHookResult = ReturnType<typeof useReplaceConfigRawJsonMutation>;
+export type ReplaceConfigRawJsonMutationResult = Apollo.MutationResult<ReplaceConfigRawJsonMutation>;
+export type ReplaceConfigRawJsonMutationOptions = Apollo.BaseMutationOptions<ReplaceConfigRawJsonMutation, ReplaceConfigRawJsonMutationVariables>;
 export const GetRolesPermissionsDocument = gql`
     query GetRolesPermissions($appId: uuid!) {
   config(appID: $appId, resolve: false) {
@@ -26316,6 +26644,44 @@ export type GetPlansQueryResult = Apollo.QueryResult<GetPlansQuery, GetPlansQuer
 export function refetchGetPlansQuery(variables?: GetPlansQueryVariables) {
       return { query: GetPlansDocument, variables: variables }
     }
+export const GetRecommendedSoftwareVersionsDocument = gql`
+    query getRecommendedSoftwareVersions {
+  softwareVersions {
+    software
+    version
+  }
+}
+    `;
+
+/**
+ * __useGetRecommendedSoftwareVersionsQuery__
+ *
+ * To run a query within a React component, call `useGetRecommendedSoftwareVersionsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetRecommendedSoftwareVersionsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetRecommendedSoftwareVersionsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetRecommendedSoftwareVersionsQuery(baseOptions?: Apollo.QueryHookOptions<GetRecommendedSoftwareVersionsQuery, GetRecommendedSoftwareVersionsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetRecommendedSoftwareVersionsQuery, GetRecommendedSoftwareVersionsQueryVariables>(GetRecommendedSoftwareVersionsDocument, options);
+      }
+export function useGetRecommendedSoftwareVersionsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetRecommendedSoftwareVersionsQuery, GetRecommendedSoftwareVersionsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetRecommendedSoftwareVersionsQuery, GetRecommendedSoftwareVersionsQueryVariables>(GetRecommendedSoftwareVersionsDocument, options);
+        }
+export type GetRecommendedSoftwareVersionsQueryHookResult = ReturnType<typeof useGetRecommendedSoftwareVersionsQuery>;
+export type GetRecommendedSoftwareVersionsLazyQueryHookResult = ReturnType<typeof useGetRecommendedSoftwareVersionsLazyQuery>;
+export type GetRecommendedSoftwareVersionsQueryResult = Apollo.QueryResult<GetRecommendedSoftwareVersionsQuery, GetRecommendedSoftwareVersionsQueryVariables>;
+export function refetchGetRecommendedSoftwareVersionsQuery(variables?: GetRecommendedSoftwareVersionsQueryVariables) {
+      return { query: GetRecommendedSoftwareVersionsDocument, variables: variables }
+    }
 export const GetSoftwareVersionsDocument = gql`
     query getSoftwareVersions($software: software_type_enum!) {
   softwareVersions(where: {software: {_eq: $software}}, order_by: {version: desc}) {

docs/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/docs
 
+## 2.14.0
+
+### Minor Changes
+
+- 79ce7ca: feat: add react-native quickstart guide
+- bedbb82: feat: functions: added runtime/pkg manager information
+
 ## 2.13.0
 
 ### Minor Changes

docs/guides/cli/connect-devices-to-local-nhost-project.mdx

@@ -0,0 +1,121 @@
+---
+title: Connect Devices to Local Nhost Project
+description: Configuring dnsmasq for network device connectivity to a local Nhost project
+icon: ethernet
+---
+
+## Introduction
+
+If you want to connect to your local environment from other devices on the same network, such as Android emulators
+or iPhone devices, you can use **dnsmasq**. Follow this guide for the necessary configuration steps to enable this
+functionality for your local Nhost project running on your machine.
+
+<Note>
+  Make sure to install **dnsmasq**. If you're using another OS, please refer to the [dnsmasq website](https://thekelleys.org.uk/dnsmasq/doc.html).
+
+  <Tabs>
+    <Tab title="macOS">
+      ```shell Terminal
+      brew install dnsmasq
+      ```
+    </Tab>
+    <Tab title="Debian">
+      ```shell Terminal
+      apt-get install dnsmasq
+      ```
+    </Tab>
+    <Tab title="Nix">
+      ```shell Terminal
+      nix-env -iA nixpkgs.dnsmasq
+      ```
+    </Tab>
+  </Tabs>
+</Note>
+
+# Configure dnsmasq for Android
+<Warning>These steps are necessary when running on both an **Android emulator** or **physical Android device**</Warning>
+<Steps>
+  <Step title="Configure dnsmasq">
+    Configure `dnsmasq` to resolve nhost service urls to your machine's special [loopback address](https://developer.android.com/studio/run/emulator-networking) `10.0.2.2`
+    ```shell Terminal
+    sudo dnsmasq -d \
+      --address=/local.auth.nhost.run/10.0.2.2 \
+      --address=/local.graphql.nhost.run/10.0.2.2 \
+      --address=/local.storage.nhost.run/10.0.2.2 \
+      --address=/local.functions.nhost.run/10.0.2.2 
+    ```
+  </Step>
+  <Step title="Restart dnsmasq">
+    If you're using another OS, please refer to the [dnsmasq website](https://thekelleys.org.uk/dnsmasq/doc.html).
+    <Tabs>
+      <Tab title="macOS">
+        ```shell Terminal
+        sudo brew services restart dnsmasq
+        ```
+      </Tab>
+      <Tab title="Debian">
+        ```shell Terminal
+        sudo systemctl restart dnsmasq
+        ```
+      </Tab>
+    </Tabs>
+  </Step>
+  <Step title="Configure the android device/emulator's DNS settings">
+    1. Edit your network settings: Settings > Network & Internet > Internet > AndroidWifi
+    2. set `IP settings` to `Static`
+    3. set `DNS 1` and `DNS 2` to `10.0.2.2`
+    4. Save
+  </Step>
+</Steps>
+
+# Configure dnsmasq for iOS
+<Warning>These steps are only necessary when running on physical iOS device, the iOS simulator  uses the host machine's network, so no additional configuration is typically needed.</Warning>
+<Steps>
+  <Step title="Inspect your machine's IP address on your network">
+    <Tabs>
+      <Tab title="macOS">
+        ```shell Terminal
+        ipconfig getifaddr en0
+        ```
+      </Tab>
+      <Tab title="Debian">
+        ```shell Terminal
+        ip addr show dev en0 | grep 'inet ' | awk '{print $2}' | cut -d/ -f1
+        ```
+      </Tab>
+    </Tabs>
+  </Step>
+  <Step title="Configure dnsmasq">
+    Configure `dnsmasq` to resolve nhost service urls to your machine's ip address.
+    <Warning>Make sure to replace every occurrence of **[your-machine-s-up-address]** with the address printed in Step `1`</Warning>
+
+    ```shell Terminal
+    sudo dnsmasq -d \
+      --address=/local.auth.nhost.run/[your-machine-s-up-address] \
+      --address=/local.graphql.nhost.run/[your-machine-s-up-address] \
+      --address=/local.storage.nhost.run/[your-machine-s-up-address] \
+      --address=/local.functions.nhost.run/[your-machine-s-up-address]
+    ```
+  </Step>
+  <Step title="Restart dnsmasq">
+    If you're using another OS, please refer to the [dnsmasq website](https://thekelleys.org.uk/dnsmasq/doc.html).
+    <Tabs>
+      <Tab title="macOS">
+        ```shell Terminal
+        sudo brew services restart dnsmasq
+        ```
+      </Tab>
+      <Tab title="Debian">
+        ```shell Terminal
+        sudo systemctl restart dnsmasq
+        ```
+      </Tab>
+    </Tabs>
+  </Step>
+  <Step title="Configure the iPhone's DNS settings">
+    1. Select the wifi you're connected and select `Configure DNS`
+    2. Select `Manual`
+    3. Click on `Add server` and type your local machine's IP address printed in Step `1`
+    4. Save
+  </Step>
+</Steps>

docs/guides/functions/runtimes.mdx

@@ -0,0 +1,42 @@
+---
+title: Runtimes and Dependencies
+description: Supported execution runtimes and package managers
+icon: person-running
+---
+
+# Runtimes
+
+The following runtimes are supported:
+
+- [Node.js 18](https://nodejs.org)
+- [Node.js 20](https://nodejs.org)
+
+To select your preferred runtime ensure the following configuration is present in your `nhost.toml` file:
+
+<Tabs>
+  <Tab title="Node.js 18">
+
+```toml
+[functions.node]
+version = 18
+```
+
+  </Tab>
+  <Tab title="Node.js 20">
+
+```toml
+[functions.node]
+version = 20
+```
+
+  </Tab>
+</Tabs>
+
+## Package Managers
+
+For Node.js, the following package managers are supported:
+
+1. [npm](https://www.npmjs.com)
+2. [yarn](https://yarnpkg.com)
+
+To use one package manager or another, add the relevant lockfile (either `package-lock.json` for npm or `yarn.lock` for yarn) to the functions folder or a parent folder. If both lockfiles are present, `npm` will take precendence.

docs/guides/quickstarts/react-native.mdx

@@ -0,0 +1,457 @@
+---
+title: Get up and running with Nhost and React Native
+sidebarTitle: React Native
+description: In this quickstart guide, we'll demonstrate how to build a simple To-Do feature using Nhost and React Native.
+icon: mobile-notch
+---
+
+<Card>
+  Throughout this guide, we'll utilize the **@nhost/react-native-template**, which comes pre-configured with 
+  authentication and storage capabilities provided by Nhost.
+</Card>
+
+<br />
+
+<Note>
+  Before starting this quickstart, ensure that your environment is set up to work with React Native.
+  Follow the [setup guide](https://reactnative.dev/docs/next/set-up-your-environment) available on
+  the official React Native website.
+</Note>
+
+<Steps>
+  <Step title="Create Nhost Project">
+    Create your project through the [Nhost Dashboard](https://app.nhost.io/new).
+  </Step>
+
+  <Step title="Setup Database">
+    Navigate to the **SQL Editor** of the database and run the following SQL to create a new table `todos`.
+
+    <Warning>Make sure the option `Track this` is enabled</Warning>
+
+    ```sql SQL Editor
+    CREATE TABLE todos (
+      id uuid NOT NULL DEFAULT gen_random_uuid(),
+      created_at timestamptz NOT NULL DEFAULT now(),
+      updated_at timestamptz NOT NULL DEFAULT now(),
+      user_id uuid NOT NULL,
+      contents text NOT NULL,
+      PRIMARY KEY (id),
+      FOREIGN KEY (user_id) REFERENCES auth.users(id) ON UPDATE cascade ON DELETE cascade 
+    );
+    ```
+
+    <Frame caption="Create Todos Table">
+      <img src="/images/guides/quickstarts/react-native/create-table-todos.png" />
+    </Frame>
+
+  </Step>
+
+  <Step title="Configure the todos table permissions">
+    To set permissions for the new `todos` table, select the table, click on the `...` to open the actions dialog,
+    then click on **Edit Permissions**. Set the following permissions for the `user` role:
+
+    1. `Insert`
+        - Set `Row insert permissions` to `Without any checks`
+        - Select all columns except `user_id` on `Column insert permissions`
+        - Add a new `Column preset` and set `Column Name` to `user_id` and `Column Value` to `X-Hasura-User-Id`
+        - Save
+    
+    <Frame caption="Insert Permissions">
+      <img src="/images/guides/quickstarts/react-native/todos-insert-permissions.png" />
+    </Frame>
+
+    2. `Select`
+        - Set `Row select permissions` to `With custom check` and fill in the following rule:
+            - Set `Where` to `todos.user_id`
+            - Set the operator to `_eq`
+            - Set the value to `X-Hasura-User-Id`
+        - Select all columns except `user_id` on `Column select permissions`
+        - Save
+
+    <Frame caption="Select Permissions">
+      <img src="/images/guides/quickstarts/react-native/todos-select-permissions.png" />
+    </Frame>
+
+    3. `Update`
+        - Set `Row update permissions` to `With custom check` and fill in the following rule:
+            - Set `Where` to `todos.user_id`
+            - Set the operator to `_eq`
+            - Set the value to `X-Hasura-User-Id`
+        - Select all columns except `user_id` on `Column select permissions`
+        - Save
+
+    <Frame caption="Update permissions">
+      <img src="/images/guides/quickstarts/react-native/todos-update-permissions.png" />
+    </Frame>
+
+    4. `Delete`
+        - Set `Row delete permissions` to `With custom check` and fill in the following rule:
+            - Set `Where` to `todos.user_id`
+            - Set the operator to `_eq`
+            - Set the value to `X-Hasura-User-Id`
+        - Save
+
+    <Frame caption="Delete permissions">
+      <img src="/images/guides/quickstarts/react-native/todos-delete-permissions.png" />
+    </Frame>
+  </Step>
+
+  <Step title="Configure permissions to enable user file uploads">
+    To enable file uploads by users, set the permissions as follows:
+
+    1. Edit the **files** table permissions
+        1. Navigate to the files table within the [Database tab](https://app.nhost.io/_/_/database/browser/default/storage/files)
+        2. Click on the three dots (...) next to the files table
+        3. Click on **Edit Permissions**
+
+    2. Modify the `Insert` permission for the `user` role:
+          1. Set `Row insert permissions` to `Without any checks`
+          2. Select all columns on `Column insert permissions`
+          4. Save
+
+    <Frame caption="Insert Permissions">
+      <img src="/images/guides/quickstarts/react-native/files-insert-permissions.png" />
+    </Frame>
+
+    3. `Select`
+        - Set `Row select permissions` to `With custom check` and fill in the following rule:
+            - Set `Where` to `files.uploaded_by_user_id`
+            - Set the operator to `_eq`
+            - Set the value to `X-Hasura-User-Id`
+        - Select all columns on `Column select permissions`
+        - Save
+
+    <Frame caption="Select permissions">
+      <img src="/images/guides/quickstarts/react-native/files-select-permissions.png" />
+    </Frame>
+  </Step>
+
+  <Step title="Bootstrap your React Native app">
+    Intialize a new React Native project using the template `@nhost/react-native-template`
+    
+    ```bash Terminal
+    npx react-native init myapp --template @nhost/react-native-template
+    ```
+  </Step>
+
+  <Step title="Connect your React Native app to the Nhost project">
+    Copy your project's `<subdomain>` and `<region>` values available on the dashboard overview
+
+    ```tsx src/root.tsx
+    const nhost = new NhostClient({
+      subdomain: "<subdomain>", // replace the subdomain value e.g. "hjcuuqweqwezolpolrep"
+      region: "<region>", // replace the region value e.g. "eu-central-1"
+      clientStorageType: 'react-native',
+      clientStorage: AsyncStorage,
+    });
+    ```
+  </Step>
+
+  <Step title="Add the GraphQL queries">
+  Create a new file `src/graphql/todos.ts` that will expose the graphql queries needed to `list`, `add` and `delete` To-Do's.
+
+  ```ts src/graphql/todos.ts
+  import {gql} from '@apollo/client';
+
+  export const GET_TODOS = gql`
+    query listTodos {
+      todos(order_by: { created_at: desc }) {
+        id
+        contents
+      }
+    }
+  `;
+
+  export const ADD_TODO = gql`
+    mutation addTodo($contents: String!) {
+      insert_todos_one(object: { contents: $contents }) {
+        id
+        contents
+      }
+    }
+  `;
+
+  export const DELETE_TODO = gql`
+    mutation deleteTodo($id: uuid!) {
+      delete_todos_by_pk(id: $id) {
+        __typename
+      }
+    }
+  `;
+  ```
+  </Step>
+
+  <Step title="Add a form to insert a To-Do">
+    ```tsx src/components/AddTodoForm.tsx
+    import React from 'react';
+    import {useMutation} from '@apollo/client';
+    import Button from '@components/Button';
+    import ControlledInput from '@components/ControlledInput';
+    import {ADD_TODO, GET_TODOS} from '@graphql/todos';
+    import {useForm} from 'react-hook-form';
+    import {StyleSheet, View} from 'react-native';
+
+    interface AddTodoFormValues {
+      contents: string;
+    }
+
+    export default function AddTodoForm() {
+      const {control, handleSubmit, reset} = useForm<AddTodoFormValues>();
+
+      const [addTodo, {loading}] = useMutation(ADD_TODO, {
+        refetchQueries: [{query: GET_TODOS}],
+      });
+
+      const onSubmit = async (values: AddTodoFormValues) => {
+        const {contents} = values;
+        await addTodo({variables: {contents}});
+        reset();
+      };
+
+      return (
+        <View style={styles.wrapper}>
+          <View style={styles.inputWrapper}>
+            <ControlledInput
+              control={control}
+              name="contents"
+              placeholder="New To-Do"
+              autoCapitalize="none"
+              rules={{
+                required: true,
+              }}
+            />
+          </View>
+          <View style={styles.buttonWrapper}>
+            <Button
+              label="Add"
+              onPress={handleSubmit(onSubmit)}
+              disabled={loading}
+              loading={loading}
+            />
+          </View>
+        </View>
+      );
+    }
+
+    const styles = StyleSheet.create({
+      wrapper: {
+        gap: 12,
+        padding: 12,
+        flexDirection: 'row',
+        backgroundColor: 'white',
+      },
+      inputWrapper: {
+        flex: 3,
+      },
+      buttonWrapper: {
+        flex: 1,
+      },
+    });
+    ```
+  </Step>
+
+  <Step title="Add the Todo component and the screen to list all the todos">
+    <CodeGroup>
+      ```tsx src/components/Todo.tsx
+      import React from 'react';
+      import {useMutation} from '@apollo/client';
+      import {DELETE_TODO, GET_TODOS} from '@graphql/todos';
+      import {StyleSheet, Text, View} from 'react-native';
+      import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+      import Button from './Button';
+
+      export interface TodoItem {
+        id: string;
+        contents: string;
+      }
+
+      export default function Todo({todo: {id, contents}}: {todo: TodoItem}) {
+        const [deleteTodo] = useMutation(DELETE_TODO, {
+          variables: {id},
+          refetchQueries: [{query: GET_TODOS}],
+        });
+
+        const handleDeleteTodo = async () => {
+          await deleteTodo();
+        };
+
+        return (
+          <View style={styles.wrapper}>
+            <View style={styles.todoContentWrapper}>
+              <Icon name="check" size={25} />
+              <Text style={styles.todoContent}>{contents}</Text>
+            </View>
+            <View style={styles.buttonWrapper}>
+              <Button
+                label={<Icon name="trash-can-outline" size={20} />}
+                color="#f1f1f1"
+                onPress={handleDeleteTodo}
+              />
+            </View>
+          </View>
+        );
+      }
+
+      const styles = StyleSheet.create({
+        wrapper: {
+          padding: 14,
+          flexDirection: 'row',
+          alignItems: 'center',
+        },
+        todoContentWrapper: {
+          flex: 1,
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 20,
+        },
+        todoContent: {flex: 1},
+        buttonWrapper: {
+          width: 50,
+        },
+      });
+      ```
+
+      ```tsx src/screens/Todos.tsx
+      import React from 'react';
+      import {useQuery} from '@apollo/client';
+      import AddTodoForm from '@components/AddTodoForm';
+      import Todo, {type TodoItem} from '@components/Todo';
+      import {GET_TODOS} from '@graphql/todos';
+      import {useEffect} from 'react';
+      import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native';
+
+      export default function Todos() {
+        const {loading, data, client} = useQuery<{todos: TodoItem[]}>(GET_TODOS);
+
+        const todos = data?.todos || [];
+
+        useEffect(() => {
+          return () => client.stop();
+        }, [client]);
+
+        if (loading) {
+          return (
+            <View style={styles.loadingViewWrapper}>
+              <ActivityIndicator />
+            </View>
+          );
+        }
+
+        const renderTodo = ({item}: {item: TodoItem}) => <Todo todo={item} />;
+        const itemSeperator = () => <View style={styles.separator} />;
+
+        return (
+          <View style={styles.wrapper}>
+            <AddTodoForm />
+            <FlatList
+              data={todos}
+              keyExtractor={item => item.id}
+              renderItem={renderTodo}
+              ItemSeparatorComponent={itemSeperator}
+            />
+          </View>
+        );
+      }
+
+      const styles = StyleSheet.create({
+        loadingViewWrapper: {
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        wrapper: {
+          flex: 1,
+          backgroundColor: 'white',
+        },
+        separator: {
+          height: 1,
+          backgroundColor: '#f1f1f1',
+        },
+      });
+      ```
+      </CodeGroup>
+  </Step>
+
+  <Step title="Reference the new Todos components in the Drawer Navigator">
+    ```tsx src/screens/Main.tsx
+    function DrawerNavigator() {
+      return (
+        <Drawer.Navigator
+          screenOptions={screenOptions}
+          drawerContent={drawerContent}>
+          <Drawer.Screen name="Profile" component={Profile} />
+          {/* Add the Todos component here */}
+          <Drawer.Screen name="Todos" component={Todos} />
+          <Drawer.Screen name="Storage" component={Storage} />
+        </Drawer.Navigator>
+      );
+    }
+    ```
+  </Step>
+
+   <Step title="Run the app on the emulator">
+    <Tabs>
+      <Tab title="Android">
+      1. Open a terminal and start the metro bundler
+        ```bash Terminal
+        cd myapp
+        npm start
+        ```
+      2. Open a new terminal and run the app on Android
+        ```bash Terminal
+        cd myapp
+        npm run android
+        ```
+      </Tab>
+      <Tab title="iOS">
+        1. Make sure the iOS project cocopods are installed
+          ```bash Terminal
+          cd ios
+          pod install
+          ```
+        1. Install the `ios-deploy` CLI
+          ```bash Terminal
+          npm install -g ios-deploy
+          ```
+        2. Start the metro bundler
+          ```bash Terminal
+          cd myapp
+          npm start
+          ```
+        3. Open a new terminal and run the app on Android
+          ```bash Terminal
+          cd myapp
+          npm run ios --interactive
+          ```
+      </Tab>
+    </Tabs>
+  </Step>
+
+  <Step title="Demo">
+    <iframe
+      width="486"
+      height="864"
+      src="https://www.youtube.com/embed/gfzksbce2G4"
+      title="demo react native"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allowfullscreen
+    />
+  </Step>
+</Steps>
+
+
+<Note>
+  ### Next Steps: enabling Google and Apple Sign-In
+
+  The template is preconfigured to allow users to sign in with Google and Apple. To enable this feature, follow these steps:
+
+  1. Navigate to your Nhost project's [Sign-In Methods settings](https://app.nhost.io/_/_/settings/sign-in-methods).
+  2. Enable Google and/or Apple sign-in.
+  3. Fill in the necessary credentials.
+
+  For detailed instructions on generating the required credentials, refer to the following guides:
+  - [Google Sign-In Guide](https://docs.nhost.io/guides/auth/social/sign-in-google)
+  - [Apple Sign-In Guide](https://docs.nhost.io/guides/auth/social/sign-in-apple)
+</Note>

docs/mint.json

@@ -60,7 +60,15 @@
     },
     {
       "group": "Product",
-      "pages": ["product/database", "product/graphql", "product/authentication", "product/storage", "product/functions", "product/run", "product/ai"]
+      "pages": [
+        "product/database",
+        "product/graphql",
+        "product/authentication",
+        "product/storage",
+        "product/functions",
+        "product/run",
+        "product/ai"
+      ]
     },
     {
       "group": "Platform",
@@ -80,7 +88,11 @@
     },
     {
       "group": "Development & CLI",
-      "pages": ["development/cli/overview", "development/cli/getting-started", "development/cli/commands"]
+      "pages": [
+        "development/cli/overview",
+        "development/cli/getting-started",
+        "development/cli/commands"
+      ]
     },
     {
       "group": "API Documentation",
@@ -88,7 +100,12 @@
     },
     {
       "group": "Quickstarts",
-      "pages": ["guides/quickstarts/react", "guides/quickstarts/nextjs", "guides/quickstarts/vue"]
+      "pages": [
+        "guides/quickstarts/react",
+        "guides/quickstarts/nextjs",
+        "guides/quickstarts/vue",
+        "guides/quickstarts/react-native"
+      ]
     },
     {
       "group": "Tutorials",
@@ -96,17 +113,22 @@
     },
     {
       "group": "Database",
-      "pages": ["guides/database/configuring-postgres", "guides/database/access", "guides/database/extensions", "guides/database/performance"]
+      "pages": [
+        "guides/database/configuring-postgres",
+        "guides/database/access",
+        "guides/database/extensions",
+        "guides/database/performance"
+      ]
     },
     {
-        "group": "AI",
-        "pages": [
-            "guides/ai/enabling-service",
-            "guides/ai/local-development",
-            "guides/ai/auto-embeddings",
-            "guides/ai/assistants",
-            "guides/ai/dev-assistant"
-        ]
+      "group": "AI",
+      "pages": [
+        "guides/ai/enabling-service",
+        "guides/ai/local-development",
+        "guides/ai/auto-embeddings",
+        "guides/ai/assistants",
+        "guides/ai/dev-assistant"
+      ]
     },
     {
       "group": "Authentication",
@@ -141,9 +163,9 @@
     {
       "group": "API / Hasura",
       "pages": [
-          "guides/api/configuring-hasura",
-          "guides/api/permissions",
-          "guides/api/advanced_features"
+        "guides/api/configuring-hasura",
+        "guides/api/permissions",
+        "guides/api/advanced_features"
       ]
     },
     {
@@ -152,20 +174,39 @@
     },
     {
       "group": "Functions",
-      "pages": ["guides/functions/overview"]
+      "pages": [
+          "guides/functions/overview",
+          "guides/functions/runtimes"
+      ]
     },
     {
       "group": "Run",
-      "pages": ["guides/run/getting-started", "guides/run/configuration", "guides/run/networking", "guides/run/health-checks", "guides/run/resources", "guides/run/registry", "guides/run/local-development", "guides/run/configuration-overlays", "guides/run/cli-deployments" ]
+      "pages": [
+        "guides/run/getting-started",
+        "guides/run/configuration",
+        "guides/run/networking",
+        "guides/run/health-checks",
+        "guides/run/resources",
+        "guides/run/registry",
+        "guides/run/local-development",
+        "guides/run/configuration-overlays",
+        "guides/run/cli-deployments"
+      ]
     },
     {
       "group": "CLI",
-      "pages": ["guides/cli/local-development", "guides/cli/migrate-config", "guides/cli/multiple-projects", "guides/cli/configuration-overlays", "guides/cli/seeds"]
+      "pages": [
+        "guides/cli/local-development",
+        "guides/cli/migrate-config",
+        "guides/cli/multiple-projects",
+        "guides/cli/configuration-overlays",
+        "guides/cli/seeds",
+        "guides/cli/connect-devices-to-local-nhost-project"
+      ]
     },
     {
       "group": "Backend Services",
       "pages": [
-
         {
           "group": "Authentication",
           "icon": "users",
@@ -258,39 +299,38 @@
       ]
     },
     {
-        "group": "GraphQL",
-        "pages": [
+      "group": "GraphQL",
+      "pages": [
+        {
+          "group": "AI",
+          "pages": [
+            "reference/graphql/ai/overview",
             {
-                "group": "AI",
-                "pages": [
-                    "reference/graphql/ai/overview",
-                    {
-                        "group": "Query",
-                        "pages": [
-                            "reference/graphql/ai/query/assistant",
-                            "reference/graphql/ai/query/assistants",
-                            "reference/graphql/ai/query/session",
-                            "reference/graphql/ai/query/sessionMessages",
-                            "reference/graphql/ai/query/sessions"
-                        ]
-                    },
-                    {
-                        "group": "Mutation",
-                        "pages": [
-                            "reference/graphql/ai/mutation/insertAssistant",
-                            "reference/graphql/ai/mutation/updateAssistant",
-                            "reference/graphql/ai/mutation/deleteAssistant",
-                            "reference/graphql/ai/mutation/startSession",
-                            "reference/graphql/ai/mutation/deleteSession",
-                            "reference/graphql/ai/mutation/sendMessage",
-                            "reference/graphql/ai/mutation/startDevSession",
-                            "reference/graphql/ai/mutation/sendDevMessage"
-                        ]
-                    }
-                ]
+              "group": "Query",
+              "pages": [
+                "reference/graphql/ai/query/assistant",
+                "reference/graphql/ai/query/assistants",
+                "reference/graphql/ai/query/session",
+                "reference/graphql/ai/query/sessionMessages",
+                "reference/graphql/ai/query/sessions"
+              ]
+            },
+            {
+              "group": "Mutation",
+              "pages": [
+                "reference/graphql/ai/mutation/insertAssistant",
+                "reference/graphql/ai/mutation/updateAssistant",
+                "reference/graphql/ai/mutation/deleteAssistant",
+                "reference/graphql/ai/mutation/startSession",
+                "reference/graphql/ai/mutation/deleteSession",
+                "reference/graphql/ai/mutation/sendMessage",
+                "reference/graphql/ai/mutation/startDevSession",
+                "reference/graphql/ai/mutation/sendDevMessage"
+              ]
             }
-
-        ]
+          ]
+        }
+      ]
     },
     {
       "group": "Client Libraries",
@@ -301,7 +341,11 @@
           "pages": [
             {
               "group": "nhost-js",
-              "pages": ["reference/javascript/nhost-js/nhost-client", "reference/javascript/nhost-js/set-role", "reference/javascript/nhost-js/unset-role"]
+              "pages": [
+                "reference/javascript/nhost-js/nhost-client",
+                "reference/javascript/nhost-js/set-role",
+                "reference/javascript/nhost-js/unset-role"
+              ]
             },
             {
               "group": "Auth",
@@ -504,6 +548,11 @@
             "reference/vue/use-sign-in-email-security-key",
             "reference/vue/use-sign-up-email-security-key"
           ]
+        },
+        {
+          "group": "React Native",
+          "icon": "mobile-notch",
+          "pages": ["reference/react-native/support"]
         }
       ]
     }

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/docs",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "private": true,
   "scripts": {
     "start": "mintlify dev"

docs/product/functions.mdx

@@ -24,4 +24,5 @@ Deploying functions is as easy as pushing your code!
 
 <CardGroup cols={2}>
   <Card title="Learn how to use Functions" href="/guides/functions/overview"></Card>
+  <Card title="Supported runtimes" href="/guides/functions/runtimes"></Card>
 </CardGroup>

docs/reference/react-native/support.mdx

@@ -0,0 +1,33 @@
+---
+title: React Native Support
+---
+
+<Note>
+  Since React Native is based on React, you can utilize any hook from our [React
+  SDK](/reference/re*act/nhost-client) to communicate with your Nhost backend project. However,
+  please note that **WebAuthn is currently not supported** in React Native when using these hooks.
+</Note>
+
+# Polyfill Missing Base64 Decode
+
+In an environment like React Native (running JSCore) that does not support `atob` or `btoa`, a polyfill is needed.
+Follow these steps to implement the polyfill and enable full compatibility with the Nhost SDK
+
+1. Install `base-64`:
+
+   ```sh Terminal
+   npm install base-64
+   ```
+
+2. In the `index.js` file, which is the entry point for React Native applications, add the following import and global assignment:
+
+   ```tsx index.js
+   import 'react-native-gesture-handler';
+   import { AppRegistry } from 'react-native';
+   import App from './src/root';
+   import { name as appName } from './app.json';
+   import { decode as atob } from 'base-64'; // Import decode function
+   global.atob = atob; // Assign atob to global for polyfill
+
+   AppRegistry.registerComponent(appName, () => App);
+   ```

examples/quickstarts/nextjs-server-components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost-examples/nextjs-server-components
 
+## 0.4.8
+
+### Patch Changes
+
+- 9c9137f: fix: disable autoRefreshToken when running nhost server side
+
 ## 0.4.7
 
 ### Patch Changes

examples/quickstarts/nextjs-server-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost-examples/nextjs-server-components",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "private": true,
   "scripts": {
     "dev": "next dev",

examples/quickstarts/nextjs-server-components/src/utils/nhost.ts

@@ -13,7 +13,8 @@ export const getNhost = async (request?: NextRequest) => {
   const nhost = new NhostClient({
     subdomain: process.env.NEXT_PUBLIC_NHOST_SUBDOMAIN || 'local',
     region: process.env.NEXT_PUBLIC_NHOST_REGION,
-    start: false
+    start: false,
+    autoRefreshToken: false
   })
 
   const sessionCookieValue = $cookies.get(NHOST_SESSION_KEY)?.value || ''

examples/quickstarts/sveltekit/.npmrc

@@ -1 +1 @@
-hoist-pattern[]=!@nhost/nhost-js
+hoist-pattern=[]

examples/quickstarts/sveltekit/package.json

@@ -8,14 +8,12 @@
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
-    "add-nhost-js": "pnpm add @nhost/nhost-js@2.2.18 --ignore-workspace",
     "install-browsers": "pnpm playwright install && pnpm playwright install-deps",
-    "test": "pnpm add-nhost-js && pnpm install-browsers && pnpm playwright test",
-    "lint": "eslint .",
-    "postinstall": "pnpm add-nhost-js"
+    "test": "pnpm install-browsers && pnpm playwright test",
+    "lint": "eslint ."
   },
   "devDependencies": {
-    "@nhost/nhost-js": "2.2.18",
+    "@nhost/nhost-js": "^3.1.5",
     "@playwright/test": "^1.42.1",
     "@sveltejs/adapter-auto": "^2.1.1",
     "@sveltejs/kit": "^1.30.4",
@@ -42,4 +40,4 @@
     "uuid": "^9.0.1",
     "xstate": "^4.38.3"
   }
-}
+}

examples/quickstarts/sveltekit/pnpm-lock.yaml

@@ -11,8 +11,8 @@ dependencies:
 
 devDependencies:
   '@nhost/nhost-js':
-    specifier: 2.2.18
-    version: 2.2.18(graphql@16.8.1)
+    specifier: ^3.1.5
+    version: 3.1.5(graphql@16.8.1)
 
 packages:
 
@@ -24,62 +24,75 @@ packages:
       graphql: 16.8.1
     dev: true
 
-  /@nhost/graphql-js@0.1.4(graphql@16.8.1):
-    resolution: {integrity: sha512-IPHuGOf4iQrFsxG7Rh5jCCZzPCN9JkvldFww4Fz1lCVi9ZQNEaGaawIP5gBuBHeYIuALeaK1wVYKPc7vJ/euCA==}
+  /@nhost/graphql-js@0.3.0(graphql@16.8.1):
+    resolution: {integrity: sha512-CVYq6wx0VbaYdpUBmfNO/6mZatHB5+YBCqFjWyxhpN1nzHCHEO6rgdL7j0qk31OFE6XAX0z7AQZSXg1Pn63GUw==}
     peerDependencies:
       graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
     dependencies:
       '@graphql-typed-document-node/core': 3.2.0(graphql@16.8.1)
+      base-64: 1.0.0
       graphql: 16.8.1
       isomorphic-unfetch: 3.1.0
+      jwt-decode: 4.0.0
     transitivePeerDependencies:
       - encoding
     dev: true
 
-  /@nhost/hasura-auth-js@2.1.9:
-    resolution: {integrity: sha512-tZl6iArGBIuzaD9ZMCR4NUNxXneIj87c15nG0RWqzqScMAklQ0l9J52CLeE8NDPNFWFuwNLm2FBpnEz4YGJLVw==}
+  /@nhost/hasura-auth-js@2.5.2:
+    resolution: {integrity: sha512-3O4fIJ8xbdCdKGR/1o5jMczxrLLQ2g6BNp6J9m83COVqg9ka5IXoFuM6pgbX5W7WPe9nIQntvHsfeDynXS+/fg==}
     dependencies:
-      '@simplewebauthn/browser': 6.2.2
+      '@simplewebauthn/browser': 9.0.1
       fetch-ponyfill: 7.1.0
       js-cookie: 3.0.5
-      jwt-decode: 3.1.2
-      xstate: 4.38.2
+      jwt-decode: 4.0.0
+      xstate: 4.38.3
     transitivePeerDependencies:
       - encoding
     dev: true
 
-  /@nhost/hasura-storage-js@2.2.5:
-    resolution: {integrity: sha512-IW0IwHlvuo9PxVQTXoQUE8LOpuOnjp+XlqgAKeatg1rY0MjJokcm4Xd0yLInAXfYBkK0r9pdKz7+RW+GDiYQ5g==}
+  /@nhost/hasura-storage-js@2.5.1:
+    resolution: {integrity: sha512-I3rOSa095lcR9BUmNw7dOoXLPWL39WOcrb0paUBFX4h3ltR92ILEHTZ38hN6bZSv157ZdqkIFNL/M2G45SSf7g==}
     dependencies:
       fetch-ponyfill: 7.1.0
       form-data: 4.0.0
-      xstate: 4.38.2
+      graphql: 16.8.1
+      xstate: 4.38.3
     transitivePeerDependencies:
       - encoding
     dev: true
 
-  /@nhost/nhost-js@2.2.18(graphql@16.8.1):
-    resolution: {integrity: sha512-aHn6p75fuG7SEUyB/yfX5TXtVTqwCT88zdN9Mmgo/8hnFOGV1XM7B4fxuGpNQCz18tG6kjM24tWx8EGXAEZ1sw==}
+  /@nhost/nhost-js@3.1.5(graphql@16.8.1):
+    resolution: {integrity: sha512-SgDGQ0APiRPc6RB2Cl1EcvQUsmWFDx32JmgqYBgLKKV9+PBDKc2GJ4GHECbxQi3RoIMXeJ777XJTEK7mGgNL+A==}
     peerDependencies:
       graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
     dependencies:
-      '@nhost/graphql-js': 0.1.4(graphql@16.8.1)
-      '@nhost/hasura-auth-js': 2.1.9
-      '@nhost/hasura-storage-js': 2.2.5
+      '@nhost/graphql-js': 0.3.0(graphql@16.8.1)
+      '@nhost/hasura-auth-js': 2.5.2
+      '@nhost/hasura-storage-js': 2.5.1
       graphql: 16.8.1
       isomorphic-unfetch: 3.1.0
     transitivePeerDependencies:
       - encoding
     dev: true
 
-  /@simplewebauthn/browser@6.2.2:
-    resolution: {integrity: sha512-VUtne7+s6BmW4usnbitjZEI1VNT/PNh6bYg+AI4OMdfpo5z+yAq+6iVAWBJlIUGVk5InetEQvTUp6OefBam8qg==}
+  /@simplewebauthn/browser@9.0.1:
+    resolution: {integrity: sha512-wD2WpbkaEP4170s13/HUxPcAV5y4ZXaKo1TfNklS5zDefPinIgXOpgz1kpEvobAsaLPa2KeH7AKKX/od1mrBJw==}
+    dependencies:
+      '@simplewebauthn/types': 9.0.1
+    dev: true
+
+  /@simplewebauthn/types@9.0.1:
+    resolution: {integrity: sha512-tGSRP1QvsAvsJmnOlRQyw/mvK9gnPtjEc5fg2+m8n+QUa+D7rvrKkOYyfpy42GTs90X3RDOnqJgfHt+qO67/+w==}
     dev: true
 
   /asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
     dev: true
 
+  /base-64@1.0.0:
+    resolution: {integrity: sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==}
+    dev: true
+
   /combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -95,7 +108,7 @@ packages:
   /fetch-ponyfill@7.1.0:
     resolution: {integrity: sha512-FhbbL55dj/qdVO3YNK7ZEkshvj3eQ7EuIGV2I6ic/2YiocvyWv+7jg2s4AyS0wdRU75s3tA8ZxI/xPigb0v5Aw==}
     dependencies:
-      node-fetch: 2.6.12
+      node-fetch: 2.6.13
     transitivePeerDependencies:
       - encoding
     dev: true
@@ -116,7 +129,7 @@ packages:
   /isomorphic-unfetch@3.1.0:
     resolution: {integrity: sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q==}
     dependencies:
-      node-fetch: 2.6.12
+      node-fetch: 2.7.0
       unfetch: 4.2.0
     transitivePeerDependencies:
       - encoding
@@ -127,8 +140,9 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
-  /jwt-decode@3.1.2:
-    resolution: {integrity: sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==}
+  /jwt-decode@4.0.0:
+    resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
+    engines: {node: '>=18'}
     dev: true
 
   /mime-db@1.52.0:
@@ -143,8 +157,20 @@ packages:
       mime-db: 1.52.0
     dev: true
 
-  /node-fetch@2.6.12:
-    resolution: {integrity: sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==}
+  /node-fetch@2.6.13:
+    resolution: {integrity: sha512-StxNAxh15zr77QvvkmveSQ8uCQ4+v5FkvNTj0OESmiHu+VRi/gXArXtkWMElOsOUNLtUEvI4yS+rdtOHZTwlQA==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: true
+
+  /node-fetch@2.7.0:
+    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
     engines: {node: 4.x || >=6.0.0}
     peerDependencies:
       encoding: ^0.1.0
@@ -174,6 +200,6 @@ packages:
       webidl-conversions: 3.0.1
     dev: true
 
-  /xstate@4.38.2:
-    resolution: {integrity: sha512-Fba/DwEPDLneHT3tbJ9F3zafbQXszOlyCJyQqqdzmtlY/cwE2th462KK48yaANf98jHlP6lJvxfNtN0LFKXPQg==}
+  /xstate@4.38.3:
+    resolution: {integrity: sha512-SH7nAaaPQx57dx6qvfcIgqKRXIh4L0A1iYEqim4s1u7c9VoCgzZc+63FY90AKU4ZzOC2cfJzTnpO4zK7fCUzzw==}
     dev: true

examples/react-apollo/nhost/nhost.toml

@@ -163,4 +163,4 @@ version = '0.6.0'
 
 [observability]
 [observability.grafana]
-adminPassword = '{{ secrets.GRAFANA_ADMIN_PASSWORD }}'
+adminPassword = '{{ secrets.GRAFANA_ADMIN_PASSWORD }}'

examples/react_native/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: false,
+  extends: '@react-native',
+};

examples/react_native/.gitignore

@@ -0,0 +1,66 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+ios/.xcode.env.local
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
+
+# Bundle artifact
+*.jsbundle
+
+# Ruby / CocoaPods
+/ios/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# testing
+/coverage

examples/react_native/.npmrc

@@ -0,0 +1,2 @@
+hoist-pattern=false
+shamefully-hoist=false

examples/react_native/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: false,
+  singleQuote: true,
+  trailingComma: 'all',
+};

examples/react_native/.watchmanconfig

@@ -0,0 +1 @@
+{}

examples/react_native/Gemfile

@@ -0,0 +1,9 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Cocoapods 1.15 introduced a bug which break the build. We will remove the upper
+# bound in the template on Cocoapods with next React Native release.
+gem 'cocoapods', '>= 1.13', '< 1.15'
+gem 'activesupport', '>= 6.1.7.5', '< 7.1.0'

examples/react_native/Gemfile.lock

@@ -0,0 +1,105 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    CFPropertyList (3.0.7)
+      base64
+      nkf
+      rexml
+    activesupport (6.1.7.7)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      tzinfo (~> 2.0)
+      zeitwerk (~> 2.3)
+    addressable (2.8.6)
+      public_suffix (>= 2.0.2, < 6.0)
+    algoliasearch (1.27.5)
+      httpclient (~> 2.8, >= 2.8.3)
+      json (>= 1.5.1)
+    atomos (0.1.3)
+    base64 (0.2.0)
+    claide (1.1.0)
+    cocoapods (1.14.3)
+      addressable (~> 2.8)
+      claide (>= 1.0.2, < 2.0)
+      cocoapods-core (= 1.14.3)
+      cocoapods-deintegrate (>= 1.0.3, < 2.0)
+      cocoapods-downloader (>= 2.1, < 3.0)
+      cocoapods-plugins (>= 1.0.0, < 2.0)
+      cocoapods-search (>= 1.0.0, < 2.0)
+      cocoapods-trunk (>= 1.6.0, < 2.0)
+      cocoapods-try (>= 1.1.0, < 2.0)
+      colored2 (~> 3.1)
+      escape (~> 0.0.4)
+      fourflusher (>= 2.3.0, < 3.0)
+      gh_inspector (~> 1.0)
+      molinillo (~> 0.8.0)
+      nap (~> 1.0)
+      ruby-macho (>= 2.3.0, < 3.0)
+      xcodeproj (>= 1.23.0, < 2.0)
+    cocoapods-core (1.14.3)
+      activesupport (>= 5.0, < 8)
+      addressable (~> 2.8)
+      algoliasearch (~> 1.0)
+      concurrent-ruby (~> 1.1)
+      fuzzy_match (~> 2.0.4)
+      nap (~> 1.0)
+      netrc (~> 0.11)
+      public_suffix (~> 4.0)
+      typhoeus (~> 1.0)
+    cocoapods-deintegrate (1.0.5)
+    cocoapods-downloader (2.1)
+    cocoapods-plugins (1.0.0)
+      nap
+    cocoapods-search (1.0.1)
+    cocoapods-trunk (1.6.0)
+      nap (>= 0.8, < 2.0)
+      netrc (~> 0.11)
+    cocoapods-try (1.2.0)
+    colored2 (3.1.2)
+    concurrent-ruby (1.2.3)
+    escape (0.0.4)
+    ethon (0.16.0)
+      ffi (>= 1.15.0)
+    ffi (1.16.3)
+    fourflusher (2.3.1)
+    fuzzy_match (2.0.4)
+    gh_inspector (1.1.3)
+    httpclient (2.8.3)
+    i18n (1.14.4)
+      concurrent-ruby (~> 1.0)
+    json (2.7.2)
+    minitest (5.22.3)
+    molinillo (0.8.0)
+    nanaimo (0.3.0)
+    nap (1.1.0)
+    netrc (0.11.0)
+    nkf (0.2.0)
+    public_suffix (4.0.7)
+    rexml (3.2.6)
+    ruby-macho (2.5.1)
+    typhoeus (1.4.1)
+      ethon (>= 0.9.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    xcodeproj (1.24.0)
+      CFPropertyList (>= 2.3.3, < 4.0)
+      atomos (~> 0.1.3)
+      claide (>= 1.0.2, < 2.0)
+      colored2 (~> 3.1)
+      nanaimo (~> 0.3.0)
+      rexml (~> 3.2.4)
+    zeitwerk (2.6.13)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  activesupport (>= 6.1.7.5, < 7.1.0)
+  cocoapods (>= 1.13, < 1.15)
+
+RUBY VERSION
+   ruby 2.6.10p210
+
+BUNDLED WITH
+   1.17.2

examples/react_native/README.md

@@ -0,0 +1,7 @@
+# Nhost React Native Example
+
+This example project is built using the [Nhost React Native Template](https://www.npmjs.com/package/@nhost/react-native-template). It was created following the steps in the [React Native quickstart guide](https://docs.nhost.io/guides/quickstarts/react-native).
+
+## How to Run
+
+If you are already familiar with [Nhost CLI](https://docs.nhost.io/development/cli/getting-started), you can start the backend by running `nhost up` in the [backend](./backend/) folder. For detailed instructions on how to get the project running, you can head to the [React Native quickstart guide](https://docs.nhost.io/guides/quickstarts/react-native) and skip to the end for specific steps.

examples/react_native/__mocks__/BroadcastChannel.js

@@ -0,0 +1,30 @@
+class MockBroadcastChannel {
+  constructor(channelName) {
+    this.name = channelName;
+    this.listeners = [];
+  }
+
+  postMessage(message) {
+    setTimeout(() => {
+      this.listeners.forEach(listener => listener({data: message}));
+    }, 0);
+  }
+
+  close() {
+    // Mock close behavior
+  }
+
+  addEventListener(event, listener) {
+    if (event === 'message') {
+      this.listeners.push(listener);
+    }
+  }
+
+  removeEventListener(event, listener) {
+    if (event === 'message') {
+      this.listeners = this.listeners.filter(l => l !== listener);
+    }
+  }
+}
+
+module.exports = MockBroadcastChannel;

examples/react_native/__tests__/App.test.tsx

@@ -0,0 +1,18 @@
+import 'react-native';
+import React from 'react';
+import App from 'src/root';
+import {MockedProvider} from '@apollo/client/testing';
+
+// Note: import explicitly to use the types shipped with jest.
+import {it} from '@jest/globals';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  renderer.create(
+    <MockedProvider mocks={[]} addTypename={false}>
+      <App />
+    </MockedProvider>,
+  );
+});

examples/react_native/android/app/build.gradle

@@ -0,0 +1,120 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+    /* Folders */
+    //   The root of your project, i.e. where "package.json" lives. Default is '..'
+    // root = file("../")
+    //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
+    // reactNativeDir = file("../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
+    // codegenDir = file("../node_modules/@react-native/codegen")
+    //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
+    // cliFile = file("../node_modules/react-native/cli.js")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "prodDebug"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+    //
+    //   The command to run when bundling. By default is 'bundle'
+    // bundleCommand = "ram-bundle"
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+}
+
+/**
+ * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
+ */
+def enableProguardInReleaseBuilds = false
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'org.webkit:android-jsc:+'
+
+android {
+    ndkVersion rootProject.ext.ndkVersion
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
+
+    namespace "com.react_native"
+    defaultConfig {
+        applicationId "com.react_native"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+    implementation("com.facebook.react:flipper-integration")
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}
+
+apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

examples/react_native/android/app/proguard-rules.pro

@@ -0,0 +1,10 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:

examples/react_native/android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <application
+        android:usesCleartextTraffic="true"
+        tools:targetApi="28"
+        tools:ignore="GoogleAppIndexingWarning"/>
+</manifest>

examples/react_native/android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,17 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  <uses-permission android:name="android.permission.INTERNET"/>
+  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme">
+    <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:exported="true">
+      <intent-filter android:autoVerify="true">
+        <action android:name="android.intent.action.MAIN" />
+        <category android:name="android.intent.category.LAUNCHER" />
+      </intent-filter>
+      <intent-filter>
+        <action android:name="android.intent.action.VIEW"/>
+        <category android:name="android.intent.category.DEFAULT"/>
+        <category android:name="android.intent.category.BROWSABLE"/>
+        <data android:scheme="myapp"/>
+      </intent-filter>
+    </activity>
+  </application>
+</manifest>

examples/react_native/android/app/src/main/java/com/react_native/MainActivity.kt

@@ -0,0 +1,27 @@
+package com.react_native
+
+import android.os.Bundle;
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+class MainActivity : ReactActivity() {
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  override fun getMainComponentName(): String = "react_native"
+
+  override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(null)
+  }
+
+  /**
+   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
+   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
+   */
+  override fun createReactActivityDelegate(): ReactActivityDelegate =
+      DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+}