Add approval mode selection

2026-06-27 07:55:38 +00:00
parent 2b2ff92146
commit 700a684257
15 changed files with 425 additions and 31 deletions
@@ -114,6 +114,42 @@
              </label>

              <div id="approval-config-fields" class="approval-config-fields" hidden>
+                <div class="form-group">
+                  <label class="form-label" for="approval-mode" data-i18n="wizard.approval.mode">Механизм подтверждения</label>
+                  <select id="approval-mode" class="form-select">
+                    <option value="custom" data-i18n="wizard.approval.mode.custom">Custom MCP Approval</option>
+                    <option value="elicitation" data-i18n="wizard.approval.mode.elicitation">MCP Elicitation</option>
+                  </select>
+                </div>
+
+                <div class="info-callout" id="approval-custom-info">
+                  <svg class="info-callout-icon" width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="var(--accent)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="8" cy="8" r="6.5"></circle>
+                    <path d="M8 11V8M8 5.5V5"></path>
+                  </svg>
+                  <div class="info-callout-body">
+                    <div class="info-callout-title" data-i18n="wizard.approval.custom_title">Custom MCP Approval</div>
+                    <div class="info-callout-text" data-i18n="wizard.approval.custom_body">Crank вернёт MCP-клиенту approval_required с approval_id, approval_url и ссылками approve/deny. Ваш MCP-клиент должен обработать этот ответ, показать пользователю подтверждение и отправить решение на endpoint подтверждения. Для endpoint-а подтверждения нужен отдельный ключ подтверждения агента.</div>
+                  </div>
+                </div>
+
+                <div class="info-callout" id="approval-elicitation-info" hidden>
+                  <svg class="info-callout-icon" width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="var(--accent)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="8" cy="8" r="6.5"></circle>
+                    <path d="M8 11V8M8 5.5V5"></path>
+                  </svg>
+                  <div class="info-callout-body">
+                    <div class="info-callout-title" data-i18n="wizard.approval.elicitation_title">MCP Elicitation</div>
+                    <div class="info-callout-text" data-i18n="wizard.approval.elicitation_body">Crank запросит подтверждение через стандартный MCP Elicitation. MCP-клиент должен поддерживать capability elicitation. Отдельный ключ подтверждения не используется: ответ пользователя возвращается по текущей MCP-сессии.</div>
+                  </div>
+                </div>
+
+                <div class="form-group" id="approval-elicitation-message-group" hidden>
+                  <label class="form-label" for="approval-elicitation-message" data-i18n="wizard.approval.elicitation_message">Сообщение для MCP-клиента</label>
+                  <textarea id="approval-elicitation-message" class="form-textarea" rows="3" maxlength="240" data-i18n-ph="wizard.approval.elicitation_message_placeholder" placeholder="Подтвердите выполнение операции."></textarea>
+                  <div class="form-hint" data-i18n="wizard.approval.elicitation_message_hint">Короткое протокольное сообщение. Внешний вид окна подтверждения всё равно определяет MCP-клиент.</div>
+                </div>
+
                <div class="form-group">
                  <label class="form-label" for="approval-ttl-seconds" data-i18n="wizard.approval.ttl">Сколько ждать подтверждение</label>
                  <select id="approval-ttl-seconds" class="form-select">
