feat: localize remaining alpine ui views

apps/ui/js/wizard.js

@@ -60,6 +60,11 @@ function goToStep(n) {
 }
 
 function _doGoToStep(n) {
+  document.querySelectorAll('.step-number[data-step]').forEach(function(element) {
+    var step = Number(element.getAttribute('data-step')) || 0;
+    element.textContent = tfKey('wizard.step_short', { step: step });
+  });
+
   // 1. hide all panes, show target (step 4 is protocol-specific)
   document.querySelectorAll('.step-pane').forEach(function(p) { p.style.display = 'none'; });
   var panelId = (n === 3) ? step3PanelId() : 'step-panel-' + n;
@@ -95,7 +100,7 @@ function _doGoToStep(n) {
   if (pctEl) pctEl.textContent = pct + '%';
 
   // 4. update step counter
-  var counter = document.querySelector('.step-counter');
+  var counter = document.querySelector('[data-step-counter]');
   if (counter) counter.innerHTML = tfKey('wizard.step_of', { step: n, total: TOTAL_STEPS });
 
   // 5. back button
@@ -240,9 +245,9 @@ document.addEventListener('DOMContentLoaded', async function() {
 var METHOD_CALLOUTS = {
   GET:    null,
   DELETE: null,
-  POST:   { icon: 'info', text: '<strong>POST selected — body encoding required.</strong> In step 4 you will define the JSON schema for the body payload. Crank will automatically serialize MCP tool arguments into the format you specify.' },
-  PUT:    { icon: 'info', text: '<strong>PUT selected — full-resource replacement.</strong> The request body must contain a complete resource representation. Define the body schema in step 4.' },
-  PATCH:  { icon: 'info', text: '<strong>PATCH selected — partial update.</strong> Only include the fields you want to modify in the body schema defined in step 4.' },
+  POST:   { icon: 'info', text: { en: '<strong>POST selected — body encoding required.</strong> In step 4 you will define the JSON schema for the body payload. Crank will automatically serialize MCP tool arguments into the format you specify.', ru: '<strong>Выбран POST — требуется кодирование тела запроса.</strong> На шаге 4 вы зададите JSON-схему для body payload. Crank автоматически сериализует аргументы MCP-инструмента в выбранный формат.' } },
+  PUT:    { icon: 'info', text: { en: '<strong>PUT selected — full-resource replacement.</strong> The request body must contain a complete resource representation. Define the body schema in step 4.', ru: '<strong>Выбран PUT — полная замена ресурса.</strong> Request body должен содержать полное представление ресурса. Задайте body schema на шаге 4.' } },
+  PATCH:  { icon: 'info', text: { en: '<strong>PATCH selected — partial update.</strong> Only include the fields you want to modify in the body schema defined in step 4.', ru: '<strong>Выбран PATCH — частичное обновление.</strong> В body schema на шаге 4 включайте только те поля, которые хотите изменить.' } },
 };
 
 function selectMethod(btn) {
@@ -253,9 +258,11 @@ function selectMethod(btn) {
   if (!callout) return;
   var info = METHOD_CALLOUTS[method];
   if (info) {
+    var lang = localStorage.getItem('crank_lang') || 'en';
+    var text = typeof info.text === 'string' ? info.text : (info.text[lang] || info.text.en);
     callout.innerHTML =
       '<svg width="15" height="15" style="flex-shrink:0;color:var(--accent)"><use href="' + (window.APP_BASE||'') + 'icons/general/info-circle.svg#icon"/></svg>' +
-      '<span>' + info.text + '</span>';
+      '<span>' + text + '</span>';
     callout.style.display = 'flex';
   } else {
     callout.style.display = 'none';
@@ -420,7 +427,7 @@ function startNewUpstream() {
 
   // Clear combobox trigger & hide preview
   var val = document.getElementById('upstream-combobox-value');
-  if (val) val.innerHTML = '<span class="upstream-combobox-placeholder">' + tKey('wizard.step2.title') + '</span>';
+  if (val) val.innerHTML = '<span class="upstream-combobox-placeholder">' + tKey('wizard.step2.upstream_placeholder') + '</span>';
   var preview = document.getElementById('upstream-preview');
   if (preview) preview.style.display = 'none';
   selectedUpstreamId = null;
@@ -639,6 +646,10 @@ function renderServiceResults(parsed, ids) {
 }
 
 function renderParsedProto(parsed) {
+  var notice = document.getElementById('proto-streaming-text');
+  if (notice && parsed && parsed.streamingCount) {
+    notice.textContent = tfKey('wizard.step3.grpc.streaming_hidden', { count: parsed.streamingCount });
+  }
   renderServiceResults(parsed, {
     notice: 'proto-streaming-notice', count: 'proto-streaming-count',
     summary: 'proto-services-summary', list: 'proto-services-list', view: 'proto-parsed-view',
@@ -646,6 +657,10 @@ function renderParsedProto(parsed) {
 }
 
 function renderReflectionResult(parsed) {
+  var reflectText = document.querySelector('#reflect-streaming-notice .info-callout-text');
+  if (reflectText && parsed && parsed.streamingCount) {
+    reflectText.textContent = tfKey('wizard.step3.grpc.streaming_hidden', { count: parsed.streamingCount });
+  }
   renderServiceResults(parsed, {
     notice: 'reflect-streaming-notice', count: 'reflect-streaming-count',
     summary: 'reflect-services-summary', list: 'reflect-services-list', view: 'reflect-parsed-view',