Требования (черновик) + вариант 1: убрана подсказка, кольцо токенов, узкое окно с кнопкой назад

sketches/001-sidebar-utility/index.html

@@ -71,8 +71,9 @@
   /* ---------- правая часть: чат ---------- */
   .main { flex: 1; display: flex; flex-direction: column; }
   .chat-head {
+    position: relative;
     height: 58px; flex: 0 0 58px; border-bottom: 1px solid var(--line); display: flex; align-items: center;
-    gap: 11px; padding: 0 16px;
+    gap: 8px; padding: 0 16px;
   }
   .chat-head .avatar { width: 36px; height: 36px; flex: 0 0 36px; font-size: 13px; }
   .head-meta { flex: 1; }
@@ -80,6 +81,46 @@
   .head-sub { font-size: 11.5px; color: var(--dim); }
   .head-sub .dot { color: #63C88A; }
 
+  /* кнопка «назад» — нужна только в узком окне */
+  .back-btn {
+    display: none; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px;
+    border: none; background: transparent; color: var(--fg); cursor: pointer;
+    font-size: 17px; place-items: center;
+  }
+  .back-btn:hover { background: var(--panel); }
+
+  /* кольцо израсходованного контекста */
+  .tok-btn {
+    display: flex; align-items: center; gap: 8px; background: transparent; border: none;
+    cursor: pointer; color: var(--dim); padding: 4px 6px; border-radius: 9px; font-size: 11.5px;
+  }
+  .tok-btn:hover { background: var(--panel); color: var(--fg); }
+  .tok-ring { position: relative; width: 27px; height: 27px; flex: 0 0 27px; }
+  .tok-ring svg { transform: rotate(-90deg); display: block; }
+  .tok-ring .pct {
+    position: absolute; inset: 0; display: grid; place-items: center;
+    font-size: 8.5px; font-weight: 700; color: var(--fg);
+  }
+
+  /* развёрнутая карточка состояния */
+  .tok-panel {
+    display: none; position: absolute; top: 62px; right: 16px; width: 300px; min-width: 300px;
+    flex: 0 0 auto; z-index: 40;
+    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
+    box-shadow: 0 16px 48px rgba(0,0,0,.55); padding: 14px 16px;
+  }
+  .tok-panel.on { display: block; }
+  .tok-panel h4 { font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase;
+    color: var(--dim); margin-bottom: 11px; font-weight: 700; }
+  .tok-row { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 8px; }
+  .tok-row span:first-child { color: var(--dim); }
+  .tok-row span:last-child { font-weight: 600; }
+  .tok-bar { height: 6px; border-radius: 3px; background: var(--panel2); overflow: hidden; margin: 3px 0 12px; }
+  .tok-bar i { display: block; height: 100%; background: var(--accent); }
+  .tok-sep { height: 1px; background: var(--line); margin: 12px 0; }
+  .tok-kv { font-size: 11.5px; color: var(--dim); display: flex; justify-content: space-between; margin-bottom: 6px; }
+  .tok-kv b { color: var(--fg); font-weight: 600; }
+
   .messages { flex: 1; overflow-y: auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 12px; }
   .msg { max-width: 74%; padding: 9px 13px; border-radius: 13px; font-size: 13.5px; }
   .msg.user { align-self: flex-end; background: var(--user-bubble); border-bottom-right-radius: 4px; }
@@ -164,6 +205,20 @@
   .asr-note.on { display: flex; }
   .asr-note .live { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
 
+  /* ---------- узкое окно: либо список, либо чат ---------- */
+  .backdrop {
+    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 90;
+  }
+  .backdrop.on { display: block; }
+  @media (max-width: 880px) {
+    body { padding: 0; }
+    .window { width: 100vw; height: 100vh; border-radius: 0; border: none; transform: none !important; }
+    .window.mode-chat .sidebar { display: none; }
+    .window.mode-list .main { display: none; }
+    .sidebar { width: 100%; flex: 1 1 auto; border-right: none; }
+    .back-btn { display: grid; }
+  }
+
   /* окно целиком влезает на любой экран — не режем картинку */
   @media (max-height: 820px) { body { padding: 8px; } .window, .win { transform: scale(.78); } }
   @media (max-height: 700px) { .window, .win { transform: scale(.66); } }
@@ -225,12 +280,41 @@
   <!-- ================= ЧАТ ================= -->
   <main class="main">
     <header class="chat-head">
+      <button class="back-btn" id="backBtn" title="Назад к диалогам">←</button>
       <div class="avatar">АГ</div>
       <div class="head-meta">
         <div class="head-name">agentik · рабочий</div>
-        <div class="head-sub"><span class="dot">●</span> на связи · модель codding-big</div>
+        <div class="head-sub"><span class="dot">●</span> на связи</div>
       </div>
+
+      <button class="tok-btn" id="tokBtn" title="Израсходовано контекста — нажми для подробностей">
+        <span class="tok-ring">
+          <svg width="27" height="27">
+            <circle cx="13.5" cy="13.5" r="11" fill="none" stroke="#232B36" stroke-width="2.5"></circle>
+            <circle cx="13.5" cy="13.5" r="11" fill="none" stroke="#6AB2F2" stroke-width="2.5"
+                    stroke-linecap="round" stroke-dasharray="69.1" stroke-dashoffset="45.6"></circle>
+          </svg>
+          <span class="pct">34%</span>
+        </span>
+        <span>34.3k / 100k</span>
+      </button>
       <button class="icon-btn" title="Параметры диалога">⋯</button>
+
+      <!-- разворачивается по нажатию на кольцо -->
+      <div class="tok-panel" id="tokPanel">
+        <h4>Контекст диалога</h4>
+        <div class="tok-row"><span>Занято сейчас</span><span>34 300</span></div>
+        <div class="tok-bar"><i style="width:34%"></i></div>
+        <div class="tok-row"><span>Всего доступно</span><span>100 000</span></div>
+        <div class="tok-row"><span>Осталось</span><span>65 700</span></div>
+        <div class="tok-sep"></div>
+        <h4>За диалог целиком</h4>
+        <div class="tok-kv"><span>Отправлено в модель</span><b>412 800</b></div>
+        <div class="tok-kv"><span>Получено от модели</span><b>58 240</b></div>
+        <div class="tok-kv"><span>Ходов</span><b>18</b></div>
+        <div class="tok-sep"></div>
+        <div class="tok-kv"><span>Модель</span><b>codding-big</b></div>
+      </div>
     </header>
 
     <div class="messages" id="messages">
@@ -277,8 +361,7 @@
       </div>
 
       <div class="hint">
-        <span><kbd>Ctrl</kbd>+<kbd>R</kbd> — запись голоса · <kbd>Enter</kbd> — отправить · <kbd>Shift</kbd>+<kbd>Enter</kbd> — новая строка</span>
-        <span id="statusHint">готов</span>
+        <span id="statusHint"></span>
       </div>
     </div>
   </main>
@@ -357,6 +440,35 @@
   document.addEventListener('keydown', e => {
     if (e.ctrlKey && e.key.toLowerCase() === 'r') { e.preventDefault(); recBtn.click(); }
   });
+
+  // ---------- широкое / узкое окно ----------
+  const win = document.querySelector('.window');
+  const NARROW = 880;
+  function applyMode() {
+    if (innerWidth > NARROW) {          // широкое: видно и то, и другое
+      win.classList.remove('mode-chat', 'mode-list');
+      return;
+    }
+    // узкое: показываем что-то одно, по умолчанию список
+    if (!win.classList.contains('mode-chat') && !win.classList.contains('mode-list')) {
+      win.classList.add('mode-list');
+    }
+  }
+  document.querySelectorAll('.chat-row').forEach(r => r.addEventListener('click', () => {
+    document.querySelectorAll('.chat-row').forEach(x => x.classList.remove('active'));
+    r.classList.add('active');
+    if (innerWidth <= NARROW) win.classList.remove('mode-list'), win.classList.add('mode-chat');
+  }));
+  document.getElementById('backBtn').onclick = () => win.classList.remove('mode-chat'), win.classList.add('mode-list');
+  addEventListener('resize', applyMode);
+  applyMode();
+
+  // ---------- кольцо токенов: свёрнуто -> развёрнуто ----------
+  const tokPanel = document.getElementById('tokPanel');
+  document.getElementById('tokBtn').onclick = e => { e.stopPropagation(); tokPanel.classList.toggle('on'); };
+  document.addEventListener('click', e => {
+    if (tokPanel.classList.contains('on') && !tokPanel.contains(e.target)) tokPanel.classList.remove('on');
+  });
 </script>
 </body>
 </html>