# Inbox triage

> A 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.

- Type: Screen (a complete app view, installed as a block)
- Page: https://uiarc.dev/components/screens/inbox-triage
- Markdown: https://uiarc.dev/components/screens/inbox-triage/markdown

- Access: Arc Pro
- Registry id: `inbox-triage`
- Source file: `registry/blocks/inbox-triage/inbox-triage.tsx`
- Built from: Avatar, Button, Motion
- Keywords: react support inbox, helpdesk ui, email triage screen, shared inbox, ticket queue, customer support dashboard, assign snooze resolve

Use this pattern when messages need clear next actions. Connect the demo folder state to your own message service.

## When to use

- 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.

## When not to use

- 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

Inbox triage is part of Arc Pro. The live preview is public; the source and install command need Pro.

### CLI with a Pro token

1. Create a token in your account and set it in the environment (or `.env.local`). Never commit it.

```bash
export ARC_PRO_TOKEN=arc_pro_...
```

2. Add the Pro registry to `components.json`:

```json
{
  "registries": {
    "@uiarc": "https://uiarc.dev/r/{name}.json",
    "@uiarc-pro": {
      "url": "https://uiarc.dev/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${ARC_PRO_TOKEN}"
      }
    }
  }
}
```

3. Install:

```bash
npx shadcn@latest add @uiarc-pro/inbox-triage
```

### Manual

Signed-in Pro members can copy the source from the Manual tab on the docs page.

- Plans: https://uiarc.dev/pricing
- Create a Pro token: https://uiarc.dev/account#pro-access
- Setup guide: https://uiarc.dev/docs/ai#pro-access

## Usage

```tsx
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>
  );
}
```

## API reference

### 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.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultConversations` | `TriageConversation[]` | – | 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. |
| `customers` | `TriageCustomer[]` | – | 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. |
| `agents` | `TriageAgent[]` | – | 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. |
| `tags` | `TriageTag[]` | – | 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. |
| `currentAgent` | `string` | – | Agent id of the person using the inbox, for Assigned to me, A and replies. |
| `workspace` | `string` | `"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. |
| `className` | `string` | – | Class on the root, which fills its parent's height. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| J / K, ArrowDown / ArrowUp | 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. |
| R / N | 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. |

## Accessibility

- 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.

## Motion

- 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.

## Responsive behavior

- 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.

## Performance

- 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

- 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.

## Related

- [Support conversation](https://uiarc.dev/components/screens/support-conversation/markdown): A helpdesk conversation screen with inbox views, a live chat thread with notes and shared screenshots, and a composer for replies, notes, saved replies, articles and dropped files. The customer panel shows their profile, connected apps, linked issue, past conversations and an activity timeline.
- [Notification center](https://uiarc.dev/components/blocks/notification-center/markdown): A home for updates with read state, grouped information, and animated disclosure.
- [Sidebar: Inbox](https://uiarc.dev/components/blocks/sidebar/markdown): A mail sidebar whose Compose button grows into a composer and whose folders take dropped mail.
- [Swipe actions](https://uiarc.dev/components/swipe-actions/markdown): Reveal row actions with a swipe, or from the same actions in a menu.

## Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt