Batch 1
Atoms
Twenty-two parts, all built from Batch 0 tokens and all interactive — click, tab, type. These are the real product components; the screens in later batches import exactly what is on this page.
Badges, chips and technical values
Status, severity, tags, filters, mono readouts, metadata lines, dividers and links.
Status badges
A raised white capsule with a coloured glyph. Colour lives in the icon, so the label keeps full contrast and a row of seven reads as one system. The three on the right run for the entire workbench session — they are the product's promise that nothing here is pretending to be real hardware.
Severity
Icon plus word, always. A finding card sits next to coloured wires, so its severity cannot rely on a colour swatch to be read.
Chips
Static tags
Toggleable filters
Applied filters
Static tags on project cards, toggleable in the library toolbar, removable once applied. Try them — they are wired to real state.
Technical values and metadata
Echo is connected to D6. This build expects D7. Power stays on 5V and the last reading was 18 cm.
35 minBeginner7 steps
Camera frame94% confidence12:04:31
Read more about pin mapping in the wiring reference, or open the design lab
Mono values are recognisable inside a sentence without bold or colour. The metadata line inserts its own separators so every card punctuates the same way.
Fields and controls
Text, search, select, checkbox, radio, segmented control and switch — the input surface of the whole product.
Fields
Saved with this build only.
This build defines D7 in the sketch.
The select is a real listbox, not a native one — the OS menu cannot be styled and would land in the middle of the interface looking borrowed. Open it and use the arrow keys, Home/End, Escape, or just type the first letters of an option.
Segmented controls
Selected: current · hint
Left is the canvas view switch; right is the coaching level, which defaults to hinting so the product never hands over the answer unasked.
Checkboxes and switches
What you need
Layers
The checklist never blocks the build — an unchecked kit just means the workbench runs in guided demo mode. Unticked reads as a slot to fill; ticked says what you have. A glance down the column is enough to see what is missing.
Knowledge check
Why must the Echo wire match the pin defined in the sketch?
The radio option is built for the question that follows a correction. It has an answered state, because the point is understanding the fix rather than clicking through it.
Feedback and marks
Progress, the agent's activity pulse, functional-test rows, tooltips, and the two brand marks.
Build progress
Compact · workbench topbar
Progress here is seven named steps, not a percentage — so the fraction is the headline and the ticks let you count what is left. Click it to open the full list; pick a step to jump there. The agent drives both: verify_current_step advances the fraction, inspect_build turns a tick amber.
Percentage progress
Countable · one tick per part
Complete
Continuous · no discrete units
Countable things get counted: five parts render as five ticks, so you read the number off the control instead of estimating it from a bar's length. Only genuinely continuous work keeps the solid track. Completing swaps the tone and ticks the label — the finish is a state change, not a bar that happens to be full.
Activity pulse
As a capsule, for the agent panel header
Three states, told apart by shape rather than colour: a breathing dot when the agent is attached and idle, a lattice with a trace running its perimeter while a tool executes, and a hollow ring when nothing is connected. The lattice reads as breadboard holes and the trace as the agent walking the circuit — eight dots sharing one animation on staggered delays, so they resolve into a single moving signal.
Test rows
The three stages of the functional test. Run the failing variant to see the state the servo error produces in Batch 5.
Tooltip
Opens on hover after 350ms and instantly on keyboard focus; Escape closes it. Nothing is explained only here.
Marks
The logo is a signal path that turns a corner and lands on a pad. The agent mark is a context node with three links — not a face, not a sparkle.