Split MCP and approval agent keys

apps/ui/html/api-keys.html

@@ -23,9 +23,48 @@
   .scope-checkbox-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
   .scope-checkbox-desc { font-size: 11.5px; color: var(--text-muted); }
   .keys-card-list { display: none; }
+  .key-kind-tabs {
+    display: inline-flex;
+    gap: 4px;
+    padding: 4px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: var(--bg-overlay);
+  }
+  .key-kind-tab {
+    border: 0;
+    border-radius: var(--radius);
+    background: transparent;
+    color: var(--text-secondary);
+    padding: 7px 12px;
+    font-size: 13px;
+    font-weight: 600;
+  }
+  .key-kind-tab.active {
+    background: var(--accent);
+    color: #fff;
+  }
+  .approval-warning-callout {
+    display: flex;
+    gap: 10px;
+    padding: 12px 14px;
+    border: 1px solid var(--amber-border);
+    border-radius: var(--radius-lg);
+    background: var(--amber-bg);
+    color: var(--text-primary);
+    font-size: 13px;
+    line-height: 1.55;
+  }
+  .approval-warning-callout svg {
+    color: var(--amber);
+    flex: 0 0 auto;
+    margin-top: 2px;
+  }
   @media (max-width: 720px) {
     #keys-table-wrap { display: none; }
     .keys-card-list { display: grid; }
+    .key-kind-tabs { width: 100%; }
+    .key-kind-tab { flex: 1; }
   }
   </style>
   <script src="%CRANK_BUNDLE_PROTECTED_CORE%"></script>
@@ -102,7 +141,7 @@
       <div class="page-header-actions">
         <button class="btn-primary" id="btn-create-key" type="button">
           <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path d="M7.75 2a.75.75 0 01.75.75V7h4.25a.75.75 0 010 1.5H8.5v4.25a.75.75 0 01-1.5 0V8.5H2.75a.75.75 0 010-1.5H7V2.75A.75.75 0 017.75 2z"/></svg>
-          <span data-i18n="apikeys.new">Create key</span>
+          <span id="btn-create-key-label" data-i18n="apikeys.new">Create key</span>
         </button>
       </div>
     </div>
@@ -118,6 +157,16 @@
       </div>
     </div>
 
+    <div class="section-card">
+      <div class="section-card-body" style="display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;">
+        <div class="key-kind-tabs" role="tablist" aria-label="Key type">
+          <button class="key-kind-tab active" id="key-kind-mcp-client" type="button" data-key-kind="mcp_client" data-i18n="apikeys.kind.mcp">MCP clients</button>
+          <button class="key-kind-tab" id="key-kind-approval" type="button" data-key-kind="approval" data-i18n="apikeys.kind.approval">Approvals</button>
+        </div>
+        <div class="field-hint" id="key-kind-hint" style="max-width:560px;margin:0;"></div>
+      </div>
+    </div>
+
     <div class="section-card">
       <div class="section-card-header">
         <div>
@@ -170,25 +219,7 @@
       <div class="section-card-header">
           <div class="section-card-title" data-i18n="apikeys.scope_ref">Access reference</div>
       </div>
-      <div class="section-card-body" style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;">
-        <div>
-          <div style="font-size:12.5px;font-weight:600;color:var(--text-primary);margin-bottom:4px;display:flex;align-items:center;gap:6px;">
-            <span class="badge badge-scope">read</span>
-          </div>
-          <div style="font-size:12px;color:var(--text-muted);line-height:1.55;" data-i18n="apikeys.scope.read">Initialize MCP sessions, ping the server, and list tools for a workspace agent.</div>
-        </div>
-        <div>
-          <div style="font-size:12.5px;font-weight:600;color:var(--text-primary);margin-bottom:4px;">
-            <span class="badge badge-scope">write</span>
-          </div>
-          <div style="font-size:12px;color:var(--text-muted);line-height:1.55;" data-i18n="apikeys.scope.write">Execute `tools/call` requests against published agent toolsets.</div>
-        </div>
-        <div>
-          <div style="font-size:12.5px;font-weight:600;color:var(--text-primary);margin-bottom:4px;">
-            <span class="badge badge-scope">deploy</span>
-          </div>
-          <div style="font-size:12px;color:var(--text-muted);line-height:1.55;" data-i18n="apikeys.scope.deploy">Reserved for deploy-scoped automation. Today it also permits MCP read/write flows.</div>
-        </div>
+      <div class="section-card-body" id="scope-reference-grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;">
       </div>
     </div>
 
