@upstash/react-redis-browser 0.1.11-canary-2 → 0.2.0

package/dist/index.js

@@ -1,101 +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
-
-var _zustand = require('zustand');
-var _jsxruntime = require('react/jsx-runtime');
-var DatabrowserContext = _react.createContext.call(void 0, void 0);
-var DatabrowserProvider = ({ children }) => {
-  const store = _react.useMemo.call(void 0, () => createDatabrowserStore(), []);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserContext.Provider, { value: { store }, children });
-};
-var useDatabrowser = () => {
-  const context = _react.useContext.call(void 0, DatabrowserContext);
-  if (!context) {
-    throw new Error("useDatabrowser must be used within a DatabrowserProvider");
-  }
-  return context;
-};
-var useDatabrowserStore = () => {
-  const { store } = useDatabrowser();
-  return _zustand.useStore.call(void 0, store);
-};
-var createDatabrowserStore = () => _zustand.create.call(void 0, (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: old.selectedTab === void 0 ? id : old.selectedTab
-    }));
-  },
-  removeTab: (id) => {
-    set((old) => {
-      const newTabs = { ...old.tabs };
-      delete newTabs[id];
-      let selectedTab = old.selectedTab;
-      if (selectedTab === id) {
-        const tabIds = Object.keys(newTabs);
-        selectedTab = tabIds.length > 0 ? tabIds[0] : void 0;
-      }
-      return { tabs: newTabs, selectedTab };
-    });
-  },
-  selectTab: (id) => {
-    set({ selectedTab: id });
-  },
-  getSelectedKey: (tabId) => {
-    return _optionalChain([get, 'call', _2 => _2(), 'access', _3 => _3.tabs, 'access', _4 => _4[tabId], 'optionalAccess', _5 => _5.selectedKey]);
-  },
-  setSelectedKey: (tabId, key) => {
-    set((old) => ({
-      ...old,
-      tabs: {
-        ...old.tabs,
-        [tabId]: { ...old.tabs[tabId], selectedKey: key, selectedListItem: void 0 }
-      }
-    }));
-  },
-  setSelectedListItem: (tabId, item) => {
-    set((old) => ({
-      ...old,
-      tabs: { ...old.tabs, [tabId]: { ...old.tabs[tabId], selectedListItem: item } }
-    }));
-  },
-  setSearch: (tabId, search) => set((old) => ({ ...old, tabs: { ...old.tabs, [tabId]: { ...old.tabs[tabId], search } } })),
-  setSearchKey: (tabId, key) => set((old) => ({
-    ...old,
-    tabs: {
-      ...old.tabs,
-      [tabId]: { ...old.tabs[tabId], search: { ...old.tabs[tabId].search, key } }
-    }
-  })),
-  setSearchType: (tabId, type) => set((old) => ({
-    ...old,
-    tabs: {
-      ...old.tabs,
-      [tabId]: { ...old.tabs[tabId], search: { ...old.tabs[tabId].search, type } }
-    }
-  })),
-  searchHistory: [],
-  addSearchHistory: (key) => {
-    set((old) => ({ ...old, searchHistory: [key, ...old.searchHistory] }));
-  }
-}));
+// src/redis-context.tsx
 
-// src/components/databrowser/index.tsx
-var _reacttooltip = require('@radix-ui/react-tooltip'); var TooltipPrimitive = _interopRequireWildcard(_reacttooltip);
-var _reactquery = require('@tanstack/react-query');
 
 // src/lib/clients.ts
-
-var _redis = require('@upstash/redis');
+var _reactquery = require('@tanstack/react-query');
+var _cloudflare = require('@upstash/redis/cloudflare');
 
 // src/components/ui/use-toast.ts
 
