@robotical/raftjs 2.1.0 → 2.1.2

package/examples/dashboard/src/DeviceActionsForm.tsx

@@ -1,10 +1,20 @@
 import React, { useEffect, useRef, useState } from 'react';
 import ConnManager from './ConnManager';
-import { DeviceTypeAction } from '../../../src/RaftDeviceInfo';
+import { DeviceTypeAction, ActionMapEntry } from '../../../src/RaftDeviceInfo';
 import DispLEDGrid from './DispLedGrid';
 
 const connManager = ConnManager.getInstance();
 
+// Generic sample rate options for devices without _conf.rate
+const GENERIC_SAMPLE_RATES = [50, 20, 10, 5, 2, 1, 0.5, 0.2, 0.1, 0.01, 0.001];
+
+// Find the closest value in an array to a target
+function findClosest(arr: number[], target: number): number {
+    return arr.reduce((prev, curr) =>
+        Math.abs(curr - target) < Math.abs(prev - target) ? curr : prev
+    );
+}
+
 type DeviceActionsTableProps = {
     deviceKey: string;
 };
@@ -17,18 +27,29 @@ const DeviceActionsForm: React.FC<DeviceActionsTableProps> = ({ deviceKey }: Dev
     const deviceManager = connManager.getConnector().getSystemType()?.deviceMgrIF;
     const [deviceActions, setDeviceActions] = useState<DeviceTypeAction[]>([]);
     const [inputValues, setInputValues] = useState<InputValues>({});
+    const [actionStatus, setActionStatus] = useState<string>('');
+    const [genericRateHz, setGenericRateHz] = useState<number>(10);
+    const [isBusDevice, setIsBusDevice] = useState<boolean>(false);
+    const [hasConfRate, setHasConfRate] = useState<boolean>(false);
 
     useEffect(() => {
         if (!deviceManager) {
             return;
         }
         // Wait a little while inline for the device to be ready
-        setTimeout(() => {
+        setTimeout(async () => {
             const deviceState = deviceManager.getDeviceState(deviceKey);
             const { deviceTypeInfo } = deviceState;
             const actions: DeviceTypeAction[] = deviceTypeInfo?.actions || [];
             setDeviceActions(actions);
-            // Initialize input values
+            // Check if this is a bus device (has a valid busName)
+            const busName = deviceState?.busName ?? '';
+            const isBus = busName !== '' && busName !== '0';
+            setIsBusDevice(isBus);
+            // Check if device has _conf.rate action
+            const confRateAction = actions.find(a => a.n === '_conf.rate');
+            setHasConfRate(!!confRateAction);
+            // Initialize input values with defaults
             const initialValues: InputValues = actions.reduce((acc, action) => {
                 acc[action.n] =
                     action.d ??
@@ -39,6 +60,47 @@ const DeviceActionsForm: React.FC<DeviceActionsTableProps> = ({ deviceKey }: Dev
                         : 0);
                 return acc;
             }, {} as InputValues);
+
+            // Query current poll config from firmware to initialize rate dropdowns
+            if (isBus && deviceState?.deviceAddress) {
+                try {
+                    const cmd = `devman/devconfig?bus=${busName}&addr=${deviceState.deviceAddress}`;
+                    const resp = await connManager.getConnector().sendRICRESTMsg(cmd, {}) as any;
+                    if (resp?.rslt === 'ok' && resp.pollIntervalUs > 0) {
+                        const currentRateHz = 1000000 / resp.pollIntervalUs;
+                        if (confRateAction?.map) {
+                            // For _conf.rate: find the map key whose interval and numSamples
+                            // best match the current config (both i and s needed to disambiguate
+                            // e.g. 52Hz and 104Hz both use i=50000 but differ in s)
+                            let bestKey = String(confRateAction.d ?? '');
+                            let bestDist = Infinity;
+                            for (const [key, entry] of Object.entries(confRateAction.map)) {
+                                const mapEntry = entry as ActionMapEntry;
+                                if (mapEntry.i !== undefined) {
+                                    let dist = Math.abs(mapEntry.i - resp.pollIntervalUs);
+                                    // Add penalty for numSamples mismatch to disambiguate entries with same interval
+                                    if (mapEntry.s !== undefined && resp.numSamples !== undefined) {
+                                        dist += Math.abs(mapEntry.s - resp.numSamples) * 1000000;
+                                    }
+                                    if (dist < bestDist) {
+                                        bestDist = dist;
+                                        bestKey = key;
+                                    }
+                                }
+                            }
+                            if (bestKey) {
+                                initialValues['_conf.rate'] = parseFloat(bestKey);
+                            }
+                        } else {
+                            // For generic rate dropdown: find closest option
+                            setGenericRateHz(findClosest(GENERIC_SAMPLE_RATES, currentRateHz));
+                        }
+                    }
+                } catch (err) {
+                    // Ignore query errors — keep defaults
+                }
+            }
+
             setInputValues(initialValues);
         }, 1000);
     }, [deviceKey]);
@@ -50,15 +112,44 @@ const DeviceActionsForm: React.FC<DeviceActionsTableProps> = ({ deviceKey }: Dev
         }));
     };
 
