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">Tool config</h1>
            <p class="step-panel-subtitle" data-i18n="wizard.step4.subtitle">Name your tool, write the LLM-facing description, and define the input/output schemas. The description is the primary signal the model uses when deciding whether to call this tool.</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">Tool identity</div>
                <div class="config-card-subtitle" data-i18n="wizard.step4.identity_subtitle">Machine-readable name and LLM-facing description</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">Tool name</span>
                  <span class="form-label-required" data-i18n="workspace_setup.required">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">Machine-readable identifier used in MCP tool calls. Only lowercase letters, numbers and underscores. Cannot be changed after publishing.</div>
              </div>

              <div class="form-row">
                <div class="form-group">
                  <label class="form-label">
                    <span data-i18n="wizard.step4.display_name">Display name</span>
                    <span class="form-label-required" data-i18n="workspace_setup.required">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">Human-readable name shown in the console and audit log.</div>
                </div>
                <div class="form-group">
                  <label class="form-label">
                    <span data-i18n="wizard.step4.tool_title">Tool title</span>
                    <span class="form-label-optional" data-i18n="workspace_setup.optional">(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">Short imperative sentence shown in the MCP tool manifest.</div>
                </div>
              </div>

              <div class="form-group">
                <label class="form-label">
                  <span data-i18n="wizard.step4.description">Description</span>
                  <span class="form-label-required" data-i18n="workspace_setup.required">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">LLM-facing description. Be precise — this is the primary signal the model uses to decide whether to invoke this tool.</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">Writing effective descriptions</div>
              <div class="info-callout-text" data-i18n="wizard.step4.description_body">Start with a verb ("Creates", "Fetches", "Updates"). Mention key input requirements. Describe what a successful response looks like. Avoid vague phrasing like "handles" or "manages". See description best practices →</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">Input schema</div>
                <div class="config-card-subtitle" data-i18n="wizard.step4.input_schema_subtitle">Parameters the LLM passes when calling this tool</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">Output schema</div>
                <div class="config-card-subtitle" data-i18n="wizard.step4.output_schema_subtitle">Shape of the data returned to the LLM after a successful call</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">Schemas are protocol-agnostic</div>
              <div class="info-callout-text" data-i18n="wizard.step4.protocol_agnostic_body">These schemas describe the MCP contract, not the upstream wire format. Field mapping in Step 5 translates between the two. You can upload a sample JSON response to auto-generate the output schema.</div>
            </div>
          </div>
        </div><!-- /step-pane-4 -->