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

package/dist/index.js

@@ -193,10 +193,7 @@ var queryClient = new (0, _reactquery.QueryClient)({
     }
   },
   queryCache: new (0, _reactquery.QueryCache)({
-    onError: (error, query) => {
-      if (_optionalChain([query, 'access', _4 => _4.meta, 'optionalAccess', _5 => _5.hideToast])) return;
-      handleError(error);
-    }
+    onError: handleError
   }),
   mutationCache: new (0, _reactquery.MutationCache)({
     onError: handleError
@@ -266,7 +263,7 @@ var DatabrowserProvider = ({
           removeItem: () => {
           }
         },
-        version: 6,
+        version: 5,
         migrate: (originalState, version) => {
           const state = originalState;
           if (version <= 1) {
@@ -282,19 +279,6 @@ 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;
         }
       })
@@ -326,8 +310,6 @@ var storeCreator = (set, get) => ({
       id,
       selectedKeys: [],
       search: { key: "", type: void 0 },
-      valuesSearch: { index: "", query: "" },
-      isValuesSearchSelected: false,
       pinned: false
     };
     set((old) => ({
@@ -420,7 +402,7 @@ var storeCreator = (set, get) => ({
     set({ selectedTab: id });
   },
   getSelectedKeys: (tabId) => {
-    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]), () => ( []));
+    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]), () => ( []));
   },
   setSelectedKey: (tabId, key) => {
     get().setSelectedKeys(tabId, key ? [key] : []);
@@ -487,58 +469,6 @@ 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] }));
@@ -568,37 +498,27 @@ var useTab = () => {
     setSelectedListItem,
     setSearch,
     setSearchKey,
-    setSearchType,
-    setValuesSearch,
-    setValuesSearchIndex,
-    setValuesSearchQuery,
-    setIsValuesSearchSelected
+    setSearchType
   } = useDatabrowserStore();
   const tabId = useTabId();
-  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]);
+  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]);
   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', _15 => _15.selectedKeys, 'optionalAccess', _16 => _16[0]]),
+      selectedKey: _optionalChain([tabData, 'access', _13 => _13.selectedKeys, 'optionalAccess', _14 => _14[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),
-      setValuesSearch: (search) => setValuesSearch(tabId, search),
-      setValuesSearchIndex: (index) => setValuesSearchIndex(tabId, index),
-      setValuesSearchQuery: (query) => setValuesSearchQuery(tabId, query),
-      setIsValuesSearchSelected: (isSelected) => setIsValuesSearchSelected(tabId, isSelected)
+      setSearchType: (type) => setSearchType(tabId, type)
     }),
     [selectedTab, tabs, tabId]
   );
@@ -683,15 +603,15 @@ var getGroupRecursive = (classParts, classPartObject) => {
     return void 0;
   }
   const classRest = classParts.join(CLASS_PART_SEPARATOR);
