From 7677b12f74d941521a3e9feeec7674493bd9a25d Mon Sep 17 00:00:00 2001
From: James Smith <jsmith@Jamess-MBP.Home>
Date: Thu, 19 Mar 2026 12:17:28 +0000
Subject: [PATCH] Move satellite packets into map console

---
 static/css/satellite_dashboard.css | 232 +++++++++++++++++++++++++++--
 templates/satellite_dashboard.html | 166 +++++++++++++++++----
 2 files changed, 357 insertions(+), 41 deletions(-)

diff --git a/static/css/satellite_dashboard.css b/static/css/satellite_dashboard.css
index 0dd5851..e907591 100644
--- a/static/css/satellite_dashboard.css
+++ b/static/css/satellite_dashboard.css
@@ -294,10 +294,10 @@ body {
 
 .data-grid {
     display: grid;
-    grid-template-columns: minmax(320px, 1.2fr) minmax(280px, 0.9fr) minmax(320px, 1.1fr);
-    grid-template-rows: minmax(220px, 1fr) minmax(220px, 1fr);
+    grid-template-columns: minmax(320px, 1.2fr) minmax(320px, 0.95fr) minmax(360px, 1.1fr);
+    grid-template-rows: minmax(340px, 1fr);
     gap: 12px;
-    min-height: 460px;
+    min-height: 340px;
 }
 
 /* Panels */
@@ -439,6 +439,198 @@ body {
     backdrop-filter: blur(6px);
 }
 
+.packet-console {
+    position: absolute;
+    top: 14px;
+    right: 14px;
+    z-index: 500;
+    width: min(420px, calc(100% - 28px));
+    max-height: min(250px, calc(100% - 28px));
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rgba(74, 163, 255, 0.24);
+    border-radius: 8px;
+    background:
+        linear-gradient(135deg, rgba(4, 14, 23, 0.94), rgba(10, 25, 39, 0.9));
+    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.28);
+    backdrop-filter: blur(8px);
+    overflow: hidden;
+}
+
+.packet-console.collapsed {
+    max-height: 42px;
+}
+
+.packet-console.collapsed .packet-console-body {
+    display: none;
+}
+
+.packet-console-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 9px 10px;
+    border-bottom: 1px solid rgba(74, 163, 255, 0.12);
+    color: var(--accent-cyan);
+    font-family: 'Orbitron', monospace;
+    font-size: 10px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+}
+
+.packet-console-actions {
+    display: flex;
+    gap: 6px;
+}
+
+.packet-console-btn {
+    padding: 4px 8px;
+    border: 1px solid rgba(74, 163, 255, 0.28);
+    border-radius: 4px;
+    background: rgba(8, 20, 31, 0.88);
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
+    font-size: 9px;
+    letter-spacing: 0.08em;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.packet-console-btn:hover {
+    border-color: rgba(74, 163, 255, 0.65);
+    color: var(--accent-cyan);
+}
+
+.packet-console-body {
+    min-height: 0;
+    overflow-y: auto;
+    padding: 0;
+}
+
+.packet-entry {
+    padding: 7px 10px;
+    border-bottom: 1px solid rgba(0, 212, 255, 0.08);
+    font-size: 10px;
+    font-family: var(--font-mono);
+    word-break: break-word;
+}
+
+.packet-entry.compact .packet-entry-json {
+    display: none;
+}
+
+.packet-entry-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 4px;
+}
+
+.packet-entry-protocol {
+    color: var(--accent-cyan);
+    font-size: 10px;
+}
+
+.packet-entry-time {
+    color: var(--text-dim);
+    font-size: 9px;
+}
+
+.packet-entry-summary {
+    color: var(--text-primary);
+    line-height: 1.35;
+}
+
+.packet-entry-raw {
+    margin-top: 4px;
+    color: var(--text-secondary);
+    font-size: 9px;
+    line-height: 1.35;
+}
+
+.packet-entry-json {
+    margin-top: 6px;
+    padding: 7px 8px;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.03);
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    font-size: 9px;
+    white-space: pre-wrap;
+    line-height: 1.35;
+}
+
+.packet-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 2000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.packet-modal[hidden] {
+    display: none;
+}
+
+.packet-modal-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(5, 12, 18, 0.72);
+    backdrop-filter: blur(4px);
+}
+
+.packet-modal-dialog {
+    position: relative;
+    z-index: 1;
+    width: min(900px, calc(100vw - 40px));
+    max-height: min(80vh, 860px);
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rgba(74, 163, 255, 0.24);
+    border-radius: 10px;
+    background: linear-gradient(135deg, rgba(8, 19, 30, 0.98), rgba(10, 27, 43, 0.96));
+    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
+    overflow: hidden;
+}
+
+.packet-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 16px 18px;
+    border-bottom: 1px solid rgba(74, 163, 255, 0.14);
+}
+
+.packet-modal-kicker {
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+}
+
+.packet-modal-title {
+    margin-top: 4px;
+    color: var(--text-primary);
+    font-family: 'Orbitron', monospace;
+    font-size: 18px;
+}
+
+.packet-modal-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.packet-modal-body {
+    min-height: 0;
+    overflow-y: auto;
+    padding: 10px 0;
+}
+
 .map-overlay-kicker {
     margin-bottom: 4px;
     color: var(--text-secondary);
@@ -656,8 +848,7 @@ body {
 }
 
 .packets-panel {
-    grid-column: 2;
-    grid-row: 2;
+    display: none;
 }
 
 .transmitters-panel .panel-content,
@@ -698,7 +889,7 @@ body {
     display: flex;
     flex-direction: column;
     grid-column: 1;
-    grid-row: 1 / span 2;
+    grid-row: 1;
     min-height: 0;
 }
 
@@ -706,7 +897,7 @@ body {
     display: flex;
     flex-direction: column;
     grid-column: 3;
-    grid-row: 1 / span 2;
+    grid-row: 1;
     min-height: 0;
 }
 
@@ -937,12 +1128,12 @@ body {
 
     .data-grid {
         grid-template-columns: 1fr 1fr;
-        grid-template-rows: auto auto auto;
+        grid-template-rows: auto auto;
     }
 
     .pass-list {
         grid-column: 1;
-        grid-row: 1 / span 2;
+        grid-row: 1;
     }
 
     .transmitters-panel {
@@ -950,14 +1141,9 @@ body {
         grid-row: 1;
     }
 
-    .packets-panel {
-        grid-column: 2;
-        grid-row: 2;
-    }
-
     .gs-panel {
         grid-column: 1 / -1;
-        grid-row: 3;
+        grid-row: 2;
         min-height: 320px;
     }
 }
@@ -989,7 +1175,6 @@ body {
 
     .pass-list,
     .transmitters-panel,
-    .packets-panel,
     .gs-panel {
         grid-column: auto;
         grid-row: auto;
@@ -1003,6 +1188,11 @@ body {
     .map-overlay-card {
         width: calc(100% - 28px);
     }
+
+    .packet-console {
+        width: calc(100% - 28px);
+        max-height: 210px;
+    }
 }
 
 @media (max-width: 768px) {
@@ -1023,6 +1213,16 @@ body {
     .map-header-tools {
         justify-content: flex-end;
     }
+
+    .packet-modal-dialog {
+        width: calc(100vw - 20px);
+        max-height: calc(100vh - 20px);
+    }
+
+    .packet-modal-header {
+        align-items: flex-start;
+        flex-direction: column;
+    }
 }
 
 /* Embedded Mode Styles */
diff --git a/templates/satellite_dashboard.html b/templates/satellite_dashboard.html
index de77e99..e571629 100644
--- a/templates/satellite_dashboard.html
+++ b/templates/satellite_dashboard.html
@@ -86,6 +86,20 @@
                 </div>
                 <div class="panel-content map-panel-content">
                     <div id="groundMap"></div>
+                    <div class="packet-console" id="packetConsole">
+                        <div class="packet-console-header">
+                            <span>DECODED PACKETS <span id="packetCount" style="color:var(--accent-cyan);"></span></span>
+                            <div class="packet-console-actions">
+                                <button class="packet-console-btn" id="packetConsoleToggleBtn" onclick="togglePacketConsoleCollapsed()">MIN</button>
+                                <button class="packet-console-btn" onclick="openPacketModal()">POP OUT</button>
+                            </div>
+                        </div>
+                        <div class="packet-console-body" id="packetList">
+                            <div class="packet-empty-state">
+                                No packets received yet.<br>Run a ground-station observation with telemetry tasks enabled to populate this console.
+                            </div>
+                        </div>
+                    </div>
                     <div class="map-overlay-card">
                         <div class="map-overlay-kicker">TRACK VIEW</div>
                         <div class="map-overlay-primary" id="mapTrackPrimary">Loading active orbit and pass corridor...</div>
@@ -360,18 +374,6 @@
                 </div>
             </div>
 
-            <!-- Decoded Packets -->
-            <div class="panel packets-panel">
-                <div class="panel-header">
-                    <span>DECODED PACKETS <span id="packetCount" style="color:var(--accent-cyan);"></span></span>
-                    <div class="panel-indicator"></div>
-                </div>
-                <div class="panel-content" id="packetList">
-                    <div style="text-align:center;color:var(--text-secondary);padding:15px;font-size:11px;">
-                        No packets received yet.<br>Run a ground-station observation with telemetry tasks enabled to populate this panel.
-                    </div>
-                </div>
-            </div>
         </section>
 
         <!-- Controls Bar -->
@@ -389,6 +391,27 @@
         </div>
     </main>
 
+    <div class="packet-modal" id="packetModal" hidden>
+        <div class="packet-modal-backdrop" onclick="closePacketModal()"></div>
+        <div class="packet-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="packetModalTitle">
+            <div class="packet-modal-header">
+                <div>
+                    <div class="packet-modal-kicker">GROUND STATION</div>
+                    <div class="packet-modal-title" id="packetModalTitle">Decoded Packets <span id="packetModalCount" style="color:var(--accent-cyan);"></span></div>
+                </div>
+                <div class="packet-modal-actions">
+                    <button class="packet-console-btn" onclick="clearPacketConsole()">CLEAR</button>
+                    <button class="packet-console-btn" onclick="closePacketModal()">CLOSE</button>
+                </div>
+            </div>
+            <div class="packet-modal-body" id="packetModalList">
+                <div class="packet-empty-state">
+                    No packets received yet.<br>Run a ground-station observation with telemetry tasks enabled to populate this console.
+                </div>
+            </div>
+        </div>
+    </div>
+
     <style>
         /* Location selector styles */
         .location-selector {
@@ -501,6 +524,14 @@
             margin-top: 1px;
         }
 
+        .packet-empty-state {
+            text-align:center;
+            color:var(--text-secondary);
+            padding:15px;
+            font-size:11px;
+            line-height:1.4;
+        }
+
         /* Ground Station panel */
         .gs-panel { margin-top: 0; }
         .gs-status-row {
@@ -627,6 +658,8 @@
         let _passRequestId = 0;
         let _passAbortController = null;
         let _passTimeoutId = null;
+        let packetHistory = [];
+        let packetConsoleCollapsed = false;
         const DASHBOARD_FETCH_TIMEOUT_MS = 30000;
         const BUILTIN_TX_FALLBACK = {
             25544: [
@@ -1161,9 +1194,14 @@
                 clearTimeout(_passTimeoutId);
                 _passTimeoutId = null;
             }
+            closePacketModal();
+        });
+        window.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape') closePacketModal();
         });
 
         document.addEventListener('DOMContentLoaded', () => {
+            renderPacketPanels();
             loadDashboardSatellites();
             setupEmbeddedMode();
             const usedShared = applySharedObserverLocation();
@@ -2539,21 +2577,99 @@
             el.textContent = (hz >= 0 ? '+' : '') + hz + ' Hz';
         }
 
-        function _appendPacket(data) {
+        function _packetEmptyState() {
+            return '<div class="packet-empty-state">No packets received yet.<br>Run a ground-station observation with telemetry tasks enabled to populate this console.</div>';
+        }
+
+        function _packetSummary(packet) {
+            if (packet.parsed) {
+                try {
+                    const json = JSON.stringify(packet.parsed);
+                    return json.length > 140 ? json.slice(0, 137) + '...' : json;
+                } catch (_) {}
+            }
+            const raw = packet.raw || '';
+            return raw.length > 180 ? raw.slice(0, 177) + '...' : raw || 'Telemetry frame received';
+        }
+
+        function _packetItemHtml(packet, compact = false) {
+            const protocol = packet.protocol ? _esc(String(packet.protocol)) : 'TELEMETRY';
+            const source = packet.source ? ' / ' + _esc(String(packet.source)) : '';
+            const summary = _esc(_packetSummary(packet));
+            const raw = packet.raw ? `<div class="packet-entry-raw">${_esc(String(packet.raw))}</div>` : '';
+            const parsed = packet.parsed ? `<div class="packet-entry-json">${_esc(JSON.stringify(packet.parsed, null, 2))}</div>` : '';
+            return `
+                <div class="packet-entry ${compact ? 'compact' : ''}">
+                    <div class="packet-entry-header">
+                        <div class="packet-entry-protocol">${protocol}${source}</div>
+                        <div class="packet-entry-time">${packet.timeLabel}</div>
+                    </div>
+                    <div class="packet-entry-summary">${summary}</div>
+                    ${compact ? '' : parsed}
+                    ${raw}
+                </div>
+            `;
+        }
+
+        function renderPacketPanels() {
             const list = document.getElementById('packetList');
-            if (!list) return;
-            const placeholder = list.querySelector('div[style*="text-align:center"]');
-            if (placeholder) placeholder.remove();
-            const item = document.createElement('div');
-            item.style.cssText = 'padding:4px 6px;border-bottom:1px solid rgba(0,212,255,0.08);font-size:10px;font-family:var(--font-mono);word-break:break-all;';
-            const protocol = data.protocol ? `<div style="color:var(--accent-cyan);margin-bottom:2px;">${_esc(String(data.protocol))}${data.source ? ' / ' + _esc(String(data.source)) : ''}</div>` : '';
-            const parsed = data.parsed ? `<pre style="white-space:pre-wrap;margin:2px 0 4px 0;color:var(--text-primary);font-family:var(--font-mono);font-size:9px;">${_esc(JSON.stringify(data.parsed, null, 2))}</pre>` : '';
-            const raw = data.data ? `<div style="color:var(--text-secondary);">${_esc(String(data.data))}</div>` : '';
-            item.innerHTML = protocol + parsed + raw;
-            list.prepend(item);
+            const modalList = document.getElementById('packetModalList');
+            const countText = packetHistory.length ? `(${packetHistory.length})` : '';
             const countEl = document.getElementById('packetCount');
-            if (countEl) { const n = parseInt(countEl.textContent) || 0; countEl.textContent = n + 1; }
-            while (list.children.length > 100) list.removeChild(list.lastChild);
+            const modalCountEl = document.getElementById('packetModalCount');
+            if (countEl) countEl.textContent = countText;
+            if (modalCountEl) modalCountEl.textContent = countText;
+
+            if (list) {
+                list.innerHTML = packetHistory.length
+                    ? packetHistory.map(packet => _packetItemHtml(packet, true)).join('')
+                    : _packetEmptyState();
+            }
+            if (modalList) {
+                modalList.innerHTML = packetHistory.length
+                    ? packetHistory.map(packet => _packetItemHtml(packet, false)).join('')
+                    : _packetEmptyState();
+            }
+        }
+
+        function _appendPacket(data) {
+            packetHistory.unshift({
+                protocol: data.protocol || '',
+                source: data.source || '',
+                parsed: data.parsed || null,
+                raw: data.data || '',
+                timeLabel: new Date().toISOString().substring(11, 19) + ' UTC'
+            });
+            if (packetHistory.length > 100) packetHistory.length = 100;
+            renderPacketPanels();
+        }
+
+        window.togglePacketConsoleCollapsed = function () {
+            packetConsoleCollapsed = !packetConsoleCollapsed;
+            const consoleEl = document.getElementById('packetConsole');
+            const btn = document.getElementById('packetConsoleToggleBtn');
+            if (consoleEl) consoleEl.classList.toggle('collapsed', packetConsoleCollapsed);
+            if (btn) btn.textContent = packetConsoleCollapsed ? 'EXPAND' : 'MIN';
+        };
+
+        window.openPacketModal = function () {
+            const modal = document.getElementById('packetModal');
+            if (!modal) return;
+            renderPacketPanels();
+            modal.hidden = false;
+            document.body.style.overflow = 'hidden';
+        };
+
+        window.closePacketModal = function () {
+            const modal = document.getElementById('packetModal');
+            if (!modal || modal.hidden) return;
+            modal.hidden = true;
+            document.body.style.overflow = '';
+        };
+
+        window.clearPacketConsole = function () {
+            packetHistory = [];
+            renderPacketPanels();
         }
 
         // -----------------------------------------------------------------------