Fix PAP-634 UX findings: mobile tab labels + hide Update value for dynamic secrets

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

@@ -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>

ui/storybook/.storybook/preview.tsx

@@ -97,6 +97,7 @@ function installStorybookApiFixtures() {
       return Response.json({
         enableIsolatedWorkspaces: true,
         autoRestartDevServerWhenIdle: false,
+        enableDynamicSecrets: true,
       });
     }
 

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[] = [