@upstash/react-redis-browser 0.1.2-canary-6 → 0.1.2-canary-8

package/dist/index.css

@@ -971,6 +971,10 @@
 .ups-db .p-6 {
   padding: 1.5rem;
 }
+.ups-db .px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
 .ups-db .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;

package/dist/index.js

@@ -222,6 +222,20 @@ var _iconsreact = require('@tabler/icons-react');
 
 var _reactresizablepanels = require('react-resizable-panels');
 
+// src/components/ui/toaster.tsx
+var _reactportal = require('@radix-ui/react-portal');
+
+// src/lib/portal-root.ts
+var root;
+if (typeof document !== "undefined") {
+  const id = "react-redis-browser-portal-root";
+  root = _nullishCoalesce(document.querySelector(`#${id}`), () => ( document.createElement("div")));
+  root.classList.add("ups-db");
+  root.id = "react-redis-browser-portal-root";
+  document.body.append(root);
+}
+var portalRoot = root;
+
 // src/components/ui/toast.tsx
 
 var _reacticons = require('@radix-ui/react-icons');
@@ -2874,7 +2888,7 @@ ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 function Toaster() {
   const { toasts } = useToast();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ToastProvider, { children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactportal.Portal, { container: portalRoot, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ToastProvider, { children: [
     toasts.map(({ id, title, description, action, ...props }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Toast, { ...props, children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid gap-1", children: [
         title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ToastTitle, { children: title }),
@@ -2884,7 +2898,7 @@ function Toaster() {
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ToastClose, {})
     ] }, id)),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ToastViewport, {})
-  ] });
+  ] }) });
 }
 
 // src/components/databrowser/hooks/use-keys.tsx
