frontend/src/pages/Home.tsx

@@ -109,7 +109,9 @@ const Home = () => {
     // Fetch Markers & Stream information
     useEffect(() => {
         getCurrentStream()
-            .then(setStreamStatus)
+            .then(data => {
+                setStreamStatus(data);
+            });
 
         getMarkers()
             .then(data => {
@@ -152,12 +154,12 @@ const Home = () => {
     };
 
     useEffect(() => {
-        if (streamStatus?.startDate == null) {
+        if (streamStatus?.startTime == null) {
             setElapsed('00:00:00');
             return;
         }
 
-        const startMs = new Date(streamStatus?.startDate).getTime();
+        const startMs = new Date(streamStatus?.startTime).getTime();
 
         const tick = () => {
             const diffSec = Math.floor((Date.now() - startMs) / 1000);
@@ -170,7 +172,7 @@ const Home = () => {
         tick();
         const interval = setInterval(tick, 1000);
         return () => clearInterval(interval);
-    }, [streamStatus?.startDate]);
+    }, [streamStatus?.startTime]);
 
     if (user == null) {
         return (<Landing />)
@@ -189,7 +191,6 @@ const Home = () => {
                 </Link>
             </div>
 
-            {/* Live status — always present, so the page has the same shape either way. */}
             <Card className={clsx("p-8 mb-8", isStreaming ? "bg-live-card" : "bg-card")}>
                 <div className={"flex flex-row items-center gap-2"}>
                     {isStreaming
@@ -209,7 +210,7 @@ const Home = () => {
                     <>
                         <h2 className={"font-heading text-3xl"}>
                             Session {String(streamStatus?.id).padStart(5, '0')} {' '}
-                            recording since {getTimeFromISOString(streamStatus?.startDate ?? null)}.</h2>
+                            recording since {getTimeFromISOString(streamStatus?.startTime ?? null)}.</h2>
 
                         <div className={"flex flex-row items-center gap-10 pt-4"}>
                             <div className={"flex flex-col"}>

frontend/src/pages/StreamControl.tsx

@@ -62,7 +62,7 @@ const StreamControl = () => {
     const [jobs, setJobs] = useState<TrackedJob[]>([]);
 
     const isStreaming = streamStatus?.isStreaming ?? false;
-    const startMs = streamStatus?.startDate ? stringToDate(streamStatus.startDate).getTime() : null;
+    const startMs = streamStatus?.startTime ? stringToDate(streamStatus.startTime).getTime() : null;
     const elapsedSeconds = startMs === null ? 0 : Math.max(0, (now - startMs) / 1000);
     const elapsed = formatTimecode(elapsedSeconds);
 
@@ -127,12 +127,10 @@ const StreamControl = () => {
     const offsetOf = (marker: Marker) =>
         startMs === null ? 0 : (stringToDate(marker.timestamp).getTime() - startMs) / 1000;
 
-    // Ticking two markers fills the range. Done here rather than in an effect so a
+
-    // marker poll can't stomp on timecodes the user has since typed over.
     const toggleMarker = (id: number) => {
         const next = selected.includes(id)
             ? selected.filter((current) => current !== id)
-            // Third tick replaces the older of the two.
             : selected.length < 2 ? [...selected, id] : [selected[1], id];
 
         setSelected(next);
@@ -173,8 +171,6 @@ const StreamControl = () => {
         setMarkerBusy(true);
         setMarkerError(null);
         try {
-            // Dropping first and naming later isn't possible — markers have no PATCH —
-            // so an unnamed marker keeps the timecode it landed on.
             await createMarker(markerMessage.trim() || `Marker at ${elapsed}`);
             setMarkerMessage("");
             refreshMarkers();

frontend/src/utils/types.ts

@@ -65,7 +65,7 @@ type JobResponse = {
 type StreamStatus = {
     isStreaming: boolean,
     id: number | null,
-    startDate: string | null
+    startTime: string | null
 }
 
 type StreamHistoryItem = {