@upstash/react-redis-browser 0.2.14-rc.10 → 0.2.14-rc.11

package/dist/index.js

@@ -2665,6 +2665,12 @@ function formatTime(seconds) {
   return parts.slice(0, 1).join(" ");
 }
 var isTest = typeof window !== "undefined" && window.__PLAYWRIGHT__ === true;
+var jsonToJsLiteral = (json) => {
+  return json.replaceAll(/"([$A-Z_a-z][\w$]*)"\s*:/g, "$1:");
+};
+var toJsLiteral = (obj) => {
+  return jsonToJsLiteral(JSON.stringify(obj, null, 2));
+};
 var formatUpstashErrorMessage = (error) => {
   if (error.name !== "UpstashError") return error.message;
   let message = error.message;
@@ -2795,7 +2801,7 @@ var DatabrowserProvider = ({
           removeItem: () => {
           }
         },
-        version: 7,
+        version: 8,
         migrate: (originalState, version) => {
           const state = originalState;
           if (version <= 1) {
@@ -2827,9 +2833,12 @@ var DatabrowserProvider = ({
           if (version <= 6) {
             state.tabs = state.tabs.map(([id, data]) => [
               id,
-              { ...data, valuesSearch: { index: "", queries: {} } }
+              { ...data, valuesSearch: { index: "", queries: {}, queryBuilderMode: "ui" } }
             ]);
           }
+          if (version <= 7) {
+            state.aiDataSharingConsent = _nullishCoalesce(state.aiDataSharingConsent, () => ( false));
+          }
           return state;
         }
       })
@@ -2861,7 +2870,7 @@ var storeCreator = (set, get) => ({
       id,
       selectedKeys: [],
       search: { key: "", type: void 0 },
-      valuesSearch: { index: "", queries: {} },
+      valuesSearch: { index: "", queries: {}, queryBuilderMode: "ui" },
       isValuesSearchSelected: false,
       pinned: false
     };
@@ -3078,9 +3087,29 @@ var storeCreator = (set, get) => ({
       return { ...old, tabs: newTabs };
     });
   },
+  setQueryBuilderMode: (tabId, mode) => {
+    set((old) => {
+      const tabIndex = old.tabs.findIndex(([id]) => id === tabId);
+      if (tabIndex === -1) return old;
+      const newTabs = [...old.tabs];
+      const [, tabData] = newTabs[tabIndex];
+      newTabs[tabIndex] = [
+        tabId,
+        {
+          ...tabData,
+          valuesSearch: { ...tabData.valuesSearch, queryBuilderMode: mode }
+        }
+      ];
+      return { ...old, tabs: newTabs };
+    });
+  },
   searchHistory: [],
   addSearchHistory: (key) => {
     set((old) => ({ ...old, searchHistory: [key, ...old.searchHistory] }));
+  },
+  aiDataSharingConsent: false,
+  setAiDataSharingConsent: (consent) => {
+    set({ aiDataSharingConsent: consent });
   }
 });
 
@@ -3111,7 +3140,8 @@ var useTab = () => {
     setValuesSearch,
     setValuesSearchIndex,
     setValuesSearchQuery,
-    setIsValuesSearchSelected
+    setIsValuesSearchSelected,
+    setQueryBuilderMode
   } = useDatabrowserStore();
   const tabId = useTabId();
   const tabData = _react.useMemo.call(void 0, () => _optionalChain([tabs, 'access', _20 => _20.find, 'call', _21 => _21(([id]) => id === tabId), 'optionalAccess', _22 => _22[1]]), [tabs, tabId]);
@@ -3130,6 +3160,7 @@ var useTab = () => {
         query: _nullishCoalesce(tabData.valuesSearch.queries[tabData.valuesSearch.index], () => ( ""))
       },
       isValuesSearchSelected: tabData.isValuesSearchSelected,
+      queryBuilderMode: _nullishCoalesce(tabData.valuesSearch.queryBuilderMode, () => ( "ui")),
       pinned: tabData.pinned,
       setSelectedKey: (key) => setSelectedKey(tabId, key),
       setSelectedKeys: (keys) => setSelectedKeys(tabId, keys),
@@ -3140,7 +3171,8 @@ var useTab = () => {
       setValuesSearch: (search) => setValuesSearch(tabId, search),
       setValuesSearchIndex: (index) => setValuesSearchIndex(tabId, index),
       setValuesSearchQuery: (query) => setValuesSearchQuery(tabId, query),
-      setIsValuesSearchSelected: (isSelected) => setIsValuesSearchSelected(tabId, isSelected)
+      setIsValuesSearchSelected: (isSelected) => setIsValuesSearchSelected(tabId, isSelected),
+      setQueryBuilderMode: (mode) => setQueryBuilderMode(tabId, mode)
     }),
     [selectedTab, tabs, tabId]
   );
@@ -3170,6 +3202,29 @@ var portalWrapper = wrapper;
 
 var _reactresizablepanels = require('react-resizable-panels');
 
+// src/components/ui/resize-handle.tsx
+
+
+var ResizeHandle = ({
+  direction = "horizontal"
+}) => {
+  const isHorizontal = direction === "horizontal";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _reactresizablepanels.PanelResizeHandle,
+    {
+      className: cn(
+        "group flex items-center justify-center gap-1 rounded-md transition-colors hover:bg-zinc-300/10",
+        isHorizontal ? "mx-[2px] h-full flex-col px-[8px]" : "my-[2px] w-full flex-row py-[8px]"
+      ),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-[3px] w-[3px] rounded-full bg-zinc-300" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-[3px] w-[3px] rounded-full bg-zinc-300" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-[3px] w-[3px] rounded-full bg-zinc-300" })
+      ]
+    }
+  );
+};
+
 // src/components/ui/segmented.tsx
 
 var Segmented = ({
@@ -3181,21 +3236,30 @@ var Segmented = ({
   selectedClassName,
   unselectedClassName
 }) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("flex w-fit gap-[2px] rounded-lg bg-zinc-200 p-[2px] text-sm", className), children: options.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "button",
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
     {
       className: cn(
-        "h-7 rounded-md px-3 transition-all",
-        value === option.key ? _nullishCoalesce(selectedClassName, () => ( "bg-white text-zinc-950")) : _nullishCoalesce(unselectedClassName, () => ( "text-zinc-700")),
-        buttonClassName
+        "flex w-fit select-none gap-[2px] rounded-lg bg-zinc-200 p-[2px] text-sm",
+        className
       ),
-      onClick: () => {
-        _optionalChain([onChange, 'optionalCall', _25 => _25(option.key)]);
-      },
-      children: option.label
-    },
-    option.key
-  )) });
+      children: options.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          className: cn(
+            "h-7 rounded-md px-3 transition-all",
+            value === option.key ? _nullishCoalesce(selectedClassName, () => ( "bg-white text-zinc-950")) : _nullishCoalesce(unselectedClassName, () => ( "text-zinc-700")),
+            buttonClassName
+          ),
+          onClick: () => {
+            _optionalChain([onChange, 'optionalCall', _25 => _25(option.key)]);
+          },
+          children: option.label
+        },
+        option.key
+      ))
+    }
+  );
 };
 
 // src/components/ui/toaster.tsx
@@ -3367,6 +3431,33 @@ function Toaster() {
 
 // src/components/databrowser/hooks/use-fetch-search-indexes.tsx
 
+
+// src/lib/scan-keys.ts
+async function scanKeys(redis, {
+  match,
+  type,
+  count: count2 = 100,
+  limit
+} = {}) {
+  let cursor = "0";
+  const result = [];
+  while (true) {
+    const [newCursor, keys] = await redis.scan(cursor, {
+      count: count2,
+      type,
+      match
+    });
+    result.push(...keys);
+    if (limit && result.length >= limit) {
+      return result.slice(0, limit);
+    }
+    if (newCursor === "0") break;
+    cursor = newCursor;
+  }
+  return result;
+}
+
+// src/components/databrowser/hooks/use-fetch-search-indexes.tsx
 var FETCH_SEARCH_INDEXES_QUERY_KEY = "fetch-search-indexes";
 var useFetchSearchIndexes = ({
   match,
@@ -3376,21 +3467,7 @@ var useFetchSearchIndexes = ({
   return _reactquery.useQuery.call(void 0, {
     queryKey: [FETCH_SEARCH_INDEXES_QUERY_KEY],
     enabled: _nullishCoalesce(enabled, () => ( true)),
-    queryFn: async () => {
-      let cursor = "0";
-      const finalResult = [];
-      while (true) {
-        const [newCursor, results] = await redis.scan(cursor, {
-          count: 100,
-          type: "search",
-          match
-        });
-        finalResult.push(...results);
-        if (newCursor === "0") break;
-        cursor = newCursor;
-      }
-      return finalResult;
-    }
+    queryFn: () => scanKeys(redis, { match, type: "search" })
   });
 };
 
@@ -3677,6 +3754,7 @@ Label.displayName = LabelPrimitive.Root.displayName;
 // src/components/ui/select.tsx
 
 var _reactselect = require('@radix-ui/react-select'); var SelectPrimitive = _interopRequireWildcard(_reactselect);
+var _reactdom = require('react-dom'); var ReactDOM = _interopRequireWildcard(_reactdom);
 
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
@@ -3732,7 +3810,7 @@ var SelectContent = React6.forwardRef(({ className, children, position = "popper
       SelectPrimitive.Viewport,
       {
         className: cn(
-          "p-1",
+          "max-h-[min(var(--radix-select-content-available-height),20rem)] overflow-y-auto p-1",
           position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
         ),
         children
@@ -3750,40 +3828,76 @@ var SelectLabel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-  SelectPrimitive.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-zinc-100 focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+var SelectItemTooltip = ({
+  description,
+  itemRef
+}) => {
+  const [pos, setPos] = React6.useState();
+  React6.useEffect(() => {
+    const el = itemRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    setPos({ top: rect.top + rect.height / 2, left: rect.right + 8 });
+  }, [itemRef]);
+  if (!pos) return;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: "pointer-events-none fixed z-[100] -translate-y-1/2 whitespace-nowrap rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 shadow-md animate-in fade-in-0",
+        style: { top: pos.top, left: pos.left },
+        children: description
+      }
     ),
-    ...props,
-    children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "svg",
-        {
-          width: "15",
-          height: "15",
-          viewBox: "0 0 15 15",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          className: "h-4 w-4",
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "path",
-            {
-              d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
-              fill: "currentColor",
-              fillRule: "evenodd",
-              clipRule: "evenodd"
-            }
-          )
-        }
-      ) }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.ItemText, { children })
-    ]
-  }
-));
+    _nullishCoalesce(portalRoot, () => ( document.body))
+  );
+};
+var SelectItem = React6.forwardRef(({ className, children, description, ...props }, ref) => {
+  const [isHovered, setIsHovered] = React6.useState(false);
+  const itemRef = React6.useRef(null);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    SelectPrimitive.Item,
+    {
+      ref: (node) => {
+        ;
+        itemRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: cn(
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-zinc-100 focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "svg",
+          {
+            width: "15",
+            height: "15",
+            viewBox: "0 0 15 15",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            className: "h-4 w-4",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "path",
+              {
+                d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
+                fill: "currentColor",
+                fillRule: "evenodd",
+                clipRule: "evenodd"
+              }
+            )
+          }
+        ) }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.ItemText, { children }),
+        description && isHovered && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItemTooltip, { description, itemRef })
+      ]
+    }
+  );
+});
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 var SelectSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
   SelectPrimitive.Separator,
@@ -4466,7 +4580,6 @@ function transformArray(inputArray) {
 var FETCH_SIMPLE_KEY_QUERY_KEY = "fetch-simple-key";
 var useFetchSimpleKey = (dataKey, type) => {
   const { redisNoPipeline: redis } = useRedis();
-  const { deleteKeyCache } = useDeleteKeyCache();
   return _reactquery.useQuery.call(void 0, {
     queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY, dataKey],
     queryFn: async () => {
@@ -4476,7 +4589,6 @@ var useFetchSimpleKey = (dataKey, type) => {
       else throw new Error(`Invalid type when fetching simple key: ${type}`);
       if (type === "json" && result !== null)
         result = JSON.stringify(sortObject(JSON.parse(result)));
-      if (result === null) deleteKeyCache(dataKey);
       return result;
     }
   });
@@ -4492,10 +4604,9 @@ var sortObject = (obj) => {
 
 // src/components/databrowser/hooks/use-delete-key-cache.ts
 var useDeleteKeyCache = () => {
-  const { setSelectedKey } = useTab();
+  const { isValuesSearchSelected, valuesSearch } = useTab();
   const deleteKeyCache = _react.useCallback.call(void 0, 
     (key) => {
-      setSelectedKey(void 0);
       queryClient.invalidateQueries({
         queryKey: [FETCH_KEYS_QUERY_KEY]
       });
@@ -4508,22 +4619,36 @@ var useDeleteKeyCache = () => {
       queryClient.invalidateQueries({
         queryKey: [FETCH_KEY_TYPE_QUERY_KEY, key]
       });
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_SEARCH_INDEX_QUERY_KEY, key]
+      });
+      if (isValuesSearchSelected && valuesSearch.index) {
+        queryClient.invalidateQueries({
+          queryKey: [FETCH_SEARCH_INDEX_QUERY_KEY, valuesSearch.index]
+        });
+      }
     },
-    [setSelectedKey]
+    [isValuesSearchSelected, valuesSearch.index]
   );
   return { deleteKeyCache };
 };
 
 // src/components/databrowser/hooks/use-delete-key.ts
 var useDeleteKey = () => {
-  const { redis } = useRedis();
+  const { redis, redisNoPipeline } = useRedis();
   const { deleteKeyCache } = useDeleteKeyCache();
+  const { isValuesSearchSelected, valuesSearch } = useTab();
   const deleteKey = _reactquery.useMutation.call(void 0, {
-    mutationFn: async (key) => {
-      return Boolean(await redis.del(key));
+    mutationFn: async ({ keys, reindex }) => {
+      await Promise.all(keys.map((key) => redis.del(key)));
+      if (reindex && isValuesSearchSelected && valuesSearch.index) {
+        await redisNoPipeline.search.index({ name: valuesSearch.index }).waitIndexing();
+      }
     },
-    onSuccess: (_, key) => {
-      deleteKeyCache(key);
+    onSuccess: (_, { keys }) => {
+      for (const key of keys) {
+        deleteKeyCache(key);
+      }
     }
   });
   return deleteKey;
@@ -5045,80 +5170,134 @@ var DropdownMenuShortcut = ({ className, ...props }) => {
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
-// src/components/ui/alert-dialog.tsx
+// src/components/databrowser/components/delete-key-modal.tsx
+
+
+// src/components/ui/dialog.tsx
 
-var _reactalertdialog = require('@radix-ui/react-alert-dialog'); var AlertDialogPrimitive = _interopRequireWildcard(_reactalertdialog);
+var _reactdialog = require('@radix-ui/react-dialog'); var DialogPrimitive = _interopRequireWildcard(_reactdialog);
 
-var AlertDialog = AlertDialogPrimitive.Root;
-var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-var AlertDialogPortal = ({ ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogPrimitive.Portal, { container: portalRoot, ...props });
-AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
-var AlertDialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  AlertDialogPrimitive.Overlay,
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogPrimitive.Portal, { container: portalRoot, ...props });
+DialogPortal.displayName = DialogPrimitive.Portal.displayName;
+var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  DialogPrimitive.Overlay,
   {
+    ref,
     className: cn(
-      "fixed inset-0 z-50 bg-white/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
       className
     ),
-    ...props,
-    ref
+    ...props
   }
 ));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogPortal, { children: [
-  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogOverlay, {}),
-  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    AlertDialogPrimitive.Content,
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogPortal, { children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogOverlay, {}),
+  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    DialogPrimitive.Content,
     {
       ref,
       className: cn(
-        "antialiased data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0  data-[state=open]:slide-in-from-top-[48%]sm:rounded-lg fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 md:w-full",
+        "antialiased",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out ",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ",
+        "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+        "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg ",
+        "translate-x-[-50%] translate-y-[-50%] gap-4",
+        "bg-white p-8 shadow-lg duration-200 ",
+        "rounded-2xl md:w-full",
         className
       ),
-      ...props
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogPrimitive.Close, { className: "absolute right-4 top-4 text-zinc-400 transition-colors hover:text-zinc-600 focus:outline-none disabled:pointer-events-none", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "svg",
+            {
+              width: "20",
+              height: "20",
+              viewBox: "0 0 15 15",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              className: "size-5",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "path",
+                {
+                  d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
+                  fill: "currentColor",
+                  fillRule: "evenodd",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
     }
   )
 ] }));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-var AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
-AlertDialogHeader.displayName = "AlertDialogHeader";
-var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
     ...props
   }
 );
-AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  AlertDialogPrimitive.Title,
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  DialogPrimitive.Title,
   {
     ref,
-    className: cn("text-lg font-semibold", className),
+    className: cn("text-base font-semibold text-zinc-950", className),
     ...props
   }
 ));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  AlertDialogPrimitive.Description,
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  DialogPrimitive.Description,
   {
     ref,
     className: cn("text-sm text-zinc-500", className),
     ...props
   }
 ));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  AlertDialogPrimitive.Cancel,
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+// src/components/ui/switch.tsx
+
+var _reactswitch = require('@radix-ui/react-switch'); var SwitchPrimitives = _interopRequireWildcard(_reactswitch);
+
+var Switch = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  SwitchPrimitives.Root,
   {
+    className: cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200 dark:focus-visible:ring-neutral-300 dark:focus-visible:ring-offset-neutral-950 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=unchecked]:bg-neutral-800",
+      className
+    ),
+    ...props,
     ref,
-    className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:!mt-0", className),
-    ...props
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:bg-neutral-950"
+        )
+      }
+    )
   }
 ));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/databrowser/components/delete-key-modal.tsx
 
@@ -5128,17 +5307,20 @@ function DeleteKeyModal({
   open,
   onOpenChange,
   deletionType,
-  count: count2 = 1
+  count: count2 = 1,
+  showReindex
 }) {
   const isPlural = count2 > 1;
   const itemLabel = deletionType === "item" ? "Item" : "Key";
   const itemsLabel = deletionType === "item" ? "Items" : "Keys";
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialog, { open, onOpenChange, children: [
-    children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogTrigger, { asChild: true, children }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogContent, { children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogHeader, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogTitle, { children: isPlural ? `Delete ${count2} ${itemsLabel}` : `Delete ${itemLabel}` }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogDescription, { className: "mt-5", children: [
+  const [reindex, setReindex] = _react.useState.call(void 0, true);
+  const [isPending, setIsPending] = _react.useState.call(void 0, false);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Dialog, { open, onOpenChange, children: [
+    children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTrigger, { asChild: true, children }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogContent, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogHeader, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTitle, { children: isPlural ? `Delete ${count2} ${itemsLabel}` : `Delete ${itemLabel}` }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogDescription, { className: "mt-5", children: [
           "Are you sure you want to delete",
           " ",
           isPlural ? `these ${count2} ${deletionType}s` : `this ${deletionType}`,
@@ -5147,14 +5329,44 @@ function DeleteKeyModal({
           "This action cannot be undone."
         ] })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogFooter, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogCancel, { type: "button", children: "Cancel" }),
+      showReindex && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Switch,
+          {
+            id: "reindex",
+            checked: reindex,
+            onCheckedChange: setReindex,
+            disabled: isPending
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Label, { htmlFor: "reindex", className: "cursor-pointer text-sm text-zinc-700", children: "Reindex after deletion" })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogFooter, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            disabled: isPending,
+            onClick: () => _optionalChain([onOpenChange, 'optionalCall', _38 => _38(false)]),
+            children: "Cancel"
+          }
+        ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          AlertDialogAction,
+          Button,
           {
+            variant: "primary",
             className: "bg-red-500 text-zinc-50 hover:bg-red-600",
-            onClick: onDeleteConfirm,
-            children: "Yes, Delete"
+            disabled: isPending,
+            onClick: async (e) => {
+              setIsPending(true);
+              try {
+                await onDeleteConfirm(e, { reindex });
+              } finally {
+                setIsPending(false);
+              }
+            },
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoading: isPending, isLoadingText: "Deleting", children: "Yes, Delete" })
           }
         )
       ] })
@@ -5164,8 +5376,13 @@ function DeleteKeyModal({
 
 // src/components/databrowser/components/display/key-actions.tsx
 
-function KeyActions({ dataKey, content }) {
+function KeyActions({
+  dataKey,
+  content,
+  type
+}) {
   const { mutateAsync: deleteKey } = useDeleteKey();
+  const { isValuesSearchSelected } = useTab();
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DropdownMenu, { modal: false, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "icon-sm", "aria-label": "Key actions", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       _iconsreact.IconDotsVertical,
@@ -5196,14 +5413,24 @@ function KeyActions({ dataKey, content }) {
           children: "Copy key"
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DeleteKeyModal, { deletionType: "key", onDeleteConfirm: async () => await deleteKey(dataKey), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        DropdownMenuItem,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        DeleteKeyModal,
         {
-          className: "text-red-500 focus:bg-red-500 focus:text-white",
-          onSelect: (e) => e.preventDefault(),
-          children: "Delete key"
+          deletionType: "key",
+          showReindex: isValuesSearchSelected && type !== "search",
+          onDeleteConfirm: async (_e, options) => {
+            await deleteKey({ keys: [dataKey], reindex: _optionalChain([options, 'optionalAccess', _39 => _39.reindex]) });
+          },
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            DropdownMenuItem,
+            {
+              className: "text-red-500 focus:bg-red-500 focus:text-white",
+              onSelect: (e) => e.preventDefault(),
+              children: "Delete key"
+            }
+          )
         }
-      ) })
+      )
     ] })
   ] });
 }
@@ -5225,10 +5452,10 @@ var DisplayHeader = ({
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "grow truncate text-sm", children: dataKey.trim() === "" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ml-1 text-zinc-500", children: "(Empty Key)" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium text-zinc-950", children: dataKey }) }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1", children: [
         type !== "string" && type !== "json" && type !== "search" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Add item", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { onClick: handleAddItem, size: "icon-sm", "aria-label": "Add item", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "size-4 text-zinc-500 dark:text-zinc-600" }) }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyActions, { dataKey, content })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyActions, { dataKey, content, type })
       ] })
     ] }),
-    type === "search" && hideTypeTag ? void 0 : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center gap-1.5 overflow-scroll", children: [
+    type === "search" && hideTypeTag ? void 0 : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center gap-1.5 overflow-x-scroll", children: [
       !hideTypeTag && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: type, type: "badge" }),
       type !== "search" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SizeBadge, { dataKey }),
       type !== "search" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LengthBadge, { dataKey, type, content }),
@@ -5237,116 +5464,43 @@ var DisplayHeader = ({
   ] });
 };
 
+// src/components/databrowser/components/display/key-deleted.tsx
+
+var KeyDeleted = () => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center rounded-md border border-dashed border-zinc-300", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-zinc-500", children: "This key has been deleted" }) });
+};
+
+// src/components/databrowser/components/docs-link.tsx
+
+
+var DocsLink = ({ href, className }) => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: cn(
+        "inline-flex items-center gap-1 px-1 text-xs text-zinc-400 transition-colors hover:text-zinc-600",
+        className
+      ),
+      children: [
+        "Docs",
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconExternalLink, { size: 12 })
+      ]
+    }
+  );
+};
+
 // src/components/databrowser/components/search/save-schema-modal.tsx
 
 
-// src/components/ui/dialog.tsx
+// src/components/ui/progress.tsx
 
-var _reactdialog = require('@radix-ui/react-dialog'); var DialogPrimitive = _interopRequireWildcard(_reactdialog);
+var _reactprogress = require('@radix-ui/react-progress'); var ProgressPrimitive = _interopRequireWildcard(_reactprogress);
 
-var Dialog = DialogPrimitive.Root;
-var DialogTrigger = DialogPrimitive.Trigger;
-var DialogPortal = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogPrimitive.Portal, { container: portalRoot, ...props });
-DialogPortal.displayName = DialogPrimitive.Portal.displayName;
-var DialogOverlay = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  DialogPrimitive.Overlay,
-  {
-    ref,
-    className: cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out",
-      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
-      className
-    ),
-    ...props
-  }
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogPortal, { children: [
-  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogOverlay, {}),
-  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    DialogPrimitive.Content,
-    {
-      ref,
-      className: cn(
-        "antialiased",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out ",
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ",
-        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ",
-        "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
-        "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg ",
-        "translate-x-[-50%] translate-y-[-50%] gap-4",
-        "bg-white p-6 shadow-lg duration-200 ",
-        "sm:rounded-lg md:w-full",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "svg",
-            {
-              width: "15",
-              height: "15",
-              viewBox: "0 0 15 15",
-              fill: "none",
-              xmlns: "http://www.w3.org/2000/svg",
-              className: "h-4 w-4",
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                "path",
-                {
-                  d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
-                  fill: "currentColor",
-                  fillRule: "evenodd",
-                  clipRule: "evenodd"
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
-    }
-  )
-] }));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
-DialogHeader.displayName = "DialogHeader";
-var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  "div",
-  {
-    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
-    ...props
-  }
-);
-DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  DialogPrimitive.Title,
-  {
-    ref,
-    className: cn("text-lg font-semibold leading-none tracking-tight", className),
-    ...props
-  }
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  DialogPrimitive.Description,
-  {
-    ref,
-    className: cn("text-sm text-zinc-500", className),
-    ...props
-  }
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-// src/components/ui/progress.tsx
-
-var _reactprogress = require('@radix-ui/react-progress'); var ProgressPrimitive = _interopRequireWildcard(_reactprogress);
-
-var Progress = React12.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  ProgressPrimitive.Root,
+var Progress = React12.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  ProgressPrimitive.Root,
   {
     ref,
     className: cn(
@@ -5491,16 +5645,18 @@ var MonacoEditorWithTypes = ({
   const monaco = _react2.useMonaco.call(void 0, );
   const editorRef = _react.useRef.call(void 0, null);
   const extraLibRef = _react.useRef.call(void 0, null);
+  const valueRef = _react.useRef.call(void 0, value);
+  valueRef.current = value;
   const theme = useTheme();
   _react.useEffect.call(void 0, () => {
     if (!monaco) return;
-    _optionalChain([extraLibRef, 'access', _38 => _38.current, 'optionalAccess', _39 => _39.dispose, 'call', _40 => _40()]);
+    _optionalChain([extraLibRef, 'access', _40 => _40.current, 'optionalAccess', _41 => _41.dispose, 'call', _42 => _42()]);
     extraLibRef.current = monaco.languages.typescript.typescriptDefaults.addExtraLib(
       typeDefinitions,
       `file:///${filePath.replace(".ts", "-types.d.ts")}`
     );
     requestAnimationFrame(() => {
-      const model = _optionalChain([editorRef, 'access', _41 => _41.current, 'optionalAccess', _42 => _42.getModel, 'optionalCall', _43 => _43()]);
+      const model = _optionalChain([editorRef, 'access', _43 => _43.current, 'optionalAccess', _44 => _44.getModel, 'optionalCall', _45 => _45()]);
       if (model) {
         const currentValue = model.getValue();
         model.setValue(currentValue);
@@ -5509,10 +5665,10 @@ var MonacoEditorWithTypes = ({
   }, [monaco, typeDefinitions, filePath]);
   _react.useEffect.call(void 0, () => {
     return () => {
-      _optionalChain([extraLibRef, 'access', _44 => _44.current, 'optionalAccess', _45 => _45.dispose, 'call', _46 => _46()]);
+      _optionalChain([extraLibRef, 'access', _46 => _46.current, 'optionalAccess', _47 => _47.dispose, 'call', _48 => _48()]);
       if (monaco) {
         const model = monaco.editor.getModel(monaco.Uri.parse(filePath));
-        _optionalChain([model, 'optionalAccess', _47 => _47.dispose, 'call', _48 => _48()]);
+        _optionalChain([model, 'optionalAccess', _49 => _49.dispose, 'call', _50 => _50()]);
       }
     };
   }, [monaco, filePath]);
@@ -5522,12 +5678,12 @@ var MonacoEditorWithTypes = ({
     } else if (newValue.trim() === "") {
       onChange(defaultValue);
     } else {
-      _optionalChain([editorRef, 'access', _49 => _49.current, 'optionalAccess', _50 => _50.setValue, 'optionalCall', _51 => _51(value)]);
+      _optionalChain([editorRef, 'access', _51 => _51.current, 'optionalAccess', _52 => _52.setValue, 'optionalCall', _53 => _53(valueRef.current)]);
     }
   };
   _react.useEffect.call(void 0, () => {
     if (!validateValue(value)) onChange(defaultValue);
-  }, [value, editorRef.current, onChange, validateValue, defaultValue]);
+  }, [value, onChange, validateValue, defaultValue]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
     {
@@ -5804,7 +5960,7 @@ type Schema = NestedIndexSchema | FlatIndexSchema;
 
 var SCHEMA_PREFIX = "const schema: Schema = s.object({";
 var SCHEMA_SUFFIX = "})";
-var SCHEMA_DEFAULT = "const schema: Schema = s.object({\n  \n})";
+var SCHEMA_DEFAULT = "const schema: Schema = s.object({\n  name: s.string(),\n})";
 var isSchemaStringValid = (value) => {
   return value.startsWith(SCHEMA_PREFIX) && value.endsWith(SCHEMA_SUFFIX);
 };
@@ -5863,7 +6019,7 @@ var SearchDisplay = ({
       indexName: _nullishCoalesce(indexName, () => ( "")),
       editorValue: data.schema ? schemaToEditorValue(data.schema) : SCHEMA_DEFAULT,
       dataType: data.dataType || "string",
-      prefixes: _optionalChain([data, 'access', _52 => _52.prefixes, 'optionalAccess', _53 => _53.join, 'call', _54 => _54(", ")]) || "",
+      prefixes: _optionalChain([data, 'access', _54 => _54.prefixes, 'optionalAccess', _55 => _55.join, 'call', _56 => _56(", ")]) || "",
       language: data.language || "english"
     });
   }, [data, reset, indexName]);
@@ -5889,9 +6045,12 @@ var SearchDisplay = ({
     createSchema.reset();
     reset();
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full w-full min-w-0 flex-col gap-2", children: [
+  if (!isCreateModal && !isLoading && (data === null || data === void 0)) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyDeleted, {});
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full min-h-0 w-full min-w-0 flex-col gap-2", children: [
     !isCreateModal && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayHeader, { dataKey: effectiveIndexName, type: "search", hideTypeTag: isEditModal }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full min-w-0 grow flex-col gap-2 rounded-md", children: !isCreateModal && isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoadingText: "", isLoading: true }) : !isCreateModal && (data === null || data === void 0) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-zinc-500", children: "No data found" }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full w-full flex-col gap-3", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex min-h-0 min-w-0 grow flex-col gap-2 rounded-md", children: !isCreateModal && isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoadingText: "", isLoading: true }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-h-0 w-full flex-1 flex-col gap-3", children: [
       isCreateModal && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-1.5", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Label, { htmlFor: "index-name", children: "Key" }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5904,9 +6063,9 @@ var SearchDisplay = ({
         ),
         errors.indexName && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-xs text-red-500", children: errors.indexName.message })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-md border border-zinc-300 bg-white p-3", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "shrink-0 rounded-md border border-zinc-300 bg-white p-3", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-between", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-sm font-medium text-zinc-700", children: "Config" }) }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-2 grid grid-cols-4 gap-4 text-sm", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-2 grid grid-cols-2 gap-4 text-sm lg:grid-cols-4", children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "mb-1.5 block text-xs font-medium text-zinc-500", children: "Data Type" }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5930,7 +6089,7 @@ var SearchDisplay = ({
                 control,
                 render: ({ field }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select, { value: field.value, onValueChange: field.onChange, children: [
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTrigger, { className: "h-8", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, { placeholder: "Select language" }) }),
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContent, { children: LANGUAGES.map((lang) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: lang, children: lang }, lang)) })
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContent, { children: LANGUAGES.map((lang) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: lang, children: lang.charAt(0).toUpperCase() + lang.slice(1) }, lang)) })
                 ] })
               }
             )
@@ -5949,7 +6108,7 @@ var SearchDisplay = ({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-h-0 flex-1 flex-col rounded-md border border-zinc-300 bg-white", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative flex min-h-0 flex-1 flex-col rounded-md border border-zinc-300 bg-white", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-between border-b border-zinc-200 px-3 py-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-sm font-medium text-zinc-700", children: "Schema" }) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full px-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _reacthookform.Controller,
@@ -5965,7 +6124,14 @@ var SearchDisplay = ({
               }
             )
           }
-        ) }) })
+        ) }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          DocsLink,
+          {
+            className: "absolute bottom-2 right-2 text-sm",
+            href: "https://upstash-search.mintlify.app/redis/search/schema-definition"
+          }
+        )
       ] }),
       isCreateModal && createSchema.error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-full break-words text-xs text-red-500", children: createSchema.error.message.startsWith("ERR syntax error") ? "Invalid schema" : formatUpstashErrorMessage(createSchema.error) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex shrink-0 items-center gap-2", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ml-auto flex gap-2", children: [
