@upstash/react-redis-browser 0.1.6 → 0.1.7

package/dist/index.js

@@ -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 @@ function Toaster() {
 
 
 
+// src/components/databrowser/hooks/use-fetch-key-type.tsx
+
+var FETCH_KEY_TYPE_QUERY_KEY = "fetch-key-type";
+var useFetchKeyType = (key) => {
+  const { redisNoPipeline: redis } = useDatabrowser();
+  return _reactquery.useQuery.call(void 0, {
+    queryKey: [FETCH_KEY_TYPE_QUERY_KEY, key],
+    queryFn: async () => {
+      if (!key) return "none";
+      return await redis.type(key);
+    }
+  });
+};
+
 // src/components/databrowser/hooks/use-fetch-keys.ts
 
 
@@ -3050,6 +3064,8 @@ var KeysContext = _react.createContext.call(void 0, void 0);
 var FETCH_KEYS_QUERY_KEY = "use-fetch-keys";
 var KeysProvider = ({ children }) => {
   const { search } = useDatabrowserStore();
+  const cleanSearchKey = search.key.replace("*", "");
+  const { data: exactMatchType } = useFetchKeyType(cleanSearchKey);
   const { fetchKeys, resetCache } = useFetchKeys(search);
   const pageRef = _react.useRef.call(void 0, 0);
   const query = _reactquery.useInfiniteQuery.call(void 0, {
@@ -3072,6 +3088,9 @@ var KeysProvider = ({ children }) => {
   }, [query, resetCache]);
   const keys = _react.useMemo.call(void 0, () => {
     const keys2 = _nullishCoalesce(_optionalChain([query, 'access', _10 => _10.data, 'optionalAccess', _11 => _11.pages, 'access', _12 => _12.flatMap, 'call', _13 => _13((page) => page.keys)]), () => ( []));
+    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,7 +3099,7 @@ var KeysProvider = ({ children }) => {
       dedupedKeys.push(key);
     }
     return dedupedKeys;
-  }, [query.data]);
+  }, [query.data, cleanSearchKey, exactMatchType]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     KeysContext.Provider,
     {
@@ -3270,76 +3289,6 @@ var useAddKey = () => {
 // src/components/databrowser/hooks/use-delete-key-cache.ts
 
 
-// src/components/databrowser/hooks/use-fetch-simple-key.tsx
-
-var FETCH_SIMPLE_KEY_QUERY_KEY = "fetch-simple-key";
-var useFetchSimpleKey = (dataKey, type) => {
-  const { redisNoPipeline: redis } = useDatabrowser();
-  const { deleteKeyCache } = useDeleteKeyCache();
-  return _reactquery.useQuery.call(void 0, {
-    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 = _react.useCallback.call(void 0, 
-    (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 = _reactquery.useMutation.call(void 0, {
-    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
-
-
 // src/components/databrowser/hooks/use-fetch-list-items.tsx
 
 var LIST_DISPLAY_PAGE_SIZE = 50;
@@ -3365,13 +3314,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 +3347,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 +3405,81 @@ function transformArray(inputArray) {
   }, []);
 }
 
+// src/components/databrowser/hooks/use-fetch-simple-key.tsx
+
+var FETCH_SIMPLE_KEY_QUERY_KEY = "fetch-simple-key";
+var useFetchSimpleKey = (dataKey, type) => {
+  const { redisNoPipeline: redis } = useDatabrowser();
+  const { deleteKeyCache } = useDeleteKeyCache();
+  return _reactquery.useQuery.call(void 0, {
+    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 = _react.useCallback.call(void 0, 
+    (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 = _reactquery.useMutation.call(void 0, {
+    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
+
 var useEditListItem = () => {
   const { redis } = useDatabrowser();
   return _reactquery.useMutation.call(void 0, {
@@ -3536,912 +3562,938 @@ var useEditListItem = () => {
 // src/components/databrowser/hooks/use-fetch-ttl.ts
 
 
-var FETCH_TTL_QUERY_KEY = "fetch-ttl";
-var useFetchTTL = (dataKey) => {
+
+// src/components/databrowser/components/display/ttl-badge.tsx
+
+
+
+// src/components/databrowser/components/display/header-badges.tsx
+var _bytes = require('bytes'); var _bytes2 = _interopRequireDefault(_bytes);
+
+// src/components/databrowser/hooks/use-fetch-key-length.ts
+
+var FETCH_KEY_LENGTH_QUERY_KEY = "fetch-key-length";
+var useFetchKeyLength = ({ dataKey, type }) => {
   const { redis } = useDatabrowser();
-  const { isLoading, error, data } = _reactquery.useQuery.call(void 0, {
-    queryKey: [FETCH_TTL_QUERY_KEY, dataKey],
+  return _reactquery.useQuery.call(void 0, {
+    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;
     }
   });
-  _react.useEffect.call(void 0, () => {
-    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
+// src/components/databrowser/hooks/use-fetch-key-size.ts
 
-var useSetSimpleKey = (dataKey, type) => {
+var FETCH_KEY_SIZE_QUERY_KEY = "fetch-key-size";
+var useFetchKeySize = (dataKey) => {
   const { redis } = useDatabrowser();
-  return _reactquery.useMutation.call(void 0, {
-    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 _reactquery.useQuery.call(void 0, {
+    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
+// src/components/databrowser/components/display/header-badges.tsx
 
-var useSetTTL = () => {
-  const { redis } = useDatabrowser();
-  const updateTTL = _reactquery.useMutation.call(void 0, {
-    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]
-      });
+var LengthBadge = ({
+  dataKey,
+  type,
+  content
+}) => {
+  const { data, isLoading } = useFetchKeyLength({ dataKey, type });
+  const length = _nullishCoalesce(_optionalChain([content, 'optionalAccess', _20 => _20.length]), () => ( data));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Badge, { label: "Length:", children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : length });
+};
+var SizeBadge = ({ dataKey }) => {
+  const { data: size } = useFetchKeySize(dataKey);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Badge, { label: "Size:", children: size === void 0 || size === null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : _bytes2.default.call(void 0, size, {
+    unitSeparator: " "
+  }) });
+};
+var HeaderTTLBadge = ({ dataKey }) => {
+  const { data: expireAt } = useFetchKeyExpire(dataKey);
+  const { mutate: setTTL, isPending } = useSetTTL();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    TTLBadge,
+    {
+      expireAt,
+      setTTL: (ttl) => setTTL({ dataKey, ttl }),
+      isPending
     }
-  });
-  return updateTTL;
+  );
 };
+var Badge = ({ children, label }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-6 items-center gap-0.5 rounded-md bg-white px-2 text-xs text-zinc-700", children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-zinc-500", children: label }),
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium", children })
+] });
 
-// src/components/databrowser/components/item-context-menu.tsx
+// src/components/databrowser/components/display/ttl-popover.tsx
 
-var _reactcontextmenu = require('@radix-ui/react-context-menu'); var ContextMenuPrimitive = _interopRequireWildcard(_reactcontextmenu);
+var _reacthookform = require('react-hook-form');
 
-// src/components/ui/context-menu.tsx
+// src/components/ui/input.tsx
 
 
+var Input = React4.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "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
+      }
+    );
+  }
+);
+Input.displayName = "Input";
 
+// src/components/ui/popover.tsx
 
-var ContextMenu = ContextMenuPrimitive.Root;
-var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-var ContextMenuSubTrigger = React4.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-  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__ */ _jsxruntime.jsx.call(void 0, _reacticons.ChevronRightIcon, { className: "ml-auto h-4 w-4" })
-    ]
-  }
-));
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  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
-  }
-));
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  ContextMenuPrimitive.Content,
+var _reactpopover = require('@radix-ui/react-popover'); var PopoverPrimitive = _interopRequireWildcard(_reactpopover);
+
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  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__ */ _jsxruntime.jsx.call(void 0, 
-  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__ */ _jsxruntime.jsxs.call(void 0, 
-  ContextMenuPrimitive.CheckboxItem,
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/components/ui/select.tsx
+
+var _reactselect = require('@radix-ui/react-select'); var SelectPrimitive = _interopRequireWildcard(_reactselect);
+
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  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__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.CheckIcon, { className: "h-4 w-4" }) }) }),
-      children
+      children,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.Icon, { asChild: true, className: "absolute right-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "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__ */ _jsxruntime.jsxs.call(void 0, 
-  ContextMenuPrimitive.RadioItem,
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectContent = React6.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  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__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
-      children
-    ]
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      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__ */ _jsxruntime.jsx.call(void 0, 
-  ContextMenuPrimitive.Label,
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  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__ */ _jsxruntime.jsx.call(void 0, 
-  ContextMenuPrimitive.Separator,
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  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__ */ _jsxruntime.jsx.call(void 0, 
-    "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
-
-var _reactalertdialog = require('@radix-ui/react-alert-dialog'); var AlertDialogPrimitive = _interopRequireWildcard(_reactalertdialog);
-
-var AlertDialog = AlertDialogPrimitive.Root;
-var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-var AlertDialogPortal = ({ ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogPrimitive.Portal, { container: portalRoot, ...props });
-AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
-var AlertDialogOverlay = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  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__ */ _jsxruntime.jsxs.call(void 0, AlertDialogPortal, { children: [
-  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogOverlay, {}),
-  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    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__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
-AlertDialogHeader.displayName = "AlertDialogHeader";
-var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  "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__ */ _jsxruntime.jsx.call(void 0, 
-  AlertDialogPrimitive.Title,
-  {
-    ref,
-    className: cn("text-lg font-semibold", className),
-    ...props
-  }
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  AlertDialogPrimitive.Description,
-  {
-    ref,
-    className: cn("text-sm text-zinc-500 dark:text-zinc-400", className),
-    ...props
+    children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "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__ */ _jsxruntime.jsx.call(void 0, 
+            "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__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.ItemText, { children })
+    ]
   }
 ));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  AlertDialogPrimitive.Cancel,
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  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
+// src/components/ui/spinner.tsx
 
-function DeleteAlertDialog({
-  children,
-  onDeleteConfirm,
-  open,
-  onOpenChange,
-  deletionType
-}) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialog, { open, onOpenChange, children: [
-    children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogTrigger, { asChild: true, children }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogContent, { children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogHeader, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogTitle, { children: deletionType === "item" ? "Delete Item" : "Delete Key" }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogDescription, { className: "mt-5", children: [
-          "Are you sure you want to delete this ",
-          deletionType,
-          "?",
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}),
-          "This action cannot be undone."
-        ] })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogFooter, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogCancel, { type: "button", children: "Cancel" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          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
-
-var ItemContextMenu = ({
-  children,
-  dataKey,
-  type
+var Spinner = ({
+  isLoading,
+  className,
+  isLoadingText,
+  children
 }) => {
-  const { mutate: editItem } = useEditListItem();
-  const [isAlertOpen, setAlertOpen] = _react.useState.call(void 0, false);
-  const [data, setData] = _react.useState.call(void 0, );
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _nullishCoalesce(className, () => ( "flex items-center")), children: isLoading ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    isLoadingText,
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      DeleteAlertDialog,
-      {
-        deletionType: "item",
-        open: isAlertOpen,
-        onOpenChange: setAlertOpen,
-        onDeleteConfirm: (e) => {
-          e.stopPropagation();
-          if (data) {
-            editItem({
-              type,
-              dataKey,
-              itemKey: _optionalChain([data, 'optionalAccess', _20 => _20.key]),
-              // For deletion
-              newKey: void 0
-            });
-          }
-          setAlertOpen(false);
-        }
-      }
-    ),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenu, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        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__ */ _jsxruntime.jsxs.call(void 0, ContextMenuContent, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          ContextMenuItem,
-          {
-            onClick: () => {
-              if (!data) return;
-              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _21 => _21.key]));
-              toast({
-                description: "Key copied to clipboard"
-              });
-            },
-            children: "Copy key"
-          }
-        ),
-        _optionalChain([data, 'optionalAccess', _22 => _22.value]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          ContextMenuItem,
-          {
-            onClick: () => {
-              navigator.clipboard.writeText(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _23 => _23.value]), () => ( "")));
-              toast({
-                description: "Value copied to clipboard"
-              });
-            },
-            children: "Copy value"
-          }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactcontextmenu.ContextMenuSeparator, {}),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuItem, { disabled: type === "stream", onClick: () => setAlertOpen(true), children: "Delete item" })
-      ] })
-    ] })
-  ] });
-};
-
-// src/components/databrowser/components/sidebar/infinite-scroll.tsx
-
-
-// src/components/ui/scroll-area.tsx
-
-var _reactscrollarea = require('@radix-ui/react-scroll-area'); var ScrollAreaPrimitive = _interopRequireWildcard(_reactscrollarea);
-
-var ScrollArea = React6.forwardRef(({ className, children, onScroll, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-  ScrollAreaPrimitive.Root,
-  {
-    ref,
-    className: cn("relative overflow-hidden", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        ScrollAreaPrimitive.Viewport,
-        {
-          onScroll,
-          className: "h-full w-full rounded-[inherit] [&>div]:!block",
-          children
-        }
-      ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollBar, {}),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollAreaPrimitive.Corner, {})
-    ]
-  }
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  ScrollAreaPrimitive.ScrollAreaScrollbar,
-  {
-    ref,
-    orientation: "vertical",
-    className: cn("flex h-full w-2 touch-none select-none transition-colors", className),
-    ...props,
-    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      ScrollAreaPrimitive.ScrollAreaThumb,
+      "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__ */ _jsxruntime.jsx.call(void 0, "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
+// src/components/databrowser/components/display/ttl-popover.tsx
 
-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();
-    }
+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] = _react.useState.call(void 0, false);
+  const defaultValues = _react.useMemo.call(void 0, () => {
+    return { type: "Seconds", value: ttl };
+  }, [ttl]);
+  const { control, handleSubmit, formState, reset } = _reacthookform.useForm.call(void 0, {
+    defaultValues
+  });
+  _react.useEffect.call(void 0, () => {
+    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__ */ _jsxruntime.jsxs.call(void 0, 
-    ScrollArea,
+    Popover,
     {
-      type: "always",
-      className: "block h-full w-full transition-all",
-      onScroll: handleScroll,
+      open,
+      onOpenChange: (isOpen) => {
+        if (isOpen) reset();
+        setOpen(isOpen);
+      },
       children: [
-        children,
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-[100px] justify-center py-2 text-zinc-300", children: query.isFetching && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLoader2, { className: "animate-spin", size: 16 }) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { children }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverContent, { className: "w-[300px]", align: "end", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "form",
+          {
+            className: "space-y-4",
+            onSubmit: (e) => {
+              onSubmit(e);
+              e.stopPropagation();
+            },
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "font-medium leading-none", children: "Expiration" }),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center", children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    _reacthookform.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__ */ _jsxruntime.jsx.call(void 0, Input, { min: "-1", ...field, className: "grow rounded-r-none" })
+                    }
+                  ),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    _reacthookform.Controller,
+                    {
+                      control,
+                      name: "type",
+                      render: ({ field }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select, { value: field.value, onValueChange: field.onChange, children: [
+                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTrigger, { className: "w-auto rounded-l-none border-l-0 pr-8", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, {}) }),
+                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContent, { children: timeUnits.map((unit) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: unit.label, children: unit.label }, unit.label)) })
+                      ] })
+                    }
+                  )
+                ] }),
+                formState.errors.value && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-2 text-xs text-red-500", children: formState.errors.value.message }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-2 text-xs text-zinc-500", children: "TTL sets a timer to automatically delete keys after a defined period." })
+              ] }),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    disabled: ttl === TTL_INFINITE,
+                    onClick: handlePersist,
+                    children: "Persist"
+                  }
+                ),
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", onClick: () => setOpen(false), type: "button", children: "Cancel" }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "primary", type: "submit", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" }) })
+                ] })
+              ] })
+            ]
+          }
+        ) })
       ]
     }
   );
