Chat

Unified bar — the conversational surface for human + agent interaction. Three states: Collapsed (floating chip with idle / typing indicator), Expanded (drawer with feed + filter + input), Fullscreen (takes over the viewport for long-form review). Lives outside the canvas so every workspace surface can dispatch into it without unmount/remount.

binds_to: claude-code, open-codedensity: comfortablesource: chemistry/shell/triform-chat/src/

Sketch

Structural preview of the panel chrome. The browser panel renders the real BrowserChrome primitive at miniature scale; the other variants are CSS shape silhouettes. Either way the composition tree below is the authoritative description of what's inside.

Chatchemistry/shell/triform-chat/src/existing

States

  • collapsed_idleFloating chip — no recent activity
  • collapsed_floatingFloating chip — recent activity (un-idle pulse)
  • expandedDrawer open — feed + filter + input visible
  • fullscreenBar takes over the viewport for long-form review
  • streamingAgent is currently streaming a response
  • question_pendingAgent has asked a question, waiting for human input
  • emptyNo conversation yet — pick a companion to start

Composition

Click any component name to jump to its component-page entry.

BarShellouter3-state outer wrapper (collapsed / expanded / fullscreen). Owns CSS class computation, the header collapse-fullscreen controls, and the body / filter / input layout. Platform-agnostic — portal and mobile both mount it directly.
FilterBarchromeFilter strip — mode pills (All / Activity / Human) + scope pills (Channel / DM / Direct) + search input. Drives FilterMode + FilterScope on UnifiedEntryView.
ChatFeedcontentScrollable unified feed. Iterates UnifiedEntry list and dispatches each via UnifiedEntryView. Sticky scroll-to-bottom with auto-pin on incoming streaming. Pins to bottom unless the user has scrolled up — a pause indicator surfaces incoming messages without ripping focus.
UnifiedEntryViewcontentTop-level dispatcher — branches on UnifiedEntry variant (Chat, Activity, Celebration, Ephemeral). Activity and Chat are the heavy renderers; Celebration is a one-off card.
ChatEntryViewcontentChatEntry dispatcher — branches on ChatEntryKind. One arm per kind (Message, Streaming, Thinking, ToolCall, StepProgress, Question, Activity).
MessageBubblecontentStandard message rendering — markdown body, role-keyed bubble color (user vs agent), header (avatar + name) controlled by hide_sender.
StreamingTextcontentLive token-streaming bubble. Subscribes to a StreamingAccumulator that consumes ChannelEnvelope tokens off the WS. Cursor pulses while streaming; resolves to MessageBubble shape on completion.
ThinkingBlockcontentFoldable 'thinking' surface — agent's internal reasoning. ThinkingAccumulator owns the buffer; ReasoningFold collapses by default with a count summary.
ToolCallCardcontentTool-call invocation row — tool name, arguments preview, result preview. ToolCallTracker matches start/end events into a single card.
StepProgressViewcontentMulti-step automation progress strip — one chip per step with state (pending / running / done / failed). Expands inline to show step output / error.
QuestionCardcontentAgent-asks-user question — input affordance for free-text or a structured QuestionCardRich (multiple-choice, yes/no, schema-backed).
ActivityCardcontentInline activity event (CRM activity, board card move, etc.). Flat representation — for rich detail renderers go through ActivityEntryView.
ActionProposalCardcontrolAgent-proposes-action — preview the proposed mutation with Approve / Reject affordances. Approval flips through the agent, not the chat directly.
CelebrationCardcontentProgression celebration — 'You unlocked X' animated card. prefers-reduced-motion suppresses the animation; the card itself stays visible.
ChannelSidebarrailSession list — active conversation threads grouped by channel. Click switches the active session; long-press opens session settings. Only visible in Fullscreen state on desktop.
TeamSidebarrailTeam / agent presence column — who's online, what they're working on. Mobile flips to TeamSidebarMobile with an inline drawer trigger.
CompanionPickercontrolAgent selection popover — anchored to the bar header. Pickable companions come from the brain registry (chemistry/elements/intelligence/brains/), routed through generated dispatch — element-agnostic.
InputAreacontrolBottom input strip — textarea with auto-grow + send button + typing indicator. Send invokes a callback prop (platform-specific path); typing indicator subscribes to BarState + remote-typing channel envelopes.
FloatingMessagesoverlayGame-chat-style transient messages floating across the workspace when the bar is collapsed. Each message fades after a few seconds; click expands the bar with that message scrolled into view.
MessageActionsBaroverlayHover actions on a message bubble — copy / quote / regenerate / report. Anchored to the bubble; hidden under prefers-reduced-motion suppression rules.

Uses Components

Flat list of every component referenced — verifiable against the composition tree by the future generator audit.