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

View Conversations

Lists conversations across all agents with filters. 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.

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