From b66d228460ffc1a895b8bff71418ffa2aa17a326 Mon Sep 17 00:00:00 2001
From: Cody Seibert <webdevcody@gmail.com>
Date: Mon, 15 Dec 2025 15:12:49 -0500
Subject: [PATCH] feat: enhance CLI and API key verification buttons to hide
 when already verified

---
 apps/app/src/components/ui/sheet.tsx          |   2 +
 .../setup-view/steps/claude-setup-step.tsx    | 110 +++++++++---------
 2 files changed, 59 insertions(+), 53 deletions(-)

diff --git a/apps/app/src/components/ui/sheet.tsx b/apps/app/src/components/ui/sheet.tsx
index 84649ad0..3e9792da 100644
--- a/apps/app/src/components/ui/sheet.tsx
+++ b/apps/app/src/components/ui/sheet.tsx
@@ -51,6 +51,8 @@ function SheetContent({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left"
+  children?: React.ReactNode
+  className?: string
 }) {
   return (
     <SheetPortal>
diff --git a/apps/app/src/components/views/setup-view/steps/claude-setup-step.tsx b/apps/app/src/components/views/setup-view/steps/claude-setup-step.tsx
index f1601d36..ece7886b 100644
--- a/apps/app/src/components/views/setup-view/steps/claude-setup-step.tsx
+++ b/apps/app/src/components/views/setup-view/steps/claude-setup-step.tsx
@@ -542,33 +542,35 @@ export function ClaudeSetupStep({
                   </div>
                 )}
 
-                {/* CLI Verify Button */}
-                <Button
-                  onClick={verifyCliAuth}
-                  disabled={
-                    cliVerificationStatus === "verifying" ||
-                    !claudeCliStatus?.installed
-                  }
-                  className="w-full bg-brand-500 hover:bg-brand-600 text-white"
-                  data-testid="verify-cli-button"
-                >
-                  {cliVerificationStatus === "verifying" ? (
-                    <>
-                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                      Verifying...
-                    </>
-                  ) : cliVerificationStatus === "error" ? (
-                    <>
-                      <RefreshCw className="w-4 h-4 mr-2" />
-                      Retry Verification
-                    </>
-                  ) : (
-                    <>
-                      <ShieldCheck className="w-4 h-4 mr-2" />
-                      Verify CLI Authentication
-                    </>
-                  )}
-                </Button>
+                {/* CLI Verify Button - Hide if CLI is verified */}
+                {cliVerificationStatus !== "verified" && (
+                  <Button
+                    onClick={verifyCliAuth}
+                    disabled={
+                      cliVerificationStatus === "verifying" ||
+                      !claudeCliStatus?.installed
+                    }
+                    className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+                    data-testid="verify-cli-button"
+                  >
+                    {cliVerificationStatus === "verifying" ? (
+                      <>
+                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                        Verifying...
+                      </>
+                    ) : cliVerificationStatus === "error" ? (
+                      <>
+                        <RefreshCw className="w-4 h-4 mr-2" />
+                        Retry Verification
+                      </>
+                    ) : (
+                      <>
+                        <ShieldCheck className="w-4 h-4 mr-2" />
+                        Verify CLI Authentication
+                      </>
+                    )}
+                  </Button>
+                )}
               </AccordionContent>
             </AccordionItem>
 
@@ -704,32 +706,34 @@ export function ClaudeSetupStep({
                     </div>
                   )}
 
-                {/* API Key Verify Button */}
-                <Button
-                  onClick={verifyApiKeyAuth}
-                  disabled={
-                    apiKeyVerificationStatus === "verifying" || !hasApiKey
-                  }
-                  className="w-full bg-brand-500 hover:bg-brand-600 text-white"
-                  data-testid="verify-api-key-button"
-                >
-                  {apiKeyVerificationStatus === "verifying" ? (
-                    <>
-                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                      Verifying...
-                    </>
-                  ) : apiKeyVerificationStatus === "error" ? (
-                    <>
-                      <RefreshCw className="w-4 h-4 mr-2" />
-                      Retry Verification
-                    </>
-                  ) : (
-                    <>
-                      <ShieldCheck className="w-4 h-4 mr-2" />
-                      Verify API Key
-                    </>
-                  )}
-                </Button>
+                {/* API Key Verify Button - Hide if API key is verified */}
+                {apiKeyVerificationStatus !== "verified" && (
+                  <Button
+                    onClick={verifyApiKeyAuth}
+                    disabled={
+                      apiKeyVerificationStatus === "verifying" || !hasApiKey
+                    }
+                    className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+                    data-testid="verify-api-key-button"
+                  >
+                    {apiKeyVerificationStatus === "verifying" ? (
+                      <>
+                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                        Verifying...
+                      </>
+                    ) : apiKeyVerificationStatus === "error" ? (
+                      <>
+                        <RefreshCw className="w-4 h-4 mr-2" />
+                        Retry Verification
+                      </>
+                    ) : (
+                      <>
+                        <ShieldCheck className="w-4 h-4 mr-2" />
+                        Verify API Key
+                      </>
+                    )}
+                  </Button>
+                )}
               </AccordionContent>
             </AccordionItem>
           </Accordion>