feat(admin): 1 s chart buckets + smooth D3 transition

- Bucket size: 1 s (was 5 s) → chart scrolls every second, feels live
- Window: 72 s visible, x-axis labels -72s / -36s / now
- D3 transition(900ms, easeLinear) on path redraw → continuous motion
- Sliding-window rate calculation unchanged (still 5 s window for rpm)

Co-Authored-By: Mira Rehfeld <noreply@anthropic.com>

apix-admin/src/main/resources/META-INF/resources/admin.js

@@ -139,8 +139,8 @@
   var FAST_INTERVAL = 1000;
   var IDLE_INTERVAL = 5000;
   var IDLE_AFTER_MS = 15000; // 15 s inactivity → idle
-  var CHART_TICK    = 5000;  // chart bucket always 5 s so x-axis labels stay correct
+  var CHART_TICK    = 5000;  // sliding-window size for rate calculation
-  var BUCKETS       = 72;    // 6 min at 5 s/bucket
+  var BUCKETS       = 72;    // 72 s visible (1 s/bucket)
 
   var rateLimit = __D.ratePerMinute || 1;
   var sid       = __D.sandboxId;
@@ -177,7 +177,7 @@
 
   svg.append('line').attr('x1', ML).attr('x2', W).attr('y1', CH).attr('y2', CH).attr('class', 'axis-line');
 
-  [{bucket: 0, label: '-6m', anchor: 'start'}, {bucket: BUCKETS / 2, label: '-3m', anchor: 'middle'}, {bucket: BUCKETS - 1, label: 'now', anchor: 'end'}]
+  [{bucket: 0, label: '-72s', anchor: 'start'}, {bucket: BUCKETS / 2, label: '-36s', anchor: 'middle'}, {bucket: BUCKETS - 1, label: 'now', anchor: 'end'}]
     .forEach(function (t) {
       svg.append('text').attr('x', xS(t.bucket)).attr('y', H - 4).attr('text-anchor', t.anchor).attr('class', 'axis-label').text(t.label);
     });
@@ -214,16 +214,17 @@
     return Math.min(Math.round(sum * (60000 / CHART_TICK)), rateLimit);
   }
 
-  // Redraw: historical buf + live bucket at the right edge
+  // Redraw: historical buf + live bucket at right edge, with smooth transition
   function redraw() {
     var view = buf.slice(1).concat([liveRpm()]);
-    path.attr('d', areaFn(view));
+    path.transition().duration(900).ease(d3.easeLinear).attr('d', areaFn(view));
   }
 
-  // Every 5 s: snapshot the current sliding-window rate into the history buffer
+  // Every 1 s: snapshot the sliding-window rate into the history buffer
+  // Smaller buckets (1 s each, 72 s total) so the chart scrolls visibly every second
   setInterval(function () {
     buf.push(liveRpm()); buf.shift();
-  }, CHART_TICK);
+  }, 1000);
 
   async function poll() {
     try {

apix-admin/src/main/resources/templates/DashboardResource/global.html

@@ -106,6 +106,6 @@ nav {
 <script>var __D = {statsJson.raw};</script>
 <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/topojson-client@3/dist/topojson-client.min.js"></script>
-<script src="/admin.js?v=10"></script>
+<script src="/admin.js?v=11"></script>
 </body>
 </html>

apix-admin/src/main/resources/templates/DashboardResource/sandbox.html

@@ -151,6 +151,6 @@ button.promote:hover { background: #2ea043; }
 <script>var __D = {dataJson.raw};</script>
 <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/topojson-client@3/dist/topojson-client.min.js"></script>
-<script src="/admin.js?v=10"></script>
+<script src="/admin.js?v=11"></script>
 </body>
 </html>