Pattern
Queue list
The list half of the split, and the main dashboard of the product. Scope at the top, a counted claim under it, an optional banner, the rows, and the keyboard taught at the foot. 38 grey screens of 62, 29 of them already in colour.
CLAUDE.md settles it and does not reopen it: the dashboard is the queue, with the fleet in the pane, and not the other way round. That decision was made by the choice of primary persona, and this composition is what it looks like. Design principle 1 governs everything inside it: every row is a decision, not a record, and a line that does not tell the analyst what to do next has not earned its height.
Anatomy
Live, in both themes, in a box short enough that the scope bar proves it stays and the foot proves it sticks. Those two are the whole reason the column scrolls rather than the page.
dark, shipped
18 waiting across 12 of 40 tenants in your scope
3 of 18 shown ↑ ↓ read, the pane follows order: unrecorded, waiting on you, severity, age
light, the pair
18 waiting across 12 of 40 tenants in your scope
3 of 18 shown ↑ ↓ read, the pane follows order: unrecorded, waiting on you, severity, age
scopebarwhat you are looking at, as chips you can press. It is the first zone because the count under it is only true within it pagereadoutthe counted claim. One per screen, and it is theh1pagebanneroptional, between the claim and the rows. It appears on 12 of the 38 and its placement belongs to the column rather than to the banner pagerowsthe scrollport and the grid. Seven tracks, set by--row-tracks, and six on the--tenantvariant, where the tenant cell would carry the same string on every row pageqfootwhere the keyboard is taught, and deliberately never a dialog page
Behaviour at width
Below 1280, the system's one point (Width), the log variant is not rendered: the scope bar, the rows, the foot and any banner that is not only-narrow all go, and the narrow only line that replaces them takes a margin of --space-4. The queue itself renders at every width. CLAUDE.md gives the phone one scenario, a paged case read and escalated, and answering an auditor is not it. Above the point the column takes whatever the pane does not, and the row's two prose tracks stop growing at 32ch and 36ch rather than spending the width on a line that is scanned.
The --tenant variant is the one place that sentence runs backwards, and it arrived from a measurement. On the four screens of node 7.1 the list held one row of 50px in 844 by 803 at 1440, roughly 94% void and the largest single expanse of empty pixels in the product, while the pane beside it was 360 wide and hid 354 to 543px of the record the screen is about. Design principle 5 says density is the feature and no whitespace is decorative. So on that variant the pane takes the share and the list takes the rest: at 1440 they resolve to 656 and 548, at 1920 to 980 and 704, and at 1280, the platform minimum, to 656 and 388. Below the point the floor is lifted again, because z45 is a block there and 41rem left standing on a 360px phone is 296px of column hanging off the edge of the document.
What the variant did not fix, and the number is here so nobody re-opens it hoping. Widening the pane buys back only 12% of its height: its body is stacked blocks of short lines rather than prose that reflows, and --measure caps what is prose at 66ch, so 360 to 900px of pane took the content from 1157 to 1020. The rest of what it hides is content, and the cure for content that does not fit is the scroll it already has.
Variants
| Axis | Value | The rule |
|---|---|---|
| what the rows are about | base, 36 screens | The queue: what is waiting on a decision |
--log, 2 screens | The log: what was decided. Same five zones in the same order, so it is a variant and not a third pattern. The row tracks change and the column is not rendered at 360 at all, because the phone has one scenario and answering an auditor is not it | |
--tenant, 3 screens | The queue narrowed to one client, node 7.1. Same five zones again, and three things follow from the single fact that there is one tenant here rather than forty. The tenant cell goes, because the scope bar, the readout and the pane head each name it once already and design principle 1 says a column carrying a constant has not earned its width. The row therefore needs 570px rather than 666. And the two halves swap which of them takes the share: everywhere else the list is what she is working and the pane is the context, and here the pane is the client, so the pane reads --pane-w-record and the list takes what is left, never below --list-w-tenant | |
| the rows themselves | not a variant | An empty where the rows go is still this pattern. Four screens do it: nothing waiting, no match for the scope, the queue taken by someone else, and the queue still assembling |
When to use it
Any screen whose job is choosing what to work on next. That is the queue and its seven states, the log and its two, and the case screens, where the list stays beside the pane so the analyst can see what she is not doing.
Where she meets it. First thing on shift and every time she finishes ruling on something. It is the screen she returns to, which is why the scope she set has to survive the return.
Rule and anti-rule
Do
Fill it. A new state of the queue is this pattern with a different middle: an empty instead of rows, a banner above them, a different set of chips. Nothing about the scope bar, the claim or the keyboard strip is a decision you are making again.
Do not
Take it for a column that is not a list. The entry screens put a frame in this same host and the system states put an outage; each is one wrapper with one job, and reaching for this pattern there would mean carrying a scope bar and a keyboard strip that have nothing to scope and nothing to traverse.
Limits
Rules of composition and context that reach this pattern. Full table with sources on Architecture, and every one of them is a function in design/kit/checks/rules.mjs.
- R1. Not more than one
.btn--primaryper layer. This column carries none of its own: the decision is made in the pane, and the foot here teaches the keyboard instead. - R6. One
readoutper screen. It is the counted claim about what you are looking at, and a second would be a second claim. - R9. One selected row at a time, and none at 360: at that width selecting opens the standalone case instead of moving a pane that is not rendered.
Where it stands
38 grey screens. The first three are the proof of existence; the rest are named because a pattern is only as real as the list of places it already stands.
29 of the 38 are already in colour, and the other 9 are queue and case states waiting for stage 12. Live, in colour: the queue, a case with the list beside it, the log.
What it is made of, and what moved into it
File: design/system/patterns/queue-list.css. Imported in index.css after every component and before the places, because a pattern is built from components and has to be able to reach past their own declarations.
Built from scopebar, readout, banner, rows, row and qfoot, standing in z4. Nothing new was written for it.
One block moved in, out of z4.css, and it had the shape this whole level exists to collect: a selector written inside one component that names four others, conditioned on which filling the host is carrying. The class moved with it, because .z4--log named the host rather than the thing.
.z4 > .banner did not move, and the difference is the point. It places the banner in the column whichever filling the column is carrying, so it belongs to the zone rather than to the composition. A rule moves here only when it is conditioned on the filling.
Copy this
Three classes on one element, and each is a different level. z4 is the zone, queue-list is the filling, queue-list--log is the variant of the filling. The grey corpus still writes z4--log and always will: it is frozen.
A new screen carrying this pattern moves two numbers, and they are hard coded in four places on purpose so that none of them can drift quietly: the counts on this page, on Patterns, in the header of design/system/patterns/queue-list.css and in docs/inventory.md. Recount with node design/kit/checks/compose.mjs for the grey number and by counting the class in design/*.html for the coloured one.