fix(ui): the opening badge must say what is open, not that something is

It read "6M OPEN" and kept the rest in a tooltip nobody hovers — an alarm with
no content, announcing that something was happening and refusing to say what.
Band, direction and typical distance are on the badge now: the three facts that
decide whether to point an antenna, all readable without touching anything. Out
of season gets a mark there too, since that is the one an operator must not
learn last.

The compass point is computed in Go and carried on the Opening rather than
derived in the UI. Sector() already gets the wrap round north right, and it got
it wrong once — a second copy of that arithmetic is how a badge ends up naming
the opposite direction to the log line beside it.

frontend/src/App.tsx

@@ -6969,13 +6969,24 @@ export default function App() {
                 onClick={() => { setActiveTab('bandmap'); }}
                 title={t('bo.liveTip', {
                   band: String(o.band).toUpperCase(), n: o.calls, km: o.median_km,
-                  sector: o.sector ?? '', season: o.in_season ? '' : ' — ' + t('bmp.openUnusual'),
+                  sector: `${o.compass ?? ''} ${o.bearing_min}–${o.bearing_max}°`,
+                  season: o.in_season ? '' : ' — ' + t('bmp.openUnusual'),
                 })}
                 className="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-[11px] font-bold uppercase tracking-wider shrink-0
                            border-warning-border bg-warning-muted text-warning-muted-foreground hover:bg-warning-muted/70 animate-pulse"
               >
-                <Radio className="size-3" />
-                {String(o.band).toUpperCase()} {t('bo.open')}
+                <Radio className="size-3 shrink-0" />
+                {/* The three facts that decide whether to act: which band, which
+                    way to point, how far it reaches. They were in a tooltip
+                    nobody hovers, which made the badge an alarm with no content —
+                    it said something was happening and refused to say what. */}
+                <span>{String(o.band).toUpperCase()}</span>
+                <span className="font-mono">{o.compass}</span>
+                <span className="font-mono opacity-80">{o.median_km >= 1000
+                  ? `${(o.median_km / 1000).toFixed(1)}k` : o.median_km}km</span>
+                {/* Out of season is the one an operator must not learn last, so it
+                    earns a mark on the badge rather than a line in the tooltip. */}
+                {!o.in_season && <span className="opacity-90">!</span>}
               </button>
             ))}
             <span className="inline-flex items-center gap-1 font-mono text-[11px] text-muted-foreground shrink-0" title="UTC">