From ebcf34d4a634c22813be4bb625608f259e73221d Mon Sep 17 00:00:00 2001
From: Eric Wang <wrqatw@gmail.com>
Date: Tue, 11 Aug 2026 03:15:12 -0700
Subject: [PATCH 1/2] feat(web): global sessions page with filter, group, sort
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

/sessions lists sessions across every project. Filters: q (summary
OR ID prefix), provider, project, model, after/before. Group by
project, day, provider, or model with sticky aggregate headers.
Sort by time, messages, prompts, or tokens — tokens is new in the
catalog layer, so the CLI gains --sort tokens too.

Dense two-line rows per docs/design/0003-global-sessions.md (kiln
pass over the quiet-terminal material): every sort key is a visible
column, active filters render as clearable chips, the form works
without JS, limit=100 with honest Showing X of Y footer.

GET /api/sessions is the same query as JSON in an envelope with
total/shown. Fixes shipped alongside per the design audit:
.empty-state promoted out of memSectionCSS, dark-mode provider
badge contrast, the advertised-but-unbound d shortcut (this page).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/design/0003-global-sessions.md    | 492 +++++++++++++++
 internal/catalog/session_query.go      |  12 +-
 internal/catalog/session_query_test.go |  18 +
 internal/cmd/sessions.go               |   2 +-
 internal/web/server.go                 |   9 +-
 internal/web/sessions.go               | 815 +++++++++++++++++++++++++
 internal/web/sessions_test.go          | 388 ++++++++++++
 internal/web/static/style.css          |  86 +++
 internal/web/templates.go              |   3 +-
 9 files changed, 1820 insertions(+), 5 deletions(-)
 create mode 100644 docs/design/0003-global-sessions.md
 create mode 100644 internal/web/sessions.go
 create mode 100644 internal/web/sessions_test.go

