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 is organised into groups. Each group collects the screens you reach for at the same stage of an investigation:

Monitor

Section	Description
Dashboard	Fleet-wide health summary — top busiest / DLQ services, throughput, recent events
Services	Per-service detail: Overview capabilities, event store, durability, cluster, health & metrics

Explore — fleet-wide explorers, each deep-linkable to a single service with ?service=

Section	Description
Workflow	"Where does this type fit?" — a message/event/saga traced across services as a sequence diagram or Event Modeling lanes (see Workflow)
Messaging Explorer	Messages catalog, routing, topology graphs, brokers, and the Endpoints grid in one place (see Topology, Message Routing, Endpoints)
Event Store Explorer	Streams, events, projection operations, and event-store configuration (see page docs)
Document Store Explorer	Document mappings and metadata-filtered document queries across stores
HTTP / gRPC	The ASP.NET / gRPC endpoint surface of each service, with chain detail

Reliability

Section	Description
Durability	Inbox/outbox sparklines and persistence queue depths
Dead Letters	DLQ explorer with replay, discard, and edit capabilities
Scheduled	Queued messages awaiting future delivery

Health & Configuration

Section	Description
Timeline	Chronological system event + operator-action feed
Alert Config	Per-service alert thresholds and baselines
Audit Log	Record of operator-initiated actions
Store Inspector	Raw document/stream lookups
Settings	Trace-provider and metrics-source bindings

Retired top-level items. Earlier builds had standalone Projections, Listeners, Topology, and Event Store nav items. These were folded into the explorers above: /projections, /listeners, /topology, and /events now redirect into the Event Store Explorer / Messaging Explorer, so old bookmarks still resolve. There is no separate "Alerts" page — active alerts surface on the Timeline and on each service's Health & Metrics tab; thresholds live under Alert Config.

Global Service Filter

A service selector at the top of the page lets you focus the 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 the filtered views show only relevant data.

The filter is hidden on the Dashboard and Services screens: the Dashboard is a fleet-wide overview with no per-service context, and the Services list already carries its own scoping, so a global filter there would be a no-op.

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.

Per-Node Liveness Dot

A small coloured dot sits beside every node number on the Services and Node detail pages. It tracks a quick liveness ping each running service sends to CritterWatch every 30 seconds — green when the most recent ping arrived within the last minute, amber after one missed beat, red after five. See Services → Heartbeat dot for the full thresholds, what each colour means, and what to check first when one turns red.

View Modes

Some views (notably Services, and the Cluster tab's nodes/agents) offer a Card/Table toggle:

• 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 t	Go to Timeline
g e	Go to Events (Event Store Explorer)
g a	Go to Alert Config
g l	Go to Audit Log
/	Focus the global service filter (no-op where the filter is hidden)
Escape	Close modal / clear filter