Upload static/index.html with huggingface_hub

static/index.html

@@ -330,13 +330,12 @@
   }
   .msg .ts {
     font-family: "JetBrains Mono", monospace;
-    font-size: 10px; color: var(--muted-3); font-variant-numeric: tabular-nums;
+    /* Match the agent name's font-size so both share identical vertical
+       metrics — alignment becomes trivial under align-items: center. ts
+       stays visually secondary via lighter weight + muted color. */
+    font-size: 11px; font-weight: 400;
+    color: var(--muted-3); font-variant-numeric: tabular-nums;
     line-height: 16px;
-    /* Optical alignment: 10px digit glyphs (no descenders) sit ~1.5px
-       higher than 11px mixed-case text in the same 16px line-box, so
-       align-items: center leaves them looking off. translateY doesn't
-       affect layout, just rendering. */
-    transform: translateY(2px);
   }
   .msg .quote-btn {
     margin-left: auto;
@@ -409,6 +408,11 @@
     color: var(--ink);
     border: 1px solid var(--border); background: #fff;
     padding: 8px 10px; border-radius: 2px;
+    /* border-box keeps the autosize math simple: scrollHeight measures
+       padding+content, height includes border, so the +2 in the JS exactly
+       compensates for the 1px top/bottom borders and content fits with no
+       phantom scrollbar. */
+    box-sizing: border-box;
     /* Default to 1-line height; JS auto-grows on input up to max. */
     min-height: 36px; max-height: 200px;
     resize: none; overflow-y: auto;
@@ -1510,7 +1514,16 @@ function renderChart(entries) {
           ticks: {
             color: '#888',
             font: { family: "'JetBrains Mono', monospace", size: 10 },
-            callback: v => new Date(v).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }),
+            callback: v => {
+              const d = new Date(v);
+              // When the chart spans more than a day, time labels lose
+              // meaning across the gap — show "May 6" instead of "09:23".
+              if ((extendedEnd - xMin) > 24 * 3600 * 1000) {
+                const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+                return `${months[d.getMonth()]} ${d.getDate()}`;
+              }
+              return d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
+            },
             maxTicksLimit: 8,
           },
         },
@@ -1796,8 +1809,12 @@ async function refreshMe() {
 }
 
 function autosizeTextarea() {
-  humanMessageInput.style.height = 'auto';
-  humanMessageInput.style.height = Math.min(humanMessageInput.scrollHeight, 200) + 'px';
+  const ta = humanMessageInput;
+  ta.style.height = 'auto';
+  // scrollHeight = content + padding (no border). With border-box, the CSS
+  // height includes the border, so add 2px (1px top + 1px bottom) so the
+  // content area is exactly tall enough — no phantom scrollbar.
+  ta.style.height = Math.min(ta.scrollHeight + 2, 200) + 'px';
 }
 humanMessageInput.addEventListener('input', () => {
   autosizeTextarea();