crank/apps/ui/html/wizard/step4.html

        <div id="step-panel-4" 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 4 of 5</span>
            </div>
            <h1 class="step-panel-title" data-i18n="wizard.step4.title">Настройки инструмента</h1>
            <p class="step-panel-subtitle" data-i18n="wizard.step4.subtitle">Задайте имя инструмента, описание для LLM и определите входную/выходную схему. Описание — главный сигнал, по которому модель решает, вызывать ли этот инструмент.</p>
          </div>

          <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 5h12M2 8h8M2 11h5"/>
                </svg>
              </div>
              <div>
                <div class="config-card-title" data-i18n="wizard.step4.identity_title">Параметры инструмента</div>
                <div class="config-card-subtitle" data-i18n="wizard.step4.identity_subtitle">Имя инструмента и описание его назначения</div>
              </div>
            </div>
            <div class="config-card-body" style="gap: 20px;">

              <div class="form-group">
                <label class="form-label">
                  <span data-i18n="wizard.step4.tool_name">Имя инструмента</span>
                  <span class="form-label-required" data-i18n="workspace_setup.required">обязательно</span>
                </label>
                <input id="tool-name" class="form-input input-mono" type="text" value="create_crm_lead" autocomplete="off" spellcheck="false">
                <div class="form-hint" data-i18n="wizard.step4.tool_name_hint">Техническое имя для вызова MCP инструмента. Допустимы только строчные английские буквы, цифры и подчеркивания. После публикации изменить нельзя.</div>
              </div>

              <div class="form-row">
                <div class="form-group">
                  <label class="form-label">
                    <span data-i18n="wizard.step4.display_name">Отображаемое имя</span>
                    <span class="form-label-required" data-i18n="workspace_setup.required">обязательно</span>
                  </label>
                  <input id="tool-display-name" class="form-input" type="text" value="Create CRM Lead" autocomplete="off">
                  <div class="form-hint" data-i18n="wizard.step4.display_name_hint">Понятное название, которое отображается в интерфейсе и логах.</div>
                </div>
                <div class="form-group">
                  <label class="form-label">
                    <span data-i18n="wizard.step4.tool_title">Короткое описание</span>
                    <span class="form-label-optional" data-i18n="workspace_setup.optional">(необязательно)</span>
                  </label>
                  <input id="tool-title" class="form-input" type="text" value="Create a new CRM lead record" autocomplete="off">
                  <div class="form-hint" data-i18n="wizard.step4.tool_title_hint">Короткая фраза, которая будет показана MCP клиенту в описании инструмента.</div>
                </div>
              </div>

              <div class="form-group">
                <label class="form-label">
                  <span data-i18n="wizard.step4.description">Описание</span>
                  <span class="form-label-required" data-i18n="workspace_setup.required">обязательно</span>
                </label>
                <textarea id="tool-description" class="form-textarea" rows="5">Creates a new lead record in the CRM from the provided contact details. Use this tool when the user wants to add a new prospect or contact. Returns the new lead ID and creation timestamp on success.</textarea>
                <div class="form-hint" data-i18n="wizard.step4.description_hint">Описание для модели. Пишите точно: по этому тексту модель решает, когда нужно вызвать инструмент.</div>
              </div>

            </div>
          </div>

          <div class="info-callout" style="margin-bottom: 24px;">
            <svg class="info-callout-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="8" cy="8" r="7"/>
              <path d="M8 11V8M8 5v-.5"/>
            </svg>
            <div class="info-callout-body">
              <div class="info-callout-title" data-i18n="wizard.step4.description_title">Как писать хорошие описания</div>
              <div class="info-callout-text" data-i18n="wizard.step4.description_body">Начинайте с глагола: создает, получает, обновляет. Укажите обязательные входные данные и опишите успешный результат. Избегайте расплывчатых формулировок вроде “обрабатывает” или “управляет”.</div>
            </div>
          </div>

          <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="M4 2h8a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2z"/>
                  <path d="M6 6l-2 2 2 2M10 6l2 2-2 2"/>
                </svg>
              </div>
              <div>
                <div class="config-card-title" data-i18n="wizard.step4.input_schema_title">Входная схема</div>
                <div class="config-card-subtitle" data-i18n="wizard.step4.input_schema_subtitle">Параметры, которые LLM передает при вызове инструмента</div>
              </div>
              <span class="config-card-optional" data-i18n="wizard.step4.schema_draft">JSON Schema draft-07</span>
            </div>
            <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">json / input-schema</span>
                </div>
                <textarea id="tool-input-schema" class="form-textarea code-textarea" rows="16">{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "required": ["first_name", "last_name", "email"],
  "properties": {
    "first_name": { "type": "string", "description": "Contact first name" },
    "last_name":  { "type": "string", "description": "Contact last name" },
    "email":      { "type": "string", "format": "email", "description": "Primary contact email address" },
    "company":    { "type": "string", "description": "Company or organisation name" },
    "phone":      { "type": "string", "description": "Phone number in E.164 format" },
    "source":     { "type": "string", "enum": ["web","api","import"], "default": "api" }
  },
  "additionalProperties": false
}</textarea>
              </div>
            </div>
          </div>

          <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="M4 2h8a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2z"/>
                  <path d="M5 8h6M5 5h4M5 11h3"/>
                </svg>
              </div>
              <div>
                <div class="config-card-title" data-i18n="wizard.step4.output_schema_title">Выходная схема</div>
                <div class="config-card-subtitle" data-i18n="wizard.step4.output_schema_subtitle">Форма данных, которые LLM получает после успешного вызова</div>
              </div>
              <span class="config-card-optional" data-i18n="wizard.step4.schema_draft">JSON Schema draft-07</span>
            </div>
            <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">json / output-schema</span>
                </div>
                <textarea id="tool-output-schema" class="form-textarea code-textarea" rows="14">{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "lead_id":    { "type": "string", "description": "Unique identifier of the created lead" },
    "status":     { "type": "string", "description": "Initial lead status assigned by the CRM" },
    "created_at": { "type": "string", "format": "date-time" },
    "owner_id":   { "type": "string", "description": "CRM user ID of the assigned owner" }
  }
}</textarea>
              </div>
            </div>
          </div>

          <div class="info-callout" style="margin-bottom: 24px;">
            <svg class="info-callout-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="8" cy="8" r="7"/>
              <path d="M8 11V8M8 5v-.5"/>
            </svg>
            <div class="info-callout-body">
              <div class="info-callout-title" data-i18n="wizard.step4.protocol_agnostic_title">Схемы описывают инструмент</div>
              <div class="info-callout-text" data-i18n="wizard.step4.protocol_agnostic_body">Входная схема описывает данные, которые MCP клиент передает инструменту. Выходная схема описывает результат работы инструмента. На следующем шаге эти поля связываются с реальным API-запросом и ответом.</div>
            </div>
          </div>
        </div><!-- /step-pane-4 -->