From fa80eb497c8e554e18567ba5a1f180cb144c56cf Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 6 May 2025 02:43:56 +0000
Subject: [PATCH 01/15] Improve search results formatting for better
 readability and user experience

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
---
 ui/src/components/RegistrySearch.tsx | 159 +++++++++++++++++++--------
 1 file changed, 112 insertions(+), 47 deletions(-)

diff --git a/ui/src/components/RegistrySearch.tsx b/ui/src/components/RegistrySearch.tsx
index 24d6886d4d5..884fde0b331 100644
--- a/ui/src/components/RegistrySearch.tsx
+++ b/ui/src/components/RegistrySearch.tsx
@@ -9,9 +9,38 @@ import {
   EuiFieldSearch,
   EuiSpacer,
   EuiHorizontalRule,
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiBadge,
+  EuiTitle,
 } from "@elastic/eui";
 import EuiCustomLink from "./EuiCustomLink";
 
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+
+const searchResultsStyles = {
+  searchResults: css`
+    margin-top: 8px;
+  `,
+  categoryGroup: css`
+    margin-bottom: 8px;
+  `,
+  searchResultItem: css`
+    padding: 8px 0;
+    border-bottom: 1px solid #eee;
+    &:last-child {
+      border-bottom: none;
+    }
+  `,
+  itemDescription: css`
+    font-size: 0.85em;
+    color: #666;
+    margin-top: 4px;
+  `,
+};
+
 interface RegistrySearchProps {
   categories: {
     name: string;
@@ -24,6 +53,16 @@ export interface RegistrySearchRef {
   focusSearchInput: () => void;
 }
 
+const getItemType = (item: any, category: string): string | undefined => {
+  if (category === "Features" && "valueType" in item) {
+    return item.valueType;
+  }
+  if (category === "Feature Views" && "type" in item) {
+    return item.type;
+  }
+  return undefined;
+};
+
 const RegistrySearch = forwardRef<RegistrySearchRef, RegistrySearchProps>(
   ({ categories }, ref) => {
     const [searchText, setSearchText] = useState("");
@@ -57,7 +96,29 @@ const RegistrySearch = forwardRef<RegistrySearchRef, RegistrySearchProps>(
           })
         : [];
 
-      return { name, items: filteredItems, getLink };
+      const items = filteredItems.map((item) => {
+        const itemName =
+          "name" in item
+            ? String(item.name)
+            : "spec" in item && item.spec && "name" in item.spec
+              ? String(item.spec.name ?? "Unknown")
+              : "Unknown";
+
+        return {
+          name: itemName,
+          link: getLink(item),
+          description:
+            "spec" in item && item.spec && "description" in item.spec
+              ? String(item.spec.description || "")
+              : "",
+          type: getItemType(item, name),
+        };
+      });
+
+      return {
+        title: name,
+        items,
+      };
     });
 
     return (
@@ -81,59 +142,63 @@ const RegistrySearch = forwardRef<RegistrySearchRef, RegistrySearchProps>(
         />
         <EuiSpacer size="s" />
         {searchText && (
-          <>
+          <div css={searchResultsStyles.searchResults}>
             <EuiText>
               <h4>Search Results</h4>
             </EuiText>
             <EuiSpacer size="xs" />
-            {searchResults.some(({ items }) => items.length > 0) ? (
-              <div className="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow">
-                {searchResults.map(({ name, items, getLink }, index) =>
-                  items.length > 0 ? (
-                    <div key={index} className="euiPanel__body">
-                      <EuiText>
-                        <h5>{name}</h5>
-                      </EuiText>
-                      <EuiSpacer size="xs" />
-                      <ul
-                        style={{ listStyleType: "none", padding: 0, margin: 0 }}
-                      >
-                        {items.map((item, idx) => {
-                          const itemName =
-                            "name" in item
-                              ? item.name
-                              : "spec" in item
-                                ? item.spec?.name
-                                : "Unknown";
-
-                          const itemLink = getLink(item);
-
-                          return (
-                            <li key={idx} style={{ margin: "8px 0" }}>
-                              <EuiCustomLink to={itemLink}>
-                                {itemName}
+            {searchResults.filter((result) => result.items.length > 0).length >
+            0 ? (
+              searchResults
+                .filter((result) => result.items.length > 0)
+                .map((result) => (
+                  <div
+                    key={result.title}
+                    css={searchResultsStyles.categoryGroup}
+                  >
+                    <EuiPanel hasBorder={true} paddingSize="m">
+                      <EuiTitle size="xs">
+                        <h3>
+                          {result.title} ({result.items.length})
+                        </h3>
+                      </EuiTitle>
+                      <EuiHorizontalRule margin="xs" />
+                      {result.items.map((item) => (
+                        <div
+                          key={item.name}
+                          css={searchResultsStyles.searchResultItem}
+                        >
+                          <EuiFlexGroup>
+                            <EuiFlexItem>
+                              <EuiCustomLink to={item.link}>
+                                <strong>{item.name}</strong>
                               </EuiCustomLink>
-                            </li>
-                          );
-                        })}
-                      </ul>
-                      {index <
-                        searchResults.filter(
-                          (result) => result.items.length > 0,
-                        ).length -
-                          1 && <EuiHorizontalRule margin="m" />}
-                    </div>
-                  ) : null,
-                )}
-              </div>
+                              {item.description && (
+                                <div css={searchResultsStyles.itemDescription}>
+                                  {item.description}
+                                </div>
+                              )}
+                            </EuiFlexItem>
+                            {item.type && (
+                              <EuiFlexItem grow={false}>
+                                <EuiBadge>{item.type}</EuiBadge>
+                              </EuiFlexItem>
+                            )}
+                          </EuiFlexGroup>
+                        </div>
+                      ))}
+                    </EuiPanel>
+                    <EuiSpacer size="m" />
+                  </div>
+                ))
             ) : (
-              <div className="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow">
-                <div className="euiPanel__body">
-                  <p>No matches found.</p>
-                </div>
-              </div>
+              <EuiPanel hasBorder={true} paddingSize="m" color="subdued">
+                <EuiText textAlign="center">
+                  <p>No matches found for "{searchText}"</p>
+                </EuiText>
+              </EuiPanel>
             )}
-          </>
+          </div>
         )}
       </>
     );

From 95df69f93c9f25237bd86097af68be6a0eef31f1 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 6 May 2025 02:48:01 +0000
Subject: [PATCH 02/15] Fix TypeScript errors with CSS implementation in search
 results

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
---
 ui/src/components/RegistrySearch.tsx | 52 +++++++++++++++-------------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/ui/src/components/RegistrySearch.tsx b/ui/src/components/RegistrySearch.tsx
index 884fde0b331..0b60bf07188 100644
--- a/ui/src/components/RegistrySearch.tsx
+++ b/ui/src/components/RegistrySearch.tsx
@@ -17,28 +17,28 @@ import {
 } from "@elastic/eui";
 import EuiCustomLink from "./EuiCustomLink";
 
-/** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
 
 const searchResultsStyles = {
-  searchResults: css`
-    margin-top: 8px;
-  `,
-  categoryGroup: css`
-    margin-bottom: 8px;
-  `,
-  searchResultItem: css`
-    padding: 8px 0;
-    border-bottom: 1px solid #eee;
-    &:last-child {
-      border-bottom: none;
-    }
-  `,
-  itemDescription: css`
-    font-size: 0.85em;
-    color: #666;
-    margin-top: 4px;
-  `,
+  searchResults: {
+    marginTop: "8px",
+  },
+  categoryGroup: {
+    marginBottom: "8px",
+  },
+  searchResultItem: {
+    padding: "8px 0",
+    borderBottom: "1px solid #eee",
+  },
+  searchResultItemLast: {
+    padding: "8px 0",
+    borderBottom: "none",
+  },
+  itemDescription: {
+    fontSize: "0.85em",
+    color: "#666",
+    marginTop: "4px",
+  },
 };
 
 interface RegistrySearchProps {
@@ -142,7 +142,7 @@ const RegistrySearch = forwardRef<RegistrySearchRef, RegistrySearchProps>(
         />
         <EuiSpacer size="s" />
         {searchText && (
-          <div css={searchResultsStyles.searchResults}>
+          <div style={searchResultsStyles.searchResults}>
             <EuiText>
               <h4>Search Results</h4>
             </EuiText>
@@ -154,7 +154,7 @@ const RegistrySearch = forwardRef<RegistrySearchRef, RegistrySearchProps>(
                 .map((result) => (
                   <div
                     key={result.title}
-                    css={searchResultsStyles.categoryGroup}
+                    style={searchResultsStyles.categoryGroup}
                   >
                     <EuiPanel hasBorder={true} paddingSize="m">
                       <EuiTitle size="xs">
@@ -163,10 +163,14 @@ const RegistrySearch = forwardRef<RegistrySearchRef, RegistrySearchProps>(
                         </h3>
                       </EuiTitle>
                       <EuiHorizontalRule margin="xs" />
-                      {result.items.map((item) => (
+                      {result.items.map((item, idx) => (
                         <div
                           key={item.name}
-                          css={searchResultsStyles.searchResultItem}
+                          style={
+                            idx === result.items.length - 1
+                              ? searchResultsStyles.searchResultItemLast
+                              : searchResultsStyles.searchResultItem
+                          }
                         >
                           <EuiFlexGroup>
                             <EuiFlexItem>
@@ -174,7 +178,7 @@ const RegistrySearch = forwardRef<RegistrySearchRef, RegistrySearchProps>(
                                 <strong>{item.name}</strong>
                               </EuiCustomLink>
                               {item.description && (
-                                <div css={searchResultsStyles.itemDescription}>
+                                <div style={searchResultsStyles.itemDescription}>
                                   {item.description}
                                 </div>
                               )}

From 9469d70ff2c09071ad08c53bd74bbd9963e34afd Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 6 May 2025 02:50:34 +0000
Subject: [PATCH 03/15] Add feature to clear search bar after clicking a result

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
---
 ui/src/components/RegistrySearch.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/RegistrySearch.tsx b/ui/src/components/RegistrySearch.tsx
index 0b60bf07188..450780f2307 100644
--- a/ui/src/components/RegistrySearch.tsx
+++ b/ui/src/components/RegistrySearch.tsx
@@ -174,7 +174,10 @@ const RegistrySearch = forwardRef<RegistrySearchRef, RegistrySearchProps>(
                         >
                           <EuiFlexGroup>
                             <EuiFlexItem>
-                              <EuiCustomLink to={item.link}>
+                              <EuiCustomLink 
+                                to={item.link} 
+                                onClick={() => setSearchText("")}
+                              >
                                 <strong>{item.name}</strong>
                               </EuiCustomLink>
                               {item.description && (

From a4f30b0b78ba25c918b839c3c56d3601e4a6fe7b Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 6 May 2025 02:51:39 +0000
Subject: [PATCH 04/15] Fix linting issues in RegistrySearch component

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
---
 ui/src/components/RegistrySearch.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/RegistrySearch.tsx b/ui/src/components/RegistrySearch.tsx
index 450780f2307..d9d72a20b1a 100644
--- a/ui/src/components/RegistrySearch.tsx
+++ b/ui/src/components/RegistrySearch.tsx
@@ -174,14 +174,16 @@ const RegistrySearch = forwardRef<RegistrySearchRef, RegistrySearchProps>(
                         >
                           <EuiFlexGroup>
                             <EuiFlexItem>
-                              <EuiCustomLink 
-                                to={item.link} 
+                              <EuiCustomLink
+                                to={item.link}
                                 onClick={() => setSearchText("")}
                               >
                                 <strong>{item.name}</strong>
                               </EuiCustomLink>
                               {item.description && (
-                                <div style={searchResultsStyles.itemDescription}>
+                                <div
+                                  style={searchResultsStyles.itemDescription}
+                                >
                                   {item.description}
                                 </div>
                               )}

From 52c032fe414c8ac51fda64b7795445de1eb3e476 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 6 May 2025 03:16:01 +0000
Subject: [PATCH 05/15] Implement command palette/spotlight search triggered by
 Cmd+K

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
---
 ui/src/components/CommandPalette.tsx | 239 +++++++++++++++++++++++++++
 ui/src/pages/Layout.tsx              |  16 +-
 2 files changed, 249 insertions(+), 6 deletions(-)
 create mode 100644 ui/src/components/CommandPalette.tsx

diff --git a/ui/src/components/CommandPalette.tsx b/ui/src/components/CommandPalette.tsx
new file mode 100644
index 00000000000..a4057c65d2b
--- /dev/null
+++ b/ui/src/components/CommandPalette.tsx
@@ -0,0 +1,239 @@
+import React, { useRef, useEffect } from "react";
+import {
+  EuiModal,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiModalBody,
+  EuiFieldSearch,
+  EuiText,
+  EuiSpacer,
+  EuiHorizontalRule,
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiBadge,
+  EuiTitle,
+  EuiOverlayMask,
+  EuiKeyboardAccessible,
+} from "@elastic/eui";
+import EuiCustomLink from "./EuiCustomLink";
+
+const commandPaletteStyles = {
+  modal: {
+    width: "600px",
+    maxWidth: "90vw",
+  },
+  searchResults: {
+    marginTop: "8px",
+    maxHeight: "60vh",
+    overflowY: "auto",
+  },
+  categoryGroup: {
+    marginBottom: "8px",
+  },
+  searchResultItem: {
+    padding: "8px 0",
+    borderBottom: "1px solid #eee",
+  },
+  searchResultItemLast: {
+    padding: "8px 0",
+    borderBottom: "none",
+  },
+  itemDescription: {
+    fontSize: "0.85em",
+    color: "#666",
+    marginTop: "4px",
+  },
+};
+
+interface CommandPaletteProps {
+  isOpen: boolean;
+  onClose: () => void;
+  categories: {
+    name: string;
+    data: any[];
+    getLink: (item: any) => string;
+  }[];
+}
+
+const getItemType = (item: any, category: string): string | undefined => {
+  if (category === "Features" && "valueType" in item) {
+    return item.valueType;
+  }
+  if (category === "Feature Views" && "type" in item) {
+    return item.type;
+  }
+  return undefined;
+};
+
+const CommandPalette: React.FC<CommandPaletteProps> = ({
+  isOpen,
+  onClose,
+  categories,
+}) => {
+  const [searchText, setSearchText] = React.useState("");
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 100);
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setSearchText("");
+    }
+  }, [isOpen]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      onClose();
+    }
+  };
+
+  const searchResults = categories.map(({ name, data, getLink }) => {
+    const filteredItems = searchText
+      ? data.filter((item) => {
+          const itemName =
+            "name" in item
+              ? String(item.name)
+              : "spec" in item && item.spec && "name" in item.spec
+                ? String(item.spec.name ?? "Unknown")
+                : "Unknown";
+
+          return itemName.toLowerCase().includes(searchText.toLowerCase());
+        })
+      : [];
+
+    const items = filteredItems.map((item) => {
+      const itemName =
+        "name" in item
+          ? String(item.name)
+          : "spec" in item && item.spec && "name" in item.spec
+            ? String(item.spec.name ?? "Unknown")
+            : "Unknown";
+
+      return {
+        name: itemName,
+        link: getLink(item),
+        description:
+          "spec" in item && item.spec && "description" in item.spec
+            ? String(item.spec.description || "")
+            : "",
+        type: getItemType(item, name),
+      };
+    });
+
+    return {
+      title: name,
+      items,
+    };
+  });
+
+  if (!isOpen) return null;
+
+  return (
+    <EuiOverlayMask onClick={onClose}>
+      <EuiModal
+        onClose={onClose}
+        style={commandPaletteStyles.modal}
+        onKeyDown={handleKeyDown}
+      >
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>Search Registry</EuiModalHeaderTitle>
+        </EuiModalHeader>
+        <EuiModalBody>
+          <EuiFieldSearch
+            placeholder="Search across Feature Views, Features, Entities, etc."
+            value={searchText}
+            onChange={(e) => setSearchText(e.target.value)}
+            isClearable
+            fullWidth
+            inputRef={(node) => {
+              inputRef.current = node;
+            }}
+            aria-label="Search registry"
+            autoFocus
+          />
+          <EuiSpacer size="s" />
+          {searchText ? (
+            <div style={commandPaletteStyles.searchResults}>
+              {searchResults.filter((result) => result.items.length > 0)
+                .length > 0 ? (
+                searchResults
+                  .filter((result) => result.items.length > 0)
+                  .map((result) => (
+                    <div
+                      key={result.title}
+                      style={commandPaletteStyles.categoryGroup}
+                    >
+                      <EuiPanel hasBorder={true} paddingSize="m">
+                        <EuiTitle size="xs">
+                          <h3>
+                            {result.title} ({result.items.length})
+                          </h3>
+                        </EuiTitle>
+                        <EuiHorizontalRule margin="xs" />
+                        {result.items.map((item, idx) => (
+                          <div
+                            key={item.name}
+                            style={
+                              idx === result.items.length - 1
+                                ? commandPaletteStyles.searchResultItemLast
+                                : commandPaletteStyles.searchResultItem
+                            }
+                          >
+                            <EuiFlexGroup>
+                              <EuiFlexItem>
+                                <EuiCustomLink
+                                  to={item.link}
+                                  onClick={() => {
+                                    setSearchText("");
+                                    onClose();
+                                  }}
+                                >
+                                  <strong>{item.name}</strong>
+                                </EuiCustomLink>
+                                {item.description && (
+                                  <div
+                                    style={commandPaletteStyles.itemDescription}
+                                  >
+                                    {item.description}
+                                  </div>
+                                )}
+                              </EuiFlexItem>
+                              {item.type && (
+                                <EuiFlexItem grow={false}>
+                                  <EuiBadge>{item.type}</EuiBadge>
+                                </EuiFlexItem>
+                              )}
+                            </EuiFlexGroup>
+                          </div>
+                        ))}
+                      </EuiPanel>
+                      <EuiSpacer size="m" />
+                    </div>
+                  ))
+              ) : (
+                <EuiPanel hasBorder={true} paddingSize="m" color="subdued">
+                  <EuiText textAlign="center">
+                    <p>No matches found for "{searchText}"</p>
+                  </EuiText>
+                </EuiPanel>
+              )}
+            </div>
+          ) : (
+            <EuiText color="subdued" textAlign="center">
+              <p>Start typing to search...</p>
+            </EuiText>
+          )}
+        </EuiModalBody>
+      </EuiModal>
+    </EuiOverlayMask>
+  );
+};
+
+export default CommandPalette;
diff --git a/ui/src/pages/Layout.tsx b/ui/src/pages/Layout.tsx
index 634c02377fa..a5e05180663 100644
--- a/ui/src/pages/Layout.tsx
+++ b/ui/src/pages/Layout.tsx
@@ -26,13 +26,14 @@ import RegistrySearch, {
   RegistrySearchRef,
 } from "../components/RegistrySearch";
 import GlobalSearchShortcut from "../components/GlobalSearchShortcut";
+import CommandPalette from "../components/CommandPalette";
 
 const Layout = () => {
   // Registry Path Context has to be inside Layout
   // because it has to be under routes
   // in order to use useParams
   let { projectName } = useParams();
-  const setIsSearchOpen = useState(false);
+  const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false);
   const searchRef = useRef<RegistrySearchRef>(null);
 
   const { data: projectsData } = useLoadProjectsList();
@@ -85,16 +86,19 @@ const Layout = () => {
     : [];
 
   const handleSearchOpen = () => {
-    setTimeout(() => {
-      if (searchRef.current) {
-        searchRef.current.focusSearchInput();
-      }
-    }, 100);
+    setIsCommandPaletteOpen(true);
   };
 
   return (
     <RegistryPathContext.Provider value={registryPath}>
       <GlobalSearchShortcut onOpen={handleSearchOpen} />
+      {data && (
+        <CommandPalette
+          isOpen={isCommandPaletteOpen}
+          onClose={() => setIsCommandPaletteOpen(false)}
+          categories={categories}
+        />
+      )}
       <EuiPage paddingSize="none" style={{ background: "transparent" }}>
         <EuiPageSidebar
           paddingSize="l"

From 7112ffa1b26bf4c25ef4f817ffbbc46ce99483ea Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 6 May 2025 12:43:49 +0000
Subject: [PATCH 06/15] Fix TypeScript errors in CommandPalette component

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
---
 ui/src/components/CommandPalette.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/CommandPalette.tsx b/ui/src/components/CommandPalette.tsx
index a4057c65d2b..ce692215512 100644
--- a/ui/src/components/CommandPalette.tsx
+++ b/ui/src/components/CommandPalette.tsx
@@ -14,7 +14,6 @@ import {
   EuiBadge,
   EuiTitle,
   EuiOverlayMask,
-  EuiKeyboardAccessible,
 } from "@elastic/eui";
 import EuiCustomLink from "./EuiCustomLink";
 
@@ -26,7 +25,7 @@ const commandPaletteStyles = {
   searchResults: {
     marginTop: "8px",
     maxHeight: "60vh",
-    overflowY: "auto",
+    overflowY: "auto" as const,
   },
   categoryGroup: {
     marginBottom: "8px",
@@ -136,7 +135,7 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
   if (!isOpen) return null;
 
   return (
-    <EuiOverlayMask onClick={onClose}>
+    <EuiOverlayMask>
       <EuiModal
         onClose={onClose}
         style={commandPaletteStyles.modal}
@@ -160,7 +159,7 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
           />
           <EuiSpacer size="s" />
           {searchText ? (
-            <div style={commandPaletteStyles.searchResults}>
+            <div style={commandPaletteStyles.searchResults as React.CSSProperties}>
               {searchResults.filter((result) => result.items.length > 0)
                 .length > 0 ? (
                 searchResults
@@ -182,8 +181,8 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
                             key={item.name}
                             style={
                               idx === result.items.length - 1
-                                ? commandPaletteStyles.searchResultItemLast
-                                : commandPaletteStyles.searchResultItem
+                                ? commandPaletteStyles.searchResultItemLast as React.CSSProperties
+                                : commandPaletteStyles.searchResultItem as React.CSSProperties
                             }
                           >
                             <EuiFlexGroup>
@@ -199,7 +198,7 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
                                 </EuiCustomLink>
                                 {item.description && (
                                   <div
-                                    style={commandPaletteStyles.itemDescription}
+                                    style={commandPaletteStyles.itemDescription as React.CSSProperties}
                                   >
                                     {item.description}
                                   </div>

From 2d0c43b929873b4484479d242496bf84ff636792 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 6 May 2025 13:36:17 +0000
Subject: [PATCH 07/15] Fix UI issues in command palette: prevent double
 scrollbars and improve modal positioning

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
---
 ui/src/components/CommandPalette.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/CommandPalette.tsx b/ui/src/components/CommandPalette.tsx
index ce692215512..31872bad19b 100644
--- a/ui/src/components/CommandPalette.tsx
+++ b/ui/src/components/CommandPalette.tsx
@@ -21,11 +21,17 @@ const commandPaletteStyles = {
   modal: {
     width: "600px",
     maxWidth: "90vw",
+    maxHeight: "80vh", // Limit modal height to prevent it from going off-screen
+  },
+  modalBody: {
+    padding: "0 16px 16px", // Add padding to prevent content from touching the edges
+    maxHeight: "calc(80vh - 60px)", // Account for header height
+    overflowY: "auto" as const, // Single scrollable element
   },
   searchResults: {
     marginTop: "8px",
-    maxHeight: "60vh",
-    overflowY: "auto" as const,
+    height: "auto", // Let content determine height
+    overflowY: "visible" as const, // Remove nested scrolling
   },
   categoryGroup: {
     marginBottom: "8px",
@@ -138,13 +144,13 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
     <EuiOverlayMask>
       <EuiModal
         onClose={onClose}
-        style={commandPaletteStyles.modal}
+        style={commandPaletteStyles.modal as React.CSSProperties}
         onKeyDown={handleKeyDown}
       >
         <EuiModalHeader>
           <EuiModalHeaderTitle>Search Registry</EuiModalHeaderTitle>
         </EuiModalHeader>
-        <EuiModalBody>
+        <EuiModalBody style={commandPaletteStyles.modalBody as React.CSSProperties}>
           <EuiFieldSearch
             placeholder="Search across Feature Views, Features, Entities, etc."
             value={searchText}

From 3ed7f2dd255e91ed971ce5cead8c71b5bd3de10f Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 6 May 2025 13:39:56 +0000
Subject: [PATCH 08/15] Fix command palette overlay implementation and UI
 issues

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
---
 ui/src/components/CommandPalette.tsx | 42 ++++++++++++++++++++++------
 ui/src/pages/Layout.tsx              |  8 +++++-
 2 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/CommandPalette.tsx b/ui/src/components/CommandPalette.tsx
index 31872bad19b..b3fa6d4794c 100644
--- a/ui/src/components/CommandPalette.tsx
+++ b/ui/src/components/CommandPalette.tsx
@@ -22,10 +22,15 @@ const commandPaletteStyles = {
     width: "600px",
     maxWidth: "90vw",
     maxHeight: "80vh", // Limit modal height to prevent it from going off-screen
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    zIndex: 1000,
   },
   modalBody: {
     padding: "0 16px 16px", // Add padding to prevent content from touching the edges
-    maxHeight: "calc(80vh - 60px)", // Account for header height
+    maxHeight: "calc(80vh - 80px)", // Account for header height
     overflowY: "auto" as const, // Single scrollable element
   },
   searchResults: {
@@ -141,16 +146,33 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
   if (!isOpen) return null;
 
   return (
-    <EuiOverlayMask>
+    <div 
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        zIndex: 1000,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+      onClick={onClose}
+    >
       <EuiModal
         onClose={onClose}
         style={commandPaletteStyles.modal as React.CSSProperties}
         onKeyDown={handleKeyDown}
+        onClick={(e) => e.stopPropagation()}
       >
         <EuiModalHeader>
           <EuiModalHeaderTitle>Search Registry</EuiModalHeaderTitle>
         </EuiModalHeader>
-        <EuiModalBody style={commandPaletteStyles.modalBody as React.CSSProperties}>
+        <EuiModalBody
+          style={commandPaletteStyles.modalBody as React.CSSProperties}
+        >
           <EuiFieldSearch
             placeholder="Search across Feature Views, Features, Entities, etc."
             value={searchText}
@@ -165,7 +187,9 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
           />
           <EuiSpacer size="s" />
           {searchText ? (
-            <div style={commandPaletteStyles.searchResults as React.CSSProperties}>
+            <div
+              style={commandPaletteStyles.searchResults as React.CSSProperties}
+            >
               {searchResults.filter((result) => result.items.length > 0)
                 .length > 0 ? (
                 searchResults
@@ -187,8 +211,8 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
                             key={item.name}
                             style={
                               idx === result.items.length - 1
-                                ? commandPaletteStyles.searchResultItemLast as React.CSSProperties
-                                : commandPaletteStyles.searchResultItem as React.CSSProperties
+                                ? (commandPaletteStyles.searchResultItemLast as React.CSSProperties)
+                                : (commandPaletteStyles.searchResultItem as React.CSSProperties)
                             }
                           >
                             <EuiFlexGroup>
@@ -204,7 +228,9 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
                                 </EuiCustomLink>
                                 {item.description && (
                                   <div
-                                    style={commandPaletteStyles.itemDescription as React.CSSProperties}
+                                    style={
+                                      commandPaletteStyles.itemDescription as React.CSSProperties
+                                    }
                                   >
                                     {item.description}
                                   </div>
@@ -237,7 +263,7 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
           )}
         </EuiModalBody>
       </EuiModal>
-    </EuiOverlayMask>
+    </div>
   );
 };
 
diff --git a/ui/src/pages/Layout.tsx b/ui/src/pages/Layout.tsx
index a5e05180663..970f9ad9aa4 100644
--- a/ui/src/pages/Layout.tsx
+++ b/ui/src/pages/Layout.tsx
@@ -134,7 +134,7 @@ const Layout = () => {
               <EuiPageHeader
                 paddingSize="l"
                 style={{
-                  // position: "sticky",
+                  position: "sticky",
                   top: 0,
                   zIndex: 100,
                   borderBottom: "1px solid #D3DAE6",
@@ -146,6 +146,12 @@ const Layout = () => {
                     style={{ width: "600px", maxWidth: "90%" }}
                   >
                     <RegistrySearch ref={searchRef} categories={categories} />
+                    <button
+                      onClick={() => setIsCommandPaletteOpen(true)}
+                      style={{ marginTop: "10px" }}
+                    >
+                      Open Command Palette (Test)
+                    </button>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiPageHeader>

From 04395f70734ea4838612ab43563809ad9389faf9 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 6 May 2025 13:40:35 +0000
Subject: [PATCH 09/15] Remove unused EuiOverlayMask import

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
---
 ui/src/components/CommandPalette.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/src/components/CommandPalette.tsx b/ui/src/components/CommandPalette.tsx
index b3fa6d4794c..98cf1565683 100644
--- a/ui/src/components/CommandPalette.tsx
+++ b/ui/src/components/CommandPalette.tsx
@@ -13,7 +13,6 @@ import {
   EuiFlexItem,
   EuiBadge,
   EuiTitle,
-  EuiOverlayMask,
 } from "@elastic/eui";
 import EuiCustomLink from "./EuiCustomLink";
 

From e8f2b873815899a8ebd9166f600ec6a279ebbab1 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 6 May 2025 13:49:41 +0000
Subject: [PATCH 10/15] Fix command palette UI issues and improve user
 experience

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
---
 ui/src/components/CommandPalette.tsx | 78 +++++++++++++++++-----------
 ui/src/pages/Layout.tsx              | 19 +++----
 2 files changed, 54 insertions(+), 43 deletions(-)

diff --git a/ui/src/components/CommandPalette.tsx b/ui/src/components/CommandPalette.tsx
index 98cf1565683..f9e5942a035 100644
--- a/ui/src/components/CommandPalette.tsx
+++ b/ui/src/components/CommandPalette.tsx
@@ -142,35 +142,54 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
     };
   });
 
+  console.log("CommandPalette isOpen:", isOpen); // Debug log
+
   if (!isOpen) return null;
 
   return (
-    <div 
+    <div
       style={{
         position: "fixed",
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-        backgroundColor: "rgba(0, 0, 0, 0.5)",
-        zIndex: 1000,
+        backgroundColor: "rgba(0, 0, 0, 0.7)",
+        zIndex: 9999,
         display: "flex",
         alignItems: "center",
-        justifyContent: "center"
+        justifyContent: "center",
       }}
       onClick={onClose}
     >
-      <EuiModal
-        onClose={onClose}
-        style={commandPaletteStyles.modal as React.CSSProperties}
-        onKeyDown={handleKeyDown}
+      <div
+        style={
+          {
+            width: "600px",
+            maxWidth: "90vw",
+            maxHeight: "80vh",
+            backgroundColor: "white",
+            borderRadius: "8px",
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column",
+          } as React.CSSProperties
+        }
         onClick={(e) => e.stopPropagation()}
+        onKeyDown={handleKeyDown}
       >
-        <EuiModalHeader>
-          <EuiModalHeaderTitle>Search Registry</EuiModalHeaderTitle>
-        </EuiModalHeader>
-        <EuiModalBody
-          style={commandPaletteStyles.modalBody as React.CSSProperties}
+        <div style={{ padding: "16px", borderBottom: "1px solid #D3DAE6" }}>
+          <h2 style={{ margin: 0 }}>Search Registry</h2>
+        </div>
+        <div
+          style={
+            {
+              padding: "0 16px 16px",
+              maxHeight: "calc(80vh - 60px)",
+              overflowY: "auto",
+            } as React.CSSProperties
+          }
         >
           <EuiFieldSearch
             placeholder="Search across Feature Views, Features, Entities, etc."
@@ -186,18 +205,13 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
           />
           <EuiSpacer size="s" />
           {searchText ? (
-            <div
-              style={commandPaletteStyles.searchResults as React.CSSProperties}
-            >
+            <div style={{ marginTop: "8px" }}>
               {searchResults.filter((result) => result.items.length > 0)
                 .length > 0 ? (
                 searchResults
                   .filter((result) => result.items.length > 0)
                   .map((result) => (
-                    <div
-                      key={result.title}
-                      style={commandPaletteStyles.categoryGroup}
-                    >
+                    <div key={result.title} style={{ marginBottom: "8px" }}>
                       <EuiPanel hasBorder={true} paddingSize="m">
                         <EuiTitle size="xs">
                           <h3>
@@ -208,11 +222,13 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
                         {result.items.map((item, idx) => (
                           <div
                             key={item.name}
-                            style={
-                              idx === result.items.length - 1
-                                ? (commandPaletteStyles.searchResultItemLast as React.CSSProperties)
-                                : (commandPaletteStyles.searchResultItem as React.CSSProperties)
-                            }
+                            style={{
+                              padding: "8px 0",
+                              borderBottom:
+                                idx === result.items.length - 1
+                                  ? "none"
+                                  : "1px solid #eee",
+                            }}
                           >
                             <EuiFlexGroup>
                               <EuiFlexItem>
@@ -227,9 +243,11 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
                                 </EuiCustomLink>
                                 {item.description && (
                                   <div
-                                    style={
-                                      commandPaletteStyles.itemDescription as React.CSSProperties
-                                    }
+                                    style={{
+                                      fontSize: "0.85em",
+                                      color: "#666",
+                                      marginTop: "4px",
+                                    }}
                                   >
                                     {item.description}
                                   </div>
@@ -260,8 +278,8 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
               <p>Start typing to search...</p>
             </EuiText>
           )}
-        </EuiModalBody>
-      </EuiModal>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/ui/src/pages/Layout.tsx b/ui/src/pages/Layout.tsx
index 970f9ad9aa4..482efb611b5 100644
--- a/ui/src/pages/Layout.tsx
+++ b/ui/src/pages/Layout.tsx
@@ -86,19 +86,18 @@ const Layout = () => {
     : [];
 
   const handleSearchOpen = () => {
+    console.log("Opening command palette"); // Debug log
     setIsCommandPaletteOpen(true);
   };
 
   return (
     <RegistryPathContext.Provider value={registryPath}>
       <GlobalSearchShortcut onOpen={handleSearchOpen} />
-      {data && (
-        <CommandPalette
-          isOpen={isCommandPaletteOpen}
-          onClose={() => setIsCommandPaletteOpen(false)}
-          categories={categories}
-        />
-      )}
+      <CommandPalette
+        isOpen={isCommandPaletteOpen}
+        onClose={() => setIsCommandPaletteOpen(false)}
+        categories={categories}
+      />
       <EuiPage paddingSize="none" style={{ background: "transparent" }}>
         <EuiPageSidebar
           paddingSize="l"
@@ -146,12 +145,6 @@ const Layout = () => {
                     style={{ width: "600px", maxWidth: "90%" }}
                   >
                     <RegistrySearch ref={searchRef} categories={categories} />
-                    <button
-                      onClick={() => setIsCommandPaletteOpen(true)}
-                      style={{ marginTop: "10px" }}
-                    >
-                      Open Command Palette (Test)
-                    </button>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiPageHeader>

From 75bdaeecbe27408e34fc67799e02041c53ba46b7 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 6 May 2025 14:58:16 +0000
Subject: [PATCH 11/15] Fix command palette modal closing when clicking on
 search results

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
---
 ui/src/components/CommandPalette.tsx       | 134 ++++++++++-----------
 ui/src/components/GlobalSearchShortcut.tsx |  10 +-
 ui/src/pages/Layout.tsx                    |  26 +++-
 3 files changed, 94 insertions(+), 76 deletions(-)

diff --git a/ui/src/components/CommandPalette.tsx b/ui/src/components/CommandPalette.tsx
index f9e5942a035..66fcfa0cecd 100644
--- a/ui/src/components/CommandPalette.tsx
+++ b/ui/src/components/CommandPalette.tsx
@@ -16,43 +16,62 @@ import {
 } from "@elastic/eui";
 import EuiCustomLink from "./EuiCustomLink";
 
-const commandPaletteStyles = {
+const commandPaletteStyles: Record<string, React.CSSProperties> = {
+  overlay: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+    zIndex: 9999,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
   modal: {
     width: "600px",
     maxWidth: "90vw",
-    maxHeight: "80vh", // Limit modal height to prevent it from going off-screen
-    position: "fixed",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    zIndex: 1000,
+    maxHeight: "80vh",
+    backgroundColor: "white",
+    borderRadius: "8px",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column"
+  },
+  modalHeader: {
+    padding: "16px",
+    borderBottom: "1px solid #D3DAE6",
+    position: "sticky",
+    top: 0,
+    backgroundColor: "white",
+    zIndex: 1
   },
   modalBody: {
-    padding: "0 16px 16px", // Add padding to prevent content from touching the edges
-    maxHeight: "calc(80vh - 80px)", // Account for header height
-    overflowY: "auto" as const, // Single scrollable element
+    padding: "0 16px 16px",
+    maxHeight: "calc(80vh - 60px)",
+    overflowY: "auto"
   },
   searchResults: {
-    marginTop: "8px",
-    height: "auto", // Let content determine height
-    overflowY: "visible" as const, // Remove nested scrolling
+    marginTop: "8px"
   },
   categoryGroup: {
-    marginBottom: "8px",
+    marginBottom: "8px"
   },
   searchResultItem: {
     padding: "8px 0",
-    borderBottom: "1px solid #eee",
+    borderBottom: "1px solid #eee"
   },
   searchResultItemLast: {
     padding: "8px 0",
-    borderBottom: "none",
+    borderBottom: "none"
   },
   itemDescription: {
     fontSize: "0.85em",
     color: "#666",
-    marginTop: "4px",
-  },
+    marginTop: "4px"
+  }
 };
 
 interface CommandPaletteProps {
@@ -142,54 +161,28 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
     };
   });
 
-  console.log("CommandPalette isOpen:", isOpen); // Debug log
+  console.log("CommandPalette isOpen:", isOpen, "categories:", categories.length); // Debug log
 
-  if (!isOpen) return null;
+  if (!isOpen) {
+    console.log("CommandPalette not rendering due to isOpen=false");
+    return null;
+  }
 
   return (
     <div
-      style={{
-        position: "fixed",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: "rgba(0, 0, 0, 0.7)",
-        zIndex: 9999,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
+      style={commandPaletteStyles.overlay}
       onClick={onClose}
     >
       <div
-        style={
-          {
-            width: "600px",
-            maxWidth: "90vw",
-            maxHeight: "80vh",
-            backgroundColor: "white",
-            borderRadius: "8px",
-            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-            overflow: "hidden",
-            display: "flex",
-            flexDirection: "column",
-          } as React.CSSProperties
-        }
+        style={commandPaletteStyles.modal}
         onClick={(e) => e.stopPropagation()}
         onKeyDown={handleKeyDown}
       >
-        <div style={{ padding: "16px", borderBottom: "1px solid #D3DAE6" }}>
+        <div style={commandPaletteStyles.modalHeader}>
           <h2 style={{ margin: 0 }}>Search Registry</h2>
         </div>
         <div
-          style={
-            {
-              padding: "0 16px 16px",
-              maxHeight: "calc(80vh - 60px)",
-              overflowY: "auto",
-            } as React.CSSProperties
-          }
+          style={commandPaletteStyles.modalBody}
         >
           <EuiFieldSearch
             placeholder="Search across Feature Views, Features, Entities, etc."
@@ -205,13 +198,13 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
           />
           <EuiSpacer size="s" />
           {searchText ? (
-            <div style={{ marginTop: "8px" }}>
+            <div style={commandPaletteStyles.searchResults}>
               {searchResults.filter((result) => result.items.length > 0)
                 .length > 0 ? (
                 searchResults
                   .filter((result) => result.items.length > 0)
                   .map((result) => (
-                    <div key={result.title} style={{ marginBottom: "8px" }}>
+                    <div key={result.title} style={commandPaletteStyles.categoryGroup}>
                       <EuiPanel hasBorder={true} paddingSize="m">
                         <EuiTitle size="xs">
                           <h3>
@@ -222,32 +215,31 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
                         {result.items.map((item, idx) => (
                           <div
                             key={item.name}
-                            style={{
-                              padding: "8px 0",
-                              borderBottom:
-                                idx === result.items.length - 1
-                                  ? "none"
-                                  : "1px solid #eee",
-                            }}
+                            style={
+                              idx === result.items.length - 1
+                                ? commandPaletteStyles.searchResultItemLast
+                                : commandPaletteStyles.searchResultItem
+                            }
                           >
                             <EuiFlexGroup>
                               <EuiFlexItem>
-                                <EuiCustomLink
-                                  to={item.link}
-                                  onClick={() => {
+                                <a
+                                  href={item.link}
+                                  onClick={(e) => {
+                                    e.preventDefault();
                                     setSearchText("");
                                     onClose();
+                                    setTimeout(() => {
+                                      window.location.href = item.link;
+                                    }, 50);
                                   }}
+                                  style={{ color: '#0077cc', textDecoration: 'none' }}
                                 >
                                   <strong>{item.name}</strong>
-                                </EuiCustomLink>
+                                </a>
                                 {item.description && (
                                   <div
-                                    style={{
-                                      fontSize: "0.85em",
-                                      color: "#666",
-                                      marginTop: "4px",
-                                    }}
+                                    style={commandPaletteStyles.itemDescription}
                                   >
                                     {item.description}
                                   </div>
diff --git a/ui/src/components/GlobalSearchShortcut.tsx b/ui/src/components/GlobalSearchShortcut.tsx
index 2c116c6dd63..af80a1e8975 100644
--- a/ui/src/components/GlobalSearchShortcut.tsx
+++ b/ui/src/components/GlobalSearchShortcut.tsx
@@ -9,15 +9,19 @@ const GlobalSearchShortcut: React.FC<GlobalSearchShortcutProps> = ({
 }) => {
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && event.key === "k") {
+      console.log("Key pressed:", event.key, "metaKey:", event.metaKey, "ctrlKey:", event.ctrlKey);
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        console.log("Cmd+K detected, preventing default and calling onOpen");
         event.preventDefault();
+        event.stopPropagation();
         onOpen();
       }
     };
 
-    document.addEventListener("keydown", handleKeyDown);
+    console.log("Adding keydown event listener to window");
+    window.addEventListener("keydown", handleKeyDown, true);
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keydown", handleKeyDown, true);
     };
   }, [onOpen]);
 
diff --git a/ui/src/pages/Layout.tsx b/ui/src/pages/Layout.tsx
index 482efb611b5..b5239f50946 100644
--- a/ui/src/pages/Layout.tsx
+++ b/ui/src/pages/Layout.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 
 import {
   EuiPage,
@@ -86,9 +86,28 @@ const Layout = () => {
     : [];
 
   const handleSearchOpen = () => {
-    console.log("Opening command palette"); // Debug log
+    console.log("Opening command palette - before state update"); // Debug log
     setIsCommandPaletteOpen(true);
+    console.log("Command palette state should be updated to true");
   };
+  
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      console.log("Layout key pressed:", event.key, "metaKey:", event.metaKey, "ctrlKey:", event.ctrlKey);
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        console.log("Layout detected Cmd+K, preventing default");
+        event.preventDefault();
+        event.stopPropagation();
+        handleSearchOpen();
+      }
+    };
+
+    console.log("Layout adding keydown event listener");
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, []);
 
   return (
     <RegistryPathContext.Provider value={registryPath}>
@@ -145,6 +164,9 @@ const Layout = () => {
                     style={{ width: "600px", maxWidth: "90%" }}
                   >
                     <RegistrySearch ref={searchRef} categories={categories} />
+                    <button onClick={handleSearchOpen} style={{ marginTop: "10px" }}>
+                      Open Command Palette (Test)
+                    </button>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiPageHeader>

From 3bf4c839a9f2a877346767129829d5c93cdb7a0f Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 6 May 2025 14:59:42 +0000
Subject: [PATCH 12/15] Apply formatting to command palette components

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
---
 ui/src/components/CommandPalette.tsx       | 46 ++++++++++++----------
 ui/src/components/GlobalSearchShortcut.tsx |  9 ++++-
 ui/src/pages/Layout.tsx                    | 16 ++++++--
 3 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/ui/src/components/CommandPalette.tsx b/ui/src/components/CommandPalette.tsx
index 66fcfa0cecd..2e799493caf 100644
--- a/ui/src/components/CommandPalette.tsx
+++ b/ui/src/components/CommandPalette.tsx
@@ -27,7 +27,7 @@ const commandPaletteStyles: Record<string, React.CSSProperties> = {
     zIndex: 9999,
     display: "flex",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
   },
   modal: {
     width: "600px",
@@ -38,7 +38,7 @@ const commandPaletteStyles: Record<string, React.CSSProperties> = {
     boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
     overflow: "hidden",
     display: "flex",
-    flexDirection: "column"
+    flexDirection: "column",
   },
   modalHeader: {
     padding: "16px",
@@ -46,32 +46,32 @@ const commandPaletteStyles: Record<string, React.CSSProperties> = {
     position: "sticky",
     top: 0,
     backgroundColor: "white",
-    zIndex: 1
+    zIndex: 1,
   },
   modalBody: {
     padding: "0 16px 16px",
     maxHeight: "calc(80vh - 60px)",
-    overflowY: "auto"
+    overflowY: "auto",
   },
   searchResults: {
-    marginTop: "8px"
+    marginTop: "8px",
   },
   categoryGroup: {
-    marginBottom: "8px"
+    marginBottom: "8px",
   },
   searchResultItem: {
     padding: "8px 0",
-    borderBottom: "1px solid #eee"
+    borderBottom: "1px solid #eee",
   },
   searchResultItemLast: {
     padding: "8px 0",
-    borderBottom: "none"
+    borderBottom: "none",
   },
   itemDescription: {
     fontSize: "0.85em",
     color: "#666",
-    marginTop: "4px"
-  }
+    marginTop: "4px",
+  },
 };
 
 interface CommandPaletteProps {
@@ -161,7 +161,12 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
     };
   });
 
-  console.log("CommandPalette isOpen:", isOpen, "categories:", categories.length); // Debug log
+  console.log(
+    "CommandPalette isOpen:",
+    isOpen,
+    "categories:",
+    categories.length,
+  ); // Debug log
 
   if (!isOpen) {
     console.log("CommandPalette not rendering due to isOpen=false");
@@ -169,10 +174,7 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
   }
 
   return (
-    <div
-      style={commandPaletteStyles.overlay}
-      onClick={onClose}
-    >
+    <div style={commandPaletteStyles.overlay} onClick={onClose}>
       <div
         style={commandPaletteStyles.modal}
         onClick={(e) => e.stopPropagation()}
@@ -181,9 +183,7 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
         <div style={commandPaletteStyles.modalHeader}>
           <h2 style={{ margin: 0 }}>Search Registry</h2>
         </div>
-        <div
-          style={commandPaletteStyles.modalBody}
-        >
+        <div style={commandPaletteStyles.modalBody}>
           <EuiFieldSearch
             placeholder="Search across Feature Views, Features, Entities, etc."
             value={searchText}
@@ -204,7 +204,10 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
                 searchResults
                   .filter((result) => result.items.length > 0)
                   .map((result) => (
-                    <div key={result.title} style={commandPaletteStyles.categoryGroup}>
+                    <div
+                      key={result.title}
+                      style={commandPaletteStyles.categoryGroup}
+                    >
                       <EuiPanel hasBorder={true} paddingSize="m">
                         <EuiTitle size="xs">
                           <h3>
@@ -233,7 +236,10 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
                                       window.location.href = item.link;
                                     }, 50);
                                   }}
-                                  style={{ color: '#0077cc', textDecoration: 'none' }}
+                                  style={{
+                                    color: "#0077cc",
+                                    textDecoration: "none",
+                                  }}
                                 >
                                   <strong>{item.name}</strong>
                                 </a>
diff --git a/ui/src/components/GlobalSearchShortcut.tsx b/ui/src/components/GlobalSearchShortcut.tsx
index af80a1e8975..28e55454f30 100644
--- a/ui/src/components/GlobalSearchShortcut.tsx
+++ b/ui/src/components/GlobalSearchShortcut.tsx
@@ -9,7 +9,14 @@ const GlobalSearchShortcut: React.FC<GlobalSearchShortcutProps> = ({
 }) => {
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      console.log("Key pressed:", event.key, "metaKey:", event.metaKey, "ctrlKey:", event.ctrlKey);
+      console.log(
+        "Key pressed:",
+        event.key,
+        "metaKey:",
+        event.metaKey,
+        "ctrlKey:",
+        event.ctrlKey,
+      );
       if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
         console.log("Cmd+K detected, preventing default and calling onOpen");
         event.preventDefault();
diff --git a/ui/src/pages/Layout.tsx b/ui/src/pages/Layout.tsx
index b5239f50946..19684a987cc 100644
--- a/ui/src/pages/Layout.tsx
+++ b/ui/src/pages/Layout.tsx
@@ -90,10 +90,17 @@ const Layout = () => {
     setIsCommandPaletteOpen(true);
     console.log("Command palette state should be updated to true");
   };
-  
+
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      console.log("Layout key pressed:", event.key, "metaKey:", event.metaKey, "ctrlKey:", event.ctrlKey);
+      console.log(
+        "Layout key pressed:",
+        event.key,
+        "metaKey:",
+        event.metaKey,
+        "ctrlKey:",
+        event.ctrlKey,
+      );
       if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
         console.log("Layout detected Cmd+K, preventing default");
         event.preventDefault();
@@ -164,7 +171,10 @@ const Layout = () => {
                     style={{ width: "600px", maxWidth: "90%" }}
                   >
                     <RegistrySearch ref={searchRef} categories={categories} />
-                    <button onClick={handleSearchOpen} style={{ marginTop: "10px" }}>
+                    <button
+                      onClick={handleSearchOpen}
+                      style={{ marginTop: "10px" }}
+                    >
                       Open Command Palette (Test)
                     </button>
                   </EuiFlexItem>

From c98a5b0ddcc7ca174cc57feaafbc7e968f993d62 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 6 May 2025 15:10:39 +0000
Subject: [PATCH 13/15] Use React Router navigation instead of
 window.location.href to prevent full page refreshes

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
---
 ui/src/components/CommandPalette.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/CommandPalette.tsx b/ui/src/components/CommandPalette.tsx
index 2e799493caf..4c317ffa6b6 100644
--- a/ui/src/components/CommandPalette.tsx
+++ b/ui/src/components/CommandPalette.tsx
@@ -1,9 +1,6 @@
 import React, { useRef, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import {
-  EuiModal,
-  EuiModalHeader,
-  EuiModalHeaderTitle,
-  EuiModalBody,
   EuiFieldSearch,
   EuiText,
   EuiSpacer,
@@ -14,7 +11,6 @@ import {
   EuiBadge,
   EuiTitle,
 } from "@elastic/eui";
-import EuiCustomLink from "./EuiCustomLink";
 
 const commandPaletteStyles: Record<string, React.CSSProperties> = {
   overlay: {
@@ -101,6 +97,7 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
 }) => {
   const [searchText, setSearchText] = React.useState("");
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (isOpen && inputRef.current) {
@@ -230,11 +227,14 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
                                   href={item.link}
                                   onClick={(e) => {
                                     e.preventDefault();
-                                    setSearchText("");
+                                    console.log("Search result clicked:", item.name);
+                                    
                                     onClose();
-                                    setTimeout(() => {
-                                      window.location.href = item.link;
-                                    }, 50);
+                                    
+                                    setSearchText("");
+                                    
+                                    console.log("Navigating to:", item.link);
+                                    navigate(item.link);
                                   }}
                                   style={{
                                     color: "#0077cc",

From fff8f06cc7415e77c7334a0861b99cbde8824b92 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 6 May 2025 15:11:39 +0000
Subject: [PATCH 14/15] Format CommandPalette.tsx and clean up code

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
---
 ui/src/components/CommandPalette.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/CommandPalette.tsx b/ui/src/components/CommandPalette.tsx
index 4c317ffa6b6..9750d73e2d9 100644
--- a/ui/src/components/CommandPalette.tsx
+++ b/ui/src/components/CommandPalette.tsx
@@ -227,12 +227,15 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
                                   href={item.link}
                                   onClick={(e) => {
                                     e.preventDefault();
-                                    console.log("Search result clicked:", item.name);
-                                    
+                                    console.log(
+                                      "Search result clicked:",
+                                      item.name,
+                                    );
+
                                     onClose();
-                                    
+
                                     setSearchText("");
-                                    
+
                                     console.log("Navigating to:", item.link);
                                     navigate(item.link);
                                   }}

From 087bfb63050f76f867ea89b95ca2ae8a1d791479 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 6 May 2025 15:40:21 +0000
Subject: [PATCH 15/15] Remove test button from Layout component

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
---
 ui/src/pages/Layout.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/ui/src/pages/Layout.tsx b/ui/src/pages/Layout.tsx
index 19684a987cc..5af751e0acf 100644
--- a/ui/src/pages/Layout.tsx
+++ b/ui/src/pages/Layout.tsx
@@ -171,12 +171,6 @@ const Layout = () => {
                     style={{ width: "600px", maxWidth: "90%" }}
                   >
                     <RegistrySearch ref={searchRef} categories={categories} />
-                    <button
-                      onClick={handleSearchOpen}
-                      style={{ marginTop: "10px" }}
-                    >
-                      Open Command Palette (Test)
-                    </button>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiPageHeader>