@upstash/react-redis-browser 0.1.11 → 0.2.0

package/dist/index.js

@@ -1,13 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/databrowser/index.tsx
 var _react = require('react'); var React = _interopRequireWildcard(_react); var React2 = _interopRequireWildcard(_react); var React3 = _interopRequireWildcard(_react); var React4 = _interopRequireWildcard(_react); var React5 = _interopRequireWildcard(_react); var React6 = _interopRequireWildcard(_react); var React7 = _interopRequireWildcard(_react); var React8 = _interopRequireWildcard(_react); var React9 = _interopRequireWildcard(_react); var React10 = _interopRequireWildcard(_react); var React11 = _interopRequireWildcard(_react); var React12 = _interopRequireWildcard(_react);
 
-// src/store.tsx
+// src/redis-context.tsx
 
-var _zustand = require('zustand');
 
 // src/lib/clients.ts
 var _reactquery = require('@tanstack/react-query');
-var _redis = require('@upstash/redis');
+var _cloudflare = require('@upstash/redis/cloudflare');
 
 // src/components/ui/use-toast.ts
 
@@ -136,15 +135,16 @@ var redisClient = ({
   credentials,
   pipelining
 }) => {
-  const token = _optionalChain([credentials, 'optionalAccess', _2 => _2.token]) || process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN;
-  const url = _optionalChain([credentials, 'optionalAccess', _3 => _3.url]) || process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_URL;
+  const safeProcess = typeof process === "undefined" ? { env: {} } : process;
+  const token = _optionalChain([credentials, 'optionalAccess', _2 => _2.token]) || safeProcess.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN;
+  const url = _optionalChain([credentials, 'optionalAccess', _3 => _3.url]) || safeProcess.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_URL;
   if (!url) {
     throw new Error("Redis URL is missing!");
   }
   if (!token) {
     throw new Error("Redis TOKEN is missing!");
   }
-  const redis = new (0, _redis.Redis)({
+  const redis = new (0, _cloudflare.Redis)({
     url,
     token,
     enableAutoPipelining: pipelining,
@@ -180,19 +180,79 @@ var queryClient = new (0, _reactquery.QueryClient)({
   })
 });
 
-// src/store.tsx
+// src/redis-context.tsx
 var _jsxruntime = require('react/jsx-runtime');
+var RedisContext = _react.createContext.call(void 0, void 0);
+var RedisProvider = ({
+  children,
+  redisCredentials
+}) => {
+  const redisInstance = _react.useMemo.call(void 0, 
+    () => redisClient({ credentials: redisCredentials, pipelining: true }),
+    [redisCredentials]
+  );
+  const redisInstanceNoPipeline = _react.useMemo.call(void 0, 
+    () => redisClient({ credentials: redisCredentials, pipelining: false }),
+    [redisCredentials]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    RedisContext.Provider,
+    {
+      value: { redis: redisInstance, redisNoPipeline: redisInstanceNoPipeline },
+      children
+    }
+  );
+};
+var useRedis = () => {
+  const context = _react.useContext.call(void 0, RedisContext);
+  if (!context) {
+    throw new Error("useRedis must be used within a RedisProvider");
+  }
+  return context;
+};
+
+// src/store.tsx
+
+var _zustand = require('zustand');
+var _middleware = require('zustand/middleware');
+
 var DatabrowserContext = _react.createContext.call(void 0, void 0);
 var DatabrowserProvider = ({
   children,
-  redisCredentials
+  storage
 }) => {
-  const redisInstance = _react.useMemo.call(void 0, () => redisClient({ credentials: redisCredentials, pipelining: true }), [redisCredentials]);
-  const redisInstanceNoPipeline = _react.useMemo.call(void 0, () => redisClient({ credentials: redisCredentials, pipelining: false }), [redisCredentials]);
-  const [store] = _react.useState.call(void 0, () => {
-    return createDatabrowserStore();
-  });
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserContext.Provider, { value: { redis: redisInstance, redisNoPipeline: redisInstanceNoPipeline, store }, children });
+  const store = _react.useMemo.call(void 0, () => {
+    if (!storage) return _zustand.create.call(void 0, storeCreator);
+    return _zustand.create.call(void 0, )(
+      _middleware.persist.call(void 0, storeCreator, {
+        name: "redis-browser-data",
+        storage: {
+          getItem: () => {
+            const data = storage.get();
+            if (!data) return null;
+            try {
+              return JSON.parse(data);
+            } catch (e2) {
+              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__ */ _jsxruntime.jsx.call(void 0, DatabrowserContext.Provider, { value: { store }, children });
 };
 var useDatabrowser = () => {
   const context = _react.useContext.call(void 0, DatabrowserContext);
@@ -205,115 +265,170 @@ var useDatabrowserStore = () => {
   const { store } = useDatabrowser();
   return _zustand.useStore.call(void 0, store);
 };
-var createDatabrowserStore = () => _zustand.create.call(void 0, (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
+    }));
   },
-  selectedListItem: void 0,
-  setSelectedListItem: (item) => {
-    set((old) => ({ ...old, selectedListItem: item }));
+  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] = _nullishCoalesce(newTabs[tabIndex - 1], () => ( newTabs[tabIndex]));
+        selectedTab = newTabs.length > 0 ? newId : void 0;
+      }
+      return { tabs: newTabs, selectedTab };
+    });
   },
-  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 } }))
-}));
-
-// src/components/databrowser/index.tsx
-var _reacttooltip = require('@radix-ui/react-tooltip'); var TooltipPrimitive = _interopRequireWildcard(_reacttooltip);
-var _iconsreact = require('@tabler/icons-react');
-
-var _reactresizablepanels = require('react-resizable-panels');
+  selectTab: (id) => {
+    set({ selectedTab: id });
+  },
+  getSelectedKey: (tabId) => {
+    return _optionalChain([get, 'call', _4 => _4(), 'access', _5 => _5.tabs, 'access', _6 => _6.find, 'call', _7 => _7(([id]) => id === tabId), 'optionalAccess', _8 => _8[1], 'optionalAccess', _9 => _9.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 };
+    });
+  },
+  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 };
+    });
+  },
+  searchHistory: [],
+  addSearchHistory: (key) => {
+    set((old) => ({ ...old, searchHistory: [key, ...old.searchHistory] }));
+  }
+});
 
