crank/apps/ui/html/wizard/step3-websocket.html

        <div id="step-panel-3-websocket" class="step-pane">
          <div class="step-panel-header">
            <div class="step-panel-eyebrow">
              <div class="step-panel-eyebrow-line"></div>
              <span data-i18n-html="wizard.step_of">Step 3 of 5</span>
            </div>
            <h1 class="step-panel-title" data-i18n="wizard.step3.websocket.title">WebSocket subscription</h1>
            <p class="step-panel-subtitle" data-i18n="wizard.step3.websocket.subtitle">Define the subscription handshake, the message templates and the connection tuning that Crank should use before collecting bounded WebSocket events.</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.5 8h11M4.5 5l-2 3 2 3M11.5 11l2-3-2-3"/>
                </svg>
              </div>
              <div>
                <div class="config-card-title" data-i18n="wizard.step3.websocket.connection_title">Connection</div>
                <div class="config-card-subtitle" data-i18n="wizard.step3.websocket.connection_subtitle">The upstream base URL from step 2 becomes the WebSocket endpoint unless you override it here.</div>
              </div>
              <span class="config-card-optional" data-i18n="wizard.optional">Optional</span>
            </div>
            <div class="config-card-body">
              <div class="form-group">
                <label class="form-label" data-i18n="wizard.step3.websocket.path">Socket path</label>
                <input id="websocket-path" class="form-input input-mono" type="text" placeholder="/telemetry">
                <div class="form-hint" data-i18n="wizard.step3.websocket.path_hint">Appended to the upstream URL from step 2. Leave empty if the upstream URL already points to the full WebSocket endpoint.</div>
              </div>
              <div class="form-group">
                <label class="form-label" data-i18n="wizard.step3.websocket.subprotocols">Subprotocols</label>
                <textarea id="websocket-subprotocols" class="form-textarea code-textarea" rows="3" spellcheck="false" placeholder="graphql-transport-ws&#10;telemetry.v1"></textarea>
                <div class="form-hint" data-i18n="wizard.step3.websocket.subprotocols_hint">One subprotocol per line. Crank offers them during the handshake in the same order.</div>
              </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 10h4"/>
                </svg>
              </div>
              <div>
                <div class="config-card-title" data-i18n="wizard.step3.websocket.messages_title">Subscription messages</div>
                <div class="config-card-subtitle" data-i18n="wizard.step3.websocket.messages_subtitle">Templates are sent after the socket opens. They can reference MCP input through the mapping step.</div>
              </div>
              <span class="config-card-optional" data-i18n="wizard.optional">Optional</span>
            </div>
            <div class="config-card-body">
              <div class="form-group">
                <label class="form-label" data-i18n="wizard.step3.websocket.subscribe_template">Subscribe template</label>
                <textarea id="websocket-subscribe-template" class="form-textarea code-textarea" rows="6" spellcheck="false" placeholder="{&#10;  &quot;type&quot;: &quot;subscribe&quot;,&#10;  &quot;topic&quot;: &quot;telemetry&quot;&#10;}"></textarea>
              </div>
              <div class="form-group">
                <label class="form-label" data-i18n="wizard.step3.websocket.unsubscribe_template">Unsubscribe template</label>
                <textarea id="websocket-unsubscribe-template" class="form-textarea code-textarea" rows="6" spellcheck="false" placeholder="{&#10;  &quot;type&quot;: &quot;unsubscribe&quot;,&#10;  &quot;topic&quot;: &quot;telemetry&quot;&#10;}"></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 2.5v2M8 11.5v2M3.8 4.2l1.4 1.4M10.8 11.2l1.4 1.4M2.5 8h2M11.5 8h2M3.8 11.8l1.4-1.4M10.8 4.8l1.4-1.4"/>
                </svg>
              </div>
              <div>
                <div class="config-card-title" data-i18n="wizard.step3.websocket.runtime_title">Connection tuning</div>
                <div class="config-card-subtitle" data-i18n="wizard.step3.websocket.runtime_subtitle">Used by the runtime adapter for heartbeats and reconnects in bounded session-oriented flows.</div>
              </div>
              <span class="config-card-optional" data-i18n="wizard.optional">Optional</span>
            </div>
            <div class="config-card-body">
              <div class="form-row">
                <div class="form-group">
                  <label class="form-label" data-i18n="wizard.step3.websocket.heartbeat">Heartbeat interval (ms)</label>
                  <input id="websocket-heartbeat-interval-ms" class="form-input" type="number" min="1" step="1" placeholder="5000">
                </div>
                <div class="form-group">
                  <label class="form-label" data-i18n="wizard.step3.websocket.reconnect_attempts">Reconnect attempts</label>
                  <input id="websocket-reconnect-max-attempts" class="form-input" type="number" min="0" step="1" placeholder="3">
                </div>
                <div class="form-group">
                  <label class="form-label" data-i18n="wizard.step3.websocket.reconnect_backoff">Reconnect backoff (ms)</label>
                  <input id="websocket-reconnect-backoff-ms" class="form-input" type="number" min="0" step="1" placeholder="250">
                </div>
              </div>
            </div>
          </div>
        </div>