Replace modal with inline device detail panel above proximity radar

- Added detail panel that appears above the radar when a device is clicked
- Shows comprehensive device information:
  - Large RSSI display with visual bar and range indicator
  - Protocol, status, and flag badges
  - 8-column stats grid: Manufacturer, Mfr ID, Address Type, Seen count,
    Min/Max RSSI, First/Last seen timestamps
  - Service UUIDs list (when available)
  - Copy Address button
- Selected device is highlighted in the device list
- Close button (×) to dismiss the panel
- Cyan accent border and gradient header for visual distinction

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

static/css/index.css

@@ -3293,6 +3293,233 @@ header h1 .tagline {
     min-width: 0;
 }
 
+/* Bluetooth Device Detail Panel */
+.bt-detail-panel {
+    background: var(--bg-tertiary);
+    border: 1px solid var(--accent-cyan);
+    border-radius: 8px;
+    margin-bottom: 12px;
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+.bt-detail-header {
+    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(139, 92, 246, 0.1));
+    padding: 12px 14px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.bt-detail-title-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.bt-detail-title-row h5 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.bt-detail-close {
+    background: none;
+    border: none;
+    color: var(--text-dim);
+    font-size: 20px;
+    cursor: pointer;
+    padding: 0;
+    line-height: 1;
+    transition: color 0.2s;
+}
+
+.bt-detail-close:hover {
+    color: var(--accent-red);
+}
+
+.bt-detail-address {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    margin-top: 4px;
+}
+
+.bt-detail-body {
+    padding: 12px 14px;
+}
+
+.bt-detail-rssi-section {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+    padding: 10px;
+    background: var(--bg-secondary);
+    border-radius: 6px;
+}
+
+.bt-detail-rssi-main {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+}
+
+.bt-detail-rssi-value {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 28px;
+    font-weight: 700;
+}
+
+.bt-detail-rssi-unit {
+    font-size: 12px;
+    color: var(--text-dim);
+}
+
+.bt-detail-rssi-bar-container {
+    flex: 1;
+    height: 10px;
+    background: var(--bg-tertiary);
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.bt-detail-rssi-bar {
+    height: 100%;
+    border-radius: 5px;
+    transition: width 0.3s ease;
+}
+
+.bt-detail-rssi-range {
+    font-size: 10px;
+    color: var(--text-dim);
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.bt-detail-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 12px;
+}
+
+.bt-detail-badge {
+    padding: 3px 8px;
+    border-radius: 4px;
+    font-size: 9px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+}
+
+.bt-detail-badge.ble {
+    background: rgba(59, 130, 246, 0.2);
+    color: #3b82f6;
+    border: 1px solid rgba(59, 130, 246, 0.3);
+}
+
+.bt-detail-badge.classic {
+    background: rgba(139, 92, 246, 0.2);
+    color: #8b5cf6;
+    border: 1px solid rgba(139, 92, 246, 0.3);
+}
+
+.bt-detail-badge.new {
+    background: rgba(59, 130, 246, 0.2);
+    color: #3b82f6;
+    border: 1px solid rgba(59, 130, 246, 0.3);
+}
+
+.bt-detail-badge.baseline {
+    background: rgba(34, 197, 94, 0.2);
+    color: #22c55e;
+    border: 1px solid rgba(34, 197, 94, 0.3);
+}
+
+.bt-detail-badge.flag {
+    background: rgba(107, 114, 128, 0.2);
+    color: #9ca3af;
+    border: 1px solid rgba(107, 114, 128, 0.3);
+}
+
+.bt-detail-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 8px;
+    margin-bottom: 12px;
+}
+
+.bt-detail-stat {
+    background: var(--bg-secondary);
+    padding: 8px 10px;
+    border-radius: 4px;
+}
+
+.bt-detail-stat-label {
+    display: block;
+    font-size: 9px;
+    color: var(--text-dim);
+    text-transform: uppercase;
+    margin-bottom: 2px;
+}
+
+.bt-detail-stat-value {
+    display: block;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bt-detail-services {
+    margin-bottom: 12px;
+}
+
+.bt-detail-services-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: 6px;
+}
+
+.bt-detail-service {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 9px;
+    background: var(--bg-secondary);
+    padding: 4px 8px;
+    border-radius: 4px;
+    color: var(--text-dim);
+}
+
+.bt-detail-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.bt-detail-btn {
+    padding: 6px 14px;
+    font-size: 11px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.bt-detail-btn:hover {
+    background: var(--accent-cyan);
+    border-color: var(--accent-cyan);
+    color: #000;
+}
+
+/* Selected device highlight */
+.bt-device-row.selected {
+    background: rgba(0, 212, 255, 0.1);
+    border-color: var(--accent-cyan);
+}
+
 .bt-device-list {
     border-left-color: var(--accent-purple) !important;
 }

static/js/modes/bluetooth.js

@@ -287,182 +287,155 @@ const BluetoothMode = (function() {
         if (farEl) farEl.textContent = zoneCounts.far;
     }
 
+    // Currently selected device
+    let selectedDeviceId = null;
+
     /**
-     * Show device detail modal
+     * Show device detail panel
      */
-    function showModal(deviceId) {
+    function showDeviceDetail(deviceId) {
         const device = devices.get(deviceId);
         if (!device) return;
 
-        const modal = document.getElementById('btDeviceModal');
+        selectedDeviceId = deviceId;
-        const title = document.getElementById('btModalTitle');
+        const panel = document.getElementById('btDetailPanel');
-        const body = document.getElementById('btModalBody');
+        if (!panel) return;
-
-        if (!modal || !body) return;
 
         const rssi = device.rssi_current;
         const rssiColor = getRssiColor(rssi);
+        const rssiPercent = rssi != null ? Math.max(0, Math.min(100, ((rssi + 100) / 70) * 100)) : 0;
         const flags = device.heuristic_flags || [];
         const protocol = device.protocol || 'ble';
 
-        title.textContent = device.name || formatDeviceId(device.address);
+        // Update panel elements
+        document.getElementById('btDetailName').textContent = device.name || formatDeviceId(device.address);
+        document.getElementById('btDetailAddress').textContent = device.address;
+        document.getElementById('btDetailAddress').style.color = '#00d4ff';
 
-        body.innerHTML = `
+        // RSSI section
-            <!-- RSSI Display -->
+        const rssiEl = document.getElementById('btDetailRssi');
-            <div class="bt-modal-rssi">
+        rssiEl.textContent = rssi != null ? rssi : '--';
-                <div class="bt-modal-rssi-value" style="color: ${rssiColor};">
+        rssiEl.style.color = rssiColor;
-                    ${rssi != null ? rssi : '--'} <span style="font-size: 14px; color: #666;">dBm</span>
-                </div>
-                <div class="bt-modal-rssi-label">${device.range_band || 'Unknown'} Range</div>
-            </div>
 
-            <!-- Badges -->
+        const rssiBar = document.getElementById('btDetailRssiBar');
-            <div class="bt-modal-section">
+        rssiBar.style.width = rssiPercent + '%';
-                <span class="bt-modal-badge ${protocol}">${protocol.toUpperCase()}</span>
+        rssiBar.style.background = rssiColor;
-                <span class="bt-modal-badge ${device.in_baseline ? 'baseline' : 'new'}">${device.in_baseline ? '✓ BASELINE' : '● NEW'}</span>
-                ${flags.map(f => `<span class="bt-modal-badge flag">${f.replace('_', ' ').toUpperCase()}</span>`).join('')}
-            </div>
 
-            <!-- Address Info -->
+        document.getElementById('btDetailRange').textContent = (device.range_band || 'Unknown') + ' Range';
-            <div class="bt-modal-section">
-                <div class="bt-modal-section-title">Address</div>
-                <div style="font-family: monospace; font-size: 14px; color: #00d4ff; margin-bottom: 4px;">
-                    ${escapeHtml(device.address)}
-                </div>
-                <div style="font-size: 11px; color: #666;">Type: ${device.address_type || 'unknown'}</div>
-            </div>
 
-            <!-- Stats Grid -->
+        // Badges
-            <div class="bt-modal-section">
+        const badgesEl = document.getElementById('btDetailBadges');
-                <div class="bt-modal-section-title">Device Information</div>
+        let badgesHtml = `<span class="bt-detail-badge ${protocol}">${protocol.toUpperCase()}</span>`;
-                <div class="bt-modal-grid">
+        badgesHtml += `<span class="bt-detail-badge ${device.in_baseline ? 'baseline' : 'new'}">${device.in_baseline ? '✓ KNOWN' : '● NEW'}</span>`;
-                    <div class="bt-modal-stat">
+        flags.forEach(f => {
-                        <div class="bt-modal-stat-label">Manufacturer</div>
+            badgesHtml += `<span class="bt-detail-badge flag">${f.replace(/_/g, ' ').toUpperCase()}</span>`;
-                        <div class="bt-modal-stat-value">${escapeHtml(device.manufacturer_name || 'Unknown')}</div>
+        });
-                    </div>
+        badgesEl.innerHTML = badgesHtml;
-                    <div class="bt-modal-stat">
-                        <div class="bt-modal-stat-label">Manufacturer ID</div>
-                        <div class="bt-modal-stat-value">${device.manufacturer_id != null ? '0x' + device.manufacturer_id.toString(16).toUpperCase().padStart(4, '0') : '--'}</div>
-                    </div>
-                    <div class="bt-modal-stat">
-                        <div class="bt-modal-stat-label">Seen Count</div>
-                        <div class="bt-modal-stat-value">${device.seen_count || 0} times</div>
-                    </div>
-                    <div class="bt-modal-stat">
-                        <div class="bt-modal-stat-label">Confidence</div>
-                        <div class="bt-modal-stat-value">${device.rssi_confidence ? Math.round(device.rssi_confidence * 100) + '%' : '--'}</div>
-                    </div>
-                </div>
-            </div>
 
-            <!-- Signal Stats -->
+        // Stats grid
-            <div class="bt-modal-section">
+        document.getElementById('btDetailMfr').textContent = device.manufacturer_name || 'Unknown';
-                <div class="bt-modal-section-title">Signal Statistics</div>
+        document.getElementById('btDetailMfrId').textContent = device.manufacturer_id != null
-                <div class="bt-modal-grid">
+            ? '0x' + device.manufacturer_id.toString(16).toUpperCase().padStart(4, '0')
-                    <div class="bt-modal-stat">
+            : '--';
-                        <div class="bt-modal-stat-label">Minimum</div>
+        document.getElementById('btDetailAddrType').textContent = device.address_type || 'unknown';
-                        <div class="bt-modal-stat-value" style="color: #ef4444;">${device.rssi_min != null ? device.rssi_min + ' dBm' : '--'}</div>
+        document.getElementById('btDetailSeen').textContent = (device.seen_count || 0) + '×';
-                    </div>
-                    <div class="bt-modal-stat">
-                        <div class="bt-modal-stat-label">Maximum</div>
-                        <div class="bt-modal-stat-value" style="color: #22c55e;">${device.rssi_max != null ? device.rssi_max + ' dBm' : '--'}</div>
-                    </div>
-                    <div class="bt-modal-stat">
-                        <div class="bt-modal-stat-label">Median</div>
-                        <div class="bt-modal-stat-value" style="color: #eab308;">${device.rssi_median != null ? Math.round(device.rssi_median) + ' dBm' : '--'}</div>
-                    </div>
-                    <div class="bt-modal-stat">
-                        <div class="bt-modal-stat-label">Current</div>
-                        <div class="bt-modal-stat-value" style="color: ${rssiColor};">${rssi != null ? rssi + ' dBm' : '--'}</div>
-                    </div>
-                </div>
-            </div>
 
-            <!-- Service UUIDs -->
+        const rssiMinEl = document.getElementById('btDetailRssiMin');
-            ${device.service_uuids && device.service_uuids.length > 0 ? `
+        rssiMinEl.textContent = device.rssi_min != null ? device.rssi_min + ' dBm' : '--';
-            <div class="bt-modal-section">
+        rssiMinEl.style.color = '#ef4444';
-                <div class="bt-modal-section-title">Service UUIDs (${device.service_uuids.length})</div>
-                <div style="display: flex; flex-wrap: wrap; gap: 4px;">
-                    ${device.service_uuids.map(uuid => `<span style="font-family: monospace; font-size: 10px; background: var(--bg-tertiary); padding: 4px 8px; border-radius: 4px; color: #888;">${uuid}</span>`).join('')}
-                </div>
-            </div>
-            ` : ''}
 
-            <!-- Timestamps -->
+        const rssiMaxEl = document.getElementById('btDetailRssiMax');
-            <div class="bt-modal-section">
+        rssiMaxEl.textContent = device.rssi_max != null ? device.rssi_max + ' dBm' : '--';
-                <div class="bt-modal-section-title">Timestamps</div>
+        rssiMaxEl.style.color = '#22c55e';
-                <div class="bt-modal-grid">
-                    <div class="bt-modal-stat">
-                        <div class="bt-modal-stat-label">First Seen</div>
-                        <div class="bt-modal-stat-value">${device.first_seen ? new Date(device.first_seen).toLocaleTimeString() : '--'}</div>
-                    </div>
-                    <div class="bt-modal-stat">
-                        <div class="bt-modal-stat-label">Last Seen</div>
-                        <div class="bt-modal-stat-value">${device.last_seen ? new Date(device.last_seen).toLocaleTimeString() : '--'}</div>
-                    </div>
-                </div>
-            </div>
 
-            <!-- Actions -->
+        document.getElementById('btDetailFirstSeen').textContent = device.first_seen
-            <div class="bt-modal-actions">
+            ? new Date(device.first_seen).toLocaleTimeString()
-                <button class="bt-modal-btn-primary" onclick="BluetoothMode.copyAddress('${device.address}')">
+            : '--';
-                    Copy Address
+        document.getElementById('btDetailLastSeen').textContent = device.last_seen
-                </button>
+            ? new Date(device.last_seen).toLocaleTimeString()
-                <button class="bt-modal-btn-secondary" onclick="BluetoothMode.closeModal()">
+            : '--';
-                    Close
-                </button>
-            </div>
-        `;
 
-        modal.style.display = 'flex';
+        // Services
+        const servicesContainer = document.getElementById('btDetailServices');
+        const servicesList = document.getElementById('btDetailServicesList');
+        if (device.service_uuids && device.service_uuids.length > 0) {
+            servicesContainer.style.display = 'block';
+            servicesList.innerHTML = device.service_uuids.map(uuid =>
+                `<span class="bt-detail-service">${uuid}</span>`
+            ).join('');
+        } else {
+            servicesContainer.style.display = 'none';
+        }
 
-        // Close on overlay click
+        // Show panel
-        modal.onclick = (e) => {
+        panel.style.display = 'block';
-            if (e.target === modal) closeModal();
-        };
 
-        // Close on Escape key
+        // Highlight selected device in list
-        document.addEventListener('keydown', handleModalKeydown);
+        highlightSelectedDevice(deviceId);
     }
 
     /**
-     * Close device detail modal
+     * Clear device selection
      */
-    function closeModal() {
+    function clearSelection() {
-        const modal = document.getElementById('btDeviceModal');
+        selectedDeviceId = null;
-        if (modal) modal.style.display = 'none';
+        const panel = document.getElementById('btDetailPanel');
-        document.removeEventListener('keydown', handleModalKeydown);
+        if (panel) panel.style.display = 'none';
+
+        // Remove highlight from device list
+        if (deviceContainer) {
+            deviceContainer.querySelectorAll('.bt-device-row.selected').forEach(el => {
+                el.classList.remove('selected');
+            });
+        }
     }
 
     /**
-     * Handle keydown for modal
+     * Highlight selected device in the list
      */
-    function handleModalKeydown(e) {
+    function highlightSelectedDevice(deviceId) {
-        if (e.key === 'Escape') closeModal();
+        if (!deviceContainer) return;
+
+        // Remove existing highlights
+        deviceContainer.querySelectorAll('.bt-device-row.selected').forEach(el => {
+            el.classList.remove('selected');
+        });
+
+        // Add highlight to selected device
+        const escapedId = CSS.escape(deviceId);
+        const card = deviceContainer.querySelector(`[data-bt-device-id="${escapedId}"]`);
+        if (card) {
+            card.classList.add('selected');
+        }
+    }
+
+    /**
+     * Copy selected device address to clipboard
+     */
+    function copyAddress() {
+        if (!selectedDeviceId) return;
+        const device = devices.get(selectedDeviceId);
+        if (!device) return;
+
+        navigator.clipboard.writeText(device.address).then(() => {
+            const btn = document.querySelector('.bt-detail-btn');
+            if (btn) {
+                const originalText = btn.textContent;
+                btn.textContent = 'Copied!';
+                btn.style.background = '#22c55e';
+                setTimeout(() => {
+                    btn.textContent = originalText;
+                    btn.style.background = '';
+                }, 1500);
+            }
+        });
     }
 
     /**
      * Select a device - opens modal with details
      */
     function selectDevice(deviceId) {
-        showModal(deviceId);
+        showDeviceDetail(deviceId);
-    }
-
-    /**
-     * Copy address to clipboard
-     */
-    function copyAddress(address) {
-        navigator.clipboard.writeText(address).then(() => {
-            // Brief visual feedback
-            const btn = event.target;
-            const originalText = btn.textContent;
-            btn.textContent = 'Copied!';
-            btn.style.background = '#22c55e';
-            setTimeout(() => {
-                btn.textContent = originalText;
-                btn.style.background = '#252538';
-            }, 1500);
-        });
     }
 
     /**
@@ -910,8 +883,7 @@ const BluetoothMode = (function() {
         clearBaseline,
         exportData,
         selectDevice,
-        showModal,
+        clearSelection,
-        closeModal,
         copyAddress,
         getDevices: () => Array.from(devices.values()),
         isScanning: () => isScanning

templates/index.html

@@ -707,6 +707,70 @@
                 <div class="bt-layout-container" id="btLayoutContainer" style="display: none;">
                     <!-- Left: Bluetooth Visualizations -->
                     <div class="bt-visuals-column" id="btVisuals">
+                        <!-- Device Detail Panel (shown when device selected) -->
+                        <div class="bt-detail-panel" id="btDetailPanel" style="display: none;">
+                            <div class="bt-detail-header">
+                                <div class="bt-detail-title-row">
+                                    <h5 id="btDetailName">Device Name</h5>
+                                    <button class="bt-detail-close" onclick="BluetoothMode.clearSelection()" title="Close">&times;</button>
+                                </div>
+                                <div class="bt-detail-address" id="btDetailAddress">00:00:00:00:00:00</div>
+                            </div>
+                            <div class="bt-detail-body">
+                                <div class="bt-detail-rssi-section">
+                                    <div class="bt-detail-rssi-main">
+                                        <span class="bt-detail-rssi-value" id="btDetailRssi">--</span>
+                                        <span class="bt-detail-rssi-unit">dBm</span>
+                                    </div>
+                                    <div class="bt-detail-rssi-bar-container">
+                                        <div class="bt-detail-rssi-bar" id="btDetailRssiBar"></div>
+                                    </div>
+                                    <div class="bt-detail-rssi-range" id="btDetailRange">Unknown Range</div>
+                                </div>
+                                <div class="bt-detail-badges" id="btDetailBadges"></div>
+                                <div class="bt-detail-grid">
+                                    <div class="bt-detail-stat">
+                                        <span class="bt-detail-stat-label">Manufacturer</span>
+                                        <span class="bt-detail-stat-value" id="btDetailMfr">Unknown</span>
+                                    </div>
+                                    <div class="bt-detail-stat">
+                                        <span class="bt-detail-stat-label">Mfr ID</span>
+                                        <span class="bt-detail-stat-value" id="btDetailMfrId">--</span>
+                                    </div>
+                                    <div class="bt-detail-stat">
+                                        <span class="bt-detail-stat-label">Type</span>
+                                        <span class="bt-detail-stat-value" id="btDetailAddrType">--</span>
+                                    </div>
+                                    <div class="bt-detail-stat">
+                                        <span class="bt-detail-stat-label">Seen</span>
+                                        <span class="bt-detail-stat-value" id="btDetailSeen">0×</span>
+                                    </div>
+                                    <div class="bt-detail-stat">
+                                        <span class="bt-detail-stat-label">Min RSSI</span>
+                                        <span class="bt-detail-stat-value" id="btDetailRssiMin">--</span>
+                                    </div>
+                                    <div class="bt-detail-stat">
+                                        <span class="bt-detail-stat-label">Max RSSI</span>
+                                        <span class="bt-detail-stat-value" id="btDetailRssiMax">--</span>
+                                    </div>
+                                    <div class="bt-detail-stat">
+                                        <span class="bt-detail-stat-label">First Seen</span>
+                                        <span class="bt-detail-stat-value" id="btDetailFirstSeen">--</span>
+                                    </div>
+                                    <div class="bt-detail-stat">
+                                        <span class="bt-detail-stat-label">Last Seen</span>
+                                        <span class="bt-detail-stat-value" id="btDetailLastSeen">--</span>
+                                    </div>
+                                </div>
+                                <div class="bt-detail-services" id="btDetailServices" style="display: none;">
+                                    <span class="bt-detail-stat-label">Services</span>
+                                    <div class="bt-detail-services-list" id="btDetailServicesList"></div>
+                                </div>
+                                <div class="bt-detail-actions">
+                                    <button class="bt-detail-btn" onclick="BluetoothMode.copyAddress()">Copy Address</button>
+                                </div>
+                            </div>
+                        </div>
                         <!-- Proximity Radar -->
                         <div class="wifi-visual-panel bt-radar-panel">
                             <h5>Proximity Radar</h5>