-  return _optionalChain([classPartObject, 'access', _17 => _17.validators, 'access', _18 => _18.find, 'call', _19 => _19(({
+  return _optionalChain([classPartObject, 'access', _15 => _15.validators, 'access', _16 => _16.find, 'call', _17 => _17(({
     validator
-  }) => validator(classRest)), 'optionalAccess', _20 => _20.classGroupId]);
+  }) => validator(classRest)), 'optionalAccess', _18 => _18.classGroupId]);
 };
 var arbitraryPropertyRegex = /^\[(.+)\]$/;
 var getGroupIdForArbitraryProperty = (className) => {
   if (arbitraryPropertyRegex.test(className)) {
     const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
-    const property = _optionalChain([arbitraryPropertyClassName, 'optionalAccess', _21 => _21.substring, 'call', _22 => _22(0, arbitraryPropertyClassName.indexOf(":"))]);
+    const property = _optionalChain([arbitraryPropertyClassName, 'optionalAccess', _19 => _19.substring, 'call', _20 => _20(0, arbitraryPropertyClassName.indexOf(":"))]);
     if (property) {
       return "arbitrary.." + property;
     }
@@ -1797,7 +1717,7 @@ var getDefaultConfig = () => {
        * Font Variant Numeric
        * @see https://tailwindcss.com/docs/font-variant-numeric
        */
-      "fvn-fraction": ["diagonal-fractions", "stacked-fractons"],
+      "fvn-fraction": ["diagonal-fractions", "stacked-fractions"],
       /**
        * Letter Spacing
        * @see https://tailwindcss.com/docs/letter-spacing
@@ -3106,14 +3026,9 @@ var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-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;
-  }
+function formatNumber(value) {
+  const intl = new Intl.NumberFormat("en-US");
+  return intl.format(value);
 }
 var units = {
   year: 24 * 60 * 60 * 1e3 * 365,
@@ -3147,64 +3062,49 @@ var _reactportal = require('@radix-ui/react-portal');
 
 // src/components/ui/toast.tsx
 
-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) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) for (t = 0; t < e.length; t++) e[t] && (f = r2(e[t])) && (n && (n += " "), n += f);
-  else for (t in e) e[t] && (n && (n += " "), n += t);
-  return n;
-}
-function clsx2() {
-  for (var e, t, f = 0, n = ""; f < arguments.length; ) (e = arguments[f++]) && (t = r2(e)) && (n && (n += " "), n += t);
-  return n;
-}
+var _reacttoast = require('@radix-ui/react-toast'); var ToastPrimitives = _interopRequireWildcard(_reacttoast);
 
 // node_modules/class-variance-authority/dist/index.mjs
-var falsyToString = (value) => typeof value === "boolean" ? "".concat(value) : value === 0 ? "0" : value;
-var cx = clsx2;
-var cva = (base, config) => {
-  return (props) => {
-    var ref;
-    if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-    const { variants, defaultVariants } = config;
-    const getVariantClassNames = Object.keys(variants).map((variant) => {
-      const variantProp = props === null || props === void 0 ? void 0 : props[variant];
-      const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
-      if (variantProp === null) return null;
-      const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
-      return variants[variant][variantKey];
-    });
-    const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
-      let [key, value] = param;
-      if (value === void 0) {
-        return acc;
-      }
-      acc[key] = value;
+var falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+var cx = clsx;
+var cva = (base, config) => (props) => {
+  var _config_compoundVariants;
+  if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+  const { variants, defaultVariants } = config;
+  const getVariantClassNames = Object.keys(variants).map((variant) => {
+    const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+    const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+    if (variantProp === null) return null;
+    const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+    return variants[variant][variantKey];
+  });
+  const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
+    let [key, value] = param;
+    if (value === void 0) {
       return acc;
-    }, {});
-    const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (ref = config.compoundVariants) === null || ref === void 0 ? void 0 : ref.reduce((acc, param1) => {
-      let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param1;
-      return Object.entries(compoundVariantOptions).every((param) => {
-        let [key, value] = param;
-        return Array.isArray(value) ? value.includes({
-          ...defaultVariants,
-          ...propsWithoutUndefined
-        }[key]) : {
-          ...defaultVariants,
-          ...propsWithoutUndefined
-        }[key] === value;
-      }) ? [
-        ...acc,
-        cvClass,
-        cvClassName
-      ] : acc;
-    }, []);
-    return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-  };
+    }
+    acc[key] = value;
+    return acc;
+  }, {});
+  const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
+    let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
+    return Object.entries(compoundVariantOptions).every((param2) => {
+      let [key, value] = param2;
+      return Array.isArray(value) ? value.includes({
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key]) : {
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key] === value;
+    }) ? [
+      ...acc,
+      cvClass,
+      cvClassName
+    ] : acc;
+  }, []);
+  return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
 };
 
 // src/components/ui/toast.tsx
@@ -3309,6 +3209,19 @@ function Toaster() {
   ] }) });
 }
 
+// src/types/index.ts
+var DATA_TYPES = ["string", "list", "hash", "set", "zset", "json", "stream"];
+var DATA_TYPE_NAMES = {
+  string: "String",
+  list: "List",
+  hash: "Hash",
+  set: "Set",
+  zset: "Sorted Set",
+  json: "JSON",
+  stream: "Stream"
+};
+var SIMPLE_DATA_TYPES = ["string", "json"];
+
 // src/components/databrowser/hooks/use-keys.tsx
 
 
@@ -3327,39 +3240,15 @@ 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, valuesSearch, isValuesSearchSelected } = useTab();
-  const { data: searchIndexDetails, isLoading: isIndexDetailsLoading } = useFetchSearchIndex(
-    valuesSearch.index
-  );
+  const { active, search } = useTab();
   const { redisNoPipeline: redis } = useRedis();
-  const parsedValueQuery = parseJSObjectLiteral(valuesSearch.query);
-  const isQueryEnabled = active && (isValuesSearchSelected ? Boolean(valuesSearch.index) && Boolean(searchIndexDetails) : true);
-  const redisKeyScan = async ({
-    count: count2,
-    cursor
-  }) => {
+  const performScan = async (count2, cursor) => {
     const args = [cursor];
     if (search.key) {
       args.push("MATCH", search.key);
@@ -3369,46 +3258,7 @@ var KeysProvider = ({ children }) => {
     }
     args.push("COUNT", count2.toString());
     if (!search.type) args.push("WITHTYPE");
-    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];
+    return await redis.exec(["SCAN", ...args]);
   };
   const scanUntilAvailable = async (cursor) => {
     let i = 0;
@@ -3422,12 +3272,25 @@ var KeysProvider = ({ children }) => {
     }
   };
   const query = _reactquery.useInfiniteQuery.call(void 0, {
-    queryKey: [FETCH_KEYS_QUERY_KEY, search, valuesSearch, isValuesSearchSelected],
-    enabled: isQueryEnabled,
+    queryKey: [FETCH_KEYS_QUERY_KEY, search],
+    // Only fetch when tab is active
+    enabled: active,
     initialPageParam: "0",
     queryFn: async ({ pageParam: lastCursor }) => {
       const [cursor, values] = await scanUntilAvailable(lastCursor);
-      const keys2 = values.map((value) => [value.key, value.type]);
+      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;
+        }
+      }
       for (const [key, type] of keys2) {
         queryClient.setQueryData([FETCH_KEY_TYPE_QUERY_KEY, key], type);
       }
@@ -3437,15 +3300,12 @@ 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', _23 => _23.data, 'optionalAccess', _24 => _24.pages, 'access', _25 => _25.flatMap, 'call', _26 => _26((page) => page.keys)]), () => ( []));
+    const keys2 = _nullishCoalesce(_optionalChain([query, 'access', _21 => _21.data, 'optionalAccess', _22 => _22.pages, 'access', _23 => _23.flatMap, 'call', _24 => _24((page) => page.keys)]), () => ( []));
     const keysSet = /* @__PURE__ */ new Set();
     const dedupedKeys = [];
     for (const key of keys2) {
@@ -3460,10 +3320,7 @@ var KeysProvider = ({ children }) => {
     {
       value: {
         keys,
-        query: {
-          ...query,
-          isLoading: query.isLoading || isIndexDetailsLoading
-        }
+        query
       },
       children
     }
@@ -3479,7 +3336,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', _27 => _27[1]]);
+  return _optionalChain([keyTuple, 'optionalAccess', _25 => _25[1]]);
 };
 
 // src/components/databrowser/components/display/display-list.tsx
@@ -3491,24 +3348,24 @@ var useKeyType = (key) => {
 var _reactslot = require('@radix-ui/react-slot');
 
 var buttonVariants = cva(
-  "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",
+  "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",
   {
     variants: {
       variant: {
-        default: "bg-white text-black border  border-zinc-300 hover:bg-white/70",
+        default: "bg-white text-black border shadow-sm border-zinc-300 hover:bg-white/70",
         destructive: "bg-red-500 text-zinc-50 hover:bg-red-500/90",
-        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",
+        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",
         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-[26px] rounded-md",
+        sm: "px-2 h-7 rounded-md",
         lg: "h-10 px-8 rounded-md",
         icon: "h-8 w-8",
-        "icon-sm": "h-[26px] w-[26px] rounded-md",
+        "icon-sm": "h-7 w-7",
         "icon-xs": "h-5 w-5"
       }
     },
@@ -3528,6 +3385,37 @@ 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, {
@@ -3577,6 +3465,9 @@ var useAddKey = () => {
       }
     },
     onSuccess: (_, { key, type }) => {
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_DB_SIZE_QUERY_KEY]
+      });
       queryClient.setQueriesData(
         {
           queryKey: [FETCH_KEYS_QUERY_KEY]
@@ -3689,7 +3580,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', _28 => _28.at, 'call', _29 => _29(-1), 'optionalAccess', _30 => _30[0]]) : void 0;
+      const lastMessageId = messages.length > 0 ? _optionalChain([messages, 'access', _26 => _26.at, 'call', _27 => _27(-1), 'optionalAccess', _28 => _28[0]]) : void 0;
       return {
         cursor: messages.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : lastMessageId,
         keys: messages.map(([id, fields]) => ({
@@ -3784,6 +3675,9 @@ var useDeleteKey = () => {
     },
     onSuccess: (_, key) => {
       deleteKeyCache(key);
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_DB_SIZE_QUERY_KEY]
+      });
     }
   });
   return deleteKey;
@@ -3850,7 +3744,7 @@ var useEditListItem = () => {
         }
         case "stream": {
           if (!isNew || !newKey) throw new Error("Stream data type is not mutable");
-          const opts = transformArray(_nullishCoalesce(_optionalChain([newValue, 'optionalAccess', _31 => _31.split, 'call', _32 => _32("\n")]), () => ( []))).map(
+          const opts = transformArray(_nullishCoalesce(_optionalChain([newValue, 'optionalAccess', _29 => _29.split, 'call', _30 => _30("\n")]), () => ( []))).map(
             ({ key, value }) => [key, value]
           );
           pipe.xadd(dataKey, newKey, Object.fromEntries(opts));
@@ -3878,12 +3772,6 @@ 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);
 
@@ -3911,9 +3799,6 @@ var useFetchKeyLength = ({ dataKey, type }) => {
         case "stream": {
           return await redis.xlen(dataKey);
         }
-        case "search": {
-          return null;
-        }
       }
       return null;
     }
@@ -3941,7 +3826,7 @@ var LengthBadge = ({
   content
 }) => {
   const { data, isLoading } = useFetchKeyLength({ dataKey, type });
-  const length = _nullishCoalesce(_optionalChain([content, 'optionalAccess', _33 => _33.length]), () => ( data));
+  const length = _nullishCoalesce(_optionalChain([content, 'optionalAccess', _31 => _31.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 }) => {
@@ -3962,8 +3847,8 @@ var HeaderTTLBadge = ({ dataKey }) => {
     }
   );
 };
-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 }),
+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 }),
   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium", children })
 ] });
 
