up

frontend/src/App.tsx

@@ -436,8 +436,18 @@ export default function App() {
     return () => window.clearTimeout(t);
   }, [error]);
   // True while the QSO recorder is capturing the current contact (set when we
-  // leave the callsign field, cleared on log/cancel). Drives the "REC" badge.
+  // leave the callsign field, cleared on log/cancel). Drives the REC badge.
   const [recording, setRecording] = useState(false);
+  // Elapsed recording time (seconds) shown next to the red dot, ticking once a
+  // second while a recording is in progress.
+  const [recSeconds, setRecSeconds] = useState(0);
+  useEffect(() => {
+    if (!recording) { setRecSeconds(0); return; }
+    const start = Date.now();
+    setRecSeconds(0);
+    const id = window.setInterval(() => setRecSeconds(Math.floor((Date.now() - start) / 1000)), 1000);
+    return () => window.clearInterval(id);
+  }, [recording]);
   const [saving, setSaving] = useState(false);
   const [filterCallsign, setFilterCallsign] = useState('');
   // Advanced filter builder (replaces the old band/mode dropdowns).
@@ -1564,8 +1574,9 @@ export default function App() {
       </Label>
       <div className="relative">
       {recording && RECORDABLE_MODES.has(mode.toUpperCase()) && (
-        <span className="absolute right-2 top-1/2 -translate-y-1/2 z-10 inline-flex items-center gap-1 text-[9px] font-semibold tracking-wider text-red-600 whitespace-nowrap pointer-events-none">
-          <span className="size-2 rounded-full bg-red-600 animate-pulse" />REC
+        <span className="absolute right-2 top-1/2 -translate-y-1/2 z-10 inline-flex items-center gap-1 text-[10px] font-semibold tabular-nums text-red-600 whitespace-nowrap pointer-events-none">
+          <span className="size-2 rounded-full bg-red-600 animate-pulse" />
+          {String(Math.floor(recSeconds / 60)).padStart(2, '0')}:{String(recSeconds % 60).padStart(2, '0')}
         </span>
       )}
       <Input