From c19f26a7d9aca4ce447f62726fcd09c82d5fb101 Mon Sep 17 00:00:00 2001
From: nassery318 <nassery318@gmail.com>
Date: Tue, 10 Mar 2026 14:15:27 -0400
Subject: [PATCH 1/3] added alert primitive and used it in components

Signed-off-by: nassery318 <nassery318@gmail.com>
---
 .../src/components/key-browser/KeyBrowser.tsx |  6 +-
 .../key-browser/key-details/key-details.tsx   | 11 +--
 .../src/components/key-browser/key-types.tsx  | 15 ++--
 apps/frontend/src/components/ui/alert.tsx     | 71 +++++++++++++++++++
 .../src/components/ui/connection-modal.tsx    | 18 ++---
 .../src/components/ui/delete-modal.tsx        |  5 +-
 .../src/components/ui/search-input.tsx        |  3 +-
 7 files changed, 102 insertions(+), 27 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/alert.tsx

diff --git a/apps/frontend/src/components/key-browser/KeyBrowser.tsx b/apps/frontend/src/components/key-browser/KeyBrowser.tsx
index f0c3552e..aff30bf3 100644
--- a/apps/frontend/src/components/key-browser/KeyBrowser.tsx
+++ b/apps/frontend/src/components/key-browser/KeyBrowser.tsx
@@ -155,7 +155,7 @@ export function KeyBrowser() {
             className="flex-1"
             label="Total Keys"
             tooltip={
-              <TooltipIcon description="Total number of keys in the database" size={14} />
+              <TooltipIcon description="Total number of keys scanned/fetched" size={14} />
             }
             value={totalKeys}
           />
@@ -163,7 +163,7 @@ export function KeyBrowser() {
             className="flex-1"
             label="Memory Usage"
             tooltip={
-              <TooltipIcon description="Memory used by all keys in the database" size={14} />
+              <TooltipIcon description="Memory used by keys scanned/fetched" size={14} />
             }
             value={formatBytes(totalMemoryUsage)}
           />
@@ -206,7 +206,7 @@ export function KeyBrowser() {
             disabled={loading}
             onChange={(e) => setSearchPattern(e.target.value)}
             onClear={handleClearSearch}
-            placeholder="Search keys (use * to search patterns like user:*)"
+            placeholder="Search keys (use * to search patterns like user:* and press Enter)"
             value={searchPattern}
           />
         </form>
diff --git a/apps/frontend/src/components/key-browser/key-details/key-details.tsx b/apps/frontend/src/components/key-browser/key-details/key-details.tsx
index 0df3c51b..7cbbbad6 100644
--- a/apps/frontend/src/components/key-browser/key-details/key-details.tsx
+++ b/apps/frontend/src/components/key-browser/key-details/key-details.tsx
@@ -1,4 +1,4 @@
-import { Key, Trash, X } from "lucide-react"
+import { Key, Trash, TriangleAlert, X } from "lucide-react"
 import { useState } from "react"
 import { convertTTL } from "@common/src/ttl-conversion"
 import { formatBytes } from "@common/src/bytes-conversion"
@@ -17,6 +17,7 @@ import { useAppDispatch } from "@/hooks/hooks"
 import { deleteKeyRequested } from "@/state/valkey-features/keys/keyBrowserSlice"
 import { CustomTooltip } from "@/components/ui/tooltip"
 import { Typography } from "@/components/ui/typography"
+import { Alert, AlertDescription } from "@/components/ui/alert"
 
 interface BaseKeyInfo {
   name: string;
@@ -157,9 +158,11 @@ export default function KeyDetails({ selectedKey, selectedKeyInfo, connectionId,
             </div>
 
             {selectedKeyInfo.elementsWarning ? (
-              <div className="text-center text-muted-foreground py-8">
-                <Typography variant="bodySm">{selectedKeyInfo.elementsWarning}</Typography>
-              </div>
+              <Alert variant="warning">
+                <TriangleAlert className="w-4 h-4" />
+                <AlertDescription>{selectedKeyInfo.elementsWarning}
+                </AlertDescription>
+              </Alert>
             ) : (
               <>
                 {/* show different key types */}
diff --git a/apps/frontend/src/components/key-browser/key-types.tsx b/apps/frontend/src/components/key-browser/key-types.tsx
index 90c400e9..e2f0dc0a 100644
--- a/apps/frontend/src/components/key-browser/key-types.tsx
+++ b/apps/frontend/src/components/key-browser/key-types.tsx
@@ -1,4 +1,5 @@
 import { Trash, Check, TriangleAlert } from "lucide-react"
+import { Alert, AlertDescription } from "../ui/alert"
 import { Button } from "../ui/button"
 import { Input } from "../ui/input"
 import { Label } from "../ui/label"
@@ -310,18 +311,14 @@ export function JsonFields({ value, setValue, jsonModuleAvailable = false }: Jso
         <Label htmlFor="json-value">JSON Value *</Label>
 
         {/* JSON Module Indicator */}
-        <div className={`flex gap-2 px-3 py-2 rounded bg-primary/20 ${
-          jsonModuleAvailable
-            ? "text-teal-500"
-            : "text-red-400"
-        }`}>
-          {jsonModuleAvailable ? <Check size={14} /> : <TriangleAlert size={14} />}
-          <Typography variant="bodyXs">
+        <Alert variant={jsonModuleAvailable ? "success" : "warning"}>
+          {jsonModuleAvailable ? <Check className="h-4 w-4" /> : <TriangleAlert className="h-4 w-4" />}
+          <AlertDescription>
             {jsonModuleAvailable
               ? "JSON module is available"
               : "JSON module is not loaded on this Valkey instance"}
-          </Typography>
-        </div>
+          </AlertDescription>
+        </Alert>
 
         <Textarea
           className="min-h-[150px] font-mono text-sm"
diff --git a/apps/frontend/src/components/ui/alert.tsx b/apps/frontend/src/components/ui/alert.tsx
new file mode 100644
index 00000000..4c7136da
--- /dev/null
+++ b/apps/frontend/src/components/ui/alert.tsx
@@ -0,0 +1,71 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-3 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground border-border",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive bg-destructive/10",
+        success:
+          "border-green-500/50 text-green-700 dark:text-green-400 bg-green-50 dark:bg-green-500/10",
+        warning:
+          "border-yellow-500/50 text-yellow-700 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-500/10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+  VariantProps<typeof alertVariants> {}
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      className={cn(alertVariants({ variant }), className)}
+      data-slot="alert"
+      ref={ref}
+      role="alert"
+      {...props}
+    />
+  ),
+)
+Alert.displayName = "Alert"
+
+type AlertTitleProps = React.HTMLAttributes<HTMLHeadingElement>
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, AlertTitleProps>(
+  ({ className, ...props }, ref) => (
+    <h5
+      className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+      data-slot="alert-title"
+      ref={ref}
+      {...props}
+    />
+  ),
+)
+AlertTitle.displayName = "AlertTitle"
+
+type AlertDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  AlertDescriptionProps
+>(({ className, ...props }, ref) => (
+  <div
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    data-slot="alert-description"
+    ref={ref}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/apps/frontend/src/components/ui/connection-modal.tsx b/apps/frontend/src/components/ui/connection-modal.tsx
index b6478787..15bdbad5 100644
--- a/apps/frontend/src/components/ui/connection-modal.tsx
+++ b/apps/frontend/src/components/ui/connection-modal.tsx
@@ -1,7 +1,8 @@
-import { Loader2, X } from "lucide-react"
+import { AlertTriangle, Loader2, X } from "lucide-react"
 import { type FormEvent } from "react"
 import * as Dialog from "@radix-ui/react-dialog"
 import { MAX_CONNECTIONS } from "@common/src/constants.ts"
+import { Alert, AlertDescription } from "./alert.tsx"
 import { Button } from "./button.tsx"
 import { Input } from "./input.tsx"
 import { Typography } from "./typography.tsx"
@@ -62,9 +63,9 @@ export function ConnectionModal({
               </Dialog.Description>
 
               {errorMessage && (
-                <div className="mt-4 p-1 bg-primary/20 border rounded">
-                  <Typography className="text-red-500" variant="bodySm">{errorMessage}</Typography>
-                </div>
+                <Alert className="mt-4" variant="destructive">
+                  <AlertDescription>{errorMessage}</AlertDescription>
+                </Alert>
               )}
 
               <form className="space-y-4 mt-4" onSubmit={onSubmit}>
@@ -183,12 +184,13 @@ export function ConnectionModal({
                 )}
 
                 {showConnectionLimitWarning && (
-                  <div className="mt-4 p-2 bg-yellow-100 border rounded">
-                    <Typography variant="bodyXs">
+                  <Alert className="mt-4" variant="warning">
+                    <AlertTriangle className="h-4 w-4" />
+                    <AlertDescription>
                       You've reached the maximum of {MAX_CONNECTIONS} active connections.
                       Please disconnect one before connecting to another.
-                    </Typography>
-                  </div>
+                    </AlertDescription>
+                  </Alert>
                 )}
 
                 <div className="pt-2 text-sm">
diff --git a/apps/frontend/src/components/ui/delete-modal.tsx b/apps/frontend/src/components/ui/delete-modal.tsx
index 0aeac808..72e4aae5 100644
--- a/apps/frontend/src/components/ui/delete-modal.tsx
+++ b/apps/frontend/src/components/ui/delete-modal.tsx
@@ -1,5 +1,6 @@
 import { Trash, X } from "lucide-react"
 import { Button } from "./button"
+import { Typography } from "./typography"
 
 interface DeleteModalProps {
   itemName: string;
@@ -18,10 +19,10 @@ export default function DeleteModal({
     <div className="flex flex-col items-start gap-1 min-h-24 w-60 bg-white dark:bg-tw-dark-primary
     border border-tw-dark-border rounded p-2 text-sm font-thin shadow-xl absolute top-full mt-1 right-0 z-100">
       <div className="flex flex-row justify-between w-full">
-        <span>{message}</span>
+        <Typography variant={"label"}>{message}</Typography>
         <X className="hover:text-primary cursor-pointer" onClick={onCancel} size={16} />
       </div>
-      <span className="font-semibold break-words w-full">{itemName}</span>
+      <Typography className="break-words w-full" variant={"code"}>{itemName}</Typography>
       <Button onClick={onConfirm} variant={"destructiveGhost"}>
         <Trash size={12} /> Delete
       </Button>
diff --git a/apps/frontend/src/components/ui/search-input.tsx b/apps/frontend/src/components/ui/search-input.tsx
index a48eb823..a69e6f37 100644
--- a/apps/frontend/src/components/ui/search-input.tsx
+++ b/apps/frontend/src/components/ui/search-input.tsx
@@ -23,6 +23,7 @@ const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
             "placeholder:text-muted-foreground",
             "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
             "disabled:cursor-not-allowed disabled:opacity-50",
+            "[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden",
             className,
           )}
           data-slot="search-input"
@@ -33,7 +34,7 @@ const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
         />
         {showClearButton && hasValue && onClear && (
           <button
-            className="absolute right-3 text-primary hover:text-primary/80 transition-colors"
+            className="absolute right-3 text-tw-primary hover:text-tw-primary/80 transition-colors"
             onClick={onClear}
             type="button"
           >

From e86e9604544a1b1a8e2ab438a637c9ea7b0e9c9a Mon Sep 17 00:00:00 2001
From: nassery318 <nassery318@gmail.com>
Date: Tue, 10 Mar 2026 14:29:16 -0400
Subject: [PATCH 2/3] alert cleaned up

Signed-off-by: nassery318 <nassery318@gmail.com>
---
 apps/frontend/src/components/ui/alert.tsx | 55 +++++++++++------------
 1 file changed, 25 insertions(+), 30 deletions(-)

diff --git a/apps/frontend/src/components/ui/alert.tsx b/apps/frontend/src/components/ui/alert.tsx
index 4c7136da..e973e441 100644
--- a/apps/frontend/src/components/ui/alert.tsx
+++ b/apps/frontend/src/components/ui/alert.tsx
@@ -3,17 +3,19 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-3 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  "relative w-full rounded-lg border px-4 py-3 text-sm transition-colors " +
+    "[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-3 [&>svg]:text-foreground [&>svg~*]:pl-7",
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground border-border",
+        default:
+          "bg-background text-foreground border-border",
         destructive:
-          "border-destructive/50 text-destructive dark:border-destructive bg-destructive/10",
+          "border-destructive text-destructive bg-destructive/10",
         success:
-          "border-green-500/50 text-green-700 dark:text-green-400 bg-green-50 dark:bg-green-500/10",
+          "border-green-500 text-green-700 dark:text-green-400 bg-green-50 dark:bg-green-500/10",
         warning:
-          "border-yellow-500/50 text-yellow-700 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-500/10",
+          "border-yellow-500 text-yellow-700 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-500/10",
       },
     },
     defaultVariants: {
@@ -23,49 +25,42 @@ const alertVariants = cva(
 )
 
 interface AlertProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends React.ComponentProps<"div">,
   VariantProps<typeof alertVariants> {}
 
-const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
-  ({ className, variant, ...props }, ref) => (
+function Alert({ className, variant, ...props }: AlertProps) {
+  return (
     <div
       className={cn(alertVariants({ variant }), className)}
       data-slot="alert"
-      ref={ref}
       role="alert"
       {...props}
     />
-  ),
-)
-Alert.displayName = "Alert"
+  )
+}
 
 type AlertTitleProps = React.HTMLAttributes<HTMLHeadingElement>
 
-const AlertTitle = React.forwardRef<HTMLParagraphElement, AlertTitleProps>(
-  ({ className, ...props }, ref) => (
+function AlertTitle({ className, ...props }: AlertTitleProps) {
+  return (
     <h5
       className={cn("mb-1 font-medium leading-none tracking-tight", className)}
       data-slot="alert-title"
-      ref={ref}
       {...props}
     />
-  ),
-)
-AlertTitle.displayName = "AlertTitle"
+  )
+}
 
 type AlertDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>
 
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  AlertDescriptionProps
->(({ className, ...props }, ref) => (
-  <div
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    data-slot="alert-description"
-    ref={ref}
-    {...props}
-  />
-))
-AlertDescription.displayName = "AlertDescription"
+function AlertDescription({ className, ...props }: AlertDescriptionProps) {
+  return (
+    <div
+      className={cn("text-sm [&_p]:leading-relaxed", className)}
+      data-slot="alert-description"
+      {...props}
+    />
+  )
+}
 
 export { Alert, AlertTitle, AlertDescription }

From 035c0f76d7a1ab3fd0ce20f4adbca239482d85b5 Mon Sep 17 00:00:00 2001
From: nassery318 <nassery318@gmail.com>
Date: Tue, 10 Mar 2026 15:15:25 -0400
Subject: [PATCH 3/3] correct to sampled instead of fetche/scanned

Signed-off-by: nassery318 <nassery318@gmail.com>
---
 apps/frontend/src/components/key-browser/KeyBrowser.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/components/key-browser/KeyBrowser.tsx b/apps/frontend/src/components/key-browser/KeyBrowser.tsx
index aff30bf3..99000f33 100644
--- a/apps/frontend/src/components/key-browser/KeyBrowser.tsx
+++ b/apps/frontend/src/components/key-browser/KeyBrowser.tsx
@@ -155,7 +155,7 @@ export function KeyBrowser() {
             className="flex-1"
             label="Total Keys"
             tooltip={
-              <TooltipIcon description="Total number of keys scanned/fetched" size={14} />
+              <TooltipIcon description="Total number of keys sampled" size={14} />
             }
             value={totalKeys}
           />
@@ -163,7 +163,7 @@ export function KeyBrowser() {
             className="flex-1"
             label="Memory Usage"
             tooltip={
-              <TooltipIcon description="Memory used by keys scanned/fetched" size={14} />
+              <TooltipIcon description="Memory used by keys sampled" size={14} />
             }
             value={formatBytes(totalMemoryUsage)}
           />