Batch 2
Molecules
Seventeen composites made only from Batch 1 atoms. This is where the workbench starts to be recognisable: the step rail, the agent panel, the canvas toolbar and the inspection modal are all assembled here before they meet real data.
Cards, panels and rows
The card shell, the scrolling panel with its pinned action, the shared list row, and the key-value row the device dock is built from.
Cards
Smart Parking Barrier
35 minBeginner7 steps
A gate that opens when a car approaches and closes once it has passed. You will wire an ultrasonic sensor, drive a servo and read two status LEDs.
Connection mismatch
Camera frame94% confidence
Echo is connected to D6. This build expects D7.
Tone is a hairline, not a wash. A finding card sits beside coloured wires and dense copy, so flooding it with amber would cost contrast on both — the severity pill and the affected-node chips carry the meaning instead.
Panel
Build steps
3 / 7- 1Check your kit2m
- 2Learn the layout4m
- 3Wire the distance sensor
- 4Connect and mount the servo5m
- 5Add status LEDs4m
- 6Upload and calibrate8m
- 7Run the full system test6m
Build Coach
Connected via WebMCP · 9 tools available
- Board
- Simulated UNO-compatible board
- Port
- Demo
- Voltage
- 5V
- Last serial output
- Distance: 18 cm
Skeleton shown while a simulated tool call runs.
Sticky header, one scrolling body, pinned footer — the panel's primary action never scrolls away. The rows are the same shape as the kit checklist, so every list in a build reads as one family, and the agent panel header carries the live activity indicator.
Overlays and status
Modal, drawer, popovers, menus, disclosure, alerts, toasts, empty states, live region and skeleton — everything that appears on top of, or instead of, the page.
Modal and drawer
Both trap focus, close on Escape, and return focus to whatever opened them. The modal's wide size is the inspection layout; the drawer is what the agent panel becomes under 1280px.
Alerts
No card, no border, no fill. The message sits on the page and all the colour lives in one filled disc — when the agent tells you something it should read as a sentence in the interface, not as a notification bolted onto it. Stacked alerts are separated by a hairline rather than by four competing containers.
Toasts and live region
Every toast also lands in the activity timeline, so a missed one costs nothing. Screen readers hear the same sentence through the live region.
Disclosure
The teaching contract in one component: the explanation is always available, never forced, and raw JSON stays shut until asked for.
Empty states
No open findings for this step.
Run an inspection when you think the wiring is done.
No projects match these filters.
Try removing a filter or clearing the search.
No agent activity yet.
Tool calls appear here as soon as the agent reads or changes the build.
The default mark is a lattice with its centre missing — the product's own way of saying “nothing here yet” instead of a borrowed outline icon. A specific icon is only passed when it adds meaning, as in the search case.