diff --git a/docs/design/0003-global-sessions.md b/docs/design/0003-global-sessions.md
new file mode 100644
index 0000000..94e8f4a
--- /dev/null
+++ b/docs/design/0003-global-sessions.md
@@ -0,0 +1,492 @@
+# Global sessions page (/sessions)
+
+Design spec for the cross-project session list. Continues the material
+contract in 0002 (quiet terminal, terracotta accent, hairline surfaces,
+13px mono, no side-stripes, 1024/700 breakpoints). Every choice is marked
+**Decision** (made here, with rationale) or **Open** (implementer judgment).
+
+Nothing below invents new material. New CSS is hairline + token only.
+
+## 1. What the page is for
+
+The session auditor's cockpit: *what ran recently, everywhere.* Today the
+only session list is per-project (`/project/<name>`), so "what did I run
+yesterday across all repos" is unanswerable without visiting 47 pages.
+
+Primary task: scan a time-ordered stream of sessions, narrow it, open one.
+Protected functions: the row label (summary), the four sort metrics, the
+project affiliation, the provider badge, the row link target.
+
+**Decision:** this is a *product* surface, not brand. Density and column
+alignment beat visual charm. Anything that makes a row prettier and the
+scan slower is rejected.
+
+## 2. Information architecture
+
+Route `/sessions`. Server-rendered, state entirely in the query string.
+
+| Param | Values | Default | Notes |
+|---|---|---|---|
+| `q` | free text | "" | summary substring OR session-ID prefix |
+| `provider` | `claude-code` \| `codex` \| `grok` | all | `config.NormalizeProvider` already accepts `cc`/`cx`/`gx` |
+| `project` | encoded project name | all | same encoding as `/project/<name>` |
+| `model` | substring | "" | matches `Session.Model`, case-insensitive |
+| `after`/`before` | `YYYY-MM-DD` | none | `config.ParseDate` / `ParseBeforeDate` (local tz, before = end-of-day) |
+| `group` | `none`\|`project`\|`day`\|`provider`\|`model` | `none` | |
+| `sort` | `time`\|`messages`\|`prompts`\|`tokens` | `time` | always descending |
+| `limit` | int, `0`=all | `100` | applied *after* sort, *before* grouping |
+
+**Decision:** params at their default are omitted from generated URLs (JS
+strips empty fields before submit). Shareable links stay readable.
+
+**Decision:** no `offset`/pagination. The auditor narrows with filters, not
+pages; `limit` + "show all" covers the tail. **Open:** revisit if scroll
+depth turns out to be the common path.
+
+**Decision:** no `cc:` / `cx:` prefix parsing in `q` (the index page does
+this via `parseProviderQuery`). There is a provider dropdown two inches
+away; silently reinterpreting typed text is the implicit magic CLAUDE.md
+rejects.
+
+Sidebar (`renderSidebar`, templates.go:3232): insert
+`{"/sessions", "Sessions", "sessions"}` **second, after Projects**.
+Mirrors the hierarchy projects -> sessions and is the second-most-used
+destination. Active key: `"sessions"`.
+
+Server: `handleSessions` follows `handleIndex`'s shape.
+`sessionProvider.DiscoverProjects()` already returns quick-parsed sessions
+(disk-cached), so the page costs one flatten + one sort over ~2,300
+structs — no new parse cost. Carry `(project.EncodedName, *parser.Session)`
+pairs; `Session.ProjectName` alone is not enough to build the row href.
+
+Filtering: reuse `parseSessionFilter(r)` (server.go:1646) — it already
+covers provider/after/before/q/model. **Trap:** `SessionFilter.Match`
+matches `q` against summary only, and returns false as a whole. To get
+"summary OR ID prefix", split it:
+
+```go
+base := parseSessionFilter(r); qStr := base.Query; base.Query = ""
+if !base.Match(s) { continue }
+if qStr != "" && !containsFold(s.Summary, qStr) && !hasPrefixFold(s.ID, qStr) { continue }
+```
+
+Do not widen `SessionFilter.Query` itself — the CLI shares it.
+
+## 3. Control bar
+
+One instrument, three lines, and the third only appears when it has
+something to say.
+
+```
++--------------------------------------------------------------------------+
+| [ Filter sessions... (press /)      ] [All providers v] [All projects v]  |
+| Group: [None v]  Sort: [Recent v]                                         |
+| v More filters                                                            |
+| q: recovery [x]  provider: Codex [x]  after: 2026-08-01 [x]   Clear all   |
++--------------------------------------------------------------------------+
+```
+
+Expanded disclosure:
+
+```
+| ^ More filters                                                            |
+|   Model [ e.g. opus        ]  After [ 2026-08-01 ]  Before [ 2026-08-10 ] |
+```
+
+**Decision:** everything lives in one `<form method="get" action="/sessions">`.
+Enter in the text field submits natively; that is the zero-JS path.
+
+**Decision:** high-frequency controls (q, provider, project, group, sort)
+stay visible; low-frequency ones (model, after, before) go behind a native
+`<details>` labelled "More filters". Five visible controls is an
+instrument; eight is a junk drawer.
+
+**Decision:** the hidden-state risk of a disclosure is paid for by the chip
+row — any set filter, visible or collapsed, renders as a chip. If a filter
+is on, you can see it without opening anything.
+
+**Decision:** filters that have a closed value set are `<select>`
+(provider, project, group, sort). Filters with an open value space are text
+(`q`, `model`) or `<input type="date">` (after, before). Native date input
+gets a picker for free and degrades to a text field with the right format
+hint.
+
+**Decision:** the project `<select>` lists every project alphabetically by
+display name with its session count — `ccx-codex (312)`. Alphabetical
+because you are looking for a name you already know; the count because it
+tells you whether the filter is worth applying. Native select typeahead
+makes 47 options survivable.
+
+Exact copy:
+
+- search placeholder: `Filter sessions... (press /)`
+- provider options: `All providers` / `Claude Code` / `Codex` / `Grok`
+- project options: `All projects` / `<display name> (N)`
+- `Group:` -> `None` `Project` `Day` `Provider` `Model`
+- `Sort:` -> `Recent` `Messages` `Prompts` `Tokens`
+- disclosure summary: `More filters`
+- field labels: `Model` `After` `Before`
+- chips: `q: recovery`, `provider: Codex`, `project: ccx-codex`,
+  `model: opus`, `after: 2026-08-01`, `before: 2026-08-10`
+- clear-all: `Clear all`
+
+**Decision:** each chip's remove control is an ASCII `x` link to the same
+URL minus that one param, separated from the value by a hairline. `Clear
+all` links to bare `/sessions`. Both work with JS off — clearing a filter
+must never depend on script.
+
+**Decision:** no sort-direction toggle. Recent-first / most-first is the
+only ordering an auditor wants; ascending has no use case. **Open:** if it
+appears, `sort=time-asc` rather than a second control.
+
+**Decision:** the control bar is **not** sticky. Group headers are, and two
+sticky layers stack into a growing header. Filtering is set-and-scan, not
+continuous.
+
+## 4. List item: dense row, not card
+
+**Decision: rows, not cards.** A `.session-card` costs ~92px with its gap;
+a row costs ~44px. At a project's 10-40 sessions the card box usefully says
+"one unit"; across 2,300 it just halves the sessions per screen and
+destroys column alignment. The global list is a scan, so it gets
+table-like rows with fixed-width cells that line up down the page.
+
+Width check (no new layout class needed): `.main-content` is 800px max with
+40px padding = 720px usable ~= 92ch at 13px mono. The row needs 81ch. It
+fits inside the existing shell — **Decision:** no wide-main variant, the
+app keeps one page width.
+
+```
++--------------------------------------------------------------------------+
+| CC  Fix session lookup recovery for encoded project names       2h ago    |
+|     ccx-codex           opus-4-6      184 msg   12 prompts    1.2M tok    |
++--------------------------------------------------------------------------+
+| CX  Add content-signal ranking to search                        5h ago    |
+|     mining-pipeline     gpt-5.4        92 msg    7 prompts    412k tok    |
++--------------------------------------------------------------------------+
+| GX  Sweep the vault index                                       yesterday |
+|     vault               grok-4          31 msg        -           -       |
++--------------------------------------------------------------------------+
+```
+
+Line 1: provider badge, label, relative time (right, fixed 10ch).
+Line 2: project (22ch), model (20ch), then three stat cells (11ch each,
+right-aligned, `tabular-nums`).
+
+**Decision: every sort key is a visible column, and nothing sorts by an
+invisible number.** `sort` offers time/messages/prompts/tokens, so the row
+shows exactly those four. Tool calls (correlated with messages) and
+duration (wall-clock includes idle, so it misleads) are dropped from the
+row and moved into the tooltip.
+
+**Decision:** label = `Title` if non-empty, else `Summary`, else
+`(no summary)`. **Fact worth knowing before you build it:** `Session.Title`
+is populated only on the *full* parse path (`internal/parser/session.go:162`).
+No list path sets it — `quickParseListableSession`
+(`internal/parser/project.go:120`) has no Title field, `SessionMeta`
+(session.go:507) has no Title, and the grok backend folds its title into
+`Summary` (`internal/provider/grok/backend.go:260`). So today the label is
+always Summary. Write the precedence anyway (it is free and future-proof),
+but design no affordance that assumes a Title exists. Lighting it up is a
+two-file change: add `Title` to `SessionMeta`, set it in `quickParseSession`,
+copy it in `quickParseListableSession`.
+
+**Decision:** the row's `title` attribute carries what the line cannot:
+`2026-08-11 14:02 -> 15:47 (1h 45m) | 47 tool calls | <full summary>`.
+Uses the existing `formatDuration`.
+
+**Decision:** missing stats render as a dim ASCII `-`, not a blank or a
+zero. Grok reports `MessageCount` only (backend.go:264-275); a blank breaks
+column alignment and a `0` is a lie. Cell gets
+`title="not reported by this provider"`.
+
+**Decision:** project affiliation is plain text inside the row link, never a
+nested link (invalid HTML, and it steals the click target). Filtering by
+project is the dropdown's job.
+
+**Decision:** when `group=project`, the project cell is dropped from line 2
+— the group header already says it. Same for `group=model` and the model
+cell, `group=provider` and the badge (badge stays; it is 4ch and identifies
+the row when scrolled past the header — **Open:** drop it if it reads as
+noise).
+
+**Decision:** cost is not on the row. `Stats.CostUSD` is zero for any
+unpriced model, and a column that is blank for two of three providers earns
+nothing. **Open:** cost as a group aggregate, shown only when > 0 and
+labelled as an estimate.
+
+Row href: `/session/<encodedProject>/<sessionID>`. Time shown and sorted is
+`EndTime` (last activity) — matches `handleProject`'s sort.
+
+## 5. Group headers
+
+```
+ccx-codex                                    312 sessions  4.1M tok  2h ago
+---------------------------------------------------------------------------
+| CC  Fix session lookup recovery ...                             2h ago   |
+```
+
+**Decision:** sticky at `top: 48px` (under the fixed top-nav) in every group
+mode. The value of grouping is knowing where you are seven screens down.
+Opaque `background: var(--bg)` so rows do not bleed through.
+
+Anatomy: label (left, 600 weight, 12px) + meta (right, 11px, muted). Meta
+is separated by ` · ` in `--text-faint`.
+
+| `group` | Label | Meta | Group order |
+|---|---|---|---|
+| `project` | display name | `N sessions · <tok> tok · <last activity>` | most recent session first |
+| `day` | `Mon 2026-08-11`, with ` · today` / ` · yesterday` appended | `N sessions · N projects · <tok> tok` | newest day first |
+| `provider` | badge + `Claude Code` | `N sessions · N projects · <tok> tok` | fixed CC, CX, GX |
+| `model` | full model id, or `(no model recorded)` | `N sessions · N projects · <tok> tok` | most recent session first |
+
+**Decision:** one ordering rule for all modes — *groups are ordered by their
+most recent session; rows inside a group follow `sort`.* Predictable beats
+clever. Day groups therefore descend by date for free. **Open:** ordering
+groups by the sort metric's aggregate (e.g. biggest-token project first) if
+users ask.
+
+**Decision:** the model label is the full id (`claude-opus-4-6-20260514`),
+not a prettified short name. It is the string you type into the model
+filter; shortening it breaks the loop between the two.
+
+**Decision:** group counts describe the *shown* set, not the matching set.
+The page footer carries the honesty about truncation (section 6), so
+headers stay short.
+
+## 6. Limit and "show more"
+
+**Decision: default `limit=100`.** ~7 screens of rows: enough to feel like
+the whole recent record, ~40KB of HTML, instant. All 2,314 rows is ~900KB
+and a visible layout stall — that has to be opt-in.
+
+Footer, always rendered:
+
+```
+Showing 100 of 312 matching sessions      Show 500      Show all 312 (slower)
+```
+
+Unfiltered: `Showing 100 of 2,314 sessions`.
+Not truncated: `Showing all 312 matching sessions` and no links.
+
+**Decision:** "show more" is two plain links (`?limit=500`, `?limit=0`), not
+a button and not infinite scroll. Links are shareable, keyboard-reachable,
+and work with JS off. The `(slower)` suffix is the honest cost label.
+
+**Decision:** `limit` applies to the sorted list *before* grouping. Groups
+form from the limited set. Grouping is a view of what you are looking at,
+not a second query.
+
+## 7. Empty and degraded states
+
+No match (filters are set):
+
+```
+No sessions match these filters.
+Clear filters
+```
+
+Cold start (no sessions exist at all):
+
+```
+No sessions found. ccx reads ~/.claude, ~/.codex and ~/.grok —
+start an agent session first.
+```
+
+**Decision:** both use `.empty-state`, which currently lives inside
+`memSectionCSS()` (templates.go:3187) and is therefore unavailable on any
+page without memory files. Promote it to `style.css` and delete the
+duplicate in the same commit — a contract that lies about where a class
+lives is worse than no contract.
+
+Zero-JS behavior, end to end:
+
+| Control | Without JS |
+|---|---|
+| `q`, `model`, dates | Enter submits the form |
+| selects | `<noscript>` renders `Apply` (styled as `.sort-select`) |
+| chips `x`, `Clear all` | links, always work |
+| `Show 500` / `Show all` | links, always work |
+| `j`/`k`, `/`, `d` | absent; Tab + Enter reach every row |
+
+**Decision:** the `Apply` button is inside `<noscript>` rather than always
+visible. With JS it is redundant (selects auto-submit); a permanently dead
+button is worse than an absent one.
+
+## 8. CSS plan
+
+Reused as-is — no changes: `.layout`, `.sidebar`, `.sidebar-link`,
+`.main-content`, `.page-header`, `.page-badge`, `.badge-session`, `.stats`,
+`.controls`, `.search-wrap`, `.search-input`, `.search-spinner`,
+`.sort-controls`, `.sort-label`, `.sort-select`, `.provider-badge` +
+`.provider-CC/CX/GX` (via `providerBadgeHTML`), `.site-footer`, the global
+`:focus-visible` outline, and every token.
+
+Page header block: `.page-header` + `<span class="page-badge badge-session">S</span>`
++ `<h1>Sessions</h1>` + `.stats` reading `2,314 sessions across 47 projects`
+(or `312 of 2,314 sessions · 12 projects` when filtered).
+
+New classes (key properties only; all values are tokens):
+
+| Class | Key properties |
+|---|---|
+| `.controls-wrap` | modifier on `.controls`: `flex-wrap: wrap; row-gap: 8px` |
+| `.filter-more` | `flex-basis: 100%; font-size: 12px` (native `<details>`, native marker) |
+| `.filter-more > summary` | `cursor: pointer; color: var(--text-muted)` |
+| `.filter-more-body` | `display: flex; gap: 12px; align-items: center; padding-top: 8px` |
+| `.filter-field` | `display: flex; align-items: center; gap: 6px` (label reuses `.sort-label`) |
+| `.filter-input` | same box as `.sort-select`: `padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: 12px` |
+| `.filter-chips` | `display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 16px` |
+| `.filter-chip` | `display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-secondary); font-size: 12px; color: var(--text-muted)`; inner `<b>` = `color: var(--text); font-weight: 600` |
+| `.filter-chip-x` | `border-left: 1px solid var(--border); padding-left: 6px; color: var(--text-faint)`; hover `color: var(--primary)` |
+| `.filter-clear` | `color: var(--primary); text-decoration: none; font-size: 12px` |
+| `.sgroup` | `margin-bottom: 16px` |
+| `.sgroup-head` | `position: sticky; top: 48px; z-index: 5; display: flex; align-items: baseline; gap: 8px; padding: 6px 0; background: var(--bg); border-bottom: 1px solid var(--border)` |
+| `.sgroup-label` | `font-size: 12px; font-weight: 600` |
+| `.sgroup-meta` | `margin-left: auto; font-size: 11px; color: var(--text-muted)` |
+| `.session-rows` | `display: flex; flex-direction: column; border-top: 1px solid var(--border)` |
+| `.srow` | `display: block; padding: 7px 8px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit`; `:hover`/`:focus` -> `background: var(--hover)` |
+| `.srow-top` | `display: flex; align-items: baseline; gap: 8px` |
+| `.srow-label` | `flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis` |
+| `.srow-time` | `flex-shrink: 0; width: 10ch; text-align: right; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums` |
+| `.srow-meta` | `display: flex; gap: 12px; margin-top: 2px; font-size: 11px; color: var(--text-muted)` |
+| `.srow-project` | `width: 22ch; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis` |
+| `.srow-model` | as `.srow-project` at `width: 20ch` |
+| `.srow-stat` | `width: 11ch; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums` |
+| `.srow-none` | `color: var(--text-faint)` (the `-` placeholder) |
+| `.list-footer` | `display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 12px; color: var(--text-muted)` |
+| `.empty-state` | promoted from `memSectionCSS()` unchanged |
+
+**Decision:** row hover/focus feedback is a background change only. No
+`box-shadow` (0002 finding 6 caps shadows at dropdowns and pressed/hover
+elevation; a 44px hairline row is not elevated), no transform, no border
+recolor that would fight the hairline grid.
+
+**Decision:** no `data-provider` attribute on rows. Provider filtering is
+server-side now; the index page's client-side hide-the-cards filter
+(`indexJS`, templates.go:3466) is not reused here.
+
+## 9. Interaction spec
+
+New `sessionsJS()` (~45 lines). **Decision:** do not reuse `indexJS()` for
+the controls — it binds `#search`/`#sort`/`#provider-filter` by id with
+different param semantics and would fight the form. Do keep the shared
+theme-toggle and global-search bindings by including `indexJS()` as well,
+and give every form control a `s-`-prefixed id (`s-q`, `s-provider`,
+`s-project`, `s-group`, `s-sort`) so nothing collides.
+
+| Key | Action | Guard |
+|---|---|---|
+| `/` | focus `#s-q` | not already in an input |
+| `Esc` | blur the filter input | |
+| `j` | focus next `.srow` | `!e.target.matches('input, textarea, select')` |
+| `k` | focus previous `.srow` | same |
+| `Enter` | open the focused row | native `<a>` behavior |
+| `d` | toggle theme | same guard |
+
+**Decision:** `j`/`k` move real DOM focus (`el.focus()` +
+`scrollIntoView({block:'nearest'})`) rather than maintaining a separate
+`.active` class. Free focus ring from the global `:focus-visible`, free
+Enter-to-open, free screen-reader position, zero new CSS.
+
+**Decision:** `/` focuses *this page's* filter, not the top-nav global
+search. On this page the filter is the instrument. This diverges from
+index/project, where `indexJS` prefers the nav search even though the
+placeholder says `(press /)` — **Open:** align those pages afterwards; the
+current behavior there contradicts its own copy.
+
+**Decision:** implement `d` here. The top-nav button has advertised
+`Toggle theme (d)` since the redesign (templates.go:3208) and no page binds
+the key — grep for a `d` handler returns nothing. Four lines fixes a
+documented-but-absent shortcut.
+
+**Decision:** every control submits through a 400ms debounce, the same one
+`indexJS` uses for search. This is not only for typing: Firefox fires
+`change` while arrow-keying through a closed `<select>`, and an
+un-debounced auto-submit makes keyboard selection impossible. One code
+path solves both.
+
+Before submit, JS disables empty-valued fields so they are omitted from the
+query string. Without JS you get `?q=&model=` — ugly, still correct.
+
+## 10. Responsive, dark, reduced motion
+
+Breakpoints per 0002: 1024px and 700px only.
+
+- **<= 1024px:** hide `.srow-model` (the least load-bearing cell). Control
+  bar already wraps.
+- **<= 700px:** `.search-wrap { max-width: none; flex-basis: 100% }`;
+  `.srow-project { width: auto; flex: 1 }`; hide the prompts stat (keep
+  msg + tok); `.sgroup-meta` shows the session count only. Row stays two
+  lines — it must not become three.
+
+**Flag (pre-existing, do not fix here):** the shell still hides `.sidebar`
+at 900px (style.css:2548) and has 768/600 queries, which contradicts the
+0002 two-breakpoint rule. Moving 900 -> 1024 touches every page; file it
+separately.
+
+Dark mode rides the tokens — every new class uses `--bg`, `--border`,
+`--text-muted`, `--text-faint`, `--hover`. Two things to flag:
+
+1. **Contrast defect the row list will multiply:** `.provider-badge` sets
+   `color: #fff` on `--accent-cc/cx/gx`, which in dark mode are *light*
+   (`#e08662`, `#3fb950`, `#a371f7`). White on `#3fb950` is ~2.1:1. One
+   badge per row makes this the most-repeated element on the page. Fix:
+   `[data-theme="dark"] .provider-badge { color: var(--bg); }`.
+2. `--text-faint` (`#97908a` on `#fcfbfa`, ~2.9:1) fails small-text
+   contrast. Restricted here to the `-` placeholder and ` · ` separators,
+   where low contrast is semantically correct. All readable meta uses
+   `--text-muted` (~4.9:1).
+
+Reduced motion: the page adds **no** animation. Hover is a color change,
+which the global reduce block correctly preserves (0002 finding 4). The
+only motion is the existing `.search-spinner`.
+
+## 11. Inherited defects worth naming
+
+- `pageHeader()` loads Tailwind from a CDN (templates.go:3272), which
+  contradicts CLAUDE.md's "single binary, no CDN". The new page inherits
+  it; it should be removed repo-wide, not worked around here.
+- `.empty-state` living in `memSectionCSS()` (section 7).
+- The `d` shortcut advertised but unbound (section 9).
+- `/` focus inconsistency on index/project (section 9).
+
+## 12. Tests
+
+Follow `internal/web/server_test.go`'s table style: param parsing
+(defaults, `limit=0`, bad dates), the q = summary-OR-ID-prefix split,
+group bucketing and ordering for each mode, and limit-before-group.
+Render assertions: chip row appears iff a filter is set, footer copy
+switches between truncated and complete.
+
+## 13. Reconciliation with the in-flight implementation
+
+`internal/web/sessions.go` (untracked at time of writing, ~493 lines)
+already implements a working v1: route, `sessionsQuery` parsing, the four
+group modes, `defaultSessionsLimit = 100`, a JSON endpoint, and
+`sessionsPageURL` — which composes params correctly and even decrements the
+`before` end-of-day back to the date the user typed. **Keep all of that.**
+This spec is the second pass over the surface, not a rewrite.
+
+Deltas, in rough priority order:
+
+| # | Area | Today | Spec | Why |
+|---|---|---|---|---|
+| 1 | List item | `.card .session-card`, 3 lines | `.srow`, 2 lines | halves rows per screen and no columns align (§4) |
+| 2 | Row stats | messages, **tools**, tokens | messages, **prompts**, tokens | `sort=prompts` exists but the number is invisible; tools is visible but not sortable (§4) |
+| 3 | `model` / `after` / `before` | parsed, no UI | "More filters" disclosure | three params reachable only by hand-editing the URL |
+| 4 | Active filters | invisible | chip row with per-param `x` | with §3 landed, set filters must be visible and clearable |
+| 5 | Zero-JS | selects are JS-only, no `<form>` | `<form method="get">` + `<noscript>` Apply | page is unusable without script today |
+| 6 | Group header | `.group-header`, static | `.sgroup-head`, sticky `top: 48px` | you lose your place seven screens down |
+| 7 | Group meta | `⧫ <tokens>` | `N sessions · <tok> tok · <last>` | CLAUDE.md: text labels over cryptic symbols. **Open:** `⧫` is an established idiom on the project page; changing it here diverges until that page follows |
+| 8 | Select submit | immediate on `change` | 400ms debounce | Firefox fires `change` while arrow-keying a closed select — keyboard selection currently navigates away mid-choice |
+| 9 | Project select | discovery order, no counts | alphabetical + `(N)` | 47 options in recency order is unsearchable |
+| 10 | Footer | `Show all N sessions` | `Showing X of Y` + `Show 500` + `Show all (slower)` | truncation should be stated, not implied by the presence of a link |
+| 11 | Keyboard | `/` only (via `indexJS`) | `/`, `j`, `k`, `d` | §9 |
+| 12 | Label | `Summary` | `Title` else `Summary` | free, and pre-wires the quick-parse Title work (§4) |
+
+**Live bug, independent of any of the above:** `sessions.go:282` renders
+`<div class="empty-state">`, but `.empty-state` is defined only inside
+`memSectionCSS()` (templates.go:3187), which this page never emits. The
+empty state currently renders as unstyled body text. Promoting the class to
+`style.css` (§7) fixes it.
diff --git a/internal/catalog/session_query.go b/internal/catalog/session_query.go
index 6bbae36..6c9a68b 100644
--- a/internal/catalog/session_query.go
+++ b/internal/catalog/session_query.go
@@ -24,6 +24,7 @@ const (
 	SortTime     SessionSort = "time"
 	SortMessages SessionSort = "messages"
 	SortPrompts  SessionSort = "prompts"
+	SortTokens   SessionSort = "tokens"
 )
 
 type SessionQuery struct {
@@ -86,6 +87,13 @@ func SortSessions(sessions []*parser.Session, sortBy SessionSort) {
 		sort.SliceStable(sessions, func(i, j int) bool {
 			return sessions[i].Stats.UserPrompts > sessions[j].Stats.UserPrompts
 		})
+	case SortTokens:
+		// Input+output only, matching what the UIs display; cache
+		// tokens would double-count long sessions.
+		sort.SliceStable(sessions, func(i, j int) bool {
+			return sessions[i].Stats.InputTokens+sessions[i].Stats.OutputTokens >
+				sessions[j].Stats.InputTokens+sessions[j].Stats.OutputTokens
+		})
 	default:
 		sort.SliceStable(sessions, func(i, j int) bool {
 			return sessions[i].EndTime.After(sessions[j].EndTime)
@@ -95,10 +103,10 @@ func SortSessions(sessions []*parser.Session, sortBy SessionSort) {
 
 func ValidateSessionSort(sortBy SessionSort) error {
 	switch sortBy {
-	case "", SortTime, SortMessages, SortPrompts:
+	case "", SortTime, SortMessages, SortPrompts, SortTokens:
 		return nil
 	default:
-		return fmt.Errorf("invalid sort %q (want time, messages, or prompts)", sortBy)
+		return fmt.Errorf("invalid sort %q (want time, messages, prompts, or tokens)", sortBy)
 	}
 }
 
diff --git a/internal/catalog/session_query_test.go b/internal/catalog/session_query_test.go
index 9e7d492..c265c72 100644
--- a/internal/catalog/session_query_test.go
+++ b/internal/catalog/session_query_test.go
@@ -138,3 +138,21 @@ func TestValidateSessionSortRejectsUnknownSort(t *testing.T) {
 		t.Fatal("ValidateSessionSort(bogus) returned nil, want error")
 	}
 }
+
+func TestSortSessionsTokensRanksByInputPlusOutput(t *testing.T) {
+	sessions := []*parser.Session{
+		{ID: "small", Stats: parser.SessionStats{InputTokens: 100, OutputTokens: 50}},
+		{ID: "big", Stats: parser.SessionStats{InputTokens: 5000, OutputTokens: 2000}},
+		{ID: "cache-heavy", Stats: parser.SessionStats{InputTokens: 10, OutputTokens: 5, CacheReadTokens: 999999}},
+	}
+
+	SortSessions(sessions, SortTokens)
+
+	if sessions[0].ID != "big" || sessions[1].ID != "small" || sessions[2].ID != "cache-heavy" {
+		t.Fatalf("token sort = [%s %s %s], want [big small cache-heavy]",
+			sessions[0].ID, sessions[1].ID, sessions[2].ID)
+	}
+	if err := ValidateSessionSort(SortTokens); err != nil {
+		t.Fatalf("ValidateSessionSort(tokens) = %v, want nil", err)
+	}
+}
diff --git a/internal/cmd/sessions.go b/internal/cmd/sessions.go
index f5a3e8d..5899f20 100644
--- a/internal/cmd/sessions.go
+++ b/internal/cmd/sessions.go
@@ -49,7 +49,7 @@ var (
 )
 
 func init() {
-	sessionsCmd.Flags().StringVar(&sessionsSort, "sort", "time", "sort by: time, messages, prompts")
+	sessionsCmd.Flags().StringVar(&sessionsSort, "sort", "time", "sort by: time, messages, prompts, tokens")
 	sessionsCmd.Flags().IntVar(&sessionsLimit, "limit", 20, "limit number of sessions (0 = no limit)")
 	sessionsCmd.Flags().BoolVar(&sessionsJSON, "json", false, "output as JSON")
 	sessionsCmd.Flags().StringVarP(&sessionsProvider, "provider", "p", "", "filter by provider: cc, cx, gx, all")
diff --git a/internal/web/server.go b/internal/web/server.go
index bbebdbc..cec3240 100644
--- a/internal/web/server.go
+++ b/internal/web/server.go
@@ -86,6 +86,7 @@ func Serve(addr string, backend provider.Backend) error {
 
 	// Pages
 	mux.HandleFunc("/", handleIndex)
+	mux.HandleFunc("/sessions", handleSessionsPage)
 	mux.HandleFunc("/project/", handleProject)
 	mux.HandleFunc("/session/", handleSession)
 	mux.HandleFunc("/settings", handleSettings)
@@ -96,6 +97,7 @@ func Serve(addr string, backend provider.Backend) error {
 
 	// API
 	mux.HandleFunc("/api/projects", handleAPIProjects)
+	mux.HandleFunc("/api/sessions", handleAPISessions)
 	mux.HandleFunc("/api/sessions/", handleAPISessions)
 	mux.HandleFunc("/api/session/", handleAPISession)
 	mux.HandleFunc("/api/stats", handleAPIStats)
@@ -702,7 +704,12 @@ func handleAPIProjects(w http.ResponseWriter, r *http.Request) {
 }
 
 func handleAPISessions(w http.ResponseWriter, r *http.Request) {
-	encodedName := strings.TrimPrefix(r.URL.Path, "/api/sessions/")
+	encodedName := strings.TrimPrefix(r.URL.Path, "/api/sessions")
+	encodedName = strings.TrimPrefix(encodedName, "/")
+	if encodedName == "" {
+		handleAPISessionsGlobal(w, r)
+		return
+	}
 	project, err := sessionProvider.FindProject(encodedName)
 	if err != nil || project == nil {
 		http.NotFound(w, r)
diff --git a/internal/web/sessions.go b/internal/web/sessions.go
new file mode 100644
index 0000000..b117b76
--- /dev/null
+++ b/internal/web/sessions.go
@@ -0,0 +1,815 @@
+package web
+
+import (
+	"encoding/json"
+	"fmt"
+	"html"
+	"net/http"
+	"net/url"
+	"sort"
+	"strconv"
+	"strings"
+	"time"
+
+	"github.com/thevibeworks/ccx/internal/catalog"
+	"github.com/thevibeworks/ccx/internal/parser"
+)
+
+// Global sessions page (/sessions). Spec: docs/design/0003-global-sessions.md
+
+// defaultSessionsLimit bounds the initial render of the global
+// sessions page. The full corpus can run to thousands of sessions;
+// grouping and scanning stay useful on a bounded window, and the
+// footer links to ?limit=0 for the full list.
+const defaultSessionsLimit = 100
+
+// sessionEntry pairs a session with its owning project so the
+// renderer can link /session/<encoded>/<id> and show project
+// affiliation without re-deriving the mapping.
+type sessionEntry struct {
+	Session *parser.Session
+	Project *parser.Project
+}
+
+// sessionGroup is one rendered group on the sessions page. Key is
+// the machine value (encoded project name, date, provider id,
+// model); Label is what the header shows.
+type sessionGroup struct {
+	Key     string
+	Label   string
+	Href    string // optional header link (project groups)
+	Entries []sessionEntry
+	Tokens  int
+	Latest  time.Time
+
+	projectSet map[string]bool
+}
+
+func (g *sessionGroup) add(e sessionEntry) {
+	s := e.Session
+	g.Entries = append(g.Entries, e)
+	g.Tokens += s.Stats.InputTokens + s.Stats.OutputTokens
+	if s.EndTime.After(g.Latest) {
+		g.Latest = s.EndTime
+	}
+	if e.Project != nil {
+		if g.projectSet == nil {
+			g.projectSet = make(map[string]bool)
+		}
+		g.projectSet[e.Project.EncodedName] = true
+	}
+}
+
+func (g *sessionGroup) ProjectCount() int { return len(g.projectSet) }
+
+// sessionsQuery is the parsed, validated state of the sessions page.
+// Every field round-trips through URL params so views are shareable.
+// Search is matched here (summary OR ID prefix), not through
+// SessionFilter.Query, which the CLI shares and matches summary only.
+type sessionsQuery struct {
+	Filter  catalog.SessionQuery
+	GroupBy string
+	SortBy  string
+	Limit   int
+	Search  string
+	Project string
+	Model   string
+	After   string // raw YYYY-MM-DD as typed, for inputs and chips
+	Before  string
+}
+
+// Filtered reports whether any user filter narrows the corpus.
+// limit is a window, not a filter.
+func (sq sessionsQuery) Filtered() bool {
+	return sq.Search != "" || sq.Project != "" || sq.Model != "" ||
+		sq.After != "" || sq.Before != "" || sq.Filter.Filter.Provider != ""
+}
+
+func validGroupBy(g string) string {
+	switch g {
+	case "project", "day", "provider", "model":
+		return g
+	default:
+		return ""
+	}
+}
+
+func parseSessionsQuery(r *http.Request) sessionsQuery {
+	q := r.URL.Query()
+
+	sortBy := q.Get("sort")
+	if catalog.ValidateSessionSort(catalog.SessionSort(sortBy)) != nil || sortBy == "" {
+		sortBy = string(catalog.SortTime)
+	}
+
+	limit := defaultSessionsLimit
+	if raw := q.Get("limit"); raw != "" {
+		if n, err := strconv.Atoi(raw); err == nil && n >= 0 {
+			limit = n
+		}
+	}
+
+	query := catalog.SessionQuery{
+		Scope:  catalog.ScopeAll,
+		Filter: parseSessionFilter(r),
+		Sort:   catalog.SessionSort(sortBy),
+	}
+	search := strings.TrimSpace(query.Filter.Query)
+	// The q param means "summary OR session-ID prefix" on this page;
+	// matchesSearch applies it after the shared filter runs.
+	query.Filter.Query = ""
+
+	project := strings.TrimSpace(q.Get("project"))
+	if project != "" {
+		query.Scope = catalog.ScopeProject
+		query.ProjectName = project
+	}
+
+	after, before := q.Get("after"), q.Get("before")
+	if query.Filter.After.IsZero() {
+		after = ""
+	}
+	if query.Filter.Before.IsZero() {
+		before = ""
+	}
+
+	return sessionsQuery{
+		Filter:  query,
+		GroupBy: validGroupBy(q.Get("group")),
+		SortBy:  sortBy,
+		Limit:   limit,
+		Search:  search,
+		Project: project,
+		Model:   strings.TrimSpace(q.Get("model")),
+		After:   after,
+		Before:  before,
+	}
+}
+
+func matchesSearch(s *parser.Session, q string) bool {
+	if q == "" {
+		return true
+	}
+	ql := strings.ToLower(q)
+	return strings.Contains(strings.ToLower(s.Summary), ql) ||
+		strings.HasPrefix(strings.ToLower(s.ID), ql)
+}
+
+// collectSessions applies the query and returns the visible entries,
+// the total match count, and the distinct-project count of the match
+// set (both computed before the limit window).
+func collectSessions(projects []*parser.Project, sq sessionsQuery) (entries []sessionEntry, total, matchProjects int) {
+	owner := make(map[*parser.Session]*parser.Project)
+	for _, p := range projects {
+		for _, s := range p.Sessions {
+			owner[s] = p
+		}
+	}
+
+	var matched []sessionEntry
+	projSeen := make(map[*parser.Project]bool)
+	for _, s := range catalog.ApplySessionQuery(projects, sq.Filter) {
+		if !matchesSearch(s, sq.Search) {
+			continue
+		}
+		e := sessionEntry{Session: s, Project: owner[s]}
+		matched = append(matched, e)
+		if e.Project != nil {
+			projSeen[e.Project] = true
+		}
+	}
+
+	total = len(matched)
+	if sq.Limit > 0 && len(matched) > sq.Limit {
+		matched = matched[:sq.Limit]
+	}
+	return matched, total, len(projSeen)
+}
+
+func providerDisplayName(id string) string {
+	switch id {
+	case "claude-code":
+		return "Claude Code"
+	case "codex":
+		return "Codex"
+	case "grok":
+		return "Grok"
+	case "":
+		return "Unknown"
+	default:
+		return id
+	}
+}
+
+// groupSessions splits entries into groups keyed by mode. Rows inside
+// a group keep the active sort; groups themselves are ordered by
+// their most recent session (so day groups descend by date), except
+// provider mode which uses the fixed CC, CX, GX order.
+func groupSessions(entries []sessionEntry, mode string) []*sessionGroup {
+	if mode == "" {
+		g := &sessionGroup{}
+		for _, e := range entries {
+			g.add(e)
+		}
+		return []*sessionGroup{g}
+	}
+
+	var groups []*sessionGroup
+	index := make(map[string]*sessionGroup)
+	for _, e := range entries {
+		key, label, href := groupKey(e, mode)
+		g, ok := index[key]
+		if !ok {
+			g = &sessionGroup{Key: key, Label: label, Href: href}
+			index[key] = g
+			groups = append(groups, g)
+		}
+		g.add(e)
+	}
+
+	if mode == "provider" {
+		rank := map[string]int{"claude-code": 0, "codex": 1, "grok": 2}
+		sort.SliceStable(groups, func(i, j int) bool {
+			ri, iOK := rank[groups[i].Key]
+			rj, jOK := rank[groups[j].Key]
+			if iOK != jOK {
+				return iOK
+			}
+			if iOK {
+				return ri < rj
+			}
+			return groups[i].Latest.After(groups[j].Latest)
+		})
+	} else {
+		sort.SliceStable(groups, func(i, j int) bool {
+			return groups[i].Latest.After(groups[j].Latest)
+		})
+	}
+	return groups
+}
+
+func groupKey(e sessionEntry, mode string) (key, label, href string) {
+	s := e.Session
+	switch mode {
+	case "project":
+		if e.Project == nil {
+			return "unknown", "unknown project", ""
+		}
+		enc := e.Project.EncodedName
+		return enc, parser.GetProjectDisplayName(enc), "/project/" + enc
+	case "day":
+		if s.EndTime.IsZero() {
+			return "undated", "undated", ""
+		}
+		day := s.EndTime.Local()
+		return day.Format("2006-01-02"), day.Format("Mon 2006-01-02"), ""
+	case "provider":
+		return s.Provider, providerDisplayName(s.Provider), ""
+	case "model":
+		if s.Model == "" {
+			return "unknown", "(no model recorded)", ""
+		}
+		return s.Model, s.Model, ""
+	}
+	return "", "", ""
+}
+
+// handleAPISessionsGlobal serves GET /api/sessions: the cross-project
+// session list with the same filter/sort/limit params as /sessions.
+// Unlike the per-project array endpoint it wraps results in an
+// envelope so callers can see how many matches the limit hid.
+func handleAPISessionsGlobal(w http.ResponseWriter, r *http.Request) {
+	projects, err := sessionProvider.DiscoverProjects()
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	sq := parseSessionsQuery(r)
+	entries, total, _ := collectSessions(projects, sq)
+
+	type sessionResp struct {
+		ID          string  `json:"id"`
+		Provider    string  `json:"provider"`
+		Project     string  `json:"project"`
+		ProjectName string  `json:"project_name"`
+		Summary     string  `json:"summary"`
+		StartTime   string  `json:"start_time"`
+		EndTime     string  `json:"end_time"`
+		Messages    int     `json:"messages"`
+		Tokens      int     `json:"tokens"`
+		CostUSD     float64 `json:"cost_usd,omitempty"`
+		Model       string  `json:"model,omitempty"`
+	}
+
+	resp := make([]sessionResp, 0, len(entries))
+	for _, e := range entries {
+		s := e.Session
+		item := sessionResp{
+			ID:        s.ID,
+			Provider:  s.Provider,
+			Summary:   s.Summary,
+			StartTime: s.StartTime.Format(time.RFC3339),
+			EndTime:   s.EndTime.Format(time.RFC3339),
+			Messages:  s.Stats.MessageCount,
+			Tokens:    s.Stats.InputTokens + s.Stats.OutputTokens,
+			CostUSD:   s.Stats.CostUSD,
+			Model:     s.Model,
+		}
+		if e.Project != nil {
+			item.Project = e.Project.EncodedName
+			item.ProjectName = parser.GetProjectDisplayName(e.Project.EncodedName)
+		}
+		resp = append(resp, item)
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	_ = json.NewEncoder(w).Encode(map[string]any{
+		"sessions": resp,
+		"total":    total,
+		"shown":    len(resp),
+	})
+}
+
+func handleSessionsPage(w http.ResponseWriter, r *http.Request) {
+	if r.URL.Path != "/sessions" {
+		renderNotFoundPage(w, r, "page", "no ccx route matches "+r.URL.Path)
+		return
+	}
+
+	projects, err := sessionProvider.DiscoverProjects()
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	sq := parseSessionsQuery(r)
+	entries, total, matchProjects := collectSessions(projects, sq)
+	groups := groupSessions(entries, sq.GroupBy)
+
+	corpus := 0
+	for _, p := range projects {
+		corpus += len(p.Sessions)
+	}
+
+	// Alphabetical by display name for the project select: you are
+	// looking for a name you already know, and native typeahead
+	// needs a stable order.
+	sort.Slice(projects, func(i, j int) bool {
+		return strings.ToLower(parser.GetProjectDisplayName(projects[i].EncodedName)) <
+			strings.ToLower(parser.GetProjectDisplayName(projects[j].EncodedName))
+	})
+
+	view := sessionsView{
+		Query:          sq,
+		Groups:         groups,
+		Shown:          len(entries),
+		MatchTotal:     total,
+		MatchProjects:  matchProjects,
+		CorpusSessions: corpus,
+		CorpusProjects: len(projects),
+	}
+
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	fmt.Fprint(w, renderSessionsPage(projects, view))
+}
+
+type sessionsView struct {
+	Query          sessionsQuery
+	Groups         []*sessionGroup
+	Shown          int
+	MatchTotal     int // matches before the limit window
+	MatchProjects  int // distinct projects in the match set
+	CorpusSessions int // all sessions, unfiltered
+	CorpusProjects int
+}
+
+// formatCount renders 2314 as "2,314"; row-level numbers stay bare.
+func formatCount(n int) string {
+	s := strconv.Itoa(n)
+	if len(s) <= 3 {
+		return s
+	}
+	var b strings.Builder
+	lead := len(s) % 3
+	if lead > 0 {
+		b.WriteString(s[:lead])
+	}
+	for i := lead; i < len(s); i += 3 {
+		if b.Len() > 0 {
+			b.WriteByte(',')
+		}
+		b.WriteString(s[i : i+3])
+	}
+	return b.String()
+}
+
+func renderSessionsPage(projects []*parser.Project, v sessionsView) string {
+	sq := v.Query
+	var b strings.Builder
+
+	b.WriteString(pageHeader("Sessions - ccx", "light"))
+	b.WriteString(renderTopNav("", ""))
+	b.WriteString(`<div class="layout">`)
+	b.WriteString(renderSidebar("sessions"))
+
+	b.WriteString(`<main class="main-content">`)
+	b.WriteString(`<div class="page-header page-header-sessions">`)
+	b.WriteString(`<span class="page-badge badge-session">S</span>`)
+	b.WriteString(`<h1>Sessions</h1>`)
+	if sq.Filtered() {
+		b.WriteString(fmt.Sprintf(`<div class="stats">%s of %s sessions · %d projects</div>`,
+			formatCount(v.MatchTotal), formatCount(v.CorpusSessions), v.MatchProjects))
+	} else {
+		b.WriteString(fmt.Sprintf(`<div class="stats">%s sessions across %d projects</div>`,
+			formatCount(v.CorpusSessions), v.CorpusProjects))
+	}
+	b.WriteString(`</div>`)
+
+	b.WriteString(renderSessionsControls(projects, sq))
+	b.WriteString(renderFilterChips(projects, sq))
+
+	if v.Shown == 0 {
+		if sq.Filtered() {
+			b.WriteString(`<div class="empty-state">No sessions match these filters.<br><a href="/sessions">Clear filters</a></div>`)
+		} else {
+			b.WriteString(`<div class="empty-state">No sessions found. ccx reads ~/.claude, ~/.codex and ~/.grok — start an agent session first.</div>`)
+		}
+	} else {
+		for _, g := range v.Groups {
+			b.WriteString(`<section class="sgroup">`)
+			if g.Label != "" {
+				renderGroupHead(&b, g, sq.GroupBy)
+			}
+			b.WriteString(`<div class="session-rows">`)
+			for _, e := range g.Entries {
+				renderSessionRow(&b, e, sq.GroupBy)
+			}
+			b.WriteString(`</div></section>`)
+		}
+	}
+
+	b.WriteString(renderSessionsFooter(sq, v))
+
+	b.WriteString(`</main>`)
+	b.WriteString(`</div>`)
+	b.WriteString(renderFooter())
+	b.WriteString(indexJS())
+	b.WriteString(sessionsJS())
+	b.WriteString(pageFooter())
+
+	return b.String()
+}
+
+func renderSessionsControls(projects []*parser.Project, sq sessionsQuery) string {
+	var b strings.Builder
+	prov := sq.Filter.Filter.Provider
+
+	b.WriteString(`<form method="get" action="/sessions" id="s-form" class="controls controls-wrap">`)
+	b.WriteString(`<div class="search-wrap">`)
+	b.WriteString(fmt.Sprintf(`<input type="text" id="s-q" name="q" class="search-input" placeholder="Filter sessions... (press /)" value="%s">`, html.EscapeString(sq.Search)))
+	b.WriteString(`<span class="search-spinner" id="search-spinner"></span>`)
+	b.WriteString(`</div>`)
+	b.WriteString(`<div class="sort-controls">`)
+
+	b.WriteString(fmt.Sprintf(`<select id="s-provider" name="provider" class="sort-select" title="Filter by provider">
+		<option value="">All providers</option>
+		<option value="claude-code"%s>Claude Code</option>
+		<option value="codex"%s>Codex</option>
+		<option value="grok"%s>Grok</option>
+	</select>`, selected(prov, "claude-code"), selected(prov, "codex"), selected(prov, "grok")))
+
+	b.WriteString(`<select id="s-project" name="project" class="sort-select" title="Filter by project"><option value="">All projects</option>`)
+	for _, p := range projects {
+		b.WriteString(fmt.Sprintf(`<option value="%s"%s>%s (%d)</option>`,
+			html.EscapeString(p.EncodedName), selected(sq.Project, p.EncodedName),
+			html.EscapeString(parser.GetProjectDisplayName(p.EncodedName)), len(p.Sessions)))
+	}
+	b.WriteString(`</select>`)
+
+	b.WriteString(`<span class="sort-label">Group:</span>`)
+	b.WriteString(fmt.Sprintf(`<select id="s-group" name="group" class="sort-select">
+		<option value="">None</option>
+		<option value="project"%s>Project</option>
+		<option value="day"%s>Day</option>
+		<option value="provider"%s>Provider</option>
+		<option value="model"%s>Model</option>
+	</select>`, selected(sq.GroupBy, "project"), selected(sq.GroupBy, "day"), selected(sq.GroupBy, "provider"), selected(sq.GroupBy, "model")))
+
+	b.WriteString(`<span class="sort-label">Sort:</span>`)
+	b.WriteString(fmt.Sprintf(`<select id="s-sort" name="sort" class="sort-select">
+		<option value="">Recent</option>
+		<option value="messages"%s>Messages</option>
+		<option value="prompts"%s>Prompts</option>
+		<option value="tokens"%s>Tokens</option>
+	</select>`, selected(sq.SortBy, "messages"), selected(sq.SortBy, "prompts"), selected(sq.SortBy, "tokens")))
+
+	b.WriteString(`<noscript><button type="submit" class="sort-select">Apply</button></noscript>`)
+	b.WriteString(`</div>`)
+
+	open := ""
+	if sq.Model != "" || sq.After != "" || sq.Before != "" {
+		open = " open"
+	}
+	b.WriteString(fmt.Sprintf(`<details class="filter-more"%s><summary>More filters</summary><div class="filter-more-body">`, open))
+	b.WriteString(fmt.Sprintf(`<label class="filter-field"><span class="sort-label">Model</span><input type="text" id="s-model" name="model" class="filter-input" placeholder="e.g. opus" value="%s"></label>`, html.EscapeString(sq.Model)))
+	b.WriteString(fmt.Sprintf(`<label class="filter-field"><span class="sort-label">After</span><input type="date" id="s-after" name="after" class="filter-input" value="%s"></label>`, html.EscapeString(sq.After)))
+	b.WriteString(fmt.Sprintf(`<label class="filter-field"><span class="sort-label">Before</span><input type="date" id="s-before" name="before" class="filter-input" value="%s"></label>`, html.EscapeString(sq.Before)))
+	b.WriteString(`</div></details>`)
+
+	b.WriteString(`</form>`)
+	return b.String()
+}
+
+// renderFilterChips makes every active filter visible and clearable
+// without JS — each x is a link to the same URL minus that param.
+func renderFilterChips(projects []*parser.Project, sq sessionsQuery) string {
+	type chip struct{ param, label, value string }
+	var chips []chip
+	if sq.Search != "" {
+		chips = append(chips, chip{"q", "q", sq.Search})
+	}
+	if p := sq.Filter.Filter.Provider; p != "" {
+		chips = append(chips, chip{"provider", "provider", providerDisplayName(p)})
+	}
+	if sq.Project != "" {
+		display := sq.Project
+		for _, p := range projects {
+			if p.EncodedName == sq.Project {
+				display = parser.GetProjectDisplayName(p.EncodedName)
+				break
+			}
+		}
+		chips = append(chips, chip{"project", "project", display})
+	}
+	if sq.Model != "" {
+		chips = append(chips, chip{"model", "model", sq.Model})
+	}
+	if sq.After != "" {
+		chips = append(chips, chip{"after", "after", sq.After})
+	}
+	if sq.Before != "" {
+		chips = append(chips, chip{"before", "before", sq.Before})
+	}
+	if len(chips) == 0 {
+		return ""
+	}
+
+	var b strings.Builder
+	b.WriteString(`<div class="filter-chips">`)
+	for _, c := range chips {
+		b.WriteString(fmt.Sprintf(`<span class="filter-chip">%s: <b>%s</b><a class="filter-chip-x" href="%s" aria-label="remove %s filter">x</a></span>`,
+			c.label, html.EscapeString(c.value),
+			html.EscapeString(sessionsPageURL(sq, c.param, "")), c.label))
+	}
+	b.WriteString(`<a class="filter-clear" href="/sessions">Clear all</a>`)
+	b.WriteString(`</div>`)
+	return b.String()
+}
+
+func renderGroupHead(b *strings.Builder, g *sessionGroup, mode string) {
+	b.WriteString(`<div class="sgroup-head">`)
+	if mode == "provider" {
+		b.WriteString(providerBadgeHTML(g.Key))
+	}
+	label := html.EscapeString(g.Label)
+	if mode == "day" {
+		today := time.Now().Local().Format("2006-01-02")
+		yesterday := time.Now().Local().AddDate(0, 0, -1).Format("2006-01-02")
+		switch g.Key {
+		case today:
+			label += `<span class="sgroup-day-hint"> · today</span>`
+		case yesterday:
+			label += `<span class="sgroup-day-hint"> · yesterday</span>`
+		}
+	}
+	if g.Href != "" {
+		b.WriteString(fmt.Sprintf(`<a href="%s" class="sgroup-label">%s</a>`, html.EscapeString(g.Href), label))
+	} else {
+		b.WriteString(fmt.Sprintf(`<span class="sgroup-label">%s</span>`, label))
+	}
+
+	count := "1 session"
+	if n := len(g.Entries); n != 1 {
+		count = fmt.Sprintf("%s sessions", formatCount(n))
+	}
+	// Everything past the count collapses at the 700px breakpoint.
+	var extra []string
+	if mode != "project" && g.ProjectCount() > 0 {
+		if g.ProjectCount() == 1 {
+			extra = append(extra, "1 project")
+		} else {
+			extra = append(extra, fmt.Sprintf("%d projects", g.ProjectCount()))
+		}
+	}
+	if g.Tokens > 0 {
+		extra = append(extra, formatTokens(g.Tokens)+" tok")
+	}
+	if mode == "project" && !g.Latest.IsZero() {
+		extra = append(extra, formatAge(g.Latest))
+	}
+	b.WriteString(`<span class="sgroup-meta">` + count)
+	if len(extra) > 0 {
+		b.WriteString(fmt.Sprintf(`<span class="sgroup-meta-extra"> · %s</span>`, strings.Join(extra, " · ")))
+	}
+	b.WriteString(`</span></div>`)
+}
+
+// sessionRowLabel: Title beats Summary. Title is only populated on
+// the full parse path today, so this is Summary in practice; the
+// precedence is written so quick-parse Title lights it up for free.
+func sessionRowLabel(s *parser.Session) string {
+	if s.Title != "" {
+		return s.Title
+	}
+	if s.Summary != "" {
+		return s.Summary
+	}
+	return "(no summary)"
+}
+
+func renderSessionRow(b *strings.Builder, e sessionEntry, groupBy string) {
+	s := e.Session
+	enc := ""
+	if e.Project != nil {
+		enc = e.Project.EncodedName
+	}
+
+	// The tooltip carries what the two lines cannot: absolute times,
+	// duration, tool calls, and the untruncated summary.
+	dur := s.Stats.DurationSeconds
+	if dur <= 0 {
+		dur = s.EndTime.Sub(s.StartTime).Seconds()
+	}
+	tip := fmt.Sprintf("%s -> %s (%s)",
+		s.StartTime.Format("2006-01-02 15:04"),
+		s.EndTime.Format("15:04"),
+		formatDuration(dur))
+	if s.Stats.ToolCalls > 0 {
+		tip += fmt.Sprintf(" | %d tool calls", s.Stats.ToolCalls)
+	}
+	tip += " | " + sessionRowLabel(s)
+
+	stat := func(n int, unit, extraClass string) string {
+		if n <= 0 {
+			return fmt.Sprintf(`<span class="srow-stat srow-none%s" title="not reported by this provider">-</span>`, extraClass)
+		}
+		return fmt.Sprintf(`<span class="srow-stat%s">%s %s</span>`, extraClass, formatCount(n), unit)
+	}
+	tokCell := `<span class="srow-stat srow-none" title="not reported by this provider">-</span>`
+	if tok := s.Stats.InputTokens + s.Stats.OutputTokens; tok > 0 {
+		tokCell = fmt.Sprintf(`<span class="srow-stat">%s tok</span>`, formatTokens(tok))
+	}
+
+	var meta strings.Builder
+	if groupBy != "project" {
+		name := ""
+		if e.Project != nil {
+			name = parser.GetProjectDisplayName(e.Project.EncodedName)
+		}
+		meta.WriteString(fmt.Sprintf(`<span class="srow-project">%s</span>`, html.EscapeString(name)))
+	}
+	if groupBy != "model" {
+		model := s.Model
+		if model == "" {
+			model = "-"
+		}
+		meta.WriteString(fmt.Sprintf(`<span class="srow-model">%s</span>`, html.EscapeString(model)))
+	}
+	meta.WriteString(stat(s.Stats.MessageCount, "msg", ""))
+	promptUnit := "prompts"
+	if s.Stats.UserPrompts == 1 {
+		promptUnit = "prompt"
+	}
+	meta.WriteString(stat(s.Stats.UserPrompts, promptUnit, " srow-stat-prompts"))
+	meta.WriteString(tokCell)
+
+	fmt.Fprintf(b, `
+<a href="/session/%s/%s" class="srow" title="%s">
+	<div class="srow-top">%s<span class="srow-label">%s</span><span class="srow-time" title="%s">%s</span></div>
+	<div class="srow-meta">%s</div>
+</a>`,
+		html.EscapeString(enc), html.EscapeString(s.ID),
+		html.EscapeString(tip),
+		providerBadgeHTML(s.Provider),
+		html.EscapeString(sessionRowLabel(s)),
+		s.EndTime.Format("2006-01-02 15:04"),
+		formatRelativeTime(s.EndTime),
+		meta.String())
+}
+
+// renderSessionsFooter states the truncation honestly: what is
+// shown, what matched, and the links to widen the window.
+func renderSessionsFooter(sq sessionsQuery, v sessionsView) string {
+	matching := " matching"
+	if !sq.Filtered() {
+		matching = ""
+	}
+
+	var b strings.Builder
+	b.WriteString(`<div class="list-footer">`)
+	if v.Shown < v.MatchTotal {
+		b.WriteString(fmt.Sprintf(`<span>Showing %s of %s%s sessions</span>`,
+			formatCount(v.Shown), formatCount(v.MatchTotal), matching))
+		if v.MatchTotal > 500 && sq.Limit < 500 {
+			b.WriteString(fmt.Sprintf(`<a href="%s">Show 500</a>`, html.EscapeString(sessionsPageURL(sq, "limit", "500"))))
+		}
+		b.WriteString(fmt.Sprintf(`<a href="%s">Show all %s (slower)</a>`,
+			html.EscapeString(sessionsPageURL(sq, "limit", "0")), formatCount(v.MatchTotal)))
+	} else if v.Shown > 0 {
+		b.WriteString(fmt.Sprintf(`<span>Showing all %s%s sessions</span>`, formatCount(v.Shown), matching))
+	}
+	b.WriteString(`</div>`)
+	return b.String()
+}
+
+// sessionsPageURL rebuilds the page URL from the current query with
+// one param overridden (value "" removes it), so controls compose
+// instead of resetting each other. Params at their defaults are
+// omitted to keep shared links readable.
+func sessionsPageURL(sq sessionsQuery, key, value string) string {
+	params := url.Values{}
+	set := func(k, v string) {
+		if v != "" {
+			params.Set(k, v)
+		}
+	}
+	set("q", sq.Search)
+	set("project", sq.Project)
+	set("provider", sq.Filter.Filter.Provider)
+	set("model", sq.Model)
+	set("after", sq.After)
+	set("before", sq.Before)
+	set("group", sq.GroupBy)
+	if sq.SortBy != string(catalog.SortTime) {
+		set("sort", sq.SortBy)
+	}
+	if sq.Limit != defaultSessionsLimit {
+		params.Set("limit", strconv.Itoa(sq.Limit))
+	}
+	if value == "" {
+		params.Del(key)
+	} else {
+		params.Set(key, value)
+	}
+	if enc := params.Encode(); enc != "" {
+		return "/sessions?" + enc
+	}
+	return "/sessions"
+}
+
+// sessionsJS wires the filter form and this page's keyboard map.
+// indexJS is also emitted for the shared theme button and top-nav
+// global search; the s- id prefix keeps this form out of its way.
+func sessionsJS() string {
+	return `
+<script>
+(function() {
+  const form = document.getElementById('s-form');
+  if (!form) return;
+  let t;
+  // One debounced path for typing AND selects: Firefox fires change
+  // while arrow-keying through a closed select, so instant submit
+  // would navigate away mid-choice.
+  function submitSoon() {
+    clearTimeout(t);
+    document.getElementById('search-spinner')?.classList.add('loading');
+    t = setTimeout(() => {
+      // Empty fields would submit as ?q=&model= — strip them.
+      form.querySelectorAll('input, select').forEach(el => { if (!el.value) el.disabled = true; });
+      form.submit();
+    }, 400);
+  }
+  form.querySelectorAll('select').forEach(el => el.addEventListener('change', submitSoon));
+  form.querySelectorAll('input[type="date"]').forEach(el => el.addEventListener('change', submitSoon));
+  form.querySelectorAll('input[type="text"]').forEach(el => el.addEventListener('input', submitSoon));
+
+  const rows = Array.from(document.querySelectorAll('.srow'));
+  document.addEventListener('keydown', function(e) {
+    if (e.target.matches('input, textarea, select')) {
+      if (e.key === 'Escape') e.target.blur();
+      return;
+    }
+    if (e.key === '/') {
+      // Registered after indexJS's handler so this wins the focus:
+      // on this page the filter is the instrument, not global search.
+      e.preventDefault();
+      document.getElementById('s-q')?.focus();
+    } else if (e.key === 'j' || e.key === 'k') {
+      const cur = rows.indexOf(document.activeElement);
+      const next = e.key === 'j' ? Math.min(cur + 1, rows.length - 1) : Math.max(cur - 1, 0);
+      if (rows[next]) {
+        rows[next].focus();
+        rows[next].scrollIntoView({ block: 'nearest' });
+      }
+    } else if (e.key === 'd') {
+      const html = document.documentElement;
+      const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+      html.setAttribute('data-theme', next);
+      localStorage.setItem('ccx-theme', next);
+    }
+  });
+})();
+</script>
+`
+}
diff --git a/internal/web/sessions_test.go b/internal/web/sessions_test.go
new file mode 100644
index 0000000..e59a170
--- /dev/null
+++ b/internal/web/sessions_test.go
@@ -0,0 +1,388 @@
+package web
+
+import (
+	"encoding/json"
+	"net/http/httptest"
+	"os"
+	"path/filepath"
+	"strings"
+	"testing"
+	"time"
+
+	"github.com/thevibeworks/ccx/internal/parser"
+)
+
+// setupMultiProjectDir builds two projects with one session each:
+// -proj-alpha (newer, 2024-02-01) and -proj-beta (older, 2024-01-01).
+func setupMultiProjectDir(t *testing.T) string {
+	t.Helper()
+	dir := t.TempDir()
+
+	write := func(project, session, ts, text string) {
+		projectDir := filepath.Join(dir, "projects", project)
+		if err := os.MkdirAll(projectDir, 0755); err != nil {
+			t.Fatal(err)
+		}
+		content := `{"type":"user","timestamp":"` + ts + `","uuid":"u1","message":{"content":"` + text + `"}}
+{"type":"assistant","timestamp":"` + ts + `","uuid":"a1","parentUuid":"u1","message":{"content":"ok"}}
+`
+		if err := os.WriteFile(filepath.Join(projectDir, session+".jsonl"), []byte(content), 0644); err != nil {
+			t.Fatal(err)
+		}
+	}
+
+	write("-proj-alpha", "alpha-session-111", "2024-02-01T10:00:00Z", "alpha work")
+	write("-proj-beta", "beta-session-222", "2024-01-01T10:00:00Z", "beta work")
+	return dir
+}
+
+func TestHandleSessionsPage_ListsAcrossProjects(t *testing.T) {
+	dir := setupMultiProjectDir(t)
+	setTestBackend(dir)
+
+	req := httptest.NewRequest("GET", "/sessions", nil)
+	w := httptest.NewRecorder()
+	handleSessionsPage(w, req)
+
+	if w.Code != 200 {
+		t.Fatalf("status = %d, want 200", w.Code)
+	}
+	body := w.Body.String()
+	for _, want := range []string{"alpha-se", "beta-ses", "/session/-proj-alpha/", "/session/-proj-beta/"} {
+		if !strings.Contains(body, want) {
+			t.Errorf("body missing %q", want)
+		}
+	}
+	// Newer session must render before the older one (sort=time default).
+	if strings.Index(body, "alpha-se") > strings.Index(body, "beta-ses") {
+		t.Error("alpha (newer) should render before beta (older)")
+	}
+}
+
+func TestHandleSessionsPage_RejectsOtherPaths(t *testing.T) {
+	dir := setupMultiProjectDir(t)
+	setTestBackend(dir)
+
+	req := httptest.NewRequest("GET", "/sessions/nope", nil)
+	w := httptest.NewRecorder()
+	handleSessionsPage(w, req)
+
+	if w.Code != 404 {
+		t.Fatalf("status = %d, want 404", w.Code)
+	}
+}
+
+func TestHandleSessionsPage_GroupByProject(t *testing.T) {
+	dir := setupMultiProjectDir(t)
+	setTestBackend(dir)
+
+	req := httptest.NewRequest("GET", "/sessions?group=project", nil)
+	w := httptest.NewRecorder()
+	handleSessionsPage(w, req)
+
+	body := w.Body.String()
+	if !strings.Contains(body, "sgroup-head") {
+		t.Fatal("grouped view missing group headers")
+	}
+	// Project group headers link to the project page.
+	if !strings.Contains(body, `href="/project/-proj-alpha"`) {
+		t.Error("project group header should link to /project/-proj-alpha")
+	}
+	// Grouping by project drops the redundant project cell from rows.
+	if strings.Contains(body, `class="srow-project"`) {
+		t.Error("project-grouped rows should not repeat the project cell")
+	}
+}
+
+func TestHandleSessionsPage_GroupByDay(t *testing.T) {
+	dir := setupMultiProjectDir(t)
+	setTestBackend(dir)
+
+	req := httptest.NewRequest("GET", "/sessions?group=day", nil)
+	w := httptest.NewRecorder()
+	handleSessionsPage(w, req)
+
+	body := w.Body.String()
+	// Two sessions on different days: two group headers.
+	if strings.Count(body, "sgroup-head\"") < 2 {
+		t.Errorf("expected 2 day groups, body has %d sgroup-head", strings.Count(body, "sgroup-head\""))
+	}
+}
+
+func TestHandleSessionsPage_ProjectFilter(t *testing.T) {
+	dir := setupMultiProjectDir(t)
+	setTestBackend(dir)
+
+	req := httptest.NewRequest("GET", "/sessions?project=-proj-alpha", nil)
+	w := httptest.NewRecorder()
+	handleSessionsPage(w, req)
+
+	body := w.Body.String()
+	if !strings.Contains(body, "/session/-proj-alpha/") {
+		t.Error("filtered view missing alpha session")
+	}
+	if strings.Contains(body, "/session/-proj-beta/") {
+		t.Error("project filter leaked beta session into results")
+	}
+}
+
+func TestHandleSessionsPage_EmptyState(t *testing.T) {
+	dir := setupMultiProjectDir(t)
+	setTestBackend(dir)
+
+	req := httptest.NewRequest("GET", "/sessions?q=nomatchxyz", nil)
+	w := httptest.NewRecorder()
+	handleSessionsPage(w, req)
+
+	if !strings.Contains(w.Body.String(), "No sessions match") {
+		t.Error("zero-result view missing empty state")
+	}
+}
+
+func TestHandleSessionsPage_InvalidParamsFallBack(t *testing.T) {
+	dir := setupMultiProjectDir(t)
+	setTestBackend(dir)
+
+	req := httptest.NewRequest("GET", "/sessions?sort=bogus&group=bogus&limit=-5", nil)
+	w := httptest.NewRecorder()
+	handleSessionsPage(w, req)
+
+	if w.Code != 200 {
+		t.Fatalf("status = %d, want 200 (invalid params fall back to defaults)", w.Code)
+	}
+	if !strings.Contains(w.Body.String(), "/session/-proj-alpha/") {
+		t.Error("fallback view missing sessions")
+	}
+}
+
+func TestHandleAPISessionsGlobal_Envelope(t *testing.T) {
+	dir := setupMultiProjectDir(t)
+	setTestBackend(dir)
+
+	req := httptest.NewRequest("GET", "/api/sessions", nil)
+	w := httptest.NewRecorder()
+	handleAPISessions(w, req)
+
+	if w.Code != 200 {
+		t.Fatalf("status = %d, want 200", w.Code)
+	}
+	var resp struct {
+		Sessions []struct {
+			ID      string `json:"id"`
+			Project string `json:"project"`
+		} `json:"sessions"`
+		Total int `json:"total"`
+		Shown int `json:"shown"`
+	}
+	if err := json.Unmarshal(w.Body.Bytes(), &resp); err != nil {
+		t.Fatal(err)
+	}
+	if resp.Total != 2 || resp.Shown != 2 || len(resp.Sessions) != 2 {
+		t.Fatalf("total=%d shown=%d len=%d, want 2/2/2", resp.Total, resp.Shown, len(resp.Sessions))
+	}
+	if resp.Sessions[0].Project == "" {
+		t.Error("global session response missing project encoded name")
+	}
+}
+
+func TestHandleAPISessionsGlobal_LimitReportsTotal(t *testing.T) {
+	dir := setupMultiProjectDir(t)
+	setTestBackend(dir)
+
+	req := httptest.NewRequest("GET", "/api/sessions?limit=1", nil)
+	w := httptest.NewRecorder()
+	handleAPISessions(w, req)
+
+	var resp struct {
+		Total int `json:"total"`
+		Shown int `json:"shown"`
+	}
+	if err := json.Unmarshal(w.Body.Bytes(), &resp); err != nil {
+		t.Fatal(err)
+	}
+	if resp.Total != 2 || resp.Shown != 1 {
+		t.Fatalf("total=%d shown=%d, want total=2 shown=1", resp.Total, resp.Shown)
+	}
+}
+
+func TestHandleAPISessions_PerProjectStillWorks(t *testing.T) {
+	dir := setupMultiProjectDir(t)
+	setTestBackend(dir)
+
+	req := httptest.NewRequest("GET", "/api/sessions/-proj-alpha", nil)
+	w := httptest.NewRecorder()
+	handleAPISessions(w, req)
+
+	if w.Code != 200 {
+		t.Fatalf("status = %d, want 200", w.Code)
+	}
+	body := w.Body.String()
+	if !strings.HasPrefix(strings.TrimSpace(body), "[") {
+		t.Error("per-project endpoint should keep its bare-array shape")
+	}
+	if strings.Contains(body, "beta-session") {
+		t.Error("per-project endpoint leaked other project's session")
+	}
+}
+
+func TestGroupSessions_ProviderModeAndAggregates(t *testing.T) {
+	now := time.Date(2026, 8, 11, 10, 0, 0, 0, time.UTC)
+	entries := []sessionEntry{
+		{Session: &parser.Session{ID: "a", Provider: "claude-code", EndTime: now,
+			Stats: parser.SessionStats{InputTokens: 100, OutputTokens: 20, MessageCount: 5}}},
+		{Session: &parser.Session{ID: "b", Provider: "codex", EndTime: now.Add(-time.Hour),
+			Stats: parser.SessionStats{InputTokens: 10, OutputTokens: 5, MessageCount: 2}}},
+		{Session: &parser.Session{ID: "c", Provider: "claude-code", EndTime: now.Add(-2 * time.Hour),
+			Stats: parser.SessionStats{InputTokens: 1, OutputTokens: 1, MessageCount: 1}}},
+	}
+
+	groups := groupSessions(entries, "provider")
+	if len(groups) != 2 {
+		t.Fatalf("groups = %d, want 2", len(groups))
+	}
+	// First-encounter order: claude-code seen first.
+	if groups[0].Key != "claude-code" || groups[1].Key != "codex" {
+		t.Fatalf("group order = [%s %s], want [claude-code codex]", groups[0].Key, groups[1].Key)
+	}
+	if groups[0].Label != "Claude Code" {
+		t.Errorf("label = %q, want Claude Code", groups[0].Label)
+	}
+	if len(groups[0].Entries) != 2 || groups[0].Tokens != 122 {
+		t.Errorf("claude group entries=%d tokens=%d, want 2/122", len(groups[0].Entries), groups[0].Tokens)
+	}
+	if !groups[0].Latest.Equal(now) {
+		t.Errorf("claude group latest = %v, want %v", groups[0].Latest, now)
+	}
+}
+
+func TestGroupSessions_ProviderFixedOrderBeatsRecency(t *testing.T) {
+	now := time.Date(2026, 8, 11, 10, 0, 0, 0, time.UTC)
+	// grok has the most recent session but must still sort last.
+	entries := []sessionEntry{
+		{Session: &parser.Session{ID: "g", Provider: "grok", EndTime: now}},
+		{Session: &parser.Session{ID: "x", Provider: "codex", EndTime: now.Add(-time.Hour)}},
+		{Session: &parser.Session{ID: "c", Provider: "claude-code", EndTime: now.Add(-2 * time.Hour)}},
+	}
+
+	groups := groupSessions(entries, "provider")
+	got := []string{groups[0].Key, groups[1].Key, groups[2].Key}
+	want := []string{"claude-code", "codex", "grok"}
+	for i := range want {
+		if got[i] != want[i] {
+			t.Fatalf("provider group order = %v, want %v", got, want)
+		}
+	}
+}
+
+func TestMatchesSearch_SummaryOrIDPrefix(t *testing.T) {
+	s := &parser.Session{ID: "019F6528-abcd", Summary: "Fix session lookup recovery"}
+	cases := []struct {
+		q    string
+		want bool
+	}{
+		{"", true},
+		{"lookup", true}, // summary substring
+		{"LOOKUP", true}, // case-folded
+		{"019f65", true}, // ID prefix, case-folded
+		{"f6528", false}, // ID substring but not prefix
+		{"unrelated", false},
+	}
+	for _, c := range cases {
+		if got := matchesSearch(s, c.q); got != c.want {
+			t.Errorf("matchesSearch(%q) = %v, want %v", c.q, got, c.want)
+		}
+	}
+}
+
+func TestHandleSessionsPage_ChipsAppearOnlyWhenFiltered(t *testing.T) {
+	dir := setupMultiProjectDir(t)
+	setTestBackend(dir)
+
+	req := httptest.NewRequest("GET", "/sessions", nil)
+	w := httptest.NewRecorder()
+	handleSessionsPage(w, req)
+	if strings.Contains(w.Body.String(), `class="filter-chip"`) {
+		t.Error("unfiltered page should render no chips")
+	}
+
+	req = httptest.NewRequest("GET", "/sessions?q=alpha&provider=claude-code", nil)
+	w = httptest.NewRecorder()
+	handleSessionsPage(w, req)
+	body := w.Body.String()
+	if !strings.Contains(body, `class="filter-chip"`) {
+		t.Fatal("filtered page missing chip row")
+	}
+	if !strings.Contains(body, "q: <b>alpha</b>") {
+		t.Error("missing q chip")
+	}
+	if !strings.Contains(body, "provider: <b>Claude Code</b>") {
+		t.Error("missing provider chip with display name")
+	}
+	if !strings.Contains(body, `href="/sessions">Clear all</a>`) {
+		t.Error("missing Clear all link")
+	}
+	// Removing the q chip keeps the provider filter.
+	if !strings.Contains(body, "provider=claude-code") {
+		t.Error("chip removal URL should preserve the other filter")
+	}
+}
+
+func TestRenderSessionsFooter_Copy(t *testing.T) {
+	unfiltered := sessionsQuery{Limit: defaultSessionsLimit, SortBy: "time"}
+	filtered := sessionsQuery{Limit: defaultSessionsLimit, SortBy: "time", Search: "x"}
+
+	truncated := renderSessionsFooter(unfiltered, sessionsView{Shown: 100, MatchTotal: 2314})
+	for _, want := range []string{"Showing 100 of 2,314 sessions", "Show 500", "Show all 2,314 (slower)"} {
+		if !strings.Contains(truncated, want) {
+			t.Errorf("truncated footer missing %q in %q", want, truncated)
+		}
+	}
+	if strings.Contains(truncated, "matching") {
+		t.Error("unfiltered footer should not say matching")
+	}
+
+	complete := renderSessionsFooter(filtered, sessionsView{Shown: 42, MatchTotal: 42})
+	if !strings.Contains(complete, "Showing all 42 matching sessions") {
+		t.Errorf("complete footer = %q", complete)
+	}
+	if strings.Contains(complete, "Show all") || strings.Contains(complete, "Show 500") {
+		t.Error("complete footer should have no widen links")
+	}
+
+	small := renderSessionsFooter(filtered, sessionsView{Shown: 100, MatchTotal: 312})
+	if strings.Contains(small, "Show 500") {
+		t.Error("Show 500 is pointless when only 312 match")
+	}
+	if !strings.Contains(small, "Show all 312 (slower)") {
+		t.Errorf("small footer missing show-all: %q", small)
+	}
+}
+
+func TestFormatCount(t *testing.T) {
+	cases := map[int]string{0: "0", 42: "42", 999: "999", 1000: "1,000", 2314: "2,314", 1234567: "1,234,567"}
+	for n, want := range cases {
+		if got := formatCount(n); got != want {
+			t.Errorf("formatCount(%d) = %q, want %q", n, got, want)
+		}
+	}
+}
+
+func TestSessionsPageURL_OverridesAndClears(t *testing.T) {
+	sq := sessionsQuery{
+		Search:  "fix",
+		GroupBy: "day",
+		SortBy:  "tokens",
+		Limit:   defaultSessionsLimit,
+	}
+	got := sessionsPageURL(sq, "limit", "0")
+	for _, want := range []string{"q=fix", "group=day", "sort=tokens", "limit=0"} {
+		if !strings.Contains(got, want) {
+			t.Errorf("url %q missing %q", got, want)
+		}
+	}
+
+	cleared := sessionsPageURL(sq, "group", "")
+	if strings.Contains(cleared, "group=") {
+		t.Errorf("url %q should have cleared group", cleared)
+	}
+}
diff --git a/internal/web/static/style.css b/internal/web/static/style.css
index 7cd00af..7231c29 100644
--- a/internal/web/static/style.css
+++ b/internal/web/static/style.css
@@ -214,6 +214,8 @@ code, pre, .session-id, .model-badge {
 .provider-CC { background: var(--accent-cc); color: #fff; }
 .provider-CX { background: var(--accent-cx); color: #fff; }
 .provider-GX { background: var(--accent-gx); color: #fff; }
+/* Dark accents are light hues; white text on them is ~2.1:1. */
+[data-theme="dark"] .provider-badge { color: var(--bg); }
 .search-loading, .search-empty {
   padding: 16px;
   color: var(--text-muted);
@@ -2705,3 +2707,87 @@ body.watching .tail-spinner { display: flex; align-items: center; gap: 8px; }
   }
   .msg-target { outline-color: var(--primary); animation: none; }
 }
+
+/* ---- Global sessions page (/sessions) ----
+ * Spec: docs/design/0003-global-sessions.md. Dense two-line rows,
+ * hairline grid, sticky group headers. Everything rides the tokens. */
+.empty-state { color: var(--text-muted); font-style: italic; padding: 24px 0; }
+
+.controls-wrap { flex-wrap: wrap; row-gap: 8px; }
+.filter-more { flex-basis: 100%; font-size: 12px; }
+.filter-more > summary { cursor: pointer; color: var(--text-muted); }
+.filter-more-body { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 8px; }
+.filter-field { display: flex; align-items: center; gap: 6px; }
+.filter-input {
+  padding: 6px 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg);
+  color: var(--text);
+  font-size: 12px;
+  font-family: var(--font-mono);
+}
+.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 16px; align-items: center; }
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 6px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-secondary);
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.filter-chip b { color: var(--text); font-weight: 600; }
+.filter-chip-x { border-left: 1px solid var(--border); padding-left: 6px; color: var(--text-faint); text-decoration: none; }
+.filter-chip-x:hover { color: var(--primary); }
+.filter-clear { color: var(--primary); text-decoration: none; font-size: 12px; }
+
+.sgroup { margin-bottom: 16px; }
+.sgroup-head {
+  position: sticky;
+  top: 48px;
+  z-index: 5;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 6px 0;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+}
+.sgroup-label { font-size: 12px; font-weight: 600; color: var(--text); text-decoration: none; }
+a.sgroup-label:hover { color: var(--primary); }
+.sgroup-day-hint { color: var(--text-faint); font-weight: 400; }
+.sgroup-meta { margin-left: auto; font-size: 11px; color: var(--text-muted); }
+
+.session-rows { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
+.sgroup-head + .session-rows { border-top: none; }
+.srow {
+  display: block;
+  padding: 7px 8px;
+  border-bottom: 1px solid var(--border);
+  text-decoration: none;
+  color: inherit;
+}
+.srow:hover, .srow:focus { background: var(--hover); }
+.srow-top { display: flex; align-items: baseline; gap: 8px; }
+.srow-label { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.srow-time { flex-shrink: 0; width: 10ch; text-align: right; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
+.srow-meta { display: flex; gap: 12px; margin-top: 2px; font-size: 11px; color: var(--text-muted); }
+.srow-project { width: 22ch; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.srow-model { width: 20ch; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.srow-stat { width: 11ch; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; }
+.srow-none { color: var(--text-faint); }
+.list-footer { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 12px; color: var(--text-muted); }
+.list-footer a { color: var(--primary); text-decoration: none; }
+
+@media (max-width: 1024px) {
+  .srow-model { display: none; }
+}
+@media (max-width: 700px) {
+  .controls-wrap .search-wrap { max-width: none; flex-basis: 100%; }
+  .srow-project { width: auto; flex: 1; }
+  .srow-stat-prompts { display: none; }
+  .sgroup-meta-extra { display: none; }
+}
diff --git a/internal/web/templates.go b/internal/web/templates.go
index db004b5..252060e 100644
--- a/internal/web/templates.go
+++ b/internal/web/templates.go
@@ -3184,7 +3184,7 @@ func memoryPageCSS() string {
 .prov-pill-cx { background: color-mix(in srgb, var(--accent-cx) 13%, transparent); color: var(--accent-cx); }
 .mem-card-cc { border-color: color-mix(in srgb, var(--accent-cc) 35%, var(--border)); }
 .mem-card-cx { border-color: color-mix(in srgb, var(--accent-cx) 35%, var(--border)); }
-.empty-state { color: var(--text-muted); font-style: italic; padding: 24px 0; }
+/* .empty-state lives in style.css (shared with /sessions). */
 </style>`
 }
 
@@ -3233,6 +3233,7 @@ func renderSidebar(active string) string {
 		href, label, key string
 	}{
 		{"/", "Projects", "projects"},
+		{"/sessions", "Sessions", "sessions"},
 		{"/search", "Search", "search"},
 		{"/insights", "Insights", "insights"},
 		{"/memory", "Memory", "memory"},

From 15ed47d8274bbefe22b388a0529f6d65b393847c Mon Sep 17 00:00:00 2001
From: Eric Wang <wrqatw@gmail.com>
Date: Tue, 11 Aug 2026 04:25:44 -0700
Subject: [PATCH 2/2] docs: changelog, README, devlog for global sessions;
 strip empties on native submit

Review pass: Enter in a text field fires native form submit, which
bypassed the debounced empty-param stripping and produced
?q=x&provider=&model= URLs. One shared stripEmpty on the submit
event covers both paths.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 CHANGELOG.md                                  | 10 +++
 README.md                                     |  1 +
 .../devlog/2026-08-11-web-global-sessions.org | 63 +++++++++++++++++++
 internal/web/sessions.go                      | 12 ++--
 4 files changed, 81 insertions(+), 5 deletions(-)
 create mode 100644 docs/devlog/2026-08-11-web-global-sessions.org

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a46942b..1205d5c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,16 @@ Versioning: [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
 
 ## [Unreleased]
 
+### Added
+- **Global sessions page: `/sessions` lists every session across every project.** The web UI could only list sessions per project, so "what ran yesterday, everywhere" meant visiting each project page. The new page is the cross-project cockpit: filter by text (summary substring or session-ID prefix), provider, project, model, and date range; group by project, day, provider, or model under sticky headers with per-group aggregates (count, projects, tokens); sort by recency, messages, prompts, or tokens. Dense two-line rows keep every sort key visible as an aligned column (design: docs/design/0003-global-sessions.md). State lives entirely in the URL so filtered views are shareable; active filters render as chips clearable per-param; the whole control bar is a real GET form that works without JavaScript. Default window is 100 sessions with an honest `Showing X of Y` footer and explicit show-more links.
+- **`GET /api/sessions` (no project suffix) serves the same query as JSON** — filter/group/sort/limit params identical to the page, wrapped in an envelope with `total` and `shown` so truncation is visible. The per-project `/api/sessions/<project>` keeps its existing bare-array shape.
+- **`--sort tokens` for `ccx sessions`.** The web sort landed in the shared catalog layer, so the CLI gains it too: ranks by input+output tokens (cache reads excluded — they would double-count long sessions).
+
+### Fixed
+- **Dark-mode provider badges were white-on-light (~2.1:1 contrast).** Dark-theme accent hues are light; badge text now uses the page ground color in dark mode.
+- **`.empty-state` only existed inside the memory-section CSS**, so any other page rendering it got unstyled body text. Promoted to the shared stylesheet.
+- **The advertised `d` theme shortcut now works on `/sessions`.** The top-nav button has said "Toggle theme (d)" since the shell redesign, but no page bound the key.
+
 ## [0.14.0] - 2026-08-03
 
 ### Changed
diff --git a/README.md b/README.md
index 7f7e9f3..328958e 100644
--- a/README.md
+++ b/README.md
@@ -31,6 +31,7 @@ ccx reads session files from `~/.claude/`, `~/.codex/`, and `~/.grok/` and gives
 
 - **Multi-provider** — Claude Code + Codex + Grok sessions merged by project, with provider badges
 - **Two-panel navigation** — Projects → Sessions → Conversation tree
+- **Global sessions** — `/sessions` lists every session across projects; filter by text/provider/project/model/date, group by project/day/provider/model, sort by recency/messages/prompts/tokens
 - **Live tail** — Watch active sessions update in real-time
 - **In-session search** — Filter by User, Response, Tools, Agents, Thinking
 - **Memory inspector** — View CLAUDE.md, MEMORY.md, AGENTS.md per project
diff --git a/docs/devlog/2026-08-11-web-global-sessions.org b/docs/devlog/2026-08-11-web-global-sessions.org
new file mode 100644
index 0000000..a377ec1
--- /dev/null
+++ b/docs/devlog/2026-08-11-web-global-sessions.org
@@ -0,0 +1,63 @@
+* [2026-08-11] Dev Log: Global sessions page (/sessions)          :WEB:UX:
+
+** Context
+The web UI listed sessions only per project. With ~1,800 main
+sessions across ~50 projects, "what ran yesterday, everywhere" meant
+visiting every project page. The CLI already answered this
+(=ccx sessions --all=) through catalog.SessionQuery; the web had no
+equivalent surface.
+
+** Why
+Cross-project session listing with filter by / group by / order by
+is the auditor's cockpit view. Design mandate: spec the UX against
+the existing material contract (0002 quiet-terminal token plan)
+before building — an Opus 5 design pass via the design-system skill
+produced docs/design/0003-global-sessions.md, then implementation
+followed its 12-row delta table.
+
+** What
+- =FEAT= /sessions page: filter q (summary OR ID prefix), provider,
+  project, model, after/before; group project/day/provider/model
+  with sticky aggregate headers; sort time/messages/prompts/tokens;
+  limit=100 default with Showing X of Y footer and show-more links.
+- =FEAT= GET /api/sessions global endpoint, envelope {sessions,
+  total, shown}; per-project endpoint keeps its bare-array shape.
+- =FEAT= catalog SortTokens — CLI gains =--sort tokens= for free.
+- =FIX= dark-mode provider badge contrast (white on light accent,
+  ~2.1:1 → ground-color text).
+- =FIX= .empty-state promoted from memSectionCSS to style.css.
+- =FIX= the advertised-but-unbound =d= theme shortcut (this page).
+
+** How
+Reuse over reimplementation: the handler builds a
+catalog.SessionQuery (ScopeAll / ScopeProject) and applies the same
+filter the CLI uses; the page-only "summary OR ID prefix" q
+semantics run as a post-filter so SessionFilter.Query (shared with
+the CLI) stays untouched. Grouping is a presentation transform:
+first-encounter buckets, then groups ordered by most-recent session
+(provider mode: fixed CC/CX/GX). Rows are dense two-line =.srow=
+entries — every sort key is a visible column; tools/duration move to
+the row tooltip. Controls are one GET form; JS adds a 400ms
+debounced auto-submit and strips empty params, chips give per-param
+removal as plain links, so zero-JS remains fully usable.
+
+** Decisions
+| Decision | Alternatives | Rationale | DRI | Timestamp |
+|----------+--------------+-----------+-----+-----------|
+| Rows, not cards | reuse .session-card | 2,300-session scan needs density + column alignment; cards halve rows/screen | design pass | 2026-08-11 |
+| q = summary OR ID prefix, post-filter | widen SessionFilter.Query | CLI shares SessionFilter; web-only semantics stay web-local | design pass | 2026-08-11 |
+| limit before grouping | group full match set | grouping is a view of what you look at, not a second query | design pass | 2026-08-11 |
+| groups ordered by most recent session | order by sort aggregate | one predictable rule for all four modes | design pass | 2026-08-11 |
+| no pagination | offset paging | auditors narrow with filters; limit + show-all covers the tail | design pass | 2026-08-11 |
+
+** Notes
+- Session.Title is populated on the full-parse path only; the row
+  label precedence (Title else Summary) is written and inert until
+  quick-parse carries Title (SessionMeta + quickParseListableSession
+  + CacheFormatVersion bump — follow-up, Eric-gated).
+- Deferred repo-wide flags from the design audit: Tailwind CDN in
+  pageHeader() contradicts single-binary; sidebar hides at 900px
+  vs the 0002 two-breakpoint rule; index/project =/= focus behavior
+  contradicts its own placeholder copy.
+- Verified live against the real store: default page 200KB/~40ms,
+  limit=0 (1,808 sessions) 2.4MB — opt-in, labeled "(slower)".
diff --git a/internal/web/sessions.go b/internal/web/sessions.go
index b117b76..a4f7578 100644
--- a/internal/web/sessions.go
+++ b/internal/web/sessions.go
@@ -771,15 +771,17 @@ func sessionsJS() string {
   // One debounced path for typing AND selects: Firefox fires change
   // while arrow-keying through a closed select, so instant submit
   // would navigate away mid-choice.
+  // Empty fields would submit as ?q=&model= — strip them.
+  function stripEmpty() {
+    form.querySelectorAll('input, select').forEach(el => { if (!el.value) el.disabled = true; });
+  }
   function submitSoon() {
     clearTimeout(t);
     document.getElementById('search-spinner')?.classList.add('loading');
-    t = setTimeout(() => {
-      // Empty fields would submit as ?q=&model= — strip them.
-      form.querySelectorAll('input, select').forEach(el => { if (!el.value) el.disabled = true; });
-      form.submit();
-    }, 400);
+    t = setTimeout(() => { stripEmpty(); form.submit(); }, 400);
   }
+  // Native submit (Enter in a text field) must strip too.
+  form.addEventListener('submit', stripEmpty);
   form.querySelectorAll('select').forEach(el => el.addEventListener('change', submitSoon));
   form.querySelectorAll('input[type="date"]').forEach(el => el.addEventListener('change', submitSoon));
   form.querySelectorAll('input[type="text"]').forEach(el => el.addEventListener('input', submitSoon));