feat(lik-ui): stats page — live-session controls, readable deleted totals, timezone-correct over-time chart (#66)

Follow-up polish to the session-analytics `/stats` and `/all-stats`
pages (from #65), based on hands-on testing.

## Live sessions
- **Delete button** per session (owner-scoped — only the viewer's own
sessions show it; on `/all-stats` another user's row has none). Reuses
`/sessions/delete` with an allowlisted `next` so the delete returns to
the stats page.
- New columns: **Created**, **Deletes on**, **Shared** (from the local
session row), and **Input / Output tokens** split out (was a single
total).

## Deleted sessions
- Totals rendered as a **compact grouped table** (replaces the tile
grid): token components indented under Total tokens; **Tool calls split
into MCP / Builtin** (derived at read time from the stored
`tool_breakdown` — no schema change, reconciles to the total);
"Incomplete captures" flagged.

## Tokens over time
- **Buckets by `created_at`** (when sessions were used) instead of
`deleted_at` (~7 days later, misleading).
- **Bucketing happens client-side in the viewer's display time zone**
(`stats.js`), matching how every other timestamp renders — the server
stays UTC-only and emits the raw per-session series, since the display
zone is a client-only preference.
- Fixed the bar fill not rendering (inline `<span>` → `display:block`)
and the value column word-wrapping.

## Tests
339 pass (+ new coverage for the delete button/`next` redirect,
local-row columns, the MCP split, and the per-session series). Verified
end-to-end with a headless render.

No schema or prod-DB change in this PR.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Author: yoomlam

lik-ui/src/lik_ui/chat.py

@@ -462,10 +462,16 @@ async def delete_session(request: Request):
         user = require_user(request)
         form = await request.form()
         session_id = form.get("session_id", "")
+        # Return to the page the delete was triggered from (the sessions list or a stats page),
+        # allowlisted so a crafted ``next`` can't turn this into an open redirect. Defaults to
+        # the sessions list, preserving the original behavior when no ``next`` is posted.
+        dest = form.get("next", "/sessions")
+        if dest not in ("/sessions", "/stats", "/all-stats"):
+            dest = "/sessions"
         # Ownership check: only the owning user can delete, and only an existing row.
         session = request.app.state.store.get_session(session_id, user["id"])
         if not session:
-            return RedirectResponse("/sessions", status_code=303)
+            return RedirectResponse(dest, status_code=303)
         # Capture analytics before anything is destroyed — the transcript is still readable here.
         sessions_client: SessionsClient | None = request.app.state.sessions_client
         capture_session_analytics(request.app.state.store, sessions_client, session, "manual")
@@ -478,7 +484,7 @@ async def delete_session(request: Request):
             except Exception as exc:  # noqa: BLE001 - surface session/SDK errors as a page, not a 500
                 return HTMLResponse(f"Could not delete that session: {exc}", status_code=502)
         request.app.state.store.delete_session(session_id, user["id"])
-        return RedirectResponse("/sessions", status_code=303)
+        return RedirectResponse(dest, status_code=303)
 
     @app.post("/chat/{session_id}/share")
     async def share_session(request: Request, session_id: str):

lik-ui/src/lik_ui/db.py

@@ -283,7 +283,7 @@ def list_all_sessions(self) -> list[dict]:
             return conn.execute(
                 """
                 SELECT s.session_id, s.user_id, u.email AS user_email, s.agent_id,
-                       s.title, s.created_at, s.auto_delete_at
+                       s.title, s.shared, s.created_at, s.auto_delete_at
                 FROM sessions s JOIN users u ON u.id = s.user_id
                 ORDER BY s.created_at DESC
                 """
@@ -309,27 +309,38 @@ def session_analytics_totals(self, user_id: int | None = None) -> dict:
                     COALESCE(sum(cache_read_tokens),0)         AS cache_read_tokens,
                     COALESCE(sum(cache_creation_tokens),0)     AS cache_creation_tokens,
                     COALESCE(sum({self._ANALYTICS_TOKENS}),0)  AS total_tokens,
-                    COALESCE(sum(tool_use_count),0)            AS tool_use_count,
+                    COALESCE(sum(sa.tool_use_count),0)         AS tool_use_count,
+                    -- MCP vs. built-in split, derived from the per-server counts in tool_breakdown
+                    -- (every tool call is bucketed by server name, built-ins under 'builtin'), so it
+                    -- needs no dedicated column and reconciles to tool_use_count.
+                    COALESCE(sum(t.mcp),0)                     AS mcp_tool_calls,
+                    COALESCE(sum(t.builtin),0)                 AS builtin_tool_calls,
                     COALESCE(sum(error_count),0)               AS error_count,
                     COALESCE(sum(CASE WHEN capture_incomplete THEN 1 ELSE 0 END),0) AS incomplete
-                FROM session_analytics {where}
+                FROM session_analytics sa
+                LEFT JOIN LATERAL (
+                    SELECT
+                        COALESCE(sum(CASE WHEN kv.key <> 'builtin' THEN kv.value::int END),0) AS mcp,
+                        COALESCE(sum(CASE WHEN kv.key =  'builtin' THEN kv.value::int END),0) AS builtin
+                    FROM jsonb_each_text(COALESCE(sa.tool_breakdown->'servers', '{{}}'::jsonb)) AS kv
+                ) t ON true
+                {where}
                 """,
                 params,
             ).fetchone()
 
-    def session_analytics_daily(self, user_id: int | None = None) -> list[dict]:
-        """Per-day buckets of deleted-session count and total tokens, oldest first — the over-time
-        view (R12). Scoped to one user when ``user_id`` is given, else across all users."""
-        where, params = ("WHERE user_id = %s", (user_id,)) if user_id is not None else ("", ())
+    def session_analytics_series(self, user_id: int | None = None) -> list[dict]:
+        """Per-session (created_at, total tokens) for deleted sessions, oldest first — the raw data
+        for the over-time view (R12). Deliberately NOT pre-bucketed by day: day boundaries depend on
+        the viewer's display time zone, which is a client-only preference (the server stays UTC), so
+        the browser buckets these instants into local days. Scoped to one user when ``user_id`` is
+        given, else across all users. Rows with no created_at (thin captures) are skipped."""
+        where = "WHERE created_at IS NOT NULL" + (" AND user_id = %s" if user_id is not None else "")
+        params = (user_id,) if user_id is not None else ()
         with self.db.connection() as conn:
             return conn.execute(
-                f"""
-                SELECT date_trunc('day', deleted_at) AS day,
-                       count(*)                       AS sessions,
-                       COALESCE(sum({self._ANALYTICS_TOKENS}),0) AS tokens
-                FROM session_analytics {where}
-                GROUP BY day ORDER BY day
-                """,
+                f"SELECT created_at, {self._ANALYTICS_TOKENS} AS tokens "
+                f"FROM session_analytics {where} ORDER BY created_at",
                 params,
             ).fetchall()
 

lik-ui/src/lik_ui/static/app.css

@@ -233,13 +233,19 @@ details.skills .skill-note { color: var(--muted); font-size: .78rem; }
 .stat-tile.flagged .stat-value { color: var(--status-warn); }
 /* Over-time bars: one labelled row per day, bar width is a server-computed percentage. */
 .bar-chart { display: flex; flex-direction: column; gap: .3rem; margin: .5rem 0; }
-.bar-row { display: grid; grid-template-columns: 6rem 1fr 7rem; align-items: center; gap: .5rem; font-size: .85rem; }
-.bar-track { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; height: 1rem; overflow: hidden; }
-.bar-fill { background: var(--accent); height: 100%; }
-.bar-value { color: var(--muted); text-align: right; }
+.bar-row { display: grid; grid-template-columns: 6rem 1fr 11rem; align-items: center; gap: .5rem; font-size: .85rem; }
+.bar-track { display: block; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; height: 1rem; overflow: hidden; }
+/* display:block so width/height apply — an inline <span> would ignore them and collapse the fill. */
+.bar-fill { display: block; background: var(--accent); height: 100%; min-width: 1px; }
+.bar-value { color: var(--muted); text-align: right; white-space: nowrap; }
 /* Tables reused for the per-user and live-session lists. */
 .stats-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
 .stats-table th, .stats-table td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
 .stats-table td.num, .stats-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
 .stats-empty { color: var(--muted); font-style: italic; }
 .stats-unavailable { color: var(--status-warn); font-size: .8rem; }
+/* Deleted-session totals: a compact two-column table. Token components indent under the total. */
+.totals-table { max-width: 26rem; }
+.totals-table th[scope="row"] { font-weight: 600; }
+.totals-table tr.sub td:first-child { padding-left: 1.5rem; color: var(--muted); font-weight: 400; }
+.totals-table tr.flagged th, .totals-table tr.flagged td { color: var(--status-warn); }

lik-ui/src/lik_ui/static/stats.js

@@ -0,0 +1,41 @@
+// Over-time chart for the stats pages. The server emits raw per-session {created_at (UTC ISO),
+// tokens} in #tokens-over-time[data-series]; this buckets them into DAYS in the viewer's display
+// zone and draws the bars. Day bucketing lives here (not in SQL) because the day boundary depends
+// on the display zone, which is a client-only preference (see tz.js) — the server stays UTC-only.
+(function () {
+  var el = document.getElementById("tokens-over-time");
+  if (!el) return;
+  var series;
+  try { series = JSON.parse(el.getAttribute("data-series") || "[]"); } catch (e) { return; }
+
+  // The effective display zone — same rule as tz.js: the stored choice, else the browser's zone.
+  function zone() {
+    try { var s = localStorage.getItem("lik-tz"); if (s && s !== "auto") return s; } catch (e) {}
+    try { return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC"; } catch (e) { return "UTC"; }
+  }
+  var z = zone();
+
+  // Local calendar day (YYYY-MM-DD) of a UTC instant, in the display zone. en-CA yields ISO order.
+  var fmt = new Intl.DateTimeFormat("en-CA", { timeZone: z, year: "numeric", month: "2-digit", day: "2-digit" });
+  function localDay(iso) { return fmt.format(new Date(iso)); }
+
+  var byDay = {};
+  series.forEach(function (s) {
+    var k = localDay(s.created_at);
+    if (!byDay[k]) byDay[k] = { tokens: 0, sessions: 0 };
+    byDay[k].tokens += s.tokens;
+    byDay[k].sessions += 1;
+  });
+  var days = Object.keys(byDay).sort();
+  if (!days.length) { el.innerHTML = '<p class="stats-empty">No deleted sessions yet.</p>'; return; }
+
+  var peak = days.reduce(function (m, k) { return Math.max(m, byDay[k].tokens); }, 0);
+  var rows = days.map(function (k) {
+    var b = byDay[k];
+    var pct = peak ? Math.round((100 * b.tokens) / peak) : 0;
+    return '<div class="bar-row"><span>' + k + "</span>"
+      + '<span class="bar-track"><span class="bar-fill" style="width:' + pct + '%"></span></span>'
+      + '<span class="bar-value">' + b.tokens.toLocaleString() + " · " + b.sessions + " sess</span></div>";
+  });
+  el.innerHTML = rows.join("");
+})();

lik-ui/src/lik_ui/stats.py

@@ -14,28 +14,24 @@
 from .analytics import build_live_section
 
 
-def _bars(rows: list[dict], value_key: str) -> list[dict]:
-    """Attach a 0–100 bar percentage to each daily bucket, sized against the largest bucket, so
-    the template can draw the over-time view without doing math. An all-zero set yields 0% bars."""
-    peak = max((row[value_key] for row in rows), default=0) or 0
-    out = []
-    for row in rows:
-        pct = round(100 * row[value_key] / peak) if peak else 0
-        out.append({**row, "pct": pct})
-    return out
+def _series(rows: list[dict]) -> list[dict]:
+    """Shape the per-session over-time rows into JSON-safe records (UTC ISO instant + int tokens)
+    for the client, which buckets them into local days in the viewer's display zone."""
+    return [{"created_at": r["created_at"].isoformat(), "tokens": int(r["tokens"])} for r in rows]
 
 
-def _stats_view(store, sessions_client, *, live_sessions, user_id, scope_label, per_user):
+def _stats_view(store, sessions_client, *, live_sessions, user_id, scope_label, per_user, page_path):
     """Assemble the shared stats view model for one scope. ``user_id`` is None for the all-users
-    (/all-stats) scope and the viewer's id for /stats."""
-    daily = store.session_analytics_daily(user_id)
+    (/all-stats) scope and the viewer's id for /stats. ``page_path`` is where a live-session delete
+    should return to."""
     return {
         "scope_label": scope_label,
+        "page_path": page_path,
         "per_user": store.session_analytics_by_user() if per_user else None,
         "live": build_live_section(sessions_client, live_sessions),
         "deleted": {
             "totals": store.session_analytics_totals(user_id),
-            "daily": _bars(daily, "tokens"),
+            "series": _series(store.session_analytics_series(user_id)),
         },
     }
 
@@ -57,6 +53,7 @@ async def stats_page(request: Request):
             user_id=user["id"],
             scope_label="your sessions",
             per_user=False,
+            page_path="/stats",
         )
         return templates.TemplateResponse(request, "stats.html", {"user": user, "view": view})
 
@@ -74,5 +71,6 @@ async def all_stats_page(request: Request):
             user_id=None,
             scope_label="all users",
             per_user=True,
+            page_path="/all-stats",
         )
         return templates.TemplateResponse(request, "stats.html", {"user": user, "view": view})

lik-ui/src/lik_ui/templates/sessions.html

@@ -12,9 +12,9 @@ <h1>Choose a prior session to continue the conversation</h1>
         <a href="/chat/{{ s.session_id | urlencode }}" title="Session {{ s.session_id }}">{{ s.title or ("Session " ~ s.session_id) }}</a>
         <span class="session-delete-note{% if s.delete_soon %} delete-warning{% endif %}">
           {%- if s.delete_soon -%}
-            Deletes {% if s.delete_days == 0 %}today{% else %}in {{ s.delete_days }} day{{ 's' if s.delete_days != 1 else '' }}{% endif %}
+            Auto-deletes {% if s.delete_days == 0 %}today{% else %}in {{ s.delete_days }} day{{ 's' if s.delete_days != 1 else '' }}{% endif %}
           {%- else -%}
-            Deletes <time data-utc="{{ s.auto_delete_at | utc_iso }}" data-format="date">{{ s.auto_delete_at | utcformat('%Y-%m-%d') }}</time>
+            Auto-deletes on <time data-utc="{{ s.auto_delete_at | utc_iso }}" data-format="date">{{ s.auto_delete_at | utcformat('%Y-%m-%d') }}</time>
           {%- endif -%}
         </span>
       </span>