-};
-
-// src/components/databrowser/components/display/display-header.tsx
-
-
-// src/components/databrowser/components/type-tag.tsx
-
-
-
-
-
-
-
-
-
-var iconsMap = {
-  string: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconQuote, { size: 15, stroke: 1.3 }),
-  set: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLayersIntersect, { size: 15, stroke: 1.3 }),
-  hash: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconHash, { size: 15, stroke: 1.3 }),
-  json: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCodeDots, { size: 15, stroke: 1.3 }),
-  zset: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconArrowsSort, { size: 15, stroke: 1.3 }),
-  list: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconList, { size: 15, stroke: 1.3 }),
-  stream: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.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__ */ _jsxruntime.jsx.call(void 0, "span", { className: cn(tagVariants({ variant, type, className })), children: type === "icon" ? iconsMap[variant] : DATA_TYPE_NAMES[variant] });
 }
 
-// src/components/databrowser/components/display/header-badges.tsx
+// src/components/databrowser/components/display/ttl-badge.tsx
 
+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] = _react.useState.call(void 0, () => calculateTTL(expireAt));
+  _react.useEffect.call(void 0, () => {
+    setTTLLabel(calculateTTL(expireAt));
+    const interval = setInterval(() => {
+      setTTLLabel(calculateTTL(expireAt));
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [expireAt]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Badge, { label, children: ttl === void 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TTLPopover, { ttl, setTTL, isPending, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-[2px]", children: [
+    ttl === TTL_INFINITE ? "Forever" : formatTime(ttl),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconChevronDown, { className: "mt-[1px] text-zinc-400", size: 12 })
+  ] }) }) });
+};
 
