Improving all side of app

web/src/widgets/PlotWidget.tsx

@@ -90,6 +90,17 @@ export default function PlotWidget({ widget, onContextMenu, timeRange }: Props)
     // ── uPlot (timeseries) ──────────────────────────────────────────────────
     let uplot: uPlot | null = null;
 
+    // Newest sample timestamp across all series (seconds). Anchoring the live
+    // x-axis to this — rather than wall-clock Date.now() — avoids client/server
+    // clock skew clipping the latest point, and keeps the right edge on real data.
+    function latestSampleTs(): number {
+      let m = -Infinity;
+      for (const b of buffers) {
+        if (b.timestamps.length) m = Math.max(m, b.timestamps[b.timestamps.length - 1]);
+      }
+      return isFinite(m) ? m : Date.now() / 1000;
+    }
+
     // windowSec: apply rolling window for live mode; 0 = use full buffer (historical)
     function uplotData(windowSec = 0): uPlot.AlignedData {
       if (signals.length === 0) return [[]];
@@ -165,7 +176,22 @@ export default function PlotWidget({ widget, onContextMenu, timeRange }: Props)
           { stroke: '#94a3b8', grid: { stroke: '#2d3748' }, ticks: { stroke: '#475569' } },
           yAxis,
         ],
-        scales: { x: { time: true }, y: { ...scaleY, range: scaleYRange } },
+        scales: {
+          x: {
+            time: true,
+            // Live mode with a finite window: pin the x-axis to a rolling
+            // [newest − window, newest] span so a single old/outlier sample
+            // can't stretch the axis and compress real points to the right.
+            // Historical mode (timeRange) keeps uPlot's data-driven auto-range.
+            ...(!timeRange && timeWindow > 0
+              ? { range: (): [number, number] => {
+                  const r = latestSampleTs();
+                  return [r - timeWindow, r];
+                } }
+              : {}),
+          },
+          y: { ...scaleY, range: scaleYRange },
+        },
       };
     }