@@ -4025,7 +3910,7 @@ var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) =
   {
     ref,
     className: cn(
-      "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",
+      "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",
       className
     ),
     ...props,
@@ -4099,7 +3984,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, 
+      /* @__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, 
         "svg",
         {
           width: "15",
@@ -4118,7 +4003,7 @@ var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /
             }
           )
         }
-      ) }) }),
+      ) }) }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.ItemText, { children })
     ]
   }
@@ -4293,9 +4178,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 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 })
+  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 })
   ] }) }) });
 };
 
@@ -4365,8 +4250,8 @@ var useSetTTL = () => {
 
 // src/components/databrowser/components/item-context-menu.tsx
 
-var _reactcontextmenu = require('@radix-ui/react-context-menu'); var ContextMenuPrimitive = _interopRequireWildcard(_reactcontextmenu);
 
+var _reactcontextmenu = require('@radix-ui/react-context-menu'); var ContextMenuPrimitive = _interopRequireWildcard(_reactcontextmenu);
 
 // src/components/ui/context-menu.tsx
 
@@ -4579,8 +4464,7 @@ 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", {}),
@@ -4626,7 +4510,7 @@ var ItemContextMenu = ({
             editItem({
               type,
               dataKey,
-              itemKey: _optionalChain([data, 'optionalAccess', _34 => _34.key]),
+              itemKey: _optionalChain([data, 'optionalAccess', _32 => _32.key]),
               // For deletion
               newKey: void 0
             });
@@ -4661,7 +4545,7 @@ var ItemContextMenu = ({
           {
             onClick: () => {
               if (!data) return;
-              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _35 => _35.key]));
+              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _33 => _33.key]));
               toast({
                 description: "Key copied to clipboard"
               });
@@ -4673,11 +4557,11 @@ var ItemContextMenu = ({
             ]
           }
         ),
-        _optionalChain([data, 'optionalAccess', _36 => _36.value]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _optionalChain([data, 'optionalAccess', _34 => _34.value]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           ContextMenuItem,
           {
             onClick: () => {
-              navigator.clipboard.writeText(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _37 => _37.value]), () => ( "")));
+              navigator.clipboard.writeText(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _35 => _35.value]), () => ( "")));
               toast({
                 description: "Value copied to clipboard"
               });
@@ -4734,38 +4618,33 @@ var ItemContextMenu = ({
 
 var _reactscrollarea = require('@radix-ui/react-scroll-area'); var ScrollAreaPrimitive = _interopRequireWildcard(_reactscrollarea);
 
-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, {})
-      ]
-    }
-  )
-);
+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, {})
+    ]
+  }
+));
 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("mr-1 flex h-full w-2 touch-none select-none transition-colors", className),
+    className: cn("flex h-full w-2 touch-none select-none transition-colors", className),
     ...props,
     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       ScrollAreaPrimitive.ScrollAreaThumb,
@@ -4816,7 +4695,10 @@ var InfiniteScroll = ({
       type: "always",
       onScroll: handleScroll,
       ...props,
-      className: cn("block h-full w-full overflow-visible transition-all", props.className),
+      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
+      ),
       ref: scrollRef,
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: contentRef, children: [
         children,
@@ -4859,28 +4741,6 @@ var SimpleTooltip = ({
   ] });
 };
 
-// src/types/index.ts
-var DATA_TYPES = [
-  "string",
-  "list",
-  "hash",
-  "set",
-  "zset",
-  "json",
-  "stream",
-  "search"
-];
-var DATA_TYPE_NAMES = {
-  string: "String",
-  list: "List",
-  hash: "Hash",
-  set: "Set",
-  zset: "Sorted Set",
-  json: "JSON",
-  stream: "Stream",
-  search: "Search Index"
-};
-
 // src/components/databrowser/components/type-tag.tsx
 
 
@@ -4899,8 +4759,7 @@ 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 }),
-  search: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { size: 15, stroke: 1.2 })
+  stream: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconList, { size: 15, stroke: 1.2 })
 };
 var tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-center", {
   variants: {
@@ -4912,20 +4771,22 @@ var tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-cent
       json: "bg-purple-200 text-purple-800",
       list: "bg-orange-200 text-orange-800",
       stream: "bg-green-200 text-green-800",
-      search: "bg-rose-200 text-rose-800"
+      default: "bg-gray-200 text-gray-800"
     },
     type: {
       icon: "size-5",
-      badge: "h-[26px] px-2 uppercase whitespace-nowrap text-xs font-medium leading-none tracking-wide"
+      badge: "h-6 px-2 uppercase whitespace-nowrap text-xs font-medium leading-none tracking-wide"
     }
   },
   defaultVariants: {
-    variant: "string",
+    variant: "default",
     type: "icon"
   }
 });
 function TypeTag({ className, variant, type }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: cn(tagVariants({ variant, type, className })), children: type === "icon" ? iconsMap[variant] : DATA_TYPE_NAMES[variant] });
+  const defaultIcon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconQuestionMark, { size: 15, stroke: 1.2 });
+  const variantKey = variant && variant in iconsMap ? variant : "default";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: cn(tagVariants({ variant: variantKey, type, className })), children: type === "icon" ? _nullishCoalesce(iconsMap[variant], () => ( defaultIcon)) : _nullishCoalesce(_nullishCoalesce(DATA_TYPE_NAMES[variant], () => ( variant)), () => ( "Unknown")) });
 }
 
 // src/components/databrowser/components/display/key-actions.tsx
@@ -5055,13 +4916,7 @@ 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",
-        fill: "rgb(var(--color-zinc-500))"
-      }
-    ) }) }),
+    /* @__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.jsxs.call(void 0, DropdownMenuContent, { className: "", align: "end", children: [
       content && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         DropdownMenuItem,
@@ -5114,15 +4969,15 @@ var DisplayHeader = ({
   const handleAddItem = () => {
     setSelectedListItem({ key: type === "stream" ? "*" : "", isNew: true });
   };
-  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 }) }),
+  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 }) }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1", children: [
-        type !== "string" && type !== "json" && type !== "search" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Add item", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { onClick: handleAddItem, size: "icon-sm", "aria-label": "Add item", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "size-4 text-zinc-500 dark:text-zinc-600" }) }) }),
+        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" }) }) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyActions, { dataKey, content })
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center gap-1.5 overflow-scroll", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 flex-wrap items-center gap-1.5", 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 }),
@@ -5194,7 +5049,7 @@ var useSetHashTTL = () => {
 var HashFieldTTLBadge = ({ dataKey, field }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields: [field] });
   const { mutate: setTTL, isPending } = useSetHashTTL();
-  const expireAt = _optionalChain([data, 'optionalAccess', _38 => _38[field]]);
+  const expireAt = _optionalChain([data, 'optionalAccess', _36 => _36[field]]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     TTLBadge,
     {
@@ -5291,7 +5146,7 @@ var MonacoEditor = ({
     if (!active || !monaco || !editorRef.current) {
       return;
     }
-    _optionalChain([monaco, 'optionalAccess', _39 => _39.editor, 'access', _40 => _40.setModelLanguage, 'call', _41 => _41(editorRef.current.getModel(), language)]);
+    _optionalChain([monaco, 'optionalAccess', _37 => _37.editor, 'access', _38 => _38.setModelLanguage, 'call', _39 => _39(editorRef.current.getModel(), language)]);
   }, [monaco, language, active]);
   const editor = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _react2.Editor,
@@ -5432,7 +5287,7 @@ var checkIsValidJSON = (value) => {
   try {
     JSON.parse(value);
     return true;
-  } catch (e4) {
+  } catch (e3) {
     return false;
   }
 };
@@ -5456,7 +5311,7 @@ var ListEditForm = ({
     dataKey
   });
   const findValue = () => {
-    for (const page of _nullishCoalesce(_optionalChain([query, 'access', _42 => _42.data, 'optionalAccess', _43 => _43.pages]), () => ( []))) {
+    for (const page of _nullishCoalesce(_optionalChain([query, 'access', _40 => _40.data, 'optionalAccess', _41 => _41.pages]), () => ( []))) {
       const item = page.keys.find((item2) => item2.key === itemKey);
       if (item && "value" in item) return item.value;
     }
@@ -5602,7 +5457,7 @@ var HashFieldTTLInfo = ({
   fields
 }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields });
-  const expireAt = _optionalChain([data, 'optionalAccess', _44 => _44[field]]);
+  const expireAt = _optionalChain([data, 'optionalAccess', _42 => _42[field]]);
   const [ttl, setTTL] = _react.useState.call(void 0, () => calculateTTL(expireAt));
   _react.useEffect.call(void 0, () => {
     setTTL(calculateTTL(expireAt));
@@ -5630,7 +5485,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, 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 }) }) }) }) }) })
+    /* @__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 }) }) }) }) }) })
   ] });
 };
 var ListItems = ({
@@ -5639,7 +5494,7 @@ var ListItems = ({
   dataKey
 }) => {
   const { setSelectedListItem } = useTab();
-  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 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 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, 
@@ -5651,7 +5506,7 @@ var ListItems = ({
         setSelectedListItem({ key });
       },
       className: cn(
-        "h-9 border-b border-b-zinc-100 transition-colors hover:bg-zinc-100 dark:border-b-zinc-200 dark:hover:bg-zinc-200"
+        "h-10 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, 
@@ -5715,17 +5570,6 @@ 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
 
 
@@ -5781,55 +5625,10 @@ var DataDisplay = () => {
   const { selectedKey } = useTab();
   const { query } = useKeys();
   const type = useKeyType(selectedKey);
-  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;
-    }
-  });
+  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", {}) : !DATA_TYPES.includes(type) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-zinc-500", children: [
+    "Unrecognized key type: ",
+    type
+  ] }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: SIMPLE_DATA_TYPES.includes(type) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
 };
 
 // src/components/databrowser/components/add-key-modal.tsx
@@ -5837,7 +5636,6 @@ var useFetchSearchIndexes = (match) => {
 var _reactdialog = require('@radix-ui/react-dialog'); var DialogPrimitive = _interopRequireWildcard(_reactdialog);
 
 
-
 // src/components/ui/dialog.tsx
 
 
@@ -5941,6 +5739,7 @@ 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);
@@ -5956,7 +5755,7 @@ function AddKeyModal() {
     setSelectedKey(key);
     setOpen(false);
     setTimeout(() => {
-      _optionalChain([window, 'access', _50 => _50.document, 'access', _51 => _51.querySelector, 'call', _52 => _52(`[data-key="${key}"]`), 'optionalAccess', _53 => _53.scrollIntoView, 'call', _54 => _54({
+      _optionalChain([window, 'access', _47 => _47.document, 'access', _48 => _48.querySelector, 'call', _49 => _49(`[data-key="${key}"]`), 'optionalAccess', _50 => _50.scrollIntoView, 'call', _51 => _51({
         behavior: "smooth",
         block: "start",
         inline: "nearest"
@@ -5972,18 +5771,7 @@ 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.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.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.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" }) }),
@@ -5996,7 +5784,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.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)) }) })
+                    /* @__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)) }) })
                   ] })
                 }
               ),
@@ -6012,7 +5800,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', _55 => _55.errors, 'access', _56 => _56.key, 'optionalAccess', _57 => _57.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', _52 => _52.errors, 'access', _53 => _53.key, 'optionalAccess', _54 => _54.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, 
@@ -6035,792 +5823,19 @@ function AddKeyModal() {
   );
 }
 
-// src/components/databrowser/components/sidebar/reload-button.tsx
+// 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
 
-var ReloadButton = ({
-  onClick,
-  isLoading: isLoadingProp
-}) => {
-  const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
-  const handleClick = () => {
-    setIsLoading(true);
-    onClick();
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 350);
-  };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Refresh", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    Button,
-    {
-      variant: "outline",
-      size: "icon",
-      onClick: handleClick,
-      disabled: isLoading || isLoadingProp,
-      children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLoader2, { className: "size-5 animate-spin text-zinc-500" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconRefresh, { className: "size-5 text-zinc-500 dark:text-zinc-600" })
-    }
-  ) }) });
-};
 
-// src/components/databrowser/components/sidebar/search-input.tsx
-
-
-
-var dedupeSearchHistory = (history) => {
-  const seen = /* @__PURE__ */ new Set();
-  return history.filter((item) => {
-    if (!item || seen.has(item)) return false;
-    seen.add(item);
-    return true;
-  });
-};
-var SearchInput = () => {
-  const { setSearchKey, search } = useTab();
-  const { searchHistory, addSearchHistory } = useDatabrowserStore();
-  const [state, setState] = _react.useState.call(void 0, search.key);
-  const [isFocus, setIsFocus] = _react.useState.call(void 0, false);
-  const [focusedIndex, setFocusedIndex] = _react.useState.call(void 0, -1);
-  const inputRef = _react.useRef.call(void 0, null);
-  const historyItemRefs = _react.useRef.call(void 0, []);
-  const handleSubmit = (value) => {
-    if (value.trim() !== "" && !value.includes("*")) value = `${value}*`;
-    addSearchHistory(value);
-    setSearchKey(value);
-    setState(value);
-  };
-  const filteredHistory = dedupeSearchHistory(
-    searchHistory.filter((item) => item.trim() !== "" && item.trim() !== "*").filter((item) => item.includes(state) && item !== state)
-  ).slice(0, 5).map((item) => item.endsWith("*") ? item.slice(0, -1) : item);
-  _react.useEffect.call(void 0, () => {
-    setFocusedIndex(-1);
-  }, [filteredHistory.length]);
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter") {
-      const text = focusedIndex >= 0 && focusedIndex < filteredHistory.length ? filteredHistory[focusedIndex] : e.currentTarget.value;
-      handleSubmit(text);
-    } else if (e.key === "Escape") {
-      setState("");
-      setFocusedIndex(-1);
-      _optionalChain([inputRef, 'access', _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) {
-        setFocusedIndex(focusedIndex + 1);
-      } else if (filteredHistory.length > 0) {
-        setFocusedIndex(0);
-      }
-    } else if (e.key === "ArrowUp" || e.key === "Tab" && e.shiftKey) {
-      e.preventDefault();
-      if (focusedIndex > 0) {
-        setFocusedIndex(focusedIndex - 1);
-      } else if (filteredHistory.length > 0 && focusedIndex === 0) {
-        setFocusedIndex(-1);
-        _optionalChain([inputRef, 'access', _61 => _61.current, 'optionalAccess', _62 => _62.focus, 'call', _63 => _63()]);
-      } else if (filteredHistory.length > 0) {
-        setFocusedIndex(filteredHistory.length - 1);
-      }
-    }
-  };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative grow", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Popover, { open: isFocus && filteredHistory.length > 0, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-8 rounded-md border border-zinc-300 font-normal", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        Input,
-        {
-          ref: inputRef,
-          placeholder: "Search",
-          className: "h-full border-none pr-6",
-          onKeyDown: handleKeyDown,
-          onChange: (e) => {
-            setState(e.currentTarget.value);
-            if (e.currentTarget.value.trim() === "") handleSubmit("");
-          },
-          value: state,
-          onFocus: () => {
-            setIsFocus(true);
-            setFocusedIndex(-1);
-          },
-          onBlur: () => setIsFocus(false)
-        }
-      ) }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        PopoverContent,
-        {
-          className: "w-[--radix-popover-trigger-width] divide-y px-3 py-2 text-[13px] text-zinc-900",
-          autoFocus: false,
-          onOpenAutoFocus: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          },
-          children: filteredHistory.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-full py-[3px]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "button",
-            {
-              ref: (el) => {
-                historyItemRefs.current[index] = el;
-              },
-              onClick: () => handleSubmit(item),
-              onMouseEnter: () => setFocusedIndex(index),
-              className: `block w-full truncate rounded-sm p-1 text-left transition-colors ${focusedIndex === index ? "bg-zinc-100" : "hover:bg-zinc-100"}`,
-              children: item
-            }
-          ) }, item))
-        }
-      )
-    ] }),
-    state && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      Button,
-      {
-        type: "button",
-        variant: "link",
-        size: "icon",
-        className: "absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 text-zinc-500 hover:text-zinc-900",
-        onClick: () => {
-          setSearchKey("");
-          setState("");
-        },
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconX, { size: 16 }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Clear" })
-        ]
-      }
-    ),
-    " "
-  ] });
-};
-
-// src/components/databrowser/components/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
+// src/components/databrowser/components/sidebar-context-menu.tsx
 
 
 
