Агентный слой

Бюджет

Расход против лимита: токены, время, деньги. Компонент агентных систем, потому что там расход непрерывен и не нагляден — пользователь узнаёт о превышении постфактум, если не показать заранее.

Компонент

Токены 184 200из 250 000

При текущем темпе лимит будет достигнут через ~12 минут

Разметка

<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>

Использование

<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` иначе рвётся по пробелу и читается как два числа

Когда использовать

Используйте	Возьмите другое
Расход против явного лимита	Число без предела — метрика
Есть прогноз исчерпания	Прогресс одной задачи — мера
Ресурсов 1–4	Много ресурсов с разбивкой — таблица

Устройство

inst-budget-of набирается мельче и тише, ровно как единица измерения у метрики. Одним кеглем «184 200 из 250 000» читается как одно длинное число, и глаз не может выхватить главное.

Прогноз важнее остатка

<div class="inst-budget-note">При текущем темпе лимит будет достигнут через ~12 минут</div>

inst-budget-note — не примечание, а основная ценность компонента. «Осталось 65 800» не говорит, успеет ли прогон; «через ~12 минут» говорит. Если прогноза нет, лучше не показывать бюджет вовсе — цифра без интерпретации только тревожит.

Правила

Так Прогноз рядом с остатком

«Хватит ещё примерно на 3 прогона» отвечает на вопрос, ради которого сюда смотрят. Голое число — нет.

Не так Только процент

74% от неизвестного целого не сообщает ничего. Абсолютные значения обязательны.

Так «из N» внутри значения

Это часть числа. Отдельным узлом рядом оно читается вторым показателем.

Не так Тон по проценту

Красный на 80% там, где 80% — норма, обучает игнорировать красный.

Доступность


Значение	Полоса несёт `role="progressbar"` с `aria-valuenow/min/max`. Без них значение существует только как ширина в пикселях и недоступно ни скринридеру, ни тесту
Имя полосы	`aria-label` с именем ресурса. Три безымянные полосы подряд неразличимы
Прогноз	Обновляется по ходу прогона, поэтому обязан жить в `aria-live="polite"` — но обновляться не чаще раза в 30 секунд, иначе озвучивание не смолкает
Приближение к пределу	Меняет тон полосы, и это обязано дублироваться словом в прогнозе: цвет не единственный носитель
Табличные цифры	Включены по умолчанию: число растёт на месте и не дёргает соседей

API

Имя	Значение	Что делает
класс
`inst-budget`	—	Контейнер
`inst-budget-row`	—	Строка: имя ресурса и значение
`inst-budget-value`	—	Израсходовано
`inst-budget-of`	—	«из N» — мельче и тише
`inst-budget-note`	—	Прогноз
токен
`--space-3`	`6px`
`--gap-inline`	`var(--space-4)`
`--text-sm`	`0.8125rem`
`--text-xs`	`0.75rem`
`--weight-medium`	`500`
`--weight-normal`	`400`
`--text-muted`	`light-dark(var(--n-8), var(--n-6))`

Полосу даёт мера, своего примитива у бюджета нет.

Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument