Агентный слой
Бюджет
Расход против лимита: токены, время, деньги. Компонент агентных систем, потому что там расход непрерывен и не нагляден — пользователь узнаёт о превышении постфактум, если не показать заранее.
Разметка
<div class="inst-budget">
<div class="inst-budget-row">
<span>Токены</span>
<span class="inst-budget-value">184 200<span class="inst-budget-of">из 250 000</span></span>
</div>
<div class="inst-meter" role="progressbar" aria-label="Токены"
aria-valuenow="74" aria-valuemin="0" aria-valuemax="100">
<div class="inst-meter-fill" style="inline-size:74%"></div>
</div>
<div class="inst-budget-note">При текущем темпе лимит будет достигнут через ~12 минут</div>
</div>
Контракт
| Что | Обязательно | Почему |
|---|---|---|
inst-budget-of внутри значения |
да | «из 250 000» — часть числа, а не сосед. Отдельным узлом рядом оно читается вторым показателем |
| Мера с ролью и значениями | да | Доля существует только в пикселях ширины, пока у полосы нет aria-valuenow |
inst-budget-note с прогнозом |
да | Остаток без темпа не отвечает на вопрос, ради которого сюда смотрят: успею ли |
| Неразрывный пробел в разрядах | да | 184 200 иначе рвётся по пробелу и читается как два числа |
Доступность
| Значение | Полоса несёт role="progressbar" с aria-valuenow/min/max. Без них значение существует только как ширина в пикселях и недоступно ни скринридеру, ни тесту |
| Имя полосы | aria-label с именем ресурса. Три безымянные полосы подряд неразличимы |
| Прогноз | Обновляется по ходу прогона, поэтому обязан жить в aria-live="polite" — но обновляться не чаще раза в 30 секунд, иначе озвучивание не смолкает |
| Приближение к пределу | Меняет тон полосы, и это обязано дублироваться словом в прогнозе: цвет не единственный носитель |
| Табличные цифры | Включены по умолчанию: число растёт на месте и не дёргает соседей |
Устройство
inst-budget-of набирается мельче и тише, ровно как единица измерения у
метрики. Одним кеглем «184 200 из 250 000»
читается как одно длинное число, и глаз не может выхватить главное.
Прогноз важнее остатка
<div class="inst-budget-note">При текущем темпе лимит будет достигнут через ~12 минут</div>
inst-budget-note — не примечание, а основная ценность компонента.
«Осталось 65 800» не говорит, успеет ли прогон; «через ~12 минут» говорит.
Если прогноза нет, лучше не показывать бюджет вовсе — цифра без интерпретации
только тревожит.
API
| Имя | Что делает |
|---|---|
| класс | |
inst-budget | Контейнер |
inst-budget-row | Строка: имя ресурса и значение |
inst-budget-value | Израсходовано |
inst-budget-of | «из N» — мельче и тише |
inst-budget-note | Прогноз |
| Имя | Значение | Откуда |
|---|---|---|
| токен | ||
--space-3 | 6px | одно на все ячейки |
--gap-inline | var(--space-4) | база +14: плотность · масштаб |
--text-sm | 0.875rem | база +4: масштаб |
--text-xs | 0.78125rem | база +4: масштаб |
--weight-medium | 600 | одно на все ячейки |
--weight-normal | 400 | одно на все ячейки |
--text-muted | light-dark(var(--n-8), var(--n-6)) | одно на все ячейки |
Полосу даёт мера, своего примитива у бюджета нет.
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument