Web UI

Octipus includes a full-featured web UI built with Next.js 14, React 18, and Tailwind CSS.

Pages

Page	Path	Description
Dashboard	/	System status, health overview, agent summary
Login	/login	Authentication with password, passkey, or TOTP
Chat	/chat	Interactive chat with agents, persistent sessions, voice input
Agents	/agents	List all agents (including orchestrators), auto-refresh every 2s
Agent Detail	/agents/:id	Real-time event timeline (thought/action/observation), 1.5s polling
Models	/models	Model configuration with provider dropdowns, topic roles, auto-detect
Pipelines	/pipelines	Create and manage pipeline templates
Skills	/skills	Skill management and permission overrides
MCP	/mcp	MCP server connections
Hooks	/hooks	Create and manage automation hooks
Secrets	/secrets	Vault credential management
Evaluation	/eval	Eval results dashboard with comparison matrix and red-team view
Settings	/settings	Provider API keys, 2FA setup, notification preferences

Key Features

Chat Persistence

Chat sessions are persisted across page reloads:

• The session ID is stored in localStorage
• Messages are restored from the backend on page load via GET /sessions/:id/messages
• All messages (including casual conversations) are persisted to the database

Agent Monitoring

The Agents page provides real-time visibility into all running agents:

• Agent list: All agents (including orchestrators) with status, type, and creation time
• Auto-refresh: List refreshes every 2 seconds
• Agent detail: Click any agent to see its real-time event timeline
• Event types: Thought, action, observation, and error events displayed chronologically
• Controls: Stop running agents or remove completed ones

Model Management

The Models page provides a comprehensive model configuration interface:

• Provider dropdowns: Select from Ollama, OpenAI, Anthropic, Gemini, LiteLLM, or CLI
• Auto-detection: Ollama models auto-detected, LiteLLM models listed
• Known models: Pre-populated model lists for cloud providers
• Topic roles: Assign primary and backup models per topic
• Default model: Set the system-wide default model
• Health status: View provider health and latency

Evaluation Dashboard

The Evaluation page (/eval) provides a visual interface for reviewing agent evaluation results:

• Comparison matrix: Side-by-side results across models and eval suites
• Charts: Pass/fail rates, latency distributions, and token usage over time
• Regression detection: Highlights when a model’s performance drops compared to previous runs
• Red-team view: Dedicated panel for red-team test results with attack category breakdowns
• Suite filtering: Filter by eval suite, model, or assertion type

Notification System

• Notification bell: Unread count badge in the header
• Event sources: Agent completion/failure, pipeline updates, approval requests
• Mark read: Mark individual or all notifications as read

Dashboard

The dashboard provides an at-a-glance system overview:

• System health: Backend, database, Redis status
• Agent overview: Running, completed, and failed agent counts
• Service status: Provider health indicators

Design System

The web UI uses a consistent design system:

• Card design: ring-1 ring-gray-200/60 dark:ring-gray-700/60 with rounded-xl
• Dark mode: Full dark mode support with dark:bg-gray-800/90
• Page headers: Icon accent block pattern for consistent header design
• Color tokens: bg-primary-600 for interactive elements
• Responsive: Works on desktop and tablet viewports

Starting the Web UI

The web UI starts automatically with assistant start. To run it separately:

cd web && bun run dev    # Development mode with hot reload
cd web && bun run build  # Production build
cd web && bun run start  # Start production build

The web UI runs on port 3007 by default (configurable via WEB_PORT).