-    const handleSendAction = (action: DeviceTypeAction, value: number) => {
+    const handleSendAction = async (action: DeviceTypeAction, value: number) => {
         // Send action to device
         if (!deviceManager) {
             return;
         }
-        deviceManager.sendAction(deviceKey, action, [value]);
+        // For _conf.rate actions, use setSampleRate for coordinated polling config
+        if (action.n === '_conf.rate' && action.map) {
+            setActionStatus('Setting sample rate...');
+            const result = await deviceManager.setSampleRate(deviceKey, value);
+            if (result.ok) {
+                setActionStatus(`Rate: ${result.actualRateHz} Hz, poll: ${result.intervalUs} µs, buf: ${result.numSamples}`);
+            } else {
+                setActionStatus(`Error: ${result.error}`);
+            }
+            setTimeout(() => setActionStatus(''), 5000);
+        } else {
+            deviceManager.sendAction(deviceKey, action, [value]);
+        }
     };
 
-    if (deviceActions.length === 0) {
+    const handleGenericRateSend = async () => {
+        if (!deviceManager) {
+            return;
+        }
+        setActionStatus('Setting sample rate...');
+        const result = await deviceManager.setSampleRate(deviceKey, genericRateHz);
+        if (result.ok) {
+            setActionStatus(`Rate: ${result.actualRateHz} Hz, poll: ${result.intervalUs} µs, buf: ${result.numSamples}`);
+        } else {
+            setActionStatus(`Error: ${result.error}`);
+        }
+        setTimeout(() => setActionStatus(''), 5000);
+    };
+
+    // Show generic rate control for bus devices without _conf.rate
+    const showGenericRate = isBusDevice && !hasConfRate;
+
+    if (deviceActions.length === 0 && !showGenericRate) {
         return <></>;
     }
 
@@ -80,14 +171,52 @@ const DeviceActionsForm: React.FC<DeviceActionsTableProps> = ({ deviceKey }: Dev
                                     <td>{action.n}</td>
                                     <td colSpan={2}>
                                         <DispLEDGrid
-                                            rows={action.NY || 1}
-                                            cols={action.NX || 1}
+                                            rows={action.NY ?? 1}
+                                            cols={action.NX ?? 1}
                                             deviceKey={deviceKey}
                                             deviceAction={action}
                                         />
                                     </td>
                                 </tr>
                             );
+                        } else if (action.map) {
+                            const mapKeys = Object.keys(action.map).sort((a, b) => parseFloat(a) - parseFloat(b));
+                            // Use "Rate Hz" label for _conf.rate actions
+                            const actionLabel = action.n === '_conf.rate' ? 'Rate Hz' : (action.desc ?? action.n);
+                            return (
+                                <tr key={action.n}>
+                                    <td>{actionLabel}</td>
+                                    <td>
+                                        <select
+                                            value={inputValues[action.n]}
+                                            onChange={(e) =>
+                                                handleInputChange(
+                                                    action.n,
+                                                    parseFloat(e.target.value)
+                                                )
+                                            }
+                                        >
+                                            {mapKeys.map((key) => (
+                                                <option key={key} value={parseFloat(key)}>
+                                                    {key}
+                                                </option>
+                                            ))}
+                                        </select>
+                                    </td>
+                                    <td>
+                                        <button
+                                            onClick={() =>
+                                                handleSendAction(
+                                                    action,
+                                                    inputValues[action.n]
+                                                )
+                                            }
+                                        >
+                                            Send
+                                        </button>
+                                    </td>
+                                </tr>
+                            );
                         } else {
                             return (
                                 <tr key={action.n}>
@@ -124,8 +253,29 @@ const DeviceActionsForm: React.FC<DeviceActionsTableProps> = ({ deviceKey }: Dev
                             );
                         }
                     })}
