@upstash/react-redis-browser 0.1.6 → 0.1.8

package/dist/index.mjs

@@ -2808,7 +2808,7 @@ function formatTime(seconds) {
   if (parts.length === 0) {
     parts.push("0s");
   }
-  return parts.slice(0, 2).join(" ");
+  return parts.slice(0, 1).join(" ");
 }
 
 // src/components/ui/toast.tsx
@@ -2923,6 +2923,20 @@ import {
 } from "react";
 import { useInfiniteQuery } from "@tanstack/react-query";
 
+// src/components/databrowser/hooks/use-fetch-key-type.tsx
+import { useQuery } from "@tanstack/react-query";
+var FETCH_KEY_TYPE_QUERY_KEY = "fetch-key-type";
+var useFetchKeyType = (key) => {
+  const { redisNoPipeline: redis } = useDatabrowser();
+  return useQuery({
+    queryKey: [FETCH_KEY_TYPE_QUERY_KEY, key],
+    queryFn: async () => {
+      if (!key) return "none";
+      return await redis.type(key);
+    }
+  });
+};
+
 // src/components/databrowser/hooks/use-fetch-keys.ts
 import { useCallback, useRef } from "react";
 
@@ -3050,6 +3064,8 @@ var KeysContext = createContext2(void 0);
 var FETCH_KEYS_QUERY_KEY = "use-fetch-keys";
 var KeysProvider = ({ children }) => {
   const { search } = useDatabrowserStore();
+  const cleanSearchKey = search.key.replace("*", "");
+  const { data: exactMatchType, isFetching, isLoading } = useFetchKeyType(cleanSearchKey);
   const { fetchKeys, resetCache } = useFetchKeys(search);
   const pageRef = useRef2(0);
   const query = useInfiniteQuery({
@@ -3064,6 +3080,7 @@ var KeysProvider = ({ children }) => {
     getNextPageParam: (lastPage, __, lastPageIndex) => {
       return lastPage.hasNextPage ? lastPageIndex + 1 : void 0;
     },
+    enabled: !isFetching,
     refetchOnMount: false
   });
   const refetch = useCallback2(() => {
@@ -3072,6 +3089,9 @@ var KeysProvider = ({ children }) => {
   }, [query, resetCache]);
   const keys = useMemo2(() => {
     const keys2 = query.data?.pages.flatMap((page) => page.keys) ?? [];
+    if (exactMatchType && exactMatchType !== "none" && (search.type === void 0 || search.type === exactMatchType)) {
+      keys2.push([cleanSearchKey, exactMatchType]);
+    }
     const keysSet = /* @__PURE__ */ new Set();
     const dedupedKeys = [];
     for (const key of keys2) {
@@ -3080,13 +3100,18 @@ var KeysProvider = ({ children }) => {
       dedupedKeys.push(key);
     }
     return dedupedKeys;
-  }, [query.data]);
+  }, [query.data, cleanSearchKey, exactMatchType]);
   return /* @__PURE__ */ jsx4(
     KeysContext.Provider,
     {
       value: {
         keys,
-        query,
+        // @ts-expect-error Ignore the error with spread syntax
+        query: {
+          ...query,
+          isLoading: isLoading || query.isLoading,
+          isFetching: isFetching || query.isFetching
+        },
         refetch
       },
       children
@@ -3154,7 +3179,7 @@ Button.displayName = "Button";
 import { useMutation } from "@tanstack/react-query";
 
 // src/components/databrowser/components/sidebar/db-size.tsx
-import { useQuery } from "@tanstack/react-query";
+import { useQuery as useQuery2 } from "@tanstack/react-query";
 
 // src/components/ui/skeleton.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
@@ -3173,7 +3198,7 @@ import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var FETCH_DB_SIZE_QUERY_KEY = "fetch-db-size";
 var DisplayDbSize = () => {
   const { redis } = useDatabrowser();
-  const { data: keyCount } = useQuery({
+  const { data: keyCount } = useQuery2({
     queryKey: [FETCH_DB_SIZE_QUERY_KEY],
     queryFn: async () => {
       return await redis.dbsize();
@@ -3270,76 +3295,6 @@ import { useMutation as useMutation2 } from "@tanstack/react-query";
 // src/components/databrowser/hooks/use-delete-key-cache.ts
 import { useCallback as useCallback3 } from "react";
 
-// src/components/databrowser/hooks/use-fetch-simple-key.tsx
-import { useQuery as useQuery2 } from "@tanstack/react-query";
-var FETCH_SIMPLE_KEY_QUERY_KEY = "fetch-simple-key";
-var useFetchSimpleKey = (dataKey, type) => {
-  const { redisNoPipeline: redis } = useDatabrowser();
-  const { deleteKeyCache } = useDeleteKeyCache();
-  return useQuery2({
-    queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY, dataKey],
-    queryFn: async () => {
-      let result;
-      if (type === "string") result = await redis.get(dataKey);
-      else if (type === "json") result = await redis.json.get(dataKey);
-      else throw new Error(`Invalid type when fetching simple key: ${type}`);
-      if (type === "json" && result !== null)
-        result = JSON.stringify(sortObject(JSON.parse(result)));
-      if (result === null) deleteKeyCache(dataKey);
-      return result;
-    }
-  });
-};
-var sortObject = (obj) => {
-  if (typeof obj !== "object" || obj === null) return obj;
-  return Object.fromEntries(
-    Object.entries(obj).sort((a, b) => a[0].localeCompare(b[0])).map(
-      ([key, value]) => typeof value === "object" && !Array.isArray(value) && value !== null ? [key, sortObject(value)] : [key, value]
-    )
-  );
-};
-
-// src/components/databrowser/hooks/use-delete-key-cache.ts
-var useDeleteKeyCache = () => {
-  const { setSelectedKey } = useDatabrowserStore();
-  const { refetch } = useKeys();
-  const deleteKeyCache = useCallback3(
-    (key) => {
-      setSelectedKey(void 0);
-      queryClient.invalidateQueries({
-        queryKey: [FETCH_KEYS_QUERY_KEY]
-      });
-      queryClient.invalidateQueries({
-        queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY, key]
-      });
-      refetch();
-    },
-    [setSelectedKey, refetch]
-  );
-  return { deleteKeyCache };
-};
-
-// src/components/databrowser/hooks/use-delete-key.ts
-var useDeleteKey = () => {
-  const { redis } = useDatabrowser();
-  const { deleteKeyCache } = useDeleteKeyCache();
-  const deleteKey = useMutation2({
-    mutationFn: async (key) => {
-      return Boolean(await redis.del(key));
-    },
-    onSuccess: (_, key) => {
-      deleteKeyCache(key);
-      queryClient.invalidateQueries({
-        queryKey: [FETCH_DB_SIZE_QUERY_KEY]
-      });
-    }
-  });
-  return deleteKey;
-};
-
-// src/components/databrowser/hooks/use-edit-list-item.tsx
-import { useMutation as useMutation3 } from "@tanstack/react-query";
-
 // src/components/databrowser/hooks/use-fetch-list-items.tsx
 import { useInfiniteQuery as useInfiniteQuery2 } from "@tanstack/react-query";
 var LIST_DISPLAY_PAGE_SIZE = 50;
@@ -3365,13 +3320,15 @@ var useFetchListItems = ({ dataKey, type }) => {
     enabled: type === "zset",
     queryKey: [FETCH_LIST_ITEMS_QUERY_KEY, dataKey, "zset"],
     initialPageParam: 0,
-    queryFn: async ({ pageParam: lastIndex }) => {
-      const res = await redis.zrange(dataKey, lastIndex, lastIndex + LIST_DISPLAY_PAGE_SIZE - 1, {
+    queryFn: async ({ pageParam: page }) => {
+      const start = page * LIST_DISPLAY_PAGE_SIZE;
+      const end = start + LIST_DISPLAY_PAGE_SIZE - 1;
+      const res = await redis.zrange(dataKey, start, end, {
         withScores: true,
         rev: true
       });
       return {
-        cursor: res.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : lastIndex + LIST_DISPLAY_PAGE_SIZE,
+        cursor: res.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : page + 1,
         keys: transformArray(res)
       };
     },
@@ -3396,13 +3353,14 @@ var useFetchListItems = ({ dataKey, type }) => {
     enabled: type === "list",
     queryKey: [FETCH_LIST_ITEMS_QUERY_KEY, dataKey, "list"],
     initialPageParam: 0,
-    queryFn: async ({ pageParam }) => {
-      const lastIndex = Number(pageParam);
-      const values = await redis.lrange(dataKey, lastIndex, lastIndex + LIST_DISPLAY_PAGE_SIZE);
+    queryFn: async ({ pageParam: page }) => {
+      const start = page * LIST_DISPLAY_PAGE_SIZE;
+      const end = start + LIST_DISPLAY_PAGE_SIZE - 1;
+      const values = await redis.lrange(dataKey, start, end);
       return {
-        cursor: values.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : lastIndex + LIST_DISPLAY_PAGE_SIZE,
+        cursor: values.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : page + 1,
         keys: values.map((value, i) => ({
-          key: (lastIndex + i).toString(),
+          key: (start + i).toString(),
           value
         }))
       };
@@ -3453,7 +3411,81 @@ function transformArray(inputArray) {
   }, []);
 }
 
+// src/components/databrowser/hooks/use-fetch-simple-key.tsx
+import { useQuery as useQuery3 } from "@tanstack/react-query";
+var FETCH_SIMPLE_KEY_QUERY_KEY = "fetch-simple-key";
+var useFetchSimpleKey = (dataKey, type) => {
+  const { redisNoPipeline: redis } = useDatabrowser();
+  const { deleteKeyCache } = useDeleteKeyCache();
+  return useQuery3({
+    queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY, dataKey],
+    queryFn: async () => {
+      let result;
+      if (type === "string") result = await redis.get(dataKey);
+      else if (type === "json") result = await redis.json.get(dataKey);
+      else throw new Error(`Invalid type when fetching simple key: ${type}`);
+      if (type === "json" && result !== null)
+        result = JSON.stringify(sortObject(JSON.parse(result)));
+      if (result === null) deleteKeyCache(dataKey);
+      return result;
+    }
+  });
+};
+var sortObject = (obj) => {
+  if (typeof obj !== "object" || obj === null) return obj;
+  return Object.fromEntries(
+    Object.entries(obj).sort((a, b) => a[0].localeCompare(b[0])).map(
+      ([key, value]) => typeof value === "object" && !Array.isArray(value) && value !== null ? [key, sortObject(value)] : [key, value]
+    )
+  );
+};
+
+// src/components/databrowser/hooks/use-delete-key-cache.ts
+var useDeleteKeyCache = () => {
+  const { setSelectedKey } = useDatabrowserStore();
+  const { refetch } = useKeys();
+  const deleteKeyCache = useCallback3(
+    (key) => {
+      setSelectedKey(void 0);
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_KEYS_QUERY_KEY]
+      });
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY, key]
+      });
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_LIST_ITEMS_QUERY_KEY, key]
+      });
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_KEY_TYPE_QUERY_KEY, key]
+      });
+      refetch();
+    },
+    [setSelectedKey, refetch]
+  );
+  return { deleteKeyCache };
+};
+
+// src/components/databrowser/hooks/use-delete-key.ts
+var useDeleteKey = () => {
+  const { redis } = useDatabrowser();
+  const { deleteKeyCache } = useDeleteKeyCache();
+  const deleteKey = useMutation2({
+    mutationFn: async (key) => {
+      return Boolean(await redis.del(key));
+    },
+    onSuccess: (_, key) => {
+      deleteKeyCache(key);
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_DB_SIZE_QUERY_KEY]
+      });
+    }
+  });
+  return deleteKey;
+};
+
 // src/components/databrowser/hooks/use-edit-list-item.tsx
