1 · Channels — seven colors (full composer)
Text · blue (.sb-composer--text) — schedule caret
Agent
Compose a message or use a Template
Chat · Website — presence cell renders (we host the widget)
Agent
On the page now
Reply in the chat thread…
Chat · Facebook — NO presence cell (Meta exposes no presence signal)
Agent
Reply in the chat thread…
Email · purple (.sb-composer--email) — subject row · schedule caret
Note · orange (.sb-composer--note) — internal
Agent
Leave an Internal Note….
Log · indigo (.sb-composer--log) — event row
Agent
04/22/2026
Describe the event…
DAISI · yellow (.sb-composer--daisi)
Assist5m 36s
Tell DAISI to do something for this customer…
Email subject is required on send (validation ruling, 09-02): the Subject row is drawn as-is; the send button stays disabled until the subject carries text — an email with no subject never leaves the composer. Chat is channel #7, in pink — .sb-composer--chat{--cp-body:var(--pink-02)} + .cp-tab--chat.on{color:var(--pink-01);border-color:var(--pink-01)}, exactly parallel to the other six. Pink is the one accent pair with no assigned meaning, so it costs no existing semantic. The mark is fa-comments (two overlapping bubbles): fa-comment-alt-dots is taken by comm.text (SMS) and fa-comment-dots is the Text-Sent activity icon, so either single-bubble form reads as SMS — the plural reads as a live two-party conversation, which is the distinction a rep needs at a glance. Chat sits directly after Text, beside its messaging siblings rather than appended after Call. The tab strip stays neutral grey — only the body region tints — and there is still ONE universal blue send; no chat-specific send button. Seven-tab observation: at the narrow breakpoints with the widest DAISI pill (Assist + countdown) showing, the staged collapse still holds — labels shed to icon-only at the existing stage and the strip does not wrap, because the container query sheds the whole label set at once rather than per-tab. Nothing was retuned. The Chat body reuses the Log channel's .cp-logrow / .lg-cell row — no new atom. First cell is the sub-channel (pink, chevron): Website / Facebook / Instagram. It is not a free chooser — it defaults to the channel of the customer's last inbound chat message and only offers channels where an open thread exists. The second cell carries the live insight, channel-honest: for Website we host the widget, so we genuinely know presence — green dot "On the page now", or "Left the page · 2:14 PM". For Facebook/Instagram Meta's API is webhook/event based with no presence signal, so the presence cell is hidden entirely — not greyed, not faked with a stamp. The channel cell renders alone.
2 · Mobile collapse — Insert toolbar hidden until focus
collapsed — tabs + mode pill + field + send (no Insert row)
Agent
Compose a message or use a Template
focus field
focused — Insert toolbar revealed (:focus-within)
Agent
Saturday at 11 works great — see you then.
On mobile the Insert toolbar is hidden until the compose field is focused (:focus-within).
3 · DAISI mode — pill lifecycle (.sb-daisi-pill)
Off (gray)
Off
enable assist
Assist (orange) · countdown
Assist5m 36s
switch to agent
Agent (green) · idle
Agent
run starts
Agent · red run-dot (click to cancel)
Agent
Three modes — Agent, Assistant and Off — mapping to the backend values full, internal and disabled. Assistant can be paused for a set duration and the badge shows a live countdown. An in-progress run shows an indicator whose tooltip explains DAISI is working in the background; clicking it cancels the run. Switching from Agent to Assistant or Off cancels the autoresponder and any active agent run — the anti-double-talk rule, and the reason this control exists. When an Assistant pause expires the autoresponder wakes again. The whole surface respects the DAISI and background-agent feature flags.
4 · Call mode — one green Call button; the live call runs in the floating call card; Log is the manual backup (Call = channel #6, green) (CANONICAL — mirrors QA 1395973)
Call mode — one green button that dials; no fields, no toolbar, no send
Agent
hover / pressed
Agent
mobile width (390)
Agent
The label is "Call " + the number, masked +1 (###) ###-####. Runtime output is UNVERIFIED. Button: green-01 fill with a --white label (white in light, #1E1E1E in dark); 40 tall, pad 8/20, r5; a 12px phone glyph in a 24 box. Hover / pressed: green-02 fill + 1px green-01 border + green-01 text. The body is 80 (pad 20/16) on the green-02 wash, with no fields, toolbar or send. With Twilio, one tap starts the call in the floating call card (comp-phone-call-states.html). With GoTo on mobile, the tap opens the GoTo dialer. Otherwise a confirm opens: "CALL +1 (313) 555-0198?" / "This will open your device's phone app to make the call." / CALL · NEVERMIND, then tel:. With no dialer: "No apps found on your device that can make a phone call." The composer never changes after the tap: no live state, no wrap-up, no switch to Log. The only motion is the composer's 200ms height change when switching modes.
off-system call
LOG — the manual backup (type=Call)
Agent
04/22/2026 05:03 PM
Confirmed the 36/10k terms — sending the quote after we hang up. Call 2m 41s.
opt-out — the Call tab stays selectable; the body explains instead of dialing
Agent
Do Not ContactThis customer has opted out of phone calls.
The opt-out check runs before the phone check. The Call tab keeps its normal phone icon and stays selectable. The view is untinted: the host's background, presumed --white (UNVERIFIED per host). About 84 tall. Text and Email opt-out are not covered by this specimen; how the app handles them is UNVERIFIED (not audited).
no phone — Add Phone for users who can edit the customer
Agent
No PhoneTo call this customer add a phone number to their profile.
Add Phone shows only with permission to edit the customer; without it, it is hidden, not disabled. Tapping it loads the customer and opens Edit Customer Info. About 132 tall.
Ruling: Call is channel #6 (green). The composer's Call mode mirrors QA (CPO 2026-09-29): one green .cp-callbtn — no fields, no toolbar, no send; the live call never lives in the composer — it runs in the floating call card (comp-phone-call-states.html). Opt-out and no phone keep the Call tab selectable and show the not-available view. Retired 09-29: the in-composer live state (waveform, timer, mute/speaker, End), the audio-device picker, the Call Pill and the busy-disabled Call tab.
6 · Chat availability — available / can't initiate / visitor gone
a · Available — Facebook chat with an open thread, normal compose
Reply in the chat thread…
b · Can't initiate — no open chat thread; chat is inbound-initiated only, so the Chat tab is disabled
Compose a message or use a Template
c · Visitor gone — website chat, tab closed; no destination for a reply
Visitor left the site. A website chat has nowhere to deliver once the tab is closed — reach them on another channel, or leave a Note.
Two availability states no other channel has. Chat is inbound-initiated only — a rep cannot start a thread, so when none is open the Chat tab takes the .is-disabled treatment (permanent-for-now: nothing the rep does opens it; the customer must message first). Visitor gone (website) is different — a missing destination, not an opt-out: the tab stays live and the body carries a notice, distinguished by icon (fa-comment-slash) and copy, because a website chat has nowhere to deliver once the tab is closed but the rep can still reach the customer another way or leave a Note.

Engineer reference. Every instance above is a live locked atom forced into its state via the existing modifier/state classes — no new atoms, tokens byte-identical. Channels: the active .cp-tab--{ch}.on + root .sb-composer--{ch} carry the channel color (Text blue · Email purple · Note orange · Log indigo · DAISI yellow · Call green); tab strip stays gray-07, body tints to the channel -02. Mobile collapse uses .sb-composer--compact with the Insert toolbar gated on :focus-within (forced here via .st-collapsed/.st-focused so both ends of the flow are visible at once). DAISI mode: --off/--assist/--agent set the pill color; the left dot goes red & pulsing (.dp-dot.is-running) while a run is processing. Log-type color is the inline status hue (green "Call"), not a separate atom — so there is no distinct "log types" variant group. Call (channel #6, green): one labeled green .cp-callbtn — no fields, no toolbar, no send; the composer never changes after the tap — the live call runs in the floating call card (.sb-callcard, comp-phone-call-states.html). Opt-out and no phone: the Call tab stays selectable and the body shows .cp-na. Log is the manual backup for off-system calls.