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>
              Step 5 of 5
            </div>
            <h1 class="step-panel-title">Mapping and execution</h1>
            <p class="step-panel-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 3.</p>
          </div>

          <div class="section-divider" style="margin-bottom: 16px;">
            <span class="section-divider-label">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">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">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">Execution config</div>
                <div class="config-card-subtitle">Timeouts, retry policy and auth profile reference</div>
              </div>
              <span class="config-card-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" 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">Operation will be saved as a draft</div>
              <div class="info-callout-text">
                Clicking "Create operation" saves the contract in draft status. You can run tests, inspect metadata and publish from the operation workspace. Drafts are never exposed to MCP clients.
              </div>
            </div>
          </div>
        </div><!-- /step-pane-5 -->