up

frontend/src/components/ClusterGrid.tsx

@@ -125,17 +125,18 @@ const COL_CATALOG: ColEntry[] = [
       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) {
+        // New DXCC entity — soft rose pill, no clashing border.
         style.backgroundColor = '#ffe4e6';
-        style.color = '#9f1239';
-        style.border = '1px solid #fda4af';
+        style.color = '#be123c';
+        style.padding = '1px 7px';
+        style.borderRadius = 4;
       } else if (workedCall) {
-        style.color = '#0369a1';
+        style.color = '#0369a1'; // already worked this exact call
       } else {
-        style.color = '#b8410c';
+        style.color = '#b8410c'; // new call in a worked entity
       }
       return <span style={style} title={isNew ? `NEW DXCC: ${status?.country ?? ''}` : workedCall ? 'Already worked this call' : undefined}>{p.value}</span>;
     },
@@ -164,15 +165,12 @@ const COL_CATALOG: ColEntry[] = [
         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,
+              fontFamily: 'ui-monospace, monospace', fontSize: 12,
+              fontWeight: newBand ? 700 : 400,
+              ...(newBand ? { backgroundColor: '#fde68a', color: '#92400e', padding: '1px 7px', borderRadius: 4 } : {}),
             }}
             title={newBand ? 'NEW BAND for this entity' : undefined}
           >{p.value}</span>
@@ -190,15 +188,12 @@ const COL_CATALOG: ColEntry[] = [
         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,
+              fontFamily: 'ui-monospace, monospace', fontSize: 12,
+              fontWeight: newSlot ? 700 : 400,
+              ...(newSlot ? { backgroundColor: '#fef08a', color: '#854d0e', padding: '1px 7px', borderRadius: 4 } : {}),
             }}
             title={newSlot ? 'NEW SLOT (mode not yet worked on this band)' : undefined}
           >{p.value}</span>

frontend/src/components/DetailsPanel.tsx

@@ -67,7 +67,39 @@ interface Props {
 
 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: 'Aircraft Scatter' },
