feat: AOS countdown in selection window, deduplicate time formatters

Auto-compute passes when satellites are selected (no longer gated on
passes window visibility) and show a live AOS countdown pill per
satellite row — "AOS 3m 42s" or "LIVE" when overhead.

Move speed to expanded detail grid alongside angular rate to reduce
compact row clutter. Prefix altitude pill with "Alt" for clarity.

Extract fmtCountdown, fmtCountdownCompact, fmtDuration, and
fmtDurationClock into shared format.ts, replacing 4 duplicate
definitions across BottomPanel, RotatorWindow, PassesWindow, and
DopplerWindow.

Default selection mode changed to single-select for new users on all
platforms.

Author: sandrwich

src/app.ts

@@ -1003,7 +1003,7 @@ export class App {
       this.updateObserverMarker();
       if (observerPassDebounce) clearTimeout(observerPassDebounce);
       observerPassDebounce = setTimeout(() => {
-        if (uiStore.passesVisible && uiStore.passesTab === 'selected') this.requestPasses();
+        if (uiStore.passesTab === 'selected' || this.selectedSats.size > 0) this.requestPasses();
         if (uiStore.passesVisible && uiStore.passesTab === 'nearby') this.requestNearbyPasses();
       }, 500);
     };
@@ -1764,8 +1764,8 @@ export class App {
     // Keep reactive sat count in sync for UI components (view-independent)
     uiStore.selectedSatCount = this.selectedSats.size;
 
-    // Pass predictor: auto-trigger when selection changes and window is open
-    if (uiStore.passesVisible && this.lastPassSatsVersion !== this.selectedSatsVersion) {
+    // Pass predictor: auto-trigger when selection changes (for AOS countdown in selection window)
+    if (this.lastPassSatsVersion !== this.selectedSatsVersion) {
       // Always allow clearing (0 sats); only gate recomputation on not-busy
       if (this.selectedSats.size === 0 || !this.passPredictor.isComputing()) {
         this.requestPasses();

src/format.ts

@@ -29,3 +29,36 @@ export function formatMHzRange(minMHz: number, maxMHz: number): string {
   if (bothMHz) return trimNum(minMHz, 1) + '–' + trimNum(maxMHz, 1) + ' MHz';
   return formatMHz(minMHz) + '–' + formatMHz(maxMHz);
 }
+
+/** Format seconds as clock-style countdown: "1:05:30" or "5:30". */
+export function fmtCountdown(sec: number): string {
+  if (sec <= 0) return '0:00';
+  const h = Math.floor(sec / 3600);
+  const m = Math.floor((sec % 3600) / 60);
+  const s = Math.round(sec % 60);
+  return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}` : `${m}:${String(s).padStart(2, '0')}`;
+}
+
+/** Format seconds as compact countdown: "42s", "3m 42s", "2h 15m", "1d 3h". */
+export function fmtCountdownCompact(sec: number): string {
+  if (sec < 60) return `${Math.floor(sec)}s`;
+  if (sec < 3600) return `${Math.floor(sec / 60)}m ${Math.floor(sec % 60)}s`;
+  if (sec < 86400) return `${Math.floor(sec / 3600)}h ${Math.floor((sec % 3600) / 60)}m`;
+  const d = Math.floor(sec / 86400);
+  const h = Math.floor((sec % 86400) / 3600);
+  return `${d}d ${h}h`;
+}
+
+/** Format seconds as pass duration: "5m30s". */
+export function fmtDuration(sec: number): string {
+  const m = Math.floor(sec / 60);
+  const s = Math.round(sec % 60);
+  return `${m}m${String(s).padStart(2, '0')}s`;
+}
+
+/** Format seconds as "m:ss" duration (for charts/timelines). */
+export function fmtDurationClock(sec: number): string {
+  const m = Math.floor(sec / 60);
+  const s = Math.round(sec % 60);
+  return `${m}:${String(s).padStart(2, '0')}`;
+}

src/stores/ui.svelte.ts

@@ -291,7 +291,7 @@ class UIStore {
     this.showGrid = load('satvisor_grid', false);
     this.showSkyGrid = load('satvisor_skygrid', true);
     this.radarVfx = load('satvisor_radar_vfx', true);
-    this.singleSelectMode = load('satvisor_single_select', this.isMobile);
+    this.singleSelectMode = load('satvisor_single_select', true);
     const savedTab = localStorage.getItem('satvisor_passes_tab');
     if (savedTab === 'selected' || savedTab === 'nearby') this.passesTab = savedTab;
     const savedTimeTab = localStorage.getItem('satvisor_time_tab');

src/ui/BottomPanel.svelte

@@ -3,14 +3,7 @@
   import { rotatorStore } from '../stores/rotator.svelte';
   import { beamStore } from '../stores/beam.svelte';
   import { timeStore } from '../stores/time.svelte';
-
-  function fmtCountdown(sec: number): string {
-    if (sec <= 0) return '0:00';
-    const h = Math.floor(sec / 3600);
-    const m = Math.floor((sec % 3600) / 60);
-    const s = Math.round(sec % 60);
-    return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}` : `${m}:${String(s).padStart(2, '0')}`;
-  }
+  import { fmtCountdown } from '../format';
 
   const hash = __COMMIT_HASH__;
   const version = __COMMIT_DATE__ ? 'v' + __COMMIT_DATE__.slice(2, 10).replace(/-/g, '') : '';

src/ui/DopplerWindow.svelte

@@ -8,6 +8,7 @@
   import { observerStore } from '../stores/observer.svelte';
   import { timeStore } from '../stores/time.svelte';
   import { ICON_DOPPLER } from './shared/icons';
+  import { fmtDurationClock } from '../format';
   import { calculateDopplerShift, createSatrec } from '../astro/doppler';
   import { epochToDatetimeStr, epochToDate } from '../astro/epoch';
   import { satColorCss } from '../constants';
@@ -350,11 +351,7 @@
     return hz.toFixed(0) + ' Hz';
   }
 
-  function formatDuration(sec: number): string {
-    const m = Math.floor(sec / 60);
-    const s = Math.round(sec % 60);
-    return `${m}:${String(s).padStart(2, '0')}`;
-  }
+  const formatDuration = fmtDurationClock;
 
   /** Linearly interpolate frequency at tSec from cached data. */
   function interpolateFreq(tSec: number): number | null {

src/ui/PassesWindow.svelte

@@ -7,7 +7,7 @@
   import { observerStore } from '../stores/observer.svelte';
   import { timeStore } from '../stores/time.svelte';
   import { ICON_PASSES, ICON_DOPPLER, ICON_ECLIPSE, ICON_SUN, ICON_FILTER } from './shared/icons';
-  import { formatMHz, formatMHzRange } from '../format';
+  import { formatMHz, formatMHzRange, fmtDuration } from '../format';
   import { satColorCss } from '../constants';
   import { epochToDate } from '../astro/epoch';
   import { sunLabel } from '../astro/eclipse';
@@ -47,12 +47,6 @@
     return `${pad(h)}:${pad(m)}:${pad(s)}`;
   }
 
-  function formatDuration(sec: number): string {
-    const m = Math.floor(sec / 60);
-    const s = Math.round(sec % 60);
-    return `${m}m${String(s).padStart(2, '0')}s`;
-  }
-
   function elClass(maxEl: number): string {
     if (maxEl < 10) return 'el-low';
     if (maxEl < 30) return 'el-mid';
@@ -284,7 +278,7 @@
           <span class="sat-name" title={pass.satName}>{pass.satName}</span>
         </span>
         <span class="td td-time">{formatTime(pass.aosEpoch)} <span class="arrow">&rarr;</span> {formatTime(pass.losEpoch)}</span>
-        <span class="td td-dur">{formatDuration(pass.durationSec)}</span>
+        <span class="td td-dur">{fmtDuration(pass.durationSec)}</span>
         <span class="td td-el {elClass(pass.maxEl)}">{pass.maxEl.toFixed(1)}&deg;</span>
         <span class="td td-mag {magClass(pass)}" title={magTooltip(pass)}>{#if pass.sunAlt > 0 && !pass.eclipsed}<span class="sun-icon">{@html ICON_SUN}</span>{/if}{#if pass.eclipsed}<span class="eclipse-icon">{@html ICON_ECLIPSE}</span>{:else if pass.peakMag !== null}{pass.peakMag.toFixed(1)}{:else}?{/if}</span>
         <span class="td td-actions">

src/ui/RotatorWindow.svelte

@@ -12,14 +12,7 @@
   import { satColorRgba } from '../constants';
   import { ViewMode } from '../types';
   import { chart, pointerHitRadius } from './shared/touch-metrics';
-
-  function fmtCountdown(sec: number): string {
-    if (sec <= 0) return '0:00';
-    const h = Math.floor(sec / 3600);
-    const m = Math.floor((sec % 3600) / 60);
-    const s = Math.round(sec % 60);
-    return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}` : `${m}:${String(s).padStart(2, '0')}`;
-  }
+  import { fmtCountdown } from '../format';
 
   let parkPos = $derived.by(() => {
     if (rotatorStore.parkPreset === 'custom') return { az: rotatorStore.parkAz, el: rotatorStore.parkEl };

src/ui/SelectionWindow.svelte

@@ -11,6 +11,31 @@
   import { beamStore } from '../stores/beam.svelte';
   import { satColorCss } from '../constants';
   import type { SelectedSatInfo } from '../types';
+  import type { SatellitePass } from '../passes/pass-types';
+  import { fmtCountdownCompact } from '../format';
+
+  /** Find the next upcoming (or active) pass for a satellite */
+  function nextPass(noradId: number, passes: SatellitePass[], epoch: number): SatellitePass | null {
+    // Active pass first
+    for (const p of passes) {
+      if (p.satNoradId === noradId && epoch >= p.aosEpoch && epoch <= p.losEpoch) return p;
+    }
+    // Next upcoming
+    for (const p of passes) {
+      if (p.satNoradId === noradId && p.aosEpoch > epoch) return p;
+    }
+    return null;
+  }
+
+  function aosLabel(noradId: number): string | null {
+    const epoch = uiStore.passListEpoch;
+    if (!epoch) return null;
+    const pass = nextPass(noradId, uiStore.passes, epoch);
+    if (!pass) return null;
+    if (epoch >= pass.aosEpoch && epoch <= pass.losEpoch) return 'LIVE';
+    const sec = (pass.aosEpoch - epoch) * 86400;
+    return fmtCountdownCompact(sec);
+  }
 
   let expandedSats = $state(new Set<number>());
   let searchQuery = $state('');
@@ -191,8 +216,11 @@
                 onchange={() => uiStore.toggleSatVisibility(sat.noradId)} />
               <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
               <span class="sat-name" onclick={() => toggle(sat.noradId)}>{sat.name}</span>
-              <span class="pill">{fmt(sat.altKm, 0)} km</span>
-              <span class="pill">{fmt(sat.speedKmS, 2)} km/s</span>
+              <span class="pill">Alt {fmt(sat.altKm, 0)} km</span>
+              {#if aosLabel(sat.noradId) != null}
+                {@const label = aosLabel(sat.noradId)!}
+                <span class="pill aos-pill" class:aos-live={label === 'LIVE'}>{label === 'LIVE' ? 'LIVE' : `AOS ${label}`}</span>
+              {/if}
               <button class="expand-btn" onclick={() => toggle(sat.noradId)} title={expandedSats.has(sat.noradId) ? 'Collapse' : 'Expand'}>
                 <svg viewBox="0 0 10 6" width="8" height="5" fill="currentColor" class:rotated={expandedSats.has(sat.noradId)}>
                   <polygon points="0,0 10,0 5,6"/>
@@ -206,6 +234,7 @@
                   <span class="dl">NORAD ID</span><span class="dv">{sat.noradId}</span>
                   <span class="dl">Latitude</span><span class="dv">{fmt(sat.latDeg, 2)}&deg;</span>
                   <span class="dl">Longitude</span><span class="dv">{fmt(sat.lonDeg, 2)}&deg;</span>
+                  <span class="dl">Speed</span><span class="dv">{fmt(sat.speedKmS, 2)} km/s</span>
                   <span class="dl">Ang. rate</span><span class="dv">{(sat.angularRateDegS ?? 0).toFixed(2)}°/s</span>
                   {#if sat.magStr !== null}
                     <span class="dl">Magnitude</span><span class="dv">{sat.magStr}</span>
@@ -362,6 +391,12 @@
     white-space: nowrap;
     flex-shrink: 0;
   }
+  .aos-pill {
+    color: var(--text-muted);
+  }
+  .aos-live {
+    color: var(--live);
+  }
   .expand-btn {
     background: none;
     border: none;