UI guide

This page walks through the Cere Insight 2.0 shell: menu groups, which routes they hit, and who sees what. The app uses Next.js App Router. Auth routes (/login, /register, /forgot-password) skip the main shell so sign-in screens stay minimal.

Screenshot

Full-width sidebar + navbar here; a second image with collapsed (icon-only) mode is ideal.

Session and shell

• Signed-in content renders inside AppLayout: sidebar, top navbar, and page body.
• Signed-out requests are redirected to /login by middleware (except public auth paths).
• Session cookie name: access_token — middleware only reads cookies; other storage is client-side.

See Authentication.

Left sidebar — groups

Order follows src/components/sidebar.tsx:

Main

Item	Route	Note
Home (Dashboard)	/	Org snapshot

Features

Item	Route
Projects	/projects
Knowledge bases	/knowledge-bases
Analytics agents	/analytic-agents
Orchestration	/orchestration

Reports (expandable)

Top click goes to /reports/overview; two groups:

Agent-side reports:

• Overview → /reports/overview
• Conversations → /reports/conversations
• Agents → /reports/agents
• Labels → /reports/labels
• Inboxes → /reports/inboxes
• Teams → /reports/teams
• Project → /reports/bot

User-side reports:

• Contact reports → /reports/users (detail /reports/users/[contactId])

Organization and billing

Item	Route
Organization	/organizations
Subscription	/subscription

Super admin extra

Visible only when user.role === SUPERADMIN:

Item	Route
Messaging environment instances	/chat-platform-instances

Sidebar behaviors

• Collapsed: icons only; title attributes show tooltips.
• Footer control: expand/collapse (ChevronLeft / ChevronRight).
• Active state: exact path match or (under reports) prefix rules.

Top navbar

Typical items:

• Organization switcher — dropdown when multiple memberships; successful switch calls the API switch route and invalidates React Query caches.
• Profile — /profile, sign-out.
• Language — via LanguageProvider / src/lib/i18n.
• Theme — next-themes (light/dark/system).

Google sign-in wraps the tree with GoogleOAuthProvider.

Providers and data

• TanStack Query — server state; default staleTime ~1 minute, refetch-on-focus may be off.
• Toaster — sonner for toasts (e.g. org switched).

Profile and permissions

• /profile for personal info and language.
• /organizations for membership roles and invites.

Responsive and a11y

• Narrow widths often use a drawer/hamburger (depends on layout).
• The board uses zoom/pan; watch touch/scroll conflicts.
• Important controls use aria-label (e.g. org switcher).

FAQ

No “messaging environment” menu: your account is not SUPERADMIN — expected.

Reports submenu “missing”: expand the parent Reports row; the chevron shows state.

Language sticky: refresh or check profile language field if backend-synced.

Next steps

• Dashboard
• Project management
• Concepts and architecture