fix(analytics): dashboard predicate, tab dedup, chart a11y, ISO timestamps (#55)

## Summary

Four small fixes to the analytics dashboard surfaced from a 7-day audit
of `mcp.copilotkit.ai/analytics`. All independent, no behavior change to
data collection.

### 1. Top Queries vs Empty Result Queries — single predicate for
"empty"
`getTopQueries` previously returned every `(query_text, tool_name)`
group ordered by count, with no filter on `result_count`. A query that
ONLY ever returned zero results therefore appeared in **both** tables:
Top Queries (count > 0) and Empty Result Queries (`result_count = 0`).
The two tables disagreed on what "empty" means, which let rows like
`count=1, avg_results=0.0, avg_score=—` sit in Top Queries.

Fix: add `HAVING bool_or(result_count > 0)` so Top Queries narrows to
groups with at least one non-empty event. Pure-empty groups stay
exclusively in Empty Result Queries.

### 2. Hide the "All" tool-type pill when only one tool type exists
With a single tool type (typical install with only `search`), `All
(3,214)` rendered next to `Search (3,214)` — identical counts, looked
like a broken filter. Now the `All` pill is suppressed when
`toolCounts.length <= 1` and reappears automatically once a second tool
type is recorded.

### 3. Chart accessibility / scrape-ability
The two `<canvas>` charts ("Queries per Day", "Queries by Source") were
opaque to assistive tech and to HTML scrapers — only the tooltip prompt
was reachable in the accessibility tree. Added:

- `role="img"` + `aria-labelledby` + `aria-describedby` on each canvas.
- Sibling `.sr-only` tables (`#dailyChartTable`, `#sourceChartTable`)
populated with the same numbers the bars/slices encode, kept off-screen
with the standard visually-hidden CSS pattern.

Visible UI is unchanged. Screen readers now announce per-day and
per-source counts; the dashboard's own MCP indexer can now read them
too.

### 4. Empty Queries `Last Seen` → ISO-8601 in UTC
`toLocaleString()` rendered `4/29/2026, 6:10:04 AM` — month-first
ordering, 12-hour time, no timezone. The dashboard is internal and read
across timezones. Now renders `2026-04-29 06:10:04 UTC`: explicit,
sortable, unambiguously parseable.

## Test plan

- [x] `npm run build` clean.
- [x] `npm test` — 3,250 passed (added one regression test asserting the
`HAVING bool_or(result_count > 0)` predicate is in the SQL).
- [x] Manual: open the dashboard with a single tool type and confirm the
`All` pill is hidden; with multiple tool types, confirm it reappears.
- [ ] Manual: VoiceOver / NVDA reads the sr-only tables alongside each
chart.
- [x] Manual: confirm `Last Seen` renders as `YYYY-MM-DD HH:MM:SS UTC`.

Author: samjulien

docs/analytics.html

@@ -370,6 +370,24 @@
         text-align: center;
         font-style: italic;
       }
+
+      /* Screen-reader-only / scraper-friendly mirror of canvas chart data.
+         Canvas elements expose nothing useful to assistive tech or to HTML
+         scrapes; a sibling <table> kept off-screen lets both consume the
+         same numbers the visible chart shows. Standard "visually hidden"
+         pattern: positioned, clipped, and with whitespace preserved so the
+         screen reader announces the table cells. */
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+      }
     </style>
   <script src="/pixels.js" defer></script>
   </head>
@@ -382,12 +400,42 @@ <h1>Pathfinder Analytics</h1>
     <div class="chart-row">
       <div class="chart-box">
         <h2 id="dailyChartTitle">Queries per Day</h2>
-        <canvas id="dailyChart"></canvas>
+        <canvas
+          id="dailyChart"
+          role="img"
+          aria-labelledby="dailyChartTitle"
+          aria-describedby="dailyChartTable"
+        ></canvas>
         <span class="chart-caption">Click a bar to filter to that day</span>
