Quiet surfaces. Clear decisions.
Explore colour, spacing and interaction patterns using your current theme.
Give colour a job.
Primary marks actions and selection. Secondary supports a second action. Success, warning and failure retain a separate meaning, reinforced with text and icons.
surfacesurface-subtleborderprimarysecondaryaccentCorners follow purpose.
Controls, reading surfaces and composers use separate corner tokens.
8px10px16pxOne edge is enough.
Inputs use a single fine outline, without an inset bevel or permanent ring. Keyboard focus adds a clear indicator. Menus and dialogs can lift; ordinary cards stay flat.
Clarity through every state.
Keep labels and destructive action details visible. Disclosures hold supporting information. Motion respects device preferences.
Check the finished interface
- Tab order, focus return and accessible names.
- Light, dark, mobile, long content and empty states.
- Text, field-boundary and focus contrast in context.
- Loading, errors, stale data and unknown outcomes.
Strong contrast is the default for field boundaries. Subtle boundaries remain an explicit theme choice and fall below the 3:1 token target. Check the actual surrounding surfaces; token checks alone do not establish accessibility conformance.
Keep actions with their content.
Keep row actions beside their item and Send after the composer tools. Controls wrap in narrow panels. Try editing a queued draft or renaming a conversation.
Shared spacing follows 4, 8, 12, 16, 24, 32 and 48px. Default panels use 16px padding and 40px controls; compact density uses 12px padding and 36px controls. Touch controls retain 44px targets in either density.
Version 1
- queuedReview the search change.
- queuedCheck empty and long queries.
Local simulation · shared queue · no model or persistence
Saved conversation workspace
Thread actions stay beside the conversation. Drafts are saved per branch; the queue remains a local queue.
Conversation availability unknown.
Conversation availability unknown.
Browser IndexedDB example · saved on explicit actions · no model or send transport. The access toggle is a local demonstration.
A workspace around the components.
The workspace has named regions and a resizable inspector that becomes a drawer on narrow screens.
Project workspace
Keep the original request in view.
Transport, current data, acknowledgement and execution have separate meanings. Try a lost response, inspect its original receipt and apply an explicit local host update.
Preparing the local recovery example…
Keep each file and its actions together.
Three compact layouts share committed byte counts, exact original receipts and explicit access states.
Attachments with a confirmed checkpoint
A bounded local disk host. Transfer activity and host decisions stay separate.
Connect to the local upload host to select a file.
Run pnpm uploads:serve after the build and use the local upload consumer. The host stores up to eight files, 4 MiB each. This browser keeps the selected bytes and unresolved original in memory; keep this page open while reconciling a response. No provider or production authentication is connected.