+                    {showGenericRate && (
+                        <tr key="__generic_rate">
+                            <td>Rate Hz</td>
+                            <td>
+                                <select
+                                    value={genericRateHz}
+                                    onChange={(e) => setGenericRateHz(parseFloat(e.target.value))}
+                                >
+                                    {GENERIC_SAMPLE_RATES.map((rate) => (
+                                        <option key={rate} value={rate}>
+                                            {rate >= 1 ? `${rate} Hz` : `${rate} Hz`}
+                                        </option>
+                                    ))}
+                                </select>
+                            </td>
+                            <td>
+                                <button onClick={handleGenericRateSend}>Send</button>
+                            </td>
+                        </tr>
+                    )}
                 </tbody>
             </table>
+            {actionStatus && <div className="action-status">{actionStatus}</div>}
         </div>
     );
 };

package/examples/dashboard/src/DeviceLineChart.tsx

@@ -47,13 +47,15 @@ const DeviceLineChart: React.FC<DeviceLineChartProps> = memo(({ deviceKey, lastU
         datasets: []
     });
 
+    const [chartScales, setChartScales] = useState<{ [key: string]: any }>({});
+
     const options = {
         responsive: true,
         maintainAspectRatio: false,
         animation: {
             duration: 1, // default is 1000ms
         },
-        scales: {}
+        scales: chartScales
     };
 
     const colourMapRef = useRef<{ [key: string]: string }>({
@@ -100,7 +102,12 @@ const DeviceLineChart: React.FC<DeviceLineChartProps> = memo(({ deviceKey, lastU
 
         const uniqueAxes = new Map<string, { range: [number, number], units: string }>();
         const datasets = Object.entries(deviceState.deviceAttributes)
-            .filter(([attributeName, attributeDetails]) => attributeDetails.visibleSeries !== false)
+            .filter(([attributeName, attributeDetails]) => {
+                if (attributeDetails.visibleSeries === false) return false;
+                // Exclude string-valued attributes from chart
+                if (attributeDetails.values.length > 0 && typeof attributeDetails.values[attributeDetails.values.length - 1] === 'string') return false;
+                return true;
+            })
             .map(([attributeName, attributeDetails]) => {
                 const data = attributeDetails.values.slice(-maxChartDataPoints);
                 let colour = colourMapRef.current[attributeName];
@@ -140,12 +147,18 @@ const DeviceLineChart: React.FC<DeviceLineChartProps> = memo(({ deviceKey, lastU
                 ticks: {
                     min: axis.range[0],
                     max: axis.range[1],
+                    callback: (value: number) => {
+                        if (typeof value === 'number' && Math.abs(value) > 0 && Math.abs(value) < 1) {
+                            return value.toPrecision(2);
+                        }
+                        return value;
+                    },
                 },
             };
         });
 
         // Update options and chart data
-        options.scales = scales;
+        setChartScales(scales);
         setChartData({ labels: labels.length ? labels : ['0.000'], datasets });
     }, [lastUpdated]);
 

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;
@@ -117,25 +150,30 @@ const DevicePanel = ({ deviceKey, lastUpdated }: DevicePanelProps) => {
     };
 
     let headerText = `Device ${deviceState?.deviceTypeInfo?.name}`;
+    let bracketsAdded = false;
+    if ((deviceState?.busName !== undefined) && (deviceState?.busName !== "") && (deviceState?.busName !== "0")) {
+        headerText += ` (Bus ${deviceState?.busName}`;
+        bracketsAdded = true;
+    }
     if ((deviceState?.deviceAddress !== undefined) && (deviceState?.deviceAddress !== "") && (deviceState?.deviceAddress !== "0")) {
         // See if we can identify I2C addresses - should start with two bytes of 0s and then have a byte which is slot and a byte which is address
-        const addrInt = parseInt(deviceState?.deviceAddress, 10);
+        const addrInt = parseInt(deviceState?.deviceAddress, 16);
         if (addrInt < 65536) {
             const slot = addrInt >> 8;
-            const address = ("00" + (addrInt & 0xFF).toString(16)).slice(-2);
-            headerText += ` I2C Address 0x${address}`;
             if (slot === 0)
-                headerText += ` (Main Bus)`;
+                headerText += ` Main Bus`;
             else
-                headerText += ` (Slot ${slot})`;
+                headerText += ` Slot ${slot}`;
+            const address = ("00" + (addrInt & 0xFF).toString(16)).slice(-2);
+            headerText += ` Addr 0x${address}`;
         } else {
-            headerText += ` Address ${deviceState?.deviceAddress}`;
+            headerText += ` Addr ${deviceState?.deviceAddress}`;
         }
     }
-    if ((deviceState?.busName !== undefined) && (deviceState?.busName !== "") && (deviceState?.busName !== "0")) {
-        headerText += ` Bus ${deviceState?.busName}`;
+    if (bracketsAdded) {
+        headerText += `)`;
     }
-    if (!deviceState?.isOnline) {
+    if (deviceState?.onlineState !== DeviceOnlineState.Online) {
         headerText += " (Offline)";
     }
 
@@ -147,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/DeviceSelectDialog.tsx

@@ -0,0 +1,224 @@
+import React, { useState } from 'react';
+import './styles.css';
+
+// Rate presets: label + milliseconds
+const RATE_PRESETS = [
+  { label: 'Max (poll rate)', ms: 0 },
+  { label: '10 Hz', ms: 100 },
+  { label: '1 Hz', ms: 1000 },
+  { label: '0.1 Hz (10s)', ms: 10000 },
+  { label: '1/min', ms: 60000 },
+  { label: '1/10min', ms: 600000 },
+  { label: '1/hour', ms: 3600000 },
+  { label: '1/day', ms: 86400000 },
+];
+
+// Log-scale slider range
+const LOG_RATE_MIN_MS = 50;
+const LOG_RATE_MAX_MS = 360000000;
+
+function msToSliderValue(ms: number): number {
+  if (ms <= 0) return 0;
+  const minLog = Math.log10(LOG_RATE_MIN_MS);
+  const maxLog = Math.log10(LOG_RATE_MAX_MS);
+  const val = (Math.log10(Math.max(ms, LOG_RATE_MIN_MS)) - minLog) / (maxLog - minLog);
+  return Math.min(1, Math.max(0, val));
+}
+
+function sliderValueToMs(val: number): number {
+  if (val <= 0) return 0;
+  const minLog = Math.log10(LOG_RATE_MIN_MS);
+  const maxLog = Math.log10(LOG_RATE_MAX_MS);
+  return Math.round(Math.pow(10, minLog + val * (maxLog - minLog)));
+}
+
+function formatRateMs(ms: number): string {
+  if (ms <= 0) return 'Max (every poll)';
+  if (ms < 1000) return `${ms} ms (${(1000 / ms).toFixed(1)} Hz)`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)} s (${(1000 / ms).toFixed(2)} Hz)`;
+  if (ms < 3600000) return `${(ms / 60000).toFixed(1)} min`;
+  if (ms < 86400000) return `${(ms / 3600000).toFixed(1)} hr`;
+  return `${(ms / 86400000).toFixed(1)} days`;
+}
+
+export interface DeviceLogEntry {
+  enabled: boolean;
+  busName: string;
+  addr: string;
+  typeName: string;
+  rateMs: number;
+  pollIntervalMs: number;
+  availableAttrs: string[];
+  selectedAttrs: string[];
+}
+
+interface DeviceSelectDialogProps {
+  entries: DeviceLogEntry[];
+  format: string;
+  onSave: (entries: DeviceLogEntry[]) => void;
+  onCancel: () => void;
+}
+
+export default function DeviceSelectDialog({ entries, format, onSave, onCancel }: DeviceSelectDialogProps) {
+  const [localEntries, setLocalEntries] = useState<DeviceLogEntry[]>(
+    entries.map(e => ({ ...e, selectedAttrs: [...e.selectedAttrs] }))
+  );
+
+  const toggleDevice = (index: number) => {
+    setLocalEntries(prev => {
+      const next = [...prev];
+      next[index] = { ...next[index], enabled: !next[index].enabled };
+      return next;
+    });
+  };
+
+  const setRate = (index: number, rateMs: number) => {
+    setLocalEntries(prev => {
+      const next = [...prev];
+      next[index] = { ...next[index], rateMs };
+      return next;
+    });
+  };
+
+  const selectAll = () => {
+    setLocalEntries(prev => prev.map(d => ({ ...d, enabled: true })));
+  };
+
+  const selectNone = () => {
+    setLocalEntries(prev => prev.map(d => ({ ...d, enabled: false })));
+  };
+
+  const toggleAttr = (deviceIndex: number, attrName: string) => {
+    setLocalEntries(prev => {
+      const next = [...prev];
+      const entry = { ...next[deviceIndex] };
+      const selected = [...entry.selectedAttrs];
+      const idx = selected.indexOf(attrName);
+      if (idx >= 0) {
+        selected.splice(idx, 1);
+      } else {
+        selected.push(attrName);
+      }
+      entry.selectedAttrs = selected;
+      next[deviceIndex] = entry;
+      return next;
+    });
+  };
+
+  return (
+    <div className="dev-select-overlay" onClick={onCancel}>
+      <div className="dev-select-dialog" onClick={e => e.stopPropagation()}>
+        <h3 className="dev-select-title">Select Devices &amp; Attributes</h3>
+
+        <div className="log-config-select-buttons">
+          <button className="log-config-select-btn" onClick={selectAll}>All</button>
+          <button className="log-config-select-btn" onClick={selectNone}>None</button>
+        </div>
+
+        <div className="dev-select-list">
+          {localEntries.map((entry, idx) => (
+            <div key={`${entry.busName}_${entry.addr}`} className={`log-config-device ${entry.enabled ? '' : 'log-config-device-disabled'}`}>
+              <div className="log-config-device-header">
+                <label className="log-config-checkbox-label">
+                  <input
+                    type="checkbox"
+                    checked={entry.enabled}
+                    onChange={() => toggleDevice(idx)}
+                  />
+                  <span className="log-config-device-name">{entry.typeName}</span>
+                </label>
+                <span className="log-config-device-addr">
+                  Bus {entry.busName} · 0x{entry.addr}
+                </span>
+              </div>
+
+              {entry.enabled && (
+                <div className="log-config-rate-control">
+                  <div className="log-config-rate-row">
+                    <label className="log-config-rate-label">Log rate:</label>
+                    <select
+                      className="log-config-rate-preset"
+                      value={RATE_PRESETS.find(p => p.ms === entry.rateMs) ? entry.rateMs : 'custom'}
+                      onChange={e => {
+                        const val = e.target.value;
+                        if (val !== 'custom') setRate(idx, parseInt(val, 10));
+                      }}
+                    >
+                      {RATE_PRESETS.map(p => (
+                        <option key={p.ms} value={p.ms}>{p.label}</option>
+                      ))}
+                      {!RATE_PRESETS.find(p => p.ms === entry.rateMs) && (
+                        <option value="custom">Custom</option>
+                      )}
+                    </select>
+                  </div>
+
+                  <div className="log-config-slider-row">
+                    <span className="log-config-slider-label">Fast</span>
+                    <input
+                      type="range"
+                      className="log-config-slider"
+                      min="0"
+                      max="1"
+                      step="0.005"
+                      value={msToSliderValue(entry.rateMs)}
+                      onChange={e => {
+                        const ms = sliderValueToMs(parseFloat(e.target.value));
+                        setRate(idx, ms);
+                      }}
+                    />
+                    <span className="log-config-slider-label">Slow</span>
+                  </div>
+
+                  <div className="log-config-rate-display">
+                    {formatRateMs(entry.rateMs)}
+                    {entry.pollIntervalMs > 0 && entry.rateMs === 0 && (
+                      <span className="log-config-poll-rate"> · poll: {(1000 / entry.pollIntervalMs).toFixed(1)} Hz</span>
+                    )}
+                  </div>
+
+                  {format === 'csv' && entry.availableAttrs.length > 0 && (
+                    <div className="log-config-attrs">
+                      <div className="log-config-attrs-label">
+                        Attributes {entry.selectedAttrs.length === 0 ? '(all)' : `(${entry.selectedAttrs.length}/${entry.availableAttrs.length})`}:
+                      </div>
+                      <div className="log-config-attrs-list">
+                        {entry.availableAttrs.map(attrName => (
+                          <label key={attrName} className="log-config-attr-checkbox">
+                            <input
+                              type="checkbox"
+                              checked={entry.selectedAttrs.length === 0 || entry.selectedAttrs.includes(attrName)}
+                              onChange={() => {
+                                if (entry.selectedAttrs.length === 0) {
+                                  setLocalEntries(prev => {
+                                    const next = [...prev];
+                                    const e = { ...next[idx] };
+                                    e.selectedAttrs = entry.availableAttrs.filter(a => a !== attrName);
+                                    next[idx] = e;
+                                    return next;
+                                  });
+                                } else {
+                                  toggleAttr(idx, attrName);
+                                }
+                              }}
+                            />
+                            {attrName}
+                          </label>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <div className="dev-select-buttons">
+          <button className="dev-select-btn dev-select-btn-cancel" onClick={onCancel}>Cancel</button>
+          <button className="dev-select-btn dev-select-btn-save" onClick={() => onSave(localEntries)}>OK</button>
+        </div>
+      </div>
+    </div>
+  );
+}