@upstash/react-redis-browser 0.2.14 → 0.2.15

package/dist/index.js

@@ -3468,43 +3468,51 @@ function Toaster() {
 // src/components/databrowser/hooks/use-fetch-search-indexes.tsx
 
 
-// src/lib/scan-keys.ts
-async function scanKeys(redis, {
+// src/lib/list-search-indexes.ts
+async function listSearchIndexes(redis, {
   match,
-  type,
-  count: count2 = 100,
-  limit
-} = {}) {
-  let cursor = "0";
-  const result = [];
-  while (true) {
-    const [newCursor, keys] = await redis.scan(cursor, {
-      count: count2,
-      type,
-      match
-    });
-    result.push(...keys);
-    if (limit && result.length >= limit) {
-      return result.slice(0, limit);
-    }
-    if (newCursor === "0") break;
-    cursor = newCursor;
-  }
-  return result;
+  limit,
+  offset = 0
+}) {
+  const args = ["search.listindexes"];
+  if (match) args.push("MATCH", match);
+  args.push("LIMIT", String(limit), "OFFSET", String(offset));
+  const result = await redis.exec(args);
+  return parseListIndexesResponse(result);
+}
+function parseListIndexesResponse(result) {
+  return result.map((entry) => entry[1]);
 }
 
 // src/components/databrowser/hooks/use-fetch-search-indexes.tsx
 var FETCH_SEARCH_INDEXES_QUERY_KEY = "fetch-search-indexes";
+var PAGE_SIZE = 30;
 var useFetchSearchIndexes = ({
   match,
   enabled
 } = {}) => {
   const { redisNoPipeline: redis } = useRedis();
-  return _reactquery.useQuery.call(void 0, {
-    queryKey: [FETCH_SEARCH_INDEXES_QUERY_KEY],
+  const query = _reactquery.useInfiniteQuery.call(void 0, {
+    queryKey: [FETCH_SEARCH_INDEXES_QUERY_KEY, match],
     enabled: _nullishCoalesce(enabled, () => ( true)),
-    queryFn: () => scanKeys(redis, { match, type: "search" })
+    initialPageParam: 0,
+    queryFn: async ({ pageParam: offset }) => {
+      const names = await listSearchIndexes(redis, { match, limit: PAGE_SIZE, offset });
+      return {
+        names,
+        nextOffset: names.length >= PAGE_SIZE ? offset + names.length : void 0
+      };
+    },
+    getNextPageParam: (lastPage) => lastPage.nextOffset
   });
+  const indexes = _optionalChain([query, 'access', _26 => _26.data, 'optionalAccess', _27 => _27.pages, 'access', _28 => _28.flatMap, 'call', _29 => _29((page) => page.names)]);
+  return {
+    data: indexes,
+    isLoading: query.isLoading || query.isFetching && !query.isFetchingNextPage,
+    hasNextPage: query.hasNextPage,
+    fetchNextPage: query.fetchNextPage,
+    isFetchingNextPage: query.isFetchingNextPage
+  };
 };
 
 // src/components/databrowser/hooks/use-keys.tsx
@@ -3586,6 +3594,21 @@ var KeysProvider = ({ children }) => {
     }
     return { cursor: newCursor, keys: keys2 };
   };
+  const redisSearchIndexScan = async ({
+    count: count2,
+    cursor
+  }) => {
+    const offset = Number.parseInt(cursor, 10) || 0;
+    const names = await listSearchIndexes(redis, {
+      match: search.key || void 0,
+      limit: count2,
+      offset
+    });
+    const keys2 = names.map((name) => ({ key: name, type: "search" }));
+    const hasMore = keys2.length >= count2;
+    const nextCursor = hasMore ? String(offset + keys2.length) : "0";
+    return { cursor: nextCursor, keys: keys2 };
+  };
   const redisValueScan = async ({
     count: count2,
     cursor
@@ -3611,7 +3634,7 @@ var KeysProvider = ({ children }) => {
     return { cursor: nextCursor, keys: keys2 };
   };
   const performScan = async (count2, cursor) => {
-    const scanFunction = isValuesSearchSelected ? redisValueScan : redisKeyScan;
+    const scanFunction = isValuesSearchSelected ? redisValueScan : search.type === "search" ? redisSearchIndexScan : redisKeyScan;
     const result = await scanFunction({ count: count2, cursor });
     return [result.cursor, result.keys];
   };
@@ -3650,7 +3673,7 @@ var KeysProvider = ({ children }) => {
     refetchOnMount: false
   });
   const keys = _react.useMemo.call(void 0, () => {
-    const keys2 = _nullishCoalesce(_optionalChain([query, 'access', _26 => _26.data, 'optionalAccess', _27 => _27.pages, 'access', _28 => _28.flatMap, 'call', _29 => _29((page) => page.keys)]), () => ( []));
+    const keys2 = _nullishCoalesce(_optionalChain([query, 'access', _30 => _30.data, 'optionalAccess', _31 => _31.pages, 'access', _32 => _32.flatMap, 'call', _33 => _33((page) => page.keys)]), () => ( []));
     const keysSet = /* @__PURE__ */ new Set();
     const dedupedKeys = [];
     for (const key of keys2) {
@@ -3684,7 +3707,7 @@ var useKeys = () => {
 var useKeyType = (key) => {
   const { keys } = useKeys();
   const keyTuple = _react.useMemo.call(void 0, () => keys.find(([k, _]) => k === key), [keys, key]);
-  return _optionalChain([keyTuple, 'optionalAccess', _30 => _30[1]]);
+  return _optionalChain([keyTuple, 'optionalAccess', _34 => _34[1]]);
 };
 
 // src/types/index.ts
@@ -4158,7 +4181,7 @@ function parseFieldBuilder(str, fieldName) {
   }
   if (str.startsWith("s.number(")) {
     const typeMatch = str.match(/s\.number\(\s*["']?(U64|I64|F64)?["']?\s*\)/);
-    const numType = _optionalChain([typeMatch, 'optionalAccess', _31 => _31[1]]) || "F64";
+    const numType = _optionalChain([typeMatch, 'optionalAccess', _35 => _35[1]]) || "F64";
     const fromValue = extractFromValue(str);
     if (fromValue === void 0) return numType;
     return { type: numType, from: fromValue };
@@ -4191,7 +4214,7 @@ function parseFieldBuilder(str, fieldName) {
   }
   if (str.startsWith("s.")) {
     const typeMatch = str.match(/^s\.(\w+)\(/);
-    const typeName = _nullishCoalesce(_optionalChain([typeMatch, 'optionalAccess', _32 => _32[1]]), () => ( "unknown"));
+    const typeName = _nullishCoalesce(_optionalChain([typeMatch, 'optionalAccess', _36 => _36[1]]), () => ( "unknown"));
     throw new Error(`Unknown field type "s.${typeName}()" for field "${fieldName}"`);
   }
   return void 0;
@@ -4480,6 +4503,18 @@ var useAddKey = () => {
 
 // src/components/databrowser/hooks/use-debounce.ts
 
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = _react.useState.call(void 0, value);
+  _react.useEffect.call(void 0, () => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
 
 // src/components/databrowser/hooks/use-delete-key.ts
 
@@ -4571,7 +4606,7 @@ var useFetchListItems = ({ dataKey, type }) => {
         // +1 since first message is the last one
         LIST_DISPLAY_PAGE_SIZE + 1
       );
-      const lastMessageId = messages.length > 0 ? _optionalChain([messages, 'access', _33 => _33.at, 'call', _34 => _34(-1), 'optionalAccess', _35 => _35[0]]) : void 0;
+      const lastMessageId = messages.length > 0 ? _optionalChain([messages, 'access', _37 => _37.at, 'call', _38 => _38(-1), 'optionalAccess', _39 => _39[0]]) : void 0;
       return {
         cursor: messages.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : lastMessageId,
         keys: messages.map(([id, fields]) => ({
@@ -4746,7 +4781,7 @@ var useEditListItem = () => {
         }
         case "stream": {
           if (!isNew || !newKey) throw new Error("Stream data type is not mutable");
-          const opts = transformArray(_nullishCoalesce(_optionalChain([newValue, 'optionalAccess', _36 => _36.split, 'call', _37 => _37("\n")]), () => ( []))).map(
+          const opts = transformArray((_nullishCoalesce(_optionalChain([newValue, 'optionalAccess', _40 => _40.split, 'call', _41 => _41("\n")]), () => ( []))).filter(Boolean)).map(
             ({ key, value }) => [key, value]
           );
           pipe.xadd(dataKey, newKey, Object.fromEntries(opts));
@@ -5053,7 +5088,7 @@ var LengthBadge = ({
   content
 }) => {
   const { data, isLoading } = useFetchKeyLength({ dataKey, type });
-  const length = _nullishCoalesce(_optionalChain([content, 'optionalAccess', _38 => _38.length]), () => ( data));
+  const length = _nullishCoalesce(_optionalChain([content, 'optionalAccess', _42 => _42.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 }) => {
@@ -5079,7 +5114,7 @@ var Badge = ({ children, label }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void
   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium", children })
 ] });
 
-// src/components/databrowser/components/display/key-actions.tsx
+// src/components/databrowser/components/display/item-actions.tsx
 
 
 // src/components/ui/dropdown-menu.tsx
@@ -5339,7 +5374,9 @@ function DeleteKeyModal({
   onOpenChange,
   deletionType,
   count: count2 = 1,
-  showReindex
+  showReindex,
+  name,
+  nameLabel
 }) {
   const isPlural = count2 > 1;
   const itemLabel = deletionType === "item" ? "Item" : "Key";
@@ -5358,7 +5395,10 @@ function DeleteKeyModal({
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogDescription, { className: "mt-5", children: [
           "Are you sure you want to delete",
           " ",
-          isPlural ? `these ${count2} ${deletionType}s` : `this ${deletionType}`,
+          name ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            `${_nullishCoalesce(nameLabel, () => ( deletionType))} `,
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium text-zinc-900 dark:text-zinc-100", children: nameLabel ? name : `"${name}"` })
+          ] }) : isPlural ? `these ${count2} ${deletionType}s` : `this ${deletionType}`,
           "?",
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}),
           "This action cannot be undone."
@@ -5383,7 +5423,7 @@ function DeleteKeyModal({
             type: "button",
             variant: "outline",
             disabled: isPending,
-            onClick: () => _optionalChain([setIsOpen, 'optionalCall', _39 => _39(false)]),
+            onClick: () => _optionalChain([setIsOpen, 'optionalCall', _43 => _43(false)]),
             children: "Cancel"
           }
         ),
@@ -5409,8 +5449,51 @@ function DeleteKeyModal({
   ] });
 }
 
+// src/components/databrowser/components/display/item-actions.tsx
+
+function ItemActions({ dataKey, type }) {
+  const { selectedListItem, setSelectedListItem } = useTab();
+  const { mutateAsync: editItem } = useEditListItem();
+  if (!selectedListItem) return;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DropdownMenu, { modal: false, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "icon-sm", "aria-label": "Item actions", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _iconsreact.IconDotsVertical,
+      {
+        className: "size-4 text-zinc-500 dark:text-zinc-600",
+        fill: "rgb(var(--color-zinc-500))"
+      }
+    ) }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuContent, { align: "end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      DeleteKeyModal,
+      {
+        deletionType: "item",
+        name: selectedListItem.key,
+        nameLabel: type === "list" ? "item at index" : void 0,
+        onDeleteConfirm: async () => {
+          await editItem({
+            type,
+            dataKey,
+            itemKey: selectedListItem.key,
+            newKey: void 0
+          });
+          setSelectedListItem(void 0);
+        },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          DropdownMenuItem,
+          {
+            className: "text-red-500 focus:bg-red-500 focus:text-white",
+            onSelect: (e) => e.preventDefault(),
+            children: "Delete item"
+          }
+        )
+      }
+    ) })
+  ] });
+}
+
 // src/components/databrowser/components/display/key-actions.tsx
 
+
 function KeyActions({
   dataKey,
   content,
@@ -5452,9 +5535,10 @@ function KeyActions({
         DeleteKeyModal,
         {
           deletionType: "key",
+          name: dataKey,
           showReindex: isValuesSearchSelected && type !== "search",
           onDeleteConfirm: async (_e, options) => {
-            await deleteKey({ keys: [dataKey], reindex: _optionalChain([options, 'optionalAccess', _40 => _40.reindex]) });
+            await deleteKey({ keys: [dataKey], reindex: _optionalChain([options, 'optionalAccess', _44 => _44.reindex]) });
           },
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             DropdownMenuItem,
@@ -5478,7 +5562,9 @@ var DisplayHeader = ({
   content,
   hideTypeTag
 }) => {
-  const { setSelectedListItem } = useTab();
+  const { setSelectedListItem, selectedListItem } = useTab();
+  const isListType = type !== "string" && type !== "json" && type !== "search" && type !== "stream";
+  const showItemActions = isListType && Boolean(selectedListItem);
   const handleAddItem = () => {
     setSelectedListItem({ key: type === "stream" ? "*" : "", isNew: true });
   };
@@ -5486,8 +5572,8 @@ var DisplayHeader = ({
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-[26px] items-center justify-between gap-4", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "grow truncate text-sm", children: dataKey.trim() === "" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ml-1 text-zinc-500", children: "(Empty Key)" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium text-zinc-950", children: dataKey }) }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1", children: [
-        type !== "string" && type !== "json" && type !== "search" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Add item", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { onClick: handleAddItem, size: "icon-sm", "aria-label": "Add item", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "size-4 text-zinc-500 dark:text-zinc-600" }) }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyActions, { dataKey, content, type })
+        type !== "string" && type !== "json" && type !== "search" && !showItemActions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Add item", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { onClick: handleAddItem, size: "icon-sm", "aria-label": "Add item", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "size-4 text-zinc-500 dark:text-zinc-600" }) }) }),
+        showItemActions ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ItemActions, { dataKey, type }) : selectedListItem ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyActions, { dataKey, content, type })
       ] })
     ] }),
     type === "search" && hideTypeTag ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollArea, { orientation: "horizontal", className: "w-full whitespace-nowrap", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-max items-center gap-1.5 pb-2 pt-1", children: [
@@ -5685,13 +5771,13 @@ var MonacoEditorWithTypes = ({
   const theme = useTheme();
   _react.useEffect.call(void 0, () => {
     if (!monaco) return;
-    _optionalChain([extraLibRef, 'access', _41 => _41.current, 'optionalAccess', _42 => _42.dispose, 'call', _43 => _43()]);
+    _optionalChain([extraLibRef, 'access', _45 => _45.current, 'optionalAccess', _46 => _46.dispose, 'call', _47 => _47()]);
     extraLibRef.current = monaco.languages.typescript.typescriptDefaults.addExtraLib(
       typeDefinitions,
       `file:///${filePath.replace(".ts", "-types.d.ts")}`
     );
     requestAnimationFrame(() => {
-      const model = _optionalChain([editorRef, 'access', _44 => _44.current, 'optionalAccess', _45 => _45.getModel, 'optionalCall', _46 => _46()]);
+      const model = _optionalChain([editorRef, 'access', _48 => _48.current, 'optionalAccess', _49 => _49.getModel, 'optionalCall', _50 => _50()]);
       if (model) {
         const currentValue = model.getValue();
         model.setValue(currentValue);
@@ -5700,10 +5786,10 @@ var MonacoEditorWithTypes = ({
   }, [monaco, typeDefinitions, filePath]);
   _react.useEffect.call(void 0, () => {
     return () => {
-      _optionalChain([extraLibRef, 'access', _47 => _47.current, 'optionalAccess', _48 => _48.dispose, 'call', _49 => _49()]);
+      _optionalChain([extraLibRef, 'access', _51 => _51.current, 'optionalAccess', _52 => _52.dispose, 'call', _53 => _53()]);
       if (monaco) {
         const model = monaco.editor.getModel(monaco.Uri.parse(filePath));
-        _optionalChain([model, 'optionalAccess', _50 => _50.dispose, 'call', _51 => _51()]);
+        _optionalChain([model, 'optionalAccess', _54 => _54.dispose, 'call', _55 => _55()]);
       }
     };
   }, [monaco, filePath]);
@@ -5713,7 +5799,7 @@ var MonacoEditorWithTypes = ({
     } else if (newValue.trim() === "") {
       onChange(defaultValue);
     } else {
-      _optionalChain([editorRef, 'access', _52 => _52.current, 'optionalAccess', _53 => _53.setValue, 'optionalCall', _54 => _54(valueRef.current)]);
+      _optionalChain([editorRef, 'access', _56 => _56.current, 'optionalAccess', _57 => _57.setValue, 'optionalCall', _58 => _58(valueRef.current)]);
     }
   };
   _react.useEffect.call(void 0, () => {
@@ -6180,7 +6266,7 @@ var SearchDisplay = ({
       indexName: _nullishCoalesce(indexName, () => ( "")),
       editorValue: data.schema ? schemaToEditorValue(data.schema) : SCHEMA_DEFAULT,
       dataType: data.dataType || "string",
-      prefixes: _optionalChain([data, 'access', _55 => _55.prefixes, 'optionalAccess', _56 => _56.join, 'call', _57 => _57(", ")]) || "",
+      prefixes: _optionalChain([data, 'access', _59 => _59.prefixes, 'optionalAccess', _60 => _60.join, 'call', _61 => _61(", ")]) || "",
       language: data.language || "english"
     });
   }, [data, reset, indexName]);
@@ -6553,7 +6639,7 @@ var ItemContextMenu = ({
             editItem({
               type,
               dataKey,
-              itemKey: _optionalChain([data, 'optionalAccess', _58 => _58.key]),
+              itemKey: _optionalChain([data, 'optionalAccess', _62 => _62.key]),
               // For deletion
               newKey: void 0
             });
@@ -6588,7 +6674,7 @@ var ItemContextMenu = ({
           {
             onClick: () => {
               if (!data) return;
-              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _59 => _59.key]));
+              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _63 => _63.key]));
               toast({
                 description: "Key copied to clipboard"
               });
@@ -6600,11 +6686,11 @@ var ItemContextMenu = ({
             ]
           }
         ),
-        _optionalChain([data, 'optionalAccess', _60 => _60.value]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _optionalChain([data, 'optionalAccess', _64 => _64.value]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           ContextMenuItem,
           {
             onClick: () => {
-              navigator.clipboard.writeText(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _61 => _61.value]), () => ( "")));
+              navigator.clipboard.writeText(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _65 => _65.value]), () => ( "")));
               toast({
                 description: "Value copied to clipboard"
               });
@@ -6716,7 +6802,7 @@ var useSetHashTTL = () => {
 var HashFieldTTLBadge = ({ dataKey, field }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields: [field] });
   const { mutate: setTTL, isPending } = useSetHashTTL();
-  const expireAt = _optionalChain([data, 'optionalAccess', _62 => _62[field]]);
+  const expireAt = _optionalChain([data, 'optionalAccess', _66 => _66[field]]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     TTLBadge,
     {
@@ -6813,7 +6899,7 @@ var MonacoEditor = ({
     if (!active || !monaco || !editorRef.current) {
       return;
     }
-    _optionalChain([monaco, 'optionalAccess', _63 => _63.editor, 'access', _64 => _64.setModelLanguage, 'call', _65 => _65(editorRef.current.getModel(), language)]);
+    _optionalChain([monaco, 'optionalAccess', _67 => _67.editor, 'access', _68 => _68.setModelLanguage, 'call', _69 => _69(editorRef.current.getModel(), language)]);
   }, [monaco, language, active]);
   const editor = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _react2.Editor,
@@ -6989,7 +7075,7 @@ var ListEditForm = ({
     dataKey
   });
   const findValue = () => {
-    for (const page of _nullishCoalesce(_optionalChain([query, 'access', _66 => _66.data, 'optionalAccess', _67 => _67.pages]), () => ( []))) {
+    for (const page of _nullishCoalesce(_optionalChain([query, 'access', _70 => _70.data, 'optionalAccess', _71 => _71.pages]), () => ( []))) {
       const item = page.keys.find((item2) => item2.key === itemKey);
       if (item && "value" in item) return item.value;
     }
@@ -7019,11 +7105,19 @@ var ListEditForm = ({
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacthookform.FormProvider, { ...form, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { onSubmit, className: "flex h-full min-h-0 flex-col gap-2", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-h-0 grow flex-col gap-2", children: [
       type === "zset" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NumberFormItem, { name: "value", label: valueLabel }),
-      type !== "list" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormItem, { readOnly: type === "stream", name: "key", label: keyLabel, data: itemKey }),
+      type !== "list" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        FormItem,
+        {
+          readOnly: type === "stream" && !isNew,
+          name: "key",
+          label: keyLabel,
+          data: itemKey
+        }
+      ),
       type !== "set" && type !== "zset" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         FormItem,
         {
-          readOnly: type === "stream",
+          readOnly: type === "stream" && !isNew,
           name: "value",
           label: valueLabel,
           data: _nullishCoalesce(itemValue, () => ( ""))
@@ -7060,7 +7154,7 @@ var ListEditForm = ({
                     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" })
+                    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoading: isPending, isLoadingText: isNew ? "Adding" : "Saving", children: isNew ? "Add Item" : "Save" })
                   }
                 )
               }
@@ -7135,7 +7229,7 @@ var HashFieldTTLInfo = ({
   fields
 }) => {
   const { data } = useFetchHashFieldExpires({ dataKey, fields });
-  const expireAt = _optionalChain([data, 'optionalAccess', _68 => _68[field]]);
+  const expireAt = _optionalChain([data, 'optionalAccess', _72 => _72[field]]);
   const [ttl, setTTL] = _react.useState.call(void 0, () => calculateTTL(expireAt));
   _react.useEffect.call(void 0, () => {
     setTTL(calculateTTL(expireAt));
@@ -7160,7 +7254,7 @@ var headerLabels = {
 var ListDisplay = ({ dataKey, type }) => {
   const { selectedListItem } = useTab();
   const query = useFetchListItems({ dataKey, type });
-  const isEmpty = query.isFetched && _optionalChain([query, 'access', _69 => _69.data, 'optionalAccess', _70 => _70.pages, 'access', _71 => _71.every, 'call', _72 => _72((page) => page.keys.length === 0)]);
+  const isEmpty = query.isFetched && _optionalChain([query, 'access', _73 => _73.data, 'optionalAccess', _74 => _74.pages, 'access', _75 => _75.every, 'call', _76 => _76((page) => page.keys.length === 0)]);
   if (isEmpty) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyDeleted, {});
   }
@@ -7176,7 +7270,7 @@ var ListItems = ({
   dataKey
 }) => {
   const { setSelectedListItem } = useTab();
-  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _73 => _73.data, 'optionalAccess', _74 => _74.pages, 'access', _75 => _75.flatMap, 'call', _76 => _76((page) => page.keys)]), () => ( [])), [query.data]);
+  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _77 => _77.data, 'optionalAccess', _78 => _78.pages, 'access', _79 => _79.flatMap, 'call', _80 => _80((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, 
@@ -7327,6 +7421,7 @@ var DataDisplay = () => {
 
 
 
+
 // src/components/databrowser/components/add-key-modal.tsx
 
 
@@ -7348,7 +7443,7 @@ function AddKeyModal() {
     setSelectedKey(key);
     setOpen(false);
     setTimeout(() => {
-      _optionalChain([window, 'access', _77 => _77.document, 'access', _78 => _78.querySelector, 'call', _79 => _79(`[data-key="${key}"]`), 'optionalAccess', _80 => _80.scrollIntoView, 'call', _81 => _81({
+      _optionalChain([window, 'access', _81 => _81.document, 'access', _82 => _82.querySelector, 'call', _83 => _83(`[data-key="${key}"]`), 'optionalAccess', _84 => _84.scrollIntoView, 'call', _85 => _85({
         behavior: "smooth",
         block: "start",
         inline: "nearest"
@@ -7404,7 +7499,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', _82 => _82.errors, 'access', _83 => _83.key, 'optionalAccess', _84 => _84.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', _86 => _86.errors, 'access', _87 => _87.key, 'optionalAccess', _88 => _88.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, 
@@ -7432,6 +7527,31 @@ function AddKeyModal() {
 
 
 
+// src/lib/scan-keys.ts
+async function scanKeys(redis, {
+  match,
+  type,
+  count: count2 = 100,
+  limit
+} = {}) {
+  let cursor = "0";
+  const result = [];
+  while (true) {
+    const [newCursor, keys] = await redis.scan(cursor, {
+      count: count2,
+      type,
+      match
+    });
+    result.push(...keys);
+    if (limit && result.length >= limit) {
+      return result.slice(0, limit);
+    }
+    if (newCursor === "0") break;
+    cursor = newCursor;
+  }
+  return result;
+}
+
 // src/components/databrowser/components/query-wizard/consent-prompt.tsx
 
 
@@ -8417,7 +8537,7 @@ var QueryWizardPopover = ({ onClose }) => {
   const fetchSampleKeys = _reactquery.useMutation.call(void 0, {
     mutationFn: async (index) => {
       const firstTenKeys = await scanKeys(redis, {
-        match: `${_optionalChain([index, 'access', _85 => _85.prefixes, 'optionalAccess', _86 => _86[0]])}*`,
+        match: `${_optionalChain([index, 'access', _89 => _89.prefixes, 'optionalAccess', _90 => _90[0]])}*`,
         type: index.dataType,
         limit: 10
       });
@@ -8447,7 +8567,7 @@ var QueryWizardPopover = ({ onClose }) => {
     if (!input.trim() || !valuesSearch.index) return;
     try {
       let samples = sampleData;
-      if (samples.length === 0 && _optionalChain([indexData, 'optionalAccess', _87 => _87.prefixes, 'optionalAccess', _88 => _88[0]])) {
+      if (samples.length === 0 && _optionalChain([indexData, 'optionalAccess', _91 => _91.prefixes, 'optionalAccess', _92 => _92[0]])) {
         samples = await fetchSampleKeys.mutateAsync(indexData);
       }
       const result = await generateQuery.mutateAsync({
@@ -8458,7 +8578,7 @@ var QueryWizardPopover = ({ onClose }) => {
       const queryString = toJsLiteral(result.query);
       setValuesSearchQuery(queryString);
       setQueryBuilderMode("code");
-      _optionalChain([onClose, 'optionalCall', _89 => _89()]);
+      _optionalChain([onClose, 'optionalCall', _93 => _93()]);
     } catch (error) {
       console.error("Error generating query:", error);
     }
@@ -8563,7 +8683,7 @@ var CreateIndexModal = ({
       className: "max-w-2xl",
       onEscapeKeyDown: (e) => {
         const active = document.activeElement;
-        if (_optionalChain([active, 'optionalAccess', _90 => _90.closest, 'call', _91 => _91(".monaco-editor")]) || _optionalChain([active, 'optionalAccess', _92 => _92.tagName]) === "TEXTAREA") {
+        if (_optionalChain([active, 'optionalAccess', _94 => _94.closest, 'call', _95 => _95(".monaco-editor")]) || _optionalChain([active, 'optionalAccess', _96 => _96.tagName]) === "TEXTAREA") {
           e.preventDefault();
         }
       },
@@ -8598,7 +8718,7 @@ var EditIndexModal = ({
       className: "min-h-[500px] max-w-2xl",
       onEscapeKeyDown: (e) => {
         const active = document.activeElement;
-        if (_optionalChain([active, 'optionalAccess', _93 => _93.closest, 'call', _94 => _94(".monaco-editor")]) || _optionalChain([active, 'optionalAccess', _95 => _95.tagName]) === "TEXTAREA") {
+        if (_optionalChain([active, 'optionalAccess', _97 => _97.closest, 'call', _98 => _98(".monaco-editor")]) || _optionalChain([active, 'optionalAccess', _99 => _99.tagName]) === "TEXTAREA") {
           e.preventDefault();
         }
       },
@@ -8712,7 +8832,7 @@ var SearchInput = () => {
     } else if (e.key === "Escape") {
       setState("");
       setFocusedIndex(-1);
-      _optionalChain([inputRef, 'access', _96 => _96.current, 'optionalAccess', _97 => _97.blur, 'call', _98 => _98()]);
+      _optionalChain([inputRef, 'access', _100 => _100.current, 'optionalAccess', _101 => _101.blur, 'call', _102 => _102()]);
     } else if (e.key === "ArrowDown" || e.key === "Tab" && !e.shiftKey) {
       e.preventDefault();
       if (focusedIndex < filteredHistory.length - 1) {
@@ -8726,7 +8846,7 @@ var SearchInput = () => {
         setFocusedIndex(focusedIndex - 1);
       } else if (filteredHistory.length > 0 && focusedIndex === 0) {
         setFocusedIndex(-1);
-        _optionalChain([inputRef, 'access', _99 => _99.current, 'optionalAccess', _100 => _100.focus, 'call', _101 => _101()]);
+        _optionalChain([inputRef, 'access', _103 => _103.current, 'optionalAccess', _104 => _104.focus, 'call', _105 => _105()]);
       } else if (filteredHistory.length > 0) {
         setFocusedIndex(filteredHistory.length - 1);
       }
@@ -8874,19 +8994,26 @@ var IndexSelector = () => {
     valuesSearch: { index },
     setValuesSearchIndex
   } = useTab();
-  const { data: indexes, isLoading } = useFetchSearchIndexes();
   const [open, setOpen] = _react.useState.call(void 0, false);
+  const [search, setSearch] = _react.useState.call(void 0, "");
+  const debouncedSearch = useDebounce(search, 150);
+  const match = debouncedSearch ? `${debouncedSearch}*` : void 0;
+  const {
+    data: indexes,
+    isLoading,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage
+  } = useFetchSearchIndexes({ match });
+  const [editingIndex, setEditingIndex] = _react.useState.call(void 0, );
   _react.useEffect.call(void 0, () => {
-    if (!indexes || isLoading) return;
+    if (!indexes || isLoading || debouncedSearch) return;
     if (index && !indexes.includes(index)) {
       setValuesSearchIndex("");
     } else if (!index && indexes.length > 0) {
       setValuesSearchIndex(indexes[0]);
     }
-  }, [indexes, index, isLoading, setValuesSearchIndex]);
-  const [search, setSearch] = _react.useState.call(void 0, "");
-  const [editingIndex, setEditingIndex] = _react.useState.call(void 0, );
-  const filteredIndexes = _optionalChain([indexes, 'optionalAccess', _102 => _102.filter, 'call', _103 => _103((idx) => idx.toLowerCase().includes(search.toLowerCase()))]);
+  }, [indexes, index, isLoading, setValuesSearchIndex, debouncedSearch]);
   const handleEditIndex = (indexName) => {
     setOpen(false);
     setEditingIndex(indexName);
@@ -8923,8 +9050,9 @@ var IndexSelector = () => {
               )
             ] }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "max-h-[200px] overflow-y-auto", children: [
-              _optionalChain([filteredIndexes, 'optionalAccess', _104 => _104.length]) === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "py-4 text-center text-sm text-zinc-500", children: "No indexes found" }),
-              _optionalChain([filteredIndexes, 'optionalAccess', _105 => _105.map, 'call', _106 => _106((idx) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              isLoading && !indexes && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLoader2, { className: "size-4 animate-spin text-zinc-400" }) }),
+              !isLoading && _optionalChain([indexes, 'optionalAccess', _106 => _106.length]) === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "py-4 text-center text-sm text-zinc-500", children: "No indexes found" }),
+              _optionalChain([indexes, 'optionalAccess', _107 => _107.map, 'call', _108 => _108((idx) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                 "div",
                 {
                   className: "flex h-9 items-center rounded-md px-2 transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-200",
@@ -8967,7 +9095,16 @@ var IndexSelector = () => {
                   ]
                 },
                 idx
-              ))])
+              ))]),
+              hasNextPage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "button",
+                {
+                  onClick: () => fetchNextPage(),
+                  disabled: isFetchingNextPage,
+                  className: "flex h-9 w-full items-center justify-center rounded-md text-sm text-emerald-600 transition-colors hover:bg-zinc-100 disabled:opacity-50",
+                  children: isFetchingNextPage ? "Loading..." : "Load more"
+                }
+              )
             ] })
           ] }) })
         ]
@@ -9083,7 +9220,7 @@ var generateNestedInterface = (obj, indent = "  ") => {
 var toAmbientTypes = (types) => types.replaceAll(/export const (\w+) = (\[.*?]) as const;/g, "declare const $1: readonly $2;").replaceAll("export ", "");
 var generateTypeDefinitions = (schema) => {
   let schemaFieldsInterface = "";
-  const schemaFields = _optionalChain([schema, 'optionalAccess', _107 => _107.schema]);
+  const schemaFields = _optionalChain([schema, 'optionalAccess', _109 => _109.schema]);
   if (schemaFields && Object.keys(schemaFields).length > 0) {
     const nested = buildNestedSchema(schemaFields);
     const fieldLines = generateNestedInterface(nested);
@@ -9541,7 +9678,7 @@ var SidebarContextMenu = ({ children }) => {
         showReindex: isValuesSearchSelected,
         onDeleteConfirm: async (e, options) => {
           e.stopPropagation();
-          await deleteKey({ keys: contextKeys, reindex: _optionalChain([options, 'optionalAccess', _108 => _108.reindex]) });
+          await deleteKey({ keys: contextKeys, reindex: _optionalChain([options, 'optionalAccess', _110 => _110.reindex]) });
           setAlertOpen(false);
         }
       }
@@ -10437,7 +10574,7 @@ var QueryCondition = ({
     setLocalValue(formattedConditionValue);
   }
   const currentFieldInfo = fieldInfos.find((f) => f.name === condition.field);
-  const currentFieldType = _nullishCoalesce(_optionalChain([currentFieldInfo, 'optionalAccess', _109 => _109.type]), () => ( "unknown"));
+  const currentFieldType = _nullishCoalesce(_optionalChain([currentFieldInfo, 'optionalAccess', _111 => _111.type]), () => ( "unknown"));
   const isUnknownField = condition.field && !fieldNames.includes(condition.field);
   const getValueTypeError = () => {
     if (isUnknownField || currentFieldType === "unknown" || currentFieldType === "string") {
@@ -10495,8 +10632,8 @@ var QueryCondition = ({
     }
   }, [currentFieldType, condition.value]);
   const handleFieldChange = (value) => {
-    const newFieldInfo = _optionalChain([fieldInfos, 'optionalAccess', _110 => _110.find, 'call', _111 => _111((f) => f.name === value)]);
-    const newFieldType = _nullishCoalesce(_optionalChain([newFieldInfo, 'optionalAccess', _112 => _112.type]), () => ( "unknown"));
+    const newFieldInfo = _optionalChain([fieldInfos, 'optionalAccess', _112 => _112.find, 'call', _113 => _113((f) => f.name === value)]);
+    const newFieldType = _nullishCoalesce(_optionalChain([newFieldInfo, 'optionalAccess', _114 => _114.type]), () => ( "unknown"));
     const validOperators = getOperatorsForFieldType(newFieldType);
     const isOperatorValid = validOperators.includes(condition.operator);
     let newValue = condition.value;
@@ -10637,10 +10774,10 @@ var QueryCondition = ({
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
       {
-        ref: _optionalChain([dragHandleProps, 'optionalAccess', _113 => _113.ref]),
+        ref: _optionalChain([dragHandleProps, 'optionalAccess', _115 => _115.ref]),
         className: "flex cursor-grab items-center px-1 text-zinc-400 hover:text-zinc-600",
-        ..._optionalChain([dragHandleProps, 'optionalAccess', _114 => _114.attributes]),
-        ..._optionalChain([dragHandleProps, 'optionalAccess', _115 => _115.listeners]),
+        ..._optionalChain([dragHandleProps, 'optionalAccess', _116 => _116.attributes]),
+        ..._optionalChain([dragHandleProps, 'optionalAccess', _117 => _117.listeners]),
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconGripVertical, { size: 16 })
       }
     ),
@@ -11148,10 +11285,10 @@ var InnerGroup = ({
       !isRoot && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "div",
         {
-          ref: _optionalChain([dragHandleProps, 'optionalAccess', _116 => _116.ref]),
+          ref: _optionalChain([dragHandleProps, 'optionalAccess', _118 => _118.ref]),
           className: "flex cursor-grab items-center px-1 text-zinc-400",
-          ..._optionalChain([dragHandleProps, 'optionalAccess', _117 => _117.attributes]),
-          ..._optionalChain([dragHandleProps, 'optionalAccess', _118 => _118.listeners]),
+          ..._optionalChain([dragHandleProps, 'optionalAccess', _119 => _119.attributes]),
+          ..._optionalChain([dragHandleProps, 'optionalAccess', _120 => _120.listeners]),
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconGripVertical, { size: 16 })
         }
       ),
@@ -11500,7 +11637,7 @@ var UIQueryBuilder = () => {
   const { valuesSearch } = useTab();
   const { data: indexDetails } = useFetchSearchIndex(valuesSearch.index);
   const { queryState, setQueryState } = useQueryStateSync();
-  const fieldInfos = _optionalChain([indexDetails, 'optionalAccess', _119 => _119.schema]) ? extractFieldInfo(indexDetails.schema) : [];
+  const fieldInfos = _optionalChain([indexDetails, 'optionalAccess', _121 => _121.schema]) ? extractFieldInfo(indexDetails.schema) : [];
   const hasNormalized = _react.useRef.call(void 0, false);
   _react.useEffect.call(void 0, () => {
     if (hasNormalized.current || fieldInfos.length === 0) return;
@@ -11519,7 +11656,7 @@ var UIQueryBuilder = () => {
     setHasBottomShadow(scrollTop + clientHeight < scrollHeight - 1);
   }, []);
   _react.useEffect.call(void 0, () => {
-    viewportRef.current = _optionalChain([scrollAreaRef, 'access', _120 => _120.current, 'optionalAccess', _121 => _121.querySelector, 'call', _122 => _122(
+    viewportRef.current = _optionalChain([scrollAreaRef, 'access', _122 => _122.current, 'optionalAccess', _123 => _123.querySelector, 'call', _124 => _124(
       "[data-radix-scroll-area-viewport]"
     )]);
     recomputeShadows();
@@ -11868,7 +12005,7 @@ var useOverflow = () => {
     }
     if (!node) return;
     observerRef.current = new ResizeObserver((entries) => {
-      const el = _optionalChain([entries, 'access', _123 => _123.at, 'call', _124 => _124(0), 'optionalAccess', _125 => _125.target]);
+      const el = _optionalChain([entries, 'access', _125 => _125.at, 'call', _126 => _126(0), 'optionalAccess', _127 => _127.target]);
       if (!el) return;
       setIsOverflow(el.scrollWidth > el.clientWidth);
     });
@@ -11876,7 +12013,7 @@ var useOverflow = () => {
   }, []);
   _react.useEffect.call(void 0, () => {
     return () => {
-      _optionalChain([observerRef, 'access', _126 => _126.current, 'optionalAccess', _127 => _127.disconnect, 'call', _128 => _128()]);
+      _optionalChain([observerRef, 'access', _128 => _128.current, 'optionalAccess', _129 => _129.disconnect, 'call', _130 => _130()]);
     };
   }, []);
   return { ref, isOverflow };
@@ -11994,8 +12131,8 @@ var SortableTab = ({ id }) => {
   const [originalWidth, setOriginalWidth] = _react.useState.call(void 0, null);
   const textRef = _react.useRef.call(void 0, null);
   const { tabs } = useDatabrowserStore();
-  const tabData = _optionalChain([tabs, 'access', _129 => _129.find, 'call', _130 => _130(([tabId]) => tabId === id), 'optionalAccess', _131 => _131[1]]);
-  const isPinned = _optionalChain([tabData, 'optionalAccess', _132 => _132.pinned]);
+  const tabData = _optionalChain([tabs, 'access', _131 => _131.find, 'call', _132 => _132(([tabId]) => tabId === id), 'optionalAccess', _133 => _133[1]]);
+  const isPinned = _optionalChain([tabData, 'optionalAccess', _134 => _134.pinned]);
   const { attributes, listeners: listeners2, setNodeRef, transform, transition, isDragging } = _sortable.useSortable.call(void 0, {
     id,
     disabled: isPinned,
@@ -12211,7 +12348,7 @@ function AddTabButton() {
     const tabsId = addTab();
     selectTab(tabsId);
     setTimeout(() => {
-      const tab = _optionalChain([rootRef, 'optionalAccess', _133 => _133.current, 'optionalAccess', _134 => _134.querySelector, 'call', _135 => _135(`#tab-${tabsId}`)]);
+      const tab = _optionalChain([rootRef, 'optionalAccess', _135 => _135.current, 'optionalAccess', _136 => _136.querySelector, 'call', _137 => _137(`#tab-${tabsId}`)]);
       if (!tab) return;
       tab.scrollIntoView({ behavior: "smooth" });
     }, 20);
@@ -12245,7 +12382,7 @@ function TabsListButton({
     onSelectTab(id);
     setOpen(false);
     setTimeout(() => {
-      const tab = _optionalChain([rootRef, 'optionalAccess', _136 => _136.current, 'optionalAccess', _137 => _137.querySelector, 'call', _138 => _138(`#tab-${id}`)]);
+      const tab = _optionalChain([rootRef, 'optionalAccess', _138 => _138.current, 'optionalAccess', _139 => _139.querySelector, 'call', _140 => _140(`#tab-${id}`)]);
       if (!tab) return;
       tab.scrollIntoView({ behavior: "smooth" });
     }, 20);