@@ -6277,7 +6443,7 @@ var ItemContextMenu = ({
             editItem({
               type,
               dataKey,
-              itemKey: _optionalChain([data, 'optionalAccess', _55 => _55.key]),
+              itemKey: _optionalChain([data, 'optionalAccess', _57 => _57.key]),
               // For deletion
               newKey: void 0
             });
@@ -6312,7 +6478,7 @@ var ItemContextMenu = ({
           {
             onClick: () => {
               if (!data) return;
-              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _56 => _56.key]));
+              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _58 => _58.key]));
               toast({
                 description: "Key copied to clipboard"
               });
@@ -6324,11 +6490,11 @@ var ItemContextMenu = ({
             ]
           }
         ),
-        _optionalChain([data, 'optionalAccess', _57 => _57.value]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _optionalChain([data, 'optionalAccess', _59 => _59.value]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           ContextMenuItem,
           {
             onClick: () => {
-              navigator.clipboard.writeText(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _58 => _58.value]), () => ( "")));
+              navigator.clipboard.writeText(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _60 => _60.value]), () => ( "")));
               toast({
                 description: "Value copied to clipboard"
               });
@@ -6440,7 +6606,7 @@ var useSetHashTTL = () => {
 var HashFieldTTLBadge = ({ dataKey, field }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields: [field] });
   const { mutate: setTTL, isPending } = useSetHashTTL();
-  const expireAt = _optionalChain([data, 'optionalAccess', _59 => _59[field]]);
+  const expireAt = _optionalChain([data, 'optionalAccess', _61 => _61[field]]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     TTLBadge,
     {
@@ -6537,7 +6703,7 @@ var MonacoEditor = ({
     if (!active || !monaco || !editorRef.current) {
       return;
     }
-    _optionalChain([monaco, 'optionalAccess', _60 => _60.editor, 'access', _61 => _61.setModelLanguage, 'call', _62 => _62(editorRef.current.getModel(), language)]);
+    _optionalChain([monaco, 'optionalAccess', _62 => _62.editor, 'access', _63 => _63.setModelLanguage, 'call', _64 => _64(editorRef.current.getModel(), language)]);
   }, [monaco, language, active]);
   const editor = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _react2.Editor,
@@ -6662,6 +6828,13 @@ var useField = ({
       }
     }
   };
+  _react.useLayoutEffect.call(void 0, () => {
+    if (!fieldState.isDirty && contentType === "JSON" && checkIsValidJSON(data)) {
+      form.setValue(name, formatJSON(data), {
+        shouldDirty: false
+      });
+    }
+  }, [data, fieldState.isDirty]);
   return {
     selector: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContentTypeSelect, { value: contentType, onChange: handleTypeChange, data: field.value }),
     editor: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -6694,7 +6867,7 @@ var ListEditDisplay = ({
   type,
   item
 }) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "grow rounded-md", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListEditForm, { item, type, dataKey }, item.key) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-h-0 grow rounded-md", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListEditForm, { item, type, dataKey }, item.key) });
 };
 var ListEditForm = ({
   type,
@@ -6706,7 +6879,7 @@ var ListEditForm = ({
     dataKey
   });
   const findValue = () => {
-    for (const page of _nullishCoalesce(_optionalChain([query, 'access', _63 => _63.data, 'optionalAccess', _64 => _64.pages]), () => ( []))) {
+    for (const page of _nullishCoalesce(_optionalChain([query, 'access', _65 => _65.data, 'optionalAccess', _66 => _66.pages]), () => ( []))) {
       const item = page.keys.find((item2) => item2.key === itemKey);
       if (item && "value" in item) return item.value;
     }
@@ -6733,8 +6906,8 @@ var ListEditForm = ({
     });
     setSelectedListItem(void 0);
   });
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacthookform.FormProvider, { ...form, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { onSubmit, className: "flex h-full flex-col gap-2", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex grow flex-col gap-2", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacthookform.FormProvider, { ...form, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { onSubmit, className: "flex h-full min-h-0 flex-col gap-2", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-h-0 grow flex-col gap-2", children: [
       type === "zset" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NumberFormItem, { name: "value", label: valueLabel }),
       type !== "list" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormItem, { readOnly: type === "stream", name: "key", label: keyLabel, data: itemKey }),
       type !== "set" && type !== "zset" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -6823,7 +6996,7 @@ var FormItem = ({
     readOnly,
     data
   });
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("flex flex-col gap-1", !height && "h-full"), children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("flex flex-col gap-1", !height && "h-full min-h-0"), children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 text-xs", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium text-zinc-700", children: label }),
       " ",
@@ -6835,7 +7008,7 @@ var FormItem = ({
       {
         className: cn(
           "overflow-hidden rounded-md border border-zinc-300 bg-white p-2 shadow-sm",
-          !height && "h-full"
+          !height && "h-full min-h-0"
         ),
         children: editor
       }
@@ -6852,7 +7025,7 @@ var HashFieldTTLInfo = ({
   fields
 }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields });
-  const expireAt = _optionalChain([data, 'optionalAccess', _65 => _65[field]]);
+  const expireAt = _optionalChain([data, 'optionalAccess', _67 => _67[field]]);
   const [ttl, setTTL] = _react.useState.call(void 0, () => calculateTTL(expireAt));
   _react.useEffect.call(void 0, () => {
     setTTL(calculateTTL(expireAt));
@@ -6877,7 +7050,11 @@ var headerLabels = {
 var ListDisplay = ({ dataKey, type }) => {
   const { selectedListItem } = useTab();
   const query = useFetchListItems({ dataKey, type });
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2", children: [
+  const isEmpty = query.isFetched && _optionalChain([query, 'access', _68 => _68.data, 'optionalAccess', _69 => _69.pages, 'access', _70 => _70.every, 'call', _71 => _71((page) => page.keys.length === 0)]);
+  if (isEmpty) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyDeleted, {});
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full min-h-0 flex-col gap-2 overflow-hidden", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayHeader, { dataKey, type }),
     selectedListItem && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListEditDisplay, { dataKey, type, item: selectedListItem }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("min-h-0 grow", selectedListItem && "hidden"), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfiniteScroll, { query, className: "rounded-lg border border-zinc-200 bg-white", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "table", { className: "w-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ItemContextMenu, { dataKey, type, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListItems, { dataKey, type, query }) }) }) }) }) })
@@ -6889,7 +7066,7 @@ var ListItems = ({
   dataKey
 }) => {
   const { setSelectedListItem } = useTab();
-  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _66 => _66.data, 'optionalAccess', _67 => _67.pages, 'access', _68 => _68.flatMap, 'call', _69 => _69((page) => page.keys)]), () => ( [])), [query.data]);
+  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _72 => _72.data, 'optionalAccess', _73 => _73.pages, 'access', _74 => _74.flatMap, 'call', _75 => _75((page) => page.keys)]), () => ( [])), [query.data]);
   const fields = _react.useMemo.call(void 0, () => keys.map((key) => key.key), [keys]);
   const { mutate: editItem } = useEditListItem();
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -6971,9 +7148,12 @@ var ListItems = ({
 
 var EditorDisplay = ({ dataKey, type }) => {
   const { data } = useFetchSimpleKey(dataKey, type);
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full w-full flex-col gap-2", children: [
+  if (data === null) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyDeleted, {});
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full min-h-0 w-full flex-col gap-2 overflow-hidden", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayHeader, { dataKey, type, content: _nullishCoalesce(data, () => ( void 0)) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full grow flex-col gap-2 rounded-md", children: data === void 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoadingText: "", isLoading: true }) : data === null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplayForm, { dataKey, type, data }, dataKey) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex min-h-0 grow flex-col gap-2 rounded-md", children: data === void 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoadingText: "", isLoading: true }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplayForm, { dataKey, type, data }, dataKey) })
   ] });
 };
 var EditorDisplayForm = ({
@@ -6990,12 +7170,12 @@ var EditorDisplayForm = ({
   const { editor, selector } = useField({ name: "value", form, data });
   const { mutateAsync: setKey, isPending: isSettingKey } = useSetSimpleKey(dataKey, type);
   const handleCancel = () => {
-    form.reset({ value: data });
+    form.reset();
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex grow flex-col gap-1", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-h-0 grow flex-col gap-1", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex shrink-0 items-center gap-2", children: type === "json" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : selector }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "grow rounded-md border border-zinc-300 bg-white p-2", children: editor })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-h-0 grow rounded-md border border-zinc-300 bg-white p-2", children: editor })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex shrink-0 items-center gap-2", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ml-auto flex gap-2", children: [
       form.formState.isDirty && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { onClick: handleCancel, children: "Cancel" }),
@@ -7036,33 +7216,6 @@ var DataDisplay = () => {
 
 
 
-// src/components/common/reload-button.tsx
-
-
-
-var ReloadButton = ({
-  onClick,
-  isLoading: isLoadingProp
-}) => {
-  const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
-  const handleClick = () => {
-    setIsLoading(true);
-    onClick();
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 350);
-  };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Refresh", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    Button,
-    {
-      variant: "outline",
-      size: "icon",
-      onClick: handleClick,
-      disabled: isLoading || isLoadingProp,
-      children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLoader2, { className: "size-5 animate-spin text-zinc-500" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconRefresh, { className: "size-5 text-zinc-500 dark:text-zinc-600" })
-    }
-  ) }) });
-};
 
 // src/components/databrowser/components/add-key-modal.tsx
 
@@ -7085,7 +7238,7 @@ function AddKeyModal() {
     setSelectedKey(key);
     setOpen(false);
     setTimeout(() => {
-      _optionalChain([window, 'access', _70 => _70.document, 'access', _71 => _71.querySelector, 'call', _72 => _72(`[data-key="${key}"]`), 'optionalAccess', _73 => _73.scrollIntoView, 'call', _74 => _74({
+      _optionalChain([window, 'access', _76 => _76.document, 'access', _77 => _77.querySelector, 'call', _78 => _78(`[data-key="${key}"]`), 'optionalAccess', _79 => _79.scrollIntoView, 'call', _80 => _80({
         behavior: "smooth",
         block: "start",
         inline: "nearest"
@@ -7106,7 +7259,7 @@ function AddKeyModal() {
           {
             variant: "primary",
             "data-testid": "add-key-button",
-            className: "flex h-8 items-center gap-1 rounded-lg pl-2 pr-3 text-sm font-medium",
+            className: "flex h-8 select-none items-center gap-1 rounded-lg pl-2 pr-3 text-sm font-medium",
             children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "size-5" }),
               "Key"
@@ -7141,7 +7294,7 @@ function AddKeyModal() {
                 }
               )
             ] }),
-            formState.errors.key && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-3 mt-2 text-xs text-red-500", children: _optionalChain([formState, 'access', _75 => _75.errors, 'access', _76 => _76.key, 'optionalAccess', _77 => _77.message]) }),
+            formState.errors.key && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-3 mt-2 text-xs text-red-500", children: _optionalChain([formState, 'access', _81 => _81.errors, 'access', _82 => _82.key, 'optionalAccess', _83 => _83.message]) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-2 text-xs text-zinc-500", children: "After creating the key, you can edit the value" }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-6 flex justify-end gap-2", children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -7164,414 +7317,62 @@ function AddKeyModal() {
   );
 }
 
-// src/components/databrowser/components/search/create-index-modal.tsx
-
-var CreateIndexModal = ({
-  open,
-  onOpenChange
-}) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Dialog, { open, onOpenChange, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogContent, { className: "max-w-2xl", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTitle, { children: "Create new Index" }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "sr-only", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogDescription, { children: "Create new search index" }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchDisplay, { isCreateModal: true, onClose: () => onOpenChange(false) })
-  ] }) });
-};
-
-// src/components/databrowser/components/search/edit-index-modal.tsx
+// src/components/databrowser/components/query-wizard/query-wizard-popover.tsx
 
-var EditIndexModal = ({
-  open,
-  onOpenChange,
-  indexName
-}) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Dialog, { open, onOpenChange, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogContent, { className: "max-w-2xl", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTitle, { children: "Edit Index" }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "sr-only", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogDescription, { children: "Edit search index schema" }) }),
-    indexName && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchDisplay, { indexName, isEditModal: true, onClose: () => onOpenChange(false) })
-  ] }) });
-};
 
-// src/components/databrowser/components/header/search-input.tsx
 
+// src/components/databrowser/components/query-wizard/consent-prompt.tsx
 
 
-var dedupeSearchHistory = (history) => {
-  const seen = /* @__PURE__ */ new Set();
-  return history.filter((item) => {
-    if (!item || seen.has(item)) return false;
-    seen.add(item);
-    return true;
-  });
-};
-var SearchInput = () => {
-  const { setSearchKey, search } = useTab();
-  const { searchHistory, addSearchHistory } = useDatabrowserStore();
-  const [state, setState] = _react.useState.call(void 0, search.key);
-  const [isFocus, setIsFocus] = _react.useState.call(void 0, false);
-  const [focusedIndex, setFocusedIndex] = _react.useState.call(void 0, -1);
-  const inputRef = _react.useRef.call(void 0, null);
-  const historyItemRefs = _react.useRef.call(void 0, []);
-  const handleSubmit = (value) => {
-    if (value.trim() !== "" && !value.includes("*")) value = `${value}*`;
-    addSearchHistory(value);
-    setSearchKey(value);
-    setState(value);
-  };
-  const filteredHistory = dedupeSearchHistory(
-    searchHistory.filter((item) => item.trim() !== "" && item.trim() !== "*").filter((item) => item.includes(state) && item !== state)
-  ).slice(0, 5).map((item) => item.endsWith("*") ? item.slice(0, -1) : item);
-  _react.useEffect.call(void 0, () => {
-    setFocusedIndex(-1);
-  }, [filteredHistory.length]);
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter") {
-      const text = focusedIndex >= 0 && focusedIndex < filteredHistory.length ? filteredHistory[focusedIndex] : e.currentTarget.value;
-      handleSubmit(text);
-    } else if (e.key === "Escape") {
-      setState("");
-      setFocusedIndex(-1);
-      _optionalChain([inputRef, 'access', _78 => _78.current, 'optionalAccess', _79 => _79.blur, 'call', _80 => _80()]);
-    } else if (e.key === "ArrowDown" || e.key === "Tab" && !e.shiftKey) {
-      e.preventDefault();
-      if (focusedIndex < filteredHistory.length - 1) {
-        setFocusedIndex(focusedIndex + 1);
-      } else if (filteredHistory.length > 0) {
-        setFocusedIndex(0);
-      }
-    } else if (e.key === "ArrowUp" || e.key === "Tab" && e.shiftKey) {
-      e.preventDefault();
-      if (focusedIndex > 0) {
-        setFocusedIndex(focusedIndex - 1);
-      } else if (filteredHistory.length > 0 && focusedIndex === 0) {
-        setFocusedIndex(-1);
-        _optionalChain([inputRef, 'access', _81 => _81.current, 'optionalAccess', _82 => _82.focus, 'call', _83 => _83()]);
-      } else if (filteredHistory.length > 0) {
-        setFocusedIndex(filteredHistory.length - 1);
-      }
-    }
+var ConsentPrompt = ({ onClose }) => {
+  const store = useDatabrowserStore();
+  const handleContinue = () => {
+    store.setAiDataSharingConsent(true);
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative grow", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Popover, { open: isFocus && filteredHistory.length > 0, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-8 rounded-md border border-zinc-300 font-normal", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        Input,
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex max-w-[500px] flex-col gap-6 rounded-2xl p-6 shadow-lg", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-base font-semibold text-zinc-950", children: "AI Query Builder" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-center rounded-md bg-purple-100 px-1.5 py-0.5", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm font-medium text-purple-700", children: "BETA" }) })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-3 rounded-xl border border-yellow-300 bg-yellow-50 p-5", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconAlertCircleFilled, { className: "size-5 shrink-0 text-yellow-800" }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm font-semibold text-yellow-800", children: "AI Query Builder requires data sharing" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-sm text-yellow-800", children: [
+          "To generate accurate queries, we'll send your",
+          " ",
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-semibold", children: "index schema" }),
+          " and a",
+          " ",
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-semibold", children: "small sample of your data" }),
+          " to AI models. This may include field names and example values."
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-yellow-800", children: "Only used to generate the query you request." })
+      ] })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-end gap-2", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
         {
-          ref: inputRef,
-          placeholder: "Search",
-          className: "h-full border-none pr-6",
-          onKeyDown: handleKeyDown,
-          onChange: (e) => {
-            setState(e.currentTarget.value);
-            if (e.currentTarget.value.trim() === "") handleSubmit("");
-          },
-          value: state,
-          onFocus: () => {
-            setIsFocus(true);
-            setFocusedIndex(-1);
-          },
-          onBlur: () => setIsFocus(false)
+          onClick: onClose,
+          className: "flex h-8 items-center justify-center rounded-md border border-zinc-300 bg-white px-4 text-sm text-zinc-950 hover:bg-zinc-50",
+          children: "Cancel"
         }
