docs+ui: страница «Документация», единый стиль заголовков, перевод на оператора

Добавлена /docs.html — обзор мультиагентной системы для оператора. Все
термины в формате «русский (english)», жирным: ветка (intent), маршрутизатор
(router), пошаговый сценарий (state machine), шаг (step), допустимые
переходы (allowed_next), слоты (slots), условия выхода (exit conditions),
переключение ветки (hard handoff), удержание в ветке (sticky state machine),
структурированный ответ (structured output), отложенный сценарий
(suspended/resume), защита от петли (routing loop guard), состояние диалога
(thread state). Плюс пошаговая схема обработки реплики и резюме защитных
механизмов. Ссылка «Документация» добавлена в шапку всех страниц.

Унификация заголовков под стиль «Версии» в правом сайдбаре Настроек: убран
uppercase, переход на 13px / var(--fg) / font-weight 600 / зажатый
letter-spacing. Применилось к .col-head во всех колонках, .field label в
редакторе, .section-header в списке веток, заголовкам столбцов на странице
Отладки и заголовкам секций RAG-результата. Бейджи (АКТИВНАЯ, система)
оставлены прежними — это статусные метки, не заголовки.

Переименование ветки escalate_human для согласованности с русским UI:
«Эскалация на оператора» → «Перевод на оператора», описание тоже. Точечная
миграция при старте (intent_service.migrate_intent_copy) обновляет
существующие записи в БД, только если поле в точности совпадает со старым
значением — операторские правки не затираются.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

static/sandbox.html

@@ -93,14 +93,25 @@
     flex-direction: column;
     min-height: 0;
   }
-  .col-panel:last-child { border-right: none; border-left: 1px solid var(--border); }
+  .col-panel:last-child {
+    border-right: none;
+    border-left: 1px solid var(--border);
+    background: var(--bg);
+  }
+  /* Правая панель — стек карточек на сером фоне */
+  .col-panel:last-child .col-body {
+    padding: 14px 14px 18px 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
   .col-head {
-    padding: 12px 16px;
+    padding: 14px 16px 10px;
     border-bottom: 1px solid var(--border);
-    font-size: 12px;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: var(--muted);
+    font-size: 13px;
+    color: var(--fg);
+    font-weight: 600;
+    letter-spacing: -0.01em;
     display: flex;
     align-items: center;
     gap: 8px;
@@ -300,53 +311,56 @@
   .chat-input button:hover { background: var(--accent-hover); }
   .chat-input button:disabled { background: var(--muted); cursor: not-allowed; }
 
-  /* Правая панель — отладка */
-  .debug-section { padding: 14px 16px; border-bottom: 1px solid var(--border); }
+  /* Правая панель — карточки */
+  .debug-section {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 12px 14px;
+  }
   .debug-section h3 {
-    font-size: 12px;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: var(--muted);
+    font-size: 13px;
+    color: var(--fg);
     margin: 0 0 10px 0;
     font-weight: 600;
+    letter-spacing: -0.01em;
   }
-  /* Сворачиваемая секция (details/summary) */
+  /* Сворачиваемая секция (details/summary) с тем же видом, что и обычная карточка */
   .debug-section.collapsible > summary {
     list-style: none;
     cursor: pointer;
     display: flex;
     align-items: center;
-    gap: 6px;
-    margin: 0 0 10px 0;
-    font-size: 12px;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: var(--muted);
+    gap: 8px;
+    margin: 0;
+    font-size: 13px;
+    color: var(--fg);
     font-weight: 600;
+    letter-spacing: -0.01em;
   }
+  .debug-section.collapsible[open] > summary { margin: 0 0 10px 0; }
   .debug-section.collapsible > summary::-webkit-details-marker { display: none; }
-  .debug-section.collapsible > summary::before {
-    content: "▸";
-    display: inline-block;
-    transition: transform 0.15s;
-    font-size: 10px;
-    color: var(--muted);
-  }
-  .debug-section.collapsible[open] > summary::before { transform: rotate(90deg); }
-  .debug-section.collapsible > summary:hover { color: var(--fg); }
-  .debug-section.collapsible > summary .summary-count {
+  .debug-section.collapsible > summary::after {
+    content: "⌄";
     margin-left: auto;
+    font-size: 14px;
+    line-height: 1;
+    color: var(--muted);
+    transition: transform 0.15s;
+  }
+  .debug-section.collapsible[open] > summary::after { transform: rotate(180deg); }
+  .debug-section.collapsible > summary:hover { color: var(--accent); }
+  .debug-section.collapsible > summary .summary-count {
     background: var(--chip-bg);
     color: var(--accent);
-    padding: 1px 7px;
+    padding: 1px 8px;
     border-radius: 10px;
-    font-size: 10px;
-    text-transform: none;
-    letter-spacing: 0;
+    font-size: 11px;
+    font-weight: 500;
   }
 
   .chunk-card {
-    background: var(--panel);
+    background: #fafbfd;
     border: 1px solid var(--border);
     border-radius: 6px;
     margin-bottom: 8px;
@@ -408,7 +422,7 @@
     overflow-y: auto;
   }
   .prompt-box {
-    background: var(--panel);
+    background: #fafbfd;
     color: var(--fg);
     border: 1px solid var(--border);
     padding: 10px 12px;
@@ -464,6 +478,7 @@
     <a href="/" class="nav-link">Отладка</a>
     <a href="/sandbox.html" class="nav-link active">Песочница</a>
     <a href="/settings.html" class="nav-link">Настройки</a>
+    <a href="/docs.html" class="nav-link">Документация</a>
   </nav>
   <span class="status" style="margin-left:auto;"><span class="dot" id="dot"></span><span id="status-text">проверяю…</span></span>
 </header>
@@ -494,7 +509,6 @@
   </section>
 
   <aside class="col-panel">
-    <div class="col-head">Отладка ответа</div>
     <div class="col-body">
       <div class="debug-section">
         <h3>Состояние диалога</h3>
@@ -511,10 +525,12 @@
         </summary>
         <div id="debug-chunks"><div class="mini">— пока пусто —</div></div>
       </details>
-      <div class="debug-section">
-        <h3>Собранный промпт</h3>
+      <details class="debug-section collapsible" id="debug-prompt-section">
+        <summary>
+          <span>Собранный промпт</span>
+        </summary>
         <div id="debug-prompt"><div class="mini">— пока пусто —</div></div>
-      </div>
+      </details>
     </div>
   </aside>