feat(api-tokens): add ability to roll (regenerate) API token secrets and UI to display the newly generated token once

ts_web/elements/ops-view-apitokens.ts

@@ -152,6 +152,15 @@ export class OpsViewApiTokens extends DeesElement {
                 );
               },
             },
+            {
+              name: 'Roll',
+              iconName: 'lucide:refresh-cw',
+              type: ['inRow', 'contextmenu'] as any,
+              actionFunc: async (actionData: any) => {
+                const token = actionData.item as interfaces.data.IApiTokenInfo;
+                await this.showRollTokenDialog(token);
+              },
+            },
             {
               name: 'Revoke',
               iconName: 'lucide:trash2',
@@ -279,6 +288,60 @@ export class OpsViewApiTokens extends DeesElement {
     });
   }
 
+  private async showRollTokenDialog(token: interfaces.data.IApiTokenInfo) {
+    const { DeesModal } = await import('@design.estate/dees-catalog');
+
+    await DeesModal.createAndShow({
+      heading: 'Roll Token Secret',
+      content: html`
+        <div style="color: #ccc; padding: 8px 0;">
+          <p>This will regenerate the secret for <strong>${token.name}</strong>. The old token value will stop working immediately.</p>
+        </div>
+      `,
+      menuOptions: [
+        {
+          name: 'Cancel',
+          iconName: 'lucide:x',
+          action: async (modalArg: any) => await modalArg.destroy(),
+        },
+        {
+          name: 'Roll Token',
+          iconName: 'lucide:refresh-cw',
+          action: async (modalArg: any) => {
+            await modalArg.destroy();
+            try {
+              const response = await appstate.rollApiToken(token.id);
+              if (response.success && response.tokenValue) {
+                await appstate.routeManagementStatePart.dispatchAction(appstate.fetchApiTokensAction, null);
+
+                await DeesModal.createAndShow({
+                  heading: 'Token Rolled',
+                  content: html`
+                    <div style="color: #ccc; padding: 8px 0;">
+                      <p>Copy this token now. It will not be shown again.</p>
+                      <div style="background: #111; padding: 12px; border-radius: 6px; margin-top: 8px;">
+                        <code style="color: #0f8; word-break: break-all; font-size: 13px;">${response.tokenValue}</code>
+                      </div>
+                    </div>
+                  `,
+                  menuOptions: [
+                    {
+                      name: 'Done',
+                      iconName: 'lucide:check',
+                      action: async (m: any) => await m.destroy(),
+                    },
+                  ],
+                });
+              }
+            } catch (error) {
+              console.error('Failed to roll token:', error);
+            }
+          },
+        },
+      ],
+    });
+  }
+
   async firstUpdated() {
     await appstate.routeManagementStatePart.dispatchAction(appstate.fetchApiTokensAction, null);
   }