Skip to main content

​
Top Navigation Bar

The persistent top bar appears on every authenticated page.
The back arrow uses browser history, not a hardcoded route. If the user arrived via deep link, the back arrow goes to the main dashboard.
A compact search input embedded in page headers for filtering visible content.
Collapsed to icon-only or short width. Border: --color-border. Background: --color-white.
The primary navigation menu contains 10 items organized by function.
1

Create Agent

Opens the agent creation wizard. Icon: Plus. Appears at the top as a primary action.
2

Manage Users

Lists organization users with role management. Icon: Users.
3

Manage User Groups

Groups users into permission sets. Icon: Users-group.
4

Manage Agents

Lists all agents with status, search, and bulk actions. Icon: Bot.
5

Conversations

One destination for every conversation — Overview, the shared Inbox (live, escalated, awaiting approval and resolved, as overlapping view chips) and operator Settings. Replaced the separate Operator and Chat History entries. Icon: Message-circle.
6

Knowledge Bases

Manages document collections and Instagram content for RAG. Icon: Database.
7

Billing and Invoices

Shows credit usage, invoices, and payment history. Icon: Credit-card.
8

Plans and Pricing

Displays available plans and upgrade options. Icon: Tag.
9

My Account

Personal profile, password, and notification settings. Icon: User.
10

Settings

Organization-level settings, integrations, and API keys. Icon: Settings.
“Create Agent” is visually separated from the rest of the menu as the primary action. It uses --color-brand-orange as an accent to draw attention.

​
Manage Agent Submenu (7 Tabs)

When viewing or editing a specific agent, a horizontal tab bar provides access to seven configuration sections.
Tabs render as a horizontal scrollable bar on smaller screens. The active tab uses a 2px bottom border in --color-navy and bold text.
Preserve unsaved changes when switching tabs within the same agent. Use a dirty-state indicator (dot or asterisk) on tabs with unsaved edits.
Never silently discard form changes on tab switch. Either auto-save or prompt the user to save/discard.
The single primitive for in-page sub-navigation is <TabNav> (apps/web/src/components/ui/TabNav.tsx). It replaced five incompatible hand-rolled variants (border-b-2 underline rows, rows of <Button> used as view switchers, a hardcoded-color segmented control, and copy-pasted mobile dropdowns) — never hand-roll another one. It is a segmented control: items sit in a track (--muted-chip background, --neo-border border, --radius-lg, p-1 padding). The active item renders as a raised white chip with a --neo-border border, --shadow-sm, 600-weight text in --text-primary. Idle items are --text-muted, turning --text-primary on --bg-subtle on hover. Items are h-11 below md and h-9 from md up, giving a 44px touch target on mobile.

​
Two modes, picked automatically

In route mode, an exact pathname match always wins over a startsWith match, so an index route (e.g. /admin, /operator) needs match: "exact" on its item — otherwise it would also claim its own child routes. In state mode, pass panelId (the id of the role="tabpanel" element the tabs control) so the tab buttons can point at it via aria-controls.

​
Mobile behavior

Below md, the control either scrolls horizontally (mobileMode="scroll", the default) or collapses into a built-in dropdown (mobileMode="dropdown"). Use the dropdown for 5+ items or long labels — it is the same dropdown across every call site, so there is no longer a reason to copy-paste a bespoke one.

​
Other props

  • trailing — a right-aligned escape hatch rendered outside the track, for a link that isn’t one of the tabs (e.g. a “view all” link).
  • items[].icon / items[].badge — optional leading icon and trailing count/indicator per item.
  • items[].disabled — removed from keyboard roving focus and click handling.
<Breadcrumbs> (apps/web/src/components/layout/Breadcrumbs.tsx) renders globally in (dashboard)/layout.tsx, above every page’s PageHeader — individual pages never render their own. It now renders on every dashboard route, including top-level ones (⌂ › Agents), not just nested routes. The only exclusion is /home: Breadcrumbs returns null when there are no path segments or the first segment is "home", since /home is the breadcrumb root itself and a ⌂ › Home crumb would just repeat the icon. Segment labels come from ROUTE_LABELS (a lookup of known path segments to display text) with a title-case fallback ("audit-log" → "Audit Log") for everything else. Only add an entry to ROUTE_LABELS when that fallback is wrong — e.g. view is mapped to "Explorer" because /knowledge/:id/graph/view is the Graph Explorer, and a crumb reading “View” says nothing.

​
Knowledge Base View Panel

A side panel or main content area for browsing knowledge base files.

​
Category Dropdown

A dropdown filter at the top of the panel with three options: A header search bar (see above) scoped to the current knowledge base and active category filter.

​
File List

Each file shows: icon (by type), file name (truncated at 40 chars), size, and upload date. Single row per file. Click to expand.

​
Conversations View Panel

The main interface for reviewing agent conversations across the organization.

​
Filters

​
Conversation List

Each conversation row displays: Conversations are sorted by most recent activity by default.

​
Conversation Window

The full conversation view opened by selecting a conversation from the list.

​
Message Thread Layout

Show timestamps on every message. Group consecutive messages from the same sender with reduced spacing but keep individual timestamps visible on hover.
Never truncate message content in the conversation window. Render the full message with proper markdown formatting.