diff --git a/deploy/app.js b/deploy/app.js
index 97e1373..5041053 100644
--- a/deploy/app.js
+++ b/deploy/app.js
@@ -36,31 +36,66 @@ var fileTable = document.getElementById('fileTable');
  */
 function render(state) {
   renderFiles(state);
+  renderStepper(state);
 }
 
 // syncDB, statusToHTML, renderFiles, toggleClassifyDetail, uploadFile, refreshSupps
 // → вынесены в files.js (Фаза 1)
 
-// ── Pipeline stepper ─────────────────────────────────────────
-function stepDone(id) {
-  var el = document.getElementById(id);
-  if (el) { el.innerHTML = el.innerHTML.replace('○','✓'); el.style.color = 'var(--green)'; }
-}
-function stepActive(id) {
-  var el = document.getElementById(id);
-  if (el) { el.innerHTML = el.innerHTML.replace('○','⏳').replace('✓','⏳'); el.style.color = 'var(--brand-primary)'; }
-}
-function resetStepper(fromId) {
-  var steps = ['stepUpload','stepClassify','stepGroups','stepCompare'];
-  var reset = false;
-  steps.forEach(function(id) {
-    if (id === fromId) reset = true;
-    if (reset) {
-      var el = document.getElementById(id);
-      if (el) { el.innerHTML = el.innerHTML.replace('✓','○').replace('⏳','○'); el.style.color = 'var(--muted)'; }
+// ── Pipeline stepper (Фаза 4: state-driven) ──────────────────
+
+/**
+ * renderStepper(state) — Рендер степпера из state.ui.steps (Фаза 4).
+ * 
+ * Читает state.ui.steps.{upload,classify,groups,compare}, обновляет DOM.
+ * Значения: '○' (не начат) | '⏳' (в процессе) | '✓' (завершён).
+ */
+function renderStepper(state) {
+  var steps = state.ui.steps;
+  var map = { upload: 'stepUpload', classify: 'stepClassify', groups: 'stepGroups', compare: 'stepCompare' };
+  var colors = { '○': 'var(--muted)', '⏳': 'var(--brand-primary)', '✓': 'var(--green)' };
+  Object.keys(map).forEach(function(key) {
+    var el = document.getElementById(map[key]);
+    if (el) {
+      el.textContent = steps[key] + ' ' + {upload:'Загрузка',classify:'Классификация',groups:'Группировка',compare:'Сравнение'}[key];
+      el.style.color = colors[steps[key]] || 'var(--muted)';
     }
   });
 }
+
+/**
+ * stepDone(id) — Отметить шаг как завершённый (Фаза 4).
+ * Мутирует state.ui.steps, вызывает renderStepper.
+ */
+function stepDone(id) {
+  var key = { stepUpload: 'upload', stepClassify: 'classify', stepGroups: 'groups', stepCompare: 'compare' }[id];
+  if (key) { state.ui.steps[key] = '✓'; renderStepper(state); }
+}
+
+/**
+ * stepActive(id) — Отметить шаг как активный (Фаза 4).
+ * Мутирует state.ui.steps, вызывает renderStepper.
+ */
+function stepActive(id) {
+  var key = { stepUpload: 'upload', stepClassify: 'classify', stepGroups: 'groups', stepCompare: 'compare' }[id];
+  if (key) { state.ui.steps[key] = '⏳'; renderStepper(state); }
+}
+
+/**
+ * resetStepper(fromId) — Сбросить шаги начиная с fromId (Фаза 4).
+ * Все шаги после (и включая) fromId получают '○'.
+ * Мутирует state.ui.steps, вызывает renderStepper.
+ */
+function resetStepper(fromId) {
+  var order = ['stepUpload','stepClassify','stepGroups','stepCompare'];
+  var keys  = ['upload','classify','groups','compare'];
+  var reset = false;
+  order.forEach(function(id, i) {
+    if (id === fromId) reset = true;
+    if (reset) { state.ui.steps[keys[i]] = '○'; }
+  });
+  renderStepper(state);
+}
 // Утилиты (formatSize, formatDate, moveUp, moveDown, escHtml, fmtDate) —
 // вынесены в app_utils.js для облегчения анализа и отладки.
 // statusToHTML, renderFiles → files.js (Фаза 1)