-var _bytes = require('bytes'); var _bytes2 = _interopRequireDefault(_bytes);
+// src/components/databrowser/hooks/use-fetch-ttl.ts
+var FETCH_TTL_QUERY_KEY = "fetch-ttl";
+var useFetchKeyExpire = (dataKey) => {
+  const { redis } = useDatabrowser();
+  const { isLoading, error, data } = _reactquery.useQuery.call(void 0, {
+    queryKey: [FETCH_TTL_QUERY_KEY, dataKey],
+    queryFn: async () => {
+      const ttl = await redis.ttl(dataKey);
+      return ttl === TTL_INFINITE || ttl === TTL_NOT_FOUND ? ttl : Date.now() + ttl * 1e3;
+    }
+  });
+  _react.useEffect.call(void 0, () => {
+    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-fetch-key-length.ts
+// src/components/databrowser/hooks/use-set-simple-key.tsx
 
-var FETCH_KEY_LENGTH_QUERY_KEY = "fetch-key-length";
-var useFetchKeyLength = ({ dataKey, type }) => {
+var useSetSimpleKey = (dataKey, type) => {
   const { redis } = useDatabrowser();
-  return _reactquery.useQuery.call(void 0, {
-    queryKey: [FETCH_KEY_LENGTH_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);
-        }
+  return _reactquery.useMutation.call(void 0, {
+    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
+// src/components/databrowser/hooks/use-set-ttl.ts
 
-var FETCH_KEY_SIZE_QUERY_KEY = "fetch-key-size";
-var useFetchKeySize = (dataKey) => {
+var useSetTTL = () => {
   const { redis } = useDatabrowser();
-  return _reactquery.useQuery.call(void 0, {
-    queryKey: [FETCH_KEY_SIZE_QUERY_KEY, dataKey],
-    queryFn: async () => {
-      return await redis.eval(`return redis.call("MEMORY", "USAGE", KEYS[1])`, [dataKey], []);
+  const updateTTL = _reactquery.useMutation.call(void 0, {
+    mutationFn: async ({ dataKey, ttl }) => {
+      await (ttl === void 0 || ttl === TTL_INFINITE ? redis.persist(dataKey) : redis.expire(dataKey, ttl));
+    },
+    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
-
-var _reacthookform = require('react-hook-form');
+// src/components/databrowser/components/item-context-menu.tsx
 
-// src/components/ui/input.tsx
+var _reactcontextmenu = require('@radix-ui/react-context-menu'); var ContextMenuPrimitive = _interopRequireWildcard(_reactcontextmenu);
 
+// src/components/ui/context-menu.tsx
 
-var Input = React7.forwardRef(
-  ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "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
-      }
-    );
-  }
-);
-Input.displayName = "Input";
 
-// src/components/ui/popover.tsx
 
-var _reactpopover = require('@radix-ui/react-popover'); var PopoverPrimitive = _interopRequireWildcard(_reactpopover);
 
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React8.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  PopoverPrimitive.Content,
+var ContextMenu = ContextMenuPrimitive.Root;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuSubTrigger = React7.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  ContextMenuPrimitive.SubTrigger,
   {
     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",
+      "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__ */ _jsxruntime.jsx.call(void 0, _reacticons.ChevronRightIcon, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+var ContextMenuSubContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  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
+  }
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+var ContextMenuContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  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;
-
-// src/components/ui/select.tsx
-
-var _reactselect = require('@radix-ui/react-select'); var SelectPrimitive = _interopRequireWildcard(_reactselect);
-
-var Select = SelectPrimitive.Root;
-var SelectGroup = SelectPrimitive.Group;
-var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-  SelectPrimitive.Trigger,
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+var ContextMenuItem = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  ContextMenuPrimitive.Item,
   {
     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",
+      "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__ */ _jsxruntime.jsxs.call(void 0, 
+  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: [
-      children,
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.Icon, { asChild: true, className: "absolute right-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "svg",
-        {
-          width: "16",
-          height: "16",
-          viewBox: "0 0 16 16",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "path",
-            {
-              d: "M4 6L8 10L12 6",
-              stroke: "black",
-              strokeOpacity: "0.4",
-              strokeWidth: "1.4",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          )
-        }
-      ) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.CheckIcon, { className: "h-4 w-4" }) }) }),
+      children
     ]
   }
 ));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectContent = React9.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  SelectPrimitive.Content,
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+var ContextMenuRadioItem = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  ContextMenuPrimitive.RadioItem,
   {
     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",
+      "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
     ),
-    position,
     ...props,
-    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      SelectPrimitive.Viewport,
-      {
-        className: cn(
-          "p-1",
-          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        ),
-        children
-      }
-    )
+    children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+var ContextMenuLabel = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  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__ */ _jsxruntime.jsx.call(void 0, 
+  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__ */ _jsxruntime.jsx.call(void 0, 
+    "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
+
+var _reactalertdialog = require('@radix-ui/react-alert-dialog'); var AlertDialogPrimitive = _interopRequireWildcard(_reactalertdialog);
+
+var AlertDialog = AlertDialogPrimitive.Root;
+var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+var AlertDialogPortal = ({ ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogPrimitive.Portal, { container: portalRoot, ...props });
+AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
+var AlertDialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  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",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+var AlertDialogContent = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogPortal, { children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogOverlay, {}),
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    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__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+AlertDialogHeader.displayName = "AlertDialogHeader";
+var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+    ...props
   }
-) }));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  SelectPrimitive.Label,
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+var AlertDialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  AlertDialogPrimitive.Title,
   {
     ref,
-    className: cn("px-2 py-1.5 text-sm font-semibold", className),
+    className: cn("text-lg font-semibold", className),
     ...props
   }
 ));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-  SelectPrimitive.Item,
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+var AlertDialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  AlertDialogPrimitive.Description,
   {
     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
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "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__ */ _jsxruntime.jsx.call(void 0, 
-            "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__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.ItemText, { children })
-    ]
+    className: cn("text-sm text-zinc-500 dark:text-zinc-400", className),
+    ...props
   }
 ));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  SelectPrimitive.Separator,
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+var AlertDialogAction = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+var AlertDialogCancel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  AlertDialogPrimitive.Cancel,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800", className),
+    className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:!mt-0", className),
     ...props
   }
 ));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
