Sonarist project

Sonarist / Design system

Documentation v1.0.0 · Work in progress · UI prototype with separate server foundations

Design system contents

Patterns

Prepare and send a reply

Make sender identity, recipients and message content explicit before the local reply action.

On this page

User goal

Make sender identity, recipients and message content explicit before the local reply action.

Workflow

Workflow
StepExpected behavior
1Open an active conversation and review customer context.
2Confirm From and To; adjust Cc/Bcc when needed.
3Write the reply or explicitly request an AI draft while the body is empty.
4Review the draft; a suggested reply is not automatically sent.
5Check recipients and the final text, then use Send reply.
6The source adds an outbound local message, moves the thread to Waiting and clears the composer body.

Decision and composition rules

  • AI cannot overwrite a nonempty body.
  • At least one To recipient and a sender inbox are required.
  • Draft saved is a local fingerprint timer.
  • Added participant changes remount Composer and seed internal recipient arrays.

Edge cases and recovery

  • AI failure shows a role=alert and can be retried.
  • Formatting buttons and attachment affordance do not implement rich text/upload.
  • The displayed keyboard shortcut is not wired.
  • Real send must retain the draft until the authenticated outbox confirms acceptance and provide recoverable errors.

Persistence boundary

The demonstrated frontend uses local React state or static fixtures. Read the readiness topic before connecting these actions to authenticated persistence. A visible toast, badge or timer is not a server acknowledgement.

Source references

Source references
FileResponsibility
components/inbox/composer.tsxEnvelope, draft and send gate
components/helpdesk-app.tsxLocal sendReply
lib/server/email/outbound.tsFuture trusted outbox boundary

Examples from the app

Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.

Composer · Component detail · Light · Desktop · 1792 × 758 px
Composer · Component detail · Light · Desktop · Draft With Attachment · 1792 × 1030 px
Composer Error · Component detail · Light · Desktop · 1792 × 758 px
Composer Error · Component detail · Light · Desktop · Error · 1792 × 844 px
Waiting · Screen · Light · Desktop · 2880 × 2000 px

Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0