@upstash/react-redis-browser 0.2.12 → 0.2.13-canary

package/dist/index.js

@@ -193,7 +193,10 @@ var queryClient = new (0, _reactquery.QueryClient)({
     }
   },
   queryCache: new (0, _reactquery.QueryCache)({
-    onError: handleError
+    onError: (error, query) => {
+      if (_optionalChain([query, 'access', _4 => _4.meta, 'optionalAccess', _5 => _5.hideToast])) return;
+      handleError(error);
+    }
   }),
   mutationCache: new (0, _reactquery.MutationCache)({
     onError: handleError
@@ -263,7 +266,7 @@ var DatabrowserProvider = ({
           removeItem: () => {
           }
         },
-        version: 5,
+        version: 6,
         migrate: (originalState, version) => {
           const state = originalState;
           if (version <= 1) {
@@ -279,6 +282,19 @@ var DatabrowserProvider = ({
               ];
             });
           }
+          if (version <= 5) {
+            state.tabs = state.tabs.map(([id, data]) => {
+              const oldData = data;
+              return [
+                id,
+                {
+                  ...data,
+                  valuesSearch: _nullishCoalesce(oldData.valuesSearch, () => ( { index: "", query: "" })),
+                  isValuesSearchSelected: _nullishCoalesce(oldData.isValuesSearchSelected, () => ( false))
+                }
+              ];
+            });
+          }
           return state;
         }
       })
