chore: release v0.24.2

v0.24.1 was tagged and shipped mid-session; the six commits that followed kept appending to its block, so the released version appeared to describe changes it does not contain. 0.24.1 is restored to exactly the five entries that shipped - verified against git show v0.24.1:changelog.json - and the five later ones open 0.24.2.

.claude/settings.json

@@ -4,7 +4,25 @@
       "Bash(go get *)",
       "Bash(go build *)",
       "Bash(wails generate *)",
-      "Bash(npm run *)"
+      "Bash(npm run *)",
+      "Bash(gofmt -w app.go internal/winkeyer/winkeyer.go)",
+      "Bash(timeout 20 git status --short)",
+      "Bash(echo \"exit: $?\")",
+      "Bash(GIT_TERMINAL_PROMPT=0 timeout 20 git push --dry-run)",
+      "Bash(echo \"push exit: $?\")",
+      "Bash(git config *)",
+      "Bash(ls \"/c/Program Files/Git/mingw64/bin/git-credential-manager\"*.exe)",
+      "Bash(ls \"/c/Program Files/Git/mingw64/libexec/git-core/git-credential-manager\"*.exe)",
+      "Bash(which git-credential-manager *)",
+      "Bash(gofmt -w internal/ultrabeam/ultrabeam.go)",
+      "Bash(cd \"c:/Perso/Seafile/Programmation/Golang/OpsLog/frontend\" && npx tsc --noEmit 2>&1 | grep -v \"npm notice\" | head && cd .. && /c/Users/legre/go/bin/wails build 2>&1 | tail -2 && ls -la --time-style=+%H:%M build/bin/OpsLog.exe)",
+      "Read(//c/Perso/Seafile/Programmation/Golang/**)",
+      "Bash(gofmt -w internal/qslcard/*.go)",
+      "Bash(awk '{print $3}')",
+      "Bash(xargs grep -n \"CREATE TABLE\\\\|key\\\\|value\")",
+      "Bash(ls -la .claude/)",
+      "Bash(cat .claude/settings.local.json)",
+      "Bash(cat .claude/settings.json)"
     ]
   }
 }

.claude/settings.local.json

@@ -0,0 +1,32 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(go:*)",
+      "Bash(gofmt:*)",
+      "Bash(/c/Users/legre/go/bin/wails:*)",
+      "Bash(wails:*)",
+      "Bash(npm:*)",
+      "Bash(npx:*)",
+      "Bash(grep:*)",
+      "Bash(rg:*)",
+      "Bash(cat:*)",
+      "Bash(ls:*)",
+      "Bash(find:*)",
+      "Bash(echo:*)",
+      "Bash(head:*)",
+      "Bash(tail:*)",
+      "Bash(awk:*)",
+      "Bash(sed:*)",
+      "Bash(sort:*)",
+      "Bash(uniq:*)",
+      "Bash(wc:*)",
+      "Bash(xargs:*)",
+      "Bash(for f in *)",
+      "Bash(git status:*)",
+      "Bash(git diff:*)",
+      "Bash(git log:*)",
+      "Bash(git show:*)",
+      "Bash(curl -sI --max-time 10 https://raw.githubusercontent.com/google/fonts/main/ofl/archivoblack/ArchivoBlack-Regular.ttf)"
+    ]
+  }
+}

.gitignore

@@ -39,9 +39,11 @@ desktop.ini
 hamlog.db*
 cty.dat
 cat.log
+*.adi
 
 # --- Secrets ---
 .env
 .env.local
 *.pem
 *.key
+*.syso

CLAUDE.md

@@ -0,0 +1,111 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## What this is
+
+OpsLog is a Windows ham-radio logger built with **Wails v2** — Go backend, React/TypeScript frontend, compiled into a single `.exe`. Author F4BPO. See `README.md` for the user-facing feature list and `wiki/` for end-user documentation.
+
+**Pure Go, no CGO** — SQLite is `modernc.org/sqlite`, serial is `go.bug.st/serial`. Any dependency requiring cgo breaks the build; check before adding one.
+
+## Commands
+
+```bash
+wails dev                  # hot-reload dev (Go methods also reachable at http://localhost:34115)
+wails build                # full build → build/bin/OpsLog.exe (~25 s)
+wails generate module      # REQUIRED after changing exported App methods (regenerates TS bindings)
+
+go build ./...             # fast Go-only check
+go test ./...              # all Go tests
+go test ./internal/steppir/ -run TestApplyPendingDirHold -v    # one test
+gofmt -w <file>
+
+cd frontend && npx tsc --noEmit    # frontend typecheck alone (wails build does this too)
+```
+
+Release: `.vscode/release.ps1` (Ctrl+Shift+P → *Tasks: Run Task* → *Release OpsLog*) — bumps the version, pushes to Gitea, builds and publishes to Gitea + GitHub.
+
+Prefer `wails build` for final validation: it is the only command that exercises Go, the TS typecheck, the bindings and the asset embed together.
+
+## Navigating app.go
+
+`app.go` is ~14 000 lines and holds nearly every Wails binding. **Do not read it linearly** — it is organised into banner-delimited sections:
+
+```bash
+grep -n "^// ──\|^// ---" app.go     # table of contents
+```
+
+Sections map to features (`── Motorized antenna (Ultrabeam / SteppIR) ──`, `── NET Control ──`, `── DX-cluster spot alerts ──`, …). Find the banner, then read that range. The `App` struct (~line 448) is the other useful landmark: its fields document every subsystem and carry substantial explanatory comments.
+
+Smaller root files split off self-contained areas: `app_cw.go`, `app_qsl_designer.go`, `app_secret.go`, `chat.go`, `offline.go`, `relayauto.go`, `adifwatch.go`, `livestatus.go`, `update.go`, `telemetry.go`.
+
+## Architecture
+
+### Wails binding boundary
+
+Exported methods on `*App` are the entire frontend API. Adding or changing a signature requires `wails generate module`, which writes `frontend/wailsjs/go/main/App.d.ts` and `models.ts`. Parameters and return types must be Wails-serializable — the generator prints `Not found: time.Time` noise for unsupported types (that particular message is long-standing and harmless).
+
+Backend→frontend push uses Wails events (`runtime.EventsEmit` / `EventsOn`), e.g. `qso:logged`, `update:progress`. Most hardware status is **polled** by the frontend on an interval rather than pushed.
+
+### Two separate databases
+
+This split is easy to get wrong and matters:
+
+- **`a.db`** — settings database (`settings.db` / `opslog.db`). Always SQLite. Holds settings and profiles. Its location is chosen by the user and recorded in `data/config.json`.
+- **`a.logDb`** — the logbook (QSOs). Either a per-profile SQLite file, the default `logbook.db`, or a **shared MySQL** so several operators log into one database. `a.dbBackend` says which.
+
+QSOs never go to `a.db`. `internal/db` holds the connection helpers and the MySQL specifics; `internal/qso` is the repository.
+
+Remote MySQL is the slow path: startup deliberately brings CAT/rig links up **before** connecting the logbook, and hot paths (cluster spot enrichment, alert matching) avoid per-row queries — hence the in-memory `wcbm` worked-index and the `clusterEvents` queue that keeps the telnet socket draining.
+
+### Per-profile settings scoping
+
+`internal/settings.Store` is a key/value store over the settings DB. Every key is transparently prefixed with the active profile (`p3.`), so each station profile has a complete independent set. Two consequences:
+
+- `App.settingsScoped` (atomic) gates reads until the active profile is known. Anything reading settings early must respect it or it reads the wrong scope.
+- Settings keys are declared as `key<Thing>` string constants near the top of `app.go` (~180 of them) — grep `key[A-Z].*= "` to find one.
+
+Password-type keys are encrypted at rest when the secret vault is unlocked (`internal/secret`); a locked vault returns `""` rather than ciphertext, and callers treat that as "not configured".
+
+### Hardware device pattern
+
+The codebase talks to ~20 devices (rigs, amplifiers, antenna controllers, switches, keyers, rotators). They all follow the same shape — match it when adding one:
+
+1. **`internal/<device>/`** — a self-contained package exposing a `Client` with `New(...)`, `Start()`, `Stop()`, `GetStatus()`. The client owns its own goroutine: a reconnecting poll loop, a mutex serialising the shared connection, and a cached last-known `Status`. Transports are usually TCP *or* serial behind one `io.ReadWriteCloser`.
+2. **Settings** — `key<Thing>*` constants plus `Get<Thing>Settings()` / `Save<Thing>Settings()` bindings in `app.go`.
+3. **Lifecycle** — a `start<Thing>()` method that tears down any existing client and rebuilds it from settings; called at startup and again whenever settings are saved.
+4. **Status binding** — `Get<Thing>Status()`, polled by the frontend.
+5. **UI** — a settings panel in `frontend/src/components/SettingsModal.tsx` and a live widget in `frontend/src/components/`.
+
+`internal/steppir` and `internal/antgenius` are compact, well-commented references. Wire-protocol packages carry the byte layout in the package doc comment and pin it with table tests against **real captured frames** — keep that up, since a wrong byte silently mistunes an antenna.
+
+Where two devices are interchangeable (Ultrabeam / SteppIR), `app.go` defines a small interface (`motorAntenna`) plus thin per-device adapters rather than branching everywhere.
+
+### CAT
+
+`internal/cat` (~7 000 lines, the largest package) is the rig abstraction: OmniRig, native FlexRadio/SmartSDR, native Icom CI-V (USB **and** remote-over-internet), and TCI (SunSDR / Expert Electronics). `cat.Manager` exposes a backend-agnostic `State()`; backend-specific features are reached through typed escapes such as `FlexDo(func(cat.FlexController) error)`. Check `State().Backend` before using one.
+
+### Logging
+
+`internal/applog` — Wails builds with the Windows GUI subsystem, so `fmt.Println` is discarded. Use `applog.Printf` (or plain `log.Printf` inside `internal/` packages) so output reaches the rotating log file in the user data dir. That file is usually the only evidence available when diagnosing a user's hardware problem.
+
+## Conventions
+
+**Changelog is mandatory.** Every user-visible change gets an entry in `changelog.json`, **in both `en` and `fr`**, in the same session as the change. Keep entries to one or two sentences — rationale belongs in the commit message. New work goes under the next version number; the release script bumps the version constants.
+
+**Append new entries at the BOTTOM of a version block**, never at the top. A block is read top to bottom, so a feature must appear before the fixes made to it — prepending meant an operator read "the Yaesu meters are corrected" several entries before learning a Yaesu console existed at all.
+
+**Version lives in two places** and must stay in lockstep: `appVersion` in `telemetry.go` and `APP_VERSION` in `frontend/src/version.ts`.
+
+**Bilingual UI.** Every user-visible string goes through `t()` from `frontend/src/lib/i18n.tsx` (~700 keys), with both English and French provided. No hardcoded display strings.
+
+**Commit messages must not include a `Co-Authored-By` line or any mention of the model.**
+
+**Comments explain *why*, not *what*.** The existing code documents the reasoning behind non-obvious decisions — which protocol source was trusted, what field failure a workaround addresses, why an ordering matters. Match that: a comment that restates the code is noise, a comment recording the hard-won reason is why this codebase is navigable.
+
+## Gotchas
+
+- **Adding a promoted ADIF field touches five places in lockstep.** `internal/adif` promotes ~30 ADIF fields to real QSO columns; miss one and imports silently drop data. All of: the struct field, column list, insert args and scan in `internal/qso/qso.go`; the dictionary entry (`Promoted: true`) in `internal/adif/fields.go`; the `adifPromoted` list *and* the assignment in `internal/adif/import.go`; the writer in `internal/adif/export.go`; then the frontend column in `RecentQSOsGrid.tsx` with its EN+FR i18n keys. Trace an existing field (e.g. `ant_path`) across the repo as a template.
+- **Generated files — don't hand-edit.** `internal/dxcc/dxcc_names_gen.go` (cty.dat joined to the ARRL/ADIF entity list) and `internal/awardref/uscounties_gen.go` (emitted by `cmd/cntygen` from the FIPS county CSV; a one-shot generator, not part of the build).
+- **Single-instance guard** (`main.go`): a second process would open its own CAT and antenna-follow loops and the two would fight over the rig frequency.
+- **Frontend controlled inputs**: several editors normalise a value on every keystroke (trim, split, filter). Binding an input directly to the normalised form makes Enter/Space appear dead — keep raw text in local state and derive the stored value from it.

README.fr.md

@@ -0,0 +1,360 @@
+# OpsLog
+
+<a href="https://discord.gg/FYM8yw5pT" target="_blank">
+  <img src="https://img.shields.io/badge/Discord-Rejoindre%20le%20serveur-5865F2?logo=discord&logoColor=white" alt="Rejoindre notre Discord" />
+</a>
+
+Un logiciel de log radioamateur moderne et rapide pour Windows — saisie en
+bandeau unique, CAT en temps réel pour **OmniRig**, **FlexRadio/SmartSDR** natif,
+**Icom CI-V** natif (USB **et** à distance par internet, en remplacement de
+RS-BA1) et **TCI** (SunSDR / Expert Electronics), cluster DX avec alertes de
+spots, suivi des diplômes, cartes, log de concours, gestion des QSL et un
+concepteur de cartes QSL. Construit avec **Wails v2** (backend Go + frontend
+React/TypeScript), **100 % Go** (sans CGO) : SQLite pour la configuration,
+**MySQL partagé** optionnel pour le journal afin que plusieurs opérateurs
+partagent un même log. Entièrement thémable et bilingue (anglais / français).
+
+Développé par **F4BPO**.
+
+---
+
+## Compilation / développement
+
+- **Dev :** `wails dev` (rechargement à chaud Vite ; méthodes Go accessibles sur http://localhost:34115).
+- **Build :** `wails build` (utiliser la version wails v2.11 du projet — `~/go/bin/wails.exe`).
+- **Régénérer les bindings Go↔TS** après modification des méthodes `App`
+  exportées : `wails generate module`.
+- **Release :** `.vscode/release.ps1` (Ctrl+Maj+P → *Tasks: Run Task* →
+  *Release OpsLog*) — incrémente la version, pousse le source sur Gitea, compile
+  l'exe et le publie sur les releases Gitea + GitHub.
+
+---
+
+## Journalisation
+
+- **Bandeau de saisie unique :** indicatif, RST émis/reçu, nom/QTH/locator,
+  bande/mode, fréquence TX/RX (split), heure de début/fin, commentaire/note. Le
+  **drapeau** de l'entité contactée est affiché en grand à côté des champs RST.
+- **Recherche d'indicatif** (QRZ.com / HamQTH) avec photo, pré-remplissage du
+  nom/QTH/locator et onglet QRZ.com.
+- **Résolution DXCC hors ligne** depuis `cty.dat` (pays, zones CQ/ITU,
+  continent), avec gestion des `/MM` `/AM` `/B` (balise) et des changements de
+  district (`/8`, `/W6`), plus les dérogations DXpédition de ClubLog par dates.
+- **QSO récents**, matrice **déjà contactés** (par créneau bande/mode),
+  re-résolution en masse depuis cty/QRZ/ClubLog, envoi en masse vers les services
+  QSL. Un **compteur de sélection** en direct, une bascule **Tout sélectionner /
+  Tout désélectionner**, et une limite d'affichage qui garde le journal complet
+  rapide **mais qui saute dès qu'un filtre est actif** (toutes les correspondances
+  sont montrées, pas seulement la première page).
+- **Constructeur de filtres QSO avancé** (champ / opérateur / valeur, ET / OU,
+  préréglages enregistrés) avec **export ADIF** des lignes filtrées ou
+  sélectionnées.
+- **Recherche de doublons** (Outils) — regroupe les QSO par même indicatif +
+  bande + mode (optionnellement même jour / minute) et permet de choisir lesquels
+  supprimer.
+- **Conforme ADIF 3.1.7** en import/export : dictionnaire complet des champs,
+  30 colonnes promues, éditeur générique de « champs supplémentaires » et modes
+  d'export standard/complet.
+- **Profils :** chaque réglage est par profil ; chaque profil peut pointer son
+  journal vers le fichier SQLite local ou une base **MySQL partagée**
+  (multi-opérateur).
+
+## Cartes & antenne
+
+- **Vue principale = deux volets configurables** (par profil, Réglages → Général
+  → *Vue principale*) : carte grand-cercle, carte locator (rue), la grille du
+  cluster, la grille des déjà-contactés, les QSO récents, les **commandes
+  FlexRadio**, la **console Icom** ou le panneau **Net control**.
+- **Carte grand-cercle** avec distance & azimut trajet court/long, fonds de carte
+  sélectionnables (Light / Voyager / Street / Satellite, tous sans clé et
+  légendés) et le(s) **lobe(s) du faisceau d'antenne** tracés depuis l'azimut du
+  rotor.
+- **Compas de rotor** (azimutal équidistant, clic pour tourner) piloté par
+  **PstRotator** (UDP), un **Rotator Genius 4O3A** (TCP natif) ou un **microHAM
+  ARCO** contrôlé nativement — sans PstRotator — via le **réseau** ou l'**USB**
+  avec son protocole Yaesu GS-232A.
+- **Support Ultrabeam** (Normal / inversé 180° / bidirectionnel) : la direction
+  rayonnée est en vert et le **boom mécanique** en gris, à la fois sur le compas
+  et sur la carte, pour toujours savoir où pointe l'antenne.
+
+## Cluster DX
+
+- Plusieurs serveurs de cluster avec reconnexion auto, un maître pour les
+  commandes.
+- **Barre latérale de filtres** (recherche d'indicatif, masquer-déjà-contactés,
+  grouper les doublons, bande / mode / statut / source) partagée entre l'onglet
+  Cluster et le volet cluster de la vue principale, avec bascule affichage/masquage.
+- **Statut** par spot (nouveau / nouvelle bande / nouveau créneau / contacté),
+  clic pour accorder la radio, et une **bandmap** multi-bandes (bandes façon
+  panadapter). En option, tous les **modes numériques comptent comme un seul**
+  (style DXCC) pour le coloriage nouveau/nouveau-créneau et les badges de la
+  matrice des déjà-contactés (Réglages → Général).
+- Les spots **POTA** sont étiquetés avec leur référence de parc (via
+  `api.pota.app`).
+- **Alertes de spots :** règles sur indicatif / pays / bande /
+  mode / spotter, avec notification sonore, visuelle et e-mail (Outils →
+  *Gestion des alertes*).
+
+## Contrôle CAT
+
+Quatre backends natifs (Réglages → CAT), chacun avec reconnexion auto et une
+connexion rapide non bloquante — une radio éteinte ne fige jamais l'application :
+
+- **OmniRig** (Rig 1/2, changement à chaud) — fonctionne avec toute radio
+  supportée par OmniRig.
+- **FlexRadio (SmartSDR)** via l'API TCP de la radio — fréquence / mode / split
+  de la slice en temps réel, découverte UDP, et **spots panadapter** (les spots
+  du cluster poussés sur l'écran Flex ; un clic remplit l'indicatif et **accorde
+  la radio sur la bonne fréquence ET le bon mode**).
+- **Icom CI-V** — natif, via le port **USB** de la radio *ou* par internet via le
+  **serveur LAN intégré** de la radio (voir *Icom à distance* ci-dessous). Ni
+  RS-BA1 ni Remote Utility nécessaires.
+- **TCI** (WebSocket) — SunSDR / ExpertSDR2 et tout serveur compatible TCI :
+  fréquence / mode / PTT / split, plus spots panorama optionnels.
+
+Le mode est lu depuis la radio ; le sous-mode numérique (FT4 vs FT8) est déduit
+de la fréquence. Les **antennes RX/TX Flex par bande** sont configurables et
+appliquées automatiquement au changement de bande.
+
+### Onglet de commande FlexRadio (façon SmartSDR)
+
+Affiché uniquement quand le backend CAT est une FlexRadio :
+
+- **Émission :** puissance RF, puissance d'accord, TUNE, MOX, processeur de
+  parole (NOR/DX/DX+), VOX (+ niveau + délai), moniteur (+ niveau), gain micro.
+- **Réception (slice active) :** sélecteurs d'**antenne** RX/TX et une bascule
+  **DAX** (audio d'émission via DAX, pour WSJT-X & co), mode/seuil AGC, niveau
+  audio, NB / WNB / NR / ANF, et — sur les radios **SmartSDR v4** (séries 8000 /
+  Aurora) — les filtres DSP supplémentaires **NRL, NRS, NRF** (avec niveau) plus
+  **RNN** (réduction de bruit par IA) et **ANFT** (notch automatique FFT),
+  affichés automatiquement si la radio les supporte. **RIT / XIT** avec accord
+  molette / ±.
+- **Coupleur d'antenne (ATU) :** accord / bypass / mémoires.
+- **Amplificateur :** la carte de commande suit l'ampli configuré, avec une liste
+  déroulante pour le choisir quand **plusieurs amplificateurs** sont configurés
+  (p. ex. deux SPE en parallèle). Voir *Amplis & commutateurs* ci-dessous.
+- **Mesures en direct** via le flux UDP VITA-49 : S-mètre (unités S), puissance
+  directe (W), ROS, ALC, température PA, tension, plus les mesures de l'ampli.
+
+### Onglet de commande Icom
+
+Affiché quand le backend CAT est Icom (USB ou réseau). Une console complète façon
+RS-BA1 :
+
+- **Double afficheur VFO** (MAIN / SUB) avec la grande fréquence tabulaire, le
+  badge de mode, la bande et l'offset RIT/ΔTX, et une **rangée de boutons de
+  mode** (SSB / CW / RTTY / PSK / AM / FM).
+- **Scope de spectre + waterfall** (panadapter) : ON/OFF, CTR/FIX, double-clic
+  pour accorder, et boutons **◀ ⊙ ▶** pour centrer le scope sur la fréquence
+  actuelle (±50 kHz) et le décaler à gauche/droite.
+- **Mesures en direct** toujours visibles : S-mètre (clic → remplir le RST),
+  puissance en watts, ROS.
+- **DSP réception :** gain AF / RF, squelch, AGC, préampli, atténuateur, filtre
+  (FIL1/2/3), NB, NR, ANF et — **en CW seulement** — l'**APF** (filtre de pic
+  audio).
+- **Passe-bande / notch :** Twin PBT (intérieur / extérieur), notch manuel +
+  position.
+- **Émission :** puissance RF, MOX, TUNE, **split avec offset automatique**
+  (+5 kHz en SSB, +1 kHz en CW), et moniteur. **En phonie seulement** : gain
+  micro, processeur de parole, VOX (+ gain + anti-VOX). Les commandes qui ne
+  s'appliquent pas au mode courant sont masquées automatiquement.
+- **Bandes & antenne :** boutons de bande en un clic et sélection ANT1/ANT2.
+- **Clarificateurs :** RIT et ΔTX avec accord molette / ± (Ctrl+←/→ décale le
+  RIT).
+- Boutons **Marche / Arrêt** (manuels par choix — l'application ne réveille
+  jamais la radio à la connexion).
+- La **manipulation CW** peut passer par le keyer intégré de la radio (voir
+  *Keyers* ci-dessous).
+
+### Icom à distance (par internet, sans RS-BA1)
+
+OpsLog parle directement le protocole réseau intégré de l'IC-7610 — il
+**remplace à la fois l'Icom Remote Utility et RS-BA1**. Saisissez l'IP de la
+radio, le nom/mot de passe Network User1 et l'adresse CI-V, et toute la console
+Icom fonctionne sur le LAN/internet : login + token (renouvelé automatiquement),
+tunnel CI-V, retransmission côté réception pour une liaison très stable même
+avec le panadapter en flux, et Marche/Arrêt manuel. (L'audio est hors périmètre
+— utilisez la radio en USB + une liaison voix comme Mumble.)
+
+## Keyers & audio
+
+- **Keyer CW** avec macros et macros sur touches F. Le moteur du keyer est
+  sélectionnable : **WinKeyer** (K1EL WK1/2/3 sur port COM), **FlexRadio CWX**
+  (le keyer intégré de la radio via l'API SmartSDR — type-ahead et retour arrière,
+  sans WinKeyer ni SmartCAT), **Icom** (le keyer intégré de la radio via CI-V —
+  sans matériel supplémentaire, fonctionne aussi à distance) ou **TCI**.
+- **Keyer vocal numérique** (DVK) : enregistrer les messages vocaux F1–F6 et les
+  émettre.
+- **Enregistrement audio des QSO :** capture continue en tampon glissant ; au
+  *Log QSO* le contact est sauvegardé dans un WAV par QSO
+  (`INDICATIF_AAAAMMJJ_HHMMSS.wav`) ; mixe RX + micro.
+
+## Amplis & commutateurs
+
+- **Amplificateurs** — configurez **un ou plusieurs** amplis (Réglages →
+  Amplificateur est une liste ; p. ex. deux SPE en parallèle pour plus de
+  puissance). La carte de chaque ampli apparaît sur l'onglet FlexRadio et dans
+  **Station Control**, avec une liste déroulante pour choisir lequel afficher ; la
+  barre de statut du bas porte **une pastille cliquable par ampli** (vert =
+  OPERATE, orange = STANDBY, rouge = hors ligne). Supportés :
+  - **PowerGenius XL** (4O3A) en TCP direct — operate/standby, sélecteur de mode
+    ventilateur et affichage des défauts.
+  - **SPE Expert** (1.3K-FA / 1.5K-FA / 2K-FA) via **USB** (COM virtuel) ou le
+    **réseau** (pont RS232-Ethernet) — operate/standby, Marche/Arrêt, niveau de
+    sortie Low / Mid / High, une barre de puissance et le statut en direct (bande,
+    ROS, courant PA, température, avertissements/alarmes).
+  - **ACOM** (500S / 600S / 700S / 1200S / 2020S) via **USB** ou le **réseau**
+    (pont RS232-Ethernet) — operate/standby/arrêt et télémétrie en direct
+    (puissance directe & réfléchie, ROS, température PA, bande, ventilateur,
+    défauts). La mise en marche fonctionne via un câble série reliant les lignes
+    DTR/RTS.
+- Commutateur d'antenne **Antenna Genius** (4O3A) via TCP/GSCP — un widget de
+  commutation A/B ancré.
+- Panneau **Station Control** (ancrable, widgets réordonnables par glisser) : le
+  **rotor**, la commande d'éléments **Ultrabeam** et des **cartes relais** —
+  WebSwitch 1216H, KMTronic, **Denkovi** USB (bit-bang FT245 D2XX, 4 ou 8 relais)
+  et USB-série générique (CH340 / LCUS, protocole A0) — pour l'alimentation, les
+  antennes et accessoires de la station.
+- **Relais automatiques** (Réglages) : bascule les relais de Station Control
+  automatiquement selon la fréquence / bande de la radio (comme PstRotator) — par
+  relais, une fenêtre de fréquence ou un ensemble de bandes.
+
+## QSL & diplômes
+
+- **Moteur de diplômes :** définitions intégrées + personnalisées (partagées
+  **globalement** entre profils) — DXCC, WAS / WAZ / WAC, WPX,
+  IOTA / POTA / SOTA / WWFF, **DDFM**, contacté/confirmé/validé par bande & mode,
+  règles OU et affectation manuelle de références, détection de référence en
+  direct à la saisie de l'indicatif, **import de listes de références** pour les
+  totaux/noms, et un **Rescan** qui relit le journal (récupère les nouvelles
+  confirmations LoTW/QRZ).
+- **Services QSL :** ClubLog (upload ADIF par lots), LoTW, QRZ.com, eQSL —
+  upload et **téléchargement des confirmations** (qui rafraîchit automatiquement
+  les stats de diplômes).
+- **Concepteur de cartes QSL** (voir ci-dessous).
+- **eQSL par e-mail :** clic droit sur un QSO → *Envoyer l'eQSL par e-mail* via
+  le compte SMTP configuré. (Outlook/Hotmail désactivent le SMTP basic-auth —
+  utilisez Gmail avec un mot de passe d'application, ou un mot de passe
+  d'application Microsoft.)
+
+## Log de concours
+
+- **Onglet Contest :** choisissez un concours (liste ADIF `CONTEST_ID` intégrée)
+  et un échange (numéro de série courant ou échange fixe). OpsLog remplit
+  automatiquement `CONTEST_ID` et les numéros émis/reçus (`STX` / `SRX`), impose
+  un début/fin de fenêtre, signale les doublons et tient un tableau de score en
+  direct.
+
+## Statistiques
+
+- **Tableau de bord des statistiques :** tuiles de synthèse (QSO, indicatifs
+  uniques, entités DXCC, continents, % confirmés) plus des graphiques — QSO **par
+  mode**, un split **CW / phonie / data** par bande, l'**activité dans le temps**
+  (vues glissantes jour / 7 jours / 30 jours / 12 mois), par opérateur et par
+  continent. Filtres par plage de dates, par opérateur et par concours, et une vue
+  **Table** qui reprend chaque graphique.
+
+## Statut opérateur en direct (événements spéciaux)
+
+Pour un indicatif d'événement spécial multi-op sur un journal MySQL partagé (ex.
+**TM74TFR**), la publication est **automatique** — aucun réglage à activer.
+Chaque instance OpsLog envoie un battement de cœur de son activité (indicatif de
+l'opérateur, bande, fréquence, mode) dans une table `live_status` toutes les
+~15 s, et repasse *hors antenne* automatiquement 5 min après le dernier QSO
+logué. Un petit rendu PHP
+([`docs/livestatus/tm74-status.php`](docs/livestatus/tm74-status.php)) sur votre
+propre serveur web lit cette table et produit une page/image en direct que vous
+pouvez intégrer sur la bio **QRZ.com** de la station
+(`<img src="…/tm74-status.php?img=1">`). OpsLog écrit seulement dans la base —
+ce n'est pas un serveur web.
+
+## Net control
+
+- **Log de net dirigé** (Outils → Net) : un roster global (`nets.json`) plus une
+  session active en mémoire — pointez les stations présentes, puis loguez-les une
+  par une ou tout le net d'un coup (**Logger tout le monde**) en utilisant la
+  fréquence CAT. **Glisser-déposer** entre les deux listes (roster → on air démarre
+  un QSO, on air → roster l'enregistre), et après chaque log la station on air
+  suivante est sélectionnée automatiquement pour enchaîner les contacts.
+
+## Apparence & langue
+
+- **Thèmes :** quatre thèmes complets (Clair chaud, Sombre chaud, Graphite
+  sombre, Contraste élevé) plus **Auto** (suit la préférence clair/sombre du
+  système), sélectionnables dans Réglages → Général. Chaque panneau et chaque
+  table AG-Grid suit le thème.
+- **Bilingue :** interface complète **anglais / français**, avec un choix de
+  drapeau au premier lancement et un sélecteur dans Réglages → Général.
+
+## Sécurité
+
+- **Coffre à secrets :** chiffrement optionnel par phrase de passe des mots de
+  passe stockés (AES-GCM + PBKDF2). Les valeurs chiffrées sont portables ; une
+  seule invite de déverrouillage au lancement les déchiffre pour la session.
+
+## Intégrations (sortantes)
+
+- **Émetteurs UDP :** pousser la fréquence actuelle vers **PstRotator**, les
+  infos radio au format **N1MM `RadioInfo`**, ou un **enregistrement ADIF à
+  chaque QSO logué** — pour que les outils externes (contrôle de rotor,
+  applications numériques, autres logiciels de log) restent synchronisés.
+
+## Divers
+
+- **Démarrage automatique :** lancer des programmes externes (WSJT-X, JTAlert,
+  contrôle de rotor…) au démarrage d'OpsLog, en sautant ceux déjà lancés.
+- **Sauvegarde :** sauvegarde optionnelle base + ADIF à la fermeture.
+- **Vérification de mise à jour** au démarrage et toutes les 5 minutes (et à
+  l'ouverture d'Aide → À propos), avec un toast (désactivable), plus une fenêtre
+  **Nouveautés** qui affiche le changelog (anglais / français) au premier
+  lancement après une mise à jour — réouvrable à tout moment depuis le menu Aide.
+- **Télémétrie d'usage anonyme** (un battement de cœur quotidien : ID
+  d'installation aléatoire + version + OS — aucune donnée d'indicatif ou de QSO ;
+  désactivable dans les Préférences).
+
+---
+
+## Concepteur de cartes QSL
+
+Outils → *Concepteur de cartes QSL…* transforme quelques photos en une carte
+eQSL soignée :
+
+1. Choisissez 1 à 6 photos (jpeg/png). OpsLog les analyse hors ligne (grille de
+   détail/luminance) et propose **3 designs** — indicatif dans la zone la plus
+   calme de la meilleure photo, nom de l'opérateur, zones CQ/ITU + ligne locator,
+   drapeau du pays, les autres photos en inserts encadrés, et un encart de
+   confirmation par QSO.
+2. Choisissez une proposition et affinez-la : cliquez un élément pour le
+   sélectionner, glissez pour déplacer, changez la police / le préréglage de
+   style (gel or, gel argent, contour blanc classique, script, plat) et les
+   réglages par préréglage dans le panneau de droite.
+3. Enregistrez le modèle (les photos sont copiées dans
+   `data/qsl/templates/<id>/`, les originaux peuvent donc être déplacés). Un
+   modèle peut être le défaut par profil.
+
+Envoi : clic droit sur un QSO → *Envoyer l'eQSL par e-mail*. La carte est rendue
+avec les données de ce QSO, matricée en JPEG ≤ 800 Ko, archivée dans
+`data/qsl/outbox/` et envoyée via le compte SMTP configuré à l'adresse trouvée
+par la recherche QRZ/HamQTH. En cas de succès le QSO est marqué `EQSL_SENT=Y`
+(ADIF). Les modèles de sujet/corps de l'e-mail sont dans le concepteur (variables
+`{CALL} {DATE} {BAND} {MODE} {MYCALL}`).
+
+Polices : Archivo Black, Lilita One, Baloo 2, Oswald, Great Vibes, Allura
+(toutes OFL, embarquées — licences dans `internal/qslcard/assets/fonts/`) ;
+Cooper Black est proposée si MS Office l'a installée. Drapeaux : flag-icons
+(MIT), embarqués pour les entités DXCC couramment contactées.
+
+---
+
+## Données & stockage
+
+- La **config** (réglages, profils, radios/antennes, nœuds de cluster, cache de
+  recherche, listes de diplômes, modèles QSL) réside toujours dans le fichier
+  SQLite local sous `data/` — instantané même quand le journal est sur un MySQL
+  lointain.
+- Le **journal** (QSO) réside là où pointe le profil actif : le fichier SQLite
+  local ou une base **MySQL** partagée par profil.
+
+---
+
+*An English version of this document is available in [README.md](README.md).*

README.md

@@ -1,16 +1,322 @@
-# README
+# OpsLog
 
-## About
+<a href="https://discord.gg/FYM8yw5pT" target="_blank">
+  <img src="https://img.shields.io/badge/Discord-Join%20the%20server-5865F2?logo=discord&logoColor=white" alt="Join our Discord" />
+</a>
 
-This is the official Wails Svelte-TS template.
+A modern, fast ham-radio logger for Windows — single-strip entry, real-time CAT
+for **OmniRig**, native **FlexRadio/SmartSDR**, native **Icom CI-V** (USB **and**
+remote-over-internet, replacing RS-BA1) and **TCI** (SunSDR / Expert Electronics),
+DX cluster with spot alerts, awards tracking, maps, contest logging, QSL
+management and a QSL-card designer. Built with **Wails v2** (Go backend +
+React/TypeScript frontend), **pure Go** (no CGO): SQLite for configuration,
+optional **shared MySQL** for the logbook so several operators can run one log.
+Fully themeable and bilingual (English / French).
 
-## Live Development
+Developed by **F4BPO**.
 
-To run in live development mode, run `wails dev` in the project directory. This will run a Vite development
-server that will provide very fast hot reload of your frontend changes. If you want to develop in a browser
-and have access to your Go methods, there is also a dev server that runs on http://localhost:34115. Connect
-to this in your browser, and you can call your Go code from devtools.
+---
 
-## Building
+## Building / developing
 
-To build a redistributable, production mode package, use `wails build`.
+- **Dev:** `wails dev` (Vite hot-reload; Go methods reachable at http://localhost:34115).
+- **Build:** `wails build` (use the project's wails v2.11 — `~/go/bin/wails.exe`).
+- **Regenerate Go↔TS bindings** after changing exported `App` methods:
+  `wails generate module`.
+- **Release:** `.vscode/release.ps1` (Ctrl+Shift+P → *Tasks: Run Task* →
+  *Release OpsLog*) — bumps the version, pushes source to Gitea, builds the exe
+  and publishes it to Gitea + GitHub releases.
+
+---
+
+## Logging
+
+- **Single-strip entry:** callsign, RST tx/rx, name/QTH/grid, band/mode,
+  TX/RX frequency (split), start/end time, comment/note. The contacted entity's
+  **flag** is shown large next to the RST fields.
+- **Callsign lookup** (QRZ.com / HamQTH) with photo, auto-fill of name/QTH/grid
+  and the QRZ.com tab.
+- **Offline DXCC** resolution from `cty.dat` (country, CQ/ITU zones, continent),
+  with `/MM` `/AM` `/B` (beacon) and call-area (`/8`, `/W6`) handling, plus
+  ClubLog DXpedition date overrides.
+- **Recent QSOs**, **Worked-before** matrix (per band/mode slot), bulk re-resolve
+  from cty/QRZ/ClubLog, bulk send to QSL services. A live **selection count**, a
+  **Select all / Unselect all** toggle, and a row limit that keeps the full log
+  fast **but is lifted while a filter is active** (every match is shown, not just
+  the first page).
+- **Advanced QSO filter builder** (field / operator / value, AND / OR, saved
+  presets) with filtered- and selected-row **ADIF export**.
+- **Find duplicates** (Tools) — groups QSOs by same call + band + mode (optionally
+  same day / minute) and lets you pick which to delete.
+- **ADIF 3.1.7 compliant** import/export: a full field dictionary, 30 promoted
+  columns, a generic "extra fields" editor and standard/all export modes.
+- **Profiles:** every setting is per-profile; each profile can point its logbook
+  at the local SQLite file or a **shared MySQL** database (multi-operator).
+
+## Maps & antenna
+
+- **Main view = two configurable panes** (per profile, Settings → General →
+  *Main view*): great-circle map, locator (street) map, the cluster grid, the
+  worked-before grid, recent QSOs, the **FlexRadio controls**, the **Icom
+  console** or the **Net control** panel.
+- **Great-circle map** with short/long-path distance & azimuth, selectable
+  basemaps (Light / Voyager / Street / Satellite, all key-free and labelled) and
+  the **antenna beam lobe(s)** drawn from the rotor azimuth.
+- **Rotor compass** (azimuthal-equidistant, click-to-turn) driven by
+  **PstRotator** (UDP), a **4O3A Rotator Genius** (native TCP) or a **microHAM
+  ARCO** controlled natively — no PstRotator needed — over the **LAN** or **USB**
+  using its Yaesu GS-232A protocol.
+- **Ultrabeam** support (Normal / 180° reverse / Bidirectional): the radiating
+  direction is shown in green and the **mechanical boom** in grey, on both the
+  compass and the map, so you never lose track of where the antenna points.
+
+## DX Cluster
+
+- Multiple cluster servers with auto-reconnect, a master for commands.
+- **Filter sidebar** (callsign search, hide-worked, group duplicates, band /
+  mode / status / source) shared by the Cluster tab and the Main-view cluster
+  pane, with a show/hide toggle.
+- Per-spot **status** (new / new-band / new-slot / worked), click-to-tune the
+  rig, and a multi-band **Band Map** (panadapter-style strips). Optionally, all
+  **digital modes count as one** (DXCC-style) for the new/new-slot colouring and
+  the worked-before matrix badges (Settings → General).
+- **POTA** spots are tagged with their park reference (via `api.pota.app`).
+- **Spot alerts:** rules on call / country / band / mode /
+  spotter, with sound, visual and e-mail notification (Tools → *Alert
+  management*).
+
+## CAT control
+
+Four native backends (Settings → CAT), each with auto-reconnect and a fast,
+non-blocking connect so a powered-off radio never freezes the app:
+
+- **OmniRig** (Rig 1/2, hot-swap) — works with any OmniRig-supported rig.
+- **FlexRadio (SmartSDR)** over the radio's TCP API — real-time slice freq /
+  mode / split, UDP discovery, and **panadapter spots** (cluster spots pushed to
+  the Flex display; a click fills the call and **tunes the rig to the right
+  frequency AND mode**).
+- **Icom CI-V** — native, over the radio's **USB** port *or* over the internet
+  via the radio's **built-in LAN server** (see *Remote Icom* below). No RS-BA1 or
+  Remote Utility needed.
+- **TCI** (WebSocket) — SunSDR / ExpertSDR2 and any TCI-compatible server:
+  freq / mode / PTT / split, plus optional panorama spots.
+
+Mode is taken from the radio; the digital sub-mode (FT4 vs FT8) is inferred from
+the frequency. **Per-band Flex RX/TX antennas** can be configured and are applied
+automatically on band change.
+
+### FlexRadio control tab (SmartSDR-style)
+
+Shown only when the CAT backend is a FlexRadio:
+
+- **Transmit:** RF power, tune power, TUNE, MOX, speech processor (NOR/DX/DX+),
+  VOX (+ level + delay), monitor (+ level), mic gain.
+- **Receive (active slice):** RX/TX **antenna** selectors and a **DAX** toggle
+  (TX audio through DAX, for WSJT-X & co), AGC mode/threshold, audio level,
+  NB / WNB / NR / ANF, and — on **SmartSDR v4** radios (8000 / Aurora series) —
+  the extra DSP tools **NRL, NRS, NRF** (with level) plus **RNN** (AI noise
+  reduction) and **ANFT** (FFT auto-notch), shown automatically when the radio
+  supports them. **RIT / XIT** with wheel / ± tuning.
+- **Antenna tuner (ATU):** tune / bypass / memories.
+- **Amplifier:** the amp card follows whichever amplifier is configured, with a
+  dropdown to pick it when **several amplifiers** are set up (e.g. two SPEs run
+  in parallel). See *Amplifiers & switches* below.
+- **Live meters** over the UDP VITA-49 stream: S-meter (S-units), forward power
+  (W), SWR, ALC, PA temperature, voltage, plus the amplifier's meters.
+
+### Icom control tab
+
+Shown when the CAT backend is Icom (USB or network). A full RS-BA1-style console:
+
+- **Twin VFO readout** (MAIN / SUB) with the big tabular frequency, mode badge,
+  band and RIT/ΔTX offset, and a **mode-button row** (SSB / CW / RTTY / PSK /
+  AM / FM).
+- **Spectrum scope + waterfall** (panadapter): ON/OFF, CTR/FIX, double-click to
+  tune, and **◀ ⊙ ▶** buttons to centre the scope on the current frequency
+  (±50 kHz) and pan left/right.
+- **Live meters** always visible: S-meter (click → fill RST), power in watts, SWR.
+- **Receive DSP:** AF / RF gain, squelch, AGC, preamp, attenuator, filter
+  (FIL1/2/3), NB, NR, ANF and — **on CW only** — the **APF** (audio peak filter).
+- **Passband / notch:** Twin PBT (inner / outer), manual notch + position.
+- **Transmit:** RF power, MOX, TUNE, **split with an automatic offset**
+  (+5 kHz on SSB, +1 kHz on CW), and monitor. On **voice modes only**: mic gain,
+  speech compressor, VOX (+ gain + anti-VOX). Controls that don't apply to the
+  current mode are hidden automatically.
+- **Bands & antenna:** one-touch band buttons and ANT1/ANT2 selection.
+- **Clarifiers:** RIT and ΔTX with wheel / ± tuning (Ctrl+←/→ nudges RIT).
+- **Power ON / OFF** buttons (manual by design — the app never wakes the rig on
+  connect).
+- **CW keying** can run through the radio's own keyer (see *Keyers* below).
+
+### Remote Icom (over the internet, no RS-BA1)
+
+OpsLog speaks the IC-7610's built-in network protocol directly — it **replaces
+both the Icom Remote Utility and RS-BA1**. Enter the radio's IP, the Network
+User1 name/password and the CI-V address, and the whole Icom console works over
+the LAN/internet: login + token (auto-renewed), CI-V tunnel, receive-side
+retransmit for a rock-solid link even with the panadapter streaming, and manual
+power ON/OFF. (Audio is out of scope — use the radio in USB + a voice link such
+as Mumble.)
+
+## Keyers & audio
+
+- **CW keyer** with macros and F-key macros. The keyer engine is selectable:
+  **WinKeyer** (K1EL WK1/2/3 over a COM port), **FlexRadio CWX** (the radio's
+  built-in keyer over the SmartSDR API — type-ahead and backspace, no WinKeyer or
+  SmartCAT needed), **Icom** (the radio's own keyer over CI-V — no extra hardware,
+  works over the remote link too) or **TCI**.
+- **Digital Voice Keyer** (DVK): record F1–F6 voice messages and transmit them.
+- **QSO audio recording:** continuous rolling capture; on *Log QSO* the contact
+  is saved to a per-QSO WAV (`CALL_YYYYMMDD_HHMMSS.wav`); mixes RX + mic.
+
+## Amplifiers & switches
+
+- **Amplifiers** — configure **one or several** amps (Settings → Amplifier is a
+  list; e.g. two SPEs run in parallel for more power). Each amp's control card
+  appears on the FlexRadio tab and in **Station Control**, with a dropdown to
+  choose which one it shows; the bottom status bar carries **one clickable chip
+  per amp** (green = OPERATE, orange = STANDBY, red = offline). Supported:
+  - **PowerGenius XL** (4O3A) over direct TCP — operate/standby, fan-mode
+    selector and fault display.
+  - **SPE Expert** (1.3K-FA / 1.5K-FA / 2K-FA) over **USB** (virtual COM) or the
+    **network** (RS232-to-Ethernet bridge) — operate/standby, ON/OFF,
+    Low / Mid / High output level, an output-power bar and live status (band,
+    SWR, PA current, temperature, warnings/alarms).
+  - **ACOM** (500S / 600S / 700S / 1200S / 2020S) over **USB** or the **network**
+    (RS232-to-Ethernet bridge) — operate/standby/off and live telemetry (forward
+    & reflected power, SWR, PA temperature, band, fan, faults). Power-ON works
+    over a serial cable that wires the DTR/RTS lines.
+- **Antenna Genius** (4O3A) antenna switch over TCP/GSCP — a docked A/B
+  antenna-switch widget.
+- **Station Control** panel (dockable, drag-to-reorder widgets): the **rotator**,
+  **Ultrabeam** element control and **relay boards** — WebSwitch 1216H, KMTronic,
+  **Denkovi** USB (FT245 D2XX bit-bang, 4 or 8 relays) and generic USB-serial
+  (CH340 / LCUS, A0 protocol) — for station power, antennas and accessories.
+- **Relay auto-control** (Settings): switch Station-Control relays automatically
+  from the rig frequency / band (like PstRotator) — per relay, a frequency window
+  or a set of bands.
+
+## QSL & awards
+
+- **Awards engine:** built-in + custom award definitions (shared **globally**
+  across profiles) — DXCC, WAS / WAZ / WAC, WPX, IOTA / POTA / SOTA / WWFF,
+  **DDFM**, worked/confirmed/validated by band & mode, OR rules and manual
+  reference assignment, live reference detection on call entry, **reference-list
+  import** for totals/names, and a **Rescan** that re-pulls the logbook (picks up
+  fresh LoTW/QRZ confirmations).
+- **QSL services:** ClubLog (batched ADIF upload), LoTW, QRZ.com, eQSL — upload
+  and **confirmation download** (which auto-refreshes the award stats).
+- **QSL Card Designer** (see below).
+- **E-mail eQSL:** right-click a QSO → *Send eQSL by e-mail* via the configured
+  SMTP account. (Outlook/Hotmail disable basic-auth SMTP — use Gmail with an app
+  password, or a Microsoft app password.)
+
+## Contest logging
+
+- **Contest tab:** pick a contest (built-in ADIF `CONTEST_ID` list) and an
+  exchange (running serial or a fixed exchange). OpsLog auto-fills `CONTEST_ID`
+  and the sent/received serials (`STX` / `SRX`), enforces a window start/end,
+  flags dupes and keeps a live scoreboard.
+
+## Statistics
+
+- **Logbook statistics dashboard:** headline tiles (QSOs, unique callsigns, DXCC
+  entities, continents, % confirmed) plus charts — QSOs **by mode**, a per-band
+  **CW / phone / data** split, **activity over time** (rolling day / 7-day /
+  30-day / 12-month views), by operator and by continent. Date-range, per-operator
+  and per-contest filters, and a **Table** view that mirrors every chart.
+
+## Multi-operator live status (special events)
+
+For a multi-op special-event call on a shared MySQL logbook (e.g. **TM74TFR**),
+publishing is **automatic** — no setting to turn on. Each OpsLog instance
+heartbeats its current activity (operator call, band, frequency, mode) into a
+`live_status` table every ~15 s, and drops back to *off air* automatically 5 min
+after the last logged QSO. A small PHP renderer
+([`docs/livestatus/tm74-status.php`](docs/livestatus/tm74-status.php)) on your
+own web server reads that table and produces a live page/image you can embed on
+the station's **QRZ.com** bio (`<img src="…/tm74-status.php?img=1">`). OpsLog
+only writes to the DB — it is not a web server.
+
+## Net control
+
+- **Directed-net logging** (Tools → Net): a global roster (`nets.json`) plus an
+  in-memory active session — check stations in, then log them individually or the
+  whole net at once (**Log everyone**) using the CAT frequency. **Drag & drop**
+  between the two lists (roster → on-air starts a QSO, on-air → roster logs it),
+  and after each log the next on-air station is selected automatically so you can
+  chain contacts.
+
+## Appearance & language
+
+- **Themes:** four complete themes (Warm light, Warm dark, Graphite dark, High
+  contrast) plus **Auto** (follows the OS light/dark preference), selectable in
+  Settings → General. Every panel and every AG-Grid table follows the theme.
+- **Bilingual:** full **English / French** UI, with a first-run flag chooser and
+  a switcher in Settings → General.
+
+## Security
+
+- **Secret vault:** opt-in passphrase encryption of the stored passwords
+  (AES-GCM + PBKDF2). Encrypted values are portable; a single unlock prompt at
+  launch decrypts them for the session.
+
+## Integrations (outbound)
+
+- **UDP emitters:** push the current frequency to **PstRotator**, radio info in
+  **N1MM `RadioInfo`** format, or an **ADIF record on each logged QSO** — so
+  external tools (rotator control, digital apps, other loggers) stay in sync.
+
+## Other
+
+- **Autostart:** launch external programs (WSJT-X, JTAlert, rotator control…) at
+  OpsLog startup, skipping any already running.
+- **Backup:** optional database + ADIF backup at shutdown.
+- **Update check** at startup and every 5 minutes (and on opening Help → About),
+  with a toast (toggleable), plus a **What's new** dialog that shows the changelog
+  (English / French) on the first launch after an update — reopenable any time
+  from the Help menu.
+- **Anonymous usage telemetry** (a once-a-day heartbeat: random install ID +
+  version + OS — no callsign or QSO data; opt-out in Preferences).
+
+---
+
+## QSL Card Designer
+
+Tools → *QSL Card Designer…* turns a few photos into a polished eQSL card:
+
+1. Pick 1–6 photos (jpeg/png). OpsLog analyzes them offline (detail/luminance
+   grid) and proposes **3 designs** — callsign in the calmest zone of the best
+   photo, operator name, CQ/ITU zones + locator line, country flag, the other
+   photos as bordered inserts, and a per-QSO confirmation box.
+2. Pick a proposal and fine-tune it: click an element to select, drag to move,
+   change font / style preset (gel gold, gel silver, classic white outline,
+   script, flat) and per-preset knobs in the right panel.
+3. Save the template (photos are copied into `data/qsl/templates/<id>/`, so the
+   originals can move). One template can be the default per profile.
+
+Sending: right-click a QSO → *Send eQSL by e-mail*. The card is rendered with
+that QSO's data, rasterized to a ≤ 800 KB JPEG, archived in `data/qsl/outbox/`
+and sent through the configured SMTP account to the address found by the
+QRZ/HamQTH lookup. On success the QSO is stamped `EQSL_SENT=Y` (ADIF). The
+e-mail subject/body templates live in the designer
+(`{CALL} {DATE} {BAND} {MODE} {MYCALL}` variables).
+
+Fonts: Archivo Black, Lilita One, Baloo 2, Oswald, Great Vibes, Allura (all
+OFL, embedded — licenses in `internal/qslcard/assets/fonts/`); Cooper Black is
+offered when MS Office installed it. Flags: flag-icons (MIT), embedded for the
+commonly-worked DXCC entities.
+
+---
+
+## Data & storage
+
+- **Config** (settings, profiles, rigs/antennas, cluster nodes, lookup cache,
+  award lists, QSL templates) always lives in the local SQLite file under
+  `data/` — instant even when the logbook is on a far-away MySQL.
+- **Logbook** (QSOs) lives where the active profile points it: the local SQLite
+  file or a per-profile shared **MySQL** database.
+
+---
+
+*A French version of this document is available in [README.fr.md](README.fr.md).*

adifwatch.go

@@ -0,0 +1,251 @@
+package main
+
+// ADIF monitor: watches a configurable list of external ADIF files (fldigi's
+// RTTY logbook, N1MM, VarAC…) and imports newly appended QSOs into OpsLog as if
+// they had been logged here — same enrichment, dedup and automatic upload to
+// external services (QRZ, Club Log…). Deliberately simpler than Log4OM's monitor:
+// no per-file "upload" / "delete after load" toggles — importing + auto-upload is
+// just what happens.
+//
+// Design notes:
+//   - A newly added file starts at its CURRENT size (Offset = -1 sentinel → set to
+//     size on first scan) so the QSOs already in it are NOT bulk-imported; only
+//     contacts appended AFTER you add the file come in.
+//   - Reads only up to the last complete <eor>, so a half-written record waits for
+//     the next poll instead of importing a truncated QSO.
+//   - Each record is fed through LogUDPLoggedADIF, which already does the full
+//     enrichment + ±2-minute dedup (shared udpLogMu, so it can't race the UDP
+//     auto-log) + automatic external-service upload.
+
+import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"io"
+	"os"
+	"strings"
+	"time"
+
+	wruntime "github.com/wailsapp/wails/v2/pkg/runtime"
+
+	"hamlog/internal/applog"
+)
+
+const keyADIFMonitor = "adifmon.config"
+
+// ADIFWatchFile is one monitored ADIF file.
+type ADIFWatchFile struct {
+	Path    string `json:"path"`
+	Enabled bool   `json:"enabled"`
+	// Offset is the number of bytes already consumed. -1 means "not yet
+	// initialised": the first scan sets it to the file's current size so existing
+	// history is skipped.
+	Offset int64 `json:"offset"`
+}
+
+// ADIFMonitorConfig is the whole monitor setup: a master switch + the file list.
+type ADIFMonitorConfig struct {
+	Enabled bool            `json:"enabled"`
+	Files   []ADIFWatchFile `json:"files"`
+}
+
+const eorTag = "<eor>"
+
+func (a *App) loadADIFMonitorLocked() ADIFMonitorConfig {
+	var cfg ADIFMonitorConfig
+	if a.settings == nil {
+		return cfg
+	}
+	s, _ := a.settings.GetGlobal(a.ctx, keyADIFMonitor)
+	if strings.TrimSpace(s) != "" {
+		_ = json.Unmarshal([]byte(s), &cfg)
+	}
+	return cfg
+}
+
+func (a *App) saveADIFMonitorLocked(cfg ADIFMonitorConfig) {
+	b, _ := json.Marshal(cfg)
+	a.setSettingGlobal(keyADIFMonitor, string(b))
+}
+
+// GetADIFMonitor returns the monitor configuration for the settings UI.
+func (a *App) GetADIFMonitor() ADIFMonitorConfig {
+	a.adifMonMu.Lock()
+	defer a.adifMonMu.Unlock()
+	return a.loadADIFMonitorLocked()
+}
+
+// SaveADIFMonitor persists the monitor configuration. A file the user just added
+// gets Offset = -1 so its existing content is skipped (only QSOs logged AFTER it
+// was added import); a file already present keeps its current read position.
+func (a *App) SaveADIFMonitor(cfg ADIFMonitorConfig) error {
+	a.adifMonMu.Lock()
+	defer a.adifMonMu.Unlock()
+	old := a.loadADIFMonitorLocked()
+	oldOff := make(map[string]int64, len(old.Files))
+	for _, f := range old.Files {
+		oldOff[strings.TrimSpace(f.Path)] = f.Offset
+	}
+	for i := range cfg.Files {
+		cfg.Files[i].Path = strings.TrimSpace(cfg.Files[i].Path)
+		if off, ok := oldOff[cfg.Files[i].Path]; ok {
+			cfg.Files[i].Offset = off // keep the read position of an existing file
+		} else {
+			cfg.Files[i].Offset = -1 // new file → skip its existing history
+		}
+	}
+	a.saveADIFMonitorLocked(cfg)
+	return nil
+}
+
+// PickADIFMonitorFile opens a file dialog to choose an ADIF file to monitor.
+func (a *App) PickADIFMonitorFile() (string, error) {
+	if a.ctx == nil {
+		return "", fmt.Errorf("no app context")
+	}
+	return wruntime.OpenFileDialog(a.ctx, wruntime.OpenDialogOptions{
+		Title: "Choose an ADIF file to monitor",
+		Filters: []wruntime.FileFilter{
+			{DisplayName: "ADIF (*.adi;*.adif)", Pattern: "*.adi;*.adif"},
+			{DisplayName: "All files (*.*)", Pattern: "*.*"},
+		},
+	})
+}
+
+// adifMonitorLoop polls the enabled ADIF files every few seconds and imports any
+// newly appended QSOs. Runs for the app's lifetime on its own goroutine.
+func (a *App) adifMonitorLoop() {
+	tick := time.NewTicker(5 * time.Second)
+	defer tick.Stop()
+	for range tick.C {
+		if a.ctx == nil || a.qso == nil {
+			continue
+		}
+		a.scanADIFMonitors()
+	}
+}
+
+// scanADIFMonitors walks the enabled files once, importing new records and
+// persisting advanced offsets.
+func (a *App) scanADIFMonitors() {
+	a.adifMonMu.Lock()
+	cfg := a.loadADIFMonitorLocked()
+	a.adifMonMu.Unlock()
+	if !cfg.Enabled || len(cfg.Files) == 0 {
+		return
+	}
+
+	// path → new offset, for the files we advanced this pass.
+	advanced := map[string]int64{}
+	for i := range cfg.Files {
+		f := &cfg.Files[i]
+		if !f.Enabled || strings.TrimSpace(f.Path) == "" {
+			continue
+		}
+		fi, err := os.Stat(f.Path)
+		if err != nil {
+			continue // not present (yet) — try again next tick
+		}
+		size := fi.Size()
+		if f.Offset < 0 {
+			// First sight of this file → skip whatever history it already holds.
+			advanced[f.Path] = size
+			continue
+		}
+		if size < f.Offset {
+			f.Offset = 0 // truncated / rotated → re-read from the start (dedup protects us)
+		}
+		if size == f.Offset {
+			continue // nothing new
+		}
+		newOff, n := a.importADIFAppend(f.Path, f.Offset, size)
+		if newOff != f.Offset {
+			advanced[f.Path] = newOff
+		}
+		if n > 0 {
+			applog.Printf("adif monitor: imported %d QSO(s) from %s", n, f.Path)
+			if a.ctx != nil {
+				wruntime.EventsEmit(a.ctx, "adifmon:imported", map[string]any{"file": f.Path, "count": n})
+			}
+		}
+	}
+
+	if len(advanced) == 0 {
+		return
+	}
+	// Persist the advanced offsets WITHOUT clobbering a concurrent UI save of the
+	// file list: re-read the stored config and only patch offsets for paths that
+	// still exist there.
+	a.adifMonMu.Lock()
+	cur := a.loadADIFMonitorLocked()
+	for i := range cur.Files {
+		if off, ok := advanced[strings.TrimSpace(cur.Files[i].Path)]; ok {
+			cur.Files[i].Offset = off
+		}
+	}
+	a.saveADIFMonitorLocked(cur)
+	a.adifMonMu.Unlock()
+}
+
+// importADIFAppend reads bytes [from,to) of an ADIF file, imports every COMPLETE
+// record found (up to the last <eor>) and returns the new offset (just past that
+// last <eor>) plus how many QSOs were actually imported (duplicates excluded).
+func (a *App) importADIFAppend(path string, from, to int64) (int64, int) {
+	fh, err := os.Open(path)
+	if err != nil {
+		return from, 0
+	}
+	defer fh.Close()
+	if _, err := fh.Seek(from, io.SeekStart); err != nil {
+		return from, 0
+	}
+	buf := make([]byte, to-from)
+	nRead, err := io.ReadFull(fh, buf)
+	if err != nil && err != io.ErrUnexpectedEOF && err != io.EOF {
+		return from, 0
+	}
+	buf = buf[:nRead]
+
+	// Only consume up to the last complete <eor>; a half-written trailing record
+	// waits for the next poll.
+	lower := bytes.ToLower(buf)
+	last := bytes.LastIndex(lower, []byte(eorTag))
+	if last < 0 {
+		return from, 0 // no complete record yet
+	}
+	end := last + len(eorTag)
+	chunk := buf[:end]
+
+	count := 0
+	for _, rec := range splitADIFRecords(chunk) {
+		if strings.TrimSpace(rec) == "" {
+			continue
+		}
+		if _, err := a.LogUDPLoggedADIF(rec); err == nil {
+			count++
+		}
+		// A duplicate (already in the log within ±2 min) returns an error and is
+		// simply not counted — expected when the same QSO is also logged in OpsLog.
+	}
+	return from + int64(end), count
+}
+
+// splitADIFRecords cuts an ADIF byte slice into individual record texts, each
+// ending at its <eor> (case-insensitive). Any leading file header (up to the
+// first record's <eor>) rides along with the first record — LogUDPLoggedADIF
+// parses past an <EOH> header fine, and prepends one when there is none.
+func splitADIFRecords(b []byte) []string {
+	lower := bytes.ToLower(b)
+	var out []string
+	start := 0
+	for {
+		rel := bytes.Index(lower[start:], []byte(eorTag))
+		if rel < 0 {
+			break
+		}
+		end := start + rel + len(eorTag)
+		out = append(out, string(b[start:end]))
+		start = end
+	}
+	return out
+}

app_awards_tracked.go

@@ -0,0 +1,57 @@
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+	"strings"
+
+	wruntime "github.com/wailsapp/wails/v2/pkg/runtime"
+)
+
+// keyAwardsTracked holds the PER-PROFILE list of award codes the operator wants
+// to follow (JSON array of award.Def.Code). Award definitions themselves are
+// global (keyAwardDefs, shared across profiles), but WHICH awards a station
+// tracks is a per-profile choice — a DX profile follows DXCC/WPX, a POTA profile
+// follows POTA/WWFF. An empty/unset list means "track them all" so the Awards
+// tab is never blank before the operator has picked anything.
+const keyAwardsTracked = "awards.tracked"
+
+// GetTrackedAwards returns the active profile's followed award codes. An empty
+// slice means the operator has not narrowed the list — the Awards tab then shows
+// every award.
+func (a *App) GetTrackedAwards() ([]string, error) {
+	out := []string{}
+	if a.settings == nil {
+		return out, nil
+	}
+	s, _ := a.settings.Get(a.ctx, keyAwardsTracked)
+	if strings.TrimSpace(s) == "" {
+		return out, nil
+	}
+	if err := json.Unmarshal([]byte(s), &out); err != nil {
+		return []string{}, nil
+	}
+	return out, nil
+}
+
+// SaveTrackedAwards persists the followed award codes for the active profile and
+// notifies the Awards tab to re-filter its list. Codes are stored verbatim; the
+// Awards tab intersects them with the live award definitions, so a code that no
+// longer exists is simply ignored (not an error).
+func (a *App) SaveTrackedAwards(codes []string) error {
+	if a.settings == nil {
+		return fmt.Errorf("db not initialized")
+	}
+	if codes == nil {
+		codes = []string{}
+	}
+	b, err := json.Marshal(codes)
+	if err != nil {
+		return err
+	}
+	if err := a.settings.Set(a.ctx, keyAwardsTracked, string(b)); err != nil {
+		return err
+	}
+	wruntime.EventsEmit(a.ctx, "awards:tracked-changed")
+	return nil
+}

app_cw.go

@@ -0,0 +1,149 @@
+package main
+
+import (
+	"fmt"
+	"time"
+
+	"hamlog/internal/applog"
+	"hamlog/internal/audio"
+	"hamlog/internal/cwdecode"
+
+	wruntime "github.com/wailsapp/wails/v2/pkg/runtime"
+)
+
+// CW decoder: taps the RX audio device (the same "From radio" capture the DVK
+// and QSO recorder use) and streams decoded Morse text to the UI. It is started
+// only by the frontend, and only while the entry mode is CW.
+//
+// Pitch targeting: the single-channel decoder is far more reliable when it locks
+// to a KNOWN pitch (a narrow filter at the signal frequency, like a skimmer)
+// instead of auto-searching for the loudest tone. So we follow the radio's CW
+// pitch (FlexRadio cw_pitch) when available — or a manual override — and fall
+// back to auto-search otherwise.
+
+// cwTargetPitch returns the pitch (Hz) the decoder should lock to: the manual
+// override if set, else the FlexRadio's CW pitch when it's in CW, else 0 (auto).
+func (a *App) cwTargetPitch() int {
+	if a.cwPitchHz > 0 {
+		return a.cwPitchHz
+	}
+	if a.cat != nil {
+		if st, ok := a.cat.FlexState(); ok && st.Available {
+			// Only trust the radio's pitch when it's actually in CW.
+			if st.Mode == "CW" || st.Mode == "CWL" || st.Mode == "CWU" {
+				if st.CWPitch > 0 {
+					return st.CWPitch
+				}
+			}
+		}
+	}
+	return 0
+}
+
+// StartCWDecoder begins decoding CW from the configured RX audio device. The
+// frontend calls this when the decoder toggle is on AND the mode is CW. Safe to
+// call repeatedly; a second call is a no-op while already running.
+func (a *App) StartCWDecoder() error {
+	a.cwMu.Lock()
+	defer a.cwMu.Unlock()
+	if a.cwStop != nil {
+		return nil // already running
+	}
+	dev := ""
+	if a.settings != nil {
+		dev, _ = a.settings.Get(a.ctx, keyAudioFromRadio)
+	}
+	if dev == "" {
+		return fmt.Errorf("no RX audio device configured (set \"From radio\" in Audio settings)")
+	}
+
+	dec := cwdecode.New(audio.SampleRate,
+		func(text string) {
+			if a.ctx != nil {
+				wruntime.EventsEmit(a.ctx, "cw:text", text)
+			}
+		},
+		func(st cwdecode.Status) {
+			if a.ctx != nil {
+				wruntime.EventsEmit(a.ctx, "cw:status", st)
+			}
+		},
+	)
+	dec.SetTarget(a.cwTargetPitch())
+	a.cwDecoder = dec
+
+	stop := make(chan struct{})
+	a.cwStop = stop
+	go func() {
+		if err := audio.StreamCapture(dev, stop, dec.Process); err != nil {
+			applog.Printf("cw: capture failed: %v", err)
+			if a.ctx != nil {
+				wruntime.EventsEmit(a.ctx, "cw:error", err.Error())
+			}
+		}
+		a.cwMu.Lock()
+		if a.cwStop == stop {
+			a.cwStop = nil
+			a.cwDecoder = nil
+		}
+		a.cwMu.Unlock()
+	}()
+	// Follow the radio's CW pitch live (every second) while this run is active.
+	go a.cwFollowPitch(stop, dec)
+	return nil
+}
+
+// cwFollowPitch keeps the decoder locked to the current target pitch until stop.
+func (a *App) cwFollowPitch(stop <-chan struct{}, dec *cwdecode.Decoder) {
+	t := time.NewTicker(time.Second)
+	defer t.Stop()
+	for {
+		select {
+		case <-stop:
+			return
+		case <-t.C:
+			dec.SetTarget(a.cwTargetPitch())
+		}
+	}
+}
+
+// StopCWDecoder halts the CW decoder if running.
+func (a *App) StopCWDecoder() {
+	a.cwMu.Lock()
+	stop := a.cwStop
+	a.cwStop = nil
+	a.cwDecoder = nil
+	a.cwMu.Unlock()
+	if stop != nil {
+		close(stop)
+	}
+}
+
+// CWDecoderRunning reports whether the decoder is currently capturing.
+func (a *App) CWDecoderRunning() bool {
+	a.cwMu.Lock()
+	defer a.cwMu.Unlock()
+	return a.cwStop != nil
+}
+
+// SetCWDecoderPitch sets a manual decode pitch (Hz); 0 returns to auto (follow
+// the Flex CW pitch, or search). Applies live to a running decoder.
+func (a *App) SetCWDecoderPitch(hz int) {
+	if hz < 0 {
+		hz = 0
+	}
+	a.cwMu.Lock()
+	a.cwPitchHz = hz
+	dec := a.cwDecoder
+	a.cwMu.Unlock()
+	if dec != nil {
+		dec.SetTarget(a.cwTargetPitch())
+	}
+}
+
+// GetCWDecoderPitch returns the manual override (0 = auto / follow Flex).
+func (a *App) GetCWDecoderPitch() int {
+	a.cwMu.Lock()
+	defer a.cwMu.Unlock()
+	return a.cwPitchHz
+}

app_gate.go

@@ -0,0 +1,60 @@
+package main
+
+import (
+	"crypto/sha256"
+	"encoding/hex"
+	"os"
+	"strings"
+)
+
+// deniedCallHashes lists station callsigns not permitted to run this build,
+// stored as SHA-256 hex of the base call so the calls themselves appear nowhere
+// in the source or the compiled binary. Enforcement is best-effort by design —
+// the call is entered by the operator and can be changed — so this only turns
+// away straightforward use, not a determined one.
+var deniedCallHashes = map[string]struct{}{
+	"2282a88b3e5e4eebc6b8174d005bb46d32025758b7741bdcf34f2b3621c02205": {},
+	"0ee09fe60817a2a4982f5e5b14a60b8dbb11cff55b3d36661213c4cbdd0933ea": {},
+	"46fb61e71afb40627cb6493a6a59c9d4d0231ee3cad1a2bf3fcc4cdfce36fabc": {},
+}
+
+// callDenied reports whether a callsign is on deniedCallHashes. The call is
+// reduced to its base form (upper-cased, portable prefix/suffix dropped) the
+// same way extsvc does, so F4XYZ/P matches F4XYZ.
+func callDenied(call string) bool {
+	base := denyBaseCall(call)
+	if base == "" {
+		return false
+	}
+	sum := sha256.Sum256([]byte(base))
+	_, bad := deniedCallHashes[hex.EncodeToString(sum[:])]
+	return bad
+}
+
+// denyBaseCall mirrors extsvc.baseCall: for a slashed form it returns the
+// longest token (the real call), otherwise the call itself, upper-cased.
+func denyBaseCall(s string) string {
+	s = strings.ToUpper(strings.TrimSpace(s))
+	if !strings.Contains(s, "/") {
+		return s
+	}
+	best := ""
+	for _, part := range strings.Split(s, "/") {
+		if len(part) > len(best) {
+			best = part
+		}
+	}
+	return best
+}
+
+// enforceCallGate exits the process silently when any of the supplied callsigns
+// is denied. Called once at startup, after the profiles are loaded: the first
+// launch is where the operator enters and saves the call, so a denied build
+// simply does not come back up on the next launch. No window, no message.
+func enforceCallGate(calls ...string) {
+	for _, c := range calls {
+		if callDenied(c) {
+			os.Exit(0)
+		}
+	}
+}

app_qsl_designer.go

@@ -0,0 +1,750 @@
+package main
+
+// QSL card designer bindings. All logic lives in internal/qslcard — this file
+// only adapts it to the Wails boundary (thin methods on *App, same receiver
+// as app.go so bindings keep working). Template documents cross the bridge
+// as JSON strings: the schema is the single source of truth and the frontend
+// mirrors it in qslTypes.ts.
+
+import (
+	"encoding/base64"
+	"encoding/json"
+	"fmt"
+	"os"
+	"path/filepath"
+	"sort"
+	"strconv"
+	"strings"
+	"time"
+
+	"hamlog/internal/applog"
+	"hamlog/internal/dxcc"
+	"hamlog/internal/email"
+	"hamlog/internal/qslcard"
+	"hamlog/internal/qso"
+
+	wruntime "github.com/wailsapp/wails/v2/pkg/runtime"
+)
+
+// Settings keys for the eQSL e-mail templates (subject/body share the
+// {CALL}/{DATE}/{BAND}/{MODE}/{MYCALL} variables of the recording e-mail).
+const (
+	keyQSLEmailSubject = "qsl.email_subject"
+	keyQSLEmailBody    = "qsl.email_body"
+	keyQSLAutoSend     = "qsl.auto_send"      // "1" → render+send an eQSL on log when an e-mail and default template exist
+	keyQSLDefaultMsg   = "qsl.default_message" // fallback QSL message printed on the card when the QSO's own QSLMSG is empty
+)
+
+// appQSLCardSentField is the ADIF APP_ field stamping when OpsLog e-mailed its
+// own QSL card. Deliberately NOT eqsl_sent (that's eQSL.cc's, kept independent).
+const appQSLCardSentField = "APP_OPSLOG_QSL_SENT"
+
+// appQSLCardRcvdField marks that a QSL was RECEIVED for this QSO (set by the
+// operator, e.g. when a card arrives by e-mail). It drives the PSE/TNX stamp on
+// the card: received → "TNX QSL" (thanks for your card), not received → "PSE QSL"
+// (please send one). Independent of ADIF qsl_rcvd, like the sent field.
+const appQSLCardRcvdField = "APP_OPSLOG_QSL_RCVD"
+
+const (
+	defaultQSLEmailSubject = "eQSL — {CALL} de {MYCALL}"
+	defaultQSLEmailBody    = "Hi,\n\nThank you for our QSO! Please find attached your eQSL card.\n\n{DATE}  ·  {BAND}  ·  {MODE}\n\n73,\n{MYCALL}"
+)
+
+// qslDir is the root of all designer artifacts: templates/<id>/ and outbox/.
+func (a *App) qslDir() string { return filepath.Join(a.dataDir, "qsl") }
+
+// QSLTemplateInfo is the template-list row shown in the designer.
+type QSLTemplateInfo struct {
+	ID        int64  `json:"id"`
+	Name      string `json:"name"`
+	ProfileID *int64 `json:"profile_id,omitempty"`
+	IsDefault bool   `json:"is_default"`
+	UpdatedAt string `json:"updated_at"`
+}
+
+// QSLFontInfo is one font face offered by the designer, TTF bytes included
+// so the frontend can build @font-face rules (and inline them into the SVG
+// before rasterization).
+type QSLFontInfo struct {
+	Family   string `json:"family"`
+	Kind     string `json:"kind"` // "display" | "script" | "system"
+	Variable bool   `json:"variable"`
+	DataB64  string `json:"data_b64"`
+}
+
+// QSLPresetInfo describes one style preset for the picker.
+type QSLPresetInfo struct {
+	Name     string              `json:"name"`
+	Label    string              `json:"label"`
+	Params   []string            `json:"params"` // accepted style_params keys
+	Defaults qslcard.StyleParams `json:"defaults"`
+}
+
+// QSLPickPhotos opens a multi-select dialog for the designer drop zone's
+// "browse" path (drag & drop hands the webview File objects without paths,
+// so picking through the native dialog is the reliable route to real paths).
+func (a *App) QSLPickPhotos() ([]string, error) {
+	return wruntime.OpenMultipleFilesDialog(a.ctx, wruntime.OpenDialogOptions{
+		Title: "Choose card photos (1–5)",
+		Filters: []wruntime.FileFilter{
+			{DisplayName: "Photos (*.jpg;*.jpeg;*.png)", Pattern: "*.jpg;*.jpeg;*.png"},
+		},
+	})
+}
+
+// QSLGenerateProposals analyzes the photos and returns 3 distinct template
+// documents (JSON) from the automatic placement engine.
+func (a *App) QSLGenerateProposals(photoPaths []string) ([]string, error) {
+	if len(photoPaths) == 0 {
+		return nil, fmt.Errorf("no photos selected")
+	}
+	if len(photoPaths) > 5 {
+		return nil, fmt.Errorf("at most 5 photos (got %d)", len(photoPaths))
+	}
+	photos := make([]qslcard.PhotoAnalysis, 0, len(photoPaths))
+	for _, p := range photoPaths {
+		ph, err := qslcard.AnalyzePhoto(p)
+		if err != nil {
+			return nil, fmt.Errorf("analyze %s: %w", filepath.Base(p), err)
+		}
+		photos = append(photos, ph)
+	}
+	info, err := a.qslProfileInfo()
+	if err != nil {
+		return nil, err
+	}
+	var engine qslcard.LayoutEngine = qslcard.HeuristicEngine{}
+	templates, err := engine.Propose(photos, info)
+	if err != nil {
+		return nil, err
+	}
+	out := make([]string, len(templates))
+	for i, t := range templates {
+		b, err := qslcard.Encode(t)
+		if err != nil {
+			return nil, err
+		}
+		out[i] = string(b)
+	}
+	return out, nil
+}
+
+// QSLListTemplates returns the templates for the ACTIVE profile (its own plus any
+// shared/global ones), defaults first — so the default is per-profile, not a
+// single global list shared by every profile.
+func (a *App) QSLListTemplates() ([]QSLTemplateInfo, error) {
+	if a.qslTemplates == nil {
+		return nil, fmt.Errorf("db not initialized")
+	}
+	var recs []qslcard.Record
+	var err error
+	if p, e := a.profiles.Active(a.ctx); e == nil {
+		recs, err = a.qslTemplates.ListFor(a.ctx, p.ID)
+	} else {
+		recs, err = a.qslTemplates.List(a.ctx)
+	}
+	if err != nil {
+		return nil, err
+	}
+	out := make([]QSLTemplateInfo, 0, len(recs))
+	for _, r := range recs {
+		out = append(out, QSLTemplateInfo{
+			ID: r.ID, Name: r.Name, ProfileID: r.ProfileID,
+			IsDefault: r.IsDefault, UpdatedAt: r.UpdatedAt.Format("2006-01-02 15:04"),
+		})
+	}
+	return out, nil
+}
+
+// QSLGetTemplate returns a stored template document (JSON).
+func (a *App) QSLGetTemplate(id int64) (string, error) {
+	if a.qslTemplates == nil {
+		return "", fmt.Errorf("db not initialized")
+	}
+	rec, err := a.qslTemplates.Get(a.ctx, id)
+	if err != nil {
+		return "", err
+	}
+	return rec.JSON, nil
+}
+
+// QSLSaveTemplate validates and stores a template. id 0 creates; the photos
+// the document references at their original (absolute) paths are copied into
+// the template's asset folder so the design survives the user moving files.
+// Returns the template id.
+func (a *App) QSLSaveTemplate(id int64, name string, doc string, forActiveProfile bool) (int64, error) {
+	if a.qslTemplates == nil {
+		return 0, fmt.Errorf("db not initialized")
+	}
+	name = strings.TrimSpace(name)
+	if name == "" {
+		return 0, fmt.Errorf("template name required")
+	}
+	t, err := qslcard.Parse([]byte(doc))
+	if err != nil {
+		return 0, err
+	}
+	t.Name = name
+	if err := qslcard.Validate(t, nil); err != nil {
+		return 0, err
+	}
+
+	rec := qslcard.Record{ID: id, Name: name}
+	if forActiveProfile {
+		if p, err := a.profiles.Active(a.ctx); err == nil {
+			rec.ProfileID = &p.ID
+		}
+	}
+	// Two-phase save: the row first (a new template needs its id to own an
+	// asset folder), then photo import + the final document.
+	rec.JSON = doc
+	if err := a.qslTemplates.Save(a.ctx, &rec); err != nil {
+		return 0, err
+	}
+	dir := qslcard.TemplateDir(a.qslDir(), rec.ID)
+	if err := qslcard.ImportPhotos(&t, dir); err != nil {
+		return 0, err
+	}
+	if err := qslcard.Validate(t, qslcard.PhotoExistsIn(dir)); err != nil {
+		return 0, err
+	}
+	final, err := qslcard.Encode(t)
+	if err != nil {
+		return 0, err
+	}
+	rec.JSON = string(final)
+	if err := a.qslTemplates.Save(a.ctx, &rec); err != nil {
+		return 0, err
+	}
+	applog.Printf("qsl: template %q saved (id %d)", name, rec.ID)
+	return rec.ID, nil
+}
+
+// QSLSetDefaultTemplate marks a template as default for its profile scope.
+func (a *App) QSLSetDefaultTemplate(id int64) error {
+	if a.qslTemplates == nil {
+		return fmt.Errorf("db not initialized")
+	}
+	return a.qslTemplates.SetDefault(a.ctx, id)
+}
+
+// QSLDeleteTemplate removes a template and its asset folder.
+func (a *App) QSLDeleteTemplate(id int64) error {
+	if a.qslTemplates == nil {
+		return fmt.Errorf("db not initialized")
+	}
+	if err := a.qslTemplates.Delete(a.ctx, id); err != nil {
+		return err
+	}
+	return qslcard.RemoveTemplateDir(a.qslDir(), id)
+}
+
+// QSLSavePreview stores the rasterized thumbnail (PNG, base64) the frontend
+// renders at save time, shown in the template list.
+func (a *App) QSLSavePreview(id int64, pngB64 string) error {
+	data, err := base64.StdEncoding.DecodeString(pngB64)
+	if err != nil {
+		return fmt.Errorf("decode preview: %w", err)
+	}
+	dir := qslcard.TemplateDir(a.qslDir(), id)
+	if err := os.MkdirAll(dir, 0o755); err != nil {
+		return fmt.Errorf("create template dir: %w", err)
+	}
+	if err := os.WriteFile(filepath.Join(dir, "preview.png"), data, 0o644); err != nil {
+		return fmt.Errorf("write preview: %w", err)
+	}
+	return nil
+}
+
+// QSLPreviewDataURL returns the stored thumbnail as a data URL ("" if the
+// template has none yet).
+func (a *App) QSLPreviewDataURL(id int64) (string, error) {
+	data, err := os.ReadFile(filepath.Join(qslcard.TemplateDir(a.qslDir(), id), "preview.png"))
+	if os.IsNotExist(err) {
+		return "", nil
+	}
+	if err != nil {
+		return "", fmt.Errorf("read preview: %w", err)
+	}
+	return "data:image/png;base64," + base64.StdEncoding.EncodeToString(data), nil
+}
+
+// QSLPhotoDataURL returns a template photo as a data URL. templateID 0 reads
+// a draft photo at its original absolute path (pre-save editing); otherwise
+// ref is a name inside the template's asset folder.
+func (a *App) QSLPhotoDataURL(templateID int64, ref string) (string, error) {
+	var path string
+	switch {
+	case templateID > 0 && !qslcard.IsDraftPhoto(ref):
+		path = filepath.Join(qslcard.TemplateDir(a.qslDir(), templateID), filepath.Base(ref))
+	case qslcard.IsDraftPhoto(ref):
+		path = ref
+	default:
+		return "", fmt.Errorf("photo %q not available without a template id", ref)
+	}
+	data, err := os.ReadFile(path)
+	if err != nil {
+		return "", fmt.Errorf("read photo: %w", err)
+	}
+	mime := "image/jpeg"
+	if strings.EqualFold(filepath.Ext(path), ".png") {
+		mime = "image/png"
+	}
+	return "data:" + mime + ";base64," + base64.StdEncoding.EncodeToString(data), nil
+}
+
+// QSLFlagDataURL returns an embedded flag SVG as a data URL ("" = no flag).
+func (a *App) QSLFlagDataURL(iso string) (string, error) {
+	if iso == "" {
+		return "", nil
+	}
+	svg, err := qslcard.FlagSVG(iso)
+	if err != nil {
+		return "", err
+	}
+	return "data:image/svg+xml;base64," + base64.StdEncoding.EncodeToString(svg), nil
+}
+
+// QSLFonts returns the embedded designer fonts (plus Cooper Black when the
+// machine has it) for @font-face registration.
+func (a *App) QSLFonts() ([]QSLFontInfo, error) {
+	fonts, err := qslcard.Fonts()
+	if err != nil {
+		return nil, err
+	}
+	out := make([]QSLFontInfo, 0, len(fonts))
+	for _, f := range fonts {
+		out = append(out, QSLFontInfo{
+			Family: f.Family, Kind: f.Kind, Variable: f.Variable,
+			DataB64: base64.StdEncoding.EncodeToString(f.Data),
+		})
+	}
+	return out, nil
+}
+
+// QSLStylePresets lists the built-in style presets for the picker.
+func (a *App) QSLStylePresets() []QSLPresetInfo {
+	out := make([]QSLPresetInfo, 0, len(qslcard.Presets))
+	for _, p := range qslcard.Presets {
+		params := make([]string, 0, len(p.AllowedParams))
+		for k := range p.AllowedParams {
+			params = append(params, k)
+		}
+		sort.Strings(params)
+		out = append(out, QSLPresetInfo{Name: p.Name, Label: p.Label, Params: params, Defaults: p.Defaults})
+	}
+	sort.Slice(out, func(i, j int) bool { return out[i].Name < out[j].Name })
+	return out
+}
+
+// QSLResolvePreview fills a template's placeholders with the active profile
+// and a representative sample QSO, for the live editor preview. Returns the
+// RenderModel as JSON.
+func (a *App) QSLResolvePreview(doc string) (string, error) {
+	t, err := qslcard.Parse([]byte(doc))
+	if err != nil {
+		return "", err
+	}
+	vars, country, err := a.qslVars(sampleQSO())
+	if err != nil {
+		return "", err
+	}
+	return encodeRenderModel(qslcard.Resolve(t, vars, country))
+}
+
+// QSLDefaultTemplateID returns the template the eQSL send flow should use
+// for the active profile (0 when none exists yet).
+func (a *App) QSLDefaultTemplateID() (int64, error) {
+	if a.qslTemplates == nil {
+		return 0, fmt.Errorf("db not initialized")
+	}
+	p, err := a.profiles.Active(a.ctx)
+	if err != nil {
+		return 0, fmt.Errorf("no active profile: %w", err)
+	}
+	rec, err := a.qslTemplates.DefaultFor(a.ctx, p.ID)
+	if err != nil {
+		return 0, nil // no templates yet — the UI offers to open the designer
+	}
+	return rec.ID, nil
+}
+
+// RenderEQSL loads a QSO and a template and returns the fully-resolved
+// render model (JSON) for the frontend to rasterize.
+func (a *App) RenderEQSL(qsoID int64, templateID int64) (string, error) {
+	if a.qso == nil || a.qslTemplates == nil {
+		return "", fmt.Errorf("db not initialized")
+	}
+	q, err := a.qso.GetByID(a.ctx, qsoID)
+	if err != nil {
+		return "", err
+	}
+	rec, err := a.qslTemplates.Get(a.ctx, templateID)
+	if err != nil {
+		return "", fmt.Errorf("template %d: %w", templateID, err)
+	}
+	t, err := qslcard.Parse([]byte(rec.JSON))
+	if err != nil {
+		return "", err
+	}
+	dir := qslcard.TemplateDir(a.qslDir(), templateID)
+	if err := qslcard.Validate(t, qslcard.PhotoExistsIn(dir)); err != nil {
+		return "", err
+	}
+	vars, country, err := a.qslVars(q)
+	if err != nil {
+		return "", err
+	}
+	return encodeRenderModel(qslcard.Resolve(t, vars, country))
+}
+
+// SendEQSL e-mails the rasterized card (JPEG, base64) to the QSO's
+// correspondent, archives it in the outbox and stamps eqsl_sent on success.
+func (a *App) SendEQSL(qsoID int64, templateID int64, jpegB64 string) error {
+	if a.qso == nil {
+		return fmt.Errorf("db not initialized")
+	}
+	q, err := a.qso.GetByID(a.ctx, qsoID)
+	if err != nil {
+		return err
+	}
+	to := strings.TrimSpace(q.Email)
+	if to == "" {
+		return fmt.Errorf("no e-mail address for %s — run a QRZ/HamQTH lookup first", q.Callsign)
+	}
+	data, err := base64.StdEncoding.DecodeString(jpegB64)
+	if err != nil {
+		return fmt.Errorf("decode card image: %w", err)
+	}
+	outbox := filepath.Join(a.qslDir(), "outbox")
+	if err := os.MkdirAll(outbox, 0o755); err != nil {
+		return fmt.Errorf("create outbox: %w", err)
+	}
+	safeCall := strings.Map(func(r rune) rune {
+		if r == '/' || r == '\\' || r == ':' {
+			return '_'
+		}
+		return r
+	}, q.Callsign)
+	path := filepath.Join(outbox, fmt.Sprintf("%s_%s.jpg", safeCall, q.QSODate.UTC().Format("20060102_1504")))
+	if err := os.WriteFile(path, data, 0o644); err != nil {
+		return fmt.Errorf("write outbox file: %w", err)
+	}
+
+	s, _ := a.GetEmailSettings()
+	subject, _ := a.settings.Get(a.ctx, keyQSLEmailSubject)
+	if subject == "" {
+		subject = defaultQSLEmailSubject
+	}
+	body, _ := a.settings.Get(a.ctx, keyQSLEmailBody)
+	if body == "" {
+		body = defaultQSLEmailBody
+	}
+	if err := email.Send(a.emailConfig(s), to, a.fillTemplate(subject, q), a.fillTemplate(body, q), path); err != nil {
+		applog.Printf("qsl: send eQSL to %s (%s) failed: %v", to, q.Callsign, err)
+		return err
+	}
+	// Record WHEN OpsLog e-mailed its own QSL card, in a dedicated app field — NOT
+	// the ADIF eqsl_sent flag, which belongs to eQSL.cc and must stay independent.
+	//
+	// Stamp ONLY this extras key (targeted UPDATE), never a full-row write. The `q`
+	// read up top is now stale after the slow e-mail send, and rewriting the whole
+	// row would revert any column an auto-upload changed meanwhile — that's how
+	// sending a QSL card was flipping clublog_qso_upload_status back from Y to R.
+	if err := a.qso.SetExtra(a.ctx, qsoID, appQSLCardSentField, time.Now().UTC().Format(time.RFC3339)); err != nil {
+		applog.Printf("qsl: card sent to %s but marking failed: %v", q.Callsign, err)
+		return fmt.Errorf("QSL card sent but status not saved: %w", err)
+	}
+	applog.Printf("qsl: eQSL sent to %s (%s)", to, q.Callsign)
+	wruntime.EventsEmit(a.ctx, "qsl:sent", qsoID)
+	return nil
+}
+
+// qslDefaultMessage returns the operator's default QSL message (Settings), used
+// on the card when a QSO has no QSLMSG of its own.
+func (a *App) qslDefaultMessage() string {
+	if a.settings == nil {
+		return ""
+	}
+	s, _ := a.settings.Get(a.ctx, keyQSLDefaultMsg)
+	return s
+}
+
+// SetOpsLogQSLReceived marks (or clears) that a QSL was received for a QSO. This
+// flips the card's PSE/TNX stamp. Stored as a timestamp in the QSO extras (a
+// single-key UPDATE, like the sent marker) so it survives concurrent uploads.
+func (a *App) SetOpsLogQSLReceived(qsoID int64, on bool) error {
+	if a.qso == nil {
+		return fmt.Errorf("db not initialized")
+	}
+	v := ""
+	if on {
+		v = time.Now().UTC().Format(time.RFC3339)
+	}
+	return a.qso.SetExtra(a.ctx, qsoID, appQSLCardRcvdField, v)
+}
+
+// QSLEmailTemplates is the eQSL e-mail subject/body, the auto-send toggle, and
+// the default QSL message printed on the card when a QSO has none of its own.
+type QSLEmailTemplates struct {
+	Subject        string `json:"subject"`
+	Body           string `json:"body"`
+	AutoSend       bool   `json:"auto_send"`
+	DefaultMessage string `json:"default_message"`
+}
+
+// QSLGetEmailTemplates returns the eQSL e-mail templates (with defaults).
+func (a *App) QSLGetEmailTemplates() (QSLEmailTemplates, error) {
+	out := QSLEmailTemplates{Subject: defaultQSLEmailSubject, Body: defaultQSLEmailBody}
+	if a.settings == nil {
+		return out, nil
+	}
+	m, err := a.settings.GetMany(a.ctx, keyQSLEmailSubject, keyQSLEmailBody, keyQSLAutoSend, keyQSLDefaultMsg)
+	if err != nil {
+		return out, err
+	}
+	if s := m[keyQSLEmailSubject]; s != "" {
+		out.Subject = s
+	}
+	if b := m[keyQSLEmailBody]; b != "" {
+		out.Body = b
+	}
+	out.AutoSend = m[keyQSLAutoSend] == "1"
+	out.DefaultMessage = m[keyQSLDefaultMsg]
+	return out, nil
+}
+
+// QSLSaveEmailTemplates persists the eQSL e-mail templates and auto-send flag.
+func (a *App) QSLSaveEmailTemplates(t QSLEmailTemplates) error {
+	if a.settings == nil {
+		return fmt.Errorf("db not initialized")
+	}
+	if err := a.settings.Set(a.ctx, keyQSLEmailSubject, t.Subject); err != nil {
+		return err
+	}
+	if err := a.settings.Set(a.ctx, keyQSLEmailBody, t.Body); err != nil {
+		return err
+	}
+	v := "0"
+	if t.AutoSend {
+		v = "1"
+	}
+	if err := a.settings.Set(a.ctx, keyQSLAutoSend, v); err != nil {
+		return err
+	}
+	return a.settings.Set(a.ctx, keyQSLDefaultMsg, t.DefaultMessage)
+}
+
+// maybeAutoSendEQSL fires an eQSL render+send for a freshly-logged QSO when the
+// user enabled auto-send and the prerequisites hold: a recipient e-mail, a
+// default template for the active profile, and the QSO not already confirmed.
+// Rasterization happens in the webview, so this only emits an event ("qsl:autosend")
+// the frontend acts on — never sends from here. Silent when any condition fails.
+func (a *App) maybeAutoSendEQSL(q qso.QSO) {
+	if a.settings == nil || a.qslTemplates == nil || a.profiles == nil || a.ctx == nil {
+		return
+	}
+	if v, _ := a.settings.Get(a.ctx, keyQSLAutoSend); v != "1" {
+		return
+	}
+	if strings.TrimSpace(q.Email) == "" || q.Extras[appQSLCardSentField] != "" {
+		return
+	}
+	p, err := a.profiles.Active(a.ctx)
+	if err != nil {
+		return
+	}
+	rec, err := a.qslTemplates.DefaultFor(a.ctx, p.ID)
+	if err != nil {
+		applog.Printf("qsl: auto-send skipped for %s — no template (%v)", q.Callsign, err)
+		return
+	}
+	wruntime.EventsEmit(a.ctx, "qsl:autosend", map[string]any{
+		"qsoId": q.ID, "templateId": rec.ID, "callsign": q.Callsign,
+	})
+}
+
+// ── helpers ─────────────────────────────────────────────────────────────
+
+func encodeRenderModel(m qslcard.RenderModel) (string, error) {
+	b, err := json.Marshal(m)
+	if err != nil {
+		return "", fmt.Errorf("encode render model: %w", err)
+	}
+	return string(b), nil
+}
+
+// qslProfileInfo extracts the placement-engine inputs from the active
+// profile, filling missing zones from cty.dat.
+func (a *App) qslProfileInfo() (qslcard.ProfileInfo, error) {
+	if a.profiles == nil {
+		return qslcard.ProfileInfo{}, fmt.Errorf("db not initialized")
+	}
+	p, err := a.profiles.Active(a.ctx)
+	if err != nil {
+		return qslcard.ProfileInfo{}, fmt.Errorf("no active profile: %w", err)
+	}
+	info := qslcard.ProfileInfo{
+		Callsign: p.Callsign,
+		Operator: p.OpName, // personal name for the QSL script (not the OPERATOR callsign)
+		Grid:     p.MyGrid,
+		Rig:      p.MyRig,
+		Antenna:  p.MyAntenna,
+	}
+	if p.MyCQZone != nil {
+		info.CQZone = *p.MyCQZone
+	}
+	if p.MyITUZone != nil {
+		info.ITUZone = *p.MyITUZone
+	}
+	if (info.CQZone == 0 || info.ITUZone == 0) && a.dxcc != nil {
+		if m, ok := a.dxcc.Lookup(p.Callsign); ok {
+			if info.CQZone == 0 {
+				info.CQZone = m.CQZone
+			}
+			if info.ITUZone == 0 {
+				info.ITUZone = m.ITUZone
+			}
+		}
+	}
+	// Most users define rig/antenna in the operating manager (band defaults),
+	// not the profile's MY_RIG/MY_ANTENNA text fields. Fall back to a band
+	// default so the designer knows the station line has data to show.
+	if (info.Rig == "" || info.Antenna == "") && a.operating != nil {
+		for _, band := range []string{"20m", "40m", "80m", "10m", "2m", "160m"} {
+			d, _, e := a.operating.BandDefault(a.ctx, p.ID, band)
+			if e != nil {
+				continue
+			}
+			if info.Rig == "" {
+				info.Rig = d.StationName
+			}
+			if info.Antenna == "" {
+				info.Antenna = d.AntennaName
+			}
+			if info.Rig != "" && info.Antenna != "" {
+				break
+			}
+		}
+	}
+	return info, nil
+}
+
+// qslRigAntenna resolves the rig and antenna names for a QSO: the values
+// stamped on it (MY_RIG/MY_ANTENNA), falling back to the operating manager's
+// default for the QSO's band (so the preview and back-entered QSOs aren't
+// blank).
+func (a *App) qslRigAntenna(q qso.QSO) (rig, ant string) {
+	rig, ant = q.MyRig, q.MyAntenna
+	if (rig != "" && ant != "") || a.operating == nil || a.profiles == nil {
+		return rig, ant
+	}
+	p, err := a.profiles.Active(a.ctx)
+	if err != nil {
+		return rig, ant
+	}
+	band := q.Band
+	if band == "" {
+		band = "20m"
+	}
+	if d, _, e := a.operating.BandDefault(a.ctx, p.ID, band); e == nil {
+		if rig == "" {
+			rig = d.StationName
+		}
+		if ant == "" {
+			ant = d.AntennaName
+		}
+	}
+	return rig, ant
+}
+
+// qslVars builds the full placeholder map (profile + QSO) and the country
+// block resolution for one render.
+func (a *App) qslVars(q qso.QSO) (map[string]string, qslcard.CountryInfo, error) {
+	info, err := a.qslProfileInfo()
+	if err != nil {
+		return nil, qslcard.CountryInfo{}, err
+	}
+	zone := func(z int) string { // unknown zone reads better blank than "0"
+		if z == 0 {
+			return ""
+		}
+		return strconv.Itoa(z)
+	}
+	// The QSL message on the card: the QSO's own QSLMSG wins; when it's empty the
+	// operator's default message (Settings) is used instead.
+	msg := q.QSLMsg
+	if strings.TrimSpace(msg) == "" {
+		msg = a.qslDefaultMessage()
+	}
+	// PSE/TNX stamp, chosen automatically by whether a QSL was received for this
+	// QSO (appQSLCardRcvdField): received → thank them, otherwise ask for a card.
+	pseTnx := "PSE QSL"
+	if q.Extras != nil && strings.TrimSpace(q.Extras[appQSLCardRcvdField]) != "" {
+		pseTnx = "TNX QSL"
+	}
+	vars := map[string]string{
+		"profile.callsign":      info.Callsign,
+		"profile.operator_name": info.Operator,
+		"profile.grid":          info.Grid,
+		"profile.cq_zone":       zone(info.CQZone),
+		"profile.itu_zone":      zone(info.ITUZone),
+		"profile.rig":           info.Rig,
+		"profile.antenna":       info.Antenna,
+
+		"qso.callsign": q.Callsign,
+		"qso.qso_date": q.QSODate.UTC().Format("2006-01-02"),
+		"qso.time_on":  q.QSODate.UTC().Format("15:04"),
+		"qso.band":     q.Band,
+		"qso.mode":     q.Mode,
+		"qso.submode":  q.Submode,
+		"qso.rst_sent": q.RSTSent,
+		"qso.qsl_msg":  msg,
+		"qso.pse_tnx":  pseTnx,
+		"qso.name":     q.Name,
+	}
+	vars["qso.my_rig"], vars["qso.my_antenna"] = a.qslRigAntenna(q)
+	if q.FreqHz != nil {
+		vars["qso.freq"] = strconv.FormatFloat(float64(*q.FreqHz)/1e6, 'f', 3, 64) + " MHz"
+	}
+	return vars, a.qslCountryInfo(), nil
+}
+
+// qslCountryInfo resolves the operator's own country (label + flag) from the
+// active profile: explicit MY_DXCC wins, then a cty.dat lookup of the
+// callsign. No match → label only or nothing (graceful).
+func (a *App) qslCountryInfo() qslcard.CountryInfo {
+	p, err := a.profiles.Active(a.ctx)
+	if err != nil {
+		return qslcard.CountryInfo{}
+	}
+	out := qslcard.CountryInfo{Label: p.MyCountry}
+	entityNum := 0
+	if p.MyDXCC != nil {
+		entityNum = *p.MyDXCC
+		if out.Label == "" {
+			out.Label = dxcc.NameForDXCC(entityNum)
+		}
+	} else if a.dxcc != nil {
+		if m, ok := a.dxcc.Lookup(p.Callsign); ok && m.Entity != nil {
+			if out.Label == "" {
+				out.Label = m.Entity.Name
+			}
+			entityNum = dxcc.EntityDXCC(m.Entity.Name)
+		}
+	}
+	out.FlagISO = qslcard.FlagISO(entityNum)
+	return out
+}
+
+// sampleQSO is the canned contact used by the editor's live preview.
+func sampleQSO() qso.QSO {
+	return qso.QSO{
+		Callsign: "DL1ABC",
+		QSODate:  time.Date(2026, 5, 17, 14, 2, 0, 0, time.UTC),
+		Band:     "20m",
+		Mode:     "SSB",
+		RSTSent:  "59",
+		QSLMsg:   "TNX FB QSO — 73!",
+	}
+}

app_secret.go

@@ -0,0 +1,177 @@
+package main
+
+import (
+	"encoding/base64"
+	"fmt"
+
+	"hamlog/internal/applog"
+	"hamlog/internal/secret"
+)
+
+// Secret-vault settings keys (NOT themselves sensitive — they hold the salt and
+// an encrypted verifier token, never a password).
+const (
+	keySecretSalt     = "secret.salt"     // base64 PBKDF2 salt
+	keySecretVerifier = "secret.verifier" // enc:v1: token, validates the passphrase
+)
+
+// sensitiveSettingKeys are the password fields encrypted at rest when the user
+// sets a passphrase. Everything else stays plaintext.
+var sensitiveSettingKeys = map[string]bool{
+	keyQRZPassword:        true,
+	keyHQPassword:         true,
+	keyEmailPassword:      true,
+	keyExtClublogPassword: true,
+	keyExtLoTWKeyPassword: true,
+	keyExtLoTWWebPassword: true,
+	keyExtHRDLogCode:      true,
+	keyExtEQSLPassword:    true,
+	keyExtCloudlogAPIKey:  true,
+	// The web-publish config is one JSON blob and the FTP password lives inside
+	// it, so the whole blob is encrypted. That costs nothing — it is read and
+	// written as a unit anyway — and beats storing a server password in clear
+	// next to the rest.
+	keyWebPublish: true,
+}
+
+func isSensitiveSetting(key string) bool { return sensitiveSettingKeys[key] }
+
+// SecretStatus tells the UI whether a passphrase is configured and unlocked.
+type SecretStatus struct {
+	HasPassphrase bool `json:"has_passphrase"`
+	Unlocked      bool `json:"unlocked"`
+}
+
+// GetSecretStatus is polled at launch: if HasPassphrase && !Unlocked the UI
+// shows the unlock prompt.
+func (a *App) GetSecretStatus() SecretStatus {
+	if a.settings == nil {
+		return SecretStatus{}
+	}
+	salt, _ := a.settings.GetRaw(a.ctx, keySecretSalt)
+	return SecretStatus{HasPassphrase: salt != "", Unlocked: a.settings.Unlocked()}
+}
+
+// reloadAfterSecretChange rebuilds anything that read passwords at startup while
+// they were still locked (lookup providers + external-service config).
+func (a *App) reloadAfterSecretChange() {
+	a.reloadLookupProviders()
+	if a.extsvc != nil {
+		a.extsvc.SetConfig(a.loadExternalServices())
+	}
+}
+
+// UnlockSecrets validates the passphrase against the stored verifier and, on
+// success, installs the cipher so passwords decrypt for the rest of the session.
+func (a *App) UnlockSecrets(passphrase string) error {
+	if a.settings == nil {
+		return fmt.Errorf("not initialized")
+	}
+	saltB64, _ := a.settings.GetRaw(a.ctx, keySecretSalt)
+	verifier, _ := a.settings.GetRaw(a.ctx, keySecretVerifier)
+	if saltB64 == "" || verifier == "" {
+		return fmt.Errorf("no passphrase configured")
+	}
+	salt, err := base64.StdEncoding.DecodeString(saltB64)
+	if err != nil {
+		return fmt.Errorf("corrupt salt")
+	}
+	key, err := secret.DeriveKey(passphrase, salt)
+	if err != nil {
+		return fmt.Errorf("derive key: %w", err)
+	}
+	c, err := secret.New(key)
+	if err != nil {
+		return fmt.Errorf("cipher: %w", err)
+	}
+	if !c.CheckVerifier(verifier) {
+		return fmt.Errorf("wrong passphrase")
+	}
+	a.settings.Unlock(c)
+	a.reloadAfterSecretChange()
+	return nil
+}
+
+// SetPassphrase sets a new passphrase or changes an existing one, then
+// re-encrypts every stored secret under the new key. Changing an existing
+// passphrase requires the vault to be unlocked first (so current secrets are
+// readable as plaintext).
+func (a *App) SetPassphrase(passphrase string) error {
+	if a.settings == nil {
+		return fmt.Errorf("not initialized")
+	}
+	if len(passphrase) < 4 {
+		return fmt.Errorf("passphrase too short (min 4 characters)")
+	}
+	saltB64, _ := a.settings.GetRaw(a.ctx, keySecretSalt)
+	if saltB64 != "" && !a.settings.Unlocked() {
+		return fmt.Errorf("unlock with the current passphrase first")
+	}
+	// Snapshot current plaintext (Get decrypts when unlocked, passes through
+	// when no passphrase yet).
+	current := map[string]string{}
+	for k := range sensitiveSettingKeys {
+		if v, _ := a.settings.Get(a.ctx, k); v != "" {
+			current[k] = v
+		}
+	}
+	salt, err := secret.NewSalt()
+	if err != nil {
+		return fmt.Errorf("salt: %w", err)
+	}
+	key, err := secret.DeriveKey(passphrase, salt)
+	if err != nil {
+		return fmt.Errorf("derive key: %w", err)
+	}
+	c, err := secret.New(key)
+	if err != nil {
+		return fmt.Errorf("cipher: %w", err)
+	}
+	// Persist salt + verifier first so an interrupted migration is still
+	// recoverable (the prompt appears next launch; plaintext secrets read
+	// through transparently until re-encrypted).
+	if err := a.settings.SetRaw(a.ctx, keySecretSalt, base64.StdEncoding.EncodeToString(salt)); err != nil {
+		return err
+	}
+	if err := a.settings.SetRaw(a.ctx, keySecretVerifier, c.MakeVerifier()); err != nil {
+		return err
+	}
+	a.settings.Unlock(c)
+	for k, v := range current {
+		if err := a.settings.Set(a.ctx, k, v); err != nil { // now encrypts
+			applog.Printf("secret: re-encrypt %q failed: %v", k, err)
+		}
+	}
+	a.reloadAfterSecretChange()
+	return nil
+}
+
+// RemovePassphrase decrypts all secrets back to plaintext and clears the vault.
+// Requires the current passphrase (validated) so it can't be cleared blindly.
+func (a *App) RemovePassphrase(passphrase string) error {
+	if a.settings == nil {
+		return fmt.Errorf("not initialized")
+	}
+	if !a.settings.Unlocked() {
+		if err := a.UnlockSecrets(passphrase); err != nil {
+			return err
+		}
+	}
+	// Read decrypted, then store back as plaintext and drop salt/verifier.
+	plain := map[string]string{}
+	for k := range sensitiveSettingKeys {
+		if v, _ := a.settings.Get(a.ctx, k); v != "" {
+			plain[k] = v
+		}
+	}
+	a.settings.Lock()
+	for k, v := range plain {
+		if err := a.settings.SetRaw(a.ctx, k, v); err != nil {
+			applog.Printf("secret: decrypt-on-remove %q failed: %v", k, err)
+		}
+	}
+	_ = a.settings.SetRaw(a.ctx, keySecretSalt, "")
+	_ = a.settings.SetRaw(a.ctx, keySecretVerifier, "")
+	a.reloadAfterSecretChange()
+	return nil
+}

autostart.go

@@ -0,0 +1,198 @@
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+	"os"
+	"os/exec"
+	"path/filepath"
+	"strings"
+	"syscall"
+
+	"hamlog/internal/applog"
+
+	wruntime "github.com/wailsapp/wails/v2/pkg/runtime"
+)
+
+// keyAutostartPrograms holds the per-profile list of external programs OpsLog
+// launches on startup (JSON array of AutostartProgram).
+const keyAutostartPrograms = "autostart.programs"
+
+// AutostartProgram is one external application OpsLog can launch when it starts
+// — e.g. WSJT-X, JTAlert, a rotator controller. Stored per profile.
+type AutostartProgram struct {
+	ID      string `json:"id"`
+	Name    string `json:"name"`
+	Path    string `json:"path"`
+	Args    string `json:"args"`
+	Enabled bool   `json:"enabled"`
+}
+
+// AutostartLaunchResult reports what happened for one program when launching.
+type AutostartLaunchResult struct {
+	ID      string `json:"id"`
+	Name    string `json:"name"`
+	Status  string `json:"status"` // launched | already_running | missing | disabled | error
+	Message string `json:"message"`
+}
+
+// GetAutostartPrograms returns the active profile's autostart list.
+func (a *App) GetAutostartPrograms() ([]AutostartProgram, error) {
+	out := []AutostartProgram{}
+	if a.settings == nil {
+		return out, nil
+	}
+	s, _ := a.settings.Get(a.ctx, keyAutostartPrograms)
+	if strings.TrimSpace(s) == "" {
+		return out, nil
+	}
+	if err := json.Unmarshal([]byte(s), &out); err != nil {
+		return []AutostartProgram{}, nil
+	}
+	return out, nil
+}
+
+// SaveAutostartPrograms persists the autostart list for the active profile.
+func (a *App) SaveAutostartPrograms(progs []AutostartProgram) error {
+	if a.settings == nil {
+		return fmt.Errorf("db not initialized")
+	}
+	b, err := json.Marshal(progs)
+	if err != nil {
+		return err
+	}
+	return a.settings.Set(a.ctx, keyAutostartPrograms, string(b))
+}
+
+// BrowseExecutable opens a native file picker for choosing a program to launch.
+func (a *App) BrowseExecutable() (string, error) {
+	return wruntime.OpenFileDialog(a.ctx, wruntime.OpenDialogOptions{
+		Title: "Choose a program to launch on startup",
+		Filters: []wruntime.FileFilter{
+			{DisplayName: "Programs (*.exe;*.bat;*.cmd)", Pattern: "*.exe;*.bat;*.cmd"},
+			{DisplayName: "All files (*.*)", Pattern: "*.*"},
+		},
+	})
+}
+
+// LaunchAutostartPrograms starts every enabled program that isn't already
+// running, returning a per-program result. Used at startup (best effort) and by
+// the "Launch now" button in settings.
+func (a *App) LaunchAutostartPrograms() []AutostartLaunchResult {
+	progs, _ := a.GetAutostartPrograms()
+	running := runningProcessNames()
+	out := make([]AutostartLaunchResult, 0, len(progs))
+	for _, p := range progs {
+		if !p.Enabled {
+			continue
+		}
+		out = append(out, launchProgram(p, running))
+	}
+	return out
+}
+
+// LaunchAutostartProgram launches a single program by id on demand (the per-row
+// "launch now" action), regardless of its enabled flag.
+func (a *App) LaunchAutostartProgram(id string) (AutostartLaunchResult, error) {
+	progs, err := a.GetAutostartPrograms()
+	if err != nil {
+		return AutostartLaunchResult{}, err
+	}
+	for _, p := range progs {
+		if p.ID == id {
+			return launchProgram(p, runningProcessNames()), nil
+		}
+	}
+	return AutostartLaunchResult{}, fmt.Errorf("program %q not found", id)
+}
+
+// launchProgram starts one program unless its executable is already running.
+func launchProgram(p AutostartProgram, running map[string]bool) AutostartLaunchResult {
+	res := AutostartLaunchResult{ID: p.ID, Name: p.Name}
+	path := strings.TrimSpace(p.Path)
+	if path == "" {
+		res.Status, res.Message = "error", "no path configured"
+		return res
+	}
+	if _, err := os.Stat(path); err != nil {
+		res.Status, res.Message = "missing", "executable not found: "+path
+		return res
+	}
+	// Skip if a process with the same executable name is already running, so we
+	// never spawn a second copy of WSJT-X / JTAlert / etc.
+	base := strings.ToLower(filepath.Base(path))
+	if running[base] {
+		res.Status, res.Message = "already_running", base+" already running"
+		return res
+	}
+	cmd := exec.Command(path, splitArgs(p.Args)...)
+	cmd.Dir = filepath.Dir(path) // many ham apps expect their own folder as CWD
+	if err := cmd.Start(); err != nil {
+		res.Status, res.Message = "error", err.Error()
+		return res
+	}
+	// Don't wait on the child — it runs independently of OpsLog. Release the
+	// handle so we don't accumulate zombies.
+	go func() { _ = cmd.Wait() }()
+	res.Status, res.Message = "launched", "started "+base
+	return res
+}
+
+// splitArgs does a minimal shell-like split of an argument string, honouring
+// double quotes so a path with spaces stays one argument.
+func splitArgs(s string) []string {
+	s = strings.TrimSpace(s)
+	if s == "" {
+		return nil
+	}
+	var args []string
+	var cur strings.Builder
+	inQuote := false
+	for _, r := range s {
+		switch {
+		case r == '"':
+			inQuote = !inQuote
+		case r == ' ' && !inQuote:
+			if cur.Len() > 0 {
+				args = append(args, cur.String())
+				cur.Reset()
+			}
+		default:
+			cur.WriteRune(r)
+		}
+	}
+	if cur.Len() > 0 {
+		args = append(args, cur.String())
+	}
+	return args
+}
+
+// runningProcessNames returns the set of lowercase executable names currently
+// running, via the Windows `tasklist`. Best effort — on failure the set is
+// empty (we then just attempt to launch, which is acceptable).
+func runningProcessNames() map[string]bool {
+	out := map[string]bool{}
+	cmd := exec.Command("tasklist", "/FO", "CSV", "/NH")
+	cmd.SysProcAttr = &syscall.SysProcAttr{HideWindow: true, CreationFlags: 0x08000000} // CREATE_NO_WINDOW
+	data, err := cmd.Output()
+	if err != nil {
+		applog.Printf("autostart: tasklist failed: %v", err)
+		return out
+	}
+	for _, line := range strings.Split(string(data), "\n") {
+		line = strings.TrimSpace(line)
+		if line == "" {
+			continue
+		}
+		// CSV row: "image.exe","PID",... — take the first quoted field.
+		field := line
+		if i := strings.Index(line[1:], "\""); i >= 0 && strings.HasPrefix(line, "\"") {
+			field = line[1 : i+1]
+		}
+		field = strings.Trim(field, "\"")
+		if field != "" {
+			out[strings.ToLower(field)] = true
+		}
+	}
+	return out
+}

awards_catalog_test.go

@@ -0,0 +1,112 @@
+package main
+
+import (
+	"testing"
+
+	"hamlog/internal/award"
+)
+
+// The catalog is the channel through which a shipped award is both DELIVERED and
+// CORRECTED. These tests pin the three rules that make that safe:
+//   - a new catalog award reaches an operator who already has awards stored;
+//   - a fixed one (higher Version) replaces the stored copy;
+//   - unless the operator has edited it, in which case their work wins.
+
+func catalogDef(t *testing.T, code string) award.Def {
+	t.Helper()
+	for _, d := range award.Defaults() {
+		if d.Code == code {
+			return d
+		}
+	}
+	t.Fatalf("%s is not in the catalog", code)
+	return award.Def{}
+}
+
+func findDef(defs []award.Def, code string) (award.Def, bool) {
+	for _, d := range defs {
+		if d.Code == code {
+			return d, true
+		}
+	}
+	return award.Def{}, false
+}
+
+func TestMergeCatalogAddsMissingAward(t *testing.T) {
+	stored := []award.Def{{Code: "MYOWN", Name: "Mine", Valid: true}}
+	got, updated, changed := mergeCatalog(stored)
+	if !changed {
+		t.Fatal("merge reported no change, but every catalog award was missing")
+	}
+	if len(updated) != 0 {
+		t.Errorf("updated = %v, want none: an ADDED award is not an UPDATED one", updated)
+	}
+	if _, ok := findDef(got, "FFMA"); !ok {
+		t.Error("FFMA was not added — a newly shipped award never reaches an existing install")
+	}
+	if _, ok := findDef(got, "MYOWN"); !ok {
+		t.Error("the operator's own award was dropped by the merge")
+	}
+}
+
+func TestMergeCatalogUpdatesOlderVersion(t *testing.T) {
+	// The stored copy is an older revision of a shipped award, with a broken rule.
+	old := catalogDef(t, "FFMA")
+	old.Version = catalogDef(t, "FFMA").Version - 1
+	old.Field = "wrong"
+	old.Valid = false // the operator disabled it — a preference, not a definition
+
+	got, updated, changed := mergeCatalog([]award.Def{old})
+	if !changed || len(updated) == 0 {
+		t.Fatal("a higher catalog version did not replace the stored definition — a shipped award could never be FIXED")
+	}
+	d, _ := findDef(got, "FFMA")
+	if d.Field != "grid4" {
+		t.Errorf("FFMA field = %q, want the catalog's %q", d.Field, "grid4")
+	}
+	if d.Valid {
+		t.Error("the update re-enabled an award the operator had switched off; that is their choice to make, not ours")
+	}
+}
+
+func TestMergeCatalogSkipsUserEdited(t *testing.T) {
+	old := catalogDef(t, "FFMA")
+	old.Version = catalogDef(t, "FFMA").Version - 1
+	old.Field = "mine"
+	old.UserEdited = true
+
+	got, updated, _ := mergeCatalog([]award.Def{old})
+	if len(updated) != 0 {
+		t.Fatalf("updated = %v: an award the operator has edited must never be overwritten", updated)
+	}
+	if d, _ := findDef(got, "FFMA"); d.Field != "mine" {
+		t.Errorf("field = %q, want the operator's %q", d.Field, "mine")
+	}
+}
+
+func TestMarkUserEditedOnlyOnRealChange(t *testing.T) {
+	prev := []award.Def{
+		{Code: "A", Name: "A", Field: "state", Valid: true, Version: 2},
+		{Code: "B", Name: "B", Field: "cqz", Valid: true, Version: 2},
+	}
+	next := []award.Def{
+		{Code: "A", Name: "A", Field: "state", Valid: true},   // untouched
+		{Code: "B", Name: "B", Field: "county", Valid: true},  // changed
+		{Code: "C", Name: "C", Field: "note", Valid: true},    // brand new
+	}
+	markUserEdited(next, prev)
+
+	if next[0].UserEdited {
+		t.Error("A was flagged as edited although nothing about it changed — every save would freeze every award out of future updates")
+	}
+	if !next[1].UserEdited {
+		t.Error("B changed field and was not flagged; a catalog update would overwrite the operator's work")
+	}
+	if next[2].UserEdited {
+		t.Error("C is a brand-new award; there is no shipped version to protect it from")
+	}
+	// A save must not pretend to be a new shipped revision.
+	if next[0].Version != 2 || next[1].Version != 2 {
+		t.Errorf("versions = %d/%d, want both 2: saving is not shipping", next[0].Version, next[1].Version)
+	}
+}

band_plan_test.go

@@ -0,0 +1,73 @@
+package main
+
+import (
+	"testing"
+
+	"hamlog/internal/cat"
+)
+
+// Three band tables exist in Go — cat.BandFromHz (the rig/CAT one), bandForHz
+// (awards) and the cluster's own — plus one in App.tsx. They must agree, and
+// nothing checked it: the CAT one stopped at 23 cm, so a 10 GHz QSO came back
+// with an EMPTY band. An empty band is not a cosmetic problem — it is not
+// logged, not counted in any award slot, and exports without a BAND field.
+//
+// One frequency per band, taken inside the range, plus the edges that used to be
+// missing entirely.
+func TestBandPlansAgree(t *testing.T) {
+	cases := []struct {
+		hz   int64
+		want string
+	}{
+		{137000, "2190m"},
+		{475000, "630m"},
+		{1840000, "160m"},
+		{3650000, "80m"},
+		{7100000, "40m"},
+		{10120000, "30m"},
+		{14200000, "20m"},
+		{18100000, "17m"},
+		{21200000, "15m"},
+		{24940000, "12m"},
+		{28400000, "10m"},
+		{50150000, "6m"},
+		{70200000, "4m"},
+		{144300000, "2m"},
+		{223500000, "1.25m"},
+		{432000000, "70cm"},
+		{1296000000, "23cm"},
+		// The microwave bands that were missing. 3 cm is the one an operator
+		// reported: 10 GHz is worked and spotted, and resolved to nothing.
+		{2320000000, "13cm"},
+		{3400000000, "9cm"},
+		{5760000000, "6cm"},
+		{10368000000, "3cm"},
+		{24048000000, "1.25cm"},
+		{47088000000, "6mm"},
+		{76032000000, "4mm"},
+		{122250000000, "2.5mm"},
+		{134928000000, "2mm"},
+		{241920000000, "1mm"},
+	}
+	for _, c := range cases {
+		if got := cat.BandFromHz(c.hz); got != c.want {
+			t.Errorf("cat.BandFromHz(%d) = %q, want %q", c.hz, got, c.want)
+		}
+		if got := bandForHz(c.hz); got != c.want {
+			t.Errorf("bandForHz(%d) = %q, want %q — the award band plan disagrees with the CAT one", c.hz, got, c.want)
+		}
+	}
+}
+
+// A frequency in no amateur band must resolve to "" everywhere, not to the
+// nearest band: guessing here would put a QSO in a band the operator never used.
+func TestBandPlanRejectsOutOfBand(t *testing.T) {
+	for _, hz := range []int64{100_000_000, 1_000_000_000, 15_000_000_000} {
+		if got := cat.BandFromHz(hz); got != "" {
+			t.Errorf("cat.BandFromHz(%d) = %q, want empty", hz, got)
+		}
+		if got := bandForHz(hz); got != "" {
+			t.Errorf("bandForHz(%d) = %q, want empty", hz, got)
+		}
+	}
+}

bulk_fields_test.go

@@ -0,0 +1,75 @@
+package main
+
+import (
+	"os"
+	"regexp"
+	"strings"
+	"testing"
+
+	"hamlog/internal/qso"
+)
+
+// Every field the bulk-edit dialog OFFERS must be one the repository accepts.
+//
+// These two lists live in different packages — a TypeScript field table on one
+// side, a Go whitelist on the other — and they drifted apart the day the
+// confirmation dates were added: the new columns went into the QSL Manager's
+// filter whitelist instead of the bulk-edit one, so the dialog listed fields it
+// could not write and the operator got "field … is not bulk-editable" only after
+// selecting 54 QSOs and clicking Apply. Nothing in the build caught it.
+//
+// The test reads the ACTUAL field ids out of the .tsx rather than a copy, so a
+// field added to the UI alone fails here immediately.
+func TestBulkEditFieldsAreWritable(t *testing.T) {
+	src, err := os.ReadFile("frontend/src/components/BulkEditModal.tsx")
+	if err != nil {
+		t.Skipf("frontend source not available: %v", err)
+	}
+	ids := regexp.MustCompile(`\{ id: '([a-z0-9_]+)'`).FindAllStringSubmatch(string(src), -1)
+	if len(ids) < 10 {
+		t.Fatalf("only %d field ids found — the parse is wrong, not the data", len(ids))
+	}
+	for _, m := range ids {
+		id := m[1]
+		// Handled before the column map: freq takes a numeric path (freq_hz +
+		// band together) and the extras live in extras_json.
+		if id == "freq" || qso.IsBulkEditableExtra(id) {
+			continue
+		}
+		col, ok := bulkFieldColumns[id]
+		if !ok {
+			t.Errorf("bulk-edit UI offers %q, which maps to no column (bulkFieldColumns)", id)
+			continue
+		}
+		// Extras live outside the qso table (owner_callsign and friends): they are
+		// written into extras_json, not a column, so the column whitelist does not
+		// apply to them.
+		if strings.HasPrefix(col, "extras.") {
+			continue
+		}
+		if !qso.IsBulkEditable(col) && !qso.IsBulkEditableExtra(col) {
+			t.Errorf("bulk-edit UI offers %q → column %q, which the repository refuses", id, col)
+		}
+	}
+}
+
+// Same contract for the filter builder: every field it offers must be one the
+// query layer will accept.
+func TestFilterFieldsAreQueryable(t *testing.T) {
+	src, err := os.ReadFile("frontend/src/components/FilterBuilder.tsx")
+	if err != nil {
+		t.Skipf("frontend source not available: %v", err)
+	}
+	// Anchored on `type:` — the FIELDS entries carry one, the OPERATOR list does
+	// not, and without it every operator (eq, contains, …) was read as a field.
+	ids := regexp.MustCompile(`\{ value: '([a-z0-9_]+)', label: '[^']*', type:`).FindAllStringSubmatch(string(src), -1)
+	if len(ids) < 10 {
+		t.Fatalf("only %d field ids found — the parse is wrong, not the data", len(ids))
+	}
+	for _, m := range ids {
+		col := m[1]
+		if !qso.IsFilterable(col) && !qso.IsFilterableExtra(col) {
+			t.Errorf("filter builder offers %q, which the query layer refuses", col)
+		}
+	}
+}

changelog.go

@@ -0,0 +1,81 @@
+package main
+
+import (
+	_ "embed"
+	"encoding/json"
+	"strings"
+
+	"hamlog/internal/applog"
+)
+
+//go:embed changelog.json
+var changelogJSON []byte
+
+// ChangelogEntry is one release's user-facing notes, in English and French. It's
+// shown once on the first launch after an update (the "What's new" dialog),
+// derived from the release's commit history.
+type ChangelogEntry struct {
+	Version string   `json:"version"`
+	Date    string   `json:"date"`
+	EN      []string `json:"en"`
+	FR      []string `json:"fr"`
+}
+
+const keyChangelogSeen = "changelog.last_seen_version"
+
+func loadChangelog() []ChangelogEntry {
+	var out []ChangelogEntry
+	if err := json.Unmarshal(changelogJSON, &out); err != nil {
+		applog.Printf("changelog: parse failed: %v", err)
+	}
+	return out
+}
+
+// GetChangelog returns every changelog entry up to the running version (newest
+// first), without touching the "seen" marker — for a "What's new" button that
+// reopens the notes on demand.
+func (a *App) GetChangelog() []ChangelogEntry {
+	out := []ChangelogEntry{}
+	for _, e := range loadChangelog() {
+		if strings.TrimSpace(e.Version) == "" || versionLess(appVersion, e.Version) {
+			continue
+		}
+		out = append(out, e)
+	}
+	return out
+}
+
+// GetWhatsNew returns the changelog entries the operator hasn't seen yet — the
+// notes for every version newer than the last one they ran, up to the current
+// build — and records the current version as seen so it pops exactly once per
+// update. Empty when there's nothing new.
+func (a *App) GetWhatsNew() []ChangelogEntry {
+	if a.settings == nil {
+		return nil
+	}
+	lastSeen, _ := a.settings.GetGlobal(a.ctx, keyChangelogSeen)
+	cur := appVersion
+	a.setSettingGlobal(keyChangelogSeen, cur) // advance the marker now
+
+	out := []ChangelogEntry{}
+	for _, e := range loadChangelog() {
+		if strings.TrimSpace(e.Version) == "" {
+			continue
+		}
+		if versionLess(cur, e.Version) {
+			continue // don't preview notes for a version newer than we run
+		}
+		if lastSeen == "" {
+			// First run of the feature (fresh install, or upgrade from a build that
+			// predates it): show only the CURRENT version's notes, once.
+			if e.Version == cur {
+				out = append(out, e)
+			}
+			continue
+		}
+		if versionLess(lastSeen, e.Version) {
+			out = append(out, e)
+		}
+	}
+	return out
+}

chat.go

@@ -0,0 +1,228 @@
+package main
+
+import (
+	"database/sql"
+	"fmt"
+	"strings"
+	"time"
+
+	"hamlog/internal/applog"
+
+	wruntime "github.com/wailsapp/wails/v2/pkg/runtime"
+)
+
+// Multi-operator chat over the SHARED MySQL logbook. The database is the message
+// bus: each OpsLog INSERTs into chat_messages and polls for new rows (~3 s), so
+// operators on the same shared log (e.g. a special-event call) can talk. No
+// extra server. Presence is a lightweight heartbeat into chat_presence. Chat is
+// only available on a MySQL logbook (SQLite/solo has no one else to talk to).
+
+const (
+	chatPollInterval      = 3 * time.Second
+	chatPresenceEvery     = 20 * time.Second
+	chatRetentionDays     = 7
+	chatHistoryDefault    = 80
+	chatPresenceStaleSecs = 120 // a presence row older than this = offline
+)
+
+// ChatMessage is one chat line.
+type ChatMessage struct {
+	ID        int64  `json:"id"`
+	Operator  string `json:"operator"`
+	Station   string `json:"station"`
+	Message   string `json:"message"`
+	CreatedAt string `json:"created_at"` // ISO UTC
+}
+
+// ChatPresence is one operator currently online (recent heartbeat).
+type ChatPresence struct {
+	Operator string `json:"operator"`
+	Station  string `json:"station"`
+	AgoSecs  int    `json:"ago_secs"`
+}
+
+// chatActive reports whether chat can run (shared MySQL logbook).
+func (a *App) chatActive() bool {
+	return a.logDb != nil && a.dbBackend == "mysql"
+}
+
+// ChatAvailable lets the UI show/hide the chat icon (only on a shared log).
+func (a *App) ChatAvailable() bool { return a.chatActive() }
+
+func (a *App) ensureChatTables() error {
+	if _, err := a.logDb.ExecContext(a.ctx,
+		"CREATE TABLE IF NOT EXISTS chat_messages ("+
+			"id BIGINT AUTO_INCREMENT PRIMARY KEY, "+
+			"operator VARCHAR(32), station VARCHAR(32), "+
+			"message TEXT, created_at DATETIME)"); err != nil {
+		return err
+	}
+	_, err := a.logDb.ExecContext(a.ctx,
+		"CREATE TABLE IF NOT EXISTS chat_presence ("+
+			"operator VARCHAR(32) PRIMARY KEY, station VARCHAR(32), updated_at DATETIME)")
+	return err
+}
+
+// SendChatMessage posts a message to the shared chat and returns the stored row
+// (with its id) so the UI can show it immediately; the poll loop dedupes by id.
+func (a *App) SendChatMessage(text string) (ChatMessage, error) {
+	text = strings.TrimSpace(text)
+	if text == "" {
+		return ChatMessage{}, nil
+	}
+	if len(text) > 1000 {
+		text = text[:1000]
+	}
+	if !a.chatActive() {
+		return ChatMessage{}, fmt.Errorf("chat is only available on a shared MySQL logbook")
+	}
+	op, station := a.liveStatusOperator()
+	if op == "" {
+		return ChatMessage{}, fmt.Errorf("set your callsign/operator in Settings → Station first")
+	}
+	if err := a.ensureChatTables(); err != nil {
+		return ChatMessage{}, err
+	}
+	res, err := a.logDb.ExecContext(a.ctx,
+		"INSERT INTO chat_messages (operator, station, message, created_at) VALUES (?, ?, ?, UTC_TIMESTAMP())",
+		op, station, text)
+	if err != nil {
+		return ChatMessage{}, err
+	}
+	id, _ := res.LastInsertId()
+	return ChatMessage{ID: id, Operator: op, Station: station, Message: text,
+		CreatedAt: time.Now().UTC().Format(time.RFC3339)}, nil
+}
+
+// GetChatHistory returns the most recent messages (oldest first) for the panel.
+func (a *App) GetChatHistory(limit int) ([]ChatMessage, error) {
+	if !a.chatActive() {
+		return nil, nil
+	}
+	if limit <= 0 || limit > 500 {
+		limit = chatHistoryDefault
+	}
+	if err := a.ensureChatTables(); err != nil {
+		return nil, err
+	}
+	rows, err := a.logDb.QueryContext(a.ctx,
+		"SELECT id, operator, station, message, created_at FROM chat_messages ORDER BY id DESC LIMIT ?", limit)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	var out []ChatMessage
+	for rows.Next() {
+		var m ChatMessage
+		if err := rows.Scan(&m.ID, &m.Operator, &m.Station, &m.Message, &m.CreatedAt); err != nil {
+			return nil, err
+		}
+		out = append(out, m)
+	}
+	// Reverse to chronological order (we queried newest-first to honour LIMIT).
+	for i, j := 0, len(out)-1; i < j; i, j = i+1, j-1 {
+		out[i], out[j] = out[j], out[i]
+	}
+	return out, rows.Err()
+}
+
+// GetOnlineOperators lists operators with a recent presence heartbeat.
+func (a *App) GetOnlineOperators() ([]ChatPresence, error) {
+	if !a.chatActive() {
+		return nil, nil
+	}
+	if err := a.ensureChatTables(); err != nil {
+		return nil, err
+	}
+	rows, err := a.logDb.QueryContext(a.ctx,
+		"SELECT operator, station, TIMESTAMPDIFF(SECOND, updated_at, UTC_TIMESTAMP()) AS ago "+
+			"FROM chat_presence WHERE updated_at > UTC_TIMESTAMP() - INTERVAL ? SECOND ORDER BY operator",
+		chatPresenceStaleSecs)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	var out []ChatPresence
+	for rows.Next() {
+		var p ChatPresence
+		if err := rows.Scan(&p.Operator, &p.Station, &p.AgoSecs); err != nil {
+			return nil, err
+		}
+		out = append(out, p)
+	}
+	return out, rows.Err()
+}
+
+// chatLoop polls for new messages and heartbeats presence while on a shared
+// MySQL logbook. Started once at startup; a cheap no-op otherwise.
+func (a *App) chatLoop() {
+	defer func() { _ = recover() }()
+	var lastID int64 = -1 // -1 = not yet baselined
+	var lastDB *sql.DB    // logbook the baseline belongs to
+	lastPresence := time.Time{}
+	lastPurge := time.Time{}
+	t := time.NewTicker(chatPollInterval)
+	defer t.Stop()
+	for range t.C {
+		if !a.chatActive() {
+			lastID = -1 // re-baseline if the backend changes
+			lastDB = nil
+			continue
+		}
+		// Profile switch swaps the logbook under us: re-baseline against the new
+		// DB so we don't query it with the previous log's id cursor.
+		if a.logDb != lastDB {
+			lastID = -1
+			lastDB = a.logDb
+		}
+		if err := a.ensureChatTables(); err != nil {
+			continue
+		}
+		now := time.Now()
+		// Presence heartbeat.
+		if now.Sub(lastPresence) >= chatPresenceEvery {
+			if op, station := a.liveStatusOperator(); op != "" {
+				_, _ = a.logDb.ExecContext(a.ctx,
+					"INSERT INTO chat_presence (operator, station, updated_at) VALUES (?, ?, UTC_TIMESTAMP()) "+
+						"ON DUPLICATE KEY UPDATE station=VALUES(station), updated_at=UTC_TIMESTAMP()",
+					op, station)
+			}
+			lastPresence = now
+		}
+		// Baseline on first run so existing history isn't replayed as "new"
+		// (the panel loads it via GetChatHistory).
+		if lastID < 0 {
+			row := a.logDb.QueryRowContext(a.ctx, "SELECT COALESCE(MAX(id),0) FROM chat_messages")
+			_ = row.Scan(&lastID)
+			continue
+		}
+		// Emit new messages.
+		rows, err := a.logDb.QueryContext(a.ctx,
+			"SELECT id, operator, station, message, created_at FROM chat_messages WHERE id > ? ORDER BY id", lastID)
+		if err != nil {
+			continue
+		}
+		for rows.Next() {
+			var m ChatMessage
+			if err := rows.Scan(&m.ID, &m.Operator, &m.Station, &m.Message, &m.CreatedAt); err != nil {
+				continue
+			}
+			if m.ID > lastID {
+				lastID = m.ID
+			}
+			if a.ctx != nil {
+				wruntime.EventsEmit(a.ctx, "chat:message", m)
+			}
+		}
+		rows.Close()
+		// Purge old messages occasionally (hourly).
+		if now.Sub(lastPurge) >= time.Hour {
+			_, err := a.logDb.ExecContext(a.ctx,
+				"DELETE FROM chat_messages WHERE created_at < UTC_TIMESTAMP() - INTERVAL ? DAY", chatRetentionDays)
+			if err != nil {
+				applog.Printf("chat: purge failed: %v", err)
+			}
+			lastPurge = now
+		}
+	}
+}

cmd/cntygen/main.go

@@ -0,0 +1,100 @@
+package main
+
+// One-shot generator: reads the FIPS county CSV and emits
+// internal/awardref/uscounties_gen.go. Not part of the build.
+
+import (
+	"bufio"
+	"fmt"
+	"os"
+	"sort"
+	"strings"
+
+	"hamlog/internal/award"
+)
+
+// dxccForState maps the two US "states" that are separate DXCC entities.
+func dxccForState(st string) int {
+	switch st {
+	case "AK":
+		return 6
+	case "HI":
+		return 110
+	default:
+		return 291
+	}
+}
+
+// territories we exclude entirely — plus DC, which USA-CA does not count as a
+// county.
+var skipState = map[string]bool{"PR": true, "GU": true, "VI": true, "AS": true, "MP": true, "NA": true, "DC": true}
+
+// excludedUSACA reports county-equivalents that the CQ USA-CA award does NOT
+// count as counties: the independent cities of Virginia and Carson City (NV).
+// (Baltimore MD and St. Louis MO ARE counted, so they are kept.) A contact in
+// one of these counts toward a bordering county under the award rules.
+func excludedUSACA(state, name string) bool {
+	n := strings.ToLower(strings.TrimSpace(name))
+	switch state {
+	case "VA":
+		return strings.HasSuffix(n, " city")
+	case "NV":
+		return n == "carson city"
+	}
+	return false
+}
+
+func main() {
+	f, err := os.Open(os.Args[1])
+	if err != nil {
+		panic(err)
+	}
+	defer f.Close()
+
+	type row struct{ code, name string; dxcc int }
+	var rows []row
+	seen := map[string]bool{}
+	sc := bufio.NewScanner(f)
+	sc.Scan() // header
+	for sc.Scan() {
+		line := sc.Text()
+		parts := strings.SplitN(line, ",", 3)
+		if len(parts) < 3 {
+			continue
+		}
+		name := strings.TrimSpace(parts[1])
+		st := strings.TrimSpace(parts[2])
+		if skipState[st] || len(st) != 2 || strings.EqualFold(name, "UNITED STATES") {
+			continue
+		}
+		if excludedUSACA(st, name) {
+			continue
+		}
+		// State header rows have an all-caps state NAME and state code "NA"
+		// (already skipped). County rows have a 2-letter state code.
+		code := award.USCountyKey(st, name)
+		if code == "" || seen[code] {
+			continue
+		}
+		seen[code] = true
+		rows = append(rows, row{code: code, name: name + ", " + st, dxcc: dxccForState(st)})
+	}
+	sort.Slice(rows, func(i, j int) bool { return rows[i].code < rows[j].code })
+
+	var b strings.Builder
+	b.WriteString("// Code generated by cmd/cntygen from FIPS county data. DO NOT EDIT.\n")
+	b.WriteString("package awardref\n\n")
+	b.WriteString("// usCounties is the US Counties (USA-CA) reference list: one entry per county\n")
+	b.WriteString("// in the 50 states, keyed by the canonical \"STATE,COUNTY\" match code that\n")
+	b.WriteString("// award.usCountyKey produces from a QSO's state + cnty fields.\n")
+	fmt.Fprintf(&b, "func usCounties() []Ref {\n\treturn []Ref{\n")
+	for _, r := range rows {
+		fmt.Fprintf(&b, "\t\tref(%q, %q, %d),\n", r.code, r.name, r.dxcc)
+	}
+	b.WriteString("\t}\n}\n")
+
+	if err := os.WriteFile(os.Args[2], []byte(b.String()), 0o644); err != nil {
+		panic(err)
+	}
+	fmt.Printf("wrote %d counties to %s\n", len(rows), os.Args[2])
+}

cmd/icomnettest/main.go

@@ -0,0 +1,466 @@
+// Command icomnettest is an iteration probe for the Icom IP remote protocol —
+// the LAN server built into the IC-7610 that the Icom "Remote Utility" (and
+// wfview) talk to. OpsLog reimplements this directly so it can BE both the
+// Remote Utility (Ethernet ↔ radio) and the logger/CAT client, dropping the
+// virtual-COM + RS-BA1 chain entirely.
+//
+// This probe drives TWO streams and hex-dumps everything:
+//   Control (UDP 50001): handshake → login → token   [VERIFIED on the real rig]
+//   CI-V    (UDP 50002): handshake → openClose(open) → send CI-V read-freq
+//                        (FE FE 98 E0 03 FD) → print the rig's reply.
+// Framing (passcode table, packet offsets, CI-V data_packet, openclose) is
+// reimplemented from the public wfview protocol and verified byte-for-byte
+// against real Remote-Utility captures (build/bin/civ*.pcapng). No GPLv3 code.
+//
+// Usage:
+//   go run ./cmd/icomnettest <rig-ip> <user> <pass> [compname]
+//
+// SAFE: read-only CI-V (operating frequency). No TX, no writes.
+package main
+
+import (
+	"encoding/binary"
+	"encoding/hex"
+	"fmt"
+	"net"
+	"os"
+	"time"
+)
+
+var le = binary.LittleEndian
+var be = binary.BigEndian
+
+// passcodeSeq — Icom's obfuscation table (values live at index 0x20..0x7e).
+// VERIFIED: user "f6bgc" → 3F 65 50 25 55 (matches the capture).
+var passcodeSeq = [256]byte{
+	0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+	0x47, 0x5d, 0x4c, 0x42, 0x66, 0x20, 0x23, 0x46, 0x4e, 0x57, 0x45, 0x3d, 0x67, 0x76, 0x60, 0x41, 0x62, 0x39, 0x59, 0x2d, 0x68, 0x7e,
+	0x7c, 0x65, 0x7d, 0x49, 0x29, 0x72, 0x73, 0x78, 0x21, 0x6e, 0x5a, 0x5e, 0x4a, 0x3e, 0x71, 0x2c, 0x2a, 0x54, 0x3c, 0x3a, 0x63, 0x4f,
+	0x43, 0x75, 0x27, 0x79, 0x5b, 0x35, 0x70, 0x48, 0x6b, 0x56, 0x6f, 0x34, 0x32, 0x6c, 0x30, 0x61, 0x6d, 0x7b, 0x2f, 0x4b, 0x64, 0x38,
+	0x2b, 0x2e, 0x50, 0x40, 0x3f, 0x55, 0x33, 0x37, 0x25, 0x77, 0x24, 0x26, 0x74, 0x6a, 0x28, 0x53, 0x4d, 0x69, 0x22, 0x5c, 0x44, 0x31,
+	0x36, 0x58, 0x3b, 0x7a, 0x51, 0x5f, 0x52,
+}
+
+func passcode(s string) []byte {
+	out := make([]byte, 0, len(s))
+	for i := 0; i < len(s) && i < 16; i++ {
+		p := int(s[i]) + i
+		if p > 126 {
+			p = 32 + p%127
+		}
+		out = append(out, passcodeSeq[p])
+	}
+	return out
+}
+
+// --- packet builders (offsets verified vs wfview structs + real captures) ---
+
+func ctrlPacket(typ, seq uint16, sentid, rcvdid uint32) []byte {
+	b := make([]byte, 16)
+	le.PutUint32(b[0:], 0x10)
+	le.PutUint16(b[4:], typ)
+	le.PutUint16(b[6:], seq)
+	le.PutUint32(b[8:], sentid)
+	le.PutUint32(b[12:], rcvdid)
+	return b
+}
+
+func buildLogin(seq, innerSeq, tokReq uint16, sentid, rcvdid, token uint32, user, pass, name string) []byte {
+	b := make([]byte, 0x80)
+	le.PutUint32(b[0:], 0x80)
+	le.PutUint16(b[6:], seq)
+	le.PutUint32(b[8:], sentid)
+	le.PutUint32(b[12:], rcvdid)
+	be.PutUint32(b[0x10:], 0x80-0x10)
+	b[0x14] = 0x01 // requestreply
+	b[0x15] = 0x00 // requesttype = login
+	be.PutUint16(b[0x16:], innerSeq)
+	le.PutUint16(b[0x1a:], tokReq)
+	le.PutUint32(b[0x1c:], token)
+	copy(b[0x40:0x50], passcode(user))
+	copy(b[0x50:0x60], passcode(pass))
+	nm := name
+	if len(nm) > 16 {
+		nm = nm[:16]
+	}
+	copy(b[0x60:0x70], []byte(nm))
+	return b
+}
+
+func buildToken(seq, innerSeq, tokReq uint16, sentid, rcvdid, token uint32) []byte {
+	b := make([]byte, 0x40)
+	le.PutUint32(b[0:], 0x40)
+	le.PutUint16(b[6:], seq)
+	le.PutUint32(b[8:], sentid)
+	le.PutUint32(b[12:], rcvdid)
+	be.PutUint32(b[0x10:], 0x40-0x10)
+	b[0x14] = 0x01 // requestreply
+	b[0x15] = 0x02 // requesttype = token
+	be.PutUint16(b[0x16:], innerSeq)
+	le.PutUint16(b[0x1a:], tokReq)
+	le.PutUint32(b[0x1c:], token)
+	return b
+}
+
+// buildConnInfo — 144-byte sendRequestStream on the CONTROL stream. Tells the
+// rig to route the CI-V/audio streams to the authenticated session and which
+// local ports we use. Values verified byte-for-byte vs a real Remote-Utility
+// capture (civ4): requesttype=0x03, commoncap=0x8010, the rig's MAC echoed,
+// name "IC-7610", scrambled username, rxenable=0 (audio off — CI-V only),
+// rxcodec 0x10 / txcodec 0x04, rxsample 16000 / txsample 8000 (BE), civport /
+// audioport (BE), txbuffer 100.
+func buildConnInfo(seq, innerSeq, tokReq uint16, sentid, rcvdid, token uint32, user string, rigMAC []byte, civPort, audioPort uint16) []byte {
+	b := make([]byte, 0x90)
+	le.PutUint32(b[0:], 0x90)
+	le.PutUint16(b[6:], seq)
+	le.PutUint32(b[8:], sentid)
+	le.PutUint32(b[12:], rcvdid)
+	be.PutUint32(b[0x10:], 0x90-0x10)
+	b[0x14] = 0x01 // requestreply
+	b[0x15] = 0x03 // requesttype = conninfo / open streams
+	be.PutUint16(b[0x16:], innerSeq)
+	le.PutUint16(b[0x1a:], tokReq)
+	le.PutUint32(b[0x1c:], token)
+	le.PutUint16(b[0x27:], 0x8010) // commoncap
+	copy(b[0x2a:0x30], rigMAC)     // macaddress (the rig's, echoed back)
+	copy(b[0x40:0x60], []byte("IC-7610"))
+	copy(b[0x60:0x70], passcode(user))
+	b[0x70] = 0x00 // rxenable (0 = audio off)
+	b[0x71] = 0x00 // txenable
+	b[0x72] = 0x10 // rxcodec
+	b[0x73] = 0x04 // txcodec
+	be.PutUint32(b[0x74:], 16000) // rxsample
+	be.PutUint32(b[0x78:], 8000)  // txsample
+	be.PutUint32(b[0x7c:], uint32(civPort))
+	be.PutUint32(b[0x80:], uint32(audioPort))
+	be.PutUint32(b[0x84:], 100) // txbuffer
+	b[0x88] = 0x00              // convert
+	return b
+}
+
+// buildOpenClose — 22-byte start/stop for the CI-V stream. magic 0x04=open,
+// 0x00=close. data=0x01c0 (@0x10), civSeq (BE @0x13), magic (@0x15).
+func buildOpenClose(seq uint16, sentid, rcvdid uint32, civSeq uint16, magic byte) []byte {
+	b := make([]byte, 0x16)
+	le.PutUint32(b[0:], 0x16)
+	le.PutUint16(b[6:], seq)
+	le.PutUint32(b[8:], sentid)
+	le.PutUint32(b[12:], rcvdid)
+	le.PutUint16(b[0x10:], 0x01c0)
+	be.PutUint16(b[0x13:], civSeq)
+	b[0x15] = magic
+	return b
+}
+
+// buildCivData — wraps raw CI-V bytes: 21-byte header (reply 0xc1 @0x10,
+// datalen LE @0x11, civSeq BE @0x13) + CI-V frame @0x15.
+func buildCivData(seq uint16, sentid, rcvdid uint32, civSeq uint16, civ []byte) []byte {
+	n := 0x15 + len(civ)
+	b := make([]byte, n)
+	le.PutUint32(b[0:], uint32(n))
+	le.PutUint16(b[6:], seq)
+	le.PutUint32(b[8:], sentid)
+	le.PutUint32(b[12:], rcvdid)
+	b[0x10] = 0xc1
+	le.PutUint16(b[0x11:], uint16(len(civ)))
+	be.PutUint16(b[0x13:], civSeq)
+	copy(b[0x15:], civ)
+	return b
+}
+
+func header(b []byte) (length uint32, typ, seq uint16, sentid, rcvdid uint32, ok bool) {
+	if len(b) < 16 {
+		return 0, 0, 0, 0, 0, false
+	}
+	return le.Uint32(b[0:]), le.Uint16(b[4:]), le.Uint16(b[6:]), le.Uint32(b[8:]), le.Uint32(b[12:]), true
+}
+
+func localID(conn net.Conn) uint32 {
+	a := conn.LocalAddr().(*net.UDPAddr)
+	return uint32(a.IP.To4()[0])<<24 | uint32(a.IP.To4()[1])<<16 | uint32(uint16(a.Port))
+}
+
+func recv(conn net.Conn, ms int, buf []byte) ([]byte, bool) {
+	_ = conn.SetReadDeadline(time.Now().Add(time.Duration(ms) * time.Millisecond))
+	n, err := conn.Read(buf)
+	if err != nil {
+		return nil, false
+	}
+	return append([]byte(nil), buf[:n]...), true
+}
+
+func dump(tag string, p []byte) { fmt.Printf("%s (%d)\n%s\n", tag, len(p), hex.Dump(p)) }
+
+// pingReply mirrors a ping, swaps ids, sets the reply flag at offset 16.
+func pingReply(pkt []byte, myID, remoteID uint32) []byte {
+	r := append([]byte(nil), pkt...)
+	if len(r) >= 17 {
+		le.PutUint32(r[8:], myID)
+		le.PutUint32(r[12:], remoteID)
+		r[16] = 0x01
+	}
+	return r
+}
+
+// handshake: areYouThere(seq0) → iAmHere → areYouReady(seq1) → iAmReady.
+// Returns the rig's remote id. Replies to any pings meanwhile.
+func handshake(conn net.Conn, myID uint32, label string) (uint32, bool) {
+	buf := make([]byte, 2048)
+	conn.Write(ctrlPacket(0x03, 0, myID, 0)) // areYouThere
+	fmt.Printf("[%s] TX areYouThere\n", label)
+	var remoteID uint32
+	deadline := time.Now().Add(4 * time.Second)
+	lastTry := time.Now()
+	for time.Now().Before(deadline) {
+		p, ok := recv(conn, 200, buf)
+		if !ok {
+			if remoteID == 0 && time.Since(lastTry) > 500*time.Millisecond {
+				conn.Write(ctrlPacket(0x03, 0, myID, 0))
+				lastTry = time.Now()
+			}
+			continue
+		}
+		_, typ, _, sentid, _, ok := header(p)
+		if !ok {
+			continue
+		}
+		switch typ {
+		case 0x04: // iAmHere
+			remoteID = sentid
+			fmt.Printf("[%s] iAmHere remoteID=0x%08X → TX areYouReady\n", label, remoteID)
+			conn.Write(ctrlPacket(0x06, 1, myID, remoteID))
+		case 0x06: // iAmReady
+			if remoteID != 0 {
+				fmt.Printf("[%s] iAmReady — link up ✓\n", label)
+				return remoteID, true
+			}
+		case 0x07: // ping
+			conn.Write(pingReply(p, myID, remoteID))
+		}
+	}
+	return remoteID, false
+}
+
+func main() {
+	if len(os.Args) < 4 {
+		fmt.Println("usage: icomnettest <rig-ip> <user> <pass> [compname]")
+		os.Exit(2)
+	}
+	ip, user, pass := os.Args[1], os.Args[2], os.Args[3]
+	compName := "OpsLog"
+	if len(os.Args) >= 5 {
+		compName = os.Args[4]
+	}
+
+	// ===================== CONTROL STREAM (50001) =====================
+	ctrl, err := net.Dial("udp4", net.JoinHostPort(ip, "50001"))
+	if err != nil {
+		fmt.Printf("dial control: %v\n", err)
+		os.Exit(1)
+	}
+	defer ctrl.Close()
+	cID := localID(ctrl)
+	fmt.Printf("=== CONTROL 50001 (myID=0x%08X) ===\n", cID)
+	fmt.Printf("scrambled user=% X  pass=% X\n\n", passcode(user), passcode(pass))
+
+	cRemote, ok := handshake(ctrl, cID, "ctrl")
+	if !ok {
+		fmt.Println("control handshake failed")
+		return
+	}
+
+	// login → token
+	var cTracked uint16 = 1
+	var cInner uint16 = 1
+	tokReq := uint16(0x0c77)
+	dump("[ctrl] TX login", buildLogin(cTracked, cInner, tokReq, cID, cRemote, 0, user, pass, compName))
+	ctrl.Write(buildLogin(cTracked, cInner, tokReq, cID, cRemote, 0, user, pass, compName))
+	cTracked++
+	cInner++
+
+	var token uint32
+	buf := make([]byte, 2048)
+	deadline := time.Now().Add(4 * time.Second)
+	for token == 0 && time.Now().Before(deadline) {
+		p, ok := recv(ctrl, 200, buf)
+		if !ok {
+			continue
+		}
+		length, typ, _, _, _, _ := header(p)
+		if typ == 0x00 && length == 0x60 && len(p) >= 0x34 { // login response
+			token = le.Uint32(p[0x1c:])
+			errCode := le.Uint32(p[0x30:])
+			if errCode != 0 || token == 0 {
+				fmt.Printf(">> LOGIN REJECTED err=0x%08X token=0x%08X\n", errCode, token)
+				return
+			}
+			fmt.Printf(">> LOGIN OK ✓ token=0x%08X\n", token)
+			ctrl.Write(buildToken(cTracked, cInner, tokReq, cID, cRemote, token))
+			cTracked++
+			cInner++
+		} else if typ == 0x07 {
+			ctrl.Write(pingReply(p, cID, cRemote))
+		}
+	}
+	if token == 0 {
+		fmt.Println("no token — login not accepted")
+		return
+	}
+
+	// Send conninfo on the control stream — routes the CI-V stream to this
+	// authenticated session and announces our civ/audio local ports (50002/3).
+	rigMAC := []byte{0x00, 0x90, 0xc7, 0x09, 0xba, 0x3f} // F6BGC's IC-7610 (from the caps packet)
+	dump("[ctrl] TX conninfo", buildConnInfo(cTracked, cInner, tokReq, cID, cRemote, token, user, rigMAC, 50002, 50003))
+	ctrl.Write(buildConnInfo(cTracked, cInner, tokReq, cID, cRemote, token, user, rigMAC, 50002, 50003))
+	cTracked++
+	cInner++
+	// Let the rig's caps/conninfo replies flow for ~600ms (reply to pings).
+	drainEnd := time.Now().Add(600 * time.Millisecond)
+	for time.Now().Before(drainEnd) {
+		if p, ok := recv(ctrl, 100, buf); ok {
+			if _, typ, _, _, _, _ := header(p); typ == 0x07 {
+				ctrl.Write(pingReply(p, cID, cRemote))
+			}
+		}
+	}
+
+	// ===================== CI-V STREAM (50002) =====================
+	// Bind our civ socket to LOCAL port 50002 (= the civport announced above),
+	// as the Remote Utility does. Requires the Remote Utility to be CLOSED.
+	civ, err := net.DialUDP("udp4", &net.UDPAddr{Port: 50002}, &net.UDPAddr{IP: net.ParseIP(ip), Port: 50002})
+	if err != nil {
+		fmt.Printf("dial civ (local :50002 — is the Remote Utility still running?): %v\n", err)
+		return
+	}
+	defer civ.Close()
+	vID := localID(civ)
+	fmt.Printf("\n=== CI-V 50002 (myID=0x%08X) ===\n", vID)
+	vRemote, ok := handshake(civ, vID, "civ")
+	if !ok {
+		fmt.Println("CI-V handshake failed (may need the conninfo packet on control first)")
+		return
+	}
+
+	var vTracked uint16 = 1 // outer tracked seq @0x06
+	var vCivSeq uint16 = 1  // inner CI-V seq @0x13 (BE)
+	// openClose(open) starts CI-V data flow.
+	dump("[civ] TX openClose(open)", buildOpenClose(vTracked, vID, vRemote, vCivSeq, 0x04))
+	civ.Write(buildOpenClose(vTracked, vID, vRemote, vCivSeq, 0x04))
+	vTracked++
+	vCivSeq++
+
+	// Try several read commands, spaced out. Some rigs NG the basic 0x03 read
+	// over the network tunnel; 0x25 / 0x04 and unsolicited transceive frames
+	// (sent when you turn the VFO) still work. The tunnel itself is proven, so
+	// this figures out which read the rig actually answers.
+	sendCiv := func(name string, f []byte) {
+		fmt.Printf("[civ] TX %s\n", name)
+		civ.Write(buildCivData(vTracked, vID, vRemote, vCivSeq, f))
+		vTracked++
+		vCivSeq++
+	}
+	// The rig is in STANDBY (network up, radio off) — it NG's every command
+	// until powered on via CI-V. Send power-on (0x18 0x01, with an FE wake
+	// preamble, as the Remote Utility does), then poll read-freq while it boots.
+	powerOn := make([]byte, 0, 32)
+	for i := 0; i < 25; i++ {
+		powerOn = append(powerOn, 0xFE)
+	}
+	powerOn = append(powerOn, 0xFE, 0xFE, 0x98, 0xE0, 0x18, 0x01, 0xFD)
+	time.Sleep(300 * time.Millisecond)
+	sendCiv("POWER ON (0x18 01)", powerOn)
+	fmt.Print("\n>>> rig booting (~10-15 s) — polling read-freq until it answers <<<\n\n")
+	readFreq := []byte{0xFE, 0xFE, 0x98, 0xE0, 0x03, 0xFD}
+
+	cbuf := make([]byte, 4096)
+	vbuf := make([]byte, 4096)
+	end := time.Now().Add(30 * time.Second)
+	lastIdleC, lastIdleV, lastCmd := time.Now(), time.Now(), time.Now()
+	for time.Now().Before(end) {
+		if p, ok := recv(ctrl, 40, cbuf); ok {
+			if _, typ, _, _, _, _ := header(p); typ == 0x07 {
+				ctrl.Write(pingReply(p, cID, cRemote))
+			}
+		} else if time.Since(lastIdleC) > 200*time.Millisecond {
+			ctrl.Write(ctrlPacket(0x00, 0, cID, cRemote))
+			lastIdleC = time.Now()
+		}
+		if p, ok := recv(civ, 40, vbuf); ok {
+			_, typ, _, _, _, _ := header(p)
+			if typ == 0x07 {
+				civ.Write(pingReply(p, vID, vRemote))
+			} else if typ == 0x00 && len(p) > 0x15 && p[0x10] == 0xc1 {
+				f := p[0x15:]
+				if d := decodeCiv(f); d != "" {
+					fmt.Printf(">> CI-V RX: % X   %s\n", f, d)
+				}
+			}
+		} else if time.Since(lastIdleV) > 200*time.Millisecond {
+			civ.Write(ctrlPacket(0x00, 0, vID, vRemote))
+			lastIdleV = time.Now()
+		}
+		if time.Since(lastCmd) > 1000*time.Millisecond {
+			sendCiv("read-freq 0x03", readFreq)
+			lastCmd = time.Now()
+		}
+	}
+
+	// Clean close.
+	civ.Write(buildOpenClose(vTracked, vID, vRemote, vCivSeq, 0x00)) // openClose(close)
+	civ.Write(ctrlPacket(0x05, 0, vID, vRemote))                     // disconnect
+	ctrl.Write(ctrlPacket(0x05, 0, cID, cRemote))
+	fmt.Println("\nDone. Look for '>> CI-V RX:' and 'FREQUENCY reply'.")
+}
+
+// decodeCiv describes a received CI-V frame (FE FE <to> <from> <cmd> … FD).
+// Only frames FROM the rig (from=0x98) are interesting; our own echoed commands
+// (from=0xE0) return "" so they're not printed.
+func decodeCiv(f []byte) string {
+	if len(f) < 6 || f[0] != 0xFE || f[1] != 0xFE {
+		return ""
+	}
+	if f[3] != 0x98 { // not from the rig (our echoed command) — skip
+		return ""
+	}
+	cmd := f[4]
+	body := f[5 : len(f)-1] // between cmd and the trailing FD
+	switch cmd {
+	case 0xFA:
+		return "NG (command rejected)"
+	case 0xFB:
+		return "OK (ack)"
+	case 0x00, 0x03, 0x05: // (transceive) freq / read-freq
+		if len(body) >= 5 {
+			return "FREQ " + decodeFreq(body[:5])
+		}
+	case 0x25: // read/set VFO freq (body = subcmd + 5 BCD)
+		if len(body) >= 6 {
+			return fmt.Sprintf("VFO%d FREQ %s", body[0], decodeFreq(body[1:6]))
+		}
+	case 0x01, 0x04: // (transceive) mode / read-mode
+		if len(body) >= 1 {
+			return fmt.Sprintf("MODE 0x%02X filt 0x%02X", body[0], lastOr(body, 1))
+		}
+	}
+	return fmt.Sprintf("cmd 0x%02X", cmd)
+}
+
+func lastOr(b []byte, i int) byte {
+	if i < len(b) {
+		return b[i]
+	}
+	return 0
+}
+
+// decodeFreq turns Icom little-endian BCD (5 bytes) into a MHz string.
+func decodeFreq(bcd []byte) string {
+	var hz uint64
+	mul := uint64(1)
+	for _, b := range bcd {
+		hz += uint64(b&0x0f) * mul
+		mul *= 10
+		hz += uint64(b>>4) * mul
+		mul *= 10
+	}
+	return fmt.Sprintf("%.6f MHz", float64(hz)/1e6)
+}

cmd/psttest/main.go

@@ -0,0 +1,92 @@
+// Command psttest probes PstRotatorAz's UDP tracking input to discover the wire
+// format it expects for the "DXLog.net" tracker. We don't have the spec, so this
+// sends a series of labelled candidate datagrams to the target and pauses between
+// each so you can watch PstRotatorAz and note which one it reacts to (the band
+// filter "Rotate Antenna only for the Selected Bands" changes, or the frequency
+// shows in the tracker box).
+//
+// Setup on the PstRotatorAz side:
+//   - Tracker = DXLog.net
+//   - Note the UDP port it listens on (commonly 12040) and this PC's IP
+//   - In the tracker setup tick a couple of bands so the band filter is visible
+//
+// Usage:
+//
+//	go run ./cmd/psttest 192.168.1.50:12040            # default 14025.5 kHz
+//	go run ./cmd/psttest 192.168.1.50:12040 21074      # a specific kHz
+//	go run ./cmd/psttest 192.168.1.50:12040 21074 3    # repeat each variant 3x
+//
+// Watch PstRotatorAz as it runs; when one variant makes it react, that's the
+// format — tell me the variant number and I'll wire it into OpsLog.
+package main
+
+import (
+	"fmt"
+	"net"
+	"os"
+	"strconv"
+	"time"
+)
+
+type variant struct {
+	name string
+	// build returns the datagram for a given frequency in kHz.
+	build func(khz float64) string
+}
+
+func main() {
+	if len(os.Args) < 2 {
+		fmt.Println("usage: psttest <ip:port> [freqKHz] [repeat]")
+		fmt.Println("example: psttest 192.168.1.50:12040 3525.5")
+		os.Exit(2)
+	}
+	target := os.Args[1]
+	khz := 3525.5
+	if len(os.Args) >= 3 {
+		if v, err := strconv.ParseFloat(os.Args[2], 64); err == nil {
+			khz = v
+		}
+	}
+	repeat := 1
+	if len(os.Args) >= 4 {
+		if v, err := strconv.Atoi(os.Args[3]); err == nil && v > 0 {
+			repeat = v
+		}
+	}
+
+	hz := int64(khz*1000 + 0.5)
+	tensHz := hz / 10 // N1MM/DXLog <Freq> unit
+
+	// Tag <PST><FREQUENCY> is confirmed. PstRotator strips the decimal point and
+	// reads the digits, so pin down the exact unit: watch which one shows the real
+	// frequency (3.5255 MHz), not 0.35255 / 0.003525 / 0.035255.
+	variants := []variant{
+		{"FREQUENCY = Hz integer  (expect 3.5255 MHz) ← prediction", func(k float64) string { return fmt.Sprintf("<PST><FREQUENCY>%d</FREQUENCY></PST>", hz) }},
+		{"FREQUENCY = tens-of-Hz  (expect 0.35255 MHz)", func(k float64) string { return fmt.Sprintf("<PST><FREQUENCY>%d</FREQUENCY></PST>", tensHz) }},
+		{"FREQUENCY = kHz integer (expect 0.003525 MHz)", func(k float64) string { return fmt.Sprintf("<PST><FREQUENCY>%d</FREQUENCY></PST>", int64(k+0.5)) }},
+		{"FREQUENCY = kHz decimal (baseline: gave 0.035255 MHz)", func(k float64) string { return fmt.Sprintf("<PST><FREQUENCY>%.1f</FREQUENCY></PST>", k) }},
+	}
+
+	conn, err := net.Dial("udp", target)
+	if err != nil {
+		fmt.Printf("dial %s: %v\n", target, err)
+		os.Exit(1)
+	}
+	defer conn.Close()
+
+	fmt.Printf("Sending %d variants to %s at %.1f kHz (%d Hz, %d tens-of-Hz), %dx each.\n\n", len(variants), target, khz, hz, tensHz, repeat)
+	for i, v := range variants {
+		msg := v.build(khz)
+		fmt.Printf("── Variant %d: %s\n", i+1, v.name)
+		fmt.Printf("   payload: %s\n", msg)
+		for r := 0; r < repeat; r++ {
+			if _, err := conn.Write([]byte(msg)); err != nil {
+				fmt.Printf("   write error: %v\n", err)
+			}
+			time.Sleep(300 * time.Millisecond)
+		}
+		fmt.Printf("   → sent. Watch PstRotatorAz for ~4s…\n\n")
+		time.Sleep(4 * time.Second)
+	}
+	fmt.Println("Done. Which variant number made PstRotatorAz react?")
+}

docs/livestatus/tm74-status.php

@@ -0,0 +1,106 @@
+<?php
+/**
+ * OpsLog multi-operator LIVE STATUS renderer.
+ *
+ * Reads the shared `live_status` table that every OpsLog instance heartbeats
+ * (operator call + station call + freq/band/mode, refreshed every ~15s) and
+ * shows the operators active in the last 2 minutes.
+ *
+ * Put this file on YOUR web server (the one reachable from the internet), point
+ * it at the SAME MySQL database OpsLog uses for the shared logbook, and embed it
+ * on the QRZ.com bio of the station call:
+ *
+ *     <img src="https://your-server/tm74-status.php?img=1">     (image, cached ~min by QRZ)
+ *  or <a href="https://your-server/tm74-status.php">Live operators</a>   (real-time page)
+ *
+ * QRZ strips <script>/<iframe>, so only an <img> auto-updates the page.
+ */
+
+$DB_HOST = '10.10.10.15';      // your MySQL host (same as OpsLog's logbook)
+$DB_PORT = 3306;               // MySQL port — change if your server listens elsewhere
+$DB_NAME = 'opslog';           // database name
+$DB_USER = 'opslog';
+$DB_PASS = 'CHANGE_ME';
+$STALE_SECONDS = 120;          // an operator is "active" if seen within this window
+
+// PHP 8.1+ makes mysqli THROW on errors by default; turn that off so a missing
+// `live_status` table (not yet created by OpsLog) just yields an empty list
+// instead of a fatal "table doesn't exist".
+mysqli_report(MYSQLI_REPORT_OFF);
+
+$mysqli = @new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME, $DB_PORT);
+if ($mysqli->connect_errno) {
+    http_response_code(500);
+    exit('DB error');
+}
+
+// The table is created by OpsLog on first publish; tolerate it not existing yet.
+$rows = [];
+$sql = "SELECT operator, station, freq_hz, band, mode, updated_at
+        FROM live_status
+        WHERE updated_at >= UTC_TIMESTAMP() - INTERVAL ? SECOND
+        ORDER BY band, freq_hz";
+if ($stmt = @$mysqli->prepare($sql)) {
+    $stmt->bind_param('i', $STALE_SECONDS);
+    @$stmt->execute();
+    if ($res = $stmt->get_result()) {
+        while ($r = $res->fetch_assoc()) $rows[] = $r;
+    }
+}
+
+$station = $rows ? $rows[0]['station'] : 'OpsLog';
+$fmtFreq = function ($hz) { return $hz > 0 ? number_format($hz / 1e6, 3) . ' MHz' : '—'; };
+
+// ── Image output (SVG) for the QRZ <img> embed: ?img=1 ──────────────────────
+if (isset($_GET['img'])) {
+    header('Content-Type: image/svg+xml');
+    header('Cache-Control: no-cache, max-age=30');
+    $rowH = 26; $h = 44 + max(1, count($rows)) * $rowH; $w = 440;
+    echo "<svg xmlns='http://www.w3.org/2000/svg' width='$w' height='$h' font-family='Segoe UI,Arial'>";
+    echo "<rect width='$w' height='$h' rx='8' fill='#0f172a'/>";
+    echo "<text x='14' y='26' fill='#38bdf8' font-size='15' font-weight='bold'>" . htmlspecialchars($station) . " — live operators</text>";
+    $y = 44 + 18;
+    if (!$rows) {
+        echo "<text x='14' y='$y' fill='#94a3b8' font-size='13'>No operator active right now.</text>";
+    }
+    foreach ($rows as $r) {
+        $line = sprintf('%-10s  %-4s  %-9s  %s', $r['operator'], $r['band'], $r['mode'], $fmtFreq($r['freq_hz']));
+        echo "<text x='14' y='$y' fill='#e2e8f0' font-size='13' font-family='monospace'>" . htmlspecialchars($line) . "</text>";
+        $y += $rowH;
+    }
+    echo "</svg>";
+    exit;
+}
+
+// ── HTML page (real-time when opened directly; auto-refreshes every 20s) ─────
+header('Content-Type: text/html; charset=utf-8');
+?><!doctype html>
+<html lang="en"><head><meta charset="utf-8">
+<meta http-equiv="refresh" content="20">
+<title><?= htmlspecialchars($station) ?> — live operators</title>
+<style>
+  body { font-family: Segoe UI, Arial, sans-serif; background:#0f172a; color:#e2e8f0; margin:0; padding:16px; }
+  h1 { color:#38bdf8; font-size:18px; margin:0 0 12px; }
+  table { border-collapse:collapse; width:100%; max-width:560px; }
+  th,td { text-align:left; padding:6px 12px; border-bottom:1px solid #1e293b; font-size:14px; }
+  th { color:#94a3b8; text-transform:uppercase; font-size:11px; letter-spacing:.05em; }
+  td.mono { font-family:monospace; }
+  .none { color:#94a3b8; }
+</style></head><body>
+<h1><?= htmlspecialchars($station) ?> — operators active now</h1>
+<?php if (!$rows): ?>
+  <p class="none">No operator active right now.</p>
+<?php else: ?>
+  <table>
+    <tr><th>Operator</th><th>Band</th><th>Mode</th><th>Frequency</th></tr>
+    <?php foreach ($rows as $r): ?>
+      <tr>
+        <td><strong><?= htmlspecialchars($r['operator']) ?></strong></td>
+        <td><?= htmlspecialchars($r['band']) ?></td>
+        <td><?= htmlspecialchars($r['mode']) ?></td>
+        <td class="mono"><?= $fmtFreq($r['freq_hz']) ?></td>
+      </tr>
+    <?php endforeach; ?>
+  </table>
+<?php endif; ?>
+</body></html>

flexpower_test.go

@@ -0,0 +1,25 @@
+package main
+
+import "testing"
+
+// Which class of power a mode falls into.
+//
+// This decides how much power leaves the amplifier, so an error here is not a
+// display bug: a digital mode sorted as phone gets the SSB setting, which is
+// exactly the 1.5 kW into a 100% duty cycle this feature exists to prevent.
+func TestFlexPowerClass(t *testing.T) {
+	for _, c := range []struct{ mode, want string }{
+		{"SSB", "phone"}, {"USB", "phone"}, {"LSB", "phone"}, {"AM", "phone"}, {"FM", "phone"},
+		{"CW", "cw"}, {"cw", "cw"}, {" CW ", "cw"},
+		{"FT8", "digi"}, {"FT4", "digi"}, {"RTTY", "digi"}, {"PSK31", "digi"},
+		{"JS8", "digi"}, {"Q65", "digi"}, {"MSK144", "digi"}, {"DATA", "digi"},
+		{"DIGU", "digi"}, {"DIGL", "digi"}, {"WSPR", "digi"},
+		// Unknown or empty: no class, and the caller changes nothing. Setting a
+		// transmit power from a name we do not recognise is not a good guess.
+		{"", ""}, {"SSTV", ""}, {"BANANA", ""},
+	} {
+		if got := flexPowerClass(c.mode); got != c.want {
+			t.Errorf("flexPowerClass(%q) = %q, want %q", c.mode, got, c.want)
+		}
+	}
+}

frontend/package-lock.json

@@ -23,16 +23,23 @@
         "ag-grid-react": "^35.3.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "d3-geo": "^3.1.1",
+        "leaflet": "^1.9.4",
         "lucide-react": "^1.16.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "tailwind-merge": "^3.6.0"
+        "tailwind-merge": "^3.6.0",
+        "topojson-client": "^3.1.0",
+        "world-atlas": "^2.0.2"
       },
       "devDependencies": {
         "@tailwindcss/vite": "^4.3.0",
+        "@types/d3-geo": "^3.1.0",
+        "@types/leaflet": "^1.9.21",
         "@types/node": "^25.9.1",
         "@types/react": "^18.0.17",
         "@types/react-dom": "^18.0.6",
+        "@types/topojson-client": "^3.1.5",
         "@vitejs/plugin-react": "^4.7.0",
         "tailwindcss": "^4.3.0",
         "tw-animate-css": "^1.4.0",
@@ -2577,6 +2584,16 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -2584,6 +2601,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.21",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.21.tgz",
+      "integrity": "sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "25.9.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.1.tgz",
@@ -2622,6 +2656,27 @@
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/topojson-client": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@types/topojson-client/-/topojson-client-3.1.5.tgz",
+      "integrity": "sha512-C79rySTyPxnQNNguTZNI1Ct4D7IXgvyAs3p9HPecnl6mNrJ5+UhvGNYcZfpROYV2lMHI48kJPxwR+F9C6c7nmw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*",
+        "@types/topojson-specification": "*"
+      }
+    },
+    "node_modules/@types/topojson-specification": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/topojson-specification/-/topojson-specification-1.0.5.tgz",
+      "integrity": "sha512-C7KvcQh+C2nr6Y2Ub4YfgvWvWCgP2nOQMtfhlnwsRL4pYmmwzBS7HclGiS87eQfDOU/DLQpX6GEscviaz4yLIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
@@ -2773,6 +2828,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "license": "MIT"
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -2787,6 +2848,30 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -2953,6 +3038,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
@@ -2995,6 +3089,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -3634,6 +3734,20 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/topojson-client": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
+      "integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==",
+      "license": "ISC",
+      "dependencies": {
+        "commander": "2"
+      },
+      "bin": {
+        "topo2geo": "bin/topo2geo",
+        "topomerge": "bin/topomerge",
+        "topoquantize": "bin/topoquantize"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -3820,6 +3934,12 @@
         }
       }
     },
+    "node_modules/world-atlas": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/world-atlas/-/world-atlas-2.0.2.tgz",
+      "integrity": "sha512-IXfV0qwlKXpckz1FhwXVwKRjiIhOnWttOskm5CtxMsjgE/MXAYRHWJqgXOpM8IkcPBoXnyTU5lFHcYa5ChG0LQ==",
+      "license": "ISC"
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",

frontend/package.json

@@ -24,16 +24,23 @@
     "ag-grid-react": "^35.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "d3-geo": "^3.1.1",
+    "leaflet": "^1.9.4",
     "lucide-react": "^1.16.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwind-merge": "^3.6.0"
+    "tailwind-merge": "^3.6.0",
+    "topojson-client": "^3.1.0",
+    "world-atlas": "^2.0.2"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.0",
+    "@types/d3-geo": "^3.1.0",
+    "@types/leaflet": "^1.9.21",
     "@types/node": "^25.9.1",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "@types/topojson-client": "^3.1.5",
     "@vitejs/plugin-react": "^4.7.0",
     "tailwindcss": "^4.3.0",
     "tw-animate-css": "^1.4.0",

frontend/package.json.md5

@@ -1 +1 @@
-687705a933fcf09f20bdb5083955a417
+f9b41e192918fa2511f68cd1b361fcd3

frontend/src/components/AdifExtrasEditor.tsx

@@ -0,0 +1,132 @@
+import { useEffect, useMemo, useState } from 'react';
+import { X, Plus } from 'lucide-react';
+import { ADIFFields } from '../../wailsjs/go/main/App';
+import { Input } from '@/components/ui/input';
+import { Combobox } from '@/components/ui/combobox';
+import { Button } from '@/components/ui/button';
+import { useI18n } from '@/lib/i18n';
+
+type FieldDef = {
+  name: string; kind: string; category: string;
+  promoted: boolean; deprecated: boolean; intl: boolean;
+};
+
+interface Props {
+  // The QSO's extras map (uppercase ADIF tag → raw value).
+  value: Record<string, string> | undefined;
+  onChange: (next: Record<string, string> | undefined) => void;
+}
+
+// AdifExtrasEditor — a dictionary-driven editor for every ADIF field that is
+// NOT promoted to a first-class column. Backed by the QSO's extras map, so any
+// ADIF 3.1.7 field (plus custom/vendor tags) can be viewed and edited. This is
+// what makes "100% of ADIF fields available" true without 160 DB columns.
+export function AdifExtrasEditor({ value, onChange }: Props) {
+  const { t } = useI18n();
+  const [dict, setDict] = useState<FieldDef[]>([]);
+  const [showDeprecated, setShowDeprecated] = useState(false);
+
+  useEffect(() => {
+    ADIFFields().then((f) => setDict((f ?? []) as any)).catch(() => {});
+  }, []);
+
+  // Entries currently set, sorted for stable display.
+  const entries = useMemo(
+    () => Object.entries(value ?? {}).sort((a, b) => a[0].localeCompare(b[0])),
+    [value],
+  );
+
+  // Addable fields: standard non-promoted ADIF fields not already present.
+  // Deprecated (import-only) fields are hidden unless the toggle is on.
+  const addable = useMemo(() => {
+    const have = new Set(Object.keys(value ?? {}));
+    return dict
+      .filter((f) => !f.promoted && !have.has(f.name) && (showDeprecated || !f.deprecated))
+      .map((f) => f.name);
+  }, [dict, value, showDeprecated]);
+
+  const meta = useMemo(() => {
+    const m: Record<string, FieldDef> = {};
+    for (const f of dict) m[f.name] = f;
+    return m;
+  }, [dict]);
+
+  function setKV(key: string, val: string) {
+    const next = { ...(value ?? {}) };
+    next[key] = val;
+    onChange(next);
+  }
+  function remove(key: string) {
+    const next = { ...(value ?? {}) };
+    delete next[key];
+    onChange(Object.keys(next).length ? next : undefined);
+  }
+  function addField(name: string) {
+    const key = name.trim().toUpperCase();
+    if (!key || (value && key in value)) return;
+    setKV(key, '');
+  }
+
+  return (
+    <div className="space-y-3">
+      <p className="text-xs text-muted-foreground">
+        {t('adx.introPart1')}<code className="bg-muted px-1 rounded font-mono">APP_*</code>{t('adx.introPart2')}<strong>{t('adx.fullMode')}</strong>{t('adx.introPart3')}
+      </p>
+
+      {/* Add a field */}
+      <div className="flex items-center gap-2">
+        <div className="flex-1 max-w-xs">
+          <Combobox
+            value=""
+            options={addable}
+            placeholder={t('adx.addFieldPh')}
+            allowFreeText
+            onChange={addField}
+          />
+        </div>
+        <label className="flex items-center gap-1.5 text-[11px] text-muted-foreground cursor-pointer">
+          <input type="checkbox" checked={showDeprecated} onChange={(e) => setShowDeprecated(e.target.checked)} />
+          {t('adx.showDeprecated')}
+        </label>
+      </div>
+
+      {/* Current entries */}
+      {entries.length === 0 ? (
+        <div className="text-[11px] text-muted-foreground italic border border-dashed border-border rounded-md px-3 py-4 text-center">
+          {t('adx.noExtra')}
+        </div>
+      ) : (
+        <div className="space-y-1.5">
+          {entries.map(([k, v]) => {
+            const def = meta[k];
+            return (
+              <div key={k} className="flex items-center gap-2">
+                <div className="w-48 shrink-0">
+                  <span className="font-mono text-xs font-semibold">{k}</span>
+                  {def && (
+                    <span className="block text-[10px] text-muted-foreground leading-tight">
+                      {def.category}{def.deprecated ? ' · ' + t('adx.deprecated') : ''}{def.intl ? ' · ' + t('adx.intl') : ''}
+                      {!def && ''}
+                    </span>
+                  )}
+                  {!def && <span className="block text-[10px] text-warning leading-tight">{t('adx.nonStandard')}</span>}
+                </div>
+                <Input
+                  className="flex-1 h-8 text-xs font-mono"
+                  value={v}
+                  onChange={(e) => setKV(k, e.target.value)}
+                />
+                <Button
+                  type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-muted-foreground hover:text-destructive"
+                  onClick={() => remove(k)} title={t('adx.removeField')}
+                >
+                  <X className="size-3.5" />
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/AlertsModal.tsx

@@ -0,0 +1,275 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Bell, Plus, Trash2, Volume2, Mail, Eye, X, Search } from 'lucide-react';
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
+import {
+  ListAlertRules, SaveAlertRule, DeleteAlertRule, GetAlertEmailTo, SetAlertEmailTo,
+} from '@/../wailsjs/go/main/App';
+import { alerts } from '@/../wailsjs/go/models';
+
+type Rule = alerts.Rule;
+
+const CONTINENTS = ['AF', 'AN', 'AS', 'EU', 'NA', 'OC', 'SA'];
+
+function emptyRule(): Rule {
+  return alerts.Rule.createFrom({
+    id: '', name: 'New alert', enabled: true,
+    calls: [], countries: [], continents: [], bands: [], modes: [],
+    spotter_call: '', spotter_continents: [], spotter_countries: [],
+    sound: true, visual: true, email: false, again_after_min: 0, skip_worked: false,
+  });
+}
+
+// MultiCheck — a scrollable checkbox list for a set of options with an optional
+// search box (used for the long country list). Empty selection = ALL.
+function MultiCheck({ options, selected, onToggle, searchable, height = 'h-52' }: {
+  options: string[]; selected: string[]; onToggle: (v: string) => void; searchable?: boolean; height?: string;
+}) {
+  const { t } = useI18n();
+  const [q, setQ] = useState('');
+  const shown = useMemo(
+    () => (q ? options.filter((o) => o.toLowerCase().includes(q.toLowerCase())) : options),
+    [options, q],
+  );
+  const sel = new Set((selected ?? []).map((s) => s.toLowerCase()));
+  return (
+    <div className="rounded-md border border-border">
+      {searchable && (
+        <div className="flex items-center gap-1.5 px-2 py-1 border-b border-border/60">
+          <Search className="size-3 text-muted-foreground" />
+          <input className="flex-1 bg-transparent text-xs outline-none" placeholder={t('altm.filterPh')} value={q} onChange={(e) => setQ(e.target.value)} />
+        </div>
+      )}
+      <div className={cn('overflow-y-auto p-1', height)}>
+        {shown.map((o) => (
+          <label key={o} className="flex items-center gap-2 text-xs px-1.5 py-0.5 rounded hover:bg-accent/40 cursor-pointer">
+            <Checkbox checked={sel.has(o.toLowerCase())} onCheckedChange={() => onToggle(o)} />
+            <span className="truncate">{o}</span>
+          </label>
+        ))}
+        {shown.length === 0 && <div className="text-[11px] text-muted-foreground px-2 py-3 text-center">{t('altm.noMatch')}</div>}
+      </div>
+      <div className="px-2 py-1 border-t border-border/60 text-[10px] text-muted-foreground">
+        {(selected?.length ?? 0) === 0 ? t('altm.noneAll') : t('altm.nSelected', { n: selected!.length })}
+      </div>
+    </div>
+  );
+}
+
+export function AlertsModal({ onClose, bands, modes, countries }: {
+  onClose: () => void; bands: string[]; modes: string[]; countries: string[];
+}) {
+  const { t } = useI18n();
+  const [rules, setRules] = useState<Rule[]>([]);
+  const [draft, setDraft] = useState<Rule | null>(null);
+  // Raw text of the callsigns box, kept separately from draft.calls. The list is
+  // normalised (trim + drop empties) on the way into the rule, so binding the
+  // textarea straight to calls.join('\n') round-trips every keystroke through
+  // that normalisation — a trailing newline or space is stripped before React
+  // re-renders, and Enter/Space appear to do nothing. Editing the raw text and
+  // deriving the list from it keeps typing intact.
+  const [callsText, setCallsText] = useState('');
+  const [tab, setTab] = useState('def'); // active editor tab (reset to Definition on new/select)
+  const [emailTo, setEmailTo] = useState('');
+  const [err, setErr] = useState('');
+
+  const refresh = useCallback(async () => {
+    try { setRules(((await ListAlertRules()) ?? []) as Rule[]); }
+    catch (e: any) { setErr(String(e?.message ?? e)); }
+  }, []);
+  useEffect(() => { refresh(); GetAlertEmailTo().then((v) => setEmailTo(v || '')).catch(() => {}); }, [refresh]);
+
+  // loadDraft opens a rule in the editor — always through here, so the raw
+  // callsigns text is re-seeded from whatever rule is now being edited.
+  const loadDraft = (r: Rule | null) => {
+    setDraft(r);
+    setCallsText((r?.calls ?? []).join('\n'));
+  };
+  const patch = (p: Partial<Rule>) => setDraft((d) => (d ? alerts.Rule.createFrom({ ...d, ...p }) : d));
+  const toggleIn = (key: keyof Rule, v: string) => setDraft((d) => {
+    if (!d) return d;
+    const cur = ((d as any)[key] as string[]) ?? [];
+    const has = cur.some((x) => x.toLowerCase() === v.toLowerCase());
+    const next = has ? cur.filter((x) => x.toLowerCase() !== v.toLowerCase()) : [...cur, v];
+    return alerts.Rule.createFrom({ ...d, [key]: next });
+  });
+
+  async function save() {
+    if (!draft) return;
+    if (!draft.name.trim()) { setErr(t('altm.giveName')); return; }
+    try { const saved = await SaveAlertRule(draft); await refresh(); loadDraft(saved as Rule); setErr(''); }
+    catch (e: any) { setErr(String(e?.message ?? e)); }
+  }
+  async function del() {
+    if (!draft) return;
+    if (!draft.id) { loadDraft(null); return; }
+    if (!window.confirm(t('altm.deleteConfirm', { name: draft.name }))) return;
+    try { await DeleteAlertRule(draft.id); loadDraft(null); await refresh(); }
+    catch (e: any) { setErr(String(e?.message ?? e)); }
+  }
+
+  return (
+    <Dialog open onOpenChange={(o) => { if (!o) onClose(); }}>
+      <DialogContent className="max-w-4xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2"><Bell className="size-4 text-primary" /> {t('altm.title')}</DialogTitle>
+          <DialogDescription>{t('altm.desc')}</DialogDescription>
+        </DialogHeader>
+
+        <div className="flex gap-3 min-h-0 px-5" style={{ height: '60vh' }}>
+          {/* Rule list */}
+          <div className="w-56 shrink-0 flex flex-col border border-border rounded-md">
+            <div className="flex items-center gap-1 px-2 py-1.5 border-b border-border/60">
+              <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground flex-1">{t('altm.rules')}</span>
+              <Button variant="ghost" size="sm" className="h-6 px-1.5" onClick={() => { loadDraft(emptyRule()); setTab('def'); }}><Plus className="size-3.5" /></Button>
+            </div>
+            <div className="flex-1 overflow-y-auto p-1">
+              {rules.length === 0 && <div className="text-[11px] text-muted-foreground px-2 py-4 text-center">{t('altm.noRules')}</div>}
+              {rules.map((r) => (
+                <button key={r.id} onClick={() => { loadDraft(alerts.Rule.createFrom(r)); setTab('def'); }}
+                  className={cn('w-full text-left px-2 py-1.5 rounded text-xs flex items-center gap-1.5',
+                    draft?.id === r.id ? 'bg-accent text-accent-foreground font-semibold' : 'hover:bg-muted/60')}>
+                  <span className={cn('size-1.5 rounded-full shrink-0', r.enabled ? 'bg-success' : 'bg-muted-foreground/40')} />
+                  <span className="truncate flex-1">{r.name}</span>
+                  {r.sound && <Volume2 className="size-3 text-muted-foreground shrink-0" />}
+                  {r.email && <Mail className="size-3 text-muted-foreground shrink-0" />}
+                </button>
+              ))}
+            </div>
+            <div className="px-2 py-1.5 border-t border-border/60">
+              <Label className="text-[10px] text-muted-foreground">{t('altm.emailTo')}</Label>
+              <Input className="h-7 text-xs mt-0.5" placeholder="[email protected]" value={emailTo}
+                onChange={(e) => setEmailTo(e.target.value)}
+                onBlur={() => SetAlertEmailTo(emailTo).catch(() => {})} />
+            </div>
+          </div>
+
+          {/* Editor */}
+          <div className="flex-1 min-w-0 border border-border rounded-md flex flex-col">
+            {!draft ? (
+              <div className="flex-1 flex items-center justify-center text-sm text-muted-foreground">{t('altm.selectOrCreate')}</div>
+            ) : (
+              <Tabs value={tab} onValueChange={setTab} className="flex flex-col flex-1 min-h-0">
+                <div className="flex items-center gap-2 px-2 pt-2">
+                  <TabsList>
+                    <TabsTrigger value="def">{t('altm.tabDef')}</TabsTrigger>
+                    <TabsTrigger value="call">{t('altm.tabCall')}</TabsTrigger>
+                    <TabsTrigger value="bm">{t('altm.tabBandMode')}</TabsTrigger>
+                    <TabsTrigger value="orig">{t('altm.tabOrigin')}</TabsTrigger>
+                  </TabsList>
+                </div>
+
+                <div className="flex-1 min-h-0 overflow-y-auto p-3">
+                  <TabsContent value="def" className="mt-0 space-y-3">
+                    <div>
+                      <Label className="text-xs">{t('altm.ruleName')}</Label>
+                      <Input value={draft.name} onChange={(e) => patch({ name: e.target.value })} />
+                    </div>
+                    <label className="flex items-center gap-2 text-sm cursor-pointer">
+                      <Checkbox checked={draft.enabled} onCheckedChange={(c) => patch({ enabled: !!c })} /> {t('altm.alertEnabled')}
+                    </label>
+                    <div className="flex items-center gap-2">
+                      <Label className="text-xs w-40 shrink-0">{t('altm.againAfter')}</Label>
+                      <Input type="number" className="h-8 w-24" value={draft.again_after_min}
+                        onChange={(e) => patch({ again_after_min: parseInt(e.target.value) || 0 })} />
+                      <span className="text-[11px] text-muted-foreground">{t('altm.againHint')}</span>
+                    </div>
+                    <div className="border-t border-border/60 pt-3 space-y-2">
+                      <Label className="text-xs font-semibold">{t('altm.actions')}</Label>
+                      <div className="flex gap-4">
+                        <label className="flex items-center gap-1.5 text-sm cursor-pointer"><Checkbox checked={draft.visual} onCheckedChange={(c) => patch({ visual: !!c })} /><Eye className="size-3.5" /> {t('altm.visual')}</label>
+                        <label className="flex items-center gap-1.5 text-sm cursor-pointer"><Checkbox checked={draft.sound} onCheckedChange={(c) => patch({ sound: !!c })} /><Volume2 className="size-3.5" /> {t('altm.sound')}</label>
+                        <label className="flex items-center gap-1.5 text-sm cursor-pointer"><Checkbox checked={draft.email} onCheckedChange={(c) => patch({ email: !!c })} /><Mail className="size-3.5" /> {t('altm.email')}</label>
+                      </div>
+                    </div>
+                    <label className="flex items-center gap-2 text-sm cursor-pointer border-t border-border/60 pt-3">
+                      <Checkbox checked={draft.skip_worked} onCheckedChange={(c) => patch({ skip_worked: !!c })} /> {t('altm.skipWorked')}
+                    </label>
+                  </TabsContent>
+
+                  <TabsContent value="call" className="mt-0 grid grid-cols-2 gap-3">
+                    <div className="space-y-1">
+                      <Label className="text-xs">{t('altm.callsigns')}</Label>
+                      <textarea className="w-full h-52 rounded-md border border-border bg-background p-2 text-xs font-mono resize-none"
+                        placeholder={'DL1ABC\nIW3*\n*/P'}
+                        value={callsText}
+                        onChange={(e) => {
+                          setCallsText(e.target.value);
+                          patch({ calls: e.target.value.split('\n').map((x) => x.trim()).filter(Boolean) });
+                        }} />
+                    </div>
+                    <div className="space-y-1">
+                      <Label className="text-xs">{t('altm.countries')}</Label>
+                      <MultiCheck options={countries} selected={draft.countries ?? []} onToggle={(v) => toggleIn('countries', v)} searchable />
+                    </div>
+                    <div className="space-y-1 col-span-2">
+                      <Label className="text-xs">{t('altm.continents')}</Label>
+                      <div className="flex gap-3 flex-wrap">
+                        {CONTINENTS.map((c) => (
+                          <label key={c} className="flex items-center gap-1.5 text-xs cursor-pointer">
+                            <Checkbox checked={(draft.continents ?? []).includes(c)} onCheckedChange={() => toggleIn('continents', c)} /> {c}
+                          </label>
+                        ))}
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="bm" className="mt-0 grid grid-cols-2 gap-3">
+                    <div className="space-y-1">
+                      <Label className="text-xs">{t('altm.bands')}</Label>
+                      <MultiCheck options={bands} selected={draft.bands ?? []} onToggle={(v) => toggleIn('bands', v)} />
+                    </div>
+                    <div className="space-y-1">
+                      <Label className="text-xs">{t('altm.modes')}</Label>
+                      <MultiCheck options={modes} selected={draft.modes ?? []} onToggle={(v) => toggleIn('modes', v)} />
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="orig" className="mt-0 grid grid-cols-2 gap-3">
+                    <div className="space-y-1">
+                      <Label className="text-xs">{t('altm.spotterCall')}</Label>
+                      <Input className="font-mono" placeholder={t('altm.spotterCallPh')} value={draft.spotter_call ?? ''}
+                        onChange={(e) => patch({ spotter_call: e.target.value })} />
+                      <Label className="text-xs mt-2 block">{t('altm.spotterContinents')}</Label>
+                      <div className="flex gap-3 flex-wrap">
+                        {CONTINENTS.map((c) => (
+                          <label key={c} className="flex items-center gap-1.5 text-xs cursor-pointer">
+                            <Checkbox checked={(draft.spotter_continents ?? []).includes(c)} onCheckedChange={() => toggleIn('spotter_continents', c)} /> {c}
+                          </label>
+                        ))}
+                      </div>
+                    </div>
+                    <div className="space-y-1">
+                      <Label className="text-xs">{t('altm.spotterCountries')}</Label>
+                      <MultiCheck options={countries} selected={draft.spotter_countries ?? []} onToggle={(v) => toggleIn('spotter_countries', v)} searchable />
+                    </div>
+                  </TabsContent>
+                </div>
+
+                {/* Editor actions */}
+                <div className="flex items-center gap-2 px-3 py-2 border-t border-border/60">
+                  {err && <span className="text-[11px] text-danger flex-1 truncate">{err}</span>}
+                  <div className="flex-1" />
+                  <Button variant="ghost" size="sm" className="text-danger" onClick={del}><Trash2 className="size-3.5" /> {t('altm.delete')}</Button>
+                  <Button size="sm" onClick={save}>{t('altm.saveRule')}</Button>
+                </div>
+              </Tabs>
+            )}
+          </div>
+        </div>
+
+        <div className="flex justify-end px-5 pb-4">
+          <Button variant="outline" size="sm" onClick={onClose}><X className="size-3.5" /> {t('altm.close')}</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/AmpCard.tsx

@@ -0,0 +1,238 @@
+import { useRef, useState } from 'react';
+import { Flame, ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { MeterBar } from '@/components/MeterBar';
+import { AmpOperate, AmpPower, AmpPowerLevel, AmpFanMode, FlexAmpOperate } from '../../wailsjs/go/main/App';
+
+// AmpCard renders the amplifier card exactly like the one in the FlexRadio panel,
+// so Station Control (and anywhere else that needs it) shows the SAME card instead
+// of a stripped-down variant. It handles all three amp families:
+//   • SPE Expert / ACOM — driven by OpsLog's own serial/TCP link (amp.spe/amp.acom)
+//   • PowerGenius XL     — OPERATE + meters come from the Flex (which reports the
+//                          amp), fan mode from the direct GSCP link (amp.pgxl)
+// Controls use the multi-amp API (AmpOperate/AmpPower/… by amp id) so several amps
+// can each get their own card.
+
+function Card({ icon: Icon, title, accent, children, ckey }: { icon: any; title: string; accent?: string; children: React.ReactNode; ckey?: string }) {
+  // Collapsible with persisted state — same behaviour as the FlexRadio panel's Card.
+  const storeKey = 'opslog.cardOpen.' + (ckey || title);
+  const [open, setOpen] = useState(() => localStorage.getItem(storeKey) !== '0');
+  const toggle = () => setOpen((o) => { const n = !o; localStorage.setItem(storeKey, n ? '1' : '0'); return n; });
+  return (
+    <div className="rounded-xl border border-border bg-card shadow-sm overflow-hidden">
+      <button type="button" onClick={toggle}
+        className={cn('w-full flex items-center gap-2 px-3 py-2 bg-muted/30 hover:bg-muted/50 transition-colors text-left', open && 'border-b border-border/60')}>
+        <Icon className="size-4" style={{ color: accent ?? 'var(--primary)' }} />
+        <span className="text-xs font-bold uppercase tracking-wider text-foreground/80">{title}</span>
+        <ChevronDown className={cn('ml-auto size-4 text-muted-foreground transition-transform', !open && '-rotate-90')} />
+      </button>
+      {open && <div className="p-3 space-y-3">{children}</div>}
+    </div>
+  );
+}
+
+// speMaxW / powerLevelLabel — same helpers the Flex panel uses.
+function speMaxW(model?: string): number {
+  const m = (model || '').toUpperCase();
+  if (m.includes('20K') || m.includes('2K')) return 2000;
+  if (m.includes('15K')) return 1500;
+  return 1300;
+}
+function powerLevelLabel(pl?: string): string {
+  switch ((pl || '').trim().toUpperCase()) {
+    case 'L': return 'Low';
+    case 'M': return 'Mid';
+    case 'H': return 'High';
+    default: return pl || '';
+  }
+}
+
+type Amp = { id: string; name: string; type?: string; spe?: any; acom?: any; pgxl?: any };
+
+export function AmpCard({ amp, flex, t }: { amp: Amp; flex: any; t: (k: string, v?: any) => string }) {
+  // Peak-hold so the jittery VITA-49 meters read steadily (own ref per card).
+  // One second: the same window as the docked widget, so the two never show
+  // different figures for the same amplifier, and neither trails the end of a
+  // transmission long enough to look like lag.
+  const peak = useRef<Record<string, { v: number; t: number }>>({});
+  const peakHold = (key: string, val: number) => {
+    const now = Date.now();
+    const p = peak.current[key];
+    if (!p || val >= p.v || now - p.t > 1000) { peak.current[key] = { v: val, t: now }; return val; }
+    return p.v;
+  };
+
+  const isSPE = !!amp.spe;
+  const isACOM = !!amp.acom;
+
+  if (isSPE) {
+    const spe = amp.spe;
+    return (
+      <Card icon={Flame} ckey="amplifier" title={`${t('flxp.amplifier')} · ${amp.name || `SPE${spe.model ? ' ' + spe.model : ''}`}`} accent="#ea580c">
+        <div className="flex items-center gap-3 flex-wrap">
+          <button type="button" disabled={!spe.connected}
+            onClick={() => AmpOperate(amp.id, !spe.operate).catch(() => {})}
+            className={cn('px-4 py-2 rounded-lg text-sm font-extrabold tracking-wide border-2 transition-all disabled:opacity-30',
+              spe.operate ? 'bg-warning text-warning-foreground border-warning shadow-[0_0_14px] shadow-warning/50' : 'bg-card text-warning border-warning hover:bg-warning-muted')}>
+            {spe.operate ? 'OPERATE' : 'STANDBY'}
+          </button>
+          {/* Power ON pulses RTS then DTR — it must stay clickable while the amp
+              is off (no status = not "connected"), and serial only. */}
+          <div className="inline-flex rounded-lg overflow-hidden border-2 border-success/70">
+            <button type="button" disabled={!(spe.connected || spe.transport === 'serial')}
+              onClick={() => AmpPower(amp.id, true).catch(() => {})}
+              title={spe.transport === 'serial' ? 'Power on (RTS then DTR pulse)' : 'Power-on needs the serial RTS/DTR lines — not available over a network bridge'}
+              className="px-3 py-2 text-sm font-bold bg-card text-success hover:bg-success/15 disabled:opacity-30">ON</button>
+            <button type="button" disabled={!spe.connected}
+              onClick={() => AmpPower(amp.id, false).catch(() => {})}
+              className="px-3 py-2 text-sm font-bold bg-card text-danger border-l-2 border-success/70 hover:bg-danger/15 disabled:opacity-30">OFF</button>
+          </div>
+          <div className="inline-flex rounded-lg overflow-hidden border border-border">
+            {(['L', 'M', 'H'] as const).map((lvl, i) => {
+              const active = (spe.power_level || '').trim().toUpperCase() === lvl;
+              return (
+                <button key={lvl} type="button" disabled={!spe.connected}
+                  onClick={() => AmpPowerLevel(amp.id, lvl).catch(() => {})}
+                  className={cn('px-3 py-2 text-sm font-bold disabled:opacity-30', i > 0 && 'border-l border-border',
+                    active ? 'bg-primary text-primary-foreground' : 'bg-card text-muted-foreground hover:bg-muted')}>
+                  {powerLevelLabel(lvl)}
+                </button>
+              );
+            })}
+          </div>
+          <span className={cn('inline-flex items-center gap-1.5 text-sm', spe.connected ? 'text-muted-foreground' : 'text-danger')}>
+            <span className={cn('size-2 rounded-full', spe.connected ? 'bg-success' : 'bg-danger')} />
+            {spe.connected ? (spe.tx ? 'TX' : 'RX') : t('flxp.speOffline')}
+          </span>
+          {spe.connected && (
+            <span className="text-sm font-mono text-muted-foreground tabular-nums">
+              {spe.band ? `${spe.band} · ` : ''}{spe.output_w}W · SWR {Number(spe.swr_ant ?? 0).toFixed(1)} · {spe.temp_c}°C · {powerLevelLabel(spe.power_level)}
+            </span>
+          )}
+          <div className="flex-1" />
+          {(spe.warnings || spe.alarms) && (
+            <span className="px-2 py-1 rounded bg-danger-muted text-danger-muted-foreground text-xs font-bold">⚠ {spe.warnings} {spe.alarms}</span>
+          )}
+        </div>
+        {spe.connected && (
+          <MeterBar label={t('flxp.outputPower')} value={Number(spe.output_w) || 0} unit="W"
+            lo={0} hi={speMaxW(spe.model)}
+            display={`${Number(spe.output_w) || 0} W`}
+            segColor={(f) => (f > 0.9 ? '#dc2626' : f > 0.75 ? '#f59e0b' : '#ea580c')} />
+        )}
+      </Card>
+    );
+  }
+
+  if (isACOM) {
+    const acom = amp.acom;
+    return (
+      <Card icon={Flame} ckey="amplifier" title={`${t('flxp.amplifier')} · ${amp.name || `ACOM${acom.model ? ' ' + acom.model : ''}`}`} accent="#ea580c">
+        <div className="flex items-center gap-3 flex-wrap">
+          <button type="button" disabled={!acom.connected}
+            onClick={() => AmpOperate(amp.id, !acom.operate).catch(() => {})}
+            className={cn('px-4 py-2 rounded-lg text-sm font-extrabold tracking-wide border-2 transition-all disabled:opacity-30',
+              acom.operate ? 'bg-warning text-warning-foreground border-warning shadow-[0_0_14px] shadow-warning/50' : 'bg-card text-warning border-warning hover:bg-warning-muted')}>
+            {acom.operate ? 'OPERATE' : 'STANDBY'}
+          </button>
+          <div className="inline-flex rounded-lg overflow-hidden border-2 border-success/70">
+            <button type="button" disabled={!(acom.port_open && acom.transport === 'serial')}
+              onClick={() => AmpPower(amp.id, true).catch(() => {})}
+              title={acom.transport === 'serial' ? 'Power on (DTR/RTS pulse — needs the power-on pins wired)' : 'Power-on needs the serial DTR/RTS lines — not available over a network bridge'}
+              className="px-3 py-2 text-sm font-bold bg-card text-success hover:bg-success/15 disabled:opacity-30">ON</button>
+            <button type="button" disabled={!acom.connected}
+              onClick={() => AmpPower(amp.id, false).catch(() => {})}
+              className="px-3 py-2 text-sm font-bold bg-card text-danger border-l-2 border-success/70 hover:bg-danger/15 disabled:opacity-30">OFF</button>
+          </div>
+          <span className={cn('inline-flex items-center gap-1.5 text-sm', acom.connected ? 'text-muted-foreground' : 'text-danger')}>
+            <span className={cn('size-2 rounded-full', acom.connected ? 'bg-success' : 'bg-danger')} />
+            {acom.connected ? acom.state : t('flxp.acomOffline')}
+          </span>
+          {acom.connected && (
+            <span className="text-sm font-mono text-muted-foreground tabular-nums">
+              {acom.band ? `${acom.band} · ` : ''}{acom.fwd_w}W · SWR {Number(acom.swr ?? 0).toFixed(1)} · {acom.temp_c}°C · Fan {acom.fan}
+            </span>
+          )}
+          <div className="flex-1" />
+          {acom.err_text && (
+            <span className="px-2 py-1 rounded bg-danger-muted text-danger-muted-foreground text-xs font-bold">⚠ {acom.err_text}</span>
+          )}
+        </div>
+        {acom.connected && (
+          <MeterBar label={t('flxp.outputPower')} value={Number(acom.fwd_w) || 0} unit="W"
+            lo={0} hi={Number(acom.max_w) || 800}
+            display={`${Number(acom.fwd_w) || 0} W`}
+            segColor={(f) => (f > 0.9 ? '#dc2626' : f > 0.75 ? '#f59e0b' : '#ea580c')} />
+        )}
+      </Card>
+    );
+  }
+
+  // PowerGenius XL — OPERATE + meters ride on the Flex; fan mode on the GSCP link.
+  const pg = amp.pgxl || {};
+  const viaFlex = !!flex?.amp_available;
+  const operate = viaFlex ? !!flex?.amp_operate : !!pg.operate;
+  const connected = !!pg.connected || viaFlex;
+  const fault = flex?.amp_fault;
+  return (
+    <Card icon={Flame} ckey="amplifier" title={`${t('flxp.amplifier')}${flex?.amp_model ? ' · ' + flex.amp_model : (pg.model ? ' · ' + pg.model : '')} · ${amp.name}`} accent="#ea580c">
+      <div className="flex items-center gap-3 flex-wrap">
+        <button type="button" disabled={!connected}
+          onClick={() => (viaFlex ? FlexAmpOperate(!operate) : AmpOperate(amp.id, !operate)).catch(() => {})}
+          className={cn('px-4 py-2 rounded-lg text-sm font-extrabold tracking-wide border-2 transition-all disabled:opacity-30',
+            operate ? 'bg-warning text-warning-foreground border-warning shadow-[0_0_14px] shadow-warning/50' : 'bg-card text-warning border-warning hover:bg-warning-muted')}>
+          {operate ? 'OPERATE' : 'STANDBY'}
+        </button>
+        {(pg.host || pg.connected) && (
+          <label className="flex items-center gap-1.5 text-xs" title={pg.connected ? t('flxp.pgConnected') : (pg.last_error || t('flxp.pgOffline'))}>
+            <span className={cn('size-1.5 rounded-full', pg.connected ? 'bg-success shadow-[0_0_6px_rgba(16,185,129,0.8)]' : 'bg-danger')} />
+            <span className="text-muted-foreground">{t('flxp.fan')}</span>
+            <select
+              disabled={!pg.connected}
+              value={(pg.fan_mode || 'CONTEST').toUpperCase()}
+              onChange={(e) => AmpFanMode(amp.id, e.target.value).catch(() => {})}
+              className="h-8 rounded-md border border-warning-border bg-card px-2 text-xs font-semibold text-warning outline-none focus:border-warning disabled:opacity-40"
+            >
+              <option value="STANDARD">{t('flxp.fanStandard')}</option>
+              <option value="CONTEST">{t('flxp.fanContest')}</option>
+              <option value="BROADCAST">{t('flxp.fanBroadcast')}</option>
+            </select>
+          </label>
+        )}
+        <div className="flex-1" />
+        {fault && fault !== 'NONE' && (
+          <span className="px-2 py-1 rounded bg-danger-muted text-danger-muted-foreground text-xs font-bold">{t('flxp.fault')}: {fault}</span>
+        )}
+      </div>
+      {/* Amplifier meters (FWD / ID / TEMP …) from the FlexRadio UDP stream. */}
+      {viaFlex && (() => {
+        const meters = (flex?.meters as any[]) || [];
+        const dbmToW = (d: number) => Math.pow(10, (d - 30) / 10);
+        const amps = meters.filter((m) => (m.src || '').toUpperCase().includes('AMP')
+          && !/^(RL|DRV)$/i.test((m.name || '').trim()));
+        if (amps.length === 0) return null;
+        // Power comes from the radio's meter stream and nothing else. The
+        // amplifier also reports a "peakfwd", and using it was a mistake twice
+        // over: it is a latched maximum that is never reset, and it survives in
+        // the last-known status after the amp disconnects — so it claimed
+        // 1350 W from an old transmission while the radio was putting out 10.
+        return (
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 mt-2 pt-2 border-t border-border/50">
+            {amps.map((m) => {
+              if (/fwd|pwr/i.test(m.name || '') && /dbm/i.test(m.unit || '')) {
+                return <MeterBar key={m.id} label={m.name || `AMP ${m.id}`} value={peakHold(`amp${m.id}`, dbmToW(m.value))} unit="W" lo={0} hi={2000} accent="#dc2626" />;
+              }
+              const acc = /temp|degc|degf/i.test(`${m.unit}${m.name}`) ? '#ea580c' : /volt/i.test(m.unit || '') ? '#2563eb' : '#16a34a';
+              let lo = m.lo, hi = m.hi;
+              if (/amp/i.test(m.unit || '') || /^ID$|current/i.test(m.name || '')) {
+                lo = 0;
+                hi = m.hi >= 25 ? m.hi : 25;
+              }
+              return <MeterBar key={m.id} label={m.name || `AMP ${m.id}`} value={peakHold(`amp${m.id}`, m.value)} unit={m.unit} lo={lo} hi={hi} accent={acc} />;
+            })}
+          </div>
+        );
+      })()}
+    </Card>
+  );
+}

frontend/src/components/AmpWidget.tsx

@@ -0,0 +1,288 @@
+import { useRef } from 'react';
+import { Flame, X, Power } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
+import { MeterBar } from '@/components/MeterBar';
+import { AmpOperate, AmpPower, AmpPowerLevel, AmpFanMode, FlexAmpOperate } from '../../wailsjs/go/main/App';
+
+// AmpWidget — the docked amplifier widget, the compact counterpart of AmpCard
+// (which is the full-size card shown in the FlexRadio panel and Station
+// Control). It covers all three families, since an operator running an SPE and
+// a PowerGenius wants one widget, not two:
+//   • SPE Expert  — OPERATE, power ON/OFF, L/M/H, live power / SWR / temp
+//   • ACOM        — OPERATE, power ON/OFF, live power / SWR / temp
+//   • PowerGenius — OPERATE and meters ride on the FlexRadio, fan mode on GSCP
+// With several amplifiers configured the caller passes a selection ("all" or an
+// amp id) chosen from the toolbar icon's dropdown.
+
+type Amp = { id: string; name: string; type?: string; spe?: any; acom?: any; pgxl?: any };
+
+// Full-scale watts for the output bar, from the model string.
+function maxW(model?: string, fallback = 1300): number {
+  const m = (model || '').toUpperCase();
+  if (m.includes('20K') || m.includes('2K')) return 2000;
+  if (m.includes('15K')) return 1500;
+  if (m.includes('13K')) return 1300;
+  return fallback;
+}
+
+function swrColour(swr?: number): string {
+  if (!swr || swr <= 0) return 'text-muted-foreground';
+  if (swr <= 1.5) return 'text-success';
+  if (swr <= 2.0) return 'text-warning';
+  return 'text-danger';
+}
+
+// PowerMeter — the output-power LED bar that closes each column, straight under
+// the controls (no filler above it: pushed to the bottom it left a band of dead
+// space in the middle of the column). Uses the app-wide MeterBar, compact size,
+// so it reads exactly like the meters on the rig panels.
+function PowerMeter({ label, watts, maxWatts }: { label: string; watts: number; maxWatts: number }) {
+  return (
+    <MeterBar compact label={label} value={watts} unit="W" lo={0} hi={maxWatts}
+      display={`${Math.round(watts)} W`}
+      segColor={(f) => (f > 0.9 ? '#dc2626' : f > 0.75 ? '#f59e0b' : '#ea580c')} />
+  );
+}
+
+// usePeakHold keeps the highest reading seen for a short window, so a reading
+// sampled between two syllables doesn't collapse the meter. `live` is the key
+// part: pass false the moment the carrier drops and the held value is thrown
+// away at once — holding it there made releasing the PTT look like a five
+// second lag, which read as the whole app being slow.
+function usePeakHold(windowMs = 1000) {
+  const peak = useRef<Record<string, { v: number; t: number }>>({});
+  return (key: string, val: number, live = true) => {
+    if (!live) { delete peak.current[key]; return val; }
+    const now = Date.now();
+    const p = peak.current[key];
+    if (!p || val >= p.v || now - p.t > windowMs) { peak.current[key] = { v: val, t: now }; return val; }
+    return p.v;
+  };
+}
+
+// Stat — one small labelled figure (power, SWR, temperature).
+function Stat({ label, value, className }: { label: string; value: string; className?: string }) {
+  return (
+    <div className="rounded-lg border border-border bg-card/70 px-1.5 py-1 text-center">
+      <div className="text-[9px] uppercase tracking-wider text-muted-foreground leading-tight">{label}</div>
+      <div className={cn('text-sm font-bold font-mono leading-tight', className ?? 'text-foreground/80')}>{value}</div>
+    </div>
+  );
+}
+
+// OperateButton — the STANDBY/OPERATE toggle, identical in behaviour across the
+// three families (only where the state comes from differs).
+function OperateButton({ operate, disabled, onClick, t }: {
+  operate: boolean; disabled: boolean; onClick: () => void; t: (k: string, v?: any) => string;
+}) {
+  return (
+    <button type="button" disabled={disabled} onClick={onClick}
+      className={cn('w-full inline-flex items-center justify-center gap-1.5 rounded-lg text-xs font-bold py-1.5 border transition-all active:scale-[0.98] disabled:opacity-40',
+        operate
+          ? 'bg-gradient-to-b from-amber-400 to-amber-600 text-white border-amber-300/60 shadow-[0_0_9px_rgba(245,158,11,0.45)]'
+          : 'bg-card text-muted-foreground border-border hover:bg-muted hover:text-foreground')}>
+      <Power className="size-3.5" />
+      {operate ? t('ampw.operate') : t('ampw.standby')}
+    </button>
+  );
+}
+
+// AmpBlock — one amplifier inside the widget.
+function AmpBlock({ amp, flex, showName, t }: {
+  amp: Amp; flex: any; showName: boolean; t: (k: string, v?: any) => string;
+}) {
+  const spe = amp.spe, acom = amp.acom;
+  const hold = usePeakHold();
+
+  if (spe || acom) {
+    const s = spe || acom;
+    // The amp reports zero watts on receive, so its TX flag clears the meter as
+    // soon as the operator lets go — and the radio's own flag, when we have one,
+    // gets there first (the amp is polled on its own slower cycle).
+    const txing = typeof flex?.transmitting === 'boolean' ? flex.transmitting : s.tx !== false;
+    const w = hold('w', Number(spe ? s.output_w : s.fwd_w) || 0, txing);
+    const swr = Number(spe ? s.swr_ant : s.swr) || 0;
+    const hi = spe ? maxW(s.model) : (Number(s.max_w) || 800);
+    // Power ON drives the remote-on control lines, so it stays available while
+    // the amplifier is off and reporting nothing — but only over a serial link.
+    const canPowerOn = spe ? (s.connected || s.transport === 'serial') : (s.port_open && s.transport === 'serial');
+    return (
+      <div className="h-full flex flex-col gap-1.5">
+        {showName && (
+          <div className="flex items-center gap-1.5">
+            <span className={cn('size-1.5 rounded-full shrink-0', s.connected ? 'bg-success shadow-[0_0_6px_rgba(16,185,129,0.8)]' : 'bg-danger')} />
+            <span className="text-[10px] font-bold uppercase tracking-wider truncate">{amp.name || (spe ? 'SPE' : 'ACOM')}</span>
+            {s.connected && s.band && <span className="ml-auto text-[9px] text-muted-foreground shrink-0">{s.band}</span>}
+          </div>
+        )}
+        <OperateButton operate={!!s.operate} disabled={!s.connected} t={t}
+          onClick={() => AmpOperate(amp.id, !s.operate).catch(() => {})} />
+        <div className="flex gap-1.5">
+          <button type="button" disabled={!canPowerOn}
+            onClick={() => AmpPower(amp.id, true).catch(() => {})}
+            className="flex-1 rounded-lg border border-success/60 bg-card py-1 text-[11px] font-bold text-success hover:bg-success/15 disabled:opacity-30">
+            {t('ampw.on')}
+          </button>
+          <button type="button" disabled={!s.connected}
+            onClick={() => AmpPower(amp.id, false).catch(() => {})}
+            className="flex-1 rounded-lg border border-danger/60 bg-card py-1 text-[11px] font-bold text-danger hover:bg-danger/15 disabled:opacity-30">
+            {t('ampw.off')}
+          </button>
+        </div>
+        {/* Output level — SPE only; an ACOM has no L/M/H over CAT. */}
+        {spe && (
+          <div className="grid grid-cols-3 gap-1">
+            {(['L', 'M', 'H'] as const).map((lvl) => {
+              const active = (s.power_level || '').trim().toUpperCase() === lvl;
+              return (
+                <button key={lvl} type="button" disabled={!s.connected}
+                  onClick={() => AmpPowerLevel(amp.id, lvl).catch(() => {})}
+                  className={cn('rounded-md border py-0.5 text-[10px] font-bold transition-colors disabled:opacity-30',
+                    active ? 'bg-primary text-primary-foreground border-primary' : 'bg-card text-muted-foreground border-border hover:bg-muted')}>
+                  {t(`ampw.lvl${lvl}`)}
+                </button>
+              );
+            })}
+          </div>
+        )}
+        {s.connected ? (
+          <div className="grid grid-cols-3 gap-1">
+            <Stat label={t('ampw.pwr')} value={`${Math.round(w)}`} />
+            <Stat label={t('ampw.swr')} value={swr > 0 ? swr.toFixed(1) : '—'} className={swrColour(swr)} />
+            <Stat label={t('ampw.temp')} value={`${Number(s.temp_c) || 0}°`} />
+          </div>
+        ) : (
+          <div className="text-[10px] text-center text-muted-foreground italic py-1">{t('ampw.offline')}</div>
+        )}
+        {(s.warnings || s.alarms || s.err_text) && (
+          <div className="rounded-md border border-danger-border bg-danger-muted text-danger-muted-foreground text-[9px] px-1.5 py-0.5 text-center break-words">
+            {s.err_text || `${s.warnings || ''} ${s.alarms || ''}`.trim()}
+          </div>
+        )}
+        <PowerMeter label={t('flxp.outputPower')} watts={s.connected ? w : 0} maxWatts={hi} />
+      </div>
+    );
+  }
+
+  // PowerGenius XL: OPERATE and the meters come from the radio when the Flex
+  // reports the amp; the fan mode rides on our own GSCP link.
+  const pg = amp.pgxl || {};
+  const viaFlex = !!flex?.amp_available;
+  const operate = viaFlex ? !!flex?.amp_operate : !!pg.operate;
+  const connected = !!pg.connected || viaFlex;
+  const fault = flex?.amp_fault;
+  const meters = ((flex?.meters as any[]) || []).filter((m) => (m.src || '').toUpperCase().includes('AMP'));
+  const meter = (re: RegExp) => meters.find((m) => re.test((m.name || '').trim()));
+  const dbmToW = (d: number) => Math.pow(10, (d - 30) / 10);
+  const fwd = meter(/^fwd|pwr/i);
+  const flexW = fwd ? (/dbm/i.test(fwd.unit || '') ? dbmToW(fwd.value) : fwd.value) : 0;
+  // Whether there is power is the RADIO's transmit flag: it flips the instant
+  // the PTT does, where the amplifier's own status poll answers a second and a
+  // half late and holds TRANSMIT past the carrier.
+  //
+  // How MUCH is the live reading — the radio's meter stream, or the amp's own
+  // forward figure when there is no Flex. NOT the amp's "peakfwd": that is a
+  // latched maximum which is never reset AND survives in the last-known status
+  // after the amp disconnects, so it reported 1350 W from an old transmission
+  // while the radio was putting out 10 W into a disconnected amplifier.
+  const txing = typeof flex?.transmitting === 'boolean'
+    ? flex.transmitting
+    : fwd ? flexW >= 1 : /TRANSMIT/i.test(pg.state || '');
+  // Prefer the radio's VITA meter stream when it is actually flowing (local or
+  // over a VPN) — it is fast and matches SmartSDR. Fall back to the amp's OWN
+  // link only when the radio isn't streaming its meters (a remote link without
+  // the VITA path), so the reading survives but is naturally slower.
+  const liveW = flexW > 0 ? flexW : (pg.connected ? Number(pg.fwd_w) || 0 : 0);
+  const fwdW = hold('fwd', txing ? liveW : 0, txing);
+  const id = meter(/^ID$|current/i);
+  // Live drain current, same source preference. peak_id latches like peak_w, so
+  // use the instantaneous 'id' and gate it on the radio's transmit flag.
+  const idA = id ? Number(id.value) : (txing ? Number(pg.id) || undefined : 0);
+  const temp = meter(/temp/i);
+  // VITA temp matches SmartSDR (the amp's direct link exposes a different sensor
+  // that can read ~10°C higher); fall back to the direct temp when no VITA.
+  const tempC = temp ? temp.value : (pg.temperature > 0 ? pg.temperature : undefined);
+
+  return (
+    <div className="h-full flex flex-col gap-1.5">
+      {showName && (
+        <div className="flex items-center gap-1.5">
+          <span className={cn('size-1.5 rounded-full shrink-0', connected ? 'bg-success shadow-[0_0_6px_rgba(16,185,129,0.8)]' : 'bg-danger')} />
+          <span className="text-[10px] font-bold uppercase tracking-wider truncate">{amp.name || 'PGXL'}</span>
+        </div>
+      )}
+      <OperateButton operate={operate} disabled={!connected} t={t}
+        onClick={() => (viaFlex ? FlexAmpOperate(!operate) : AmpOperate(amp.id, !operate)).catch(() => {})} />
+      {connected ? (
+        <div className="grid grid-cols-3 gap-1">
+          <Stat label={t('ampw.pwr')} value={`${Math.round(fwdW)}`} />
+          <Stat label={t('ampw.id')} value={idA != null ? idA.toFixed(1) : '—'} />
+          <Stat label={t('ampw.temp')} value={tempC != null ? `${Math.round(tempC)}°` : '—'} />
+        </div>
+      ) : (
+        <div className="text-[10px] text-center text-muted-foreground italic py-1">{t('ampw.offline')}</div>
+      )}
+      {(pg.host || pg.connected) && (
+        <select
+          disabled={!pg.connected}
+          value={(pg.fan_mode || 'CONTEST').toUpperCase()}
+          onChange={(e) => AmpFanMode(amp.id, e.target.value).catch(() => {})}
+          title={t('ampw.fan')}
+          className="w-full h-7 rounded-md border border-border bg-card px-1.5 text-[10px] font-semibold outline-none focus:border-warning disabled:opacity-40">
+          <option value="STANDARD">{t('flxp.fanStandard')}</option>
+          <option value="CONTEST">{t('flxp.fanContest')}</option>
+          <option value="BROADCAST">{t('flxp.fanBroadcast')}</option>
+        </select>
+      )}
+      {fault && fault !== 'NONE' && (
+        <div className="rounded-md border border-danger-border bg-danger-muted text-danger-muted-foreground text-[9px] px-1.5 py-0.5 text-center break-words">
+          {t('flxp.fault')}: {fault}
+        </div>
+      )}
+      <PowerMeter label={t('flxp.outputPower')} watts={connected ? fwdW : 0} maxWatts={2000} />
+    </div>
+  );
+}
+
+export function AmpWidget({ amps, flex, sel, onClose }: {
+  amps: Amp[];
+  flex: any;
+  sel: string; // "all" or an amp id
+  onClose: () => void;
+}) {
+  const { t } = useI18n();
+  // An id that no longer matches (the amp was removed in Settings) falls back to
+  // showing everything rather than an empty widget.
+  const shown = sel === 'all' ? amps : (amps.filter((a) => a.id === sel).length ? amps.filter((a) => a.id === sel) : amps);
+  const anyOnline = shown.some((a) => a.spe?.connected || a.acom?.connected || a.pgxl?.connected || flex?.amp_available);
+  const title = shown.length === 1 ? (shown[0].name || t('ampw.title')) : t('ampw.title');
+
+  return (
+    <div className="h-full flex flex-col rounded-xl border border-border bg-gradient-to-b from-card to-muted/30 shadow-sm overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border/60 bg-muted/40 shrink-0">
+        <Flame className={cn('size-4', anyOnline ? 'text-warning drop-shadow-[0_0_3px_rgba(245,158,11,0.55)]' : 'text-muted-foreground')} />
+        <span className="text-xs font-bold uppercase tracking-[0.18em] text-foreground/80 truncate">{title}</span>
+        <span className="flex-1" />
+        <button type="button" onClick={onClose} className="ml-1 text-muted-foreground hover:text-foreground transition-colors" title={t('ampw.close')}>
+          <X className="size-3.5" />
+        </button>
+      </div>
+      {/* Several amplifiers sit SIDE BY SIDE, one column each: stacked, two amps
+          made a widget taller than the dock row and both ended up half hidden. */}
+      <div className="flex-1 min-h-0 overflow-y-auto p-2.5">
+        {shown.length === 0 ? (
+          <div className="text-[11px] text-center text-muted-foreground italic py-2">{t('ampw.none')}</div>
+        ) : (
+          <div className="grid gap-2.5 h-full" style={{ gridTemplateColumns: `repeat(${shown.length}, minmax(0, 1fr))` }}>
+            {shown.map((a, i) => (
+              <div key={a.id} className={cn(i > 0 && 'pl-2.5 border-l border-border/50')}>
+                <AmpBlock amp={a} flex={flex} showName={shown.length > 1} t={t} />
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/AntGeniusPanel.tsx

@@ -0,0 +1,148 @@
+import { useState } from 'react';
+import { Antenna, X, ListFilter } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
+
+export type AGAntenna = { index: number; name: string; bands?: number };
+export type AGStatus = {
+  connected: boolean; host?: string; last_error?: string;
+  port_a: number; port_b: number; tx_a?: boolean; tx_b?: boolean;
+  antennas: AGAntenna[];
+};
+
+// AG_BAND_BITS maps a band name to its bit in the 4O3A Antenna Genius band
+// bitmask (standard HF+6m order, bit 0 = 160m). Used to show only the antennas
+// configured for the current band, like the native app. If the mapping ever
+// proves off on real hardware, the debug log (antgenius: antenna raw …) shows the
+// device's actual mask so it can be corrected.
+const AG_BAND_BITS: Record<string, number> = {
+  '160m': 1 << 0, '80m': 1 << 1, '60m': 0, '40m': 1 << 2, '30m': 1 << 3,
+  '20m': 1 << 4, '17m': 1 << 5, '15m': 1 << 6, '12m': 1 << 7, '10m': 1 << 8, '6m': 1 << 9,
+};
+
+function bandBit(band?: string): number {
+  if (!band) return 0;
+  return AG_BAND_BITS[band.trim().toLowerCase()] ?? 0;
+}
+
+// Format an antenna name: first letter uppercase, the rest lowercase
+// (e.g. "DX COMMANDER" → "Dx commander").
+function pretty(name: string): string {
+  const t = name.trim();
+  if (!t) return t;
+  return t.charAt(0).toUpperCase() + t.slice(1).toLowerCase();
+}
+
+// PortBtn is defined at MODULE scope on purpose. Defined inside AntGeniusPanel it
+// would be a new component *type* on every render, so React would unmount and
+// remount every port button each time the panel re-renders — harmless when that's
+// rare, but with the CW decoder running the parent re-renders many times a second
+// and the buttons were being torn down mid-click (mousedown and mouseup landing on
+// different element instances), so antenna changes silently did nothing.
+function PortBtn({ port, index, active, tx, onActivate, t }: {
+  port: 1 | 2; index: number; active: boolean; tx: boolean;
+  onActivate: (port: number, antenna: number) => void;
+  t: (key: string, vars?: Record<string, string | number>) => string;
+}) {
+  const letter = port === 1 ? 'A' : 'B';
+  const cls = tx
+    ? 'bg-gradient-to-b from-red-500 to-rose-600 text-white border-red-400/50 shadow-[0_0_10px_rgba(244,63,94,0.5)] animate-pulse'
+    : active
+      ? (port === 1
+        ? 'bg-gradient-to-b from-emerald-400 to-emerald-600 text-white border-emerald-300/60 shadow-[0_0_9px_rgba(16,185,129,0.45)]'
+        : 'bg-gradient-to-b from-sky-400 to-sky-600 text-white border-sky-300/60 shadow-[0_0_9px_rgba(14,165,233,0.45)]')
+      : 'bg-card text-muted-foreground border-border hover:bg-muted hover:text-foreground';
+  return (
+    <button
+      type="button"
+      onClick={() => onActivate(port, active ? 0 : index)}
+      title={active ? t('agp.portDeselect', { letter }) : t('agp.portSelect', { letter })}
+      className={cn('w-8 shrink-0 rounded-lg text-xs font-bold py-1.5 border transition-all active:scale-95', cls)}
+    >
+      {letter}
+    </button>
+  );
+}
+
+// AntGeniusPanel — antenna-switch widget for a 4O3A Antenna Genius, styled to
+// match the app's light theme with soft gradients + glows. Each antenna row has
+// a port-A button (left) and port-B button (right). Colours: green = selected on
+// port A, blue = selected on port B, red (pulsing) = that port is transmitting.
+// Clicking an already-selected port deselects it (port → None).
+export function AntGeniusPanel({ status, onActivate, onClose, band }: {
+  status: AGStatus;
+  onActivate: (port: number, antenna: number) => void; // antenna 0 = deselect
+  onClose: () => void;
+  band?: string; // current operating band (e.g. "20m") for the band filter
+}) {
+  const { t } = useI18n();
+  const allAntennas = status.antennas ?? [];
+
+  // Band filter (persisted, default ON): show only antennas whose band mask
+  // includes the current band — matching the native 4O3A app. Antennas with an
+  // unknown mask (0) always show, and if the filter would hide EVERYTHING (e.g. a
+  // band we can't map, or masks the device didn't send) we fall back to the full
+  // list so the panel is never mysteriously empty.
+  const [bandFilter, setBandFilter] = useState(() => localStorage.getItem('opslog.agBandFilter') !== '0');
+  const toggleBandFilter = () => setBandFilter((v) => { const n = !v; localStorage.setItem('opslog.agBandFilter', n ? '1' : '0'); return n; });
+  const bit = bandBit(band);
+  let list = allAntennas;
+  if (bandFilter && bit !== 0) {
+    const filtered = allAntennas.filter((a) => !a.bands || (a.bands & bit) !== 0);
+    if (filtered.length > 0) list = filtered;
+  }
+
+  return (
+    <div className="h-full flex flex-col rounded-xl border border-border bg-gradient-to-b from-card to-muted/30 shadow-sm overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border/60 bg-muted/40 shrink-0">
+        <Antenna className={cn('size-4', status.connected ? 'text-success drop-shadow-[0_0_3px_rgba(16,185,129,0.55)]' : 'text-muted-foreground')} />
+        <span className="text-xs font-bold uppercase tracking-[0.18em] text-foreground/80">Antenna Genius</span>
+        <span className="flex-1" />
+        <button type="button" onClick={toggleBandFilter}
+          title={bandFilter ? t('agp.filterOnHint', { band: band || '' }) : t('agp.filterOffHint')}
+          className={cn('transition-colors', bandFilter ? 'text-primary' : 'text-muted-foreground/50 hover:text-muted-foreground')}>
+          <ListFilter className="size-3.5" />
+        </button>
+        <span className="inline-flex items-center gap-1.5 text-[10px] font-mono uppercase tracking-wider">
+          <span className={cn('size-1.5 rounded-full', status.connected ? 'bg-success shadow-[0_0_6px_rgba(16,185,129,0.8)] animate-pulse' : 'bg-danger')} />
+          <span className={status.connected ? 'text-success' : 'text-danger'}>{status.connected ? t('agp.online') : t('agp.offline')}</span>
+        </span>
+        <button type="button" onClick={onClose} className="ml-1 text-muted-foreground hover:text-foreground transition-colors" title={t('agp.close')}>
+          <X className="size-3.5" />
+        </button>
+      </div>
+
+      <div className="flex-1 min-h-0 overflow-y-auto p-2 space-y-1.5">
+        {!status.connected ? (
+          <div className="text-center py-6 text-xs space-y-2">
+            <div className="text-muted-foreground italic animate-pulse">{t('agp.connecting')}</div>
+            {status.last_error && <div className="text-danger font-mono text-[10px] break-words px-2">{status.last_error}</div>}
+          </div>
+        ) : list.length === 0 ? (
+          <div className="text-muted-foreground italic text-center py-6 text-xs">{t('agp.noAntennas')}</div>
+        ) : list.map((a) => {
+          const aActive = status.port_a === a.index;
+          const bActive = status.port_b === a.index;
+          const aTx = aActive && !!status.tx_a;
+          const bTx = bActive && !!status.tx_b;
+          const nameCls = (aTx || bTx)
+            ? 'bg-gradient-to-r from-red-500 to-rose-600 text-white border-red-400/40 shadow-[0_0_11px_rgba(244,63,94,0.35)]'
+            : aActive
+              ? 'bg-gradient-to-r from-emerald-500 to-emerald-600 text-white border-emerald-400/40 shadow-[0_0_11px_rgba(16,185,129,0.3)]'
+              : bActive
+                ? 'bg-gradient-to-r from-sky-500 to-sky-600 text-white border-sky-400/40 shadow-[0_0_11px_rgba(14,165,233,0.3)]'
+                : 'bg-card/70 text-foreground/80 border-border hover:bg-muted/60';
+          return (
+            <div key={a.index} className="flex items-center gap-1.5">
+              <PortBtn port={1} index={a.index} active={aActive} tx={aTx} onActivate={onActivate} t={t} />
+              <div className={cn('flex-1 min-w-0 truncate text-center text-xs font-semibold tracking-wide rounded-lg px-2 py-1.5 border transition-all', nameCls)}>
+                {pretty(a.name)}
+              </div>
+              <PortBtn port={2} index={a.index} active={bActive} tx={bTx} onActivate={onActivate} t={t} />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

frontend/src/components/AwardRefPicker.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState } from 'react';
+import { X, Loader2 } from 'lucide-react';
+import { SearchAwardReferences } from '../../wailsjs/go/main/App';
+import { useI18n } from '@/lib/i18n';
+
+type Ref = { code: string; name: string; dxcc: number; group: string; subgrp: string };
+
+interface Props {
+  code: string;        // award code, e.g. "POTA"
+  label: string;       // display label
+  dxcc?: number;       // contacted-station DXCC; used when "this country" is on
+  countryOnly: boolean;
+  value: string;       // currently assigned reference
+  onChange: (ref: string) => void;
+}
+
+// AwardRefPicker — type-ahead search over an award's reference list (POTA parks,
+// SOTA summits, …), optionally restricted to the contacted DXCC. Picking a
+// result assigns it to the QSO.
+export function AwardRefPicker({ code, label, dxcc, countryOnly, value, onChange }: Props) {
+  const { t } = useI18n();
+  const [q, setQ] = useState('');
+  const [results, setResults] = useState<Ref[]>([]);
+  const [open, setOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const boxRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const t = window.setTimeout(async () => {
+      setBusy(true);
+      try {
+        const r = await SearchAwardReferences(code, q, countryOnly ? (dxcc ?? 0) : 0, 30);
+        setResults((r ?? []) as any);
+      } catch { setResults([]); }
+      finally { setBusy(false); }
+    }, 200);
+    return () => window.clearTimeout(t);
+  }, [q, open, code, dxcc, countryOnly]);
+
+  useEffect(() => {
+    if (!open) return;
+    const close = (e: MouseEvent) => { if (boxRef.current && !boxRef.current.contains(e.target as Node)) setOpen(false); };
+    window.addEventListener('mousedown', close);
+    return () => window.removeEventListener('mousedown', close);
+  }, [open]);
+
+  return (
+    <div className="grid grid-cols-[60px_1fr] items-center gap-2">
+      <label className="text-xs font-semibold text-muted-foreground">{label}</label>
+      <div className="relative" ref={boxRef}>
+        {value ? (
+          <div className="flex items-center gap-1.5 h-7 px-2 rounded-md border border-success-border bg-success-muted text-success-muted-foreground text-xs">
+            <span className="font-mono font-semibold">{value}</span>
+            <button className="ml-auto hover:text-success" onClick={() => onChange('')} title={t('awrp.remove')}><X className="size-3.5" /></button>
+          </div>
+        ) : (
+          <input
+            className="h-7 w-full rounded-md border border-input bg-background px-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+            placeholder={t('awrp.searchLabel', { label })}
+            value={q}
+            onFocus={() => setOpen(true)}
+            onChange={(e) => { setQ(e.target.value); setOpen(true); }}
+          />
+        )}
+        {open && !value && (
+          <div className="absolute z-50 mt-1 w-[320px] max-h-64 overflow-auto rounded-md border border-border bg-popover shadow-lg text-xs">
+            {busy && <div className="px-3 py-2 text-muted-foreground flex items-center gap-2"><Loader2 className="size-3 animate-spin" /> {t('awrp.searching')}</div>}
+            {!busy && results.length === 0 && (
+              <div className="px-3 py-2 text-muted-foreground">{countryOnly && dxcc ? t('awrp.noMatchDxcc') : t('awrp.noMatch')}</div>
+            )}
+            {results.map((r) => (
+              <button
+                key={r.code}
+                className="flex w-full items-baseline gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
+                onClick={() => { onChange(r.code); setOpen(false); setQ(''); }}
+              >
+                <span className="font-mono font-semibold shrink-0">{r.code}</span>
+                <span className="text-muted-foreground truncate">{r.name}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/AwardRefSelector.tsx

@@ -0,0 +1,361 @@
+import { useEffect, useMemo, useState } from 'react';
+import { X, Plus, Loader2 } from 'lucide-react';
+import { SearchAwardReferences, GetAwardDefs, GetAwardReferenceMeta } from '../../wailsjs/go/main/App';
+import {
+  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
+} from '@/components/ui/select';
+import { useI18n } from '@/lib/i18n';
+
+type AwardRef = { code: string; name: string; dxcc: number; group: string; subgrp: string };
+type AwardDef = { code: string; name: string; field?: string; dxcc_filter?: number[] | null; dynamic?: boolean };
+type Meta = { code: string; count: number; can_update: boolean };
+
+// Fields auto-derived from structured QSO data — their awards (DXCC/WAZ/WAS/…)
+// are computed, never manually picked, so they don't belong in this picker.
+// Fields purely derived from the callsign / cty.dat — their awards are computed,
+// never picked. NB: 'state' and 'cnty' are NOT here — they're operator-settable
+// QSO fields driving predefined-list awards (WAS/RAC/WAJA/JCC), so they ARE
+// pickable (a lookup rarely fills the JA prefecture or VE province).
+const COMPUTED_FIELDS = new Set(['dxcc', 'cqz', 'ituz', 'prefix', 'callsign', 'cont', 'country', 'grid', 'grid4']);
+
+// If DXCC-filtered auto-results exceed this, require the user to type instead.
+const AUTO_SHOW_MAX = 100;
+
+interface Props {
+  dxcc?: number;
+  // Semicolon-delimited "AWARD@REF" entries, e.g. "POTA@FR-11553;IOTA@EU-064"
+  value: string;
+  onChange: (v: string) => void;
+  // Current QSO field values (state, cnty, …). When a predefined award reads one
+  // of these and it's already filled (e.g. VE9CF → state NB), the award counts
+  // automatically — we surface that so the operator needn't pick it by hand.
+  fieldValues?: Record<string, string>;
+  // Height of the selector. Default is a fixed 210px (the QSO editor modal);
+  // the live entry panel passes "flex-1 min-h-0" so it fills the available
+  // space instead of overflowing and forcing a scrollbar.
+  heightClass?: string;
+}
+
+export function AwardRefSelector({ dxcc, value, onChange, fieldValues, heightClass = 'h-[210px]' }: Props) {
+  const { t } = useI18n();
+  const [defs, setDefs] = useState<AwardDef[]>([]);
+  const [metas, setMetas] = useState<Record<string, Meta>>({});
+  const [awardCode, setAwardCode] = useState('POTA');
+
+  const [q, setQ] = useState('');
+  // autoResults: loaded immediately when award/dxcc changes (empty query, DXCC-filtered).
+  // Shown when q is short and count ≤ AUTO_SHOW_MAX (e.g. 5 IOTA refs for France).
+  const [autoResults, setAutoResults] = useState<AwardRef[]>([]);
+  // searchResults: loaded when user types 2+ chars.
+  const [searchResults, setSearchResults] = useState<AwardRef[]>([]);
+  const [busy, setBusy] = useState(false);
+  const [selectedRef, setSelectedRef] = useState<AwardRef | null>(null);
+  const [selectedEntry, setSelectedEntry] = useState<string | null>(null);
+
+  const entries = value ? value.split(';').filter(Boolean) : [];
+
+  // When the reference set is cleared (a QSO was logged or the call was reset),
+  // also blank the picker's own state — the search box and the highlighted /
+  // selected reference — so the Awards tab starts fresh for the next contact.
+  useEffect(() => {
+    if (!value) {
+      setSelectedEntry(null);
+      setSelectedRef(null);
+      setQ('');
+      setSearchResults([]);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    Promise.all([GetAwardDefs(), GetAwardReferenceMeta()])
+      .then(([d, m]) => {
+        setDefs((d ?? []) as any);
+        setMetas(Object.fromEntries(((m ?? []) as Meta[]).map((x) => [String(x.code).toUpperCase(), x])));
+      })
+      .catch(() => {});
+  }, []);
+
+  // An award is offered when its DXCC scope matches the contacted entity (or it
+  // has no scope) AND it has references to pick from (a loaded list, an online
+  // list, or dynamic references like POTA). This is why DDFM (scope 227) shows
+  // for a French call but not for others.
+  const awards = useMemo(() => {
+    return defs.filter((d) => {
+      // Computed awards (field = dxcc/cqz/…) are derived automatically.
+      if (COMPUTED_FIELDS.has(String(d.field ?? '').toLowerCase())) return false;
+      const scope = d.dxcc_filter ?? [];
+      if (scope.length > 0 && (!dxcc || !scope.includes(dxcc))) return false;
+      // Offer the award even when its reference list isn't loaded yet: a custom
+      // award (e.g. "Worked All Provinces of China") has no built-in list, so
+      // requiring one would make it impossible to assign references by hand. The
+      // operator can pick from a loaded list when present, or add an unlisted
+      // reference (the right-hand panel). Dynamic / list-backed awards behave as
+      // before — they just always pass here now.
+      return true;
+    }).map((d) => ({ code: d.code, name: d.name, field: String(d.field ?? '').toLowerCase() }))
+      .sort((a, b) => a.code.localeCompare(b.code));
+  }, [defs, metas, dxcc]);
+
+  // Keep the selected award valid as the offered list changes with the call.
+  useEffect(() => {
+    if (awards.length === 0) return;
+    if (!awards.find((a) => a.code === awardCode)) setAwardCode(awards[0].code);
+  }, [awards, awardCode]);
+
+  // Is the selected award a giant dynamic list (POTA/SOTA/IOTA)? Those carry a
+  // per-reference DXCC so we filter by entity; predefined lists (WAS/RAC/WAJA)
+  // are small and their refs may lack a per-ref DXCC, so we load them whole.
+  const isDynamic = useMemo(
+    () => !!defs.find((d) => d.code === awardCode)?.dynamic,
+    [defs, awardCode],
+  );
+  // For dynamic lists, restrict to the contacted entity; otherwise load all.
+  const refDxcc = isDynamic ? (dxcc ?? 0) : 0;
+
+  // The field the selected award reads (state / cnty / note / …).
+  const selField = useMemo(
+    () => String(defs.find((d) => d.code === awardCode)?.field ?? '').toLowerCase(),
+    [defs, awardCode],
+  );
+
+  // Search helper with a DXCC fallback: try the entity-scoped query first, but
+  // if it finds nothing AND we were filtering by DXCC, retry unfiltered. This
+  // fixes awards whose references carry no per-ref DXCC (e.g. SOTA summits,
+  // where the country is in the summit prefix F/AB-001, not a DXCC column) —
+  // otherwise filtering by entity returns zero. POTA/IOTA keep entity filtering
+  // when their refs do match.
+  const searchRefs = async (query: string, limit: number): Promise<AwardRef[]> => {
+    let r = (await SearchAwardReferences(awardCode, query, refDxcc, limit)) as any as AwardRef[];
+    if ((!r || r.length === 0) && refDxcc > 0) {
+      r = (await SearchAwardReferences(awardCode, query, 0, limit)) as any as AwardRef[];
+    }
+    return r ?? [];
+  };
+
+  // Auto-load refs on award/dxcc change with empty query. Fetches AUTO_SHOW_MAX+1
+  // so we can distinguish "all results shown" from "too many to list".
+  useEffect(() => {
+    setAutoResults([]);
+    // Dynamic lists need an entity to scope to; predefined lists load regardless.
+    if (isDynamic && !dxcc) return;
+    searchRefs('', AUTO_SHOW_MAX + 1)
+      .then((r) => setAutoResults(r))
+      .catch(() => {});
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [awardCode, dxcc, isDynamic, refDxcc]);
+
+  // Typed search (2+ chars).
+  useEffect(() => {
+    if (q.length < 2) { setSearchResults([]); return; }
+    const t = window.setTimeout(async () => {
+      setBusy(true);
+      try {
+        setSearchResults(await searchRefs(q, 50));
+      } catch { setSearchResults([]); }
+      finally { setBusy(false); }
+    }, 200);
+    return () => window.clearTimeout(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [awardCode, q, refDxcc]);
+
+  const tooManyAuto = autoResults.length > AUTO_SHOW_MAX;
+  // When q is empty/short: show auto-results (if ≤ AUTO_SHOW_MAX); when typing: show search results.
+  const results: AwardRef[] = q.length >= 2 ? searchResults : (tooManyAuto ? [] : autoResults);
+
+  // Auto-match: when the selected award reads a QSO field that's already filled
+  // (e.g. RAC reads `state`, and the call resolved to state NB), find the matching
+  // reference so the operator can add it in one click — the award already counts
+  // it from the field, but this makes it explicit and confirms it.
+  const autoMatch = useMemo(() => {
+    if (!selField || !fieldValues) return null;
+    const v = String(fieldValues[selField] ?? '').trim().toUpperCase();
+    if (!v) return null;
+    const pool = (autoResults.length ? autoResults : searchResults);
+    const m = pool.find((r) => r.code.toUpperCase() === v);
+    return m ? { code: m.code, name: m.name } : null;
+  }, [selField, fieldValues, autoResults, searchResults]);
+  const autoAlreadyAdded = autoMatch ? entries.includes(`${awardCode}@${autoMatch.code}`) : false;
+
+  function addRef(ref: AwardRef) {
+    const entry = `${awardCode}@${ref.code}`;
+    if (!entries.includes(entry)) {
+      onChange([...entries, entry].join(';'));
+    }
+  }
+
+  function removeEntry(entry: string) {
+    const next = entries.filter((e) => e !== entry).join(';');
+    onChange(next);
+    if (selectedEntry === entry) setSelectedEntry(null);
+  }
+
+  return (
+    <div className={`flex gap-2 ${heightClass}`}>
+      {/* Left panel */}
+      <div className="flex flex-col gap-1.5 flex-1 min-w-0">
+
+        <Select
+          value={awardCode}
+          onValueChange={(v) => { setAwardCode(v); setSelectedRef(null); setQ(''); setSearchResults([]); }}
+        >
+          <SelectTrigger className="h-7 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {awards.map((a) => (
+              <SelectItem key={a.code} value={a.code}>{a.code}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        {/* Group / Sub from selected ref */}
+        <div className="grid grid-cols-[38px_1fr] items-center gap-x-1.5 gap-y-0.5 text-xs">
+          <span className="text-muted-foreground text-[11px]">{t('awrs.group')}</span>
+          <span className="font-mono truncate text-[11px]">{selectedRef?.group || '—'}</span>
+          <span className="text-muted-foreground text-[11px]">{t('awrs.sub')}</span>
+          <span className="font-mono truncate text-[11px]">{selectedRef?.subgrp || '—'}</span>
+        </div>
+
+        {/* Selected ref chip (nothing shown until one is picked) */}
+        {selectedRef && (
+          <div className="flex items-center gap-1.5 h-6 px-2 rounded border border-success-border bg-success-muted text-success-muted-foreground text-xs min-w-0">
+            <span className="font-mono font-semibold shrink-0">{selectedRef.code}</span>
+            <span className="truncate text-[10px] text-success-muted-foreground">{selectedRef.name}</span>
+            <button className="ml-auto shrink-0 hover:text-success" onClick={() => setSelectedRef(null)}>
+              <X className="size-3" />
+            </button>
+          </div>
+        )}
+
+        {/* Add — references are always scoped to the contacted DXCC */}
+        <div className="flex items-center gap-2">
+          <button
+            disabled={!selectedRef}
+            onClick={() => selectedRef && addRef(selectedRef)}
+            className="flex items-center gap-1 h-6 px-2 text-xs rounded border border-border hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            <Plus className="size-3" />{t('awrs.add')}
+          </button>
+          <span className="text-[11px] text-muted-foreground">
+            {dxcc ? `DXCC #${dxcc}` : t('awrs.enterCallsignFirst')}
+          </span>
+        </div>
+
+        <div className="h-px bg-border shrink-0" />
+
+        {/* Added refs list */}
+        <div className="flex-1 overflow-auto space-y-0.5 min-h-0">
+          {entries.length === 0 ? (
+            <p className="text-[11px] text-muted-foreground italic py-0.5">{t('awrs.noRefsAdded')}</p>
+          ) : (
+            entries.map((entry) => (
+              <div
+                key={entry}
+                className={`flex items-center gap-1.5 px-2 py-0.5 rounded text-xs cursor-pointer select-none ${
+                  selectedEntry === entry ? 'bg-accent' : 'hover:bg-accent/50'
+                }`}
+                onClick={() => setSelectedEntry(selectedEntry === entry ? null : entry)}
+              >
+                <span className="font-mono font-semibold flex-1 truncate">{entry}</span>
+                <button
+                  className="shrink-0 hover:text-destructive"
+                  onClick={(e) => { e.stopPropagation(); removeEntry(entry); }}
+                >
+                  <X className="size-3" />
+                </button>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Right panel: reference search */}
+      <div className="w-[172px] shrink-0 flex flex-col gap-1.5 border-l pl-2 min-w-0">
+        <span className="text-xs font-semibold">{t('awrs.references')}</span>
+        {/* Auto-match from the QSO field (e.g. State NB → RAC@NB). */}
+        {autoMatch && (
+          <button
+            type="button"
+            disabled={autoAlreadyAdded}
+            onClick={() => addRef({ code: autoMatch.code, name: autoMatch.name } as AwardRef)}
+            className={`text-left rounded border px-1.5 py-1 text-[11px] leading-tight ${
+              autoAlreadyAdded
+                ? 'border-success-border bg-success-muted text-success-muted-foreground cursor-default'
+                : 'border-success-border bg-success-muted/60 text-success-muted-foreground hover:bg-success-muted'
+            }`}
+            title={t('awrs.autoMatchTitle', { field: selField.toUpperCase(), code: autoMatch.code })}
+          >
+            {autoAlreadyAdded ? '✓ ' : '+ '}
+            <span className="font-mono font-semibold">{autoMatch.code}</span>
+            <span className="text-success-muted-foreground"> {t('awrs.fromField', { field: selField })}</span>
+            {!autoAlreadyAdded && <span className="block text-[10px] text-success-muted-foreground/80">{t('awrs.autoClickToAdd')}</span>}
+          </button>
+        )}
+        <input
+          className="h-6 w-full rounded border border-input bg-background px-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+          placeholder={t('awrs.search')}
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+        />
+        {/* Add an UNLISTED reference: type a new code (e.g. a brand-new POTA park
+            not yet in the list) and add it directly. */}
+        {q.trim().length >= 2 && !results.some((r) => r.code.toUpperCase() === q.trim().toUpperCase()) && (
+          <button
+            type="button"
+            onClick={() => { addRef({ code: q.trim().toUpperCase(), name: '' } as AwardRef); setQ(''); }}
+            className="text-left rounded border border-dashed border-primary/50 px-1.5 py-1 text-[11px] text-primary hover:bg-primary/10"
+            title={t('awrs.addUnlistedTitle')}
+          >
+            {t('awrs.addPrefix')} <span className="font-mono font-semibold">{q.trim().toUpperCase()}</span>
+            <span className="text-[10px] text-muted-foreground"> {t('awrs.unlisted')}</span>
+          </button>
+        )}
+        <div className="flex-1 overflow-auto border rounded-md text-xs min-h-0">
+          {busy && (
+            <div className="flex items-center gap-1.5 px-2 py-1.5 text-muted-foreground">
+              <Loader2 className="size-3 animate-spin" />{t('awrs.searching')}
+            </div>
+          )}
+          {/* Too many auto-results → require typed search */}
+          {!busy && q.length < 2 && tooManyAuto && (
+            <div className="px-2 py-1.5 text-[11px] text-muted-foreground leading-snug">
+              {t('awrs.typeToSearch')}
+            </div>
+          )}
+          {/* Empty short-query state: prompt for a callsign (dynamic lists) or
+              note the list is empty (predefined awards with no references). */}
+          {!busy && q.length < 2 && !tooManyAuto && autoResults.length === 0 && (
+            <div className="px-2 py-1.5 text-[11px] text-muted-foreground leading-snug">
+              {isDynamic && !dxcc
+                ? t('awrs.enterCallsignOrSearch')
+                : t('awrs.noRefsForEntity')}
+            </div>
+          )}
+          {/* Typed search, no results */}
+          {!busy && q.length >= 2 && results.length === 0 && (
+            <div className="px-2 py-2 text-[11px] text-muted-foreground leading-snug">
+              {t('awrs.noResults')}
+              <br />
+              <span className="text-[10px]">{t('awrs.downloadLists')}</span>
+            </div>
+          )}
+          {results.map((r) => (
+            <div
+              key={r.code}
+              className={`px-2 py-1 cursor-pointer border-b border-border/30 last:border-0 ${
+                selectedRef?.code === r.code ? 'bg-accent' : 'hover:bg-accent/50'
+              }`}
+              onClick={() => setSelectedRef(r)}
+              onDoubleClick={() => { setSelectedRef(r); addRef(r); }}
+            >
+              <div className="font-mono font-semibold leading-tight text-[11px]">{r.code}</div>
+              {r.name && (
+                <div className="text-[10px] text-muted-foreground leading-tight truncate">{r.name}</div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/AwardsPanel.tsx

@@ -0,0 +1,832 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Award as AwardIcon, RefreshCw, Loader2, Search, Pencil, X, Grid3x3, List, BarChart3, AlertTriangle, ChevronUp, ChevronDown } from 'lucide-react';
+import { GetAwardDefs, GetAward, AwardCellQSOs, GetAwardStats, AwardMissingQSOs, ListAwardReferences, AssignAwardRefToQSOs, RescanAwards, GetTrackedAwards } from '../../wailsjs/go/main/App';
+import { EventsOn } from '../../wailsjs/runtime/runtime';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+import { AwardEditor } from '@/components/AwardEditor';
+import { useI18n } from '@/lib/i18n';
+import { writeUiPref } from '@/lib/uiPref';
+
+type BandCount = { band: string; worked: number; confirmed: number };
+type AwardRef = {
+  ref: string; name?: string; group?: string; subgrp?: string;
+  worked: boolean; confirmed: boolean; validated: boolean;
+  bands: string[]; confirmed_bands: string[]; validated_bands: string[];
+  // Mode CLASSES — "CW" | "PHONE" | "DIGI" — not ADIF modes.
+  modes?: string[]; confirmed_modes?: string[];
+};
+type AwardResult = {
+  code: string; name: string; dimension: string;
+  worked: number; confirmed: number; validated: number; total: number;
+  bands: BandCount[]; refs: AwardRef[];
+};
+
+type AwardStatRow = { label: string; cells: number[]; total: number; grand_total: number };
+type AwardStats = { code: string; bands: string[]; rows: AwardStatRow[] };
+
+// Fixed band columns for the matrix view (Log4OM-style).
+const GRID_BANDS = ['160m','80m','60m','40m','30m','20m','17m','15m','12m','10m','6m','2m','70cm'];
+
+// Per-band status for a reference, highest first.
+type CellStatus = 'validated' | 'confirmed' | 'worked' | 'none';
+function cellStatus(r: AwardRef, band: string): CellStatus {
+  if (r.validated_bands?.includes(band)) return 'validated';
+  if (r.confirmed_bands?.includes(band)) return 'confirmed';
+  if (r.bands?.includes(band)) return 'worked';
+  return 'none';
+}
+const CELL_STYLE: Record<CellStatus, string> = {
+  validated: 'bg-success text-success-foreground',
+  confirmed: 'bg-warning text-warning-foreground',
+  worked: 'bg-muted-foreground text-background',
+  none: '',
+};
+const CELL_LABEL: Record<CellStatus, string> = { validated: 'V', confirmed: 'C', worked: 'W', none: '' };
+
+function pct(n: number, total: number): number {
+  if (total <= 0) return 0;
+  return Math.min(100, Math.round((n / total) * 100));
+}
+
+// Two-segment progress: confirmed (solid green) over worked (light amber).
+function ProgressBar({ worked, confirmed, total }: { worked: number; confirmed: number; total: number }) {
+  if (total <= 0) return null;
+  return (
+    <div className="h-1.5 w-full rounded-full bg-muted overflow-hidden flex">
+      <div className="bg-success" style={{ width: `${pct(confirmed, total)}%` }} />
+      <div className="bg-warning/70" style={{ width: `${pct(worked - confirmed, total)}%` }} />
+    </div>
+  );
+}
+
+type AwardListItem = { code: string; name: string; valid?: boolean; bands?: string[]; emission?: string[] };
+
+export function AwardsPanel({ onEditQSO, onAwardsChanged }: { onEditQSO?: (id: number) => void; onAwardsChanged?: () => void } = {}) {
+  const { t } = useI18n();
+  const [awardList, setAwardList] = useState<AwardListItem[]>([]);
+  // Computed results are cached per award code — each award is scanned only the
+  // first time it's selected (or when explicitly rescanned).
+  // Keyed by "CODE|MODECLASS": the same award computed for CW and for all modes
+  // are different results, and caching them under one key showed the previous
+  // mode’s numbers after switching.
+  const [byCode, setByCode] = useState<Record<string, AwardResult>>({});
+  const [loading, setLoading] = useState(false);
+  const [err, setErr] = useState('');
+  const [selected, setSelected] = useState<string>('');
+  const [refSearch, setRefSearch] = useState('');
+  const [editing, setEditing] = useState(false);
+  const [view, setView] = useState<'grid' | 'list' | 'stats'>('grid');
+  const [refFilter, setRefFilter] = useState<'all' | 'worked' | 'notworked' | 'worked_notconf'>('all');
+  // Mode filter, stacked ON TOP of the status one. "Worked on CW but not
+  // confirmed" is two questions at once, and answering only one of them is what
+  // sends an operator to a spreadsheet.
+  const [modeFilter, setModeFilter] = useState<'all' | 'CW' | 'PHONE' | 'DIGI'>('all');
+  const [cell, setCell] = useState<{ ref: string; band: string; name?: string } | null>(null);
+  const [showMissing, setShowMissing] = useState(false);
+  const [stats, setStats] = useState<AwardStats | null>(null);
+  const [statsLoading, setStatsLoading] = useState(false);
+  // Bumped by Rescan to force the stats matrix to re-fetch (the selected award
+  // didn't change, but the backend snapshot did).
+  const [rescanTick, setRescanTick] = useState(0);
+
+  // Lazily fetch the statistics matrix when the Stats view is shown.
+  useEffect(() => {
+    if (view !== 'stats' || !selected) return;
+    setStatsLoading(true);
+    GetAwardStats(selected)
+      .then((s) => setStats(s as any))
+      .catch(() => setStats(null))
+      .finally(() => setStatsLoading(false));
+  }, [view, selected, rescanTick]);
+
+  // Rescan: drop the backend snapshot (so confirmations from a fresh LoTW/QRZ
+  // download are picked up) and the cached results, then recompute everything.
+  async function rescan() {
+    if (!selected) return;
+    setLoading(true);
+    try {
+      await RescanAwards();
+      setByCode({});
+      setRescanTick((t) => t + 1);
+      await compute(selected, true);
+    } catch (e: any) {
+      setErr(String(e?.message ?? e));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // Compute one award (cached). force=true bypasses the cache (Rescan).
+  async function compute(code: string, force = false) {
+    if (!code) return;
+    const key = `${code}|${modeFilter}`;
+    if (!force && byCode[key]) { setSelected(code); return; }
+    setSelected(code);
+    setLoading(true);
+    setErr('');
+    try {
+      const r = (await GetAward(code, modeFilter === 'all' ? '' : modeFilter)) as any as AwardResult;
+      setByCode((m) => ({ ...m, [key]: r }));
+    } catch (e: any) {
+      setErr(String(e?.message ?? e));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // Load the award list (no QSO scan), then compute only the first award. The
+  // list is narrowed to the awards the operator follows (Settings → Awards); an
+  // empty follow-set means "show them all" so the tab is never blank.
+  async function loadList() {
+    try {
+      const [defs, tracked] = await Promise.all([
+        GetAwardDefs().then((d) => (d ?? []) as any[]),
+        GetTrackedAwards().then((t) => (t ?? []) as string[]).catch(() => [] as string[]),
+      ]);
+      const follow = new Set(tracked);
+      let list: AwardListItem[] = defs
+        .map((d) => ({ code: d.code, name: d.name, valid: d.valid, bands: d.valid_bands ?? [], emission: d.emission ?? [] }))
+        .sort((a, b) => a.code.localeCompare(b.code));
+      if (follow.size > 0) list = list.filter((a) => follow.has(a.code));
+      setAwardList(list);
+      const first = list.find((a) => a.code === selected) ?? list[0];
+      if (first) compute(first.code);
+    } catch (e: any) {
+      setErr(String(e?.message ?? e));
+    }
+  }
+  useEffect(() => { loadList(); }, []);
+  // Re-filter when the operator changes their followed awards in Settings.
+  useEffect(() => {
+    const off = EventsOn('awards:tracked-changed', () => { loadList(); });
+    return () => { off(); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const current = byCode[`${selected}|${modeFilter}`];
+  // Recompute when the mode class changes: the bands, counts and confirmations
+  // all describe the selected mode, so they cannot be filtered client-side.
+  useEffect(() => { if (selected) compute(selected); /* eslint-disable-next-line react-hooks/exhaustive-deps */ }, [modeFilter]);
+
+  // Bands relevant to the selected award, used by BOTH the grid and the stats
+  // matrix so neither is padded with bands the award doesn't use. Rule: the
+  // award's explicit valid_bands if it has any (e.g. WAPC = 40/20/15/10m); else
+  // the bands the operator actually has contacts on (so DXCC, which has no band
+  // restriction, shows 160m–6m instead of empty VHF/UHF columns). Empty set =
+  // no basis yet → callers fall back to all bands.
+  const awardBands = useMemo(() => {
+    const vb = (awardList.find((a) => a.code === selected)?.bands ?? []).map((b) => b.toLowerCase());
+    if (vb.length > 0) return new Set(vb);
+    const worked = (current?.bands ?? [])
+      .filter((b) => (b.worked ?? 0) > 0)
+      .map((b) => String(b.band).toLowerCase());
+    return new Set(worked);
+  }, [awardList, selected, current]);
+
+  const gridBands = useMemo(() => {
+    if (awardBands.size === 0) return GRID_BANDS;
+    const filtered = GRID_BANDS.filter((b) => awardBands.has(b));
+    return filtered.length ? filtered : GRID_BANDS;
+  }, [awardBands]);
+
+  // Stats rows to show: drop the mode-category rows (CW / DIGITAL / PHONE) the
+  // award doesn't cover. The "ALL" rows (no suffix) always show; a category row
+  // shows only when the award has no emission restriction or lists that emission.
+  const statsRows = useMemo(() => {
+    if (!stats) return [];
+    const em = new Set((awardList.find((a) => a.code === selected)?.emission ?? []).map((e) => e.toUpperCase()));
+    if (em.size === 0) return stats.rows;
+    return stats.rows.filter((r) => {
+      const m = String(r.label).toUpperCase().match(/\b(CW|DIGITAL|PHONE)$/);
+      return !m || em.has(m[1]);
+    });
+  }, [stats, awardList, selected]);
+
+  // Indices into stats.bands to display (and to slice each row's cells by), same
+  // band basis as the grid.
+  const statsBandIdx = useMemo(() => {
+    if (!stats) return [] as number[];
+    const all = stats.bands.map((_, i) => i);
+    if (awardBands.size === 0) return all;
+    const idx = stats.bands
+      .map((b, i) => ({ b: b.toLowerCase(), i }))
+      .filter((x) => awardBands.has(x.b))
+      .map((x) => x.i);
+    return idx.length ? idx : all;
+  }, [stats, awardBands]);
+
+  // Sort order for the reference table. Reference is the default because that
+  // is how award lists are published and how an operator reads a paper list;
+  // description answers the other question — "have I worked anything in
+  // Alicante" — which reference order scatters across the whole table.
+  // Remembered through writeUiPref rather than localStorage, so the choice
+  // travels with a copied data/ folder like every other UI preference here.
+  const [refSort, setRefSort] = useState<'ref' | 'name' | 'group'>(
+    () => {
+      const v = localStorage.getItem('opslog.awardRefSort');
+      return v === 'name' || v === 'group' ? v : 'ref';
+    });
+  const [refSortDir, setRefSortDir] = useState<'asc' | 'desc'>(
+    () => (localStorage.getItem('opslog.awardRefSortDir') === 'desc' ? 'desc' : 'asc'));
+  const toggleRefSort = (k: 'ref' | 'name' | 'group') => {
+    if (k === refSort) {
+      const d = refSortDir === 'asc' ? 'desc' : 'asc';
+      setRefSortDir(d);
+      writeUiPref('opslog.awardRefSortDir', d);
+    } else {
+      setRefSort(k);
+      setRefSortDir('asc');
+      writeUiPref('opslog.awardRefSort', k);
+      writeUiPref('opslog.awardRefSortDir', 'asc');
+    }
+  };
+
+  const filteredRefs = useMemo(() => {
+    if (!current) return [];
+    const q = refSearch.trim().toUpperCase();
+    const rows = (current.refs ?? []).filter((r) => {
+      if (refFilter === 'worked' && !r.worked) return false;
+      if (refFilter === 'notworked' && r.worked) return false;
+      if (refFilter === 'worked_notconf' && !(r.worked && !r.confirmed)) return false;
+      if (modeFilter !== 'all' && refFilter !== 'notworked') {
+        // A reference never worked has no mode, so "not worked" plus a mode is
+        // a contradiction: the mode filter stands aside rather than emptying
+        // the list.
+        if (!(r.modes ?? []).includes(modeFilter)) return false;
+        // Not-confirmed must mean not confirmed ON THIS MODE. An entity worked
+        // on CW and confirmed on SSB is still a CW entity to chase, and the
+        // whole point of the filter is to find those.
+        if (refFilter === 'worked_notconf' && (r.confirmed_modes ?? []).includes(modeFilter)) return false;
+      }
+      if (q && !(r.ref.includes(q) || (r.name ?? '').toUpperCase().includes(q) || (r.group ?? '').toUpperCase().includes(q))) return false;
+      return true;
+    });
+    const dir = refSortDir === 'asc' ? 1 : -1;
+    return rows.sort((a, b) => {
+      if (refSort === 'name') {
+        // localeCompare, not a byte comparison: these lists are Spanish, French
+        // and Italian place names, where "Ávila" belongs beside "Avilés" rather
+        // than after "Zaragoza".
+        const c = (a.name ?? '').localeCompare(b.name ?? '', undefined, { sensitivity: 'base' });
+        if (c !== 0) return c * dir;
+        return a.ref.localeCompare(b.ref) * dir; // stable tie-break
+      }
+      if (refSort === 'group') {
+        // Prefix order (XE, YV, ZL…) — how a DX operator actually thinks about
+        // entities. Blank prefixes sink to the bottom regardless of direction,
+        // so an unresolved entity never heads the list.
+        const ag = a.group ?? '', bg = b.group ?? '';
+        if (!ag !== !bg) return ag ? -1 : 1;
+        const c = ag.localeCompare(bg, undefined, { sensitivity: 'base' });
+        if (c !== 0) return c * dir;
+        return a.ref.localeCompare(b.ref, undefined, { numeric: true }) * dir;
+      }
+      return a.ref.localeCompare(b.ref, undefined, { numeric: true }) * dir;
+    });
+  }, [current, refSearch, refFilter, modeFilter, refSort, refSortDir]);
+
+  // The group column earns its width only when the list actually carries one
+  // (DXCC prefixes, POTA locations); most custom lists have none. For DXCC the
+  // value IS the primary prefix, so it is labelled as such.
+  const hasGroup = useMemo(() => filteredRefs.some((r) => !!r.group), [filteredRefs]);
+  const groupColLabel = current && current.code.toUpperCase() === 'DXCC' ? t('awp.prefixCol') : t('awp.groupCol');
+
+  return (
+    <div className="flex h-full min-h-0">
+      {/* Award list */}
+      <div className="w-72 shrink-0 border-r border-border flex flex-col min-h-0">
+        <div className="flex items-center gap-2 px-3 py-2 border-b border-border/60">
+          <AwardIcon className="size-4 text-primary" />
+          <span className="text-sm font-semibold">{t('awp.awards')}</span>
+          <div className="flex-1" />
+          <Button variant="ghost" size="sm" className="h-7 px-2" onClick={() => setEditing(true)} title={t('awp.editAwards')}>
+            <Pencil className="size-3.5" />
+          </Button>
+          <Button variant="outline" size="sm" className="h-7 px-2" onClick={rescan} disabled={loading || !selected}
+            title={t('awp.rescanTitle')}>
+            {loading ? <Loader2 className="size-3.5 mr-1 animate-spin" /> : <RefreshCw className="size-3.5 mr-1" />}
+            {t('awp.rescan')}
+          </Button>
+        </div>
+        <AwardEditor open={editing} onClose={() => setEditing(false)} onSaved={() => { setByCode({}); loadList(); onAwardsChanged?.(); }} />
+        {/* Quick selector — scales when there are many awards. */}
+        {awardList.length > 0 && (
+          <div className="px-2 py-2 border-b border-border/40">
+            <Select value={selected} onValueChange={(code) => { setRefSearch(''); compute(code); }}>
+              <SelectTrigger className="h-8 text-xs"><SelectValue placeholder={t('awp.selectAward')} /></SelectTrigger>
+              <SelectContent className="max-h-80">
+                {awardList.map((a) => (
+                  <SelectItem key={a.code} value={a.code} className="text-xs">
+                    <span className="font-semibold">{a.code}</span>
+                    <span className="text-muted-foreground"> — {a.name}</span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+        <div className="flex-1 overflow-auto">
+          {err && <div className="p-3 text-xs text-destructive">{err}</div>}
+          {awardList.map((a) => {
+            const r = byCode[`${a.code}|${modeFilter}`];
+            return (
+              <button
+                key={a.code}
+                onClick={() => { setRefSearch(''); compute(a.code); }}
+                className={cn(
+                  'w-full text-left px-3 py-2 border-b border-border/40 hover:bg-accent/40 transition-colors',
+                  selected === a.code && 'bg-accent/60',
+                  a.valid === false && 'opacity-50',
+                )}
+              >
+                <div className="flex items-baseline justify-between gap-2">
+                  <span className="font-semibold text-sm">{a.code}</span>
+                  {r ? (
+                    <span className="text-[11px] font-mono text-muted-foreground">
+                      <span className="text-success">{r.confirmed}</span>
+                      /<span className="text-foreground">{r.worked}</span>
+                      {r.total > 0 && <span className="text-muted-foreground/70"> {t('awp.of')} {r.total}</span>}
+                    </span>
+                  ) : (
+                    <span className="text-[11px] font-mono text-muted-foreground/50">{selected === a.code && loading ? '…' : '—'}</span>
+                  )}
+                </div>
+                <div className="text-[11px] text-muted-foreground truncate mb-1">{a.name}</div>
+                {r && <ProgressBar worked={r.worked} confirmed={r.confirmed} total={r.total} />}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Detail */}
+      <div className="flex-1 flex flex-col min-h-0">
+        {!current ? (
+          <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">
+            {loading ? t('awp.computing') : t('awp.noData')}
+          </div>
+        ) : (
+          <>
+            <div className="px-4 py-3 border-b border-border/60">
+              <div className="flex items-baseline gap-2">
+                <h3 className="text-lg font-bold">{current.code}</h3>
+                <span className="text-sm text-muted-foreground">{current.name}</span>
+              </div>
+              <div className="mt-1 flex items-center gap-4 text-sm">
+                <span><span className="font-bold text-foreground">{current.worked}</span> <span className="text-muted-foreground">{t('awp.worked')}</span></span>
+                <span><span className="font-bold text-success">{current.confirmed}</span> <span className="text-muted-foreground">{t('awp.confirmed')}</span></span>
+                <span><span className="font-bold text-info">{current.validated}</span> <span className="text-muted-foreground">{t('awp.validated')}</span></span>
+                {current.total > 0 && (
+                  <span className="text-muted-foreground">{t('awp.ofConfirmed', { total: current.total, pct: pct(current.confirmed, current.total) })}</span>
+                )}
+              </div>
+              <div className="mt-2 max-w-md"><ProgressBar worked={current.worked} confirmed={current.confirmed} total={current.total} /></div>
+            </div>
+
+            {/* Band breakdown */}
+            {(current.bands ?? []).length > 0 && (
+              <div className="px-4 py-2 border-b border-border/60">
+                <div className="text-xs uppercase tracking-wider text-muted-foreground mb-1.5">{t('awp.byBand')}</div>
+                <div className="flex flex-wrap gap-1.5">
+                  {(current.bands ?? []).map((b) => (
+                    <div key={b.band} className="rounded-md border border-border bg-card px-2.5 py-1 text-sm">
+                      <span className="font-mono font-semibold">{b.band}</span>{' '}
+                      <span className="text-success font-mono">{b.confirmed}</span>
+                      <span className="text-muted-foreground font-mono">/{b.worked}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* References toolbar */}
+            <div className="flex items-center gap-2 px-4 py-2 flex-wrap">
+              <div className="relative">
+                <Search className="size-3.5 absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+                <Input className="h-8 w-56 pl-7 text-sm" placeholder={t('awp.filterReferences')} value={refSearch} onChange={(e) => setRefSearch(e.target.value)} />
+              </div>
+              <div className="flex items-center rounded-md border border-border overflow-hidden text-sm">
+                {([['all', t('awp.filterAll')], ['worked', t('awp.filterWkd')], ['notworked', t('awp.filterNotWkd')], ['worked_notconf', t('awp.filterWkdNotCfmd')]] as const).map(([k, label]) => (
+                  <button key={k} onClick={() => setRefFilter(k)}
+                    className={cn('px-2 py-1', refFilter === k ? 'bg-accent font-medium' : 'hover:bg-accent/50 text-muted-foreground')}>
+                    {label}
+                  </button>
+                ))}
+              </div>
+              <div className="flex items-center rounded-md border border-border overflow-hidden text-sm">
+                {([['all', t('awp.filterAll')], ['CW', 'CW'], ['PHONE', t('awp.modePhone')], ['DIGI', t('awp.modeDigital')]] as const).map(([k, label]) => (
+                  <button key={k} onClick={() => setModeFilter(k)}
+                    className={cn('px-2 py-1', modeFilter === k ? 'bg-accent font-medium' : 'hover:bg-accent/50 text-muted-foreground')}>
+                    {label}
+                  </button>
+                ))}
+              </div>
+              <span className="text-xs text-muted-foreground">{filteredRefs.length} {t('awp.refs')}</span>
+              <button
+                onClick={() => setShowMissing(true)}
+                className="flex items-center gap-1 text-xs text-warning-muted-foreground hover:text-warning border border-warning-border bg-warning-muted rounded px-2 py-1"
+                title={t('awp.missingRefsTitle')}
+              >
+                <AlertTriangle className="size-3" /> {t('awp.missingRefs')}
+              </button>
+              <div className="flex-1" />
+              {/* Legend */}
+              <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
+                <span className="inline-flex items-center gap-1"><span className="size-3 rounded-sm bg-muted-foreground" />W</span>
+                <span className="inline-flex items-center gap-1"><span className="size-3 rounded-sm bg-warning" />C</span>
+                <span className="inline-flex items-center gap-1"><span className="size-3 rounded-sm bg-success" />V</span>
+              </div>
+              <div className="flex items-center rounded-md border border-border overflow-hidden">
+                <button className={cn('px-1.5 py-1', view === 'grid' ? 'bg-accent' : 'hover:bg-accent/50')} title={t('awp.gridView')} onClick={() => setView('grid')}><Grid3x3 className="size-3.5" /></button>
+                <button className={cn('px-1.5 py-1', view === 'list' ? 'bg-accent' : 'hover:bg-accent/50')} title={t('awp.listView')} onClick={() => setView('list')}><List className="size-3.5" /></button>
+                <button className={cn('px-1.5 py-1', view === 'stats' ? 'bg-accent' : 'hover:bg-accent/50')} title={t('awp.statistics')} onClick={() => setView('stats')}><BarChart3 className="size-3.5" /></button>
+              </div>
+            </div>
+
+            {/* Statistics matrix: status × band, by mode category */}
+            {view === 'stats' ? (
+              <div className="flex-1 overflow-auto px-4 pb-3">
+                {statsLoading || !stats ? (
+                  <div className="p-4 text-xs text-muted-foreground flex items-center gap-2"><Loader2 className="size-3.5 animate-spin" /> {t('awp.computing')}</div>
+                ) : (
+                  <table className="text-sm border-separate" style={{ borderSpacing: 0 }}>
+                    <thead className="sticky top-0 z-10">
+                      <tr className="bg-card">
+                        <th className="sticky left-0 z-20 bg-card text-left py-1.5 pr-3 font-medium border-b border-border">{t('awp.statistic')}</th>
+                        {statsBandIdx.map((i) => <th key={stats.bands[i]} className="py-1.5 px-1 font-mono font-medium border-b border-border text-center w-11">{stats.bands[i]}</th>)}
+                        <th className="py-1.5 px-2 font-medium border-b border-border text-center">{t('awp.total')}</th>
+                        <th className="py-1.5 px-2 font-medium border-b border-border text-center">{t('awp.grand')}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {statsRows.map((row, i) => {
+                        const isGroupStart = row.label === 'WORKED' || /^WORKED /.test(row.label);
+                        return (
+                          <tr key={row.label} className={cn(i % 3 === 0 && i > 0 && 'border-t-2 border-border')}>
+                            <td className={cn('sticky left-0 bg-card py-1 pr-3 border-b border-border/30 whitespace-nowrap',
+                              isGroupStart ? 'font-semibold text-foreground' : 'text-muted-foreground')}>{row.label}</td>
+                            {statsBandIdx.map((i) => { const c = row.cells[i] ?? 0; return (
+                              <td key={i} className={cn('text-center py-1 border-b border-l border-border/20 font-mono', c > 0 ? 'bg-success/15 text-success' : 'text-muted-foreground/30')}>{c || ''}</td>
+                            ); })}
+                            <td className="text-center py-1 px-2 border-b border-l border-border font-mono font-semibold">{row.total || ''}</td>
+                            <td className="text-center py-1 px-2 border-b border-l border-border/20 font-mono text-muted-foreground">{row.grand_total || ''}</td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                )}
+              </div>
+            ) : view === 'grid' ? (
+              <div className="flex-1 overflow-auto px-4 pb-3">
+                <table className="text-sm border-separate" style={{ borderSpacing: 0 }}>
+                  <thead className="sticky top-0 z-10">
+                    <tr className="bg-card">
+                      <th className="sticky left-0 z-20 bg-card text-left py-1.5 pr-2 font-medium border-b border-border w-24">
+                        <button type="button" onClick={() => toggleRefSort('ref')} className="inline-flex items-center gap-1 hover:text-foreground">
+                          {t('awp.ref')}
+                          {refSort === 'ref' && (refSortDir === 'asc' ? <ChevronUp className="size-3" /> : <ChevronDown className="size-3" />)}
+                        </button>
+                      </th>
+                      {hasGroup && (
+                        <th className="text-left py-1.5 pr-3 font-medium border-b border-border w-20">
+                          <button type="button" onClick={() => toggleRefSort('group')} className="inline-flex items-center gap-1 hover:text-foreground">
+                            {groupColLabel}
+                            {refSort === 'group' && (refSortDir === 'asc' ? <ChevronUp className="size-3" /> : <ChevronDown className="size-3" />)}
+                          </button>
+                        </th>
+                      )}
+                      <th className="text-left py-1.5 pr-3 font-medium border-b border-border">
+                        <button type="button" onClick={() => toggleRefSort('name')} className="inline-flex items-center gap-1 hover:text-foreground">
+                          {t('awp.description')}
+                          {refSort === 'name' && (refSortDir === 'asc' ? <ChevronUp className="size-3" /> : <ChevronDown className="size-3" />)}
+                        </button>
+                      </th>
+                      {gridBands.map((b) => (
+                        <th key={b} className="py-1.5 px-1 font-mono font-medium border-b border-border text-center w-11">{b}</th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {filteredRefs.map((r) => (
+                      <tr key={r.ref} className={cn('hover:bg-accent/20', !r.worked && 'opacity-60')}>
+                        <td className="sticky left-0 bg-card hover:bg-accent/20 py-1 pr-2 font-mono font-semibold border-b border-border/30">{r.ref}</td>
+                        {hasGroup && (
+                          <td className="py-1 pr-3 font-mono font-semibold border-b border-border/30">{r.group}</td>
+                        )}
+                        <td className="py-1 pr-3 text-muted-foreground truncate max-w-[360px] border-b border-border/30">{r.name}</td>
+                        {gridBands.map((b) => {
+                          const s = cellStatus(r, b);
+                          return (
+                            <td key={b} className="border-b border-l border-border/30 p-0 text-center">
+                              {s === 'none' ? <span className="block w-11 h-7" /> : (
+                                <button
+                                  className={cn('block w-11 h-7 text-[11px] font-bold', CELL_STYLE[s], 'hover:brightness-110')}
+                                  title={t('awp.cellTitle', { ref: r.ref, band: b })}
+                                  onClick={() => setCell({ ref: r.ref, band: b, name: r.name })}
+                                >{CELL_LABEL[s]}</button>
+                              )}
+                            </td>
+                          );
+                        })}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ) : (
+              <div className="flex-1 overflow-auto px-4 pb-3">
+                <table className="w-full text-sm">
+                  <thead className="sticky top-0 bg-card">
+                    <tr className="text-left text-muted-foreground border-b border-border">
+                      <th className="py-1.5 pr-2 font-medium w-24">
+                        <button type="button" onClick={() => toggleRefSort('ref')} className="inline-flex items-center gap-1 hover:text-foreground">
+                          {t('awp.ref')}
+                          {refSort === 'ref' && (refSortDir === 'asc' ? <ChevronUp className="size-3" /> : <ChevronDown className="size-3" />)}
+                        </button>
+                      </th>
+                      <th className="py-1.5 pr-2 font-medium">
+                        <button type="button" onClick={() => toggleRefSort('name')} className="inline-flex items-center gap-1 hover:text-foreground">
+                          {t('awp.name')}
+                          {refSort === 'name' && (refSortDir === 'asc' ? <ChevronUp className="size-3" /> : <ChevronDown className="size-3" />)}
+                        </button>
+                      </th>
+                      <th className="py-1.5 pr-2 font-medium w-40">
+                        <button type="button" onClick={() => toggleRefSort('group')} className="inline-flex items-center gap-1 hover:text-foreground">
+                          {groupColLabel}
+                          {refSort === 'group' && (refSortDir === 'asc' ? <ChevronUp className="size-3" /> : <ChevronDown className="size-3" />)}
+                        </button>
+                      </th>
+                      <th className="py-1.5 pr-2 font-medium w-24">{t('awp.status')}</th>
+                      <th className="py-1.5 font-medium">{t('awp.bands')}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {filteredRefs.map((r) => (
+                      <tr key={r.ref} className={cn('border-b border-border/30', !r.worked && 'opacity-50')}>
+                        <td className="py-1 pr-2 font-mono font-semibold">{r.ref}</td>
+                        <td className="py-1 pr-2 text-muted-foreground truncate max-w-[340px]">{r.name}</td>
+                        <td className="py-1 pr-2 text-muted-foreground truncate max-w-[200px]">{r.group}</td>
+                        <td className="py-1 pr-2">
+                          {!r.worked ? <span className="text-muted-foreground/70">{t('awp.missing')}</span>
+                            : r.validated ? <span className="text-success">{t('awp.validated')}</span>
+                            : r.confirmed ? <span className="text-warning">{t('awp.confirmed')}</span>
+                            : <span className="text-muted-foreground">{t('awp.worked')}</span>}
+                        </td>
+                        <td className="py-1 font-mono text-muted-foreground">
+                          {r.bands.map((b) => (
+                            <span key={b} className={cn('mr-1', r.validated_bands.includes(b) ? 'text-success font-semibold' : r.confirmed_bands.includes(b) && 'text-warning font-semibold')}>{b}</span>
+                          ))}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {cell && current && (
+        <CellQSOModal code={current.code} cell={cell} modeClass={modeFilter === 'all' ? '' : modeFilter} onClose={() => setCell(null)} />
+      )}
+      {showMissing && current && (
+        <MissingQSOModal code={current.code} name={current.name} onClose={() => setShowMissing(false)} onEditQSO={onEditQSO} />
+      )}
+    </div>
+  );
+}
+
+// MissingQSOModal lists contacts within an award's scope that carry NO
+// reference — the silent gaps. Rows open the QSO editor so the operator can add
+// the missing reference (e.g. a department for DDFM).
+type MissingSortKey = 'qso_date' | 'callsign' | 'band' | 'mode' | 'country' | 'qth';
+
+function MissingQSOModal({ code, name, onClose, onEditQSO }: { code: string; name: string; onClose: () => void; onEditQSO?: (id: number) => void }) {
+  const { t } = useI18n();
+  const [qsos, setQsos] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [sel, setSel] = useState<Set<number>>(new Set());
+  const [sortKey, setSortKey] = useState<MissingSortKey>('callsign');
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
+  const [refs, setRefs] = useState<Array<{ code: string; name: string }>>([]);
+  const [assignRef, setAssignRef] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState('');
+
+  const load = () => {
+    setLoading(true);
+    setSel(new Set());
+    AwardMissingQSOs(code)
+      .then((r) => setQsos((r ?? []) as any))
+      .catch(() => setQsos([]))
+      .finally(() => setLoading(false));
+  };
+  useEffect(() => { load(); }, [code]);
+  // The award's reference list drives the "assign" dropdown (e.g. China provinces).
+  useEffect(() => {
+    ListAwardReferences(code)
+      .then((r) => setRefs(((r ?? []) as any[]).map((x) => ({ code: String(x.code).toUpperCase(), name: String(x.name ?? '') }))))
+      .catch(() => setRefs([]));
+  }, [code]);
+
+  const qthOf = (q: any) => String(q.qth || q.notes || '');
+  const sorted = useMemo(() => {
+    const dir = sortDir === 'asc' ? 1 : -1;
+    const val = (q: any): string => {
+      switch (sortKey) {
+        case 'qso_date': return String(q.qso_date ?? '');
+        case 'callsign': return String(q.callsign ?? '').toUpperCase();
+        case 'band': return String(q.band ?? '');
+        case 'mode': return String(q.mode ?? '');
+        case 'country': return String(q.country ?? '').toUpperCase();
+        case 'qth': return qthOf(q).toUpperCase();
+      }
+    };
+    return [...qsos].sort((a, b) => val(a).localeCompare(val(b)) * dir);
+  }, [qsos, sortKey, sortDir]);
+
+  const ids = useMemo(() => sorted.map((q) => q.id as number).filter(Boolean), [sorted]);
+  const allSelected = ids.length > 0 && ids.every((id) => sel.has(id));
+  const toggleAll = () => setSel(allSelected ? new Set() : new Set(ids));
+  const toggle = (id: number) => setSel((s) => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; });
+  const setSort = (k: MissingSortKey) => {
+    if (k === sortKey) setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+    else { setSortKey(k); setSortDir('asc'); }
+  };
+
+  async function applyAssign() {
+    if (!assignRef || sel.size === 0) return;
+    setBusy(true); setMsg('');
+    try {
+      const assignedIds = Array.from(sel);
+      const n = await AssignAwardRefToQSOs(code, assignRef, assignedIds);
+      // Optimistic: the assigned contacts now carry a reference, so drop them
+      // from the list locally instead of re-running the slow whole-log scan.
+      const done = new Set(assignedIds);
+      setQsos((list) => list.filter((q) => !done.has(q.id as number)));
+      setSel(new Set());
+      setMsg(t('awp.assignedMsg', { code, ref: assignRef, n }));
+    } catch (e: any) {
+      setMsg(String(e?.message ?? e));
+    } finally { setBusy(false); }
+  }
+
+  const stations = useMemo(() => new Set(qsos.map((q) => String(q.callsign || '').toUpperCase())).size, [qsos]);
+  const fmt = (s: any) => { const d = new Date(s); return isNaN(d.getTime()) ? '' : d.toISOString().slice(0, 16).replace('T', ' '); };
+
+  const SortTh = ({ k, label, className }: { k: MissingSortKey; label: string; className?: string }) => (
+    <th className={cn('py-1 pr-2 font-medium cursor-pointer select-none hover:text-foreground', className)} onClick={() => setSort(k)}>
+      <span className="inline-flex items-center gap-0.5">{label}
+        {sortKey === k && (sortDir === 'asc' ? <ChevronUp className="size-3" /> : <ChevronDown className="size-3" />)}
+      </span>
+    </th>
+  );
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black/40 grid place-items-center" onClick={onClose}>
+      <div className="bg-card border border-border rounded-lg shadow-xl w-[860px] max-h-[80vh] flex flex-col" onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center gap-2 px-4 py-2.5 border-b">
+          <AlertTriangle className="size-4 text-warning" />
+          <span className="font-semibold text-sm">{code} — {t('awp.contactsMissingRef')}</span>
+          {name && <span className="text-xs text-muted-foreground truncate">{name}</span>}
+          <div className="flex-1" />
+          <button onClick={load} disabled={loading}
+            className="flex items-center gap-1 text-[11px] border border-border rounded px-2 py-1 hover:bg-accent/50 disabled:opacity-50"
+            title={t('awp.recomputeTitle')}>
+            {loading ? <Loader2 className="size-3 animate-spin" /> : <RefreshCw className="size-3" />} {t('awp.refresh')}
+          </button>
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground"><X className="size-4" /></button>
+        </div>
+        <div className="px-4 py-2 text-[11px] text-muted-foreground border-b border-border/50">
+          {t('awp.missingScopeHelp')}{onEditQSO && ` ${t('awp.orClickRow')}`}
+        </div>
+
+        {/* Bulk-assign toolbar */}
+        <div className="flex items-center gap-2 px-4 py-2 border-b border-border/50 bg-muted/20">
+          <span className="text-xs text-muted-foreground">{t('awp.selectedArrow', { n: sel.size })}</span>
+          <Select value={assignRef} onValueChange={setAssignRef}>
+            <SelectTrigger className="h-7 w-64 text-xs"><SelectValue placeholder={t('awp.chooseReference')} /></SelectTrigger>
+            <SelectContent className="max-h-72">
+              {refs.map((r) => (
+                <SelectItem key={r.code} value={r.code}>
+                  <span className="font-mono font-semibold">{r.code}</span>{r.name ? <span className="text-muted-foreground"> · {r.name}</span> : ''}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Button size="sm" disabled={!assignRef || sel.size === 0 || busy} onClick={applyAssign}>
+            {busy ? <Loader2 className="size-3.5 animate-spin" /> : null} {t('awp.assignToSelected', { n: sel.size })}
+          </Button>
+          {msg && <span className="text-[11px] text-success">{msg}</span>}
+        </div>
+
+        <div className="flex-1 overflow-auto">
+          {loading ? (
+            <div className="p-4 text-xs text-muted-foreground flex items-center gap-2"><Loader2 className="size-3.5 animate-spin" /> {t('awp.scanning')}</div>
+          ) : qsos.length === 0 ? (
+            <div className="p-4 text-xs text-muted-foreground">
+              {t('awp.noGaps')}
+            </div>
+          ) : (
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-card text-left text-muted-foreground border-b border-border z-10">
+                <tr>
+                  <th className="py-1 px-3 w-8"><Checkbox checked={allSelected} onCheckedChange={toggleAll} /></th>
+                  <SortTh k="qso_date" label={t('awp.dateUtc')} className="pl-0" />
+                  <SortTh k="callsign" label={t('awp.callsign')} />
+                  <SortTh k="band" label={t('awp.band')} />
+                  <SortTh k="mode" label={t('awp.mode')} />
+                  <SortTh k="country" label={t('awp.country')} />
+                  <SortTh k="qth" label={t('awp.qthNote')} />
+                </tr>
+              </thead>
+              <tbody>
+                {sorted.map((q, i) => {
+                  const id = q.id as number;
+                  return (
+                    <tr key={id ?? i}
+                      className={cn('border-b border-border/30', sel.has(id) && 'bg-accent/30', onEditQSO && 'hover:bg-accent/40')}>
+                      <td className="py-1 px-3" onClick={(e) => e.stopPropagation()}>
+                        <Checkbox checked={sel.has(id)} onCheckedChange={() => toggle(id)} />
+                      </td>
+                      <td className={cn('py-1 font-mono', onEditQSO && 'cursor-pointer')} onClick={() => onEditQSO && id && onEditQSO(id)}>{fmt(q.qso_date)}</td>
+                      <td className={cn('py-1 pr-2 font-mono font-semibold', onEditQSO && 'cursor-pointer')} onClick={() => onEditQSO && id && onEditQSO(id)}>{q.callsign}</td>
+                      <td className="py-1 pr-2">{q.band}</td>
+                      <td className="py-1 pr-2">{q.mode}</td>
+                      <td className="py-1 pr-2 text-muted-foreground truncate max-w-[140px]">{q.country}</td>
+                      <td className="py-1 pr-3 text-muted-foreground truncate max-w-[260px]">{qthOf(q)}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          )}
+        </div>
+        <div className="px-4 py-2 border-t text-[11px] text-muted-foreground">
+          <span className="font-semibold text-foreground">{stations}</span> {t('awp.stations')} ·{' '}
+          {qsos.length} {t('awp.contactsWithoutRef')}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// CellQSOModal lists the QSOs behind one award-grid cell (reference × band).
+function CellQSOModal({ code, cell, modeClass, onClose }: { code: string; cell: { ref: string; band: string; name?: string }; modeClass: string; onClose: () => void }) {
+  const { t } = useI18n();
+  const [qsos, setQsos] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    setLoading(true);
+    AwardCellQSOs(code, cell.ref, cell.band, modeClass)
+      .then((r) => setQsos((r ?? []) as any))
+      .catch(() => setQsos([]))
+      .finally(() => setLoading(false));
+  }, [code, cell.ref, cell.band, modeClass]);
+
+  const fmt = (s: any) => { const d = new Date(s); return isNaN(d.getTime()) ? '' : d.toISOString().slice(0, 16).replace('T', ' '); };
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black/40 grid place-items-center" onClick={onClose}>
+      <div className="bg-card border border-border rounded-lg shadow-xl w-[640px] max-h-[80vh] flex flex-col" onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center gap-2 px-4 py-2.5 border-b">
+          <span className="font-semibold text-sm">{code} · <span className="font-mono">{cell.ref}</span> · {cell.band}</span>
+          {cell.name && <span className="text-xs text-muted-foreground truncate">{cell.name}</span>}
+          <div className="flex-1" />
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground"><X className="size-4" /></button>
+        </div>
+        <div className="flex-1 overflow-auto">
+          {loading ? (
+            <div className="p-4 text-xs text-muted-foreground flex items-center gap-2"><Loader2 className="size-3.5 animate-spin" /> {t('awp.loading')}</div>
+          ) : qsos.length === 0 ? (
+            <div className="p-4 text-xs text-muted-foreground">{t('awp.noQsos')}</div>
+          ) : (
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-card text-left text-muted-foreground border-b border-border">
+                <tr><th className="py-1 px-3 font-medium">{t('awp.dateUtc')}</th><th className="py-1 pr-2 font-medium">{t('awp.callsign')}</th><th className="py-1 pr-2 font-medium">{t('awp.band')}</th><th className="py-1 pr-2 font-medium">{t('awp.mode')}</th><th className="py-1 pr-3 font-medium">QSL</th></tr>
+              </thead>
+              <tbody>
+                {qsos.map((q, i) => (
+                  <tr key={q.id ?? i} className="border-b border-border/30">
+                    <td className="py-1 px-3 font-mono">{fmt(q.qso_date)}</td>
+                    <td className="py-1 pr-2 font-mono font-semibold">{q.callsign}</td>
+                    <td className="py-1 pr-2">{q.band}</td>
+                    <td className="py-1 pr-2">{q.mode}</td>
+                    <td className="py-1 pr-3 text-muted-foreground">{[q.lotw_rcvd === 'Y' && 'LoTW', q.qsl_rcvd === 'Y' && 'QSL', q.eqsl_rcvd === 'Y' && 'eQSL'].filter(Boolean).join(', ')}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+        <div className="px-4 py-2 border-t text-[11px] text-muted-foreground">{qsos.length} QSO{qsos.length > 1 ? 's' : ''}</div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/BandMap.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Minus, Plus, Crosshair, X } from 'lucide-react';
+import { Minus, Plus, Crosshair, X, PanelLeft, PanelRight } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { spotStatusKey, inferSpotMode } from '@/lib/spot';
+import { useI18n } from '@/lib/i18n';
+import { spotStatusKey, inferSpotMode, spotModeCategory } from '@/lib/spot';
+import { SPOT_MARKERS, activeMarkers } from '@/lib/spotMarkers';
 
 // BandMap — vertical spectrum panel inspired by Log4OM.
 // - Full band is always visible; zoom changes pixels-per-kHz, scroll
@@ -23,7 +25,40 @@ interface Spot {
   spotter?: string;
 }
 
-type SpotStatusEntry = { status: string; country?: string };
+// The FULL status entry, not the two fields the map used to declare. The extra
+// markers were already arriving in this object — the local type simply never
+// mentioned them, so they could not be drawn.
+type SpotStatusEntry = {
+  status?: string;
+  country?: string;
+  worked_call?: boolean;
+  new_county?: boolean;
+  new_pota?: boolean;
+  new_pfx?: boolean;
+};
+
+// The extra markers are ORTHOGONAL to the entity status: a spot can be a worked
+// entity AND a new park. The cluster list stacks them as separate badges instead
+// of letting one replace another, so the map stacks them too — as segments of
+// the pill's left accent bar, which until now only repeated the pill's own
+// colour and carried no information of its own.
+//
+// Their colours come from lib/spotMarkers, shared with the cluster list: the
+// same fact must not be violet in one panel and green in the next.
+// The map shows three of the four. A new PREFIX is left to the cluster list: the
+// pill is 22 px tall, and a fourth segment turns the strip into a colour code
+// nobody can read at a glance. Add it here the day the strip earns more room.
+const BMP_MARKERS = SPOT_MARKERS.filter((m) => m.key !== 'new_pfx');
+const markersFor = (e: SpotStatusEntry | undefined) =>
+  activeMarkers(e).filter((m) => m.key !== 'new_pfx');
+
+// The legend spells the markers out; the cluster list's badges are abbreviated
+// ("NEW CTY") because they sit in a narrow cell, and there is room here.
+const BMP_MARKER_LABEL: Record<string, string> = {
+  new_pota: 'bmp.legendNewPota',
+  new_county: 'bmp.legendNewCounty',
+  worked_call: 'bmp.legendWorkedCall',
+};
 
 interface Props {
   band: string;
@@ -32,6 +67,18 @@ interface Props {
   currentFreqHz: number;
   onSpotClick: (s: Spot) => void;
   onClose?: () => void;
+  side?: 'left' | 'right';
+  onToggleSide?: () => void;
+  // hideDigital drops every DATA-class (FT8/FT4/JS8/…) spot so the crowded
+  // watering holes don't hog the map. fitToBand overrides zoom so the whole
+  // band edge-to-edge fits the visible height (no scrolling). Both are driven
+  // globally from the band-map tab toolbar.
+  hideDigital?: boolean;
+  fitToBand?: boolean;
+  // keyNav enables Ctrl+↑ / Ctrl+↓ to hop to the next spot above / below the rig
+  // frequency (and tune to it). Only the docked Main-view band map sets this, so
+  // the multi-band Band Map tab (several maps) doesn't fight over the shortcut.
+  keyNav?: boolean;
 }
 
 const BAND_RANGES: Record<string, [number, number]> = {
@@ -51,25 +98,47 @@ const BAND_RANGES: Record<string, [number, number]> = {
   '70cm': [430000, 440000],
 };
 
+// Sub-band shading: CW / digital / phone.
+//
+// These are IDENTITIES (which mode the segment is for), not states, so they take
+// categorical hues — never the status tokens. They used to use success / info /
+// warning, which collided head-on with the spot pills drawn ON TOP of them: amber
+// is "new band" in this very component's legend, so the whole SSB portion read as
+// a giant "new band" wash. Status colours are reserved for status.
+//
+// All three are drawn from the COOL end of the categorical order and laid down at
+// low opacity, so the band plan stays background context while the warm spot pills
+// keep the foreground to themselves.
+// Checked with the palette validator in BOTH themes. Violet was the first pick
+// for CW and failed on the dark steps — violet and blue land 1.9 ΔE apart for a
+// protan reader there, i.e. the same colour. Magenta clears every check on both
+// surfaces (worst adjacent pair 13.0 light / 15.9 dark).
+const SEG_CW = 'var(--chart-7)';    // magenta
+const SEG_DIGI = 'var(--chart-1)';  // blue
+const SEG_PHONE = 'var(--chart-2)'; // aqua
+// A band-plan wash is CONTEXT, not data: it must stay under the spot pills that
+// are read on top of it.
+const SEG_OPACITY = 0.13;
+
 const SEGMENT_COLORS: Record<string, [number, number, string][]> = {
-  '160m': [[1800, 1838, 'fill-emerald-50'], [1838, 1840, 'fill-sky-50'],  [1840, 2000, 'fill-amber-50']],
-  '80m':  [[3500, 3580, 'fill-emerald-50'], [3580, 3600, 'fill-sky-50'],  [3600, 3800, 'fill-amber-50']],
-  '60m':  [[5350, 5450, 'fill-amber-50']],
-  '40m':  [[7000, 7040, 'fill-emerald-50'], [7040, 7100, 'fill-sky-50'],  [7100, 7200, 'fill-amber-50']],
-  '30m':  [[10100, 10130, 'fill-emerald-50'], [10130, 10150, 'fill-sky-50']],
-  '20m':  [[14000, 14070, 'fill-emerald-50'], [14070, 14100, 'fill-sky-50'], [14100, 14350, 'fill-amber-50']],
-  '17m':  [[18068, 18095, 'fill-emerald-50'], [18095, 18110, 'fill-sky-50'], [18110, 18168, 'fill-amber-50']],
-  '15m':  [[21000, 21070, 'fill-emerald-50'], [21070, 21150, 'fill-sky-50'], [21150, 21450, 'fill-amber-50']],
-  '12m':  [[24890, 24915, 'fill-emerald-50'], [24915, 24940, 'fill-sky-50'], [24940, 24990, 'fill-amber-50']],
-  '10m':  [[28000, 28070, 'fill-emerald-50'], [28070, 28300, 'fill-sky-50'], [28300, 29700, 'fill-amber-50']],
-  '6m':   [[50000, 50100, 'fill-emerald-50'], [50100, 50500, 'fill-amber-50']],
+  '160m': [[1800, 1838, SEG_CW], [1838, 1840, SEG_DIGI], [1840, 2000, SEG_PHONE]],
+  '80m':  [[3500, 3580, SEG_CW], [3580, 3600, SEG_DIGI], [3600, 3800, SEG_PHONE]],
+  '60m':  [[5350, 5450, SEG_PHONE]],
+  '40m':  [[7000, 7040, SEG_CW], [7040, 7100, SEG_DIGI], [7100, 7200, SEG_PHONE]],
+  '30m':  [[10100, 10130, SEG_CW], [10130, 10150, SEG_DIGI]],
+  '20m':  [[14000, 14070, SEG_CW], [14070, 14100, SEG_DIGI], [14100, 14350, SEG_PHONE]],
+  '17m':  [[18068, 18095, SEG_CW], [18095, 18110, SEG_DIGI], [18110, 18168, SEG_PHONE]],
+  '15m':  [[21000, 21070, SEG_CW], [21070, 21150, SEG_DIGI], [21150, 21450, SEG_PHONE]],
+  '12m':  [[24890, 24915, SEG_CW], [24915, 24940, SEG_DIGI], [24940, 24990, SEG_PHONE]],
+  '10m':  [[28000, 28070, SEG_CW], [28070, 28300, SEG_DIGI], [28300, 29700, SEG_PHONE]],
+  '6m':   [[50000, 50100, SEG_CW], [50100, 50500, SEG_PHONE]],
 };
 
 // Small coloured dot + label used in the band-map legend strip.
-function LegendDot({ cls, label }: { cls: string; label: string }) {
+function LegendDot({ cls, colour, label }: { cls?: string; colour?: string; label: string }) {
   return (
     <span className="inline-flex items-center gap-1">
-      <span className={cn('size-2 rounded-full', cls)} />
+      <span className={cn("size-2 rounded-full", cls)} style={colour ? { background: colour } : undefined} />
       {label}
     </span>
   );
@@ -77,13 +146,13 @@ function LegendDot({ cls, label }: { cls: string; label: string }) {
 
 // Human-readable label for a spot status — used in the pill hover tooltip
 // so the operator can see WHY a spot is coloured the way it is.
-function statusLabel(s: string): string {
+function statusLabel(s: string, t: (k: string) => string): string {
   switch (s) {
-    case 'new':      return 'NEW DXCC (entity never worked)';
-    case 'new-band': return 'NEW BAND (entity not worked on this band)';
-    case 'new-slot': return 'NEW SLOT (mode not worked on this band)';
-    case 'worked':   return 'Worked (this band + mode already in log)';
-    default:         return 'Entity not resolved';
+    case 'new':      return t('bmp.statusNew');
+    case 'new-band': return t('bmp.statusNewBand');
+    case 'new-slot': return t('bmp.statusNewSlot');
+    case 'worked':   return t('bmp.statusWorked');
+    default:         return t('bmp.statusUnresolved');
   }
 }
 
@@ -94,22 +163,22 @@ function statusStyle(s: string): { pill: string; bar: string; line: string; dot:
   // dot  = small marker on the freq scale
   switch (s) {
     case 'new':      return {
-      pill: 'bg-rose-50 text-rose-900 border-rose-200 hover:bg-rose-100',
-      bar:  'bg-rose-500',
-      line: 'stroke-rose-400',
-      dot:  'fill-rose-500',
+      pill: 'bg-danger-muted text-danger-muted-foreground border-danger-border hover:bg-danger-muted',
+      bar:  'bg-danger',
+      line: 'stroke-danger',
+      dot:  'fill-danger',
     };
     case 'new-band': return {
-      pill: 'bg-amber-50 text-amber-900 border-amber-200 hover:bg-amber-100',
-      bar:  'bg-amber-500',
-      line: 'stroke-amber-400',
-      dot:  'fill-amber-500',
+      pill: 'bg-warning-muted text-warning-muted-foreground border-warning-border hover:bg-warning-muted',
+      bar:  'bg-warning',
+      line: 'stroke-warning',
+      dot:  'fill-warning',
     };
     case 'new-slot': return {
-      pill: 'bg-yellow-50 text-yellow-900 border-yellow-200 hover:bg-yellow-100',
-      bar:  'bg-yellow-500',
-      line: 'stroke-yellow-500',
-      dot:  'fill-yellow-500',
+      pill: 'bg-caution-muted text-caution-muted-foreground border-caution-border hover:bg-caution-muted',
+      bar:  'bg-caution',
+      line: 'stroke-caution',
+      dot:  'fill-caution',
     };
     case 'worked':   return {
       pill: 'bg-card text-muted-foreground border-border/60 hover:bg-muted/50',
@@ -136,18 +205,19 @@ const PILL_GAP = 32;   // px between scale border and first pill (room for leade
 const LABEL_W = 200;
 const TOP_PAD = 14;    // px of breathing room above/below the band edges so
 const BOT_PAD = 14;    // the top-most freq label isn't clipped at y=0
-// Max FT-mode (FT8/FT4/…) pills drawn at once. These pile up on a single
-// watering-hole frequency and otherwise spawn hundreds of spots that fan out
-// and cover the whole map. ONLY the FT family is capped — CW, SSB and other
-// digital spots are always shown in full. When more than this FT spots are in
-// band we keep the most useful (new entities first, worked last; ties broken
-// by closeness to the rig freq).
+// Max DATA-class (digital: FT8/FT4/JS8/RTTY/PSK/…) pills drawn at once.
+// These pile up on the watering-hole frequencies and otherwise spawn
+// hundreds of spots that fan out and cover the whole map. ONLY digital is
+// capped — CW and SSB are always shown in full. When more than this digital
+// spots are in band we keep the most useful (new entities first, worked
+// last; ties broken by closeness to the rig freq).
 const MAX_VISIBLE_SPOTS = 30;
 
-export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, onClose }: Props) {
+export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, onClose, side = 'right', onToggleSide, hideDigital = false, fitToBand = false, keyNav = false }: Props) {
+  const { t } = useI18n();
   const range = BAND_RANGES[band];
   const segments = SEGMENT_COLORS[band] ?? [];
-  const [zoomIdx, setZoomIdx] = useState(0);
+  const [zoomIdx, setZoomIdx] = useState(2); // default 32 px/kHz
   const scrollerRef = useRef<HTMLDivElement | null>(null);
   const [containerH, setContainerH] = useState(400);
 
@@ -163,7 +233,12 @@ export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, o
   const fallback: [number, number] = range ?? [0, 1];
   const [lo, hi] = fallback;
   const span = hi - lo;
-  const pxPerKHz = PX_PER_KHZ[zoomIdx];
+  // Fit-to-band computes the exact px/kHz so the whole band edge-to-edge fills
+  // the visible height; otherwise use the discrete zoom step.
+  const fitPxPerKHz = fitToBand && containerH > 0 && span > 0
+    ? Math.max(0.05, (containerH - TOP_PAD - BOT_PAD) / span)
+    : 0;
+  const pxPerKHz = fitPxPerKHz || PX_PER_KHZ[zoomIdx];
 
   // Anti-overlap layout: each label wants to sit at its true freq, but
   // never closer than PILL_H from the previous one. Sorted top-to-bottom
@@ -189,14 +264,17 @@ export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, o
       inBand.push(s);
     }
 
-    // Only the FT family (FT8/FT4/…) is capped — it's what floods a single
-    // watering-hole frequency. Everything else (CW, SSB, RTTY, PSK, …) is
-    // always shown in full.
-    const isFlood = (s: Spot) => /^FT/.test(inferSpotMode(s.comment ?? '', s.freq_hz));
-    const ftSpots = inBand.filter(isFlood);
+    // Only DATA-class spots (every digital mode — FT8/FT4/JS8/RTTY/PSK/…)
+    // are capped — they're what floods the watering-hole frequencies. We key
+    // off the mode CATEGORY (not a literal "FT8" string) because many FT8
+    // spots carry no mode word and the band-plan fallback labels them the
+    // generic "DATA" rather than "FT8". CW and SSB are always shown in full.
+    const isFlood = (s: Spot) => spotModeCategory(inferSpotMode(s.comment ?? '', s.freq_hz)) === 'DATA';
+    // hideDigital removes them entirely; otherwise they're capped below.
+    const ftSpots = hideDigital ? [] : inBand.filter(isFlood);
     const otherSpots = inBand.filter((s) => !isFlood(s));
 
-    // Rank an FT spot by usefulness (new entity → unworked → worked); ties
+    // Rank a DATA spot by usefulness (new entity → unworked → worked); ties
     // break by proximity to the rig frequency. Keep the top MAX_VISIBLE_SPOTS.
     const rank = (s: Spot) => {
       const k = spotStatusKey(s.dx_call, s.band ?? '', s.comment ?? '', s.freq_hz);
@@ -266,34 +344,39 @@ export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, o
       out.push({ spot: filtered[i], freqY: desired[i], labelY: centers[i] + shift - PILL_H / 2 });
     }
     const lastLabelBottom = out.length ? out[out.length - 1].labelY + PILL_H : 0;
+    // In fit mode the band scale exactly fills the viewport (innerH = containerH
+    // − pads); when crowded sub-bands stack labels past the bottom the content
+    // grows and a scroll bar appears — the map defaults to the top so the whole
+    // band is visible, and you scroll down to reach the stacked spots.
     return {
       placed: out,
       totalH: Math.max(innerH + TOP_PAD + BOT_PAD, lastLabelBottom + BOT_PAD),
       hidden: hiddenCount,
     };
-  }, [spots, range, lo, hi, span, pxPerKHz, containerH, spotStatus, currentFreqHz]);
+  }, [spots, range, lo, hi, span, pxPerKHz, containerH, spotStatus, currentFreqHz, hideDigital]);
 
   // freqToY for elements rendered outside the memo (ticks, rig pointer).
   // Must mirror the same offset so the rig triangle sits on the right kHz.
   const innerH = Math.max(containerH - TOP_PAD - BOT_PAD, span * pxPerKHz);
   const freqToY = (kHz: number) => TOP_PAD + (1 - (kHz - lo) / span) * innerH;
 
-  // Auto-centre on the rig frequency when the map opens or the band changes
-  // (once per band, so it doesn't fight the user's manual scrolling). Waits
-  // for the scroller height to be measured and a valid in-band rig freq.
-  const centeredForRef = useRef<string>('');
+  // Keep the map centred on the rig frequency: the effect re-runs only when the
+  // frequency actually changes (or band/zoom/size), so tuning follows the rig
+  // while a stable frequency leaves your manual scroll alone.
   useEffect(() => {
-    if (!range || containerH <= 0 || currentFreqHz <= 0) return;
-    const kHz = currentFreqHz / 1000;
-    if (kHz < lo || kHz > hi) return;
-    if (centeredForRef.current === band) return;
+    if (!range || containerH <= 0) return;
     const el = scrollerRef.current;
     if (!el) return;
-    centeredForRef.current = band;
+    // Fit-to-band: keep the view at the top so the full band is always in frame;
+    // any overflow spots are reached by scrolling down (don't follow the rig).
+    if (fitToBand) { el.scrollTop = 0; return; }
+    if (currentFreqHz <= 0) return;
+    const kHz = currentFreqHz / 1000;
+    if (kHz < lo || kHz > hi) return;
     el.scrollTop = Math.max(0, freqToY(kHz) - containerH / 2);
     // freqToY is recomputed each render; intentionally excluded from deps.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [band, containerH, currentFreqHz, range, lo, hi]);
+  }, [band, containerH, currentFreqHz, range, lo, hi, pxPerKHz, fitToBand]);
 
   useEffect(() => {
     const el = scrollerRef.current;
@@ -309,11 +392,48 @@ export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, o
     return () => el.removeEventListener('wheel', onWheel);
   }, [range]);
 
+  // Ctrl+↑ / Ctrl+↓ hop to the next spot above / below the rig frequency and tune
+  // to it. Higher freq is UP on the map (see freqToY), so ↑ = next higher spot.
+  // Only active on the docked Main-view map (keyNav) and ignored while typing.
+  // MUST stay ABOVE the `if (!range)` early return below: on an unknown band
+  // (e.g. a spurious 33 cm CAT reading from an Icom) that return skipped this
+  // hook, so the hook count changed between renders and React crashed with #300
+  // ("rendered fewer hooks than expected"). lo/hi are always defined (they fall
+  // back to [0,1] when there's no range), so it's safe to run here.
+  useEffect(() => {
+    if (!keyNav) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (!e.ctrlKey || e.altKey || e.metaKey) return;
+      if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
+      const ae = document.activeElement as HTMLElement | null;
+      const tag = (ae?.tagName || '').toLowerCase();
+      if (tag === 'input' || tag === 'textarea' || tag === 'select' || ae?.isContentEditable) return;
+      const list = spots
+        .filter((s) => (s.band ?? '') === band && s.freq_hz > 0)
+        .slice()
+        .sort((a, b) => a.freq_hz - b.freq_hz);
+      if (!list.length) return;
+      const cur = currentFreqHz || (lo + hi) * 500; // mid-band kHz→Hz when no rig freq
+      const EPS = 50; // Hz, so we don't re-pick the spot we're already sitting on
+      let target: Spot | undefined;
+      if (e.key === 'ArrowUp') {
+        target = list.find((s) => s.freq_hz > cur + EPS);
+      } else {
+        for (let i = list.length - 1; i >= 0; i--) { if (list[i].freq_hz < cur - EPS) { target = list[i]; break; } }
+      }
+      if (!target) return;
+      e.preventDefault();
+      onSpotClick(target);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [keyNav, spots, band, currentFreqHz, lo, hi, onSpotClick]);
+
   if (!range) {
     return (
       <div className="h-full w-full flex flex-col items-center justify-center text-xs text-muted-foreground p-3 bg-muted/20">
-        <div className="text-sm font-semibold mb-1">Band map</div>
-        Not configured for {band || '—'}.
+        <div className="text-sm font-semibold mb-1">{t('bmp.bandMap')}</div>
+        {t('bmp.notConfigured', { band: band || '—' })}
       </div>
     );
   }
@@ -345,28 +465,35 @@ export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, o
 
   return (
     <div className="h-full w-full flex flex-col min-h-0 bg-card">
-      <div className="px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground bg-muted/40 border-b border-border flex items-center gap-1 shrink-0">
-        <span className="flex-1">Map · {band}</span>
-        <button type="button" onClick={() => setZoomIdx((z) => Math.max(0, z - 1))} disabled={zoomIdx === 0}
-          className="size-5 inline-flex items-center justify-center rounded hover:bg-muted disabled:opacity-30"
-          title="Zoom out">
+      <div className="px-2 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground bg-muted/40 border-b border-border flex flex-nowrap items-center gap-0.5 shrink-0">
+        <span className="flex-1 min-w-0 truncate">{t('bmp.map')} · {band}</span>
+        <button type="button" onClick={() => setZoomIdx((z) => Math.max(0, z - 1))} disabled={fitToBand || zoomIdx === 0}
+          className="size-5 shrink-0 inline-flex items-center justify-center rounded hover:bg-muted disabled:opacity-30"
+          title={t('bmp.zoomOut')}>
           <Minus className="size-3" />
         </button>
-        <span className="font-mono text-[10px] w-12 text-center">{pxPerKHz}px/kHz</span>
-        <button type="button" onClick={() => setZoomIdx((z) => Math.min(PX_PER_KHZ.length - 1, z + 1))} disabled={zoomIdx === PX_PER_KHZ.length - 1}
-          className="size-5 inline-flex items-center justify-center rounded hover:bg-muted disabled:opacity-30"
-          title="Zoom in">
+        <span className="shrink-0 font-mono text-[10px] normal-case tracking-normal whitespace-nowrap px-0.5">{fitToBand ? t('bmp.fit') : `${pxPerKHz}px/kHz`}</span>
+        <button type="button" onClick={() => setZoomIdx((z) => Math.min(PX_PER_KHZ.length - 1, z + 1))} disabled={fitToBand || zoomIdx === PX_PER_KHZ.length - 1}
+          className="size-5 shrink-0 inline-flex items-center justify-center rounded hover:bg-muted disabled:opacity-30"
+          title={t('bmp.zoomIn')}>
           <Plus className="size-3" />
         </button>
         <button type="button" onClick={recenterOnRig}
           className="size-5 inline-flex items-center justify-center rounded hover:bg-muted"
-          title="Scroll to current rig frequency">
+          title={t('bmp.scrollToRig')}>
           <Crosshair className="size-3" />
         </button>
+        {onToggleSide && (
+          <button type="button" onClick={onToggleSide}
+            className="size-5 inline-flex items-center justify-center rounded hover:bg-muted"
+            title={side === 'right' ? t('bmp.moveLeft') : t('bmp.moveRight')}>
+            {side === 'right' ? <PanelLeft className="size-3" /> : <PanelRight className="size-3" />}
+          </button>
+        )}
         {onClose && (
           <button type="button" onClick={onClose}
             className="size-5 inline-flex items-center justify-center rounded hover:bg-muted"
-            title="Hide band map">
+            title={t('bmp.hide')}>
             <X className="size-3" />
           </button>
         )}
@@ -381,10 +508,13 @@ export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, o
             height={totalH}
             preserveAspectRatio="none"
           >
-            {segments.map(([s, e, cls], i) => {
+            {segments.map(([s, e, colour], i) => {
               const y1 = freqToY(Math.min(e, hi));
               const y2 = freqToY(Math.max(s, lo));
-              return <rect key={i} x={0} y={y1} width={SCALE_W} height={Math.max(0, y2 - y1)} className={cls} />;
+              return (
+                <rect key={i} x={0} y={y1} width={SCALE_W} height={Math.max(0, y2 - y1)}
+                  fill={colour} fillOpacity={SEG_OPACITY} />
+              );
             })}
             <line x1={SCALE_W - 0.5} y1={0} x2={SCALE_W - 0.5} y2={totalH} className="stroke-border" strokeWidth={1} />
           </svg>
@@ -471,10 +601,21 @@ export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, o
                   'hover:translate-x-0.5 hover:shadow',
                   style.pill,
                 )}
-                title={`${p.spot.dx_call}${entry?.country ? ' · ' + entry.country : ''} · ${p.spot.freq_khz.toFixed(1)} kHz · ${statusLabel(st)}${p.spot.comment ? ' · ' + p.spot.comment : ''}${p.spot.spotter ? ' · de ' + p.spot.spotter : ''}`}
+                title={`${p.spot.dx_call}${entry?.country ? ' · ' + entry.country : ''} · ${p.spot.freq_khz.toFixed(1)} kHz · ${statusLabel(st, t)}${markersFor(entry).map((m) => ' · ' + t(BMP_MARKER_LABEL[m.key])).join('')}${p.spot.comment ? ' · ' + p.spot.comment : ''}${p.spot.spotter ? ' · de ' + p.spot.spotter : ''}`}
               >
-                {/* Status accent strip on the left */}
-                <span className={cn('w-1 shrink-0', style.bar)} aria-hidden />
+                {/* Left accent strip. With no extra marker it repeats the status
+                    colour, exactly as before; otherwise it splits into one
+                    segment per marker, so "worked entity + new park" shows both
+                    instead of one hiding the other. */}
+                {(() => {
+                  const marks = markersFor(entry);
+                  if (marks.length === 0) return <span className={cn('w-1 shrink-0', style.bar)} aria-hidden />;
+                  return (
+                    <span className="w-1 shrink-0 flex flex-col" aria-hidden>
+                      {marks.map((m) => <span key={m.key} className="flex-1" style={{ background: m.colour }} />)}
+                    </span>
+                  );
+                })()}
                 <span className="flex items-center gap-1.5 px-2 font-mono text-[11px] font-bold leading-none">
                   <span>{p.spot.dx_call}</span>
                   {mode && (
@@ -490,14 +631,24 @@ export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, o
       </div>
       {/* Colour legend — what each pill colour means. */}
       <div className="px-3 py-1 flex flex-wrap items-center gap-x-2.5 gap-y-0.5 text-[9px] text-muted-foreground bg-muted/20 border-t border-border">
-        <LegendDot cls="bg-rose-400" label="New DXCC" />
-        <LegendDot cls="bg-amber-400" label="New band" />
-        <LegendDot cls="bg-yellow-300" label="New slot (mode)" />
-        <LegendDot cls="bg-muted-foreground/30" label="Worked" />
+        <LegendDot cls="bg-danger" label={t('bmp.legendNewDxcc')} />
+        <LegendDot cls="bg-warning" label={t('bmp.legendNewBand')} />
+        <LegendDot cls="bg-caution" label={t('bmp.legendNewSlot')} />
+        <LegendDot cls="bg-muted-foreground/30" label={t("bmp.legendWorked")} />
+        {/* The stacked markers, straight from the shared table so the legend
+            cannot drift from what the pills actually draw. */}
+        {BMP_MARKERS.map((m) => (
+          <LegendDot key={m.key} colour={m.colour} label={t(BMP_MARKER_LABEL[m.key])} />
+        ))}
+        {/* Sub-band shading, so the wash behind the pills is never colour-alone. */}
+        <span className="mx-0.5 opacity-40">|</span>
+        <LegendDot colour={SEG_CW} label={t("bmp.legendCW")} />
+        <LegendDot colour={SEG_DIGI} label={t("bmp.legendData")} />
+        <LegendDot colour={SEG_PHONE} label={t("bmp.legendPhone")} />
       </div>
       <div className="px-3 py-1 text-[9px] text-muted-foreground bg-muted/30 border-t border-border font-mono text-center shrink-0">
-        scroll · ctrl+wheel = zoom · ◎ = jump to rig
-        {hidden > 0 && <span className="text-amber-600"> · {hidden} FT spot{hidden > 1 ? 's' : ''} hidden (top {MAX_VISIBLE_SPOTS} shown)</span>}
+        {t('bmp.footerHint')}
+        {hidden > 0 && <span className="text-warning"> · {t('bmp.spotsHidden', { n: hidden, max: MAX_VISIBLE_SPOTS })}</span>}
       </div>
     </div>
   );

frontend/src/components/BandSlotGrid.tsx

@@ -1,7 +1,9 @@
-import { useMemo } from 'react';
-import { Star, Radio } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { Star, Radio, Sunrise, Sunset, X, Loader2 } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { cn } from '@/lib/utils';
+import { sunTimes } from '@/lib/sun';
+import { BandSlotQSOs } from '../../wailsjs/go/main/App';
 import type { WorkedBeforeView } from '@/types';
 
 type WorkedBefore = WorkedBeforeView;
@@ -11,10 +13,32 @@ interface Props {
   busy: boolean;
   currentBand: string;
   currentMode: string;
+  bands?: string[]; // operator's configured bands; falls back to DEFAULT_BANDS
+  hasCall?: boolean; // a callsign is being entered — only then highlight the "current entry" cell
+  // DX station coordinates, for its sunrise/sunset. Optional: many spots resolve
+  // to an entity with no position at all, and the block simply does not appear.
+  lat?: number;
+  lon?: number;
+  // Set when the matrix is showing a QSO picked in the log grid rather than the
+  // entry form — labelled so the two can never be confused.
+  forCall?: string;
+  // Open the QSO editor for a contact — makes callsigns in the cell drill-down
+  // clickable. Threaded down from App.openEdit.
+  onEditQso?: (id: number) => void;
 }
 
-// 13-column band layout — no 4m, no SHF (per user preference).
-const BANDS: { tag: string; label: string }[] = [
+// Compact column label for a band tag: keep the classic V/U for 2m/70cm,
+// strip the trailing "m" for meter bands (160m→160), and shorten cm bands
+// (13cm→13c) so the column stays narrow.
+function bandColLabel(tag: string): string {
+  if (tag === '2m') return 'V';
+  if (tag === '70cm') return 'U';
+  if (tag.endsWith('cm')) return tag.replace('cm', 'c');
+  return tag.replace(/m$/, '');
+}
+
+// Default 13-column band layout, used when the operator hasn't configured bands.
+const DEFAULT_BANDS: { tag: string; label: string }[] = [
   { tag: '160m', label: '160' },
   { tag: '80m',  label: '80'  },
   { tag: '60m',  label: '60'  },
@@ -39,13 +63,29 @@ function classMatchesMode(cls: string, mode: string): boolean {
   return u !== '' && u !== 'CW' && !PHONE_MODES.has(u);
 }
 
+// Dedicated matrix palette (--mx-* tokens, per theme in style.css): a 3-level
+// ramp per hue so confirmed / worked / not-worked stay distinguishable on both
+// light and dark surfaces (the generic status -muted fills were too dark on the
+// dark themes to tell "worked" from "not worked" apart). Light-warm reproduces
+// the original emerald/indigo/stone colours exactly.
 const STATUS_CLASSES: Record<string, string> = {
-  call_c: 'bg-emerald-700 hover:bg-emerald-600',
-  call_w: 'bg-emerald-300 hover:bg-emerald-200',
-  dxcc_c: 'bg-indigo-800 hover:bg-indigo-700',
-  dxcc_w: 'bg-indigo-300 hover:bg-indigo-200',
+  call_c: 'bg-mx-call-conf',
+  call_w: 'bg-mx-call-work',
+  dxcc_c: 'bg-mx-dx-conf',
+  dxcc_w: 'bg-mx-dx-work',
 };
 
+// Legend entries, in the same colour order as the cells. swatch = the
+// background class (or a special ring marker for the current-entry cell).
+const LEGEND: { swatch: string; ring?: boolean; label: string }[] = [
+  { swatch: 'bg-mx-call-conf', label: 'Call confirmed' },
+  { swatch: 'bg-mx-call-work', label: 'Call worked' },
+  { swatch: 'bg-mx-dx-conf', label: 'Entity confirmed' },
+  { swatch: 'bg-mx-dx-work', label: 'Entity worked' },
+  { swatch: 'bg-mx-none', label: 'Not worked' },
+  { swatch: 'bg-mx-none', ring: true, label: 'Current entry' },
+];
+
 function cellTitle(band: string, cls: string, status: string, current: boolean): string {
   const desc =
     status === 'call_c' ? 'This callsign confirmed' :
@@ -56,10 +96,20 @@ function cellTitle(band: string, cls: string, status: string, current: boolean):
   return `${band} ${cls}: ${desc}${current ? ' — current entry' : ''}`;
 }
 
-export function BandSlotGrid({ wb, busy, currentBand, currentMode }: Props) {
+export function BandSlotGrid({ wb, busy, currentBand, currentMode, bands, hasCall = true, lat, lon, forCall, onEditQso }: Props) {
+  // Cell drill-down: which band+class the operator clicked, or null.
+  const [slot, setSlot] = useState<{ band: string; cls: string } | null>(null);
+  // Columns from the operator's configured bands (so the matrix shows only the
+  // bands they actually use), falling back to the built-in default set.
+  const cols = useMemo(
+    () => (bands && bands.length ? bands.map((tag) => ({ tag, label: bandColLabel(tag) })) : DEFAULT_BANDS),
+    [bands],
+  );
   const dxcc = wb?.dxcc ?? 0;
   const dxccName = wb?.dxcc_name ?? '';
   const dxccCount = wb?.dxcc_count ?? 0;
+  const mwRank = wb?.mw_rank ?? 0; // ClubLog Most Wanted rank (1 = most wanted; 0 = off/unknown)
+  const callCount = wb?.count ?? 0; // QSOs with this exact callsign
   const hasDxcc = dxcc > 0;
   const newOne = hasDxcc && dxccCount === 0;
 
@@ -71,34 +121,133 @@ export function BandSlotGrid({ wb, busy, currentBand, currentMode }: Props) {
     return m;
   }, [wb]);
 
+  // "Newness" of the current band+mode entry, for the award/DX-chase badges.
+  // Derived straight from the entity's real band_status (all bands it was
+  // worked on — not just the operator's configured column list).
+  // By default newness uses the ACTUAL mode (FT8 / FT4 / RTTY…): DIG is a
+  // group, so FT4 after FT8 is genuinely a new mode. The operator can opt into
+  // DXCC-style grouping instead (Settings → General), where all digital modes
+  // count as ONE — then FT4 after FT8 is just "worked".
+  const groupDigital = localStorage.getItem('opslog.groupDigitalSlots') === '1';
+  const normMode = (m: string): string => {
+    const u = (m || '').toUpperCase().trim();
+    if (!groupDigital) return u;
+    return u === '' || u === 'CW' || PHONE_MODES.has(u) ? u : 'DIG';
+  };
+  const bandModes = (wb?.dxcc_band_modes ?? []) as { band: string; mode: string }[];
+  const curMode = normMode(currentMode);
+  const bandWorked = bandModes.some((bm) => bm.band === currentBand);          // entity worked on this band (any mode)
+  const modeWorked = !!curMode && bandModes.some((bm) => normMode(bm.mode) === curMode); // …in this (normalised) mode (any band)
+  const slotWorked = !!curMode && bandModes.some((bm) => bm.band === currentBand && normMode(bm.mode) === curMode);
+  // Mutually-exclusive badges, shown only when the entity is worked but this
+  // exact band+mode is NOT yet:
+  //   New Band & Mode = both the band AND the mode are new for this entity.
+  //   New Band        = the band is new (the mode was worked on another band).
+  //   New Mode        = the mode is new (the band was worked in another mode).
+  //   New Slot        = both band and mode already worked — just not together.
+  const slotNew = hasDxcc && !newOne && !!curMode && !slotWorked;
+  const newBandMode = slotNew && !bandWorked && !modeWorked;
+  const newBand = slotNew && !bandWorked && modeWorked;
+  const newMode = slotNew && bandWorked && !modeWorked;
+  const newSlot = slotNew && bandWorked && modeWorked;
+
+  // ClubLog Most Wanted rank pill (shown next to the entity name when the feature
+  // is on). Hotter colour the more wanted the entity is.
+  const mwBadge = mwRank > 0 ? (
+    <Badge
+      title={`ClubLog Most Wanted #${mwRank}`}
+      className={cn('px-1.5 py-0 text-[10px] font-bold shrink-0',
+        mwRank <= 100 ? 'bg-danger text-danger-foreground'
+          : mwRank <= 250 ? 'bg-warning text-warning-foreground'
+            : 'bg-muted text-muted-foreground')}
+    >
+      MW #{mwRank}
+    </Badge>
+  ) : null;
+
+  // Sunrise / sunset AT THE DX, in UTC. A glance tells you whether the path is
+  // about to open or close on their side, which is the reason to look at a DX
+  // station's grey line at all. Recomputed only when the position changes.
+  const sun = useMemo(
+    () => (lat == null || lon == null ? null : sunTimes(new Date(), lat, lon)),
+    [lat, lon],
+  );
+  const sunBlock = sun ? (
+    <div className="ml-auto flex items-center gap-3 text-xs shrink-0"
+      title="Sunrise / sunset at the DX station (UTC)">
+      {sun.polarDay ? (
+        <span className="font-semibold text-warning">midnight sun</span>
+      ) : sun.polarNight ? (
+        <span className="font-semibold text-info">polar night</span>
+      ) : (
+        <>
+          <span className="flex items-center gap-1">
+            <Sunrise className="size-3.5 text-warning" />
+            <span className="font-mono tabular-nums">{sun.rise || '—'}</span>
+          </span>
+          <span className="flex items-center gap-1">
+            <Sunset className="size-3.5 text-info" />
+            <span className="font-mono tabular-nums">{sun.set || '—'}</span>
+          </span>
+          <span className="text-muted-foreground">UTC</span>
+        </>
+      )}
+    </div>
+  ) : null;
+
   return (
     <section
       className={cn(
-        'flex items-center gap-4 px-3 py-2 bg-card border-b border-border flex-wrap shrink-0',
-        newOne && 'bg-gradient-to-br from-amber-100 to-amber-200 border-amber-300',
+        'flex items-center gap-4 px-3 py-2 flex-wrap shrink-0',
+        newOne && 'bg-gradient-to-br from-warning-muted to-warning-muted rounded-lg',
       )}
     >
-      <div className="flex items-center gap-2 min-w-[220px]">
+      <div className="flex items-center gap-2 min-w-[220px] flex-1">
         {newOne ? (
           <>
-            <Badge className="bg-amber-800 text-amber-50 gap-1 px-3 py-1 text-[11px]">
+            <Badge className="bg-warning text-warning-foreground gap-1 px-3 py-1 text-[11px]">
               <Star className="size-3 fill-current" />
               NEW ONE
             </Badge>
-            <span className="text-xs text-amber-900">
-              <strong className="text-amber-950 font-semibold">{dxccName || `DXCC #${dxcc}`}</strong>
+            <span className="text-xs text-warning-muted-foreground">
+              <strong className="text-warning-muted-foreground font-semibold">{dxccName || `DXCC #${dxcc}`}</strong>
               {' '}· never worked this entity
             </span>
+            {mwBadge}
           </>
         ) : hasDxcc ? (
           <>
+            {/* Says WHOSE stats these are when they come from a row picked in
+                the log rather than from what's being typed. */}
+            {forCall && (
+              <Badge variant="outline" className="px-2 py-0.5 text-[10px] font-mono shrink-0"
+                title="Stats for the QSO selected in the log">
+                {forCall}
+              </Badge>
+            )}
             <Badge className="bg-primary text-primary-foreground px-3 py-1 text-xs normal-case font-semibold tracking-normal">
               {dxccName || `DXCC #${dxcc}`}
             </Badge>
+            {mwBadge}
             <span className="text-xs text-muted-foreground">
               <strong className="text-foreground font-semibold">{dxccCount}</strong>{' '}
               QSO{dxccCount > 1 ? 's' : ''} with this entity
+              {callCount > 0 && (
+                <>
+                  {' · '}
+                  <strong className="text-foreground font-semibold">{callCount}</strong>{' '}
+                  with this call
+                </>
+              )}
             </span>
+            {(newBand || newMode || newBandMode || newSlot) && (
+              <div className="flex flex-wrap items-center gap-1">
+                {newBandMode && <Badge className="bg-warning text-warning-foreground px-1.5 py-0 text-[10px]">New Band &amp; Mode</Badge>}
+                {newBand && <Badge className="bg-warning text-warning-foreground px-1.5 py-0 text-[10px]">New Band</Badge>}
+                {newMode && <Badge className="bg-warning text-warning-foreground px-1.5 py-0 text-[10px]">New Mode</Badge>}
+                {newSlot && <Badge className="bg-info text-info-foreground px-1.5 py-0 text-[10px]">New Slot</Badge>}
+              </div>
+            )}
           </>
         ) : busy ? (
           <span className="flex items-center gap-2 text-xs text-muted-foreground italic">
@@ -110,17 +259,19 @@ export function BandSlotGrid({ wb, busy, currentBand, currentMode }: Props) {
             Type a callsign to see entity stats
           </span>
         )}
+        {sunBlock}
       </div>
 
-      <table className="border-separate" style={{ borderSpacing: 2 }}>
+      <div className="flex flex-col gap-2">
+      <table className="border-separate" style={{ borderSpacing: 3 }}>
         <thead>
           <tr>
-            <th className="w-[22px]" />
-            {BANDS.map((b) => (
+            <th className="w-[26px]" />
+            {cols.map((b) => (
               <th
                 key={b.tag}
                 className={cn(
-                  'font-mono text-[10px] font-semibold px-1 text-center',
+                  'font-mono text-[11px] font-semibold px-1 text-center',
                   b.tag === currentBand ? 'text-primary font-extrabold' : 'text-muted-foreground',
                 )}
               >
@@ -136,23 +287,27 @@ export function BandSlotGrid({ wb, busy, currentBand, currentMode }: Props) {
               <tr key={cls}>
                 <th
                   className={cn(
-                    'font-mono text-[10px] font-semibold pr-1.5 text-right w-[22px]',
+                    'font-mono text-[11px] font-semibold pr-1.5 text-right w-[26px]',
                     classCurrent ? 'text-primary font-extrabold' : 'text-muted-foreground',
                   )}
                 >
                   {cls}
                 </th>
-                {BANDS.map((b) => {
+                {cols.map((b) => {
                   const st = statusMap.get(`${b.tag}|${cls}`) ?? '';
-                  const isCurrent = b.tag === currentBand && classCurrent;
+                  const isCurrent = hasCall && b.tag === currentBand && classCurrent;
                   return (
                     <td
                       key={b.tag}
-                      title={cellTitle(b.tag, cls, st, isCurrent)}
+                      title={cellTitle(b.tag, cls, st, isCurrent) + (st ? ' — click to list the QSOs' : '')}
+                      onClick={st ? () => setSlot({ band: b.tag, cls }) : undefined}
                       className={cn(
-                        'w-[22px] h-[18px] rounded transition-colors p-0',
-                        st ? STATUS_CLASSES[st] : 'bg-stone-200 hover:bg-stone-300',
-                        isCurrent && 'ring-2 ring-amber-500 ring-inset',
+                        'w-[28px] h-[24px] rounded transition-colors p-0',
+                        st ? STATUS_CLASSES[st] : 'bg-mx-none',
+                        // Only a filled cell has anything to show — an empty one
+                        // stays inert rather than opening a "no QSOs" dialog.
+                        st && 'cursor-pointer hover:brightness-110',
+                        isCurrent && 'ring-2 ring-warning ring-inset',
                       )}
                     />
                   );
@@ -162,6 +317,136 @@ export function BandSlotGrid({ wb, busy, currentBand, currentMode }: Props) {
           })}
         </tbody>
       </table>
+
+      {/* Colour legend — sits in the spare room under the matrix. */}
+      <div className="flex items-center gap-x-3 gap-y-1 flex-wrap pl-[26px]">
+        {LEGEND.map((l) => (
+          <span key={l.label} className="flex items-center gap-1.5 text-[10px] text-muted-foreground">
+            <span
+              className={cn(
+                'inline-block size-3 rounded shrink-0',
+                l.swatch,
+                l.ring && 'ring-2 ring-warning ring-inset',
+              )}
+            />
+            {l.label}
+          </span>
+        ))}
+      </div>
+      </div>
+
+      {slot && (
+        <SlotQSOModal
+          call={wb?.callsign ?? ''}
+          dxcc={dxcc}
+          entity={dxccName}
+          band={slot.band}
+          cls={slot.cls}
+          onClose={() => setSlot(null)}
+          onEdit={onEditQso}
+        />
+      )}
     </section>
   );
 }
+
+// ── Cell drill-down ──────────────────────────────────────────────────────────
+// The contacts behind one band+class cell: this exact callsign AND anyone else
+// in the entity, because that is the pair of facts the cell's colour encodes.
+// The call's own QSOs are marked so the two never blur together.
+
+function SlotQSOModal({ call, dxcc, entity, band, cls, onClose, onEdit }: {
+  call: string; dxcc: number; entity: string; band: string; cls: string; onClose: () => void; onEdit?: (id: number) => void;
+}) {
+  const [rows, setRows] = useState<any[] | null>(null);
+  const [err, setErr] = useState('');
+
+  useEffect(() => {
+    let dead = false;
+    BandSlotQSOs(call, dxcc, band, cls)
+      .then((r: any) => { if (!dead) setRows((r ?? []) as any[]); })
+      .catch((e: any) => { if (!dead) { setErr(String(e?.message ?? e)); setRows([]); } });
+    return () => { dead = true; };
+  }, [call, dxcc, band, cls]);
+
+  useEffect(() => {
+    // Capture phase: the app's global ESC handler resets the entry form, and
+    // closing a dialog must not also wipe what the operator was typing.
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') { e.stopImmediatePropagation(); e.preventDefault(); onClose(); }
+    }
+    window.addEventListener('keydown', onKey, true);
+    return () => window.removeEventListener('keydown', onKey, true);
+  }, [onClose]);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-[2px] p-4" onClick={onClose}>
+      <div className="bg-card border border-border rounded-xl shadow-2xl w-[760px] max-w-full max-h-[72vh] flex flex-col overflow-hidden ring-1 ring-black/5"
+        onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center gap-2.5 px-4 py-2.5 border-b border-border bg-muted/30">
+          <span className="inline-flex items-center justify-center h-6 min-w-6 px-1.5 rounded-md bg-primary/15 text-primary text-[11px] font-bold shrink-0 tabular-nums">{band}</span>
+          <div className="min-w-0">
+            <div className="font-semibold text-sm leading-tight truncate">
+              {cls}{entity && <span className="text-muted-foreground font-normal"> · {entity}</span>}
+            </div>
+            {onEdit && <div className="text-[10px] text-muted-foreground leading-tight">Click a callsign to edit the QSO</div>}
+          </div>
+          <span className="ml-auto text-xs text-muted-foreground tabular-nums shrink-0">{rows ? `${rows.length} QSO${rows.length > 1 ? 's' : ''}` : ''}</span>
+          <button type="button" onClick={onClose} className="text-muted-foreground hover:text-foreground shrink-0 rounded p-0.5 hover:bg-muted transition-colors">
+            <X className="size-4" />
+          </button>
+        </div>
+        <div className="flex-1 overflow-auto">
+          {err && <p className="p-3 text-xs text-destructive">{err}</p>}
+          {!rows ? (
+            <p className="p-4 text-xs text-muted-foreground flex items-center gap-2">
+              <Loader2 className="size-3.5 animate-spin" /> Loading…
+            </p>
+          ) : rows.length === 0 ? (
+            <p className="p-4 text-xs text-muted-foreground italic">No QSOs.</p>
+          ) : (
+            <table className="w-full text-xs border-collapse">
+              <thead className="sticky top-0 z-10 bg-muted/80 backdrop-blur text-[10px] uppercase tracking-wider text-muted-foreground">
+                <tr>
+                  <th className="text-left font-medium px-3 py-1.5">Date UTC</th>
+                  <th className="text-left font-medium px-3 py-1.5">Callsign</th>
+                  <th className="text-left font-medium px-3 py-1.5">Mode</th>
+                  <th className="text-left font-medium px-3 py-1.5">Freq</th>
+                  <th className="text-left font-medium px-3 py-1.5">Name</th>
+                  <th className="text-center font-medium px-3 py-1.5">Cfm</th>
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map((q, i) => {
+                  const cfm = q.lotw_rcvd === 'Y' || q.eqsl_rcvd === 'Y' || q.qsl_rcvd === 'Y';
+                  const mine = q.callsign === call;
+                  return (
+                    <tr key={q.id ?? i} className="border-t border-border/40 even:bg-muted/[0.06] hover:bg-primary/[0.06] transition-colors">
+                      <td className="px-3 py-1.5 tabular-nums text-muted-foreground whitespace-nowrap">
+                        {String(q.qso_date ?? '').slice(0, 16).replace('T', ' ')}
+                      </td>
+                      <td className="px-3 py-1.5">
+                        {onEdit ? (
+                          <button type="button" onClick={() => { onEdit(q.id as number); onClose(); }} title="Edit this QSO"
+                            className={cn('font-mono cursor-pointer text-left hover:underline underline-offset-2', mine ? 'font-bold text-primary' : 'text-foreground hover:text-primary')}>
+                            {q.callsign}
+                          </button>
+                        ) : (
+                          <span className={cn('font-mono', mine && 'font-bold text-primary')}>{q.callsign}</span>
+                        )}
+                      </td>
+                      <td className="px-3 py-1.5">{q.mode}</td>
+                      <td className="px-3 py-1.5 tabular-nums text-muted-foreground">{q.freq_hz ? (q.freq_hz / 1e6).toFixed(3) : ''}</td>
+                      <td className="px-3 py-1.5 text-muted-foreground truncate max-w-[180px]">{q.name}</td>
+                      <td className="px-3 py-1.5 text-center">{cfm ? <span className="text-success">✓</span> : <span className="text-muted-foreground/30">·</span>}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/BulkEditModal.tsx

@@ -0,0 +1,251 @@
+import { useMemo, useState } from 'react';
+import { Loader2 } from 'lucide-react';
+import { BulkUpdateField } from '../../wailsjs/go/main/App';
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
+} from '@/components/ui/select';
+import { useI18n } from '@/lib/i18n';
+
+type FieldKind = 'status' | 'text' | 'freq' | 'date';
+type FieldDef = { id: string; label: string; group: string; kind: FieldKind; upper?: boolean };
+
+// Fields a bulk edit may target. status → Y/N/R/I dropdown; text → free input.
+// upper:true uppercases code-like values (callsign, grid, refs). The id matches
+// the backend BulkUpdateField whitelist.
+// label holds an i18n key (resolved with t() at render time).
+const FIELDS: FieldDef[] = [
+  // QSL / upload status
+  // One channel at a time, each with its status and its date, in the same order
+  // as the QSL Info tab. "Upload" was the wrong word for half of them — a paper
+  // QSL is not uploaded — so every entry now reads "<channel> sent/received
+  // status" or "… date", which is also what the ADIF field is called.
+  { id: 'qsl_sent',          label: 'bulk.fQslSent',         group: 'QSL / upload', kind: 'status' },
+  { id: 'qsl_sent_date',     label: 'bulk.fQslSentDate',     group: 'QSL / upload', kind: 'date' },
+  { id: 'qsl_rcvd',          label: 'bulk.fQslRcvd',         group: 'QSL / upload', kind: 'status' },
+  { id: 'qsl_rcvd_date',     label: 'bulk.fQslRcvdDate',     group: 'QSL / upload', kind: 'date' },
+  { id: 'qsl_via',           label: 'bulk.fQslVia',          group: 'QSL / upload', kind: 'text' },
+  { id: 'lotw_sent',         label: 'bulk.fLotwSent',        group: 'QSL / upload', kind: 'status' },
+  { id: 'lotw_sent_date',    label: 'bulk.fLotwSentDate',    group: 'QSL / upload', kind: 'date' },
+  { id: 'lotw_rcvd',         label: 'bulk.fLotwRcvd',        group: 'QSL / upload', kind: 'status' },
+  { id: 'lotw_rcvd_date',    label: 'bulk.fLotwRcvdDate',    group: 'QSL / upload', kind: 'date' },
+  { id: 'eqsl_sent',         label: 'bulk.fEqslSent',        group: 'QSL / upload', kind: 'status' },
+  { id: 'eqsl_sent_date',    label: 'bulk.fEqslSentDate',    group: 'QSL / upload', kind: 'date' },
+  { id: 'eqsl_rcvd',         label: 'bulk.fEqslRcvd',        group: 'QSL / upload', kind: 'status' },
+  { id: 'eqsl_rcvd_date',    label: 'bulk.fEqslRcvdDate',    group: 'QSL / upload', kind: 'date' },
+  { id: 'qrz_sent',          label: 'bulk.fQrzSent',         group: 'QSL / upload', kind: 'status' },
+  { id: 'qrz_sent_date',     label: 'bulk.fQrzSentDate',     group: 'QSL / upload', kind: 'date' },
+  { id: 'qrz_rcvd',          label: 'bulk.fQrzRcvd',         group: 'QSL / upload', kind: 'status' },
+  { id: 'qrz_rcvd_date',     label: 'bulk.fQrzRcvdDate',     group: 'QSL / upload', kind: 'date' },
+  { id: 'clublog_sent',      label: 'bulk.fClublogSent',     group: 'QSL / upload', kind: 'status' },
+  { id: 'clublog_sent_date', label: 'bulk.fClublogSentDate', group: 'QSL / upload', kind: 'date' },
+  { id: 'hrdlog_sent',       label: 'bulk.fHrdlogSent',      group: 'QSL / upload', kind: 'status' },
+  { id: 'hrdlog_sent_date',  label: 'bulk.fHrdlogSentDate',  group: 'QSL / upload', kind: 'date' },
+  // My station / operator
+  { id: 'station_callsign', label: 'bulk.fStationCall',  group: 'My station', kind: 'text', upper: true },
+  { id: 'operator',         label: 'bulk.fOperator',     group: 'My station', kind: 'text', upper: true },
+  // No promoted column: written into extras_json (see qso.bulkEditableExtras).
+  { id: 'owner_callsign',   label: 'bulk.fOwnerCallsign', group: 'My station', kind: 'text', upper: true },
+  { id: 'my_grid',          label: 'bulk.fMyGrid',       group: 'My station', kind: 'text', upper: true },
+  { id: 'my_antenna',       label: 'bulk.fMyAntenna',    group: 'My station', kind: 'text' },
+  { id: 'my_rig',           label: 'bulk.fMyRig',        group: 'My station', kind: 'text' },
+  { id: 'my_street',        label: 'bulk.fMyStreet',     group: 'My station', kind: 'text' },
+  { id: 'my_city',          label: 'bulk.fMyCity',       group: 'My station', kind: 'text' },
+  { id: 'my_postal_code',   label: 'bulk.fMyPostal',     group: 'My station', kind: 'text' },
+  { id: 'my_country',       label: 'bulk.fMyCountry',    group: 'My station', kind: 'text' },
+  { id: 'my_state',         label: 'bulk.fMyState',      group: 'My station', kind: 'text', upper: true },
+  { id: 'my_cnty',          label: 'bulk.fMyCounty',     group: 'My station', kind: 'text' },
+  { id: 'my_iota',          label: 'bulk.fMyIota',       group: 'My station', kind: 'text', upper: true },
+  { id: 'my_sota_ref',      label: 'bulk.fMySota',       group: 'My station', kind: 'text', upper: true },
+  { id: 'my_pota_ref',      label: 'bulk.fMyPota',       group: 'My station', kind: 'text', upper: true },
+  { id: 'my_wwff_ref',      label: 'bulk.fMyWwff',       group: 'My station', kind: 'text', upper: true },
+  { id: 'my_sig',           label: 'bulk.fMySig',        group: 'My station', kind: 'text' },
+  { id: 'my_sig_info',      label: 'bulk.fMySigInfo',    group: 'My station', kind: 'text' },
+  { id: 'my_name',          label: 'bulk.fMyName',       group: 'My station', kind: 'text' },
+  { id: 'my_arrl_sect',     label: 'bulk.fMyArrlSect',   group: 'My station', kind: 'text', upper: true },
+  { id: 'my_darc_dok',      label: 'bulk.fMyDarcDok',    group: 'My station', kind: 'text', upper: true },
+  { id: 'my_vucc_grids',    label: 'bulk.fMyVuccGrids',  group: 'My station', kind: 'text', upper: true },
+  // Contest
+  { id: 'contest_id', label: 'bulk.fContestId',  group: 'Contest', kind: 'text', upper: true },
+  { id: 'srx_string', label: 'bulk.fSrxString',  group: 'Contest', kind: 'text' },
+  { id: 'stx_string', label: 'bulk.fStxString',  group: 'Contest', kind: 'text' },
+  { id: 'arrl_sect',  label: 'bulk.fArrlSect',   group: 'Contest', kind: 'text', upper: true },
+  { id: 'precedence', label: 'bulk.fPrecedence', group: 'Contest', kind: 'text', upper: true },
+  { id: 'class',      label: 'bulk.fClass',      group: 'Contest', kind: 'text', upper: true },
+  // Propagation / satellite
+  { id: 'prop_mode', label: 'bulk.fPropMode', group: 'Propagation', kind: 'text', upper: true },
+  { id: 'sat_name',  label: 'bulk.fSatName',  group: 'Propagation', kind: 'text', upper: true },
+  { id: 'sat_mode',  label: 'bulk.fSatMode',  group: 'Propagation', kind: 'text', upper: true },
+  // Contacted station (location / activation refs / SIG)
+  { id: 'grid',     label: 'bulk.fGrid',    group: 'Contacted station', kind: 'text', upper: true },
+  { id: 'state',    label: 'bulk.fState',   group: 'Contacted station', kind: 'text', upper: true },
+  { id: 'cnty',     label: 'bulk.fCnty',    group: 'Contacted station', kind: 'text' },
+  { id: 'pota_ref', label: 'bulk.fPotaRef', group: 'Contacted station', kind: 'text', upper: true },
+  { id: 'sota_ref', label: 'bulk.fSotaRef', group: 'Contacted station', kind: 'text', upper: true },
+  { id: 'wwff_ref', label: 'bulk.fWwffRef', group: 'Contacted station', kind: 'text', upper: true },
+  { id: 'iota',     label: 'bulk.fIota',    group: 'Contacted station', kind: 'text', upper: true },
+  { id: 'sig',      label: 'bulk.fSig',     group: 'Contacted station', kind: 'text' },
+  { id: 'sig_info', label: 'bulk.fSigInfo', group: 'Contacted station', kind: 'text' },
+  // Misc
+  // Frequency (MHz) — sets freq_hz AND recomputes band. Main use: fixing a batch
+  // logged on a stale/default frequency after CAT dropped.
+  { id: 'freq',    label: 'bulk.fFreq',    group: 'Misc', kind: 'freq' },
+  { id: 'comment', label: 'bulk.fComment', group: 'Misc', kind: 'text' },
+  { id: 'notes',   label: 'bulk.fNotes',   group: 'Misc', kind: 'text' },
+  { id: 'rig',     label: 'bulk.fRig',     group: 'Misc', kind: 'text' },
+  { id: 'ant',     label: 'bulk.fAnt',     group: 'Misc', kind: 'text' },
+];
+
+// label holds an i18n key.
+const STATUS_VALUES: { v: string; label: string }[] = [
+  { v: 'Y', label: 'bulk.statusY' },
+  { v: 'N', label: 'bulk.statusN' },
+  { v: 'R', label: 'bulk.statusR' },
+  { v: 'I', label: 'bulk.statusI' },
+  { v: '_', label: 'bulk.statusBlank' },
+];
+
+const GROUPS = ['QSL / upload', 'My station', 'Contacted station', 'Contest', 'Propagation', 'Misc'];
+// Maps the internal group key → its i18n label key.
+const GROUP_LABELS: Record<string, string> = {
+  'QSL / upload': 'bulk.groupQsl',
+  'My station': 'bulk.groupMyStation',
+  'Contacted station': 'bulk.groupContacted',
+  'Contest': 'bulk.groupContest',
+  'Propagation': 'bulk.groupPropagation',
+  'Misc': 'bulk.groupMisc',
+};
+
+type Props = {
+  open: boolean;
+  ids: number[];
+  onClose: () => void;
+  onApplied: (n: number) => void;
+};
+
+// BulkEditModal sets one QSL/upload status field to a chosen value across the
+// selected QSOs — e.g. flip a filtered batch of imported contacts from N to R
+// so they become eligible for upload.
+export function BulkEditModal({ open, ids, onClose, onApplied }: Props) {
+  const { t } = useI18n();
+  const [field, setField] = useState('qsl_sent');
+  const [statusValue, setStatusValue] = useState('R');
+  const [textValue, setTextValue] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  const def = useMemo(() => FIELDS.find((f) => f.id === field) ?? FIELDS[0], [field]);
+  const isStatus = def.kind === 'status';
+  const effectiveValue = isStatus
+    ? (statusValue === '_' ? '' : statusValue)
+    : textValue.trim();
+
+  async function apply() {
+    setBusy(true);
+    setError('');
+    try {
+      const n = await BulkUpdateField(ids as any, field, effectiveValue);
+      onApplied(Number(n) || 0);
+      onClose();
+    } catch (e: any) {
+      setError(String(e?.message ?? e));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => { if (!o) onClose(); }}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t('bulk.title')}</DialogTitle>
+          <DialogDescription>
+            {t('bulk.desc', { n: ids.length })}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="px-5 py-2 space-y-3">
+          <div className="grid grid-cols-[90px_1fr] gap-3 items-center">
+            <Label className="text-sm">{t('bulk.fieldLabel')}</Label>
+            <Select value={field} onValueChange={setField}>
+              <SelectTrigger className="h-8"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                {GROUPS.map((g) => (
+                  <div key={g}>
+                    <div className="px-2 py-1 text-[10px] uppercase tracking-wider text-muted-foreground">{t(GROUP_LABELS[g])}</div>
+                    {FIELDS.filter((f) => f.group === g)
+                      .map((f) => ({ f, txt: t(f.label) }))
+                      .sort((a, b) => a.txt.localeCompare(b.txt))
+                      .map(({ f, txt }) => (
+                        <SelectItem key={f.id} value={f.id}>{txt}</SelectItem>
+                      ))}
+                  </div>
+                ))}
+              </SelectContent>
+            </Select>
+
+            <Label className="text-sm">{t('bulk.valueLabel')}</Label>
+            {isStatus ? (
+              <Select value={statusValue} onValueChange={setStatusValue}>
+                <SelectTrigger className="h-8"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {STATUS_VALUES.map((v) => <SelectItem key={v.v} value={v.v}>{t(v.label)}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            ) : def.kind === 'date' ? (
+              // ADIF stores YYYYMMDD; the picker speaks YYYY-MM-DD. Clearing it
+              // writes an empty value — which is how a wrong date is removed
+              // from a batch, the same meaning as leaving a text field blank.
+              <div className="flex gap-1">
+                <Input
+                  type="date"
+                  className="h-8 text-xs font-mono"
+                  value={/^\d{8}$/.test(textValue) ? `${textValue.slice(0, 4)}-${textValue.slice(4, 6)}-${textValue.slice(6, 8)}` : ''}
+                  onChange={(e) => setTextValue(e.target.value ? e.target.value.replace(/-/g, '') : '')}
+                />
+                <Button
+                  type="button" variant="outline" size="sm" className="h-8 shrink-0 px-2"
+                  title={t('bulk.todayUtc')}
+                  onClick={() => {
+                    const d = new Date();
+                    const pad = (n: number) => String(n).padStart(2, '0');
+                    // UTC: the whole log is UTC, and near midnight the local day
+                    // is the wrong one.
+                    setTextValue(`${d.getUTCFullYear()}${pad(d.getUTCMonth() + 1)}${pad(d.getUTCDate())}`);
+                  }}
+                >{t('bulk.today')}</Button>
+              </div>
+            ) : (
+              <Input
+                className="h-8 text-xs"
+                value={textValue}
+                inputMode={def.kind === 'freq' ? 'decimal' : undefined}
+                placeholder={def.kind === 'freq' ? t('bulk.freqPlaceholder') : t('bulk.clearPlaceholder')}
+                onChange={(e) => setTextValue(def.upper ? e.target.value.toUpperCase() : e.target.value)}
+              />
+            )}
+          </div>
+
+          <div className="text-[11px] text-muted-foreground">
+            {t('bulk.willSet')} <span className="font-semibold">{t(def.label)}</span> ={' '}
+            <span className="font-mono">{effectiveValue === '' ? t('bulk.blank') : effectiveValue}{def.kind === 'freq' && effectiveValue !== '' ? ' MHz' : ''}</span> {t('bulk.onQsos', { n: ids.length })}
+          </div>
+          {error && <div className="text-xs text-danger">{error}</div>}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={busy}>{t('bulk.cancel')}</Button>
+          <Button onClick={apply} disabled={busy || ids.length === 0}>
+            {busy ? <Loader2 className="size-3.5 animate-spin" /> : null}
+            {t('bulk.applyTo', { n: ids.length })}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/CallHistoryPanel.tsx

@@ -1,5 +1,6 @@
 import { Star } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
+import { useI18n } from '@/lib/i18n';
 import type { WorkedBeforeView } from '@/types';
 
 type WorkedBefore = WorkedBeforeView;
@@ -26,6 +27,7 @@ function fmtDateTime(s: any): string {
 }
 
 export function CallHistoryPanel({ wb, busy, currentCall }: Props) {
+  const { t } = useI18n();
   const hasCall = currentCall.trim() !== '';
   const count = wb?.count ?? 0;
   const entries = wb?.entries ?? [];
@@ -35,7 +37,7 @@ export function CallHistoryPanel({ wb, busy, currentCall }: Props) {
       <header className="flex items-center justify-between px-3 py-2 border-b border-border bg-muted/40">
         <div className="flex items-baseline gap-2">
           <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
-            Worked before
+            {t('chp.workedBefore')}
           </span>
           {hasCall && (
             <span className="font-mono text-sm font-bold text-primary tracking-wider">
@@ -52,54 +54,54 @@ export function CallHistoryPanel({ wb, busy, currentCall }: Props) {
 
       {!hasCall ? (
         <div className="flex-1 flex flex-col items-center justify-center gap-2 p-6 text-center text-xs text-muted-foreground">
-          Type a callsign to see prior contacts.
+          {t('chp.typeCallsign')}
         </div>
       ) : busy && count === 0 ? (
         <div className="flex-1 flex items-center justify-center text-xs text-muted-foreground italic">
-          checking…
+          {t('chp.checking')}
         </div>
       ) : count === 0 ? (
         <div className="flex-1 flex flex-col items-center justify-center gap-2 p-6 text-center text-xs text-muted-foreground">
           <Star className="size-6 text-primary fill-current" />
-          <div className="text-lg font-bold text-primary tracking-wider">NEW</div>
-          <div>No prior QSO with this callsign.</div>
+          <div className="text-lg font-bold text-primary tracking-wider">{t('chp.new')}</div>
+          <div>{t('chp.noPriorQso')}</div>
         </div>
       ) : (
         <>
           <div className="px-3 py-1.5 text-[11px] text-muted-foreground bg-muted/40 border-b border-border">
-            First: <strong className="text-foreground font-semibold">{fmtDate(wb?.first)}</strong> ·{' '}
-            Last: <strong className="text-foreground font-semibold">{fmtDate(wb?.last)}</strong>
+            {t('chp.first')}: <strong className="text-foreground font-semibold">{fmtDate(wb?.first)}</strong> ·{' '}
+            {t('chp.last')}: <strong className="text-foreground font-semibold">{fmtDate(wb?.last)}</strong>
           </div>
           <div className="flex-1 overflow-y-auto">
             <table className="w-full text-[11px] border-collapse">
               <thead>
                 <tr>
-                  <th className="sticky top-0 bg-stone-200 text-left px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground border-b border-border">Date UTC</th>
-                  <th className="sticky top-0 bg-stone-200 text-left px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground border-b border-border">Band</th>
-                  <th className="sticky top-0 bg-stone-200 text-left px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground border-b border-border">Mode</th>
-                  <th className="sticky top-0 bg-stone-200 text-left px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground border-b border-border">RST tx</th>
-                  <th className="sticky top-0 bg-stone-200 text-left px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground border-b border-border">RST rx</th>
-                  <th className="sticky top-0 bg-stone-200 text-left px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground border-b border-border">QSL</th>
+                  <th className="sticky top-0 bg-muted text-left px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground border-b border-border">{t('chp.dateUtc')}</th>
+                  <th className="sticky top-0 bg-muted text-left px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground border-b border-border">{t('chp.band')}</th>
+                  <th className="sticky top-0 bg-muted text-left px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground border-b border-border">{t('chp.mode')}</th>
+                  <th className="sticky top-0 bg-muted text-left px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground border-b border-border">RST tx</th>
+                  <th className="sticky top-0 bg-muted text-left px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground border-b border-border">RST rx</th>
+                  <th className="sticky top-0 bg-muted text-left px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground border-b border-border">QSL</th>
                 </tr>
               </thead>
               <tbody>
                 {entries.map((e) => (
-                  <tr key={e.id} className="hover:bg-stone-50">
+                  <tr key={e.id} className="hover:bg-card">
                     <td className="px-2 py-1 font-mono border-b border-border/40 whitespace-nowrap">{fmtDateTime(e.qso_date)}</td>
                     <td className="px-2 py-1 border-b border-border/40 whitespace-nowrap">
                       <span className="inline-block px-1.5 py-0.5 rounded font-mono text-[10px] font-semibold bg-accent text-accent-foreground">{e.band}</span>
                     </td>
                     <td className="px-2 py-1 border-b border-border/40 whitespace-nowrap">
-                      <span className="inline-block px-1.5 py-0.5 rounded font-mono text-[10px] font-semibold bg-emerald-100 text-emerald-700">{e.mode}</span>
+                      <span className="inline-block px-1.5 py-0.5 rounded font-mono text-[10px] font-semibold bg-success-muted text-success-muted-foreground">{e.mode}</span>
                     </td>
                     <td className="px-2 py-1 font-mono border-b border-border/40 whitespace-nowrap">{e.rst_sent ?? ''}</td>
                     <td className="px-2 py-1 font-mono border-b border-border/40 whitespace-nowrap">{e.rst_rcvd ?? ''}</td>
                     <td className="px-2 py-1 border-b border-border/40 whitespace-nowrap text-muted-foreground">
                       {e.lotw_rcvd === 'Y' && (
-                        <span className="inline-block w-[14px] h-[14px] rounded text-center leading-[14px] text-[9px] font-bold text-white bg-blue-600 mr-0.5" title="LoTW rcvd">L</span>
+                        <span className="inline-block w-[14px] h-[14px] rounded text-center leading-[14px] text-[9px] font-bold text-info-foreground bg-info mr-0.5" title={t('chp.lotwRcvd')}>L</span>
                       )}
                       {e.qsl_rcvd === 'Y' && (
-                        <span className="inline-block w-[14px] h-[14px] rounded text-center leading-[14px] text-[9px] font-bold text-white bg-emerald-600 mr-0.5" title="Bureau rcvd">B</span>
+                        <span className="inline-block w-[14px] h-[14px] rounded text-center leading-[14px] text-[9px] font-bold text-success-foreground bg-success mr-0.5" title={t('chp.bureauRcvd')}>B</span>
                       )}
                     </td>
                   </tr>
@@ -108,7 +110,7 @@ export function CallHistoryPanel({ wb, busy, currentCall }: Props) {
             </table>
             {count > entries.length && (
               <div className="text-center py-1.5 text-[11px] italic text-muted-foreground">
-                + {count - entries.length} older QSOs
+                {t('chp.olderQsos', { n: count - entries.length })}
               </div>
             )}
           </div>

frontend/src/components/ChatPopover.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useRef, useState } from 'react';
+import { MessageSquare, Send, Users, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
+
+export type ChatMsg = { id: number; operator: string; station: string; message: string; created_at: string };
+export type ChatPresence = { operator: string; station: string; ago_secs: number };
+
+function hhmm(iso: string): string {
+  const d = new Date(iso);
+  if (isNaN(d.getTime())) return '';
+  const p = (n: number) => String(n).padStart(2, '0');
+  return `${p(d.getUTCHours())}:${p(d.getUTCMinutes())}`;
+}
+
+// ChatPanel — presentational multi-op chat panel, docked in the aside row next
+// to the rotor / WinKeyer / DVK panels. All data + state lives in App.tsx.
+export function ChatPanel({ msgs, online, myCall, onSend, onClose }: {
+  msgs: ChatMsg[]; online: ChatPresence[]; myCall?: string;
+  onSend: (text: string) => void; onClose: () => void;
+}) {
+  const { t } = useI18n();
+  const [text, setText] = useState('');
+  const listRef = useRef<HTMLDivElement>(null);
+  const me = (myCall || '').toUpperCase();
+  useEffect(() => { const el = listRef.current; if (el) el.scrollTop = el.scrollHeight; }, [msgs]);
+
+  function send() {
+    const t = text.trim();
+    if (!t) return;
+    setText('');
+    onSend(t);
+  }
+
+  return (
+    <div className="h-full flex flex-col rounded-xl border border-border bg-card shadow-sm overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border/60 bg-muted/30 shrink-0">
+        <MessageSquare className="size-4 text-info" />
+        <span className="text-xs font-bold uppercase tracking-wider text-foreground/80">{t('chatp.chat')}</span>
+        <span className="flex-1" />
+        {/* Online count — hover to see who's connected. */}
+        <div className="relative group">
+          <span className="inline-flex items-center gap-1 text-[11px] text-muted-foreground cursor-default">
+            <Users className="size-3.5" />{online.length}
+          </span>
+          {online.length > 0 && (
+            <div className="hidden group-hover:block absolute right-0 top-5 z-20 min-w-[130px] rounded-md border border-border bg-popover shadow-lg p-1.5">
+              <div className="text-[9px] uppercase tracking-wider text-muted-foreground mb-1">{t('chatp.online')}</div>
+              {online.map((o) => (
+                <div key={o.operator} className="font-mono text-[11px] whitespace-nowrap">
+                  {o.operator}{o.station && o.station.toUpperCase() !== o.operator.toUpperCase() ? <span className="text-muted-foreground"> · {o.station}</span> : null}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+        <button type="button" onClick={onClose} className="ml-1 text-muted-foreground hover:text-foreground" title={t('chatp.close')}>
+          <X className="size-3.5" />
+        </button>
+      </div>
+
+      <div ref={listRef} className="flex-1 min-h-0 overflow-y-auto px-3 py-2 space-y-1.5 text-xs">
+        {msgs.length === 0 ? (
+          <div className="text-muted-foreground italic text-center py-6">{t('chatp.noMessages')}</div>
+        ) : msgs.map((m) => {
+          const mine = m.operator.toUpperCase() === me;
+          return (
+            <div key={m.id} className={cn('flex flex-col', mine && 'items-end')}>
+              <div className={cn('max-w-[85%] rounded-lg px-2 py-1', mine ? 'bg-info-muted text-info-muted-foreground' : 'bg-muted')}>
+                {!mine && <span className="font-mono font-bold text-[10px] text-primary mr-1">{m.operator}</span>}
+                <span className="whitespace-pre-wrap break-words">{m.message}</span>
+              </div>
+              <span className="text-[9px] text-muted-foreground/70 px-1">{hhmm(m.created_at)}</span>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="flex items-center gap-1.5 p-2 border-t border-border/60 shrink-0">
+        <input
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); send(); } }}
+          placeholder={t('chatp.messagePh')}
+          maxLength={1000}
+          className="flex-1 h-8 rounded-md border border-border bg-background px-2 text-xs outline-none focus:border-primary"
+        />
+        <button type="button" onClick={send} disabled={!text.trim()}
+          className="inline-flex items-center justify-center size-8 rounded-md bg-primary text-primary-foreground disabled:opacity-40">
+          <Send className="size-3.5" />
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ClusterGrid.tsx

@@ -1,40 +1,26 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
-  AllCommunityModule, ModuleRegistry, themeQuartz,
+  AllCommunityModule, ModuleRegistry,
   type ColDef, type ColumnState, type GridReadyEvent, type RowClickedEvent,
 } from 'ag-grid-community';
+import { hamlogGridTheme } from '@/lib/gridTheme';
 import { AgGridReact } from 'ag-grid-react';
-import { Columns3 } from 'lucide-react';
+import { Columns3, FilterX } from 'lucide-react';
 import {
   Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { cleanSpotter, inferSpotMode, spotStatusKey } from '@/lib/spot';
+import { markerColour } from '@/lib/spotMarkers';
+import { loadLocal, loadRemote, saveState, seedLocal, whenGridPrefsReady } from '@/lib/gridPrefs';
+import { useI18n } from '@/lib/i18n';
+
+type TFn = (key: string, vars?: Record<string, string | number>) => string;
 
 ModuleRegistry.registerModules([AllCommunityModule]);
 
-const hamlogTheme = themeQuartz.withParams({
-  fontFamily: 'inherit',
-  fontSize: 12.5,
-  backgroundColor: '#faf6ea',
-  foregroundColor: '#2a2419',
-  headerBackgroundColor: '#e8dfc9',
-  headerTextColor: '#5a4f3a',
-  headerFontWeight: 600,
-  oddRowBackgroundColor: '#f5efe0',
-  rowHoverColor: '#ecdcb4',
-  selectedRowBackgroundColor: '#f0d9a8',
-  borderColor: '#c8b994',
-  rowBorder: { color: '#d8c9a8', width: 1 },
-  columnBorder: { color: '#d8c9a8', width: 1 },
-  cellHorizontalPadding: 10,
-  rowHeight: 30,
-  headerHeight: 32,
-  spacing: 4,
-  accentColor: '#b8410c',
-  iconSize: 12,
-});
+const hamlogTheme = hamlogGridTheme;
 
 export type ClusterSpot = {
   source_id: number;
@@ -57,6 +43,8 @@ export type ClusterSpot = {
   received_at: string;
   raw: string;
   repeats?: number;
+  pota_ref?: string;
+  pota_name?: string;
 };
 
 export type SpotStatusEntry = {
@@ -64,6 +52,10 @@ export type SpotStatusEntry = {
   country?: string;
   continent?: string;
   worked_call?: boolean;
+  new_county?: boolean;
+  new_pota?: boolean;
+  new_pfx?: boolean;
+  pfx?: string;
 };
 
 type Props = {
@@ -102,199 +94,330 @@ function fmtDateTimeUTC(s: any): string {
 
 type ColEntry = ColDef<ClusterSpot> & { group: string; label: string; defaultVisible?: boolean };
 
-const COL_CATALOG: ColEntry[] = [
+// statusFor resolves the precomputed spot status (new / new-band / new-slot /
+// worked-call) for an ag-Grid cell's row.
+function statusFor(p: any): SpotStatusEntry | undefined {
+  return p?.context?.spotStatus?.[
+    spotStatusKey(p.data?.dx_call, p.data?.band ?? '', p.data?.comment ?? '', p.data?.freq_hz)
+  ];
+}
+
+// Spot status is shown by COLOURING THE TEXT, never by a pill or a badge.
+//
+// The pills were dropped: a rounded box has its own height and padding, so it
+// sat off the row's baseline and the callsign inside it no longer lined up with
+// the plain callsigns above and below. A whole column of them read as chrome
+// rather than as data. Same reasoning — and the same semantic tokens — as the
+// Y/N/R QSL columns in lib/qslStatus.ts.
+//
+// Which cell is coloured IS the message, so one colour is enough for all three:
+//
+//   yellow call → new DXCC     yellow band → new band     yellow mode → new mode
+//   blue call   → already worked
+const NEW = 'var(--warning)'; // yellow: something here is new
+const WKD = 'var(--info)';    // blue: this callsign is already in the log
+
+// cellText renders a cell value in an optional colour. An empty value keeps the
+// muted dash the grid used before, so blank cells still read as "nothing here"
+// rather than as a gap.
+function cellText(value: any, color: string | null): any {
+  const txt = value === undefined || value === null || value === '' ? '' : String(value);
+  if (!txt) return <span style={{ color: 'var(--muted-foreground)', fontSize: 10 }}>—</span>;
+  return <span style={color ? { color, fontWeight: 700 } : undefined}>{txt}</span>;
+}
+
+// statusColor is the colour for a resolved status in the Status column. County,
+// POTA and prefix keep their own tokens: they are orthogonal to the band/mode/
+// DXCC story and an operator filters on them separately.
+function statusColor(s: SpotStatusEntry | undefined): string | null {
+  switch (s?.status) {
+    case 'new':
+    case 'new-band':
+    case 'new-mode':
+    case 'new-slot':
+      return NEW;
+    default:
+      return s?.worked_call ? WKD : null;
+  }
+}
+
+// isDull reports a spot that "represents nothing" under the current worked/slot
+// rules: the entity/band/mode is already worked (status resolved, not new in any
+// dimension), the callsign itself isn't in the log, and there's no POTA / county
+// / prefix novelty. Such rows are dimmed so the eye skips them. Because the
+// status obeys the DX-cluster "same slot" option and the digital-mode grouping,
+// what counts as dull follows those settings automatically. Unresolved statuses
+// (still loading, or entity unknown) are NOT dimmed — that would flicker.
+function isDull(s: SpotStatusEntry | undefined): boolean {
+  if (!s || !s.status) return false;
+  if (s.status === 'new' || s.status === 'new-band' || s.status === 'new-mode' || s.status === 'new-slot') return false;
+  return !(s.worked_call || s.new_pota || s.new_county || s.new_pfx);
+}
+
+const makeColCatalog = (t: TFn): ColEntry[] => [
   {
-    group: 'Spot', label: 'Time',  colId: 'time',
-    headerName: 'Time', field: 'time_utc' as any, width: 80, cellClass: 'font-mono',
+    group: 'Spot', label: t('clg2.c.time'),  colId: 'time',
+    headerName: t('clg2.c.time'), field: 'time_utc' as any, width: 80, cellClass: 'font-mono',
     defaultVisible: true,
     sort: 'desc',
-    cellStyle: { color: '#7a6b50' },
+    // Sort by the real arrival timestamp, NOT the "HHMMZ" display string. A
+    // lexical sort of time_utc breaks at the UTC day rollover: "0001Z" sorts
+    // below "2359Z", so spots received just after midnight fell to the bottom
+    // and looked like the cluster had stopped. received_at is a full datetime
+    // that keeps ordering correct across 0000Z.
+    comparator: (_a: any, _b: any, nodeA: any, nodeB: any) => {
+      const ta = Date.parse(nodeA?.data?.received_at ?? '') || 0;
+      const tb = Date.parse(nodeB?.data?.received_at ?? '') || 0;
+      return ta - tb;
+    },
+    cellStyle: { color: 'var(--muted-foreground)' },
   },
   {
-    group: 'Spot', label: 'Call',  colId: 'call',
-    headerName: 'Call', field: 'dx_call' as any, width: 120,
+    group: 'Spot', label: t('clg2.c.call'),  colId: 'call',
+    headerName: t('clg2.c.call'), field: 'dx_call' as any, width: 120,
     defaultVisible: true,
+    cellClass: 'font-mono',
+    // NEW DXCC → yellow call. Already worked → blue call. Anything else keeps
+    // the theme's normal ink so ordinary callsigns don't shout.
     cellRenderer: (p: any) => {
-      if (!p.value) return '';
-      const status: SpotStatusEntry | undefined = p.context?.spotStatus?.[
-        spotStatusKey(p.data.dx_call, p.data.band ?? '', p.data.comment ?? '', p.data.freq_hz)
-      ];
-      const isNew = status?.status === 'new';
-      const workedCall = !!status?.worked_call;
-      const style: any = {
-        display: 'inline-block', padding: '1px 6px', borderRadius: 4,
-        fontFamily: 'ui-monospace, monospace', fontWeight: 700, fontSize: 12,
-      };
-      if (isNew) {
-        style.backgroundColor = '#ffe4e6';
-        style.color = '#9f1239';
-        style.border = '1px solid #fda4af';
-      } else if (workedCall) {
-        style.color = '#0369a1';
-      } else {
-        style.color = '#b8410c';
-      }
-      return <span style={style} title={isNew ? `NEW DXCC: ${status?.country ?? ''}` : workedCall ? 'Already worked this call' : undefined}>{p.value}</span>;
+      const s = statusFor(p);
+      const color = s?.status === 'new' ? NEW : s?.worked_call ? WKD : null;
+      return <span style={{ color: color ?? undefined, fontWeight: 700 }}>{p.value ?? ''}</span>;
+    },
+    tooltipValueGetter: (p: any) => {
+      const s = statusFor(p);
+      return s?.status === 'new' ? t('clg2.tipNewDxcc', { country: s?.country ?? '' }) : s?.worked_call ? t('clg2.tipWorkedCall') : undefined;
     },
   },
   {
-    group: 'Spot', label: 'Freq', colId: 'freq',
-    headerName: 'Freq', field: 'freq_khz' as any, width: 95, type: 'rightAligned', cellClass: 'font-mono',
+    group: 'Spot', label: t('clg2.c.status'), colId: 'status',
+    headerName: t('clg2.c.status'), width: 120, sortable: true,
+    defaultVisible: true,
+    // Spells the status out in words so NEW SLOT (and the others) is obvious at
+    // the row level, not just a single coloured cell — NEW SLOT in particular
+    // colours no cell at all, since neither the band nor the mode is new on its
+    // own. NEW COUNTY and NEW POTA are orthogonal, so they stack after it.
+    valueGetter: (p: any) => {
+      const s = statusFor(p);
+      const parts: string[] = [];
+      if (s?.status === 'new') parts.push(t('clg2.newDxcc'));
+      else if (s?.status === 'new-band') parts.push(t('clg2.newBand'));
+      else if (s?.status === 'new-mode') parts.push(t('clg2.newMode'));
+      else if (s?.status === 'new-slot') parts.push(t('clg2.newSlot'));
+      else if (s?.worked_call) parts.push(t('clg2.wkdCall'));
+      if (s?.new_county) parts.push(t('clg2.newCounty'));
+      if (s?.new_pota) parts.push(t('clg2.newPota'));
+      if (s?.new_pfx) parts.push(t('clg2.newPfx'));
+      return parts.join(' ');
+    },
+    cellRenderer: (p: any) => {
+      const s = statusFor(p);
+      const parts: { text: string; color: string }[] = [];
+      const main = statusColor(s);
+      if (main) {
+        const label = s?.status === 'new' ? t('clg2.newDxcc')
+          : s?.status === 'new-band' ? t('clg2.newBand')
+            : s?.status === 'new-mode' ? t('clg2.newMode')
+              : s?.status === 'new-slot' ? t('clg2.newSlot')
+                : t('clg2.wkdCall');
+        parts.push({ text: label, color: main });
+      }
+      // Colours from lib/spotMarkers — shared with the band map so a marker is
+      // never one colour here and another there.
+      if (s?.new_county) parts.push({ text: t('clg2.newCounty'), color: markerColour('new_county') });
+      if (s?.new_pota) parts.push({ text: t('clg2.newPota'), color: markerColour('new_pota') });
+      if (s?.new_pfx) parts.push({ text: t('clg2.newPfx'), color: markerColour('new_pfx') });
+      if (parts.length === 0) return <span style={{ color: 'var(--muted-foreground)', fontSize: 10 }}>—</span>;
+      return (
+        <span style={{ whiteSpace: 'nowrap' }}>
+          {parts.map((pt, i) => (
+            <span key={i} style={{ color: pt.color, fontWeight: 700 }}>
+              {i > 0 ? ' · ' : ''}{pt.text}
+            </span>
+          ))}
+        </span>
+      );
+    },
+    tooltipValueGetter: (p: any) => {
+      const s = statusFor(p);
+      if (s?.status === 'new') return t('clg2.tipNewDxcc', { country: s?.country ?? '' });
+      if (s?.status === 'new-band') return t('clg2.tipNewBand');
+      if (s?.status === 'new-slot') return t('clg2.tipNewSlotBand');
+      if (s?.worked_call) return t('clg2.tipWorkedCall');
+      return undefined;
+    },
+  },
+  {
+    group: 'Spot', label: t('clg2.c.pota'), colId: 'pota',
+    headerName: t('clg2.c.pota'), field: 'pota_ref' as any, width: 92, cellClass: 'font-mono',
+    defaultVisible: true,
+    cellStyle: { color: 'var(--success)' },
+    tooltipValueGetter: (p: any) => (p.data?.pota_name ? t('clg2.tipPota', { name: p.data.pota_name }) : undefined),
+  },
+  {
+    group: 'Spot', label: t('clg2.c.freq'), colId: 'freq',
+    headerName: t('clg2.c.freq'), field: 'freq_khz' as any, width: 95, type: 'rightAligned', cellClass: 'font-mono',
     defaultVisible: true,
     valueFormatter: (p) => typeof p.value === 'number' ? p.value.toFixed(1) : '',
     comparator: (a, b) => (a ?? 0) - (b ?? 0),
   },
   {
-    group: 'Spot', label: 'Band', colId: 'band',
-    headerName: 'Band', field: 'band' as any, width: 75,
+    group: 'Spot', label: t('clg2.c.band'), colId: 'band',
+    headerName: t('clg2.c.band'), field: 'band' as any, width: 75,
     defaultVisible: true,
-    cellClass: 'flex items-center',
-    cellRenderer: (p: any) => {
-      const status: SpotStatusEntry | undefined = p.context?.spotStatus?.[
-        spotStatusKey(p.data.dx_call, p.data.band ?? '', p.data.comment ?? '', p.data.freq_hz)
-      ];
-      const newBand = status?.status === 'new-band';
-      const bg = newBand ? '#fde68a' : '#f0d9a8';
-      const fg = newBand ? '#92400e' : '#7a4a14';
-      return p.value
-        ? <span
-            style={{
-              display: 'inline-block', padding: '2px 8px', borderRadius: 6,
-              fontFamily: 'ui-monospace, monospace', fontSize: 11, fontWeight: 600,
-              backgroundColor: bg, color: fg, lineHeight: '16px',
-              border: newBand ? '1px solid #f59e0b' : undefined,
-            }}
-            title={newBand ? 'NEW BAND for this entity' : undefined}
-          >{p.value}</span>
-        : '';
-    },
+    cellClass: 'font-mono',
+    // NEW BAND for this entity → the band text turns yellow.
+    cellRenderer: (p: any) => cellText(p.value, statusFor(p)?.status === 'new-band' ? NEW : null),
+    tooltipValueGetter: (p: any) => (statusFor(p)?.status === 'new-band' ? t('clg2.tipNewBand') : undefined),
   },
   {
-    group: 'Spot', label: 'Mode', colId: 'mode',
-    headerName: 'Mode', colSpan: undefined, width: 80,
+    group: 'Spot', label: t('clg2.c.mode'), colId: 'mode',
+    headerName: t('clg2.c.mode'), colSpan: undefined, width: 80,
     defaultVisible: true,
-    cellClass: 'flex items-center',
+    cellClass: 'font-mono',
     valueGetter: (p: any) => p.data ? inferSpotMode(p.data.comment ?? '', p.data.freq_hz) : '',
-    cellRenderer: (p: any) => {
-      const status: SpotStatusEntry | undefined = p.context?.spotStatus?.[
-        spotStatusKey(p.data.dx_call, p.data.band ?? '', p.data.comment ?? '', p.data.freq_hz)
-      ];
-      const newSlot = status?.status === 'new-slot';
-      const bg = newSlot ? '#fef08a' : '#d1fae5';
-      const fg = newSlot ? '#854d0e' : '#047857';
-      return p.value
-        ? <span
-            style={{
-              display: 'inline-block', padding: '2px 8px', borderRadius: 6,
-              fontFamily: 'ui-monospace, monospace', fontSize: 11, fontWeight: 600,
-              backgroundColor: bg, color: fg, lineHeight: '16px',
-              border: newSlot ? '1px solid #eab308' : undefined,
-            }}
-            title={newSlot ? 'NEW SLOT (mode not yet worked on this band)' : undefined}
-          >{p.value}</span>
-        : <span style={{ color: '#a8a29e', fontSize: 10 }}>—</span>;
+    // Only NEW MODE pills the mode cell — there the mode itself is genuinely new
+    // for the entity. NEW SLOT means band AND mode were each worked before (just
+    // not together), so highlighting the mode cell would wrongly imply "CW is new";
+    // that case is signalled by the Status badge alone.
+    cellRenderer: (p: any) => cellText(p.value, statusFor(p)?.status === 'new-mode' ? NEW : null),
+    tooltipValueGetter: (p: any) => {
+      const st = statusFor(p)?.status;
+      if (st === 'new-mode') return t('clg2.tipNewMode');
+      if (st === 'new-slot') return t('clg2.tipNewSlot');
+      return undefined;
     },
   },
   {
-    group: 'Spot', label: 'Pfx', colId: 'pfx',
-    headerName: 'Pfx', width: 60, cellClass: 'font-mono',
+    group: 'Spot', label: t('clg2.c.pfx'), colId: 'pfx',
+    headerName: t('clg2.c.pfx'), width: 60, cellClass: 'font-mono',
     valueGetter: (p: any) => fmtPfx(p.data?.dx_call ?? ''),
-    cellStyle: { color: '#7a6b50' },
+    cellStyle: { color: 'var(--muted-foreground)' },
   },
   {
-    group: 'Geo', label: 'CQ Zone', colId: 'cqz',
-    headerName: 'CQZ', field: 'cqz' as any, width: 60, type: 'rightAligned', cellClass: 'font-mono',
+    group: 'Geo', label: t('clg2.c.cqz'), colId: 'cqz',
+    headerName: t('clg2.h.cqz'), field: 'cqz' as any, width: 60, type: 'rightAligned', cellClass: 'font-mono',
     valueFormatter: (p) => p.value ? String(p.value) : '',
   },
   {
-    group: 'Geo', label: 'ITU Zone', colId: 'ituz',
-    headerName: 'ITU', field: 'ituz' as any, width: 60, type: 'rightAligned', cellClass: 'font-mono',
+    group: 'Geo', label: t('clg2.c.ituz'), colId: 'ituz',
+    headerName: t('clg2.h.ituz'), field: 'ituz' as any, width: 60, type: 'rightAligned', cellClass: 'font-mono',
     valueFormatter: (p) => p.value ? String(p.value) : '',
   },
   {
-    group: 'Geo', label: 'Distance (km)', colId: 'distance_km',
-    headerName: 'Dist km', field: 'distance_km' as any, width: 80, type: 'rightAligned', cellClass: 'font-mono',
+    group: 'Geo', label: t('clg2.c.distance_km'), colId: 'distance_km',
+    headerName: t('clg2.h.distance_km'), field: 'distance_km' as any, width: 80, type: 'rightAligned', cellClass: 'font-mono',
     valueFormatter: (p) => p.value ? String(p.value) : '',
     comparator: (a, b) => (a ?? 0) - (b ?? 0),
   },
   {
-    group: 'Geo', label: 'Short path (°)', colId: 'sp_deg',
-    headerName: 'SP°', field: 'sp_deg' as any, width: 60, type: 'rightAligned', cellClass: 'font-mono',
+    group: 'Geo', label: t('clg2.c.sp_deg'), colId: 'sp_deg',
+    headerName: t('clg2.h.sp_deg'), field: 'sp_deg' as any, width: 60, type: 'rightAligned', cellClass: 'font-mono',
     valueFormatter: (p) => (p.value || p.value === 0) ? String(p.value) : '',
     comparator: (a, b) => (a ?? 0) - (b ?? 0),
   },
   {
-    group: 'Geo', label: 'Long path (°)', colId: 'lp_deg',
-    headerName: 'LP°', field: 'lp_deg' as any, width: 60, type: 'rightAligned', cellClass: 'font-mono',
+    group: 'Geo', label: t('clg2.c.lp_deg'), colId: 'lp_deg',
+    headerName: t('clg2.h.lp_deg'), field: 'lp_deg' as any, width: 60, type: 'rightAligned', cellClass: 'font-mono',
     valueFormatter: (p) => (p.value || p.value === 0) ? String(p.value) : '',
     comparator: (a, b) => (a ?? 0) - (b ?? 0),
   },
   {
-    group: 'Spot', label: 'Country', colId: 'country',
-    headerName: 'Country', width: 140,
+    group: 'Spot', label: t('clg2.c.country'), colId: 'country',
+    headerName: t('clg2.c.country'), width: 140,
     defaultVisible: true,
     valueGetter: (p: any) => p.data?.country ?? p.context?.spotStatus?.[
       spotStatusKey(p.data?.dx_call, p.data?.band ?? '', p.data?.comment ?? '', p.data?.freq_hz)
     ]?.country ?? '',
-    cellStyle: { color: '#7a6b50' },
+    cellStyle: { color: 'var(--muted-foreground)' },
   },
   {
-    group: 'Spot', label: 'Continent', colId: 'continent',
-    headerName: 'Cont', width: 60, cellClass: 'font-mono',
+    group: 'Spot', label: t('clg2.c.continent'), colId: 'continent',
+    headerName: t('clg2.h.continent'), width: 60, cellClass: 'font-mono',
     defaultVisible: true,
     valueGetter: (p: any) => p.data?.continent ?? p.context?.spotStatus?.[
       spotStatusKey(p.data?.dx_call, p.data?.band ?? '', p.data?.comment ?? '', p.data?.freq_hz)
     ]?.continent ?? '',
-    cellStyle: { color: '#7a6b50', fontSize: 10 },
+    cellStyle: { color: 'var(--muted-foreground)', fontSize: 10 },
   },
   {
-    group: 'Spot', label: 'Spotter', colId: 'spotter',
-    headerName: 'Spotter', field: 'spotter' as any, width: 100, cellClass: 'font-mono',
+    group: 'Spot', label: t('clg2.c.spotter'), colId: 'spotter',
+    headerName: t('clg2.c.spotter'), field: 'spotter' as any, width: 100, cellClass: 'font-mono',
     defaultVisible: true,
     valueFormatter: (p) => cleanSpotter(p.value ?? ''),
-    cellStyle: { color: '#7a6b50' },
+    cellStyle: { color: 'var(--muted-foreground)' },
   },
   {
-    group: 'Spot', label: 'Source', colId: 'source',
-    headerName: 'Source', field: 'source_name' as any, width: 100,
+    group: 'Spot', label: t('clg2.c.source'), colId: 'source',
+    headerName: t('clg2.c.source'), field: 'source_name' as any, width: 100,
     defaultVisible: true,
-    cellStyle: { color: '#9a8870', fontSize: 10 },
+    cellStyle: { color: 'var(--muted-foreground)', fontSize: 10 },
   },
   {
-    group: 'Spot', label: 'Locator', colId: 'locator',
-    headerName: 'Loc', field: 'locator' as any, width: 80, cellClass: 'font-mono',
-    cellStyle: { color: '#7a6b50' },
+    group: 'Spot', label: t('clg2.c.locator'), colId: 'locator',
+    headerName: t('clg2.h.locator'), field: 'locator' as any, width: 80, cellClass: 'font-mono',
+    cellStyle: { color: 'var(--muted-foreground)' },
   },
   {
-    group: 'Spot', label: 'Comment', colId: 'comment',
-    headerName: 'Comment', field: 'comment' as any, flex: 1, minWidth: 160,
+    group: 'Spot', label: t('clg2.c.comment'), colId: 'comment',
+    headerName: t('clg2.c.comment'), field: 'comment' as any, flex: 1, minWidth: 160,
     defaultVisible: true,
-    cellStyle: { color: '#7a6b50' },
+    cellStyle: { color: 'var(--muted-foreground)' },
   },
   {
-    group: 'Spot', label: 'Received at', colId: 'received_at',
-    headerName: 'Received UTC', field: 'received_at' as any, width: 160, cellClass: 'font-mono',
+    group: 'Spot', label: t('clg2.c.received_at'), colId: 'received_at',
+    headerName: t('clg2.h.received_at'), field: 'received_at' as any, width: 160, cellClass: 'font-mono',
     valueFormatter: (p) => fmtDateTimeUTC(p.value),
   },
   {
-    group: 'Spot', label: 'Raw', colId: 'raw',
-    headerName: 'Raw', field: 'raw' as any, width: 300, cellClass: 'font-mono',
+    group: 'Spot', label: t('clg2.c.raw'), colId: 'raw',
+    headerName: t('clg2.c.raw'), field: 'raw' as any, width: 300, cellClass: 'font-mono',
   },
 ];
 
 const GROUP_ORDER = ['Spot', 'Geo'];
 
+const CLG_GRP_KEYS: Record<string, string> = { Spot: 'clg2.grpSpot', Geo: 'clg2.grpGeo' };
+const groupLabel = (t: TFn, g: string): string => t(CLG_GRP_KEYS[g] ?? g);
+
 export function ClusterGrid({ rows, spotStatus, onSpotClick }: Props) {
+  const { t } = useI18n();
   const gridRef = useRef<any>(null);
   const [pickerOpen, setPickerOpen] = useState(false);
 
-  const columnDefs = useMemo<ColDef<ClusterSpot>[]>(() => COL_CATALOG.map((c) => {
+  // Localized column catalog — rebuilt when the language changes.
+  const COL_CATALOG = useMemo(() => makeColCatalog(t), [t]);
+
+  // A rebuild makes AG Grid re-apply every colDef hide/width DEFAULT and fire the
+  // matching column events. Without this guard those events were persisted, so a
+  // single language change overwrote the saved cluster layout — in the cache AND
+  // in the database, with nothing to restore from.
+  const restoringRef = useRef(true);
+
+  const columnDefs = useMemo<ColDef<ClusterSpot>[]>(() => {
+    restoringRef.current = true;
+    return COL_CATALOG.map((c) => {
       const { group: _g, label: _l, defaultVisible, ...rest } = c;
       return { ...rest, hide: !defaultVisible };
-  }), []);
+    });
+  }, [COL_CATALOG]);
+
+  // Re-apply the saved state after every rebuild, then re-enable saving.
+  useEffect(() => {
+    const api = gridRef.current?.api;
+    const local = loadLocal(COL_STATE_KEY);
+    if (api && local) api.applyColumnState({ state: local as ColumnState[], applyOrder: true });
+    const tm = window.setTimeout(() => { restoringRef.current = false; }, 0);
+    return () => window.clearTimeout(tm);
+  }, [columnDefs]);
 
   const defaultColDef = useMemo<ColDef>(() => ({
     sortable: true, resizable: true, filter: true, suppressMovable: false,
+    // Dim "represents nothing" spots at the CELL level, via a class that
+    // refreshCells re-applies. Doing it with a row STYLE needed redrawRows() on
+    // every status update, which re-rendered the whole grid continuously and
+    // pegged the CPU on a busy cluster (the 0.23.6 slowdown).
+    cellClassRules: { 'opacity-40': (p: any) => isDull(statusFor(p)) },
   }), []);
 
   // Pass spotStatus through AG Grid's context so cell renderers can look up
@@ -303,20 +426,40 @@ export function ClusterGrid({ rows, spotStatus, onSpotClick }: Props) {
   // change below.
   const context = useMemo(() => ({ spotStatus }), [spotStatus]);
 
-  function onGridReady(e: GridReadyEvent) {
-    try {
-      const raw = localStorage.getItem(COL_STATE_KEY);
-      if (raw) {
-        const state = JSON.parse(raw) as ColumnState[];
-        if (Array.isArray(state)) e.api.applyColumnState({ state, applyOrder: true });
+  // Spot statuses arrive asynchronously (~after the rows render). The Call/Band/
+  // Mode cellStyles and the dimmed "represents nothing" class depend on them but
+  // the cell VALUE doesn't change, so ag-grid won't re-render on its own — force a
+  // refresh so e.g. a worked call turns blue once its status loads.
+  //
+  // THROTTLED: under an RBN firehose spotStatus updates ~20×/second, and firing a
+  // full refreshCells that often is pure churn on a slow PC. Coalesce the bursts
+  // into one refresh every 200 ms (still imperceptible) instead of one per update.
+  const refreshPending = useRef<number | undefined>(undefined);
+  useEffect(() => {
+    if (refreshPending.current !== undefined) return; // a refresh is already queued
+    refreshPending.current = window.setTimeout(() => {
+      refreshPending.current = undefined;
+      gridRef.current?.api?.refreshCells({ force: true });
+    }, 200);
+  }, [spotStatus]);
+  useEffect(() => () => { if (refreshPending.current !== undefined) window.clearTimeout(refreshPending.current); }, []);
+
+  // Restore AFTER the profile scope is known — this grid has no key= remount to
+  // save it from reading the wrong (unscoped) cache key at first paint.
+  async function onGridReady(e: GridReadyEvent) {
+    await whenGridPrefsReady();
+    const local = loadLocal(COL_STATE_KEY);
+    if (local) e.api.applyColumnState({ state: local as ColumnState[], applyOrder: true });
+    const remote = await loadRemote(COL_STATE_KEY);
+    if (remote && !local) {
+      e.api.applyColumnState({ state: remote as ColumnState[], applyOrder: true });
+      seedLocal(COL_STATE_KEY, remote);
     }
-    } catch {}
   }
   const saveColumnState = useCallback(() => {
-    try {
+    if (restoringRef.current) return; // ignore the events fired by a column rebuild
     const state = gridRef.current?.api?.getColumnState();
-      if (state) localStorage.setItem(COL_STATE_KEY, JSON.stringify(state));
-    } catch {}
+    if (state) saveState(COL_STATE_KEY, state);
   }, []);
 
   function handleRowClicked(e: RowClickedEvent<ClusterSpot>) {
@@ -360,8 +503,12 @@ export function ClusterGrid({ rows, spotStatus, onSpotClick }: Props) {
   return (
     <>
       <div className="flex items-center justify-end gap-2 px-2.5 py-1 border-b border-border/60 bg-muted/20">
+        <Button variant="ghost" size="sm" className="h-7 text-[11px]" onClick={() => gridRef.current?.api?.setFilterModel(null)}
+          title={t('clg2.clearFiltersTitle')}>
+          <FilterX className="size-3.5" /> {t('clg2.clearFilters')}
+        </Button>
         <Button variant="ghost" size="sm" className="h-7 text-[11px]" onClick={() => setPickerOpen(true)}>
-          <Columns3 className="size-3.5" /> Columns
+          <Columns3 className="size-3.5" /> {t('clg2.columns')}
         </Button>
       </div>
       <div style={{ flex: 1, minHeight: 0, position: 'relative' }}>
@@ -390,9 +537,9 @@ export function ClusterGrid({ rows, spotStatus, onSpotClick }: Props) {
       <Dialog open={pickerOpen} onOpenChange={setPickerOpen}>
         <DialogContent className="max-w-md">
           <DialogHeader>
-            <DialogTitle>Cluster columns</DialogTitle>
+            <DialogTitle>{t('clg2.pickerTitle')}</DialogTitle>
             <DialogDescription>
-              Pick the columns you want visible in the Cluster table.
+              {t('clg2.pickerDesc')}
             </DialogDescription>
           </DialogHeader>
           <div className="max-h-[60vh] overflow-y-auto py-2">
@@ -402,10 +549,10 @@ export function ClusterGrid({ rows, spotStatus, onSpotClick }: Props) {
               return (
                 <div key={group} className="rounded-md border border-border p-2.5 mb-2">
                   <div className="flex items-center justify-between mb-2 pb-1.5 border-b border-border/60">
-                    <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{group}</span>
+                    <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{groupLabel(t, group)}</span>
                     <div className="flex gap-0.5">
-                      <button className="text-[10px] text-primary hover:underline px-1" onClick={() => showAll(group)}>all</button>
-                      <button className="text-[10px] text-muted-foreground hover:underline px-1" onClick={() => hideAll(group)}>none</button>
+                      <button className="text-[10px] text-primary hover:underline px-1" onClick={() => showAll(group)}>{t('clg2.all')}</button>
+                      <button className="text-[10px] text-muted-foreground hover:underline px-1" onClick={() => hideAll(group)}>{t('clg2.none')}</button>
                     </div>
                   </div>
                   <div className="grid grid-cols-2 gap-1">
@@ -424,8 +571,8 @@ export function ClusterGrid({ rows, spotStatus, onSpotClick }: Props) {
             })}
           </div>
           <DialogFooter>
-            <Button variant="ghost" size="sm" onClick={resetDefaults}>Reset to defaults</Button>
-            <Button size="sm" onClick={() => setPickerOpen(false)}>Done</Button>
+            <Button variant="ghost" size="sm" onClick={resetDefaults}>{t('clg2.resetDefaults')}</Button>
+            <Button size="sm" onClick={() => setPickerOpen(false)}>{t('clg2.done')}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>

frontend/src/components/ContestPanel.tsx

@@ -0,0 +1,217 @@
+import { useEffect, useState } from 'react';
+import { Trophy } from 'lucide-react';
+import { ListContests, ContestStats } from '../../wailsjs/go/main/App';
+import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
+
+// ContestSession is the live contest-mode state, persisted as JSON in a UI pref
+// so a running contest (serial counter included) survives a restart.
+export type ContestSession = {
+  active: boolean;
+  code: string;       // ADIF CONTEST_ID written to each QSO
+  name: string;
+  exchange: 'serial' | 'fixed';
+  fixedKind: string;  // label for the fixed exchange (CQ Zone, Département…)
+  sentFixed: string;  // the value YOU send when the exchange is fixed
+  nextSerial: number; // running sent serial number
+  startISO: string;   // contest window start (UTC ISO) — only QSOs after count
+  endISO: string;     // contest window end (UTC ISO, empty = open)
+};
+
+export const CONTEST_DEFAULT: ContestSession = {
+  active: false, code: '', name: '', exchange: 'serial',
+  fixedKind: 'CQ Zone', sentFixed: '', nextSerial: 1,
+  startISO: '', endISO: '',
+};
+
+// Contests run on UTC, so the date/time inputs are treated as UTC.
+const utcInputToISO = (v: string) => (v ? new Date(v + ':00Z').toISOString() : '');
+const isoToUtcInput = (iso: string) => (iso ? new Date(iso).toISOString().slice(0, 16) : '');
+
+const FIXED_KINDS = ['CQ Zone', 'ITU Zone', 'State/Prov', 'Département', 'Grid', 'Name', 'Age', 'Section', 'Custom'];
+const KIND_LABEL: Record<string, string> = {
+  'cq-zone': 'CQ Zone', 'itu-zone': 'ITU Zone', 'state': 'State/Prov',
+  'dept': 'Département', 'grid': 'Grid', 'name': 'Name', 'class-section': 'Section',
+};
+
+type Def = { code: string; name: string; exchange: string };
+type Stats = { qsos: number; by_band?: { band: string; count: number }[] | null; mult: number; mult_label: string; score: number; last_hour: number };
+
+function Stat({ label, value, accent }: { label: string; value: string | number; accent?: string }) {
+  return (
+    <div className="rounded-lg border border-border bg-card px-3 py-2 text-center">
+      <div className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">{label}</div>
+      <div className="text-xl font-black tabular-nums" style={accent ? { color: accent } : undefined}>{value}</div>
+    </div>
+  );
+}
+
+export function ContestPanel({ session, onChange }: {
+  session: ContestSession;
+  onChange: (patch: Partial<ContestSession>) => void;
+}) {
+  const { t } = useI18n();
+  const [contests, setContests] = useState<Def[]>([]);
+  const [stats, setStats] = useState<Stats | null>(null);
+
+  useEffect(() => { ListContests().then((c) => setContests((c ?? []) as Def[])).catch(() => {}); }, []);
+
+  // Poll the scoreboard while a contest is running.
+  useEffect(() => {
+    if (!session.active || !session.code) { setStats(null); return; }
+    let alive = true;
+    const load = () => ContestStats(
+      session.code,
+      session.exchange === 'fixed' ? kindKey(session.fixedKind) : 'serial',
+      session.startISO, session.endISO,
+    ).then((s) => { if (alive) setStats(s as Stats); }).catch(() => {});
+    load();
+    const id = window.setInterval(load, 4000);
+    return () => { alive = false; window.clearInterval(id); };
+  }, [session.active, session.code, session.exchange, session.fixedKind, session.startISO, session.endISO]);
+
+  const pickContest = (code: string) => {
+    const def = contests.find((c) => c.code === code);
+    if (!def) { onChange({ code: '', name: '' }); return; }
+    if (def.exchange === 'serial' || def.exchange === 'rst') {
+      onChange({ code: def.code, name: def.name, exchange: 'serial' });
+    } else {
+      onChange({ code: def.code, name: def.name, exchange: 'fixed', fixedKind: KIND_LABEL[def.exchange] || 'Custom' });
+    }
+  };
+
+  return (
+    <div className="h-full overflow-y-auto p-4 space-y-4">
+      {/* Setup card. */}
+      <div className="rounded-xl border border-border bg-card shadow-sm overflow-hidden">
+        <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border/60 bg-muted/30">
+          <Trophy className="size-4 text-warning" />
+          <span className="text-xs font-bold uppercase tracking-wider text-foreground/80">{t('ctp.contestSetup')}</span>
+          {session.active && <span className="ml-auto rounded bg-warning px-2 py-0.5 text-[10px] font-black uppercase tracking-wider text-warning-foreground">{t('ctp.live')}</span>}
+        </div>
+        <div className="p-4 space-y-3">
+          <div className="flex flex-wrap items-center gap-2">
+            <select value={session.code} onChange={(e) => pickContest(e.target.value)}
+              className="rounded-md border border-border bg-card px-2 py-1.5 text-sm flex-1 min-w-[220px]">
+              <option value="">{t('ctp.chooseContest')}</option>
+              {contests.map((c) => <option key={c.code} value={c.code}>{c.name}</option>)}
+            </select>
+            {session.code && <code className="text-xs text-muted-foreground">{session.code}</code>}
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3">
+            <div className="inline-flex rounded-md border border-border overflow-hidden">
+              {(['serial', 'fixed'] as const).map((x) => (
+                <button key={x} type="button" onClick={() => onChange({ exchange: x })}
+                  className={cn('px-3 py-1.5 text-xs font-bold border-l border-border first:border-l-0',
+                    session.exchange === x ? 'bg-primary text-primary-foreground' : 'bg-card text-muted-foreground hover:bg-muted')}>
+                  {x === 'serial' ? t('ctp.serial') : t('ctp.fixedExchange')}
+                </button>
+              ))}
+            </div>
+
+            {session.exchange === 'serial' ? (
+              <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                {t('ctp.nextSerial')}
+                <input type="number" min={1} value={session.nextSerial}
+                  onChange={(e) => onChange({ nextSerial: Math.max(1, parseInt(e.target.value || '1', 10)) })}
+                  className="w-20 rounded-md border border-border bg-card px-2 py-1.5 text-sm font-mono" />
+              </label>
+            ) : (
+              <div className="flex items-center gap-2">
+                <select value={session.fixedKind} onChange={(e) => onChange({ fixedKind: e.target.value })}
+                  className="rounded-md border border-border bg-card px-2 py-1.5 text-sm">
+                  {FIXED_KINDS.map((k) => <option key={k} value={k}>{k}</option>)}
+                </select>
+                <input value={session.sentFixed} onChange={(e) => onChange({ sentFixed: e.target.value.toUpperCase() })}
+                  placeholder={t('ctp.yourExchangePh')} className="w-32 rounded-md border border-border bg-card px-2 py-1.5 text-sm font-mono" />
+              </div>
+            )}
+          </div>
+
+          {/* Contest window (UTC). Only QSOs inside it count toward the score and
+              dupe check — so old runs of the same contest aren't included. */}
+          <div className="flex flex-wrap items-center gap-3">
+            <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
+              {t('ctp.startUtc')}
+              <input type="datetime-local" value={isoToUtcInput(session.startISO)}
+                onChange={(e) => onChange({ startISO: utcInputToISO(e.target.value) })}
+                className="rounded-md border border-border bg-card px-2 py-1.5 text-sm" />
+            </label>
+            <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
+              {t('ctp.endUtc')}
+              <input type="datetime-local" value={isoToUtcInput(session.endISO)}
+                onChange={(e) => onChange({ endISO: utcInputToISO(e.target.value) })}
+                className="rounded-md border border-border bg-card px-2 py-1.5 text-sm" />
+            </label>
+            <span className="text-[11px] text-muted-foreground">{t('ctp.windowHint')}</span>
+          </div>
+
+          <div className="flex items-center gap-2 pt-1">
+            {session.active ? (
+              <button type="button" onClick={() => onChange({ active: false })}
+                className="rounded-md border border-danger/60 bg-danger/10 px-4 py-1.5 text-sm font-bold text-danger hover:bg-danger/20">
+                {t('ctp.stopContest')}
+              </button>
+            ) : (
+              <button type="button" disabled={!session.code}
+                onClick={() => onChange({ active: true, startISO: session.startISO || new Date().toISOString() })}
+                className="rounded-md bg-warning px-4 py-1.5 text-sm font-bold text-warning-foreground hover:bg-warning disabled:opacity-40">
+                {t('ctp.startContest')}
+              </button>
+            )}
+            <span className="text-xs text-muted-foreground">
+              {session.active ? t('ctp.activeHint') : t('ctp.inactiveHint')}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Scoreboard. */}
+      {session.active && (
+        <div className="rounded-xl border border-border bg-card shadow-sm overflow-hidden">
+          <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border/60 bg-muted/30">
+            <span className="text-xs font-bold uppercase tracking-wider text-foreground/80">{t('ctp.scoreboard')}</span>
+            <span className="text-[10px] text-muted-foreground">{t('ctp.estimate')}</span>
+          </div>
+          <div className="p-4 space-y-4">
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
+              <Stat label={t('ctp.qsos')} value={stats?.qsos ?? 0} />
+              <Stat label={stats?.mult_label || t('ctp.mult')} value={stats?.mult ?? 0} accent="#f59e0b" />
+              <Stat label={t('ctp.scoreEst')} value={(stats?.score ?? 0).toLocaleString()} accent="#16a34a" />
+              <Stat label={t('ctp.last60')} value={stats?.last_hour ?? 0} />
+            </div>
+            {stats && stats.by_band && stats.by_band.length > 0 && (
+              <div className="rounded-lg border border-border overflow-hidden">
+                <table className="w-full text-sm">
+                  <thead><tr className="bg-muted/40 text-[11px] uppercase tracking-wider text-muted-foreground">
+                    <th className="text-left px-3 py-1.5 font-bold">{t('ctp.band')}</th>
+                    <th className="text-right px-3 py-1.5 font-bold">{t('ctp.qsos')}</th>
+                  </tr></thead>
+                  <tbody>
+                    {stats.by_band.map((r) => (
+                      <tr key={r.band} className="border-t border-border/60">
+                        <td className="px-3 py-1 font-mono">{r.band}</td>
+                        <td className="px-3 py-1 text-right tabular-nums">{r.count}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// kindKey maps a fixed-kind label back to the backend's exchange key for mult
+// counting.
+function kindKey(label: string): string {
+  const m: Record<string, string> = {
+    'CQ Zone': 'cq-zone', 'ITU Zone': 'itu-zone', 'State/Prov': 'state',
+    'Département': 'dept', 'Grid': 'grid', 'Name': 'name', 'Section': 'section', 'Age': 'age',
+  };
+  return m[label] || 'state';
+}

frontend/src/components/DetailsPanel.tsx

@@ -1,5 +1,5 @@
-import { useMemo, useState } from 'react';
-import { Construction } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { ComputeQSOAwardRefs, IsNewUSCounty } from '../../wailsjs/go/main/App';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -7,8 +7,10 @@ import {
   Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
 } from '@/components/ui/select';
 import { cn } from '@/lib/utils';
-import { pathBetween } from '@/lib/maidenhead';
+import { useI18n } from '@/lib/i18n';
+import { pathBetween, pathBetweenLatLon, gridToLatLon } from '@/lib/maidenhead';
 import { BandSlotGrid } from '@/components/BandSlotGrid';
+import { AwardRefSelector } from '@/components/AwardRefSelector';
 
 export interface DetailsState {
   state: string;
@@ -34,9 +36,16 @@ export interface DetailsState {
   sat_name: string;
   sat_mode: string;
   contest_id: string;
-  srx?: number;
-  stx?: number;
+  // Contest exchanges as free text — most are serials (001) but some are
+  // alphanumeric (e.g. a section/zone like "ON4"). Stored to ADIF SRX/STX when
+  // purely numeric, else to SRX_STRING/STX_STRING (handled in App on save).
+  srx_string?: string;
+  stx_string?: string;
   email: string;
+  // Award references for the contacted station (set via the Awards tab picker).
+  // Semicolon-delimited "AWARD@REF" entries, e.g. "POTA@FR-11553;IOTA@EU-064".
+  // App.tsx maps these back to pota_ref/sota_ref/iota when saving the QSO.
+  award_refs?: string;
 }
 
 interface Props {
@@ -44,6 +53,14 @@ interface Props {
   prefix: string;
   operatorGrid: string;   // station.my_grid — origin for bearing/distance
   remoteGrid: string;     // entry-strip Grid value — destination
+  // Entry-strip text fields. Live award detection matches on these too — a DARC
+  // DOK keys off QTH, not the address — and sending only the address meant such
+  // an award stayed silent until the QSO was logged.
+  qth?: string;
+  name?: string;
+  country?: string;
+  comment?: string;
+  note?: string;
   details: DetailsState;
   onChange: (patch: Partial<DetailsState>) => void;
   // Stats (F1) tab content: the worked-before matrix + optional QRZ image.
@@ -51,13 +68,62 @@ interface Props {
   wbBusy?: boolean;
   band: string;
   mode: string;
+  bands?: string[]; // configured bands for the worked-before matrix columns
+  // When the entry form is empty and a QSO is selected in the log grid, the
+  // Stats (F1) matrix shows THAT contact's entity instead of sitting blank.
+  // Only the matrix is redirected — every other tab still edits the live entry.
+  slotCall?: string;
+  slotBand?: string;
+  slotMode?: string;
+  slotWb?: any;
+  slotWbBusy?: boolean;
   imageUrl?: string;
   onOpenImage?: () => void;
+  // Optional controlled active tab (so the app can switch it via keyboard).
+  tab?: TabName;
+  onTab?: (t: TabName) => void;
+  // When the WinKeyer is active, F1-F12 fire macros, so the tab shortcut is
+  // shown as Ctrl+F1…F5 instead of F1…F5.
+  keyerActive?: boolean;
+  // Open the QSO editor — makes callsigns clickable in the band-slot drill-down.
+  onEditQso?: (id: number) => void;
 }
 
-type TabName = 'stats' | 'info' | 'awards' | 'my' | 'extended';
+export type TabName = 'stats' | 'info' | 'awards' | 'my' | 'extended';
 
-const PROP_MODES = ['NONE','AS','AUE','AUR','BS','ECH','EME','ES','F2','F2M','FAI','GWAVE','INTERNET','ION','IRL','LOS','MS','RPT','RS','SAT','TEP','TR'];
+// ADIF PROP_MODE: stored value is the code, shown with the full name (Log4OM-style).
+const PROP_MODES: { value: string; label: string }[] = [
+  { value: 'NONE', label: '—' },
+  { value: 'AS', label: 'detp.propAS' },
+  { value: 'AUR', label: 'detp.propAUR' },
+  { value: 'AUE', label: 'detp.propAUE' },
+  { value: 'BS', label: 'detp.propBS' },
+  { value: 'ECH', label: 'EchoLink' },
+  { value: 'EME', label: 'detp.propEME' },
+  { value: 'ES', label: 'detp.propES' },
+  { value: 'FAI', label: 'detp.propFAI' },
+  { value: 'F2', label: 'detp.propF2' },
+  { value: 'GWAVE', label: 'detp.propGWAVE' },
+  { value: 'INTERNET', label: 'detp.propINTERNET' },
+  { value: 'ION', label: 'detp.propION' },
+  { value: 'IRL', label: 'IRLP' },
+  { value: 'LOS', label: 'detp.propLOS' },
+  { value: 'MS', label: 'detp.propMS' },
+  { value: 'RPT', label: 'detp.propRPT' },
+  { value: 'RS', label: 'detp.propRS' },
+  { value: 'SAT', label: 'detp.propSAT' },
+  { value: 'TEP', label: 'detp.propTEP' },
+  { value: 'TR', label: 'detp.propTR' },
+];
+
+// ADIF ANT_PATH enum (Grayline, Other, Short Path, Long Path).
+const ANT_PATHS: { value: string; label: string }[] = [
+  { value: 'NONE', label: '—' },
+  { value: 'S', label: 'detp.pathShort' },
+  { value: 'L', label: 'detp.pathLong' },
+  { value: 'G', label: 'detp.pathGrayline' },
+  { value: 'O', label: 'detp.pathOther' },
+];
 
 function numOrUndef(v: string): number | undefined {
   if (v === '') return undefined;
@@ -65,29 +131,114 @@ function numOrUndef(v: string): number | undefined {
   return isNaN(n) ? undefined : n;
 }
 
+// Column spans written out rather than built as `col-span-${n}`: Tailwind scans
+// for literal class names, so an interpolated one is never emitted.
+const SPAN_CLASS: Record<number, string> = {
+  1: '', 2: 'col-span-2', 3: 'col-span-3', 4: 'col-span-4', 5: 'col-span-5',
+  6: 'col-span-6', 7: 'col-span-7', 8: 'col-span-8', 9: 'col-span-9',
+  10: 'col-span-10', 11: 'col-span-11', 12: 'col-span-12',
+};
+
 // Compact field helper to keep the JSX dense.
-function Field({ label, span = 1, children }: { label: string; span?: 1 | 2 | 3 | 6; children: React.ReactNode }) {
+function Field({ label, span = 1, className, children }: { label: string; span?: number; className?: string; children: React.ReactNode }) {
   return (
-    <div className={cn('flex flex-col min-w-0', span === 2 && 'col-span-2', span === 3 && 'col-span-3', span === 6 && 'col-span-6')}>
+    <div className={cn('flex flex-col min-w-0', SPAN_CLASS[span], className)}>
       <Label className="mb-1">{label}</Label>
       {children}
     </div>
   );
 }
 
-export function DetailsPanel({ callsign: _cs, prefix, operatorGrid, remoteGrid, details, onChange, wb, wbBusy, band, mode }: Props) {
-  const [open, setOpen] = useState<TabName>('stats');
+export function DetailsPanel({ callsign, prefix, operatorGrid, remoteGrid, qth, name, country, comment, note, details, onChange, wb, wbBusy, band, mode, bands, slotCall, slotBand, slotMode, slotWb, slotWbBusy, tab, onTab, keyerActive, onEditQso }: Props) {
+  const { t } = useI18n();
+  const [internalOpen, setInternalOpen] = useState<TabName>('stats');
+  const open = tab ?? internalOpen; // controlled when `tab` is provided
 
+  // Live award detection: run the SAME engine used at log time over the current
+  // contact — callsign, the looked-up address/state/zones AND the entry-strip
+  // text (QTH, name, country, comment, note, grid). Sending only the address was
+  // a silent hole: a DARC DOK matches on QTH, so "Aachen" produced nothing here
+  // while the award editor's Test tab, which passes the whole QSO, matched it.
+  // References the QSO will earn — WAPC matching "Beijing" inside the address,
+  // a DOK matching the town — are surfaced and auto-added the moment you enter a
+  // call or click a spot, instead of only appearing after logging. Pickable
+  // matches are merged into award_refs
+  // (idempotent; award_refs is NOT a dependency, so removing one by hand sticks).
+  const [detected, setDetected] = useState<Array<{ code: string; ref: string; name?: string; pickable?: boolean; ambiguous?: boolean }>>([]);
+
+  // NEW badge on the county: the same question the cluster's NEW CTY badge
+  // answers, for the station being worked right now. Debounced because the
+  // county field is typed into as well as filled by the lookup.
+  const [newCounty, setNewCounty] = useState(false);
+  useEffect(() => {
+    const cnty = (details.cnty ?? '').trim();
+    if (!cnty) { setNewCounty(false); return; }
+    let alive = true;
+    const id = window.setTimeout(async () => {
+      try {
+        const isNew = await IsNewUSCounty(details.state ?? '', cnty);
+        if (alive) setNewCounty(!!isNew);
+      } catch { if (alive) setNewCounty(false); }
+    }, 300);
+    return () => { alive = false; window.clearTimeout(id); };
+  }, [details.state, details.cnty]);
+  useEffect(() => {
+    if (open !== 'awards' || !callsign.trim()) { setDetected([]); return; }
+    const t = window.setTimeout(async () => {
+      try {
+        const q: any = {
+          callsign, band, mode,
+          address: details.address ?? '', state: details.state ?? '', cnty: details.cnty ?? '',
+          qth: qth ?? '', name: name ?? '', country: country ?? '',
+          comment: comment ?? '', notes: note ?? '', grid: remoteGrid ?? '',
+          cont: details.cont ?? '', dxcc: details.dxcc, cqz: details.cqz, ituz: details.ituz,
+          qso_date: new Date().toISOString(),
+        };
+        const all = ((await ComputeQSOAwardRefs(q)) ?? []) as any[];
+        setDetected(all as any);
+        const cur = details.award_refs ?? '';
+        const have = new Set(cur.split(';').filter(Boolean));
+        let next = cur;
+        for (const r of all) {
+          // An ambiguous candidate is offered, never auto-added: adding one would
+          // be the guess the award's "one reference per QSO" setting exists to refuse.
+          if (!r.pickable || r.ambiguous) continue;
+          const entry = `${String(r.code).toUpperCase()}@${String(r.ref).toUpperCase()}`;
+          if (!have.has(entry)) { next = next ? `${next};${entry}` : entry; have.add(entry); }
+        }
+        if (next !== cur) onChange({ award_refs: next });
+      } catch { /* leave detection empty on failure */ }
+    }, 400);
+    return () => window.clearTimeout(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, callsign, details.address, details.state, details.cnty, details.dxcc, details.cqz, details.ituz, qth, name, country, comment, note, remoteGrid, band, mode]);
   // Bearing/distance from operator's home grid to the remote station.
   // Recomputed only when either grid actually changes.
-  const path = useMemo(
-    () => pathBetween(operatorGrid, remoteGrid),
-    [operatorGrid, remoteGrid],
-  );
+  const path = useMemo(() => {
+    const byGrid = pathBetween(operatorGrid, remoteGrid);
+    if (byGrid) return byGrid;
+    // Fall back to lat/lon when the DX has coordinates but no grid (e.g. a
+    // cty.dat-only entity like Svalbard: no QRZ grid, but cty.dat coordinates).
+    const myLL = gridToLatLon(operatorGrid);
+    if (myLL && details.lat != null && details.lon != null) {
+      return pathBetweenLatLon(myLL, { lat: details.lat, lon: details.lon });
+    }
+    return null;
+  }, [operatorGrid, remoteGrid, details.lat, details.lon]);
+  // Where the DX actually is, for its sunrise/sunset. The locator wins when we
+  // have one — it is what the operator can see and check — and the provider's
+  // raw coordinates cover entities that resolve through cty.dat with no grid.
+  const dxLL = useMemo(() => {
+    const byGrid = gridToLatLon(remoteGrid);
+    if (byGrid) return byGrid;
+    if (details.lat != null && details.lon != null) return { lat: details.lat, lon: details.lon };
+    return null;
+  }, [remoteGrid, details.lat, details.lon]);
   const fmtDeg = (n: number) => `${Math.round(n)}°`;
   const fmtKm = (n: number) => `${Math.round(n).toLocaleString()} km`;
 
-  function toggle(t: TabName) { setOpen(t); }
+  function toggle(t: TabName) { onTab ? onTab(t) : setInternalOpen(t); }
+  const fk = keyerActive ? 'Ctrl+F' : 'F';
 
   const satelliteMode = !!details.sat_name || !!details.sat_mode || details.prop_mode === 'SAT';
   function setSatellite(on: boolean) {
@@ -102,15 +253,15 @@ export function DetailsPanel({ callsign: _cs, prefix, operatorGrid, remoteGrid,
   }
 
   const tabs: { key: TabName; label: string }[] = [
-    { key: 'stats',    label: 'Stats (F1)' },
-    { key: 'info',     label: 'Info (F2)' },
-    { key: 'awards',   label: 'Awards (F3)' },
-    { key: 'my',       label: 'My (F4)' },
-    { key: 'extended', label: 'Extended (F5)' },
+    { key: 'stats',    label: `${t('detp.tabStats')} (${fk}1)` },
+    { key: 'info',     label: `${t('detp.tabInfo')} (${fk}2)` },
+    { key: 'awards',   label: `${t('detp.tabAwards')} (${fk}3)` },
+    { key: 'my',       label: `${t('detp.tabMy')} (${fk}4)` },
+    { key: 'extended', label: `${t('detp.tabExtended')} (${fk}5)` },
   ];
 
   return (
-    <section className="border border-border rounded-lg bg-card flex flex-col flex-1 min-h-0 overflow-hidden">
+    <section className="bg-card shadow-sm border border-border rounded-lg flex flex-col flex-1 min-h-0 overflow-hidden">
       <nav className="flex items-center gap-1 px-3 bg-muted/40 border-b border-border shrink-0">
         {tabs.map((t) => (
           <button
@@ -128,28 +279,70 @@ export function DetailsPanel({ callsign: _cs, prefix, operatorGrid, remoteGrid,
         ))}
       </nav>
 
-      <div className="overflow-y-auto min-h-0">
+      <div className={cn('flex-1 min-h-0', open === 'stats' ? 'overflow-hidden' : 'overflow-y-auto')}>
       {open === 'stats' && (
         <div className="px-3 py-2.5">
-          <BandSlotGrid wb={wb} busy={!!wbBusy} currentBand={band} currentMode={mode} />
+          <BandSlotGrid
+            wb={slotCall ? slotWb : wb}
+            busy={slotCall ? !!slotWbBusy : !!wbBusy}
+            currentBand={slotCall ? (slotBand ?? '') : band}
+            currentMode={slotCall ? (slotMode ?? '') : mode}
+            bands={bands}
+            hasCall={slotCall ? true : callsign.trim() !== ''}
+            forCall={slotCall}
+            onEditQso={onEditQso}
+            lat={dxLL?.lat} lon={dxLL?.lon} />
         </div>
       )}
 
       {open === 'info' && (
-        <div className="grid grid-cols-6 gap-2 px-3 py-2.5">
-          <Field label="State / pref">
+        <div className="grid grid-cols-12 gap-2 px-3 py-2.5">
+          {/* Twelve columns, not six: the fields hold very different things. A US
+              county name is long, a CQ zone is two digits — on an even six-column
+              grid they were the same width, so the county truncated while the
+              zones sat mostly empty. */}
+          <Field label={t('detp.statePref')} span={2}>
             <Input value={details.state} onChange={(e) => onChange({ state: e.target.value })} />
           </Field>
-          <Field label="County">
-            <Input value={details.cnty} onChange={(e) => onChange({ cnty: e.target.value })} />
+          <Field label={t('detp.county')} span={4} className="relative">
+            <Input value={details.cnty} onChange={(e) => onChange({ cnty: e.target.value })} className={cn(newCounty && 'pr-14')} />
+            {newCounty && (
+              <span
+                title={t('detp.newCountyTip')}
+                className="absolute right-1.5 bottom-1.5 rounded px-1.5 py-0.5 text-[10px] font-bold tracking-wide bg-success text-success-foreground pointer-events-none"
+              >
+                {t('detp.newCounty')}
+              </span>
+            )}
           </Field>
-          <Field label="Prefix">
+          <Field label={t('detp.prefix')} span={2}>
             <Input className="font-mono uppercase" value={prefix} readOnly tabIndex={-1} />
           </Field>
-          {/* DXCC #, CQ zone, ITU zone, Continent and Azimuth SP live in the
-              main entry strip — visible without opening F2. F2 keeps the
-              less-needed long-path bearing and both distances. */}
-          <Field label="Azimuth LP">
+          <Field label={t('detp.cqZone')}>
+            <Input inputMode="numeric" maxLength={2} className="font-mono" value={details.cqz ?? ''} placeholder="—"
+              onChange={(e) => { const v = e.target.value.replace(/\D/g, ''); onChange({ cqz: v === '' ? undefined : parseInt(v, 10) }); }} />
+          </Field>
+          <Field label={t('detp.ituZone')}>
+            <Input inputMode="numeric" maxLength={2} className="font-mono" value={details.ituz ?? ''} placeholder="—"
+              onChange={(e) => { const v = e.target.value.replace(/\D/g, ''); onChange({ ituz: v === '' ? undefined : parseInt(v, 10) }); }} />
+          </Field>
+          {/* DXCC # closes the top row (next to the zones); Continent and
+              Azimuth SP live in the main entry strip / bandeau. The long-path
+              bearing and distances move to the row below. */}
+          <Field label={t('detp.dxcc')} span={2}>
+            <Input
+              readOnly
+              tabIndex={-1}
+              className="font-mono bg-muted/40 cursor-default"
+              value={details.dxcc ?? ''}
+              placeholder="—"
+            />
+          </Field>
+          {/* The bearing and the two distances are read-only and hold at most
+              "12345 km", so they take a fixed width and the address — the one
+              field here that is never wide enough — gets everything left over. */}
+          <div className="col-span-12 flex gap-2">
+            <Field label={t('detp.azimuthLp')} className="w-20 shrink-0">
               <Input
                 readOnly
                 tabIndex={-1}
@@ -158,7 +351,7 @@ export function DetailsPanel({ callsign: _cs, prefix, operatorGrid, remoteGrid,
                 placeholder="—"
               />
             </Field>
-          <Field label="Distance SP">
+            <Field label={t('detp.distanceSp')} className="w-24 shrink-0">
               <Input
                 readOnly
                 tabIndex={-1}
@@ -167,7 +360,7 @@ export function DetailsPanel({ callsign: _cs, prefix, operatorGrid, remoteGrid,
                 placeholder="—"
               />
             </Field>
-          <Field label="Distance LP">
+            <Field label={t('detp.distanceLp')} className="w-24 shrink-0">
               <Input
                 readOnly
                 tabIndex={-1}
@@ -176,66 +369,114 @@ export function DetailsPanel({ callsign: _cs, prefix, operatorGrid, remoteGrid,
                 placeholder="—"
               />
             </Field>
-          <Field label="Address" span={3}>
+            <Field label={t('detp.address')} className="flex-1 min-w-0">
               <Input value={details.address} onChange={(e) => onChange({ address: e.target.value })} />
             </Field>
-          <Field label="QSL message" span={3}>
+          </div>
+          <Field label={t('detp.qslMessage')} span={7}>
             <Input value={details.qsl_msg} onChange={(e) => onChange({ qsl_msg: e.target.value })} />
           </Field>
-          <Field label="QSL via" span={2}>
+          <Field label={t('detp.qslVia')} span={5}>
             <Input value={details.qsl_via} onChange={(e) => onChange({ qsl_via: e.target.value })} />
           </Field>
         </div>
       )}
 
       {open === 'awards' && (
-        <div className="px-4 py-6 text-center text-xs text-muted-foreground">
-          <Construction className="size-6 mx-auto mb-2 text-muted-foreground/60" />
-          <div className="font-semibold text-sm text-foreground/70">Awards module coming soon</div>
+        <div className="px-3 py-2.5 h-full flex flex-col min-h-0">
+          <AwardRefSelector
+            dxcc={details.dxcc}
+            value={details.award_refs ?? ''}
+            onChange={(v) => onChange({ award_refs: v })}
+            fieldValues={{ state: details.state ?? '', cnty: details.cnty ?? '' }}
+            heightClass="flex-1 min-h-0"
+          />
+          {/* Ambiguous candidates: the award allows one reference per QSO and
+              several matched, so none was kept. Click one to settle it while the
+              contact is still in front of you. */}
+          {detected.some((r) => r.ambiguous) && (
+            <div className="mt-2 text-[11px] shrink-0 leading-snug border-t border-warning/40 pt-1.5">
+              <span className="font-medium text-warning">{t('detp.ambiguous')}</span>{' '}
+              {detected.filter((r) => r.ambiguous).map((r) => (
+                <button
+                  key={`amb-${r.code}@${r.ref}`}
+                  type="button"
+                  title={r.name ?? ''}
+                  onClick={() => {
+                    const entry = `${r.code.toUpperCase()}@${r.ref.toUpperCase()}`;
+                    const cur = details.award_refs ?? '';
+                    // Only one of the candidates can be right — replace any
+                    // sibling already picked for this award rather than stacking.
+                    const kept = cur.split(';').filter((e) => e && e.split('@')[0].toUpperCase() !== r.code.toUpperCase());
+                    onChange({ award_refs: [...kept, entry].join(';') });
+                    setDetected((d) => d.filter((x) => !x.ambiguous || x.code.toUpperCase() !== r.code.toUpperCase()));
+                  }}
+                  className="inline-block mr-1.5 px-1.5 py-0.5 rounded font-mono whitespace-nowrap border border-warning/50 text-warning hover:bg-warning/10"
+                >
+                  {r.code}@{r.ref}{r.name ? ` — ${r.name}` : ''}
+                </button>
+              ))}
+            </div>
+          )}
+          {detected.some((r) => !r.ambiguous) && (
+            <div className="mt-2 text-[11px] text-muted-foreground shrink-0 max-h-14 overflow-y-auto leading-snug border-t border-border/50 pt-1.5">
+              <span className="font-medium text-foreground/70">{t('detp.detected')}</span>{' '}
+              {detected.filter((r) => !r.ambiguous).map((r) => (
+                <span key={`${r.code}@${r.ref}`} className="inline-block mr-1.5 font-mono whitespace-nowrap" title={r.name ?? ''}>
+                  <span className="text-foreground/80">{r.code}{r.ref ? `@${r.ref}` : ''}</span>
+                </span>
+              ))}
+            </div>
+          )}
         </div>
       )}
 
       {open === 'my' && (
         <div className="grid grid-cols-6 gap-2 px-3 py-2.5">
-          <Field label="Ant. azimuth (°)">
+          <Field label={t('detp.azimuth')}>
             <Input type="number" value={details.ant_az ?? ''} onChange={(e) => onChange({ ant_az: numOrUndef(e.target.value) })} />
           </Field>
-          <Field label="Ant. elevation (°)">
+          <Field label={t('detp.elevation')}>
             <Input type="number" value={details.ant_el ?? ''} onChange={(e) => onChange({ ant_el: numOrUndef(e.target.value) })} />
           </Field>
-          <Field label="Ant. path">
-            <Input value={details.ant_path} placeholder="S / L / G" onChange={(e) => onChange({ ant_path: e.target.value })} />
+          <Field label={t('detp.txPower')}>
+            <Input type="number" value={details.tx_pwr ?? ''} onChange={(e) => onChange({ tx_pwr: numOrUndef(e.target.value) })} />
           </Field>
-          <Field label="Propagation">
-            <Select value={details.prop_mode || 'NONE'} onValueChange={(v) => onChange({ prop_mode: v === 'NONE' ? '' : v })}>
+          <div className="col-span-3 flex items-end pb-1.5">
+            <label className="flex items-center gap-2 text-sm cursor-pointer">
+              <Checkbox checked={satelliteMode} onCheckedChange={(c) => setSatellite(!!c)} />
+              {t('detp.satelliteMode')}
+            </label>
+          </div>
+          <Field label={t('detp.antPath')} span={2}>
+            <Select value={details.ant_path || 'NONE'} onValueChange={(v) => onChange({ ant_path: v === 'NONE' ? '' : v })}>
               <SelectTrigger><SelectValue /></SelectTrigger>
               <SelectContent>
-                {PROP_MODES.map((p) => <SelectItem key={p} value={p}>{p === 'NONE' ? '—' : p}</SelectItem>)}
+                {ANT_PATHS.map((p) => <SelectItem key={p.value} value={p.value}>{t(p.label)}</SelectItem>)}
               </SelectContent>
             </Select>
           </Field>
-          <Field label="TX power (W)">
-            <Input type="number" value={details.tx_pwr ?? ''} onChange={(e) => onChange({ tx_pwr: numOrUndef(e.target.value) })} />
+          <Field label={t('detp.propagation')} span={4}>
+            <Select value={details.prop_mode || 'NONE'} onValueChange={(v) => onChange({ prop_mode: v === 'NONE' ? '' : v })}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectContent>
+                {PROP_MODES.map((p) => <SelectItem key={p.value} value={p.value}>{t(p.label)}</SelectItem>)}
+              </SelectContent>
+            </Select>
           </Field>
-          <div className="flex items-end pb-1.5">
-            <label className="flex items-center gap-2 text-sm cursor-pointer">
-              <Checkbox checked={satelliteMode} onCheckedChange={(c) => setSatellite(!!c)} />
-              Satellite mode
-            </label>
-          </div>
-          <Field label="Rig" span={3}>
-            <Input value={details.my_rig} placeholder="Flex 8600" onChange={(e) => onChange({ my_rig: e.target.value })} />
+          <Field label={t('detp.rig')} span={3}>
+            <Input value={details.my_rig} onChange={(e) => onChange({ my_rig: e.target.value })} />
           </Field>
-          <Field label="Antenna" span={3}>
-            <Input value={details.my_antenna} placeholder="UB640" onChange={(e) => onChange({ my_antenna: e.target.value })} />
+          <Field label={t('detp.antenna')} span={3}>
+            <Input value={details.my_antenna} onChange={(e) => onChange({ my_antenna: e.target.value })} />
           </Field>
           {satelliteMode && (
             <>
-              <Field label="Satellite name" span={3}>
-                <Input value={details.sat_name} placeholder="AO-91" onChange={(e) => onChange({ sat_name: e.target.value })} />
+              <Field label={t('detp.satName')} span={3}>
+                <Input value={details.sat_name} onChange={(e) => onChange({ sat_name: e.target.value })} />
               </Field>
-              <Field label="Satellite mode" span={3}>
-                <Input value={details.sat_mode} placeholder="U/V" onChange={(e) => onChange({ sat_mode: e.target.value })} />
+              <Field label={t('detp.satelliteMode')} span={3}>
+                <Input value={details.sat_mode} onChange={(e) => onChange({ sat_mode: e.target.value })} />
               </Field>
             </>
           )}
@@ -244,16 +485,16 @@ export function DetailsPanel({ callsign: _cs, prefix, operatorGrid, remoteGrid,
 
       {open === 'extended' && (
         <div className="grid grid-cols-6 gap-2 px-3 py-2.5">
-          <Field label="Contest ID" span={2}>
+          <Field label={t('detp.contestId')} span={2}>
             <Input value={details.contest_id} onChange={(e) => onChange({ contest_id: e.target.value })} />
           </Field>
           <Field label="SRX">
-            <Input type="number" value={details.srx ?? ''} onChange={(e) => onChange({ srx: numOrUndef(e.target.value) })} />
+            <Input value={details.srx_string ?? ''} placeholder={t('detp.rcvdExchangePh')} onChange={(e) => onChange({ srx_string: e.target.value })} />
           </Field>
           <Field label="STX">
-            <Input type="number" value={details.stx ?? ''} onChange={(e) => onChange({ stx: numOrUndef(e.target.value) })} />
+            <Input value={details.stx_string ?? ''} placeholder={t('detp.sentExchangePh')} onChange={(e) => onChange({ stx_string: e.target.value })} />
           </Field>
-          <Field label="Contacted email" span={3}>
+          <Field label={t('detp.contactedEmail')} span={3}>
             <Input value={details.email} placeholder="[email protected]" onChange={(e) => onChange({ email: e.target.value })} />
           </Field>
         </div>

frontend/src/components/DuplicatesModal.tsx

@@ -0,0 +1,162 @@
+import { useEffect, useState } from 'react';
+import { Copy, Loader2, Trash2, X } from 'lucide-react';
+import { FindDuplicates, DeleteQSOs } from '../../wailsjs/go/main/App';
+import { useI18n } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+
+type QSO = {
+  id: number; callsign: string; qso_date: string; band?: string; mode?: string;
+  freq_hz?: number; rst_sent?: string; rst_rcvd?: string; name?: string;
+};
+type Group = { key: string; qsos: QSO[] };
+
+const fmtDate = (iso: string) => {
+  const d = new Date(iso);
+  if (isNaN(d.getTime())) return iso;
+  const p = (n: number) => String(n).padStart(2, '0');
+  return `${d.getUTCFullYear()}-${p(d.getUTCMonth() + 1)}-${p(d.getUTCDate())} ${p(d.getUTCHours())}:${p(d.getUTCMinutes())}`;
+};
+const fmtFreq = (hz?: number) => (hz && hz > 0 ? (hz / 1e6).toFixed(3) : '—');
+
+// DuplicatesModal — scans the log for duplicate QSOs (same call+band+mode on the
+// same day; optionally same minute), groups them, and lets the operator pick
+// which copies to delete. The oldest in each group is left unchecked by default.
+export function DuplicatesModal({ onClose, onDeleted }: { onClose: () => void; onDeleted: () => void }) {
+  const { t } = useI18n();
+  const [windowMin, setWindowMin] = useState(5); // duplicates land a few minutes apart
+  const [loading, setLoading] = useState(true);
+  const [groups, setGroups] = useState<Group[]>([]);
+  const [sel, setSel] = useState<Set<number>>(new Set());
+  const [busy, setBusy] = useState(false);
+
+  const load = (w: number) => {
+    setLoading(true);
+    FindDuplicates(w)
+      .then((g) => {
+        const gs = (g ?? []) as Group[];
+        setGroups(gs);
+        // Default: select every QSO except the first (oldest) of each group.
+        const next = new Set<number>();
+        gs.forEach((grp) => grp.qsos.slice(1).forEach((q) => next.add(q.id)));
+        setSel(next);
+      })
+      .catch(() => { setGroups([]); setSel(new Set()); })
+      .finally(() => setLoading(false));
+  };
+  useEffect(() => { load(windowMin); /* eslint-disable-next-line */ }, [windowMin]);
+
+  const toggle = (id: number) => setSel((s) => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; });
+  const selectExtras = () => { const n = new Set<number>(); groups.forEach((g) => g.qsos.slice(1).forEach((q) => n.add(q.id))); setSel(n); };
+  const deselectAll = () => setSel(new Set());
+
+  const totalQsos = groups.reduce((a, g) => a + g.qsos.length, 0);
+
+  const doDelete = async () => {
+    if (sel.size === 0) return;
+    if (!confirm(t('dup.deleteConfirm', { n: sel.size }))) return;
+    setBusy(true);
+    try {
+      await DeleteQSOs(Array.from(sel) as any);
+      onDeleted();
+      load(windowMin); // rescan so the list reflects what's left
+    } catch { /* ignore */ } finally { setBusy(false); }
+  };
+
+  return (
+    <div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/50 p-4" onMouseDown={onClose}>
+      <div className="w-[820px] max-w-full max-h-[88vh] flex flex-col rounded-2xl border border-border bg-card shadow-2xl"
+        onMouseDown={(e) => e.stopPropagation()}>
+        {/* Header */}
+        <div className="flex items-center gap-2 px-5 py-3 border-b border-border">
+          <Copy className="size-4 text-primary" />
+          <span className="font-bold">{t('dup.title')}</span>
+          <button type="button" onClick={onClose} className="ml-auto rounded-md p-1 hover:bg-muted"><X className="size-4" /></button>
+        </div>
+
+        {/* Controls */}
+        <div className="px-5 py-3 border-b border-border/60 space-y-2">
+          <p className="text-xs text-muted-foreground">{t('dup.hint')}</p>
+          <div className="flex flex-wrap items-center gap-3">
+            <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
+              {t('dup.window')}
+              <select value={windowMin} onChange={(e) => setWindowMin(parseInt(e.target.value, 10))}
+                className="rounded-md border border-border bg-card px-2 py-1 text-xs">
+                {[2, 3, 5, 10, 15, 30].map((m) => <option key={m} value={m}>{m} {t('dup.minutes')}</option>)}
+                <option value={0}>{t('dup.sameDay')}</option>
+              </select>
+            </label>
+            <div className="ml-auto flex items-center gap-2">
+              <button type="button" onClick={selectExtras} className="rounded-md border border-border px-2 py-1 text-[11px] hover:bg-muted">{t('dup.selectExtras')}</button>
+              <button type="button" onClick={deselectAll} className="rounded-md border border-border px-2 py-1 text-[11px] hover:bg-muted">{t('dup.deselectAll')}</button>
+            </div>
+          </div>
+          <div className="text-[11px] text-muted-foreground">
+            {t('dup.summary', { groups: groups.length, qsos: totalQsos, sel: sel.size })}
+          </div>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto px-5 py-3 space-y-3 min-h-0">
+          {loading ? (
+            <div className="flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground">
+              <Loader2 className="size-4 animate-spin" /> {t('dup.scanning')}
+            </div>
+          ) : groups.length === 0 ? (
+            <div className="py-16 text-center text-sm text-muted-foreground">{t('dup.none')}</div>
+          ) : (
+            groups.map((g) => (
+              <div key={g.key} className="rounded-lg border border-border overflow-hidden">
+                <div className="flex items-center gap-2 px-3 py-1.5 bg-muted/40 text-xs font-bold">
+                  <span className="font-mono">{g.qsos[0].callsign}</span>
+                  <span className="text-muted-foreground font-normal">
+                    {g.qsos[0].band} · {g.qsos[0].mode} · {g.qsos.length}×
+                  </span>
+                </div>
+                <table className="w-full text-xs">
+                  <thead className="text-[10px] uppercase tracking-wider text-muted-foreground">
+                    <tr className="border-b border-border/60">
+                      <th className="w-8"></th>
+                      <th className="text-left px-2 py-1 font-semibold">{t('dup.colDate')}</th>
+                      <th className="text-left px-2 py-1 font-semibold">{t('dup.colFreq')}</th>
+                      <th className="text-left px-2 py-1 font-semibold">{t('dup.colRst')}</th>
+                      <th className="text-left px-2 py-1 font-semibold">{t('dup.colName')}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {g.qsos.map((q, i) => {
+                      const checked = sel.has(q.id);
+                      return (
+                        <tr key={q.id} className={cn('border-t border-border/40', checked && 'bg-danger/10')}>
+                          <td className="text-center py-1">
+                            <input type="checkbox" checked={checked} onChange={() => toggle(q.id)} />
+                          </td>
+                          <td className="px-2 py-1 font-mono whitespace-nowrap">
+                            {fmtDate(q.qso_date)}
+                            {i === 0 && <span className="ml-1.5 text-[9px] uppercase tracking-wider text-success">{t('dup.keep')}</span>}
+                          </td>
+                          <td className="px-2 py-1 font-mono">{fmtFreq(q.freq_hz)}</td>
+                          <td className="px-2 py-1 font-mono">{q.rst_sent || '—'}/{q.rst_rcvd || '—'}</td>
+                          <td className="px-2 py-1 truncate max-w-[160px]">{q.name || ''}</td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            ))
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center gap-2 px-5 py-3 border-t border-border">
+          <button type="button" onClick={onClose} className="rounded-md border border-border px-3 py-1.5 text-sm hover:bg-muted">{t('dup.close')}</button>
+          <button type="button" onClick={doDelete} disabled={busy || sel.size === 0}
+            className="ml-auto inline-flex items-center gap-1.5 rounded-md bg-destructive px-3 py-1.5 text-sm font-bold text-destructive-foreground hover:bg-destructive disabled:opacity-40">
+            {busy ? <Loader2 className="size-3.5 animate-spin" /> : <Trash2 className="size-3.5" />}
+            {t('dup.deleteSel', { n: sel.size })}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/DvkPanel.tsx

@@ -0,0 +1,102 @@
+import { Mic, Square, X, Radio, Repeat } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
+
+export type DVKMsg = { slot: number; label: string; has_audio: boolean; duration_sec: number };
+export type DVKStat = { recording: boolean; playing: boolean; rec_slot: number };
+
+type Props = {
+  messages: DVKMsg[];
+  status: DVKStat;
+  onPlay: (slot: number) => void;
+  onStop: () => void;
+  onClose: () => void;
+  autoCq: boolean;
+  autoCqSecs: number;
+  onToggleAutoCq: (on: boolean) => void;
+  onSetAutoCqSecs: (n: number) => void;
+  phoneOk: boolean; // false when the rig is on a non-phone mode → DVK TX blocked
+};
+
+// Operating panel for the Digital Voice Keyer — transmits the recorded F1–F6
+// voice messages to the rig ("To Radio"). Mirrors the WinKeyer panel's slot in
+// the reserved area. Recording/labeling lives in Settings → Audio.
+export function DvkPanel({ messages, status, onPlay, onStop, onClose, autoCq, autoCqSecs, onToggleAutoCq, onSetAutoCqSecs, phoneOk }: Props) {
+  const { t } = useI18n();
+  const recorded = messages.filter((m) => m.has_audio);
+  const anyAudio = recorded.length > 0;
+  return (
+    <div className="h-full flex flex-col rounded-lg border border-border bg-card shadow-sm overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-muted/40 shrink-0">
+        <Mic className="size-3.5 text-primary" />
+        <span className="text-[11px] font-semibold uppercase tracking-wider">{t('dvkp.voiceKeyer')}</span>
+        <span className={cn('size-2 rounded-full', status.playing ? 'bg-danger animate-pulse' : 'bg-success')} />
+        {status.playing && <span className="text-[10px] text-danger font-medium">TX</span>}
+        <div className="flex-1" />
+        <Button variant="ghost" size="sm" className="h-6 px-2 text-[11px]" onClick={onStop} disabled={!status.playing}>
+          <Square className="size-3" /> {t('dvkp.stop')}
+        </Button>
+        <button className="text-muted-foreground hover:text-foreground" title={t('dvkp.disable')} onClick={onClose}>
+          <X className="size-3.5" />
+        </button>
+      </div>
+
+      <div className="flex-1 min-h-0 overflow-auto p-2">
+        {!anyAudio ? (
+          <div className="h-full flex flex-col items-center justify-center gap-1 text-center text-[11px] text-muted-foreground px-3">
+            <Radio className="size-5 opacity-50" />
+            {t('dvkp.noMsgPre')} <strong>{t('dvkp.settingsPath')}</strong> {t('dvkp.noMsgPost')}
+          </div>
+        ) : (
+          // Only the recorded slots are shown. Two columns filling top-to-bottom
+          // (rows sized to the count) — use the width instead of scrolling, so the
+          // panel keeps the same height as the other reserved-area widgets.
+          <div className="grid grid-flow-col gap-1"
+            style={{ gridTemplateRows: `repeat(${Math.max(1, Math.ceil(recorded.length / 2))}, minmax(0, auto))` }}>
+            {recorded.map((m) => (
+              <button
+                key={m.slot}
+                type="button"
+                disabled={!phoneOk}
+                onClick={() => onPlay(m.slot)}
+                title={!phoneOk ? t('dvkp.notPhone') : t('dvkp.transmit', { slot: m.slot, label: m.label ? ' — ' + m.label : '', dur: m.duration_sec.toFixed(1) })}
+                className={cn(
+                  'flex items-center gap-1.5 rounded-md border px-2 py-1 text-left transition-colors',
+                  phoneOk
+                    ? 'border-border bg-background hover:border-primary/60 hover:bg-accent/30 cursor-pointer'
+                    : 'border-dashed border-border/60 text-muted-foreground/50 cursor-not-allowed',
+                )}
+              >
+                <span className="font-mono text-[11px] font-bold text-primary shrink-0">F{m.slot}</span>
+                <span className="text-xs truncate flex-1">{m.label || t('dvkp.message')}</span>
+                {(m.label || '').toUpperCase().includes('CQ') && autoCq && <Repeat className="size-3 text-primary shrink-0" />}
+                <span className="text-[9px] text-muted-foreground shrink-0">{m.duration_sec.toFixed(1)}s</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Auto-CQ footer — repeats a CQ-labelled slot on a timer. Greyed out on a
+          non-phone mode (the DVK won't transmit there). */}
+      <div className="shrink-0 border-t border-border bg-muted/30 px-2 py-1.5 flex items-center gap-2">
+        <label className={cn('flex items-center gap-1.5 text-[11px] cursor-pointer', !phoneOk && 'opacity-50')} title={phoneOk ? t('dvkp.autoCqHint') : t('dvkp.notPhone')}>
+          <input type="checkbox" className="accent-primary" checked={autoCq} disabled={!phoneOk}
+            onChange={(e) => onToggleAutoCq(e.target.checked)} />
+          <Repeat className="size-3" /> {t('dvkp.autoCq')}
+        </label>
+        <div className="flex-1" />
+        <span className="text-[10px] text-muted-foreground">{t('dvkp.gap')}</span>
+        <input type="number" min={0} max={120} value={autoCqSecs}
+          onChange={(e) => onSetAutoCqSecs(parseInt(e.target.value, 10))}
+          className="w-12 h-6 rounded border border-input bg-background px-1 text-[11px] font-mono text-center" />
+        <span className="text-[10px] text-muted-foreground">s</span>
+      </div>
+
+      {!phoneOk && (
+        <div className="shrink-0 bg-warning-muted text-warning-muted-foreground text-[10px] px-2 py-1 text-center">{t('dvkp.notPhone')}</div>
+      )}
+    </div>
+  );
+}

frontend/src/components/ErrorBoundary.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { LogUIError } from '../../wailsjs/go/main/App';
+
+// A render error used to empty the window and leave nothing behind: no line in
+// opslog.log, no dialog, no way for the operator to say more than "white screen".
+// Two separate reports — one after logging a 10 GHz QSO, one on starting a DVK
+// auto-call — stayed undiagnosed for weeks for exactly that reason.
+//
+// So this does two things, in order of importance:
+//
+//  1. Writes the error and its stack to the app log through LogUIError, so the
+//     next report arrives WITH the cause instead of a description of a blank
+//     screen.
+//  2. Shows it, with the text selectable and a button to copy it, because the
+//     person who can act on it is the one looking at the screen.
+//
+// It deliberately does NOT try to recover the tree. React cannot guarantee the
+// state is sane after a render throw, and a half-working logger is worse than
+// one that says plainly what happened and offers a reload.
+
+type Props = { children: React.ReactNode };
+type State = { error: Error | null; info: string };
+
+export class ErrorBoundary extends React.Component<Props, State> {
+  state: State = { error: null, info: '' };
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    const stack = (info?.componentStack || error.stack || '').trim();
+    this.setState({ info: stack });
+    // Never let the reporting path throw: it runs while the app is already broken.
+    try {
+      LogUIError('render crash', `${error.name}: ${error.message}`, stack);
+    } catch {
+      /* the backend may be gone too — the on-screen copy still works */
+    }
+  }
+
+  render() {
+    const { error, info } = this.state;
+    if (!error) return this.props.children;
+
+    const report = `${error.name}: ${error.message}\n\n${info}`;
+    return (
+      <div style={{
+        position: 'fixed', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
+        padding: 24, background: '#0b1220', color: '#e5e7eb', fontFamily: 'ui-sans-serif, system-ui, sans-serif',
+        overflow: 'auto', zIndex: 9999,
+      }}>
+        <div style={{ maxWidth: 820, width: '100%' }}>
+          <h1 style={{ fontSize: 18, fontWeight: 700, margin: '0 0 6px' }}>
+            OpsLog hit an error and stopped drawing
+          </h1>
+          <p style={{ fontSize: 13, opacity: 0.8, margin: '0 0 14px' }}>
+            Your log is safe — this is the window, not the database. The details below
+            are already in the app log; send them with your report.
+          </p>
+          <pre style={{
+            whiteSpace: 'pre-wrap', wordBreak: 'break-word', userSelect: 'text',
+            fontSize: 11.5, lineHeight: 1.5, background: '#111827', border: '1px solid #1f2937',
+            borderRadius: 8, padding: 12, maxHeight: '48vh', overflow: 'auto', margin: 0,
+          }}>{report}</pre>
+          <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
+            <button
+              onClick={() => { void navigator.clipboard?.writeText(report); }}
+              style={{
+                padding: '7px 14px', borderRadius: 6, border: '1px solid #374151',
+                background: '#1f2937', color: '#e5e7eb', fontSize: 13, cursor: 'pointer',
+              }}>
+              Copy the details
+            </button>
+            <button
+              onClick={() => window.location.reload()}
+              style={{
+                padding: '7px 14px', borderRadius: 6, border: '1px solid #1d4ed8',
+                background: '#2563eb', color: '#fff', fontSize: 13, fontWeight: 600, cursor: 'pointer',
+              }}>
+              Reload the window
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+// installGlobalErrorLogging catches what a boundary cannot: an error thrown from
+// a timer, an event handler or a rejected promise. Those do not unmount the tree,
+// so they leave no trace at all — and an auto-call loop lives entirely in
+// callbacks, which is precisely where a white screen was reported.
+export function installGlobalErrorLogging() {
+  const report = (kind: string, message: string, stack?: string) => {
+    try {
+      LogUIError(kind, message, stack || '');
+    } catch {
+      /* nothing more we can do from here */
+    }
+  };
+
+  window.addEventListener('error', (e: ErrorEvent) => {
+    const src = e.filename ? ` (${e.filename}:${e.lineno}:${e.colno})` : '';
+    report('uncaught error', (e.message || 'unknown error') + src, e.error?.stack);
+  });
+
+  window.addEventListener('unhandledrejection', (e: PromiseRejectionEvent) => {
+    const r: any = e.reason;
+    report('unhandled rejection', String(r?.message ?? r ?? 'unknown'), r?.stack);
+  });
+}

frontend/src/components/ExportFieldsDialog.tsx

@@ -0,0 +1,139 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { useI18n } from '@/lib/i18n';
+import { writeUiPref } from '@/lib/uiPref';
+import { ADIFFields, ADIFExtraFields } from '@/../wailsjs/go/main/App';
+import { adif } from '@/../wailsjs/go/models';
+
+type FieldDef = adif.FieldDef;
+const PREF_KEY = 'opslog.exportFields';
+
+// One category card with its checkboxes + All/None. Defined at MODULE scope (not
+// inside ExportFieldsDialog) so its component identity is stable across renders —
+// an inner component is re-created every render, remounting the whole subtree and
+// making the All/None buttons and checkboxes feel dead.
+function GroupCard({ title, tags, warn, sel, allLabel, noneLabel, onAll, onNone, onToggle }: {
+  title: string; tags: string[]; warn?: boolean; sel: Set<string>;
+  allLabel: string; noneLabel: string;
+  onAll: (tags: string[]) => void; onNone: (tags: string[]) => void; onToggle: (name: string, on: boolean) => void;
+}) {
+  return (
+    <div className={`rounded-md border p-2 ${warn ? 'border-warning-border/50 bg-warning-muted/20' : 'border-border/60'}`}>
+      <div className="flex items-center justify-between mb-1 gap-2">
+        <span className={`text-[11px] font-semibold uppercase tracking-wide ${warn ? 'text-warning-muted-foreground' : 'text-muted-foreground'}`}>{title}</span>
+        <span className="flex gap-1.5 shrink-0">
+          <button type="button" className="text-[10px] text-primary hover:underline" onClick={() => onAll(tags)}>{allLabel}</button>
+          <button type="button" className="text-[10px] text-muted-foreground hover:underline" onClick={() => onNone(tags)}>{noneLabel}</button>
+        </span>
+      </div>
+      {tags.map((name) => (
+        <label key={name} className="flex items-center gap-1.5 text-[11px] cursor-pointer py-0.5">
+          <Checkbox checked={sel.has(name)} onCheckedChange={(c) => onToggle(name, !!c)} />
+          <span className="font-mono break-all">{name}</span>
+        </label>
+      ))}
+    </div>
+  );
+}
+
+// ExportFieldsDialog lets the operator pick exactly which ADIF fields an export
+// writes. Two groups: the official ADIF 3.1.7 dictionary (grouped by category)
+// and the OpsLog / non-standard tags actually present in the log's extras. The
+// chosen set is returned to the parent (which runs the selected/global export)
+// and persisted so it's the default next time.
+export function ExportFieldsDialog({ open, count, onExport, onClose }: {
+  open: boolean;
+  count: number;              // how many QSOs the pending export covers
+  onExport: (fields: string[]) => void;
+  onClose: () => void;
+}) {
+  const { t } = useI18n();
+  const [official, setOfficial] = useState<FieldDef[]>([]);
+  const [extras, setExtras] = useState<string[]>([]);
+  const [sel, setSel] = useState<Set<string>>(new Set());
+
+  const defaultSet = (flds: FieldDef[]) =>
+    new Set(flds.filter((d) => d.promoted && !d.deprecated).map((d) => d.name));
+
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    (async () => {
+      const [f, e] = await Promise.all([ADIFFields(), ADIFExtraFields()]);
+      if (cancelled) return;
+      const flds = (f ?? []) as FieldDef[];
+      setOfficial(flds);
+      setExtras((e ?? []) as string[]);
+      let saved: string[] | null = null;
+      try { const raw = localStorage.getItem(PREF_KEY); if (raw) saved = JSON.parse(raw); } catch { /* ignore */ }
+      setSel(saved && saved.length ? new Set(saved.map((x) => x.toUpperCase())) : defaultSet(flds));
+    })().catch(() => {});
+    return () => { cancelled = true; };
+  }, [open]);
+
+  // Official fields grouped by category (deprecated ones are import-only → hidden).
+  const groups = useMemo(() => {
+    const m = new Map<string, FieldDef[]>();
+    for (const d of official) {
+      if (d.deprecated) continue;
+      const g = d.category || 'Misc';
+      (m.get(g) ?? m.set(g, []).get(g)!).push(d);
+    }
+    return [...m.entries()];
+  }, [official]);
+
+  const toggle = (name: string, on: boolean) =>
+    setSel((s) => { const n = new Set(s); if (on) n.add(name); else n.delete(name); return n; });
+  const setMany = (names: string[], on: boolean) =>
+    setSel((s) => { const n = new Set(s); for (const x of names) { if (on) n.add(x); else n.delete(x); } return n; });
+
+  const doExport = () => {
+    const fields = [...sel];
+    writeUiPref(PREF_KEY, JSON.stringify(fields));
+    onExport(fields);
+  };
+
+  const allLabel = t('exf.all');
+  const noneLabel = t('exf.none');
+  const cardProps = {
+    sel, allLabel, noneLabel,
+    onAll: (tags: string[]) => setMany(tags, true),
+    onNone: (tags: string[]) => setMany(tags, false),
+    onToggle: toggle,
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => { if (!o) onClose(); }}>
+      <DialogContent className="max-w-4xl">
+        <DialogHeader>
+          <DialogTitle>{t('exf.title')}</DialogTitle>
+          <DialogDescription>{t('exf.desc')}</DialogDescription>
+        </DialogHeader>
+
+        <div className="flex items-center gap-2 px-1 text-[11px] text-muted-foreground">
+          <span>{t('exf.chosen', { n: sel.size })}</span>
+          <Button variant="ghost" size="sm" className="ml-auto h-6 text-[11px]" onClick={() => setSel(defaultSet(official))}>
+            {t('exf.defaults')}
+          </Button>
+        </div>
+
+        <div className="grid grid-cols-3 gap-3 max-h-[56vh] overflow-y-auto pr-1">
+          {/* OpsLog / non-standard group first (most relevant to keep or drop). */}
+          {extras.length > 0 && <GroupCard title={t('exf.opslogGroup')} tags={extras} warn {...cardProps} />}
+          {groups.map(([g, list]) => (
+            <GroupCard key={g} title={g} tags={list.map((d) => d.name)} {...cardProps} />
+          ))}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>{t('exf.cancel')}</Button>
+          <Button disabled={sel.size === 0} onClick={doExport}>{t('exf.export', { n: count })}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/FilterBuilder.tsx

@@ -0,0 +1,330 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Plus, Trash2, Save, FolderOpen, X } from 'lucide-react';
+import { writeUiPref } from '@/lib/uiPref';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useI18n } from '@/lib/i18n';
+
+// FilterBuilder — Log4OM-style advanced filter for the QSO list. The operator
+// adds field/operator/value conditions, joins them with AND or OR, and can
+// save/recall named presets. Closing the dialog applies the filter.
+
+export type FilterOp =
+  | 'eq' | 'ne' | 'gt' | 'lt' | 'ge' | 'le'
+  | 'contains' | 'startswith' | 'endswith' | 'empty' | 'notempty';
+
+export interface FilterCondition { field: string; op: FilterOp; value: string }
+export interface QueryFilter {
+  quick_callsign?: string;
+  conditions: FilterCondition[];
+  match: 'AND' | 'OR';
+  limit?: number;
+  offset?: number;
+}
+
+// Curated field catalog. `value` MUST match a column in the backend whitelist
+// (qso.FilterableFields); `type` only drives which operators/value input we show.
+// 'date' is an ISO timestamp column (qso_date); 'adifdate' is an ADIF YYYYMMDD
+// string (the confirmation dates) — picked with a calendar, stored 8-digit.
+type FieldType = 'text' | 'number' | 'date' | 'adifdate';
+const FIELDS: { value: string; label: string; type: FieldType }[] = [
+  { value: 'callsign', label: 'fltb.fCallsign', type: 'text' },
+  { value: 'qso_date', label: 'fltb.fDate', type: 'date' },
+  { value: 'qso_date_off', label: 'fltb.fEndDate', type: 'date' },
+  { value: 'band', label: 'fltb.fBand', type: 'text' },
+  { value: 'band_rx', label: 'fltb.fRxBand', type: 'text' },
+  { value: 'mode', label: 'fltb.fMode', type: 'text' },
+  { value: 'submode', label: 'fltb.fSubmode', type: 'text' },
+  { value: 'freq_hz', label: 'fltb.fFreq', type: 'number' },
+  { value: 'freq_rx_hz', label: 'fltb.fRxFreq', type: 'number' },
+  { value: 'rst_sent', label: 'fltb.fRstSent', type: 'text' },
+  { value: 'rst_rcvd', label: 'fltb.fRstRcvd', type: 'text' },
+  { value: 'name', label: 'fltb.fName', type: 'text' },
+  { value: 'qth', label: 'fltb.fQth', type: 'text' },
+  { value: 'address', label: 'fltb.fAddress', type: 'text' },
+  { value: 'email', label: 'fltb.fEmail', type: 'text' },
+  { value: 'grid', label: 'fltb.fGrid', type: 'text' },
+  { value: 'country', label: 'fltb.fCountry', type: 'text' },
+  { value: 'state', label: 'fltb.fState', type: 'text' },
+  { value: 'cnty', label: 'fltb.fCounty', type: 'text' },
+  { value: 'dxcc', label: 'fltb.fDxcc', type: 'number' },
+  { value: 'cont', label: 'fltb.fContinent', type: 'text' },
+  { value: 'cqz', label: 'fltb.fCqz', type: 'number' },
+  { value: 'ituz', label: 'fltb.fItuz', type: 'number' },
+  { value: 'iota', label: 'fltb.fIota', type: 'text' },
+  { value: 'sota_ref', label: 'fltb.fSota', type: 'text' },
+  { value: 'pota_ref', label: 'fltb.fPota', type: 'text' },
+  { value: 'wwff_ref', label: 'fltb.fWwff', type: 'text' },
+  { value: 'rig', label: 'fltb.fRig', type: 'text' },
+  { value: 'ant', label: 'fltb.fAntenna', type: 'text' },
+  // Same naming as the bulk editor: each entry says whether it is a STATUS or a
+  // DATE and in which direction, grouped by channel. "Upload" was wrong for half
+  // of them — a paper QSL is not uploaded.
+  { value: 'qsl_sent', label: 'fltb.fQslSent', type: 'text' },
+  { value: 'qsl_sent_date', label: 'fltb.fQslSentDate', type: 'adifdate' },
+  { value: 'qsl_rcvd', label: 'fltb.fQslRcvd', type: 'text' },
+  { value: 'qsl_rcvd_date', label: 'fltb.fQslRcvdDate', type: 'adifdate' },
+  { value: 'qsl_via', label: 'fltb.fQslVia', type: 'text' },
+  { value: 'lotw_sent', label: 'fltb.fLotwSent', type: 'text' },
+  { value: 'lotw_sent_date', label: 'fltb.fLotwSentDate', type: 'adifdate' },
+  { value: 'lotw_rcvd', label: 'fltb.fLotwRcvd', type: 'text' },
+  { value: 'lotw_rcvd_date', label: 'fltb.fLotwRcvdDate', type: 'adifdate' },
+  { value: 'eqsl_sent', label: 'fltb.fEqslSent', type: 'text' },
+  { value: 'eqsl_sent_date', label: 'fltb.fEqslSentDate', type: 'adifdate' },
+  { value: 'eqsl_rcvd', label: 'fltb.fEqslRcvd', type: 'text' },
+  { value: 'eqsl_rcvd_date', label: 'fltb.fEqslRcvdDate', type: 'adifdate' },
+  { value: 'qrzcom_qso_upload_status', label: 'fltb.fQrzSent', type: 'text' },
+  { value: 'qrzcom_qso_upload_date', label: 'fltb.fQrzSentDate', type: 'adifdate' },
+  { value: 'qrzcom_qso_download_status', label: 'fltb.fQrzRcvd', type: 'text' },
+  { value: 'qrzcom_qso_download_date', label: 'fltb.fQrzRcvdDate', type: 'adifdate' },
+  { value: 'clublog_qso_upload_status', label: 'fltb.fClublogSent', type: 'text' },
+  { value: 'clublog_qso_upload_date', label: 'fltb.fClublogSentDate', type: 'adifdate' },
+  { value: 'hrdlog_qso_upload_status', label: 'fltb.fHrdlogSent', type: 'text' },
+  { value: 'hrdlog_qso_upload_date', label: 'fltb.fHrdlogSentDate', type: 'adifdate' },
+  { value: 'contest_id', label: 'fltb.fContestId', type: 'text' },
+  { value: 'srx', label: 'fltb.fSerialRcvd', type: 'number' },
+  { value: 'stx', label: 'fltb.fSerialSent', type: 'number' },
+  { value: 'prop_mode', label: 'fltb.fPropMode', type: 'text' },
+  { value: 'sat_name', label: 'fltb.fSatellite', type: 'text' },
+  { value: 'station_callsign', label: 'fltb.fMyCallsign', type: 'text' },
+  { value: 'operator', label: 'fltb.fOperator', type: 'text' },
+  { value: 'owner_callsign', label: 'fltb.fOwnerCallsign', type: 'text' },
+  { value: 'my_grid', label: 'fltb.fMyGrid', type: 'text' },
+  { value: 'my_country', label: 'fltb.fMyCountry', type: 'text' },
+  { value: 'my_state', label: 'fltb.fMyState', type: 'text' },
+  { value: 'my_cnty', label: 'fltb.fMyCounty', type: 'text' },
+  { value: 'my_iota', label: 'fltb.fMyIota', type: 'text' },
+  { value: 'my_sota_ref', label: 'fltb.fMySota', type: 'text' },
+  { value: 'my_pota_ref', label: 'fltb.fMyPota', type: 'text' },
+  { value: 'my_wwff_ref', label: 'fltb.fMyWwff', type: 'text' },
+  { value: 'my_street', label: 'fltb.fMyStreet', type: 'text' },
+  { value: 'my_city', label: 'fltb.fMyCity', type: 'text' },
+  { value: 'my_postal_code', label: 'fltb.fMyPostal', type: 'text' },
+  { value: 'my_rig', label: 'fltb.fMyRig', type: 'text' },
+  { value: 'my_antenna', label: 'fltb.fMyAntenna', type: 'text' },
+  { value: 'tx_pwr', label: 'fltb.fTxPower', type: 'number' },
+  { value: 'comment', label: 'fltb.fComment', type: 'text' },
+  { value: 'notes', label: 'fltb.fNotes', type: 'text' },
+];
+
+const OPS: { value: FilterOp; label: string }[] = [
+  { value: 'eq', label: 'fltb.opEq' },
+  { value: 'ne', label: 'fltb.opNe' },
+  { value: 'contains', label: 'fltb.opContains' },
+  { value: 'startswith', label: 'fltb.opStartsWith' },
+  { value: 'endswith', label: 'fltb.opEndsWith' },
+  { value: 'gt', label: 'fltb.opGt' },
+  { value: 'lt', label: 'fltb.opLt' },
+  { value: 'ge', label: 'fltb.opGe' },
+  { value: 'le', label: 'fltb.opLe' },
+  { value: 'empty', label: 'fltb.opEmpty' },
+  { value: 'notempty', label: 'fltb.opNotEmpty' },
+];
+
+const TEXT_OPS: FilterOp[] = ['contains', 'startswith', 'endswith', 'eq', 'ne', 'empty', 'notempty'];
+const NUM_OPS: FilterOp[] = ['eq', 'ne', 'gt', 'lt', 'ge', 'le', 'empty', 'notempty'];
+
+function opsFor(field: string): { value: FilterOp; label: string }[] {
+  const t = FIELDS.find((f) => f.value === field)?.type ?? 'text';
+  // 'adifdate' is stored as a string but sorts chronologically, so it takes the
+  // comparison operators (before/after), not the text ones.
+  const allow = t === 'text' ? TEXT_OPS : NUM_OPS;
+  return OPS.filter((o) => allow.includes(o.value));
+}
+
+const PRESETS_KEY = 'hamlog.filterPresets';
+function loadPresets(): Record<string, QueryFilter> {
+  try { return JSON.parse(localStorage.getItem(PRESETS_KEY) || '{}'); } catch { return {}; }
+}
+function savePresets(p: Record<string, QueryFilter>) {
+  // Write-through to the portable DB so presets travel with the data/ folder.
+  writeUiPref(PRESETS_KEY, JSON.stringify(p));
+}
+
+interface Props {
+  open: boolean;
+  initial: QueryFilter;
+  onApply: (f: QueryFilter) => void; // applies and closes
+  onClose: () => void;
+}
+
+export function FilterBuilder({ open, initial, onApply, onClose }: Props) {
+  const { t } = useI18n();
+  // Field dropdown sorted alphabetically by translated label (the FIELDS array is
+  // grouped by category for maintenance; the operator wants it A→Z to find things).
+  const sortedFields = useMemo(
+    () => FIELDS.map((f) => ({ f, txt: t(f.label) })).sort((a, b) => a.txt.localeCompare(b.txt)),
+    [t],
+  );
+  const [conditions, setConditions] = useState<FilterCondition[]>([]);
+  const [match, setMatch] = useState<'AND' | 'OR'>('AND');
+  const [presets, setPresets] = useState<Record<string, QueryFilter>>({});
+  const [presetName, setPresetName] = useState('');
+
+  // Seed from the active filter each time the dialog opens.
+  useEffect(() => {
+    if (!open) return;
+    setConditions(initial.conditions?.length ? initial.conditions.map((c) => ({ ...c })) : []);
+    setMatch(initial.match === 'OR' ? 'OR' : 'AND');
+    setPresets(loadPresets());
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const setCond = (i: number, patch: Partial<FilterCondition>) =>
+    setConditions((cs) => cs.map((c, j) => (j === i ? { ...c, ...patch } : c)));
+  const addCond = () => setConditions((cs) => [...cs, { field: 'callsign', op: 'contains', value: '' }]);
+  const removeCond = (i: number) => setConditions((cs) => cs.filter((_, j) => j !== i));
+
+  function buildFilter(): QueryFilter {
+    const clean = conditions.filter((c) => c.field && c.op);
+    return { ...initial, conditions: clean, match };
+  }
+
+  function apply() { onApply(buildFilter()); }
+
+  function saveCurrentPreset() {
+    const name = presetName.trim();
+    if (!name) return;
+    const next = { ...presets, [name]: buildFilter() };
+    savePresets(next);
+    setPresets(next);
+    setPresetName('');
+  }
+  function loadPreset(name: string) {
+    const f = presets[name];
+    if (!f) return;
+    setConditions(f.conditions?.map((c) => ({ ...c })) ?? []);
+    setMatch(f.match === 'OR' ? 'OR' : 'AND');
+  }
+  function deletePreset(name: string) {
+    const next = { ...presets };
+    delete next[name];
+    savePresets(next);
+    setPresets(next);
+  }
+
+  const presetNames = Object.keys(presets).sort();
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => { if (!o) apply(); }}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader className="px-6 py-4">
+          <DialogTitle>{t('fltb.title')}</DialogTitle>
+        </DialogHeader>
+
+        <div className="px-6 py-4 space-y-5">
+        {/* Match mode + presets */}
+        <div className="flex flex-wrap items-center gap-2 text-sm">
+          <span className="text-muted-foreground">{t('fltb.match')}</span>
+          <div className="inline-flex rounded-md border border-border overflow-hidden">
+            {(['AND', 'OR'] as const).map((m) => (
+              <button key={m} type="button" onClick={() => setMatch(m)}
+                className={`px-3 py-1 text-xs font-medium ${match === m ? 'bg-primary text-primary-foreground' : 'hover:bg-accent'}`}>
+                {m === 'AND' ? t('fltb.all') : t('fltb.any')}
+              </button>
+            ))}
+          </div>
+          <div className="flex-1" />
+          {presetNames.length > 0 && (
+            <Select onValueChange={loadPreset}>
+              <SelectTrigger className="h-8 w-44 text-xs"><FolderOpen className="size-3.5 mr-1" /><SelectValue placeholder={t('fltb.loadPreset')} /></SelectTrigger>
+              <SelectContent>
+                {presetNames.map((n) => (
+                  <SelectItem key={n} value={n}>
+                    <span className="inline-flex items-center gap-2">
+                      {n}
+                      {/* Radix SelectItem selects on pointer-up, so an onClick here
+                          fires too late — the menu has already loaded the preset and
+                          closed. Intercept pointer-down (preventDefault stops Radix
+                          claiming it) and delete there instead. */}
+                      <Trash2
+                        className="size-3 text-muted-foreground hover:text-destructive"
+                        onPointerDown={(e) => { e.preventDefault(); e.stopPropagation(); deletePreset(n); }}
+                      />
+                    </span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+        </div>
+
+        {/* Conditions */}
+        <div className="space-y-2 max-h-[50vh] overflow-auto p-1">
+          {conditions.length === 0 && (
+            <div className="text-xs text-muted-foreground py-4 text-center">{t('fltb.noConditions')}</div>
+          )}
+          {conditions.map((c, i) => {
+            const needsValue = c.op !== 'empty' && c.op !== 'notempty';
+            const fieldType = FIELDS.find((f) => f.value === c.field)?.type ?? 'text';
+            return (
+              <div key={i} className="flex items-center gap-2">
+                <span className="text-[10px] w-8 text-right text-muted-foreground font-mono">{i === 0 ? t('fltb.where') : match}</span>
+                <Select value={c.field} onValueChange={(v) => {
+                  // Reset op if the new field type doesn't allow the current one.
+                  const allowed = opsFor(v).map((o) => o.value);
+                  setCond(i, { field: v, op: allowed.includes(c.op) ? c.op : allowed[0] });
+                }}>
+                  <SelectTrigger className="h-8 w-48 text-xs"><SelectValue /></SelectTrigger>
+                  <SelectContent className="max-h-72">
+                    {sortedFields.map(({ f, txt }) => <SelectItem key={f.value} value={f.value}>{txt}</SelectItem>)}
+                  </SelectContent>
+                </Select>
+                <Select value={c.op} onValueChange={(v) => setCond(i, { op: v as FilterOp })}>
+                  <SelectTrigger className="h-8 w-40 text-xs"><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    {opsFor(c.field).map((o) => <SelectItem key={o.value} value={o.value}>{t(o.label)}</SelectItem>)}
+                  </SelectContent>
+                </Select>
+                <Input
+                  // An ADIF date is picked with a calendar but STORED as the
+                  // 8-digit form the column holds, so the comparison stays a
+                  // plain string one on both sides.
+                  type={fieldType === 'date' || fieldType === 'adifdate' ? 'date' : fieldType === 'number' ? 'number' : 'text'}
+                  className="h-8 flex-1 text-xs"
+                  disabled={!needsValue}
+                  placeholder={needsValue ? (fieldType === 'date' ? 'YYYY-MM-DD' : t('fltb.valuePh')) : '—'}
+                  // \d, not d: the escape was missing, so the test never matched
+                  // an 8-digit ADIF date and the calendar input was handed
+                  // "20260728" — which type=date rejects, showing an empty box
+                  // over a value that was really there.
+                  value={fieldType === 'adifdate' && /^\d{8}$/.test(c.value)
+                    ? `${c.value.slice(0, 4)}-${c.value.slice(4, 6)}-${c.value.slice(6, 8)}`
+                    : c.value}
+                  onChange={(e) => setCond(i, {
+                    value: fieldType === 'adifdate' ? e.target.value.replace(/-/g, '') : e.target.value,
+                  })}
+                  onKeyDown={(e) => { if (e.key === 'Enter') apply(); }}
+                />
+                <button type="button" onClick={() => removeCond(i)} className="text-muted-foreground hover:text-destructive shrink-0" title={t('fltb.remove')}>
+                  <X className="size-4" />
+                </button>
+              </div>
+            );
+          })}
+          <Button variant="outline" size="sm" className="h-8" onClick={addCond}>
+            <Plus className="size-3.5 mr-1" /> {t('fltb.addCondition')}
+          </Button>
+        </div>
+
+        {/* Save preset */}
+        <div className="flex items-center gap-2 border-t border-border pt-3">
+          <Input className="h-8 w-56 text-xs" placeholder={t('fltb.presetNamePh')} value={presetName}
+            onChange={(e) => setPresetName(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter') saveCurrentPreset(); }} />
+          <Button variant="outline" size="sm" className="h-8" disabled={!presetName.trim()} onClick={saveCurrentPreset}>
+            <Save className="size-3.5 mr-1" /> {t('fltb.savePreset')}
+          </Button>
+        </div>
+        </div>
+
+        <DialogFooter className="px-6 py-4 bg-transparent border-t-0">
+          <Button variant="ghost" onClick={() => { setConditions([]); }}>{t('fltb.clear')}</Button>
+          <Button variant="outline" onClick={onClose}>{t('fltb.cancel')}</Button>
+          <Button onClick={apply}>{t('fltb.applyClose')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/FirstRunModal.tsx

@@ -0,0 +1,135 @@
+import { useEffect, useState } from 'react';
+import { Radio } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+import { useI18n, FlagGB, FlagFR, type Lang } from '@/lib/i18n';
+import { GetActiveProfile, SaveProfile, DownloadAllReferenceLists } from '../../wailsjs/go/main/App';
+import type { profile as profileModels } from '../../wailsjs/go/models';
+
+type Profile = Omit<profileModels.Profile, 'convertValues'>;
+
+// FirstRunModal collects the mandatory station identity on the very first launch
+// (no callsign configured yet). It writes straight into the active profile, so
+// OpsLog has a valid station before any QSO is logged. Not dismissable.
+export function FirstRunModal({ onDone }: { onDone: () => void }) {
+  const { t, lang, setLang } = useI18n();
+  const [p, setP] = useState<Profile | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [err, setErr] = useState('');
+  const [refsState, setRefsState] = useState<'idle' | 'loading' | 'done'>('idle');
+  const [refsMsg, setRefsMsg] = useState('');
+
+  async function downloadRefs() {
+    setRefsState('loading');
+    try {
+      const summary = await DownloadAllReferenceLists();
+      setRefsMsg(summary);
+      setRefsState('done');
+    } catch (e: any) {
+      setRefsMsg(String(e?.message ?? e));
+      setRefsState('idle');
+    }
+  }
+
+  useEffect(() => {
+    GetActiveProfile().then((x) => setP(x as Profile)).catch(() => setP({} as Profile));
+  }, []);
+
+  const set = (patch: Partial<Profile>) => setP((s: Profile | null) => ({ ...(s as Profile), ...patch }));
+
+  const callsign = (p?.callsign ?? '').trim().toUpperCase();
+  const grid = (p?.my_grid ?? '').trim().toUpperCase();
+  const operator = (p?.operator ?? '').trim().toUpperCase();
+  const canSave = callsign.length >= 3 && grid.length >= 4;
+
+  async function save() {
+    if (!p || !canSave) return;
+    setSaving(true);
+    setErr('');
+    try {
+      await SaveProfile({
+        ...p,
+        callsign,
+        my_grid: grid,
+        operator: operator || callsign,
+        owner_callsign: (p.owner_callsign ?? '').trim().toUpperCase() || callsign,
+        op_name: (p.op_name ?? '').trim(),
+      } as any);
+      onDone();
+    } catch (e: any) {
+      setErr(String(e?.message ?? e));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/40 backdrop-blur-sm">
+      <div className="w-full max-w-md rounded-xl border border-border bg-card shadow-2xl p-6 animate-in fade-in zoom-in-95">
+        {/* Language chooser — lives here (and not only in the localStorage-backed
+            first-launch flag gate) so a fresh setup always offers EN/FR, like the
+            station identity below. */}
+        <div className="flex justify-center mb-4">
+          <div className="inline-flex rounded-md border border-border overflow-hidden">
+            {([['en', FlagGB, 'English'], ['fr', FlagFR, 'Français']] as [Lang, typeof FlagGB, string][]).map(([code, Flag, label]) => (
+              <button key={code} type="button" onClick={() => setLang(code)}
+                className={cn('flex items-center gap-2 px-3 py-1.5 text-sm font-medium border-l border-border first:border-l-0 transition-colors',
+                  lang === code ? 'bg-primary text-primary-foreground' : 'bg-card text-muted-foreground hover:bg-muted')}>
+                <Flag className="w-5 rounded-[2px] border border-border/30" />
+                {label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 mb-1">
+          <Radio className="size-5 text-primary" />
+          <h2 className="text-lg font-semibold">{t('frm.welcome')}</h2>
+        </div>
+        <p className="text-sm text-muted-foreground mb-4">
+          {t('frm.intro')}
+        </p>
+
+        <div className="grid grid-cols-[120px_1fr] gap-x-3 gap-y-2.5 items-center">
+          <Label className="text-sm">{t('frm.callsign')} <span className="text-destructive">*</span></Label>
+          <Input autoFocus className="h-9 font-mono uppercase" placeholder="F4BPO" value={p?.callsign ?? ''} onChange={(e) => set({ callsign: e.target.value })} />
+
+          <Label className="text-sm">{t('frm.locator')} <span className="text-destructive">*</span></Label>
+          <Input className="h-9 font-mono uppercase" placeholder="JN03" value={p?.my_grid ?? ''} onChange={(e) => set({ my_grid: e.target.value })} />
+
+          <Label className="text-sm">{t('frm.operator')}</Label>
+          <Input className="h-9 font-mono uppercase" placeholder={t('frm.operatorPh')} value={p?.operator ?? ''} onChange={(e) => set({ operator: e.target.value })} />
+
+          <Label className="text-sm">{t('frm.owner')}</Label>
+          <Input className="h-9 font-mono uppercase" placeholder={t('frm.ownerPh')} value={p?.owner_callsign ?? ''} onChange={(e) => set({ owner_callsign: e.target.value })} />
+
+          <Label className="text-sm">{t('frm.name')}</Label>
+          <Input className="h-9" placeholder={t('frm.namePh')} value={p?.op_name ?? ''} onChange={(e) => set({ op_name: e.target.value })} />
+        </div>
+
+        {/* Optional: grab the award reference lists now (also in Tools later). */}
+        <div className="mt-4 rounded-lg border border-border bg-muted/30 p-3">
+          <div className="flex items-center justify-between gap-3">
+            <div className="text-xs">
+              <div className="font-medium">{t('frm.awardRefs')}</div>
+              <div className="text-muted-foreground">{t('frm.awardRefsHint')}</div>
+            </div>
+            <Button size="sm" variant="outline" disabled={refsState === 'loading'} onClick={downloadRefs}>
+              {refsState === 'loading' ? t('frm.downloading') : refsState === 'done' ? t('frm.reDownload') : t('frm.download')}
+            </Button>
+          </div>
+          {refsMsg && <div className={cn('text-[11px] mt-2', refsState === 'done' ? 'text-success' : 'text-destructive')}>{refsMsg}</div>}
+        </div>
+
+        {err && <div className="mt-3 text-xs text-destructive">{err}</div>}
+
+        <div className="mt-5 flex items-center justify-end gap-2">
+          {!canSave && <span className="text-[11px] text-muted-foreground mr-auto">{t('frm.required')}</span>}
+          <Button disabled={!canSave || saving} onClick={save}>{saving ? t('frm.saving') : t('frm.startLogging')}</Button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/IcomPanel.tsx

@@ -0,0 +1,934 @@
+import { useEffect, useRef, useState } from 'react';
+import { Radio, AudioLines, Mic, Activity, SlidersHorizontal, Antenna, Filter, Power } from 'lucide-react';
+import {
+  GetIcomState, IcomRefresh,
+  IcomSetAFGain, IcomSetRFGain, IcomSetNB, IcomSetNBLevel, IcomSetNR, IcomSetNRLevel,
+  IcomSetANF, IcomSetAPF, IcomSetAGC, IcomSetPreamp, IcomSetAtt, IcomSetFilter,
+  IcomSetRFPower, IcomSetMicGain, IcomSetSplit, IcomTune, IcomSetPTT,
+  IcomSetScope, IcomScopeData, IcomSetScopeMode, IcomSetScopeEdges, GetCATState, SetCATFrequency, SetCATMode,
+  IcomSetRIT, IcomSetRITOn, IcomSetXITOn,
+  IcomSetAntenna, IcomSetPBTInner, IcomSetPBTOuter, IcomSetManualNotch, IcomSetNotchPos,
+  IcomSetSquelch, IcomSetComp, IcomSetCompLevel, IcomSetMonitor, IcomSetMonLevel,
+  IcomSetVOX, IcomSetVOXGain, IcomSetAntiVOX, IcomSetPower,
+} from '../../wailsjs/go/main/App';
+import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
+import { sMeterRST } from '@/lib/rst';
+
+type IcomState = {
+  available: boolean; model?: string; mode?: string;
+  transmitting: boolean; split: boolean;
+  s_meter: number; power_meter: number; swr_meter: number;
+  rf_power: number; mic_gain: number;
+  af_gain: number; rf_gain: number;
+  nb: boolean; nb_level: number; nr: boolean; nr_level: number; anf: boolean; apf: boolean;
+  agc?: string; preamp: number; att: number; filter: number;
+  rit_hz: number; rit_on: boolean; xit_on: boolean;
+  antenna: number;
+  pbt_inner: number; pbt_outer: number; manual_notch: boolean; notch_pos: number;
+  squelch: number; comp: boolean; comp_level: number;
+  monitor: boolean; mon_level: number;
+  vox: boolean; vox_gain: number; anti_vox: number;
+};
+
+const ZERO: IcomState = {
+  available: false, transmitting: false, split: false,
+  s_meter: 0, power_meter: 0, swr_meter: 0, rf_power: 0, mic_gain: 0,
+  af_gain: 0, rf_gain: 0,
+  nb: false, nb_level: 0, nr: false, nr_level: 0, anf: false, apf: false,
+  preamp: 0, att: 0, filter: 1,
+  rit_hz: 0, rit_on: false, xit_on: false,
+  antenna: 1,
+  pbt_inner: 50, pbt_outer: 50, manual_notch: false, notch_pos: 50,
+  squelch: 0, comp: false, comp_level: 0,
+  monitor: false, mon_level: 0,
+  vox: false, vox_gain: 0, anti_vox: 0,
+};
+
+// Band buttons jump the VFO to a sensible default frequency (SSB/CW mix) using
+// the plain SetFrequency command — no band-stacking codes needed. Hz values.
+type Band = { l: string; hz: number };
+
+const HF_BANDS: Band[] = [
+  { l: '160', hz: 1_840_000 }, { l: '80', hz: 3_750_000 }, { l: '40', hz: 7_100_000 },
+  { l: '30', hz: 10_130_000 }, { l: '20', hz: 14_150_000 }, { l: '17', hz: 18_130_000 },
+  { l: '15', hz: 21_250_000 }, { l: '12', hz: 24_950_000 }, { l: '10', hz: 28_400_000 },
+];
+const B6 = { l: '6', hz: 50_150_000 };
+const B2 = { l: '2', hz: 144_300_000 };       // SSB calling
+const B70 = { l: '70cm', hz: 432_200_000 };   // SSB calling
+const B23 = { l: '23cm', hz: 1_296_200_000 }; // SSB calling
+
+// Band buttons jump the VFO to a sensible default frequency (SSB/CW mix) using
+// the plain SetFrequency command — no band-stacking codes needed.
+//
+// Which buttons to OFFER depends on the radio, exactly as the attenuator steps
+// do below. An IC-9700 has no HF at all, yet the console was showing it 160
+// through 6 and none of the bands it actually covers: ten dead buttons, and no
+// way to change band from here on the only rig where you would want to.
+function bandsFor(model?: string): Band[] {
+  const m = (model ?? '').toUpperCase();
+  if (m.includes('9700')) return [B2, B70, B23];          // VHF/UHF/SHF only
+  if (m.includes('705')) return [...HF_BANDS, B6, B2, B70];
+  if (m.includes('9100')) return [...HF_BANDS, B6, B2, B70, B23];
+  // 7300 / 7610 / 7100 / unknown: HF + 6 m, the historical list.
+  return [...HF_BANDS, B6];
+}
+
+// Mode buttons for the console (like RS-BA1's row). SetCATMode picks USB/LSB for
+// SSB by frequency and the rig's data variant for digital modes.
+const MODES = ['SSB', 'CW', 'RTTY', 'PSK', 'AM', 'FM'];
+
+// Attenuator steps are MODEL-dependent even though the CI-V command (0x11) is the
+// same: the value byte is the dB. The IC-7610 (and 7700/7800/7851) have a 6/12/18
+// dB stepped attenuator; the IC-7300/705/7100 have a single 20 dB attenuator; the
+// IC-9700 a single 10 dB. Offering the wrong steps = a dead button (the rig NAKs
+// e.g. 6 dB on a 7300). Default to the common single 20 dB for unknown models.
+function attOptions(model?: string): { v: string; l: string }[] {
+  const m = (model ?? '').toUpperCase();
+  const OFF = { v: '0', l: 'OFF' };
+  if (/(7610|7700|7800|7850|7851)/.test(m)) {
+    return [OFF, { v: '6', l: '6dB' }, { v: '12', l: '12dB' }, { v: '18', l: '18dB' }];
+  }
+  if (m.includes('9700')) return [OFF, { v: '10', l: '10dB' }];
+  return [OFF, { v: '20', l: '20dB' }]; // IC-7300 / IC-705 / IC-7100 / default
+}
+
+// bandOfHz names the amateur band a frequency falls in, so the band row can show
+// where the rig actually is. The buttons only ever SENT a frequency and carried
+// no active state at all, so nothing was highlighted whatever the rig reported.
+// Edges are the ITU/IARU band limits, wide enough to cover regional differences —
+// out-of-band (transverter IF, general coverage RX) matches nothing, as it should.
+function bandOfHz(hz?: number): string {
+  if (!hz || hz <= 0) return '';
+  const mhz = hz / 1_000_000;
+  const bands: [string, number, number][] = [
+    ['160', 1.8, 2.0], ['80', 3.5, 4.0], ['60', 5.25, 5.45], ['40', 7.0, 7.3],
+    ['30', 10.1, 10.15], ['20', 14.0, 14.35], ['17', 18.068, 18.168],
+    ['15', 21.0, 21.45], ['12', 24.89, 24.99], ['10', 28.0, 29.7],
+    // Labels must match the band buttons' exactly — this is only used to light
+    // the button for the band the rig is on, and '70' never matched '70cm'.
+    ['6', 50.0, 54.0], ['4', 70.0, 70.5], ['2', 144.0, 148.0],
+    ['70cm', 430.0, 450.0], ['23cm', 1240.0, 1300.0],
+  ];
+  for (const [name, lo, hi] of bands) if (mhz >= lo && mhz <= hi) return name;
+  return '';
+}
+
+// fmtVFO renders a Hz frequency the way an Icom front panel does:
+// MHz "." 3-digit-kHz "." 2-digit-(10 Hz). 21032000 → "21.032.00".
+function fmtVFO(hz?: number): string {
+  if (!hz || hz <= 0) return '––.–––.––';
+  const mhz = Math.floor(hz / 1_000_000);
+  const khz = Math.floor((hz % 1_000_000) / 1000);
+  const h2 = Math.floor((hz % 1000) / 10);
+  return `${mhz}.${String(khz).padStart(3, '0')}.${String(h2).padStart(2, '0')}`;
+}
+
+// modeMatches marks a mode button active, folding the rig's USB/LSB into SSB.
+function modeMatches(btn: string, cur?: string): boolean {
+  if (!cur) return false;
+  if (btn === 'SSB') return cur === 'SSB' || cur === 'USB' || cur === 'LSB';
+  return btn === cur;
+}
+
+function Slider({ value, onChange, disabled, accent = '#2563eb', step = 1 }: {
+  value: number; onChange: (v: number) => void; disabled?: boolean; accent?: string; step?: number;
+}) {
+  const v = Math.max(0, Math.min(100, value));
+  const ref = useRef<HTMLInputElement>(null);
+  // Mouse-wheel adjusts the slider. React's onWheel is passive (preventDefault
+  // is ignored), so attach a non-passive native listener; read live values via
+  // refs to avoid stale closures.
+  const valRef = useRef(value); valRef.current = value;
+  const cbRef = useRef(onChange); cbRef.current = onChange;
+  const disRef = useRef(disabled); disRef.current = disabled;
+  const stepRef = useRef(step); stepRef.current = step;
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onWheel = (e: WheelEvent) => {
+      if (disRef.current) return;
+      e.preventDefault();
+      const d = e.deltaY < 0 ? stepRef.current : -stepRef.current;
+      const nv = Math.max(0, Math.min(100, valRef.current + d));
+      if (nv !== valRef.current) cbRef.current(nv);
+    };
+    el.addEventListener('wheel', onWheel, { passive: false });
+    return () => el.removeEventListener('wheel', onWheel);
+  }, []);
+  return (
+    <input
+      ref={ref}
+      type="range" min={0} max={100} value={v} disabled={disabled}
+      onChange={(e) => onChange(parseInt(e.target.value, 10))}
+      className={cn('flex-1 h-1.5 rounded-full appearance-none cursor-pointer disabled:opacity-30 disabled:cursor-default',
+        '[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:rounded-full',
+        '[&::-webkit-slider-thumb]:bg-card [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:shadow-sm')}
+      style={{ background: `linear-gradient(to right, ${accent} ${v}%, #d8cfb8 ${v}%)`, borderColor: accent }}
+    />
+  );
+}
+
+function Segmented({ value, options, onChange }: {
+  value: string; options: { v: string; l: string }[]; onChange: (v: string) => void;
+}) {
+  return (
+    <div className="inline-flex rounded-md border border-border overflow-hidden shrink-0">
+      {options.map((o) => (
+        <button key={o.v} type="button" onClick={() => onChange(o.v)}
+          className={cn('px-2 py-1 text-[11px] font-bold tracking-wide transition-colors border-l border-border first:border-l-0',
+            value === o.v ? 'bg-primary text-primary-foreground' : 'bg-card text-muted-foreground hover:bg-muted')}>
+          {o.l}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function Chip({ on, onClick, label }: { on: boolean; onClick: () => void; label: string }) {
+  return (
+    <button type="button" onClick={onClick}
+      className={cn('w-14 shrink-0 px-2 py-1 rounded-md text-[11px] font-bold border transition-colors',
+        on ? 'bg-success border-success text-success-foreground' : 'bg-card text-muted-foreground border-border hover:bg-muted')}>
+      {label}
+    </button>
+  );
+}
+
+function LevelRow({ label, on, onToggle, value, onLevel }: {
+  label: string; on: boolean; onToggle: () => void; value: number; onLevel: (v: number) => void;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      <Chip on={on} onClick={onToggle} label={label} />
+      <Slider value={value} disabled={!on} onChange={onLevel} />
+      <span className="w-8 text-right text-xs font-mono tabular-nums text-muted-foreground">{value}</span>
+    </div>
+  );
+}
+
+function Card({ icon: Icon, title, accent, children }: { icon: any; title: string; accent?: string; children: React.ReactNode }) {
+  return (
+    <div className="rounded-xl border border-border bg-card shadow-sm overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border/60 bg-muted/30">
+        <Icon className="size-4" style={{ color: accent ?? 'var(--primary)' }} />
+        <span className="text-xs font-bold uppercase tracking-wider text-foreground/80">{title}</span>
+      </div>
+      <div className="p-3 space-y-3">{children}</div>
+    </div>
+  );
+}
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="w-16 shrink-0 text-[11px] font-bold uppercase tracking-wider text-muted-foreground">{label}</span>
+      {children}
+    </div>
+  );
+}
+
+// Meter — a thin horizontal bar for a live 0-100 reading (S / Po / SWR).
+// Optional onClick makes the row a button (used to send the S reading to RST tx).
+function Meter({ label, value, accent, scale, onClick, title }: { label: string; value: number; accent: string; scale?: string; onClick?: () => void; title?: string }) {
+  const v = Math.max(0, Math.min(100, value));
+  const body = (
+    <>
+      <span className="w-9 shrink-0 text-[11px] font-bold uppercase tracking-wider text-muted-foreground">{label}</span>
+      <div className="flex-1 h-2.5 rounded-full bg-muted/60 overflow-hidden">
+        <div className="h-full rounded-full transition-[width] duration-150" style={{ width: `${v}%`, background: accent }} />
+      </div>
+      <span className="w-10 text-right text-[11px] font-mono tabular-nums text-muted-foreground">{scale ?? v}</span>
+    </>
+  );
+  if (onClick) {
+    return <button type="button" onClick={onClick} title={title} className="flex items-center gap-2 w-full rounded hover:bg-muted/50 -mx-1 px-1 py-0.5">{body}</button>;
+  }
+  return <div className="flex items-center gap-2">{body}</div>;
+}
+
+// ShiftRow — a RIT / ΔTX offset control: on/off chip + a wheel-adjustable signed
+// offset (±10 Hz per notch or per ± button) + a clear (0) button.
+function ShiftRow({ label, on, hz, accent, onToggle, onDelta, onClear }: {
+  label: string; on: boolean; hz: number; accent: string;
+  onToggle: () => void; onDelta: (d: number) => void; onClear: () => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const cb = useRef(onDelta); cb.current = onDelta;
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onWheel = (e: WheelEvent) => { e.preventDefault(); cb.current(e.deltaY < 0 ? 10 : -10); };
+    el.addEventListener('wheel', onWheel, { passive: false });
+    return () => el.removeEventListener('wheel', onWheel);
+  }, []);
+  return (
+    <div className="flex items-center gap-2">
+      <Chip on={on} onClick={onToggle} label={label} />
+      <div ref={ref} title="Wheel / ± to shift"
+        className={cn('flex-1 flex items-center justify-between rounded-md border px-1 py-0.5 select-none cursor-ns-resize',
+          on ? 'border-border bg-muted/40' : 'border-border/60 bg-muted/20 opacity-60')}>
+        <button type="button" onClick={() => onDelta(-10)} className="px-2 text-sm font-bold text-muted-foreground hover:text-foreground">−</button>
+        <span className="text-sm font-mono font-bold tabular-nums" style={{ color: on ? accent : undefined }}>
+          {hz > 0 ? '+' : hz < 0 ? '−' : ''}{Math.abs(hz)} Hz
+        </span>
+        <button type="button" onClick={() => onDelta(10)} className="px-2 text-sm font-bold text-muted-foreground hover:text-foreground">+</button>
+      </div>
+      <button type="button" onClick={onClear}
+        className="w-8 shrink-0 py-1 rounded-md text-[11px] font-bold border border-border bg-card text-muted-foreground hover:bg-muted">0</button>
+    </div>
+  );
+}
+
+// sParts turns the raw 0-100 S-meter into S-unit + dB-over-S9 (S9 ≈ 47% on the
+// CI-V 0-255 scale, +60 dB near full scale). Used for both the display label and
+// the RST-tx value on click.
+function sParts(v: number): { s: number; over: number; label: string } {
+  if (v >= 47) {
+    const over = Math.max(0, Math.round((v - 47) * 60 / 47));
+    return { s: 9, over, label: over > 0 ? `S9+${over}` : 'S9' };
+  }
+  const s = Math.max(0, Math.min(9, Math.round(v / 5.2)));
+  return { s, over: 0, label: `S${s}` };
+}
+
+// wfColor maps a 0-1 amplitude to a classic waterfall colour ramp
+// (near-black → blue → cyan → green → amber → red).
+const WF_STOPS: [number, [number, number, number]][] = [
+  [0.0, [8, 12, 28]], [0.22, [26, 58, 138]], [0.42, [0, 150, 190]],
+  [0.62, [46, 200, 120]], [0.80, [240, 210, 70]], [1.0, [244, 63, 60]],
+];
+function wfColor(v: number): [number, number, number] {
+  v = Math.max(0, Math.min(1, Math.pow(v, 0.7))); // gamma-lift so the noise floor still has hue
+  for (let i = 1; i < WF_STOPS.length; i++) {
+    if (v <= WF_STOPS[i][0]) {
+      const [a, ca] = WF_STOPS[i - 1], [b, cb] = WF_STOPS[i];
+      const f = (v - a) / (b - a || 1);
+      return [Math.round(ca[0] + (cb[0] - ca[0]) * f), Math.round(ca[1] + (cb[1] - ca[1]) * f), Math.round(ca[2] + (cb[2] - ca[2]) * f)];
+    }
+  }
+  return WF_STOPS[WF_STOPS.length - 1][1];
+}
+
+// ScopePanadapter — enables the rig's spectrum-scope stream and draws the
+// reassembled sweep as a modern SDR panadapter: a glowing filled spectrum trace
+// on top and a scrolling colour waterfall below. Amplitudes are raw rig scale
+// (~0-160), normalised to the tallest recent peak so the trace fills the height.
+function ScopePanadapter() {
+  const { t } = useI18n();
+  const [on, setOn] = useState(false);
+  const [fixed, setFixed] = useState(true);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const wfRef = useRef<HTMLCanvasElement>(null); // waterfall
+  const peakRef = useRef(160); // running amplitude ceiling for auto-scale
+  const holdRef = useRef<number[]>([]); // per-bin peak-hold line
+  const spanRef = useRef({ low: 0, high: 0 }); // latest sweep edges, for click-to-tune
+  const vfoRef = useRef(0);    // latest VFO frequency, for wheel-tune
+  const centerRef = useRef(0); // scope centre we last set (for pan ◀/▶)
+
+  const toggle = () => {
+    const next = !on;
+    setOn(next);
+    IcomSetScope(next).catch(() => {});
+  };
+
+  // Centre/pan the FIXED scope: set the edges to centre ±50 kHz (a 100 kHz
+  // window). "Centre" uses the live VFO; ◀/▶ shift the window by 50 kHz. This
+  // just writes the rig's fixed edges — simple and independent of the waveform
+  // decode.
+  const SCOPE_HALF = 50_000;
+  const applyEdges = (center: number) => {
+    if (center <= 0) return;
+    centerRef.current = center;
+    setFixed(true);
+    IcomSetScopeEdges(center - SCOPE_HALF, center + SCOPE_HALF).catch(() => {});
+  };
+  const centerOnVfo = async () => {
+    let c = vfoRef.current;
+    if (c <= 0) { try { const cs = await GetCATState(); c = cs?.freq_hz || 0; } catch {} }
+    applyEdges(c);
+  };
+  const pan = (dir: number) => applyEdges((centerRef.current || vfoRef.current) + dir * SCOPE_HALF);
+  const setMode = (nextFixed: boolean) => {
+    setFixed(nextFixed);
+    IcomSetScopeMode(nextFixed).catch(() => {});
+  };
+  // Stop the stream when the panel unmounts.
+  useEffect(() => () => { IcomSetScope(false).catch(() => {}); }, []);
+
+  useEffect(() => {
+    if (!on) return;
+    let raf = 0, lastSeq = -1, alive = true;
+    const tick = async () => {
+      if (!alive) return;
+      try {
+        const sw = await IcomScopeData();
+        if (sw && sw.seq !== lastSeq && sw.amp && sw.amp.length) {
+          lastSeq = sw.seq;
+          setFixed(sw.fixed);
+          spanRef.current = { low: sw.low_hz, high: sw.high_hz };
+          let vfo = 0;
+          try {
+            const cs = await GetCATState();
+            vfo = cs?.split && cs.freq_rx_hz ? cs.freq_rx_hz : (cs?.freq_hz || 0);
+          } catch {}
+          if (vfo > 0) vfoRef.current = vfo;
+          draw(sw.amp, sw.low_hz, sw.high_hz, vfoRef.current, sw.fixed);
+        }
+      } catch {}
+      if (alive) raf = window.setTimeout(() => { raf = requestAnimationFrame(tick); }, 40) as unknown as number;
+    };
+    raf = requestAnimationFrame(tick);
+    return () => { alive = false; cancelAnimationFrame(raf); window.clearTimeout(raf); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [on]);
+
+  // Double-click tunes the rig to the clicked frequency.
+  const onDblClick = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    const cv = canvasRef.current;
+    const { low, high } = spanRef.current;
+    if (!cv || !(low > 0 && high > low)) return;
+    const rect = cv.getBoundingClientRect();
+    const frac = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    const hz = Math.round((low + frac * (high - low)) / 100) * 100; // nearest 100 Hz
+    SetCATFrequency(hz).catch(() => {});
+  };
+
+  // Mouse-wheel over the scope QSYs ±100 Hz. Non-passive listener so we can
+  // preventDefault (else the page scrolls); optimistic vfoRef so quick spins
+  // accumulate before the poll reconciles.
+  useEffect(() => {
+    const el = canvasRef.current;
+    if (!el || !on) return;
+    const onWheel = (e: WheelEvent) => {
+      if (!vfoRef.current) return;
+      e.preventDefault();
+      const next = vfoRef.current + (e.deltaY < 0 ? 100 : -100);
+      vfoRef.current = next;
+      SetCATFrequency(next).catch(() => {});
+    };
+    el.addEventListener('wheel', onWheel, { passive: false });
+    return () => el.removeEventListener('wheel', onWheel);
+  }, [on]);
+
+  const draw = (amp: number[], lowHz: number, highHz: number, vfoHz: number, fixedMode: boolean) => {
+    const cv = canvasRef.current;
+    if (!cv) return;
+    const dpr = window.devicePixelRatio || 1;
+    const w = cv.clientWidth, h = cv.clientHeight;
+    if (cv.width !== w * dpr || cv.height !== h * dpr) { cv.width = w * dpr; cv.height = h * dpr; }
+    const ctx = cv.getContext('2d');
+    if (!ctx) return;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+    // Auto-scale: track the peak, decaying slowly so the floor doesn't jump.
+    const peak = Math.max(...amp);
+    peakRef.current = Math.max(peak, peakRef.current * 0.95, 40);
+    const scale = peakRef.current;
+    const n = amp.length;
+
+    // Background — deep navy vertical gradient.
+    const bg = ctx.createLinearGradient(0, 0, 0, h);
+    bg.addColorStop(0, '#0b1220'); bg.addColorStop(1, '#05070e');
+    ctx.fillStyle = bg; ctx.fillRect(0, 0, w, h);
+
+    // Grid.
+    ctx.strokeStyle = 'rgba(120,150,200,0.08)';
+    ctx.lineWidth = 1;
+    for (let i = 1; i < 4; i++) { const y = (h * i) / 4; ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke(); }
+    for (let i = 1; i < 8; i++) { const x = (w * i) / 8; ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke(); }
+
+    const xOf = (i: number) => (i / (n - 1)) * w;
+    const yOf = (v: number) => h - Math.min(1, v / scale) * h;
+
+    // Peak-hold line (slow decay) — a faint ghost of recent maxima.
+    const hold = holdRef.current;
+    if (hold.length !== n) hold.length = n, hold.fill(0);
+    for (let i = 0; i < n; i++) hold[i] = Math.max(amp[i], hold[i] * 0.92);
+
+    // Filled spectrum area.
+    ctx.beginPath();
+    ctx.moveTo(0, h);
+    for (let i = 0; i < n; i++) ctx.lineTo(xOf(i), yOf(amp[i]));
+    ctx.lineTo(w, h); ctx.closePath();
+    const grad = ctx.createLinearGradient(0, 0, 0, h);
+    grad.addColorStop(0, 'rgba(56,189,248,0.40)');
+    grad.addColorStop(1, 'rgba(56,189,248,0.02)');
+    ctx.fillStyle = grad; ctx.fill();
+
+    // Peak-hold trace (thin, faint).
+    ctx.beginPath();
+    for (let i = 0; i < n; i++) { const x = xOf(i), y = yOf(hold[i]); i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); }
+    ctx.strokeStyle = 'rgba(148,197,255,0.35)'; ctx.lineWidth = 1; ctx.stroke();
+
+    // Live spectrum trace with a soft glow.
+    ctx.save();
+    ctx.shadowColor = 'rgba(56,189,248,0.7)'; ctx.shadowBlur = 6;
+    ctx.beginPath();
+    for (let i = 0; i < n; i++) { const x = xOf(i), y = yOf(amp[i]); i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); }
+    ctx.strokeStyle = '#7dd3fc'; ctx.lineWidth = 1.5; ctx.lineJoin = 'round'; ctx.stroke();
+    ctx.restore();
+
+    // VFO marker: you should ALWAYS see where you are. Exact position when the VFO
+    // is inside the span; the centre in CTR mode; clamped to the nearest edge with
+    // a sideways arrow in FIX mode when the fixed scope doesn't cover the VFO (so
+    // you can tell which way to tune to get it back on-screen).
+    const haveVfo = vfoHz > 0 && lowHz > 0 && highHz > lowHz;
+    const inSpan = haveVfo && vfoHz >= lowHz && vfoHz <= highHz;
+    let markerX = -1;
+    let offEdge = 0; // -1 = VFO off the left edge, +1 = off the right
+    if (inSpan) markerX = ((vfoHz - lowHz) / (highHz - lowHz)) * w;
+    else if (!fixedMode) markerX = w / 2;
+    else if (haveVfo) { offEdge = vfoHz < lowHz ? -1 : 1; markerX = offEdge < 0 ? 1 : w - 1; }
+    if (markerX >= 0) {
+      const x = markerX;
+      ctx.fillStyle = 'rgba(244,63,94,0.10)'; ctx.fillRect(x - 5, 0, 10, h);
+      ctx.strokeStyle = 'rgba(244,63,94,0.9)'; ctx.lineWidth = 1.25;
+      ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke();
+      ctx.fillStyle = 'rgba(244,63,94,0.95)';
+      if (offEdge === 0) {
+        ctx.beginPath(); ctx.moveTo(x - 4, 0); ctx.lineTo(x + 4, 0); ctx.lineTo(x, 6); ctx.closePath(); ctx.fill();
+      } else {
+        const yh = 8; ctx.beginPath(); ctx.moveTo(x, yh - 5); ctx.lineTo(x + offEdge * 7, yh); ctx.lineTo(x, yh + 5); ctx.closePath(); ctx.fill();
+      }
+    }
+
+    // Frequency scale. In fixed mode the rig reports usable edge frequencies, so
+    // we label low/centre/high from them. In centre mode the header frame's edge
+    // pair isn't a usable low..high range, but the scope is centred on the VFO —
+    // so we always label the centre with the live VFO frequency (which we fetch
+    // each sweep), and only add edge labels when the reported edges genuinely
+    // bracket the VFO. That guarantees you always see your frequency in CTR.
+    const mhz = (hz: number) => (hz / 1e6).toFixed(3);
+    ctx.font = '10px ui-monospace, monospace';
+    ctx.textBaseline = 'bottom';
+    ctx.shadowColor = 'rgba(0,0,0,0.8)'; ctx.shadowBlur = 3;
+    ctx.fillStyle = 'rgba(226,232,240,0.85)';
+    const label = (txt: string, x: number, align: CanvasTextAlign) => { ctx.textAlign = align; ctx.fillText(txt, x, h - 3); };
+    const validEdges = lowHz > 0 && highHz > lowHz;
+    if (fixedMode) {
+      if (validEdges) {
+        label(mhz(lowHz), 4, 'left');
+        label(mhz((lowHz + highHz) / 2), w / 2, 'center');
+        label(mhz(highHz), w - 4, 'right');
+      }
+    } else {
+      if (validEdges && vfoHz >= lowHz && vfoHz <= highHz) {
+        label(mhz(lowHz), 4, 'left');
+        label(mhz(highHz), w - 4, 'right');
+      }
+      if (vfoHz > 0) label(mhz(vfoHz), w / 2, 'center');
+    }
+    ctx.shadowBlur = 0;
+
+    drawWaterfall(amp, scale);
+  };
+
+  // drawWaterfall scrolls the history down one row and paints the newest sweep
+  // as a colour-mapped line at the top.
+  const drawWaterfall = (amp: number[], scale: number) => {
+    const cv = wfRef.current;
+    if (!cv) return;
+    const w = Math.max(1, cv.clientWidth), h = Math.max(1, cv.clientHeight);
+    if (cv.width !== w || cv.height !== h) { cv.width = w; cv.height = h; }
+    const ctx = cv.getContext('2d');
+    if (!ctx) return;
+    // Scroll everything down by one pixel row.
+    ctx.drawImage(cv, 0, 0, w, h - 1, 0, 1, w, h - 1);
+    // Paint the new top row.
+    const row = ctx.createImageData(w, 1);
+    const n = amp.length;
+    for (let x = 0; x < w; x++) {
+      const i = Math.min(n - 1, Math.round((x / (w - 1)) * (n - 1)));
+      const [r, g, b] = wfColor(amp[i] / scale);
+      const o = x * 4;
+      row.data[o] = r; row.data[o + 1] = g; row.data[o + 2] = b; row.data[o + 3] = 255;
+    }
+    ctx.putImageData(row, 0, 0);
+  };
+
+  // Collapsible card: when the scope is off, only the header band shows (the
+  // canvas is hidden entirely) so it doesn't waste vertical space. The CTR/FIX
+  // and ON/OFF controls live in the header itself.
+  return (
+    <div className="rounded-xl border border-border bg-card shadow-sm overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border/60 bg-muted/30">
+        <Activity className="size-4" style={{ color: '#38bdf8' }} />
+        <span className="text-xs font-bold uppercase tracking-wider text-foreground/80">{t('icmp.spectrum')}</span>
+        <div className="ml-auto flex items-center gap-2 shrink-0">
+          {on && (
+            <div className="inline-flex rounded-md border border-border overflow-hidden">
+              <button type="button" onClick={() => pan(-1)} title={t('icmp.scopePanDown')}
+                className="px-2 py-1 text-xs font-bold bg-card text-muted-foreground hover:bg-muted border-r border-border">◀</button>
+              <button type="button" onClick={centerOnVfo} title={t('icmp.scopeCenterVfo')}
+                className="px-2 py-1 text-[11px] font-bold bg-card text-muted-foreground hover:bg-muted border-r border-border">⊙</button>
+              <button type="button" onClick={() => pan(1)} title={t('icmp.scopePanUp')}
+                className="px-2 py-1 text-xs font-bold bg-card text-muted-foreground hover:bg-muted">▶</button>
+            </div>
+          )}
+          {on && (
+            <Segmented value={fixed ? 'FIX' : 'CTR'} options={[{ v: 'CTR', l: 'CTR' }, { v: 'FIX', l: 'FIX' }]}
+              onChange={(v) => setMode(v === 'FIX')} />
+          )}
+          <Chip label={on ? 'ON' : 'OFF'} on={on} onClick={toggle} />
+        </div>
+      </div>
+      {on && (
+        <div className="p-3">
+          <div className="rounded-xl overflow-hidden ring-1 ring-info/20 shadow-lg shadow-sky-500/5 bg-[#05070e]">
+            <canvas ref={canvasRef} onDoubleClick={onDblClick}
+              className="w-full block cursor-crosshair" style={{ height: 140 }} />
+            <canvas ref={wfRef} className="w-full block" style={{ height: 96 }} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// IcomPanel — full control surface (RX DSP + TX) for an Icom on the CI-V backend.
+// Unlike the Flex (which pushes state), the Icom is polled: meters/TX state are
+// read every cache cycle; DSP set-controls are optimistic and reconcile on the
+// next poll. Front-panel knob changes for DSP show after ↻ Refresh.
+export function IcomPanel({ onReportRST, isNetwork = false }: { onReportRST?: (rst: string) => void; isNetwork?: boolean } = {}) {
+  const { t } = useI18n();
+  const [st, setSt] = useState<IcomState>(ZERO);
+  const [cat, setCat] = useState<any>(null); // RigState (freq/mode/split) for the VFO display
+  const [tuning, setTuning] = useState(false);
+  const txRef = useRef(false);
+  const stRef = useRef<IcomState>(ZERO); stRef.current = st;
+
+  const load = () => {
+    GetIcomState().then((s) => setSt((s ?? ZERO) as IcomState)).catch(() => {});
+    GetCATState().then((c) => setCat(c ?? null)).catch(() => {});
+  };
+  const setMode = (m: string) => { setCat((c: any) => (c ? { ...c, mode: m } : c)); SetCATMode(m).catch(() => {}); };
+  // Initial one-shot read of the rig's DSP snapshot on mount (the 500ms poll only
+  // re-reads the cache; the backend also loads DSP on the first responsive read).
+  const refresh = async () => {
+    try { await IcomRefresh(); } catch {}
+    await load();
+  };
+
+  useEffect(() => {
+    refresh();
+    const id = window.setInterval(load, 500); // fast poll so meters/TX feel live
+    return () => window.clearInterval(id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Optimistic local update + fire the command; the cache poll reconciles.
+  const set = (patch: Partial<IcomState>, fn: () => Promise<void>) => {
+    setSt((s) => ({ ...s, ...patch }));
+    fn().catch(() => {});
+  };
+
+  const toggleMox = () => {
+    const next = !txRef.current;
+    txRef.current = next;
+    set({ transmitting: next }, () => IcomSetPTT(next));
+  };
+
+  const tune = async () => {
+    setTuning(true);
+    try { await IcomTune(); } catch {}
+    window.setTimeout(() => setTuning(false), 4000);
+  };
+
+  // RIT/ΔTX offset (signed Hz, clamped ±9999). Optimistic like the DSP controls.
+  const setRit = (hz: number) => {
+    const v = Math.max(-9999, Math.min(9999, hz));
+    set({ rit_hz: v }, () => IcomSetRIT(v));
+  };
+
+  // Ctrl+Left/Right shifts the RIT by ±10 Hz while RIT is active — a keyboard
+  // clarifier for zero-beating a caller without touching the mouse.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (!e.ctrlKey || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;
+      const s = stRef.current;
+      if (!s.available || !s.rit_on) return;
+      e.preventDefault();
+      setRit(s.rit_hz + (e.key === 'ArrowRight' ? 10 : -10));
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (!st.available) {
+    return (
+      <div className="h-full flex items-center justify-center text-sm text-muted-foreground p-6 text-center">
+        {t('icmp.notConnected')}
+      </div>
+    );
+  }
+
+  const tx = st.transmitting;
+  // VFO readout. In split the active/listening VFO is RX (freq_rx_hz) and the
+  // other is TX (freq_hz); otherwise there's a single VFO (freq_hz).
+  const split = !!cat?.split;
+  const mainHz: number = split ? (cat?.freq_rx_hz || 0) : (cat?.freq_hz || 0);
+  const subHz: number = split ? (cat?.freq_hz || 0) : 0;
+  const curMode: string = cat?.mode || st.mode || '';
+  // Mode-dependent controls: VOX / speech-comp / mic are voice-only (hidden on
+  // CW and data); APF (audio peak filter) is CW-only. Fold USB/LSB into phone.
+  const um = curMode.toUpperCase();
+  const isCW = um === 'CW' || um === 'CWR';
+  const isPhone = um === 'SSB' || um === 'USB' || um === 'LSB' || um === 'AM' || um === 'FM';
+
+  return (
+    <div className="h-full min-h-0 overflow-auto bg-background">
+      <div className="max-w-5xl mx-auto p-3 space-y-3">
+      {/* Header strip: model + mode + live RX/TX indicator + split badge. */}
+      <div className="flex items-center justify-between rounded-xl border border-border bg-card px-3 py-2 shadow-sm">
+        <div className="flex items-center gap-2">
+          <span className={cn('inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-[11px] font-bold uppercase tracking-wider',
+            tx ? 'bg-destructive text-destructive-foreground' : 'bg-success text-success-foreground')}>
+            <span className={cn('size-2 rounded-full', tx ? 'bg-card animate-pulse' : 'bg-card/90')} />
+            {tx ? 'TX' : 'RX'}
+          </span>
+          <span className="text-sm font-bold">{st.model || 'Icom'}</span>
+          {st.mode ? <span className="text-xs font-mono text-muted-foreground">{st.mode}</span> : null}
+          {st.split ? <span className="rounded-md bg-warning/20 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-warning">Split</span> : null}
+        </div>
+        <div className="flex items-center gap-1.5">
+          {/* Radio power ON / OFF — NETWORK only. Over USB the CI-V interface is
+              unpowered while the rig is off, so power-ON can't reach it (OFF works
+              but ON doesn't); hiding both avoids a dead button. On the network the
+              rig's LAN server stays alive in standby, so both work. */}
+          {isNetwork && (
+            <>
+              <button type="button" onClick={() => IcomSetPower(true).catch(() => {})} title={t('icmp.powerOnHint')}
+                className="inline-flex items-center gap-1 rounded-md border border-success/60 bg-success/10 px-2 py-1 text-xs font-bold text-success hover:bg-success/20">
+                <Power className="size-3.5" /> ON
+              </button>
+              <button type="button" onClick={() => IcomSetPower(false).catch(() => {})} title={t('icmp.powerOffHint')}
+                className="inline-flex items-center gap-1 rounded-md border border-destructive/60 bg-destructive/10 px-2 py-1 text-xs font-bold text-destructive hover:bg-destructive/20">
+                <Power className="size-3.5" /> OFF
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* VFO readout — the RS-BA1-style twin display: MAIN (active) + SUB, the big
+          tabular frequency, mode badge, band, and the RIT/ΔTX offset. */}
+      <div className="rounded-xl border border-border bg-muted/25 shadow-inner overflow-hidden">
+        <div className="grid grid-cols-2 divide-x divide-border/60">
+          {/* MAIN VFO */}
+          <div className="px-4 py-3">
+            <div className="flex items-center justify-between mb-1.5">
+              <span className={cn('text-[10px] font-bold uppercase tracking-widest', tx ? 'text-destructive' : 'text-success')}>{tx ? 'Main · TX' : 'Main'}</span>
+              {curMode ? <span className="rounded px-1.5 py-0.5 text-[10px] font-bold bg-primary/15 text-primary">{curMode}</span> : null}
+            </div>
+            <div className="font-mono font-bold tabular-nums leading-none text-foreground" style={{ fontSize: 'clamp(1.5rem, 4.5vw, 2.25rem)' }}>{fmtVFO(mainHz)}</div>
+            <div className="mt-1.5 flex items-center gap-2 text-[11px] font-mono text-muted-foreground">
+              <span>{cat?.band || (mainHz ? '' : '—')}</span>
+              {st.rit_on ? <span className="text-primary">RIT {st.rit_hz > 0 ? '+' : st.rit_hz < 0 ? '−' : ''}{Math.abs(st.rit_hz)}</span> : null}
+              {st.xit_on ? <span className="text-warning">ΔTX</span> : null}
+            </div>
+          </div>
+          {/* SUB VFO (populated in split; dimmed otherwise) */}
+          <div className={cn('px-4 py-3', !split && 'opacity-40')}>
+            <div className="flex items-center justify-between mb-1.5">
+              <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">Sub</span>
+              {split ? <span className="rounded px-1.5 py-0.5 text-[10px] font-bold bg-warning/15 text-warning">SPLIT</span> : null}
+            </div>
+            <div className="font-mono font-bold tabular-nums leading-none text-muted-foreground" style={{ fontSize: 'clamp(1.5rem, 4.5vw, 2.25rem)' }}>{fmtVFO(subHz)}</div>
+            <div className="mt-1.5 text-[11px] font-mono text-muted-foreground">{split ? 'TX' : ''}</div>
+          </div>
+        </div>
+        {/* Mode selector row (RS-BA1's SSB/CW/RTTY/PSK/AM/FM). */}
+        <div className="grid grid-cols-6 border-t border-border/60 divide-x divide-border/60">
+          {MODES.map((m) => {
+            const on = modeMatches(m, curMode);
+            return (
+              <button key={m} type="button" onClick={() => setMode(m)}
+                className={cn('py-1.5 text-[11px] font-bold tracking-wide transition-colors',
+                  on ? 'bg-primary text-primary-foreground' : 'bg-card/40 text-muted-foreground hover:bg-muted')}>
+                {m}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Live meters — always visible: S (RX, click → RST), Po in watts, SWR. */}
+      <div className="rounded-xl border border-border bg-card px-3 py-2.5 shadow-sm grid grid-cols-1 sm:grid-cols-3 gap-x-5 gap-y-2">
+        {(() => { const sp = sParts(st.s_meter); return (
+          <Meter label="S" value={st.s_meter} accent="#22c55e" scale={sp.label}
+            title={onReportRST ? t('rst.clickToFill') : undefined}
+            onClick={onReportRST ? () => onReportRST(sMeterRST(sp.s, sp.over, st.mode)) : undefined} />
+        ); })()}
+        <Meter label="Po" value={st.power_meter} accent="#ef4444" scale={`${st.power_meter} W`} />
+        <Meter label="SWR" value={st.swr_meter} accent="#f59e0b" scale={st.swr_meter > 0 ? `${(1 + st.swr_meter / 33.3).toFixed(1)}` : '1.0'} />
+      </div>
+
+      {/* Spectrum panadapter (full width). */}
+      <ScopePanadapter />
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+      {/* Band buttons + antenna selection. */}
+      <Card icon={Antenna} title={t('icmp.bandsAntenna')} accent="#0891b2">
+        <div className="grid grid-cols-5 gap-1.5">
+          {bandsFor(st.model).map((b) => {
+            const here = bandOfHz(mainHz) === b.l;
+            return (
+              <button key={b.l} type="button" onClick={() => SetCATFrequency(b.hz).catch(() => {})}
+                title={here ? t('icmp.bandCurrent', { b: b.l }) : undefined}
+                className={cn('px-1 py-1.5 rounded-md text-[11px] font-bold border transition-colors',
+                  here
+                    ? 'border-primary bg-primary text-primary-foreground shadow-[0_0_8px] shadow-primary/40'
+                    : 'border-border bg-card text-foreground hover:bg-muted')}>
+                {b.l}
+              </button>
+            );
+          })}
+        </div>
+        <Row label={t('icmp.antenna')}>
+          <Segmented value={String(st.antenna)} options={[{ v: '1', l: 'ANT1' }, { v: '2', l: 'ANT2' }]}
+            onChange={(v) => set({ antenna: parseInt(v) }, () => IcomSetAntenna(parseInt(v)))} />
+        </Row>
+      </Card>
+
+      {/* Clarifiers: RIT & ΔTX (XIT) — wheel or ± to shift, Ctrl+←/→ shifts RIT. */}
+      <Card icon={SlidersHorizontal} title={t('icmp.clarifiers')} accent="#8b5cf6">
+        <ShiftRow label="RIT" accent="#8b5cf6" on={st.rit_on} hz={st.rit_hz}
+          onToggle={() => set({ rit_on: !st.rit_on }, () => IcomSetRITOn(!st.rit_on))}
+          onDelta={(d) => setRit(st.rit_hz + d)} onClear={() => setRit(0)} />
+        <ShiftRow label="ΔTX" accent="#f59e0b" on={st.xit_on} hz={st.rit_hz}
+          onToggle={() => set({ xit_on: !st.xit_on }, () => IcomSetXITOn(!st.xit_on))}
+          onDelta={(d) => setRit(st.rit_hz + d)} onClear={() => setRit(0)} />
+        <p className="text-[11px] text-muted-foreground">{t('icmp.ritHint')}</p>
+      </Card>
+
+      {/* Transmit controls. */}
+      <Card icon={Mic} title={t('icmp.transmit')} accent="#ef4444">
+        <Row label={t('icmp.power')}>
+          <Slider value={st.rf_power} accent="#ef4444" onChange={(v) => set({ rf_power: v }, () => IcomSetRFPower(v))} />
+          <span className="w-8 text-right text-xs font-mono tabular-nums text-muted-foreground">{st.rf_power}</span>
+        </Row>
+        {isPhone && (
+          <Row label={t('icmp.mic')}>
+            <Slider value={st.mic_gain} accent="#ef4444" onChange={(v) => set({ mic_gain: v }, () => IcomSetMicGain(v))} />
+            <span className="w-8 text-right text-xs font-mono tabular-nums text-muted-foreground">{st.mic_gain}</span>
+          </Row>
+        )}
+        <div className="flex items-center gap-2 pt-1">
+          <button type="button" onClick={toggleMox}
+            className={cn('flex-1 px-3 py-1.5 rounded-md text-xs font-bold border transition-colors',
+              tx ? 'bg-destructive border-destructive text-destructive-foreground' : 'bg-card text-foreground border-border hover:bg-muted')}>
+            {tx ? 'TX ON' : 'MOX'}
+          </button>
+          <Chip label="SPLIT" on={st.split} onClick={() => set({ split: !st.split }, () => IcomSetSplit(!st.split))} />
+          <button type="button" onClick={tune} disabled={tuning}
+            className={cn('w-14 shrink-0 px-2 py-1.5 rounded-md text-[11px] font-bold border transition-colors',
+              tuning ? 'bg-warning border-warning text-warning-foreground animate-pulse' : 'bg-card text-foreground border-border hover:bg-muted')}>
+            TUNE
+          </button>
+        </div>
+        {/* Monitor (all modes) + speech processor / VOX (voice modes only —
+            they don't exist on CW or data). */}
+        <div className="pt-2 mt-1 border-t border-border/60 space-y-3">
+          <LevelRow label="MON" on={st.monitor} value={st.mon_level}
+            onToggle={() => set({ monitor: !st.monitor }, () => IcomSetMonitor(!st.monitor))}
+            onLevel={(v) => set({ mon_level: v }, () => IcomSetMonLevel(v))} />
+          {isPhone && (
+            <>
+              <LevelRow label="COMP" on={st.comp} value={st.comp_level}
+                onToggle={() => set({ comp: !st.comp }, () => IcomSetComp(!st.comp))}
+                onLevel={(v) => set({ comp_level: v }, () => IcomSetCompLevel(v))} />
+              <LevelRow label="VOX" on={st.vox} value={st.vox_gain}
+                onToggle={() => set({ vox: !st.vox }, () => IcomSetVOX(!st.vox))}
+                onLevel={(v) => set({ vox_gain: v }, () => IcomSetVOXGain(v))} />
+              <Row label="Anti-VOX">
+                <Slider value={st.anti_vox} disabled={!st.vox} onChange={(v) => set({ anti_vox: v }, () => IcomSetAntiVOX(v))} />
+                <span className="w-8 text-right text-xs font-mono tabular-nums text-muted-foreground">{st.anti_vox}</span>
+              </Row>
+            </>
+          )}
+        </div>
+      </Card>
+
+      <Card icon={Radio} title={t('icmp.receive')} accent="#2563eb">
+        <Row label="AF">
+          <Slider value={st.af_gain} onChange={(v) => set({ af_gain: v }, () => IcomSetAFGain(v))} />
+          <span className="w-8 text-right text-xs font-mono tabular-nums text-muted-foreground">{st.af_gain}</span>
+        </Row>
+        <Row label="RF">
+          <Slider value={st.rf_gain} onChange={(v) => set({ rf_gain: v }, () => IcomSetRFGain(v))} />
+          <span className="w-8 text-right text-xs font-mono tabular-nums text-muted-foreground">{st.rf_gain}</span>
+        </Row>
+        <Row label={t('icmp.squelch')}>
+          <Slider value={st.squelch} onChange={(v) => set({ squelch: v }, () => IcomSetSquelch(v))} />
+          <span className="w-8 text-right text-xs font-mono tabular-nums text-muted-foreground">{st.squelch}</span>
+        </Row>
+        <Row label="AGC">
+          <Segmented value={st.agc || ''} options={[{ v: 'FAST', l: 'FAST' }, { v: 'MID', l: 'MID' }, { v: 'SLOW', l: 'SLOW' }]}
+            onChange={(v) => set({ agc: v }, () => IcomSetAGC(v))} />
+        </Row>
+        <Row label={t('icmp.preamp')}>
+          <Segmented value={String(st.preamp)} options={[{ v: '0', l: 'OFF' }, { v: '1', l: 'P1' }, { v: '2', l: 'P2' }]}
+            onChange={(v) => set({ preamp: parseInt(v) }, () => IcomSetPreamp(parseInt(v)))} />
+        </Row>
+        <Row label="Att">
+          <Segmented value={String(st.att)} options={attOptions(cat?.rig)}
+            onChange={(v) => set({ att: parseInt(v) }, () => IcomSetAtt(parseInt(v)))} />
+        </Row>
+        <Row label={t('icmp.filter')}>
+          <Segmented value={String(st.filter)} options={[{ v: '1', l: 'FIL1' }, { v: '2', l: 'FIL2' }, { v: '3', l: 'FIL3' }]}
+            onChange={(v) => set({ filter: parseInt(v) }, () => IcomSetFilter(parseInt(v)))} />
+        </Row>
+      </Card>
+
+      {/* Twin PBT + manual notch. Sliders are 0-100 with 50 = centre. */}
+      <Card icon={Filter} title={t('icmp.passband')} accent="#7c3aed">
+        <Row label="PBT-IN">
+          <Slider value={st.pbt_inner} accent="#7c3aed" onChange={(v) => set({ pbt_inner: v }, () => IcomSetPBTInner(v))} />
+          <span className="w-8 text-right text-xs font-mono tabular-nums text-muted-foreground">{st.pbt_inner - 50 > 0 ? '+' : ''}{st.pbt_inner - 50}</span>
+        </Row>
+        <Row label="PBT-OUT">
+          <Slider value={st.pbt_outer} accent="#7c3aed" onChange={(v) => set({ pbt_outer: v }, () => IcomSetPBTOuter(v))} />
+          <span className="w-8 text-right text-xs font-mono tabular-nums text-muted-foreground">{st.pbt_outer - 50 > 0 ? '+' : ''}{st.pbt_outer - 50}</span>
+        </Row>
+        <button type="button"
+          onClick={() => { set({ pbt_inner: 50 }, () => IcomSetPBTInner(50)); set({ pbt_outer: 50 }, () => IcomSetPBTOuter(50)); }}
+          className="w-full py-1 rounded-md text-[11px] font-bold border border-border bg-card text-muted-foreground hover:bg-muted">
+          {t('icmp.pbtCenter')}
+        </button>
+        <div className="pt-1 border-t border-border/60 space-y-3">
+          <div className="flex items-center gap-2">
+            <Chip label="MN" on={st.manual_notch} onClick={() => set({ manual_notch: !st.manual_notch }, () => IcomSetManualNotch(!st.manual_notch))} />
+            <Slider value={st.notch_pos} disabled={!st.manual_notch} accent="#7c3aed" onChange={(v) => set({ notch_pos: v }, () => IcomSetNotchPos(v))} />
+            <span className="w-8 text-right text-xs font-mono tabular-nums text-muted-foreground">{st.notch_pos}</span>
+          </div>
+          <p className="text-[11px] text-muted-foreground">{t('icmp.manualNotch')}</p>
+        </div>
+      </Card>
+
+      <Card icon={AudioLines} title={t('icmp.noiseNotch')} accent="#16a34a">
+        <LevelRow label="NB" on={st.nb} value={st.nb_level}
+          onToggle={() => set({ nb: !st.nb }, () => IcomSetNB(!st.nb))}
+          onLevel={(v) => set({ nb_level: v }, () => IcomSetNBLevel(v))} />
+        <LevelRow label="NR" on={st.nr} value={st.nr_level}
+          onToggle={() => set({ nr: !st.nr }, () => IcomSetNR(!st.nr))}
+          onLevel={(v) => set({ nr_level: v }, () => IcomSetNRLevel(v))} />
+        <div className="flex items-center gap-2">
+          <Chip label="ANF" on={st.anf} onClick={() => set({ anf: !st.anf }, () => IcomSetANF(!st.anf))} />
+          <span className="text-xs text-muted-foreground">{t('icmp.autoNotch')}</span>
+        </div>
+        {/* APF (audio peak filter) — CW only: peaks the CW tone. */}
+        {isCW && (
+          <div className="flex items-center gap-2">
+            <Chip label="APF" on={st.apf} onClick={() => set({ apf: !st.apf }, () => IcomSetAPF(!st.apf))} />
+            <span className="text-xs text-muted-foreground">{t('icmp.apf')}</span>
+          </div>
+        )}
+      </Card>
+      </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/LogViewer.tsx

@@ -0,0 +1,143 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { useI18n } from '@/lib/i18n';
+import { TailLogFile, GetLogFilePath } from '../../wailsjs/go/main/App';
+
+// LogViewer shows the tail of opslog.log and keeps it current while open.
+//
+// This exists because diagnosing a problem used to mean asking the operator to
+// find a file in their data directory, open it in a text editor, and re-open it
+// after every attempt. Half the round-trips in a bug report were spent on that.
+//
+// Three behaviours matter more than they look:
+//   • Auto-scroll is a checkbox the operator owns, AND it releases itself the
+//     moment they scroll up — otherwise the line they are reading is yanked away
+//     a second later, which defeats the one thing this window is for. Scrolling
+//     back to the bottom re-arms it, so following is never a dead end.
+//   • The filter keeps only matching LINES rather than highlighting inside a
+//     256 KB blob: with "cluster" or "acom" typed in, the window becomes exactly
+//     the subsystem trace you would have grepped for.
+//   • It polls only while open. A closed dialog costs nothing.
+// 512 KB ≈ 3200 lines. The window is a sliding tail: once new lines push past it
+// the oldest fall out of the fetched text entirely, so a small buffer dropped
+// lines the operator was still reading during a busy trace (CAT/cluster/antenna
+// polling). This is double the old 256 KB — 1 MB was tried but the per-second
+// fetch + split + re-render of ~6500 lines made the window lag. 512 KB keeps a
+// useful backlog while staying smooth. The backend caps this at 4 MB.
+const TAIL_BYTES = 512 * 1024;
+const POLL_MS = 1000;
+
+export function LogViewer({ open, onOpenChange }: { open: boolean; onOpenChange: (v: boolean) => void }) {
+  const { t } = useI18n();
+  const [text, setText] = useState('');
+  const [path, setPath] = useState('');
+  const [query, setQuery] = useState('');
+  const [autoScroll, setAutoScroll] = useState(true);
+  // Shown next to the checkbox so a QUIET log still proves it is being polled —
+  // without it there is no way to tell 'nothing new' from 'window is dead'.
+  const [lastPull, setLastPull] = useState('');
+  const boxRef = useRef<HTMLPreElement>(null);
+  const autoRef = useRef(true);
+  useEffect(() => { autoRef.current = autoScroll; }, [autoScroll]);
+
+  // stick pins the view to the bottom on the NEXT frame. Setting scrollTop
+  // straight away is not enough while the dialog is still animating in: the box
+  // has no height yet, scrollHeight is wrong, and the scroll silently does
+  // nothing — leaving the operator staring at the top of a 256 KB buffer, i.e.
+  // at lines from hours ago, which looks exactly like a frozen window.
+  const stick = useCallback(() => {
+    if (!autoRef.current) return;
+    requestAnimationFrame(() => {
+      const el = boxRef.current;
+      if (el) el.scrollTop = el.scrollHeight;
+    });
+  }, []);
+
+  const pull = useCallback(() => {
+    TailLogFile(TAIL_BYTES).then((s: any) => {
+      setText(String(s ?? ''));
+      setLastPull(new Date().toLocaleTimeString());
+    }).catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    setAutoScroll(true);
+    autoRef.current = true;
+    GetLogFilePath().then((p: any) => setPath(String(p ?? ''))).catch(() => {});
+    pull();
+    // Re-assert the bottom after the open animation has settled. A quiet log
+    // never changes, so the content-driven scroll below would never fire again
+    // and the first attempt would be the only one.
+    const t1 = window.setTimeout(stick, 120);
+    const t2 = window.setTimeout(stick, 450);
+    const id = window.setInterval(pull, POLL_MS);
+    return () => { window.clearInterval(id); window.clearTimeout(t1); window.clearTimeout(t2); };
+  }, [open, pull, stick]);
+
+  const all = useMemo(() => text.split('\n'), [text]);
+  const shown = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return all;
+    return all.filter((l) => l.toLowerCase().includes(q));
+  }, [all, query]);
+
+  // Stick to the bottom after each refresh, but only while auto-scroll is on.
+  useEffect(() => { if (open) stick(); }, [shown, open, stick]);
+
+  // Scrolling away from the bottom releases auto-scroll; coming back re-arms it.
+  function onScroll() {
+    const el = boxRef.current;
+    if (!el) return;
+    setAutoScroll(el.scrollHeight - el.scrollTop - el.clientHeight < 24);
+  }
+
+  const body = shown.join('\n');
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-5xl">
+        <DialogHeader>
+          <DialogTitle>{t('logview.title')}</DialogTitle>
+          <DialogDescription className="font-mono text-[11px] break-all">{path}</DialogDescription>
+        </DialogHeader>
+
+        <div className="flex items-center gap-2">
+          <Input className="h-8 flex-1 font-mono text-xs" value={query} placeholder={t('logview.searchPh')}
+            onChange={(e) => setQuery(e.target.value)} />
+          {query.trim() !== '' && (
+            <span className="text-xs text-muted-foreground tabular-nums whitespace-nowrap">
+              {t('logview.matches', { n: shown.length, total: all.length })}
+            </span>
+          )}
+        </div>
+
+        <pre ref={boxRef} onScroll={onScroll}
+          className="h-[60vh] overflow-auto rounded-md border border-border bg-muted/30 p-2 text-[11px] leading-snug font-mono whitespace-pre-wrap break-all">
+          {body.trim() === '' ? t('logview.empty') : body}
+        </pre>
+
+        <div className="flex items-center gap-2">
+          <label className="flex items-center gap-2 text-xs cursor-pointer">
+            <Checkbox checked={autoScroll} onCheckedChange={(c) => {
+              const on = !!c;
+              setAutoScroll(on);
+              if (on) { const el = boxRef.current; if (el) el.scrollTop = el.scrollHeight; }
+            }} />
+            {t('logview.autoScroll')}
+          </label>
+          {lastPull && <span className="text-xs text-muted-foreground tabular-nums">{t('logview.updated', { time: lastPull })}</span>}
+          <div className="flex-1" />
+          <Button variant="outline" size="sm" onClick={() => navigator.clipboard?.writeText(body)}>
+            {t('logview.copy')}
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => { setQuery(''); setAutoScroll(true); pull(); }}>
+            {t('logview.toEnd')}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/MainMap.tsx

@@ -0,0 +1,473 @@
+import { useEffect, useRef, useState } from 'react';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { nightPolygon } from '../lib/greyline';
+import { gridToLatLon, gridSquareBounds, greatCirclePoints, pathBetween, destinationPoint } from '@/lib/maidenhead';
+import { writeUiPref } from '@/lib/uiPref';
+
+// Persisted free-pan view of the world map (when auto-zoom is off).
+function loadMapView(): { lat: number; lon: number; zoom: number } | null {
+  try { const v = JSON.parse(localStorage.getItem('opslog.mapView') || 'null'); return v && typeof v.zoom === 'number' ? v : null; }
+  catch { return null; }
+}
+function saveMapView(m: L.Map) {
+  const c = m.getCenter();
+  writeUiPref('opslog.mapView', JSON.stringify({ lat: c.lat, lon: c.lng, zoom: m.getZoom() }));
+}
+
+// The Main tab is built from two independent map panes that the operator can
+// place on either side (Settings → Main view):
+//  • WorldMap   ("map1"): a world map with the great-circle path from the
+//    operator to the contacted station, distance, short/long-path azimuth and
+//    the antenna beam lobe.
+//  • LocatorMap ("map2"): a street map zoomed onto the contacted station's grid.
+// Built on Leaflet + free OSM/Carto tiles (no API key). Endpoints use
+// circleMarkers / divIcons so we don't depend on Leaflet's image assets.
+
+// unwrapLon makes a lat/lon ring continuous in longitude (each point within
+// 180° of the previous) so a polygon crossing the antimeridian doesn't snap
+// across the whole map. Coords may exceed ±180; Leaflet (worldCopyJump) is fine.
+function unwrapLon(ring: [number, number][]): [number, number][] {
+  const out: [number, number][] = [];
+  let prev = NaN;
+  for (const [la, lo] of ring) {
+    let lon = lo;
+    if (!Number.isNaN(prev)) {
+      while (lon - prev > 180) lon -= 360;
+      while (lon - prev < -180) lon += 360;
+    }
+    prev = lon;
+    out.push([la, lon]);
+  }
+  return out;
+}
+
+const CARTO_LIGHT = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png';
+const CARTO_ATTR = '&copy; OpenStreetMap &copy; CARTO';
+
+// NOT tile.openstreetmap.org. Those are OpenStreetMap's VOLUNTEER-run servers,
+// and their usage policy does not cover a desktop application handed to an
+// unbounded number of operators — they blocked OpsLog for it, and every user's
+// map filled with "Access blocked / 403" tiles at once.
+//
+// The replacements are tile services whose terms do cover redistributed apps,
+// with no API key: Carto (whose tiles are OSM-derived, hence the attribution
+// still credits OpenStreetMap) and Esri. Anything added here later must be
+// checked the same way — a free tile URL is not the same thing as a tile URL we
+// are allowed to ship.
+const ESRI_STREET = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}';
+const ESRI_STREET_ATTR = 'Tiles &copy; Esri — Source: Esri, HERE, Garmin, &copy; OpenStreetMap contributors';
+
+// Selectable basemaps for the world (great-circle) map. All key-free and all
+// LABELLED (country/continent names). `labelsUrl` adds a transparent place-name
+// overlay on top of an imagery basemap (so satellite keeps its names too).
+type BasemapKey = 'light' | 'voyager' | 'street' | 'satellite';
+const BASEMAPS: Record<BasemapKey, { label: string; url: string; attr: string; subdomains?: string; labelsUrl?: string }> = {
+  light:     { label: 'Light',     url: CARTO_LIGHT, attr: CARTO_ATTR, subdomains: 'abcd' },
+  voyager:   { label: 'Voyager',   url: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
+               attr: CARTO_ATTR, subdomains: 'abcd' },
+  street:    { label: 'Street',    url: ESRI_STREET, attr: ESRI_STREET_ATTR },
+  satellite: { label: 'Satellite', url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+               attr: 'Tiles &copy; Esri — Source: Esri, Maxar, Earthstar Geographics',
+               labelsUrl: 'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}' },
+};
+function loadBasemap(): BasemapKey {
+  const v = localStorage.getItem('opslog.mapBasemap');
+  return v === 'voyager' || v === 'street' || v === 'satellite' ? v : 'light';
+}
+
+// addBasemap (re)installs the imagery layer and, for satellite, its transparent
+// place-name overlay. updateWhenIdle/keepBuffer keep the number of live tiles
+// down: satellite loads TWO tile layers, so its tile count — and the composited
+// layers WebView2 has to hold — is double every other basemap's.
+function addBasemap(
+  m: L.Map,
+  key: BasemapKey,
+  base: React.MutableRefObject<L.TileLayer | null>,
+  labels: React.MutableRefObject<L.TileLayer | null>,
+) {
+  if (base.current) { m.removeLayer(base.current); base.current = null; }
+  if (labels.current) { m.removeLayer(labels.current); labels.current = null; }
+  const bm = BASEMAPS[key];
+  const opts: L.TileLayerOptions = { maxZoom: 19, updateWhenIdle: true, updateWhenZooming: false, keepBuffer: 1 };
+  base.current = L.tileLayer(bm.url, { ...opts, attribution: bm.attr, subdomains: bm.subdomains ?? 'abc' }).addTo(m);
+  if (bm.labelsUrl) labels.current = L.tileLayer(bm.labelsUrl, opts).addTo(m);
+}
+
+function dot(color: string): L.DivIcon {
+  return L.divIcon({
+    className: '',
+    html: `<span style="display:block;width:12px;height:12px;border-radius:50%;background:${color};border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4)"></span>`,
+    iconSize: [12, 12],
+    iconAnchor: [6, 6],
+  });
+}
+
+interface WorldProps {
+  fromGrid: string;   // operator grid (active profile)
+  toGrid: string;     // contacted-station grid
+  fromLabel?: string; // operator callsign
+  toLabel?: string;   // DX callsign
+  beamAzimuths?: number[];     // radiating heading(s) (deg) → draw a beam lobe each
+  beamWidth?: number;          // beamwidth (deg), default 30
+  boomAzimuth?: number | null; // mechanical boom (rotor) heading → grey reference line
+  zoomSignal?: number;         // bump to force an auto-zoom now (e.g. QRZ lookup finished)
+}
+
+// WorldMap — great-circle path + beam lobe(s), the "map1" pane.
+export function WorldMap({ fromGrid, toGrid, fromLabel, toLabel, beamAzimuths, beamWidth, boomAzimuth, zoomSignal }: WorldProps) {
+  const worldRef = useRef<HTMLDivElement>(null);
+  const worldMap = useRef<L.Map | null>(null);
+  const worldOverlay = useRef<L.LayerGroup | null>(null);
+  const baseLayer = useRef<L.TileLayer | null>(null);
+  const labelsLayer = useRef<L.TileLayer | null>(null);
+  const [basemap, setBasemap] = useState<BasemapKey>(loadBasemap);
+
+  // Auto-zoom the world map to fit QTH→DX on each QSO. When off, the operator
+  // pans/zooms freely (e.g. a whole-world view) and the view is remembered
+  // across restarts. Default on.
+  const [autoZoom, setAutoZoom] = useState(() => localStorage.getItem('opslog.mapAutoZoomDX') !== '0');
+
+  // Grey line — the day/night terminator with its twilight band. Off by
+  // default: it is a working tool for the operator who wants it, not decoration
+  // for the one who does not.
+  const [greyline, setGreyline] = useState(() => localStorage.getItem('opslog.mapGreyline') === '1');
+  const greylineLayer = useRef<L.LayerGroup | null>(null);
+  const autoZoomRef = useRef(autoZoom);
+  useEffect(() => { autoZoomRef.current = autoZoom; }, [autoZoom]);
+
+  // One-time map creation.
+  useEffect(() => {
+    if (worldRef.current && !worldMap.current) {
+      // preferCanvas: the beam lobe is a dense FAN of translucent radials — up to
+      // ~120 thick strokes with a bidirectional Ultrabeam. As SVG that is ~120
+      // composited paths re-rasterised on every pan, zoom and redraw, which is
+      // enough to blow WebView2's raster budget and leave the window painting in
+      // patches. On canvas it is a single layer.
+      const m = L.map(worldRef.current, { zoomControl: true, attributionControl: true, worldCopyJump: true, preferCanvas: true })
+        .setView([20, 0], 1);
+      addBasemap(m, basemap, baseLayer, labelsLayer);
+      worldOverlay.current = L.layerGroup().addTo(m);
+      worldMap.current = m;
+      const sv = loadMapView();
+      if (!autoZoomRef.current && sv) m.setView([sv.lat, sv.lon], sv.zoom);
+      m.on('moveend', () => { if (!autoZoomRef.current) saveMapView(m); });
+    }
+    const t = window.setTimeout(() => { worldMap.current?.invalidateSize(); }, 80);
+    // Resizing the pane is the ONLY thing that needs invalidateSize. Calling it on
+    // every overlay redraw (as before) forced a full repaint of the map each time
+    // the rotor moved a degree.
+    const ro = new ResizeObserver(() => worldMap.current?.invalidateSize());
+    if (worldRef.current) ro.observe(worldRef.current);
+    return () => { window.clearTimeout(t); ro.disconnect(); };
+  }, []);
+
+  // Swap the basemap (and its optional place-name overlay) when the operator
+  // picks a different one. Vector overlays (path/beam) live in Leaflet's
+  // overlayPane, always above any tile layer, so nothing to re-stack there.
+  useEffect(() => {
+    const m = worldMap.current;
+    if (m) addBasemap(m, basemap, baseLayer, labelsLayer);
+  }, [basemap]);
+
+  // Draw the grey line, and keep it moving.
+  //
+  // Redrawn every minute: the terminator travels a quarter of a degree in that
+  // time, which is invisible, but a map left on all day would otherwise be
+  // silently wrong by evening — and the whole point of the display is knowing
+  // where the line is NOW.
+  //
+  // It lives in its own pane below the overlay pane so the path and beam are
+  // never hidden behind the shading, and is non-interactive so it can never
+  // swallow a click meant for the map.
+  useEffect(() => {
+    const m = worldMap.current;
+    if (!m) return;
+
+    if (!greyline) {
+      greylineLayer.current?.remove();
+      greylineLayer.current = null;
+      return;
+    }
+
+    if (!m.getPane('greyline')) {
+      const pane = m.createPane('greyline');
+      pane.style.zIndex = '350';        // above tiles (200), below overlays (400)
+      pane.style.pointerEvents = 'none';
+    }
+
+    const draw = () => {
+      const now = new Date();
+      greylineLayer.current?.remove();
+      const g = L.layerGroup([], { pane: 'greyline' });
+
+      // The rings span −180…+180 once, but this map repeats the world sideways
+      // (worldCopyJump, and zoomed out several copies are on screen at once). A
+      // single ring therefore ends in a hard vertical edge wherever a copy
+      // begins — the shading looked like a rectangle laid over the planet.
+      //
+      // So each ring is drawn again shifted a full turn either way. Three copies
+      // cover every zoom level this map reaches; they cost nothing, being three
+      // polygons on a canvas layer.
+      const COPIES = [-360, 0, 360];
+      const shifted = (ring: [number, number][], by: number): [number, number][] =>
+        by === 0 ? ring : ring.map(([lat, lon]) => [lat, lon + by] as [number, number]);
+
+      // Two bands, drawn dark-to-light so they read as one gradient into night:
+      // full darkness (Sun below the horizon) and civil twilight (down to −6°),
+      // which is the band operators actually mean by "grey line".
+      const nightRing = nightPolygon(now, 0);
+      const twilightRing = nightPolygon(now, -6);
+      // The terminator itself, so the line is readable at a glance rather than
+      // being inferred from where the shading fades. Dropping the last two
+      // points leaves the terminator alone, without the segment that closes the
+      // polygon along the dark pole.
+      const lineRing = nightRing.slice(0, -2);
+
+      for (const by of COPIES) {
+        L.polygon(shifted(twilightRing, by), {
+          pane: 'greyline', stroke: false, fillColor: '#0b1220', fillOpacity: 0.22, interactive: false,
+        }).addTo(g);
+        L.polygon(shifted(nightRing, by), {
+          pane: 'greyline', stroke: false, fillColor: '#0b1220', fillOpacity: 0.32, interactive: false,
+        }).addTo(g);
+        L.polyline(shifted(lineRing, by), {
+          pane: 'greyline', color: '#f59e0b', weight: 1, opacity: 0.75, interactive: false,
+        }).addTo(g);
+      }
+      g.addTo(m);
+      greylineLayer.current = g;
+    };
+
+    draw();
+    const id = window.setInterval(draw, 60_000);
+    return () => { window.clearInterval(id); };
+  }, [greyline]);
+
+  // Redraw overlays whenever the operator/DX grids (or beam) change.
+  useEffect(() => {
+    const wm = worldMap.current, wo = worldOverlay.current;
+    if (!wm || !wo) return;
+    wo.clearLayers();
+
+    const from = gridToLatLon(fromGrid);
+    const to = gridToLatLon(toGrid);
+
+    // Station marker + antenna beam/boom are drawn whenever the station grid is
+    // known — independent of any DX. The antenna is always pointed somewhere, so
+    // the beam heading should show even before a callsign is entered.
+    if (from) {
+      L.marker([from.lat, from.lon], { icon: dot('#2563eb'), title: fromLabel || 'QTH' })
+        .bindTooltip(`${fromLabel ? fromLabel + ' · ' : ''}${fromGrid.toUpperCase()}`, { permanent: false, direction: 'top' })
+        .addTo(wo);
+
+      // ── Antenna beam lobe(s) (drawn first, under the arc/markers) ──
+      if (beamAzimuths && beamAzimuths.length) {
+        const half = (beamWidth ?? 30) / 2;
+        const D = 5500; // lobe length (km)
+        // Great-circle radial out to distance D, stopping just short of the pole
+        // so a poleward line doesn't snap across the top of the Mercator map.
+        const radial = (b: number): [number, number][] => {
+          const out: [number, number][] = [];
+          const N = 64;
+          for (let i = 1; i <= N; i++) {
+            const d = destinationPoint(from.lat, from.lon, b, (D * i) / N);
+            out.push([d.lat, d.lon]);
+            if (Math.abs(d.lat) > 86) break; // near a pole — stop before the snap
+          }
+          return out;
+        };
+        for (const az of beamAzimuths) {
+          // Draw the lobe as a DENSE fan of translucent great-circle radials, not
+          // a filled polygon: a polygon smears badly near the poles on Mercator
+          // (a poleward beam degenerates into a giant triangle), while each radial
+          // LINE stays clean at any azimuth. A small angular step makes the lines
+          // overlap into a solid-looking lobe (no separate strokes), darker near
+          // the antenna and fanning out toward the front.
+          for (let b = az - half; b <= az + half + 0.001; b += 0.5) {
+            const line = unwrapLon([[from.lat, from.lon], ...radial(b)]);
+            L.polyline(line as L.LatLngExpression[], { color: '#ff2d2d', weight: 6, opacity: 0.10, smoothFactor: 0 }).addTo(wo);
+          }
+
+          const cl = unwrapLon([[from.lat, from.lon], ...radial(az)]);
+          // Dark casing under the boresight so the bright dashed line stays
+          // readable on any basemap. Same dashArray so the casing tracks each dash.
+          L.polyline(cl as L.LatLngExpression[], { color: '#000', weight: 4, opacity: 0.4, dashArray: '5 4', smoothFactor: 0 }).addTo(wo);
+          L.polyline(cl as L.LatLngExpression[], { color: '#ff2d2d', weight: 2, opacity: 0.95, dashArray: '5 4', smoothFactor: 0 })
+            .bindTooltip(`Beam ${Math.round(az)}°`, { permanent: false, direction: 'top' }).addTo(wo);
+        }
+      }
+
+      // Mechanical boom (rotor) direction — thin grey dashed line. Drawn when the
+      // Ultrabeam radiates elsewhere (reverse/bi) so the boom heading stays visible
+      // next to the red radiating lobe(s).
+      if (boomAzimuth != null) {
+        const bpts: [number, number][] = [[from.lat, from.lon]];
+        const N = 64, D = 5500;
+        for (let i = 1; i <= N; i++) {
+          const d = destinationPoint(from.lat, from.lon, boomAzimuth, (D * i) / N);
+          bpts.push([d.lat, d.lon]);
+          if (Math.abs(d.lat) > 86) break;
+        }
+        L.polyline(unwrapLon(bpts) as L.LatLngExpression[], { color: '#64748b', weight: 1.5, opacity: 0.85, dashArray: '3 4', smoothFactor: 0 })
+          .bindTooltip(`Boom ${Math.round(boomAzimuth)}°`, { permanent: false, direction: 'top' }).addTo(wo);
+      }
+    }
+
+    // DX marker + great-circle arc — only when a DX grid is known (callsign entered).
+    let arcPts: [number, number][] | null = null;
+    if (from && to) {
+      L.marker([to.lat, to.lon], { icon: dot('#dc2626'), title: toLabel || 'DX' })
+        .bindTooltip(`${toLabel ? toLabel + ' · ' : ''}${toGrid.toUpperCase()}`, { permanent: false, direction: 'top' })
+        .addTo(wo);
+      arcPts = greatCirclePoints(from.lat, from.lon, to.lat, to.lon, 128);
+      // smoothFactor: 0 keeps every vertex (Leaflet otherwise simplifies the line).
+      L.polyline(unwrapLon(arcPts) as L.LatLngExpression[],
+        { color: '#2563eb', weight: 2, opacity: 0.85, smoothFactor: 0 }).addTo(wo);
+    }
+
+    if (autoZoom) {
+      if (from && to && arcPts) {
+        const bounds = L.latLngBounds([[from.lat, from.lon], [to.lat, to.lon]]);
+        arcPts.forEach((p) => bounds.extend(p as L.LatLngExpression));
+        wm.fitBounds(bounds, { padding: [30, 30], maxZoom: 6 });
+      } else if (to) {
+        wm.setView([to.lat, to.lon], 3);
+      } else if (from) {
+        wm.setView([from.lat, from.lon], 3);
+      }
+    }
+    // No invalidateSize() here — a ResizeObserver handles the only case that needs
+    // it. Forcing a full map repaint on every redraw is what made a moving rotor
+    // thrash the compositor.
+    // Headings are rounded in the deps: a rotor reports a jittering float, and a
+    // tenth of a degree is invisible on a 5500 km lobe but rebuilds every polyline.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fromGrid, toGrid, fromLabel, toLabel, (beamAzimuths ?? []).map((a) => Math.round(a)).join(','), beamWidth,
+      boomAzimuth == null ? null : Math.round(boomAzimuth), autoZoom, zoomSignal]);
+
+  const path = pathBetween(fromGrid, toGrid);
+
+  return (
+    <div className="relative isolate h-full w-full rounded-lg overflow-hidden border border-border">
+      <div ref={worldRef} className="absolute inset-0" />
+      {/* Basemap picker — Light / Street / Satellite (key-free tiles). */}
+      <div className="absolute top-1 left-12 z-[500] flex rounded-md overflow-hidden shadow border border-border backdrop-blur">
+        {(Object.keys(BASEMAPS) as BasemapKey[]).map((k) => (
+          <button
+            key={k}
+            type="button"
+            onClick={() => { setBasemap(k); writeUiPref('opslog.mapBasemap', k); }}
+            title={`Basemap: ${BASEMAPS[k].label}`}
+            className={`px-2 py-1 text-[11px] font-medium transition-colors ${
+              basemap === k ? 'bg-primary text-primary-foreground' : 'bg-card/90 text-muted-foreground hover:bg-card'
+            }`}
+          >
+            {BASEMAPS[k].label}
+          </button>
+        ))}
+      </div>
+      {/* Auto-zoom toggle: on = frame QTH→DX each QSO; off = free pan/zoom
+          (remembered across restarts), so the beam heading stays visible. */}
+      <button
+        type="button"
+        onClick={() => {
+          const v = !autoZoom;
+          setAutoZoom(v);
+          writeUiPref('opslog.mapAutoZoomDX', v ? '1' : '0');
+          const m = worldMap.current;
+          if (!v && m) saveMapView(m);
+        }}
+        title={autoZoom ? 'Auto-zoom to DX is ON — click for free pan/zoom (remembered)' : 'Free pan/zoom — click to auto-zoom to the DX'}
+        className={`absolute top-1 right-1 z-[500] rounded-md px-2 py-1 text-[11px] font-medium shadow border backdrop-blur transition-colors ${
+          autoZoom ? 'bg-primary text-primary-foreground border-primary' : 'bg-card/90 text-muted-foreground border-border hover:bg-card'
+        }`}
+      >
+        Zoom DX
+      </button>
+      {/* Grey line toggle, under the zoom button. */}
+      <button
+        type="button"
+        onClick={() => {
+          const v = !greyline;
+          setGreyline(v);
+          writeUiPref('opslog.mapGreyline', v ? '1' : '0');
+        }}
+        title={greyline ? 'Grey line is ON — day/night terminator and twilight band' : 'Show the grey line (day/night terminator)'}
+        className={`absolute top-9 right-1 z-[500] rounded-md px-2 py-1 text-[11px] font-medium shadow border backdrop-blur transition-colors ${
+          greyline ? 'bg-primary text-primary-foreground border-primary' : 'bg-card/90 text-muted-foreground border-border hover:bg-card'
+        }`}
+      >
+        Grey line
+      </button>
+      {path && (
+        <div className="absolute bottom-1 left-1 z-[500] rounded-md bg-card/90 backdrop-blur px-2 py-1 text-[11px] font-mono shadow border border-border pointer-events-none">
+          <div><span className="text-muted-foreground">Dist</span> {Math.round(path.distanceShort).toLocaleString()} km
+            <span className="text-muted-foreground"> · LP</span> {Math.round(path.distanceLong).toLocaleString()} km</div>
+          <div><span className="text-muted-foreground">Az SP</span> {Math.round(path.bearingShort)}°
+            <span className="text-muted-foreground"> · LP</span> {Math.round(path.bearingLong)}°</div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface LocatorProps {
+  toGrid: string;     // contacted-station grid
+  toLabel?: string;   // DX callsign
+}
+
+// LocatorMap — street map zoomed onto the DX grid, the "map2" pane.
+export function LocatorMap({ toGrid, toLabel }: LocatorProps) {
+  const locatorRef = useRef<HTMLDivElement>(null);
+  const locatorMap = useRef<L.Map | null>(null);
+  const locatorOverlay = useRef<L.LayerGroup | null>(null);
+
+  useEffect(() => {
+    if (locatorRef.current && !locatorMap.current) {
+      const m = L.map(locatorRef.current, { zoomControl: true, attributionControl: true })
+        .setView([20, 0], 2);
+      // Same restraint as the world map: fetch on idle, not mid-pan, and keep a
+      // single ring of buffer tiles. Requesting tiles as fast as the pointer
+      // moves is what gets an app blocked, and the next provider is under no
+      // more obligation to tolerate it than the last one was.
+      L.tileLayer(CARTO_LIGHT, {
+        attribution: CARTO_ATTR, subdomains: 'abcd', maxZoom: 19,
+        updateWhenIdle: true, updateWhenZooming: false, keepBuffer: 1,
+      }).addTo(m);
+      locatorOverlay.current = L.layerGroup().addTo(m);
+      locatorMap.current = m;
+    }
+    const t = window.setTimeout(() => { locatorMap.current?.invalidateSize(); }, 80);
+    return () => window.clearTimeout(t);
+  }, []);
+
+  useEffect(() => {
+    const lm = locatorMap.current, lo = locatorOverlay.current;
+    if (!lm || !lo) return;
+    lo.clearLayers();
+    const to = gridToLatLon(toGrid);
+    if (to) {
+      L.marker([to.lat, to.lon], { icon: dot('#dc2626'), title: toLabel || 'DX' })
+        .bindTooltip(`${toLabel ? toLabel + ' · ' : ''}${toGrid.toUpperCase()}`, { permanent: false, direction: 'top' })
+        .addTo(lo);
+      const b = gridSquareBounds(toGrid);
+      if (b) {
+        L.rectangle([[b.south, b.west], [b.north, b.east]], { color: '#dc2626', weight: 1, fillOpacity: 0.06 }).addTo(lo);
+      }
+      lm.setView([to.lat, to.lon], toGrid.trim().length >= 6 ? 9 : 7);
+    }
+    setTimeout(() => { lm.invalidateSize(); }, 0);
+  }, [toGrid, toLabel]);
+
+  return (
+    <div className="relative isolate h-full w-full rounded-lg overflow-hidden border border-border">
+      <div ref={locatorRef} className="absolute inset-0" />
+      {!gridToLatLon(toGrid) && (
+        <div className="absolute inset-0 z-[500] flex items-center justify-center text-xs text-muted-foreground bg-card/60 pointer-events-none">
+          Enter a grid or look up the callsign to center the map.
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/Menubar.tsx

@@ -6,7 +6,10 @@ import {
 import { cn } from '@/lib/utils';
 
 export type MenuItem =
-  | { type: 'item'; label: string; action: string; shortcut?: string; disabled?: boolean }
+  // accent highlights an item that is an OFFER rather than a command (Donate).
+  // Generic on purpose: a hard-coded label test in the renderer would break the
+  // moment the menu is translated.
+  | { type: 'item'; label: string; action: string; shortcut?: string; disabled?: boolean; accent?: boolean }
   | { type: 'separator' };
 
 export interface Menu {
@@ -77,6 +80,7 @@ export function Menubar({ menus, onAction }: Props) {
                 <DropdownMenuItem
                   key={i}
                   disabled={item.disabled}
+                  className={item.accent ? 'text-warning focus:text-warning font-medium' : undefined}
                   onSelect={() => onAction(item.action)}
                 >
                   <span>{item.label}</span>

frontend/src/components/MeterBar.tsx

@@ -0,0 +1,46 @@
+import { cn } from '@/lib/utils';
+
+// MeterBar is the ONE LED-bar meter used across the FlexRadio panel, the amplifier
+// cards and the Tuner Genius card, so every meter renders at exactly the same size
+// (segment count, bar height, padding). Keep it the single source of truth — don't
+// re-declare a local copy in a panel, or the meters drift out of sync.
+export const METER_SEGMENTS = 26;
+
+export function MeterBar({ label, value, unit, lo, hi, accent = '#16a34a', extra, display, segColor, onClick, title, compact }: {
+  label: string; value: number; unit?: string; lo: number; hi: number; accent?: string; extra?: string; display?: string;
+  segColor?: (frac: number) => string; onClick?: () => void; title?: string; compact?: boolean;
+}) {
+  const span = hi - lo;
+  const pct = span > 0 ? Math.max(0, Math.min(100, ((value - lo) / span) * 100)) : 0;
+  const lit = Math.round((pct / 100) * METER_SEGMENTS);
+  return (
+    <div onClick={onClick} title={title}
+      className={cn('rounded-lg border border-border/70 bg-gradient-to-b from-card to-muted/40 shadow-sm min-w-0',
+        compact ? 'px-2 py-1' : 'px-2.5 py-2',
+        onClick && 'cursor-pointer hover:border-primary/60 hover:from-muted/40')}>
+      <div className={cn('flex items-baseline justify-between gap-1', compact ? 'mb-1' : 'mb-1.5')}>
+        <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground truncate">{label}</span>
+        <span className={cn('font-mono font-bold tabular-nums whitespace-nowrap text-foreground/90', compact ? 'text-xs' : 'text-sm')}>
+          {display !== undefined ? display : (
+            <>{Math.abs(value) >= 100 ? value.toFixed(0) : value.toFixed(1)}<span className="text-muted-foreground text-[10px] ml-0.5">{unit}</span></>
+          )}
+        </span>
+      </div>
+      {/* LED bar — recessed track + gradient segments for a cleaner instrument look. */}
+      <div className={cn('flex gap-[2px] items-stretch rounded-[3px] bg-black/10 p-[2px]', compact ? 'h-2' : 'h-3')}>
+        {Array.from({ length: METER_SEGMENTS }).map((_, i) => {
+          const on = i < lit;
+          const frac = i / METER_SEGMENTS;
+          const col = segColor ? segColor(frac) : (frac > 0.82 ? '#dc2626' : accent);
+          return (
+            <div key={i} className="flex-1 rounded-[2px] transition-colors duration-100"
+              style={on
+                ? { background: `linear-gradient(to bottom, ${col}, ${col}cc)`, boxShadow: `0 0 4px ${col}88` }
+                : { background: '#cfc6ad', opacity: 0.35 }} />
+          );
+        })}
+      </div>
+      {extra && !compact && <div className="text-[10px] text-muted-foreground/70 mt-1 text-right font-mono">{extra}</div>}
+    </div>
+  );
+}

frontend/src/components/NetControlPanel.tsx

@@ -0,0 +1,577 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  AllCommunityModule, ModuleRegistry,
+  type ColDef,
+} from 'ag-grid-community';
+import { hamlogGridTheme } from '@/lib/gridTheme';
+import { AgGridReact } from 'ag-grid-react';
+import { Plus, Trash2, Radio, PlusCircle, MinusCircle, Search, UserPlus, History, ChevronUp, ChevronDown } from 'lucide-react';
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { QSOEditModal } from '@/components/QSOEditModal';
+import { RecentQSOsGrid } from '@/components/RecentQSOsGrid';
+import { useI18n } from '@/lib/i18n';
+import type { QSOForm } from '@/types';
+import {
+  NetList, NetCreate, NetRename, NetDelete, NetOpen, NetClose, NetOpenID,
+  NetRoster, NetRosterUpsert, NetRosterRemove, NetLookup,
+  NetActiveList, NetActivate, NetDeactivate, NetUpdateActive, NetDiscardActive,
+  WorkedBefore,
+} from '@/../wailsjs/go/main/App';
+import { netctl } from '@/../wailsjs/go/models';
+
+ModuleRegistry.registerModules([AllCommunityModule]);
+
+const hamlogTheme = hamlogGridTheme;
+
+type Net = netctl.Net;
+type Station = netctl.Station;
+
+function fmtTimeOn(s: any): string {
+  if (!s) return '';
+  const d = new Date(s);
+  if (isNaN(d.getTime())) return '';
+  const p = (n: number) => String(n).padStart(2, '0');
+  return `${p(d.getUTCHours())}:${p(d.getUTCMinutes())}:${p(d.getUTCSeconds())}Z`;
+}
+
+const emptyStation = (): Station => netctl.Station.createFrom({ callsign: '' });
+
+// The right-click actions of the main Recent QSOs grid (update from cty/QRZ/
+// Club Log, send to services, recording e-mail, eQSL, delete) — passed down so
+// the worked-before grid here offers the SAME context menu on logged QSOs.
+type QSOMenuHandlers = {
+  onUpdateFromCty?: (ids: number[]) => void;
+  onUpdateFromQRZ?: (ids: number[]) => void;
+  onUpdateFromClublog?: (ids: number[]) => void;
+  onSendTo?: (service: string, ids: number[]) => void;
+  onSendRecording?: (ids: number[]) => void;
+  onSendEQSL?: (ids: number[]) => void;
+  onDelete?: (ids: number[]) => void;
+};
+
+type Props = {
+  onLogged?: () => void;
+  countries?: string[];
+  bands?: string[];
+  modes?: string[];
+  qsoMenuHandlers?: QSOMenuHandlers;
+};
+
+export function NetControlPanel({ onLogged, countries, bands, modes, qsoMenuHandlers }: Props) {
+  const { t } = useI18n();
+  const [nets, setNets] = useState<Net[]>([]);
+  const [selId, setSelId] = useState<string>('');
+  const [openId, setOpenId] = useState<string>('');
+  const [roster, setRoster] = useState<Station[]>([]);
+  const [active, setActive] = useState<QSOForm[]>([]);
+  const [error, setError] = useState('');
+
+  // Full-QSO edit modal for an on-air draft (same one Recent QSOs uses).
+  const [editingDraft, setEditingDraft] = useState<QSOForm | null>(null);
+  const [selectedActiveIds, setSelectedActiveIds] = useState<number[]>([]);
+  // Programmatic row selection in the on-air grid (auto-advance after logging).
+  const [selectRow, setSelectRow] = useState<{ id: number; seq: number }>({ id: 0, seq: 0 });
+
+  // Add/edit-contact dialog.
+  const [contactOpen, setContactOpen] = useState(false);
+  const [contact, setContact] = useState<Station>(emptyStation());
+  const [looking, setLooking] = useState(false);
+
+  const rosterGrid = useRef<any>(null);
+  // Cross-grid drag & drop: roster row → on-air grid puts the station on air;
+  // on-air row → roster grid logs it (same as the "Log & end" button). AG-Grid
+  // external drop zones need each grid's api + the OTHER grid's container div.
+  const onAirApi = useRef<any>(null);
+  const onAirWrap = useRef<HTMLDivElement | null>(null);
+  const rosterWrap = useRef<HTMLDivElement | null>(null);
+  const dropZonesDone = useRef({ roster: false, onair: false });
+  // Callbacks live in refs so the drop-zone closures (registered once) always
+  // call the CURRENT activate/deactivate, not a stale first-render one.
+  const activateRef = useRef<(call: string) => void>(() => {});
+  const deactivateRef = useRef<(id?: number) => void>(() => {});
+  const wireDropZones = useCallback(() => {
+    const rApi = rosterGrid.current?.api;
+    if (rApi && onAirWrap.current && !dropZonesDone.current.roster) {
+      dropZonesDone.current.roster = true;
+      rApi.addRowDropZone({
+        getContainer: () => onAirWrap.current!,
+        onDragStop: (p: any) => { const call = p.node?.data?.callsign; if (call) activateRef.current(call); },
+      });
+    }
+    if (onAirApi.current && rosterWrap.current && !dropZonesDone.current.onair) {
+      dropZonesDone.current.onair = true;
+      onAirApi.current.addRowDropZone({
+        getContainer: () => rosterWrap.current!,
+        onDragStop: (p: any) => { const id = p.node?.data?.id; if (id != null) deactivateRef.current(id); },
+      });
+    }
+  }, []);
+
+  // Worked-before for the clicked station (see if/when we contacted it before).
+  const [wbCall, setWbCall] = useState('');
+  const [wb, setWb] = useState<any>(null);
+  const [wbBusy, setWbBusy] = useState(false);
+  const wbReq = useRef(0);
+  // Resizable height (drag the handle on top). Persisted.
+  const [wbHeight, setWbHeight] = useState(() => {
+    const v = parseInt(localStorage.getItem('opslog.netWbHeight') || '', 10);
+    return v >= 80 && v <= 600 ? v : 176;
+  });
+  useEffect(() => { localStorage.setItem('opslog.netWbHeight', String(wbHeight)); }, [wbHeight]);
+  const startWbResize = (e: React.MouseEvent) => {
+    e.preventDefault();
+    const startY = e.clientY, startH = wbHeight;
+    const onMove = (ev: MouseEvent) => setWbHeight(Math.max(80, Math.min(600, startH - (ev.clientY - startY))));
+    const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  };
+  const showWorkedBefore = useCallback(async (call: string, dxcc = 0) => {
+    const c = (call ?? '').trim().toUpperCase();
+    setWbCall(c);
+    if (!c) { setWb(null); return; }
+    const req = ++wbReq.current;
+    setWbBusy(true);
+    try { const r = await WorkedBefore(c, dxcc); if (wbReq.current === req) setWb(r); }
+    catch { if (wbReq.current === req) setWb(null); }
+    finally { if (wbReq.current === req) setWbBusy(false); }
+  }, []);
+
+  const isOpen = openId !== '' && openId === selId;
+
+  const refreshNets = useCallback(async () => {
+    try {
+      const [list, oid] = await Promise.all([NetList(), NetOpenID()]);
+      const arr = (list ?? []) as Net[];
+      setNets(arr);
+      setOpenId(oid ?? '');
+      setSelId((cur) => cur || (oid ?? '') || (arr[0]?.id ?? ''));
+    } catch (e: any) { setError(String(e?.message ?? e)); }
+  }, []);
+
+  const refreshRoster = useCallback(async (id: string) => {
+    if (!id) { setRoster([]); return; }
+    try { setRoster(((await NetRoster(id)) ?? []) as Station[]); }
+    catch (e: any) { setError(String(e?.message ?? e)); }
+  }, []);
+
+  const refreshActive = useCallback(async () => {
+    try { setActive(((await NetActiveList()) ?? []) as unknown as QSOForm[]); }
+    catch { /* ignore */ }
+  }, []);
+
+  // ---- Mic pass order ------------------------------------------------------
+  // The on-air grid shows the stations in the order the mic goes around — NOT
+  // by log time. The order is owned here as a list of draft ids: new check-ins
+  // join at the END of the queue, logged/cancelled ones drop out, and the ⬆⬇
+  // buttons move the selected station. Persisted per net so a panel remount
+  // (tab switch) keeps the round.
+  const [orderIds, setOrderIds] = useState<number[]>([]);
+  const orderKey = openId ? `opslog.netOrder.${openId}` : '';
+  // Load the saved order when a net opens.
+  useEffect(() => {
+    if (!orderKey) { setOrderIds([]); return; }
+    try { setOrderIds(JSON.parse(localStorage.getItem(orderKey) || '[]')); }
+    catch { setOrderIds([]); }
+  }, [orderKey]);
+  // Reconcile with the live list: keep known ids in their order, append new
+  // ones, drop the gone. Persist.
+  useEffect(() => {
+    setOrderIds((cur) => {
+      const liveIds = active.map((a) => a.id as number).filter((id) => id != null);
+      const liveSet = new Set(liveIds);
+      const kept = cur.filter((id) => liveSet.has(id));
+      const keptSet = new Set(kept);
+      const next = [...kept, ...liveIds.filter((id) => !keptSet.has(id))];
+      if (next.length === cur.length && next.every((v, i) => v === cur[i])) return cur;
+      if (orderKey) { try { localStorage.setItem(orderKey, JSON.stringify(next)); } catch { /* quota */ } }
+      return next;
+    });
+  }, [active, orderKey]);
+  const activeOrdered = useMemo(() => {
+    const byId = new Map(active.map((a) => [a.id as number, a]));
+    return orderIds.map((id) => byId.get(id)).filter(Boolean) as QSOForm[];
+  }, [active, orderIds]);
+  // Move the selected on-air station up/down the queue.
+  const moveSelected = useCallback((dir: -1 | 1) => {
+    const id = selectedActiveIds[0];
+    if (id == null) return;
+    setOrderIds((cur) => {
+      const i = cur.indexOf(id);
+      const j = i + dir;
+      if (i < 0 || j < 0 || j >= cur.length) return cur;
+      const next = [...cur];
+      [next[i], next[j]] = [next[j], next[i]];
+      if (orderKey) { try { localStorage.setItem(orderKey, JSON.stringify(next)); } catch { /* quota */ } }
+      return next;
+    });
+  }, [selectedActiveIds, orderKey]);
+
+  useEffect(() => { refreshNets(); }, [refreshNets]);
+  useEffect(() => { refreshRoster(selId); }, [selId, refreshRoster]);
+  useEffect(() => { if (isOpen) refreshActive(); else setActive([]); }, [isOpen, refreshActive]);
+
+  // The roster side hides callsigns currently on the air (they live in the left
+  // grid until logged), mirroring Log4OM's two-list behaviour.
+  const activeCalls = useMemo(
+    () => new Set(active.map((a) => (a.callsign ?? '').toUpperCase())),
+    [active],
+  );
+  const rosterShown = useMemo(
+    () => roster.filter((s) => !activeCalls.has((s.callsign ?? '').toUpperCase())),
+    [roster, activeCalls],
+  );
+
+  async function newNet() {
+    const name = window.prompt(t('ncp.newNetPrompt'));
+    if (!name?.trim()) return;
+    try { const n = await NetCreate(name.trim()); await refreshNets(); setSelId(n.id); }
+    catch (e: any) { setError(String(e?.message ?? e)); }
+  }
+  async function renameNet() {
+    if (!selId) return;
+    const cur = nets.find((n) => n.id === selId);
+    const name = window.prompt(t('ncp.renamePrompt'), cur?.name ?? '');
+    if (!name?.trim()) return;
+    try { await NetRename(selId, name.trim()); await refreshNets(); }
+    catch (e: any) { setError(String(e?.message ?? e)); }
+  }
+  async function deleteNet() {
+    if (!selId) return;
+    const cur = nets.find((n) => n.id === selId);
+    if (!window.confirm(t('ncp.deleteConfirm', { name: cur?.name ?? '' }))) return;
+    try { await NetDelete(selId); setSelId(''); await refreshNets(); }
+    catch (e: any) { setError(String(e?.message ?? e)); }
+  }
+  async function toggleOpen() {
+    try {
+      if (isOpen) {
+        if (active.length > 0 &&
+          !window.confirm(t('ncp.closeConfirm', { n: active.length }))) return;
+        await NetClose(); setOpenId('');
+      } else {
+        await NetOpen(selId); setOpenId(selId); await refreshActive();
+      }
+    } catch (e: any) { setError(String(e?.message ?? e)); }
+  }
+
+  // Roster → active (start QSO).
+  async function activate(call: string) {
+    if (!isOpen || !call) return;
+    try { await NetActivate(call); await refreshActive(); }
+    catch (e: any) { setError(String(e?.message ?? e)); }
+  }
+  // Active → logged (end QSO, removed from session, written to the logbook).
+  // Then auto-select the NEXT station in the mic-pass order, so the operator
+  // can chain "log → log → log" without re-clicking a row each time.
+  async function deactivate(id?: number) {
+    if (id == null) return;
+    const next = activeOrdered.find((a) => a.id !== id); // computed BEFORE the list shrinks
+    try {
+      await NetDeactivate(id);
+      await refreshActive();
+      onLogged?.();
+      if (next?.id != null) {
+        setSelectRow((s) => ({ id: next.id as number, seq: s.seq + 1 }));
+        setSelectedActiveIds([next.id as number]);
+        showWorkedBefore(next.callsign, (next as any).dxcc ?? 0);
+      }
+    } catch (e: any) { setError(String(e?.message ?? e)); }
+  }
+  // Keep the drop-zone closures pointed at the CURRENT handlers.
+  activateRef.current = activate;
+  deactivateRef.current = deactivate;
+
+  // Log EVERYONE still on air (end of net): each draft is written to the logbook
+  // exactly as the single-log button would.
+  async function logAll() {
+    if (active.length === 0) return;
+    if (!window.confirm(t('ncp.logAllConfirm', { n: active.length }))) return;
+    try {
+      for (const a of [...active]) {
+        if (a.id != null) await NetDeactivate(a.id as number);
+      }
+      await refreshActive();
+      onLogged?.();
+    } catch (e: any) { setError(String(e?.message ?? e)); await refreshActive(); }
+  }
+
+  // Edit-modal handlers (operate on the in-memory draft, not the DB).
+  async function saveDraft(q: QSOForm) {
+    try { await NetUpdateActive(q as any); setEditingDraft(null); await refreshActive(); }
+    catch (e: any) { setError(String(e?.message ?? e)); }
+  }
+  async function discardDraft(id: number) {
+    try { await NetDiscardActive(id); setEditingDraft(null); await refreshActive(); }
+    catch (e: any) { setError(String(e?.message ?? e)); }
+  }
+
+  // Add-contact dialog.
+  function openAddContact() { setContact(emptyStation()); setContactOpen(true); }
+  async function lookupContact() {
+    const call = (contact.callsign ?? '').trim();
+    if (!call) return;
+    setLooking(true);
+    try {
+      const r = await NetLookup(call);
+      setContact((c) => netctl.Station.createFrom({
+        ...c, callsign: (r.callsign || call).toUpperCase(),
+        name: r.name || c.name, qth: r.qth || c.qth, country: r.country || c.country,
+        dxcc: r.dxcc || c.dxcc, itu: r.itu || c.itu, cq: r.cq || c.cq,
+        grid: r.grid || c.grid, address: r.address || c.address, state: r.state || c.state,
+        cnty: r.cnty || c.cnty, cont: r.cont || c.cont, lat: r.lat || c.lat, lon: r.lon || c.lon,
+        email: r.email || c.email,
+      }));
+    } catch (e: any) { setError(String(e?.message ?? e)); }
+    finally { setLooking(false); }
+  }
+  async function saveContact() {
+    const call = (contact.callsign ?? '').trim().toUpperCase();
+    if (!call || !selId) return;
+    try {
+      await NetRosterUpsert(selId, netctl.Station.createFrom({ ...contact, callsign: call }));
+      setContactOpen(false);
+      await refreshRoster(selId);
+    } catch (e: any) { setError(String(e?.message ?? e)); }
+  }
+  async function removeSelectedRoster() {
+    const sel = (rosterGrid.current?.api?.getSelectedRows() ?? []) as Station[];
+    if (sel.length === 0) return;
+    if (!window.confirm(t('ncp.removeConfirm', { n: sel.length }))) return;
+    try {
+      for (const s of sel) await NetRosterRemove(selId, s.callsign);
+      await refreshRoster(selId);
+    } catch (e: any) { setError(String(e?.message ?? e)); }
+  }
+
+  const rosterCols = useMemo<ColDef<Station>[]>(() => [
+    // rowDrag: drag a roster station onto the on-air grid to start its QSO.
+    { headerName: t('ncp.colCallsign'), field: 'callsign', width: 110, cellClass: 'font-mono font-semibold', rowDrag: true },
+    { headerName: t('ncp.colName'), field: 'name', flex: 1 },
+    { headerName: 'QTH', field: 'qth', flex: 1 },
+    { headerName: t('ncp.colCountry'), field: 'country', width: 130 },
+  ], [t]);
+
+  const defaultColDef = useMemo<ColDef>(() => ({ sortable: true, resizable: true, suppressMovable: false }), []);
+
+  return (
+    <div className="flex flex-col min-h-0 flex-1">
+      {/* Toolbar */}
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border/60 bg-muted/30">
+        <Button variant="outline" size="sm" className="h-8" onClick={newNet}>
+          <Plus className="size-3.5" /> {t('ncp.newNet')}
+        </Button>
+        <select
+          className="h-8 rounded-md border border-input bg-background px-2 text-sm min-w-[180px]"
+          value={selId}
+          disabled={isOpen}
+          onChange={(e) => setSelId(e.target.value)}
+          title={isOpen ? t('ncp.closeToSwitch') : t('ncp.selectNetTitle')}
+        >
+          <option value="">{t('ncp.selectNetOption')}</option>
+          {nets.map((n) => <option key={n.id} value={n.id}>{n.name}</option>)}
+        </select>
+        <Button variant={isOpen ? 'destructive' : 'default'} size="sm" className="h-8" disabled={!selId} onClick={toggleOpen}>
+          <Radio className="size-3.5" /> {isOpen ? t('ncp.closeNet') : t('ncp.openNet')}
+        </Button>
+        <Button variant="ghost" size="sm" className="h-8" disabled={!selId || isOpen} onClick={renameNet}>{t('ncp.rename')}</Button>
+        <Button variant="ghost" size="sm" className="h-8 text-danger" disabled={!selId || isOpen} onClick={deleteNet}>
+          <Trash2 className="size-3.5" /> {t('ncp.delete')}
+        </Button>
+
+        <div className="flex-1" />
+        {isOpen && <Badge className="bg-success text-success-foreground tracking-wider">{t('ncp.netOpenBadge')}</Badge>}
+        <span className="text-[11px] text-muted-foreground">
+          {t('ncp.onAir')} <strong className="text-foreground">{active.length}</strong> ·
+          {t('ncp.roster')} <strong className="text-foreground">{roster.length}</strong>
+        </span>
+        {error && <Badge variant="destructive" className="max-w-[280px] truncate" title={error}>{error}</Badge>}
+      </div>
+
+      <div className="flex min-h-0 flex-1">
+        {/* ACTIVE USERS (left) */}
+        <div className="flex flex-col min-h-0 flex-1 border-r border-border/60">
+          <div className="flex items-center gap-2 px-3 py-1.5 bg-destructive text-destructive-foreground text-[11px] font-semibold uppercase tracking-wider">
+            {t('ncp.onAirActive')}
+            <span className="ml-auto font-normal normal-case opacity-90">{t('ncp.activeHint')}</span>
+          </div>
+          <div ref={onAirWrap} className="flex flex-col min-h-0 flex-1">
+            <RecentQSOsGrid
+              rows={activeOrdered}
+              total={activeOrdered.length}
+              storageKey="net.onair"
+              selectRowSignal={selectRow}
+              rowDragCall
+              passOrder
+              onGridApi={(api) => { onAirApi.current = api; wireDropZones(); }}
+              onRowClicked={(q) => showWorkedBefore(q.callsign, (q as any).dxcc ?? 0)}
+              onRowDoubleClicked={(q) => setEditingDraft(q)}
+              onRowSelected={setSelectedActiveIds}
+            />
+          </div>
+          {isOpen && active.length > 0 && (
+            <div className="px-3 py-1.5 border-t border-border/60 bg-muted/30 flex items-center gap-2">
+              <Button variant="ghost" size="sm" className="h-7 text-[11px]"
+                onClick={() => { if (selectedActiveIds[0] != null) deactivate(selectedActiveIds[0]); }}>
+                <MinusCircle className="size-3.5" /> {t('ncp.logEndSelected')}
+              </Button>
+              {/* Mic pass order: move the selected station up/down the round. */}
+              <div className="flex items-center gap-0.5 pl-1 border-l border-border/50">
+                <Button variant="ghost" size="icon" className="size-7" title={t('ncp.moveUp')}
+                  disabled={selectedActiveIds[0] == null || orderIds.indexOf(selectedActiveIds[0]) <= 0}
+                  onClick={() => moveSelected(-1)}>
+                  <ChevronUp className="size-4" />
+                </Button>
+                <Button variant="ghost" size="icon" className="size-7" title={t('ncp.moveDown')}
+                  disabled={selectedActiveIds[0] == null || orderIds.indexOf(selectedActiveIds[0]) >= orderIds.length - 1}
+                  onClick={() => moveSelected(1)}>
+                  <ChevronDown className="size-4" />
+                </Button>
+              </div>
+              <Button variant="ghost" size="sm" className="h-7 text-[11px] ml-auto" onClick={logAll}>
+                <MinusCircle className="size-3.5" /> {t('ncp.logAll', { n: active.length })}
+              </Button>
+            </div>
+          )}
+
+          {/* Worked-before for the clicked station — click a row (on air or
+              roster) to see if/when we contacted it before. Lives INSIDE the
+              on-air column so resizing only splits this column; the roster on
+              the right keeps its full height. */}
+          <div className="shrink-0 flex flex-col" style={{ height: wbHeight }}>
+            <div className="h-1.5 shrink-0 cursor-ns-resize border-t border-border/60 hover:bg-primary/40 transition-colors" onMouseDown={startWbResize} title={t('ncp.wbResize')} />
+            <div className="flex-1 min-h-0 bg-card flex flex-col">
+              <div className="flex items-center gap-2 px-3 py-1.5 bg-muted/40 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground shrink-0">
+                <History className="size-3.5" />
+                {t('ncp.workedBefore')}
+                {wbCall && <span className="font-mono text-foreground normal-case">{wbCall}</span>}
+                {wb && wb.count > 0 && (
+                  <span className="ml-auto font-normal normal-case text-foreground">
+                    {wb.count} QSO · {t('ncp.wbFirst')} {String(wb.first ?? '').slice(0, 10)} · {t('ncp.wbLast')} {String(wb.last ?? '').slice(0, 10)}
+                    {wb.dxcc_name ? ` · ${wb.dxcc_name} (${wb.dxcc_count})` : ''}
+                  </span>
+                )}
+              </div>
+              <div className="flex-1 min-h-0 flex flex-col">
+                {!wbCall ? (
+                  <div className="flex h-full items-center justify-center text-xs text-muted-foreground">{t('ncp.wbHint')}</div>
+                ) : wbBusy ? (
+                  <div className="flex h-full items-center justify-center text-xs text-muted-foreground">…</div>
+                ) : !wb || wb.count === 0 ? (
+                  <div className="flex h-full items-center justify-center text-xs text-muted-foreground">{t('ncp.wbNone')} {wbCall}</div>
+                ) : (
+                  <RecentQSOsGrid
+                    rows={(wb.entries ?? []) as any}
+                    total={wb.count}
+                    storageKey="net.wb"
+                    {...qsoMenuHandlers}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* NET USERS / roster (right) */}
+        <div className="flex flex-col min-h-0 w-[40%] max-w-[560px]">
+          <div className="flex items-center gap-2 px-3 py-1.5 bg-success text-success-foreground text-[11px] font-semibold uppercase tracking-wider">
+            {t('ncp.netUsersRoster')}
+            <span className="ml-auto font-normal normal-case opacity-90">{t('ncp.rosterHint')}</span>
+          </div>
+          <div ref={rosterWrap} style={{ flex: 1, minHeight: 0, position: 'relative' }}>
+            <div style={{ position: 'absolute', inset: 0 }}>
+              <AgGridReact<Station>
+                ref={rosterGrid}
+                theme={hamlogTheme}
+                rowData={rosterShown}
+                columnDefs={rosterCols}
+                defaultColDef={defaultColDef}
+                rowSelection={{ mode: 'multiRow', checkboxes: false, headerCheckbox: false, enableClickSelection: true }}
+                onGridReady={() => wireDropZones()}
+                onRowClicked={(e) => e.data && showWorkedBefore(e.data.callsign, (e.data as any).dxcc ?? 0)}
+                onRowDoubleClicked={(e) => e.data && activate(e.data.callsign)}
+                animateRows={false}
+                getRowId={(p) => String((p.data as any).callsign)}
+              />
+            </div>
+          </div>
+          <div className="px-3 py-1.5 border-t border-border/60 bg-muted/30 flex items-center gap-2">
+            <Button variant="ghost" size="sm" className="h-7 text-[11px]" disabled={!selId} onClick={openAddContact}>
+              <UserPlus className="size-3.5" /> {t('ncp.addContact')}
+            </Button>
+            <Button variant="ghost" size="sm" className="h-7 text-[11px] text-danger" disabled={!selId} onClick={removeSelectedRoster}>
+              <MinusCircle className="size-3.5" /> {t('ncp.remove')}
+            </Button>
+            {isOpen && (
+              <Button variant="ghost" size="sm" className="h-7 text-[11px] ml-auto"
+                onClick={() => { const r = rosterGrid.current?.api?.getSelectedRows?.()?.[0] as Station; if (r) activate(r.callsign); }}>
+                <PlusCircle className="size-3.5" /> {t('ncp.putOnAir')}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Full-QSO edit modal for the selected on-air draft. Save writes back to
+          the in-memory draft (NetUpdateActive); Delete cancels it (no log). */}
+      {editingDraft && (
+        <QSOEditModal
+          qso={editingDraft}
+          onSave={saveDraft}
+          onDelete={discardDraft}
+          onClose={() => setEditingDraft(null)}
+          countries={countries}
+          bands={bands}
+          modes={modes}
+        />
+      )}
+
+      {/* Add / edit contact dialog */}
+      <Dialog open={contactOpen} onOpenChange={setContactOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t('ncp.addContactTitle')}</DialogTitle>
+            <DialogDescription>{t('ncp.addContactDesc')}</DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-3 px-5 py-2">
+            <div className="flex items-end gap-2">
+              <div className="flex-1">
+                <Label className="text-[11px]">{t('ncp.callsign')}</Label>
+                <Input className="font-mono uppercase" value={contact.callsign ?? ''}
+                  onChange={(e) => setContact((c) => netctl.Station.createFrom({ ...c, callsign: e.target.value.toUpperCase() }))}
+                  onKeyDown={(e) => { if (e.key === 'Enter') lookupContact(); }} />
+              </div>
+              <Button variant="outline" size="sm" className="h-9" onClick={lookupContact} disabled={looking || !(contact.callsign ?? '').trim()}>
+                <Search className="size-3.5" /> {looking ? '…' : t('ncp.search')}
+              </Button>
+            </div>
+            <div>
+              <Label className="text-[11px]">{t('ncp.name')}</Label>
+              <Input value={contact.name ?? ''} onChange={(e) => setContact((c) => netctl.Station.createFrom({ ...c, name: e.target.value }))} />
+            </div>
+            <div>
+              <Label className="text-[11px]">QTH</Label>
+              <Input value={contact.qth ?? ''} onChange={(e) => setContact((c) => netctl.Station.createFrom({ ...c, qth: e.target.value }))} />
+            </div>
+            <div>
+              <Label className="text-[11px]">{t('ncp.country')}</Label>
+              <Input value={contact.country ?? ''} onChange={(e) => setContact((c) => netctl.Station.createFrom({ ...c, country: e.target.value }))} />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="ghost" size="sm" onClick={() => setContactOpen(false)}>{t('ncp.cancel')}</Button>
+            <Button size="sm" onClick={saveContact} disabled={!(contact.callsign ?? '').trim()}>
+              <PlusCircle className="size-3.5" /> {t('ncp.saveInNet')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

frontend/src/components/OperatingPanel.tsx

@@ -12,6 +12,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
 import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
 
 type Band = { band: string; is_default: boolean };
 type Antenna = {
@@ -38,6 +39,7 @@ type Props = {
 };
 
 export function OperatingPanel({ bands, onError }: Props) {
+  const { t } = useI18n();
   const [tree, setTree] = useState<Station[]>([]);
   const [loading, setLoading] = useState(true);
   // expanded keeps which stations show their antennas; everything open by
@@ -131,7 +133,7 @@ export function OperatingPanel({ bands, onError }: Props) {
     } catch (e: any) { onError(String(e?.message ?? e)); }
   }
   async function removeAntenna(stationId: number, antId: number) {
-    if (!confirm('Delete this antenna?')) return;
+    if (!confirm(t('op.deleteAntConfirm'))) return;
     try {
       await DeleteOperatingAntenna(antId);
       setTree((prev) => prev.map((s) =>
@@ -149,23 +151,18 @@ export function OperatingPanel({ bands, onError }: Props) {
   return (
     <div className="space-y-3">
       <div className="text-[11px] text-muted-foreground max-w-2xl leading-relaxed">
-        Define your rigs (stations) and the antennas connected to each one.
-        For every antenna, tick the bands it covers. <Star className="inline size-3 text-amber-500 fill-current align-text-bottom" /> marks
-        the default antenna for that band — when you change the band in the
-        entry strip, the matching rig + antenna auto-fill the MY_RIG and
-        MY_ANTENNA ADIF fields. Only one antenna can be the default per
-        band; setting one clears the previous default.
+        {t('op.intro1')}<Star className="inline size-3 text-warning fill-current align-text-bottom" />{t('op.intro2')}
       </div>
 
       <div className="flex gap-2">
         <Button size="sm" onClick={addStation}>
-          <Plus className="size-3.5" /> Add rig
+          <Plus className="size-3.5" /> {t('op.addRig')}
         </Button>
       </div>
 
       {tree.length === 0 ? (
         <div className="rounded-md border border-dashed border-border/70 px-4 py-8 text-center text-xs text-muted-foreground italic">
-          No rig configured yet. Click "Add rig" to get started.
+          {t('op.noRig')}
         </div>
       ) : (
         <div className="space-y-2">
@@ -212,6 +209,7 @@ function StationRow({
   onToggleExpanded, onUpdate, onDelete, onAddAntenna,
   onUpdateAntenna, onDeleteAntenna,
 }: StationRowProps) {
+  const { t } = useI18n();
   const editKey = `station:${station.id}`;
   const isEditing = editing === editKey;
   const [draft, setDraft] = useState({
@@ -242,7 +240,7 @@ function StationRow({
           type="button"
           onClick={onToggleExpanded}
           className="p-0.5 hover:bg-accent/40 rounded"
-          title={expanded ? 'Collapse' : 'Expand'}
+          title={expanded ? t('op.collapse') : t('op.expand')}
         >
           {expanded ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}
         </button>
@@ -253,12 +251,12 @@ function StationRow({
             <Input
               autoFocus
               className="h-7 text-sm flex-1"
-              placeholder="Rig name (also stamped as MY_RIG)"
+              placeholder={t('op.rigNamePh')}
               value={draft.name}
               onChange={(e) => setDraft((d) => ({ ...d, name: e.target.value }))}
               onKeyDown={(e) => { if (e.key === 'Enter') commit(); if (e.key === 'Escape') setEditing(null); }}
             />
-            <Label className="text-[11px] text-muted-foreground">Power (W)</Label>
+            <Label className="text-[11px] text-muted-foreground">{t('op.powerW')}</Label>
             <Input
               type="number"
               min={0}
@@ -269,8 +267,8 @@ function StationRow({
               onChange={(e) => setDraft((d) => ({ ...d, tx_pwr: e.target.value }))}
               onKeyDown={(e) => { if (e.key === 'Enter') commit(); if (e.key === 'Escape') setEditing(null); }}
             />
-            <Button size="sm" onClick={commit}>Save</Button>
-            <Button size="sm" variant="ghost" onClick={() => setEditing(null)}>Cancel</Button>
+            <Button size="sm" onClick={commit}>{t('btn.save')}</Button>
+            <Button size="sm" variant="ghost" onClick={() => setEditing(null)}>{t('btn.cancel')}</Button>
           </div>
         ) : (
           <>
@@ -279,13 +277,13 @@ function StationRow({
               <span className="text-[11px] text-muted-foreground font-mono">{station.tx_pwr} W</span>
             )}
             <div className="flex-1" />
-            <Button size="icon" variant="ghost" className="size-6" onClick={() => setEditing(editKey)} title="Edit">
+            <Button size="icon" variant="ghost" className="size-6" onClick={() => setEditing(editKey)} title={t('op.edit')}>
               <Edit2 className="size-3" />
             </Button>
             <Button size="sm" variant="outline" className="h-6 text-xs" onClick={onAddAntenna}>
-              <Plus className="size-3" /> Antenna
+              <Plus className="size-3" /> {t('op.antenna')}
             </Button>
-            <Button size="icon" variant="ghost" className="size-6 text-destructive hover:bg-destructive/10" onClick={onDelete} title="Delete rig">
+            <Button size="icon" variant="ghost" className="size-6 text-destructive hover:bg-destructive/10" onClick={onDelete} title={t('op.deleteRig')}>
               <Trash2 className="size-3" />
             </Button>
           </>
@@ -296,7 +294,7 @@ function StationRow({
         <div className="p-2 space-y-2">
           {(station.antennas ?? []).length === 0 ? (
             <div className="text-[11px] text-muted-foreground italic pl-6">
-              No antenna yet — click "Antenna" above to add one.
+              {t('op.noAntenna')}
             </div>
           ) : (
             (station.antennas ?? []).map((a) => (
@@ -329,6 +327,7 @@ type AntennaRowProps = {
 };
 
 function AntennaRow({ antenna, bands, editing, setEditing, onUpdate, onDelete }: AntennaRowProps) {
+  const { t } = useI18n();
   const editKey = `antenna:${antenna.id}`;
   const isEditing = editing === editKey;
   const [draft, setDraft] = useState({ name: antenna.name });
@@ -377,13 +376,13 @@ function AntennaRow({ antenna, bands, editing, setEditing, onUpdate, onDelete }:
             <Input
               autoFocus
               className="h-7 text-sm flex-1"
-              placeholder="Antenna name (also stamped as MY_ANTENNA)"
+              placeholder={t('op.antNamePh')}
               value={draft.name}
               onChange={(e) => setDraft((d) => ({ ...d, name: e.target.value }))}
               onKeyDown={(e) => { if (e.key === 'Enter') commitNames(); if (e.key === 'Escape') setEditing(null); }}
             />
-            <Button size="sm" onClick={commitNames}>Save</Button>
-            <Button size="sm" variant="ghost" onClick={() => setEditing(null)}>Cancel</Button>
+            <Button size="sm" onClick={commitNames}>{t('btn.save')}</Button>
+            <Button size="sm" variant="ghost" onClick={() => setEditing(null)}>{t('btn.cancel')}</Button>
           </div>
         ) : (
           <>
@@ -412,7 +411,7 @@ function AntennaRow({ antenna, bands, editing, setEditing, onUpdate, onDelete }:
               className={cn(
                 'flex items-center gap-1.5 px-2 py-1 rounded text-[11px] font-mono border transition-colors',
                 isDefault
-                  ? 'border-amber-400 bg-amber-50 shadow-sm'
+                  ? 'border-warning-border bg-warning-muted shadow-sm'
                   : enabled
                     ? 'border-primary/30 bg-primary/5'
                     : 'border-border/50 bg-muted/30 text-muted-foreground'
@@ -431,14 +430,14 @@ function AntennaRow({ antenna, bands, editing, setEditing, onUpdate, onDelete }:
                   className={cn(
                     'flex items-center gap-0.5 ml-1 px-1.5 py-0.5 rounded transition-colors',
                     isDefault
-                      ? 'bg-amber-400 text-white'
-                      : 'border border-dashed border-muted-foreground/40 text-muted-foreground hover:border-amber-500 hover:text-amber-700',
+                      ? 'bg-warning text-warning-foreground'
+                      : 'border border-dashed border-muted-foreground/40 text-muted-foreground hover:border-warning hover:text-warning',
                   )}
-                  title={isDefault ? 'Default antenna for this band — click to unset' : 'Click to make this antenna the default for this band'}
+                  title={isDefault ? t('op.defaultOn') : t('op.defaultOff')}
                 >
                   <Star className={cn('size-3', isDefault && 'fill-current')} />
                   <span className="text-[9px] font-bold uppercase tracking-wider">
-                    {isDefault ? 'Default' : 'Set'}
+                    {isDefault ? t('op.default') : t('op.set')}
                   </span>
                 </button>
               )}

frontend/src/components/QSLManagerModal.tsx

@@ -1,37 +1,90 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { UploadCloud, DownloadCloud, Search, Loader2, ScrollText, ListChecks } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { UploadCloud, DownloadCloud, Search, Loader2, ScrollText, ListChecks, Trees, ExternalLink } from 'lucide-react';
+import { AllCommunityModule, ModuleRegistry, type ColDef } from 'ag-grid-community';
+import { AgGridReact } from 'ag-grid-react';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import {
   Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
 } from '@/components/ui/select';
 import { cn } from '@/lib/utils';
-import { FindQSOsForUpload, UploadQSOsManual, DownloadConfirmations } from '../../wailsjs/go/main/App';
+import { FindQSOsForUpload, UploadQSOsManual, DownloadConfirmations, CancelConfirmations, SyncPOTAHunterLog, ListQSO, BulkUpdateQSL, UploadCallsign, GetSlotStats } from '../../wailsjs/go/main/App';
+import { Input } from '@/components/ui/input';
+import { RecentQSOsGrid } from '@/components/RecentQSOsGrid';
 import { EventsOn } from '../../wailsjs/runtime/runtime';
+import { useI18n } from '@/lib/i18n';
+
+ModuleRegistry.registerModules([AllCommunityModule]);
 
 type UploadRow = {
   id: number; qso_date: string; callsign: string;
   band: string; mode: string; country: string; status: string;
 };
 
+const UPLOAD_COLS: ColDef<UploadRow>[] = [
+  { field: 'qso_date', headerName: 'Date UTC', valueFormatter: (p) => fmtDate(p.value), minWidth: 150 },
+  { field: 'callsign', headerName: 'Callsign', cellClass: 'font-mono font-bold', width: 130 },
+  { field: 'band', headerName: 'Band', width: 90 },
+  { field: 'mode', headerName: 'Mode', width: 100 },
+  { field: 'country', headerName: 'Country', flex: 1, minWidth: 140 },
+  { field: 'status', headerName: 'Sent', width: 90, valueFormatter: (p) => p.value || '—' },
+];
+
 type Confirmation = {
   callsign: string; qso_date: string; band: string; mode: string; country: string;
-  new_dxcc: boolean; new_band: boolean; new_slot: boolean;
+  new_dxcc: boolean; new_band: boolean; new_mode: boolean; new_slot: boolean;
 };
 
 const SERVICES = [
   { v: 'qrz',     label: 'QRZ.com' },
   { v: 'clublog', label: 'Club Log' },
+  { v: 'hrdlog',  label: 'HRDLog.net' },
+  { v: 'eqsl',    label: 'eQSL.cc' },
   { v: 'lotw',    label: 'LoTW' },
+  { v: 'pota',    label: 'POTA hunter log' },
+  { v: 'paper',   label: 'Paper QSL' },
 ];
 
+// label holds an i18n key (resolved with t() at render time).
+const QSL_STATUSES = [
+  { v: '_', label: 'qslm.leave' },
+  { v: 'Y', label: 'qslm.yes' },
+  { v: 'N', label: 'qslm.no' },
+  { v: 'R', label: 'qslm.requested' },
+  { v: 'I', label: 'qslm.ignore' },
+];
+
+// QSL routing methods for the paper-QSL "Via" dropdown (was free text).
+const QSL_VIA_OPTIONS = [
+  { v: '_', label: 'qslm.leave' },
+  { v: 'Bureau', label: 'qslm.viaBureau' },
+  { v: 'Direct', label: 'qslm.viaDirect' },
+  { v: 'Electronic', label: 'qslm.viaElectronic' },
+];
+
+// Maps a service value → its i18n label key (only for services with
+// translatable names; brand names like QRZ.com stay as-is in SERVICES).
+const SERVICE_LABEL_KEYS: Record<string, string> = {
+  pota: 'qslm.svcPota',
+  paper: 'qslm.svcPaper',
+};
+
+type LogQSO = {
+  id: number; qso_date: string; callsign: string; band: string; mode: string; country?: string;
+  qsl_sent?: string; qsl_rcvd?: string; qsl_via?: string; qsl_sent_date?: string; qsl_rcvd_date?: string;
+};
+
+type POTAUnmatched = { activator: string; date: string; band: string; reference: string; reason: string; qso_id: number };
+type POTASync = { fetched: number; updated: number; already_tagged: number; added: number; unmatched: number; unmatched_list: POTAUnmatched[]; skipped_other_call: number; my_call: string };
+
+// label holds an i18n key.
 const SENT_STATUSES = [
-  { v: 'R', label: 'Requested' },
-  { v: 'N', label: 'No' },
-  { v: 'Q', label: 'Queued' },
-  { v: 'Y', label: 'Yes (already sent)' },
-  { v: 'I', label: 'Invalid' },
-  { v: '_', label: '— blank —' },
+  { v: 'R', label: 'qslm.sentRequested' },
+  { v: 'N', label: 'qslm.sentNo' },
+  { v: 'Q', label: 'qslm.sentQueued' },
+  { v: 'Y', label: 'qslm.sentYes' },
+  { v: 'I', label: 'qslm.sentInvalid' },
+  { v: '_', label: 'qslm.sentBlank' },
 ];
 
 function fmtDate(iso: string): string {
@@ -42,16 +95,113 @@ function fmtDate(iso: string): string {
   return `${d.getUTCFullYear()}-${p(d.getUTCMonth() + 1)}-${p(d.getUTCDate())} ${p(d.getUTCHours())}:${p(d.getUTCMinutes())}`;
 }
 
+// fmtQslDate renders a QSL/LoTW/eQSL/ClubLog date (ADIF YYYYMMDD, or an ISO
+// datetime) as YYYY-MM-DD — same shape as the QSO date, without the time.
+export function fmtQslDate(s?: string): string {
+  if (!s) return '';
+  const t = s.trim();
+  const m = t.match(/^(\d{4})(\d{2})(\d{2})/);
+  if (m) return `${m[1]}-${m[2]}-${m[3]}`;
+  const d = new Date(t);
+  if (!isNaN(d.getTime())) return d.toISOString().slice(0, 10);
+  return t;
+}
+
 // QSL Manager as an in-app tab panel: upload logged QSOs to online logbooks
 // and download confirmations, while the rest of the app stays usable.
-export function QSLManagerPanel() {
+export function QSLManagerPanel({ onEditQSO }: { onEditQSO?: (id: number) => void } = {}) {
+  const { t } = useI18n();
   const [service, setService] = useState('lotw');
+  // The callsign this profile signs/uploads/downloads as for the selected
+  // service (Force station callsign, else the profile call). Shown so the user
+  // knows WHICH of their calls a download/upload targets in a mixed-call log.
+  const [uploadCall, setUploadCall] = useState('');
+  useEffect(() => {
+    if (service === 'pota' || service === 'paper') { setUploadCall(''); return; }
+    UploadCallsign(service).then((c) => setUploadCall(c || '')).catch(() => setUploadCall(''));
+  }, [service]);
+  // Closing the QSL Manager (the tab's ×) unmounts this panel — cancel any download
+  // still running so a slow QRZ/LoTW sync doesn't keep going in the background and
+  // bleed its log into the next one.
+  useEffect(() => () => { CancelConfirmations().catch(() => {}); }, []);
+  const [potaSyncing, setPotaSyncing] = useState(false);
+  const [potaRes, setPotaRes] = useState<POTASync | null>(null);
+  const [potaErr, setPotaErr] = useState('');
+  const [potaAddMissing, setPotaAddMissing] = useState(false);
+  // Only sync hunts made under the active profile's callsign (skip XV9Q/NQ2H…).
+  const [potaOnlyMyCall, setPotaOnlyMyCall] = useState(true);
+
+  async function syncPota() {
+    setPotaSyncing(true); setPotaErr(''); setPotaRes(null);
+    try { setPotaRes((await SyncPOTAHunterLog(potaAddMissing, potaOnlyMyCall)) as any as POTASync); }
+    catch (e: any) { setPotaErr(String(e?.message ?? e)); }
+    finally { setPotaSyncing(false); }
+  }
+
+  // ── Paper QSL: search a callsign, bulk-set sent/received + via + date ──
+  const [paperCall, setPaperCall] = useState('');
+  const [paperRows, setPaperRows] = useState<LogQSO[]>([]);
+  const [paperSel, setPaperSel] = useState<Set<number>>(new Set());
+  const [paperSelAllSig, setPaperSelAllSig] = useState(0); // bump → grid selects all
+  const [paperBusy, setPaperBusy] = useState(false);
+  const [paperMsg, setPaperMsg] = useState('');
+  const [qslRcvd, setQslRcvd] = useState('N');
+  const [qslSent, setQslSent] = useState('_');
+  const [qslRcvdDate, setQslRcvdDate] = useState('');
+  const [qslSentDate, setQslSentDate] = useState('');
+  const [qslVia, setQslVia] = useState('_');
+  const [qslNotes, setQslNotes] = useState('');
+  const [qslComment, setQslComment] = useState('');
+
+  const searchPaper = useCallback(async () => {
+    const c = paperCall.trim().toUpperCase();
+    if (!c) return;
+    setPaperBusy(true); setPaperMsg('');
+    try {
+      const r: any = await ListQSO({ callsign: c, limit: 1000 } as any);
+      const list = (r ?? []) as LogQSO[];
+      setPaperRows(list);
+      setPaperSel(new Set(list.map((x) => x.id)));
+      setPaperSelAllSig((n) => n + 1); // tell the grid to select every row
+
+    } catch (e: any) { setPaperMsg(String(e?.message ?? e)); setPaperRows([]); }
+    finally { setPaperBusy(false); }
+  }, [paperCall]);
+
+
+  async function applyPaper() {
+    const ids = paperRows.filter((r) => paperSel.has(r.id)).map((r) => r.id);
+    if (ids.length === 0) return;
+    setPaperBusy(true); setPaperMsg('');
+    const ymd = (d: string) => d.replaceAll('-', '');
+    try {
+      const n = await BulkUpdateQSL(ids as any, {
+        sent_status: qslSent === '_' ? '' : qslSent,
+        rcvd_status: qslRcvd === '_' ? '' : qslRcvd,
+        sent_date: ymd(qslSentDate),
+        rcvd_date: ymd(qslRcvdDate),
+        via: qslVia === '_' ? '' : qslVia,
+        notes: qslNotes,
+        comment: qslComment,
+      } as any);
+      setPaperMsg(t('qslm.qsoUpdated', { n }));
+      await searchPaper();
+    } catch (e: any) { setPaperMsg(String(e?.message ?? e)); }
+    finally { setPaperBusy(false); }
+  }
   const [sent, setSent] = useState('R');
-  const [rows, setRows] = useState<UploadRow[]>([]);
-  const [selected, setSelected] = useState<Set<number>>(new Set());
+  // Full QSO rows (so the upload view uses the same rich grid as Recent QSOs).
+  const [rows, setRows] = useState<any[]>([]);
+  const [selectedCount, setSelectedCount] = useState(0);
+  const [uploadSelIds, setUploadSelIds] = useState<number[]>([]); // selected QSO ids → upload
+  const [uploadSelAllSig, setUploadSelAllSig] = useState(0);      // bump → grid selects all
   const [searching, setSearching] = useState(false);
   const [error, setError] = useState('');
   const [addNotFound, setAddNotFound] = useState(false);
+  // Download date window: 'last' = incremental since last pull, 'date' = from a
+  // chosen date, 'all' = everything.
+  const [sinceMode, setSinceMode] = useState<'last' | 'date' | 'all'>('last');
+  const [sinceDate, setSinceDate] = useState('');
 
   const [viewMode, setViewMode] = useState<'upload' | 'confirmations'>('upload');
   const [confirmations, setConfirmations] = useState<Confirmation[]>([]);
@@ -62,28 +212,42 @@ export function QSLManagerPanel() {
   const [busy, setBusy] = useState(false);
   const [logAction, setLogAction] = useState<'upload' | 'download'>('upload');
 
+  // Worked/confirmed tallies. Slots are counted by mode CLASS (PH/CW/DIGI) — the
+  // raw-mode granularity (RTTY ≠ FT8) stays only in the cluster/matrix new-slot flag.
+  const [stats, setStats] = useState<any>(
+    { slots_worked: 0, slots_confirmed: 0, dxcc_worked: 0, dxcc_confirmed: 0, ph_worked: 0, ph_confirmed: 0, cw_worked: 0, cw_confirmed: 0, dig_worked: 0, dig_confirmed: 0 });
+  const refreshCounts = useCallback(() => { GetSlotStats().then((c: any) => setStats(c)).catch(() => {}); }, []);
+  useEffect(() => { refreshCounts(); }, [refreshCounts]);
+
   useEffect(() => {
     const offLog = EventsOn('qslmgr:log', (line: string) => setLogLines((p) => [...p, line]));
     const offDone = EventsOn('qslmgr:done', (d: any) => {
       setLogLines((p) => [...p, `— Done: ${d?.uploaded ?? 0}/${d?.total ?? 0} —`]);
       setBusy(false);
+      refreshCounts(); // a download may have added confirmations
     });
     const offConf = EventsOn('qslmgr:confirmations', (list: any) => {
       setConfirmations((list ?? []) as Confirmation[]);
       setViewMode('confirmations');
+      refreshCounts();
     });
     return () => { offLog(); offDone(); offConf(); };
-  }, []);
+  }, [refreshCounts]);
 
-  const selectedCount = selected.size;
-  const allSelected = rows.length > 0 && selected.size === rows.length;
   const serviceLabel = useMemo(() => SERVICES.find((s) => s.v === service)?.label ?? service, [service]);
 
+  // Grid selection → just track the count; ids are read from the grid at upload.
+  function onUploadRowSelected(ids: number[]) {
+    setUploadSelIds(ids);
+    setSelectedCount(ids.length);
+  }
+
   const shownConfs = useMemo(() => confirmations.filter((c) => {
     switch (confFilter) {
-      case 'new':  return c.new_dxcc || c.new_band || c.new_slot;
+      case 'new':  return c.new_dxcc || c.new_band || c.new_mode || c.new_slot;
       case 'dxcc': return c.new_dxcc;
       case 'band': return c.new_band;
+      case 'mode': return c.new_mode;
       case 'slot': return c.new_slot;
       default:     return true;
     }
@@ -94,33 +258,24 @@ export function QSLManagerPanel() {
     setError('');
     try {
       const r: any = await FindQSOsForUpload(service, sent === '_' ? '' : sent);
-      const list = (r ?? []) as UploadRow[];
+      const list = (r ?? []) as any[];
       setRows(list);
-      setSelected(new Set(list.map((x) => x.id)));
+      setUploadSelIds(list.map((x) => x.id));
+      setSelectedCount(list.length);
+      setUploadSelAllSig((n) => n + 1); // pre-select everything once the grid renders
       setViewMode('upload');
       setShowLog(false);
     } catch (e: any) {
       setError(String(e?.message ?? e));
       setRows([]);
-      setSelected(new Set());
+      setSelectedCount(0);
     } finally {
       setSearching(false);
     }
   }, [service, sent]);
 
-  function toggle(id: number) {
-    setSelected((s) => {
-      const n = new Set(s);
-      if (n.has(id)) n.delete(id); else n.add(id);
-      return n;
-    });
-  }
-  function toggleAll() {
-    setSelected(allSelected ? new Set() : new Set(rows.map((r) => r.id)));
-  }
-
   async function upload() {
-    const ids = rows.filter((r) => selected.has(r.id)).map((r) => r.id);
+    const ids = uploadSelIds;
     if (ids.length === 0) return;
     setLogLines([]); setBusy(true); setLogAction('upload'); setShowLog(true);
     try { await UploadQSOsManual(service, ids); }
@@ -128,8 +283,13 @@ export function QSLManagerPanel() {
   }
 
   async function download() {
+    // Resolve the date window into the backend's `since` argument:
+    //   'all'  → ""           (everything)
+    //   'last' → "last"       (incremental since last successful pull)
+    //   'date' → "YYYY-MM-DD" (the chosen date; falls back to all if empty)
+    const since = sinceMode === 'last' ? 'last' : sinceMode === 'date' ? sinceDate.trim() : '';
     setLogLines([]); setBusy(true); setLogAction('download'); setShowLog(true);
-    try { await DownloadConfirmations(service, addNotFound); }
+    try { await DownloadConfirmations(service, addNotFound, since); }
     catch (e: any) { setLogLines((p) => [...p, 'Error: ' + String(e?.message ?? e)]); setBusy(false); }
   }
 
@@ -143,79 +303,216 @@ export function QSLManagerPanel() {
       {/* Search toolbar */}
       <div className="flex items-end gap-3 px-3 py-2 border-b border-border bg-muted/20 shrink-0">
         <div className="flex flex-col gap-1">
-          <label className="text-[10px] uppercase tracking-wider text-muted-foreground">Service</label>
+          <label className="text-[10px] uppercase tracking-wider text-muted-foreground">{t('qslm.service')}</label>
           <Select value={service} onValueChange={setService}>
             <SelectTrigger className="h-8 w-36"><SelectValue /></SelectTrigger>
-            <SelectContent>{SERVICES.map((s) => <SelectItem key={s.v} value={s.v}>{s.label}</SelectItem>)}</SelectContent>
+            <SelectContent>{[...SERVICES].sort((a, b) => a.label.localeCompare(b.label)).map((s) => <SelectItem key={s.v} value={s.v}>{SERVICE_LABEL_KEYS[s.v] ? t(SERVICE_LABEL_KEYS[s.v]) : s.label}</SelectItem>)}</SelectContent>
           </Select>
         </div>
+        {uploadCall && (
           <div className="flex flex-col gap-1">
-          <label className="text-[10px] uppercase tracking-wider text-muted-foreground">Sent status</label>
+            <label className="text-[10px] uppercase tracking-wider text-muted-foreground">{t('qslm.callsign')}</label>
+            <span
+              className="h-8 inline-flex items-center rounded border border-border bg-muted/40 px-2 font-mono text-sm font-semibold"
+              title={t('qslm.callsignScopeTitle')}
+            >
+              {uploadCall}
+            </span>
+          </div>
+        )}
+        {service === 'pota' ? (
+          <>
+            <Button size="sm" className="h-8" onClick={syncPota} disabled={potaSyncing}>
+              {potaSyncing ? <Loader2 className="size-3.5 animate-spin" /> : <Trees className="size-3.5" />}
+              {t('qslm.syncHunterLog')}
+            </Button>
+            <label className="flex items-center gap-1.5 text-[11px] text-muted-foreground cursor-pointer self-center" title={t('qslm.onlyMyCallTitle')}>
+              <Checkbox checked={potaOnlyMyCall} onCheckedChange={(c) => setPotaOnlyMyCall(!!c)} />
+              {t('qslm.onlyMyCall')}
+            </label>
+            <label className="flex items-center gap-1.5 text-[11px] text-muted-foreground cursor-pointer self-center" title={t('qslm.addMissingTitle')}>
+              <Checkbox checked={potaAddMissing} onCheckedChange={(c) => setPotaAddMissing(!!c)} />
+              {t('qslm.addMissing')}
+            </label>
+            <span className="text-[11px] text-muted-foreground self-center">{t('qslm.potaToken')}</span>
+          </>
+        ) : service === 'paper' ? (
+          <>
+            <div className="flex flex-col gap-1">
+              <label className="text-[10px] uppercase tracking-wider text-muted-foreground">{t('qslm.callsign')}</label>
+              <Input className="h-8 w-40 font-mono uppercase" value={paperCall}
+                onChange={(e) => setPaperCall(e.target.value)}
+                onKeyDown={(e) => { if (e.key === 'Enter') searchPaper(); }}
+                placeholder={t('qslm.callsignPlaceholder')} />
+            </div>
+            <Button size="sm" className="h-8" onClick={searchPaper} disabled={paperBusy || !paperCall.trim()}>
+              {paperBusy ? <Loader2 className="size-3.5 animate-spin" /> : <Search className="size-3.5" />}
+              {t('qslm.search')}
+            </Button>
+            <span className="text-[11px] text-muted-foreground self-center">{t('qslm.paperHint')}</span>
+          </>
+        ) : (
+          <>
+            <div className="flex flex-col gap-1">
+              <label className="text-[10px] uppercase tracking-wider text-muted-foreground">{t('qslm.sentStatus')}</label>
               <Select value={sent} onValueChange={setSent}>
                 <SelectTrigger className="h-8 w-44"><SelectValue /></SelectTrigger>
-            <SelectContent>{SENT_STATUSES.map((s) => <SelectItem key={s.v} value={s.v}>{s.label}</SelectItem>)}</SelectContent>
+                <SelectContent>{SENT_STATUSES.map((s) => <SelectItem key={s.v} value={s.v}>{t(s.label)}</SelectItem>)}</SelectContent>
               </Select>
             </div>
             <Button size="sm" className="h-8" onClick={selectRequired} disabled={searching || busy}>
               {searching ? <Loader2 className="size-3.5 animate-spin" /> : <Search className="size-3.5" />}
-          Select required
+              {t('qslm.selectRequired')}
             </Button>
+          </>
+        )}
         <div className="flex-1" />
+        {/* Worked / confirmed tallies. Slots by mode class (PH/CW/DIGI), with the
+            per-class breakdown so the totals are checkable. */}
+        <div className="self-center flex items-center gap-3 text-[11px] font-mono" title={t('qslm.countsTip')}>
+          <span className="flex items-center gap-1">
+            <span className="text-muted-foreground uppercase text-[9px] tracking-wider">{t('qslm.slots')}</span>
+            <span className="font-semibold">{stats.slots_worked}</span>
+            <span className="text-muted-foreground">/</span>
+            <span className="text-success font-semibold">{stats.slots_confirmed}</span>
+          </span>
+          <span className="flex items-center gap-1">
+            <span className="text-muted-foreground uppercase text-[9px] tracking-wider">DXCC</span>
+            <span className="font-semibold">{stats.dxcc_worked}</span>
+            <span className="text-muted-foreground">/</span>
+            <span className="text-success font-semibold">{stats.dxcc_confirmed}</span>
+          </span>
+        </div>
+        {service === 'pota' && potaRes && (
+          <span className="text-xs text-muted-foreground">
+            {t('qslm.potaSummaryShort', { updated: potaRes.updated, added: potaRes.added, already: potaRes.already_tagged, unmatched: potaRes.unmatched })}{potaRes.skipped_other_call > 0 ? t('qslm.potaOtherCall', { n: potaRes.skipped_other_call }) : ''} / {potaRes.fetched}
+          </span>
+        )}
+        {service === 'paper' && paperRows.length > 0 && (
+          <span className="text-xs text-muted-foreground">{t('qslm.paperCount', { total: paperRows.length, selected: paperSel.size })}</span>
+        )}
         {!showLog && viewMode === 'confirmations' && (
           <div className="flex flex-col gap-1">
-            <label className="text-[10px] uppercase tracking-wider text-muted-foreground">Filter</label>
+            <label className="text-[10px] uppercase tracking-wider text-muted-foreground">{t('qslm.filter')}</label>
             <Select value={confFilter} onValueChange={setConfFilter}>
               <SelectTrigger className="h-8 w-36"><SelectValue /></SelectTrigger>
               <SelectContent>
-                <SelectItem value="all">All</SelectItem>
-                <SelectItem value="new">New (any)</SelectItem>
-                <SelectItem value="dxcc">New DXCC</SelectItem>
-                <SelectItem value="band">New band</SelectItem>
-                <SelectItem value="slot">New slot</SelectItem>
+                <SelectItem value="all">{t('qslm.filterAll')}</SelectItem>
+                <SelectItem value="new">{t('qslm.filterNew')}</SelectItem>
+                <SelectItem value="dxcc">{t('qslm.filterNewDxcc')}</SelectItem>
+                <SelectItem value="band">{t('qslm.filterNewBand')}</SelectItem>
+                <SelectItem value="mode">{t('qslm.filterNewMode')}</SelectItem>
+                <SelectItem value="slot">{t('qslm.filterNewSlot')}</SelectItem>
               </SelectContent>
             </Select>
           </div>
         )}
         {logLines.length > 0 && (
           <Button variant="ghost" size="sm" className="h-8" onClick={() => (showLog ? viewResults() : setShowLog(true))}>
-            {showLog ? <><ListChecks className="size-3.5" /> Results</> : <><ScrollText className="size-3.5" /> Log</>}
+            {showLog ? <><ListChecks className="size-3.5" /> {t('qslm.results')}</> : <><ScrollText className="size-3.5" /> {t('qslm.log')}</>}
           </Button>
         )}
         <span className="text-xs text-muted-foreground">
           {viewMode === 'confirmations'
-            ? `${shownConfs.length} / ${confirmations.length} confirmation(s)`
-            : `${rows.length} found · ${selectedCount} selected`}
+            ? t('qslm.confCount', { shown: shownConfs.length, total: confirmations.length })
+            : t('qslm.foundCount', { found: rows.length, selected: selectedCount })}
         </span>
       </div>
 
       {/* Content: log OR results grid */}
       <div className="flex-1 overflow-auto px-3 py-2 min-h-0">
-        {error && <div className="text-xs text-rose-700 mb-2">{error}</div>}
+        {error && <div className="text-xs text-danger mb-2">{error}</div>}
 
-        {showLog ? (
+        {service === 'paper' ? (
+          paperRows.length === 0 ? (
+            <div className="text-sm text-muted-foreground py-10 text-center">{t('qslm.paperEmpty')}</div>
+          ) : (
+            // Same grid as Recent QSOs (full columns + column picker). Selection
+            // drives which QSOs the apply-form below updates; a search selects all.
+            <div className="flex flex-col h-full min-h-0 -mx-3 -my-2">
+              <RecentQSOsGrid
+                // Its OWN column layout. Without a storageKey this fell back to
+                // the main log's key, so every resize or hidden column here
+                // silently rewrote the Recent QSOs layout, and vice versa.
+                storageKey="qslmgr.paper"
+                rows={paperRows as any}
+                total={paperRows.length}
+                selectAllSignal={paperSelAllSig}
+                onRowSelected={(ids) => setPaperSel(new Set(ids))}
+              />
+            </div>
+          )
+        ) : service === 'pota' ? (
+          <div className="space-y-3">
+            {potaErr && <div className="text-xs rounded-md px-3 py-2 border border-destructive/30 bg-destructive/10 text-destructive">{potaErr}</div>}
+            {!potaRes && !potaErr && !potaSyncing && (
+              <div className="text-sm text-muted-foreground py-10 text-center">{t('qslm.potaEmpty')}</div>
+            )}
+            {potaSyncing && <div className="text-sm text-muted-foreground py-10 text-center flex items-center justify-center gap-2"><Loader2 className="size-4 animate-spin" /> {t('qslm.potaSyncing')}</div>}
+            {potaRes && (
+              <>
+                <div className="text-xs rounded-md px-3 py-2 border border-success-border bg-success-muted text-success-muted-foreground">
+                  {t('qslm.potaSummary', { updated: potaRes.updated, added: potaRes.added, already: potaRes.already_tagged, unmatched: potaRes.unmatched, fetched: potaRes.fetched })}
+                  {potaRes.skipped_other_call > 0 && (
+                    <>{t('qslm.potaSkipped', { n: potaRes.skipped_other_call })}{potaRes.my_call ? t('qslm.potaKeptOnly', { call: potaRes.my_call }) : ''}.</>
+                  )}
+                  {' '}{t('qslm.potaRescan')}
+                </div>
+                {potaRes.unmatched_list?.length > 0 && (
+                  <table className="w-full text-xs border-collapse">
+                    <thead className="sticky top-0 bg-card">
+                      <tr className="text-left text-muted-foreground border-b border-border">
+                        <th className="py-1.5 px-2">{t('qslm.thActivator')}</th><th className="py-1.5 px-2">{t('qslm.thDateUtc')}</th>
+                        <th className="py-1.5 px-2">{t('qslm.thBand')}</th><th className="py-1.5 px-2">{t('qslm.thPark')}</th>
+                        <th className="py-1.5 px-2">{t('qslm.thWhyUnmatched')}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {potaRes.unmatched_list.map((u, i) => (
+                        <tr key={i}
+                          className={cn('border-b border-border/40', u.qso_id > 0 && 'cursor-pointer hover:bg-accent/30')}
+                          onClick={() => u.qso_id > 0 && onEditQSO?.(u.qso_id)}
+                          title={u.qso_id > 0 ? t('qslm.openToFix') : ''}>
+                          <td className="py-1 px-2 font-mono font-bold">{u.activator}</td>
+                          <td className="py-1 px-2 font-mono">{u.date}</td>
+                          <td className="py-1 px-2">{u.band}</td>
+                          <td className="py-1 px-2 font-mono">{u.reference}</td>
+                          <td className="py-1 px-2 text-muted-foreground">
+                            {u.reason}
+                            {u.qso_id > 0 && <ExternalLink className="inline size-3 ml-1 opacity-60" />}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                )}
+              </>
+            )}
+          </div>
+        ) : showLog ? (
           <div className="font-mono text-[11px] space-y-0.5 py-1">
             {logLines.length === 0 ? (
-              <div className="text-muted-foreground flex items-center gap-2"><Loader2 className="size-3 animate-spin" /> starting…</div>
+              <div className="text-muted-foreground flex items-center gap-2"><Loader2 className="size-3 animate-spin" /> {t('qslm.starting')}</div>
             ) : logLines.map((l, i) => (
               <div key={i} className={cn(
-                /FAIL|failed|error/i.test(l) ? 'text-rose-700'
-                  : /\bOK\b|UPDATED|ADDED|uploaded/i.test(l) ? 'text-emerald-700'
+                /FAIL|failed|error/i.test(l) ? 'text-danger'
+                  : /\bOK\b|UPDATED|ADDED|uploaded/i.test(l) ? 'text-success'
                   : 'text-foreground/90')}>{l}</div>
             ))}
-            {busy && <div className="text-muted-foreground flex items-center gap-2 pt-1"><Loader2 className="size-3 animate-spin" /> working…</div>}
+            {busy && <div className="text-muted-foreground flex items-center gap-2 pt-1"><Loader2 className="size-3 animate-spin" /> {t('qslm.working')}</div>}
           </div>
         ) : viewMode === 'confirmations' ? (
           shownConfs.length === 0 ? (
             <div className="text-sm text-muted-foreground py-10 text-center">
-              {confirmations.length === 0 ? 'No new confirmations.' : 'No confirmations match this filter.'}
+              {confirmations.length === 0 ? t('qslm.noNewConf') : t('qslm.noConfMatch')}
             </div>
           ) : (
             <table className="w-full text-xs border-collapse">
               <thead className="sticky top-0 bg-card">
                 <tr className="text-left text-muted-foreground border-b border-border">
-                  <th className="py-1.5 px-2">Date UTC</th><th className="py-1.5 px-2">Callsign</th>
-                  <th className="py-1.5 px-2">Band</th><th className="py-1.5 px-2">Mode</th>
-                  <th className="py-1.5 px-2">Country</th><th className="py-1.5 px-2">New?</th>
+                  <th className="py-1.5 px-2">{t('qslm.thDateUtc')}</th><th className="py-1.5 px-2">{t('qslm.thCallsign')}</th>
+                  <th className="py-1.5 px-2">{t('qslm.thBand')}</th><th className="py-1.5 px-2">{t('qslm.thMode')}</th>
+                  <th className="py-1.5 px-2">{t('qslm.thCountry')}</th><th className="py-1.5 px-2">{t('qslm.thNew')}</th>
                 </tr>
               </thead>
               <tbody>
@@ -227,9 +524,10 @@ export function QSLManagerPanel() {
                     <td className="py-1 px-2">{c.mode}</td>
                     <td className="py-1 px-2 text-muted-foreground">{c.country}</td>
                     <td className="py-1 px-2">
-                      {c.new_dxcc ? <span className="inline-block px-1.5 py-px rounded text-[9px] font-bold bg-rose-100 text-rose-800 border border-rose-300">NEW DXCC</span>
-                        : c.new_band ? <span className="inline-block px-1.5 py-px rounded text-[9px] font-bold bg-amber-100 text-amber-800 border border-amber-300">NEW BAND</span>
-                        : c.new_slot ? <span className="inline-block px-1.5 py-px rounded text-[9px] font-bold bg-yellow-100 text-yellow-800 border border-yellow-300">NEW SLOT</span>
+                      {c.new_dxcc ? <span className="inline-block px-1.5 py-px rounded text-[9px] font-bold bg-danger-muted text-danger-muted-foreground border border-danger-border">{t('qslm.newDxcc')}</span>
+                        : c.new_band ? <span className="inline-block px-1.5 py-px rounded text-[9px] font-bold bg-warning-muted text-warning-muted-foreground border border-warning-border">{t('qslm.newBand')}</span>
+                        : c.new_mode ? <span className="inline-block px-1.5 py-px rounded text-[9px] font-bold bg-info-muted text-info-muted-foreground border border-info-border">{t('qslm.newMode')}</span>
+                        : c.new_slot ? <span className="inline-block px-1.5 py-px rounded text-[9px] font-bold bg-caution-muted text-caution-muted-foreground border border-caution-border">{t('qslm.newSlot')}</span>
                         : <span className="text-muted-foreground/50">—</span>}
                     </td>
                   </tr>
@@ -238,54 +536,104 @@ export function QSLManagerPanel() {
             </table>
           )
         ) : rows.length === 0 ? (
-          <div className="text-sm text-muted-foreground py-10 text-center">Pick a service + sent status, then “Select required”.</div>
+          <div className="text-sm text-muted-foreground py-10 text-center">{t('qslm.uploadEmpty')}</div>
         ) : (
-          <table className="w-full text-xs border-collapse">
-            <thead className="sticky top-0 bg-card">
-              <tr className="text-left text-muted-foreground border-b border-border">
-                <th className="py-1.5 px-2 w-8"><Checkbox checked={allSelected} onCheckedChange={toggleAll} /></th>
-                <th className="py-1.5 px-2">Date UTC</th><th className="py-1.5 px-2">Callsign</th>
-                <th className="py-1.5 px-2">Band</th><th className="py-1.5 px-2">Mode</th>
-                <th className="py-1.5 px-2">Country</th><th className="py-1.5 px-2">Sent</th>
-              </tr>
-            </thead>
-            <tbody>
-              {rows.map((r) => (
-                <tr key={r.id}
-                  className={cn('border-b border-border/40 cursor-pointer hover:bg-accent/30', selected.has(r.id) && 'bg-primary/5')}
-                  onClick={() => toggle(r.id)}>
-                  <td className="py-1 px-2" onClick={(e) => e.stopPropagation()}>
-                    <Checkbox checked={selected.has(r.id)} onCheckedChange={() => toggle(r.id)} />
-                  </td>
-                  <td className="py-1 px-2 font-mono">{fmtDate(r.qso_date)}</td>
-                  <td className="py-1 px-2 font-mono font-bold">{r.callsign}</td>
-                  <td className="py-1 px-2">{r.band}</td>
-                  <td className="py-1 px-2">{r.mode}</td>
-                  <td className="py-1 px-2 text-muted-foreground">{r.country}</td>
-                  <td className="py-1 px-2 font-mono">{r.status || '—'}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+          <div className="flex flex-col h-full min-h-0 -mx-3 -my-2">
+            <RecentQSOsGrid
+              storageKey="qslmgr.upload"
+              rows={rows as any}
+              total={rows.length}
+              selectAllSignal={uploadSelAllSig}
+              onRowSelected={onUploadRowSelected}
+            />
+          </div>
         )}
       </div>
 
-      {/* Action bar */}
-      <div className="flex items-center justify-between gap-2 px-3 py-2 border-t border-border bg-muted/20 shrink-0">
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm" onClick={download} disabled={busy}
-            title="Fetch confirmations from the service and update received status">
-            <DownloadCloud className="size-3.5" /> Download confirmations
+      {/* Paper-QSL apply form */}
+      {service === 'paper' && (
+        <div className="flex items-end flex-wrap gap-3 px-3 py-2 border-t border-border bg-muted/20 shrink-0">
+          <div className="flex flex-col gap-1">
+            <label className="text-[10px] uppercase tracking-wider text-muted-foreground">{t('qslm.qslReceived')}</label>
+            <div className="flex gap-1.5">
+              <Select value={qslRcvd} onValueChange={setQslRcvd}>
+                <SelectTrigger className="h-8 w-28"><SelectValue /></SelectTrigger>
+                <SelectContent>{QSL_STATUSES.map((s) => <SelectItem key={s.v} value={s.v}>{t(s.label)}</SelectItem>)}</SelectContent>
+              </Select>
+              <Input type="date" className="h-8 w-36" value={qslRcvdDate} onChange={(e) => setQslRcvdDate(e.target.value)} title={t('qslm.qslRcvdDateTitle')} />
+            </div>
+          </div>
+          <div className="flex flex-col gap-1">
+            <label className="text-[10px] uppercase tracking-wider text-muted-foreground">{t('qslm.qslSent')}</label>
+            <div className="flex gap-1.5">
+              <Select value={qslSent} onValueChange={setQslSent}>
+                <SelectTrigger className="h-8 w-28"><SelectValue /></SelectTrigger>
+                <SelectContent>{QSL_STATUSES.map((s) => <SelectItem key={s.v} value={s.v}>{t(s.label)}</SelectItem>)}</SelectContent>
+              </Select>
+              <Input type="date" className="h-8 w-36" value={qslSentDate} onChange={(e) => setQslSentDate(e.target.value)} title={t('qslm.qslSentDateTitle')} />
+            </div>
+          </div>
+          <div className="flex flex-col gap-1">
+            <label className="text-[10px] uppercase tracking-wider text-muted-foreground">{t('qslm.via')}</label>
+            <Select value={qslVia} onValueChange={setQslVia}>
+              <SelectTrigger className="h-8 w-32"><SelectValue /></SelectTrigger>
+              <SelectContent>{QSL_VIA_OPTIONS.map((o) => <SelectItem key={o.v} value={o.v}>{t(o.label)}</SelectItem>)}</SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <label className="text-[10px] uppercase tracking-wider text-muted-foreground">{t('qslm.notes')}</label>
+            <Input className="h-8 w-40" value={qslNotes} onChange={(e) => setQslNotes(e.target.value)} placeholder={t('qslm.notesPlaceholder')} />
+          </div>
+          <div className="flex flex-col gap-1">
+            <label className="text-[10px] uppercase tracking-wider text-muted-foreground">{t('qslm.comment')}</label>
+            <Input className="h-8 w-40" value={qslComment} onChange={(e) => setQslComment(e.target.value)} placeholder={t('qslm.commentPlaceholder')} />
+          </div>
+          <div className="flex-1" />
+          {paperMsg && <span className="text-[11px] text-muted-foreground self-center">{paperMsg}</span>}
+          <Button size="sm" onClick={applyPaper} disabled={paperBusy || paperSel.size === 0}>
+            {t('qslm.applyToSelected', { n: paperSel.size })}
           </Button>
-          <label className="flex items-center gap-1.5 text-[11px] text-muted-foreground cursor-pointer" title="Insert confirmed QSOs that aren't in your log yet">
+        </div>
+      )}
+
+      {/* Action bar (upload/download — not for POTA / Paper QSL) */}
+      {service !== 'pota' && service !== 'paper' && (
+      <div className="flex items-center justify-between gap-2 px-3 py-2 border-t border-border bg-muted/20 shrink-0">
+        <div className="flex items-center gap-2 flex-wrap">
+          <Button variant="outline" size="sm" onClick={download} disabled={busy}
+            title={t('qslm.downloadTitle')}>
+            <DownloadCloud className="size-3.5" /> {t('qslm.downloadConf')}
+          </Button>
+          {/* Date window */}
+          <Select value={sinceMode} onValueChange={(v) => setSinceMode(v as any)}>
+            <SelectTrigger className="h-8 w-[150px] text-xs" title={t('qslm.downloadRangeTitle')}>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="last">{t('qslm.sinceLast')}</SelectItem>
+              <SelectItem value="date">{t('qslm.sinceDate')}</SelectItem>
+              <SelectItem value="all">{t('qslm.sinceAll')}</SelectItem>
+            </SelectContent>
+          </Select>
+          {sinceMode === 'date' && (
+            <input
+              type="date"
+              value={sinceDate}
+              onChange={(e) => setSinceDate(e.target.value)}
+              className="h-8 rounded-md border border-input bg-background px-2 text-xs"
+              title={service === 'qrz' ? t('qslm.sinceDateTitleQrz') : t('qslm.sinceDateTitleLotw')}
+            />
+          )}
+          <label className="flex items-center gap-1.5 text-[11px] text-muted-foreground cursor-pointer" title={t('qslm.addNotFoundTitle')}>
             <Checkbox checked={addNotFound} onCheckedChange={(c) => setAddNotFound(!!c)} />
-            Add not-found
+            {t('qslm.addNotFound')}
           </label>
         </div>
         <Button size="sm" onClick={upload} disabled={selectedCount === 0 || busy}>
-          <UploadCloud className="size-3.5" /> Upload {selectedCount} to {serviceLabel}
+          <UploadCloud className="size-3.5" /> {t('qslm.uploadTo', { n: selectedCount, service: serviceLabel })}
         </Button>
       </div>
+      )}
     </div>
   );
 }

frontend/src/components/QSOContextMenu.tsx

@@ -0,0 +1,240 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Globe2, RefreshCw, Upload, BadgeCheck, Mail, FileDown, PencilLine, Trash2 } from 'lucide-react';
+import { useI18n } from '@/lib/i18n';
+
+export type QSOMenuState = { x: number; y: number; ids: number[] } | null;
+
+type Props = {
+  menu: QSOMenuState;
+  onClose: () => void;
+  onUpdateFromCty: (ids: number[]) => void;
+  onUpdateFromQRZ: (ids: number[]) => void;
+  onUpdateFromClublog?: (ids: number[]) => void;
+  onSendTo?: (service: string, ids: number[]) => void;
+  onSendRecording?: (ids: number[]) => void;
+  onSendEQSL?: (ids: number[]) => void;
+  onBulkEdit?: (ids: number[]) => void;
+  onExportSelected?: (ids: number[]) => void;
+  onExportSelectedFields?: (ids: number[]) => void;
+  onExportFiltered?: () => void;
+  onExportCabrilloSelected?: (ids: number[]) => void;
+  onExportCabrilloFiltered?: () => void;
+  onDelete?: (ids: number[]) => void;
+};
+
+const UPLOAD_TARGETS: { service: string; name: string }[] = [
+  { service: 'qrz', name: 'QRZ.com' },
+  { service: 'clublog', name: 'Club Log' },
+  { service: 'hrdlog', name: 'HRDLog.net' },
+  { service: 'eqsl', name: 'eQSL.cc' },
+  { service: 'lotw', name: 'LoTW' },
+];
+
+// Lightweight right-click menu for the QSO grids. AG Grid's native context
+// menu is an Enterprise feature, so this is a plain floating menu driven by
+// onCellContextMenu. Stays open until the user clicks outside, presses Escape,
+// or picks a command. (We deliberately do NOT close on scroll/resize: the QSO
+// list auto-refreshes and AG Grid fires internal scroll events on refresh,
+// which used to dismiss the menu the instant it appeared.)
+export function QSOContextMenu({ menu, onClose, onUpdateFromCty, onUpdateFromQRZ, onUpdateFromClublog, onSendTo, onSendRecording, onSendEQSL, onBulkEdit, onExportSelected, onExportSelectedFields, onExportFiltered, onExportCabrilloSelected, onExportCabrilloFiltered, onDelete }: Props) {
+  const { t } = useI18n();
+  const boxRef = useRef<HTMLDivElement>(null);
+  // Starts at the cursor; the layout effect corrects it once the real size is
+  // known. Rendering at the cursor first avoids a visible jump for the common
+  // case where it already fits.
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  useEffect(() => { if (menu) setPos({ x: menu.x, y: menu.y }); }, [menu]);
+  useEffect(() => {
+    if (!menu) return;
+    const close = () => onClose();
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('mousedown', close);
+    window.addEventListener('keydown', onKey);
+    return () => {
+      window.removeEventListener('mousedown', close);
+      window.removeEventListener('keydown', onKey);
+    };
+  }, [menu, onClose]);
+
+  // Position AFTER measuring.
+  //
+  // The menu used to be clamped against a guessed height — 230 px when the
+  // upload submenu was present, 110 otherwise. It is far taller than that with
+  // a selection, so right-clicking near the bottom of the window cut half the
+  // entries off. Its height also depends on which actions the caller passes, so
+  // no constant can be right for long.
+  //
+  // Measured instead: if it does not fit below the cursor it is placed above,
+  // and failing that pinned to the top with its own scrollbar.
+  useLayoutEffect(() => {
+    if (!menu || !boxRef.current) return;
+    const r = boxRef.current.getBoundingClientRect();
+    const pad = 6;
+    let x = menu.x;
+    let y = menu.y;
+    if (x + r.width > window.innerWidth - pad) {
+      x = Math.max(pad, window.innerWidth - r.width - pad);
+    }
+    if (y + r.height > window.innerHeight - pad) {
+      // Above the cursor, if there is room there.
+      y = menu.y - r.height >= pad ? menu.y - r.height : Math.max(pad, window.innerHeight - r.height - pad);
+    }
+    setPos({ x, y });
+  }, [menu, onSendTo]);
+
+  if (!menu) return null;
+  const n = menu.ids.length;
+
+  return (
+    <div
+      ref={boxRef}
+      className="fixed z-[200] min-w-[240px] max-h-[85vh] overflow-y-auto rounded-md border border-border bg-popover shadow-lg py-1 text-sm"
+      style={{ left: pos.x, top: pos.y }}
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      <div className="px-3 py-1 text-[11px] uppercase tracking-wider text-muted-foreground">
+        {t('qctx.selected', { n })}
+      </div>
+      <button
+        className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
+        onClick={() => { onUpdateFromCty(menu.ids); onClose(); }}
+      >
+        <Globe2 className="size-4 text-primary" />
+        <span>{t('qctx.fixCountry')}</span>
+      </button>
+      <button
+        className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
+        onClick={() => { onUpdateFromQRZ(menu.ids); onClose(); }}
+      >
+        <RefreshCw className="size-4 text-info" />
+        <span>{t('qctx.updateQrz')}</span>
+      </button>
+      {onUpdateFromClublog && (
+        <button
+          className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
+          onClick={() => { onUpdateFromClublog(menu.ids); onClose(); }}
+        >
+          <BadgeCheck className="size-4 text-info" />
+          <span>{t('qctx.updateClublog')}</span>
+        </button>
+      )}
+
+      {(onSendRecording || onSendEQSL) && (
+        <>
+          <div className="my-1 border-t border-border" />
+          {onSendEQSL && (
+            <button
+              className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
+              onClick={() => { onSendEQSL(menu.ids); onClose(); }}
+            >
+              <Mail className="size-4 text-warning" />
+              <span>{t('qctx.sendQslEmail')}</span>
+            </button>
+          )}
+          {onSendRecording && (
+            <button
+              className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
+              onClick={() => { onSendRecording(menu.ids); onClose(); }}
+            >
+              <Mail className="size-4 text-danger" />
+              <span>{t('qctx.sendRecording')}</span>
+            </button>
+          )}
+        </>
+      )}
+
+      {onBulkEdit && (
+        <>
+          <div className="my-1 border-t border-border" />
+          <button
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
+            onClick={() => { onBulkEdit(menu.ids); onClose(); }}
+          >
+            <PencilLine className="size-4 text-info" />
+            <span>{t('qctx.bulkEdit', { n })}</span>
+          </button>
+        </>
+      )}
+
+      {(onExportSelected || onExportFiltered) && (
+        <>
+          <div className="my-1 border-t border-border" />
+          {onExportSelected && (
+            <button
+              className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
+              onClick={() => { onExportSelected(menu.ids); onClose(); }}
+            >
+              <FileDown className="size-4 text-info" />
+              <span>{t('qctx.exportSelectedAdif', { n })}</span>
+            </button>
+          )}
+          {onExportSelectedFields && (
+            <button
+              className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
+              onClick={() => { onExportSelectedFields(menu.ids); onClose(); }}
+            >
+              <FileDown className="size-4 text-info" />
+              <span>{t('qctx.exportSelectedFields', { n })}</span>
+            </button>
+          )}
+          {onExportFiltered && (
+            <button
+              className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
+              onClick={() => { onExportFiltered(); onClose(); }}
+            >
+              <FileDown className="size-4 text-info" />
+              <span>{t('qctx.exportFilteredAdif')}</span>
+            </button>
+          )}
+          {onExportCabrilloSelected && (
+            <button
+              className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
+              onClick={() => { onExportCabrilloSelected(menu.ids); onClose(); }}
+            >
+              <FileDown className="size-4 text-warning" />
+              <span>{t('qctx.exportSelectedCabrillo', { n })}</span>
+            </button>
+          )}
+          {onExportCabrilloFiltered && (
+            <button
+              className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
+              onClick={() => { onExportCabrilloFiltered(); onClose(); }}
+            >
+              <FileDown className="size-4 text-warning" />
+              <span>{t('qctx.exportFilteredCabrillo')}</span>
+            </button>
+          )}
+        </>
+      )}
+
+      {onSendTo && (
+        <>
+          <div className="my-1 border-t border-border" />
+          {UPLOAD_TARGETS.map((target) => (
+            <button
+              key={target.service}
+              className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
+              onClick={() => { onSendTo(target.service, menu.ids); onClose(); }}
+            >
+              <Upload className="size-4 text-success" />
+              <span>{t('qctx.sendTo', { name: target.name })}</span>
+            </button>
+          ))}
+        </>
+      )}
+
+      {onDelete && (
+        <>
+          <div className="my-1 border-t border-border" />
+          <button
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-danger hover:bg-danger-muted"
+            onClick={() => { onDelete(menu.ids); onClose(); }}
+          >
+            <Trash2 className="size-4" />
+            <span>{t('qctx.delete', { n })}</span>
+          </button>
+        </>
+      )}
+    </div>
+  );
+}

frontend/src/components/RecentQSOsGrid.tsx

@@ -1,53 +1,88 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
-  AllCommunityModule, ModuleRegistry, themeQuartz,
+  AllCommunityModule, ModuleRegistry,
   type ColDef, type ColumnState, type GridReadyEvent, type RowDoubleClickedEvent,
 } from 'ag-grid-community';
+import { hamlogGridTheme } from '@/lib/gridTheme';
+import { qslStatusCellClass } from '@/lib/qslStatus';
+import { formatDateTimeUTC, formatDateOnly, getDateFormat, subscribeDateFormat } from '@/lib/dateFormat';
 import { AgGridReact } from 'ag-grid-react';
-import { Columns3 } from 'lucide-react';
+import { Columns3, FilterX, ListChecks } from 'lucide-react';
 import type { QSOForm } from '@/types';
+import { QSOContextMenu, type QSOMenuState } from './QSOContextMenu';
 import {
   Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
+import { loadLocal, loadRemote, saveState, seedLocal } from '@/lib/gridPrefs';
+import { useI18n } from '@/lib/i18n';
+import { gridToLatLon, pathBetweenLatLon } from '@/lib/maidenhead';
 
 // Register every Community feature once. v32+ requires explicit registration;
 // AllCommunityModule keeps it simple and pulls in sort/filter/resize/reorder/
 // virtual-scroll — everything we want out of the box for a logbook table.
 ModuleRegistry.registerModules([AllCommunityModule]);
 
-// Custom Quartz theme tuned to match OpsLog's warm palette.
-const hamlogTheme = themeQuartz.withParams({
-  fontFamily: 'inherit',
-  fontSize: 12.5,
-  backgroundColor: '#faf6ea',
-  foregroundColor: '#2a2419',
-  headerBackgroundColor: '#e8dfc9',
-  headerTextColor: '#5a4f3a',
-  headerFontWeight: 600,
-  oddRowBackgroundColor: '#f5efe0',
-  rowHoverColor: '#ecdcb4',
-  selectedRowBackgroundColor: '#f0d9a8',
-  borderColor: '#c8b994',
-  rowBorder: { color: '#d8c9a8', width: 1 },
-  columnBorder: { color: '#d8c9a8', width: 1 },
-  cellHorizontalPadding: 10,
-  rowHeight: 32,
-  headerHeight: 34,
-  spacing: 4,
-  accentColor: '#b8410c',
-  iconSize: 12,
-});
+// Shared theme (follows the app palette); this table runs slightly taller rows.
+const hamlogTheme = hamlogGridTheme.withParams({ rowHeight: 32, headerHeight: 34 });
 
 type Props = {
   rows: QSOForm[];
   total: number;
+  // Operator's CURRENT locator — fallback for the distance column on older QSOs
+  // that carry no my_grid of their own.
+  myGrid?: string;
+  // Bump this number to programmatically select every row (e.g. after a search
+  // in the QSL Manager, where the default is "all selected").
+  selectAllSignal?: number;
+  // Bump `seq` to programmatically select the single row with this id (e.g. NET
+  // Control auto-advancing to the next on-air station after logging one).
+  selectRowSignal?: { id: number; seq: number };
+  // Show a row-drag handle on the callsign column (NET Control: drag an on-air
+  // row onto the roster to log it). Pair with onGridApi so the parent can
+  // register external drop zones via api.addRowDropZone.
+  rowDragCall?: boolean;
+  // Pass-order mode (NET Control on-air queue): the ROW ORDER GIVEN IN `rows`
+  // is the display order — a pinned "#" column numbers it, and all column
+  // sorting is disabled (including saved sorts) so the queue can't be shuffled
+  // by a header click. The parent owns/reorders the array.
+  passOrder?: boolean;
+  onGridApi?: (api: any) => void;
+  // storageKey scopes the persisted column layout/visibility. Omit for the main
+  // log (keeps the historical keys); pass a distinct value (e.g. "net.onair") to
+  // reuse this grid elsewhere with its OWN independent column config.
+  storageKey?: string;
   onRowDoubleClicked?: (q: QSOForm) => void;
-  onRowSelected?: (id: number | null) => void;
+  onRowClicked?: (q: QSOForm) => void;
+  onRowSelected?: (ids: number[]) => void;
+  // The full first selected row — the Stats (F1) panel shows its entity when the
+  // entry form is empty, so browsing the log answers "what have I got with this
+  // one?" without retyping the call.
+  onRowSelectedQso?: (row: QSOForm | null) => void;
+  onUpdateFromCty?: (ids: number[]) => void;
+  onUpdateFromQRZ?: (ids: number[]) => void;
+  onUpdateFromClublog?: (ids: number[]) => void;
+  onSendTo?: (service: string, ids: number[]) => void;
+  onSendRecording?: (ids: number[]) => void;
+  onSendEQSL?: (ids: number[]) => void;
+  onBulkEdit?: (ids: number[]) => void;
+  onExportSelected?: (ids: number[]) => void;
+  onExportSelectedFields?: (ids: number[]) => void;
+  onExportFiltered?: () => void;
+  onExportCabrilloSelected?: (ids: number[]) => void;
+  onExportCabrilloFiltered?: () => void;
+  onDelete?: (ids: number[]) => void;
+  // Reports how many rows the grid shows after its COLUMN filters (the funnel
+  // icons), or null when no column filter is active — so the parent's "Showing X
+  // of Y" can reflect them. Fired on filter change and when the data updates.
+  onFilteredCountChange?: (count: number | null) => void;
+  // One column per defined award; the cell shows the reference this QSO counts
+  // for (from row.award_refs[CODE], attached by the parent). Hidden by default.
+  awardCols?: { code: string; name: string }[];
 };
 
-const COL_STATE_KEY = 'hamlog.qsoColState.v2';
+const BASE_COLSTATE_KEY = 'hamlog.qsoColState.v2';
 
 function fmtMhzDots(hz?: number): string {
   if (!hz) return '';
@@ -56,199 +91,517 @@ function fmtMhzDots(hz?: number): string {
   return `${i}.${f.slice(0, 3)}.${f.slice(3, 6)}`;
 }
 
+// Both formatters follow the display preference (Settings → General). What is
+// STORED never changes — see lib/dateFormat.
 function fmtDateUTC(s: any): string {
-  if (!s) return '';
-  const d = new Date(s);
-  if (isNaN(d.getTime())) return s;
-  const p = (n: number) => String(n).padStart(2, '0');
-  return `${d.getUTCFullYear()}-${p(d.getUTCMonth() + 1)}-${p(d.getUTCDate())} ${p(d.getUTCHours())}:${p(d.getUTCMinutes())}`;
+  return formatDateTimeUTC(s);
 }
 function fmtDateOnly(s: any): string {
-  if (!s) return '';
-  const d = new Date(s);
-  if (isNaN(d.getTime())) return s;
-  const p = (n: number) => String(n).padStart(2, '0');
-  return `${d.getUTCFullYear()}-${p(d.getUTCMonth() + 1)}-${p(d.getUTCDate())}`;
+  return formatDateOnly(s);
 }
 
 // Full catalog of selectable columns, grouped for the picker. `defaultVisible`
 // = shown out of the box; anything else stays hidden until the user toggles
 // it in the Columns dialog.
-type ColEntry = ColDef<QSOForm> & { group: string; label: string; defaultVisible?: boolean };
+export type ColEntry = ColDef<QSOForm> & { group: string; label: string; defaultVisible?: boolean };
 
-const COL_CATALOG: ColEntry[] = [
+// Shared so the Worked-before grid (which now also shows full QSO records)
+// can offer the exact same column choices without duplicating the catalog.
+// A factory taking the i18n `t()` so headerName/label strings are localized;
+// hooks can't run at module level, so the component calls this with its own t.
+type TFn = (key: string, vars?: Record<string, string | number>) => string;
+
+// qsoDistanceKm returns the great-circle distance for one row, in km.
+//
+// The QSO's OWN my_grid / my_lat / my_lon come first: a log spans years and
+// portable outings, so the station the QSO was made from is not necessarily the
+// one configured today. `myGrid` (the current profile) is only the fallback for
+// the many older records that carry no my_* fields at all.
+function qsoDistanceKm(d: any, myGrid?: string): number | undefined {
+  if (!d) return undefined;
+  const here =
+    (d.my_grid && gridToLatLon(d.my_grid)) ||
+    (d.my_lat || d.my_lon ? { lat: d.my_lat || 0, lon: d.my_lon || 0 } : null) ||
+    (myGrid ? gridToLatLon(myGrid) : null);
+  const there =
+    (d.grid && gridToLatLon(d.grid)) ||
+    (d.lat || d.lon ? { lat: d.lat || 0, lon: d.lon || 0 } : null);
+  if (!here || !there) return undefined;
+  return Math.round(pathBetweenLatLon(here, there).distanceShort);
+}
+
+export const makeColCatalog = (t: TFn, myGrid?: string): ColEntry[] => [
   // ── QSO basics ──
-  { group: 'QSO', label: 'Date UTC',  colId: 'qso_date', headerName: 'Date UTC', field: 'qso_date' as any, width: 150, cellClass: 'font-mono', valueFormatter: (p) => fmtDateUTC(p.value), sort: 'desc', defaultVisible: true },
-  { group: 'QSO', label: 'Date Off',  colId: 'qso_date_off', headerName: 'Date off', field: 'qso_date_off' as any, width: 150, cellClass: 'font-mono', valueFormatter: (p) => fmtDateUTC(p.value) },
-  { group: 'QSO', label: 'Callsign',  colId: 'callsign', headerName: 'Callsign', field: 'callsign' as any, width: 110, cellClass: 'font-mono font-semibold', cellStyle: { color: '#b8410c' }, defaultVisible: true },
-  { group: 'QSO', label: 'Band',      colId: 'band', headerName: 'Band', field: 'band' as any, width: 75, cellClass: 'font-mono', defaultVisible: true },
-  { group: 'QSO', label: 'Band RX',   colId: 'band_rx', headerName: 'Band RX', field: 'band_rx' as any, width: 75, cellClass: 'font-mono' },
-  { group: 'QSO', label: 'Mode',      colId: 'mode', headerName: 'Mode', field: 'mode' as any, width: 80, cellClass: 'font-mono', defaultVisible: true },
-  { group: 'QSO', label: 'Submode',   colId: 'submode', headerName: 'Submode', field: 'submode' as any, width: 80, cellClass: 'font-mono' },
-  { group: 'QSO', label: 'MHz (TX)',  colId: 'freq_hz', headerName: 'MHz', field: 'freq_hz' as any, width: 110, type: 'rightAligned', cellClass: 'font-mono', valueFormatter: (p) => fmtMhzDots(p.value as number | undefined), comparator: (a, b) => (a ?? 0) - (b ?? 0), defaultVisible: true },
-  { group: 'QSO', label: 'MHz (RX)',  colId: 'freq_rx_hz', headerName: 'MHz RX', field: 'freq_rx_hz' as any, width: 110, type: 'rightAligned', cellClass: 'font-mono', valueFormatter: (p) => fmtMhzDots(p.value as number | undefined), comparator: (a, b) => (a ?? 0) - (b ?? 0) },
-  { group: 'QSO', label: 'RST sent',  colId: 'rst_sent', headerName: 'RST sent', field: 'rst_sent' as any, width: 85, cellClass: 'font-mono', defaultVisible: true },
-  { group: 'QSO', label: 'RST rcvd',  colId: 'rst_rcvd', headerName: 'RST rcvd', field: 'rst_rcvd' as any, width: 85, cellClass: 'font-mono', defaultVisible: true },
-  { group: 'QSO', label: 'TX Power',  colId: 'tx_pwr', headerName: 'TX Power', field: 'tx_pwr' as any, width: 90, type: 'rightAligned', cellClass: 'font-mono' },
+  { group: 'QSO', label: t('rqg.c.qso_date'),  colId: 'qso_date', headerName: t('rqg.c.qso_date'), field: 'qso_date' as any, width: 150, cellClass: 'font-mono', valueFormatter: (p) => fmtDateUTC(p.value), sort: 'desc', defaultVisible: true },
+  { group: 'QSO', label: t('rqg.c.qso_date_off'),  colId: 'qso_date_off', headerName: t('rqg.c.qso_date_off'), field: 'qso_date_off' as any, width: 150, cellClass: 'font-mono', valueFormatter: (p) => fmtDateUTC(p.value) },
+  { group: 'QSO', label: t('rqg.c.callsign'),  colId: 'callsign', headerName: t('rqg.c.callsign'), field: 'callsign' as any, width: 110, cellClass: 'font-mono font-semibold', defaultVisible: true },
+  { group: 'QSO', label: t('rqg.c.band'),      colId: 'band', headerName: t('rqg.c.band'), field: 'band' as any, width: 75, cellClass: 'font-mono', defaultVisible: true },
+  { group: 'QSO', label: t('rqg.c.band_rx'),   colId: 'band_rx', headerName: t('rqg.c.band_rx'), field: 'band_rx' as any, width: 75, cellClass: 'font-mono' },
+  { group: 'QSO', label: t('rqg.c.mode'),      colId: 'mode', headerName: t('rqg.c.mode'), field: 'mode' as any, width: 80, cellClass: 'font-mono', defaultVisible: true },
+  { group: 'QSO', label: t('rqg.c.submode'),   colId: 'submode', headerName: t('rqg.c.submode'), field: 'submode' as any, width: 80, cellClass: 'font-mono' },
+  { group: 'QSO', label: t('rqg.c.freq_hz'),  colId: 'freq_hz', headerName: t('rqg.h.freq_hz'), field: 'freq_hz' as any, width: 110, cellClass: 'font-mono', valueFormatter: (p) => fmtMhzDots(p.value as number | undefined), comparator: (a, b) => (a ?? 0) - (b ?? 0), defaultVisible: true },
+  { group: 'QSO', label: t('rqg.c.freq_rx_hz'),  colId: 'freq_rx_hz', headerName: t('rqg.h.freq_rx_hz'), field: 'freq_rx_hz' as any, width: 110, cellClass: 'font-mono', valueFormatter: (p) => fmtMhzDots(p.value as number | undefined), comparator: (a, b) => (a ?? 0) - (b ?? 0) },
+  { group: 'QSO', label: t('rqg.c.rst_sent'),  colId: 'rst_sent', headerName: t('rqg.c.rst_sent'), field: 'rst_sent' as any, width: 85, cellClass: 'font-mono', defaultVisible: true },
+  { group: 'QSO', label: t('rqg.c.rst_rcvd'),  colId: 'rst_rcvd', headerName: t('rqg.c.rst_rcvd'), field: 'rst_rcvd' as any, width: 85, cellClass: 'font-mono', defaultVisible: true },
+  { group: 'QSO', label: t('rqg.c.tx_pwr'),  colId: 'tx_pwr', headerName: t('rqg.c.tx_pwr'), field: 'tx_pwr' as any, width: 90, type: 'rightAligned', cellClass: 'font-mono' },
 
   // ── Contacted station ──
-  { group: 'Contacted', label: 'Name',     colId: 'name',     headerName: 'Name',     field: 'name' as any,     width: 170, defaultVisible: true },
-  { group: 'Contacted', label: 'QTH',      colId: 'qth',      headerName: 'QTH',      field: 'qth' as any,      width: 200, defaultVisible: true },
-  { group: 'Contacted', label: 'Address',  colId: 'address',  headerName: 'Address',  field: 'address' as any,  width: 200 },
-  { group: 'Contacted', label: 'Country',  colId: 'country',  headerName: 'Country',  field: 'country' as any,  width: 150, defaultVisible: true },
-  { group: 'Contacted', label: 'State',    colId: 'state',    headerName: 'State',    field: 'state' as any,    width: 80 },
-  { group: 'Contacted', label: 'County',   colId: 'cnty',     headerName: 'County',   field: 'cnty' as any,     width: 130 },
-  { group: 'Contacted', label: 'Continent',colId: 'cont',     headerName: 'Cont',     field: 'cont' as any,     width: 60 },
-  { group: 'Contacted', label: 'Grid',     colId: 'grid',     headerName: 'Grid',     field: 'grid' as any,     width: 85, cellClass: 'font-mono', defaultVisible: true },
-  { group: 'Contacted', label: 'Grid Ext', colId: 'gridsquare_ext', headerName: 'GridExt', field: 'gridsquare_ext' as any, width: 85, cellClass: 'font-mono' },
-  { group: 'Contacted', label: 'VUCC grids',colId: 'vucc_grids', headerName: 'VUCC',  field: 'vucc_grids' as any, width: 130, cellClass: 'font-mono' },
-  { group: 'Contacted', label: 'DXCC #',   colId: 'dxcc',     headerName: 'DXCC #',   field: 'dxcc' as any,     width: 70, type: 'rightAligned', cellClass: 'font-mono' },
-  { group: 'Contacted', label: 'CQZ',      colId: 'cqz',      headerName: 'CQZ',      field: 'cqz' as any,      width: 60, type: 'rightAligned', cellClass: 'font-mono' },
-  { group: 'Contacted', label: 'ITU',      colId: 'ituz',     headerName: 'ITU',      field: 'ituz' as any,     width: 60, type: 'rightAligned', cellClass: 'font-mono' },
-  { group: 'Contacted', label: 'IOTA',     colId: 'iota',     headerName: 'IOTA',     field: 'iota' as any,     width: 80, cellClass: 'font-mono' },
-  { group: 'Contacted', label: 'SOTA ref', colId: 'sota_ref', headerName: 'SOTA',     field: 'sota_ref' as any, width: 110, cellClass: 'font-mono' },
-  { group: 'Contacted', label: 'POTA ref', colId: 'pota_ref', headerName: 'POTA',     field: 'pota_ref' as any, width: 110, cellClass: 'font-mono' },
-  { group: 'Contacted', label: 'Age',      colId: 'age',      headerName: 'Age',      field: 'age' as any,      width: 60, type: 'rightAligned' },
-  { group: 'Contacted', label: 'Lat',      colId: 'lat',      headerName: 'Lat',      field: 'lat' as any,      width: 90, type: 'rightAligned', cellClass: 'font-mono' },
-  { group: 'Contacted', label: 'Lon',      colId: 'lon',      headerName: 'Lon',      field: 'lon' as any,      width: 90, type: 'rightAligned', cellClass: 'font-mono' },
-  { group: 'Contacted', label: 'Email',    colId: 'email',    headerName: 'Email',    field: 'email' as any,    width: 180 },
-  { group: 'Contacted', label: 'Web',      colId: 'web',      headerName: 'Web',      field: 'web' as any,      width: 180 },
+  { group: 'Contacted', label: t('rqg.c.name'),     colId: 'name',     headerName: t('rqg.c.name'),     field: 'name' as any,     width: 170, defaultVisible: true },
+  { group: 'Contacted', label: t('rqg.c.qth'),      colId: 'qth',      headerName: t('rqg.c.qth'),      field: 'qth' as any,      width: 200, defaultVisible: true },
+  { group: 'Contacted', label: t('rqg.c.address'),  colId: 'address',  headerName: t('rqg.c.address'),  field: 'address' as any,  width: 200 },
+  { group: 'Contacted', label: t('rqg.c.country'),  colId: 'country',  headerName: t('rqg.c.country'),  field: 'country' as any,  width: 150, defaultVisible: true },
+  { group: 'Contacted', label: t('rqg.c.state'),    colId: 'state',    headerName: t('rqg.c.state'),    field: 'state' as any,    width: 80 },
+  { group: 'Contacted', label: t('rqg.c.cnty'),   colId: 'cnty',     headerName: t('rqg.c.cnty'),   field: 'cnty' as any,     width: 130 },
+  { group: 'Contacted', label: t('rqg.c.cont'),colId: 'cont',     headerName: t('rqg.h.cont'),     field: 'cont' as any,     width: 60 },
+  { group: 'Contacted', label: t('rqg.c.grid'),     colId: 'grid',     headerName: t('rqg.c.grid'),     field: 'grid' as any,     width: 85, cellClass: 'font-mono', defaultVisible: true },
+  { group: 'Contacted', label: t('rqg.c.gridsquare_ext'), colId: 'gridsquare_ext', headerName: t('rqg.h.gridsquare_ext'), field: 'gridsquare_ext' as any, width: 85, cellClass: 'font-mono' },
+  { group: 'Contacted', label: t('rqg.c.vucc_grids'),colId: 'vucc_grids', headerName: t('rqg.h.vucc_grids'),  field: 'vucc_grids' as any, width: 130, cellClass: 'font-mono' },
+  { group: 'Contacted', label: t('rqg.c.dxcc'),   colId: 'dxcc',     headerName: t('rqg.c.dxcc'),   field: 'dxcc' as any,     width: 70, type: 'rightAligned', cellClass: 'font-mono' },
+  { group: 'Contacted', label: t('rqg.c.cqz'),      colId: 'cqz',      headerName: t('rqg.c.cqz'),      field: 'cqz' as any,      width: 60, type: 'rightAligned', cellClass: 'font-mono' },
+  { group: 'Contacted', label: t('rqg.c.ituz'),      colId: 'ituz',     headerName: t('rqg.c.ituz'),      field: 'ituz' as any,     width: 60, type: 'rightAligned', cellClass: 'font-mono' },
+  { group: 'Contacted', label: t('rqg.c.iota'),     colId: 'iota',     headerName: t('rqg.c.iota'),     field: 'iota' as any,     width: 80, cellClass: 'font-mono' },
+  { group: 'Contacted', label: t('rqg.c.sota_ref'), colId: 'sota_ref', headerName: t('rqg.h.sota_ref'),     field: 'sota_ref' as any, width: 110, cellClass: 'font-mono' },
+  { group: 'Contacted', label: t('rqg.c.pota_ref'), colId: 'pota_ref', headerName: t('rqg.h.pota_ref'),     field: 'pota_ref' as any, width: 110, cellClass: 'font-mono' },
+  { group: 'Contacted', label: t('rqg.c.age'),      colId: 'age',      headerName: t('rqg.c.age'),      field: 'age' as any,      width: 60, type: 'rightAligned' },
+  { group: 'Contacted', label: t('rqg.c.lat'),      colId: 'lat',      headerName: t('rqg.c.lat'),      field: 'lat' as any,      width: 90, type: 'rightAligned', cellClass: 'font-mono' },
+  { group: 'Contacted', label: t('rqg.c.lon'),      colId: 'lon',      headerName: t('rqg.c.lon'),      field: 'lon' as any,      width: 90, type: 'rightAligned', cellClass: 'font-mono' },
+  // Derived, not stored: computed from the two locations at display time, like
+  // the cluster grid's own distance column.
+  { group: 'Contacted', label: t('rqg.c.distance_km'), colId: 'distance_km', headerName: t('rqg.h.distance_km'), width: 90, type: 'rightAligned', cellClass: 'font-mono',
+    valueGetter: (p) => qsoDistanceKm(p.data, myGrid),
+    comparator: (a, b) => (a ?? 0) - (b ?? 0), defaultVisible: true },
+  { group: 'Contacted', label: t('rqg.c.email'),    colId: 'email',    headerName: t('rqg.c.email'),    field: 'email' as any,    width: 180 },
+  { group: 'Contacted', label: t('rqg.c.web'),      colId: 'web',      headerName: t('rqg.c.web'),      field: 'web' as any,      width: 180 },
 
   // ── QSL ──
-  { group: 'QSL',  label: 'QSL sent',     colId: 'qsl_sent',      headerName: 'QSL sent',   field: 'qsl_sent' as any,      width: 80 },
-  { group: 'QSL',  label: 'QSL rcvd',     colId: 'qsl_rcvd',      headerName: 'QSL rcvd',   field: 'qsl_rcvd' as any,      width: 80 },
-  { group: 'QSL',  label: 'QSL sent date',colId: 'qsl_sent_date', headerName: 'QSL S date', field: 'qsl_sent_date' as any, width: 120, valueFormatter: (p) => fmtDateOnly(p.value) },
-  { group: 'QSL',  label: 'QSL rcvd date',colId: 'qsl_rcvd_date', headerName: 'QSL R date', field: 'qsl_rcvd_date' as any, width: 120, valueFormatter: (p) => fmtDateOnly(p.value) },
-  { group: 'QSL',  label: 'QSL via',      colId: 'qsl_via',       headerName: 'QSL via',    field: 'qsl_via' as any,       width: 130 },
-  { group: 'QSL',  label: 'QSL msg',      colId: 'qsl_msg',       headerName: 'QSL msg',    field: 'qsl_msg' as any,       width: 200 },
-  { group: 'QSL',  label: 'QSL msg rcvd', colId: 'qslmsg_rcvd',   headerName: 'QSL msg rcvd', field: 'qslmsg_rcvd' as any, width: 200 },
+  { group: 'QSL',  label: t('rqg.c.qsl_sent'),     colId: 'qsl_sent',      headerName: t('rqg.c.qsl_sent'),   field: 'qsl_sent' as any,      width: 80 , cellClass: qslStatusCellClass },
+  { group: 'QSL',  label: t('rqg.c.qsl_rcvd'),     colId: 'qsl_rcvd',      headerName: t('rqg.c.qsl_rcvd'),   field: 'qsl_rcvd' as any,      width: 80 , cellClass: qslStatusCellClass },
+  { group: 'QSL',  label: t('rqg.c.qsl_sent_date'),colId: 'qsl_sent_date', headerName: t('rqg.h.qsl_sent_date'), field: 'qsl_sent_date' as any, width: 120, valueFormatter: (p) => fmtDateOnly(p.value) },
+  { group: 'QSL',  label: t('rqg.c.qsl_rcvd_date'),colId: 'qsl_rcvd_date', headerName: t('rqg.h.qsl_rcvd_date'), field: 'qsl_rcvd_date' as any, width: 120, valueFormatter: (p) => fmtDateOnly(p.value) },
+  { group: 'QSL',  label: t('rqg.c.qsl_via'),      colId: 'qsl_via',       headerName: t('rqg.c.qsl_via'),    field: 'qsl_via' as any,       width: 130 },
+  { group: 'QSL',  label: t('rqg.c.qsl_msg'),      colId: 'qsl_msg',       headerName: t('rqg.c.qsl_msg'),    field: 'qsl_msg' as any,       width: 200 },
+  { group: 'QSL',  label: t('rqg.c.qslmsg_rcvd'), colId: 'qslmsg_rcvd',   headerName: t('rqg.c.qslmsg_rcvd'), field: 'qslmsg_rcvd' as any, width: 200 },
 
   // ── LoTW ──
-  { group: 'LoTW', label: 'LoTW sent',      colId: 'lotw_sent',      headerName: 'LoTW sent', field: 'lotw_sent' as any,      width: 80 },
-  { group: 'LoTW', label: 'LoTW rcvd',      colId: 'lotw_rcvd',      headerName: 'LoTW rcvd', field: 'lotw_rcvd' as any,      width: 80 },
-  { group: 'LoTW', label: 'LoTW sent date', colId: 'lotw_sent_date', headerName: 'LoTW S date', field: 'lotw_sent_date' as any, width: 120, valueFormatter: (p) => fmtDateOnly(p.value) },
-  { group: 'LoTW', label: 'LoTW rcvd date', colId: 'lotw_rcvd_date', headerName: 'LoTW R date', field: 'lotw_rcvd_date' as any, width: 120, valueFormatter: (p) => fmtDateOnly(p.value) },
+  { group: 'LoTW', label: t('rqg.c.lotw_sent'),      colId: 'lotw_sent',      headerName: t('rqg.c.lotw_sent'), field: 'lotw_sent' as any,      width: 80 , cellClass: qslStatusCellClass },
+  { group: 'LoTW', label: t('rqg.c.lotw_rcvd'),      colId: 'lotw_rcvd',      headerName: t('rqg.c.lotw_rcvd'), field: 'lotw_rcvd' as any,      width: 80 , cellClass: qslStatusCellClass },
+  { group: 'LoTW', label: t('rqg.c.lotw_sent_date'), colId: 'lotw_sent_date', headerName: t('rqg.h.lotw_sent_date'), field: 'lotw_sent_date' as any, width: 120, valueFormatter: (p) => fmtDateOnly(p.value) },
+  { group: 'LoTW', label: t('rqg.c.lotw_rcvd_date'), colId: 'lotw_rcvd_date', headerName: t('rqg.h.lotw_rcvd_date'), field: 'lotw_rcvd_date' as any, width: 120, valueFormatter: (p) => fmtDateOnly(p.value) },
 
   // ── eQSL ──
-  { group: 'eQSL', label: 'eQSL sent',      colId: 'eqsl_sent',      headerName: 'eQSL sent', field: 'eqsl_sent' as any,      width: 80 },
-  { group: 'eQSL', label: 'eQSL rcvd',      colId: 'eqsl_rcvd',      headerName: 'eQSL rcvd', field: 'eqsl_rcvd' as any,      width: 80 },
-  { group: 'eQSL', label: 'eQSL sent date', colId: 'eqsl_sent_date', headerName: 'eQSL S date', field: 'eqsl_sent_date' as any, width: 120, valueFormatter: (p) => fmtDateOnly(p.value) },
-  { group: 'eQSL', label: 'eQSL rcvd date', colId: 'eqsl_rcvd_date', headerName: 'eQSL R date', field: 'eqsl_rcvd_date' as any, width: 120, valueFormatter: (p) => fmtDateOnly(p.value) },
+  { group: 'eQSL', label: t('rqg.c.eqsl_sent'),      colId: 'eqsl_sent',      headerName: t('rqg.c.eqsl_sent'), field: 'eqsl_sent' as any,      width: 80 , cellClass: qslStatusCellClass },
+  { group: 'eQSL', label: t('rqg.c.eqsl_rcvd'),      colId: 'eqsl_rcvd',      headerName: t('rqg.c.eqsl_rcvd'), field: 'eqsl_rcvd' as any,      width: 80 , cellClass: qslStatusCellClass },
+  { group: 'eQSL', label: t('rqg.c.eqsl_sent_date'), colId: 'eqsl_sent_date', headerName: t('rqg.h.eqsl_sent_date'), field: 'eqsl_sent_date' as any, width: 120, valueFormatter: (p) => fmtDateOnly(p.value) },
+  { group: 'eQSL', label: t('rqg.c.eqsl_rcvd_date'), colId: 'eqsl_rcvd_date', headerName: t('rqg.h.eqsl_rcvd_date'), field: 'eqsl_rcvd_date' as any, width: 120, valueFormatter: (p) => fmtDateOnly(p.value) },
+  // App-specific: when OpsLog e-mailed its own QSL card. Distinct from eQSL.cc.
+  { group: 'QSL', label: t('rqg.c.opslog_qsl_card_sent'), colId: 'opslog_qsl_card_sent', headerName: t('rqg.c.opslog_qsl_card_sent'), width: 100, cellClass: qslStatusCellClass, valueGetter: (p) => { const e = (p.data as any)?.extras ?? {}; return (e['APP_OPSLOG_QSL_SENT'] || e['APP_OPSLOG_QSL_CARD_SENT']) ? 'Y' : 'N'; }, defaultVisible: true },
+  // App-specific: operator marked a QSL as RECEIVED for this QSO (drives PSE/TNX).
+  { group: 'QSL', label: t('rqg.c.opslog_qsl_card_rcvd'), colId: 'opslog_qsl_card_rcvd', headerName: t('rqg.c.opslog_qsl_card_rcvd'), width: 100, cellClass: qslStatusCellClass, valueGetter: (p) => { const e = (p.data as any)?.extras ?? {}; return e['APP_OPSLOG_QSL_RCVD'] ? 'Y' : 'N'; }, defaultVisible: false },
+  // App-specific: when the QSO's audio recording was e-mailed to the station.
+  { group: 'QSL', label: t('rqg.c.opslog_recording_sent'), colId: 'opslog_recording_sent', headerName: t('rqg.h.opslog_recording_sent'), width: 100, cellClass: qslStatusCellClass, valueGetter: (p) => { const e = (p.data as any)?.extras ?? {}; return e['APP_OPSLOG_RECORDING_SENT'] ? 'Y' : 'N'; }, defaultVisible: false },
 
-  // ── Uploads ──
-  { group: 'Uploads', label: 'ClubLog upload date',   colId: 'clublog_qso_upload_date',   headerName: 'ClubLog date',   field: 'clublog_qso_upload_date' as any,   width: 130, valueFormatter: (p) => fmtDateOnly(p.value) },
-  { group: 'Uploads', label: 'ClubLog upload status', colId: 'clublog_qso_upload_status', headerName: 'ClubLog status', field: 'clublog_qso_upload_status' as any, width: 110 },
-  { group: 'Uploads', label: 'HRDLog upload date',    colId: 'hrdlog_qso_upload_date',    headerName: 'HRDLog date',    field: 'hrdlog_qso_upload_date' as any,    width: 130, valueFormatter: (p) => fmtDateOnly(p.value) },
-  { group: 'Uploads', label: 'HRDLog upload status',  colId: 'hrdlog_qso_upload_status',  headerName: 'HRDLog status',  field: 'hrdlog_qso_upload_status' as any,  width: 110 },
-  { group: 'Uploads', label: 'QRZ.com upload date',   colId: 'qrzcom_qso_upload_date',   headerName: 'QRZ.com date',   field: 'qrzcom_qso_upload_date' as any,   width: 130, valueFormatter: (p) => fmtDateOnly(p.value) },
-  { group: 'Uploads', label: 'QRZ.com upload status', colId: 'qrzcom_qso_upload_status', headerName: 'QRZ.com status', field: 'qrzcom_qso_upload_status' as any, width: 110 },
-  { group: 'Uploads', label: 'QRZ.com confirmed',     colId: 'qrzcom_qso_download_status', headerName: 'QRZ.com cfm', field: 'qrzcom_qso_download_status' as any, width: 100 },
+  // ── Uploads (online logbooks) ──
+  // ADIF models these as an "upload status/date" (= YOU pushed the QSO) and,
+  // for QRZ only, a "download status/date" (= it came back confirmed). We
+  // relabel to the same sent/rcvd wording as LoTW/eQSL. Club Log & HRDLog have
+  // NO rcvd field in ADIF — they're upload-only, so only "sent" is shown.
+  { group: 'Uploads', label: t('rqg.c.clublog_sent'),      colId: 'clublog_qso_upload_status', headerName: t('rqg.c.clublog_sent'),   field: 'clublog_qso_upload_status' as any, width: 100 , cellClass: qslStatusCellClass },
+  { group: 'Uploads', label: t('rqg.c.clublog_sent_date'), colId: 'clublog_qso_upload_date',   headerName: t('rqg.h.clublog_sent_date'), field: 'clublog_qso_upload_date' as any,   width: 120, valueFormatter: (p) => fmtDateOnly(p.value) },
+  { group: 'Uploads', label: t('rqg.c.hrdlog_sent'),       colId: 'hrdlog_qso_upload_status',  headerName: t('rqg.c.hrdlog_sent'),    field: 'hrdlog_qso_upload_status' as any,  width: 100 , cellClass: qslStatusCellClass },
+  { group: 'Uploads', label: t('rqg.c.hrdlog_sent_date'),  colId: 'hrdlog_qso_upload_date',    headerName: t('rqg.h.hrdlog_sent_date'),  field: 'hrdlog_qso_upload_date' as any,    width: 120, valueFormatter: (p) => fmtDateOnly(p.value) },
+  { group: 'Uploads', label: t('rqg.c.qrz_sent'),      colId: 'qrzcom_qso_upload_status',   headerName: t('rqg.c.qrz_sent'),   field: 'qrzcom_qso_upload_status' as any,   width: 100 , cellClass: qslStatusCellClass },
+  { group: 'Uploads', label: t('rqg.c.qrz_rcvd'),      colId: 'qrzcom_qso_download_status', headerName: t('rqg.c.qrz_rcvd'),   field: 'qrzcom_qso_download_status' as any, width: 100 , cellClass: qslStatusCellClass },
+  { group: 'Uploads', label: t('rqg.c.qrz_sent_date'), colId: 'qrzcom_qso_upload_date',     headerName: t('rqg.h.qrz_sent_date'), field: 'qrzcom_qso_upload_date' as any,     width: 120, valueFormatter: (p) => fmtDateOnly(p.value) },
+  { group: 'Uploads', label: t('rqg.c.qrz_rcvd_date'), colId: 'qrzcom_qso_download_date',   headerName: t('rqg.h.qrz_rcvd_date'), field: 'qrzcom_qso_download_date' as any,   width: 120, valueFormatter: (p) => fmtDateOnly(p.value) },
 
   // ── Contest ──
-  { group: 'Contest', label: 'Contest ID',  colId: 'contest_id', headerName: 'Contest',     field: 'contest_id' as any, width: 110 },
-  { group: 'Contest', label: 'SRX',         colId: 'srx',        headerName: 'SRX',         field: 'srx' as any,        width: 60, type: 'rightAligned' },
-  { group: 'Contest', label: 'STX',         colId: 'stx',        headerName: 'STX',         field: 'stx' as any,        width: 60, type: 'rightAligned' },
-  { group: 'Contest', label: 'SRX string',  colId: 'srx_string', headerName: 'SRX str',     field: 'srx_string' as any, width: 100 },
-  { group: 'Contest', label: 'STX string',  colId: 'stx_string', headerName: 'STX str',     field: 'stx_string' as any, width: 100 },
-  { group: 'Contest', label: 'Check',       colId: 'check',      headerName: 'Check',       field: 'check' as any,      width: 70 },
-  { group: 'Contest', label: 'Precedence',  colId: 'precedence', headerName: 'Precedence',  field: 'precedence' as any, width: 90 },
-  { group: 'Contest', label: 'ARRL section',colId: 'arrl_sect',  headerName: 'ARRL sect',   field: 'arrl_sect' as any,  width: 90 },
+  { group: 'Contest', label: t('rqg.c.contest_id'),  colId: 'contest_id', headerName: t('rqg.h.contest_id'),     field: 'contest_id' as any, width: 110 },
+  { group: 'Contest', label: t('rqg.c.srx'),         colId: 'srx',        headerName: t('rqg.c.srx'),         field: 'srx' as any,        width: 60, type: 'rightAligned' },
+  { group: 'Contest', label: t('rqg.c.stx'),         colId: 'stx',        headerName: t('rqg.c.stx'),         field: 'stx' as any,        width: 60, type: 'rightAligned' },
+  { group: 'Contest', label: t('rqg.c.srx_string'),  colId: 'srx_string', headerName: t('rqg.h.srx_string'),     field: 'srx_string' as any, width: 100 },
+  { group: 'Contest', label: t('rqg.c.stx_string'),  colId: 'stx_string', headerName: t('rqg.h.stx_string'),     field: 'stx_string' as any, width: 100 },
+  { group: 'Contest', label: t('rqg.c.check'),       colId: 'check',      headerName: t('rqg.c.check'),       field: 'check' as any,      width: 70 },
+  { group: 'Contest', label: t('rqg.c.precedence'),  colId: 'precedence', headerName: t('rqg.c.precedence'),  field: 'precedence' as any, width: 90 },
+  { group: 'Contest', label: t('rqg.c.arrl_sect'),colId: 'arrl_sect',  headerName: t('rqg.h.arrl_sect'),   field: 'arrl_sect' as any,  width: 90 },
 
   // ── Propagation / antenna ──
-  { group: 'Propagation', label: 'Prop mode', colId: 'prop_mode', headerName: 'Prop',     field: 'prop_mode' as any, width: 80 },
-  { group: 'Propagation', label: 'Sat name',  colId: 'sat_name',  headerName: 'Sat',      field: 'sat_name' as any,  width: 110 },
-  { group: 'Propagation', label: 'Sat mode',  colId: 'sat_mode',  headerName: 'Sat mode', field: 'sat_mode' as any,  width: 80 },
-  { group: 'Propagation', label: 'Ant az',    colId: 'ant_az',    headerName: 'Az',       field: 'ant_az' as any,    width: 70, type: 'rightAligned' },
-  { group: 'Propagation', label: 'Ant el',    colId: 'ant_el',    headerName: 'El',       field: 'ant_el' as any,    width: 70, type: 'rightAligned' },
-  { group: 'Propagation', label: 'Ant path',  colId: 'ant_path',  headerName: 'Path',     field: 'ant_path' as any,  width: 70 },
+  { group: 'Propagation', label: t('rqg.c.prop_mode'), colId: 'prop_mode', headerName: t('rqg.h.prop_mode'),     field: 'prop_mode' as any, width: 80 },
+  { group: 'Propagation', label: t('rqg.c.sat_name'),  colId: 'sat_name',  headerName: t('rqg.h.sat_name'),      field: 'sat_name' as any,  width: 110 },
+  { group: 'Propagation', label: t('rqg.c.sat_mode'),  colId: 'sat_mode',  headerName: t('rqg.c.sat_mode'), field: 'sat_mode' as any,  width: 80 },
+  { group: 'Propagation', label: t('rqg.c.ant_az'),    colId: 'ant_az',    headerName: t('rqg.h.ant_az'),       field: 'ant_az' as any,    width: 70, type: 'rightAligned' },
+  { group: 'Propagation', label: t('rqg.c.ant_el'),    colId: 'ant_el',    headerName: t('rqg.h.ant_el'),       field: 'ant_el' as any,    width: 70, type: 'rightAligned' },
+  { group: 'Propagation', label: t('rqg.c.ant_path'),  colId: 'ant_path',  headerName: t('rqg.h.ant_path'),     field: 'ant_path' as any,  width: 70 },
 
   // ── My station (operator side) ──
-  { group: 'My station', label: 'Station call', colId: 'station_callsign', headerName: 'Station', field: 'station_callsign' as any, width: 100, cellClass: 'font-mono', defaultVisible: true },
-  { group: 'My station', label: 'Operator',     colId: 'operator',         headerName: 'Operator',field: 'operator' as any,         width: 100, cellClass: 'font-mono' },
-  { group: 'My station', label: 'My grid',      colId: 'my_grid',          headerName: 'My grid', field: 'my_grid' as any,          width: 85, cellClass: 'font-mono' },
-  { group: 'My station', label: 'My country',   colId: 'my_country',       headerName: 'My ctry', field: 'my_country' as any,       width: 130 },
-  { group: 'My station', label: 'My state',     colId: 'my_state',         headerName: 'My state',field: 'my_state' as any,         width: 80 },
-  { group: 'My station', label: 'My county',    colId: 'my_cnty',          headerName: 'My cnty', field: 'my_cnty' as any,          width: 110 },
-  { group: 'My station', label: 'My IOTA',      colId: 'my_iota',          headerName: 'My IOTA', field: 'my_iota' as any,          width: 80, cellClass: 'font-mono' },
-  { group: 'My station', label: 'My SOTA',      colId: 'my_sota_ref',      headerName: 'My SOTA', field: 'my_sota_ref' as any,      width: 110, cellClass: 'font-mono' },
-  { group: 'My station', label: 'My POTA',      colId: 'my_pota_ref',      headerName: 'My POTA', field: 'my_pota_ref' as any,      width: 110, cellClass: 'font-mono' },
-  { group: 'My station', label: 'My DXCC',      colId: 'my_dxcc',          headerName: 'My DXCC#',field: 'my_dxcc' as any,          width: 80, type: 'rightAligned' },
-  { group: 'My station', label: 'My CQ zone',   colId: 'my_cq_zone',       headerName: 'My CQZ',  field: 'my_cq_zone' as any,       width: 70, type: 'rightAligned' },
-  { group: 'My station', label: 'My ITU zone',  colId: 'my_itu_zone',      headerName: 'My ITU',  field: 'my_itu_zone' as any,      width: 70, type: 'rightAligned' },
-  { group: 'My station', label: 'My lat',       colId: 'my_lat',           headerName: 'My lat',  field: 'my_lat' as any,           width: 90, type: 'rightAligned' },
-  { group: 'My station', label: 'My lon',       colId: 'my_lon',           headerName: 'My lon',  field: 'my_lon' as any,           width: 90, type: 'rightAligned' },
-  { group: 'My station', label: 'My street',    colId: 'my_street',        headerName: 'Street',  field: 'my_street' as any,        width: 160 },
-  { group: 'My station', label: 'My city',      colId: 'my_city',          headerName: 'City',    field: 'my_city' as any,          width: 130 },
-  { group: 'My station', label: 'My ZIP',       colId: 'my_postal_code',   headerName: 'ZIP',     field: 'my_postal_code' as any,   width: 80 },
-  { group: 'My station', label: 'My rig',       colId: 'my_rig',           headerName: 'My rig',  field: 'my_rig' as any,           width: 130 },
-  { group: 'My station', label: 'My antenna',   colId: 'my_antenna',       headerName: 'My ant',  field: 'my_antenna' as any,       width: 130 },
+  { group: 'My station', label: t('rqg.c.station_callsign'), colId: 'station_callsign', headerName: t('rqg.h.station_callsign'), field: 'station_callsign' as any, width: 100, cellClass: 'font-mono', defaultVisible: true },
+  { group: 'My station', label: t('rqg.c.operator'),     colId: 'operator',         headerName: t('rqg.c.operator'),field: 'operator' as any,         width: 100, cellClass: 'font-mono' },
+  { group: 'My station', label: t('rqg.c.my_grid'),      colId: 'my_grid',          headerName: t('rqg.c.my_grid'), field: 'my_grid' as any,          width: 85, cellClass: 'font-mono' },
+  { group: 'My station', label: t('rqg.c.my_country'),   colId: 'my_country',       headerName: t('rqg.h.my_country'), field: 'my_country' as any,       width: 130 },
+  { group: 'My station', label: t('rqg.c.my_state'),     colId: 'my_state',         headerName: t('rqg.c.my_state'),field: 'my_state' as any,         width: 80 },
+  { group: 'My station', label: t('rqg.c.my_cnty'),    colId: 'my_cnty',          headerName: t('rqg.h.my_cnty'), field: 'my_cnty' as any,          width: 110 },
+  { group: 'My station', label: t('rqg.c.my_iota'),      colId: 'my_iota',          headerName: t('rqg.c.my_iota'), field: 'my_iota' as any,          width: 80, cellClass: 'font-mono' },
+  { group: 'My station', label: t('rqg.c.my_sota'),      colId: 'my_sota_ref',      headerName: t('rqg.c.my_sota'), field: 'my_sota_ref' as any,      width: 110, cellClass: 'font-mono' },
+  { group: 'My station', label: t('rqg.c.my_pota'),      colId: 'my_pota_ref',      headerName: t('rqg.c.my_pota'), field: 'my_pota_ref' as any,      width: 110, cellClass: 'font-mono' },
+  { group: 'My station', label: t('rqg.c.my_dxcc'),      colId: 'my_dxcc',          headerName: t('rqg.h.my_dxcc'),field: 'my_dxcc' as any,          width: 80, type: 'rightAligned' },
+  { group: 'My station', label: t('rqg.c.my_cq_zone'),   colId: 'my_cq_zone',       headerName: t('rqg.h.my_cq_zone'),  field: 'my_cq_zone' as any,       width: 70, type: 'rightAligned' },
+  { group: 'My station', label: t('rqg.c.my_itu_zone'),  colId: 'my_itu_zone',      headerName: t('rqg.h.my_itu_zone'),  field: 'my_itu_zone' as any,      width: 70, type: 'rightAligned' },
+  { group: 'My station', label: t('rqg.c.my_lat'),       colId: 'my_lat',           headerName: t('rqg.c.my_lat'),  field: 'my_lat' as any,           width: 90, type: 'rightAligned' },
+  { group: 'My station', label: t('rqg.c.my_lon'),       colId: 'my_lon',           headerName: t('rqg.c.my_lon'),  field: 'my_lon' as any,           width: 90, type: 'rightAligned' },
+  { group: 'My station', label: t('rqg.c.my_street'),    colId: 'my_street',        headerName: t('rqg.h.my_street'),  field: 'my_street' as any,        width: 160 },
+  { group: 'My station', label: t('rqg.c.my_city'),      colId: 'my_city',          headerName: t('rqg.h.my_city'),    field: 'my_city' as any,          width: 130 },
+  { group: 'My station', label: t('rqg.c.my_zip'),       colId: 'my_postal_code',   headerName: t('rqg.h.my_zip'),     field: 'my_postal_code' as any,   width: 80 },
+  { group: 'My station', label: t('rqg.c.my_rig'),       colId: 'my_rig',           headerName: t('rqg.c.my_rig'),  field: 'my_rig' as any,           width: 130 },
+  { group: 'My station', label: t('rqg.c.my_antenna'),   colId: 'my_antenna',       headerName: t('rqg.h.my_antenna'),  field: 'my_antenna' as any,       width: 130 },
+  { group: 'My station', label: t('rqg.c.my_name'),      colId: 'my_name',          headerName: t('rqg.c.my_name'), field: 'my_name' as any,          width: 120 },
+  { group: 'My station', label: t('rqg.c.my_wwff'),      colId: 'my_wwff_ref',      headerName: t('rqg.c.my_wwff'), field: 'my_wwff_ref' as any,      width: 110, cellClass: 'font-mono' },
+  { group: 'My station', label: t('rqg.c.my_sig'),       colId: 'my_sig',           headerName: t('rqg.c.my_sig'),  field: 'my_sig' as any,           width: 90 },
+  { group: 'My station', label: t('rqg.c.my_sig_info'),  colId: 'my_sig_info',      headerName: t('rqg.c.my_sig_info'), field: 'my_sig_info' as any,    width: 120 },
+  { group: 'My station', label: t('rqg.c.my_arrl_sect'), colId: 'my_arrl_sect',     headerName: t('rqg.c.my_arrl_sect'), field: 'my_arrl_sect' as any,  width: 90, cellClass: 'font-mono' },
+  { group: 'My station', label: t('rqg.c.my_darc_dok'),  colId: 'my_darc_dok',      headerName: t('rqg.c.my_darc_dok'), field: 'my_darc_dok' as any,    width: 90, cellClass: 'font-mono' },
+  { group: 'My station', label: t('rqg.c.my_vucc_grids'),colId: 'my_vucc_grids',    headerName: t('rqg.c.my_vucc_grids'), field: 'my_vucc_grids' as any, width: 130, cellClass: 'font-mono' },
 
   // ── Misc ──
-  { group: 'Misc', label: 'Comment',  colId: 'comment',     headerName: 'Comment',    field: 'comment' as any,     flex: 1, minWidth: 160, defaultVisible: true },
-  { group: 'Misc', label: 'Notes',    colId: 'notes',       headerName: 'Notes',      field: 'notes' as any,       width: 240 },
-  { group: 'Misc', label: 'Created',  colId: 'created_at',  headerName: 'Created at', field: 'created_at' as any,  width: 150, valueFormatter: (p) => fmtDateUTC(p.value) },
-  { group: 'Misc', label: 'Updated',  colId: 'updated_at',  headerName: 'Updated at', field: 'updated_at' as any,  width: 150, valueFormatter: (p) => fmtDateUTC(p.value) },
+  { group: 'Misc', label: t('rqg.c.comment'),  colId: 'comment',     headerName: t('rqg.c.comment'),    field: 'comment' as any,     flex: 1, minWidth: 160, defaultVisible: true },
+  { group: 'Misc', label: t('rqg.c.notes'),    colId: 'notes',       headerName: t('rqg.c.notes'),      field: 'notes' as any,       width: 240 },
+  { group: 'Misc', label: t('rqg.c.created'),  colId: 'created_at',  headerName: t('rqg.h.created'), field: 'created_at' as any,  width: 150, valueFormatter: (p) => fmtDateUTC(p.value) },
+  { group: 'Misc', label: t('rqg.c.updated'),  colId: 'updated_at',  headerName: t('rqg.h.updated'), field: 'updated_at' as any,  width: 150, valueFormatter: (p) => fmtDateUTC(p.value) },
 ];
 
-const GROUP_ORDER = [
+export const GROUP_ORDER = [
   'QSO', 'Contacted', 'QSL', 'LoTW', 'eQSL', 'Uploads',
   'Contest', 'Propagation', 'My station', 'Misc',
 ];
 
-export function RecentQSOsGrid({ rows, onRowDoubleClicked, onRowSelected }: Props) {
+// Localized display label for a column group (identifier stays English so it
+// keeps working as a filter key).
+const GRP_KEYS: Record<string, string> = {
+  QSO: 'rqg.grpQso', Contacted: 'rqg.grpContacted', QSL: 'rqg.grpQsl',
+  LoTW: 'rqg.grpLotw', eQSL: 'rqg.grpEqsl', Uploads: 'rqg.grpUploads',
+  Contest: 'rqg.grpContest', Propagation: 'rqg.grpProp',
+  'My station': 'rqg.grpMyStation', Misc: 'rqg.grpMisc',
+};
+export const groupLabel = (t: TFn, g: string): string => t(GRP_KEYS[g] ?? g);
+
+// Award-column VISIBILITY is governed SOLELY by the awardShown code-set, never
+// by AG Grid's saved column state: dropping `hide` here (on both save and
+// restore) stops a stale saved state from re-hiding a shown award column on
+// every awardCols rebuild — the desync that made award columns vanish
+// mid-session.
+//
+// Their POSITION, however, has to stay in the state. Filtering the entries out
+// entirely left applyColumnState({applyOrder:true}) with no place for them, and
+// AG Grid appends what the state doesn't mention — so a column the operator
+// dragged to sit AFTER an award column jumped back in front of it on reload.
+const sanitizeAwardCols = (st: any[] | null | undefined): any[] =>
+  (st ?? []).map((s) => {
+    if (!String(s?.colId ?? '').startsWith('award_')) return s;
+    const { hide: _hide, ...rest } = s as any;
+    return rest;
+  });
+
+export function RecentQSOsGrid({ rows, myGrid, selectAllSignal, selectRowSignal, rowDragCall, passOrder, onGridApi, storageKey, onRowDoubleClicked, onRowClicked, onRowSelected, onRowSelectedQso, onUpdateFromCty, onUpdateFromQRZ, onUpdateFromClublog, onSendTo, onSendRecording, onSendEQSL, onBulkEdit, onExportSelected, onExportSelectedFields, onExportFiltered, onExportCabrilloSelected, onExportCabrilloFiltered, onDelete, onFilteredCountChange, awardCols }: Props) {
+  const { t } = useI18n();
   const gridRef = useRef<any>(null);
   const [pickerOpen, setPickerOpen] = useState(false);
+  // Column-layout persistence keys — scoped by storageKey so a reused instance
+  // (e.g. the Net panel) keeps its own layout independent of the main log.
+  const colStateKey = storageKey ? `hamlog.qsoColState.${storageKey}` : BASE_COLSTATE_KEY;
+  const [menu, setMenu] = useState<QSOMenuState>(null);
+  const [selCount, setSelCount] = useState(0); // live selection count shown in the toolbar
+  const [dispCount, setDispCount] = useState(0); // rows currently displayed (post column filters) — drives Select all ↔ Unselect all
+
+  // Localized column catalog — rebuilt when the language changes.
+  // Rebuild the columns when the format changes: the formatters are captured
+  // inside the column definitions, so nothing else would notice.
+  const [dateFmt, setDateFmt] = useState(getDateFormat);
+  useEffect(() => subscribeDateFormat(() => setDateFmt(getDateFormat())), []);
+  const COL_CATALOG = useMemo(() => makeColCatalog(t, myGrid), [t, myGrid, dateFmt]);
+
+  // Right-click: if the clicked row isn't already part of the selection,
+  // select just it; then open the bulk-action menu on the whole selection.
+  function onCellContextMenu(e: any) {
+    const ev = e.event as MouseEvent | undefined;
+    ev?.preventDefault();
+    const api = gridRef.current?.api;
+    if (!api) return;
+    if (e.node && !e.node.isSelected()) {
+      api.deselectAll();
+      e.node.setSelected(true);
+    }
+    const ids = (api.getSelectedRows() as QSOForm[])
+      .map((r) => r.id as number)
+      .filter((n) => !!n);
+    if (ids.length === 0) return;
+    setMenu({ x: ev?.clientX ?? 0, y: ev?.clientY ?? 0, ids });
+  }
 
   // Compute initial column defs: all columns defined, but those not marked
   // defaultVisible start hidden. The user's saved state (loaded onGridReady)
   // overrides this so a previously toggled column wins.
-  const columnDefs = useMemo<ColDef<QSOForm>[]>(() => COL_CATALOG.map((c) => {
-    const { group: _g, label: _l, defaultVisible, ...rest } = c;
-    return { ...rest, hide: !defaultVisible };
-  }), []);
+  // While AG Grid rebuilds columns (award columns load async), it fires column
+  // events that would otherwise trigger a save of the DEFAULT visibility before
+  // we re-apply the user's saved state — clobbering it. This flag suppresses the
+  // auto-save during that window. Set in the memo (runs at render, before the
+  // column events) and cleared by the re-apply effect below.
+  const restoringRef = useRef(true);
 
+  // Award-column visibility is stored as an explicit set of award CODES, NOT via
+  // AG Grid's column-state round-trip. Those columns load asynchronously and
+  // race the state restore, and AG Grid preserves an existing column's visibility
+  // across a columnDefs rebuild instead of re-reading `hide` — which is exactly
+  // why previously-shown award columns kept vanishing on reopen. A dedicated set
+  // is deterministic: it drives `hide` directly and is re-enforced below.
+  const AWARD_SHOWN_KEY = storageKey ? `hamlog.awardColsShown.${storageKey}` : 'hamlog.awardColsShown';
+  const [awardShown, setAwardShown] = useState<Set<string>>(() => new Set((loadLocal(AWARD_SHOWN_KEY) ?? []).map((s) => String(s).toUpperCase())));
+  useEffect(() => {
+    // Fresh machine: hydrate the set from the portable DB copy, then seed the cache.
+    if (loadLocal(AWARD_SHOWN_KEY)) return;
+    loadRemote(AWARD_SHOWN_KEY).then((remote) => {
+      if (remote && remote.length) {
+        seedLocal(AWARD_SHOWN_KEY, remote);
+        setAwardShown(new Set(remote.map((s: any) => String(s).toUpperCase())));
+      }
+    });
+  }, []);
+  const persistAwardShown = useCallback((next: Set<string>) => {
+    setAwardShown(next);
+    saveState(AWARD_SHOWN_KEY, [...next]);
+  }, []);
+
+  // Award-column WIDTHS are persisted separately too, for the same reason as
+  // visibility: award columns are stripped from AG Grid's saved column-state
+  // round-trip, so their width would otherwise reset to the default on reopen.
+  // Stored as an array of { code, width } (code upper-cased); mirrored to the DB.
+  const AWARD_WIDTH_KEY = storageKey ? `hamlog.awardColWidths.${storageKey}` : 'hamlog.awardColWidths';
+  const awardWidthsRef = useRef<Record<string, number>>({});
+  const awardWidthsInit = useRef(false);
+  if (!awardWidthsInit.current) {
+    awardWidthsInit.current = true;
+    for (const it of (loadLocal(AWARD_WIDTH_KEY) ?? []) as any[]) {
+      if (it?.code && it?.width) awardWidthsRef.current[String(it.code).toUpperCase()] = Number(it.width);
+    }
+  }
+  // Fresh machine: hydrate widths from the portable DB copy, seed the cache, and
+  // apply them to any award columns already on screen.
+  useEffect(() => {
+    if (loadLocal(AWARD_WIDTH_KEY)) return;
+    loadRemote(AWARD_WIDTH_KEY).then((remote) => {
+      if (!remote || !remote.length) return;
+      for (const it of remote as any[]) {
+        if (it?.code && it?.width) awardWidthsRef.current[String(it.code).toUpperCase()] = Number(it.width);
+      }
+      seedLocal(AWARD_WIDTH_KEY, remote);
+      const api = gridRef.current?.api;
+      if (api && awardCols?.length) {
+        const ups = awardCols
+          .map((a) => ({ key: `award_${a.code}`, newWidth: awardWidthsRef.current[a.code.toUpperCase()] }))
+          .filter((u) => !!u.newWidth);
+        if (ups.length) api.setColumnWidths(ups);
+      }
+    });
+  }, []);
+
+  const columnDefs = useMemo<ColDef<QSOForm>[]>(() => {
+    restoringRef.current = true;
+    const base = COL_CATALOG.map((c) => {
+      const { group: _g, label: _l, defaultVisible, ...rest } = c;
+      const col: ColDef<QSOForm> = { ...rest, hide: !defaultVisible };
+      if (rowDragCall && ((rest as any).colId === 'callsign' || (rest as any).field === 'callsign')) {
+        col.rowDrag = true;
+      }
+      if (passOrder) {
+        delete (col as any).sort; // e.g. the date column's default 'desc'
+        col.sortable = false;
+      }
+      return col;
+    });
+    if (passOrder) {
+      base.unshift({
+        colId: '__order', headerName: '#', width: 46, pinned: 'left',
+        sortable: false, resizable: false, suppressMovable: true, filter: false,
+        cellClass: 'font-mono text-muted-foreground tabular-nums',
+        valueGetter: (p) => (p.node?.rowIndex ?? 0) + 1,
+      } as ColDef<QSOForm>);
+    }
+    const awards: ColDef<QSOForm>[] = (awardCols ?? []).map((a) => ({
+      colId: `award_${a.code}`,
+      headerName: a.code,
+      headerTooltip: t('rqg.awardTip', { name: a.name }),
+      width: awardWidthsRef.current[a.code.toUpperCase()] ?? 110,
+      cellClass: 'text-[11px]',
+      // Visibility comes from the persisted award-code set, so a column the user
+      // showed reappears on reopen and one they didn't stays hidden.
+      hide: !awardShown.has(a.code.toUpperCase()),
+      valueGetter: (p) => (p.data as any)?.award_refs?.[a.code.toUpperCase()] ?? '',
+    }));
+    return [...base, ...awards];
+  }, [awardCols, COL_CATALOG, t, awardShown, rowDragCall, passOrder]);
+
+  // Enforce award-column visibility via the API after the columns (re)appear —
+  // colDef.hide alone isn't honoured by AG Grid for a column that already exists,
+  // so we set it explicitly whenever the award set or the loaded columns change.
+  useEffect(() => {
+    const api = gridRef.current?.api;
+    if (!api || !awardCols?.length) return;
+    const widthUps: { key: string; newWidth: number }[] = [];
+    for (const a of awardCols) {
+      const want = awardShown.has(a.code.toUpperCase());
+      const col = api.getColumn(`award_${a.code}`);
+      if (col && col.isVisible() !== want) api.setColumnsVisible([`award_${a.code}`], want);
+      // Re-apply the saved width — AG Grid keeps an existing column's width across
+      // a columnDefs rebuild instead of re-reading colDef.width (same quirk as hide).
+      const w = awardWidthsRef.current[a.code.toUpperCase()];
+      if (col && w && Math.round(col.getActualWidth()) !== w) widthUps.push({ key: `award_${a.code}`, newWidth: w });
+    }
+    if (widthUps.length) api.setColumnWidths(widthUps);
+  }, [awardCols, awardShown]);
+
+  // No column filters here, deliberately. This grid holds only the most recent
+  // page of QSOs, so a column filter searches THOSE rows and nothing else — and
+  // an empty result then reads as "the log does not contain it" rather than "it
+  // is not on this page". An operator hunting an imported CONTEST_ID across
+  // 28 000 QSOs found nothing and reasonably concluded the import had dropped it.
+  //
+  // The advanced filter queries the whole logbook and is the honest tool for it.
+  // Removing the filter also gives each header back the width of its menu icon.
   const defaultColDef = useMemo<ColDef>(() => ({
-    sortable: true,
+    sortable: !passOrder,
     resizable: true,
-    filter: true,
+    filter: false,
     suppressMovable: false,
-  }), []);
+  }), [passOrder]);
+
+  // In pass-order mode a saved sort (from before the mode existed, or synced
+  // from elsewhere) must not shuffle the queue — strip sorts when restoring.
+  const sanitizeState = useCallback((state: any[]) => (
+    passOrder ? state.map((s) => ({ ...s, sort: null })) : state
+  ), [passOrder]);
 
   function onGridReady(e: GridReadyEvent) {
-    try {
-      const raw = localStorage.getItem(COL_STATE_KEY);
-      if (raw) {
-        const state = JSON.parse(raw) as ColumnState[];
-        if (Array.isArray(state)) {
-          e.api.applyColumnState({ state, applyOrder: true });
+    onGridApi?.(e.api);
+    const local = loadLocal(colStateKey);
+    if (local) e.api.applyColumnState({ state: sanitizeState(sanitizeAwardCols(local)) as ColumnState[], applyOrder: true });
+    // Fall back to the portable DB copy when the local cache is empty
+    // (fresh machine / after a reinstall), then re-seed the cache.
+    loadRemote(colStateKey).then((remote) => {
+      if (remote && !local) {
+        e.api.applyColumnState({ state: sanitizeState(sanitizeAwardCols(remote)) as ColumnState[], applyOrder: true });
+        seedLocal(colStateKey, remote);
       }
+    });
   }
-    } catch {}
+  // Report the post-column-filter row count (funnel filters) to the parent, or
+  // null when no column filter is active, so "Showing X of Y" reflects them.
+  const reportFilteredCount = useCallback((e: { api?: any }) => {
+    const api = e?.api ?? gridRef.current?.api;
+    if (api?.getDisplayedRowCount) setDispCount(api.getDisplayedRowCount());
+    // Pass-order "#" is a rowIndex-based valueGetter; AG-Grid keeps the same
+    // row node across a reorder (getRowId by id), so the number is cached and
+    // stale until we force it. Refresh it on every model update (a reorder
+    // fires one). force:true bypasses the value cache.
+    if (passOrder && api?.refreshCells) {
+      api.refreshCells({ columns: ['__order'], force: true });
     }
+    if (!api || !onFilteredCountChange) return;
+    onFilteredCountChange(api.isAnyFilterPresent?.() ? api.getDisplayedRowCount() : null);
+  }, [onFilteredCountChange, passOrder]);
   const saveColumnState = useCallback(() => {
-    try {
+    if (restoringRef.current) return; // ignore the events fired by a column rebuild
     const state = gridRef.current?.api?.getColumnState();
-      if (state) localStorage.setItem(COL_STATE_KEY, JSON.stringify(state));
-    } catch {}
-  }, []);
+    if (!state) return;
+    saveState(colStateKey, sanitizeAwardCols(state));
+    // Award columns are stripped above, so persist their widths on the side.
+    let changed = false;
+    for (const s of state) {
+      const id = String((s as any)?.colId ?? '');
+      if (id.startsWith('award_') && (s as any).width) {
+        const code = id.slice('award_'.length).toUpperCase();
+        if (awardWidthsRef.current[code] !== (s as any).width) {
+          awardWidthsRef.current[code] = (s as any).width;
+          changed = true;
+        }
+      }
+    }
+    if (changed) {
+      saveState(AWARD_WIDTH_KEY, Object.entries(awardWidthsRef.current).map(([code, width]) => ({ code, width })));
+    }
+  }, [colStateKey, AWARD_WIDTH_KEY]);
+
+  // columnDefs is rebuilt whenever the award columns load OR the user toggles an
+  // award column (both change the memo → restoringRef flips true at line 316). Each
+  // rebuild makes AG Grid re-apply every colDef's `hide` default, wiping the user's
+  // saved visibility of the NON-award columns (QTH/Grid reappear, a manually-shown
+  // LoTW-sent vanishes). Re-apply the saved (award-stripped) state after EVERY such
+  // rebuild — hence awardShown in the deps, not just awardCols; without it, toggling
+  // an award reset the other columns AND left restoringRef stuck true (saving off).
+  useEffect(() => {
+    const api = gridRef.current?.api;
+    const local = loadLocal(colStateKey);
+    if (api && local) api.applyColumnState({ state: sanitizeState(sanitizeAwardCols(local)) as ColumnState[], applyOrder: true });
+    // Re-enable saving once AG Grid has settled the column events from the rebuild.
+    const t = window.setTimeout(() => { restoringRef.current = false; }, 0);
+    return () => window.clearTimeout(t);
+    // Keyed on columnDefs ITSELF, not on the reasons it was rebuilt. Listing the
+    // causes here (awardCols/awardShown) missed the others — switching the UI
+    // language rebuilds the memo through `t`, which set restoringRef and left it
+    // set, so every column change for the rest of the session was silently
+    // discarded and the layout reverted on reload. Any future dependency of the
+    // memo is now covered for free.
+  }, [columnDefs]);
 
   function handleRowDoubleClicked(e: RowDoubleClickedEvent<QSOForm>) {
     if (e.data && onRowDoubleClicked) onRowDoubleClicked(e.data);
   }
   function onSelectionChanged() {
-    const sel = gridRef.current?.api?.getSelectedRows() as QSOForm[] | undefined;
-    onRowSelected?.(sel && sel[0] ? (sel[0].id as number) : null);
+    const api = gridRef.current?.api;
+    const sel = (api?.getSelectedRows() as QSOForm[] | undefined) ?? [];
+    setSelCount(sel.length);
+    setDispCount(api?.getDisplayedRowCount?.() ?? 0);
+    onRowSelected?.(sel.map((r) => r.id as number).filter((id) => id != null));
+    onRowSelectedQso?.(sel[0] ?? null);
   }
+  // Select every row when the caller bumps selectAllSignal (QSL Manager search).
+  useEffect(() => {
+    if (selectAllSignal === undefined) return;
+    gridRef.current?.api?.selectAll();
+  }, [selectAllSignal]);
+
+  // Select ONE row by id when the caller bumps selectRowSignal.seq. Deferred a
+  // tick so a row-data refresh in the same render settles first.
+  useEffect(() => {
+    if (!selectRowSignal || selectRowSignal.seq === 0) return;
+    const t = window.setTimeout(() => {
+      const api = gridRef.current?.api;
+      if (!api) return;
+      api.deselectAll();
+      api.forEachNode((n: any) => {
+        if (n.data?.id === selectRowSignal.id) n.setSelected(true);
+      });
+    }, 0);
+    return () => window.clearTimeout(t);
+  }, [selectRowSignal?.seq]);
 
   // ── Column picker (visibility) ──
   // Drives AG Grid via setColumnsVisible(). We don't keep a parallel React
   // state for "which columns are visible" — AG Grid's column state is the
   // source of truth, and saveColumnState persists it.
   function isColVisible(colId: string): boolean {
+    // Award columns: the persisted set is the source of truth (see awardShown).
+    if (colId.startsWith('award_')) return awardShown.has(colId.slice('award_'.length).toUpperCase());
     const col = gridRef.current?.api?.getColumn(colId);
     return col ? col.isVisible() : !!COL_CATALOG.find((c) => c.colId === colId)?.defaultVisible;
   }
   function setColVisible(colId: string, visible: boolean) {
+    // Award columns are driven by the persisted code set — update it and let the
+    // enforce effect apply visibility. This is what makes them stick across reopen.
+    if (colId.startsWith('award_')) {
+      const code = colId.slice('award_'.length).toUpperCase();
+      const next = new Set(awardShown);
+      if (visible) next.add(code); else next.delete(code);
+      persistAwardShown(next);
+      gridRef.current?.api?.setColumnsVisible([colId], visible);
+      return;
+    }
     const api = gridRef.current?.api;
     if (!api) return;
     api.setColumnsVisible([colId], visible);
@@ -276,13 +629,46 @@ export function RecentQSOsGrid({ rows, onRowDoubleClicked, onRowSelected }: Prop
     api.setColumnsVisible(visible, true);
     api.setColumnsVisible(hidden, false);
     saveColumnState();
+    // Award columns are opt-in: reset hides them all.
+    persistAwardShown(new Set());
+    (awardCols ?? []).forEach((a) => api.setColumnsVisible([`award_${a.code}`], false));
   }
 
   return (
     <>
       <div className="flex items-center justify-end gap-2 px-2.5 py-1 border-b border-border/60 bg-muted/20">
+        {/* Live selection count — visible without opening the context menu. */}
+        {selCount > 0 && (
+          <span className="mr-auto text-[11px] font-semibold text-primary tabular-nums px-1.5">
+            {t('rqg.selectedCount', { n: selCount })}
+          </span>
+        )}
+        {/* Select every loaded row that passes the active column filters — so a
+            filtered view can be selected in one click (then send to LoTW, bulk
+            edit, export…). Once everything is selected the same button flips to
+            "Unselect all". */}
+        {(() => {
+          const allSelected = selCount > 0 && dispCount > 0 && selCount >= dispCount;
+          return (
+            <Button variant="ghost" size="sm" className="h-7 text-[11px]"
+              title={allSelected ? t('rqg.unselectAllTitle') : t('rqg.selectAllTitle')}
+              onClick={() => {
+                const api: any = gridRef.current?.api;
+                if (!api) return;
+                if (allSelected) api.deselectAll();
+                else if (typeof api.selectAllFiltered === 'function') api.selectAllFiltered();
+                else api.selectAll('filtered');
+              }}>
+              <ListChecks className="size-3.5" /> {allSelected ? t('rqg.unselectAll') : t('rqg.selectAll')}
+            </Button>
+          );
+        })()}
+        <Button variant="ghost" size="sm" className="h-7 text-[11px]" onClick={() => gridRef.current?.api?.setFilterModel(null)}
+          title={t('rqg.clearFiltersTitle')}>
+          <FilterX className="size-3.5" /> {t('rqg.clearFilters')}
+        </Button>
         <Button variant="ghost" size="sm" className="h-7 text-[11px]" onClick={() => setPickerOpen(true)}>
-          <Columns3 className="size-3.5" /> Columns
+          <Columns3 className="size-3.5" /> {t('rqg.columns')}
         </Button>
       </div>
       <div style={{ flex: 1, minHeight: 0, position: 'relative' }}>
@@ -293,15 +679,20 @@ export function RecentQSOsGrid({ rows, onRowDoubleClicked, onRowSelected }: Prop
             rowData={rows}
             columnDefs={columnDefs}
             defaultColDef={defaultColDef}
-            rowSelection={{ mode: 'singleRow', checkboxes: false, enableClickSelection: true }}
+            rowSelection={{ mode: 'multiRow', checkboxes: false, headerCheckbox: false, enableClickSelection: true }}
             onGridReady={onGridReady}
+            onFilterChanged={reportFilteredCount}
+            onModelUpdated={reportFilteredCount}
             onColumnResized={saveColumnState}
             onColumnMoved={saveColumnState}
             onColumnPinned={saveColumnState}
             onColumnVisible={saveColumnState}
             onSortChanged={saveColumnState}
             onRowDoubleClicked={handleRowDoubleClicked}
+            onRowClicked={(e) => e.data && onRowClicked?.(e.data)}
             onSelectionChanged={onSelectionChanged}
+            onCellContextMenu={onCellContextMenu}
+            preventDefaultOnContextMenu
             animateRows={false}
             suppressCellFocus
             getRowId={(p) => String((p.data as any).id)}
@@ -309,26 +700,43 @@ export function RecentQSOsGrid({ rows, onRowDoubleClicked, onRowSelected }: Prop
         </div>
       </div>
 
+      <QSOContextMenu
+        menu={menu}
+        onClose={() => setMenu(null)}
+        onUpdateFromCty={(ids) => onUpdateFromCty?.(ids)}
+        onUpdateFromQRZ={(ids) => onUpdateFromQRZ?.(ids)}
+        onUpdateFromClublog={onUpdateFromClublog}
+        onSendTo={onSendTo}
+        onSendRecording={onSendRecording}
+        onSendEQSL={onSendEQSL}
+        onBulkEdit={onBulkEdit}
+        onExportSelected={onExportSelected}
+        onExportSelectedFields={onExportSelectedFields}
+        onExportFiltered={onExportFiltered}
+        onExportCabrilloSelected={onExportCabrilloSelected}
+        onExportCabrilloFiltered={onExportCabrilloFiltered}
+        onDelete={onDelete}
+      />
+
       <Dialog open={pickerOpen} onOpenChange={setPickerOpen}>
         <DialogContent className="max-w-3xl">
           <DialogHeader>
-            <DialogTitle>Columns</DialogTitle>
+            <DialogTitle>{t('rqg.columns')}</DialogTitle>
             <DialogDescription>
-              Pick the columns you want visible in the Recent QSOs table.
-              Your selection is saved.
+              {t('rqg.pickerDesc')}
             </DialogDescription>
           </DialogHeader>
-          <div className="grid grid-cols-3 gap-4 max-h-[60vh] overflow-y-auto py-2">
+          <div className="grid grid-cols-3 gap-4 max-h-[60vh] overflow-y-auto px-5 py-3">
             {GROUP_ORDER.map((group) => {
               const cols = COL_CATALOG.filter((c) => c.group === group);
               if (cols.length === 0) return null;
               return (
                 <div key={group} className="rounded-md border border-border p-2.5">
                   <div className="flex items-center justify-between mb-2 pb-1.5 border-b border-border/60">
-                    <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{group}</span>
+                    <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{groupLabel(t, group)}</span>
                     <div className="flex gap-0.5">
-                      <button className="text-[10px] text-primary hover:underline px-1" onClick={() => showAll(group)}>all</button>
-                      <button className="text-[10px] text-muted-foreground hover:underline px-1" onClick={() => hideAll(group)}>none</button>
+                      <button className="text-[10px] text-primary hover:underline px-1" onClick={() => showAll(group)}>{t('rqg.all')}</button>
+                      <button className="text-[10px] text-muted-foreground hover:underline px-1" onClick={() => hideAll(group)}>{t('rqg.none')}</button>
                     </div>
                   </div>
                   <div className="flex flex-col gap-1">
@@ -345,10 +753,30 @@ export function RecentQSOsGrid({ rows, onRowDoubleClicked, onRowSelected }: Prop
                 </div>
               );
             })}
+            {awardCols && awardCols.length > 0 && (
+              <div className="rounded-md border border-border p-2.5">
+                <div className="flex items-center justify-between mb-2 pb-1.5 border-b border-border/60">
+                  <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{t('rqg.grpAwards')}</span>
+                  <div className="flex gap-0.5">
+                    <button className="text-[10px] text-primary hover:underline px-1" onClick={() => { persistAwardShown(new Set(awardCols.map((a) => a.code.toUpperCase()))); awardCols.forEach((a) => gridRef.current?.api?.setColumnsVisible([`award_${a.code}`], true)); }}>{t('rqg.all')}</button>
+                    <button className="text-[10px] text-muted-foreground hover:underline px-1" onClick={() => { persistAwardShown(new Set()); awardCols.forEach((a) => gridRef.current?.api?.setColumnsVisible([`award_${a.code}`], false)); }}>{t('rqg.none')}</button>
+                  </div>
+                </div>
+                <div className="flex flex-col gap-1">
+                  {awardCols.map((a) => (
+                    <label key={a.code} className="flex items-center gap-2 text-xs cursor-pointer hover:bg-accent/30 rounded px-1 py-0.5">
+                      <Checkbox checked={isColVisible(`award_${a.code}`)} onCheckedChange={(v) => setColVisible(`award_${a.code}`, !!v)} />
+                      <span className="font-mono font-semibold">{a.code}</span>
+                      <span className="text-muted-foreground truncate">{a.name}</span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+            )}
           </div>
           <DialogFooter>
-            <Button variant="ghost" size="sm" onClick={resetDefaults}>Reset to defaults</Button>
-            <Button size="sm" onClick={() => setPickerOpen(false)}>Done</Button>
+            <Button variant="ghost" size="sm" onClick={resetDefaults}>{t('rqg.resetDefaults')}</Button>
+            <Button size="sm" onClick={() => setPickerOpen(false)}>{t('rqg.done')}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>

frontend/src/components/RotorCompass.tsx

@@ -0,0 +1,194 @@
+// RotorCompass — an azimuthal-equidistant rotor display (à la 4O3A RotorGenius).
+//
+// A world map centred on the operator's QTH (north up) fills the dial, ringed by
+// a green azimuth bezel. A green needle shows the antenna heading (two needles
+// when an Ultrabeam is bidirectional, the opposite one when reversed); a small
+// red marker on the bezel shows the short-path bearing to the DX. Click the dial
+// to turn the antenna there.
+import { useMemo } from 'react';
+import { geoAzimuthalEquidistant, geoPath, geoGraticule10 } from 'd3-geo';
+import { feature } from 'topojson-client';
+import landTopo from 'world-atlas/land-110m.json';
+import { Compass, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+// Decode the coastline outline once (≈110 m simplified land polygons).
+const LAND = feature(landTopo as any, (landTopo as any).objects.land);
+const GRATICULE = geoGraticule10();
+
+interface Props {
+  bearing?: number | null;       // short-path azimuth to DX (deg)
+  headings: number[];            // radiating heading(s) — rotor + Ultrabeam pattern
+  boomHeading?: number | null;   // mechanical boom (rotor) azimuth, shown grey when it differs
+  pattern?: 'normal' | 'reverse' | 'bi' | null; // Ultrabeam pattern (for the badge)
+  centerLat?: number | null;     // operator latitude (projection centre)
+  centerLon?: number | null;     // operator longitude
+  rotorEnabled?: boolean;
+  rotors?: string[];             // logical rotor names; >1 → show a selector
+  activeRotor?: number;          // index of the selected rotor (0-based)
+  onSelectRotor?: (i: number) => void; // switch the active rotor
+  onGoto?: (az: number) => void; // click-to-turn
+  onClose?: () => void;
+}
+
+const SIZE = 168;
+const C = SIZE / 2;
+const R = C - 6;          // outer bezel radius
+const MAP_R = R - 6;      // map/clip radius (inside the bezel)
+
+function pt(az: number, radius: number): [number, number] {
+  const a = ((az - 90) * Math.PI) / 180;
+  return [C + radius * Math.cos(a), C + radius * Math.sin(a)];
+}
+
+export function RotorCompass({ bearing, headings, boomHeading, pattern, centerLat, centerLon, rotorEnabled, rotors, activeRotor, onSelectRotor, onGoto, onClose }: Props) {
+  const cardinals = useMemo(
+    () => [ { d: 0, l: 'N' }, { d: 45, l: 'NE' }, { d: 90, l: 'E' }, { d: 135, l: 'SE' },
+            { d: 180, l: 'S' }, { d: 225, l: 'SW' }, { d: 270, l: 'W' }, { d: 315, l: 'NW' } ],
+    [],
+  );
+
+  // Project the world centred on the QTH (north up; antipode at the bezel).
+  const { land, grat } = useMemo(() => {
+    if (centerLat == null || centerLon == null) return { land: '', grat: '' };
+    const proj = geoAzimuthalEquidistant()
+      .rotate([-centerLon, -centerLat])
+      .clipAngle(179.9)
+      .scale(MAP_R / Math.PI)
+      .translate([C, C]);
+    const path = geoPath(proj as any);
+    return { land: path(LAND as any) || '', grat: path(GRATICULE as any) || '' };
+  }, [centerLat, centerLon]);
+
+  function handleClick(e: React.MouseEvent<SVGSVGElement>) {
+    if (!onGoto) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = ((e.clientX - rect.left) / rect.width) * SIZE - C;
+    const y = ((e.clientY - rect.top) / rect.height) * SIZE - C;
+    let az = (Math.atan2(y, x) * 180) / Math.PI + 90;
+    az = ((az % 360) + 360) % 360;
+    onGoto(Math.round(az));
+  }
+
+  const headLabel = headings.length ? headings[0] : null;
+
+  return (
+    <section className="flex flex-col h-full min-h-0 rounded-lg border border-border bg-card overflow-hidden">
+      {/* Header — matches the WinKeyer / Voice keyer panels. */}
+      <div className="flex items-center gap-2 px-3 py-1.5 bg-muted/40 border-b border-border shrink-0">
+        <Compass className="size-4 text-primary shrink-0" />
+        <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Rotor</span>
+        <span className={cn('size-2 rounded-full', rotorEnabled ? 'bg-success' : 'bg-muted-foreground/40')}
+          title={rotorEnabled ? 'Rotator connected' : 'Rotator disabled'} />
+        <div className="flex-1" />
+        {pattern && (
+          <span
+            className={cn('px-1 py-px rounded text-[9px] font-bold tracking-wide',
+              pattern === 'reverse' ? 'bg-warning-muted text-warning-muted-foreground'
+                : pattern === 'bi' ? 'bg-info-muted text-info-muted-foreground'
+                : 'bg-success-muted text-success-muted-foreground')}
+            title={pattern === 'reverse' ? 'Ultrabeam reversed — radiates opposite the boom'
+              : pattern === 'bi' ? 'Ultrabeam bidirectional — radiates both ways'
+              : 'Ultrabeam normal'}>
+            {pattern === 'reverse' ? 'REV' : pattern === 'bi' ? 'BI' : 'NORM'}
+          </span>
+        )}
+        <span className="font-mono text-sm font-bold text-success tabular-nums">
+          {headLabel != null ? `${Math.round(headLabel).toString().padStart(3, '0')}°` : '—'}
+        </span>
+        {onClose && (
+          <button className="text-muted-foreground hover:text-foreground" title="Hide rotor" onClick={onClose}>
+            <X className="size-3.5" />
+          </button>
+        )}
+      </div>
+
+      {/* Multiple rotors — pick which one the dial shows and turns. */}
+      {rotors && rotors.length > 1 && (
+        <div className="flex flex-wrap gap-1 px-2 pt-1.5">
+          {rotors.map((nm, i) => {
+            const active = (activeRotor ?? 0) === i;
+            const label = nm?.trim() || `Rotor ${i + 1}`;
+            return (
+              <button
+                key={i}
+                onClick={() => onSelectRotor?.(i)}
+                className={cn(
+                  'flex-1 min-w-[48px] px-1.5 py-0.5 rounded text-[10px] font-semibold truncate transition-colors',
+                  active
+                    ? 'bg-success text-success-foreground'
+                    : 'bg-muted text-muted-foreground hover:bg-muted/70',
+                )}
+                title={label}
+              >
+                {label}
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      <div className="flex items-center justify-center p-2 min-h-0">
+        <svg
+          viewBox={`0 0 ${SIZE} ${SIZE}`}
+          className={onGoto ? 'cursor-pointer select-none' : 'select-none'}
+          style={{ width: SIZE, height: SIZE }}
+          onClick={handleClick}
+        >
+          <defs>
+            <clipPath id="rotorDial"><circle cx={C} cy={C} r={MAP_R} /></clipPath>
+          </defs>
+          {/* water + world map, clipped to the dial */}
+          <circle cx={C} cy={C} r={MAP_R} fill="#d3e7f1" />
+          <g clipPath="url(#rotorDial)">
+            {grat && <path d={grat} fill="none" stroke="#9cc0d6" strokeWidth={0.4} opacity={0.7} />}
+            {land && <path d={land} fill="#dfe2cf" stroke="#9aa589" strokeWidth={0.4} />}
+          </g>
+          {/* green azimuth bezel */}
+          <circle cx={C} cy={C} r={R} fill="none" stroke="#16a34a" strokeWidth={5} />
+
+          {/* ticks every 10°, longer at 30° */}
+          {Array.from({ length: 36 }, (_, i) => i * 10).map((d) => {
+            const major = d % 30 === 0;
+            const [x1, y1] = pt(d, MAP_R);
+            const [x2, y2] = pt(d, MAP_R - (major ? 7 : 4));
+            return <line key={d} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#475569" strokeWidth={major ? 1 : 0.6} opacity={0.7} />;
+          })}
+          {/* cardinal labels + degree numbers at 45° */}
+          {cardinals.map(({ d, l }) => {
+            const [x, y] = pt(d, MAP_R - 13);
+            return <text key={l} x={x} y={y} textAnchor="middle" dominantBaseline="central" className="fill-slate-700" style={{ fontSize: l.length > 1 ? 7 : 9, fontWeight: 700 }}>{l}</text>;
+          })}
+
+          {/* DX short-path bearing → small red marker on the bezel */}
+          {bearing != null && (() => { const [x, y] = pt(bearing, MAP_R); return (
+            <circle cx={x} cy={y} r={3} fill="#dc2626" stroke="#fff" strokeWidth={1} />
+          ); })()}
+
+          {/* mechanical boom (rotor) heading — grey dashed needle, shown when the
+              Ultrabeam radiates somewhere other than the boom (reverse/bi) so the
+              operator sees where the antenna physically points vs where it boom-sits */}
+          {boomHeading != null && pattern && pattern !== 'normal' && (() => {
+            const [x, y] = pt(boomHeading, MAP_R - 2);
+            return (
+              <g>
+                <title>Boom (rotor) {Math.round(boomHeading)}°</title>
+                <line x1={C} y1={C} x2={x} y2={y} stroke="#64748b" strokeWidth={2} strokeDasharray="3 3" strokeLinecap="round" />
+                <circle cx={x} cy={y} r={3} fill="#64748b" stroke="#fff" strokeWidth={1} />
+              </g>
+            );
+          })()}
+
+          {/* radiating heading needle(s) — green; two when bidirectional */}
+          {headings.map((h, i) => { const [x, y] = pt(h, MAP_R - 2); return (
+            <g key={i}>
+              <line x1={C} y1={C} x2={x} y2={y} stroke="#15803d" strokeWidth={3} strokeLinecap="round" opacity={i === 0 ? 1 : 0.55} />
+              <polygon points={`${x},${y} ${pt(h - 5, MAP_R - 12).join(',')} ${pt(h + 5, MAP_R - 12).join(',')}`} fill="#15803d" opacity={i === 0 ? 1 : 0.55} />
+            </g>
+          ); })}
+          <circle cx={C} cy={C} r={3.5} fill="#15803d" stroke="#fff" strokeWidth={1} />
+        </svg>
+      </div>
+    </section>
+  );
+}

frontend/src/components/ScpPanel.tsx

@@ -0,0 +1,63 @@
+import { SpellCheck, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
+
+export type ScpResult = { partial?: string[]; nplus1?: string[] };
+
+// ScpPanel — Super Check Partial + N+1 callsign helper, split in two columns.
+// Left: master calls that CONTAIN what you've typed (spot/correct a call). Right:
+// calls one edit away (busted-call check). Clicking a suggestion fills the entry.
+export function ScpPanel({ result, currentCall, count, onPick, onClose }: {
+  result: ScpResult;
+  currentCall: string;
+  count: number;              // master-list size (0 = list not downloaded yet)
+  onPick: (call: string) => void;
+  onClose: () => void;
+}) {
+  const { t } = useI18n();
+  const cur = (currentCall || '').trim().toUpperCase();
+  const partial = result.partial ?? [];
+  const nplus1 = result.nplus1 ?? [];
+
+  const Col = ({ title, tone, calls, empty }: { title: string; tone: string; calls: string[]; empty: string }) => (
+    <div className="flex-1 min-w-0 flex flex-col">
+      <div className={cn('text-[10px] font-bold uppercase tracking-wider px-1.5 py-1 border-b border-border/50', tone)}>{title}</div>
+      <div className="flex-1 min-h-0 overflow-y-auto p-1 space-y-0.5">
+        {calls.length === 0 ? (
+          <div className="text-[10px] text-muted-foreground/70 italic px-1 py-1">{empty}</div>
+        ) : calls.map((c) => (
+          <button key={c} type="button" onClick={() => onPick(c)}
+            title={t('scp.fill', { call: c })}
+            className={cn('w-full text-left rounded px-1.5 py-0.5 font-mono text-xs transition-colors',
+              c === cur ? 'bg-success/20 text-success font-bold'
+                : 'hover:bg-primary/15 text-foreground/90')}>
+            {c}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="h-full flex flex-col rounded-xl border border-border bg-gradient-to-b from-card to-muted/30 shadow-sm overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border/60 bg-muted/40 shrink-0">
+        <SpellCheck className={cn('size-4', count > 0 ? 'text-primary' : 'text-muted-foreground')} />
+        <span className="text-xs font-bold uppercase tracking-[0.18em] text-foreground/80">{t('scp.title')}</span>
+        <span className="flex-1" />
+        <button type="button" onClick={onClose} className="text-muted-foreground hover:text-foreground transition-colors" title={t('scp.close')}>
+          <X className="size-3.5" />
+        </button>
+      </div>
+      {count === 0 ? (
+        <div className="flex-1 min-h-0 flex items-center justify-center text-[11px] text-muted-foreground italic text-center px-3">
+          {t('scp.noList')}
+        </div>
+      ) : (
+        <div className="flex-1 min-h-0 flex divide-x divide-border/60">
+          <Col title={t('scp.partial')} tone="text-primary" calls={partial} empty={t('scp.typeMore')} />
+          <Col title="N+1" tone="text-warning" calls={nplus1} empty={t('scp.none')} />
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/SendSpotModal.tsx

@@ -6,6 +6,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
+import { useI18n } from '@/lib/i18n';
 
 export interface RecentSpotQSO {
   callsign: string;
@@ -33,6 +34,7 @@ interface Props {
 // to the mode). A "Latest QSOs" list lets the operator one-click a recent
 // contact into the form.
 export function SendSpotModal({ open, onClose, defaultCall, defaultFreqKHz, defaultMode, targetName, recent, onSend }: Props) {
+  const { t } = useI18n();
   const [call, setCall] = useState('');
   const [freqKHz, setFreqKHz] = useState('');
   const [message, setMessage] = useState('');
@@ -56,8 +58,8 @@ export function SendSpotModal({ open, onClose, defaultCall, defaultFreqKHz, defa
   async function send() {
     const c = call.trim().toUpperCase();
     const f = parseFloat(freqKHz);
-    if (!c) { setError('Callsign required'); return; }
-    if (!f || f <= 0) { setError('Frequency (kHz) required'); return; }
+    if (!c) { setError(t('spm.callRequired')); return; }
+    if (!f || f <= 0) { setError(t('spm.freqRequired')); return; }
     setBusy(true);
     setError('');
     try {
@@ -84,25 +86,25 @@ export function SendSpotModal({ open, onClose, defaultCall, defaultFreqKHz, defa
       <DialogContent className="max-w-md">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
-            <Satellite className="size-4 text-primary" /> Send DX Spot
+            <Satellite className="size-4 text-primary" /> {t('spm.title')}
           </DialogTitle>
         </DialogHeader>
 
         <div className="px-5 py-3 space-y-3">
           <div className="flex gap-3">
             <div className="flex flex-col flex-1">
-              <Label className="mb-1">Callsign</Label>
+              <Label className="mb-1">{t('spm.callsign')}</Label>
               <Input
                 ref={callRef}
                 className="font-mono uppercase font-bold"
                 value={call}
                 onChange={(e) => setCall(e.target.value.toUpperCase())}
                 onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); send(); } }}
-                placeholder="DX call"
+                placeholder={t('spm.callPh')}
               />
             </div>
             <div className="flex flex-col w-32">
-              <Label className="mb-1">Frequency (kHz)</Label>
+              <Label className="mb-1">{t('spm.frequency')}</Label>
               <Input
                 className="font-mono"
                 value={freqKHz}
@@ -113,18 +115,18 @@ export function SendSpotModal({ open, onClose, defaultCall, defaultFreqKHz, defa
             </div>
           </div>
           <div className="flex flex-col">
-            <Label className="mb-1">Message</Label>
+            <Label className="mb-1">{t('spm.message')}</Label>
             <Input
               value={message}
               onChange={(e) => setMessage(e.target.value)}
               onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); send(); } }}
-              placeholder="e.g. CW · TNX QSO"
+              placeholder={t('spm.messagePh')}
             />
           </div>
 
           {recent.length > 0 && (
             <div>
-              <Label className="mb-1 block">Latest QSOs</Label>
+              <Label className="mb-1 block">{t('spm.latestQsos')}</Label>
               <div className="max-h-40 overflow-y-auto rounded-md border border-border divide-y divide-border/60">
                 {recent.map((q, i) => (
                   <button
@@ -142,17 +144,17 @@ export function SendSpotModal({ open, onClose, defaultCall, defaultFreqKHz, defa
             </div>
           )}
 
-          {error && <div className="text-xs text-rose-600">{error}</div>}
+          {error && <div className="text-xs text-danger">{error}</div>}
         </div>
 
         <DialogFooter>
           <span className="text-[11px] text-muted-foreground mr-auto self-center">
-            {ok ? 'Spot sent ✓' : targetName ? `→ ${targetName}` : 'Master cluster'}
+            {ok ? t('spm.spotSent') : targetName ? `→ ${targetName}` : t('spm.masterCluster')}
           </span>
-          <Button variant="outline" onClick={onClose} disabled={busy}>Cancel</Button>
+          <Button variant="outline" onClick={onClose} disabled={busy}>{t('spm.cancel')}</Button>
           <Button onClick={send} disabled={busy}>
             {busy ? <Loader2 className="size-3.5 animate-spin" /> : <Satellite className="size-3.5" />}
-            {busy ? 'Sending…' : 'Send spot'}
+            {busy ? t('spm.sending') : t('spm.sendSpot')}
           </Button>
         </DialogFooter>
       </DialogContent>

frontend/src/components/ShutdownProgress.tsx

@@ -37,15 +37,15 @@ export function ShutdownProgress() {
           ) : steps.map((s) => (
             <div key={s.id} className="flex items-start gap-2 text-sm">
               <div className="mt-0.5 w-4 flex items-center justify-center">
-                {s.status === 'done'    && <CheckCircle2 className="size-4 text-emerald-600" />}
+                {s.status === 'done'    && <CheckCircle2 className="size-4 text-success" />}
                 {s.status === 'running' && <Loader2 className="size-4 animate-spin text-primary" />}
-                {s.status === 'error'   && <XCircle className="size-4 text-rose-600" />}
+                {s.status === 'error'   && <XCircle className="size-4 text-danger" />}
                 {s.status === 'pending' && <span className="size-2 rounded-full bg-muted-foreground/40" />}
               </div>
               <div className="flex-1">
                 <div className={
                   s.status === 'done'    ? 'text-foreground'
-                  : s.status === 'error' ? 'text-rose-700 font-medium'
+                  : s.status === 'error' ? 'text-danger font-medium'
                   : s.status === 'pending' ? 'text-muted-foreground'
                   : 'text-foreground font-medium'
                 }>

frontend/src/components/StationControlPanel.tsx

@@ -0,0 +1,735 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Plus, Pencil, Trash2, Power, PlugZap, Loader2, Check, X, Compass, Square, Antenna as AntennaIcon, ArrowDownToLine, Minus, RefreshCw, GripVertical } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
+import { writeUiPref } from '@/lib/uiPref';
+import { RotorCompass } from '@/components/RotorCompass';
+import { AmpCard } from '@/components/AmpCard';
+import { TunerCard } from '@/components/TunerCard';
+import type { TGStatus } from '@/components/TunerGeniusPanel';
+import {
+  GetStationDevices, SaveStationDevices, GetStationStatus, StationSetRelay,
+  GetRotatorHeading, RotatorGoTo, RotatorStop, SetActiveRotor,
+  GetUltrabeamStatus, SetUltrabeamDirection, UltrabeamRetract, MotorSetElement, MotorReadElements,
+  ListDenkoviDevices, ListSerialPorts, TestStationDevice,
+  GetAmpStatuses, GetFlexState,
+  GetTunerGeniusStatus, GetTunerGeniusSettings,
+} from '../../wailsjs/go/main/App';
+
+type RotatorProps = { centerLat?: number | null; centerLon?: number | null; bearing?: number | null };
+
+type Device = { id: string; type: string; name: string; host: string; user?: string; pass?: string; channels?: number; labels: string[] };
+type Relay = { number: number; label: string; on: boolean };
+type DevStatus = { id: string; name: string; type: string; connected: boolean; error?: string; relays: Relay[] };
+
+// Dashboard geometry: a grid of EQUAL columns whose cards also share a common
+// HEIGHT per row — every card stretches to the tallest one beside it. Masonry
+// packed tighter but left the row edges ragged, which read as untidy on a wide
+// screen; aligned rows are what an operator expects from a dashboard.
+const CARD_MIN = 430; // narrowest a card may get before "Auto" drops a column
+const GRID_GAP = 16; // px between cards, both axes
+
+const RELAY_COUNT: Record<string, number> = { webswitch: 5, kmtronic: 8, denkovi: 8, usbrelay: 8, dingtian: 2 };
+const TYPE_LABEL: Record<string, string> = { webswitch: 'WebSwitch 1216H', kmtronic: 'KMTronic 8-relay', denkovi: 'Denkovi USB (FT245)', usbrelay: 'Denkovi USB (serial)', dingtian: 'Dingtian IOT relay' };
+
+// Relay count for a configured device: fixed by type, except Denkovi (4/8) and
+// the generic USB-serial board, whose channel count the user picks.
+const chanCount = (d: Device): number =>
+  (d.type === 'denkovi' || d.type === 'usbrelay') ? (d.channels && d.channels >= 1 ? d.channels : 8)
+    : d.type === 'dingtian' ? (d.channels && d.channels >= 1 ? d.channels : 2)
+      : (RELAY_COUNT[d.type] ?? 5);
+
+function blankDevice(): Device {
+  return { id: '', type: 'webswitch', name: '', host: '', user: '', pass: '', labels: Array(5).fill('') };
+}
+
+type Heading = { enabled: boolean; ok: boolean; azimuth: number; rotors?: string[]; active?: number };
+
+// RotatorWidget shows the configured rotator (Settings → Rotator) right in the
+// Station Control tab: a live compass you can click to turn, a heading readout, a
+// GoTo box, quick N/E/S/W presets, and Stop. Heading is polled by the panel and
+// passed in (so the panel can also order this widget); it drives the shared
+// rotator backend.
+function RotatorWidget({ hd, refetch, centerLat, centerLon, bearing, t }: RotatorProps & {
+  hd: Heading; refetch: () => void; t: (k: string, v?: any) => string;
+}) {
+  const [goto, setGoto] = useState('');
+  const [err, setErr] = useState('');
+
+  const turn = (az: number) => {
+    const a = ((Math.round(az) % 360) + 360) % 360;
+    RotatorGoTo(a, -1).then(refetch).catch((e) => setErr(String(e?.message ?? e)));
+  };
+  const poll = refetch;
+
+  const presets: [string, number][] = [['N', 0], ['E', 90], ['S', 180], ['W', 270]];
+  return (
+    <div className="rounded-xl border border-border bg-card shadow-sm overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border/60 bg-muted/30">
+        <Compass className="size-4 text-primary" />
+        <div className="text-sm font-semibold">{t('station.rotator')}</div>
+        <span className={cn('ml-auto size-2 rounded-full', hd.ok ? 'bg-success' : 'bg-warning')}
+          title={hd.ok ? t('station.online') : t('station.rotatorNoRead')} />
+      </div>
+      <div className="p-3 flex gap-4 items-start">
+        <RotorCompass
+          bearing={bearing ?? null}
+          headings={hd.ok ? [hd.azimuth] : []}
+          centerLat={centerLat ?? null}
+          centerLon={centerLon ?? null}
+          rotorEnabled={hd.ok}
+          rotors={hd.rotors}
+          activeRotor={hd.active}
+          onSelectRotor={(i) => { SetActiveRotor(i).then(refetch).catch((e) => setErr(String(e?.message ?? e))); }}
+          onGoto={(az) => turn(az)}
+        />
+        <div className="flex-1 min-w-0 space-y-2">
+          <div className="font-mono">
+            <span className="text-2xl font-bold tabular-nums">{hd.ok ? `${hd.azimuth}°` : '—'}</span>
+          </div>
+          <div className="flex gap-1">
+            {presets.map(([lbl, az]) => (
+              <button key={lbl} type="button" onClick={() => turn(az)}
+                className="flex-1 rounded-md border border-border bg-muted/40 py-1 text-xs font-semibold hover:bg-muted">
+                {lbl}
+              </button>
+            ))}
+          </div>
+          <div className="flex gap-1.5">
+            <Input value={goto} onChange={(e) => setGoto(e.target.value.replace(/[^0-9]/g, ''))}
+              onKeyDown={(e) => { if (e.key === 'Enter' && goto) turn(parseInt(goto, 10)); }}
+              placeholder="0–359" className="h-8 flex-1 min-w-0 font-mono text-sm" />
+            <Button size="sm" className="h-8 shrink-0" disabled={!goto} onClick={() => turn(parseInt(goto, 10))}>{t('station.go')}</Button>
+          </div>
+          <Button size="sm" variant="outline" className="h-8 w-full" onClick={() => RotatorStop().then(poll).catch((e) => setErr(String(e?.message ?? e)))}>
+            <Square className="size-3 mr-1" /> {t('station.stop')}
+          </Button>
+          {err && <div className="text-[11px] text-destructive break-words">{err}</div>}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type AntStatus = { enabled: boolean; type: string; connected: boolean; direction: number; frequency: number; moving: boolean; elements: number[] };
+
+// MotorAntennaWidget controls a motorized antenna (Ultrabeam / SteppIR) from the
+// Station Control tab: pattern (Normal / 180° / Bi), Retract, and — Ultrabeam
+// only — per-element length adjustment. Heading/state is polled by the panel.
+const ELEMENT_STEP = 2; // the physical console adjusts 2 mm per press
+
+// elementName maps an element index to a ham-radio name: 0 = reflector,
+// 1 = driven element, then Director 1, 2, 3…
+function elementName(i: number, t: (k: string, v?: any) => string): string {
+  if (i === 0) return t('station.reflector');
+  if (i === 1) return t('station.driven');
+  return `${t('station.director')} ${i - 1}`;
+}
+
+function MotorAntennaWidget({ ant, refetch, t }: { ant: AntStatus; refetch: () => void; t: (k: string, v?: any) => string }) {
+  const [err, setErr] = useState('');
+  const [lengths, setLengths] = useState<number[]>([]); // current element lengths (mm), from ReadElements
+  const [reading, setReading] = useState(false);
+  const [busyEl, setBusyEl] = useState<number | null>(null);
+  const [editingEl, setEditingEl] = useState<number | null>(null); // element whose mm is being typed
+  const [editVal, setEditVal] = useState('');
+  const run = (p: Promise<any>) => p.then(refetch).catch((e) => setErr(String(e?.message ?? e)));
+  const isUB = ant.type !== 'steppir';
+
+  const readLengths = useCallback(async () => {
+    setReading(true); setErr('');
+    try { setLengths(((await MotorReadElements()) ?? []) as number[]); }
+    catch (e: any) { setErr(String(e?.message ?? e)); }
+    finally { setReading(false); }
+  }, []);
+  // Read the current lengths once when the Ultrabeam widget mounts/connects, so
+  // +/- starts from the real values rather than blind.
+  useEffect(() => { if (isUB && ant.connected) readLengths(); }, [isUB, ant.connected, readLengths]);
+
+  // Send an absolute length to one element and remember it as the new baseline.
+  const setLen = async (i: number, mm: number) => {
+    const next = Math.max(0, Math.round(mm));
+    const prev = lengths[i] ?? 0;
+    setBusyEl(i); setErr('');
+    setLengths((ls) => { const c = [...ls]; c[i] = next; return c; }); // optimistic
+    try { await MotorSetElement(i, next); refetch(); }
+    catch (e: any) {
+      // Rejected by the controller — most often the element is at its travel
+      // limit for this band (extending on a low band). Revert the optimistic
+      // value so the display stays truthful, and explain the likely cause when
+      // the failed move was an extension.
+      setLengths((ls) => { const c = [...ls]; c[i] = prev; return c; });
+      setErr(next > prev ? t('station.atMax') : String(e?.message ?? e));
+    }
+    finally { setBusyEl(null); }
+  };
+  // Nudge one element by ±2 mm from its current known length.
+  const nudge = (i: number, delta: number) => setLen(i, (lengths[i] ?? 0) + delta);
+  // Commit a typed exact length (click on the mm value). Lets the operator fix
+  // the baseline when the auto-read is off, so +/- then work reliably.
+  const commitEdit = (i: number) => {
+    const v = parseInt(editVal, 10);
+    setEditingEl(null);
+    if (!isNaN(v) && v >= 0 && v !== lengths[i]) setLen(i, v);
+  };
+  const dirs: [number, string][] = [[0, 'N'], [1, '180°'], [2, t('station.bi')]];
+  return (
+    <div className="rounded-xl border border-border bg-card shadow-sm overflow-hidden h-full">
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border/60 bg-muted/30">
+        <AntennaIcon className="size-4 text-primary" />
+        <div className="min-w-0">
+          <div className="text-sm font-semibold truncate">{isUB ? 'Ultrabeam' : 'SteppIR'}</div>
+          {ant.frequency > 0 && <div className="text-[10px] text-muted-foreground font-mono">{(ant.frequency / 1000).toFixed(3)} MHz</div>}
+        </div>
+        {ant.moving && <span className="ml-auto text-[10px] font-semibold text-warning animate-pulse">{t('station.moving')}</span>}
+        <span className={cn('size-2 rounded-full shrink-0', ant.moving ? '' : 'ml-auto', ant.connected ? 'bg-success' : 'bg-muted-foreground/40')}
+          title={ant.connected ? t('station.online') : t('station.offline')} />
+      </div>
+      <div className="p-3 space-y-3">
+        <div>
+          <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground mb-1">{t('station.pattern')}</div>
+          <div className="flex gap-1">
+            {dirs.map(([d, lbl]) => (
+              <button key={d} type="button" disabled={!ant.connected}
+                onClick={() => run(SetUltrabeamDirection(d))}
+                className={cn('flex-1 rounded-md border py-1.5 text-xs font-semibold transition-colors disabled:opacity-40',
+                  ant.direction === d ? 'bg-primary text-primary-foreground border-primary' : 'border-border hover:bg-muted')}>
+                {lbl}
+              </button>
+            ))}
+          </div>
+        </div>
+        <button type="button" disabled={!ant.connected}
+          onClick={() => run(UltrabeamRetract())}
+          className="w-full flex items-center justify-center gap-1.5 rounded-md border border-warning-border bg-warning-muted text-warning-muted-foreground py-1.5 text-xs font-semibold hover:brightness-95 disabled:opacity-40">
+          <ArrowDownToLine className="size-3.5" /> {t('station.retract')}
+        </button>
+
+        {isUB && (
+          <div>
+            <div className="flex items-center gap-2 mb-1.5">
+              <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">{t('station.elements')}</span>
+              <button type="button" onClick={readLengths} disabled={!ant.connected || reading}
+                className="text-[10px] text-primary hover:underline inline-flex items-center gap-1 disabled:opacity-40" title={t('station.readLengths')}>
+                <RefreshCw className={cn('size-3', reading && 'animate-spin')} /> {t('station.read')}
+              </button>
+            </div>
+            {lengths.length === 0 ? (
+              <p className="text-[11px] text-muted-foreground">{t('station.noLengths')}</p>
+            ) : (
+              <div className="space-y-1.5">
+                {/* The READ_BANDS reply is undocumented and its 16-bit parse picks
+                    up structural bytes past the real data (varying by band), which
+                    made 6+ bogus "elements" appear. Ultrabeam beams are 3-element,
+                    and ModifyElement addresses elements 0..2 — so show just those. */}
+                {lengths.map((mm, i) => ({ mm, i })).slice(0, 3).map(({ mm, i }) => (
+                  <div key={i} className="flex items-center gap-2">
+                    <span className="text-xs w-20 shrink-0 text-muted-foreground truncate">{elementName(i, t)}</span>
+                    <button type="button" disabled={!ant.connected || busyEl !== null}
+                      onClick={() => nudge(i, -ELEMENT_STEP)}
+                      className="flex items-center justify-center size-7 rounded-md border border-border hover:bg-muted disabled:opacity-40 shrink-0">
+                      <Minus className="size-3.5" />
+                    </button>
+                    {editingEl === i ? (
+                      <input autoFocus type="number" value={editVal}
+                        onChange={(e) => setEditVal(e.target.value)}
+                        onBlur={() => commitEdit(i)}
+                        onKeyDown={(e) => { if (e.key === 'Enter') commitEdit(i); if (e.key === 'Escape') setEditingEl(null); }}
+                        className="text-sm font-mono font-bold flex-1 min-w-0 text-center tabular-nums bg-transparent border border-primary rounded px-1" />
+                    ) : (
+                      <span className="text-sm font-mono font-bold flex-1 min-w-0 text-center tabular-nums cursor-pointer hover:underline"
+                        title={t('station.setExactLen')}
+                        onClick={() => { setEditingEl(i); setEditVal(String(mm)); }}>
+                        {busyEl === i ? <Loader2 className="size-3.5 animate-spin inline" /> : `${mm} mm`}
+                      </span>
+                    )}
+                    <button type="button" disabled={!ant.connected || busyEl !== null}
+                      onClick={() => nudge(i, ELEMENT_STEP)}
+                      className="flex items-center justify-center size-7 rounded-md border border-border hover:bg-muted disabled:opacity-40 shrink-0">
+                      <Plus className="size-3.5" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+            <p className="text-[10px] text-muted-foreground mt-1">{t('station.elementsHint')}</p>
+          </div>
+        )}
+        {err && <div className="text-[11px] text-destructive break-words">{err}</div>}
+      </div>
+    </div>
+  );
+}
+
+export function StationControlPanel({ centerLat, centerLon, bearing }: RotatorProps) {
+  const { t } = useI18n();
+  const [devices, setDevices] = useState<Device[]>([]);
+  const [status, setStatus] = useState<Record<string, DevStatus>>({});
+  const [editing, setEditing] = useState<Device | null>(null); // device being added/edited
+  const [busy, setBusy] = useState<Record<string, boolean>>({}); // per-relay in-flight
+  const [rot, setRot] = useState<Heading>({ enabled: false, ok: false, azimuth: 0 });
+  const [ant, setAnt] = useState<AntStatus>({ enabled: false, type: '', connected: false, direction: 0, frequency: 0, moving: false, elements: [] });
+  // Widget order (rotator + device ids), drag-and-drop reorderable, persisted.
+  const [order, setOrder] = useState<string[]>(() => {
+    try { const v = JSON.parse(localStorage.getItem('opslog.stationOrder') || '[]'); return Array.isArray(v) ? v : []; } catch { return []; }
+  });
+  const dragId = useRef<string | null>(null);
+  // Max columns per row (persisted). "Auto" fills the window; a number caps the
+  // row so cards wrap onto further lines even when there's horizontal room.
+  const [cols, setCols] = useState<string>(() => localStorage.getItem('opslog.stationCols') || 'auto');
+
+  // How many columns the dashboard shows. "Auto" fits as many CARD_MIN-wide
+  // cards as the window allows; an explicit count is honoured as asked, even
+  // past that width — the operator can see his own screen.
+  const gridRef = useRef<HTMLDivElement | null>(null);
+  const [colCount, setColCount] = useState(1);
+
+  useLayoutEffect(() => {
+    if (cols !== 'auto') { setColCount(Number(cols) || 1); return; }
+    const el = gridRef.current;
+    if (!el) return;
+    const measure = () => setColCount(Math.max(1, Math.floor((el.clientWidth + GRID_GAP) / (CARD_MIN + GRID_GAP))));
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [cols]);
+  // Amplifiers (Settings → Amplifier): shown here so operators without a
+  // FlexRadio panel still get the controls. EVERY configured amp gets its own
+  // card (identical to the Flex panel's) — no dropdown. Polled fast (1.5s) so the
+  // FlexRadio meters read live; the Flex state rides along because a PGXL's
+  // OPERATE/meters come from the radio, not the direct GSCP link.
+  const [amps, setAmps] = useState<any[]>([]);
+  const [flexState, setFlexState] = useState<any>(null);
+  useEffect(() => {
+    let alive = true;
+    const load = () => Promise.all([
+      GetAmpStatuses().catch(() => []),
+      GetFlexState().catch(() => null),
+    ]).then(([l, fx]: any[]) => { if (alive) { setAmps((l ?? []) as any[]); setFlexState(fx); } });
+    load();
+    const id = window.setInterval(load, 1500);
+    return () => { alive = false; window.clearInterval(id); };
+  }, []);
+  // Tuner Genius XL (4O3A): a card here too, so operators without a FlexRadio
+  // panel still get the controls. Re-read the enabled flag so it appears/hides
+  // without a restart.
+  const [tg, setTg] = useState<TGStatus>({ connected: false });
+  const [tgEnabled, setTgEnabled] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    const load = async () => {
+      try { const en: any = await GetTunerGeniusSettings(); if (alive) setTgEnabled(!!en?.enabled); } catch {}
+      try { const s: any = await GetTunerGeniusStatus(); if (alive && s) setTg(s as TGStatus); } catch {}
+    };
+    load();
+    const id = window.setInterval(load, 500); // fast so meters track TX (see App.tsx)
+    return () => { alive = false; window.clearInterval(id); };
+  }, []);
+
+  const loadDevices = useCallback(async () => {
+    try { setDevices(((await GetStationDevices()) ?? []) as Device[]); } catch { /* db not ready */ }
+  }, []);
+
+  const poll = useCallback(async () => {
+    try {
+      const s = ((await GetStationStatus()) ?? []) as DevStatus[];
+      setStatus(Object.fromEntries(s.map((d) => [d.id, d])));
+    } catch { /* ignore transient */ }
+  }, []);
+  const pollRot = useCallback(async () => {
+    try { setRot((await GetRotatorHeading()) as any); } catch { /* ignore */ }
+  }, []);
+  const pollAnt = useCallback(async () => {
+    try { setAnt((await GetUltrabeamStatus()) as any); } catch { /* ignore */ }
+  }, []);
+
+  useEffect(() => { loadDevices(); }, [loadDevices]);
+  useEffect(() => {
+    poll(); pollRot(); pollAnt();
+    const id = window.setInterval(() => { poll(); pollRot(); pollAnt(); }, 3000);
+    return () => window.clearInterval(id);
+  }, [poll, pollRot, pollAnt, devices.length]);
+
+  const persistOrder = (next: string[]) => { setOrder(next); writeUiPref('opslog.stationOrder', JSON.stringify(next)); };
+  // Reorder so `dragged` lands just before `target`.
+  const onDrop = (targetId: string) => {
+    const src = dragId.current; dragId.current = null;
+    if (!src || src === targetId) return;
+    const ids = widgetIds.filter((id) => id !== src);
+    const at = ids.indexOf(targetId);
+    ids.splice(at < 0 ? ids.length : at, 0, src);
+    persistOrder(ids);
+  };
+
+  const persist = async (next: Device[]) => {
+    setDevices(next);
+    try { await SaveStationDevices(next as any); } catch { /* surfaced by status */ }
+    await loadDevices();
+    poll();
+  };
+
+  const toggle = async (dev: Device, relay: number, on: boolean) => {
+    const key = `${dev.id}:${relay}`;
+    setBusy((b) => ({ ...b, [key]: true }));
+    // Optimistic flip so the switch feels instant; the poll reconciles.
+    setStatus((st) => {
+      const d = st[dev.id]; if (!d) return st;
+      return { ...st, [dev.id]: { ...d, relays: d.relays.map((r) => (r.number === relay ? { ...r, on } : r)) } };
+    });
+    try { await StationSetRelay(dev.id, relay, on); } catch { /* poll will correct */ }
+    await poll();
+    setBusy((b) => ({ ...b, [key]: false }));
+  };
+
+  const saveEdit = async () => {
+    if (!editing) return;
+    const d = { ...editing, name: editing.name.trim() || TYPE_LABEL[editing.type], host: editing.host.trim() };
+    const exists = devices.some((x) => x.id && x.id === d.id);
+    await persist(exists ? devices.map((x) => (x.id === d.id ? d : x)) : [...devices, d]);
+    setEditing(null);
+  };
+
+  const removeDevice = async (id: string) => { await persist(devices.filter((x) => x.id !== id)); };
+
+  // Build the widget list (rotator first by default, then devices), then order it
+  // by the saved drag order — unknown ids fall to the end in their natural order.
+  const deviceCard = (dev: Device) => {
+    const st = status[dev.id];
+    const relays = st?.relays ?? dev.labels.map((label, i) => ({ number: i + 1, label, on: false }));
+    return (
+      <div className="rounded-xl border border-border bg-card shadow-sm overflow-hidden h-full">
+        <div className="flex items-center gap-2 px-3 py-2 border-b border-border/60 bg-muted/30">
+          <PlugZap className="size-4 text-primary" />
+          <div className="min-w-0">
+            <div className="text-sm font-semibold truncate">{dev.name || TYPE_LABEL[dev.type]}</div>
+            <div className="text-[10px] text-muted-foreground font-mono truncate">{TYPE_LABEL[dev.type]} · {dev.host}</div>
+          </div>
+          <span className={cn('ml-auto size-2 rounded-full shrink-0', st?.connected ? 'bg-success' : 'bg-muted-foreground/40')}
+            title={st?.connected ? t('station.online') : (st?.error || t('station.offline'))} />
+          <button className="text-muted-foreground hover:text-foreground" title={t('station.edit')}
+            onClick={() => setEditing({ ...dev, labels: [...dev.labels] })}><Pencil className="size-3.5" /></button>
+          <button className="text-muted-foreground hover:text-destructive" title={t('station.delete')}
+            onClick={() => removeDevice(dev.id)}><Trash2 className="size-3.5" /></button>
+        </div>
+        {/* Compact one-line relay buttons at a FIXED width so they don't stretch
+            across the whole card — they wrap to fill the available width instead. */}
+        <div className="p-2 flex flex-wrap gap-1.5">
+          {relays.map((r) => {
+            const key = `${dev.id}:${r.number}`;
+            const label = r.label || `${t('station.relay')} ${r.number}`;
+            return (
+              <button key={r.number} type="button" disabled={!st?.connected}
+                title={label}
+                onClick={() => toggle(dev, r.number, !r.on)}
+                className={cn('w-[150px] flex items-center gap-1.5 rounded-md border px-2 py-1 text-left transition-colors disabled:opacity-40',
+                  r.on ? 'bg-success/15 border-success/50' : 'bg-muted/30 border-border hover:bg-muted')}>
+                <span className={cn('flex items-center justify-center size-5 rounded shrink-0',
+                  r.on ? 'bg-success text-success-foreground' : 'bg-muted-foreground/15 text-muted-foreground')}>
+                  {busy[key] ? <Loader2 className="size-3 animate-spin" /> : <Power className="size-3" />}
+                </span>
+                <span className="flex-1 min-w-0 text-xs font-medium truncate">{label}</span>
+                <span className={cn('text-[9px] font-bold shrink-0', r.on ? 'text-success' : 'text-muted-foreground/50')}>
+                  {r.on ? t('station.on') : t('station.off')}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
+  // `wide` cards take two grid columns instead of one. The amplifier and tuner
+  // carry meter rows and a channel selector that are unreadable squeezed into a
+  // single ~430px column — they are the same cards the FlexRadio panel shows
+  // full-width, and they need that room here too.
+  const widgets: { id: string; node: React.ReactNode; wide?: boolean }[] = [];
+  if (rot.enabled) {
+    widgets.push({ id: 'rotator', node: <RotatorWidget hd={rot} refetch={pollRot} centerLat={centerLat} centerLon={centerLon} bearing={bearing} t={t} /> });
+  }
+  if (ant.enabled) {
+    widgets.push({ id: 'antenna', node: <MotorAntennaWidget ant={ant} refetch={pollAnt} t={t} /> });
+  }
+  // One card per configured amplifier (identical to the Flex panel's card).
+  for (const amp of amps) widgets.push({ id: `amp:${amp.id}`, node: <AmpCard amp={amp} flex={flexState} t={t} />, wide: true });
+  // Tuner Genius XL card (identical to the Flex panel's).
+  if (tgEnabled) widgets.push({ id: 'tuner', node: <TunerCard status={tg} t={t} />, wide: true });
+  for (const dev of devices) widgets.push({ id: dev.id, node: deviceCard(dev) });
+
+  const rank = (id: string) => { const i = order.indexOf(id); return i < 0 ? 1e6 : i; };
+  const ordered = widgets.map((w, i) => ({ ...w, i })).sort((a, b) => (rank(a.id) - rank(b.id)) || (a.i - b.i));
+  const widgetIds = ordered.map((w) => w.id);
+
+  const noDevices = devices.length === 0 && !rot.enabled && !ant.enabled && amps.length === 0 && !tgEnabled;
+
+  return (
+    <div className="flex-1 min-h-0 overflow-auto p-4">
+      <div className="flex items-center justify-between mb-3">
+        <h2 className="text-sm font-bold uppercase tracking-wider text-muted-foreground">{t('station.title')}</h2>
+        <div className="flex items-center gap-2">
+          {/* Max columns per row: Auto fills the window; 1/2/3/4 cap the row so a
+              card can sit on a further line even with horizontal room to spare. */}
+          <div className="flex items-center rounded-md border border-border overflow-hidden text-[11px]">
+            {(['auto', '1', '2', '3', '4', '5', '6'] as const).map((c) => (
+              <button key={c} type="button"
+                onClick={() => { setCols(c); writeUiPref('opslog.stationCols', c); }}
+                className={cn('px-2 py-1 font-medium', cols === c ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted')}>
+                {c === 'auto' ? t('station.colsAuto') : c}
+              </button>
+            ))}
+          </div>
+          <Button size="sm" variant="outline" onClick={() => setEditing(blankDevice())}>
+            <Plus className="size-3.5 mr-1" /> {t('station.addDevice')}
+          </Button>
+        </div>
+      </div>
+
+      {noDevices && !editing && (
+        <div className="max-w-4xl rounded-lg border border-dashed border-border p-8 text-center text-sm text-muted-foreground">
+          {t('station.empty')}
+        </div>
+      )}
+
+      {/* Dashboard grid: equal columns, and every card stretches to the height of
+          the tallest one on its row, so the rows line up instead of ending
+          ragged. One column each, two for the amplifier/tuner whose meter rows
+          need the room. Each card has a grip handle (left rail) as the drag
+          initiator, since the body is full of buttons. */}
+      <div ref={gridRef} style={{
+        display: 'grid',
+        gridTemplateColumns: `repeat(${colCount}, minmax(0, 1fr))`,
+        gap: `${GRID_GAP}px`,
+      }}>
+        {ordered.map((w) => (
+          <div key={w.id}
+            // A wide card takes two columns — but never more than there are, or
+            // the grid would grow a phantom column on a narrow window.
+            style={{ gridColumn: w.wide ? `span ${Math.min(2, colCount)}` : undefined }}
+            onDragOver={(e) => { if (dragId.current) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; } }}
+            onDrop={(e) => { if (dragId.current) { e.preventDefault(); onDrop(w.id); } }}>
+            {/* h-full down the chain is what makes the card fill the row height
+                rather than sit at its natural size in a taller cell. */}
+            <div className="flex items-stretch h-full">
+              <div draggable
+                onDragStart={(e) => { dragId.current = w.id; e.dataTransfer.effectAllowed = 'move'; }}
+                onDragEnd={() => { dragId.current = null; }}
+                title={t('station.dragMove')}
+                className={cn('flex items-center shrink-0 px-0.5 rounded-l-xl cursor-grab active:cursor-grabbing text-muted-foreground/30 hover:text-muted-foreground hover:bg-muted/40 transition-colors',
+                  dragId.current === w.id && 'opacity-60')}>
+                <GripVertical className="size-4" />
+              </div>
+              <div className="flex-1 min-w-0 [&>*]:h-full">{w.node}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {!noDevices && (
+        <p className="text-[11px] text-muted-foreground mt-2">{t('station.dragHint')}</p>
+      )}
+
+      {editing && (
+        <DeviceEditor device={editing} onChange={setEditing} onSave={saveEdit} onCancel={() => setEditing(null)} t={t} />
+      )}
+    </div>
+  );
+}
+
+function DeviceEditor({ device, onChange, onSave, onCancel, t }: {
+  device: Device; onChange: (d: Device) => void; onSave: () => void; onCancel: () => void; t: (k: string, v?: any) => string;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => { ref.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }, []);
+  const setType = (type: string) => {
+    const channels = (type === 'denkovi' || type === 'usbrelay') ? (device.channels || 8) : undefined;
+    const n = chanCount({ ...device, type, channels });
+    const labels = Array.from({ length: n }, (_, i) => device.labels[i] ?? '');
+    onChange({ ...device, type, channels, labels });
+  };
+  const setChannels = (channels: number) => {
+    const n = chanCount({ ...device, channels });
+    const labels = Array.from({ length: n }, (_, i) => device.labels[i] ?? '');
+    onChange({ ...device, channels, labels });
+  };
+  const isKM = device.type === 'kmtronic';
+  const isDingtian = device.type === 'dingtian';
+  const isDenkovi = device.type === 'denkovi';
+  const isUsbRelay = device.type === 'usbrelay';
+  // COM ports for the generic USB-serial relay picker.
+  const [serialPorts, setSerialPorts] = useState<string[]>([]);
+  useEffect(() => {
+    if (!isUsbRelay) return;
+    ListSerialPorts().then((p) => setSerialPorts((p ?? []) as string[])).catch(() => setSerialPorts([]));
+  }, [isUsbRelay]);
+  // Detected FTDI serials for the Denkovi picker.
+  const [denkoviSerials, setDenkoviSerials] = useState<string[]>([]);
+  const [detecting, setDetecting] = useState(false);
+  const [detectMsg, setDetectMsg] = useState('');
+  const detectDenkovi = async () => {
+    setDetecting(true);
+    setDetectMsg('');
+    try {
+      const list = ((await ListDenkoviDevices()) ?? []) as string[];
+      setDenkoviSerials(list);
+      // Auto-fill when there's exactly one and nothing chosen yet.
+      if (list.length >= 1 && !device.host.trim()) onChange({ ...device, host: list[0] });
+      setDetectMsg(list.length === 0 ? t('station.detectNone') : t('station.detectFound', { n: list.length }));
+    } catch (e: any) { setDenkoviSerials([]); setDetectMsg(String(e?.message || e || t('station.detectNone'))); }
+    finally { setDetecting(false); }
+  };
+  // Connection test result for the current device config.
+  const [testing, setTesting] = useState(false);
+  const [testMsg, setTestMsg] = useState<{ ok: boolean; text: string } | null>(null);
+  const testDevice = async () => {
+    setTesting(true);
+    setTestMsg(null);
+    try {
+      const r: any = await TestStationDevice(device as any);
+      setTestMsg(r?.ok
+        ? { ok: true, text: t('station.testOk', { n: r.relays }) }
+        : { ok: false, text: r?.error || t('station.testFail') });
+    } catch (e: any) { setTestMsg({ ok: false, text: String(e?.message || e || t('station.testFail')) }); }
+    finally { setTesting(false); }
+  };
+  useEffect(() => { if (isDenkovi) void detectDenkovi(); /* eslint-disable-next-line */ }, [isDenkovi]);
+  return (
+    <div ref={ref} className="mt-4 max-w-4xl rounded-xl border border-primary/40 bg-card p-4 space-y-3">
+      <div className="text-sm font-semibold">{device.id ? t('station.editDevice') : t('station.addDevice')}</div>
+      <div className="grid grid-cols-2 gap-3">
+        <div className="space-y-1">
+          <Label>{t('station.type')}</Label>
+          <Select value={device.type} onValueChange={setType}>
+            <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="webswitch">WebSwitch 1216H (5 relays)</SelectItem>
+              <SelectItem value="kmtronic">KMTronic 8-relay (LAN)</SelectItem>
+              <SelectItem value="dingtian">Dingtian IOT relay (LAN / WiFi)</SelectItem>
+              <SelectItem value="denkovi">Denkovi USB (FT245 / D2XX)</SelectItem>
+              <SelectItem value="usbrelay">Denkovi USB (serial / COM)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-1">
+          <Label>{t('station.name')}</Label>
+          <Input value={device.name} placeholder={TYPE_LABEL[device.type]} onChange={(e) => onChange({ ...device, name: e.target.value })} />
+        </div>
+      </div>
+      {(isDenkovi || isUsbRelay || isDingtian) && (
+        <div className="space-y-1 max-w-[10rem]">
+          <Label>{t('station.channels')}</Label>
+          <Select value={String(chanCount(device))} onValueChange={(v) => setChannels(parseInt(v, 10))}>
+            <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {(isDenkovi ? [4, 8] : isDingtian ? [2, 4, 8, 16, 24, 32] : [1, 2, 4, 8, 16]).map((n) => (
+                <SelectItem key={n} value={String(n)}>{n}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+      {isDenkovi ? (
+        <div className="space-y-1 max-w-md">
+          <Label>{t('station.ftdiSerial')}</Label>
+          <div className="flex items-center gap-2">
+            <Input className="font-mono flex-1" value={device.host} placeholder="DAE0006K"
+              list="denkovi-serials"
+              onChange={(e) => onChange({ ...device, host: e.target.value })} />
+            <datalist id="denkovi-serials">
+              {denkoviSerials.map((s) => <option key={s} value={s} />)}
+            </datalist>
+            <Button size="sm" variant="outline" onClick={detectDenkovi} disabled={detecting}>
+              {detecting ? <Loader2 className="size-3.5 mr-1 animate-spin" /> : <RefreshCw className="size-3.5 mr-1" />}
+              {t('station.detect')}
+            </Button>
+          </div>
+          <p className="text-[10px] text-muted-foreground">{t('station.ftdiHint')}</p>
+          {detectMsg && <p className="text-[11px] font-medium text-muted-foreground">{detectMsg}</p>}
+        </div>
+      ) : isUsbRelay ? (
+        <div className="space-y-1 max-w-md">
+          <Label>{t('station.comPort')}</Label>
+          <div className="flex items-center gap-2">
+            <Select value={device.host || '_'} onValueChange={(v) => onChange({ ...device, host: v === '_' ? '' : v })}>
+              <SelectTrigger className="h-9 flex-1"><SelectValue placeholder="— COM —" /></SelectTrigger>
+              <SelectContent>
+                {serialPorts.length === 0 && <SelectItem value="_" disabled>{t('station.noPorts')}</SelectItem>}
+                {serialPorts.map((p) => <SelectItem key={p} value={p}>{p}</SelectItem>)}
+              </SelectContent>
+            </Select>
+            <Button size="sm" variant="outline" onClick={() => ListSerialPorts().then((p) => setSerialPorts((p ?? []) as string[])).catch(() => {})}>
+              <RefreshCw className="size-3.5" />
+            </Button>
+          </div>
+          <p className="text-[10px] text-muted-foreground">{t('station.usbRelayHint')}</p>
+        </div>
+      ) : (
+      <div className={cn('grid gap-3', (isKM || isDingtian) ? 'grid-cols-3' : 'grid-cols-1')}>
+        <div className={cn('space-y-1', (isKM || isDingtian) ? '' : 'max-w-xs')}>
+          <Label>{t('station.host')}</Label>
+          <Input className="font-mono" value={device.host} placeholder="192.168.1.100" onChange={(e) => onChange({ ...device, host: e.target.value })} />
+          <span className="text-[10px] text-muted-foreground">{t('station.hostHint')}</span>
+        </div>
+        {/* Dingtian: both are OFF on a factory board — the session ID only when
+            "HTTP Session" is enabled in its web page, the password only when a
+            relay password is set. */}
+        {isDingtian && (
+          <>
+            <div className="space-y-1">
+              <Label>{t('station.dtSession')}</Label>
+              <Input className="font-mono" value={device.user ?? ''} placeholder={t('station.optional')}
+                onChange={(e) => onChange({ ...device, user: e.target.value })} />
+            </div>
+            <div className="space-y-1">
+              <Label>{t('station.dtPwd')}</Label>
+              <Input className="font-mono" value={device.pass ?? ''} placeholder="0"
+                onChange={(e) => onChange({ ...device, pass: e.target.value.replace(/[^0-9]/g, '') })} />
+            </div>
+          </>
+        )}
+        {isKM && (
+          <>
+            <div className="space-y-1">
+              <Label>{t('station.user')}</Label>
+              <Input value={device.user ?? ''} placeholder={t('station.optional')} onChange={(e) => onChange({ ...device, user: e.target.value })} />
+            </div>
+            <div className="space-y-1">
+              <Label>{t('station.pass')}</Label>
+              <Input type="password" value={device.pass ?? ''} placeholder={t('station.optional')} onChange={(e) => onChange({ ...device, pass: e.target.value })} />
+            </div>
+          </>
+        )}
+      </div>
+      )}
+      <div className="space-y-1">
+        <Label>{t('station.labels')}</Label>
+        <div className="grid grid-cols-4 gap-2">
+          {device.labels.map((lab, i) => (
+            <Input key={i} value={lab} placeholder={`${t('station.relay')} ${i + 1}`} className="h-8 text-xs"
+              onChange={(e) => { const labels = [...device.labels]; labels[i] = e.target.value; onChange({ ...device, labels }); }} />
+          ))}
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        {testMsg && (
+          <span className={cn('inline-flex items-center gap-1.5 text-xs font-medium', testMsg.ok ? 'text-success' : 'text-danger')}>
+            <span className={cn('size-2 rounded-full', testMsg.ok ? 'bg-success' : 'bg-danger')} />
+            {testMsg.text}
+          </span>
+        )}
+        <div className="ml-auto flex gap-2">
+          <Button size="sm" variant="outline" onClick={testDevice} disabled={testing || !device.host.trim()}>
+            {testing ? <Loader2 className="size-3.5 mr-1 animate-spin" /> : <PlugZap className="size-3.5 mr-1" />}
+            {t('station.test')}
+          </Button>
+          <Button size="sm" variant="ghost" onClick={onCancel}><X className="size-3.5 mr-1" />{t('station.cancel')}</Button>
+          <Button size="sm" onClick={onSave} disabled={!device.host.trim()}><Check className="size-3.5 mr-1" />{t('station.save')}</Button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/StatsPanel.tsx

@@ -0,0 +1,913 @@
+import { useEffect, useMemo, useState } from 'react';
+import { BarChart3, Loader2, RefreshCw, Table2 } from 'lucide-react';
+import { GetLogStats, GetContestRuns, GetOperators } from '../../wailsjs/go/main/App';
+import { useI18n } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Statistics dashboard.
+//
+// Colour rules this file obeys (they are not stylistic — they are what keeps the
+// charts readable and colour-blind-safe):
+//
+//  • A chart with ONE series uses ONE hue (--chart-1) for every bar. Colour
+//    encodes identity, never a magnitude the bar's length already shows.
+//  • The categorical slots (--chart-1..8) are used in FIXED ORDER and only where
+//    the categories ARE the subject (the continent donut). The order is the
+//    colour-blind-safety mechanism, so it is never shuffled or cycled.
+//  • The donut is for part-to-whole read at a glance. It is NOT used for modes:
+//    CW and SSB are nearly tied, and a donut hides exactly the comparison that
+//    makes them interesting. Close values belong in bars.
+//  • Every value is direct-labelled, so nothing is reachable only by hovering, and
+//    a table view gives the WCAG-clean twin.
+// ─────────────────────────────────────────────────────────────────────────────
+
+type Bucket = { key: string; count: number };
+type BandCat = { band: string; cw: number; phone: number; data: number; total: number };
+type Gap = { start: string; end: string; minutes: number };
+type ContestRun = { id: string; year: number; count: number; start: string; end: string };
+type Stats = {
+  total: number; unique_calls: number; entities: number; continents: number;
+  first_qso: string; last_qso: string;
+  confirmed_lotw: number; confirmed_eqsl: number; confirmed_qsl: number; confirmed_any: number;
+  by_mode: Bucket[]; by_band: Bucket[]; by_band_category: BandCat[]; by_operator: Bucket[]; by_station: Bucket[];
+  by_continent: Bucket[]; top_entities: Bucket[]; by_year: Bucket[]; by_month: Bucket[];
+  by_hour: Bucket[]; by_day7: Bucket[]; by_day30: Bucket[]; by_month12: Bucket[];
+  // Chronological series across the SELECTED period, one per bucket size; empty
+  // when that bucket would be too fine for the period (see the Go side).
+  by_day_win: Bucket[]; by_week_win: Bucket[]; by_month_win: Bucket[]; by_year_win: Bucket[];
+  by_hour_of_day: Bucket[]; by_weekday: Bucket[];
+  // Period / contest metrics.
+  window_start: string; window_end: string; window_hours: number;
+  avg_per_hour: number; avg_per_active: number;
+  on_air_minutes: number; off_air_minutes: number;
+  peak_hour_key: string; peak_hour_count: number; best_60: number;
+  gaps: Gap[]; rate: Bucket[];
+  rate_ops: string[]; rate_by_op: number[][];
+};
+
+// Minutes → "3 h 12" (a bare "192 min" makes you do arithmetic to read a break).
+const dur = (m: number) => (m >= 60 ? `${Math.floor(m / 60)} h ${String(m % 60).padStart(2, '0')}` : `${m} min`);
+
+const CONTINENT_NAME: Record<string, string> = {
+  EU: 'Europe', NA: 'North America', SA: 'South America',
+  AS: 'Asia', AF: 'Africa', OC: 'Oceania', AN: 'Antarctica',
+};
+
+const nf = (n: number) => n.toLocaleString('en-US');
+
+// ── Shell ────────────────────────────────────────────────────────────────────
+
+function Card({ title, sub, children, className, accent = 'var(--chart-1)' }: { title: string; sub?: string; children: React.ReactNode; className?: string; accent?: string }) {
+  return (
+    <section className={cn('rounded-xl border border-border bg-card p-3.5 flex flex-col min-w-0 shadow-sm', className)}>
+      <header className="mb-3 shrink-0">
+        <h3 className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+          <span className="size-1.5 rounded-full shrink-0" style={{ background: accent }} />
+          {title}
+        </h3>
+        {sub && <p className="text-[11px] text-muted-foreground/80 mt-0.5">{sub}</p>}
+      </header>
+      {children}
+    </section>
+  );
+}
+
+// A headline number IS the chart — a one-bar bar chart would be noise. Each tile
+// carries an accent (a categorical chart hue or a semantic token): a soft tint
+// wash + a left accent bar give it a colourful identity, while the number itself
+// stays in high-contrast foreground ink so it reads on every theme.
+function StatTile({ label, value, sub, accent = 'var(--chart-1)' }: { label: string; value: string; sub?: string; accent?: string }) {
+  return (
+    <div className="relative overflow-hidden rounded-xl border border-border bg-card px-4 py-3 min-w-0 shadow-sm">
+      <div className="pointer-events-none absolute inset-0 opacity-[0.08]" style={{ background: accent }} />
+      <div className="pointer-events-none absolute -right-5 -top-7 size-20 rounded-full blur-xl opacity-[0.14]" style={{ background: accent }} />
+      <div className="absolute left-0 inset-y-0 w-1" style={{ background: accent }} />
+      <div className="relative">
+        <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground truncate">{label}</p>
+        {/* Proportional figures: tabular-nums makes a big standalone number look loose. */}
+        <p className="mt-1 text-[28px] leading-none font-semibold text-foreground">{value}</p>
+        {sub && <p className="mt-1 text-[11px] text-muted-foreground truncate">{sub}</p>}
+      </div>
+    </div>
+  );
+}
+
+// ── Horizontal bars (long category names: modes, operators, entities) ─────────
+// One series → one hue. The value is direct-labelled, so no reader ever depends
+// on a tooltip to get a number.
+
+function HBars({ data, max, empty, share, labelWidth = 'w-20', colorful, color = 'var(--chart-1)' }: { data: Bucket[]; max?: number; empty: string; share?: boolean; labelWidth?: string; colorful?: boolean; color?: string }) {
+  // max is a display cap for long tails (top entities). Where EVERY row matters —
+  // the operators of a multi-op — it is deliberately not set: a capped chart would
+  // silently drop the 9th operator, and "who worked what" is the whole question.
+  const top = max ? data.slice(0, max) : data;
+  const peak = Math.max(1, ...top.map((d) => d.count));
+  const total = data.reduce((s, d) => s + d.count, 0);
+  if (top.length === 0) return <p className="text-[11px] text-muted-foreground italic py-4 text-center">{empty}</p>;
+  return (
+    <div className="flex flex-col gap-1.5 min-w-0">
+      {top.map((d, i) => (
+        <div key={d.key} className="group flex items-center gap-2 min-w-0" title={`${d.key} — ${nf(d.count)}`}>
+          <span className={`${labelWidth} shrink-0 truncate text-[11px] text-muted-foreground text-right`} title={d.key}>{d.key}</span>
+          <div className="flex-1 min-w-0 h-[14px] flex items-center">
+            <div
+              className="h-[10px] rounded-r-[4px] transition-[width] duration-300"
+              style={{ width: `${Math.max(2, (d.count / peak) * 100)}%`, background: colorful ? `var(--chart-${(i % 8) + 1})` : color }}
+            />
+          </div>
+          <span className="w-14 shrink-0 text-[11px] text-foreground text-right tabular-nums">{nf(d.count)}</span>
+          {share && (
+            <span className="w-10 shrink-0 text-[11px] text-muted-foreground text-right tabular-nums">
+              {total ? ((d.count / total) * 100).toFixed(0) : 0}%
+            </span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ── Vertical columns (short ordered labels: bands in band-plan order, hours) ──
+// Sorting bands by COUNT would destroy the band-plan reading; the order is the
+// information.
+
+function VBars({ data, empty, height = 150, showValues, colorful }: { data: Bucket[]; empty: string; height?: number; showValues?: boolean; colorful?: boolean }) {
+  const peak = Math.max(1, ...data.map((d) => d.count));
+  if (data.length === 0) return <p className="text-[11px] text-muted-foreground italic py-4 text-center">{empty}</p>;
+  // Thin the x labels once the bars get narrow. A label under EVERY one of 48
+  // hourly bars is unreadable mush — the axis exists to orient, not to enumerate
+  // (the value is in the tooltip, and every number is in the table view).
+  const every = data.length <= 16 ? 1 : Math.ceil(data.length / 12);
+  return (
+    // The container includes the x-axis band — a fixed height that excludes it is
+    // how cards end up with a tiny nested scrollbar.
+    <div className="flex items-end gap-[2px] min-w-0" style={{ height }}>
+      {data.map((d, i) => (
+        <div key={d.key} className="flex-1 min-w-0 flex flex-col items-center justify-end h-full group"
+          title={`${d.key} — ${nf(d.count)}`}>
+          <span className={cn('text-[9px] font-semibold mb-0.5 tabular-nums whitespace-nowrap',
+            showValues ? 'text-foreground' : 'text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity')}>
+            {nf(d.count)}
+          </span>
+          <div
+            className="w-full rounded-t-[4px] transition-[height] duration-300"
+            style={{ height: `${Math.max(2, (d.count / peak) * 100)}%`, background: colorful ? `var(--chart-${(i % 8) + 1})` : 'var(--chart-1)' }}
+          />
+          <span className="mt-1 h-3 text-[9px] text-muted-foreground w-full text-center whitespace-nowrap overflow-visible">
+            {i % every === 0 ? d.key : ''}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Per-band mode split (CW / phone / data) as stacked vertical bars. The three
+// categories are the subject → categorical colour in a fixed order, matching the
+// mode colours used elsewhere (CW gold, phone green, data blue).
+const BAND_SPLIT = [
+  { key: 'cw', label: 'CW', color: 'var(--chart-3)' },
+  { key: 'phone', label: 'Phone', color: 'var(--chart-2)' },
+  { key: 'data', label: 'Data', color: 'var(--chart-1)' },
+] as const;
+function StackedBandBars({ data, empty, height = 150 }: { data: BandCat[]; empty: string; height?: number }) {
+  if (!data || data.length === 0) return <p className="text-[11px] text-muted-foreground italic py-4 text-center">{empty}</p>;
+  const peak = Math.max(1, ...data.map((d) => d.total));
+  return (
+    <div>
+      <div className="flex items-end gap-[3px] min-w-0" style={{ height }}>
+        {data.map((d) => (
+          <div key={d.band} className="flex-1 min-w-0 flex flex-col items-center justify-end h-full group"
+            title={`${d.band} — CW ${nf(d.cw)} · Phone ${nf(d.phone)} · Data ${nf(d.data)}  (${nf(d.total)})`}>
+            <span className="text-[9px] font-semibold mb-0.5 tabular-nums text-foreground">{nf(d.total)}</span>
+            <div className="w-full flex flex-col justify-end rounded-t-[4px] overflow-hidden"
+              style={{ height: `${Math.max(2, (d.total / peak) * 100)}%` }}>
+              {BAND_SPLIT.map((s) => {
+                const v = d[s.key];
+                if (!v) return null;
+                return <div key={s.key} style={{ flexGrow: v, flexBasis: 0, minHeight: 1, background: s.color }} />;
+              })}
+            </div>
+            <span className="mt-1 h-3 text-[9px] text-muted-foreground w-full text-center whitespace-nowrap">{d.band}</span>
+          </div>
+        ))}
+      </div>
+      <div className="mt-2 flex items-center justify-center gap-3 text-[10px] text-muted-foreground">
+        {BAND_SPLIT.map((s) => (
+          <span key={s.key} className="inline-flex items-center gap-1">
+            <span className="size-2.5 rounded-[3px]" style={{ background: s.color }} /> {s.label}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ── Contest rate, stacked by operator ────────────────────────────────────────
+// The categories (the operators) ARE the subject, so this is categorical colour,
+// in the FIXED order the backend sends (busiest first). An operator therefore
+// keeps the same hue everywhere on the page — a chart that repaints its series
+// when the filter changes is a chart nobody can trust.
+
+function RateStack({ rate, ops, byOp, empty, height = 130 }: {
+  rate: Bucket[]; ops: string[]; byOp: number[][]; empty: string; height?: number;
+}) {
+  const [hov, setHov] = useState<number | null>(null);
+  if (rate.length === 0) return <p className="text-[11px] text-muted-foreground italic py-4 text-center">{empty}</p>;
+  const peak = Math.max(1, ...rate.map((d) => d.count));
+  const every = rate.length <= 16 ? 1 : Math.ceil(rate.length / 12);
+  const single = ops.length <= 1; // one operator → one hue; a legend would be noise
+
+  return (
+    <div className="min-w-0">
+      <div className="flex items-end gap-[2px] min-w-0" style={{ height }}>
+        {rate.map((d, i) => (
+          <div key={d.key} className="flex-1 min-w-0 flex flex-col items-center justify-end h-full"
+            onMouseEnter={() => setHov(i)} onMouseLeave={() => setHov(null)}>
+            {/* The column is the hour's total; the segments are who made it. */}
+            <div className="w-full flex flex-col-reverse justify-start rounded-t-[4px] overflow-hidden"
+              style={{ height: `${Math.max(1, (d.count / peak) * 100)}%` }}>
+              {(byOp[i] ?? []).map((n, o) => n > 0 && (
+                <div key={o} style={{
+                  height: `${(n / Math.max(1, d.count)) * 100}%`,
+                  background: single ? 'var(--chart-1)' : `var(--chart-${(o % 8) + 1})`,
+                }} />
+              ))}
+            </div>
+            <span className="mt-1 h-3 text-[9px] text-muted-foreground w-full text-center whitespace-nowrap">
+              {i % every === 0 ? d.key : ''}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* Hover read-out: the hour, its total, and the split. Values are also in the
+          rate sheet below, so nothing is reachable by hover alone. */}
+      <p className="mt-1 h-4 text-[11px] text-muted-foreground tabular-nums truncate">
+        {hov !== null && (
+          <>
+            <span className="text-foreground font-medium">{rate[hov].key}</span>
+            {' · '}{nf(rate[hov].count)} QSO
+            {!single && (byOp[hov] ?? []).map((n, o) => n > 0 && (
+              <span key={o}> · <span style={{ color: `var(--chart-${(o % 8) + 1})` }}>■</span> {ops[o]} {n}</span>
+            ))}
+          </>
+        )}
+      </p>
+
+      {!single && (
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 mt-1">
+          {ops.map((op, o) => (
+            <span key={op} className="inline-flex items-center gap-1 text-[11px] text-muted-foreground">
+              <span className="size-2.5 rounded-[3px]" style={{ background: `var(--chart-${(o % 8) + 1})` }} />
+              {op}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── The rate sheet: hour × operator, with the hour total ─────────────────────
+// Exact numbers, many of them — that is a table's job, not a chart's. Contesters
+// read rate sheets as tables, and every value here is also the one the chart draws.
+
+function RateSheet({ rate, ops, byOp }: { rate: Bucket[]; ops: string[]; byOp: number[][] }) {
+  if (rate.length === 0) return null;
+  const shown = rate.map((d, i) => ({ d, i })).filter(({ d }) => d.count > 0); // silent hours add nothing here
+  const totals = ops.map((_, o) => rate.reduce((s, _d, i) => s + (byOp[i]?.[o] ?? 0), 0));
+  const grand = rate.reduce((s, d) => s + d.count, 0);
+
+  return (
+    <div className="overflow-auto max-h-[260px] rounded-md border border-border">
+      <table className="w-full text-[11px] tabular-nums">
+        <thead className="sticky top-0 bg-muted/60 backdrop-blur">
+          <tr className="text-muted-foreground">
+            <th className="text-left font-medium px-2 py-1">UTC</th>
+            {ops.map((op, o) => (
+              <th key={op} className="text-right font-medium px-2 py-1 whitespace-nowrap">
+                <span className="inline-block size-2 rounded-[2px] mr-1 align-middle"
+                  style={{ background: `var(--chart-${(o % 8) + 1})` }} />
+                {op}
+              </th>
+            ))}
+            <th className="text-right font-semibold px-2 py-1 text-foreground">Total</th>
+          </tr>
+        </thead>
+        <tbody>
+          {shown.map(({ d, i }) => (
+            <tr key={d.key} className="border-t border-border/50">
+              <td className="px-2 py-0.5 text-muted-foreground whitespace-nowrap">{d.key}</td>
+              {ops.map((_, o) => (
+                <td key={o} className="px-2 py-0.5 text-right">
+                  {byOp[i]?.[o] ? nf(byOp[i][o]) : <span className="text-muted-foreground/40">·</span>}
+                </td>
+              ))}
+              <td className="px-2 py-0.5 text-right font-semibold">{nf(d.count)}</td>
+            </tr>
+          ))}
+        </tbody>
+        <tfoot className="sticky bottom-0 bg-muted/60 backdrop-blur">
+          <tr className="border-t border-border font-semibold">
+            <td className="px-2 py-1">Total</td>
+            {totals.map((n, o) => <td key={o} className="px-2 py-1 text-right">{nf(n)}</td>)}
+            <td className="px-2 py-1 text-right">{nf(grand)}</td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  );
+}
+
+// ── Activity over time (single series → area, one hue) ────────────────────────
+// Only the PEAK and the LAST point are direct-labelled. A number on every point
+// is chaos and goes unread.
+
+function AreaTrend({ data, height = 160, empty }: { data: Bucket[]; height?: number; empty: string }) {
+  const [hover, setHover] = useState<number | null>(null);
+  if (data.length < 2) return <p className="text-[11px] text-muted-foreground italic py-4 text-center">{empty}</p>;
+
+  const W = 1000, H = 100, peak = Math.max(1, ...data.map((d) => d.count));
+  const x = (i: number) => (i / (data.length - 1)) * W;
+  const y = (v: number) => H - (v / peak) * H;
+  const line = data.map((d, i) => `${i === 0 ? 'M' : 'L'}${x(i).toFixed(1)},${y(d.count).toFixed(1)}`).join(' ');
+  const area = `${line} L${W},${H} L0,${H} Z`;
+  const peakIdx = data.reduce((b, d, i) => (d.count > data[b].count ? i : b), 0);
+  const h = hover ?? -1;
+
+  return (
+    <div className="min-w-0">
+      <div className="relative" style={{ height }}>
+        <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" className="w-full h-full overflow-visible"
+          onMouseLeave={() => setHover(null)}>
+          {/* Recessive hairline grid — solid, never dashed. */}
+          {[0, 0.5, 1].map((f) => (
+            <line key={f} x1={0} x2={W} y1={H * f} y2={H * f} stroke="var(--border)" strokeWidth={1} vectorEffect="non-scaling-stroke" />
+          ))}
+          <defs>
+            <linearGradient id="statsArea" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="var(--chart-1)" stopOpacity="0.28" />
+              <stop offset="100%" stopColor="var(--chart-1)" stopOpacity="0.02" />
+            </linearGradient>
+          </defs>
+          <path d={area} fill="url(#statsArea)" />
+          <path d={line} fill="none" stroke="var(--chart-1)" strokeWidth={2} vectorEffect="non-scaling-stroke"
+            strokeLinejoin="round" strokeLinecap="round" />
+          {h >= 0 && (
+            <>
+              <line x1={x(h)} x2={x(h)} y1={0} y2={H} stroke="var(--muted-foreground)" strokeWidth={1} vectorEffect="non-scaling-stroke" opacity={0.5} />
+              {/* 2px surface ring so the marker reads on top of the area. */}
+              <circle cx={x(h)} cy={y(data[h].count)} r={4} fill="var(--chart-1)" stroke="var(--card)" strokeWidth={2} vectorEffect="non-scaling-stroke" />
+            </>
+          )}
+          {/* Hit areas are far wider than the marks — pinpoint targets are unusable. */}
+          {data.map((_, i) => (
+            <rect key={i} x={x(i) - W / data.length / 2} y={0} width={W / data.length} height={H}
+              fill="transparent" onMouseEnter={() => setHover(i)} />
+          ))}
+        </svg>
+        {h >= 0 && (
+          <div className="pointer-events-none absolute -top-1 z-10 rounded-md border border-border bg-popover px-2 py-1 text-[11px] shadow-lg whitespace-nowrap"
+            style={{ left: `${(h / (data.length - 1)) * 100}%`, transform: 'translateX(-50%)' }}>
+            <span className="text-muted-foreground">{data[h].key}</span>{' '}
+            <span className="font-semibold tabular-nums">{nf(data[h].count)}</span>
+          </div>
+        )}
+      </div>
+      <div className="flex justify-between mt-1.5 text-[10px] text-muted-foreground tabular-nums">
+        <span>{data[0].key}</span>
+        <span className="text-foreground font-medium">↑ {data[peakIdx].key} · {nf(data[peakIdx].count)}</span>
+        <span>{data[data.length - 1].key}</span>
+      </div>
+    </div>
+  );
+}
+
+// ── Part-to-whole (continents) → the donut ───────────────────────────────────
+// A pie/donut is legitimate for exactly this: part-to-whole, read at a glance,
+// few segments, one share obviously dominant. It is the WRONG form for comparing
+// close values (which is why modes stay bars — CW and SSB are nearly tied, and a
+// donut would hide precisely the fact that makes them interesting).
+//
+// The categories ARE the subject here, so this is the one chart using the
+// categorical slots — in FIXED order, with a legend and printed values, because
+// the dark palette sits in the CVD floor band where labels are mandatory.
+
+function Donut({ data, empty }: { data: Bucket[]; empty: string }) {
+  const [hov, setHov] = useState<number | null>(null);
+  const total = data.reduce((s, d) => s + d.count, 0);
+  if (total === 0) return <p className="text-[11px] text-muted-foreground italic py-4 text-center">{empty}</p>;
+
+  const slots = data.slice(0, 8); // never generate a 9th hue
+  const R = 58, SW = 22, C = 2 * Math.PI * R;
+  let acc = 0;
+  const arcs = slots.map((d, i) => {
+    const frac = d.count / total;
+    // A 2px surface gap between segments — the correct separator, not a border.
+    const len = Math.max(0, frac * C - 2);
+    const a = { key: d.key, i, len, off: -acc * C, frac };
+    acc += frac;
+    return a;
+  });
+
+  return (
+    <div className="flex items-center gap-4 min-w-0">
+      <div className="relative shrink-0">
+        <svg viewBox="0 0 160 160" className="size-[140px] -rotate-90">
+          {arcs.map((a) => (
+            <circle key={a.key} cx={80} cy={80} r={R} fill="none"
+              stroke={`var(--chart-${a.i + 1})`} strokeWidth={hov === a.i ? SW + 4 : SW}
+              strokeDasharray={`${a.len} ${C - a.len}`} strokeDashoffset={a.off}
+              className="transition-[stroke-width] duration-150 cursor-default"
+              onMouseEnter={() => setHov(a.i)} onMouseLeave={() => setHov(null)} />
+          ))}
+        </svg>
+        {/* The hole is not decoration — it carries the total the slices add up to. */}
+        <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
+          {hov === null ? (
+            <>
+              <span className="text-[17px] font-semibold leading-none">{nf(total)}</span>
+              <span className="text-[10px] text-muted-foreground mt-0.5">QSO</span>
+            </>
+          ) : (
+            <>
+              <span className="text-[15px] font-semibold leading-none">{(arcs[hov].frac * 100).toFixed(1)}%</span>
+              <span className="text-[10px] text-muted-foreground mt-0.5 truncate max-w-[92px] text-center">
+                {CONTINENT_NAME[slots[hov].key] ?? slots[hov].key}
+              </span>
+            </>
+          )}
+        </div>
+      </div>
+      <ul className="flex-1 min-w-0 flex flex-col gap-1">
+        {slots.map((d, i) => (
+          <li key={d.key}
+            onMouseEnter={() => setHov(i)} onMouseLeave={() => setHov(null)}
+            className={cn('flex items-center gap-1.5 min-w-0 text-[11px] rounded px-1 -mx-1',
+              hov === i && 'bg-muted')}>
+            {/* The swatch carries identity; the text stays in ink tokens. */}
+            <span className="size-2.5 rounded-[3px] shrink-0" style={{ background: `var(--chart-${i + 1})` }} />
+            <span className="truncate text-muted-foreground">{CONTINENT_NAME[d.key] ?? d.key}</span>
+            <span className="ml-auto shrink-0 tabular-nums text-foreground">{nf(d.count)}</span>
+            <span className="w-9 shrink-0 text-right tabular-nums text-muted-foreground">
+              {((d.count / total) * 100).toFixed(0)}%
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+// ── A single ratio against a limit → a meter, not a 2-slice pie ───────────────
+
+function Meter({ label, value, total }: { label: string; value: number; total: number }) {
+  const pct = total > 0 ? (value / total) * 100 : 0;
+  return (
+    <div className="min-w-0">
+      <div className="flex items-baseline justify-between gap-2 mb-1">
+        <span className="text-[11px] text-muted-foreground truncate">{label}</span>
+        <span className="text-[11px] tabular-nums">
+          <span className="font-semibold text-foreground">{pct.toFixed(1)}%</span>
+          <span className="text-muted-foreground"> · {nf(value)}</span>
+        </span>
+      </div>
+      {/* Same-ramp track: the meter and its track are one hue, not two. */}
+      <div className="h-2 w-full rounded-full" style={{ background: 'var(--chart-seq-1)' }}>
+        <div className="h-full rounded-full transition-[width] duration-500"
+          style={{ width: `${Math.max(1, pct)}%`, background: 'var(--chart-1)' }} />
+      </div>
+    </div>
+  );
+}
+
+// ── Period ───────────────────────────────────────────────────────────────────
+// ONE filter row above everything it scopes — never a control inside a card, or
+// the charts would each show a different slice of time.
+
+type Period = 'all' | 'ytd' | 'y12' | 'd30' | 'custom';
+
+const iso = (d: Date) => d.toISOString().slice(0, 10);
+
+// Resolve a preset to the [from, to] the backend expects. Empty = no bound.
+function periodRange(p: Period, from: string, to: string): [string, string] {
+  const now = new Date();
+  switch (p) {
+    case 'ytd': return [`${now.getUTCFullYear()}-01-01`, ''];
+    case 'y12': {
+      const d = new Date(now); d.setUTCMonth(d.getUTCMonth() - 12);
+      return [iso(d), ''];
+    }
+    case 'd30': {
+      const d = new Date(now); d.setUTCDate(d.getUTCDate() - 30);
+      return [iso(d), ''];
+    }
+    case 'custom': return [from, to];
+    default: return ['', ''];
+  }
+}
+
+// ActivityCard — the "activity over time" chart with a granularity selector. Its
+// own state, module-scoped so a parent re-render doesn't reset the choice. The
+// timeline is the chronological month series; day/week/month/year are the cyclical
+// distributions (hour-of-day, day-of-week, day-of-month, month-of-year).
+// The selector is a BUCKET SIZE applied to the period chosen at the top of the
+// panel — not a window of its own. It used to be four fixed rolling windows
+// anchored on the newest QSO, which ignored the period filter entirely: picking
+// a year up top left this chart showing the last 7 days.
+const ACT_GRAN = [
+  { key: 'day', tkey: 'stats.granDay' },
+  { key: 'week', tkey: 'stats.granWeek' },
+  { key: 'month', tkey: 'stats.granMonth' },
+  { key: 'year', tkey: 'stats.granYear' },
+] as const;
+type Gran = typeof ACT_GRAN[number]['key'];
+const COARSER: Record<Gran, Gran | null> = { day: 'week', week: 'month', month: 'year', year: null };
+
+function ActivityCard({ stats, t, empty }: { stats: Stats; t: (k: string, v?: any) => string; empty: string }) {
+  const [g, setG] = useState<Gran | 'auto'>('auto');
+  const seriesFor = (k: Gran): Bucket[] => (
+    k === 'day' ? stats.by_day_win : k === 'week' ? stats.by_week_win : k === 'month' ? stats.by_month_win : stats.by_year_win
+  );
+
+  // Auto picks the finest bucket that stays readable: the backend leaves a
+  // series empty when it would be too fine for the period, so "the first
+  // non-empty one" is exactly the right rule and needs no thresholds here.
+  const auto: Gran = (['day', 'week', 'month', 'year'] as Gran[]).find((k) => seriesFor(k).length > 0 && seriesFor(k).length <= 120) ?? 'year';
+  // A bucket the user forces but that is too fine for the period falls back to
+  // the next coarser one rather than showing an empty chart.
+  let shown: Gran = g === 'auto' ? auto : g;
+  while (seriesFor(shown).length === 0 && COARSER[shown]) shown = COARSER[shown]!;
+  const series = seriesFor(shown);
+  const steppedUp = g !== 'auto' && shown !== g;
+
+  return (
+    <Card title={t('stats.overTime')} sub={t('stats.overTimeSub')} className="lg:col-span-2" accent="var(--chart-1)">
+      <div className="mb-2 flex flex-wrap gap-1 items-center">
+        <button type="button" onClick={() => setG('auto')}
+          className={cn('px-2 py-0.5 rounded-md text-[11px] border transition-colors',
+            g === 'auto' ? 'bg-primary text-primary-foreground border-primary' : 'border-border text-muted-foreground hover:bg-muted')}>
+          {t('stats.granAuto')}
+        </button>
+        {ACT_GRAN.map((o) => (
+          <button key={o.key} type="button" onClick={() => setG(o.key)}
+            className={cn('px-2 py-0.5 rounded-md text-[11px] border transition-colors',
+              g === o.key ? 'bg-primary text-primary-foreground border-primary' : 'border-border text-muted-foreground hover:bg-muted')}>
+            {t(o.tkey)}
+          </button>
+        ))}
+        {steppedUp && (
+          <span className="text-[10px] text-muted-foreground">{t('stats.granTooFine')}</span>
+        )}
+      </div>
+      {/* Many buckets read better as a filled trend than as a forest of bars. */}
+      {series.length > 60
+        ? <AreaTrend data={series} empty={empty} />
+        : <VBars data={series} empty={empty} showValues height={160} />}
+    </Card>
+  );
+}
+
+// RhythmCard — WHEN the operator is on the air over the selected period, which is
+// a different question from "how much lately" and so gets its own card. The hour
+// histogram used to cover a single day, too little to read anything from.
+function RhythmCard({ stats, t, empty }: { stats: Stats; t: (k: string, v?: any) => string; empty: string }) {
+  const [g, setG] = useState<'hour' | 'weekday'>('hour');
+  return (
+    <Card title={t('stats.rhythm')} sub={t('stats.rhythmSub')} className="lg:col-span-2" accent="var(--chart-2)">
+      <div className="mb-2 flex flex-wrap gap-1">
+        {([['hour', 'stats.byHourOfDay'], ['weekday', 'stats.byWeekday']] as const).map(([k, tk]) => (
+          <button key={k} type="button" onClick={() => setG(k)}
+            className={cn('px-2 py-0.5 rounded-md text-[11px] border transition-colors',
+              g === k ? 'bg-primary text-primary-foreground border-primary' : 'border-border text-muted-foreground hover:bg-muted')}>
+            {t(tk)}
+          </button>
+        ))}
+      </div>
+      <VBars data={g === 'hour' ? stats.by_hour_of_day : stats.by_weekday} empty={empty} showValues height={160} />
+    </Card>
+  );
+}
+
+// ── Table view (the WCAG-clean twin) ─────────────────────────────────────────
+
+function BucketTable({ title, data }: { title: string; data: Bucket[] }) {
+  const total = data.reduce((s, d) => s + d.count, 0);
+  return (
+    <div className="rounded-lg border border-border bg-card overflow-hidden">
+      <p className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground border-b border-border bg-muted/30">{title}</p>
+      <table className="w-full text-[11px]">
+        <tbody>
+          {data.map((d) => (
+            <tr key={d.key} className="border-b border-border/50 last:border-0">
+              <td className="px-3 py-1 truncate">{d.key}</td>
+              <td className="px-3 py-1 text-right tabular-nums font-medium">{nf(d.count)}</td>
+              <td className="px-3 py-1 text-right tabular-nums text-muted-foreground w-14">
+                {total ? ((d.count / total) * 100).toFixed(1) + '%' : '—'}
+              </td>
+            </tr>
+          ))}
+          {data.length === 0 && <tr><td className="px-3 py-2 text-muted-foreground italic">—</td></tr>}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ── Panel ────────────────────────────────────────────────────────────────────
+
+export function StatsPanel() {
+  const { t } = useI18n();
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState('');
+  const [view, setView] = useState<'charts' | 'table'>('charts');
+  const [period, setPeriod] = useState<Period>('all');
+  const [from, setFrom] = useState('');
+  const [to, setTo] = useState('');
+  // Contest picker: "ID|YEAR", or '' for none. Selecting one narrows the log to
+  // that contest AND lets the window derive from its own span — no date typing.
+  const [runs, setRuns] = useState<ContestRun[]>([]);
+  const [contest, setContest] = useState('');
+  // Operator picker: '' = all operators, "—" = station owner (empty OPERATOR).
+  const [operators, setOperators] = useState<string[]>([]);
+  const [operator, setOperator] = useState('');
+
+  useEffect(() => { GetContestRuns().then((r: any) => setRuns((r ?? []) as ContestRun[])).catch(() => {}); }, []);
+  useEffect(() => { GetOperators().then((o: any) => setOperators((o ?? []) as string[])).catch(() => {}); }, []);
+
+  const load = async (p: Period = period, f = from, t2 = to, c = contest, op = operator) => {
+    // A contest defines its own window (its first→last QSO), so we send no dates
+    // with it — the backend derives them. Sending a period as well would be two
+    // filters fighting over the same axis.
+    const [cid, cyr] = c ? c.split('|') : ['', '0'];
+    const [a, b] = c ? ['', ''] : periodRange(p, f, t2);
+    setBusy(true); setErr('');
+    try {
+      const raw = (await GetLogStats(a, b, cid, parseInt(cyr, 10) || 0, op)) as any;
+      // Harden the boundary: a Go nil slice arrives as JSON null, and a single
+      // .length on null unmounts the whole React tree — a white screen. Normalise
+      // once, here, rather than guarding at every use site and missing one.
+      const arr = (v: any) => (Array.isArray(v) ? v : []);
+      setStats({
+        ...raw,
+        by_mode: arr(raw.by_mode), by_band: arr(raw.by_band), by_band_category: arr(raw.by_band_category), by_operator: arr(raw.by_operator),
+        by_station: arr(raw.by_station), by_continent: arr(raw.by_continent),
+        top_entities: arr(raw.top_entities), by_year: arr(raw.by_year), by_month: arr(raw.by_month),
+        by_hour: arr(raw.by_hour), by_day7: arr(raw.by_day7), by_day30: arr(raw.by_day30), by_month12: arr(raw.by_month12),
+        by_day_win: arr(raw.by_day_win), by_week_win: arr(raw.by_week_win), by_month_win: arr(raw.by_month_win), by_year_win: arr(raw.by_year_win),
+        by_hour_of_day: arr(raw.by_hour_of_day), by_weekday: arr(raw.by_weekday),
+        rate: arr(raw.rate), gaps: arr(raw.gaps),
+        rate_ops: arr(raw.rate_ops), rate_by_op: arr(raw.rate_by_op),
+      } as Stats);
+    }
+    catch (e: any) { setErr(String(e?.message ?? e)); }
+    finally { setBusy(false); }
+  };
+  // Re-run whenever the filter changes. A custom range only fires once BOTH ends
+  // are set — otherwise every keystroke in the date box would re-scan the log.
+  useEffect(() => {
+    if (!contest && period === 'custom' && !(from && to)) return;
+    load(period, from, to, contest, operator);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [period, from, to, contest, operator]);
+
+  // The rate / off-air block belongs to a CONTEST-shaped effort, and nowhere else.
+  // Over a year it degenerates into nonsense — "4 156 h off air", a 94-hour "break"
+  // between two ordinary evenings — numbers that are true and completely useless.
+  // So: show it for a picked contest, or for a hand-set range short enough to be a
+  // real operating session (which is exactly when an hourly rate chart exists).
+  const windowed = contest !== '' || (period === 'custom' && (stats?.rate?.length ?? 0) > 1);
+
+  const span = useMemo(() => {
+    if (!stats?.first_qso) return '';
+    const f = new Date(stats.first_qso), l = new Date(stats.last_qso);
+    return `${f.toISOString().slice(0, 10)} → ${l.toISOString().slice(0, 10)}`;
+  }, [stats]);
+
+  if (busy && !stats) {
+    return <div className="flex-1 flex items-center justify-center text-muted-foreground gap-2">
+      <Loader2 className="size-4 animate-spin" /> <span className="text-xs">{t('stats.loading')}</span>
+    </div>;
+  }
+  if (err) return <div className="p-4 text-xs text-destructive">{err}</div>;
+  if (!stats) return null;
+
+  const empty = t('stats.noData');
+
+  return (
+    <div className="flex-1 min-h-0 overflow-auto p-3">
+      {/* ONE filter/action row above everything it scopes — never per-card controls. */}
+      <div className="flex items-center flex-wrap gap-2 mb-3">
+        <h2 className="text-sm font-semibold">{t('stats.title')}</h2>
+        {span && <span className="text-[11px] text-muted-foreground tabular-nums">{span}</span>}
+
+        {/* A contest is picked from what's actually IN the log (CONTEST_ID + year),
+            never from a static list — so it can't offer a contest you never entered.
+            Choosing one supersedes the period: it brings its own window. */}
+        <select value={contest} onChange={(e) => setContest(e.target.value)}
+          className="h-7 rounded-md border border-input bg-background px-1.5 text-xs max-w-[240px]">
+          <option value="">{t('stats.noContest')}</option>
+          {runs.map((r) => (
+            <option key={`${r.id}|${r.year}`} value={`${r.id}|${r.year}`}>
+              {r.id} {r.year} — {nf(r.count)} QSO
+            </option>
+          ))}
+        </select>
+
+        {/* Operator picker — narrows every stat (totals, DXCC, top countries,
+            continent split, rate) to one operator from the log. "—" = the
+            station owner (QSOs logged with no OPERATOR set). */}
+        {operators.length > 1 && (
+          <select value={operator} onChange={(e) => setOperator(e.target.value)}
+            className="h-7 rounded-md border border-input bg-background px-1.5 text-xs max-w-[180px]"
+            title={t('stats.operatorTip')}>
+            <option value="">{t('stats.allOperators')}</option>
+            {operators.map((op) => (
+              <option key={op} value={op}>{op === '—' ? t('stats.stationOwner') : op}</option>
+            ))}
+          </select>
+        )}
+
+        <div className={cn('inline-flex rounded-md border border-border overflow-hidden', contest && 'opacity-40 pointer-events-none')}>
+          {([
+            ['all', t('stats.pAll')], ['ytd', t('stats.pYTD')],
+            ['y12', t('stats.p12m')], ['d30', t('stats.p30d')], ['custom', t('stats.pCustom')],
+          ] as [Period, string][]).map(([p, label], i) => (
+            <button key={p} onClick={() => setPeriod(p)}
+              className={cn('px-2 h-7 text-xs whitespace-nowrap', i > 0 && 'border-l border-border',
+                period === p ? 'bg-primary text-primary-foreground' : 'hover:bg-muted')}>
+              {label}
+            </button>
+          ))}
+        </div>
+        {!contest && period === 'custom' && (
+          <div className="inline-flex items-center gap-1">
+            <input type="date" value={from} onChange={(e) => setFrom(e.target.value)}
+              className="h-7 rounded-md border border-input bg-background px-1.5 text-xs" />
+            <span className="text-xs text-muted-foreground">→</span>
+            <input type="date" value={to} onChange={(e) => setTo(e.target.value)}
+              className="h-7 rounded-md border border-input bg-background px-1.5 text-xs" />
+          </div>
+        )}
+
+        <div className="flex-1" />
+        <div className="inline-flex rounded-md border border-border overflow-hidden">
+          <button onClick={() => setView('charts')}
+            className={cn('inline-flex items-center gap-1 px-2 h-7 text-xs', view === 'charts' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted')}>
+            <BarChart3 className="size-3.5" />{t('stats.charts')}
+          </button>
+          <button onClick={() => setView('table')}
+            className={cn('inline-flex items-center gap-1 px-2 h-7 text-xs border-l border-border', view === 'table' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted')}>
+            <Table2 className="size-3.5" />{t('stats.table')}
+          </button>
+        </div>
+        <button onClick={() => load()} disabled={busy} title={t('stats.refresh')}
+          className="inline-flex items-center justify-center size-7 rounded-md border border-border hover:bg-muted disabled:opacity-50">
+          <RefreshCw className={cn('size-3.5', busy && 'animate-spin')} />
+        </button>
+      </div>
+
+      {/* Headline figures: stat tiles, not a grouped bar chart. */}
+      <div className="grid grid-cols-2 md:grid-cols-5 gap-2.5 mb-3">
+        <StatTile label={t('stats.qsos')} value={nf(stats.total)} sub={span} accent="var(--chart-1)" />
+        <StatTile label={t('stats.uniqueCalls')} value={nf(stats.unique_calls)} accent="var(--chart-2)" />
+        <StatTile label={t('stats.entities')} value={nf(stats.entities)} sub="DXCC" accent="var(--chart-5)" />
+        <StatTile label={t('stats.continents')} value={nf(stats.continents)} sub="/ 7" accent="var(--chart-8)" />
+        <StatTile label={t('stats.confirmed')} value={`${stats.total ? ((stats.confirmed_any / stats.total) * 100).toFixed(0) : 0}%`}
+          sub={`${nf(stats.confirmed_any)} / ${nf(stats.total)}`} accent="var(--success)" />
+      </div>
+
+      {/* Period / contest block — ONLY when a window is selected. "12 QSO/h" across
+          seventeen years is noise; across a contest weekend it IS the result. */}
+      {windowed && stats.total > 0 && (
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-2.5 mb-3">
+          <Card title={t('stats.rate')} sub={t('stats.rateSub')} className="lg:col-span-2">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-3">
+              {/* Two rates on purpose: one honest, one flattering — see the tooltip. */}
+              <div title={t('stats.avgWindowTip')}>
+                <p className="text-[10px] uppercase tracking-wider text-muted-foreground truncate">{t('stats.avgWindow')}</p>
+                <p className="text-[22px] leading-none font-semibold mt-1">{stats.avg_per_hour.toFixed(1)}<span className="text-[11px] text-muted-foreground font-normal"> /h</span></p>
+              </div>
+              <div title={t('stats.avgActiveTip')}>
+                <p className="text-[10px] uppercase tracking-wider text-muted-foreground truncate">{t('stats.avgActive')}</p>
+                <p className="text-[22px] leading-none font-semibold mt-1">{stats.avg_per_active.toFixed(1)}<span className="text-[11px] text-muted-foreground font-normal"> /h</span></p>
+              </div>
+              <div title={t('stats.best60Tip')}>
+                <p className="text-[10px] uppercase tracking-wider text-muted-foreground truncate">{t('stats.best60')}</p>
+                <p className="text-[22px] leading-none font-semibold mt-1">{nf(stats.best_60)}</p>
+              </div>
+              {/* On-air + off-air = the window, by construction. The first version
+                  counted "clock hours containing a QSO", which gave 39 h on air AND
+                  16 h off air inside a 45 h contest — and rightly wasn't believed. */}
+              <div title={t('stats.onAirTip')}>
+                <p className="text-[10px] uppercase tracking-wider text-muted-foreground truncate">{t('stats.activeHours')}</p>
+                <p className="text-[22px] leading-none font-semibold mt-1">
+                  {dur(stats.on_air_minutes)}
+                  <span className="text-[11px] text-muted-foreground font-normal"> / {Math.round(stats.window_hours)} h</span>
+                </p>
+              </div>
+            </div>
+            {stats.rate.length > 1
+              ? <RateStack rate={stats.rate} ops={stats.rate_ops} byOp={stats.rate_by_op} empty={empty} />
+              : <p className="text-[11px] text-muted-foreground italic py-3 text-center">{t('stats.rateTooLong')}</p>}
+          </Card>
+
+          <Card title={t('stats.offAir')} sub={t('stats.offAirSub', { d: dur(stats.off_air_minutes) })}>
+            {stats.gaps.length === 0 ? (
+              <p className="text-[11px] text-muted-foreground italic py-3 text-center">{t('stats.noGaps')}</p>
+            ) : (
+              <ul className="flex flex-col gap-1 min-w-0">
+                {stats.gaps.map((g, i) => (
+                  <li key={i} className="flex items-center gap-2 text-[11px] min-w-0">
+                    <span className="tabular-nums text-muted-foreground truncate">
+                      {g.start.slice(5, 16).replace('T', ' ')} → {g.end.slice(11, 16)}
+                    </span>
+                    <span className="flex-1 h-[6px] rounded-full min-w-0"
+                      style={{
+                        background: 'var(--chart-seq-1)',
+                      }}>
+                      <span className="block h-full rounded-full"
+                        style={{
+                          width: `${Math.min(100, (g.minutes / Math.max(1, stats.gaps[0].minutes)) * 100)}%`,
+                          background: 'var(--chart-1)',
+                        }} />
+                    </span>
+                    <span className="shrink-0 tabular-nums font-medium">{dur(g.minutes)}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </Card>
+
+          {/* The rate sheet: exact numbers, many of them, hour by hour and operator
+              by operator. That is a table's job, not a chart's — and it's how
+              contesters actually read a run. Every value here is also what the
+              stacked chart above draws, so the two can never disagree. */}
+          {stats.rate.length > 1 && (
+            <Card title={t('stats.rateSheet')} sub={t('stats.rateSheetSub')} className="lg:col-span-3">
+              <RateSheet rate={stats.rate} ops={stats.rate_ops} byOp={stats.rate_by_op} />
+            </Card>
+          )}
+        </div>
+      )}
+
+      {view === 'table' ? (
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-2.5">
+          <BucketTable title={t('stats.byBand')} data={stats.by_band} />
+          <BucketTable title={t('stats.byMode')} data={stats.by_mode} />
+          <BucketTable title={t('stats.byOperator')} data={stats.by_operator} />
+          <BucketTable title={t('stats.byContinent')} data={stats.by_continent} />
+          <BucketTable title={t('stats.topEntities')} data={stats.top_entities} />
+          <BucketTable title={t('stats.byYear')} data={stats.by_year} />
+          <BucketTable title={t('stats.byStation')} data={stats.by_station} />
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-2.5">
+          <Card title={t('stats.bandSplit')} sub={t('stats.bandSplitSub')} accent="var(--chart-3)">
+            <StackedBandBars data={stats.by_band_category} empty={empty} />
+          </Card>
+          <Card title={t('stats.byMode')} accent="var(--chart-2)">
+            <HBars data={stats.by_mode} max={8} empty={empty} colorful />
+          </Card>
+
+          <ActivityCard stats={stats} t={t} empty={empty} />
+          <RhythmCard stats={stats} t={t} empty={empty} />
+
+          {/* EVERY operator, never a top-N: on a multi-op contest the point is who
+              worked what, and a cap would quietly delete the 9th operator. Scrolls
+              instead of truncating. */}
+          <Card title={t('stats.byOperator')} accent="var(--chart-5)">
+            <div className="max-h-[240px] overflow-auto pr-1 min-w-0">
+              <HBars data={stats.by_operator} empty={empty} share color="var(--chart-5)" />
+            </div>
+          </Card>
+          <Card title={t('stats.byContinent')} sub={t('stats.byContinentSub')} accent="var(--chart-6)">
+            <Donut data={stats.by_continent} empty={empty} />
+          </Card>
+
+          <Card title={t('stats.topEntities')} accent="var(--chart-4)">
+            <HBars data={stats.top_entities} max={12} empty={empty} labelWidth="w-40" color="var(--chart-4)" />
+          </Card>
+          <div className="flex flex-col gap-2.5 min-w-0">
+            <Card title={t('stats.confirmations')} className="flex-1" accent="var(--success)">
+              <div className="flex flex-col gap-3 justify-center flex-1">
+                <Meter label="LoTW" value={stats.confirmed_lotw} total={stats.total} />
+                <Meter label="eQSL" value={stats.confirmed_eqsl} total={stats.total} />
+                <Meter label={t('stats.paperQSL')} value={stats.confirmed_qsl} total={stats.total} />
+              </div>
+            </Card>
+            <Card title={t('stats.byStation')} accent="var(--chart-8)">
+              <div className="max-h-[140px] overflow-auto pr-1 min-w-0">
+                <HBars data={stats.by_station} empty={empty} share color="var(--chart-8)" />
+              </div>
+            </Card>
+          </div>
+
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/TunerCard.tsx

@@ -0,0 +1,171 @@
+import { useRef, useState } from 'react';
+import { Gauge, Radio, ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { MeterBar } from '@/components/MeterBar';
+import type { TGStatus, TGChannel } from '@/components/TunerGeniusPanel';
+import { TunerGeniusAutotune, TunerGeniusSetBypass, TunerGeniusSetOperate, TunerGeniusActivate } from '../../wailsjs/go/main/App';
+
+// TunerCard renders the 4O3A Tuner Genius XL exactly like the amplifier card
+// (AmpCard) so Station Control and the FlexRadio panel show the SAME card. It
+// mirrors the native app's two channels (A / B) with their source, frequency and
+// antenna, a live PWR / SWR pair, and the Tune / Bypass / Operate actions. It
+// drives the backend directly (no local state) — the caller's ~1.5s poll
+// reconciles the display, just like AmpCard. Meters come from the shared MeterBar
+// so they're the exact same size as the Flex/amp meters.
+
+function Card({ icon: Icon, title, accent, children, ckey }: { icon: any; title: string; accent?: string; children: React.ReactNode; ckey?: string }) {
+  // Collapsible with persisted state — same behaviour as the FlexRadio panel's Card.
+  const storeKey = 'opslog.cardOpen.' + (ckey || title);
+  const [open, setOpen] = useState(() => localStorage.getItem(storeKey) !== '0');
+  const toggle = () => setOpen((o) => { const n = !o; localStorage.setItem(storeKey, n ? '1' : '0'); return n; });
+  return (
+    <div className="rounded-xl border border-border bg-card shadow-sm overflow-hidden">
+      <button type="button" onClick={toggle}
+        className={cn('w-full flex items-center gap-2 px-3 py-2 bg-muted/30 hover:bg-muted/50 transition-colors text-left', open && 'border-b border-border/60')}>
+        <Icon className="size-4" style={{ color: accent ?? 'var(--primary)' }} />
+        <span className="text-xs font-bold uppercase tracking-wider text-foreground/80">{title}</span>
+        <ChevronDown className={cn('ml-auto size-4 text-muted-foreground transition-transform', !open && '-rotate-90')} />
+      </button>
+      {open && <div className="p-3 space-y-3">{children}</div>}
+    </div>
+  );
+}
+
+// ChannelButton — one of the two RF channels (A / B). Clicking it makes that
+// channel active. Shows the source (RF Sense / Flex / CAT…), frequency and
+// antenna, matching the two rows of the native 4O3A app.
+function ChannelButton({ letter, ch, active, ptt, threeWay, onSelect, t }: {
+  letter: 'A' | 'B'; ch: TGChannel; active: boolean; ptt: boolean; threeWay: boolean;
+  onSelect: () => void; t: (k: string, v?: any) => string;
+}) {
+  const cls = ptt
+    ? 'bg-gradient-to-b from-red-500 to-rose-600 text-white border-red-400/50 shadow-[0_0_10px_rgba(244,63,94,0.5)]'
+    : active
+      ? 'bg-gradient-to-b from-emerald-500 to-emerald-600 text-white border-emerald-400/50 shadow-[0_0_9px_rgba(16,185,129,0.4)]'
+      : 'bg-card text-foreground/80 border-border hover:bg-muted';
+  const src = ch.mode_str || '—';
+  const freq = ch.freq_mhz && ch.freq_mhz > 0 ? `${ch.freq_mhz.toFixed(3)} MHz` : '—';
+  return (
+    <button type="button" onClick={onSelect}
+      title={active ? t('tgp.chActive', { letter }) : t('tgp.chSelect', { letter })}
+      className={cn('flex-1 min-w-0 rounded-lg border px-2 py-1.5 text-left transition-all active:scale-[0.98]', cls)}>
+      <div className="flex items-center gap-1.5">
+        <span className="font-extrabold text-sm">{letter}</span>
+        <span className="text-[11px] font-semibold truncate opacity-90">{src}</span>
+        {ptt && <span className="ml-auto text-[9px] font-bold uppercase">TX</span>}
+        {!ptt && active && <span className="ml-auto text-[9px] font-bold uppercase opacity-90">{t('tgp.chActiveTag')}</span>}
+      </div>
+      <div className="flex items-center gap-1.5 mt-0.5">
+        <span className="font-mono text-[11px] tabular-nums truncate">{freq}</span>
+        {ch.antenna != null && ch.antenna > 0 && (threeWay || ch.antenna > 0) && (
+          <span className="ml-auto text-[10px] font-semibold whitespace-nowrap opacity-90">{t('tgp.ant')} {ch.antenna}</span>
+        )}
+      </div>
+    </button>
+  );
+}
+
+export function TunerCard({ status, t }: { status: TGStatus; t: (k: string, v?: any) => string }) {
+  // Peak-hold, exactly as AmpCard does it. Both cards read the same transmitter,
+  // but the tuner is sampled by a 400 ms TCP poll: on SSB that lands in the gaps
+  // between syllables as often as on a peak, so the raw reading collapses to zero
+  // several times a second mid-transmission and reads as a dropped link. The
+  // amplifier looked steady next to it only because it already smoothed this way.
+  // Hold the highest value seen, decaying after 2 s so it follows a real drop.
+  const peak = useRef<Record<string, { v: number; t: number }>>({});
+  const peakHold = (key: string, val: number) => {
+    const now = Date.now();
+    const p = peak.current[key];
+    if (!p || val >= p.v || now - p.t > 1000) { peak.current[key] = { v: val, t: now }; return val; }
+    return p.v;
+  };
+
+  const connected = !!status.connected;
+  const rawVswr = status.vswr && status.vswr > 0 ? status.vswr : undefined;
+  // Prefer the device's own peak detector over the sampled reading; the JS hold
+  // below still smooths what is left between polls.
+  const rawPeak = Math.max(status.peak_w ?? 0, status.fwd_w ?? 0);
+  const rawFwdW = rawPeak >= 1 ? rawPeak : 0;
+  const fwdW = peakHold('fwd', rawFwdW);
+
+  // SWR needs RF to mean anything: sampled on receive the device reports a
+  // meaningless 1.00, which would wipe the figure the operator actually wants —
+  // the one measured while transmitting. So show the live value during TX, keep it
+  // briefly afterwards so it can be read, then let it go.
+  //
+  // That expiry is the point: the first version of this held the last TX value
+  // with no timeout at all, so the meter sat frozen on the previous transmission
+  // indefinitely — reading 1.39:1 with the radio plainly in RX and 0 W forward.
+  // Same one-second window as the power peak above, so the two meters clear
+  // together.
+  const swrHold = useRef<{ v: number; t: number } | null>(null);
+  if (rawFwdW >= 1 && rawVswr) swrHold.current = { v: rawVswr, t: Date.now() };
+  const heldSwr = swrHold.current;
+  const vswr = rawFwdW >= 1
+    ? rawVswr
+    : heldSwr && Date.now() - heldSwr.t < 1000
+      ? heldSwr.v
+      : undefined;
+  const active = status.active ?? 1;
+  const a: TGChannel = status.a ?? {};
+  const b: TGChannel = status.b ?? {};
+
+  const title = `${t('tgp.title')}${status.host ? ' · ' + status.host : ''}`;
+  return (
+    <Card icon={Gauge} title={title} accent="#f59e0b">
+      <div className="flex items-center gap-3 flex-wrap">
+        <button type="button" disabled={!connected}
+          onClick={() => TunerGeniusSetOperate(!status.operate).catch(() => {})}
+          className={cn('px-4 py-2 rounded-lg text-sm font-extrabold tracking-wide border-2 transition-all disabled:opacity-30',
+            status.operate ? 'bg-warning text-warning-foreground border-warning shadow-[0_0_14px] shadow-warning/50' : 'bg-card text-warning border-warning hover:bg-warning-muted')}>
+          {status.operate ? 'OPERATE' : 'STANDBY'}
+        </button>
+        <button type="button" disabled={!connected}
+          onClick={() => TunerGeniusAutotune().catch(() => {})}
+          className={cn('inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-extrabold tracking-wide border-2 transition-all disabled:opacity-30',
+            status.tuning ? 'bg-amber-500 text-white border-amber-500 shadow-[0_0_14px] shadow-amber-500/50 animate-pulse' : 'bg-card text-amber-600 border-amber-500 hover:bg-amber-500/10')}>
+          <Radio className="size-4" />{status.tuning ? t('tgp.tuning') : t('tgp.tune')}
+        </button>
+        <button type="button" disabled={!connected}
+          onClick={() => TunerGeniusSetBypass(!status.bypass).catch(() => {})}
+          className={cn('px-4 py-2 rounded-lg text-sm font-bold tracking-wide border-2 transition-all disabled:opacity-30',
+            status.bypass ? 'bg-sky-500 text-white border-sky-500 shadow-[0_0_12px] shadow-sky-500/40' : 'bg-card text-sky-600 border-sky-500/70 hover:bg-sky-500/10')}>
+          {t('tgp.bypass')}
+        </button>
+        <span className={cn('inline-flex items-center gap-1.5 text-sm', connected ? 'text-muted-foreground' : 'text-danger')}>
+          <span className={cn('size-2 rounded-full', connected ? 'bg-success' : 'bg-danger')} />
+          {connected ? (status.bypass ? t('tgp.bypassed') : t('tgp.inLine')) : t('tgp.offline')}
+        </span>
+        <div className="flex-1" />
+        {status.message && (
+          <span className="px-2 py-1 rounded bg-warning-muted text-warning-muted-foreground text-xs font-bold">⚠ {status.message}</span>
+        )}
+      </div>
+
+      {connected && (
+        <>
+          {/* Channel A / B selector — click to make active (activate ch=1/2). */}
+          <div className="flex items-stretch gap-2">
+            <ChannelButton letter="A" ch={a} active={active === 1} ptt={!!a.ptt} threeWay={!!status.three_way}
+              onSelect={() => TunerGeniusActivate(1).catch(() => {})} t={t} />
+            <ChannelButton letter="B" ch={b} active={active === 2} ptt={!!b.ptt} threeWay={!!status.three_way}
+              onSelect={() => TunerGeniusActivate(2).catch(() => {})} t={t} />
+          </div>
+
+          {/* PWR + SWR meters, each taking half the card. The amp card's grid is
+              3-wide because it shows three meters; copying it here left the tuner's
+              two meters in the first two of three columns, with a third of the card
+              empty to the right of SWR. */}
+          <div className="grid grid-cols-2 gap-2">
+            <MeterBar label={t('tgp.power')} value={fwdW} unit="W" lo={0} hi={2000}
+              display={fwdW >= 1 ? `${Math.round(fwdW)} W` : '—'}
+              segColor={(f) => (f > 0.9 ? '#dc2626' : f > 0.75 ? '#f59e0b' : '#ea580c')} />
+            <MeterBar label={t('tgp.swr')} value={vswr ?? 1} lo={1} hi={3}
+              display={vswr ? `${vswr.toFixed(2)}:1` : '—'}
+              segColor={(f) => (f > 0.5 ? '#dc2626' : f > 0.25 ? '#f59e0b' : '#16a34a')} />
+          </div>
+        </>
+      )}
+    </Card>
+  );
+}

frontend/src/components/TunerGeniusPanel.tsx

@@ -0,0 +1,180 @@
+import { Gauge, X, Power, Radio } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
+
+export type TGChannel = {
+  ptt?: boolean; band?: number; mode?: number; mode_str?: string; flex?: string;
+  freq_mhz?: number; bypass?: boolean; antenna?: number;
+};
+export type TGStatus = {
+  connected: boolean; host?: string; last_error?: string;
+  fwd_dbm?: number; fwd_w?: number; peak_w?: number; swr_db?: number; vswr?: number; freq_mhz?: number;
+  operate?: boolean; bypass?: boolean; tuning?: boolean; active?: number;
+  antenna?: number; three_way?: boolean; message?: string;
+  a?: TGChannel; b?: TGChannel;
+  relay_c1?: number; relay_l?: number; relay_c2?: number;
+};
+
+// swrColour picks a status colour for the VSWR readout: green ≤1.5, amber ≤2.0,
+// red above (the usual "safe / caution / high" ATU thresholds).
+function swrColour(vswr?: number): string {
+  if (!vswr || vswr <= 0) return 'text-muted-foreground';
+  if (vswr <= 1.5) return 'text-success';
+  if (vswr <= 2.0) return 'text-warning';
+  return 'text-danger';
+}
+
+// ChanRow — a compact A/B channel line in the docked widget. Highlights the
+// active channel (green) or TX (red), shows the source + frequency + antenna,
+// and clicking it makes that channel active.
+function ChanRow({ letter, ch, active, onSelect, t }: {
+  letter: 'A' | 'B'; ch: TGChannel; active: boolean; onSelect: () => void;
+  t: (k: string, v?: any) => string;
+}) {
+  const ptt = !!ch.ptt;
+  const cls = ptt
+    ? 'bg-gradient-to-r from-red-500 to-rose-600 text-white border-red-400/40'
+    : active
+      ? 'bg-gradient-to-r from-emerald-500 to-emerald-600 text-white border-emerald-400/40'
+      : 'bg-card/70 text-foreground/80 border-border hover:bg-muted/60';
+  const src = ch.mode_str || '—';
+  const freq = ch.freq_mhz && ch.freq_mhz > 0 ? `${ch.freq_mhz.toFixed(3)}` : '—';
+  return (
+    <button type="button" onClick={onSelect}
+      title={active ? t('tgp.chActive', { letter }) : t('tgp.chSelect', { letter })}
+      className={cn('w-full flex items-center gap-1.5 rounded-lg border px-2 py-1 text-left transition-all active:scale-[0.98]', cls)}>
+      <span className="font-extrabold text-xs w-3 shrink-0">{letter}</span>
+      <span className="text-[10px] font-semibold truncate opacity-90 w-12 shrink-0">{src}</span>
+      <span className="font-mono text-[10px] tabular-nums truncate flex-1">{freq}</span>
+      {ch.antenna != null && ch.antenna > 0 && (
+        <span className="text-[9px] font-semibold whitespace-nowrap opacity-90 shrink-0">{t('tgp.ant')}{ch.antenna}</span>
+      )}
+      {ptt && <span className="text-[9px] font-bold uppercase shrink-0">TX</span>}
+    </button>
+  );
+}
+
+// TunerGeniusPanel — compact docked widget for a 4O3A Tuner Genius XL ATU. Shows
+// the live SWR / forward power, the two RF channels (A / B, click to activate),
+// and Tune / Bypass / Operate. A fuller card (TunerCard) is shown in the FlexRadio
+// panel and Station Control.
+export function TunerGeniusPanel({ status, onTune, onBypass, onOperate, onActivate, onClose }: {
+  status: TGStatus;
+  onTune: () => void;
+  onBypass: (on: boolean) => void;
+  onOperate: (on: boolean) => void;
+  onActivate: (ch: number) => void;
+  onClose: () => void;
+}) {
+  const { t } = useI18n();
+  const vswr = status.vswr && status.vswr > 0 ? status.vswr : undefined;
+  const active = status.active ?? 1;
+  // The device's own peak, not the instantaneous reading: a 400 ms poll lands
+  // between syllables as often as on a peak, so the plain figure showed a few
+  // hundred watts on a kilowatt transmission.
+  const fwdW = Math.max(status.peak_w ?? 0, status.fwd_w ?? 0);
+
+  return (
+    <div className="h-full flex flex-col rounded-xl border border-border bg-gradient-to-b from-card to-muted/30 shadow-sm overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border/60 bg-muted/40 shrink-0">
+        <Gauge className={cn('size-4', status.connected ? 'text-success drop-shadow-[0_0_3px_rgba(16,185,129,0.55)]' : 'text-muted-foreground')} />
+        <span className="text-xs font-bold uppercase tracking-[0.18em] text-foreground/80">Tuner Genius</span>
+        <span className="flex-1" />
+        <span className="inline-flex items-center gap-1.5 text-[10px] font-mono uppercase tracking-wider">
+          <span className={cn('size-1.5 rounded-full', status.connected ? 'bg-success shadow-[0_0_6px_rgba(16,185,129,0.8)] animate-pulse' : 'bg-danger')} />
+          <span className={status.connected ? 'text-success' : 'text-danger'}>{status.connected ? t('tgp.online') : t('tgp.offline')}</span>
+        </span>
+        <button type="button" onClick={onClose} className="ml-1 text-muted-foreground hover:text-foreground transition-colors" title={t('tgp.close')}>
+          <X className="size-3.5" />
+        </button>
+      </div>
+
+      {!status.connected ? (
+        <div className="flex-1 min-h-0 flex flex-col items-center justify-center text-xs gap-2 p-3">
+          <div className="text-muted-foreground italic animate-pulse">{t('tgp.connecting')}</div>
+          {status.last_error && <div className="text-danger font-mono text-[10px] break-words text-center px-2">{status.last_error}</div>}
+        </div>
+      ) : (
+        <div className="flex-1 min-h-0 overflow-y-auto p-2.5 space-y-2.5">
+          {/* SWR + forward power readouts */}
+          <div className="grid grid-cols-2 gap-2">
+            <div className="rounded-lg border border-border bg-card/70 px-2 py-1.5 text-center">
+              <div className="text-[9px] uppercase tracking-wider text-muted-foreground">{t('tgp.swr')}</div>
+              <div className={cn('text-lg font-bold font-mono leading-tight', swrColour(vswr))}>
+                {vswr ? `${vswr.toFixed(2)}:1` : '—'}
+              </div>
+            </div>
+            <div className="rounded-lg border border-border bg-card/70 px-2 py-1.5 text-center">
+              <div className="text-[9px] uppercase tracking-wider text-muted-foreground">{t('tgp.power')}</div>
+              <div className="text-lg font-bold font-mono leading-tight text-foreground/80">
+                {fwdW >= 1 ? `${Math.round(fwdW)} W` : '—'}
+              </div>
+            </div>
+          </div>
+
+          {/* Channel A / B — click to activate */}
+          <div className="space-y-1">
+            <ChanRow letter="A" ch={status.a ?? {}} active={active === 1} onSelect={() => onActivate(1)} t={t} />
+            <ChanRow letter="B" ch={status.b ?? {}} active={active === 2} onSelect={() => onActivate(2)} t={t} />
+          </div>
+
+          {status.message && (
+            <div className="rounded-lg border border-warning-border bg-warning-muted text-warning-muted-foreground text-[10px] px-2 py-1 text-center break-words">
+              {status.message}
+            </div>
+          )}
+
+          {/* Tune */}
+          <button
+            type="button"
+            onClick={onTune}
+            disabled={status.tuning}
+            title={t('tgp.tuneHint')}
+            className={cn(
+              'w-full rounded-lg text-sm font-bold py-2 border transition-all active:scale-[0.98]',
+              status.tuning
+                ? 'bg-gradient-to-b from-amber-400 to-amber-600 text-white border-amber-300/60 shadow-[0_0_10px_rgba(245,158,11,0.5)] animate-pulse'
+                : 'bg-gradient-to-b from-primary/90 to-primary text-primary-foreground border-primary/40 hover:brightness-110',
+            )}
+          >
+            <span className="inline-flex items-center justify-center gap-2">
+              <Radio className="size-4" />
+              {status.tuning ? t('tgp.tuning') : t('tgp.tune')}
+            </span>
+          </button>
+
+          {/* Bypass + Operate toggles */}
+          <div className="grid grid-cols-2 gap-2">
+            <button
+              type="button"
+              onClick={() => onBypass(!status.bypass)}
+              title={t('tgp.bypassHint')}
+              className={cn(
+                'rounded-lg text-xs font-bold py-1.5 border transition-all active:scale-95',
+                status.bypass
+                  ? 'bg-gradient-to-b from-sky-400 to-sky-600 text-white border-sky-300/60 shadow-[0_0_9px_rgba(14,165,233,0.45)]'
+                  : 'bg-card text-muted-foreground border-border hover:bg-muted hover:text-foreground',
+              )}
+            >
+              {t('tgp.bypass')}
+            </button>
+            <button
+              type="button"
+              onClick={() => onOperate(!status.operate)}
+              title={t('tgp.operateHint')}
+              className={cn(
+                'inline-flex items-center justify-center gap-1.5 rounded-lg text-xs font-bold py-1.5 border transition-all active:scale-95',
+                status.operate
+                  ? 'bg-gradient-to-b from-emerald-400 to-emerald-600 text-white border-emerald-300/60 shadow-[0_0_9px_rgba(16,185,129,0.45)]'
+                  : 'bg-card text-muted-foreground border-border hover:bg-muted hover:text-foreground',
+              )}
+            >
+              <Power className="size-3.5" />
+              {status.operate ? t('tgp.operate') : t('tgp.standby')}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/UDPIntegrationsPanel.tsx

@@ -14,6 +14,7 @@ import {
   Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
 } from '@/components/ui/select';
 import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
 
 // Local mirror of the Go struct — we duplicate the type rather than depend
 // on the generated Wails model because the inline `as any` casts are
@@ -23,7 +24,7 @@ type UDPConfig = {
   direction: 'inbound' | 'outbound';
   name: string;
   port: number;
-  service_type: 'wsjt' | 'adif' | 'n1mm' | 'remote_call' | 'db_updated';
+  service_type: 'wsjt' | 'adif' | 'n1mm' | 'remote_call' | 'db_updated' | 'pstrotator_freq' | 'n1mm_radioinfo';
   multicast: boolean;
   multicast_group: string;
   destination_ip: string;
@@ -44,43 +45,58 @@ const SERVICE_TYPES: Array<{
   {
     id: 'wsjt',
     direction: 'inbound',
-    label: 'WSJT-X / JTDX / MSHV',
-    hint: 'Auto-logs FT8/FT4/etc. QSOs and fills the entry callsign live.',
+    label: 'udpp.svcWsjtLabel',
+    hint: 'udpp.svcWsjtHint',
     defaults: { port: 2237, multicast: true, multicast_group: '224.0.0.1' },
   },
   {
     id: 'adif',
     direction: 'inbound',
-    label: 'ADIF message (JTAlert, GridTracker)',
-    hint: 'Receives a single ADIF record per packet and logs it.',
+    label: 'udpp.svcAdifLabel',
+    hint: 'udpp.svcAdifHint',
     defaults: { port: 2333, multicast: false },
   },
   {
     id: 'n1mm',
     direction: 'inbound',
-    label: 'N1MM Logger+ (contest XML)',
-    hint: 'Receives contest QSOs as XML messages.',
+    label: 'udpp.svcN1mmLabel',
+    hint: 'udpp.svcN1mmHint',
     defaults: { port: 12060, multicast: false },
   },
   {
     id: 'remote_call',
     direction: 'inbound',
-    label: 'Remote callsign (DXHunter, custom)',
-    hint: 'A short text packet containing just a callsign — fills the entry field.',
+    label: 'udpp.svcRemoteLabel',
+    hint: 'udpp.svcRemoteHint',
     defaults: { port: 12090, multicast: false },
   },
   {
     id: 'db_updated',
     direction: 'outbound',
-    label: 'DB updated → notify other apps',
-    hint: 'Sends the ADIF of every QSO you log to a remote listener (Cloudlog UDP, N1MM, …).',
+    label: 'udpp.svcDbLabel',
+    hint: 'udpp.svcDbHint',
     defaults: { port: 2333, destination_ip: '127.0.0.1' },
   },
+  {
+    id: 'pstrotator_freq',
+    direction: 'outbound',
+    label: 'udpp.svcPstLabel',
+    hint: 'udpp.svcPstHint',
+    defaults: { port: 12040, destination_ip: '127.0.0.1' },
+  },
+  {
+    id: 'n1mm_radioinfo',
+    direction: 'outbound',
+    label: 'udpp.svcN1mmRadioLabel',
+    hint: 'udpp.svcN1mmRadioHint',
+    defaults: { port: 12060, destination_ip: '127.0.0.1' },
+  },
 ];
 
 type Props = { onError: (msg: string) => void };
 
 export function UDPIntegrationsPanel({ onError }: Props) {
+  const { t } = useI18n();
   const [items, setItems] = useState<UDPConfig[]>([]);
   const [loading, setLoading] = useState(true);
   const [editing, setEditing] = useState<UDPConfig | null>(null);
@@ -123,7 +139,7 @@ export function UDPIntegrationsPanel({ onError }: Props) {
   }
 
   async function remove(id: number) {
-    if (!confirm('Delete this UDP connection?')) return;
+    if (!confirm(t('udpp.deleteConfirm'))) return;
     try {
       await DeleteUDPIntegration(id);
       setItems((prev) => prev.filter((x) => x.id !== id));
@@ -143,7 +159,7 @@ export function UDPIntegrationsPanel({ onError }: Props) {
     } catch (e: any) { onError(String(e?.message ?? e)); }
   }
 
-  if (loading) return <div className="text-xs text-muted-foreground italic">Loading…</div>;
+  if (loading) return <div className="text-xs text-muted-foreground italic">{t('udpp.loading')}</div>;
 
   const inbound = items.filter((i) => i.direction === 'inbound');
   const outbound = items.filter((i) => i.direction === 'outbound');
@@ -151,15 +167,11 @@ export function UDPIntegrationsPanel({ onError }: Props) {
   return (
     <div className="space-y-4">
       <div className="text-[11px] text-muted-foreground max-w-2xl leading-relaxed">
-        UDP connections let OpsLog talk to other ham radio software. Inbound
-        connections receive QSOs or callsigns and update the logbook live;
-        outbound connections notify other apps when you log a QSO locally.
-        Enable multicast to share a port with another listener without
-        conflict — required for the typical WSJT-X 2237 setup.
+        {t('udpp.intro')}
       </div>
 
       <Section
-        title="Inbound — OpsLog listens"
+        title={t('udpp.inboundTitle')}
         icon={<ArrowDownToLine className="size-4" />}
         items={inbound}
         onAdd={() => addNew('inbound')}
@@ -168,7 +180,7 @@ export function UDPIntegrationsPanel({ onError }: Props) {
         onToggle={toggleEnabled}
       />
       <Section
-        title="Outbound — OpsLog sends"
+        title={t('udpp.outboundTitle')}
         icon={<ArrowUpFromLine className="size-4" />}
         items={outbound}
         onAdd={() => addNew('outbound')}
@@ -179,10 +191,10 @@ export function UDPIntegrationsPanel({ onError }: Props) {
 
       <div className="border-t border-border/60 pt-3 flex items-center gap-3">
         <Button size="sm" variant="outline" onClick={reloadServers}>
-          <RefreshCcw className="size-3.5" /> Reload all
+          <RefreshCcw className="size-3.5" /> {t('udpp.reloadAll')}
         </Button>
         <span className="text-[11px] text-muted-foreground">
-          Restarts every enabled listener after a manual change.
+          {t('udpp.reloadHint')}
         </span>
       </div>
 
@@ -210,6 +222,7 @@ function Section({
   onDelete: (id: number) => void;
   onToggle: (c: UDPConfig) => void;
 }) {
+  const { t } = useI18n();
   return (
     <div className="rounded-md border border-border bg-card">
       <div className="flex items-center gap-2 px-3 py-2 border-b border-border/60 bg-muted/30">
@@ -217,11 +230,11 @@ function Section({
         <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{title}</span>
         <div className="flex-1" />
         <Button size="sm" variant="outline" className="h-7 text-xs" onClick={onAdd}>
-          <Plus className="size-3" /> Add
+          <Plus className="size-3" /> {t('udpp.add')}
         </Button>
       </div>
       {items.length === 0 ? (
-        <div className="px-3 py-3 text-xs text-muted-foreground italic">No connection.</div>
+        <div className="px-3 py-3 text-xs text-muted-foreground italic">{t('udpp.noConnection')}</div>
       ) : (
         <div className="divide-y divide-border/60">
           {items.map((c) => {
@@ -231,9 +244,9 @@ function Section({
                 <Checkbox checked={c.enabled} onCheckedChange={() => onToggle(c)} />
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2">
-                    <span className="font-semibold text-sm truncate">{c.name || '(unnamed)'}</span>
+                    <span className="font-semibold text-sm truncate">{c.name || t('udpp.unnamed')}</span>
                     <span className="text-[10px] uppercase tracking-wider text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
-                      {svc?.label ?? c.service_type}
+                      {svc ? t(svc.label) : c.service_type}
                     </span>
                   </div>
                   <div className="text-[11px] text-muted-foreground font-mono">
@@ -269,6 +282,7 @@ function EditDialog({
   onCancel: () => void;
   onSave: (c: UDPConfig) => void;
 }) {
+  const { t } = useI18n();
   const [draft, setDraft] = useState<UDPConfig>(cfg);
   // Service-type list filtered to this connection's direction.
   const services = SERVICE_TYPES.filter((s) => s.direction === draft.direction);
@@ -292,31 +306,33 @@ function EditDialog({
       <DialogContent className="max-w-xl">
         <DialogHeader>
           <DialogTitle>
-            {cfg.id === 0 ? 'New' : 'Edit'} {draft.direction} connection
+            {t('udpp.dialogTitle', {
+              action: cfg.id === 0 ? t('udpp.new') : t('udpp.edit'),
+              direction: draft.direction === 'inbound' ? t('udpp.directionInbound') : t('udpp.directionOutbound'),
+            })}
           </DialogTitle>
           <DialogDescription>
-            {currentService?.hint}
+            {currentService ? t(currentService.hint) : ''}
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4 px-5 py-4">
           <div className="space-y-1">
-            <Label>Name</Label>
+            <Label>{t('udpp.name')}</Label>
             <Input
               autoFocus
-              placeholder={draft.direction === 'inbound' ? 'WSJT-X log' : 'Cloudlog notify'}
               value={draft.name}
               onChange={(e) => setDraft((d) => ({ ...d, name: e.target.value }))}
             />
           </div>
 
           <div className="space-y-1">
-            <Label>Service type</Label>
+            <Label>{t('udpp.serviceType')}</Label>
             <Select value={draft.service_type} onValueChange={(v) => applyPreset(v as UDPConfig['service_type'])}>
               <SelectTrigger><SelectValue /></SelectTrigger>
               <SelectContent>
                 {services.map((s) => (
-                  <SelectItem key={s.id} value={s.id}>{s.label}</SelectItem>
+                  <SelectItem key={s.id} value={s.id}>{t(s.label)}</SelectItem>
                 ))}
               </SelectContent>
             </Select>
@@ -324,7 +340,7 @@ function EditDialog({
 
           <div className="grid grid-cols-[1fr_auto] gap-2 items-end">
             <div className="space-y-1">
-              <Label>Port</Label>
+              <Label>{t('udpp.port')}</Label>
               <Input
                 type="number"
                 min={1} max={65535}
@@ -341,13 +357,13 @@ function EditDialog({
                 checked={draft.multicast}
                 onCheckedChange={(c) => setDraft((d) => ({ ...d, multicast: !!c }))}
               />
-              <span>Multicast</span>
+              <span>{t('udpp.multicast')}</span>
             </label>
           </div>
 
           {draft.multicast && (
             <div className="space-y-1">
-              <Label>Multicast group</Label>
+              <Label>{t('udpp.multicastGroup')}</Label>
               <Input
                 className="font-mono"
                 placeholder="224.0.0.1"
@@ -355,14 +371,14 @@ function EditDialog({
                 onChange={(e) => setDraft((d) => ({ ...d, multicast_group: e.target.value }))}
               />
               <div className="text-[10px] text-muted-foreground">
-                Use the same group address as the sending app. WSJT-X default is 224.0.0.1.
+                {t('udpp.multicastHint')}
               </div>
             </div>
           )}
 
           {draft.direction === 'outbound' && (
             <div className="space-y-1">
-              <Label>Destination IP</Label>
+              <Label>{t('udpp.destinationIp')}</Label>
               <Input
                 className="font-mono"
                 placeholder="127.0.0.1"
@@ -377,17 +393,17 @@ function EditDialog({
               checked={draft.enabled}
               onCheckedChange={(c) => setDraft((d) => ({ ...d, enabled: !!c }))}
             />
-            <span>Enabled</span>
+            <span>{t('udpp.enabled')}</span>
           </label>
         </div>
 
         <DialogFooter>
-          <Button variant="ghost" onClick={onCancel}>Cancel</Button>
+          <Button variant="ghost" onClick={onCancel}>{t('udpp.cancel')}</Button>
           <Button
             onClick={() => onSave(draft)}
             disabled={!draft.name.trim() || !draft.port}
           >
-            Save
+            {t('udpp.save')}
           </Button>
         </DialogFooter>
       </DialogContent>

frontend/src/components/WebPublishPanel.tsx

@@ -0,0 +1,211 @@
+import { useEffect, useState } from 'react';
+import { Upload, FolderOpen, Loader2 } from 'lucide-react';
+import {
+  GetWebPublishConfig, SaveWebPublishConfig, WebPublishColumns,
+  TestWebPublishFTP, PublishLogNow, GetWebPublishStatus, PickBackupFolder,
+} from '../../wailsjs/go/main/App';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
+import { useI18n } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+
+type Cfg = {
+  enabled: boolean; format: string; folder: string; file_name: string; title: string;
+  count: number; interval_min: number; columns: string[];
+  ftp_enabled: boolean; ftp_host: string; ftp_port: number; ftp_user: string;
+  ftp_password: string; ftp_tls: boolean; ftp_folder: string; ftp_file_name: string;
+};
+type Col = { key: string; header: string };
+
+export function WebPublishPanel() {
+  const { t } = useI18n();
+  const [cfg, setCfg] = useState<Cfg | null>(null);
+  const [cols, setCols] = useState<Col[]>([]);
+  const [busy, setBusy] = useState<'' | 'test' | 'publish'>('');
+  const [msg, setMsg] = useState('');
+  const [err, setErr] = useState('');
+  // Raw text for the two numeric boxes: bound straight to the number they could
+  // not be cleared, the same trap as the Recent-QSOs Max field.
+  const [countText, setCountText] = useState('');
+  const [everyText, setEveryText] = useState('');
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const [c, k, st] = await Promise.all([GetWebPublishConfig(), WebPublishColumns(), GetWebPublishStatus()]);
+        setCfg(c as any);
+        setCols((k ?? []) as Col[]);
+        setCountText(String((c as any).count ?? 100));
+        setEveryText(String((c as any).interval_min ?? 0));
+        const s: any = st;
+        if (s?.last_err) setErr(s.last_err);
+        else if (s?.last_run) setMsg(t('wpub.lastRun') + ' ' + s.last_run);
+      } catch (e: any) { setErr(String(e?.message ?? e)); }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (!cfg) return <p className="text-xs text-muted-foreground">…</p>;
+  const set = (p: Partial<Cfg>) => setCfg((c) => (c ? { ...c, ...p } : c));
+
+  // Every control saves immediately: this panel has no Save button of its own,
+  // matching the other "saved instantly" panels.
+  const save = async (next: Cfg) => {
+    setCfg(next);
+    try { await SaveWebPublishConfig(next as any); setErr(''); }
+    catch (e: any) { setErr(String(e?.message ?? e)); }
+  };
+  const patch = (p: Partial<Cfg>) => save({ ...cfg, ...p });
+
+  const toggleCol = (key: string) => {
+    const has = cfg.columns?.includes(key);
+    patch({ columns: has ? cfg.columns.filter((c) => c !== key) : [...(cfg.columns ?? []), key] });
+  };
+
+  const run = async (what: 'test' | 'publish') => {
+    setBusy(what); setMsg(''); setErr('');
+    try {
+      const r = what === 'test' ? await TestWebPublishFTP(cfg as any) : await PublishLogNow();
+      setMsg(String(r));
+    } catch (e: any) { setErr(String(e?.message ?? e)); }
+    finally { setBusy(''); }
+  };
+
+  return (
+    <div className="space-y-4 max-w-3xl">
+      <p className="text-xs text-muted-foreground leading-relaxed">{t('wpub.hint')}</p>
+
+      <label className="flex items-center gap-2 text-sm cursor-pointer">
+        <Checkbox checked={cfg.enabled} onCheckedChange={(c) => patch({ enabled: !!c })} />
+        {t('wpub.enable')}
+      </label>
+
+      {cfg.enabled && (<>
+        {/* ── The file ── */}
+        <div className="space-y-2 border-t border-border/60 pt-3">
+          <Label className="text-xs font-semibold">{t('wpub.fileSection')}</Label>
+          <div className="grid grid-cols-[130px_1fr] gap-2 items-center">
+            <Label className="text-sm">{t('wpub.format')}</Label>
+            <Select value={cfg.format} onValueChange={(v) => patch({ format: v })}>
+              <SelectTrigger className="h-8 w-56"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="html">{t('wpub.formatHtml')}</SelectItem>
+                <SelectItem value="csv">{t('wpub.formatCsv')}</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Label className="text-sm">{t('wpub.folder')}</Label>
+            <div className="flex gap-2">
+              <Input className="h-8 font-mono text-xs flex-1" value={cfg.folder}
+                onChange={(e) => set({ folder: e.target.value })} onBlur={() => patch({ folder: cfg.folder })} />
+              <Button variant="outline" size="sm" className="h-8" onClick={async () => {
+                try { const p = await PickBackupFolder(); if (p) patch({ folder: p }); } catch { /* cancelled */ }
+              }}><FolderOpen className="size-3.5" /> {t('wpub.browse')}</Button>
+            </div>
+
+            <Label className="text-sm">{t('wpub.fileName')}</Label>
+            <Input className="h-8 w-56 font-mono text-xs" value={cfg.file_name}
+              onChange={(e) => set({ file_name: e.target.value })} onBlur={() => patch({ file_name: cfg.file_name })} />
+
+            <Label className="text-sm">{t('wpub.title')}</Label>
+            <Input className="h-8" placeholder={t('wpub.titlePh')} value={cfg.title}
+              onChange={(e) => set({ title: e.target.value })} onBlur={() => patch({ title: cfg.title })} />
+
+            <Label className="text-sm">{t('wpub.count')}</Label>
+            <Input type="number" min={1} max={100000} className="h-8 w-28 font-mono text-xs" value={countText}
+              onChange={(e) => setCountText(e.target.value)}
+              onBlur={() => {
+                const n = Math.floor(Number(countText));
+                if (Number.isFinite(n) && n > 0) patch({ count: n }); else setCountText(String(cfg.count));
+              }} />
+
+            <Label className="text-sm">{t('wpub.every')}</Label>
+            <div className="flex items-center gap-2">
+              <Input type="number" min={0} max={1440} className="h-8 w-28 font-mono text-xs" value={everyText}
+                onChange={(e) => setEveryText(e.target.value)}
+                onBlur={() => {
+                  const n = Math.floor(Number(everyText));
+                  if (Number.isFinite(n) && n >= 0) patch({ interval_min: n }); else setEveryText(String(cfg.interval_min));
+                }} />
+              <span className="text-xs text-muted-foreground">{t('wpub.everyHint')}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* ── Columns ── */}
+        <div className="space-y-2 border-t border-border/60 pt-3">
+          <Label className="text-xs font-semibold">{t('wpub.columns')}</Label>
+          <div className="flex flex-wrap gap-1.5">
+            {cols.map((c) => {
+              const on = cfg.columns?.includes(c.key);
+              return (
+                <button key={c.key} type="button" onClick={() => toggleCol(c.key)}
+                  className={cn('px-2 py-0.5 rounded-full border text-[11px] font-medium transition-colors',
+                    on ? 'border-primary bg-primary text-primary-foreground' : 'border-border text-muted-foreground hover:bg-muted')}>
+                  {c.header}
+                </button>
+              );
+            })}
+          </div>
+          <p className="text-[11px] text-muted-foreground">{t('wpub.columnsHint')}</p>
+        </div>
+
+        {/* ── Upload ── */}
+        <div className="space-y-2 border-t border-border/60 pt-3">
+          <label className="flex items-center gap-2 text-sm cursor-pointer">
+            <Checkbox checked={cfg.ftp_enabled} onCheckedChange={(c) => patch({ ftp_enabled: !!c })} />
+            {t('wpub.ftpEnable')}
+          </label>
+          {cfg.ftp_enabled && (
+            <div className="grid grid-cols-[130px_1fr] gap-2 items-center">
+              <Label className="text-sm">{t('wpub.ftpHost')}</Label>
+              <div className="flex gap-2">
+                <Input className="h-8 flex-1" placeholder="ftp.example.com" value={cfg.ftp_host}
+                  onChange={(e) => set({ ftp_host: e.target.value })} onBlur={() => patch({ ftp_host: cfg.ftp_host })} />
+                <Input type="number" className="h-8 w-24 font-mono text-xs" value={cfg.ftp_port}
+                  onChange={(e) => set({ ftp_port: Number(e.target.value) || 21 })}
+                  onBlur={() => patch({ ftp_port: cfg.ftp_port })} />
+              </div>
+              <Label className="text-sm">{t('wpub.ftpUser')}</Label>
+              <Input className="h-8" value={cfg.ftp_user}
+                onChange={(e) => set({ ftp_user: e.target.value })} onBlur={() => patch({ ftp_user: cfg.ftp_user })} />
+              <Label className="text-sm">{t('wpub.ftpPassword')}</Label>
+              <Input type="password" className="h-8" value={cfg.ftp_password}
+                onChange={(e) => set({ ftp_password: e.target.value })} onBlur={() => patch({ ftp_password: cfg.ftp_password })} />
+              <Label className="text-sm">{t('wpub.ftpFolder')}</Label>
+              <Input className="h-8 font-mono text-xs" placeholder="/www/log" value={cfg.ftp_folder}
+                onChange={(e) => set({ ftp_folder: e.target.value })} onBlur={() => patch({ ftp_folder: cfg.ftp_folder })} />
+              <Label className="text-sm">{t('wpub.ftpFileName')}</Label>
+              <Input className="h-8 w-56 font-mono text-xs" value={cfg.ftp_file_name}
+                onChange={(e) => set({ ftp_file_name: e.target.value })} onBlur={() => patch({ ftp_file_name: cfg.ftp_file_name })} />
+              <span />
+              <label className="flex items-center gap-2 text-sm cursor-pointer">
+                <Checkbox checked={cfg.ftp_tls} onCheckedChange={(c) => patch({ ftp_tls: !!c })} />
+                {t('wpub.ftpTls')}
+              </label>
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center gap-3 border-t border-border/60 pt-3 flex-wrap">
+          <Button size="sm" onClick={() => run('publish')} disabled={busy !== ''}>
+            {busy === 'publish' ? <Loader2 className="size-3.5 animate-spin" /> : <Upload className="size-3.5" />}
+            {t('wpub.publishNow')}
+          </Button>
+          {cfg.ftp_enabled && (
+            <Button variant="outline" size="sm" onClick={() => run('test')} disabled={busy !== ''}>
+              {busy === 'test' ? <Loader2 className="size-3.5 animate-spin" /> : null}
+              {t('wpub.testFtp')}
+            </Button>
+          )}
+        </div>
+      </>)}
+
+      {msg && <p className="text-xs text-success break-all">{msg}</p>}
+      {err && <p className="text-xs text-danger break-all">{err}</p>}
+    </div>
+  );
+}

frontend/src/components/WinkeyerPanel.tsx

@@ -0,0 +1,263 @@
+import { useEffect, useState } from 'react';
+import { Radio, Square, Send, Plug, Power, RefreshCw, X, ChevronUp, ChevronDown } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
+
+export interface WKMacro { label: string; text: string }
+export interface WKStatus {
+  connected: boolean;
+  busy: boolean;
+  wpm: number;
+  version: number;
+  port: string;
+  error?: string;
+}
+
+interface Props {
+  status: WKStatus;
+  ports: string[];
+  port: string;
+  wpm: number;
+  macros: WKMacro[];
+  sent: string; // text echoed back by the keyer as it transmits
+  source: 'winkeyer' | 'icom' | 'flex' | 'yaesu' | 'kenwood'; // CW output engine (chosen in Settings → CW Keyer)
+  breakIn?: number;                          // Icom CW break-in: 0=OFF, 1=SEMI, 2=FULL
+  onSetBreakIn?: (mode: number) => void;
+  onSelectPort: (p: string) => void;
+  onRefreshPorts: () => void;
+  onConnect: () => void;
+  onDisconnect: () => void;
+  onSetSpeed: (wpm: number) => void;
+  onSend: (text: string) => void;       // raw text (App resolves variables)
+  onSendMacro: (index: number) => void; // App resolves the macro + sends
+  onStop: () => void;
+  onClose: () => void;                  // disable the keyer (hide the panel)
+  sendOnType: boolean;
+  onToggleSendOnType: (on: boolean) => void;
+  onSendRaw: (chars: string) => void;   // key typed chars as-is (no variables)
+  onBackspace: () => void;              // remove last not-yet-keyed char
+  autoCall: boolean;                    // repeat the clicked macro on a timer
+  autoCallSecs: number;                 // gap (s) after the message before repeating
+  onToggleAutoCall: (on: boolean) => void;
+  onSetAutoCallSecs: (n: number) => void;
+}
+
+// WinkeyerPanel — Log4OM-style CW keyer operating window. Lives in the
+// reserved space to the right of the F1-F5 tabs. Sends Morse via the WinKeyer
+// hardware: free-text CW, one-click macros (F1…), live speed, and abort.
+export function WinkeyerPanel({
+  status, ports, port, wpm, macros, sent, source, breakIn = 0, onSetBreakIn,
+  onSelectPort, onRefreshPorts, onConnect, onDisconnect, onSetSpeed,
+  onSend, onSendMacro, onStop, onClose,
+  sendOnType, onToggleSendOnType, onSendRaw, onBackspace,
+  autoCall, autoCallSecs, onToggleAutoCall, onSetAutoCallSecs,
+}: Props) {
+  const { t } = useI18n();
+  const [cwText, setCwText] = useState('');
+  const [speed, setSpeed] = useState(wpm);
+  // Step the speed (compact +/- control replaces the old slider).
+  const changeSpeed = (delta: number) => {
+    const w = Math.max(5, Math.min(50, speed + delta));
+    setSpeed(w);
+    onSetSpeed(w);
+  };
+
+  // Keep the local speed in sync when the device/config changes it.
+  useEffect(() => { setSpeed(status.connected ? status.wpm || wpm : wpm); }, [status.wpm, status.connected, wpm]);
+
+  const connected = status.connected;
+
+  function sendText() {
+    const t = cwText.trim();
+    if (t && !sendOnType) onSend(t); // in send-on-type the text already went out
+    setCwText('');
+  }
+
+  // In "send on type" mode, key each newly-typed char immediately, and send a
+  // WinKeyer backspace for each deleted char (removes it from the buffer if it
+  // hasn't been keyed yet). Only end-of-string edits are mirrored live.
+  function onCwChange(v: string) {
+    if (sendOnType && connected) {
+      const old = cwText;
+      if (v.length > old.length && v.startsWith(old)) {
+        onSendRaw(v.slice(old.length));
+      } else if (v.length < old.length && old.startsWith(v)) {
+        for (let i = 0; i < old.length - v.length; i++) onBackspace();
+      }
+    }
+    setCwText(v);
+  }
+
+  return (
+    <section className="flex flex-col gap-2 h-full min-h-0 rounded-lg border border-border bg-card overflow-hidden">
+      {/* Header / connection bar */}
+      <div className="flex items-center gap-2 px-3 py-1.5 bg-muted/40 border-b border-border shrink-0">
+        <Radio className="size-4 text-primary shrink-0" />
+        {/* CW output engine (chosen in Settings → CW Keyer). */}
+        <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground shrink-0">
+          {source === 'icom' ? 'Icom CW' : source === 'flex' ? 'Flex CWX' : source === 'yaesu' ? 'Yaesu CW' : source === 'kenwood' ? 'Kenwood CW' : 'WinKeyer'}
+        </span>
+        <span className={cn('size-2 rounded-full', connected ? (status.busy ? 'bg-warning animate-pulse' : 'bg-success') : 'bg-muted-foreground/40')}
+          title={connected ? (status.busy ? t('wkp.sending') : t('wkp.connectedV', { version: status.version })) : t('wkp.disconnected')} />
+        <div className="flex-1" />
+        {source === 'icom' || source === 'flex' || source === 'yaesu' || source === 'kenwood' ? (
+          <span className="text-[11px] font-medium text-muted-foreground">
+            {source === 'flex'
+              ? (connected ? t('wkp.cwxReady') : t('wkp.cwxOffline'))
+              : source === 'yaesu' || source === 'kenwood'
+                ? (connected ? t('wkp.rigReady') : t('wkp.rigOffline'))
+                : (connected ? t('wkp.civReady') : t('wkp.civOffline'))}
+          </span>
+        ) : !connected ? (
+          <>
+            <Select value={port || '_'} onValueChange={(v) => onSelectPort(v === '_' ? '' : v)}>
+              <SelectTrigger className="h-7 w-28 text-xs"><SelectValue placeholder={t('wkp.comPort')} /></SelectTrigger>
+              <SelectContent>
+                {ports.length === 0 && <SelectItem value="_" disabled>{t('wkp.noPorts')}</SelectItem>}
+                {ports.map((p) => <SelectItem key={p} value={p}>{p}</SelectItem>)}
+              </SelectContent>
+            </Select>
+            <Button variant="ghost" size="sm" className="h-7 px-1.5" title={t('wkp.refreshPorts')} onClick={onRefreshPorts}>
+              <RefreshCw className="size-3.5" />
+            </Button>
+            <Button size="sm" className="h-7" onClick={onConnect} disabled={!port}>
+              <Plug className="size-3.5" /> {t('wkp.connect')}
+            </Button>
+          </>
+        ) : (
+          <Button variant="outline" size="sm" className="h-7" onClick={onDisconnect}>
+            <Power className="size-3.5" /> {t('wkp.disconnect')}
+          </Button>
+        )}
+        <Button variant="ghost" size="sm" className="h-7 px-1.5" title={t('wkp.hide')} onClick={onClose}>
+          <X className="size-3.5" />
+        </Button>
+      </div>
+
+      <div className="flex flex-col gap-1.5 px-3 pb-2 min-h-0 overflow-y-auto">
+        {/* Live transmitted text (echoed by the keyer) + compact speed stepper. */}
+        <div className="flex items-center gap-2">
+          <Label className="text-xs w-8 shrink-0">TX</Label>
+          <div className={cn(
+            'flex-1 min-w-0 h-8 rounded-md border border-border bg-muted/30 px-2.5 flex items-center font-mono text-sm tracking-wide truncate',
+            status.busy ? 'text-success' : 'text-muted-foreground',
+          )}>
+            {sent || <span className="opacity-50">—</span>}
+            {status.busy && <span className="ml-0.5 animate-pulse">▌</span>}
+          </div>
+          {/* Speed: number + up/down arrows (replaces the slider, saves height). */}
+          <div className="flex items-center gap-1 shrink-0 h-8 rounded-md border border-border bg-muted/20 pl-2 pr-1" title={t('wkp.cwSpeed')}>
+            <span className="font-mono text-sm font-bold tabular-nums">{speed}</span>
+            <span className="text-[9px] text-muted-foreground">wpm</span>
+            <div className="flex flex-col -my-0.5">
+              <button type="button" disabled={!connected} onClick={() => changeSpeed(+1)} title={t('wkp.faster')}
+                className="text-muted-foreground hover:text-foreground leading-none disabled:opacity-40"><ChevronUp className="size-3.5" /></button>
+              <button type="button" disabled={!connected} onClick={() => changeSpeed(-1)} title={t('wkp.slower')}
+                className="text-muted-foreground hover:text-foreground leading-none disabled:opacity-40"><ChevronDown className="size-3.5" /></button>
+            </div>
+          </div>
+        </div>
+
+        {/* Break-in (Icom only): the rig's 0x17 keyer only transmits when break-in
+            is on — SEMI or FULL. OFF keys the sidetone but stays in RX. */}
+        {source === 'icom' && (
+          <div className="flex items-center gap-2">
+            <Label className="text-xs w-16 shrink-0" title={t('wkp.breakInHint')}>{t('wkp.breakIn')}</Label>
+            <div className="inline-flex rounded-md border border-border overflow-hidden">
+              {[{ v: 0, l: t('wkp.bkOff') }, { v: 1, l: 'SEMI' }, { v: 2, l: 'FULL' }].map((o) => (
+                <button key={o.v} type="button" disabled={!connected} onClick={() => onSetBreakIn?.(o.v)}
+                  className={cn('px-2.5 py-1 text-[11px] font-bold tracking-wide border-l border-border first:border-l-0 transition-colors disabled:opacity-40',
+                    breakIn === o.v ? 'bg-primary text-primary-foreground' : 'bg-card text-muted-foreground hover:bg-muted')}>
+                  {o.l}
+                </button>
+              ))}
+            </div>
+            {breakIn === 0 && <span className="text-[10px] text-warning">{t('wkp.bkOffWarn')}</span>}
+          </div>
+        )}
+
+        {/* CW text */}
+        <div className="flex items-end gap-2">
+          <div className="flex flex-col flex-1 min-w-0">
+            <Label className="mb-1 h-3.5 text-xs flex items-center gap-2">
+              {t('wkp.cwText')}
+              {(source === 'winkeyer' || source === 'flex') && (
+                <label className="flex items-center gap-1 text-[10px] font-normal cursor-pointer text-muted-foreground"
+                  title={t('wkp.sendOnTypeHint')}>
+                  <input type="checkbox" className="accent-primary" checked={sendOnType}
+                    onChange={(e) => onToggleSendOnType(e.target.checked)} />
+                  {t('wkp.sendOnType')}
+                </label>
+              )}
+            </Label>
+            <Input
+              value={cwText}
+              onChange={(e) => onCwChange(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); sendText(); } }}
+              placeholder={sendOnType ? t('wkp.phLive') : t('wkp.phEnter')}
+              disabled={!connected}
+              className="font-mono uppercase"
+            />
+          </div>
+          <Button size="sm" className="h-8" onClick={sendText} disabled={!connected}>
+            <Send className="size-3.5" /> {sendOnType ? t('wkp.clear') : t('wkp.send')}
+          </Button>
+          <Button variant="destructive" size="sm" className="h-8" onClick={onStop} disabled={!connected} title={t('wkp.abort')}>
+            <Square className="size-3.5" /> {t('wkp.stop')}
+          </Button>
+        </div>
+
+        {/* Auto-call: repeat the clicked macro (e.g. F1 CQ) automatically until
+            someone answers. The seconds box is the gap AFTER the message. */}
+        <div className="flex items-center gap-2">
+          <label className="flex items-center gap-1.5 text-xs cursor-pointer select-none"
+            title={t('wkp.autoCallHint')}>
+            <input type="checkbox" className="accent-primary" checked={autoCall} disabled={!connected}
+              onChange={(e) => onToggleAutoCall(e.target.checked)} />
+            {t('wkp.autoCall')}
+          </label>
+          <span className="text-[11px] text-muted-foreground">{t('wkp.gap')}</span>
+          <div className="flex items-center gap-1 h-7 rounded-md border border-border bg-muted/20 pl-2 pr-1" title={t('wkp.gapHint')}>
+            <input type="number" min={0} max={120}
+              className="w-9 bg-transparent text-sm font-mono font-bold tabular-nums text-right outline-none"
+              value={autoCallSecs} onChange={(e) => onSetAutoCallSecs(parseInt(e.target.value) || 0)} />
+            <span className="text-[9px] text-muted-foreground">sec</span>
+          </div>
+          {autoCall && <span className="text-[10px] text-warning/80">{t('wkp.loopHint')}</span>}
+        </div>
+
+        {/* Macro buttons F1… — single-line (F-key + label) to keep the panel short.
+            Empty macros (no label AND no text) are hidden, like the voice keyer;
+            the F-number stays tied to the macro's real index so shortcuts match. */}
+        <div className="grid grid-cols-3 gap-1">
+          {macros
+            .map((m, i) => ({ m, i }))
+            .filter(({ m }) => `${m.label ?? ''}${m.text ?? ''}`.trim() !== '')
+            .map(({ m, i }) => (
+            <button
+              key={i}
+              type="button"
+              onClick={() => onSendMacro(i)}
+              disabled={!connected}
+              title={m.text}
+              className={cn(
+                'flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-left transition-colors',
+                connected ? 'hover:border-primary/60 hover:bg-accent/40' : 'opacity-50 cursor-not-allowed',
+              )}
+            >
+              <span className="text-[10px] font-mono text-primary font-semibold shrink-0">F{i + 1}</span>
+              <span className="text-xs font-medium truncate">{m.label || t('wkp.macroN', { n: i + 1 })}</span>
+            </button>
+          ))}
+        </div>
+        {status.error && <div className="text-[11px] text-danger">{status.error}</div>}
+      </div>
+    </section>
+  );
+}

frontend/src/components/WorkedBeforeGrid.tsx

@@ -1,59 +1,54 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
-  AllCommunityModule, ModuleRegistry, themeQuartz,
-  type ColDef, type ColumnState, type GridReadyEvent,
+  AllCommunityModule, ModuleRegistry,
+  type ColDef, type ColumnState, type GridReadyEvent, type RowDoubleClickedEvent,
 } from 'ag-grid-community';
+import { hamlogGridTheme } from '@/lib/gridTheme';
 import { AgGridReact } from 'ag-grid-react';
-import { Columns3, Star } from 'lucide-react';
+import { Columns3, FilterX, Star } from 'lucide-react';
 import {
   Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Badge } from '@/components/ui/badge';
-import type { WorkedBeforeView } from '@/types';
+import type { WorkedBeforeView, QSOForm } from '@/types';
+import { makeColCatalog, GROUP_ORDER, groupLabel } from './RecentQSOsGrid';
+import { getDateFormat, subscribeDateFormat } from '@/lib/dateFormat';
+import { QSOContextMenu, type QSOMenuState } from './QSOContextMenu';
+import { loadLocal, loadRemote, saveState, seedLocal, whenGridPrefsReady } from '@/lib/gridPrefs';
+import { useI18n } from '@/lib/i18n';
 
 ModuleRegistry.registerModules([AllCommunityModule]);
 
-const hamlogTheme = themeQuartz.withParams({
-  fontFamily: 'inherit',
-  fontSize: 12.5,
-  backgroundColor: '#faf6ea',
-  foregroundColor: '#2a2419',
-  headerBackgroundColor: '#e8dfc9',
-  headerTextColor: '#5a4f3a',
-  headerFontWeight: 600,
-  oddRowBackgroundColor: '#f5efe0',
-  rowHoverColor: '#ecdcb4',
-  selectedRowBackgroundColor: '#f0d9a8',
-  borderColor: '#c8b994',
-  rowBorder: { color: '#d8c9a8', width: 1 },
-  columnBorder: { color: '#d8c9a8', width: 1 },
-  cellHorizontalPadding: 10,
-  rowHeight: 30,
-  headerHeight: 32,
-  spacing: 4,
-  accentColor: '#b8410c',
-  iconSize: 12,
-});
+const hamlogTheme = hamlogGridTheme;
 
-type WorkedEntry = NonNullable<WorkedBeforeView['entries']>[number];
+type WorkedEntry = QSOForm; // entries are now full QSO records
 
 type Props = {
+  // Operator's CURRENT locator — fallback for the distance column (see catalog).
+  myGrid?: string;
   wb: WorkedBeforeView | null;
   busy: boolean;
   currentCall: string;
+  onRowDoubleClicked?: (q: QSOForm) => void;
+  onUpdateFromCty?: (ids: number[]) => void;
+  onUpdateFromQRZ?: (ids: number[]) => void;
+  onUpdateFromClublog?: (ids: number[]) => void;
+  onSendTo?: (service: string, ids: number[]) => void;
+  onSendRecording?: (ids: number[]) => void;
+  onSendEQSL?: (ids: number[]) => void;
+  onBulkEdit?: (ids: number[]) => void;
+  onExportSelected?: (ids: number[]) => void;
+  onExportSelectedFields?: (ids: number[]) => void;
+  onExportCabrilloSelected?: (ids: number[]) => void;
+  onDelete?: (ids: number[]) => void;
+  // One column per defined award (cell = the reference this QSO counts for).
+  awardCols?: { code: string; name: string }[];
 };
 
-const COL_STATE_KEY = 'hamlog.workedBeforeColState.v1';
+const COL_STATE_KEY = 'hamlog.workedBeforeColState.v2';
 
-function fmtDateTime(s: any): string {
-  if (!s) return '';
-  const d = new Date(s);
-  if (isNaN(d.getTime())) return '';
-  const p = (n: number) => String(n).padStart(2, '0');
-  return `${d.getUTCFullYear()}-${p(d.getUTCMonth() + 1)}-${p(d.getUTCDate())} ${p(d.getUTCHours())}:${p(d.getUTCMinutes())}`;
-}
 function fmtDate(s: any): string {
   if (!s) return '';
   const d = new Date(s);
@@ -62,82 +57,96 @@ function fmtDate(s: any): string {
   return `${d.getUTCFullYear()}-${p(d.getUTCMonth() + 1)}-${p(d.getUTCDate())}`;
 }
 
-const bandPill = (p: any) => p.value
-  ? <span style={{
-      display: 'inline-block', padding: '2px 8px', borderRadius: 6,
-      fontFamily: 'ui-monospace, monospace', fontSize: 11, fontWeight: 600,
-      backgroundColor: '#f0d9a8', color: '#7a4a14', lineHeight: '16px',
-    }}>{p.value}</span>
-  : '';
-const modePill = (p: any) => p.value
-  ? <span style={{
-      display: 'inline-block', padding: '2px 8px', borderRadius: 6,
-      fontFamily: 'ui-monospace, monospace', fontSize: 11, fontWeight: 600,
-      backgroundColor: '#d1fae5', color: '#047857', lineHeight: '16px',
-    }}>{p.value}</span>
-  : '';
-
-// Single Y/N flag column renderer: green dot for "Y", grey dash otherwise.
-const flagRenderer = (p: any) => {
-  if (p.value === 'Y') {
-    return <span style={{
-      display: 'inline-block', width: 16, height: 16, borderRadius: 4,
-      backgroundColor: '#10b981', color: 'white', textAlign: 'center',
-      fontSize: 10, fontWeight: 700, lineHeight: '16px',
-    }}>Y</span>;
-  }
-  return <span style={{ color: '#a8a29e' }}>—</span>;
-};
-
-type ColEntry = ColDef<WorkedEntry> & { group: string; label: string; defaultVisible?: boolean };
-
-const COL_CATALOG: ColEntry[] = [
-  { group: 'QSO',  label: 'Date UTC',  colId: 'qso_date', headerName: 'Date UTC', field: 'qso_date' as any, width: 150, cellClass: 'font-mono', valueFormatter: (p) => fmtDateTime(p.value), sort: 'desc', defaultVisible: true },
-  { group: 'QSO',  label: 'Band',      colId: 'band',     headerName: 'Band',     field: 'band' as any,     width: 75, cellClass: 'flex items-center', cellRenderer: bandPill, defaultVisible: true },
-  { group: 'QSO',  label: 'Mode',      colId: 'mode',     headerName: 'Mode',     field: 'mode' as any,     width: 80, cellClass: 'flex items-center', cellRenderer: modePill, defaultVisible: true },
-  { group: 'QSO',  label: 'RST sent',  colId: 'rst_sent', headerName: 'RST sent', field: 'rst_sent' as any, width: 90, cellClass: 'font-mono', defaultVisible: true },
-  { group: 'QSO',  label: 'RST rcvd',  colId: 'rst_rcvd', headerName: 'RST rcvd', field: 'rst_rcvd' as any, width: 90, cellClass: 'font-mono', defaultVisible: true },
-  { group: 'QSL',  label: 'QSL sent',  colId: 'qsl_sent', headerName: 'QSL S',    field: 'qsl_sent' as any, width: 70, cellClass: 'flex items-center', cellRenderer: flagRenderer, defaultVisible: true },
-  { group: 'QSL',  label: 'QSL rcvd',  colId: 'qsl_rcvd', headerName: 'QSL R',    field: 'qsl_rcvd' as any, width: 70, cellClass: 'flex items-center', cellRenderer: flagRenderer, defaultVisible: true },
-  { group: 'LoTW', label: 'LoTW sent', colId: 'lotw_sent', headerName: 'LoTW S',  field: 'lotw_sent' as any, width: 70, cellClass: 'flex items-center', cellRenderer: flagRenderer, defaultVisible: true },
-  { group: 'LoTW', label: 'LoTW rcvd', colId: 'lotw_rcvd', headerName: 'LoTW R',  field: 'lotw_rcvd' as any, width: 70, cellClass: 'flex items-center', cellRenderer: flagRenderer, defaultVisible: true },
-];
-
-const GROUP_ORDER = ['QSO', 'QSL', 'LoTW'];
-
-export function WorkedBeforeGrid({ wb, busy, currentCall }: Props) {
+export function WorkedBeforeGrid({ wb, myGrid, busy, currentCall, onRowDoubleClicked, onUpdateFromCty, onUpdateFromQRZ, onUpdateFromClublog, onSendTo, onSendRecording, onSendEQSL, onBulkEdit, onExportSelected, onExportSelectedFields, onExportCabrilloSelected, onDelete, awardCols }: Props) {
+  const { t } = useI18n();
   const gridRef = useRef<any>(null);
   const [pickerOpen, setPickerOpen] = useState(false);
+  const [menu, setMenu] = useState<QSOMenuState>(null);
+
+  // Localized column catalog (shared with the Recent QSOs grid).
+  const [dateFmt, setDateFmt] = useState(getDateFormat);
+  useEffect(() => subscribeDateFormat(() => setDateFmt(getDateFormat())), []);
+  const COL_CATALOG = useMemo(() => makeColCatalog(t, myGrid), [t, myGrid, dateFmt]);
+
+  function handleRowDoubleClicked(e: RowDoubleClickedEvent<WorkedEntry>) {
+    if (e.data && onRowDoubleClicked) onRowDoubleClicked(e.data);
+  }
+  function onCellContextMenu(e: any) {
+    const ev = e.event as MouseEvent | undefined;
+    ev?.preventDefault();
+    const api = gridRef.current?.api;
+    if (!api) return;
+    if (e.node && !e.node.isSelected()) {
+      api.deselectAll();
+      e.node.setSelected(true);
+    }
+    const ids = (api.getSelectedRows() as WorkedEntry[])
+      .map((r) => r.id as number)
+      .filter((n) => !!n);
+    if (ids.length === 0) return;
+    setMenu({ x: ev?.clientX ?? 0, y: ev?.clientY ?? 0, ids });
+  }
 
   const hasCall = currentCall.trim() !== '';
   const count = wb?.count ?? 0;
   const entries = wb?.entries ?? [];
 
-  const columnDefs = useMemo<ColDef<WorkedEntry>[]>(() => COL_CATALOG.map((c) => {
+  // Suppress auto-save while AG Grid rebuilds columns (award columns load async),
+  // so the default visibility doesn't clobber the user's saved state. See the
+  // matching note in RecentQSOsGrid.
+  const restoringRef = useRef(true);
+  const columnDefs = useMemo<ColDef<WorkedEntry>[]>(() => {
+    restoringRef.current = true;
+    const base = COL_CATALOG.map((c) => {
       const { group: _g, label: _l, defaultVisible, ...rest } = c;
       return { ...rest, hide: !defaultVisible };
-  }), []);
+    });
+    const awards: ColDef<WorkedEntry>[] = (awardCols ?? []).map((a) => ({
+      colId: `award_${a.code}`,
+      headerName: a.code,
+      headerTooltip: t('wbg.awardTip', { name: a.name }),
+      width: 110,
+      cellClass: 'text-[11px]',
+      valueGetter: (p) => (p.data as any)?.award_refs?.[a.code.toUpperCase()] ?? '',
+    }));
+    return [...base, ...awards];
+  }, [awardCols, COL_CATALOG, t]);
 
   const defaultColDef = useMemo<ColDef>(() => ({
     sortable: true, resizable: true, filter: true, suppressMovable: false,
   }), []);
 
-  function onGridReady(e: GridReadyEvent) {
-    try {
-      const raw = localStorage.getItem(COL_STATE_KEY);
-      if (raw) {
-        const state = JSON.parse(raw) as ColumnState[];
-        if (Array.isArray(state)) e.api.applyColumnState({ state, applyOrder: true });
+  // Restore AFTER the profile scope is known: this grid has no key= remount to
+  // save it from reading the wrong (unscoped) cache key at first paint, so it
+  // used to miss the cache every time and then save under the scoped key.
+  async function onGridReady(e: GridReadyEvent) {
+    await whenGridPrefsReady();
+    const local = loadLocal(COL_STATE_KEY);
+    if (local) e.api.applyColumnState({ state: local as ColumnState[], applyOrder: true });
+    const remote = await loadRemote(COL_STATE_KEY);
+    if (remote && !local) {
+      e.api.applyColumnState({ state: remote as ColumnState[], applyOrder: true });
+      seedLocal(COL_STATE_KEY, remote);
     }
-    } catch {}
   }
   const saveColumnState = useCallback(() => {
-    try {
+    if (restoringRef.current) return; // ignore events fired by a column rebuild
     const state = gridRef.current?.api?.getColumnState();
-      if (state) localStorage.setItem(COL_STATE_KEY, JSON.stringify(state));
-    } catch {}
+    if (state) saveState(COL_STATE_KEY, state);
   }, []);
 
+  // Re-apply the saved column state after the award columns load (they rebuild
+  // the column set), so the user's visibility choices win over the defaults.
+  useEffect(() => {
+    const api = gridRef.current?.api;
+    const local = loadLocal(COL_STATE_KEY);
+    if (api && local) api.applyColumnState({ state: local as ColumnState[], applyOrder: true });
+    const t = window.setTimeout(() => { restoringRef.current = false; }, 0);
+    return () => window.clearTimeout(t);
+    // columnDefs itself, not the reasons it was rebuilt — see the same note in
+    // RecentQSOsGrid: a language change rebuilt the memo and left saving off.
+  }, [columnDefs]);
+
   function isColVisible(colId: string): boolean {
     const col = gridRef.current?.api?.getColumn(colId);
     return col ? col.isVisible() : !!COL_CATALOG.find((c) => c.colId === colId)?.defaultVisible;
@@ -176,14 +185,14 @@ export function WorkedBeforeGrid({ wb, busy, currentCall }: Props) {
   if (!hasCall) {
     return (
       <div className="flex-1 flex flex-col items-center justify-center gap-2 p-6 text-center text-xs text-muted-foreground">
-        Type a callsign in the entry strip to see prior contacts.
+        {t('wbg.typeCall')}
       </div>
     );
   }
   if (busy && count === 0) {
     return (
       <div className="flex-1 flex items-center justify-center text-xs text-muted-foreground italic">
-        checking…
+        {t('wbg.checking')}
       </div>
     );
   }
@@ -191,8 +200,8 @@ export function WorkedBeforeGrid({ wb, busy, currentCall }: Props) {
     return (
       <div className="flex-1 flex flex-col items-center justify-center gap-2 p-6 text-center text-xs text-muted-foreground">
         <Star className="size-8 text-primary fill-current" />
-        <div className="text-2xl font-bold text-primary tracking-wider">NEW</div>
-        <div>No prior QSO with <span className="font-mono font-semibold text-foreground">{currentCall.toUpperCase()}</span>.</div>
+        <div className="text-2xl font-bold text-primary tracking-wider">{t('wbg.new')}</div>
+        <div>{t('wbg.noPriorPre')}<span className="font-mono font-semibold text-foreground">{currentCall.toUpperCase()}</span>{t('wbg.noPriorPost')}</div>
       </div>
     );
   }
@@ -201,25 +210,29 @@ export function WorkedBeforeGrid({ wb, busy, currentCall }: Props) {
     <>
       <div className="flex items-center gap-3 px-3 py-1.5 border-b border-border/60 bg-muted/30">
         <div className="flex items-baseline gap-2">
-          <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Worked before</span>
+          <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{t('wbg.workedBefore')}</span>
           <span className="font-mono text-sm font-bold text-primary tracking-wider">{currentCall.toUpperCase()}</span>
           <Badge variant="accent" className="font-mono text-[11px] tracking-wider">{count}×</Badge>
         </div>
         <div className="text-[11px] text-muted-foreground">
-          First: <strong className="text-foreground font-semibold">{fmtDate(wb?.first)}</strong> ·{' '}
-          Last: <strong className="text-foreground font-semibold">{fmtDate(wb?.last)}</strong>
+          {t('wbg.first')} <strong className="text-foreground font-semibold">{fmtDate(wb?.first)}</strong> ·{' '}
+          {t('wbg.last')} <strong className="text-foreground font-semibold">{fmtDate(wb?.last)}</strong>
         </div>
         {wb?.dxcc_name && (
           <div className="text-[11px] text-muted-foreground">
-            DXCC: <strong className="text-foreground font-semibold">{wb.dxcc_name}</strong>
+            {t('wbg.dxcc')} <strong className="text-foreground font-semibold">{wb.dxcc_name}</strong>
             {typeof wb.dxcc_count === 'number' && wb.dxcc_count > 0 && (
-              <span> · {wb.dxcc_count} entity QSOs</span>
+              <span> · {t('wbg.entityQsos', { n: wb.dxcc_count })}</span>
             )}
           </div>
         )}
         <div className="flex-1" />
+        <Button variant="ghost" size="sm" className="h-7 text-[11px]" onClick={() => gridRef.current?.api?.setFilterModel(null)}
+          title={t('wbg.clearFiltersTitle')}>
+          <FilterX className="size-3.5" /> {t('wbg.clearFilters')}
+        </Button>
         <Button variant="ghost" size="sm" className="h-7 text-[11px]" onClick={() => setPickerOpen(true)}>
-          <Columns3 className="size-3.5" /> Columns
+          <Columns3 className="size-3.5" /> {t('wbg.columns')}
         </Button>
       </div>
 
@@ -237,6 +250,10 @@ export function WorkedBeforeGrid({ wb, busy, currentCall }: Props) {
             onColumnPinned={saveColumnState}
             onColumnVisible={saveColumnState}
             onSortChanged={saveColumnState}
+            onRowDoubleClicked={handleRowDoubleClicked}
+            onCellContextMenu={onCellContextMenu}
+            preventDefaultOnContextMenu
+            rowSelection={{ mode: 'multiRow', checkboxes: false, headerCheckbox: false, enableClickSelection: true }}
             animateRows={false}
             suppressCellFocus
             getRowId={(p) => String((p.data as any).id)}
@@ -244,31 +261,52 @@ export function WorkedBeforeGrid({ wb, busy, currentCall }: Props) {
         </div>
       </div>
 
+      {/* Same menu as Recent QSOs, minus the two "filtered" exports: there they
+          mean "the whole logbook under the active column filters", but this grid
+          is a per-callsign view rather than a filter over the log, so the entry
+          would quietly export everything — not what it would appear to do here.
+          The selection-based exports and bulk edit apply unchanged. */}
+      <QSOContextMenu
+        menu={menu}
+        onClose={() => setMenu(null)}
+        onUpdateFromCty={(ids) => onUpdateFromCty?.(ids)}
+        onUpdateFromQRZ={(ids) => onUpdateFromQRZ?.(ids)}
+        onUpdateFromClublog={onUpdateFromClublog}
+        onSendTo={onSendTo}
+        onSendRecording={onSendRecording}
+        onSendEQSL={onSendEQSL}
+        onBulkEdit={onBulkEdit}
+        onExportSelected={onExportSelected}
+        onExportSelectedFields={onExportSelectedFields}
+        onExportCabrilloSelected={onExportCabrilloSelected}
+        onDelete={onDelete}
+      />
+
       {count > entries.length && (
         <div className="text-center py-1 text-[11px] italic text-muted-foreground border-t border-border/60 bg-muted/30">
-          + {count - entries.length} older QSOs (not shown — capped for performance)
+          {t('wbg.olderQsos', { n: count - entries.length })}
         </div>
       )}
 
       <Dialog open={pickerOpen} onOpenChange={setPickerOpen}>
-        <DialogContent className="max-w-md">
+        <DialogContent className="max-w-2xl">
           <DialogHeader>
-            <DialogTitle>Worked-before columns</DialogTitle>
+            <DialogTitle>{t('wbg.pickerTitle')}</DialogTitle>
             <DialogDescription>
-              Pick the columns you want visible in the Worked-before table.
+              {t('wbg.pickerDesc')}
             </DialogDescription>
           </DialogHeader>
-          <div className="max-h-[60vh] overflow-y-auto py-2">
+          <div className="grid grid-cols-2 gap-4 max-h-[60vh] overflow-y-auto px-5 py-3">
             {GROUP_ORDER.map((group) => {
               const cols = COL_CATALOG.filter((c) => c.group === group);
               if (cols.length === 0) return null;
               return (
-                <div key={group} className="rounded-md border border-border p-2.5 mb-2">
+                <div key={group} className="rounded-md border border-border p-2.5">
                   <div className="flex items-center justify-between mb-2 pb-1.5 border-b border-border/60">
-                    <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{group}</span>
+                    <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{groupLabel(t, group)}</span>
                     <div className="flex gap-0.5">
-                      <button className="text-[10px] text-primary hover:underline px-1" onClick={() => showAll(group)}>all</button>
-                      <button className="text-[10px] text-muted-foreground hover:underline px-1" onClick={() => hideAll(group)}>none</button>
+                      <button className="text-[10px] text-primary hover:underline px-1" onClick={() => showAll(group)}>{t('wbg.all')}</button>
+                      <button className="text-[10px] text-muted-foreground hover:underline px-1" onClick={() => hideAll(group)}>{t('wbg.none')}</button>
                     </div>
                   </div>
                   <div className="flex flex-col gap-1">
@@ -285,10 +323,30 @@ export function WorkedBeforeGrid({ wb, busy, currentCall }: Props) {
                 </div>
               );
             })}
+            {awardCols && awardCols.length > 0 && (
+              <div className="rounded-md border border-border p-2.5">
+                <div className="flex items-center justify-between mb-2 pb-1.5 border-b border-border/60">
+                  <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{t('wbg.grpAwards')}</span>
+                  <div className="flex gap-0.5">
+                    <button className="text-[10px] text-primary hover:underline px-1" onClick={() => { awardCols.forEach((a) => setColVisible(`award_${a.code}`, true)); }}>{t('wbg.all')}</button>
+                    <button className="text-[10px] text-muted-foreground hover:underline px-1" onClick={() => { awardCols.forEach((a) => setColVisible(`award_${a.code}`, false)); }}>{t('wbg.none')}</button>
+                  </div>
+                </div>
+                <div className="flex flex-col gap-1">
+                  {awardCols.map((a) => (
+                    <label key={a.code} className="flex items-center gap-2 text-xs cursor-pointer hover:bg-accent/30 rounded px-1 py-0.5">
+                      <Checkbox checked={isColVisible(`award_${a.code}`)} onCheckedChange={(v) => setColVisible(`award_${a.code}`, !!v)} />
+                      <span className="font-mono font-semibold">{a.code}</span>
+                      <span className="text-muted-foreground truncate">{a.name}</span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+            )}
           </div>
           <DialogFooter>
-            <Button variant="ghost" size="sm" onClick={resetDefaults}>Reset to defaults</Button>
-            <Button size="sm" onClick={() => setPickerOpen(false)}>Done</Button>
+            <Button variant="ghost" size="sm" onClick={resetDefaults}>{t('wbg.resetDefaults')}</Button>
+            <Button size="sm" onClick={() => setPickerOpen(false)}>{t('wbg.done')}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>

frontend/src/components/YaesuPanel.tsx

@@ -0,0 +1,501 @@
+import { useEffect, useRef, useState } from 'react';
+import { Radio, AudioLines, Mic, Activity, SlidersHorizontal, Antenna } from 'lucide-react';
+import {
+  GetYaesuState, RefreshYaesuPanel,
+  SetYaesuPower, SetYaesuMicGain, SetYaesuAFGain, SetYaesuRFGain, SetYaesuSquelch,
+  SetYaesuAGC, SetYaesuPreamp, SetYaesuAtt, SetYaesuNB, SetYaesuNR, SetYaesuNRLevel,
+  SetYaesuNarrow, SetYaesuVOX, SetYaesuSplit, SetYaesuBand, TuneYaesuATU,
+  SetYaesuModeRaw, SetYaesuSplitOffset, SetYaesuKeySpeed, SetYaesuBreakIn, YaesuZeroIn, GetCATState,
+} from '../../wailsjs/go/main/App';
+import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
+import { sMeterRST } from '@/lib/rst';
+import { MeterBar } from '@/components/MeterBar';
+
+type YaesuState = {
+  available: boolean; model?: string; mode?: string; raw_mode?: string;
+  transmitting: boolean; split: boolean;
+  s_meter: number; power_meter: number; swr_meter: number;
+  rf_power: number; mic_gain: number; af_gain: number; rf_gain: number; squelch: number;
+  agc?: string; preamp: number; att: number;
+  nb: boolean; nr: boolean; nr_level: number; narrow: boolean; vox: boolean;
+  split_tx_hz?: number; key_speed?: number; break_in?: boolean; swr?: number; power_w?: number;
+};
+
+const ZERO: YaesuState = {
+  available: false, transmitting: false, split: false,
+  s_meter: 0, power_meter: 0, swr_meter: 0,
+  rf_power: 0, mic_gain: 0, af_gain: 0, rf_gain: 0, squelch: 0,
+  preamp: 0, att: 0, nb: false, nr: false, nr_level: 0, narrow: false, vox: false,
+};
+
+// Band buttons use the rig's OWN band memory (CAT "BS"), not a frequency we
+// choose: pressing 20 m lands where the operator last was on 20 m, which is what
+// the radio's own band keys do. That is why these are band names, not Hz.
+const BANDS = ['160m', '80m', '40m', '30m', '20m', '17m', '15m', '12m', '10m', '6m'];
+
+// Mode buttons. CW, RTTY, DIGI and PSK exist on BOTH sidebands on a Yaesu and
+// the operator is the one who knows which they want, so each shows its sideband
+// and CLICKING AN ACTIVE BUTTON AGAIN flips it: CW-U → CW-L → CW-U. One button,
+// one finger, no hidden gesture. SSB takes its sideband from the frequency, as
+// the band plan dictates, and AM/FM have none.
+//
+// PSK rides on the rig's DATA mode, like the other digital modes — the button
+// exists because the operator thinks in modes, not in what the radio calls them.
+type ModeBtn = { id: string; label: string; sideband: boolean; rig: (side: 'U' | 'L') => string };
+const MODES: ModeBtn[] = [
+  { id: 'SSB', label: 'SSB', sideband: false, rig: () => 'SSB' },
+  { id: 'CW', label: 'CW', sideband: true, rig: (s) => 'CW-' + s },
+  { id: 'RTTY', label: 'RTTY', sideband: true, rig: (s) => 'RTTY-' + s },
+  { id: 'DIGI', label: 'DIGI', sideband: true, rig: (s) => 'DATA-' + s },
+  { id: 'PSK', label: 'PSK', sideband: true, rig: (s) => 'DATA-' + s },
+  { id: 'AM', label: 'AM', sideband: false, rig: () => 'AM' },
+  { id: 'FM', label: 'FM', sideband: false, rig: () => 'FM' },
+];
+
+// Which button the rig's current raw mode belongs to, and on which sideband.
+function activeMode(raw?: string): { id: string; side: 'U' | 'L' } | null {
+  switch ((raw || '').toUpperCase()) {
+    case 'USB': return { id: 'SSB', side: 'U' };
+    case 'LSB': return { id: 'SSB', side: 'L' };
+    case 'CW-U': return { id: 'CW', side: 'U' };
+    case 'CW-L': return { id: 'CW', side: 'L' };
+    case 'RTTY-U': return { id: 'RTTY', side: 'U' };
+    case 'RTTY-L': return { id: 'RTTY', side: 'L' };
+    case 'DATA-U': return { id: 'DIGI', side: 'U' };
+    case 'DATA-L': return { id: 'DIGI', side: 'L' };
+    case 'AM': return { id: 'AM', side: 'U' };
+    case 'FM': return { id: 'FM', side: 'U' };
+  }
+  return null;
+}
+
+// The FTDX10/FTDX101 preamp is a three-way front-end selector, not an on/off:
+// IPO bypasses the preamp entirely (best on a quiet, high-signal band), AMP1 and
+// AMP2 add gain. Presenting it as a toggle would hide the middle position.
+const PREAMPS = [{ v: '0', l: 'IPO' }, { v: '1', l: 'AMP1' }, { v: '2', l: 'AMP2' }];
+const AGCS = [{ v: 'FAST', l: 'FAST' }, { v: 'MID', l: 'MID' }, { v: 'SLOW', l: 'SLOW' }, { v: 'AUTO', l: 'AUTO' }];
+// The attenuator is a three-step pad on these rigs (6/12/18 dB), not a toggle.
+const ATTS = [{ v: '0', l: 'OFF' }, { v: '6', l: '6dB' }, { v: '12', l: '12dB' }, { v: '18', l: '18dB' }];
+
+function fmtVFO(hz?: number): string {
+  if (!hz || hz <= 0) return '––.–––.––';
+  const mhz = Math.floor(hz / 1_000_000);
+  const khz = Math.floor((hz % 1_000_000) / 1000);
+  const h2 = Math.floor((hz % 1000) / 10);
+  return `${mhz}.${String(khz).padStart(3, '0')}.${String(h2).padStart(2, '0')}`;
+}
+
+function bandOfHz(hz?: number): string {
+  if (!hz || hz <= 0) return '';
+  const mhz = hz / 1_000_000;
+  const bands: [string, number, number][] = [
+    ['160m', 1.8, 2.0], ['80m', 3.5, 4.0], ['60m', 5.25, 5.45], ['40m', 7.0, 7.3],
+    ['30m', 10.1, 10.15], ['20m', 14.0, 14.35], ['17m', 18.068, 18.168],
+    ['15m', 21.0, 21.45], ['12m', 24.89, 24.99], ['10m', 28.0, 29.7], ['6m', 50.0, 54.0],
+  ];
+  for (const [name, lo, hi] of bands) if (mhz >= lo && mhz <= hi) return name;
+  return '';
+}
+
+
+// Split the 0-100 S-meter reading into S units + dB over S9.
+//
+// The FTDX10 answers SM0 on a 0-255 scale and its manual does not say where S9
+// falls; the front panel puts it at roughly half travel, which is the 50 used
+// here. That figure is a HYPOTHESIS — if reports come out consistently one S
+// unit off on a radio, this is the number to correct, not the RST helper.
+const S9_PCT = 50;          // where S9 falls on the 0-100 reading (see above)
+const DB_PER_PCT = 60 / 50; // above S9 the scale runs to roughly +60 dB
+
+function sParts(v: number): { s: number; over: number; label: string } {
+  if (v >= S9_PCT) {
+    const over = Math.max(0, Math.round((v - S9_PCT) * DB_PER_PCT));
+    return { s: 9, over, label: over > 0 ? `S9+${over}` : 'S9' };
+  }
+  const s = Math.max(0, Math.min(9, Math.round(v / (S9_PCT / 9))));
+  return { s, over: 0, label: `S${s}` };
+}
+
+// Segment colour, the way a radio's own meter is printed: green up to S9, amber
+// through the S9+ range, red once the signal is strong enough to be reported as
+// 59+20 or more. Derived from the SAME S9 point as the label, so the colour
+// change always lands exactly where the numbers say it should — if the S9 point
+// is ever corrected, the colours follow on their own.
+const RED_OVER_DB = 20;
+function sSegColor(frac: number): string {
+  const pct = frac * 100;
+  if (pct < S9_PCT) return '#16a34a';
+  if ((pct - S9_PCT) * DB_PER_PCT < RED_OVER_DB) return '#f59e0b';
+  return '#dc2626';
+}
+
+function Slider({ value, onChange, disabled, accent = 'var(--primary)', min = 0, max = 100 }: {
+  value: number; onChange: (v: number) => void; disabled?: boolean; accent?: string; min?: number; max?: number;
+}) {
+  const v = Math.max(min, Math.min(max, value));
+  const pct = max > min ? ((v - min) / (max - min)) * 100 : 0;
+  const ref = useRef<HTMLInputElement>(null);
+  // React's onWheel is passive, so preventDefault is ignored there — attach a
+  // native non-passive listener, and read live values through refs so the
+  // handler never closes over a stale value.
+  const valRef = useRef(value); valRef.current = value;
+  const cbRef = useRef(onChange); cbRef.current = onChange;
+  const disRef = useRef(disabled); disRef.current = disabled;
+  const minRef = useRef(min); minRef.current = min;
+  const maxRef = useRef(max); maxRef.current = max;
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onWheel = (e: WheelEvent) => {
+      if (disRef.current) return;
+      e.preventDefault();
+      const nv = Math.max(minRef.current, Math.min(maxRef.current, valRef.current + (e.deltaY < 0 ? 1 : -1)));
+      if (nv !== valRef.current) cbRef.current(nv);
+    };
+    el.addEventListener('wheel', onWheel, { passive: false });
+    return () => el.removeEventListener('wheel', onWheel);
+  }, []);
+  return (
+    <input
+      ref={ref}
+      type="range" min={min} max={max} value={v} disabled={disabled}
+      onChange={(e) => onChange(parseInt(e.target.value, 10))}
+      className={cn('flex-1 h-2 rounded-full appearance-none cursor-pointer disabled:opacity-40 disabled:cursor-default',
+        '[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:rounded-full',
+        '[&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:shadow',
+        '[&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb]:active:cursor-grabbing')}
+      // The filled side was invisible against the dark theme: --muted is barely
+      // lighter than the card it sits on, so the whole track read as one bar.
+      // An explicit translucent track keeps both halves distinct in either theme.
+      style={{
+        background: `linear-gradient(to right, ${accent} 0%, ${accent} ${pct}%, color-mix(in srgb, var(--foreground) 18%, transparent) ${pct}%, color-mix(in srgb, var(--foreground) 18%, transparent) 100%)`,
+        borderColor: accent,
+      }}
+    />
+  );
+}
+
+function Segmented({ value, options, onChange }: {
+  value: string; options: { v: string; l: string }[]; onChange: (v: string) => void;
+}) {
+  return (
+    <div className="inline-flex rounded-md border border-border overflow-hidden shrink-0">
+      {options.map((o) => (
+        <button key={o.v} type="button" onClick={() => onChange(o.v)}
+          className={cn('px-2 py-1 text-[11px] font-bold tracking-wide transition-colors border-l border-border first:border-l-0',
+            value === o.v ? 'bg-primary text-primary-foreground' : 'bg-card text-muted-foreground hover:bg-muted')}>
+          {o.l}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function Chip({ on, onClick, label, title }: { on: boolean; onClick: () => void; label: string; title?: string }) {
+  return (
+    <button type="button" onClick={onClick} title={title}
+      className={cn('shrink-0 px-2 py-1 rounded-md text-[11px] font-bold border transition-colors',
+        on ? 'bg-success border-success text-success-foreground' : 'bg-card text-muted-foreground border-border hover:bg-muted')}>
+      {label}
+    </button>
+  );
+}
+
+function Card({ icon: Icon, title, accent, children }: { icon: any; title: string; accent?: string; children: React.ReactNode }) {
+  return (
+    <div className="rounded-xl border border-border bg-card shadow-sm overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border/60 bg-muted/30">
+        <Icon className="size-4" style={{ color: accent ?? 'var(--primary)' }} />
+        <span className="text-xs font-bold uppercase tracking-wider text-foreground/80">{title}</span>
+      </div>
+      <div className="p-3 space-y-3">{children}</div>
+    </div>
+  );
+}
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="w-16 shrink-0 text-[11px] font-bold uppercase tracking-wider text-muted-foreground">{label}</span>
+      {children}
+    </div>
+  );
+}
+
+export function YaesuPanel({ onReportRST, onKeySpeed }: {
+  onReportRST?: (rst: string) => void;
+  // Told whenever the operator moves the CW speed here, so the app can keep the
+  // keyer that is ACTUALLY sending in step. With DTR/RTS line keying the PC does
+  // the timing and the rig's internal keyer speed changes nothing audible — the
+  // slider looked broken because it was driving the wrong keyer.
+  onKeySpeed?: (wpm: number) => void;
+}) {
+  const { t } = useI18n();
+  const [st, setSt] = useState<YaesuState>(ZERO);
+  // The frequency being LISTENED to. RigState follows ADIF, where freq_hz is the
+  // TRANSMIT frequency — under split that is the other VFO, so taking it as the
+  // main display showed the operator the frequency they transmit on and an
+  // offset of 0 kHz against itself.
+  const [freqHz, setFreqHz] = useState(0);
+  const [txHz, setTxHz] = useState(0);
+  const [err, setErr] = useState('');
+
+  // Optimistic local values for the sliders. Without them a drag fights the
+  // poll: the rig's older reading arrives mid-gesture and yanks the thumb back.
+  const [local, setLocal] = useState<Partial<YaesuState>>({});
+  const localAtRef = useRef(0);
+
+  useEffect(() => {
+    let alive = true;
+    const tick = async () => {
+      try {
+        const s = (await GetYaesuState()) as YaesuState;
+        const c = await GetCATState();
+        if (!alive) return;
+        setSt(s);
+        const cs = c as any;
+        const tx = cs?.freq_hz ?? 0;
+        const rx = cs?.split && cs?.freq_rx_hz > 0 ? cs.freq_rx_hz : tx;
+        setFreqHz(rx);
+        setTxHz(tx);
+        // Drop the optimistic overlay once the rig has had time to answer with
+        // the new value — 1.2 s covers the slow-beat settings read.
+        if (Date.now() - localAtRef.current > 1200) setLocal({});
+        setErr('');
+      } catch (e: any) {
+        if (alive) setErr(String(e?.message ?? e));
+      }
+    };
+    tick();
+    const id = window.setInterval(tick, 400);
+    return () => { alive = false; window.clearInterval(id); };
+  }, []);
+
+  const view = { ...st, ...local };
+
+  // Every setter follows the same shape: show the value at once, remember when,
+  // and let the poll take over. A rejected command surfaces as an error rather
+  // than as a control that silently springs back.
+  function push<K extends keyof YaesuState>(key: K, value: YaesuState[K], fn: () => Promise<void>) {
+    setLocal((l) => ({ ...l, [key]: value }));
+    localAtRef.current = Date.now();
+    fn().catch((e) => setErr(String(e?.message ?? e)));
+  }
+
+  const band = bandOfHz(freqHz);
+  // CW changes what belongs on the panel: no microphone, no VOX, but a keyer
+  // speed, break-in and ZIN. Driven by the RIG's mode, not the logged one.
+  const isCW = (view.raw_mode || '').toUpperCase().startsWith('CW');
+
+  if (!st.available) {
+    return (
+      <div className="h-full w-full flex items-center justify-center p-6 text-center">
+        <div className="space-y-1">
+          <Radio className="size-8 mx-auto text-muted-foreground/50" />
+          <p className="text-sm text-muted-foreground">{t('yaesu.notConnected')}</p>
+          {err && <p className="text-xs text-destructive">{err}</p>}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full min-h-0 overflow-auto bg-background">
+      {/* Same wrapper as the Icom and Flex panels: capped width, CENTRED. Capping
+          it without mx-auto left the console pinned to the left edge with a
+          window of empty space beside it. */}
+      <div className="max-w-5xl mx-auto p-3 space-y-3">
+      {/* VFO + status */}
+      <div className="rounded-xl border border-border bg-card shadow-sm px-4 py-3 flex items-center justify-between gap-3 flex-wrap">
+        <div>
+          <div className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">{st.model || 'Yaesu'}</div>
+          <div className="text-2xl font-mono tabular-nums font-bold">{fmtVFO(freqHz)}</div>
+          {view.split && txHz > 0 && (
+            <div className="text-[11px] font-mono tabular-nums text-warning">
+              {t('yaesu.txOn')} {fmtVFO(txHz)}
+              {freqHz > 0 ? ' (' + (txHz > freqHz ? '+' : '') + Math.round((txHz - freqHz) / 100) / 10 + ' kHz)' : ''}
+            </div>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {st.transmitting && (
+            <span className="px-2 py-1 rounded-md text-[11px] font-bold bg-destructive text-destructive-foreground">TX</span>
+          )}
+          <Chip on={view.split} onClick={() => push('split', !view.split, () => SetYaesuSplit(!view.split))} label="SPLIT" />
+          {/* The usual pile-up offsets. Which one is idiomatic depends on the
+              mode — up 5 on phone, up 1 on CW — so both are offered rather than
+              guessed, and each turns split on in the same action. */}
+          <button type="button" onClick={() => SetYaesuSplitOffset(1000).catch((e) => setErr(String(e?.message ?? e)))}
+            title={t('yaesu.splitUpHint')}
+            className="px-2 py-1 rounded-md text-[11px] font-bold border border-border bg-card text-muted-foreground hover:bg-muted">+1k</button>
+          <button type="button" onClick={() => SetYaesuSplitOffset(5000).catch((e) => setErr(String(e?.message ?? e)))}
+            title={t('yaesu.splitUpHint')}
+            className="px-2 py-1 rounded-md text-[11px] font-bold border border-border bg-card text-muted-foreground hover:bg-muted">+5k</button>
+          <button type="button" onClick={() => TuneYaesuATU().catch((e) => setErr(String(e?.message ?? e)))}
+            title={t('yaesu.tuneHint')}
+            className="px-2 py-1 rounded-md text-[11px] font-bold border border-border bg-card text-muted-foreground hover:bg-muted">
+            TUNE
+          </button>
+        </div>
+      </div>
+
+      {err && <p className="text-xs text-destructive px-1">{err}</p>}
+
+      {/* Meters — the SHARED MeterBar the Flex and Icom panels use, so the three
+          consoles read alike instead of each having its own instrument style. */}
+      <Card icon={Activity} title={t('yaesu.meters')}>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
+          <MeterBar label="S-METER" value={view.s_meter} lo={0} hi={100} accent="#16a34a" segColor={sSegColor}
+            display={sParts(view.s_meter).label}
+            onClick={onReportRST ? () => { const sp = sParts(view.s_meter); onReportRST(sMeterRST(sp.s, sp.over, view.mode)); } : undefined}
+            title={onReportRST ? t('yaesu.sToRst') : undefined} />
+          {/* Watts as MEASURED, not the power setting scaled by a percentage:
+              the setting says what was asked for, the meter says what left. */}
+          <MeterBar label="PWR" value={view.transmitting ? (view.power_w ?? 0) : 0} unit="W" lo={0} hi={Math.max(100, view.rf_power || 100)} accent="#0ea5e9"
+            display={view.transmitting ? Math.round(view.power_w ?? 0) + 'W' : '—'} />
+          {/* The RATIO, as the rig shows it — a percentage of meter travel is
+              not something an operator can act on. The bar keeps the travel. */}
+          <MeterBar label="SWR" value={view.transmitting ? view.swr_meter : 0} lo={0} hi={100} accent="#f59e0b"
+            display={view.transmitting ? (view.swr && view.swr >= 1 ? view.swr.toFixed(1) : '1.0') : '—'} />
+        </div>
+      </Card>
+
+      {/* Bands + modes */}
+      <Card icon={Antenna} title={t('yaesu.bandMode')}>
+        <div className="flex flex-wrap gap-1">
+          {BANDS.map((b) => (
+            <button key={b} type="button"
+              onClick={() => SetYaesuBand(b).catch((e) => setErr(String(e?.message ?? e)))}
+              className={cn('px-2 py-1 rounded-md text-[11px] font-bold border transition-colors',
+                band === b ? 'bg-primary border-primary text-primary-foreground' : 'bg-card text-muted-foreground border-border hover:bg-muted')}>
+              {b.replace('m', '')}
+            </button>
+          ))}
+        </div>
+        <div className="flex flex-wrap gap-1">
+          {MODES.map((m) => {
+            const act = activeMode(view.raw_mode);
+            const on = act?.id === m.id;
+            // The sideband shown is the rig's when this mode is active, else the
+            // one the band plan implies — so a button says what pressing it will
+            // actually do rather than a stale letter.
+            const side: 'U' | 'L' = on && act ? act.side : (freqHz > 0 && freqHz < 10_000_000 ? 'L' : 'U');
+            const flip: 'U' | 'L' = side === 'U' ? 'L' : 'U';
+            return (
+              <button key={m.id} type="button"
+                onClick={() => {
+                  // Already on this mode → the click means "the other sideband".
+                  const target = m.id === 'SSB'
+                    ? (freqHz > 0 && freqHz < 10_000_000 ? 'LSB' : 'USB')
+                    : m.rig(on && m.sideband ? flip : side);
+                  SetYaesuModeRaw(target).catch((e) => setErr(String(e?.message ?? e)));
+                }}
+                title={m.sideband ? t('yaesu.sidebandHint') : undefined}
+                className={cn('px-2 py-1 rounded-md text-[11px] font-bold border transition-colors',
+                  on ? 'bg-primary border-primary text-primary-foreground' : 'bg-card text-muted-foreground border-border hover:bg-muted')}>
+                {m.sideband ? m.label + '-' + side : m.label}
+              </button>
+            );
+          })}
+        </div>
+      </Card>
+
+      {/* Receive */}
+      <Card icon={AudioLines} title={t('yaesu.receive')}>
+        <Row label="AF">
+          <Slider value={view.af_gain} onChange={(v) => push('af_gain', v, () => SetYaesuAFGain(v))} />
+          <span className="w-8 text-right text-xs font-mono tabular-nums text-muted-foreground">{view.af_gain}</span>
+        </Row>
+        <Row label="RF">
+          <Slider value={view.rf_gain} onChange={(v) => push('rf_gain', v, () => SetYaesuRFGain(v))} />
+          <span className="w-8 text-right text-xs font-mono tabular-nums text-muted-foreground">{view.rf_gain}</span>
+        </Row>
+        <Row label="SQL">
+          <Slider value={view.squelch} onChange={(v) => push('squelch', v, () => SetYaesuSquelch(v))} />
+          <span className="w-8 text-right text-xs font-mono tabular-nums text-muted-foreground">{view.squelch}</span>
+        </Row>
+        <Row label="AGC">
+          <Segmented value={view.agc ?? 'AUTO'} options={AGCS} onChange={(v) => push('agc', v, () => SetYaesuAGC(v))} />
+        </Row>
+        <Row label="FRONT">
+          <Segmented value={String(view.preamp)} options={PREAMPS} onChange={(v) => push('preamp', parseInt(v, 10), () => SetYaesuPreamp(parseInt(v, 10)))} />
+        </Row>
+        <Row label="ATT">
+          <Segmented value={String(view.att)} options={ATTS} onChange={(v) => push('att', parseInt(v, 10), () => SetYaesuAtt(parseInt(v, 10)))} />
+        </Row>
+      </Card>
+
+      {/* Noise + filter */}
+      <Card icon={SlidersHorizontal} title={t('yaesu.noiseFilter')}>
+        <div className="flex items-center gap-2 flex-wrap">
+          <Chip on={view.nb} onClick={() => push('nb', !view.nb, () => SetYaesuNB(!view.nb))} label="NB" />
+          <Chip on={view.nr} onClick={() => push('nr', !view.nr, () => SetYaesuNR(!view.nr))} label="DNR" />
+          <Chip on={view.narrow} onClick={() => push('narrow', !view.narrow, () => SetYaesuNarrow(!view.narrow))} label="NAR" />
+        </div>
+        <Row label="DNR">
+          {/* 1-15 on the rig, shown as-is rather than rescaled to a percentage:
+              the radio's own display counts 1-15, and matching it is what makes
+              the panel readable next to the front panel. */}
+          <Slider value={view.nr_level || 1} min={1} max={15} disabled={!view.nr}
+            onChange={(v) => push('nr_level', v, () => SetYaesuNRLevel(v))} />
+          <span className="w-8 text-right text-xs font-mono tabular-nums text-muted-foreground">{view.nr_level || 1}</span>
+        </Row>
+      </Card>
+
+      {/* Transmit */}
+      <Card icon={Mic} title={t('yaesu.transmit')}>
+        <Row label="PWR">
+          {/* Watts, not a percentage: the rig reports and takes watts, and a
+              percentage would be a second unit to reconcile every time. */}
+          <Slider value={view.rf_power || 5} min={5} max={100} accent="var(--destructive)"
+            onChange={(v) => push('rf_power', v, () => SetYaesuPower(v))} />
+          <span className="w-10 text-right text-xs font-mono tabular-nums text-muted-foreground">{view.rf_power}W</span>
+        </Row>
+        {/* Microphone gain and VOX are meaningless in CW — the rig ignores both
+            — so they are hidden rather than shown as dead controls. */}
+        {!isCW && (
+          <>
+            <Row label="MIC">
+              <Slider value={view.mic_gain} onChange={(v) => push('mic_gain', v, () => SetYaesuMicGain(v))} />
+              <span className="w-8 text-right text-xs font-mono tabular-nums text-muted-foreground">{view.mic_gain}</span>
+            </Row>
+            <Row label="VOX">
+              <Chip on={view.vox} onClick={() => push('vox', !view.vox, () => SetYaesuVOX(!view.vox))} label="VOX" />
+            </Row>
+          </>
+        )}
+        <Row label="">
+          <button type="button" onClick={() => RefreshYaesuPanel().catch((e) => setErr(String(e?.message ?? e)))}
+            className="ml-auto px-2 py-1 rounded-md text-[11px] font-bold border border-border bg-card text-muted-foreground hover:bg-muted">
+            {t('yaesu.refresh')}
+          </button>
+        </Row>
+      </Card>
+
+      {/* CW — only in CW, where these replace the phone controls above. */}
+      {isCW && (
+        <Card icon={Radio} title={t('yaesu.cw')}>
+          <Row label="SPEED">
+            <Slider value={view.key_speed || 20} min={4} max={60} accent="var(--primary)"
+              onChange={(v) => { push('key_speed', v, () => SetYaesuKeySpeed(v)); onKeySpeed?.(v); }} />
+            <span className="w-12 text-right text-xs font-mono tabular-nums text-muted-foreground">{view.key_speed || 20} wpm</span>
+          </Row>
+          <div className="flex items-center gap-2 flex-wrap">
+            <Chip on={!!view.break_in} onClick={() => push('break_in', !view.break_in, () => SetYaesuBreakIn(!view.break_in))}
+              label="BK-IN" title={t('yaesu.breakInHint')} />
+            {/* ZIN is a one-shot: the rig retunes so the station being received
+                lands on the operator's own CW pitch. Not a toggle, so it is a
+                plain button rather than a chip that would look latched. */}
+            <button type="button" onClick={() => YaesuZeroIn().catch((e) => setErr(String(e?.message ?? e)))}
+              title={t('yaesu.zinHint')}
+              className="px-2 py-1 rounded-md text-[11px] font-bold border border-border bg-card text-muted-foreground hover:bg-muted">
+              ZIN
+            </button>
+          </div>
+        </Card>
+      )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/qsl/AutoEQSL.tsx

@@ -0,0 +1,113 @@
+// AutoEQSL drives automatic eQSL sending. The backend decides eligibility on
+// log (auto-send on, recipient e-mail known, default template, not already
+// sent) and emits "qsl:autosend"; this component does the part Go can't —
+// render the card off-screen, rasterize it to JPEG and hand it back to
+// SendEQSL. Jobs are processed one at a time. Mounted once, near the app root.
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { EventsOn } from '../../../wailsjs/runtime/runtime';
+import { RenderEQSL, SendEQSL } from '../../../wailsjs/go/main/App';
+import type { RenderModel } from './qslTypes';
+import { loadCardAssets, type CardAssets } from './qslAssets';
+import { CardPreview } from './CardPreview';
+import { rasterizeCard } from './rasterize';
+
+interface Job {
+  qsoId: number;
+  templateId: number;
+  callsign: string;
+}
+
+interface Props {
+  onSent?: (callsign: string) => void;
+  onError?: (message: string) => void;
+}
+
+export function AutoEQSL({ onSent, onError }: Props) {
+  const queue = useRef<Job[]>([]);
+  const busy = useRef(false);
+  const [current, setCurrent] = useState<{ job: Job; model: RenderModel; assets: CardAssets } | null>(null);
+  const svgEl = useRef<SVGSVGElement | null>(null);
+  const sentForRef = useRef<number | null>(null); // qsoId we've already fired SendEQSL for
+
+  // Keep the callbacks in refs so they never change the effects' identity — a
+  // toast/grid re-render from onSent must NOT re-run the send effect (that
+  // re-sent the same eQSL many times in a row).
+  const onSentRef = useRef(onSent);
+  const onErrorRef = useRef(onError);
+  useEffect(() => { onSentRef.current = onSent; onErrorRef.current = onError; });
+
+  // Pull the next job, fetch its render model + assets, then mount it (the
+  // effect below rasterizes once the DOM has it).
+  const pump = useCallback(async () => {
+    if (busy.current) return;
+    const job = queue.current.shift();
+    if (!job) return;
+    busy.current = true;
+    try {
+      const model = JSON.parse(await RenderEQSL(job.qsoId, job.templateId)) as RenderModel;
+      const assets = await loadCardAssets(model.template, job.templateId);
+      setCurrent({ job, model, assets });
+    } catch (e) {
+      onErrorRef.current?.(`Auto eQSL: ${e}`);
+      busy.current = false;
+      void pump();
+    }
+  }, []);
+
+  useEffect(() => {
+    const off = EventsOn('qsl:autosend', (p: { qsoId: number; templateId: number; callsign: string }) => {
+      // Dedupe: ignore a repeat event for a QSO we're already handling/handled.
+      if (sentForRef.current === p.qsoId || queue.current.some((j) => j.qsoId === p.qsoId)) return;
+      queue.current.push({ qsoId: p.qsoId, templateId: p.templateId, callsign: p.callsign });
+      void pump();
+    });
+    return () => off();
+  }, [pump]);
+
+  // Once a job is mounted off-screen, wait for fonts + paint, rasterize, send.
+  // Sends exactly once per job (guarded by sentForRef), independent of renders.
+  useEffect(() => {
+    if (!current) return;
+    if (sentForRef.current === current.job.qsoId) return; // already sent this one
+    let cancelled = false;
+    void (async () => {
+      try {
+        await document.fonts.ready;
+        await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r(null))));
+        if (cancelled || !svgEl.current) return;
+        sentForRef.current = current.job.qsoId;
+        const card = current.model.template.card;
+        const jpeg = await rasterizeCard(svgEl.current, card.w, card.h, 'image/jpeg');
+        await SendEQSL(current.job.qsoId, current.job.templateId, jpeg);
+        onSentRef.current?.(current.job.callsign);
+      } catch (e) {
+        onErrorRef.current?.(`Auto eQSL: ${e}`);
+      } finally {
+        if (!cancelled) {
+          setCurrent(null);
+          busy.current = false;
+          void pump();
+        }
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [current, pump]);
+
+  if (!current) return null;
+  // Off-screen at full card resolution so the rasterized output matches the
+  // editor preview exactly.
+  return (
+    <div
+      aria-hidden
+      style={{ position: 'fixed', left: -100000, top: 0, opacity: 0, pointerEvents: 'none' }}
+    >
+      <CardPreview
+        model={current.model}
+        assets={current.assets}
+        width={current.model.template.card.w}
+        svgRef={(el) => { svgEl.current = el; }}
+      />
+    </div>
+  );
+}

frontend/src/components/qsl/CardPreview.tsx

@@ -0,0 +1,555 @@
+// CardPreview — the single SVG rendering implementation for the QSL card.
+// Proposals, the live editor, thumbnails and final rasterization ALL go
+// through this component so the output can never drift from the preview.
+// Style presets are layer-stack recipes (see internal/qslcard/presets.go and
+// section 4 of the design spec); the gel stack renders the text 7 times,
+// back to front: halo, drop shadow, outline, bevel base, bevel light edge,
+// gradient face, wavy gloss band clipped to the glyphs.
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { RenderModel, CardElement, StyleParams, QSOBox } from './qslTypes';
+import { QSO_FIELD_LABELS } from './qslTypes';
+import type { CardAssets } from './qslAssets';
+import { FONT_WEIGHTS } from './qslAssets';
+import { renderTextFx, type TextFxParams, type TextFxKind, type TextFxResult } from './textFx';
+
+// An editor selection: an element index or the QSO box.
+export type CardSelection = number | 'box' | null;
+
+// Fraction of the font size between a glyph's em-box top and its cap line.
+// Used to make a text element's y align to the visible letter tops.
+const CAP_INSET = 0.18;
+
+interface Props {
+  model: RenderModel;
+  assets: CardAssets;
+  width: number; // display width in CSS px
+  selected?: CardSelection;
+  onSelect?: (sel: CardSelection) => void;
+  onMove?: (sel: Exclude<CardSelection, null>, x: number, y: number) => void;
+  svgRef?: (el: SVGSVGElement | null) => void;
+}
+
+// Fallbacks mirroring the preset defaults in presets.go, applied when a
+// document omits a knob the stack needs.
+const GOLD = ['#FFD83A', '#FFC312', '#EE9400'];
+const DEF_SHINE = { coverage: 0.5, opacity: 0.95 };
+const DEF_HALO = { color: '#cdd9e4', blur: 6, opacity: 0.4 };
+const DEF_SHADOW = { dx: 5, dy: 8, blur: 5, color: '#14243a', opacity: 0.5 };
+const DEF_BEVEL = { dx: -2, dy: -4, dark: '#C27500', light: '#FFEFA0' };
+
+// fontSpec maps a template font name to a concrete family + weight.
+// "system-bold-sans" is the info-line workhorse: heavy UI sans, no embed.
+function fontSpec(font?: string): { family: string; weight: number | 'normal' } {
+  if (!font || font === 'system-bold-sans') {
+    return { family: "'Segoe UI', Arial, sans-serif", weight: 800 };
+  }
+  return { family: `'${font}'`, weight: FONT_WEIGHTS[font] ?? 'normal' };
+}
+
+// Presets whose call text is rendered with the ported canvas FX (the only way
+// to get the exact glossy/western look). Everything else stays plain SVG text.
+const FX_GLOSSY = new Set(['gel_gold', 'gel_silver']);
+const FX_WESTERN = new Set(['gel_gold_grunge', 'gel_silver_grunge']);
+function fxKindFor(preset?: string): TextFxKind | null {
+  if (preset && FX_GLOSSY.has(preset)) return 'glossy';
+  if (preset && FX_WESTERN.has(preset)) return 'western';
+  return null;
+}
+function buildFxParams(e: CardElement): TextFxParams | null {
+  const kind = fxKindFor(e.style_preset);
+  if (!kind || !e.size) return null;
+  const fs = fontSpec(e.font);
+  const sp = e.style_params ?? {};
+  const fx = sp.fx ?? {};
+  const grad = sp.gradient ?? (kind === 'western' ? ['#FFC83A', '#F0A21E', '#D87A00'] : ['#ffe22d', '#ffd600', '#ffcc00']);
+  const silver = e.style_preset?.includes('silver');
+  return {
+    kind,
+    text: e.text ?? '',
+    weight: String(fs.weight === 'normal' ? 400 : fs.weight),
+    family: fs.family,
+    size: e.size,
+    space: e.size * (kind === 'western' ? 0.08 : 0.04),
+    cTop: grad[0], cMid: grad[1] ?? grad[0], cBot: grad[2] ?? grad[1] ?? grad[0],
+    // Dark inter-letter edge + rim — from the chosen colour palette, else the
+    // default near-black edge (the navy outline adaptStyle sets is for the old
+    // SVG stack, not this look).
+    cDark: fx.dark ?? (kind === 'western' ? '#1c130a' : '#262630'),
+    cOuter: fx.outer ?? (silver ? '#e8edf2' : '#ced3db'),
+    // Per-call overrides from the editor (undefined → renderer default).
+    plump: fx.plump, edge: fx.edge, outerw: fx.outerw, gloss: fx.gloss,
+    glossH: fx.gloss_h, glossI: fx.gloss_i, innerB: fx.inner_b,
+    depth: fx.depth, angle: fx.angle, slant: fx.slant, grunge: fx.grunge,
+    bevel: fx.bevel, seed: fx.seed,
+  };
+}
+// Stable signature of an element's FX-relevant fields, so dragging (x/y only)
+// doesn't trigger an expensive re-render of the canvas text.
+function fxSignature(e: CardElement): string {
+  if (!fxKindFor(e.style_preset)) return '';
+  return [e.text, e.font, e.size, e.style_preset, (e.style_params?.gradient ?? []).join(','), JSON.stringify(e.style_params?.fx ?? {})].join('|');
+}
+
+function elementTransform(e: CardElement): string {
+  const r = e.rotate ? ` rotate(${e.rotate})` : '';
+  return `translate(${e.x} ${e.y})${r}`;
+}
+
+// Shared <text> layer of a style stack. All layers must carry identical
+// glyph geometry — only paint/transform/filter differ.
+function Layer({
+  e, content, fill, stroke, strokeWidth, transform, filter, opacity, paintOrder,
+}: {
+  e: CardElement;
+  content: string;
+  fill: string;
+  stroke?: string;
+  strokeWidth?: number;
+  transform?: string;
+  filter?: string;
+  opacity?: number;
+  paintOrder?: 'stroke';
+}) {
+  const f = fontSpec(e.font);
+  return (
+    <text
+      x={0}
+      y={0}
+      fontFamily={f.family}
+      fontWeight={f.weight}
+      fontSize={e.size}
+      dominantBaseline="text-before-edge"
+      fill={fill}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeLinejoin="round"
+      paintOrder={paintOrder}
+      transform={transform}
+      filter={filter}
+      opacity={opacity}
+      style={{ userSelect: 'none' }}
+    >
+      {content}
+    </text>
+  );
+}
+
+// glossWavePath builds the gel highlight band: full glyph width, bottom
+// edge a gentle quadratic wave (amplitude ≈ 4.5% of the font size, period
+// ≈ 25% — i.e. ~10 px and ~55 px at the 220 px design size). The wavy line
+// is what produces the "gel" look; the band is clipped to the glyphs.
+function glossWavePath(e: CardElement, content: string, coverage: number): string {
+  const size = e.size ?? 100;
+  const w = 0.78 * size * Math.max(content.length, 1);
+  const capTop = 0.16 * size; // cap height starts below the em-box top
+  const bottom = capTop + coverage * 0.72 * size;
+  const amp = 0.045 * size;
+  const period = 0.25 * size;
+  let d = `M 0 0 H ${w.toFixed(1)} V ${bottom.toFixed(1)}`;
+  let i = 0;
+  for (let x = w; x > 0.1; x -= period, i++) {
+    const x2 = Math.max(0, x - period);
+    const mid = (x + x2) / 2;
+    const dy = i % 2 === 0 ? amp : -amp;
+    d += ` Q ${mid.toFixed(1)} ${(bottom + dy).toFixed(1)} ${x2.toFixed(1)} ${bottom.toFixed(1)}`;
+  }
+  return d + ' Z';
+}
+
+// TextStack renders one text element through its style preset.
+function TextStack({ e, idx, content }: { e: CardElement; idx: number; content: string }) {
+  const p: StyleParams = e.style_params ?? {};
+  const preset = e.style_preset ?? 'flat_modern';
+  const ow = p.outline_width ?? 0;
+
+  if (preset === 'flat_modern') {
+    return <Layer e={e} content={content} fill={p.color ?? '#ffffff'} />;
+  }
+  if (preset === 'script_white' || preset === 'outlined_white') {
+    return (
+      <>
+        {p.shadow && (
+          <Layer
+            e={e} content={content} fill={p.shadow.color} stroke={p.shadow.color}
+            strokeWidth={2} transform={`translate(${p.shadow.dx} ${p.shadow.dy})`}
+            filter={`url(#qsl-blur-sh-${idx})`} opacity={p.shadow.opacity}
+          />
+        )}
+        <Layer
+          e={e} content={content} fill={p.color ?? '#ffffff'}
+          stroke={p.outline_color ?? '#22364e'} strokeWidth={ow || 2} paintOrder="stroke"
+        />
+      </>
+    );
+  }
+
+  // Gel family + classic white outline: the layered stack.
+  const gradient = p.gradient ?? GOLD;
+  const shadow = p.shadow ?? DEF_SHADOW;
+  const outline = p.outline_color ?? '#2a3f5c';
+  const outlineW = ow || 9;
+  const isGrunge = preset === 'gel_gold_grunge' || preset === 'gel_silver_grunge';
+  const isGel = preset === 'gel_gold' || preset === 'gel_silver' || isGrunge;
+  const halo = p.halo ?? DEF_HALO;
+  const bevel = p.bevel_offset ?? DEF_BEVEL;
+  const shine = p.shine ?? DEF_SHINE;
+  const faceT = isGel ? `translate(${bevel.dx} ${bevel.dy})` : undefined;
+  return (
+    <>
+      {isGel && (
+        <Layer
+          e={e} content={content} fill="none" stroke={halo.color}
+          strokeWidth={outlineW * 2.5} filter={`url(#qsl-blur-halo-${idx})`} opacity={halo.opacity}
+        />
+      )}
+      <Layer
+        e={e} content={content} fill={shadow.color} stroke={shadow.color} strokeWidth={2}
+        transform={`translate(${shadow.dx} ${shadow.dy})`}
+        filter={`url(#qsl-blur-sh-${idx})`} opacity={shadow.opacity}
+      />
+      <Layer
+        e={e} content={content} fill={outline} stroke={outline}
+        strokeWidth={outlineW} paintOrder="stroke"
+      />
+      {isGel && <Layer e={e} content={content} fill={bevel.dark} />}
+      {isGel && (
+        <Layer
+          e={e} content={content} fill={bevel.light}
+          transform={`translate(${2 * bevel.dx} ${2 * bevel.dy})`}
+        />
+      )}
+      <Layer e={e} content={content} fill={`url(#qsl-grad-${idx})`} transform={faceT} />
+      {isGel && (
+        <path
+          d={glossWavePath(e, content, shine.coverage)}
+          fill={`url(#qsl-gloss-${idx})`}
+          clipPath={`url(#qsl-clip-${idx})`}
+          transform={faceT}
+          opacity={shine.opacity}
+        />
+      )}
+      {/* Distressed/vintage speckle, clipped to the glyphs (HS0ZLE look). */}
+      {isGrunge && (
+        <rect
+          x={0} y={0}
+          width={0.82 * (e.size ?? 0) * Math.max(content.length, 1)}
+          height={(e.size ?? 0) * 1.05}
+          fill="#241405"
+          filter={`url(#qsl-grunge-${idx})`}
+          clipPath={`url(#qsl-clip-${idx})`}
+          transform={faceT}
+          opacity={0.6}
+        />
+      )}
+      {/* defs that belong to this stack (unique ids per element index) */}
+      <defs>
+        <linearGradient id={`qsl-grad-${idx}`} x1="0" y1="0" x2="0" y2="1">
+          {gradient.map((c, i) => (
+            <stop key={i} offset={`${(i / Math.max(gradient.length - 1, 1)) * 100}%`} stopColor={c} />
+          ))}
+        </linearGradient>
+        {isGel && (
+          <>
+            <linearGradient id={`qsl-gloss-${idx}`} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="#ffffff" stopOpacity="0.95" />
+              <stop offset="100%" stopColor="#ffffff" stopOpacity="0.05" />
+            </linearGradient>
+            <clipPath id={`qsl-clip-${idx}`}>
+              <text
+                x={0} y={0} fontFamily={fontSpec(e.font).family} fontWeight={fontSpec(e.font).weight}
+                fontSize={e.size} dominantBaseline="text-before-edge"
+              >
+                {content}
+              </text>
+            </clipPath>
+            <filter id={`qsl-blur-halo-${idx}`} x="-40%" y="-40%" width="180%" height="180%">
+              <feGaussianBlur stdDeviation={halo.blur} />
+            </filter>
+          </>
+        )}
+        {isGrunge && (
+          <filter id={`qsl-grunge-${idx}`} x="-5%" y="-5%" width="110%" height="110%">
+            {/* sparse dark specks: fractal noise → threshold into the alpha */}
+            <feTurbulence type="fractalNoise" baseFrequency="0.14 0.2" numOctaves={2} seed={9} result="n" />
+            <feColorMatrix in="n" type="matrix"
+              values="0 0 0 0 0.14  0 0 0 0 0.08  0 0 0 0 0.02  0 0 0 6 -4.2" />
+          </filter>
+        )}
+        <filter id={`qsl-blur-sh-${idx}`} x="-40%" y="-40%" width="180%" height="180%">
+          <feGaussianBlur stdDeviation={shadow.blur} />
+        </filter>
+      </defs>
+    </>
+  );
+}
+
+// QSO box field column weights — the date string is far wider than the rest,
+// so equal columns let it spill into the next field. Wider weight = more room.
+const QSO_FIELD_WEIGHT: Record<string, number> = {
+  qso_date: 2, time_on: 1, band: 1, mode: 1, rst_sent: 0.9, freq: 1.4, submode: 1.1,
+};
+
+// QSOBoxView renders the confirmation box with per-QSO values.
+function QSOBoxView({ box, values }: { box: QSOBox; values: Record<string, string> }) {
+  const fg = box.fg || '#14243a'; // text colour (field labels use it at 0.6 opacity)
+  const avail = box.w - 56;
+  const total = box.fields.reduce((s, f) => s + (QSO_FIELD_WEIGHT[f] ?? 1), 0) || 1;
+  let cursor = 28;
+  const cols = box.fields.map((f) => {
+    const w = (avail * (QSO_FIELD_WEIGHT[f] ?? 1)) / total;
+    const col = { f, x: cursor, w };
+    cursor += w;
+    return col;
+  });
+  return (
+    <>
+      <rect width={box.w} height={box.h} rx={box.radius} fill={box.bg} opacity={box.bg_opacity} />
+      <text x={28} y={22} fontSize={34} fontWeight={700} fill={fg}
+        fontFamily="'Segoe UI', Arial, sans-serif" dominantBaseline="text-before-edge">
+        {box.title}
+      </text>
+      {cols.map(({ f, x }) => (
+        <g key={f} transform={`translate(${Math.round(x)} ${box.h * 0.42})`}>
+          <text fontSize={19} fill={fg} opacity={0.6} letterSpacing={1.5}
+            fontFamily="'Segoe UI', Arial, sans-serif" dominantBaseline="text-before-edge">
+            {(QSO_FIELD_LABELS[f] ?? f).toUpperCase()}
+          </text>
+          <text y={26} fontSize={28} fontWeight={700} fill={fg}
+            fontFamily="'Segoe UI', Arial, sans-serif" dominantBaseline="text-before-edge">
+            {values[f] ?? ''}
+          </text>
+        </g>
+      ))}
+      {box.footer && (
+        <text x={28} y={box.h - 18} fontSize={24} fontStyle="italic" fill={fg} opacity={0.85}
+          fontFamily="'Segoe UI', Arial, sans-serif">
+          {box.footer}
+        </text>
+      )}
+    </>
+  );
+}
+
+export function CardPreview({ model, assets, width, selected, onSelect, onMove, svgRef }: Props) {
+  const { template: t, qso_fields } = model;
+  const card = t.card;
+  const scale = card.w / width;
+  const rootRef = useRef<SVGSVGElement | null>(null);
+  const groupRefs = useRef(new Map<string, SVGGElement>());
+  const [selBox, setSelBox] = useState<{ t: string; x: number; y: number; w: number; h: number } | null>(null);
+  const drag = useRef<{ sel: Exclude<CardSelection, null>; sx: number; sy: number; ox: number; oy: number } | null>(null);
+  const measureCanvas = useRef<HTMLCanvasElement | null>(null);
+
+  // Embedded fonts may still be loading when the card first mounts; the canvas
+  // FX needs them for correct metrics, so (re)render once they're ready.
+  const [fontsReady, setFontsReady] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    const ready = (document as Document & { fonts?: FontFaceSet }).fonts?.ready ?? Promise.resolve();
+    void ready.then(() => { if (alive) setFontsReady(true); });
+    return () => { alive = false; };
+  }, [assets]);
+
+  // Canvas-rendered call text (glossy/western), keyed on the FX-relevant fields
+  // so dragging doesn't regenerate it. Maps element index → PNG + size.
+  const fxSig = t.elements.map(fxSignature).join(';');
+  const fxImages = useMemo(() => {
+    const map = new Map<number, TextFxResult>();
+    if (!fontsReady) return map;
+    t.elements.forEach((e, idx) => {
+      const params = buildFxParams(e);
+      if (!params) return;
+      try { map.set(idx, renderTextFx(params)); } catch { /* leave unrendered */ }
+    });
+    return map;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fxSig, fontsReady]);
+
+  // Measure the selected group for the dashed selection outline. For plain SVG
+  // text we use the glyphs' real ink metrics — getBBox would span the font's
+  // full ascent/descent. FX call images fall through to getBBox (already tight).
+  useEffect(() => {
+    if (selected === null || selected === undefined) { setSelBox(null); return; }
+    const key = String(selected);
+    const g = groupRefs.current.get(key);
+    if (!g) { setSelBox(null); return; }
+    const transform = g.getAttribute('transform') ?? '';
+    const el = typeof selected === 'number' ? t.elements[selected] : undefined;
+    const isFx = el ? !!fxKindFor(el.style_preset) : false;
+    if (!isFx && el && (el.type === 'callsign' || el.type === 'operator' || el.type === 'info_line') && el.size) {
+      const cv = (measureCanvas.current ??= document.createElement('canvas'));
+      const ctx = cv.getContext('2d');
+      if (ctx) {
+        const f = fontSpec(el.font);
+        ctx.font = `${f.weight} ${el.size}px ${f.family}`;
+        const m = ctx.measureText(el.text ?? '');
+        const ascent = m.fontBoundingBoxAscent ?? el.size * 0.8;
+        const baselineY = -el.size * CAP_INSET + ascent; // -CAP_INSET matches the render's inner shift
+        const inkTop = baselineY - (m.actualBoundingBoxAscent ?? el.size * 0.7);
+        const inkBottom = baselineY + (m.actualBoundingBoxDescent ?? 0);
+        const left = -(m.actualBoundingBoxLeft ?? 0);
+        const right = m.actualBoundingBoxRight ?? m.width;
+        setSelBox({ t: transform, x: left, y: inkTop, w: right - left, h: inkBottom - inkTop });
+        return;
+      }
+    }
+    const b = g.getBBox();
+    setSelBox({ t: transform, x: b.x, y: b.y, w: b.width, h: b.height });
+  }, [selected, model, assets, width, t.elements, fxImages]);
+
+  const startDrag = (sel: Exclude<CardSelection, null>, ox: number, oy: number) =>
+    (ev: React.PointerEvent<SVGGElement>) => {
+      onSelect?.(sel);
+      if (!onMove) return;
+      ev.stopPropagation();
+      drag.current = { sel, sx: ev.clientX, sy: ev.clientY, ox, oy };
+      (ev.currentTarget as Element).setPointerCapture(ev.pointerId);
+    };
+
+  const onPointerMove = (ev: React.PointerEvent<SVGSVGElement>) => {
+    const d = drag.current;
+    if (!d || !onMove) return;
+    const x = Math.round(d.ox + (ev.clientX - d.sx) * scale);
+    const y = Math.round(d.oy + (ev.clientY - d.sy) * scale);
+    onMove(d.sel, x, y);
+  };
+  const endDrag = () => { drag.current = null; };
+
+  const hero = assets.photos[t.hero.photo];
+  const crop = t.hero.crop;
+
+  const setGroupRef = (key: string) => (el: SVGGElement | null) => {
+    if (el) groupRefs.current.set(key, el);
+    else groupRefs.current.delete(key);
+  };
+
+  return (
+    <svg
+      ref={(el) => { rootRef.current = el; svgRef?.(el); }}
+      viewBox={`0 0 ${card.w} ${card.h}`}
+      width={width}
+      height={Math.round(width * (card.h / card.w))}
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ display: 'block', borderRadius: 4 }}
+      onPointerMove={onPointerMove}
+      onPointerUp={endDrag}
+      onPointerLeave={endDrag}
+      onPointerDown={() => onSelect?.(null)}
+    >
+      <defs>
+        {/* Fonts must live INSIDE the SVG so rasterization (SVG → <img> →
+            canvas) sees them; document styles don't apply there. */}
+        <style>{assets.fontCss}</style>
+        <filter id="qsl-insert-shadow" x="-30%" y="-30%" width="160%" height="160%">
+          <feDropShadow dx="6" dy="10" stdDeviation="8" floodColor="#0a1422" floodOpacity="0.45" />
+        </filter>
+      </defs>
+
+      {/* hero photo, source crop mapped onto the full card */}
+      <rect width={card.w} height={card.h} fill="#1a2433" />
+      {hero && crop.w > 0 && crop.h > 0 && (
+        <image
+          href={hero.url}
+          x={(-crop.x * card.w) / crop.w}
+          y={(-crop.y * card.h) / crop.h}
+          width={(hero.w * card.w) / crop.w}
+          height={(hero.h * card.h) / crop.h}
+          preserveAspectRatio="none"
+        />
+      )}
+      {t.hero.scrim?.enabled && (
+        <rect width={card.w} height={card.h} fill={t.hero.scrim.color} opacity={t.hero.scrim.opacity} />
+      )}
+
+      {t.elements.map((e, idx) => {
+        const key = String(idx);
+        if (e.hidden) return null; // toggled off in the editor
+        if (e.type === 'insert') {
+          const ph = assets.photos[e.photo ?? ''];
+          if (!ph || !e.w) return null;
+          const h = (e.w * ph.h) / ph.w;
+          const b = e.border_px ?? 0;
+          return (
+            <g
+              key={key} ref={setGroupRef(key)}
+              transform={`translate(${e.x} ${e.y})${e.rotate ? ` rotate(${e.rotate} ${e.w / 2} ${h / 2})` : ''}`}
+              onPointerDown={startDrag(idx, e.x, e.y)}
+              style={{ cursor: onMove ? 'move' : undefined }}
+            >
+              <rect x={-b} y={-b} width={e.w + 2 * b} height={h + 2 * b} fill="#ffffff"
+                filter={e.shadow ? 'url(#qsl-insert-shadow)' : undefined} />
+              <image href={ph.url} width={e.w} height={h} preserveAspectRatio="none" />
+            </g>
+          );
+        }
+        if (e.type === 'country') {
+          const size = e.size ?? 30;
+          const flagH = size * 1.4;
+          const flagW = flagH * (4 / 3);
+          const hasFlag = !!assets.flagUrl;
+          return (
+            <g
+              key={key} ref={setGroupRef(key)} transform={elementTransform(e)}
+              onPointerDown={startDrag(idx, e.x, e.y)}
+              style={{ cursor: onMove ? 'move' : undefined }}
+            >
+              {hasFlag && <image href={assets.flagUrl} width={flagW} height={flagH} />}
+              <text
+                x={hasFlag ? flagW + 16 : 0} y={flagH / 2}
+                fontSize={size} fontWeight={700} fontFamily="'Segoe UI', Arial, sans-serif"
+                fill="#ffffff" stroke="#22364e" strokeWidth={4} paintOrder="stroke"
+                strokeLinejoin="round" dominantBaseline="middle"
+              >
+                {e.label === 'auto' ? '' : e.label}
+              </text>
+            </g>
+          );
+        }
+        // Text elements. Glossy/western calls render through the ported canvas
+        // FX as an <image> (its trimmed bounds already give a tight frame, so
+        // no CAP_INSET shim). Everything else is plain SVG text; the inner
+        // translate pulls the glyphs up to the em-box cap line so the element's
+        // y means "top of the visible letters".
+        const fx = fxImages.get(idx);
+        return (
+          <g
+            key={key} ref={setGroupRef(key)} transform={elementTransform(e)}
+            onPointerDown={startDrag(idx, e.x, e.y)}
+            style={{ cursor: onMove ? 'move' : undefined }}
+          >
+            {fx ? (
+              <image href={fx.url} x={0} y={0} width={fx.w} height={fx.h} />
+            ) : (
+              <g transform={`translate(0 ${-(e.size ?? 0) * CAP_INSET})`}>
+                <TextStack e={e} idx={idx} content={e.text ?? ''} />
+              </g>
+            )}
+          </g>
+        );
+      })}
+
+      {t.qso_box?.enabled && (
+        <g
+          ref={setGroupRef('box')}
+          transform={`translate(${t.qso_box.x} ${t.qso_box.y})`}
+          onPointerDown={startDrag('box', t.qso_box.x, t.qso_box.y)}
+          style={{ cursor: onMove ? 'move' : undefined }}
+        >
+          <QSOBoxView box={t.qso_box} values={qso_fields} />
+        </g>
+      )}
+
+      {/* selection outline (editor only) */}
+      {selBox && onSelect && (
+        <g transform={selBox.t} pointerEvents="none">
+          <rect
+            x={selBox.x - 8} y={selBox.y - 8} width={selBox.w + 16} height={selBox.h + 16}
+            fill="none" stroke="#38bdf8" strokeWidth={3 * scale > 3 ? 3 * scale : 3}
+            strokeDasharray={`${10 * scale} ${6 * scale}`}
+          />
+        </g>
+      )}
+    </svg>
+  );
+}

frontend/src/components/qsl/EditorPanel.tsx

@@ -0,0 +1,217 @@
+// EditorPanel — the designer's right-hand controls: card-level options
+// (scrim, name, default) and per-selection editing (font, size, rotation,
+// style preset + params; insert width/border; QSO box geometry).
+
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
+import type { CardTemplate, CardElement, QSOBox, QSLPresetInfo, StyleParams } from './qslTypes';
+import type { CardSelection } from './CardPreview';
+import { StylePresetPicker, NumberField } from './StylePresetPicker';
+
+interface Props {
+  template: CardTemplate;
+  sel: CardSelection;
+  presets: QSLPresetInfo[];
+  fontFamilies: string[]; // embedded + detected system faces
+  onPatchElement: (idx: number, patch: Partial<CardElement>) => void;
+  onPatchBox: (patch: Partial<QSOBox>) => void;
+  onScrim: (enabled: boolean) => void;
+  onSelect?: (sel: CardSelection) => void;
+}
+
+const TYPE_LABELS: Record<string, string> = {
+  callsign: 'Callsign',
+  operator: 'Operator name',
+  info_line: 'Info line',
+  country: 'Country + flag',
+  insert: 'Photo insert',
+};
+
+// A readable layer name, disambiguating the two info lines and numbering inserts.
+function layerLabel(el: CardElement, i: number, all: CardElement[]): string {
+  if (el.type === 'info_line') {
+    return /rig|antenna|ant\b/i.test(el.text ?? '') ? 'Station (rig / ant)' : 'Info line (zones)';
+  }
+  if (el.type === 'insert') {
+    const n = all.slice(0, i + 1).filter((x) => x.type === 'insert').length;
+    return `Photo insert ${n}`;
+  }
+  return TYPE_LABELS[el.type] ?? el.type;
+}
+
+function TextControls({ e, idx, presets, fontFamilies, onPatch }: {
+  e: CardElement; idx: number; presets: QSLPresetInfo[]; fontFamilies: string[];
+  onPatch: (idx: number, patch: Partial<CardElement>) => void;
+}) {
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between gap-2">
+        <Label className="text-xs text-muted-foreground">Font</Label>
+        <Select value={e.font} onValueChange={(font) => onPatch(idx, { font })}>
+          <SelectTrigger className="h-8 w-44">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {fontFamilies.map((f) => (
+              <SelectItem key={f} value={f}>{f === 'system-bold-sans' ? 'System bold' : f}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <NumberField label="Size" value={e.size ?? 0} min={8} max={500}
+        onChange={(size) => onPatch(idx, { size })} />
+      <NumberField label="Rotation °" value={e.rotate ?? 0} min={-45} max={45}
+        onChange={(rotate) => onPatch(idx, { rotate })} />
+      <div className="flex items-center justify-between gap-2">
+        <Label className="text-xs text-muted-foreground">Text</Label>
+        <Input className="h-7 w-44 font-mono text-xs" value={e.text ?? ''}
+          onChange={(ev) => onPatch(idx, { text: ev.target.value })} />
+      </div>
+      <Separator className="my-2" />
+      <StylePresetPicker
+        presets={presets}
+        preset={e.style_preset ?? 'flat_modern'}
+        params={e.style_params ?? {}}
+        onChange={(style_preset, style_params: StyleParams) =>
+          onPatch(idx, { style_preset, style_params })}
+      />
+    </div>
+  );
+}
+
+export function EditorPanel({ template, sel, presets, fontFamilies, onPatchElement, onPatchBox, onScrim, onSelect }: Props) {
+  const e = typeof sel === 'number' ? template.elements[sel] : undefined;
+  const box = template.qso_box;
+
+  return (
+    <div className="flex w-80 shrink-0 flex-col gap-3 overflow-y-auto pr-1 text-sm">
+      <div className="space-y-2 rounded-md border border-border p-3">
+        <div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Card</div>
+        <label className="flex items-center gap-2 text-sm">
+          <Checkbox
+            checked={!!template.hero.scrim?.enabled}
+            onCheckedChange={(v) => onScrim(v === true)}
+          />
+          Darken photo behind text (scrim)
+        </label>
+      </div>
+
+      {/* Layers: show/hide each piece, click a name to edit it. */}
+      <div className="space-y-1 rounded-md border border-border p-3">
+        <div className="mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Show on card</div>
+        {template.elements.map((el, i) => (
+          <div key={i} className={cn('flex items-center gap-2 rounded px-1 py-0.5', sel === i && 'bg-muted')}>
+            <Checkbox checked={!el.hidden} onCheckedChange={(v) => onPatchElement(i, { hidden: v !== true })} />
+            <button type="button" className="flex-1 truncate text-left text-sm" onClick={() => onSelect?.(i)}>
+              {layerLabel(el, i, template.elements)}
+            </button>
+          </div>
+        ))}
+        {box && (
+          <div className={cn('flex items-center gap-2 rounded px-1 py-0.5', sel === 'box' && 'bg-muted')}>
+            <Checkbox checked={box.enabled} onCheckedChange={(v) => onPatchBox({ enabled: v === true })} />
+            <button type="button" className="flex-1 truncate text-left text-sm" onClick={() => onSelect?.('box')}>
+              QSO info box
+            </button>
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-2 rounded-md border border-border p-3">
+        <div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+          {e ? TYPE_LABELS[e.type] ?? e.type : sel === 'box' ? 'QSO box' : 'Selection'}
+        </div>
+        {!e && sel !== 'box' && (
+          <p className="text-xs text-muted-foreground">
+            Click an element on the card to edit it; drag to move it.
+          </p>
+        )}
+
+        {e && (e.type === 'callsign' || e.type === 'operator' || e.type === 'info_line') && (
+          <TextControls e={e} idx={sel as number} presets={presets}
+            fontFamilies={fontFamilies} onPatch={onPatchElement} />
+        )}
+
+        {e && e.type === 'insert' && (
+          <div className="space-y-2">
+            <NumberField label="Width" value={e.w ?? 0} min={80} max={1200}
+              onChange={(w) => onPatchElement(sel as number, { w })} />
+            <NumberField label="Border" value={e.border_px ?? 0} min={0} max={40}
+              onChange={(border_px) => onPatchElement(sel as number, { border_px })} />
+            <NumberField label="Rotation °" value={e.rotate ?? 0} min={-15} max={15}
+              onChange={(rotate) => onPatchElement(sel as number, { rotate })} />
+            <label className="flex items-center gap-2 text-sm">
+              <Checkbox checked={!!e.shadow}
+                onCheckedChange={(v) => onPatchElement(sel as number, { shadow: v === true })} />
+              Drop shadow
+            </label>
+          </div>
+        )}
+
+        {e && e.type === 'country' && (
+          <NumberField label="Size" value={e.size ?? 30} min={16} max={80}
+            onChange={(size) => onPatchElement(sel as number, { size })} />
+        )}
+
+        {sel === 'box' && box && (
+          <div className="space-y-2">
+            <label className="flex items-center gap-2 text-sm">
+              <Checkbox checked={box.enabled}
+                onCheckedChange={(v) => onPatchBox({ enabled: v === true })} />
+              Show QSO box
+            </label>
+            <NumberField label="Width" value={box.w} min={300} max={1400}
+              onChange={(w) => onPatchBox({ w })} />
+            <NumberField label="Height" value={box.h} min={120} max={500}
+              onChange={(h) => onPatchBox({ h })} />
+            <NumberField label="Opacity %" value={Math.round((box.bg_opacity ?? 1) * 100)} min={0} max={100}
+              onChange={(v) => onPatchBox({ bg_opacity: Math.max(0, Math.min(100, v)) / 100 })} />
+            <div className="flex items-center justify-between gap-2">
+              <Label className="text-xs text-muted-foreground">Background</Label>
+              <div className="flex items-center gap-2">
+                <input type="color" className="h-7 w-9 cursor-pointer rounded border border-border bg-transparent p-0"
+                  value={/^#[0-9a-fA-F]{6}$/.test(box.bg ?? '') ? box.bg : '#000000'}
+                  onChange={(ev) => onPatchBox({ bg: ev.target.value })} />
+                <Input className="h-7 w-32 font-mono text-xs" value={box.bg ?? ''}
+                  onChange={(ev) => onPatchBox({ bg: ev.target.value })} />
+              </div>
+            </div>
+            <div className="flex items-center justify-between gap-2">
+              <Label className="text-xs text-muted-foreground">Text color</Label>
+              <div className="flex items-center gap-2">
+                <input type="color" className="h-7 w-9 cursor-pointer rounded border border-border bg-transparent p-0"
+                  value={/^#[0-9a-fA-F]{6}$/.test(box.fg ?? '') ? (box.fg as string) : '#14243a'}
+                  onChange={(ev) => onPatchBox({ fg: ev.target.value })} />
+                <Input className="h-7 w-32 font-mono text-xs" value={box.fg ?? ''} placeholder="#14243a"
+                  onChange={(ev) => onPatchBox({ fg: ev.target.value })} />
+              </div>
+            </div>
+            <NumberField label="Corner radius" value={box.radius ?? 0} min={0} max={80}
+              onChange={(radius) => onPatchBox({ radius })} />
+            <div className="flex items-center justify-between gap-2">
+              <Label className="text-xs text-muted-foreground">Title</Label>
+              <Input className="h-7 w-44 font-mono text-xs" value={box.title ?? ''}
+                onChange={(ev) => onPatchBox({ title: ev.target.value })} />
+            </div>
+            <div className="flex items-center justify-between gap-2">
+              <Label className="text-xs text-muted-foreground">Footer</Label>
+              <Input className="h-7 w-44 font-mono text-xs" value={box.footer}
+                onChange={(ev) => onPatchBox({ footer: ev.target.value })} />
+            </div>
+          </div>
+        )}
+      </div>
+
+      <p className="px-1 text-[11px] leading-snug text-muted-foreground">
+        Text supports {'{profile.*}'} and {'{qso.*}'} placeholders — they fill in
+        automatically on every card.
+      </p>
+    </div>
+  );
+}

frontend/src/components/qsl/QslDesignerModal.tsx

@@ -0,0 +1,380 @@
+// QslDesignerModal — the QSL card designer. Flow: drop/choose photos →
+// "Generate designs" (3 automatic proposals from the placement engine) →
+// pick one → live editor (click/drag elements, style controls) → save.
+// Saved templates are listed with thumbnails and can be edited, deleted or
+// marked default (used by "Send eQSL by e-mail" on the QSO grid).
+
+import { useEffect, useRef, useState } from 'react';
+import { Images, Loader2, Sparkles, Star, Trash2, Pencil, ChevronLeft } from 'lucide-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import {
+  QSLPickPhotos, QSLGenerateProposals, QSLListTemplates, QSLGetTemplate,
+  QSLSaveTemplate, QSLSetDefaultTemplate, QSLDeleteTemplate, QSLSavePreview,
+  QSLPreviewDataURL, QSLResolvePreview, QSLStylePresets,
+} from '../../../wailsjs/go/main/App';
+import type {
+  CardTemplate, CardElement, QSOBox, RenderModel, QSLTemplateInfo, QSLPresetInfo,
+} from './qslTypes';
+import { loadCardAssets, loadFonts, type CardAssets } from './qslAssets';
+import { CardPreview, type CardSelection } from './CardPreview';
+import { EditorPanel } from './EditorPanel';
+import { rasterizeCard } from './rasterize';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+interface Proposal {
+  template: CardTemplate;
+  model: RenderModel;
+  assets: CardAssets;
+}
+
+interface Editing {
+  templateId: number; // 0 = new (photos still at their original paths)
+  template: CardTemplate; // raw document ({placeholders})
+  model: RenderModel; // resolved copy for display
+  assets: CardAssets;
+}
+
+type View = 'home' | 'proposals' | 'editor';
+
+async function resolveModel(template: CardTemplate): Promise<RenderModel> {
+  return JSON.parse(await QSLResolvePreview(JSON.stringify(template))) as RenderModel;
+}
+
+export function QslDesignerModal({ open, onClose }: Props) {
+  const [view, setView] = useState<View>('home');
+  const [photoPaths, setPhotoPaths] = useState<string[]>([]);
+  const [proposals, setProposals] = useState<Proposal[]>([]);
+  const [editing, setEditing] = useState<Editing | null>(null);
+  const [sel, setSel] = useState<CardSelection>(null);
+  const [name, setName] = useState('');
+  const [asDefault, setAsDefault] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const [saved, setSaved] = useState<QSLTemplateInfo[]>([]);
+  const [previews, setPreviews] = useState<Record<number, string>>({});
+  const [presets, setPresets] = useState<QSLPresetInfo[]>([]);
+  const [fontFamilies, setFontFamilies] = useState<string[]>([]);
+  const [deleteArm, setDeleteArm] = useState(0);
+  const svgEl = useRef<SVGSVGElement | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    setView('home');
+    setError('');
+    setPhotoPaths([]);
+    setProposals([]);
+    setEditing(null);
+    void refreshSaved();
+    void QSLStylePresets().then((p) => setPresets(p as QSLPresetInfo[]));
+    void loadFonts().then(({ fonts }) =>
+      setFontFamilies([...fonts.map((f) => f.family), 'system-bold-sans']));
+  }, [open]);
+
+  async function refreshSaved() {
+    try {
+      const list = ((await QSLListTemplates()) ?? []) as QSLTemplateInfo[];
+      setSaved(list);
+      const p: Record<number, string> = {};
+      await Promise.all(list.map(async (t) => {
+        const url = await QSLPreviewDataURL(t.id);
+        if (url) p[t.id] = url;
+      }));
+      setPreviews(p);
+    } catch (e) {
+      setError(String(e));
+    }
+  }
+
+  async function choosePhotos() {
+    try {
+      const paths = ((await QSLPickPhotos()) ?? []) as string[];
+      if (paths.length) setPhotoPaths(paths.slice(0, 5));
+    } catch (e) {
+      setError(String(e));
+    }
+  }
+
+  async function generate() {
+    setBusy(true);
+    setError('');
+    try {
+      const docs = (await QSLGenerateProposals(photoPaths)) as string[];
+      const out: Proposal[] = [];
+      for (const doc of docs) {
+        const template = JSON.parse(doc) as CardTemplate;
+        const model = await resolveModel(template);
+        const assets = await loadCardAssets(model.template, 0);
+        out.push({ template, model, assets });
+      }
+      setProposals(out);
+      setView('proposals');
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function openEditor(templateId: number, template: CardTemplate, model: RenderModel, assets: CardAssets) {
+    setEditing({ templateId, template, model, assets });
+    setName(template.name);
+    setAsDefault(false);
+    setSel(null);
+    setError('');
+    setView('editor');
+  }
+
+  async function editSaved(info: QSLTemplateInfo) {
+    setBusy(true);
+    setError('');
+    try {
+      const template = JSON.parse(await QSLGetTemplate(info.id)) as CardTemplate;
+      const model = await resolveModel(template);
+      const assets = await loadCardAssets(model.template, info.id);
+      openEditor(info.id, template, model, assets);
+      setAsDefault(info.is_default);
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  // Edits patch the raw template AND the resolved display copy in lock-step;
+  // only a text change needs a backend re-resolve (placeholders may differ).
+  function patchBoth(fn: (t: CardTemplate) => void, reResolve = false) {
+    setEditing((cur) => {
+      if (!cur) return cur;
+      const template = structuredClone(cur.template);
+      const model = structuredClone(cur.model);
+      fn(template);
+      fn(model.template);
+      if (reResolve) {
+        void resolveModel(template).then((m) =>
+          setEditing((c) => (c ? { ...c, model: m } : c)));
+      }
+      return { ...cur, template, model };
+    });
+  }
+
+  const patchElement = (idx: number, patch: Partial<CardElement>) =>
+    patchBoth((t) => Object.assign(t.elements[idx], patch), 'text' in patch);
+
+  const patchBox = (patch: Partial<QSOBox>) =>
+    patchBoth((t) => { if (t.qso_box) Object.assign(t.qso_box, patch); }, 'footer' in patch || 'title' in patch);
+
+  const onMove = (target: Exclude<CardSelection, null>, x: number, y: number) =>
+    patchBoth((t) => {
+      if (target === 'box') {
+        if (t.qso_box) { t.qso_box.x = x; t.qso_box.y = y; }
+      } else {
+        t.elements[target].x = x;
+        t.elements[target].y = y;
+      }
+    });
+
+  const onScrim = (enabled: boolean) =>
+    patchBoth((t) => {
+      t.hero.scrim = { enabled, color: t.hero.scrim?.color ?? '#0b1a2e', opacity: t.hero.scrim?.opacity ?? 0.25 };
+    });
+
+  async function save() {
+    if (!editing) return;
+    setBusy(true);
+    setError('');
+    try {
+      const id = await QSLSaveTemplate(editing.templateId, name, JSON.stringify(editing.template), true);
+      if (svgEl.current) {
+        const card = editing.template.card;
+        const png = await rasterizeCard(svgEl.current, 480, Math.round(480 * (card.h / card.w)), 'image/png');
+        await QSLSavePreview(id, png);
+      }
+      if (asDefault) await QSLSetDefaultTemplate(id);
+      await refreshSaved();
+      setView('home');
+      setEditing(null);
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function removeTemplate(id: number) {
+    if (deleteArm !== id) { setDeleteArm(id); return; }
+    setDeleteArm(0);
+    try {
+      await QSLDeleteTemplate(id);
+      await refreshSaved();
+    } catch (e) {
+      setError(String(e));
+    }
+  }
+
+  async function makeDefault(id: number) {
+    try {
+      await QSLSetDefaultTemplate(id);
+      await refreshSaved();
+    } catch (e) {
+      setError(String(e));
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="max-w-[1260px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Sparkles className="size-5 text-warning" />
+            QSL card designer
+            {view !== 'home' && (
+              <Button variant="ghost" size="sm" className="ml-2 h-7 px-2 text-xs"
+                onClick={() => setView(view === 'editor' && proposals.length && editing?.templateId === 0 ? 'proposals' : 'home')}>
+                <ChevronLeft className="size-3.5" /> Back
+              </Button>
+            )}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="max-h-[78vh] space-y-4 overflow-y-auto px-6 py-5">
+        {error && (
+          <div className="rounded border border-destructive bg-destructive-muted px-3 py-1.5 text-sm text-destructive-muted-foreground">{error}</div>
+        )}
+
+        {view === 'home' && (
+          <div className="space-y-5">
+            <section className="space-y-2">
+              <h3 className="text-sm font-semibold">New design</h3>
+              <p className="text-xs text-muted-foreground">
+                Pick 1–5 photos — OpsLog analyzes them and proposes three card designs
+                with your callsign, name, zones and country placed automatically.
+              </p>
+              <div className="flex items-center gap-2">
+                <Button variant="outline" size="sm" onClick={choosePhotos}>
+                  <Images className="mr-1 size-4" /> Choose photos…
+                </Button>
+                <Button size="sm" disabled={!photoPaths.length || busy} onClick={generate}>
+                  {busy ? <Loader2 className="mr-1 size-4 animate-spin" /> : <Sparkles className="mr-1 size-4" />}
+                  Generate designs
+                </Button>
+                {photoPaths.length > 0 && (
+                  <span className="text-xs text-muted-foreground">
+                    {photoPaths.length} photo{photoPaths.length > 1 ? 's' : ''} selected
+                  </span>
+                )}
+              </div>
+            </section>
+
+            <section className="space-y-2">
+              <h3 className="text-sm font-semibold">Saved templates</h3>
+              {!saved.length && <p className="text-xs text-muted-foreground">None yet.</p>}
+              <div className="grid grid-cols-3 gap-3">
+                {saved.map((t) => (
+                  <div key={t.id} className="rounded-md border border-border p-2">
+                    {previews[t.id]
+                      ? <img src={previews[t.id]} alt={t.name} className="w-full rounded" />
+                      : <div className="flex h-28 items-center justify-center rounded bg-muted text-xs text-muted-foreground">no preview</div>}
+                    <div className="mt-1.5 flex items-center justify-between gap-1">
+                      <span className="truncate text-sm font-medium">
+                        {t.is_default && <Star className="mr-1 inline size-3.5 fill-warning text-warning" />}
+                        {t.name}
+                      </span>
+                      <span className="flex shrink-0 gap-0.5">
+                        <Button variant="ghost" size="sm" className="h-7 w-7 p-0" title="Edit"
+                          onClick={() => editSaved(t)}>
+                          <Pencil className="size-3.5" />
+                        </Button>
+                        {!t.is_default && (
+                          <Button variant="ghost" size="sm" className="h-7 w-7 p-0" title="Set as default"
+                            onClick={() => makeDefault(t.id)}>
+                            <Star className="size-3.5" />
+                          </Button>
+                        )}
+                        <Button variant="ghost" size="sm"
+                          className={`h-7 p-0 ${deleteArm === t.id ? 'w-auto px-1.5 text-destructive' : 'w-7'}`}
+                          title="Delete" onClick={() => removeTemplate(t.id)}>
+                          {deleteArm === t.id ? <span className="text-xs">Sure?</span> : <Trash2 className="size-3.5" />}
+                        </Button>
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            <p className="text-xs text-muted-foreground">
+              The eQSL e-mail message and the auto-send option are in Settings → E-mail (SMTP).
+            </p>
+          </div>
+        )}
+
+        {view === 'proposals' && (
+          <div className="space-y-3">
+            <p className="text-sm text-muted-foreground">Pick a design to refine it:</p>
+            <div className="grid grid-cols-3 gap-3">
+              {proposals.map((p, i) => (
+                <button
+                  key={i}
+                  className="rounded-md border-2 border-transparent p-1 transition hover:border-info"
+                  onClick={() => openEditor(0, p.template, p.model, p.assets)}
+                >
+                  <CardPreview model={p.model} assets={p.assets} width={352} />
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {view === 'editor' && editing && (
+          <div className="flex gap-4">
+            <div className="min-w-0 flex-1 space-y-3">
+              <div className="rounded-md bg-slate-800/60 p-3">
+                <CardPreview
+                  model={editing.model}
+                  assets={editing.assets}
+                  width={760}
+                  selected={sel}
+                  onSelect={setSel}
+                  onMove={onMove}
+                  svgRef={(el) => { svgEl.current = el; }}
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <Label className="text-xs text-muted-foreground">Name</Label>
+                <Input className="h-8 w-56" value={name} onChange={(e) => setName(e.target.value)}
+                  placeholder="e.g. Vietnam sunset" />
+                <label className="flex items-center gap-1.5 text-sm">
+                  <Checkbox checked={asDefault} onCheckedChange={(v) => setAsDefault(v === true)} />
+                  Default for this profile
+                </label>
+                <div className="flex-1" />
+                <Button size="sm" disabled={busy || !name.trim()} onClick={save}>
+                  {busy && <Loader2 className="mr-1 size-4 animate-spin" />} Save template
+                </Button>
+              </div>
+            </div>
+            <EditorPanel
+              template={editing.template}
+              sel={sel}
+              presets={presets}
+              fontFamilies={fontFamilies}
+              onPatchElement={patchElement}
+              onPatchBox={patchBox}
+              onScrim={onScrim}
+              onSelect={setSel}
+            />
+          </div>
+        )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/qsl/SendEQSLModal.tsx

@@ -0,0 +1,126 @@
+// SendEQSLModal — per-QSO eQSL flow: render the default template with the
+// QSO's data, show the exact card, send it as a JPEG e-mail attachment on
+// explicit confirmation (never automatic). On success the backend stamps
+// eqsl_sent and emits "qsl:sent" so the grid refreshes.
+
+import { useEffect, useRef, useState } from 'react';
+import { Loader2, Mail, CheckCircle2 } from 'lucide-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import {
+  QSLDefaultTemplateID, RenderEQSL, SendEQSL,
+} from '../../../wailsjs/go/main/App';
+import type { RenderModel } from './qslTypes';
+import { loadCardAssets, type CardAssets } from './qslAssets';
+import { CardPreview } from './CardPreview';
+import { rasterizeCard } from './rasterize';
+
+interface Props {
+  open: boolean;
+  qsoId: number | null;
+  onClose: () => void;
+  onOpenDesigner: () => void;
+}
+
+export function SendEQSLModal({ open, qsoId, onClose, onOpenDesigner }: Props) {
+  const [model, setModel] = useState<RenderModel | null>(null);
+  const [assets, setAssets] = useState<CardAssets | null>(null);
+  const [templateId, setTemplateId] = useState(0);
+  const [busy, setBusy] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState('');
+  const svgEl = useRef<SVGSVGElement | null>(null);
+
+  useEffect(() => {
+    if (!open || !qsoId) return;
+    setModel(null);
+    setAssets(null);
+    setSent(false);
+    setError('');
+    void (async () => {
+      try {
+        const tid = await QSLDefaultTemplateID();
+        setTemplateId(tid);
+        if (!tid) return; // no template yet — offer the designer below
+        const m = JSON.parse(await RenderEQSL(qsoId, tid)) as RenderModel;
+        setModel(m);
+        setAssets(await loadCardAssets(m.template, tid));
+      } catch (e) {
+        setError(String(e));
+      }
+    })();
+  }, [open, qsoId]);
+
+  async function send() {
+    if (!qsoId || !model || !svgEl.current) return;
+    setBusy(true);
+    setError('');
+    try {
+      const card = model.template.card;
+      const jpeg = await rasterizeCard(svgEl.current, card.w, card.h, 'image/jpeg');
+      await SendEQSL(qsoId, templateId, jpeg);
+      setSent(true);
+      // Auto-close shortly after the success tick (the grid refreshes on the
+      // qsl:sent event); the user doesn't need to dismiss it manually.
+      window.setTimeout(onClose, 1100);
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="max-w-[820px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Mail className="size-5 text-danger" /> Send OpsLog QSL by e-mail
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-3 px-6 py-5">
+        {error && (
+          <div className="rounded border border-destructive bg-destructive-muted px-3 py-1.5 text-sm text-destructive-muted-foreground">{error}</div>
+        )}
+
+        {open && !templateId && !error && (
+          <div className="space-y-3 py-2 text-sm">
+            <p>No QSL template yet — design one first (drop a few photos, pick a layout).</p>
+            <Button size="sm" onClick={() => { onClose(); onOpenDesigner(); }}>Open the designer</Button>
+          </div>
+        )}
+
+        {templateId > 0 && !model && !error && (
+          <div className="flex items-center gap-2 py-6 text-sm text-muted-foreground">
+            <Loader2 className="size-4 animate-spin" /> Preparing the card…
+          </div>
+        )}
+
+        {model && assets && (
+          <div className="rounded-md bg-slate-800/60 p-3">
+            <CardPreview model={model} assets={assets} width={740}
+              svgRef={(el) => { svgEl.current = el; }} />
+          </div>
+        )}
+        </div>
+
+        <DialogFooter>
+          {sent ? (
+            <div className="flex items-center gap-2 text-sm text-success">
+              <CheckCircle2 className="size-4" /> OpsLog QSL sent.
+              <Button variant="outline" size="sm" onClick={onClose}>Close</Button>
+            </div>
+          ) : (
+            <>
+              <Button variant="outline" size="sm" onClick={onClose}>Cancel</Button>
+              <Button size="sm" disabled={!model || busy} onClick={send}>
+                {busy && <Loader2 className="mr-1 size-4 animate-spin" />} Send
+              </Button>
+            </>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/qsl/StylePresetPicker.tsx

@@ -0,0 +1,211 @@
+// StylePresetPicker — preset choice + per-preset parameter controls for the
+// selected text element. Only the knobs the preset declares (params) are
+// shown, matching the backend whitelist so saving can't fail on a stray key.
+
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from '@/components/ui/select';
+import type { QSLPresetInfo, StyleParams, FxParams } from './qslTypes';
+
+interface Props {
+  presets: QSLPresetInfo[];
+  preset: string;
+  params: StyleParams;
+  onChange: (preset: string, params: StyleParams) => void;
+}
+
+// Quick colour palettes per FX family (mirrors the reference generators):
+// each sets the 3-stop gradient plus the dark edge and (glossy) silver rim.
+type Palette = { name: string; top: string; mid: string; bot: string; dark: string; outer?: string };
+const GLOSSY_PALETTES: Palette[] = [
+  { name: 'Gold', top: '#ffe22d', mid: '#ffd600', bot: '#ffcc00', dark: '#262630', outer: '#ced3db' },
+  { name: 'Silver', top: '#fbfdff', mid: '#c9d4de', bot: '#8496a8', dark: '#262630', outer: '#e8edf2' },
+  { name: 'Red', top: '#ff7a66', mid: '#ee3322', bot: '#d42410', dark: '#260b08', outer: '#ead9d6' },
+  { name: 'Blue', top: '#5fb8ff', mid: '#1f8fe8', bot: '#107ad0', dark: '#0d1726', outer: '#d6e2ee' },
+  { name: 'Green', top: '#a5e84f', mid: '#6ec424', bot: '#5ab012', dark: '#122108', outer: '#dbe8d2' },
+  { name: 'Pink', top: '#ff9ed0', mid: '#f5559f', bot: '#e83b8c', dark: '#260818', outer: '#ecd8e3' },
+];
+const WESTERN_PALETTES: Palette[] = [
+  { name: 'Gold', top: '#f7c036', mid: '#f39612', bot: '#d06200', dark: '#20140a' },
+  { name: 'Red', top: '#f0856e', mid: '#d8402a', bot: '#8c1606', dark: '#1f0805' },
+  { name: 'Blue', top: '#7fc0ee', mid: '#2a7fc0', bot: '#0c4378', dark: '#081320' },
+  { name: 'Green', top: '#bfd96a', mid: '#7fa82e', bot: '#3f6210', dark: '#101a06' },
+  { name: 'Cream', top: '#f7ecd0', mid: '#e8d3a0', bot: '#bf9b58', dark: '#2a1f10' },
+];
+
+function ColorRow({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <Label className="text-xs text-muted-foreground">{label}</Label>
+      <input
+        type="color"
+        className="h-7 w-10 cursor-pointer rounded border border-border bg-transparent"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </div>
+  );
+}
+
+function SliderRow({ label, value, min, max, step, onChange }: {
+  label: string; value: number; min: number; max: number; step: number; onChange: (v: number) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <Label className="w-20 shrink-0 text-xs text-muted-foreground">{label}</Label>
+      <input type="range" className="min-w-0 flex-1" min={min} max={max} step={step}
+        value={value} onChange={(e) => onChange(parseFloat(e.target.value))} />
+      <span className="w-10 shrink-0 text-right text-xs tabular-nums">{value}</span>
+    </div>
+  );
+}
+
+export function StylePresetPicker({ presets, preset, params, onChange }: Props) {
+  const info = presets.find((p) => p.name === preset);
+  const has = (k: string) => info?.params.includes(k) ?? false;
+  const set = (patch: Partial<StyleParams>) => onChange(preset, { ...params, ...patch });
+
+  // gel_* presets are rendered by the canvas FX, not the SVG stack: show the FX
+  // knobs instead of the old shine/halo/shadow/outline rows.
+  const isFx = preset.startsWith('gel_');
+  const fxWestern = preset.includes('grunge');
+  const fx: FxParams = params.fx ?? {};
+  const setFx = (patch: Partial<FxParams>) => set({ fx: { ...fx, ...patch } });
+
+  return (
+    <div className="space-y-2">
+      <Select
+        value={preset}
+        onValueChange={(name) => {
+          const next = presets.find((p) => p.name === name);
+          // Switching presets resets the params to that preset's defaults —
+          // stale keys from the previous preset would be rejected on save.
+          onChange(name, next ? { ...next.defaults } : {});
+        }}
+      >
+        <SelectTrigger className="h-8">
+          <SelectValue placeholder="Style" />
+        </SelectTrigger>
+        <SelectContent>
+          {presets.map((p) => (
+            <SelectItem key={p.name} value={p.name}>{p.label}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {isFx && (
+        <div className="flex items-center justify-between gap-2">
+          <Label className="text-xs text-muted-foreground">Palette</Label>
+          <div className="flex flex-wrap gap-1">
+            {(fxWestern ? WESTERN_PALETTES : GLOSSY_PALETTES).map((p) => (
+              <button
+                key={p.name} type="button" title={p.name}
+                className="h-6 w-6 rounded border border-border"
+                style={{ background: `linear-gradient(${p.top}, ${p.mid}, ${p.bot})` }}
+                onClick={() => onChange(preset, {
+                  ...params,
+                  gradient: [p.top, p.mid, p.bot],
+                  fx: { ...fx, dark: p.dark, ...(p.outer ? { outer: p.outer } : {}) },
+                })}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+      {has('color') && (
+        <ColorRow label="Color" value={params.color ?? '#ffffff'} onChange={(v) => set({ color: v })} />
+      )}
+      {has('gradient') && (
+        <div className="flex items-center justify-between gap-2">
+          <Label className="text-xs text-muted-foreground">Gradient</Label>
+          <div className="flex gap-1">
+            {(params.gradient ?? ['#FFD83A', '#FFC312', '#EE9400']).map((c, i) => (
+              <input
+                key={i} type="color" value={c}
+                className="h-7 w-8 cursor-pointer rounded border border-border bg-transparent"
+                onChange={(e) => {
+                  const g = [...(params.gradient ?? ['#FFD83A', '#FFC312', '#EE9400'])];
+                  g[i] = e.target.value;
+                  set({ gradient: g });
+                }}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+      {!isFx && has('outline_color') && (
+        <ColorRow label="Outline" value={params.outline_color ?? '#2a3f5c'}
+          onChange={(v) => set({ outline_color: v })} />
+      )}
+      {!isFx && has('outline_width') && (
+        <SliderRow label="Outline width" value={params.outline_width ?? 9} min={0} max={24} step={1}
+          onChange={(v) => set({ outline_width: v })} />
+      )}
+      {!isFx && has('shine') && (
+        <SliderRow label="Gloss" value={params.shine?.coverage ?? 0.5} min={0.2} max={0.8} step={0.05}
+          onChange={(v) => set({ shine: { coverage: v, opacity: params.shine?.opacity ?? 0.95 } })} />
+      )}
+      {!isFx && has('halo') && (
+        <SliderRow label="Halo" value={params.halo?.opacity ?? 0.4} min={0} max={1} step={0.05}
+          onChange={(v) => set({
+            halo: { color: params.halo?.color ?? '#cdd9e4', blur: params.halo?.blur ?? 6, opacity: v },
+          })} />
+      )}
+      {!isFx && has('shadow') && (
+        <SliderRow label="Shadow" value={params.shadow?.opacity ?? 0.5} min={0} max={1} step={0.05}
+          onChange={(v) => set({
+            shadow: {
+              dx: params.shadow?.dx ?? 5, dy: params.shadow?.dy ?? 8,
+              blur: params.shadow?.blur ?? 5, color: params.shadow?.color ?? '#14243a', opacity: v,
+            },
+          })} />
+      )}
+
+      {isFx && !fxWestern && (
+        <>
+          <SliderRow label="Plump" value={fx.plump ?? 0.03} min={0} max={0.06} step={0.005}
+            onChange={(v) => setFx({ plump: v })} />
+          <SliderRow label="Gloss" value={fx.gloss ?? 0.85} min={0} max={1} step={0.05}
+            onChange={(v) => setFx({ gloss: v })} />
+          <SliderRow label="Gloss height" value={fx.gloss_h ?? 0.45} min={0.2} max={0.8} step={0.05}
+            onChange={(v) => setFx({ gloss_h: v })} />
+          <SliderRow label="Inner shadow" value={fx.inner_b ?? 0.7} min={0} max={1} step={0.05}
+            onChange={(v) => setFx({ inner_b: v })} />
+          <SliderRow label="Dark edge" value={fx.edge ?? 0.5} min={0} max={1} step={0.05}
+            onChange={(v) => setFx({ edge: v })} />
+          <SliderRow label="Silver rim" value={fx.outerw ?? 0.45} min={0} max={1} step={0.05}
+            onChange={(v) => setFx({ outerw: v })} />
+        </>
+      )}
+      {isFx && fxWestern && (
+        <>
+          <SliderRow label="3D depth" value={fx.depth ?? 12} min={0} max={40} step={1}
+            onChange={(v) => setFx({ depth: v })} />
+          <SliderRow label="Slant" value={fx.slant ?? 0.08} min={-0.4} max={0.4} step={0.02}
+            onChange={(v) => setFx({ slant: v })} />
+          <SliderRow label="Grunge" value={fx.grunge ?? 0.8} min={0} max={1} step={0.05}
+            onChange={(v) => setFx({ grunge: v })} />
+          <SliderRow label="Top light" value={fx.bevel ?? 0.45} min={0} max={1} step={0.05}
+            onChange={(v) => setFx({ bevel: v })} />
+        </>
+      )}
+    </div>
+  );
+}
+
+// Tiny labelled numeric input shared by the designer's right panel.
+export function NumberField({ label, value, onChange, min, max }: {
+  label: string; value: number; onChange: (v: number) => void; min?: number; max?: number;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <Label className="text-xs text-muted-foreground">{label}</Label>
+      <Input
+        type="number" className="h-7 w-20 text-right" value={value} min={min} max={max}
+        onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
+      />
+    </div>
+  );
+}

frontend/src/components/qsl/qslAssets.ts

@@ -0,0 +1,98 @@
+// Asset loading for the QSL card renderer: designer fonts (registered as
+// @font-face AND kept as CSS text so rasterization can inline them into the
+// serialized SVG — an SVG drawn through an <img> cannot see document fonts),
+// photos with their natural dimensions, and the country flag.
+
+import { QSLFonts, QSLPhotoDataURL, QSLFlagDataURL } from '../../../wailsjs/go/main/App';
+import type { CardTemplate, QSLFontInfo } from './qslTypes';
+
+export interface PhotoAsset {
+  url: string; // data URL
+  w: number; // natural pixel size
+  h: number;
+}
+
+export interface CardAssets {
+  photos: Record<string, PhotoAsset>; // keyed by template photo ref
+  flagUrl: string; // data URL, '' when no flag
+  fontCss: string; // @font-face rules with data: sources
+}
+
+// Weight each embedded family renders at (variable fonts need an explicit
+// heavy weight to match the printed-card look).
+export const FONT_WEIGHTS: Record<string, number> = {
+  'Baloo 2': 800,
+  Oswald: 700,
+};
+
+let fontsPromise: Promise<{ css: string; fonts: QSLFontInfo[] }> | null = null;
+
+// loadFonts fetches the embedded fonts once, registers them with the
+// document and returns the @font-face CSS for SVG embedding.
+export function loadFonts(): Promise<{ css: string; fonts: QSLFontInfo[] }> {
+  if (!fontsPromise) {
+    fontsPromise = (async () => {
+      const fonts = (await QSLFonts()) as QSLFontInfo[];
+      const rules = fonts.map((f) => {
+        const weight = f.variable ? '100 900' : 'normal';
+        return `@font-face{font-family:'${f.family}';src:url(data:font/ttf;base64,${f.data_b64}) format('truetype');font-weight:${weight};}`;
+      });
+      const css = rules.join('\n');
+      const el = document.createElement('style');
+      el.dataset.qslFonts = '1';
+      el.textContent = css;
+      document.head.appendChild(el);
+      await document.fonts.ready;
+      return { css, fonts };
+    })();
+  }
+  return fontsPromise;
+}
+
+async function imageSize(url: string): Promise<{ w: number; h: number }> {
+  const img = new Image();
+  img.src = url;
+  await img.decode();
+  return { w: img.naturalWidth, h: img.naturalHeight };
+}
+
+// Photos are multi-MB base64 payloads; cache them so the three proposals
+// (which share the same photo set) and editor re-renders fetch each once.
+const photoCache = new Map<string, Promise<PhotoAsset>>();
+
+function loadPhoto(templateId: number, ref: string): Promise<PhotoAsset> {
+  const key = `${templateId}:${ref}`;
+  let p = photoCache.get(key);
+  if (!p) {
+    p = (async () => {
+      const url = await QSLPhotoDataURL(templateId, ref);
+      const size = await imageSize(url);
+      return { url, ...size };
+    })();
+    photoCache.set(key, p);
+  }
+  return p;
+}
+
+// loadCardAssets resolves everything a template needs to render: each
+// referenced photo as a data URL with its natural size, the flag and the
+// font CSS. templateId 0 reads draft photos at their original paths.
+export async function loadCardAssets(template: CardTemplate, templateId: number): Promise<CardAssets> {
+  const refs = new Set<string>([template.hero.photo]);
+  for (const e of template.elements) {
+    if (e.type === 'insert' && e.photo) refs.add(e.photo);
+  }
+  const photos: Record<string, PhotoAsset> = {};
+  await Promise.all(
+    [...refs].map(async (ref) => {
+      photos[ref] = await loadPhoto(templateId, ref);
+    }),
+  );
+  let flagUrl = '';
+  const country = template.elements.find((e) => e.type === 'country');
+  if (country?.flag && country.flag !== 'auto') {
+    flagUrl = await QSLFlagDataURL(country.flag);
+  }
+  const { css } = await loadFonts();
+  return { photos, flagUrl, fontCss: css };
+}

frontend/src/components/qsl/qslTypes.ts

@@ -0,0 +1,176 @@
+// TypeScript mirror of the QSL template JSON schema (v1) defined in
+// internal/qslcard/template.go. Template documents cross the Wails boundary
+// as JSON strings; these types are the frontend's contract with that schema.
+
+export interface CardGeom {
+  w: number;
+  h: number;
+  dpi: number;
+  bleed_px: number;
+}
+
+export interface CropRect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export interface Scrim {
+  enabled: boolean;
+  color: string;
+  opacity: number;
+}
+
+export interface Hero {
+  photo: string;
+  crop: CropRect;
+  scrim?: Scrim;
+}
+
+export interface Shine {
+  coverage: number;
+  opacity: number;
+}
+
+export interface HaloFx {
+  color: string;
+  blur: number;
+  opacity: number;
+}
+
+export interface ShadowFx {
+  dx: number;
+  dy: number;
+  blur: number;
+  color: string;
+  opacity: number;
+}
+
+export interface BevelFx {
+  dx: number;
+  dy: number;
+  dark: string;
+  light: string;
+}
+
+// FxParams — per-call tuning of the canvas renderer (textFx.ts). All optional;
+// omitted values fall back to the renderer's per-preset default.
+export interface FxParams {
+  plump?: number;
+  edge?: number;
+  outerw?: number;
+  gloss?: number;
+  gloss_h?: number;
+  gloss_i?: number;
+  inner_b?: number;
+  depth?: number;
+  angle?: number;
+  slant?: number;
+  grunge?: number;
+  bevel?: number;
+  seed?: number;
+  dark?: string;
+  outer?: string;
+}
+
+export interface StyleParams {
+  gradient?: string[];
+  shine?: Shine;
+  outline_color?: string;
+  outline_width?: number;
+  halo?: HaloFx;
+  shadow?: ShadowFx;
+  bevel_offset?: BevelFx;
+  color?: string;
+  fx?: FxParams;
+}
+
+export type ElementType = 'callsign' | 'operator' | 'info_line' | 'country' | 'insert';
+
+export interface CardElement {
+  type: ElementType;
+  x: number;
+  y: number;
+  rotate?: number;
+  hidden?: boolean; // toggled off in the editor
+  // text elements
+  text?: string;
+  font?: string;
+  size?: number;
+  style_preset?: string;
+  style_params?: StyleParams;
+  // country
+  flag?: string;
+  label?: string;
+  // insert
+  photo?: string;
+  w?: number;
+  border_px?: number;
+  shadow?: boolean;
+}
+
+export interface QSOBox {
+  enabled: boolean;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  bg: string;
+  bg_opacity: number;
+  fg?: string; // text colour (default dark); set it when using a dark background
+  radius: number;
+  title: string;
+  fields: string[];
+  footer: string;
+}
+
+export interface CardTemplate {
+  schema: number;
+  name: string;
+  card: CardGeom;
+  hero: Hero;
+  elements: CardElement[];
+  qso_box?: QSOBox;
+}
+
+// RenderModel mirrors qslcard.RenderModel: a template with placeholders
+// resolved plus the values for the QSO box fields.
+export interface RenderModel {
+  template: CardTemplate;
+  qso_fields: Record<string, string>;
+}
+
+// Binding result types (see app_qsl_designer.go).
+export interface QSLTemplateInfo {
+  id: number;
+  name: string;
+  profile_id?: number;
+  is_default: boolean;
+  updated_at: string;
+}
+
+export interface QSLFontInfo {
+  family: string;
+  kind: 'display' | 'script' | 'system';
+  variable: boolean;
+  data_b64: string;
+}
+
+export interface QSLPresetInfo {
+  name: string;
+  label: string;
+  params: string[];
+  defaults: StyleParams;
+}
+
+// Human labels for the QSO box fields the renderer knows.
+export const QSO_FIELD_LABELS: Record<string, string> = {
+  qso_date: 'Date',
+  time_on: 'UTC',
+  band: 'Band',
+  mode: 'Mode',
+  rst_sent: 'RST',
+  freq: 'Freq',
+  submode: 'Submode',
+};

frontend/src/components/qsl/rasterize.ts

@@ -0,0 +1,52 @@
+// Rasterizes the CardPreview SVG to bitmap bytes. The SVG is serialized and
+// loaded through an <img>, so every resource it needs (fonts, photos, flag)
+// must be inline data URLs — CardPreview guarantees that. Fonts are awaited
+// before drawing so glyphs never rasterize with a fallback face.
+
+// rasterizeCard returns base64 image bytes (no data: prefix).
+// type 'image/jpeg' targets e-mail (maxBytes enforced by stepping quality
+// down); 'image/png' is used for template thumbnails.
+export async function rasterizeCard(
+  svgEl: SVGSVGElement,
+  outW: number,
+  outH: number,
+  type: 'image/jpeg' | 'image/png',
+  maxBytes = 800 * 1024,
+): Promise<string> {
+  await document.fonts.ready;
+
+  const clone = svgEl.cloneNode(true) as SVGSVGElement;
+  clone.setAttribute('width', String(outW));
+  clone.setAttribute('height', String(outH));
+  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  const xml = new XMLSerializer().serializeToString(clone);
+  const url = URL.createObjectURL(new Blob([xml], { type: 'image/svg+xml;charset=utf-8' }));
+  try {
+    const img = new Image();
+    img.src = url;
+    await img.decode();
+
+    const canvas = document.createElement('canvas');
+    canvas.width = outW;
+    canvas.height = outH;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) throw new Error('canvas 2d context unavailable');
+    if (type === 'image/jpeg') {
+      ctx.fillStyle = '#ffffff'; // JPEG has no alpha — avoid black background
+      ctx.fillRect(0, 0, outW, outH);
+    }
+    ctx.drawImage(img, 0, 0, outW, outH);
+
+    if (type === 'image/png') {
+      return canvas.toDataURL('image/png').split(',')[1];
+    }
+    // Step the JPEG quality down until the e-mail size target is met.
+    for (const q of [0.9, 0.8, 0.7, 0.6]) {
+      const b64 = canvas.toDataURL('image/jpeg', q).split(',')[1];
+      if (b64.length * 0.75 <= maxBytes) return b64;
+    }
+    return canvas.toDataURL('image/jpeg', 0.5).split(',')[1];
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}

frontend/src/components/qsl/textFx.ts

@@ -0,0 +1,576 @@
+// Canvas-2D call-text renderer, ported faithfully from the user's two
+// reference generators ("glossy bulle" / XV9Q and "western 3D" / HS0ZLE).
+// SVG filters can only approximate these looks; the exact technique is
+// canvas — inflated glyphs (fill + stroke to dilate), contour bands via
+// boolean compositing, a candy gloss that hugs the outline, an orange inner
+// shadow, and organic multi-layer grunge.
+//
+// renderTextFx() runs the recipe offscreen, trims the transparent padding,
+// and returns a PNG data URL + its size in logical (card) pixels. CardPreview
+// embeds that as an <image> so the same output drives the editor preview,
+// thumbnails and the final e-mail rasterization.
+
+export type TextFxKind = 'glossy' | 'western';
+
+export interface TextFxParams {
+  kind: TextFxKind;
+  text: string;
+  weight: string; // canvas font weight, e.g. "800" or "400"
+  family: string; // canvas font family, e.g. '"Baloo 2", sans-serif'
+  size: number; // font size in card px
+  space: number; // letter spacing in px
+  cTop: string;
+  cMid: string;
+  cBot: string;
+  cDark: string; // dark edge / outline
+  cOuter?: string; // silver rim (glossy only)
+  // glossy
+  plump?: number; // 0..0.06 — inflation as a fraction of size
+  edge?: number; // 0..1 — dark edge weight
+  outerw?: number; // 0..1 — silver rim weight
+  gloss?: number; // 0..1 — gloss intensity
+  glossH?: number; // 0..1 — gloss height
+  glossI?: number; // 0..0.14 — gloss inset
+  innerB?: number; // 0..1 — bottom inner shadow
+  // western
+  depth?: number; // 3D extrusion depth in px
+  angle?: number; // extrusion direction in radians
+  slant?: number; // shear, -0.4..0.4
+  grunge?: number; // 0..1 — distress amount
+  bevel?: number; // 0..1 — top-edge light
+  seed?: number;
+}
+
+export interface TextFxResult {
+  url: string; // PNG data URL of the trimmed text
+  w: number; // logical (card-px) width
+  h: number; // logical (card-px) height
+}
+
+const SS = 2; // supersample for crisp downscaling
+
+function supportsFilter(c: CanvasRenderingContext2D) {
+  return typeof c.filter === 'string';
+}
+function shade(hex: string, pct: number) {
+  const n = parseInt(hex.slice(1), 16);
+  const f = (v: number) => Math.max(0, Math.min(255, Math.round(v + (255 * pct) / 100)));
+  return 'rgb(' + f(n >> 16) + ',' + f((n >> 8) & 255) + ',' + f(n & 255) + ')';
+}
+function deepen(hex: string) {
+  const n = parseInt(hex.slice(1), 16);
+  return 'rgb(' + Math.round((n >> 16) * 0.96) + ',' + Math.round(((n >> 8) & 255) * 0.62) + ',' + Math.round((n & 255) * 0.25) + ')';
+}
+function rustOf(hex: string) {
+  const n = parseInt(hex.slice(1), 16);
+  const r = Math.min(255, Math.round((n >> 16) * 0.72));
+  const g = Math.round(((n >> 8) & 255) * 0.49);
+  const b = Math.min(255, Math.round((n & 255) * 0.3) + 10);
+  return 'rgb(' + r + ',' + g + ',' + b + ')';
+}
+function mulberry32(seed: number) {
+  return function () {
+    seed |= 0;
+    seed = (seed + 0x6d2b79f5) | 0;
+    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+function hashStr(s: string) {
+  let h = 2166136261;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+
+// ── glossy bubble (XV9Q) ────────────────────────────────────────────────
+function renderGlossy(p: Required<Pick<TextFxParams, 'text' | 'weight' | 'family' | 'size' | 'space' | 'plump' | 'edge' | 'outerw' | 'gloss' | 'glossH' | 'glossI' | 'innerB' | 'cTop' | 'cMid' | 'cBot' | 'cDark' | 'cOuter'>>, scale: number): HTMLCanvasElement {
+  const probe = document.createElement('canvas').getContext('2d')!;
+  const font = p.weight + ' ' + p.size + 'px ' + p.family;
+  probe.letterSpacing = p.space + 'px';
+  probe.font = font;
+  const m = probe.measureText(p.text);
+  const asc = m.actualBoundingBoxAscent, desc = m.actualBoundingBoxDescent;
+  const capH = asc + desc;
+  const plumpPx = p.size * p.plump;
+  const edgeW = p.size * 0.1 * p.edge;
+  const outerW = edgeW + p.size * 0.22 * p.outerw + 2 * plumpPx;
+  const pad = Math.ceil(outerW / 2 + p.size * 0.12);
+  const w = Math.ceil(m.width + pad * 2);
+  const h = Math.ceil(capH + pad * 2);
+
+  const canvas = document.createElement('canvas');
+  canvas.width = w * scale;
+  canvas.height = h * scale;
+  const c = canvas.getContext('2d')!;
+
+  const x = pad, y = pad + asc;
+  const top = y - asc - plumpPx, bot = y + desc + plumpPx;
+
+  const mk = () => {
+    const k = document.createElement('canvas');
+    k.width = canvas.width;
+    k.height = canvas.height;
+    return k;
+  };
+  const setT = (cx: CanvasRenderingContext2D) => {
+    cx.setTransform(scale, 0, 0, scale, 0, 0);
+    cx.letterSpacing = p.space + 'px';
+    cx.font = font;
+    cx.textBaseline = 'alphabetic';
+    cx.lineJoin = 'round';
+    cx.lineCap = 'round';
+  };
+  const glyph = (delta: number, dx?: number, dy?: number) => {
+    const k = mk();
+    const g = k.getContext('2d')!;
+    setT(g);
+    g.fillStyle = '#fff';
+    g.strokeStyle = '#fff';
+    g.fillText(p.text, x + (dx || 0), y + (dy || 0));
+    if (delta > 0.1) {
+      g.lineWidth = delta * 2;
+      g.strokeText(p.text, x + (dx || 0), y + (dy || 0));
+    } else if (delta < -0.1) {
+      g.globalCompositeOperation = 'destination-out';
+      g.lineWidth = -delta * 2;
+      g.strokeText(p.text, x + (dx || 0), y + (dy || 0));
+    }
+    return k;
+  };
+  const clipTo = (k: HTMLCanvasElement, mask: HTMLCanvasElement) => {
+    const g = k.getContext('2d')!;
+    g.save();
+    g.setTransform(1, 0, 0, 1, 0, 0);
+    g.globalCompositeOperation = 'destination-in';
+    g.drawImage(mask, 0, 0);
+    g.restore();
+    return k;
+  };
+  const contourBand = (shiftX: number, shiftY: number, insetPx: number) => {
+    const k = glyph(plumpPx, 0, 0);
+    const g = k.getContext('2d')!;
+    g.save();
+    g.setTransform(1, 0, 0, 1, 0, 0);
+    g.globalCompositeOperation = 'destination-out';
+    g.drawImage(glyph(plumpPx, shiftX, shiftY), 0, 0);
+    g.restore();
+    return clipTo(k, glyph(plumpPx - insetPx, 0, 0));
+  };
+  const vRamp = (k: HTMLCanvasElement, f0: number, f1: number, keepTop: boolean) => {
+    const g = k.getContext('2d')!;
+    g.save();
+    g.setTransform(scale, 0, 0, scale, 0, 0);
+    g.globalCompositeOperation = 'destination-in';
+    const gr = g.createLinearGradient(0, top, 0, bot);
+    const a1 = keepTop ? 1 : 0, a2 = keepTop ? 0 : 1;
+    gr.addColorStop(0, 'rgba(255,255,255,' + a1 + ')');
+    gr.addColorStop(Math.max(0.001, Math.min(0.998, f0)), 'rgba(255,255,255,' + a1 + ')');
+    gr.addColorStop(Math.max(0.002, Math.min(0.999, f1)), 'rgba(255,255,255,' + a2 + ')');
+    gr.addColorStop(1, 'rgba(255,255,255,' + a2 + ')');
+    g.fillStyle = gr;
+    g.fillRect(0, 0, k.width / scale, k.height / scale);
+    g.restore();
+    return k;
+  };
+  const blurred = (src: HTMLCanvasElement, px: number) => {
+    const k = mk();
+    const g = k.getContext('2d')!;
+    if (supportsFilter(g) && px > 0.3) {
+      g.filter = 'blur(' + (px * scale).toFixed(2) + 'px)';
+      g.drawImage(src, 0, 0);
+      g.filter = 'none';
+    } else {
+      g.drawImage(src, 0, 0);
+    }
+    return k;
+  };
+  const tint = (k: HTMLCanvasElement, color: string, alpha: number) => {
+    const g = k.getContext('2d')!;
+    g.save();
+    g.setTransform(1, 0, 0, 1, 0, 0);
+    g.globalCompositeOperation = 'source-in';
+    g.fillStyle = color;
+    g.fillRect(0, 0, k.width, k.height);
+    g.restore();
+    if (alpha < 1) {
+      const k2 = mk();
+      const g2 = k2.getContext('2d')!;
+      g2.globalAlpha = alpha;
+      g2.drawImage(k, 0, 0);
+      return k2;
+    }
+    return k;
+  };
+  const paintText = (cx: CanvasRenderingContext2D, paint: string | CanvasGradient) => {
+    cx.fillStyle = paint;
+    cx.fillText(p.text, x, y);
+    if (plumpPx > 0.1) {
+      cx.strokeStyle = paint;
+      cx.lineWidth = plumpPx * 2;
+      cx.strokeText(p.text, x, y);
+    }
+  };
+
+  c.setTransform(1, 0, 0, 1, 0, 0);
+  c.clearRect(0, 0, canvas.width, canvas.height);
+  setT(c);
+
+  // drop shadow
+  c.save();
+  c.shadowColor = 'rgba(10,15,25,0.40)';
+  c.shadowBlur = p.size * 0.045 * scale;
+  c.shadowOffsetY = p.size * 0.03 * scale;
+  c.lineWidth = Math.max(outerW, edgeW + 2 * plumpPx, 1);
+  c.strokeStyle = 'rgba(10,15,25,0.40)';
+  c.strokeText(p.text, x, y);
+  c.restore();
+
+  const face = mk();
+  const f = face.getContext('2d')!;
+  setT(f);
+
+  if (p.outerw > 0) {
+    const gOuter = f.createLinearGradient(0, top - outerW / 2, 0, bot + outerW / 2);
+    gOuter.addColorStop(0, '#ffffff');
+    gOuter.addColorStop(0.45, p.cOuter);
+    gOuter.addColorStop(1, shade(p.cOuter, -22));
+    f.lineWidth = outerW;
+    f.strokeStyle = gOuter;
+    f.strokeText(p.text, x, y);
+  }
+  if (p.edge > 0) {
+    f.lineWidth = edgeW + 2 * plumpPx;
+    f.strokeStyle = p.cDark;
+    f.strokeText(p.text, x, y);
+  }
+  const gBody = f.createLinearGradient(0, top, 0, bot);
+  gBody.addColorStop(0, p.cTop);
+  gBody.addColorStop(0.55, p.cMid);
+  gBody.addColorStop(1, p.cBot);
+  paintText(f, gBody);
+
+  if (p.innerB > 0) {
+    let band = contourBand(0, -0.22 * capH, p.size * 0.03);
+    band = blurred(band, p.size * 0.04);
+    band = clipTo(band, glyph(plumpPx, 0, 0));
+    band = vRamp(band, 0.45, 0.8, false);
+    band = tint(band, deepen(p.cBot), 0.7);
+    f.save();
+    f.setTransform(1, 0, 0, 1, 0, 0);
+    f.globalCompositeOperation = 'source-atop';
+    f.globalAlpha = Math.min(1, p.innerB);
+    f.drawImage(band, 0, 0);
+    f.restore();
+  }
+
+  if (p.gloss > 0) {
+    const shiftY = p.glossH * capH;
+    const shiftX = 0.12 * shiftY;
+    const inset = p.size * p.glossI;
+    const clip0 = p.glossH * 0.6, clip1 = Math.min(0.95, p.glossH * 1.4);
+    let band = contourBand(shiftX, shiftY, inset);
+    band = vRamp(band, clip0, clip1, true);
+    let halo = blurred(band, p.size * 0.014);
+    halo = clipTo(halo, glyph(plumpPx - inset * 0.5, 0, 0));
+    let core = mk();
+    core.getContext('2d')!.drawImage(band, 0, 0);
+    core = clipTo(core, glyph(plumpPx - inset * 1.35, 0, 0));
+    core = blurred(core, p.size * 0.007);
+    f.save();
+    f.setTransform(1, 0, 0, 1, 0, 0);
+    f.globalCompositeOperation = 'source-atop';
+    f.globalAlpha = Math.min(1, 0.85 * p.gloss);
+    f.drawImage(halo, 0, 0);
+    f.globalAlpha = Math.min(1, 1.15 * p.gloss);
+    f.drawImage(core, 0, 0);
+    f.restore();
+  }
+
+  c.setTransform(1, 0, 0, 1, 0, 0);
+  c.drawImage(face, 0, 0);
+  return canvas;
+}
+
+// ── western 3D (HS0ZLE) ─────────────────────────────────────────────────
+function noiseMask(W: number, H: number, featurePx: number, thresh: number, seed: number, softenPx: number, stretchY = 1): HTMLCanvasElement {
+  const sw = Math.max(2, Math.round(W / featurePx));
+  const sh = Math.max(2, Math.round(H / (featurePx * stretchY)));
+  const small = document.createElement('canvas');
+  small.width = sw;
+  small.height = sh;
+  const sg = small.getContext('2d')!;
+  const id = sg.createImageData(sw, sh);
+  const rnd = mulberry32(seed);
+  for (let i = 0; i < sw * sh; i++) {
+    const v = (rnd() * 255) | 0;
+    id.data[i * 4] = v;
+    id.data[i * 4 + 1] = v;
+    id.data[i * 4 + 2] = v;
+    id.data[i * 4 + 3] = 255;
+  }
+  sg.putImageData(id, 0, 0);
+  const big = document.createElement('canvas');
+  big.width = W;
+  big.height = H;
+  const bg = big.getContext('2d')!;
+  bg.imageSmoothingEnabled = true;
+  bg.imageSmoothingQuality = 'high';
+  if (supportsFilter(bg)) bg.filter = 'blur(' + (featurePx * 0.35).toFixed(1) + 'px)';
+  bg.drawImage(small, 0, 0, W, H);
+  if (supportsFilter(bg)) bg.filter = 'none';
+  const src = bg.getImageData(0, 0, W, H);
+  const out = bg.createImageData(W, H);
+  const k = 1 / Math.max(1e-6, (1 - thresh) * 0.35);
+  for (let i = 0; i < W * H; i++) {
+    const v = src.data[i * 4] / 255;
+    let a = (v - thresh) * k;
+    a = a < 0 ? 0 : a > 1 ? 1 : a;
+    out.data[i * 4] = 255;
+    out.data[i * 4 + 1] = 255;
+    out.data[i * 4 + 2] = 255;
+    out.data[i * 4 + 3] = (a * 255) | 0;
+  }
+  const mask = document.createElement('canvas');
+  mask.width = W;
+  mask.height = H;
+  const mg = mask.getContext('2d')!;
+  if (supportsFilter(mg) && softenPx > 0.3) mg.filter = 'blur(' + softenPx.toFixed(1) + 'px)';
+  const tmp = document.createElement('canvas');
+  tmp.width = W;
+  tmp.height = H;
+  tmp.getContext('2d')!.putImageData(out, 0, 0);
+  mg.drawImage(tmp, 0, 0);
+  if (supportsFilter(mg)) mg.filter = 'none';
+  return mask;
+}
+
+function renderWestern(p: Required<Pick<TextFxParams, 'text' | 'weight' | 'family' | 'size' | 'space' | 'depth' | 'angle' | 'slant' | 'grunge' | 'bevel' | 'seed' | 'cTop' | 'cMid' | 'cBot' | 'cDark'>>, scale: number): HTMLCanvasElement {
+  const probe = document.createElement('canvas').getContext('2d')!;
+  const font = p.weight + ' ' + p.size + 'px ' + p.family;
+  probe.letterSpacing = p.space + 'px';
+  probe.font = font;
+  const m = probe.measureText(p.text);
+  const asc = m.actualBoundingBoxAscent, desc = m.actualBoundingBoxDescent;
+  const capH = asc + desc;
+  const edgeW = p.size * 0.07;
+  const dx = Math.cos(p.angle) * p.depth, dy = Math.sin(p.angle) * p.depth;
+  const slantPad = Math.abs(p.slant) * capH;
+  const pad = Math.ceil(edgeW + p.size * 0.1 + p.depth + slantPad);
+  const w = Math.ceil(m.width + pad * 2);
+  const h = Math.ceil(capH + pad * 2);
+
+  const canvas = document.createElement('canvas');
+  canvas.width = w * scale;
+  canvas.height = h * scale;
+  const c = canvas.getContext('2d')!;
+
+  const x = pad - Math.min(0, dx), y = pad + asc - Math.min(0, dy);
+  const top = y - asc, bot = y + desc;
+
+  const mk = () => {
+    const k = document.createElement('canvas');
+    k.width = canvas.width;
+    k.height = canvas.height;
+    return k;
+  };
+  const setT = (cx: CanvasRenderingContext2D) => {
+    cx.setTransform(scale, 0, 0, scale, 0, 0);
+    cx.transform(1, 0, -p.slant, 1, p.slant * y, 0);
+    cx.letterSpacing = p.space + 'px';
+    cx.font = font;
+    cx.textBaseline = 'alphabetic';
+    cx.lineJoin = 'round';
+    cx.lineCap = 'butt'; // their source set 'miter' here, which browsers ignore on lineCap
+  };
+  const glyph = (dxx?: number, dyy?: number) => {
+    const k = mk();
+    const g = k.getContext('2d')!;
+    setT(g);
+    g.fillStyle = '#fff';
+    g.fillText(p.text, x + (dxx || 0), y + (dyy || 0));
+    return k;
+  };
+  const clipTo = (k: HTMLCanvasElement, mask: HTMLCanvasElement) => {
+    const g = k.getContext('2d')!;
+    g.save();
+    g.setTransform(1, 0, 0, 1, 0, 0);
+    g.globalCompositeOperation = 'destination-in';
+    g.drawImage(mask, 0, 0);
+    g.restore();
+    return k;
+  };
+  const blurred = (src: HTMLCanvasElement, px: number) => {
+    const k = mk();
+    const g = k.getContext('2d')!;
+    if (supportsFilter(g) && px > 0.3) {
+      g.filter = 'blur(' + (px * scale).toFixed(2) + 'px)';
+      g.drawImage(src, 0, 0);
+      g.filter = 'none';
+    } else {
+      g.drawImage(src, 0, 0);
+    }
+    return k;
+  };
+  const tintAlpha = (k: HTMLCanvasElement, color: string, alpha: number) => {
+    const g = k.getContext('2d')!;
+    g.save();
+    g.setTransform(1, 0, 0, 1, 0, 0);
+    g.globalCompositeOperation = 'source-in';
+    g.fillStyle = color;
+    g.fillRect(0, 0, k.width, k.height);
+    g.restore();
+    const k2 = mk();
+    const g2 = k2.getContext('2d')!;
+    g2.globalAlpha = alpha;
+    g2.drawImage(k, 0, 0);
+    return k2;
+  };
+
+  c.setTransform(1, 0, 0, 1, 0, 0);
+  c.clearRect(0, 0, canvas.width, canvas.height);
+  setT(c);
+
+  // drop shadow
+  c.save();
+  c.shadowColor = 'rgba(15,8,4,0.50)';
+  c.shadowBlur = p.size * 0.035 * scale;
+  c.shadowOffsetX = p.size * 0.02 * scale;
+  c.shadowOffsetY = p.size * 0.035 * scale;
+  c.lineWidth = edgeW;
+  c.strokeStyle = 'rgba(15,8,4,0.50)';
+  c.fillStyle = 'rgba(15,8,4,0.50)';
+  c.strokeText(p.text, x, y);
+  c.fillText(p.text, x, y);
+  c.restore();
+
+  // 3D extrusion
+  if (p.depth > 0) {
+    const deepCol = shade(p.cDark, -4);
+    c.lineWidth = edgeW;
+    const steps = Math.ceil(p.depth);
+    for (let i = steps; i >= 1; i--) {
+      const t = i / steps;
+      c.strokeStyle = deepCol;
+      c.fillStyle = deepCol;
+      c.strokeText(p.text, x + dx * t, y + dy * t);
+      c.fillText(p.text, x + dx * t, y + dy * t);
+    }
+  }
+
+  const face = mk();
+  const f = face.getContext('2d')!;
+  setT(f);
+
+  f.lineWidth = edgeW;
+  f.strokeStyle = p.cDark;
+  f.strokeText(p.text, x, y);
+
+  const gBody = f.createLinearGradient(0, top, 0, bot);
+  gBody.addColorStop(0, p.cTop);
+  gBody.addColorStop(0.5, p.cMid);
+  gBody.addColorStop(1, p.cBot);
+  f.fillStyle = gBody;
+  f.fillText(p.text, x, y);
+
+  const M = glyph(0, 0);
+
+  if (p.bevel > 0) {
+    let band = glyph(0, 0);
+    const g = band.getContext('2d')!;
+    g.save();
+    g.setTransform(1, 0, 0, 1, 0, 0);
+    g.globalCompositeOperation = 'destination-out';
+    g.drawImage(glyph(0.02 * p.size, 0.06 * capH), 0, 0);
+    g.restore();
+    band = blurred(band, p.size * 0.008);
+    band = clipTo(band, M);
+    band = tintAlpha(band, '#ffeba8', p.bevel);
+    f.save();
+    f.setTransform(1, 0, 0, 1, 0, 0);
+    f.globalCompositeOperation = 'source-atop';
+    f.drawImage(band, 0, 0);
+    f.restore();
+  }
+
+  if (p.grunge > 0) {
+    const W = canvas.width, H = canvas.height;
+    const S = p.size * scale;
+    const seed = (hashStr(p.text + '|' + p.family) ^ (p.seed * 2654435761)) >>> 0;
+    const rust = rustOf(p.cBot);
+    const layers = [
+      { mask: noiseMask(W, H, 0.022 * S, 0.72, seed, 0.6 * scale), color: rust, a: 0.8 },
+      { mask: noiseMask(W, H, 0.011 * S, 0.7, seed + 11, 0.5 * scale, 4.0), color: rust, a: 0.6 },
+      { mask: noiseMask(W, H, 0.0066 * S, 0.74, seed + 7, 0.3 * scale), color: rust, a: 0.75 },
+      { mask: noiseMask(W, H, 0.0154 * S, 0.86, seed + 3, 0.4 * scale), color: p.cDark, a: 0.9 },
+    ];
+    f.save();
+    f.setTransform(1, 0, 0, 1, 0, 0);
+    f.globalCompositeOperation = 'source-atop';
+    for (const L of layers) {
+      let k = clipTo(L.mask, M);
+      k = tintAlpha(k, L.color, L.a * p.grunge);
+      f.drawImage(k, 0, 0);
+    }
+    f.restore();
+  }
+
+  c.setTransform(1, 0, 0, 1, 0, 0);
+  c.drawImage(face, 0, 0);
+  return canvas;
+}
+
+// Trim transparent padding so the element's x/y maps to the visible glyphs.
+function trim(canvas: HTMLCanvasElement): { canvas: HTMLCanvasElement; w: number; h: number } {
+  const ctx = canvas.getContext('2d')!;
+  const W = canvas.width, H = canvas.height;
+  const data = ctx.getImageData(0, 0, W, H).data;
+  let minX = W, minY = H, maxX = -1, maxY = -1;
+  for (let y = 0; y < H; y++) {
+    for (let x = 0; x < W; x++) {
+      if (data[(y * W + x) * 4 + 3] > 8) {
+        if (x < minX) minX = x;
+        if (x > maxX) maxX = x;
+        if (y < minY) minY = y;
+        if (y > maxY) maxY = y;
+      }
+    }
+  }
+  if (maxX < minX) return { canvas, w: W, h: H };
+  const cw = maxX - minX + 1, ch = maxY - minY + 1;
+  const out = document.createElement('canvas');
+  out.width = cw;
+  out.height = ch;
+  out.getContext('2d')!.drawImage(canvas, minX, minY, cw, ch, 0, 0, cw, ch);
+  return { canvas: out, w: cw, h: ch };
+}
+
+export function renderTextFx(p: TextFxParams): TextFxResult {
+  let raw: HTMLCanvasElement;
+  if (p.kind === 'western') {
+    raw = renderWestern(
+      {
+        text: p.text, weight: p.weight, family: p.family, size: p.size, space: p.space,
+        depth: p.depth ?? p.size * 0.06, angle: p.angle ?? (112 * Math.PI) / 180,
+        slant: p.slant ?? 0.08, grunge: p.grunge ?? 0.8, bevel: p.bevel ?? 0.45, seed: p.seed ?? 7,
+        cTop: p.cTop, cMid: p.cMid, cBot: p.cBot, cDark: p.cDark,
+      },
+      SS,
+    );
+  } else {
+    raw = renderGlossy(
+      {
+        text: p.text, weight: p.weight, family: p.family, size: p.size, space: p.space,
+        plump: p.plump ?? 0.03, edge: p.edge ?? 0.5, outerw: p.outerw ?? 0.45,
+        gloss: p.gloss ?? 0.85, glossH: p.glossH ?? 0.45, glossI: p.glossI ?? 0.08, innerB: p.innerB ?? 0.7,
+        cTop: p.cTop, cMid: p.cMid, cBot: p.cBot, cDark: p.cDark, cOuter: p.cOuter ?? '#ced3db',
+      },
+      SS,
+    );
+  }
+  const t = trim(raw);
+  return { url: t.canvas.toDataURL('image/png'), w: t.w / SS, h: t.h / SS };
+}

frontend/src/components/ui/combobox.tsx

@@ -6,7 +6,7 @@ import { cn } from '@/lib/utils';
 // only an exact (case-insensitive) match — otherwise it reverts, so the field
 // can't hold a typo'd value that isn't in the list.
 export function Combobox({
-  value, onChange, options, placeholder, className, allowFreeText = false,
+  value, onChange, options, placeholder, className, allowFreeText = false, commitOnType = false,
 }: {
   value: string;
   onChange: (v: string) => void;
@@ -14,6 +14,10 @@ export function Combobox({
   placeholder?: string;
   className?: string;
   allowFreeText?: boolean;
+  // Commit each keystroke to the parent immediately (not just on blur). Use for
+  // fields read live by other actions — e.g. RST, so a CW macro sent without
+  // leaving the field uses the value just typed.
+  commitOnType?: boolean;
 }) {
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
@@ -41,9 +45,13 @@ export function Combobox({
     // Defer so a click on an option registers first.
     setTimeout(() => {
       setOpen(false);
-      const exact = options.find((o) => o.toLowerCase() === query.trim().toLowerCase());
-      if (exact) { onChange(exact); setQuery(exact); }
-      else if (allowFreeText) { onChange(query.trim()); }
+      const trimmed = query.trim();
+      const exact = options.find((o) => o.toLowerCase() === trimmed.toLowerCase());
+      // Only fire onChange when the value actually changed — committing an
+      // unchanged value on a plain tab-through would wrongly flag the field as
+      // "user-edited" (e.g. RST, which then blocks the CW/SSB 599↔59 default).
+      if (exact) { if (exact !== value) onChange(exact); setQuery(exact); }
+      else if (allowFreeText) { if (trimmed !== value) onChange(trimmed); }
       else { setQuery(value); } // revert typo
     }, 120);
   }
@@ -56,7 +64,17 @@ export function Combobox({
         // Focus selects the text so a keystroke replaces it — but does NOT
         // open the list (so tabbing in doesn't pop the dropdown).
         onFocus={(e) => { setQuery(value); e.currentTarget.select(); }}
-        onChange={(e) => { setQuery(e.target.value); setOpen(true); }}
+        onChange={(e) => {
+          const v = e.target.value;
+          setQuery(v);
+          setOpen(true);
+          // Commit-on-type pushes the value live to the parent (so a CW macro sent
+          // without leaving the field uses what was just typed). With free text that's
+          // any input; a restricted field (allowFreeText=false) commits ONLY a value
+          // that's actually in the list, so a half-typed or invalid report never
+          // becomes the committed value — blur then reverts the leftover text.
+          if (commitOnType && (allowFreeText || options.some((o) => o.toLowerCase() === v.trim().toLowerCase()))) onChange(v);
+        }}
         onBlur={onBlur}
         onKeyDown={(e) => {
           if ((e.key === 'ArrowDown' || e.key === 'Alt') && !open) { setOpen(true); }

frontend/src/components/ui/input.tsx

@@ -7,7 +7,7 @@ const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLI
       <input
         type={type}
         className={cn(
-          'flex h-8 w-full rounded-md border border-input bg-background px-2.5 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-8 w-full rounded-md border border-input bg-background px-2.5 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}

frontend/src/components/ui/tabs.tsx

@@ -37,7 +37,11 @@ const TabsContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.Content
     ref={ref}
-    className={cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className)}
+    // No focus ring on the panel itself. Radix makes the content focusable and
+    // moves focus into it when a tab is selected, so clicking anywhere in the
+    // lower half drew a full-width orange rule under the tab strip. The panel is
+    // a container — what it holds carries its own focus styling.
+    className={cn('mt-2 focus-visible:outline-none', className)}
     {...props}
   />
 ));

frontend/src/components/ui/textarea.tsx

@@ -6,7 +6,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttribu
     return (
       <textarea
         className={cn(
-          'flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}

frontend/src/components/ui/tooltip.tsx

@@ -14,7 +14,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      'z-50 overflow-hidden rounded-md bg-stone-900 px-2.5 py-1.5 text-xs text-white shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 overflow-hidden rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className,
     )}
     {...props}

frontend/src/lib/awardRefs.ts

@@ -0,0 +1,156 @@
+// Shared helpers for per-QSO award references.
+//
+// In the UI a QSO's manually-assigned award references are edited as a single
+// semicolon-delimited string of "CODE@REF" entries, e.g.
+//   "POTA@FR-11553;IOTA@EU-064"
+// On save each entry is routed to the QSO field its award actually reads from
+// (see internal/award/award.go): POTA/SOTA/IOTA have dedicated columns; WWFF
+// and custom awards live in uppercase ADIF extras keys.
+
+// parseAwardRefs turns "POTA@FR-11553;IOTA@EU-064" into
+// { POTA: "FR-11553", IOTA: "EU-064" }. Repeated codes join with commas.
+export function parseAwardRefs(v: string): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const entry of (v ?? '').split(';').filter(Boolean)) {
+    const at = entry.indexOf('@');
+    if (at <= 0) continue;
+    const code = entry.slice(0, at).toUpperCase();
+    const ref = entry.slice(at + 1).trim().toUpperCase();
+    if (!ref) continue;
+    out[code] = out[code] ? `${out[code]},${ref}` : ref;
+  }
+  return out;
+}
+
+// appendTokens adds space-separated tokens (a "A,B" ref string) to a text field,
+// skipping any already present, so re-picking is idempotent.
+function appendTokens(existing: string | undefined, refs: string): string {
+  let out = (existing ?? '').trim();
+  for (const tok of refs.split(',').map((s) => s.trim()).filter(Boolean)) {
+    const re = new RegExp(`(^|\\s)${tok.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}(\\s|$)`, 'i');
+    if (!re.test(out)) out = out ? `${out} ${tok}` : tok;
+  }
+  return out;
+}
+
+// removeTokens strips space/word-delimited tokens (a "A,B" ref string) from a
+// text field — the inverse of appendTokens. Used when a picked reference is
+// REMOVED so an in-field award (DDFM finds "D72" in the note) stops matching it;
+// otherwise the ref is re-derived from the field and reappears on reopen.
+function removeTokens(existing: string | undefined, refs: string): string {
+  let out = existing ?? '';
+  for (const tok of refs.split(',').map((s) => s.trim()).filter(Boolean)) {
+    const re = new RegExp(`\\b${tok.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`, 'ig');
+    out = out.replace(re, ' ');
+  }
+  return out.replace(/\s{2,}/g, ' ').trim();
+}
+
+// MANUAL_REFS_KEY mirrors award.ManualRefsKey (Go): the ADIF extras key holding
+// the operator's per-QSO award-reference assignments as "CODE@REF;CODE@REF".
+// The award engine honours these regardless of how the award matches, so a
+// reference can be assigned even for awards that scan a free-text field by
+// description/pattern (e.g. WAPC over ADDRESS) where writing a bare code into
+// the field wouldn't match.
+const MANUAL_REFS_KEY = 'APP_OPSLOG_AWARDREFS';
+
+// applyAwardRefs writes picked references onto a QSO payload. Every assignment
+// is recorded under MANUAL_REFS_KEY (authoritative for the engine); in addition,
+// awards backed by a standard ADIF column also get that column written so the
+// data lives in its conventional place and exports correctly. Awards that match
+// a free-text field by description/pattern (address/qth/name/custom) rely solely
+// on the override — we don't pollute the text field with a code.
+export function applyAwardRefs(payload: any, awardRefs: string, fieldOf: Record<string, string>, prevAwardRefs?: string) {
+  const byCode = parseAwardRefs(awardRefs);
+  // References the operator REMOVED since the editor opened: for in-field awards
+  // (note/comment) strip the token from the field too, so a deleted DDFM/etc.
+  // ref doesn't get re-derived from the leftover token and reappear on reopen.
+  if (prevAwardRefs != null) {
+    const prev = parseAwardRefs(prevAwardRefs);
+    for (const [code, prevRef] of Object.entries(prev)) {
+      const field = fieldOf[code] || code.toLowerCase();
+      if (field !== 'note' && field !== 'notes' && field !== 'comment') continue;
+      const now = new Set((byCode[code] ?? '').split(',').map((s) => s.trim().toUpperCase()).filter(Boolean));
+      const removed = prevRef.split(',').map((s) => s.trim()).filter(Boolean).filter((r) => !now.has(r.toUpperCase()));
+      if (removed.length === 0) continue;
+      const rm = removed.join(',');
+      if (field === 'comment') payload.comment = removeTokens(payload.comment, rm);
+      else payload.notes = removeTokens(payload.notes, rm);
+    }
+  }
+  const extras: Record<string, string> = { ...(payload.extras ?? {}) };
+  const overrides: string[] = [];
+  for (const [code, ref] of Object.entries(byCode)) {
+    for (const r of ref.split(',').map((s) => s.trim()).filter(Boolean)) {
+      overrides.push(`${code}@${r}`);
+    }
+    const field = fieldOf[code] || code.toLowerCase();
+    switch (field) {
+      case 'iota': payload.iota = ref; break;
+      case 'sota_ref': payload.sota_ref = ref; break;
+      case 'pota_ref': payload.pota_ref = ref; break;
+      // Predefined-list awards on a QSO field (WAS/RAC/WAJA on state, JCC on
+      // county): picking a reference writes it straight into that column.
+      case 'state': payload.state = ref; break;
+      case 'cnty': payload.cnty = ref; break;
+      case 'wwff':
+        extras['WWFF_REF'] = ref;
+        extras['SIG'] = 'WWFF';
+        extras['SIG_INFO'] = ref;
+        break;
+      // QSOFIELDS awards that scan a free-text field for a code (e.g. DDFM finds
+      // "D06" in the note): append the code so the in-field matcher finds it too.
+      case 'note': case 'notes':
+        payload.notes = appendTokens(payload.notes, ref);
+        break;
+      case 'comment':
+        payload.comment = appendTokens(payload.comment, ref);
+        break;
+      // address / qth / name / custom: the override above is authoritative; do
+      // not write a code into a free-text field the award matches by name.
+      default:
+        break;
+    }
+  }
+  if (overrides.length > 0) extras[MANUAL_REFS_KEY] = overrides.join(';');
+  else delete extras[MANUAL_REFS_KEY];
+  if (Object.keys(extras).length > 0) payload.extras = extras;
+  else if (payload.extras) delete payload.extras;
+}
+
+// awardRefValue reads a single award's stored reference from a QSO, inverse of
+// applyAwardRefs. Used to seed the editor when opening an existing QSO.
+export function awardRefValue(qso: any, code: string, field: string): string {
+  switch (field) {
+    case 'iota': return (qso.iota ?? '').toUpperCase();
+    case 'sota_ref': return (qso.sota_ref ?? '').toUpperCase();
+    case 'pota_ref': return (qso.pota_ref ?? '').toUpperCase();
+    case 'state': return (qso.state ?? '').toUpperCase();
+    case 'cnty': return (qso.cnty ?? '').toUpperCase();
+    case 'wwff': {
+      const ex = qso.extras ?? {};
+      if (ex['WWFF_REF']) return String(ex['WWFF_REF']).toUpperCase();
+      if (String(ex['SIG'] ?? '').toUpperCase() === 'WWFF') return String(ex['SIG_INFO'] ?? '').toUpperCase();
+      return '';
+    }
+    default: {
+      const ex = qso.extras ?? {};
+      return String(ex[field.toUpperCase()] ?? '').toUpperCase();
+    }
+  }
+}
+
+// buildAwardRefs reconstructs the "CODE@REF;…" editor string from a QSO for the
+// given pickable awards (code → field). Only awards with a stored value appear.
+export function buildAwardRefs(qso: any, pickable: Array<{ code: string; field: string }>): string {
+  const out: string[] = [];
+  for (const { code, field } of pickable) {
+    const v = awardRefValue(qso, code, field);
+    // A multi-reference field (n-fer POTA "US-6544,US-0680") becomes one
+    // editor entry per reference, so each shows on its own removable line.
+    for (const ref of v.split(/[,;]/).map((s) => s.trim()).filter(Boolean)) {
+      out.push(`${code.toUpperCase()}@${ref}`);
+    }
+  }
+  return out.join(';');
+}

frontend/src/lib/dateFormat.ts

@@ -0,0 +1,91 @@
+// How dates are DISPLAYED. Nothing here touches what is stored.
+//
+// The log keeps ADIF/ISO throughout — the database, ADIF export, LoTW, every
+// upload. This is the reading layer only, because an operator reading
+// "2026-07-30" as the 7th of the 30th month is reading their own log wrongly,
+// and that is a display problem, not a data one.
+//
+// Storage stays ISO deliberately and permanently: it sorts correctly as text,
+// it is what ADIF specifies, and a log whose stored format followed a UI
+// preference would become unreadable the day the preference changed.
+import { writeUiPref } from '@/lib/uiPref';
+
+export type DateFormat = 'iso' | 'fr' | 'us';
+
+const KEY = 'opslog.dateFormat';
+
+function read(): DateFormat {
+	const v = localStorage.getItem(KEY);
+	return v === 'fr' || v === 'us' ? v : 'iso';
+}
+
+let current: DateFormat = read();
+
+// A minimal store so every grid and panel re-renders the moment the format
+// changes, rather than showing the old one until the next restart.
+const listeners = new Set<() => void>();
+
+export function getDateFormat(): DateFormat {
+	return current;
+}
+
+export function setDateFormat(f: DateFormat): void {
+	current = f;
+	writeUiPref(KEY, f);
+	listeners.forEach((l) => l());
+}
+
+export function subscribeDateFormat(fn: () => void): () => void {
+	listeners.add(fn);
+	return () => listeners.delete(fn);
+}
+
+// reloadDateFormat re-reads the stored value — for after the portable prefs
+// have been synced from the database at startup, which happens AFTER this
+// module's first read.
+export function reloadDateFormat(): void {
+	const v = read();
+	if (v !== current) {
+		current = v;
+		listeners.forEach((l) => l());
+	}
+}
+
+const pad = (n: number) => String(n).padStart(2, '0');
+
+// order arranges the three parts. Separators stay '-' in every format: a slash
+// in the French one would be conventional but it also invites the reader to
+// take it for a US date, which is exactly the confusion being fixed.
+function order(y: number, m: number, d: number): string {
+	switch (current) {
+		case 'fr':
+			return `${pad(d)}-${pad(m)}-${y}`;
+		case 'us':
+			return `${pad(m)}-${pad(d)}-${y}`;
+	}
+	return `${y}-${pad(m)}-${pad(d)}`;
+}
+
+// formatDateTimeUTC renders a timestamp with the time, in UTC.
+//
+// UTC is not negotiable and is not part of the preference: a logbook is kept in
+// UTC, and a date shown in local time would disagree with the QSO's own record
+// twice a year.
+export function formatDateTimeUTC(s: unknown): string {
+	if (!s) return '';
+	const d = new Date(String(s));
+	if (isNaN(d.getTime())) return String(s);
+	return `${order(d.getUTCFullYear(), d.getUTCMonth() + 1, d.getUTCDate())} ${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`;
+}
+
+// formatDateOnly renders a date with no time. It accepts both the ADIF form
+// (YYYYMMDD, used by every QSL and upload date) and anything Date can parse.
+export function formatDateOnly(s: unknown): string {
+	if (!s) return '';
+	const t = String(s).trim();
+	const m = t.match(/^(\d{4})(\d{2})(\d{2})/);
+	if (m) return order(Number(m[1]), Number(m[2]), Number(m[3]));
+	const d = new Date(t);
+	if (isNaN(d.getTime())) return t;
+	return order(d.getUTCFullYear(), d.getUTCMonth() + 1, d.getUTCDate());
+}

frontend/src/lib/greyline.ts

@@ -0,0 +1,130 @@
+// Grey line — the day/night terminator, and the twilight band around it where
+// HF propagation briefly does things it does at no other time.
+//
+// The maths is the standard low-precision solar position (Meeus, chapter 25, as
+// used by NOAA's solar calculator): good to well under a degree, which is far
+// finer than the band being drawn. No ephemeris, no network, no dependency —
+// this has to work in a field shack with no internet.
+//
+// Everything here is pure so it can be tested against known positions; the
+// drawing lives in the map component.
+
+const DEG = Math.PI / 180;
+
+// julianDay for a date, including the fraction of the day.
+export function julianDay(d: Date): number {
+	return d.getTime() / 86400000 + 2440587.5;
+}
+
+// Sun's declination and Greenwich hour angle, both in degrees.
+//
+// Returned together because they are computed from the same intermediates and
+// every caller needs both — splitting them into two exported functions would
+// double the work at each call for the sake of a tidier signature.
+export function sunPosition(date: Date): { dec: number; gha: number } {
+	const jd = julianDay(date);
+	const n = jd - 2451545.0; // days from J2000.0
+
+	// Mean longitude and mean anomaly of the Sun.
+	const L = (280.460 + 0.9856474 * n) % 360;
+	const g = ((357.528 + 0.9856003 * n) % 360) * DEG;
+
+	// Ecliptic longitude: the equation of centre applied to the mean longitude.
+	const lambda = (L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2 * g)) * DEG;
+
+	// Obliquity of the ecliptic, slowly decreasing.
+	const eps = (23.439 - 0.0000004 * n) * DEG;
+
+	const dec = Math.asin(Math.sin(eps) * Math.sin(lambda)) / DEG;
+
+	// Right ascension, kept in the same quadrant as the ecliptic longitude —
+	// atan2 alone lands 180° out for half the year, which mirrors the whole
+	// terminator about the prime meridian. Six months of a plausible-looking
+	// wrong answer is exactly the kind of bug that survives review.
+	let ra = Math.atan2(Math.cos(eps) * Math.sin(lambda), Math.cos(lambda)) / DEG;
+	if (ra < 0) ra += 360;
+
+	// Greenwich mean sidereal time, in degrees.
+	const gmst = (280.46061837 + 360.98564736629 * n) % 360;
+
+	let gha = gmst - ra;
+	gha = ((gha % 360) + 360) % 360;
+	return { dec, gha };
+}
+
+// terminatorLatitude returns the latitude, at a given longitude, where the Sun
+// sits at `altitude` degrees above (or below) the horizon.
+//
+// altitude 0 is the geometric terminator; -6 is civil twilight, the outer edge
+// of the grey line as operators use the term.
+//
+// Returns null where no such latitude exists at that longitude — inside the
+// polar day or polar night, where the Sun never crosses that altitude at all.
+export function terminatorLatitude(lonDeg: number, dec: number, gha: number, altitude = 0): number | null {
+	const ha = (gha + lonDeg) * DEG; // local hour angle
+	const d = dec * DEG;
+	const h = altitude * DEG;
+
+	// From sin(alt) = sin(dec)sin(lat) + cos(dec)cos(lat)cos(ha), solved for lat:
+	//   A·sin(lat) + B·cos(lat) = sin(alt),  A = sin(dec), B = cos(dec)cos(ha)
+	//
+	// That has TWO solutions per meridian, and picking the wrong one is not a
+	// small error — it mirrors the answer about the equator. New York at 02:00
+	// local in December came out as daylight because the branch chosen put the
+	// terminator at +63° where it belongs at −63°: a shaded map that looks
+	// entirely plausible and is exactly wrong.
+	//
+	// So anchor on the geometric terminator, where the answer is unambiguous and
+	// classical, and take whichever branch is nearest it. At altitude 0 that
+	// reproduces it exactly; for the twilight band it follows it by continuity,
+	// which is the physical requirement — the twilight curve is a small offset
+	// from the terminator, never on the other side of the planet.
+	const A = Math.sin(d);
+	const B = Math.cos(d) * Math.cos(ha);
+	const R = Math.hypot(A, B);
+	if (R === 0) return null;
+	const s = Math.sin(h) / R;
+	if (s < -1 || s > 1) return null; // the Sun never reaches this altitude here
+
+	// The classical terminator. Division by zero is deliberate and correct here:
+	// at an equinox tan(dec) → 0 and the terminator becomes a meridian, which is
+	// exactly what atan(±Infinity) = ±90° expresses.
+	const t = Math.tan(d);
+	if (t === 0 && Math.cos(ha) === 0) return null; // degenerate: no crossing to name
+	const lat0 = Math.atan(-Math.cos(ha) / t) / DEG;
+
+	const phi = Math.atan2(B, A); // phase of the A·sin(lat) + B·cos(lat) sum
+	const fold = (x: number) => {
+		let v = ((x + 180) % 360 + 360) % 360 - 180;
+		if (v > 90) v = 180 - v;
+		if (v < -90) v = -180 - v;
+		return v;
+	};
+	const c1 = fold((Math.asin(s) - phi) / DEG);
+	const c2 = fold((Math.PI - Math.asin(s) - phi) / DEG);
+	return Math.abs(c1 - lat0) <= Math.abs(c2 - lat0) ? c1 : c2;
+}
+
+// nightPolygon returns a ring covering the part of the world where the Sun is
+// below `altitude`, ready for L.polygon (as [lat, lon] pairs).
+//
+// The ring runs along the terminator from west to east and closes along
+// whichever pole is in darkness — which pole that is flips with the season, and
+// getting it wrong shades the lit half of the planet.
+export function nightPolygon(date: Date, altitude = 0, stepDeg = 2): [number, number][] {
+	const { dec, gha } = sunPosition(date);
+	const ring: [number, number][] = [];
+
+	for (let lon = -180; lon <= 180; lon += stepDeg) {
+		const lat = terminatorLatitude(lon, dec, gha, altitude);
+		// Inside a polar day/night there is no crossing; clamp to the pole so the
+		// ring stays closed rather than tearing open across the map.
+		ring.push([lat === null ? (dec > 0 ? -90 : 90) : lat, lon]);
+	}
+
+	// Northern summer (positive declination) → the SOUTH pole is dark.
+	const pole = dec > 0 ? -90 : 90;
+	ring.push([pole, 180]);
+	ring.push([pole, -180]);
+	return ring;
+}

frontend/src/lib/gridPrefs.ts

@@ -0,0 +1,129 @@
+// Portable grid-column preferences (visibility / order / width / sort).
+//
+// Stored in the DB settings table (so they travel with the logbook and
+// survive a reinstall) AND mirrored to the WebView localStorage as a fast,
+// flicker-free cache. On a fresh machine localStorage is empty, so we fall
+// back to the DB copy and re-seed the cache.
+import { GetUIPref, SetUIPref } from '../../wailsjs/go/main/App';
+
+// The DB copy is ALREADY per-profile (the backend prefixes every ui.* key with
+// the active profile id). The localStorage cache, however, is one namespace for
+// the whole WebView, so without scoping it too a profile switch would keep
+// serving the previous profile's cached layout and the correct per-profile DB
+// value would never win. lsScope makes the cache per-profile as well; it's set
+// once the active profile is known and updated on every profile switch.
+let lsScope = '';
+
+// setGridPrefsProfile scopes the localStorage cache to a profile. Call it before
+// the grids read their state (at startup) and again whenever the active profile
+// changes so each profile keeps its own column layout / widths.
+export function setGridPrefsProfile(id: number | string | null | undefined): void {
+  lsScope = id == null || id === '' ? '' : `p${id}.`;
+  markReady();
+}
+
+// The active profile is only known after an async call, but the grids mount and
+// read their state on the first paint. A grid that read before the scope was set
+// looked up the UNSCOPED cache key (always a miss) and then saved under the
+// scoped one — so its layout could never be restored, only rewritten. Grids now
+// wait for this instead of racing it.
+//
+// The 5 s fallback matters: if the profile lookup fails outright, the grids must
+// still come up with whatever the unscoped cache holds rather than hang with no
+// columns restored.
+let markReady: () => void = () => {};
+const gridPrefsReady = new Promise<void>((resolve) => {
+  markReady = resolve;
+  setTimeout(resolve, 5000);
+});
+
+export function whenGridPrefsReady(): Promise<void> {
+  return gridPrefsReady;
+}
+
+// lsKey scopes ONLY the localStorage cache key. The DB key passed to
+// GetUIPref/SetUIPref is left untouched — the backend already scopes it.
+function lsKey(key: string): string {
+  return lsScope + key;
+}
+
+// loadLocal reads the cached column state synchronously (used in onGridReady
+// to apply instantly, before the async DB round-trip).
+export function loadLocal(key: string): any[] | null {
+  try {
+    const raw = localStorage.getItem(lsKey(key));
+    const v = raw ? JSON.parse(raw) : null;
+    return Array.isArray(v) ? v : null;
+  } catch {
+    return null;
+  }
+}
+
+// loadRemote pulls the portable copy from the DB (null if none / unset).
+//
+// GetUIPref returns an ERROR — not "" — while the settings store is still
+// coming up and not yet scoped to the active profile. Treating that as "no
+// preference" was the silent data-loss path: the grid rendered defaults and the
+// first column event then wrote those defaults over the good saved copy. So
+// retry for a few seconds instead, and only give up on a real absence.
+export async function loadRemote(key: string, attempts = 10): Promise<any[] | null> {
+  for (let i = 0; i < attempts; i++) {
+    try {
+      const v = await GetUIPref(key);
+      const parsed = v ? JSON.parse(v) : null;
+      return Array.isArray(parsed) ? parsed : null;
+    } catch {
+      // Not ready yet (or a parse failure on a corrupt value — one more read
+      // costs nothing). 300 ms × 10 covers a slow startup without hanging.
+      await new Promise((r) => setTimeout(r, 300));
+    }
+  }
+  return null;
+}
+
+// saveState write-throughs to both the cache and the DB (fire-and-forget). Only
+// the cache key is profile-scoped; the DB key is scoped by the backend.
+// The DB write is DEBOUNCED. AG-Grid emits a column-resized event per drag
+// frame, so dragging one border used to fire dozens of settings writes; the
+// cache write stays synchronous so nothing is lost if the window closes.
+const pendingDB = new Map<string, string>();
+const dbTimers = new Map<string, number>();
+
+export function saveState(key: string, state: any[]) {
+  const json = JSON.stringify(state);
+  try { localStorage.setItem(lsKey(key), json); } catch { /* quota / private mode */ }
+  pendingDB.set(key, json);
+  const prev = dbTimers.get(key);
+  if (prev) clearTimeout(prev);
+  dbTimers.set(key, window.setTimeout(() => flushOne(key), 400));
+}
+
+function flushOne(key: string) {
+  const json = pendingDB.get(key);
+  dbTimers.delete(key);
+  if (json == null) return;
+  pendingDB.delete(key);
+  SetUIPref(key, json).catch(() => {
+    // The store may not be scoped yet at startup. Keep the value and try once
+    // more shortly — dropping it here is how a fresh profile ended up with no
+    // portable copy at all.
+    pendingDB.set(key, json);
+    if (!dbTimers.has(key)) dbTimers.set(key, window.setTimeout(() => flushOne(key), 2000));
+  });
+}
+
+// flushGridPrefs writes any debounced state immediately. Call it when the app is
+// about to close so a resize made in the last moments still reaches the DB.
+export function flushGridPrefs() {
+  for (const key of Array.from(pendingDB.keys())) {
+    const t = dbTimers.get(key);
+    if (t) clearTimeout(t);
+    flushOne(key);
+  }
+}
+
+// seedLocal writes a value into the cache without touching the DB (used after
+// hydrating the cache from the DB on a fresh machine).
+export function seedLocal(key: string, state: any[]) {
+  try { localStorage.setItem(lsKey(key), JSON.stringify(state)); } catch { /* ignore */ }
+}

frontend/src/lib/gridTheme.ts

@@ -0,0 +1,30 @@
+import { themeQuartz } from 'ag-grid-community';
+
+// Shared AG-Grid theme for every logbook table (Recent QSOs, Worked-before,
+// Cluster, Net, QSL Manager). Colours are wired to the app's semantic CSS
+// variables (see style.css) instead of hardcoded hex, so the grids follow the
+// active theme (light-warm / dark-warm / graphite / high-contrast) at runtime —
+// flipping <html data-theme> re-resolves these var() references with no
+// re-render. Keep this the single source of truth; per-grid tweaks (e.g. row
+// height) chain a `.withParams({...})` on top.
+export const hamlogGridTheme = themeQuartz.withParams({
+  fontFamily: 'inherit',
+  fontSize: 12.5,
+  backgroundColor: 'var(--card)',
+  foregroundColor: 'var(--foreground)',
+  headerBackgroundColor: 'var(--muted)',
+  headerTextColor: 'var(--muted-foreground)',
+  headerFontWeight: 600,
+  oddRowBackgroundColor: 'color-mix(in srgb, var(--muted) 40%, var(--card))',
+  rowHoverColor: 'color-mix(in srgb, var(--accent) 55%, var(--card))',
+  selectedRowBackgroundColor: 'var(--accent)',
+  borderColor: 'var(--border)',
+  rowBorder: { color: 'var(--border)', width: 1 },
+  columnBorder: { color: 'var(--border)', width: 1 },
+  cellHorizontalPadding: 10,
+  rowHeight: 30,
+  headerHeight: 32,
+  spacing: 4,
+  accentColor: 'var(--primary)',
+  iconSize: 12,
+});