-      ) }) }),
+      ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        PopoverContent,
+        "button",
         {
-          className: "w-[--radix-popover-trigger-width] divide-y px-3 py-2 text-[13px] text-zinc-900",
-          autoFocus: false,
-          onOpenAutoFocus: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          },
-          children: filteredHistory.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-full py-[3px]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "button",
-            {
-              ref: (el) => {
-                historyItemRefs.current[index] = el;
-              },
-              onClick: () => handleSubmit(item),
-              onMouseEnter: () => setFocusedIndex(index),
-              className: `block w-full truncate rounded-sm p-1 text-left transition-colors ${focusedIndex === index ? "bg-zinc-100" : "hover:bg-zinc-100"}`,
-              children: item
-            }
-          ) }, item))
+          onClick: handleContinue,
+          className: "flex h-8 items-center justify-center rounded-md bg-purple-500 px-4 text-sm text-white hover:bg-purple-600",
+          children: "I agree & Continue"
         }
       )
-    ] }),
-    state && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      Button,
-      {
-        type: "button",
-        variant: "link",
-        size: "icon",
-        className: "absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 text-zinc-500 hover:text-zinc-900",
-        onClick: () => {
-          setSearchKey("");
-          setState("");
-        },
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconX, { size: 16 }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Clear" })
-        ]
-      }
-    ),
-    " "
-  ] });
-};
-
-// src/components/databrowser/components/header/type-selector.tsx
-
-var ALL_TYPES_KEY = "all";
-function DataTypeSelector({ allowSearch }) {
-  const { search, setSearchType } = useTab();
-  const entries = [
-    [ALL_TYPES_KEY, "All Types"],
-    ...Object.entries(DATA_TYPE_NAMES).filter(([key]) => allowSearch || key !== "search")
-  ];
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    Select,
-    {
-      onValueChange: (type) => {
-        if (type === ALL_TYPES_KEY) {
-          setSearchType(void 0);
-        } else {
-          setSearchType(type);
-        }
-      },
-      value: search.type === void 0 ? ALL_TYPES_KEY : search.type,
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTrigger, { className: "!w-auto shrink-0 select-none whitespace-nowrap border-zinc-300 pr-8", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, {}) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectGroup, { children: entries.map(([key, value]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: key, children: value }, key)) }) })
-      ]
-    }
-  );
-}
-
-// src/components/databrowser/components/header/index.tsx
-
-var Header = ({ tabType, allowSearch }) => {
-  const { isValuesSearchSelected, setIsValuesSearchSelected } = useTab();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between gap-1.5", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex grow items-center gap-1.5", children: [
-      tabType === "all" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        Segmented,
-        {
-          options: [
-            {
-              key: "keys",
-              label: "Keys"
-            },
-            {
-              key: "values",
-              label: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1", children: [
-                "Search",
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-[18px] items-center rounded-md bg-emerald-100 px-[5px] text-[11px] text-emerald-700", children: "NEW" })
-              ] })
-            }
-          ],
-          value: isValuesSearchSelected ? "values" : "keys",
-          onChange: (value) => {
-            setIsValuesSearchSelected(value === "values");
-          },
-          className: "bg-emerald-800",
-          unselectedClassName: "text-emerald-100",
-          selectedClassName: "bg-emerald-50 text-emerald-800"
-        }
-      ),
-      isValuesSearchSelected ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IndexSelector, {}) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataTypeSelector, { allowSearch }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchInput, {})
-      ] })
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RefreshButton, {}),
-      isValuesSearchSelected ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddIndexButton, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddKeyModal, {})
     ] })
   ] });
 };
-var IndexSelector = () => {
-  const {
-    valuesSearch: { index },
-    setValuesSearchIndex
-  } = useTab();
-  const { data: indexes, isLoading } = useFetchSearchIndexes();
-  const [open, setOpen] = _react.useState.call(void 0, false);
-  _react.useEffect.call(void 0, () => {
-    if (!indexes || isLoading) return;
-    if (index && !indexes.includes(index)) {
-      setValuesSearchIndex("");
-    }
-  }, [indexes, index, isLoading, setValuesSearchIndex]);
-  const [search, setSearch] = _react.useState.call(void 0, "");
-  const [editingIndex, setEditingIndex] = _react.useState.call(void 0, null);
-  const filteredIndexes = _optionalChain([indexes, 'optionalAccess', _84 => _84.filter, 'call', _85 => _85((idx) => idx.toLowerCase().includes(search.toLowerCase()))]);
-  const handleEditIndex = (indexName) => {
-    setOpen(false);
-    setEditingIndex(indexName);
-  };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center rounded-l-lg border border-r-0 border-zinc-300 bg-white px-3 text-sm text-zinc-700", children: "Index" }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      Popover,
-      {
-        open,
-        onOpenChange: (isOpen) => {
-          setOpen(isOpen);
-          if (!isOpen) setSearch("");
-        },
-        modal: false,
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { className: "flex min-w-[140px] items-center justify-between gap-2 rounded-r-lg border border-zinc-300 bg-emerald-50 px-3 py-[5px] text-sm font-medium text-emerald-800 transition-colors hover:bg-emerald-100", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate", children: index || "Select an index" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconChevronDown, { className: "size-4 shrink-0 opacity-50" })
-          ] }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverContent, { className: "p-2", align: "center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CreateIndexButton, {}),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-px bg-zinc-100" }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-9 items-center rounded-md border border-zinc-300 px-2", children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { className: "size-5 text-zinc-400" }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                "input",
-                {
-                  value: search,
-                  onChange: (e) => setSearch(e.target.value),
-                  placeholder: "Search Index",
-                  className: "flex h-full w-full bg-transparent px-2 py-3 text-sm outline-none placeholder:text-zinc-400"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "max-h-[200px] overflow-y-auto", children: [
-              _optionalChain([filteredIndexes, 'optionalAccess', _86 => _86.length]) === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "py-4 text-center text-sm text-zinc-500", children: "No indexes found" }),
-              _optionalChain([filteredIndexes, 'optionalAccess', _87 => _87.map, 'call', _88 => _88((idx) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                "div",
-                {
-                  className: "flex h-9 items-center rounded-md px-2 transition-colors hover:bg-zinc-100",
-                  children: [
-                    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                      "button",
-                      {
-                        onClick: () => {
-                          setValuesSearchIndex(idx);
-                          setOpen(false);
-                        },
-                        className: "flex flex-1 items-center gap-2 text-left text-sm",
-                        children: [
-                          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                            "span",
-                            {
-                              className: cn(
-                                "flex size-5 items-center justify-center",
-                                idx === index ? "text-emerald-600" : "text-transparent"
-                              ),
-                              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCircleCheck, { className: "size-5" })
-                            }
-                          ),
-                          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate", children: idx })
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                      "button",
-                      {
-                        onClick: (event) => {
-                          event.stopPropagation();
-                          event.preventDefault();
-                          handleEditIndex(idx);
-                        },
-                        className: "ml-2 text-sm text-zinc-500 underline hover:text-zinc-700",
-                        children: "Edit"
-                      }
-                    )
-                  ]
-                },
-                idx
-              ))])
-            ] })
-          ] }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      EditIndexModal,
-      {
-        open: Boolean(editingIndex),
-        onOpenChange: (isOpen) => !isOpen && setEditingIndex(null),
-        indexName: editingIndex
-      }
-    )
-  ] });
-};
-var CreateIndexButton = () => {
-  const [open, setOpen] = _react.useState.call(void 0, false);
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      "button",
-      {
-        onClick: (e) => {
-          e.stopPropagation();
-          setOpen(true);
-        },
-        className: "flex h-9 w-full items-center gap-2 rounded-md px-2 text-sm text-emerald-600 transition-colors hover:bg-zinc-50",
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCirclePlus, { className: "size-5" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "underline", children: "Create a new Index" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CreateIndexModal, { open, onOpenChange: setOpen })
-  ] });
-};
-var AddIndexButton = () => {
-  const [open, setOpen] = _react.useState.call(void 0, false);
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Add index", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      Button,
-      {
-        variant: "primary",
-        onClick: () => setOpen(true),
-        className: "flex h-8 items-center gap-1 rounded-lg pl-2 pr-3 text-sm font-medium",
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "size-5" }),
-          "Index"
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CreateIndexModal, { open, onOpenChange: setOpen })
-  ] });
-};
-var RefreshButton = () => {
-  const { query } = useKeys();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    ReloadButton,
-    {
-      onClick: () => {
-        queryClient.invalidateQueries({
-          queryKey: [FETCH_KEYS_QUERY_KEY]
-        });
-        queryClient.invalidateQueries({
-          queryKey: [FETCH_LIST_ITEMS_QUERY_KEY]
-        });
-        queryClient.invalidateQueries({
-          queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY]
-        });
-        queryClient.invalidateQueries({
-          queryKey: [FETCH_KEY_TYPE_QUERY_KEY]
-        });
-      },
-      isLoading: query.isFetching
-    }
-  );
-};
-
-// src/components/databrowser/components/header-error.tsx
-
-var HeaderError = () => {
-  const { query } = useKeys();
-  if (!query.error) return null;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-red-600 dark:text-red-400", children: formatUpstashErrorMessage(query.error) });
-};
-
-// src/components/databrowser/components/query-builder.tsx
 
+// src/components/databrowser/components/query-wizard/use-query-wizard.tsx
 
-// src/components/databrowser/components/search/query-editor.tsx
 
 
 // src/components/databrowser/components/search/search-types-file.ts
@@ -8040,82 +7841,765 @@ type BoolNode<TSchema extends NestedIndexSchema | FlatIndexSchema> = BoolBase<TS
   $and?: never;
   $or?: never;
 };
