@robdobsn/raftjs 1.10.7 → 1.11.5

package/examples/dashboard/src/DevicePanel.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 import './styles.css';
-import { DeviceState } from '../../../src/RaftDeviceStates';
+import { DeviceState, DeviceOnlineState } from '../../../src/RaftDeviceStates';
 import DeviceAttrsForm from './DeviceAttrsForm';
 import DeviceActionsForm from './DeviceActionsForm';
 import DeviceLineChart from './DeviceLineChart';
+import DeviceStatsPanel from './DeviceStatsPanel';
 import ConnManager from './ConnManager';
 import SettingsManager from './SettingsManager';
 
@@ -19,10 +20,14 @@ const DevicePanel = ({ deviceKey, lastUpdated }: DevicePanelProps) => {
     const deviceState: DeviceState | undefined = deviceManager?.getDeviceState(deviceKey);
 
     // Gray out the device panel if the device is offline
-    const offlineClass = deviceState?.isOnline ? '' : 'offline';
+    const offlineClass = deviceState?.onlineState === DeviceOnlineState.Online ? '' : 'offline';
 
     const [timedChartUpdate, setTimedChartUpdate] = useState<number>(0);
     const [menuOpen, setMenuOpen] = useState<boolean>(false);
+    const [showPollRateDialog, setShowPollRateDialog] = useState<boolean>(false);
+    const [pollRateInput, setPollRateInput] = useState<string>('');
+    const [pollRateStatus, setPollRateStatus] = useState<string>('');
+    const [showStats, setShowStats] = useState<boolean>(false);
     const menuRef = useRef<HTMLDivElement>(null);
 
     const settingsManager = SettingsManager.getInstance();
@@ -92,6 +97,34 @@ const DevicePanel = ({ deviceKey, lastUpdated }: DevicePanelProps) => {
         setMenuOpen(false);
     };
     
+    const handleSetPollRateClick = () => {
+        setMenuOpen(false);
+        setPollRateInput('');
+        setPollRateStatus('');
+        setShowPollRateDialog(true);
+    };
+
+    const handlePollRateSubmit = () => {
+        const rateHz = parseFloat(pollRateInput);
+        if (isNaN(rateHz) || rateHz <= 0) {
+            setPollRateStatus('Invalid rate — enter a positive number');
+            return;
+        }
+        const intervalUs = Math.round(1000000 / rateHz);
+        const busName = deviceState?.busName ?? '0';
+        const addr = deviceState?.deviceAddress ?? '0';
+        const cmd = `devman/devconfig?bus=${busName}&addr=${addr}&intervalUs=${intervalUs}`;
+        setPollRateStatus('Sending...');
+        connManager.getConnector().sendRICRESTMsg(cmd, {}).then((response: object) => {
+            console.log(`Poll rate set: ${rateHz} Hz (${intervalUs} us)`, response);
+            setPollRateStatus(`Set to ${rateHz} Hz (${intervalUs} µs)`);
+            setTimeout(() => setShowPollRateDialog(false), 1500);
+        }).catch((error: unknown) => {
+            console.warn('Error setting poll rate', error);
+            setPollRateStatus('Error setting poll rate');
+        });
+    };
+
     const fallbackCopyTextToClipboard = (text: string) => {
         const textArea = document.createElement("textarea");
         textArea.value = text;
@@ -140,7 +173,7 @@ const DevicePanel = ({ deviceKey, lastUpdated }: DevicePanelProps) => {
     if (bracketsAdded) {
         headerText += `)`;
     }
-    if (!deviceState?.isOnline) {
+    if (deviceState?.onlineState !== DeviceOnlineState.Online) {
         headerText += " (Offline)";
     }
 
@@ -152,14 +185,57 @@ const DevicePanel = ({ deviceKey, lastUpdated }: DevicePanelProps) => {
                 {menuOpen && (
                     <div className="dropdown-menu" ref={menuRef}>
                         <div className="menu-item always-enabled" onClick={handleCopyToClipboard}>Copy Values to Clipboard</div>
+                        <div className="menu-item always-enabled" onClick={handleSetPollRateClick}>Set Poll Rate</div>
+                        <div className="menu-item always-enabled menu-item-toggle">
+                            <label className="menu-toggle">
+                                <input
+                                    type="checkbox"
+                                    checked={showStats}
+                                    onChange={(e) => setShowStats(e.target.checked)}
+                                />
+                                <span>Show Stats</span>
+                            </label>
+                        </div>
                     </div>
                 )}
             </div>
+            {showPollRateDialog && (
+                <div className="poll-rate-dialog-overlay" onClick={() => setShowPollRateDialog(false)}>
+                    <div className="poll-rate-dialog" onClick={(e) => e.stopPropagation()}>
+                        <div className="poll-rate-dialog-title">Set Poll Rate</div>
+                        <div className="poll-rate-dialog-row">
+                            <input
+                                className="poll-rate-input"
+                                type="number"
+                                min="0.001"
+                                step="any"
+                                placeholder="Rate (Hz)"
+                                value={pollRateInput}
+                                onChange={(e) => setPollRateInput(e.target.value)}
+                                onKeyDown={(e) => { if (e.key === 'Enter') handlePollRateSubmit(); if (e.key === 'Escape') setShowPollRateDialog(false); }}
+                                autoFocus
+                            />
+                            <span className="poll-rate-unit">Hz</span>
+                        </div>
+                        {pollRateInput && !isNaN(parseFloat(pollRateInput)) && parseFloat(pollRateInput) > 0 && (
+                            <div className="poll-rate-preview">{Math.round(1000000 / parseFloat(pollRateInput))} µs interval</div>
+                        )}
+                        {pollRateStatus && <div className="poll-rate-status">{pollRateStatus}</div>}
+                        <div className="poll-rate-dialog-buttons">
+                            <button className="poll-rate-btn poll-rate-btn-set" onClick={handlePollRateSubmit}>Set</button>
+                            <button className="poll-rate-btn poll-rate-btn-cancel" onClick={() => setShowPollRateDialog(false)}>Cancel</button>
+                        </div>
+                    </div>
+                </div>
+            )}
             <div className={`device-block-data`}>
                 <div className="device-attrs-and-actions">
                     <DeviceAttrsForm deviceKey={deviceKey} lastUpdated={lastUpdated} />
                     <DeviceActionsForm deviceKey={deviceKey} />
                 </div>
+                {showStats && (
+                    <DeviceStatsPanel deviceKey={deviceKey} lastUpdated={timedChartUpdate} />
+                )}
                 {showCharts &&
                     <DeviceLineChart deviceKey={deviceKey} lastUpdated={timedChartUpdate} />
                 }

package/examples/dashboard/src/DeviceStatsPanel.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import ConnManager from './ConnManager';
+import './styles.css';
+
+const connManager = ConnManager.getInstance();
+
+export interface DeviceStatsPanelProps {
+    deviceKey: string;
+    lastUpdated: number;
+}
+
+const DeviceStatsPanel: React.FC<DeviceStatsPanelProps> = ({ deviceKey, lastUpdated }: DeviceStatsPanelProps) => {
+    const deviceManager = connManager.getConnector().getSystemType()?.deviceMgrIF;
+    const stats = deviceManager?.getDeviceStats(deviceKey);
+
+    if (!stats) {
+        return <></>;
+    }
+
+    const windowSeconds = stats.windowMs / 1000;
+    const sampleRateHz = Number.isFinite(stats.sampleRateHz) ? stats.sampleRateHz : 0;
+    const nowMs = lastUpdated || Date.now();
+    const lastSampleAgeSec = stats.lastSampleTimeMs
+        ? (nowMs - stats.lastSampleTimeMs) / 1000
+        : null;
+
+    const handleReset = () => {
+        deviceManager?.resetDeviceStats(deviceKey);
+    };
+
+    return (
+        <div className="device-stats-panel">
+            <div className="device-stats-header">
+                <span>Sampling Stats</span>
+                <button className="device-stats-reset" onClick={handleReset}>Reset Samples</button>
+            </div>
+            <div className="device-stats-grid">
+                <div className="device-stats-item">
+                    <div className="device-stats-label">Sample Rate</div>
+                    <div className="device-stats-value">{sampleRateHz.toFixed(2)} Hz</div>
+                </div>
+                <div className="device-stats-item">
+                    <div className="device-stats-label">Window</div>
+                    <div className="device-stats-value">{windowSeconds.toFixed(1)} s</div>
+                </div>
+                <div className="device-stats-item">
+                    <div className="device-stats-label">Window Samples</div>
+                    <div className="device-stats-value">{stats.windowSamples}</div>
+                </div>
+                <div className="device-stats-item">
+                    <div className="device-stats-label">Total Samples</div>
+                    <div className="device-stats-value">{stats.totalSamples}</div>
+                </div>
+                <div className="device-stats-item">
+                    <div className="device-stats-label">Last Sample</div>
+                    <div className="device-stats-value">
+                        {lastSampleAgeSec === null ? 'N/A' : `${lastSampleAgeSec.toFixed(1)} s ago`}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DeviceStatsPanel;

package/examples/dashboard/src/DevicesPanel.tsx

@@ -41,6 +41,17 @@ export default function DevicesPanel(props: DevicesPanelProps) {
         }
         deviceManager.addAttributeDataCallback(onNewAttributeData);
 
+        const onDeviceRemoved = (deviceKey: string, state: DeviceState) => {
+            setLastUpdated(Date.now());
+        };
+        deviceManager.addDeviceRemovedCallback(onDeviceRemoved);
+
+        return () => {
+            deviceManager.removeNewDeviceCallback(onNewDevice);
+            deviceManager.removeNewAttributeCallback(onNewAttribute);
+            deviceManager.removeAttributeDataCallback(onNewAttributeData);
+            deviceManager.removeDeviceRemovedCallback(onDeviceRemoved);
+        };
     }, []);
 
     const deviceManager = connManager.getConnector().getSystemType()?.deviceMgrIF;

package/examples/dashboard/src/SettingsScreen.tsx

@@ -24,9 +24,14 @@ const SettingsScreen = ({ onBack }: { onBack: () => void }) => {
     settingsManager.getSetting('latencyAttributeName') || 'amb0'
   );
   const [latencyChangeThreshold, setLatencyChangeThreshold] = useState<number>(
-    settingsManager.getSetting('latencyChangeThreshold') || 100
+    settingsManager.getSetting('latencyChangeThreshold') ?? 100
   );
 
+  const parseIntOrDefault = (value: string, fallback: number): number => {
+    const parsed = Number.parseInt(value, 10);
+    return Number.isNaN(parsed) ? fallback : parsed;
+  };
+
   const handleSaveAndReturn = () => {
     // Save settings to SettingsManager
     settingsManager.setSetting('latencyTest', latencyTest);
@@ -83,7 +88,7 @@ const SettingsScreen = ({ onBack }: { onBack: () => void }) => {
                   value={maxChartDataPoints}
                   onChange={(e) =>
                     setMaxChartDataPoints(
-                      Math.min(parseInt(e.target.value, 10) || 1, 500)
+                      Math.min(parseIntOrDefault(e.target.value, 1), 500)
                     )
                   }
                   style={{ width: '50px', marginLeft: '10px' }}
@@ -101,7 +106,7 @@ const SettingsScreen = ({ onBack }: { onBack: () => void }) => {
                   value={maxDatapointsToStore}
                   onChange={(e) =>
                     setMaxDatapointsToStore(
-                      Math.min(parseInt(e.target.value, 10) || 1, 100000)
+                      Math.min(parseIntOrDefault(e.target.value, 1), 100000)
                     )
                   }
                   style={{ width: '50px', marginLeft: '10px' }}
@@ -141,7 +146,7 @@ const SettingsScreen = ({ onBack }: { onBack: () => void }) => {
                       min="1"
                       value={latencyChangeThreshold}
                       onChange={(e) =>
-                        setLatencyChangeThreshold(parseInt(e.target.value, 10) || 1)
+                        setLatencyChangeThreshold(parseIntOrDefault(e.target.value, 1))
                       }
                       style={{ width: '60px', marginLeft: '10px' }}
                     />

package/examples/dashboard/src/SystemTypeCog/CogStateInfo.ts

@@ -46,6 +46,14 @@ export class CogStateInfo {
         return this._deviceManager; 
     }
 
+    async handleBinaryPayload(rxMsg: Uint8Array): Promise<void> {
+        await this._deviceManager.handleClientMsgBinary(rxMsg);
+    }
+
+    async handleJsonPayload(jsonString: string): Promise<void> {
+        await this._deviceManager.handleClientMsgJson(jsonString);
+    }
+
     updateFromMsg(rxMsg: Uint8Array, frameTimeMs: number, isBinary: boolean): Array<string> {
 
         // Debug 
@@ -53,14 +61,14 @@ export class CogStateInfo {
 
         if (isBinary) {
             // console.log(`CogStateInfo: updateFromMsg: ${RaftUtils.bufferToHex(rxMsg)}`);
-            this._deviceManager.handleClientMsgBinary(rxMsg);
+            this.handleBinaryPayload(rxMsg);
         } else {
             // Convert Uint8Array to string
             const decoder = new TextDecoder('utf-8');
             const jsonString = decoder.decode(rxMsg.slice(2));
 
             // Handle using device manager
-            this._deviceManager.handleClientMsgJson(jsonString);
+            this.handleJsonPayload(jsonString);
         }
 
     //     // Debug

package/examples/dashboard/src/SystemTypeCog/SystemTypeCog.ts

@@ -1,5 +1,5 @@
 import { RaftSubscribeForUpdatesCBType, RaftSystemType } from "../../../../src/RaftSystemType";
-import { RaftEventFn, RaftLog, RaftOKFail, RaftPublishEvent, RaftPublishEventNames, RaftSystemUtils } from "../../../../src/main";
+import { inspectPublishFrame, RaftEventFn, RaftLog, RaftPublishEvent, RaftPublishEventNames, RaftSubscriptionUpdateResponse, RaftSystemUtils } from "../../../../src/main";
 import { CogStateInfo } from "./CogStateInfo";
 import { DeviceManager } from "../../../../src/RaftDeviceManager";
 
@@ -53,10 +53,16 @@ export default class SystemTypeCog implements RaftSystemType {
           ']}';
 
         const msgHandler = systemUtils.getMsgHandler();
-        const ricResp = await msgHandler.sendRICRESTCmdFrame<RaftOKFail>(
+        const ricResp = await msgHandler.sendRICRESTCmdFrame<RaftSubscriptionUpdateResponse>(
           enable ? subscribeEnable : subscribeDisable
         );
 
+        // Cache topic index->name map from response, then refresh from pubtopics endpoint when enabling
+        systemUtils.updatePublishTopicMapFromSubscriptionResponse(ricResp);
+        if (enable) {
+          await systemUtils.refreshPublishTopicMap();
+        }
+
         // Debug
         RaftLog.debug(`subscribe enable/disable returned ${JSON.stringify(ricResp)}`);
       } catch (error: unknown) {
@@ -72,13 +78,41 @@ export default class SystemTypeCog implements RaftSystemType {
 
       // RICLog.debug(`rxOtherMsgType payload ${RaftUtils.bufferToHex(payload)}`);
       RaftLog.verbose(`rxOtherMsgType payloadLen ${payload.length}`);
-      const topicIDs = this._stateInfo.updateFromMsg(payload, frameTimeMs, SUBSCRIBE_BINARY_MSGS);
+
+      const frameMeta = inspectPublishFrame(payload, (idx) => this._systemUtils?.getPublishTopicName(idx));
+      let handledByDeviceManager = false;
+
+      if (frameMeta.frameType === "binary") {
+        if (frameMeta.binaryHasEnvelope) {
+          if (frameMeta.topicName === "devbin") {
+            this._stateInfo.handleBinaryPayload(payload);
+            handledByDeviceManager = true;
+          }
+        } else if (SUBSCRIBE_BINARY_MSGS) {
+          this._stateInfo.handleBinaryPayload(payload);
+          handledByDeviceManager = true;
+        }
+      } else if (frameMeta.frameType === "json") {
+        if (frameMeta.topicName === "devjson" || frameMeta.topicName === undefined) {
+          if (frameMeta.jsonString !== undefined) {
+            this._stateInfo.handleJsonPayload(frameMeta.jsonString);
+            handledByDeviceManager = true;
+          }
+        }
+      }
+
+      const topicIDs = frameMeta.topicIndex !== undefined ? [frameMeta.topicIndex.toString()] : [];
 
       // Call event handler if registered
       if (this._onEvent) {
         this._onEvent("pub", RaftPublishEvent.PUBLISH_EVENT_DATA, RaftPublishEventNames[RaftPublishEvent.PUBLISH_EVENT_DATA],
           {
             topicIDs: topicIDs,
+            topicName: frameMeta.topicName,
+            topicIndex: frameMeta.topicIndex,
+            topicVersion: frameMeta.version,
+            frameType: frameMeta.frameType,
+            handledByDeviceManager,
             payload: payload,
             frameTimeMs: frameTimeMs,
             isBinary: SUBSCRIBE_BINARY_MSGS

package/examples/dashboard/src/SystemTypeGeneric/StateInfoGeneric.ts

@@ -7,6 +7,14 @@ export class StateInfoGeneric {
     public constructor(private _deviceManager: DeviceManager) {
     }
 
+    async handleBinaryPayload(rxMsg: Uint8Array): Promise<void> {
+        await this._deviceManager.handleClientMsgBinary(rxMsg);
+    }
+
+    async handleJsonPayload(jsonString: string): Promise<void> {
+        await this._deviceManager.handleClientMsgJson(jsonString);
+    }
+
     updateFromMsg(rxMsg: Uint8Array, frameTimeMs: number, isBinary: boolean): Array<string> {
 
         // Debug 
@@ -15,14 +23,14 @@ export class StateInfoGeneric {
         // Handle binary or JSON
         if (isBinary) {
             // Handle using device manager
-            this._deviceManager.handleClientMsgBinary(rxMsg);            
+            this.handleBinaryPayload(rxMsg);
         } else {
             // Convert Uint8Array to string
             const decoder = new TextDecoder('utf-8');
             const jsonString = decoder.decode(rxMsg.slice(2));
 
             // Handle using device manager
-            this._deviceManager.handleClientMsgJson(jsonString);
+            this.handleJsonPayload(jsonString);
         }
         return [];
 

package/examples/dashboard/src/SystemTypeGeneric/SystemTypeGeneric.ts

@@ -1,9 +1,9 @@
 import { RaftSubscribeForUpdatesCBType, RaftSystemType } from "../../../../src/RaftSystemType";
-import { RaftEventFn, RaftLog, RaftOKFail, RaftPublishEvent, RaftPublishEventNames, RaftSystemUtils } from "../../../../src/main";
+import { inspectPublishFrame, RaftEventFn, RaftLog, RaftPublishEvent, RaftPublishEventNames, RaftSubscriptionUpdateResponse, RaftSystemUtils } from "../../../../src/main";
 import { StateInfoGeneric } from "./StateInfoGeneric";
 import { DeviceManager } from "../../../../src/RaftDeviceManager";
 
-const SUBSCRIBE_BINARY_MSGS = false;
+const SUBSCRIBE_BINARY_MSGS = true;
 
 export default class SystemTypeGeneric implements RaftSystemType {
     nameForDialogs = "Generic System";
@@ -53,10 +53,16 @@ export default class SystemTypeGeneric implements RaftSystemType {
           ']}';
 
         const msgHandler = systemUtils.getMsgHandler();
-        const ricResp = await msgHandler.sendRICRESTCmdFrame<RaftOKFail>(
+        const ricResp = await msgHandler.sendRICRESTCmdFrame<RaftSubscriptionUpdateResponse>(
           enable ? subscribeEnable : subscribeDisable
         );
 
+        // Cache topic index->name map from response, then refresh from pubtopics endpoint when enabling
+        systemUtils.updatePublishTopicMapFromSubscriptionResponse(ricResp);
+        if (enable) {
+          await systemUtils.refreshPublishTopicMap();
+        }
+
         // Debug
         RaftLog.debug(`subscribe enable/disable returned ${JSON.stringify(ricResp)}`);
       } catch (error: unknown) {
@@ -72,13 +78,41 @@ export default class SystemTypeGeneric implements RaftSystemType {
 
       // RICLog.debug(`rxOtherMsgType payload ${RaftUtils.bufferToHex(payload)}`);
       RaftLog.verbose(`rxOtherMsgType payloadLen ${payload.length}`);
-      const topicIDs = this._stateInfo.updateFromMsg(payload, frameTimeMs, SUBSCRIBE_BINARY_MSGS);
+
+      const frameMeta = inspectPublishFrame(payload, (idx) => this._systemUtils?.getPublishTopicName(idx));
+      let handledByDeviceManager = false;
+
+      if (frameMeta.frameType === "binary") {
+        if (frameMeta.binaryHasEnvelope) {
+          if (frameMeta.topicName === "devbin") {
+            this._stateInfo.handleBinaryPayload(payload);
+            handledByDeviceManager = true;
+          }
+        } else if (SUBSCRIBE_BINARY_MSGS) {
+          this._stateInfo.handleBinaryPayload(payload);
+          handledByDeviceManager = true;
+        }
+      } else if (frameMeta.frameType === "json") {
+        if (frameMeta.topicName === "devjson" || frameMeta.topicName === undefined) {
+          if (frameMeta.jsonString !== undefined) {
+            this._stateInfo.handleJsonPayload(frameMeta.jsonString);
+            handledByDeviceManager = true;
+          }
+        }
+      }
+
+      const topicIDs = frameMeta.topicIndex !== undefined ? [frameMeta.topicIndex.toString()] : [];
 
       // Call event handler if registered
       if (this._onEvent) {
         this._onEvent("pub", RaftPublishEvent.PUBLISH_EVENT_DATA, RaftPublishEventNames[RaftPublishEvent.PUBLISH_EVENT_DATA],
           {
             topicIDs: topicIDs,
+            topicName: frameMeta.topicName,
+            topicIndex: frameMeta.topicIndex,
+            topicVersion: frameMeta.version,
+            frameType: frameMeta.frameType,
+            handledByDeviceManager,
             payload: payload,
             frameTimeMs: frameTimeMs,
             isBinary: SUBSCRIBE_BINARY_MSGS

package/examples/dashboard/src/SystemTypeMarty/RICStateInfo.ts

@@ -1,5 +1,5 @@
 import RaftDeviceMgrIF from "../../../../src/RaftDeviceMgrIF";
-import { DeviceAttributeState, DevicesState, DeviceState } from "../../../../src/RaftDeviceStates";
+import { DeviceAttributeState, DevicesState, DeviceState, DeviceOnlineState } from '../../../../src/RaftDeviceStates';
 import { RICSERIAL_PAYLOAD_POS } from "../../../../src/RaftProtocolDefs";
 import RICAddOnManager from "./RICAddOnManager";
 import RICCommsStats from "./RICCommsStats";
@@ -50,7 +50,7 @@ export class RICStateInfo implements RaftDeviceMgrIF {
             deviceAttributes: {},
             deviceIsNew: false,
             stateChanged: false,
-            isOnline: false,
+            onlineState: DeviceOnlineState.Offline,
             deviceAddress: "",
             deviceType: "",
             busName: ""
@@ -85,6 +85,14 @@ export class RICStateInfo implements RaftDeviceMgrIF {
         // TODO - implement if RICStateInfo is to be used as a DeviceMgr
     }
 
+    addDeviceRemovedCallback(callback: (deviceKey: string, state: DeviceState) => void): void {
+        // TODO - implement if RICStateInfo is to be used as a DeviceMgr
+    }
+
+    removeDeviceRemovedCallback(callback: (deviceKey: string, state: DeviceState) => void): void {
+        // TODO - implement if RICStateInfo is to be used as a DeviceMgr
+    }
+
     sendAction(deviceKey: string, action: any, data: any): void {
         // TODO - implement if RICStateInfo is to be used as a DeviceMgr
     }

package/examples/dashboard/src/styles.css

@@ -381,6 +381,168 @@ h1 {
     background-color: #555;
 }
 
+.menu-item-toggle {
+    padding: 6px 10px;
+}
+
+.menu-toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+}
+
+.menu-toggle input {
+    margin: 0;
+}
+
+.device-stats-panel {
+    flex: 0 0 220px;
+    min-width: 220px;
+    padding: 10px;
+    border: 1px solid #666;
+    border-radius: 4px;
+    background: #444;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.device-stats-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: bold;
+}
+
+.device-stats-reset {
+    background: #555;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    padding: 4px 8px;
+    cursor: pointer;
+    font-size: 0.8em;
+}
+
+.device-stats-reset:hover {
+    background: #666;
+}
+
+.device-stats-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 8px;
+}
+
+.device-stats-item {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.device-stats-label {
+    color: #bbb;
+    font-size: 0.85em;
+}
+
+.device-stats-value {
+    font-weight: 600;
+    font-size: 0.9em;
+}
+
+.poll-rate-dialog-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.poll-rate-dialog {
+    background: #333;
+    border: 1px solid #666;
+    border-radius: 6px;
+    padding: 18px 22px;
+    min-width: 240px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    color: #fff;
+}
+
+.poll-rate-dialog-title {
+    font-size: 1em;
+    font-weight: bold;
+    margin-bottom: 4px;
+}
+
+.poll-rate-dialog-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.poll-rate-input {
+    flex: 1;
+    background: #222;
+    border: 1px solid #666;
+    border-radius: 4px;
+    color: #fff;
+    padding: 6px 8px;
+    font-size: 1em;
+    width: 100%;
+}
+
+.poll-rate-unit {
+    color: #aaa;
+    font-size: 0.9em;
+}
+
+.poll-rate-preview {
+    font-size: 0.8em;
+    color: #aaa;
+}
+
+.poll-rate-status {
+    font-size: 0.85em;
+    color: #f90;
+}
+
+.poll-rate-dialog-buttons {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+}
+
+.poll-rate-btn {
+    padding: 6px 14px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9em;
+}
+
+.poll-rate-btn-set {
+    background: #4a7;
+    color: #fff;
+}
+
+.poll-rate-btn-set:hover {
+    background: #5b8;
+}
+
+.poll-rate-btn-cancel {
+    background: #555;
+    color: #fff;
+}
+
+.poll-rate-btn-cancel:hover {
+    background: #666;
+}
+
 /* Adjust height for portrait orientation */
 @media (orientation: portrait) {
     .device-line-chart {