From 2649f5945d8b533163cf603b3799abc80d04e8ab Mon Sep 17 00:00:00 2001
From: Nicky Leach <nicky@paperclip.ing>
Date: Thu, 25 Jun 2026 23:15:10 +0000
Subject: [PATCH] Fix PAP-634 UX findings: mobile tab labels + hide Update
 value for dynamic secrets
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Finding 1: responsive abbreviated tab labels (Managed/External/At runtime)
on mobile, full labels at sm+, with truncate safety net — fixes 390px clip.
Finding 2: hide the rotate dialog 'Update value' button for dynamic_command
secrets, which have no stored value to update.

Storybook fixtures add a dynamic_command secret + enable the flag so both
states render for UX review.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 ui/src/pages/Secrets.tsx               | 51 ++++++++++++++++----------
 ui/storybook/.storybook/preview.tsx    |  1 +
 ui/storybook/fixtures/paperclipData.ts | 26 +++++++++++++
 3 files changed, 58 insertions(+), 20 deletions(-)

diff --git a/ui/src/pages/Secrets.tsx b/ui/src/pages/Secrets.tsx
index fecbe0ed0b2..4e2f051744e 100644
--- a/ui/src/pages/Secrets.tsx
+++ b/ui/src/pages/Secrets.tsx
@@ -1195,23 +1195,25 @@ export function Secrets() {
                 </SheetDescription>
               </SheetHeader>
               <div className="flex flex-wrap gap-2 px-4 pb-2">
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => {
-                    setRotateOpen(true);
-                    setRotateValue("");
-                    setRotateExternalRef("");
-                    setRotateProviderConfigId(
-                      selectedSecret.providerConfigId ??
-                        getDefaultProviderConfigId(providerConfigs, selectedSecret.provider),
-                    );
-                    setRotateError(null);
-                  }}
-                >
-                  <RefreshCw className="h-3.5 w-3.5 mr-1" />
-                  {selectedSecret.managedMode === "external_reference" ? "Update reference" : "Update value"}
-                </Button>
+                {selectedSecret.managedMode !== "dynamic_command" && (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => {
+                      setRotateOpen(true);
+                      setRotateValue("");
+                      setRotateExternalRef("");
+                      setRotateProviderConfigId(
+                        selectedSecret.providerConfigId ??
+                          getDefaultProviderConfigId(providerConfigs, selectedSecret.provider),
+                      );
+                      setRotateError(null);
+                    }}
+                  >
+                    <RefreshCw className="h-3.5 w-3.5 mr-1" />
+                    {selectedSecret.managedMode === "external_reference" ? "Update reference" : "Update value"}
+                  </Button>
+                )}
                 {selectedSecret.status === "active" ? (
                   <Button
                     size="sm"
@@ -1357,10 +1359,19 @@ export function Secrets() {
             <TabsList
               className={cn("w-full grid", dynamicSecretsEnabled ? "grid-cols-3" : "grid-cols-2")}
             >
-              <TabsTrigger value="managed">Managed value</TabsTrigger>
-              <TabsTrigger value="external">External reference</TabsTrigger>
+              <TabsTrigger value="managed" className="truncate">
+                <span className="sm:hidden">Managed</span>
+                <span className="hidden sm:inline">Managed value</span>
+              </TabsTrigger>
+              <TabsTrigger value="external" className="truncate">
+                <span className="sm:hidden">External</span>
+                <span className="hidden sm:inline">External reference</span>
+              </TabsTrigger>
               {dynamicSecretsEnabled ? (
-                <TabsTrigger value="dynamic">Generate at runtime</TabsTrigger>
+                <TabsTrigger value="dynamic" className="truncate">
+                  <span className="sm:hidden">At runtime</span>
+                  <span className="hidden sm:inline">Generate at runtime</span>
+                </TabsTrigger>
               ) : null}
             </TabsList>
           </Tabs>
diff --git a/ui/storybook/.storybook/preview.tsx b/ui/storybook/.storybook/preview.tsx
index 011ec14b5b0..fce27fee4cc 100644
--- a/ui/storybook/.storybook/preview.tsx
+++ b/ui/storybook/.storybook/preview.tsx
@@ -97,6 +97,7 @@ function installStorybookApiFixtures() {
       return Response.json({
         enableIsolatedWorkspaces: true,
         autoRestartDevServerWhenIdle: false,
+        enableDynamicSecrets: true,
       });
     }
 
diff --git a/ui/storybook/fixtures/paperclipData.ts b/ui/storybook/fixtures/paperclipData.ts
index ddb511ff883..4fd71f6a787 100644
--- a/ui/storybook/fixtures/paperclipData.ts
+++ b/ui/storybook/fixtures/paperclipData.ts
@@ -1508,6 +1508,32 @@ export const storybookSecrets: CompanySecret[] = [
     createdAt: new Date("2025-12-01T10:00:00.000Z"),
     updatedAt: new Date("2026-03-01T11:30:00.000Z"),
   },
+  {
+    id: "secret-gh-token-dynamic",
+    companyId: "company-storybook",
+    key: "gh_app_token",
+    name: "GH_APP_TOKEN",
+    provider: "host_command",
+    status: "active",
+    managedMode: "dynamic_command",
+    externalRef: null,
+    dynamicCommand: {
+      provider: "host-command",
+      command: "/usr/local/bin/mint-github-token",
+      ttlSeconds: 3600,
+    },
+    providerConfigId: null,
+    providerMetadata: null,
+    latestVersion: 1,
+    description: "GitHub App installation token minted at injection time.",
+    lastResolvedAt: recent(5),
+    lastRotatedAt: null,
+    deletedAt: null,
+    createdByAgentId: null,
+    createdByUserId: "user-board",
+    createdAt: new Date("2026-06-01T10:00:00.000Z"),
+    updatedAt: recent(5),
+  },
 ];
 
 export const storybookSecretBindings: CompanySecretBinding[] = [