From 8950097a98082552e170df9d9cf2cf58a8716eec Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Fri, 29 Aug 2025 17:06:23 +0000
Subject: [PATCH 1/6] latest

---
 components/webui/client/package.json          |  3 +-
 .../FreeformButton/index.tsx                  | 35 +++++++++++++++++++
 .../SqlInterfaceButton/GuidedButton/index.tsx | 34 ++++++++++++++++++
 .../SqlInterfaceButton/index.module.css       |  3 ++
 .../Presto/SqlInterfaceButton/index.tsx       | 25 +++++++++++++
 .../QueryStatus/index.module.css              |  0
 .../SearchControls/index.module.css           |  9 ++++-
 .../pages/SearchPage/SearchControls/index.tsx | 11 ++++--
 .../SearchPage/SearchState/Presto/index.tsx   | 29 +++++++++++++++
 .../SearchPage/SearchState/Presto/typings.ts  | 14 ++++++++
 10 files changed, 158 insertions(+), 5 deletions(-)
 create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/FreeformButton/index.tsx
 create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/GuidedButton/index.tsx
 create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/index.module.css
 create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/index.tsx
 create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.module.css
 create mode 100644 components/webui/client/src/pages/SearchPage/SearchState/Presto/index.tsx
 create mode 100644 components/webui/client/src/pages/SearchPage/SearchState/Presto/typings.ts

diff --git a/components/webui/client/package.json b/components/webui/client/package.json
index fc38674522..ec43337473 100644
--- a/components/webui/client/package.json
+++ b/components/webui/client/package.json
@@ -7,7 +7,8 @@
     "build": "tsc -b && vite build",
     "lint:check": "eslint",
     "lint:fix": "eslint --fix",
-    "start": "vite"
+    "start": "vite",
+    "guided": "VITE_GUIDED_DEV=true npm run start"
   },
   "author": "YScope Inc. <dev@yscope.com>",
   "license": "Apache-2.0",
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/FreeformButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/FreeformButton/index.tsx
new file mode 100644
index 0000000000..80aaf1e1b5
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/FreeformButton/index.tsx
@@ -0,0 +1,35 @@
+import {EditOutlined} from "@ant-design/icons";
+import {Button} from "antd";
+
+import usePrestoSearchState from "../../../../SearchState/Presto";
+import {PRESTO_SQL_INTERFACE} from "../../../../SearchState/Presto/typings";
+
+
+/**
+ * Renders a button to switch to Freeform SQL interface.
+ *
+ * @return
+ */
+const FreeformButton = () => {
+    const setSqlInterface = usePrestoSearchState((state) => state.setSqlInterface);
+
+    const handleClick = () => {
+        setSqlInterface(PRESTO_SQL_INTERFACE.FREEFORM);
+    };
+
+    return (
+        <Button
+            icon={<EditOutlined/>}
+            size={"middle"}
+            variant="filled"
+            color="default"
+            onClick={handleClick}
+            block
+        >
+            Freeform
+        </Button>
+    );
+};
+
+
+export default FreeformButton;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/GuidedButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/GuidedButton/index.tsx
new file mode 100644
index 0000000000..1253a8ed57
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/GuidedButton/index.tsx
@@ -0,0 +1,34 @@
+import {AppstoreOutlined} from "@ant-design/icons";
+import {Button} from "antd";
+
+import usePrestoSearchState from "../../../../SearchState/Presto";
+import {PRESTO_SQL_INTERFACE} from "../../../../SearchState/Presto/typings";
+
+
+/**
+ * Renders a button to switch to Guided SQL interface (query builder).
+ *
+ * @return
+ */
+const GuidedButton = () => {
+    const setSqlInterface = usePrestoSearchState((state) => state.setSqlInterface);
+
+    const handleClick = () => {
+        setSqlInterface(PRESTO_SQL_INTERFACE.GUIDED);
+    };
+
+    return (
+        <Button
+            icon={<AppstoreOutlined/>}
+            size={"middle"}
+            variant="filled"
+            color="default"
+            onClick={handleClick}
+            block
+        >
+            Guided
+        </Button>
+    );
+};
+
+export default GuidedButton;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/index.module.css
new file mode 100644
index 0000000000..7bbab6a978
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/index.module.css
@@ -0,0 +1,3 @@
+.sqlInterfaceButton {
+    width: 100px;
+}
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/index.tsx
new file mode 100644
index 0000000000..6fbe7f1818
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/index.tsx
@@ -0,0 +1,25 @@
+import usePrestoSearchState from "../../../SearchState/Presto";
+import {PRESTO_SQL_INTERFACE} from "../../../SearchState/Presto/typings";
+import FreeformButton from "./FreeformButton";
+import GuidedButton from "./GuidedButton";
+import styles from "./index.module.css";
+
+
+/**
+ * Renders the button to switch Presto SQL interface.
+ *
+ * @return
+ */
+const SqlInterfaceButton = () => {
+    const sqlInterface = usePrestoSearchState((state) => state.sqlInterface);
+
+    return (
+        <div className={styles["sqlInterfaceButton"]}>
+            {sqlInterface === PRESTO_SQL_INTERFACE.GUIDED ?
+                <FreeformButton/> :
+                <GuidedButton/>}
+        </div>
+    );
+};
+
+export default SqlInterfaceButton;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
index b476cc99cf..a79087931a 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
@@ -9,13 +9,20 @@
     gap: 10px;
 }
 
