From a42ea35d8b1bc95cb587f3c0f9ab8d6a3898fd49 Mon Sep 17 00:00:00 2001
From: James Smith <jsmith@Jamess-MBP.Home>
Date: Thu, 19 Mar 2026 23:40:38 +0000
Subject: [PATCH] Add AOS/TCA/LOS pass data strip below polar plot

Fills the empty space below the sky view circle with a compact
three-column AOS / TCA / LOS readout (time + azimuth/elevation)
and a duration + max elevation footer line.
Populated by drawPolarPlot() when a pass is selected; shows a
placeholder prompt otherwise.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/css/satellite_dashboard.css | 60 ++++++++++++++++++++++++++++++
 templates/satellite_dashboard.html | 35 +++++++++++++++++
 2 files changed, 95 insertions(+)

diff --git a/static/css/satellite_dashboard.css b/static/css/satellite_dashboard.css
index 83c7a6c..c689533 100644
--- a/static/css/satellite_dashboard.css
+++ b/static/css/satellite_dashboard.css
@@ -743,13 +743,73 @@ body {
 .polar-container .panel-content {
     flex: 1;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
+    gap: 10px;
     padding: 8px;
     min-height: 0;
     overflow: hidden;
 }
 
+.pass-data-strip {
+    width: 100%;
+    max-width: 320px;
+    border-top: 1px solid rgba(74, 163, 255, 0.12);
+    padding-top: 10px;
+    flex-shrink: 0;
+}
+
+.pass-data-strip--empty {
+    text-align: center;
+    color: var(--text-dim);
+    font-size: 10px;
+    font-family: var(--font-mono);
+    letter-spacing: 0.08em;
+}
+
+.pass-data-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 4px;
+    text-align: center;
+}
+
+.pass-data-event {
+    font-size: 9px;
+    font-family: var(--font-mono);
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--text-dim);
+    margin-bottom: 3px;
+}
+
+.pass-data-time {
+    font-size: 12px;
+    font-family: var(--font-mono);
+    color: var(--text-primary);
+    margin-bottom: 2px;
+}
+
+.pass-data-sub {
+    font-size: 10px;
+    color: var(--accent-cyan);
+    font-family: var(--font-mono);
+}
+
+.pass-data-tca .pass-data-sub {
+    color: var(--accent-green);
+}
+
+.pass-data-footer {
+    text-align: center;
+    margin-top: 8px;
+    font-size: 10px;
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
+    letter-spacing: 0.06em;
+}
+
 #polarPlot {
     display: block;
     width: 100%;
diff --git a/templates/satellite_dashboard.html b/templates/satellite_dashboard.html
index cd19d8b..e260197 100644
--- a/templates/satellite_dashboard.html
+++ b/templates/satellite_dashboard.html
@@ -281,6 +281,9 @@
                     </div>
                     <div class="panel-content">
                         <canvas id="polarPlot"></canvas>
+                        <div id="passDataStrip" class="pass-data-strip pass-data-strip--empty">
+                            <span>Select a pass to view geometry</span>
+                        </div>
                     </div>
                 </div>
             </aside>
@@ -2356,6 +2359,38 @@
                 ctx.fillText(l.text, x, y);
             });
 
+            // Pass data strip
+            const strip = document.getElementById('passDataStrip');
+            if (strip) {
+                if (pass && pass.aosTime) {
+                    const fmtTime = iso => iso ? iso.slice(11, 16) + ' UTC' : '--';
+                    strip.className = 'pass-data-strip';
+                    strip.innerHTML = `
+                        <div class="pass-data-grid">
+                            <div class="pass-data-col">
+                                <div class="pass-data-event">AOS</div>
+                                <div class="pass-data-time">${fmtTime(pass.aosTime)}</div>
+                                <div class="pass-data-sub">Az ${pass.aosAz}°</div>
+                            </div>
+                            <div class="pass-data-col pass-data-tca">
+                                <div class="pass-data-event">TCA</div>
+                                <div class="pass-data-time">${fmtTime(pass.tcaTime)}</div>
+                                <div class="pass-data-sub">El ${pass.tcaEl}°</div>
+                            </div>
+                            <div class="pass-data-col">
+                                <div class="pass-data-event">LOS</div>
+                                <div class="pass-data-time">${fmtTime(pass.losTime)}</div>
+                                <div class="pass-data-sub">Az ${pass.losAz}°</div>
+                            </div>
+                        </div>
+                        <div class="pass-data-footer">Duration ${pass.duration} min &nbsp;·&nbsp; Max El ${pass.maxEl}°</div>
+                    `;
+                } else {
+                    strip.className = 'pass-data-strip pass-data-strip--empty';
+                    strip.innerHTML = '<span>Select a pass to view geometry</span>';
+                }
+            }
+
             // Pass trajectory
             if (pass && pass.trajectory) {
                 ctx.strokeStyle = pass.color || '#00d4ff';