@@ -6829,13 +5844,8 @@ 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();
+  const { addTab, setSelectedKey: setSelectedKeyGlobal, selectTab, setSearch } = useDatabrowserStore();
+  const { search: currentSearch, selectedKeys } = useTab();
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       DeleteAlertDialog,
@@ -6865,7 +5875,6 @@ var SidebarContextMenu = ({ children }) => {
               if (selectedKeys.includes(clickedKey)) {
                 setContextKeys(selectedKeys);
               } else {
-                setSelectedKey(clickedKey);
                 setContextKeys([clickedKey]);
               }
             } else {
@@ -6929,130 +5938,328 @@ var KeysList = () => {
     /* @__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,
+        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 defaultKeyStyle = "border-gray-400 !bg-gray-50 text-gray-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 && (_nullishCoalesce(keyStyles[dataType], () => ( defaultKeyStyle)))
+      ),
+      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
+
+
+
+var dedupeSearchHistory = (history) => {
+  const seen = /* @__PURE__ */ new Set();
+  return history.filter((item) => {
+    if (!item || seen.has(item)) return false;
+    seen.add(item);
+    return true;
+  });
+};
+var SearchInput = () => {
+  const { setSearchKey, search } = useTab();
+  const { searchHistory, addSearchHistory } = useDatabrowserStore();
+  const [state, setState] = _react.useState.call(void 0, search.key);
+  const [isFocus, setIsFocus] = _react.useState.call(void 0, false);
+  const [focusedIndex, setFocusedIndex] = _react.useState.call(void 0, -1);
+  const inputRef = _react.useRef.call(void 0, null);
+  const historyItemRefs = _react.useRef.call(void 0, []);
+  const handleSubmit = (value) => {
+    if (value.trim() !== "" && !value.includes("*")) value = `${value}*`;
+    addSearchHistory(value);
+    setSearchKey(value);
+    setState(value);
+  };
+  const filteredHistory = dedupeSearchHistory(
+    searchHistory.filter((item) => item.trim() !== "" && item.trim() !== "*").filter((item) => item.includes(state) && item !== state)
+  ).slice(0, 5).map((item) => item.endsWith("*") ? item.slice(0, -1) : item);
+  _react.useEffect.call(void 0, () => {
+    setFocusedIndex(-1);
+  }, [filteredHistory.length]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      const text = focusedIndex >= 0 && focusedIndex < filteredHistory.length ? filteredHistory[focusedIndex] : e.currentTarget.value;
+      handleSubmit(text);
+    } else if (e.key === "Escape") {
+      setState("");
+      setFocusedIndex(-1);
+      _optionalChain([inputRef, 'access', _55 => _55.current, 'optionalAccess', _56 => _56.blur, 'call', _57 => _57()]);
+    } else if (e.key === "ArrowDown" || e.key === "Tab" && !e.shiftKey) {
+      e.preventDefault();
+      if (focusedIndex < filteredHistory.length - 1) {
+        setFocusedIndex(focusedIndex + 1);
+      } else if (filteredHistory.length > 0) {
+        setFocusedIndex(0);
+      }
+    } else if (e.key === "ArrowUp" || e.key === "Tab" && e.shiftKey) {
+      e.preventDefault();
+      if (focusedIndex > 0) {
+        setFocusedIndex(focusedIndex - 1);
+      } else if (filteredHistory.length > 0 && focusedIndex === 0) {
+        setFocusedIndex(-1);
+        _optionalChain([inputRef, 'access', _58 => _58.current, 'optionalAccess', _59 => _59.focus, 'call', _60 => _60()]);
+      } else if (filteredHistory.length > 0) {
+        setFocusedIndex(filteredHistory.length - 1);
+      }
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative grow", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Popover, { open: isFocus && filteredHistory.length > 0, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-8 rounded-md rounded-l-none 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",
+          onKeyDown: handleKeyDown,
+          onChange: (e) => {
+            setState(e.currentTarget.value);
+            if (e.currentTarget.value.trim() === "") handleSubmit("");
+          },
+          value: state,
+          onFocus: () => {
+            setIsFocus(true);
+            setFocusedIndex(-1);
+          },
+          onBlur: () => setIsFocus(false)
+        }
+      ) }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        PopoverContent,
         {
-          index: i,
-          data,
-          allKeys: keys,
-          lastClickedIndexRef
+          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))
         }
