@upstash/react-redis-browser 0.1.11 → 0.2.0

package/dist/index.mjs

@@ -1,13 +1,12 @@
 // src/components/databrowser/index.tsx
-import { useEffect as useEffect11, useMemo as useMemo6 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo8 } from "react";
 
-// src/store.tsx
-import { createContext, useContext, useMemo, useState as useState2 } from "react";
-import { create, useStore } from "zustand";
+// src/redis-context.tsx
+import { createContext, useContext, useMemo } from "react";
 
 // src/lib/clients.ts
 import { MutationCache, QueryCache, QueryClient } from "@tanstack/react-query";
-import { Redis } from "@upstash/redis";
+import { Redis } from "@upstash/redis/cloudflare";
 
 // src/components/ui/use-toast.ts
 import * as React from "react";
@@ -136,8 +135,9 @@ var redisClient = ({
   credentials,
   pipelining
 }) => {
-  const token = credentials?.token || process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN;
-  const url = credentials?.url || process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_URL;
+  const safeProcess = typeof process === "undefined" ? { env: {} } : process;
+  const token = credentials?.token || safeProcess.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN;
+  const url = credentials?.url || safeProcess.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_URL;
   if (!url) {
     throw new Error("Redis URL is missing!");
   }
@@ -180,22 +180,82 @@ var queryClient = new QueryClient({
   })
 });
 
-// src/store.tsx
+// src/redis-context.tsx
 import { jsx } from "react/jsx-runtime";
-var DatabrowserContext = createContext(void 0);
-var DatabrowserProvider = ({
+var RedisContext = createContext(void 0);
+var RedisProvider = ({
   children,
   redisCredentials
 }) => {
-  const redisInstance = useMemo(() => redisClient({ credentials: redisCredentials, pipelining: true }), [redisCredentials]);
-  const redisInstanceNoPipeline = useMemo(() => redisClient({ credentials: redisCredentials, pipelining: false }), [redisCredentials]);
-  const [store] = useState2(() => {
-    return createDatabrowserStore();
-  });
-  return /* @__PURE__ */ jsx(DatabrowserContext.Provider, { value: { redis: redisInstance, redisNoPipeline: redisInstanceNoPipeline, store }, children });
+  const redisInstance = useMemo(
+    () => redisClient({ credentials: redisCredentials, pipelining: true }),
+    [redisCredentials]
+  );
+  const redisInstanceNoPipeline = useMemo(
+    () => redisClient({ credentials: redisCredentials, pipelining: false }),
+    [redisCredentials]
+  );
+  return /* @__PURE__ */ jsx(
+    RedisContext.Provider,
+    {
+      value: { redis: redisInstance, redisNoPipeline: redisInstanceNoPipeline },
+      children
+    }
+  );
+};
+var useRedis = () => {
+  const context = useContext(RedisContext);
+  if (!context) {
+    throw new Error("useRedis must be used within a RedisProvider");
+  }
+  return context;
+};
+
+// src/store.tsx
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo2 } from "react";
+import { create, useStore } from "zustand";
+import { persist } from "zustand/middleware";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DatabrowserContext = createContext2(void 0);
+var DatabrowserProvider = ({
+  children,
+  storage
+}) => {
+  const store = useMemo2(() => {
+    if (!storage) return create(storeCreator);
+    return create()(
+      persist(storeCreator, {
+        name: "redis-browser-data",
+        storage: {
+          getItem: () => {
+            const data = storage.get();
+            if (!data) return null;
+            try {
+              return JSON.parse(data);
+            } catch {
+              console.error("Error while parsing stored data.");
+              return null;
+            }
+          },
+          setItem: (_name, value) => storage.set(JSON.stringify(value)),
+          removeItem: () => {
+          }
+        },
+        version: 1,
+        // @ts-expect-error Reset the store for < v1
+        migrate: (state, version) => {
+          if (version === 0) {
+            return;
+          }
+          return state;
+        }
+      })
+    );
+  }, []);
+  return /* @__PURE__ */ jsx2(DatabrowserContext.Provider, { value: { store }, children });
 };
 var useDatabrowser = () => {
-  const context = useContext(DatabrowserContext);
+  const context = useContext2(DatabrowserContext);
   if (!context) {
     throw new Error("useDatabrowser must be used within a DatabrowserProvider");
   }
@@ -205,115 +265,170 @@ var useDatabrowserStore = () => {
   const { store } = useDatabrowser();
   return useStore(store);
 };
-var createDatabrowserStore = () => create((set) => ({
-  selectedKey: void 0,
-  setSelectedKey: (key) => {
-    set((old) => ({ ...old, selectedKey: key, selectedListItem: void 0 }));
+var storeCreator = (set, get) => ({
+  selectedTab: void 0,
+  tabs: [],
+  addTab: () => {
+    const id = crypto.randomUUID();
+    const newTabData = {
+      selectedKey: void 0,
+      search: { key: "", type: void 0 }
+    };
+    set((old) => ({
+      tabs: [...old.tabs, [id, newTabData]],
+      selectedTab: id
+    }));
+  },
+  removeTab: (id) => {
+    set((old) => {
+      const tabIndex = old.tabs.findIndex(([tabId]) => tabId === id);
+      if (tabIndex === -1) return old;
+      const newTabs = [...old.tabs];
+      newTabs.splice(tabIndex, 1);
+      let selectedTab = old.selectedTab;
+      if (selectedTab === id) {
+        const [newId] = newTabs[tabIndex - 1] ?? newTabs[tabIndex];
+        selectedTab = newTabs.length > 0 ? newId : void 0;
+      }
+      return { tabs: newTabs, selectedTab };
+    });
+  },
+  selectTab: (id) => {
+    set({ selectedTab: id });
+  },
+  getSelectedKey: (tabId) => {
+    return get().tabs.find(([id]) => id === tabId)?.[1]?.selectedKey;
+  },
+  setSelectedKey: (tabId, key) => {
+    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, selectedKey: key, selectedListItem: void 0 }];
+      return { ...old, tabs: newTabs };
+    });
+  },
+  setSelectedListItem: (tabId, item) => {
+    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, selectedListItem: item }];
+      return { ...old, tabs: newTabs };
+    });
+  },
+  setSearch: (tabId, search) => {
+    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, search }];
+      return { ...old, tabs: newTabs };
+    });
+  },
+  setSearchKey: (tabId, key) => {
+    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,
+          search: { ...tabData.search, key }
+        }
+      ];
+      return { ...old, tabs: newTabs };
+    });
   },
-  selectedListItem: void 0,
-  setSelectedListItem: (item) => {
-    set((old) => ({ ...old, selectedListItem: item }));
+  setSearchType: (tabId, type) => {
+    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,
+          search: { ...tabData.search, type }
+        }
+      ];
+      return { ...old, tabs: newTabs };
+    });
   },
-  search: { key: "", type: void 0 },
-  setSearch: (search) => set({ search }),
-  setSearchKey: (key) => set((state) => ({ search: { ...state.search, key } })),
-  setSearchType: (type) => set((state) => ({ search: { ...state.search, type } }))
-}));
+  searchHistory: [],
+  addSearchHistory: (key) => {
+    set((old) => ({ ...old, searchHistory: [key, ...old.searchHistory] }));
+  }
+});
+
+// src/tab-provider.tsx
+import { createContext as createContext3, useContext as useContext3, useMemo as useMemo3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var TabIdContext = createContext3(void 0);
+var TabIdProvider = ({ children, value }) => {
+  return /* @__PURE__ */ jsx3(TabIdContext.Provider, { value, children });
+};
+var useTabId = () => {
+  const tabId = useContext3(TabIdContext);
+  if (!tabId) {
+    throw new Error("useTabId must be used within a TabProvider");
+  }
+  return tabId;
+};
+var useTab = () => {
+  const {
+    selectedTab,
+    tabs,
+    setSelectedKey,
+    setSelectedListItem,
+    setSearch,
+    setSearchKey,
+    setSearchType
+  } = useDatabrowserStore();
+  const tabId = useTabId();
+  const tabData = useMemo3(() => tabs.find(([id]) => id === tabId)?.[1], [tabs, tabId]);
+  if (!selectedTab || !tabData) throw new Error("selectedTab is undefined when using useTab()");
+  return useMemo3(
+    () => ({
+      active: selectedTab === tabId,
+      selectedKey: tabData.selectedKey,
+      selectedListItem: tabData.selectedListItem,
+      search: tabData.search,
+      setSelectedKey: (key) => setSelectedKey(tabId, key),
+      setSelectedListItem: (item) => setSelectedListItem(tabId, item),
+      setSearch: (search) => setSearch(tabId, search),
+      setSearchKey: (key) => setSearchKey(tabId, key),
+      setSearchType: (type) => setSearchType(tabId, type)
+    }),
+    [selectedTab, tabs, tabId]
+  );
+};
 
 // src/components/databrowser/index.tsx
 import { TooltipProvider } from "@radix-ui/react-tooltip";
-import { IconDotsVertical as IconDotsVertical2 } from "@tabler/icons-react";
 import { QueryClientProvider } from "@tanstack/react-query";
-import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-
-// src/components/ui/toaster.tsx
-import { Portal } from "@radix-ui/react-portal";
 
-// src/lib/portal-root.ts
-var root;
-if (typeof document !== "undefined") {
-  const id = "react-redis-browser-portal-root";
-  root = document.querySelector(`#${id}`) ?? document.createElement("div");
-  root.classList.add("ups-db");
-  root.id = "react-redis-browser-portal-root";
-  document.body.append(root);
-}
-var portalRoot = root;
-
-// src/components/ui/toast.tsx
-import * as React2 from "react";
-import { Cross2Icon } from "@radix-ui/react-icons";
-import * as ToastPrimitives from "@radix-ui/react-toast";
-
-// node_modules/class-variance-authority/node_modules/clsx/dist/clsx.mjs
-function r(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 = r(e[t])) && (n && (n += " "), n += f);
-  else for (t in e) e[t] && (n && (n += " "), n += t);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = ""; f < arguments.length; ) (e = arguments[f++]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-
-// node_modules/class-variance-authority/dist/index.mjs
-var falsyToString = (value) => typeof value === "boolean" ? "".concat(value) : value === 0 ? "0" : value;
-var cx = clsx;
-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;
-      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);
-  };
-};
+// src/components/databrowser/components/databrowser-instance.tsx
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
 // node_modules/clsx/dist/clsx.mjs
-function r2(e) {
+function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
   else if ("object" == typeof e) if (Array.isArray(e)) {
     var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r2(e[t])) && (n && (n += " "), n += f);
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
   } else for (f in e) e[f] && (n && (n += " "), n += f);
   return n;
 }
-function clsx2() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r2(e)) && (n && (n += " "), n += t);
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
   return n;
 }
 
@@ -2779,7 +2894,7 @@ var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // src/lib/utils.ts
 function cn(...inputs) {
-  return twMerge(clsx2(inputs));
+  return twMerge(clsx(inputs));
 }
 function formatNumber(value) {
   const intl = new Intl.NumberFormat("en-US");
@@ -2810,11 +2925,88 @@ function formatTime(seconds) {
   }
   return parts.slice(0, 1).join(" ");
 }
+var isTest = typeof window !== "undefined" && window.__PLAYWRIGHT__ === true;
+
+// src/components/ui/toaster.tsx
+import { Portal } from "@radix-ui/react-portal";
+
+// src/lib/portal-root.ts
+var root;
+if (typeof document !== "undefined") {
+  const id = "react-redis-browser-portal-root";
+  root = document.querySelector(`#${id}`) ?? document.createElement("div");
+  root.classList.add("ups-db");
+  root.id = "react-redis-browser-portal-root";
+  document.body.append(root);
+}
+var portalRoot = root;
 
 // src/components/ui/toast.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import * as React2 from "react";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+
+// 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;
+}
+
+// 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;
+      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);
+  };
+};
+
+// src/components/ui/toast.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
 var ToastProvider = ToastPrimitives.Provider;