@@ -224,15 +135,16 @@ var redisClient = ({
   credentials,
   pipelining
 }) => {
-  const token = _optionalChain([credentials, 'optionalAccess', _6 => _6.token]) || process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN;
-  const url = _optionalChain([credentials, 'optionalAccess', _7 => _7.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,
@@ -269,8 +181,7 @@ var queryClient = new (0, _reactquery.QueryClient)({
 });
 
 // src/redis-context.tsx
-
-
+var _jsxruntime = require('react/jsx-runtime');
 var RedisContext = _react.createContext.call(void 0, void 0);
 var RedisProvider = ({
   children,
@@ -300,6 +211,209 @@ var useRedis = () => {
   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,
+  storage
+}) => {
+  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);
+  if (!context) {
+    throw new Error("useDatabrowser must be used within a DatabrowserProvider");
+  }
+  return context;
+};
+var useDatabrowserStore = () => {
+  const { store } = useDatabrowser();
+  return _zustand.useStore.call(void 0, store);
+};
+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] = _nullishCoalesce(newTabs[tabIndex - 1], () => ( newTabs[tabIndex]));
+        selectedTab = newTabs.length > 0 ? newId : void 0;
+      }
+      return { tabs: newTabs, selectedTab };
+    });
+  },
+  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/tab-provider.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]
+  );
+};
+
+// src/components/databrowser/index.tsx
+var _reacttooltip = require('@radix-ui/react-tooltip'); var TooltipPrimitive = _interopRequireWildcard(_reacttooltip);
+
+
 // src/components/databrowser/components/databrowser-instance.tsx
 var _reactresizablepanels = require('react-resizable-panels');
 
@@ -359,15 +473,15 @@ var getGroupRecursive = (classParts, classPartObject) => {
     return void 0;
   }
   const classRest = classParts.join(CLASS_PART_SEPARATOR);