-.buttonAndStatusRow {
+.buttonsAndStatusRow {
     display: flex;
+    flex-direction: row;
     align-items: flex-start;
     justify-content: space-between;
     gap: 10px;
 }
 
+.buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+}
+
 .status {
     margin-left: 2px;
 }
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
index 557511175d..2decdd6d98 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
@@ -6,6 +6,7 @@ import {
 } from "../../../config";
 import Dataset from "./Dataset";
 import styles from "./index.module.css";
+import SqlInterfaceButton from "./Presto/SqlInterfaceButton";
 import SqlQueryInput from "./Presto/SqlQueryInput";
 import SqlSearchButton from "./Presto/SqlSearchButton";
 import QueryInput from "./QueryInput";
@@ -29,6 +30,8 @@ const handleSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
  * @return
  */
 const SearchControls = () => {
+    const isGuidedEnabled = "true" === import.meta.env.VITE_GUIDED_DEV;
+
     return (
         <form onSubmit={handleSubmit}>
             {SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO ?
@@ -48,11 +51,14 @@ const SearchControls = () => {
                 (
                     <div className={styles["searchControlsContainer"]}>
                         <SqlQueryInput/>
-                        <div className={styles["buttonAndStatusRow"]}>
+                        <div className={styles["buttonsAndStatusRow"]}>
                             <div className={styles["status"]}>
                                 <QueryStatus/>
                             </div>
-                            <SqlSearchButton/>
+                            <div className={styles["buttons"]}>
+                                {isGuidedEnabled && <SqlInterfaceButton/>}
+                                <SqlSearchButton/>
+                            </div>
                         </div>
                     </div>
                 )}
@@ -60,5 +66,4 @@ const SearchControls = () => {
     );
 };
 
-
 export default SearchControls;
diff --git a/components/webui/client/src/pages/SearchPage/SearchState/Presto/index.tsx b/components/webui/client/src/pages/SearchPage/SearchState/Presto/index.tsx
new file mode 100644
index 0000000000..473aaf4e04
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchState/Presto/index.tsx
@@ -0,0 +1,29 @@
+import {create} from "zustand";
+import {PRESTO_SQL_INTERFACE} from "./typings";
+
+
+/**
+ * Default values of the Presto search state.
+ */
+const PRESTO_SEARCH_STATE_DEFAULT = Object.freeze({
+    sqlInterface: PRESTO_SQL_INTERFACE.FREEFORM,
+});
+
+interface PrestoSearchState {
+    /**
+     * SQL interface for presto search controls.
+     */
+    sqlInterface: PRESTO_SQL_INTERFACE;
+
+    setSqlInterface: (iface: PRESTO_SQL_INTERFACE) => void;
+}
+
+const usePrestoSearchState = create<PrestoSearchState>((set) => ({
+    ...PRESTO_SEARCH_STATE_DEFAULT,
+    setSqlInterface: (iface) => {
+        set({sqlInterface: iface});
+    },
+}));
+
+export {PRESTO_SEARCH_STATE_DEFAULT};
+export default usePrestoSearchState;
diff --git a/components/webui/client/src/pages/SearchPage/SearchState/Presto/typings.ts b/components/webui/client/src/pages/SearchPage/SearchState/Presto/typings.ts
new file mode 100644
index 0000000000..d74a306ccf
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchState/Presto/typings.ts
@@ -0,0 +1,14 @@
+/**
+ *Presto SQL interface types.
+ */
+export enum PRESTO_SQL_INTERFACE {
+    /**
+     * Guided interface with limited SQL dialect.
+     */
+    GUIDED = "guided",
+
+    /**
+     * Freeform interface with SQL editor.
+     */
+    FREEFORM = "freeform",
+}

From 6fb41307dbba4adba26560099ff663587899ebdb Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Fri, 29 Aug 2025 17:14:42 +0000
Subject: [PATCH 2/6] latest

---
 .../Presto/SqlInterfaceButton/GuidedButton/index.tsx   |  2 +-
 .../SearchControls/Presto/SqlInterfaceButton/index.tsx |  4 ++--
 .../SearchControls/QueryStatus/index.module.css        |  0
 .../pages/SearchPage/SearchControls/index.module.css   | 10 +++++-----
 .../src/pages/SearchPage/SearchControls/index.tsx      |  4 +++-
 .../src/pages/SearchPage/SearchState/Presto/index.tsx  |  2 +-
 .../src/pages/SearchPage/SearchState/Presto/typings.ts |  2 +-
 7 files changed, 13 insertions(+), 11 deletions(-)
 delete mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.module.css

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/GuidedButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/GuidedButton/index.tsx
index 1253a8ed57..8a10d2f136 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/GuidedButton/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/GuidedButton/index.tsx
@@ -6,7 +6,7 @@ import {PRESTO_SQL_INTERFACE} from "../../../../SearchState/Presto/typings";
 
 
 /**
- * Renders a button to switch to Guided SQL interface (query builder).
+ * Renders a button to switch to Guided SQL interface.
  *
  * @return
  */
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/index.tsx
index 6fbe7f1818..fb56745d57 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/index.tsx
@@ -16,8 +16,8 @@ const SqlInterfaceButton = () => {
     return (
         <div className={styles["sqlInterfaceButton"]}>
             {sqlInterface === PRESTO_SQL_INTERFACE.GUIDED ?
-                <FreeformButton/> :
-                <GuidedButton/>}
+                <GuidedButton/> :
+                <FreeformButton/>}
         </div>
     );
 };
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.module.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
index a79087931a..065c2e3084 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
@@ -9,7 +9,11 @@
     gap: 10px;
 }
 