+import { useMutation as useMutation3 } from "@tanstack/react-query";
 var useEditListItem = () => {
   const { redis } = useDatabrowser();
   return useMutation3({
@@ -3534,914 +3566,940 @@ var useEditListItem = () => {
 };
 
 // src/components/databrowser/hooks/use-fetch-ttl.ts
-import { useEffect as useEffect3 } from "react";
-import { useQuery as useQuery3 } from "@tanstack/react-query";
-var FETCH_TTL_QUERY_KEY = "fetch-ttl";
-var useFetchTTL = (dataKey) => {
+import { useEffect as useEffect5 } from "react";
+import { useQuery as useQuery6 } from "@tanstack/react-query";
+
+// src/components/databrowser/components/display/ttl-badge.tsx
+import { useEffect as useEffect4, useState as useState5 } from "react";
+import { IconChevronDown } from "@tabler/icons-react";
+
+// src/components/databrowser/components/display/header-badges.tsx
+import bytes from "bytes";
+
+// src/components/databrowser/hooks/use-fetch-key-length.ts
+import { useQuery as useQuery4 } from "@tanstack/react-query";
+var FETCH_KEY_LENGTH_QUERY_KEY = "fetch-key-length";
+var useFetchKeyLength = ({ dataKey, type }) => {
   const { redis } = useDatabrowser();
-  const { isLoading, error, data } = useQuery3({
-    queryKey: [FETCH_TTL_QUERY_KEY, dataKey],
+  return useQuery4({
+    queryKey: [FETCH_KEY_LENGTH_QUERY_KEY, dataKey],
     queryFn: async () => {
-      return await redis.ttl(dataKey);
+      switch (type) {
+        case "set": {
+          return await redis.scard(dataKey);
+        }
+        case "zset": {
+          return await redis.zcard(dataKey);
+        }
+        case "list": {
+          return await redis.llen(dataKey);
+        }
+        case "hash": {
+          return await redis.hlen(dataKey);
+        }
+        case "stream": {
+          return await redis.xlen(dataKey);
+        }
+      }
+      return null;
     }
   });
-  useEffect3(() => {
-    if (data === -2) {
-      queryClient.invalidateQueries({
-        queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY, dataKey]
-      });
-    }
-  }, [data === -2]);
-  return { isLoading, error, data };
 };
 
-// src/components/databrowser/hooks/use-set-simple-key.tsx
-import { useMutation as useMutation4 } from "@tanstack/react-query";
-var useSetSimpleKey = (dataKey, type) => {
+// src/components/databrowser/hooks/use-fetch-key-size.ts
+import { useQuery as useQuery5 } from "@tanstack/react-query";
+var FETCH_KEY_SIZE_QUERY_KEY = "fetch-key-size";
+var useFetchKeySize = (dataKey) => {
   const { redis } = useDatabrowser();
-  return useMutation4({
-    mutationFn: async (value) => {
-      if (type === "string") {
-        await redis.set(dataKey, value);
-      } else if (type === "json") {
-        await redis.json.set(dataKey, "$", JSON.parse(value));
-      } else {
-        throw new Error(`Invalid type when setting simple key: ${type}`);
-      }
-    },
-    onSuccess: (_, value) => {
-      queryClient.setQueryData([FETCH_SIMPLE_KEY_QUERY_KEY, dataKey], value);
-      queryClient.invalidateQueries({
-        queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY, dataKey]
-      });
+  return useQuery5({
+    queryKey: [FETCH_KEY_SIZE_QUERY_KEY, dataKey],
+    queryFn: async () => {
+      return await redis.eval(`return redis.call("MEMORY", "USAGE", KEYS[1])`, [dataKey], []);
     }
   });
 };
 
-// src/components/databrowser/hooks/use-set-ttl.ts
-import { useMutation as useMutation5 } from "@tanstack/react-query";
-var useSetTTL = () => {
-  const { redis } = useDatabrowser();
-  const updateTTL = useMutation5({
-    mutationFn: async ({ dataKey, ttl }) => {
-      await (ttl === void 0 ? redis.persist(dataKey) : redis.expire(dataKey, ttl));
-    },
-    onSuccess: (_, { dataKey }) => {
-      queryClient.invalidateQueries({
-        queryKey: [FETCH_TTL_QUERY_KEY, dataKey]
-      });
-      queryClient.invalidateQueries({
-        queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY, dataKey]
-      });
+// src/components/databrowser/components/display/header-badges.tsx
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var LengthBadge = ({
+  dataKey,
+  type,
+  content
+}) => {
+  const { data, isLoading } = useFetchKeyLength({ dataKey, type });
+  const length = content?.length ?? data;
+  return /* @__PURE__ */ jsx8(Badge, { label: "Length:", children: isLoading ? /* @__PURE__ */ jsx8(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : length });
+};
+var SizeBadge = ({ dataKey }) => {
+  const { data: size } = useFetchKeySize(dataKey);
+  return /* @__PURE__ */ jsx8(Badge, { label: "Size:", children: size === void 0 || size === null ? /* @__PURE__ */ jsx8(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : bytes(size, {
+    unitSeparator: " "
+  }) });
+};
+var HeaderTTLBadge = ({ dataKey }) => {
+  const { data: expireAt } = useFetchKeyExpire(dataKey);
+  const { mutate: setTTL, isPending } = useSetTTL();
+  return /* @__PURE__ */ jsx8(
+    TTLBadge,
+    {
+      expireAt,
+      setTTL: (ttl) => setTTL({ dataKey, ttl }),
+      isPending
     }
-  });
-  return updateTTL;
+  );
 };
+var Badge = ({ children, label }) => /* @__PURE__ */ jsxs3("div", { className: "flex h-6 items-center gap-0.5 rounded-md bg-white px-2 text-xs text-zinc-700", children: [
+  /* @__PURE__ */ jsx8("span", { className: "text-zinc-500", children: label }),
+  /* @__PURE__ */ jsx8("span", { className: "font-medium", children })
+] });
 
-// src/components/databrowser/components/item-context-menu.tsx
-import { useState as useState4 } from "react";
-import { ContextMenuSeparator as ContextMenuSeparator2 } from "@radix-ui/react-context-menu";
+// src/components/databrowser/components/display/ttl-popover.tsx
+import { useEffect as useEffect3, useMemo as useMemo3, useState as useState4 } from "react";
+import { Controller, useForm } from "react-hook-form";
 
-// src/components/ui/context-menu.tsx
+// src/components/ui/input.tsx
 import * as React4 from "react";
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
-var ContextMenu = ContextMenuPrimitive.Root;
-var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-var ContextMenuSubTrigger = React4.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs3(
-  ContextMenuPrimitive.SubTrigger,
-  {
-    ref,
-    className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-900 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-50",
-      inset && "pl-8",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx8(ChevronRightIcon, { className: "ml-auto h-4 w-4" })
-    ]
-  }
-));
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
-  ContextMenuPrimitive.SubContent,
-  {
-    ref,
-    className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
-      className
-    ),
-    ...props
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Input = React4.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx9(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-8 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
   }
-));
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(ContextMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx8(
-  ContextMenuPrimitive.Content,
+);
+Input.displayName = "Input";
+
+// src/components/ui/popover.tsx
+import * as React5 from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx10(PopoverPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx10(
+  PopoverPrimitive.Content,
   {
     ref,
+    align,
+    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 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",
+      "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 w-72 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 shadow-md outline-none dark:border-zinc-800 mt-0.5 dark:bg-zinc-950 dark:text-zinc-50",
       className
     ),
     ...props
   }
 ) }));
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React4.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx8(
-  ContextMenuPrimitive.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
-      inset && "pl-8",
-      className
-    ),
-    ...props
-  }
-));
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React4.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs3(
-  ContextMenuPrimitive.CheckboxItem,
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/components/ui/select.tsx
+import * as React6 from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+  SelectPrimitive.Trigger,
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex h-8 w-full items-center justify-between rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-zinc-500 focus:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-950 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-400 dark:focus:ring-zinc-300",
       className
     ),
-    checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx8("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx8(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx8(CheckIcon, { className: "h-4 w-4" }) }) }),
-      children
+      children,
+      /* @__PURE__ */ jsx11(SelectPrimitive.Icon, { asChild: true, className: "absolute right-2", children: /* @__PURE__ */ jsx11(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ jsx11(
+            "path",
+            {
+              d: "M4 6L8 10L12 6",
+              stroke: "black",
+              strokeOpacity: "0.4",
+              strokeWidth: "1.4",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      ) })
     ]
   }
 ));
-ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs3(
-  ContextMenuPrimitive.RadioItem,
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectContent = React6.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx11(SelectPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx11(
+  SelectPrimitive.Content,
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md 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-zinc-800 dark:bg-zinc-950 dark:text-neutral-50",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     ),
+    position,
     ...props,
-    children: [
-      /* @__PURE__ */ jsx8("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx8(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx8(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
-      children
-    ]
+    children: /* @__PURE__ */ jsx11(
+      SelectPrimitive.Viewport,
+      {
+        className: cn(
+          "p-1",
+          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        ),
+        children
+      }
+    )
   }
-));
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React4.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx8(
-  ContextMenuPrimitive.Label,
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+  SelectPrimitive.Label,
   {
     ref,
-    className: cn(
-      "px-2 py-1.5 text-sm font-semibold text-neutral-950 dark:text-neutral-50",
-      inset && "pl-8",
-      className
-    ),
+    className: cn("px-2 py-1.5 text-sm font-semibold", className),
     ...props
   }
 ));
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
-  ContextMenuPrimitive.Separator,
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+  SelectPrimitive.Item,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-neutral-200 dark:bg-neutral-800", className),
-    ...props
-  }
-));
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
-var ContextMenuShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx8(
-    "span",
-    {
-      className: cn(
-        "ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400",
-        className
-      ),
-      ...props
-    }
-  );
-};
-ContextMenuShortcut.displayName = "ContextMenuShortcut";
-
-// src/components/ui/alert-dialog.tsx
-import * as React5 from "react";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
-var AlertDialog = AlertDialogPrimitive.Root;
-var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-var AlertDialogPortal = ({ ...props }) => /* @__PURE__ */ jsx9(AlertDialogPrimitive.Portal, { container: portalRoot, ...props });
-AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
-var AlertDialogOverlay = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
-  AlertDialogPrimitive.Overlay,
-  {
     className: cn(
-      "fixed inset-0 z-50 bg-white/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-zinc-950/80",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
       className
     ),
     ...props,
-    ref
-  }
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs4(AlertDialogPortal, { children: [
-  /* @__PURE__ */ jsx9(AlertDialogOverlay, {}),
-  /* @__PURE__ */ jsx9(
-    AlertDialogPrimitive.Content,
-    {
-      ref,
-      className: cn(
-        "antialiased data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-zinc-800 dark:bg-zinc-950 sm:rounded-lg md:w-full",
-        className
-      ),
-      ...props
-    }
-  )
-] }));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-var AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx9("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
-AlertDialogHeader.displayName = "AlertDialogHeader";
-var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx9(
-  "div",
-  {
-    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
-    ...props
-  }
-);
-AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
-  AlertDialogPrimitive.Title,
-  {
-    ref,
-    className: cn("text-lg font-semibold", className),
-    ...props
-  }
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
-  AlertDialogPrimitive.Description,
-  {
-    ref,
-    className: cn("text-sm text-zinc-500 dark:text-zinc-400", className),
-    ...props
+    children: [
+      /* @__PURE__ */ jsx11("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx11(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(
+        "svg",
+        {
+          width: "15",
+          height: "15",
+          viewBox: "0 0 15 15",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          className: "h-4 w-4",
+          children: /* @__PURE__ */ jsx11(
+            "path",
+            {
+              d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
+              fill: "currentColor",
+              fillRule: "evenodd",
+              clipRule: "evenodd"
+            }
+          )
+        }
+      ) }) }) }),
+      /* @__PURE__ */ jsx11(SelectPrimitive.ItemText, { children })
+    ]
   }
 ));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
-  AlertDialogPrimitive.Cancel,
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+  SelectPrimitive.Separator,
   {
     ref,
-    className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:!mt-0", className),
+    className: cn("-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800", className),
     ...props
   }
 ));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
