182 lines
13 KiB
HTML
182 lines
13 KiB
HTML
<!-- REST variant -->
|
|
<div id="step-panel-3-rest" class="step-pane">
|
|
<div class="step-panel-header">
|
|
<div class="step-panel-eyebrow">
|
|
<div class="step-panel-eyebrow-line"></div>
|
|
<span data-step-counter>Step 3 of 5</span>
|
|
</div>
|
|
<h1 class="step-panel-title" data-i18n="wizard.step3.rest.title">HTTP метод и формат</h1>
|
|
<p class="step-panel-subtitle" data-i18n="wizard.step3.rest.subtitle">Выберите HTTP-метод и формат запроса. Crank подставит параметры MCP инструмента в запрос к API.</p>
|
|
</div>
|
|
|
|
<!-- HTTP method picker -->
|
|
<div class="config-card" style="margin-bottom: 20px;">
|
|
<div class="config-card-header">
|
|
<div class="config-card-header-icon">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="var(--text-secondary)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M2 8h12M10 4l4 4-4 4"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="config-card-title" data-i18n="wizard.step3.rest.method_title">HTTP метод</div>
|
|
<div class="config-card-subtitle" data-i18n="wizard.step3.rest.method_subtitle">Метод, который отправляется в API при каждом вызове инструмента</div>
|
|
</div>
|
|
<span class="config-card-optional" style="color:var(--error,#f87171);" data-i18n="wizard.required">Required</span>
|
|
</div>
|
|
<div class="config-card-body">
|
|
<div class="method-grid">
|
|
<button class="method-card" data-method="GET">
|
|
<span class="method-name">GET</span>
|
|
<span class="method-desc" data-i18n="wizard.step3.rest.read">Чтение</span>
|
|
</button>
|
|
<button class="method-card active" data-method="POST">
|
|
<span class="method-name">POST</span>
|
|
<span class="method-desc" data-i18n="wizard.step3.rest.create">Создание</span>
|
|
</button>
|
|
<button class="method-card" data-method="PUT">
|
|
<span class="method-name">PUT</span>
|
|
<span class="method-desc" data-i18n="wizard.step3.rest.replace">Замена</span>
|
|
</button>
|
|
<button class="method-card" data-method="PATCH">
|
|
<span class="method-name">PATCH</span>
|
|
<span class="method-desc" data-i18n="wizard.step3.rest.update">Обновление</span>
|
|
</button>
|
|
<button class="method-card" data-method="DELETE">
|
|
<span class="method-name">DELETE</span>
|
|
<span class="method-desc" data-i18n="wizard.step3.rest.remove">Удаление</span>
|
|
</button>
|
|
</div>
|
|
<div class="method-callout" id="method-callout-rest" hidden></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Request format -->
|
|
<div class="config-card" style="margin-bottom: 20px;">
|
|
<div class="config-card-header">
|
|
<div class="config-card-header-icon">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="var(--text-secondary)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="2" y="3" width="12" height="10" rx="1.5"/>
|
|
<path d="M5 7h6M5 10h4"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="config-card-title" data-i18n="wizard.step3.rest.format_title">Формат запроса</div>
|
|
<div class="config-card-subtitle" data-i18n="wizard.step3.rest.format_subtitle">Формат данных запроса и ожидаемого ответа</div>
|
|
</div>
|
|
<span class="config-card-optional" data-i18n="wizard.optional">Optional</span>
|
|
</div>
|
|
<div class="config-card-body" style="gap: 16px;">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="wizard.step3.rest.content_type">Content-Type</label>
|
|
<select class="form-select">
|
|
<option selected>application/json</option>
|
|
<option>application/x-www-form-urlencoded</option>
|
|
<option>multipart/form-data</option>
|
|
<option>text/plain</option>
|
|
</select>
|
|
<div class="form-hint" data-i18n="wizard.step3.rest.content_type_hint">В каком формате отправлять данные в API.</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="wizard.step3.rest.accept">Accept</label>
|
|
<select class="form-select">
|
|
<option selected>application/json</option>
|
|
<option>text/plain</option>
|
|
<option>*/*</option>
|
|
</select>
|
|
<div class="form-hint" data-i18n="wizard.step3.rest.accept_hint">Какой формат ответа ожидать от API.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="config-card approval-gate-card" style="margin-bottom: 20px;">
|
|
<div class="config-card-header">
|
|
<div class="config-card-header-icon">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="var(--text-secondary)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M8 2l5 2v4c0 3-2 5-5 6-3-1-5-3-5-6V4l5-2z"/>
|
|
<path d="M6 8l1.4 1.4L10.5 6"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="config-card-title" data-i18n="wizard.approval.title">Подтверждение человеком</div>
|
|
<div class="config-card-subtitle" data-i18n="wizard.approval.subtitle">Включайте для действий, которые нельзя выполнять без явного решения пользователя.</div>
|
|
</div>
|
|
</div>
|
|
<div class="config-card-body" style="gap: 16px;">
|
|
<label class="toggle-row approval-toggle-row" for="approval-required">
|
|
<span id="approval-required-toggle" class="toggle" aria-hidden="true"></span>
|
|
<span class="toggle-text">
|
|
<span class="toggle-label" data-i18n="wizard.approval.required_label">Требовать подтверждение перед выполнением</span>
|
|
<span class="toggle-desc" data-i18n="wizard.approval.required_desc">MCP клиент получит ожидающий запрос, а действие выполнится только после подтверждения через отдельный эндпоинт подтверждения.</span>
|
|
</span>
|
|
<input id="approval-required" type="checkbox" class="approval-toggle-input">
|
|
</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-клиенту ответ о необходимости подтверждения, идентификатор заявки и адреса для подтверждения или отказа. Ваш MCP-клиент должен распознать такой ответ, показать пользователю окно подтверждения и отправить решение на адрес подтверждения. Для этого адреса нужен отдельный ключ подтверждения агента.</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-клиент должен поддерживать эту возможность. Отдельный ключ подтверждения не используется: решение пользователя возвращается по текущему 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">
|
|
<option value="60">1 минута</option>
|
|
<option value="180">3 минуты</option>
|
|
<option value="300" selected>5 минут</option>
|
|
</select>
|
|
</div>
|
|
|
|
<label class="checkbox-pill approval-preview-pill">
|
|
<input id="approval-show-payload-preview" type="checkbox" checked>
|
|
<span data-i18n="wizard.approval.show_payload">Передавать параметры вызова в подтверждение</span>
|
|
</label>
|
|
|
|
<div class="info-callout" id="approval-payload-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.payload_title">Параметры подтверждения</div>
|
|
<div class="info-callout-text" data-i18n="wizard.approval.payload_body">Если включено, Crank передаст параметры вызова вместе с запросом подтверждения. Так внешний интерфейс или MCP-клиент сможет показать пользователю, какое действие он подтверждает. Если параметры содержат чувствительные данные, выключите эту опцию.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /step-pane-3-rest -->
|