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

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/databrowser/index.tsx
-import { useEffect as useEffect15, useMemo as useMemo10, useRef as useRef8 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo9, useRef as useRef7 } from "react";
 
 // src/dark-mode-context.tsx
 import { createContext, useContext } from "react";
@@ -193,10 +193,7 @@ var queryClient = new QueryClient({
     }
   },
   queryCache: new QueryCache({
-    onError: (error, query) => {
-      if (query.meta?.hideToast) return;
-      handleError(error);
-    }
+    onError: handleError
   }),
   mutationCache: new 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: oldData.valuesSearch ?? { index: "", query: "" },
-                  isValuesSearchSelected: 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) => ({
@@ -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,11 +498,7 @@ var useTab = () => {
     setSelectedListItem,
     setSearch,
     setSearchKey,
-    setSearchType,
-    setValuesSearch,
-    setValuesSearchIndex,
-    setValuesSearchQuery,
-    setIsValuesSearchSelected
+    setSearchType
   } = useDatabrowserStore();
   const tabId = useTabId();
   const tabData = useMemo3(() => tabs.find(([id]) => id === tabId)?.[1], [tabs, tabId]);
@@ -586,19 +512,13 @@ var useTab = () => {
       selectedKeys: 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]
   );
@@ -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 {
-    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 @@ import { Portal } from "@radix-ui/react-portal";
 
 // src/components/ui/toast.tsx
 import * as React2 from "react";
-import * as ToastPrimitives from "@radix-ui/react-toast";
 import { IconX } from "@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;
-}
+import * as ToastPrimitives from "@radix-ui/react-toast";
 
 // 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
 import { createContext as createContext5, useContext as useContext5, useMemo as useMemo4 } from "react";
 import { useInfiniteQuery } from "@tanstack/react-query";
@@ -3327,39 +3240,15 @@ var useFetchKeyType = (key) => {
   });
 };
 
-// src/components/databrowser/hooks/use-fetch-search-index.tsx
-import { useQuery as useQuery2 } from "@tanstack/react-query";
-var FETCH_SEARCH_INDEX_QUERY_KEY = "fetch-search-index";
-var useFetchSearchIndex = (indexName) => {
-  const { redisNoPipeline: redis } = useRedis();
-  return useQuery2({
-    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
 import { jsx as jsx7 } from "react/jsx-runtime";
 var KeysContext = createContext5(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: 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 = useInfiniteQuery({
-    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,9 +3300,6 @@ var KeysProvider = ({ children }) => {
         hasNextPage: cursor !== "0"
       };
     },
-    meta: {
-      hideToast: true
-    },
     select: (data) => data,
     getNextPageParam: ({ cursor }) => cursor,
     refetchOnMount: false
@@ -3460,10 +3320,7 @@ var KeysProvider = ({ children }) => {
     {
       value: {
         keys,
-        query: {
-          ...query,
-          isLoading: query.isLoading || isIndexDetailsLoading
-        }
+        query
       },
       children
     }
@@ -3491,24 +3348,24 @@ import * as React3 from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { jsx as jsx8 } from "react/jsx-runtime";
 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
 import { useMutation } from "@tanstack/react-query";
+
+// src/components/databrowser/components/sidebar/db-size.tsx
+import { useQuery as useQuery2 } from "@tanstack/react-query";
+
+// src/components/ui/skeleton.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx9("div", { className: cn("animate-pulse rounded-md bg-zinc-900/10", className), ...props });
+}
+
+// src/components/databrowser/components/sidebar/db-size.tsx
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+var FETCH_DB_SIZE_QUERY_KEY = "fetch-db-size";
+var DisplayDbSize = () => {
+  const { redis } = useRedis();
+  const { data: keyCount } = useQuery2({
+    queryKey: [FETCH_DB_SIZE_QUERY_KEY],
+    queryFn: async () => {
+      return await redis.dbsize();
+    }
+  });
+  if (keyCount === void 0) {
+    return /* @__PURE__ */ jsx10("div", { className: "flex items-center justify-center gap-1", children: /* @__PURE__ */ jsx10(Skeleton, { className: "h-5 w-10 rounded" }) });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "", children: [
+    formatNumber(keyCount),
+    " Keys"
+  ] });
+};
+
+// src/components/databrowser/hooks/use-add-key.ts
 var useAddKey = () => {
   const { redis } = useRedis();
   const mutation = useMutation({
@@ -3577,6 +3465,9 @@ var useAddKey = () => {
       }
     },
     onSuccess: (_, { key, type }) => {
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_DB_SIZE_QUERY_KEY]
+      });
       queryClient.setQueriesData(
         {
           queryKey: [FETCH_KEYS_QUERY_KEY]
@@ -3784,6 +3675,9 @@ var useDeleteKey = () => {
     },
     onSuccess: (_, key) => {
       deleteKeyCache(key);
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_DB_SIZE_QUERY_KEY]
+      });
     }
   });
   return deleteKey;
@@ -3878,12 +3772,6 @@ import { useQuery as useQuery6 } from "@tanstack/react-query";
 import { useEffect as useEffect4, useState as useState4 } from "react";
 import { IconChevronDown } from "@tabler/icons-react";
 
-// src/components/ui/skeleton.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx9("div", { className: cn("animate-pulse rounded-md bg-zinc-900/10", className), ...props });
-}
-
 // src/components/databrowser/components/display/header-badges.tsx
 import bytes from "bytes";
 
@@ -3911,9 +3799,6 @@ var useFetchKeyLength = ({ dataKey, type }) => {
         case "stream": {
           return await redis.xlen(dataKey);
         }
-        case "search": {
-          return null;
-        }
       }
       return null;
     }
@@ -3934,7 +3819,7 @@ var useFetchKeySize = (dataKey) => {
 };
 
 // src/components/databrowser/components/display/header-badges.tsx
