From 4c4e0b33abba3ce94133a8e5b6c85f0da8dc1adb Mon Sep 17 00:00:00 2001
From: Developing-Gamer <maxcodes11110@gmail.com>
Date: Tue, 23 Jun 2026 15:39:06 -0700
Subject: [PATCH] Add secret key reveal controls and align copy fields with
 design inputs.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/ui/copy-field.tsx          | 21 ++++++++++++++++++-
 apps/dashboard/src/components/ui/textarea.tsx |  2 +-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/src/components/ui/copy-field.tsx b/apps/dashboard/src/components/ui/copy-field.tsx
index a8945be55..a3458c14b 100644
--- a/apps/dashboard/src/components/ui/copy-field.tsx
+++ b/apps/dashboard/src/components/ui/copy-field.tsx
@@ -1,8 +1,12 @@
+"use client";
+
+import React, { useState } from "react";
 import { Input } from "./input";
 import { Label } from "./label";
 import { SimpleTooltip } from "./simple-tooltip";
 import { Textarea } from "./textarea";
 import { CopyButton } from "./copy-button";
+import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
 
 export function CopyField(props: {
   value: string,
@@ -11,12 +15,15 @@ export function CopyField(props: {
   monospace?: boolean,
   fixedSize?: boolean,
   initialCopied?: boolean,
+  isSecret?: boolean,
 } & ({
   type: "textarea",
   height?: number,
 } | {
   type: "input",
 })) {
+  const [isRevealed, setIsRevealed] = useState(false);
+
   return (
     <div>
       {props.label && (
@@ -43,12 +50,24 @@ export function CopyField(props: {
         <div className="flex items-center gap-2">
           <Input
             readOnly
+            type={props.isSecret && !isRevealed ? "password" : "text"}
             value={props.value}
+            className={props.isSecret ? "font-mono pr-10" : undefined}
             style={{
               fontFamily: props.monospace ? "ui-monospace, monospace" : "inherit",
             }}
           />
-          <CopyButton content={props.value} initialCopied={props.initialCopied} />
+          {props.isSecret && (
+            <button
+              type="button"
+              onClick={() => setIsRevealed(!isRevealed)}
+              className="h-9 w-9 flex items-center justify-center rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm text-muted-foreground/60 hover:text-foreground hover:bg-white dark:hover:bg-foreground/[0.06] transition-all shrink-0"
+              title={isRevealed ? "Hide key" : "Show key"}
+            >
+              {isRevealed ? <EyeSlashIcon className="h-4 w-4" /> : <EyeIcon className="h-4 w-4" />}
+            </button>
+          )}
+          <CopyButton content={props.value} initialCopied={props.initialCopied} className="h-9 w-9 p-1.5 rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm hover:bg-white dark:hover:bg-foreground/[0.06] transition-all shrink-0" />
         </div>
       )}
     </div>
diff --git a/apps/dashboard/src/components/ui/textarea.tsx b/apps/dashboard/src/components/ui/textarea.tsx
index 60af5cd78..867b81262 100644
--- a/apps/dashboard/src/components/ui/textarea.tsx
+++ b/apps/dashboard/src/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = forwardRefIfNeeded<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "stack-scope flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "stack-scope flex min-h-[60px] w-full rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06] placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/[0.1] disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06] px-3 py-2 text-sm",
           className
         )}
         ref={ref}