-// src/components/ui/toaster.tsx
-var _reactportal = require('@radix-ui/react-portal');
+// src/tab-provider.tsx
 
-// src/lib/portal-root.ts
-var root;
-if (typeof document !== "undefined") {
-  const id = "react-redis-browser-portal-root";
-  root = _nullishCoalesce(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
+var TabIdContext = _react.createContext.call(void 0, void 0);
+var TabIdProvider = ({ children, value }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabIdContext.Provider, { value, children });
+};
+var useTabId = () => {
+  const tabId = _react.useContext.call(void 0, 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 = _react.useMemo.call(void 0, () => _optionalChain([tabs, 'access', _10 => _10.find, 'call', _11 => _11(([id]) => id === tabId), 'optionalAccess', _12 => _12[1]]), [tabs, tabId]);
+  if (!selectedTab || !tabData) throw new Error("selectedTab is undefined when using useTab()");
+  return _react.useMemo.call(void 0, 
+    () => ({
+      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]
+  );
+};
 
-var _reacticons = require('@radix-ui/react-icons');
-var _reacttoast = require('@radix-ui/react-toast'); var ToastPrimitives = _interopRequireWildcard(_reacttoast);
+// src/components/databrowser/index.tsx
+var _reacttooltip = require('@radix-ui/react-tooltip'); var TooltipPrimitive = _interopRequireWildcard(_reacttooltip);
 
-// 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
+var _reactresizablepanels = require('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;
 }
 
@@ -358,15 +473,15 @@ var getGroupRecursive = (classParts, classPartObject) => {
     return void 0;
   }
   const classRest = classParts.join(CLASS_PART_SEPARATOR);
-  return _optionalChain([classPartObject, 'access', _4 => _4.validators, 'access', _5 => _5.find, 'call', _6 => _6(({
+  return _optionalChain([classPartObject, 'access', _13 => _13.validators, 'access', _14 => _14.find, 'call', _15 => _15(({
     validator
-  }) => validator(classRest)), 'optionalAccess', _7 => _7.classGroupId]);
+  }) => validator(classRest)), 'optionalAccess', _16 => _16.classGroupId]);
 };
 var arbitraryPropertyRegex = /^\[(.+)\]$/;
 var getGroupIdForArbitraryProperty = (className) => {
   if (arbitraryPropertyRegex.test(className)) {
     const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
-    const property = _optionalChain([arbitraryPropertyClassName, 'optionalAccess', _8 => _8.substring, 'call', _9 => _9(0, arbitraryPropertyClassName.indexOf(":"))]);
+    const property = _optionalChain([arbitraryPropertyClassName, 'optionalAccess', _17 => _17.substring, 'call', _18 => _18(0, arbitraryPropertyClassName.indexOf(":"))]);
     if (property) {
       return "arbitrary.." + property;
     }
@@ -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,6 +2925,83 @@ function formatTime(seconds) {
   }
   return parts.slice(0, 1).join(" ");
 }
+var isTest = typeof window !== "undefined" && window.__PLAYWRIGHT__ === true;
+
+// src/components/ui/toaster.tsx
+var _reactportal = require('@radix-ui/react-portal');
+
+// src/lib/portal-root.ts
+var root;
+if (typeof document !== "undefined") {
+  const id = "react-redis-browser-portal-root";
+  root = _nullishCoalesce(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
+
+var _reacticons = require('@radix-ui/react-icons');
+var _reacttoast = require('@radix-ui/react-toast'); var ToastPrimitives = _interopRequireWildcard(_reacttoast);
+
+// 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
 
@@ -2917,26 +3109,58 @@ function Toaster() {
 
 
 
+// src/components/databrowser/hooks/use-fetch-key-type.ts
+
+var FETCH_KEY_TYPE_QUERY_KEY = "fetch-key-type";
+var useFetchKeyType = (key) => {
+  const { redis } = useRedis();
+  return _reactquery.useQuery.call(void 0, {
+    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
+
 var KeysContext = _react.createContext.call(void 0, 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(_nullishCoalesce(SCAN_COUNTS[i], () => ( SCAN_COUNTS.at(-1))), cursor);
+      cursor = newCursor;
+      i++;
+      if (values.length > 0 || cursor === "0") {
+        return [cursor, values];
+      }
+    }
+  };
   const query = _reactquery.useInfiniteQuery.call(void 0, {
     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,
@@ -2961,7 +3188,7 @@ var KeysProvider = ({ children }) => {
     refetchOnMount: false
   });
   const keys = _react.useMemo.call(void 0, () => {
-    const keys2 = _nullishCoalesce(_optionalChain([query, 'access', _10 => _10.data, 'optionalAccess', _11 => _11.pages, 'access', _12 => _12.flatMap, 'call', _13 => _13((page) => page.keys)]), () => ( []));
+    const keys2 = _nullishCoalesce(_optionalChain([query, 'access', _19 => _19.data, 'optionalAccess', _20 => _20.pages, 'access', _21 => _21.flatMap, 'call', _22 => _22((page) => page.keys)]), () => ( []));
     const keysSet = /* @__PURE__ */ new Set();
     const dedupedKeys = [];
     for (const key of keys2) {
@@ -2992,19 +3219,19 @@ var useKeys = () => {
 var useKeyType = (key) => {
   const { keys } = useKeys();
   const keyTuple = _react.useMemo.call(void 0, () => keys.find(([k, _]) => k === key), [keys, key]);
-  return _optionalChain([keyTuple, 'optionalAccess', _14 => _14[1]]);
+  return _optionalChain([keyTuple, 'optionalAccess', _23 => _23[1]]);
 };
 
 // src/components/databrowser/components/display/display-list.tsx
 
-
+var _iconsreact = require('@tabler/icons-react');
 
 // src/components/ui/button.tsx
 
 var _reactslot = require('@radix-ui/react-slot');
 
 var buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-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: {
@@ -3061,7 +3288,7 @@ function Skeleton({ className, ...props }) {
 
 var FETCH_DB_SIZE_QUERY_KEY = "fetch-db-size";
 var DisplayDbSize = () => {
-  const { redis } = useDatabrowser();
+  const { redis } = useRedis();
   const { data: keyCount } = _reactquery.useQuery.call(void 0, {
     queryKey: [FETCH_DB_SIZE_QUERY_KEY],
     queryFn: async () => {
@@ -3079,7 +3306,7 @@ var DisplayDbSize = () => {
 
 // src/components/databrowser/hooks/use-add-key.ts
 var useAddKey = () => {
-  const { redis } = useDatabrowser();
+  const { redis } = useRedis();
   const mutation = _reactquery.useMutation.call(void 0, {
     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(
@@ -3159,16 +3386,12 @@ var useAddKey = () => {
 // src/components/databrowser/hooks/use-delete-key-cache.ts
 
 
-// src/components/databrowser/hooks/use-fetch-key-type.tsx
-
-var FETCH_KEY_TYPE_QUERY_KEY = "fetch-key-type";
-
 // src/components/databrowser/hooks/use-fetch-list-items.tsx
 
 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 = _reactquery.useInfiniteQuery.call(void 0, {
     enabled: type === "set",
     queryKey: [FETCH_LIST_ITEMS_QUERY_KEY, dataKey, "set"],
@@ -3247,7 +3470,7 @@ var useFetchListItems = ({ dataKey, type }) => {
         // +1 since first message is the last one
         LIST_DISPLAY_PAGE_SIZE + 1
       );
-      const lastMessageId = messages.length > 0 ? _optionalChain([messages, 'access', _15 => _15.at, 'call', _16 => _16(-1), 'optionalAccess', _17 => _17[0]]) : void 0;
+      const lastMessageId = messages.length > 0 ? _optionalChain([messages, 'access', _24 => _24.at, 'call', _25 => _25(-1), 'optionalAccess', _26 => _26[0]]) : void 0;
       return {
         cursor: messages.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : lastMessageId,
         keys: messages.map(([id, fields]) => ({
@@ -3283,7 +3506,7 @@ function transformArray(inputArray) {
 
 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 _reactquery.useQuery.call(void 0, {
     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 = _react.useCallback.call(void 0, 
     (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 = _reactquery.useMutation.call(void 0, {
     mutationFn: async (key) => {
@@ -3353,7 +3576,7 @@ var useDeleteKey = () => {
 // src/components/databrowser/hooks/use-edit-list-item.tsx
 
 var useEditListItem = () => {
-  const { redis } = useDatabrowser();
+  const { redis } = useRedis();
   return _reactquery.useMutation.call(void 0, {
     mutationFn: async ({
       type,
@@ -3411,7 +3634,7 @@ var useEditListItem = () => {
         }
         case "stream": {
           if (!isNew || !newKey) throw new Error("Stream data type is not mutable");
-          const opts = transformArray(_nullishCoalesce(_optionalChain([newValue, 'optionalAccess', _18 => _18.split, 'call', _19 => _19("\n")]), () => ( []))).map(
+          const opts = transformArray(_nullishCoalesce(_optionalChain([newValue, 'optionalAccess', _27 => _27.split, 'call', _28 => _28("\n")]), () => ( []))).map(
             ({ key, value }) => [key, value]
           );
           pipe.xadd(dataKey, newKey, Object.fromEntries(opts));
@@ -3446,7 +3669,7 @@ var _bytes = require('bytes'); var _bytes2 = _interopRequireDefault(_bytes);
 
 var FETCH_KEY_LENGTH_QUERY_KEY = "fetch-key-length";
 var useFetchKeyLength = ({ dataKey, type }) => {
-  const { redis } = useDatabrowser();
+  const { redis } = useRedis();
   return _reactquery.useQuery.call(void 0, {
     queryKey: [FETCH_KEY_LENGTH_QUERY_KEY, dataKey],
     queryFn: async () => {
@@ -3476,7 +3699,7 @@ var useFetchKeyLength = ({ dataKey, type }) => {
 
 var FETCH_KEY_SIZE_QUERY_KEY = "fetch-key-size";
 var useFetchKeySize = (dataKey) => {
-  const { redis } = useDatabrowser();
+  const { redis } = useRedis();
   return _reactquery.useQuery.call(void 0, {
     queryKey: [FETCH_KEY_SIZE_QUERY_KEY, dataKey],
     queryFn: async () => {
@@ -3493,7 +3716,7 @@ var LengthBadge = ({
   content
 }) => {
   const { data, isLoading } = useFetchKeyLength({ dataKey, type });
-  const length = _nullishCoalesce(_optionalChain([content, 'optionalAccess', _20 => _20.length]), () => ( data));
+  const length = _nullishCoalesce(_optionalChain([content, 'optionalAccess', _29 => _29.length]), () => ( data));
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Badge, { label: "Length:", children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : length });
 };
 var SizeBadge = ({ dataKey }) => {
@@ -3503,7 +3726,7 @@ var SizeBadge = ({ dataKey }) => {
   }) });
 };
 var HeaderTTLBadge = ({ dataKey }) => {
-  const { data: expireAt } = useFetchKeyExpire(dataKey);
+  const { data: expireAt } = useFetchTTL(dataKey);
   const { mutate: setTTL, isPending } = useSetTTL();
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     TTLBadge,
@@ -3853,8 +4076,8 @@ var TTLBadge = ({
 
 // 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 } = _reactquery.useQuery.call(void 0, {
     queryKey: [FETCH_TTL_QUERY_KEY, dataKey],
     queryFn: async () => {
@@ -3875,7 +4098,7 @@ var useFetchKeyExpire = (dataKey) => {
 // src/components/databrowser/hooks/use-set-simple-key.tsx
 
 var useSetSimpleKey = (dataKey, type) => {
-  const { redis } = useDatabrowser();
+  const { redis } = useRedis();
   return _reactquery.useMutation.call(void 0, {
     mutationFn: async (value) => {
       if (type === "string") {
@@ -3898,7 +4121,7 @@ var useSetSimpleKey = (dataKey, type) => {
 // src/components/databrowser/hooks/use-set-ttl.ts
 
 var useSetTTL = () => {
-  const { redis } = useDatabrowser();
+  const { redis } = useRedis();
   const updateTTL = _reactquery.useMutation.call(void 0, {
     mutationFn: async ({ dataKey, ttl }) => {
       await (ttl === void 0 || ttl === TTL_INFINITE ? redis.persist(dataKey) : redis.expire(dataKey, ttl));
@@ -4184,7 +4407,7 @@ var ItemContextMenu = ({
             editItem({
               type,
               dataKey,
-              itemKey: _optionalChain([data, 'optionalAccess', _21 => _21.key]),
+              itemKey: _optionalChain([data, 'optionalAccess', _30 => _30.key]),
               // For deletion
               newKey: void 0
             });
@@ -4219,7 +4442,7 @@ var ItemContextMenu = ({
           {
             onClick: () => {
               if (!data) return;
-              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _22 => _22.key]));
+              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _31 => _31.key]));
               toast({
                 description: "Key copied to clipboard"
               });
@@ -4227,11 +4450,11 @@ var ItemContextMenu = ({
             children: "Copy key"
           }
         ),
-        _optionalChain([data, 'optionalAccess', _23 => _23.value]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _optionalChain([data, 'optionalAccess', _32 => _32.value]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           ContextMenuItem,
           {
             onClick: () => {
-              navigator.clipboard.writeText(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _24 => _24.value]), () => ( "")));
+              navigator.clipboard.writeText(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _33 => _33.value]), () => ( "")));
               toast({
                 description: "Value copied to clipboard"
               });
@@ -4254,7 +4477,7 @@ var ItemContextMenu = ({
 
 var _reactscrollarea = require('@radix-ui/react-scroll-area'); var ScrollAreaPrimitive = _interopRequireWildcard(_reactscrollarea);
 
-var ScrollArea = React9.forwardRef(({ className, children, onScroll, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+var ScrollArea = React9.forwardRef(({ className, children, onScroll, disableRoundedInherit = false, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
   ScrollAreaPrimitive.Root,
   {
     ref,
@@ -4265,7 +4488,7 @@ var ScrollArea = React9.forwardRef(({ className, children, onScroll, ...props },
         ScrollAreaPrimitive.Viewport,
         {
           onScroll,
-          className: "h-full w-full rounded-[inherit] [&>div]:!block",
+          className: cn("h-full w-full [&>div]:!block", !disableRoundedInherit && "rounded-[inherit]"),
           children
         }
       ),
@@ -4296,8 +4519,10 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 var InfiniteScroll = ({
   query,
-  children
+  children,
+  ...props
 }) => {
+  const { active } = useTab();
   const scrollRef = _react.useRef.call(void 0, null);
   const contentRef = _react.useRef.call(void 0, null);
   const handleScroll = (e) => {
@@ -4319,15 +4544,20 @@ var InfiniteScroll = ({
     }
   };
   _react.useEffect.call(void 0, () => {
+    if (!active) return;
     const timer = setTimeout(checkAndFetchMore, 100);
     return () => clearTimeout(timer);
-  }, [query.data]);
+  }, [active, query.data]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     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__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: contentRef, children: [
         children,
@@ -4411,14 +4641,14 @@ 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__ */ _jsxruntime.jsx.call(void 0, _reacticons.ChevronRightIcon, { className: "ml-auto size-4" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.ChevronRightIcon, { className: "ml-auto" })
     ]
   }
 ));
@@ -4428,7 +4658,7 @@ var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) =
   {
     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
@@ -4441,8 +4671,8 @@ var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...pr
     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
@@ -4473,7 +4703,7 @@ var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checke
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.CheckIcon, { className: "size-4" }) }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.CheckIcon, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
@@ -4489,7 +4719,7 @@ var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props
     ),
     ...props,
     children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.DotFilledIcon, { className: "size-4 fill-current" }) }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.DotFilledIcon, { className: "h-2 w-2 fill-current" }) }) }),
       children
     ]
   }
@@ -4522,8 +4752,8 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 function KeyActions({ dataKey, content }) {
   const { mutateAsync: deleteKey } = useDeleteKey();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DropdownMenu, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "icon-sm", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconDotsVertical, { className: "size-4 text-zinc-500" }) }) }),
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DropdownMenu, { modal: false, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "icon-sm", "aria-label": "Key actions", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconDotsVertical, { className: "size-4 text-zinc-500" }) }) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DropdownMenuContent, { className: "", align: "end", children: [
       content && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         DropdownMenuItem,
@@ -4537,12 +4767,28 @@ function KeyActions({ dataKey, content }) {
           children: "Copy content"
         }
       ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        DropdownMenuItem,
+        {
+          onClick: () => {
+            navigator.clipboard.writeText(dataKey);
+          },
+          children: "Copy key"
+        }
+      ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         DeleteAlertDialog,
         {
           deletionType: "key",
           onDeleteConfirm: async () => await deleteKey(dataKey),
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" })
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            DropdownMenuItem,
+            {
+              className: "text-red-500 focus:bg-red-500 focus:text-white",
+              onSelect: (e) => e.preventDefault(),
+              children: "Delete key"
+            }
+          )
         }
       )
     ] })
@@ -4556,15 +4802,15 @@ var DisplayHeader = ({
   type,
   content
 }) => {
-  const { setSelectedListItem } = useDatabrowserStore();
+  const { setSelectedListItem } = useTab();
   const handleAddItem = () => {
     setSelectedListItem({ key: type === "stream" ? "*" : "", isNew: true });
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-lg bg-zinc-100", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-h-10 items-center justify-between gap-4", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "grow truncate text-base", children: dataKey.trim() === "" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ml-1 text-zinc-500", children: "(Empty Key)" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-semibold", children: dataKey }) }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1", children: [
-        type !== "string" && type !== "json" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { onClick: handleAddItem, size: "icon-sm", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "size-4 text-zinc-500" }) }),
+        type !== "string" && type !== "json" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { onClick: handleAddItem, size: "icon-sm", "aria-label": "Add item", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "size-4 text-zinc-500" }) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyActions, { dataKey, content })
       ] })
     ] }),
@@ -4586,7 +4832,7 @@ var DisplayHeader = ({
 
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
   TooltipPrimitive.Content,
   {
     ref,
@@ -4597,7 +4843,7 @@ var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }
     ),
     ...props
   }
-));
+) }));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 var SimpleTooltip = ({
   content,
@@ -4606,7 +4852,7 @@ var SimpleTooltip = ({
   if (!content) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Tooltip, { delayDuration: 400, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipContent, { children: content })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipContent, { side: "top", children: content })
   ] });
 };
 
@@ -4617,7 +4863,7 @@ var useFetchHashFieldExpires = ({
   dataKey,
   fields
 }) => {
-  const { redis } = useDatabrowser();
+  const { redis } = useRedis();
   return _reactquery.useQuery.call(void 0, {
     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
 
 var useSetHashTTL = () => {
-  const { redis } = useDatabrowser();
+  const { redis } = useRedis();
   return _reactquery.useMutation.call(void 0, {
     mutationFn: async ({
       dataKey,
@@ -4670,7 +4916,7 @@ var useSetHashTTL = () => {
 var HashFieldTTLBadge = ({ dataKey, field }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields: [field] });
   const { mutate: setTTL, isPending } = useSetHashTTL();
-  const expireAt = _optionalChain([data, 'optionalAccess', _25 => _25[field]]);
+  const expireAt = _optionalChain([data, 'optionalAccess', _34 => _34[field]]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     TTLBadge,
     {
@@ -4753,63 +4999,59 @@ var CustomEditor = ({
   showCopyButton,
   readOnly
 }) => {
+  const { active } = useTab();
   const monaco = _react2.useMonaco.call(void 0, );
   const editorRef = _react.useRef.call(void 0, );
   _react.useEffect.call(void 0, () => {
-    if (!monaco || !editorRef.current) {
+    if (!active || !monaco || !editorRef.current) {
       return;
     }
-    _optionalChain([monaco, 'optionalAccess', _26 => _26.editor, 'access', _27 => _27.setModelLanguage, 'call', _28 => _28(editorRef.current.getModel(), language)]);
-  }, [monaco, language]);
+    _optionalChain([monaco, 'optionalAccess', _35 => _35.editor, 'access', _36 => _36.setModelLanguage, 'call', _37 => _37(editorRef.current.getModel(), language)]);
+  }, [monaco, language, active]);
+  const editor = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _react2.Editor,
+    {
+      loading: void 0,
+      onMount: (editor2) => {
+        editorRef.current = editor2;
+      },
+      value,
+      onChange: (value2) => {
+        onChange(_nullishCoalesce(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__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
       className: cn("group/editor relative", height === void 0 && "h-full p-2"),
-      style: {
-        height
-      },
+      style: { height },
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _react2.Editor,
-          {
-            loading: void 0,
-            onMount: (editor) => {
-              editorRef.current = editor;
-            },
-            value,
-            onChange: (value2) => {
-              onChange(_nullishCoalesce(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"
-            }
-          }
-        ),
+        isTest ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { "aria-label": "editor", value, onChange: (e) => onChange(e.target.value) }) : editor,
         showCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           CopyButton,
           {
@@ -4882,7 +5124,7 @@ var checkIsValidJSON = (value) => {
   try {
     JSON.parse(value);
     return true;
-  } catch (e2) {
+  } catch (e3) {
     return false;
   }
 };
@@ -4894,7 +5136,7 @@ var ListEditDisplay = ({
   type,
   item
 }) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "grow rounded-md bg-zinc-100 p-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListEditForm, { item, type, dataKey }, item.key) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "grow rounded-md bg-zinc-100", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListEditForm, { item, type, dataKey }, item.key) });
 };
 var ListEditForm = ({
   type,
@@ -4906,7 +5148,7 @@ var ListEditForm = ({
     dataKey
   });
   const findValue = () => {
-    for (const page of _nullishCoalesce(_optionalChain([query, 'access', _29 => _29.data, 'optionalAccess', _30 => _30.pages]), () => ( []))) {
+    for (const page of _nullishCoalesce(_optionalChain([query, 'access', _38 => _38.data, 'optionalAccess', _39 => _39.pages]), () => ( []))) {
       const item = page.keys.find((item2) => item2.key === itemKey);
       if (item && "value" in item) return item.value;
     }
@@ -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({
@@ -5052,7 +5294,7 @@ var HashFieldTTLInfo = ({
   fields
 }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields });
-  const expireAt = _optionalChain([data, 'optionalAccess', _31 => _31[field]]);
+  const expireAt = _optionalChain([data, 'optionalAccess', _40 => _40[field]]);
   const [ttl, setTTL] = _react.useState.call(void 0, () => calculateTTL(expireAt));
   _react.useEffect.call(void 0, () => {
     setTTL(calculateTTL(expireAt));
@@ -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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayHeader, { dataKey, type }),
     selectedListItem && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListEditDisplay, { dataKey, type, item: selectedListItem }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("min-h-0 grow", selectedListItem && "hidden"), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfiniteScroll, { query, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pr-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "table", { className: "w-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ItemContextMenu, { dataKey, type, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListItems, { dataKey, type, query }) }) }) }) }) }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("min-h-0 grow", selectedListItem && "hidden"), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfiniteScroll, { query, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "table", { className: "w-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ItemContextMenu, { dataKey, type, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListItems, { dataKey, type, query }) }) }) }) }) })
   ] });
 };
 var ListItems = ({
@@ -5088,8 +5330,8 @@ var ListItems = ({
   type,
   dataKey
 }) => {
-  const { setSelectedListItem } = useDatabrowserStore();
-  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _32 => _32.data, 'optionalAccess', _33 => _33.pages, 'access', _34 => _34.flatMap, 'call', _35 => _35((page) => page.keys)]), () => ( [])), [query.data]);
+  const { setSelectedListItem } = useTab();
+  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _41 => _41.data, 'optionalAccess', _42 => _42.pages, 'access', _43 => _43.flatMap, 'call', _44 => _44((page) => page.keys)]), () => ( [])), [query.data]);
   const fields = _react.useMemo.call(void 0, () => keys.map((key) => key.key), [keys]);
   const { mutate: editItem } = useEditListItem();
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -5100,7 +5342,7 @@ 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__ */ _jsxruntime.jsx.call(void 0, 
           "td",
@@ -5171,13 +5413,7 @@ var EditorDisplay = ({ dataKey, type }) => {
   const { data } = useFetchSimpleKey(dataKey, type);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full w-full flex-col gap-2", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayHeader, { dataKey, type, content: _nullishCoalesce(data, () => ( void 0)) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "div",
-      {
-        className: "flex h-full grow flex-col gap-2\n      rounded-md bg-zinc-100 p-3",
-        children: data === void 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoadingText: "", isLoading: true }) : data === null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplayForm, { dataKey, type, data }, dataKey)
-      }
-    )
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full grow flex-col gap-2 rounded-md bg-zinc-100", children: data === void 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoadingText: "", isLoading: true }) : data === null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplayForm, { dataKey, type, data }, dataKey) })
   ] });
 };
 var EditorDisplayForm = ({
@@ -5221,10 +5457,10 @@ var EditorDisplayForm = ({
 // src/components/databrowser/components/display/index.tsx
 
 var DataDisplay = () => {
-  const { selectedKey } = useDatabrowserStore();
+  const { selectedKey } = useTab();
   const { query } = useKeys();
   const type = useKeyType(selectedKey);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full rounded-xl border bg-white p-1", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? query.isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: type === "string" || type === "json" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full p-4", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? query.isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: type === "string" || type === "json" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
 };
 
 // src/components/databrowser/components/sidebar/index.tsx
@@ -5340,7 +5576,7 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
 // src/components/databrowser/components/add-key-modal.tsx
 
 function AddKeyModal() {
-  const { setSelectedKey } = useDatabrowserStore();
+  const { setSelectedKey } = useTab();
   const [open, setOpen] = _react.useState.call(void 0, false);
   const { mutateAsync: addKey, isPending } = useAddKey();
   const { control, handleSubmit, formState, reset } = _reacthookform.useForm.call(void 0, {
@@ -5354,7 +5590,7 @@ function AddKeyModal() {
     setSelectedKey(key);
     setOpen(false);
     setTimeout(() => {
-      _optionalChain([window, 'access', _36 => _36.document, 'access', _37 => _37.querySelector, 'call', _38 => _38(`[data-key="${key}"]`), 'optionalAccess', _39 => _39.scrollIntoView, 'call', _40 => _40({
+      _optionalChain([window, 'access', _45 => _45.document, 'access', _46 => _46.querySelector, 'call', _47 => _47(`[data-key="${key}"]`), 'optionalAccess', _48 => _48.scrollIntoView, 'call', _49 => _49({
         behavior: "smooth",
         block: "start",
         inline: "nearest"
@@ -5370,7 +5606,7 @@ function AddKeyModal() {
         setOpen(open2);
       },
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "primary", size: "icon-sm", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.PlusIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "primary", size: "icon-sm", "aria-label": "Add key", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.PlusIcon, { className: "size-4" }) }) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogContent, { className: "max-w-[400px]", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTitle, { children: "Create new key" }) }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "sr-only", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactdialog.DialogDescription, { children: "Create new key" }) }),
@@ -5399,7 +5635,7 @@ function AddKeyModal() {
                 }
               )
             ] }),
-            formState.errors.key && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-3 mt-2 text-xs text-red-500", children: _optionalChain([formState, 'access', _41 => _41.errors, 'access', _42 => _42.key, 'optionalAccess', _43 => _43.message]) }),
+            formState.errors.key && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-3 mt-2 text-xs text-red-500", children: _optionalChain([formState, 'access', _50 => _50.errors, 'access', _51 => _51.key, 'optionalAccess', _52 => _52.message]) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-2 text-xs text-zinc-500", children: "After creating the key, you can edit the value" }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-6 flex justify-end gap-2", children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5425,7 +5661,7 @@ function AddKeyModal() {
 // src/components/databrowser/components/sidebar/empty.tsx
 
 var Empty = () => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full w-full items-center justify-center rounded-md border border-dashed px-4 py-6 text-center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-5", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full w-full items-center justify-center rounded-md border bg-white px-4 py-6 text-center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-5", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-md font-medium", children: "Data on a break" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-balance text-center", children: '"Quick, lure it back with some CLI magic!"' })
   ] }) });
@@ -5493,7 +5729,7 @@ var SidebarContextMenu = ({ children }) => {
 
 var KeysList = () => {
   const { keys } = useKeys();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pr-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarContextMenu, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyItem, { nextKey: _nullishCoalesce(_optionalChain([keys, 'access', _44 => _44.at, 'call', _45 => _45(i + 1), 'optionalAccess', _46 => _46[0]]), () => ( "")), data }, data[0])) }) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarContextMenu, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyItem, { nextKey: _nullishCoalesce(_optionalChain([keys, 'access', _53 => _53.at, 'call', _54 => _54(i + 1), 'optionalAccess', _55 => _55[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,7 +5751,7 @@ 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]
@@ -5534,30 +5770,106 @@ var KeyItem = ({ data, nextKey }) => {
 
 
 
+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 { setSearchKey, search } = useTab();
+  const { searchHistory, addSearchHistory } = useDatabrowserStore();
   const [state, setState] = _react.useState.call(void 0, search.key);
-  const submit = (value) => {
+  const [isFocus, setIsFocus] = _react.useState.call(void 0, false);
+  const [focusedIndex, setFocusedIndex] = _react.useState.call(void 0, -1);
+  const inputRef = _react.useRef.call(void 0, null);
+  const historyItemRefs = _react.useRef.call(void 0, []);
+  const handleSubmit = (value) => {
     if (value.trim() !== "" && !value.includes("*")) value = `${value}*`;
+    addSearchHistory(value);
     setSearchKey(value);
     setState(value);
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative grow", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      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);
+  _react.useEffect.call(void 0, () => {
+    setFocusedIndex(-1);
+  }, [filteredHistory.length]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      const text = focusedIndex >= 0 && focusedIndex < filteredHistory.length ? filteredHistory[focusedIndex] : e.currentTarget.value;
+      handleSubmit(text);
+    } else if (e.key === "Escape") {
+      setState("");
+      setFocusedIndex(-1);
+      _optionalChain([inputRef, 'access', _56 => _56.current, 'optionalAccess', _57 => _57.blur, 'call', _58 => _58()]);
+    } else if (e.key === "ArrowDown" || e.key === "Tab" && !e.shiftKey) {
+      e.preventDefault();
+      if (focusedIndex < filteredHistory.length - 1) {
+        setFocusedIndex(focusedIndex + 1);
+      } else if (filteredHistory.length > 0) {
+        setFocusedIndex(0);
       }
-    ),
+    } else if (e.key === "ArrowUp" || e.key === "Tab" && e.shiftKey) {
+      e.preventDefault();
+      if (focusedIndex > 0) {
+        setFocusedIndex(focusedIndex - 1);
+      } else if (filteredHistory.length > 0 && focusedIndex === 0) {
+        setFocusedIndex(-1);
+        _optionalChain([inputRef, 'access', _59 => _59.current, 'optionalAccess', _60 => _60.focus, 'call', _61 => _61()]);
+      } else if (filteredHistory.length > 0) {
+        setFocusedIndex(filteredHistory.length - 1);
+      }
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative grow", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Popover, { open: isFocus && filteredHistory.length > 0, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        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__ */ _jsxruntime.jsx.call(void 0, 
+        PopoverContent,
+        {
+          className: "w-[--radix-popover-trigger-width] divide-y px-3 py-2 text-[13px] text-zinc-900",
+          autoFocus: false,
+          onOpenAutoFocus: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          children: filteredHistory.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-full py-[3px]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              ref: (el) => {
+                historyItemRefs.current[index] = el;
+              },
+              onClick: () => handleSubmit(item),
+              onMouseEnter: () => setFocusedIndex(index),
+              className: `block w-full truncate rounded-sm p-1 text-left transition-colors ${focusedIndex === index ? "bg-zinc-100" : "hover:bg-zinc-100"}`,
+              children: item
+            }
+          ) }, item))
+        }
+      )
+    ] }),
     state && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       Button,
       {
@@ -5574,14 +5886,15 @@ var SearchInput = () => {
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Clear" })
         ]
       }
-    )
+    ),
+    " "
   ] });
 };
 
 // src/components/databrowser/components/sidebar/skeleton-buttons.tsx
 
 var DEFAULT_SKELETON_COUNT = 6;
-var LoadingSkeleton = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "grid", children: Array.from({ length: DEFAULT_SKELETON_COUNT }).fill(0).map((_, idx) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center gap-2 px-3", children: [
+var LoadingSkeleton = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "block h-full w-full rounded-lg border border-zinc-200 bg-white p-1 pr-3 transition-all", children: Array.from({ length: DEFAULT_SKELETON_COUNT }).fill(0).map((_, idx) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center gap-2 px-3", children: [
   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "size-5 shrink-0 rounded" }),
   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "h-4 grow rounded" })
 ] }, idx)) });
@@ -5590,7 +5903,7 @@ var LoadingSkeleton = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div",
 
 var ALL_TYPES_KEY = "all";
 function DataTypeSelector() {
-  const { search, setSearchType } = useDatabrowserStore();
+  const { search, setSearchType } = useTab();
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     Select,
     {
@@ -5616,14 +5929,15 @@ function DataTypeSelector() {
 
 function Sidebar() {
   const { keys, query } = useKeys();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2 rounded-xl border bg-white p-1", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2 p-4", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-lg bg-zinc-100", children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center justify-between pl-1", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayDbSize, {}),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-1", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             Button,
             {
+              "aria-label": "Refresh",
               className: "h-7 w-7 px-0",
               onClick: () => {
                 queryClient.invalidateQueries({
@@ -5655,19 +5969,15 @@ function Sidebar() {
     ] }),
     query.isLoading && keys.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingSkeleton, {}) : keys.length > 0 ? (
       // Infinite scroll already has a loader at the bottom
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfiniteScroll, { query, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysList, {}) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfiniteScroll, { query, disableRoundedInherit: true, className: "min-h-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysList, {}) })
     ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Empty, {})
   ] });
 }
 
-// src/components/databrowser/index.tsx
+// src/components/databrowser/components/databrowser-instance.tsx
 
-var RedisBrowser = ({ token, url }) => {
-  const credentials = _react.useMemo.call(void 0, () => ({ token, url }), [token, url]);
-  _react.useEffect.call(void 0, () => {
-    queryClient.resetQueries();
-  }, [credentials.url]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ups-db", style: { height: "100%" }, children: [
+var DatabrowserInstance = ({ hidden }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("min-h-0 grow rounded-md bg-zinc-100", hidden && "hidden"), children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       _reactresizablepanels.PanelGroup,
       {
@@ -5676,20 +5986,145 @@ var RedisBrowser = ({ token, url }) => {
         className: "h-full w-full gap-0.5 text-sm antialiased",
         children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Sidebar, {}) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.PanelResizeHandle, { className: "h-fullm flex w-1.5 items-center justify-center rounded-full hover:bg-zinc-300/20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _iconsreact.IconDotsVertical,
-            {
-              size: 16,
-              stroke: 1,
-              className: "pointer-events-none shrink-0 opacity-20"
-            }
-          ) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.PanelResizeHandle, { className: "group flex h-full w-3 justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full border-r border-dashed border-zinc-200 transition-colors group-hover:border-zinc-500" }) }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.Panel, { minSize: 40, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataDisplay, {}) })
         ]
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Toaster, {})
-  ] }) }) }) }) });
+  ] }) });
+};
+
+// src/components/databrowser/components/databrowser-tabs.tsx
+
+
+// src/components/databrowser/components/tab.tsx
+
+
+// src/components/databrowser/components/tab-type-icon.tsx
+
+function TabTypeIcon({ selectedKey }) {
+  const { data: keyType, isLoading } = useFetchKeyType(selectedKey);
+  if (isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "h-5 w-5 rounded" });
+  if (!keyType || keyType === "none") return;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: keyType, type: "icon" });
+}
+
+// src/hooks/use-overflow.ts
+
+var useOverflow = () => {
+  const [isOverflow, setIsOverflow] = _react.useState.call(void 0, false);
+  const observerRef = _react.useRef.call(void 0, null);
+  const ref = _react.useCallback.call(void 0, (node) => {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+    if (!node) return;
+    observerRef.current = new ResizeObserver((entries) => {
+      const el = _optionalChain([entries, 'access', _62 => _62.at, 'call', _63 => _63(0), 'optionalAccess', _64 => _64.target]);
+      if (!el) return;
+      setIsOverflow(el.scrollWidth > el.clientWidth);
+    });
+    observerRef.current.observe(node);
+  }, []);
+  _react.useEffect.call(void 0, () => {
+    return () => {
+      _optionalChain([observerRef, 'access', _65 => _65.current, 'optionalAccess', _66 => _66.disconnect, 'call', _67 => _67()]);
+    };
+  }, []);
+  return { ref, isOverflow };
+};
+
+// src/components/databrowser/components/tab.tsx
+
+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__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { size: 15 }) : selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabTypeIcon, { selectedKey }) : void 0;
+  const tabNode = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      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__ */ _jsxruntime.jsx.call(void 0, "span", { ref, className: "max-w-32 truncate whitespace-nowrap", children: label || "New Tab" }),
+        tabs.length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              removeTab(id);
+            },
+            className: "p-1 text-zinc-300 transition-colors hover:text-zinc-500",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconX, { size: 16 })
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: isOverflow ? label : void 0, children: tabNode });
+};
+
+// src/components/databrowser/components/databrowser-tabs.tsx
+
+var DatabrowserTabs = () => {
+  const { tabs, addTab } = useDatabrowserStore();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative mb-2 shrink-0", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute bottom-0 left-0 right-0 -z-10 h-[1px] w-full bg-zinc-200" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "scrollbar-hide flex translate-y-[1px] items-center gap-1 overflow-x-scroll pb-[1px] [&::-webkit-scrollbar]:hidden", children: [
+      tabs.map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabIdProvider, { value: id, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Tab, { id }) }, id)),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        Button,
+        {
+          variant: "secondary",
+          size: "icon-sm",
+          onClick: addTab,
+          className: "mr-1 flex-shrink-0",
+          title: "Add new tab",
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "text-zinc-500", size: 16 })
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/databrowser/index.tsx
+
+var RedisBrowser = ({
+  token,
+  url,
+  hideTabs,
+  storage
+}) => {
+  const credentials = _react.useMemo.call(void 0, () => ({ token, url }), [token, url]);
+  _react.useEffect.call(void 0, () => {
+    queryClient.resetQueries();
+  }, [credentials.url]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { storage, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: "ups-db",
+      style: { height: "100%", display: "flex", flexDirection: "column" },
+      children: [
+        !hideTabs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserTabs, {}),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserInstances, {})
+      ]
+    }
+  ) }) }) }) });
+};
+var DatabrowserInstances = () => {
+  const { tabs, selectedTab, addTab } = useDatabrowserStore();
+  _react.useEffect.call(void 0, () => {
+    if (tabs.length === 0) addTab();
+  }, [tabs]);
+  return tabs.map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabIdProvider, { value: id, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserInstance, { hidden: id !== selectedTab }) }, id));
 };