-
-// Create a type for a query filter
-export type QueryFilter<TSchema extends NestedIndexSchema | FlatIndexSchema> =
-  | QueryLeaf<TSchema>
-  | AndNode<TSchema>
-  | OrNode<TSchema>
-  | MustNode<TSchema>
-  | ShouldNode<TSchema>
-  | MustShouldNode<TSchema>
-  | NotNode<TSchema>
-  | AndNotNode<TSchema>
-  | OrNotNode<TSchema>
-  | ShouldNotNode<TSchema>
-  | MustNotNode<TSchema>
-  | BoolNode<TSchema>;
-
-// Create a type for root-level queries (restricts $or from mixing with fields)
-export type RootQueryFilter<TSchema extends NestedIndexSchema | FlatIndexSchema> =
-  | QueryLeaf<TSchema>
-  | AndNode<TSchema>
-  | RootOrNode<TSchema>
-  | MustNode<TSchema>
-  | ShouldNode<TSchema>
-  | MustShouldNode<TSchema>
-  | AndNotNode<TSchema>
-  | ShouldNotNode<TSchema>
-  | BoolNode<TSchema>;
-
-// Restricted version of OrNode that doesn't allow field operations at root level
-type RootOrNode<TSchema extends NestedIndexSchema | FlatIndexSchema> = {
-  [P in SchemaPaths<TSchema>]?: never; // No field operations at root level with $or
-} & {
-  $or: QueryFilter<TSchema> | QueryFilter<TSchema>[];
-  $boost?: number;
-  $and?: never;
-  $must?: never;
-  $should?: never;
-  $mustNot?: never;
+
+// Create a type for a query filter
+export type QueryFilter<TSchema extends NestedIndexSchema | FlatIndexSchema> =
+  | QueryLeaf<TSchema>
+  | AndNode<TSchema>
+  | OrNode<TSchema>
+  | MustNode<TSchema>
+  | ShouldNode<TSchema>
+  | MustShouldNode<TSchema>
+  | NotNode<TSchema>
+  | AndNotNode<TSchema>
+  | OrNotNode<TSchema>
+  | ShouldNotNode<TSchema>
+  | MustNotNode<TSchema>
+  | BoolNode<TSchema>;
+
+// Create a type for root-level queries (restricts $or from mixing with fields)
+export type RootQueryFilter<TSchema extends NestedIndexSchema | FlatIndexSchema> =
+  | QueryLeaf<TSchema>
+  | AndNode<TSchema>
+  | RootOrNode<TSchema>
+  | MustNode<TSchema>
+  | ShouldNode<TSchema>
+  | MustShouldNode<TSchema>
+  | AndNotNode<TSchema>
+  | ShouldNotNode<TSchema>
+  | BoolNode<TSchema>;
+
+// Restricted version of OrNode that doesn't allow field operations at root level
+type RootOrNode<TSchema extends NestedIndexSchema | FlatIndexSchema> = {
+  [P in SchemaPaths<TSchema>]?: never; // No field operations at root level with $or
+} & {
+  $or: QueryFilter<TSchema> | QueryFilter<TSchema>[];
+  $boost?: number;
+  $and?: never;
+  $must?: never;
+  $should?: never;
+  $mustNot?: never;
+};
+
+export type DescribeFieldInfo = {
+  type: FieldType;
+  noTokenize?: boolean;
+  noStem?: boolean;
+  fast?: boolean;
+};
+
+export type IndexDescription<TSchema extends NestedIndexSchema | FlatIndexSchema> = {
+  name: string;
+  dataType: "hash" | "string" | "json";
+  prefixes: string[];
+  language?: Language;
+  schema: Record<SchemaPaths<TSchema>, DescribeFieldInfo>;
+};
+
+export type Language =
+  | "english"
+  | "arabic"
+  | "danish"
+  | "dutch"
+  | "finnish"
+  | "french"
+  | "german"
+  | "greek"
+  | "hungarian"
+  | "italian"
+  | "norwegian"
+  | "portuguese"
+  | "romanian"
+  | "russian"
+  | "spanish"
+  | "swedish"
+  | "tamil"
+  | "turkish";
+
+`;
+
+// src/components/databrowser/components/query-wizard/use-query-wizard.tsx
+var QueryWizardContext = _react.createContext.call(void 0, void 0);
+var QueryWizardProvider = QueryWizardContext.Provider;
+var useQueryWizardFn = () => {
+  return _react.useContext.call(void 0, QueryWizardContext);
+};
+var useGenerateQuery = () => {
+  const queryWizard = useQueryWizardFn();
+  return _reactquery.useMutation.call(void 0, {
+    mutationFn: async ({
+      prompt,
+      searchIndex,
+      sampleData
+    }) => {
+      if (!queryWizard) {
+        throw new Error(
+          "Query Wizard is not configured. Please provide a useQueryWizard prop to RedisBrowser component."
+        );
+      }
+      const result = await queryWizard({
+        prompt,
+        searchIndex,
+        sampleData,
+        searchTypes: SEARCH_TYPES
+      });
+      return result;
+    }
+  });
+};
+
+// src/components/databrowser/components/query-wizard/query-wizard-popover.tsx
+
+var QueryWizardPopover = ({ onClose }) => {
+  const { valuesSearch, setValuesSearchQuery, setQueryBuilderMode } = useTab();
+  const { redisNoPipeline: redis } = useRedis();
+  const [input, setInput] = _react.useState.call(void 0, "");
+  const [sampleData, setSampleData] = _react.useState.call(void 0, []);
+  const [showIndexFields, setShowIndexFields] = _react.useState.call(void 0, false);
+  const { aiDataSharingConsent } = useDatabrowserStore();
+  const { data: indexData, isLoading: isLoadingIndex } = useFetchSearchIndex(valuesSearch.index);
+  const generateQuery = useGenerateQuery();
+  const handleGenerate = async () => {
+    if (!input.trim() || !valuesSearch.index) return;
+    try {
+      let samples = sampleData;
+      if (samples.length === 0 && _optionalChain([indexData, 'optionalAccess', _84 => _84.prefixes, 'optionalAccess', _85 => _85[0]])) {
+        try {
+          const firstTenKeys = await scanKeys(redis, {
+            match: `${indexData.prefixes[0]}*`,
+            type: indexData.dataType,
+            limit: 10
+          });
+          const dataPromises = firstTenKeys.map(async (key) => {
+            try {
+              if (indexData.dataType === "json") {
+                const data = await redis.json.get(key);
+                return { key, data };
+              } else if (indexData.dataType === "hash") {
+                const data = await redis.hgetall(key);
+                return { key, data };
+              } else {
+                const data = await redis.get(key);
+                return { key, data };
+              }
+            } catch (e5) {
+              return null;
+            }
+          });
+          const results = await Promise.all(dataPromises);
+          samples = results.filter(Boolean);
+          setSampleData(samples);
+        } catch (error) {
+          console.error("Error fetching sample data:", error);
+        }
+      }
+      const result = await generateQuery.mutateAsync({
+        prompt: input,
+        searchIndex: _nullishCoalesce(indexData, () => ( void 0)),
+        sampleData: samples
+      });
+      const queryString = toJsLiteral(result.query);
+      setValuesSearchQuery(queryString);
+      setQueryBuilderMode("code");
+      _optionalChain([onClose, 'optionalCall', _86 => _86()]);
+    } catch (error) {
+      console.error("Error generating query:", error);
+    }
+  };
+  if (isLoadingIndex) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-[100px] w-[340px] items-center justify-center rounded-2xl bg-white", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoading: true, isLoadingText: "Loading index..." }) });
+  }
+  if (!valuesSearch.index) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-[340px] flex-col items-center gap-2 rounded-2xl bg-white p-8", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm font-medium text-zinc-700", children: "No index selected" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-center text-xs text-zinc-500", children: "Create a new index to use the Query Wizard." })
+    ] });
+  }
+  if (aiDataSharingConsent === false) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ConsentPrompt, { onClose });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-[500px] flex-col gap-6 rounded-2xl bg-white p-6", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-base font-semibold text-zinc-950", children: "AI Query Builder" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-center rounded-md bg-purple-100 px-1.5 py-0.5", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium text-purple-700", children: "BETA" }) })
+    ] }),
+    generateQuery.error && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-2 rounded-md border border-yellow-300 bg-yellow-50 p-4", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "!text-sm font-medium !text-yellow-800", children: generateQuery.error.name }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-0.5 !text-sm !text-yellow-800 opacity-90", children: generateQuery.error.message })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-5", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "button",
+        {
+          onClick: () => setShowIndexFields(!showIndexFields),
+          className: "flex h-8 items-center gap-1.5 rounded-md border border-zinc-300 bg-zinc-50 px-3 hover:bg-zinc-100",
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _iconsreact.IconChevronRight,
+              {
+                className: `size-5 text-zinc-700 transition-transform ${showIndexFields ? "rotate-90" : ""}`
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm font-medium text-zinc-700", children: "Show Index fields" })
+          ]
+        }
+      ),
+      showIndexFields && indexData && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rounded-md border border-zinc-200 bg-zinc-50 p-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "pre", { className: "max-h-40 overflow-auto text-xs text-zinc-700", children: JSON.stringify(indexData.schema, null, 2) }) }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Label, { htmlFor: "query-input", className: "text-sm font-medium text-zinc-950", children: "Describe" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "textarea",
+          {
+            id: "query-input",
+            value: input,
+            onChange: (e) => setInput(e.target.value),
+            placeholder: "",
+            className: "h-[58px] w-full resize-none rounded-md border border-zinc-300 bg-white px-3 py-3 text-sm text-zinc-950 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 disabled:cursor-not-allowed disabled:opacity-50",
+            disabled: generateQuery.isPending,
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-0.5 pt-0.5", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-xs text-zinc-500", children: "Example: Find sports cars and trucks, exclude age > 100, boost sports_car" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "a",
+            {
+              href: "https://upstash.com/docs/redis",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-xs text-zinc-500 underline hover:text-zinc-700",
+              children: "View Docs \u2192"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-end gap-2", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          onClick: onClose,
+          disabled: generateQuery.isPending,
+          className: "flex h-8 items-center justify-center rounded-md border border-zinc-300 bg-white px-4 text-sm text-zinc-950 shadow-[0_1px_1px_rgba(0,0,0,0.05)] hover:bg-zinc-50 disabled:cursor-not-allowed disabled:opacity-50",
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          onClick: handleGenerate,
+          disabled: !input.trim() || generateQuery.isPending,
+          className: "flex h-8 items-center justify-center gap-2 rounded-md bg-purple-500 px-4 text-sm text-white shadow-[0_1px_1px_rgba(0,0,0,0.05)] hover:bg-purple-600 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-purple-500",
+          children: generateQuery.isPending ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoading: true }),
+            "Generating..."
+          ] }) : "Generate Query"
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/databrowser/components/search/create-index-modal.tsx
+
+var CreateIndexModal = ({
+  open,
+  onOpenChange
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Dialog, { open, onOpenChange, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    DialogContent,
+    {
+      className: "max-w-2xl",
+      onEscapeKeyDown: (e) => {
+        const active = document.activeElement;
+        if (_optionalChain([active, 'optionalAccess', _87 => _87.closest, 'call', _88 => _88(".monaco-editor")]) || _optionalChain([active, 'optionalAccess', _89 => _89.tagName]) === "TEXTAREA") {
+          e.preventDefault();
+        }
+      },
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTitle, { children: "Create new Index" }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "sr-only", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogDescription, { children: "Create new search index" }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchDisplay, { isCreateModal: true, onClose: () => onOpenChange(false) })
+      ]
+    }
+  ) });
+};
+
+// src/components/databrowser/components/search/edit-index-modal.tsx
+
+
+var EditIndexModal = ({
+  open,
+  onOpenChange,
+  indexName
+}) => {
+  const { data: indexData, isLoading: isIndexLoading } = useFetchSearchIndex(indexName, {
+    enabled: open
+  });
+  _react.useEffect.call(void 0, () => {
+    if (open && !isIndexLoading && indexData === null) {
+      onOpenChange(false);
+    }
+  }, [indexData, onOpenChange, isIndexLoading, open]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Dialog, { open, onOpenChange, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    DialogContent,
+    {
+      className: "min-h-[500px] max-w-2xl",
+      onEscapeKeyDown: (e) => {
+        const active = document.activeElement;
+        if (_optionalChain([active, 'optionalAccess', _90 => _90.closest, 'call', _91 => _91(".monaco-editor")]) || _optionalChain([active, 'optionalAccess', _92 => _92.tagName]) === "TEXTAREA") {
+          e.preventDefault();
+        }
+      },
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTitle, { children: "Edit Index" }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "sr-only", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogDescription, { children: "Edit search index schema" }) }),
+        indexName && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchDisplay, { indexName, isEditModal: true, onClose: () => onOpenChange(false) })
+      ]
+    }
+  ) });
+};
+
+// src/components/databrowser/components/header/refresh-button.tsx
+
+
+// src/components/common/reload-button.tsx
+
+
+
+var ReloadButton = ({
+  onClick,
+  isLoading: isLoadingProp,
+  tooltip = "Refresh"
+}) => {
+  const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
+  const handleClick = () => {
+    setIsLoading(true);
+    onClick();
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 350);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: tooltip, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Button,
+    {
+      variant: "outline",
+      size: "icon",
+      onClick: handleClick,
+      disabled: isLoading || isLoadingProp,
+      children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLoader2, { className: "size-5 animate-spin text-zinc-500" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconRefresh, { className: "size-5 text-zinc-500 dark:text-zinc-600" })
+    }
+  ) }) });
+};
+
+// src/components/databrowser/components/header/refresh-button.tsx
+
+var invalidateAll = () => {
+  queryClient.invalidateQueries({ queryKey: [FETCH_KEYS_QUERY_KEY] });
+  queryClient.invalidateQueries({ queryKey: [FETCH_LIST_ITEMS_QUERY_KEY] });
+  queryClient.invalidateQueries({ queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY] });
+  queryClient.invalidateQueries({ queryKey: [FETCH_KEY_TYPE_QUERY_KEY] });
+};
+var RefreshButton = () => {
+  const { query } = useKeys();
+  const { isValuesSearchSelected, valuesSearch } = useTab();
+  const { redisNoPipeline: redis } = useRedis();
+  const reindex = _reactquery.useMutation.call(void 0, {
+    mutationFn: async () => {
+      if (isValuesSearchSelected && valuesSearch.index) {
+        await redis.search.index({ name: valuesSearch.index }).waitIndexing();
+      }
+    },
+    onSettled: invalidateAll
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    ReloadButton,
+    {
+      onClick: () => reindex.mutate(),
+      isLoading: query.isFetching || reindex.isPending,
+      tooltip: isValuesSearchSelected ? "Reindex & Refresh Query" : "Refresh Scan"
+    }
+  );
+};
+
+// src/components/databrowser/components/header/search-input.tsx
+
+
+
+var dedupeSearchHistory = (history) => {
+  const seen = /* @__PURE__ */ new Set();
+  return history.filter((item) => {
+    if (!item || seen.has(item)) return false;
+    seen.add(item);
+    return true;
+  });
+};
+var SearchInput = () => {
+  const { setSearchKey, search } = useTab();
+  const { searchHistory, addSearchHistory } = useDatabrowserStore();
+  const [state, setState] = _react.useState.call(void 0, search.key);
+  const [isFocus, setIsFocus] = _react.useState.call(void 0, false);
+  const [focusedIndex, setFocusedIndex] = _react.useState.call(void 0, -1);
+  const inputRef = _react.useRef.call(void 0, null);
+  const historyItemRefs = _react.useRef.call(void 0, []);
+  const handleSubmit = (value) => {
+    if (value.trim() !== "" && !value.includes("*")) value = `${value}*`;
+    addSearchHistory(value);
+    setSearchKey(value);
+    setState(value);
+  };
+  const filteredHistory = dedupeSearchHistory(
+    searchHistory.filter((item) => item.trim() !== "" && item.trim() !== "*").filter((item) => item.includes(state) && item !== state)
+  ).slice(0, 5).map((item) => item.endsWith("*") ? item.slice(0, -1) : item);
+  _react.useEffect.call(void 0, () => {
+    setFocusedIndex(-1);
+  }, [filteredHistory.length]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      const text = focusedIndex >= 0 && focusedIndex < filteredHistory.length ? filteredHistory[focusedIndex] : e.currentTarget.value;
+      handleSubmit(text);
+    } else if (e.key === "Escape") {
+      setState("");
+      setFocusedIndex(-1);
+      _optionalChain([inputRef, 'access', _93 => _93.current, 'optionalAccess', _94 => _94.blur, 'call', _95 => _95()]);
+    } else if (e.key === "ArrowDown" || e.key === "Tab" && !e.shiftKey) {
+      e.preventDefault();
+      if (focusedIndex < filteredHistory.length - 1) {
+        setFocusedIndex(focusedIndex + 1);
+      } else if (filteredHistory.length > 0) {
+        setFocusedIndex(0);
+      }
+    } else if (e.key === "ArrowUp" || e.key === "Tab" && e.shiftKey) {
+      e.preventDefault();
+      if (focusedIndex > 0) {
+        setFocusedIndex(focusedIndex - 1);
+      } else if (filteredHistory.length > 0 && focusedIndex === 0) {
+        setFocusedIndex(-1);
+        _optionalChain([inputRef, 'access', _96 => _96.current, 'optionalAccess', _97 => _97.focus, 'call', _98 => _98()]);
+      } else if (filteredHistory.length > 0) {
+        setFocusedIndex(filteredHistory.length - 1);
+      }
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative grow", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Popover, { open: isFocus && filteredHistory.length > 0, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-8 rounded-md border border-zinc-300 font-normal", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        Input,
+        {
+          ref: inputRef,
+          placeholder: "Search",
+          className: "h-full border-none pr-6",
+          onKeyDown: handleKeyDown,
+          onChange: (e) => {
+            setState(e.currentTarget.value);
+            if (e.currentTarget.value.trim() === "") handleSubmit("");
+          },
+          value: state,
+          onFocus: () => {
+            setIsFocus(true);
+            setFocusedIndex(-1);
+          },
+          onBlur: () => setIsFocus(false)
+        }
+      ) }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        PopoverContent,
+        {
+          className: "w-[--radix-popover-trigger-width] divide-y px-3 py-2 text-[13px] text-zinc-900",
+          autoFocus: false,
+          onOpenAutoFocus: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          children: filteredHistory.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-full py-[3px]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              ref: (el) => {
+                historyItemRefs.current[index] = el;
+              },
+              onClick: () => handleSubmit(item),
+              onMouseEnter: () => setFocusedIndex(index),
+              className: `block w-full truncate rounded-sm p-1 text-left transition-colors ${focusedIndex === index ? "bg-zinc-100" : "hover:bg-zinc-100"}`,
+              children: item
+            }
+          ) }, item))
+        }
+      )
+    ] }),
+    state && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      Button,
+      {
+        type: "button",
+        variant: "link",
+        size: "icon",
+        className: "absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 text-zinc-500 hover:text-zinc-900",
+        onClick: () => {
+          setSearchKey("");
+          setState("");
+        },
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconX, { size: 16 }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Clear" })
+        ]
+      }
+    ),
+    " "
+  ] });
+};
+
+// src/components/databrowser/components/header/type-selector.tsx
+
+var ALL_TYPES_KEY = "all";
+function DataTypeSelector({ allowSearch }) {
+  const { search, setSearchType } = useTab();
+  const entries = [
+    [ALL_TYPES_KEY, "All Types"],
+    ...Object.entries(DATA_TYPE_NAMES).filter(([key]) => allowSearch || key !== "search")
+  ];
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    Select,
+    {
+      onValueChange: (type) => {
+        if (type === ALL_TYPES_KEY) {
+          setSearchType(void 0);
+        } else {
+          setSearchType(type);
+        }
+      },
+      value: search.type === void 0 ? ALL_TYPES_KEY : search.type,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTrigger, { className: "!w-auto shrink-0 select-none whitespace-nowrap border-zinc-300 pr-8", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, {}) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectGroup, { children: entries.map(([key, value]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: key, children: value }, key)) }) })
+      ]
+    }
+  );
+}
+
+// src/components/databrowser/components/header/index.tsx
+
+var Header = ({ tabType, allowSearch }) => {
+  const { isValuesSearchSelected, setIsValuesSearchSelected } = useTab();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between gap-1.5", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex grow items-center gap-1.5", children: [
+      tabType === "all" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        Segmented,
+        {
+          options: [
+            {
+              key: "keys",
+              label: "Keys"
+            },
+            {
+              key: "values",
+              label: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1", children: [
+                "Search",
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-[18px] items-center rounded-md bg-emerald-100 px-[5px] text-[11px] text-emerald-700", children: "NEW" })
+              ] })
+            }
+          ],
+          value: isValuesSearchSelected ? "values" : "keys",
+          onChange: (value) => {
+            setIsValuesSearchSelected(value === "values");
+          },
+          className: "bg-emerald-800",
+          unselectedClassName: "text-emerald-100",
+          selectedClassName: "bg-emerald-50 text-emerald-800"
+        }
+      ),
+      isValuesSearchSelected ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IndexSelector, {}) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataTypeSelector, { allowSearch }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchInput, {})
+      ] })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1.5", children: [
+      isValuesSearchSelected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WizardButton, {}),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RefreshButton, {}),
+      isValuesSearchSelected ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddIndexButton, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddKeyModal, {})
+    ] })
+  ] });
+};
+var IndexSelector = () => {
+  const {
+    valuesSearch: { index },
+    setValuesSearchIndex
+  } = useTab();
+  const { data: indexes, isLoading } = useFetchSearchIndexes();
+  const [open, setOpen] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    if (!indexes || isLoading) return;
+    if (index && !indexes.includes(index)) {
+      setValuesSearchIndex("");
+    } else if (!index && indexes.length > 0) {
+      setValuesSearchIndex(indexes[0]);
+    }
+  }, [indexes, index, isLoading, setValuesSearchIndex]);
+  const [search, setSearch] = _react.useState.call(void 0, "");
+  const [editingIndex, setEditingIndex] = _react.useState.call(void 0, );
+  const filteredIndexes = _optionalChain([indexes, 'optionalAccess', _99 => _99.filter, 'call', _100 => _100((idx) => idx.toLowerCase().includes(search.toLowerCase()))]);
+  const handleEditIndex = (indexName) => {
+    setOpen(false);
+    setEditingIndex(indexName);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center rounded-l-lg border border-r-0 border-zinc-300 bg-white px-3 text-sm text-zinc-700", children: "Index" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      Popover,
+      {
+        open,
+        onOpenChange: (isOpen) => {
+          setOpen(isOpen);
+          if (!isOpen) setSearch("");
+        },
+        modal: false,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { className: "flex min-w-[140px] items-center justify-between gap-2 rounded-r-lg border border-zinc-300 bg-emerald-50 px-3 py-[5px] text-sm font-medium text-emerald-800 transition-colors hover:bg-emerald-100", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate", children: index || "Select an index" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconChevronDown, { className: "size-4 shrink-0 opacity-50" })
+          ] }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverContent, { className: "p-2", align: "center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CreateIndexButton, {}),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-px bg-zinc-100" }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-9 items-center rounded-md border border-zinc-300 px-2", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { className: "size-5 text-zinc-400" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "input",
+                {
+                  value: search,
+                  onChange: (e) => setSearch(e.target.value),
+                  placeholder: "Search Index",
+                  className: "flex h-full w-full bg-transparent px-2 py-3 text-sm outline-none placeholder:text-zinc-400"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "max-h-[200px] overflow-y-auto", children: [
+              _optionalChain([filteredIndexes, 'optionalAccess', _101 => _101.length]) === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "py-4 text-center text-sm text-zinc-500", children: "No indexes found" }),
+              _optionalChain([filteredIndexes, 'optionalAccess', _102 => _102.map, 'call', _103 => _103((idx) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                "div",
+                {
+                  className: "flex h-9 items-center rounded-md px-2 transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-200",
+                  children: [
+                    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                      "button",
+                      {
+                        onClick: () => {
+                          setValuesSearchIndex(idx);
+                          setOpen(false);
+                        },
+                        className: "flex flex-1 items-center gap-2 text-left text-sm",
+                        children: [
+                          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                            "span",
+                            {
+                              className: cn(
+                                "flex size-5 items-center justify-center",
+                                idx === index ? "text-emerald-600" : "text-transparent"
+                              ),
+                              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCircleCheck, { className: "size-5" })
+                            }
+                          ),
+                          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate", children: idx })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      "button",
+                      {
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          event.preventDefault();
+                          handleEditIndex(idx);
+                        },
+                        className: "ml-2 text-sm text-zinc-500 underline hover:text-zinc-700",
+                        children: "Edit"
+                      }
+                    )
+                  ]
+                },
+                idx
+              ))])
+            ] })
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      EditIndexModal,
+      {
+        open: Boolean(editingIndex),
+        onOpenChange: (isOpen) => !isOpen && setEditingIndex(void 0),
+        indexName: editingIndex
+      }
+    )
+  ] });
+};
+var CreateIndexButton = () => {
+  const [open, setOpen] = _react.useState.call(void 0, false);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "button",
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          setOpen(true);
+        },
+        className: "flex h-9 w-full items-center gap-2 rounded-md px-2 text-sm text-emerald-600 transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-200",
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCirclePlus, { className: "size-5" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "underline", children: "Create a new Index" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CreateIndexModal, { open, onOpenChange: setOpen })
+  ] });
+};
+var AddIndexButton = () => {
+  const [open, setOpen] = _react.useState.call(void 0, false);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Create new Index", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      Button,
+      {
+        variant: "primary",
+        onClick: () => setOpen(true),
+        className: "flex h-8 select-none items-center gap-1 rounded-lg pl-2 pr-3 text-sm font-medium",
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "size-5" }),
+          "Index"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CreateIndexModal, { open, onOpenChange: setOpen })
+  ] });
+};
+var WizardButton = () => {
+  const queryWizard = useQueryWizardFn();
+  const [open, setOpen] = _react.useState.call(void 0, false);
+  if (!queryWizard) return null;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Popover, { open, onOpenChange: setOpen, modal: false, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Query Wizard", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "icon", "aria-label": "Query Wizard", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSparkles, { className: "size-4 text-zinc-500" }) }) }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      PopoverContent,
+      {
+        side: "bottom",
+        align: "end",
+        alignOffset: -124,
+        avoidCollisions: false,
+        className: "w-auto p-0",
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QueryWizardPopover, { onClose: () => setOpen(false) })
+      }
+    )
+  ] });
 };
 
-export type DescribeFieldInfo = {
-  type: FieldType;
-  noTokenize?: boolean;
-  noStem?: boolean;
-  fast?: boolean;
-};
+// src/components/databrowser/components/header-error.tsx
 
-export type IndexDescription<TSchema extends NestedIndexSchema | FlatIndexSchema> = {
-  name: string;
-  dataType: "hash" | "string" | "json";
-  prefixes: string[];
-  language?: Language;
-  schema: Record<SchemaPaths<TSchema>, DescribeFieldInfo>;
+var HeaderError = () => {
+  const { query } = useKeys();
+  if (!query.error) return null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-red-600 dark:text-red-400", children: formatUpstashErrorMessage(query.error) });
 };
 
-export type Language =
-  | "english"
-  | "arabic"
-  | "danish"
-  | "dutch"
-  | "finnish"
-  | "french"
-  | "german"
-  | "greek"
-  | "hungarian"
-  | "italian"
-  | "norwegian"
-  | "portuguese"
-  | "romanian"
-  | "russian"
-  | "spanish"
-  | "swedish"
-  | "tamil"
-  | "turkish";
+// src/components/databrowser/components/search/query-editor.tsx
 
-`;
 
 // src/components/databrowser/components/search/generate-query-type-definitions.tsx
 var buildNestedSchema = (flatSchema) => {
@@ -8148,7 +8632,7 @@ var generateNestedInterface = (obj, indent = "  ") => {
 var toAmbientTypes = (types) => types.replaceAll(/export const (\w+) = (\[.*?]) as const;/g, "declare const $1: readonly $2;").replaceAll("export ", "");
 var generateTypeDefinitions = (schema) => {
   let schemaFieldsInterface = "";
-  const schemaFields = _optionalChain([schema, 'optionalAccess', _89 => _89.schema]);
+  const schemaFields = _optionalChain([schema, 'optionalAccess', _104 => _104.schema]);
   if (schemaFields && Object.keys(schemaFields).length > 0) {
     const nested = buildNestedSchema(schemaFields);
     const fieldLines = generateNestedInterface(nested);
@@ -8203,32 +8687,57 @@ var QueryBuilder = () => {
   const { valuesSearch, setValuesSearchQuery } = useTab();
   const { data: indexDetails } = useFetchSearchIndex(valuesSearch.index);
   const editorValue = PREFIX + (valuesSearch.query || "{}");
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col rounded-lg border border-zinc-300 bg-white px-[6px]", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      QueryEditor,
-      {
-        value: editorValue,
-        onChange: (value) => {
-          const queryPart = value.slice(PREFIX.length);
-          setValuesSearchQuery(queryPart);
-        },
-        schema: indexDetails
-      }
-    ) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-end px-2 pb-1.5", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      "a",
-      {
-        href: "https://upstash-search.mintlify.app/redis/search/query-operators/boolean-operators/overview",
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "flex items-center gap-1 text-xs text-zinc-400 transition-colors hover:text-zinc-600",
-        children: [
-          "Docs",
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconExternalLink, { size: 12 })
-        ]
+  if (!indexDetails) return;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full flex-col rounded-lg border border-zinc-300 bg-white px-[6px]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    QueryEditor,
+    {
+      value: editorValue,
+      onChange: (value) => {
+        const queryPart = value.slice(PREFIX.length);
+        setValuesSearchQuery(queryPart);
+      },
+      schema: indexDetails
+    }
+  ) }) });
+};
+
+// src/components/databrowser/components/query-builder-error.tsx
+
+
+var ERROR_TIMEOUT = 5e3;
+var QueryBuilderError = ({
+  error,
+  autoHide
+}) => {
+  const [visible, setVisible] = _react.useState.call(void 0, false);
+  const [displayedError, setDisplayedError] = _react.useState.call(void 0, );
+  _react.useEffect.call(void 0, () => {
+    let timeout;
+    if (error) {
+      setDisplayedError(error);
+      setVisible(true);
+      if (autoHide) {
+        timeout = setTimeout(() => setVisible(false), ERROR_TIMEOUT);
       }
-    ) })
-  ] });
+    } else {
+      setVisible(false);
+    }
+    return () => clearTimeout(timeout);
+  }, [error, autoHide]);
+  if (!displayedError) return;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "p",
+    {
+      className: cn(
+        "absolute bottom-2 left-2 z-[2] max-w-[70%] rounded-md bg-red-50 px-3 py-1.5 text-sm text-red-600 shadow-sm",
+        visible ? "duration-200 animate-in fade-in slide-in-from-bottom-1" : "duration-200 animate-out fade-out slide-out-to-bottom-1 fill-mode-forwards"
+      ),
+      onAnimationEnd: () => {
+        if (!visible) setDisplayedError(void 0);
+      },
+      children: displayedError
+    }
+  );
 };
 
 // src/components/databrowser/components/search-empty-state.tsx
