ui: delineate last counter sample in the trace

test/data/ui-screenshots/arcvm_trace.test.ts/ftrace-events/ftrace-events.png.sha256

@@ -1 +1 @@
-41027465b8fcd461e94b082d9569d23b9461c4c16d1898f1fd342c840d38eec0
+ce6dcd0f9b695f06fd0a98d551d91335215d3829cb55864e0d47e309be6229c0

test/data/ui-screenshots/debug_tracks.test.ts/debug-tracks-pivot/debug-track-pivot.png.sha256

@@ -1 +1 @@
-47ff5a7f70d4f8a3c6ae9245753e8ca2dcd5bce8f39d5aa7b3b4fe73c7281a85
+d8e57277a8c5703dcb56085b76151c22fde947a9efcaa96a026ad8b73aea6435

test/data/ui-screenshots/ftrace_tracks_and_tab.test.ts/ftrace-tracks/ftrace-events.png.sha256

@@ -1 +1 @@
-7f1ec2d10afbad76b682f9b4a65702e855ffa08909ec1ad9ee9b4d0d9e0acefa
+4b6956b277e1082e0e1494b9885d6142d083021471748db22357e15198d1271b

test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugCounterTrack-command-test/after.png.sha256

@@ -1 +1 @@
-794fcbb090bf5939b7661f15544ed9903e8b514b9aca2e4ca84f765c6acdd2fa
+43770681ed221fdd48e721e0ebf99ed7c63a72d709d9f10e3b720fc15be942b5

test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugCounterTrackWithPivot-command-test/after.png.sha256

@@ -1 +1 @@
-39653f1531912b293d96df7f77453ce4be241ea7e09ee78d9c1a04aea432bc68
+dd8a864b0072ef4d597f21a69d0bd010b6b2f717f48f24cb026479945c209689

test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugSliceTrack-command-test/after.png.sha256

@@ -1 +1 @@
-b9df4693f1a31efdfdc05ed823c2724a90752f5d90e04a7e6490048499b36a63
+4b9adde2bd116a5ea9cbb4c547be54e885082e80923f046ee35cf2599fa5e82d

test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-AddDebugSliceTrackWithPivot-command-test/after.png.sha256

@@ -1 +1 @@
-7b3614dde4ccde6489f0a36b6ddf8cd5cfb4244e28a9d189c45e5b52eef6703f
+45a4780551ec9a23bac74f0c0bafe1360613e4f054e65eb3797fea90574814b8

test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-PinTracksByRegex-command-test/after.png.sha256

@@ -1 +1 @@
-5a8384d3cc742cce96110235ea3f09273d5f0c267647c58ad60f997072546ea8
+6c5c6c153d243d4694436bbcf064d1521f6aefb23405e8ee47dcdd9decab8bf4

test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-PinTracksByRegex-with-explicit-name-filtering/after.png.sha256

@@ -1 +1 @@
-ecbd833b157602024bc0265c288dbf81c32a63e8352b0b8952e0ef5a4ef5fd1f
+6c5c6c153d243d4694436bbcf064d1521f6aefb23405e8ee47dcdd9decab8bf4

test/data/ui-screenshots/startup_commands_allowlist.test.ts/dev-perfetto-PinTracksByRegex-with-path-filtering/after.png.sha256

@@ -1 +1 @@
-1cc10ec5d90f9e9046358150fd8245c222311613e12374196b54c25400aa0546
+2426ba6a0f84c43ee6a0807d59b353332b33aecf6248d17e53be094da107fd4e

test/data/ui-screenshots/table_viewer.test.ts/Go-to-sched/filtered.png.sha256

@@ -1 +1 @@
-583345e46f14da9503e3ae425effb28a0827bd4277a1d1bb060bd678d7a74e89
+20c685c260a31068179779a1ed6ccaeae7cad7586b2db35a977a38d6f4653f53

test/data/ui-screenshots/table_viewer.test.ts/Go-to-sched/go-to.png.sha256

@@ -1 +1 @@
-31a3acff465fcbb7a2aaa8eb971da7361039abba9a96ab2fa0c448f5eb32ccd3
+d554722f640308c10a868f8e945d8a777b7bba72faf35bfbbdeef72454cdcd1b

test/data/ui-screenshots/table_viewer.test.ts/Go-to-sched/open-table.png.sha256

@@ -1 +1 @@
-48cd2f775491ba807639f47aa517498edb242defb0ee049e9809919e29f87f2f
+7f493e93afb9a13ea16111df5b0b07f605ce1e502c8a901ee3a13cf79aa7e195

test/data/ui-screenshots/table_viewer.test.ts/Go-to-sched/sorted.png.sha256

@@ -1 +1 @@
-b3d06b5a5dc2797bb49fce4e392058b2d6d371fbde630704e768d6944087e32c
+145b3e6d66429c37e90ca91536ae86bd2edf90c9e6ade08e3157c27d88f7c2ae

test/data/ui-screenshots/table_viewer.test.ts/Go-to-thread-state/filtered.png.sha256

@@ -1 +1 @@
-c1d61c28dd6b7ee0d045039727843ae41c7dd09b0af883fbc72872d8c9050b65
+68fd2292a336e1de3deea2fdbbcb6b8d28ddebd9a1b79f1ca0244634abbe0f05

test/data/ui-screenshots/table_viewer.test.ts/Go-to-thread-state/open-table.png.sha256

