From 9d8982ae50362146abe96e1c69be26e0814eb425 Mon Sep 17 00:00:00 2001
From: M1 <m1-pro@M1s-MacBook-Pro.local>
Date: Tue, 17 Mar 2026 06:29:58 +0400
Subject: [PATCH] fix: key rotation shows new key in dedicated reveal, not
 sub-key div; clarify account ID label

---
 apps/web/src/views/settings.ejs | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/views/settings.ejs b/apps/web/src/views/settings.ejs
index 62dc001..ab55314 100644
--- a/apps/web/src/views/settings.ejs
+++ b/apps/web/src/views/settings.ejs
@@ -15,11 +15,11 @@
       <h2 class="text-sm font-semibold text-gray-300 mb-4">Account</h2>
       <div class="space-y-3">
         <div>
-          <label class="block text-xs text-gray-500 mb-1">Account ID</label>
+          <label class="block text-xs text-gray-500 mb-1">Account ID <span class="text-gray-700 normal-case font-normal">(internal — not your login key)</span></label>
           <div class="flex gap-2">
-            <code id="account-id" class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-400 text-sm"><%= it.account.id %></code>
+            <code id="account-id" class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-600 text-sm"><%= it.account.id %></code>
           </div>
-          <p class="text-xs text-gray-600 mt-1.5">Your secret key was shown once at registration and cannot be displayed again. Use "Rotate Key" below to generate a new one.</p>
+          <p class="text-xs text-gray-600 mt-1.5">Your login key was shown once at registration. Use "Rotate Key" below to replace it — the new key will be shown immediately.</p>
         </div>
         <div>
           <label class="block text-xs text-gray-500 mb-1">Member since</label>
@@ -47,6 +47,15 @@
       <h2 class="text-sm font-semibold text-gray-300 mb-1">Rotate Primary Key</h2>
       <p class="text-xs text-gray-600 mb-4">Generates a new primary key. Your old key will stop working immediately. Sub-keys are not affected.</p>
       <button onclick="confirmReset()" class="px-4 py-2.5 bg-gray-800 hover:bg-gray-700 border border-red-900/50 hover:border-red-700/50 text-red-400 rounded-lg text-sm transition-colors">Rotate Key</button>
+
+      <!-- New primary key reveal (shown after rotation) -->
+      <div id="rotated-key-reveal" class="hidden mt-4 p-4 bg-yellow-950/30 rounded-lg border border-yellow-900/50">
+        <p class="text-xs text-yellow-400 mb-2">⚠️ New primary key — copy it now. This is the only time it will be shown.</p>
+        <div class="flex gap-2">
+          <code id="rotated-key-value" class="flex-1 bg-gray-900 border border-gray-800 rounded-lg px-3 py-2 text-blue-400 text-sm font-mono select-all"></code>
+          <button onclick="copyRotatedKey()" class="px-3 bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-lg text-gray-400 hover:text-white text-xs transition-colors">Copy</button>
+        </div>
+      </div>
     </section>
 
     <!-- Sub-keys -->
@@ -131,10 +140,17 @@
     async function confirmReset() {
       if (!confirm('Rotate your primary key?\n\nYour current key will stop working immediately. Make sure to copy the new one.')) return;
       const data = await api('/account/reset-key', { method: 'POST', body: {} });
-      // New key is shown once — display it in the new-key-reveal area
-      document.getElementById('new-key-value').textContent = data.key;
-      document.getElementById('new-key-reveal').classList.remove('hidden');
-      // Cookie is set server-side by reset-key endpoint
+      document.getElementById('rotated-key-value').textContent = data.key;
+      document.getElementById('rotated-key-reveal').classList.remove('hidden');
+      document.getElementById('rotated-key-reveal').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+
+    function copyRotatedKey() {
+      const val = document.getElementById('rotated-key-value').textContent;
+      navigator.clipboard.writeText(val);
+      const btn = event.target;
+      btn.textContent = 'Copied!'; btn.classList.add('text-green-400');
+      setTimeout(() => { btn.textContent = 'Copy'; btn.classList.remove('text-green-400'); }, 1500);
     }
 
     function showCreateKey() {