crank/apps/ui/html/wizard/step5.html

        <div id="step-panel-5" 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 5 of 5</span>
            </div>
            <h1 class="step-panel-title" data-i18n="wizard.step5.title">Mapping and execution</h1>
            <p class="step-panel-subtitle" data-i18n="wizard.step5.subtitle">Define how MCP tool arguments map to upstream request fields, and how the upstream response maps back to MCP output. Then set execution parameters — auth is configured per-upstream in step 2.</p>
          </div>

          <div class="section-divider" style="margin-bottom: 16px;">
            <span class="section-divider-label" data-i18n="wizard.step5.input_request">Input → Request</span>
            <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 / input-mapping</span>
                </div>
                <textarea id="tool-input-mapping" class="form-textarea code-textarea" rows="12">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>
          </div>

          <div class="section-divider" style="margin-bottom: 16px;">
            <span class="section-divider-label" data-i18n="wizard.step5.output_response">Response → Output</span>
            <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 / output-mapping</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>
          </div>

          <div class="section-divider" style="margin-bottom: 16px;">
            <span class="section-divider-label" data-i18n="wizard.step5.execution">Execution</span>
            <div class="section-divider-line"></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">
                  <circle cx="8" cy="8" r="6"/>
                  <path d="M8 5v3l2 2"/>
                </svg>
              </div>
              <div>
                <div class="config-card-title" data-i18n="wizard.step5.exec_title">Execution config</div>
                <div class="config-card-subtitle" data-i18n="wizard.step5.exec_subtitle">Timeouts, retry policy and auth profile reference</div>
              </div>
              <span class="config-card-optional" data-i18n="wizard.optional">Optional</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">yaml / exec-config</span>
                </div>
                <textarea id="tool-exec-config" class="form-textarea code-textarea" rows="10">timeout_ms: 10000
retry:
  max_attempts: 3
  backoff_ms: 500
auth:
  profile: acme_bearer