@@ -3037,7 +3051,7 @@ var KeysProvider = ({ children }) => {
     queryKey: [FETCH_KEYS_QUERY_KEY, search],
     initialPageParam: 0,
     queryFn: async ({ pageParam: page }) => {
-      if (pageRef.current > page) resetCache();
+      if (pageRef.current >= page) resetCache();
       pageRef.current = page;
       return await fetchKeys();
     },
@@ -3174,41 +3188,42 @@ var useAddKey = () => {
   const { redis } = useDatabrowser();
   const mutation = _reactquery.useMutation.call(void 0, {
     mutationFn: async ({ key, type }) => {
+      if (await redis.exists(key)) throw new Error(`Key "${key}" already exists`);
       switch (type) {
         case "set": {
-          redis.sadd(key, "value");
+          await redis.sadd(key, "value");
           break;
         }
         case "zset": {
-          redis.zadd(key, {
+          await redis.zadd(key, {
             member: "value",
             score: 0
           });
           break;
         }
         case "hash": {
-          redis.hset(key, {
+          await redis.hset(key, {
             field: "field",
             value: "value"
           });
           break;
         }
         case "list": {
-          redis.lpush(key, "value");
+          await redis.lpush(key, "value");
           break;
         }
         case "stream": {
-          redis.xadd(key, "*", {
+          await redis.xadd(key, "*", {
             foo: "bar"
           });
           break;
         }
         case "string": {
-          redis.set(key, "value");
+          await redis.set(key, "value");
           break;
         }
         case "json": {
-          redis.json.set(key, "$", {
+          await redis.json.set(key, "$", {
             foo: "bar"
           });
           break;
@@ -3577,19 +3592,6 @@ var _reactcontextmenu = require('@radix-ui/react-context-menu'); var ContextMenu
 
 
 
-// src/lib/portal-root.ts
-var root;
-if (typeof document !== "undefined") {
-  const id = "react-redis-browser-portal-root";
-  root = _nullishCoalesce(document.querySelector(`#${id}`), () => ( document.createElement("div")));
-  root.classList.add("ups-db");
-  root.id = "react-redis-browser-portal-root";
-  document.body.append(root);
-}
-var portalRoot = root;
-
-// src/components/ui/context-menu.tsx
-
 var ContextMenu = ContextMenuPrimitive.Root;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuSubTrigger = React4.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -4270,7 +4272,7 @@ var Spinner = ({
         strokeWidth: "2",
         strokeLinecap: "round",
         strokeLinejoin: "round",
-        className: "ml-2 h-4 w-4 animate-spin",
+        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" })
       }
     )
@@ -4567,7 +4569,14 @@ function KeyActions({ dataKey, content }) {
           children: "Copy content"
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DeleteAlertDialog, { deletionType: "key", onDeleteConfirm: async () => await deleteKey(dataKey), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" }) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        DeleteAlertDialog,
+        {
+          deletionType: "key",
+          onDeleteConfirm: async () => await deleteKey(dataKey),
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" })
+        }
+      )
     ] })
   ] });
 }
@@ -4615,7 +4624,7 @@ var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }
     ref,
     sideOffset,
     className: cn(
-      "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 dark:bg-zinc-50 dark:text-zinc-900",
+      "z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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:bg-zinc-50 dark:text-zinc-900",
       className
     ),
     ...props
@@ -4701,7 +4710,8 @@ var CustomEditor = ({
   value,
   onChange,
   height,
-  showCopyButton
+  showCopyButton,
+  readOnly
 }) => {
   const monaco = _react2.useMonaco.call(void 0, );
   const editorRef = _react.useRef.call(void 0, );
@@ -4732,6 +4742,7 @@ var CustomEditor = ({
             },
             defaultLanguage: language,
             options: {
+              readOnly,
               wordWrap: "on",
               overviewRulerBorder: false,
               overviewRulerLanes: 0,
@@ -4777,7 +4788,8 @@ var useField = ({
   name,
   form,
   height,
-  showCopyButton
+  showCopyButton,
+  readOnly
 }) => {
   const { field, fieldState } = _reacthookform.useController.call(void 0, {
     name,
@@ -4815,7 +4827,8 @@ var useField = ({
         value: field.value,
         onChange: field.onChange,
         height,
-        showCopyButton
+        showCopyButton,
+        readOnly
       }
     ) })
   };
@@ -4866,8 +4879,24 @@ var ListEditForm = ({
   });
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacthookform.FormProvider, { ...form, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { onSubmit, className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex grow flex-col gap-2", children: [
-      type !== "list" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormItem, { name: "key", height: type === "set" ? 250 : 100, label: keyLabel }),
-      type === "zset" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormItem, { name: "value", height: type === "list" ? 250 : 100, label: valueLabel })
+      type !== "list" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        FormItem,
+        {
+          readOnly: type === "stream",
+          name: "key",
+          height: type === "set" ? 250 : 100,
+          label: keyLabel
+        }
+      ),
+      type === "zset" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        FormItem,
+        {
+          readOnly: type === "stream",
+          name: "value",
+          height: type === "list" ? 250 : 100,
+          label: valueLabel
+        }
+      )
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex justify-end gap-2", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -4920,14 +4949,16 @@ var NumberFormItem = ({ name, label }) => {
 var FormItem = ({
   name,
   label,
-  height
+  height,
+  readOnly
 }) => {
   const form = _reacthookform.useFormContext.call(void 0, );
   const { editor, selector } = useField({
     name,
     form,
     height,
-    showCopyButton: true
+    showCopyButton: true,
+    readOnly
   });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 text-xs", children: [
@@ -5090,10 +5121,14 @@ var EditorDisplayForm = ({
 
 var DataDisplay = () => {
   const { selectedKey } = useDatabrowserStore();
+  const { query } = useKeys();
   const type = useKeyType(selectedKey);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full rounded-xl border p-1 bg-white", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: type === "string" || type === "json" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full rounded-xl border bg-white p-1", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? query.isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: type === "string" || type === "json" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
 };
 
+// src/components/databrowser/components/sidebar/index.tsx
+
+
 // src/components/databrowser/components/add-key-modal.tsx
 
 var _reactdialog = require('@radix-ui/react-dialog'); var DialogPrimitive = _interopRequireWildcard(_reactdialog);
@@ -5214,23 +5249,16 @@ function AddKeyModal() {
     }
   });
   const onSubmit = handleSubmit(async ({ key, type }) => {
-    try {
-      await addKey({ key, type });
-      setSelectedKey(key);
-      setOpen(false);
-      setTimeout(() => {
-        _optionalChain([window, 'access', _32 => _32.document, 'access', _33 => _33.querySelector, 'call', _34 => _34(`[data-key="${key}"]`), 'optionalAccess', _35 => _35.scrollIntoView, 'call', _36 => _36({
-          behavior: "smooth",
-          block: "start",
-          inline: "nearest"
-        })]);
-      }, 100);
-    } catch (error) {
-      toast({
-        description: error instanceof Error ? error.message : "An error occurred",
-        variant: "destructive"
-      });
-    }
+    await addKey({ key, type });
+    setSelectedKey(key);
+    setOpen(false);
+    setTimeout(() => {
+      _optionalChain([window, 'access', _32 => _32.document, 'access', _33 => _33.querySelector, 'call', _34 => _34(`[data-key="${key}"]`), 'optionalAccess', _35 => _35.scrollIntoView, 'call', _36 => _36({
+        behavior: "smooth",
+        block: "start",
+        inline: "nearest"
+      })]);
+    }, 100);
   });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     Dialog,
@@ -5472,12 +5500,15 @@ function DataTypeSelector() {
 // src/components/databrowser/components/sidebar/index.tsx
 
 function Sidebar() {
-  const { keys, query } = useKeys();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2 rounded-xl border p-1 bg-white", children: [
+  const { keys, query, refetch } = useKeys();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2 rounded-xl border bg-white p-1", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center justify-between pl-1", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayDbSize, {}),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex gap-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddKeyModal, {}) })
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { className: "h-7 w-7 px-0", onClick: refetch, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoading: query.isFetching, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconRefresh, { size: 16 }) }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddKeyModal, {})
+        ] })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataTypeSelector, {}),
@@ -5492,6 +5523,9 @@ function Sidebar() {
 
 var RedisBrowser = ({ token, url }) => {
   const credentials = _react.useMemo.call(void 0, () => ({ token, url }), [token, url]);
+  _react.useEffect.call(void 0, () => {
+    queryClient.resetQueries();
+  }, [credentials.url]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ups-db", style: { height: "100%" }, children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       _reactresizablepanels.PanelGroup,

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/databrowser/index.tsx
-import { useMemo as useMemo6 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo6 } from "react";
 
 // src/store.tsx
 import { createContext, useContext, useMemo, useState as useState2 } from "react";
@@ -222,6 +222,20 @@ import { IconDotsVertical as IconDotsVertical2 } from "@tabler/icons-react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
+// src/components/ui/toaster.tsx
+import { Portal } from "@radix-ui/react-portal";
+
+// src/lib/portal-root.ts
+var root;
+if (typeof document !== "undefined") {
+  const id = "react-redis-browser-portal-root";
+  root = document.querySelector(`#${id}`) ?? document.createElement("div");
+  root.classList.add("ups-db");
+  root.id = "react-redis-browser-portal-root";
+  document.body.append(root);
+}
+var portalRoot = root;
+
 // src/components/ui/toast.tsx
 import * as React2 from "react";
 import { Cross2Icon } from "@radix-ui/react-icons";
@@ -2874,7 +2888,7 @@ ToastDescription.displayName = ToastPrimitives.Description.displayName;
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 function Toaster() {
   const { toasts } = useToast();
-  return /* @__PURE__ */ jsxs(ToastProvider, { children: [
+  return /* @__PURE__ */ jsx3(Portal, { container: portalRoot, children: /* @__PURE__ */ jsxs(ToastProvider, { children: [
     toasts.map(({ id, title, description, action, ...props }) => /* @__PURE__ */ jsxs(Toast, { ...props, children: [
       /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
         title && /* @__PURE__ */ jsx3(ToastTitle, { children: title }),
@@ -2884,7 +2898,7 @@ function Toaster() {
       /* @__PURE__ */ jsx3(ToastClose, {})
     ] }, id)),
     /* @__PURE__ */ jsx3(ToastViewport, {})
-  ] });
+  ] }) });
 }
 
 // src/components/databrowser/hooks/use-keys.tsx
@@ -3037,7 +3051,7 @@ var KeysProvider = ({ children }) => {
     queryKey: [FETCH_KEYS_QUERY_KEY, search],
     initialPageParam: 0,
     queryFn: async ({ pageParam: page }) => {
-      if (pageRef.current > page) resetCache();
+      if (pageRef.current >= page) resetCache();
       pageRef.current = page;
       return await fetchKeys();
     },
@@ -3174,41 +3188,42 @@ var useAddKey = () => {
   const { redis } = useDatabrowser();
   const mutation = useMutation({
     mutationFn: async ({ key, type }) => {
+      if (await redis.exists(key)) throw new Error(`Key "${key}" already exists`);
       switch (type) {
         case "set": {
-          redis.sadd(key, "value");
+          await redis.sadd(key, "value");
           break;
         }
         case "zset": {
-          redis.zadd(key, {
+          await redis.zadd(key, {
             member: "value",
             score: 0
           });
           break;
         }
         case "hash": {
-          redis.hset(key, {
+          await redis.hset(key, {
             field: "field",
             value: "value"
           });
           break;
         }
         case "list": {
-          redis.lpush(key, "value");
+          await redis.lpush(key, "value");
           break;
         }
         case "stream": {
-          redis.xadd(key, "*", {
+          await redis.xadd(key, "*", {
             foo: "bar"
           });
           break;
         }
         case "string": {
-          redis.set(key, "value");
+          await redis.set(key, "value");
           break;
         }
         case "json": {
-          redis.json.set(key, "$", {
+          await redis.json.set(key, "$", {
             foo: "bar"
           });
           break;
@@ -3576,19 +3591,6 @@ import { ContextMenuSeparator as ContextMenuSeparator2 } from "@radix-ui/react-c
 import * as React4 from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
-
-// src/lib/portal-root.ts
-var root;
-if (typeof document !== "undefined") {
-  const id = "react-redis-browser-portal-root";
-  root = document.querySelector(`#${id}`) ?? document.createElement("div");
-  root.classList.add("ups-db");
-  root.id = "react-redis-browser-portal-root";
-  document.body.append(root);
-}
-var portalRoot = root;
-
-// src/components/ui/context-menu.tsx
 import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var ContextMenu = ContextMenuPrimitive.Root;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
@@ -4270,7 +4272,7 @@ var Spinner = ({
         strokeWidth: "2",
         strokeLinecap: "round",
         strokeLinejoin: "round",
-        className: "ml-2 h-4 w-4 animate-spin",
+        className: cn("h-4 w-4 animate-spin", isLoadingText ? "ml-2" : ""),
         children: /* @__PURE__ */ jsx18("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
       }
     )
@@ -4567,7 +4569,14 @@ function KeyActions({ dataKey, content }) {
           children: "Copy content"
         }
       ),
-      /* @__PURE__ */ jsx22(DeleteAlertDialog, { deletionType: "key", onDeleteConfirm: async () => await deleteKey(dataKey), children: /* @__PURE__ */ jsx22(DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" }) })
+      /* @__PURE__ */ jsx22(
+        DeleteAlertDialog,
+        {
+          deletionType: "key",
+          onDeleteConfirm: async () => await deleteKey(dataKey),
+          children: /* @__PURE__ */ jsx22(DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" })
+        }
+      )
     ] })
   ] });
 }
@@ -4615,7 +4624,7 @@ var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }
     ref,
     sideOffset,
     className: cn(
-      "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 dark:bg-zinc-50 dark:text-zinc-900",
+      "z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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:bg-zinc-50 dark:text-zinc-900",
       className
     ),
     ...props
@@ -4701,7 +4710,8 @@ var CustomEditor = ({
   value,
   onChange,
   height,
-  showCopyButton
+  showCopyButton,
+  readOnly
 }) => {
   const monaco = useMonaco();
   const editorRef = useRef3();
@@ -4732,6 +4742,7 @@ var CustomEditor = ({
             },
             defaultLanguage: language,
             options: {
+              readOnly,
               wordWrap: "on",
               overviewRulerBorder: false,
               overviewRulerLanes: 0,
@@ -4777,7 +4788,8 @@ var useField = ({
   name,
   form,
   height,
-  showCopyButton
+  showCopyButton,
+  readOnly
 }) => {
   const { field, fieldState } = useController({
     name,
@@ -4815,7 +4827,8 @@ var useField = ({
         value: field.value,
         onChange: field.onChange,
         height,
-        showCopyButton
+        showCopyButton,
+        readOnly
       }
     ) })
   };
@@ -4866,8 +4879,24 @@ var ListEditForm = ({
   });
   return /* @__PURE__ */ jsx29(FormProvider, { ...form, children: /* @__PURE__ */ jsxs19("form", { onSubmit, className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsxs19("div", { className: "flex grow flex-col gap-2", children: [
-      type !== "list" && /* @__PURE__ */ jsx29(FormItem, { name: "key", height: type === "set" ? 250 : 100, label: keyLabel }),
-      type === "zset" ? /* @__PURE__ */ jsx29(NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ jsx29(FormItem, { name: "value", height: type === "list" ? 250 : 100, label: valueLabel })
+      type !== "list" && /* @__PURE__ */ jsx29(
+        FormItem,
+        {
+          readOnly: type === "stream",
+          name: "key",
+          height: type === "set" ? 250 : 100,
+          label: keyLabel
+        }
+      ),
+      type === "zset" ? /* @__PURE__ */ jsx29(NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ jsx29(
+        FormItem,
+        {
+          readOnly: type === "stream",
+          name: "value",
+          height: type === "list" ? 250 : 100,
+          label: valueLabel
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs19("div", { className: "flex justify-end gap-2", children: [
       /* @__PURE__ */ jsx29(
@@ -4920,14 +4949,16 @@ var NumberFormItem = ({ name, label }) => {
 var FormItem = ({
   name,
   label,
-  height
+  height,
+  readOnly
 }) => {
   const form = useFormContext();
   const { editor, selector } = useField({
     name,
     form,
     height,
-    showCopyButton: true
+    showCopyButton: true,
+    readOnly
   });
   return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1 text-xs", children: [
@@ -5090,10 +5121,14 @@ var EditorDisplayForm = ({
 import { Fragment as Fragment7, jsx as jsx32 } from "react/jsx-runtime";
 var DataDisplay = () => {
   const { selectedKey } = useDatabrowserStore();
+  const { query } = useKeys();
   const type = useKeyType(selectedKey);
-  return /* @__PURE__ */ jsx32("div", { className: "h-full rounded-xl border p-1 bg-white", children: !selectedKey ? /* @__PURE__ */ jsx32("div", {}) : !type ? /* @__PURE__ */ jsx32("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx32("span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ jsx32(Fragment7, { children: type === "string" || type === "json" ? /* @__PURE__ */ jsx32(EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ jsx32(ListDisplay, { dataKey: selectedKey, type }) }) });
+  return /* @__PURE__ */ jsx32("div", { className: "h-full rounded-xl border bg-white p-1", children: !selectedKey ? /* @__PURE__ */ jsx32("div", {}) : !type ? query.isLoading ? /* @__PURE__ */ jsx32("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx32("span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ jsx32("div", {}) : /* @__PURE__ */ jsx32(Fragment7, { children: type === "string" || type === "json" ? /* @__PURE__ */ jsx32(EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ jsx32(ListDisplay, { dataKey: selectedKey, type }) }) });
 };
 
+// src/components/databrowser/components/sidebar/index.tsx
+import { IconRefresh } from "@tabler/icons-react";
+
 // src/components/databrowser/components/add-key-modal.tsx
 import { useState as useState8 } from "react";
 import { DialogDescription as DialogDescription2 } from "@radix-ui/react-dialog";
@@ -5214,23 +5249,16 @@ function AddKeyModal() {
     }
   });
   const onSubmit = handleSubmit(async ({ key, type }) => {
-    try {
-      await addKey({ key, type });
-      setSelectedKey(key);
-      setOpen(false);
-      setTimeout(() => {
-        window.document.querySelector(`[data-key="${key}"]`)?.scrollIntoView({
-          behavior: "smooth",
-          block: "start",
-          inline: "nearest"
-        });
-      }, 100);
-    } catch (error) {
-      toast({
-        description: error instanceof Error ? error.message : "An error occurred",
-        variant: "destructive"
+    await addKey({ key, type });
+    setSelectedKey(key);
+    setOpen(false);
+    setTimeout(() => {
+      window.document.querySelector(`[data-key="${key}"]`)?.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+        inline: "nearest"
       });
-    }
+    }, 100);
   });
   return /* @__PURE__ */ jsxs23(
     Dialog,
@@ -5472,12 +5500,15 @@ function DataTypeSelector() {
 // src/components/databrowser/components/sidebar/index.tsx
 import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
 function Sidebar() {
-  const { keys, query } = useKeys();
-  return /* @__PURE__ */ jsxs30("div", { className: "flex h-full flex-col gap-2 rounded-xl border p-1 bg-white", children: [
+  const { keys, query, refetch } = useKeys();
+  return /* @__PURE__ */ jsxs30("div", { className: "flex h-full flex-col gap-2 rounded-xl border bg-white p-1", children: [
     /* @__PURE__ */ jsxs30("div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
       /* @__PURE__ */ jsxs30("div", { className: "flex h-10 items-center justify-between pl-1", children: [
         /* @__PURE__ */ jsx41(DisplayDbSize, {}),
-        /* @__PURE__ */ jsx41("div", { className: "flex gap-1", children: /* @__PURE__ */ jsx41(AddKeyModal, {}) })
+        /* @__PURE__ */ jsxs30("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsx41(Button, { className: "h-7 w-7 px-0", onClick: refetch, children: /* @__PURE__ */ jsx41(Spinner, { isLoading: query.isFetching, children: /* @__PURE__ */ jsx41(IconRefresh, { size: 16 }) }) }),
+          /* @__PURE__ */ jsx41(AddKeyModal, {})
+        ] })
       ] }),
       /* @__PURE__ */ jsxs30("div", { className: "flex h-10 items-center", children: [
         /* @__PURE__ */ jsx41(DataTypeSelector, {}),
@@ -5492,6 +5523,9 @@ function Sidebar() {
 import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
 var RedisBrowser = ({ token, url }) => {
   const credentials = useMemo6(() => ({ token, url }), [token, url]);
+  useEffect9(() => {
+    queryClient.resetQueries();
+  }, [credentials.url]);
   return /* @__PURE__ */ jsx42(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx42(TooltipProvider, { children: /* @__PURE__ */ jsx42(DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx42(KeysProvider, { children: /* @__PURE__ */ jsxs31("div", { className: "ups-db", style: { height: "100%" }, children: [
     /* @__PURE__ */ jsxs31(
       PanelGroup,

package/package.json

@@ -1 +1 @@
-{ "name": "@upstash/react-redis-browser", "version": "v0.1.2-canary-6", "main": "./dist/index.js", "types": "./dist/index.d.ts", "license": "MIT", "private": false, "publishConfig": { "access": "public" }, "bugs": { "url": "https://github.com/upstash/react-redis-browser/issues" }, "homepage": "https://github.com/upstash/react-redis-browser", "files": [ "./dist/**" ], "scripts": { "build": "tsup", "dev": "vite", "lint": "tsc && eslint", "fmt": "prettier --write ." }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@ianvs/prettier-plugin-sort-imports": "^4.4.0", "@monaco-editor/react": "^4.6.0", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-context-menu": "^2.2.2", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "1.3.0", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-scroll-area": "^1.0.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", "@tabler/icons-react": "^3.19.0", "@tanstack/react-query": "^5.32.0", "@types/bytes": "^3.1.4", "@upstash/redis": "^1.31.6", "bytes": "^3.1.2", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "postcss-prefix-selector": "^2.1.0", "@types/node": "^22.8.4", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@typescript-eslint/eslint-plugin": "8.4.0", "@typescript-eslint/parser": "8.4.0", "@vitejs/plugin-react": "^4.1.0", "autoprefixer": "^10.4.14", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "postcss": "^8.4.31", "prettier": "^3.0.3", "prettier-plugin-tailwindcss": "^0.5.5", "react": "^18.3.1", "react-dom": "^18.3.1", "tailwind-merge": "^2.5.4", "tailwindcss": "^3.4.14", "tailwindcss-animate": "^1.0.7", "tsup": "^8.3.5", "typescript": "^5.0.4", "vite": "^5.4.10", "vite-tsconfig-paths": "^5.0.1" }, "peerDependencies": { "react": "^18.2.0 || ^19", "react-dom": "^18.2.0 || ^19" } }
+{ "name": "@upstash/react-redis-browser", "version": "v0.1.2-canary-8", "main": "./dist/index.js", "types": "./dist/index.d.ts", "license": "MIT", "private": false, "publishConfig": { "access": "public" }, "bugs": { "url": "https://github.com/upstash/react-redis-browser/issues" }, "homepage": "https://github.com/upstash/react-redis-browser", "files": [ "./dist/**" ], "scripts": { "build": "tsup", "dev": "vite", "lint": "tsc && eslint", "fmt": "prettier --write ./src" }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@ianvs/prettier-plugin-sort-imports": "^4.4.0", "@monaco-editor/react": "^4.6.0", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-context-menu": "^2.2.2", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "1.3.0", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-portal": "^1.1.2", "@radix-ui/react-scroll-area": "^1.0.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", "@tabler/icons-react": "^3.19.0", "@tanstack/react-query": "^5.32.0", "@types/bytes": "^3.1.4", "@upstash/redis": "^1.34.3", "bytes": "^3.1.2", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "postcss-prefix-selector": "^2.1.0", "@types/node": "^22.8.4", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@typescript-eslint/eslint-plugin": "8.4.0", "@typescript-eslint/parser": "8.4.0", "@vitejs/plugin-react": "^4.1.0", "autoprefixer": "^10.4.14", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "postcss": "^8.4.31", "prettier": "^3.0.3", "prettier-plugin-tailwindcss": "^0.5.5", "react": "^18.3.1", "react-dom": "^18.3.1", "tailwind-merge": "^2.5.4", "tailwindcss": "^3.4.14", "tailwindcss-animate": "^1.0.7", "tsup": "^8.3.5", "typescript": "^5.0.4", "vite": "^5.4.10", "vite-tsconfig-paths": "^5.0.1" }, "peerDependencies": { "react": "^18.2.0 || ^19", "react-dom": "^18.2.0 || ^19" } }