-// src/components/ui/spinner.tsx
+// src/components/databrowser/components/display/delete-alert-dialog.tsx
 
-var Spinner = ({
-  isLoading,
-  className,
-  isLoadingText,
-  children
+function DeleteAlertDialog({
+  children,
+  onDeleteConfirm,
+  open,
+  onOpenChange,
+  deletionType
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialog, { open, onOpenChange, children: [
+    children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogTrigger, { asChild: true, children }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogContent, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogHeader, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogTitle, { children: deletionType === "item" ? "Delete Item" : "Delete Key" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogDescription, { className: "mt-5", children: [
+          "Are you sure you want to delete this ",
+          deletionType,
+          "?",
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}),
+          "This action cannot be undone."
+        ] })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogFooter, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogCancel, { type: "button", children: "Cancel" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          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
+
+var ItemContextMenu = ({
+  children,
+  dataKey,
+  type
 }) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _nullishCoalesce(className, () => ( "flex items-center")), children: isLoading ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    isLoadingText,
+  const { mutate: editItem } = useEditListItem();
+  const [isAlertOpen, setAlertOpen] = _react.useState.call(void 0, false);
+  const [data, setData] = _react.useState.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "svg",
+      DeleteAlertDialog,
       {
-        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__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+        deletionType: "item",
+        open: isAlertOpen,
+        onOpenChange: setAlertOpen,
+        onDeleteConfirm: (e) => {
+          e.stopPropagation();
+          if (data) {
+            editItem({
+              type,
+              dataKey,
+              itemKey: _optionalChain([data, 'optionalAccess', _21 => _21.key]),
+              // For deletion
+              newKey: void 0
+            });
+          }
+          setAlertOpen(false);
+        }
       }
-    )
-  ] }) : children });
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenu, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        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__ */ _jsxruntime.jsxs.call(void 0, ContextMenuContent, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          ContextMenuItem,
+          {
+            onClick: () => {
+              if (!data) return;
+              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _22 => _22.key]));
+              toast({
+                description: "Key copied to clipboard"
+              });
+            },
+            children: "Copy key"
+          }
+        ),
+        _optionalChain([data, 'optionalAccess', _23 => _23.value]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          ContextMenuItem,
+          {
+            onClick: () => {
+              navigator.clipboard.writeText(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _24 => _24.value]), () => ( "")));
+              toast({
+                description: "Value copied to clipboard"
+              });
+            },
+            children: "Copy value"
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactcontextmenu.ContextMenuSeparator, {}),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuItem, { disabled: type === "stream", onClick: () => setAlertOpen(true), children: "Delete item" })
+      ] })
+    ] })
+  ] });
 };
 
