Sonarist project

Sonarist / Design system

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

Design system contents

Components

Person profile and customer context

Bring relationships, conversation history and optional Kit context into one readable record.

On this page

Purpose and composition

Bring relationships, conversation history and optional Kit context into one readable record.

Use as full person context, not a proof of live CRM or Kit sync.

Anatomy

Anatomy
PartResponsibility
HeaderIdentity, organization, email and edit
RelationshipsProduct kind, sales stage and follow-up
HistoryExisting person conversations
Owner/contextResponsibility and optional subscriber information

Configuration and variants

Configuration and variants
Input / variantContract
personContact record
conversationsHistory filtered by contactId
callbacksBack, conversation navigation, person update and local notification

States and feedback

States and feedback
StateVisible / behavioral result
Customer/prospectDifferent badges and contextual fields
Kit presentSubscriber tags, segments and activity
EditPersonEditorDialog remounted
PhoneColumns stack

Interaction and responsive behavior

  • History navigation preserves queue context through parent.
  • Email link is mailto.
  • Editing updates local people state; underlying helpers still import static source contacts.

Accessibility contract

  • Headings and definition-style context organize information.
  • Give history controls explicit subject text.

Known implementation limits

Source static helper lookups can lag edited people records. Kit content is sample data and not a connected API response.

Composition example

<PersonProfileView person={person} conversations={records} {...profileCallbacks} />

Source references

Source references
FileResponsibility
components/views/person-profile-view.tsxPersonProfileView

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.

Person Profile · Screen · Light · Desktop · 2880 × 2000 px

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