chore: update versions (#3099)

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/hasura-auth-js@2.9.0

### Minor Changes

- b944d05: feat: introduce `initWithSession` to initialize auth client
with an existing session

## @nhost/hasura-storage-js@2.6.0

### Minor Changes

- 4148964: fix: stack overflow on storage client getHeaders method call

## @nhost/nextjs@2.2.0

### Minor Changes

- 46fc520: chore: add support to next.js 15, update quickstart template
commands in docs
-   29d27e1: chore: update `next` to v14.2.22 to fix vulnerabilities

### Patch Changes

-   @nhost/react@3.8.1

## @nhost/apollo@8.0.2

### Patch Changes

-   @nhost/nhost-js@3.2.2

## @nhost/react-apollo@15.0.1

### Patch Changes

-   @nhost/apollo@8.0.2
-   @nhost/react@3.8.1

## @nhost/react-urql@12.0.1

### Patch Changes

-   @nhost/react@3.8.1

## @nhost/nhost-js@3.2.2

### Patch Changes

-   Updated dependencies [b944d05]
-   Updated dependencies [4148964]
    -   @nhost/hasura-auth-js@2.9.0
    -   @nhost/hasura-storage-js@2.6.0

## @nhost/react@3.8.1

### Patch Changes

-   @nhost/nhost-js@3.2.2

## @nhost/vue@2.8.1

### Patch Changes

-   @nhost/nhost-js@3.2.2

## @nhost/dashboard@2.13.0

### Minor Changes

- 21e90da: chore: remove restrictions on SMTP sender so My Name
[name@acme.com](mailto:name@acme.com) can be added
- 865dd93: fix: duplicate Run placeholders when there is an error in the
backend
- 6902a36: fix: can remove resources if postgres capacity is higher than
10
-   a535aa3: fix: fetch user roles locally in auth section
-   0c50816: fix: allow decimal numbers in database row insert
- aea6d18: chore: add warning when pausing a project about losing Run
services persistent volume data
- d3b4fc3: feat: allow to change postgres settings if project is paused
-   29d27e1: chore: update `next` to v14.2.22 to fix vulnerabilities
-   c9dca09: feat: add reset password form
-   b3bcacb: fix: paused project banner cannot read null project name

### Patch Changes

-   Updated dependencies [46fc520]
-   Updated dependencies [29d27e1]
    -   @nhost/nextjs@2.2.0
    -   @nhost/react-apollo@15.0.1

## @nhost/docs@2.25.0

### Minor Changes

- 46fc520: chore: add support to next.js 15, update quickstart template
commands in docs
-   cdf6776: fix: update links to create new project in dashboard

## @nhost-examples/nextjs@0.4.0

### Minor Changes

-   29d27e1: chore: update `next` to v14.2.22 to fix vulnerabilities

### Patch Changes

-   Updated dependencies [46fc520]
-   Updated dependencies [29d27e1]
    -   @nhost/nextjs@2.2.0
    -   @nhost/react@3.8.1
    -   @nhost/react-apollo@15.0.1

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

### Minor Changes

- b944d05: chore: simplify Nhost client initialization with session and
remove xstate dependency
-   29d27e1: chore: update `next` to v14.2.22 to fix vulnerabilities

### Patch Changes

-   @nhost/nhost-js@3.2.2

## @nhost-examples/cli@0.3.15

### Patch Changes

-   @nhost/nhost-js@3.2.2

## @nhost-examples/codegen-react-apollo@0.4.16

### Patch Changes

-   @nhost/react@3.8.1
-   @nhost/react-apollo@15.0.1

## @nhost-examples/codegen-react-query@0.4.16

### Patch Changes

-   @nhost/react@3.8.1

## @nhost-examples/codegen-react-urql@0.3.16

### Patch Changes

-   @nhost/react@3.8.1
-   @nhost/react-urql@12.0.1

## @nhost-examples/multi-tenant-one-to-many@2.2.16

### Patch Changes

-   @nhost/nhost-js@3.2.2

## @nhost-examples/node-storage@0.2.15

### Patch Changes

-   @nhost/nhost-js@3.2.2

## @nhost-examples/react-apollo@1.1.2

### Patch Changes

-   @nhost/react@3.8.1
-   @nhost/react-apollo@15.0.1

## @nhost-examples/react-gqty@1.2.16

### Patch Changes

-   @nhost/react@3.8.1

## @nhost-examples/react-native@0.1.1

### Patch Changes

-   @nhost/react@3.8.1
-   @nhost/react-apollo@15.0.1

## @nhost-examples/vue-apollo@0.7.2

### Patch Changes

-   @nhost/nhost-js@3.2.2
-   @nhost/apollo@8.0.2
-   @nhost/vue@2.8.1

## @nhost-examples/vue-quickstart@0.2.16

### Patch Changes

-   @nhost/apollo@8.0.2
-   @nhost/vue@2.8.1

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

.github/actions/install-dependencies/action.yaml

@@ -14,22 +14,22 @@ runs:
   steps:
     - uses: pnpm/action-setup@v4
       with:
-        version: 8.10.5
+        version: 9.15.0
         run_install: false
     - name: Get pnpm cache directory
       id: pnpm-cache-dir
       shell: bash
       run: echo "dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-    - uses: actions/cache@v3
+    - uses: actions/cache@v4
       id: pnpm-cache
       with:
         path: ${{ steps.pnpm-cache-dir.outputs.dir }}
         key: ${{ runner.os }}-node-${{ hashFiles('pnpm-lock.yaml') }}
         restore-keys: ${{ runner.os }}-node-
-    - name: Use Node.js v18
+    - name: Use Node.js v20
       uses: actions/setup-node@v3
       with:
-        node-version: 18
+        node-version: 20
     - shell: bash
       name: Install packages
       run: pnpm install --frozen-lockfile

.github/workflows/changesets.yaml

@@ -65,29 +65,13 @@ jobs:
 
   publish-vercel:
     name: Publish to Vercel
-    runs-on: ubuntu-latest
     needs:
       - test
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - name: Install Node and dependencies
-        uses: ./.github/actions/install-dependencies
-        with:
-          TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
-          TURBO_TEAM: ${{ env.TURBO_TEAM }}
-      - name: Setup Vercel CLI
-        run: pnpm add -g vercel
-      - name: Trigger a Vercel deployment
-        env:
-          VERCEL_ORG_ID: ${{ secrets.DASHBOARD_VERCEL_TEAM_ID }}
-          VERCEL_PROJECT_ID: ${{ secrets.DASHBOARD_VERCEL_PROJECT_ID }}
-        run: |
-          vercel pull --environment=production --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
-          vercel build --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
-          vercel deploy --prebuilt --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+    uses: ./.github/workflows/deploy-dashboard.yaml
+    with:
+      git_ref: ${{ github.ref_name }}
+      environment: production
+    secrets: inherit
 
   publish-docker:
     name: Publish to Docker Hub

.github/workflows/ci.yaml

@@ -18,10 +18,13 @@ env:
   TURBO_TEAM: nhost
   NEXT_PUBLIC_ENV: dev
   NEXT_TELEMETRY_DISABLED: 1
-  NEXT_PUBLIC_NHOST_BACKEND_URL: http://localhost:1337
   NHOST_TEST_DASHBOARD_URL: ${{ vars.NHOST_TEST_DASHBOARD_URL }}
   NHOST_TEST_WORKSPACE_NAME: ${{ vars.NHOST_TEST_WORKSPACE_NAME }}
   NHOST_TEST_PROJECT_NAME: ${{ vars.NHOST_TEST_PROJECT_NAME }}
+  NHOST_TEST_ORGANIZATION_NAME: ${{ vars.NHOST_TEST_ORGANIZATION_NAME }}
+  NHOST_TEST_ORGANIZATION_SLUG: ${{ vars.NHOST_TEST_ORGANIZATION_SLUG }}
+  NHOST_TEST_PERSONAL_ORG_SLUG: ${{ vars.NHOST_TEST_PERSONAL_ORG_SLUG }}
+  NHOST_TEST_PROJECT_SUBDOMAIN: ${{ vars.NHOST_TEST_PROJECT_SUBDOMAIN }}
   NHOST_PRO_TEST_PROJECT_NAME: ${{ vars.NHOST_PRO_TEST_PROJECT_NAME }}
   NHOST_TEST_USER_EMAIL: ${{ secrets.NHOST_TEST_USER_EMAIL }}
   NHOST_TEST_USER_PASSWORD: ${{ secrets.NHOST_TEST_USER_PASSWORD }}

.github/workflows/dashboard.yaml

@@ -8,7 +8,6 @@ env:
   TURBO_TEAM: nhost
   NEXT_PUBLIC_ENV: dev
   NEXT_TELEMETRY_DISABLED: 1
-  NEXT_PUBLIC_NHOST_BACKEND_URL: http://localhost:1337
 
 jobs:
   build:

.github/workflows/deploy-dashboard.yaml

@@ -0,0 +1,58 @@
+name: 'dashboard: release form'
+
+on:
+  workflow_dispatch:
+    inputs:
+      git_ref:
+        type: string
+        description: 'Branch, tag, or commit SHA'
+        required: true
+
+      environment:
+        type: choice
+        description: 'Deployment environment'
+        required: true
+        default: staging
+        options:
+          - staging
+          - production
+
+  workflow_call:
+    inputs:
+      git_ref:
+        required: true
+        type: string
+      environment:
+        required: true
+        type: string
+
+jobs:
+  publish-vercel:
+    name: Publish to Vercel
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.git_ref }}
+          fetch-depth: 0
+
+      - name: Install Node and dependencies
+        uses: ./.github/actions/install-dependencies
+        with:
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
+      - name: Setup Vercel CLI
+        run: pnpm add -g vercel
+
+      - name: Trigger Vercel deployment
+        env:
+          VERCEL_ORG_ID: ${{ secrets.DASHBOARD_VERCEL_TEAM_ID }}
+          VERCEL_PROJECT_ID: ${{ inputs.environment == 'production' && secrets.DASHBOARD_VERCEL_PROJECT_ID || secrets.DASHBOARD_STAGING_VERCEL_PROJECT_ID }}
+        run: |
+          echo "Deploying to: ${{ inputs.environment }}..."
+          vercel pull --environment=production --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+          vercel build --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+          vercel deploy --prebuilt --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}

.github/workflows/gen_ai_review.yaml

@@ -12,12 +12,11 @@ jobs:
     permissions:
       issues: write
       pull-requests: write
-      contents: write
     name: Run pr agent on every pull request, respond to user comments
     steps:
       - name: PR Agent action step
         id: pragent
-        uses: Codium-ai/pr-agent@v0.24
+        uses: Codium-ai/pr-agent@v0.26
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           OPENAI_KEY: ${{ secrets.OPENAI_API_KEY }}

README.md

@@ -15,6 +15,8 @@
 <a href="https://twitter.com/nhost">Twitter</a>
 <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
 <a href="https://nhost.io/discord">Discord</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="https://gurubase.io/g/nhost">Ask Nhost Guru (third party, unofficial)</a>
 <br />
 
   <hr />
@@ -148,4 +150,4 @@ Here are some ways of contributing to making Nhost better:
   <p align="center">
     <img width="720" src="https://contrib.rocks/image?repo=nhost/nhost" alt="A table of avatars from the project's contributors" />
   </p>
-</a>
+</a>

changelog_summary.sh

@@ -0,0 +1,17 @@
+#/usr/bin/env bash
+PREV_MONTH=$(date -d "1 month ago" +%Y-%m)
+
+echo "prev: $PREV_MONTH"
+
+files=$(git log --since="$PREV_MONTH-01" --until="$PREV_MONTH-31" --name-only -- '**/CHANGELOG.md' | grep CHANGE | sort -u)
+
+echo "files: $files"
+
+echo "Below you can find the latest release for each individual package released during this month:"
+echo
+
+for file in $files; do
+  name=$(grep '^# ' $file | awk '{ print substr($0, 4) }')
+  last_release=$(grep '^## ' $file | awk '{ print substr($0, 4) }' | head -n 1)
+  echo "@$name: $last_release [CHANGELOG.md](https://github.com/nhost/nhost/blob/main/$file)"
+done

dashboard/.storybook/main.js

@@ -42,7 +42,6 @@ module.exports = {
   env: (config) => ({
     ...config,
     NEXT_PUBLIC_ENV: 'dev',
-    NEXT_PUBLIC_NHOST_BACKEND_URL: 'http://localhost:1337',
     NEXT_PUBLIC_NHOST_PLATFORM: 'false',
   }),
 };

dashboard/CHANGELOG.md

@@ -1,5 +1,68 @@
 # @nhost/dashboard
 
+## 2.13.0
+
+### Minor Changes
+
+- 21e90da: chore: remove restrictions on SMTP sender so My Name <name@acme.com> can be added
+- 865dd93: fix: duplicate Run placeholders when there is an error in the backend
+- 6902a36: fix: can remove resources if postgres capacity is higher than 10
+- a535aa3: fix: fetch user roles locally in auth section
+- 0c50816: fix: allow decimal numbers in database row insert
+- aea6d18: chore: add warning when pausing a project about losing Run services persistent volume data
+- d3b4fc3: feat: allow to change postgres settings if project is paused
+- 29d27e1: chore: update `next` to v14.2.22 to fix vulnerabilities
+- c9dca09: feat: add reset password form
+- b3bcacb: fix: paused project banner cannot read null project name
+
+### Patch Changes
+
+- Updated dependencies [46fc520]
+- Updated dependencies [29d27e1]
+  - @nhost/nextjs@2.2.0
+  - @nhost/react-apollo@15.0.1
+
+## 2.12.0
+
+### Minor Changes
+
+- eb95562: fix: show all available permission variables in permission dropdown select
+
+### Patch Changes
+
+- 8b5c4a0: chore: cleanup layout and add disable duplicate atom key checking in development mode
+
+## 2.11.3
+
+### Patch Changes
+
+- 714dffa: fix: improve project polling logic and unify usage across components
+
+## 2.11.2
+
+### Patch Changes
+
+- 6a34f89: fix: improve project polling logic and unify usage across components
+
+## 2.11.1
+
+### Patch Changes
+
+- 0f6ce52: fix: consolidate useProject hook and fix jwt expired error
+
+## 2.11.0
+
+### Minor Changes
+
+- cea3ef5: Feat: add org and project placeholders
+
+## 2.10.0
+
+### Minor Changes
+
+- 86ecf27: feat: add support for additional metrics in overview
+- 21708be: feat: dashboard: add support for storage buckets to AI assistants
+
 ## 1.30.0
 
 ### Minor Changes

dashboard/Dockerfile

@@ -1,13 +1,13 @@
-FROM node:18-alpine AS pruner
+FROM node:20-alpine AS pruner
 RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
 
-RUN yarn global add turbo@1.11.3
+RUN yarn global add turbo@2.2.3
 COPY . .
 RUN turbo prune --scope="@nhost/dashboard" --docker
 
-FROM node:18-alpine AS builder
+FROM node:20-alpine AS builder
 ARG TURBO_TOKEN
 ARG TURBO_TEAM
 
@@ -15,22 +15,22 @@ RUN apk add --no-cache libc6-compat python3 make g++
 RUN apk update
 WORKDIR /app
 
-ENV NEXT_TELEMETRY_DISABLED 1
-ENV NEXT_PUBLIC_ENV dev
-ENV NEXT_PUBLIC_NHOST_PLATFORM false
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV NEXT_PUBLIC_ENV=dev
+ENV NEXT_PUBLIC_NHOST_PLATFORM=false
 
 # placeholders for URLs, will be replaced on runtime by entrypoint script
-ENV NEXT_PUBLIC_NHOST_ADMIN_SECRET __NEXT_PUBLIC_NHOST_ADMIN_SECRET__
-ENV NEXT_PUBLIC_NHOST_AUTH_URL __NEXT_PUBLIC_NHOST_AUTH_URL__
-ENV NEXT_PUBLIC_NHOST_FUNCTIONS_URL __NEXT_PUBLIC_NHOST_FUNCTIONS_URL__
-ENV NEXT_PUBLIC_NHOST_GRAPHQL_URL __NEXT_PUBLIC_NHOST_GRAPHQL_URL__
-ENV NEXT_PUBLIC_NHOST_STORAGE_URL __NEXT_PUBLIC_NHOST_STORAGE_URL__
-ENV NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL __NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL__
-ENV NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL __NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__
-ENV NEXT_PUBLIC_NHOST_HASURA_API_URL __NEXT_PUBLIC_NHOST_HASURA_API_URL__
-ENV NEXT_PUBLIC_NHOST_CONFIGSERVER_URL __NEXT_PUBLIC_NHOST_CONFIGSERVER_URL__
+ENV NEXT_PUBLIC_NHOST_ADMIN_SECRET=__NEXT_PUBLIC_NHOST_ADMIN_SECRET__
+ENV NEXT_PUBLIC_NHOST_AUTH_URL=__NEXT_PUBLIC_NHOST_AUTH_URL__
+ENV NEXT_PUBLIC_NHOST_FUNCTIONS_URL=__NEXT_PUBLIC_NHOST_FUNCTIONS_URL__
+ENV NEXT_PUBLIC_NHOST_GRAPHQL_URL=__NEXT_PUBLIC_NHOST_GRAPHQL_URL__
+ENV NEXT_PUBLIC_NHOST_STORAGE_URL=__NEXT_PUBLIC_NHOST_STORAGE_URL__
+ENV NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL=__NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL__
+ENV NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL=__NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__
+ENV NEXT_PUBLIC_NHOST_HASURA_API_URL=__NEXT_PUBLIC_NHOST_HASURA_API_URL__
+ENV NEXT_PUBLIC_NHOST_CONFIGSERVER_URL=__NEXT_PUBLIC_NHOST_CONFIGSERVER_URL__
 
-RUN yarn global add pnpm@8.10.5
+RUN yarn global add pnpm@9.15.0
 COPY .gitignore .gitignore
 COPY --from=pruner /app/out/json/ .
 COPY --from=pruner /app/out/pnpm-*.yaml .
@@ -41,7 +41,7 @@ COPY turbo.json turbo.json
 COPY config/ config/
 RUN pnpm build:dashboard
 
-FROM node:18-alpine AS runner
+FROM node:20-alpine AS runner
 WORKDIR /app
 
 RUN addgroup --system --gid 1001 nodejs
@@ -58,4 +58,4 @@ COPY --from=builder --chown=nextjs:nodejs /app/dashboard/.next/standalone/app ./
 COPY --from=builder --chown=nextjs:nodejs /app/dashboard/.next/static ./dashboard/.next/static
 
 ENTRYPOINT ["./docker-entrypoint.sh"]
-CMD ["node", "dashboard/server.js"]
+CMD ["node", "dashboard/server.js"]

dashboard/README.md

@@ -100,7 +100,6 @@ pnpm storybook --port 6007
 
 | Name                                    | Description                                                                                 |
 | --------------------------------------- | ------------------------------------------------------------------------------------------- |