@@ -8389,7 +8898,7 @@ var ImportSampleDatasetModal = ({
         if (await index.describe()) {
           await index.drop();
         }
-      } catch (e5) {
+      } catch (e6) {
       }
       await redis.search.createIndex({
         dataType: "string",
@@ -8483,7 +8992,7 @@ var ImportSampleDatasetModal = ({
 
 var SearchEmptyState = () => {
   const [importModalOpen, setImportModalOpen] = _react.useState.call(void 0, false);
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mx-auto flex h-full max-w-4xl gap-8 rounded-xl border border-zinc-200 bg-gradient-to-b from-zinc-50 to-white p-8", children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mx-auto flex h-full gap-8 rounded-xl border border-zinc-200 bg-gradient-to-b from-zinc-50 to-white p-8", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ImportSampleDatasetModal, { open: importModalOpen, onOpenChange: setImportModalOpen }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "mb-2 text-lg font-semibold text-zinc-900", children: "Redis Search" }),
@@ -8560,7 +9069,7 @@ var Empty = () => {
 
 
 var SidebarContextMenu = ({ children }) => {
-  const { mutate: deleteKey } = useDeleteKey();
+  const { mutateAsync: deleteKey } = useDeleteKey();
   const [isAlertOpen, setAlertOpen] = _react.useState.call(void 0, false);
   const [contextKeys, setContextKeys] = _react.useState.call(void 0, []);
   const {
@@ -8569,7 +9078,7 @@ var SidebarContextMenu = ({ children }) => {
     selectTab,
     setSearch
   } = useDatabrowserStore();
-  const { search: currentSearch, selectedKeys } = useTab();
+  const { search: currentSearch, selectedKeys, isValuesSearchSelected } = useTab();
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       DeleteKeyModal,
@@ -8578,11 +9087,10 @@ var SidebarContextMenu = ({ children }) => {
         count: contextKeys.length,
         open: isAlertOpen,
         onOpenChange: setAlertOpen,
-        onDeleteConfirm: (e) => {
+        showReindex: isValuesSearchSelected,
+        onDeleteConfirm: async (e, options) => {
           e.stopPropagation();
-          for (const key of contextKeys) {
-            deleteKey(key);
-          }
+          await deleteKey({ keys: contextKeys, reindex: _optionalChain([options, 'optionalAccess', _105 => _105.reindex]) });
           setAlertOpen(false);
         }
       }
@@ -8745,7 +9253,7 @@ var LoadingSkeleton = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div",
 
 function Sidebar() {
   const { keys, query } = useKeys();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full flex-col gap-2", children: query.isLoading && keys.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingSkeleton, {}) : keys.length > 0 ? (
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "relative flex h-full flex-col gap-2", children: query.isLoading && keys.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingSkeleton, {}) : keys.length > 0 ? (
     // Infinite scroll already has a loader at the bottom
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       InfiniteScroll,
@@ -8768,18 +9276,19 @@ function Sidebar() {
 
 // src/components/databrowser/components/ui-query-builder/types.ts
 var STRING_OPERATORS = [
+  "smart",
   "eq",
   "ne",
   "in",
   "phrase",
   "regex",
-  "fuzzy",
-  "smart"
+  "fuzzy"
 ];
-var NUMBER_OPERATORS = ["eq", "ne", "gt", "gte", "lt", "lte", "in"];
-var BOOLEAN_OPERATORS = ["eq", "ne", "in"];
-var DATE_OPERATORS = ["eq", "ne", "gt", "gte", "lt", "lte", "in"];
+var NUMBER_OPERATORS = ["eq", "ne", "gt", "gte", "lt", "lte"];
+var BOOLEAN_OPERATORS = ["eq", "ne"];
+var DATE_OPERATORS = NUMBER_OPERATORS;
 var ALL_OPERATORS = [
+  "smart",
   "eq",
   "ne",
   "gt",
@@ -8789,10 +9298,23 @@ var ALL_OPERATORS = [
   "in",
   "phrase",
   "regex",
-  "fuzzy",
-  "smart"
+  "fuzzy"
 ];
+var OPERATOR_DESCRIPTIONS = {
+  eq: "Equals",
+  ne: "Not equals",
+  gt: "Greater than",
+  gte: "Greater than or equal",
+  lt: "Less than",
+  lte: "Less than or equal",
+  in: "Matches any of the given values, comma separated",
+  phrase: "Matches an exact phrase",
+  regex: "Matches a regular expression pattern",
+  fuzzy: "Approximate match with custom edit distance",
+  smart: "Default opinionated matching algorithm"
+};
 var OPERATOR_OPTIONS = [
+  { value: "smart", label: "smart" },
   { value: "eq", label: "eq" },
   { value: "ne", label: "ne" },
   { value: "gt", label: "gt" },
@@ -8802,8 +9324,7 @@ var OPERATOR_OPTIONS = [
   { value: "in", label: "in" },
   { value: "phrase", label: "phrase" },
   { value: "regex", label: "regex" },
-  { value: "fuzzy", label: "fuzzy" },
-  { value: "smart", label: "smart" }
+  { value: "fuzzy", label: "fuzzy" }
 ];
 var getOperatorsForFieldType = (fieldType) => {
   switch (fieldType) {
@@ -8845,7 +9366,7 @@ var hasMustShouldCombination = (queryString) => {
     const obj = parseJSObjectLiteral(queryString);
     if (!obj) return false;
     return hasMustShouldCombinationInObject(obj);
-  } catch (e6) {
+  } catch (e7) {
     return false;
   }
 };
@@ -8871,12 +9392,13 @@ var isFieldConditionObject = (obj) => {
 };
 var parseFieldCondition = (field, fieldValue) => {
   if (!isFieldConditionObject(fieldValue)) {
+    const operator2 = typeof fieldValue === "boolean" || typeof fieldValue === "number" ? "eq" : "smart";
     return {
       id: generateId(),
       type: "condition",
       condition: {
         field,
-        operator: "eq",
+        operator: operator2,
         value: fieldValue
       }
     };
@@ -8907,20 +9429,23 @@ var parseFieldCondition = (field, fieldValue) => {
       break;
     }
   }
+  if (operator === "smart" && (typeof value === "boolean" || typeof value === "number")) {
+    operator = "eq";
+  }
   if ("$boost" in fieldObj) {
     boost = fieldObj.$boost;
   }
   return {
     id: generateId(),
     type: "condition",
+    boost,
     condition: {
       field,
       operator,
       value,
       fuzzyDistance,
       phraseSlop,
-      phrasePrefix,
-      boost
+      phrasePrefix
     }
   };
 };
@@ -8930,6 +9455,10 @@ var parseMultiFieldObject = (obj, operator) => {
   for (const [key, value] of Object.entries(obj)) {
     if (key === "$boost") {
       boost = value;
+    } else if (key === "$and" || key === "$or") {
+      const nestedOp = key === "$and" ? "and" : "or";
+      const nestedGroup = parseGroup(value, nestedOp);
+      if (nestedGroup) children.push(nestedGroup);
     } else if (!isOperatorKey(key)) {
       children.push(parseFieldCondition(key, value));
     }
@@ -9000,11 +9529,29 @@ var objectToQueryNode = (obj) => {
     const operator = "$and" in obj ? "and" : "or";
     const groupValue = _nullishCoalesce(obj["$and"], () => ( obj["$or"]));
     const boost = "$boost" in obj ? obj.$boost : void 0;
-    const groupNode = parseGroup(groupValue, operator, boost);
+    const groupNode = parseGroup(
+      groupValue,
+      operator,
+      nonOperatorKeys.length === 0 ? boost : void 0
+    );
     if (groupNode && groupNode.type === "group" && hasMustNot) {
       addMustNotChildren(groupNode, obj.$mustNot);
     }
-    return groupNode;
+    if (!groupNode || nonOperatorKeys.length === 0) {
+      return groupNode;
+    }
+    const fieldChildren = nonOperatorKeys.map((key) => parseFieldCondition(key, obj[key]));
+    const group = {
+      id: generateId(),
+      type: "group",
+      groupOperator: "and",
+      children: [...fieldChildren, groupNode],
+      boost
+    };
+    if (hasMustNot) {
+      addMustNotChildren(group, obj.$mustNot);
+    }
+    return group;
   }
   if (hasMustNot) {
     if (nonOperatorKeys.length > 0) {
@@ -9053,7 +9600,7 @@ var parseQueryStringWithError = (queryString) => {
       }
       return { success: true, state: { root: root2 } };
     }
-  } catch (e7) {
+  } catch (e8) {
   }
   return { success: false, error: "Failed to parse query" };
 };
@@ -9240,8 +9787,7 @@ var moveNodeInTree = (root2, nodeId, newParentId, newIndex) => {
 
 
 
-// src/components/databrowser/components/ui-query-builder/condition-common.tsx
-
+// src/components/databrowser/components/ui-query-builder/boost-badge.tsx
 
 
 // src/components/databrowser/components/ui-query-builder/dynamic-width-input.tsx
@@ -9294,7 +9840,7 @@ var DynamicWidthInput = ({
   );
 };
 
-// src/components/databrowser/components/ui-query-builder/condition-common.tsx
+// src/components/databrowser/components/ui-query-builder/boost-badge.tsx
 
 var BoostBadge = ({
   node,
@@ -9325,7 +9871,13 @@ var BoostBadge = ({
   const labelBg = isNegative ? "bg-red-50" : "bg-purple-50";
   const textColor = isNegative ? "text-red-800" : "text-purple-800";
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "relative flex h-[26px] items-center overflow-hidden rounded-md border border-zinc-300 text-sm font-medium", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `flex h-full items-center px-2 ${labelBg} ${textColor}`, children: isNegative ? "Demote" : "Boost" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Tooltip, { delayDuration: 200, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `flex h-full cursor-default items-center px-2 ${labelBg} ${textColor}`, children: isNegative ? "Demote" : "Boost" }) }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, TooltipContent, { side: "bottom", className: "max-w-xs", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: isNegative ? `Multiplies this condition's score by ${_nullishCoalesce(node.boost, () => ( 0))}, subtracting from the total.` : `Multiplies this condition's score by ${_nullishCoalesce(node.boost, () => ( 0))}.` }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DocsLink, { href: "https://upstash-search.mintlify.app/redis/search/query-operators/boolean-operators/boost" })
+      ] })
+    ] }),
     isStatic ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `px-2 ${textColor}`, children: node.boost }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex h-full items-center bg-white px-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       DynamicWidthInput,
       {
@@ -9339,7 +9891,33 @@ var BoostBadge = ({
     ) })
   ] });
 };
+
+// src/components/databrowser/components/ui-query-builder/dnd-context.tsx
+
+
+
+
+
+
+
+var _core = require('@dnd-kit/core');
+
+// src/components/databrowser/components/ui-query-builder/drag-overlay.tsx
+
+
+
+// src/components/databrowser/components/ui-query-builder/not-badge.tsx
+
 var NotBadge = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex h-[26px] items-center rounded-md border border-zinc-300 bg-amber-50 px-2 text-sm font-medium text-amber-800", children: "Not" });
+
+// src/components/databrowser/components/ui-query-builder/query-condition.tsx
+
+
+
+// src/components/databrowser/components/ui-query-builder/node-actions-menu.tsx
+
+
+
 var NodeActionsMenu = ({ node }) => {
   const { updateNode } = useQueryBuilderUI();
   const [open, setOpen] = _react.useState.call(void 0, false);
@@ -9393,24 +9971,8 @@ var NodeActionsMenu = ({ node }) => {
   ] });
 };
 
-// src/components/databrowser/components/ui-query-builder/dnd-context.tsx
-
-
-
-
-
-
-
-var _core = require('@dnd-kit/core');
-
-// src/components/databrowser/components/ui-query-builder/drag-overlay.tsx
-
-
-
 // src/components/databrowser/components/ui-query-builder/query-condition.tsx
 
-
-
 var formatValueForDisplay = (value) => {
   if (Array.isArray(value)) {
     return value.join(", ");
@@ -9435,7 +9997,7 @@ var QueryCondition = ({
     setLocalValue(formattedConditionValue);
   }
   const currentFieldInfo = fieldInfos.find((f) => f.name === condition.field);
-  const currentFieldType = _nullishCoalesce(_optionalChain([currentFieldInfo, 'optionalAccess', _90 => _90.type]), () => ( "unknown"));
+  const currentFieldType = _nullishCoalesce(_optionalChain([currentFieldInfo, 'optionalAccess', _106 => _106.type]), () => ( "unknown"));
   const isUnknownField = condition.field && !fieldNames.includes(condition.field);
   const getValueTypeError = () => {
     if (isUnknownField || currentFieldType === "unknown" || currentFieldType === "string") {
@@ -9493,8 +10055,8 @@ var QueryCondition = ({
     }
   }, [currentFieldType, condition.value]);
   const handleFieldChange = (value) => {
-    const newFieldInfo = _optionalChain([fieldInfos, 'optionalAccess', _91 => _91.find, 'call', _92 => _92((f) => f.name === value)]);
-    const newFieldType = _nullishCoalesce(_optionalChain([newFieldInfo, 'optionalAccess', _93 => _93.type]), () => ( "unknown"));
+    const newFieldInfo = _optionalChain([fieldInfos, 'optionalAccess', _107 => _107.find, 'call', _108 => _108((f) => f.name === value)]);
+    const newFieldType = _nullishCoalesce(_optionalChain([newFieldInfo, 'optionalAccess', _109 => _109.type]), () => ( "unknown"));
     const validOperators = getOperatorsForFieldType(newFieldType);
     const isOperatorValid = validOperators.includes(condition.operator);
     let newValue = condition.value;
@@ -9635,10 +10197,10 @@ var QueryCondition = ({
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
       {
-        ref: _optionalChain([dragHandleProps, 'optionalAccess', _94 => _94.ref]),
+        ref: _optionalChain([dragHandleProps, 'optionalAccess', _110 => _110.ref]),
         className: "flex cursor-grab items-center px-1 text-zinc-400 hover:text-zinc-600",
-        ..._optionalChain([dragHandleProps, 'optionalAccess', _95 => _95.attributes]),
-        ..._optionalChain([dragHandleProps, 'optionalAccess', _96 => _96.listeners]),
+        ..._optionalChain([dragHandleProps, 'optionalAccess', _111 => _111.attributes]),
+        ..._optionalChain([dragHandleProps, 'optionalAccess', _112 => _112.listeners]),
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconGripVertical, { size: 16 })
       }
     ),
@@ -9681,7 +10243,15 @@ var QueryCondition = ({
             },
             condition.operator
           ),
-          filteredOperators.map((op) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: op.value, children: op.label }, op.value))
+          filteredOperators.map((op) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            SelectItem,
+            {
+              value: op.value,
+              description: OPERATOR_DESCRIPTIONS[op.value],
+              children: op.label
+            },
+            op.value
+          ))
         ] })
       ] }),
       currentFieldType === "boolean" && condition.operator === "in" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-[26px] items-center gap-2 rounded-none rounded-r-md border border-zinc-200 bg-white px-2 text-sm", children: [
