From d261b91a659bece60d7169ca66c4a9e910c03287 Mon Sep 17 00:00:00 2001
From: Sam Rose <hello@samwho.dev>
Date: Thu, 24 Apr 2025 12:32:26 +0100
Subject: [PATCH 1/7] New endpoint to set feature flag overrides.

---
 packages/backend-core/src/constants/misc.ts         |  1 +
 packages/backend-core/src/context/mainContext.ts    | 11 +++++++++++
 packages/backend-core/src/context/types.ts          |  1 +
 .../src/middleware/featureFlagCookie.ts             | 13 +++++++++++++
 packages/backend-core/src/middleware/index.ts       |  1 +
 packages/server/src/api/controllers/features        |  7 +++++++
 packages/server/src/api/index.ts                    |  1 +
 packages/server/src/api/routes/features.ts          |  8 ++++++++
 packages/types/src/api/web/app/features.ts          |  3 +++
 packages/types/src/api/web/app/index.ts             |  1 +
 packages/types/src/api/web/cookies.ts               |  4 ++++
 packages/types/src/sdk/featureFlag.ts               |  3 +++
 12 files changed, 54 insertions(+)
 create mode 100644 packages/backend-core/src/middleware/featureFlagCookie.ts
 create mode 100644 packages/server/src/api/controllers/features
 create mode 100644 packages/server/src/api/routes/features.ts
 create mode 100644 packages/types/src/api/web/app/features.ts

diff --git a/packages/backend-core/src/constants/misc.ts b/packages/backend-core/src/constants/misc.ts
index e2fd975e409..1fa8d6e9269 100644
--- a/packages/backend-core/src/constants/misc.ts
+++ b/packages/backend-core/src/constants/misc.ts
@@ -9,6 +9,7 @@ export enum Cookie {
   ACCOUNT_RETURN_URL = "budibase:account:returnurl",
   DatasourceAuth = "budibase:datasourceauth",
   OIDC_CONFIG = "budibase:oidc:config",
+  FeatureFlags = "budibase:featureflags",
 }
 
 export { Header } from "@budibase/shared-core"
diff --git a/packages/backend-core/src/context/mainContext.ts b/packages/backend-core/src/context/mainContext.ts
index 22b937db88f..c04be33dcb5 100644
--- a/packages/backend-core/src/context/mainContext.ts
+++ b/packages/backend-core/src/context/mainContext.ts
@@ -460,6 +460,17 @@ export function setFeatureFlags(key: string, value: Record<string, boolean>) {
   context.featureFlagCache[key] = value
 }
 
