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

Дорожки прогонов

Несколько агентов, работающих параллельно, на общей оси времени. Отвечает на вопрос, на который не отвечает ни очередь, ни лог: что шло одновременно и что кого ждало.

Компонент

worldgen-01

biomes-04

Разметка

<div class="inst-lanes">
  <div class="inst-lane">
    <span class="inst-lane-label">worldgen-01</span>
    <span class="inst-lane-track">
      <span class="inst-lane-span" data-tone="ok" style="inset-inline-start:0%;inline-size:34%"></span>
    </span>
  </div>
  <div class="inst-lane">
    <span class="inst-lane-label">biomes-04</span>
    <span class="inst-lane-track">
      <span class="inst-lane-span" data-tone="running" style="inset-inline-start:30%;inline-size:52%"></span>
    </span>
  </div>
</div>

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

<div class="inst-lanes">
  <div class="inst-lane">
    <span class="inst-lane-label">worldgen-01</span>
    <span class="inst-lane-track">
      <span class="inst-lane-span" data-tone="ok"
            style="inset-inline-start:0%;inline-size:34%"></span>
    </span>
  </div>
</div>

Что	Обязательно	Почему
`inset-inline-start` и `inline-size` инлайном	да	Границы отрезка — данные, а не оформление: начало и длительность приходят с сервера
Логические свойства, а не `left` и `width`	да	В RTL ось времени зеркалится сама
Подпись или `title` у отрезка	да	Прямоугольник без имени и времени не сообщает ничего
`data-tone`	нет	Без атрибута отрезок нейтрален

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

Используйте	Возьмите другое
Параллельные исполнители на общей оси	Последовательные задачи — очередь: у неё нет оси времени
Важны наложения и простои	Один процесс с прогрессом — мера
Исполнителей 2–10	События без длительности — лента

Устройство

inset-inline-start и inline-size задаются инлайном, и это единственный разрешённый случай инлайнового стиля в этом ките: положение отрезка на оси — значение, а не оформление. Тем же каналом идут ширина заполнения меры и глубина узла дерева.

<span class="inst-lane-span" style="inset-inline-start:30%;inline-size:52%"></span>

Проценты считаются от общей длительности прогона, поэтому все дорожки делят одну шкалу — иначе сравнивать их бессмысленно.

Правила

Так Границы отрезка — данные

Начало и длительность приходят с сервера и живут в инлайновом стиле. Всё остальное берётся из кита.

Не так Дорожки вместо расписания

У дорожек нет шкалы с подписями времени. Точные моменты читаются таблицей или лентой.

Так Логические свойства оси

inset-inline-start вместо left: в RTL ось зеркалится сама.

Не так Отрезок без имени и времени

Прямоугольник на оси не сообщает ничего, пока рядом не написано, чей он и сколько длился.

Доступность


Отрезок — не текст	Сам по себе он не озвучивается ничем. Дорожка обязана нести `aria-label` с длительностью: «worldgen-01, с 0 до 34 процентов, 12 секунд»
Подпись обрезается	Полное имя — в `title`, иначе исполнитель безымянен
Не только цвет	Тон отрезка дублируется в доступном имени словом
Режим принудительных цветов	Отрезок несёт значение, поэтому переживает сброс: `forced-color-adjust: none` и `Highlight`
Альтернатива	На узком экране дорожки нечитаемы. Резервный вид — таблица с началом, концом и длительностью
Уменьшенное движение	Отрезок `running` не анимируется — длительность и так меняется скачками данных

API

Имя	Значение	Что делает
класс
`inst-lanes`	—	Набор дорожек
`inst-lane`	—	Одна дорожка: подпись и ось
`inst-lane-label`	—	Имя исполнителя, обрезается
`inst-lane-track`	—	Ось времени
`inst-lane-span`	—	Отрезок работы
атрибут
`data-tone`	—	`neutral` `running` `ok` `warn` `error`
токен
`--label-col`	`92px`
`--gap-inline`	`var(--space-4)`
`--size-meter`	`6px`
`--radius-xs`	`3px`
`--track`	`light-dark(oklch(0 0 0 / 0.10), oklch(1 0 0 / 0.16))`
`--border`	`light-dark(oklch(0 0 0 / 0.12), oklch(1 0 0 / 0.11))`
`--hairline`	`1px`
`--text-xs`	`0.75rem`
`--tone-mark`	`var(--text-secondary)`

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