ui: remove html step counter translations

apps/ui/html/wizard/step1.html

@@ -3,7 +3,7 @@
           <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>
+              <span data-step-counter>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>

apps/ui/html/wizard/step2.html

@@ -3,7 +3,7 @@
           <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 2 of 5</span>
+              <span data-step-counter>Step 2 of 5</span>
             </div>
             <h1 class="step-panel-title" data-i18n="wizard.step2.title">Select upstream &amp; endpoint</h1>
             <p class="step-panel-subtitle" data-i18n="wizard.step2.subtitle">Choose an existing upstream — a shared host with its auth config — or register a new one. Then define the specific endpoint path this operation will call.</p>

apps/ui/html/wizard/step3-graphql.html

@@ -2,7 +2,7 @@
           <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>
+              <span data-step-counter>Step 3 of 5</span>
             </div>
             <h1 class="step-panel-title" data-i18n="wizard.step3.graphql.title">GraphQL operation</h1>
             <p class="step-panel-subtitle" data-i18n="wizard.step3.graphql.subtitle">Define the GraphQL operation this tool will execute. All requests are sent as HTTP POST to the endpoint configured in the previous step. Variables are populated from MCP tool arguments at runtime.</p>

apps/ui/html/wizard/step3-grpc.html

@@ -2,7 +2,7 @@
           <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>
+              <span data-step-counter>Step 3 of 5</span>
             </div>
             <h1 class="step-panel-title" data-i18n="wizard.step3.grpc.title">RPC method</h1>
             <p class="step-panel-subtitle" data-i18n="wizard.step3.grpc.subtitle">Choose how to describe the gRPC service contract. Upload a .proto file, discover methods from a live server via reflection, or enter the route manually. Only unary RPCs are supported.</p>

apps/ui/html/wizard/step3-rest.html

@@ -3,7 +3,7 @@
           <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>
+              <span data-step-counter>Step 3 of 5</span>
             </div>
             <h1 class="step-panel-title" data-i18n="wizard.step3.rest.title">HTTP method &amp; format</h1>
             <p class="step-panel-subtitle" data-i18n="wizard.step3.rest.subtitle">Choose the HTTP verb this operation sends and configure content negotiation headers. Crank will serialize MCP tool arguments into the appropriate request body format.</p>

apps/ui/html/wizard/step3-soap.html

@@ -2,7 +2,7 @@
           <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>
+              <span data-step-counter>Step 3 of 5</span>
             </div>
             <h1 class="step-panel-title" data-i18n="wizard.step3.soap.title">WSDL and SOAP binding</h1>
             <p class="step-panel-subtitle" data-i18n="wizard.step3.soap.subtitle">Upload the WSDL/XSD bundle, inspect services and choose the exact service, port and operation that Crank should expose as an MCP tool.</p>

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

@@ -2,7 +2,7 @@
           <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>
+              <span data-step-counter>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>

apps/ui/html/wizard/step4.html

@@ -2,7 +2,7 @@
           <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 4 of 5</span>
+              <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>

apps/ui/html/wizard/step5.html

@@ -2,7 +2,7 @@
           <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 5 of 5</span>
+              <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>

apps/ui/js/i18n.js

@@ -2362,9 +2362,6 @@ function applyLang() {
   document.querySelectorAll('[data-i18n]').forEach(function(el) {
     el.textContent = t(el.getAttribute('data-i18n'));
   });
-  document.querySelectorAll('[data-i18n-html]').forEach(function(el) {
-    el.innerHTML = t(el.getAttribute('data-i18n-html'));
-  });
   // placeholder
   document.querySelectorAll('[data-i18n-ph]').forEach(function(el) {
     el.placeholder = t(el.getAttribute('data-i18n-ph'));

apps/ui/js/wizard-shell.js

@@ -50,6 +50,19 @@
     );
   }
 
+  function renderStepCounter(counter, step, total) {
+    if (!counter) return;
+    var language = localStorage.getItem('crank_lang') || 'en';
+    var parts = language === 'ru'
+      ? { prefix: 'Шаг ', suffix: ' из ' + total }
+      : { prefix: 'Step ', suffix: ' of ' + total };
+    var strong = document.createElement('strong');
+    counter.textContent = parts.prefix;
+    strong.textContent = String(step);
+    counter.appendChild(strong);
+    counter.appendChild(document.createTextNode(parts.suffix));
+  }
+
   function loadStep(step, callback) {
     var panelId = step === 3 ? step3PanelId() : 'step-panel-' + step;
     if (document.getElementById(panelId)) {
@@ -114,8 +127,8 @@
     var percentNode = document.querySelector('.progress-pct');
     if (percentNode) percentNode.textContent = percent + '%';
 
-    var counter = document.querySelector('[data-step-counter]');
+    var counter = pane ? pane.querySelector('[data-step-counter]') : null;
-    if (counter) counter.innerHTML = tfKey('wizard.step_of', { step: step, total: TOTAL_STEPS });
+    renderStepCounter(counter, step, TOTAL_STEPS);
 
     var backButton = document.querySelector('.btn-back');
     if (backButton) {
@@ -153,6 +166,12 @@
     }, Promise.resolve());
   }
 
+  window.addEventListener('crank:langchange', function() {
+    if (window.currentStep) {
+      doGoToStep(window.currentStep);
+    }
+  });
+
   function bindProtocolCards() {
     document.querySelectorAll('.protocol-card').forEach(function(card) {
       card.addEventListener('click', function() {