@@ -310,6 +326,8 @@ var storeCreator = (set, get) => ({
       id,
       selectedKeys: [],
       search: { key: "", type: void 0 },
+      valuesSearch: { index: "", query: "" },
+      isValuesSearchSelected: false,
       pinned: false
     };
     set((old) => ({
@@ -402,7 +420,7 @@ var storeCreator = (set, get) => ({
     set({ selectedTab: id });
   },
   getSelectedKeys: (tabId) => {
-    return _nullishCoalesce(_optionalChain([get, 'call', _4 => _4(), 'access', _5 => _5.tabs, 'access', _6 => _6.find, 'call', _7 => _7(([id]) => id === tabId), 'optionalAccess', _8 => _8[1], 'optionalAccess', _9 => _9.selectedKeys]), () => ( []));
+    return _nullishCoalesce(_optionalChain([get, 'call', _6 => _6(), 'access', _7 => _7.tabs, 'access', _8 => _8.find, 'call', _9 => _9(([id]) => id === tabId), 'optionalAccess', _10 => _10[1], 'optionalAccess', _11 => _11.selectedKeys]), () => ( []));
   },
   setSelectedKey: (tabId, key) => {
     get().setSelectedKeys(tabId, key ? [key] : []);
@@ -469,6 +487,58 @@ var storeCreator = (set, get) => ({
       return { ...old, tabs: newTabs };
     });
   },
+  setValuesSearch: (tabId, valuesSearch) => {
+    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 }];
+      return { ...old, tabs: newTabs };
+    });
+  },
+  setValuesSearchIndex: (tabId, index) => {
+    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, index }
+        }
+      ];
+      return { ...old, tabs: newTabs };
+    });
+  },
+  setValuesSearchQuery: (tabId, query) => {
+    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, query }
+        }
+      ];
+      return { ...old, tabs: newTabs };
+    });
+  },
+  setIsValuesSearchSelected: (tabId, isSelected) => {
+    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, isValuesSearchSelected: isSelected }];
+      return { ...old, tabs: newTabs };
+    });
+  },
   searchHistory: [],
   addSearchHistory: (key) => {
     set((old) => ({ ...old, searchHistory: [key, ...old.searchHistory] }));
@@ -498,27 +568,37 @@ var useTab = () => {
     setSelectedListItem,
     setSearch,
     setSearchKey,
-    setSearchType
+    setSearchType,
+    setValuesSearch,
+    setValuesSearchIndex,
+    setValuesSearchQuery,
+    setIsValuesSearchSelected
   } = useDatabrowserStore();
   const tabId = useTabId();
-  const tabData = _react.useMemo.call(void 0, () => _optionalChain([tabs, 'access', _10 => _10.find, 'call', _11 => _11(([id]) => id === tabId), 'optionalAccess', _12 => _12[1]]), [tabs, tabId]);
+  const tabData = _react.useMemo.call(void 0, () => _optionalChain([tabs, 'access', _12 => _12.find, 'call', _13 => _13(([id]) => id === tabId), 'optionalAccess', _14 => _14[1]]), [tabs, tabId]);
   if (!selectedTab) throw new Error("selectedTab is undefined when using useTab()");
   if (!tabData) throw new Error("tabData is undefined when using useTab()");
   return _react.useMemo.call(void 0, 
     () => ({
       active: selectedTab === tabId,
-      selectedKey: _optionalChain([tabData, 'access', _13 => _13.selectedKeys, 'optionalAccess', _14 => _14[0]]),
+      selectedKey: _optionalChain([tabData, 'access', _15 => _15.selectedKeys, 'optionalAccess', _16 => _16[0]]),
       // Backwards compatibility - first selected key
       selectedKeys: _nullishCoalesce(tabData.selectedKeys, () => ( [])),
       selectedListItem: tabData.selectedListItem,
       search: tabData.search,
+      valuesSearch: tabData.valuesSearch,
+      isValuesSearchSelected: tabData.isValuesSearchSelected,
       pinned: tabData.pinned,
       setSelectedKey: (key) => setSelectedKey(tabId, key),
       setSelectedKeys: (keys) => setSelectedKeys(tabId, keys),
       setSelectedListItem: (item) => setSelectedListItem(tabId, item),
       setSearch: (search) => setSearch(tabId, search),
       setSearchKey: (key) => setSearchKey(tabId, key),
-      setSearchType: (type) => setSearchType(tabId, type)
+      setSearchType: (type) => setSearchType(tabId, type),
+      setValuesSearch: (search) => setValuesSearch(tabId, search),
+      setValuesSearchIndex: (index) => setValuesSearchIndex(tabId, index),
+      setValuesSearchQuery: (query) => setValuesSearchQuery(tabId, query),
+      setIsValuesSearchSelected: (isSelected) => setIsValuesSearchSelected(tabId, isSelected)
     }),
     [selectedTab, tabs, tabId]
   );
@@ -603,15 +683,15 @@ var getGroupRecursive = (classParts, classPartObject) => {
     return void 0;
   }
   const classRest = classParts.join(CLASS_PART_SEPARATOR);
-  return _optionalChain([classPartObject, 'access', _15 => _15.validators, 'access', _16 => _16.find, 'call', _17 => _17(({
+  return _optionalChain([classPartObject, 'access', _17 => _17.validators, 'access', _18 => _18.find, 'call', _19 => _19(({
     validator
-  }) => validator(classRest)), 'optionalAccess', _18 => _18.classGroupId]);
+  }) => validator(classRest)), 'optionalAccess', _20 => _20.classGroupId]);
 };
 var arbitraryPropertyRegex = /^\[(.+)\]$/;
 var getGroupIdForArbitraryProperty = (className) => {
   if (arbitraryPropertyRegex.test(className)) {
     const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
-    const property = _optionalChain([arbitraryPropertyClassName, 'optionalAccess', _19 => _19.substring, 'call', _20 => _20(0, arbitraryPropertyClassName.indexOf(":"))]);
+    const property = _optionalChain([arbitraryPropertyClassName, 'optionalAccess', _21 => _21.substring, 'call', _22 => _22(0, arbitraryPropertyClassName.indexOf(":"))]);
     if (property) {
       return "arbitrary.." + property;
     }
@@ -3026,9 +3106,14 @@ var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function formatNumber(value) {
-  const intl = new Intl.NumberFormat("en-US");
-  return intl.format(value);
+function parseJSObjectLiteral(value) {
+  try {
+    let jsonified = value.replaceAll(/([,{]\s*)(\$?[A-Z_a-z]\w*)\s*:/g, '$1"$2":');
+    jsonified = jsonified.replaceAll(/,\s*([\]}])/g, "$1");
+    return JSON.parse(jsonified);
+  } catch (e3) {
+    return;
+  }
 }
 var units = {
   year: 24 * 60 * 60 * 1e3 * 365,
@@ -3062,8 +3147,8 @@ var _reactportal = require('@radix-ui/react-portal');
 
 // src/components/ui/toast.tsx
 
-var _iconsreact = require('@tabler/icons-react');
 var _reacttoast = require('@radix-ui/react-toast'); var ToastPrimitives = _interopRequireWildcard(_reacttoast);
+var _iconsreact = require('@tabler/icons-react');
 
 // node_modules/class-variance-authority/node_modules/clsx/dist/clsx.mjs
 function r2(e) {
@@ -3242,15 +3327,39 @@ var useFetchKeyType = (key) => {
   });
 };
 
+// src/components/databrowser/hooks/use-fetch-search-index.tsx
+
+var FETCH_SEARCH_INDEX_QUERY_KEY = "fetch-search-index";
+var useFetchSearchIndex = (indexName) => {
+  const { redisNoPipeline: redis } = useRedis();
+  return _reactquery.useQuery.call(void 0, {
+    queryKey: [FETCH_SEARCH_INDEX_QUERY_KEY, indexName],
+    queryFn: async () => {
+      if (!indexName) return;
+      const result = await redis.search.index(indexName).describe();
+      return result;
+    },
+    enabled: Boolean(indexName)
+  });
+};
+
 // src/components/databrowser/hooks/use-keys.tsx
 
 var KeysContext = _react.createContext.call(void 0, void 0);
 var FETCH_KEYS_QUERY_KEY = "use-fetch-keys";
 var SCAN_COUNTS = [100, 300, 500];
 var KeysProvider = ({ children }) => {
-  const { active, search } = useTab();
+  const { active, search, valuesSearch, isValuesSearchSelected } = useTab();
+  const { data: searchIndexDetails, isLoading: isIndexDetailsLoading } = useFetchSearchIndex(
+    valuesSearch.index
+  );
   const { redisNoPipeline: redis } = useRedis();
-  const performScan = async (count2, cursor) => {
+  const parsedValueQuery = parseJSObjectLiteral(valuesSearch.query);
+  const isQueryEnabled = active && (isValuesSearchSelected ? Boolean(valuesSearch.index) && Boolean(searchIndexDetails) : true);
+  const redisKeyScan = async ({
+    count: count2,
+    cursor
+  }) => {
     const args = [cursor];
     if (search.key) {
       args.push("MATCH", search.key);
@@ -3260,7 +3369,46 @@ var KeysProvider = ({ children }) => {
     }
     args.push("COUNT", count2.toString());
     if (!search.type) args.push("WITHTYPE");
-    return await redis.exec(["SCAN", ...args]);
+    const [newCursor, values] = await redis.exec(["SCAN", ...args]);
+    const keys2 = [];
+    let index = 0;
+    while (true) {
+      if (search.type) {
+        if (index >= values.length) break;
+        keys2.push({ key: values[index], type: search.type });
+        index += 1;
+      } else {
+        if (index + 1 >= values.length) break;
+        keys2.push({ key: values[index], type: values[index + 1] });
+        index += 2;
+      }
+    }
+    return { cursor: newCursor, keys: keys2 };
+  };
+  const redisValueScan = async ({
+    count: count2,
+    cursor
+  }) => {
+    if (!searchIndexDetails) throw new Error("Attempted search while loading the search index");
+    const offset = Number.parseInt(cursor, 10) || 0;
+    const result = await redis.search.index(valuesSearch.index).query({
+      filter: _nullishCoalesce(parsedValueQuery, () => ( {})),
+      limit: count2,
+      offset,
+      select: {}
+    });
+    const keys2 = result.map((doc) => ({
+      key: doc.key,
+      type: searchIndexDetails.dataType
+    }));
+    const hasMore = keys2.length >= count2;
+    const nextCursor = hasMore ? String(offset + keys2.length) : "0";
+    return { cursor: nextCursor, keys: keys2 };
+  };
+  const performScan = async (count2, cursor) => {
+    const scanFunction = isValuesSearchSelected ? redisValueScan : redisKeyScan;
+    const result = await scanFunction({ count: count2, cursor });
+    return [result.cursor, result.keys];
   };
   const scanUntilAvailable = async (cursor) => {
     let i = 0;
@@ -3274,25 +3422,12 @@ var KeysProvider = ({ children }) => {
     }
   };
   const query = _reactquery.useInfiniteQuery.call(void 0, {
-    queryKey: [FETCH_KEYS_QUERY_KEY, search],
-    // Only fetch when tab is active
-    enabled: active,
+    queryKey: [FETCH_KEYS_QUERY_KEY, search, valuesSearch, isValuesSearchSelected],
+    enabled: isQueryEnabled,
     initialPageParam: "0",
     queryFn: async ({ pageParam: lastCursor }) => {
       const [cursor, values] = await scanUntilAvailable(lastCursor);
-      const keys2 = [];
-      let index = 0;
-      while (true) {
-        if (search.type) {
-          if (index >= values.length) break;
-          keys2.push([values[index], search.type]);
-          index += 1;
-        } else {
-          if (index + 1 >= values.length) break;
-          keys2.push([values[index], values[index + 1]]);
-          index += 2;
-        }
-      }
+      const keys2 = values.map((value) => [value.key, value.type]);
       for (const [key, type] of keys2) {
         queryClient.setQueryData([FETCH_KEY_TYPE_QUERY_KEY, key], type);
       }
@@ -3302,12 +3437,15 @@ var KeysProvider = ({ children }) => {
         hasNextPage: cursor !== "0"
       };
     },
+    meta: {
+      hideToast: true
+    },
     select: (data) => data,
     getNextPageParam: ({ cursor }) => cursor,
     refetchOnMount: false
   });
   const keys = _react.useMemo.call(void 0, () => {
-    const keys2 = _nullishCoalesce(_optionalChain([query, 'access', _21 => _21.data, 'optionalAccess', _22 => _22.pages, 'access', _23 => _23.flatMap, 'call', _24 => _24((page) => page.keys)]), () => ( []));
+    const keys2 = _nullishCoalesce(_optionalChain([query, 'access', _23 => _23.data, 'optionalAccess', _24 => _24.pages, 'access', _25 => _25.flatMap, 'call', _26 => _26((page) => page.keys)]), () => ( []));
     const keysSet = /* @__PURE__ */ new Set();
     const dedupedKeys = [];
     for (const key of keys2) {
@@ -3322,7 +3460,10 @@ var KeysProvider = ({ children }) => {
     {
       value: {
         keys,
-        query
+        query: {
+          ...query,
+          isLoading: query.isLoading || isIndexDetailsLoading
+        }
       },
       children
     }
@@ -3338,7 +3479,7 @@ var useKeys = () => {
 var useKeyType = (key) => {
   const { keys } = useKeys();
   const keyTuple = _react.useMemo.call(void 0, () => keys.find(([k, _]) => k === key), [keys, key]);
-  return _optionalChain([keyTuple, 'optionalAccess', _25 => _25[1]]);
+  return _optionalChain([keyTuple, 'optionalAccess', _27 => _27[1]]);
 };
 
 // src/components/databrowser/components/display/display-list.tsx
@@ -3350,24 +3491,24 @@ var useKeyType = (key) => {
 var _reactslot = require('@radix-ui/react-slot');
 
 var buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center rounded-lg text-sm shadow-[0_1px_1px_0_rgba(0,0,0,0.10)]ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: "bg-white text-black border shadow-sm border-zinc-300 hover:bg-white/70",
+        default: "bg-white text-black border  border-zinc-300 hover:bg-white/70",
         destructive: "bg-red-500 text-zinc-50 hover:bg-red-500/90",
-        outline: "border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900",
-        primary: "bg-emerald-500 text-white shadow-sm hover:bg-emerald-600",
+        outline: "border border-zinc-300 bg-white hover:bg-zinc-100 hover:text-zinc-900",
+        primary: "bg-emerald-500 text-white  hover:bg-emerald-600",
         secondary: "bg-zinc-100 text-zinc-900 hover:bg-zinc-100/80",
         ghost: "hover:bg-black/10",
         link: "text-zinc-900 underline-offset-4 hover:underline"
       },
       size: {
         default: "h-8 px-4 py-2",
-        sm: "px-2 h-7 rounded-md",
+        sm: "px-2 h-[26px] rounded-md",
         lg: "h-10 px-8 rounded-md",
         icon: "h-8 w-8",
-        "icon-sm": "h-7 w-7",
+        "icon-sm": "h-[26px] w-[26px] rounded-md",
         "icon-xs": "h-5 w-5"
       }
     },
@@ -3387,37 +3528,6 @@ Button.displayName = "Button";
 
 // src/components/databrowser/hooks/use-add-key.ts
 
-
-// src/components/databrowser/components/sidebar/db-size.tsx
-
-
-// src/components/ui/skeleton.tsx
-
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse rounded-md bg-zinc-900/10", className), ...props });
-}
-
-// src/components/databrowser/components/sidebar/db-size.tsx
-
-var FETCH_DB_SIZE_QUERY_KEY = "fetch-db-size";
-var DisplayDbSize = () => {
-  const { redis } = useRedis();
-  const { data: keyCount } = _reactquery.useQuery.call(void 0, {
-    queryKey: [FETCH_DB_SIZE_QUERY_KEY],
-    queryFn: async () => {
-      return await redis.dbsize();
-    }
-  });
-  if (keyCount === void 0) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-center gap-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "h-5 w-10 rounded" }) });
-  }
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "", children: [
-    formatNumber(keyCount),
-    " Keys"
-  ] });
-};
-
-// src/components/databrowser/hooks/use-add-key.ts
 var useAddKey = () => {
   const { redis } = useRedis();
   const mutation = _reactquery.useMutation.call(void 0, {
@@ -3467,9 +3577,6 @@ var useAddKey = () => {
       }
     },
     onSuccess: (_, { key, type }) => {
-      queryClient.invalidateQueries({
-        queryKey: [FETCH_DB_SIZE_QUERY_KEY]
-      });
       queryClient.setQueriesData(
         {
           queryKey: [FETCH_KEYS_QUERY_KEY]
@@ -3582,7 +3689,7 @@ var useFetchListItems = ({ dataKey, type }) => {
         // +1 since first message is the last one
         LIST_DISPLAY_PAGE_SIZE + 1
       );
-      const lastMessageId = messages.length > 0 ? _optionalChain([messages, 'access', _26 => _26.at, 'call', _27 => _27(-1), 'optionalAccess', _28 => _28[0]]) : void 0;
+      const lastMessageId = messages.length > 0 ? _optionalChain([messages, 'access', _28 => _28.at, 'call', _29 => _29(-1), 'optionalAccess', _30 => _30[0]]) : void 0;
       return {
         cursor: messages.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : lastMessageId,
         keys: messages.map(([id, fields]) => ({
@@ -3677,9 +3784,6 @@ var useDeleteKey = () => {
     },
     onSuccess: (_, key) => {
       deleteKeyCache(key);
-      queryClient.invalidateQueries({
-        queryKey: [FETCH_DB_SIZE_QUERY_KEY]
-      });
     }
   });
   return deleteKey;
@@ -3746,7 +3850,7 @@ var useEditListItem = () => {
         }
         case "stream": {
           if (!isNew || !newKey) throw new Error("Stream data type is not mutable");
-          const opts = transformArray(_nullishCoalesce(_optionalChain([newValue, 'optionalAccess', _29 => _29.split, 'call', _30 => _30("\n")]), () => ( []))).map(
+          const opts = transformArray(_nullishCoalesce(_optionalChain([newValue, 'optionalAccess', _31 => _31.split, 'call', _32 => _32("\n")]), () => ( []))).map(
             ({ key, value }) => [key, value]
           );
           pipe.xadd(dataKey, newKey, Object.fromEntries(opts));
@@ -3774,6 +3878,12 @@ var useEditListItem = () => {
 
 
 
+// src/components/ui/skeleton.tsx
+
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse rounded-md bg-zinc-900/10", className), ...props });
+}
+
 // src/components/databrowser/components/display/header-badges.tsx
 var _bytes = require('bytes'); var _bytes2 = _interopRequireDefault(_bytes);
 
@@ -3801,6 +3911,9 @@ var useFetchKeyLength = ({ dataKey, type }) => {
         case "stream": {
           return await redis.xlen(dataKey);
         }
+        case "search": {
+          return null;
+        }
       }
       return null;
     }
@@ -3828,7 +3941,7 @@ var LengthBadge = ({
   content
 }) => {
   const { data, isLoading } = useFetchKeyLength({ dataKey, type });
-  const length = _nullishCoalesce(_optionalChain([content, 'optionalAccess', _31 => _31.length]), () => ( data));
+  const length = _nullishCoalesce(_optionalChain([content, 'optionalAccess', _33 => _33.length]), () => ( data));
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Badge, { label: "Length:", children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : length });
 };
 var SizeBadge = ({ dataKey }) => {
@@ -3849,8 +3962,8 @@ var HeaderTTLBadge = ({ dataKey }) => {
     }
   );
 };
-var Badge = ({ children, label }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-6 items-center gap-0.5 rounded-md bg-white px-2 text-xs text-zinc-700 dark:bg-zinc-200", children: [
-  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-zinc-500 dark:text-zinc-600", children: label }),
+var Badge = ({ children, label }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-[26px] items-center gap-0.5 whitespace-nowrap rounded-md bg-zinc-200 px-2 text-xs text-zinc-700 dark:bg-zinc-200", children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-zinc-500 dark:text-zinc-500", children: label }),
   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium", children })
 ] });
 
@@ -3912,7 +4025,7 @@ var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) =
   {
     ref,
     className: cn(
-      "relative flex h-8 w-full items-center justify-between rounded-md border border-zinc-200 bg-white px-3 py-2  text-sm ring-offset-white placeholder:text-zinc-500 focus:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
+      "relative flex h-8 w-full items-center justify-between rounded-lg border border-zinc-200 bg-white px-3 py-2 font-medium text-zinc-950 text-sm ring-offset-white placeholder:text-zinc-500 focus:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
       className
     ),
     ...props,
@@ -3986,7 +4099,7 @@ var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /
     ),
     ...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, SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      /* @__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",
@@ -4005,7 +4118,7 @@ var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /
             }
           )
         }
-      ) }) }) }),
+      ) }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.ItemText, { children })
     ]
   }
@@ -4180,9 +4293,9 @@ var TTLBadge = ({
     }, 1e3);
     return () => clearInterval(interval);
   }, [expireAt]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Badge, { label, children: ttl === void 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TTLPopover, { ttl, setTTL, isPending, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-[2px]", children: [
-    ttl === TTL_INFINITE ? "Forever" : formatTime(ttl),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconChevronDown, { className: "mt-[1px] text-zinc-400", size: 12 })
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Badge, { label, children: ttl === void 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TTLPopover, { ttl, setTTL, isPending, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-[2px]", children: [
+    ttl === TTL_INFINITE ? "No" : formatTime(ttl),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconChevronDown, { className: "shrink-0 text-zinc-400", size: 16 })
   ] }) }) });
 };
 
@@ -4252,9 +4365,9 @@ var useSetTTL = () => {
 
 // src/components/databrowser/components/item-context-menu.tsx
 
-
 var _reactcontextmenu = require('@radix-ui/react-context-menu'); var ContextMenuPrimitive = _interopRequireWildcard(_reactcontextmenu);
 
+
 // src/components/ui/context-menu.tsx
 
 
@@ -4466,7 +4579,8 @@ function DeleteAlertDialog({
       /* @__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: [
-          "Are you sure you want to delete ",
+          "Are you sure you want to delete",
+          " ",
           isPlural ? `these ${count2} ${deletionType}s` : `this ${deletionType}`,
           "?",
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}),
@@ -4512,7 +4626,7 @@ var ItemContextMenu = ({
             editItem({
               type,
               dataKey,
-              itemKey: _optionalChain([data, 'optionalAccess', _32 => _32.key]),
+              itemKey: _optionalChain([data, 'optionalAccess', _34 => _34.key]),
               // For deletion
               newKey: void 0
             });
@@ -4547,7 +4661,7 @@ var ItemContextMenu = ({
           {
             onClick: () => {
               if (!data) return;
-              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _33 => _33.key]));
+              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _35 => _35.key]));
               toast({
                 description: "Key copied to clipboard"
               });
@@ -4559,11 +4673,11 @@ var ItemContextMenu = ({
             ]
           }
         ),
-        _optionalChain([data, 'optionalAccess', _34 => _34.value]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _optionalChain([data, 'optionalAccess', _36 => _36.value]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           ContextMenuItem,
           {
             onClick: () => {
-              navigator.clipboard.writeText(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _35 => _35.value]), () => ( "")));
+              navigator.clipboard.writeText(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _37 => _37.value]), () => ( "")));
               toast({
                 description: "Value copied to clipboard"
               });
@@ -4620,33 +4734,38 @@ var ItemContextMenu = ({
 
 var _reactscrollarea = require('@radix-ui/react-scroll-area'); var ScrollAreaPrimitive = _interopRequireWildcard(_reactscrollarea);
 
-var ScrollArea = React9.forwardRef(({ className, children, onScroll, disableRoundedInherit = false, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-  ScrollAreaPrimitive.Root,
-  {
-    ref,
-    className: cn("relative overflow-hidden", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        ScrollAreaPrimitive.Viewport,
-        {
-          onScroll,
-          className: cn("h-full w-full [&>div]:!block", !disableRoundedInherit && "rounded-[inherit]"),
-          children
-        }
-      ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollBar, {}),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollAreaPrimitive.Corner, {})
-    ]
-  }
-));
+var ScrollArea = React9.forwardRef(
+  ({ className, scrollBarClassName, children, onScroll, disableRoundedInherit = false, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    ScrollAreaPrimitive.Root,
+    {
+      ref,
+      className: cn("relative overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          ScrollAreaPrimitive.Viewport,
+          {
+            onScroll,
+            className: cn(
+              "h-full w-full [&>div]:!block",
+              !disableRoundedInherit && "rounded-[inherit]"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollBar, { className: scrollBarClassName }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  )
+);
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 var ScrollBar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
     orientation: "vertical",
-    className: cn("flex h-full w-2 touch-none select-none transition-colors", className),
+    className: cn("mr-1 flex h-full w-2 touch-none select-none transition-colors", className),
     ...props,
     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       ScrollAreaPrimitive.ScrollAreaThumb,
@@ -4697,10 +4816,7 @@ var InfiniteScroll = ({
       type: "always",
       onScroll: handleScroll,
       ...props,
-      className: cn(
-        "block h-full w-full overflow-visible rounded-lg border border-zinc-200 bg-white p-1 pr-3 transition-all",
-        props.className
-      ),
+      className: cn("block h-full w-full overflow-visible transition-all", props.className),
       ref: scrollRef,
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: contentRef, children: [
         children,
@@ -4744,7 +4860,16 @@ var SimpleTooltip = ({
 };
 
 // src/types/index.ts
-var DATA_TYPES = ["string", "list", "hash", "set", "zset", "json", "stream"];
+var DATA_TYPES = [
+  "string",
+  "list",
+  "hash",
+  "set",
+  "zset",
+  "json",
+  "stream",
+  "search"
+];
 var DATA_TYPE_NAMES = {
   string: "String",
   list: "List",
@@ -4752,7 +4877,8 @@ var DATA_TYPE_NAMES = {
   set: "Set",
   zset: "Sorted Set",
   json: "JSON",
-  stream: "Stream"
+  stream: "Stream",
+  search: "Search Index"
 };
 
 // src/components/databrowser/components/type-tag.tsx
@@ -4765,6 +4891,7 @@ var DATA_TYPE_NAMES = {
 
 
 
+
 var iconsMap = {
   string: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconQuote, { size: 15, stroke: 1.2 }),
   set: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLayersIntersect, { size: 15, stroke: 1.2 }),
@@ -4772,7 +4899,8 @@ var iconsMap = {
   json: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCodeDots, { size: 15, stroke: 1.2 }),
   zset: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconArrowsSort, { size: 15, stroke: 1.2 }),
   list: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconList, { size: 15, stroke: 1.2 }),
-  stream: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconList, { size: 15, stroke: 1.2 })
+  stream: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconList, { size: 15, stroke: 1.2 }),
+  search: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { size: 15, stroke: 1.2 })
 };
 var tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-center", {
   variants: {
@@ -4783,11 +4911,12 @@ var tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-cent
       zset: "bg-pink-200 text-pink-800",
       json: "bg-purple-200 text-purple-800",
       list: "bg-orange-200 text-orange-800",
-      stream: "bg-green-200 text-green-800"
+      stream: "bg-green-200 text-green-800",
+      search: "bg-rose-200 text-rose-800"
     },
     type: {
       icon: "size-5",
-      badge: "h-6 px-2 uppercase whitespace-nowrap text-xs font-medium leading-none tracking-wide"
+      badge: "h-[26px] px-2 uppercase whitespace-nowrap text-xs font-medium leading-none tracking-wide"
     }
   },
   defaultVariants: {
@@ -4926,7 +5055,13 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 function KeyActions({ dataKey, content }) {
   const { mutateAsync: deleteKey } = useDeleteKey();
   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, { className: "size-4 text-zinc-500 dark:text-zinc-600" }) }) }),
+    /* @__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,
+      {
+        className: "size-4 text-zinc-500 dark:text-zinc-600",
+        fill: "rgb(var(--color-zinc-500))"
+      }
+    ) }) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DropdownMenuContent, { className: "", align: "end", children: [
       content && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         DropdownMenuItem,
@@ -4979,15 +5114,15 @@ var DisplayHeader = ({
   const handleAddItem = () => {
     setSelectedListItem({ key: type === "stream" ? "*" : "", isNew: true });
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-lg bg-zinc-100", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-h-10 items-center justify-between gap-4", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "grow truncate text-base", 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-semibold", children: dataKey }) }),
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-lg", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-[26px] items-center justify-between gap-4", children: [
+      /* @__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" && /* @__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" }) }) }),
+        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.jsxs.call(void 0, "div", { className: "flex h-10 flex-wrap items-center gap-1.5", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center gap-1.5 overflow-scroll", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: type, type: "badge" }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SizeBadge, { dataKey }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LengthBadge, { dataKey, type, content }),
@@ -5059,7 +5194,7 @@ var useSetHashTTL = () => {
 var HashFieldTTLBadge = ({ dataKey, field }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields: [field] });
   const { mutate: setTTL, isPending } = useSetHashTTL();
-  const expireAt = _optionalChain([data, 'optionalAccess', _36 => _36[field]]);
+  const expireAt = _optionalChain([data, 'optionalAccess', _38 => _38[field]]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     TTLBadge,
     {
@@ -5156,7 +5291,7 @@ var MonacoEditor = ({
     if (!active || !monaco || !editorRef.current) {
       return;
     }
-    _optionalChain([monaco, 'optionalAccess', _37 => _37.editor, 'access', _38 => _38.setModelLanguage, 'call', _39 => _39(editorRef.current.getModel(), language)]);
+    _optionalChain([monaco, 'optionalAccess', _39 => _39.editor, 'access', _40 => _40.setModelLanguage, 'call', _41 => _41(editorRef.current.getModel(), language)]);
   }, [monaco, language, active]);
   const editor = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _react2.Editor,
@@ -5297,7 +5432,7 @@ var checkIsValidJSON = (value) => {
   try {
     JSON.parse(value);
     return true;
-  } catch (e3) {
+  } catch (e4) {
     return false;
   }
 };
@@ -5321,7 +5456,7 @@ var ListEditForm = ({
     dataKey
   });
   const findValue = () => {
-    for (const page of _nullishCoalesce(_optionalChain([query, 'access', _40 => _40.data, 'optionalAccess', _41 => _41.pages]), () => ( []))) {
+    for (const page of _nullishCoalesce(_optionalChain([query, 'access', _42 => _42.data, 'optionalAccess', _43 => _43.pages]), () => ( []))) {
       const item = page.keys.find((item2) => item2.key === itemKey);
       if (item && "value" in item) return item.value;
     }
@@ -5467,7 +5602,7 @@ var HashFieldTTLInfo = ({
   fields
 }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields });
-  const expireAt = _optionalChain([data, 'optionalAccess', _42 => _42[field]]);
+  const expireAt = _optionalChain([data, 'optionalAccess', _44 => _44[field]]);
   const [ttl, setTTL] = _react.useState.call(void 0, () => calculateTTL(expireAt));
   _react.useEffect.call(void 0, () => {
     setTTL(calculateTTL(expireAt));
@@ -5495,7 +5630,7 @@ var ListDisplay = ({ dataKey, type }) => {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2", 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, 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 }) }) }) }) }) })
+    /* @__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 }) }) }) }) }) })
   ] });
 };
 var ListItems = ({
@@ -5504,7 +5639,7 @@ var ListItems = ({
   dataKey
 }) => {
   const { setSelectedListItem } = useTab();
-  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _43 => _43.data, 'optionalAccess', _44 => _44.pages, 'access', _45 => _45.flatMap, 'call', _46 => _46((page) => page.keys)]), () => ( [])), [query.data]);
+  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _45 => _45.data, 'optionalAccess', _46 => _46.pages, 'access', _47 => _47.flatMap, 'call', _48 => _48((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, 
@@ -5516,7 +5651,7 @@ var ListItems = ({
         setSelectedListItem({ key });
       },
       className: cn(
-        "h-10 border-b border-b-zinc-100 transition-colors hover:bg-zinc-100 dark:border-b-zinc-200 dark:hover:bg-zinc-200"
+        "h-9 border-b border-b-zinc-100 transition-colors hover:bg-zinc-100 dark:border-b-zinc-200 dark:hover:bg-zinc-200"
       ),
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5580,6 +5715,17 @@ var ListItems = ({
   )) });
 };
 
+// src/components/databrowser/components/display/display-search.tsx
+
+var SearchDisplay = ({ dataKey, type }) => {
+  const { data, isLoading } = useFetchSearchIndex(dataKey);
+  const content = data ? JSON.stringify(data, null, 2) : void 0;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full w-full flex-col gap-2", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayHeader, { dataKey, type, content }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full grow flex-col gap-2 rounded-md bg-zinc-100", children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoadingText: "", isLoading: true }) : 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.jsx.call(void 0, "div", { className: "grow overflow-auto rounded-md border border-zinc-300 bg-white p-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "pre", { className: "whitespace-pre-wrap break-words font-mono text-sm", children: JSON.stringify(data, null, 2) }) }) })
+  ] });
+};
+
 // src/components/databrowser/components/display/display-simple.tsx
 
 
@@ -5635,7 +5781,55 @@ var DataDisplay = () => {
   const { selectedKey } = useTab();
   const { query } = useKeys();
   const type = useKeyType(selectedKey);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full p-4", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? query.isLoading ? /* @__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: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: type === "string" || type === "json" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full rounded-xl bg-zinc-100 p-5", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? query.isLoading ? /* @__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: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: type === "string" || type === "json" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : type === "search" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
+};
+
+// src/components/ui/segmented.tsx
+
+var Segmented = ({
+  options,
+  value,
+  onChange
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex w-fit gap-[2px] rounded-lg bg-zinc-200 p-[2px] text-sm", children: options.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "button",
+    {
+      className: cn(
+        "h-7 rounded-md px-3 transition-all",
+        value === option.key ? "bg-white text-zinc-950" : "text-zinc-700"
+      ),
+      onClick: () => {
+        _optionalChain([onChange, 'optionalCall', _49 => _49(option.key)]);
+      },
+      children: option.label
+    },
+    option.key
+  )) });
+};
+
+// src/components/databrowser/hooks/use-fetch-search-indexes.tsx
+
+var FETCH_SEARCH_INDEXES_QUERY_KEY = "fetch-search-indexes";
+var useFetchSearchIndexes = (match) => {
+  const { redisNoPipeline: redis } = useRedis();
+  return _reactquery.useQuery.call(void 0, {
+    queryKey: [FETCH_SEARCH_INDEXES_QUERY_KEY],
+    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;
+    }
+  });
 };
 
 // src/components/databrowser/components/add-key-modal.tsx
@@ -5643,6 +5837,7 @@ var DataDisplay = () => {
 var _reactdialog = require('@radix-ui/react-dialog'); var DialogPrimitive = _interopRequireWildcard(_reactdialog);
 
 
+
 // src/components/ui/dialog.tsx
 
 
@@ -5746,7 +5941,6 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/databrowser/components/add-key-modal.tsx
 
-
 function AddKeyModal() {
   const { setSelectedKey } = useTab();
   const [open, setOpen] = _react.useState.call(void 0, false);
@@ -5762,7 +5956,7 @@ function AddKeyModal() {
     setSelectedKey(key);
     setOpen(false);
     setTimeout(() => {
-      _optionalChain([window, 'access', _47 => _47.document, 'access', _48 => _48.querySelector, 'call', _49 => _49(`[data-key="${key}"]`), 'optionalAccess', _50 => _50.scrollIntoView, 'call', _51 => _51({
+      _optionalChain([window, 'access', _50 => _50.document, 'access', _51 => _51.querySelector, 'call', _52 => _52(`[data-key="${key}"]`), 'optionalAccess', _53 => _53.scrollIntoView, 'call', _54 => _54({
         behavior: "smooth",
         block: "start",
         inline: "nearest"
@@ -5778,7 +5972,18 @@ function AddKeyModal() {
         setOpen(open2);
       },
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Add key", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "primary", size: "icon-sm", "data-testid": "add-key-button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "size-4" }) }) }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Add key", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          Button,
+          {
+            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",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "size-5" }),
+              "Key"
+            ]
+          }
+        ) }) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogContent, { className: "max-w-[400px]", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTitle, { children: "Create new key" }) }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "sr-only", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactdialog.DialogDescription, { children: "Create new key" }) }),
@@ -5791,7 +5996,7 @@ function AddKeyModal() {
                   name: "type",
                   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 w-auto pl-[3px] 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: DATA_TYPES.map((type) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: type, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: type, type: "badge" }) }, type)) }) })
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectGroup, { children: DATA_TYPES.filter((t) => t !== "search").map((type) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: type, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: type, type: "badge" }) }, type)) }) })
                   ] })
                 }
               ),
@@ -5807,7 +6012,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', _52 => _52.errors, 'access', _53 => _53.key, 'optionalAccess', _54 => _54.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', _55 => _55.errors, 'access', _56 => _56.key, 'optionalAccess', _57 => _57.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, 
@@ -5830,219 +6035,35 @@ function AddKeyModal() {
   );
 }
 
-// src/components/databrowser/components/sidebar/empty.tsx
-
-var Empty = () => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full w-full items-center justify-center rounded-md border bg-white px-4 py-6 text-center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-5", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-md font-medium", children: "Data on a break" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-balance text-center", children: '"Quick, lure it back with some CLI magic!"' })
-  ] }) });
-};
+// src/components/databrowser/components/sidebar/reload-button.tsx
 
-// src/components/databrowser/components/sidebar/keys-list.tsx
 
 
-// src/components/databrowser/components/sidebar-context-menu.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" })
+    }
+  ) }) });
+};
 
-
-
-
-var SidebarContextMenu = ({ children }) => {
-  const { mutate: deleteKey } = useDeleteKey();
-  const [isAlertOpen, setAlertOpen] = _react.useState.call(void 0, false);
-  const [contextKeys, setContextKeys] = _react.useState.call(void 0, []);
-  const { addTab, setSelectedKey: setSelectedKeyGlobal, selectTab, setSearch } = useDatabrowserStore();
-  const { search: currentSearch, selectedKeys, setSelectedKey } = useTab();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      DeleteAlertDialog,
-      {
-        deletionType: "key",
-        count: contextKeys.length,
-        open: isAlertOpen,
-        onOpenChange: setAlertOpen,
-        onDeleteConfirm: (e) => {
-          e.stopPropagation();
-          for (const key of contextKeys) {
-            deleteKey(key);
-          }
-          setAlertOpen(false);
-        }
-      }
-    ),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenu, { modal: false, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        ContextMenuTrigger,
-        {
-          onContextMenu: (e) => {
-            const el = e.target;
-            const key = el.closest("[data-key]");
-            if (key && key instanceof HTMLElement && key.dataset.key !== void 0) {
-              const clickedKey = key.dataset.key;
-              if (selectedKeys.includes(clickedKey)) {
-                setContextKeys(selectedKeys);
-              } else {
-                setSelectedKey(clickedKey);
-                setContextKeys([clickedKey]);
-              }
-            } else {
-              throw new Error("Key not found");
-            }
-          },
-          children
-        }
-      ),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuContent, { children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          ContextMenuItem,
-          {
-            onClick: () => {
-              navigator.clipboard.writeText(contextKeys[0]);
-              toast({
-                description: "Key copied to clipboard"
-              });
-            },
-            className: "gap-2",
-            disabled: contextKeys.length !== 1,
-            children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCopy, { size: 16 }),
-              "Copy key"
-            ]
-          }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          ContextMenuItem,
-          {
-            onClick: () => {
-              const newTabId = addTab();
-              setSelectedKeyGlobal(newTabId, contextKeys[0]);
-              setSearch(newTabId, currentSearch);
-              selectTab(newTabId);
-            },
-            className: "gap-2",
-            disabled: contextKeys.length !== 1,
-            children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconExternalLink, { size: 16 }),
-              "Open in new tab"
-            ]
-          }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactcontextmenu.ContextMenuSeparator, {}),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuItem, { onClick: () => setAlertOpen(true), className: "gap-2", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconTrash, { size: 16 }),
-          contextKeys.length > 1 ? `Delete ${contextKeys.length} keys` : "Delete key"
-        ] })
-      ] })
-    ] })
-  ] });
-};
-
-// src/components/databrowser/components/sidebar/keys-list.tsx
-
-var KeysList = () => {
-  const { keys } = useKeys();
-  const lastClickedIndexRef = _react.useRef.call(void 0, null);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarContextMenu, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-px" }),
-    keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        KeyItem,
-        {
-          index: i,
-          data,
-          allKeys: keys,
-          lastClickedIndexRef
-        }
-      ),
-      i !== keys.length - 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "-z-10 mx-2 h-px bg-zinc-100 dark:bg-zinc-200" })
-    ] }, data[0]))
-  ] }) });
-};
-var keyStyles = {
-  string: "border-sky-400 !bg-sky-50 text-sky-900",
-  hash: "border-amber-400 !bg-amber-50 text-amber-900",
-  set: "border-indigo-400 !bg-indigo-50 text-indigo-900",
-  zset: "border-pink-400  !bg-pink-50 text-pink-900",
-  json: "border-purple-400 !bg-purple-50 text-purple-900",
-  list: "border-orange-400 !bg-orange-50 text-orange-900",
-  stream: "border-green-400 !bg-green-50 text-green-900"
-};
-var KeyItem = ({
-  data,
-  index,
-  allKeys,
-  lastClickedIndexRef
-}) => {
-  const { selectedKeys, setSelectedKeys, setSelectedKey } = useTab();
-  const [dataKey, dataType] = data;
-  const isKeySelected = selectedKeys.includes(dataKey);
-  const handleClick = (e) => {
-    if (e.shiftKey && lastClickedIndexRef.current !== null) {
-      const start = Math.min(lastClickedIndexRef.current, index);
-      const end = Math.max(lastClickedIndexRef.current, index);
-      const rangeKeys = allKeys.slice(start, end + 1).map(([key]) => key);
-      setSelectedKeys(rangeKeys);
-    } else if (e.metaKey || e.ctrlKey) {
-      if (isKeySelected) {
-        setSelectedKeys(selectedKeys.filter((k) => k !== dataKey));
-      } else {
-        setSelectedKeys([...selectedKeys, dataKey]);
-      }
-      lastClickedIndexRef.current = index;
-    } else {
-      setSelectedKey(dataKey);
-      lastClickedIndexRef.current = index;
-    }
-  };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    Button,
-    {
-      "data-key": dataKey,
-      variant: isKeySelected ? "default" : "ghost",
-      className: cn(
-        "relative flex h-10 w-full items-center justify-start gap-2 px-3 py-0 !ring-0 focus-visible:bg-zinc-50",
-        "-my-px select-none border border-transparent text-left",
-        isKeySelected && "shadow-sm",
-        isKeySelected && keyStyles[dataType]
-      ),
-      onClick: handleClick,
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: dataType, type: "icon" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "truncate whitespace-nowrap", children: dataKey })
-      ]
-    }
-  );
-};
-
-// src/components/databrowser/components/sidebar/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-sm",
-      onClick: handleClick,
-      disabled: isLoading || isLoadingProp,
-      children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLoader2, { className: "animate-spin text-zinc-500", size: 16 }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconRefresh, { className: "text-zinc-500 dark:text-zinc-600", size: 16 })
-    }
-  ) }) });
-};
-
-// src/components/databrowser/components/sidebar/search-input.tsx
+// src/components/databrowser/components/sidebar/search-input.tsx
 
 
 
@@ -6081,7 +6102,7 @@ var SearchInput = () => {
     } else if (e.key === "Escape") {
       setState("");
       setFocusedIndex(-1);
-      _optionalChain([inputRef, 'access', _55 => _55.current, 'optionalAccess', _56 => _56.blur, 'call', _57 => _57()]);
+      _optionalChain([inputRef, 'access', _58 => _58.current, 'optionalAccess', _59 => _59.blur, 'call', _60 => _60()]);
     } else if (e.key === "ArrowDown" || e.key === "Tab" && !e.shiftKey) {
       e.preventDefault();
       if (focusedIndex < filteredHistory.length - 1) {
@@ -6095,7 +6116,7 @@ var SearchInput = () => {
         setFocusedIndex(focusedIndex - 1);
       } else if (filteredHistory.length > 0 && focusedIndex === 0) {
         setFocusedIndex(-1);
-        _optionalChain([inputRef, 'access', _58 => _58.current, 'optionalAccess', _59 => _59.focus, 'call', _60 => _60()]);
+        _optionalChain([inputRef, 'access', _61 => _61.current, 'optionalAccess', _62 => _62.focus, 'call', _63 => _63()]);
       } else if (filteredHistory.length > 0) {
         setFocusedIndex(filteredHistory.length - 1);
       }
@@ -6103,12 +6124,12 @@ var SearchInput = () => {
   };
   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 rounded-l-none border border-zinc-300 font-normal", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      /* @__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 rounded-l-none border-none pr-6",
+          className: "h-full border-none pr-6",
           onKeyDown: handleKeyDown,
           onChange: (e) => {
             setState(e.currentTarget.value);
@@ -6123,150 +6144,915 @@ var SearchInput = () => {
         }
       ) }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        PopoverContent,
+        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/sidebar/type-selector.tsx
+
+var ALL_TYPES_KEY = "all";
+function DataTypeSelector() {
+  const { search, setSearchType } = useTab();
+  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 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: [[ALL_TYPES_KEY, "All Types"], ...Object.entries(DATA_TYPE_NAMES)].map(
+          ([key, value]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: key, children: value }, key)
+        ) }) })
+      ]
+    }
+  );
+}
+
+// src/components/databrowser/components/header/index.tsx
+
+var Header = () => {
+  const { isValuesSearchSelected, setIsValuesSearchSelected } = useTab();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1.5", children: [
+    /* @__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: [
+              "Values",
+              /* @__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");
+        }
+      }
+    ),
+    isValuesSearchSelected ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IndexSelector, {}) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataTypeSelector, {}),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchInput, {})
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RefreshButton, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddKeyModal, {})
+  ] });
+};
+var IndexSelector = () => {
+  const {
+    valuesSearch: { index },
+    setValuesSearchIndex
+  } = useTab();
+  const { data } = useFetchSearchIndexes();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    Select,
+    {
+      value: index,
+      onValueChange: (value) => {
+        setValuesSearchIndex(value);
+      },
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTrigger, { className: "select-none whitespace-nowrap border-zinc-300", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, { placeholder: "Select an index" }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectGroup, { children: _optionalChain([data, 'optionalAccess', _64 => _64.map, 'call', _65 => _65((index2) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: index2, children: index2 }, index2))]) }) })
+      ]
+    }
+  );
+};
+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 formatUpstashErrorMessage = (error) => {
+  if (error.name !== "UpstashError") return error.message;
+  const commandIndex = error.message.indexOf(", command was:");
+  if (commandIndex !== -1) {
+    return error.message.slice(0, commandIndex);
+  }
+  return error.message;
+};
+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/display/input/query-editor.tsx
+
+
+
+// src/components/databrowser/components/display/input/generateTypeDefinitions.tsx
+var generateTypeDefinitions = (schema) => {
+  let schemaFieldsInterface = "";
+  if (schema && Object.keys(schema).length > 0) {
+    const fieldLines = Object.entries(schema).map(([fieldName, fieldDef]) => {
+      const fieldType = fieldDef.type;
+      let operationType;
+      switch (fieldType) {
+        case "TEXT": {
+          operationType = "StringOperations";
+          break;
+        }
+        case "U64":
+        case "I64":
+        case "F64": {
+          operationType = "NumberOperations";
+          break;
+        }
+        case "BOOL": {
+          operationType = "BooleanOperations";
+          break;
+        }
+        case "DATE": {
+          operationType = "DateOperations";
+          break;
+        }
+        default: {
+          operationType = "StringOperations";
+        }
+      }
+      const escapedFieldName = fieldName.includes(".") ? `"${fieldName}"` : fieldName;
+      return `  ${escapedFieldName}?: ${operationType};`;
+    }).join("\n");
+    schemaFieldsInterface = `
+/** Schema fields for the current index */
+interface SchemaFields {
+${fieldLines}
+}`;
+  } else {
+    schemaFieldsInterface = `
+/** Schema fields - no schema available, using dynamic fields */
+interface SchemaFields {
+  [fieldName: string]: StringOperations | NumberOperations | BooleanOperations | DateOperations;
+}`;
+  }
+  return `
+// String operations for TEXT fields
+type StringOperationMap = {
+  /** Exact match */
+  $eq: string;
+  /** Not equal */
+  $ne: string;
+  /** Match any value in array */
+  $in: string[];
+  /** Fuzzy match with optional distance */
+  $fuzzy: string | { value: string; distance?: number; transpositionCostOne?: boolean };
+  /** Phrase match */
+  $phrase: string;
+  /** Regular expression match */
+  $regex: string;
+};
+
+// Number operations for U64, I64, F64 fields
+type NumberOperationMap = {
+  /** Exact match */
+  $eq: number;
+  /** Not equal */
+  $ne: number;
+  /** Match any value in array */
+  $in: number[];
+  /** Greater than */
+  $gt: number;
+  /** Greater than or equal */
+  $gte: number;
+  /** Less than */
+  $lt: number;
+  /** Less than or equal */
+  $lte: number;
+};
+
+// Boolean operations for BOOL fields
+type BooleanOperationMap = {
+  /** Exact match */
+  $eq: boolean;
+  /** Not equal */
+  $ne: boolean;
+  /** Match any value in array */
+  $in: boolean[];
+};
+
+// Date operations for DATE fields
+type DateOperationMap = {
+  /** Exact match */
+  $eq: string | Date;
+  /** Not equal */
+  $ne: string | Date;
+  /** Match any value in array */
+  $in: (string | Date)[];
+};
+
+// String field operations with optional boost
+type StringOperations = 
+  | { $eq: string; $boost?: number }
+  | { $ne: string; $boost?: number }
+  | { $in: string[]; $boost?: number }
+  | { $fuzzy: string | { value: string; distance?: number; transpositionCostOne?: boolean }; $boost?: number }
+  | { $phrase: string; $boost?: number }
+  | { $regex: string; $boost?: number }
+  | string;
+
+// Number field operations with optional boost  
+type NumberOperations =
+  | { $eq: number; $boost?: number }
+  | { $ne: number; $boost?: number }
+  | { $in: number[]; $boost?: number }
+  | { $gt: number; $boost?: number }
+  | { $gte: number; $boost?: number }
+  | { $lt: number; $boost?: number }
+  | { $lte: number; $boost?: number }
+  | number;
+
+// Boolean field operations with optional boost
+type BooleanOperations =
+  | { $eq: boolean; $boost?: number }
+  | { $ne: boolean; $boost?: number }
+  | { $in: boolean[]; $boost?: number }
+  | boolean;
+
+// Date field operations with optional boost
+type DateOperations =
+  | { $eq: string | Date; $boost?: number }
+  | { $ne: string | Date; $boost?: number }
+  | { $in: (string | Date)[]; $boost?: number }
+  | string
+  | Date;
+
+${schemaFieldsInterface}
+
+// Query leaf - field conditions without logical operators
+type QueryLeaf = SchemaFields & {
+  $and?: never;
+  $or?: never;
+  $must?: never;
+  $should?: never;
+  $mustNot?: never;
+  $boost?: never;
+};
+
+// Base type for boolean nodes - allows field conditions
+type BoolBase = SchemaFields;
+
+// $and: all conditions must match
+type AndNode = BoolBase & {
+  /** All conditions in this array must match */
+  $and: QueryFilter[];
+  /** Boost score for this node */
+  $boost?: number;
+  $or?: never;
+  $must?: never;
+  $should?: never;
+  $mustNot?: never;
+};
+
+// $or: at least one condition must match
+type OrNode = BoolBase & {
+  /** At least one condition must match */
+  $or: QueryFilter[];
+  /** Boost score for this node */
+  $boost?: number;
+  $and?: never;
+  $must?: never;
+  $should?: never;
+  $mustNot?: never;
+};
+
+// $must only (Elasticsearch-style)
+type MustNode = BoolBase & {
+  /** All conditions must match (similar to $and) */
+  $must: QueryFilter[];
+  /** Boost score for this node */
+  $boost?: number;
+  $and?: never;
+  $or?: never;
+  $should?: never;
+  $mustNot?: never;
+};
+
+// $should only (Elasticsearch-style)
+type ShouldNode = BoolBase & {
+  /** At least one should match (affects scoring) */
+  $should: QueryFilter[];
+  /** Boost score for this node */
+  $boost?: number;
+  $and?: never;
+  $or?: never;
+  $must?: never;
+  $mustNot?: never;
+};
+
+// $must + $should combined
+type MustShouldNode = BoolBase & {
+  /** All these must match */
+  $must: QueryFilter[];
+  /** At least one should match for higher score */
+  $should: QueryFilter[];
+  $and?: never;
+  $or?: never;
+  $mustNot?: never;
+};
+
+// $mustNot only
+type NotNode = BoolBase & {
+  /** None of these conditions should match */
+  $mustNot: QueryFilter[];
+  /** Boost score for this node */
+  $boost?: number;
+  $and?: never;
+  $or?: never;
+  $must?: never;
+  $should?: never;
+};
+
+// $and + $mustNot combined
+type AndNotNode = BoolBase & {
+  $and: QueryFilter[];
+  $mustNot: QueryFilter[];
+  $boost?: number;
+  $or?: never;
+  $must?: never;
+  $should?: never;
+};
+
+// $or + $mustNot combined
+type OrNotNode = BoolBase & {
+  $or: QueryFilter[];
+  $mustNot: QueryFilter[];
+  $boost?: number;
+  $and?: never;
+  $must?: never;
+  $should?: never;
+};
+
+// $should + $mustNot combined
+type ShouldNotNode = BoolBase & {
+  $should: QueryFilter[];
+  $mustNot: QueryFilter[];
+  $boost?: number;
+  $and?: never;
+  $or?: never;
+  $must?: never;
+};
+
+// $must + $mustNot combined
+type MustNotNode = BoolBase & {
+  $must: QueryFilter[];
+  $mustNot: QueryFilter[];
+  $boost?: number;
+  $and?: never;
+  $or?: never;
+  $should?: never;
+};
+
+// Full boolean node: $must + $should + $mustNot
+type BoolNode = BoolBase & {
+  $must: QueryFilter[];
+  $should: QueryFilter[];
+  $mustNot: QueryFilter[];
+  $boost?: number;
+  $and?: never;
+  $or?: never;
+};
+
+// Query filter - union of all node types
+type QueryFilter =
+  | QueryLeaf
+  | AndNode
+  | OrNode
+  | MustNode
+  | ShouldNode
+  | MustShouldNode
+  | NotNode
+  | AndNotNode
+  | OrNotNode
+  | ShouldNotNode
+  | MustNotNode
+  | BoolNode;
+
+// Root-level $or restriction (no field conditions at root with $or)
+type RootOrNode = {
+  $or: QueryFilter[];
+  $boost?: number;
+  $and?: never;
+  $must?: never;
+  $should?: never;
+  $mustNot?: never;
+};
+
+// Root query filter - restricts $or from mixing with fields at root level
+type Query =
+  | QueryLeaf
+  | AndNode
+  | RootOrNode
+  | MustNode
+  | ShouldNode
+  | MustShouldNode
+  | NotNode
+  | AndNotNode
+  | ShouldNotNode
+  | MustNotNode
+  | BoolNode;
+`;
+};
+
+// src/components/databrowser/components/display/input/query-editor.tsx
+
+var QueryEditor = (props) => {
+  if (isTest) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TestQueryEditor, { ...props });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MonacoQueryEditor, { ...props });
+};
+var MonacoQueryEditor = ({ value, onChange, height, schema }) => {
+  const monaco = _react2.useMonaco.call(void 0, );
+  const editorRef = _react.useRef.call(void 0, null);
+  const theme = useTheme();
+  const libDisposableRef = _react.useRef.call(void 0, null);
+  const typeDefinitions = _react.useMemo.call(void 0, () => generateTypeDefinitions(schema), [schema]);
+  _react.useEffect.call(void 0, () => {
+    if (!monaco) return;
+    if (libDisposableRef.current) {
+      libDisposableRef.current.dispose();
+    }
+    libDisposableRef.current = monaco.languages.typescript.typescriptDefaults.addExtraLib(
+      typeDefinitions,
+      "file:///query-types.d.ts"
+    );
+    return () => {
+      if (libDisposableRef.current) {
+        libDisposableRef.current.dispose();
+      }
+    };
+  }, [monaco, typeDefinitions]);
+  const handleBeforeMount = (monaco2) => {
+    monaco2.languages.typescript.typescriptDefaults.setCompilerOptions({
+      target: monaco2.languages.typescript.ScriptTarget.ES2020,
+      allowNonTsExtensions: true,
+      moduleResolution: monaco2.languages.typescript.ModuleResolutionKind.NodeJs,
+      module: monaco2.languages.typescript.ModuleKind.CommonJS,
+      noEmit: true,
+      esModuleInterop: true,
+      strict: true,
+      allowJs: true
+    });
+    libDisposableRef.current = monaco2.languages.typescript.typescriptDefaults.addExtraLib(
+      typeDefinitions,
+      "file:///query-types.d.ts"
+    );
+    monaco2.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: false,
+      noSyntaxValidation: false
+    });
+    monaco2.languages.typescript.typescriptDefaults.setEagerModelSync(true);
+  };
+  _react.useEffect.call(void 0, () => {
+    const match = value.startsWith("const query: Query = {");
+    const ending = value.endsWith("}");
+    if (!match || !ending) {
+      onChange("const query: Query = {}");
+    }
+  }, [value, editorRef.current, onChange]);
+  const handleChange = (newValue) => {
+    if (!newValue) {
+      onChange("");
+      return;
+    }
+    const match = newValue.startsWith("const query: Query = {");
+    if (match) {
+      onChange(newValue);
+    } else {
+      const editor = editorRef.current;
+      if (editor) {
+        editor.setValue(value);
+      }
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("group/editor relative"), style: { height }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _react2.Editor,
+    {
+      theme: theme === "dark" ? "vs-dark" : "light",
+      loading: void 0,
+      beforeMount: handleBeforeMount,
+      onMount: (editor) => {
+        editorRef.current = editor;
+      },
+      value,
+      onChange: handleChange,
+      defaultLanguage: "typescript",
+      path: "query.ts",
+      options: {
+        wordWrap: "on",
+        overviewRulerBorder: false,
+        overviewRulerLanes: 0,
+        formatOnPaste: true,
+        formatOnType: true,
+        renderWhitespace: "none",
+        smoothScrolling: true,
+        scrollbar: {
+          verticalScrollbarSize: 12
+        },
+        autoIndent: "full",
+        guides: { indentation: false },
+        fontSize: 13,
+        cursorBlinking: "smooth",
+        minimap: { enabled: false },
+        folding: true,
+        glyphMargin: false,
+        lineNumbers: "on",
+        parameterHints: { enabled: true },
+        lineDecorationsWidth: 0,
+        automaticLayout: true,
+        scrollBeyondLastLine: false,
+        renderLineHighlight: "line",
+        unusualLineTerminators: "auto",
+        padding: { top: 8, bottom: 8 },
+        quickSuggestions: true,
+        suggest: {
+          showVariables: false,
+          showConstants: false,
+          showFunctions: false,
+          showClasses: false,
+          showInterfaces: false,
+          showModules: false,
+          showKeywords: false
+        },
+        suggestOnTriggerCharacters: true,
+        acceptSuggestionOnEnter: "on",
+        tabCompletion: "on",
+        wordBasedSuggestions: "off",
+        // Disable navigation features
+        gotoLocation: {
+          multiple: "goto",
+          multipleDefinitions: "goto",
+          multipleTypeDefinitions: "goto",
+          multipleDeclarations: "goto",
+          multipleImplementations: "goto",
+          multipleReferences: "goto"
+        },
+        definitionLinkOpensInPeek: false,
+        contextmenu: false
+      },
+      className: "[&_.current-line]:!border-none [&_.current-line]:!bg-emerald-50 [&_.monaco-editor-background]:!bg-transparent [&_.monaco-editor]:!bg-transparent [&_[role='presentation']]:!bg-transparent"
+    }
+  ) });
+};
+var TestQueryEditor = ({ value, onChange, height }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("group/editor relative"), style: { height }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "textarea",
+    {
+      "aria-label": "query-editor",
+      value,
+      onChange: (e) => onChange(e.target.value),
+      className: "h-full w-full resize-none bg-transparent p-2 font-mono text-sm"
+    }
+  ) });
+};
+
+// src/components/databrowser/components/query-builder.tsx
+
+var QueryBuilder = () => {
+  const { valuesSearch, setValuesSearchQuery } = useTab();
+  const [value, setValue] = _react.useState.call(void 0, valuesSearch.query);
+  const { data: indexDetails } = useFetchSearchIndex(valuesSearch.index);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rounded-lg border border-zinc-300 bg-white px-[6px] dark:border-zinc-700", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    QueryEditor,
+    {
+      height: 300,
+      value,
+      onChange: (value2) => {
+        setValue(value2);
+        const sliced = value2.slice(PREFIX.length);
+        const parsed = parseJSObjectLiteral(sliced);
+        const newValue = value2.slice(PREFIX.length);
+        if (parsed && valuesSearch.query !== newValue) {
+          setValuesSearchQuery(newValue);
+        }
+      },
+      schema: _optionalChain([indexDetails, 'optionalAccess', _66 => _66.schema])
+    }
+  ) });
+};
+
+// src/components/databrowser/components/sidebar/empty.tsx
+
+var Empty = () => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full w-full items-center justify-center rounded-md border bg-white px-4 py-6 text-center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-5", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-md font-medium", children: "Data on a break" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-balance text-center", children: '"Quick, lure it back with some CLI magic!"' })
+  ] }) });
+};
+
+// src/components/databrowser/components/sidebar/keys-list.tsx
+
+
+
+// src/components/databrowser/components/sidebar-context-menu.tsx
+
+
+
+
+var SidebarContextMenu = ({ children }) => {
+  const { mutate: deleteKey } = useDeleteKey();
+  const [isAlertOpen, setAlertOpen] = _react.useState.call(void 0, false);
+  const [contextKeys, setContextKeys] = _react.useState.call(void 0, []);
+  const {
+    addTab,
+    setSelectedKey: setSelectedKeyGlobal,
+    selectTab,
+    setSearch
+  } = useDatabrowserStore();
+  const { search: currentSearch, selectedKeys, setSelectedKey } = useTab();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      DeleteAlertDialog,
+      {
+        deletionType: "key",
+        count: contextKeys.length,
+        open: isAlertOpen,
+        onOpenChange: setAlertOpen,
+        onDeleteConfirm: (e) => {
+          e.stopPropagation();
+          for (const key of contextKeys) {
+            deleteKey(key);
+          }
+          setAlertOpen(false);
+        }
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenu, { modal: false, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        ContextMenuTrigger,
+        {
+          onContextMenu: (e) => {
+            const el = e.target;
+            const key = el.closest("[data-key]");
+            if (key && key instanceof HTMLElement && key.dataset.key !== void 0) {
+              const clickedKey = key.dataset.key;
+              if (selectedKeys.includes(clickedKey)) {
+                setContextKeys(selectedKeys);
+              } else {
+                setSelectedKey(clickedKey);
+                setContextKeys([clickedKey]);
+              }
+            } else {
+              throw new Error("Key not found");
+            }
+          },
+          children
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuContent, { children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          ContextMenuItem,
+          {
+            onClick: () => {
+              navigator.clipboard.writeText(contextKeys[0]);
+              toast({
+                description: "Key copied to clipboard"
+              });
+            },
+            className: "gap-2",
+            disabled: contextKeys.length !== 1,
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCopy, { size: 16 }),
+              "Copy key"
+            ]
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          ContextMenuItem,
+          {
+            onClick: () => {
+              const newTabId = addTab();
+              setSelectedKeyGlobal(newTabId, contextKeys[0]);
+              setSearch(newTabId, currentSearch);
+              selectTab(newTabId);
+            },
+            className: "gap-2",
+            disabled: contextKeys.length !== 1,
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconExternalLink, { size: 16 }),
+              "Open in new tab"
+            ]
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactcontextmenu.ContextMenuSeparator, {}),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuItem, { onClick: () => setAlertOpen(true), className: "gap-2", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconTrash, { size: 16 }),
+          contextKeys.length > 1 ? `Delete ${contextKeys.length} keys` : "Delete key"
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/databrowser/components/sidebar/keys-list.tsx
+
+var KeysList = () => {
+  const { keys } = useKeys();
+  const lastClickedIndexRef = _react.useRef.call(void 0, null);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarContextMenu, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-px" }),
+    keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        KeyItem,
         {
-          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))
+          index: i,
+          data,
+          allKeys: keys,
+          lastClickedIndexRef
         }
-      )
-    ] }),
-    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" })
-        ]
+      ),
+      i !== keys.length - 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "-z-10 mx-[13px] h-px bg-zinc-200 dark:bg-zinc-200" })
+    ] }, data[0]))
+  ] }) });
+};
+var KeyItem = ({
+  data,
+  index,
+  allKeys,
+  lastClickedIndexRef
+}) => {
+  const { selectedKeys, setSelectedKeys, setSelectedKey } = useTab();
+  const [dataKey, dataType] = data;
+  const isKeySelected = selectedKeys.includes(dataKey);
+  const handleClick = (e) => {
+    if (e.shiftKey && lastClickedIndexRef.current !== null) {
+      const start = Math.min(lastClickedIndexRef.current, index);
+      const end = Math.max(lastClickedIndexRef.current, index);
+      const rangeKeys = allKeys.slice(start, end + 1).map(([key]) => key);
+      setSelectedKeys(rangeKeys);
+    } else if (e.metaKey || e.ctrlKey) {
+      if (isKeySelected) {
+        setSelectedKeys(selectedKeys.filter((k) => k !== dataKey));
+      } else {
+        setSelectedKeys([...selectedKeys, dataKey]);
       }
-    ),
-    " "
-  ] });
+      lastClickedIndexRef.current = index;
+    } else {
+      setSelectedKey(dataKey);
+      lastClickedIndexRef.current = index;
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "button",
+    {
+      "data-key": dataKey,
+      className: cn(
+        "relative flex h-10 w-full items-center justify-start gap-2 rounded-lg px-3 py-0 !ring-0 transition-colors focus-visible:bg-zinc-50",
+        "-my-px select-none border border-transparent text-left",
+        isKeySelected ? "border-zinc-300 bg-white font-medium text-zinc-950 shadow-[0_1px_2px_0_rgba(0,0,0,0.10)]" : "shadow-none hover:bg-zinc-200"
+      ),
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: dataType, type: "icon" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "grow truncate whitespace-nowrap", children: dataKey }),
+        isKeySelected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconChevronRight, { className: "shrink-0 text-zinc-500", size: 20 })
+      ]
+    }
+  );
 };
 
 // src/components/databrowser/components/sidebar/skeleton-buttons.tsx
 
 var DEFAULT_SKELETON_COUNT = 6;
-var LoadingSkeleton = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "block h-full w-full rounded-lg border border-zinc-200 bg-white p-1 pr-3 transition-all", children: Array.from({ length: DEFAULT_SKELETON_COUNT }).fill(0).map((_, idx) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center gap-2 px-3", children: [
+var LoadingSkeleton = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "block h-full w-full rounded-lg bg-zinc-100 p-1 pr-3 transition-all", children: Array.from({ length: DEFAULT_SKELETON_COUNT }).fill(0).map((_, idx) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center gap-2 px-3", children: [
   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "size-5 shrink-0 rounded" }),
   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "h-4 grow rounded" })
 ] }, idx)) });
 
-// src/components/databrowser/components/sidebar/type-selector.tsx
-
-var ALL_TYPES_KEY = "all";
-function DataTypeSelector() {
-  const { search, setSearchType } = useTab();
-  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 select-none whitespace-nowrap rounded-r-none border-r-0 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: [[ALL_TYPES_KEY, "All Types"], ...Object.entries(DATA_TYPE_NAMES)].map(
-          ([key, value]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: key, children: value }, key)
-        ) }) })
-      ]
-    }
-  );
-}
-
 // src/components/databrowser/components/sidebar/index.tsx
 
 function Sidebar() {
   const { keys, query } = useKeys();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2 p-4", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-lg bg-zinc-100", children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center justify-between pl-1", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayDbSize, {}),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-1", children: [
-          /* @__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_DB_SIZE_QUERY_KEY]
-                });
-                queryClient.invalidateQueries({
-                  queryKey: [FETCH_KEY_TYPE_QUERY_KEY]
-                });
-              },
-              isLoading: query.isFetching
-            }
-          ),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddKeyModal, {})
-        ] })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataTypeSelector, {}),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchInput, {})
-      ] })
-    ] }),
-    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, { query, disableRoundedInherit: true, className: "min-h-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysList, {}) })
-    ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Empty, {})
-  ] });
+  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 ? (
+    // Infinite scroll already has a loader at the bottom
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      InfiniteScroll,
+      {
+        query,
+        disableRoundedInherit: true,
+        className: "min-h-0 rounded-xl bg-zinc-100 px-2 py-5 pr-4",
+        scrollBarClassName: "py-5",
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysList, {})
+      }
+    )
+  ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Empty, {}) });
 }
 
 // src/components/databrowser/components/databrowser-instance.tsx
 
+var PREFIX = "const query: Query = ";
 var DatabrowserInstance = ({ hidden }) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("min-h-0 grow rounded-md bg-zinc-100", hidden && "hidden"), children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _reactresizablepanels.PanelGroup,
-      {
-        autoSaveId: "persistence",
-        direction: "horizontal",
-        className: "h-full w-full gap-0.5 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.jsx.call(void 0, _reactresizablepanels.PanelResizeHandle, { className: "group flex h-full w-3 justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full border-r border-dashed border-zinc-200 transition-colors group-hover:border-zinc-500" }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.Panel, { minSize: 40, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataDisplay, {}) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Toaster, {})
-  ] }) });
+  const { isValuesSearchSelected } = useTab();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: cn(
+        "flex min-h-0 grow flex-col rounded-md 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, {}),
+          isValuesSearchSelected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QueryBuilder, {}),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HeaderError, {})
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _reactresizablepanels.PanelGroup,
+          {
+            autoSaveId: "persistence",
+            direction: "horizontal",
+            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, _reactresizablepanels.Panel, { minSize: 40, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataDisplay, {}) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Toaster, {})
+      ]
+    }
+  ) });
 };
 
 // src/components/databrowser/components/databrowser-tabs.tsx
@@ -6286,8 +7072,8 @@ var _utilities = require('@dnd-kit/utilities');
 
 // src/components/ui/command.tsx
 
-var _cmdk = require('cmdk');
 
+var _cmdk = require('cmdk');
 
 var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
   _cmdk.Command,
@@ -6375,15 +7161,6 @@ CommandShortcut.displayName = "CommandShortcut";
 
 
 
-// src/components/databrowser/components/tab-type-icon.tsx
-
-function TabTypeIcon({ selectedKey }) {
-  const { data: keyType, isLoading } = useFetchKeyType(selectedKey);
-  if (isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "h-5 w-5 rounded" });
-  if (!keyType || keyType === "none") return;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: keyType, type: "icon" });
-}
-
 // src/hooks/use-overflow.ts
 
 var useOverflow = () => {
@@ -6396,7 +7173,7 @@ var useOverflow = () => {
     }
     if (!node) return;
     observerRef.current = new ResizeObserver((entries) => {
-      const el = _optionalChain([entries, 'access', _61 => _61.at, 'call', _62 => _62(0), 'optionalAccess', _63 => _63.target]);
+      const el = _optionalChain([entries, 'access', _67 => _67.at, 'call', _68 => _68(0), 'optionalAccess', _69 => _69.target]);
       if (!el) return;
       setIsOverflow(el.scrollWidth > el.clientWidth);
     });
@@ -6404,16 +7181,25 @@ var useOverflow = () => {
   }, []);
   _react.useEffect.call(void 0, () => {
     return () => {
-      _optionalChain([observerRef, 'access', _64 => _64.current, 'optionalAccess', _65 => _65.disconnect, 'call', _66 => _66()]);
+      _optionalChain([observerRef, 'access', _70 => _70.current, 'optionalAccess', _71 => _71.disconnect, 'call', _72 => _72()]);
     };
   }, []);
   return { ref, isOverflow };
 };
 
+// src/components/databrowser/components/tab-type-icon.tsx
+
+function TabTypeIcon({ selectedKey }) {
+  const { data: keyType, isLoading } = useFetchKeyType(selectedKey);
+  if (isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "h-5 w-5 rounded" });
+  if (!keyType || keyType === "none") return;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: keyType, type: "icon" });
+}
+
 // src/components/databrowser/components/tab.tsx
 
 var Tab = ({ id, isList }) => {
-  const { active, search, selectedKey, pinned } = useTab();
+  const { active, search, selectedKey, valuesSearch, pinned, isValuesSearchSelected } = useTab();
   const {
     selectTab,
     removeTab,
@@ -6426,21 +7212,20 @@ var Tab = ({ id, isList }) => {
   } = useDatabrowserStore();
   const hasPinnedTabs = tabs.some(([, data]) => data.pinned);
   const { ref, isOverflow } = useOverflow();
-  const label = search.key || selectedKey;
-  const iconNode = search.key ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { size: 15 }) : selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabTypeIcon, { selectedKey }) : void 0;
+  const label = isValuesSearchSelected ? valuesSearch.index : search.key || selectedKey;
+  const iconNode = isValuesSearchSelected ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-[20px] w-[20px] items-center justify-center rounded-md bg-emerald-200 text-emerald-800", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { size: 14 }) }) : search.key ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-[20px] w-[20px] items-center justify-center rounded-md bg-zinc-100 text-zinc-600", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { size: 14 }) }) : selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabTypeIcon, { selectedKey }) : void 0;
   const tabNode = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
       id: isList ? `list-tab-${id}` : `tab-${id}`,
       onClick: () => selectTab(id),
       className: cn(
-        "flex h-9 w-full cursor-pointer items-center gap-2 px-3 text-[13px] transition-colors",
+        "flex h-[40px] w-full cursor-pointer items-center gap-2 rounded-t-lg px-3 text-[13px] transition-colors",
         isList && "max-w-[370px]",
-        !isList && "rounded-t-lg border border-zinc-200",
-        !isList && (active ? "border-b-white bg-white text-zinc-900" : "bg-zinc-100 hover:bg-zinc-50")
+        !isList && (active ? "bg-white text-zinc-950" : "bg-zinc-200 text-zinc-600 hover:bg-zinc-100")
       ),
       children: [
-        iconNode,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn(!active && "transition-colors"), children: iconNode }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "span",
           {
@@ -6457,7 +7242,7 @@ var Tab = ({ id, isList }) => {
               e.stopPropagation();
               removeTab(id);
             },
-            className: "p-1 text-zinc-300 transition-colors hover:text-zinc-500 dark:text-zinc-400",
+            className: "p-[2px] text-zinc-400 transition-colors hover:text-zinc-500",
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconX, { size: 16 })
           }
         )
@@ -6514,8 +7299,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', _67 => _67.find, 'call', _68 => _68(([tabId]) => tabId === id), 'optionalAccess', _69 => _69[1]]);
-  const isPinned = _optionalChain([tabData, 'optionalAccess', _70 => _70.pinned]);
+  const tabData = _optionalChain([tabs, 'access', _73 => _73.find, 'call', _74 => _74(([tabId]) => tabId === id), 'optionalAccess', _75 => _75[1]]);
+  const isPinned = _optionalChain([tabData, 'optionalAccess', _76 => _76.pinned]);
   const { attributes, listeners: listeners2, setNodeRef, transform, transition, isDragging } = _sortable.useSortable.call(void 0, {
     id,
     disabled: isPinned,
@@ -6660,73 +7445,70 @@ var DatabrowserTabs = ({ onFullScreenClick }) => {
       reorderTabs(oldIndex, newIndex);
     }
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative mb-2 shrink-0", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute bottom-0 left-0 right-0 -z-10 h-[1px] w-full bg-zinc-200" }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex translate-y-[1px] 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",
-          {
-            className: `tabs-shadow-left pointer-events-none absolute left-0 top-0 z-10 h-full w-6 transition-opacity duration-200 ${hasLeftShadow ? "opacity-100" : "opacity-0"}`
-          }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "div",
-          {
-            className: `tabs-shadow-right pointer-events-none absolute right-0 top-0 z-10 h-full w-6 transition-opacity duration-200 ${hasRightShadow ? "opacity-100" : "opacity-0"}`
-          }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          "div",
-          {
-            ref: scrollRef,
-            onScroll: recomputeShadows,
-            className: "scrollbar-hide flex min-w-0 flex-1 items-center gap-1 overflow-x-auto pb-[1px] [&::-webkit-scrollbar]:hidden",
-            children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _core.DndContext,
-                {
-                  sensors,
-                  collisionDetection: _core.closestCenter,
-                  onDragEnd: handleDragEnd,
-                  modifiers: [_modifiers.restrictToHorizontalAxis],
-                  measuring: {
-                    droppable: {
-                      strategy: _core.MeasuringStrategy.Always
-                    }
-                  },
-                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _sortable.SortableContext,
-                    {
-                      items: sortedTabs.map(([id]) => id),
-                      strategy: _sortable.horizontalListSortingStrategy,
-                      children: selectedTab && sortedTabs.map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortableTab, { id }, id))
-                    }
-                  )
-                }
-              ),
-              !isOverflow && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-1 pl-1 pr-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddTabButton, {}) })
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 pl-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, 
-          Button,
-          {
-            "aria-label": "Toggle fullscreen",
-            variant: "secondary",
-            size: "icon-sm",
-            onClick: onFullScreenClick,
-            className: "flex-shrink-0 bg-blue-100 hover:bg-blue-600 hover:text-white",
-            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconMaximize, { size: 16 })
-          }
-        )
-      ] })
+  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: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative min-w-0 flex-1", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          className: `tabs-shadow-left pointer-events-none absolute left-0 top-0 z-10 h-full w-6 transition-opacity duration-200 ${hasLeftShadow ? "opacity-100" : "opacity-0"}`
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          className: `tabs-shadow-right pointer-events-none absolute right-0 top-0 z-10 h-full w-6 transition-opacity duration-200 ${hasRightShadow ? "opacity-100" : "opacity-0"}`
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "div",
+        {
+          ref: scrollRef,
+          onScroll: recomputeShadows,
+          className: "scrollbar-hide flex min-w-0 flex-1 items-center gap-1 overflow-x-auto [&::-webkit-scrollbar]:hidden",
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _core.DndContext,
+              {
+                sensors,
+                collisionDetection: _core.closestCenter,
+                onDragEnd: handleDragEnd,
+                modifiers: [_modifiers.restrictToHorizontalAxis],
+                measuring: {
+                  droppable: {
+                    strategy: _core.MeasuringStrategy.Always
+                  }
+                },
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _sortable.SortableContext,
+                  {
+                    items: sortedTabs.map(([id]) => id),
+                    strategy: _sortable.horizontalListSortingStrategy,
+                    children: selectedTab && sortedTabs.map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortableTab, { id }, id))
+                  }
+                )
+              }
+            ),
+            !isOverflow && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-1 pl-1 pr-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddTabButton, {}) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 pl-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, 
+        Button,
+        {
+          "aria-label": "Toggle fullscreen",
+          variant: "secondary",
+          size: "icon-sm",
+          onClick: onFullScreenClick,
+          className: "flex-shrink-0 bg-white text-zinc-500 dark:bg-zinc-100",
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconWindowMaximize, { size: 16 })
+        }
+      )
     ] })
-  ] });
+  ] }) });
 };
 function AddTabButton() {
   const { addTab, selectTab } = useDatabrowserStore();
@@ -6735,7 +7517,7 @@ function AddTabButton() {
     const tabsId = addTab();
     selectTab(tabsId);
     setTimeout(() => {
-      const tab = _optionalChain([rootRef, 'optionalAccess', _71 => _71.current, 'optionalAccess', _72 => _72.querySelector, 'call', _73 => _73(`#tab-${tabsId}`)]);
+      const tab = _optionalChain([rootRef, 'optionalAccess', _77 => _77.current, 'optionalAccess', _78 => _78.querySelector, 'call', _79 => _79(`#tab-${tabsId}`)]);
       if (!tab) return;
       tab.scrollIntoView({ behavior: "smooth" });
     }, 20);
@@ -6747,8 +7529,8 @@ function AddTabButton() {
       variant: "secondary",
       size: "icon-sm",
       onClick: handleAddTab,
-      className: "flex-shrink-0 dark:bg-zinc-200",
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "text-zinc-500 dark:text-zinc-600", size: 16 })
+      className: "flex-shrink-0 bg-zinc-200 ",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "text-zinc-600", size: 16 })
     }
   );
 }
@@ -6769,7 +7551,7 @@ function TabsListButton({
     onSelectTab(id);
     setOpen(false);
     setTimeout(() => {
-      const tab = _optionalChain([rootRef, 'optionalAccess', _74 => _74.current, 'optionalAccess', _75 => _75.querySelector, 'call', _76 => _76(`#tab-${id}`)]);
+      const tab = _optionalChain([rootRef, 'optionalAccess', _80 => _80.current, 'optionalAccess', _81 => _81.querySelector, 'call', _82 => _82(`#tab-${id}`)]);
       if (!tab) return;
       tab.scrollIntoView({ behavior: "smooth" });
     }, 20);
@@ -6780,7 +7562,7 @@ function TabsListButton({
       {
         variant: "secondary",
         size: "sm",
-        className: "h-7 gap-1 px-2",
+        className: "gap-1 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 }),
@@ -6851,7 +7633,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 text-zinc-700", children: [
+        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: [
           !hideTabs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserTabs, { onFullScreenClick }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserInstances, {})
         ] })