+  { value: 'AUR', label: 'Aurora' },
+  { value: 'AUE', label: 'Aurora-E' },
+  { value: 'BS', label: 'Back Scatter' },
+  { value: 'ECH', label: 'EchoLink' },
+  { value: 'EME', label: 'Earth-Moon-Earth' },
+  { value: 'ES', label: 'Sporadic E' },
+  { value: 'FAI', label: 'Field Aligned Irregularities' },
+  { value: 'F2', label: 'F2 Reflection' },
+  { value: 'GWAVE', label: 'Ground Wave' },
+  { value: 'INTERNET', label: 'Internet-assisted' },
+  { value: 'ION', label: 'Ionoscatter' },
+  { value: 'IRL', label: 'IRLP' },
+  { value: 'LOS', label: 'Line of Sight' },
+  { value: 'MS', label: 'Meteor Scatter' },
+  { value: 'RPT', label: 'Terrestrial / atmospheric repeater' },
+  { value: 'RS', label: 'Rain Scatter' },
+  { value: 'SAT', label: 'Satellite' },
+  { value: 'TEP', label: 'Trans-Equatorial' },
+  { value: 'TR', label: 'Tropospheric Ducting' },
+];
+
+// ADIF ANT_PATH enum (Grayline, Other, Short Path, Long Path).
+const ANT_PATHS: { value: string; label: string }[] = [
+  { value: 'NONE', label: '—' },
+  { value: 'S', label: 'Short Path' },
+  { value: 'L', label: 'Long Path' },
+  { value: 'G', label: 'Grayline' },
+  { value: 'O', label: 'Other' },
+];
 
 function numOrUndef(v: string): number | undefined {
   if (v === '') return undefined;
@@ -76,9 +108,9 @@ function numOrUndef(v: string): number | undefined {
 }
 
 // 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, children }: { label: string; span?: 1 | 2 | 3 | 4 | 6; 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 === 2 && 'col-span-2', span === 3 && 'col-span-3', span === 4 && 'col-span-4', span === 6 && 'col-span-6')}>
       <Label className="mb-1">{label}</Label>
       {children}
     </div>
@@ -217,26 +249,31 @@ export function DetailsPanel({ callsign: _cs, prefix, operatorGrid, remoteGrid,
           <Field label="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>
-          <Field label="Propagation">
-            <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={p}>{p === 'NONE' ? '—' : p}</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>
-          <div className="flex items-end pb-1.5">
+          <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)} />
               Satellite mode
             </label>
           </div>
+          <Field label="Ant. path" span={2}>
+            <Select value={details.ant_path || 'NONE'} onValueChange={(v) => onChange({ ant_path: v === 'NONE' ? '' : v })}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectContent>
+                {ANT_PATHS.map((p) => <SelectItem key={p.value} value={p.value}>{p.label}</SelectItem>)}
+              </SelectContent>
+            </Select>
+          </Field>
+          <Field label="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}>{p.label}</SelectItem>)}
+              </SelectContent>
+            </Select>
+          </Field>
           <Field label="Rig" span={3}>
             <Input value={details.my_rig} placeholder="Flex 8600" onChange={(e) => onChange({ my_rig: e.target.value })} />
           </Field>

frontend/src/components/SettingsModal.tsx

@@ -11,6 +11,7 @@ import {
   GetCATSettings, SaveCATSettings,
   ListProfiles, GetActiveProfile, SaveProfile, DeleteProfile, ActivateProfile, DuplicateProfile,
   GetRotatorSettings, SaveRotatorSettings, TestRotator, RotatorPark, RotatorStop,
+  GetUltrabeamSettings, SaveUltrabeamSettings, TestUltrabeam,
   GetWinkeyerSettings, SaveWinkeyerSettings, ListSerialPorts,
   GetAudioSettings, SaveAudioSettings, ListAudioInputDevices, ListAudioOutputDevices, PickAudioFolder, TestPTT,
   GetClublogCtyInfo, SetClublogCtyEnabled, DownloadClublogCty,
@@ -193,7 +194,7 @@ const TREE: TreeNode[] = [
       { kind: 'item', label: 'CAT interface (OmniRig)',         id: 'cat' },
       { kind: 'item', label: 'Rotator (PstRotator)',            id: 'rotator' },
       { kind: 'item', label: 'CW Keyer (WinKeyer)',             id: 'winkeyer' },
-      { kind: 'item', label: 'Antenna (Ultrabeam)',             id: 'antenna', disabled: true },
+      { kind: 'item', label: 'Antenna (Ultrabeam)',             id: 'antenna' },
       { kind: 'item', label: 'Audio devices & voice keyer',     id: 'audio' },
     ],
   },
@@ -368,6 +369,13 @@ export function SettingsModal({ onClose, onSaved, initialSection }: Props) {
   const [rotatorTesting, setRotatorTesting] = useState(false);
   const [rotatorTest, setRotatorTest] = useState<{ ok: boolean; msg: string } | null>(null);
 
+  // Ultrabeam antenna (TCP) settings.
+  const [ultrabeam, setUltrabeam] = useState<{ enabled: boolean; host: string; port: number }>({
+    enabled: false, host: '', port: 23,
+  });
+  const [ubTesting, setUbTesting] = useState(false);
+  const [ubTest, setUbTest] = useState<{ ok: boolean; msg: string } | null>(null);
+
   // WinKeyer CW keyer settings + macro editor.
   type WKMac = { label: string; text: string };
   type WKSettings = {
@@ -583,6 +591,7 @@ export function SettingsModal({ onClose, onSaved, initialSection }: Props) {
         await reloadClusterServers();
         setCatCfg(c);
         setRotator(r);
+        try { setUltrabeam(await GetUltrabeamSettings() as any); } catch {}
         setBackupCfg(b as any);
         setQslDefaults(qd as any);
         setExtSvc(es as any);
@@ -751,6 +760,7 @@ export function SettingsModal({ onClose, onSaved, initialSection }: Props) {
       await SaveLookupSettings(lookup as any);
       await SaveCATSettings(catCfg as any);
       await SaveRotatorSettings(rotator as any);
+      await SaveUltrabeamSettings(ultrabeam as any);
       await SaveWinkeyerSettings(wk as any);
       await SaveAudioSettings(audioCfg as any);
       await SaveEmailSettings(emailCfg as any);
@@ -1499,6 +1509,74 @@ export function SettingsModal({ onClose, onSaved, initialSection }: Props) {
     }
   }
 
+  async function testUltrabeam() {
+    setUbTesting(true);
+    setUbTest(null);
+    try {
+      await TestUltrabeam(ultrabeam as any);
+      setUbTest({ ok: true, msg: 'Connected — the Ultrabeam responded with a status frame.' });
+    } catch (e: any) {
+      setUbTest({ ok: false, msg: String(e?.message ?? e) });
+    } finally {
+      setUbTesting(false);
+    }
+  }
+
+  function UltrabeamPanel() {
+    return (
+      <>
+        <SectionHeader
+          title="Antenna (Ultrabeam)"
+          hint="OpsLog talks to the Ultrabeam controller over TCP — typically via an RS232↔Ethernet adapter. Enter its IP address and port; the pattern direction (Normal / 180° / Bidirectional) is then controlled from the status bar."
+        />
+        <div className="space-y-4 max-w-xl">
+          <label className="flex items-center gap-2 text-sm cursor-pointer">
+            <Checkbox checked={ultrabeam.enabled} onCheckedChange={(c) => setUltrabeam((s) => ({ ...s, enabled: !!c }))} />
+            Enable Ultrabeam control
+          </label>
+          <div className="grid grid-cols-3 gap-3">
+            <div className="space-y-1 col-span-2">
+              <Label>Host / IP</Label>
+              <Input
+                value={ultrabeam.host ?? ''}
+                onChange={(e) => setUltrabeam((s) => ({ ...s, host: e.target.value }))}
+                placeholder="192.168.1.50"
+                className="font-mono"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label>TCP port</Label>
+              <Input
+                type="number" min={1} max={65535}
+                value={ultrabeam.port}
+                onChange={(e) => setUltrabeam((s) => ({ ...s, port: parseInt(e.target.value) || 23 }))}
+                className="font-mono"
+              />
+            </div>
+          </div>
+          <div className="flex items-center gap-2 pt-2">
+            <Button variant="outline" size="sm" onClick={testUltrabeam} disabled={ubTesting || !ultrabeam.host.trim()}>
+              {ubTesting ? 'Connecting…' : 'Test connection'}
+            </Button>
+          </div>
+          {ubTest && (
+            <div className={cn(
+              'text-xs rounded-md p-2.5 border',
+              ubTest.ok
+                ? 'bg-emerald-50 text-emerald-800 border-emerald-200'
+                : 'bg-destructive/10 text-destructive border-destructive/30',
+            )}>
+              {ubTest.msg}
+            </div>
+          )}
+          <p className="text-xs text-muted-foreground">
+            Once enabled, the antenna's direction control (Normal / 180° / Bidirectional) appears in the bottom status bar, next to CAT and Rotator. Changing the direction re-tunes the elements at the current frequency.
+          </p>
+        </div>
+      </>
+    );
+  }
+
   function RotatorPanel() {
     return (
       <>
@@ -2715,7 +2793,7 @@ export function SettingsModal({ onClose, onSaved, initialSection }: Props) {
                   </SelectContent>
                 </Select>
                 {audioCfg.ptt_method !== 'none' && (
-                  <Button variant="outline" size="sm" className="h-8" onClick={() => { setDvkErr(''); TestPTT().catch((e: any) => setDvkErr('PTT test: ' + String(e?.message ?? e))); }}>
+                  <Button variant="outline" size="sm" className="h-8" onClick={() => { setDvkErr(''); TestPTT(audioCfg as any).catch((e: any) => setDvkErr('PTT test: ' + String(e?.message ?? e))); }}>
                     Test PTT
                   </Button>
                 )}
@@ -2926,7 +3004,7 @@ export function SettingsModal({ onClose, onSaved, initialSection }: Props) {
     cat:            CATPanel,
     rotator:        RotatorPanel,
     winkeyer:       WinkeyerPanel,
-    antenna:        () => <ComingSoon id="antenna" icon={AntennaIcon} />,
+    antenna:        UltrabeamPanel,
     audio:          AudioPanel,
   };