tls:
  verify: true</textarea>
              </div>
            </div>
          </div>

          <div class="info-callout" id="wizard-security-level-note" hidden style="margin-bottom: 20px;">
            <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.step5.security_level_title">Operation security in Community</div>
              <div class="info-callout-text"></div>
            </div>
          </div>

          <div class="section-divider" style="margin-bottom: 16px;">
            <span class="section-divider-label" data-i18n="wizard.step5.live_title">Live validation and publishing</span>
            <div class="section-divider-line"></div>
          </div>

          <div id="wizard-live-status" class="info-callout" hidden style="margin-bottom: 20px;">
            <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" id="wizard-live-status-title" data-i18n="wizard.step5.draft_actions">Draft actions</div>
              <div class="info-callout-text" id="wizard-live-status-text"></div>
            </div>
          </div>

          <div class="info-callout info-callout-subtle" style="margin-bottom: 20px;">
            <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.step5.live_save_title">Live actions save the draft first</div>
              <div class="info-callout-text" data-i18n="wizard.step5.live_save_body">Sample uploads, test runs, YAML actions and publish all persist the current draft before calling the backend.</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">
                  <rect x="2" y="3" width="12" height="10" rx="1.5"/>
                  <path d="M5 7h6M5 10h6"/>
                </svg>
              </div>
              <div>
                <div class="config-card-title" data-i18n="wizard.step5.samples_title">Samples and draft generation</div>
                <div class="config-card-subtitle" data-i18n="wizard.step5.samples_subtitle">Persist input/output samples, then generate schemas and mappings from real payloads.</div>
              </div>
            </div>
            <div class="config-card-body" style="gap: 16px;">
              <div class="form-row">
                <div class="form-group">
                  <label class="form-label" data-i18n="wizard.step5.input_sample">Input sample</label>
                  <textarea id="wizard-input-sample" class="form-textarea code-textarea" rows="9" spellcheck="false">{
  "first_name": "Ada",
  "last_name": "Lovelace",
  "email": "ada@example.com"
}</textarea>
                </div>
                <div class="form-group">
                  <label class="form-label" data-i18n="wizard.step5.output_sample">Output sample</label>
                  <textarea id="wizard-output-sample" class="form-textarea code-textarea" rows="9" spellcheck="false">{
  "id": "lead_123",
  "status": "created"
}</textarea>
                </div>
              </div>
              <div style="display:flex; gap: 8px; flex-wrap: wrap;">
                <button id="wizard-upload-input-sample" class="btn-primary-sm" type="button" data-i18n="wizard.step5.save_input_sample">Save input sample</button>
                <button id="wizard-upload-output-sample" class="btn-ghost-sm" type="button" data-i18n="wizard.step5.save_output_sample">Save output sample</button>
                <button id="wizard-generate-draft" class="btn-ghost-sm" type="button" data-i18n="wizard.step5.generate_draft">Generate draft from samples</button>
              </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="M2 8h12M10 4l4 4-4 4"/>
                </svg>
              </div>
              <div>
                <div class="config-card-title" data-i18n="wizard.step5.test_title">Test run</div>
                <div class="config-card-subtitle" data-i18n="wizard.step5.test_subtitle">Run the current draft against the upstream before publishing it.</div>
              </div>
            </div>
            <div class="config-card-body" style="gap: 16px;">
              <div class="form-group">
                <label class="form-label" data-i18n="wizard.step5.test_input_payload">Test input payload</label>
                <textarea id="wizard-test-input" class="form-textarea code-textarea" rows="8" spellcheck="false">{
  "first_name": "Ada",
  "last_name": "Lovelace",
  "email": "ada@example.com"
}</textarea>
              </div>
              <div style="display:flex; gap: 8px; flex-wrap: wrap;">
                <button id="wizard-run-test" class="btn-primary-sm" type="button" data-i18n="wizard.step5.run_test">Run test</button>
                <button id="wizard-copy-test-response" class="btn-ghost-sm" type="button" data-i18n="wizard.step5.use_response_output">Use response as output sample</button>
              </div>
              <div class="form-row">
                <div class="form-group">
                  <label class="form-label" data-i18n="wizard.step5.request_preview">Request preview</label>
                  <textarea id="wizard-test-request-preview" class="form-textarea code-textarea" rows="8" spellcheck="false" readonly></textarea>
                </div>
                <div class="form-group">
                  <label class="form-label" data-i18n="wizard.step5.response_preview">Response preview</label>
                  <textarea id="wizard-test-response-preview" class="form-textarea code-textarea" rows="8" spellcheck="false" readonly></textarea>
                </div>
              </div>
              <div class="form-group">
                <label class="form-label" data-i18n="wizard.step5.errors">Errors</label>
                <textarea id="wizard-test-errors" class="form-textarea code-textarea" rows="4" spellcheck="false" readonly></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="M8 2v12M3 7l5-5 5 5"/>
                </svg>
              </div>
              <div>
                <div class="config-card-title" data-i18n="wizard.step5.yaml_title">YAML import and export</div>
                <div class="config-card-subtitle" data-i18n="wizard.step5.yaml_subtitle">Move operation drafts between environments without leaving the wizard.</div>
              </div>
            </div>
            <div class="config-card-body" style="gap: 16px;">
              <div style="display:flex; gap: 8px; flex-wrap: wrap;">
                <button id="wizard-export-yaml" class="btn-ghost-sm" type="button" data-i18n="wizard.step5.export_yaml">Export YAML</button>
                <button id="wizard-import-yaml-file-trigger" class="btn-ghost-sm" type="button" data-i18n="wizard.step5.load_yaml_file">Load YAML file</button>
                <button id="wizard-import-yaml" class="btn-primary-sm" type="button" data-i18n="wizard.step5.import_yaml">Import YAML</button>
                <input id="wizard-import-yaml-file" type="file" accept=".yaml,.yml,text/yaml" style="display:none">
              </div>
              <div class="form-group">
                <label class="form-label" data-i18n="wizard.step5.yaml_document">YAML document</label>
                <textarea id="wizard-import-yaml-text" class="form-textarea code-textarea" rows="10" spellcheck="false" data-i18n-ph="wizard.step5.yaml_placeholder" placeholder="Paste exported YAML here to create or upsert an operation."></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="M3 8l3 3 7-7"/>
                </svg>
              </div>
              <div>
                <div class="config-card-title" data-i18n="wizard.step5.publish_title">Publish</div>
                <div class="config-card-subtitle" data-i18n="wizard.step5.publish_subtitle">Save the current draft and expose it to published agents.</div>
              </div>
            </div>
            <div class="config-card-body" style="gap: 12px;">
              <div class="form-hint" data-i18n="wizard.step5.publish_hint">Publishing uses the current draft version from this wizard session.</div>
              <div style="display:flex; gap: 8px; flex-wrap: wrap;">
                <button id="wizard-publish-operation" class="btn-primary-sm" type="button" data-i18n="wizard.step5.publish_action">Publish operation</button>
              </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.step5.editable_title">Operation stays editable in this wizard</div>
              <div class="info-callout-text" data-i18n="wizard.step5.editable_body">Saving creates or updates the current draft in place. Use the live actions above to upload samples, test the draft, export or import YAML, and publish when the upstream contract is ready.</div>
            </div>
          </div>
        </div><!-- /step-pane-5 -->