-      ),
-      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]);
+      )
+    ] }),
+    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" })
+        ]
       }
-      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 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: [
+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: [
   /* @__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.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, {}) });
+  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, {})
+  ] });
 }
 
 // src/components/databrowser/components/databrowser-instance.tsx
 
-var PREFIX = "const query: Query = ";
 var DatabrowserInstance = ({ hidden }) => {
-  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, {})
-      ]
-    }
-  ) });
+  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, {})
+  ] }) });
 };
 
 // src/components/databrowser/components/databrowser-tabs.tsx
@@ -7072,9 +6279,9 @@ var _utilities = require('@dnd-kit/utilities');
 
 // src/components/ui/command.tsx
 
-
 var _cmdk = require('cmdk');
 
+
 var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
   _cmdk.Command,
   {
@@ -7161,6 +6368,15 @@ 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 = () => {
@@ -7173,7 +6389,7 @@ var useOverflow = () => {
     }
     if (!node) return;
     observerRef.current = new ResizeObserver((entries) => {
-      const el = _optionalChain([entries, 'access', _67 => _67.at, 'call', _68 => _68(0), 'optionalAccess', _69 => _69.target]);
+      const el = _optionalChain([entries, 'access', _61 => _61.at, 'call', _62 => _62(0), 'optionalAccess', _63 => _63.target]);
       if (!el) return;
       setIsOverflow(el.scrollWidth > el.clientWidth);
     });
@@ -7181,25 +6397,16 @@ var useOverflow = () => {
   }, []);
   _react.useEffect.call(void 0, () => {
     return () => {
-      _optionalChain([observerRef, 'access', _70 => _70.current, 'optionalAccess', _71 => _71.disconnect, 'call', _72 => _72()]);
+      _optionalChain([observerRef, 'access', _64 => _64.current, 'optionalAccess', _65 => _65.disconnect, 'call', _66 => _66()]);
     };
   }, []);
   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, valuesSearch, pinned, isValuesSearchSelected } = useTab();
+  const { active, search, selectedKey, pinned } = useTab();
   const {
     selectTab,
     removeTab,
@@ -7212,20 +6419,21 @@ var Tab = ({ id, isList }) => {
   } = useDatabrowserStore();
   const hasPinnedTabs = tabs.some(([, data]) => data.pinned);
   const { ref, isOverflow } = useOverflow();
-  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 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 tabNode = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
       id: isList ? `list-tab-${id}` : `tab-${id}`,
       onClick: () => selectTab(id),
       className: cn(
-        "flex h-[40px] w-full cursor-pointer items-center gap-2 rounded-t-lg px-3 text-[13px] transition-colors",
+        "flex h-9 w-full cursor-pointer items-center gap-2 px-3 text-[13px] transition-colors",
         isList && "max-w-[370px]",
-        !isList && (active ? "bg-white text-zinc-950" : "bg-zinc-200 text-zinc-600 hover:bg-zinc-100")
+        !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")
       ),
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn(!active && "transition-colors"), children: iconNode }),
+        iconNode,
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "span",
           {
@@ -7242,7 +6450,7 @@ var Tab = ({ id, isList }) => {
               e.stopPropagation();
               removeTab(id);
             },
-            className: "p-[2px] text-zinc-400 transition-colors hover:text-zinc-500",
+            className: "p-1 text-zinc-300 transition-colors hover:text-zinc-500 dark:text-zinc-400",
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconX, { size: 16 })
           }
         )
@@ -7299,8 +6507,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', _73 => _73.find, 'call', _74 => _74(([tabId]) => tabId === id), 'optionalAccess', _75 => _75[1]]);
-  const isPinned = _optionalChain([tabData, 'optionalAccess', _76 => _76.pinned]);
+  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 { attributes, listeners: listeners2, setNodeRef, transform, transition, isDragging } = _sortable.useSortable.call(void 0, {
     id,
     disabled: isPinned,
@@ -7445,70 +6653,73 @@ var DatabrowserTabs = ({ onFullScreenClick }) => {
       reorderTabs(oldIndex, newIndex);
     }
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "relative shrink-0 overflow-hidden rounded-t-lg bg-zinc-300", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1", children: [
-    /* @__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 })
-        }
-      )
+  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 })
+          }
+        )
+      ] })
     ] })
-  ] }) });
+  ] });
 };
 function AddTabButton() {
   const { addTab, selectTab } = useDatabrowserStore();
@@ -7517,7 +6728,7 @@ function AddTabButton() {
     const tabsId = addTab();
     selectTab(tabsId);
     setTimeout(() => {
-      const tab = _optionalChain([rootRef, 'optionalAccess', _77 => _77.current, 'optionalAccess', _78 => _78.querySelector, 'call', _79 => _79(`#tab-${tabsId}`)]);
+      const tab = _optionalChain([rootRef, 'optionalAccess', _71 => _71.current, 'optionalAccess', _72 => _72.querySelector, 'call', _73 => _73(`#tab-${tabsId}`)]);
       if (!tab) return;
       tab.scrollIntoView({ behavior: "smooth" });
     }, 20);
@@ -7529,8 +6740,8 @@ function AddTabButton() {
       variant: "secondary",
       size: "icon-sm",
       onClick: handleAddTab,
-      className: "flex-shrink-0 bg-zinc-200 ",
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "text-zinc-600", size: 16 })
+      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 })
     }
   );
 }
@@ -7551,7 +6762,7 @@ function TabsListButton({
     onSelectTab(id);
     setOpen(false);
     setTimeout(() => {
-      const tab = _optionalChain([rootRef, 'optionalAccess', _80 => _80.current, 'optionalAccess', _81 => _81.querySelector, 'call', _82 => _82(`#tab-${id}`)]);
+      const tab = _optionalChain([rootRef, 'optionalAccess', _74 => _74.current, 'optionalAccess', _75 => _75.querySelector, 'call', _76 => _76(`#tab-${id}`)]);
       if (!tab) return;
       tab.scrollIntoView({ behavior: "smooth" });
     }, 20);
@@ -7562,7 +6773,7 @@ function TabsListButton({
       {
         variant: "secondary",
         size: "sm",
-        className: "gap-1 bg-white px-2",
+        className: "h-7 gap-1 px-2",
         "aria-label": "Search in tabs",
         children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs text-zinc-600", children: tabs.length }),
@@ -7633,7 +6844,7 @@ var RedisBrowserRoot = ({
         className: `ups-db ${theme === "dark" ? "dark" : ""}`,
         style: { height: "100%" },
         ref: rootRef,
-        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col overflow-hidden rounded-[14px] border-[4px] border-zinc-300 text-zinc-700", children: [
+        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col text-zinc-700", children: [
           !hideTabs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserTabs, { onFullScreenClick }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserInstances, {})
         ] })