@@ -598,6 +598,16 @@ var TRANSLATIONS = {
    'wizard.approval.subtitle': 'Enable this for actions that must not run without an explicit user decision.',
    'wizard.approval.required_label': 'Require confirmation before execution',
    'wizard.approval.required_desc': 'The MCP client receives a pending request, and the action runs only after confirmation through a separate approval endpoint.',
+    'wizard.approval.mode': 'Confirmation mechanism',
+    'wizard.approval.mode.custom': 'Custom MCP Approval',
+    'wizard.approval.mode.elicitation': 'MCP Elicitation',
+    'wizard.approval.custom_title': 'Custom MCP Approval',
+    'wizard.approval.custom_body': 'Crank returns approval_required to the MCP client with approval_id, approval_url and approve/deny links. Your MCP client must handle this response, show confirmation to the user and send the decision to the approval endpoint. The approval endpoint requires a separate agent approval key.',
+    'wizard.approval.elicitation_title': 'MCP Elicitation',
+    'wizard.approval.elicitation_body': 'Crank asks for confirmation through standard MCP Elicitation. The MCP client must support the elicitation capability. No separate approval key is used: the user decision returns through the current MCP session.',
+    'wizard.approval.elicitation_message': 'Message for the MCP client',
+    'wizard.approval.elicitation_message_placeholder': 'Confirm operation execution.',
+    'wizard.approval.elicitation_message_hint': 'Short protocol message. The MCP client still controls the confirmation UI.',
    'wizard.approval.ttl': 'How long to wait for confirmation',
    'wizard.approval.show_payload': 'Show request parameters',
    'wizard.approval.payload_mode': 'How to show parameters',
@@ -1453,6 +1463,16 @@ var TRANSLATIONS = {
    'wizard.approval.subtitle': 'Включайте для действий, которые нельзя выполнять без явного решения пользователя.',
    'wizard.approval.required_label': 'Требовать подтверждение перед выполнением',
    'wizard.approval.required_desc': 'MCP клиент получит ожидающий запрос, а действие выполнится только после подтверждения через отдельный эндпоинт подтверждения.',
+    'wizard.approval.mode': 'Механизм подтверждения',
+    'wizard.approval.mode.custom': 'Custom MCP Approval',
+    'wizard.approval.mode.elicitation': 'MCP Elicitation',
+    'wizard.approval.custom_title': 'Custom MCP Approval',
+    'wizard.approval.custom_body': 'Crank вернёт MCP-клиенту approval_required с approval_id, approval_url и ссылками approve/deny. Ваш MCP-клиент должен обработать этот ответ, показать пользователю подтверждение и отправить решение на endpoint подтверждения. Для endpoint-а подтверждения нужен отдельный ключ подтверждения агента.',
+    'wizard.approval.elicitation_title': 'MCP Elicitation',
+    'wizard.approval.elicitation_body': 'Crank запросит подтверждение через стандартный MCP Elicitation. MCP-клиент должен поддерживать capability elicitation. Отдельный ключ подтверждения не используется: ответ пользователя возвращается по текущей MCP-сессии.',
+    'wizard.approval.elicitation_message': 'Сообщение для MCP-клиента',
+    'wizard.approval.elicitation_message_placeholder': 'Подтвердите выполнение операции.',
+    'wizard.approval.elicitation_message_hint': 'Короткое протокольное сообщение. Внешний вид окна подтверждения всё равно определяет MCP-клиент.',
    'wizard.approval.ttl': 'Сколько ждать подтверждение',
    'wizard.approval.show_payload': 'Показывать параметры запроса',
    'wizard.approval.payload_mode': 'Как показывать параметры',
@@ -43,10 +43,14 @@ function buildApprovalPolicy() {

  return {
    required: true,
+    mode: textValue('approval-mode') || 'custom',
    risk_level: 'normal',
    ttl_seconds: normalizeApprovalTtlSeconds(textValue('approval-ttl-seconds')),
    show_payload_preview: checkedValue('approval-show-payload-preview'),
    payload_preview_mode: textValue('approval-payload-preview-mode') || 'summary',
+    elicitation_message: textValue('approval-mode') === 'elicitation'
+      ? (textValue('approval-elicitation-message') || null)
+      : null,
  };
 }

@@ -186,6 +190,8 @@ function setApprovalPolicyEditor(policy) {
  var enabled = !!(policy && policy.required);
  var required = document.getElementById('approval-required');
  if (required) required.checked = enabled;
+  setValue('approval-mode', policy && policy.mode ? policy.mode : 'custom');
+  setValue('approval-elicitation-message', policy && policy.elicitation_message ? policy.elicitation_message : '');
  setValue('approval-ttl-seconds', policy && policy.ttl_seconds ? String(policy.ttl_seconds) : '300');
  var showPayload = document.getElementById('approval-show-payload-preview');
  if (showPayload) {
@@ -199,13 +205,22 @@ function updateApprovalPolicyUi() {
  var enabled = checkedValue('approval-required');
  var toggle = document.getElementById('approval-required-toggle');
  var fields = document.getElementById('approval-config-fields');
+  var mode = textValue('approval-mode') || 'custom';
+  var customInfo = document.getElementById('approval-custom-info');
+  var elicitationInfo = document.getElementById('approval-elicitation-info');
+  var elicitationMessage = document.getElementById('approval-elicitation-message-group');
  if (toggle) toggle.classList.toggle('on', enabled);
  if (fields) fields.hidden = !enabled;
+  if (customInfo) customInfo.hidden = mode !== 'custom';
+  if (elicitationInfo) elicitationInfo.hidden = mode !== 'elicitation';
+  if (elicitationMessage) elicitationMessage.hidden = mode !== 'elicitation';
 }

 function bindApprovalPolicyControls() {
  [
    'approval-required',
+    'approval-mode',
+    'approval-elicitation-message',
    'approval-ttl-seconds',
    'approval-show-payload-preview',
    'approval-payload-preview-mode',
@@ -827,6 +827,7 @@ test('wizard edit mode preserves explicit request mapping targets on save', asyn
  await page.evaluate(() => window.CrankWizardShell.doGoToStep(3));
  await expect(page.locator('#approval-required')).toBeChecked();
  await expect(page.locator('#approval-config-fields')).toBeVisible();
+  await expect(page.locator('#approval-mode')).toHaveValue('custom');
  await expect(page.locator('#approval-risk-level')).toHaveCount(0);
  await expect(page.locator('#approval-ttl-seconds')).toHaveValue('180');
  await expect(page.locator('#approval-payload-preview-mode')).toHaveValue('masked_json');
@@ -857,10 +858,12 @@ test('wizard edit mode preserves explicit request mapping targets on save', asyn
    streaming: null,
    approval_policy: {
      required: true,
+      mode: 'custom',
      risk_level: 'normal',
      ttl_seconds: 180,
      show_payload_preview: true,
      payload_preview_mode: 'masked_json',
+      elicitation_message: null,
    },
  });
  expect(updatePayload.tool_description).toEqual({