fix: clarify dashboard timestamps and scrolling

Author: douglasmonsky

CHANGELOG.md

@@ -12,6 +12,7 @@
 - Keep call details sticky while scrolling and render timestamps as local human-readable date/time values.
 - Prefer non-review models in mixed thread model summaries, add fit-to-width model labels, and add a scroll-aware `Top` button.
 - Hide single-page dashboard pagination and keep multi-page controls compact in the toolbar.
+- Render fetched and refreshed timestamps as local human-readable date-times and make the call details scrollbar visible.
 - Add a screenshot-driven dashboard guide built from synthetic aggregate fixture data.
 - Preserve requested virtualenv Python paths during plugin install instead of resolving through interpreter symlinks.
 - Keep generated dashboards, SQLite databases, CSV exports, and raw Codex logs out of git.

docs/dashboard-guide.md

@@ -36,6 +36,7 @@ The dashboard opens in `Calls` view. This is the most direct way to inspect indi
 - Time values are shown in your browser's local date/time format while sorting still uses the logged timestamp.
 - Click a column header like `Time`, `Thread`, `Tokens`, `Cost`, or `Cache` to sort. Click the same header again to reverse the direction.
 - Hover or click a row to pin its aggregate fields in `Call Details`; on desktop, the details panel stays visible as you scroll.
+- The `Call Details` panel always reserves a visible scrollbar so long field lists are discoverable before you start scrolling.
 - Pagination appears only when the active Calls or Threads view has more than one page.
 - After you scroll down, the bottom-right `Top` button returns to the top of the dashboard.
 

src/codex_usage_tracker/dashboard.py

@@ -501,10 +501,29 @@ def _html(payload: str) -> str:
       flex: 1 1 auto;
       padding: 14px 16px;
       min-height: 280px;
-      overflow: auto;
+      overflow-x: hidden;
+      overflow-y: scroll;
+      scrollbar-gutter: stable;
+      scrollbar-width: thin;
+      scrollbar-color: #94a3b8 #eef2f8;
       color: var(--muted);
       line-height: 1.45;
     }}
+    .detail::-webkit-scrollbar {{
+      width: 10px;
+    }}
+    .detail::-webkit-scrollbar-track {{
+      background: #eef2f8;
+      border-left: 1px solid var(--line);
+    }}
+    .detail::-webkit-scrollbar-thumb {{
+      background: #94a3b8;
+      border: 2px solid #eef2f8;
+      border-radius: 999px;
+    }}
+    .detail::-webkit-scrollbar-thumb:hover {{
+      background: #64748b;
+    }}
     .detail dl {{ display: grid; grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1fr); gap: 8px 14px; margin: 0; }}
     .detail dt {{ font-weight: 720; color: var(--ink); }}
     .detail dd {{ margin: 0; overflow-wrap: anywhere; }}
@@ -907,10 +926,12 @@ def _html(payload: str) -> str:
         const sourceParts = [
           pricingSource.name || 'Pricing source',
           pricingSource.tier ? `${{pricingSource.tier}} tier` : '',
-          pricingSource.fetched_at ? `fetched ${{pricingSource.fetched_at}}` : '',
+          pricingSource.fetched_at ? `fetched ${{formatTimestamp(pricingSource.fetched_at)}}` : '',
         ].filter(Boolean);
         sourceEl.textContent = `Costs: ${{sourceParts.join(' · ')}}`;
-        sourceEl.title = 'Internal Codex labels may use marked best-guess estimates.';
+        sourceEl.title = pricingSource.fetched_at
+          ? `Fetched from ${{pricingSource.url}} at ${{formatTimestampTitle(pricingSource.fetched_at)}}. Internal Codex labels may use marked best-guess estimates.`
+          : 'Internal Codex labels may use marked best-guess estimates.';
       }} else {{
         sourceEl.textContent = pricingConfigured ? '' : 'Costs unavailable';
         sourceEl.title = pricingConfigured ? '' : 'Run codex-usage-tracker update-pricing to configure estimated costs.';
@@ -1587,11 +1608,6 @@ def _html(payload: str) -> str:
       currentPage = 1;
       render();
     }}
-    function localTime(value) {{
-      const date = value ? new Date(value) : new Date();
-      if (Number.isNaN(date.getTime())) return '';
-      return date.toLocaleTimeString([], {{ hour: 'numeric', minute: '2-digit', second: '2-digit' }});
-    }}
     function updateLiveStatus(message) {{
       liveStatusEl.textContent = message;
     }}
@@ -1636,7 +1652,7 @@ def _html(payload: str) -> str:
         const indexed = result.inserted_or_updated_events === undefined
           ? ''
           : ` Indexed ${{number.format(result.inserted_or_updated_events)}} aggregate rows from ${{number.format(result.scanned_files || 0)}} logs.`;
-        updateLiveStatus(`Updated ${{localTime(nextPayload.refreshed_at)}}. ${{loadedRowsDescription()}}.${{indexed}}`);
+        updateLiveStatus(`Updated ${{formatTimestamp(nextPayload.refreshed_at)}}. ${{loadedRowsDescription()}}.${{indexed}}`);
       }} catch (error) {{
         const message = error.message || String(error);
         updateLiveStatus(`Live refresh unavailable: ${{message}}${{manual ? '. Reload this page after regenerating a static dashboard, or run codex-usage-tracker serve-dashboard.' : ''}}`);

tests/test_store_dashboard_mcp.py

@@ -101,6 +101,10 @@ def test_dashboard_and_csv_are_aggregate_only(tmp_path: Path) -> None:
     assert "detail-section" in dashboard
     assert "time-cell" in dashboard
     assert "formatTimestamp" in dashboard
+    assert "scrollbar-gutter: stable" in dashboard
+    assert "overflow-y: scroll" in dashboard
+    assert "formatTimestamp(pricingSource.fetched_at)" in dashboard
+    assert "formatTimestamp(nextPayload.refreshed_at)" in dashboard
     assert "threadModelSummary" in dashboard
     assert "model-pill" in dashboard
     assert "Back to top" in dashboard