@upstash/react-redis-browser 0.1.10 → 0.1.11-canary

package/dist/index.js

@@ -4,9 +4,97 @@ var _react = require('react'); var React = _interopRequireWildcard(_react); var
 // 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/lib/clients.ts
+// 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');
 
 // src/components/ui/use-toast.ts
@@ -136,8 +224,8 @@ 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 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;
   if (!url) {
     throw new Error("Redis URL is missing!");
   }
@@ -180,140 +268,53 @@ var queryClient = new (0, _reactquery.QueryClient)({
   })
 });
 
-// src/store.tsx
-var _jsxruntime = require('react/jsx-runtime');
-var DatabrowserContext = _react.createContext.call(void 0, void 0);
-var DatabrowserProvider = ({
+// src/redis-context.tsx
+
+
+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]);
-  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 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 useDatabrowser = () => {
-  const context = _react.useContext.call(void 0, DatabrowserContext);
+var useRedis = () => {
+  const context = _react.useContext.call(void 0, RedisContext);
   if (!context) {
-    throw new Error("useDatabrowser must be used within a DatabrowserProvider");
+    throw new Error("useRedis must be used within a RedisProvider");
   }
   return context;
 };
-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 }));
-  },
-  selectedListItem: void 0,
-  setSelectedListItem: (item) => {
-    set((old) => ({ ...old, selectedListItem: item }));
-  },
-  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');
 
+// src/components/databrowser/components/databrowser-instance.tsx
 var _reactresizablepanels = require('react-resizable-panels');
 
-// 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 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);
-  };
-};
-
 // 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 +359,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', _8 => _8.validators, 'access', _9 => _9.find, 'call', _10 => _10(({
     validator
-  }) => validator(classRest)), 'optionalAccess', _7 => _7.classGroupId]);
+  }) => validator(classRest)), 'optionalAccess', _11 => _11.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', _12 => _12.substring, 'call', _13 => _13(0, arbitraryPropertyClassName.indexOf(":"))]);
     if (property) {
       return "arbitrary.." + property;
     }
@@ -2779,7 +2780,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");
@@ -2811,6 +2812,82 @@ function formatTime(seconds) {
   return parts.slice(0, 1).join(" ");
 }
 
+// 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
 
 var ToastProvider = ToastPrimitives.Provider;
@@ -2917,12 +2994,61 @@ 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";
+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 KeysProvider = ({ children }) => {
-  const { search } = useDatabrowserStore();
-  const { redisNoPipeline: redis } = useDatabrowser();
+  const { search } = useTab();
+  const { redisNoPipeline: redis } = useRedis();
   const query = _reactquery.useInfiniteQuery.call(void 0, {
     queryKey: [FETCH_KEYS_QUERY_KEY, search],
     initialPageParam: "0",
@@ -2950,6 +3076,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 +3090,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', _20 => _20.data, 'optionalAccess', _21 => _21.pages, 'access', _22 => _22.flatMap, 'call', _23 => _23((page) => page.keys)]), () => ( []));
     const keysSet = /* @__PURE__ */ new Set();
     const dedupedKeys = [];
     for (const key of keys2) {
@@ -2992,19 +3121,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', _24 => _24[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 +3190,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 +3208,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`);
@@ -3159,16 +3288,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 +3372,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', _25 => _25.at, 'call', _26 => _26(-1), 'optionalAccess', _27 => _27[0]]) : void 0;
       return {
         cursor: messages.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : lastMessageId,
         keys: messages.map(([id, fields]) => ({
@@ -3283,7 +3408,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 +3435,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 +3459,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 +3478,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 +3536,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', _28 => _28.split, 'call', _29 => _29("\n")]), () => ( []))).map(
             ({ key, value }) => [key, value]
           );
           pipe.xadd(dataKey, newKey, Object.fromEntries(opts));
@@ -3446,7 +3571,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 +3601,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 +3618,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', _30 => _30.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 +3628,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 +3978,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 +4000,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 +4023,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 +4309,7 @@ var ItemContextMenu = ({
             editItem({
               type,
               dataKey,
-              itemKey: _optionalChain([data, 'optionalAccess', _21 => _21.key]),
+              itemKey: _optionalChain([data, 'optionalAccess', _31 => _31.key]),
               // For deletion
               newKey: void 0
             });
@@ -4219,7 +4344,7 @@ var ItemContextMenu = ({
           {
             onClick: () => {
               if (!data) return;
-              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _22 => _22.key]));
+              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _32 => _32.key]));
               toast({
                 description: "Key copied to clipboard"
               });
@@ -4227,11 +4352,11 @@ var ItemContextMenu = ({
             children: "Copy key"
           }
         ),
-        _optionalChain([data, 'optionalAccess', _23 => _23.value]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _optionalChain([data, 'optionalAccess', _33 => _33.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', _34 => _34.value]), () => ( "")));
               toast({
                 description: "Value copied to clipboard"
               });
@@ -4253,7 +4378,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, roundedInherit = true, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
   ScrollAreaPrimitive.Root,
   {
     ref,
@@ -4264,7 +4389,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", roundedInherit && "rounded-[inherit]"),
           children
         }
       ),
@@ -4295,7 +4420,8 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 var InfiniteScroll = ({
   query,
-  children
+  children,
+  ...props
 }) => {
   const handleScroll = (e) => {
     const { scrollTop, clientHeight, scrollHeight } = e.currentTarget;
@@ -4310,8 +4436,9 @@ var InfiniteScroll = ({
     ScrollArea,
     {
       type: "always",
-      className: "block h-full w-full transition-all",
+      className: "block h-full w-full overflow-visible rounded-lg border border-zinc-200 bg-white p-1 pr-3 transition-all",
       onScroll: handleScroll,
+      ...props,
       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 }) })
@@ -4394,14 +4521,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" })
     ]
   }
 ));
@@ -4411,7 +4538,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
@@ -4424,8 +4551,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
@@ -4456,7 +4583,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
     ]
   }
@@ -4472,7 +4599,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
     ]
   }
