From 1563919841f7fceb625e667e5a2ff50b76a50da9 Mon Sep 17 00:00:00 2001
From: Paulo Lacerda <pclacerda@gmail.com>
Date: Fri, 28 Aug 2026 10:34:05 -0300
Subject: [PATCH] fix: refine Observe telemetry tables

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Copilot-Session: e685f603-d2ca-4600-9044-b3e1f8ce98ce
---
 CHANGELOG.md                                  |   13 +-
 src/agentops/agent/cockpit.py                 |   35 +-
 src/agentops/agent/observe/queries.py         |   37 +-
 src/agentops/agent/observe/service.py         |    3 +
 src/agentops/agent/observe/ui.py              | 1007 ++++++++++++-----
 src/agentops/agent/ui_theme.py                |   81 +-
 src/agentops/core/observe.py                  |    3 +
 tests/integration/test_observe_end_to_end.py  |    5 +-
 .../unit/__snapshots__/observe_overview.html  |  603 +++++++---
 tests/unit/__snapshots__/observe_styles.css   |   30 +
 tests/unit/test_cockpit.py                    |   12 +
 tests/unit/test_observe_queries.py            |   51 +-
 tests/unit/test_observe_service.py            |    6 +
 tests/unit/test_observe_ui.py                 |  149 ++-
 tests/unit/test_observe_ui_visual.py          |    7 +-
 15 files changed, 1540 insertions(+), 502 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ca46420f..70667575 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,9 +39,16 @@ This format follows [Keep a Changelog](https://keepachangelog.com/) and adheres
   explicit message.
 - **The Cockpit Observe dashboard was redesigned.** Shared design tokens now live
   in `agentops.agent.ui_theme`; Observe uses an explicit `data-theme` attribute
-  with an in-memory toggle instead of following the OS colour scheme, and the
-  Overview is organised around executive KPI cards. The Cockpit itself now renders
-  its tokens from the same module, so the two surfaces cannot drift.
+  instead of following the OS colour scheme, and the Overview is organised around
+  executive KPI cards. Cockpit and Observe now use the same dark/light control and
+  carry the non-sensitive theme preference in navigation URLs, without browser
+  storage or cookies.
+- **Observe usage tables now present telemetry consistently.** Agents, models,
+  tools, runs, and drill-through details use compact UTC timestamps, seconds for
+  durations, separate cache-read, cache-write, and reasoning-token columns,
+  contextual information icons, and totals for additive metrics. Model deployment
+  falls back to the request model when a deployment attribute is absent, while the
+  response model remains independently visible.
 - **Observability readiness only reports what it can actually verify.** Multi-turn
   coverage is treated as a dataset property and inferred solely from conversation
   rows; rubric evaluators count as ready only when they are both declared and
diff --git a/src/agentops/agent/cockpit.py b/src/agentops/agent/cockpit.py
index 6231710a..04119739 100644
--- a/src/agentops/agent/cockpit.py
+++ b/src/agentops/agent/cockpit.py
@@ -3,7 +3,7 @@
 ``agentops cockpit`` boots a tiny FastAPI server that reads the
 analysis history from ``.agentops/agent/history.jsonl`` **and** the
 evaluation history from ``.agentops/results/*/results.json``, then
-serves a single cockpit page in a dark theme. No external frontend
+serves a single cockpit page with explicit dark and light themes. No external frontend
 dependencies (sparklines are inline SVG); no Azure resource required.
 
 The server is intentionally read-only and bound to ``127.0.0.1`` by
@@ -28,7 +28,11 @@
 
 from agentops.agent.history import AnalysisRecord, load_analysis_history
 from agentops.agent.time_range import TimeRange
-from agentops.agent.ui_theme import render_theme_variables
+from agentops.agent.ui_theme import (
+    THEME_TOGGLE_SCRIPT,
+    render_theme_toggle,
+    render_theme_variables,
+)
 from agentops.core.attribution import load_attribution_config
 from agentops.core.cost import MAX_COST_COMPONENTS, MAX_COST_PERIODS, load_cost_model
 from agentops.core.governance import (
@@ -4463,6 +4467,10 @@ def render_cockpit_html(payload: Dict[str, Any]) -> str:
         workspace_display=workspace_display,
         workspace=payload["workspace"],
         icon_uri=_icon_data_uri(),
+        theme_toggle=render_theme_toggle(
+            control_id="cockpit-theme-toggle", extra_class="cockpit-theme-toggle"
+        ),
+        theme_script=THEME_TOGGLE_SCRIPT,
     )
 
 
@@ -4517,6 +4525,22 @@ def _shorten_workspace(path: str) -> str:
     display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
     color: var(--text-dim); font-size: 12px; font-weight: 500;
   }}
+  header .header-actions {{
+    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
+  }}
+  .aos-btn {{
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 6px 13px; border-radius: 8px;
+    border: 1px solid var(--border); background: var(--card);
+    color: var(--text); font: inherit; font-size: 13px; font-weight: 600;
+    cursor: pointer;
+    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+  }}
+  .aos-btn:hover {{ border-color: var(--border-strong); background: var(--card-hi); }}
+  .aos-btn:focus-visible {{
+    outline: 2px solid var(--accent); outline-offset: 2px;
+  }}
+  .aos-theme-toggle .aos-theme-icon {{ font-size: 14px; line-height: 1; }}
   header .stats-counts {{
     display: flex; align-items: center; gap: 18px;
   }}
@@ -5304,7 +5328,10 @@ def _shorten_workspace(path: str) -> str:
       <div class="subtitle" title="{workspace}">{workspace_display}</div>
     </div>
   </div>
-  <a class="observe-link" href="/observe">Open Observe</a>
+  <div class="header-actions">
+    <a class="observe-link" href="/observe" data-theme-link>Open Observe</a>
+    {theme_toggle}
+  </div>
 </header>
 
 {status_cards_section}
@@ -5316,6 +5343,8 @@ def _shorten_workspace(path: str) -> str:
 <footer><code>agentops cockpit</code></footer>
 
 <script>
+{theme_script}
+setupAgentOpsThemeToggle();
 // Auto-expand a collapsed <details> section when it is targeted via the
 // URL hash (status cards and Next-actions CTAs link to #section-... ids).
 // Details sections collapse by default now, so anchor navigation must open
diff --git a/src/agentops/agent/observe/queries.py b/src/agentops/agent/observe/queries.py
index 3d745a75..070fb299 100644
--- a/src/agentops/agent/observe/queries.py
+++ b/src/agentops/agent/observe/queries.py
@@ -152,8 +152,8 @@ def _dimension_filters(
     if filters.model:
         value = _kql_escape(filters.model)
         clauses.append(
-            '| where tostring(coalesce(Properties["gen_ai.request.model"], '
-            'Properties["gen_ai.response.model"])) '
+            '| where tostring(coalesce(Properties["gen_ai.response.model"], '
+            'Properties["gen_ai.request.model"])) '
             f"== '{value}'"
         )
     return clauses
@@ -172,8 +172,8 @@ def _agent_extend_clauses() -> list[str]:
         '| extend provider_name = tostring(Properties["gen_ai.provider.name"])',
         '| extend system = tostring(Properties["gen_ai.system"])',
         '| extend operation_name = tostring(Properties["gen_ai.operation.name"])',
-        '| extend model = tostring(coalesce(Properties["gen_ai.request.model"], '
-        'Properties["gen_ai.response.model"]))',
+        '| extend model = tostring(coalesce(Properties["gen_ai.response.model"], '
+        'Properties["gen_ai.request.model"]))',
         '| extend input_tokens = toint(Properties["gen_ai.usage.input_tokens"])',
         '| extend output_tokens = toint(Properties["gen_ai.usage.output_tokens"])',
     ]
@@ -268,6 +268,7 @@ def build_overview_query(
         _time_window_clause(filters),
         *_dimension_filters(filters, scope_source),
         *_agent_extend_clauses(),
+        *_token_class_extend_clauses(),
         '| where operation_name == "invoke_agent"',
         '| extend is_request_invocation = TelemetryTable endswith "AppRequests", '
         'is_dependency_invocation = TelemetryTable endswith "AppDependencies"',
@@ -303,6 +304,7 @@ def build_agents_query(
         _time_window_clause(filters),
         *_dimension_filters(filters, scope_source),
         *_agent_extend_clauses(),
+        *_token_class_extend_clauses(),
         '| extend is_request_invocation = TelemetryTable endswith "AppRequests" and '
         'operation_name == "invoke_agent", '
         'is_dependency_invocation = TelemetryTable endswith "AppDependencies" and '
@@ -317,6 +319,12 @@ def build_agents_query(
         "iff(is_dependency_invocation, DurationMs, real(null)), 95), "
         "input_tokens = sum(input_tokens), "
         "output_tokens = sum(output_tokens), "
+        "cache_read_tokens = sum(cache_read_tokens), "
+        "cache_read_reporting_records = countif(isnotnull(cache_read_tokens)), "
+        "cache_write_tokens = sum(cache_write_tokens), "
+        "cache_write_reporting_records = countif(isnotnull(cache_write_tokens)), "
+        "reasoning_tokens = sum(reasoning_tokens), "
+        "reasoning_reporting_records = countif(isnotnull(reasoning_tokens)), "
         "last_seen = max(TimeGenerated), "
         "agent_id = take_anyif(agent_id, isnotempty(agent_id)), "
         "agent_name = take_anyif(agent_name, isnotempty(agent_name)), "
@@ -329,9 +337,16 @@ def build_agents_query(
         "failures = iff(request_invocations > 0, request_failures, dependency_failures), "
         "p95_latency_ms = iff(request_invocations > 0, "
         "request_p95_latency_ms, dependency_p95_latency_ms)",
+        "| extend cache_read_tokens = iff(cache_read_reporting_records > 0, "
+        "cache_read_tokens, long(null)), "
+        "cache_write_tokens = iff(cache_write_reporting_records > 0, "
+        "cache_write_tokens, long(null)), "
+        "reasoning_tokens = iff(reasoning_reporting_records > 0, "
+        "reasoning_tokens, long(null))",
         "| project-away request_invocations, dependency_invocations, "
         "request_failures, dependency_failures, request_p95_latency_ms, "
-        "dependency_p95_latency_ms",
+        "dependency_p95_latency_ms, cache_read_reporting_records, "
+        "cache_write_reporting_records, reasoning_reporting_records",
         "| where invocations > 0",
     ]
     return _bounded_aggregate(aggregate_lines, order_by="invocations")
@@ -346,7 +361,8 @@ def build_models_query(
         _time_window_clause(filters),
         *_dimension_filters(filters, scope_source),
         *_agent_extend_clauses(),
-        '| extend deployment = tostring(Properties["gen_ai.request.deployment"])',
+        '| extend deployment = tostring(coalesce('
+        'Properties["gen_ai.request.deployment"], Properties["gen_ai.request.model"]))',
         *_token_class_extend_clauses(),
         "| where isnotempty(model) or isnotempty(deployment)",
         '| where operation_name !in ("invoke_agent", "execute_tool")',
@@ -597,7 +613,8 @@ def build_drilldown_query(
         _time_window_clause(filters),
         *_dimension_filters(filters, scope_source),
         *_agent_extend_clauses(),
-        '| extend deployment = tostring(Properties["gen_ai.request.deployment"]), '
+        '| extend deployment = tostring(coalesce('
+        'Properties["gen_ai.request.deployment"], Properties["gen_ai.request.model"])), '
         'tool_name = tostring(Properties["gen_ai.tool.name"]), '
         'conversation_id = tostring(Properties["gen_ai.conversation.id"]), '
         'foundry_thread_id = tostring(Properties["gen_ai.thread.id"])',
@@ -768,7 +785,8 @@ def build_department_usage_query(
         _time_window_clause(filters),
         *_dimension_filters(filters, scope_source),
         *_agent_extend_clauses(),
-        '| extend deployment = tostring(Properties["gen_ai.request.deployment"])',
+        '| extend deployment = tostring(coalesce('
+        'Properties["gen_ai.request.deployment"], Properties["gen_ai.request.model"]))',
         '| extend tool_name = tostring(Properties["gen_ai.tool.name"]), '
         'operation_name = tostring(Properties["gen_ai.operation.name"])',
         '| extend conversation_id = tostring(Properties["gen_ai.conversation.id"]), '
@@ -979,7 +997,8 @@ def build_user_usage_query(
         _time_window_clause(filters),
         *_dimension_filters(filters, scope_source),
         *_agent_extend_clauses(),
-        '| extend deployment = tostring(Properties["gen_ai.request.deployment"])',
+        '| extend deployment = tostring(coalesce('
+        'Properties["gen_ai.request.deployment"], Properties["gen_ai.request.model"]))',
         '| extend tool_name = tostring(Properties["gen_ai.tool.name"]), '
         'operation_name = tostring(Properties["gen_ai.operation.name"])',
         '| extend conversation_id = tostring(Properties["gen_ai.conversation.id"]), '
diff --git a/src/agentops/agent/observe/service.py b/src/agentops/agent/observe/service.py
index 0f5a660f..e3813f3b 100644
--- a/src/agentops/agent/observe/service.py
+++ b/src/agentops/agent/observe/service.py
@@ -504,6 +504,9 @@ def normalize_agent_row(
         p95_latency_ms=row.get("p95_latency_ms"),
         input_tokens=row.get("input_tokens"),
         output_tokens=row.get("output_tokens"),
+        cache_read_tokens=row.get("cache_read_tokens"),
+        cache_write_tokens=row.get("cache_write_tokens"),
+        reasoning_tokens=row.get("reasoning_tokens"),
     )
 
 
diff --git a/src/agentops/agent/observe/ui.py b/src/agentops/agent/observe/ui.py
index add77dbc..8ef78b69 100644
--- a/src/agentops/agent/observe/ui.py
+++ b/src/agentops/agent/observe/ui.py
@@ -307,6 +307,16 @@ def _format_iso(value: datetime) -> str:
     return value.astimezone(timezone.utc).isoformat().replace("+00:00", "Z")
 
 
+def _format_compact_timestamp(value: datetime) -> str:
+    if value.tzinfo is None:
+        value = value.replace(tzinfo=timezone.utc)
+    return value.astimezone(timezone.utc).strftime("%Y-%m-%d %H:%M:%S UTC")
+
+
+def _format_seconds(milliseconds: Any) -> str:
+    return f"{float(milliseconds) / 1000:,.3f} s"
+
+
 def _format_number(value: Any) -> str:
     if value is None:
         return "\u2014"  # em dash
@@ -332,6 +342,23 @@ def _render_badge(label: str, tone: str, *, extra_class: str = "") -> str:
     return f'<span class="{classes}">{html_escape(label)}</span>'
 
 
+def _render_info_icon(help_text: str, *, extra_class: str = "") -> str:
+    classes = f"observe-info-icon {extra_class}".strip()
+    escaped = html_escape(help_text)
+    return (
+        f'<span class="{classes}" role="img" tabindex="0" '
+        f'aria-label="{escaped}" title="{escaped}">i</span>'
+    )
+
+
+def _render_header_cell(label: str, help_text: str | None = None) -> str:
+    icon = f" {_render_info_icon(help_text)}" if help_text else ""
+    return (
+        f'<th scope="col" data-label="{html_escape(label)}">'
+        f"{html_escape(label)}{icon}</th>"
+    )
+
+
 def _bound_points(points: Sequence[Any], *, max_points: int = MAX_TREND_POINTS) -> list[Any]:
     """Downsample ``points`` so a chart never renders more than ``max_points``.
 
@@ -365,7 +392,7 @@ def render_source_label(source: Any, *, extra_class: str = "") -> str:
     else:
         kind = _get(source, "source_kind")
         source_id = _get(source, "source_id")
-        label = kind or source_id or "unknown source"
+        label = kind or source_id or "source unavailable"
     classes = f"observe-source-label {extra_class}".strip()
     return f'<span class="{classes}">Source: {html_escape(label)}</span>'
 
@@ -384,32 +411,40 @@ def render_refreshed_at(value: Any, *, label: str = "Refreshed") -> str:
             f"{html_escape(label)}: not yet refreshed</time>"
         )
     iso = _format_iso(moment)
+    compact = _format_compact_timestamp(moment)
     return (
-        f'<time class="observe-refreshed-at" datetime="{html_escape(iso)}">'
-        f"{html_escape(label)}: {html_escape(iso)}</time>"
+        f'<time class="observe-refreshed-at" datetime="{html_escape(iso)}" '
+        f'title="{html_escape(iso)}">'
+        f"{html_escape(label)}: {html_escape(compact)}</time>"
     )
 
 
 def render_last_seen(value: Any) -> str:
-    """Render a "Last seen" marker with an explicit non-lifecycle disclaimer.
-
-    "Last seen" reflects only the most recent *observed telemetry*; it is
-    explicitly not an agent lifecycle/registration status, so every use of
-    it repeats that disclaimer (FR-034 / quickstart wording).
-    """
+    """Render the most recent observed-telemetry timestamp compactly."""
     moment = _coerce_datetime(value)
-    disclaimer = "Last seen reflects observed telemetry only, not agent lifecycle status."
     if moment is None:
         return (
             '<span class="observe-last-seen observe-last-seen-missing metric-missing">'
-            f"Last seen: not reported"
-            f'<span class="observe-hint"> ({html_escape(disclaimer)})</span></span>'
+            "\u2014</span>"
         )
     iso = _format_iso(moment)
+    compact = _format_compact_timestamp(moment)
     return (
         '<span class="observe-last-seen">'
-        f'Last seen: <time datetime="{html_escape(iso)}">{html_escape(iso)}</time>'
-        f'<span class="observe-hint"> ({html_escape(disclaimer)})</span></span>'
+        f'<time datetime="{html_escape(iso)}" title="{html_escape(iso)}">'
+        f"{html_escape(compact)}</time></span>"
+    )
+
+
+def _render_timestamp(value: Any) -> str:
+    moment = _coerce_datetime(value)
+    if moment is None:
+        return '<span class="observe-metric metric-missing">\u2014</span>'
+    iso = _format_iso(moment)
+    compact = _format_compact_timestamp(moment)
+    return (
+        f'<time datetime="{html_escape(iso)}" title="{html_escape(iso)}">'
+        f"{html_escape(compact)}</time>"
     )
 
 
@@ -459,18 +494,13 @@ def _render_token_totals(
     *,
     missing_text: str = "Not reported",
 ) -> str:
-    """Render token totals with the required "observed usage" disclaimer.
-
-    Token counts are observed usage signals, not billing data; every render
-    of a token total must say so explicitly (FR-036).
-    """
+    """Render compact input/output token totals."""
     input_html = _render_maybe_missing(input_tokens, missing_text=missing_text)
     output_html = _render_maybe_missing(output_tokens, missing_text=missing_text)
     return (
         '<span class="observe-token-totals">'
         f'<span class="observe-token-in">In: {input_html}</span> '
         f'<span class="observe-token-out">Out: {output_html}</span>'
-        '<span class="observe-hint"> (observed usage, not billing data)</span>'
         "</span>"
     )
 
@@ -481,6 +511,30 @@ def _observed_token_total(input_tokens: Any, output_tokens: Any) -> int | float
     return (input_tokens or 0) + (output_tokens or 0)
 
 
+def _sum_reported(rows: Sequence[Any], field: str) -> int | float | None:
+    values = [_get(row, field) for row in rows if _get(row, field) is not None]
+    return sum(values) if values else None
+
+
+def _render_seconds(value: Any, *, missing_text: str = "\u2014") -> str:
+    return _render_maybe_missing(
+        value,
+        formatter=_format_seconds,
+        missing_text=missing_text,
+    )
+
+
+def _render_totals_footer(cells: Sequence[str]) -> str:
+    if not cells:
+        return ""
+    return (
+        '<tfoot><tr class="observe-totals-row">'
+        f'<th scope="row">{cells[0]}</th>'
+        f"{''.join(f'<td>{cell}</td>' for cell in cells[1:])}"
+        "</tr></tfoot>"
+    )
+
+
 def _render_additional_token_classes(entry: Any) -> str:
     additional = _get(entry, "additional_token_classes", {}) or {}
     values = [
@@ -495,9 +549,13 @@ def _render_additional_token_classes(entry: Any) -> str:
         )
     if _get(entry, "token_classes_partial", False):
         values.append(
-            '<span class="observe-token-classes-partial">Partial class coverage</span>'
+            _render_info_icon(
+                "Some telemetry records omitted one or more token-class attributes; "
+                "totals include the values that were reported.",
+                extra_class="observe-token-classes-partial",
+            )
         )
-    return "".join(values) if values else _render_maybe_missing(None)
+    return "".join(values) if values else _render_maybe_missing(None, missing_text="\u2014")
 
 
 def _render_model_token_usage(entry: Any) -> str:
@@ -515,10 +573,10 @@ def _render_model_token_usage(entry: Any) -> str:
     )
     partial = ""
     if _get(entry, "token_classes_partial", False):
-        partial = (
-            '<span class="observe-token-classes-partial">'
-            "Partial class coverage"
-            "</span>"
+        partial = _render_info_icon(
+            "Some telemetry records omitted one or more token-class attributes; "
+            "totals include the values that were reported.",
+            extra_class="observe-token-classes-partial",
         )
     additional = _get(entry, "additional_token_classes", {}) or {}
     additional_html = "".join(
@@ -1043,14 +1101,21 @@ def _render_source_kind_badge(source_kind: Any) -> str:
         "copilot_studio": "warn",
         "unknown": "muted",
     }.get(kind, "muted")
-    label = str(kind).replace("_", " ").title()
-    return _render_badge(label, tone, extra_class="observe-source-kind-badge")
+    label = "Unclassified" if kind == "unknown" else str(kind).replace("_", " ").title()
+    badge = _render_badge(label, tone, extra_class="observe-source-kind-badge")
+    if kind != "unknown":
+        return badge
+    return (
+        '<span class="observe-inline-help" '
+        'title="Source kind could not be classified from the available telemetry attributes.">'
+        f"{badge}</span>"
+    )
 
 
 def _render_identity_availability(agent_id: Any) -> str:
     if agent_id:
         return _render_badge("Identity available", "ok", extra_class="observe-identity-badge")
-    return _render_badge("Identity not reported", "muted", extra_class="observe-identity-badge")
+    return _render_badge("Identity unavailable", "muted", extra_class="observe-identity-badge")
 
 
 def render_agents_table(
@@ -1072,42 +1137,80 @@ def render_agents_table(
         )
     rows = []
     for agent in agents:
-        name = _get(agent, "agent_name") or _get(agent, "agent_id") or "Not reported"
+        name = _get(agent, "agent_name") or _get(agent, "agent_id") or "\u2014"
+        input_tokens = _get(agent, "input_tokens")
+        output_tokens = _get(agent, "output_tokens")
         rows.append(
             "<tr>"
             f"<td>{html_escape(name)} "
             f"{_render_identity_availability(_get(agent, 'agent_id'))}</td>"
             f'<td title="{html_escape(_get(agent, "source_id") or "")}">'
             f"{_render_source_kind_badge(_get(agent, 'source_kind'))}</td>"
-            f"<td>{html_escape(_get(agent, 'model') or 'Not reported')}</td>"
+            f"<td>{html_escape(_get(agent, 'model') or '—')}</td>"
             f"<td>{render_last_seen(_get(agent, 'last_seen'))}</td>"
-            f"<td>{_render_maybe_missing(_get(agent, 'invocations'))}</td>"
+            f"<td>{_render_maybe_missing(_get(agent, 'invocations'), missing_text='—')}</td>"
             f"<td>{_render_failure_rate(_get(agent, 'invocations'), _get(agent, 'failures'))}</td>"
-            f"<td>{_render_maybe_missing(_get(agent, 'p95_latency_ms'), suffix=' ms')}</td>"
-            f"<td>{_render_maybe_missing(_get(agent, 'input_tokens'))}</td>"
-            f"<td>{_render_maybe_missing(_get(agent, 'output_tokens'))}</td>"
-            f"<td>{_render_maybe_missing(_observed_token_total(_get(agent, 'input_tokens'), _get(agent, 'output_tokens')))}</td>"
+            f"<td>{_render_seconds(_get(agent, 'p95_latency_ms'))}</td>"
+            f"<td>{_render_maybe_missing(input_tokens, missing_text='—')}</td>"
+            f"<td>{_render_maybe_missing(output_tokens, missing_text='—')}</td>"
+            f"<td>{_render_maybe_missing(_observed_token_total(input_tokens, output_tokens), missing_text='—')}</td>"
+            f"<td>{_render_maybe_missing(_get(agent, 'cache_read_tokens'), missing_text='—')}</td>"
+            f"<td>{_render_maybe_missing(_get(agent, 'cache_write_tokens'), missing_text='—')}</td>"
+            f"<td>{_render_maybe_missing(_get(agent, 'reasoning_tokens'), missing_text='—')}</td>"
             "</tr>"
         )
+    total_invocations = _sum_reported(agents, "invocations")
+    total_failures = _sum_reported(agents, "failures")
+    total_input = _sum_reported(agents, "input_tokens")
+    total_output = _sum_reported(agents, "output_tokens")
+    footer = _render_totals_footer(
+        (
+            f'Totals {_render_info_icon("Totals cover the rows currently displayed.")}',
+            "\u2014",
+            "\u2014",
+            "\u2014",
+            _render_maybe_missing(total_invocations, missing_text="\u2014"),
+            _render_failure_rate(total_invocations, total_failures),
+            "\u2014",
+            _render_maybe_missing(total_input, missing_text="\u2014"),
+            _render_maybe_missing(total_output, missing_text="\u2014"),
+            _render_maybe_missing(
+                _observed_token_total(total_input, total_output), missing_text="\u2014"
+            ),
+            _render_maybe_missing(
+                _sum_reported(agents, "cache_read_tokens"), missing_text="\u2014"
+            ),
+            _render_maybe_missing(
+                _sum_reported(agents, "cache_write_tokens"), missing_text="\u2014"
+            ),
+            _render_maybe_missing(
+                _sum_reported(agents, "reasoning_tokens"), missing_text="\u2014"
+            ),
+        )
+    )
+    token_help = "Observed token usage from telemetry; this is not billing data."
     return f"""
-<p class="observe-hint">Token columns show observed usage, not billing data.</p>
 <table class="observe-agents-table" aria-label="Agents observed in the selected range">
   <caption class="visually-hidden">Agents observed in the selected range</caption>
   <thead>
     <tr>
-      <th scope="col">Agent</th>
-      <th scope="col">Source</th>
-      <th scope="col">Model</th>
-      <th scope="col">Last seen</th>
-      <th scope="col">Invocations</th>
-      <th scope="col">Failure rate</th>
-      <th scope="col">p95 latency</th>
-      <th scope="col">Input tokens</th>
-      <th scope="col">Output tokens</th>
-      <th scope="col">Total tokens</th>
+      {_render_header_cell("Agent")}
+      {_render_header_cell("Source")}
+      {_render_header_cell("Model", "Model identifier reported by response telemetry.")}
+      {_render_header_cell("Last seen", "Most recent telemetry in the selected range; not agent lifecycle status.")}
+      {_render_header_cell("Invocations")}
+      {_render_header_cell("Failure rate", "Failures divided by invocations.")}
+      {_render_header_cell("p95 latency", "95% of observed invocations completed in this time or less.")}
+      {_render_header_cell("Input tokens", token_help)}
+      {_render_header_cell("Output tokens", token_help)}
+      {_render_header_cell("Total tokens", token_help)}
+      {_render_header_cell("Cache read", token_help)}
+      {_render_header_cell("Cache write", token_help)}
+      {_render_header_cell("Reasoning", token_help)}
     </tr>
   </thead>
   <tbody>{"".join(rows)}</tbody>
+  {footer}
 </table>
 """.strip()
 
@@ -1727,7 +1830,7 @@ def _render_cost_components(components: Sequence[Any]) -> str:
         rows_shown = _get(component, "rows_shown")
         rows_total = _get(component, "rows_total")
         if rows_total is None:
-            row_count = f"{rows_shown if rows_shown is not None else 'Not reported'} / total unknown"
+            row_count = str(rows_shown) if rows_shown is not None else "\u2014"
         else:
             omitted = max(int(rows_total) - int(rows_shown or 0), 0)
             row_count = f"{rows_shown if rows_shown is not None else 'Not reported'} / {rows_total}"
@@ -1966,9 +2069,13 @@ def _render_cost_bounds(bounds: Any) -> str:
     shown = _get(bounds, "rows_shown")
     total = _get(bounds, "rows_total_in_scope")
     if total is None:
-        text = f"Showing {shown if shown is not None else 'an unknown number of'} rows; total unknown."
+        text = f"Showing {shown} rows." if shown is not None else "Showing available rows."
     else:
-        text = f"Showing {shown if shown is not None else 'an unknown number of'} of {total} rows in scope"
+        text = (
+            f"Showing {shown} of {total} rows in scope"
+            if shown is not None
+            else f"{total} rows in scope"
+        )
         text += "; results are truncated." if _get(bounds, "truncated") else "."
     return f'<p class="observe-hint observe-cost-bounds-notice">{html_escape(text)}</p>'
 
@@ -2018,7 +2125,7 @@ def _render_bounds_notice(bounds: Any, *, rows_shown: int) -> str:
     """Render bounded-result scope without inventing an unavailable total."""
     total = _get(bounds, "rows_total_in_scope") if bounds is not None else None
     if total is None:
-        text = f"Showing {rows_shown} rows; total unknown."
+        text = f"Showing {rows_shown} rows."
     else:
         text = f"Showing {rows_shown} of {total} rows in scope."
     return f'<p class="observe-hint observe-bounds-notice">{html_escape(text)}</p>'
@@ -2040,36 +2147,56 @@ def render_tools_table(
         )
     rows = []
     for tool in tools:
-        agent = _get(tool, "agent_name") or _get(tool, "agent_id") or _get(tool, "agent_key") or "Not reported"
+        agent = (
+            _get(tool, "agent_name")
+            or _get(tool, "agent_id")
+            or _get(tool, "agent_key")
+            or "\u2014"
+        )
         rows.append(
             "<tr>"
-            f"<td>{html_escape(_get(tool, 'tool_name') or 'Not reported')}</td>"
+            f"<td>{html_escape(_get(tool, 'tool_name') or '—')}</td>"
             f"<td>{html_escape(agent)}</td>"
-            f"<td>{html_escape(_get(tool, 'source_id') or 'Not reported')}</td>"
+            f"<td>{html_escape(_get(tool, 'source_id') or '—')}</td>"
             f"<td>{_render_source_kind_badge(_get(tool, 'source_kind'))}</td>"
             f"<td>{render_last_seen(_get(tool, 'last_seen'))}</td>"
-            f"<td>{_render_maybe_missing(_get(tool, 'invocations'))}</td>"
-            f"<td>{_render_maybe_missing(_get(tool, 'failures'))}</td>"
-            f"<td>{_render_maybe_missing(_get(tool, 'p95_latency_ms'), suffix=' ms', missing_text='Not measured')}</td>"
+            f"<td>{_render_maybe_missing(_get(tool, 'invocations'), missing_text='—')}</td>"
+            f"<td>{_render_maybe_missing(_get(tool, 'failures'), missing_text='—')}</td>"
+            f"<td>{_render_seconds(_get(tool, 'p95_latency_ms'))}</td>"
             "</tr>"
         )
+    total_invocations = _sum_reported(tools, "invocations")
+    total_failures = _sum_reported(tools, "failures")
+    footer = _render_totals_footer(
+        (
+            f'Totals {_render_info_icon("Totals cover the rows currently displayed.")}',
+            "\u2014",
+            "\u2014",
+            "\u2014",
+            "\u2014",
+            _render_maybe_missing(total_invocations, missing_text="\u2014"),
+            _render_maybe_missing(total_failures, missing_text="\u2014"),
+            "\u2014",
+        )
+    )
     return f"""
 {notice}
 <table class="observe-tools-table" aria-label="Tools observed in the selected range">
   <caption class="visually-hidden">Tools observed in the selected range</caption>
   <thead>
     <tr>
-      <th scope="col">Tool</th>
-      <th scope="col">Agent</th>
-      <th scope="col">Source</th>
-      <th scope="col">Runtime</th>
-      <th scope="col">Last seen</th>
-      <th scope="col">Invocations</th>
-      <th scope="col">Failures</th>
-      <th scope="col">p95 latency</th>
+      {_render_header_cell("Tool")}
+      {_render_header_cell("Agent")}
+      {_render_header_cell("Source")}
+      {_render_header_cell("Runtime")}
+      {_render_header_cell("Last seen", "Most recent telemetry in the selected range.")}
+      {_render_header_cell("Invocations")}
+      {_render_header_cell("Failures")}
+      {_render_header_cell("p95 latency", "95% of observed tool invocations completed in this time or less.")}
     </tr>
   </thead>
   <tbody>{"".join(rows)}</tbody>
+  {footer}
 </table>
 """.strip()
 
@@ -2090,48 +2217,93 @@ def render_runs_table(
         )
     rows = []
     for run in runs:
-        agent = _get(run, "agent_name") or _get(run, "agent_id") or _get(run, "agent_key") or "Not reported"
-        started_at = _coerce_datetime(_get(run, "started_at"))
+        agent = (
+            _get(run, "agent_name")
+            or _get(run, "agent_id")
+            or _get(run, "agent_key")
+            or "\u2014"
+        )
+        input_tokens = _get(run, "input_tokens")
+        output_tokens = _get(run, "output_tokens")
         rows.append(
             "<tr>"
-            f"<td>{html_escape(_get(run, 'run_key') or 'Not reported')}</td>"
-            f"<td>{html_escape(_get(run, 'run_key_kind') or 'Not reported')}</td>"
+            f"<td>{html_escape(_get(run, 'run_key') or '—')}</td>"
+            f"<td>{html_escape(_get(run, 'run_key_kind') or '—')}</td>"
             f"<td>{html_escape(agent)}</td>"
-            f"<td>{html_escape(_get(run, 'source_id') or 'Not reported')}</td>"
+            f"<td>{html_escape(_get(run, 'source_id') or '—')}</td>"
             f"<td>{_render_source_kind_badge(_get(run, 'source_kind'))}</td>"
-            f"<td>{html_escape(_format_iso(started_at) if started_at else 'Not reported')}</td>"
-            f"<td>{_render_maybe_missing(_get(run, 'duration_ms'), suffix=' ms')}</td>"
-            f"<td>{html_escape(_get(run, 'status') or 'Not reported')}</td>"
-            f"<td>{_render_maybe_missing(_get(run, 'turns'))}</td>"
-            f"<td>{_render_maybe_missing(_get(run, 'tool_invocations'))}</td>"
-            f"<td>{_render_maybe_missing(_get(run, 'input_tokens'), missing_text='Not available')}</td>"
-            f"<td>{_render_maybe_missing(_get(run, 'output_tokens'), missing_text='Not available')}</td>"
-            f"<td>{_render_maybe_missing(_observed_token_total(_get(run, 'input_tokens'), _get(run, 'output_tokens')), missing_text='Not available')}</td>"
+            f"<td>{_render_timestamp(_get(run, 'started_at'))}</td>"
+            f"<td>{_render_seconds(_get(run, 'duration_ms'))}</td>"
+            f"<td>{html_escape(_get(run, 'status') or '—')}</td>"
+            f"<td>{_render_maybe_missing(_get(run, 'turns'), missing_text='—')}</td>"
+            f"<td>{_render_maybe_missing(_get(run, 'tool_invocations'), missing_text='—')}</td>"
+            f"<td>{_render_maybe_missing(input_tokens, missing_text='—')}</td>"
+            f"<td>{_render_maybe_missing(output_tokens, missing_text='—')}</td>"
+            f"<td>{_render_maybe_missing(_observed_token_total(input_tokens, output_tokens), missing_text='—')}</td>"
+            f"<td>{_render_maybe_missing(_get(run, 'cache_read_tokens'), missing_text='—')}</td>"
+            f"<td>{_render_maybe_missing(_get(run, 'cache_write_tokens'), missing_text='—')}</td>"
+            f"<td>{_render_maybe_missing(_get(run, 'reasoning_tokens'), missing_text='—')}</td>"
             "</tr>"
         )
+    total_input = _sum_reported(runs, "input_tokens")
+    total_output = _sum_reported(runs, "output_tokens")
+    footer = _render_totals_footer(
+        (
+            f'Totals {_render_info_icon("Totals cover the rows currently displayed.")}',
+            "\u2014",
+            "\u2014",
+            "\u2014",
+            "\u2014",
+            "\u2014",
+            _render_seconds(_sum_reported(runs, "duration_ms")),
+            "\u2014",
+            _render_maybe_missing(_sum_reported(runs, "turns"), missing_text="\u2014"),
+            _render_maybe_missing(
+                _sum_reported(runs, "tool_invocations"), missing_text="\u2014"
+            ),
+            _render_maybe_missing(total_input, missing_text="\u2014"),
+            _render_maybe_missing(total_output, missing_text="\u2014"),
+            _render_maybe_missing(
+                _observed_token_total(total_input, total_output), missing_text="\u2014"
+            ),
+            _render_maybe_missing(
+                _sum_reported(runs, "cache_read_tokens"), missing_text="\u2014"
+            ),
+            _render_maybe_missing(
+                _sum_reported(runs, "cache_write_tokens"), missing_text="\u2014"
+            ),
+            _render_maybe_missing(
+                _sum_reported(runs, "reasoning_tokens"), missing_text="\u2014"
+            ),
+        )
+    )
+    token_help = "Observed token usage from telemetry; this is not billing data."
     return f"""
 {notice}
-<p class="observe-hint">Start, duration, and turns describe activity within the selected range. Token columns show observed usage, not billing data.</p>
 <table class="observe-runs-table" aria-label="Runs observed in the selected range">
   <caption class="visually-hidden">Runs observed in the selected range; start, duration, and turns are range-scoped.</caption>
   <thead>
     <tr>
-      <th scope="col">Run key</th>
-      <th scope="col">Correlation</th>
-      <th scope="col">Agent</th>
-      <th scope="col">Source</th>
-      <th scope="col">Runtime</th>
-      <th scope="col">Started in range</th>
-      <th scope="col">Duration in range</th>
-      <th scope="col">Status</th>
-      <th scope="col">Turns in range</th>
-      <th scope="col">Tool invocations</th>
-      <th scope="col">Input tokens</th>
-      <th scope="col">Output tokens</th>
-      <th scope="col">Total tokens</th>
+      {_render_header_cell("Run key")}
+      {_render_header_cell("Correlation", "Telemetry key used to group this run.")}
+      {_render_header_cell("Agent")}
+      {_render_header_cell("Source")}
+      {_render_header_cell("Runtime")}
+      {_render_header_cell("Started in range", "First observed activity within the selected range.")}
+      {_render_header_cell("Duration in range", "Elapsed time between first and last observed activity in the selected range.")}
+      {_render_header_cell("Status")}
+      {_render_header_cell("Turns in range", "Turns observed within the selected range.")}
+      {_render_header_cell("Tool invocations")}
+      {_render_header_cell("Input tokens", token_help)}
+      {_render_header_cell("Output tokens", token_help)}
+      {_render_header_cell("Total tokens", token_help)}
+      {_render_header_cell("Cache read", token_help)}
+      {_render_header_cell("Cache write", token_help)}
+      {_render_header_cell("Reasoning", token_help)}
     </tr>
   </thead>
   <tbody>{"".join(rows)}</tbody>
+  {footer}
 </table>
 """.strip()
 
@@ -2159,48 +2331,80 @@ def render_models_usage_table(
         )
     rows = []
     for entry in usage:
-        model = _get(entry, "model") or _get(entry, "deployment") or "Not reported"
+        model = _get(entry, "model") or "\u2014"
+        input_tokens = _get(entry, "input_tokens")
+        output_tokens = _get(entry, "output_tokens")
         rows.append(
             "<tr>"
             f"<td>{html_escape(model)}</td>"
-            f"<td>{html_escape(_get(entry, 'deployment') or 'Not reported')}</td>"
-            f"<td>{_render_maybe_missing(_get(entry, 'requests'))}</td>"
+            f"<td>{html_escape(_get(entry, 'deployment') or '—')}</td>"
+            f"<td>{_render_maybe_missing(_get(entry, 'requests'), missing_text='—')}</td>"
             f"<td>{_render_failure_rate(_get(entry, 'requests'), _get(entry, 'failures'))}</td>"
-            f"<td>{_render_maybe_missing(_get(entry, 'p95_latency_ms'), suffix=' ms')}</td>"
-            f"<td>{_render_maybe_missing(_get(entry, 'input_tokens'))}</td>"
-            f"<td>{_render_maybe_missing(_get(entry, 'output_tokens'))}</td>"
-            f"<td>{_render_maybe_missing(_observed_token_total(_get(entry, 'input_tokens'), _get(entry, 'output_tokens')))}</td>"
-            f"<td>{_render_maybe_missing(_get(entry, 'cache_read_tokens'))}</td>"
-            f"<td>{_render_maybe_missing(_get(entry, 'cache_write_tokens'))}</td>"
-            f"<td>{_render_maybe_missing(_get(entry, 'reasoning_tokens'))}</td>"
+            f"<td>{_render_seconds(_get(entry, 'p95_latency_ms'))}</td>"
+            f"<td>{_render_maybe_missing(input_tokens, missing_text='—')}</td>"
+            f"<td>{_render_maybe_missing(output_tokens, missing_text='—')}</td>"
+            f"<td>{_render_maybe_missing(_observed_token_total(input_tokens, output_tokens), missing_text='—')}</td>"
+            f"<td>{_render_maybe_missing(_get(entry, 'cache_read_tokens'), missing_text='—')}</td>"
+            f"<td>{_render_maybe_missing(_get(entry, 'cache_write_tokens'), missing_text='—')}</td>"
+            f"<td>{_render_maybe_missing(_get(entry, 'reasoning_tokens'), missing_text='—')}</td>"
             f"<td>{_render_additional_token_classes(entry)}</td>"
             f"<td>{render_last_seen(_get(entry, 'last_seen'))}</td>"
             "</tr>"
         )
+    total_requests = _sum_reported(usage, "requests")
+    total_failures = _sum_reported(usage, "failures")
+    total_input = _sum_reported(usage, "input_tokens")
+    total_output = _sum_reported(usage, "output_tokens")
+    footer = _render_totals_footer(
+        (
+            f'Totals {_render_info_icon("Totals cover the rows currently displayed.")}',
+            "\u2014",
+            _render_maybe_missing(total_requests, missing_text="\u2014"),
+            _render_failure_rate(total_requests, total_failures),
+            "\u2014",
+            _render_maybe_missing(total_input, missing_text="\u2014"),
+            _render_maybe_missing(total_output, missing_text="\u2014"),
+            _render_maybe_missing(
+                _observed_token_total(total_input, total_output), missing_text="\u2014"
+            ),
+            _render_maybe_missing(
+                _sum_reported(usage, "cache_read_tokens"), missing_text="\u2014"
+            ),
+            _render_maybe_missing(
+                _sum_reported(usage, "cache_write_tokens"), missing_text="\u2014"
+            ),
+            _render_maybe_missing(
+                _sum_reported(usage, "reasoning_tokens"), missing_text="\u2014"
+            ),
+            "\u2014",
+            "\u2014",
+        )
+    )
+    token_help = "Observed token usage from telemetry; this is not billing data."
     return f"""
-<p class="observe-hint">Token columns show observed usage, not billing data.</p>
 <table class="observe-usage-table" aria-label="Model usage observed in the selected range">
   <caption class="visually-hidden">
     Model usage observed in the selected range. Token counts are observed usage, not billing data.
   </caption>
   <thead>
     <tr>
-      <th scope="col">Model</th>
-      <th scope="col">Deployment</th>
-      <th scope="col">Requests</th>
-      <th scope="col">Failure rate</th>
-      <th scope="col">p95 latency</th>
-      <th scope="col">Input tokens</th>
-      <th scope="col">Output tokens</th>
-      <th scope="col">Total tokens</th>
-      <th scope="col">Cache read</th>
-      <th scope="col">Cache write</th>
-      <th scope="col">Reasoning</th>
-      <th scope="col">Other token classes</th>
-      <th scope="col">Last seen</th>
+      {_render_header_cell("Model", "Model identifier reported by response telemetry.")}
+      {_render_header_cell("Deployment", "Requested Azure OpenAI deployment reported by telemetry.")}
+      {_render_header_cell("Requests")}
+      {_render_header_cell("Failure rate", "Failures divided by requests.")}
+      {_render_header_cell("p95 latency", "95% of observed model requests completed in this time or less.")}
+      {_render_header_cell("Input tokens", token_help)}
+      {_render_header_cell("Output tokens", token_help)}
+      {_render_header_cell("Total tokens", token_help)}
+      {_render_header_cell("Cache read", f"Tokens served from the prompt cache. {token_help}")}
+      {_render_header_cell("Cache write", f"Tokens written to the prompt cache. {token_help}")}
+      {_render_header_cell("Reasoning", f"Reasoning tokens reported by the model provider. {token_help}")}
+      {_render_header_cell("Other token classes", "Additional gen_ai.usage.* classes. A row information icon means some telemetry records omitted token-class attributes.")}
+      {_render_header_cell("Last seen", "Most recent telemetry in the selected range.")}
     </tr>
   </thead>
   <tbody>{"".join(rows)}</tbody>
+  {footer}
 </table>
 """.strip()
 
@@ -2245,8 +2449,8 @@ def render_diagnostics_banner(diagnostics: Mapping[str, Any]) -> str:
     <div><dt>Successful</dt><dd>{_render_maybe_missing(successful)}</dd></div>
     <div><dt>Partial</dt><dd>{_render_maybe_missing(partial)}</dd></div>
     <div><dt>Failed</dt><dd>{_render_maybe_missing(failed)}</dd></div>
-    <div><dt>Query duration</dt><dd>{_render_maybe_missing(duration_ms, suffix=' ms')}</dd></div>
-    <div><dt>Cache</dt><dd>{html_escape(cache_status or 'Not reported')}</dd></div>
+    <div><dt>Query duration</dt><dd>{_render_seconds(duration_ms)}</dd></div>
+    <div><dt>Cache</dt><dd>{html_escape(cache_status or '—')}</dd></div>
   </dl>
   {render_refreshed_at(refreshed_at)}
 </div>
@@ -2816,7 +3020,37 @@ def render_trace_detail_shell(
   outline: 2px solid var(--observe-accent);
   outline-offset: 3px;
 }
+.observe-info-icon {
+  align-items: center;
+  border: 1px solid currentColor;
+  border-radius: 50%;
+  color: var(--observe-muted);
+  cursor: help;
+  display: inline-flex;
+  font-size: 9px;
+  font-style: normal;
+  font-weight: 800;
+  height: 14px;
+  justify-content: center;
+  line-height: 1;
+  margin-left: 5px;
+  text-transform: none;
+  vertical-align: middle;
+  width: 14px;
+}
+.observe-info-icon:focus-visible {
+  color: var(--observe-accent);
+  outline: 2px solid var(--observe-accent);
+  outline-offset: 2px;
+}
 tbody tr:hover td { background: color-mix(in srgb, var(--observe-fg) 4%, transparent); }
+tfoot th,
+tfoot td {
+  background: color-mix(in srgb, var(--observe-card-bg) 92%, var(--observe-accent));
+  border-top: 1px solid var(--observe-border-strong);
+  border-bottom: 0;
+  font-weight: 700;
+}
 .observe-drilldown-button {
   appearance: none;
   background: transparent;
@@ -2973,9 +3207,9 @@ def render_trace_detail_shell(
 #
 # Safety guarantee enforced by this script (and pinned by tests):
 #   * Only OBSERVE_FILTER_QUERY_KEYS (foundry_resource_id, project_resource_id,
-#     agent_id, model, tool_name, run_key, start, end) plus the active `view`
-#     are ever read from
-#     or written to the URL query string via history.replaceState.
+#     agent_id, model, tool_name, run_key, start, end), the active `view`, and
+#     the non-sensitive `theme` preference are read from or written to the URL
+#     query string via history.replaceState.
 #   * Raw generative-AI content fields (input_messages, output_messages,
 #     system_instructions, tool_content, evaluation_explanation) are NEVER
 #     placed in the URL, and this script never calls localStorage,
@@ -2984,7 +3218,7 @@ def render_trace_detail_shell(
 #     on the "Load protected content" button; there is no automatic fetch of
 #     that endpoint anywhere in this script.
 
-_OBSERVE_SCRIPT = """
+_OBSERVE_SCRIPT = ui_theme.THEME_TOGGLE_SCRIPT + """
 (function () {
   "use strict";
 
@@ -3096,6 +3330,7 @@ def render_trace_detail_shell(
       });
     }
     params.set("view", currentView);
+    params.set("theme", document.documentElement.getAttribute("data-theme") || "dark");
     return window.location.pathname + "?" + params.toString();
   }
 
@@ -3257,7 +3492,7 @@ def render_trace_detail_shell(
     return node;
   }
 
-  function formatNumberJs(value) {
+  function formatNumberJs(value, minimumFractionDigits, maximumFractionDigits) {
     if (value === null || value === undefined) {
       return "\u2014";
     }
@@ -3268,10 +3503,17 @@ def render_trace_detail_shell(
     if (isNaN(num)) {
       return String(value);
     }
-    if (Number.isInteger(num)) {
+    if (
+      Number.isInteger(num) &&
+      minimumFractionDigits === undefined &&
+      maximumFractionDigits === undefined
+    ) {
       return num.toLocaleString("en-US");
     }
-    return num.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    return num.toLocaleString("en-US", {
+      minimumFractionDigits: minimumFractionDigits === undefined ? 2 : minimumFractionDigits,
+      maximumFractionDigits: maximumFractionDigits === undefined ? 2 : maximumFractionDigits
+    });
   }
 
   // Mirrors `_render_maybe_missing`: a reported `0` renders as "0" tagged
@@ -3286,7 +3528,63 @@ def render_trace_detail_shell(
     }
     var numeric = Number(value);
     var isZero = !isNaN(numeric) && numeric === 0;
-    return makeEl("span", "observe-metric " + (isZero ? "metric-zero" : "metric-value"), formatNumberJs(value) + suffix);
+    return makeEl(
+      "span",
+      "observe-metric " + (isZero ? "metric-zero" : "metric-value"),
+      formatNumberJs(value, opts.minimumFractionDigits, opts.maximumFractionDigits) + suffix
+    );
+  }
+
+  function renderMillisecondsAsSeconds(value, missingText) {
+    if (value === null || value === undefined) {
+      return renderMaybeMissing(null, { missingText: missingText || "\u2014" });
+    }
+    return renderMaybeMissing(Number(value) / 1000, {
+      suffix: " s",
+      minimumFractionDigits: 3,
+      maximumFractionDigits: 3
+    });
+  }
+
+  function compactTimestamp(value) {
+    if (!value) return "";
+    var moment = new Date(value);
+    if (isNaN(moment.getTime())) return String(value);
+    function pad(part) { return String(part).padStart(2, "0"); }
+    return moment.getUTCFullYear() + "-" + pad(moment.getUTCMonth() + 1) + "-" +
+      pad(moment.getUTCDate()) + " " + pad(moment.getUTCHours()) + ":" +
+      pad(moment.getUTCMinutes()) + ":" + pad(moment.getUTCSeconds()) + " UTC";
+  }
+
+  function renderTimestampJs(value) {
+    if (!value) {
+      return renderMaybeMissing(null, { missingText: "\u2014" });
+    }
+    var time = document.createElement("time");
+    time.setAttribute("datetime", value);
+    time.title = String(value);
+    time.textContent = compactTimestamp(value);
+    return time;
+  }
+
+  function sumReported(rows, field) {
+    var found = false;
+    var total = (rows || []).reduce(function (sum, row) {
+      var value = row && row[field];
+      if (value === null || value === undefined || isNaN(Number(value))) return sum;
+      found = true;
+      return sum + Number(value);
+    }, 0);
+    return found ? total : null;
+  }
+
+  function infoIcon(helpText, extraClass) {
+    var icon = makeEl("span", "observe-info-icon" + (extraClass ? " " + extraClass : ""), "i");
+    icon.setAttribute("role", "img");
+    icon.setAttribute("tabindex", "0");
+    icon.setAttribute("aria-label", helpText);
+    icon.title = helpText;
+    return icon;
   }
 
   // Mirrors `_render_failure_rate`.
@@ -3306,8 +3604,6 @@ def render_trace_detail_shell(
     return renderMaybeMissing(rate, { suffix: "%" });
   }
 
-  // Mirrors `_render_token_totals`: always appends the "observed usage, not
-  // billing data" disclaimer (FR-036).
   function renderTokenTotals(inputTokens, outputTokens, missingText) {
     var wrap = makeEl("span", "observe-token-totals");
     var inSpan = makeEl("span", "observe-token-in", "In: ");
@@ -3317,7 +3613,6 @@ def render_trace_detail_shell(
     wrap.appendChild(inSpan);
     wrap.appendChild(document.createTextNode(" "));
     wrap.appendChild(outSpan);
-    wrap.appendChild(makeEl("span", "observe-hint", " (observed usage, not billing data)"));
     return wrap;
   }
 
@@ -3333,16 +3628,27 @@ def render_trace_detail_shell(
 
   function renderAdditionalTokenClasses(entry) {
     entry = entry || {};
-    var values = Object.keys(entry.additional_token_classes || {}).map(function (name) {
-      return name + ": " + formatNumberJs(entry.additional_token_classes[name]);
+    var wrap = makeEl("span", "observe-additional-token-classes");
+    Object.keys(entry.additional_token_classes || {}).forEach(function (name) {
+      wrap.appendChild(makeEl(
+        "span",
+        "observe-token-class observe-token-class-additional",
+        name + ": " + formatNumberJs(entry.additional_token_classes[name])
+      ));
     });
     if (entry.additional_token_classes_truncated) {
-      values.push("Additional classes truncated");
+      wrap.appendChild(infoIcon(
+        "More additional token classes were reported than can be displayed.",
+        "observe-token-classes-truncated"
+      ));
     }
     if (entry.token_classes_partial) {
-      values.push("Partial class coverage");
+      wrap.appendChild(infoIcon(
+        "Some telemetry records omitted one or more token-class attributes; totals include the values that were reported.",
+        "observe-token-classes-partial"
+      ));
     }
-    return values.length ? values.join("; ") : renderMaybeMissing(null);
+    return wrap.childNodes.length ? wrap : renderMaybeMissing(null, { missingText: "\u2014" });
   }
 
   function renderModelTokenUsage(entry) {
@@ -3367,9 +3673,10 @@ def render_trace_detail_shell(
       classes.appendChild(tokenClass);
     });
     if (entry.token_classes_partial) {
-      classes.appendChild(
-        makeEl("span", "observe-token-classes-partial", "Partial class coverage")
-      );
+      classes.appendChild(infoIcon(
+        "Some telemetry records omitted one or more token-class attributes; totals include the values that were reported.",
+        "observe-token-classes-partial"
+      ));
     }
     if (entry.additional_token_classes_truncated) {
       classes.appendChild(
@@ -3380,26 +3687,12 @@ def render_trace_detail_shell(
     return wrap;
   }
 
-  // Mirrors `render_last_seen`: always appends the observed-telemetry-only
-  // disclaimer (FR-034).
   function renderLastSeenJs(value) {
-    var disclaimer = "Last seen reflects observed telemetry only, not agent lifecycle status.";
     if (!value) {
-      var missing = makeEl(
-        "span",
-        "observe-last-seen observe-last-seen-missing metric-missing",
-        "Last seen: not reported"
-      );
-      missing.appendChild(makeEl("span", "observe-hint", " (" + disclaimer + ")"));
-      return missing;
+      return makeEl("span", "observe-last-seen observe-last-seen-missing metric-missing", "\u2014");
     }
     var span = makeEl("span", "observe-last-seen");
-    span.appendChild(document.createTextNode("Last seen: "));
-    var time = document.createElement("time");
-    time.setAttribute("datetime", value);
-    time.textContent = value;
-    span.appendChild(time);
-    span.appendChild(makeEl("span", "observe-hint", " (" + disclaimer + ")"));
+    span.appendChild(renderTimestampJs(value));
     return span;
   }
 
@@ -3414,17 +3707,18 @@ def render_trace_detail_shell(
     }
     time.className = "observe-refreshed-at";
     time.setAttribute("datetime", value);
-    time.textContent = label + ": " + value;
+    time.title = String(value);
+    time.textContent = label + ": " + compactTimestamp(value);
     return time;
   }
 
   // Mirrors `render_source_label`.
   function renderSourceLabelJs(source) {
-    var label = "unknown source";
+    var label = "source unavailable";
     if (typeof source === "string" && source) {
       label = source;
     } else if (source && typeof source === "object") {
-      label = source.source_kind || source.source_id || "unknown source";
+      label = source.source_kind || source.source_id || "source unavailable";
     }
     return makeEl("span", "observe-source-label", "Source: " + label);
   }
@@ -3448,14 +3742,20 @@ def render_trace_detail_shell(
     var label = String(kind).split("_").map(function (part) {
       return part.charAt(0).toUpperCase() + part.slice(1);
     }).join(" ");
-    return renderBadgeJs(label, tone, "observe-source-kind-badge");
+    if (kind !== "unknown") {
+      return renderBadgeJs(label, tone, "observe-source-kind-badge");
+    }
+    var help = makeEl("span", "observe-inline-help");
+    help.title = "Source kind could not be classified from the available telemetry attributes.";
+    help.appendChild(renderBadgeJs("Unclassified", tone, "observe-source-kind-badge"));
+    return help;
   }
 
   function renderIdentityAvailabilityBadge(agentId) {
     if (agentId) {
       return renderBadgeJs("Identity available", "ok", "observe-identity-badge");
     }
-    return renderBadgeJs("Identity not reported", "muted", "observe-identity-badge");
+    return renderBadgeJs("Identity unavailable", "muted", "observe-identity-badge");
   }
 
   function emptyStateNode(message) {
@@ -3509,7 +3809,9 @@ def render_trace_detail_shell(
     }
     table.dataset.observeSortable = "true";
     headers.forEach(function (header, columnIndex) {
-      var label = String(header.textContent || "").trim() || "Column " + (columnIndex + 1);
+      var label = header.dataset.label || String(header.textContent || "").trim() ||
+        "Column " + (columnIndex + 1);
+      var helpText = header.dataset.help || "";
       clearChildren(header);
       header.setAttribute("aria-sort", "none");
       var button = makeEl("button", "observe-sort-button", label);
@@ -3560,6 +3862,9 @@ def render_trace_detail_shell(
         );
       });
       header.appendChild(button);
+      if (helpText) {
+        header.appendChild(infoIcon(helpText));
+      }
     });
   }
 
@@ -3567,14 +3872,31 @@ def render_trace_detail_shell(
     (root || document).querySelectorAll("table").forEach(enhanceSortableTable);
   }
 
-  function buildDataTable(className, ariaLabel, columns, rows) {
+  function appendCellContent(cell, content) {
+    if (Array.isArray(content)) {
+      content.forEach(function (part) {
+        appendCellContent(cell, part);
+      });
+    } else if (content instanceof Node) {
+      cell.appendChild(content);
+    } else {
+      cell.textContent = content === undefined || content === null ? "" : String(content);
+    }
+  }
+
+  function buildDataTable(className, ariaLabel, columns, rows, footerCells) {
     var table = makeEl("table", className);
     table.setAttribute("aria-label", ariaLabel);
     var thead = document.createElement("thead");
     var headRow = document.createElement("tr");
     columns.forEach(function (column) {
-      var th = makeEl("th", null, column);
+      var definition = typeof column === "string" ? { label: column } : column;
+      var th = makeEl("th", null, definition.label);
       th.setAttribute("scope", "col");
+      th.dataset.label = definition.label;
+      if (definition.help) {
+        th.dataset.help = definition.help;
+      }
       headRow.appendChild(th);
     });
     thead.appendChild(headRow);
@@ -3584,20 +3906,24 @@ def render_trace_detail_shell(
       var tr = document.createElement("tr");
       cells.forEach(function (cell) {
         var td = document.createElement("td");
-        if (Array.isArray(cell)) {
-          cell.forEach(function (part) {
-            td.appendChild(part);
-          });
-        } else if (cell instanceof Node) {
-          td.appendChild(cell);
-        } else {
-          td.textContent = cell === undefined || cell === null ? "" : String(cell);
-        }
+        appendCellContent(td, cell);
         tr.appendChild(td);
       });
       tbody.appendChild(tr);
     });
     table.appendChild(tbody);
+    if (footerCells && footerCells.length) {
+      var tfoot = document.createElement("tfoot");
+      var footerRow = makeEl("tr", "observe-totals-row");
+      footerCells.forEach(function (cell, index) {
+        var footerCell = document.createElement(index === 0 ? "th" : "td");
+        if (index === 0) footerCell.setAttribute("scope", "row");
+        appendCellContent(footerCell, cell);
+        footerRow.appendChild(footerCell);
+      });
+      tfoot.appendChild(footerRow);
+      table.appendChild(tfoot);
+    }
     enhanceSortableTable(table);
     return table;
   }
@@ -3625,25 +3951,37 @@ def render_trace_detail_shell(
       row = row || {};
       var status = row.success === true
         ? "Succeeded"
-        : (row.success === false ? "Failed" : "Not reported");
+        : (row.success === false ? "Failed" : "\u2014");
       return [
-        row.timestamp || "Not reported",
-        row.telemetry_type || "Not reported",
-        row.operation_name || "Not reported",
-        row.agent_name || row.agent_id || "Not reported",
-        row.model || "Not reported",
-        row.deployment || "Not reported",
-        row.tool_name || "Not reported",
+        renderTimestampJs(row.timestamp),
+        row.telemetry_type || "\u2014",
+        row.operation_name || "\u2014",
+        row.agent_name || row.agent_id || "\u2014",
+        row.model || "\u2014",
+        row.deployment || "\u2014",
+        row.tool_name || "\u2014",
         status,
-        renderMaybeMissing(row.duration_ms, { suffix: " ms", missingText: "Not measured" }),
-        row.trace_id || "Not reported",
+        renderMillisecondsAsSeconds(row.duration_ms),
+        row.trace_id || "\u2014",
       ];
     });
     return buildDataTable(
       "observe-drilldown-table",
       "Metadata-only activity for the selected aggregate",
       ["Time", "Type", "Operation", "Agent", "Model", "Deployment", "Tool", "Status", "Duration", "Trace ID"],
-      tableRows
+      tableRows,
+      [
+        [document.createTextNode("Totals "), infoIcon("Totals cover the rows currently displayed.")],
+        "\u2014",
+        "\u2014",
+        "\u2014",
+        "\u2014",
+        "\u2014",
+        "\u2014",
+        "\u2014",
+        renderMillisecondsAsSeconds(sumReported(rows, "duration_ms")),
+        "\u2014"
+      ]
     );
   }
 
@@ -3758,8 +4096,20 @@ def render_trace_detail_shell(
           value: invocations > 0 ? Math.round(((invocations - failures) / invocations) * 1000) / 10 : null,
           unit: "%",
         },
-        { title: "Average latency", value: data.avg_latency_ms, unit: " ms" },
-        { title: "p95 latency", value: data.p95_latency_ms, unit: " ms" },
+        {
+          title: "Average latency",
+          value: data.avg_latency_ms === null ? null : Number(data.avg_latency_ms) / 1000,
+          unit: " s",
+          minimumFractionDigits: 3,
+          maximumFractionDigits: 3
+        },
+        {
+          title: "p95 latency",
+          value: data.p95_latency_ms === null ? null : Number(data.p95_latency_ms) / 1000,
+          unit: " s",
+          minimumFractionDigits: 3,
+          maximumFractionDigits: 3
+        },
       ];
     }
     return [];
@@ -3793,7 +4143,7 @@ def render_trace_detail_shell(
   function boundsNoticeNode(bounds, rowsShown) {
     var total = bounds && bounds.rows_total_in_scope;
     var text = total === null || total === undefined
-      ? "Showing " + rowsShown + " rows; total unknown."
+      ? "Showing " + rowsShown + " rows."
       : "Showing " + rowsShown + " of " + total + " rows in scope.";
     return makeEl("p", "observe-hint observe-bounds-notice", text);
   }
@@ -3813,7 +4163,11 @@ def render_trace_detail_shell(
       card.setAttribute("aria-label", title);
       card.appendChild(makeEl("h3", "observe-card-title", title));
       var valueEl = makeEl("p", "observe-card-value");
-      valueEl.appendChild(renderMaybeMissing(metric.value, { suffix: metric.unit || "" }));
+      valueEl.appendChild(renderMaybeMissing(metric.value, {
+        suffix: metric.unit || "",
+        minimumFractionDigits: metric.minimumFractionDigits,
+        maximumFractionDigits: metric.maximumFractionDigits
+      }));
       card.appendChild(valueEl);
       if (metric.source) {
         card.appendChild(renderSourceLabelJs(metric.source));
@@ -3835,7 +4189,7 @@ def render_trace_detail_shell(
     var rows = agents.map(function (agent) {
       agent = agent || {};
       var nameCell = [
-        document.createTextNode((agent.agent_name || agent.agent_id || "Not reported") + " "),
+        document.createTextNode((agent.agent_name || agent.agent_id || "\u2014") + " "),
         renderIdentityAvailabilityBadge(agent.agent_id),
       ];
       var sourceCell = renderSourceKindBadge(agent.source_kind);
@@ -3843,7 +4197,7 @@ def render_trace_detail_shell(
       return [
         nameCell,
         sourceCell,
-        agent.model || "Not reported",
+        agent.model || "\u2014",
         renderLastSeenJs(agent.last_seen),
         buildDrilldownButton(
           "agents",
@@ -3856,23 +4210,59 @@ def render_trace_detail_shell(
           "View " + String(agent.invocations || 0) + " invocations for " + (agent.agent_name || agent.agent_id || "this agent")
         ),
         renderFailureRate(agent.invocations, agent.failures),
-        renderMaybeMissing(agent.p95_latency_ms, { suffix: " ms" }),
-        renderMaybeMissing(agent.input_tokens),
-        renderMaybeMissing(agent.output_tokens),
-        renderMaybeMissing(observedTokenTotal(agent.input_tokens, agent.output_tokens)),
+        renderMillisecondsAsSeconds(agent.p95_latency_ms),
+        renderMaybeMissing(agent.input_tokens, { missingText: "\u2014" }),
+        renderMaybeMissing(agent.output_tokens, { missingText: "\u2014" }),
+        renderMaybeMissing(observedTokenTotal(agent.input_tokens, agent.output_tokens), { missingText: "\u2014" }),
+        renderMaybeMissing(agent.cache_read_tokens, { missingText: "\u2014" }),
+        renderMaybeMissing(agent.cache_write_tokens, { missingText: "\u2014" }),
+        renderMaybeMissing(agent.reasoning_tokens, { missingText: "\u2014" }),
         buildAgentDetailButton(agent),
       ];
     });
+    var totalInvocations = sumReported(agents, "invocations");
+    var totalFailures = sumReported(agents, "failures");
+    var totalInput = sumReported(agents, "input_tokens");
+    var totalOutput = sumReported(agents, "output_tokens");
+    var tokenHelp = "Observed token usage from telemetry; this is not billing data.";
     var table = buildDataTable(
       "observe-agents-table",
       "Agents observed in the selected range",
-      ["Agent", "Source", "Model", "Last seen", "Invocations", "Failure rate", "p95 latency", "Input tokens", "Output tokens", "Total tokens", "Details"],
-      rows
+      [
+        "Agent",
+        "Source",
+        { label: "Model", help: "Model identifier reported by response telemetry." },
+        { label: "Last seen", help: "Most recent telemetry in the selected range; not agent lifecycle status." },
+        "Invocations",
+        { label: "Failure rate", help: "Failures divided by invocations." },
+        { label: "p95 latency", help: "95% of observed invocations completed in this time or less." },
+        { label: "Input tokens", help: tokenHelp },
+        { label: "Output tokens", help: tokenHelp },
+        { label: "Total tokens", help: tokenHelp },
+        { label: "Cache read", help: "Tokens served from the prompt cache. " + tokenHelp },
+        { label: "Cache write", help: "Tokens written to the prompt cache. " + tokenHelp },
+        { label: "Reasoning", help: "Reasoning tokens reported by the model provider. " + tokenHelp },
+        "Details"
+      ],
+      rows,
+      [
+        [document.createTextNode("Totals "), infoIcon("Totals cover the rows currently displayed.")],
+        "\u2014",
+        "\u2014",
+        "\u2014",
+        renderMaybeMissing(totalInvocations, { missingText: "\u2014" }),
+        renderFailureRate(totalInvocations, totalFailures),
+        "\u2014",
+        renderMaybeMissing(totalInput, { missingText: "\u2014" }),
+        renderMaybeMissing(totalOutput, { missingText: "\u2014" }),
+        renderMaybeMissing(observedTokenTotal(totalInput, totalOutput), { missingText: "\u2014" }),
+        renderMaybeMissing(sumReported(agents, "cache_read_tokens"), { missingText: "\u2014" }),
+        renderMaybeMissing(sumReported(agents, "cache_write_tokens"), { missingText: "\u2014" }),
+        renderMaybeMissing(sumReported(agents, "reasoning_tokens"), { missingText: "\u2014" }),
+        "\u2014"
+      ]
     );
-    setViewContent("agents", [
-      makeEl("p", "observe-hint", "Token columns show observed usage, not billing data."),
-      table,
-    ]);
+    setViewContent("agents", [table]);
   }
 
   // ---------------------------------------------------------------------
@@ -4154,8 +4544,8 @@ def render_trace_detail_shell(
     var rows = usage.map(function (entry) {
       entry = entry || {};
       return [
-        entry.model || entry.deployment || "Not reported",
-        entry.deployment || "Not reported",
+        entry.model || "\u2014",
+        entry.deployment || "\u2014",
         buildDrilldownButton(
           "models",
           {
@@ -4168,27 +4558,61 @@ def render_trace_detail_shell(
           "View " + String(entry.requests || 0) + " requests for " + (entry.model || entry.deployment || "this model")
         ),
         renderFailureRate(entry.requests, entry.failures),
-        renderMaybeMissing(entry.p95_latency_ms, { suffix: " ms" }),
-        renderMaybeMissing(entry.input_tokens),
-        renderMaybeMissing(entry.output_tokens),
-        renderMaybeMissing(observedTokenTotal(entry.input_tokens, entry.output_tokens)),
-        renderMaybeMissing(entry.cache_read_tokens),
-        renderMaybeMissing(entry.cache_write_tokens),
-        renderMaybeMissing(entry.reasoning_tokens),
+        renderMillisecondsAsSeconds(entry.p95_latency_ms),
+        renderMaybeMissing(entry.input_tokens, { missingText: "\u2014" }),
+        renderMaybeMissing(entry.output_tokens, { missingText: "\u2014" }),
+        renderMaybeMissing(observedTokenTotal(entry.input_tokens, entry.output_tokens), { missingText: "\u2014" }),
+        renderMaybeMissing(entry.cache_read_tokens, { missingText: "\u2014" }),
+        renderMaybeMissing(entry.cache_write_tokens, { missingText: "\u2014" }),
+        renderMaybeMissing(entry.reasoning_tokens, { missingText: "\u2014" }),
         renderAdditionalTokenClasses(entry),
         renderLastSeenJs(entry.last_seen),
       ];
     });
+    var totalRequests = sumReported(usage, "requests");
+    var totalFailures = sumReported(usage, "failures");
+    var totalInput = sumReported(usage, "input_tokens");
+    var totalOutput = sumReported(usage, "output_tokens");
+    var tokenHelp = "Observed token usage from telemetry; this is not billing data.";
     var table = buildDataTable(
       "observe-usage-table",
       "Model usage observed in the selected range",
-      ["Model", "Deployment", "Requests", "Failure rate", "p95 latency", "Input tokens", "Output tokens", "Total tokens", "Cache read", "Cache write", "Reasoning", "Other token classes", "Last seen"],
-      rows
+      [
+        { label: "Model", help: "Model identifier reported by response telemetry." },
+        { label: "Deployment", help: "Requested Azure OpenAI deployment reported by telemetry." },
+        "Requests",
+        { label: "Failure rate", help: "Failures divided by requests." },
+        { label: "p95 latency", help: "95% of observed model requests completed in this time or less." },
+        { label: "Input tokens", help: tokenHelp },
+        { label: "Output tokens", help: tokenHelp },
+        { label: "Total tokens", help: tokenHelp },
+        { label: "Cache read", help: "Tokens served from the prompt cache. " + tokenHelp },
+        { label: "Cache write", help: "Tokens written to the prompt cache. " + tokenHelp },
+        { label: "Reasoning", help: "Reasoning tokens reported by the model provider. " + tokenHelp },
+        {
+          label: "Other token classes",
+          help: "Additional gen_ai.usage.* classes. A row information icon means some telemetry records omitted token-class attributes."
+        },
+        { label: "Last seen", help: "Most recent telemetry in the selected range." }
+      ],
+      rows,
+      [
+        [document.createTextNode("Totals "), infoIcon("Totals cover the rows currently displayed.")],
+        "\u2014",
+        renderMaybeMissing(totalRequests, { missingText: "\u2014" }),
+        renderFailureRate(totalRequests, totalFailures),
+        "\u2014",
+        renderMaybeMissing(totalInput, { missingText: "\u2014" }),
+        renderMaybeMissing(totalOutput, { missingText: "\u2014" }),
+        renderMaybeMissing(observedTokenTotal(totalInput, totalOutput), { missingText: "\u2014" }),
+        renderMaybeMissing(sumReported(usage, "cache_read_tokens"), { missingText: "\u2014" }),
+        renderMaybeMissing(sumReported(usage, "cache_write_tokens"), { missingText: "\u2014" }),
+        renderMaybeMissing(sumReported(usage, "reasoning_tokens"), { missingText: "\u2014" }),
+        "\u2014",
+        "\u2014"
+      ]
     );
-    setViewContent("usage", [
-      makeEl("p", "observe-hint", "Token columns show observed usage, not billing data."),
-      table,
-    ]);
+    setViewContent("usage", [table]);
   }
 
   function renderTools(data, diagnostics, bounds) {
@@ -4204,9 +4628,9 @@ def render_trace_detail_shell(
     var rows = tools.map(function (tool) {
       tool = tool || {};
       return [
-        tool.tool_name || "Not reported",
-        tool.agent_name || tool.agent_id || tool.agent_key || "Not reported",
-        tool.source_id || "Not reported",
+        tool.tool_name || "\u2014",
+        tool.agent_name || tool.agent_id || tool.agent_key || "\u2014",
+        tool.source_id || "\u2014",
         renderSourceKindBadge(tool.source_kind),
         renderLastSeenJs(tool.last_seen),
         buildDrilldownButton(
@@ -4220,15 +4644,36 @@ def render_trace_detail_shell(
           tool.invocations,
           "View " + String(tool.invocations || 0) + " invocations for " + (tool.tool_name || "this tool")
         ),
-        renderMaybeMissing(tool.failures),
-        renderMaybeMissing(tool.p95_latency_ms, { suffix: " ms", missingText: "Not measured" }),
+        renderMaybeMissing(tool.failures, { missingText: "\u2014" }),
+        renderMillisecondsAsSeconds(tool.p95_latency_ms),
       ];
     });
+    var totalInvocations = sumReported(tools, "invocations");
+    var totalFailures = sumReported(tools, "failures");
     var table = buildDataTable(
       "observe-tools-table",
       "Tools observed in the selected range",
-      ["Tool", "Agent", "Source", "Runtime", "Last seen", "Invocations", "Failures", "p95 latency"],
-      rows
+      [
+        "Tool",
+        "Agent",
+        "Source",
+        "Runtime",
+        { label: "Last seen", help: "Most recent telemetry in the selected range." },
+        "Invocations",
+        "Failures",
+        { label: "p95 latency", help: "95% of observed tool invocations completed in this time or less." }
+      ],
+      rows,
+      [
+        [document.createTextNode("Totals "), infoIcon("Totals cover the rows currently displayed.")],
+        "\u2014",
+        "\u2014",
+        "\u2014",
+        "\u2014",
+        renderMaybeMissing(totalInvocations, { missingText: "\u2014" }),
+        renderMaybeMissing(totalFailures, { missingText: "\u2014" }),
+        "\u2014"
+      ]
     );
     setViewContent("tools", [notice, table]);
   }
@@ -4246,14 +4691,14 @@ def render_trace_detail_shell(
     var rows = runs.map(function (run) {
       run = run || {};
       return [
-        run.run_key || "Not reported",
-        run.run_key_kind || "Not reported",
-        run.agent_name || run.agent_id || run.agent_key || "Not reported",
-        run.source_id || "Not reported",
+        run.run_key || "\u2014",
+        run.run_key_kind || "\u2014",
+        run.agent_name || run.agent_id || run.agent_key || "\u2014",
+        run.source_id || "\u2014",
         renderSourceKindBadge(run.source_kind),
-        run.started_at || "Not reported",
-        renderMaybeMissing(run.duration_ms, { suffix: " ms" }),
-        run.status || "Not reported",
+        renderTimestampJs(run.started_at),
+        renderMillisecondsAsSeconds(run.duration_ms),
+        run.status || "\u2014",
         buildDrilldownButton(
           "runs",
           {
@@ -4265,20 +4710,60 @@ def render_trace_detail_shell(
           run.turns,
           "View activity for run " + (run.run_key || "")
         ),
-        renderMaybeMissing(run.tool_invocations),
-        renderMaybeMissing(run.input_tokens, { missingText: "Not available" }),
-        renderMaybeMissing(run.output_tokens, { missingText: "Not available" }),
-        renderMaybeMissing(observedTokenTotal(run.input_tokens, run.output_tokens), { missingText: "Not available" }),
+        renderMaybeMissing(run.tool_invocations, { missingText: "\u2014" }),
+        renderMaybeMissing(run.input_tokens, { missingText: "\u2014" }),
+        renderMaybeMissing(run.output_tokens, { missingText: "\u2014" }),
+        renderMaybeMissing(observedTokenTotal(run.input_tokens, run.output_tokens), { missingText: "\u2014" }),
+        renderMaybeMissing(run.cache_read_tokens, { missingText: "\u2014" }),
+        renderMaybeMissing(run.cache_write_tokens, { missingText: "\u2014" }),
+        renderMaybeMissing(run.reasoning_tokens, { missingText: "\u2014" }),
       ];
     });
-    var hint = makeEl("p", "observe-hint", "Start, duration, and turns describe activity within the selected range.");
+    var totalInput = sumReported(runs, "input_tokens");
+    var totalOutput = sumReported(runs, "output_tokens");
+    var tokenHelp = "Observed token usage from telemetry; this is not billing data.";
     var table = buildDataTable(
       "observe-runs-table",
       "Runs observed in the selected range",
-      ["Run key", "Correlation", "Agent", "Source", "Runtime", "Started in range", "Duration in range", "Status", "Turns in range", "Tool invocations", "Input tokens", "Output tokens", "Total tokens"],
-      rows
+      [
+        "Run key",
+        { label: "Correlation", help: "Telemetry key used to group this run." },
+        "Agent",
+        "Source",
+        "Runtime",
+        { label: "Started in range", help: "First observed activity within the selected range." },
+        { label: "Duration in range", help: "Elapsed time between first and last observed activity in the selected range." },
+        "Status",
+        { label: "Turns in range", help: "Turns observed within the selected range." },
+        "Tool invocations",
+        { label: "Input tokens", help: tokenHelp },
+        { label: "Output tokens", help: tokenHelp },
+        { label: "Total tokens", help: tokenHelp },
+        { label: "Cache read", help: "Tokens served from the prompt cache. " + tokenHelp },
+        { label: "Cache write", help: "Tokens written to the prompt cache. " + tokenHelp },
+        { label: "Reasoning", help: "Reasoning tokens reported by the model provider. " + tokenHelp }
+      ],
+      rows,
+      [
+        [document.createTextNode("Totals "), infoIcon("Totals cover the rows currently displayed.")],
+        "\u2014",
+        "\u2014",
+        "\u2014",
+        "\u2014",
+        "\u2014",
+        renderMillisecondsAsSeconds(sumReported(runs, "duration_ms")),
+        "\u2014",
+        renderMaybeMissing(sumReported(runs, "turns"), { missingText: "\u2014" }),
+        renderMaybeMissing(sumReported(runs, "tool_invocations"), { missingText: "\u2014" }),
+        renderMaybeMissing(totalInput, { missingText: "\u2014" }),
+        renderMaybeMissing(totalOutput, { missingText: "\u2014" }),
+        renderMaybeMissing(observedTokenTotal(totalInput, totalOutput), { missingText: "\u2014" }),
+        renderMaybeMissing(sumReported(runs, "cache_read_tokens"), { missingText: "\u2014" }),
+        renderMaybeMissing(sumReported(runs, "cache_write_tokens"), { missingText: "\u2014" }),
+        renderMaybeMissing(sumReported(runs, "reasoning_tokens"), { missingText: "\u2014" })
+      ]
     );
-    setViewContent("runs", [notice, hint, table]);
+    setViewContent("runs", [notice, table]);
   }
 
   function costLabel(value) {
@@ -4582,10 +5067,8 @@ def render_trace_detail_shell(
         "; Fallback: " + (fallback ? "Yes" : "No");
       var shown = component.rows_shown;
       var total = component.rows_total;
-      var rowCount = String(shown === null || shown === undefined ? "Not reported" : shown);
-      if (total === null || total === undefined) {
-        rowCount += " / total unknown";
-      } else {
+      var rowCount = String(shown === null || shown === undefined ? "\u2014" : shown);
+      if (total !== null && total !== undefined) {
         var omitted = Math.max(Number(total) - Number(shown || 0), 0);
         rowCount += " / " + String(total);
         if (omitted) rowCount += " (" + String(omitted) + " omitted)";
@@ -4840,10 +5323,12 @@ def render_trace_detail_shell(
     var shown = bounds.rows_shown;
     var total = bounds.rows_total_in_scope;
     var text = total === null || total === undefined
-      ? "Showing " + String(shown === null || shown === undefined ? "an unknown number of" : shown) +
-        " rows; total unknown."
-      : "Showing " + String(shown === null || shown === undefined ? "an unknown number of" : shown) +
-        " of " + String(total) + " rows in scope" +
+      ? (shown === null || shown === undefined
+        ? "Showing available rows."
+        : "Showing " + String(shown) + " rows.")
+      : (shown === null || shown === undefined
+        ? String(total) + " rows in scope"
+        : "Showing " + String(shown) + " of " + String(total) + " rows in scope") +
         (bounds.truncated ? "; results are truncated." : ".");
     return makeEl("p", "observe-hint observe-cost-bounds-notice", text);
   }
@@ -5250,7 +5735,7 @@ def render_trace_detail_shell(
         return response.json().then(function (body) {
           if (myToken !== requestToken) return null;
           renderObserveResponse(body);
-          setRefreshStatus("Refreshed " + new Date().toISOString());
+          setRefreshStatus("Refreshed " + compactTimestamp(new Date().toISOString()));
           return body;
         });
       })
@@ -5322,7 +5807,7 @@ def render_trace_detail_shell(
             return null;
           }
           renderObserveResponse(body);
-          setRefreshStatus("Refreshed " + new Date().toISOString());
+          setRefreshStatus("Refreshed " + compactTimestamp(new Date().toISOString()));
           return body;
         });
       })
@@ -5366,26 +5851,6 @@ def render_trace_detail_shell(
     });
   }
 
-  function setupThemeToggle() {
-    var toggle = document.querySelector("[data-observe-theme-toggle]");
-    if (!toggle) return;
-    var root = document.documentElement;
-    function apply(theme) {
-      root.setAttribute("data-theme", theme);
-      var isLight = theme === "light";
-      toggle.setAttribute("aria-pressed", isLight ? "true" : "false");
-      var icon = toggle.querySelector("[data-observe-theme-icon]");
-      if (icon) icon.textContent = isLight ? "\u2600" : "\u263D";
-      var label = toggle.querySelector("[data-observe-theme-label]");
-      if (label) label.textContent = isLight ? "Light" : "Dark";
-    }
-    // In-memory only: never persisted to storage or cookies.
-    apply(root.getAttribute("data-theme") === "light" ? "light" : "dark");
-    toggle.addEventListener("click", function () {
-      apply(root.getAttribute("data-theme") === "light" ? "dark" : "light");
-    });
-  }
-
   function init() {
     appliedFilters = readAppliedFromUrl();
     var form = document.getElementById("observe-filter-form");
@@ -5514,7 +5979,7 @@ def render_trace_detail_shell(
       fetchObserveData(false);
     });
     activateView(currentView);
-    setupThemeToggle();
+    setupAgentOpsThemeToggle();
     enhanceSortableTables(document);
     syncUrl();
     scheduleAutoRefresh();
@@ -5641,19 +6106,17 @@ def render_observe_page(
   </section>"""
 
     scope_subtitle = html_escape(scope_label) if scope_label else "Runtime observability"
+    theme_toggle = ui_theme.render_theme_toggle(
+        control_id="observe-theme-toggle", extra_class="observe-theme-toggle"
+    )
     header_html = f"""  <header class="aos-header observe-header">
     <div class="aos-brand-block">
       <h1 class="aos-brand observe-brand">AgentOps Observe</h1>
       <p class="aos-subtitle observe-subtitle">{scope_subtitle}</p>
     </div>
     <div class="aos-header-actions observe-header-actions">
-      <a class="aos-link observe-cockpit-link" href="/" data-observe-cockpit-link>&#8592; Cockpit</a>
-      <button type="button" id="observe-theme-toggle" class="aos-theme-toggle observe-theme-toggle"
-        aria-pressed="false" aria-label="Toggle dark and light theme" title="Toggle theme"
-        data-observe-theme-toggle>
-        <span class="aos-theme-icon" aria-hidden="true" data-observe-theme-icon>&#9789;</span>
-        <span class="observe-theme-label" data-observe-theme-label>Theme</span>
-      </button>
+      <a class="aos-link observe-cockpit-link" href="/" data-theme-link>&#8592; Cockpit</a>
+      {theme_toggle}
     </div>
   </header>"""
 
diff --git a/src/agentops/agent/ui_theme.py b/src/agentops/agent/ui_theme.py
index 69d71e63..2cf2f933 100644
--- a/src/agentops/agent/ui_theme.py
+++ b/src/agentops/agent/ui_theme.py
@@ -19,22 +19,20 @@
 Theme model
 -----------
 Themes are **explicit**, never inferred from ``prefers-color-scheme``. The
-default theme is dark (matching the Cockpit shell, which is dark-only). A light
+default theme is dark. A light
 theme is a complete, accessible equivalent applied via an explicit
 ``[data-theme="light"]`` attribute on the document root -- there is no bare
-``prefers-color-scheme`` override that could diverge from the Cockpit.
+``prefers-color-scheme`` override that could make product surfaces diverge.
 
-Purity
-------
-This module performs no I/O, reads no environment variables, and imports no
-Azure SDKs. It only assembles CSS strings from constants.
+The shared toggle stores only the non-sensitive ``theme=light|dark`` preference
+in the page URL. Links marked with ``data-theme-link`` carry that preference
+between Cockpit and Observe without cookies or browser storage.
 
 .. note::
    :mod:`agentops.agent.cockpit` consumes :func:`render_theme_variables` for its
    design tokens, so the Cockpit and Observe token values can no longer drift.
-   Cockpit still styles its page with bare element selectors rather than the
-   ``aos-*`` shell primitives below; adopting :data:`SHARED_SHELL_CSS` there
-   would require reworking the Cockpit markup and is deliberately out of scope.
+   Cockpit still styles most page content with its own selectors, while both
+   surfaces consume the canonical tokens and shared theme control.
 """
 
 from __future__ import annotations
@@ -165,6 +163,69 @@ def render_theme_variables(*, default_theme: str = "dark") -> str:
     return f"{root_block}\n\n{alt_block}"
 
 
+def render_theme_toggle(
+    *, control_id: str = "aos-theme-toggle", extra_class: str = ""
+) -> str:
+    """Return the shared accessible light/dark theme control."""
+    classes = "aos-btn aos-theme-toggle"
+    if extra_class:
+        classes += f" {extra_class}"
+    return (
+        f'<button id="{control_id}" class="{classes}" data-aos-theme-toggle '
+        'type="button" aria-label="Switch to light theme" '
+        'aria-pressed="false">'
+        '<span class="aos-theme-icon" aria-hidden="true">&#9790;</span>'
+        '<span class="aos-theme-label">Dark</span>'
+        "</button>"
+    )
+
+
+THEME_TOGGLE_SCRIPT: str = r"""
+function setupAgentOpsThemeToggle() {
+  var toggle = document.querySelector("[data-aos-theme-toggle]");
+  if (!toggle) { return; }
+  var root = document.documentElement;
+  var params = new URLSearchParams(window.location.search);
+  var requested = params.get("theme");
+  var initialTheme = requested === "light" || requested === "dark" ? requested : "dark";
+
+  function updateThemeLinks(theme) {
+    document.querySelectorAll("[data-theme-link]").forEach(function (link) {
+      var target = new URL(link.getAttribute("href"), window.location.href);
+      target.searchParams.set("theme", theme);
+      link.setAttribute("href", target.pathname + target.search + target.hash);
+    });
+  }
+
+  function applyTheme(theme, updateUrl) {
+    var isLight = theme === "light";
+    root.setAttribute("data-theme", theme);
+    toggle.setAttribute("aria-pressed", isLight ? "true" : "false");
+    toggle.setAttribute("aria-label", isLight ? "Switch to dark theme" : "Switch to light theme");
+    var icon = toggle.querySelector(".aos-theme-icon");
+    var label = toggle.querySelector(".aos-theme-label");
+    if (icon) { icon.textContent = isLight ? "\u2600" : "\u263e"; }
+    if (label) { label.textContent = isLight ? "Light" : "Dark"; }
+    updateThemeLinks(theme);
+    if (updateUrl) {
+      var next = new URLSearchParams(window.location.search);
+      next.set("theme", theme);
+      history.replaceState(null, "", window.location.pathname + "?" + next.toString() + window.location.hash);
+    }
+  }
+
+  applyTheme(initialTheme, requested !== initialTheme);
+  toggle.addEventListener("click", function () {
+    applyTheme(root.getAttribute("data-theme") === "light" ? "dark" : "light", true);
+  });
+  window.addEventListener("popstate", function () {
+    var restored = new URLSearchParams(window.location.search).get("theme");
+    applyTheme(restored === "light" || restored === "dark" ? restored : "dark", false);
+  });
+}
+""".strip()
+
+
 # ---------------------------------------------------------------------------
 # Shared shell primitives
 # ---------------------------------------------------------------------------
@@ -306,5 +367,7 @@ def render_theme_variables(*, default_theme: str = "dark") -> str:
     "DARK_TOKENS",
     "LIGHT_TOKENS",
     "render_theme_variables",
+    "render_theme_toggle",
+    "THEME_TOGGLE_SCRIPT",
     "SHARED_SHELL_CSS",
 ]
diff --git a/src/agentops/core/observe.py b/src/agentops/core/observe.py
index 7263bdd6..d4d08a3c 100644
--- a/src/agentops/core/observe.py
+++ b/src/agentops/core/observe.py
@@ -513,6 +513,9 @@ class ObservedAgent(ContractModel):
     p95_latency_ms: float | None = Field(default=None, ge=0)
     input_tokens: int | None = Field(default=None, ge=0)
     output_tokens: int | None = Field(default=None, ge=0)
+    cache_read_tokens: int | None = Field(default=None, ge=0)
+    cache_write_tokens: int | None = Field(default=None, ge=0)
+    reasoning_tokens: int | None = Field(default=None, ge=0)
 
     @model_validator(mode="after")
     def _failures_not_greater_than_invocations(self) -> "ObservedAgent":
diff --git a/tests/integration/test_observe_end_to_end.py b/tests/integration/test_observe_end_to_end.py
index 07cc26a4..c720d091 100644
--- a/tests/integration/test_observe_end_to_end.py
+++ b/tests/integration/test_observe_end_to_end.py
@@ -654,8 +654,9 @@ def query(self, *, view: str, filters: dict[str, Any], **_: Any) -> dict[str, An
 
     html = render_models_usage_table(payload["data"])
     assert "Cache read" in html
-    assert "Not reported" in html
-    assert "Partial class coverage" in html
+    assert "Not reported" not in html
+    assert "Partial class coverage" not in html
+    assert "Some telemetry records omitted one or more token-class attributes" in html
     assert "Additional classes truncated" in html
 
 
diff --git a/tests/unit/__snapshots__/observe_overview.html b/tests/unit/__snapshots__/observe_overview.html
index 086508bd..9bbe6ebe 100644
--- a/tests/unit/__snapshots__/observe_overview.html
+++ b/tests/unit/__snapshots__/observe_overview.html
@@ -465,7 +465,37 @@
   outline: 2px solid var(--observe-accent);
   outline-offset: 3px;
 }
+.observe-info-icon {
+  align-items: center;
+  border: 1px solid currentColor;
+  border-radius: 50%;
+  color: var(--observe-muted);
+  cursor: help;
+  display: inline-flex;
+  font-size: 9px;
+  font-style: normal;
+  font-weight: 800;
+  height: 14px;
+  justify-content: center;
+  line-height: 1;
+  margin-left: 5px;
+  text-transform: none;
+  vertical-align: middle;
+  width: 14px;
+}
+.observe-info-icon:focus-visible {
+  color: var(--observe-accent);
+  outline: 2px solid var(--observe-accent);
+  outline-offset: 2px;
+}
 tbody tr:hover td { background: color-mix(in srgb, var(--observe-fg) 4%, transparent); }
+tfoot th,
+tfoot td {
+  background: color-mix(in srgb, var(--observe-card-bg) 92%, var(--observe-accent));
+  border-top: 1px solid var(--observe-border-strong);
+  border-bottom: 0;
+  font-weight: 700;
+}
 .observe-drilldown-button {
   appearance: none;
   background: transparent;
@@ -619,13 +649,8 @@ <h1 class="aos-brand observe-brand">AgentOps Observe</h1>
       <p class="aos-subtitle observe-subtitle">Foundry project: project-a</p>
     </div>
     <div class="aos-header-actions observe-header-actions">
-      <a class="aos-link observe-cockpit-link" href="/" data-observe-cockpit-link>&#8592; Cockpit</a>
-      <button type="button" id="observe-theme-toggle" class="aos-theme-toggle observe-theme-toggle"
-        aria-pressed="false" aria-label="Toggle dark and light theme" title="Toggle theme"
-        data-observe-theme-toggle>
-        <span class="aos-theme-icon" aria-hidden="true" data-observe-theme-icon>&#9789;</span>
-        <span class="observe-theme-label" data-observe-theme-label>Theme</span>
-      </button>
+      <a class="aos-link observe-cockpit-link" href="/" data-theme-link>&#8592; Cockpit</a>
+      <button id="observe-theme-toggle" class="aos-btn aos-theme-toggle observe-theme-toggle" data-aos-theme-toggle type="button" aria-label="Switch to light theme" aria-pressed="false"><span class="aos-theme-icon" aria-hidden="true">&#9790;</span><span class="aos-theme-label">Dark</span></button>
     </div>
   </header>
   <nav class="observe-nav" aria-label="Observe views"><ul class="observe-nav-list" role="tablist"><li role="presentation"><a href="?view=overview" id="observe-tab-overview" data-observe-nav-link="overview" class="observe-nav-link" role="tab" aria-controls="overview" aria-selected="true">Overview</a></li><li role="presentation"><a href="?view=agents" id="observe-tab-agents" data-observe-nav-link="agents" class="observe-nav-link" role="tab" aria-controls="agents" aria-selected="false">Agents</a></li><li role="presentation"><a href="?view=usage" id="observe-tab-usage" data-observe-nav-link="usage" class="observe-nav-link" role="tab" aria-controls="usage" aria-selected="false">Models and usage</a></li><li role="presentation"><a href="?view=tools" id="observe-tab-tools" data-observe-nav-link="tools" class="observe-nav-link" role="tab" aria-controls="tools" aria-selected="false">Tools</a></li><li role="presentation"><a href="?view=runs" id="observe-tab-runs" data-observe-nav-link="runs" class="observe-nav-link" role="tab" aria-controls="runs" aria-selected="false">Runs</a></li></ul></nav>
@@ -690,17 +715,58 @@ <h2 id="usage-heading">Models and usage</h2>
   <section id="tools" data-observe-panel role="tabpanel"
            aria-labelledby="observe-tab-tools" hidden>
     <h2 id="tools-heading">Tools</h2>
-    <div id="tools-content" data-observe-view-content="tools"><p class="observe-hint observe-bounds-notice">Showing 0 rows; total unknown.</p><div class="observe-tools-view observe-empty-state"><p class="observe-empty">No tool activity was found for the selected filters. Tool attribution may not be reported for this selection.</p></div></div>
+    <div id="tools-content" data-observe-view-content="tools"><p class="observe-hint observe-bounds-notice">Showing 0 rows.</p><div class="observe-tools-view observe-empty-state"><p class="observe-empty">No tool activity was found for the selected filters. Tool attribution may not be reported for this selection.</p></div></div>
   </section>
   <section id="runs" data-observe-panel role="tabpanel"
            aria-labelledby="observe-tab-runs" hidden>
     <h2 id="runs-heading">Runs</h2>
-    <div id="runs-content" data-observe-view-content="runs"><p class="observe-hint observe-bounds-notice">Showing 0 rows; total unknown.</p><div class="observe-runs-view observe-empty-state"><p class="observe-empty">No runs could be correlated for the selected filters. Run correlation may not be reported for this selection.</p></div></div>
+    <div id="runs-content" data-observe-view-content="runs"><p class="observe-hint observe-bounds-notice">Showing 0 rows.</p><div class="observe-runs-view observe-empty-state"><p class="observe-empty">No runs could be correlated for the selected filters. Run correlation may not be reported for this selection.</p></div></div>
   </section>
   
   
 </main>
-<script>(function () {
+<script>function setupAgentOpsThemeToggle() {
+  var toggle = document.querySelector("[data-aos-theme-toggle]");
+  if (!toggle) { return; }
+  var root = document.documentElement;
+  var params = new URLSearchParams(window.location.search);
+  var requested = params.get("theme");
+  var initialTheme = requested === "light" || requested === "dark" ? requested : "dark";
+
+  function updateThemeLinks(theme) {
+    document.querySelectorAll("[data-theme-link]").forEach(function (link) {
+      var target = new URL(link.getAttribute("href"), window.location.href);
+      target.searchParams.set("theme", theme);
+      link.setAttribute("href", target.pathname + target.search + target.hash);
+    });
+  }
+
+  function applyTheme(theme, updateUrl) {
+    var isLight = theme === "light";
+    root.setAttribute("data-theme", theme);
+    toggle.setAttribute("aria-pressed", isLight ? "true" : "false");
+    toggle.setAttribute("aria-label", isLight ? "Switch to dark theme" : "Switch to light theme");
+    var icon = toggle.querySelector(".aos-theme-icon");
+    var label = toggle.querySelector(".aos-theme-label");
+    if (icon) { icon.textContent = isLight ? "\u2600" : "\u263e"; }
+    if (label) { label.textContent = isLight ? "Light" : "Dark"; }
+    updateThemeLinks(theme);
+    if (updateUrl) {
+      var next = new URLSearchParams(window.location.search);
+      next.set("theme", theme);
+      history.replaceState(null, "", window.location.pathname + "?" + next.toString() + window.location.hash);
+    }
+  }
+
+  applyTheme(initialTheme, requested !== initialTheme);
+  toggle.addEventListener("click", function () {
+    applyTheme(root.getAttribute("data-theme") === "light" ? "dark" : "light", true);
+  });
+  window.addEventListener("popstate", function () {
+    var restored = new URLSearchParams(window.location.search).get("theme");
+    applyTheme(restored === "light" || restored === "dark" ? restored : "dark", false);
+  });
+}(function () {
   "use strict";
 
   var FILTER_KEYS = ["foundry_resource_id", "project_resource_id", "agent_id", "model", "tool_name", "run_key", "start", "end"];
@@ -811,6 +877,7 @@ <h2 id="runs-heading">Runs</h2>
       });
     }
     params.set("view", currentView);
+    params.set("theme", document.documentElement.getAttribute("data-theme") || "dark");
     return window.location.pathname + "?" + params.toString();
   }
 
@@ -972,7 +1039,7 @@ <h2 id="runs-heading">Runs</h2>
     return node;
   }
 
-  function formatNumberJs(value) {
+  function formatNumberJs(value, minimumFractionDigits, maximumFractionDigits) {
     if (value === null || value === undefined) {
       return "—";
     }
@@ -983,10 +1050,17 @@ <h2 id="runs-heading">Runs</h2>
     if (isNaN(num)) {
       return String(value);
     }
-    if (Number.isInteger(num)) {
+    if (
+      Number.isInteger(num) &&
+      minimumFractionDigits === undefined &&
+      maximumFractionDigits === undefined
+    ) {
       return num.toLocaleString("en-US");
     }
-    return num.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    return num.toLocaleString("en-US", {
+      minimumFractionDigits: minimumFractionDigits === undefined ? 2 : minimumFractionDigits,
+      maximumFractionDigits: maximumFractionDigits === undefined ? 2 : maximumFractionDigits
+    });
   }
 
   // Mirrors `_render_maybe_missing`: a reported `0` renders as "0" tagged
@@ -1001,7 +1075,63 @@ <h2 id="runs-heading">Runs</h2>
     }
     var numeric = Number(value);
     var isZero = !isNaN(numeric) && numeric === 0;
-    return makeEl("span", "observe-metric " + (isZero ? "metric-zero" : "metric-value"), formatNumberJs(value) + suffix);
+    return makeEl(
+      "span",
+      "observe-metric " + (isZero ? "metric-zero" : "metric-value"),
+      formatNumberJs(value, opts.minimumFractionDigits, opts.maximumFractionDigits) + suffix
+    );
+  }
+
+  function renderMillisecondsAsSeconds(value, missingText) {
+    if (value === null || value === undefined) {
+      return renderMaybeMissing(null, { missingText: missingText || "—" });
+    }
+    return renderMaybeMissing(Number(value) / 1000, {
+      suffix: " s",
+      minimumFractionDigits: 3,
+      maximumFractionDigits: 3
+    });
+  }
+
+  function compactTimestamp(value) {
+    if (!value) return "";
+    var moment = new Date(value);
+    if (isNaN(moment.getTime())) return String(value);
+    function pad(part) { return String(part).padStart(2, "0"); }
+    return moment.getUTCFullYear() + "-" + pad(moment.getUTCMonth() + 1) + "-" +
+      pad(moment.getUTCDate()) + " " + pad(moment.getUTCHours()) + ":" +
+      pad(moment.getUTCMinutes()) + ":" + pad(moment.getUTCSeconds()) + " UTC";
+  }
+
+  function renderTimestampJs(value) {
+    if (!value) {
+      return renderMaybeMissing(null, { missingText: "—" });
+    }
+    var time = document.createElement("time");
+    time.setAttribute("datetime", value);
+    time.title = String(value);
+    time.textContent = compactTimestamp(value);
+    return time;
+  }
+
+  function sumReported(rows, field) {
+    var found = false;
+    var total = (rows || []).reduce(function (sum, row) {
+      var value = row && row[field];
+      if (value === null || value === undefined || isNaN(Number(value))) return sum;
+      found = true;
+      return sum + Number(value);
+    }, 0);
+    return found ? total : null;
+  }
+
+  function infoIcon(helpText, extraClass) {
+    var icon = makeEl("span", "observe-info-icon" + (extraClass ? " " + extraClass : ""), "i");
+    icon.setAttribute("role", "img");
+    icon.setAttribute("tabindex", "0");
+    icon.setAttribute("aria-label", helpText);
+    icon.title = helpText;
+    return icon;
   }
 
   // Mirrors `_render_failure_rate`.
@@ -1021,8 +1151,6 @@ <h2 id="runs-heading">Runs</h2>
     return renderMaybeMissing(rate, { suffix: "%" });
   }
 
-  // Mirrors `_render_token_totals`: always appends the "observed usage, not
-  // billing data" disclaimer (FR-036).
   function renderTokenTotals(inputTokens, outputTokens, missingText) {
     var wrap = makeEl("span", "observe-token-totals");
     var inSpan = makeEl("span", "observe-token-in", "In: ");
@@ -1032,7 +1160,6 @@ <h2 id="runs-heading">Runs</h2>
     wrap.appendChild(inSpan);
     wrap.appendChild(document.createTextNode(" "));
     wrap.appendChild(outSpan);
-    wrap.appendChild(makeEl("span", "observe-hint", " (observed usage, not billing data)"));
     return wrap;
   }
 
@@ -1048,16 +1175,27 @@ <h2 id="runs-heading">Runs</h2>
 
   function renderAdditionalTokenClasses(entry) {
     entry = entry || {};
-    var values = Object.keys(entry.additional_token_classes || {}).map(function (name) {
-      return name + ": " + formatNumberJs(entry.additional_token_classes[name]);
+    var wrap = makeEl("span", "observe-additional-token-classes");
+    Object.keys(entry.additional_token_classes || {}).forEach(function (name) {
+      wrap.appendChild(makeEl(
+        "span",
+        "observe-token-class observe-token-class-additional",
+        name + ": " + formatNumberJs(entry.additional_token_classes[name])
+      ));
     });
     if (entry.additional_token_classes_truncated) {
-      values.push("Additional classes truncated");
+      wrap.appendChild(infoIcon(
+        "More additional token classes were reported than can be displayed.",
+        "observe-token-classes-truncated"
+      ));
     }
     if (entry.token_classes_partial) {
-      values.push("Partial class coverage");
+      wrap.appendChild(infoIcon(
+        "Some telemetry records omitted one or more token-class attributes; totals include the values that were reported.",
+        "observe-token-classes-partial"
+      ));
     }
-    return values.length ? values.join("; ") : renderMaybeMissing(null);
+    return wrap.childNodes.length ? wrap : renderMaybeMissing(null, { missingText: "—" });
   }
 
   function renderModelTokenUsage(entry) {
@@ -1082,9 +1220,10 @@ <h2 id="runs-heading">Runs</h2>
       classes.appendChild(tokenClass);
     });
     if (entry.token_classes_partial) {
-      classes.appendChild(
-        makeEl("span", "observe-token-classes-partial", "Partial class coverage")
-      );
+      classes.appendChild(infoIcon(
+        "Some telemetry records omitted one or more token-class attributes; totals include the values that were reported.",
+        "observe-token-classes-partial"
+      ));
     }
     if (entry.additional_token_classes_truncated) {
       classes.appendChild(
@@ -1095,26 +1234,12 @@ <h2 id="runs-heading">Runs</h2>
     return wrap;
   }
 
-  // Mirrors `render_last_seen`: always appends the observed-telemetry-only
-  // disclaimer (FR-034).
   function renderLastSeenJs(value) {
-    var disclaimer = "Last seen reflects observed telemetry only, not agent lifecycle status.";
     if (!value) {
-      var missing = makeEl(
-        "span",
-        "observe-last-seen observe-last-seen-missing metric-missing",
-        "Last seen: not reported"
-      );
-      missing.appendChild(makeEl("span", "observe-hint", " (" + disclaimer + ")"));
-      return missing;
+      return makeEl("span", "observe-last-seen observe-last-seen-missing metric-missing", "—");
     }
     var span = makeEl("span", "observe-last-seen");
-    span.appendChild(document.createTextNode("Last seen: "));
-    var time = document.createElement("time");
-    time.setAttribute("datetime", value);
-    time.textContent = value;
-    span.appendChild(time);
-    span.appendChild(makeEl("span", "observe-hint", " (" + disclaimer + ")"));
+    span.appendChild(renderTimestampJs(value));
     return span;
   }
 
@@ -1129,17 +1254,18 @@ <h2 id="runs-heading">Runs</h2>
     }
     time.className = "observe-refreshed-at";
     time.setAttribute("datetime", value);
-    time.textContent = label + ": " + value;
+    time.title = String(value);
+    time.textContent = label + ": " + compactTimestamp(value);
     return time;
   }
 
   // Mirrors `render_source_label`.
   function renderSourceLabelJs(source) {
-    var label = "unknown source";
+    var label = "source unavailable";
     if (typeof source === "string" && source) {
       label = source;
     } else if (source && typeof source === "object") {
-      label = source.source_kind || source.source_id || "unknown source";
+      label = source.source_kind || source.source_id || "source unavailable";
     }
     return makeEl("span", "observe-source-label", "Source: " + label);
   }
@@ -1163,14 +1289,20 @@ <h2 id="runs-heading">Runs</h2>
     var label = String(kind).split("_").map(function (part) {
       return part.charAt(0).toUpperCase() + part.slice(1);
     }).join(" ");
-    return renderBadgeJs(label, tone, "observe-source-kind-badge");
+    if (kind !== "unknown") {
+      return renderBadgeJs(label, tone, "observe-source-kind-badge");
+    }
+    var help = makeEl("span", "observe-inline-help");
+    help.title = "Source kind could not be classified from the available telemetry attributes.";
+    help.appendChild(renderBadgeJs("Unclassified", tone, "observe-source-kind-badge"));
+    return help;
   }
 
   function renderIdentityAvailabilityBadge(agentId) {
     if (agentId) {
       return renderBadgeJs("Identity available", "ok", "observe-identity-badge");
     }
-    return renderBadgeJs("Identity not reported", "muted", "observe-identity-badge");
+    return renderBadgeJs("Identity unavailable", "muted", "observe-identity-badge");
   }
 
   function emptyStateNode(message) {
@@ -1224,7 +1356,9 @@ <h2 id="runs-heading">Runs</h2>
     }
     table.dataset.observeSortable = "true";
     headers.forEach(function (header, columnIndex) {
-      var label = String(header.textContent || "").trim() || "Column " + (columnIndex + 1);
+      var label = header.dataset.label || String(header.textContent || "").trim() ||
+        "Column " + (columnIndex + 1);
+      var helpText = header.dataset.help || "";
       clearChildren(header);
       header.setAttribute("aria-sort", "none");
       var button = makeEl("button", "observe-sort-button", label);
@@ -1275,6 +1409,9 @@ <h2 id="runs-heading">Runs</h2>
         );
       });
       header.appendChild(button);
+      if (helpText) {
+        header.appendChild(infoIcon(helpText));
+      }
     });
   }
 
@@ -1282,14 +1419,31 @@ <h2 id="runs-heading">Runs</h2>
     (root || document).querySelectorAll("table").forEach(enhanceSortableTable);
   }
 
-  function buildDataTable(className, ariaLabel, columns, rows) {
+  function appendCellContent(cell, content) {
+    if (Array.isArray(content)) {
+      content.forEach(function (part) {
+        appendCellContent(cell, part);
+      });
+    } else if (content instanceof Node) {
+      cell.appendChild(content);
+    } else {
+      cell.textContent = content === undefined || content === null ? "" : String(content);
+    }
+  }
+
+  function buildDataTable(className, ariaLabel, columns, rows, footerCells) {
     var table = makeEl("table", className);
     table.setAttribute("aria-label", ariaLabel);
     var thead = document.createElement("thead");
     var headRow = document.createElement("tr");
     columns.forEach(function (column) {
-      var th = makeEl("th", null, column);
+      var definition = typeof column === "string" ? { label: column } : column;
+      var th = makeEl("th", null, definition.label);
       th.setAttribute("scope", "col");
+      th.dataset.label = definition.label;
+      if (definition.help) {
+        th.dataset.help = definition.help;
+      }
       headRow.appendChild(th);
     });
     thead.appendChild(headRow);
@@ -1299,20 +1453,24 @@ <h2 id="runs-heading">Runs</h2>
       var tr = document.createElement("tr");
       cells.forEach(function (cell) {
         var td = document.createElement("td");
-        if (Array.isArray(cell)) {
-          cell.forEach(function (part) {
-            td.appendChild(part);
-          });
-        } else if (cell instanceof Node) {
-          td.appendChild(cell);
-        } else {
-          td.textContent = cell === undefined || cell === null ? "" : String(cell);
-        }
+        appendCellContent(td, cell);
         tr.appendChild(td);
       });
       tbody.appendChild(tr);
     });
     table.appendChild(tbody);
+    if (footerCells && footerCells.length) {
+      var tfoot = document.createElement("tfoot");
+      var footerRow = makeEl("tr", "observe-totals-row");
+      footerCells.forEach(function (cell, index) {
+        var footerCell = document.createElement(index === 0 ? "th" : "td");
+        if (index === 0) footerCell.setAttribute("scope", "row");
+        appendCellContent(footerCell, cell);
+        footerRow.appendChild(footerCell);
+      });
+      tfoot.appendChild(footerRow);
+      table.appendChild(tfoot);
+    }
     enhanceSortableTable(table);
     return table;
   }
@@ -1340,25 +1498,37 @@ <h2 id="runs-heading">Runs</h2>
       row = row || {};
       var status = row.success === true
         ? "Succeeded"
-        : (row.success === false ? "Failed" : "Not reported");
+        : (row.success === false ? "Failed" : "—");
       return [
-        row.timestamp || "Not reported",
-        row.telemetry_type || "Not reported",
-        row.operation_name || "Not reported",
-        row.agent_name || row.agent_id || "Not reported",
-        row.model || "Not reported",
-        row.deployment || "Not reported",
-        row.tool_name || "Not reported",
+        renderTimestampJs(row.timestamp),
+        row.telemetry_type || "—",
+        row.operation_name || "—",
+        row.agent_name || row.agent_id || "—",
+        row.model || "—",
+        row.deployment || "—",
+        row.tool_name || "—",
         status,
-        renderMaybeMissing(row.duration_ms, { suffix: " ms", missingText: "Not measured" }),
-        row.trace_id || "Not reported",
+        renderMillisecondsAsSeconds(row.duration_ms),
+        row.trace_id || "—",
       ];
     });
     return buildDataTable(
       "observe-drilldown-table",
       "Metadata-only activity for the selected aggregate",
       ["Time", "Type", "Operation", "Agent", "Model", "Deployment", "Tool", "Status", "Duration", "Trace ID"],
-      tableRows
+      tableRows,
+      [
+        [document.createTextNode("Totals "), infoIcon("Totals cover the rows currently displayed.")],
+        "—",
+        "—",
+        "—",
+        "—",
+        "—",
+        "—",
+        "—",
+        renderMillisecondsAsSeconds(sumReported(rows, "duration_ms")),
+        "—"
+      ]
     );
   }
 
@@ -1473,8 +1643,20 @@ <h2 id="runs-heading">Runs</h2>
           value: invocations > 0 ? Math.round(((invocations - failures) / invocations) * 1000) / 10 : null,
           unit: "%",
         },
-        { title: "Average latency", value: data.avg_latency_ms, unit: " ms" },
-        { title: "p95 latency", value: data.p95_latency_ms, unit: " ms" },
+        {
+          title: "Average latency",
+          value: data.avg_latency_ms === null ? null : Number(data.avg_latency_ms) / 1000,
+          unit: " s",
+          minimumFractionDigits: 3,
+          maximumFractionDigits: 3
+        },
+        {
+          title: "p95 latency",
+          value: data.p95_latency_ms === null ? null : Number(data.p95_latency_ms) / 1000,
+          unit: " s",
+          minimumFractionDigits: 3,
+          maximumFractionDigits: 3
+        },
       ];
     }
     return [];
@@ -1508,7 +1690,7 @@ <h2 id="runs-heading">Runs</h2>
   function boundsNoticeNode(bounds, rowsShown) {
     var total = bounds && bounds.rows_total_in_scope;
     var text = total === null || total === undefined
-      ? "Showing " + rowsShown + " rows; total unknown."
+      ? "Showing " + rowsShown + " rows."
       : "Showing " + rowsShown + " of " + total + " rows in scope.";
     return makeEl("p", "observe-hint observe-bounds-notice", text);
   }
@@ -1528,7 +1710,11 @@ <h2 id="runs-heading">Runs</h2>
       card.setAttribute("aria-label", title);
       card.appendChild(makeEl("h3", "observe-card-title", title));
       var valueEl = makeEl("p", "observe-card-value");
-      valueEl.appendChild(renderMaybeMissing(metric.value, { suffix: metric.unit || "" }));
+      valueEl.appendChild(renderMaybeMissing(metric.value, {
+        suffix: metric.unit || "",
+        minimumFractionDigits: metric.minimumFractionDigits,
+        maximumFractionDigits: metric.maximumFractionDigits
+      }));
       card.appendChild(valueEl);
       if (metric.source) {
         card.appendChild(renderSourceLabelJs(metric.source));
@@ -1550,7 +1736,7 @@ <h2 id="runs-heading">Runs</h2>
     var rows = agents.map(function (agent) {
       agent = agent || {};
       var nameCell = [
-        document.createTextNode((agent.agent_name || agent.agent_id || "Not reported") + " "),
+        document.createTextNode((agent.agent_name || agent.agent_id || "—") + " "),
         renderIdentityAvailabilityBadge(agent.agent_id),
       ];
       var sourceCell = renderSourceKindBadge(agent.source_kind);
@@ -1558,7 +1744,7 @@ <h2 id="runs-heading">Runs</h2>
       return [
         nameCell,
         sourceCell,
-        agent.model || "Not reported",
+        agent.model || "—",
         renderLastSeenJs(agent.last_seen),
         buildDrilldownButton(
           "agents",
@@ -1571,23 +1757,59 @@ <h2 id="runs-heading">Runs</h2>
           "View " + String(agent.invocations || 0) + " invocations for " + (agent.agent_name || agent.agent_id || "this agent")
         ),
         renderFailureRate(agent.invocations, agent.failures),
-        renderMaybeMissing(agent.p95_latency_ms, { suffix: " ms" }),
-        renderMaybeMissing(agent.input_tokens),
-        renderMaybeMissing(agent.output_tokens),
-        renderMaybeMissing(observedTokenTotal(agent.input_tokens, agent.output_tokens)),
+        renderMillisecondsAsSeconds(agent.p95_latency_ms),
+        renderMaybeMissing(agent.input_tokens, { missingText: "—" }),
+        renderMaybeMissing(agent.output_tokens, { missingText: "—" }),
+        renderMaybeMissing(observedTokenTotal(agent.input_tokens, agent.output_tokens), { missingText: "—" }),
+        renderMaybeMissing(agent.cache_read_tokens, { missingText: "—" }),
+        renderMaybeMissing(agent.cache_write_tokens, { missingText: "—" }),
+        renderMaybeMissing(agent.reasoning_tokens, { missingText: "—" }),
         buildAgentDetailButton(agent),
       ];
     });
+    var totalInvocations = sumReported(agents, "invocations");
+    var totalFailures = sumReported(agents, "failures");
+    var totalInput = sumReported(agents, "input_tokens");
+    var totalOutput = sumReported(agents, "output_tokens");
+    var tokenHelp = "Observed token usage from telemetry; this is not billing data.";
     var table = buildDataTable(
       "observe-agents-table",
       "Agents observed in the selected range",
-      ["Agent", "Source", "Model", "Last seen", "Invocations", "Failure rate", "p95 latency", "Input tokens", "Output tokens", "Total tokens", "Details"],
-      rows
+      [
+        "Agent",
+        "Source",
+        { label: "Model", help: "Model identifier reported by response telemetry." },
+        { label: "Last seen", help: "Most recent telemetry in the selected range; not agent lifecycle status." },
+        "Invocations",
+        { label: "Failure rate", help: "Failures divided by invocations." },
+        { label: "p95 latency", help: "95% of observed invocations completed in this time or less." },
+        { label: "Input tokens", help: tokenHelp },
+        { label: "Output tokens", help: tokenHelp },
+        { label: "Total tokens", help: tokenHelp },
+        { label: "Cache read", help: "Tokens served from the prompt cache. " + tokenHelp },
+        { label: "Cache write", help: "Tokens written to the prompt cache. " + tokenHelp },
+        { label: "Reasoning", help: "Reasoning tokens reported by the model provider. " + tokenHelp },
+        "Details"
+      ],
+      rows,
+      [
+        [document.createTextNode("Totals "), infoIcon("Totals cover the rows currently displayed.")],
+        "—",
+        "—",
+        "—",
+        renderMaybeMissing(totalInvocations, { missingText: "—" }),
+        renderFailureRate(totalInvocations, totalFailures),
+        "—",
+        renderMaybeMissing(totalInput, { missingText: "—" }),
+        renderMaybeMissing(totalOutput, { missingText: "—" }),
+        renderMaybeMissing(observedTokenTotal(totalInput, totalOutput), { missingText: "—" }),
+        renderMaybeMissing(sumReported(agents, "cache_read_tokens"), { missingText: "—" }),
+        renderMaybeMissing(sumReported(agents, "cache_write_tokens"), { missingText: "—" }),
+        renderMaybeMissing(sumReported(agents, "reasoning_tokens"), { missingText: "—" }),
+        "—"
+      ]
     );
-    setViewContent("agents", [
-      makeEl("p", "observe-hint", "Token columns show observed usage, not billing data."),
-      table,
-    ]);
+    setViewContent("agents", [table]);
   }
 
   // ---------------------------------------------------------------------
@@ -1869,8 +2091,8 @@ <h2 id="runs-heading">Runs</h2>
     var rows = usage.map(function (entry) {
       entry = entry || {};
       return [
-        entry.model || entry.deployment || "Not reported",
-        entry.deployment || "Not reported",
+        entry.model || "—",
+        entry.deployment || "—",
         buildDrilldownButton(
           "models",
           {
@@ -1883,27 +2105,61 @@ <h2 id="runs-heading">Runs</h2>
           "View " + String(entry.requests || 0) + " requests for " + (entry.model || entry.deployment || "this model")
         ),
         renderFailureRate(entry.requests, entry.failures),
-        renderMaybeMissing(entry.p95_latency_ms, { suffix: " ms" }),
-        renderMaybeMissing(entry.input_tokens),
-        renderMaybeMissing(entry.output_tokens),
-        renderMaybeMissing(observedTokenTotal(entry.input_tokens, entry.output_tokens)),
-        renderMaybeMissing(entry.cache_read_tokens),
-        renderMaybeMissing(entry.cache_write_tokens),
-        renderMaybeMissing(entry.reasoning_tokens),
+        renderMillisecondsAsSeconds(entry.p95_latency_ms),
+        renderMaybeMissing(entry.input_tokens, { missingText: "—" }),
+        renderMaybeMissing(entry.output_tokens, { missingText: "—" }),
+        renderMaybeMissing(observedTokenTotal(entry.input_tokens, entry.output_tokens), { missingText: "—" }),
+        renderMaybeMissing(entry.cache_read_tokens, { missingText: "—" }),
+        renderMaybeMissing(entry.cache_write_tokens, { missingText: "—" }),
+        renderMaybeMissing(entry.reasoning_tokens, { missingText: "—" }),
         renderAdditionalTokenClasses(entry),
         renderLastSeenJs(entry.last_seen),
       ];
     });
+    var totalRequests = sumReported(usage, "requests");
+    var totalFailures = sumReported(usage, "failures");
+    var totalInput = sumReported(usage, "input_tokens");
+    var totalOutput = sumReported(usage, "output_tokens");
+    var tokenHelp = "Observed token usage from telemetry; this is not billing data.";
     var table = buildDataTable(
       "observe-usage-table",
       "Model usage observed in the selected range",
-      ["Model", "Deployment", "Requests", "Failure rate", "p95 latency", "Input tokens", "Output tokens", "Total tokens", "Cache read", "Cache write", "Reasoning", "Other token classes", "Last seen"],
-      rows
+      [
+        { label: "Model", help: "Model identifier reported by response telemetry." },
+        { label: "Deployment", help: "Requested Azure OpenAI deployment reported by telemetry." },
+        "Requests",
+        { label: "Failure rate", help: "Failures divided by requests." },
+        { label: "p95 latency", help: "95% of observed model requests completed in this time or less." },
+        { label: "Input tokens", help: tokenHelp },
+        { label: "Output tokens", help: tokenHelp },
+        { label: "Total tokens", help: tokenHelp },
+        { label: "Cache read", help: "Tokens served from the prompt cache. " + tokenHelp },
+        { label: "Cache write", help: "Tokens written to the prompt cache. " + tokenHelp },
+        { label: "Reasoning", help: "Reasoning tokens reported by the model provider. " + tokenHelp },
+        {
+          label: "Other token classes",
+          help: "Additional gen_ai.usage.* classes. A row information icon means some telemetry records omitted token-class attributes."
+        },
+        { label: "Last seen", help: "Most recent telemetry in the selected range." }
+      ],
+      rows,
+      [
+        [document.createTextNode("Totals "), infoIcon("Totals cover the rows currently displayed.")],
+        "—",
+        renderMaybeMissing(totalRequests, { missingText: "—" }),
+        renderFailureRate(totalRequests, totalFailures),
+        "—",
+        renderMaybeMissing(totalInput, { missingText: "—" }),
+        renderMaybeMissing(totalOutput, { missingText: "—" }),
+        renderMaybeMissing(observedTokenTotal(totalInput, totalOutput), { missingText: "—" }),
+        renderMaybeMissing(sumReported(usage, "cache_read_tokens"), { missingText: "—" }),
+        renderMaybeMissing(sumReported(usage, "cache_write_tokens"), { missingText: "—" }),
+        renderMaybeMissing(sumReported(usage, "reasoning_tokens"), { missingText: "—" }),
+        "—",
+        "—"
+      ]
     );
-    setViewContent("usage", [
-      makeEl("p", "observe-hint", "Token columns show observed usage, not billing data."),
-      table,
-    ]);
+    setViewContent("usage", [table]);
   }
 
   function renderTools(data, diagnostics, bounds) {
@@ -1919,9 +2175,9 @@ <h2 id="runs-heading">Runs</h2>
     var rows = tools.map(function (tool) {
       tool = tool || {};
       return [
-        tool.tool_name || "Not reported",
-        tool.agent_name || tool.agent_id || tool.agent_key || "Not reported",
-        tool.source_id || "Not reported",
+        tool.tool_name || "—",
+        tool.agent_name || tool.agent_id || tool.agent_key || "—",
+        tool.source_id || "—",
         renderSourceKindBadge(tool.source_kind),
         renderLastSeenJs(tool.last_seen),
         buildDrilldownButton(
@@ -1935,15 +2191,36 @@ <h2 id="runs-heading">Runs</h2>
           tool.invocations,
           "View " + String(tool.invocations || 0) + " invocations for " + (tool.tool_name || "this tool")
         ),
-        renderMaybeMissing(tool.failures),
-        renderMaybeMissing(tool.p95_latency_ms, { suffix: " ms", missingText: "Not measured" }),
+        renderMaybeMissing(tool.failures, { missingText: "—" }),
+        renderMillisecondsAsSeconds(tool.p95_latency_ms),
       ];
     });
+    var totalInvocations = sumReported(tools, "invocations");
+    var totalFailures = sumReported(tools, "failures");
     var table = buildDataTable(
       "observe-tools-table",
       "Tools observed in the selected range",
-      ["Tool", "Agent", "Source", "Runtime", "Last seen", "Invocations", "Failures", "p95 latency"],
-      rows
+      [
+        "Tool",
+        "Agent",
+        "Source",
+        "Runtime",
+        { label: "Last seen", help: "Most recent telemetry in the selected range." },
+        "Invocations",
+        "Failures",
+        { label: "p95 latency", help: "95% of observed tool invocations completed in this time or less." }
+      ],
+      rows,
+      [
+        [document.createTextNode("Totals "), infoIcon("Totals cover the rows currently displayed.")],
+        "—",
+        "—",
+        "—",
+        "—",
+        renderMaybeMissing(totalInvocations, { missingText: "—" }),
+        renderMaybeMissing(totalFailures, { missingText: "—" }),
+        "—"
+      ]
     );
     setViewContent("tools", [notice, table]);
   }
@@ -1961,14 +2238,14 @@ <h2 id="runs-heading">Runs</h2>
     var rows = runs.map(function (run) {
       run = run || {};
       return [
-        run.run_key || "Not reported",
-        run.run_key_kind || "Not reported",
-        run.agent_name || run.agent_id || run.agent_key || "Not reported",
-        run.source_id || "Not reported",
+        run.run_key || "—",
+        run.run_key_kind || "—",
+        run.agent_name || run.agent_id || run.agent_key || "—",
+        run.source_id || "—",
         renderSourceKindBadge(run.source_kind),
-        run.started_at || "Not reported",
-        renderMaybeMissing(run.duration_ms, { suffix: " ms" }),
-        run.status || "Not reported",
+        renderTimestampJs(run.started_at),
+        renderMillisecondsAsSeconds(run.duration_ms),
+        run.status || "—",
         buildDrilldownButton(
           "runs",
           {
@@ -1980,20 +2257,60 @@ <h2 id="runs-heading">Runs</h2>
           run.turns,
           "View activity for run " + (run.run_key || "")
         ),
-        renderMaybeMissing(run.tool_invocations),
-        renderMaybeMissing(run.input_tokens, { missingText: "Not available" }),
-        renderMaybeMissing(run.output_tokens, { missingText: "Not available" }),
-        renderMaybeMissing(observedTokenTotal(run.input_tokens, run.output_tokens), { missingText: "Not available" }),
+        renderMaybeMissing(run.tool_invocations, { missingText: "—" }),
+        renderMaybeMissing(run.input_tokens, { missingText: "—" }),
+        renderMaybeMissing(run.output_tokens, { missingText: "—" }),
+        renderMaybeMissing(observedTokenTotal(run.input_tokens, run.output_tokens), { missingText: "—" }),
+        renderMaybeMissing(run.cache_read_tokens, { missingText: "—" }),
+        renderMaybeMissing(run.cache_write_tokens, { missingText: "—" }),
+        renderMaybeMissing(run.reasoning_tokens, { missingText: "—" }),
       ];
     });
-    var hint = makeEl("p", "observe-hint", "Start, duration, and turns describe activity within the selected range.");
+    var totalInput = sumReported(runs, "input_tokens");
+    var totalOutput = sumReported(runs, "output_tokens");
+    var tokenHelp = "Observed token usage from telemetry; this is not billing data.";
     var table = buildDataTable(
       "observe-runs-table",
       "Runs observed in the selected range",
-      ["Run key", "Correlation", "Agent", "Source", "Runtime", "Started in range", "Duration in range", "Status", "Turns in range", "Tool invocations", "Input tokens", "Output tokens", "Total tokens"],
-      rows
+      [
+        "Run key",
+        { label: "Correlation", help: "Telemetry key used to group this run." },
+        "Agent",
+        "Source",
+        "Runtime",
+        { label: "Started in range", help: "First observed activity within the selected range." },
+        { label: "Duration in range", help: "Elapsed time between first and last observed activity in the selected range." },
+        "Status",
+        { label: "Turns in range", help: "Turns observed within the selected range." },
+        "Tool invocations",
+        { label: "Input tokens", help: tokenHelp },
+        { label: "Output tokens", help: tokenHelp },
+        { label: "Total tokens", help: tokenHelp },
+        { label: "Cache read", help: "Tokens served from the prompt cache. " + tokenHelp },
+        { label: "Cache write", help: "Tokens written to the prompt cache. " + tokenHelp },
+        { label: "Reasoning", help: "Reasoning tokens reported by the model provider. " + tokenHelp }
+      ],
+      rows,
+      [
+        [document.createTextNode("Totals "), infoIcon("Totals cover the rows currently displayed.")],
+        "—",
+        "—",
+        "—",
+        "—",
+        "—",
+        renderMillisecondsAsSeconds(sumReported(runs, "duration_ms")),
+        "—",
+        renderMaybeMissing(sumReported(runs, "turns"), { missingText: "—" }),
+        renderMaybeMissing(sumReported(runs, "tool_invocations"), { missingText: "—" }),
+        renderMaybeMissing(totalInput, { missingText: "—" }),
+        renderMaybeMissing(totalOutput, { missingText: "—" }),
+        renderMaybeMissing(observedTokenTotal(totalInput, totalOutput), { missingText: "—" }),
+        renderMaybeMissing(sumReported(runs, "cache_read_tokens"), { missingText: "—" }),
+        renderMaybeMissing(sumReported(runs, "cache_write_tokens"), { missingText: "—" }),
+        renderMaybeMissing(sumReported(runs, "reasoning_tokens"), { missingText: "—" })
+      ]
     );
-    setViewContent("runs", [notice, hint, table]);
+    setViewContent("runs", [notice, table]);
   }
 
   function costLabel(value) {
@@ -2297,10 +2614,8 @@ <h2 id="runs-heading">Runs</h2>
         "; Fallback: " + (fallback ? "Yes" : "No");
       var shown = component.rows_shown;
       var total = component.rows_total;
-      var rowCount = String(shown === null || shown === undefined ? "Not reported" : shown);
-      if (total === null || total === undefined) {
-        rowCount += " / total unknown";
-      } else {
+      var rowCount = String(shown === null || shown === undefined ? "—" : shown);
+      if (total !== null && total !== undefined) {
         var omitted = Math.max(Number(total) - Number(shown || 0), 0);
         rowCount += " / " + String(total);
         if (omitted) rowCount += " (" + String(omitted) + " omitted)";
@@ -2555,10 +2870,12 @@ <h2 id="runs-heading">Runs</h2>
     var shown = bounds.rows_shown;
     var total = bounds.rows_total_in_scope;
     var text = total === null || total === undefined
-      ? "Showing " + String(shown === null || shown === undefined ? "an unknown number of" : shown) +
-        " rows; total unknown."
-      : "Showing " + String(shown === null || shown === undefined ? "an unknown number of" : shown) +
-        " of " + String(total) + " rows in scope" +
+      ? (shown === null || shown === undefined
+        ? "Showing available rows."
+        : "Showing " + String(shown) + " rows.")
+      : (shown === null || shown === undefined
+        ? String(total) + " rows in scope"
+        : "Showing " + String(shown) + " of " + String(total) + " rows in scope") +
         (bounds.truncated ? "; results are truncated." : ".");
     return makeEl("p", "observe-hint observe-cost-bounds-notice", text);
   }
@@ -2965,7 +3282,7 @@ <h2 id="runs-heading">Runs</h2>
         return response.json().then(function (body) {
           if (myToken !== requestToken) return null;
           renderObserveResponse(body);
-          setRefreshStatus("Refreshed " + new Date().toISOString());
+          setRefreshStatus("Refreshed " + compactTimestamp(new Date().toISOString()));
           return body;
         });
       })
@@ -3037,7 +3354,7 @@ <h2 id="runs-heading">Runs</h2>
             return null;
           }
           renderObserveResponse(body);
-          setRefreshStatus("Refreshed " + new Date().toISOString());
+          setRefreshStatus("Refreshed " + compactTimestamp(new Date().toISOString()));
           return body;
         });
       })
@@ -3081,26 +3398,6 @@ <h2 id="runs-heading">Runs</h2>
     });
   }
 
-  function setupThemeToggle() {
-    var toggle = document.querySelector("[data-observe-theme-toggle]");
-    if (!toggle) return;
-    var root = document.documentElement;
-    function apply(theme) {
-      root.setAttribute("data-theme", theme);
-      var isLight = theme === "light";
-      toggle.setAttribute("aria-pressed", isLight ? "true" : "false");
-      var icon = toggle.querySelector("[data-observe-theme-icon]");
-      if (icon) icon.textContent = isLight ? "☀" : "☽";
-      var label = toggle.querySelector("[data-observe-theme-label]");
-      if (label) label.textContent = isLight ? "Light" : "Dark";
-    }
-    // In-memory only: never persisted to storage or cookies.
-    apply(root.getAttribute("data-theme") === "light" ? "light" : "dark");
-    toggle.addEventListener("click", function () {
-      apply(root.getAttribute("data-theme") === "light" ? "dark" : "light");
-    });
-  }
-
   function init() {
     appliedFilters = readAppliedFromUrl();
     var form = document.getElementById("observe-filter-form");
@@ -3229,7 +3526,7 @@ <h2 id="runs-heading">Runs</h2>
       fetchObserveData(false);
     });
     activateView(currentView);
-    setupThemeToggle();
+    setupAgentOpsThemeToggle();
     enhanceSortableTables(document);
     syncUrl();
     scheduleAutoRefresh();
diff --git a/tests/unit/__snapshots__/observe_styles.css b/tests/unit/__snapshots__/observe_styles.css
index c194baf0..ddaf748b 100644
--- a/tests/unit/__snapshots__/observe_styles.css
+++ b/tests/unit/__snapshots__/observe_styles.css
@@ -459,7 +459,37 @@ th[aria-sort="descending"] .observe-sort-button::after {
   outline: 2px solid var(--observe-accent);
   outline-offset: 3px;
 }
+.observe-info-icon {
+  align-items: center;
+  border: 1px solid currentColor;
+  border-radius: 50%;
+  color: var(--observe-muted);
+  cursor: help;
+  display: inline-flex;
+  font-size: 9px;
+  font-style: normal;
+  font-weight: 800;
+  height: 14px;
+  justify-content: center;
+  line-height: 1;
+  margin-left: 5px;
+  text-transform: none;
+  vertical-align: middle;
+  width: 14px;
+}
+.observe-info-icon:focus-visible {
+  color: var(--observe-accent);
+  outline: 2px solid var(--observe-accent);
+  outline-offset: 2px;
+}
 tbody tr:hover td { background: color-mix(in srgb, var(--observe-fg) 4%, transparent); }
+tfoot th,
+tfoot td {
+  background: color-mix(in srgb, var(--observe-card-bg) 92%, var(--observe-accent));
+  border-top: 1px solid var(--observe-border-strong);
+  border-bottom: 0;
+  font-weight: 700;
+}
 .observe-drilldown-button {
   appearance: none;
   background: transparent;
diff --git a/tests/unit/test_cockpit.py b/tests/unit/test_cockpit.py
index 9048c807..7638ee96 100644
--- a/tests/unit/test_cockpit.py
+++ b/tests/unit/test_cockpit.py
@@ -174,6 +174,18 @@ def test_empty_workspace_yields_empty_state(tmp_path: Path):
     assert "Not assessed" in html
 
 
+def test_cockpit_uses_shared_url_theme_control(tmp_path: Path):
+    html = render_cockpit_html(build_cockpit_payload(tmp_path, time_range=_WIDE))
+    assert 'id="cockpit-theme-toggle"' in html
+    assert 'data-aos-theme-toggle' in html
+    assert 'href="/observe" data-theme-link' in html
+    assert "setupAgentOpsThemeToggle();" in html
+    assert '[data-theme="light"]' in html
+    assert "localStorage" not in html
+    assert "sessionStorage" not in html
+    assert "document.cookie" not in html
+
+
 def test_telemetry_status_reflects_env(tmp_path: Path, monkeypatch):
     monkeypatch.delenv("APPLICATIONINSIGHTS_CONNECTION_STRING", raising=False)
     monkeypatch.delenv("AGENTOPS_APPLICATIONINSIGHTS_CONNECTION_STRING", raising=False)
diff --git a/tests/unit/test_observe_queries.py b/tests/unit/test_observe_queries.py
index c804117b..95347d2d 100644
--- a/tests/unit/test_observe_queries.py
+++ b/tests/unit/test_observe_queries.py
@@ -187,6 +187,10 @@ def test_agents_query_applies_dimension_filters_and_bounds_rows() -> None:
     assert "gen_ai.azure_ai_project.id" in query
     assert "agent-1" in query
     assert "gpt-4o" in query
+    assert (
+        'coalesce(Properties["gen_ai.response.model"], '
+        'Properties["gen_ai.request.model"])'
+    ) in query
     assert f"| take {MAX_ROWS_PER_QUERY}" in query
     assert "let total_in_scope = toscalar(agg | count);" in query
     assert "| extend total_in_scope = total_in_scope" in query
@@ -228,6 +232,14 @@ def test_agent_and_model_queries_preserve_project_for_shared_workspace() -> None
 
 def test_models_query_summarizes_by_model_and_deployment() -> None:
     query = build_models_query(_filters())
+    assert (
+        'model = tostring(coalesce(Properties["gen_ai.response.model"], '
+        'Properties["gen_ai.request.model"]))'
+    ) in query
+    assert (
+        'deployment = tostring(coalesce(Properties["gen_ai.request.deployment"], '
+        'Properties["gen_ai.request.model"]))'
+    ) in query
     assert "by project_resource_id, model, deployment" in query
     assert "| sort by requests desc" in query
     assert f"| take {MAX_ROWS_PER_QUERY}" in query
@@ -308,6 +320,10 @@ def test_drilldown_query_is_bounded_and_metadata_only(
     assert f"tolower(project_resource_id) == '{_PROJECT_ARM_ID.lower()}'" in query
     assert "| take 51" in query
     assert "trace_id = tostring(OperationId)" in query
+    assert (
+        'deployment = tostring(coalesce(Properties["gen_ai.request.deployment"], '
+        'Properties["gen_ai.request.model"]))'
+    ) in query
     assert "Properties[\"gen_ai.prompt\"]" not in query
     assert "AppGenAIContent" not in query
 
@@ -349,13 +365,26 @@ def test_models_query_projects_unmapped_usage_attributes_in_one_bounded_query()
     assert "| extend total_in_scope = total_in_scope" in query
 
 
-def test_granular_classes_do_not_change_agents_or_combined_usage_queries() -> None:
-    for query in (build_agents_query(_filters()), build_usage_query(_filters())):
-        assert "cache_read_tokens" not in query
-        assert "cache_write_tokens" not in query
-        assert "reasoning_tokens" not in query
-        assert "extra_token_classes" not in query
-        assert "bag_keys(Properties)" not in query
+def test_agents_query_aggregates_standard_granular_token_classes() -> None:
+    query = build_agents_query(_filters())
+    for token_class in ("cache_read_tokens", "cache_write_tokens", "reasoning_tokens"):
+        assert f"{token_class} = sum({token_class})" in query
+    for reporting_counter in (
+        "cache_read_reporting_records",
+        "cache_write_reporting_records",
+        "reasoning_reporting_records",
+    ):
+        assert reporting_counter in query
+    assert "extra_token_classes" not in query
+    assert "bag_keys(Properties)" not in query
+
+
+def test_combined_usage_query_remains_limited_to_input_and_output_tokens() -> None:
+    query = build_usage_query(_filters())
+    for token_class in ("cache_read_tokens", "cache_write_tokens", "reasoning_tokens"):
+        assert token_class not in query
+    assert "extra_token_classes" not in query
+    assert "bag_keys(Properties)" not in query
 
 
 def test_models_query_does_not_filter_by_runtime_or_model_family() -> None:
@@ -434,6 +463,10 @@ def test_cost_department_query_filters_real_dimensions_before_aggregation() -> N
     ):
         assert expected in query
         assert query.index(expected) < summarize
+    assert (
+        'deployment = tostring(coalesce(Properties["gen_ai.request.deployment"], '
+        'Properties["gen_ai.request.model"]))'
+    ) in query
     assert "by department_id, department_label, mapping_state, identity_state" in query
     assert "provider_name" in query.rsplit("| project ", 1)[1]
 
@@ -610,6 +643,10 @@ def test_cost_user_query_preserves_runtime_evidence_for_exact_matching() -> None
     )
 
     assert "| where deployment in ('gpt-prod')" in query
+    assert (
+        'deployment = tostring(coalesce(Properties["gen_ai.request.deployment"], '
+        'Properties["gen_ai.request.model"]))'
+    ) in query
     assert "by user_key, raw_identity, project_resource_id" in query
     final_projection = query.rsplit("| project ", 1)[1]
     for dimension in ("agent_id", "agent_name", "provider_name", "system"):
diff --git a/tests/unit/test_observe_service.py b/tests/unit/test_observe_service.py
index 5d2bc122..c22662f6 100644
--- a/tests/unit/test_observe_service.py
+++ b/tests/unit/test_observe_service.py
@@ -347,6 +347,9 @@ def test_normalize_agent_row_attributes_project_and_foundry_resource() -> None:
         "p95_latency_ms": 120.0,
         "input_tokens": 100,
         "output_tokens": 50,
+        "cache_read_tokens": 25,
+        "cache_write_tokens": 5,
+        "reasoning_tokens": 10,
         "last_seen": datetime(2024, 1, 1, 12, tzinfo=timezone.utc),
     }
     agent = normalize_agent_row(row, source=source)
@@ -357,6 +360,9 @@ def test_normalize_agent_row_attributes_project_and_foundry_resource() -> None:
     assert agent.foundry_resource_id == source.foundry_resource_id
     assert agent.invocations == 10
     assert agent.failures == 2
+    assert agent.cache_read_tokens == 25
+    assert agent.cache_write_tokens == 5
+    assert agent.reasoning_tokens == 10
 
 
 def test_normalize_agent_row_classifies_external_agent_by_name_only() -> None:
diff --git a/tests/unit/test_observe_ui.py b/tests/unit/test_observe_ui.py
index 5b1afa5b..50f16b42 100644
--- a/tests/unit/test_observe_ui.py
+++ b/tests/unit/test_observe_ui.py
@@ -529,17 +529,18 @@ def test_render_refreshed_at_missing() -> None:
     assert "not yet refreshed" in html
 
 
-def test_render_last_seen_includes_non_lifecycle_disclaimer() -> None:
+def test_render_last_seen_uses_compact_utc_timestamp() -> None:
     html = ui.render_last_seen(_dt(3))
-    assert "2024-01-01T03:00:00Z" in html
-    assert "not agent lifecycle status" in html
+    assert 'datetime="2024-01-01T03:00:00Z"' in html
+    assert ">2024-01-01 03:00:00 UTC<" in html
+    assert "not agent lifecycle status" not in html
 
 
 def test_render_last_seen_missing_uses_metric_missing_class() -> None:
     html = ui.render_last_seen(None)
     assert "metric-missing" in html
-    assert "not reported" in html
-    assert "not agent lifecycle status" in html
+    assert "\u2014" in html
+    assert "not reported" not in html.lower()
 
 
 # ---------------------------------------------------------------------------
@@ -582,9 +583,9 @@ def test_render_failure_rate_zero_invocations_is_no_invocations_not_divide_by_ze
     assert "No invocations" in html
 
 
-def test_render_token_totals_includes_observed_usage_disclaimer() -> None:
+def test_render_token_totals_omits_repeated_usage_disclaimer() -> None:
     html = ui._render_token_totals(100, 0)
-    assert "observed usage, not billing data" in html
+    assert "observed usage, not billing data" not in html
     assert "metric-zero" in html  # output tokens == 0 rendered distinctly from missing
     assert "100" in html
 
@@ -681,11 +682,25 @@ def test_render_agents_table_renders_expected_columns() -> None:
         "Output tokens",
         "Total tokens",
     ):
-        assert f">{heading}<" in html
+        assert f'data-label="{heading}"' in html
     assert "Agent A" in html
     assert "gpt-4o" in html
 
 
+def test_render_agents_table_uses_seconds_and_totals_reported_columns() -> None:
+    html = ui.render_agents_table(
+        [
+            _agent(invocations=10, failures=1, p95_latency_ms=12_763),
+            _agent(invocations=20, failures=2, input_tokens=50, output_tokens=75),
+        ]
+    )
+    assert "12.763 s" in html
+    assert "<tfoot>" in html
+    assert ">30<" in html
+    assert ">150<" in html
+    assert ">275<" in html
+
+
 def test_render_agents_table_shows_source_kind_and_identity_badges() -> None:
     html = ui.render_agents_table([_agent()])
     assert "Foundry Hosted" in html
@@ -693,9 +708,10 @@ def test_render_agents_table_shows_source_kind_and_identity_badges() -> None:
     assert "source-a" in html
 
 
-def test_render_agents_table_missing_agent_id_shows_identity_not_reported() -> None:
+def test_render_agents_table_missing_agent_id_shows_identity_unavailable() -> None:
     html = ui.render_agents_table([_agent(agent_id=None, agent_name=None)])
-    assert "Identity not reported" in html
+    assert "Identity unavailable" in html
+    assert "Identity not reported" not in html
 
 
 def test_render_agents_table_zero_invocations_distinct_from_missing_latency() -> None:
@@ -1418,26 +1434,28 @@ def test_render_tools_table_shows_source_latency_and_known_bounds() -> None:
         bounds={"rows_shown": 1, "rows_total_in_scope": 3, "truncated": True},
     )
     for heading in ("Tool", "Agent", "Source", "Runtime", "Last seen", "Invocations", "Failures", "p95 latency"):
-        assert f">{heading}<" in html
+        assert f'data-label="{heading}"' in html
     assert "search_documents" in html
     assert "source-a" in html
     assert "Foundry Prompt" in html
     assert "Showing 1 of 3 rows in scope." in html
 
 
-def test_render_tools_table_marks_absent_latency_not_measured_and_escapes_values() -> None:
+def test_render_tools_table_marks_absent_latency_with_dash_and_escapes_values() -> None:
     html = ui.render_tools_table(
         [_tool(tool_name='<tool "name">', source_id="<source>", p95_latency_ms=None)]
     )
-    assert "Not measured" in html
+    assert "Not measured" not in html
+    assert "\u2014" in html
     assert "metric-missing" in html
     assert "&lt;tool &quot;name&quot;&gt;" in html
     assert "&lt;source&gt;" in html
 
 
-def test_render_tools_table_empty_is_explained_and_total_is_unknown() -> None:
+def test_render_tools_table_empty_is_explained_without_unknown_total() -> None:
     html = ui.render_tools_table([], bounds={"rows_shown": 0, "rows_total_in_scope": None})
-    assert "Showing 0 rows; total unknown." in html
+    assert "Showing 0 rows." in html
+    assert "unknown" not in html.lower()
     assert "No tool activity was found" in html
     assert "Tool attribution may not be reported" in html
 
@@ -1459,27 +1477,31 @@ def test_render_runs_table_shows_correlation_range_scope_source_and_tokens() ->
         "Output tokens",
         "Total tokens",
     ):
-        assert f">{heading}<" in html
+        assert f'data-label="{heading}"' in html
     assert "conversation-123" in html
     assert "conversation" in html
     assert "source-a" in html
     assert "activity within the selected range" in html
     assert "Showing 1 of 4 rows in scope." in html
+    assert "60.000 s" in html
+    assert "<tfoot>" in html
 
 
-def test_render_runs_table_marks_absent_tokens_not_available_and_escapes_values() -> None:
+def test_render_runs_table_marks_absent_tokens_with_dash_and_escapes_values() -> None:
     html = ui.render_runs_table(
         [_run(run_key='<run "key">', source_id="<source>", input_tokens=None, output_tokens=None)]
     )
-    assert "Not available" in html
+    assert "Not available" not in html
+    assert "\u2014" in html
     assert "metric-missing" in html
     assert "&lt;run &quot;key&quot;&gt;" in html
     assert "&lt;source&gt;" in html
 
 
-def test_render_runs_table_empty_is_explained_and_total_is_unknown() -> None:
+def test_render_runs_table_empty_is_explained_without_unknown_total() -> None:
     html = ui.render_runs_table([], bounds={"rows_shown": 0, "rows_total_in_scope": None})
-    assert "Showing 0 rows; total unknown." in html
+    assert "Showing 0 rows." in html
+    assert "unknown" not in html.lower()
     assert "No runs could be correlated" in html
     assert "Run correlation may not be reported" in html
 
@@ -1492,7 +1514,7 @@ def test_render_runs_table_empty_is_explained_and_total_is_unknown() -> None:
         ("external_registered", "External Registered", "warn"),
         ("external_unregistered", "External Unregistered", "warn"),
         ("copilot_studio", "Copilot Studio", "warn"),
-        ("unknown", "Unknown", "muted"),
+        ("unknown", "Unclassified", "muted"),
     ],
 )
 def test_source_kind_badge_covers_all_refined_runtime_kinds(
@@ -1503,6 +1525,13 @@ def test_source_kind_badge_covers_all_refined_runtime_kinds(
     assert f"observe-tone-{tone}" in html
 
 
+def test_unclassified_source_kind_explains_missing_attribution() -> None:
+    html = ui._render_source_kind_badge("unknown")
+    assert "Unclassified" in html
+    assert "could not be classified" in html
+    assert ">Unknown<" not in html
+
+
 # ---------------------------------------------------------------------------
 # Models / usage table (T050/T052)
 # ---------------------------------------------------------------------------
@@ -1537,10 +1566,17 @@ def test_render_models_usage_table_includes_observed_usage_wording() -> None:
     assert "gpt-4o-deploy" in html
 
 
+def test_render_models_usage_table_does_not_present_deployment_as_model() -> None:
+    html = ui.render_models_usage_table(
+        [_usage(model=None, deployment="deployment-only")]
+    )
+    assert "<tr><td>\u2014</td><td>deployment-only</td>" in html
+
+
 def test_render_models_usage_table_last_seen_nullable_renders_missing() -> None:
     html = ui.render_models_usage_table([_usage(last_seen=None)])
     assert "metric-missing" in html
-    assert "not agent lifecycle status" in html
+    assert "not agent lifecycle status" not in html
 
 
 def test_render_models_usage_table_zero_failures_is_distinct_from_missing() -> None:
@@ -1563,9 +1599,10 @@ def test_render_models_usage_table_renders_each_token_class_and_partial_state()
     assert "Cache read" in html
     assert "Cache write" in html
     assert "Reasoning" in html
-    assert "Partial class coverage" in html
+    assert "Some telemetry records omitted one or more token-class attributes" in html
+    assert "Partial class coverage" not in html
     assert "metric-zero" in html
-    assert "Not reported" in html
+    assert "\u2014" in html
     assert "observed usage, not billing data" in html
 
 
@@ -1584,15 +1621,18 @@ def test_render_models_usage_table_marks_intermittent_class_reporting() -> None:
 
     assert "Cache read" in html
     assert ">8<" in html
-    assert "Partial class coverage" in html
+    assert "Some telemetry records omitted one or more token-class attributes" in html
+    assert "Partial class coverage" not in html
 
 
 def test_script_models_renderer_mirrors_token_class_fields_and_labels() -> None:
     script = ui._OBSERVE_SCRIPT
     for field in ("cache_read_tokens", "cache_write_tokens", "reasoning_tokens"):
         assert f"entry.{field}" in script
-    for label in ("Cache read", "Cache write", "Reasoning", "Partial class coverage"):
+    for label in ("Cache read", "Cache write", "Reasoning"):
         assert label in script
+    assert "Some telemetry records omitted one or more token-class attributes" in script
+    assert "Partial class coverage" not in script
 
 
 def test_models_renderers_show_additional_classes_and_truncation() -> None:
@@ -1618,9 +1658,9 @@ def test_token_totals_are_rendered_in_separate_columns() -> None:
     agents_html = ui.render_agents_table([_agent(input_tokens=1000, output_tokens=2000)])
     models_html = ui.render_models_usage_table([_usage(input_tokens=1000, output_tokens=2000)])
     for html in (agents_html, models_html):
-        assert ">Input tokens<" in html
-        assert ">Output tokens<" in html
-        assert ">Total tokens<" in html
+        assert 'data-label="Input tokens"' in html
+        assert 'data-label="Output tokens"' in html
+        assert 'data-label="Total tokens"' in html
         assert ">1,000<" in html
         assert ">2,000<" in html
         assert ">3,000<" in html
@@ -1639,10 +1679,10 @@ def test_models_row_with_only_totals_adds_no_partial_indicator() -> None:
             )
         ]
     )
-    assert ">Input tokens<" in html
-    assert ">Output tokens<" in html
-    assert ">Total tokens<" in html
-    assert html.count("Not reported") == 4
+    assert 'data-label="Input tokens"' in html
+    assert 'data-label="Output tokens"' in html
+    assert 'data-label="Total tokens"' in html
+    assert "Not reported" not in html
     assert "Partial class coverage" not in html
     assert "observed usage, not billing data" in html
 
@@ -2240,12 +2280,12 @@ def test_script_tools_and_runs_render_sources_bounds_and_explained_empty_states(
     for function_name, source_field, empty_copy in (
         (
             "function renderTools(data, diagnostics, bounds)",
-            "tool.source_id || \"Not reported\"",
+            "tool.source_id || \"\u2014\"",
             "No tool activity was found for the selected filters.",
         ),
         (
             "function renderRuns(data, diagnostics, bounds)",
-            "run.source_id || \"Not reported\"",
+            "run.source_id || \"\u2014\"",
             "No runs could be correlated for the selected filters.",
         ),
     ):
@@ -2253,10 +2293,10 @@ def test_script_tools_and_runs_render_sources_bounds_and_explained_empty_states(
         assert source_field in block
         assert "boundsNoticeNode(bounds" in block
         assert empty_copy in block
-    assert 'missingText: "Not measured"' in script
+    assert "renderMillisecondsAsSeconds(tool.p95_latency_ms)" in script
     assert "observedTokenTotal(run.input_tokens, run.output_tokens)" in script
-    assert "run.run_key_kind || \"Not reported\"" in script
-    assert "activity within the selected range" in script
+    assert "run.run_key_kind || \"\u2014\"" in script
+    assert "Elapsed time between first and last observed activity" in script
 
 
 # ---------------------------------------------------------------------------
@@ -2305,7 +2345,9 @@ def test_script_fetch_success_parses_json_and_dispatches_to_render_before_updati
     # updated, so the page reflects the new data by the time the status
     # announces a refresh.
     render_index = then_block.index("renderObserveResponse(body);")
-    status_index = then_block.index('setRefreshStatus("Refreshed " + new Date().toISOString());')
+    status_index = then_block.index(
+        'setRefreshStatus("Refreshed " + compactTimestamp(new Date().toISOString()));'
+    )
     assert render_index < status_index
 
 
@@ -2377,10 +2419,12 @@ def test_script_omits_internal_query_diagnostics_from_operator_views() -> None:
     assert '"Query duration"' not in script
 
 
-def test_script_disclaimers_preserved_in_render_functions() -> None:
+def test_script_moves_repeated_disclaimers_to_header_help() -> None:
     script = ui._OBSERVE_SCRIPT
-    assert "Last seen reflects observed telemetry only, not agent lifecycle status." in script
-    assert "Token columns show observed usage, not billing data." in script
+    assert "Last seen reflects observed telemetry only, not agent lifecycle status." not in script
+    assert "Token columns show observed usage, not billing data." not in script
+    assert "Observed token usage from telemetry; this is not billing data." in script
+    assert "Most recent telemetry in the selected range" in script
 
 
 def test_script_zero_vs_missing_distinction_uses_distinct_classes() -> None:
@@ -2393,6 +2437,16 @@ def test_script_zero_vs_missing_distinction_uses_distinct_classes() -> None:
     assert "metric-value" in fn_block
 
 
+def test_script_seconds_formatter_preserves_three_decimals_for_whole_seconds() -> None:
+    script = ui._OBSERVE_SCRIPT
+    assert "minimumFractionDigits: 3" in script
+    assert "maximumFractionDigits: 3" in script
+    assert "minimumFractionDigits === undefined" in script
+    assert "maximumFractionDigits === undefined" in script
+    assert 'entry.model || "\\u2014"' not in script
+    assert 'entry.model || "\u2014"' in script
+
+
 def test_script_coverage_state_and_dimension_labels_mirror_python_constants() -> None:
     script = ui._OBSERVE_SCRIPT
     assert "var COVERAGE_STATE_LABELS = {" in script
@@ -2473,6 +2527,17 @@ def test_styles_use_explicit_themes_not_prefers_color_scheme() -> None:
     assert "--observe-series-1" in styles
 
 
+def test_page_uses_shared_url_theme_control_without_browser_storage() -> None:
+    html = ui.render_observe_page()
+    assert 'data-aos-theme-toggle' in html
+    assert 'data-theme-link' in html
+    assert 'next.set("theme", theme)' in html
+    assert "setupAgentOpsThemeToggle();" in html
+    assert "localStorage" not in html
+    assert "sessionStorage" not in html
+    assert "document.cookie" not in html
+
+
 def test_get_accessor_supports_both_mapping_and_object() -> None:
     assert ui._get({"a": 1}, "a") == 1
     assert ui._get({"a": 1}, "b", "default") == "default"
diff --git a/tests/unit/test_observe_ui_visual.py b/tests/unit/test_observe_ui_visual.py
index c074a403..c2b6d23a 100644
--- a/tests/unit/test_observe_ui_visual.py
+++ b/tests/unit/test_observe_ui_visual.py
@@ -285,9 +285,12 @@ def test_rendered_page_makes_no_external_requests() -> None:
     assert "https://fonts" not in html
 
 
-def test_theme_toggle_uses_no_persistent_storage() -> None:
+def test_shared_theme_toggle_uses_no_browser_storage() -> None:
     script = ui._OBSERVE_SCRIPT
-    assert "setupThemeToggle" in script
+    assert "setupAgentOpsThemeToggle" in script
+    assert 'next.set("theme", theme)' in script
+    assert 'window.addEventListener("popstate"' in script
+    assert "applyTheme(restored ===" in script
     for banned in ("localStorage", "sessionStorage", "document.cookie", "indexedDB"):
         assert banned not in script