Log Viewer

The Log Viewer provides dedicated full-screen views for each category of system activity. Instead of sharing screen space on the dashboard, each log type gets the full viewport -- useful when you need to focus on a specific data stream during debugging or operations.

Accessing Log Views

From the Monitor dashboard, click on any log panel to open its full-screen view. You can also navigate directly using these routes:

Each route is protected by the requireAuth and requireLayout guards, so you must be logged in with a layout selected.

Live Status Indicator

Every log view displays a Live chip in the header bar. This green chip with a radar icon confirms that the view is actively receiving real-time data from either Firestore snapshot listeners or the WebSocket connection. If the connection drops, the chip will reflect the disconnected state.

DCC Command Log

The DCC Logger captures every DCC-EX command that passes through the WebSocket connection. The useDccLog composable connects to the WebSocket server and parses incoming messages with action type dcc.

Each log entry includes:

• Action -- The command category (e.g., dcc).
• Payload -- The parsed DCC-EX command string. The log attempts to match known command prefixes (power, throttle, turnout, function, output) and extract the inner content from the <* ... *> response wrapper.
• Timestamp -- When the entry was received.

The DCC log connects to ws://{host}/ using the WebSocket host stored in local storage under the @DEJA/pref/ws-host key.

Turnout Logs

The Turnout Log displays every turnout modification detected by the useLayoutLogListeners composable. It subscribes to Firestore's layouts/{layoutId}/turnouts collection and captures modified document change events.

Each entry shows:

• Turnout ID -- The Firestore document ID for the turnout.
• Updated state -- The new turnout data after the change.

Turnout changes accumulate in a reactive array. On the dashboard view, changes are tracked with a 5-minute timeout counter that increments the thrown count for statistics.

Effect Logs

The Effect Log works identically to the Turnout Log but monitors the layouts/{layoutId}/effects collection. Every effect activation, deactivation, or property change is captured and displayed.

Each entry includes:

• Effect ID -- The Firestore document ID.
• Effect data -- The full updated document data.

Device Serial Monitor

The Device Serial Monitor provides a terminal-like view of raw serial communication between the DEJA.js server and connected hardware devices.

How Device Monitoring Works

1. The Monitor app opens a WebSocket connection to the DEJA.js server.
2. For each device, the app sends a subscribe-device message with the device's ID.
3. The server confirms the subscription with a device-subscribed response.
4. From that point, any serial data sent to or received from that device is forwarded to the subscribed client as serial-data messages.
5. When the component unmounts or the user navigates away, an unsubscribe-device message is sent to stop the stream.

Message Format

Each serial message contains:

{
  id: string          // Unique message identifier
  deviceId: string    // Which device produced or received the data
  data: string        // The raw serial content
  direction: string   // "incoming" (from device) or "outgoing" (to device)
  timestamp: string   // ISO 8601 timestamp
}

Color-Coded Status

The device serial monitor uses visual indicators for connection state:

• Live chip (green) -- The device is connected and the WebSocket subscription is active.
• Device not found warning -- The requested device ID does not match any registered device in the layout.
• Disconnected -- The WebSocket connection has closed; the subscription flag resets automatically.

Message Buffering and Auto-Scroll

Serial messages are stored in a reactive array with a configurable maximum buffer size (default: 100 messages). When the buffer fills, the oldest messages are dropped to prevent memory issues. New messages are prepended to the top of the list, so the most recent data is always visible.

Multi-Device View

The /logs/devices route shows all registered devices in a single view. Each device gets its own monitor panel rendered by the DeviceSerialMonitors component, which iterates over the devices returned by useLayout().getDevices().

Single Device View

The /logs/devices/:deviceId route isolates a single device. The view resolves the device name from the layout's device records, falling back to the device type and port or topic information. Navigation buttons let you jump to the full device list or back to the dashboard.

Demo Mode

A demo view is available at /demo for testing the device serial monitor UI without a live server connection. The DeviceSerialMonitorDemo component provides sample data for development purposes.