feat(ui): improve network connection display with operator lookup

Add operators.json with MCC/MNC codes for common operators.
Parse AT+COPS? response to show operator name, country, technology,
and connection mode in a user-friendly format.

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

html/saraR4.html

@@ -101,16 +101,19 @@
               </div>
             </div>
       
-            <div class="col-sm-2">
+            <div class="col-sm-3">
               <div class="card">
-              
+
                 <div class="card-body">
                   <p class="card-text">Actual Network connection</p>
-                  <button class="btn btn-primary" onclick="getData_saraR4('ttyAMA2', 'AT+COPS?', 2)">Get Data</button>
+                  <button class="btn btn-primary" onclick="getNetworkInfo('ttyAMA2', 2)">Get Data</button>
                   <div id="loading_ttyAMA2_AT_COPS_" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
-                  <div id="response_ttyAMA2_AT_COPS_"></div>
-      
-                  </table>
+                  <div id="network_info_alert"></div>
+                  <div class="collapse mt-2" id="network_info_logs">
+                    <div class="card card-body bg-light">
+                      <small><code id="response_ttyAMA2_AT_COPS_"></code></small>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -641,6 +644,149 @@ function getSimInfo(port, timeout) {
   });
 }
 
+// Cache for operators data
+let operatorsData = null;
+
+function loadOperatorsData() {
+  return new Promise((resolve, reject) => {
+    if (operatorsData) {
+      resolve(operatorsData);
+      return;
+    }
+    $.ajax({
+      url: 'assets/data/operators.json',
+      dataType: 'json',
+      method: 'GET',
+      success: function(data) {
+        operatorsData = data;
+        resolve(data);
+      },
+      error: function(xhr, status, error) {
+        console.error('Failed to load operators data:', error);
+        reject(error);
+      }
+    });
+  });
+}
+
+function getNetworkInfo(port, timeout) {
+  console.log("Getting network info from port " + port);
+
+  $("#loading_ttyAMA2_AT_COPS_").show();
+  $("#network_info_alert").empty();
+  $("#response_ttyAMA2_AT_COPS_").empty();
+
+  // Load operators data first, then query modem
+  loadOperatorsData().then(function(opData) {
+    $.ajax({
+      url: 'launcher.php?type=sara&port=' + port + '&command=' + encodeURIComponent('AT+COPS?') + '&timeout=' + timeout,
+      dataType: 'text',
+      method: 'GET',
+      success: function(response) {
+        console.log("COPS response:", response);
+        $("#loading_ttyAMA2_AT_COPS_").hide();
+
+        // Store raw logs
+        const formattedLogs = response.replace(/\n/g, "<br>");
+        $("#response_ttyAMA2_AT_COPS_").html(formattedLogs);
+
+        // Parse response: +COPS: <mode>[,<format>,<oper>[,<AcT>]]
+        let alertHtml = '';
+        const copsMatch = response.match(/\+COPS:\s*(\d+)(?:,(\d+),"?([^",]+)"?,(\d+))?/);
+
+        if (response.includes('OK') && copsMatch) {
+          const mode = copsMatch[1];
+          const format = copsMatch[2];
+          const oper = copsMatch[3];
+          const act = copsMatch[4];
+
+          // Get mode description
+          const modeDesc = opData.modes[mode] || 'Unknown';
+
+          // Get operator name
+          let operatorName = oper || 'Not registered';
+          let operatorCountry = '';
+          if (oper && opData.operators[oper]) {
+            operatorName = opData.operators[oper].name;
+            operatorCountry = opData.operators[oper].country;
+          }
+
+          // Get access technology
+          const actDesc = act ? (opData.accessTechnology[act] || 'Unknown') : 'N/A';
+
+          if (oper) {
+            alertHtml = `
+              <div class="alert alert-success py-2 mb-0 mt-2 d-flex justify-content-between align-items-center" role="alert">
+                <div>
+                  <strong>Connected to network</strong><br>
+                  <small>
+                    Operator: ${operatorName}${operatorCountry ? ' (' + operatorCountry + ')' : ''}<br>
+                    Technology: ${actDesc}<br>
+                    Mode: ${modeDesc}
+                  </small>
+                </div>
+                <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#network_info_logs" aria-expanded="false" aria-controls="network_info_logs">
+                  <small>+</small>
+                </button>
+              </div>`;
+          } else {
+            alertHtml = `
+              <div class="alert alert-warning py-2 mb-0 mt-2 d-flex justify-content-between align-items-center" role="alert">
+                <div>
+                  <strong>Not registered</strong><br>
+                  <small>Mode: ${modeDesc}</small>
+                </div>
+                <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#network_info_logs" aria-expanded="false" aria-controls="network_info_logs">
+                  <small>+</small>
+                </button>
+              </div>`;
+          }
+        } else if (response.includes('ERROR') || response.trim() === '' || !response.includes('OK')) {
+          alertHtml = `
+            <div class="alert alert-danger py-2 mb-0 mt-2 d-flex justify-content-between align-items-center" role="alert">
+              <div>
+                <strong>Network error</strong><br>
+                <small>Unable to get network info</small>
+              </div>
+              <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#network_info_logs" aria-expanded="false" aria-controls="network_info_logs">
+                <small>+</small>
+              </button>
+            </div>`;
+        } else {
+          alertHtml = `
+            <div class="alert alert-warning py-2 mb-0 mt-2 d-flex justify-content-between align-items-center" role="alert">
+              <div>
+                <strong>Unknown response</strong><br>
+                <small>Check logs for details</small>
+              </div>
+              <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#network_info_logs" aria-expanded="false" aria-controls="network_info_logs">
+                <small>+</small>
+              </button>
+            </div>`;
+        }
+
+        $("#network_info_alert").html(alertHtml);
+      },
+      error: function(xhr, status, error) {
+        console.error('AJAX request failed:', status, error);
+        $("#loading_ttyAMA2_AT_COPS_").hide();
+        $("#network_info_alert").html(`
+          <div class="alert alert-danger py-2 mb-0 mt-2" role="alert">
+            <strong>Communication error</strong><br>
+            <small>${error}</small>
+          </div>`);
+      }
+    });
+  }).catch(function(error) {
+    $("#loading_ttyAMA2_AT_COPS_").hide();
+    $("#network_info_alert").html(`
+      <div class="alert alert-danger py-2 mb-0 mt-2" role="alert">
+        <strong>Configuration error</strong><br>
+        <small>Failed to load operators data</small>
+      </div>`);
+  });
+}
+
 function getData_saraR4(port, command, timeout){
         console.log("Data from SaraR4");
         console.log("Port: " + port );