-// src/components/databrowser/components/display/ttl-popover.tsx
+// src/components/databrowser/components/sidebar/infinite-scroll.tsx
 
-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] = _react.useState.call(void 0, false);
-  const { mutateAsync: setTTL, isPending } = useSetTTL();
-  const defaultValues = _react.useMemo.call(void 0, () => {
-    return { type: "Seconds", value: ttl };
-  }, [ttl]);
-  const { control, handleSubmit, formState, reset } = _reacthookform.useForm.call(void 0, {
-    defaultValues
-  });
-  _react.useEffect.call(void 0, () => {
-    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/ui/scroll-area.tsx
+
+var _reactscrollarea = require('@radix-ui/react-scroll-area'); var ScrollAreaPrimitive = _interopRequireWildcard(_reactscrollarea);
+
+var ScrollArea = React9.forwardRef(({ className, children, onScroll, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    className: cn("relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        ScrollAreaPrimitive.Viewport,
+        {
+          onScroll,
+          className: "h-full w-full rounded-[inherit] [&>div]:!block",
+          children
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollBar, {}),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollAreaPrimitive.Corner, {})
+    ]
+  }
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation: "vertical",
+    className: cn("flex h-full w-2 touch-none select-none transition-colors", className),
+    ...props,
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      ScrollAreaPrimitive.ScrollAreaThumb,
+      {
+        className: cn("relative flex-1 rounded-full bg-neutral-200/70 dark:bg-neutral-800")
+      }
+    )
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+// src/components/databrowser/components/sidebar/infinite-scroll.tsx
+
+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__ */ _jsxruntime.jsxs.call(void 0, 
-    Popover,
+    ScrollArea,
     {
-      open,
-      onOpenChange: (isOpen) => {
-        if (isOpen) reset();
-        setOpen(isOpen);
-      },
+      type: "always",
+      className: "block h-full w-full transition-all",
+      onScroll: handleScroll,
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { children }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverContent, { className: "w-[300px]", align: "end", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "space-y-4", onSubmit, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "font-medium leading-none", children: "Expiration" }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center", children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _reacthookform.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__ */ _jsxruntime.jsx.call(void 0, Input, { min: "-1", ...field, className: "grow rounded-r-none" })
-                }
-              ),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _reacthookform.Controller,
-                {
-                  control,
-                  name: "type",
-                  render: ({ field }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select, { value: field.value, onValueChange: field.onChange, children: [
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTrigger, { className: "w-auto rounded-l-none border-l-0 pr-8", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, {}) }),
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContent, { children: timeUnits.map((unit) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: unit.label, children: unit.label }, unit.label)) })
-                  ] })
-                }
-              )
-            ] }),
-            formState.errors.value && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-2 text-xs text-red-500", children: formState.errors.value.message }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-2 text-xs text-zinc-500", children: "TTL sets a timer to automatically delete keys after a defined period." })
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex justify-between", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              Button,
-              {
-                type: "button",
-                variant: "outline",
-                disabled: ttl === PERSISTED_KEY,
-                onClick: handlePersist,
-                children: "Persist"
-              }
-            ),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", onClick: () => setOpen(false), type: "button", children: "Cancel" }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "primary", type: "submit", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" }) })
-            ] })
-          ] })
-        ] }) })
+        children,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-[100px] justify-center py-2 text-zinc-300", children: query.isFetching && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLoader2, { className: "animate-spin", size: 16 }) })
       ]
     }
   );