-var ToastViewport = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+var ToastViewport = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
   ToastPrimitives.Viewport,
   {
     ref,
@@ -2841,7 +3033,7 @@ var toastVariants = cva(
   }
 );
 var Toast = React2.forwardRef(({ className, variant, ...props }, ref) => {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4(
     ToastPrimitives.Root,
     {
       ref,
@@ -2851,7 +3043,7 @@ var Toast = React2.forwardRef(({ className, variant, ...props }, ref) => {
   );
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
-var ToastAction = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+var ToastAction = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
   ToastPrimitives.Action,
   {
     ref,
@@ -2863,7 +3055,7 @@ var ToastAction = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 ToastAction.displayName = ToastPrimitives.Action.displayName;
-var ToastClose = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+var ToastClose = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
   ToastPrimitives.Close,
   {
     ref,
@@ -2873,11 +3065,11 @@ var ToastClose = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE_
     ),
     "toast-close": "",
     ...props,
-    children: /* @__PURE__ */ jsx2(Cross2Icon, { className: "size-4" })
+    children: /* @__PURE__ */ jsx4(Cross2Icon, { className: "size-4" })
   }
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
-var ToastTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+var ToastTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
   ToastPrimitives.Title,
   {
     ref,
@@ -2886,7 +3078,7 @@ var ToastTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
-var ToastDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+var ToastDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
   ToastPrimitives.Description,
   {
     ref,
@@ -2897,46 +3089,78 @@ var ToastDescription = React2.forwardRef(({ className, ...props }, ref) => /* @_
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 // src/components/ui/toaster.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
 function Toaster() {
   const { toasts } = useToast();
-  return /* @__PURE__ */ jsx3(Portal, { container: portalRoot, children: /* @__PURE__ */ jsxs(ToastProvider, { children: [
+  return /* @__PURE__ */ jsx5(Portal, { container: portalRoot, children: /* @__PURE__ */ jsxs(ToastProvider, { children: [
     toasts.map(({ id, title, description, action, ...props }) => /* @__PURE__ */ jsxs(Toast, { ...props, children: [
       /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
-        title && /* @__PURE__ */ jsx3(ToastTitle, { children: title }),
-        description && /* @__PURE__ */ jsx3(ToastDescription, { children: description })
+        title && /* @__PURE__ */ jsx5(ToastTitle, { children: title }),
+        description && /* @__PURE__ */ jsx5(ToastDescription, { children: description })
       ] }),
       action,
-      /* @__PURE__ */ jsx3(ToastClose, {})
+      /* @__PURE__ */ jsx5(ToastClose, {})
     ] }, id)),
-    /* @__PURE__ */ jsx3(ToastViewport, {})
+    /* @__PURE__ */ jsx5(ToastViewport, {})
   ] }) });
 }
 
 // src/components/databrowser/hooks/use-keys.tsx
-import { createContext as createContext2, useContext as useContext2, useMemo as useMemo2 } from "react";
+import { createContext as createContext4, useContext as useContext4, useMemo as useMemo4 } from "react";
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var KeysContext = createContext2(void 0);
+
+// src/components/databrowser/hooks/use-fetch-key-type.ts
+import { useQuery } from "@tanstack/react-query";
+var FETCH_KEY_TYPE_QUERY_KEY = "fetch-key-type";
+var useFetchKeyType = (key) => {
+  const { redis } = useRedis();
+  return useQuery({
+    queryKey: [FETCH_KEY_TYPE_QUERY_KEY, key],
+    queryFn: async () => {
+      if (!key) return "none";
+      return await redis.type(key);
+    }
+  });
+};
+
+// src/components/databrowser/hooks/use-keys.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var KeysContext = createContext4(void 0);
 var FETCH_KEYS_QUERY_KEY = "use-fetch-keys";
-var SCAN_COUNT = 100;
+var SCAN_COUNTS = [100, 300, 500];
 var KeysProvider = ({ children }) => {
-  const { search } = useDatabrowserStore();
-  const { redisNoPipeline: redis } = useDatabrowser();
+  const { active, search } = useTab();
+  const { redisNoPipeline: redis } = useRedis();
+  const performScan = async (count2, cursor) => {
+    const args = [cursor];
+    if (search.key) {
+      args.push("MATCH", search.key);
+    }
+    if (search.type) {
+      args.push("TYPE", search.type);
+    }
+    args.push("COUNT", count2.toString());
+    if (!search.type) args.push("WITHTYPE");
+    return await redis.exec(["SCAN", ...args]);
+  };
+  const scanUntilAvailable = async (cursor) => {
+    let i = 0;
+    while (true) {
+      const [newCursor, values] = await performScan(SCAN_COUNTS[i] ?? SCAN_COUNTS.at(-1), cursor);
+      cursor = newCursor;
+      i++;
+      if (values.length > 0 || cursor === "0") {
+        return [cursor, values];
+      }
+    }
+  };
   const query = useInfiniteQuery({
     queryKey: [FETCH_KEYS_QUERY_KEY, search],
+    // Only fetch when tab is active
+    enabled: active,
     initialPageParam: "0",
     queryFn: async ({ pageParam: lastCursor }) => {
-      const args = [lastCursor];
-      if (search.key) {
-        args.push("MATCH", search.key);
-      }
-      if (search.type) {
-        args.push("TYPE", search.type);
-      }
-      args.push("COUNT", SCAN_COUNT.toString());
-      if (!search.type) args.push("WITHTYPE");
-      const [cursor, values] = await redis.exec(["SCAN", ...args]);
+      const [cursor, values] = await scanUntilAvailable(lastCursor);
       const keys2 = [];
       let index = 0;
       while (true) {
@@ -2950,6 +3174,9 @@ var KeysProvider = ({ children }) => {
           index += 2;
         }
       }
+      for (const [key, type] of keys2) {
+        queryClient.setQueryData([FETCH_KEY_TYPE_QUERY_KEY, key], type);
+      }
       return {
         cursor: cursor === "0" ? void 0 : cursor,
         keys: keys2,
@@ -2960,7 +3187,7 @@ var KeysProvider = ({ children }) => {
     getNextPageParam: ({ cursor }) => cursor,
     refetchOnMount: false
   });
-  const keys = useMemo2(() => {
+  const keys = useMemo4(() => {
     const keys2 = query.data?.pages.flatMap((page) => page.keys) ?? [];
     const keysSet = /* @__PURE__ */ new Set();
     const dedupedKeys = [];
@@ -2971,7 +3198,7 @@ var KeysProvider = ({ children }) => {
     }
     return dedupedKeys;
   }, [query.data]);
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     KeysContext.Provider,
     {
       value: {
@@ -2983,7 +3210,7 @@ var KeysProvider = ({ children }) => {
   );
 };
 var useKeys = () => {
-  const context = useContext2(KeysContext);
+  const context = useContext4(KeysContext);
   if (!context) {
     throw new Error("useKeys must be used within a KeysProvider");
   }
@@ -2991,20 +3218,20 @@ var useKeys = () => {
 };
 var useKeyType = (key) => {
   const { keys } = useKeys();
-  const keyTuple = useMemo2(() => keys.find(([k, _]) => k === key), [keys, key]);
+  const keyTuple = useMemo4(() => keys.find(([k, _]) => k === key), [keys, key]);
   return keyTuple?.[1];
 };
 
 // src/components/databrowser/components/display/display-list.tsx
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo7 } from "react";
 import { IconTrash } from "@tabler/icons-react";
 
 // src/components/ui/button.tsx
 import * as React3 from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300",
+  "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 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300",
   {
     variants: {
       variant: {
@@ -3034,7 +3261,7 @@ var buttonVariants = cva(
 var Button = React3.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx5(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
+    return /* @__PURE__ */ jsx7(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
   }
 );
 Button.displayName = "Button";
@@ -3043,12 +3270,12 @@ Button.displayName = "Button";
 import { useMutation } from "@tanstack/react-query";
 
 // src/components/databrowser/components/sidebar/db-size.tsx
-import { useQuery } from "@tanstack/react-query";
+import { useQuery as useQuery2 } from "@tanstack/react-query";
 
 // src/components/ui/skeleton.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       className: cn("animate-pulse rounded-md bg-zinc-900/10 dark:bg-zinc-50/10", className),
@@ -3058,18 +3285,18 @@ function Skeleton({ className, ...props }) {
 }
 
 // src/components/databrowser/components/sidebar/db-size.tsx
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
 var FETCH_DB_SIZE_QUERY_KEY = "fetch-db-size";
 var DisplayDbSize = () => {
-  const { redis } = useDatabrowser();
-  const { data: keyCount } = useQuery({
+  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__ */ jsx7("div", { className: "flex items-center justify-center gap-1", children: /* @__PURE__ */ jsx7(Skeleton, { className: "h-5 w-10 rounded" }) });
+    return /* @__PURE__ */ jsx9("div", { className: "flex items-center justify-center gap-1", children: /* @__PURE__ */ jsx9(Skeleton, { className: "h-5 w-10 rounded" }) });
   }
   return /* @__PURE__ */ jsxs2("div", { className: "", children: [
     formatNumber(keyCount),
@@ -3079,7 +3306,7 @@ var DisplayDbSize = () => {
 
 // src/components/databrowser/hooks/use-add-key.ts
 var useAddKey = () => {
-  const { redis } = useDatabrowser();
+  const { redis } = useRedis();
   const mutation = useMutation({
     mutationFn: async ({ key, type }) => {
       if (await redis.exists(key)) throw new Error(`Key "${key}" already exists`);
@@ -3136,7 +3363,7 @@ var useAddKey = () => {
           queryKey: [FETCH_KEYS_QUERY_KEY]
         },
         (data) => {
-          if (!data) throw new Error("Data is undefined");
+          if (!data) return;
           return {
             ...data,
             pages: data.pages.map(
@@ -3151,7 +3378,7 @@ var useAddKey = () => {
 };
 
 // src/components/databrowser/hooks/use-debounce.ts
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 
 // src/components/databrowser/hooks/use-delete-key.ts
 import { useMutation as useMutation2 } from "@tanstack/react-query";
@@ -3159,16 +3386,12 @@ import { useMutation as useMutation2 } from "@tanstack/react-query";
 // src/components/databrowser/hooks/use-delete-key-cache.ts
 import { useCallback } from "react";
 
-// src/components/databrowser/hooks/use-fetch-key-type.tsx
-import { useQuery as useQuery2 } from "@tanstack/react-query";
-var FETCH_KEY_TYPE_QUERY_KEY = "fetch-key-type";
-
 // src/components/databrowser/hooks/use-fetch-list-items.tsx
 import { useInfiniteQuery as useInfiniteQuery2 } from "@tanstack/react-query";
 var LIST_DISPLAY_PAGE_SIZE = 50;
 var FETCH_LIST_ITEMS_QUERY_KEY = "use-fetch-list-items";
 var useFetchListItems = ({ dataKey, type }) => {
-  const { redisNoPipeline: redis } = useDatabrowser();
+  const { redisNoPipeline: redis } = useRedis();
   const setQuery = useInfiniteQuery2({
     enabled: type === "set",
     queryKey: [FETCH_LIST_ITEMS_QUERY_KEY, dataKey, "set"],
@@ -3283,7 +3506,7 @@ function transformArray(inputArray) {
 import { useQuery as useQuery3 } from "@tanstack/react-query";
 var FETCH_SIMPLE_KEY_QUERY_KEY = "fetch-simple-key";
 var useFetchSimpleKey = (dataKey, type) => {
-  const { redisNoPipeline: redis } = useDatabrowser();
+  const { redisNoPipeline: redis } = useRedis();
   const { deleteKeyCache } = useDeleteKeyCache();
   return useQuery3({
     queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY, dataKey],
@@ -3310,7 +3533,7 @@ var sortObject = (obj) => {
 
 // src/components/databrowser/hooks/use-delete-key-cache.ts
 var useDeleteKeyCache = () => {
-  const { setSelectedKey } = useDatabrowserStore();
+  const { setSelectedKey } = useTab();
   const deleteKeyCache = useCallback(
     (key) => {
       setSelectedKey(void 0);
@@ -3334,7 +3557,7 @@ var useDeleteKeyCache = () => {
 
 // src/components/databrowser/hooks/use-delete-key.ts
 var useDeleteKey = () => {
-  const { redis } = useDatabrowser();
+  const { redis } = useRedis();
   const { deleteKeyCache } = useDeleteKeyCache();
   const deleteKey = useMutation2({
     mutationFn: async (key) => {
@@ -3353,7 +3576,7 @@ var useDeleteKey = () => {
 // src/components/databrowser/hooks/use-edit-list-item.tsx
 import { useMutation as useMutation3 } from "@tanstack/react-query";
 var useEditListItem = () => {
-  const { redis } = useDatabrowser();
+  const { redis } = useRedis();
   return useMutation3({
     mutationFn: async ({
       type,
@@ -3436,7 +3659,7 @@ import { useEffect as useEffect5 } from "react";
 import { useQuery as useQuery6 } from "@tanstack/react-query";
 
 // src/components/databrowser/components/display/ttl-badge.tsx
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 import { IconChevronDown } from "@tabler/icons-react";
 
 // src/components/databrowser/components/display/header-badges.tsx
@@ -3446,7 +3669,7 @@ import bytes from "bytes";
 import { useQuery as useQuery4 } from "@tanstack/react-query";
 var FETCH_KEY_LENGTH_QUERY_KEY = "fetch-key-length";
 var useFetchKeyLength = ({ dataKey, type }) => {
-  const { redis } = useDatabrowser();
+  const { redis } = useRedis();
   return useQuery4({
     queryKey: [FETCH_KEY_LENGTH_QUERY_KEY, dataKey],
     queryFn: async () => {
@@ -3476,7 +3699,7 @@ var useFetchKeyLength = ({ dataKey, type }) => {
 import { useQuery as useQuery5 } from "@tanstack/react-query";
 var FETCH_KEY_SIZE_QUERY_KEY = "fetch-key-size";
 var useFetchKeySize = (dataKey) => {
-  const { redis } = useDatabrowser();
+  const { redis } = useRedis();
   return useQuery5({
     queryKey: [FETCH_KEY_SIZE_QUERY_KEY, dataKey],
     queryFn: async () => {
@@ -3486,7 +3709,7 @@ var useFetchKeySize = (dataKey) => {
 };
 
 // src/components/databrowser/components/display/header-badges.tsx
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var LengthBadge = ({
   dataKey,
   type,
@@ -3494,18 +3717,18 @@ var LengthBadge = ({
 }) => {
   const { data, isLoading } = useFetchKeyLength({ dataKey, type });
   const length = content?.length ?? data;
-  return /* @__PURE__ */ jsx8(Badge, { label: "Length:", children: isLoading ? /* @__PURE__ */ jsx8(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : length });
+  return /* @__PURE__ */ jsx10(Badge, { label: "Length:", children: isLoading ? /* @__PURE__ */ jsx10(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : length });
 };
 var SizeBadge = ({ dataKey }) => {
   const { data: size } = useFetchKeySize(dataKey);
-  return /* @__PURE__ */ jsx8(Badge, { label: "Size:", children: size === void 0 || size === null ? /* @__PURE__ */ jsx8(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : bytes(size, {
+  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, {
     unitSeparator: " "
   }) });
 };
 var HeaderTTLBadge = ({ dataKey }) => {
-  const { data: expireAt } = useFetchKeyExpire(dataKey);
+  const { data: expireAt } = useFetchTTL(dataKey);
   const { mutate: setTTL, isPending } = useSetTTL();
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx10(
     TTLBadge,
     {
       expireAt,
@@ -3515,20 +3738,20 @@ var HeaderTTLBadge = ({ dataKey }) => {
   );
 };
 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", children: [
-  /* @__PURE__ */ jsx8("span", { className: "text-zinc-500", children: label }),
-  /* @__PURE__ */ jsx8("span", { className: "font-medium", children })
+  /* @__PURE__ */ jsx10("span", { className: "text-zinc-500", children: label }),
+  /* @__PURE__ */ jsx10("span", { className: "font-medium", children })
 ] });
 
 // src/components/databrowser/components/display/ttl-popover.tsx
-import { useEffect as useEffect3, useMemo as useMemo3, useState as useState4 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo5, useState as useState3 } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 // src/components/ui/input.tsx
 import * as React4 from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var Input = React4.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx11(
       "input",
       {
         type,
@@ -3547,10 +3770,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 jsx10 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx10(PopoverPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx10(
+var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx12(PopoverPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx12(
   PopoverPrimitive.Content,
   {
     ref,
@@ -3568,7 +3791,7 @@ 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 jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
@@ -3583,7 +3806,7 @@ var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) =
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx11(SelectPrimitive.Icon, { asChild: true, className: "absolute right-2", children: /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx13(SelectPrimitive.Icon, { asChild: true, className: "absolute right-2", children: /* @__PURE__ */ jsx13(
         "svg",
         {
           width: "16",
@@ -3591,7 +3814,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__ */ jsx11(
+          children: /* @__PURE__ */ jsx13(
             "path",
             {
               d: "M4 6L8 10L12 6",
@@ -3608,7 +3831,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__ */ jsx11(SelectPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx11(
+var SelectContent = React6.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx13(SelectPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx13(
   SelectPrimitive.Content,
   {
     ref,
@@ -3619,7 +3842,7 @@ var SelectContent = React6.forwardRef(({ className, children, position = "popper
     ),
     position,
     ...props,
-    children: /* @__PURE__ */ jsx11(
+    children: /* @__PURE__ */ jsx13(
       SelectPrimitive.Viewport,
       {
         className: cn(
@@ -3632,7 +3855,7 @@ var SelectContent = React6.forwardRef(({ className, children, position = "popper
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+var SelectLabel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
   SelectPrimitive.Label,
   {
     ref,
@@ -3651,7 +3874,7 @@ var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx11("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx11(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(
+      /* @__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(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx13(
         "svg",
         {
           width: "15",
@@ -3660,7 +3883,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__ */ jsx11(
+          children: /* @__PURE__ */ jsx13(
             "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",
@@ -3671,12 +3894,12 @@ var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /
           )
         }
       ) }) }) }),
-      /* @__PURE__ */ jsx11(SelectPrimitive.ItemText, { children })
+      /* @__PURE__ */ jsx13(SelectPrimitive.ItemText, { children })
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+var SelectSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
   SelectPrimitive.Separator,
   {
     ref,
@@ -3687,16 +3910,16 @@ var SelectSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/ui/spinner.tsx
-import { Fragment, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 var Spinner = ({
   isLoading,
   className,
   isLoadingText,
   children
 }) => {
-  return /* @__PURE__ */ jsx12("div", { className: className ?? "flex items-center", children: isLoading ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+  return /* @__PURE__ */ jsx14("div", { className: className ?? "flex items-center", children: isLoading ? /* @__PURE__ */ jsxs5(Fragment, { children: [
     isLoadingText,
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx14(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -3709,14 +3932,14 @@ var Spinner = ({
         strokeLinecap: "round",
         strokeLinejoin: "round",
         className: cn("h-4 w-4 animate-spin", isLoadingText ? "ml-2" : ""),
-        children: /* @__PURE__ */ jsx12("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+        children: /* @__PURE__ */ jsx14("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
       }
     )
   ] }) : children });
 };
 
 // src/components/databrowser/components/display/ttl-popover.tsx
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 var timeUnits = [
   { label: "Seconds", value: 1 },
   { label: "Minutes", value: 60 },
@@ -3729,8 +3952,8 @@ function TTLPopover({
   setTTL,
   isPending
 }) {
-  const [open, setOpen] = useState4(false);
-  const defaultValues = useMemo3(() => {
+  const [open, setOpen] = useState3(false);
+  const defaultValues = useMemo5(() => {
     return { type: "Seconds", value: ttl };
   }, [ttl]);
   const { control, handleSubmit, formState, reset } = useForm({
@@ -3758,8 +3981,8 @@ function TTLPopover({
         setOpen(isOpen);
       },
       children: [
-        /* @__PURE__ */ jsx13(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx13("button", { children }) }),
-        /* @__PURE__ */ jsx13(PopoverContent, { className: "w-[300px]", align: "end", children: /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsx15(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx15("button", { children }) }),
+        /* @__PURE__ */ jsx15(PopoverContent, { className: "w-[300px]", align: "end", children: /* @__PURE__ */ jsxs6(
           "form",
           {
             className: "space-y-4",
@@ -3768,10 +3991,10 @@ function TTLPopover({
               e.stopPropagation();
             },
             children: [
-              /* @__PURE__ */ jsx13("h4", { className: "font-medium leading-none", children: "Expiration" }),
+              /* @__PURE__ */ jsx15("h4", { className: "font-medium leading-none", children: "Expiration" }),
               /* @__PURE__ */ jsxs6("div", { children: [
                 /* @__PURE__ */ jsxs6("div", { className: "flex items-center", children: [
-                  /* @__PURE__ */ jsx13(
+                  /* @__PURE__ */ jsx15(
                     Controller,
                     {
                       rules: {
@@ -3780,26 +4003,26 @@ function TTLPopover({
                       },
                       control,
                       name: "value",
-                      render: ({ field }) => /* @__PURE__ */ jsx13(Input, { min: "-1", ...field, className: "grow rounded-r-none" })
+                      render: ({ field }) => /* @__PURE__ */ jsx15(Input, { min: "-1", ...field, className: "grow rounded-r-none" })
                     }
                   ),
-                  /* @__PURE__ */ jsx13(
+                  /* @__PURE__ */ jsx15(
                     Controller,
                     {
                       control,
                       name: "type",
                       render: ({ field }) => /* @__PURE__ */ jsxs6(Select, { value: field.value, onValueChange: field.onChange, children: [
-                        /* @__PURE__ */ jsx13(SelectTrigger, { className: "w-auto rounded-l-none border-l-0 pr-8", children: /* @__PURE__ */ jsx13(SelectValue, {}) }),
-                        /* @__PURE__ */ jsx13(SelectContent, { children: timeUnits.map((unit) => /* @__PURE__ */ jsx13(SelectItem, { value: unit.label, children: unit.label }, unit.label)) })
+                        /* @__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)) })
                       ] })
                     }
                   )
                 ] }),
-                formState.errors.value && /* @__PURE__ */ jsx13("p", { className: "mt-2 text-xs text-red-500", children: formState.errors.value.message }),
-                /* @__PURE__ */ jsx13("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__ */ 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." })
               ] }),
               /* @__PURE__ */ jsxs6("div", { className: "flex justify-between", children: [
-                /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx15(
                   Button,
                   {
                     type: "button",
@@ -3810,8 +4033,8 @@ function TTLPopover({
                   }
                 ),
                 /* @__PURE__ */ jsxs6("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ jsx13(Button, { variant: "outline", onClick: () => setOpen(false), type: "button", children: "Cancel" }),
-                  /* @__PURE__ */ jsx13(Button, { variant: "primary", type: "submit", children: /* @__PURE__ */ jsx13(Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" }) })
+                  /* @__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" }) })
                 ] })
               ] })
             ]
@@ -3823,7 +4046,7 @@ function TTLPopover({
 }
 
 // src/components/databrowser/components/display/ttl-badge.tsx
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var TTL_INFINITE = -1;
 var TTL_NOT_FOUND = -2;
 var calculateTTL = (expireAt) => {
@@ -3837,7 +4060,7 @@ var TTLBadge = ({
   setTTL,
   isPending
 }) => {
-  const [ttl, setTTLLabel] = useState5(() => calculateTTL(expireAt));
+  const [ttl, setTTLLabel] = useState4(() => calculateTTL(expireAt));
   useEffect4(() => {
     setTTLLabel(calculateTTL(expireAt));
     const interval = setInterval(() => {
@@ -3845,16 +4068,16 @@ var TTLBadge = ({
     }, 1e3);
     return () => clearInterval(interval);
   }, [expireAt]);
-  return /* @__PURE__ */ jsx14(Badge, { label, children: ttl === void 0 ? /* @__PURE__ */ jsx14(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : /* @__PURE__ */ jsx14(TTLPopover, { ttl, setTTL, isPending, children: /* @__PURE__ */ jsxs7("div", { className: "flex gap-[2px]", children: [
+  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__ */ jsxs7("div", { className: "flex gap-[2px]", children: [
     ttl === TTL_INFINITE ? "Forever" : formatTime(ttl),
-    /* @__PURE__ */ jsx14(IconChevronDown, { className: "mt-[1px] text-zinc-400", size: 12 })
+    /* @__PURE__ */ jsx16(IconChevronDown, { className: "mt-[1px] text-zinc-400", size: 12 })
   ] }) }) });
 };
 
 // src/components/databrowser/hooks/use-fetch-ttl.ts
 var FETCH_TTL_QUERY_KEY = "fetch-ttl";
-var useFetchKeyExpire = (dataKey) => {
-  const { redis } = useDatabrowser();
+var useFetchTTL = (dataKey) => {
+  const { redis } = useRedis();
   const { isLoading, error, data } = useQuery6({
     queryKey: [FETCH_TTL_QUERY_KEY, dataKey],
     queryFn: async () => {
@@ -3875,7 +4098,7 @@ var useFetchKeyExpire = (dataKey) => {
 // src/components/databrowser/hooks/use-set-simple-key.tsx
 import { useMutation as useMutation4 } from "@tanstack/react-query";
 var useSetSimpleKey = (dataKey, type) => {
-  const { redis } = useDatabrowser();
+  const { redis } = useRedis();
   return useMutation4({
     mutationFn: async (value) => {
       if (type === "string") {
@@ -3898,7 +4121,7 @@ var useSetSimpleKey = (dataKey, type) => {
 // src/components/databrowser/hooks/use-set-ttl.ts
 import { useMutation as useMutation5 } from "@tanstack/react-query";
 var useSetTTL = () => {
-  const { redis } = useDatabrowser();
+  const { redis } = useRedis();
   const updateTTL = useMutation5({
     mutationFn: async ({ dataKey, ttl }) => {
       await (ttl === void 0 || ttl === TTL_INFINITE ? redis.persist(dataKey) : redis.expire(dataKey, ttl));
@@ -3916,14 +4139,14 @@ var useSetTTL = () => {
 };
 
 // src/components/databrowser/components/item-context-menu.tsx
-import { useState as useState6 } from "react";
+import { useState as useState5 } from "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 { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, 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__ */ jsxs8(
@@ -3938,12 +4161,12 @@ var ContextMenuSubTrigger = React7.forwardRef(({ className, inset, children, ...
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx15(ChevronRightIcon, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx17(ChevronRightIcon, { className: "ml-auto h-4 w-4" })
     ]
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+var ContextMenuSubContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
   ContextMenuPrimitive.SubContent,
   {
     ref,
@@ -3955,7 +4178,7 @@ var ContextMenuSubContent = React7.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(ContextMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx15(
+var ContextMenuContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(ContextMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx17(
   ContextMenuPrimitive.Content,
   {
     ref,
@@ -3967,7 +4190,7 @@ var ContextMenuContent = React7.forwardRef(({ className, ...props }, ref) => /*
   }
 ) }));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx15(
+var ContextMenuItem = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx17(
   ContextMenuPrimitive.Item,
   {
     ref,
@@ -3991,7 +4214,7 @@ var ContextMenuCheckboxItem = React7.forwardRef(({ className, children, checked,
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx15("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx15(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx15(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__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(CheckIcon, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
@@ -4007,13 +4230,13 @@ var ContextMenuRadioItem = React7.forwardRef(({ className, children, ...props },
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx15("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx15(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx15(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      /* @__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(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
       children
     ]
   }
 ));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx15(
+var ContextMenuLabel = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx17(
   ContextMenuPrimitive.Label,
   {
     ref,
@@ -4026,7 +4249,7 @@ var ContextMenuLabel = React7.forwardRef(({ className, inset, ...props }, ref) =
   }
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+var ContextMenuSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
   ContextMenuPrimitive.Separator,
   {
     ref,
@@ -4036,7 +4259,7 @@ var ContextMenuSeparator = React7.forwardRef(({ className, ...props }, ref) => /
 ));
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 var ContextMenuShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     "span",
     {
       className: cn(
@@ -4052,12 +4275,12 @@ 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 jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-var AlertDialogPortal = ({ ...props }) => /* @__PURE__ */ jsx16(AlertDialogPrimitive.Portal, { container: portalRoot, ...props });
+var AlertDialogPortal = ({ ...props }) => /* @__PURE__ */ jsx18(AlertDialogPrimitive.Portal, { container: portalRoot, ...props });
 AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
-var AlertDialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+var AlertDialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
   AlertDialogPrimitive.Overlay,
   {
     className: cn(
@@ -4070,8 +4293,8 @@ var AlertDialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /*
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 var AlertDialogContent = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs9(AlertDialogPortal, { children: [
-  /* @__PURE__ */ jsx16(AlertDialogOverlay, {}),
-  /* @__PURE__ */ jsx16(
+  /* @__PURE__ */ jsx18(AlertDialogOverlay, {}),
+  /* @__PURE__ */ jsx18(
     AlertDialogPrimitive.Content,
     {
       ref,
@@ -4084,9 +4307,9 @@ var AlertDialogContent = React8.forwardRef(({ className, ...props }, ref) => /*
   )
 ] }));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-var AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx16("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+var AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx18("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
 AlertDialogHeader.displayName = "AlertDialogHeader";
-var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx16(
+var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx18(
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -4094,7 +4317,7 @@ var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx16(
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+var AlertDialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -4103,7 +4326,7 @@ var AlertDialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+var AlertDialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
   AlertDialogPrimitive.Description,
   {
     ref,
@@ -4112,9 +4335,9 @@ var AlertDialogDescription = React8.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
+var AlertDialogAction = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+var AlertDialogCancel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
   AlertDialogPrimitive.Cancel,
   {
     ref,
@@ -4125,7 +4348,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 jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function DeleteAlertDialog({
   children,
   onDeleteConfirm,
@@ -4134,21 +4357,21 @@ function DeleteAlertDialog({
   deletionType
 }) {
   return /* @__PURE__ */ jsxs10(AlertDialog, { open, onOpenChange, children: [
-    children && /* @__PURE__ */ jsx17(AlertDialogTrigger, { asChild: true, children }),
+    children && /* @__PURE__ */ jsx19(AlertDialogTrigger, { asChild: true, children }),
     /* @__PURE__ */ jsxs10(AlertDialogContent, { children: [
       /* @__PURE__ */ jsxs10(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx17(AlertDialogTitle, { children: deletionType === "item" ? "Delete Item" : "Delete Key" }),
+        /* @__PURE__ */ jsx19(AlertDialogTitle, { children: deletionType === "item" ? "Delete Item" : "Delete Key" }),
         /* @__PURE__ */ jsxs10(AlertDialogDescription, { className: "mt-5", children: [
           "Are you sure you want to delete this ",
           deletionType,
           "?",
-          /* @__PURE__ */ jsx17("br", {}),
+          /* @__PURE__ */ jsx19("br", {}),
           "This action cannot be undone."
         ] })
       ] }),
       /* @__PURE__ */ jsxs10(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx17(AlertDialogCancel, { type: "button", children: "Cancel" }),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx19(AlertDialogCancel, { type: "button", children: "Cancel" }),
+        /* @__PURE__ */ jsx19(
           AlertDialogAction,
           {
             className: "bg-red-500 text-gray-50 hover:bg-red-600",
@@ -4162,17 +4385,17 @@ function DeleteAlertDialog({
 }
 
 // src/components/databrowser/components/item-context-menu.tsx
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 var ItemContextMenu = ({
   children,
   dataKey,
   type
 }) => {
   const { mutate: editItem } = useEditListItem();
-  const [isAlertOpen, setAlertOpen] = useState6(false);
-  const [data, setData] = useState6();
+  const [isAlertOpen, setAlertOpen] = useState5(false);
+  const [data, setData] = useState5();
   return /* @__PURE__ */ jsxs11(Fragment2, { children: [
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx20(
       DeleteAlertDialog,
       {
         deletionType: "item",
@@ -4194,7 +4417,7 @@ var ItemContextMenu = ({
       }
     ),
     /* @__PURE__ */ jsxs11(ContextMenu, { children: [
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx20(
         ContextMenuTrigger,
         {
           asChild: true,
@@ -4214,7 +4437,7 @@ var ItemContextMenu = ({
         }
       ),
       /* @__PURE__ */ jsxs11(ContextMenuContent, { children: [
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx20(
           ContextMenuItem,
           {
             onClick: () => {
@@ -4227,7 +4450,7 @@ var ItemContextMenu = ({
             children: "Copy key"
           }
         ),
-        data?.value && /* @__PURE__ */ jsx18(
+        data?.value && /* @__PURE__ */ jsx20(
           ContextMenuItem,
           {
             onClick: () => {
@@ -4239,8 +4462,8 @@ var ItemContextMenu = ({
             children: "Copy value"
           }
         ),
-        /* @__PURE__ */ jsx18(ContextMenuSeparator2, {}),
-        /* @__PURE__ */ jsx18(ContextMenuItem, { disabled: type === "stream", onClick: () => setAlertOpen(true), children: "Delete item" })
+        /* @__PURE__ */ jsx20(ContextMenuSeparator2, {}),
+        /* @__PURE__ */ jsx20(ContextMenuItem, { disabled: type === "stream", onClick: () => setAlertOpen(true), children: "Delete item" })
       ] })
     ] })
   ] });
@@ -4253,36 +4476,36 @@ 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 jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
-var ScrollArea = React9.forwardRef(({ className, children, onScroll, ...props }, ref) => /* @__PURE__ */ jsxs12(
+import { jsx as jsx21, 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__ */ jsx19(
+      /* @__PURE__ */ jsx21(
         ScrollAreaPrimitive.Viewport,
         {
           onScroll,
-          className: "h-full w-full rounded-[inherit] [&>div]:!block",
+          className: cn("h-full w-full [&>div]:!block", !disableRoundedInherit && "rounded-[inherit]"),
           children
         }
       ),
-      /* @__PURE__ */ jsx19(ScrollBar, {}),
-      /* @__PURE__ */ jsx19(ScrollAreaPrimitive.Corner, {})
+      /* @__PURE__ */ jsx21(ScrollBar, {}),
+      /* @__PURE__ */ jsx21(ScrollAreaPrimitive.Corner, {})
     ]
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
+var ScrollBar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
     orientation: "vertical",
     className: cn("flex h-full w-2 touch-none select-none transition-colors", className),
     ...props,
-    children: /* @__PURE__ */ jsx19(
+    children: /* @__PURE__ */ jsx21(
       ScrollAreaPrimitive.ScrollAreaThumb,
       {
         className: cn("relative flex-1 rounded-full bg-neutral-200/70 dark:bg-neutral-800")
@@ -4293,11 +4516,13 @@ var ScrollBar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // src/components/databrowser/components/sidebar/infinite-scroll.tsx
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 var InfiniteScroll = ({
   query,
-  children
+  children,
+  ...props
 }) => {
+  const { active } = useTab();
   const scrollRef = useRef(null);
   const contentRef = useRef(null);
   const handleScroll = (e) => {
@@ -4319,19 +4544,24 @@ var InfiniteScroll = ({
     }
   };
   useEffect6(() => {
+    if (!active) return;
     const timer = setTimeout(checkAndFetchMore, 100);
     return () => clearTimeout(timer);
-  }, [query.data]);
-  return /* @__PURE__ */ jsx20(
+  }, [active, query.data]);
+  return /* @__PURE__ */ jsx22(
     ScrollArea,
     {
       type: "always",
-      className: "block h-full w-full transition-all",
       onScroll: handleScroll,
+      ...props,
+      className: cn(
+        "block h-full w-full overflow-visible rounded-lg border border-zinc-200 bg-white p-1 pr-3 transition-all",
+        props.className
+      ),
       ref: scrollRef,
       children: /* @__PURE__ */ jsxs13("div", { ref: contentRef, children: [
         children,
-        /* @__PURE__ */ jsx20("div", { className: "flex h-[100px] justify-center py-2 text-zinc-300", children: query.isFetching && /* @__PURE__ */ jsx20(IconLoader2, { className: "animate-spin", size: 16 }) })
+        /* @__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 }) })
       ] })
     }
   );
@@ -4361,15 +4591,15 @@ import {
   IconList,
   IconQuote
 } from "@tabler/icons-react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var iconsMap = {
-  string: /* @__PURE__ */ jsx21(IconQuote, { size: 15, stroke: 1.3 }),
-  set: /* @__PURE__ */ jsx21(IconLayersIntersect, { size: 15, stroke: 1.3 }),
-  hash: /* @__PURE__ */ jsx21(IconHash, { size: 15, stroke: 1.3 }),
-  json: /* @__PURE__ */ jsx21(IconCodeDots, { size: 15, stroke: 1.3 }),
-  zset: /* @__PURE__ */ jsx21(IconArrowsSort, { size: 15, stroke: 1.3 }),
-  list: /* @__PURE__ */ jsx21(IconList, { size: 15, stroke: 1.3 }),
-  stream: /* @__PURE__ */ jsx21(IconList, { size: 15, stroke: 1.3 })
+  string: /* @__PURE__ */ jsx23(IconQuote, { size: 15, stroke: 1.3 }),
+  set: /* @__PURE__ */ jsx23(IconLayersIntersect, { size: 15, stroke: 1.3 }),
+  hash: /* @__PURE__ */ jsx23(IconHash, { size: 15, stroke: 1.3 }),
+  json: /* @__PURE__ */ jsx23(IconCodeDots, { size: 15, stroke: 1.3 }),
+  zset: /* @__PURE__ */ jsx23(IconArrowsSort, { size: 15, stroke: 1.3 }),
+  list: /* @__PURE__ */ jsx23(IconList, { size: 15, stroke: 1.3 }),
+  stream: /* @__PURE__ */ jsx23(IconList, { size: 15, stroke: 1.3 })
 };
 var tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-center", {
   variants: {
@@ -4393,7 +4623,7 @@ var tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-cent
   }
 });
 function TypeTag({ className, variant, type }) {
-  return /* @__PURE__ */ jsx21("span", { className: cn(tagVariants({ variant, type, className })), children: type === "icon" ? iconsMap[variant] : DATA_TYPE_NAMES[variant] });
+  return /* @__PURE__ */ jsx23("span", { className: cn(tagVariants({ variant, type, className })), children: type === "icon" ? iconsMap[variant] : DATA_TYPE_NAMES[variant] });
 }
 
 // src/components/databrowser/components/display/key-actions.tsx
@@ -4403,7 +4633,7 @@ import { IconDotsVertical } from "@tabler/icons-react";
 import * as React10 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon as CheckIcon2, ChevronRightIcon as ChevronRightIcon2, DotFilledIcon as DotFilledIcon2 } from "@radix-ui/react-icons";
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs14(
@@ -4411,45 +4641,45 @@ var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, .
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 data-[state=open]:bg-zinc-100 dark:focus:bg-zinc-800 dark:data-[state=open]:bg-zinc-800",
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 data-[state=open]:bg-neutral-100 dark:focus:bg-neutral-800 dark:data-[state=open]:bg-neutral-800 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx22(ChevronRightIcon2, { className: "ml-auto size-4" })
+      /* @__PURE__ */ jsx24(ChevronRightIcon2, { className: "ml-auto" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      "z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
       className
     ),
     ...props
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx22(DropdownMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx22(
+var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx24(DropdownMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx24(
   DropdownMenuPrimitive.Content,
   {
     ref,
     sideOffset,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      "origin-[--radix-dropdown-menu-content-transform-origin] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx22(
+var DropdownMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx24(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -4473,7 +4703,7 @@ var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checke
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx22("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx22(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx22(CheckIcon2, { className: "size-4" }) }) }),
+      /* @__PURE__ */ jsx24("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx24(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx24(CheckIcon2, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
@@ -4489,13 +4719,13 @@ var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx22("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx22(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx22(DotFilledIcon2, { className: "size-4 fill-current" }) }) }),
+      /* @__PURE__ */ jsx24("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx24(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx24(DotFilledIcon2, { className: "h-2 w-2 fill-current" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx22(
+var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx24(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -4504,7 +4734,7 @@ var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -4514,18 +4744,18 @@ var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) =>
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx22("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
+  return /* @__PURE__ */ jsx24("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 jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 function KeyActions({ dataKey, content }) {
   const { mutateAsync: deleteKey } = useDeleteKey();
-  return /* @__PURE__ */ jsxs15(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx23(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx23(Button, { size: "icon-sm", children: /* @__PURE__ */ jsx23(IconDotsVertical, { className: "size-4 text-zinc-500" }) }) }),
+  return /* @__PURE__ */ jsxs15(DropdownMenu, { modal: false, children: [
+    /* @__PURE__ */ jsx25(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(Button, { size: "icon-sm", "aria-label": "Key actions", children: /* @__PURE__ */ jsx25(IconDotsVertical, { className: "size-4 text-zinc-500" }) }) }),
     /* @__PURE__ */ jsxs15(DropdownMenuContent, { className: "", align: "end", children: [
-      content && /* @__PURE__ */ jsx23(
+      content && /* @__PURE__ */ jsx25(
         DropdownMenuItem,
         {
           onClick: () => {
@@ -4537,12 +4767,28 @@ function KeyActions({ dataKey, content }) {
           children: "Copy content"
         }
       ),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx25(
+        DropdownMenuItem,
+        {
+          onClick: () => {
+            navigator.clipboard.writeText(dataKey);
+          },
+          children: "Copy key"
+        }
+      ),
+      /* @__PURE__ */ jsx25(
         DeleteAlertDialog,
         {
           deletionType: "key",
           onDeleteConfirm: async () => await deleteKey(dataKey),
-          children: /* @__PURE__ */ jsx23(DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" })
+          children: /* @__PURE__ */ jsx25(
+            DropdownMenuItem,
+            {
+              className: "text-red-500 focus:bg-red-500 focus:text-white",
+              onSelect: (e) => e.preventDefault(),
+              children: "Delete key"
+            }
+          )
         }
       )
     ] })
@@ -4550,29 +4796,29 @@ function KeyActions({ dataKey, content }) {
 }
 
 // src/components/databrowser/components/display/display-header.tsx
-import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var DisplayHeader = ({
   dataKey,
   type,
   content
 }) => {
-  const { setSelectedListItem } = useDatabrowserStore();
+  const { setSelectedListItem } = useTab();
   const handleAddItem = () => {
     setSelectedListItem({ key: type === "stream" ? "*" : "", isNew: true });
   };
-  return /* @__PURE__ */ jsxs16("div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
+  return /* @__PURE__ */ jsxs16("div", { className: "rounded-lg bg-zinc-100", children: [
     /* @__PURE__ */ jsxs16("div", { className: "flex min-h-10 items-center justify-between gap-4", children: [
-      /* @__PURE__ */ jsx24("h2", { className: "grow truncate text-base", children: dataKey.trim() === "" ? /* @__PURE__ */ jsx24("span", { className: "ml-1 text-zinc-500", children: "(Empty Key)" }) : /* @__PURE__ */ jsx24("span", { className: "font-semibold", children: dataKey }) }),
+      /* @__PURE__ */ jsx26("h2", { className: "grow truncate text-base", children: dataKey.trim() === "" ? /* @__PURE__ */ jsx26("span", { className: "ml-1 text-zinc-500", children: "(Empty Key)" }) : /* @__PURE__ */ jsx26("span", { className: "font-semibold", children: dataKey }) }),
       /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1", children: [
-        type !== "string" && type !== "json" && /* @__PURE__ */ jsx24(Button, { onClick: handleAddItem, size: "icon-sm", children: /* @__PURE__ */ jsx24(IconPlus, { className: "size-4 text-zinc-500" }) }),
-        /* @__PURE__ */ jsx24(KeyActions, { dataKey, content })
+        type !== "string" && type !== "json" && /* @__PURE__ */ jsx26(Button, { onClick: handleAddItem, size: "icon-sm", "aria-label": "Add item", children: /* @__PURE__ */ jsx26(IconPlus, { className: "size-4 text-zinc-500" }) }),
+        /* @__PURE__ */ jsx26(KeyActions, { dataKey, content })
       ] })
     ] }),
     /* @__PURE__ */ jsxs16("div", { className: "flex h-10 flex-wrap items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx24(TypeTag, { variant: type, type: "badge" }),
-      /* @__PURE__ */ jsx24(SizeBadge, { dataKey }),
-      /* @__PURE__ */ jsx24(LengthBadge, { dataKey, type, content }),
-      /* @__PURE__ */ jsx24(HeaderTTLBadge, { dataKey })
+      /* @__PURE__ */ jsx26(TypeTag, { variant: type, type: "badge" }),
+      /* @__PURE__ */ jsx26(SizeBadge, { dataKey }),
+      /* @__PURE__ */ jsx26(LengthBadge, { dataKey, type, content }),
+      /* @__PURE__ */ jsx26(HeaderTTLBadge, { dataKey })
     ] })
   ] });
 };
@@ -4583,10 +4829,10 @@ import { Controller as Controller2, FormProvider, useForm as useForm2, useFormCo
 // src/components/ui/tooltip.tsx
 import * as React11 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx25(
+var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx27(TooltipPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx27(
   TooltipPrimitive.Content,
   {
     ref,
@@ -4597,16 +4843,16 @@ var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }
     ),
     ...props
   }
-));
+) }));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 var SimpleTooltip = ({
   content,
   children
 }) => {
-  if (!content) return /* @__PURE__ */ jsx25(Fragment3, { children });
+  if (!content) return /* @__PURE__ */ jsx27(Fragment3, { children });
   return /* @__PURE__ */ jsxs17(Tooltip, { delayDuration: 400, children: [
-    /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25("div", { children }) }),
-    /* @__PURE__ */ jsx25(TooltipContent, { children: content })
+    /* @__PURE__ */ jsx27(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx27("div", { children }) }),
+    /* @__PURE__ */ jsx27(TooltipContent, { side: "top", children: content })
   ] });
 };
 
@@ -4617,7 +4863,7 @@ var useFetchHashFieldExpires = ({
   dataKey,
   fields
 }) => {
-  const { redis } = useDatabrowser();
+  const { redis } = useRedis();
   return useQuery7({
     queryKey: [FETCH_HASH_FIELD_TTLS_QUERY_KEY, dataKey, fields],
     queryFn: async () => {
@@ -4648,7 +4894,7 @@ var useFetchHashFieldExpires = ({
 // src/components/databrowser/hooks/use-set-hash-ttl.ts
 import { useMutation as useMutation6 } from "@tanstack/react-query";
 var useSetHashTTL = () => {
-  const { redis } = useDatabrowser();
+  const { redis } = useRedis();
   return useMutation6({
     mutationFn: async ({
       dataKey,
@@ -4666,12 +4912,12 @@ var useSetHashTTL = () => {
 };
 
 // src/components/databrowser/components/display/hash/hash-field-ttl-badge.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx28 } 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__ */ jsx26(
+  return /* @__PURE__ */ jsx28(
     TTLBadge,
     {
       label: "Field TTL:",
@@ -4683,23 +4929,23 @@ var HashFieldTTLBadge = ({ dataKey, field }) => {
 };
 
 // src/components/databrowser/components/display/input/use-field.tsx
-import { useEffect as useEffect8, useState as useState8 } from "react";
+import { useEffect as useEffect8, useState as useState7 } from "react";
 import { useController } from "react-hook-form";
 
 // src/components/databrowser/components/display/input/content-type-select.tsx
-import { useMemo as useMemo4 } from "react";
-import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useMemo as useMemo6 } from "react";
+import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 var ContentTypeSelect = ({
   value,
   onChange,
   data
 }) => {
-  const isValidJSON = useMemo4(() => checkIsValidJSON(data), [data]);
+  const isValidJSON = useMemo6(() => checkIsValidJSON(data), [data]);
   return /* @__PURE__ */ jsxs18(Select, { value, onValueChange: onChange, children: [
-    /* @__PURE__ */ jsx27(SelectTrigger, { className: "h-6 w-auto border-none bg-transparent pl-0 pr-6 text-xs text-zinc-500", children: /* @__PURE__ */ jsx27(SelectValue, { placeholder: "Text" }) }),
-    /* @__PURE__ */ jsx27(SelectContent, { children: /* @__PURE__ */ jsxs18(SelectGroup, { children: [
-      /* @__PURE__ */ jsx27(SelectItem, { value: "Text", children: "Text" }),
-      /* @__PURE__ */ jsx27(SelectItem, { disabled: !isValidJSON, value: "JSON", children: "JSON" })
+    /* @__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__ */ jsxs18(SelectGroup, { children: [
+      /* @__PURE__ */ jsx29(SelectItem, { value: "Text", children: "Text" }),
+      /* @__PURE__ */ jsx29(SelectItem, { disabled: !isValidJSON, value: "JSON", children: "JSON" })
     ] }) })
   ] });
 };
@@ -4709,12 +4955,12 @@ import { useEffect as useEffect7, useRef as useRef2 } from "react";
 import { Editor, useMonaco } from "@monaco-editor/react";
 
 // src/components/databrowser/copy-button.tsx
-import { useState as useState7 } from "react";
+import { useState as useState6 } from "react";
 import { IconCheck, IconCopy } from "@tabler/icons-react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function CopyButton({ value, ...props }) {
-  const [copied, setCopied] = useState7(false);
-  return /* @__PURE__ */ jsx28(
+  const [copied, setCopied] = useState6(false);
+  return /* @__PURE__ */ jsx30(
     Button,
     {
       onClick: (e) => {
@@ -4731,7 +4977,7 @@ function CopyButton({ value, ...props }) {
       variant: "secondary",
       size: "icon-sm",
       ...props,
-      children: copied ? /* @__PURE__ */ jsx28(IconCheck, { className: "size-4 text-green-500" }) : /* @__PURE__ */ jsx28(IconCopy, { className: "size-4 text-zinc-500" })
+      children: copied ? /* @__PURE__ */ jsx30(IconCheck, { className: "size-4 text-green-500" }) : /* @__PURE__ */ jsx30(IconCopy, { className: "size-4 text-zinc-500" })
     }
   );
 }
@@ -4744,7 +4990,7 @@ var handleCopyClick = async (textToCopy) => {
 };
 
 // src/components/databrowser/components/display/input/custom-editor.tsx
-import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
 var CustomEditor = ({
   language,
   value,
@@ -4753,64 +4999,60 @@ var CustomEditor = ({
   showCopyButton,
   readOnly
 }) => {
+  const { active } = useTab();
   const monaco = useMonaco();
   const editorRef = useRef2();
   useEffect7(() => {
-    if (!monaco || !editorRef.current) {
+    if (!active || !monaco || !editorRef.current) {
       return;
     }
     monaco?.editor.setModelLanguage(editorRef.current.getModel(), language);
-  }, [monaco, language]);
+  }, [monaco, language, active]);
+  const editor = /* @__PURE__ */ jsx31(
+    Editor,
+    {
+      loading: void 0,
+      onMount: (editor2) => {
+        editorRef.current = editor2;
+      },
+      value,
+      onChange: (value2) => {
+        onChange(value2 ?? "");
+      },
+      defaultLanguage: language,
+      options: {
+        readOnly,
+        wordWrap: "on",
+        overviewRulerBorder: false,
+        overviewRulerLanes: 0,
+        formatOnPaste: true,
+        formatOnType: true,
+        renderWhitespace: "none",
+        smoothScrolling: true,
+        autoIndent: "full",
+        guides: { indentation: false },
+        fontSize: 13,
+        cursorBlinking: "smooth",
+        minimap: { enabled: false },
+        folding: false,
+        glyphMargin: false,
+        lineNumbers: "off",
+        parameterHints: { enabled: false },
+        lineDecorationsWidth: 0,
+        automaticLayout: true,
+        scrollBeyondLastLine: false,
+        renderLineHighlight: "none"
+      }
+    }
+  );
   return /* @__PURE__ */ jsxs19(
     "div",
     {
       className: cn("group/editor relative", height === void 0 && "h-full p-2"),
-      style: {
-        height
-      },
+      style: { height },
       children: [
-        /* @__PURE__ */ jsx29(
-          Editor,
-          {
-            loading: void 0,
-            onMount: (editor) => {
-              editorRef.current = editor;
-            },
-            value,
-            onChange: (value2) => {
-              onChange(value2 ?? "");
-            },
-            defaultLanguage: language,
-            options: {
-              readOnly,
-              wordWrap: "on",
-              overviewRulerBorder: false,
-              overviewRulerLanes: 0,
-              formatOnPaste: true,
-              formatOnType: true,
-              renderWhitespace: "none",
-              smoothScrolling: true,
-              autoIndent: "full",
-              guides: {
-                indentation: false
-              },
-              fontSize: 13,
-              cursorBlinking: "smooth",
-              minimap: {
-                enabled: false
-              },
-              folding: false,
-              glyphMargin: false,
-              lineNumbers: "off",
-              parameterHints: { enabled: false },
-              lineDecorationsWidth: 0,
-              automaticLayout: true,
-              scrollBeyondLastLine: false,
-              renderLineHighlight: "none"
-            }
-          }
-        ),
-        showCopyButton && /* @__PURE__ */ jsx29(
+        isTest ? /* @__PURE__ */ jsx31("input", { "aria-label": "editor", value, onChange: (e) => onChange(e.target.value) }) : editor,
+        showCopyButton && /* @__PURE__ */ jsx31(
           CopyButton,
           {
             value,
@@ -4823,7 +5065,7 @@ var CustomEditor = ({
 };
 
 // src/components/databrowser/components/display/input/use-field.tsx
-import { Fragment as Fragment4, jsx as jsx30 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx32 } from "react/jsx-runtime";
 var useField = ({
   name,
   form,
@@ -4836,7 +5078,7 @@ var useField = ({
     name,
     control: form.control
   });
-  const [contentType, setContentType] = useState8(
+  const [contentType, setContentType] = useState7(
     () => checkIsValidJSON(field.value) ? "JSON" : "Text"
   );
   useEffect8(() => {
@@ -4863,8 +5105,8 @@ var useField = ({
     }
   };
   return {
-    selector: /* @__PURE__ */ jsx30(ContentTypeSelect, { value: contentType, onChange: handleTypeChange, data: field.value }),
-    editor: /* @__PURE__ */ jsx30(Fragment4, { children: /* @__PURE__ */ jsx30(
+    selector: /* @__PURE__ */ jsx32(ContentTypeSelect, { value: contentType, onChange: handleTypeChange, data: field.value }),
+    editor: /* @__PURE__ */ jsx32(Fragment4, { children: /* @__PURE__ */ jsx32(
       CustomEditor,
       {
         language: contentType === "JSON" ? "json" : "plaintext",
@@ -4888,13 +5130,13 @@ var checkIsValidJSON = (value) => {
 };
 
 // src/components/databrowser/components/display/display-list-edit.tsx
-import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 var ListEditDisplay = ({
   dataKey,
   type,
   item
 }) => {
-  return /* @__PURE__ */ jsx31("div", { className: "grow rounded-md bg-zinc-100 p-3", children: /* @__PURE__ */ jsx31(ListEditForm, { item, type, dataKey }, item.key) });
+  return /* @__PURE__ */ jsx33("div", { className: "grow rounded-md bg-zinc-100", children: /* @__PURE__ */ jsx33(ListEditForm, { item, type, dataKey }, item.key) });
 };
 var ListEditForm = ({
   type,
@@ -4920,7 +5162,7 @@ var ListEditForm = ({
     }
   });
   const { mutateAsync: editItem, isPending } = useEditListItem();
-  const { setSelectedListItem } = useDatabrowserStore();
+  const { setSelectedListItem } = useTab();
   const [keyLabel, valueLabel] = headerLabels[type];
   const onSubmit = form.handleSubmit(async ({ key, value }) => {
     await editItem({
@@ -4933,9 +5175,9 @@ var ListEditForm = ({
     });
     setSelectedListItem(void 0);
   });
-  return /* @__PURE__ */ jsx31(FormProvider, { ...form, children: /* @__PURE__ */ jsxs20("form", { onSubmit, className: "flex flex-col gap-2", children: [
+  return /* @__PURE__ */ jsx33(FormProvider, { ...form, children: /* @__PURE__ */ jsxs20("form", { onSubmit, className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsxs20("div", { className: "flex grow flex-col gap-2", children: [
-      type !== "list" && /* @__PURE__ */ jsx31(
+      type !== "list" && /* @__PURE__ */ jsx33(
         FormItem,
         {
           readOnly: type === "stream",
@@ -4945,7 +5187,7 @@ var ListEditForm = ({
           data: itemKey
         }
       ),
-      type === "zset" ? /* @__PURE__ */ jsx31(NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ jsx31(
+      type === "zset" ? /* @__PURE__ */ jsx33(NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ jsx33(
         FormItem,
         {
           readOnly: type === "stream",
@@ -4964,9 +5206,9 @@ var ListEditForm = ({
           type === "hash" && itemKey !== "" ? "justify-between" : "justify-end"
         ),
         children: [
-          type === "hash" && itemKey !== "" && /* @__PURE__ */ jsx31(HashFieldTTLBadge, { dataKey, field: itemKey }),
+          type === "hash" && itemKey !== "" && /* @__PURE__ */ jsx33(HashFieldTTLBadge, { dataKey, field: itemKey }),
           /* @__PURE__ */ jsxs20("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsx31(
+            /* @__PURE__ */ jsx33(
               Button,
               {
                 type: "button",
@@ -4976,17 +5218,17 @@ var ListEditForm = ({
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ jsx31(
+            /* @__PURE__ */ jsx33(
               SimpleTooltip,
               {
                 content: type === "stream" && !isNew ? "Streams are not mutable" : void 0,
-                children: /* @__PURE__ */ jsx31(
+                children: /* @__PURE__ */ jsx33(
                   Button,
                   {
                     variant: "primary",
                     type: "submit",
                     disabled: !form.formState.isValid || !form.formState.isDirty || type === "stream" && !isNew,
-                    children: /* @__PURE__ */ jsx31(Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" })
+                    children: /* @__PURE__ */ jsx33(Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" })
                   }
                 )
               }
@@ -4999,12 +5241,12 @@ var ListEditForm = ({
 };
 var NumberFormItem = ({ name, label }) => {
   return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsx31("div", { className: "flex", children: /* @__PURE__ */ jsx31("span", { className: "text-xs font-medium text-zinc-700", children: label }) }),
-    /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx33("div", { className: "flex", children: /* @__PURE__ */ jsx33("span", { className: "text-xs font-medium text-zinc-700", children: label }) }),
+    /* @__PURE__ */ jsx33(
       Controller2,
       {
         name,
-        render: ({ field }) => /* @__PURE__ */ jsx31(
+        render: ({ field }) => /* @__PURE__ */ jsx33(
           "input",
           {
             className: "plain-input rounded-md border border-zinc-300 px-3 py-1 shadow-sm",
@@ -5034,18 +5276,18 @@ var FormItem = ({
   });
   return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1 text-xs", children: [
-      /* @__PURE__ */ jsx31("span", { className: "font-medium text-zinc-700", children: label }),
+      /* @__PURE__ */ jsx33("span", { className: "font-medium text-zinc-700", children: label }),
       " ",
-      /* @__PURE__ */ jsx31("span", { className: "text-zinc-300", children: "/" }),
+      /* @__PURE__ */ jsx33("span", { className: "text-zinc-300", children: "/" }),
       selector
     ] }),
-    /* @__PURE__ */ jsx31("div", { className: "overflow-hidden rounded-md border border-zinc-300 bg-white p-2 shadow-sm", children: editor })
+    /* @__PURE__ */ jsx33("div", { className: "overflow-hidden rounded-md border border-zinc-300 bg-white p-2 shadow-sm", children: editor })
   ] });
 };
 
 // src/components/databrowser/components/display/hash/hash-field-ttl-info.tsx
-import { useEffect as useEffect9, useState as useState9 } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { useEffect as useEffect9, useState as useState8 } from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var HashFieldTTLInfo = ({
   dataKey,
   field,
@@ -5053,7 +5295,7 @@ var HashFieldTTLInfo = ({
 }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields });
   const expireAt = data?.[field];
-  const [ttl, setTTL] = useState9(() => calculateTTL(expireAt));
+  const [ttl, setTTL] = useState8(() => calculateTTL(expireAt));
   useEffect9(() => {
     setTTL(calculateTTL(expireAt));
     const interval = setInterval(() => {
@@ -5062,11 +5304,11 @@ var HashFieldTTLInfo = ({
     return () => clearInterval(interval);
   }, [expireAt]);
   if (!expireAt || expireAt === TTL_NOT_FOUND || expireAt === TTL_INFINITE) return;
-  return /* @__PURE__ */ jsx32("span", { className: "block min-w-[30px] whitespace-nowrap text-right text-red-600", children: formatTime(ttl ?? 0) });
+  return /* @__PURE__ */ jsx34("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 jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
 var headerLabels = {
   list: ["Index", "Content"],
   hash: ["Field", "Value"],
@@ -5075,12 +5317,12 @@ var headerLabels = {
   set: ["Value", ""]
 };
 var ListDisplay = ({ dataKey, type }) => {
-  const { selectedListItem } = useDatabrowserStore();
+  const { selectedListItem } = useTab();
   const query = useFetchListItems({ dataKey, type });
   return /* @__PURE__ */ jsxs21("div", { className: "flex h-full flex-col gap-2", children: [
-    /* @__PURE__ */ jsx33(DisplayHeader, { dataKey, type }),
-    selectedListItem && /* @__PURE__ */ jsx33(ListEditDisplay, { dataKey, type, item: selectedListItem }),
-    /* @__PURE__ */ jsx33("div", { className: cn("min-h-0 grow", selectedListItem && "hidden"), children: /* @__PURE__ */ jsx33(InfiniteScroll, { query, children: /* @__PURE__ */ jsx33("div", { className: "pr-3", children: /* @__PURE__ */ jsx33("table", { className: "w-full", children: /* @__PURE__ */ jsx33(ItemContextMenu, { dataKey, type, children: /* @__PURE__ */ jsx33("tbody", { children: /* @__PURE__ */ jsx33(ListItems, { dataKey, type, query }) }) }) }) }) }) })
+    /* @__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, children: /* @__PURE__ */ jsx35("table", { className: "w-full", children: /* @__PURE__ */ jsx35(ItemContextMenu, { dataKey, type, children: /* @__PURE__ */ jsx35("tbody", { children: /* @__PURE__ */ jsx35(ListItems, { dataKey, type, query }) }) }) }) }) })
   ] });
 };
 var ListItems = ({
@@ -5088,11 +5330,11 @@ var ListItems = ({
   type,
   dataKey
 }) => {
-  const { setSelectedListItem } = useDatabrowserStore();
-  const keys = useMemo5(() => query.data?.pages.flatMap((page) => page.keys) ?? [], [query.data]);
-  const fields = useMemo5(() => keys.map((key) => key.key), [keys]);
+  const { setSelectedListItem } = useTab();
+  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__ */ jsx33(Fragment5, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsx35(Fragment5, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ jsxs21(
     "tr",
     {
       "data-item-key": key,
@@ -5100,9 +5342,9 @@ var ListItems = ({
       onClick: () => {
         setSelectedListItem({ key });
       },
-      className: cn("h-10 border-b border-b-zinc-100 hover:bg-zinc-100 "),
+      className: cn("h-10 border-b border-b-zinc-100 transition-colors hover:bg-zinc-100"),
       children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx35(
           "td",
           {
             className: cn(
@@ -5112,14 +5354,14 @@ var ListItems = ({
             children: key
           }
         ),
-        value !== void 0 && /* @__PURE__ */ jsx33(
+        value !== void 0 && /* @__PURE__ */ jsx35(
           "td",
           {
             className: cn("cursor-pointer truncate px-3", type === "zset" ? "w-24" : "max-w-0"),
             children: value
           }
         ),
-        type !== "stream" && /* @__PURE__ */ jsx33(
+        type !== "stream" && /* @__PURE__ */ jsx35(
           "td",
           {
             className: "w-0 min-w-0 p-0",
@@ -5127,8 +5369,8 @@ var ListItems = ({
               e.stopPropagation();
             },
             children: /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-end gap-2", children: [
-              type === "hash" && /* @__PURE__ */ jsx33(HashFieldTTLInfo, { dataKey, field: key, fields }),
-              /* @__PURE__ */ jsx33(
+              type === "hash" && /* @__PURE__ */ jsx35(HashFieldTTLInfo, { dataKey, field: key, fields }),
+              /* @__PURE__ */ jsx35(
                 DeleteAlertDialog,
                 {
                   deletionType: "item",
@@ -5142,14 +5384,14 @@ var ListItems = ({
                       newKey: void 0
                     });
                   },
-                  children: /* @__PURE__ */ jsx33(
+                  children: /* @__PURE__ */ jsx35(
                     Button,
                     {
                       className: "",
                       size: "icon-sm",
                       variant: "secondary",
                       onClick: (e) => e.stopPropagation(),
-                      children: /* @__PURE__ */ jsx33(IconTrash, { className: "size-4 text-zinc-500" })
+                      children: /* @__PURE__ */ jsx35(IconTrash, { className: "size-4 text-zinc-500" })
                     }
                   )
                 }
@@ -5166,18 +5408,12 @@ var ListItems = ({
 // src/components/databrowser/components/display/display-simple.tsx
 import { useEffect as useEffect10 } from "react";
 import { useForm as useForm3 } from "react-hook-form";
-import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
 var EditorDisplay = ({ dataKey, type }) => {
   const { data } = useFetchSimpleKey(dataKey, type);
   return /* @__PURE__ */ jsxs22("div", { className: "flex h-full w-full flex-col gap-2", children: [
-    /* @__PURE__ */ jsx34(DisplayHeader, { dataKey, type, content: data ?? void 0 }),
-    /* @__PURE__ */ jsx34(
-      "div",
-      {
-        className: "flex h-full grow flex-col gap-2\n      rounded-md bg-zinc-100 p-3",
-        children: data === void 0 ? /* @__PURE__ */ jsx34(Spinner, { isLoadingText: "", isLoading: true }) : data === null ? /* @__PURE__ */ jsx34(Fragment6, {}) : /* @__PURE__ */ jsx34(EditorDisplayForm, { dataKey, type, data }, dataKey)
-      }
-    )
+    /* @__PURE__ */ jsx36(DisplayHeader, { dataKey, type, content: data ?? void 0 }),
+    /* @__PURE__ */ jsx36("div", { className: "flex h-full grow flex-col gap-2 rounded-md bg-zinc-100", children: data === void 0 ? /* @__PURE__ */ jsx36(Spinner, { isLoadingText: "", isLoading: true }) : data === null ? /* @__PURE__ */ jsx36(Fragment6, {}) : /* @__PURE__ */ jsx36(EditorDisplayForm, { dataKey, type, data }, dataKey) })
   ] });
 };
 var EditorDisplayForm = ({
@@ -5198,12 +5434,12 @@ var EditorDisplayForm = ({
   };
   return /* @__PURE__ */ jsxs22(Fragment6, { children: [
     /* @__PURE__ */ jsxs22("div", { className: "flex grow flex-col gap-1", children: [
-      /* @__PURE__ */ jsx34("div", { className: "flex shrink-0 items-center gap-2", children: type === "json" ? /* @__PURE__ */ jsx34("div", {}) : selector }),
-      /* @__PURE__ */ jsx34("div", { className: "grow rounded-md border border-zinc-300 bg-white p-1", children: editor })
+      /* @__PURE__ */ jsx36("div", { className: "flex shrink-0 items-center gap-2", children: type === "json" ? /* @__PURE__ */ jsx36("div", {}) : selector }),
+      /* @__PURE__ */ jsx36("div", { className: "grow rounded-md border border-zinc-300 bg-white p-1", children: editor })
     ] }),
-    /* @__PURE__ */ jsx34("div", { className: "flex shrink-0 items-center gap-2", children: /* @__PURE__ */ jsxs22("div", { className: "ml-auto flex gap-2", children: [
-      form.formState.isDirty && /* @__PURE__ */ jsx34(Button, { onClick: handleCancel, children: "Cancel" }),
-      /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx36("div", { className: "flex shrink-0 items-center gap-2", children: /* @__PURE__ */ jsxs22("div", { className: "ml-auto flex gap-2", children: [
+      form.formState.isDirty && /* @__PURE__ */ jsx36(Button, { onClick: handleCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx36(
         Button,
         {
           variant: "primary",
@@ -5211,7 +5447,7 @@ var EditorDisplayForm = ({
             await setKey(value);
           }),
           disabled: !form.formState.isValid || !form.formState.isDirty,
-          children: /* @__PURE__ */ jsx34(Spinner, { isLoading: isSettingKey, isLoadingText: "Saving", children: "Save" })
+          children: /* @__PURE__ */ jsx36(Spinner, { isLoading: isSettingKey, isLoadingText: "Saving", children: "Save" })
         }
       )
     ] }) })
@@ -5219,19 +5455,19 @@ var EditorDisplayForm = ({
 };
 
 // src/components/databrowser/components/display/index.tsx
-import { Fragment as Fragment7, jsx as jsx35 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx37 } from "react/jsx-runtime";
 var DataDisplay = () => {
-  const { selectedKey } = useDatabrowserStore();
+  const { selectedKey } = useTab();
   const { query } = useKeys();
   const type = useKeyType(selectedKey);
-  return /* @__PURE__ */ jsx35("div", { className: "h-full rounded-xl border bg-white p-1", children: !selectedKey ? /* @__PURE__ */ jsx35("div", {}) : !type ? query.isLoading ? /* @__PURE__ */ jsx35("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx35("span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ jsx35("div", {}) : /* @__PURE__ */ jsx35(Fragment7, { children: type === "string" || type === "json" ? /* @__PURE__ */ jsx35(EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ jsx35(ListDisplay, { dataKey: selectedKey, type }) }) });
+  return /* @__PURE__ */ jsx37("div", { className: "h-full p-4", children: !selectedKey ? /* @__PURE__ */ jsx37("div", {}) : !type ? query.isLoading ? /* @__PURE__ */ jsx37("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx37("span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ jsx37("div", {}) : /* @__PURE__ */ jsx37(Fragment7, { children: type === "string" || type === "json" ? /* @__PURE__ */ jsx37(EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ jsx37(ListDisplay, { dataKey: selectedKey, type }) }) });
 };
 
 // src/components/databrowser/components/sidebar/index.tsx
 import { IconRefresh } from "@tabler/icons-react";
 
 // src/components/databrowser/components/add-key-modal.tsx
-import { useState as useState10 } from "react";
+import { useState as useState9 } from "react";
 import { DialogDescription as DialogDescription2 } from "@radix-ui/react-dialog";
 import { PlusIcon } from "@radix-ui/react-icons";
 import { Controller as Controller3, useForm as useForm4 } from "react-hook-form";
@@ -5239,12 +5475,12 @@ 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 jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
-var DialogPortal = (props) => /* @__PURE__ */ jsx36(DialogPrimitive.Portal, { container: portalRoot, ...props });
+var DialogPortal = (props) => /* @__PURE__ */ jsx38(DialogPrimitive.Portal, { container: portalRoot, ...props });
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;
-var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
+var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -5259,7 +5495,7 @@ 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__ */ jsx36(DialogOverlay, {}),
+  /* @__PURE__ */ jsx38(DialogOverlay, {}),
   /* @__PURE__ */ jsxs23(
     DialogPrimitive.Content,
     {
@@ -5281,7 +5517,7 @@ var DialogContent = React12.forwardRef(({ className, children, ...props }, ref)
       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 dark:ring-offset-zinc-950 dark:focus:ring-zinc-300 dark:data-[state=open]:bg-zinc-800 dark:data-[state=open]:text-zinc-400", children: [
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx38(
             "svg",
             {
               width: "15",
@@ -5290,7 +5526,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__ */ jsx36(
+              children: /* @__PURE__ */ jsx38(
                 "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",
@@ -5301,16 +5537,16 @@ var DialogContent = React12.forwardRef(({ className, children, ...props }, ref)
               )
             }
           ),
-          /* @__PURE__ */ jsx36("span", { className: "sr-only", children: "Close" })
+          /* @__PURE__ */ jsx38("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
   )
 ] }));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx36("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx38("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__ */ jsx36(
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx38(
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -5318,7 +5554,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx36(
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
+var DialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
   DialogPrimitive.Title,
   {
     ref,
@@ -5327,7 +5563,7 @@ var DialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
+var DialogDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
   DialogPrimitive.Description,
   {
     ref,
@@ -5338,10 +5574,10 @@ var DialogDescription = React12.forwardRef(({ className, ...props }, ref) => /*
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/databrowser/components/add-key-modal.tsx
-import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
 function AddKeyModal() {
-  const { setSelectedKey } = useDatabrowserStore();
-  const [open, setOpen] = useState10(false);
+  const { setSelectedKey } = useTab();
+  const [open, setOpen] = useState9(false);
   const { mutateAsync: addKey, isPending } = useAddKey();
   const { control, handleSubmit, formState, reset } = useForm4({
     defaultValues: {
@@ -5370,24 +5606,24 @@ function AddKeyModal() {
         setOpen(open2);
       },
       children: [
-        /* @__PURE__ */ jsx37(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx37(Button, { variant: "primary", size: "icon-sm", children: /* @__PURE__ */ jsx37(PlusIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx39(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx39(Button, { variant: "primary", size: "icon-sm", "aria-label": "Add key", children: /* @__PURE__ */ jsx39(PlusIcon, { className: "size-4" }) }) }),
         /* @__PURE__ */ jsxs24(DialogContent, { className: "max-w-[400px]", children: [
-          /* @__PURE__ */ jsx37(DialogHeader, { children: /* @__PURE__ */ jsx37(DialogTitle, { children: "Create new key" }) }),
-          /* @__PURE__ */ jsx37("div", { className: "sr-only", children: /* @__PURE__ */ jsx37(DialogDescription2, { children: "Create new key" }) }),
+          /* @__PURE__ */ jsx39(DialogHeader, { children: /* @__PURE__ */ jsx39(DialogTitle, { children: "Create new key" }) }),
+          /* @__PURE__ */ jsx39("div", { className: "sr-only", children: /* @__PURE__ */ jsx39(DialogDescription2, { children: "Create new key" }) }),
           /* @__PURE__ */ jsxs24("form", { className: "mt-4", onSubmit, children: [
             /* @__PURE__ */ jsxs24("div", { className: "flex gap-1", children: [
-              /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx39(
                 Controller3,
                 {
                   control,
                   name: "type",
                   render: ({ field }) => /* @__PURE__ */ jsxs24(Select, { value: field.value, onValueChange: field.onChange, children: [
-                    /* @__PURE__ */ jsx37(SelectTrigger, { className: "h-8 w-auto pl-[3px] pr-8", children: /* @__PURE__ */ jsx37(SelectValue, {}) }),
-                    /* @__PURE__ */ jsx37(SelectContent, { children: /* @__PURE__ */ jsx37(SelectGroup, { children: DATA_TYPES.map((type) => /* @__PURE__ */ jsx37(SelectItem, { value: type, children: /* @__PURE__ */ jsx37(TypeTag, { variant: type, type: "badge" }) }, type)) }) })
+                    /* @__PURE__ */ jsx39(SelectTrigger, { className: "h-8 w-auto pl-[3px] pr-8", children: /* @__PURE__ */ jsx39(SelectValue, {}) }),
+                    /* @__PURE__ */ jsx39(SelectContent, { children: /* @__PURE__ */ jsx39(SelectGroup, { children: DATA_TYPES.map((type) => /* @__PURE__ */ jsx39(SelectItem, { value: type, children: /* @__PURE__ */ jsx39(TypeTag, { variant: type, type: "badge" }) }, type)) }) })
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx39(
                 Controller3,
                 {
                   rules: {
@@ -5395,14 +5631,14 @@ function AddKeyModal() {
                   },
                   control,
                   name: "key",
-                  render: ({ field }) => /* @__PURE__ */ jsx37(Input, { placeholder: "mykey", ...field, className: "h-8 grow" })
+                  render: ({ field }) => /* @__PURE__ */ jsx39(Input, { placeholder: "mykey", ...field, className: "h-8 grow" })
                 }
               )
             ] }),
-            formState.errors.key && /* @__PURE__ */ jsx37("p", { className: "mb-3 mt-2 text-xs text-red-500", children: formState.errors.key?.message }),
-            /* @__PURE__ */ jsx37("p", { className: "mt-2 text-xs text-zinc-500", children: "After creating the key, you can edit the value" }),
+            formState.errors.key && /* @__PURE__ */ jsx39("p", { className: "mb-3 mt-2 text-xs text-red-500", children: formState.errors.key?.message }),
+            /* @__PURE__ */ jsx39("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__ */ jsx37(
+              /* @__PURE__ */ jsx39(
                 Button,
                 {
                   type: "button",
@@ -5413,7 +5649,7 @@ function AddKeyModal() {
                   children: "Cancel"
                 }
               ),
-              /* @__PURE__ */ jsx37(Button, { variant: "primary", type: "submit", children: /* @__PURE__ */ jsx37(Spinner, { isLoading: isPending, isLoadingText: "Creating", children: "Create" }) })
+              /* @__PURE__ */ jsx39(Button, { variant: "primary", type: "submit", children: /* @__PURE__ */ jsx39(Spinner, { isLoading: isPending, isLoadingText: "Creating", children: "Create" }) })
             ] })
           ] })
         ] })
@@ -5423,24 +5659,24 @@ function AddKeyModal() {
 }
 
 // src/components/databrowser/components/sidebar/empty.tsx
-import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
 var Empty = () => {
-  return /* @__PURE__ */ jsx38("div", { className: "flex h-full w-full items-center justify-center rounded-md border border-dashed px-4 py-6 text-center", children: /* @__PURE__ */ jsxs25("div", { className: "space-y-5", children: [
-    /* @__PURE__ */ jsx38("p", { className: "text-md font-medium", children: "Data on a break" }),
-    /* @__PURE__ */ jsx38("p", { className: "text-balance text-center", children: '"Quick, lure it back with some CLI magic!"' })
+  return /* @__PURE__ */ jsx40("div", { className: "flex h-full w-full items-center justify-center rounded-md border bg-white px-4 py-6 text-center", children: /* @__PURE__ */ jsxs25("div", { className: "space-y-5", children: [
+    /* @__PURE__ */ jsx40("p", { className: "text-md font-medium", children: "Data on a break" }),
+    /* @__PURE__ */ jsx40("p", { className: "text-balance text-center", children: '"Quick, lure it back with some CLI magic!"' })
   ] }) });
 };
 
 // src/components/databrowser/components/sidebar-context-menu.tsx
-import { useState as useState11 } from "react";
+import { useState as useState10 } from "react";
 import { ContextMenuSeparator as ContextMenuSeparator3 } from "@radix-ui/react-context-menu";
-import { Fragment as Fragment8, jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
 var SidebarContextMenu = ({ children }) => {
   const { mutate: deleteKey } = useDeleteKey();
-  const [isAlertOpen, setAlertOpen] = useState11(false);
-  const [dataKey, setDataKey] = useState11("");
+  const [isAlertOpen, setAlertOpen] = useState10(false);
+  const [dataKey, setDataKey] = useState10("");
   return /* @__PURE__ */ jsxs26(Fragment8, { children: [
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx41(
       DeleteAlertDialog,
       {
         deletionType: "key",
@@ -5454,7 +5690,7 @@ var SidebarContextMenu = ({ children }) => {
       }
     ),
     /* @__PURE__ */ jsxs26(ContextMenu, { children: [
-      /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx41(
         ContextMenuTrigger,
         {
           onContextMenu: (e) => {
@@ -5470,7 +5706,7 @@ var SidebarContextMenu = ({ children }) => {
         }
       ),
       /* @__PURE__ */ jsxs26(ContextMenuContent, { children: [
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx41(
           ContextMenuItem,
           {
             onClick: () => {
@@ -5482,18 +5718,18 @@ var SidebarContextMenu = ({ children }) => {
             children: "Copy key"
           }
         ),
-        /* @__PURE__ */ jsx39(ContextMenuSeparator3, {}),
-        /* @__PURE__ */ jsx39(ContextMenuItem, { onClick: () => setAlertOpen(true), children: "Delete key" })
+        /* @__PURE__ */ jsx41(ContextMenuSeparator3, {}),
+        /* @__PURE__ */ jsx41(ContextMenuItem, { onClick: () => setAlertOpen(true), children: "Delete key" })
       ] })
     ] })
   ] });
 };
 
 // src/components/databrowser/components/sidebar/keys-list.tsx
-import { Fragment as Fragment9, jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
 var KeysList = () => {
   const { keys } = useKeys();
-  return /* @__PURE__ */ jsx40("div", { className: "pr-3", children: /* @__PURE__ */ jsx40(SidebarContextMenu, { children: /* @__PURE__ */ jsx40(Fragment9, { children: keys.map((data, i) => /* @__PURE__ */ jsx40(KeyItem, { nextKey: keys.at(i + 1)?.[0] ?? "", data }, data[0])) }) }) });
+  return /* @__PURE__ */ jsx42(SidebarContextMenu, { children: /* @__PURE__ */ jsx42(Fragment9, { children: keys.map((data, i) => /* @__PURE__ */ jsx42(KeyItem, { nextKey: keys.at(i + 1)?.[0] ?? "", data }, data[0])) }) });
 };
 var keyStyles = {
   string: "border-sky-400 !bg-sky-50 text-sky-900",
@@ -5505,7 +5741,7 @@ var keyStyles = {
   stream: "border-green-400 !bg-green-50 text-green-900"
 };
 var KeyItem = ({ data, nextKey }) => {
-  const { selectedKey, setSelectedKey } = useDatabrowserStore();
+  const { selectedKey, setSelectedKey } = useTab();
   const [dataKey, dataType] = data;
   const isKeySelected = selectedKey === dataKey;
   const isNextKeySelected = selectedKey === nextKey;
@@ -5515,49 +5751,125 @@ var KeyItem = ({ data, nextKey }) => {
       "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 ",
+        "relative flex h-10 w-full items-center justify-start gap-2 px-3 py-0 !ring-0 focus-visible:bg-zinc-50",
         "select-none border border-transparent text-left",
         isKeySelected && "shadow-sm",
         isKeySelected && keyStyles[dataType]
       ),
       onClick: () => setSelectedKey(dataKey),
       children: [
-        /* @__PURE__ */ jsx40(TypeTag, { variant: dataType, type: "icon" }),
-        /* @__PURE__ */ jsx40("p", { className: "truncate whitespace-nowrap", children: dataKey }),
-        !isKeySelected && !isNextKeySelected && /* @__PURE__ */ jsx40("span", { className: "absolute -bottom-px left-3 right-3 h-px bg-zinc-100" })
+        /* @__PURE__ */ jsx42(TypeTag, { variant: dataType, type: "icon" }),
+        /* @__PURE__ */ jsx42("p", { className: "truncate whitespace-nowrap", children: dataKey }),
+        !isKeySelected && !isNextKeySelected && /* @__PURE__ */ jsx42("span", { className: "absolute -bottom-px left-3 right-3 h-px bg-zinc-100" })
       ]
     }
   );
 };
 
 // src/components/databrowser/components/sidebar/search-input.tsx
-import { useState as useState12 } from "react";
+import { useEffect as useEffect11, useRef as useRef3, useState as useState11 } from "react";
 import { IconX } from "@tabler/icons-react";
-import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
+var dedupeSearchHistory = (history) => {
+  const seen = /* @__PURE__ */ new Set();
+  return history.filter((item) => {
+    if (!item || seen.has(item)) return false;
+    seen.add(item);
+    return true;
+  });
+};
 var SearchInput = () => {
-  const { setSearchKey, search } = useDatabrowserStore();
-  const [state, setState] = useState12(search.key);
-  const submit = (value) => {
+  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 handleSubmit = (value) => {
     if (value.trim() !== "" && !value.includes("*")) value = `${value}*`;
+    addSearchHistory(value);
     setSearchKey(value);
     setState(value);
   };
-  return /* @__PURE__ */ jsxs28("div", { className: "relative grow", children: [
-    /* @__PURE__ */ jsx41(
-      Input,
-      {
-        placeholder: "Search",
-        className: "rounded-l-none border-zinc-300 font-normal",
-        onKeyDown: (e) => {
-          if (e.key === "Enter") submit(e.currentTarget.value);
-        },
-        onChange: (e) => {
-          setState(e.currentTarget.value);
-          if (e.currentTarget.value.trim() === "") submit("");
-        },
-        value: state
+  const filteredHistory = dedupeSearchHistory(
+    searchHistory.filter((item) => item.includes(state) && item !== state)
+  ).slice(0, 5).map((item) => item.endsWith("*") ? item.slice(0, -1) : item);
+  useEffect11(() => {
+    setFocusedIndex(-1);
+  }, [filteredHistory.length]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      const text = focusedIndex >= 0 && focusedIndex < filteredHistory.length ? filteredHistory[focusedIndex] : e.currentTarget.value;
+      handleSubmit(text);
+    } else if (e.key === "Escape") {
+      setState("");
+      setFocusedIndex(-1);
+      inputRef.current?.blur();
+    } else if (e.key === "ArrowDown" || e.key === "Tab" && !e.shiftKey) {
+      e.preventDefault();
+      if (focusedIndex < filteredHistory.length - 1) {
+        setFocusedIndex(focusedIndex + 1);
+      } else if (filteredHistory.length > 0) {
+        setFocusedIndex(0);
       }
-    ),
+    } else if (e.key === "ArrowUp" || e.key === "Tab" && e.shiftKey) {
+      e.preventDefault();
+      if (focusedIndex > 0) {
+        setFocusedIndex(focusedIndex - 1);
+      } else if (filteredHistory.length > 0 && focusedIndex === 0) {
+        setFocusedIndex(-1);
+        inputRef.current?.focus();
+      } else if (filteredHistory.length > 0) {
+        setFocusedIndex(filteredHistory.length - 1);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs28("div", { className: "relative grow", children: [
+    /* @__PURE__ */ jsxs28(Popover, { open: isFocus && filteredHistory.length > 0, children: [
+      /* @__PURE__ */ jsx43(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx43("div", { children: /* @__PURE__ */ jsx43(
+        Input,
+        {
+          ref: inputRef,
+          placeholder: "Search",
+          className: "rounded-l-none border-zinc-300 font-normal",
+          onKeyDown: handleKeyDown,
+          onChange: (e) => {
+            setState(e.currentTarget.value);
+            if (e.currentTarget.value.trim() === "") handleSubmit("");
+          },
+          value: state,
+          onFocus: () => {
+            setIsFocus(true);
+            setFocusedIndex(-1);
+          },
+          onBlur: () => setIsFocus(false)
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx43(
+        PopoverContent,
+        {
+          className: "w-[--radix-popover-trigger-width] divide-y px-3 py-2 text-[13px] text-zinc-900",
+          autoFocus: false,
+          onOpenAutoFocus: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          children: filteredHistory.map((item, index) => /* @__PURE__ */ 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__ */ jsxs28(
       Button,
       {
@@ -5570,27 +5882,28 @@ var SearchInput = () => {
           setState("");
         },
         children: [
-          /* @__PURE__ */ jsx41(IconX, { size: 16 }),
-          /* @__PURE__ */ jsx41("span", { className: "sr-only", children: "Clear" })
+          /* @__PURE__ */ jsx43(IconX, { size: 16 }),
+          /* @__PURE__ */ jsx43("span", { className: "sr-only", children: "Clear" })
         ]
       }
-    )
+    ),
+    " "
   ] });
 };
 
 // src/components/databrowser/components/sidebar/skeleton-buttons.tsx
-import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
 var DEFAULT_SKELETON_COUNT = 6;
-var LoadingSkeleton = () => /* @__PURE__ */ jsx42("div", { className: "grid", children: Array.from({ length: DEFAULT_SKELETON_COUNT }).fill(0).map((_, idx) => /* @__PURE__ */ jsxs29("div", { className: "flex h-10 items-center gap-2 px-3", children: [
-  /* @__PURE__ */ jsx42(Skeleton, { className: "size-5 shrink-0 rounded" }),
-  /* @__PURE__ */ jsx42(Skeleton, { className: "h-4 grow rounded" })
+var LoadingSkeleton = () => /* @__PURE__ */ jsx44("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__ */ jsxs29("div", { className: "flex h-10 items-center gap-2 px-3", children: [
+  /* @__PURE__ */ jsx44(Skeleton, { className: "size-5 shrink-0 rounded" }),
+  /* @__PURE__ */ jsx44(Skeleton, { className: "h-4 grow rounded" })
 ] }, idx)) });
 
 // src/components/databrowser/components/sidebar/type-selector.tsx
-import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
 var ALL_TYPES_KEY = "all";
 function DataTypeSelector() {
-  const { search, setSearchType } = useDatabrowserStore();
+  const { search, setSearchType } = useTab();
   return /* @__PURE__ */ jsxs30(
     Select,
     {
@@ -5603,9 +5916,9 @@ function DataTypeSelector() {
       },
       value: search.type === void 0 ? ALL_TYPES_KEY : search.type,
       children: [
-        /* @__PURE__ */ jsx43(SelectTrigger, { className: "!w-auto select-none whitespace-nowrap rounded-r-none border-r-0 border-zinc-300 pr-8", children: /* @__PURE__ */ jsx43(SelectValue, {}) }),
-        /* @__PURE__ */ jsx43(SelectContent, { children: /* @__PURE__ */ jsx43(SelectGroup, { children: [[ALL_TYPES_KEY, "All Types"], ...Object.entries(DATA_TYPE_NAMES)].map(
-          ([key, value]) => /* @__PURE__ */ jsx43(SelectItem, { value: key, children: value }, key)
+        /* @__PURE__ */ jsx45(SelectTrigger, { className: "!w-auto select-none whitespace-nowrap rounded-r-none border-r-0 border-zinc-300 pr-8", children: /* @__PURE__ */ jsx45(SelectValue, {}) }),
+        /* @__PURE__ */ jsx45(SelectContent, { children: /* @__PURE__ */ jsx45(SelectGroup, { children: [[ALL_TYPES_KEY, "All Types"], ...Object.entries(DATA_TYPE_NAMES)].map(
+          ([key, value]) => /* @__PURE__ */ jsx45(SelectItem, { value: key, children: value }, key)
         ) }) })
       ]
     }
@@ -5613,17 +5926,18 @@ function DataTypeSelector() {
 }
 
 // src/components/databrowser/components/sidebar/index.tsx
-import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 function Sidebar() {
   const { keys, query } = useKeys();
-  return /* @__PURE__ */ jsxs31("div", { className: "flex h-full flex-col gap-2 rounded-xl border bg-white p-1", children: [
-    /* @__PURE__ */ jsxs31("div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
+  return /* @__PURE__ */ jsxs31("div", { className: "flex h-full flex-col gap-2 p-4", children: [
+    /* @__PURE__ */ jsxs31("div", { className: "rounded-lg bg-zinc-100", children: [
       /* @__PURE__ */ jsxs31("div", { className: "flex h-10 items-center justify-between pl-1", children: [
-        /* @__PURE__ */ jsx44(DisplayDbSize, {}),
+        /* @__PURE__ */ jsx46(DisplayDbSize, {}),
         /* @__PURE__ */ jsxs31("div", { className: "flex gap-1", children: [
-          /* @__PURE__ */ jsx44(
+          /* @__PURE__ */ jsx46(
             Button,
             {
+              "aria-label": "Refresh",
               className: "h-7 w-7 px-0",
               onClick: () => {
                 queryClient.invalidateQueries({
@@ -5642,32 +5956,28 @@ function Sidebar() {
                   queryKey: [FETCH_KEY_TYPE_QUERY_KEY]
                 });
               },
-              children: /* @__PURE__ */ jsx44(Spinner, { isLoading: query.isFetching, children: /* @__PURE__ */ jsx44(IconRefresh, { size: 16 }) })
+              children: /* @__PURE__ */ jsx46(Spinner, { isLoading: query.isFetching, children: /* @__PURE__ */ jsx46(IconRefresh, { size: 16 }) })
             }
           ),
-          /* @__PURE__ */ jsx44(AddKeyModal, {})
+          /* @__PURE__ */ jsx46(AddKeyModal, {})
         ] })
       ] }),
       /* @__PURE__ */ jsxs31("div", { className: "flex h-10 items-center", children: [
-        /* @__PURE__ */ jsx44(DataTypeSelector, {}),
-        /* @__PURE__ */ jsx44(SearchInput, {})
+        /* @__PURE__ */ jsx46(DataTypeSelector, {}),
+        /* @__PURE__ */ jsx46(SearchInput, {})
       ] })
     ] }),
-    query.isLoading && keys.length === 0 ? /* @__PURE__ */ jsx44(LoadingSkeleton, {}) : keys.length > 0 ? (
+    query.isLoading && keys.length === 0 ? /* @__PURE__ */ jsx46(LoadingSkeleton, {}) : keys.length > 0 ? (
       // Infinite scroll already has a loader at the bottom
-      /* @__PURE__ */ jsx44(InfiniteScroll, { query, children: /* @__PURE__ */ jsx44(KeysList, {}) })
-    ) : /* @__PURE__ */ jsx44(Empty, {})
+      /* @__PURE__ */ jsx46(InfiniteScroll, { query, disableRoundedInherit: true, className: "min-h-0", children: /* @__PURE__ */ jsx46(KeysList, {}) })
+    ) : /* @__PURE__ */ jsx46(Empty, {})
   ] });
 }
 
-// src/components/databrowser/index.tsx
-import { jsx as jsx45, jsxs as jsxs32 } from "react/jsx-runtime";
-var RedisBrowser = ({ token, url }) => {
-  const credentials = useMemo6(() => ({ token, url }), [token, url]);
-  useEffect11(() => {
-    queryClient.resetQueries();
-  }, [credentials.url]);
-  return /* @__PURE__ */ jsx45(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx45(TooltipProvider, { children: /* @__PURE__ */ jsx45(DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx45(KeysProvider, { children: /* @__PURE__ */ jsxs32("div", { className: "ups-db", style: { height: "100%" }, children: [
+// src/components/databrowser/components/databrowser-instance.tsx
+import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
+var DatabrowserInstance = ({ hidden }) => {
+  return /* @__PURE__ */ jsx47(KeysProvider, { children: /* @__PURE__ */ jsxs32("div", { className: cn("min-h-0 grow rounded-md bg-zinc-100", hidden && "hidden"), children: [
     /* @__PURE__ */ jsxs32(
       PanelGroup,
       {
@@ -5675,21 +5985,146 @@ var RedisBrowser = ({ token, url }) => {
         direction: "horizontal",
         className: "h-full w-full gap-0.5 text-sm antialiased",
         children: [
-          /* @__PURE__ */ jsx45(Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ jsx45(Sidebar, {}) }),
-          /* @__PURE__ */ jsx45(PanelResizeHandle, { className: "h-fullm flex w-1.5 items-center justify-center rounded-full hover:bg-zinc-300/20", children: /* @__PURE__ */ jsx45(
-            IconDotsVertical2,
-            {
-              size: 16,
-              stroke: 1,
-              className: "pointer-events-none shrink-0 opacity-20"
-            }
-          ) }),
-          /* @__PURE__ */ jsx45(Panel, { minSize: 40, children: /* @__PURE__ */ jsx45(DataDisplay, {}) })
+          /* @__PURE__ */ jsx47(Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ jsx47(Sidebar, {}) }),
+          /* @__PURE__ */ jsx47(PanelResizeHandle, { className: "group flex h-full w-3 justify-center", children: /* @__PURE__ */ jsx47("div", { className: "h-full border-r border-dashed border-zinc-200 transition-colors group-hover:border-zinc-500" }) }),
+          /* @__PURE__ */ jsx47(Panel, { minSize: 40, children: /* @__PURE__ */ jsx47(DataDisplay, {}) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx45(Toaster, {})
-  ] }) }) }) }) });
+    /* @__PURE__ */ jsx47(Toaster, {})
+  ] }) });
+};
+
+// src/components/databrowser/components/databrowser-tabs.tsx
+import { IconPlus as IconPlus2 } from "@tabler/icons-react";
+
+// src/components/databrowser/components/tab.tsx
+import { IconSearch, IconX as IconX2 } from "@tabler/icons-react";
+
+// src/components/databrowser/components/tab-type-icon.tsx
+import { jsx as jsx48 } from "react/jsx-runtime";
+function TabTypeIcon({ selectedKey }) {
+  const { data: keyType, isLoading } = useFetchKeyType(selectedKey);
+  if (isLoading) return /* @__PURE__ */ jsx48(Skeleton, { className: "h-5 w-5 rounded" });
+  if (!keyType || keyType === "none") return;
+  return /* @__PURE__ */ jsx48(TypeTag, { variant: keyType, type: "icon" });
+}
+
+// src/hooks/use-overflow.ts
+import { useCallback as useCallback2, useEffect as useEffect12, useRef as useRef4, useState as useState12 } from "react";
+var useOverflow = () => {
+  const [isOverflow, setIsOverflow] = useState12(false);
+  const observerRef = useRef4(null);
+  const ref = useCallback2((node) => {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+    if (!node) return;
+    observerRef.current = new ResizeObserver((entries) => {
+      const el = entries.at(0)?.target;
+      if (!el) return;
+      setIsOverflow(el.scrollWidth > el.clientWidth);
+    });
+    observerRef.current.observe(node);
+  }, []);
+  useEffect12(() => {
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, []);
+  return { ref, isOverflow };
+};
+
+// src/components/databrowser/components/tab.tsx
+import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+var Tab = ({ id }) => {
+  const { active, search, selectedKey } = useTab();
+  const { selectTab, removeTab, tabs } = useDatabrowserStore();
+  const { ref, isOverflow } = useOverflow();
+  const label = search.key || selectedKey;
+  const iconNode = search.key ? /* @__PURE__ */ jsx49(IconSearch, { size: 15 }) : selectedKey ? /* @__PURE__ */ jsx49(TabTypeIcon, { selectedKey }) : void 0;
+  const tabNode = /* @__PURE__ */ jsxs33(
+    "div",
+    {
+      onClick: () => selectTab(id),
+      className: cn(
+        "flex h-9 cursor-pointer items-center gap-2 rounded-t-lg border border-zinc-200 px-3 text-[13px] transition-colors",
+        active ? "border-b-white bg-white text-zinc-900" : "bg-zinc-100 hover:bg-zinc-50"
+      ),
+      children: [
+        iconNode,
+        /* @__PURE__ */ jsx49("span", { ref, className: "max-w-32 truncate whitespace-nowrap", children: label || "New Tab" }),
+        tabs.length > 1 && /* @__PURE__ */ jsx49(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              removeTab(id);
+            },
+            className: "p-1 text-zinc-300 transition-colors hover:text-zinc-500",
+            children: /* @__PURE__ */ jsx49(IconX2, { size: 16 })
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx49(SimpleTooltip, { content: isOverflow ? label : void 0, children: tabNode });
+};
+
+// src/components/databrowser/components/databrowser-tabs.tsx
+import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
+var DatabrowserTabs = () => {
+  const { tabs, addTab } = useDatabrowserStore();
+  return /* @__PURE__ */ jsxs34("div", { className: "relative mb-2 shrink-0", children: [
+    /* @__PURE__ */ jsx50("div", { className: "absolute bottom-0 left-0 right-0 -z-10 h-[1px] w-full bg-zinc-200" }),
+    /* @__PURE__ */ jsxs34("div", { className: "scrollbar-hide flex translate-y-[1px] items-center gap-1 overflow-x-scroll pb-[1px] [&::-webkit-scrollbar]:hidden", children: [
+      tabs.map(([id]) => /* @__PURE__ */ jsx50(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx50(Tab, { id }) }, id)),
+      /* @__PURE__ */ jsx50(
+        Button,
+        {
+          variant: "secondary",
+          size: "icon-sm",
+          onClick: addTab,
+          className: "mr-1 flex-shrink-0",
+          title: "Add new tab",
+          children: /* @__PURE__ */ jsx50(IconPlus2, { className: "text-zinc-500", size: 16 })
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/databrowser/index.tsx
+import { jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
+var RedisBrowser = ({
+  token,
+  url,
+  hideTabs,
+  storage
+}) => {
+  const credentials = useMemo8(() => ({ token, url }), [token, url]);
+  useEffect13(() => {
+    queryClient.resetQueries();
+  }, [credentials.url]);
+  return /* @__PURE__ */ jsx51(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx51(RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx51(DatabrowserProvider, { storage, children: /* @__PURE__ */ jsx51(TooltipProvider, { children: /* @__PURE__ */ jsxs35(
+    "div",
+    {
+      className: "ups-db",
+      style: { height: "100%", display: "flex", flexDirection: "column" },
+      children: [
+        !hideTabs && /* @__PURE__ */ jsx51(DatabrowserTabs, {}),
+        /* @__PURE__ */ jsx51(DatabrowserInstances, {})
+      ]
+    }
+  ) }) }) }) });
+};
+var DatabrowserInstances = () => {
+  const { tabs, selectedTab, addTab } = useDatabrowserStore();
+  useEffect13(() => {
+    if (tabs.length === 0) addTab();
+  }, [tabs]);
+  return tabs.map(([id]) => /* @__PURE__ */ jsx51(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx51(DatabrowserInstance, { hidden: id !== selectedTab }) }, id));
 };
 export {
   RedisBrowser