@@ -1 +1 @@
-767271c59e3496539ec4d28747f1205b2529af41b5c6808e6e6865a3dd6e6322
+ff8a2aa5fbad02fe8a2466c7a99f2a9cc626e5503678ac28f78f88a1bc62851a

test/data/ui-screenshots/table_viewer.test.ts/Go-to-thread-state/sorted.png.sha256

@@ -1 +1 @@
-2541cec50bb3a2f497bf514d10c1e1306c820e3356ae614a421357abda615d7d
+4eb825ec34189f4e0b87e42269ca419605614799d48a8755d1fd431fd8e92b46

test/data/ui-screenshots/track_event_description.test.ts/Ftrace-track-description/ftrace-description.png.sha256

@@ -1 +1 @@
-11783d47b6054c246d5e6ea2084fdb16ec63a9aca7446399e9878659f66abee1
+c79c6bb3aa35c79f4d1ad64c7cfcbf31c367975f3e8f26cc9dc9ec34fe1c2ca1

test/data/ui-screenshots/track_event_description.test.ts/Thread-state-description/thread-state-description.png.sha256

@@ -1 +1 @@
-9f50dd81334e7ecd4cfd4cad65eb506ee6828b83136443d1725be1028ad09049
+ac67e7daaa5414c75dc92bef6a25d612809808c08494f95af26462f8824161eb

test/data/ui-screenshots/zoom.test.ts/zoom-in/zoomed-in.png.sha256

@@ -1 +1 @@
-e47336993dde1d78539c762c2856a62071964d0cf0814a30ecba6dbb7c314d24
+6150c0baaf9e58c7ecdb2c8e5bcc73884b3f283027217ba419a5126786501d91

ui/src/components/tracks/base_counter_track.ts

@@ -814,6 +814,7 @@ export abstract class BaseCounterTrack implements TrackRenderer {
     const timestamp = Time.fromRaw(timestamps[0]);
     ctx.moveTo(Math.max(0, calculateX(timestamp)), zeroY);
     let lastDrawnY = zeroY;
+    let lastX = 0;
     for (let i = 0; i < timestamps.length; i++) {
       const timestamp = Time.fromRaw(timestamps[i]);
       const x = Math.max(0, calculateX(timestamp));
@@ -831,12 +832,45 @@ export abstract class BaseCounterTrack implements TrackRenderer {
         ctx.lineTo(x, lastY);
       }
       lastDrawnY = lastY;
+      lastX = x;
     }
-    ctx.lineTo(endPx, lastDrawnY);
-    ctx.lineTo(endPx, zeroY);
+
+    // Draw the main shape (without extension)
+    // We need to stroke before closing the path to avoid stroking the vertical
+    // line at lastX
+    ctx.lineTo(lastX, lastDrawnY);
+    ctx.stroke();
+
+    // Now close the fill without stroking
+    ctx.lineTo(lastX, zeroY);
     ctx.closePath();
     ctx.fill();
-    ctx.stroke();
+
+    // Draw fade-out from last sample to edge
+    if (endPx > lastX) {
+      // Gradient fill for fade-out (no vertical line at lastX)
+      const gradient = ctx.createLinearGradient(lastX, 0, endPx, 0);
+      gradient.addColorStop(0, `hsla(${hue}, 45%, 50%, 0.6)`);
+      gradient.addColorStop(1, `hsla(${hue}, 45%, 50%, 0)`);
+
+      ctx.fillStyle = gradient;
+      ctx.beginPath();
+      ctx.moveTo(lastX, lastDrawnY);
+      ctx.lineTo(endPx, lastDrawnY);
+      ctx.lineTo(endPx, zeroY);
+      ctx.lineTo(lastX, zeroY);
+      ctx.closePath();
+      ctx.fill();
+
+      // Dashed line
+      ctx.strokeStyle = `hsl(${hue}, 45%, 50%)`;
+      ctx.setLineDash([4, 4]);
+      ctx.beginPath();
+      ctx.moveTo(lastX, lastDrawnY);
+      ctx.lineTo(endPx, lastDrawnY);
+      ctx.stroke();
+      ctx.setLineDash([]);
+    }
 
     if (yMin < 0 && yMax > 0) {
       // Draw the Y=0 dashed line.
@@ -874,7 +908,11 @@ export abstract class BaseCounterTrack implements TrackRenderer {
       ctx.moveTo(xStart, y);
       ctx.lineTo(xEnd, y);
       ctx.lineWidth = 3;
+      if (hover.tsEnd === undefined) {
+        ctx.setLineDash([4, 4]);
+      }
       ctx.stroke();
+      ctx.setLineDash([]);
       ctx.lineWidth = 1;
 
       // Draw change marker if it would be visible.

ui/src/plugins/dev.perfetto.TraceProcessorTrack/counter_details_panel.ts

@@ -188,11 +188,12 @@ async function loadCounterDetails(
   });
   const value = row.value;
   const leftTs = Time.fromRaw(row.leftTs);
-  const rightTs = row.rightTs !== null ? Time.fromRaw(row.rightTs) : leftTs;
   const prevValue = row.prevValue !== null ? row.prevValue : value;
 
   const delta = value - prevValue;
-  const duration = rightTs - leftTs;
+  // If there's no next event, duration is -1 (no more events)
+  const duration =
+    row.rightTs !== null ? Time.fromRaw(row.rightTs) - leftTs : -1n;
   const argSetId = row.argSetId;
   const args =
     argSetId == null ? undefined : await getArgs(engine, asArgSetId(argSetId));