-}
+};
 
-// src/components/databrowser/components/display/header-badges.tsx
+// src/components/databrowser/components/display/display-header.tsx
 
-var LengthBadge = ({
-  dataKey,
-  type,
-  content
-}) => {
-  const { data, isLoading } = useFetchKeyLength({ dataKey, type });
-  const length = _nullishCoalesce(_optionalChain([content, 'optionalAccess', _24 => _24.length]), () => ( data));
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Badge, { label: "Length:", children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : length });
-};
-var SizeBadge = ({ dataKey }) => {
-  const { data: size } = useFetchKeySize(dataKey);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Badge, { label: "Size:", children: size === void 0 || size === null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : _bytes2.default.call(void 0, size, {
-    unitSeparator: " "
-  }) });
-};
-var TTL_INFINITE = -1;
-var TTL_NOT_FOUND = -2;
-var TTLBadge = ({ dataKey }) => {
-  const { data: ttl } = useFetchTTL(dataKey);
-  const { deleteKeyCache } = useDeleteKeyCache();
-  _react.useEffect.call(void 0, () => {
-    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__ */ _jsxruntime.jsx.call(void 0, Badge, { label: "TTL:", children: ttl === void 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TTLPopover, { dataKey, ttl, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-[2px]", children: [
-    ttl === TTL_INFINITE ? "Forever" : formatTime(ttl),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconChevronDown, { className: "mt-[1px] text-zinc-400", size: 12 })
-  ] }) }) });
+
+// src/components/databrowser/components/type-tag.tsx
+
+
+
+
+
+
+
+
+
+var iconsMap = {
+  string: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconQuote, { size: 15, stroke: 1.3 }),
+  set: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLayersIntersect, { size: 15, stroke: 1.3 }),
+  hash: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconHash, { size: 15, stroke: 1.3 }),
+  json: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCodeDots, { size: 15, stroke: 1.3 }),
+  zset: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconArrowsSort, { size: 15, stroke: 1.3 }),
+  list: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconList, { size: 15, stroke: 1.3 }),
+  stream: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconList, { size: 15, stroke: 1.3 })
 };
-var Badge = ({ children, label }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-6 items-center gap-0.5 rounded-md bg-white px-2 text-xs text-zinc-700", children: [
-  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-zinc-500", children: label }),
-  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "span", { className: cn(tagVariants({ variant, type, className })), children: type === "icon" ? iconsMap[variant] : DATA_TYPE_NAMES[variant] });
+}
 
 // src/components/databrowser/components/display/key-actions.tsx
 
@@ -4619,7 +4671,7 @@ var DisplayHeader = ({
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: type, type: "badge" }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SizeBadge, { dataKey }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LengthBadge, { dataKey, type, content }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TTLBadge, { dataKey })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HeaderTTLBadge, { dataKey })
     ] })
   ] });
 };
@@ -4627,7 +4679,6 @@ var DisplayHeader = ({
 // src/components/databrowser/components/display/display-list-edit.tsx
 
 
-
 // src/components/ui/tooltip.tsx
 
 
@@ -4658,6 +4709,78 @@ var SimpleTooltip = ({
   ] });
 };
 
