feat: Added Ultrabeam/Steppir to Station Control with function to retract elements.

frontend/src/components/StationControlPanel.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Plus, Pencil, Trash2, Power, PlugZap, Loader2, Check, X, Compass, Square } from 'lucide-react';
+import { Plus, Pencil, Trash2, Power, PlugZap, Loader2, Check, X, Compass, Square, Antenna as AntennaIcon, ArrowDownToLine } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -11,6 +11,7 @@ import { RotorCompass } from '@/components/RotorCompass';
 import {
   GetStationDevices, SaveStationDevices, GetStationStatus, StationSetRelay,
   GetRotatorHeading, RotatorGoTo, RotatorStop,
+  GetUltrabeamStatus, SetUltrabeamDirection, UltrabeamRetract, MotorSetElement,
 } from '../../wailsjs/go/main/App';
 
 type RotatorProps = { centerLat?: number | null; centerLon?: number | null; bearing?: number | null };
@@ -91,6 +92,74 @@ function RotatorWidget({ hd, refetch, centerLat, centerLon, bearing, t }: Rotato
   );
 }
 
+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.
+function MotorAntennaWidget({ ant, refetch, t }: { ant: AntStatus; refetch: () => void; t: (k: string, v?: any) => string }) {
+  const [err, setErr] = useState('');
+  const [elDraft, setElDraft] = useState<Record<number, string>>({});
+  const run = (p: Promise<any>) => p.then(refetch).catch((e) => setErr(String(e?.message ?? e)));
+  const isUB = ant.type !== 'steppir';
+  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 && ant.elements.length > 0 && (
+          <div>
+            <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground mb-1">{t('station.elements')}</div>
+            <div className="space-y-1.5">
+              {ant.elements.map((mm, i) => (
+                <div key={i} className="flex items-center gap-2">
+                  <span className="text-xs w-14 shrink-0 text-muted-foreground">{t('station.element')} {i + 1}</span>
+                  <span className="text-xs font-mono w-14 tabular-nums">{mm} mm</span>
+                  <Input value={elDraft[i] ?? ''} placeholder={String(mm)} className="h-7 w-20 font-mono text-xs"
+                    onChange={(e) => setElDraft((d) => ({ ...d, [i]: e.target.value.replace(/[^0-9]/g, '') }))}
+                    onKeyDown={(e) => { if (e.key === 'Enter' && elDraft[i]) run(MotorSetElement(i, parseInt(elDraft[i], 10))); }} />
+                  <Button size="sm" variant="outline" className="h-7 px-2 text-[11px]" disabled={!elDraft[i]}
+                    onClick={() => run(MotorSetElement(i, parseInt(elDraft[i] || '0', 10)))}>{t('station.set')}</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[]>([]);
@@ -98,6 +167,7 @@ export function StationControlPanel({ centerLat, centerLon, bearing }: RotatorPr
   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 []; }
@@ -117,13 +187,16 @@ export function StationControlPanel({ centerLat, centerLon, bearing }: RotatorPr
   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();
-    const id = window.setInterval(() => { poll(); pollRot(); }, 3000);
+    poll(); pollRot(); pollAnt();
+    const id = window.setInterval(() => { poll(); pollRot(); pollAnt(); }, 3000);
     return () => window.clearInterval(id);
-  }, [poll, pollRot, devices.length]);
+  }, [poll, pollRot, pollAnt, devices.length]);
 
   const persistOrder = (next: string[]) => { setOrder(next); writeUiPref('opslog.stationOrder', JSON.stringify(next)); };
   // Reorder so `dragged` lands just before `target`.
@@ -217,13 +290,16 @@ export function StationControlPanel({ centerLat, centerLon, bearing }: RotatorPr
   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} /> });
+  }
   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;
+  const noDevices = devices.length === 0 && !rot.enabled && !ant.enabled;
 
   return (
     <div className="flex-1 min-h-0 overflow-auto p-4">