-| `NEXT_PUBLIC_NHOST_BACKEND_URL`         | Backend URL. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.                   |
 | `NEXT_PUBLIC_STRIPE_PK`                 | Stripe public key. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.             |
 | `NEXT_PUBLIC_GITHUB_APP_INSTALL_URL`    | URL of the GitHub application. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`. |
 | `NEXT_PUBLIC_ANALYTICS_WRITE_KEY`       | Analytics key. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.                 |

dashboard/e2e/ai/assistants.test.ts

@@ -1,9 +1,5 @@
-import {
-  PRO_TEST_PROJECT_NAME,
-  PRO_TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { navigateToProject } from '@/e2e/utils';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
 
@@ -16,17 +12,15 @@ test.beforeAll(async ({ browser }) => {
 test.beforeEach(async () => {
   await page.goto('/');
 
-  await openProject({
+  await navigateToProject({
     page,
-    projectName: PRO_TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: PRO_TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /ai/i })
-    .click();
+  const AIRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/ai/assistants`;
+  await page.goto(AIRoute);
+  await page.waitForURL(AIRoute);
 });
 
 test.afterAll(async () => {

dashboard/e2e/ai/auto-embeddings.test.ts

@@ -1,9 +1,5 @@
-import {
-  PRO_TEST_PROJECT_NAME,
-  PRO_TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { navigateToProject } from '@/e2e/utils';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
 
@@ -16,17 +12,15 @@ test.beforeAll(async ({ browser }) => {
 test.beforeEach(async () => {
   await page.goto('/');
 
-  await openProject({
+  await navigateToProject({
     page,
-    projectName: PRO_TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: PRO_TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /ai/i })
-    .click();
+  const AIRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/ai/auto-embeddings`;
+  await page.goto(AIRoute);
+  await page.waitForURL(AIRoute);
 });
 
 test.afterAll(async () => {

dashboard/e2e/auth/ban-user.test.ts

@@ -1,30 +1,12 @@
-import {
-  PRO_TEST_PROJECT_NAME,
-  PRO_TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { createUser, generateTestEmail } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
 import test, { expect } from '@playwright/test';
 
 test('should be able to ban and unban a user', async ({ page }) => {
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: PRO_TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: PRO_TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /auth/i })
-    .click();
-
-  await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/users`,
-  );
+  const authUrl = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/users`;
+  await page.goto(authUrl);
+  await page.waitForURL(authUrl, { waitUntil: 'networkidle' });
 
   const email = generateTestEmail();
   const password = faker.internet.password();

dashboard/e2e/auth/create-user.test.ts

@@ -1,9 +1,5 @@
-import {
-  PRO_TEST_PROJECT_NAME,
-  PRO_TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { createUser, generateTestEmail } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
 import test, { expect } from '@playwright/test';
@@ -15,23 +11,9 @@ test.beforeAll(async ({ browser }) => {
 });
 
 test.beforeEach(async () => {
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: PRO_TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: PRO_TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /auth/i })
-    .click();
-
-  await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/users`,
-  );
+  const authUrl = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/users`;
+  await page.goto(authUrl);
+  await page.waitForURL(authUrl, { waitUntil: 'networkidle' });
 });
 
 test.afterAll(async () => {

dashboard/e2e/auth/delete-user.test.ts

@@ -1,9 +1,5 @@
-import {
-  PRO_TEST_PROJECT_NAME,
-  PRO_TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { createUser, generateTestEmail } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
 import test, { expect } from '@playwright/test';
@@ -15,23 +11,9 @@ test.beforeAll(async ({ browser }) => {
 });
 
 test.beforeEach(async () => {
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: PRO_TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: PRO_TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /auth/i })
-    .click();
-
-  await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/users`,
-  );
+  const authUrl = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/users`;
+  await page.goto(authUrl);
+  await page.waitForURL(authUrl, { waitUntil: 'networkidle' });
 });
 
 test.afterAll(async () => {

dashboard/e2e/auth/verify-user.test.ts

@@ -1,9 +1,5 @@
-import {
-  PRO_TEST_PROJECT_NAME,
-  PRO_TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { createUser, generateTestEmail } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
@@ -15,23 +11,9 @@ test.beforeAll(async ({ browser }) => {
 });
 
 test.beforeEach(async () => {
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: PRO_TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: PRO_TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /auth/i })
-    .click();
-
-  await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/users`,
-  );
+  const authUrl = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/users`;
+  await page.goto(authUrl);
+  await page.waitForURL(authUrl, { waitUntil: 'networkidle' });
 });
 
 test.afterAll(async () => {

dashboard/e2e/database/create-table.test.ts

@@ -1,9 +1,5 @@
-import {
-  PRO_TEST_PROJECT_NAME,
-  PRO_TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { openProject, prepareTable } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { navigateToProject, prepareTable } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
@@ -18,17 +14,15 @@ test.beforeAll(async ({ browser }) => {
 test.beforeEach(async () => {
   await page.goto('/');
 
-  await openProject({
+  await navigateToProject({
     page,
-    projectName: PRO_TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: PRO_TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /database/i })
-    .click();
+  const databaseRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default`;
+  await page.goto(databaseRoute);
+  await page.waitForURL(databaseRoute);
 });
 
 test.afterAll(async () => {
@@ -55,7 +49,7 @@ test('should create a simple table', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -84,7 +78,7 @@ test('should create a table with unique constraints', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -113,7 +107,7 @@ test('should create a table with nullable columns', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -146,7 +140,7 @@ test('should create a table with an identity column', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -174,7 +168,7 @@ test('should create table with foreign key constraint', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${firstTableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${firstTableName}`,
   );
 
   await page.getByRole('button', { name: /new table/i }).click();
@@ -219,7 +213,7 @@ test('should create table with foreign key constraint', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${secondTableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${secondTableName}`,
   );
 
   await expect(
@@ -247,7 +241,7 @@ test('should not be able to create a table with a name that already exists', asy
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await page.getByRole('button', { name: /new table/i }).click();

dashboard/e2e/database/delete-table.test.ts

@@ -1,9 +1,5 @@
-import {
-  PRO_TEST_PROJECT_NAME,
-  PRO_TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { deleteTable, openProject, prepareTable } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { deleteTable, navigateToProject, prepareTable } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
@@ -18,17 +14,15 @@ test.beforeAll(async ({ browser }) => {
 test.beforeEach(async () => {
   await page.goto('/');
 
-  await openProject({
+  await navigateToProject({
     page,
-    projectName: PRO_TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: PRO_TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /database/i })
-    .click();
+  const databaseRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default`;
+  await page.goto(databaseRoute);
+  await page.waitForURL(databaseRoute);
 });
 
 test.afterAll(async () => {
@@ -53,7 +47,7 @@ test('should delete a table', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await deleteTable({
@@ -63,7 +57,7 @@ test('should delete a table', async () => {
 
   // navigate to next URL
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/**`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/**`,
   );
 
   await expect(
@@ -91,7 +85,7 @@ test('should not be able to delete a table if other tables have foreign keys ref
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${firstTableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${firstTableName}`,
   );
 
   await page.getByRole('button', { name: /new table/i }).click();
@@ -138,7 +132,7 @@ test('should not be able to delete a table if other tables have foreign keys ref
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${secondTableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${secondTableName}`,
   );
 
   await expect(

dashboard/e2e/env.ts

@@ -1,5 +1,3 @@
-import slugify from 'slugify';
-
 /**
  * URL of the dashboard to test against.
  */
@@ -8,15 +6,12 @@ export const TEST_DASHBOARD_URL = process.env.NHOST_TEST_DASHBOARD_URL;
 /**
  * Name of the workspace to test against.
  */
-export const TEST_WORKSPACE_NAME = process.env.NHOST_TEST_WORKSPACE_NAME;
+export const TEST_ORGANIZATION_NAME = process.env.NHOST_TEST_ORGANIZATION_NAME;
 
 /**
- * Slugified name of the workspace to test against.
+ * Slug of the organization to test against.
  */
-export const TEST_WORKSPACE_SLUG = slugify(TEST_WORKSPACE_NAME, {
-  lower: true,
-  strict: true,
-});
+export const TEST_ORGANIZATION_SLUG = process.env.NHOST_TEST_ORGANIZATION_SLUG;
 
 /**
  * Name of the project to test against.
@@ -24,25 +19,9 @@ export const TEST_WORKSPACE_SLUG = slugify(TEST_WORKSPACE_NAME, {
 export const TEST_PROJECT_NAME = process.env.NHOST_TEST_PROJECT_NAME;
 
 /**
- * Name of the pro test project to test against.
+ * Subdomain of the project to test against.
  */
-export const PRO_TEST_PROJECT_NAME = process.env.NHOST_PRO_TEST_PROJECT_NAME;
-
-/**
- * Slugified name of the project to test against.
- */
-export const TEST_PROJECT_SLUG = slugify(TEST_PROJECT_NAME, {
-  lower: true,
-  strict: true,
-});
-
-/**
- * Slugified name of the pro project to test against.
- */
-export const PRO_TEST_PROJECT_SLUG = slugify(PRO_TEST_PROJECT_NAME, {
-  lower: true,
-  strict: true,
-});
+export const TEST_PROJECT_SUBDOMAIN = process.env.NHOST_TEST_PROJECT_SUBDOMAIN;
 
 /**
  * Hasura admin secret of the test project to use.
@@ -59,3 +38,5 @@ export const TEST_USER_EMAIL = process.env.NHOST_TEST_USER_EMAIL;
  * Password of the test account to use.
  */
 export const TEST_USER_PASSWORD = process.env.NHOST_TEST_USER_PASSWORD;
+
+export const TEST_PERSONAL_ORG_SLUG = process.env.NHOST_TEST_PERSONAL_ORG_SLUG;

dashboard/e2e/overview/overview.test.ts

@@ -1,12 +1,7 @@
-import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_NAME,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
+import { navigateToProject } from '../utils';
 
 let page: Page;
 
@@ -14,11 +9,11 @@ test.beforeAll(async ({ browser }) => {
   page = await browser.newPage();
 
   await page.goto('/');
-  await openProject({
+
+  await navigateToProject({
     page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 });
 
@@ -26,60 +21,34 @@ test.afterAll(async () => {
   await page.close();
 });
 
-test('should show a sidebar with menu items', async () => {
-  const navLocator = page.getByRole('navigation', { name: /main navigation/i });
+test('should show the navtree with all links visible', async () => {
+  const navLocator = page.getByLabel('Navigation Tree');
   await expect(navLocator).toBeVisible();
-  await expect(navLocator.getByRole('list').getByRole('listitem')).toHaveCount(
-    13,
-  );
-  await expect(
-    navLocator.getByRole('link', { name: /overview/i }),
-  ).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /database/i }),
-  ).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /graphql/i }),
-  ).toBeVisible();
-  await expect(navLocator.getByRole('link', { name: /hasura/i })).toBeVisible();
-  await expect(navLocator.getByRole('link', { name: /auth/i })).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /storage/i }),
-  ).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /deployments/i }),
-  ).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /backups/i }),
-  ).toBeVisible();
-  await expect(navLocator.getByRole('link', { name: /logs/i })).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /metrics/i }),
-  ).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /settings/i }),
-  ).toBeVisible();
-});
 
-test('should show a header with a logo, the workspace name, and the project name', async () => {
-  await expect(
-    page.getByRole('banner').getByRole('link', { name: TEST_WORKSPACE_NAME }),
-  ).toBeVisible();
+  const links = [
+    'Nhost Automation Test Project',
+    'Overview',
+    'Database',
+    'GraphQL',
+    'Hasura',
+    'Auth',
+    'Storage',
+    'Run',
+    'AI',
+    'Deployments',
+    'Backups',
+    'Logs',
+    'Metrics',
+    'Settings',
+  ];
 
-  await expect(
-    page.getByRole('banner').getByRole('link', { name: TEST_PROJECT_NAME }),
-  ).toBeVisible();
-});
-
-test("should show the project's name, the Upgrade button and the Settings button", async () => {
-  await expect(
-    page.getByRole('heading', { name: TEST_PROJECT_NAME }),
-  ).toBeVisible();
-  await expect(page.getByText(/starter/i)).toBeVisible();
-  await expect(page.getByRole('button', { name: /upgrade/i })).toBeVisible();
-  await expect(
-    page.getByRole('main').getByRole('link', { name: /settings/i }),
-  ).toBeVisible();
+  for (const linkName of links) {
+    const link =
+      linkName === 'Settings'
+        ? page.getByRole('link', { name: linkName }).first()
+        : page.getByRole('link', { name: linkName });
+    await expect(link).toBeVisible();
+  }
 });
 
 test("should show the project's region and subdomain", async () => {
@@ -96,27 +65,3 @@ test('should not have a GitHub repository connected', async () => {
     page.getByRole('button', { name: /connect to github/i }).first(),
   ).toBeVisible();
 });
-
-test('should show metrics', async () => {
-  await expect(page.getByText(/cpu usage seconds\d+/i)).toBeVisible();
-  await expect(page.getByText(/total requests\d+/i)).toBeVisible();
-  await expect(page.getByText(/function invocations\d+/i)).toBeVisible();
-  await expect(
-    page.getByText(/egress volume\d+(\.\d+)? [a-zA-Z]+/i),
-  ).toBeVisible();
-  await expect(page.getByText(/logs\d+(\.\d+)? [a-zA-Z]+/i)).toBeVisible();
-});
-
-test('should show proper limits for the free project', async () => {
-  await expect(
-    page.getByText(/database\d+(\.\d+)? [a-zA-Z]+ of \d+(\.\d+)? [a-zA-Z]+/i),
-  ).toBeVisible();
-
-  await expect(
-    page.getByText(/storage\d+(\.\d+)? [a-zA-Z]+ of \d+(\.\d+)? [a-zA-Z]+/i),
-  ).toBeVisible();
-
-  await expect(page.getByText(/users[0-9]+ of [0-9]+/i)).toBeVisible();
-
-  await expect(page.getByText(/functions[0-9]+ of [0-9]+/i)).toBeVisible();
-});

dashboard/e2e/run/run.test.ts

@@ -1,11 +1,7 @@
-import {
-  PRO_TEST_PROJECT_NAME,
-  PRO_TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
+import { navigateToProject } from '../utils';
 
 let page: Page;
 
@@ -16,17 +12,15 @@ test.beforeAll(async ({ browser }) => {
 test.beforeEach(async () => {
   await page.goto('/');
 
-  await openProject({
+  await navigateToProject({
     page,
-    projectName: PRO_TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: PRO_TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /run/i })
-    .click();
+  const runRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/run`;
+  await page.goto(runRoute);
+  await page.waitForURL(runRoute);
 });
 
 test.afterAll(async () => {
@@ -39,6 +33,10 @@ test('should create and delete a run service', async () => {
   await page.getByPlaceholder(/service name/i).click();
   await page.getByPlaceholder(/service name/i).fill('test');
 
+  await page.getByText('Nhost registry').click();
+  await page.getByPlaceholder('Replicas').click();
+  await page.getByPlaceholder('Replicas').fill('0');
+
   await page.getByRole('button', { name: /create/i }).click();
 
   await expect(
@@ -47,12 +45,6 @@ test('should create and delete a run service', async () => {
 
   await page.getByRole('button', { name: /confirm/i }).click();
 
-  await expect(
-    page.getByRole('heading', { name: /service details/i }),
-  ).toBeVisible();
-
-  await page.getByRole('button', { name: /ok/i }).click();
-
   await expect(page.getByRole('heading', { name: /test/i })).toBeVisible();
 
   await page.getByLabel(/more options/i).click();

dashboard/e2e/setup/auth.setup.ts

@@ -1,5 +1,6 @@
 import {
   TEST_DASHBOARD_URL,
+  TEST_PERSONAL_ORG_SLUG,
   TEST_USER_EMAIL,
   TEST_USER_PASSWORD,
 } from '@/e2e/env';
@@ -15,6 +16,9 @@ setup('authenticate user', async ({ page }) => {
   await page.getByLabel('Password').fill(TEST_USER_PASSWORD);
   await page.getByRole('button', { name: /sign in/i }).click();
 
-  await page.waitForURL(TEST_DASHBOARD_URL);
+  await page.waitForURL(
+    `${TEST_DASHBOARD_URL}/orgs/${TEST_PERSONAL_ORG_SLUG}/projects`,
+    { waitUntil: 'networkidle' },
+  );
   await page.context().storageState({ path: 'e2e/.auth/user.json' });
 });

dashboard/e2e/utils.ts

@@ -5,24 +5,27 @@ import type { Page } from '@playwright/test';
  * Open a project by navigating to the project's overview page.
  *
  * @param page - The Playwright page object.
- * @param workspaceSlug - The slug of the workspace that contains the project.
- * @param projectSlug - The slug of the project to open.
- * @param projectName - The name of the project to open.
+ * @param orgSlug - The slug of the organization that contains the project.
+ * @param projectSubdomain - The subdomain of the project to open.
  * @returns A promise that resolves when the project is opened.
  */
-export async function openProject({
+export async function navigateToProject({
   page,
-  projectName,
-  workspaceSlug,
-  projectSlug,
+  orgSlug,
+  projectSubdomain,
 }: {
   page: Page;
-  workspaceSlug: string;
-  projectSlug: string;
-  projectName: string;
+  orgSlug: string;
+  projectSubdomain: string;
 }) {
-  await page.getByRole('link', { name: projectName }).click();
-  await page.waitForURL(`/${workspaceSlug}/${projectSlug}`);
+  const projectUrl = `/orgs/${orgSlug}/projects/${projectSubdomain}`;
+
+  try {
+    await page.goto(projectUrl, { waitUntil: 'networkidle' });
+    await page.waitForURL(projectUrl, { timeout: 10000 });
+  } catch (error) {
+    console.error(`Failed to navigate to project URL: ${projectUrl}`, error);
+  }
 }
 
 /**

dashboard/global-teardown.ts

@@ -1,11 +1,10 @@
 import {
   TEST_DASHBOARD_URL,
+  TEST_ORGANIZATION_SLUG,
   TEST_PROJECT_ADMIN_SECRET,
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
+  TEST_PROJECT_SUBDOMAIN,
 } from '@/e2e/env';
-import { openProject } from '@/e2e/utils';
+import { navigateToProject } from '@/e2e/utils';
 import { chromium } from '@playwright/test';
 
 async function globalTeardown() {
@@ -18,13 +17,10 @@ async function globalTeardown() {
 
   const page = await context.newPage();
 
-  await page.goto('/');
-
-  await openProject({
+  await navigateToProject({
     page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 
   const pagePromise = context.waitForEvent('page');

dashboard/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@nhost/dashboard",
-  "version": "2.2.0",
+  "version": "2.13.0",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "next dev",
+    "dev": "RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false next dev",
     "build": "next build --no-lint",
     "analyze": "ANALYZE=true pnpm build --no-lint",
     "start": "next start",
@@ -84,7 +84,7 @@
     "just-kebab-case": "^4.2.0",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.416.0",
-    "next": "^14.2.10",
+    "next": "^14.2.22",
     "next-nprogress-bar": "^2.3.13",
     "next-seo": "^6.5.0",
     "next-themes": "^0.3.0",
@@ -128,7 +128,7 @@
     "@graphql-codegen/typescript-operations": "^3.0.4",
     "@graphql-codegen/typescript-react-apollo": "^3.3.7",
     "@next/bundle-analyzer": "^12.3.4",
-    "@playwright/test": "1.41.0",
+    "@playwright/test": "1.47.0",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-interactions": "^6.5.16",

dashboard/playwright.config.ts

@@ -6,7 +6,7 @@ dotenv.config({ path: path.resolve(__dirname, '.env.test') });
 
 export default defineConfig({
   testDir: './e2e',
-  timeout: 30 * 1000,
+  timeout: 40 * 1000,
   expect: {
     timeout: 5000,
   },
@@ -20,6 +20,9 @@ export default defineConfig({
     actionTimeout: 0,
     trace: 'on-first-retry',
     baseURL: process.env.NHOST_TEST_DASHBOARD_URL,
+    launchOptions: {
+      slowMo: 500,
+    },
   },
   projects: [
     {

dashboard/src/components/common/SelectOrg/SelectOrg.tsx

@@ -0,0 +1,137 @@
+
+import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Input } from '@/components/ui/v2/Input';
+import { List } from '@/components/ui/v2/List';
+import { ListItem } from '@/components/ui/v2/ListItem';
+import { Text } from '@/components/ui/v2/Text';
+import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
+import { } from '@/utils/__generated__/graphql';
+import { Divider } from '@mui/material';
+import debounce from 'lodash.debounce';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import type { ChangeEvent } from 'react';
+import { Fragment, useEffect, useMemo, useState } from 'react';
+
+export default function SelectOrganizationAndProject() {
+  const { orgs, loading } = useOrgs();
+  const router = useRouter();
+
+  const organizations = orgs.map((org) => ({
+    name: org.name,
+    value: `/orgs/${org.slug}`,
+  }));
+
+  const [filter, setFilter] = useState('');
+
+  const handleFilterChange = useMemo(
+    () =>
+      debounce((event: ChangeEvent<HTMLInputElement>) => {
+        setFilter(event.target.value);
+      }, 200),
+    [],
+  );
+
+  useEffect(() => () => handleFilterChange.cancel(), [handleFilterChange]);
+
+  const goToOrgPage = async (org: {
+    name: string;
+    value: string;
+  }) => {
+    const { slug } = router.query;
+    await router.push({
+      pathname: `${org.value}/${
+        (() => {
+          if (!slug) {
+            return '';
+          }
+          return Array.isArray(slug) ? slug.join('/') : slug;
+        })()
+      }`,
+    });
+  };
+
+  const orgsToDisplay = filter
+    ? organizations.filter((org) =>
+        org.name.toLowerCase().includes(filter.toLowerCase()),
+      )
+    : organizations;
+
+  if (loading) {
+    return (
+      <div className="flex w-full justify-center">
+        <ActivityIndicator
+          delay={500}
+          label="Loading organizations..."
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-start w-full h-full px-5 py-4 mx-auto bg-background">
+      <div className="mx-auto flex h-full w-full max-w-[760px] flex-col gap-4 py-6 sm:py-14">
+        <Text variant="h2" component="h1" className="">
+          Select an Organization
+        </Text>
+
+        <div>
+          <div className="mb-2 flex w-full">
+            <Input
+              placeholder="Search..."
+              onChange={handleFilterChange}
+              fullWidth
+              autoFocus
+            />
+          </div>
+          <RetryableErrorBoundary>
+            {orgsToDisplay.length === 0 ? (
+              <Box className="h-import py-2">
+                <Text variant="subtitle2">No results found.</Text>
+              </Box>
+            ) : (
+              <List className="h-import overflow-y-auto">
+                {orgsToDisplay.map((org, index) => (
+                  <Fragment key={org.value}>
+                    <ListItem.Root
+                      className="grid grid-flow-col justify-start gap-2  py-2.5"
+                      secondaryAction={
+                        <Button
+                          variant="borderless"
+                          color="primary"
+                          onClick={() => goToOrgPage(org)}
+                        >
+                          Select
+                        </Button>
+                      }
+                    >
+                      <ListItem.Avatar>
+                        <span className="inline-block h-6 w-6 overflow-hidden rounded-md">
+                          <Image
+                            src="/logos/new.svg"
+                            alt="Nhost Logo"
+                            width={24}
+                            height={24}
+                          />
+                        </span>
+                      </ListItem.Avatar>
+                      <ListItem.Text
+                        primary={org.name}
+                        secondary={`${org.name} / ${org.name}`}
+                      />
+                    </ListItem.Root>
+
+                    {index < orgs.length - 1 && <Divider component="li" />}
+                  </Fragment>
+                ))}
+              </List>
+            )}
+          </RetryableErrorBoundary>
+        </div>
+      </div>
+    </div>
+  );
+}

dashboard/src/components/common/SelectOrg/index.ts

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

dashboard/src/components/common/SelectOrgAndProject/SelectOrgAndProject.tsx

@@ -0,0 +1,141 @@
+
+import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Input } from '@/components/ui/v2/Input';
+import { List } from '@/components/ui/v2/List';
+import { ListItem } from '@/components/ui/v2/ListItem';
+import { Text } from '@/components/ui/v2/Text';
+import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
+import { } from '@/utils/__generated__/graphql';
+import { Divider } from '@mui/material';
+import debounce from 'lodash.debounce';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import type { ChangeEvent } from 'react';
+import { Fragment, useEffect, useMemo, useState } from 'react';
+
+export default function SelectOrganizationAndProject() {
+  const { orgs, loading } = useOrgs();
+  const router = useRouter();
+
+  const projects = orgs.flatMap((org) =>
+    org.apps.map((app) => ({
+      organizationName: org.name,
+      projectName: app.name,
+      value: `/orgs/${org.slug}/projects/${app.subdomain}`,
+    })),
+  );
+
+  const [filter, setFilter] = useState('');
+
+  const handleFilterChange = useMemo(
+    () =>
+      debounce((event: ChangeEvent<HTMLInputElement>) => {
+        setFilter(event.target.value);
+      }, 200),
+    [],
+  );
+
+  useEffect(() => () => handleFilterChange.cancel(), [handleFilterChange]);
+
+  const goToProjectPage = async (project: {
+    organizationName: string;
+    projectName: string;
+    value: string;
+  }) => {
+    const { slug } = router.query;
+    await router.push({
+      pathname: `${project.value}/${
+        (() => {
+          if (!slug) {
+            return '';
+          }
+          return Array.isArray(slug) ? slug.join('/') : slug;
+        })()
+      }`,
+    });
+  };
+
+  const projectsToDisplay = filter
+    ? projects.filter((project) =>
+        project.projectName.toLowerCase().includes(filter.toLowerCase()),
+      )
+    : projects;
+
+  if (loading) {
+    return (
+      <div className="flex w-full justify-center">
+        <ActivityIndicator
+          delay={500}
+          label="Loading organizations and projects..."
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-start w-full h-full px-5 py-4 mx-auto bg-background">
+      <div className="mx-auto flex h-full w-full max-w-[760px] flex-col gap-4 py-6 sm:py-14">
+        <Text variant="h2" component="h1" className="">
+          Select a Project
+        </Text>
+
+        <div>
+          <div className="mb-2 flex w-full">
+            <Input
+              placeholder="Search..."
+              onChange={handleFilterChange}
+              fullWidth
+              autoFocus
+            />
+          </div>
+          <RetryableErrorBoundary>
+            {projectsToDisplay.length === 0 ? (
+              <Box className="h-import py-2">
+                <Text variant="subtitle2">No results found.</Text>
+              </Box>
+            ) : (
+              <List className="h-import overflow-y-auto">
+                {projectsToDisplay.map((project, index) => (
+                  <Fragment key={project.value}>
+                    <ListItem.Root
+                      className="grid grid-flow-col justify-start gap-2  py-2.5"
+                      secondaryAction={
+                        <Button
+                          variant="borderless"
+                          color="primary"
+                          onClick={() => goToProjectPage(project)}
+                        >
+                          Select
+                        </Button>
+                      }
+                    >
+                      <ListItem.Avatar>
+                        <span className="inline-block h-6 w-6 overflow-hidden rounded-md">
+                          <Image
+                            src="/logos/new.svg"
+                            alt="Nhost Logo"
+                            width={24}
+                            height={24}
+                          />
+                        </span>
+                      </ListItem.Avatar>
+                      <ListItem.Text
+                        primary={project.projectName}
+                        secondary={`${project.organizationName} / ${project.projectName}`}
+                      />
+                    </ListItem.Root>
+
+                    {index < projects.length - 1 && <Divider component="li" />}
+                  </Fragment>
+                ))}
+              </List>
+            )}
+          </RetryableErrorBoundary>
+        </div>
+      </div>
+    </div>
+  );
+}

dashboard/src/components/common/SelectOrgAndProject/index.ts

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

dashboard/src/components/layout/AISidebar/AISidebar.tsx

@@ -20,8 +20,7 @@ interface AINavLinkProps extends ListItemButtonProps {
    */
   href: string;
   /**
-   * Determines whether or not the link should be active if it's href exactly
-   * matches the current route.
+   * Determines whether or not the link should be active if href matches the current route.
    *
    * @default true
    */
@@ -87,7 +86,7 @@ export default function AISidebar({ className, ...props }: AISidebarProps) {
     <>
       <Backdrop
         open={expanded}
-        className="absolute top-0 left-0 bottom-0 right-0 z-[34] md:hidden"
+        className="absolute bottom-0 left-0 right-0 top-0 z-[34] md:hidden"
         role="button"
         tabIndex={-1}
         onClick={() => setExpanded(false)}
@@ -104,7 +103,7 @@ export default function AISidebar({ className, ...props }: AISidebarProps) {
       <Box
         component="aside"
         className={twMerge(
-          'absolute top-0 z-[35] h-full w-full overflow-auto border-r-1 px-2 pt-2 pb-17 motion-safe:transition-transform md:relative md:z-0 md:h-full md:py-2.5 md:transition-none',
+          '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',
           expanded ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
           className,
         )}
@@ -119,6 +118,7 @@ export default function AISidebar({ className, ...props }: AISidebarProps) {
             >
               Auto-Embeddings
             </AINavLink>
+
             <AINavLink href="/assistants" exact={false} onClick={handleSelect}>
               Assistants
             </AINavLink>

dashboard/src/components/layout/AuthenticatedLayout/AuthenticatedLayout.tsx

@@ -21,22 +21,9 @@ import { useNotFoundRedirect } from '@/features/projects/common/hooks/useNotFoun
 import { cn } from '@/lib/utils';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import {
-  useEffect,
-  useState,
-  type DetailedHTMLProps,
-  type HTMLProps,
-} from 'react';
+import { useEffect, useState } from 'react';
 
-export interface AuthenticatedLayoutProps extends BaseLayoutProps {
-  /**
-   * Props passed to the internal content container.
-   */
-  contentContainerProps?: DetailedHTMLProps<
-    HTMLProps<HTMLDivElement>,
-    HTMLDivElement
-  >;
-}
+export interface AuthenticatedLayoutProps extends BaseLayoutProps {}
 
 export default function AuthenticatedLayout({
   children,

dashboard/src/components/layout/Header/Header.tsx

@@ -5,8 +5,8 @@ import { LocalAccountMenu } from '@/components/layout/LocalAccountMenu';
 import { MobileNav } from '@/components/layout/MobileNav';
 import { Logo } from '@/components/presentational/Logo';
 import { Box } from '@/components/ui/v2/Box';
-import { Button } from '@/components/ui/v2/Button';
 import { GraphiteIcon } from '@/components/ui/v2/icons/GraphiteIcon';
+import { Button } from '@/components/ui/v3/button';
 import { DevAssistant as WorkspaceProjectDevAssistant } from '@/features/ai/DevAssistant';
 import { AnnouncementsTray } from '@/features/orgs/components/members/components/AnnouncementsTray';
 import { NotificationsTray } from '@/features/orgs/components/members/components/NotificationsTray';
@@ -74,8 +74,12 @@ export default function Header({ className, ...props }: HeaderProps) {
       <BreadcrumbNav />
 
       <div className="hidden grid-flow-col items-center gap-1 sm:grid">
-        <Button className="rounded-full" onClick={openDevAssistant}>
-          <GraphiteIcon className="h-4 w-4" />
+        <Button
+          variant="outline"
+          className="h-8 w-8"
+          onClick={openDevAssistant}
+        >
+          <GraphiteIcon className="h-4" />
         </Button>
 
         <NotificationsTray />

dashboard/src/components/layout/Header/OrgsComboBox.tsx

@@ -105,7 +105,7 @@ export default function OrgsComboBox() {
         <Button
           size="sm"
           variant="ghost"
-          className="w-full justify-between gap-2 bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
+          className="justify-between w-full gap-2 bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
         >
           {selectedItem ? (
             <div className="flex flex-row items-center justify-center">
@@ -115,7 +115,7 @@ export default function OrgsComboBox() {
           ) : (
             'Select organization / workspace'
           )}
-          <ChevronsUpDown className="h-5 w-5 text-muted-foreground" />
+          <ChevronsUpDown className="w-5 h-5 text-muted-foreground" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="p-0" side="bottom" align="start">
@@ -129,7 +129,7 @@ export default function OrgsComboBox() {
                   keywords={[option.label]}
                   key={option.value}
                   value={option.value}
-                  className="flex items-center justify-between bg-background text-foreground dark:hover:bg-muted"
+                  className="flex items-center text-foreground dark:hover:bg-muted"
                   onSelect={() => {
                     setSelectedItem(option);
                     setOpen(false);
@@ -144,17 +144,15 @@ export default function OrgsComboBox() {
                     }
                   }}
                 >
-                  <div className="flex items-center font-normal">
-                    <Check
-                      className={cn(
-                        'mr-2 h-4 w-4',
-                        selectedItem?.value === option.value
-                          ? 'opacity-100'
-                          : 'opacity-0',
-                      )}
-                    />
-                    <span className="max-w-52 truncate">{option.label}</span>
-                  </div>
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      selectedItem?.value === option.value
+                        ? 'opacity-100'
+                        : 'opacity-0',
+                    )}
+                  />
+                  <span className="w-full truncate">{option.label}</span>
                   {renderBadge(option.plan)}
                 </CommandItem>
               ))}
@@ -170,7 +168,7 @@ export default function OrgsComboBox() {
                       keywords={[option.label]}
                       key={option.value}
                       value={option.value}
-                      className="flex items-center justify-between bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
+                      className="flex items-center text-foreground dark:hover:bg-muted"
                       onSelect={() => {
                         setSelectedItem(option);
                         setOpen(false);
@@ -185,19 +183,15 @@ export default function OrgsComboBox() {
                         }
                       }}
                     >
-                      <div className="flex items-center">
-                        <Check
-                          className={cn(
-                            'mr-2 h-4 w-4',
-                            selectedItem?.value === option.value
-                              ? 'opacity-100'
-                              : 'opacity-0',
-                          )}
-                        />
-                        <span className="max-w-52 truncate">
-                          {option.label}
-                        </span>
-                      </div>
+                      <Check
+                        className={cn(
+                          'mr-2 h-4 w-4',
+                          selectedItem?.value === option.value
+                            ? 'opacity-100'
+                            : 'opacity-0',
+                        )}
+                      />
+                      <span className="w-full truncate">{option.label}</span>
                       {renderBadge(option.plan)}
                     </CommandItem>
                   ))}

dashboard/src/components/layout/Header/ProjectSettingsPagesComboBox.tsx

@@ -38,6 +38,11 @@ const projectSettingsPages = [
     slug: 'authentication',
     route: 'authentication',
   },
+  {
+    name: 'JWT',
+    slug: 'jwt',
+    route: 'jwt',
+  },
   {
     name: 'Sign-In methods',
     slug: 'sign-in-methods',
@@ -68,6 +73,7 @@ const projectSettingsPages = [
     route: 'rate-limiting',
   },
   { name: 'AI', slug: 'ai', route: 'ai' },
+  { name: 'Observability', slug: 'metrics', route: 'metrics' },
   { name: 'Configuration Editor', slug: 'editor', route: 'editor' },
 ].map((item) => ({
   label: item.name,
@@ -125,7 +131,7 @@ export default function ProjectSettingsPagesComboBox() {
           ) : (
             <>Select a page</>
           )}
-          <ChevronsUpDown className="w-5 h-5 text-muted-foreground" />
+          <ChevronsUpDown className="h-5 w-5 text-muted-foreground" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="p-0" side="bottom" align="start">
@@ -155,7 +161,7 @@ export default function ProjectSettingsPagesComboBox() {
                     )}
                   />
                   <div className="flex flex-row items-center gap-2">
-                    <span className="truncate max-w-52">{option.label}</span>
+                    <span className="max-w-52 truncate">{option.label}</span>
                   </div>
                 </CommandItem>
               ))}

dashboard/src/components/layout/Header/ProjectsComboBox.tsx

@@ -13,6 +13,8 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/v3/popover';
+import { ProjectStatusIndicator } from '@/features/orgs/components/common/ProjectStatusIndicator';
+import { useAppState } from '@/features/orgs/projects/common/hooks/useAppState';
 import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
 import { cn } from '@/lib/utils';
 import { Box, Check, ChevronsUpDown } from 'lucide-react';
@@ -30,11 +32,20 @@ export default function ProjectsComboBox() {
     push,
   } = useRouter();
 
+  const { state: appState } = useAppState();
   const { currentOrg: { slug: orgSlug, apps = [] } = {} } = useOrgs();
-  const selectedProjectFromUrl = apps.find(
-    (item) => item.subdomain === appSubdomain,
-  );
+
   const [selectedProject, setSelectedProject] = useState<Option | null>(null);
+  const [open, setOpen] = useState(false);
+
+  const options: Option[] = apps.map((app) => ({
+    label: app.name,
+    value: app.subdomain,
+  }));
+
+  const selectedProjectFromUrl = apps.find(
+    (app) => app.subdomain === appSubdomain,
+  );
 
   useEffect(() => {
     if (selectedProjectFromUrl) {
@@ -45,68 +56,64 @@ export default function ProjectsComboBox() {
     }
   }, [selectedProjectFromUrl]);
 
-  const options: Option[] = apps.map((app) => ({
-    label: app.name,
-    value: app.subdomain,
-  }));
-
-  const [open, setOpen] = useState(false);
+  const handleProjectSelect = (option: Option) => {
+    setSelectedProject(option);
+    setOpen(false);
+    push(`/orgs/${orgSlug}/projects/${option.value}`);
+  };
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="justify-start gap-2 bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
-        >
-          {selectedProject ? (
-            <div className="flex flex-row items-center justify-center gap-1">
-              <Box className="h-4 w-4" />
-              {selectedProject.label}
-              <ProjectStatus />
-            </div>
-          ) : (
-            <>Select a project</>
-          )}
-          <ChevronsUpDown className="h-5 w-5 text-muted-foreground" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="p-0" side="bottom" align="start">
-        <Command>
-          <CommandInput placeholder="Select a project..." />
-          <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup>
-              {options.map((option) => (
-                <CommandItem
-                  keywords={[option.label]}
-                  key={option.value}
-                  value={option.value}
-                  onSelect={() => {
-                    setSelectedProject(option);
-                    setOpen(false);
-                    push(`/orgs/${orgSlug}/projects/${option.value}`);
-                  }}
-                >
-                  <Check
-                    className={cn(
-                      'mr-2 h-4 w-4',
-                      selectedProject?.value === option.value
-                        ? 'opacity-100'
-                        : 'opacity-0',
-                    )}
-                  />
-                  <div className="flex flex-row items-center gap-1">
-                    <Box className="h-4 w-4" />
-                    <span className="max-w-52 truncate">{option.label}</span>
-                  </div>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
+    <div className="flex items-center gap-1">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="justify-start gap-2 bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
+          >
+            {selectedProject ? (
+              <div className="flex items-center gap-2">
+                <ProjectStatusIndicator status={appState} />
+                {selectedProject.label}
+                <ProjectStatus />
+              </div>
+            ) : (
+              <>Select a project</>
+            )}
+            <ChevronsUpDown className="h-5 w-5 text-muted-foreground" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="p-0" side="bottom" align="start">
+          <Command>
+            <CommandInput placeholder="Select a project..." />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandGroup>
+                {options.map((option) => (
+                  <CommandItem
+                    key={option.value}
+                    value={option.value}
+                    onSelect={() => handleProjectSelect(option)}
+                  >
+                    <Check
+                      className={cn(
+                        'mr-2 h-4 w-4',
+                        selectedProject?.value === option.value
+                          ? 'opacity-100'
+                          : 'opacity-0',
+                      )}
+                    />
+                    <div className="flex items-center gap-1">
+                      <Box className="h-4 w-4" />
+                      <span className="max-w-52 truncate">{option.label}</span>
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
   );
 }

dashboard/src/components/layout/MainNav/NavTree.tsx

@@ -30,73 +30,73 @@ import { useTreeNavState } from './TreeNavStateContext';
 const projectPages = [
   {
     name: 'Overview',
-    icon: <HomeIcon className="w-4 h-4" />,
+    icon: <HomeIcon className="h-4 w-4" />,
     route: '',
     slug: 'overview',
   },
   {
     name: 'Database',
-    icon: <DatabaseIcon className="w-4 h-4" />,
+    icon: <DatabaseIcon className="h-4 w-4" />,
     route: 'database/browser/default',
     slug: 'database',
   },
   {
     name: 'GraphQL',
-    icon: <GraphQLIcon className="w-4 h-4" />,
+    icon: <GraphQLIcon className="h-4 w-4" />,
     route: 'graphql',
     slug: 'graphql',
   },
   {
     name: 'Hasura',
-    icon: <HasuraIcon className="w-4 h-4" />,
+    icon: <HasuraIcon className="h-4 w-4" />,
     route: 'hasura',
     slug: 'hasura',
   },
   {
     name: 'Auth',
-    icon: <UserIcon className="w-4 h-4" />,
+    icon: <UserIcon className="h-4 w-4" />,
     route: 'users',
     slug: 'users',
   },
   {
     name: 'Storage',
-    icon: <StorageIcon className="w-4 h-4" />,
+    icon: <StorageIcon className="h-4 w-4" />,
     route: 'storage',
     slug: 'storage',
   },
   {
     name: 'Run',
-    icon: <ServicesIcon className="w-4 h-4" />,
+    icon: <ServicesIcon className="h-4 w-4" />,
     route: 'run',
     slug: 'run',
   },
   {
     name: 'AI',
-    icon: <AIIcon className="w-4 h-4" />,
+    icon: <AIIcon className="h-4 w-4" />,
     route: 'ai/auto-embeddings',
     slug: 'ai',
   },
   {
     name: 'Deployments',
-    icon: <RocketIcon className="w-4 h-4" />,
+    icon: <RocketIcon className="h-4 w-4" />,
     route: 'deployments',
     slug: 'deployments',
   },
   {
     name: 'Backups',
-    icon: <CloudIcon className="w-4 h-4" />,
+    icon: <CloudIcon className="h-4 w-4" />,
     route: 'backups',
     slug: 'backups',
   },
   {
     name: 'Logs',
-    icon: <FileTextIcon className="w-4 h-4" />,
+    icon: <FileTextIcon className="h-4 w-4" />,
     route: 'logs',
     slug: 'logs',
   },
   {
     name: 'Metrics',
-    icon: <GaugeIcon className="w-4 h-4" />,
+    icon: <GaugeIcon className="h-4 w-4" />,
     route: 'metrics',
     slug: 'metrics',
   },
@@ -121,6 +121,11 @@ const projectSettingsPages = [
     slug: 'authentication',
     route: 'authentication',
   },
+  {
+    name: 'JWT',
+    slug: 'jwt',
+    route: 'jwt',
+  },
   {
     name: 'Sign-In methods',
     slug: 'sign-in-methods',
@@ -151,6 +156,7 @@ const projectSettingsPages = [
     route: 'rate-limiting',
   },
   { name: 'AI', slug: 'ai', route: 'ai' },
+  { name: 'Observability', slug: 'metrics', route: 'metrics' },
   { name: 'Configuration Editor', slug: 'editor', route: 'editor' },
 ];
 
@@ -203,7 +209,7 @@ const createOrganization = (org: Org, isPlatform: boolean) => {
     data: {
       name: 'New project',
       slug: 'new',
-      icon: <Plus className="w-4 h-4 mr-1 font-bold" strokeWidth={3} />,
+      icon: <Plus className="mr-1 h-4 w-4 font-bold" strokeWidth={3} />,
       targetUrl: `/orgs/${org.slug}/projects/new`,
       disabled: !isPlatform,
     },
@@ -218,7 +224,7 @@ const createOrganization = (org: Org, isPlatform: boolean) => {
       data: {
         name: app.name,
         slug: app.subdomain,
-        icon: <Box className="w-4 h-4" />,
+        icon: <Box className="h-4 w-4" />,
         targetUrl: `/orgs/${org.slug}/projects/${app.subdomain}`,
       },
       children: projectPages.map(
@@ -397,9 +403,9 @@ export default function NavTree() {
             className="h-8 px-1"
           >
             {context.isExpanded ? (
-              <ChevronDown className="w-4 h-4 font-bold" strokeWidth={3} />
+              <ChevronDown className="h-4 w-4 font-bold" strokeWidth={3} />
             ) : (
-              <ChevronRight className="w-4 h-4" strokeWidth={3} />
+              <ChevronRight className="h-4 w-4" strokeWidth={3} />
             )}
           </Button>
         );
@@ -491,9 +497,9 @@ export default function NavTree() {
         }
 
         return (
-          <div className="flex flex-row w-full">
+          <div className="flex w-full flex-row">
             <div className="flex justify-center px-[12px] pb-3">
-              <div className="w-0 h-full border-r border-dashed" />
+              <div className="h-full w-0 border-r border-dashed" />
             </div>
             <ul {...containerProps} className="w-full">
               {children}

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

@@ -17,18 +17,18 @@ export default function SettingsLayout({ children }: SettingsLayoutProps) {
   return (
     <Box
       sx={{ backgroundColor: 'background.default' }}
-      className="flex w-full flex-auto flex-col overflow-y-auto overflow-x-hidden"
+      className="flex flex-col flex-auto w-full overflow-x-hidden overflow-y-auto"
     >
       <Box
         sx={{ backgroundColor: 'background.default' }}
-        className="flex h-full flex-col"
+        className="flex flex-col h-full"
       >
         <RetryableErrorBoundary>
           <div className="flex flex-col space-y-2">
             {hasGitRepo && (
               <Alert
                 severity="warning"
-                className="grid grid-flow-row place-content-center gap-2"
+                className="grid grid-flow-row gap-2 place-content-center"
               >
                 <Text color="warning" className="text-sm">
                   As you have a connected repository, make sure to synchronize
@@ -52,9 +52,9 @@ export default function SettingsLayout({ children }: SettingsLayoutProps) {
                     target="_blank"
                     rel="noopener noreferrer"
                     className="underline"
-                    href="https://docs.nhost.io/cli/overlays"
+                    href="https://docs.nhost.io/guides/cli/configuration-overlays#configuration-overlays"
                   >
-                    docs.nhost.io/cli/overlays
+                    Configuration Overlays
                   </a>{' '}
                   for guidance.
                 </Text>

dashboard/src/components/layout/UnauthenticatedLayout/UnauthenticatedLayout.tsx

@@ -21,23 +21,22 @@ export default function UnauthenticatedLayout({
   const router = useRouter();
   const isPlatform = useIsPlatform();
   const { isAuthenticated, isLoading } = useAuthenticationStatus();
+  const isOnResetPassword = router.route === '/password/reset';
 
   useEffect(() => {
     if (!isPlatform || (!isLoading && isAuthenticated)) {
-      router.push('/');
+      // we do not want to redirect if the user tries to reset their password
+      if (!isOnResetPassword) {
+        router.push('/');
+      }
     }
-  }, [isLoading, isAuthenticated, router, isPlatform]);
+  }, [isLoading, isAuthenticated, router, isPlatform, isOnResetPassword]);
 
-  if (!isPlatform || isLoading || isAuthenticated) {
+  if ((!isPlatform || isLoading || isAuthenticated) && !isOnResetPassword) {
     return (
       <BaseLayout {...props}>
         <LoadingScreen
           sx={{ backgroundColor: (theme) => theme.palette.background.default }}
-          slotProps={{
-            activityIndicator: {
-              className: 'text-white',
-            },
-          }}
         />
       </BaseLayout>
     );
@@ -59,19 +58,19 @@ export default function UnauthenticatedLayout({
 
         <RetryableErrorBoundary>
           <Box
-            className="flex items-center min-h-screen"
+            className="flex min-h-screen items-center"
             sx={{ backgroundColor: (theme) => theme.palette.common.black }}
           >
             <Container
               rootClassName="bg-transparent h-full"
-              className="grid items-center w-full h-full gap-12 pt-8 pb-12 bg-transparent justify-items-center lg:grid-cols-2 lg:gap-4 lg:pb-0 lg:pt-0"
+              className="grid h-full w-full items-center justify-items-center gap-12 bg-transparent pb-12 pt-8 lg:grid-cols-2 lg:gap-4 lg:pb-0 lg:pt-0"
             >
               <div className="relative z-10 order-2 grid w-full max-w-[544px] grid-flow-row gap-12 lg:order-1">
                 {children}
               </div>
 
               <div className="relative z-0 order-1 flex h-full w-full items-center justify-center md:min-h-[150px] lg:order-2 lg:min-h-[none]">
-                <div className="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center w-full h-full max-w-xl mx-auto overflow-hidden opacity-70">
+                <div className="absolute bottom-0 left-0 right-0 top-0 mx-auto flex h-full w-full max-w-xl items-center justify-center overflow-hidden opacity-70">
                   <Image
                     priority
                     src="/assets/line-grid.svg"

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

@@ -0,0 +1,26 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+
+function FileStoresIcon(props: IconProps) {
+  return (
+    <SvgIcon
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      aria-label="FileStores Icon"
+      {...props}
+    >
+      <path d="M12 22v-9" />
+      <path d="M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z" />
+      <path d="M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13" />
+      <path d="M21 12.43a1.93 1.93 0 0 0 0-3.36L8.83 2.2a1.64 1.64 0 0 0-1.63 0L3 4.57a1.93 1.93 0 0 0 0 3.36l12.18 6.86a1.636 1.636 0 0 0 1.63 0z" />
+    </SvgIcon>
+  );
+}
+
+FileStoresIcon.displayName = 'FileStoresIcon';
+
+export default FileStoresIcon;

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

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

dashboard/src/components/ui/v3/button.tsx

@@ -13,7 +13,7 @@ const buttonVariants = cva(
         destructive:
           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+          'border bg-background hover:bg-accent hover:text-accent-foreground',
         secondary:
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',

dashboard/src/components/ui/v3/command.tsx

@@ -1,6 +1,6 @@
 import { type DialogProps } from '@radix-ui/react-dialog';
-import { Command as CommandPrimitive } from 'cmdk';
-import { Search } from 'lucide-react';
+import { Command as CommandPrimitive, useCommandState } from 'cmdk';
+import { PlusIcon, Search } from 'lucide-react';
 import * as React from 'react';
 
 import { Dialog, DialogContent } from '@/components/ui/v3/dialog';
@@ -26,7 +26,7 @@ interface CommandDialogProps extends DialogProps {}
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
-      <DialogContent className="p-0 overflow-hidden shadow-lg">
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
@@ -37,14 +37,22 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center px-3 border-b" cmdk-input-wrapper="">
-    <Search className="w-4 h-4 mr-2 opacity-50 shrink-0" />
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
+    prefix?: React.ReactNode;
+  }
+>(({ className, prefix, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    {prefix && (
+      <span className="pointer-events-none flex items-center text-muted-foreground">
+        {prefix}
+      </span>
+    )}
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
         'flex h-11 w-full rounded-md border-none bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50',
+        prefix && 'pl-0',
         className,
       )}
       {...props}
@@ -73,7 +81,7 @@ const CommandEmpty = React.forwardRef<
 >((props, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
-    className="py-6 text-sm text-center"
+    className="py-6 text-center text-sm"
     {...props}
   />
 ));
@@ -140,6 +148,25 @@ const CommandShortcut = ({
 };
 CommandShortcut.displayName = 'CommandShortcut';
 
+const CommandCreateItem = ({
+  onCreate,
+}: {
+  onCreate: (value: string) => void;
+}) => {
+  const query = useCommandState((state) => state.search);
+  if (!query || !onCreate) {
+    return null;
+  }
+
+  return (
+    <CommandItem forceMount value="create" onSelect={() => onCreate(query)}>
+      <PlusIcon className="mr-2" /> {query}
+    </CommandItem>
+  );
+};
+
+CommandCreateItem.displayName = 'CommandCreateItem';
+
 export {
   Command,
   CommandDialog,
@@ -150,4 +177,5 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
+  CommandCreateItem,
 };

dashboard/src/components/ui/v3/fancy-multi-select.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import { X } from 'lucide-react';
+
+import { Badge } from '@/components/ui/v3/badge';
+import {
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/v3/command';
+import { cn } from '@/lib/utils';
+import { Command as CommandPrimitive } from 'cmdk';
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+} from 'react';
+
+type Option = Record<'value' | 'label', string>;
+
+interface FancyMultiSelectProps {
+  defaultValue?: Option[];
+  options?: Option[];
+  creatable?: boolean;
+  className?: string;
+  onChange?: (selected: Option[]) => void;
+}
+
+export function FancyMultiSelect({
+  defaultValue = [],
+  options = [],
+  creatable = false,
+  className,
+  onChange,
+}: FancyMultiSelectProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState<Option[]>(defaultValue);
+  const [inputValue, setInputValue] = useState('');
+
+  const handleUnselect = useCallback((option: Option) => {
+    setSelected((prev) => prev.filter((s) => s.value !== option.value));
+  }, []);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {
+    const input = inputRef.current;
+    if (input) {
+      if (e.key === 'Delete' || e.key === 'Backspace') {
+        if (input.value === '') {
+          setSelected((prev) => {
+            const newSelected = [...prev];
+            newSelected.pop();
+            return newSelected;
+          });
+        }
+      }
+      // This is not a default behaviour of the <input /> field
+      if (e.key === 'Escape') {
+        input.blur();
+      }
+    }
+  }, []);
+
+  const handleSelect = useCallback(
+    (option: Option) => {
+      setInputValue('');
+      setSelected((prev) => {
+        const newSelected = [...prev, option];
+        onChange?.(newSelected);
+        return newSelected;
+      });
+    },
+    [onChange],
+  );
+
+  const selectables = useMemo(() => {
+    const filtered = options.filter(
+      (option) =>
+        !selected.map((s) => s.value).includes(option.value) &&
+        option.label.toLowerCase().includes(inputValue.toLowerCase()),
+    );
+
+    if (creatable && inputValue) {
+      return [
+        ...filtered,
+        {
+          value: inputValue.toLowerCase(),
+          label: inputValue,
+        },
+      ];
+    }
+
+    return filtered;
+  }, [options, selected, inputValue, creatable]);
+
+  return (
+    <Command
+      onKeyDown={handleKeyDown}
+      className="relative overflow-visible bg-transparent"
+    >
+      <div
+        className={cn(
+          'group flex min-h-10 flex-1 rounded-md border bg-background px-4 py-0 text-sm ring-offset-background hover:bg-accent',
+          className,
+        )}
+      >
+        <div className="flex flex-1 flex-wrap items-center gap-1 overflow-x-hidden py-1">
+          {selected.map((option) => {
+            return (
+              <Badge
+                className="h-7 overflow-x-hidden text-[12px] font-normal"
+                key={option.value}
+                variant="outline"
+              >
+                <span className="overflow-x-hidden text-ellipsis whitespace-nowrap break-words font-medium">
+                  {option.label}
+                </span>
+                <button
+                  type="button"
+                  aria-label={`Remove ${option.label}`}
+                  className="ml-1 rounded-full outline-none"
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      handleUnselect(option);
+                    }
+                  }}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }}
+                  onClick={() => handleUnselect(option)}
+                >
+                  <X className="h-3 w-3 text-muted-foreground hover:text-foreground" />
+                </button>
+              </Badge>
+            );
+          })}
+          {/* Avoid having the "Search" Icon */}
+          <CommandPrimitive.Input
+            ref={inputRef}
+            value={inputValue}
+            onValueChange={setInputValue}
+            onBlur={() => setOpen(false)}
+            onFocus={() => setOpen(true)}
+            placeholder="Select options..."
+            className="flex flex-1 border-none bg-transparent px-0 py-1 text-sm font-medium outline-none !ring-0 !ring-offset-0 placeholder:text-sm placeholder:text-muted-foreground group-hover:text-accent-foreground"
+          />
+        </div>
+      </div>
+      <div className="relative">
+        <CommandList>
+          {open && selectables.length > 0 ? (
+            <div className="absolute top-2 z-10 w-full rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in">
+              <CommandGroup className="h-full overflow-auto">
+                {selectables.map((option) => {
+                  return (
+                    <CommandItem
+                      key={option.value}
+                      onMouseDown={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                      }}
+                      onSelect={() => handleSelect(option)}
+                      className="cursor-pointer"
+                    >
+                      {creatable &&
+                      !options.find((opt) => opt.value === option.value)
+                        ? `Create "${option.label}"`
+                        : option.label}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            </div>
+          ) : null}
+        </CommandList>
+      </div>
+    </Command>
+  );
+}

dashboard/src/features/ai/AssistantForm/AssistantForm.tsx

@@ -1,4 +1,5 @@
 import { useDialog } from '@/components/common/DialogProvider';
+
 import { Form } from '@/components/form/Form';
 import { Box } from '@/components/ui/v2/Box';
 import { Button } from '@/components/ui/v2/Button';
@@ -10,14 +11,14 @@ import { Text } from '@/components/ui/v2/Text';
 import { Tooltip } from '@/components/ui/v2/Tooltip';
 import { GraphqlDataSourcesFormSection } from '@/features/ai/AssistantForm/components/GraphqlDataSourcesFormSection';
 import { WebhooksDataSourcesFormSection } from '@/features/ai/AssistantForm/components/WebhooksDataSourcesFormSection';
-import { useAdminApolloClient } from '@/features/projects/common/hooks/useAdminApolloClient';
+import { useAdminApolloClient } from '@/features/orgs/projects/hooks/useAdminApolloClient'
 import type { DialogFormProps } from '@/types/common';
-import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
-import { removeTypename, type DeepRequired } from '@/utils/helpers';
 import {
   useInsertAssistantMutation,
   useUpdateAssistantMutation,
 } from '@/utils/__generated__/graphite.graphql';
+import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import { removeTypename, type DeepRequired } from '@/utils/helpers';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
@@ -28,6 +29,7 @@ export const validationSchema = Yup.object({
   description: Yup.string(),
   instructions: Yup.string().required('The instructions are required'),
   model: Yup.string().required('The model is required'),
+  fileStore: Yup.string().label('File Store'),
   graphql: Yup.array().of(
     Yup.object().shape({
       name: Yup.string().required(),
@@ -64,14 +66,14 @@ export type AssistantFormValues = Yup.InferType<typeof validationSchema>;
 
 export interface AssistantFormProps extends DialogFormProps {
   /**
-   * To use in conjunction with initialData to allow for updating the autoEmbeddingsConfiguration
+   * To use in conjunction with initialData to allow for updating the Assistant Configuration
    */
   assistantId?: string;
 
   /**
    * if there is initialData then it's an update operation
    */
-  initialData?: AssistantFormValues;
+  initialData?: AssistantFormValues
 
   /**
    * Function to be called when the operation is cancelled.
@@ -114,26 +116,26 @@ export default function AssistantForm({
   } = form;
 
   const isDirty = Object.keys(dirtyFields).length > 0;
-
   useEffect(() => {
     onDirtyStateChange(isDirty, location);
   }, [isDirty, location, onDirtyStateChange]);
 
-  const createOrUpdateAutoEmbeddings = async (
-    values: DeepRequired<AssistantFormValues> & { assistantID: string },
+  const createOrUpdateAssistant = async (
+    values: DeepRequired<AssistantFormValues> & {
+      assistantID: string;
+    },
   ) => {
     // remove any __typename from the form values
     const payload = removeTypename(values);
 
-    if (values.webhooks.length === 0) {
+    if (values.webhooks?.length === 0) {
       delete payload.webhooks;
     }
 
-    if (values.graphql.length === 0) {
+    if (values.graphql?.length === 0) {
       delete payload.graphql;
     }
 
-    // remove assistantId because the update mutation fails otherwise
     delete payload.assistantID;
 
     // If the assistantId is set then we do an update
@@ -158,11 +160,13 @@ export default function AssistantForm({
   };
 
   const handleSubmit = async (
-    values: DeepRequired<AssistantFormValues> & { assistantID: string },
+    values: DeepRequired<AssistantFormValues> & {
+      assistantID: string;
+    },
   ) => {
     await execPromiseWithErrorToast(
       async () => {
-        await createOrUpdateAutoEmbeddings(values);
+        await createOrUpdateAssistant(values);
         onSubmit?.();
       },
       {
@@ -282,6 +286,7 @@ export default function AssistantForm({
             autoComplete="off"
             autoFocus
           />
+
           <GraphqlDataSourcesFormSection />
           <WebhooksDataSourcesFormSection />
         </div>

dashboard/src/features/ai/AssistantsList/AssistantsList.tsx

@@ -15,12 +15,12 @@ import { type Assistant } from 'pages/[workspaceSlug]/[appSlug]/ai/assistants';
 
 interface AssistantsListProps {
   /**
-   * The run services fetched from entering the users page.
+   * The list of assistants.
    */
   assistants: Assistant[];
 
   /**
-   * Function to be called after a submitting the form for either creating or updating a service.
+   * Function to be called after a submitting the form for either creating or updating an assistant.
    *
    * @example onDelete={() => refetch()}
    */

dashboard/src/features/authentication/settings/components/DisableNewUsersSettings/DisableNewUsersSettings.tsx

@@ -9,7 +9,6 @@ import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
 import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import {
-  GetAuthenticationSettingsDocument,
   useGetAuthenticationSettingsQuery,
   useUpdateConfigMutation,
 } from '@/utils/__generated__/graphql';
@@ -30,7 +29,6 @@ export default function DisableNewUsersSettings() {
   const localMimirClient = useLocalMimirClient();
   const { currentProject } = useCurrentWorkspaceAndProject();
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetAuthenticationSettingsDocument],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
@@ -42,14 +40,14 @@ export default function DisableNewUsersSettings() {
   const form = useForm<DisableNewUsersFormValues>({
     reValidateMode: 'onSubmit',
     defaultValues: {
-      disabled: !data?.config?.auth?.signUp?.enabled,
+      disabled: data?.config?.auth?.signUp?.disableNewUsers,
     },
   });
 
   useEffect(() => {
     if (!loading) {
       form.reset({
-        disabled: !data?.config?.auth?.signUp?.enabled,
+        disabled: data?.config?.auth?.signUp?.disableNewUsers,
       });
     }
   }, [loading, data, form]);
@@ -58,7 +56,7 @@ export default function DisableNewUsersSettings() {
     return (
       <ActivityIndicator
         delay={1000}
-        label="Loading disabled sign up settings..."
+        label="Loading disabled new users settings..."
         className="justify-center"
       />
     );
@@ -79,7 +77,7 @@ export default function DisableNewUsersSettings() {
         config: {
           auth: {
             signUp: {
-              enabled: !values.disabled,
+              disableNewUsers: values.disabled,
             },
           },
         },
@@ -104,10 +102,10 @@ export default function DisableNewUsersSettings() {
         }
       },
       {
-        loadingMessage: 'Disabling new user sign ups...',
-        successMessage: 'New user sign ups have been disabled successfully.',
+        loadingMessage: 'Disabling new users sign ins...',
+        successMessage: 'New users sign ins have been disabled successfully.',
         errorMessage:
-          'An error occurred while trying to disable new user sign ups.',
+          'An error occurred while trying to disable new users sign ins.',
       },
     );
   };

dashboard/src/features/authentication/settings/gql/getAuthenticationSettings.gql

@@ -15,6 +15,7 @@ query GetAuthenticationSettings($appId: uuid!) {
       }
       signUp {
         enabled
+        disableNewUsers
       }
       session {
         accessToken {

dashboard/src/features/orgs/components/billing/components/BillingEstimate/components/Estimate/Estimate.tsx

@@ -14,9 +14,6 @@ export default function Estimate() {
 
   const amountDue = useMemo(() => {
     const amount = data?.billingGetNextInvoice?.AmountDue;
-    if (!amount) {
-      return 'N/A';
-    }
     if (typeof amount !== 'number') {
       return 'N/A';
     }

dashboard/src/features/orgs/components/common/ProjectStatusIndicator/ProjectStatusIndicator.tsx

@@ -0,0 +1,64 @@
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/v3/hover-card';
+import { cn } from '@/lib/utils';
+import { ApplicationStatus } from '@/types/application';
+
+export default function ProjectStatusIndicator({
+  status,
+}: {
+  status: ApplicationStatus;
+}) {
+  const indicatorStyles: Record<
+    number,
+    { className: string; description: string }
+  > = {
+    [ApplicationStatus.Errored]: {
+      className: 'bg-destructive',
+      description: 'Project errored',
+    },
+    [ApplicationStatus.Pausing]: {
+      className: 'bg-primary-main animate-blinking',
+      description: 'Project is pausing',
+    },
+    [ApplicationStatus.Restoring]: {
+      className: 'bg-primary-main animate-blinking',
+      description: 'Project is restoring',
+    },
+    [ApplicationStatus.Paused]: {
+      className: 'bg-slate-400',
+      description: 'Project is paused',
+    },
+    [ApplicationStatus.Unpausing]: {
+      className: 'bg-primary-main animate-blinking',
+      description: 'Project is unpausing',
+    },
+    [ApplicationStatus.Live]: {
+      className: 'bg-primary-main',
+      description: 'Project is live',
+    },
+  };
+  const style = indicatorStyles[status];
+
+  if (style) {
+    return (
+      <HoverCard openDelay={0}>
+        <HoverCardTrigger asChild>
+          <span
+            className={cn(
+              'mt-[2px] h-2 w-2 flex-shrink-0 rounded-full',
+              style.className,
+            )}
+          />
+        </HoverCardTrigger>
+        <HoverCardContent side="top" className="h-fit w-fit py-2">
+          {style.description}
+        </HoverCardContent>
+      </HoverCard>
+    );
+  }
+
+  return null;
+}

dashboard/src/features/orgs/components/common/ProjectStatusIndicator/index.ts

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

dashboard/src/features/orgs/components/members/components/AnnouncementsTray/AnnouncementsTray.tsx

@@ -1,4 +1,11 @@
+import { Badge } from '@/components/ui/v3/badge';
 import { Button } from '@/components/ui/v3/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/v3/dropdown-menu';
 import {
   Sheet,
   SheetContent,
@@ -7,15 +14,64 @@ import {
   SheetTitle,
   SheetTrigger,
 } from '@/components/ui/v3/sheet';
-import { Announcements } from '@/features/projects/common/components/Announcements';
-import { Megaphone } from 'lucide-react';
+import {
+  useDeleteAnnouncementReadMutation,
+  useGetAnnouncementsQuery,
+  useInsertAnnouncementReadMutation,
+} from '@/utils/__generated__/graphql';
+import { useAuthenticationStatus } from '@nhost/nextjs';
+import { formatDistance } from 'date-fns';
+import { EllipsisVertical, Megaphone } from 'lucide-react';
+import Link from 'next/link';
 
 export default function AnnouncementsTray() {
+  const { isAuthenticated } = useAuthenticationStatus();
+
+  const {
+    data,
+    loading,
+    refetch: refetchAnnouncements,
+  } = useGetAnnouncementsQuery({
+    skip: !isAuthenticated,
+  });
+
+  const [insertAnnouncementRead] = useInsertAnnouncementReadMutation();
+  const [deleteAnnouncementRead] = useDeleteAnnouncementReadMutation();
+
+  const announcements = data?.announcements ?? [];
+  const unreadAnnouncementsCount = announcements.filter(
+    (ann) => ann.read.length === 0,
+  ).length;
+
+  const handleSetUnread = async (announcementReadId: string) => {
+    await deleteAnnouncementRead({
+      variables: {
+        id: announcementReadId,
+      },
+    });
+
+    await refetchAnnouncements();
+  };
+
+  const handleSetRead = async (announcementID: string) => {
+    await insertAnnouncementRead({
+      variables: { announcementID },
+    });
+
+    await refetchAnnouncements();
+  };
+
   return (
     <Sheet>
       <SheetTrigger asChild>
-        <Button variant="ghost" className="relative h-fit px-3 py-1">
-          <Megaphone className="h-5 w-5" />
+        <Button
+          variant="outline"
+          className="relative flex h-8 items-center gap-2 px-2"
+        >
+          <Megaphone className="h-4.5 w-4.5" />
+          {unreadAnnouncementsCount > 0 && (
+            <Badge variant="destructive">{unreadAnnouncementsCount}</Badge>
+          )}
         </Button>
       </SheetTrigger>
       <SheetContent className="h-full w-full bg-background p-0 text-foreground sm:max-w-[310px]">
@@ -25,8 +81,102 @@ export default function AnnouncementsTray() {
             Latest news and announcements.
           </SheetDescription>
         </SheetHeader>
-        <div className="flex h-full w-full flex-col px-8 pt-3">
-          <Announcements />
+        <div className="flex h-full w-full flex-col">
+          <div className="flex h-12 items-center border-b px-2">
+            <h3 className="font-medium">
+              Latest Announcements{' '}
+              {unreadAnnouncementsCount > 0 && `(${unreadAnnouncementsCount})`}
+            </h3>
+          </div>
+
+          <div className="flex h-full flex-col gap-2 overflow-auto p-2">
+            {!loading && announcements.length === 0 && (
+              <span className="text-muted-foreground">
+                No new announcements
+              </span>
+            )}
+            {announcements.map((announcement) => (
+              <Button
+                key={announcement.id}
+                variant="ghost"
+                asChild
+                className="h-fit w-full items-start gap-2 rounded-md border p-2"
+              >
+                <Link
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href={announcement.href}
+                  shallow
+                  onClick={() => {
+                    if (announcement.read.length === 0) {
+                      handleSetRead(announcement.id);
+                    }
+                  }}
+                >
+                  {announcement.read.length === 0 ? (
+                    <span className="mt-[5px] h-2 w-2 flex-shrink-0 rounded-full bg-primary" />
+                  ) : (
+                    <span className="mt-[5px] h-2 w-2 flex-shrink-0" />
+                  )}
+                  <div className="flex flex-row">
+                    <div className="flex flex-col gap-1">
+                      <span className="text-xs text-muted-foreground">
+                        {formatDistance(
+                          new Date(announcement.createdAt),
+                          new Date(),
+                          {
+                            addSuffix: true,
+                          },
+                        )}
+                      </span>
+                      <p className="whitespace-normal">
+                        {announcement.content}
+                      </p>
+                    </div>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          className="h-8 px-3"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                          }}
+                        >
+                          <div className="absolute">
+                            <EllipsisVertical className="h-4 w-4" />
+                          </div>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent
+                        side="bottom"
+                        align="end"
+                        sideOffset={-5}
+                      >
+                        <DropdownMenuItem
+                          disabled={announcement.read.length > 0}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleSetRead(announcement.id);
+                          }}
+                        >
+                          Mark as read
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          disabled={announcement.read.length === 0}
+                          onClick={() =>
+                            handleSetUnread(announcement.read.at(0).id)
+                          }
+                        >
+                          Mark as unread
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </Link>
+              </Button>
+            ))}
+          </div>
         </div>
       </SheetContent>
     </Sheet>

dashboard/src/features/orgs/components/members/components/NotificationsTray/NotificationsTray.tsx

@@ -25,6 +25,7 @@ import {
   useOrganizationMemberInvitesLazyQuery,
   useOrganizationNewRequestsLazyQuery,
   usePostOrganizationRequestMutation,
+  type OrganizationMemberInvitesQuery,
   type PostOrganizationRequestResponse,
 } from '@/utils/__generated__/graphql';
 import { useUserData } from '@nhost/nextjs';
@@ -33,10 +34,13 @@ import { Bell } from 'lucide-react';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
+type Invite = OrganizationMemberInvitesQuery['organizationMemberInvites'][0];
+
 export default function NotificationsTray() {
   const userData = useUserData();
-  const { asPath, route } = useRouter();
+  const { asPath, route, push } = useRouter();
   const { refetch: refetchOrgs } = useOrgs();
+  const [open, setOpen] = useState(false);
 
   const [stripeFormDialogOpen, setStripeFormDialogOpen] = useState(false);
 
@@ -113,17 +117,19 @@ export default function NotificationsTray() {
   const [acceptInvite] = useOrganizationMemberInviteAcceptMutation();
   const [deleteInvite] = useDeleteOrganizationMemberInviteMutation();
 
-  const handleAccept = async (inviteId: string) => {
+  const handleAccept = async (invite: Invite) => {
     await execPromiseWithErrorToast(
       async () => {
         await acceptInvite({
           variables: {
-            inviteId,
+            inviteId: invite.id,
           },
         });
 
-        refetchInvites();
-        refetchOrgs();
+        await refetchInvites();
+        await refetchOrgs();
+        await push(`/orgs/${invite?.organization?.slug}/projects`);
+        setOpen(false);
       },
       {
         loadingMessage: `Accepting invite...`,
@@ -154,12 +160,18 @@ export default function NotificationsTray() {
 
   return (
     <>
-      <Sheet>
+      <Sheet open={open} onOpenChange={setOpen}>
         <SheetTrigger asChild>
-          <Button variant="ghost" className="relative h-fit px-3 py-1">
-            <Bell className="mt-[2px] h-[1.15rem] w-[1.15rem]" />
-            {(pendingOrgRequest || Boolean(invites.length)) && (
-              <div className="absolute right-3 top-2 h-2 w-2 rounded-full bg-red-500" />
+          <Button
+            variant="outline"
+            className="relative flex h-8 items-center gap-2 border px-2"
+            aria-label="Notifications"
+          >
+            <Bell className="h-4.5 w-4.5" />
+            {(pendingOrgRequest || invites.length > 0) && (
+              <Badge variant="destructive">
+                {invites.length + (pendingOrgRequest ? 1 : 0)}
+              </Badge>
             )}
           </Button>
         </SheetTrigger>
@@ -248,7 +260,7 @@ export default function NotificationsTray() {
                     </Button>
                     <Button
                       className="h-fit"
-                      onClick={() => handleAccept(invite.id)}
+                      onClick={() => handleAccept(invite)}
                     >
                       Accept
                     </Button>

dashboard/src/features/orgs/components/projects/projects-grid/projects-grid.tsx

@@ -1,8 +1,9 @@
 import { LoadingScreen } from '@/components/presentational/LoadingScreen';
 import { Input } from '@/components/ui/v2/Input';
 import { Button } from '@/components/ui/v3/button';
+import { ProjectStatusIndicator } from '@/features/orgs/components/common/ProjectStatusIndicator';
+import { DeploymentStatusMessage } from '@/features/orgs/projects/deployments/components/DeploymentStatusMessage';
 import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
-import { DeploymentStatusMessage } from '@/features/projects/deployments/components/DeploymentStatusMessage';
 import {
   useGetProjectsQuery,
   type GetProjectsQuery,
@@ -22,20 +23,21 @@ function ProjectCard({ project }: { project: Project }) {
   return (
     <Link
       href={`/orgs/${org?.slug}/projects/${project.subdomain}`}
-      className="flex cursor-pointer flex-col gap-4 rounded-lg border bg-background p-4 hover:shadow-sm"
+      className="flex h-44 cursor-pointer flex-col gap-4 rounded-lg border bg-background p-4 hover:shadow-sm"
     >
-      <div className="flex items-start gap-2">
-        <div className="flex w-full flex-row items-center space-x-2">
-          <Box className="h-6 w-6 flex-shrink-0" />
-          <p className="truncate text-lg font-bold">{project.name}</p>
+      <div className="flex flex-row items-start gap-2">
+        <Box className="mt-[2px] h-5 w-5 flex-shrink-0" />
+        <div className="flex w-full flex-col">
+          <p className="truncate font-bold">{project.name}</p>
+          <span className="text-xs text-muted-foreground">
+            {project.region.name}
+          </span>
         </div>
+        <ProjectStatusIndicator status={project.appStates[0].stateId} />
       </div>
 
-      <div className="flex flex-row items-start gap-2">
-        <DeploymentStatusMessage
-          appCreatedAt={project.createdAt}
-          deployment={latestDeployment}
-        />
+      <div className="flex flex-1 flex-row items-start gap-2">
+        <DeploymentStatusMessage deployment={latestDeployment} />
       </div>
 
       <div className="flex w-full justify-end">
@@ -53,6 +55,7 @@ export default function ProjectsGrid() {
       orgSlug: org?.slug,
     },
     skip: !org,
+    pollInterval: 10 * 1000,
   });
 
   const [query, setQuery] = useState('');
@@ -100,7 +103,7 @@ export default function ProjectsGrid() {
         </Button>
       </div>
 
-      <div className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+      <div className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
         {filteredProjects.map((project) => (
           <ProjectCard key={project.id} project={project} />
         ))}

dashboard/src/features/orgs/hooks/useRemoteApplicationGQLClient/useRemoteApplicationGQLClient.tsx

@@ -9,7 +9,7 @@ import { useMemo } from 'react';
  * @returns A function that returns a new ApolloClient instance.
  */
 export default function useRemoteApplicationGQLClient() {
-  const { project, loading } = useProject({ target: 'user-project' });
+  const { project, loading } = useProject();
   const serviceUrl = generateAppServiceUrl(
     project?.subdomain,
     project?.region,

dashboard/src/features/orgs/layout/AISidebar/AISidebar.tsx

@@ -128,6 +128,9 @@ export default function AISidebar({ className, ...props }: AISidebarProps) {
             <AINavLink href="/assistants" exact={false} onClick={handleSelect}>
               Assistants
             </AINavLink>
+            <AINavLink href="/file-stores" exact={false} onClick={handleSelect}>
+              File Stores
+            </AINavLink>
           </List>
         </nav>
       </Box>

dashboard/src/features/orgs/layout/ProjectLayout/ProjectLayout.tsx

@@ -5,17 +5,18 @@ import { Alert } from '@/components/ui/v2/Alert';
 import type { BoxProps } from '@/components/ui/v2/Box';
 import { Box } from '@/components/ui/v2/Box';
 import { ApplicationPaused } from '@/features/orgs/projects/common/components/ApplicationPaused';
+import { ApplicationPausedBanner } from '@/features/orgs/projects/common/components/ApplicationPausedBanner';
 import { ApplicationProvisioning } from '@/features/orgs/projects/common/components/ApplicationProvisioning';
 import { ApplicationRestoring } from '@/features/orgs/projects/common/components/ApplicationRestoring';
 import { ApplicationUnknown } from '@/features/orgs/projects/common/components/ApplicationUnknown';
 import { ApplicationUnpausing } from '@/features/orgs/projects/common/components/ApplicationUnpausing';
 import { useAppState } from '@/features/orgs/projects/common/hooks/useAppState';
 import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
-import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { useProjectWithState } from '@/features/orgs/projects/hooks/useProjectWithState';
 import { ApplicationStatus } from '@/types/application';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
-import { useMemo } from 'react';
+import { useCallback, useMemo, type ReactNode } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 export interface ProjectLayoutProps extends AuthenticatedLayoutProps {
@@ -34,11 +35,53 @@ function ProjectLayoutContent({
     query: { appSubdomain },
   } = useRouter();
 
-  const isPlatform = useIsPlatform();
   const { state } = useAppState();
-  const { project, loading, error } = useProject({ poll: true });
+  const isPlatform = useIsPlatform();
+  const { project, loading, error } = useProjectWithState();
+
   const isOnOverviewPage = route === '/orgs/[orgSlug]/projects/[appSubdomain]';
 
+  const renderPausedProjectContent = useCallback(
+    (_children: ReactNode) => {
+      const baseProjectPageRoute = '/orgs/[orgSlug]/projects/[appSubdomain]/';
+      const blockedPausedProjectPages = [
+        'database',
+        'database/browser/[dataSourceSlug]',
+        'graphql',
+        'hasura',
+        'users',
+        'storage',
+        'ai/auto-embeddings',
+        'ai/assistants',
+        'metrics',
+      ].map((page) => baseProjectPageRoute.concat(page));
+
+      // show an alert box on top of the overview page with a wake up button
+      if (isOnOverviewPage) {
+        return (
+          <>
+            <div className="mx-auto mt-5 flex max-w-7xl p-4 pb-0">
+              <ApplicationPausedBanner
+                alertClassName="flex-row"
+                textContainerClassName="flex flex-col items-center justify-center text-left"
+                wakeUpButtonClassName="w-fit self-center"
+              />
+            </div>
+            {children}
+          </>
+        );
+      }
+
+      // block these pages when the project is paused
+      if (blockedPausedProjectPages.includes(route)) {
+        return <ApplicationPaused />;
+      }
+
+      return _children;
+    },
+    [route, isOnOverviewPage, children],
+  );
+
   // Render application state based on the current state
   const projectPageContent = useMemo(() => {
     if (!appSubdomain || state === undefined) {
@@ -67,7 +110,7 @@ function ProjectLayoutContent({
         return children;
       case ApplicationStatus.Pausing:
       case ApplicationStatus.Paused:
-        return <ApplicationPaused />;
+        return renderPausedProjectContent(children);
       case ApplicationStatus.Unpausing:
         return <ApplicationUnpausing />;
       case ApplicationStatus.Restoring:
@@ -79,7 +122,13 @@ function ProjectLayoutContent({
       default:
         return <ApplicationUnknown />;
     }
-  }, [state, children, appSubdomain, isOnOverviewPage]);
+  }, [
+    state,
+    children,
+    appSubdomain,
+    isOnOverviewPage,
+    renderPausedProjectContent,
+  ]);
 
   // Handle loading state
   if (loading) {

dashboard/src/features/orgs/layout/SettingsLayout/SettingsLayout.tsx

@@ -52,9 +52,9 @@ export default function SettingsLayout({ children }: SettingsLayoutProps) {
                     target="_blank"
                     rel="noopener noreferrer"
                     className="underline"
-                    href="https://docs.nhost.io/cli/overlays"
+                    href="https://docs.nhost.io/guides/cli/configuration-overlays#configuration-overlays"
                   >
-                    docs.nhost.io/cli/overlays
+                    Configuration Overlays
                   </a>{' '}
                   for guidance.
                 </Text>

dashboard/src/features/orgs/projects/ai/AssistantForm/AssistantForm.tsx

@@ -14,21 +14,27 @@ import { WebhooksDataSourcesFormSection } from '@/features/orgs/projects/ai/Assi
 import { useAdminApolloClient } from '@/features/orgs/projects/hooks/useAdminApolloClient';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 import type { DialogFormProps } from '@/types/common';
-import { removeTypename, type DeepRequired } from '@/utils/helpers';
 import {
   useInsertAssistantMutation,
   useUpdateAssistantMutation,
 } from '@/utils/__generated__/graphite.graphql';
+import { removeTypename, type DeepRequired } from '@/utils/helpers';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
+import { ControlledSelect } from '@/components/form/ControlledSelect';
+import { Option } from '@/components/ui/v2/Option';
+import { useIsFileStoreSupported } from '@/features/orgs/projects/common/hooks/useIsFileStoreSupported';
+import { type GraphiteFileStore } from '@/pages/orgs/[orgSlug]/projects/[appSubdomain]/ai/file-stores';
+
 export const validationSchema = Yup.object({
   name: Yup.string().required('The name is required.'),
   description: Yup.string(),
   instructions: Yup.string().required('The instructions are required'),
   model: Yup.string().required('The model is required'),
+  fileStore: Yup.string().label('File Store'),
   graphql: Yup.array().of(
     Yup.object().shape({
       name: Yup.string().required(),
@@ -65,14 +71,17 @@ export type AssistantFormValues = Yup.InferType<typeof validationSchema>;
 
 export interface AssistantFormProps extends DialogFormProps {
   /**
-   * To use in conjunction with initialData to allow for updating the autoEmbeddingsConfiguration
+   * To use in conjunction with initialData to allow for updating the Assistant Configuration
    */
   assistantId?: string;
 
   /**
    * if there is initialData then it's an update operation
    */
-  initialData?: AssistantFormValues;
+  initialData?: AssistantFormValues & {
+    fileStores?: string[];
+  };
+  fileStores?: GraphiteFileStore[];
 
   /**
    * Function to be called when the operation is cancelled.
@@ -87,6 +96,7 @@ export interface AssistantFormProps extends DialogFormProps {
 export default function AssistantForm({
   assistantId,
   initialData,
+  fileStores,
   onSubmit,
   onCancel,
   location,
@@ -103,8 +113,27 @@ export default function AssistantForm({
     client: adminClient,
   });
 
+  const isFileStoreSupported = useIsFileStoreSupported();
+
+  const fileStoresOptions = fileStores
+    ? fileStores.map((fileStore: GraphiteFileStore) => ({
+        label: fileStore.name,
+        value: fileStore.name,
+        id: fileStore.id,
+      }))
+    : [];
+
+  const assistantFileStore = initialData?.fileStores
+    ? fileStores?.find((fileStore: GraphiteFileStore) =>
+      fileStore.id === initialData?.fileStores[0]
+      )
+    : null;
+
+  const formDefaultValues = { ...initialData, fileStores: [] };
+  formDefaultValues.fileStore = assistantFileStore ? assistantFileStore.id : '';
+
   const form = useForm<AssistantFormValues>({
-    defaultValues: initialData,
+    defaultValues: formDefaultValues,
     reValidateMode: 'onSubmit',
     resolver: yupResolver(validationSchema),
   });
@@ -120,22 +149,32 @@ export default function AssistantForm({
     onDirtyStateChange(isDirty, location);
   }, [isDirty, location, onDirtyStateChange]);
 
-  const createOrUpdateAutoEmbeddings = async (
-    values: DeepRequired<AssistantFormValues> & { assistantID: string },
+    const createOrUpdateAssistant = async (
+      values: DeepRequired<AssistantFormValues> & {
+        assistantID: string;
+      },
   ) => {
     // remove any __typename from the form values
     const payload = removeTypename(values);
 
-    if (values.webhooks.length === 0) {
+    if (values.webhooks?.length === 0) {
       delete payload.webhooks;
     }
 
-    if (values.graphql.length === 0) {
+    if (values.graphql?.length === 0) {
       delete payload.graphql;
     }
 
+    if (isFileStoreSupported && values.fileStore) {
+      payload.fileStores = [values.fileStore];
+    }
+    if (!isFileStoreSupported) {
+      delete payload.fileStores;
+    }
+
     // remove assistantId because the update mutation fails otherwise
     delete payload.assistantID;
+    delete payload.fileStore;
 
     // If the assistantId is set then we do an update
     if (assistantId) {
@@ -152,7 +191,7 @@ export default function AssistantForm({
     await insertAssistantMutation({
       variables: {
         data: {
-          ...values,
+          ...payload,
         },
       },
     });
@@ -163,7 +202,7 @@ export default function AssistantForm({
   ) => {
     await execPromiseWithErrorToast(
       async () => {
-        await createOrUpdateAutoEmbeddings(values);
+        await createOrUpdateAssistant(values);
         onSubmit?.();
       },
       {
@@ -175,6 +214,10 @@ export default function AssistantForm({
     );
   };
 
+  const fileStoreTooltip = isFileStoreSupported
+    ? "If specified, all text documents in this file store will be available to the assistant."
+    : "Please upgrade Graphite to its latest version in order to use file stores.";
+
   return (
     <FormProvider {...form}>
       <Form
@@ -285,6 +328,36 @@ export default function AssistantForm({
           />
           <GraphqlDataSourcesFormSection />
           <WebhooksDataSourcesFormSection />
+          <ControlledSelect
+            slotProps={{
+              popper: { disablePortal: false, className: 'z-[10000]' },
+            }}
+            id="fileStore"
+            name="fileStore"
+            label={
+              <Box className="flex flex-row items-center space-x-2">
+                <Text>File Store</Text>
+                <Tooltip title={fileStoreTooltip}>
+                  <InfoIcon
+                    aria-label="Info"
+                    className="h-4 w-4"
+                    color="primary"
+                  />
+                </Tooltip>
+              </Box>
+            }
+            fullWidth
+            error={!!errors?.model?.message}
+            helperText={errors?.model?.message}
+            disabled={!isFileStoreSupported}
+          >
+            <Option value="" />
+            {fileStoresOptions.map((fileStore) => (
+              <Option key={fileStore.id} value={fileStore.id}>
+                {fileStore.label}
+              </Option>
+            ))}
+          </ControlledSelect>
         </div>
 
         <Box className="flex flex-row justify-between w-full p-4 border-t rounded">

dashboard/src/features/orgs/projects/ai/AssistantsList/AssistantsList.tsx

@@ -11,16 +11,22 @@ import { Text } from '@/components/ui/v2/Text';
 import { AssistantForm } from '@/features/orgs/projects/ai/AssistantForm';
 import { DeleteAssistantModal } from '@/features/orgs/projects/ai/DeleteAssistantModal';
 import { type Assistant } from '@/pages/orgs/[orgSlug]/projects/[appSubdomain]/ai/assistants';
+import { type GraphiteFileStore } from '@/pages/orgs/[orgSlug]/projects/[appSubdomain]/ai/file-stores';
 import { copy } from '@/utils/copy';
 
 interface AssistantsListProps {
   /**
-   * The run services fetched from entering the users page.
+   * The list of assistants 
    */
   assistants: Assistant[];
 
   /**
-   * Function to be called after a submitting the form for either creating or updating a service.
+   * The list of file stores
+   */
+  fileStores: GraphiteFileStore[];
+
+  /**
+   * Function to be called after a submitting the form for either creating or updating an assistant.
    *
    * @example onDelete={() => refetch()}
    */
@@ -35,6 +41,7 @@ interface AssistantsListProps {
 
 export default function AssistantsList({
   assistants,
+  fileStores,
   onCreateOrUpdate,
   onDelete,
 }: AssistantsListProps) {
@@ -49,6 +56,7 @@ export default function AssistantsList({
           initialData={{
             ...assistant,
           }}
+          fileStores={fileStores}
           onSubmit={() => onCreateOrUpdate()}
         />
       ),

dashboard/src/features/orgs/projects/ai/DeleteFileStoreModal/DeleteFileStoreModal.tsx

@@ -0,0 +1,100 @@
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Checkbox } from '@/components/ui/v2/Checkbox';
+import { Text } from '@/components/ui/v2/Text';
+import { useAdminApolloClient } from '@/features/orgs/projects/hooks/useAdminApolloClient';
+import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import { type GraphiteFileStore } from '@/pages/orgs/[orgSlug]/projects/[appSubdomain]/ai/file-stores';
+import { useDeleteFileStoreMutation } from '@/utils/__generated__/graphite.graphql';
+import { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export interface DeleteFileStoreModalProps {
+  fileStore: GraphiteFileStore;
+  onDelete?: () => Promise<any>;
+  close: () => void;
+}
+
+export default function DeleteFileStoreModal({
+  fileStore,
+  onDelete,
+  close,
+}: DeleteFileStoreModalProps) {
+  const [remove, setRemove] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { adminClient } = useAdminApolloClient();
+
+  const [deleteFileStoreMutation] = useDeleteFileStoreMutation({
+    client: adminClient,
+  });
+
+  const deleteFileStore = async () => {
+    await deleteFileStoreMutation({
+      variables: {
+        id: fileStore.id,
+      },
+    });
+    await onDelete?.();
+    close();
+  };
+
+  async function handleClick() {
+    setLoading(true);
+
+    await execPromiseWithErrorToast(deleteFileStore, {
+      loadingMessage: 'Deleting the file store...',
+      successMessage: 'The file store has been deleted successfully.',
+      errorMessage:
+        'An error occurred while deleting the file store. Please try again.',
+    });
+  }
+
+  return (
+    <Box className={twMerge('w-full rounded-lg p-6 text-left')}>
+      {' '}
+      <div className="grid grid-flow-row gap-1">
+        {' '}
+        <Text variant="h3" component="h2">
+          {' '}
+          Delete File Store {fileStore?.name}{' '}
+        </Text>{' '}
+        <Text variant="subtitle2">
+          {' '}
+          Are you sure you want to delete this File Store?{' '}
+        </Text>{' '}
+        <Text
+          variant="subtitle2"
+          className="font-bold"
+          sx={{ color: (theme) => `${theme.palette.error.main} !important` }}
+        >
+          This cannot be undone.
+        </Text>
+        <Box className="my-4">
+          <Checkbox
+            id="accept-1"
+            label={`I'm sure I want to delete ${fileStore?.name}`}
+            className="py-2"
+            checked={remove}
+            onChange={(_event, checked) => setRemove(checked)}
+            aria-label="Confirm Delete File Store"
+          />
+        </Box>
+        <div className="grid grid-flow-row gap-2">
+          <Button
+            color="error"
+            onClick={handleClick}
+            disabled={!remove}
+            loading={loading}
+          >
+            Delete File Store
+          </Button>
+
+          <Button variant="outlined" color="secondary" onClick={close}>
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </Box>
+  );
+}

dashboard/src/features/orgs/projects/ai/DeleteFileStoreModal/index.tsx

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

dashboard/src/features/orgs/projects/ai/FileStoreForm/FileStoreForm.tsx

@@ -0,0 +1,217 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { ControlledAutocomplete } from '@/components/form/ControlledAutocomplete';
+import { Form } from '@/components/form/Form';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { ArrowsClockwise } from '@/components/ui/v2/icons/ArrowsClockwise';
+import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
+import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { Text } from '@/components/ui/v2/Text';
+import { Tooltip } from '@/components/ui/v2/Tooltip';
+import { useAdminApolloClient } from '@/features/orgs/projects/hooks/useAdminApolloClient'
+import { useRemoteApplicationGQLClient } from '@/features/orgs/hooks/useRemoteApplicationGQLClient';
+import type { DialogFormProps } from '@/types/common';
+import {
+    useInsertFileStoreMutation,
+    useUpdateFileStoreMutation,
+} from '@/utils/__generated__/graphite.graphql';
+import { useGetBucketsQuery } from '@/utils/__generated__/graphql';
+import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import { removeTypename, type DeepRequired } from '@/utils/helpers';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+
+export const validationSchema = Yup.object({
+  name: Yup.string().required('The name is required'),
+  buckets: Yup.array()
+    .of(
+      Yup.object({
+        label: Yup.string(),
+        value: Yup.string(),
+      }),
+    )
+    .label('Buckets')
+    .required('At least one bucket is required'),
+});
+
+export type FileStoreFormValues = Yup.InferType<typeof validationSchema>;
+
+export interface FileStoreFormProps extends DialogFormProps {
+  id?: string;
+  initialData?: Omit<FileStoreFormValues, 'buckets'> & { buckets: string[] };
+  onSubmit?: VoidFunction | ((args?: any) => Promise<any>);
+  onCancel?: VoidFunction;
+}
+
+export default function FileStoreForm({
+  id,
+  initialData,
+  onSubmit,
+  onCancel,
+  location,
+}: FileStoreFormProps) {
+  const { onDirtyStateChange } = useDialog();
+
+  const { adminClient } = useAdminApolloClient();
+
+  const [insertFileStore] = useInsertFileStoreMutation({
+    client: adminClient,
+  });
+
+  const [updateFileStore] = useUpdateFileStoreMutation({
+    client: adminClient,
+  });
+
+  const remoteProjectGQLClient = useRemoteApplicationGQLClient();
+  const { data: buckets } = useGetBucketsQuery({
+    client: remoteProjectGQLClient,
+  });
+
+  const bucketOptions = buckets
+    ? buckets.buckets.map((bucket) => ({
+        label: bucket.id,
+        value: bucket.id,
+      }))
+    : [];
+
+  const formDefaultValues = { ...initialData, buckets: [] };
+  formDefaultValues.buckets = initialData?.buckets
+    ? initialData.buckets.map((bucket) => ({
+        label: bucket,
+        value: bucket,
+      }))
+    : [];
+
+  const form = useForm<FileStoreFormValues>({
+    defaultValues: formDefaultValues,
+    reValidateMode: 'onSubmit',
+    resolver: yupResolver(validationSchema),
+  });
+
+  const {
+    register,
+    formState: { errors, isSubmitting, dirtyFields },
+  } = form;
+
+  const isDirty = Object.keys(dirtyFields).length > 0;
+
+  useEffect(() => {
+    onDirtyStateChange(isDirty, location);
+  }, [isDirty, location, onDirtyStateChange]);
+
+  const createOrUpdateFileStore = async (
+    values: DeepRequired<FileStoreFormValues> & { id: string },
+  ) => {
+    const payload = removeTypename(values);
+    delete payload.id;
+    delete payload.vectorStoreID;
+
+    if (id) {
+      await updateFileStore({
+        variables: {
+          id,
+          object: { ...payload, buckets: values.buckets.map((b) => b.value) },
+        },
+      });
+
+      return;
+    }
+
+    await insertFileStore({
+      variables: {
+        object: { ...values, buckets: values.buckets.map((b) => b.value) },
+      },
+    });
+  };
+
+  const handleSubmit = async (
+    values: DeepRequired<FileStoreFormValues> & { id: string },
+  ) => {
+    await execPromiseWithErrorToast(
+      async () => {
+        await createOrUpdateFileStore(values);
+        onSubmit?.();
+      },
+      {
+        loadingMessage: 'Creating File Store...',
+        successMessage: 'The File Store has been created successfully.',
+        errorMessage:
+          'An error occurred while creating the File Store. Please try again.',
+      },
+    );
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form
+        onSubmit={handleSubmit}
+        className="flex h-full flex-col overflow-hidden border-t"
+      >
+        <div className="flex flex-1 flex-col space-y-4 overflow-auto p-4">
+          <Input
+            {...register('name')}
+            id="name"
+            label={
+              <Box className="flex flex-row items-center space-x-2">
+                <Text>Name</Text>
+                <Tooltip title="Name of the file store">
+                  <InfoIcon
+                    aria-label="Info"
+                    className="h-4 w-4"
+                    color="primary"
+                  />
+                </Tooltip>
+              </Box>
+            }
+            placeholder=""
+            hideEmptyHelperText
+            error={!!errors.name}
+            helperText={errors?.name?.message}
+            fullWidth
+            autoComplete="off"
+            autoFocus
+          />
+
+          <ControlledAutocomplete
+            id="buckets"
+            name="buckets"
+            label={
+              <Box className="flex flex-row items-center space-x-2">
+                <Text>Buckets</Text>
+                <Tooltip title="One or more buckets from storage from which documents can be used by Assistants">
+                  <InfoIcon
+                    aria-label="Info"
+                    className="h-4 w-4"
+                    color="primary"
+                  />
+                </Tooltip>
+              </Box>
+            }
+            fullWidth
+            multiple
+            aria-label="Buckets"
+            error={!!errors.buckets}
+            options={bucketOptions}
+            helperText={errors?.buckets?.message}
+          />
+        </div>
+
+        <Box className="flex w-full flex-row justify-between rounded border-t p-4">
+          <Button variant="outlined" color="secondary" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            startIcon={id ? <ArrowsClockwise /> : <PlusIcon />}
+          >
+            {id ? 'Update' : 'Create'}
+          </Button>
+        </Box>
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/features/orgs/projects/ai/FileStoreForm/index.tsx

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

dashboard/src/features/orgs/projects/ai/FileStoresList/FileStoresList.tsx

@@ -0,0 +1,157 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { Box } from '@/components/ui/v2/Box';
+import { Divider } from '@/components/ui/v2/Divider';
+import { Dropdown } from '@/components/ui/v2/Dropdown';
+import { IconButton } from '@/components/ui/v2/IconButton';
+import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
+import { DotsHorizontalIcon } from '@/components/ui/v2/icons/DotsHorizontalIcon';
+import { FileStoresIcon } from '@/components/ui/v2/icons/FileStoresIcon';
+import { TrashIcon } from '@/components/ui/v2/icons/TrashIcon';
+import { UserIcon } from '@/components/ui/v2/icons/UserIcon';
+import { Text } from '@/components/ui/v2/Text';
+import { DeleteFileStoreModal } from '@/features/orgs/projects/ai/DeleteFileStoreModal';
+import { FileStoreForm } from '@/features/orgs/projects/ai/FileStoreForm';
+import { type GraphiteFileStore } from '@/pages/orgs/[orgSlug]/projects/[appSubdomain]/ai/file-stores';
+import { copy } from '@/utils/copy';
+
+interface FileStoresListProps {
+  /**
+   * List of File Stores to be displayed.
+   */
+  fileStores: GraphiteFileStore[];
+
+  /**
+   * Function to be called after a submitting the form for either creating or updating a File Store.
+   *
+   * @example onDelete={() => refetch()}
+   */
+  onCreateOrUpdate?: () => Promise<any>;
+
+  /**
+   * Function to be called after a successful delete action.
+   *
+   */
+  onDelete?: () => Promise<any>;
+}
+
+export default function FileStoresList({
+  fileStores,
+  onCreateOrUpdate,
+  onDelete,
+}: FileStoresListProps) {
+  const { openDrawer, openDialog, closeDialog } = useDialog();
+
+  const viewFileStore = async (fileStore: GraphiteFileStore) => {
+    openDrawer({
+      title: fileStore.name,
+      component: (
+        <FileStoreForm
+          id={fileStore.id}
+          initialData={{ ...fileStore }}
+          onSubmit={() => onCreateOrUpdate()}
+        />
+      ),
+    });
+  };
+
+  const deleteFileStore = async (fileStore: GraphiteFileStore) => {
+    openDialog({
+      component: (
+        <DeleteFileStoreModal
+          fileStore={fileStore}
+          close={closeDialog}
+          onDelete={onDelete}
+        />
+      ),
+    });
+  };
+
+  return (
+    <Box className="flex flex-col">
+      {fileStores.map((fileStore) => (
+        <Box
+          key={fileStore.id}
+          className="flex h-[64px] w-full cursor-pointer items-center justify-between space-x-4 border-b-1 px-4 py-2 transition-colors"
+          sx={{
+            [`&:hover`]: {
+              backgroundColor: 'action.hover',
+            },
+          }}
+        >
+          <Box
+            onClick={() => viewFileStore(fileStore)}
+            className="flex w-full flex-row justify-between"
+            sx={{ backgroundColor: 'transparent' }}
+          >
+            <div className="flex flex-1 flex-row items-center space-x-4">
+              <FileStoresIcon className="h-5 w-5" />
+              <div className="flex flex-col">
+                <Text variant="h4" className="font-semibold">
+                  {fileStore?.name ?? 'unset'}
+                </Text>
+                <div className="hidden flex-row items-center space-x-2 md:flex">
+                  <Text variant="subtitle1" className="font-mono text-xs">
+                    {fileStore.id}
+                  </Text>
+                  <IconButton
+                    variant="borderless"
+                    color="secondary"
+                    onClick={(event) => {
+                      copy(fileStore.id, 'File Store Id');
+                      event.stopPropagation();
+                    }}
+                    aria-label="Service Id"
+                  >
+                    <CopyIcon className="h-4 w-4" />
+                  </IconButton>
+                </div>
+              </div>
+            </div>
+          </Box>
+
+          <Dropdown.Root>
+            <Dropdown.Trigger
+              asChild
+              hideChevron
+              onClick={(event) => event.stopPropagation()}
+            >
+              <IconButton
+                variant="borderless"
+                color="secondary"
+                aria-label="More options"
+                onClick={(event) => event.stopPropagation()}
+              >
+                <DotsHorizontalIcon />
+              </IconButton>
+            </Dropdown.Trigger>
+            <Dropdown.Content
+              menu
+              PaperProps={{ className: 'w-auto' }}
+              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+              transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+            >
+              <Dropdown.Item
+                onClick={() => viewFileStore(fileStore)}
+                className="z-50 grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
+              >
+                <UserIcon className="h-4 w-4" />
+                <Text className="font-medium">View {fileStore?.name}</Text>
+              </Dropdown.Item>
+              <Divider component="li" />
+              <Dropdown.Item
+                className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
+                sx={{ color: 'error.main' }}
+                onClick={() => deleteFileStore(fileStore)}
+              >
+                <TrashIcon className="h-4 w-4" />
+                <Text className="font-medium" color="error">
+                  Delete {fileStore?.name}
+                </Text>
+              </Dropdown.Item>
+            </Dropdown.Content>
+          </Dropdown.Root>
+        </Box>
+      ))}
+    </Box>
+  );
+}

dashboard/src/features/orgs/projects/ai/FileStoresList/index.tsx

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

dashboard/src/features/orgs/projects/ai/settings/components/DisableAIServiceConfirmationDialog/DisableAIServiceConfirmationDialog.tsx

@@ -3,7 +3,7 @@ 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 { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
 import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
@@ -26,11 +26,12 @@ export default function DisableAIServiceConfirmationDialog({
   onCancel,
   onServiceDisabled,
 }: DisableAIServiceConfirmationDialogProps) {
+  const { project } = useProject();
   const isPlatform = useIsPlatform();
   const { openDialog, closeDialog } = useDialog();
   const localMimirClient = useLocalMimirClient();
   const [loading, setLoading] = useState(false);
-  const { currentProject } = useCurrentWorkspaceAndProject();
+
   const [updateConfig] = useUpdateConfigMutation({
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
@@ -42,7 +43,7 @@ export default function DisableAIServiceConfirmationDialog({
       async () => {
         await updateConfig({
           variables: {
-            appId: currentProject.id,
+            appId: project?.id,
             config: {
               ai: null,
             },

dashboard/src/features/orgs/projects/authentication/settings/OTPEmailSettings/OTPEmailSettings.tsx

@@ -0,0 +1,139 @@
+import { ApplyLocalSettingsDialog } from '@/components/common/ApplyLocalSettingsDialog';
+import { useDialog } from '@/components/common/DialogProvider';
+import { useUI } from '@/components/common/UIProvider';
+import { Form } from '@/components/form/Form';
+import { SettingsContainer } from '@/components/layout/SettingsContainer';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import {
+  useGetSignInMethodsQuery,
+  useUpdateConfigMutation,
+} from '@/generated/graphql';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+
+const validationSchema = Yup.object({
+  enabled: Yup.boolean(),
+});
+
+export type OTPEmailSettingsFormValues = Yup.InferType<typeof validationSchema>;
+
+export default function OTPEmailSettings() {
+  const { project } = useProject();
+  const { openDialog } = useDialog();
+  const isPlatform = useIsPlatform();
+  const { maintenanceActive } = useUI();
+  const localMimirClient = useLocalMimirClient();
+
+  const [updateConfig] = useUpdateConfigMutation({
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const { data, loading, error } = useGetSignInMethodsQuery({
+    variables: { appId: project?.id },
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const { enabled } = data?.config?.auth?.method?.otp?.email || {};
+
+  const form = useForm<OTPEmailSettingsFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      enabled,
+    },
+    resolver: yupResolver(validationSchema),
+  });
+
+  useEffect(() => {
+    if (!loading) {
+      form.reset({ enabled });
+    }
+  }, [loading, enabled, form]);
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading one-time passwords over email settings..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  const handleOTPEmailSettingsChange = async (
+    values: OTPEmailSettingsFormValues,
+  ) => {
+    const updateConfigPromise = updateConfig({
+      variables: {
+        appId: project.id,
+        config: {
+          auth: {
+            method: {
+              otp: {
+                email: {
+                  enabled: values.enabled,
+                },
+              },
+            },
+          },
+        },
+      },
+    });
+
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+
+        if (!isPlatform) {
+          openDialog({
+            title: 'Apply your changes',
+            component: <ApplyLocalSettingsDialog />,
+            props: {
+              PaperProps: {
+                className: 'max-w-2xl',
+              },
+            },
+          });
+        }
+      },
+      {
+        loadingMessage:
+          'One-time passwords over email settings are being updated...',
+        successMessage:
+          'One-time passwords over email settings have been updated successfully.',
+        errorMessage:
+          'An error occurred while trying to update one-time passwords over email settings.',
+      },
+    );
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleOTPEmailSettingsChange}>
+        <SettingsContainer
+          title="One-Time Passwords over email"
+          description="Allow users to sign in with a one-time password sent to their email address."
+          slotProps={{
+            submitButton: {
+              disabled: !form.formState.isDirty || maintenanceActive,
+              loading: form.formState.isSubmitting,
+            },
+          }}
+          switchId="enabled"
+          showSwitch
+          className="hidden"
+        />
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/features/orgs/projects/authentication/settings/OTPEmailSettings/index.ts

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

dashboard/src/features/orgs/projects/authentication/settings/components/AppleProviderSettings/AppleProviderSettings.tsx

@@ -50,6 +50,7 @@ const validationSchema = Yup.object({
       is: true,
       then: (schema) => schema.required(),
     }),
+  audience: Yup.string().label('Audience'),
   enabled: Yup.boolean(),
 });
 
@@ -72,7 +73,7 @@ export default function AppleProviderSettings() {
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
-  const { clientId, enabled, keyId, privateKey, teamId } =
+  const { clientId, enabled, keyId, privateKey, teamId, audience } =
     data?.config?.auth?.method?.oauth?.apple || {};
 
   const form = useForm<AppleProviderFormValues>({
@@ -82,6 +83,7 @@ export default function AppleProviderSettings() {
       keyId: keyId || '',
       clientId: clientId || '',
       privateKey: privateKey || '',
+      audience: audience || '',
       enabled: enabled || false,
     },
     resolver: yupResolver(validationSchema),
@@ -94,10 +96,11 @@ export default function AppleProviderSettings() {
         keyId: keyId || '',
         clientId: clientId || '',
         privateKey: privateKey || '',
+        audience: audience || '',
         enabled: enabled || false,
       });
     }
-  }, [loading, teamId, keyId, clientId, privateKey, enabled, form]);
+  }, [loading, teamId, keyId, clientId, privateKey, audience, enabled, form]);
 
   if (loading) {
     return (
@@ -237,6 +240,18 @@ export default function AppleProviderSettings() {
             error={!!formState.errors?.privateKey}
             helperText={formState.errors?.privateKey?.message}
           />
+          <Input
+            {...register('audience')}
+            name="audience"
+            id="audience"
+            label="Audience (optional)"
+            placeholder="Apple Audience"
+            className="col-span-2"
+            fullWidth
+            hideEmptyHelperText
+            error={!!formState.errors?.audience}
+            helperText={formState.errors?.audience?.message}
+          />
           <Input
             name="redirectUrl"
             id="apple-redirectUrl"

dashboard/src/features/orgs/projects/authentication/settings/components/DisableNewUsersSettings/DisableNewUsersSettings.tsx

@@ -42,14 +42,14 @@ export default function DisableNewUsersSettings() {
   const form = useForm<DisableNewUsersFormValues>({
     reValidateMode: 'onSubmit',
     defaultValues: {
-      disabled: !data?.config?.auth?.signUp?.enabled,
+      disabled: data?.config?.auth?.signUp?.disableNewUsers,
     },
   });
 
   useEffect(() => {
     if (!loading) {
       form.reset({
-        disabled: !data?.config?.auth?.signUp?.enabled,
+        disabled: data?.config?.auth?.signUp?.disableNewUsers,
       });
     }
   }, [loading, data, form]);
@@ -58,7 +58,7 @@ export default function DisableNewUsersSettings() {
     return (
       <ActivityIndicator
         delay={1000}
-        label="Loading disabled sign up settings..."
+        label="Loading disabled new users settings..."
         className="justify-center"
       />
     );
@@ -79,7 +79,7 @@ export default function DisableNewUsersSettings() {
         config: {
           auth: {
             signUp: {
-              enabled: !values.disabled,
+              disableNewUsers: values.disabled,
             },
           },
         },
@@ -104,10 +104,10 @@ export default function DisableNewUsersSettings() {
         }
       },
       {
-        loadingMessage: 'Disabling new user sign ups...',
-        successMessage: 'New user sign ups have been disabled successfully.',
+        loadingMessage: 'Disabling new users sign ins...',
+        successMessage: 'New users sign ins have been disabled successfully.',
         errorMessage:
-          'An error occurred while trying to disable new user sign ups.',
+          'An error occurred while trying to disable new users sign ins.',
       },
     );
   };

dashboard/src/features/orgs/projects/authentication/settings/components/DisableSignUpsSettings/DisableSignUpsSettings.tsx

@@ -0,0 +1,134 @@
+import { ApplyLocalSettingsDialog } from '@/components/common/ApplyLocalSettingsDialog';
+import { useDialog } from '@/components/common/DialogProvider';
+import { useUI } from '@/components/common/UIProvider';
+import { Form } from '@/components/form/Form';
+import { SettingsContainer } from '@/components/layout/SettingsContainer';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import {
+  useGetAuthenticationSettingsQuery,
+  useUpdateConfigMutation,
+} from '@/utils/__generated__/graphql';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+
+const validationSchema = Yup.object({
+  disabled: Yup.boolean(),
+});
+
+export type DisableSignUpsFormValues = Yup.InferType<typeof validationSchema>;
+
+export default function DisableSignUpsSettings() {
+  const { openDialog } = useDialog();
+  const isPlatform = useIsPlatform();
+  const { maintenanceActive } = useUI();
+  const localMimirClient = useLocalMimirClient();
+  const { project } = useProject();
+  const [updateConfig] = useUpdateConfigMutation({
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const { data, loading, error } = useGetAuthenticationSettingsQuery({
+    variables: { appId: project?.id },
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const form = useForm<DisableSignUpsFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      disabled: !data?.config?.auth?.signUp?.enabled,
+    },
+  });
+
+  useEffect(() => {
+    if (!loading) {
+      form.reset({
+        disabled: !data?.config?.auth?.signUp?.enabled,
+      });
+    }
+  }, [loading, data, form]);
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading disabled sign up settings..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  const { formState } = form;
+
+  const handleDisableSignUpsChange = async (
+    values: DisableSignUpsFormValues,
+  ) => {
+    const updateConfigPromise = updateConfig({
+      variables: {
+        appId: project.id,
+        config: {
+          auth: {
+            signUp: {
+              enabled: !values.disabled,
+            },
+          },
+        },
+      },
+    });
+
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+
+        if (!isPlatform) {
+          openDialog({
+            title: 'Apply your changes',
+            component: <ApplyLocalSettingsDialog />,
+            props: {
+              PaperProps: {
+                className: 'max-w-2xl',
+              },
+            },
+          });
+        }
+      },
+      {
+        loadingMessage: 'Disabling new users sign ups...',
+        successMessage: 'New users sign ups have been disabled successfully.',
+        errorMessage:
+          'An error occurred while trying to disable new users sign ups.',
+      },
+    );
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleDisableSignUpsChange}>
+        <SettingsContainer
+          title="Disable Sign Ups"
+          description="If set, new users won't be able to sign up."
+          docsLink="https://docs.nhost.io/guides/auth/overview#disable-sign-ups"
+          switchId="disabled"
+          showSwitch
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
+          }}
+          className="hidden"
+        />
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/features/orgs/projects/authentication/settings/components/DisableSignUpsSettings/index.ts

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

dashboard/src/features/orgs/projects/authentication/settings/components/GoogleProviderSettings/GoogleProviderSettings.tsx

@@ -9,10 +9,6 @@ import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
 import { Input } from '@/components/ui/v2/Input';
 import { InputAdornment } from '@/components/ui/v2/InputAdornment';
 import type { BaseProviderSettingsFormValues } from '@/features/orgs/projects/authentication/settings/components/BaseProviderSettings';
-import {
-  BaseProviderSettings,
-  baseProviderValidationSchema,
-} from '@/features/orgs/projects/authentication/settings/components/BaseProviderSettings';
 import {
   useGetSignInMethodsQuery,
   useUpdateConfigMutation,
@@ -28,6 +24,28 @@ import { generateAppServiceUrl } from '@/features/orgs/projects/common/utils/gen
 import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import * as Yup from 'yup';
+
+const googleProviderValidationSchema = Yup.object({
+  clientId: Yup.string()
+    .label('Client ID')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  clientSecret: Yup.string()
+    .label('Client Secret')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  audience: Yup.string().label('Audience'),
+  enabled: Yup.bool(),
+});
+
+export type GoogleProviderFormValues = Yup.InferType<
+  typeof googleProviderValidationSchema
+>;
 
 export default function GoogleProviderSettings() {
   const { project } = useProject();
@@ -45,17 +63,18 @@ export default function GoogleProviderSettings() {
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
-  const { clientId, clientSecret, enabled } =
+  const { clientId, clientSecret, enabled, audience } =
     data?.config?.auth?.method?.oauth?.google || {};
 
-  const form = useForm<BaseProviderSettingsFormValues>({
+  const form = useForm<GoogleProviderFormValues>({
     reValidateMode: 'onSubmit',
     defaultValues: {
       clientId: clientId || '',
       clientSecret: clientSecret || '',
+      audience: audience || '',
       enabled: enabled || false,
     },
-    resolver: yupResolver(baseProviderValidationSchema),
+    resolver: yupResolver(googleProviderValidationSchema),
   });
 
   useEffect(() => {
@@ -63,10 +82,11 @@ export default function GoogleProviderSettings() {
       form.reset({
         clientId: clientId || '',
         clientSecret: clientSecret || '',
+        audience: audience || '',
         enabled: enabled || false,
       });
     }
-  }, [loading, clientId, clientSecret, enabled, form]);
+  }, [loading, clientId, clientSecret, audience, enabled, form]);
 
   if (loading) {
     return (
@@ -82,7 +102,7 @@ export default function GoogleProviderSettings() {
     throw error;
   }
 
-  const { formState, watch } = form;
+  const { formState, watch, register } = form;
   const authEnabled = watch('enabled');
 
   async function handleSubmit(formValues: BaseProviderSettingsFormValues) {
@@ -148,11 +168,44 @@ export default function GoogleProviderSettings() {
           switchId="enabled"
           showSwitch
           className={twMerge(
-            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-x-3 gap-y-4 px-4 py-2',
+            'grid-flow-rows grid grid-cols-2 grid-rows-3 gap-x-3 gap-y-4 px-4 py-2',
             !authEnabled && 'hidden',
           )}
         >
-          <BaseProviderSettings providerName="google" />
+          <Input
+            {...register('clientId')}
+            id="google-clientId"
+            label="Client ID"
+            placeholder="Enter your Client ID"
+            className="col-span-1"
+            fullWidth
+            hideEmptyHelperText
+            error={!!formState.errors?.clientId}
+            helperText={formState.errors?.clientId?.message}
+          />
+          <Input
+            {...register('clientSecret')}
+            id="google-clientSecret"
+            label="Client Secret"
+            placeholder="Enter your Client Secret"
+            className="col-span-1"
+            fullWidth
+            hideEmptyHelperText
+            error={!!formState.errors?.clientSecret}
+            helperText={formState.errors?.clientSecret?.message}
+          />
+          <Input
+            {...register('audience')}
+            name="audience"
+            id="audience"
+            label="Audience (optional)"
+            placeholder="Enter Audience"
+            className="col-span-2"
+            fullWidth
+            hideEmptyHelperText
+            error={!!formState.errors?.audience}
+            helperText={formState.errors?.audience?.message}
+          />
           <Input
             name="redirectUrl"
             id="google-redirectUrl"

dashboard/src/features/orgs/projects/authentication/settings/components/PostmarkSettings/PostmarkSettings.tsx

@@ -19,7 +19,7 @@ import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWith
 
 const validationSchema = yup
   .object({
-    sender: yup.string().label('SMTP Sender').email().required(),
+    sender: yup.string().label('SMTP Sender').required(),
     password: yup.string().label('Password').required(),
   })
   .required();

dashboard/src/features/orgs/projects/authentication/settings/components/SMTPSettings/SMTPSettings.tsx

@@ -30,7 +30,7 @@ const smtpValidationSchema = yup
     user: yup.string().label('Username').required(),
     password: yup.string().label('Password'),
     method: yup.string().required(),
-    sender: yup.string().label('SMTP Sender').email().required(),
+    sender: yup.string().label('SMTP Sender').required(),
   })
   .required();
 

dashboard/src/features/orgs/projects/authentication/settings/gql/getAuthenticationSettings.gql

@@ -15,6 +15,7 @@ query GetAuthenticationSettings($appId: uuid!) {
       }
       signUp {
         enabled
+        disableNewUsers
       }
       session {
         accessToken {

dashboard/src/features/orgs/projects/authentication/users/components/EditUserForm/EditUserForm.tsx

@@ -16,18 +16,20 @@ import { Text } from '@/components/ui/v2/Text';
 import { useRemoteApplicationGQLClient } from '@/features/orgs/hooks/useRemoteApplicationGQLClient';
 import { EditUserPasswordForm } from '@/features/orgs/projects/authentication/users/components/EditUserPasswordForm';
 import { getReadableProviderName } from '@/features/orgs/projects/authentication/users/utils/getReadableProviderName';
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 import { getUserRoles } from '@/features/projects/roles/settings/utils/getUserRoles';
 import { type RemoteAppUser } from '@/pages/orgs/[orgSlug]/projects/[appSubdomain]/users';
 import type { DialogFormProps } from '@/types/common';
-import { copy } from '@/utils/copy';
 import {
   RemoteAppGetUsersDocument,
   useGetProjectLocalesQuery,
   useGetRolesPermissionsQuery,
   useUpdateRemoteAppUserMutation,
 } from '@/utils/__generated__/graphql';
+import { copy } from '@/utils/copy';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useTheme } from '@mui/material';
 import { format } from 'date-fns';
@@ -106,6 +108,8 @@ export default function EditUserForm({
   onDeleteUser,
   roles,
 }: EditUserFormProps) {
+  const isPlatform = useIsPlatform();
+  const localMimirClient = useLocalMimirClient();
   const theme = useTheme();
   const { onDirtyStateChange, openDialog } = useDialog();
   const { project } = useProject();
@@ -196,6 +200,7 @@ export default function EditUserForm({
 
   const { data: dataRoles } = useGetRolesPermissionsQuery({
     variables: { appId: project?.id },
+    ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
   const allAvailableProjectRoles = getUserRoles(
@@ -206,6 +211,7 @@ export default function EditUserForm({
     variables: {
       appId: project?.id,
     },
+    ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
   const allowedLocales = data?.config?.auth?.user?.locale?.allowed || [];

dashboard/src/features/orgs/projects/authentication/users/components/EditUserPasswordForm/EditUserPasswordForm.tsx

@@ -3,10 +3,10 @@ import { Form } from '@/components/form/Form';
 import { Alert } from '@/components/ui/v2/Alert';
 import { Button } from '@/components/ui/v2/Button';
 import { Input } from '@/components/ui/v2/Input';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
+import { useRemoteApplicationGQLClient } from '@/features/orgs/hooks/useRemoteApplicationGQLClient';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 import type { DialogFormProps } from '@/types/common';
-import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import type { RemoteAppGetUsersQuery } from '@/utils/__generated__/graphql';
 import {
   useGetSignInMethodsQuery,
@@ -38,10 +38,10 @@ export default function EditUserPasswordForm({
     client: remoteProjectGQLClient,
   });
   const { closeDialog } = useDialog();
-  const { currentProject } = useCurrentWorkspaceAndProject();
+  const { project } = useProject();
   const { data } = useGetSignInMethodsQuery({
-    variables: { appId: currentProject?.id },
-    skip: !currentProject?.id,
+    variables: { appId: project?.id },
+    skip: !project?.id,
   });
 
   const passwordMinLength =

dashboard/src/features/orgs/projects/authentication/users/components/UsersBody/UsersBody.tsx

@@ -15,6 +15,8 @@ import { Text } from '@/components/ui/v2/Text';
 import { useRemoteApplicationGQLClient } from '@/features/orgs/hooks/useRemoteApplicationGQLClient';
 import type { EditUserFormValues } from '@/features/orgs/projects/authentication/users/components/EditUserForm';
 import { getReadableProviderName } from '@/features/orgs/projects/authentication/users/utils/getReadableProviderName';
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
 import { getUserRoles } from '@/features/projects/roles/settings/utils/getUserRoles';
@@ -61,6 +63,8 @@ export interface UsersBodyProps {
 
 export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
   const theme = useTheme();
+  const isPlatform = useIsPlatform();
+  const localMimirClient = useLocalMimirClient();
   const { openAlertDialog, openDrawer, closeDrawer } = useDialog();
   const { project } = useProject();
   const remoteProjectGQLClient = useRemoteApplicationGQLClient();
@@ -88,6 +92,7 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
    */
   const { data: dataRoles } = useGetRolesPermissionsQuery({
     variables: { appId: project?.id },
+    ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
   const { allowed: allowedRoles } = dataRoles?.config?.auth?.user?.roles || {};

dashboard/src/features/orgs/projects/common/components/ApplicationPaused/ApplicationPaused.tsx

@@ -1,17 +1,11 @@
 import { Container } from '@/components/layout/Container';
 import { Modal } from '@/components/ui/v1/Modal';
-import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
-import { Box } from '@/components/ui/v2/Box';
 import { Button } from '@/components/ui/v2/Button';
-import { Text } from '@/components/ui/v2/Text';
 import { TransferProjectDialog } from '@/features/orgs/components/common/TransferProjectDialog';
 import { ApplicationInfo } from '@/features/orgs/projects/common/components/ApplicationInfo';
-import { ApplicationLockedReason } from '@/features/orgs/projects/common/components/ApplicationLockedReason';
-import { ApplicationPausedReason } from '@/features/orgs/projects/common/components/ApplicationPausedReason';
-import { ApplicationPausedSymbol } from '@/features/orgs/projects/common/components/ApplicationPausedSymbol';
+import { ApplicationPausedBanner } from '@/features/orgs/projects/common/components/ApplicationPausedBanner';
 import { RemoveApplicationModal } from '@/features/orgs/projects/common/components/RemoveApplicationModal';
 import { StagingMetadata } from '@/features/orgs/projects/common/components/StagingMetadata';
-import { useAppPausedReason } from '@/features/orgs/projects/common/hooks/useAppPausedReason';
 import { useIsCurrentUserOwner } from '@/features/orgs/projects/common/hooks/useIsCurrentUserOwner';
 import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
@@ -19,46 +13,19 @@ import {
   GetAllWorkspacesAndProjectsDocument,
   useUnpauseApplicationMutation,
 } from '@/generated/graphql';
-import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { useState } from 'react';
 
 export default function ApplicationPaused() {
   const { org } = useCurrentOrg();
-  const { project, refetch: refetchProject } = useProject();
+  const { project } = useProject();
   const isOwner = useIsCurrentUserOwner();
   const [transferProjectDialogOpen, setTransferProjectDialogOpen] =
     useState(false);
 
   const [showDeletingModal, setShowDeletingModal] = useState(false);
-  const [unpauseApplication, { loading: changingApplicationStateLoading }] =
-    useUnpauseApplicationMutation({
-      refetchQueries: [{ query: GetAllWorkspacesAndProjectsDocument }],
-    });
-
-  const { isLocked, lockedReason, freeAndLiveProjectsNumberExceeded, loading } =
-    useAppPausedReason();
-
-  async function handleTriggerUnpausing() {
-    await execPromiseWithErrorToast(
-      async () => {
-        await unpauseApplication({ variables: { appId: project.id } });
-        await new Promise((resolve) => {
-          setTimeout(resolve, 1000);
-        });
-        await refetchProject();
-      },
-      {
-        loadingMessage: 'Starting the project...',
-        successMessage: 'The project has been started successfully.',
-        errorMessage:
-          'An error occurred while waking up the project. Please try again.',
-      },
-    );
-  }
-
-  if (loading) {
-    return <ActivityIndicator label="Loading user data..." delay={1000} />;
-  }
+  useUnpauseApplicationMutation({
+    refetchQueries: [{ query: GetAllWorkspacesAndProjectsDocument }],
+  });
 
   return (
     <>
@@ -69,73 +36,46 @@ export default function ApplicationPaused() {
       >
         <RemoveApplicationModal
           close={() => setShowDeletingModal(false)}
-          title={`Remove project ${project.name}?`}
-          description={`The project ${project.name} will be removed. All data will be lost and there will be no way to
+          title={`Remove project ${project?.name}?`}
+          description={`The project ${project?.name} will be removed. All data will be lost and there will be no way to
           recover the app once it has been deleted.`}
           className="z-50"
         />
       </Modal>
 
       <Container className="mx-auto grid max-w-lg grid-flow-row gap-6 text-center">
-        <div className="mx-auto flex w-centImage flex-col text-center">
-          <ApplicationPausedSymbol isLocked={isLocked} />
-        </div>
-
-        <Box className="grid grid-flow-row gap-6">
-          <Text variant="h3" component="h1">
-            {project.name} is {isLocked ? 'locked' : 'paused'}
-          </Text>
-          {isLocked ? (
-            <ApplicationLockedReason reason={lockedReason} />
-          ) : (
+        <div className="mx-auto flex w-full max-w-xs flex-col gap-4">
+          <ApplicationPausedBanner
+            alertClassName="items-center"
+            textContainerClassName="items-center text-center"
+          />
+          {org && (
             <>
-              <ApplicationPausedReason
-                freeAndLiveProjectsNumberExceeded={
-                  freeAndLiveProjectsNumberExceeded
-                }
-              />
-              <div className="grid grid-flow-row gap-4">
-                {org && (
-                  <>
-                    <Button
-                      className="mx-auto w-full max-w-xs"
-                      onClick={() => setTransferProjectDialogOpen(true)}
-                    >
-                      Transfer
-                    </Button>
-                    <TransferProjectDialog
-                      open={transferProjectDialogOpen}
-                      setOpen={setTransferProjectDialogOpen}
-                    />
-                  </>
-                )}
-                <Button
-                  variant="borderless"
-                  className="mx-auto w-full max-w-xs"
-                  loading={changingApplicationStateLoading}
-                  disabled={
-                    changingApplicationStateLoading ||
-                    freeAndLiveProjectsNumberExceeded
-                  }
-                  onClick={handleTriggerUnpausing}
-                >
-                  Wake Up
-                </Button>
+              <Button
+                className="w-full"
+                onClick={() => setTransferProjectDialogOpen(true)}
+              >
+                Transfer
+              </Button>
 
-                {isOwner && (
-                  <Button
-                    color="error"
-                    variant="outlined"
-                    className="mx-auto w-full max-w-xs"
-                    onClick={() => setShowDeletingModal(true)}
-                  >
-                    Delete Project
-                  </Button>
-                )}
-              </div>
+              <TransferProjectDialog
+                open={transferProjectDialogOpen}
+                setOpen={setTransferProjectDialogOpen}
+              />
             </>
           )}
-        </Box>
+
+          {isOwner && (
+            <Button
+              color="error"
+              variant="outlined"
+              className="mx-auto w-full max-w-xs"
+              onClick={() => setShowDeletingModal(true)}
+            >
+              Delete Project
+            </Button>
+          )}
+        </div>
 
         <StagingMetadata>
           <ApplicationInfo />

dashboard/src/features/orgs/projects/common/components/ApplicationPausedBanner/ApplicationPausedBanner.tsx

@@ -0,0 +1,111 @@
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Alert } from '@/components/ui/v2/Alert';
+import { Button } from '@/components/ui/v3/button';
+import { useAppPausedReason } from '@/features/orgs/projects/common/hooks/useAppPausedReason';
+import { useAppState } from '@/features/orgs/projects/common/hooks/useAppState';
+import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import { cn } from '@/lib/utils';
+import { ApplicationStatus } from '@/types/application';
+import { useUnpauseApplicationMutation } from '@/utils/__generated__/graphql';
+import Image from 'next/image';
+import { useCallback } from 'react';
+
+export default function ApplicationPausedBanner({
+  alertClassName,
+  textContainerClassName,
+  wakeUpButtonClassName,
+}: {
+  alertClassName?: string;
+  textContainerClassName?: string;
+  wakeUpButtonClassName?: string;
+}) {
+  const { org } = useCurrentOrg();
+  const { state } = useAppState();
+  const { freeAndLiveProjectsNumberExceeded } = useAppPausedReason();
+  const { project, refetch: refetchProject } = useProject();
+
+  const [unpauseApplication, { loading: changingApplicationStateLoading }] =
+    useUnpauseApplicationMutation({
+      variables: {
+        appId: project?.id,
+      },
+    });
+
+  const handleTriggerUnpausing = useCallback(async () => {
+    await execPromiseWithErrorToast(
+      async () => {
+        await unpauseApplication({ variables: { appId: project.id } });
+        await new Promise((resolve) => {
+          setTimeout(resolve, 1000);
+        });
+        await refetchProject();
+      },
+      {
+        loadingMessage: 'Starting the project...',
+        successMessage: 'The project has been started successfully.',
+        errorMessage:
+          'An error occurred while waking up the project. Please try again.',
+      },
+    );
+  }, [unpauseApplication, project?.id, refetchProject]);
+
+  return (
+    <Alert
+      severity="warning"
+      className={cn(
+        'flex w-full flex-col items-start justify-between gap-4 p-4',
+        alertClassName,
+      )}
+    >
+      <Image
+        src="/assets/PausedApp.svg"
+        className="mt-1"
+        alt="Closed Eye"
+        width={52}
+        height={40}
+      />
+
+      <div
+        className={cn(
+          'flex h-full w-full flex-col gap-2',
+          textContainerClassName,
+        )}
+      >
+        <p className="w-full">
+          Project <b>{project?.name}</b> is paused.
+        </p>
+        <p className="w-full">
+          Wake up your project to make it accessible again. Once reactivated,
+          all features will be fully functional. Go to settings to manage your
+          project.
+        </p>
+        {org?.plan?.isFree && (
+          <p>
+            Projects under your Personal Organization will stop responding to
+            API calls after 7 days of inactivity, so consider transferring the
+            project to a <b>Pro Organization</b> to avoid auto-sleep.
+          </p>
+        )}
+        {freeAndLiveProjectsNumberExceeded && (
+          <p>
+            Additionally, only 1 free project can be active at any given time,
+            so please pause your current active free project before unpausing
+            another.
+          </p>
+        )}
+      </div>
+      {state === ApplicationStatus.Paused && (
+        <Button
+          variant="outline"
+          className={cn('w-full', wakeUpButtonClassName)}
+          disabled={changingApplicationStateLoading}
+          onClick={handleTriggerUnpausing}
+        >
+          {changingApplicationStateLoading ? <ActivityIndicator /> : 'Wake up'}
+        </Button>
+      )}
+    </Alert>
+  );
+}

dashboard/src/features/orgs/projects/common/components/ApplicationPausedBanner/index.ts

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

dashboard/src/features/orgs/projects/common/components/ApplicationPausedReason/ApplicationPausedReason.tsx

@@ -1,36 +0,0 @@
-import { Alert } from '@/components/ui/v2/Alert';
-import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
-
-interface ApplicationPausedReasonProps {
-  freeAndLiveProjectsNumberExceeded?: boolean;
-}
-
-export default function ApplicationPausedReason({
-  freeAndLiveProjectsNumberExceeded,
-}: ApplicationPausedReasonProps) {
-  const { org } = useCurrentOrg();
-
-  return (
-    <Alert
-      severity="warning"
-      className="flex flex-col w-full max-w-xs gap-4 p-6 mx-auto text-left"
-    >
-      {org?.plan?.isFree ? (
-        <p>
-          Projects under your Personal Organization will stop responding to API
-          calls after 7 days of inactivity, so consider transferring the project
-          to a <b>Pro Organization</b> to avoid auto-sleep.
-        </p>
-      ) : (
-        <p className="text-center">Your project is Paused.</p>
-      )}
-      {freeAndLiveProjectsNumberExceeded && (
-        <p className="text-center">
-          Additionally, only 1 free project can be active at any given time, so
-          please pause your current active free project before unpausing
-          another.
-        </p>
-      )}
-    </Alert>
-  );
-}

dashboard/src/features/orgs/projects/common/components/ApplicationPausedReason/index.ts

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

dashboard/src/features/orgs/projects/common/components/StagingMetadata/StagingMetadata.tsx

@@ -48,7 +48,7 @@ export default function StagingMetadata({
 }: PropsWithChildren<unknown>) {
   return (
     isDevOrStaging() && (
-      <div className="mx-auto mt-10 max-w-sm">
+      <div className="mx-auto max-w-sm">
         <Box className="mx-auto grid grid-flow-row justify-items-center rounded-md border p-5 text-center">
           <Status status={StatusEnum.Deploying}>Internal info</Status>
           {children}

dashboard/src/features/orgs/projects/common/components/WorkspaceAndProjectList/WorkspaceAndProjectList.tsx

@@ -1,213 +0,0 @@
-import { useUI } from '@/components/common/UIProvider';
-import { StateBadge } from '@/components/presentational/StateBadge';
-import type { DeploymentStatus } from '@/components/presentational/StatusCircle';
-import { StatusCircle } from '@/components/presentational/StatusCircle';
-import type { BoxProps } from '@/components/ui/v2/Box';
-import { Box } from '@/components/ui/v2/Box';
-import type { ButtonProps } from '@/components/ui/v2/Button';
-import { Button } from '@/components/ui/v2/Button';
-import { Divider } from '@/components/ui/v2/Divider';
-import { PlusCircleIcon } from '@/components/ui/v2/icons/PlusCircleIcon';
-import { SearchIcon } from '@/components/ui/v2/icons/SearchIcon';
-import type { InputProps } from '@/components/ui/v2/Input';
-import { Input } from '@/components/ui/v2/Input';
-import { Link } from '@/components/ui/v2/Link';
-import { List } from '@/components/ui/v2/List';
-import { ListItem } from '@/components/ui/v2/ListItem';
-import { Text } from '@/components/ui/v2/Text';
-import { DeploymentStatusMessage } from '@/features/projects/deployments/components/DeploymentStatusMessage';
-import type { ApplicationState, Workspace } from '@/types/application';
-import { ApplicationStatus } from '@/types/application';
-import { getApplicationStatusString } from '@/utils/helpers';
-import debounce from 'lodash.debounce';
-import Image from 'next/image';
-import NavLink from 'next/link';
-import type { ChangeEvent, PropsWithoutRef } from 'react';
-import { Fragment, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-
-export interface WorkspaceAndProjectListProps extends BoxProps {
-  /**
-   * List of workspaces to be displayed.
-   */
-  workspaces: Workspace[];
-  /**
-   * Props to be passed to individual slots.
-   */
-  slotProps?: {
-    root?: BoxProps;
-    header?: BoxProps;
-    search?: PropsWithoutRef<InputProps>;
-    button?: PropsWithoutRef<ButtonProps>;
-  };
-}
-
-function checkStatusOfTheApplication(stateHistory: ApplicationState[] | []) {
-  if (stateHistory.length === 0) {
-    return ApplicationStatus.Empty;
-  }
-
-  if (stateHistory[0].stateId === undefined) {
-    return ApplicationStatus.Empty;
-  }
-
-  return stateHistory[0].stateId;
-}
-
-export default function WorkspaceAndProjectList({
-  workspaces,
-  className,
-  slotProps = {},
-  ...props
-}: WorkspaceAndProjectListProps) {
-  const [query, setQuery] = useState('');
-  const { maintenanceActive } = useUI();
-
-  const handleQueryChange = debounce((event: ChangeEvent<HTMLInputElement>) => {
-    slotProps?.search?.onChange?.(event);
-    setQuery(event.target.value);
-  }, 500);
-
-  const filteredWorkspaces = workspaces
-    .map((workspace) => ({
-      ...workspace,
-      projects: workspace.projects.filter((project) =>
-        project.name.toLowerCase().includes(query.toLowerCase()),
-      ),
-    }))
-    .filter((workspace) => workspace.projects.length > 0);
-
-  return (
-    <Box
-      {...props}
-      {...slotProps.root}
-      className={twMerge(
-        'grid grid-flow-row content-start gap-4',
-        className,
-        slotProps.root?.className,
-      )}
-    >
-      <Box
-        {...slotProps.header}
-        className={twMerge(
-          'grid grid-flow-col place-content-between items-center',
-          slotProps.header?.className,
-        )}
-      >
-        <Text variant="h2" component="h1" className="hidden md:block">
-          My Projects
-        </Text>
-
-        <Input
-          placeholder="Find Project"
-          startAdornment={
-            <SearchIcon
-              className="w-4 h-4 ml-2 -mr-1 shrink-0"
-              sx={{ color: 'text.disabled' }}
-            />
-          }
-          {...slotProps.search}
-          onChange={handleQueryChange}
-        />
-
-        <NavLink href="/new" passHref legacyBehavior>
-          <Button
-            variant="outlined"
-            color="secondary"
-            startIcon={<PlusCircleIcon />}
-            disabled={maintenanceActive}
-            {...slotProps.button}
-          >
-            New Project
-          </Button>
-        </NavLink>
-      </Box>
-
-      <Box className="grid grid-flow-row gap-8 my-8">
-        {filteredWorkspaces.map((workspace) => (
-          <div key={workspace.slug}>
-            <NavLink href={`/${workspace.slug}`} passHref legacyBehavior>
-              <Link
-                href={`${workspace.slug}`}
-                className="mb-1.5 block font-medium"
-                underline="none"
-                sx={{ color: 'text.primary' }}
-              >
-                {workspace.name}
-              </Link>
-            </NavLink>
-
-            <List className="grid grid-flow-row border-y">
-              {workspace.projects.map((project, index) => {
-                const [latestDeployment] = project.deployments;
-
-                return (
-                  <Fragment key={project.slug}>
-                    <ListItem.Root
-                      secondaryAction={
-                        <div className="grid grid-flow-col gap-px">
-                          {latestDeployment && (
-                            <div className="flex self-center mr-2 align-middle">
-                              <StatusCircle
-                                status={
-                                  latestDeployment.deploymentStatus as DeploymentStatus
-                                }
-                              />
-                            </div>
-                          )}
-
-                          <StateBadge
-                            state={checkStatusOfTheApplication(
-                              project.appStates,
-                            )}
-                            desiredState={project.desiredState}
-                            title={getApplicationStatusString(
-                              checkStatusOfTheApplication(project.appStates),
-                            )}
-                          />
-                        </div>
-                      }
-                    >
-                      <NavLink
-                        href={`${workspace?.slug}/${project.slug}`}
-                        passHref
-                        className='w-full'
-                        legacyBehavior>
-                        <ListItem.Button className="rounded-none">
-                          <ListItem.Avatar>
-                            <div className="w-10 h-10 overflow-hidden rounded-lg">
-                              <Image
-                                src="/logos/new.svg"
-                                alt="Nhost Logo"
-                                width={40}
-                                height={40}
-                              />
-                            </div>
-                          </ListItem.Avatar>
-
-                          <ListItem.Text
-                            primary={project.name}
-                            secondary={
-                              <DeploymentStatusMessage
-                                appCreatedAt={project.createdAt}
-                                deployment={latestDeployment}
-                              />
-                            }
-                          />
-                        </ListItem.Button>
-                      </NavLink>
-                    </ListItem.Root>
-
-                    {index < workspace.projects.length - 1 && (
-                      <Divider component="li" role="listitem" />
-                    )}
-                  </Fragment>
-                );
-              })}
-            </List>
-          </div>
-        ))}
-      </Box>
-    </Box>
-  );
-}

dashboard/src/features/orgs/projects/common/components/WorkspaceAndProjectList/index.ts

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

dashboard/src/features/orgs/projects/common/components/WorkspaceSidebar/Resource.tsx

@@ -1,43 +0,0 @@
-import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
-import { Text } from '@/components/ui/v2/Text';
-import { useTheme } from '@mui/material';
-import Image from 'next/image';
-
-export interface ResourceProps {
-  text: string;
-  logo: string;
-  link: string;
-}
-
-export default function Resource({ text, logo, link }: ResourceProps) {
-  const theme = useTheme();
-
-  return (
-    <a
-      href={link}
-      target="_blank"
-      rel="noreferrer"
-      className="flex justify-between py-1 align-middle"
-    >
-      <div className="flex items-center align-middle">
-        <Image
-          src={
-            theme.palette.mode === 'dark'
-              ? `/logos/light/${logo}.svg`
-              : `/logos/${logo}.svg`
-          }
-          alt={text}
-          width={20}
-          height={20}
-        />
-
-        <Text className="ml-2 inline-flex self-center align-middle font-medium">
-          {text}
-        </Text>
-      </div>
-      <div className="flex self-center">
-        <ArrowSquareOutIcon className="h-4 w-4" />
-      </div>
-    </a>
-  );
-}

dashboard/src/features/orgs/projects/common/components/WorkspaceSidebar/WorkspaceSidebar.tsx

@@ -1,168 +0,0 @@
-import { useDialog } from '@/components/common/DialogProvider';
-import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
-import type { BoxProps } from '@/components/ui/v2/Box';
-import { Box } from '@/components/ui/v2/Box';
-import { Button } from '@/components/ui/v2/Button';
-import { GitHubIcon } from '@/components/ui/v2/icons/GitHubIcon';
-import { PlusCircleIcon } from '@/components/ui/v2/icons/PlusCircleIcon';
-import { List } from '@/components/ui/v2/List';
-import { ListItem } from '@/components/ui/v2/ListItem';
-import { Text } from '@/components/ui/v2/Text';
-import { Announcements } from '@/features/projects/common/components/Announcements';
-import { EditWorkspaceNameForm } from '@/features/projects/workspaces/components/EditWorkspaceNameForm';
-import type { Workspace } from '@/types/application';
-import Image from 'next/image';
-import NavLink from 'next/link';
-import { twMerge } from 'tailwind-merge';
-import Resource from './Resource';
-
-export interface WorkspaceSidebarProps extends BoxProps {
-  /**
-   * List of workspaces to be displayed.
-   */
-  workspaces: Workspace[];
-}
-
-export default function WorkspaceSidebar({
-  className,
-  workspaces,
-  ...props
-}: WorkspaceSidebarProps) {
-  const { openDialog } = useDialog();
-
-  return (
-    <Box
-      component="aside"
-      className={twMerge(
-        'grid w-full grid-flow-row content-start gap-8 md:grid',
-        className,
-      )}
-      {...props}
-    >
-      <Announcements />
-
-      <section className="grid grid-flow-row gap-2">
-        <Text color="secondary">My Workspaces</Text>
-
-        {workspaces.length > 0 ? (
-          <List className="grid grid-flow-row gap-2">
-            {workspaces.map(({ id, name, slug }) => (
-              <ListItem.Root key={id}>
-                <NavLink href={`/${slug}`} passHref className='w-full' legacyBehavior>
-                  <ListItem.Button
-                    dense
-                    aria-label={`View ${name}`}
-                    className="!p-1"
-                  >
-                    <ListItem.Avatar className="w-8 h-8">
-                      <div className="inline-block w-8 h-8 overflow-hidden rounded-lg">
-                        <Image
-                          src="/logos/new.svg"
-                          alt="Nhost Logo"
-                          width={32}
-                          height={32}
-                        />
-                      </div>
-                    </ListItem.Avatar>
-                    <ListItem.Text primary={name} />
-                  </ListItem.Button>
-                </NavLink>
-              </ListItem.Root>
-            ))}
-          </List>
-        ) : (
-          <ActivityIndicator
-            label="Creating your first workspace..."
-            className="py-1"
-          />
-        )}
-
-        <Button
-          variant="borderless"
-          color="secondary"
-          startIcon={<PlusCircleIcon />}
-          className="justify-self-start"
-          onClick={() => {
-            openDialog({
-              title: (
-                <span className="grid grid-flow-row">
-                  <span>New Workspace</span>
-
-                  <Text variant="subtitle1" component="span">
-                    Invite team members to workspaces to work collaboratively.
-                  </Text>
-                </span>
-              ),
-              component: <EditWorkspaceNameForm />,
-            });
-          }}
-        >
-          New Workspace
-        </Button>
-      </section>
-
-      <section className="grid grid-flow-row gap-2">
-        <Text color="secondary">Resources</Text>
-
-        <div className="grid grid-flow-row gap-2">
-          <Resource
-            text="Documentation"
-            logo="Note"
-            link="https://docs.nhost.io"
-          />
-          <Resource
-            text="JavaScript Client"
-            logo="js"
-            link="https://docs.nhost.io/reference/javascript/"
-          />
-          <Resource
-            text="Nhost CLI"
-            logo="CLI"
-            link="https://docs.nhost.io/platform/cli"
-          />
-        </div>
-      </section>
-
-      <section className="grid grid-flow-row gap-2">
-        <NavLink
-          href="https://github.com/nhost/nhost"
-          passHref
-          target="_blank"
-          rel="noreferrer noopener"
-          legacyBehavior>
-          <Button
-            className="grid w-full grid-flow-col gap-1"
-            variant="outlined"
-            color="secondary"
-            startIcon={<GitHubIcon />}
-          >
-            Star us on GitHub
-          </Button>
-        </NavLink>
-
-        <NavLink
-          href="https://discord.com/invite/9V7Qb2U"
-          passHref
-          target="_blank"
-          rel="noreferrer noopener"
-          legacyBehavior>
-          <Button
-            className="grid w-full grid-flow-col gap-1"
-            variant="outlined"
-            color="secondary"
-            aria-labelledby="discord-button-label"
-          >
-            <Image
-              src="/assets/brands/discord.svg"
-              alt="Discord Logo"
-              width={24}
-              height={24}
-            />
-
-            <span id="discord-button-label">Join Discord</span>
-          </Button>
-        </NavLink>
-      </section>
-    </Box>
-  );
-}

dashboard/src/features/orgs/projects/common/components/WorkspaceSidebar/index.ts

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

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

@@ -159,9 +159,6 @@ export default function TOMLEditor() {
             height="100%"
             width="100%"
             theme={theme.palette.mode === 'light' ? bbedit : githubDark}
-            basicSetup={{
-              searchKeymap: false,
-            }}
             extensions={[StreamLanguage.define(toml)]}
             onChange={onChange}
           />

dashboard/src/features/orgs/projects/common/hooks/useAppPausedReason/useAppPausedReason.ts

@@ -25,7 +25,7 @@ export default function useAppPausedReason(): {
   });
 
   const { data: isLockedData } = useGetProjectIsLockedQuery({
-    variables: { appId: project.id },
+    variables: { appId: project?.id },
     skip: !project,
   });
 

dashboard/src/features/orgs/projects/common/hooks/useAppState/useAppState.ts

@@ -1,4 +1,4 @@
-import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { useProjectWithState } from '@/features/orgs/projects/hooks/useProjectWithState';
 import { ApplicationStatus } from '@/types/application';
 
 /**
@@ -9,7 +9,7 @@ export default function useAppState(): {
   state: ApplicationStatus;
   message?: string;
 } {
-  const { project } = useProject({ poll: true });
+  const { project } = useProjectWithState();
   const noApplication = !project;
 
   if (noApplication) {

dashboard/src/features/orgs/projects/common/hooks/useIsFileStoreSupported/index.tsx

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

dashboard/src/features/orgs/projects/common/hooks/useIsFileStoreSupported/useIsFileStoreSupported.tsx

@@ -0,0 +1,44 @@
+
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { useGetConfiguredVersionsQuery } from '@/utils/__generated__/graphql';
+import { useEffect, useState } from 'react';
+
+function compareSemver(v1: string, v2: string): number {
+  const parse = (v: string) => v.split('.').map(Number);
+  const [a, b] = [parse(v1), parse(v2)];
+  for (let i = 0; i < 3; i += 1) {
+    if (a[i] > b[i]) { return 1; }
+    if (a[i] < b[i]) { return -1; }
+  }
+  return 0;
+}
+
+const MIN_VERSION_WITH_FILE_STORE_SUPPORT = '0.6.2';
+
+export default function useIsFileStoreSupported() {
+  const [isFileStoreSupported, setIsFileStoreSupported] = useState<boolean | null>(null);
+  const { project } = useProject();
+  const localMimirClient = useLocalMimirClient();
+  const isPlatform = useIsPlatform();
+
+  const { data, loading, error } = useGetConfiguredVersionsQuery({
+    variables: { appId: project?.id },
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  useEffect(() => {
+    if (!loading && data?.config?.ai?.version) {
+      setIsFileStoreSupported(compareSemver(data.config.ai.version, MIN_VERSION_WITH_FILE_STORE_SUPPORT) >= 0);
+    } 
+  }, [data, loading]);
+
+  return {
+    isFileStoreSupported,
+    version: data?.config?.ai?.version,
+    loading,
+    error,
+  };
+
+}

dashboard/src/features/orgs/projects/common/hooks/useProjectRedirectWhenReady/useProjectRedirectWhenReady.ts

@@ -24,7 +24,7 @@ export default function useProjectRedirectWhenReady(
   const { data, client, startPolling, ...rest } = useGetApplicationStateQuery({
     ...options,
     variables: { ...options.variables, appId: project?.id },
-    skip: !project.id,
+    skip: !project?.id,
   });
 
   useEffect(() => {

dashboard/src/features/orgs/projects/database/dataGrid/components/BaseColumnForm/BaseColumnForm.tsx

@@ -11,12 +11,12 @@ import { Text } from '@/components/ui/v2/Text';
 import type {
   ColumnType,
   DatabaseColumn,
-} from '@/features/database/dataGrid/types/dataBrowser';
+} from '@/features/orgs/projects/database/dataGrid/types/dataBrowser';
 import {
   identityTypes,
   postgresFunctions,
   postgresTypeGroups,
-} from '@/features/database/dataGrid/utils/postgresqlConstants';
+} from '@/features/orgs/projects/database/dataGrid/utils/postgresqlConstants';
 import type { DialogFormProps } from '@/types/common';
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
@@ -102,7 +102,7 @@ export default function BaseColumnForm({
   return (
     <Form
       onSubmit={handleExternalSubmit}
-      className="flex flex-col content-between flex-auto overflow-hidden border-t-1"
+      className="flex flex-auto flex-col content-between overflow-hidden border-t-1"
     >
       <div className="flex-auto overflow-y-auto">
         <section className="grid grid-cols-8 px-6 py-3">
@@ -184,7 +184,7 @@ export default function BaseColumnForm({
                   </Text>
                 </span>
               }
-              className="w-full col-span-8 py-3 m-0 sm:col-span-6 sm:col-start-3 sm:ml-1"
+              className="col-span-8 m-0 w-full py-3 sm:col-span-6 sm:col-start-3 sm:ml-1"
               onChange={(_event, checked) => {
                 if (checked) {
                   setDefaultValueInputText('');
@@ -197,7 +197,7 @@ export default function BaseColumnForm({
 
         <Box
           component="section"
-          className="grid grid-cols-8 px-6 py-3 border-t-1"
+          className="grid grid-cols-8 border-t-1 px-6 py-3"
         >
           <ControlledAutocomplete
             id="defaultValue"
@@ -249,7 +249,7 @@ export default function BaseColumnForm({
           />
 
           <ControlledCheckbox
-            className="w-full col-span-8 py-3 m-0 sm:col-span-6 sm:col-start-3 sm:ml-1"
+            className="col-span-8 m-0 w-full py-3 sm:col-span-6 sm:col-start-3 sm:ml-1"
             name="isNullable"
             label={
               <span className="inline-grid grid-flow-row">
@@ -269,7 +269,7 @@ export default function BaseColumnForm({
           />
 
           <ControlledCheckbox
-            className="w-full col-span-8 py-3 m-0 sm:col-span-6 sm:col-start-3 sm:ml-1"
+            className="col-span-8 m-0 w-full py-3 sm:col-span-6 sm:col-start-3 sm:ml-1"
             name="isUnique"
             label={
               <span className="inline-grid grid-flow-row">
@@ -306,7 +306,7 @@ export default function BaseColumnForm({
         </Box>
       </div>
 
-      <Box className="grid justify-between flex-shrink-0 grid-flow-col gap-3 p-2 border-t-1">
+      <Box className="grid flex-shrink-0 grid-flow-col justify-between gap-3 border-t-1 p-2">
         <Button
           variant="borderless"
           color="secondary"