@@ -198,7 +229,7 @@
   <div class="modal-overlay" id="modal-create">
     <div class="modal">
       <div class="modal-header">
-        <span class="modal-title" data-i18n="apikeys.modal.title">Create agent key</span>
+        <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">
           <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"/>
@@ -211,6 +242,12 @@
           <input class="field-input" id="new-key-name" type="text" data-i18n-ph="apikeys.modal.name_placeholder" placeholder="e.g. Production, CI pipeline" autocomplete="off">
           <div class="field-hint" data-i18n="apikeys.modal.name_hint">A descriptive label to identify the key. Only visible to admins.</div>
         </div>
+        <div class="approval-warning-callout" id="approval-key-warning" hidden>
+          <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+            <polygon points="8,1.5 15.5,14.5 0.5,14.5" fill="none"/><path d="M8 6v4M8 11.5v.5"/>
+          </svg>
+          <div data-i18n="apikeys.approval.warning">Do not pass this key to an LLM or MCP client. It is only for an external interface where a human confirms an action.</div>
+        </div>
         <div class="field-group" style="margin-bottom:0;">
           <label class="field-label" data-i18n="apikeys.modal.scopes">Access</label>
           <div style="display:flex;flex-direction:column;gap:8px;margin-top:2px;" id="scope-checkboxes">

apps/ui/js/api-keys.js

@@ -2,14 +2,20 @@ var KEYS = [];
 var AGENTS = [];
 var currentWorkspaceId = null;
 var currentAgentId = null;
+var activeKeyKind = 'mcp_client';
 var selectedScopes = new Set(['read']);
 var search = '';
 