+// src/components/databrowser/hooks/use-fetch-hash-ttl.ts
+
+var FETCH_HASH_FIELD_TTLS_QUERY_KEY = "fetch-hash-field-ttls";
+var useFetchHashFieldExpires = ({
+  dataKey,
+  fields
+}) => {
+  const { redis } = useDatabrowser();
+  return _reactquery.useQuery.call(void 0, {
+    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
+
+var useSetHashTTL = () => {
+  const { redis } = useDatabrowser();
+  return _reactquery.useMutation.call(void 0, {
+    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
+
+var HashFieldTTLBadge = ({ dataKey, field }) => {
+  const { data } = useFetchHashFieldExpires({ dataKey, fields: [field] });
+  const { mutate: setTTL, isPending } = useSetHashTTL();
+  const expireAt = _optionalChain([data, 'optionalAccess', _25 => _25[field]]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    TTLBadge,
+    {
+      label: "Field TTL:",
+      expireAt,
+      setTTL: (ttl) => setTTL({ dataKey, field, ttl }),
+      isPending
+    }
+  );
+};
+
 // src/components/databrowser/components/display/input/use-field.tsx
 
 
@@ -4735,7 +4858,7 @@ var CustomEditor = ({
     if (!monaco || !editorRef.current) {
       return;
     }
-    _optionalChain([monaco, 'optionalAccess', _25 => _25.editor, 'access', _26 => _26.setModelLanguage, 'call', _27 => _27(editorRef.current.getModel(), language)]);
+    _optionalChain([monaco, 'optionalAccess', _26 => _26.editor, 'access', _27 => _27.setModelLanguage, 'call', _28 => _28(editorRef.current.getModel(), language)]);
   }, [monaco, language]);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
@@ -4816,12 +4939,15 @@ var useField = ({
     () => checkIsValidJSON(field.value) ? "JSON" : "Text"
   );
   _react.useEffect.call(void 0, () => {
-    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);
@@ -4879,7 +5005,7 @@ var ListEditForm = ({
     dataKey
   });
   const findValue = () => {
-    for (const page of _nullishCoalesce(_optionalChain([query, 'access', _28 => _28.data, 'optionalAccess', _29 => _29.pages]), () => ( []))) {
+    for (const page of _nullishCoalesce(_optionalChain([query, 'access', _29 => _29.data, 'optionalAccess', _30 => _30.pages]), () => ( []))) {
       const item = page.keys.find((item2) => item2.key === itemKey);
       if (item && "value" in item) return item.value;
     }
@@ -4892,12 +5018,6 @@ var ListEditForm = ({
       value: itemValue
     }
   });
-  _react.useEffect.call(void 0, () => {
-    form.reset({
-      key: itemKey,
-      value: itemValue
-    });
-  }, [itemKey, itemValue]);
   const { mutateAsync: editItem, isPending } = useEditListItem();
   const { setSelectedListItem } = useDatabrowserStore();
   const [keyLabel, valueLabel] = headerLabels[type];
@@ -4935,33 +5055,45 @@ var ListEditForm = ({
         }
       )
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        Button,
-        {
-          type: "button",
-          onClick: () => {
-            setSelectedListItem(void 0);
-          },
-          children: "Cancel"
-        }
-      ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        SimpleTooltip,
-        {
-          content: type === "stream" && !isNew ? "Streams are not mutable" : void 0,
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            Button,
-            {
-              variant: "primary",
-              type: "submit",
-              disabled: !form.formState.isValid || !form.formState.isDirty || type === "stream" && !isNew,
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" })
-            }
-          )
-        }
-      )
-    ] })
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: cn(
+          "flex items-center",
+          type === "hash" && itemKey !== "" ? "justify-between" : "justify-end"
+        ),
+        children: [
+          type === "hash" && itemKey !== "" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HashFieldTTLBadge, { dataKey, field: itemKey }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              Button,
+              {
+                type: "button",
+                onClick: () => {
+                  setSelectedListItem(void 0);
+                },
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              SimpleTooltip,
+              {
+                content: type === "stream" && !isNew ? "Streams are not mutable" : void 0,
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  Button,
+                  {
+                    variant: "primary",
+                    type: "submit",
+                    disabled: !form.formState.isValid || !form.formState.isDirty || type === "stream" && !isNew,
+                    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoading: isPending, isLoadingText: "Saving", children: "Save" })
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    )
   ] }) });
 };
 var NumberFormItem = ({ name, label }) => {
@@ -5010,6 +5142,28 @@ var FormItem = ({
   ] });
 };
 
