Split MCP and approval agent keys
This commit is contained in:
github-ops
+81
-8
@@ -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() {
|
||||
|
||||
@@ -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': 'Секреты',
|
||||
|
||||
Reference in New Issue
Block a user