-var SCOPES = ['read', 'write', 'deploy'];
+var SCOPES_BY_KIND = {
+  mcp_client: ['read', 'write', 'deploy'],
+  approval: ['approve', 'deny'],
+};
 var SCOPE_DESC = {
   read: 'apikeys.scope.read',
   write: 'apikeys.scope.write',
   deploy: 'apikeys.scope.deploy',
+  approve: 'apikeys.scope.approve',
+  deny: 'apikeys.scope.deny',
 };
 
 function tKey(key) {
@@ -35,6 +41,7 @@ function mapKeyRecord(record) {
   return {
     id: apiKey.id,
     agentId: apiKey.agent_id || null,
+    keyKind: apiKey.key_kind || 'mcp_client',
     name: apiKey.name,
     prefix: apiKey.prefix || '',
     scopes: apiKey.scopes || [],
@@ -173,6 +180,7 @@ async function deleteKey(id) {
 async function createKey(name, scopes) {
   var created = await window.CrankApi.createAgentPlatformApiKey(currentWorkspaceId, currentAgentId, {
     name: name,
+    key_kind: activeKeyKind,
     scopes: scopes,
   });
   return {
@@ -221,13 +229,19 @@ function setCreateButtonState() {
   var button = document.getElementById('btn-create-key');
   if (!button) return;
   button.disabled = !currentAgentId;
+  var label = document.getElementById('btn-create-key-label');
+  if (label) {
+    label.textContent = activeKeyKind === 'approval'
+      ? tKey('apikeys.new_approval')
+      : tKey('apikeys.new_mcp');
+  }
 }
 
 function renderScopes() {
   var el = document.getElementById('scope-checkboxes');
   var tmpl = document.getElementById('tmpl-scope-checkbox');
   el.innerHTML = '';
-  SCOPES.forEach(function(scope) {
+  (SCOPES_BY_KIND[activeKeyKind] || []).forEach(function(scope) {
     var node = tmpl.content.cloneNode(true);
     var input = node.querySelector('input');
     input.dataset.scope = scope;
@@ -242,11 +256,49 @@ function renderScopes() {
   });
 }
 
+function renderKeyKindTabs() {
+  document.querySelectorAll('[data-key-kind]').forEach(function(button) {
+    var kind = button.dataset.keyKind;
+    button.classList.toggle('active', kind === activeKeyKind);
+    button.setAttribute('aria-selected', kind === activeKeyKind ? 'true' : 'false');
+  });
+  var hint = document.getElementById('key-kind-hint');
+  if (hint) {
+    hint.textContent = activeKeyKind === 'approval'
+      ? tKey('apikeys.kind.approval_hint')
+      : tKey('apikeys.kind.mcp_hint');
+  }
+  renderScopeReference();
+  setCreateButtonState();
+}
+
+function renderScopeReference() {
+  var grid = document.getElementById('scope-reference-grid');
+  if (!grid) return;
+  grid.innerHTML = '';
+  (SCOPES_BY_KIND[activeKeyKind] || []).forEach(function(scope) {
+    var item = document.createElement('div');
+    var title = document.createElement('div');
+    title.style.cssText = 'font-size:12.5px;font-weight:600;color:var(--text-primary);margin-bottom:4px;';
+    var badge = document.createElement('span');
+    badge.className = 'badge badge-scope';
+    badge.textContent = scope;
+    title.appendChild(badge);
+    var description = document.createElement('div');
+    description.style.cssText = 'font-size:12px;color:var(--text-muted);line-height:1.55;';
+    description.textContent = tKey(SCOPE_DESC[scope]);
+    item.appendChild(title);
+    item.appendChild(description);
+    grid.appendChild(item);
+  });
+}
+
 function renderTable(errorMessage) {
   var q = search.toLowerCase();
   var tbody = document.getElementById('keys-tbody');
   var cardList = document.getElementById('keys-card-list');
-  var rows = KEYS.filter(function(key) {
+  var visibleKeys = KEYS.filter(function(key) { return key.keyKind === activeKeyKind; });
+  var rows = visibleKeys.filter(function(key) {
     return !q || key.name.toLowerCase().includes(q) || key.prefix.toLowerCase().includes(q);
   });
   var subtitle = document.getElementById('keys-summary-subtitle');
@@ -257,8 +309,8 @@ function renderTable(errorMessage) {
   }
 
   if (subtitle) {
-    var active = KEYS.filter(function(key) { return key.status === 'active'; }).length;
-    var revoked = KEYS.filter(function(key) { return key.status === 'revoked'; }).length;
+    var active = visibleKeys.filter(function(key) { return key.status === 'active'; }).length;
+    var revoked = visibleKeys.filter(function(key) { return key.status === 'revoked'; }).length;
     subtitle.textContent = currentAgentId
       ? tfKey('apikeys.active.subtitle', { active: active, revoked: revoked })
       : tKey('apikeys.agent.empty_hint');
@@ -282,7 +334,7 @@ function renderTable(errorMessage) {
     td.colSpan = 7;
     td.style.cssText = 'text-align:center;padding:36px;color:var(--text-muted);';
     td.textContent = currentAgentId
-      ? (KEYS.length ? tKey('apikeys.empty.search') : tKey('apikeys.empty.none'))
+      ? (visibleKeys.length ? tKey('apikeys.empty.search') : emptyTextForKind())
       : tKey('apikeys.agent.empty_hint');
     empty.appendChild(td);
     tbody.appendChild(empty);
@@ -349,7 +401,7 @@ function renderKeyCards(rows, errorMessage) {
     cardList.appendChild(
       buildKeyCardMessage(
         currentAgentId
-          ? (KEYS.length ? tKey('apikeys.empty.search') : tKey('apikeys.empty.none'))
+          ? (visibleKeys.length ? tKey('apikeys.empty.search') : emptyTextForKind())
           : tKey('apikeys.agent.empty_hint'),
         false
       )
@@ -424,6 +476,12 @@ function buildKeyCardMessage(text, isError) {
   return card;
 }
 
+function emptyTextForKind() {
+  return activeKeyKind === 'approval'
+    ? tKey('apikeys.empty.approval')
+    : tKey('apikeys.empty.none');
+}
+
 function buildMetaItem(labelKey, valueText) {
   var item = document.createElement('div');
   item.className = 'resource-meta-item';
@@ -456,7 +514,11 @@ function openModal() {
   document.getElementById('modal-footer-create').hidden = false;
   document.getElementById('modal-footer-done').hidden = true;
   document.getElementById('new-key-name').value = '';
-  selectedScopes = new Set(['read']);
+  selectedScopes = new Set([activeKeyKind === 'approval' ? 'approve' : 'read']);
+  document.getElementById('modal-create-title').textContent = activeKeyKind === 'approval'
+    ? tKey('apikeys.modal.title_approval')
+    : tKey('apikeys.modal.title_mcp');
+  document.getElementById('approval-key-warning').hidden = activeKeyKind !== 'approval';
   renderScopes();
   modal.classList.add('open');
   setTimeout(function() {
@@ -554,6 +616,16 @@ document.getElementById('agent-select').addEventListener('change', async functio
   await loadKeys();
 });
 
+document.querySelectorAll('[data-key-kind]').forEach(function(button) {
+  button.addEventListener('click', function() {
+    activeKeyKind = this.dataset.keyKind || 'mcp_client';
+    search = '';
+    document.getElementById('key-search').value = '';
+    renderKeyKindTabs();
+    renderTable();
+  });
+});
+
 function copyPrefix(prefix) {
   if (navigator.clipboard) {
     navigator.clipboard.writeText(prefix).catch(function() {});
@@ -564,6 +636,7 @@ function copyPrefix(prefix) {
 }
 
 document.addEventListener('DOMContentLoaded', async function() {
+  renderKeyKindTabs();
   await (window.whenWorkspacesReady ? window.whenWorkspacesReady() : Promise.resolve());
   await loadKeys();
   window.addEventListener('crank:workspacechange', function() {

apps/ui/js/i18n.js

@@ -95,6 +95,12 @@ var TRANSLATIONS = {
     'apikeys.title':    'Agent Keys',
     'apikeys.subtitle': 'These keys connect an MCP client to the MCP server and are issued for a specific agent.',
     'apikeys.new':      'Create key',
+    'apikeys.new_mcp':  'Create MCP client key',
+    'apikeys.new_approval': 'Create approval key',
+    'apikeys.kind.mcp': 'MCP clients',
+    'apikeys.kind.approval': 'Approvals',
+    'apikeys.kind.mcp_hint': 'MCP client keys connect an agent to tools/list and tools/call.',
+    'apikeys.kind.approval_hint': 'Approval keys are used only by an external human confirmation interface.',
     'apikeys.agent.title': 'Agent selection',
     'apikeys.agent.subtitle': 'Select the AI agent this key is issued for.',
     'apikeys.agent.label': 'AI agent',
@@ -118,7 +124,11 @@ var TRANSLATIONS = {
     'apikeys.scope.read': 'Initialize MCP sessions, ping the server, and list tools for the selected AI agent.',
     'apikeys.scope.write': 'Execute `tools/call` requests against published agent toolsets.',
     'apikeys.scope.deploy': 'Reserved for deploy-scoped automation. Today it also permits MCP read/write flows.',
+    'apikeys.scope.approve': 'Confirm a pending human approval request for this agent.',
+    'apikeys.scope.deny': 'Reject a pending human approval request for this agent.',
     'apikeys.modal.title': 'Create agent key',
+    'apikeys.modal.title_mcp': 'Create MCP client key',
+    'apikeys.modal.title_approval': 'Create approval key',
     'apikeys.modal.name': 'Key name',
     'apikeys.modal.name_hint': 'A descriptive label to identify the key. Only visible to admins.',
     'apikeys.modal.name_placeholder': 'e.g. Production, CI pipeline',
@@ -133,6 +143,7 @@ var TRANSLATIONS = {
     'apikeys.status.revoked': 'Revoked',
     'apikeys.last_used.never': 'Never',
     'apikeys.empty.none': 'No API keys yet',
+    'apikeys.empty.approval': 'No approval keys yet. Create one only if this agent has tools that require human confirmation.',
     'apikeys.empty.search': 'No keys match your search',
     'apikeys.loading': 'Loading…',
     'apikeys.error.api': 'Workspace or API is unavailable',
@@ -160,6 +171,7 @@ var TRANSLATIONS = {
     'apikeys.action.revoke': 'Revoke key',
     'apikeys.action.delete': 'Delete',
     'apikeys.creating': 'Creating…',
+    'apikeys.approval.warning': 'Do not pass this key to an LLM or MCP client. It is only for an external interface where a human confirms an action.',
 
     // Secrets page
     'secrets.title': 'Secrets',
@@ -905,6 +917,12 @@ var TRANSLATIONS = {
     'apikeys.title':    'Ключи агентов',
     'apikeys.subtitle': 'Эти ключи используются для подключения MCP клиента к MCP серверу и выдаются на конкретного агента.',
     'apikeys.new':      'Создать ключ',
+    'apikeys.new_mcp':  'Создать ключ MCP-клиента',
+    'apikeys.new_approval': 'Создать ключ подтверждения',
+    'apikeys.kind.mcp': 'MCP-клиенты',
+    'apikeys.kind.approval': 'Подтверждения',
+    'apikeys.kind.mcp_hint': 'Ключи MCP-клиентов используются для подключения к tools/list и tools/call агента.',
+    'apikeys.kind.approval_hint': 'Ключи подтверждения используются только внешним интерфейсом, где человек подтверждает действие.',
     'apikeys.agent.title': 'Выбор агента',
     'apikeys.agent.subtitle': 'Выберите AI-агента для которого выпускается ключ.',
     'apikeys.agent.label': 'AI-агент',
@@ -928,7 +946,11 @@ var TRANSLATIONS = {
     'apikeys.scope.read': 'Инициализация MCP-сессий, ping сервера и получение списка инструментов для выбранного AI-агента.',
     'apikeys.scope.write': 'Выполнение `tools/call` для опубликованных наборов инструментов агента.',
     'apikeys.scope.deploy': 'Зарезервировано для deploy-автоматизации. Сейчас также разрешает MCP read/write сценарии.',
+    'apikeys.scope.approve': 'Подтверждение ожидающего human approval запроса для этого агента.',
+    'apikeys.scope.deny': 'Отклонение ожидающего human approval запроса для этого агента.',
     'apikeys.modal.title': 'Создать ключ агента',
+    'apikeys.modal.title_mcp': 'Создать ключ MCP-клиента',
+    'apikeys.modal.title_approval': 'Создать ключ подтверждения',
     'apikeys.modal.name': 'Имя ключа',
     'apikeys.modal.name_hint': 'Понятная метка для идентификации ключа. Видна только администраторам.',
     'apikeys.modal.name_placeholder': 'например, Production, CI pipeline',
@@ -943,6 +965,7 @@ var TRANSLATIONS = {
     'apikeys.status.revoked': 'Отозван',
     'apikeys.last_used.never': 'Никогда',
     'apikeys.empty.none': 'API-ключей пока нет',
+    'apikeys.empty.approval': 'Ключей подтверждения пока нет. Они нужны только агентам с инструментами, требующими подтверждения человеком.',
     'apikeys.empty.search': 'Нет ключей по текущему поиску',
     'apikeys.loading': 'Загрузка…',
     'apikeys.error.api': 'Воркспейс или API недоступен',
@@ -970,6 +993,7 @@ var TRANSLATIONS = {
     'apikeys.action.revoke': 'Отозвать ключ',
     'apikeys.action.delete': 'Удалить',
     'apikeys.creating': 'Создание…',
+    'apikeys.approval.warning': 'Не передавайте этот ключ LLM или MCP-клиенту. Он нужен только внешнему интерфейсу, где человек подтверждает действие.',
 
     // Secrets page
     'secrets.title': 'Секреты',

apps/ui/tests/e2e/api-keys.spec.js

@@ -22,8 +22,25 @@ test('api keys page opens create key flow', async ({ page }) => {
   await expect(page.locator('#btn-create-key')).toBeEnabled();
   await page.locator('#btn-create-key').click();
   await expect(page.locator('#modal-create')).toHaveClass(/open/);
-  await expect(page.locator('.modal-title')).toHaveText(localized('Create agent key', 'Создать ключ агента'));
+  await expect(page.locator('.modal-title')).toHaveText(localized('Create MCP client key', 'Создать ключ MCP-клиента'));
   await page.locator('#new-key-name').fill(`playwright-${Date.now()}`);
   await page.locator('#modal-confirm-btn').click();
   await expect(page.locator('#modal-reveal-body')).toContainText(localized('Copy this key now', 'Скопируйте этот ключ сейчас'));
+  await page.locator('#modal-done-btn').click();
+
+  await page.locator('#key-kind-approval').click();
+  await expect(page.locator('#key-kind-hint')).toContainText(
+    localized('human confirmation interface', 'человек подтверждает действие')
+  );
+  await expect(page.locator('#btn-create-key')).toContainText(
+    localized('Create approval key', 'Создать ключ подтверждения')
+  );
+  await page.locator('#btn-create-key').click();
+  await expect(page.locator('.modal-title')).toHaveText(localized('Create approval key', 'Создать ключ подтверждения'));
+  await expect(page.locator('#approval-key-warning')).toContainText(
+    localized('Do not pass this key to an LLM', 'Не передавайте этот ключ LLM')
+  );
+  await page.locator('#new-key-name').fill(`playwright-approval-${Date.now()}`);
+  await page.locator('#modal-confirm-btn').click();
+  await expect(page.locator('#reveal-key-value')).toContainText('crk_appr_');
 });