+// src/components/databrowser/components/display/hash/hash-field-ttl-info.tsx
+
+
+var HashFieldTTLInfo = ({
+  dataKey,
+  field,
+  fields
+}) => {
+  const { data } = useFetchHashFieldExpires({ dataKey, fields });
+  const expireAt = _optionalChain([data, 'optionalAccess', _31 => _31[field]]);
+  const [ttl, setTTL] = _react.useState.call(void 0, () => calculateTTL(expireAt));
+  _react.useEffect.call(void 0, () => {
+    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__ */ _jsxruntime.jsx.call(void 0, "span", { className: "block min-w-[30px] whitespace-nowrap text-right text-red-600", children: formatTime(_nullishCoalesce(ttl, () => ( 0))) });
+};
+
 // src/components/databrowser/components/display/display-list.tsx
 
 var headerLabels = {
@@ -5034,7 +5188,8 @@ var ListItems = ({
   dataKey
 }) => {
   const { setSelectedListItem } = useDatabrowserStore();
-  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _30 => _30.data, 'optionalAccess', _31 => _31.pages, 'access', _32 => _32.flatMap, 'call', _33 => _33((page) => page.keys)]), () => ( [])), [query.data]);
+  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _32 => _32.data, 'optionalAccess', _33 => _33.pages, 'access', _34 => _34.flatMap, 'call', _35 => _35((page) => page.keys)]), () => ( [])), [query.data]);
+  const fields = _react.useMemo.call(void 0, () => keys.map((key) => key.key), [keys]);
   const { mutate: editItem } = useEditListItem();
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "tr",
@@ -5044,7 +5199,7 @@ 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__ */ _jsxruntime.jsx.call(void 0, 
           "td",
@@ -5066,28 +5221,39 @@ var ListItems = ({
         type !== "stream" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "td",
           {
-            width: 20,
-            className: "px-3",
+            className: "w-0 min-w-0 p-0",
             onClick: (e) => {
               e.stopPropagation();
             },
-            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              DeleteAlertDialog,
-              {
-                deletionType: "item",
-                onDeleteConfirm: (e) => {
-                  e.stopPropagation();
-                  editItem({
-                    type,
-                    dataKey,
-                    itemKey: key,
-                    // For deletion
-                    newKey: void 0
-                  });
-                },
-                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "icon-sm", variant: "secondary", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconTrash, { className: "size-4 text-zinc-500" }) })
-              }
-            )
+            children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-end gap-2", children: [
+              type === "hash" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HashFieldTTLInfo, { dataKey, field: key, fields }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                DeleteAlertDialog,
+                {
+                  deletionType: "item",
+                  onDeleteConfirm: (e) => {
+                    e.stopPropagation();
+                    editItem({
+                      type,
+                      dataKey,
+                      itemKey: key,
+                      // For deletion
+                      newKey: void 0
+                    });
+                  },
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    Button,
+                    {
+                      className: "",
+                      size: "icon-sm",
+                      variant: "secondary",
+                      onClick: (e) => e.stopPropagation(),
+                      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconTrash, { className: "size-4 text-zinc-500" })
+                    }
+                  )
+                }
+              )
+            ] })
           }
         )
       ]
@@ -5122,17 +5288,12 @@ var EditorDisplayForm = ({
     defaultValues: { value: data }
   });
   _react.useEffect.call(void 0, () => {
-    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__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex grow flex-col gap-1", children: [
@@ -5292,7 +5453,7 @@ function AddKeyModal() {
     setSelectedKey(key);
     setOpen(false);
     setTimeout(() => {
-      _optionalChain([window, 'access', _34 => _34.document, 'access', _35 => _35.querySelector, 'call', _36 => _36(`[data-key="${key}"]`), 'optionalAccess', _37 => _37.scrollIntoView, 'call', _38 => _38({
+      _optionalChain([window, 'access', _36 => _36.document, 'access', _37 => _37.querySelector, 'call', _38 => _38(`[data-key="${key}"]`), 'optionalAccess', _39 => _39.scrollIntoView, 'call', _40 => _40({
         behavior: "smooth",
         block: "start",
         inline: "nearest"
@@ -5337,7 +5498,7 @@ function AddKeyModal() {
                 }
               )
             ] }),
-            formState.errors.key && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-3 mt-2 text-xs text-red-500", children: _optionalChain([formState, 'access', _39 => _39.errors, 'access', _40 => _40.key, 'optionalAccess', _41 => _41.message]) }),
+            formState.errors.key && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-3 mt-2 text-xs text-red-500", children: _optionalChain([formState, 'access', _41 => _41.errors, 'access', _42 => _42.key, 'optionalAccess', _43 => _43.message]) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-2 text-xs text-zinc-500", children: "After creating the key, you can edit the value" }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-6 flex justify-end gap-2", children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5431,7 +5592,7 @@ var SidebarContextMenu = ({ children }) => {
 
 var KeysList = () => {
   const { keys } = useKeys();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pr-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarContextMenu, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyItem, { nextKey: _nullishCoalesce(_optionalChain([keys, 'access', _42 => _42.at, 'call', _43 => _43(i + 1), 'optionalAccess', _44 => _44[0]]), () => ( "")), data }, data[0])) }) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pr-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarContextMenu, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyItem, { nextKey: _nullishCoalesce(_optionalChain([keys, 'access', _44 => _44.at, 'call', _45 => _45(i + 1), 'optionalAccess', _46 => _46[0]]), () => ( "")), data }, data[0])) }) }) });
 };
 var keyStyles = {
   string: "border-sky-400 !bg-sky-50 text-sky-900",
@@ -5496,7 +5657,7 @@ var SearchInput = () => {
         value: state
       }
     ),
-    search.key && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    state && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       Button,
       {
         type: "button",
@@ -5505,6 +5666,7 @@ 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__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconX, { size: 16 }),
@@ -5573,6 +5735,9 @@ function Sidebar() {
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_DB_SIZE_QUERY_KEY]
                 });
+                queryClient.invalidateQueries({
+                  queryKey: [FETCH_KEY_TYPE_QUERY_KEY]
+                });
               },
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoading: query.isFetching, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconRefresh, { size: 16 }) })
             }
@@ -5585,7 +5750,10 @@ function Sidebar() {
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchInput, {})
       ] })
     ] }),
-    query.isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingSkeleton, {}) : keys.length > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfiniteScroll, { query, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysList, {}) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Empty, {})
+    query.isLoading && keys.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingSkeleton, {}) : keys.length > 0 ? (
+      // Infinite scroll already has a loader at the bottom
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfiniteScroll, { query, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysList, {}) })
+    ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Empty, {})
   ] });
 }