-import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 var LengthBadge = ({
   dataKey,
   type,
@@ -3942,18 +3827,18 @@ var LengthBadge = ({
 }) => {
   const { data, isLoading } = useFetchKeyLength({ dataKey, type });
   const length = content?.length ?? data;
-  return /* @__PURE__ */ jsx10(Badge, { label: "Length:", children: isLoading ? /* @__PURE__ */ jsx10(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : length });
+  return /* @__PURE__ */ jsx11(Badge, { label: "Length:", children: isLoading ? /* @__PURE__ */ jsx11(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : length });
 };
 var SizeBadge = ({ dataKey }) => {
   const { data: size } = useFetchKeySize(dataKey);
-  return /* @__PURE__ */ jsx10(Badge, { label: "Size:", children: size === void 0 || size === null ? /* @__PURE__ */ jsx10(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : bytes(size, {
+  return /* @__PURE__ */ jsx11(Badge, { label: "Size:", children: size === void 0 || size === null ? /* @__PURE__ */ jsx11(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : bytes(size, {
     unitSeparator: " "
   }) });
 };
 var HeaderTTLBadge = ({ dataKey }) => {
   const { data: expireAt } = useFetchTTL(dataKey);
   const { mutate: setTTL, isPending } = useSetTTL();
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     TTLBadge,
     {
       expireAt,
@@ -3962,9 +3847,9 @@ var HeaderTTLBadge = ({ dataKey }) => {
     }
   );
 };
-var Badge = ({ children, label }) => /* @__PURE__ */ jsxs2("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__ */ jsx10("span", { className: "text-zinc-500 dark:text-zinc-500", children: label }),
-  /* @__PURE__ */ jsx10("span", { className: "font-medium", children })
+var Badge = ({ children, label }) => /* @__PURE__ */ jsxs3("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__ */ jsx11("span", { className: "text-zinc-500 dark:text-zinc-600", children: label }),
+  /* @__PURE__ */ jsx11("span", { className: "font-medium", children })
 ] });
 
 // src/components/databrowser/components/display/ttl-popover.tsx
@@ -3973,10 +3858,10 @@ import { Controller, useForm } from "react-hook-form";
 
 // src/components/ui/input.tsx
 import * as React4 from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var Input = React4.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       "input",
       {
         type,
@@ -3995,10 +3880,10 @@ Input.displayName = "Input";
 // src/components/ui/popover.tsx
 import * as React5 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx12(PopoverPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx12(
+var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx13(PopoverPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx13(
   PopoverPrimitive.Content,
   {
     ref,
@@ -4016,22 +3901,22 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 // src/components/ui/select.tsx
 import * as React6 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs3(
+var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
   SelectPrimitive.Trigger,
   {
     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,
     children: [
       children,
-      /* @__PURE__ */ jsx13(SelectPrimitive.Icon, { asChild: true, className: "absolute right-2", children: /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(SelectPrimitive.Icon, { asChild: true, className: "absolute right-2", children: /* @__PURE__ */ jsx14(
         "svg",
         {
           width: "16",
@@ -4039,7 +3924,7 @@ var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) =
           viewBox: "0 0 16 16",
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
-          children: /* @__PURE__ */ jsx13(
+          children: /* @__PURE__ */ jsx14(
             "path",
             {
               d: "M4 6L8 10L12 6",
@@ -4056,7 +3941,7 @@ var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) =
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectContent = React6.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx13(SelectPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx13(
+var SelectContent = React6.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx14(SelectPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx14(
   SelectPrimitive.Content,
   {
     ref,
@@ -4067,7 +3952,7 @@ var SelectContent = React6.forwardRef(({ className, children, position = "popper
     ),
     position,
     ...props,
-    children: /* @__PURE__ */ jsx13(
+    children: /* @__PURE__ */ jsx14(
       SelectPrimitive.Viewport,
       {
         className: cn(
@@ -4080,7 +3965,7 @@ var SelectContent = React6.forwardRef(({ className, children, position = "popper
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+var SelectLabel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
   SelectPrimitive.Label,
   {
     ref,
@@ -4089,7 +3974,7 @@ var SelectLabel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs3(
+var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
   SelectPrimitive.Item,
   {
     ref,
@@ -4099,7 +3984,7 @@ var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx13("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx13(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx14(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx14(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx14(
         "svg",
         {
           width: "15",
@@ -4108,7 +3993,7 @@ var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           className: "h-4 w-4",
-          children: /* @__PURE__ */ jsx13(
+          children: /* @__PURE__ */ jsx14(
             "path",
             {
               d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
@@ -4118,13 +4003,13 @@ var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /
             }
           )
         }
-      ) }) }),
-      /* @__PURE__ */ jsx13(SelectPrimitive.ItemText, { children })
+      ) }) }) }),
+      /* @__PURE__ */ jsx14(SelectPrimitive.ItemText, { children })
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+var SelectSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
   SelectPrimitive.Separator,
   {
     ref,
@@ -4135,16 +4020,16 @@ var SelectSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/ui/spinner.tsx
-import { Fragment, jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
 var Spinner = ({
   isLoading,
   className,
   isLoadingText,
   children
 }) => {
-  return /* @__PURE__ */ jsx14("div", { className: className ?? "flex items-center", children: isLoading ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+  return /* @__PURE__ */ jsx15("div", { className: className ?? "flex items-center", children: isLoading ? /* @__PURE__ */ jsxs5(Fragment, { children: [
     isLoadingText,
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -4157,14 +4042,14 @@ var Spinner = ({
         strokeLinecap: "round",
         strokeLinejoin: "round",
         className: cn("h-4 w-4 animate-spin", isLoadingText ? "ml-2" : ""),
-        children: /* @__PURE__ */ jsx14("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+        children: /* @__PURE__ */ jsx15("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
       }
     )
   ] }) : children });
 };
 
 // src/components/databrowser/components/display/ttl-popover.tsx
-import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
 var timeUnits = [
   { label: "Seconds", value: 1 },
   { label: "Minutes", value: 60 },
@@ -4197,7 +4082,7 @@ function TTLPopover({
     await setTTL(TTL_INFINITE);
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     Popover,
     {
       open,
@@ -4206,8 +4091,8 @@ function TTLPopover({
         setOpen(isOpen);
       },
       children: [
-        /* @__PURE__ */ jsx15(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx15("button", { children }) }),
-        /* @__PURE__ */ jsx15(PopoverContent, { className: "w-[300px]", align: "end", children: /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsx16(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx16("button", { children }) }),
+        /* @__PURE__ */ jsx16(PopoverContent, { className: "w-[300px]", align: "end", children: /* @__PURE__ */ jsxs6(
           "form",
           {
             className: "space-y-4",
@@ -4216,10 +4101,10 @@ function TTLPopover({
               e.stopPropagation();
             },
             children: [
-              /* @__PURE__ */ jsx15("h4", { className: "font-medium leading-none", children: "Expiration" }),
-              /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsxs5("div", { className: "flex items-center", children: [
-                  /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16("h4", { className: "font-medium leading-none", children: "Expiration" }),
+              /* @__PURE__ */ jsxs6("div", { children: [
+                /* @__PURE__ */ jsxs6("div", { className: "flex items-center", children: [
+                  /* @__PURE__ */ jsx16(
                     Controller,
                     {
                       rules: {
@@ -4228,26 +4113,26 @@ function TTLPopover({
                       },
                       control,
                       name: "value",
-                      render: ({ field }) => /* @__PURE__ */ jsx15(Input, { min: "-1", ...field, className: "grow rounded-r-none" })
+                      render: ({ field }) => /* @__PURE__ */ jsx16(Input, { min: "-1", ...field, className: "grow rounded-r-none" })
                     }
                   ),
-                  /* @__PURE__ */ jsx15(
+                  /* @__PURE__ */ jsx16(
                     Controller,
                     {
                       control,
                       name: "type",
-                      render: ({ field }) => /* @__PURE__ */ jsxs5(Select, { value: field.value, onValueChange: field.onChange, children: [
-                        /* @__PURE__ */ jsx15(SelectTrigger, { className: "w-auto rounded-l-none border-l-0 pr-8", children: /* @__PURE__ */ jsx15(SelectValue, {}) }),
-                        /* @__PURE__ */ jsx15(SelectContent, { children: timeUnits.map((unit) => /* @__PURE__ */ jsx15(SelectItem, { value: unit.label, children: unit.label }, unit.label)) })
+                      render: ({ field }) => /* @__PURE__ */ jsxs6(Select, { value: field.value, onValueChange: field.onChange, children: [
+                        /* @__PURE__ */ jsx16(SelectTrigger, { className: "w-auto rounded-l-none border-l-0 pr-8", children: /* @__PURE__ */ jsx16(SelectValue, {}) }),
+                        /* @__PURE__ */ jsx16(SelectContent, { children: timeUnits.map((unit) => /* @__PURE__ */ jsx16(SelectItem, { value: unit.label, children: unit.label }, unit.label)) })
                       ] })
                     }
                   )
                 ] }),
-                formState.errors.value && /* @__PURE__ */ jsx15("p", { className: "mt-2 text-xs text-red-500", children: formState.errors.value.message }),
-                /* @__PURE__ */ jsx15("p", { className: "mt-2 text-xs text-zinc-500", children: "TTL sets a timer to automatically delete keys after a defined period." })
+                formState.errors.value && /* @__PURE__ */ jsx16("p", { className: "mt-2 text-xs text-red-500", children: formState.errors.value.message }),
+                /* @__PURE__ */ jsx16("p", { className: "mt-2 text-xs text-zinc-500", children: "TTL sets a timer to automatically delete keys after a defined period." })
               ] }),
-              /* @__PURE__ */ jsxs5("div", { className: "flex justify-between", children: [
-                /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsxs6("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsx16(
                   Button,
                   {
                     type: "button",
@@ -4257,9 +4142,9 @@ function TTLPopover({
                     children: "Persist"
                   }
                 ),
-                /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ jsx15(Button, { variant: "outline", onClick: () => setOpen(false), type: "button", children: "Cancel" }),
-                  /* @__PURE__ */ jsx15(Button, { variant: "primary", type: "submit", children: /* @__PURE__ */ jsx15(Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" }) })
+                /* @__PURE__ */ jsxs6("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsx16(Button, { variant: "outline", onClick: () => setOpen(false), type: "button", children: "Cancel" }),
+                  /* @__PURE__ */ jsx16(Button, { variant: "primary", type: "submit", children: /* @__PURE__ */ jsx16(Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" }) })
                 ] })
               ] })
             ]
@@ -4271,7 +4156,7 @@ function TTLPopover({
 }
 
 // src/components/databrowser/components/display/ttl-badge.tsx
-import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
 var TTL_INFINITE = -1;
 var TTL_NOT_FOUND = -2;
 var calculateTTL = (expireAt) => {
@@ -4293,9 +4178,9 @@ var TTLBadge = ({
     }, 1e3);
     return () => clearInterval(interval);
   }, [expireAt]);
-  return /* @__PURE__ */ jsx16(Badge, { label, children: ttl === void 0 ? /* @__PURE__ */ jsx16(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : /* @__PURE__ */ jsx16(TTLPopover, { ttl, setTTL, isPending, children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-[2px]", children: [
-    ttl === TTL_INFINITE ? "No" : formatTime(ttl),
-    /* @__PURE__ */ jsx16(IconChevronDown, { className: "shrink-0 text-zinc-400", size: 16 })
+  return /* @__PURE__ */ jsx17(Badge, { label, children: ttl === void 0 ? /* @__PURE__ */ jsx17(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : /* @__PURE__ */ jsx17(TTLPopover, { ttl, setTTL, isPending, children: /* @__PURE__ */ jsxs7("div", { className: "flex gap-[2px]", children: [
+    ttl === TTL_INFINITE ? "Forever" : formatTime(ttl),
+    /* @__PURE__ */ jsx17(IconChevronDown, { className: "mt-[1px] text-zinc-400", size: 12 })
   ] }) }) });
 };
 
@@ -4365,17 +4250,17 @@ var useSetTTL = () => {
 
 // src/components/databrowser/components/item-context-menu.tsx
 import { useState as useState5 } from "react";
-import { ContextMenuSeparator as ContextMenuSeparator2 } from "@radix-ui/react-context-menu";
 import { IconCopy, IconExternalLink, IconTrash } from "@tabler/icons-react";
+import { ContextMenuSeparator as ContextMenuSeparator2 } from "@radix-ui/react-context-menu";
 
 // src/components/ui/context-menu.tsx
 import * as React7 from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { IconCheck, IconChevronRight, IconCircleFilled } from "@tabler/icons-react";
-import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var ContextMenu = ContextMenuPrimitive.Root;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-var ContextMenuSubTrigger = React7.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
+var ContextMenuSubTrigger = React7.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs8(
   ContextMenuPrimitive.SubTrigger,
   {
     ref,
@@ -4387,12 +4272,12 @@ var ContextMenuSubTrigger = React7.forwardRef(({ className, inset, children, ...
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx17(IconChevronRight, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx18(IconChevronRight, { className: "ml-auto h-4 w-4" })
     ]
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+var ContextMenuSubContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
   ContextMenuPrimitive.SubContent,
   {
     ref,
@@ -4404,7 +4289,7 @@ var ContextMenuSubContent = React7.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(ContextMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx17(
+var ContextMenuContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(ContextMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx18(
   ContextMenuPrimitive.Content,
   {
     ref,
@@ -4416,7 +4301,7 @@ var ContextMenuContent = React7.forwardRef(({ className, ...props }, ref) => /*
   }
 ) }));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx17(
+var ContextMenuItem = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx18(
   ContextMenuPrimitive.Item,
   {
     ref,
@@ -4429,7 +4314,7 @@ var ContextMenuItem = React7.forwardRef(({ className, inset, ...props }, ref) =>
   }
 ));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React7.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs7(
+var ContextMenuCheckboxItem = React7.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs8(
   ContextMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -4440,13 +4325,13 @@ var ContextMenuCheckboxItem = React7.forwardRef(({ className, children, checked,
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx17("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx17(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17(IconCheck, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx18("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx18(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx18(IconCheck, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
 ));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
+var ContextMenuRadioItem = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs8(
   ContextMenuPrimitive.RadioItem,
   {
     ref,
@@ -4456,13 +4341,13 @@ var ContextMenuRadioItem = React7.forwardRef(({ className, children, ...props },
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx17("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx17(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17(IconCircleFilled, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx18("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx18(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx18(IconCircleFilled, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
 ));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx17(
+var ContextMenuLabel = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx18(
   ContextMenuPrimitive.Label,
   {
     ref,
@@ -4471,7 +4356,7 @@ var ContextMenuLabel = React7.forwardRef(({ className, inset, ...props }, ref) =
   }
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+var ContextMenuSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
   ContextMenuPrimitive.Separator,
   {
     ref,
@@ -4481,19 +4366,19 @@ var ContextMenuSeparator = React7.forwardRef(({ className, ...props }, ref) => /
 ));
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 var ContextMenuShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx17("span", { className: cn("ml-auto text-xs tracking-widest text-zinc-500", className), ...props });
+  return /* @__PURE__ */ jsx18("span", { className: cn("ml-auto text-xs tracking-widest text-zinc-500", className), ...props });
 };
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 // src/components/ui/alert-dialog.tsx
 import * as React8 from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-var AlertDialogPortal = ({ ...props }) => /* @__PURE__ */ jsx18(AlertDialogPrimitive.Portal, { container: portalRoot, ...props });
+var AlertDialogPortal = ({ ...props }) => /* @__PURE__ */ jsx19(AlertDialogPrimitive.Portal, { container: portalRoot, ...props });
 AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
-var AlertDialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+var AlertDialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   AlertDialogPrimitive.Overlay,
   {
     className: cn(
@@ -4505,9 +4390,9 @@ var AlertDialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs8(AlertDialogPortal, { children: [
-  /* @__PURE__ */ jsx18(AlertDialogOverlay, {}),
-  /* @__PURE__ */ jsx18(
+var AlertDialogContent = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs9(AlertDialogPortal, { children: [
+  /* @__PURE__ */ jsx19(AlertDialogOverlay, {}),
+  /* @__PURE__ */ jsx19(
     AlertDialogPrimitive.Content,
     {
       ref,
@@ -4520,9 +4405,9 @@ var AlertDialogContent = React8.forwardRef(({ className, ...props }, ref) => /*
   )
 ] }));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-var AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx18("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+var AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx19("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
 AlertDialogHeader.displayName = "AlertDialogHeader";
-var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx18(
+var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx19(
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -4530,7 +4415,7 @@ var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx18(
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+var AlertDialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -4539,7 +4424,7 @@ var AlertDialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+var AlertDialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   AlertDialogPrimitive.Description,
   {
     ref,
@@ -4548,9 +4433,9 @@ var AlertDialogDescription = React8.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
+var AlertDialogAction = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+var AlertDialogCancel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   AlertDialogPrimitive.Cancel,
   {
     ref,
@@ -4561,7 +4446,7 @@ var AlertDialogCancel = React8.forwardRef(({ className, ...props }, ref) => /* @
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 // src/components/databrowser/components/display/delete-alert-dialog.tsx
-import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 function DeleteAlertDialog({
   children,
   onDeleteConfirm,
@@ -4573,23 +4458,22 @@ function DeleteAlertDialog({
   const isPlural = count2 > 1;
   const itemLabel = deletionType === "item" ? "Item" : "Key";
   const itemsLabel = deletionType === "item" ? "Items" : "Keys";
-  return /* @__PURE__ */ jsxs9(AlertDialog, { open, onOpenChange, children: [
-    children && /* @__PURE__ */ jsx19(AlertDialogTrigger, { asChild: true, children }),
-    /* @__PURE__ */ jsxs9(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs9(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx19(AlertDialogTitle, { children: isPlural ? `Delete ${count2} ${itemsLabel}` : `Delete ${itemLabel}` }),
-        /* @__PURE__ */ jsxs9(AlertDialogDescription, { className: "mt-5", children: [
-          "Are you sure you want to delete",
-          " ",
+  return /* @__PURE__ */ jsxs10(AlertDialog, { open, onOpenChange, children: [
+    children && /* @__PURE__ */ jsx20(AlertDialogTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxs10(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs10(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx20(AlertDialogTitle, { children: isPlural ? `Delete ${count2} ${itemsLabel}` : `Delete ${itemLabel}` }),
+        /* @__PURE__ */ jsxs10(AlertDialogDescription, { className: "mt-5", children: [
+          "Are you sure you want to delete ",
           isPlural ? `these ${count2} ${deletionType}s` : `this ${deletionType}`,
           "?",
-          /* @__PURE__ */ jsx19("br", {}),
+          /* @__PURE__ */ jsx20("br", {}),
           "This action cannot be undone."
         ] })
       ] }),
-      /* @__PURE__ */ jsxs9(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx19(AlertDialogCancel, { type: "button", children: "Cancel" }),
-        /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsxs10(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx20(AlertDialogCancel, { type: "button", children: "Cancel" }),
+        /* @__PURE__ */ jsx20(
           AlertDialogAction,
           {
             className: "bg-red-500 text-zinc-50 hover:bg-red-600",
@@ -4603,7 +4487,7 @@ function DeleteAlertDialog({
 }
 
 // src/components/databrowser/components/item-context-menu.tsx
-import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 var ItemContextMenu = ({
   children,
   dataKey,
@@ -4613,8 +4497,8 @@ var ItemContextMenu = ({
   const [isAlertOpen, setAlertOpen] = useState5(false);
   const [data, setData] = useState5();
   const { addTab, setSelectedKey, selectTab, setSelectedListItem } = useDatabrowserStore();
-  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
-    /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
+    /* @__PURE__ */ jsx21(
       DeleteAlertDialog,
       {
         deletionType: "item",
@@ -4635,8 +4519,8 @@ var ItemContextMenu = ({
         }
       }
     ),
-    /* @__PURE__ */ jsxs10(ContextMenu, { modal: false, children: [
-      /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsxs11(ContextMenu, { modal: false, children: [
+      /* @__PURE__ */ jsx21(
         ContextMenuTrigger,
         {
           asChild: true,
@@ -4655,8 +4539,8 @@ var ItemContextMenu = ({
           children
         }
       ),
-      /* @__PURE__ */ jsxs10(ContextMenuContent, { children: [
-        /* @__PURE__ */ jsxs10(
+      /* @__PURE__ */ jsxs11(ContextMenuContent, { children: [
+        /* @__PURE__ */ jsxs11(
           ContextMenuItem,
           {
             onClick: () => {
@@ -4668,12 +4552,12 @@ var ItemContextMenu = ({
             },
             className: "gap-2",
             children: [
-              /* @__PURE__ */ jsx20(IconCopy, { size: 16 }),
+              /* @__PURE__ */ jsx21(IconCopy, { size: 16 }),
               "Copy key"
             ]
           }
         ),
-        data?.value && /* @__PURE__ */ jsxs10(
+        data?.value && /* @__PURE__ */ jsxs11(
           ContextMenuItem,
           {
             onClick: () => {
@@ -4684,12 +4568,12 @@ var ItemContextMenu = ({
             },
             className: "gap-2",
             children: [
-              /* @__PURE__ */ jsx20(IconCopy, { size: 16 }),
+              /* @__PURE__ */ jsx21(IconCopy, { size: 16 }),
               "Copy value"
             ]
           }
         ),
-        /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsxs11(
           ContextMenuItem,
           {
             onClick: () => {
@@ -4703,20 +4587,20 @@ var ItemContextMenu = ({
             },
             className: "gap-2",
             children: [
-              /* @__PURE__ */ jsx20(IconExternalLink, { size: 16 }),
+              /* @__PURE__ */ jsx21(IconExternalLink, { size: 16 }),
               "Open in new tab"
             ]
           }
         ),
-        /* @__PURE__ */ jsx20(ContextMenuSeparator2, {}),
-        /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsx21(ContextMenuSeparator2, {}),
+        /* @__PURE__ */ jsxs11(
           ContextMenuItem,
           {
             disabled: type === "stream",
             onClick: () => setAlertOpen(true),
             className: "gap-2",
             children: [
-              /* @__PURE__ */ jsx20(IconTrash, { size: 16 }),
+              /* @__PURE__ */ jsx21(IconTrash, { size: 16 }),
               "Delete item"
             ]
           }
@@ -4727,47 +4611,42 @@ var ItemContextMenu = ({
 };
 
 // src/components/databrowser/components/sidebar/infinite-scroll.tsx
-import { useEffect as useEffect6, useRef } from "react";
 import { IconLoader2 } from "@tabler/icons-react";
+import { useEffect as useEffect6, useRef } from "react";
 
 // src/components/ui/scroll-area.tsx
 import * as React9 from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
-var ScrollArea = React9.forwardRef(
-  ({ className, scrollBarClassName, children, onScroll, disableRoundedInherit = false, ...props }, ref) => /* @__PURE__ */ jsxs11(
-    ScrollAreaPrimitive.Root,
-    {
-      ref,
-      className: cn("relative overflow-hidden", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx21(
-          ScrollAreaPrimitive.Viewport,
-          {
-            onScroll,
-            className: cn(
-              "h-full w-full [&>div]:!block",
-              !disableRoundedInherit && "rounded-[inherit]"
-            ),
-            children
-          }
-        ),
-        /* @__PURE__ */ jsx21(ScrollBar, { className: scrollBarClassName }),
-        /* @__PURE__ */ jsx21(ScrollAreaPrimitive.Corner, {})
-      ]
-    }
-  )
-);
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+var ScrollArea = React9.forwardRef(({ className, children, onScroll, disableRoundedInherit = false, ...props }, ref) => /* @__PURE__ */ jsxs12(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    className: cn("relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx22(
+        ScrollAreaPrimitive.Viewport,
+        {
+          onScroll,
+          className: cn("h-full w-full [&>div]:!block", !disableRoundedInherit && "rounded-[inherit]"),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx22(ScrollBar, {}),
+      /* @__PURE__ */ jsx22(ScrollAreaPrimitive.Corner, {})
+    ]
+  }
+));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
+var ScrollBar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   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__ */ jsx21(
+    children: /* @__PURE__ */ jsx22(
       ScrollAreaPrimitive.ScrollAreaThumb,
       {
         className: cn("relative flex-1 rounded-full bg-zinc-200/70")
@@ -4778,7 +4657,7 @@ var ScrollBar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // src/components/databrowser/components/sidebar/infinite-scroll.tsx
-import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 var InfiniteScroll = ({
   query,
   children,
@@ -4810,17 +4689,20 @@ var InfiniteScroll = ({
     const timer = setTimeout(checkAndFetchMore, 100);
     return () => clearTimeout(timer);
   }, [active, query.data]);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     ScrollArea,
     {
       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__ */ jsxs12("div", { ref: contentRef, children: [
+      children: /* @__PURE__ */ jsxs13("div", { ref: contentRef, children: [
         children,
-        /* @__PURE__ */ jsx22("div", { className: "flex h-[100px] justify-center py-2 text-zinc-300", children: query.isFetching && /* @__PURE__ */ jsx22(IconLoader2, { className: "animate-spin", size: 16 }) })
+        /* @__PURE__ */ jsx23("div", { className: "flex h-[100px] justify-center py-2 text-zinc-300", children: query.isFetching && /* @__PURE__ */ jsx23(IconLoader2, { className: "animate-spin", size: 16 }) })
       ] })
     }
   );
@@ -4832,10 +4714,10 @@ import { IconPlus } from "@tabler/icons-react";
 // src/components/ui/tooltip.tsx
 import * as React10 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx23(TooltipPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx23(
+var TooltipContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx24(TooltipPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx24(
   TooltipPrimitive.Content,
   {
     ref,
@@ -4852,35 +4734,13 @@ var SimpleTooltip = ({
   content,
   children
 }) => {
-  if (!content) return /* @__PURE__ */ jsx23(Fragment3, { children });
-  return /* @__PURE__ */ jsxs13(Tooltip, { delayDuration: 400, children: [
-    /* @__PURE__ */ jsx23(TooltipTrigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx23(TooltipContent, { side: "top", children: content })
+  if (!content) return /* @__PURE__ */ jsx24(Fragment3, { children });
+  return /* @__PURE__ */ jsxs14(Tooltip, { delayDuration: 400, children: [
+    /* @__PURE__ */ jsx24(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx24(TooltipContent, { side: "top", children: content })
   ] });
 };
 
-// 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
 import {
   IconArrowsSort,
@@ -4889,18 +4749,17 @@ import {
   IconLayersIntersect,
   IconList,
   IconQuote,
-  IconSearch
+  IconQuestionMark
 } from "@tabler/icons-react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var iconsMap = {
-  string: /* @__PURE__ */ jsx24(IconQuote, { size: 15, stroke: 1.2 }),
-  set: /* @__PURE__ */ jsx24(IconLayersIntersect, { size: 15, stroke: 1.2 }),
-  hash: /* @__PURE__ */ jsx24(IconHash, { size: 15, stroke: 1.2 }),
-  json: /* @__PURE__ */ jsx24(IconCodeDots, { size: 15, stroke: 1.2 }),
-  zset: /* @__PURE__ */ jsx24(IconArrowsSort, { size: 15, stroke: 1.2 }),
-  list: /* @__PURE__ */ jsx24(IconList, { size: 15, stroke: 1.2 }),
-  stream: /* @__PURE__ */ jsx24(IconList, { size: 15, stroke: 1.2 }),
-  search: /* @__PURE__ */ jsx24(IconSearch, { size: 15, stroke: 1.2 })
+  string: /* @__PURE__ */ jsx25(IconQuote, { size: 15, stroke: 1.2 }),
+  set: /* @__PURE__ */ jsx25(IconLayersIntersect, { size: 15, stroke: 1.2 }),
+  hash: /* @__PURE__ */ jsx25(IconHash, { size: 15, stroke: 1.2 }),
+  json: /* @__PURE__ */ jsx25(IconCodeDots, { size: 15, stroke: 1.2 }),
+  zset: /* @__PURE__ */ jsx25(IconArrowsSort, { size: 15, stroke: 1.2 }),
+  list: /* @__PURE__ */ jsx25(IconList, { size: 15, stroke: 1.2 }),
+  stream: /* @__PURE__ */ jsx25(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__ */ jsx24("span", { className: cn(tagVariants({ variant, type, className })), children: type === "icon" ? iconsMap[variant] : DATA_TYPE_NAMES[variant] });
+  const defaultIcon = /* @__PURE__ */ jsx25(IconQuestionMark, { size: 15, stroke: 1.2 });
+  const variantKey = variant && variant in iconsMap ? variant : "default";
+  return /* @__PURE__ */ jsx25("span", { className: cn(tagVariants({ variant: variantKey, type, className })), children: type === "icon" ? iconsMap[variant] ?? defaultIcon : DATA_TYPE_NAMES[variant] ?? variant ?? "Unknown" });
 }
 
 // src/components/databrowser/components/display/key-actions.tsx
@@ -4935,10 +4796,10 @@ import { IconDotsVertical } from "@tabler/icons-react";
 import * as React11 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { IconCheck as IconCheck2, IconChevronRight as IconChevronRight2, IconCircleFilled as IconCircleFilled2 } from "@tabler/icons-react";
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuSubTrigger = React11.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs14(
+var DropdownMenuSubTrigger = React11.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs15(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -4950,12 +4811,12 @@ var DropdownMenuSubTrigger = React11.forwardRef(({ className, inset, children, .
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx25(IconChevronRight2, { className: "ml-auto" })
+      /* @__PURE__ */ jsx26(IconChevronRight2, { className: "ml-auto" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
+var DropdownMenuSubContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -4967,7 +4828,7 @@ var DropdownMenuSubContent = React11.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx25(DropdownMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx25(
+var DropdownMenuContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx26(DropdownMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -4981,7 +4842,7 @@ var DropdownMenuContent = React11.forwardRef(({ className, sideOffset = 4, ...pr
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx25(
+var DropdownMenuItem = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -4994,7 +4855,7 @@ var DropdownMenuItem = React11.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React11.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs14(
+var DropdownMenuCheckboxItem = React11.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs15(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -5005,13 +4866,13 @@ var DropdownMenuCheckboxItem = React11.forwardRef(({ className, children, checke
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx25("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx25(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx25(IconCheck2, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx26("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx26(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx26(IconCheck2, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs14(
+var DropdownMenuRadioItem = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs15(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -5021,13 +4882,13 @@ var DropdownMenuRadioItem = React11.forwardRef(({ className, children, ...props
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx25("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx25(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx25(IconCircleFilled2, { className: "h-2 w-2" }) }) }),
+      /* @__PURE__ */ jsx26("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx26(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx26(IconCircleFilled2, { className: "h-2 w-2" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx25(
+var DropdownMenuLabel = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -5036,7 +4897,7 @@ var DropdownMenuLabel = React11.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
+var DropdownMenuSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -5046,24 +4907,18 @@ var DropdownMenuSeparator = React11.forwardRef(({ className, ...props }, ref) =>
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx25("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
+  return /* @__PURE__ */ jsx26("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/components/databrowser/components/display/key-actions.tsx
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 function KeyActions({ dataKey, content }) {
   const { mutateAsync: deleteKey } = useDeleteKey();
-  return /* @__PURE__ */ jsxs15(DropdownMenu, { modal: false, children: [
-    /* @__PURE__ */ jsx26(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx26(Button, { size: "icon-sm", "aria-label": "Key actions", children: /* @__PURE__ */ jsx26(
-      IconDotsVertical,
-      {
-        className: "size-4 text-zinc-500 dark:text-zinc-600",
-        fill: "rgb(var(--color-zinc-500))"
-      }
-    ) }) }),
-    /* @__PURE__ */ jsxs15(DropdownMenuContent, { className: "", align: "end", children: [
-      content && /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs16(DropdownMenu, { modal: false, children: [
+    /* @__PURE__ */ jsx27(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx27(Button, { size: "icon-sm", "aria-label": "Key actions", children: /* @__PURE__ */ jsx27(IconDotsVertical, { className: "size-4 text-zinc-500 dark:text-zinc-600" }) }) }),
+    /* @__PURE__ */ jsxs16(DropdownMenuContent, { className: "", align: "end", children: [
+      content && /* @__PURE__ */ jsx27(
         DropdownMenuItem,
         {
           onClick: () => {
@@ -5075,7 +4930,7 @@ function KeyActions({ dataKey, content }) {
           children: "Copy content"
         }
       ),
-      /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx27(
         DropdownMenuItem,
         {
           onClick: () => {
@@ -5084,12 +4939,12 @@ function KeyActions({ dataKey, content }) {
           children: "Copy key"
         }
       ),
-      /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx27(
         DeleteAlertDialog,
         {
           deletionType: "key",
           onDeleteConfirm: async () => await deleteKey(dataKey),
-          children: /* @__PURE__ */ jsx26(
+          children: /* @__PURE__ */ jsx27(
             DropdownMenuItem,
             {
               className: "text-red-500 focus:bg-red-500 focus:text-white",
@@ -5104,7 +4959,7 @@ function KeyActions({ dataKey, content }) {
 }
 
 // src/components/databrowser/components/display/display-header.tsx
-import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 var DisplayHeader = ({
   dataKey,
   type,
@@ -5114,19 +4969,19 @@ var DisplayHeader = ({
   const handleAddItem = () => {
     setSelectedListItem({ key: type === "stream" ? "*" : "", isNew: true });
   };
-  return /* @__PURE__ */ jsxs16("div", { className: "rounded-lg", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "flex h-[26px] items-center justify-between gap-4", children: [
-      /* @__PURE__ */ jsx27("h2", { className: "grow truncate text-sm", children: dataKey.trim() === "" ? /* @__PURE__ */ jsx27("span", { className: "ml-1 text-zinc-500", children: "(Empty Key)" }) : /* @__PURE__ */ jsx27("span", { className: "font-medium text-zinc-950", children: dataKey }) }),
-      /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1", children: [
-        type !== "string" && type !== "json" && type !== "search" && /* @__PURE__ */ jsx27(SimpleTooltip, { content: "Add item", children: /* @__PURE__ */ jsx27(Button, { onClick: handleAddItem, size: "icon-sm", "aria-label": "Add item", children: /* @__PURE__ */ jsx27(IconPlus, { className: "size-4 text-zinc-500 dark:text-zinc-600" }) }) }),
-        /* @__PURE__ */ jsx27(KeyActions, { dataKey, content })
+  return /* @__PURE__ */ jsxs17("div", { className: "rounded-lg bg-zinc-100", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex min-h-10 items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx28("h2", { className: "grow truncate text-base", children: dataKey.trim() === "" ? /* @__PURE__ */ jsx28("span", { className: "ml-1 text-zinc-500", children: "(Empty Key)" }) : /* @__PURE__ */ jsx28("span", { className: "font-semibold", children: dataKey }) }),
+      /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-1", children: [
+        type !== "string" && type !== "json" && /* @__PURE__ */ jsx28(SimpleTooltip, { content: "Add item", children: /* @__PURE__ */ jsx28(Button, { onClick: handleAddItem, size: "icon-sm", "aria-label": "Add item", children: /* @__PURE__ */ jsx28(IconPlus, { className: "size-4 text-zinc-500 dark:text-zinc-600" }) }) }),
+        /* @__PURE__ */ jsx28(KeyActions, { dataKey, content })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs16("div", { className: "flex h-10 items-center gap-1.5 overflow-scroll", children: [
-      /* @__PURE__ */ jsx27(TypeTag, { variant: type, type: "badge" }),
-      /* @__PURE__ */ jsx27(SizeBadge, { dataKey }),
-      /* @__PURE__ */ jsx27(LengthBadge, { dataKey, type, content }),
-      /* @__PURE__ */ jsx27(HeaderTTLBadge, { dataKey })
+    /* @__PURE__ */ jsxs17("div", { className: "flex h-10 flex-wrap items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx28(TypeTag, { variant: type, type: "badge" }),
+      /* @__PURE__ */ jsx28(SizeBadge, { dataKey }),
+      /* @__PURE__ */ jsx28(LengthBadge, { dataKey, type, content }),
+      /* @__PURE__ */ jsx28(HeaderTTLBadge, { dataKey })
     ] })
   ] });
 };
@@ -5190,12 +5045,12 @@ var useSetHashTTL = () => {
 };
 
 // src/components/databrowser/components/display/hash/hash-field-ttl-badge.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var HashFieldTTLBadge = ({ dataKey, field }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields: [field] });
   const { mutate: setTTL, isPending } = useSetHashTTL();
   const expireAt = data?.[field];
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     TTLBadge,
     {
       label: "Field TTL:",
@@ -5212,18 +5067,18 @@ import { useController } from "react-hook-form";
 
 // src/components/databrowser/components/display/input/content-type-select.tsx
 import { useMemo as useMemo6 } from "react";
-import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 var ContentTypeSelect = ({
   value,
   onChange,
   data
 }) => {
   const isValidJSON = useMemo6(() => checkIsValidJSON(data), [data]);
-  return /* @__PURE__ */ jsxs17(Select, { value, onValueChange: onChange, children: [
-    /* @__PURE__ */ jsx29(SelectTrigger, { className: "h-6 w-auto border-none bg-transparent pl-0 pr-6 text-xs text-zinc-500", children: /* @__PURE__ */ jsx29(SelectValue, { placeholder: "Text" }) }),
-    /* @__PURE__ */ jsx29(SelectContent, { children: /* @__PURE__ */ jsxs17(SelectGroup, { children: [
-      /* @__PURE__ */ jsx29(SelectItem, { value: "Text", children: "Text" }),
-      /* @__PURE__ */ jsx29(SelectItem, { disabled: !isValidJSON, value: "JSON", children: "JSON" })
+  return /* @__PURE__ */ jsxs18(Select, { value, onValueChange: onChange, children: [
+    /* @__PURE__ */ jsx30(SelectTrigger, { className: "h-6 w-auto border-none bg-transparent pl-0 pr-6 text-xs text-zinc-500", children: /* @__PURE__ */ jsx30(SelectValue, { placeholder: "Text" }) }),
+    /* @__PURE__ */ jsx30(SelectContent, { children: /* @__PURE__ */ jsxs18(SelectGroup, { children: [
+      /* @__PURE__ */ jsx30(SelectItem, { value: "Text", children: "Text" }),
+      /* @__PURE__ */ jsx30(SelectItem, { disabled: !isValidJSON, value: "JSON", children: "JSON" })
     ] }) })
   ] });
 };
@@ -5235,10 +5090,10 @@ import { Editor, useMonaco } from "@monaco-editor/react";
 // src/components/databrowser/copy-button.tsx
 import { useState as useState6 } from "react";
 import { IconCheck as IconCheck3, IconCopy as IconCopy2 } from "@tabler/icons-react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function CopyButton({ value, ...props }) {
   const [copied, setCopied] = useState6(false);
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     Button,
     {
       onClick: (e) => {
@@ -5255,7 +5110,7 @@ function CopyButton({ value, ...props }) {
       variant: "secondary",
       size: "icon-sm",
       ...props,
-      children: copied ? /* @__PURE__ */ jsx30(IconCheck3, { className: "size-4 text-green-500" }) : /* @__PURE__ */ jsx30(IconCopy2, { className: "size-4 text-zinc-500" })
+      children: copied ? /* @__PURE__ */ jsx31(IconCheck3, { className: "size-4 text-green-500" }) : /* @__PURE__ */ jsx31(IconCopy2, { className: "size-4 text-zinc-500" })
     }
   );
 }
@@ -5268,12 +5123,12 @@ var handleCopyClick = async (textToCopy) => {
 };
 
 // src/components/databrowser/components/display/input/custom-editor.tsx
-import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 var CustomEditor = (props) => {
   if (isTest) {
-    return /* @__PURE__ */ jsx31(TestEditor, { ...props });
+    return /* @__PURE__ */ jsx32(TestEditor, { ...props });
   }
-  return /* @__PURE__ */ jsx31(MonacoEditor, { ...props });
+  return /* @__PURE__ */ jsx32(MonacoEditor, { ...props });
 };
 var MonacoEditor = ({
   language,
@@ -5293,7 +5148,7 @@ var MonacoEditor = ({
     }
     monaco?.editor.setModelLanguage(editorRef.current.getModel(), language);
   }, [monaco, language, active]);
-  const editor = /* @__PURE__ */ jsx31(
+  const editor = /* @__PURE__ */ jsx32(
     Editor,
     {
       theme: theme === "dark" ? "vs-dark" : "light",
@@ -5334,14 +5189,14 @@ var MonacoEditor = ({
       className: "[&_.monaco-editor-background]:!bg-transparent [&_.monaco-editor]:!bg-transparent"
     }
   );
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       className: cn("group/editor relative", height === void 0 && "h-full"),
       style: { height },
       children: [
         editor,
-        showCopyButton && /* @__PURE__ */ jsx31(
+        showCopyButton && /* @__PURE__ */ jsx32(
           CopyButton,
           {
             value,
@@ -5353,14 +5208,14 @@ var MonacoEditor = ({
   );
 };
 var TestEditor = ({ value, onChange, height, showCopyButton }) => {
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       className: cn("group/editor relative", height === void 0 && "h-full"),
       style: { height },
       children: [
-        /* @__PURE__ */ jsx31("input", { "aria-label": "editor", value, onChange: (e) => onChange(e.target.value) }),
-        showCopyButton && /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32("input", { "aria-label": "editor", value, onChange: (e) => onChange(e.target.value) }),
+        showCopyButton && /* @__PURE__ */ jsx32(
           CopyButton,
           {
             value,
@@ -5373,7 +5228,7 @@ var TestEditor = ({ value, onChange, height, showCopyButton }) => {
 };
 
 // src/components/databrowser/components/display/input/use-field.tsx
-import { Fragment as Fragment4, jsx as jsx32 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx33 } from "react/jsx-runtime";
 var useField = ({
   name,
   form,
@@ -5413,8 +5268,8 @@ var useField = ({
     }
   };
   return {
-    selector: /* @__PURE__ */ jsx32(ContentTypeSelect, { value: contentType, onChange: handleTypeChange, data: field.value }),
-    editor: /* @__PURE__ */ jsx32(Fragment4, { children: /* @__PURE__ */ jsx32(
+    selector: /* @__PURE__ */ jsx33(ContentTypeSelect, { value: contentType, onChange: handleTypeChange, data: field.value }),
+    editor: /* @__PURE__ */ jsx33(Fragment4, { children: /* @__PURE__ */ jsx33(
       CustomEditor,
       {
         language: contentType === "JSON" ? "json" : "plaintext",
@@ -5438,13 +5293,13 @@ var checkIsValidJSON = (value) => {
 };
 
 // src/components/databrowser/components/display/display-list-edit.tsx
-import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 var ListEditDisplay = ({
   dataKey,
   type,
   item
 }) => {
-  return /* @__PURE__ */ jsx33("div", { className: "grow rounded-md bg-zinc-100", children: /* @__PURE__ */ jsx33(ListEditForm, { item, type, dataKey }, item.key) });
+  return /* @__PURE__ */ jsx34("div", { className: "grow rounded-md bg-zinc-100", children: /* @__PURE__ */ jsx34(ListEditForm, { item, type, dataKey }, item.key) });
 };
 var ListEditForm = ({
   type,
@@ -5483,11 +5338,11 @@ var ListEditForm = ({
     });
     setSelectedListItem(void 0);
   });
-  return /* @__PURE__ */ jsx33(FormProvider, { ...form, children: /* @__PURE__ */ jsxs19("form", { onSubmit, className: "flex h-full flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex grow flex-col gap-2", children: [
-      type === "zset" && /* @__PURE__ */ jsx33(NumberFormItem, { name: "value", label: valueLabel }),
-      type !== "list" && /* @__PURE__ */ jsx33(FormItem, { readOnly: type === "stream", name: "key", label: keyLabel, data: itemKey }),
-      type !== "set" && type !== "zset" && /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(FormProvider, { ...form, children: /* @__PURE__ */ jsxs20("form", { onSubmit, className: "flex h-full flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex grow flex-col gap-2", children: [
+      type === "zset" && /* @__PURE__ */ jsx34(NumberFormItem, { name: "value", label: valueLabel }),
+      type !== "list" && /* @__PURE__ */ jsx34(FormItem, { readOnly: type === "stream", name: "key", label: keyLabel, data: itemKey }),
+      type !== "set" && type !== "zset" && /* @__PURE__ */ jsx34(
         FormItem,
         {
           readOnly: type === "stream",
@@ -5497,7 +5352,7 @@ var ListEditForm = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs19(
+    /* @__PURE__ */ jsxs20(
       "div",
       {
         className: cn(
@@ -5505,9 +5360,9 @@ var ListEditForm = ({
           type === "hash" && itemKey !== "" ? "justify-between" : "justify-end"
         ),
         children: [
-          type === "hash" && itemKey !== "" && /* @__PURE__ */ jsx33(HashFieldTTLBadge, { dataKey, field: itemKey }),
-          /* @__PURE__ */ jsxs19("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsx33(
+          type === "hash" && itemKey !== "" && /* @__PURE__ */ jsx34(HashFieldTTLBadge, { dataKey, field: itemKey }),
+          /* @__PURE__ */ jsxs20("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx34(
               Button,
               {
                 type: "button",
@@ -5517,17 +5372,17 @@ var ListEditForm = ({
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx34(
               SimpleTooltip,
               {
                 content: type === "stream" && !isNew ? "Streams are not mutable" : void 0,
-                children: /* @__PURE__ */ jsx33(
+                children: /* @__PURE__ */ jsx34(
                   Button,
                   {
                     variant: "primary",
                     type: "submit",
                     disabled: !form.formState.isValid || !form.formState.isDirty || type === "stream" && !isNew,
-                    children: /* @__PURE__ */ jsx33(Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" })
+                    children: /* @__PURE__ */ jsx34(Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" })
                   }
                 )
               }
@@ -5539,13 +5394,13 @@ var ListEditForm = ({
   ] }) });
 };
 var NumberFormItem = ({ name, label }) => {
-  return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsx33("div", { className: "flex", children: /* @__PURE__ */ jsx33("span", { className: "text-xs font-medium text-zinc-700", children: label }) }),
-    /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx34("div", { className: "flex", children: /* @__PURE__ */ jsx34("span", { className: "text-xs font-medium text-zinc-700", children: label }) }),
+    /* @__PURE__ */ jsx34(
       Controller2,
       {
         name,
-        render: ({ field }) => /* @__PURE__ */ jsx33(
+        render: ({ field }) => /* @__PURE__ */ jsx34(
           "input",
           {
             className: "plain-input rounded-md border border-zinc-300 px-3 py-1 shadow-sm",
@@ -5573,14 +5428,14 @@ var FormItem = ({
     readOnly,
     data
   });
-  return /* @__PURE__ */ jsxs19("div", { className: cn("flex flex-col gap-1", !height && "h-full"), children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1 text-xs", children: [
-      /* @__PURE__ */ jsx33("span", { className: "font-medium text-zinc-700", children: label }),
+  return /* @__PURE__ */ jsxs20("div", { className: cn("flex flex-col gap-1", !height && "h-full"), children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1 text-xs", children: [
+      /* @__PURE__ */ jsx34("span", { className: "font-medium text-zinc-700", children: label }),
       " ",
-      /* @__PURE__ */ jsx33("span", { className: "text-zinc-300", children: "/" }),
+      /* @__PURE__ */ jsx34("span", { className: "text-zinc-300", children: "/" }),
       selector
     ] }),
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx34(
       "div",
       {
         className: cn(
@@ -5595,7 +5450,7 @@ var FormItem = ({
 
 // src/components/databrowser/components/display/hash/hash-field-ttl-info.tsx
 import { useEffect as useEffect9, useState as useState8 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var HashFieldTTLInfo = ({
   dataKey,
   field,
@@ -5612,11 +5467,11 @@ var HashFieldTTLInfo = ({
     return () => clearInterval(interval);
   }, [expireAt]);
   if (!expireAt || expireAt === TTL_NOT_FOUND || expireAt === TTL_INFINITE) return;
-  return /* @__PURE__ */ jsx34("span", { className: "block min-w-[30px] whitespace-nowrap text-right text-red-600", children: formatTime(ttl ?? 0) });
+  return /* @__PURE__ */ jsx35("span", { className: "block min-w-[30px] whitespace-nowrap text-right text-red-600", children: formatTime(ttl ?? 0) });
 };
 
 // src/components/databrowser/components/display/display-list.tsx
-import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 var headerLabels = {
   list: ["Index", "Content"],
   hash: ["Field", "Value"],
@@ -5627,10 +5482,10 @@ var headerLabels = {
 var ListDisplay = ({ dataKey, type }) => {
   const { selectedListItem } = useTab();
   const query = useFetchListItems({ dataKey, type });
-  return /* @__PURE__ */ jsxs20("div", { className: "flex h-full flex-col gap-2", children: [
-    /* @__PURE__ */ jsx35(DisplayHeader, { dataKey, type }),
-    selectedListItem && /* @__PURE__ */ jsx35(ListEditDisplay, { dataKey, type, item: selectedListItem }),
-    /* @__PURE__ */ jsx35("div", { className: cn("min-h-0 grow", selectedListItem && "hidden"), children: /* @__PURE__ */ jsx35(InfiniteScroll, { query, className: "rounded-lg border border-zinc-200 bg-white", children: /* @__PURE__ */ jsx35("table", { className: "w-full", children: /* @__PURE__ */ jsx35(ItemContextMenu, { dataKey, type, children: /* @__PURE__ */ jsx35("tbody", { children: /* @__PURE__ */ jsx35(ListItems, { dataKey, type, query }) }) }) }) }) })
+  return /* @__PURE__ */ jsxs21("div", { className: "flex h-full flex-col gap-2", children: [
+    /* @__PURE__ */ jsx36(DisplayHeader, { dataKey, type }),
+    selectedListItem && /* @__PURE__ */ jsx36(ListEditDisplay, { dataKey, type, item: selectedListItem }),
+    /* @__PURE__ */ jsx36("div", { className: cn("min-h-0 grow", selectedListItem && "hidden"), children: /* @__PURE__ */ jsx36(InfiniteScroll, { query, children: /* @__PURE__ */ jsx36("table", { className: "w-full", children: /* @__PURE__ */ jsx36(ItemContextMenu, { dataKey, type, children: /* @__PURE__ */ jsx36("tbody", { children: /* @__PURE__ */ jsx36(ListItems, { dataKey, type, query }) }) }) }) }) })
   ] });
 };
 var ListItems = ({
@@ -5642,7 +5497,7 @@ var ListItems = ({
   const keys = useMemo7(() => query.data?.pages.flatMap((page) => page.keys) ?? [], [query.data]);
   const fields = useMemo7(() => keys.map((key) => key.key), [keys]);
   const { mutate: editItem } = useEditListItem();
-  return /* @__PURE__ */ jsx35(Fragment5, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsx36(Fragment5, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ jsxs21(
     "tr",
     {
       "data-item-key": key,
@@ -5651,10 +5506,10 @@ 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__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           "td",
           {
             className: cn(
@@ -5664,23 +5519,23 @@ var ListItems = ({
             children: key
           }
         ),
-        value !== void 0 && /* @__PURE__ */ jsx35(
+        value !== void 0 && /* @__PURE__ */ jsx36(
           "td",
           {
             className: cn("cursor-pointer truncate px-3", type === "zset" ? "w-24" : "max-w-0"),
             children: value
           }
         ),
-        type !== "stream" && /* @__PURE__ */ jsx35(
+        type !== "stream" && /* @__PURE__ */ jsx36(
           "td",
           {
             className: "w-0 min-w-0 p-0 pr-2",
             onClick: (e) => {
               e.stopPropagation();
             },
-            children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-end gap-2", children: [
-              type === "hash" && /* @__PURE__ */ jsx35(HashFieldTTLInfo, { dataKey, field: key, fields }),
-              /* @__PURE__ */ jsx35(
+            children: /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-end gap-2", children: [
+              type === "hash" && /* @__PURE__ */ jsx36(HashFieldTTLInfo, { dataKey, field: key, fields }),
+              /* @__PURE__ */ jsx36(
                 DeleteAlertDialog,
                 {
                   deletionType: "item",
@@ -5694,14 +5549,14 @@ var ListItems = ({
                       newKey: void 0
                     });
                   },
-                  children: /* @__PURE__ */ jsx35(
+                  children: /* @__PURE__ */ jsx36(
                     Button,
                     {
                       className: "",
                       size: "icon-sm",
                       variant: "secondary",
                       onClick: (e) => e.stopPropagation(),
-                      children: /* @__PURE__ */ jsx35(IconTrash2, { className: "size-4 text-zinc-500" })
+                      children: /* @__PURE__ */ jsx36(IconTrash2, { className: "size-4 text-zinc-500" })
                     }
                   )
                 }
@@ -5715,17 +5570,6 @@ var ListItems = ({
   )) });
 };
 
-// src/components/databrowser/components/display/display-search.tsx
-import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
-var SearchDisplay = ({ dataKey, type }) => {
-  const { data, isLoading } = useFetchSearchIndex(dataKey);
-  const content = data ? JSON.stringify(data, null, 2) : void 0;
-  return /* @__PURE__ */ jsxs21("div", { className: "flex h-full w-full flex-col gap-2", children: [
-    /* @__PURE__ */ jsx36(DisplayHeader, { dataKey, type, content }),
-    /* @__PURE__ */ jsx36("div", { className: "flex h-full grow flex-col gap-2 rounded-md bg-zinc-100", children: isLoading ? /* @__PURE__ */ jsx36(Spinner, { isLoadingText: "", isLoading: true }) : data === null || data === void 0 ? /* @__PURE__ */ jsx36("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx36("span", { className: "text-zinc-500", children: "No data found" }) }) : /* @__PURE__ */ jsx36("div", { className: "grow overflow-auto rounded-md border border-zinc-300 bg-white p-2", children: /* @__PURE__ */ jsx36("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
 import { useEffect as useEffect10 } from "react";
 import { useForm as useForm3 } from "react-hook-form";
@@ -5776,77 +5620,31 @@ var EditorDisplayForm = ({
 };
 
 // src/components/databrowser/components/display/index.tsx
-import { Fragment as Fragment7, jsx as jsx38 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
 var DataDisplay = () => {
   const { selectedKey } = useTab();
   const { query } = useKeys();
   const type = useKeyType(selectedKey);
-  return /* @__PURE__ */ jsx38("div", { className: "h-full rounded-xl bg-zinc-100 p-5", children: !selectedKey ? /* @__PURE__ */ jsx38("div", {}) : !type ? query.isLoading ? /* @__PURE__ */ jsx38("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx38("span", { className: "text-zinc-500", children: "Loading..." }) }) : /* @__PURE__ */ jsx38("div", {}) : /* @__PURE__ */ jsx38(Fragment7, { children: type === "string" || type === "json" ? /* @__PURE__ */ jsx38(EditorDisplay, { dataKey: selectedKey, type }) : type === "search" ? /* @__PURE__ */ jsx38(SearchDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ jsx38(ListDisplay, { dataKey: selectedKey, type }) }) });
-};
-
-// src/components/ui/segmented.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
-var Segmented = ({
-  options,
-  value,
-  onChange
-}) => {
-  return /* @__PURE__ */ jsx39("div", { className: "flex w-fit gap-[2px] rounded-lg bg-zinc-200 p-[2px] text-sm", children: options.map((option) => /* @__PURE__ */ jsx39(
-    "button",
-    {
-      className: cn(
-        "h-7 rounded-md px-3 transition-all",
-        value === option.key ? "bg-white text-zinc-950" : "text-zinc-700"
-      ),
-      onClick: () => {
-        onChange?.(option.key);
-      },
-      children: option.label
-    },
-    option.key
-  )) });
-};
-
-// src/components/databrowser/hooks/use-fetch-search-indexes.tsx
-import { useQuery as useQuery8 } from "@tanstack/react-query";
-var FETCH_SEARCH_INDEXES_QUERY_KEY = "fetch-search-indexes";
-var useFetchSearchIndexes = (match) => {
-  const { redisNoPipeline: redis } = useRedis();
-  return useQuery8({
-    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__ */ jsx38("div", { className: "h-full p-4", children: !selectedKey ? /* @__PURE__ */ jsx38("div", {}) : !type ? query.isLoading ? /* @__PURE__ */ jsx38("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx38("span", { className: "text-zinc-500", children: "Loading..." }) }) : /* @__PURE__ */ jsx38("div", {}) : !DATA_TYPES.includes(type) ? /* @__PURE__ */ jsx38("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxs23("span", { className: "text-zinc-500", children: [
+    "Unrecognized key type: ",
+    type
+  ] }) }) : /* @__PURE__ */ jsx38(Fragment7, { children: SIMPLE_DATA_TYPES.includes(type) ? /* @__PURE__ */ jsx38(EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ jsx38(ListDisplay, { dataKey: selectedKey, type }) }) });
 };
 
 // src/components/databrowser/components/add-key-modal.tsx
 import { useState as useState9 } from "react";
 import { DialogDescription as DialogDescription2 } from "@radix-ui/react-dialog";
-import { IconPlus as IconPlus2 } from "@tabler/icons-react";
 import { Controller as Controller3, useForm as useForm4 } from "react-hook-form";
 
 // src/components/ui/dialog.tsx
 import * as React12 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
-var DialogPortal = (props) => /* @__PURE__ */ jsx40(DialogPrimitive.Portal, { container: portalRoot, ...props });
+var DialogPortal = (props) => /* @__PURE__ */ jsx39(DialogPrimitive.Portal, { container: portalRoot, ...props });
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;
-var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
+var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -5860,9 +5658,9 @@ var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs23(DialogPortal, { children: [
-  /* @__PURE__ */ jsx40(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs23(
+var DialogContent = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs24(DialogPortal, { children: [
+  /* @__PURE__ */ jsx39(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs24(
     DialogPrimitive.Content,
     {
       ref,
@@ -5882,8 +5680,8 @@ var DialogContent = React12.forwardRef(({ className, children, ...props }, ref)
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs23(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500", children: [
-          /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsxs24(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500", children: [
+          /* @__PURE__ */ jsx39(
             "svg",
             {
               width: "15",
@@ -5892,7 +5690,7 @@ var DialogContent = React12.forwardRef(({ className, children, ...props }, ref)
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
               className: "h-4 w-4",
-              children: /* @__PURE__ */ jsx40(
+              children: /* @__PURE__ */ jsx39(
                 "path",
                 {
                   d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
@@ -5903,16 +5701,16 @@ var DialogContent = React12.forwardRef(({ className, children, ...props }, ref)
               )
             }
           ),
-          /* @__PURE__ */ jsx40("span", { className: "sr-only", children: "Close" })
+          /* @__PURE__ */ jsx39("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
   )
 ] }));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx40("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx39("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
 DialogHeader.displayName = "DialogHeader";
-var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx40(
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx39(
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -5920,7 +5718,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx40(
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
+var DialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
   DialogPrimitive.Title,
   {
     ref,
@@ -5929,7 +5727,7 @@ var DialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
+var DialogDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
   DialogPrimitive.Description,
   {
     ref,
@@ -5940,7 +5738,8 @@ var DialogDescription = React12.forwardRef(({ className, ...props }, ref) => /*
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/databrowser/components/add-key-modal.tsx
-import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
+import { IconPlus as IconPlus2 } from "@tabler/icons-react";
+import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
 function AddKeyModal() {
   const { setSelectedKey } = useTab();
   const [open, setOpen] = useState9(false);
@@ -5963,7 +5762,7 @@ function AddKeyModal() {
       });
     }, 100);
   });
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     Dialog,
     {
       open,
@@ -5972,35 +5771,24 @@ function AddKeyModal() {
         setOpen(open2);
       },
       children: [
-        /* @__PURE__ */ jsx41(SimpleTooltip, { content: "Add key", children: /* @__PURE__ */ jsx41(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs24(
-          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__ */ jsx41(IconPlus2, { className: "size-5" }),
-              "Key"
-            ]
-          }
-        ) }) }),
-        /* @__PURE__ */ jsxs24(DialogContent, { className: "max-w-[400px]", children: [
-          /* @__PURE__ */ jsx41(DialogHeader, { children: /* @__PURE__ */ jsx41(DialogTitle, { children: "Create new key" }) }),
-          /* @__PURE__ */ jsx41("div", { className: "sr-only", children: /* @__PURE__ */ jsx41(DialogDescription2, { children: "Create new key" }) }),
-          /* @__PURE__ */ jsxs24("form", { className: "mt-4", onSubmit, children: [
-            /* @__PURE__ */ jsxs24("div", { className: "flex gap-1", children: [
-              /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx40(SimpleTooltip, { content: "Add key", children: /* @__PURE__ */ jsx40(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx40(Button, { variant: "primary", size: "icon-sm", "data-testid": "add-key-button", children: /* @__PURE__ */ jsx40(IconPlus2, { className: "size-4" }) }) }) }),
+        /* @__PURE__ */ jsxs25(DialogContent, { className: "max-w-[400px]", children: [
+          /* @__PURE__ */ jsx40(DialogHeader, { children: /* @__PURE__ */ jsx40(DialogTitle, { children: "Create new key" }) }),
+          /* @__PURE__ */ jsx40("div", { className: "sr-only", children: /* @__PURE__ */ jsx40(DialogDescription2, { children: "Create new key" }) }),
+          /* @__PURE__ */ jsxs25("form", { className: "mt-4", onSubmit, children: [
+            /* @__PURE__ */ jsxs25("div", { className: "flex gap-1", children: [
+              /* @__PURE__ */ jsx40(
                 Controller3,
                 {
                   control,
                   name: "type",
-                  render: ({ field }) => /* @__PURE__ */ jsxs24(Select, { value: field.value, onValueChange: field.onChange, children: [
-                    /* @__PURE__ */ jsx41(SelectTrigger, { className: "h-8 w-auto pl-[3px] pr-8", children: /* @__PURE__ */ jsx41(SelectValue, {}) }),
-                    /* @__PURE__ */ jsx41(SelectContent, { children: /* @__PURE__ */ jsx41(SelectGroup, { children: DATA_TYPES.filter((t) => t !== "search").map((type) => /* @__PURE__ */ jsx41(SelectItem, { value: type, children: /* @__PURE__ */ jsx41(TypeTag, { variant: type, type: "badge" }) }, type)) }) })
+                  render: ({ field }) => /* @__PURE__ */ jsxs25(Select, { value: field.value, onValueChange: field.onChange, children: [
+                    /* @__PURE__ */ jsx40(SelectTrigger, { className: "h-8 w-auto pl-[3px] pr-8", children: /* @__PURE__ */ jsx40(SelectValue, {}) }),
+                    /* @__PURE__ */ jsx40(SelectContent, { children: /* @__PURE__ */ jsx40(SelectGroup, { children: DATA_TYPES.map((type) => /* @__PURE__ */ jsx40(SelectItem, { value: type, children: /* @__PURE__ */ jsx40(TypeTag, { variant: type, type: "badge" }) }, type)) }) })
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx41(
+              /* @__PURE__ */ jsx40(
                 Controller3,
                 {
                   rules: {
@@ -6008,14 +5796,14 @@ function AddKeyModal() {
                   },
                   control,
                   name: "key",
-                  render: ({ field }) => /* @__PURE__ */ jsx41(Input, { placeholder: "mykey", ...field, className: "h-8 grow" })
+                  render: ({ field }) => /* @__PURE__ */ jsx40(Input, { placeholder: "mykey", ...field, className: "h-8 grow" })
                 }
               )
             ] }),
-            formState.errors.key && /* @__PURE__ */ jsx41("p", { className: "mb-3 mt-2 text-xs text-red-500", children: formState.errors.key?.message }),
-            /* @__PURE__ */ jsx41("p", { className: "mt-2 text-xs text-zinc-500", children: "After creating the key, you can edit the value" }),
-            /* @__PURE__ */ jsxs24("div", { className: "mt-6 flex justify-end gap-2", children: [
-              /* @__PURE__ */ jsx41(
+            formState.errors.key && /* @__PURE__ */ jsx40("p", { className: "mb-3 mt-2 text-xs text-red-500", children: formState.errors.key?.message }),
+            /* @__PURE__ */ jsx40("p", { className: "mt-2 text-xs text-zinc-500", children: "After creating the key, you can edit the value" }),
+            /* @__PURE__ */ jsxs25("div", { className: "mt-6 flex justify-end gap-2", children: [
+              /* @__PURE__ */ jsx40(
                 Button,
                 {
                   type: "button",
@@ -6026,7 +5814,7 @@ function AddKeyModal() {
                   children: "Cancel"
                 }
               ),
-              /* @__PURE__ */ jsx41(Button, { variant: "primary", type: "submit", children: /* @__PURE__ */ jsx41(Spinner, { isLoading: isPending, isLoadingText: "Creating", children: "Create" }) })
+              /* @__PURE__ */ jsx40(Button, { variant: "primary", type: "submit", children: /* @__PURE__ */ jsx40(Spinner, { isLoading: isPending, isLoadingText: "Creating", children: "Create" }) })
             ] })
           ] })
         ] })
@@ -6035,38 +5823,222 @@ function AddKeyModal() {
   );
 }
 
-// src/components/databrowser/components/sidebar/reload-button.tsx
-import { useState as useState10 } from "react";
-import { IconLoader2 as IconLoader22, IconRefresh } from "@tabler/icons-react";
-import { jsx as jsx42 } from "react/jsx-runtime";
-var ReloadButton = ({
-  onClick,
-  isLoading: isLoadingProp
-}) => {
-  const [isLoading, setIsLoading] = useState10(false);
-  const handleClick = () => {
-    setIsLoading(true);
-    onClick();
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 350);
-  };
-  return /* @__PURE__ */ jsx42("div", { children: /* @__PURE__ */ jsx42(SimpleTooltip, { content: "Refresh", children: /* @__PURE__ */ jsx42(
-    Button,
-    {
-      variant: "outline",
-      size: "icon",
-      onClick: handleClick,
-      disabled: isLoading || isLoadingProp,
-      children: isLoading ? /* @__PURE__ */ jsx42(IconLoader22, { className: "size-5 animate-spin text-zinc-500" }) : /* @__PURE__ */ jsx42(IconRefresh, { className: "size-5 text-zinc-500 dark:text-zinc-600" })
-    }
-  ) }) });
+// src/components/databrowser/components/sidebar/empty.tsx
+import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
+var Empty = () => {
+  return /* @__PURE__ */ jsx41("div", { className: "flex h-full w-full items-center justify-center rounded-md border bg-white px-4 py-6 text-center", children: /* @__PURE__ */ jsxs26("div", { className: "space-y-5", children: [
+    /* @__PURE__ */ jsx41("p", { className: "text-md font-medium", children: "Data on a break" }),
+    /* @__PURE__ */ jsx41("p", { className: "text-balance text-center", children: '"Quick, lure it back with some CLI magic!"' })
+  ] }) });
 };
 
-// src/components/databrowser/components/sidebar/search-input.tsx
-import { useEffect as useEffect11, useRef as useRef3, useState as useState11 } from "react";
+// src/components/databrowser/components/sidebar/keys-list.tsx
+import { Fragment as Fragment9, useRef as useRef3 } from "react";
+
+// src/components/databrowser/components/sidebar-context-menu.tsx
+import { useState as useState10 } from "react";
+import { IconCopy as IconCopy3, IconExternalLink as IconExternalLink2, IconTrash as IconTrash3 } from "@tabler/icons-react";
+import { ContextMenuSeparator as ContextMenuSeparator3 } from "@radix-ui/react-context-menu";
+import { Fragment as Fragment8, jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
+var SidebarContextMenu = ({ children }) => {
+  const { mutate: deleteKey } = useDeleteKey();
+  const [isAlertOpen, setAlertOpen] = useState10(false);
+  const [contextKeys, setContextKeys] = useState10([]);
+  const { addTab, setSelectedKey: setSelectedKeyGlobal, selectTab, setSearch } = useDatabrowserStore();
+  const { search: currentSearch, selectedKeys } = useTab();
+  return /* @__PURE__ */ jsxs27(Fragment8, { children: [
+    /* @__PURE__ */ jsx42(
+      DeleteAlertDialog,
+      {
+        deletionType: "key",
+        count: contextKeys.length,
+        open: isAlertOpen,
+        onOpenChange: setAlertOpen,
+        onDeleteConfirm: (e) => {
+          e.stopPropagation();
+          for (const key of contextKeys) {
+            deleteKey(key);
+          }
+          setAlertOpen(false);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs27(ContextMenu, { modal: false, children: [
+      /* @__PURE__ */ jsx42(
+        ContextMenuTrigger,
+        {
+          onContextMenu: (e) => {
+            const el = e.target;
+            const key = el.closest("[data-key]");
+            if (key && key instanceof HTMLElement && key.dataset.key !== void 0) {
+              const clickedKey = key.dataset.key;
+              if (selectedKeys.includes(clickedKey)) {
+                setContextKeys(selectedKeys);
+              } else {
+                setContextKeys([clickedKey]);
+              }
+            } else {
+              throw new Error("Key not found");
+            }
+          },
+          children
+        }
+      ),
+      /* @__PURE__ */ jsxs27(ContextMenuContent, { children: [
+        /* @__PURE__ */ jsxs27(
+          ContextMenuItem,
+          {
+            onClick: () => {
+              navigator.clipboard.writeText(contextKeys[0]);
+              toast({
+                description: "Key copied to clipboard"
+              });
+            },
+            className: "gap-2",
+            disabled: contextKeys.length !== 1,
+            children: [
+              /* @__PURE__ */ jsx42(IconCopy3, { size: 16 }),
+              "Copy key"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs27(
+          ContextMenuItem,
+          {
+            onClick: () => {
+              const newTabId = addTab();
+              setSelectedKeyGlobal(newTabId, contextKeys[0]);
+              setSearch(newTabId, currentSearch);
+              selectTab(newTabId);
+            },
+            className: "gap-2",
+            disabled: contextKeys.length !== 1,
+            children: [
+              /* @__PURE__ */ jsx42(IconExternalLink2, { size: 16 }),
+              "Open in new tab"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx42(ContextMenuSeparator3, {}),
+        /* @__PURE__ */ jsxs27(ContextMenuItem, { onClick: () => setAlertOpen(true), className: "gap-2", children: [
+          /* @__PURE__ */ jsx42(IconTrash3, { size: 16 }),
+          contextKeys.length > 1 ? `Delete ${contextKeys.length} keys` : "Delete key"
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/databrowser/components/sidebar/keys-list.tsx
+import { Fragment as Fragment10, jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
+var KeysList = () => {
+  const { keys } = useKeys();
+  const lastClickedIndexRef = useRef3(null);
+  return /* @__PURE__ */ jsx43(SidebarContextMenu, { children: /* @__PURE__ */ jsxs28(Fragment10, { children: [
+    /* @__PURE__ */ jsx43("div", { className: "h-px" }),
+    keys.map((data, i) => /* @__PURE__ */ jsxs28(Fragment9, { children: [
+      /* @__PURE__ */ jsx43(
+        KeyItem,
+        {
+          index: i,
+          data,
+          allKeys: keys,
+          lastClickedIndexRef
+        }
+      ),
+      i !== keys.length - 1 && /* @__PURE__ */ jsx43("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__ */ jsxs28(
+    Button,
+    {
+      "data-key": dataKey,
+      variant: isKeySelected ? "default" : "ghost",
+      className: cn(
+        "relative flex h-10 w-full items-center justify-start gap-2 px-3 py-0 !ring-0 focus-visible:bg-zinc-50",
+        "-my-px select-none border border-transparent text-left",
+        isKeySelected && "shadow-sm",
+        isKeySelected && (keyStyles[dataType] ?? defaultKeyStyle)
+      ),
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsx43(TypeTag, { variant: dataType, type: "icon" }),
+        /* @__PURE__ */ jsx43("p", { className: "truncate whitespace-nowrap", children: dataKey })
+      ]
+    }
+  );
+};
+
+// src/components/databrowser/components/sidebar/reload-button.tsx
+import { useState as useState11 } from "react";
+import { IconLoader2 as IconLoader22, IconRefresh } from "@tabler/icons-react";
+import { jsx as jsx44 } from "react/jsx-runtime";
+var ReloadButton = ({
+  onClick,
+  isLoading: isLoadingProp
+}) => {
+  const [isLoading, setIsLoading] = useState11(false);
+  const handleClick = () => {
+    setIsLoading(true);
+    onClick();
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 350);
+  };
+  return /* @__PURE__ */ jsx44("div", { children: /* @__PURE__ */ jsx44(SimpleTooltip, { content: "Refresh", children: /* @__PURE__ */ jsx44(
+    Button,
+    {
+      variant: "outline",
+      size: "icon-sm",
+      onClick: handleClick,
+      disabled: isLoading || isLoadingProp,
+      children: isLoading ? /* @__PURE__ */ jsx44(IconLoader22, { className: "animate-spin text-zinc-500", size: 16 }) : /* @__PURE__ */ jsx44(IconRefresh, { className: "text-zinc-500 dark:text-zinc-600", size: 16 })
+    }
+  ) }) });
+};
+
+// src/components/databrowser/components/sidebar/search-input.tsx
+import { useEffect as useEffect11, useRef as useRef4, useState as useState12 } from "react";
 import { IconX as IconX2 } from "@tabler/icons-react";
-import { jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
 var dedupeSearchHistory = (history) => {
   const seen = /* @__PURE__ */ new Set();
   return history.filter((item) => {
@@ -6078,11 +6050,11 @@ var dedupeSearchHistory = (history) => {
 var SearchInput = () => {
   const { setSearchKey, search } = useTab();
   const { searchHistory, addSearchHistory } = useDatabrowserStore();
-  const [state, setState] = useState11(search.key);
-  const [isFocus, setIsFocus] = useState11(false);
-  const [focusedIndex, setFocusedIndex] = useState11(-1);
-  const inputRef = useRef3(null);
-  const historyItemRefs = useRef3([]);
+  const [state, setState] = useState12(search.key);
+  const [isFocus, setIsFocus] = useState12(false);
+  const [focusedIndex, setFocusedIndex] = useState12(-1);
+  const inputRef = useRef4(null);
+  const historyItemRefs = useRef4([]);
   const handleSubmit = (value) => {
     if (value.trim() !== "" && !value.includes("*")) value = `${value}*`;
     addSearchHistory(value);
@@ -6122,14 +6094,14 @@ var SearchInput = () => {
       }
     }
   };
-  return /* @__PURE__ */ jsxs25("div", { className: "relative grow", children: [
-    /* @__PURE__ */ jsxs25(Popover, { open: isFocus && filteredHistory.length > 0, children: [
-      /* @__PURE__ */ jsx43(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx43("div", { className: "h-8 rounded-md border border-zinc-300 font-normal", children: /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsxs29("div", { className: "relative grow", children: [
+    /* @__PURE__ */ jsxs29(Popover, { open: isFocus && filteredHistory.length > 0, children: [
+      /* @__PURE__ */ jsx45(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx45("div", { className: "h-8 rounded-md rounded-l-none border border-zinc-300 font-normal", children: /* @__PURE__ */ jsx45(
         Input,
         {
           ref: inputRef,
           placeholder: "Search",
-          className: "h-full border-none pr-6",
+          className: "h-full rounded-l-none border-none pr-6",
           onKeyDown: handleKeyDown,
           onChange: (e) => {
             setState(e.currentTarget.value);
@@ -6143,7 +6115,7 @@ var SearchInput = () => {
           onBlur: () => setIsFocus(false)
         }
       ) }) }),
-      /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx45(
         PopoverContent,
         {
           className: "w-[--radix-popover-trigger-width] divide-y px-3 py-2 text-[13px] text-zinc-900",
@@ -6152,911 +6124,146 @@ var SearchInput = () => {
             e.preventDefault();
             e.stopPropagation();
           },
-          children: filteredHistory.map((item, index) => /* @__PURE__ */ jsx43("div", { className: "w-full py-[3px]", children: /* @__PURE__ */ jsx43(
-            "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__ */ jsxs25(
-      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__ */ jsx43(IconX2, { size: 16 }),
-          /* @__PURE__ */ jsx43("span", { className: "sr-only", children: "Clear" })
-        ]
-      }
-    ),
-    " "
-  ] });
-};
-
-// src/components/databrowser/components/sidebar/type-selector.tsx
-import { jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
-var ALL_TYPES_KEY = "all";
-function DataTypeSelector() {
-  const { search, setSearchType } = useTab();
-  return /* @__PURE__ */ jsxs26(
-    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__ */ jsx44(SelectTrigger, { className: "!w-auto select-none whitespace-nowrap border-zinc-300 pr-8", children: /* @__PURE__ */ jsx44(SelectValue, {}) }),
-        /* @__PURE__ */ jsx44(SelectContent, { children: /* @__PURE__ */ jsx44(SelectGroup, { children: [[ALL_TYPES_KEY, "All Types"], ...Object.entries(DATA_TYPE_NAMES)].map(
-          ([key, value]) => /* @__PURE__ */ jsx44(SelectItem, { value: key, children: value }, key)
-        ) }) })
-      ]
-    }
-  );
-}
-
-// src/components/databrowser/components/header/index.tsx
-import { Fragment as Fragment8, jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
-var Header = () => {
-  const { isValuesSearchSelected, setIsValuesSearchSelected } = useTab();
-  return /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-1.5", children: [
-    /* @__PURE__ */ jsx45(
-      Segmented,
-      {
-        options: [
-          {
-            key: "keys",
-            label: "Keys"
-          },
-          {
-            key: "values",
-            label: /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-1", children: [
-              "Values",
-              /* @__PURE__ */ jsx45("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__ */ jsx45(Fragment8, { children: /* @__PURE__ */ jsx45(IndexSelector, {}) }) : /* @__PURE__ */ jsxs27(Fragment8, { children: [
-      /* @__PURE__ */ jsx45(DataTypeSelector, {}),
-      /* @__PURE__ */ jsx45(SearchInput, {})
-    ] }),
-    /* @__PURE__ */ jsx45(RefreshButton, {}),
-    /* @__PURE__ */ jsx45(AddKeyModal, {})
-  ] });
-};
-var IndexSelector = () => {
-  const {
-    valuesSearch: { index },
-    setValuesSearchIndex
-  } = useTab();
-  const { data } = useFetchSearchIndexes();
-  return /* @__PURE__ */ jsxs27(
-    Select,
-    {
-      value: index,
-      onValueChange: (value) => {
-        setValuesSearchIndex(value);
-      },
-      children: [
-        /* @__PURE__ */ jsx45(SelectTrigger, { className: "select-none whitespace-nowrap border-zinc-300", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Select an index" }) }),
-        /* @__PURE__ */ jsx45(SelectContent, { children: /* @__PURE__ */ jsx45(SelectGroup, { children: data?.map((index2) => /* @__PURE__ */ jsx45(SelectItem, { value: index2, children: index2 }, index2)) }) })
-      ]
-    }
-  );
-};
-var RefreshButton = () => {
-  const { query } = useKeys();
-  return /* @__PURE__ */ jsx45(
-    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
-import { jsx as jsx46 } from "react/jsx-runtime";
-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__ */ jsx46("p", { className: "text-sm text-red-600 dark:text-red-400", children: formatUpstashErrorMessage(query.error) });
-};
-
-// src/components/databrowser/components/query-builder.tsx
-import { useState as useState12 } from "react";
-
-// src/components/databrowser/components/display/input/query-editor.tsx
-import { useEffect as useEffect12, useMemo as useMemo8, useRef as useRef4 } from "react";
-import { Editor as Editor2, useMonaco as useMonaco2 } from "@monaco-editor/react";
-
-// 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
-import { jsx as jsx47 } from "react/jsx-runtime";
-var QueryEditor = (props) => {
-  if (isTest) {
-    return /* @__PURE__ */ jsx47(TestQueryEditor, { ...props });
-  }
-  return /* @__PURE__ */ jsx47(MonacoQueryEditor, { ...props });
-};
-var MonacoQueryEditor = ({ value, onChange, height, schema }) => {
-  const monaco = useMonaco2();
-  const editorRef = useRef4(null);
-  const theme = useTheme();
-  const libDisposableRef = useRef4(null);
-  const typeDefinitions = useMemo8(() => generateTypeDefinitions(schema), [schema]);
-  useEffect12(() => {
-    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);
-  };
-  useEffect12(() => {
-    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__ */ jsx47("div", { className: cn("group/editor relative"), style: { height }, children: /* @__PURE__ */ jsx47(
-    Editor2,
-    {
-      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__ */ jsx47("div", { className: cn("group/editor relative"), style: { height }, children: /* @__PURE__ */ jsx47(
-    "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
-import { jsx as jsx48 } from "react/jsx-runtime";
-var QueryBuilder = () => {
-  const { valuesSearch, setValuesSearchQuery } = useTab();
-  const [value, setValue] = useState12(valuesSearch.query);
-  const { data: indexDetails } = useFetchSearchIndex(valuesSearch.index);
-  return /* @__PURE__ */ jsx48("div", { className: "rounded-lg border border-zinc-300 bg-white px-[6px] dark:border-zinc-700", children: /* @__PURE__ */ jsx48(
-    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: indexDetails?.schema
-    }
-  ) });
-};
-
-// src/components/databrowser/components/sidebar/empty.tsx
-import { jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
-var Empty = () => {
-  return /* @__PURE__ */ jsx49("div", { className: "flex h-full w-full items-center justify-center rounded-md border bg-white px-4 py-6 text-center", children: /* @__PURE__ */ jsxs28("div", { className: "space-y-5", children: [
-    /* @__PURE__ */ jsx49("p", { className: "text-md font-medium", children: "Data on a break" }),
-    /* @__PURE__ */ jsx49("p", { className: "text-balance text-center", children: '"Quick, lure it back with some CLI magic!"' })
-  ] }) });
-};
-
-// src/components/databrowser/components/sidebar/keys-list.tsx
-import { Fragment as Fragment10, useRef as useRef5 } from "react";
-import { IconChevronRight as IconChevronRight3 } from "@tabler/icons-react";
-
-// src/components/databrowser/components/sidebar-context-menu.tsx
-import { useState as useState13 } from "react";
-import { ContextMenuSeparator as ContextMenuSeparator3 } from "@radix-ui/react-context-menu";
-import { IconCopy as IconCopy3, IconExternalLink as IconExternalLink2, IconTrash as IconTrash3 } from "@tabler/icons-react";
-import { Fragment as Fragment9, jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
-var SidebarContextMenu = ({ children }) => {
-  const { mutate: deleteKey } = useDeleteKey();
-  const [isAlertOpen, setAlertOpen] = useState13(false);
-  const [contextKeys, setContextKeys] = useState13([]);
-  const {
-    addTab,
-    setSelectedKey: setSelectedKeyGlobal,
-    selectTab,
-    setSearch
-  } = useDatabrowserStore();
-  const { search: currentSearch, selectedKeys, setSelectedKey } = useTab();
-  return /* @__PURE__ */ jsxs29(Fragment9, { children: [
-    /* @__PURE__ */ jsx50(
-      DeleteAlertDialog,
-      {
-        deletionType: "key",
-        count: contextKeys.length,
-        open: isAlertOpen,
-        onOpenChange: setAlertOpen,
-        onDeleteConfirm: (e) => {
-          e.stopPropagation();
-          for (const key of contextKeys) {
-            deleteKey(key);
-          }
-          setAlertOpen(false);
+          children: filteredHistory.map((item, index) => /* @__PURE__ */ jsx45("div", { className: "w-full py-[3px]", children: /* @__PURE__ */ jsx45(
+            "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__ */ jsxs29(
+      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__ */ jsx45(IconX2, { size: 16 }),
+          /* @__PURE__ */ jsx45("span", { className: "sr-only", children: "Clear" })
+        ]
       }
     ),
-    /* @__PURE__ */ jsxs29(ContextMenu, { modal: false, children: [
-      /* @__PURE__ */ jsx50(
-        ContextMenuTrigger,
-        {
-          onContextMenu: (e) => {
-            const el = e.target;
-            const key = el.closest("[data-key]");
-            if (key && key instanceof HTMLElement && key.dataset.key !== void 0) {
-              const clickedKey = key.dataset.key;
-              if (selectedKeys.includes(clickedKey)) {
-                setContextKeys(selectedKeys);
-              } else {
-                setSelectedKey(clickedKey);
-                setContextKeys([clickedKey]);
-              }
-            } else {
-              throw new Error("Key not found");
-            }
-          },
-          children
-        }
-      ),
-      /* @__PURE__ */ jsxs29(ContextMenuContent, { children: [
-        /* @__PURE__ */ jsxs29(
-          ContextMenuItem,
-          {
-            onClick: () => {
-              navigator.clipboard.writeText(contextKeys[0]);
-              toast({
-                description: "Key copied to clipboard"
-              });
-            },
-            className: "gap-2",
-            disabled: contextKeys.length !== 1,
-            children: [
-              /* @__PURE__ */ jsx50(IconCopy3, { size: 16 }),
-              "Copy key"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs29(
-          ContextMenuItem,
-          {
-            onClick: () => {
-              const newTabId = addTab();
-              setSelectedKeyGlobal(newTabId, contextKeys[0]);
-              setSearch(newTabId, currentSearch);
-              selectTab(newTabId);
-            },
-            className: "gap-2",
-            disabled: contextKeys.length !== 1,
-            children: [
-              /* @__PURE__ */ jsx50(IconExternalLink2, { size: 16 }),
-              "Open in new tab"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx50(ContextMenuSeparator3, {}),
-        /* @__PURE__ */ jsxs29(ContextMenuItem, { onClick: () => setAlertOpen(true), className: "gap-2", children: [
-          /* @__PURE__ */ jsx50(IconTrash3, { size: 16 }),
-          contextKeys.length > 1 ? `Delete ${contextKeys.length} keys` : "Delete key"
-        ] })
-      ] })
-    ] })
+    " "
   ] });
 };
 
-// src/components/databrowser/components/sidebar/keys-list.tsx
-import { Fragment as Fragment11, jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
-var KeysList = () => {
-  const { keys } = useKeys();
-  const lastClickedIndexRef = useRef5(null);
-  return /* @__PURE__ */ jsx51(SidebarContextMenu, { children: /* @__PURE__ */ jsxs30(Fragment11, { children: [
-    /* @__PURE__ */ jsx51("div", { className: "h-px" }),
-    keys.map((data, i) => /* @__PURE__ */ jsxs30(Fragment10, { children: [
-      /* @__PURE__ */ jsx51(
-        KeyItem,
-        {
-          index: i,
-          data,
-          allKeys: keys,
-          lastClickedIndexRef
-        }
-      ),
-      i !== keys.length - 1 && /* @__PURE__ */ jsx51("div", { className: "-z-10 mx-[13px] h-px bg-zinc-200 dark:bg-zinc-200" })
-    ] }, data[0]))
-  ] }) });
-};
-var KeyItem = ({
-  data,
-  index,
-  allKeys,
-  lastClickedIndexRef
-}) => {
-  const { selectedKeys, setSelectedKeys, setSelectedKey } = useTab();
-  const [dataKey, dataType] = data;
-  const isKeySelected = selectedKeys.includes(dataKey);
-  const handleClick = (e) => {
-    if (e.shiftKey && lastClickedIndexRef.current !== null) {
-      const start = Math.min(lastClickedIndexRef.current, index);
-      const end = Math.max(lastClickedIndexRef.current, index);
-      const rangeKeys = allKeys.slice(start, end + 1).map(([key]) => key);
-      setSelectedKeys(rangeKeys);
-    } else if (e.metaKey || e.ctrlKey) {
-      if (isKeySelected) {
-        setSelectedKeys(selectedKeys.filter((k) => k !== dataKey));
-      } else {
-        setSelectedKeys([...selectedKeys, dataKey]);
-      }
-      lastClickedIndexRef.current = index;
-    } else {
-      setSelectedKey(dataKey);
-      lastClickedIndexRef.current = index;
-    }
-  };
-  return /* @__PURE__ */ jsxs30(
-    "button",
+// src/components/databrowser/components/sidebar/skeleton-buttons.tsx
+import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+var DEFAULT_SKELETON_COUNT = 6;
+var LoadingSkeleton = () => /* @__PURE__ */ jsx46("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__ */ jsxs30("div", { className: "flex h-10 items-center gap-2 px-3", children: [
+  /* @__PURE__ */ jsx46(Skeleton, { className: "size-5 shrink-0 rounded" }),
+  /* @__PURE__ */ jsx46(Skeleton, { className: "h-4 grow rounded" })
+] }, idx)) });
+
+// src/components/databrowser/components/sidebar/type-selector.tsx
+import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
+var ALL_TYPES_KEY = "all";
+function DataTypeSelector() {
+  const { search, setSearchType } = useTab();
+  return /* @__PURE__ */ jsxs31(
+    Select,
     {
-      "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,
+      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__ */ jsx51(TypeTag, { variant: dataType, type: "icon" }),
-        /* @__PURE__ */ jsx51("p", { className: "grow truncate whitespace-nowrap", children: dataKey }),
-        isKeySelected && /* @__PURE__ */ jsx51(IconChevronRight3, { className: "shrink-0 text-zinc-500", size: 20 })
+        /* @__PURE__ */ jsx47(SelectTrigger, { className: "!w-auto select-none whitespace-nowrap rounded-r-none border-r-0 border-zinc-300 pr-8", children: /* @__PURE__ */ jsx47(SelectValue, {}) }),
+        /* @__PURE__ */ jsx47(SelectContent, { children: /* @__PURE__ */ jsx47(SelectGroup, { children: [[ALL_TYPES_KEY, "All Types"], ...Object.entries(DATA_TYPE_NAMES)].map(
+          ([key, value]) => /* @__PURE__ */ jsx47(SelectItem, { value: key, children: value }, key)
+        ) }) })
       ]
     }
   );
-};
-
-// src/components/databrowser/components/sidebar/skeleton-buttons.tsx
-import { jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
-var DEFAULT_SKELETON_COUNT = 6;
-var LoadingSkeleton = () => /* @__PURE__ */ jsx52("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__ */ jsxs31("div", { className: "flex h-10 items-center gap-2 px-3", children: [
-  /* @__PURE__ */ jsx52(Skeleton, { className: "size-5 shrink-0 rounded" }),
-  /* @__PURE__ */ jsx52(Skeleton, { className: "h-4 grow rounded" })
-] }, idx)) });
+}
 
 // src/components/databrowser/components/sidebar/index.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
 function Sidebar() {
   const { keys, query } = useKeys();
-  return /* @__PURE__ */ jsx53("div", { className: "flex h-full flex-col gap-2", children: query.isLoading && keys.length === 0 ? /* @__PURE__ */ jsx53(LoadingSkeleton, {}) : keys.length > 0 ? (
-    // Infinite scroll already has a loader at the bottom
-    /* @__PURE__ */ jsx53(
-      InfiniteScroll,
-      {
-        query,
-        disableRoundedInherit: true,
-        className: "min-h-0 rounded-xl bg-zinc-100 px-2 py-5 pr-4",
-        scrollBarClassName: "py-5",
-        children: /* @__PURE__ */ jsx53(KeysList, {})
-      }
-    )
-  ) : /* @__PURE__ */ jsx53(Empty, {}) });
+  return /* @__PURE__ */ jsxs32("div", { className: "flex h-full flex-col gap-2 p-4", children: [
+    /* @__PURE__ */ jsxs32("div", { className: "rounded-lg bg-zinc-100", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "flex h-10 items-center justify-between pl-1", children: [
+        /* @__PURE__ */ jsx48(DisplayDbSize, {}),
+        /* @__PURE__ */ jsxs32("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsx48(
+            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__ */ jsx48(AddKeyModal, {})
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs32("div", { className: "flex h-10 items-center", children: [
+        /* @__PURE__ */ jsx48(DataTypeSelector, {}),
+        /* @__PURE__ */ jsx48(SearchInput, {})
+      ] })
+    ] }),
+    query.isLoading && keys.length === 0 ? /* @__PURE__ */ jsx48(LoadingSkeleton, {}) : keys.length > 0 ? (
+      // Infinite scroll already has a loader at the bottom
+      /* @__PURE__ */ jsx48(InfiniteScroll, { query, disableRoundedInherit: true, className: "min-h-0", children: /* @__PURE__ */ jsx48(KeysList, {}) })
+    ) : /* @__PURE__ */ jsx48(Empty, {})
+  ] });
 }
 
 // src/components/databrowser/components/databrowser-instance.tsx
-import { jsx as jsx54, jsxs as jsxs32 } from "react/jsx-runtime";
-var PREFIX = "const query: Query = ";
+import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
 var DatabrowserInstance = ({ hidden }) => {
-  const { isValuesSearchSelected } = useTab();
-  return /* @__PURE__ */ jsx54(KeysProvider, { children: /* @__PURE__ */ jsxs32(
-    "div",
-    {
-      className: cn(
-        "flex min-h-0 grow flex-col rounded-md bg-white px-5 pb-5",
-        hidden && "hidden"
-      ),
-      children: [
-        /* @__PURE__ */ jsxs32("div", { className: "space-y-3 py-5", children: [
-          /* @__PURE__ */ jsx54(Header, {}),
-          isValuesSearchSelected && /* @__PURE__ */ jsx54(QueryBuilder, {}),
-          /* @__PURE__ */ jsx54(HeaderError, {})
-        ] }),
-        /* @__PURE__ */ jsxs32(
-          PanelGroup,
-          {
-            autoSaveId: "persistence",
-            direction: "horizontal",
-            className: "h-full w-full text-sm antialiased",
-            children: [
-              /* @__PURE__ */ jsx54(Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ jsx54(Sidebar, {}) }),
-              /* @__PURE__ */ jsxs32(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__ */ jsx54("div", { className: "h-[3px] w-[3px] rounded-full bg-zinc-300" }),
-                /* @__PURE__ */ jsx54("div", { className: "h-[3px] w-[3px] rounded-full bg-zinc-300" }),
-                /* @__PURE__ */ jsx54("div", { className: "h-[3px] w-[3px] rounded-full bg-zinc-300" })
-              ] }),
-              /* @__PURE__ */ jsx54(Panel, { minSize: 40, children: /* @__PURE__ */ jsx54(DataDisplay, {}) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx54(Toaster, {})
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsx49(KeysProvider, { children: /* @__PURE__ */ jsxs33("div", { className: cn("min-h-0 grow rounded-md bg-zinc-100", hidden && "hidden"), children: [
+    /* @__PURE__ */ jsxs33(
+      PanelGroup,
+      {
+        autoSaveId: "persistence",
+        direction: "horizontal",
+        className: "h-full w-full gap-0.5 text-sm antialiased",
+        children: [
+          /* @__PURE__ */ jsx49(Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ jsx49(Sidebar, {}) }),
+          /* @__PURE__ */ jsx49(PanelResizeHandle, { className: "group flex h-full w-3 justify-center", children: /* @__PURE__ */ jsx49("div", { className: "h-full border-r border-dashed border-zinc-200 transition-colors group-hover:border-zinc-500" }) }),
+          /* @__PURE__ */ jsx49(Panel, { minSize: 40, children: /* @__PURE__ */ jsx49(DataDisplay, {}) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx49(Toaster, {})
+  ] }) });
 };
 
 // src/components/databrowser/components/databrowser-tabs.tsx
-import { useCallback as useCallback3, useEffect as useEffect14, useMemo as useMemo9, useRef as useRef7, useState as useState15 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect13, useMemo as useMemo8, useRef as useRef6, useState as useState14 } from "react";
 import {
   closestCenter,
   DndContext,
@@ -7068,14 +6275,14 @@ import {
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { IconChevronDown as IconChevronDown2, IconPlus as IconPlus3, IconWindowMaximize } from "@tabler/icons-react";
+import { IconChevronDown as IconChevronDown2, IconMaximize, IconPlus as IconPlus3 } from "@tabler/icons-react";
 
 // src/components/ui/command.tsx
 import * as React13 from "react";
-import { IconSearch as IconSearch2 } from "@tabler/icons-react";
 import { Command as CommandPrimitive } from "cmdk";
-import { jsx as jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
-var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx55(
+import { IconSearch } from "@tabler/icons-react";
+import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
+var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   CommandPrimitive,
   {
     ref,
@@ -7087,9 +6294,9 @@ var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 Command.displayName = CommandPrimitive.displayName;
-var CommandInput = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs33("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ jsx55(IconSearch2, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ jsx55(
+var CommandInput = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs34("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx50(IconSearch, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx50(
     CommandPrimitive.Input,
     {
       ref,
@@ -7102,7 +6309,7 @@ var CommandInput = React13.forwardRef(({ className, ...props }, ref) => /* @__PU
   )
 ] }));
 CommandInput.displayName = CommandPrimitive.Input.displayName;
-var CommandList = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx55(
+var CommandList = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   CommandPrimitive.List,
   {
     ref,
@@ -7111,9 +6318,9 @@ var CommandList = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = CommandPrimitive.List.displayName;
-var CommandEmpty = React13.forwardRef((props, ref) => /* @__PURE__ */ jsx55(CommandPrimitive.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
+var CommandEmpty = React13.forwardRef((props, ref) => /* @__PURE__ */ jsx50(CommandPrimitive.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-var CommandGroup = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx55(
+var CommandGroup = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   CommandPrimitive.Group,
   {
     ref,
@@ -7125,7 +6332,7 @@ var CommandGroup = React13.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
-var CommandSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx55(
+var CommandSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   CommandPrimitive.Separator,
   {
     ref,
@@ -7134,7 +6341,7 @@ var CommandSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-var CommandItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx55(
+var CommandItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   CommandPrimitive.Item,
   {
     ref,
@@ -7147,7 +6354,7 @@ var CommandItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
 ));
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 var CommandShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx55("span", { className: cn("ml-auto text-xs tracking-widest text-zinc-500", className), ...props });
+  return /* @__PURE__ */ jsx50("span", { className: cn("ml-auto text-xs tracking-widest text-zinc-500", className), ...props });
 };
 CommandShortcut.displayName = "CommandShortcut";
 
@@ -7156,16 +6363,25 @@ import {
   IconArrowsMinimize,
   IconCopyPlus,
   IconPin,
-  IconSearch as IconSearch3,
+  IconSearch as IconSearch2,
   IconSquareX,
   IconX as IconX3
 } from "@tabler/icons-react";
 
+// src/components/databrowser/components/tab-type-icon.tsx
+import { jsx as jsx51 } from "react/jsx-runtime";
+function TabTypeIcon({ selectedKey }) {
+  const { data: keyType, isLoading } = useFetchKeyType(selectedKey);
+  if (isLoading) return /* @__PURE__ */ jsx51(Skeleton, { className: "h-5 w-5 rounded" });
+  if (!keyType || keyType === "none") return;
+  return /* @__PURE__ */ jsx51(TypeTag, { variant: keyType, type: "icon" });
+}
+
 // src/hooks/use-overflow.ts
-import { useCallback as useCallback2, useEffect as useEffect13, useRef as useRef6, useState as useState14 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect12, useRef as useRef5, useState as useState13 } from "react";
 var useOverflow = () => {
-  const [isOverflow, setIsOverflow] = useState14(false);
-  const observerRef = useRef6(null);
+  const [isOverflow, setIsOverflow] = useState13(false);
+  const observerRef = useRef5(null);
   const ref = useCallback2((node) => {
     if (observerRef.current) {
       observerRef.current.disconnect();
@@ -7179,7 +6395,7 @@ var useOverflow = () => {
     });
     observerRef.current.observe(node);
   }, []);
-  useEffect13(() => {
+  useEffect12(() => {
     return () => {
       observerRef.current?.disconnect();
     };
@@ -7187,19 +6403,10 @@ var useOverflow = () => {
   return { ref, isOverflow };
 };
 
-// src/components/databrowser/components/tab-type-icon.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
-function TabTypeIcon({ selectedKey }) {
-  const { data: keyType, isLoading } = useFetchKeyType(selectedKey);
-  if (isLoading) return /* @__PURE__ */ jsx56(Skeleton, { className: "h-5 w-5 rounded" });
-  if (!keyType || keyType === "none") return;
-  return /* @__PURE__ */ jsx56(TypeTag, { variant: keyType, type: "icon" });
-}
-
 // src/components/databrowser/components/tab.tsx
-import { jsx as jsx57, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
 var Tab = ({ id, isList }) => {
-  const { active, search, selectedKey, valuesSearch, pinned, isValuesSearchSelected } = useTab();
+  const { active, search, selectedKey, pinned } = useTab();
   const {
     selectTab,
     removeTab,
@@ -7212,21 +6419,22 @@ 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__ */ jsx57("div", { className: "flex h-[20px] w-[20px] items-center justify-center rounded-md bg-emerald-200 text-emerald-800", children: /* @__PURE__ */ jsx57(IconSearch3, { size: 14 }) }) : search.key ? /* @__PURE__ */ jsx57("div", { className: "flex h-[20px] w-[20px] items-center justify-center rounded-md bg-zinc-100 text-zinc-600", children: /* @__PURE__ */ jsx57(IconSearch3, { size: 14 }) }) : selectedKey ? /* @__PURE__ */ jsx57(TabTypeIcon, { selectedKey }) : void 0;
-  const tabNode = /* @__PURE__ */ jsxs34(
+  const label = search.key || selectedKey;
+  const iconNode = search.key ? /* @__PURE__ */ jsx52(IconSearch2, { size: 15 }) : selectedKey ? /* @__PURE__ */ jsx52(TabTypeIcon, { selectedKey }) : void 0;
+  const tabNode = /* @__PURE__ */ jsxs35(
     "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__ */ jsx57("div", { className: cn(!active && "transition-colors"), children: iconNode }),
-        /* @__PURE__ */ jsx57(
+        iconNode,
+        /* @__PURE__ */ jsx52(
           "span",
           {
             ref,
@@ -7234,55 +6442,55 @@ var Tab = ({ id, isList }) => {
             children: label || "New Tab"
           }
         ),
-        pinned && /* @__PURE__ */ jsx57(IconPin, { size: 14, className: "text-zinc-500" }),
-        tabs.length > 1 && !pinned && /* @__PURE__ */ jsx57(
+        pinned && /* @__PURE__ */ jsx52(IconPin, { size: 14, className: "text-zinc-500" }),
+        tabs.length > 1 && !pinned && /* @__PURE__ */ jsx52(
           "button",
           {
             onClick: (e) => {
               e.stopPropagation();
               removeTab(id);
             },
-            className: "p-[2px] text-zinc-400 transition-colors hover:text-zinc-500",
-            children: /* @__PURE__ */ jsx57(IconX3, { size: 16 })
+            className: "p-1 text-zinc-300 transition-colors hover:text-zinc-500 dark:text-zinc-400",
+            children: /* @__PURE__ */ jsx52(IconX3, { size: 16 })
           }
         )
       ]
     }
   );
-  return /* @__PURE__ */ jsxs34(ContextMenu, { children: [
-    /* @__PURE__ */ jsx57(SimpleTooltip, { content: isOverflow ? label : void 0, children: /* @__PURE__ */ jsx57(ContextMenuTrigger, { asChild: true, children: tabNode }) }),
-    /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(ContextMenu, { children: [
+    /* @__PURE__ */ jsx52(SimpleTooltip, { content: isOverflow ? label : void 0, children: /* @__PURE__ */ jsx52(ContextMenuTrigger, { asChild: true, children: tabNode }) }),
+    /* @__PURE__ */ jsxs35(
       ContextMenuContent,
       {
         onClick: (e) => {
           e.stopPropagation();
         },
         children: [
-          /* @__PURE__ */ jsxs34(ContextMenuItem, { onSelect: () => togglePinTab(id), className: "gap-2", children: [
-            /* @__PURE__ */ jsx57(IconPin, { size: 16 }),
+          /* @__PURE__ */ jsxs35(ContextMenuItem, { onSelect: () => togglePinTab(id), className: "gap-2", children: [
+            /* @__PURE__ */ jsx52(IconPin, { size: 16 }),
             pinned ? "Unpin Tab" : "Pin Tab"
           ] }),
-          /* @__PURE__ */ jsxs34(ContextMenuItem, { onSelect: () => duplicateTab(id), className: "gap-2", children: [
-            /* @__PURE__ */ jsx57(IconCopyPlus, { size: 16 }),
+          /* @__PURE__ */ jsxs35(ContextMenuItem, { onSelect: () => duplicateTab(id), className: "gap-2", children: [
+            /* @__PURE__ */ jsx52(IconCopyPlus, { size: 16 }),
             "Duplicate Tab"
           ] }),
-          /* @__PURE__ */ jsx57(ContextMenuSeparator, {}),
-          /* @__PURE__ */ jsxs34(ContextMenuItem, { onSelect: () => forceRemoveTab(id), className: "gap-2", children: [
-            /* @__PURE__ */ jsx57(IconX3, { size: 16 }),
+          /* @__PURE__ */ jsx52(ContextMenuSeparator, {}),
+          /* @__PURE__ */ jsxs35(ContextMenuItem, { onSelect: () => forceRemoveTab(id), className: "gap-2", children: [
+            /* @__PURE__ */ jsx52(IconX3, { size: 16 }),
             "Close Tab"
           ] }),
-          /* @__PURE__ */ jsxs34(ContextMenuItem, { onSelect: () => closeOtherTabs(id), className: "gap-2", children: [
-            /* @__PURE__ */ jsx57(IconSquareX, { size: 16 }),
+          /* @__PURE__ */ jsxs35(ContextMenuItem, { onSelect: () => closeOtherTabs(id), className: "gap-2", children: [
+            /* @__PURE__ */ jsx52(IconSquareX, { size: 16 }),
             "Close Other Tabs"
           ] }),
-          /* @__PURE__ */ jsxs34(
+          /* @__PURE__ */ jsxs35(
             ContextMenuItem,
             {
               onSelect: () => closeAllButPinned(),
               className: "gap-2",
               disabled: !hasPinnedTabs,
               children: [
-                /* @__PURE__ */ jsx57(IconArrowsMinimize, { size: 16 }),
+                /* @__PURE__ */ jsx52(IconArrowsMinimize, { size: 16 }),
                 "Close All But Pinned"
               ]
             }
@@ -7294,10 +6502,10 @@ var Tab = ({ id, isList }) => {
 };
 
 // src/components/databrowser/components/databrowser-tabs.tsx
-import { jsx as jsx58, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
 var SortableTab = ({ id }) => {
-  const [originalWidth, setOriginalWidth] = useState15(null);
-  const textRef = useRef7(null);
+  const [originalWidth, setOriginalWidth] = useState14(null);
+  const textRef = useRef6(null);
   const { tabs } = useDatabrowserStore();
   const tabData = tabs.find(([tabId]) => tabId === id)?.[1];
   const isPinned = tabData?.pinned;
@@ -7321,7 +6529,7 @@ var SortableTab = ({ id }) => {
     }
     setNodeRef(element);
   };
-  useEffect14(() => {
+  useEffect13(() => {
     if (textRef.current && isDragging) {
       const originalMaxWidth = textRef.current.style.maxWidth;
       const originalWhiteSpace = textRef.current.style.whiteSpace;
@@ -7341,7 +6549,7 @@ var SortableTab = ({ id }) => {
       };
     }
   }, [isDragging]);
-  useEffect14(() => {
+  useEffect13(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       if (entries[0]) {
         setOriginalWidth(entries[0].contentRect.width);
@@ -7362,7 +6570,7 @@ var SortableTab = ({ id }) => {
       minWidth: originalWidth ? `${originalWidth}px` : void 0
     } : {}
   };
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx53(
     "div",
     {
       ref: measureRef,
@@ -7370,24 +6578,24 @@ var SortableTab = ({ id }) => {
       className: isDragging ? "cursor-grabbing" : isPinned ? "cursor-default" : "cursor-grab",
       ...attributes,
       ...isPinned ? {} : listeners2,
-      children: /* @__PURE__ */ jsx58(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx58(Tab, { id }) })
+      children: /* @__PURE__ */ jsx53(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx53(Tab, { id }) })
     }
   );
 };
 var DatabrowserTabs = ({ onFullScreenClick }) => {
   const { tabs, reorderTabs, selectedTab, selectTab } = useDatabrowserStore();
-  const sortedTabs = useMemo9(() => {
+  const sortedTabs = useMemo8(() => {
     return [...tabs].sort(([, a], [, b]) => {
       if (a.pinned && !b.pinned) return -1;
       if (!a.pinned && b.pinned) return 1;
       return 0;
     });
   }, [tabs]);
-  const scrollRef = useRef7(null);
-  const [hasLeftShadow, setHasLeftShadow] = useState15(false);
-  const [hasRightShadow, setHasRightShadow] = useState15(false);
-  const [isOverflow, setIsOverflow] = useState15(false);
-  useEffect14(() => {
+  const scrollRef = useRef6(null);
+  const [hasLeftShadow, setHasLeftShadow] = useState14(false);
+  const [hasRightShadow, setHasRightShadow] = useState14(false);
+  const [isOverflow, setIsOverflow] = useState14(false);
+  useEffect13(() => {
     const el = scrollRef.current;
     if (!el) return;
     const onWheel = (event) => {
@@ -7417,7 +6625,7 @@ var DatabrowserTabs = ({ onFullScreenClick }) => {
     setHasRightShadow(scrollLeft + clientWidth < scrollWidth - 1);
     setIsOverflow(scrollWidth > clientWidth + 1);
   }, []);
-  useEffect14(() => {
+  useEffect13(() => {
     recomputeShadows();
     const el = scrollRef.current;
     if (!el) return;
@@ -7445,70 +6653,73 @@ var DatabrowserTabs = ({ onFullScreenClick }) => {
       reorderTabs(oldIndex, newIndex);
     }
   };
-  return /* @__PURE__ */ jsx58("div", { className: "relative shrink-0 overflow-hidden rounded-t-lg bg-zinc-300", children: /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-1", children: [
-    /* @__PURE__ */ jsxs35("div", { className: "relative min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx58(
-        "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__ */ jsx58(
-        "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__ */ jsxs35(
-        "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__ */ jsx58(
-              DndContext,
-              {
-                sensors,
-                collisionDetection: closestCenter,
-                onDragEnd: handleDragEnd,
-                modifiers: [restrictToHorizontalAxis],
-                measuring: {
-                  droppable: {
-                    strategy: MeasuringStrategy.Always
-                  }
-                },
-                children: /* @__PURE__ */ jsx58(
-                  SortableContext,
-                  {
-                    items: sortedTabs.map(([id]) => id),
-                    strategy: horizontalListSortingStrategy,
-                    children: selectedTab && sortedTabs.map(([id]) => /* @__PURE__ */ jsx58(SortableTab, { id }, id))
-                  }
-                )
-              }
-            ),
-            !isOverflow && /* @__PURE__ */ jsx58("div", { className: "flex items-center gap-1 pl-1 pr-1", children: /* @__PURE__ */ jsx58(AddTabButton, {}) })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-1 pl-1", children: [
-      isOverflow && /* @__PURE__ */ jsx58(AddTabButton, {}),
-      tabs.length > 1 && /* @__PURE__ */ jsx58(TabsListButton, { tabs, onSelectTab: selectTab }),
-      onFullScreenClick && /* @__PURE__ */ jsx58(
-        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__ */ jsx58(IconWindowMaximize, { size: 16 })
-        }
-      )
+  return /* @__PURE__ */ jsxs36("div", { className: "relative mb-2 shrink-0", children: [
+    /* @__PURE__ */ jsx53("div", { className: "absolute bottom-0 left-0 right-0 -z-10 h-[1px] w-full bg-zinc-200" }),
+    /* @__PURE__ */ jsxs36("div", { className: "flex translate-y-[1px] items-center gap-1", children: [
+      /* @__PURE__ */ jsxs36("div", { className: "relative min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx53(
+          "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__ */ jsx53(
+          "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__ */ jsxs36(
+          "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__ */ jsx53(
+                DndContext,
+                {
+                  sensors,
+                  collisionDetection: closestCenter,
+                  onDragEnd: handleDragEnd,
+                  modifiers: [restrictToHorizontalAxis],
+                  measuring: {
+                    droppable: {
+                      strategy: MeasuringStrategy.Always
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx53(
+                    SortableContext,
+                    {
+                      items: sortedTabs.map(([id]) => id),
+                      strategy: horizontalListSortingStrategy,
+                      children: selectedTab && sortedTabs.map(([id]) => /* @__PURE__ */ jsx53(SortableTab, { id }, id))
+                    }
+                  )
+                }
+              ),
+              !isOverflow && /* @__PURE__ */ jsx53("div", { className: "flex items-center gap-1 pl-1 pr-1", children: /* @__PURE__ */ jsx53(AddTabButton, {}) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-1 pl-1", children: [
+        isOverflow && /* @__PURE__ */ jsx53(AddTabButton, {}),
+        tabs.length > 1 && /* @__PURE__ */ jsx53(TabsListButton, { tabs, onSelectTab: selectTab }),
+        onFullScreenClick && /* @__PURE__ */ jsx53(
+          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__ */ jsx53(IconMaximize, { size: 16 })
+          }
+        )
+      ] })
     ] })
-  ] }) });
+  ] });
 };
 function AddTabButton() {
   const { addTab, selectTab } = useDatabrowserStore();
@@ -7522,15 +6733,15 @@ function AddTabButton() {
       tab.scrollIntoView({ behavior: "smooth" });
     }, 20);
   };
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx53(
     Button,
     {
       "aria-label": "Add new tab",
       variant: "secondary",
       size: "icon-sm",
       onClick: handleAddTab,
-      className: "flex-shrink-0 bg-zinc-200 ",
-      children: /* @__PURE__ */ jsx58(IconPlus3, { className: "text-zinc-600", size: 16 })
+      className: "flex-shrink-0 dark:bg-zinc-200",
+      children: /* @__PURE__ */ jsx53(IconPlus3, { className: "text-zinc-500 dark:text-zinc-600", size: 16 })
     }
   );
 }
@@ -7538,8 +6749,8 @@ function TabsListButton({
   tabs,
   onSelectTab
 }) {
-  const [open, setOpen] = useState15(false);
-  const sorted = useMemo9(() => {
+  const [open, setOpen] = useState14(false);
+  const sorted = useMemo8(() => {
     return [...tabs].sort(([, a], [, b]) => {
       if (a.pinned && !b.pinned) return -1;
       if (!a.pinned && b.pinned) return 1;
@@ -7556,23 +6767,23 @@ function TabsListButton({
       tab.scrollIntoView({ behavior: "smooth" });
     }, 20);
   };
-  return /* @__PURE__ */ jsxs35(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx58(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx53(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs36(
       Button,
       {
         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__ */ jsx58("span", { className: "text-xs text-zinc-600", children: tabs.length }),
-          /* @__PURE__ */ jsx58(IconChevronDown2, { className: "text-zinc-500", size: 16 })
+          /* @__PURE__ */ jsx53("span", { className: "text-xs text-zinc-600", children: tabs.length }),
+          /* @__PURE__ */ jsx53(IconChevronDown2, { className: "text-zinc-500", size: 16 })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx58(PopoverContent, { className: "w-96 p-0", align: "end", children: /* @__PURE__ */ jsx58(Command, { children: /* @__PURE__ */ jsxs35(CommandList, { children: [
-      /* @__PURE__ */ jsx58(CommandEmpty, { children: "No tabs" }),
-      /* @__PURE__ */ jsx58(CommandGroup, { children: sorted.map(([_id, item]) => /* @__PURE__ */ jsx58(
+    /* @__PURE__ */ jsx53(PopoverContent, { className: "w-96 p-0", align: "end", children: /* @__PURE__ */ jsx53(Command, { children: /* @__PURE__ */ jsxs36(CommandList, { children: [
+      /* @__PURE__ */ jsx53(CommandEmpty, { children: "No tabs" }),
+      /* @__PURE__ */ jsx53(CommandGroup, { children: sorted.map(([_id, item]) => /* @__PURE__ */ jsx53(
         CommandItem,
         {
           style: {
@@ -7582,7 +6793,7 @@ function TabsListButton({
           onSelect: () => {
             handleSelectTab(item.id);
           },
-          children: /* @__PURE__ */ jsx58(TabIdProvider, { value: _id, children: /* @__PURE__ */ jsx58(Tab, { id: _id, isList: true }) })
+          children: /* @__PURE__ */ jsx53(TabIdProvider, { value: _id, children: /* @__PURE__ */ jsx53(Tab, { id: _id, isList: true }) })
         },
         item.id
       )) })
@@ -7591,7 +6802,7 @@ function TabsListButton({
 }
 
 // src/components/databrowser/index.tsx
-import { jsx as jsx59, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
 var RedisBrowser = ({
   url,
   token,
@@ -7601,12 +6812,12 @@ var RedisBrowser = ({
   onFullScreenClick,
   theme = "light"
 }) => {
-  const credentials = useMemo10(() => ({ token, url }), [token, url]);
-  const rootRef = useRef8(null);
-  useEffect15(() => {
+  const credentials = useMemo9(() => ({ token, url }), [token, url]);
+  const rootRef = useRef7(null);
+  useEffect14(() => {
     queryClient.resetQueries();
   }, [credentials.url]);
-  return /* @__PURE__ */ jsx59(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx59(RedisProvider, { redisCredentials: credentials, telemetry: !disableTelemetry, children: /* @__PURE__ */ jsx59(DarkModeProvider, { theme, children: /* @__PURE__ */ jsx59(DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ jsx59(TooltipProvider, { children: /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx54(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx54(RedisProvider, { redisCredentials: credentials, telemetry: !disableTelemetry, children: /* @__PURE__ */ jsx54(DarkModeProvider, { theme, children: /* @__PURE__ */ jsx54(DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ jsx54(TooltipProvider, { children: /* @__PURE__ */ jsx54(
     RedisBrowserRoot,
     {
       hideTabs,
@@ -7621,21 +6832,21 @@ var RedisBrowserRoot = ({
   onFullScreenClick
 }) => {
   const theme = useTheme();
-  useEffect15(() => {
+  useEffect14(() => {
     portalWrapper.classList.add("text-zinc-700");
     portalWrapper.classList.toggle("dark", theme === "dark");
   }, [theme]);
   return (
     /* ups-db is the custom class used to prefix every style in the css bundle */
-    /* @__PURE__ */ jsx59(
+    /* @__PURE__ */ jsx54(
       "div",
       {
         className: `ups-db ${theme === "dark" ? "dark" : ""}`,
         style: { height: "100%" },
         ref: rootRef,
-        children: /* @__PURE__ */ jsxs36("div", { className: "flex h-full flex-col overflow-hidden rounded-[14px] border-[4px] border-zinc-300 text-zinc-700", children: [
-          !hideTabs && /* @__PURE__ */ jsx59(DatabrowserTabs, { onFullScreenClick }),
-          /* @__PURE__ */ jsx59(DatabrowserInstances, {})
+        children: /* @__PURE__ */ jsxs37("div", { className: "flex h-full flex-col text-zinc-700", children: [
+          !hideTabs && /* @__PURE__ */ jsx54(DatabrowserTabs, { onFullScreenClick }),
+          /* @__PURE__ */ jsx54(DatabrowserInstances, {})
         ] })
       }
     )
@@ -7643,12 +6854,12 @@ var RedisBrowserRoot = ({
 };
 var DatabrowserInstances = () => {
   const { tabs, selectedTab, selectTab, addTab } = useDatabrowserStore();
-  useEffect15(() => {
+  useEffect14(() => {
     if (tabs.length === 0) addTab();
     else if (!selectedTab) selectTab(tabs[0][0]);
   }, [tabs, selectedTab, addTab, selectTab]);
   if (!selectedTab) return;
-  return tabs.map(([id]) => /* @__PURE__ */ jsx59(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx59(DatabrowserInstance, { hidden: id !== selectedTab }) }, id));
+  return tabs.map(([id]) => /* @__PURE__ */ jsx54(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx54(DatabrowserInstance, { hidden: id !== selectedTab }) }, id));
 };
 export {
   RedisBrowser