@@ -9763,8 +10333,15 @@ var QueryCondition = ({
         children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTrigger, { className: "h-[26px] w-16 gap-3 border-zinc-200 bg-white px-2 text-sm", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, {}) }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SelectContent, { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: "1", children: "1" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: "2", children: "2" })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              SelectItem,
+              {
+                value: "1",
+                description: "Matches words with 1 character edit (e.g. 'teh' \u2192 'the')",
+                children: "1"
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: "2", description: "Matches words with up to 2 character edits", children: "2" })
           ] })
         ]
       }
@@ -9773,9 +10350,23 @@ var QueryCondition = ({
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select, { value: phraseMode, onValueChange: handlePhraseModeChange, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTrigger, { className: "h-[26px] w-20 gap-3 border-zinc-200 bg-white px-2 text-sm font-normal", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, {}) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SelectContent, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: "exact", children: "exact" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: "slop", children: "slop" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: "prefix", children: "prefix" })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: "exact", description: "Terms must appear adjacent to each other", children: "exact" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            SelectItem,
+            {
+              value: "slop",
+              description: "Allow custom number of intervening words between terms",
+              children: "slop"
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            SelectItem,
+            {
+              value: "prefix",
+              description: "Last term matches as a prefix (e.g. 'wireless head' \u2192 'headphones')",
+              children: "prefix"
+            }
+          )
         ] })
       ] }),
       phraseMode === "slop" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -9791,6 +10382,7 @@ var QueryCondition = ({
         }
       )
     ] }),
+    node.not && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NotBadge, {}),
     node.boost !== void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BoostBadge, { node }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
@@ -10027,6 +10619,7 @@ var DraggableItem = ({
 // src/components/databrowser/components/ui-query-builder/drop-zone.tsx
 
 
+
 var DropIndicator = ({ id, isOver }) => {
   const { setNodeRef } = _core.useDroppable.call(void 0, { id });
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setNodeRef, className: `relative flex h-2 items-center`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -10039,14 +10632,26 @@ var DropIndicator = ({ id, isOver }) => {
     }
   ) });
 };
-var EmptyGroupDropZone = ({ groupId, isOver }) => {
+var EmptyGroupDropZone = ({
+  groupId,
+  isOver,
+  onAddCondition
+}) => {
   const { setNodeRef } = _core.useDroppable.call(void 0, { id: `drop-${groupId}-end` });
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "div",
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "button",
     {
+      type: "button",
       ref: setNodeRef,
-      className: `mt-2 flex h-8 items-center justify-center rounded-md border border-dashed text-sm transition-all ${isOver ? "border-blue-500 bg-blue-50 text-blue-600" : "border-zinc-300 text-zinc-400"}`,
-      children: "Add a condition to start"
+      onClick: onAddCondition,
+      className: cn(
+        "mt-2 flex h-8 w-full items-center justify-center gap-1.5 rounded-md border border-dashed text-sm transition-all",
+        isOver ? "border-blue-500 bg-blue-50 text-blue-600" : "border-zinc-300 text-zinc-400 hover:border-zinc-400 hover:bg-zinc-50 hover:text-zinc-500"
+      ),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { size: 14 }),
+        "Add a condition"
+      ]
     }
   );
 };
@@ -10093,9 +10698,7 @@ var InnerGroup = ({
     addChildToGroup(node.id, createEmptyCondition(fieldInfos));
   };
   const handleAddGroup = () => {
-    const newGroup = createEmptyGroup("and");
-    newGroup.children = [createEmptyCondition(fieldInfos)];
-    addChildToGroup(node.id, newGroup);
+    addChildToGroup(node.id, createEmptyGroup("and"));
   };
   const handleDeleteGroup = () => {
     deleteNode(node.id);
@@ -10105,10 +10708,10 @@ var InnerGroup = ({
       !isRoot && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "div",
         {
-          ref: _optionalChain([dragHandleProps, 'optionalAccess', _97 => _97.ref]),
+          ref: _optionalChain([dragHandleProps, 'optionalAccess', _113 => _113.ref]),
           className: "flex cursor-grab items-center px-1 text-zinc-400",
-          ..._optionalChain([dragHandleProps, 'optionalAccess', _98 => _98.attributes]),
-          ..._optionalChain([dragHandleProps, 'optionalAccess', _99 => _99.listeners]),
+          ..._optionalChain([dragHandleProps, 'optionalAccess', _114 => _114.attributes]),
+          ..._optionalChain([dragHandleProps, 'optionalAccess', _115 => _115.listeners]),
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconGripVertical, { size: 16 })
         }
       ),
@@ -10134,6 +10737,7 @@ var InnerGroup = ({
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuItem, { onClick: handleAddGroup, children: "Add Group" })
         ] })
       ] }),
+      node.not && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NotBadge, {}),
       node.boost !== void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BoostBadge, { node }),
       !isRoot && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         "div",