-// src/components/databrowser/components/display/delete-alert-dialog.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
-function DeleteAlertDialog({
-  children,
-  onDeleteConfirm,
-  open,
-  onOpenChange,
-  deletionType
-}) {
-  return /* @__PURE__ */ jsxs5(AlertDialog, { open, onOpenChange, children: [
-    children && /* @__PURE__ */ jsx10(AlertDialogTrigger, { asChild: true, children }),
-    /* @__PURE__ */ jsxs5(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs5(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx10(AlertDialogTitle, { children: deletionType === "item" ? "Delete Item" : "Delete Key" }),
-        /* @__PURE__ */ jsxs5(AlertDialogDescription, { className: "mt-5", children: [
-          "Are you sure you want to delete this ",
-          deletionType,
-          "?",
-          /* @__PURE__ */ jsx10("br", {}),
-          "This action cannot be undone."
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs5(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx10(AlertDialogCancel, { type: "button", children: "Cancel" }),
-        /* @__PURE__ */ jsx10(
-          AlertDialogAction,
-          {
-            className: "bg-red-500 text-gray-50 hover:bg-red-600",
-            onClick: onDeleteConfirm,
-            children: "Yes, Delete"
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
-
-// src/components/databrowser/components/item-context-menu.tsx
-import { Fragment, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
-var ItemContextMenu = ({
-  children,
-  dataKey,
-  type
+// src/components/ui/spinner.tsx
+import { Fragment, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var Spinner = ({
+  isLoading,
+  className,
+  isLoadingText,
+  children
 }) => {
-  const { mutate: editItem } = useEditListItem();
-  const [isAlertOpen, setAlertOpen] = useState4(false);
-  const [data, setData] = useState4();
-  return /* @__PURE__ */ jsxs6(Fragment, { children: [
-    /* @__PURE__ */ jsx11(
-      DeleteAlertDialog,
-      {
-        deletionType: "item",
-        open: isAlertOpen,
-        onOpenChange: setAlertOpen,
-        onDeleteConfirm: (e) => {
-          e.stopPropagation();
-          if (data) {
-            editItem({
-              type,
-              dataKey,
-              itemKey: data?.key,
-              // For deletion
-              newKey: void 0
-            });
-          }
-          setAlertOpen(false);
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs6(ContextMenu, { children: [
-      /* @__PURE__ */ jsx11(
-        ContextMenuTrigger,
-        {
-          asChild: true,
-          onContextMenu: (e) => {
-            const el = e.target;
-            const item = el.closest("[data-item-key]");
-            if (item && item instanceof HTMLElement && item.dataset.itemKey !== void 0) {
-              setData({
-                key: item.dataset.itemKey,
-                value: item.dataset.itemValue
-              });
-            } else {
-              throw new Error("Key not found");
-            }
-          },
-          children
-        }
-      ),
-      /* @__PURE__ */ jsxs6(ContextMenuContent, { children: [
-        /* @__PURE__ */ jsx11(
-          ContextMenuItem,
-          {
-            onClick: () => {
-              if (!data) return;
-              navigator.clipboard.writeText(data?.key);
-              toast({
-                description: "Key copied to clipboard"
-              });
-            },
-            children: "Copy key"
-          }
-        ),
-        data?.value && /* @__PURE__ */ jsx11(
-          ContextMenuItem,
-          {
-            onClick: () => {
-              navigator.clipboard.writeText(data?.value ?? "");
-              toast({
-                description: "Value copied to clipboard"
-              });
-            },
-            children: "Copy value"
-          }
-        ),
-        /* @__PURE__ */ jsx11(ContextMenuSeparator2, {}),
-        /* @__PURE__ */ jsx11(ContextMenuItem, { disabled: type === "stream", onClick: () => setAlertOpen(true), children: "Delete item" })
-      ] })
-    ] })
-  ] });
-};
-
-// src/components/databrowser/components/sidebar/infinite-scroll.tsx
-import { IconLoader2 } from "@tabler/icons-react";
-
-// src/components/ui/scroll-area.tsx
-import * as React6 from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-var ScrollArea = React6.forwardRef(({ className, children, onScroll, ...props }, ref) => /* @__PURE__ */ jsxs7(
-  ScrollAreaPrimitive.Root,
-  {
-    ref,
-    className: cn("relative overflow-hidden", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx12(
-        ScrollAreaPrimitive.Viewport,
-        {
-          onScroll,
-          className: "h-full w-full rounded-[inherit] [&>div]:!block",
-          children
-        }
-      ),
-      /* @__PURE__ */ jsx12(ScrollBar, {}),
-      /* @__PURE__ */ jsx12(ScrollAreaPrimitive.Corner, {})
-    ]
-  }
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
-  ScrollAreaPrimitive.ScrollAreaScrollbar,
-  {
-    ref,
-    orientation: "vertical",
-    className: cn("flex h-full w-2 touch-none select-none transition-colors", className),
-    ...props,
-    children: /* @__PURE__ */ jsx12(
-      ScrollAreaPrimitive.ScrollAreaThumb,
+  return /* @__PURE__ */ jsx12("div", { className: className ?? "flex items-center", children: isLoading ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+    isLoadingText,
+    /* @__PURE__ */ jsx12(
+      "svg",
       {
-        className: cn("relative flex-1 rounded-full bg-neutral-200/70 dark:bg-neutral-800")
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: cn("h-4 w-4 animate-spin", isLoadingText ? "ml-2" : ""),
+        children: /* @__PURE__ */ jsx12("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
       }
     )
-  }
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+  ] }) : children });
+};
 
-// src/components/databrowser/components/sidebar/infinite-scroll.tsx
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
-var InfiniteScroll = ({
-  query,
-  children
-}) => {
-  const handleScroll = (e) => {
-    const { scrollTop, clientHeight, scrollHeight } = e.currentTarget;
-    if (scrollTop + clientHeight > scrollHeight - 100) {
-      if (query.isFetching || !query.hasNextPage) {
-        return;
-      }
-      query.fetchNextPage();
-    }
+// src/components/databrowser/components/display/ttl-popover.tsx
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+var timeUnits = [
+  { label: "Seconds", value: 1 },
+  { label: "Minutes", value: 60 },
+  { label: "Hours", value: 60 * 60 },
+  { label: "Days", value: 60 * 60 * 24 }
+];
+function TTLPopover({
+  children,
+  ttl,
+  setTTL,
+  isPending
+}) {
+  const [open, setOpen] = useState4(false);
+  const defaultValues = useMemo3(() => {
+    return { type: "Seconds", value: ttl };
+  }, [ttl]);
+  const { control, handleSubmit, formState, reset } = useForm({
+    defaultValues
+  });
+  useEffect3(() => {
+    reset(defaultValues, {
+      keepValues: true
+    });
+  }, [defaultValues]);
+  const onSubmit = handleSubmit(async ({ value, type }) => {
+    await setTTL(value * timeUnits.find((unit) => unit.label === type).value);
+    setOpen(false);
+  });
+  const handlePersist = async () => {
+    await setTTL(TTL_INFINITE);
+    setOpen(false);
   };
-  return /* @__PURE__ */ jsxs8(
-    ScrollArea,
+  return /* @__PURE__ */ jsxs6(
+    Popover,
     {
-      type: "always",
-      className: "block h-full w-full transition-all",
-      onScroll: handleScroll,
+      open,
+      onOpenChange: (isOpen) => {
+        if (isOpen) reset();
+        setOpen(isOpen);
+      },
       children: [
-        children,
-        /* @__PURE__ */ jsx13("div", { className: "flex h-[100px] justify-center py-2 text-zinc-300", children: query.isFetching && /* @__PURE__ */ jsx13(IconLoader2, { className: "animate-spin", size: 16 }) })
+        /* @__PURE__ */ jsx13(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx13("button", { children }) }),
+        /* @__PURE__ */ jsx13(PopoverContent, { className: "w-[300px]", align: "end", children: /* @__PURE__ */ jsxs6(
+          "form",
+          {
+            className: "space-y-4",
+            onSubmit: (e) => {
+              onSubmit(e);
+              e.stopPropagation();
+            },
+            children: [
+              /* @__PURE__ */ jsx13("h4", { className: "font-medium leading-none", children: "Expiration" }),
+              /* @__PURE__ */ jsxs6("div", { children: [
+                /* @__PURE__ */ jsxs6("div", { className: "flex items-center", children: [
+                  /* @__PURE__ */ jsx13(
+                    Controller,
+                    {
+                      rules: {
+                        required: "Please enter an expiration time",
+                        min: { value: -1, message: "TTL can't be lower than -1" }
+                      },
+                      control,
+                      name: "value",
+                      render: ({ field }) => /* @__PURE__ */ jsx13(Input, { min: "-1", ...field, className: "grow rounded-r-none" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx13(
+                    Controller,
+                    {
+                      control,
+                      name: "type",
+                      render: ({ field }) => /* @__PURE__ */ jsxs6(Select, { value: field.value, onValueChange: field.onChange, children: [
+                        /* @__PURE__ */ jsx13(SelectTrigger, { className: "w-auto rounded-l-none border-l-0 pr-8", children: /* @__PURE__ */ jsx13(SelectValue, {}) }),
+                        /* @__PURE__ */ jsx13(SelectContent, { children: timeUnits.map((unit) => /* @__PURE__ */ jsx13(SelectItem, { value: unit.label, children: unit.label }, unit.label)) })
+                      ] })
+                    }
+                  )
+                ] }),
+                formState.errors.value && /* @__PURE__ */ jsx13("p", { className: "mt-2 text-xs text-red-500", children: formState.errors.value.message }),
+                /* @__PURE__ */ jsx13("p", { className: "mt-2 text-xs text-zinc-500", children: "TTL sets a timer to automatically delete keys after a defined period." })
+              ] }),
+              /* @__PURE__ */ jsxs6("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsx13(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    disabled: ttl === TTL_INFINITE,
+                    onClick: handlePersist,
+                    children: "Persist"
+                  }
+                ),
+                /* @__PURE__ */ jsxs6("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsx13(Button, { variant: "outline", onClick: () => setOpen(false), type: "button", children: "Cancel" }),
+                  /* @__PURE__ */ jsx13(Button, { variant: "primary", type: "submit", children: /* @__PURE__ */ jsx13(Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" }) })
+                ] })
+              ] })
+            ]
+          }
+        ) })
       ]
     }
   );
-};
-
-// src/components/databrowser/components/display/display-header.tsx
-import { IconPlus } from "@tabler/icons-react";
-
-// src/components/databrowser/components/type-tag.tsx
-import {
-  IconArrowsSort,
-  IconCodeDots,
-  IconHash,
-  IconLayersIntersect,
-  IconList,
-  IconQuote
-} from "@tabler/icons-react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var iconsMap = {
-  string: /* @__PURE__ */ jsx14(IconQuote, { size: 15, stroke: 1.3 }),
-  set: /* @__PURE__ */ jsx14(IconLayersIntersect, { size: 15, stroke: 1.3 }),
-  hash: /* @__PURE__ */ jsx14(IconHash, { size: 15, stroke: 1.3 }),
-  json: /* @__PURE__ */ jsx14(IconCodeDots, { size: 15, stroke: 1.3 }),
-  zset: /* @__PURE__ */ jsx14(IconArrowsSort, { size: 15, stroke: 1.3 }),
-  list: /* @__PURE__ */ jsx14(IconList, { size: 15, stroke: 1.3 }),
-  stream: /* @__PURE__ */ jsx14(IconList, { size: 15, stroke: 1.3 })
-};
-var tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-center", {
-  variants: {
-    variant: {
-      string: "bg-sky-200 text-sky-800",
-      hash: "bg-amber-200 text-amber-800",
-      set: "bg-indigo-200 text-indigo-800",
-      zset: "bg-pink-200 text-pink-800",
-      json: "bg-purple-200 text-purple-800",
-      list: "bg-orange-200 text-orange-800",
-      stream: "bg-green-200 text-green-800"
-    },
-    type: {
-      icon: "size-5",
-      badge: "h-6 px-2 uppercase whitespace-nowrap text-xs font-medium leading-none tracking-wide"
-    }
-  },
-  defaultVariants: {
-    variant: "string",
-    type: "icon"
-  }
-});
-function TypeTag({ className, variant, type }) {
-  return /* @__PURE__ */ jsx14("span", { className: cn(tagVariants({ variant, type, className })), children: type === "icon" ? iconsMap[variant] : DATA_TYPE_NAMES[variant] });
 }
 
-// src/components/databrowser/components/display/header-badges.tsx
-import { useEffect as useEffect5 } from "react";
-import { IconChevronDown } from "@tabler/icons-react";
-import bytes from "bytes";
+// src/components/databrowser/components/display/ttl-badge.tsx
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+var TTL_INFINITE = -1;
+var TTL_NOT_FOUND = -2;
+var calculateTTL = (expireAt) => {
+  if (!expireAt) return;
+  if (expireAt === TTL_INFINITE) return TTL_INFINITE;
+  return Math.max(0, Math.floor((expireAt - Date.now()) / 1e3));
+};
+var TTLBadge = ({
+  label = "TTL:",
+  expireAt,
+  setTTL,
+  isPending
+}) => {
+  const [ttl, setTTLLabel] = useState5(() => calculateTTL(expireAt));
+  useEffect4(() => {
+    setTTLLabel(calculateTTL(expireAt));
+    const interval = setInterval(() => {
+      setTTLLabel(calculateTTL(expireAt));
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [expireAt]);
+  return /* @__PURE__ */ jsx14(Badge, { label, children: ttl === void 0 ? /* @__PURE__ */ jsx14(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : /* @__PURE__ */ jsx14(TTLPopover, { ttl, setTTL, isPending, children: /* @__PURE__ */ jsxs7("div", { className: "flex gap-[2px]", children: [
+    ttl === TTL_INFINITE ? "Forever" : formatTime(ttl),
+    /* @__PURE__ */ jsx14(IconChevronDown, { className: "mt-[1px] text-zinc-400", size: 12 })
+  ] }) }) });
+};
 
-// src/components/databrowser/hooks/use-fetch-key-length.ts
-import { useQuery as useQuery4 } from "@tanstack/react-query";
-var FETCH_KEY_LENGTH_QUERY_KEY = "fetch-key-length";
-var useFetchKeyLength = ({ dataKey, type }) => {
+// src/components/databrowser/hooks/use-fetch-ttl.ts
+var FETCH_TTL_QUERY_KEY = "fetch-ttl";
+var useFetchKeyExpire = (dataKey) => {
   const { redis } = useDatabrowser();
-  return useQuery4({
-    queryKey: [FETCH_KEY_LENGTH_QUERY_KEY, dataKey],
+  const { isLoading, error, data } = useQuery6({
+    queryKey: [FETCH_TTL_QUERY_KEY, dataKey],
     queryFn: async () => {
-      switch (type) {
-        case "set": {
-          return await redis.scard(dataKey);
-        }
-        case "zset": {
-          return await redis.zcard(dataKey);
-        }
-        case "list": {
-          return await redis.llen(dataKey);
-        }
-        case "hash": {
-          return await redis.hlen(dataKey);
-        }
-        case "stream": {
-          return await redis.xlen(dataKey);
-        }
+      const ttl = await redis.ttl(dataKey);
+      return ttl === TTL_INFINITE || ttl === TTL_NOT_FOUND ? ttl : Date.now() + ttl * 1e3;
+    }
+  });
+  useEffect5(() => {
+    if (data === TTL_NOT_FOUND) {
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY, dataKey]
+      });
+    }
+  }, [data === TTL_NOT_FOUND]);
+  return { isLoading, error, data };
+};
+
+// src/components/databrowser/hooks/use-set-simple-key.tsx
+import { useMutation as useMutation4 } from "@tanstack/react-query";
+var useSetSimpleKey = (dataKey, type) => {
+  const { redis } = useDatabrowser();
+  return useMutation4({
+    mutationFn: async (value) => {
+      if (type === "string") {
+        await redis.set(dataKey, value);
+      } else if (type === "json") {
+        await redis.json.set(dataKey, "$", JSON.parse(value));
+      } else {
+        throw new Error(`Invalid type when setting simple key: ${type}`);
       }
-      return null;
+    },
+    onSuccess: (_, value) => {
+      queryClient.setQueryData([FETCH_SIMPLE_KEY_QUERY_KEY, dataKey], value);
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY, dataKey]
+      });
     }
   });
 };
 
-// src/components/databrowser/hooks/use-fetch-key-size.ts
-import { useQuery as useQuery5 } from "@tanstack/react-query";
-var FETCH_KEY_SIZE_QUERY_KEY = "fetch-key-size";
-var useFetchKeySize = (dataKey) => {
+// src/components/databrowser/hooks/use-set-ttl.ts
+import { useMutation as useMutation5 } from "@tanstack/react-query";
+var useSetTTL = () => {
   const { redis } = useDatabrowser();
-  return useQuery5({
-    queryKey: [FETCH_KEY_SIZE_QUERY_KEY, dataKey],
-    queryFn: async () => {
-      return await redis.eval(`return redis.call("MEMORY", "USAGE", KEYS[1])`, [dataKey], []);
+  const updateTTL = useMutation5({
+    mutationFn: async ({ dataKey, ttl }) => {
+      await (ttl === void 0 || ttl === TTL_INFINITE ? redis.persist(dataKey) : redis.expire(dataKey, ttl));
+    },
+    onSuccess: (_, { dataKey }) => {
+      queryClient.removeQueries({
+        queryKey: [FETCH_TTL_QUERY_KEY, dataKey]
+      });
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY, dataKey]
+      });
     }
   });
+  return updateTTL;
 };
 
-// src/components/databrowser/components/display/ttl-popover.tsx
-import { useEffect as useEffect4, useMemo as useMemo3, useState as useState5 } from "react";
-import { Controller, useForm } from "react-hook-form";
+// src/components/databrowser/components/item-context-menu.tsx
+import { useState as useState6 } from "react";
+import { ContextMenuSeparator as ContextMenuSeparator2 } from "@radix-ui/react-context-menu";
 
-// src/components/ui/input.tsx
+// src/components/ui/context-menu.tsx
 import * as React7 from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var Input = React7.forwardRef(
-  ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx15(
-      "input",
-      {
-        type,
-        className: cn(
-          "flex h-8 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+var ContextMenu = ContextMenuPrimitive.Root;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuSubTrigger = React7.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs8(
+  ContextMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-900 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx15(ChevronRightIcon, { className: "ml-auto h-4 w-4" })
+    ]
   }
-);
-Input.displayName = "Input";
-
-// src/components/ui/popover.tsx
-import * as React8 from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React8.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx16(PopoverPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx16(
-  PopoverPrimitive.Content,
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+var ContextMenuSubContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+  ContextMenuPrimitive.SubContent,
   {
     ref,
-    align,
-    sideOffset,
     className: cn(
-      "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 w-72 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 shadow-md outline-none dark:border-zinc-800 mt-0.5 dark:bg-zinc-950 dark:text-zinc-50",
+      "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",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+var ContextMenuContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(ContextMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx15(
+  ContextMenuPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md 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
   }
 ) }));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+var ContextMenuItem = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx15(
+  ContextMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+var ContextMenuCheckboxItem = React7.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs8(
+  ContextMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx15("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx15(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx15(CheckIcon, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+var ContextMenuRadioItem = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs8(
+  ContextMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx15("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx15(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx15(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+var ContextMenuLabel = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx15(
+  ContextMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 text-sm font-semibold text-neutral-950 dark:text-neutral-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+var ContextMenuSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+  ContextMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-neutral-200 dark:bg-neutral-800", className),
+    ...props
+  }
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+var ContextMenuShortcut = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx15(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400",
+        className
+      ),
+      ...props
+    }
+  );
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
-// src/components/ui/select.tsx
-import * as React9 from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
-var Select = SelectPrimitive.Root;
-var SelectGroup = SelectPrimitive.Group;
-var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs9(
-  SelectPrimitive.Trigger,
+// src/components/ui/alert-dialog.tsx
+import * as React8 from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+var AlertDialog = AlertDialogPrimitive.Root;
+var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+var AlertDialogPortal = ({ ...props }) => /* @__PURE__ */ jsx16(AlertDialogPrimitive.Portal, { container: portalRoot, ...props });
+AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
+var AlertDialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  AlertDialogPrimitive.Overlay,
   {
-    ref,
     className: cn(
-      "relative flex h-8 w-full items-center justify-between rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-zinc-500 focus:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-950 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-400 dark:focus:ring-zinc-300",
+      "fixed inset-0 z-50 bg-white/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-zinc-950/80",
       className
     ),
     ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx17(SelectPrimitive.Icon, { asChild: true, className: "absolute right-2", children: /* @__PURE__ */ jsx17(
-        "svg",
-        {
-          width: "16",
-          height: "16",
-          viewBox: "0 0 16 16",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          children: /* @__PURE__ */ jsx17(
-            "path",
-            {
-              d: "M4 6L8 10L12 6",
-              stroke: "black",
-              strokeOpacity: "0.4",
-              strokeWidth: "1.4",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          )
-        }
-      ) })
-    ]
+    ref
   }
 ));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectContent = React9.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx17(SelectPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx17(
-  SelectPrimitive.Content,
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+var AlertDialogContent = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs9(AlertDialogPortal, { children: [
+  /* @__PURE__ */ jsx16(AlertDialogOverlay, {}),
+  /* @__PURE__ */ jsx16(
+    AlertDialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "antialiased data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-zinc-800 dark:bg-zinc-950 sm:rounded-lg md:w-full",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+var AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx16("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+AlertDialogHeader.displayName = "AlertDialogHeader";
+var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx16(
+  "div",
+  {
+    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+    ...props
+  }
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+var AlertDialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  AlertDialogPrimitive.Title,
   {
     ref,
-    className: cn(
-      "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md 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-zinc-800 dark:bg-zinc-950 dark:text-neutral-50",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-      className
-    ),
-    position,
-    ...props,
-    children: /* @__PURE__ */ jsx17(
-      SelectPrimitive.Viewport,
-      {
-        className: cn(
-          "p-1",
-          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        ),
-        children
-      }
-    )
+    className: cn("text-lg font-semibold", className),
+    ...props
   }
-) }));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
-  SelectPrimitive.Label,
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+var AlertDialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  AlertDialogPrimitive.Description,
   {
     ref,
-    className: cn("px-2 py-1.5 text-sm font-semibold", className),
+    className: cn("text-sm text-zinc-500 dark:text-zinc-400", className),
     ...props
   }
 ));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs9(
-  SelectPrimitive.Item,
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+var AlertDialogAction = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+var AlertDialogCancel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  AlertDialogPrimitive.Cancel,
   {
     ref,
-    className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
-      className
+    className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:!mt-0", className),
+    ...props
+  }
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+// src/components/databrowser/components/display/delete-alert-dialog.tsx
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+function DeleteAlertDialog({
+  children,
+  onDeleteConfirm,
+  open,
+  onOpenChange,
+  deletionType
+}) {
+  return /* @__PURE__ */ jsxs10(AlertDialog, { open, onOpenChange, children: [
+    children && /* @__PURE__ */ jsx17(AlertDialogTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxs10(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs10(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx17(AlertDialogTitle, { children: deletionType === "item" ? "Delete Item" : "Delete Key" }),
+        /* @__PURE__ */ jsxs10(AlertDialogDescription, { className: "mt-5", children: [
+          "Are you sure you want to delete this ",
+          deletionType,
+          "?",
+          /* @__PURE__ */ jsx17("br", {}),
+          "This action cannot be undone."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs10(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx17(AlertDialogCancel, { type: "button", children: "Cancel" }),
+        /* @__PURE__ */ jsx17(
+          AlertDialogAction,
+          {
+            className: "bg-red-500 text-gray-50 hover:bg-red-600",
+            onClick: onDeleteConfirm,
+            children: "Yes, Delete"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/databrowser/components/item-context-menu.tsx
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+var ItemContextMenu = ({
+  children,
+  dataKey,
+  type
+}) => {
+  const { mutate: editItem } = useEditListItem();
+  const [isAlertOpen, setAlertOpen] = useState6(false);
+  const [data, setData] = useState6();
+  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
+    /* @__PURE__ */ jsx18(
+      DeleteAlertDialog,
+      {
+        deletionType: "item",
+        open: isAlertOpen,
+        onOpenChange: setAlertOpen,
+        onDeleteConfirm: (e) => {
+          e.stopPropagation();
+          if (data) {
+            editItem({
+              type,
+              dataKey,
+              itemKey: data?.key,
+              // For deletion
+              newKey: void 0
+            });
+          }
+          setAlertOpen(false);
+        }
+      }
     ),
+    /* @__PURE__ */ jsxs11(ContextMenu, { children: [
+      /* @__PURE__ */ jsx18(
+        ContextMenuTrigger,
+        {
+          asChild: true,
+          onContextMenu: (e) => {
+            const el = e.target;
+            const item = el.closest("[data-item-key]");
+            if (item && item instanceof HTMLElement && item.dataset.itemKey !== void 0) {
+              setData({
+                key: item.dataset.itemKey,
+                value: item.dataset.itemValue
+              });
+            } else {
+              throw new Error("Key not found");
+            }
+          },
+          children
+        }
+      ),
+      /* @__PURE__ */ jsxs11(ContextMenuContent, { children: [
+        /* @__PURE__ */ jsx18(
+          ContextMenuItem,
+          {
+            onClick: () => {
+              if (!data) return;
+              navigator.clipboard.writeText(data?.key);
+              toast({
+                description: "Key copied to clipboard"
+              });
+            },
+            children: "Copy key"
+          }
+        ),
+        data?.value && /* @__PURE__ */ jsx18(
+          ContextMenuItem,
+          {
+            onClick: () => {
+              navigator.clipboard.writeText(data?.value ?? "");
+              toast({
+                description: "Value copied to clipboard"
+              });
+            },
+            children: "Copy value"
+          }
+        ),
+        /* @__PURE__ */ jsx18(ContextMenuSeparator2, {}),
+        /* @__PURE__ */ jsx18(ContextMenuItem, { disabled: type === "stream", onClick: () => setAlertOpen(true), children: "Delete item" })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/databrowser/components/sidebar/infinite-scroll.tsx
+import { IconLoader2 } from "@tabler/icons-react";
+
+// src/components/ui/scroll-area.tsx
+import * as React9 from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+var ScrollArea = React9.forwardRef(({ className, children, onScroll, ...props }, ref) => /* @__PURE__ */ jsxs12(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    className: cn("relative overflow-hidden", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx17("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx17(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17(
-        "svg",
+      /* @__PURE__ */ jsx19(
+        ScrollAreaPrimitive.Viewport,
         {
-          width: "15",
-          height: "15",
-          viewBox: "0 0 15 15",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          className: "h-4 w-4",
-          children: /* @__PURE__ */ jsx17(
-            "path",
-            {
-              d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
-              fill: "currentColor",
-              fillRule: "evenodd",
-              clipRule: "evenodd"
-            }
-          )
+          onScroll,
+          className: "h-full w-full rounded-[inherit] [&>div]:!block",
+          children
         }
-      ) }) }) }),
-      /* @__PURE__ */ jsx17(SelectPrimitive.ItemText, { children })
+      ),
+      /* @__PURE__ */ jsx19(ScrollBar, {}),
+      /* @__PURE__ */ jsx19(ScrollAreaPrimitive.Corner, {})
     ]
   }
 ));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
-  SelectPrimitive.Separator,
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800", className),
-    ...props
-  }
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-// src/components/ui/spinner.tsx
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
-var Spinner = ({
-  isLoading,
-  className,
-  isLoadingText,
-  children
-}) => {
-  return /* @__PURE__ */ jsx18("div", { className: className ?? "flex items-center", children: isLoading ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
-    isLoadingText,
-    /* @__PURE__ */ jsx18(
-      "svg",
+    orientation: "vertical",
+    className: cn("flex h-full w-2 touch-none select-none transition-colors", className),
+    ...props,
+    children: /* @__PURE__ */ jsx19(
+      ScrollAreaPrimitive.ScrollAreaThumb,
       {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        className: cn("h-4 w-4 animate-spin", isLoadingText ? "ml-2" : ""),
-        children: /* @__PURE__ */ jsx18("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+        className: cn("relative flex-1 rounded-full bg-neutral-200/70 dark:bg-neutral-800")
       }
     )
-  ] }) : children });
-};
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-// src/components/databrowser/components/display/ttl-popover.tsx
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
-var PERSISTED_KEY = -1;
-var timeUnits = [
-  { label: "Seconds", value: 1 },
-  { label: "Minutes", value: 60 },
-  { label: "Hours", value: 60 * 60 },
-  { label: "Days", value: 60 * 60 * 24 }
-];
-function TTLPopover({
-  children,
-  ttl,
-  dataKey
-}) {
-  const [open, setOpen] = useState5(false);
-  const { mutateAsync: setTTL, isPending } = useSetTTL();
-  const defaultValues = useMemo3(() => {
-    return { type: "Seconds", value: ttl };
-  }, [ttl]);
-  const { control, handleSubmit, formState, reset } = useForm({
-    defaultValues
-  });
-  useEffect4(() => {
-    reset(defaultValues, {
-      keepValues: true
-    });
-  }, [defaultValues]);
-  const onSubmit = handleSubmit(async ({ value, type }) => {
-    await setTTL({
-      dataKey,
-      ttl: value * timeUnits.find((unit) => unit.label === type).value
-    });
-    setOpen(false);
-  });
-  const handlePersist = async () => {
-    await setTTL({
-      dataKey,
-      ttl: void 0
-    });
-    setOpen(false);
+// src/components/databrowser/components/sidebar/infinite-scroll.tsx
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var InfiniteScroll = ({
+  query,
+  children
+}) => {
+  const handleScroll = (e) => {
+    const { scrollTop, clientHeight, scrollHeight } = e.currentTarget;
+    if (scrollTop + clientHeight > scrollHeight - 100) {
+      if (query.isFetching || !query.hasNextPage) {
+        return;
+      }
+      query.fetchNextPage();
+    }
   };
-  return /* @__PURE__ */ jsxs11(
-    Popover,
+  return /* @__PURE__ */ jsxs13(
+    ScrollArea,
     {
-      open,
-      onOpenChange: (isOpen) => {
-        if (isOpen) reset();
-        setOpen(isOpen);
-      },
+      type: "always",
+      className: "block h-full w-full transition-all",
+      onScroll: handleScroll,
       children: [
-        /* @__PURE__ */ jsx19(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx19("button", { children }) }),
-        /* @__PURE__ */ jsx19(PopoverContent, { className: "w-[300px]", align: "end", children: /* @__PURE__ */ jsxs11("form", { className: "space-y-4", onSubmit, children: [
-          /* @__PURE__ */ jsx19("h4", { className: "font-medium leading-none", children: "Expiration" }),
-          /* @__PURE__ */ jsxs11("div", { children: [
-            /* @__PURE__ */ jsxs11("div", { className: "flex items-center", children: [
-              /* @__PURE__ */ jsx19(
-                Controller,
-                {
-                  rules: {
-                    required: "Please enter an expiration time",
-                    min: { value: -1, message: "TTL can't be lower than -1" }
-                  },
-                  control,
-                  name: "value",
-                  render: ({ field }) => /* @__PURE__ */ jsx19(Input, { min: "-1", ...field, className: "grow rounded-r-none" })
-                }
-              ),
-              /* @__PURE__ */ jsx19(
-                Controller,
-                {
-                  control,
-                  name: "type",
-                  render: ({ field }) => /* @__PURE__ */ jsxs11(Select, { value: field.value, onValueChange: field.onChange, children: [
-                    /* @__PURE__ */ jsx19(SelectTrigger, { className: "w-auto rounded-l-none border-l-0 pr-8", children: /* @__PURE__ */ jsx19(SelectValue, {}) }),
-                    /* @__PURE__ */ jsx19(SelectContent, { children: timeUnits.map((unit) => /* @__PURE__ */ jsx19(SelectItem, { value: unit.label, children: unit.label }, unit.label)) })
-                  ] })
-                }
-              )
-            ] }),
-            formState.errors.value && /* @__PURE__ */ jsx19("p", { className: "mt-2 text-xs text-red-500", children: formState.errors.value.message }),
-            /* @__PURE__ */ jsx19("p", { className: "mt-2 text-xs text-zinc-500", children: "TTL sets a timer to automatically delete keys after a defined period." })
-          ] }),
-          /* @__PURE__ */ jsxs11("div", { className: "flex justify-between", children: [
-            /* @__PURE__ */ jsx19(
-              Button,
-              {
-                type: "button",
-                variant: "outline",
-                disabled: ttl === PERSISTED_KEY,
-                onClick: handlePersist,
-                children: "Persist"
-              }
-            ),
-            /* @__PURE__ */ jsxs11("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsx19(Button, { variant: "outline", onClick: () => setOpen(false), type: "button", children: "Cancel" }),
-              /* @__PURE__ */ jsx19(Button, { variant: "primary", type: "submit", children: /* @__PURE__ */ jsx19(Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" }) })
-            ] })
-          ] })
-        ] }) })
+        children,
+        /* @__PURE__ */ jsx20("div", { className: "flex h-[100px] justify-center py-2 text-zinc-300", children: query.isFetching && /* @__PURE__ */ jsx20(IconLoader2, { className: "animate-spin", size: 16 }) })
       ]
     }
   );
-}
-
-// src/components/databrowser/components/display/header-badges.tsx
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
-var LengthBadge = ({
-  dataKey,
-  type,
-  content
-}) => {
-  const { data, isLoading } = useFetchKeyLength({ dataKey, type });
-  const length = content?.length ?? data;
-  return /* @__PURE__ */ jsx20(Badge, { label: "Length:", children: isLoading ? /* @__PURE__ */ jsx20(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : length });
-};
-var SizeBadge = ({ dataKey }) => {
-  const { data: size } = useFetchKeySize(dataKey);
-  return /* @__PURE__ */ jsx20(Badge, { label: "Size:", children: size === void 0 || size === null ? /* @__PURE__ */ jsx20(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : bytes(size, {
-    unitSeparator: " "
-  }) });
 };
-var TTL_INFINITE = -1;
-var TTL_NOT_FOUND = -2;
-var TTLBadge = ({ dataKey }) => {
-  const { data: ttl } = useFetchTTL(dataKey);
-  const { deleteKeyCache } = useDeleteKeyCache();
-  useEffect5(() => {
-    const interval = setInterval(() => {
-      queryClient.setQueryData([FETCH_TTL_QUERY_KEY, dataKey], (ttl2) => {
-        if (ttl2 === void 0 || ttl2 === TTL_INFINITE) return ttl2;
-        if (ttl2 <= 1) {
-          deleteKeyCache(dataKey);
-          return TTL_NOT_FOUND;
-        }
-        return ttl2 - 1;
-      });
-    }, 1e3);
-    return () => clearInterval(interval);
-  }, []);
-  return /* @__PURE__ */ jsx20(Badge, { label: "TTL:", children: ttl === void 0 ? /* @__PURE__ */ jsx20(Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : /* @__PURE__ */ jsx20(TTLPopover, { dataKey, ttl, children: /* @__PURE__ */ jsxs12("div", { className: "flex gap-[2px]", children: [
-    ttl === TTL_INFINITE ? "Forever" : formatTime(ttl),
-    /* @__PURE__ */ jsx20(IconChevronDown, { className: "mt-[1px] text-zinc-400", size: 12 })
-  ] }) }) });
+
+// src/components/databrowser/components/display/display-header.tsx
+import { IconPlus } from "@tabler/icons-react";
+
+// src/components/databrowser/components/type-tag.tsx
+import {
+  IconArrowsSort,
+  IconCodeDots,
+  IconHash,
+  IconLayersIntersect,
+  IconList,
+  IconQuote
+} from "@tabler/icons-react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var iconsMap = {
+  string: /* @__PURE__ */ jsx21(IconQuote, { size: 15, stroke: 1.3 }),
+  set: /* @__PURE__ */ jsx21(IconLayersIntersect, { size: 15, stroke: 1.3 }),
+  hash: /* @__PURE__ */ jsx21(IconHash, { size: 15, stroke: 1.3 }),
+  json: /* @__PURE__ */ jsx21(IconCodeDots, { size: 15, stroke: 1.3 }),
+  zset: /* @__PURE__ */ jsx21(IconArrowsSort, { size: 15, stroke: 1.3 }),
+  list: /* @__PURE__ */ jsx21(IconList, { size: 15, stroke: 1.3 }),
+  stream: /* @__PURE__ */ jsx21(IconList, { size: 15, stroke: 1.3 })
 };
-var Badge = ({ children, label }) => /* @__PURE__ */ jsxs12("div", { className: "flex h-6 items-center gap-0.5 rounded-md bg-white px-2 text-xs text-zinc-700", children: [
-  /* @__PURE__ */ jsx20("span", { className: "text-zinc-500", children: label }),
-  /* @__PURE__ */ jsx20("span", { className: "font-medium", children })
-] });
+var tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-center", {
+  variants: {
+    variant: {
+      string: "bg-sky-200 text-sky-800",
+      hash: "bg-amber-200 text-amber-800",
+      set: "bg-indigo-200 text-indigo-800",
+      zset: "bg-pink-200 text-pink-800",
+      json: "bg-purple-200 text-purple-800",
+      list: "bg-orange-200 text-orange-800",
+      stream: "bg-green-200 text-green-800"
+    },
+    type: {
+      icon: "size-5",
+      badge: "h-6 px-2 uppercase whitespace-nowrap text-xs font-medium leading-none tracking-wide"
+    }
+  },
+  defaultVariants: {
+    variant: "string",
+    type: "icon"
+  }
+});
+function TypeTag({ className, variant, type }) {
+  return /* @__PURE__ */ jsx21("span", { className: cn(tagVariants({ variant, type, className })), children: type === "icon" ? iconsMap[variant] : DATA_TYPE_NAMES[variant] });
+}
 
 // src/components/databrowser/components/display/key-actions.tsx
 import { IconDotsVertical } from "@tabler/icons-react";
@@ -4450,10 +4508,10 @@ import { IconDotsVertical } from "@tabler/icons-react";
 import * as React10 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon as CheckIcon2, ChevronRightIcon as ChevronRightIcon2, DotFilledIcon as DotFilledIcon2 } from "@radix-ui/react-icons";
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs13(
+var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs14(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -4465,12 +4523,12 @@ var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, .
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx21(ChevronRightIcon2, { className: "ml-auto size-4" })
+      /* @__PURE__ */ jsx22(ChevronRightIcon2, { className: "ml-auto size-4" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
+var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -4482,7 +4540,7 @@ var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx21(DropdownMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx21(
+var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx22(DropdownMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx22(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -4496,7 +4554,7 @@ var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...pr
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx21(
+var DropdownMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx22(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -4509,7 +4567,7 @@ var DropdownMenuItem = React10.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs13(
+var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs14(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -4520,13 +4578,13 @@ var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checke
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx21("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx21(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx21(CheckIcon2, { className: "size-4" }) }) }),
+      /* @__PURE__ */ jsx22("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx22(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx22(CheckIcon2, { className: "size-4" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs13(
+var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs14(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -4536,13 +4594,13 @@ var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx21("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx21(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx21(DotFilledIcon2, { className: "size-4 fill-current" }) }) }),
+      /* @__PURE__ */ jsx22("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx22(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx22(DotFilledIcon2, { className: "size-4 fill-current" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx21(
+var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx22(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -4551,7 +4609,7 @@ var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
+var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -4561,18 +4619,18 @@ var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) =>
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx21("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
+  return /* @__PURE__ */ jsx22("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/components/databrowser/components/display/key-actions.tsx
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 function KeyActions({ dataKey, content }) {
   const { mutateAsync: deleteKey } = useDeleteKey();
-  return /* @__PURE__ */ jsxs14(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx22(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx22(Button, { size: "icon-sm", children: /* @__PURE__ */ jsx22(IconDotsVertical, { className: "size-4 text-zinc-500" }) }) }),
-    /* @__PURE__ */ jsxs14(DropdownMenuContent, { className: "", align: "end", children: [
-      content && /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs15(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx23(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx23(Button, { size: "icon-sm", children: /* @__PURE__ */ jsx23(IconDotsVertical, { className: "size-4 text-zinc-500" }) }) }),
+    /* @__PURE__ */ jsxs15(DropdownMenuContent, { className: "", align: "end", children: [
+      content && /* @__PURE__ */ jsx23(
         DropdownMenuItem,
         {
           onClick: () => {
@@ -4584,12 +4642,12 @@ function KeyActions({ dataKey, content }) {
           children: "Copy content"
         }
       ),
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx23(
         DeleteAlertDialog,
         {
           deletionType: "key",
           onDeleteConfirm: async () => await deleteKey(dataKey),
-          children: /* @__PURE__ */ jsx22(DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" })
+          children: /* @__PURE__ */ jsx23(DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" })
         }
       )
     ] })
@@ -4597,7 +4655,7 @@ function KeyActions({ dataKey, content }) {
 }
 
 // src/components/databrowser/components/display/display-header.tsx
-import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 var DisplayHeader = ({
   dataKey,
   type,
@@ -4607,34 +4665,33 @@ var DisplayHeader = ({
   const handleAddItem = () => {
     setSelectedListItem({ key: type === "stream" ? "*" : "", isNew: true });
   };
-  return /* @__PURE__ */ jsxs15("div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
-    /* @__PURE__ */ jsxs15("div", { className: "flex min-h-10 items-center justify-between gap-4", children: [
-      /* @__PURE__ */ jsx23("h2", { className: "grow truncate text-base", children: dataKey.trim() === "" ? /* @__PURE__ */ jsx23("span", { className: "ml-1 text-zinc-500", children: "(Empty Key)" }) : /* @__PURE__ */ jsx23("span", { className: "font-semibold", children: dataKey }) }),
-      /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
-        type !== "string" && type !== "json" && /* @__PURE__ */ jsx23(Button, { onClick: handleAddItem, size: "icon-sm", children: /* @__PURE__ */ jsx23(IconPlus, { className: "size-4 text-zinc-500" }) }),
-        /* @__PURE__ */ jsx23(KeyActions, { dataKey, content })
+  return /* @__PURE__ */ jsxs16("div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "flex min-h-10 items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx24("h2", { className: "grow truncate text-base", children: dataKey.trim() === "" ? /* @__PURE__ */ jsx24("span", { className: "ml-1 text-zinc-500", children: "(Empty Key)" }) : /* @__PURE__ */ jsx24("span", { className: "font-semibold", children: dataKey }) }),
+      /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1", children: [
+        type !== "string" && type !== "json" && /* @__PURE__ */ jsx24(Button, { onClick: handleAddItem, size: "icon-sm", children: /* @__PURE__ */ jsx24(IconPlus, { className: "size-4 text-zinc-500" }) }),
+        /* @__PURE__ */ jsx24(KeyActions, { dataKey, content })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs15("div", { className: "flex h-10 flex-wrap items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx23(TypeTag, { variant: type, type: "badge" }),
-      /* @__PURE__ */ jsx23(SizeBadge, { dataKey }),
-      /* @__PURE__ */ jsx23(LengthBadge, { dataKey, type, content }),
-      /* @__PURE__ */ jsx23(TTLBadge, { dataKey })
+    /* @__PURE__ */ jsxs16("div", { className: "flex h-10 flex-wrap items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx24(TypeTag, { variant: type, type: "badge" }),
+      /* @__PURE__ */ jsx24(SizeBadge, { dataKey }),
+      /* @__PURE__ */ jsx24(LengthBadge, { dataKey, type, content }),
+      /* @__PURE__ */ jsx24(HeaderTTLBadge, { dataKey })
     ] })
   ] });
 };
 
 // src/components/databrowser/components/display/display-list-edit.tsx
-import { useEffect as useEffect8 } from "react";
 import { Controller as Controller2, FormProvider, useForm as useForm2, useFormContext } from "react-hook-form";
 
 // src/components/ui/tooltip.tsx
 import * as React11 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx24(
+var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx25(
   TooltipPrimitive.Content,
   {
     ref,
@@ -4651,31 +4708,103 @@ var SimpleTooltip = ({
   content,
   children
 }) => {
-  if (!content) return /* @__PURE__ */ jsx24(Fragment3, { children });
-  return /* @__PURE__ */ jsxs16(Tooltip, { delayDuration: 400, children: [
-    /* @__PURE__ */ jsx24(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx24("div", { children }) }),
-    /* @__PURE__ */ jsx24(TooltipContent, { children: content })
+  if (!content) return /* @__PURE__ */ jsx25(Fragment3, { children });
+  return /* @__PURE__ */ jsxs17(Tooltip, { delayDuration: 400, children: [
+    /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25("div", { children }) }),
+    /* @__PURE__ */ jsx25(TooltipContent, { children: content })
   ] });
 };
 
+// src/components/databrowser/hooks/use-fetch-hash-ttl.ts
+import { useQuery as useQuery7 } from "@tanstack/react-query";
+var FETCH_HASH_FIELD_TTLS_QUERY_KEY = "fetch-hash-field-ttls";
+var useFetchHashFieldExpires = ({
+  dataKey,
+  fields
+}) => {
+  const { redis } = useDatabrowser();
+  return useQuery7({
+    queryKey: [FETCH_HASH_FIELD_TTLS_QUERY_KEY, dataKey, fields],
+    queryFn: async () => {
+      const cachedExpires = /* @__PURE__ */ new Map();
+      for (const field of fields) {
+        const expireAt = queryClient.getQueryData([
+          FETCH_HASH_FIELD_TTLS_QUERY_KEY,
+          dataKey,
+          field
+        ]);
+        if (expireAt !== void 0) cachedExpires.set(field, expireAt);
+      }
+      const filteredFields = fields.filter((field) => !cachedExpires.has(field));
+      if (filteredFields.length === 0) return Object.fromEntries(cachedExpires.entries());
+      const res = await redis.httl(dataKey, filteredFields);
+      const expireAts = res.map(
+        (ttl) => ttl === TTL_INFINITE || ttl === TTL_NOT_FOUND ? ttl : Date.now() + ttl * 1e3
+      );
+      for (const [i, field] of filteredFields.entries()) {
+        queryClient.setQueryData([FETCH_HASH_FIELD_TTLS_QUERY_KEY, dataKey, field], expireAts[i]);
+      }
+      const newExpiresArray = expireAts.map((expireAt, i) => [filteredFields[i], expireAt]);
+      return Object.fromEntries([...cachedExpires.entries(), ...newExpiresArray]);
+    }
+  });
+};
+
+// src/components/databrowser/hooks/use-set-hash-ttl.ts
+import { useMutation as useMutation6 } from "@tanstack/react-query";
+var useSetHashTTL = () => {
+  const { redis } = useDatabrowser();
+  return useMutation6({
+    mutationFn: async ({
+      dataKey,
+      field,
+      ttl
+    }) => {
+      await (ttl === void 0 || ttl === TTL_INFINITE ? redis.hpersist(dataKey, field) : redis.hexpire(dataKey, field, ttl));
+    },
+    onSuccess: (_, { dataKey }) => {
+      queryClient.removeQueries({
+        queryKey: [FETCH_HASH_FIELD_TTLS_QUERY_KEY, dataKey]
+      });
+    }
+  });
+};
+
+// src/components/databrowser/components/display/hash/hash-field-ttl-badge.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var HashFieldTTLBadge = ({ dataKey, field }) => {
+  const { data } = useFetchHashFieldExpires({ dataKey, fields: [field] });
+  const { mutate: setTTL, isPending } = useSetHashTTL();
+  const expireAt = data?.[field];
+  return /* @__PURE__ */ jsx26(
+    TTLBadge,
+    {
+      label: "Field TTL:",
+      expireAt,
+      setTTL: (ttl) => setTTL({ dataKey, field, ttl }),
+      isPending
+    }
+  );
+};
+
 // src/components/databrowser/components/display/input/use-field.tsx
-import { useEffect as useEffect7, useState as useState7 } from "react";
+import { useEffect as useEffect7, useState as useState8 } from "react";
 import { useController } from "react-hook-form";
 
 // src/components/databrowser/components/display/input/content-type-select.tsx
 import { useMemo as useMemo4 } from "react";
-import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 var ContentTypeSelect = ({
   value,
   onChange,
   data
 }) => {
   const isValidJSON = useMemo4(() => checkIsValidJSON(data), [data]);
-  return /* @__PURE__ */ jsxs17(Select, { value, onValueChange: onChange, children: [
-    /* @__PURE__ */ jsx25(SelectTrigger, { className: "h-6 w-auto border-none bg-transparent pl-0 pr-6 text-xs text-zinc-500", children: /* @__PURE__ */ jsx25(SelectValue, { placeholder: "Text" }) }),
-    /* @__PURE__ */ jsx25(SelectContent, { children: /* @__PURE__ */ jsxs17(SelectGroup, { children: [
-      /* @__PURE__ */ jsx25(SelectItem, { value: "Text", children: "Text" }),
-      /* @__PURE__ */ jsx25(SelectItem, { disabled: !isValidJSON, value: "JSON", children: "JSON" })
+  return /* @__PURE__ */ jsxs18(Select, { value, onValueChange: onChange, children: [
+    /* @__PURE__ */ jsx27(SelectTrigger, { className: "h-6 w-auto border-none bg-transparent pl-0 pr-6 text-xs text-zinc-500", children: /* @__PURE__ */ jsx27(SelectValue, { placeholder: "Text" }) }),
+    /* @__PURE__ */ jsx27(SelectContent, { children: /* @__PURE__ */ jsxs18(SelectGroup, { children: [
+      /* @__PURE__ */ jsx27(SelectItem, { value: "Text", children: "Text" }),
+      /* @__PURE__ */ jsx27(SelectItem, { disabled: !isValidJSON, value: "JSON", children: "JSON" })
     ] }) })
   ] });
 };
@@ -4685,12 +4814,12 @@ import { useEffect as useEffect6, useRef as useRef3 } from "react";
 import { Editor, useMonaco } from "@monaco-editor/react";
 
 // src/components/databrowser/copy-button.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { IconCheck, IconCopy } from "@tabler/icons-react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function CopyButton({ value, ...props }) {
-  const [copied, setCopied] = useState6(false);
-  return /* @__PURE__ */ jsx26(
+  const [copied, setCopied] = useState7(false);
+  return /* @__PURE__ */ jsx28(
     Button,
     {
       onClick: (e) => {
@@ -4707,7 +4836,7 @@ function CopyButton({ value, ...props }) {
       variant: "secondary",
       size: "icon-sm",
       ...props,
-      children: copied ? /* @__PURE__ */ jsx26(IconCheck, { className: "size-4 text-green-500" }) : /* @__PURE__ */ jsx26(IconCopy, { className: "size-4 text-zinc-500" })
+      children: copied ? /* @__PURE__ */ jsx28(IconCheck, { className: "size-4 text-green-500" }) : /* @__PURE__ */ jsx28(IconCopy, { className: "size-4 text-zinc-500" })
     }
   );
 }
@@ -4720,7 +4849,7 @@ var handleCopyClick = async (textToCopy) => {
 };
 
 // src/components/databrowser/components/display/input/custom-editor.tsx
-import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var CustomEditor = ({
   language,
   value,
@@ -4737,7 +4866,7 @@ var CustomEditor = ({
     }
     monaco?.editor.setModelLanguage(editorRef.current.getModel(), language);
   }, [monaco, language]);
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       className: cn("group/editor relative", height === void 0 && "h-full p-2"),
@@ -4745,7 +4874,7 @@ var CustomEditor = ({
         height
       },
       children: [
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx29(
           Editor,
           {
             loading: void 0,
@@ -4786,7 +4915,7 @@ var CustomEditor = ({
             }
           }
         ),
-        showCopyButton && /* @__PURE__ */ jsx27(
+        showCopyButton && /* @__PURE__ */ jsx29(
           CopyButton,
           {
             value,
@@ -4799,7 +4928,7 @@ var CustomEditor = ({
 };
 
 // src/components/databrowser/components/display/input/use-field.tsx
-import { Fragment as Fragment4, jsx as jsx28 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx30 } from "react/jsx-runtime";
 var useField = ({
   name,
   form,
@@ -4812,16 +4941,19 @@ var useField = ({
     name,
     control: form.control
   });
-  const [contentType, setContentType] = useState7(
+  const [contentType, setContentType] = useState8(
     () => checkIsValidJSON(field.value) ? "JSON" : "Text"
   );
   useEffect7(() => {
-    if (!checkIsValidJSON(data)) {
-      return;
+    if (contentType === "JSON" && checkIsValidJSON(data)) {
+      form.setValue(name, formatJSON(data), {
+        shouldDirty: false
+      });
+    } else {
+      form.setValue(name, data, {
+        shouldDirty: false
+      });
     }
-    form.setValue(name, formatJSON(data), {
-      shouldDirty: false
-    });
   }, [data]);
   const handleTypeChange = (type) => {
     setContentType(type);
@@ -4836,8 +4968,8 @@ var useField = ({
     }
   };
   return {
-    selector: /* @__PURE__ */ jsx28(ContentTypeSelect, { value: contentType, onChange: handleTypeChange, data: field.value }),
-    editor: /* @__PURE__ */ jsx28(Fragment4, { children: /* @__PURE__ */ jsx28(
+    selector: /* @__PURE__ */ jsx30(ContentTypeSelect, { value: contentType, onChange: handleTypeChange, data: field.value }),
+    editor: /* @__PURE__ */ jsx30(Fragment4, { children: /* @__PURE__ */ jsx30(
       CustomEditor,
       {
         language: contentType === "JSON" ? "json" : "plaintext",
@@ -4861,13 +4993,13 @@ var checkIsValidJSON = (value) => {
 };
 
 // src/components/databrowser/components/display/display-list-edit.tsx
-import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 var ListEditDisplay = ({
   dataKey,
   type,
   item
 }) => {
-  return /* @__PURE__ */ jsx29("div", { className: "grow rounded-md bg-zinc-100 p-3", children: /* @__PURE__ */ jsx29(ListEditForm, { item, type, dataKey }, item.key) });
+  return /* @__PURE__ */ jsx31("div", { className: "grow rounded-md bg-zinc-100 p-3", children: /* @__PURE__ */ jsx31(ListEditForm, { item, type, dataKey }, item.key) });
 };
 var ListEditForm = ({
   type,
@@ -4892,12 +5024,6 @@ var ListEditForm = ({
       value: itemValue
     }
   });
-  useEffect8(() => {
-    form.reset({
-      key: itemKey,
-      value: itemValue
-    });
-  }, [itemKey, itemValue]);
   const { mutateAsync: editItem, isPending } = useEditListItem();
   const { setSelectedListItem } = useDatabrowserStore();
   const [keyLabel, valueLabel] = headerLabels[type];
@@ -4912,9 +5038,9 @@ var ListEditForm = ({
     });
     setSelectedListItem(void 0);
   });
-  return /* @__PURE__ */ jsx29(FormProvider, { ...form, children: /* @__PURE__ */ jsxs19("form", { onSubmit, className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex grow flex-col gap-2", children: [
-      type !== "list" && /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx31(FormProvider, { ...form, children: /* @__PURE__ */ jsxs20("form", { onSubmit, className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex grow flex-col gap-2", children: [
+      type !== "list" && /* @__PURE__ */ jsx31(
         FormItem,
         {
           readOnly: type === "stream",
@@ -4924,7 +5050,7 @@ var ListEditForm = ({
           data: itemKey
         }
       ),
-      type === "zset" ? /* @__PURE__ */ jsx29(NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ jsx29(
+      type === "zset" ? /* @__PURE__ */ jsx31(NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ jsx31(
         FormItem,
         {
           readOnly: type === "stream",
@@ -4935,43 +5061,55 @@ var ListEditForm = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs19("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ jsx29(
-        Button,
-        {
-          type: "button",
-          onClick: () => {
-            setSelectedListItem(void 0);
-          },
-          children: "Cancel"
-        }
-      ),
-      /* @__PURE__ */ jsx29(
-        SimpleTooltip,
-        {
-          content: type === "stream" && !isNew ? "Streams are not mutable" : void 0,
-          children: /* @__PURE__ */ jsx29(
-            Button,
-            {
-              variant: "primary",
-              type: "submit",
-              disabled: !form.formState.isValid || !form.formState.isDirty || type === "stream" && !isNew,
-              children: /* @__PURE__ */ jsx29(Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" })
-            }
-          )
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxs20(
+      "div",
+      {
+        className: cn(
+          "flex items-center",
+          type === "hash" && itemKey !== "" ? "justify-between" : "justify-end"
+        ),
+        children: [
+          type === "hash" && itemKey !== "" && /* @__PURE__ */ jsx31(HashFieldTTLBadge, { dataKey, field: itemKey }),
+          /* @__PURE__ */ jsxs20("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx31(
+              Button,
+              {
+                type: "button",
+                onClick: () => {
+                  setSelectedListItem(void 0);
+                },
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx31(
+              SimpleTooltip,
+              {
+                content: type === "stream" && !isNew ? "Streams are not mutable" : void 0,
+                children: /* @__PURE__ */ jsx31(
+                  Button,
+                  {
+                    variant: "primary",
+                    type: "submit",
+                    disabled: !form.formState.isValid || !form.formState.isDirty || type === "stream" && !isNew,
+                    children: /* @__PURE__ */ jsx31(Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" })
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    )
   ] }) });
 };
 var NumberFormItem = ({ name, label }) => {
-  return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsx29("div", { className: "flex", children: /* @__PURE__ */ jsx29("span", { className: "text-xs font-medium text-zinc-700", children: label }) }),
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx31("div", { className: "flex", children: /* @__PURE__ */ jsx31("span", { className: "text-xs font-medium text-zinc-700", children: label }) }),
+    /* @__PURE__ */ jsx31(
       Controller2,
       {
         name,
-        render: ({ field }) => /* @__PURE__ */ jsx29(
+        render: ({ field }) => /* @__PURE__ */ jsx31(
           "input",
           {
             className: "plain-input rounded-md border border-zinc-300 px-3 py-1 shadow-sm",
@@ -4999,19 +5137,41 @@ var FormItem = ({
     readOnly,
     data
   });
-  return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1 text-xs", children: [
-      /* @__PURE__ */ jsx29("span", { className: "font-medium text-zinc-700", children: label }),
+  return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1 text-xs", children: [
+      /* @__PURE__ */ jsx31("span", { className: "font-medium text-zinc-700", children: label }),
       " ",
-      /* @__PURE__ */ jsx29("span", { className: "text-zinc-300", children: "/" }),
+      /* @__PURE__ */ jsx31("span", { className: "text-zinc-300", children: "/" }),
       selector
     ] }),
-    /* @__PURE__ */ jsx29("div", { className: "overflow-hidden rounded-md border border-zinc-300 bg-white p-2 shadow-sm", children: editor })
+    /* @__PURE__ */ jsx31("div", { className: "overflow-hidden rounded-md border border-zinc-300 bg-white p-2 shadow-sm", children: editor })
   ] });
 };
 
+// src/components/databrowser/components/display/hash/hash-field-ttl-info.tsx
+import { useEffect as useEffect8, useState as useState9 } from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var HashFieldTTLInfo = ({
+  dataKey,
+  field,
+  fields
+}) => {
+  const { data } = useFetchHashFieldExpires({ dataKey, fields });
+  const expireAt = data?.[field];
+  const [ttl, setTTL] = useState9(() => calculateTTL(expireAt));
+  useEffect8(() => {
+    setTTL(calculateTTL(expireAt));
+    const interval = setInterval(() => {
+      setTTL(calculateTTL(expireAt));
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [expireAt]);
+  if (!expireAt || expireAt === TTL_NOT_FOUND || expireAt === TTL_INFINITE) return;
+  return /* @__PURE__ */ jsx32("span", { className: "block min-w-[30px] whitespace-nowrap text-right text-red-600", children: formatTime(ttl ?? 0) });
+};
+
 // src/components/databrowser/components/display/display-list.tsx
-import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
 var headerLabels = {
   list: ["Index", "Content"],
   hash: ["Field", "Value"],
@@ -5022,10 +5182,10 @@ var headerLabels = {
 var ListDisplay = ({ dataKey, type }) => {
   const { selectedListItem } = useDatabrowserStore();
   const query = useFetchListItems({ dataKey, type });
-  return /* @__PURE__ */ jsxs20("div", { className: "flex h-full flex-col gap-2", children: [
-    /* @__PURE__ */ jsx30(DisplayHeader, { dataKey, type }),
-    selectedListItem && /* @__PURE__ */ jsx30(ListEditDisplay, { dataKey, type, item: selectedListItem }),
-    /* @__PURE__ */ jsx30("div", { className: cn("min-h-0 grow", selectedListItem && "hidden"), children: /* @__PURE__ */ jsx30(InfiniteScroll, { query, children: /* @__PURE__ */ jsx30("div", { className: "pr-3", children: /* @__PURE__ */ jsx30("table", { className: "w-full", children: /* @__PURE__ */ jsx30(ItemContextMenu, { dataKey, type, children: /* @__PURE__ */ jsx30("tbody", { children: /* @__PURE__ */ jsx30(ListItems, { dataKey, type, query }) }) }) }) }) }) })
+  return /* @__PURE__ */ jsxs21("div", { className: "flex h-full flex-col gap-2", children: [
+    /* @__PURE__ */ jsx33(DisplayHeader, { dataKey, type }),
+    selectedListItem && /* @__PURE__ */ jsx33(ListEditDisplay, { dataKey, type, item: selectedListItem }),
+    /* @__PURE__ */ jsx33("div", { className: cn("min-h-0 grow", selectedListItem && "hidden"), children: /* @__PURE__ */ jsx33(InfiniteScroll, { query, children: /* @__PURE__ */ jsx33("div", { className: "pr-3", children: /* @__PURE__ */ jsx33("table", { className: "w-full", children: /* @__PURE__ */ jsx33(ItemContextMenu, { dataKey, type, children: /* @__PURE__ */ jsx33("tbody", { children: /* @__PURE__ */ jsx33(ListItems, { dataKey, type, query }) }) }) }) }) }) })
   ] });
 };
 var ListItems = ({
@@ -5035,8 +5195,9 @@ var ListItems = ({
 }) => {
   const { setSelectedListItem } = useDatabrowserStore();
   const keys = useMemo5(() => query.data?.pages.flatMap((page) => page.keys) ?? [], [query.data]);
+  const fields = useMemo5(() => keys.map((key) => key.key), [keys]);
   const { mutate: editItem } = useEditListItem();
-  return /* @__PURE__ */ jsx30(Fragment5, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsx33(Fragment5, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ jsxs21(
     "tr",
     {
       "data-item-key": key,
@@ -5044,9 +5205,9 @@ var ListItems = ({
       onClick: () => {
         setSelectedListItem({ key });
       },
-      className: "h-10 border-b border-b-zinc-100 hover:bg-zinc-50",
+      className: cn("h-10 border-b border-b-zinc-100 hover:bg-zinc-100 "),
       children: [
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx33(
           "td",
           {
             className: cn(
@@ -5056,38 +5217,49 @@ var ListItems = ({
             children: key
           }
         ),
-        value !== void 0 && /* @__PURE__ */ jsx30(
+        value !== void 0 && /* @__PURE__ */ jsx33(
           "td",
           {
             className: cn("cursor-pointer truncate px-3", type === "zset" ? "w-24" : "max-w-0"),
             children: value
           }
         ),
-        type !== "stream" && /* @__PURE__ */ jsx30(
+        type !== "stream" && /* @__PURE__ */ jsx33(
           "td",
           {
-            width: 20,
-            className: "px-3",
+            className: "w-0 min-w-0 p-0",
             onClick: (e) => {
               e.stopPropagation();
             },
-            children: /* @__PURE__ */ jsx30(
-              DeleteAlertDialog,
-              {
-                deletionType: "item",
-                onDeleteConfirm: (e) => {
-                  e.stopPropagation();
-                  editItem({
-                    type,
-                    dataKey,
-                    itemKey: key,
-                    // For deletion
-                    newKey: void 0
-                  });
-                },
-                children: /* @__PURE__ */ jsx30(Button, { size: "icon-sm", variant: "secondary", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx30(IconTrash, { className: "size-4 text-zinc-500" }) })
-              }
-            )
+            children: /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-end gap-2", children: [
+              type === "hash" && /* @__PURE__ */ jsx33(HashFieldTTLInfo, { dataKey, field: key, fields }),
+              /* @__PURE__ */ jsx33(
+                DeleteAlertDialog,
+                {
+                  deletionType: "item",
+                  onDeleteConfirm: (e) => {
+                    e.stopPropagation();
+                    editItem({
+                      type,
+                      dataKey,
+                      itemKey: key,
+                      // For deletion
+                      newKey: void 0
+                    });
+                  },
+                  children: /* @__PURE__ */ jsx33(
+                    Button,
+                    {
+                      className: "",
+                      size: "icon-sm",
+                      variant: "secondary",
+                      onClick: (e) => e.stopPropagation(),
+                      children: /* @__PURE__ */ jsx33(IconTrash, { className: "size-4 text-zinc-500" })
+                    }
+                  )
+                }
+              )
+            ] })
           }
         )
       ]
@@ -5099,16 +5271,16 @@ var ListItems = ({
 // src/components/databrowser/components/display/display-simple.tsx
 import { useEffect as useEffect9 } from "react";
 import { useForm as useForm3 } from "react-hook-form";
-import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
 var EditorDisplay = ({ dataKey, type }) => {
   const { data } = useFetchSimpleKey(dataKey, type);
-  return /* @__PURE__ */ jsxs21("div", { className: "flex h-full w-full flex-col gap-2", children: [
-    /* @__PURE__ */ jsx31(DisplayHeader, { dataKey, type, content: data ?? void 0 }),
-    /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs22("div", { className: "flex h-full w-full flex-col gap-2", children: [
+    /* @__PURE__ */ jsx34(DisplayHeader, { dataKey, type, content: data ?? void 0 }),
+    /* @__PURE__ */ jsx34(
       "div",
       {
         className: "flex h-full grow flex-col gap-2\n      rounded-md bg-zinc-100 p-3",
-        children: data === void 0 ? /* @__PURE__ */ jsx31(Spinner, { isLoadingText: "", isLoading: true }) : data === null ? /* @__PURE__ */ jsx31(Fragment6, {}) : /* @__PURE__ */ jsx31(EditorDisplayForm, { dataKey, type, data }, dataKey)
+        children: data === void 0 ? /* @__PURE__ */ jsx34(Spinner, { isLoadingText: "", isLoading: true }) : data === null ? /* @__PURE__ */ jsx34(Fragment6, {}) : /* @__PURE__ */ jsx34(EditorDisplayForm, { dataKey, type, data }, dataKey)
       }
     )
   ] });
@@ -5122,26 +5294,21 @@ var EditorDisplayForm = ({
     defaultValues: { value: data }
   });
   useEffect9(() => {
-    form.reset(
-      { value: data },
-      {
-        keepValues: false
-      }
-    );
+    form.reset({ value: data });
   }, [data]);
   const { editor, selector } = useField({ name: "value", form, data });
   const { mutateAsync: setKey, isPending: isSettingKey } = useSetSimpleKey(dataKey, type);
   const handleCancel = () => {
-    form.reset();
+    form.reset({ value: data });
   };
-  return /* @__PURE__ */ jsxs21(Fragment6, { children: [
-    /* @__PURE__ */ jsxs21("div", { className: "flex grow flex-col gap-1", children: [
-      /* @__PURE__ */ jsx31("div", { className: "flex shrink-0 items-center gap-2", children: type === "json" ? /* @__PURE__ */ jsx31("div", {}) : selector }),
-      /* @__PURE__ */ jsx31("div", { className: "grow rounded-md border border-zinc-300 bg-white p-1", children: editor })
+  return /* @__PURE__ */ jsxs22(Fragment6, { children: [
+    /* @__PURE__ */ jsxs22("div", { className: "flex grow flex-col gap-1", children: [
+      /* @__PURE__ */ jsx34("div", { className: "flex shrink-0 items-center gap-2", children: type === "json" ? /* @__PURE__ */ jsx34("div", {}) : selector }),
+      /* @__PURE__ */ jsx34("div", { className: "grow rounded-md border border-zinc-300 bg-white p-1", children: editor })
     ] }),
-    /* @__PURE__ */ jsx31("div", { className: "flex shrink-0 items-center gap-2", children: /* @__PURE__ */ jsxs21("div", { className: "ml-auto flex gap-2", children: [
-      form.formState.isDirty && /* @__PURE__ */ jsx31(Button, { onClick: handleCancel, children: "Cancel" }),
-      /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx34("div", { className: "flex shrink-0 items-center gap-2", children: /* @__PURE__ */ jsxs22("div", { className: "ml-auto flex gap-2", children: [
+      form.formState.isDirty && /* @__PURE__ */ jsx34(Button, { onClick: handleCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx34(
         Button,
         {
           variant: "primary",
@@ -5149,7 +5316,7 @@ var EditorDisplayForm = ({
             await setKey(value);
           }),
           disabled: !form.formState.isValid || !form.formState.isDirty,
-          children: /* @__PURE__ */ jsx31(Spinner, { isLoading: isSettingKey, isLoadingText: "Saving", children: "Save" })
+          children: /* @__PURE__ */ jsx34(Spinner, { isLoading: isSettingKey, isLoadingText: "Saving", children: "Save" })
         }
       )
     ] }) })
@@ -5157,19 +5324,19 @@ var EditorDisplayForm = ({
 };
 
 // src/components/databrowser/components/display/index.tsx
-import { Fragment as Fragment7, jsx as jsx32 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx35 } from "react/jsx-runtime";
 var DataDisplay = () => {
   const { selectedKey } = useDatabrowserStore();
   const { query } = useKeys();
   const type = useKeyType(selectedKey);
-  return /* @__PURE__ */ jsx32("div", { className: "h-full rounded-xl border bg-white p-1", children: !selectedKey ? /* @__PURE__ */ jsx32("div", {}) : !type ? query.isLoading ? /* @__PURE__ */ jsx32("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx32("span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ jsx32("div", {}) : /* @__PURE__ */ jsx32(Fragment7, { children: type === "string" || type === "json" ? /* @__PURE__ */ jsx32(EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ jsx32(ListDisplay, { dataKey: selectedKey, type }) }) });
+  return /* @__PURE__ */ jsx35("div", { className: "h-full rounded-xl border bg-white p-1", children: !selectedKey ? /* @__PURE__ */ jsx35("div", {}) : !type ? query.isLoading ? /* @__PURE__ */ jsx35("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx35("span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ jsx35("div", {}) : /* @__PURE__ */ jsx35(Fragment7, { children: type === "string" || type === "json" ? /* @__PURE__ */ jsx35(EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ jsx35(ListDisplay, { dataKey: selectedKey, type }) }) });
 };
 
 // src/components/databrowser/components/sidebar/index.tsx
 import { IconRefresh } from "@tabler/icons-react";
 
 // src/components/databrowser/components/add-key-modal.tsx
-import { useState as useState8 } from "react";
+import { useState as useState10 } from "react";
 import { DialogDescription as DialogDescription2 } from "@radix-ui/react-dialog";
 import { PlusIcon } from "@radix-ui/react-icons";
 import { Controller as Controller3, useForm as useForm4 } from "react-hook-form";
@@ -5177,12 +5344,12 @@ import { Controller as Controller3, useForm as useForm4 } from "react-hook-form"
 // src/components/ui/dialog.tsx
 import * as React12 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
-var DialogPortal = (props) => /* @__PURE__ */ jsx33(DialogPrimitive.Portal, { container: portalRoot, ...props });
+var DialogPortal = (props) => /* @__PURE__ */ jsx36(DialogPrimitive.Portal, { container: portalRoot, ...props });
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;
-var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
+var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -5196,9 +5363,9 @@ var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs22(DialogPortal, { children: [
-  /* @__PURE__ */ jsx33(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs22(
+var DialogContent = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs23(DialogPortal, { children: [
+  /* @__PURE__ */ jsx36(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs23(
     DialogPrimitive.Content,
     {
       ref,
@@ -5218,8 +5385,8 @@ var DialogContent = React12.forwardRef(({ className, children, ...props }, ref)
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs22(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500 dark:ring-offset-zinc-950 dark:focus:ring-zinc-300 dark:data-[state=open]:bg-zinc-800 dark:data-[state=open]:text-zinc-400", children: [
-          /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsxs23(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500 dark:ring-offset-zinc-950 dark:focus:ring-zinc-300 dark:data-[state=open]:bg-zinc-800 dark:data-[state=open]:text-zinc-400", children: [
+          /* @__PURE__ */ jsx36(
             "svg",
             {
               width: "15",
@@ -5228,7 +5395,7 @@ var DialogContent = React12.forwardRef(({ className, children, ...props }, ref)
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
               className: "h-4 w-4",
-              children: /* @__PURE__ */ jsx33(
+              children: /* @__PURE__ */ jsx36(
                 "path",
                 {
                   d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
@@ -5239,16 +5406,16 @@ var DialogContent = React12.forwardRef(({ className, children, ...props }, ref)
               )
             }
           ),
-          /* @__PURE__ */ jsx33("span", { className: "sr-only", children: "Close" })
+          /* @__PURE__ */ jsx36("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
   )
 ] }));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx33("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx36("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
 DialogHeader.displayName = "DialogHeader";
-var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx33(
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx36(
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -5256,7 +5423,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx33(
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
+var DialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
   DialogPrimitive.Title,
   {
     ref,
@@ -5265,7 +5432,7 @@ var DialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
+var DialogDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
   DialogPrimitive.Description,
   {
     ref,
@@ -5276,10 +5443,10 @@ var DialogDescription = React12.forwardRef(({ className, ...props }, ref) => /*
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/databrowser/components/add-key-modal.tsx
-import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
 function AddKeyModal() {
   const { setSelectedKey } = useDatabrowserStore();
-  const [open, setOpen] = useState8(false);
+  const [open, setOpen] = useState10(false);
   const { mutateAsync: addKey, isPending } = useAddKey();
   const { control, handleSubmit, formState, reset } = useForm4({
     defaultValues: {
@@ -5299,7 +5466,7 @@ function AddKeyModal() {
       });
     }, 100);
   });
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     Dialog,
     {
       open,
@@ -5308,24 +5475,24 @@ function AddKeyModal() {
         setOpen(open2);
       },
       children: [
-        /* @__PURE__ */ jsx34(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx34(Button, { variant: "primary", size: "icon-sm", children: /* @__PURE__ */ jsx34(PlusIcon, { className: "size-4" }) }) }),
-        /* @__PURE__ */ jsxs23(DialogContent, { className: "max-w-[400px]", children: [
-          /* @__PURE__ */ jsx34(DialogHeader, { children: /* @__PURE__ */ jsx34(DialogTitle, { children: "Create new key" }) }),
-          /* @__PURE__ */ jsx34("div", { className: "sr-only", children: /* @__PURE__ */ jsx34(DialogDescription2, { children: "Create new key" }) }),
-          /* @__PURE__ */ jsxs23("form", { className: "mt-4", onSubmit, children: [
-            /* @__PURE__ */ jsxs23("div", { className: "flex gap-1", children: [
-              /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx37(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx37(Button, { variant: "primary", size: "icon-sm", children: /* @__PURE__ */ jsx37(PlusIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsxs24(DialogContent, { className: "max-w-[400px]", children: [
+          /* @__PURE__ */ jsx37(DialogHeader, { children: /* @__PURE__ */ jsx37(DialogTitle, { children: "Create new key" }) }),
+          /* @__PURE__ */ jsx37("div", { className: "sr-only", children: /* @__PURE__ */ jsx37(DialogDescription2, { children: "Create new key" }) }),
+          /* @__PURE__ */ jsxs24("form", { className: "mt-4", onSubmit, children: [
+            /* @__PURE__ */ jsxs24("div", { className: "flex gap-1", children: [
+              /* @__PURE__ */ jsx37(
                 Controller3,
                 {
                   control,
                   name: "type",
-                  render: ({ field }) => /* @__PURE__ */ jsxs23(Select, { value: field.value, onValueChange: field.onChange, children: [
-                    /* @__PURE__ */ jsx34(SelectTrigger, { className: "h-8 w-auto pl-[3px] pr-8", children: /* @__PURE__ */ jsx34(SelectValue, {}) }),
-                    /* @__PURE__ */ jsx34(SelectContent, { children: /* @__PURE__ */ jsx34(SelectGroup, { children: DATA_TYPES.map((type) => /* @__PURE__ */ jsx34(SelectItem, { value: type, children: /* @__PURE__ */ jsx34(TypeTag, { variant: type, type: "badge" }) }, type)) }) })
+                  render: ({ field }) => /* @__PURE__ */ jsxs24(Select, { value: field.value, onValueChange: field.onChange, children: [
+                    /* @__PURE__ */ jsx37(SelectTrigger, { className: "h-8 w-auto pl-[3px] pr-8", children: /* @__PURE__ */ jsx37(SelectValue, {}) }),
+                    /* @__PURE__ */ jsx37(SelectContent, { children: /* @__PURE__ */ jsx37(SelectGroup, { children: DATA_TYPES.map((type) => /* @__PURE__ */ jsx37(SelectItem, { value: type, children: /* @__PURE__ */ jsx37(TypeTag, { variant: type, type: "badge" }) }, type)) }) })
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx34(
+              /* @__PURE__ */ jsx37(
                 Controller3,
                 {
                   rules: {
@@ -5333,14 +5500,14 @@ function AddKeyModal() {
                   },
                   control,
                   name: "key",
-                  render: ({ field }) => /* @__PURE__ */ jsx34(Input, { placeholder: "mykey", ...field, className: "h-8 grow" })
+                  render: ({ field }) => /* @__PURE__ */ jsx37(Input, { placeholder: "mykey", ...field, className: "h-8 grow" })
                 }
               )
             ] }),
-            formState.errors.key && /* @__PURE__ */ jsx34("p", { className: "mb-3 mt-2 text-xs text-red-500", children: formState.errors.key?.message }),
-            /* @__PURE__ */ jsx34("p", { className: "mt-2 text-xs text-zinc-500", children: "After creating the key, you can edit the value" }),
-            /* @__PURE__ */ jsxs23("div", { className: "mt-6 flex justify-end gap-2", children: [
-              /* @__PURE__ */ jsx34(
+            formState.errors.key && /* @__PURE__ */ jsx37("p", { className: "mb-3 mt-2 text-xs text-red-500", children: formState.errors.key?.message }),
+            /* @__PURE__ */ jsx37("p", { className: "mt-2 text-xs text-zinc-500", children: "After creating the key, you can edit the value" }),
+            /* @__PURE__ */ jsxs24("div", { className: "mt-6 flex justify-end gap-2", children: [
+              /* @__PURE__ */ jsx37(
                 Button,
                 {
                   type: "button",
@@ -5351,7 +5518,7 @@ function AddKeyModal() {
                   children: "Cancel"
                 }
               ),
-              /* @__PURE__ */ jsx34(Button, { variant: "primary", type: "submit", children: /* @__PURE__ */ jsx34(Spinner, { isLoading: isPending, isLoadingText: "Creating", children: "Create" }) })
+              /* @__PURE__ */ jsx37(Button, { variant: "primary", type: "submit", children: /* @__PURE__ */ jsx37(Spinner, { isLoading: isPending, isLoadingText: "Creating", children: "Create" }) })
             ] })
           ] })
         ] })
@@ -5361,24 +5528,24 @@ function AddKeyModal() {
 }
 
 // src/components/databrowser/components/sidebar/empty.tsx
-import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
 var Empty = () => {
-  return /* @__PURE__ */ jsx35("div", { className: "flex h-full w-full items-center justify-center rounded-md border border-dashed px-4 py-6 text-center", children: /* @__PURE__ */ jsxs24("div", { className: "space-y-5", children: [
-    /* @__PURE__ */ jsx35("p", { className: "text-md font-medium", children: "Data on a break" }),
-    /* @__PURE__ */ jsx35("p", { className: "text-balance text-center", children: '"Quick, lure it back with some CLI magic!"' })
+  return /* @__PURE__ */ jsx38("div", { className: "flex h-full w-full items-center justify-center rounded-md border border-dashed px-4 py-6 text-center", children: /* @__PURE__ */ jsxs25("div", { className: "space-y-5", children: [
+    /* @__PURE__ */ jsx38("p", { className: "text-md font-medium", children: "Data on a break" }),
+    /* @__PURE__ */ jsx38("p", { className: "text-balance text-center", children: '"Quick, lure it back with some CLI magic!"' })
   ] }) });
 };
 
 // src/components/databrowser/components/sidebar-context-menu.tsx
-import { useState as useState9 } from "react";
+import { useState as useState11 } from "react";
 import { ContextMenuSeparator as ContextMenuSeparator3 } from "@radix-ui/react-context-menu";
-import { Fragment as Fragment8, jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
 var SidebarContextMenu = ({ children }) => {
   const { mutate: deleteKey } = useDeleteKey();
-  const [isAlertOpen, setAlertOpen] = useState9(false);
-  const [dataKey, setDataKey] = useState9("");
-  return /* @__PURE__ */ jsxs25(Fragment8, { children: [
-    /* @__PURE__ */ jsx36(
+  const [isAlertOpen, setAlertOpen] = useState11(false);
+  const [dataKey, setDataKey] = useState11("");
+  return /* @__PURE__ */ jsxs26(Fragment8, { children: [
+    /* @__PURE__ */ jsx39(
       DeleteAlertDialog,
       {
         deletionType: "key",
@@ -5391,8 +5558,8 @@ var SidebarContextMenu = ({ children }) => {
         }
       }
     ),
-    /* @__PURE__ */ jsxs25(ContextMenu, { children: [
-      /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsxs26(ContextMenu, { children: [
+      /* @__PURE__ */ jsx39(
         ContextMenuTrigger,
         {
           onContextMenu: (e) => {
@@ -5407,8 +5574,8 @@ var SidebarContextMenu = ({ children }) => {
           children
         }
       ),
-      /* @__PURE__ */ jsxs25(ContextMenuContent, { children: [
-        /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsxs26(ContextMenuContent, { children: [
+        /* @__PURE__ */ jsx39(
           ContextMenuItem,
           {
             onClick: () => {
@@ -5420,18 +5587,18 @@ var SidebarContextMenu = ({ children }) => {
             children: "Copy key"
           }
         ),
-        /* @__PURE__ */ jsx36(ContextMenuSeparator3, {}),
-        /* @__PURE__ */ jsx36(ContextMenuItem, { onClick: () => setAlertOpen(true), children: "Delete key" })
+        /* @__PURE__ */ jsx39(ContextMenuSeparator3, {}),
+        /* @__PURE__ */ jsx39(ContextMenuItem, { onClick: () => setAlertOpen(true), children: "Delete key" })
       ] })
     ] })
   ] });
 };
 
 // src/components/databrowser/components/sidebar/keys-list.tsx
-import { Fragment as Fragment9, jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
 var KeysList = () => {
   const { keys } = useKeys();
-  return /* @__PURE__ */ jsx37("div", { className: "pr-3", children: /* @__PURE__ */ jsx37(SidebarContextMenu, { children: /* @__PURE__ */ jsx37(Fragment9, { children: keys.map((data, i) => /* @__PURE__ */ jsx37(KeyItem, { nextKey: keys.at(i + 1)?.[0] ?? "", data }, data[0])) }) }) });
+  return /* @__PURE__ */ jsx40("div", { className: "pr-3", children: /* @__PURE__ */ jsx40(SidebarContextMenu, { children: /* @__PURE__ */ jsx40(Fragment9, { children: keys.map((data, i) => /* @__PURE__ */ jsx40(KeyItem, { nextKey: keys.at(i + 1)?.[0] ?? "", data }, data[0])) }) }) });
 };
 var keyStyles = {
   string: "border-sky-400 !bg-sky-50 text-sky-900",
@@ -5447,7 +5614,7 @@ var KeyItem = ({ data, nextKey }) => {
   const [dataKey, dataType] = data;
   const isKeySelected = selectedKey === dataKey;
   const isNextKeySelected = selectedKey === nextKey;
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     Button,
     {
       "data-key": dataKey,
@@ -5460,28 +5627,28 @@ var KeyItem = ({ data, nextKey }) => {
       ),
       onClick: () => setSelectedKey(dataKey),
       children: [
-        /* @__PURE__ */ jsx37(TypeTag, { variant: dataType, type: "icon" }),
-        /* @__PURE__ */ jsx37("p", { className: "truncate whitespace-nowrap", children: dataKey }),
-        !isKeySelected && !isNextKeySelected && /* @__PURE__ */ jsx37("span", { className: "absolute -bottom-px left-3 right-3 h-px bg-zinc-100" })
+        /* @__PURE__ */ jsx40(TypeTag, { variant: dataType, type: "icon" }),
+        /* @__PURE__ */ jsx40("p", { className: "truncate whitespace-nowrap", children: dataKey }),
+        !isKeySelected && !isNextKeySelected && /* @__PURE__ */ jsx40("span", { className: "absolute -bottom-px left-3 right-3 h-px bg-zinc-100" })
       ]
     }
   );
 };
 
 // src/components/databrowser/components/sidebar/search-input.tsx
-import { useState as useState10 } from "react";
+import { useState as useState12 } from "react";
 import { IconX } from "@tabler/icons-react";
-import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
 var SearchInput = () => {
   const { setSearchKey, search } = useDatabrowserStore();
-  const [state, setState] = useState10(search.key);
+  const [state, setState] = useState12(search.key);
   const submit = (value) => {
     if (value.trim() !== "" && !value.includes("*")) value = `${value}*`;
     setSearchKey(value);
     setState(value);
   };
-  return /* @__PURE__ */ jsxs27("div", { className: "relative grow", children: [
-    /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs28("div", { className: "relative grow", children: [
+    /* @__PURE__ */ jsx41(
       Input,
       {
         placeholder: "Search",
@@ -5496,7 +5663,7 @@ var SearchInput = () => {
         value: state
       }
     ),
-    search.key && /* @__PURE__ */ jsxs27(
+    state && /* @__PURE__ */ jsxs28(
       Button,
       {
         type: "button",
@@ -5505,10 +5672,11 @@ var SearchInput = () => {
         className: "absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100",
         onClick: () => {
           setSearchKey("");
+          setState("");
         },
         children: [
-          /* @__PURE__ */ jsx38(IconX, { size: 16 }),
-          /* @__PURE__ */ jsx38("span", { className: "sr-only", children: "Clear" })
+          /* @__PURE__ */ jsx41(IconX, { size: 16 }),
+          /* @__PURE__ */ jsx41("span", { className: "sr-only", children: "Clear" })
         ]
       }
     )
@@ -5516,19 +5684,19 @@ var SearchInput = () => {
 };
 
 // src/components/databrowser/components/sidebar/skeleton-buttons.tsx
-import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
 var DEFAULT_SKELETON_COUNT = 6;
-var LoadingSkeleton = () => /* @__PURE__ */ jsx39("div", { className: "grid", children: Array.from({ length: DEFAULT_SKELETON_COUNT }).fill(0).map((_, idx) => /* @__PURE__ */ jsxs28("div", { className: "flex h-10 items-center gap-2 px-3", children: [
-  /* @__PURE__ */ jsx39(Skeleton, { className: "size-5 shrink-0 rounded" }),
-  /* @__PURE__ */ jsx39(Skeleton, { className: "h-4 grow rounded" })
+var LoadingSkeleton = () => /* @__PURE__ */ jsx42("div", { className: "grid", children: Array.from({ length: DEFAULT_SKELETON_COUNT }).fill(0).map((_, idx) => /* @__PURE__ */ jsxs29("div", { className: "flex h-10 items-center gap-2 px-3", children: [
+  /* @__PURE__ */ jsx42(Skeleton, { className: "size-5 shrink-0 rounded" }),
+  /* @__PURE__ */ jsx42(Skeleton, { className: "h-4 grow rounded" })
 ] }, idx)) });
 
 // src/components/databrowser/components/sidebar/type-selector.tsx
-import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
 var ALL_TYPES_KEY = "all";
 function DataTypeSelector() {
   const { search, setSearchType } = useDatabrowserStore();
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     Select,
     {
       onValueChange: (type) => {
@@ -5540,9 +5708,9 @@ function DataTypeSelector() {
       },
       value: search.type === void 0 ? ALL_TYPES_KEY : search.type,
       children: [
-        /* @__PURE__ */ jsx40(SelectTrigger, { className: "!w-auto select-none whitespace-nowrap rounded-r-none border-r-0 border-zinc-300 pr-8", children: /* @__PURE__ */ jsx40(SelectValue, {}) }),
-        /* @__PURE__ */ jsx40(SelectContent, { children: /* @__PURE__ */ jsx40(SelectGroup, { children: [[ALL_TYPES_KEY, "All Types"], ...Object.entries(DATA_TYPE_NAMES)].map(
-          ([key, value]) => /* @__PURE__ */ jsx40(SelectItem, { value: key, children: value }, key)
+        /* @__PURE__ */ jsx43(SelectTrigger, { className: "!w-auto select-none whitespace-nowrap rounded-r-none border-r-0 border-zinc-300 pr-8", children: /* @__PURE__ */ jsx43(SelectValue, {}) }),
+        /* @__PURE__ */ jsx43(SelectContent, { children: /* @__PURE__ */ jsx43(SelectGroup, { children: [[ALL_TYPES_KEY, "All Types"], ...Object.entries(DATA_TYPE_NAMES)].map(
+          ([key, value]) => /* @__PURE__ */ jsx43(SelectItem, { value: key, children: value }, key)
         ) }) })
       ]
     }
@@ -5550,15 +5718,15 @@ function DataTypeSelector() {
 }
 
 // src/components/databrowser/components/sidebar/index.tsx
-import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
 function Sidebar() {
   const { keys, query, refetch } = useKeys();
-  return /* @__PURE__ */ jsxs30("div", { className: "flex h-full flex-col gap-2 rounded-xl border bg-white p-1", children: [
-    /* @__PURE__ */ jsxs30("div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
-      /* @__PURE__ */ jsxs30("div", { className: "flex h-10 items-center justify-between pl-1", children: [
-        /* @__PURE__ */ jsx41(DisplayDbSize, {}),
-        /* @__PURE__ */ jsxs30("div", { className: "flex gap-1", children: [
-          /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsxs31("div", { className: "flex h-full flex-col gap-2 rounded-xl border bg-white p-1", children: [
+    /* @__PURE__ */ jsxs31("div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "flex h-10 items-center justify-between pl-1", children: [
+        /* @__PURE__ */ jsx44(DisplayDbSize, {}),
+        /* @__PURE__ */ jsxs31("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsx44(
             Button,
             {
               className: "h-7 w-7 px-0",
@@ -5573,39 +5741,45 @@ function Sidebar() {
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_DB_SIZE_QUERY_KEY]
                 });
+                queryClient.invalidateQueries({
+                  queryKey: [FETCH_KEY_TYPE_QUERY_KEY]
+                });
               },
-              children: /* @__PURE__ */ jsx41(Spinner, { isLoading: query.isFetching, children: /* @__PURE__ */ jsx41(IconRefresh, { size: 16 }) })
+              children: /* @__PURE__ */ jsx44(Spinner, { isLoading: query.isFetching, children: /* @__PURE__ */ jsx44(IconRefresh, { size: 16 }) })
             }
           ),
-          /* @__PURE__ */ jsx41(AddKeyModal, {})
+          /* @__PURE__ */ jsx44(AddKeyModal, {})
         ] })
       ] }),
-      /* @__PURE__ */ jsxs30("div", { className: "flex h-10 items-center", children: [
-        /* @__PURE__ */ jsx41(DataTypeSelector, {}),
-        /* @__PURE__ */ jsx41(SearchInput, {})
+      /* @__PURE__ */ jsxs31("div", { className: "flex h-10 items-center", children: [
+        /* @__PURE__ */ jsx44(DataTypeSelector, {}),
+        /* @__PURE__ */ jsx44(SearchInput, {})
       ] })
     ] }),
-    query.isLoading ? /* @__PURE__ */ jsx41(LoadingSkeleton, {}) : keys.length > 0 ? /* @__PURE__ */ jsx41(InfiniteScroll, { query, children: /* @__PURE__ */ jsx41(KeysList, {}) }) : /* @__PURE__ */ jsx41(Empty, {})
+    query.isLoading && keys.length === 0 ? /* @__PURE__ */ jsx44(LoadingSkeleton, {}) : keys.length > 0 ? (
+      // Infinite scroll already has a loader at the bottom
+      /* @__PURE__ */ jsx44(InfiniteScroll, { query, children: /* @__PURE__ */ jsx44(KeysList, {}) })
+    ) : /* @__PURE__ */ jsx44(Empty, {})
   ] });
 }
 
 // src/components/databrowser/index.tsx
-import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs32 } from "react/jsx-runtime";
 var RedisBrowser = ({ token, url }) => {
   const credentials = useMemo6(() => ({ token, url }), [token, url]);
   useEffect10(() => {
     queryClient.resetQueries();
   }, [credentials.url]);
-  return /* @__PURE__ */ jsx42(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx42(TooltipProvider, { children: /* @__PURE__ */ jsx42(DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx42(KeysProvider, { children: /* @__PURE__ */ jsxs31("div", { className: "ups-db", style: { height: "100%" }, children: [
-    /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsx45(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx45(TooltipProvider, { children: /* @__PURE__ */ jsx45(DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx45(KeysProvider, { children: /* @__PURE__ */ jsxs32("div", { className: "ups-db", style: { height: "100%" }, children: [
+    /* @__PURE__ */ jsxs32(
       PanelGroup,
       {
         autoSaveId: "persistence",
         direction: "horizontal",
         className: "h-full w-full gap-0.5 text-sm antialiased",
         children: [
-          /* @__PURE__ */ jsx42(Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ jsx42(Sidebar, {}) }),
-          /* @__PURE__ */ jsx42(PanelResizeHandle, { className: "h-fullm flex w-1.5 items-center justify-center rounded-full hover:bg-zinc-300/20", children: /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsx45(Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ jsx45(Sidebar, {}) }),
+          /* @__PURE__ */ jsx45(PanelResizeHandle, { className: "h-fullm flex w-1.5 items-center justify-center rounded-full hover:bg-zinc-300/20", children: /* @__PURE__ */ jsx45(
             IconDotsVertical2,
             {
               size: 16,
@@ -5613,11 +5787,11 @@ var RedisBrowser = ({ token, url }) => {
               className: "pointer-events-none shrink-0 opacity-20"
             }
           ) }),
-          /* @__PURE__ */ jsx42(Panel, { minSize: 40, children: /* @__PURE__ */ jsx42(DataDisplay, {}) })
+          /* @__PURE__ */ jsx45(Panel, { minSize: 40, children: /* @__PURE__ */ jsx45(DataDisplay, {}) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx42(Toaster, {})
+    /* @__PURE__ */ jsx45(Toaster, {})
   ] }) }) }) }) });
 };
 export {