Add details for station

static/script.js

@@ -3,131 +3,153 @@
 
 const API_BASE_URL = '/api/v1/sta';
 const REFRESH_INTERVAL = 2000;
+const DETAILS_REFRESH_INTERVAL =
+    1000; // Refresh selected station details more frequently
 
 let isRefreshing = false;
+let selectedStation = null;
+let detailsRefreshInterval = null;
 
 // DOM Elements
 const stationTableBody = document.getElementById('station-tbody');
 const errorMessage = document.getElementById('error-message');
 const lastUpdate = document.getElementById('last-update');
+const detailsPanel = document.getElementById('station-details-panel');
+const detailsContent = document.getElementById('station-details-content');
 
 // Initialize the application
 document.addEventListener('DOMContentLoaded', function() {
-    // Load initial data
+  // Load initial data
-    refreshStations();
+  refreshStations();
 
-    setInterval(refreshStations, REFRESH_INTERVAL);
+  setInterval(refreshStations, REFRESH_INTERVAL);
 });
 
 // Refresh station data
 async function refreshStations() {
-    if (isRefreshing) return; // Prevent concurrent refreshes
+  if (isRefreshing)
+    return; // Prevent concurrent refreshes
 
-    isRefreshing = true;
+  isRefreshing = true;
 
-    try {
+  try {
-        // Fetch station list
+    // Fetch station list
-        const stations = await fetchStations();
+    const stations = await fetchStations();
 
-        if (stations.length === 0) {
+    if (stations.length === 0) {
-            showNoStations();
+      showNoStations();
-        } else {
+    } else {
-            // Fetch details for each station and populate table
+      // Fetch details for each station and populate table
-            await populateStationTable(stations);
+      await populateStationTable(stations);
-        }
-        
-        // Update last refresh time
-        lastUpdate.textContent = `Last update: ${new Date().toLocaleTimeString()}`;
-        
-        // Hide any previous error messages
-        hideError();
-        
-    } catch (error) {
-        console.error('Error refreshing stations:', error);
-        showError('Failed to load station data. Please check if the API is running.');
-    } finally {
-        isRefreshing = false;
     }
+
+    // Update last refresh time
+    lastUpdate.textContent = `Last update: ${new Date().toLocaleTimeString()}`;
+
+    // Hide any previous error messages
+    hideError();
+
+  } catch (error) {
+    console.error('Error refreshing stations:', error);
+    showError(
+        'Failed to load station data. Please check if the API is running.');
+  } finally {
+    isRefreshing = false;
+  }
 }
 
 // Fetch list of connected stations
 async function fetchStations() {
-    const response = await fetch(`${API_BASE_URL}/list`);
+  const response = await fetch(`${API_BASE_URL}/list`);
 
-    if (!response.ok) {
+  if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
+    throw new Error(`HTTP error! status: ${response.status}`);
-    }
+  }
 
-    return await response.json();
+  return await response.json();
 }
 
 // Populate table with station data
 async function populateStationTable(stations) {
-    // Process each station concurrently
+  // Process each station concurrently
-    const stationPromises = stations.map(async (mac) => {
+  const stationPromises = stations.map(async (mac) => {
-        try {
+    try {
-            const details = await fetchStationDetails(mac);
+      const details = await fetchStationDetails(mac);
-            return { mac, details, error: null };
+      return {mac, details, error : null};
-        } catch (error) {
+    } catch (error) {
-            return { mac, details: null, error: error.message };
+      return {mac, details : null, error : error.message};
-        }
+    }
-    });
+  });
 
-    const stationResults = await Promise.all(stationPromises);
+  const stationResults = await Promise.all(stationPromises);
 
-    const rows = [];
+  const rows = [];
-    // Add rows to table
+  // Add rows to table
-    stationResults.forEach(({ mac, details, error }) => {
+  stationResults.forEach(({mac, details, error}) => {
-        const row = document.createElement('tr');
+    const row = document.createElement('tr');
+    row.dataset.mac = mac; // Store MAC address for selection
 
-        if (error) {
+    if (error) {
-            row.innerHTML = `
+      row.innerHTML = `
                 <td>${mac}</td>
                 <td colspan="6" class="error">Error: ${error}</td>
             `;
-        } else {
+    } else {
-            // Calculate total bytes
+      // Calculate total bytes
-            const rxBytes = parseInt(details.rx_bytes) || 0;
+      const rxBytes = parseInt(details.rx_bytes) || 0;
-            const txBytes = parseInt(details.tx_bytes) || 0;
+      const txBytes = parseInt(details.tx_bytes) || 0;
 
-            // Determine signal strength category
+      // Determine signal strength category
-            const signal = parseInt(details.signal) || 0;
+      const signal = parseInt(details.signal) || 0;
-            let signalClass = 'status-established';
+      let signalClass = 'status-established';
-            if (signal < -80) signalClass = 'status-new';
+      if (signal < -80)
-            else if (signal < -60) signalClass = 'status-medium';
+        signalClass = 'status-new';
+      else if (signal < -60)
+        signalClass = 'status-medium';
 
-            row.innerHTML = `
+      row.innerHTML = `
-                <td><span class="${getConnectionStatusClass(details.connected_time)}">${mac}</span></td>
+                <td><span class="${
+          getConnectionStatusClass(details.connected_time)}">${mac}</span></td>
                 <td><span class="${signalClass}">${signal} dBm</span></td>
-                <td>${formatDataRate(details.rx_rate_info)}/${formatDataRate(details.tx_rate_info)}</td>
+                <td>${formatDataRate(details.rx_rate_info)}/${
+          formatDataRate(details.tx_rate_info)}</td>
                 <td>${formatBytes(rxBytes)}/${formatBytes(txBytes)}</td>
             `;
-        }
+    }
-        rows.push(row);    
+
-    });
+    // Add click handler for station selection
-    stationTableBody.replaceChildren(...rows);
+    row.addEventListener('click', () => selectStation(mac, details, error));
+
+    // Highlight selected station
+    if (mac === selectedStation) {
+      row.classList.add('selected');
+    }
+
+    rows.push(row);
+  });
+  stationTableBody.replaceChildren(...rows);
 }
 
 // Fetch details for a specific station
 async function fetchStationDetails(mac) {
-    const response = await fetch(`${API_BASE_URL}/details/${mac}`);
+  const response = await fetch(`${API_BASE_URL}/details/${mac}`);
 
-    if (!response.ok) {
+  if (!response.ok) {
-        if (response.status === 404) {
+    if (response.status === 404) {
-            throw new Error('Station not found');
+      throw new Error('Station not found');
-        } else if (response.status === 400) {
+    } else if (response.status === 400) {
-            throw new Error('Invalid MAC address');
+      throw new Error('Invalid MAC address');
-        } else {
+    } else {
-            throw new Error(`HTTP error! status: ${response.status}`);
+      throw new Error(`HTTP error! status: ${response.status}`);
-        }
     }
+  }
 
-    return await response.json();
+  return await response.json();
 }
 
 // Show message when no stations are connected
 function showNoStations() {
-    stationTableBody.innerHTML = `
+  stationTableBody.innerHTML = `
         <tr>
             <td colspan="7" class="loading">No stations connected</td>
         </tr>
@@ -136,49 +158,332 @@ function showNoStations() {
 
 // Show error message
 function showError(message) {
-    errorMessage.querySelector('p').textContent = message;
+  errorMessage.querySelector('p').textContent = message;
-    errorMessage.classList.remove('hidden');
+  errorMessage.classList.remove('hidden');
 }
 
 // Hide error message
-function hideError() {
+function hideError() { errorMessage.classList.add('hidden'); }
-    errorMessage.classList.add('hidden');
-}
 
 // Format data rate (assuming it's in Mbps or similar)
 function formatDataRate(rateStr) {
-    if (!rateStr) return 'N/A';
+  if (!rateStr)
+    return 'N/A';
 
-    const rate = parseInt(rateStr);
+  const rate = parseInt(rateStr);
-    if (isNaN(rate)) return rateStr;
+  if (isNaN(rate))
+    return rateStr;
 
-    // Convert to Mbps if it seems to be in a different unit
+  // Convert to Mbps if it seems to be in a different unit
-    if (rate > 1000) {
+  if (rate > 1000) {
-        return `${(rate / 1000).toFixed(1)} Mbps`;
+    return `${(rate / 1000).toFixed(1)} Mbps`;
-    }
+  }
-    return `${rate} Mbps`;
+  return `${rate} Mbps`;
 }
 
 // Format bytes to human readable format
 function formatBytes(bytes) {
-    if (bytes === 0) return '0 B';
+  if (bytes === 0)
-    if (!bytes) return 'N/A';
+    return '0 B';
+  if (!bytes)
+    return 'N/A';
 
-    const k = 1024;
+  const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
+  const sizes = [ 'B', 'KB', 'MB', 'GB' ];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
 
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 }
 
 // Get CSS class for connection status
 function getConnectionStatusClass(connectedTimeStr) {
-    if (!connectedTimeStr) return 'status-established';
+  if (!connectedTimeStr)
+    return 'status-established';
 
-    const seconds = parseInt(connectedTimeStr);
+  const seconds = parseInt(connectedTimeStr);
-    if (isNaN(seconds)) return 'status-established';
+  if (isNaN(seconds))
+    return 'status-established';
 
-    if (seconds < 60) return 'status-new';
+  if (seconds < 60)
-    else if (seconds < 300) return 'status-medium';
+    return 'status-new';
-    else return 'status-established';
+  else if (seconds < 300)
+    return 'status-medium';
+  else
+    return 'status-established';
+}
+
+// Select a station and show its details
+function selectStation(mac, details, error) {
+  // Update selected station
+  selectedStation = mac;
+
+  // Highlight selected row
+  const rows = stationTableBody.querySelectorAll('tr');
+  rows.forEach(row => {
+    if (row.dataset.mac === mac) {
+      row.classList.add('selected');
+    } else {
+      row.classList.remove('selected');
+    }
+  });
+
+  // Show details panel
+  if (error) {
+    showStationDetailsError(mac, error);
+  } else {
+    showStationDetails(mac, details);
+  }
+
+  // Start continuous details refresh
+  startDetailsRefresh(mac);
+}
+
+// Friendly names mapping for known fields
+const FIELD_FRIENDLY_NAMES = {
+  '80211RSNAStatsSTAAddress' : 'RSNA Stats STA Address',
+  '80211RSNAStatsSelectedPairwiseCipher' : 'RSNA Selected Pairwise Cipher',
+  '80211RSNAStatsTKIPLocalMICFailures' : 'RSNA TKIP Local MIC Failures',
+  '80211RSNAStatsTKIPRemoteMICFailures' : 'RSNA TKIP Remote MIC Failures',
+  '80211RSNAStatsVersion' : 'RSNA Stats Version',
+  'AKMSuiteSelector' : 'AKM Suite Selector',
+  'aid' : 'Association ID',
+  'auth_alg' : 'Authentication Algorithm',
+  'auth_failures' : 'Authentication Failures',
+  'authenticated' : 'Authenticated',
+  'authorized' : 'Authorized',
+  'capability' : 'Capability',
+  'channel_width' : 'Channel Width',
+  'connected_time' : 'Connected Time',
+  'dot11RSNAStatsSTAAddress' : 'Dot11 RSNA Stats STA Address',
+  'dot11RSNAStatsSelectedPairwiseCipher' :
+      'Dot11 RSNA Selected Pairwise Cipher',
+  'dot11RSNAStatsTKIPLocalMICFailures' : 'Dot11 RSNA TKIP Local MIC Failures',
+  'dot11RSNAStatsTKIPRemoteMICFailures' : 'Dot11 RSNA TKIP Remote MIC Failures',
+  'dot11RSNAStatsVersion' : 'Dot11 RSNA Stats Version',
+  'ext_capab' : 'Extended Capabilities',
+  'flags' : 'Flags',
+  'hostapdMFPR' : 'Hostapd MFPR',
+  'hostapdWPAPTKGroupState' : 'Hostapd WPA PTK Group State',
+  'hostapdWPAPTKState' : 'Hostapd WPA PTK State',
+  'ht_caps_info' : 'HT Capabilities Info',
+  'ht_operation' : 'HT Operation',
+  'inactive_msec' : 'Inactive Time (ms)',
+  'listen_interval' : 'Listen Interval',
+  'max_amsdu_length' : 'Max AMSDU Length',
+  'noise' : 'Noise Level',
+  'num_ps_buf_frames' : 'Number of PS Buffer Frames',
+  'ps_buf_frames_freed' : 'PS Buffer Frames Freed',
+  'ps_buffering' : 'Power Save Buffering',
+  'rx_bitrate' : 'RX Bitrate',
+  'rx_bytes' : 'RX Bytes',
+  'rx_packets' : 'RX Packets',
+  'rx_rate_info' : 'RX Rate Info',
+  'short_preamble' : 'Short Preamble',
+  'signal' : 'Signal Strength',
+  'snr' : 'Signal-to-Noise Ratio',
+  'supp_channels' : 'Supported Channels',
+  'supp_op_classes' : 'Supported Operating Classes',
+  'supported_rates' : 'Supported Rates',
+  'timeout_next' : 'Next Timeout Action',
+  'tx_ampdu_len' : 'TX AMPDU Length',
+  'tx_ampdu_pkts' : 'TX AMPDU Packets',
+  'tx_bitrate' : 'TX Bitrate',
+  'tx_bytes' : 'TX Bytes',
+  'tx_failed' : 'TX Failed',
+  'tx_packets' : 'TX Packets',
+  'tx_rate_info' : 'TX Rate Info',
+  'vht_caps_info' : 'VHT Capabilities Info',
+  'vht_operation' : 'VHT Operation',
+  'wmm_ie' : 'WMM IE',
+  'wpa' : 'WPA Version'
+};
+
+// Show station details in the details panel
+function showStationDetails(mac, details) {
+  // Build details HTML with all fields
+  let detailsHTML = `
+        <div class="detail-item">
+            <div class="detail-label">MAC Address</div>
+            <div class="detail-value mono">${mac}</div>
+        </div>
+    `;
+
+  // Separate known important fields from others
+  const importantFields = [
+    'connected_time', 'signal', 'rx_packets', 'tx_packets', 'rx_bytes',
+    'tx_bytes', 'rx_rate_info', 'tx_rate_info', 'flags', 'capability',
+    'auth_alg'
+  ];
+
+  // Display important fields first
+  importantFields.forEach(field => {
+    if (details.hasOwnProperty(field)) {
+      const friendlyName = FIELD_FRIENDLY_NAMES[field] || formatFieldName(field);
+      const value = formatFieldValue(field, details[field]);
+      const displayValue = value.toString();
+      
+      // Check if field name or value is too long for tooltip
+      const needsTooltip = friendlyName.length > 25 || displayValue.length > 30;
+      
+      let labelHTML = friendlyName;
+      if (friendlyName.length > 25) {
+        labelHTML = `<span class="tooltip">${friendlyName.substring(0, 22)}...<span class="tooltiptext">${friendlyName}</span></span>`;
+      }
+      
+      let valueHTML = displayValue;
+      if (displayValue.length > 30) {
+        valueHTML = `<span class="tooltip">${displayValue.substring(0, 27)}...<span class="tooltiptext">${displayValue}</span></span>`;
+      }
+
+      detailsHTML += `
+        <div class="detail-item">
+            <div class="detail-label">${labelHTML}</div>
+            <div class="detail-value">${valueHTML}</div>
+        </div>`;
+    }
+  });
+
+  // Display all other fields
+  const otherFields =
+      Object.keys(details).filter(key => !importantFields.includes(key));
+  if (otherFields.length > 0) {
+    // Group fields alphabetically for better organization
+    otherFields.sort().forEach(key => {
+      const friendlyName = FIELD_FRIENDLY_NAMES[key] || formatFieldName(key);
+      const value = formatFieldValue(key, details[key]);
+      const displayValue = value.toString();
+      
+      // Check if field name or value is too long for tooltip
+      const needsTooltip = friendlyName.length > 25 || displayValue.length > 30;
+      
+      let labelHTML = friendlyName;
+      if (friendlyName.length > 25) {
+        labelHTML = `<span class="tooltip">${friendlyName.substring(0, 22)}...<span class="tooltiptext">${friendlyName}</span></span>`;
+      }
+      
+      let valueHTML = displayValue;
+      if (displayValue.length > 30) {
+        valueHTML = `<span class="tooltip">${displayValue.substring(0, 27)}...<span class="tooltiptext">${displayValue}</span></span>`;
+      }
+
+      detailsHTML += `
+        <div class="detail-item">
+            <div class="detail-label">${labelHTML}</div>
+            <div class="detail-value">${valueHTML}</div>
+        </div>`;
+    });
+  }
+
+  detailsContent.innerHTML = detailsHTML;
+}
+
+// Format field names to be more readable
+function formatFieldName(fieldName) {
+  // Convert camelCase to Title Case
+  let formatted = fieldName.replace(/([A-Z])/g, ' $1');
+  // Replace underscores with spaces
+  formatted = formatted.replace(/_/g, ' ');
+  // Capitalize first letter
+  formatted = formatted.charAt(0).toUpperCase() + formatted.slice(1);
+  return formatted;
+}
+
+// Format field values based on their type
+function formatFieldValue(fieldName, value) {
+  if (value === undefined || value === null) {
+    return 'N/A';
+  }
+
+  // Handle numeric fields
+  if (fieldName.includes('bytes')) {
+    const numValue = parseInt(value);
+    return isNaN(numValue) ? value : formatBytes(numValue);
+  }
+
+  if (fieldName.includes('rate') && fieldName.includes('info')) {
+    return formatDataRate(value);
+  }
+
+  if (fieldName.includes('time')) {
+    const numValue = parseInt(value);
+    return isNaN(numValue) ? value : formatConnectedTime(value);
+  }
+
+  if (fieldName.includes('signal') || fieldName.includes('noise') ||
+      fieldName.includes('snr')) {
+    const numValue = parseInt(value);
+    return isNaN(numValue) ? value : `${numValue} dBm`;
+  }
+
+  // Handle flag-like fields
+  if (typeof value === 'string' && (value === 'true' || value === 'false')) {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+  }
+
+  // Handle hex values
+  if (typeof value === 'string' && value.match(/^[0-9a-fA-F\-]+$/)) {
+    return value.toUpperCase();
+  }
+
+  return value.toString();
+}
+
+// Show error in details panel
+function showStationDetailsError(mac, error) {
+  detailsContent.innerHTML = `
+        <div class="detail-item">
+            <div class="detail-label">MAC Address</div>
+            <div class="detail-value mono">${mac}</div>
+        </div>
+        <div class="detail-item">
+            <div class="detail-label">Error</div>
+            <div class="detail-value error">${error}</div>
+        </div>
+    `;
+}
+
+// Format connected time to human readable format
+function formatConnectedTime(secondsStr) {
+  if (!secondsStr)
+    return 'Unknown';
+
+  const seconds = parseInt(secondsStr);
+  if (isNaN(seconds))
+    return secondsStr;
+
+  if (seconds < 60) {
+    return `${seconds} seconds`;
+  } else if (seconds < 3600) {
+    const minutes = Math.floor(seconds / 60);
+    return `${minutes} minute${minutes !== 1 ? 's' : ''}`;
+  } else {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    return `${hours} hour${hours !== 1 ? 's' : ''} ${minutes} minute${
+        minutes !== 1 ? 's' : ''}`;
+  }
+}
+
+// Start continuous details refresh for selected station
+function startDetailsRefresh(mac) {
+  stopDetailsRefresh(); // Clear any existing interval
+
+  detailsRefreshInterval = setInterval(async () => {
+    if (selectedStation) {
+      try {
+        const details = await fetchStationDetails(selectedStation);
+        showStationDetails(selectedStation, details);
+      } catch (error) {
+        showStationDetailsError(selectedStation, error.message);
+      }
+    }
+  }, DETAILS_REFRESH_INTERVAL);
+}
+
+// Stop continuous details refresh
+function stopDetailsRefresh() {
+  if (detailsRefreshInterval) {
+    clearInterval(detailsRefreshInterval);
+    detailsRefreshInterval = null;
+  }
 }

static/styles.css

@@ -40,38 +40,17 @@ header h1 {
     color: #666;
 }
 
-/* Controls */
+/* Main layout */
-.controls {
+.main-layout {
     display: flex;
-    justify-content: space-between;
+    gap: 20px;
-    align-items: center;
+    min-height: 500px;
-    margin-bottom: 20px;
-    background: white;
-    padding: 15px 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
-.btn-primary {
+/* Adjust layout for always-visible details panel */
-    background-color: #3498db;
+.content-area {
-    color: white;
+    flex: 1;
-    border: none;
+    min-width: 300px;
-    padding: 10px 20px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 14px;
-    transition: background-color 0.3s;
-}
-
-.btn-primary:hover {
-    background-color: #2980b9;
-}
-
-.auto-refresh label {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    cursor: pointer;
 }
 
 /* Table styles */
@@ -108,6 +87,24 @@ tr:hover {
     background-color: #f8f9fa;
 }
 
+tr.selected {
+    background-color: #e3f2fd;
+    cursor: pointer;
+}
+
+tr.selected:hover {
+    background-color: #bbdefb;
+}
+
+tr.selected td:first-child {
+    border-left: 4px solid #2196f3;
+}
+
+tr:not(.selected):hover {
+    background-color: #f8f9fa;
+    cursor: pointer;
+}
+
 /* Status colors */
 .status-new {
     background-color: #e74c3c;
@@ -139,6 +136,146 @@ tr:hover {
     text-align: center;
 }
 
+/* Details panel */
+.details-panel {
+    width: 400px;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    display: flex;
+    flex-direction: column;
+}
+
+.details-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #34495e;
+    color: white;
+    padding: 15px 20px;
+    border-radius: 8px 8px 0 0;
+}
+
+.details-header h2 {
+    margin: 0;
+    font-size: 1.2em;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 1.5em;
+    cursor: pointer;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+}
+
+.close-btn:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.details-content {
+    padding: 20px;
+    flex: 1;
+    overflow-y: auto;
+    max-height: 500px;
+}
+
+.detail-item {
+    display: flex;
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #ecf0f1;
+    align-items: flex-start;
+}
+
+.detail-item:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.detail-label {
+    font-weight: 600;
+    color: #2c3e50;
+    min-width: 150px;
+    padding-right: 15px;
+    text-align: left;
+    flex-shrink: 0;
+}
+
+.detail-value {
+    color: #34495e;
+    flex: 1;
+    text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    position: relative;
+}
+
+/* Tooltip styling */
+.tooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted #95a5a6;
+    cursor: help;
+}
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 200px;
+    background-color: #34495e;
+    color: #fff;
+    text-align: left;
+    border-radius: 6px;
+    padding: 8px;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: opacity 0.3s;
+    font-size: 0.9em;
+    font-weight: normal;
+    word-wrap: break-word;
+    white-space: normal;
+}
+
+.tooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #34495e transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+}
+
+/* Mono font for technical values */
+.detail-value.mono {
+    font-family: monospace;
+    font-size: 0.9em;
+}
+
+.detail-value.mono {
+    font-family: monospace;
+    font-size: 0.9em;
+}
+
 /* Loading and error states */
 .loading {
     text-align: center;
@@ -170,6 +307,34 @@ footer {
 }
 
 /* Responsive design */
+@media (max-width: 1024px) {
+    .main-layout {
+        flex-direction: column;
+    }
+    
+    .details-panel {
+        width: 100%;
+    }
+    
+    .container {
+        padding: 10px;
+    }
+    
+    table {
+        font-size: 0.9em;
+    }
+    
+    th, td {
+        padding: 8px 10px;
+    }
+    
+    .status-bar {
+        flex-direction: column;
+        gap: 5px;
+        text-align: center;
+    }
+}
+
 @media (max-width: 768px) {
     .container {
         padding: 10px;
@@ -183,12 +348,6 @@ footer {
         padding: 8px 10px;
     }
     
-    .controls {
-        flex-direction: column;
-        gap: 10px;
-        text-align: center;
-    }
-    
     .status-bar {
         flex-direction: column;
         gap: 5px;

templates/index.html

@@ -15,27 +15,38 @@
             </div>
         </header>
 
-        <main>
+        <main class="main-layout">
-            <div class="station-table-container">
+            <div class="content-area">
-                <table id="station-table">
+                <div class="station-table-container">
-                    <thead>
+                    <table id="station-table">
-                        <tr>
+                        <thead>
-                            <th>MAC Address</th>
+                            <tr>
-                            <th>Signal Strength</th>
+                                <th>MAC Address</th>
-                            <th>Rate(rx/tx)</th>
+                                <th>Signal Strength</th>
-                            <th>Bytes(rx/tx)</th>
+                                <th>Rate(rx/tx)</th>
-                        </tr>
+                                <th>Bytes(rx/tx)</th>
-                    </thead>
+                            </tr>
-                    <tbody id="station-tbody">
+                        </thead>
-                        <tr>
+                        <tbody id="station-tbody">
-                            <td colspan="7" class="loading">Loading station data...</td>
+                            <tr>
-                        </tr>
+                                <td colspan="7" class="loading">Loading station data...</td>
-                    </tbody>
+                            </tr>
-                </table>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div id="error-message" class="error hidden">
+                    <p>Error loading station data. Please check if the API is running.</p>
+                </div>
             </div>
 
-            <div id="error-message" class="error hidden">
+            <div id="station-details-panel" class="details-panel">
-                <p>Error loading station data. Please check if the API is running.</p>
+                <div class="details-header">
+                    <h2>Station Details</h2>
+                </div>
+                <div id="station-details-content" class="details-content">
+                    <div class="loading">Select a station to view details</div>
+                </div>
             </div>
         </main>