+        <table id="dailyChartTable" class="sr-only">
+          <caption>Queries per day (data table for screen readers)</caption>
+          <thead>
+            <tr>
+              <th scope="col">Day</th>
+              <th scope="col">Queries</th>
+            </tr>
+          </thead>
+          <tbody></tbody>
+        </table>
       </div>
       <div class="chart-box">
-        <h2>Queries by Source</h2>
-        <canvas id="sourceChart"></canvas>
+        <h2 id="sourceChartTitle">Queries by Source</h2>
+        <canvas
+          id="sourceChart"
+          role="img"
+          aria-labelledby="sourceChartTitle"
+          aria-describedby="sourceChartTable"
+        ></canvas>
+        <table id="sourceChartTable" class="sr-only">
+          <caption>Queries by source (data table for screen readers)</caption>
+          <thead>
+            <tr>
+              <th scope="col">Source</th>
+              <th scope="col">Queries</th>
+            </tr>
+          </thead>
+          <tbody></tbody>
+        </table>
       </div>
     </div>
 
@@ -1106,15 +1154,21 @@ <h2 style="margin-bottom: 16px; font-size: 1.2rem">Analytics Token</h2>
           return sum + t.count;
         }, 0);
 
-        // Tool-type group (left)
+        // Tool-type group (left). Skip the "All" pill when only one tool type
+        // exists in the window: it would render with the same count as the
+        // single per-tool pill (e.g. `All (3,214)` next to `Search (3,214)`)
+        // and look like a broken filter. Re-appears once a second tool type
+        // is recorded.
         var toolHtml = '<div class="filter-group tool-group">';
-        toolHtml +=
-          '<span class="pill' +
-          (activeToolType === null ? " active" : "") +
-          '" data-tool-all="1">' +
-          'All <span class="count">(' +
-          total.toLocaleString() +
-          ")</span></span>";
+        if (toolCounts.length > 1) {
+          toolHtml +=
+            '<span class="pill' +
+            (activeToolType === null ? " active" : "") +
+            '" data-tool-all="1">' +
+            'All <span class="count">(' +
+            total.toLocaleString() +
+            ")</span></span>";
+        }
         toolCounts.forEach(function (t) {
           var isActive = activeToolType === t.tool_type;
           var label =
@@ -1834,6 +1888,28 @@ <h2 style="margin-bottom: 16px; font-size: 1.2rem">Analytics Token</h2>
             },
           );
 
+          // Mirror the daily chart's data into a screen-reader-only table
+          // (#dailyChartTable). Canvas elements are opaque to assistive tech
+          // and HTML scrapers; the sr-only table gives both consumers the
+          // same numbers the visible bars encode.
+          var dailyTableBody = document.querySelector(
+            "#dailyChartTable tbody",
+          );
+          if (dailyTableBody) {
+            dailyTableBody.innerHTML =
+              perDayArr
+                .map(function (d) {
+                  return (
+                    "<tr><td>" +
+                    esc(String(d.day)) +
+                    "</td><td>" +
+                    esc(safeNumber(d.count).toLocaleString()) +
+                    "</td></tr>"
+                  );
+                })
+                .join("") || "<tr><td colspan=\"2\">No data</td></tr>";
+          }
+
           // Source chart - destroy previous instance
           if (sourceChartInstance) {
             sourceChartInstance.destroy();
@@ -1870,6 +1946,28 @@ <h2 style="margin-bottom: 16px; font-size: 1.2rem">Analytics Token</h2>
             );
           }
 
