bsodfather/crank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
57c73b5cb2f296c124d22c80d9e63aa7af1b239a
crank/apps/ui/html/wizard/step1.html
T
a.tolmachev 1cb4cbc960 ui: add frontend diagnostics and stable test hooks
2026-04-12 11:23:10 +03:00

138 lines
8.8 KiB
HTML
Raw Blame History

<!-- ════════════ STEP 1: Protocol ════════════ -->
<div id="step-panel-1" 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 1 of 5</span>
</div>
<h1 class="step-panel-title" data-i18n="wizard.step1.title">Choose a protocol</h1>
<p class="step-panel-subtitle" data-i18n="wizard.step1.subtitle">Select the transport protocol your upstream service uses. This determines how Crank will communicate with your API and which configuration options are available in subsequent steps.</p>
</div>
<!-- Protocol selection cards -->
<div class="protocol-grid" data-testid="wizard-protocol-grid">
<div class="protocol-card rest selected" data-protocol="rest" data-testid="wizard-protocol-rest" role="radio" aria-checked="true" tabindex="0">
<div class="protocol-card-check">
<svg viewBox="0 0 12 12"><polyline points="1.5,6 4.5,9 10.5,3"/></svg>
</div>
<div class="protocol-icon-wrap">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#58a6ff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
<path d="M3.6 9h16.8M3.6 15h16.8"/>
<path d="M12 3a15.3 15.3 0 010 18M12 3a15.3 15.3 0 000 18"/>
</svg>
</div>
<div class="protocol-card-name" data-i18n="wizard.step1.rest_name">REST / HTTP</div>
<div class="protocol-card-tagline" data-i18n="wizard.step1.rest_tagline">Standard HTTP verbs over a RESTful endpoint. The most broadly supported option.</div>
<div class="protocol-card-tags">
<span class="protocol-tag">GET</span>
<span class="protocol-tag">POST</span>
<span class="protocol-tag">PUT</span>
<span class="protocol-tag">PATCH</span>
<span class="protocol-tag">DELETE</span>
</div>
</div>
<div class="protocol-card graphql" data-protocol="graphql" data-testid="wizard-protocol-graphql" role="radio" aria-checked="false" tabindex="0">
<div class="protocol-card-check">
<svg viewBox="0 0 12 12"><polyline points="1.5,6 4.5,9 10.5,3"/></svg>
</div>
<div class="protocol-icon-wrap">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#bc8cff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2l9.5 5.5v11L12 22l-9.5-5.5v-11L12 2z"/>
<circle cx="12" cy="2" r="1.5" fill="#bc8cff"/>
<circle cx="21.5" cy="7.5" r="1.5" fill="#bc8cff"/>
<circle cx="21.5" cy="16.5" r="1.5" fill="#bc8cff"/>
<circle cx="12" cy="22" r="1.5" fill="#bc8cff"/>
<circle cx="2.5" cy="16.5" r="1.5" fill="#bc8cff"/>
<circle cx="2.5" cy="7.5" r="1.5" fill="#bc8cff"/>
</svg>
</div>
<div class="protocol-card-name" data-i18n="wizard.step1.graphql_name">GraphQL</div>
<div class="protocol-card-tagline" data-i18n="wizard.step1.graphql_tagline">Query and mutate a GraphQL schema. Supports queries and mutations over one fixed operation.</div>
<div class="protocol-card-tags">
<span class="protocol-tag" data-i18n="wizard.step1.query">Query</span>
<span class="protocol-tag" data-i18n="wizard.step1.mutation">Mutation</span>
</div>
</div>
<div class="protocol-card grpc" data-protocol="grpc" data-testid="wizard-protocol-grpc" role="radio" aria-checked="false" tabindex="0">
<div class="protocol-card-check">
<svg viewBox="0 0 12 12"><polyline points="1.5,6 4.5,9 10.5,3"/></svg>
</div>
<div class="protocol-icon-wrap">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#0d9488" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="8" height="18" rx="2"/>
<rect x="14" y="3" width="8" height="18" rx="2"/>
<path d="M10 8h4M10 12h4M10 16h4"/>
</svg>
</div>
<div class="protocol-card-name" data-i18n="wizard.step1.grpc_name">gRPC</div>
<div class="protocol-card-tagline" data-i18n="wizard.step1.grpc_tagline">High-performance binary RPC over HTTP/2 with unary and bounded streaming flows for low-latency internal services.</div>
<div class="protocol-card-tags">
<span class="protocol-tag" data-i18n="wizard.step1.unary">Unary</span>
<span class="protocol-tag" data-i18n="wizard.streaming.transport.server_stream">Server stream</span>
<span class="protocol-tag" data-i18n="wizard.streaming.mode.window">Window</span>
<span class="protocol-tag" data-i18n="wizard.streaming.mode.session">Session</span>
<span class="protocol-tag">Protobuf</span>
</div>
</div>
<div class="protocol-card websocket" data-protocol="websocket" data-testid="wizard-protocol-websocket" role="radio" aria-checked="false" tabindex="0">
<div class="protocol-card-check">
<svg viewBox="0 0 12 12"><polyline points="1.5,6 4.5,9 10.5,3"/></svg>
</div>
<div class="protocol-icon-wrap">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#06b6d4" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 8h16M4 16h16"/>
<path d="M7 5l-3 3 3 3M17 13l3 3-3 3"/>
</svg>
</div>
<div class="protocol-card-name" data-i18n="wizard.step1.websocket_name">WebSocket</div>
<div class="protocol-card-tagline" data-i18n="wizard.step1.websocket_tagline">Stateful event streams and push-oriented integrations normalized into bounded MCP streaming tools.</div>
<div class="protocol-card-tags">
<span class="protocol-tag">WS</span>
<span class="protocol-tag" data-i18n="wizard.streaming.mode.window">Window</span>
<span class="protocol-tag" data-i18n="wizard.streaming.mode.session">Session</span>
</div>
</div>
<div class="protocol-card soap" data-protocol="soap" data-testid="wizard-protocol-soap" role="radio" aria-checked="false" tabindex="0">
<div class="protocol-card-check">
<svg viewBox="0 0 12 12"><polyline points="1.5,6 4.5,9 10.5,3"/></svg>
</div>
<div class="protocol-icon-wrap">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 5h16v14H4z"/>
<path d="M8 5V3h8v2"/>
<path d="M7 10h10M7 14h6"/>
</svg>
</div>
<div class="protocol-card-name" data-i18n="wizard.step1.soap_name">SOAP</div>
<div class="protocol-card-tagline" data-i18n="wizard.step1.soap_tagline">Enterprise WSDL/XSD service contracts normalized into MCP tools with structured XML mapping.</div>
<div class="protocol-card-tags">
<span class="protocol-tag">WSDL</span>
<span class="protocol-tag">XML</span>
<span class="protocol-tag" data-i18n="wizard.step1.unary">Unary</span>
</div>
</div>
</div><!-- /protocol-grid -->
<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">
<polygon points="8,1 15,14 1,14" fill="none"/>
<path d="M8 6v4M8 11.5v.5"/>
</svg>
<div class="info-callout-body">
<div class="info-callout-title" data-i18n="wizard.step1.tip_title">You can change this later</div>
<div class="info-callout-text">
<span data-i18n="wizard.step1.tip_body">Switching protocol after configuring subsequent steps will clear schema and mapping data. Save your operation as a draft before experimenting. See protocol migration guide for details.</span>
</div>
</div>
</div>
</div><!-- /step-pane-1 -->
Reference in New Issue View Git Blame Copy Permalink