Кольцо токенов убрано из макета и требований: данных в библиотеке нет

This commit is contained in:
Porfiry
2026-09-19 00:30:32 +03:00
parent d535fc90de
commit cf469718e6
2 changed files with 16 additions and 96 deletions
+16 -31
View File
@@ -74,10 +74,9 @@
значениями — имя и адрес. Имя клиент знает сам, сервер его не хранит. Каждому
агенту — своё имя и адрес.
## 7. Состояние агента: сколько израсходовано
## 7. Состояние агента: что показывать
Здесь свериться с исходниками оказалось важнее всего. Ниже — **по факту из кода**,
не по догадкам.
Сверка с исходниками здесь важнее всего. Ниже — **по факту из кода**, не по догадкам.
### 7.1. Что есть в самой библиотеке `client` (что клиент реально получает)
@@ -92,45 +91,31 @@
- **Токенов, модели, цены, предела контекста — в библиотеке НЕТ.** Ни одного числа.
Проверено сплошным поиском: числовых полей в протоколе не существует вообще.
### 7.2. Что при этом ЕСТЬ внутри самого агента (но до клиента не доходит)
### 7.2. Решение: счётчиков токенов и кольца в интерфейсе НЕ будет
- **Токены по каждому ходу**: сколько отправлено, сколько получено. Хранятся
вместе с ответом ассистента.
- **Сумма по диалогу**: число ходов, всего отправлено, всего получено.
- **Предел контекста** — агент его знает из своих настроек.
- **Порог сжатия** — при заполнении агент сокращает историю (по умолчанию на 80 %).
- **R24.** Показывать израсходованные токены, долю от предела и кольцо заполнения
**не нужно**. Данных для этого в библиотеке нет — значит и рисовать нечего.
Кольцо из макета удалено.
- **R25.** Никаких полей наугад: **нет данных — нет цифры.** Не подставлять
правдоподобные числа вместо отсутствующих.
- **R26.** Если когда-нибудь агент начнёт отдавать такие числа — вернёмся к вопросу.
До тех пор тема закрыта.
То есть цифры существуют, но лежат в агенте и в протокол не выведены.
### 7.3. Ход работы агента
### 7.3. Что из этого следует для интерфейса
- **R24.** В макете сейчас нарисованы три поля, которых в библиотеке нет:
«модель», «отправлено в модель», «получено от модели». Это заглушки. Либо
выкидываем, либо доводим агент так, чтобы он их отдавал.
- **R25.** Показывать надо **только то, что есть**. Остальное либо честно помечаем
как отсутствующее, либо не рисуем вовсе.
- **R26.** Кольцо заполнения имеет смысл, когда агент начнёт отдавать два числа:
занято сейчас и предел. Тогда видно долю. Что именно считать «занятым»
(последний ход или вся история) — уточнить.
- **R27.** Всё, что показываем по цифрам, должно быть сверено с исходниками
**до** отрисовки. Правило: нет данных — нет цифры.
## 8. Ход работы агента
- **R28.** Показывать не только ответы ассистента, но и происходящее вокруг них:
- **R27.** Показывать не только ответы ассистента, но и происходящее вокруг них:
вызовы инструментов, рассуждения, ошибки.
- **R29.** Свёрнутый вид — одна строка: кратко, что происходит
- **R28.** Свёрнутый вид — одна строка: кратко, что происходит
(например, «вызов инструмента: такой-то»).
- **R30.** Развёрнутый вид — подробности шага: аргументы, результат, время.
- **R31.** Сворачивание и разворачивание — по нажатию на строку.
- **R29.** Развёрнутый вид — подробности шага: аргументы, результат, время.
- **R30.** Сворачивание и разворачивание — по нажатию на строку.
## 9. Решения, которые ещё не приняты
- Запись: по нажатию или на удержание.
- Нужны ли вложения (картинки) в этом клиенте.
- Как именно различать агентов (см. R21–R22).
- Доводим ли агент, чтобы он отдавал цифры по токенам.
- Как выглядит кольцо и где живёт.
- Как выглядит показ хода работы агента в свёрнутом виде.
## 10. Как проверяем
-65
View File
@@ -89,38 +89,6 @@
}
.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; }
@@ -287,34 +255,8 @@
<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">
@@ -462,13 +404,6 @@
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>