fix naming + data type

ui/src/components/TimePeriodSelector.tsx

@@ -1,15 +1,15 @@
 import type { TimePeriod } from "@/services/store";
 
 type TimePeriodSelectorProps = {
-    currentPeriod: TimePeriod | "realtime";
-    onChange: (period: TimePeriod | "realtime") => void;
+    currentPeriod: TimePeriod;
+    onChange: (period: TimePeriod) => void;
 };
 
 export function TimePeriodSelector({
     currentPeriod,
     onChange,
 }: TimePeriodSelectorProps) {
-    const periods: { value: TimePeriod | "realtime"; label: string }[] = [
+    const periods: { value: TimePeriod; label: string }[] = [
         { value: "realtime", label: "Real time" },
         { value: "hour", label: "Past hour" },
         { value: "day", label: "Past day" },

ui/src/pages/agent.tsx

@@ -22,10 +22,12 @@ export function AgentPage() {
     const { agent } = useParams();
     const { status, message } = useWebsocket(`ws://localhost:3000/ws/${agent}`);
 
-    const [period, setPeriod] = useState<TimePeriod | "realtime">("all");
+    const [period, setPeriod] = useState<TimePeriod>("realtime");
     const [history, setHistory] = useState<StatusMessage[] | null>(null);
 
     useEffect(() => {
+        if (period === "realtime") return;
+
         const fetchData = async () => {
             const data = await getHistoricalData(
                 `http://localhost:3000/history/${agent}/${period}`,

ui/src/services/store.ts

@@ -1,6 +1,6 @@
 import type { StatusMessage } from "@/services/types";
 
-export type TimePeriod = "all" | "hour" | "day" | "week" | "month";
+export type TimePeriod = "realtime" | "hour" | "day" | "week" | "month" | "all";
 
 let data: StatusMessage[] = [];
 const maxRealtimePoints = 50;
@@ -13,12 +13,12 @@ export function addDataPoint(value: StatusMessage) {
     }
 }
 
-export function getRealtimeData(): StatusMessage[] {
-    return data ?? [];
+export function addDataPoint(value: StatusMessage) {
+    realtimeData.push(value);
 }
 
-export function setHistoricalData(value: StatusMessage[]) {
-    data = value;
+export function getRealtimeData(): StatusMessage[] {
+    return realtimeData ?? [];
 }
 
 export async function getHistoricalData(url: string): Promise<StatusMessage[]> {