@@ -10154,7 +10758,14 @@ var InnerGroup = ({
         }
       )
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: `min-h-[20px] ${isRoot ? "" : "ml-[15px] border-l-2 border-zinc-200 pl-3"}`, children: node.children.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmptyGroupDropZone, { groupId: node.id, isOver: activeOverId === `drop-${node.id}-end` }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: `min-h-[20px] ${isRoot ? "" : "ml-[15px] border-l-2 border-zinc-200 pl-3"}`, children: node.children.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      EmptyGroupDropZone,
+      {
+        groupId: node.id,
+        isOver: activeOverId === `drop-${node.id}-end`,
+        onAddCondition: fieldInfos.length > 0 ? handleAddCondition : void 0
+      }
+    ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       node.children.map(
         (child) => !child.not && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           ChildRow,
@@ -10170,20 +10781,10 @@ var InnerGroup = ({
       ),
       node.children.some((child) => child.not) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Tooltip, { delayDuration: 200, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "ml-2 mt-2 flex h-[26px] w-fit cursor-default select-none items-center rounded-md border border-zinc-300 bg-amber-50 px-2 text-sm font-medium capitalize text-amber-800", children: "Must Not" }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipContent, { side: "right", className: "max-w-xs", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { children: [
-          "Keys matching any of the conditions below are excluded from the results.",
-          " ",
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "a",
-            {
-              href: "https://upstash-search.mintlify.app/redis/search/query-operators/boolean-operators/must-not",
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "underline",
-              children: "Learn more"
-            }
-          )
-        ] }) })
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, TooltipContent, { side: "right", className: "max-w-xs", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Keys matching any of the conditions below are excluded from the results." }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DocsLink, { href: "https://upstash-search.mintlify.app/redis/search/query-operators/boolean-operators/must-not" })
+        ] })
       ] }),
       node.children.map(
         (child) => child.not && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -10248,12 +10849,6 @@ var QueryGroup = ({ node, isRoot = false, depth }) => {
 
 
 // src/components/databrowser/components/ui-query-builder/query-stringify.ts
-var jsonToJsLiteral = (json) => {
-  return json.replaceAll(/"([$A-Z_a-z][\w$]*)"\s*:/g, "$1:");
-};
-var toJsLiteral = (obj) => {
-  return jsonToJsLiteral(JSON.stringify(obj, null, 2));
-};
 var buildOperatorValue = (operator, value, fuzzyDistance, phraseSlop, phrasePrefix) => {
   if (operator === "fuzzy" && fuzzyDistance) {
     return { value, distance: fuzzyDistance };
@@ -10279,7 +10874,8 @@ var conditionToObject = (node) => {
     phrasePrefix
   } = node.condition;
   const effectiveBoost = _nullishCoalesce(node.boost, () => ( conditionBoost));
-  if (operator === "eq" && !effectiveBoost) {
+  const isCollapsibleEq = operator === "eq" && (typeof value === "boolean" || typeof value === "number");
+  if ((operator === "smart" || isCollapsibleEq) && !effectiveBoost) {
     return { [field]: value };
   }
   const fieldCondition = {
@@ -10292,15 +10888,15 @@ var conditionToObject = (node) => {
   return { [field]: fieldCondition };
 };
 var canMergeChildren = (children) => {
-  return children.every(
-    (child) => child.type === "condition" && !child.not && !child.boost && child.condition.operator === "eq" && !child.condition.boost
-  );
+  if (!children.every((child) => child.type === "condition" && !child.not)) return false;
+  const fields = children.map((c) => c.condition.field);
+  return new Set(fields).size === fields.length;
 };
 var mergeConditions = (children, boost) => {
   const merged = {};
   for (const child of children) {
     if (child.type === "condition") {
-      merged[child.condition.field] = child.condition.value;
+      Object.assign(merged, conditionToObject(child));
     }
   }
   if (boost && boost !== 1) {
@@ -10308,7 +10904,14 @@ var mergeConditions = (children, boost) => {
   }
   return merged;
 };
-var groupToObject = (node, isRoot) => {
+var buildMustNot = (negatedChildren) => {
+  const negatedObjects = negatedChildren.map((child) => {
+    const withoutNot = { ...child, not: void 0 };
+    return queryNodeToObject(withoutNot, false);
+  });
+  return negatedObjects.length === 1 ? negatedObjects[0] : negatedObjects;
+};
+var groupToObject = (node, isRoot, forArray = false) => {
   const { groupOperator, children, boost, not } = node;
   const normalChildren = children.filter((c) => !c.not);
   const negatedChildren = children.filter((c) => c.not);
@@ -10324,41 +10927,84 @@ var groupToObject = (node, isRoot) => {
     }
     return { $mustNot: [inner] };
   }
-  if (isRoot && groupOperator === "and" && normalChildren.length === 1 && negatedChildren.length === 0 && !boost) {
-    return queryNodeToObject(normalChildren[0], false);
+  if (isRoot && groupOperator === "and" && negatedChildren.length === 0) {
+    if (normalChildren.length === 1) {
+      const result2 = queryNodeToObject(normalChildren[0], false);
+      if (boost && boost !== 1) result2.$boost = boost;
+      return result2;
+    }
+    const conditionChildren = normalChildren.filter((c) => c.type === "condition");
+    const groupChildren = normalChildren.filter((c) => c.type === "group");
+    const hasConflictingGroupChild = groupChildren.some(
+      (c) => c.groupOperator === groupOperator && c.children.length > 1 && c.boost
+    );
+    if (!hasConflictingGroupChild) {
+      const fields = conditionChildren.map(
+        (c) => c.condition.field
+      );
+      const groupOps = groupChildren.map((c) => `$${c.groupOperator}`);
+      const allKeys = [...fields, ...groupOps];
+      const hasConflicts = new Set(allKeys).size !== allKeys.length;
+      if (!hasConflicts) {
+        const result2 = {};
+        for (const child of conditionChildren) {
+          Object.assign(result2, conditionToObject(child));
+        }
+        for (const child of groupChildren) {
+          Object.assign(result2, groupToObject(child, false));
+        }
+        if (boost && boost !== 1) result2.$boost = boost;
+        return result2;
+      }
+    }
   }
-  if (normalChildren.length > 0 && negatedChildren.length === 0 && canMergeChildren(normalChildren)) {
-    const merged = mergeConditions(normalChildren, boost);
-    if (isRoot && groupOperator === "and") {
-      return merged;
+  if (normalChildren.length > 0 && canMergeChildren(normalChildren)) {
+    if (isRoot && groupOperator === "and" && negatedChildren.length === 0) {
+      return mergeConditions(normalChildren, boost);
+    }
+    const result2 = {};
+    if (forArray) {
+      result2[`$${groupOperator}`] = mergeConditions(normalChildren);
+      if (boost && boost !== 1) result2.$boost = boost;
+    } else {
+      result2[`$${groupOperator}`] = mergeConditions(normalChildren, boost);
     }
-    const result2 = { [`$${groupOperator}`]: merged };
-    if (boost && boost !== 1) {
-      result2.$boost = boost;
+    if (negatedChildren.length > 0) {
+      result2.$mustNot = buildMustNot(negatedChildren);
     }
     return result2;
   }
   const result = {};
   if (normalChildren.length > 0) {
-    result[`$${groupOperator}`] = normalChildren.map((child) => queryNodeToObject(child, false));
+    result[`$${groupOperator}`] = normalChildren.map((child) => {
+      if (child.type === "group") {
+        const groupChild = child;
+        const gc = groupChild.children;
+        const gcNormal = gc.filter((c) => !c.not);
+        const gcNegated = gc.filter((c) => c.not);
+        if (groupChild.groupOperator === groupOperator && gc.length > 1 && gcNegated.length === 0 && canMergeChildren(gcNormal)) {
+          return mergeConditions(gcNormal, groupChild.boost);
+        }
+      }
+      return queryNodeToObject(child, false, true);
+    });
+  } else if (negatedChildren.length > 0) {
+    result[`$${groupOperator}`] = {};
   }
   if (negatedChildren.length > 0) {
-    result.$mustNot = negatedChildren.map((child) => {
-      const withoutNot = { ...child, not: void 0 };
-      return queryNodeToObject(withoutNot, false);
-    });
+    result.$mustNot = buildMustNot(negatedChildren);
   }
   if (boost && boost !== 1) {
     result.$boost = boost;
   }
   return result;
 };
-var queryNodeToObject = (node, isRoot = false) => {
+var queryNodeToObject = (node, isRoot = false, forArray = false) => {
   if (node.type === "condition") {
     return conditionToObject(node);
   }
   if (node.type === "group") {
-    return groupToObject(node, isRoot);
+    return groupToObject(node, isRoot, forArray);
   }
   return {};
 };
@@ -10414,7 +11060,7 @@ var UIQueryBuilder = () => {
   const { valuesSearch } = useTab();
   const { data: indexDetails } = useFetchSearchIndex(valuesSearch.index);
   const { queryState, setQueryState } = useQueryStateSync();
-  const fieldInfos = _optionalChain([indexDetails, 'optionalAccess', _100 => _100.schema]) ? extractFieldInfo(indexDetails.schema) : [];
+  const fieldInfos = _optionalChain([indexDetails, 'optionalAccess', _116 => _116.schema]) ? extractFieldInfo(indexDetails.schema) : [];
   const hasNormalized = _react.useRef.call(void 0, false);
   _react.useEffect.call(void 0, () => {
     if (hasNormalized.current || fieldInfos.length === 0) return;
@@ -10433,7 +11079,7 @@ var UIQueryBuilder = () => {
     setHasBottomShadow(scrollTop + clientHeight < scrollHeight - 1);
   }, []);
   _react.useEffect.call(void 0, () => {
-    viewportRef.current = _optionalChain([scrollAreaRef, 'access', _101 => _101.current, 'optionalAccess', _102 => _102.querySelector, 'call', _103 => _103(
+    viewportRef.current = _optionalChain([scrollAreaRef, 'access', _117 => _117.current, 'optionalAccess', _118 => _118.querySelector, 'call', _119 => _119(
       "[data-radix-scroll-area-viewport]"
     )]);
     recomputeShadows();
@@ -10443,7 +11089,7 @@ var UIQueryBuilder = () => {
     obs.observe(el);
     return () => obs.disconnect();
   }, [recomputeShadows]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QueryBuilderUIProvider, { fieldInfos, setQueryState, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative h-full rounded-lg bg-zinc-50", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QueryBuilderUIProvider, { fieldInfos, setQueryState, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative h-full rounded-lg bg-zinc-50 dark:bg-zinc-50/40", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
       {
@@ -10539,41 +11185,47 @@ var extractFieldInfo = (schema) => {
 
 var PREFIX = "const query: Query = ";
 var QueryBuilderContent = () => {
-  const { valuesSearch } = useTab();
-  const [mode, setMode] = _react.useState.call(void 0, "builder");
-  const [switchError, setSwitchError] = _react.useState.call(void 0, null);
+  const { valuesSearch, queryBuilderMode, setQueryBuilderMode } = useTab();
+  const { query } = useKeys();
+  const [switchError, setSwitchError] = _react.useState.call(void 0, );
   const handleModeChange = (value) => {
     const newMode = value;
-    if (newMode === "builder") {
+    if (newMode === "ui") {
       if (hasMustShouldCombination(valuesSearch.query)) {
         setSwitchError(
           "Queries using both $must and $should are not supported in the UI query builder"
         );
         return;
       }
-      setSwitchError(null);
+      setSwitchError(void 0);
     } else {
-      setSwitchError(null);
+      setSwitchError(void 0);
     }
-    setMode(newMode);
+    setQueryBuilderMode(newMode);
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative h-[200px] max-h-[40vh] min-h-[150px] resize-y overflow-hidden", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute right-4 top-4 z-10", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        Segmented,
-        {
-          options: [
-            { key: "builder", label: "Query Builder" },
-            { key: "code", label: "Code Editor" }
-          ],
-          value: mode,
-          onChange: handleModeChange,
-          buttonClassName: "h-6"
-        }
-      ) }),
-      mode === "builder" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UIQueryBuilder, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QueryBuilder, {})
-    ] }),
-    switchError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-3 text-sm text-red-500", children: switchError })
+  const errorMessage = _nullishCoalesce(switchError, () => ( (query.error ? formatUpstashErrorMessage(query.error) : void 0)));
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative h-full", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute right-4 top-4 z-[2]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      Segmented,
+      {
+        options: [
+          { key: "ui", label: "Query Builder" },
+          { key: "code", label: "Code Editor" }
+        ],
+        value: queryBuilderMode,
+        onChange: handleModeChange,
+        buttonClassName: "h-6"
+      }
+    ) }),
+    queryBuilderMode === "ui" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UIQueryBuilder, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QueryBuilder, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QueryBuilderError, { error: errorMessage, autoHide: Boolean(switchError) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      DocsLink,
+      {
+        className: "absolute bottom-2 right-2 text-sm",
+        href: "https://upstash-search.mintlify.app/redis/search/query-operators/boolean-operators/overview"
+      }
+    )
   ] });
 };
 var SearchContent = () => {
@@ -10606,16 +11258,31 @@ var DatabrowserInstance = ({
     "div",
     {
       className: cn(
-        "flex min-h-0 grow flex-col rounded-md bg-white px-5 pb-5",
+        "flex min-h-0 grow flex-col rounded-[10px] bg-white px-5 pb-5",
         hidden && "hidden"
       ),
       children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-3 py-5", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Header, { tabType, allowSearch }),
-          isValuesSearchSelected && !showEmptyState && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchContent, {}),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HeaderError, {})
+          !isValuesSearchSelected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HeaderError, {})
         ] }),
-        showEmptyState ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchEmptyState, {}) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        showEmptyState ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchEmptyState, {}) : isValuesSearchSelected ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _reactresizablepanels.PanelGroup,
+          {
+            autoSaveId: "search-layout",
+            direction: "vertical",
+            className: "h-full w-full text-sm antialiased",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.Panel, { defaultSize: 30, minSize: 15, maxSize: 60, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchContent, {}) }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ResizeHandle, { direction: "vertical" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.Panel, { minSize: 30, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _reactresizablepanels.PanelGroup, { autoSaveId: "persistence", direction: "horizontal", className: "h-full w-full", children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Sidebar, {}) }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ResizeHandle, {}),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.Panel, { minSize: 40, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataDisplay, {}) })
+              ] }) })
+            ]
+          }
+        ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           _reactresizablepanels.PanelGroup,
           {
             autoSaveId: "persistence",
@@ -10623,11 +11290,7 @@ var DatabrowserInstance = ({
             className: "h-full w-full text-sm antialiased",
             children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Sidebar, {}) }),
-              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _reactresizablepanels.PanelResizeHandle, { className: "group mx-[2px] flex h-full flex-col items-center justify-center gap-1 rounded-md px-[8px] transition-colors hover:bg-zinc-300/10", children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-[3px] w-[3px] rounded-full bg-zinc-300" }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-[3px] w-[3px] rounded-full bg-zinc-300" }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-[3px] w-[3px] rounded-full bg-zinc-300" })
-              ] }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ResizeHandle, {}),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.Panel, { minSize: 40, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataDisplay, {}) })
             ]
           }
@@ -10756,7 +11419,7 @@ var useOverflow = () => {
     }
     if (!node) return;
     observerRef.current = new ResizeObserver((entries) => {
-      const el = _optionalChain([entries, 'access', _104 => _104.at, 'call', _105 => _105(0), 'optionalAccess', _106 => _106.target]);
+      const el = _optionalChain([entries, 'access', _120 => _120.at, 'call', _121 => _121(0), 'optionalAccess', _122 => _122.target]);
       if (!el) return;
       setIsOverflow(el.scrollWidth > el.clientWidth);
     });
@@ -10764,7 +11427,7 @@ var useOverflow = () => {
   }, []);
   _react.useEffect.call(void 0, () => {
     return () => {
-      _optionalChain([observerRef, 'access', _107 => _107.current, 'optionalAccess', _108 => _108.disconnect, 'call', _109 => _109()]);
+      _optionalChain([observerRef, 'access', _123 => _123.current, 'optionalAccess', _124 => _124.disconnect, 'call', _125 => _125()]);
     };
   }, []);
   return { ref, isOverflow };
@@ -10882,8 +11545,8 @@ var SortableTab = ({ id }) => {
   const [originalWidth, setOriginalWidth] = _react.useState.call(void 0, null);
   const textRef = _react.useRef.call(void 0, null);
   const { tabs } = useDatabrowserStore();
-  const tabData = _optionalChain([tabs, 'access', _110 => _110.find, 'call', _111 => _111(([tabId]) => tabId === id), 'optionalAccess', _112 => _112[1]]);
-  const isPinned = _optionalChain([tabData, 'optionalAccess', _113 => _113.pinned]);
+  const tabData = _optionalChain([tabs, 'access', _126 => _126.find, 'call', _127 => _127(([tabId]) => tabId === id), 'optionalAccess', _128 => _128[1]]);
+  const isPinned = _optionalChain([tabData, 'optionalAccess', _129 => _129.pinned]);
   const { attributes, listeners: listeners2, setNodeRef, transform, transition, isDragging } = _sortable.useSortable.call(void 0, {
     id,
     disabled: isPinned,
@@ -11028,7 +11691,7 @@ var DatabrowserTabs = ({ onFullScreenClick }) => {
       reorderTabs(oldIndex, newIndex);
     }
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "relative shrink-0 overflow-hidden rounded-t-lg bg-zinc-300", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "relative shrink-0 overflow-hidden rounded-t-[10px] bg-zinc-300", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative min-w-0 flex-1", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "div",
@@ -11076,7 +11739,7 @@ var DatabrowserTabs = ({ onFullScreenClick }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 pl-1", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 px-1", children: [
       isOverflow && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddTabButton, {}),
       tabs.length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabsListButton, { tabs, onSelectTab: selectTab }),
       onFullScreenClick && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -11084,9 +11747,8 @@ var DatabrowserTabs = ({ onFullScreenClick }) => {
         {
           "aria-label": "Toggle fullscreen",
           variant: "secondary",
-          size: "icon-sm",
           onClick: onFullScreenClick,
-          className: "flex-shrink-0 bg-white text-zinc-500 dark:bg-zinc-100",
+          className: "h-[34px] w-[34px] flex-shrink-0 rounded-lg bg-white text-zinc-500 dark:bg-zinc-100",
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconWindowMaximize, { size: 16 })
         }
       )
@@ -11100,7 +11762,7 @@ function AddTabButton() {
     const tabsId = addTab();
     selectTab(tabsId);
     setTimeout(() => {
-      const tab = _optionalChain([rootRef, 'optionalAccess', _114 => _114.current, 'optionalAccess', _115 => _115.querySelector, 'call', _116 => _116(`#tab-${tabsId}`)]);
+      const tab = _optionalChain([rootRef, 'optionalAccess', _130 => _130.current, 'optionalAccess', _131 => _131.querySelector, 'call', _132 => _132(`#tab-${tabsId}`)]);
       if (!tab) return;
       tab.scrollIntoView({ behavior: "smooth" });
     }, 20);
@@ -11134,7 +11796,7 @@ function TabsListButton({
     onSelectTab(id);
     setOpen(false);
     setTimeout(() => {
-      const tab = _optionalChain([rootRef, 'optionalAccess', _117 => _117.current, 'optionalAccess', _118 => _118.querySelector, 'call', _119 => _119(`#tab-${id}`)]);
+      const tab = _optionalChain([rootRef, 'optionalAccess', _133 => _133.current, 'optionalAccess', _134 => _134.querySelector, 'call', _135 => _135(`#tab-${id}`)]);
       if (!tab) return;
       tab.scrollIntoView({ behavior: "smooth" });
     }, 20);
@@ -11144,8 +11806,7 @@ function TabsListButton({
       Button,
       {
         variant: "secondary",
-        size: "sm",
-        className: "gap-1 bg-white px-2",
+        className: "h-[34px] gap-1 rounded-lg bg-white px-2",
         "aria-label": "Search in tabs",
         children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs text-zinc-600", children: tabs.length }),
@@ -11184,14 +11845,15 @@ var RedisBrowser = ({
   disableTelemetry,
   onFullScreenClick,
   theme = "light",
-  allowSearch = false
+  allowSearch = false,
+  useQueryWizard
 }) => {
   const credentials = _react.useMemo.call(void 0, () => ({ token, url }), [token, url]);
   const rootRef = _react.useRef.call(void 0, null);
   _react.useEffect.call(void 0, () => {
     queryClient.resetQueries();
   }, [credentials.url]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RedisProvider, { redisCredentials: credentials, telemetry: !disableTelemetry, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DarkModeProvider, { theme, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RedisProvider, { redisCredentials: credentials, telemetry: !disableTelemetry, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DarkModeProvider, { theme, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QueryWizardProvider, { value: useQueryWizard, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     RedisBrowserRoot,
     {
       allowSearch,
@@ -11200,7 +11862,7 @@ var RedisBrowser = ({
       rootRef,
       onFullScreenClick
     }
-  ) }) }) }) }) });
+  ) }) }) }) }) }) });
 };
 var RedisBrowserRoot = ({
   hideTabs,
@@ -11222,7 +11884,7 @@ var RedisBrowserRoot = ({
         className: `ups-db ${theme === "dark" ? "dark" : ""}`,
         style: { height: "100%" },
         ref: rootRef,
-        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col overflow-hidden rounded-[14px] border-[4px] border-zinc-300 text-zinc-700", children: [
+        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col rounded-[14px] border-[4px] border-zinc-300 text-zinc-700", children: [
           !hideTabs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserTabs, { onFullScreenClick }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserInstances, { tabType, allowSearch })
         ] })