+export function getFeatureFlagOverrides(): Record<string, boolean> {
+  return getCurrentContext()?.featureFlagOverrides || {}
+}
+
+export function doInFeatureFlagOverrideContext<T>(
+  value: Record<string, boolean>,
+  callback: () => Promise<T>
+) {
+  return newContext({ featureFlagOverrides: value }, callback)
+}
+
 export function getTableForView(viewId: string): Table | undefined {
   const context = getCurrentContext()
   if (!context) {
diff --git a/packages/backend-core/src/context/types.ts b/packages/backend-core/src/context/types.ts
index c2cb966731c..b34ef8c1b76 100644
--- a/packages/backend-core/src/context/types.ts
+++ b/packages/backend-core/src/context/types.ts
@@ -24,5 +24,6 @@ export type ContextMap = {
   featureFlagCache?: {
     [key: string]: Record<string, boolean>
   }
+  featureFlagOverrides?: Record<string, boolean>
   viewToTableCache?: Record<string, Table>
 }
diff --git a/packages/backend-core/src/middleware/featureFlagCookie.ts b/packages/backend-core/src/middleware/featureFlagCookie.ts
new file mode 100644
index 00000000000..070e2161af2
--- /dev/null
+++ b/packages/backend-core/src/middleware/featureFlagCookie.ts
@@ -0,0 +1,13 @@
+import { Ctx, FeatureFlagCookie } from "@budibase/types"
+import { Middleware, Next } from "koa"
+import { getCookie } from "../utils"
+import { Cookie } from "../constants"
+import { doInFeatureFlagOverrideContext } from "../context"
+
+export default (async (ctx: Ctx, next: Next) => {
+  const cookie = getCookie<FeatureFlagCookie>(ctx, Cookie.FeatureFlags)
+  const flags = cookie?.flags || {}
+  await doInFeatureFlagOverrideContext(flags, async () => {
+    await next()
+  })
+}) as Middleware
diff --git a/packages/backend-core/src/middleware/index.ts b/packages/backend-core/src/middleware/index.ts
index 9ee51db45bc..0d16ae52e3a 100644
--- a/packages/backend-core/src/middleware/index.ts
+++ b/packages/backend-core/src/middleware/index.ts
@@ -20,5 +20,6 @@ export { default as correlation } from "../logging/correlation/middleware"
 export { default as errorHandling } from "./errorHandling"
 export { default as querystringToBody } from "./querystringToBody"
 export { default as csp } from "./contentSecurityPolicy"
+export { default as featureFlagCookie } from "./featureFlagCookie"
 export * as joiValidator from "./joi-validator"
 export { default as ip } from "./ip"
diff --git a/packages/server/src/api/controllers/features b/packages/server/src/api/controllers/features
new file mode 100644
index 00000000000..7760970bd6d
--- /dev/null
+++ b/packages/server/src/api/controllers/features
@@ -0,0 +1,7 @@
+import { UserCtx, OverrideFeatureFlagRequest } from "@budibase/types"
+import { Cookie, utils } from "@budibase/backend-core"
+
+export async function override(ctx: UserCtx<OverrideFeatureFlagRequest, void>) {
+  const { flags = {} } = ctx.request.body
+  utils.setCookie(ctx, flags, Cookie.FeatureFlags)
+}
diff --git a/packages/server/src/api/index.ts b/packages/server/src/api/index.ts
index 4f88b771477..c73a48de47d 100644
--- a/packages/server/src/api/index.ts
+++ b/packages/server/src/api/index.ts
@@ -71,6 +71,7 @@ if (apiEnabled()) {
     )
     .use(pro.licensing())
     .use(currentApp)
+    .use(middleware.featureFlagCookie)
 
   // Add CSP as soon as possible - depends on licensing and currentApp
   if (!coreEnv.DISABLE_CONTENT_SECURITY_POLICY) {
diff --git a/packages/server/src/api/routes/features.ts b/packages/server/src/api/routes/features.ts
new file mode 100644
index 00000000000..aaf9835ac0e
--- /dev/null
+++ b/packages/server/src/api/routes/features.ts
@@ -0,0 +1,8 @@
+import Router from "@koa/router"
+import * as controller from "../controllers/features"
+
+const router: Router = new Router()
+
+router.patch("/api/features", controller.override)
+
+export default router
diff --git a/packages/types/src/api/web/app/features.ts b/packages/types/src/api/web/app/features.ts
new file mode 100644
index 00000000000..018251a71e3
--- /dev/null
+++ b/packages/types/src/api/web/app/features.ts
@@ -0,0 +1,3 @@
+export interface OverrideFeatureFlagRequest {
+  flags: Record<string, boolean>
+}
diff --git a/packages/types/src/api/web/app/index.ts b/packages/types/src/api/web/app/index.ts
index b2243452c54..612f4bbc327 100644
--- a/packages/types/src/api/web/app/index.ts
+++ b/packages/types/src/api/web/app/index.ts
@@ -5,6 +5,7 @@ export * from "./backup"
 export * from "./component"
 export * from "./datasource"
 export * from "./deployment"
+export * from "./features"
 export * from "./integration"
 export * from "./layout"
 export * from "./metadata"
diff --git a/packages/types/src/api/web/cookies.ts b/packages/types/src/api/web/cookies.ts
index 27954a36a10..b189863e601 100644
--- a/packages/types/src/api/web/cookies.ts
+++ b/packages/types/src/api/web/cookies.ts
@@ -7,3 +7,7 @@ export interface SessionCookie {
   sessionId: string
   userId: string
 }
+
+export interface FeatureFlagCookie {
+  flags: Record<string, boolean>
+}
diff --git a/packages/types/src/sdk/featureFlag.ts b/packages/types/src/sdk/featureFlag.ts
index 83376e1d6a4..8be6b532c0f 100644
--- a/packages/types/src/sdk/featureFlag.ts
+++ b/packages/types/src/sdk/featureFlag.ts
@@ -1,4 +1,5 @@
 export enum FeatureFlag {
+  DEBUG_UI = "DEBUG_UI",
   USE_ZOD_VALIDATOR = "USE_ZOD_VALIDATOR",
   AI_JS_GENERATION = "AI_JS_GENERATION",
   AI_TABLE_GENERATION = "AI_TABLE_GENERATION",
@@ -14,6 +15,8 @@ export const FeatureFlagDefaults: Record<FeatureFlag, boolean> = {
 
   // Account-portal
   [FeatureFlag.DIRECT_LOGIN_TO_ACCOUNT_PORTAL]: false,
+
+  [FeatureFlag.DEBUG_UI]: false,
 }
 
 export type FeatureFlags = typeof FeatureFlagDefaults

From eb2acdf99e3cd14e25625fc767f0acc4e8f747dd Mon Sep 17 00:00:00 2001
From: Sam Rose <hello@samwho.dev>
Date: Thu, 24 Apr 2025 17:49:13 +0100
Subject: [PATCH 2/7] Feature flag overriding UI.

---
 .../backend-core/src/context/mainContext.ts   |  4 +-
 .../backend-core/src/features/features.ts     | 15 +++++
 .../src/components/debug/DebugUI.svelte       | 56 +++++++++++++++++++
 .../src/pages/builder/portal/_layout.svelte   | 29 +++++++++-
 packages/frontend-core/src/api/features.ts    | 19 +++++++
 packages/frontend-core/src/api/index.ts       |  2 +
 packages/frontend-core/src/api/types.ts       |  2 +
 packages/server/src/api/controllers/features  |  7 ---
 .../server/src/api/controllers/features.ts    | 26 +++++++++
 packages/server/src/api/index.ts              |  3 +-
 packages/server/src/api/routes/features.ts    |  8 ++-
 packages/server/src/api/routes/index.ts       |  2 +
 packages/worker/src/api/index.ts              |  1 +
 13 files changed, 159 insertions(+), 15 deletions(-)
 create mode 100644 packages/builder/src/components/debug/DebugUI.svelte
 create mode 100644 packages/frontend-core/src/api/features.ts
 delete mode 100644 packages/server/src/api/controllers/features
 create mode 100644 packages/server/src/api/controllers/features.ts

diff --git a/packages/backend-core/src/context/mainContext.ts b/packages/backend-core/src/context/mainContext.ts
index c04be33dcb5..9bea94de29f 100644
--- a/packages/backend-core/src/context/mainContext.ts
+++ b/packages/backend-core/src/context/mainContext.ts
@@ -464,11 +464,11 @@ export function getFeatureFlagOverrides(): Record<string, boolean> {
   return getCurrentContext()?.featureFlagOverrides || {}
 }
 
-export function doInFeatureFlagOverrideContext<T>(
+export async function doInFeatureFlagOverrideContext<T>(
   value: Record<string, boolean>,
   callback: () => Promise<T>
 ) {
-  return newContext({ featureFlagOverrides: value }, callback)
+  return await newContext({ featureFlagOverrides: value }, callback)
 }
 
 export function getTableForView(viewId: string): Table | undefined {
diff --git a/packages/backend-core/src/features/features.ts b/packages/backend-core/src/features/features.ts
index 71067770848..a76ffe8a7ba 100644
--- a/packages/backend-core/src/features/features.ts
+++ b/packages/backend-core/src/features/features.ts
@@ -175,6 +175,21 @@ export class FlagSet<T extends { [name: string]: boolean }> {
         }
       }
 
+      const overrides = context.getFeatureFlagOverrides()
+      for (const [key, value] of Object.entries(overrides)) {
+        if (!this.isFlagName(key)) {
+          continue
+        }
+
+        if (typeof value !== "boolean") {
+          continue
+        }
+
+        // @ts-expect-error - TS does not like you writing into a generic type.
+        flagValues[key] = value
+        tags[`flags.${key}.source`] = "override"
+      }
+
       context.setFeatureFlags(this.setId, flagValues)
       for (const [key, value] of Object.entries(flagValues)) {
         tags[`flags.${key}.value`] = value
diff --git a/packages/builder/src/components/debug/DebugUI.svelte b/packages/builder/src/components/debug/DebugUI.svelte
new file mode 100644
index 00000000000..8df7e9c1b02
--- /dev/null
+++ b/packages/builder/src/components/debug/DebugUI.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { API } from "@/api"
+  import { ModalContent, notifications, Toggle } from "@budibase/bbui"
+  import { featureFlags } from "@/stores/portal"
+  import { auth } from "@/stores/portal"
+  import { FeatureFlag } from "@budibase/types"
+
+  async function setFlag(flag: string, value: boolean) {
+    try {
+      await API.overrideFeatureFlags({
+        [flag]: value,
+      })
+      // The feature flag store is derived from the auth store, so we need to
+      // refresh the auth store to update the feature flags.
+      await auth.getSelf()
+      notifications.success(`Feature flag ${flag} set to ${value}`)
+    } catch (e) {
+      console.error(e)
+      notifications.error(
+        `Failed to set feature flag ${flag} to ${value}, see console for details`
+      )
+    }
+  }
+</script>
+
+<ModalContent
+  title="Feature flags"
+  showCancelButton={false}
+  showConfirmButton={false}
+  size="L"
+>
+  <div class="flags">
+    {#each Object.entries($featureFlags) as [key, value]}
+      <div class="item">
+        <Toggle
+          text={key}
+          {value}
+          disabled={key === FeatureFlag.DEBUG_UI}
+          on:change={value => setFlag(key, value.detail)}
+        />
+      </div>
+    {/each}
+  </div>
+</ModalContent>
+
+<style>
+  .flags {
+    display: flex;
+    flex-direction: column;
+    font-size: 1.4rem;
+  }
+
+  .item {
+    font-family: var(--font-mono);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte
index 323b2310371..2fe4312da1d 100644
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@@ -1,6 +1,6 @@
 <script>
   import { isActive, redirect, goto, url } from "@roxi/routify"
-  import { Icon, notifications, Tabs, Tab } from "@budibase/bbui"
+  import { Icon, notifications, Tabs, Tab, Modal } from "@budibase/bbui"
   import {
     organisation,
     auth,
@@ -8,6 +8,7 @@
     appsStore,
     licensing,
     admin,
+    featureFlags,
   } from "@/stores/portal"
   import { onMount } from "svelte"
   import UpgradeButton from "./_components/UpgradeButton.svelte"
@@ -19,10 +20,12 @@
   import { sdk } from "@budibase/shared-core"
   import EnterpriseBasicTrialBanner from "@/components/portal/licensing/EnterpriseBasicTrialBanner.svelte"
   import { Constants } from "@budibase/frontend-core"
+  import DebugUI from "@/components/debug/DebugUI.svelte"
 
   let loaded = false
   let mobileMenuVisible = false
   let activeTab = "Apps"
+  let debugModal
 
   $: $url(), updateActiveTab($menu)
   $: isOnboarding =
@@ -93,8 +96,17 @@
         <div class="desktop">
           <UpgradeButton />
         </div>
-        <div class="dropdown">
-          <UserDropdown />
+        <div class="right">
+          <div class="dropdown">
+            <UserDropdown />
+          </div>
+          {#if $featureFlags.DEBUG_UI}
+            <Icon
+              hoverable
+              name="Settings"
+              on:click={() => debugModal.show()}
+            />
+          {/if}
         </div>
       </div>
       <div class="main">
@@ -105,6 +117,10 @@
   {/if}
 {/if}
 
+<Modal bind:this={debugModal}>
+  <DebugUI />
+</Modal>
+
 <style>
   .container {
     height: 100%;
@@ -156,6 +172,13 @@
   .desktop {
     display: contents;
   }
+  .right {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
 
   @media (max-width: 640px) {
     .mobile {
diff --git a/packages/frontend-core/src/api/features.ts b/packages/frontend-core/src/api/features.ts
new file mode 100644
index 00000000000..431f5e7193b
--- /dev/null
+++ b/packages/frontend-core/src/api/features.ts
@@ -0,0 +1,19 @@
+import { OverrideFeatureFlagRequest } from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface FeatureFlagEndpoints {
+  overrideFeatureFlags: (flags: Record<string, boolean>) => Promise<void>
+}
+
+export const buildFeatureFlagEndpoints = (
+  API: BaseAPIClient
+): FeatureFlagEndpoints => ({
+  overrideFeatureFlags: async flags => {
+    const body: OverrideFeatureFlagRequest = { flags }
+    return await API.patch({
+      url: "/api/features",
+      body,
+      parseResponse: () => {},
+    })
+  },
+})
diff --git a/packages/frontend-core/src/api/index.ts b/packages/frontend-core/src/api/index.ts
index 224ed602dc0..206e7b648fa 100644
--- a/packages/frontend-core/src/api/index.ts
+++ b/packages/frontend-core/src/api/index.ts
@@ -46,6 +46,7 @@ import { buildLogsEndpoints } from "./logs"
 import { buildMigrationEndpoints } from "./migrations"
 import { buildRowActionEndpoints } from "./rowActions"
 import { buildOAuth2Endpoints } from "./oauth2"
+import { buildFeatureFlagEndpoints } from "./features"
 
 export type { APIClient } from "./types"
 
@@ -289,6 +290,7 @@ export const createAPIClient = (config: APIClientConfig = {}): APIClient => {
     ...buildAuditLogEndpoints(API),
     ...buildLogsEndpoints(API),
     ...buildMigrationEndpoints(API),
+    ...buildFeatureFlagEndpoints(API),
     viewV2: buildViewV2Endpoints(API),
     rowActions: buildRowActionEndpoints(API),
     oauth2: buildOAuth2Endpoints(API),
diff --git a/packages/frontend-core/src/api/types.ts b/packages/frontend-core/src/api/types.ts
index 7fc9de66b4d..be04e7ca3b1 100644
--- a/packages/frontend-core/src/api/types.ts
+++ b/packages/frontend-core/src/api/types.ts
@@ -10,6 +10,7 @@ import { ConfigEndpoints } from "./configs"
 import { DatasourceEndpoints } from "./datasources"
 import { EnvironmentVariableEndpoints } from "./environmentVariables"
 import { EventEndpoints } from "./events"
+import { FeatureFlagEndpoints } from "./features"
 import { FlagEndpoints } from "./flags"
 import { GroupEndpoints } from "./groups"
 import { LayoutEndpoints } from "./layouts"
@@ -133,6 +134,7 @@ export type APIClient = BaseAPIClient &
   TableEndpoints &
   TemplateEndpoints &
   UserEndpoints &
+  FeatureFlagEndpoints &
   ViewEndpoints & {
     rowActions: RowActionEndpoints
     viewV2: ViewV2Endpoints
diff --git a/packages/server/src/api/controllers/features b/packages/server/src/api/controllers/features
deleted file mode 100644
index 7760970bd6d..00000000000
--- a/packages/server/src/api/controllers/features
+++ /dev/null
@@ -1,7 +0,0 @@
-import { UserCtx, OverrideFeatureFlagRequest } from "@budibase/types"
-import { Cookie, utils } from "@budibase/backend-core"
-
-export async function override(ctx: UserCtx<OverrideFeatureFlagRequest, void>) {
-  const { flags = {} } = ctx.request.body
-  utils.setCookie(ctx, flags, Cookie.FeatureFlags)
-}
diff --git a/packages/server/src/api/controllers/features.ts b/packages/server/src/api/controllers/features.ts
new file mode 100644
index 00000000000..ee05362c56b
--- /dev/null
+++ b/packages/server/src/api/controllers/features.ts
@@ -0,0 +1,26 @@
+import {
+  UserCtx,
+  OverrideFeatureFlagRequest,
+  FeatureFlagCookie,
+} from "@budibase/types"
+import { Cookie, utils } from "@budibase/backend-core"
+
+export async function override(ctx: UserCtx<OverrideFeatureFlagRequest, void>) {
+  const { flags } = ctx.request.body
+
+  let cookie = utils.getCookie<FeatureFlagCookie>(ctx, Cookie.FeatureFlags)
+  if (!cookie) {
+    cookie = {
+      flags: {},
+    }
+  }
+
+  cookie.flags = {
+    ...cookie.flags,
+    ...flags,
+  }
+
+  utils.setCookie(ctx, cookie, Cookie.FeatureFlags)
+
+  ctx.status = 200
+}
diff --git a/packages/server/src/api/index.ts b/packages/server/src/api/index.ts
index c73a48de47d..606e71d1745 100644
--- a/packages/server/src/api/index.ts
+++ b/packages/server/src/api/index.ts
@@ -31,7 +31,7 @@ router.get("/health", async ctx => {
 })
 router.get("/version", ctx => (ctx.body = envCore.VERSION))
 
-router.use(middleware.errorHandling)
+router.use(middleware.errorHandling).use(middleware.featureFlagCookie)
 
 // only add the routes if they are enabled
 if (apiEnabled()) {
@@ -71,7 +71,6 @@ if (apiEnabled()) {
     )
     .use(pro.licensing())
     .use(currentApp)
-    .use(middleware.featureFlagCookie)
 
   // Add CSP as soon as possible - depends on licensing and currentApp
   if (!coreEnv.DISABLE_CONTENT_SECURITY_POLICY) {
diff --git a/packages/server/src/api/routes/features.ts b/packages/server/src/api/routes/features.ts
index aaf9835ac0e..097a35d33a7 100644
--- a/packages/server/src/api/routes/features.ts
+++ b/packages/server/src/api/routes/features.ts
@@ -1,8 +1,14 @@
 import Router from "@koa/router"
 import * as controller from "../controllers/features"
+import { validateBody } from "../../middleware/zod-validator"
+import { z } from "zod"
 
 const router: Router = new Router()
 
-router.patch("/api/features", controller.override)
+const validator = z.object({
+  flags: z.record(z.boolean()),
+})
+
+router.patch("/api/features", validateBody(validator), controller.override)
 
 export default router
diff --git a/packages/server/src/api/routes/index.ts b/packages/server/src/api/routes/index.ts
index 253b0f5a82b..106d804164d 100644
--- a/packages/server/src/api/routes/index.ts
+++ b/packages/server/src/api/routes/index.ts
@@ -30,6 +30,7 @@ import Router from "@koa/router"
 import { api as pro } from "@budibase/pro"
 import rowActionRoutes from "./rowAction"
 import oauth2Routes from "./oauth2"
+import featuresRoutes from "./features"
 
 export { default as staticRoutes } from "./static"
 export { default as publicRoutes } from "./public"
@@ -71,6 +72,7 @@ export const mainRoutes: Router[] = [
   rowActionRoutes,
   proAiRoutes,
   oauth2Routes,
+  featuresRoutes,
   // these need to be handled last as they still use /api/:tableId
   // this could be breaking as koa may recognise other routes as this
   tableRoutes,
diff --git a/packages/worker/src/api/index.ts b/packages/worker/src/api/index.ts
index a7594b713ee..16430a86d99 100644
--- a/packages/worker/src/api/index.ts
+++ b/packages/worker/src/api/index.ts
@@ -130,6 +130,7 @@ const router: Router = new Router()
 
 router
   .use(middleware.errorHandling)
+  .use(middleware.featureFlagCookie)
   .use(
     compress({
       threshold: 2048,

From d2b0c14060f5b78a87393fe217f0637baef66e0b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 28 Apr 2025 16:21:25 +0100
Subject: [PATCH 3/7] Move feature flag debug control into command prompt

---
 .../commandPalette/CommandPalette.svelte      | 34 ++++++++---
 .../common/CodeEditor/CodeEditor.svelte       | 14 +----
 .../src/components/debug/DebugUI.svelte       | 56 -------------------
 .../builder/app/[application]/data/new.svelte |  8 +--
 .../src/pages/builder/portal/_layout.svelte   | 16 +-----
 .../builder/src/stores/portal/featureFlags.ts | 42 ++++++++++++--
 6 files changed, 68 insertions(+), 102 deletions(-)
 delete mode 100644 packages/builder/src/components/debug/DebugUI.svelte

diff --git a/packages/builder/src/components/commandPalette/CommandPalette.svelte b/packages/builder/src/components/commandPalette/CommandPalette.svelte
index 4598b44873d..23096fa2262 100644
--- a/packages/builder/src/components/commandPalette/CommandPalette.svelte
+++ b/packages/builder/src/components/commandPalette/CommandPalette.svelte
@@ -20,12 +20,17 @@
     tables,
     views,
   } from "@/stores/builder"
-  import { themeStore } from "@/stores/portal"
+  import { themeStore, featureFlags } from "@/stores/portal"
   import { getContext } from "svelte"
   import { ThemeOptions } from "@budibase/shared-core"
+  import { FeatureFlag } from "@budibase/types"
 
   const modalContext = getContext(Context.Modal)
-  const commands = [
+
+  let search
+  let selected = null
+
+  $: commands = [
     {
       type: "Access",
       name: "Invite users and manage app access",
@@ -151,25 +156,38 @@
           return state
         }),
     })),
+    ...featureFlagCommands($featureFlags),
   ]
-
-  let search
-  let selected = null
-
   $: enrichedCommands = commands.map(cmd => ({
     ...cmd,
-    searchValue: `${cmd.type} ${cmd.name}`.toLowerCase(),
+    searchValue: `${cmd.type} ${cmd.name}`.toLowerCase().replace(/_/g, " "),
   }))
   $: results = filterResults(enrichedCommands, search)
   $: categories = groupResults(results)
 
+  const featureFlagCommands = flags => {
+    if (!flags.DEBUG_UI) {
+      return []
+    }
+    return Object.entries(flags)
+      .filter(([flag]) => flag !== FeatureFlag.DEBUG_UI)
+      .map(([flag, value]) => ({
+        type: "Feature Flag",
+        name: `${value ? "Disable" : "Enable"} ${flag}`,
+        icon: "Flag",
+        action: () => {
+          featureFlags.setFlag(flag, !value)
+        },
+      }))
+  }
+
   const filterResults = (commands, search) => {
     if (!search) {
       selected = null
       return commands
     }
     selected = 0
-    search = search.toLowerCase()
+    search = search.toLowerCase().replace(/_/g, " ")
     return commands
       .filter(cmd => cmd.searchValue.includes(search))
       .map((cmd, idx) => ({
diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index c159804e471..8ffd5d3e78b 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -9,7 +9,6 @@
   import { Label } from "@budibase/bbui"
   import { onMount, createEventDispatcher, onDestroy } from "svelte"
   import { FIND_ANY_HBS_REGEX } from "@budibase/string-templates"
-
   import {
     autocompletion,
     closeBrackets,
@@ -52,17 +51,12 @@
   import type { Extension } from "@codemirror/state"
   import { javascript } from "@codemirror/lang-javascript"
   import { EditorModes } from "./"
-  import { themeStore } from "@/stores/portal"
-  import {
-    type EnrichedBinding,
-    FeatureFlag,
-    type EditorMode,
-  } from "@budibase/types"
+  import { featureFlags, themeStore } from "@/stores/portal"
+  import { type EnrichedBinding, type EditorMode } from "@budibase/types"
   import { tooltips } from "@codemirror/view"
   import type { BindingCompletion, CodeValidator } from "@/types"
   import { validateHbsTemplate } from "./validator/hbs"
   import { validateJsTemplate } from "./validator/js"
-  import { featureFlag } from "@/helpers"
   import AIGen from "./AIGen.svelte"
 
   export let label: string | undefined = undefined
@@ -101,9 +95,7 @@
   }
 
   $: aiGenEnabled =
-    featureFlag.isEnabled(FeatureFlag.AI_JS_GENERATION) &&
-    mode.name === "javascript" &&
-    !readonly
+    $featureFlags.AI_JS_GENERATION && mode.name === "javascript" && !readonly
 
   $: {
     if (autofocus && isEditorInitialised) {
diff --git a/packages/builder/src/components/debug/DebugUI.svelte b/packages/builder/src/components/debug/DebugUI.svelte
deleted file mode 100644
index 8df7e9c1b02..00000000000
--- a/packages/builder/src/components/debug/DebugUI.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-  import { API } from "@/api"
-  import { ModalContent, notifications, Toggle } from "@budibase/bbui"
-  import { featureFlags } from "@/stores/portal"
-  import { auth } from "@/stores/portal"
-  import { FeatureFlag } from "@budibase/types"
-
-  async function setFlag(flag: string, value: boolean) {
-    try {
-      await API.overrideFeatureFlags({
-        [flag]: value,
-      })
-      // The feature flag store is derived from the auth store, so we need to
-      // refresh the auth store to update the feature flags.
-      await auth.getSelf()
-      notifications.success(`Feature flag ${flag} set to ${value}`)
-    } catch (e) {
-      console.error(e)
-      notifications.error(
-        `Failed to set feature flag ${flag} to ${value}, see console for details`
-      )
-    }
-  }
-</script>
-
-<ModalContent
-  title="Feature flags"
-  showCancelButton={false}
-  showConfirmButton={false}
-  size="L"
->
-  <div class="flags">
-    {#each Object.entries($featureFlags) as [key, value]}
-      <div class="item">
-        <Toggle
-          text={key}
-          {value}
-          disabled={key === FeatureFlag.DEBUG_UI}
-          on:change={value => setFlag(key, value.detail)}
-        />
-      </div>
-    {/each}
-  </div>
-</ModalContent>
-
-<style>
-  .flags {
-    display: flex;
-    flex-direction: column;
-    font-size: 1.4rem;
-  }
-
-  .item {
-    font-family: var(--font-mono);
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/new.svelte b/packages/builder/src/pages/builder/app/[application]/data/new.svelte
index 5b1209046e8..f79a292d6c7 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/new.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/new.svelte
@@ -16,8 +16,7 @@
   import CreationPage from "@/components/common/CreationPage.svelte"
   import ICONS from "@/components/backend/DatasourceNavigator/icons/index.js"
   import AiTableGeneration from "./_components/AITableGeneration.svelte"
-  import { featureFlag } from "@/helpers"
-  import { FeatureFlag } from "@budibase/types"
+  import { featureFlags } from "@/stores/portal"
 
   let internalTableModal: CreateInternalTableModal
   let externalDatasourceModal: CreateExternalDatasourceModal
@@ -26,10 +25,7 @@
   let externalDatasourceLoading = false
 
   $: disabled = sampleDataLoading || externalDatasourceLoading
-
-  $: aiTableGenerationEnabled = featureFlag.isEnabled(
-    FeatureFlag.AI_TABLE_GENERATION
-  )
+  $: aiTableGenerationEnabled = $featureFlags.AI_TABLE_GENERATION
 
   const createSampleData = async () => {
     sampleDataLoading = true
diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte
index 2fe4312da1d..e49dc8b3f34 100644
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@@ -1,6 +1,6 @@
 <script>
   import { isActive, redirect, goto, url } from "@roxi/routify"
-  import { Icon, notifications, Tabs, Tab, Modal } from "@budibase/bbui"
+  import { Icon, notifications, Tabs, Tab } from "@budibase/bbui"
   import {
     organisation,
     auth,
@@ -8,7 +8,6 @@
     appsStore,
     licensing,
     admin,
-    featureFlags,
   } from "@/stores/portal"
   import { onMount } from "svelte"
   import UpgradeButton from "./_components/UpgradeButton.svelte"
@@ -20,12 +19,10 @@
   import { sdk } from "@budibase/shared-core"
   import EnterpriseBasicTrialBanner from "@/components/portal/licensing/EnterpriseBasicTrialBanner.svelte"
   import { Constants } from "@budibase/frontend-core"
-  import DebugUI from "@/components/debug/DebugUI.svelte"
 
   let loaded = false
   let mobileMenuVisible = false
   let activeTab = "Apps"
-  let debugModal
 
   $: $url(), updateActiveTab($menu)
   $: isOnboarding =
@@ -100,13 +97,6 @@
           <div class="dropdown">
             <UserDropdown />
           </div>
-          {#if $featureFlags.DEBUG_UI}
-            <Icon
-              hoverable
-              name="Settings"
-              on:click={() => debugModal.show()}
-            />
-          {/if}
         </div>
       </div>
       <div class="main">
@@ -117,10 +107,6 @@
   {/if}
 {/if}
 
-<Modal bind:this={debugModal}>
-  <DebugUI />
-</Modal>
-
 <style>
   .container {
     height: 100%;
diff --git a/packages/builder/src/stores/portal/featureFlags.ts b/packages/builder/src/stores/portal/featureFlags.ts
index 0e40d0c7b49..799622324e9 100644
--- a/packages/builder/src/stores/portal/featureFlags.ts
+++ b/packages/builder/src/stores/portal/featureFlags.ts
@@ -1,8 +1,38 @@
-import { derived, Readable } from "svelte/store"
 import { auth } from "@/stores/portal"
-import { FeatureFlags, FeatureFlagDefaults } from "@budibase/types"
+import { FeatureFlag, FeatureFlags, FeatureFlagDefaults } from "@budibase/types"
+import { BudiStore } from "@/stores/BudiStore"
+import { API } from "@/api"
+import { notifications } from "@budibase/bbui"
 
-export const featureFlags: Readable<FeatureFlags> = derived(auth, $auth => ({
-  ...FeatureFlagDefaults,
-  ...($auth?.user?.flags || {}),
-}))
+class FeatureFlagStore extends BudiStore<FeatureFlags> {
+  constructor() {
+    super(FeatureFlagDefaults)
+    auth.subscribe($auth => {
+      this.set({
+        ...FeatureFlagDefaults,
+        ...($auth?.user?.flags || {}),
+      })
+    })
+  }
+
+  async setFlag(flag: FeatureFlag, value: boolean) {
+    try {
+      await API.overrideFeatureFlags({
+        [flag]: value,
+      })
+      // The feature flag store is derived from the auth store, so we need to
+      // refresh the auth store to update the feature flags.
+      await auth.getSelf()
+      notifications.success(
+        `Feature flag ${flag} ${value ? "enabled" : "disabled"}`
+      )
+    } catch (e) {
+      console.error(e)
+      notifications.error(
+        `Failed to set feature flag ${flag} to ${value}, see console for details`
+      )
+    }
+  }
+}
+
+export const featureFlags = new FeatureFlagStore()

From 01b458535cfd2d3e16011c86f046e4a4da3e13fa Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 29 Apr 2025 11:37:25 +0100
Subject: [PATCH 4/7] Move command palette into portal level

---
 .../commandPalette/CommandPalette.svelte      | 244 ++++++++++++------
 .../builder/src/pages/builder/_layout.svelte  |  16 ++
 .../builder/app/[application]/_layout.svelte  |  16 --
 3 files changed, 188 insertions(+), 88 deletions(-)

diff --git a/packages/builder/src/components/commandPalette/CommandPalette.svelte b/packages/builder/src/components/commandPalette/CommandPalette.svelte
index 23096fa2262..e1d8f5f6a48 100644
--- a/packages/builder/src/components/commandPalette/CommandPalette.svelte
+++ b/packages/builder/src/components/commandPalette/CommandPalette.svelte
@@ -8,7 +8,7 @@
     notifications,
   } from "@budibase/bbui"
   import { API } from "@/api"
-  import { goto } from "@roxi/routify"
+  import { goto, params, isActive } from "@roxi/routify"
   import {
     automationStore,
     previewStore,
@@ -19,6 +19,7 @@
     queries,
     tables,
     views,
+    viewsV2,
   } from "@/stores/builder"
   import { themeStore, featureFlags } from "@/stores/portal"
   import { getContext } from "svelte"
@@ -30,6 +31,7 @@
   let search
   let selected = null
 
+  $: inApp = $isActive("/builder/app/:application")
   $: commands = [
     {
       type: "Access",
@@ -37,41 +39,16 @@
       description: "",
       icon: "User",
       action: () => builderStore.showBuilderSidePanel(),
+      requiresApp: true,
     },
-    {
-      type: "Navigate",
-      name: "Portal",
-      description: "",
-      icon: "Compass",
-      action: () => $goto("../../portal"),
-    },
-    {
-      type: "Navigate",
-      name: "Data",
-      description: "",
-      icon: "Compass",
-      action: () => $goto("./data"),
-    },
-    {
-      type: "Navigate",
-      name: "Design",
-      description: "",
-      icon: "Compass",
-      action: () => $goto("./design"),
-    },
-    {
-      type: "Navigate",
-      name: "Automations",
-      description: "",
-      icon: "Compass",
-      action: () => $goto("./automation"),
-    },
+    ...navigationCommands(),
     {
       type: "Publish",
       name: "App",
       description: "Deploy your application",
       icon: "Box",
       action: deployApp,
+      requiresApp: true,
     },
     {
       type: "Preview",
@@ -79,12 +56,14 @@
       description: "",
       icon: "Play",
       action: () => previewStore.showPreview(true),
+      requiresApp: true,
     },
     {
       type: "Preview",
       name: "Published App",
       icon: "Play",
       action: () => window.open(`/app${$appStore.url}`),
+      requiresApp: true,
     },
     {
       type: "Support",
@@ -92,6 +71,7 @@
       icon: "Help",
       action: () =>
         window.open(`https://github.com/Budibase/budibase/discussions/new`),
+      requiresApp: true,
     },
     {
       type: "Support",
@@ -101,52 +81,166 @@
         window.open(
           `https://github.com/Budibase/budibase/issues/new?assignees=&labels=bug&template=bug_report.md&title=`
         ),
+      requiresApp: true,
     },
-    ...($datasources?.list?.map(datasource => ({
+    ...datasourceCommands($datasources?.list || []),
+    ...tableCommands($tables?.list || []),
+    ...viewCommands($views?.list || []),
+    ...viewV2Commands($viewsV2?.list || []),
+    ...queryCommands($queries?.list || []),
+    ...screenCommands($sortedScreens),
+    ...automationCommands($automationStore?.automations || []),
+    ...themeCommands(),
+    ...featureFlagCommands($featureFlags),
+  ]
+  $: enrichedCommands = commands.map(cmd => ({
+    ...cmd,
+    searchValue: `${cmd.type} ${cmd.name}`.toLowerCase().replace(/_/g, " "),
+  }))
+  $: results = filterResults(enrichedCommands, search, inApp)
+  $: categories = groupResults(results)
+
+  const navigationCommands = () => {
+    const routes = [
+      {
+        name: "Portal",
+        url: "/builder/portal",
+      },
+      {
+        name: "Data",
+        url: "/builder/app/:application/data",
+      },
+      {
+        name: "Design",
+        url: "/builder/app/:application/design",
+      },
+      {
+        name: "Automations",
+        url: "/builder/app/:application/automation",
+      },
+      {
+        name: "Settings",
+        url: "/builder/app/:application/settings",
+      },
+    ]
+    return routes.map(route => ({
+      type: "Navigate",
+      name: route.name,
+      icon: "Compass",
+      action: () => {
+        const gotoParams = route.url.includes(":application")
+          ? { application: $params.application }
+          : {}
+        $goto(route.url, gotoParams)
+      },
+      requiresApp: true,
+    }))
+  }
+
+  const datasourceCommands = datasources => {
+    return datasources.map(datasource => ({
       type: "Datasource",
-      name: `${datasource.name}`,
+      name: datasource.name,
       icon: "Data",
-      action: () => $goto(`./data/datasource/${datasource._id}`),
-    })) ?? []),
-    ...($tables?.list?.map(table => ({
+      action: () =>
+        $goto(`/builder/app/:application/data/datasource/:id`, {
+          application: $params.application,
+          id: datasource._id,
+        }),
+      requiresApp: true,
+    }))
+  }
+
+  const tableCommands = tables => {
+    return tables.map(table => ({
       type: "Table",
       name: table.name,
       icon: "Table",
-      action: () => $goto(`./data/table/${table._id}`),
-    })) ?? []),
-    ...($views?.list?.map(view => ({
+      action: () =>
+        $goto(`/builder/app/:application/data/table/:id`, {
+          application: $params.application,
+          id: table._id,
+        }),
+      requiresApp: true,
+    }))
+  }
+
+  const viewCommands = views => {
+    return views.map(view => ({
       type: "View",
       name: view.name,
       icon: "Remove",
       action: () => {
-        if (view.version === 2) {
-          $goto(`./data/view/v2/${view.id}`)
-        } else {
-          $goto(`./data/view/${view.name}`)
-        }
+        $goto(`/builder/app/:application/data/view/:name`, {
+          application: $params.application,
+          name: view.name,
+        })
+      },
+      requiresApp: true,
+    }))
+  }
+
+  const viewV2Commands = views => {
+    return views.map(view => ({
+      type: "View",
+      name: view.name,
+      icon: "Remove",
+      action: () => {
+        $goto(`/builder/app/:application/data/table/:tableId/:viewId`, {
+          application: $params.application,
+          x: view.tableId,
+          viewId: view.id,
+        })
       },
-    })) ?? []),
-    ...($queries?.list?.map(query => ({
+      requiresApp: true,
+    }))
+  }
+
+  const queryCommands = queries => {
+    return queries.map(query => ({
       type: "Query",
       name: query.name,
       icon: "SQLQuery",
-      action: () => $goto(`./data/query/${query._id}`),
-    })) ?? []),
-    ...$sortedScreens.map(screen => ({
+      action: () =>
+        $goto(`/builder/app/:application/data/query/:id`, {
+          application: $params.application,
+          id: query._id,
+        }),
+      requiresApp: true,
+    }))
+  }
+
+  const screenCommands = screens => {
+    return screens.map(screen => ({
       type: "Screen",
       name: screen.routing.route,
       icon: "WebPage",
-      action: () => {
-        $goto(`./design/${screen._id}/${screen._id}-screen`)
-      },
-    })),
-    ...($automationStore?.automations?.map(automation => ({
+      action: () =>
+        $goto(`/builder/app/:application/design/:screenId/:componentId`, {
+          application: $params.application,
+          screenId: screen._id,
+          componentId: `${screen._id}-screen`,
+        }),
+      requiresApp: true,
+    }))
+  }
+
+  const automationCommands = automations => {
+    return automations.map(automation => ({
       type: "Automation",
       name: automation.name,
       icon: "ShareAndroid",
-      action: () => $goto(`./automation/${automation._id}`),
-    })) ?? []),
-    ...ThemeOptions.map(themeMeta => ({
+      action: () =>
+        $goto(`/builder/app/:application/automation/:id`, {
+          application: $params.application,
+          id: automation._id,
+        }),
+      requiresApp: true,
+    }))
+  }
+
+  const themeCommands = () => {
+    return ThemeOptions.map(themeMeta => ({
       type: "Change Builder Theme",
       name: themeMeta.name,
       icon: "ColorPalette",
@@ -155,15 +249,8 @@
           state.theme = themeMeta.id
           return state
         }),
-    })),
-    ...featureFlagCommands($featureFlags),
-  ]
-  $: enrichedCommands = commands.map(cmd => ({
-    ...cmd,
-    searchValue: `${cmd.type} ${cmd.name}`.toLowerCase().replace(/_/g, " "),
-  }))
-  $: results = filterResults(enrichedCommands, search)
-  $: categories = groupResults(results)
+    }))
+  }
 
   const featureFlagCommands = flags => {
     if (!flags.DEBUG_UI) {
@@ -173,7 +260,7 @@
       .filter(([flag]) => flag !== FeatureFlag.DEBUG_UI)
       .map(([flag, value]) => ({
         type: "Feature Flag",
-        name: `${value ? "Disable" : "Enable"} ${flag}`,
+        name: `${value ? "Disable" : "Enable"} <code>${flag}</code>`,
         icon: "Flag",
         action: () => {
           featureFlags.setFlag(flag, !value)
@@ -181,15 +268,22 @@
       }))
   }
 
-  const filterResults = (commands, search) => {
-    if (!search) {
+  const filterResults = (commands, search, inApp) => {
+    if (search) {
+      selected = 0
+      search = search.toLowerCase().replace(/_/g, " ")
+    } else {
       selected = null
-      return commands
     }
-    selected = 0
-    search = search.toLowerCase().replace(/_/g, " ")
     return commands
-      .filter(cmd => cmd.searchValue.includes(search))
+      .filter(cmd => {
+        // Handle searching
+        if (search && !cmd.searchValue.includes(search)) {
+          return false
+        }
+        // Handle commands that require an app
+        return inApp || !cmd.requiresApp
+      })
       .map((cmd, idx) => ({
         ...cmd,
         idx,
@@ -282,7 +376,7 @@
                 <Icon size="M" name={command.icon} />
                 <strong>{command.type}:&nbsp;</strong>
                 <div class="name">
-                  {command.name}
+                  {@html command.name}
                 </div>
               </div>
             {/each}
@@ -357,4 +451,10 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .name :global(code) {
+    font-size: 12px;
+    background: var(--background-alt);
+    padding: 4px;
+    border-radius: 4px;
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/_layout.svelte b/packages/builder/src/pages/builder/_layout.svelte
index 7e765d7366f..7bb97be71dc 100644
--- a/packages/builder/src/pages/builder/_layout.svelte
+++ b/packages/builder/src/pages/builder/_layout.svelte
@@ -6,8 +6,11 @@
   import { API } from "@/api"
   import Branding from "./Branding.svelte"
   import ContextMenu from "@/components/ContextMenu.svelte"
+  import CommandPalette from "@/components/commandPalette/CommandPalette.svelte"
+  import { Modal } from "@budibase/bbui"
 
   let loaded = false
+  let commandPaletteModal
 
   $: multiTenancyEnabled = $admin.multiTenancy
   $: hasAdminUser = $admin?.checklist?.adminUser?.checked
@@ -157,12 +160,25 @@
       }
     }
   }
+
+  // Event handler for the command palette
+  const handleKeyDown = e => {
+    if (e.key === "k" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault()
+      commandPaletteModal.toggle()
+    }
+  }
 </script>
 
 <!--Portal branding overrides -->
 <Branding />
 <ContextMenu />
 
+<svelte:window on:keydown={handleKeyDown} />
+<Modal bind:this={commandPaletteModal} zIndex={999999}>
+  <CommandPalette />
+</Modal>
+
 {#if loaded}
   <slot />
 {/if}
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index a799553aca1..668aca657ee 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -14,7 +14,6 @@
     Tabs,
     Tab,
     Heading,
-    Modal,
     notifications,
     TooltipPosition,
   } from "@budibase/bbui"
@@ -24,7 +23,6 @@
   import { capitalise } from "@/helpers"
   import { onMount, onDestroy } from "svelte"
   import VerificationPromptBanner from "@/components/common/VerificationPromptBanner.svelte"
-  import CommandPalette from "@/components/commandPalette/CommandPalette.svelte"
   import TourWrap from "@/components/portal/onboarding/TourWrap.svelte"
   import TourPopover from "@/components/portal/onboarding/TourPopover.svelte"
   import BuilderSidePanel from "./_components/BuilderSidePanel.svelte"
@@ -38,7 +36,6 @@
 
   let promise = getPackage()
   let hasSynced = false
-  let commandPaletteModal
   let loaded = false
 
   $: loaded && initTour()
@@ -79,14 +76,6 @@
     $goto($builderStore.previousTopNavPath[path] || path)
   }
 
-  // Event handler for the command palette
-  const handleKeyDown = e => {
-    if (e.key === "k" && (e.ctrlKey || e.metaKey)) {
-      e.preventDefault()
-      commandPaletteModal.toggle()
-    }
-  }
-
   const initTour = async () => {
     // Check if onboarding is enabled.
     if (!$auth.user?.onboardedAt) {
@@ -184,11 +173,6 @@
   <PreviewOverlay />
 {/if}
 
-<svelte:window on:keydown={handleKeyDown} />
-<Modal bind:this={commandPaletteModal} zIndex={999999}>
-  <CommandPalette />
-</Modal>
-
 <EnterpriseBasicTrialModal />
 
 <style>

From a18c1deaffadad0a7c0c3339ce153a6e743f773b Mon Sep 17 00:00:00 2001
From: Sam Rose <hello@samwho.dev>
Date: Tue, 29 Apr 2025 12:17:16 +0100
Subject: [PATCH 5/7] Update pro reference.

---
 packages/pro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pro b/packages/pro
index 6c9ccbb8a57..72655ddbe0f 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit 6c9ccbb8a5737733448f6b0e23696de1ed343015
+Subproject commit 72655ddbe0f4350d937fed48f6685f3250c1b7d6

From 896f46cd67a2dbcd59540d9d1388cd615936bb3b Mon Sep 17 00:00:00 2001
From: Sam Rose <hello@samwho.dev>
Date: Tue, 29 Apr 2025 12:29:22 +0100
Subject: [PATCH 6/7] Quiet lint warning.

---
 .../builder/src/components/commandPalette/CommandPalette.svelte  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/builder/src/components/commandPalette/CommandPalette.svelte b/packages/builder/src/components/commandPalette/CommandPalette.svelte
index e1d8f5f6a48..427b1e960f4 100644
--- a/packages/builder/src/components/commandPalette/CommandPalette.svelte
+++ b/packages/builder/src/components/commandPalette/CommandPalette.svelte
@@ -376,6 +376,7 @@
                 <Icon size="M" name={command.icon} />
                 <strong>{command.type}:&nbsp;</strong>
                 <div class="name">
+                  <!--eslint-disable-next-line svelte/no-at-html-tags-->
                   {@html command.name}
                 </div>
               </div>

From a5eefbff3ddfe52ecbe9afa629e2281d4797c129 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 29 Apr 2025 12:48:03 +0100
Subject: [PATCH 7/7] Revert changes to layout

---
 .../builder/src/pages/builder/portal/_layout.svelte | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte
index e49dc8b3f34..323b2310371 100644
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@@ -93,10 +93,8 @@
         <div class="desktop">
           <UpgradeButton />
         </div>
-        <div class="right">
-          <div class="dropdown">
-            <UserDropdown />
-          </div>
+        <div class="dropdown">
+          <UserDropdown />
         </div>
       </div>
       <div class="main">
@@ -158,13 +156,6 @@
   .desktop {
     display: contents;
   }
-  .right {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
 
   @media (max-width: 640px) {
     .mobile {