Inbox triage
ProA support inbox where a team assigns, snoozes, resolves and replies to customer conversations, with views, channels and tags in the sidebar and the customer's billing, tags and linked issue beside the thread. Bulk select rows, triage from the keyboard with J, K, E and H, and undo any move.
- A support desk or shared inbox where a team assigns, snoozes, resolves and replies to customer conversations.
- Product screens that need a list, the open conversation and customer context side by side, with keyboard triage.
- Use support-conversation for a single chat thread without a queue.
- Use notification-center for system notifications.
- Use swipe-actions for touch-first lists with gesture actions.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this pattern when messages need clear next actions. Connect the demo folder state to your own message service.
import { InboxTriage } from "@/components/arc/blocks/inbox-triage/inbox-triage"; export function SupportInbox() { return ( <div style={{ height: "100dvh" }}> <InboxTriage workspace="Acme" onConversationsChange={(list) => syncConversations(list)} /> </div> );}InboxTriage
A full support inbox screen inside the Arc screen shell. Queues (Inbox, Assigned to me, Unassigned, Snoozed, Resolved) lead the sidebar, followed by a Team section with each teammate's open load against capacity (click one to see their queue) and an availability switch at the foot; the page splits into a conversation list and the open conversation, and the shell's right panel shows the customer, Stripe billing with a refund action, priority, tags, a linked GitHub issue and past conversations. Assign, snooze, resolve, reopen, tag, set priority, reply or add internal notes, select rows for bulk actions, and undo any move from the toast. Every prop is optional; without props it runs on Fieldnote support sample data.
defaultConversationsTriageConversation[]–Starting conversations, each with a customer id, subject, channel (email, chat, x, github), status (open, snoozed, resolved), priority, tags, assignee, reply target in minutes and messages. Defaults to the Fieldnote sample.customersTriageCustomer[]–Customers referenced by conversations: name, email, avatar, company, plan, seats, MRR, invoices, local time and older conversations. An optional duplicateCharge shows a refund action in the panel.agentsTriageAgent[]–Teammates in the assign menu and the sidebar team list. The first one is the current agent unless currentAgent is set. An optional away string, such as "Back at 2 PM", replaces their load bar.tagsTriageTag[]–Tags with an Arc tone, drawn as Arc Badges with a meaningful icon (bug, billing, feature, onboarding, account) in the panel and the conversation header.currentAgentstring–Agent id of the person using the inbox, for Assigned to me, A and replies.workspacestring"Fieldnote"Workspace name in the sidebar switcher and the trail.onConversationsChange(conversations: TriageConversation[]) => void–Called with the full list after every triage action, reply, note, read, or undo.classNamestring–Class on the root, which fills its parent's height.- JorK, ArrowDownorArrowUp
- Next or previous conversation; arrows work while focus is in the list.
- Enter
- Opens the focused conversation (on phones, switches to it).
- E
- Resolves the conversation, or reopens it in Snoozed and Resolved. Acts on the selection when rows are checked.
- H
- Snoozes until tomorrow at 9:00 AM.
- A
- Assigns to you.
- X
- Checks the open conversation for bulk actions.
- RorN
- Focuses the composer in reply or internal note mode.
- Cmd/Ctrl+Enter
- Sends the reply or adds the note.
- /
- Focuses the conversation search.
- ?
- Opens the keyboard shortcuts dialog.
- Escape
- Clears checked rows, or goes back to the list on phones.
- The list is a set of buttons with a roving tab stop; the open conversation has aria-current, and unread rows say so in their name.
- Row checkboxes are Arc Checkboxes; the bulk bar has a select all checkbox with a mixed state.
- Assign, snooze, sort, saved reply and tag menus are Arc DropdownMenus (Radix) with arrow keys, Home, End and Escape, and return focus to their trigger.
- Every move is announced in a polite role="status" toast that offers Undo. Filters, reply mode and priority are Arc SegmentedControls; availability is an Arc Switch.
- The shortcuts dialog is modal, closes on Escape or the scrim, and returns focus. Resolving from the list keeps focus on the next row.
- The selected row fills in place instantly, never travelling between rows; the conversation crossfades only on pointer selection.
- Resolved and snoozed rows collapse on the smooth spring and undone rows open back in; filtering and search change rows instantly.
- Menus grow from their trigger, new messages rise 6px, the toast slides up on the snappy spring, and team load bars ease to their new share when conversations move.
- Buttons press to 0.97 and hover fills are instant. Reduced motion removes travel and crossfades and keeps every final state.
- The shell owns the frame: from 1080px the customer panel docks beside the page, below that it opens as a sheet from the header, and below 900px the sidebar becomes a sheet.
- Container queries on the page: at 680px and below the list and the conversation become one pane at a time with a back button; at 440px and below secondary labels and hints hide and rows drop the company.
- The list and the conversation scroll inside with hidden scrollbars and edge fades; the page never scrolls.
- Rows are not virtualized; page long queues from your backend.
- Edge fades update from scroll, resize and mutation observers without re-rendering.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use as a full support or email triage screen; it composes ScreenShell, so give the parent a definite height.
- Replace the sample data with your helpdesk records and persist changes from onConversationsChange; refunds, replies and issue creation are local simulations.
- Channels X and GitHub use Simple Icons marks and billing uses the Stripe mark; swap them for the channels you support.
The full library index for assistants is at /llms.txt.