-  return _optionalChain([classPartObject, 'access', _8 => _8.validators, 'access', _9 => _9.find, 'call', _10 => _10(({
+  return _optionalChain([classPartObject, 'access', _13 => _13.validators, 'access', _14 => _14.find, 'call', _15 => _15(({
     validator
-  }) => validator(classRest)), 'optionalAccess', _11 => _11.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', _12 => _12.substring, 'call', _13 => _13(0, arbitraryPropertyClassName.indexOf(":"))]);
+    const property = _optionalChain([arbitraryPropertyClassName, 'optionalAccess', _17 => _17.substring, 'call', _18 => _18(0, arbitraryPropertyClassName.indexOf(":"))]);
     if (property) {
       return "arbitrary.." + property;
     }
@@ -2811,6 +2925,7 @@ 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');
@@ -2994,39 +3109,6 @@ function Toaster() {
 
 
 
-// src/tab-provider.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 useTab = () => {
-  const {
-    selectedTab,
-    tabs,
-    setSelectedKey,
-    setSelectedListItem,
-    setSearch,
-    setSearchKey,
-    setSearchType
-  } = useDatabrowserStore();
-  if (!selectedTab) throw new Error("selectedTab is undefined when using useTab()");
-  return _react.useMemo.call(void 0, 
-    () => ({
-      selectedKey: _optionalChain([tabs, 'access', _14 => _14[selectedTab], 'optionalAccess', _15 => _15.selectedKey]),
-      selectedListItem: _optionalChain([tabs, 'access', _16 => _16[selectedTab], 'optionalAccess', _17 => _17.selectedListItem]),
-      search: _optionalChain([tabs, 'access', _18 => _18[selectedTab], 'optionalAccess', _19 => _19.search]),
-      setSelectedKey: (key) => setSelectedKey(selectedTab, key),
-      setSelectedListItem: (item) => setSelectedListItem(selectedTab, item),
-      setSearch: (search) => setSearch(selectedTab, search),
-      setSearchKey: (key) => setSearchKey(selectedTab, key),
-      setSearchType: (type) => setSearchType(selectedTab, type)
-    }),
-    [selectedTab, tabs]
-  );
-};
-
 // src/components/databrowser/hooks/use-fetch-key-type.ts
 
 var FETCH_KEY_TYPE_QUERY_KEY = "fetch-key-type";
@@ -3045,24 +3127,40 @@ var useFetchKeyType = (key) => {
 
 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 } = useTab();
+  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) {
@@ -3090,7 +3188,7 @@ var KeysProvider = ({ children }) => {
     refetchOnMount: false
   });
   const keys = _react.useMemo.call(void 0, () => {
-    const keys2 = _nullishCoalesce(_optionalChain([query, 'access', _20 => _20.data, 'optionalAccess', _21 => _21.pages, 'access', _22 => _22.flatMap, 'call', _23 => _23((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) {
@@ -3121,7 +3219,7 @@ var useKeys = () => {
 var useKeyType = (key) => {
   const { keys } = useKeys();
   const keyTuple = _react.useMemo.call(void 0, () => keys.find(([k, _]) => k === key), [keys, key]);
-  return _optionalChain([keyTuple, 'optionalAccess', _24 => _24[1]]);
+  return _optionalChain([keyTuple, 'optionalAccess', _23 => _23[1]]);
 };
 
 // src/components/databrowser/components/display/display-list.tsx
@@ -3265,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(
@@ -3372,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', _25 => _25.at, 'call', _26 => _26(-1), 'optionalAccess', _27 => _27[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]) => ({
@@ -3536,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', _28 => _28.split, 'call', _29 => _29("\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));
@@ -3618,7 +3716,7 @@ var LengthBadge = ({
   content
 }) => {
   const { data, isLoading } = useFetchKeyLength({ dataKey, type });
-  const length = _nullishCoalesce(_optionalChain([content, 'optionalAccess', _30 => _30.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 }) => {
@@ -4309,7 +4407,7 @@ var ItemContextMenu = ({
             editItem({
               type,
               dataKey,
-              itemKey: _optionalChain([data, 'optionalAccess', _31 => _31.key]),
+              itemKey: _optionalChain([data, 'optionalAccess', _30 => _30.key]),
               // For deletion
               newKey: void 0
             });
@@ -4344,7 +4442,7 @@ var ItemContextMenu = ({
           {
             onClick: () => {
               if (!data) return;
-              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _32 => _32.key]));
+              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _31 => _31.key]));
               toast({
                 description: "Key copied to clipboard"
               });
@@ -4352,11 +4450,11 @@ var ItemContextMenu = ({
             children: "Copy key"
           }
         ),
-        _optionalChain([data, 'optionalAccess', _33 => _33.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', _34 => _34.value]), () => ( "")));
+              navigator.clipboard.writeText(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _33 => _33.value]), () => ( "")));
               toast({
                 description: "Value copied to clipboard"
               });
@@ -4374,6 +4472,7 @@ var ItemContextMenu = ({
 // src/components/databrowser/components/sidebar/infinite-scroll.tsx
 
 
+
 // src/components/ui/scroll-area.tsx
 
 var _reactscrollarea = require('@radix-ui/react-scroll-area'); var ScrollAreaPrimitive = _interopRequireWildcard(_reactscrollarea);
@@ -4423,6 +4522,9 @@ var InfiniteScroll = ({
   children,
   ...props
 }) => {
+  const { active } = useTab();
+  const scrollRef = _react.useRef.call(void 0, null);
+  const contentRef = _react.useRef.call(void 0, null);
   const handleScroll = (e) => {
     const { scrollTop, clientHeight, scrollHeight } = e.currentTarget;
     if (scrollTop + clientHeight > scrollHeight - 100) {
@@ -4432,7 +4534,21 @@ var InfiniteScroll = ({
       query.fetchNextPage();
     }
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  const checkAndFetchMore = () => {
+    if (!scrollRef.current || !contentRef.current) return;
+    const viewportHeight = scrollRef.current.clientHeight;
+    const contentHeight = contentRef.current.clientHeight;
+    const overflowThreshold = viewportHeight + 100;
+    if (contentHeight < overflowThreshold && query.hasNextPage && !query.isFetching) {
+      query.fetchNextPage();
+    }
+  };
+  _react.useEffect.call(void 0, () => {
+    if (!active) return;
+    const timer = setTimeout(checkAndFetchMore, 100);
+    return () => clearTimeout(timer);
+  }, [active, query.data]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     ScrollArea,
     {
       type: "always",
@@ -4442,10 +4558,11 @@ var InfiniteScroll = ({
         "block h-full w-full overflow-visible rounded-lg border border-zinc-200 bg-white p-1 pr-3 transition-all",
         props.className
       ),
-      children: [
+      ref: scrollRef,
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: contentRef, children: [
         children,
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-[100px] justify-center py-2 text-zinc-300", children: query.isFetching && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLoader2, { className: "animate-spin", size: 16 }) })
-      ]
+      ] })
     }
   );
 };
@@ -4635,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,
@@ -4650,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"
+            }
+          )
         }
       )
     ] })
@@ -4677,7 +4810,7 @@ var DisplayHeader = ({
     /* @__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 })
       ] })
     ] }),
@@ -4699,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,
@@ -4710,7 +4843,7 @@ var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }
     ),
     ...props
   }
-));
+) }));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 var SimpleTooltip = ({
   content,
@@ -4719,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 })
   ] });
 };
 
@@ -4783,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', _35 => _35[field]]);
+  const expireAt = _optionalChain([data, 'optionalAccess', _34 => _34[field]]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     TTLBadge,
     {
@@ -4866,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', _36 => _36.editor, 'access', _37 => _37.setModelLanguage, 'call', _38 => _38(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,
           {
@@ -4995,7 +5124,7 @@ var checkIsValidJSON = (value) => {
   try {
     JSON.parse(value);
     return true;
-  } catch (e2) {
+  } catch (e3) {
     return false;
   }
 };
@@ -5019,7 +5148,7 @@ var ListEditForm = ({
     dataKey
   });
   const findValue = () => {
-    for (const page of _nullishCoalesce(_optionalChain([query, 'access', _39 => _39.data, 'optionalAccess', _40 => _40.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;
     }
@@ -5165,7 +5294,7 @@ var HashFieldTTLInfo = ({
   fields
 }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields });
-  const expireAt = _optionalChain([data, 'optionalAccess', _41 => _41[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));
@@ -5202,7 +5331,7 @@ var ListItems = ({
   dataKey
 }) => {
   const { setSelectedListItem } = useTab();
-  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _42 => _42.data, 'optionalAccess', _43 => _43.pages, 'access', _44 => _44.flatMap, 'call', _45 => _45((page) => page.keys)]), () => ( [])), [query.data]);
+  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, 
@@ -5461,7 +5590,7 @@ function AddKeyModal() {
     setSelectedKey(key);
     setOpen(false);
     setTimeout(() => {
-      _optionalChain([window, 'access', _46 => _46.document, 'access', _47 => _47.querySelector, 'call', _48 => _48(`[data-key="${key}"]`), 'optionalAccess', _49 => _49.scrollIntoView, 'call', _50 => _50({
+      _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"
@@ -5477,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" }) }),
@@ -5506,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', _51 => _51.errors, 'access', _52 => _52.key, 'optionalAccess', _53 => _53.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, 
@@ -5532,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!"' })
   ] }) });
@@ -5600,7 +5729,7 @@ var SidebarContextMenu = ({ children }) => {
 
 var KeysList = () => {
   const { keys } = useKeys();
-  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', _54 => _54.at, 'call', _55 => _55(i + 1), 'optionalAccess', _56 => _56[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",
@@ -5676,7 +5805,7 @@ var SearchInput = () => {
     } else if (e.key === "Escape") {
       setState("");
       setFocusedIndex(-1);
-      _optionalChain([inputRef, 'access', _57 => _57.current, 'optionalAccess', _58 => _58.blur, 'call', _59 => _59()]);
+      _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) {
@@ -5690,7 +5819,7 @@ var SearchInput = () => {
         setFocusedIndex(focusedIndex - 1);
       } else if (filteredHistory.length > 0 && focusedIndex === 0) {
         setFocusedIndex(-1);
-        _optionalChain([inputRef, 'access', _60 => _60.current, 'optionalAccess', _61 => _61.focus, 'call', _62 => _62()]);
+        _optionalChain([inputRef, 'access', _59 => _59.current, 'optionalAccess', _60 => _60.focus, 'call', _61 => _61()]);
       } else if (filteredHistory.length > 0) {
         setFocusedIndex(filteredHistory.length - 1);
       }
@@ -5734,7 +5863,7 @@ var SearchInput = () => {
               },
               onClick: () => handleSubmit(item),
               onMouseEnter: () => setFocusedIndex(index),
-              className: `block w-full rounded-sm p-1 text-left transition-colors ${focusedIndex === index ? "bg-zinc-100" : "hover:bg-zinc-100"}`,
+              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))
@@ -5765,7 +5894,7 @@ var SearchInput = () => {
 // 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)) });
@@ -5808,6 +5937,7 @@ function Sidebar() {
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             Button,
             {
+              "aria-label": "Refresh",
               className: "h-7 w-7 px-0",
               onClick: () => {
                 queryClient.invalidateQueries({
@@ -5856,7 +5986,7 @@ var DatabrowserInstance = ({ hidden }) => {
         className: "h-full w-full gap-0.5 text-sm antialiased",
         children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Sidebar, {}) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.PanelResizeHandle, { className: "group flex h-full w-1.5 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-300" }) }),
+          /* @__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, {}) })
         ]
       }
@@ -5868,6 +5998,9 @@ var DatabrowserInstance = ({ hidden }) => {
 // src/components/databrowser/components/databrowser-tabs.tsx
 
 
+// src/components/databrowser/components/tab.tsx
+
+
 // src/components/databrowser/components/tab-type-icon.tsx
 
 function TabTypeIcon({ selectedKey }) {
@@ -5877,24 +6010,52 @@ function TabTypeIcon({ selectedKey }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: keyType, type: "icon" });
 }
 
-// src/components/databrowser/components/databrowser-tabs.tsx
+// 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 { selectTab, selectedTab, tabs, removeTab } = useDatabrowserStore();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  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",
-        id === selectedTab ? "border-b-white bg-white text-zinc-900" : "bg-zinc-100 hover:bg-zinc-50"
+        active ? "border-b-white bg-white text-zinc-900" : "bg-zinc-100 hover:bg-zinc-50"
       ),
       children: [
-        tabs[id].selectedKey ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabTypeIcon, { selectedKey: tabs[id].selectedKey }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "max-w-32 truncate whitespace-nowrap", children: tabs[id].selectedKey })
-        ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "whitespace-nowrap", children: "New Tab" }),
-        Object.keys(tabs).length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        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) => {
@@ -5908,13 +6069,17 @@ var Tab = ({ id }) => {
       ]
     }
   );
+  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: [
-      Object.keys(tabs).map((id) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Tab, { id }, id)),
+      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,
         {
@@ -5935,13 +6100,14 @@ var DatabrowserTabs = () => {
 var RedisBrowser = ({
   token,
   url,
-  hideTabs
+  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, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  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",
@@ -5956,9 +6122,9 @@ var RedisBrowser = ({
 var DatabrowserInstances = () => {
   const { tabs, selectedTab, addTab } = useDatabrowserStore();
   _react.useEffect.call(void 0, () => {
-    if (Object.keys(tabs).length === 0) addTab();
+    if (tabs.length === 0) addTab();
   }, [tabs]);
-  return Object.entries(tabs).map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabIdProvider, { value: id, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserInstance, { hidden: id !== selectedTab }) }, id));
+  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));
 };