Design System

Interactive Molecules

Composed components from @stackmates/ui-interactive/molecules

Dialog

Modal dialogs built on Radix UI Dialog primitive.

import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger,
} from '@stackmates/ui-interactive/molecules';

<Dialog>
  <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
  <DialogContent>
    <DialogHeader><DialogTitle>Title</DialogTitle></DialogHeader>
  </DialogContent>
</Dialog>

MessageRow

One message with avatar. User right-aligned, assistant left-aligned.

OR
Orchestrator

I'll analyze your pipeline using the optimal-stopping algorithm.

Run the sales-rfp workflow for the Acme deal.

OR
Orchestrator

Starting the sales-rfp-workflow...

MessageRowData

PropTypeDefaultDescription
id*string—Unique message identifier
role*'user' | 'assistant'—Message sender role
content*string—Message text content
createdAtstring—ISO timestamp
agentNamestring—Display name for assistant
isStreamingboolean—Show streaming indicator

MessageRowProps

PropTypeDefaultDescription
message*MessageRowData—Message data object
classNamestring—Additional CSS classes
import { MessageRow } from '@stackmates/ui-interactive/molecules';

<MessageRow message={{ id: '1', role: 'assistant', content: 'Hello!', agentName: 'Bot' }} />
<MessageRow message={{ id: '2', role: 'user', content: 'Hi there' }} />

MessageComposer

Textarea + send button. Enter sends, Shift+Enter for newline.

MessageComposerProps

PropTypeDefaultDescription
value*string—Current textarea value
onChange*(value: string) => void—Value change handler
onSubmit*() => void—Send handler
isLoadingbooleanfalseDisable input while sending
placeholderstring'Type a message...'Placeholder text
import { MessageComposer } from '@stackmates/ui-interactive/molecules';

<MessageComposer
  value={value}
  onChange={setValue}
  onSubmit={handleSend}
  isLoading={false}
  placeholder="Type a message..."
/>

EntitySelector

Pick entity from list with avatar initials and badges.

EntityItem

PropTypeDefaultDescription
id*string—Unique entity identifier
name*string—Display name
descriptionstring—Short description text
badgesstring[]—Tag labels (max 2 shown)

EntitySelectorProps

PropTypeDefaultDescription
entities*EntityItem[]—List of selectable entities
selectedIdstring—Currently selected entity ID
onSelect*(id: string) => void—Selection handler
classNamestring—Additional CSS classes
import { EntitySelector } from '@stackmates/ui-interactive/molecules';

<EntitySelector
  entities={[{ id: '1', name: 'Agent', description: 'Desc', badges: ['tag'] }]}
  selectedId={selected}
  onSelect={setSelected}
/>

StageCard

Workflow stage with status badge, duration, and confidence.

Research & Discovery
Knowledge Architect
8.5s92%completed
Strategy Analysis
Navigator
running
Content Generation
Orchestrator
pending
Data Validation
Navigator
3.2sfailed

StageCardData

PropTypeDefaultDescription
id*string—Unique stage identifier
name*string—Stage name
status*'pending' | 'running' | 'completed' | 'failed' | 'skipped'—Current stage status
agentstring—Agent handling this stage
durationMsnumber—Duration in milliseconds
confidencenumber—Confidence score 0-1

StageCardProps

PropTypeDefaultDescription
stage*StageCardData—Stage data object
classNamestring—Additional CSS classes
import { StageCard } from '@stackmates/ui-interactive/molecules';

<StageCard stage={{
  id: '1', name: 'Research', status: 'completed',
  agent: 'Architect', durationMs: 8500, confidence: 0.92
}} />

More molecules: Toast, Popover, DropdownMenu, Tabs, etc.

See COMPONENT-INVENTORY.json for full list