+          // Mirror source chart data into the sr-only table. Renders even
+          // when the chart itself doesn't (sourcesArr.length === 0) so
+          // screen readers always see "No data" rather than a stale row
+          // from a prior load.
+          var sourceTableBody = document.querySelector(
+            "#sourceChartTable tbody",
+          );
+          if (sourceTableBody) {
+            sourceTableBody.innerHTML =
+              sourcesArr
+                .map(function (s) {
+                  return (
+                    "<tr><td>" +
+                    esc(String(s.source_name)) +
+                    "</td><td>" +
+                    esc(safeNumber(s.count).toLocaleString()) +
+                    "</td></tr>"
+                  );
+                })
+                .join("") || "<tr><td colspan=\"2\">No data</td></tr>";
+          }
+
           // Top queries table (now with Tool column)
           var topBody = document.querySelector("#topQueriesTable tbody");
           topBody.innerHTML =
@@ -1911,10 +2009,21 @@ <h2 style="margin-bottom: 16px; font-size: 1.2rem">Analytics Token</h2>
                 // string "Invalid Date", which would be rendered raw and
                 // looks like a bug. Fall back to an em dash instead, and
                 // route the result through esc() on interpolation.
+                //
+                // Render as ISO-8601 in UTC (e.g. "2026-04-29 06:10:04 UTC")
+                // rather than the browser locale's mixed month-first / 12h
+                // format. The dashboard is internal and read across
+                // timezones; an explicit, sortable, timezone-labelled
+                // timestamp avoids ambiguity. Trim ISO milliseconds and the
+                // "T"/"Z" separators for readability while keeping it
+                // unambiguously parseable.
                 var lastSeenRaw = q.last_seen ? new Date(q.last_seen) : null;
                 var lastSeenStr =
                   lastSeenRaw && Number.isFinite(lastSeenRaw.getTime())
-                    ? lastSeenRaw.toLocaleString()
+                    ? lastSeenRaw
+                        .toISOString()
+                        .replace("T", " ")
+                        .replace(/\.\d{3}Z$/, " UTC")
                     : "\u2014";
                 return (
                   '<tr class="empty"><td>' +

src/__tests__/analytics.test.ts

@@ -419,6 +419,20 @@ describe("getTopQueries", () => {
     expect(sql).not.toContain("'<redacted>'");
     expect(params).toContain(REDACTED_QUERY_TEXT);
   });
+
+  it("excludes pure-empty (query_text, tool_name) groups via HAVING bool_or(result_count > 0)", async () => {
+    // Without this predicate, a query that ONLY ever returned zero results
+    // shows up in BOTH the Top Queries table (count > 0) and the Empty
+    // Result Queries table (result_count = 0), and the dashboard's two
+    // tables disagree on the predicate for "empty." The HAVING clause
+    // narrows Top Queries to groups where at least one event returned a
+    // non-empty result.
+    mockQuery.mockResolvedValueOnce({ rows: [] });
+    await getTopQueries();
+
+    const [sql] = mockQuery.mock.calls[0];
+    expect(sql).toContain("HAVING bool_or(result_count > 0)");
+  });
 });
 
 // ---------------------------------------------------------------------------

src/db/analytics.ts

@@ -596,7 +596,12 @@ export async function getAnalyticsSummary(
 /**
  * Get top queries by frequency over the last N days, or over the explicit
  * `filter.from`/`filter.to` range when provided. Groups by (query_text,
- * tool_name) and orders by count desc.
+ * tool_name) and orders by count desc. Excludes (query_text, tool_name)
+ * pairs whose every event returned zero results — those belong exclusively
+ * in `getEmptyQueries`. Without this filter, a query that only ever returns
+ * empty would render in BOTH the Top Queries and Empty Result Queries
+ * tables with the same count, and the dashboard's two tables disagree on
+ * the predicate for "empty."
  */
 export async function getTopQueries(
   days: number = 7,
@@ -628,6 +633,7 @@ export async function getTopQueries(
     FROM query_log
     ${where}
     GROUP BY query_text, tool_name
+    HAVING bool_or(result_count > 0)
     ORDER BY count DESC
     LIMIT $${redactedIdx + 1}`,
     [...fp, ...dw.params, REDACTED_QUERY_TEXT, limit],