@@ -4539,11 +4666,11 @@ 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: [
@@ -4600,7 +4727,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 () => {
@@ -4631,7 +4758,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,
@@ -4653,7 +4780,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', _35 => _35[field]]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     TTLBadge,
     {
@@ -4742,7 +4869,7 @@ var CustomEditor = ({
     if (!monaco || !editorRef.current) {
       return;
     }
-    _optionalChain([monaco, 'optionalAccess', _26 => _26.editor, 'access', _27 => _27.setModelLanguage, 'call', _28 => _28(editorRef.current.getModel(), language)]);
+    _optionalChain([monaco, 'optionalAccess', _36 => _36.editor, 'access', _37 => _37.setModelLanguage, 'call', _38 => _38(editorRef.current.getModel(), language)]);
   }, [monaco, language]);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
@@ -4877,7 +5004,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,
@@ -4889,7 +5016,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', _39 => _39.data, 'optionalAccess', _40 => _40.pages]), () => ( []))) {
       const item = page.keys.find((item2) => item2.key === itemKey);
       if (item && "value" in item) return item.value;
     }
@@ -4903,7 +5030,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({
@@ -5035,7 +5162,7 @@ var HashFieldTTLInfo = ({
   fields
 }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields });
-  const expireAt = _optionalChain([data, 'optionalAccess', _31 => _31[field]]);
+  const expireAt = _optionalChain([data, 'optionalAccess', _41 => _41[field]]);
   const [ttl, setTTL] = _react.useState.call(void 0, () => calculateTTL(expireAt));
   _react.useEffect.call(void 0, () => {
     setTTL(calculateTTL(expireAt));
@@ -5058,12 +5185,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 = ({
@@ -5071,8 +5198,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', _42 => _42.data, 'optionalAccess', _43 => _43.pages, 'access', _44 => _44.flatMap, 'call', _45 => _45((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, 
@@ -5083,7 +5210,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",
@@ -5154,13 +5281,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 = ({
@@ -5204,10 +5325,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
@@ -5323,7 +5444,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, {
@@ -5337,7 +5458,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', _46 => _46.document, 'access', _47 => _47.querySelector, 'call', _48 => _48(`[data-key="${key}"]`), 'optionalAccess', _49 => _49.scrollIntoView, 'call', _50 => _50({
         behavior: "smooth",
         block: "start",
         inline: "nearest"
@@ -5382,7 +5503,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', _51 => _51.errors, 'access', _52 => _52.key, 'optionalAccess', _53 => _53.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, 
@@ -5476,7 +5597,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', _54 => _54.at, 'call', _55 => _55(i + 1), 'optionalAccess', _56 => _56[0]]), () => ( "")), data }, data[0])) }) });
 };
 var keyStyles = {
   string: "border-sky-400 !bg-sky-50 text-sky-900",
@@ -5488,7 +5609,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;
@@ -5498,7 +5619,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]
@@ -5517,30 +5638,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', _57 => _57.current, 'optionalAccess', _58 => _58.blur, 'call', _59 => _59()]);
+    } 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', _60 => _60.current, 'optionalAccess', _61 => _61.focus, 'call', _62 => _62()]);
+      } 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 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,
       {
@@ -5557,7 +5754,8 @@ var SearchInput = () => {
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Clear" })
         ]
       }
-    )
+    ),
+    " "
   ] });
 };
 
@@ -5573,7 +5771,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,
     {
@@ -5599,8 +5797,8 @@ 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: [
@@ -5638,19 +5836,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, roundedInherit: false, 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("h-full rounded-md bg-zinc-100", hidden && "hidden"), children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       _reactresizablepanels.PanelGroup,
       {
@@ -5659,21 +5853,96 @@ 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-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.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-type-icon.tsx
+
+function TabTypeIcon({ selectedKey }) {
+  const { data: keyType, isLoading } = useFetchKeyType(selectedKey);
+  if (isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "h-5 w-5 rounded" });
+  if (!keyType || keyType === "none") return;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: keyType, type: "icon" });
+}
+
+// src/components/databrowser/components/databrowser-tabs.tsx
+
+var Tab = ({ id }) => {
+  const { selectTab, selectedTab, tabs, removeTab } = useDatabrowserStore();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      onClick: () => selectTab(id),
+      className: cn(
+        "flex h-9 translate-y-[1px] 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"
+      ),
+      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", children: tabs[id].selectedKey })
+        ] }) : "New Tab",
+        Object.keys(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 })
+          }
+        )
+      ]
+    }
+  );
+};
+var DatabrowserTabs = () => {
+  const { tabs, addTab } = useDatabrowserStore();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-2 flex items-center gap-1 border-b border-zinc-200", children: [
+    Object.keys(tabs).map((id) => /* @__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 }) => {
+  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, "div", { className: "ups-db", style: { height: "100%" }, children: [
+    /* @__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 (Object.keys(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));
+};
 
 
 exports.RedisBrowser = RedisBrowser;