feat: complete Epic 1 production foundation

apps/ui/html/api-keys.html

@@ -251,10 +251,10 @@
 
   <!-- ══ Create Key Modal ══ -->
   <div class="modal-overlay" id="modal-create">
-    <div class="modal">
+    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-create-title">
       <div class="modal-header">
         <span class="modal-title" id="modal-create-title" data-i18n="apikeys.modal.title">Create agent key</span>
-        <button class="modal-close" id="modal-close-btn" type="button">
+        <button class="modal-close" id="modal-close-btn" type="button" aria-label="Close">
           <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
             <line x1="1" y1="1" x2="11" y2="11"/><line x1="11" y1="1" x2="1" y2="11"/>
           </svg>
@@ -277,6 +277,15 @@
           <div style="display:flex;flex-direction:column;gap:8px;margin-top:2px;" id="scope-checkboxes">
           </div>
         </div>
+        <div class="callout warning" id="ambiguous-create-warning" data-testid="ambiguous-create-warning" hidden>
+          <div>
+            <strong data-i18n="apikeys.ambiguous.title">Creation result is uncertain.</strong>
+            <span data-i18n="apikeys.ambiguous.body">Key metadata was refreshed. Review the list before deliberately creating another key.</span>
+            <div style="margin-top:10px;">
+              <button class="btn-secondary" id="ambiguous-create-retry-btn" type="button" data-i18n="apikeys.ambiguous.retry">Refresh metadata and allow another attempt</button>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="modal-body" id="modal-reveal-body" hidden>
         <div class="callout warning" style="margin-bottom:16px;">
@@ -294,6 +303,13 @@
             </svg>
           </button>
         </div>
+        <div class="callout warning" id="onboarding-clipboard-warning" data-testid="onboarding-clipboard-warning" hidden style="margin-top:12px;">
+          <div data-i18n="apikeys.modal.clipboard_warning">Your operating system clipboard is outside Crank control. Clear it after saving the key.</div>
+        </div>
+        <div id="onboarding-connection-config" data-testid="onboarding-connection-config" hidden style="margin-top:14px;">
+          <div class="field-label" data-i18n="apikeys.modal.connection_title">MCP connection configuration</div>
+          <div id="onboarding-connection-clients"></div>
+        </div>
       </div>
       <div class="modal-footer" id="modal-footer-create">
         <button class="btn-secondary" id="modal-cancel-btn" type="button" data-i18n="apikeys.modal.cancel">Cancel</button>
@@ -305,6 +321,10 @@
     </div>
   </div>
 
+  <div class="callout warning" id="onboarding-key-lost" data-testid="onboarding-key-lost" hidden style="position:fixed;right:22px;bottom:82px;z-index:760;max-width:420px;">
+    <div data-i18n="apikeys.onboarding.key_lost">The key cannot be shown again. Create a new key and revoke the old one if its value was not saved.</div>
+  </div>
+
   <!-- Template: scope checkbox row -->
   <template id="tmpl-scope-checkbox">
     <label class="scope-checkbox-label">