> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brainstormer.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Neo Navigation Patterns
> Top navigation, menus, submenus, view panels, and conversation windows in the Neo design system.
## Top Navigation Bar
The persistent top bar appears on every authenticated page.
| Element | Position | Behavior |
| ---------------- | ------------------ | -------------------------------------------------------------------------------------------------------------- |
| Back Arrow | Left | Navigates to previous page in history. Hidden on root-level pages. |
| Page Title | Left (after arrow) | Displays current page or section name. Uses `--type-heading-sm`. |
| Theme Toggle | Right | Switches between light and dark mode. Icon-only button. |
| Profile Dropdown | Far right | Avatar circle (32px, `--radius-full`). Clicking opens a dropdown with account, settings, and sign-out options. |
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.
***
## Header Search Bar
A compact search input embedded in page headers for filtering visible content.
| Property | Value |
| ------------- | -------------------------------------------------------------- |
| Height | 36px |
| Border radius | 5px (`--radius-md`) |
| Icon | Search (20x20), left-positioned inside input |
| Placeholder | Context-specific (e.g., "Search agents...", "Search users...") |
Collapsed to icon-only or short width. Border: `--color-border`. Background: `--color-white`.
Expands to full width (up to 320px). Border: 2px `--color-purple`. Search icon remains. Results filter in real-time below the search context.
***
## Main Menu
The primary navigation menu contains 10 items organized by function.
Opens the agent creation wizard. Icon: Plus. Appears at the top as a primary action.
Lists organization users with role management. Icon: Users.
Groups users into permission sets. Icon: Users-group.
Lists all agents with status, search, and bulk actions. Icon: Bot.
Lists conversations across all agents with filters. Icon: Message-circle.
Manages document collections and Instagram content for RAG. Icon: Database.
Shows credit usage, invoices, and payment history. Icon: Credit-card.
Displays available plans and upgrade options. Icon: Tag.
Personal profile, password, and notification settings. Icon: User.
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.
| Tab | Purpose |
| -------------------- | ------------------------------------------------------------- |
| Agent Info | Name, description, avatar, public URL, basic metadata |
| Prompt Configuration | System prompts, guardrails, prompt types, temperature |
| Prompt Evaluation | Test prompts against evaluation criteria, view scores |
| Conversations | Browse conversations specific to this agent |
| Voice Configuration | Voice cloning settings, ElevenLabs integration |
| Try Chat | Live preview chat with the agent using current configuration |
| Publish | Version management, draft/published status, approval workflow |
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:
| Option | Description |
| --------- | ------------------------------------------------------- |
| All Files | Shows all uploaded content regardless of type |
| Documents | Filters to PDFs, DOCs, TXTs, and other document formats |
| Instagram | Filters to Instagram posts and media |
### Search
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.
Expands below the file row to show: full file name, chunk count, processing status, preview (first 200 chars of content or image thumbnail), and action buttons (View, Re-process, Delete).
***
## Conversations View Panel
The main interface for reviewing agent conversations across the organization.
### Filters
| Filter | Type | Description |
| ---------------- | -------- | --------------------------------------------------- |
| Agent | Dropdown | Filter conversations by specific agent |
| Flagged Messages | Toggle | Show only conversations containing flagged messages |
### Conversation List
Each conversation row displays:
| Element | Description |
| ------------------ | ---------------------------------------------------- |
| Conversation title | Auto-generated or user-defined title |
| Agent name | Which agent handled the conversation |
| Message count | Total messages in the thread |
| Timestamp | Last message time (relative: "2h ago", "Yesterday") |
| Flag indicator | Orange dot if conversation contains flagged messages |
Conversations are sorted by most recent activity by default.
***
## Conversation Window
The full conversation view opened by selecting a conversation from the list.
| Element | Position | Description |
| ------------------ | ---------------------- | --------------------------------------------- |
| Conversation Title | Top left | Editable title, `--type-heading-sm` |
| Source Identifier | Top left (below title) | User name or session ID |
| Source Type | Top right | Badge showing channel (Web, API, Widget) |
| Message Thread | Main area | Chronological message bubbles with timestamps |
### Message Thread Layout
| Sender | Alignment | Style |
| --------------- | -------------- | -------------------------------------------------------------------------- |
| User messages | Right-aligned | `--color-bg-light` background, `--radius-lg` corners |
| Agent messages | Left-aligned | `--color-white` background, `--color-border` border, `--radius-lg` corners |
| System messages | Center-aligned | `--type-caption`, `--color-disabled` text, no bubble |
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.