fix(meshcore): restyle to strip layout, fix map tiles

Replaced inner-sidebar layout (which collided with the generic app
sidebar) with a Meshtastic-style top connection strip + body row.
Contacts/nodes panel sits left of the tabbed content area, matching
the established pattern. Map now uses Settings.createTileLayer() with
a dark CartoDB fallback instead of plain OSM light tiles.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/css/modes/meshcore.css

@@ -1,58 +1,95 @@
 /* Meshcore mode — scoped styles */
 
-/* Override the shared mesh-visuals-container column layout */
+/* ── Container overrides ── */
 #meshcoreVisuals {
-    flex-direction: row;
+    flex-direction: column;
     padding: 0;
     gap: 0;
 }
 
 #meshcoreMode {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     flex: 1;
     min-height: 0;
     overflow: hidden;
     gap: 0;
 }
 
-/* ── Sidebar ── */
+/* ── Connection strip ── */
-.meshcore-sidebar {
+.meshcore-strip {
-    width: 220px;
-    min-width: 220px;
-    background: var(--bg-card);
-    border-right: 1px solid var(--border-color);
     display: flex;
-    flex-direction: column;
+    align-items: center;
-    overflow-y: auto;
+    gap: 8px;
-    flex-shrink: 0;
+    padding: 6px 12px;
-}
+    background: var(--bg-card);
-
-.meshcore-sidebar-section {
-    padding: 10px;
     border-bottom: 1px solid var(--border-color);
+    flex-shrink: 0;
+    flex-wrap: wrap;
 }
 
-.meshcore-sidebar-section h4 {
+.meshcore-strip-group {
-    font-size: 10px;
+    display: flex;
-    text-transform: uppercase;
+    align-items: center;
-    letter-spacing: 0.08em;
+    gap: 6px;
+}
+
+.meshcore-strip-divider {
+    width: 1px;
+    height: 20px;
+    background: var(--border-color);
+    margin: 0 4px;
+}
+
+.meshcore-strip-status-text {
+    font-size: 12px;
     color: var(--text-muted);
-    margin: 0 0 8px;
 }
 
-/* ── Connection panel ── */
+.meshcore-strip-select {
+    background: var(--bg-input);
+    border: 1px solid var(--border-color);
+    color: var(--text-primary);
+    padding: 4px 6px;
+    font-size: 12px;
+    border-radius: 3px;
+}
+
+.meshcore-strip-input {
+    background: var(--bg-input);
+    border: 1px solid var(--border-color);
+    color: var(--text-primary);
+    padding: 4px 6px;
+    font-size: 12px;
+    border-radius: 3px;
+    font-family: var(--font-mono);
+}
+
+.meshcore-strip-btn {
+    padding: 4px 10px;
+    font-size: 12px;
+    border-radius: 3px;
+    cursor: pointer;
+    border: 1px solid var(--border-color);
+    background: var(--bg-input);
+    color: var(--text-primary);
+    transition: background 0.15s;
+}
+
+.meshcore-strip-btn:hover { opacity: 0.85; }
+.meshcore-strip-btn.connect { background: var(--accent-cyan); color: #000; border-color: var(--accent-cyan); }
+.meshcore-strip-btn.disconnect { border-color: #f44336; color: #f44336; }
+.meshcore-strip-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* Transport tabs in strip */
 .meshcore-transport-tabs {
     display: flex;
-    gap: 4px;
+    gap: 2px;
-    margin-bottom: 8px;
 }
 
 .meshcore-transport-tab {
-    flex: 1;
+    padding: 3px 8px;
-    padding: 4px 0;
     font-size: 11px;
-    text-align: center;
     background: var(--bg-input);
     border: 1px solid var(--border-color);
     border-radius: 3px;
@@ -67,23 +104,84 @@
     border-color: var(--accent-cyan);
 }
 
-/* ── Status indicator ── */
+/* Strip stats */
+.meshcore-strip-stat {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 40px;
+}
+
+.meshcore-strip-value {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--accent-cyan);
+    font-family: var(--font-mono);
+    line-height: 1;
+}
+
+.meshcore-strip-label {
+    font-size: 9px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-muted);
+}
+
+/* ── Status dot ── */
 .meshcore-status-dot {
     display: inline-block;
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    margin-right: 6px;
     background: var(--text-muted);
+    flex-shrink: 0;
 }
 
-.meshcore-status-dot.connected { background: #4caf50; box-shadow: 0 0 5px #4caf50; }
+.meshcore-status-dot.connected   { background: #4caf50; box-shadow: 0 0 5px #4caf50; }
-.meshcore-status-dot.connecting { background: #ff9800; animation: meshcore-pulse 1s infinite; }
+.meshcore-status-dot.connecting  { background: #ff9800; animation: meshcore-pulse 1s infinite; }
-.meshcore-status-dot.error { background: #f44336; }
+.meshcore-status-dot.error       { background: #f44336; }
 
 @keyframes meshcore-pulse {
     0%, 100% { opacity: 1; }
-    50% { opacity: 0.3; }
+    50%       { opacity: 0.3; }
+}
+
+/* ── Body (panel + content) ── */
+.meshcore-body {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+/* ── Left contacts/nodes panel ── */
+.meshcore-panel {
+    width: 200px;
+    min-width: 200px;
+    background: var(--bg-card);
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+.meshcore-panel-section {
+    padding: 10px;
+    border-bottom: 1px solid var(--border-color);
+    overflow-y: auto;
+}
+
+.meshcore-panel-section--grow {
+    flex: 1;
+}
+
+.meshcore-panel-title {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-muted);
+    margin-bottom: 8px;
 }
 
 /* ── Node / contact list items ── */
@@ -116,18 +214,28 @@
 .meshcore-node-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .meshcore-node-meta { font-size: 10px; color: var(--text-muted); }
 
-/* ── Main content area ── */
+.meshcore-empty {
-.meshcore-main {
+    font-size: 11px;
+    color: var(--text-muted);
+}
+
+.meshcore-label {
+    font-size: 12px;
+    color: var(--text-muted);
+}
+
+/* ── Right content ── */
+.meshcore-content {
     flex: 1;
     display: flex;
     flex-direction: column;
+    min-width: 0;
     overflow: hidden;
 }
 
 /* ── Tab bar ── */
 .meshcore-tabs {
     display: flex;
-    gap: 0;
     border-bottom: 1px solid var(--border-color);
     background: var(--bg-card);
     flex-shrink: 0;
@@ -147,6 +255,17 @@
     border-bottom-color: var(--accent-cyan);
 }
 
+/* ── Tab panels ── */
+.meshcore-tab-panel {
+    display: none;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.meshcore-tab-panel.active { display: flex; }
+
 /* ── Message feed ── */
 .meshcore-messages {
     flex: 1;
@@ -166,7 +285,7 @@
 }
 
 .meshcore-message.pending { opacity: 0.6; border-style: dashed; }
-.meshcore-message.direct { border-left: 3px solid var(--accent-cyan); }
+.meshcore-message.direct  { border-left: 3px solid var(--accent-cyan); }
 
 .meshcore-message-header {
     display: flex;
@@ -177,7 +296,7 @@
 }
 
 .meshcore-message-sender { color: var(--accent-cyan); font-weight: 600; }
-.meshcore-message-text { color: var(--text-primary); }
+.meshcore-message-text   { color: var(--text-primary); }
 
 /* ── Compose bar ── */
 .meshcore-compose {
@@ -189,7 +308,17 @@
     flex-shrink: 0;
 }
 
-.meshcore-compose input {
+.meshcore-compose-select {
+    background: var(--bg-input);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 6px 8px;
+    color: var(--text-primary);
+    font-size: 12px;
+    width: 140px;
+}
+
+.meshcore-compose-input {
     flex: 1;
     background: var(--bg-input);
     border: 1px solid var(--border-color);
@@ -200,19 +329,39 @@
     font-family: var(--font-mono);
 }
 
-.meshcore-compose input:focus {
+.meshcore-compose-input:focus {
     outline: none;
     border-color: var(--accent-cyan);
 }
 
-/* ── Repeaters tab table ── */
+.meshcore-compose-btn {
-.meshcore-repeater-table {
+    padding: 6px 16px;
+    background: var(--accent-cyan);
+    color: #000;
+    border: none;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+/* ── Map tab ── */
+#meshcoreTabMap { overflow: hidden; }
+
+#meshcoreMap {
+    width: 100%;
+    height: 100%;
+    min-height: 300px;
+}
+
+/* ── Repeaters table ── */
+.meshcore-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 12px;
 }
 
-.meshcore-repeater-table th {
+.meshcore-table th {
     text-align: left;
     padding: 6px 10px;
     font-size: 10px;
@@ -222,7 +371,7 @@
     border-bottom: 1px solid var(--border-color);
 }
 
-.meshcore-repeater-table td {
+.meshcore-table td {
     padding: 6px 10px;
     border-bottom: 1px solid var(--border-color);
     color: var(--text-primary);
@@ -232,7 +381,6 @@
 .meshcore-traceroute-hops {
     display: flex;
     align-items: center;
-    gap: 0;
     flex-wrap: wrap;
     padding: 16px 0;
 }
@@ -261,10 +409,3 @@
     font-size: 10px;
     color: var(--text-muted);
 }
-
-/* ── Map tab ── */
-#meshcoreMap {
-    width: 100%;
-    height: 100%;
-    min-height: 300px;
-}

static/js/modes/meshcore.js

@@ -9,9 +9,11 @@ const MeshCore = (function () {
     let _transport = 'serial';
     let _eventSource = null;
     let _map = null;
-    let _markers = {};          // node_id → L.marker
+    let _markers = {};
     let _telemetryChart = null;
     let _connected = false;
+    let _nodeCount = 0;
+    let _msgCount = 0;
 
     // ── Init / Destroy ─────────────────────────────────────────────────────
     function init() {
@@ -25,6 +27,8 @@ const MeshCore = (function () {
         if (_map) { _map.remove(); _map = null; _markers = {}; }
         if (_telemetryChart) { _telemetryChart.destroy(); _telemetryChart = null; }
         _connected = false;
+        _nodeCount = 0;
+        _msgCount = 0;
     }
 
     function invalidateMap() {
@@ -173,6 +177,9 @@ const MeshCore = (function () {
             <div class="meshcore-message-text">${_esc(msg.text)}</div>`;
         feed.appendChild(el);
         feed.scrollTop = feed.scrollHeight;
+        _msgCount++;
+        const mc = document.getElementById('meshcoreMsgCount');
+        if (mc) mc.textContent = _msgCount;
     }
 
     async function sendMessage() {
@@ -225,8 +232,12 @@ const MeshCore = (function () {
             el = document.createElement('div');
             el.className = 'meshcore-node-item';
             el.id = 'meshcore-node-' + node.node_id;
-            list.innerHTML = '';
+            const empty = list.querySelector('.meshcore-empty');
+            if (empty) empty.remove();
             list.appendChild(el);
+            _nodeCount++;
+            const nc = document.getElementById('meshcoreNodeCount');
+            if (nc) nc.textContent = _nodeCount;
         }
         const hops = node.hops_away !== null ? `${node.hops_away}h` : '?';
         const snr  = node.snr !== null ? `${node.snr}dB` : '';
@@ -272,10 +283,22 @@ const MeshCore = (function () {
         const container = document.getElementById('meshcoreMap');
         if (!container || _map) return;
         _map = L.map('meshcoreMap', { zoomControl: true }).setView([20, 0], 2);
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+
-            attribution: '© OpenStreetMap',
+        const fallback = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png', {
-            maxZoom: 18,
+            attribution: '© CartoDB',
+            maxZoom: 19,
         }).addTo(_map);
+
+        if (typeof Settings !== 'undefined') {
+            Promise.race([
+                Settings.init(),
+                new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), 5000)),
+            ]).then(() => {
+                fallback.remove();
+                Settings.createTileLayer().addTo(_map);
+                Settings.registerMap(_map);
+            }).catch(e => console.warn('MeshCore: Settings init failed, using fallback tiles:', e));
+        }
     }
 
     function _updateMapMarker(node) {

templates/partials/modes/meshcore.html

@@ -1,132 +1,133 @@
-{# Meshcore Mode Partial #}
+{# Meshcore Mode #}
-<div id="meshcoreMode" style="display:flex; flex-direction: row; flex: 1; min-height: 0; overflow: hidden;">
+<div id="meshcoreMode" style="display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden;">
 
-  {# ── Sidebar ── #}
+  {# ── Connection Strip ── #}
-  <div class="meshcore-sidebar">
+  <div class="meshcore-strip">
-
+    <div class="meshcore-strip-group">
-    {# Connection section #}
+      <span class="meshcore-status-dot" id="meshcoreStatusDot"></span>
-    <div class="meshcore-sidebar-section">
+      <span id="meshcoreStatusText" class="meshcore-strip-status-text">Disconnected</span>
-      <h4>Connection</h4>
+    </div>
-      <div id="meshcoreStatusBar" style="display:flex;align-items:center;font-size:12px;margin-bottom:8px;">
+    <div class="meshcore-strip-divider"></div>
-        <span class="meshcore-status-dot" id="meshcoreStatusDot"></span>
+    <div class="meshcore-strip-group">
-        <span id="meshcoreStatusText">Disconnected</span>
-      </div>
-
-      {# Transport selector #}
       <div class="meshcore-transport-tabs" id="meshcoreTransportTabs">
         <div class="meshcore-transport-tab active" data-transport="serial" onclick="MeshCore.selectTransport('serial')">Serial</div>
         <div class="meshcore-transport-tab" data-transport="tcp" onclick="MeshCore.selectTransport('tcp')">TCP</div>
         <div class="meshcore-transport-tab" data-transport="ble" onclick="MeshCore.selectTransport('ble')">BLE</div>
       </div>
-
+    </div>
-      {# Serial config #}
+    <div id="meshcoreSerialConfig" class="meshcore-strip-group">
-      <div id="meshcoreSerialConfig">
+      <select id="meshcorePortSelect" class="meshcore-strip-select">
-        <select id="meshcorePortSelect" style="width:100%;background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);padding:4px;font-size:12px;border-radius:3px;margin-bottom:6px;">
+        <option value="">Auto-detect</option>
-          <option value="">Auto-detect</option>
+      </select>
-        </select>
+    </div>
+    <div id="meshcoreTcpConfig" class="meshcore-strip-group" style="display:none;">
+      <input id="meshcoreTcpHost" type="text" placeholder="Host / IP" value="localhost" class="meshcore-strip-input" style="width:120px;">
+      <input id="meshcoreTcpPort" type="number" placeholder="Port" value="5000" class="meshcore-strip-input" style="width:70px;">
+    </div>
+    <div id="meshcoreBleConfig" class="meshcore-strip-group" style="display:none;">
+      <select id="meshcoreBleSelect" class="meshcore-strip-select">
+        <option value="">Scan for devices...</option>
+      </select>
+      <button class="meshcore-strip-btn" onclick="MeshCore.scanBle()">Scan</button>
+    </div>
+    <div class="meshcore-strip-group">
+      <button class="meshcore-strip-btn connect" id="meshcoreConnectBtn" onclick="MeshCore.connect()">Connect</button>
+      <button class="meshcore-strip-btn disconnect" id="meshcoreDisconnectBtn" onclick="MeshCore.disconnect()" disabled>Disconnect</button>
+    </div>
+    <div class="meshcore-strip-divider"></div>
+    <div class="meshcore-strip-group">
+      <div class="meshcore-strip-stat">
+        <span class="meshcore-strip-value" id="meshcoreNodeCount">0</span>
+        <span class="meshcore-strip-label">NODES</span>
       </div>
-
+      <div class="meshcore-strip-stat">
-      {# TCP config #}
+        <span class="meshcore-strip-value" id="meshcoreMsgCount">0</span>
-      <div id="meshcoreTcpConfig" style="display:none;">
+        <span class="meshcore-strip-label">MSGS</span>
-        <input id="meshcoreTcpHost" type="text" placeholder="Host / IP" value="localhost"
-               style="width:100%;box-sizing:border-box;background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);padding:4px 6px;font-size:12px;border-radius:3px;margin-bottom:4px;">
-        <input id="meshcoreTcpPort" type="number" placeholder="Port" value="5000"
-               style="width:100%;box-sizing:border-box;background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);padding:4px 6px;font-size:12px;border-radius:3px;">
-      </div>
-
-      {# BLE config #}
-      <div id="meshcoreBleConfig" style="display:none;">
-        <select id="meshcoreBleSelect" style="width:100%;background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);padding:4px;font-size:12px;border-radius:3px;margin-bottom:4px;">
-          <option value="">Scan for devices...</option>
-        </select>
-        <button class="preset-btn" onclick="MeshCore.scanBle()" style="width:100%;font-size:11px;">Scan BLE</button>
-      </div>
-
-      <div style="display:flex;gap:6px;margin-top:8px;">
-        <button class="run-btn" id="meshcoreConnectBtn" onclick="MeshCore.connect()" style="flex:1;font-size:12px;">Connect</button>
-        <button class="preset-btn" id="meshcoreDisconnectBtn" onclick="MeshCore.disconnect()" style="flex:1;font-size:12px;" disabled>Disconnect</button>
       </div>
     </div>
-
+    <div class="meshcore-strip-divider"></div>
-    {# Contacts section #}
+    <div class="meshcore-strip-group">
-    <div class="meshcore-sidebar-section">
+      <button class="meshcore-strip-btn" onclick="MeshCore.showAddContact()">+ Contact</button>
-      <h4>Contacts <button onclick="MeshCore.showAddContact()" style="float:right;background:none;border:none;color:var(--accent-cyan);cursor:pointer;font-size:14px;padding:0;line-height:1;">+</button></h4>
-      <div id="meshcoreContactList" style="max-height:120px;overflow-y:auto;">
-        <div style="font-size:11px;color:var(--text-muted);">No contacts</div>
-      </div>
     </div>
+  </div>
 
-    {# Nodes section #}
+  {# ── Main body ── #}
-    <div class="meshcore-sidebar-section" style="flex:1;overflow-y:auto;">
+  <div class="meshcore-body">
-      <h4>Nodes</h4>
-      <div id="meshcoreNodeList">
-        <div style="font-size:11px;color:var(--text-muted);">No nodes seen</div>
-      </div>
-    </div>
 
-  </div>{# /sidebar #}
+    {# Left panel: contacts + nodes #}
-
+    <div class="meshcore-panel" id="meshcoreSidePanel">
-  {# ── Main content ── #}
+      <div class="meshcore-panel-section">
-  <div class="meshcore-main">
+        <div class="meshcore-panel-title">Contacts</div>
-
+        <div id="meshcoreContactList">
-    {# Tab bar #}
+          <div class="meshcore-empty">No contacts</div>
-    <div class="meshcore-tabs">
-      <div class="meshcore-tab active" data-tab="messages" onclick="MeshCore.switchTab('messages')">Messages</div>
-      <div class="meshcore-tab" data-tab="map" onclick="MeshCore.switchTab('map')">Map</div>
-      <div class="meshcore-tab" data-tab="repeaters" onclick="MeshCore.switchTab('repeaters')">Repeaters</div>
-      <div class="meshcore-tab" data-tab="telemetry" onclick="MeshCore.switchTab('telemetry')">Telemetry</div>
-    </div>
-
-    {# Messages tab #}
-    <div class="meshcore-tab-panel active" id="meshcoreTabMessages">
-      <div class="meshcore-messages" id="meshcoreMessageFeed">
-        <div style="text-align:center;color:var(--text-muted);font-size:12px;padding:24px;">
-          Connect to a Meshcore device to see messages
         </div>
       </div>
-      <div class="meshcore-compose">
+      <div class="meshcore-panel-section meshcore-panel-section--grow">
-        <select id="meshcoreRecipientSelect" style="background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);padding:6px;font-size:12px;border-radius:4px;width:140px;">
+        <div class="meshcore-panel-title">Nodes</div>
-          <option value="BROADCAST">Broadcast</option>
+        <div id="meshcoreNodeList">
-        </select>
+          <div class="meshcore-empty">No nodes seen</div>
-        <input id="meshcoreComposeInput" type="text" placeholder="Type a message (max 237 chars)..." maxlength="237"
+        </div>
-               onkeydown="if(event.key==='Enter')MeshCore.sendMessage()">
-        <button class="run-btn" onclick="MeshCore.sendMessage()" style="white-space:nowrap;">Send</button>
       </div>
     </div>
 
-    {# Map tab #}
+    {# Right: tabs + content #}
-    <div class="meshcore-tab-panel" id="meshcoreTabMap">
+    <div class="meshcore-content">
-      <div id="meshcoreMap"></div>
+      <div class="meshcore-tabs">
-    </div>
+        <div class="meshcore-tab active" data-tab="messages" onclick="MeshCore.switchTab('messages')">Messages</div>
-
+        <div class="meshcore-tab" data-tab="map" onclick="MeshCore.switchTab('map')">Map</div>
-    {# Repeaters tab #}
+        <div class="meshcore-tab" data-tab="repeaters" onclick="MeshCore.switchTab('repeaters')">Repeaters</div>
-    <div class="meshcore-tab-panel" id="meshcoreTabRepeaters" style="overflow-y:auto;padding:12px;">
+        <div class="meshcore-tab" data-tab="telemetry" onclick="MeshCore.switchTab('telemetry')">Telemetry</div>
-      <table class="meshcore-repeater-table">
-        <thead>
-          <tr>
-            <th>Name</th><th>Node ID</th><th>Hops</th><th>SNR</th><th>Battery</th><th>Last Seen</th>
-          </tr>
-        </thead>
-        <tbody id="meshcoreRepeaterTableBody">
-          <tr><td colspan="6" style="color:var(--text-muted);text-align:center;padding:16px;">No repeaters detected</td></tr>
-        </tbody>
-      </table>
-    </div>
-
-    {# Telemetry tab #}
-    <div class="meshcore-tab-panel" id="meshcoreTabTelemetry" style="padding:12px;overflow-y:auto;">
-      <div style="margin-bottom:8px;">
-        <label style="font-size:12px;color:var(--text-muted);">Node: </label>
-        <select id="meshcoreTelemetryNodeSelect" onchange="MeshCore.loadTelemetry(this.value)"
-                style="background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);padding:4px;font-size:12px;border-radius:3px;">
-          <option value="">Select a node</option>
-        </select>
       </div>
-      <canvas id="meshcoreTelemetryChart" style="max-height:300px;"></canvas>
-    </div>
 
-  </div>{# /main #}
+      {# Messages tab #}
+      <div class="meshcore-tab-panel active" id="meshcoreTabMessages">
+        <div class="meshcore-messages" id="meshcoreMessageFeed">
+          <div class="meshcore-empty" style="padding:24px;text-align:center;">
+            Connect to a Meshcore device to see messages
+          </div>
+        </div>
+        <div class="meshcore-compose">
+          <select id="meshcoreRecipientSelect" class="meshcore-compose-select">
+            <option value="BROADCAST">Broadcast</option>
+          </select>
+          <input id="meshcoreComposeInput" type="text" placeholder="Type a message (max 237 chars)..." maxlength="237"
+                 class="meshcore-compose-input" onkeydown="if(event.key==='Enter')MeshCore.sendMessage()">
+          <button class="meshcore-compose-btn" onclick="MeshCore.sendMessage()">Send</button>
+        </div>
+      </div>
 
+      {# Map tab #}
+      <div class="meshcore-tab-panel" id="meshcoreTabMap">
+        <div id="meshcoreMap"></div>
+      </div>
+
+      {# Repeaters tab #}
+      <div class="meshcore-tab-panel" id="meshcoreTabRepeaters" style="overflow-y:auto;padding:12px;">
+        <table class="meshcore-table">
+          <thead>
+            <tr>
+              <th>Name</th><th>Node ID</th><th>Hops</th><th>SNR</th><th>Battery</th><th>Last Seen</th>
+            </tr>
+          </thead>
+          <tbody id="meshcoreRepeaterTableBody">
+            <tr><td colspan="6" class="meshcore-empty" style="text-align:center;padding:16px;">No repeaters detected</td></tr>
+          </tbody>
+        </table>
+      </div>
+
+      {# Telemetry tab #}
+      <div class="meshcore-tab-panel" id="meshcoreTabTelemetry" style="padding:12px;overflow-y:auto;">
+        <div style="margin-bottom:8px;">
+          <label class="meshcore-label">Node: </label>
+          <select id="meshcoreTelemetryNodeSelect" onchange="MeshCore.loadTelemetry(this.value)" class="meshcore-strip-select">
+            <option value="">Select a node</option>
+          </select>
+        </div>
+        <canvas id="meshcoreTelemetryChart" style="max-height:300px;"></canvas>
+      </div>
+
+    </div>{# /meshcore-content #}
+  </div>{# /meshcore-body #}
 </div>{# /meshcoreMode #}
 
 {# ── Add Contact Modal ── #}
@@ -139,15 +140,15 @@
     </div>
     <div class="signal-details-modal-body" style="display:flex;flex-direction:column;gap:10px;">
       <div>
-        <label style="font-size:11px;color:var(--text-muted);display:block;margin-bottom:3px;">Node ID</label>
+        <label class="meshcore-label" style="display:block;margin-bottom:3px;">Node ID</label>
         <input id="meshcoreContactNodeId" type="text" placeholder="e.g. NODE001" class="mock-input" style="width:100%;box-sizing:border-box;">
       </div>
       <div>
-        <label style="font-size:11px;color:var(--text-muted);display:block;margin-bottom:3px;">Name</label>
+        <label class="meshcore-label" style="display:block;margin-bottom:3px;">Name</label>
         <input id="meshcoreContactName" type="text" placeholder="Display name" class="mock-input" style="width:100%;box-sizing:border-box;">
       </div>
       <div>
-        <label style="font-size:11px;color:var(--text-muted);display:block;margin-bottom:3px;">Public Key</label>
+        <label class="meshcore-label" style="display:block;margin-bottom:3px;">Public Key</label>
         <input id="meshcoreContactKey" type="text" placeholder="Base64 public key" class="mock-input" style="width:100%;box-sizing:border-box;font-family:var(--font-mono);font-size:11px;">
       </div>
     </div>