Mail Navigation

The left column of a mail client agents work in too: account, compose and search, folders with quiet counts, smart views written as sentences (hover shows the query an agent would run, + compiles a new one as you type), each agent with a dot when it needs you and a pause control, and an Agent view row. Folds into an icon rail with ⌘B.

Tags: mail sidebar navigation agents smart-views collapsible
Dependencies: lucide-react(npm, opens in a new tab)
Installs with: @assembli/avatar @assembli/tooltipui/buttonui/inputui/kbd

Props

Other props pass through to the root element.

account
{ name: string; email: string; avatar?: string }
Default { name: "Ines Moreau", email: "ines@larkspur.co" }
current
string
Default "inbox"
The open destination: a folder id, view:<id> or agent:<id>.
onNavigate
(id: string) => void
counts
Partial<Record<FolderId, number>>
Default {}
Counts per folder (unread for Inbox, totals elsewhere).
views
SmartView[]
Default []
Saved searches. The section shows only when there are some.
pages
NavPage[]
Default []
Destinations listed above the folders. current matches their id.
agents
NavAgent[]
Default DEFAULT_AGENTS
onAction
(action: MailAction) => void
pause_agent, resume_agent, create_view, compose, switch_account, search, agent_view, all with a human actor.
onSearch
() => void
Called by the Search row (also emitted as search). Wire it to a command bar.
onAgentView
() => void
Shows an "Agent view" row at the foot of the nav (also emitted as agent_view).
agentViewOpen
boolean
Whether the agent view is open, for the row's pressed state.
toQuery
(sentence: string) => string
Default sentenceToQuery
Turns a sentence into a search query for "New view". The default knows a handful of phrases.
actorName
string
The person acting, for actor on emitted actions. Defaults to the account name.
collapsed
boolean
defaultCollapsed
boolean
Default false
onCollapsedChange
(collapsed: boolean) => void

Props
			Description
account	{ name: string; email: string; avatar?: string }	{ name: "Ines Moreau", email: "ines@larkspur.co" }
current	string	"inbox"	The open destination: a folder id, `view:<id>` or `agent:<id>`.
onNavigate	(id: string) => void	–
counts	Partial<Record<FolderId, number>>	{}	Counts per folder (unread for Inbox, totals elsewhere).
views	SmartView[]	[]	Saved searches. The section shows only when there are some.
pages	NavPage[]	[]	Destinations listed above the folders. `current` matches their `id`.
agents	NavAgent[]	DEFAULT_AGENTS
onAction	(action: MailAction) => void	–	`pause_agent`, `resume_agent`, `create_view`, `compose`, `switch_account`, `search`, `agent_view`, all with a human actor.
onSearch	() => void	–	Called by the Search row (also emitted as `search`). Wire it to a command bar.
onAgentView	() => void	–	Shows an "Agent view" row at the foot of the nav (also emitted as `agent_view`).
agentViewOpen	boolean	–	Whether the agent view is open, for the row's pressed state.
toQuery	(sentence: string) => string	sentenceToQuery	Turns a sentence into a search query for "New view". The default knows a handful of phrases.
actorName	string	–	The person acting, for `actor` on emitted actions. Defaults to the account name.
collapsed	boolean	–
defaultCollapsed	boolean	false
onCollapsedChange	(collapsed: boolean) => void	–