Patterns
Conversation
Message patterns, prose styling, citations, observable work, and composer patterns for agent dialogue.
Core
Messages & Prose
Three message types form the backbone of agent conversation: user, agent, and system. Agent messages need a clear ownership surface; prose typography can be a reader or workspace preference.
Reader preference
A comfortable default for long analysis, explanations, and review-style answers.
I've reviewed the project brief against the roadmap and launch checklist. The document covers the main launch goals, but I found three areas that need attention.
The rollout assumptions in Section 2 reference Launch Policy v2, but the appendix doesn't map all requirements back to a source. The export workflow also references an outdated behavior — this will need updating before the review team session.
Two of the brief's 23 requirements are not mapped back to a source in the appendix:
- Fallback behavior — Degraded handling when a source is unavailable
- Cleanup behavior — Stale export cleanup after a run completes
The workflow routing rule specifies how escalations move from the agent to the support queue. Based on the workflow policy in Section 7.2, the routing policy covers handoffs between
| Type | Style | Details |
|---|---|---|
| User | bg-primary, text-primary-foreground | max-width 75%, rounded-lg, right-aligned, app body font, 14px |
| Agent | border border-border bg-muted | max-width 75%, rounded-lg, left-aligned, user-configurable prose style |
| System | bg-muted, text-muted-foreground | centered, text-xs, rounded-md |
| Property | Value |
|---|---|
| Font preference | User or workspace setting; current Serif Prose |
| Active specimen | Source Serif 4, 16px/26px |
| Allowed range | 14-16px text, 22-26px line height |
| Letter spacing | 0px |
| Optical size | Only when supported by the selected font |
| Antialiasing | -webkit-font-smoothing: antialiased |
| Paragraph spacing | 16px for long-form answers |
| Prose color | var(--foreground) |
- Required ownership signals — alignment, sender role, message surface, citations, and tool state should identify who produced the content.
- Configurable prose style — let users or workspace admins choose serif, sans, or compact rendering when reading volume varies by product.
- Do not rely on font family as the only authorship signal: accessibility settings, localization, and brand systems can change typography.
User messages are right-aligned to create visual separation of "who said what". Agent messages use a distinct surface and optional prose preference instead of depending on a fixed font. System messages are unobtrusive — they provide context without demanding attention. Max-width 75% prevents messages from spanning the full content width, improving readability. The streaming cursor stays static and auto-hides after a few seconds.
Observable work
Progress Steps
Progress steps show what the agent is doing, which sources are being touched, and what has completed. They disclose observable work instead of exposing hidden reasoning.
| Do | Don't |
|---|---|
| Show observable operations, sources, and status | Reveal private reasoning traces or speculative narration |
| Collapse completed work into a useful summary | Leave stale spinners running after work has completed |
| Keep pending steps visible but lower emphasis | Make future work look complete or guaranteed |
| Allow the user to collapse at any time | Force detailed traces to remain expanded after completion |
Progress steps can shimmer while active, but the content must remain auditable: source names, step labels, timestamps, and status. The expanded view should answer "what is happening?" without exposing private reasoning or speculative internal narration.
Sourcing
Citations
Citations ground agent responses in verifiable sources. Hovering or focusing a marker opens the preview anchored at the citation itself, so verification never leaves the sentence; on touch, tapping the marker opens the same card.
The launch readiness plan has been set to enterprise release, which requires independent risk analysis by the review teamand a standard support plan with documented issue triage timelines. The internal launch guidance also requires every decision-supporting source to be linked from the final review summary, including modules that were excluded from the initial boundary.
| Element | Spec |
|---|---|
| Inline token | Small numbered source control inside prose; hover, keyboard focus, or tap opens the preview. |
| Preview card | Source title, quote excerpt, page chip, view-source affordance, and source pagination; Escape or tapping outside dismisses it. |
| Placement | Anchored at the citation marker with a caret, flipping sides when the viewport would clip it. |
| Source strip | Readable fallback list for scanning and long source names; each entry opens the same anchored preview. |
The citation preview should answer "why should I trust this sentence?" without forcing the user away from the current answer. Keep the quote short, show the exact source location, and make the full document one click away.
Input pattern
Composer
A composer is not just a chat box. It is where the user reviews context, edits intent, and commits the next agent action.
Live specimen
Inspect for
The checks that make a composer trustworthy before anything is sent.
The user can see the active scope
Reply targets and generated state use connected islands above the drafting surface, while files stay inside the composer as message payload.
The next commitment is explicit
The send state, pending tasks, and generated suggestions are visible before the user commits the action.
Suggestions remain provisional
Fast-start prompts fill the composer only after selection, leaving a clear boundary between proposal and message.
Every added object is reversible
Context objects, attachments, and reply targets expose a local dismiss path without changing the primary action.
Anatomy
4 regionsContext islands
A connected 95%-width stack for plan, reply, and scope above the input surface.
Primary input
A quiet writing area that grows with the user instead of forcing a modal.
Action chrome
Menu, context budget, and send state stay low-contrast until needed.
Suggestion row
Fast-start prompts live outside the input so they never impersonate user text.
Rule
Separate authored text from proposed context
Do not let generated suggestions look like user-authored text.
Expose what will be sent before commitment
Do not place generated plans inside the user-authored input surface.
Keep generated affordances reversible
Do not make dismiss, edit, or send paths compete visually.
| Element | Spec |
|---|---|
| Container | max-w-[720px], rounded-xl on mobile, rounded-2xl on desktop, border border-border |
| Textarea | Auto-expanding, min 36px, max 160px, 14px Albert Sans |
| Send button | 32×32px hit area, 24px inner icon button, foreground when active, muted when empty, spring press animation |
| Focus state | Border transitions to foreground/20, subtle outer shadow |
| Scope island | Compact dismissible chips in the connected island stack. |
| Reply island | Reply icon plus truncated quote with a local dismiss action. |
| Plan island | Rendered in the connected 95%-width stack above the composer, not inside the authored text area. |
| State controls | Multi-select toggle group, active = subtle foreground tint, drives visible reference states without resizing the input |
| Suggestions | Click to fill textarea, flash animation on click, flex-wrap below |
| Attachments | File preview chips with name/size, dismiss per-file, enables send; rendered inside the composer card because files belong to the message being drafted. |
Scope and reply-to are mutually exclusive — enabling one dismisses the other. Plan/progress, scope, and reply stay in a connected island stack above the composer; attachments stay inside the composer because they are part of the message payload. The send button uses a spring-based press animation (cubic-bezier 0.34, 1.56, 0.64, 1) with an arrow flyout on send. Suggestion chips fill the textarea on click with a brief color flash to confirm the action.