-.buttonsAndStatusRow {
+.status {
+    margin-left: 2px;
+}
+
+.statusAndButtonsRow {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
@@ -22,7 +26,3 @@
     flex-direction: row;
     gap: 5px;
 }
-
-.status {
-    margin-left: 2px;
-}
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
index 2decdd6d98..b6b1a78dc8 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
@@ -30,6 +30,8 @@ const handleSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
  * @return
  */
 const SearchControls = () => {
+    /* eslint-disable-next-line no-warning-comments */
+    // TODO: Remove flag and related logic when the new guide UI is fully implemented.
     const isGuidedEnabled = "true" === import.meta.env.VITE_GUIDED_DEV;
 
     return (
@@ -51,7 +53,7 @@ const SearchControls = () => {
                 (
                     <div className={styles["searchControlsContainer"]}>
                         <SqlQueryInput/>
-                        <div className={styles["buttonsAndStatusRow"]}>
+                        <div className={styles["statusAndButtonsRow"]}>
                             <div className={styles["status"]}>
                                 <QueryStatus/>
                             </div>
diff --git a/components/webui/client/src/pages/SearchPage/SearchState/Presto/index.tsx b/components/webui/client/src/pages/SearchPage/SearchState/Presto/index.tsx
index 473aaf4e04..a0cf84de96 100644
--- a/components/webui/client/src/pages/SearchPage/SearchState/Presto/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchState/Presto/index.tsx
@@ -11,7 +11,7 @@ const PRESTO_SEARCH_STATE_DEFAULT = Object.freeze({
 
 interface PrestoSearchState {
     /**
-     * SQL interface for presto search controls.
+     * Presto SQL interface.
      */
     sqlInterface: PRESTO_SQL_INTERFACE;
 
diff --git a/components/webui/client/src/pages/SearchPage/SearchState/Presto/typings.ts b/components/webui/client/src/pages/SearchPage/SearchState/Presto/typings.ts
index d74a306ccf..f8e58224c5 100644
--- a/components/webui/client/src/pages/SearchPage/SearchState/Presto/typings.ts
+++ b/components/webui/client/src/pages/SearchPage/SearchState/Presto/typings.ts
@@ -1,5 +1,5 @@
 /**
- *Presto SQL interface types.
+ * Presto SQL interface types.
  */
 export enum PRESTO_SQL_INTERFACE {
     /**

From 0168234239f3e8f910f52cef1158433e0edcf4d2 Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Fri, 29 Aug 2025 17:16:14 +0000
Subject: [PATCH 3/6] latest

---
 .../Presto/SqlInterfaceButton/FreeformButton/index.tsx      | 6 +++---
 .../Presto/SqlInterfaceButton/GuidedButton/index.tsx        | 6 +++---
 .../src/pages/SearchPage/SearchState/Presto/index.tsx       | 1 +
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/FreeformButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/FreeformButton/index.tsx
index 80aaf1e1b5..cdee93555c 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/FreeformButton/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/FreeformButton/index.tsx
@@ -19,12 +19,12 @@ const FreeformButton = () => {
 
     return (
         <Button
+            block={true}
+            color={"default"}
             icon={<EditOutlined/>}
             size={"middle"}
-            variant="filled"
-            color="default"
+            variant={"filled"}
             onClick={handleClick}
-            block
         >
             Freeform
         </Button>
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/GuidedButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/GuidedButton/index.tsx
index 8a10d2f136..9f88ede106 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/GuidedButton/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/GuidedButton/index.tsx
@@ -19,12 +19,12 @@ const GuidedButton = () => {
 
     return (
         <Button
+            block={true}
+            color={"default"}
             icon={<AppstoreOutlined/>}
             size={"middle"}
-            variant="filled"
-            color="default"
+            variant={"filled"}
             onClick={handleClick}
-            block
         >
             Guided
         </Button>
diff --git a/components/webui/client/src/pages/SearchPage/SearchState/Presto/index.tsx b/components/webui/client/src/pages/SearchPage/SearchState/Presto/index.tsx
index a0cf84de96..3910620c2a 100644
--- a/components/webui/client/src/pages/SearchPage/SearchState/Presto/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchState/Presto/index.tsx
@@ -1,4 +1,5 @@
 import {create} from "zustand";
+
 import {PRESTO_SQL_INTERFACE} from "./typings";
 
 

From 05b9f933eaa0cc8ddd3029d3546ac7b9cbd7d2ab Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Fri, 29 Aug 2025 17:17:18 +0000
Subject: [PATCH 4/6] latest

---
 .../client/src/pages/SearchPage/SearchControls/index.module.css  | 1 -
 .../webui/client/src/pages/SearchPage/SearchControls/index.tsx   | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
index 065c2e3084..6f46811d31 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
@@ -15,7 +15,6 @@
 
 .statusAndButtonsRow {
     display: flex;
-    flex-direction: row;
     align-items: flex-start;
     justify-content: space-between;
     gap: 10px;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
index b6b1a78dc8..382036ecbe 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
@@ -68,4 +68,5 @@ const SearchControls = () => {
     );
 };
 
+
 export default SearchControls;

From 306ef27eef935c916868205c79cf9d9413d6ec61 Mon Sep 17 00:00:00 2001
From: davemarco <83603688+davemarco@users.noreply.github.com>
Date: Tue, 2 Sep 2025 15:17:39 -0400
Subject: [PATCH 5/6] Update
 components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/index.tsx

Co-authored-by: hoophalab <200652805+hoophalab@users.noreply.github.com>
---
 .../SearchControls/Presto/SqlInterfaceButton/index.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/index.tsx
index fb56745d57..6fbe7f1818 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/index.tsx
@@ -16,8 +16,8 @@ const SqlInterfaceButton = () => {
     return (
         <div className={styles["sqlInterfaceButton"]}>
             {sqlInterface === PRESTO_SQL_INTERFACE.GUIDED ?
-                <GuidedButton/> :
-                <FreeformButton/>}
+                <FreeformButton/> :
+                <GuidedButton/>}
         </div>
     );
 };

From 05906368f73d63e4e6b39da41dfb5c0c3d916856 Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Thu, 4 Sep 2025 13:31:26 +0000
Subject: [PATCH 6/6] fix build error

---
 .../webui/client/src/pages/SearchPage/SearchControls/index.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
index 382036ecbe..79413c3f77 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
@@ -32,7 +32,7 @@ const handleSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
 const SearchControls = () => {
     /* eslint-disable-next-line no-warning-comments */
     // TODO: Remove flag and related logic when the new guide UI is fully implemented.
-    const isGuidedEnabled = "true" === import.meta.env.VITE_GUIDED_DEV;
+    const isGuidedEnabled = "true" === import.meta.env[`VITE_GUIDED_DEV`];
 
     return (
         <form onSubmit={handleSubmit}>