Web Dashboard

The web dashboard is a React single-page application served from the Gateway. It provides a graphical interface for managing agents, conversations, skills, channels, and security — all from your browser.

Layout

The dashboard uses a three-panel layout:

┌──────────┬────────────────────────┬──────────────┐
│          │       Top Bar (56px)    │              │
│ Sidebar  ├────────────────────────┤  Right Panel │
│ (260px)  │                        │   (320px)    │
│          │     Main Content        │  Collapsible │
│  Nav     │                        │              │
│          │                        │              │
└──────────┴────────────────────────┴──────────────┘

Component	Purpose
Sidebar	Navigation with page links, agent list, skill list
Topbar	Header with user profile, settings, and account menu
Main Content	Active page content
RightPanel	Collapsible detail panel (context-sensitive)

Pages

Chat

The primary interface. Features a persistent prompt bar for conversing with agents in real time.

• Real-time streaming — messages appear as the agent generates them via SignalR
• Tool call cards — expanding cards show skill execution details (name, status, duration, result)
• Typing indicators — visual feedback while the agent is processing
• Welcome state — quick action buttons for common operations on first load
• Agent switching — chat with different agents via /chat/{agentId} routes

Agents

Create, configure, and monitor AI agents:

• Agent list — all agents with status indicators (online, offline, error)
• Configuration — edit system prompts, models, enabled skills, allowed channels
• Metrics — per-agent session count, message count, tool call count, uptime
• Quick create — scaffold a new agent with defaults

Skills

Browse and manage installed skills:

• Installed skills — view enabled/disabled status, toggle per-agent
• Skill details — version, publisher, permissions, description
• Permission management — grant/revoke permissions when installing

Marketplace

Browse the skill catalog at /marketplace:

• Category browsing — filter by CRM, communication, scheduling, finance, etc.
• Search — full-text search across skill names and descriptions
• Skill detail pages — publisher info, version history, permission summary
• One-click install — install and configure skills directly from the marketplace

Channels

Configure messaging channel adapters:

• Channel list — all configured channels with connection status (connected, pending, disconnected)
• Configuration — webhook URLs, API keys, bot tokens
• Connectivity test — verify channel connections work end-to-end
• Channel icons — visual indicators for each platform

Security

Security dashboard at /security:

• Prompt injection events — recent detection events with details
• API token management — create, revoke, and rotate API tokens
• MFA configuration — multi-factor authentication settings
• Security overview — summary metrics and threat indicators

Audit Log

Full audit trail viewer at /audit:

• Event stream — chronological list of all audited actions
• Filtering — filter by event type, actor, agent, time range
• Search — full-text search across audit entries
• Export — download audit data for compliance reporting

Settings

Platform configuration at /settings:

• User profile — name, email, avatar
• AI provider keys — configure API keys for model providers
• Theme — dark/light mode preferences
• Billing — subscription and usage information

Login

Authentication page at /login:

• Email and password login
• Token stored in session storage
• Protected routes redirect to login when unauthenticated

Real-Time Communication

The dashboard connects to the backend via SignalR for live updates:

Event	Direction	Description
SendMessage	Client → Server	Send a message to the current agent
ReceiveMessage	Server → Client	Agent response with content and message ID
AgentTyping	Server → Client	Typing indicator (agent ID, isTyping flag)

Connection details:

• Endpoint: /hubs/chat (WebSocket upgrade)
• Authentication: JWT Bearer token
• Users grouped by user ID (from JWT sub claim)
• Reconnection: exponential backoff at 0s, 2s, 5s, 10s, 30s

State Management

Store	Library	Persistence	Purpose
Auth	Zustand	sessionStorage	User, token, isAuthenticated
Chat	Zustand	In-memory	Active agent/session, messages, typing state
UI	Zustand	In-memory	Sidebar state, panel visibility
Server state	TanStack Query	Cache	Agent configs, skills, channels, audit logs

The auth store persists to sessionStorage under the key komand-auth, so login state survives page refreshes but not browser restarts.

API Client

The frontend uses a typed fetchApi<T>() wrapper that:

• Injects the Authorization: Bearer {token} header from the auth store
• Generates a unique X-Request-Id for correlation tracing
• Unwraps the ApiResponse<T> envelope, returning data on success
• Throws with the error message on failure
• Uses VITE_API_URL as the base URL (defaults to same origin)

Tech Stack

Technology	Version	Purpose
React	19	Component framework
TypeScript	5.9	Type safety (strict mode)
Vite	7.3	Build and dev server
TailwindCSS	4	Utility-first styling
React Router	7	Client-side routing
TanStack Query	5	Server state caching and synchronisation
Zustand	5	Lightweight client state
SignalR	10	Real-time WebSocket communication
Lucide React	—	Icon library
Sonner	—	Toast notifications

Design System

• Dark-first with light mode support
• Primary background: #0a0a0f
• Accent color: #4af0c0 (teal-green)
• Code/brand font: JetBrains Mono
• UI text font: DM Sans
• Reusable component library: Button, Input, Card, Badge, Avatar, Spinner, Toggle, EmptyState, ErrorBoundary

Deployment

The dashboard is built as a static SPA and embedded in the Gateway’s wwwroot/ directory during the Docker build. No separate hosting is required — the Gateway serves both the API and the frontend.

Dockerfile.gateway:
  1. Node build stage → compiles React app to dist/
  2. .NET build stage → compiles Gateway
  3. Runtime stage → copies dist/ into wwwroot/

Implementation Status

The dashboard layout, routing, state management, and API client are implemented. The chat page currently uses mock data with hardcoded agent responses — it is not yet connected to the SignalR hub or WebChat backend endpoint.