UI Overview
CritterWatch provides a Vue 3 single-page application served from the CritterWatch server. All views update in real time via SignalR — no manual refresh required.
Navigation
The sidebar provides access to all major sections:
| Section | Description |
|---|---|
| Dashboard | System-wide health summary across all services |
| Services | Per-service detail: nodes, agents, endpoints, metrics |
| Dead Letters | DLQ explorer with replay, discard, and edit capabilities |
| Projections | Async projection lag, status, and lifecycle controls |
| Listeners | Endpoint status, circuit breakers, buffer limits |
| Alerts | Active and historical alerts, acknowledgment, snooze |
| Scheduled Messages | Queued messages awaiting future delivery |
| Durability | Inbox/outbox sparklines and persistence queue depths |
| Event Store | Marten event stream viewer and queries |
| Timeline | Chronological system event feed and audit log |
| Chaos Monkey | Fault injection for resilience testing |
| Topology | Message routing visualization |
Global Service Filter
A service selector at the top of the page lets you focus the entire console on a single service. When a service is selected:
- Metrics, alerts, DLQ entries, and projections are scoped to that service
- Timeline events are filtered to show only that service's activity
- Commands are pre-populated with the selected service name
This is particularly useful during incident investigation — select the affected service and all views instantly filter to show only relevant data.
Dark Mode
CritterWatch supports both light and dark themes. Toggle via the sun/moon icon in the top navigation bar. The preference is persisted in local storage across sessions.
Real-Time Updates
All data is pushed from the CritterWatch server via a WebSocket connection (SignalR). The connection status indicator in the header shows:
- Green — connected, receiving live updates
- Yellow — reconnecting (brief connection interruption)
- Red — disconnected (server unreachable)
When the connection is lost, CritterWatch automatically attempts to reconnect with exponential backoff.
View Modes
Several views (Services, Projections, Listeners) support toggling between:
- Card view — visual grid with health status badges, suitable for at-a-glance monitoring
- Table view — sortable, filterable data table for detailed comparison
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
? | Show keyboard shortcuts |
g d | Go to Dashboard |
g s | Go to Services |
g q | Go to Dead Letters |
g p | Go to Projections |
g a | Go to Alerts |
g t | Go to Timeline |
/ | Focus search |
Escape | Close modal/clear filter |