A modern, real-time dashboard for the Universal Reflector (urfd), built using Go, Vue 3, and NNG (Nanomsg Next Gen).

This dashboard serves as a high-performance alternative to the legacy PHP-based dashboard, consuming events directly from urfd's NNG publisher socket to provide instant updates without polling.

• Real-Time Updates: Uses Websockets to push NNG events (Hearings, Connections) directly to the browser.
• Modern UI: Built with Vue 3 and Tailwind CSS 4, offering a responsive and clean design.
• Dark Mode: Native support for Light, Dark, and System themes.
• Activity Log: "Last Heard" list with live duration tracking, session de-duplication, and protocol information.
• Resource Efficient: Backend written in Go with a lightweight SQLite (WAL mode) database for history.
• Deployment Ready: Includes Docker Compose setup and Systemd service files/scripts.

The system consists of two main components bundled into a single binary:

1. Backend (Go):

   • NNG Subscriber: Connects to urfd (default tcp://127.0.0.1:5555) to listen for JSON events (hearing, state, etc.).
   • Store: Persists call history and node states to a local SQLite database using GORM.
   • Websocket Hub: Broadcasts live events to connected frontend clients.
   • HTTP Server: Serves the embedded Vue frontend and API endpoints.

2. Frontend (Vue 3 + Vite):

   • State Management: Uses Pinia to track active sessions, nodes, and configurations.
   • Reactivity: displaying active talkers with real-time "time since" and duration ticking.

• A running instance of urfd with NNG publishing enabled (usually on port 5555).
• Go 1.25+ (for building from source).
• Bun or Node.js (for building the frontend).

The project uses Task for automation.

1. Clone the repository:

   git clone https://github.com/dbehnke/urfd-nng-dashboard.git
   cd urfd-nng-dashboard

2. Build the project:

   task build

   This produces urfd-dashboard and urfd-simulator in the root directory.

The dashboard is configured via config.yaml (default) or command-line flags.

Example config.yaml:

server:
  addr: ":8080"
  nng_url: "tcp://127.0.0.1:5555"
  db_path: "data/dashboard.db"

reflector:
  name: "My Reflector"

A full example is available in examples/config.yaml.

Run with specific config:

./urfd-dashboard --config my-config.yaml

cd deploy
# Optionally create a config.yaml based on examples/config.yaml
docker-compose up -d

A sample service unit is available in deploy/systemd/urfd-dashboard.service.

To test without a live reflector:

# Build
task build-simulator

# Run (defaults to publishing on tcp://127.0.0.1:5555)
./urfd-simulator

For frontend development with hot reload:

1. Start the backend (to serve the API/Websocket):

   go run cmd/dashboard/main.go

2. Start the frontend dev server (in web/):

   cd web
   bun run dev

MIT