bsodfather/crank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve wizard mapping and quality guidance

Browse Source
This commit is contained in:
github-ops
2026-06-23 21:03:25 +00:00
parent 052b9356ec
commit 04f63e690c
7 changed files with 1228 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/ui/html/wizard/step5.html
+63 -17
View File
@@ -13,20 +13,35 @@
<div class="section-divider-line"></div>
</div>
<div class="config-card" style="margin-bottom: 20px;">
<div class="config-card-body" style="gap: 0; padding: 0;">
<div class="code-block" style="border-radius: 0; border: none;">
<div class="code-toolbar">
<div class="code-dots"><span></span><span></span><span></span></div>
<span class="code-toolbar-label">yaml / request-fields</span>
</div>
<textarea id="tool-input-mapping" class="form-textarea code-textarea" rows="12">first_name: "$.input.first_name"
<div class="config-card mapping-builder-card" style="margin-bottom: 20px;">
<div class="config-card-header">
<div>
<div class="config-card-title">Конструктор API-запроса</div>
<div class="config-card-subtitle">Укажите, куда отправлять поля инструмента: в путь, query-параметры, заголовки или JSON-тело.</div>
</div>
<button id="wizard-add-request-mapping-row" class="btn-ghost-sm" type="button">Добавить поле</button>
</div>
<div class="config-card-body" style="gap: 14px;">
<div class="mapping-table" id="wizard-request-mapping-rows" data-testid="wizard-request-mapping-rows"></div>
<div class="mapping-builder-actions">
<button id="wizard-auto-request-mapping" class="btn-ghost-sm" type="button">Собрать из входного JSON</button>
<button id="wizard-sync-request-mapping" class="btn-ghost-sm" type="button">Обновить YAML</button>
</div>
<details class="advanced-mapping-details">
<summary>Дополнительно: YAML маппинга запроса</summary>
<div class="code-block">
<div class="code-toolbar">
<div class="code-dots"><span></span><span></span><span></span></div>
<span class="code-toolbar-label">yaml / request-fields</span>
</div>
<textarea id="tool-input-mapping" class="form-textarea code-textarea" rows="10">first_name: "$.input.first_name"
last_name: "$.input.last_name"
email: "$.input.email"
company: "$.input.company"
phone: "$.input.phone"
source: "$.input.source"</textarea>
</div>
</div>
</details>
</div>
</div>
@@ -35,18 +50,42 @@ source: "$.input.source"</textarea>
<div class="section-divider-line"></div>
</div>
<div class="config-card" style="margin-bottom: 20px;">
<div class="config-card-body" style="gap: 0; padding: 0;">
<div class="code-block" style="border-radius: 0; border: none;">
<div class="code-toolbar">
<div class="code-dots"><span></span><span></span><span></span></div>
<span class="code-toolbar-label">yaml / response-fields</span>
<div class="config-card mapping-builder-card" style="margin-bottom: 20px;">
<div class="config-card-header">
<div>
<div class="config-card-title">Конструктор ответа инструмента</div>
<div class="config-card-subtitle">Выберите поля из ответа API, которые нужно вернуть MCP клиенту.</div>
</div>
<button id="wizard-add-response-mapping-row" class="btn-ghost-sm" type="button">Добавить поле</button>
</div>
<div class="config-card-body" style="gap: 14px;">
<div class="mapping-response-layout">
<div>
<div class="form-label">Поля ответа API</div>
<div id="wizard-response-json-tree" class="json-tree-picker" data-testid="wizard-response-json-tree"></div>
</div>
<textarea id="tool-output-mapping" class="form-textarea code-textarea" rows="10">lead_id: "$.response.data.id"
<div>
<div class="form-label">Поля результата инструмента</div>
<div class="mapping-table" id="wizard-response-mapping-rows" data-testid="wizard-response-mapping-rows"></div>
</div>
</div>
<div class="mapping-builder-actions">
<button id="wizard-auto-response-mapping" class="btn-ghost-sm" type="button">Собрать из ответа JSON</button>
<button id="wizard-sync-response-mapping" class="btn-ghost-sm" type="button">Обновить YAML</button>
</div>
<details class="advanced-mapping-details">
<summary>Дополнительно: YAML маппинга ответа</summary>
<div class="code-block">
<div class="code-toolbar">
<div class="code-dots"><span></span><span></span><span></span></div>
<span class="code-toolbar-label">yaml / response-fields</span>
</div>
<textarea id="tool-output-mapping" class="form-textarea code-textarea" rows="10">lead_id: "$.response.data.id"
status: "$.response.data.status"
created_at: "$.response.data.created_at"
owner_id: "$.response.data.owner.id"</textarea>
</div>
</div>
</details>
</div>
</div>
@@ -103,6 +142,8 @@ tls:
</div>
</div>
<div id="wizard-mapping-warnings" class="mapping-warnings" hidden data-testid="wizard-mapping-warnings"></div>
<div class="config-card" id="agent-facing-preview-card" style="margin-bottom: 20px;">
<div class="config-card-header">
<div class="config-card-header-icon">
@@ -196,6 +237,7 @@ tls:
"last_name": "Lovelace",
"email": "ada@example.com"
}</textarea>
<input id="wizard-input-sample-file" type="file" accept=".json,application/json" hidden>
</div>
<div class="form-group">
<label class="form-label" data-i18n="wizard.step5.output_sample">Пример ответа</label>
@@ -203,9 +245,13 @@ tls:
"id": "lead_123",
"status": "created"
}</textarea>
<input id="wizard-output-sample-file" type="file" accept=".json,application/json" hidden>
</div>
</div>
<div style="display:flex; gap: 8px; flex-wrap: wrap;">
<button id="wizard-load-input-sample-file" class="btn-ghost-sm" type="button">Загрузить JSON запроса</button>
<button id="wizard-load-output-sample-file" class="btn-ghost-sm" type="button">Загрузить JSON ответа</button>
<button id="wizard-format-samples" class="btn-ghost-sm" type="button">Проверить и форматировать JSON</button>
<button id="wizard-upload-input-sample" class="btn-primary-sm" type="button" data-i18n="wizard.step5.save_input_sample">Сохранить входной пример</button>
<button id="wizard-upload-output-sample" class="btn-ghost-sm" type="button" data-i18n="wizard.step5.save_output_sample">Сохранить выходной пример</button>
<button id="wizard-generate-draft" class="btn-ghost-sm" type="button" data-i18n="wizard.step5.generate_draft">Пересобрать по примерам</button>