L8 UI Patterns

9 interaction patterns for nova26, rebuilt clean — zero dependencies, phone-first. Open this file in a browser; everything is interactive.

1Assignees picker

Multi-select with gradient avatars, name + role rows, checkboxes. Collapsed trigger shows stacked avatars. → swarm lane picker.

selected: none

2Slide to confirm

Drag-to-confirm for owner-gated approvals (money, publish, irreversible). Try releasing early — it snaps back.

status: waiting

3Carousel

Swipe cards — drag left/right or use the buttons. This is the 26-stage intake swipe mechanic.

4Checklist

Press-to-check rows with a progress bar. → ship-stage verification.

5One-time code

Segmented code entry: type, backspace, or paste a full code. Type 123456 then clear it to see the invalid state.

code: —

6Voice note

Press-and-hold capture. Slide up while holding to cancel.

status: idle

7Inline confirm

In-flow mini confirmation — the button arms right where it sits. → lightweight approvals in agent chat.

8Dynamic island

Expandable status pill. Tap to expand, then press "Simulate build" to watch it update live. → build/agent status on phone.

9Search

Command palette: click or press ⌘K / Ctrl+K, type to filter, ↑↓ + Enter to pick. → universal command palette.