Patterns

Create Agent

A two-step wizard card for naming an agent, picking its icon, and selecting which event sources activate it.

Agent Triggers

A configuration panel for listing and toggling the external events that activate an agent, with a manual run control.

Human in the Loop Question

A compact dialog that pauses an agent mid-task to collect a structured choice — radio options, a free-text fallback, skip/continue controls, and multi-step pagination.

Background Tasks Drawer

A side drawer that tracks an agent's background work live — running tasks with elapsed time, stats, and stop controls, plus an expandable history of finished commands and output.

Instruction Tool Insert

A numbered instruction editor where typing / opens a two-step inline picker — choose a tool, then its connector or target — inserting an atomic, editable chip into the prose.

Procedure Builder

A doc-style editor for an agent's step-by-step procedure — a / step picker, IF / ELSE branches with plain-language or code conditions, section jumps, and escalate / switch actions.

Multi-Agent Trace

A tree of parallel sub-agent tasks, each with its own status and step list.

Expandable Trace

A collapsible "Thought for Xs" summary that expands into a step-by-step trace.

Shiny Button

A button with an animated light sweep across its surface.

Stop Generation Button

A send button that morphs into a stop control mid-stream and back on completion.

Thinking Loader

A loader with a shimmering label and a live elapsed-time counter.

Tool Call Chip

An inline pill naming an in-flight tool call that resolves into a result summary.

Analysis List

A full-width indeterminate progress bar over a list whose items resolve from skeletons one by one.

Streaming Text

A streamed answer with inline sources, actions, and follow-ups.

Inline Citation

A hoverable, clickable footnote-style source marker inline within text.

Sources Stack

An overlapping stack of source favicons with a count, expanding into a linked source list.

Source Trust Card

A paginated single-source card with a trust badge and domain pills for jumping between sources.

Follow-Up List

A vertical list of suggested next questions shown after a response, each sendable with a tap.

Selection Actions

A floating toolbar on text selection for describing edits, explaining, or improving a passage.

Refinement Controls

One-tap adjustments (Rephrase, Shorten, More formal, Bulletize…) and a free-form instruction field docked under an AI output, with every result kept as a steppable version.

Prompt Bar

A composer with @ sources, / commands, a model picker, and dictation.

Prompt Bar Pro

A first-run composer with suggestion chips, @ sources, / commands, an environment picker, and an orchestrator picker.

Diff Summary Card

A collapsed summary of a batch of file edits, with undo and an overflow list.

Diff Tabs

Per-file chips that switch an inline diff viewer between a batch of changed files.

Terminal Stream

An auto-scrolling, collapsible panel streaming raw command output line by line.

Flowchart

Workflow trigger and condition steps on a dotted canvas.

Chat Bubble with Actions

A message bubble with feedback thumbs, edit-and-resubmit, retry/regenerate, and a version stepper.

Tool Approval

A pending tool-call prompt with allow, always-allow, and deny actions.

Connector Panel

A settings panel for connecting an app or MCP server — shows capabilities overview, groups tools by type, and lets users set per-tool permission levels.

Attachment Chip

A composer's file/image attachment tray with drag-drop, upload progress, and inline preview.

Image Peek

A row of tiny image thumbnails that grows into an anchored preview card with a label, counter, and prev/next stepping.

Rate Limit

A quota-exceeded state with a live countdown to when the user can send again.

Partial Response

A cut-short assistant reply with Continue and Retry actions.

Generation Error

A console-style error card for a failed generation, with details and retry.

Console Error Card

A structured card surfacing a browser console error with a code frame, call stack, and navigation.

Connectivity Error

A dismissible card surfacing a network connection failure with a description and retry/details actions.

Response Compare

A side-by-side pair of response panels with independent regenerate and a single preferred pick.

Confidence Indicator

A badge or inline dot signaling how sure an AI answer or extraction is.

Voice Waveform

A live amplitude waveform while the AI listens or speaks.

Listening State

A pulsing mic indicator showing the AI is actively listening.

Live Transcript

A streaming, speaker-labeled transcription of a voice conversation.

Command Palette

A searchable ⌘K overlay for jumping to sessions or running quick actions.

Setup Checklist

A stepped onboarding card with circular arc progress, dashed-circle pending states, and strikethrough for completed steps.

Collaborative Presence

An avatar stack showing who has access to a shared record and who is actively viewing it right now.

Invite Members

A two-step modal for searching or emailing people to a record and assigning each a role, with a live current-members list.

Prompt-Driven Onboarding

A setup screen that hands users a pre-filled prompt to paste into their AI coding agent, with a snippet fallback and a live listener that confirms the first event.

Describe Filters

A Describe button in a table toolbar that turns a plain-language request into removable filter chips — column filters where a column exists, marked semantic matches where none does.

AI Fill Drawer

A record drawer of key/value fields where the model fills the empty values — each arrives as a sourced suggestion to accept, edit or reject.

Natural Language Query

A SQL-first query bar that also takes plain language — the mode badge flips to Ask, and Enter translates the request into a visible, editable WHERE clause before running it.