feat(frontend): add basic frontend

services/frontend/src/widgets/audioLive/ui/AudioLiveWidget.tsx

@@ -0,0 +1,74 @@
+import { useLiveStreamStore } from "../../../features/liveStream/model/liveStream.store";
+import { WsStatusBadge } from "../../../features/liveStream/ui/WsStatusBadge";
+import { AudioMeter } from "./AudioMeter";
+import { FrequencyHistoryChart } from "./FrequencyHistoryChart";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "../../../shared/ui/card";
+import { freqToNote } from "../../../entities/audioSample/lib/note";
+import { formatTimeHHMMSS, isStale } from "../../../shared/lib/time";
+
+export function AudioLiveWidget() {
+  const status = useLiveStreamStore((s) => s.status);
+  const latest = useLiveStreamStore((s) => s.latest);
+  const history60s = useLiveStreamStore((s) => s.history60s);
+  const peakHoldDb3s = useLiveStreamStore((s) => s.peakHoldDb3s);
+  const lastMessageAt = useLiveStreamStore((s) => s.lastMessageAt);
+
+  const stale = isStale(lastMessageAt, 1500);
+
+  const note = latest ? freqToNote(latest.freq_hz) : "--";
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-3">
+      <div className="lg:col-span-1">
+        <AudioMeter
+          rmsDb={latest?.rms_db ?? null}
+          peakHoldDb3s={peakHoldDb3s}
+        />
+      </div>
+
+      <div className="lg:col-span-2 grid gap-4">
+        <Card>
+          <CardHeader className="pb-2 flex flex-row items-center justify-between gap-3">
+            <CardTitle className="text-base">Live status</CardTitle>
+            <WsStatusBadge status={status} />
+          </CardHeader>
+          <CardContent className="flex flex-wrap items-center justify-between gap-4">
+            <div>
+              <div className="text-sm text-muted-foreground">Last update</div>
+              <div className="text-lg font-medium tabular-nums">
+                {lastMessageAt ? formatTimeHHMMSS(lastMessageAt) : "—"}
+                <span
+                  className={`ml-2 text-xs ${stale ? "text-rose-600" : "text-emerald-600"}`}
+                >
+                  {stale ? "stale" : "ok"}
+                </span>
+              </div>
+            </div>
+
+            <div>
+              <div className="text-sm text-muted-foreground">Frequency</div>
+              <div className="text-lg font-medium tabular-nums">
+                {latest ? `${latest.freq_hz.toFixed(0)} Hz` : "—"}{" "}
+                <span className="text-muted-foreground">({note})</span>
+              </div>
+            </div>
+
+            <div>
+              <div className="text-sm text-muted-foreground">RMS</div>
+              <div className="text-lg font-medium tabular-nums">
+                {latest ? `${latest.rms_db.toFixed(1)} dB` : "—"}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <FrequencyHistoryChart history={history60s} />
+      </div>
+    </div>
+  );
+}