ui: gate machine access modes on api keys page

apps/ui/js/api-keys.js

@@ -1,5 +1,6 @@
 var KEYS = [];
 var AGENTS = [];
+var capabilities = null;
 var currentWorkspaceId = null;
 var currentAgentId = null;
 var selectedScopes = new Set(['read']);
@@ -20,6 +21,10 @@ function tfKey(key, vars) {
   return window.tf ? tf(key, vars) : tKey(key);
 }
 
+function capabilityLabel(key) {
+  return tKey('settings.capability.' + key);
+}
+
 function buildIconSvg(href, width, height) {
   var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   svg.setAttribute('width', String(width));
@@ -109,6 +114,47 @@ async function loadKeys() {
   }
 }
 
+async function loadCapabilities() {
+  if (!window.CrankApi || typeof window.CrankApi.getCapabilities !== 'function') {
+    return;
+  }
+
+  try {
+    capabilities = await window.CrankApi.getCapabilities();
+  } catch (_error) {
+    capabilities = null;
+  }
+
+  renderMachineAccessSummary();
+}
+
+function renderMachineAccessSummary() {
+  var title = document.getElementById('machine-access-title');
+  var subtitle = document.getElementById('machine-access-subtitle');
+  var summary = document.getElementById('machine-access-summary');
+  var note = document.getElementById('machine-access-note');
+  if (!title || !subtitle || !summary || !note) {
+    return;
+  }
+
+  if (!capabilities) {
+    summary.textContent = tKey('apikeys.machine_access.summary_default');
+    note.textContent = tKey('apikeys.machine_access.note');
+    return;
+  }
+
+  var accessModes = (capabilities.machine_access_modes || []).map(capabilityLabel).join(', ');
+  var securityLevels = (capabilities.supported_security_levels || []).map(capabilityLabel).join(', ');
+
+  title.textContent = tKey('apikeys.machine_access.title_' + capabilities.edition);
+  subtitle.textContent = tKey('apikeys.machine_access.subtitle_' + capabilities.edition);
+  summary.textContent = tfKey('apikeys.machine_access.summary', {
+    access_modes: accessModes || capabilityLabel('none'),
+    security_levels: securityLevels || capabilityLabel('none'),
+  });
+  note.textContent = tKey('apikeys.machine_access.note_' + capabilities.edition);
+}
+
 function setTableLoading(on) {
   var tbody = document.getElementById('keys-tbody');
   if (!on) return;
@@ -444,8 +490,10 @@ function copyPrefix(prefix) {
 
 document.addEventListener('DOMContentLoaded', async function() {
   await (window.whenWorkspacesReady ? window.whenWorkspacesReady() : Promise.resolve());
+  await loadCapabilities();
   await loadKeys();
   window.addEventListener('crank:workspacechange', function() {
+    loadCapabilities();
     loadKeys();
   });
 });