feat(frontend): add websocket send speed packet control

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

@@ -1,3 +1,4 @@
+// src/widgets/audioLive/ui/FrequencyHistoryChart.tsx
 import { memo, useMemo } from "react";
 import {
   Line,
@@ -28,15 +29,25 @@ type ChartPoint = {
 const Y_MIN = 129;
 const Y_MAX = 5500;
 
-const Y_TICKS = [130, 200, 300, 440, 660, 880, 1000, 2000, 3000, 4000, 5500];
+const Y_TICKS = [139, 200, 500, 1000, 2000, 5000, 5500];
+
+function formatHzTick(v: number): string {
+  const n = Number(v);
+  if (!Number.isFinite(n)) return "";
+  if (n >= 1000) return `${(n / 1000).toFixed(n % 1000 === 0 ? 0 : 1)}k`;
+  return `${Math.round(n)}`;
+}
 
 export const FrequencyHistoryChart = memo(function FrequencyHistoryChart({
   history = [],
 }: Props) {
   const data: ChartPoint[] = useMemo(() => {
+    if (!history?.length) return [];
     return history.map((s) => ({ timeMs: s.timeMs, freq_hz: s.freq_hz }));
   }, [history]);
 
+  const hasData = data.length > 0;
+
   return (
     <Card>
       <CardHeader className="pb-2">
@@ -44,7 +55,13 @@ export const FrequencyHistoryChart = memo(function FrequencyHistoryChart({
       </CardHeader>
 
       <CardContent>
-        <div className="h-56 w-full">
+        <div className="relative h-56 min-h-[14rem] w-full">
+          {!hasData && (
+            <div className="absolute inset-0 grid place-items-center text-sm text-muted-foreground">
+              No data yet
+            </div>
+          )}
+
           <ResponsiveContainer width="100%" height="100%">
             <LineChart
               data={data}
@@ -56,6 +73,7 @@ export const FrequencyHistoryChart = memo(function FrequencyHistoryChart({
                 domain={["dataMin", "dataMax"]}
                 tickFormatter={(v) => formatTimeHHMMSS(Number(v))}
                 tick={{ fontSize: 12 }}
+                interval="preserveStartEnd"
               />
 
               <YAxis
@@ -66,7 +84,7 @@ export const FrequencyHistoryChart = memo(function FrequencyHistoryChart({
                 allowDataOverflow
                 tick={{ fontSize: 12 }}
                 width={52}
-                tickFormatter={(v) => `${Number(v).toFixed(0)}`}
+                tickFormatter={(v) => formatHzTick(Number(v))}
               />
 
               <Tooltip