Agent layer
Run lanes
Several agents working in parallel on a shared axis of time. It answers the question neither the queue nor the log answers: what ran at the same time and what waited for what.
worldgen-01
biomes-04
Markup
<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>
Contract
| What | Required | Why |
|---|---|---|
inset-inline-start and inline-size inline |
yes | The bounds of a segment are data rather than styling: the start and the duration come from the server |
Logical properties rather than left and width |
yes | In RTL the axis of time mirrors itself |
A label or a title on a segment |
yes | A rectangle with no name and no time says nothing |
data-tone |
no | With no attribute a segment is neutral |
Accessibility
| A segment is not text | By itself it is spoken by nothing. A lane has to carry an aria-label with the duration: "worldgen-01, from 0 to 34 per cent, 12 seconds" |
| The label is truncated | The full name goes in a title, otherwise the worker has no name |
| Not colour alone | The tone of a segment is repeated in the accessible name in words |
| Forced-colours mode | A segment carries meaning, so it survives the reset: forced-color-adjust: none and Highlight |
| The alternative | On a narrow screen lanes are unreadable. The fallback view is a table with the start, the end and the duration |
| Reduced motion | A running segment is not animated — the duration changes in jumps of data anyway |
Anatomy
inset-inline-start and inline-size are set inline, and that is the one
case of an inline style allowed in the library: the position of a segment on
the axis is a value rather than styling. The same channel carries the width of
a meter's fill and the depth of a tree node.
<span class="inst-lane-span" style="inset-inline-start:30%;inline-size:52%"></span>
The percentages are counted from the total duration of the run, so every lane shares one scale — otherwise comparing them is meaningless.
API
| Name | What it does |
|---|---|
| class | |
inst-lanes | The set of lanes |
inst-lane | One lane: a label and an axis |
inst-lane-label | The name of the worker; it is truncated |
inst-lane-track | The axis of time |
inst-lane-span | A segment of work |
| Name | Value | What it does |
|---|---|---|
| attribute | ||
data-tone | — | neutral running ok warn error |
| Name | Value | Where from |
|---|---|---|
| token | ||
--label-col | 104px | base +4: scale |
--gap-inline | var(--space-4) | base +14: density · scale |
--size-meter | 6px | base +4: scale |
--radius-mark | var(--radius-2xs) | one across every cell |
--track | light-dark(oklch(0 0 0 / 0.10), oklch(1 0 0 / 0.16)) | one across every cell |
--border | light-dark(oklch(0 0 0 / 0.12), oklch(1 0 0 / 0.11)) | one across every cell |
--hairline | 1px | base +1: screen |
--text-xs | 0.78125rem | base +4: scale |
--tone-mark | var(--text-secondary) | base +4: |
Why the kit works this way — the constitution · Open source under MIT, github.com/keshon/instrument