Automatic navigational cards on index pages, replacing the sidebar menu.

render() now segments the body into .colseg wrappers and flags .multicol
itself, replacing the fragile colseg injection in pagerite.js. Columns
are capped at two; shrink-wrapped figures left-align inside columns.
New {.margin} breakout (and ::: aside) drops blocks into the left gutter
on wide viewports, falling back to in-column floats.

docs/analytics.md

@@ -5,8 +5,9 @@ Struct dumped to disk — separate from the kanta content database, path from
 `PAGERITE_ANALYTICS` (default: the database path with `.kantadb` replaced by
 `.analytics.json`, e.g. `pagerite.analytics.json`).
 
-- `pagerite/analytics.py` — data model (`Analytics`, `Visit`) and the `Store`
-  (in-memory data + session map, atomic JSON persistence).
+- `pagerite/analytics.py` — data model (`Analytics`, `Client`, `Visit`,
+  `CrawlerHit`, `AbuseHit`) and the `Store` (in-memory data + session map,
+  atomic JSON persistence).
 - `pagerite/app.py` — entry-referer stashing in `show_page` (`_track_entry`),
   the `POST /_a` ping endpoint, and `WebSocket /_api/ws/analytics`
   (admin-gated like every `/_api` endpoint).
@@ -19,14 +20,26 @@ Struct dumped to disk — separate from the kanta content database, path from
 ## What is collected
 
 The client (`pagerite.js`) POSTs fire-and-forget pings to `/_a` with
-`{fr, to}` (`fr` = source path):
+`fr`, `to`, `hide` and `read` as query parameters (`fr` = source path;
+falsy values are omitted):
 
-- **Initial page load**: `to` is the loaded path. This ping is what starts
+- **Initial page load**: only `to` — the loaded path — is sent, never `fr`
+  (an `fr` equal to `to` would log a bogus self-transition when a session
+  already exists, e.g. a second tab). This ping is what starts
   the visit and counts the entry page view — the document GET alone records
-  nothing, so bots and admin browsing never register. Reloads are not
+  nothing, so bots never register (admin browsing does register, but
+  flagged `hide`; see **Admins** below). JS-running crawlers
+  (Googlebot, GoogleOther, Applebot, ...) do ping, but their User-Agent
+  gives them away: pings whose UA matches `_is_bot_ua` (anything calling
+  itself a "bot", plus known exceptions such as GoogleOther) are ignored
+  server-side, and their document GETs land in the crawler list instead.
+  No source-IP verification is done: a spoofed bot UA merely lands in the
+  crawler stats, and scanners that probe telltale paths are caught by the
+  abuse rules regardless. Reloads are not
   visits: the ping is skipped (PerformanceNavigationTiming `reload`), so a
   refresh neither counts a second view nor logs a self-transition. The GET
-  handler stashes a cross-origin https `Referer` (origin part only) and any
+  handler stashes a cross-origin https `Referer` (origin part only —
+  unavailable to JS once the page has loaded) and any
   `utm_*` query parameters in in-memory IP tables, consumed by the ping that
   starts the visit; internal or absent referers never touch the referer table.
 - **Internal fetch-navigations**: `to` is the target path, sent only after
@@ -37,88 +50,170 @@ The client (`pagerite.js`) POSTs fire-and-forget pings to `/_a` with
   back), so the exit URL is not necessarily the last trail entry. Outbound
   links are stored by full URL so several links to the same domain remain
   distinct.
-- **Excluded**: back/forward (popstate) navigations, navigation involving
-  the analytics page itself (`/_a`), and everything while the user is known to
-  be an admin *and SSO is actually in use* — with no auth proxy (dev/test)
-  "admin" is everyone's state, so the gate is off and everything is recorded —
-  or has the editor open (`body.editing`). Admin noise, not visits.
+- **Excluded**: back/forward (popstate) navigations, navigating *to* the
+  analytics page (`/_a` — its GET is untracked, and the server rejects it
+  as a ping target anyway), and everything while the user has the editor
+  open (`body.editing`). Admin noise, not visits. Navigating *away* from
+  `/_a` does ping: the fetch-navigation already GET-ed the target page
+  without the preload header, and without the ping that GET would flush to
+  the crawler list.
+- **Admins**: when SSO is in use and the session is known to be an admin,
+  the client still pings but adds `hide=1`. The activity is recorded as
+  usual (navigations and all), but the `hide` flag is set on the **client
+  record** — so it covers everything that client ever did: visits and
+  crawler hits from before the login included. Hidden clients never appear
+  in the viewer payload: `Store.display()` drops their visits, crawler
+  hits, abuse hits and metadata, and computes every aggregate (site visits,
+  page views, transitions) from the visible visits only, so nothing needs
+  to be reversed or redacted. Pending crawler hits from a hidden client
+  are discarded when they expire, so admin browsing never lands in the
+  crawler list either. With no auth proxy
+  (dev/test) "admin" is everyone's state, so `hide` stays 0 and everything
+  is recorded.
 - The server validates `to`: internal paths must be valid slug paths
   ("/" or `[a-z0-9_-]` segments), external ones are re-derived to the
   https origin and accepted only when the client sent exactly that.
-- The initial ping also records the visitor's `User-Agent` and
-  `Accept-Language` headers. The first `Accept-Language` tag is stored as
-  `lang` (e.g. `en-us`) and its region subtag, if present, is stored as
-  an initial `country` (e.g. `US`).
-- The visitor IP is stored.  A reverse-DNS lookup is attempted for each new
-  visit and the result, when available, is cached in RAM and stored as
-  `host`; local/reserved/multicast addresses are skipped.
-- If a DB-IP MMDB file (`dbip-*.mmdb` or `dbip-*.mmdb.gz`) is present in the
-  repository root, it is loaded at startup and used to look up a more accurate
-  `country`.  The MMDB lookup and the reverse-DNS lookup run in background
-  tasks after the visit is stored, so the `/ _a` response is never delayed.
-  The decompressed `dbip-*.mmdb` file is kept in the repository root and
-  ignored by git.  The CLI flag `--dbip` (`uv run pagerite --dbip`) downloads
-  the latest `dbip-city-lite-YYYY-MM.mmdb.gz` from DB-IP before the server
-  starts, skipping the download when the local database is already current and
+- **Client records**: the visitor's IP (IPv4 or IPv6 /64 network), raw
+  `User-Agent` and extracted `Accept-Language` tag are hashed with blake3;
+  the first 6 bytes identify a shared `Client` record.  The `Client` stores
+  the full IP, `User-Agent`, compact `ua_pretty`, `lang`, initial
+  `country` from the language-region subtag, and asynchronously-filled
+  `country`/`city` from DB-IP geoip plus reverse-DNS `host`.  Visits,
+  crawler hits and abuse hits all reference this record by its hash, so
+  client metadata is stored once instead of repeated per event.
+- The visitor IP is stored in the `Client`.  A reverse-DNS lookup is
+  attempted for each new client and the result, when available, is stored as
+  `host`; local/reserved/multicast addresses are skipped.  If a DB-IP MMDB
+  file (`dbip-*.mmdb` or `dbip-*.mmdb.gz`) is present in the repository
+  root, it is loaded at startup and used to look up `country`/`city`.  These
+  lookups run in background tasks after the event is stored, so the `/_a`
+  response is never delayed.  The decompressed `dbip-*.mmdb` file is kept in
+  the repository root and ignored by git.  The CLI flag `--dbip`
+  (`uv run pagerite --dbip`) downloads the latest
+  `dbip-city-lite-YYYY-MM.mmdb.gz` from DB-IP before the server starts,
+  skipping the download when the local database is already current and
   removing older versions after an update; without the flag only an existing
   file is used.
 - **Crawler hits**: every document GET is queued in RAM as a pending crawler
-  hit.  If a ping from the same (IP, User-Agent) pair arrives within 10
-  seconds the hit is discarded; otherwise it is written to `crawlers`.
-  Crawlers do not count as visits or views.  In the analytics viewer, crawler
-  hits are grouped by the same (IP, User-Agent) pair and shown as a trail of
-  internal pages that crawler visited; the crawler table lists the most active
-  crawlers first rather than the most recent hits.
+  hit — except idle-time link preloads from pagerite.js, which carry an
+  `x-pagerite-preload` header and are not tracked at all (the ping sent when
+  the user actually navigates to a preloaded page does the counting; forging
+  the header only hides a GET from the crawler stats, the path-based abuse
+  classification is unaffected).  If a ping
+  from the same client arrives within 10 seconds the hit is discarded;
+  otherwise it is written to `crawlers` — unless the client is hidden
+  (admin), in which case the hit is discarded on expiry too.  Crawlers do not count as
+  visits or views.  The `Accept-Language` header is stored on the shared
+  `Client` immediately; reverse-DNS host names and DB-IP geoip
+  country/city are filled in asynchronously, just like for real visits.  In
+  the analytics viewer, crawler hits are grouped by client hash and shown as
+  a trail of internal pages that crawler visited; the crawler table lists
+  the most recent crawler first, with the most active as a tie-breaker.
+- **Abuse (scanner) hits**: a 404 for a telltale path — any URL segment
+  starting with a dot (`/.env`, `/.git/config`) or ending in `.php` —
+  classifies the source IP as abuse immediately, and ten plain 404s from one
+  IP do too.  Classification reclassifies history: all earlier crawler hits
+  from that IP (persisted and pending) move to the `abuse` list, so a
+  random-UA scanner no longer pollutes the crawler stats of the legitimate
+  bot it impersonates.  Once classified, every document GET and 404 from the
+  IP is recorded as an abuse hit with the full request path (query string
+  included), and its pings are ignored.  The classified IP set (`abuse_ips`)
+  is persisted in the JSON file; the plain-404 counters are RAM-only.  In the
+  viewer, abuse hits are grouped by IP (never by client/UA — scanners
+  randomize theirs) in a separate "Abuse" table.  Identical paths are
+  collapsed into one entry with their hit count; flagged paths that
+  triggered classification are lifted to the top, followed by other 404s and
+  then document GETs from the abuser.  Raw User-Agent strings are shown one
+  per line with their occurrence counts, and the full lists are click-to-copy.
 
 ## Visits and sessions
 
-There are no cookies. A visit is tied together by the (IP, User-Agent) pair
-(IP from the first `X-Forwarded-For` hop — we sit behind a proxy — else the
-direct peer): the first ping from a pair starts a new visit, subsequent
-pings extend it. Pings arriving with no known session (server restart)
-start a fresh visit from the first ping — treated as missing data rather
-than dropped. The (IP, UA) → visit map and the IP → entry-referer/UTM
-tables are in-memory only, but the IP and any resolvable reverse-DNS host
-name are stored on the `Visit` record itself.
+There are no cookies. A visit is tied together by a client hash — the first
+6 bytes of a blake3 digest over the prettified IP (IPv4 unchanged, IPv6
+/64 network), the raw `User-Agent` string and the extracted
+`Accept-Language` tag.  The first ping from a client hash starts a new
+visit; subsequent pings extend it.  Pings arriving with no known session
+(server restart) start a fresh visit from the first ping — treated as
+missing data rather than dropped.  The client-hash → visit map and the IP →
+entry-referer/UTM tables are in-memory only; client metadata is stored in
+`Analytics.clients` keyed by the client hash.
+
+Each `Client` record:
+
+- `ip` — visitor IP address (first `X-Forwarded-For` hop, or direct peer),
+- `host` — reverse-DNS host name for `ip` when resolvable, else `""`,
+- `lang` — first `Accept-Language` tag, lowercased (e.g. `"en-us"`),
+- `country` — two-letter country code.  Initially derived from the
+  `Accept-Language` region subtag, but overwritten by the DB-IP MMDB result
+  when a database is available,
+- `city` — city name from the DB-IP MMDB lookup, when available,
+- `ua` — raw `User-Agent` string,
+- `ua_pretty` — compact display form of the UA (browser/OS/device) when
+  parsable, otherwise the raw string,
+- `hide` — true for admin clients (`hide=1` ping): all their visits,
+  crawler hits and abuse hits are recorded but excluded from every
+  statistic and from the viewer payload.
 
 Each `Visit` record:
 
 - `start` — timestamp of the first event,
 - `entry` — first page (path) seen,
 - `referer` — external https origin of the initial load, `""` for direct,
-- `ip` — visitor IP address (first `X-Forwarded-For` hop, or direct peer),
-- `host` — reverse-DNS host name for `ip` when resolvable, else `""`,
-- `trail` — everything seen afterwards in first-seen order: page paths and
-  external exit URLs. Re-visiting an already seen page (incl. the entry)
-  does not append.
-- `lang` — first `Accept-Language` tag, lowercased (e.g. `en-us`),
-- `country` — two-letter country code.  Initially derived from the
-  `Accept-Language` region subtag, but overwritten by the DB-IP MMDB result
-  when a database is available,
-- `city` — city name from the DB-IP MMDB lookup, when available,
-- `ua` — raw `User-Agent` string from the initial ping,
-- `ua_pretty` — compact display form of the UA (browser/OS/device) when
-  parsable, otherwise the raw string,
+- `client` — 6-byte blake3 hash referencing `Analytics.clients`,
+- `trail` — the entry page and everything seen afterwards, keyed by the
+  timestamp of first sight (insertion order = first-seen order). Each item
+  holds `to` (page path or external exit URL), the accumulated active
+  reading time in seconds (`read`) and the most recent HTTP status seen
+  for the target (`status`). Re-visiting an already seen target updates
+  its item instead of appending.
+- `navs` — every navigation ping (`fr`, `to`), keyed by its timestamp,
+  repeats included. The aggregates are computed from this log at display
+  time.
 - `utm` — `utm_*` query parameters from the landing URL, as a dict.
 
 Each `CrawlerHit` record:
 
 - `start` — timestamp of the document GET,
 - `entry` — page path requested,
-- `ip` — IP address,
-- `ua` — raw `User-Agent` header,
-- `ua_pretty` — compact display form of the UA when parsable,
+- `client` — 6-byte blake3 hash referencing `Analytics.clients`,
 - `referer` — external https origin of the request, `""` for direct/none,
-- `query` — raw query string of the request.
+- `query` — raw query string of the request,
+- `status` — HTTP status of the served response (200 for a real page, 404
+  for a category placeholder or missing page).
 
-Crawler hits are grouped by User-Agent in the analytics viewer.
+Each `AbuseHit` record:
+
+- `start` — timestamp of the request,
+- `path` — full request path including the query string (e.g. `/.env?x=1`),
+- `client` — 6-byte blake3 hash referencing `Analytics.clients`,
+- `flag` — true for the path that triggered abuse classification (telltale
+  path or the 404 that crossed the threshold),
+- `is_404` — true for 404 responses, false for document GETs from the
+  abuser.
+
+Crawler hits are grouped by client hash in the analytics viewer; abuse hits
+are grouped by IP alone (resolved from the referenced `Client`).  In the
+Abuse table identical paths are collapsed with their counts; flagged paths
+that triggered classification are lifted to the top, followed by other 404s
+and then document GETs from the abuser.  Within each category paths are
+sorted by count descending, then by their earliest hit.
+
+In the visitor and crawler tables, internal paths that returned a 404 status
+are shown in red and the link title includes the status code, so it is easy
+to tell misses from real pages at a glance.
 
 ## Aggregates
 
+Aggregates are **not stored**; they are computed at display time by
+`Store.display()` from the visit records (entry + `navs` log), skipping
+hidden clients' visits. This is what allows a client to become hidden after
+navigations were already logged: no counts need reversing. The computed
+shapes, part of the WebSocket payload (`Display` struct alongside `visits`,
+`crawlers`, `abuse` and `clients`):
+
 - `transitions`: time series of page transitions, sparse nested dict
-  `from -> to -> bucket -> count` with the same 5-minute bucketing as
-  `views`. `from` is the referer origin or `"(direct)"` for initial loads,
-  a page path for pings.
+  `from -> to -> bucket -> count` with 5-minute bucketing. `from` is the
+  referer origin or `"(direct)"` for initial loads, a page path for pings.
 - `views`: time series of page loads, `path -> bucket -> count`, sparse: only
   non-zero 5-minute buckets exist (bucket key is its floored ISO timestamp).
   Every load counts, including repeats within a visit; external exit origins
@@ -127,7 +222,7 @@ Crawler hits are grouped by User-Agent in the analytics viewer.
   5-minute bucketing.
 
 Sparseness keeps quiet sites small; dropping old data is a matter of deleting
-list/dict entries (`visits` is a plain append-only list, buckets plain keys).
+list entries (`visits` is a plain append-only list).
 
 ## Persistence
 
@@ -148,18 +243,19 @@ with a "could not be loaded" message.
 Because it is a real page, fetch-navigation handles it like any other internal
 link: clicking the 📊 pen (or any link to `/_a`) fetches the server-rendered
 HTML, swaps the dynamic regions and mounts the Vue analytics app in place. The
-range selector updates the URL query string (`?range=week` etc.) so links to
-a specific range can be shared.
+range selector updates the URL hash (`#week` etc.) so links to a specific
+range can be shared. When the URL has no hash, the client derives the
+default from the first analytics snapshot: `day` if the recorded history
+spans less than 24 hours, otherwise `week`.
 
 `AnalyticsView.vue` is no longer a full-screen overlay; the `body.analytics-open`
 page-chrome hiding and `#/analytics/<range>` hash routing have been removed.
 
-Charts are SVG curves (Catmull-Rom over an edge-aware adaptive Gaussian —
-a change-point detector splits the series at traffic-level shifts, then
-each segment is smoothed with a bandwidth that ramps with a broad pilot
-estimate of the local rate: isolated events stay narrow (~0.4-unit sigma,
-peaking at ~1 event/unit), busy traffic widens to a 1-unit sigma. The raw
-series is drawn faint underneath). Values are
+Charts are SVG curves (Catmull-Rom over an edge-aware Gaussian — a
+change-point detector splits the series at traffic-level shifts, then each
+segment is smoothed independently with a fixed sigma chosen so N events in
+a single bucket peak at N events per unit. The raw series is drawn faint
+underneath). Values are
 **per-unit rates** — per hour on the week view (5-minute bucket counts × 12,
 plotted at native 5-minute resolution), per day on the month+ ranges — and
 the smoothing time scale follows the unit: the month+ sigmas are 24× the
@@ -170,27 +266,58 @@ labeled intervals, minor lines at fifths when integral; the minimum y-axis
 range is 10 so tiny values such as a single visit are not stretched to a
 fractional scale).
 The week range is aligned to Monday 00:00 UTC and overlays up to 8 previous
-weeks in the same accent color at decreasing opacity (the current week is
+weeks in the muted color at decreasing opacity (the current week keeps the
+accent color and is
 truncated at the current bucket, never drawing fake zeroes for the future);
-its x labels are weekday names centered at midday UTC, without vertical grid
+a compact legend inside the top right of the visits chart marks the current
+ISO week in accent and the overlaid past weeks as "Week M" or "Week M–N" on
+a muted specimen. Its x labels are weekday names centered at midday UTC, without
+vertical grid
 lines (day boundaries would be misleading in the viewer's timezone). The
 month view labels days the same lineless way — day numbers at noon UTC,
-with the month name substituted for the 1st. Year is a rolling 365-day window ending at now, re-bucketed to daily points,
-with boundary lines at months/years.  All uses the full data reach, but keeps
-at least the past 30 days so the chart never collapses to a tiny sliver when
-the site is young. Below the charts: a radial **transition map** (all pages from
-`/_api/pages` — front page at the center, each slug level on its own ring,
-siblings clockwise in navigation order from the top, radial gap equal to
-the arc spacing — opposite transition directions joined into organic
-tapered connections whose middle width grows logarithmically with the
-count (a single count renders as a ~1 px line, uncapped), connections
+with the month name substituted for the 1st. Month, year and all are
+rolling windows ending at now, aligned to UTC day boundaries at the start
+so the labels span the whole range; the bucket size follows the window —
+6 hours up to 31 days, daily beyond — with boundary lines at months/years
+on the longer ranges.  All uses the full data reach, but keeps
+at least the past 30 days (identical to the month view when the site is
+younger than that, bucket size included) so the chart never collapses to a
+tiny sliver when the site is young. Below the charts: a **transition map** (all pages from
+`/_api/pages` — top-level menu items on a large-radius circular arc whose
+bottom point is the last item (each earlier item a bit higher), connected
+by a top lane labeled 🏠︎ beside the home pill (50% thicker than
+the branch lanes, its label font and guide offset scaled along), each item's
+subtree fanning out below it in menu order along a large-radius circular
+arc that leaves heading
+straight down and gradually bends right, index pages without views omitted
+and their children promoted in their place. The submenu structure is drawn
+as wide branch lanes: one per path prefix with at least two visible
+nodes, running behind the branch's node pills as circle arcs concentric
+with the fan (parent levels one radius step outward, so all lanes of a
+group share exactly one form), each labeled with its branch slug
+left-aligned just past the first pill and allowed to run along the lane to
+its end, disappearing under later pills when long — so the lanes reflect
+the path
+structure even where index pages are omitted — opposite transition
+directions joined into organic
+tapered connections whose middle width grows logarithmically (base 2)
+with the daily hit rate (uncapped), connections
 carrying less than 1% of the total traffic
-pruned; beads are simulated one by one in JS (requestAnimationFrame) and
-flow along each edge, emitted at a rate linearly proportional
+pruned, as are those whose thin middle would render below ~0.8 px —
+fainter strands are invisible and only their wide end flares would show; beads are simulated one by one in JS (requestAnimationFrame) and
+flow along each edge, persisting across data reloads (emitters are keyed
+per edge direction and beads tracked by progress, so an unrelated count
+change never reshuffles them), emitted at a rate linearly proportional
 to the directional count with no in-flight limit, opposing directions
-offset onto parallel lanes. External referers show as a node row above the
-map, external exits as small nodes fanned outwards from their source
-page), per-page view
+offset onto parallel lanes. External sources and exits whose connectors are
+all culled by the width threshold are dropped from their rows themselves
+(the site's own page nodes always stay, connected or not). External sources show as a node row above the
+map: each visit is attributed to `utm_campaign`, then `utm_source`, then the
+referer origin, then any other `utm_*` tag, so UTM-tagged visits are grouped
+under their campaign/source value rather than the referer domain. A UTM
+source node only links to its referer when every visit carrying that tag
+came from the same origin. External exits are full-size nodes in a matching
+row centered below the map, so the site itself stays in the middle), per-page view
 counts, the top transitions and the 50 most recent visit trails. Data is
 streamed live over `WebSocket /_api/ws/analytics`, which pushes the latest
 JSON snapshot on connect and again whenever the analytics file is updated

docs/backend.md

@@ -8,6 +8,8 @@ The FastAPI app. FastAPI's built-in API docs are disabled (`docs_url`/`redoc_url
 
 The build mirrors the URL space — hashed immutable assets under `/_assets/`, `favicon.ico` at the site root — and an `index.html` in the build would become a `/` route, so leave it out of the build to keep `/` ours.
 
+Generated HTML pages (content pages, category/404 placeholders, `/_a`) go through `_html_response`: zstd-compressed per request at level 9 when the client sends `accept-encoding: zstd` (no gzip fallback; static assets are pre-compressed by the `Frontend`), with `vary: accept-encoding` set and the ETag kept identical across encodings so `if-none-match` revalidation still works. In production the rendered bodies are cached in an LRU keyed by everything the output depends on — page kind, path, the site origin (social meta), encoding, and `data.version`, which bumps on every content/settings change and so transparently invalidates the whole cache. The cache is bypassed in dev, where theme/design CSS is re-read from disk per request. Content pages carry an ETag built from the node's modified timestamp and `data.version`; `/_a` instead gets a blake3 hash of the rendered body (it has no Node), with matching `if-none-match` revalidations answered by a 304.
+
 ## `data.py`
 
 msgspec Structs for the kanta database. See `docs/content-model.md` for the full data model.
@@ -16,13 +18,17 @@ msgspec Structs for the kanta database. See `docs/content-model.md` for the full
 
 markdown-it-py renderer (html passthrough + attrs, footnote, deflist, tasklists, admon, gfm_autolink, sub/superscript plugins; typographer + breaks on). Custom image rule: relative srcs resolve against the page path; an image standing alone in its paragraph becomes a figure (captioned when titled), while inline-with-text images and raw `<img>` HTML stay plain. A `{dates}` line expands to the article's published/updated dateline (`p.dateline`, from `Node.created`/`modified`; left literal in previews of unsaved pages).
 
+`render()` returns a `Rendered(html, multicol)`: the body segmented for the column layout — h1/h2 headings, `.wide` blocks and margin-breakout blocks (`.margin`, `::: aside`) stand bare, the runs between them become `<div class="colseg">` (plus `.cols` on segments with enough text, `::: nocols` opting out), and `multicol` flags bodies long enough to columnize (visible-text thresholds, code excluded). `views.py` puts the class on the article; pagerite.css takes it from there (at most two columns, the left-margin breakout, all viewport adaptation).
+
 ## `views.py`
 
 The shared page layout as an html5tagger `Template` with placeholders (`Title`, `Brand`, `Banner`, `Nav`, `Sidebar`, `Main`), nav rendering straight from the `Data.menu` tree (siblings sorted by `Node.order`; nav links to content-less labels point at their first child via `first_leaf`, the first published descendant with content), and page/404 rendering.
 
-Content pages get SEO/social meta (description, canonical link, Open Graph + twitter card) from heuristics over the rendered article: the description is the first paragraph's text, the share image prefers a `{.hero}`-classed image, then the first raster `<img>`, then the first SVG; the first `<video>` yields `og:video`; URLs are made absolute with the request base URL; `article:published/modified_time` come from `Node.created`/`modified`. If the markdown contains its own h1, the page title is NOT rendered as an additional h1 (it still supplies `<title>` and nav labels).
+Content pages get SEO/social meta (description, canonical link, Open Graph + twitter card) from heuristics over the rendered article: the description is the first paragraph's text, the share image prefers a `{.hero}`-classed image, then the first raster `<img>`, then the first SVG; the first `<video>` yields `og:video`; URLs are made absolute with the site origin (`Data.site_url` — learned from admin browsers reporting their `location.origin` via `POST /_api/site-url`, correct even behind reverse proxies; until learned, the request's own base URL is the fallback); `article:published/modified_time` come from `Node.created`/`modified`. If the markdown contains its own h1, the page title is NOT rendered as an additional h1 (it still supplies `<title>` and nav labels).
 
-The navbar holds top-level items only; the current section's subitems go to a left `#sidebar` as a nested list (the section's direct children plain, deeper levels indented with article-list-style markers), which is rendered when the section offers at least two published items, or exactly one while viewing anything other than that only page — the section index, a 404, a grandchild (so those pages can reach the child), and also on that only page itself when it has published children of its own; no aside element at all on the front page, leaf pages and the sole childless page of a one-page section. Also, category labels are nodes without content — None *or* empty markdown — and their nav links point at their first child page. Dynamic regions have stable ids (`#page-banner`, `#nav`, `#sidebar`, `#main`) for fetch-navigation swaps (`#sidebar` may be absent on either side of a swap).
+The navbar holds top-level items only; the current section's subitems go to a left `#sidebar` as a nested list (the section's direct children plain, deeper levels indented with article-list-style markers), rendered only from the second level down — main-level pages list their children as cards after the content instead. Below that, the sidebar renders when the section offers at least two published items, or exactly one while viewing anything other than that only page — the section index, a 404, a grandchild (so those pages can reach the child), and also on that only page itself when it has published children of its own; no aside element at all on the front page, main-level pages, leaf pages and the sole childless page of a one-page section. Also, category labels are nodes without content — None *or* empty markdown — and their nav links point at their first child page. Dynamic regions have stable ids (`#page-banner`, `#nav`, `#sidebar`, `#main`) for fetch-navigation swaps (`#sidebar` may be absent on either side of a swap).
+
+Any page with published children — a category page — lists them as a card grid (`nav.cards`) after the markdown content, as does the content-less category 404. Each card links to the child page (a content-less child to its first leaf) and shows the child's share image (the same hero → first raster → first SVG heuristics as `og:image`) as a full-card cover with the title overlaid.
 
 ## `seed.py`
 

docs/content-model.md

@@ -6,7 +6,7 @@ The site structure is stored in the kanta database managed by `pagerite/data.py`
 
 `Data.menu` maps top-level slugs to `Node`s, each with `children` keyed by slug — the URL path is the slug chain. The front page is whichever top-level node has slug "" (parallel to the other main level pages, not their parent); it cannot have children, and renaming its slug away leaves no front page ("/" redirects to the first nav item).
 
-`Node.content` is the Markdown page, or None for a pure category label whose URL renders a placeholder page (while nav links to it point at its first child); every label's title and slug are editable.
+`Node.content` is the Markdown page, or None for a pure category label whose URL renders a 404 listing its children as cards (while nav links to it point at its first child); every label's title and slug are editable. A page with published children — a category page — lists them as cards after its markdown content; the sidebar sub-navigation renders only from the second level down, never on main-level pages.
 
 Siblings order by the fractional `Node.order` key: a moved item gets a fresh key relative to its new siblings, all others keep theirs. `resolve`/`find_slot` walk the tree by path; moves are slot detach/attach carrying the whole subtree. Legacy flat `Data.pages` (pre-tree databases) migrates into `menu` on startup. The app owns the `Data` object; reads are plain attribute access, writes in `kanta.transaction(...)`.
 
@@ -20,7 +20,7 @@ Siblings order by the fractional `Node.order` key: a moved item gets a fresh key
 
 `Node.banner` is a raw trusted HTML snippet for the header banner (img, styled div, canvas+script...); empty inherits from the node's ancestors (front page last). It is rendered AFTER the banner design's artwork, so author code (e.g. a `<style>` override) always wins over the design's own styles.
 
-`Node.banner_design` picks a banner design: a theme folder name whose `banner.css` styles it and whose `banner.html` (arbitrary markup: canvas + style + script) or `banner.svg` supplies the inline artwork (wrapped in `div[data-design]`); "" = explicitly no design, None = inherit (nearest ancestor, front page last, then the active theme's own design if it ships banner.css/banner.svg/banner.html). The design's banner.css is linked in `<head>` (id `pagerite-banner`) between the theme and the custom CSS.
+`Node.banner_design` picks a banner design: a theme folder name whose `banner.css` styles it and whose `banner.html` (arbitrary markup: canvas + style + script) or `banner.svg` supplies the inline artwork (wrapped in `div[data-design]`); "" = explicitly no design, None = inherit (nearest ancestor, front page last, then the active theme's own design if it ships banner.css/banner.svg/banner.html). The design's banner.css lives in `<head>` (id `pagerite-banner`) between the theme and the custom CSS — a `<link>` in dev, an inline `<style>` in production.
 
 ## Site settings
 

docs/design-principles.md

@@ -19,22 +19,22 @@ Pagerite is a single-user CMS/blog. This document records the initial high-level
 
 - Content is written in **Markdown** with powerful extensions (tables, footnotes, code highlighting, etc.).
 - **Embedded HTML is passed through unfiltered**, including inline scripts and other dynamic content the author wants to post. This is safe by the single-trusted-author assumption above.
-- Renderer: **markdown-it-py** with mdit-py-plugins (footnotes, definition lists, task lists, brace-attributes; tables and strikethrough from the default preset), with `html=True` for raw passthrough, `typographer=True` for SmartyPants-style replacements in body text (curly quotes, `--` / `---` → en / em dashes, `...` → ellipsis, `(c)` → ©, etc.), and `breaks=True` so single line breaks inside paragraphs become `<br>`. Code spans/blocks and raw HTML are left untouched. Fenced code blocks are highlighted server-side with **Pygments** (`nowrap` spans styled by `/_assets/pygments-*.css`, which maps every token class onto the `--code-*` variables; the base stylesheet defines light and dark palette sets resolved via `light-dark()`, so each theme gets the set matching its `color-scheme` and may only retint `--code-bg` to keep the well in the page's color family); a JS copy button appears on hover. Should this prove limiting, we implement our own renderer on top of html5tagger, which we already use for all HTML generation.
-- **Files are content-addressed.** Uploads (`PUT /_api/files/{filename}`) are stored by content hash — blake3, first 6 bytes hex + original extension — and served immutable from `/_f/{hash}.ext`. Absolute URLs that survive page renames and dedupe identical content; pages no longer own files. An image standing alone in its paragraph becomes a block `<figure>` — with `<figcaption>` when it has a title; images inline with text and raw `<img>` HTML stay plain inline images. Positioning is by attribute classes: `![alt](/_f/….avif "Caption"){.right}` — `{.right}`, `{.left}` float at 30% of the text column (the caption wraps within it; an explicit `width=300` makes the figure shrink-wrap the image instead), `{.wide}` goes full bleed (viewport edge to edge, or up to the docked editor; the sidebar stacks on top of it); plain attributes like `width=300` work too. Headings (h1/h2) clear floats, so images never overflow into the next section.
+- Renderer: **markdown-it-py** with mdit-py-plugins (footnotes, definition lists, task lists, brace-attributes, admonitions and `::: name` containers — generic `<div class="name">` wrappers (the name may be followed by brace attributes: `::: aside {.right}`), of which `::: aside` floats as a muted side box and `{.margin}` / `::: margin` marks any block a margin note — on all but phone widths they float in the side zone at the article's left (the region the nav sidebar overlays, or the sidebar's own track when the layout reserves one) and the text never moves — and `::: nocols` opts its section out of column layout; tables and strikethrough from the default preset), GitHub-style alerts (`> [!NOTE]` / TIP / IMPORTANT / WARNING / CAUTION, rendered in the admonition callout styling), with `html=True` for raw passthrough, `typographer=True` for SmartyPants-style replacements in body text (curly quotes, `--` / `---` → en / em dashes, `...` → ellipsis, `(c)` → ©, etc.), and `breaks=True` so single line breaks inside paragraphs become `<br>` — including inside blockquotes, where every newline is kept and a blank `>` line starts a new paragraph. Code spans/blocks and raw HTML are left untouched. Fenced code blocks are highlighted server-side with **Pygments** (`nowrap` spans styled by `/_assets/pygments-*.css`, which maps every token class onto the `--code-*` variables; the base stylesheet defines light and dark palette sets resolved via `light-dark()`, so each theme gets the set matching its `color-scheme` and may only retint `--code-bg` to keep the well in the page's color family); a JS copy button appears on hover. Should this prove limiting, we implement our own renderer on top of html5tagger, which we already use for all HTML generation.
+- **Files are content-addressed.** Uploads (`PUT /_api/files/{filename}`) are stored by content hash — blake3, first 6 bytes hex + original extension — and served immutable from `/_f/{hash}.ext`. Absolute URLs that survive page renames and dedupe identical content; pages no longer own files. An image standing alone in its paragraph becomes a block `<figure>` — with `<figcaption>` when it has a title; images inline with text and raw `<img>` HTML stay plain inline images. Positioning is by attribute classes: `![alt](/_f/….avif "Caption"){.right}` — `{.right}`, `{.left}` float at 30% of the text column (the caption wraps within it; an explicit `width=300` makes the figure shrink-wrap the image instead), `{.margin}` makes it a margin note, floating in the side zone left of the text on all but phone widths, `{.wide}` goes full bleed (viewport edge to edge, or up to the docked editor; the sidebar stacks on top of it); plain attributes like `width=300` work too. The same brace syntax on a block's last line (no blank line between) applies to the whole block: a paragraph ending with `{.wide}` becomes a full-width element that breaks out of the column layout; written on the line after a block it applies to that preceding block — this is how headings, `::: containers` and code fences take classes (a wide code fence goes full bleed like a wide figure). Headings (h1/h2) clear floats, so images never overflow into the next section.
 
 ## Page structure and navigation
 
 - All pages share one static layout, defined once as an **html5tagger Template** with capitalized placeholders (`Title`, `Banner`, `Nav`, `Sidebar`, `Main`) filled per request. The dynamic regions carry stable ids (`#page-banner`, `#nav`, `#sidebar`, `#main`).
 - The page top is a **full-width banner header** with the site name and the navigation bar overlaid on it — no separate chrome header. The banner combines two layers, stacked in `#page-banner` (a grid, so they overlay): first the **banner design** — a named design living in a theme folder (`pagerite/themes/{name}/banner.css` plus artwork as `banner.html` — arbitrary markup like canvas + style + script — or `banner.svg`), chosen per page via `Node.banner_design` (a design name, "" for none, None to inherit from the nearest ancestor, then the front page, then the active theme's own design). The artwork is inlined into a `div[data-design]` wrapper: SVG artwork can be recolored from the theme stylesheet (corporate's single SVG serves both light and dark mode via `var()`-driven stops). Second, **per-page author code**: `Node.banner` holds an arbitrary trusted HTML snippet (an image, a styled div, canvas + script — anything), resolved by walking up the node's ancestors to the front page and rendered **after** the design artwork, so author styles always win over the design's own. The base stylesheet falls back to a plain gradient. There is deliberately no scrim fading the banner into the page background — any such fade would ruin user-supplied designs; themes that want one bake it into their SVG (purple does).
 - **Fetch-navigation.** Links are plain `<a href>`; a small script (`frontend/src/pagerite.js`) intercepts same-origin clicks, fetches the page, and swaps the `#page-banner`, `#nav`, `#sidebar` and `#main` regions, the document title, and the site-wide custom CSS (`<style id="pagerite-user">` in `<head>`), keeping the rest of `<head>` and the layout chrome. Without JS everything works as normal page loads. Scripts inside fetched banner and content regions are re-created so they execute. Swaps run inside `document.startViewTransition` for a rotating cube page transition (CSS adapted from termotohtori.fi — the `::view-transition*` block is fragile, do not tweak; skipped under `prefers-reduced-motion`). Navigation within the same top-level section crossfades instead of rotating; browser back navigation rotates in reverse.
-- **The site structure is a tree of labels.** `Data.menu` holds the top-level items by slug, each with `children` keyed by slug — the URL path is the slug chain. The front page is a top-level node with slug "" (an item *parallel* to the other main level pages, not their parent) and cannot have children. The header navbar holds only the top level; a top-level item is highlighted when viewing any of its subpages. When the current page is inside a main level section with children, those direct children are listed in a **left sidebar** (`#sidebar`), one level deep. The sidebar exists only when there is something to navigate — sections with fewer than two published items, leaf pages and the front page render no aside element at all. Other sections' subitems are never shown without navigating into them first.
-- **Landing pages are optional.** Every label can either have content (`Node.content`, a Markdown page) or none — a content-less label renders a placeholder page (404 with a pen to create it) instead of redirecting, while nav links to it point straight at its first child, so categories need no filler content and normal navigation never sees the placeholder. Title and slug of every label are editable; renaming a slug moves the whole subtree. The sidebar never lists the section itself, avoiding title duplication with the navbar.
+- **The site structure is a tree of labels.** `Data.menu` holds the top-level items by slug, each with `children` keyed by slug — the URL path is the slug chain. The front page is a top-level node with slug "" (an item *parallel* to the other main level pages, not their parent) and cannot have children. The header navbar holds only the top level; a top-level item is highlighted when viewing any of its subpages. A page with published children lists them as **cards** after its content (the child page's share image as the cover, like the og tags, with the title overlaid); a **left sidebar** (`#sidebar`) with the section's sub-navigation appears only from the second level down, when there is something to navigate — main-level pages, sections with fewer than two published items, leaf pages and the front page render no aside element at all. Other sections' subitems are never shown without navigating into them first.
+- **Landing pages are optional.** Every label can either have content (`Node.content`, a Markdown page) or none — a content-less label renders a 404 page listing its children as cards (with a pen to create the landing page) instead of redirecting, while nav links to it point straight at its first child, so categories need no filler content and normal navigation never sees the 404. Title and slug of every label are editable; renaming a slug moves the whole subtree. The sidebar never lists the section itself, avoiding title duplication with the navbar.
 - **Menu order is manual.** Each node has a fractional `order` key among its siblings; reordering/moving writes only the moved node (it takes a fresh value halfway between its new siblings; all other items keep theirs). New pages append at the end of their menu. Structure edits (reorder, move/rename with the whole subtree, retitle) go through `POST /_api/structure` and the editor's structure panel.
 - Unpublished pages are hidden from both nav and URL access (404).
 
 ## Reading experience
 
-- The article column is sized by the **viewport, never by content**: a symmetric grid (`1fr minmax(0, 78rem) 1fr`) with flexible gutters keeps the layout stable across navigation. The sidebar occupies the left gutter, the right gutter balances it; wide screens get columns inside long articles without changing the article's width.
+- The article column is sized by the **viewport, never by content**: a symmetric grid (`1fr minmax(0, 78rem) 1fr`) with flexible gutters keeps the layout stable across navigation. The sidebar occupies the left gutter, the right gutter balances it. Long articles (flagged `.multicol` by the backend render) lift the cap and become a bounded **composition**, centered in the available space with the surplus left vacant: a fluid text lane (up to 42rem) plus a 16rem **side zone at the article's left** — the region the nav sidebar overlays — which hosts margin boxes (`.margin`, `::: aside`, margin figures) at all but phone widths, without the text ever moving. On pages with a sidebar below ~110rem (where the sidebar gets its own 12rem track) the track is the left lane instead: no in-article zone, the text lane runs fluid up to 86rem, and the boxes fall into the track, sliding under the translucent sticky nav. Once two lanes fit beside the zone (≥96rem available in `main`), the text flows in two fluid lanes (36rem minimum, capped at 102rem total — technical content wants the wider lanes, and wider windows just add vacant space). The stages step by the space actually available in `main` (container queries + `cqw` units, so the docked editor's inset is automatic). `.wide` figures on multicol pages bleed to the viewport edges measured from `main` (`cqw`), sliding under the sidebar. The backend splits the body into `.colseg` segments at h1/h2 headings, `.wide` elements and margin blocks (full-width separators or margin boxes, never inside columns), tagging segments that hold enough text with `.cols` — code blocks are excluded from that measure, and a `::: nocols` container opts its whole section out. On wide single-column pages (≥104rem), margin boxes lean into the vacant left gutter as well.
 - A gentle **scroll-reveal** of headings, figures and block-level elements (IntersectionObserver). It is layout-level: articles need no support for it, and `prefers-reduced-motion` disables all motion.
 
 ## Styling
@@ -45,7 +45,7 @@ Pagerite is a single-user CMS/blog. This document records the initial high-level
 ## Editing
 
 - Editing happens **in place**, in two modes opened by two pens:
-  - **Page mode** — the 🖊️ next to a page's heading (including 404s, which is how new pages start) opens a CodeMirror Markdown editor docked to the left of the article: the host sits inside `#content` (below the banner, never over the footer), the content shifts right and the sidebar hides while editing. Preview renders server-side per keystroke (no debouncing) straight into the visible article's heading and body.
+  - **Page mode** — the 🖊️ next to a page's heading (including 404s, which is how new pages start) opens a CodeMirror Markdown editor docked to the left of the article: the panel is fixed to the viewport's left edge (its top tracks the banner's bottom until the banner scrolls away), the content shifts right and the sidebar hides while editing. Preview renders server-side per keystroke (no debouncing) straight into the visible article's heading and body.
   - **Site mode** — the 🖊️ on the banner opens a panel with the site **brand** (applied to the header live), a **theme** selector (swapping the theme stylesheet in place), **font** picks (heading/body/brand — stored as plain `:root` rows inside the custom CSS, referencing the base stylesheet's per-family font variables), a **site-wide custom CSS** field (injected into `<style id="pagerite-user">` in the live page head and swapped during fetch-navigation), the page's **banner design** selector (inherit / none / any design found on disk, inherited by children), the page's **banner HTML** field (supplementing the design, previewed into the real banner region, so you see exactly which banner you're editing) and the **structure tree**. Everything saves immediately as you edit — no save button, no edit mode.
 - Clicking a pen again closes the editor (without saving; a dirty preview reloads the page). The pens are `<button>`s wired up by `pagerite.js` — editing is an action, not a navigation. The editor's WebSocket **reconnects automatically** with local text and pending saves preserved. (All users are trusted authors for now; access control later with SSO.)
 - **CodeMirror 6** for Markdown editing (no WYSIWYG), title/published controls. Images can be pasted straight into the editor or chosen via a file input: they upload to the content store (`PUT /_api/files/...`) and insert `![alt](/_f/hash.ext)` at the cursor.

docs/editing.md

@@ -6,18 +6,18 @@ The Vue editor is a single tabbed `EditorShell.vue` mounted in a host div create
 
 The shell hosts four kept-alive tabs (ordered site-wide first — site, structure — then, after a visual break, the per-page tabs — article, banner):
 
-- `PageEditor.vue` — CodeMirror + server-rendered preview over WebSocket `/_api/ws/editor`, previewing into the visible article; editor scroll drives the article scroll — while any editor is open the window scroll is locked (`body.editing`), the panel exactly fills the available window height, and only `#main` scrolls; a format bar offers Markdown helpers — bold/italic/code/link/table/image upload, with Ctrl/Cmd-B/I/S bindings — for the hard-to-remember syntax. Edits content and title only, never the path.
+- `PageEditor.vue` — CodeMirror + server-rendered preview over WebSocket `/_api/ws/editor`, previewing into the visible article; editor and article scrolls are linked proportionally both ways, applied instantly (the window keeps scrolling normally while any editor is open — the panel is fixed to the viewport's left edge, its top tracking the banner's bottom edge until the banner scrolls away — and the panel scrolls internally); a format bar offers Markdown helpers — bold/italic/code/link/table/image upload, with Ctrl/Cmd-B/I/S bindings — for the hard-to-remember syntax. Edits content and title only, never the path.
 - `BannerEditor.vue` — per-page banner HTML + banner design selector, previewed into `#page-banner`.
 - `SiteEditor.vue` — site brand + optional custom brand HTML with image/video upload + theme selector + font picker + favicon upload — clicking the preview tile picks a new one — + site-wide custom CSS, CSS injected into `<head id="pagerite-user">`.
 - `StructureEditor.vue` — the vue-draggable structure tree with always-editable title/slug inputs per row.
 
 Media uploads everywhere use the image icon buttons (pasting into the editor works too). The article, banner and site-settings pens are shorthands that open the shell on the matching tab; once open, clicking a pen switches tabs (and retargets the editors to the current page) instead of closing/remounting. The close button in the tab bar closes the shell (Escape too); tabs have no close buttons of their own. Closing only HIDES the shell — the Vue app stays mounted, so page-editor state (unsaved text included) survives until a real page reload; saving there is explicit (Ctrl+S) and refreshes the page regions in place. Admin panels never reload the page.
 
-In-place page re-rendering shared by the banner/site/structure tabs lives in `swapdoc.js` (`runScripts`/`loadPlain`: fetch a page, swap the dynamic regions, replaceState). Placeholder texts are reserved for showing the actual default in effect when a field is left empty (e.g. the pending row's slug derived from its title); labels and help are real elements or tooltips, never placeholders.
+In-place page re-rendering shared by the banner/site/structure tabs lives in `swapdoc.js` (`runScripts`/`loadPlain`: fetch a page, swap the dynamic regions, replaceState). It also exports `dropPageCache`, which the editor tabs call after any save that can alter the rendered HTML of other pages (theme, headings, structure, banners, site brand/CSS, favicon). Dropping the cache while editing avoids re-fetching every page immediately; the public runtime re-preloads visible links once the editor panel closes.
 
 ## Saving behavior
 
-Everything saves immediately as you edit (brand/title/CSS debounced, slug on commit since it renames the path), theme change swaps the stylesheet in place, tree rows navigate in place without transitions when focused, and the front page is a root-only row whose empty slug is editable like any other.
+Everything saves immediately as you edit (brand/title/CSS debounced, slug on commit since it renames the path), theme change swaps the stylesheet in place, tree rows navigate in place without transitions when focused, and the front page is a root-only row whose empty slug is editable like any other. Saves that can affect other pages drop the prefetch cache; the cache is rebuilt when the editor panel closes so navigation stays instant.
 
 Every non-empty list (and the root) ends with a non-draggable plus footer row (vuedraggable `#footer` slot): clicking it starts a new pending page at that level (its slug placeholder shows the slug derived live from the title being typed), and while dragging it is the list's "end of list" drop target. Committing a pending page PUTs it with empty markdown (creates an empty page that renders with its title — saving never deletes; deletion is the page editor's explicit choice: saving trimmed-empty text issues a REST DELETE), then switches to the page editor tab for the actual writing.
 
@@ -25,6 +25,6 @@ Dropping ON the lower part of a row moves the page under that row (the child lis
 
 The shell is dynamic-imported onto the content page by pagerite.js when an edit pen is clicked (the pens are injected by pagerite.js after the session validates; they carry `data-editor-src`/`data-editor-css`/`data-editor-mode`). In dev, modules load from the Vite dev server (`PAGERITE_VITE_URL`), in prod from the hashed build assets resolved via `frontend-build/.vite/manifest.json`.
 
-`vite.config.js` sets `appType: 'mpa'` (no SPA fallback) and builds with `manifest: true`, `assetsDir: '_/assets'` (so the build mirrors the URL space; `frontend/public/favicon.ico` lands at the build root and is served at `/favicon.ico`). JS inputs are `src/main.js` and `src/pagerite.js`, plus `src/assets/pagerite.css` as a separate stylesheet entry; theme and banner-design CSS are NOT built — they live in `pagerite/themes/{name}/` and are served by the backend. There is no `index.html` source (it would shadow `/` and turn missing dev paths into an empty Vue shell). All outputs are ES modules. The build sets `preserveEntrySignatures: 'exports-only'` because main.js is consumed via dynamic `import()` for its `openEditor`/`closeEditor` exports — Vite app builds otherwise strip unused entry exports, leaving dead edit pens. In dev the backend links theme/banner-design stylesheets like in prod (`/_themes/...`); only the base CSS is Vite-injected from JS, and pagerite.js then re-appends the `#pagerite-theme`/`#pagerite-banner`/`#pagerite-user` elements to restore the canonical order (base < theme < design < custom CSS). Theme switches in the site editor simply swap the `#pagerite-theme` link href, identically in dev and prod.
+`vite.config.js` sets `appType: 'mpa'` (no SPA fallback) and builds with `manifest: true`, `assetsDir: '_/assets'` (so the build mirrors the URL space; `frontend/public/favicon.ico` lands at the build root and is served at `/favicon.ico`). JS inputs are `src/main.js` and `src/pagerite.js`, plus `src/assets/pagerite.css` as a separate stylesheet entry; theme and banner-design CSS are NOT built — they live in `pagerite/themes/{name}/` and are served by the backend. There is no `index.html` source (it would shadow `/` and turn missing dev paths into an empty Vue shell). All outputs are ES modules. The build sets `preserveEntrySignatures: 'exports-only'` because main.js is consumed via dynamic `import()` for its `openEditor`/`closeEditor` exports — Vite app builds otherwise strip unused entry exports, leaving dead edit pens. In dev the backend links theme/banner-design stylesheets like in prod (`/_themes/...`); only the base CSS is Vite-injected from JS, and pagerite.js then re-appends the `#pagerite-theme`/`#pagerite-banner`/`#pagerite-user` elements to restore the canonical order (base < theme < design < custom CSS). In production all page assets are inlined instead (styles as `<style id="pagerite-…">` in `<head>`, scripts at the end of the body). Theme switches in the site editor swap the `#pagerite-theme` element in place — the link href in dev, the inline style's text (fetched from `/_themes/...`) in prod.
 
 `vite-plugin-fastapi.js` has an auto-upgrade marker — edit `vite.config.js`, not the plugin.

docs/frontend-runtime.md

@@ -8,9 +8,11 @@ Vue editor app entry, mounts the tabbed `EditorShell`. See `docs/editing.md` for
 
 ## `pagerite.js`
 
-Public page entry; runs fetch-navigation (backed by an in-memory page cache: every visible internal link — and the current page — is fetched once at load, clicks are then served from JS with no fetch, and the editors' `loadPlain` keeps the cache current via a `pagerite:page-fetched` event; articles are `cache-control: no-cache` on the wire), scroll-reveal, OverlayScrollbars on `document.body` (floating, auto-hiding scrollbars that never reserve layout space or shift the page when appearing; native scroll APIs like `window.scrollTo` keep working; themed via the `--os-*` variables in pagerite.css), brand shrink-to-fit (the themed size is the maximum; JS reduces the font-size so a long brand or narrow viewport still fits one line), code copy buttons, and the auth check.
+Public page entry; runs fetch-navigation (backed by an in-memory page cache: every visible internal link is fetched once at load and clicks are then served from JS with no fetch — the current page itself is not refetched, it enters the cache when navigated to — and the editors' `loadPlain` keeps the cache current via a `pagerite:page-fetched` event; articles are `cache-control: no-cache` on the wire). Editors can drop the entire cache with the `pagerite:drop-page-cache` event when site-wide or page changes (theme, headings, structure, banners, etc.) invalidate the cached HTML of other pages; `main.js` triggers a fresh `pagerite:preload-pages` pass when the editor panel closes so navigation is fast again. Navigation that starts while the editor is open bypasses the cache and fetches the target page on demand. Also runs scroll-reveal, OverlayScrollbars on `document.body` (floating, auto-hiding scrollbars that never reserve layout space or shift the page when appearing; native scroll APIs like `window.scrollTo` keep working; themed via the `--os-*` variables in pagerite.css), brand shrink-to-fit (the themed size is the maximum; JS reduces the font-size so a long brand or narrow viewport still fits one line), nav condense-to-fit (the top nav stays on one row: link gaps shrink first, then the side padding, then the font size; `flex-wrap: wrap` remains the no-JS fallback), code copy buttons, and the auth check.
 
-It first probes `GET /auth/api/settings` to detect whether Paskia SSO is available, then `GET /_api/settings` to learn the current session's admin status. The same reverse proxy that gates `/_api` returns 401 for anonymous users, 403 for users without the admin permission, and 200 for admins. When Paskia is detected, a login link (anonymous) or profile link (logged in) is shown in the banner corner; both are plain `<a href="/auth/">` links (Paskia does not support being iframed, so we navigate normally), and a `pageshow` handler re-probes auth when history navigation restores a cached page. Admins also get the page/banner edit pens and a site-settings pen (asset URLs from the `pagerite:editor-src`/`-css` meta tags). If no Paskia SSO is detected (dev/no proxy), editing is left open. Pages themselves render identically for everyone; the real gate is the auth proxy in front of all of `/_api`. The backend links the stylesheets in a fixed order — base (Vite build), theme, banner design, custom CSS last — each with a stable id so the site editor can swap them in place.
+It first probes `GET /auth/api/settings` to detect whether Paskia SSO is available, then `GET /_api/settings` to learn the current session's admin status. The same reverse proxy that gates `/_api` returns 401 for anonymous users, 403 for users without the admin permission, and 200 for admins. When Paskia is detected, a login link (anonymous) or profile link (logged in) is shown in the banner corner; both are plain `<a href="/auth/">` links (Paskia does not support being iframed, so we navigate normally), and a `pageshow` handler re-probes auth when history navigation restores a cached page. Admins also get the page/banner edit pens and a site-settings pen, plus a `modulepreload` warm-up of the editor bundle (the hashed asset is immutable, so it costs nothing). If no Paskia SSO is detected (dev/no proxy), editing is left open. Pages themselves render identically for everyone; the real gate is the auth proxy in front of all of `/_api`.
+
+Asset wiring differs by mode. In dev the backend links the Vite dev-server URLs (`pagerite:editor-src`/`-css`/`pagerite:analytics-src` meta tags, `<link>` stylesheets) and Vite injects the entry CSS from JS for hot reloads. In production there are no pagerite meta tags: all page assets are inlined into the document — stylesheets as `<style>` elements in `<head>` (fixed order: base, theme, banner design, entry sheets, custom CSS last), module scripts as inline `<script>`s at the end of the body (relative chunk imports are rewritten to absolute `/_assets/` paths) — and the on-demand bundles' URLs ride in a `<script type="application/json" id="pagerite-assets">` config. The editor bundle always stays external, imported on demand when a pen is opened. Every stylesheet element carries a stable id so fetch-navigation and the site editor can sync `<head>` positionally across swaps (the analytics sheet exists on `/_a` only and is added/removed as you navigate). The analytics entry is inlined into the `/_a` page itself; pagerite.js re-creates that script element after fetch-navigating there (inline scripts don't execute on a DOM swap) and calls the module's exposed unmount before swapping away.
 
 ## `assets/`
 
@@ -18,7 +20,7 @@ Shared styles and data files built by Vite and served hashed under `/_assets/`:
 
 The `::view-transition*` block at the end of `pagerite.css` (from termotohtori.fi) is fragile — do not tweak. Themes and banner designs are NOT built — they live in `pagerite/themes/{name}/` and are served by the backend. See `docs/themes-and-assets.md` for details.
 
-Vite builds ES-module `.js` outputs; the backend renders `<script type="module">` for them (module scripts defer by default).
+Vite builds ES-module `.js` outputs; in dev the backend links them as `<script type="module">` (module scripts defer by default), in production it inlines them at the end of the body.
 
 ## Database file
 

docs/themes-and-assets.md

@@ -34,4 +34,4 @@ The banner artwork has scroll parallax: pagerite.js sets the `--pry` scroll para
 
 ## Stylesheet order
 
-The backend links the stylesheets in a fixed order — base (Vite build), theme, banner design, custom CSS last — each with a stable id so the site editor can swap them in place. The base stylesheet's `--font-brand` defaults to `var(--font-heading)`.
+The backend emits the stylesheets in a fixed order — base (Vite build), theme, banner design, entry sheets, custom CSS last — each with a stable id so fetch-navigation and the site editor can sync them in place. In dev they are `<link>`s (the base is Vite-injected from JS instead); in production they are inlined as `<style>` elements. The base stylesheet's `--font-brand` defaults to `var(--font-heading)`. Code text (Fira Code by default) is optically matched to the body font by x-height: `font-size-adjust: ex-height var(--code-x-height)` scales whatever code font is in use, so a theme that switches its body font sets `--code-x-height` to that font's x-height ratio (base: 0.478 for Source Sans 3; themes ship values for Inter, Montserrat, Literata and Cause).

frontend/src/AnalyticsView.vue

@@ -5,20 +5,34 @@
 // visit/crawler tables. Read-only.
 // See docs/analytics.md for the data format.
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import { RANGES } from './analytics/time.js'
 import {
+  RANGES,
+  rangeWindow,
+  filterRecordsByRange,
+  filterTransitionsByRange,
+  filterViewsByRange,
+} from './analytics/time.js'
+import {
+  calcReadStats,
   calcTotalViews,
   copyIp,
+  copyList,
+  formatCount,
+  formatAbuseRows,
   formatCrawlerRows,
   formatVisitRows,
 } from './analytics/format.js'
-import * as flagSvgs from 'country-flag-icons/string/3x2'
+import TrailLink from './TrailLink.vue'
+import VisitorCell from './VisitorCell.vue'
 import TransitionGraph from './TransitionGraph.vue'
 import VisitorCharts from './VisitorCharts.vue'
+import { VIEW_W } from './analytics/chart.js'
 
-const props = defineProps({
-  initialRange: { type: String, default: 'week' },
-})
+// Same centering margin as the charts, so the totals row's left edge
+// aligns with the chart svg above the natural width.
+const CHART_MARGIN = `max(0px, calc(50% - ${VIEW_W / 2}px))`
+
+const ABUSE_MAX_LINES = 5
 
 const data = ref(null)
 const pageTree = ref(null)
@@ -28,6 +42,13 @@ let ws = null
 let reconnectTimeout = null
 let timeInterval = null
 
+// The initial range comes from the URL hash (shareable links); without one,
+// it is derived from the first analytics snapshot: day when the recorded
+// history is shorter than 24 h, week otherwise.
+const hashRange = location.hash.slice(1)
+const range = ref(RANGES[hashRange] ? hashRange : 'week')
+let rangePinned = Boolean(RANGES[hashRange])
+
 function connectAnalytics() {
   if (ws) return
   const proto = location.protocol === 'https:' ? 'wss:' : 'ws:'
@@ -36,6 +57,15 @@ function connectAnalytics() {
   ws.onmessage = (event) => {
     try {
       data.value = JSON.parse(event.data)
+      if (!rangePinned) {
+        rangePinned = true
+        const starts = (data.value?.visits || [])
+          .map((v) => Date.parse(v.start))
+          .filter((t) => !Number.isNaN(t))
+        if (starts.length && Date.now() - Math.min(...starts) < 24 * 3600 * 1000) {
+          range.value = 'day'
+        }
+      }
     } catch {
       error.value = 'analytics data could not be loaded'
     }
@@ -52,7 +82,7 @@ function connectAnalytics() {
 onMounted(async () => {
   connectAnalytics()
   now.value = Date.now()
-  timeInterval = setInterval(() => { now.value = Date.now() }, 30000)
+  timeInterval = setInterval(() => { now.value = Date.now() }, 1000)
   // The site tree for the transition map (all pages in menu order). Not
   // fatal: without it the map just narrows to pages seen in transitions.
   try {
@@ -71,34 +101,40 @@ onUnmounted(() => {
   }
 })
 
-const visits = computed(() => data.value?.visits || [])
-const totalViews = computed(() => calcTotalViews(data.value?.views))
+const window = computed(() => rangeWindow(range.value))
 
-const range = ref(RANGES[props.initialRange] ? props.initialRange : 'week')
+// All non-chart stats follow the selected range; the charts keep their own
+// range-specific x windows (week overlays previous weeks aligned to Monday).
+const rangeData = computed(() => {
+  if (!data.value) return null
+  const { t0, t1 } = window.value
+  return {
+    ...data.value,
+    transitions: filterTransitionsByRange(data.value.transitions, t0, t1),
+    views: filterViewsByRange(data.value.views, t0, t1),
+    visits: filterRecordsByRange(data.value.visits, t0, t1),
+    crawlers: filterRecordsByRange(data.value.crawlers, t0, t1),
+    abuse: filterRecordsByRange(data.value.abuse, t0, t1),
+  }
+})
+
+const visits = computed(() => rangeData.value?.visits || [])
+const totalViews = computed(() => calcTotalViews(rangeData.value?.views))
+const readStats = computed(() => calcReadStats(visits.value))
 
 // Keep the URL shareable when the range changes.
 watch(range, (r) => {
   const url = new URL(location.href)
-  url.searchParams.set('range', r)
+  url.hash = r
   history.replaceState(null, '', url)
 })
 
-const visitRows = computed(() => formatVisitRows(visits.value, pageTree.value, now.value))
-const crawlers = computed(() => data.value?.crawlers || [])
-const crawlerRows = computed(() => formatCrawlerRows(crawlers.value, pageTree.value, now.value))
+const clients = computed(() => data.value?.clients || {})
+const visitRows = computed(() => formatVisitRows(visits.value, clients.value, pageTree.value, now.value))
+const crawlers = computed(() => rangeData.value?.crawlers || [])
+const crawlerRows = computed(() => formatCrawlerRows(crawlers.value, clients.value, pageTree.value, now.value))
+const abuseRows = computed(() => formatAbuseRows(rangeData.value?.abuse || [], clients.value, now.value))
 
-function flagSvg(code) {
-  return flagSvgs[code?.toUpperCase()] || ''
-}
-
-function countryName(code) {
-  if (!code) return ''
-  try {
-    return new Intl.DisplayNames(['en'], { type: 'region' }).of(code.toUpperCase())
-  } catch {
-    return ''
-  }
-}
 </script>
 
 <template>
@@ -117,13 +153,15 @@ function countryName(code) {
       <p v-if="error" class="error">⚠️ {{ error }}</p>
       <p v-else-if="!data" class="loading">loading…</p>
       <template v-else>
-        <section class="totals">
-          <div><strong>{{ visits.length }}</strong> visits</div>
-          <div><strong>{{ totalViews }}</strong> page views</div>
+        <section class="totals" :style="{ marginLeft: CHART_MARGIN }">
+          <div><strong :title="String(visits.length)">{{ formatCount(visits.length) }}</strong> visits</div>
+          <div><strong :title="String(totalViews)">{{ formatCount(totalViews) }}</strong> page views</div>
+          <div><strong>{{ readStats.avgMinPerVisit }}</strong> min/visit</div>
+          <div><strong>{{ readStats.avgArticleMedianMin }}</strong> min/read</div>
         </section>
 
         <VisitorCharts :data="data" :range="range" />
-        <TransitionGraph :data="data" :range="range" :page-tree="pageTree" />
+        <TransitionGraph :data="rangeData" :window="window" :page-tree="pageTree" />
 
         <section>
           <h2>Recent visits</h2>
@@ -131,83 +169,111 @@ function countryName(code) {
             <table class="visit-table">
               <thead>
                 <tr>
-                  <th>when</th>
                   <th>trail</th>
-                  <th>referer</th>
-                  <th>ip</th>
-                  <th>lang</th>
-                  <th>country</th>
-                  <th>ua</th>
-                  <th>utm</th>
+                  <th>visitor</th>
+                  <th class="last-seen">last seen</th>
                 </tr>
               </thead>
               <tbody>
                 <tr v-for="(v, i) in visitRows" :key="i">
-                  <td class="when" :title="v.whenTooltip">{{ v.when }}</td>
                   <td class="trail">
-                    <a v-for="(s, si) in v.trail" :key="si"
-                       :href="s.path" :title="s.title"
-                       :target="s.external ? '_blank' : undefined"
-                       :rel="s.external ? 'noopener' : undefined"
-                       @click="(e) => { if (!s.external) $emit('close') }">
-                      {{ s.slug }}
-                    </a>
+                    <TrailLink v-if="v.refererStep" :step="v.refererStep" @close="$emit('close')" />
+                    <span v-if="v.utm && v.utm !== '—'" class="utm-tag small muted" :title="v.utmTitle">{{ v.utm }}</span>
+                    <TrailLink v-for="(s, si) in v.trail" :key="si" :step="s" @close="$emit('close')" />
                   </td>
-                  <td>{{ v.referer }}</td>
-                  <td>
-                    <span class="clickable-ip"
-                          :title="`Click to copy full IP: ${v.ip}`"
-                          @click="copyIp(v.ip)">{{ v.ipDisplay }}</span>
-                  </td>
-                  <td>{{ v.lang }}</td>
-                  <td class="country">
-                    <span v-if="flagSvg(v.country)" class="flag" v-html="flagSvg(v.country)" :title="countryName(v.country) || v.country"></span>
-                    <template v-if="v.city !== '—'">{{ countryName(v.country) || v.country }}<br><small class="muted">{{ v.city }}</small></template>
-                    <template v-else-if="v.country !== '—'">{{ countryName(v.country) || v.country }}</template>
-                    <template v-else>—</template>
-                  </td>
-                  <td class="ua" :title="v.uaRaw">{{ v.ua }}</td>
-                  <td>{{ v.utm }}</td>
+                  <VisitorCell
+                    :ip="v.ip"
+                    :ip-display="v.ipDisplay"
+                    :ua="v.ua"
+                    :ua-raw="v.uaRaw"
+                    :country="v.country"
+                    :city="v.city"
+                    :lang="v.lang"
+                    :lang-display="v.langDisplay"
+                    :is-host="v.isHost"
+                  />
+                  <td class="last-seen muted"
+                      :title="v.lastSeenLocal"
+                      @click="copyList(v.lastSeenIso, $event)">{{ v.lastSeen }}</td>
                 </tr>
               </tbody>
             </table>
           </div>
           <p v-else class="empty">no visits recorded yet</p>
-        </section>
 
-        <section>
-          <h2>Crawlers</h2>
           <div v-if="crawlerRows.length" class="visit-table-wrap">
             <table class="visit-table">
               <thead>
                 <tr>
-                  <th>when</th>
-                  <th>pages</th>
-                  <th>ip</th>
-                  <th>ua</th>
+                  <th>pages crawled</th>
+                  <th>visitor</th>
+                  <th class="last-seen">last seen</th>
                 </tr>
               </thead>
               <tbody>
                 <tr v-for="(c, i) in crawlerRows" :key="i">
-                  <td class="when" :title="c.whenTooltip">{{ c.when }}</td>
                   <td class="trail">
-                    <a v-for="(s, si) in c.pages" :key="si"
-                       :href="s.path" :title="`${s.title}${s.count > 1 ? ` (${s.count} hits)` : ''}`"
-                       @click="$emit('close')">
-                      <small v-if="s.count > 1" class="muted">{{ s.count }}×</small>{{ s.slug }}
-                    </a>
+                    <TrailLink v-for="(s, si) in c.pages" :key="si" :step="s" :count="s.count" @close="$emit('close')" />
                   </td>
-                  <td>
-                    <span class="clickable-ip"
-                          :title="`Click to copy full IP: ${c.ip}`"
-                          @click="copyIp(c.ip)">{{ c.ipDisplay }}</span>
+                  <VisitorCell
+                    :ip="c.ip"
+                    :ip-display="c.ipDisplay"
+                    :ua="c.ua"
+                    :ua-raw="c.uaRaw"
+                    :country="c.country"
+                    :city="c.city"
+                    :lang="c.lang"
+                    :lang-display="c.langDisplay"
+                    :is-host="c.isHost"
+                  />
+                  <td class="last-seen muted"
+                      :title="c.lastSeenLocal"
+                      @click="copyList(c.lastSeenIso, $event)">{{ c.lastSeen }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div v-if="abuseRows.length" class="visit-table-wrap">
+            <table class="visit-table">
+              <thead>
+                <tr>
+                  <th>paths abused</th>
+                  <th>visitor</th>
+                  <th class="last-seen">last seen</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(a, i) in abuseRows" :key="i">
+                  <td class="trail abuse-list clickable-list"
+                      @click="copyList(a.allPaths, $event)">
+                    <div class="abuse-items">
+                      <span v-for="(p, pi) in a.paths.slice(0, ABUSE_MAX_LINES)" :key="pi"
+                            class="inline-item">
+                        <small v-if="p.count > 1" class="muted">{{ formatCount(p.count) }}×</small>{{ p.path }}
+                      </span>
+                      <small v-if="a.paths.length > ABUSE_MAX_LINES" class="muted">+{{ a.paths.length - ABUSE_MAX_LINES }} more</small>
+                    </div>
                   </td>
-                  <td class="ua" :title="c.uaRaw">{{ c.ua }}</td>
+                  <VisitorCell
+                    :ip="a.ip"
+                    :ip-display="a.ipDisplay"
+                    :ua="a.ua"
+                    :ua-raw="a.uaRaw"
+                    :country="a.country"
+                    :city="a.city"
+                    :lang="a.lang"
+                    :lang-display="a.langDisplay"
+                    :is-host="a.isHost"
+                    :variant-count="a.clientCount"
+                  />
+                  <td class="last-seen muted"
+                      :title="a.lastSeenLocal"
+                      @click="copyList(a.lastSeenIso, $event)">{{ a.lastSeen }}</td>
                 </tr>
               </tbody>
             </table>
           </div>
-          <p v-else class="empty">no crawler hits recorded yet</p>
         </section>
       </template>
     </div>
@@ -222,9 +288,12 @@ function countryName(code) {
 }
 
 .analytics-panel {
-  margin: 0 auto;
-  width: min(60rem, 96vw);
-  padding: 1.5rem 2rem 4rem;
+  margin: 0;
+  width: 100%;
+  /* Same 1.25rem side spacing as main's article padding. */
+  padding: 1.5rem 1.25rem 4rem;
+  /* Container for cqw-based shrink-to-fit (see .totals). */
+  container-type: inline-size;
 }
 
 .analytics-panel header {
@@ -247,7 +316,7 @@ function countryName(code) {
 .ranges button {
   padding: 0.2rem 0.7rem;
   font: inherit;
-  font-size: 0.85rem;
+  font-size: 0.9rem;
   color: var(--muted);
   background: none;
   border: 1px solid var(--line);
@@ -282,12 +351,24 @@ function countryName(code) {
   margin-top: 1.8rem;
 }
 
+.analytics-view a {
+  color: var(--text);
+  text-decoration: none;
+}
+.analytics-view a:hover { color: var(--accent); }
+
+.analytics-view :deep(.muted) { color: var(--muted); }
+.analytics-view :deep(.small) { font-size: 0.75em; }
+
+/* One line at any width: the gap shrinks first, then the font (the number
+   scales along in em), both following the panel's container width. */
 .totals {
   display: flex;
-  gap: 2rem;
-  font-size: 1.1rem;
+  gap: clamp(0.5rem, 3cqw, 2rem);
+  font-size: clamp(0.6rem, 2.2cqw, 1.1rem);
+  white-space: nowrap;
 }
-.totals strong { font-size: 1.5rem; }
+.totals strong { font-size: 1.36em; }
 
 .visit-table-wrap {
   overflow-x: auto;
@@ -296,8 +377,7 @@ function countryName(code) {
 .visit-table {
   width: 100%;
   border-collapse: collapse;
-  font-family: monospace;
-  font-size: 0.82rem;
+  font-size: 0.9rem;
   line-height: 1.3;
 }
 
@@ -318,9 +398,11 @@ function countryName(code) {
   background: var(--bg, Canvas);
 }
 
-.visit-table .when {
+.visit-table .last-seen {
+  width: 6rem;
+  text-align: right;
   white-space: nowrap;
-  color: var(--muted);
+  cursor: pointer;
 }
 
 .visit-table .trail {
@@ -328,54 +410,79 @@ function countryName(code) {
   overflow-wrap: break-word;
 }
 
-.visit-table .trail a {
-  color: var(--text);
-  text-decoration: none;
+.visit-table .trail a,
+.visit-table .trail-link {
+  display: inline-block;
+  max-width: 8rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
 }
 
-.visit-table .trail a:hover { color: var(--accent); }
-
-.visit-table .trail a + a {
+.visit-table .trail > * + * {
   margin-left: 0.5rem;
 }
 
-.visit-table .trail small,
-.visit-table small.muted {
-  color: var(--muted);
-  font-size: 0.75em;
+.analytics-view :deep(.trail-link.error),
+.analytics-view :deep(.trail-link.error:hover) {
+  color: var(--error, #c00);
 }
 
-.visit-table .clickable-ip {
-  cursor: pointer;
-  text-decoration: underline;
-  text-decoration-style: dotted;
-}
-
-.visit-table .clickable-ip:hover {
-  color: var(--accent);
-}
-
-.visit-table .ua {
-  max-width: 18rem;
+.visit-table .utm-tag {
+  display: inline-block;
+  max-width: 100%;
+  padding: 0.05rem 0.4rem;
+  border: 1px solid var(--line);
+  border-radius: 0.25rem;
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  vertical-align: bottom;
+}
+
+.visit-table .clickable-list {
+  cursor: pointer;
+  max-width: 22rem;
+}
+
+.visit-table .abuse-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.15rem 0.5rem;
+  align-items: baseline;
+}
+
+.visit-table .inline-item {
+  max-width: 18rem;
+  min-width: 0;
   white-space: nowrap;
-}
-
-.visit-table .country .flag {
-  display: inline-flex;
-  width: 18px;
-  height: 12px;
-  border-radius: 2px;
   overflow: hidden;
-  border: 1px solid var(--line);
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+  hyphens: none;
 }
 
-.visit-table .country .flag :deep(svg) {
-  width: 100%;
-  height: 100%;
-  display: block;
+.visit-table :deep(.clickable-ip),
+.visit-table .clickable-list,
+.visit-table .last-seen {
+  cursor: pointer;
+  position: relative;
+}
+
+.visit-table :deep(.copy-popup) {
+  position: absolute;
+  bottom: calc(100% + 0.25rem);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.15rem 0.4rem;
+  background: var(--text, CanvasText);
+  color: var(--bg, Canvas);
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10;
 }
 
 .crawler-top-uas {

frontend/src/BannerEditor.vue

@@ -6,7 +6,7 @@ import { EditorView, basicSetup } from 'codemirror'
 import { EditorState } from '@codemirror/state'
 import { html } from '@codemirror/lang-html'
 import { cmHighlight, cmTheme } from './cmtheme'
-import { loadPlain, runScripts } from './swapdoc'
+import { dropPageCache, loadPlain, runScripts } from './swapdoc'
 
 const props = defineProps({
   pagePath: { type: String, default: '' },
@@ -215,6 +215,8 @@ function onMessage(ev) {
   } else if (msg.type === 'saved') {
     saveError.value = ''
     pendingSave = null
+    // Banner HTML/design changes affect the rendered page; invalidate prefetches.
+    dropPageCache()
     refreshOnSave?.()
     refreshOnSave = null
   } else if (msg.type === 'error') {

frontend/src/PageEditor.vue

@@ -4,9 +4,9 @@
 // (/_api/ws/editor). Docked left of the article on the page itself.
 // The socket connects when the editor is opened and reconnects with
 // exponential backoff after a failure; unsaved text and pending saves
-// survive a disconnect. Editor scroll drives the article scroll (while
-// editing the window scroll is locked and only #main scrolls), keeping the
-// rendered article at the cursor's position. Saving (💾 / Ctrl+S) is explicit
+// survive a disconnect. Editor and article (window) scrolls are linked
+// proportionally both ways (syncWindowToEditor / syncEditorToWindow).
+// Saving (💾 / Ctrl+S) is explicit
 // and refreshes the page regions in place — never a reload — so the editor
 // state (unsaved text included) also survives closing the shell; it is lost
 // only on a real page reload.
@@ -15,7 +15,7 @@ import { EditorView, basicSetup } from 'codemirror'
 import { EditorState } from '@codemirror/state'
 import { markdown } from '@codemirror/lang-markdown'
 import { cmHighlight, cmTheme } from './cmtheme'
-import { loadPlain } from './swapdoc'
+import { dropPageCache, loadPlain } from './swapdoc'
 
 const props = defineProps({
   pagePath: { type: String, default: '' },
@@ -113,7 +113,9 @@ async function saveAndRefresh() {
   await save()
   dirty.value = false
   // Refresh the page regions from the server so nav/sidebar changes apply
-  // (never a reload: the editor keeps its state).
+  // (never a reload: the editor keeps its state). Drop the prefetch cache
+  // first: heading/title changes affect navigation on every page.
+  dropPageCache()
   loadPlain(path.value)
 }
 
@@ -238,9 +240,13 @@ function runScripts(root) {
   }
 }
 
-function previewIntoArticle(html, hasH1) {
+function previewIntoArticle(html, hasH1, multicol) {
   const article = document.querySelector('#main article')
   if (!article) return
+  // The server render owns the column layout: .multicol on the article,
+  // the segmented .colseg/.cols structure inside .body. Both arrive with
+  // the preview and must stay in sync as edits cross the thresholds.
+  article.classList.toggle('multicol', multicol)
   const h1 = article.querySelector('h1')
   const body = article.querySelector('.body')
   // The edit pen may be tucked inside an h1 (title or markdown-owned);
@@ -268,7 +274,7 @@ function onMessage(ev) {
     requestRender()
     dirty.value = false // just loaded from the server, nothing unsaved
   } else if (msg.type === 'html' && msg.path === path.value) {
-    previewIntoArticle(msg.html, msg.has_h1)
+    previewIntoArticle(msg.html, msg.has_h1, msg.multicol)
   } else if (msg.type === 'saved') {
     saveError.value = ''
     pendingSave = null
@@ -307,20 +313,42 @@ function onEditorShown() {
   if (dirty.value) requestRender()
 }
 
-function syncScroll() {
-  // Editor scroll drives the article: keep the rendered page at the same
-  // proportional position as the cursor area in the editor. While editing
-  // the window scroll is locked and #main is the scrolling element.
+// Bidirectional proportional scroll sync between the CodeMirror scroller
+// and the window (the article's scroller, also while editing). Both
+// directions apply instantly (never smooth — a smooth window scroll feeds
+// its intermediate positions back into the editor and fights the user's
+// scrolling) and coalesce to one update per frame. Loops are broken two
+// ways: a driver flag held until one frame AFTER the write (the scroll
+// event a programmatic write dispatches arrives asynchronously — clearing
+// the flag in the writing frame would let the echo through and the two
+// directions would chase each other, which showed up as random jumping
+// whenever layout shifted the proportional targets mid-scroll), and a 1px
+// tolerance so residual rounding is a no-op. When the panel's height
+// changes mid-scroll (its top tracks the banner), the page is the driver:
+// the editor is re-matched to the page's position, never vice versa.
+function syncWindowToEditor() {
   if (syncingScroll || !view) return
-  const main = document.getElementById('main')
-  if (!main) return
   syncingScroll = true
   requestAnimationFrame(() => {
     const scroller = view.scrollDOM
     const max = scroller.scrollHeight - scroller.clientHeight
     const pct = max > 0 ? scroller.scrollTop / max : 0
-    main.scrollTop = pct * (main.scrollHeight - main.clientHeight)
-    syncingScroll = false
+    const y = pct * Math.max(0, document.documentElement.scrollHeight - innerHeight)
+    if (Math.abs(scrollY - y) > 1) scrollTo({ top: y, behavior: 'instant' })
+    requestAnimationFrame(() => { syncingScroll = false })
+  })
+}
+
+function syncEditorToWindow() {
+  if (syncingScroll || !view) return
+  syncingScroll = true
+  requestAnimationFrame(() => {
+    const scroller = view.scrollDOM
+    const pageMax = Math.max(0, document.documentElement.scrollHeight - innerHeight)
+    const pct = pageMax > 0 ? scrollY / pageMax : 0
+    const top = pct * Math.max(0, scroller.scrollHeight - scroller.clientHeight)
+    if (Math.abs(scroller.scrollTop - top) > 1) scroller.scrollTop = top
+    requestAnimationFrame(() => { syncingScroll = false })
   })
 }
 
@@ -379,7 +407,11 @@ onMounted(() => {
     }),
     parent: editorEl.value,
   })
-  view.scrollDOM.addEventListener('scroll', syncScroll)
+  view.scrollDOM.addEventListener('scroll', syncWindowToEditor)
+  // Page → editor: window scroll (and resizes, e.g. the panel growing when
+  // the banner scrolls away) re-match the editor to the page's position.
+  addEventListener('scroll', syncEditorToWindow, { passive: true })
+  addEventListener('resize', syncEditorToWindow)
   // Opening the editor means you want to write: start focused.
   view.focus()
   window.__pageritePageEditor = {
@@ -399,6 +431,8 @@ onUnmounted(() => {
   }
   view?.destroy()
   delete window.__pageritePageEditor
+  removeEventListener('scroll', syncEditorToWindow)
+  removeEventListener('resize', syncEditorToWindow)
   removeEventListener('keydown', onKeydown)
   removeEventListener('pagerite:editor-shown', onEditorShown)
 })
@@ -606,7 +640,7 @@ onUnmounted(() => {
 
 /* CodeMirror sits inside a bordered box, like a dialog's input area, with
    a slight margin to the panel edges. Wheel scroll stays in the editor and
-   drives the article (syncScroll) instead of double-scrolling. */
+   drives the article (syncWindowToEditor) instead of double-scrolling. */
 .editor {
   flex: 1;
   min-width: 0;

frontend/src/SiteEditor.vue

@@ -8,7 +8,7 @@ import { EditorState } from '@codemirror/state'
 import { css } from '@codemirror/lang-css'
 import { html } from '@codemirror/lang-html'
 import { cmHighlight, cmTheme } from './cmtheme'
-import { loadPlain, runScripts } from './swapdoc'
+import { dropPageCache, loadPlain, runScripts } from './swapdoc'
 
 const props = defineProps({
   pagePath: { type: String, default: '' },
@@ -110,6 +110,7 @@ async function uploadFavicon(file) {
     const { path: url } = await res.json()
     favicon.value = url
     applyFavicon(url)
+    dropPageCache()
   } else {
     saveError.value = `⚠️ ${await errorDetail(res)}`
   }
@@ -234,6 +235,7 @@ async function saveSettings(opts = {}) {
   })
   if (res.ok) {
     saveError.value = ''
+    dropPageCache()
   } else {
     saveError.value = '⚠️ changes could not be saved'
   }
@@ -242,30 +244,43 @@ async function saveSettings(opts = {}) {
 async function onThemeChange() {
   await saveSettings()
   // Theme CSS is backend-served at /_themes/{theme}/theme.css in both dev
-  // and prod: swap the link in place, then re-render (the theme's default
-  // banner design and the page's stylesheet links may change with it).
-  let link = document.getElementById('pagerite-theme')
+  // and prod, but rendered differently: a <link> in dev, an inline <style>
+  // in prod. Swap it in place, then re-render (the theme's default banner
+  // design and the page's stylesheets may change with it).
+  let el = document.getElementById('pagerite-theme')
+  const url = `/_themes/${theme.value}/theme.css`
   if (theme.value) {
-    const href = `/_themes/${theme.value}/theme.css`
-    if (link) {
-      link.href = href
-    } else {
+    if (el?.tagName === 'STYLE') {
+      el.textContent = await (await fetch(url)).text()
+    } else if (el) {
+      el.href = url
+    } else if (import.meta.env.DEV) {
       // Re-create after "none": keep base < theme < design < custom CSS.
-      // In dev there is no #pagerite-base link (the base is a
+      // In dev there is no #pagerite-base element (the base is a
       // Vite-injected <style>), so anchor to the next sheet instead of
       // prepending before the base styles.
-      link = document.createElement('link')
-      link.rel = 'stylesheet'
-      link.id = 'pagerite-theme'
-      link.href = href
+      el = document.createElement('link')
+      el.rel = 'stylesheet'
+      el.id = 'pagerite-theme'
+      el.href = url
       const before = document.getElementById('pagerite-base')?.nextSibling
         ?? document.getElementById('pagerite-banner')
         ?? document.getElementById('pagerite-user')
-      if (before) before.before(link)
-      else document.head.append(link)
+      if (before) before.before(el)
+      else document.head.append(el)
+    } else {
+      // Prod: inline <style>, fetched from the backend-served URL.
+      el = document.createElement('style')
+      el.id = 'pagerite-theme'
+      el.textContent = await (await fetch(url)).text()
+      const before = document.getElementById('pagerite-base')?.nextSibling
+        ?? document.getElementById('pagerite-banner')
+        ?? document.getElementById('pagerite-user')
+      if (before) before.before(el)
+      else document.head.append(el)
     }
-  } else if (link) {
-    link.remove()
+  } else if (el) {
+    el.remove()
   }
   loadPlain(path.value)
 }

frontend/src/StructureEditor.vue

@@ -10,7 +10,7 @@
 import { inject, onActivated, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import StructureTree from './StructureTree.vue'
 import { slugify } from './slugify'
-import { loadPlain } from './swapdoc'
+import { dropPageCache, loadPlain } from './swapdoc'
 
 const props = defineProps({
   pagePath: { type: String, default: '' },
@@ -144,6 +144,7 @@ async function commitPending() {
   }
   pending.value = null
   await refreshPages()
+  dropPageCache()
   await navigate(newPath)
   // Hand over to the page editor tab for the actual writing.
   shell?.switchMode('page')
@@ -171,6 +172,8 @@ async function postStructure(op) {
   })
   if (res.ok) {
     saveError.value = ''
+    // Structure changes alter navigation on every page; drop prefetches.
+    dropPageCache()
     loadPlain(path.value) // refresh menus and content from the server
   } else {
     saveError.value = `⚠️ ${await errorDetail(res)}`
@@ -234,6 +237,7 @@ async function removePage(node) {
   if (res.ok) {
     saveError.value = ''
     refreshPages()
+    dropPageCache()
     const p = node.path
     if (p === path.value || (p && path.value.startsWith(`${p}/`))) {
       // The current page was deleted — or reduced to a category, which now

frontend/src/TrailLink.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { computed } from 'vue'
+import { formatCount, formatReadTime } from './analytics/format.js'
+
+const props = defineProps({
+  step: { type: Object, required: true },
+  count: { type: Number, default: 0 },
+})
+
+defineEmits(['close'])
+
+const hasError = computed(() => props.step.status >= 400)
+
+const title = computed(() => {
+  const parts = [props.step.title]
+  if (props.step.readSeconds > 0) {
+    parts.push(formatReadTime(props.step.readSeconds))
+  }
+  if (hasError.value) {
+    parts.push(`${props.step.status}`)
+  }
+  return parts.filter(Boolean).join(' — ')
+})
+</script>
+
+<template>
+  <a class="trail-link"
+     :class="{ error: hasError }"
+     :href="step.path"
+     :title="title"
+     :target="step.external ? '_blank' : undefined"
+     :rel="step.external ? 'noopener' : undefined"
+     @click="(e) => { if (!step.external) $emit('close') }">
+    <small v-if="count > 1" class="muted">{{ formatCount(count) }}×</small>
+    <span>{{ step.slug }}</span>
+  </a>
+</template>

frontend/src/TransitionGraph.vue

@@ -1,126 +1,213 @@
 <script setup>
 /**
- * Radial transition map filtered to the selected time range.
+ * Radial transition map for a pre-filtered time range.
  *
- * Transitions are stored per 5-minute bucket (from -> to -> bucket ->
- * count), so the graph sums the buckets falling inside the selected
- * range, exactly like the charts and per-page views do.
+ * The parent filters transitions, views and visits to the selected range
+ * before passing them in; `window` carries the absolute [t0, t1) window
+ * so the visual scale can normalize against a one-week reference.
  */
-import { computed, onBeforeUnmount, shallowRef, watch } from 'vue'
-import { rangeWindow } from './analytics/time.js'
+import { computed, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
+import { DAY } from './analytics/time.js'
+import { formatCount, formatReadTime } from './analytics/format.js'
 import {
-  TNODE_R,
+  TNODE_W,
+  TNODE_H,
   BEAD_R,
-  BEAD_SPEED,
   buildTransitionGraph,
-  filterTransitionsByRange,
-  filterViewsByRange,
 } from './analytics/transitions.js'
 
 const props = defineProps({
   data: { type: Object, default: null },
-  range: { type: String, required: true },
+  window: { type: Object, required: true },
   pageTree: { type: Array, default: null },
 })
 
-const window = computed(() => rangeWindow(props.range))
-
-const filteredData = computed(() => {
-  if (!props.data) return null
-  const { t0, t1 } = window.value
-  return {
-    transitions: filterTransitionsByRange(props.data.transitions, t0, t1),
-    views: filterViewsByRange(props.data.views, t0, t1),
+const dayScale = computed(() => {
+  const { t0, t1 } = props.window
+  // Convert raw counts to a daily hit rate (hits/day).
+  if (t0 != null && t1 != null) return DAY / (t1 - t0)
+  // 'all': scale by the actual data span, but never less than the 30-day
+  // minimum the plot enforces, so sparse young data is not over-amplified.
+  const times = new Set()
+  for (const buckets of Object.values(props.data?.views || {})) {
+    for (const k of Object.keys(buckets)) times.add(Date.parse(k))
   }
+  const arr = [...times]
+  if (arr.length < 2) return 1
+  const span = Math.max(...arr) - Math.min(...arr)
+  return DAY / Math.max(span, 30 * DAY)
 })
 
 const graph = computed(() =>
-  filteredData.value
-    ? buildTransitionGraph(filteredData.value, props.pageTree)
+  props.data
+    ? buildTransitionGraph(props.data, props.pageTree, props.data.visits || [], dayScale.value)
     : null,
 )
 
 // Bead animation: every bead is simulated independently in JS. Each flow
 // (one per edge direction) emits a bead every `interval` seconds; beads
-// travel at BEAD_SPEED along the segment and are dropped at the end.
+// cross their segment in a constant TRAVERSAL_S seconds (speed relative
+// to span length) and are dropped at the end.
 // There is deliberately no cap on beads in flight.
+// Emitters persist across data reloads, keyed by flow.key: an unchanged
+// link keeps its emission phase and in-flight beads (tracked by progress,
+// not absolute time), so a count change elsewhere never reshuffles them.
 const beads = shallowRef([])
 let rafId = 0
+const emitters = new Map() // flow.key -> { flow, interval, next, alive }
+const live = [] // { e, p } — beads in flight, p = progress 0..1
+let lastTick = 0
 
-const startBeads = (flows) => {
-  cancelAnimationFrame(rafId)
-  beads.value = []
-  if (!flows?.length) return
-  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
+const MAX_BEAD_RATE = 120 // upper bound on total beads per second
+const TRAVERSAL_S = 0.4 // seconds to cross any segment, end to end
 
-  const live = [] // { flow, t0 } — one entry per bead in flight
-  const now = performance.now()
-  const emitters = flows.map((flow) => {
-    const interval = flow.interval * 1000
-    // Pre-fill the traversal with evenly spaced beads (random phase), so
-    // the flow appears already running instead of starting empty.
-    const phase = Math.random() * interval
-    for (let t = now - (flow.len / BEAD_SPEED) * 1000 + phase; t <= now; t += interval) {
-      live.push({ flow, t0: t })
-    }
-    return { flow, interval, next: now + phase }
-  })
-
-  const tick = (t) => {
-    for (const e of emitters) {
-      while (e.next <= t) {
-        live.push({ flow: e.flow, t0: e.next })
-        e.next += e.interval
-      }
-    }
-    const out = []
-    for (let i = live.length - 1; i >= 0; i--) {
-      const b = live[i]
-      const p = ((t - b.t0) / 1000) * BEAD_SPEED / b.flow.len
-      if (p >= 1) {
-        live.splice(i, 1)
-        continue
-      }
-      out.push({
-        x: b.flow.x1 + (b.flow.x2 - b.flow.x1) * p,
-        y: b.flow.y1 + (b.flow.y2 - b.flow.y1) * p,
-      })
-    }
-    beads.value = out
-    rafId = requestAnimationFrame(tick)
+const syncBeads = (flows) => {
+  const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
+  if (!flows?.length || reduced) {
+    emitters.clear()
+    live.length = 0
+    beads.value = []
+    return
   }
+  // Cap the total bead emission rate so a busy range cannot spawn enough
+  // beads to kill the page. Existing per-range time scaling is preserved;
+  // this is only a proportional emergency throttle when the limit is hit.
+  const totalRate = flows.reduce((s, f) => s + 1 / f.interval, 0)
+  const scale = totalRate > MAX_BEAD_RATE ? MAX_BEAD_RATE / totalRate : 1
+
+  const now = performance.now()
+  const seen = new Set()
+  for (const flow of flows) {
+    seen.add(flow.key)
+    const interval = (flow.interval / scale) * 1000
+    const e = emitters.get(flow.key)
+    if (e) {
+      e.flow = flow // pick up new geometry/rate, keep the phase
+      e.interval = interval
+      continue
+    }
+    // New emitter: pre-fill the traversal with evenly spaced beads (random
+    // phase), so the flow appears already running instead of empty.
+    const phase = Math.random() * interval
+    const dp = interval / 1000 / TRAVERSAL_S
+    const ne = { flow, interval, next: now + phase, alive: true }
+    for (let p = 1 - phase / 1000 / TRAVERSAL_S; p > 0; p -= dp) {
+      live.push({ e: ne, p })
+    }
+    emitters.set(flow.key, ne)
+  }
+  for (const [key, e] of emitters) {
+    if (!seen.has(key)) {
+      e.alive = false
+      emitters.delete(key)
+    }
+  }
+  for (let i = live.length - 1; i >= 0; i--) {
+    if (!live[i].e.alive) live.splice(i, 1)
+  }
+}
+
+const tick = (t) => {
+  const dt = lastTick ? (t - lastTick) / 1000 : 0
+  lastTick = t
+  for (const e of emitters.values()) {
+    while (e.next <= t) {
+      live.push({ e, p: 0 })
+      e.next += e.interval
+    }
+  }
+  const out = []
+  for (let i = live.length - 1; i >= 0; i--) {
+    const b = live[i]
+    b.p += dt / TRAVERSAL_S
+    if (b.p >= 1) {
+      live.splice(i, 1)
+      continue
+    }
+    const f = b.e.flow
+    out.push({ x: f.x1 + (f.x2 - f.x1) * b.p, y: f.y1 + (f.y2 - f.y1) * b.p })
+  }
+  beads.value = out
   rafId = requestAnimationFrame(tick)
 }
 
-watch(() => graph.value?.flows, startBeads, { immediate: true })
+watch(() => graph.value?.flows, syncBeads, { immediate: true })
+onMounted(() => {
+  if (!matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    rafId = requestAnimationFrame(tick)
+  }
+})
 onBeforeUnmount(() => cancelAnimationFrame(rafId))
+
+// The svg never renders larger than its natural size (1 viewBox unit = 1
+// px, max-width below): the layout geometry is designed in pixel-like
+// units, and upscaling would blow up the pills around their text. Narrow
+// panels scale the graph down to fit (width: 100%), text along with it.
+
+// Pill text is not truncated: text is clipped at the pill's rounded border
+// (clipPath per node, inset a few units for padding). Captions center when
+// they fit; overlong ones anchor left so their beginning (not their
+// middle) survives the clip. Width estimate: ~0.52 em per glyph.
+const fitsPill = (label, fontPx = 19) => label.length * 0.52 * fontPx <= TNODE_W - 16
+
+const countLabel = (n) =>
+  n.readSec ? `${formatCount(n.views)}×${formatReadTime(n.readSec)}` : formatCount(n.views)
 </script>
 
 <template>
   <section v-if="graph">
-    <svg class="tmap" :viewBox="`${graph.bounds.x0} ${graph.bounds.y0} ${graph.bounds.x1 - graph.bounds.x0} ${graph.bounds.y1 - graph.bounds.y0}`"
+    <svg class="tmap" :style="{ maxWidth: `${graph.bounds.x1 - graph.bounds.x0}px` }" :viewBox="`${graph.bounds.x0} ${graph.bounds.y0} ${graph.bounds.x1 - graph.bounds.x0} ${graph.bounds.y1 - graph.bounds.y0}`"
          role="img" aria-label="map of transitions between pages">
       <path v-for="(a, i) in graph.arcs" :key="'a' + i"
-            :d="a.d" class="tarc" />
+            :id="`tarc${i}`" :d="a.d" :class="['tarc', a.top && 'tarc-top']" />
+      <template v-for="(a, i) in graph.arcs" :key="'t' + i">
+        <path v-if="a.ld" :id="`tarcl${i}`" :d="a.ld" fill="none" stroke="none" />
+        <text v-if="a.ld" class="tarclabel" :class="{ 'tarclabel-top': a.top }"><textPath :href="`#tarcl${i}`" startOffset="0">{{ a.label }}</textPath></text>
+      </template>
       <path v-for="(e, i) in graph.edges" :key="'e' + i"
-            :d="e.d" class="tconn">
+            :d="e.d" :class="['tconn', e.external && 'tconn-exit']">
         <title>{{ e.title }}</title>
       </path>
       <circle v-for="(b, i) in beads" :key="'b' + i"
               :cx="b.x" :cy="b.y" :r="BEAD_R" class="tbead" />
       <g v-for="(x, i) in graph.extNodes" :key="'x' + i">
-        <a :href="x.path" target="_blank" rel="noopener" :title="x.path">
-          <circle :cx="x.x" :cy="x.y" :r="x.r"
-                  :class="['txnode', x.kind === 'source' ? 'txnode-source' : 'txnode-exit']" />
-          <text :x="x.x" :y="x.y - 2" class="tnodeslug">{{ x.label }}</text>
-          <text :x="x.x" :y="x.y + 12" class="tnodecount">{{ x.count }}</text>
+        <clipPath :id="`xclip${i}`">
+          <rect :x="x.x - TNODE_W/2 + 6" :y="x.y - TNODE_H/2" :width="TNODE_W - 12"
+                :height="TNODE_H" :rx="TNODE_H/2 - 4" />
+        </clipPath>
+        <a v-if="x.href" :href="x.href" target="_blank" rel="noopener">
+          <title>{{ x.path }}</title>
+          <rect :x="x.x - TNODE_W/2" :y="x.y - TNODE_H/2" :width="TNODE_W" :height="TNODE_H" :rx="TNODE_H/2"
+                :class="['txnode', x.kind === 'source' ? 'txnode-source' : 'txnode-exit']" />
+          <g :clip-path="`url(#xclip${i})`">
+            <text :x="fitsPill(x.label) ? x.x : x.x - TNODE_W/2 + 8" :y="x.y - TNODE_H*0.16" class="tnodeslug" dominant-baseline="middle" :style="{ textAnchor: fitsPill(x.label) ? 'middle' : 'start' }">{{ x.label }}</text>
+            <text :x="x.x" :y="x.y + TNODE_H*0.24" class="tnodecount" dominant-baseline="middle">{{ formatCount(x.count) }}</text>
+          </g>
         </a>
+        <g v-else>
+          <title>{{ x.path }}</title>
+          <rect :x="x.x - TNODE_W/2" :y="x.y - TNODE_H/2" :width="TNODE_W" :height="TNODE_H" :rx="TNODE_H/2"
+                :class="['txnode', x.kind === 'source' ? 'txnode-source' : 'txnode-exit']" />
+          <g :clip-path="`url(#xclip${i})`">
+            <text :x="fitsPill(x.label) ? x.x : x.x - TNODE_W/2 + 8" :y="x.y - TNODE_H*0.16" class="tnodeslug" dominant-baseline="middle" :style="{ textAnchor: fitsPill(x.label) ? 'middle' : 'start' }">{{ x.label }}</text>
+            <text :x="x.x" :y="x.y + TNODE_H*0.24" class="tnodecount" dominant-baseline="middle">{{ formatCount(x.count) }}</text>
+          </g>
+        </g>
       </g>
-      <g v-for="n in graph.nodes" :key="n.path">
-        <a :href="n.path" :title="n.title">
-          <circle :cx="n.x" :cy="n.y" :r="TNODE_R" class="tnode" />
-          <text :x="n.x" :y="n.y - 2" class="tnodeslug">{{ n.label }}</text>
-          <text :x="n.x" :y="n.y + 12" class="tnodecount">{{ n.views }}</text>
+      <g v-for="(n, i) in graph.nodes" :key="n.path">
+        <clipPath :id="`nclip${i}`">
+          <rect :x="n.x - TNODE_W/2 + 6" :y="n.y - TNODE_H/2" :width="TNODE_W - 12"
+                :height="TNODE_H" :rx="TNODE_H/2 - 4" />
+        </clipPath>
+        <a :href="n.path">
+          <title>{{ n.title }}</title>
+          <rect :x="n.x - TNODE_W/2" :y="n.y - TNODE_H/2" :width="TNODE_W" :height="TNODE_H" :rx="TNODE_H/2" class="tnode" />
+          <g :clip-path="`url(#nclip${i})`">
+            <text :x="fitsPill(n.label) ? n.x : n.x - TNODE_W/2 + 8" :y="n.y - TNODE_H*0.16" class="tnodeslug" dominant-baseline="middle" :style="{ textAnchor: fitsPill(n.label) ? 'middle' : 'start' }">{{ n.label }}</text>
+            <text :x="n.x" :y="n.y + TNODE_H*0.24" class="tnodecount" dominant-baseline="middle">
+              {{ countLabel(n) }}
+            </text>
+          </g>
         </a>
       </g>
     </svg>
@@ -132,44 +219,66 @@ onBeforeUnmount(() => cancelAnimationFrame(rafId))
 .tmap {
   display: block;
   width: 100%;
-  max-width: 36rem;
+  /* max-width is set inline to the natural content width (px = viewBox
+     units), so wide panels never upscale the graph beyond 1:1. */
   margin: 0 auto;
 }
 .tmap .tconn {
   fill: var(--accent);
   opacity: 0.4; /* uniform, not strength-encoded: width carries that */
 }
+.tmap .tconn-exit {
+  fill: var(--text);
+}
 .tmap .tbead {
   fill: var(--accent);
   opacity: 0.85;
   filter: drop-shadow(0 0 2.5px var(--accent));
 }
 .tmap .txnode {
-  fill: var(--bg, Canvas);
-  stroke-width: 1.5;
+  fill: var(--text);
+  stroke: none;
 }
-.tmap .txnode-source { stroke: var(--text); }
-.tmap .txnode-exit { stroke: var(--muted); }
+.tmap .txnode-source { fill: var(--text); }
+.tmap .txnode-exit { fill: var(--text); }
+/* Branch lanes: one wide concentric arc per path prefix, running behind
+   the node pills around the fan's circle center; parent levels sit one
+   indent (radius step) outward. Each lane's label follows a short guide
+   arc across the first inter-node gap (the part pills never cover). */
 .tmap .tarc {
   fill: none;
-  stroke: var(--line);
-  stroke-width: 1;
+  stroke: var(--muted);
+  stroke-width: 16;
+  opacity: 0.25;
+}
+.tmap .tarc-top { stroke-width: 24; }
+/* Lane labels are left-aligned: each guide arc starts just past the source
+   pill's edge, the earliest point where the text is visible. */
+.tmap .tarclabel {
+  fill: var(--muted);
+  font-size: 13px;
+  text-anchor: start;
+}
+/* The top lane is 50% thicker; its 🏠︎ label scales along. */
+.tmap .tarclabel-top {
+  font-size: 19.5px;
 }
 .tmap .tnode {
-  fill: var(--bg, Canvas);
-  stroke: var(--accent);
-  stroke-width: 1.5;
+  fill: var(--accent);
+  stroke: none;
 }
+/* Text sizes are viewBox units: they shrink along with the graph on
+   narrow panels. Overlong labels are clipped at the pill border. */
 .tmap .tnodeslug {
-  fill: var(--text);
-  font-size: 11px;
-  text-anchor: middle;
+  fill: var(--bg, Canvas);
+  font-size: 19px;
+  text-anchor: start;
 }
 .tmap a { cursor: pointer; }
-.tmap a:hover .tnodeslug { fill: var(--accent); }
 .tmap .tnodecount {
-  fill: var(--muted);
-  font-size: 10px;
+  fill: var(--bg, Canvas);
+  opacity: 0.75;
+  font-size: 15px;
   text-anchor: middle;
 }
 

frontend/src/VisitorCell.vue

@@ -0,0 +1,156 @@
+<script setup>
+// Visitor metadata cell shared by the recent-visits, crawlers, and abuse tables.
+// Displays IP/network/host, country flag/city, UA, and language when available.
+// Clicking the IP copies the full address to the clipboard.
+// ``variantCount`` overrides the UA line to warn when multiple client
+// fingerprints share the same IP (e.g. a scanner rotating UAs).
+import { computed } from 'vue'
+import * as flagSvgs from 'country-flag-icons/string/3x2'
+import { copyIp, formatLang } from './analytics/format.js'
+
+const props = defineProps({
+  ip: { type: String, default: '' },
+  ipDisplay: { type: String, default: '—' },
+  ua: { type: String, default: '' },
+  uaRaw: { type: String, default: '' },
+  country: { type: String, default: '' },
+  city: { type: String, default: '' },
+  lang: { type: String, default: '' },
+  langDisplay: { type: String, default: '' },
+  isHost: { type: Boolean, default: false },
+  variantCount: { type: Number, default: 1 },
+})
+
+const hasCountry = computed(() => !!(props.country && props.country !== '—'))
+const hasCity = computed(() => !!(props.city && props.city !== '—'))
+const hasLocale = computed(() => hasCountry.value || hasCity.value)
+const langValue = computed(() => props.langDisplay || formatLang(props.lang))
+const showLang = computed(() => langValue.value && langValue.value !== '—')
+
+function flagSvg(code) {
+  return flagSvgs[code?.toUpperCase()] || ''
+}
+
+function countryName(code) {
+  if (!code) return ''
+  try {
+    return new Intl.DisplayNames(['en'], { type: 'region' }).of(code.toUpperCase())
+  } catch {
+    return ''
+  }
+}
+</script>
+
+<template>
+  <td class="visitor-cell" :class="{ 'host-cell': isHost }">
+    <div class="visitor-rows">
+      <div class="visitor-row">
+        <div class="locale-line">
+          <span v-if="flagSvg(country)" class="flag" v-html="flagSvg(country)" :title="countryName(country) || country"></span>
+          <template v-if="hasCity"><small class="city-name muted">{{ city }}</small></template>
+          <template v-else-if="!hasLocale">—</template>
+        </div>
+        <div class="ip-line">
+          <span class="clickable-ip small muted"
+                :title="ip"
+                @click="copyIp(ip, $event)">{{ ipDisplay }}</span>
+        </div>
+      </div>
+      <div class="visitor-row">
+        <div class="ua-line">
+          <small v-if="variantCount > 1" class="muted variant-hint">{{ variantCount }} client variations</small>
+          <small v-else class="muted" :title="uaRaw">{{ ua || '—' }}</small>
+        </div>
+        <div v-if="showLang && variantCount <= 1" class="locale-lang"><small class="muted">{{ langValue }}</small></div>
+      </div>
+    </div>
+  </td>
+</template>
+
+<style scoped>
+.visitor-cell {
+  width: 18em;
+  max-width: 18em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+}
+
+.visitor-cell.host-cell {
+  text-align: right;
+}
+
+.visitor-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.visitor-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.visitor-row > * {
+  min-width: 0;
+}
+
+.locale-line,
+.ip-line,
+.ua-line {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.locale-line {
+  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.ip-line {
+  text-align: right;
+}
+
+.ua-line {
+  text-align: left;
+}
+
+.locale-lang {
+  flex: 0 0 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+}
+
+.city-name {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.flag {
+  display: inline-flex;
+  width: 18px;
+  height: 12px;
+  border-radius: 2px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
+  vertical-align: middle;
+}
+
+.flag :deep(svg) {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+</style>

frontend/src/VisitorCharts.vue

@@ -2,9 +2,24 @@
 /**
  * Visitor and page-view smoothed curves for a single shared time range.
  */
-import { computed } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { makeSeries } from './analytics/time.js'
-import { CHART_H, CHART_W, buildChart, fmtY } from './analytics/chart.js'
+import {
+  CHART_H,
+  CHART_W,
+  MARGIN_B,
+  MARGIN_L,
+  VIEW_H,
+  VIEW_W,
+  buildChart,
+} from './analytics/chart.js'
+
+const DAY_REFRESH_MS = 15000
+
+// Keep the whole svg within page bounds: full width below the natural
+// size, centered with equal side margins above it (max() clamps the
+// centering margin to 0 at the breakpoint, so the rule is continuous).
+const CHART_MARGIN = `max(0px, calc(50% - ${VIEW_W / 2}px))`
 
 const props = defineProps({
   data: { type: Object, default: null },
@@ -22,108 +37,117 @@ const allViews = computed(() => {
 
 const visitSeries = computed(() => makeSeries(props.data?.site_visits, props.range))
 const viewSeries = computed(() => makeSeries(allViews.value, props.range))
-const unit = computed(() => (props.range === 'week' ? 'h' : 'day'))
 
-const visitChart = computed(() => buildChart(visitSeries.value))
-const viewChart = computed(() => buildChart(viewSeries.value))
+function freqLabel(unit) {
+  return unit === '5min' ? '5 min' : unit === 'hour' ? 'hourly' : 'daily'
+}
+
+/** Vertical axis caption: "visits / 5 min" on the day view, else "hourly visits" style. */
+function axisLabel(unit, ylabel) {
+  return unit === '5min' ? `${ylabel} / 5 min` : `${freqLabel(unit)} ${ylabel}`
+}
+
+/** Legend label for the overlaid past weeks: "Week M" or "Week M–N". */
+function pastLabel(series) {
+  const oldest = series.at(-1).label.slice(5) // strip "Week "
+  return series.length > 2 ? `Week ${oldest}–${series[1].label.slice(5)}` : `Week ${oldest}`
+}
+
+const now = ref(Date.now())
+let refreshInterval = null
+onMounted(() => {
+  refreshInterval = setInterval(() => { now.value = Date.now() }, DAY_REFRESH_MS)
+})
+onUnmounted(() => {
+  if (refreshInterval) clearInterval(refreshInterval)
+})
+
+const visitChart = computed(() => buildChart(visitSeries.value, now.value))
+const viewChart = computed(() => buildChart(viewSeries.value, now.value))
 </script>
 
 <template>
   <section v-for="c in [
-      { ylabel: 'visitors', chart: visitChart, empty: 'no visits recorded yet' },
-      { ylabel: 'views', chart: viewChart, empty: 'no views recorded yet' },
+      { ylabel: 'visits', chart: visitChart, legend: true },
+      { ylabel: 'views', chart: viewChart, legend: false },
     ]" :key="c.ylabel">
     <template v-if="c.chart">
-      <div class="chartwrap">
-        <div class="plot">
-          <div class="plotarea">
-            <span class="yaxis-label">{{ c.ylabel }}/{{ unit }}</span>
-            <svg class="chart" :viewBox="`0 0 ${CHART_W} ${CHART_H}`"
-                 preserveAspectRatio="none" role="img" :aria-label="`${c.ylabel} per ${unit}`">
-              <line v-for="g in c.chart.majors.slice(1)" :key="'j' + g.value"
-                    :x1="0" :x2="CHART_W" :y1="g.y" :y2="g.y" class="major" />
-              <template v-for="t in c.chart.xticks" :key="'t' + t.x">
-                <line v-if="t.line" :x1="t.x" :x2="t.x" :y1="0" :y2="CHART_H"
-                      class="minor vertical" />
-              </template>
-              <template v-for="(s, i) in c.chart.series" :key="i">
-                <path v-if="s.area" :d="s.area" class="area" />
-                <path :d="s.line" class="line" :style="{ opacity: s.opacity }" />
-              </template>
-              <line :x1="0" :x2="CHART_W" :y1="CHART_H - 0.5" :y2="CHART_H - 0.5"
-                    class="axis" />
-            </svg>
-            <span v-for="g in c.chart.majors" :key="g.value" class="ylab"
-                  :style="{ bottom: g.bottom + '%' }">{{ fmtY(g.value) }}</span>
-          </div>
-          <div class="xlabels">
-            <span v-for="t in c.chart.xticks" :key="t.x" class="xlab"
-                  :style="{ left: t.left + '%' }">{{ t.label }}</span>
-          </div>
-        </div>
-      </div>
-      <div v-if="c.chart.series.length > 1" class="legend">
-        <span v-for="(s, i) in c.chart.series" :key="i" :style="{ opacity: s.opacity }">
-          ● {{ s.label }}
-        </span>
-      </div>
+      <svg class="chart" :viewBox="`${-MARGIN_L} 0 ${VIEW_W} ${VIEW_H}`"
+           :style="{ maxWidth: `${VIEW_W}px`, marginLeft: CHART_MARGIN }"
+           role="img" :aria-label="axisLabel(c.chart.unit, c.ylabel)">
+        <line v-for="g in c.chart.majors.slice(1)" :key="'j' + g.value"
+              :x1="0" :x2="CHART_W" :y1="g.y" :y2="g.y" class="major" />
+        <template v-for="t in c.chart.xticks" :key="'t' + t.x">
+          <line v-if="t.line" :x1="t.x" :x2="t.x" :y1="0" :y2="CHART_H"
+                class="minor vertical" />
+        </template>
+        <template v-if="c.chart.bars">
+          <rect v-for="(b, i) in c.chart.bars" :key="'b' + i"
+                :x="b.x" :y="b.y" :width="b.width" :height="b.height" class="bar" />
+          <path :d="c.chart.skyline" class="line" />
+        </template>
+        <template v-else>
+          <!-- Oldest overlay weeks first so the current week paints on top. -->
+          <template v-for="(s, i) in [...c.chart.series].reverse()" :key="i">
+            <path v-if="s.area" :d="s.area" class="area" />
+            <path :d="s.line" class="line" :class="{ past: s.past }"
+                  :style="{ opacity: s.opacity }" />
+          </template>
+        </template>
+        <line :x1="0" :x2="CHART_W" :y1="CHART_H - 0.5" :y2="CHART_H - 0.5"
+              class="axis" />
+        <text v-for="g in c.chart.majors" :key="'y' + g.value" x="-5" :y="g.y"
+              text-anchor="end" dominant-baseline="middle" class="ylab">{{ g.label }}</text>
+        <text :x="-(MARGIN_L - 10)" :y="CHART_H / 2" text-anchor="middle"
+              :transform="`rotate(-90 ${-(MARGIN_L - 10)} ${CHART_H / 2})`"
+              class="yaxis-label">{{ axisLabel(c.chart.unit, c.ylabel) }}</text>
+        <text v-for="t in c.chart.xticks" :key="'x' + t.x" :x="t.x" :y="CHART_H + MARGIN_B - 8"
+              text-anchor="middle" class="xlab">{{ t.label }}</text>
+        <!-- Week overlay legend, top right inside the plot: current week in
+             accent, one muted specimen for the whole past range. -->
+        <g v-if="c.legend && c.chart.series.length > 1">
+          <line :x1="CHART_W - 98" :x2="CHART_W - 78" y1="10" y2="10" class="line" />
+          <text :x="CHART_W - 72" y="10" dominant-baseline="middle"
+                class="leglab">{{ c.chart.series[0].label }}</text>
+          <line :x1="CHART_W - 98" :x2="CHART_W - 78" y1="25" y2="25"
+                class="line past" style="opacity: 0.6" />
+          <text :x="CHART_W - 72" y="25" dominant-baseline="middle"
+                class="leglab">{{ pastLabel(c.chart.series) }}</text>
+        </g>
+      </svg>
     </template>
-    <p v-else class="empty">{{ c.empty }}</p>
   </section>
 </template>
 
 <style scoped>
-/* The svg is stretched (preserveAspectRatio none), so all text lives in
-   HTML overlays positioned by the same fractions the geometry uses. */
-.chartwrap {
-  padding-left: 2.2rem; /* y labels */
-}
-
-.plot {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.plotarea {
-  position: relative;
-  height: 8rem;
-}
-
-.xlabels {
-  position: relative;
-  height: 1.2rem;
-}
-
+/* Each chart is a self-contained SVG: the viewBox includes the axis label
+   margins, so nothing is positioned with HTML overlays. Never upscale past
+   the natural size (1 viewBox unit = 1 px, max-width set inline) — that
+   would blow up the constant-size text; smaller panels still scale the
+   chart down to fit. The margin-left (set inline) centers the chart above
+   its natural width; the svg always stays within page bounds.
+   overflow: visible lets wider fonts extend past the viewBox instead of
+   clipping. */
 .chart {
   display: block;
   width: 100%;
-  height: 100%;
+  height: auto;
+  overflow: visible;
 }
 
-.ylab {
-  position: absolute;
-  left: -2.2rem;
-  width: 1.9rem;
-  text-align: right;
-  transform: translateY(50%);
-  font-size: 0.7rem;
-  color: var(--muted);
+.chart .ylab,
+.chart .xlab,
+.chart .yaxis-label,
+.chart .leglab {
+  font-family: system-ui, sans-serif; /* theme fonts can be overly styled */
+  font-size: 11px;
+  fill: var(--muted);
+}
+
+.chart .ylab {
   font-variant-numeric: tabular-nums;
 }
 
-.xlab {
-  position: absolute;
-  top: 0.25rem;
-  transform: translateX(-50%);
-  font-size: 0.7rem;
-  color: var(--muted);
-  white-space: nowrap;
-}
-
-.xlabels .xlab:first-child { transform: none; }
-.xlabels .xlab:last-child { transform: translateX(-100%); }
-
 .chart .minor {
   stroke: var(--line);
   stroke-width: 1;
@@ -154,6 +178,11 @@ const viewChart = computed(() => buildChart(viewSeries.value))
   opacity: 0.15;
 }
 
+.chart .bar {
+  fill: var(--accent);
+  opacity: 0.15;
+}
+
 .chart .line {
   fill: none;
   stroke: var(--accent);
@@ -163,27 +192,10 @@ const viewChart = computed(() => buildChart(viewSeries.value))
   stroke-linecap: round;
 }
 
-.legend {
-  display: flex;
-  gap: 1.2rem;
-  margin-top: 0.4rem;
-  font-size: 0.75rem;
-  color: var(--muted);
+/* Past overlay weeks contrast with the current week's accent color. */
+.chart .line.past {
+  stroke: var(--muted);
 }
 
-.legend span { color: var(--accent); }
-
-.yaxis-label {
-  position: absolute;
-  top: 50%;
-  left: -2.2rem;
-  font-size: 0.7rem;
-  color: var(--muted);
-  writing-mode: vertical-rl;
-  transform: translateY(-50%) rotate(180deg);
-}
-
-section { margin-top: 1.8rem; }
-
 .empty { color: var(--muted); }
 </style>

frontend/src/analytics-main.js

@@ -1,6 +1,9 @@
 // Analytics page entry: mounts AnalyticsView inside the normal page layout.
-// The backend renders #analytics-app inside #main and links this module for
-// the initial load; pagerite.js also imports it on fetch-navigation to /_a.
+// In production the backend inlines this module into the /_a page (and
+// pagerite.js re-creates the script element after fetch-navigations there);
+// in dev pagerite.js imports it from the Vite dev server on demand. Either
+// way it auto-mounts on #analytics-app when it evaluates, and unmounts when
+// pagerite.js announces a swap away from /_a.
 import { createApp } from 'vue'
 import AnalyticsView from './AnalyticsView.vue'
 
@@ -8,9 +11,7 @@ let app = null
 
 export function mount(container) {
   if (app) return
-  app = createApp(AnalyticsView, {
-    initialRange: new URLSearchParams(location.search).get('range') || 'week',
-  })
+  app = createApp(AnalyticsView)
   app.mount(container)
 }
 
@@ -19,6 +20,11 @@ export function unmount() {
   app = null
 }
 
-// Auto-mount on a normal (non-fetch) page load.
+// pagerite.js calls this before swapping away from /_a; each evaluation
+// (the inlined production module evaluates fresh on every visit) replaces
+// the handle.
+window.__pageriteAnalyticsUnmount = unmount
+
+// Auto-mount when the page holding #analytics-app is present.
 const container = document.getElementById('analytics-app')
 if (container) mount(container)

frontend/src/analytics/chart.js

@@ -1,15 +1,21 @@
 /**
  * Chart geometry, smoothing, and SVG path generation for analytics charts.
  *
- * Fixed 720x180 viewBox, stretched to the panel width; values are per-unit
- * rates (hour on the week view, day on month+).
+ * Fixed 720x180 plot area inside a larger viewBox that also holds the axis
+ * labels, so each chart SVG is self-contained; values are per-unit rates
+ * (hour on the week view, day on month+).
  */
 
-import { DAY, HOUR, WEEK, mondayUTC } from './time.js'
+import { DAY, HOUR, MIN5, WEEK, mondayUTC } from './time.js'
+import { formatCount } from './format.js'
 
-export const CHART_W = 720
-export const CHART_H = 180
+export const CHART_W = 1000
+export const CHART_H = 150
 export const PAD_TOP = 14 // room above the highest point
+export const MARGIN_L = 40 // y tick labels + vertical axis label
+export const MARGIN_B = 24 // x tick labels
+export const VIEW_W = MARGIN_L + CHART_W + 8
+export const VIEW_H = CHART_H + MARGIN_B
 
 /**
  * Y always starts at 0; the max is a multiple of a 1-2-5 major step with at
@@ -36,24 +42,21 @@ export function yScale(maxValue) {
 }
 
 /**
- * Edge-aware adaptive Gaussian smoothing. A change-point detector first
- * finds traffic-level shifts (two-unit totals compared on both sides of
- * each bucket; strong ratio + significance marks a candidate, and each run
- * of candidates keeps only its best-scoring bucket as an edge). Each
- * edge-delimited segment is then smoothed independently: a broad two-unit
- * pilot estimates the local traffic rate, which ramps the Gaussian sigma
- * from ~0.4 units (isolated events stay narrow, peaking at ~1 event/unit)
- * up to 1 unit (busy traffic gets full smoothing), and every bucket spreads
- * its count with its local sigma, clipped to the segment and renormalized
- * so total visitor count is preserved exactly. The unit is one hour on the
- * week view and one day on the month+ views, so the smoothing time scale
- * follows the range (month+ sigmas are 24x the hourly ones). The raw series
- * is drawn faintly behind the curve for reference. Operates on raw counts.
+ * Edge-aware Gaussian smoothing with a fixed bandwidth. A change-point
+ * detector first finds traffic-level shifts (two-unit totals compared on
+ * both sides of each bucket; strong ratio + significance marks a candidate,
+ * and each run of candidates keeps only its best-scoring bucket as an
+ * edge). Each edge-delimited segment is then smoothed independently: every
+ * bucket spreads its count with a fixed Gaussian sigma chosen so N events
+ * in a single bucket peak at N events per unit. Mass past a detected change
+ * point is dropped (kernel renormalized); mass past a true series edge is
+ * mirrored back, so the curve doesn't fall where data simply ends. Either
+ * way total visitor count is preserved exactly. The unit is
+ * one hour on the week view and one day on the month+ views, so the
+ * smoothing time scale follows the range. The raw series is drawn faintly
+ * behind the curve for reference. Operates on raw counts.
  */
 export function smooth(counts, binMinutes, unitMinutes, {
-  minSigmaMinutes = unitMinutes / Math.sqrt(2 * Math.PI),
-  maxSigmaMinutes = unitMinutes,
-  pilotSigmaMinutes = 2 * unitMinutes,
   detectorWindowMinutes = 2 * unitMinutes,
   // Count thresholds are defined per hour and scale with the unit, so
   // "low traffic" means the same thing on hourly and daily views
@@ -61,8 +64,6 @@ export function smooth(counts, binMinutes, unitMinutes, {
   highTrafficEvents = 10 * unitMinutes / 60,
   minRatio = 2.5,
   minSignificance = 4,
-  sigmaRampStart = 5 * unitMinutes / 60,
-  sigmaRampEnd = 20 * unitMinutes / 60,
 } = {}) {
   const n = counts.length
   if (!n) return counts
@@ -104,78 +105,49 @@ export function smooth(counts, binMinutes, unitMinutes, {
     i = j
   }
 
-  const reflectIndex = (i, length) => {
-    while (i < 0 || i >= length) {
-      i = i < 0 ? -i - 1 : 2 * length - i - 1
-    }
-    return i
-  }
+  // Fixed sigma: N events in one bucket peak at N events per unit.
+  // sigma_bins * sqrt(2*pi) = rate = unitMinutes / binMinutes.
+  const sigmaBins = unitMinutes / (binMinutes * Math.sqrt(2 * Math.PI))
+  const radius = Math.ceil(4 * sigmaBins)
 
-  const gaussianFilterReflect = (values, sigmaBins) => {
-    const length = values.length
-    const radius = Math.ceil(4 * sigmaBins)
-    const kernel = new Float64Array(radius * 2 + 1)
-    let sum = 0
-    for (let k = -radius; k <= radius; k++) {
-      const w = Math.exp(-0.5 * (k / sigmaBins) ** 2)
-      kernel[k + radius] = w
-      sum += w
-    }
-    for (let i = 0; i < kernel.length; i++) kernel[i] /= sum
-    const out = new Float64Array(length)
-    for (let i = 0; i < length; i++) {
-      let value = 0
-      for (let k = -radius; k <= radius; k++) {
-        value += values[reflectIndex(i + k, length)] * kernel[k + radius]
-      }
-      out[i] = value
-    }
-    return out
-  }
-
-  // Process each discontinuity-delimited regime independently so neither
-  // the pilot nor the final Gaussian can see through a detected boundary.
+  // Process each discontinuity-delimited regime independently so the
+  // Gaussian cannot see through a detected boundary. Each input bin spreads
+  // its count with the fixed sigma. Mass that would fall past a detected
+  // change point is dropped and the kernel renormalized; mass that would
+  // fall past a true series edge (first/last bin) is mirrored back into the
+  // segment, as if the data continued as its own reflection, so constant or
+  // rising data doesn't produce a spurious falling edge. Total visitor count
+  // is preserved apart from floating-point error.
   const bounds = [0, ...edges, n]
   const smoothed = new Float64Array(n)
   for (let b = 0; b < bounds.length - 1; b++) {
     const lo = bounds[b]
     const length = bounds[b + 1] - lo
+    const mirrorLeft = lo === 0
+    const mirrorRight = lo + length === n
     const segment = counts.slice(lo, lo + length)
-
-    // Broad pilot estimates only the generic local traffic level used for
-    // choosing sigma; it is not the final displayed curve.
-    const pilot = gaussianFilterReflect(segment, pilotSigmaMinutes / binMinutes)
-
-    // Keep isolated/sparse traffic at the minimum bandwidth through
-    // sigmaRampStart events, then ramp toward maxSigmaMinutes (thresholds
-    // are per-hour rates scaled to the unit: low traffic is low traffic
-    // on every range).
-    const sigmaMinutes = new Float64Array(length)
-    for (let i = 0; i < length; i++) {
-      const ratePerUnit = pilot[i] * unitMinutes / binMinutes
-      let mix = (ratePerUnit - sigmaRampStart) / (sigmaRampEnd - sigmaRampStart)
-      mix = Math.sqrt(Math.max(0, Math.min(1, mix)))
-      sigmaMinutes[i] = minSigmaMinutes + mix * (maxSigmaMinutes - minSigmaMinutes)
-    }
-
-    // Each input bin spreads its own count using its local sigma. The
-    // per-bin kernel is renormalized after clipping to the segment,
-    // preserving total visitor count apart from floating-point error.
     for (let j = 0; j < length; j++) {
       const count = segment[j]
       if (!count) continue
-      const sigmaBins = sigmaMinutes[j] / binMinutes
-      const radius = Math.ceil(4 * sigmaBins)
-      const start = Math.max(0, j - radius)
-      const end = Math.min(length, j + radius + 1)
+      // Collect (target bin, weight) pairs over the full kernel, folding
+      // mirrored mass at series edges and dropping mass past change points.
+      const spread = new Map()
       let weightSum = 0
-      for (let i = start; i < end; i++) {
-        const d = i - j
-        weightSum += Math.exp(-0.5 * (d / sigmaBins) ** 2)
+      for (let i = j - radius; i <= j + radius; i++) {
+        let k = i
+        // Fold repeatedly for segments shorter than the kernel radius.
+        while (k < 0 || k >= length) {
+          if (k < 0 && mirrorLeft) k = -k - 1
+          else if (k >= length && mirrorRight) k = 2 * length - 1 - k
+          else { k = null; break }
+        }
+        if (k === null) continue
+        const w = Math.exp(-0.5 * ((i - j) / sigmaBins) ** 2)
+        spread.set(k, (spread.get(k) || 0) + w)
+        weightSum += w
       }
-      for (let i = start; i < end; i++) {
-        const d = i - j
-        smoothed[lo + i] += count * Math.exp(-0.5 * (d / sigmaBins) ** 2) / weightSum
+      for (const [k, w] of spread) {
+        smoothed[lo + k] += count * w / weightSum
       }
     }
   }
@@ -200,15 +172,16 @@ export function spline(pts) {
     const c1y = clampY(p1.y + (p2.y - p0.y) / 6)
     const c2y = clampY(p2.y - (p3.y - p1.y) / 6)
     d += `C${p1.x + (p2.x - p0.x) / 6},${c1y} `
-       + `${p2.x - (p3.x - p1.x) / 6},${c2y} ${p2.x},${p2.y}`
+      + `${p2.x - (p3.x - p1.x) / 6},${c2y} ${p2.x},${p2.y}`
   }
   return d
 }
 
 /** Build a full chart model from a series descriptor produced by time.js. */
-export function buildChart(input) {
+export function buildChart(input, now = Date.now()) {
   if (!input || !input.series.length) return null
-  const { series, t0, t1, rate, binMinutes, unitMinutes } = input
+  if (input.unit === '5min') return buildDayChart(input, now)
+  const { series, t0, t1, rate, binMinutes, unitMinutes, unit } = input
   // Values are per-unit rates (hour on the week view, day on month+); the
   // y max is derived from the *smoothed* curves so random single-bucket
   // spikes don't blow up the scale. Smoothing works on raw counts (its edge
@@ -238,7 +211,7 @@ export function buildChart(input) {
   const nMajor = Math.round(max / step)
   for (let k = 0; k <= nMajor; k++) {
     const v = k * step
-    majors.push({ value: v, y: y(v), bottom: (1 - PAD_TOP / CHART_H) * (v / max) * 100 })
+    majors.push({ value: v, y: y(v), label: fmtY(v) })
   }
   if (minor) {
     for (let v = minor; v < max; v += minor) {
@@ -252,38 +225,120 @@ export function buildChart(input) {
   // ranges: boundary lines at Mondays / months / years.
   const isWeek = t1 - t0 === WEEK
   const isMonth = !isWeek && t1 - t0 <= 31 * DAY
-  const xticks = isWeek
-    ? Array.from({ length: 7 }, (_, d) => {
-        const t = t0 + d * DAY + 12 * HOUR
-        return {
-          x: x(t), left: ((t - t0) / (t1 - t0)) * 100,
-          label: new Date(t).toLocaleDateString(undefined, {
-            weekday: 'short', timeZone: 'UTC',
-          }),
-          line: false,
-        }
+  let xticks
+  if (isWeek) {
+    xticks = Array.from({ length: 7 }, (_, d) => {
+      const t = t0 + d * DAY + 12 * HOUR
+      return {
+        x: x(t),
+        label: new Date(t).toLocaleDateString(undefined, {
+          weekday: 'short', timeZone: 'UTC',
+        }),
+        line: false,
+      }
+    })
+  } else if (isMonth) {
+    // t0 is day-aligned; label every day whose noon falls inside the range.
+    xticks = []
+    for (let day = t0; day + 12 * HOUR < t1; day += DAY) {
+      const date = new Date(day)
+      const t = day + 12 * HOUR
+      xticks.push({
+        x: x(t),
+        label: date.getUTCDate() === 1
+          ? date.toLocaleDateString(undefined, { month: 'short', timeZone: 'UTC' })
+          : String(date.getUTCDate()),
+        line: false,
       })
-    : isMonth
-      ? Array.from(
-          { length: Math.floor((t1 - Math.ceil(t0 / DAY) * DAY) / DAY) },
-          (_, d) => {
-            const day = Math.ceil(t0 / DAY) * DAY + d * DAY
-            const date = new Date(day)
-            const t = day + 12 * HOUR
-            return {
-              x: x(t), left: ((t - t0) / (t1 - t0)) * 100,
-              label: date.getUTCDate() === 1
-                ? date.toLocaleDateString(undefined, { month: 'short', timeZone: 'UTC' })
-                : String(date.getUTCDate()),
-              line: false,
-            }
-          },
-        )
-      : xticksFor(t0, t1).map((t) => ({
-          x: x(t), left: ((t - t0) / (t1 - t0)) * 100,
-          label: fmtTick(t, t1 - t0), line: true,
-        }))
-  return { max, majors, minors, series: drawn, xticks }
+    }
+  } else {
+    xticks = xticksFor(t0, t1).map((t) => ({
+      x: x(t), label: fmtTick(t, t1 - t0), line: true,
+    }))
+  }
+  return { max, majors, minors, series: drawn, xticks, unit }
+}
+
+/**
+ * Day view: 5-minute bars for the last 24 hours. Bars are drawn at raw
+ * counts; the skyline uses a projected full-bucket value for the still-open
+ * final bucket. The y scale is derived from the projected skyline maximum.
+ */
+export function buildDayChart(input, now = Date.now()) {
+  const { series, t0, t1 } = input
+  const points = series[0]?.points || []
+  const n = points.length
+  if (!n) return null
+  const bucketMs = (t1 - t0) / n
+  const bucketWidth = CHART_W / n
+  const gap = 0.2
+  const barWidth = Math.max(0.2, bucketWidth - gap)
+
+  const x = (i) => i * bucketWidth + gap / 2
+  const prevRaw = n > 1 ? points[n - 2].count : 0
+  const projected = points.map((p, i) => {
+    if (i !== n - 1) return p.count
+    const bucketStart = t0 + i * bucketMs
+    const elapsed = Math.max(1, Math.min(bucketMs, now - bucketStart))
+    // Blend the observed partial bucket with the previous full bucket:
+    // the longer the current bucket has run, the less we borrow from it.
+    const share = elapsed / bucketMs
+    return p.count + prevRaw * (1 - share)
+  })
+  const highest = Math.max(0, ...projected)
+  const { max, step, minor } = yScale(highest)
+  const y = (v) => PAD_TOP + (1 - Math.max(0, v) / max) * (CHART_H - PAD_TOP)
+
+  const bars = points.map((p, i) => {
+    const bx = x(i)
+    const by = y(p.count)
+    return {
+      x: bx,
+      y: by,
+      width: barWidth,
+      height: CHART_H - by,
+      raw: p.count,
+      projected: projected[i],
+    }
+  })
+
+  let skyline = ''
+  for (let i = 0; i < bars.length; i++) {
+    const b = bars[i]
+    const top = y(b.projected)
+    if (i === 0) {
+      skyline += `M${b.x},${top} H${b.x + b.width}`
+    } else {
+      skyline += ` V${top} H${b.x + b.width}`
+    }
+  }
+
+  const majors = []
+  const minors = []
+  const nMajor = Math.round(max / step)
+  for (let k = 0; k <= nMajor; k++) {
+    const v = k * step
+    majors.push({ value: v, y: y(v), label: fmtY(v) })
+  }
+  if (minor) {
+    for (let v = minor; v < max; v += minor) {
+      if (v % step !== 0) minors.push({ y: y(v) })
+    }
+  }
+
+  const xticks = []
+  const tickStep = 3 * HOUR
+  const firstTick = Math.ceil(t0 / tickStep) * tickStep
+  for (let t = firstTick; t < t1; t += tickStep) {
+    if (t < t0) continue
+    const d = new Date(t)
+    xticks.push({
+      x: ((t - t0) / (t1 - t0)) * CHART_W,
+      label: `${String(d.getUTCHours()).padStart(2, '0')}:00`,
+      line: false,
+    })
+  }
+  return { bars, skyline: skyline.trim(), max, majors, minors, xticks, unit: '5min', series: [] }
 }
 
 /** X ticks for year/all: Monday boundaries up to a quarter, UTC month
@@ -300,7 +355,7 @@ export function xticksFor(t0, t1) {
   if (span <= 4 * 365 * DAY) {
     const d = new Date(t0)
     let t = Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + 1, 1)
-    for (; t <= t1; ) {
+    for (; t <= t1;) {
       ticks.push(t)
       const m = new Date(t)
       t = Date.UTC(m.getUTCFullYear(), m.getUTCMonth() + 1, 1)
@@ -327,7 +382,7 @@ export function fmtTick(t, span) {
   return d.toLocaleDateString(undefined, { year: 'numeric', timeZone: 'UTC' })
 }
 
-/** Y labels: integers when the step allows, one decimal for fractional steps. */
+/** Y labels use the same compact formatter as text labels. */
 export function fmtY(v) {
-  return Number.isInteger(v) ? String(v) : v.toFixed(1)
+  return formatCount(v)
 }

frontend/src/analytics/format.js

@@ -25,11 +25,44 @@ export const hostIP = (ip) => {
   }
 }
 
-/** Copy the full IP to the clipboard, ignoring failures. */
-export async function copyIp(ip) {
+function showCopiedFeedback(el) {
+  if (!el || typeof document === 'undefined') return
+  const popup = document.createElement('span')
+  popup.textContent = 'Copied!'
+  popup.className = 'copy-popup'
+  popup.style.cssText =
+    'position:absolute;bottom:calc(100% + 0.25rem);left:50%;' +
+    'transform:translateX(-50%);padding:0.15rem 0.4rem;' +
+    'background:var(--text, CanvasText);color:var(--bg, Canvas);' +
+    'border-radius:0.25rem;font-size:0.75rem;white-space:nowrap;' +
+    'pointer-events:none;z-index:10;'
+  el.classList.add('has-copy-popup')
+  el.appendChild(popup)
+  setTimeout(() => {
+    popup.remove()
+    el.classList.remove('has-copy-popup')
+  }, 1200)
+}
+
+/** Copy the full IP to the clipboard and show a brief "Copied!" popup. */
+export async function copyIp(ip, event) {
   if (!ip) return
+  const el = event?.currentTarget
   try {
     await navigator.clipboard.writeText(ip)
+    showCopiedFeedback(el)
+  } catch {
+    /* ignore */
+  }
+}
+
+/** Copy arbitrary text to the clipboard and show a brief "Copied!" popup. */
+export async function copyList(text, event) {
+  if (!text) return
+  const el = event?.currentTarget
+  try {
+    await navigator.clipboard.writeText(text)
+    showCopiedFeedback(el)
   } catch {
     /* ignore */
   }
@@ -44,6 +77,54 @@ export function calcTotalViews(views) {
   return n
 }
 
+// Very short reads are navigation/skims, not real reading time.
+export const MIN_READ_SECONDS = 10
+
+/** path -> accumulated read seconds for a visit, derived from its trail. */
+export function readMapOf(v) {
+  const map = {}
+  for (const item of Object.values(v.trail || {})) {
+    if (item.read) map[item.to] = (map[item.to] || 0) + item.read
+  }
+  return map
+}
+
+/** Average minutes per visit and average of per-article median read minutes. */
+export function calcReadStats(visits) {
+  const perArticle = {}
+  let totalVisitSeconds = 0
+  let visitCount = 0
+  for (const v of visits || []) {
+    const read = readMapOf(v)
+    const secs = Object.values(read).filter((s) => s >= MIN_READ_SECONDS)
+    if (!secs.length) continue
+    visitCount++
+    totalVisitSeconds += secs.reduce((a, b) => a + b, 0)
+    for (const [path, s] of Object.entries(read)) {
+      if (s >= MIN_READ_SECONDS) {
+        ; (perArticle[path] || (perArticle[path] = [])).push(s)
+      }
+    }
+  }
+  const avgMinPerVisit = visitCount
+    ? Math.max(1, Math.round(totalVisitSeconds / visitCount / 60))
+    : 0
+
+  let articleMedianSum = 0
+  const articleCount = Object.keys(perArticle).length
+  for (const arr of Object.values(perArticle)) {
+    arr.sort((a, b) => a - b)
+    const mid = Math.floor(arr.length / 2)
+    const median = arr.length % 2 ? arr[mid] : (arr[mid - 1] + arr[mid]) / 2
+    articleMedianSum += Math.max(MIN_READ_SECONDS, median)
+  }
+  const avgArticleMedianMin = articleCount
+    ? Math.max(1, Math.round(articleMedianSum / articleCount / 60))
+    : 0
+
+  return { avgMinPerVisit, avgArticleMedianMin }
+}
+
 /** Build a path -> page title lookup from the site tree. */
 function buildTitleMap(pageTree) {
   const titles = new Map()
@@ -59,22 +140,22 @@ function buildTitleMap(pageTree) {
 
 /** Last path segment for display; front page becomes a house icon. */
 function slugOf(path) {
-  return path === '/' ? '🏠' : path.split('/').pop()
+  return path === '/' ? '🏠︎' : path.split('/').pop()
 }
 
-/** Host name of an external https origin, with scheme stripped. */
+/** Host name of an external https origin, with scheme and www. stripped. */
 function externalSlug(origin) {
   try {
-    return new URL(origin).host
+    return new URL(origin).host.replace(/^www\./, '')
   } catch {
-    return origin.replace(/^https?:\/\//, '')
+    return origin.replace(/^https?:\/\//, '').replace(/^www\./, '')
   }
 }
 
 /** Format one trail step: an internal page or an external https origin. */
 function stepOf(path, titles) {
   if (path?.startsWith('/')) {
-    return { path, slug: slugOf(path), title: titles.get(path) || '', external: false }
+    return { path, slug: slugOf(path), title: titles.get(path) || '', external: false, home: path === '/' }
   }
   if (path?.startsWith('https://')) {
     return {
@@ -114,6 +195,8 @@ export function formatWhen(ts, now = Date.now()) {
   if (adiff <= 86400000) {
     return formatter
       .format(Math.round(diff / 3600000), 'hour')
+      .replace('hours', 'h')
+      .replace('hour', 'h')
       .replaceAll(' ', '\u202F')
   }
   if (adiff <= 604800000) {
@@ -140,6 +223,52 @@ export function formatWhenTooltip(ts) {
   return new Date(ts).toISOString().replace('T', ' ').replace('Z', ' UTC')
 }
 
+/** Full local timestamp for tooltips, e.g. "21 Aug 2026, 17:38:48". */
+export function formatWhenLocal(ts) {
+  return new Date(ts).toLocaleString('en-ie', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  })
+}
+
+/** Preserve locale case with the region/country subtag upper-cased. */
+export function formatLang(value) {
+  if (!value || value === '—') return value
+  const parts = value.split('-')
+  if (parts.length > 1) {
+    parts[parts.length - 1] = parts[parts.length - 1].toUpperCase()
+  }
+  return parts.join('-')
+}
+
+/** ISO 8601 UTC timestamp without subseconds, e.g. "2026-08-21T00:20:48Z". */
+export function formatWhenIso(ts) {
+  return `${new Date(ts).toISOString().split('.')[0]}Z`
+}
+
+/**
+ * Compact read time for tooltips: "50s" under a minute, "1m23s" otherwise.
+ */
+export function formatReadTime(seconds) {
+  if (seconds < 60) return `${seconds}s`
+  return `${Math.floor(seconds / 60)}m${seconds % 60}s`
+}
+
+/**
+ * Compact visitor counts: plain below 1k, then 1.2k / 10k / 1.2M.
+ * Truncated, not rounded.
+ */
+export function formatCount(n) {
+  if (n < 1000) return String(n)
+  if (n < 10000) return `${Math.trunc(n / 1000)}.${Math.trunc((n % 1000) / 100)}k`
+  if (n < 1_000_000) return `${Math.trunc(n / 1000)}k`
+  return `${Math.trunc(n / 1_000_000)}.${Math.trunc((n % 1_000_000) / 100_000)}M`
+}
+
 /**
  * Format recent visits for display, newest first. Each step is a linked slug
  * pointing to its article; external referers/origins are shown as their
@@ -152,7 +281,7 @@ export function formatRecentVisits(visits, pageTree, limit = 50) {
     .reverse()
     .map((v) => ({
       when: new Date(v.start).toLocaleString(),
-      steps: [v.referer, v.entry, ...(v.trail || [])]
+      steps: [v.referer, ...Object.values(v.trail || {}).map((t) => t.to)]
         .map((p) => stepOf(p, titles))
         .filter(Boolean),
     }))
@@ -196,67 +325,188 @@ export function formatCounts(entries) {
 
 /**
  * Count distinct User-Agent strings among crawler hits, most common first.
- * Returns an array of [ua, count] pairs.
+ * Returns an array of [ua, count] pairs.  ``clients`` maps client hashes to
+ * client records.
  */
-export function countCrawlerUas(crawlers) {
+export function countCrawlerUas(crawlers, clients) {
   const counts = {}
   for (const c of crawlers || []) {
-    const value = c.ua_pretty || c.ua || '(no UA)'
+    const client = (clients || {})[c.client] || {}
+    const value = client.ua_pretty || client.ua || '(no UA)'
     counts[value] = (counts[value] || 0) + 1
   }
   return Object.entries(counts).sort((a, b) => b[1] - a[1])
 }
 
 /**
- * Group raw crawler hits by the same (ip, ua) pair we use to tell a real
- * visitor from a crawler, and format each group as a row showing every
- * internal page that crawler visited.  Rows are sorted by total hits,
- * most active crawler first, rather than by most recent hit.
+ * Reduce a reverse-DNS hostname to its right-most components that fit
+ * within ``limit`` characters.  This keeps the meaningful main domain
+ * while avoiding absurdly long subdomains like ``xxx.yyy.zzz...provider.net``.
  */
-export function formatCrawlerRows(crawlers, pageTree, now = Date.now()) {
+export function mainDomain(host, limit = 24) {
+  if (!host) return host
+  const labels = host.split('.').filter(Boolean)
+  if (!labels.length) return host
+  const parts = [labels.pop()]
+  while (labels.length) {
+    const next = labels[labels.length - 1]
+    const candidate = `${next}.${parts.join('.')}`
+    if (candidate.length > limit) break
+    parts.unshift(labels.pop())
+  }
+  return parts.join('.')
+}
+
+/**
+ * Group raw crawler hits by client hash and format each group as a row showing
+ * every internal page that crawler visited.  Rows are sorted by most recent hit
+ * first, with total hits as a tie-breaker.
+ * ``clients`` maps client hashes to client records.
+ */
+export function formatCrawlerRows(crawlers, clients, pageTree, now = Date.now()) {
   const titles = buildTitleMap(pageTree)
   const groups = new Map()
   for (const c of crawlers || []) {
-    const key = `${c.ip}\0${c.ua}`
-    const g = groups.get(key) || {
-      ip: c.ip || '',
-      ua: c.ua_pretty || c.ua || '—',
-      uaRaw: c.ua || '',
+    const client = (clients || {})[c.client] || {}
+    const g = groups.get(c.client) || {
+      clientHash: c.client,
+      client,
       lastStart: 0,
       pages: new Map(),
     }
     const start = new Date(c.start).getTime()
     if (start > g.lastStart) g.lastStart = start
     if (c.entry?.startsWith('/')) {
-      g.pages.set(c.entry, (g.pages.get(c.entry) || 0) + 1)
+      const existing = g.pages.get(c.entry) || { count: 0, status: c.status || 200 }
+      existing.count += 1
+      if (c.status != null) existing.status = c.status
+      g.pages.set(c.entry, existing)
     }
-    groups.set(key, g)
+    groups.set(c.client, g)
   }
   const totalHits = (g) => {
     let n = 0
-    for (const c of g.pages.values()) n += c
+    for (const p of g.pages.values()) n += p.count
     return n
   }
   return [...groups.values()]
-    .sort((a, b) => totalHits(b) - totalHits(a) || b.lastStart - a.lastStart)
+    .sort((a, b) => b.lastStart - a.lastStart || totalHits(b) - totalHits(a))
     .slice(0, 10)
-    .map((g) => ({
-      when: formatWhen(g.lastStart, now),
-      whenTooltip: formatWhenTooltip(g.lastStart),
-      pages: [...g.pages.entries()]
-        .sort((a, b) => b[1] - a[1])
-        .map(([path, count]) => ({
-          path,
-          slug: slugOf(path),
-          title: titles.get(path) || '',
-          count,
+    .map((g) => {
+      const client = g.client || {}
+      const host = client.host || ''
+      const isHost = !!host
+      return {
+        lastSeen: formatWhen(g.lastStart, now),
+        lastSeenIso: formatWhenIso(g.lastStart),
+        lastSeenLocal: formatWhenLocal(g.lastStart),
+        pages: [...g.pages.entries()]
+          .sort((a, b) => b[1].count - a[1].count)
+          .map(([path, info]) => ({ ...stepOf(path, titles), count: info.count, status: info.status })),
+        ip: client.ip || '',
+        ipDisplay: isHost ? mainDomain(host) : hostIP(client.ip) || client.ip || '—',
+        isHost,
+        ua: client.ua_pretty || client.ua || '—',
+        uaRaw: client.ua || '',
+        lang: client.lang || '—',
+        langDisplay: formatLang(client.lang),
+        country: client.country || '—',
+        city: client.city || '—',
+        total: totalHits(g),
+      }
+    })
+}
+
+/**
+ * Group abuse hits by IP and format each group as a row with the full paths
+ * probed.  Identical paths are collapsed into one entry with their hit count.
+ * Flagged paths (the ones that triggered abuse classification) are lifted to
+ * the top, followed by other 404s, then document GETs from the abuser.  Within
+ * each category paths are sorted by count descending, then earliest first.
+ * Rows are sorted by most recent hit first.  Visitor metadata comes from the
+ * latest client hash seen for the IP; ``clientCount`` tells the visitor cell
+ * how many distinct client variations the IP produced.  Paths are shown
+ * verbatim (query string included), not resolved against the page tree.
+ * ``clients`` maps client hashes to client records.
+ */
+export function formatAbuseRows(abuse, clients, now = Date.now()) {
+  const groups = new Map()
+  for (const a of abuse || []) {
+    const client = (clients || {})[a.client] || {}
+    const ip = client.ip || ''
+    const g = groups.get(ip) || {
+      ip,
+      pathCounts: new Map(),
+      clientHashes: new Set(),
+      lastStart: 0,
+      lastClient: a.client,
+    }
+    const start = new Date(a.start).getTime()
+    if (start > g.lastStart) {
+      g.lastStart = start
+      g.lastClient = a.client
+    }
+    const path = a.path || ''
+    const existing = g.pathCounts.get(path) || {
+      path,
+      count: 0,
+      firstStart: start,
+      flag: a.flag || false,
+      is_404: a.is_404 || false,
+    }
+    existing.count += 1
+    if (start < existing.firstStart) existing.firstStart = start
+    if (a.flag) existing.flag = true
+    if (!a.is_404) existing.is_404 = false
+    g.pathCounts.set(path, existing)
+    g.clientHashes.add(a.client)
+    groups.set(ip, g)
+  }
+  const totalHits = (g) => {
+    let n = 0
+    for (const p of g.pathCounts.values()) n += p.count
+    return n
+  }
+  return [...groups.values()]
+    .sort((a, b) => b.lastStart - a.lastStart)
+    .slice(0, 10)
+    .map((g) => {
+      const pathCategory = (p) => (p.flag ? 0 : p.is_404 ? 1 : 2)
+      const paths = [...g.pathCounts.values()].sort(
+        (a, b) =>
+          pathCategory(a) - pathCategory(b) ||
+          b.count - a.count ||
+          a.firstStart - b.firstStart,
+      )
+      const client = (clients || {})[g.lastClient] || {}
+      const host = client.host || ''
+      const isHost = !!host
+      return {
+        lastSeen: formatWhen(g.lastStart, now),
+        lastSeenIso: formatWhenIso(g.lastStart),
+        lastSeenLocal: formatWhenLocal(g.lastStart),
+        paths: paths.map((p) => ({
+          path: p.path,
+          count: p.count,
+          flag: p.flag,
+          is_404: p.is_404,
         })),
-      ip: g.ip,
-      ipDisplay: hostIP(g.ip) || g.ip || '—',
-      ua: g.ua,
-      uaRaw: g.uaRaw,
-      total: totalHits(g),
-    }))
+        allPaths: paths
+          .map((p) => (p.count > 1 ? `${p.count}× ${p.path}` : p.path))
+          .join('\n'),
+        clientCount: g.clientHashes.size,
+        ip: client.ip || g.ip,
+        ipDisplay: isHost ? mainDomain(host) : hostIP(client.ip || g.ip) || client.ip || g.ip || '—',
+        isHost,
+        ua: client.ua_pretty || client.ua || '—',
+        uaRaw: client.ua || '',
+        lang: client.lang || '—',
+        langDisplay: formatLang(client.lang),
+        country: client.country || '—',
+        city: client.city || '—',
+        total: totalHits(g),
+      }
+    })
 }
 
 /**
@@ -264,31 +514,49 @@ export function formatCrawlerRows(crawlers, pageTree, now = Date.now()) {
  * with display strings; missing values become "—".  ``trail`` starts with the
  * external referer (when present), then the entry page and any further internal
  * pages or external exit origins. Only the 20 most recent visits are shown.
+ * ``clients`` maps client hashes to client records.
  */
-export function formatVisitRows(visits, pageTree, now = Date.now()) {
+export function formatVisitRows(visits, clients, pageTree, now = Date.now()) {
   const titles = buildTitleMap(pageTree)
   return [...(visits || [])].reverse().slice(0, 20).map((v) => {
-    const trail = [v.referer, v.entry, ...(v.trail || [])]
-      .map((p) => stepOf(p, titles))
+    const client = (clients || {})[v.client] || {}
+    const trail = Object.values(v.trail || {})
+      .map((item) => {
+        const step = stepOf(item.to, titles)
+        if (step) {
+          if (item.read) step.readSeconds = item.read
+          if (item.status) step.status = item.status
+        }
+        return step
+      })
       .filter(Boolean)
-    const utm = Object.entries(v.utm || {})
+    const utmKeys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content']
+    const utmValues = utmKeys.map((k) => (v.utm || {})[k]).filter(Boolean)
+    const utm = utmValues.length ? utmValues.join(' · ') : ''
+    const utmTitle = Object.entries(v.utm || {})
       .map(([k, value]) => `${k}=${value}`)
       .join(', ')
     const dash = (s) => (s || '—')
+    const host = client.host || ''
+    const isHost = !!host
     return {
-      when: formatWhen(v.start, now),
-      whenTooltip: formatWhenTooltip(v.start),
+      lastSeen: formatWhen(v.start, now),
+      lastSeenIso: formatWhenIso(v.start),
+      lastSeenLocal: formatWhenLocal(v.start),
+      langDisplay: formatLang(client.lang),
       trail,
+      refererStep: stepOf(v.referer, titles),
       referer: dash(v.referer),
-      ip: v.ip || '',
-      ipDisplay: v.host || hostIP(v.ip) || v.ip || '—',
-      host: dash(v.host),
-      lang: dash(v.lang),
-      country: dash(v.country),
-      city: dash(v.city),
-      ua: v.ua_pretty || v.ua || '—',
-      uaRaw: v.ua || '',
+      ip: client.ip || '',
+      ipDisplay: isHost ? mainDomain(host) : hostIP(client.ip) || client.ip || '—',
+      isHost,
+      lang: dash(client.lang),
+      country: dash(client.country),
+      city: dash(client.city),
+      ua: client.ua_pretty || client.ua || '—',
+      uaRaw: client.ua || '',
       utm: utm || '—',
+      utmTitle,
     }
   })
 }

frontend/src/analytics/time.js

@@ -13,6 +13,7 @@ export const DAY = 86400e3
 export const WEEK = 7 * DAY
 
 export const RANGES = {
+  day: { label: 'day', span: DAY, bucket: MIN5 },
   week: { label: 'week' },
   month: { label: 'month', span: 30 * DAY, bucket: 6 * HOUR },
   year: { label: 'year', span: 365 * DAY, bucket: DAY },
@@ -25,6 +26,15 @@ export function mondayUTC(t) {
   return (d - ((d + 3) % 7)) * DAY
 }
 
+/** ISO 8601 week number of the week containing t (via its Thursday). */
+export function isoWeek(t) {
+  const d = new Date(t)
+  d.setUTCHours(0, 0, 0, 0)
+  d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7))
+  const yearStart = Date.UTC(d.getUTCFullYear(), 0, 1)
+  return Math.ceil(((d - yearStart) / DAY + 1) / 7)
+}
+
 /** Parse sparse timestamp buckets into a { epochMs: count } map. */
 export function rawTimes(buckets) {
   const raw = {}
@@ -43,7 +53,9 @@ export function sumRange(raw, t0, t1) {
 /**
  * One series per overlaid week: [this week, 1 week ago, ...], at native
  * 5-minute resolution, up to 8 weeks back (and only weeks that overlap the
- * recorded data at all). The current week is truncated at the current bucket
+ * recorded data at all). Each older week's timestamps are shifted forward
+ * onto the current week's axis so all curves overlay inside the plot.
+ * The current week is truncated at the current bucket
  * — no fake zeroes drawn for the future. Counts are rates per hour
  * (bucket count * 12): a lone visit in a 5-minute bucket reads as "12/h".
  * The coarser ranges use per-day rates instead (unitMinutes = 24*60).
@@ -51,9 +63,24 @@ export function sumRange(raw, t0, t1) {
 export function weeklySeries(buckets) {
   const raw = rawTimes(buckets)
   const times = Object.keys(raw).map(Number)
-  if (!times.length) return null
   const now = Date.now()
   const thisMonday = mondayUTC(now)
+  if (!times.length) {
+    const points = []
+    const end = Math.min(thisMonday + WEEK, Math.floor(now / MIN5) * MIN5 + MIN5)
+    for (let t = thisMonday; t < end; t += MIN5) {
+      points.push({ t, count: 0 })
+    }
+    return {
+      series: [{ points, label: `Week ${isoWeek(thisMonday)}`, opacity: 1, area: true }],
+      t0: thisMonday,
+      t1: thisMonday + WEEK,
+      rate: HOUR / MIN5,
+      binMinutes: 5,
+      unitMinutes: 60,
+      unit: 'hour',
+    }
+  }
   const oldest = Math.min(...times)
   // Weeks back as far as the data reaches: difference in Monday indices.
   const available = (thisMonday - mondayUTC(oldest)) / WEEK + 1
@@ -66,12 +93,13 @@ export function weeklySeries(buckets) {
       : start + WEEK
     const points = []
     for (let t = start; t < end; t += MIN5) {
-      points.push({ t, count: raw[t] || 0 })
+      points.push({ t: t + back * WEEK, count: raw[t] || 0 })
     }
     out.push({
       points,
-      label: back === 0 ? 'this week' : `${back}w ago`,
+      label: `Week ${isoWeek(start)}`,
       opacity: Math.max(0.15, 1 - back * 0.25),
+      past: back > 0,
       area: back === 0,
     })
   }
@@ -91,54 +119,149 @@ export function weeklySeries(buckets) {
  * to per-day rates (the unit the month+ charts are read in).
  * Ranges without a fixed span use the full data reach, but never less than
  * their configured minSpan so the chart keeps a readable minimum x scale.
+ * t0 is aligned to the UTC day so the x labels cover the whole range;
+ * t1 is now, so the scale never extends into the future. The bucket size
+ * follows the resulting window (6h up to 31 days, daily beyond), so ranges
+ * covering the same window — "all" at its 30-day minimum vs "month" —
+ * render the identical curve.
  */
 export function rollingSeries(buckets, rangeKey) {
   const raw = rawTimes(buckets)
   const times = Object.keys(raw).map(Number)
-  if (!times.length) return null
   const { span, bucket, minSpan = 0 } = RANGES[rangeKey]
-  const t1 = Math.floor(Date.now() / bucket) * bucket + bucket
-  const earliest = Math.floor(Math.min(...times) / bucket) * bucket
-  const t0 = span != null
+  const t1 = Date.now()
+  const t0 = Math.floor((span != null
     ? t1 - span
-    : Math.min(earliest, t1 - minSpan)
+    : Math.min(times.length ? Math.min(...times) : Infinity, t1 - minSpan)) / DAY) * DAY
+  if (!times.length) {
+    const bucketMs = t1 - t0 <= 31 * DAY ? Math.min(bucket, 6 * HOUR) : bucket
+    const points = []
+    for (let t = t0; t < t1; t += bucketMs) {
+      points.push({ t, count: 0 })
+    }
+    return {
+      series: [{ points, label: '', opacity: 1, area: true }],
+      t0,
+      t1,
+      rate: DAY / bucketMs,
+      binMinutes: bucketMs / 60e3,
+      unitMinutes: 24 * 60,
+      unit: 'day',
+    }
+  }
+  // The bucket follows the actual window length, not the range key: when
+  // "all" is capped to its 30-day minimum it covers the very window "month"
+  // does, and daily bins would draw a different curve over the same data
+  // (coarser edge detection, points a day apart plotted at bin starts, the
+  // last point stuck at today's midnight instead of reaching now).
+  const bucketMs = t1 - t0 <= 31 * DAY ? Math.min(bucket, 6 * HOUR) : bucket
   const points = []
-  for (let t = t0; t < t1; t += bucket) {
-    points.push({ t, count: sumRange(raw, t, t + bucket) })
+  for (let t = t0; t < t1; t += bucketMs) {
+    points.push({ t, count: sumRange(raw, t, t + bucketMs) })
   }
   return {
     series: [{ points, label: '', opacity: 1, area: true }],
     t0,
     t1,
-    rate: DAY / bucket,
-    binMinutes: bucket / 60e3,
+    rate: DAY / bucketMs,
+    binMinutes: bucketMs / 60e3,
     unitMinutes: 24 * 60,
     unit: 'day',
   }
 }
 
-/** Dispatch to weekly or rolling series based on the selected range. */
+/**
+ * Day view: raw 5-minute bucket counts for the current 24-hour window.
+ * No smoothing or rate conversion is applied; counts are used as-is.
+ */
+export function daySeries(buckets) {
+  const raw = rawTimes(buckets)
+  const now = Date.now()
+  const { span, bucket } = RANGES.day
+  const t1 = Math.floor(now / bucket) * bucket + bucket
+  const t0 = t1 - span
+  const points = []
+  for (let t = t0; t < t1; t += bucket) {
+    points.push({ t, count: raw[t] || 0 })
+  }
+  return {
+    series: [{ points, label: '', opacity: 1, area: false }],
+    t0,
+    t1,
+    rate: 1,
+    binMinutes: bucket / 60e3,
+    unitMinutes: bucket / 60e3,
+    unit: '5min',
+  }
+}
+
+/** Dispatch to daily, weekly or rolling series based on the selected range. */
 export function makeSeries(buckets, rangeKey) {
-  return rangeKey === 'week'
-    ? weeklySeries(buckets)
-    : rollingSeries(buckets, rangeKey)
+  if (rangeKey === 'day') return daySeries(buckets)
+  if (rangeKey === 'week') return weeklySeries(buckets)
+  return rollingSeries(buckets, rangeKey)
 }
 
 /**
  * Absolute UTC time window for a given range key. Used to filter visits,
- * transitions and views to the same period the charts are showing.
+ * transitions and views for the non-chart stats on the analytics page.
+ * Every bounded range is a rolling span ending at now; the charts instead
+ * align week to Monday 00:00 UTC (overlaying previous weeks) and month+
+ * to UTC day boundaries, so their x windows differ from the stats range
+ * on purpose.
  * Returns { t0, t1 } where null means unbounded.
  */
 export function rangeWindow(rangeKey) {
   const now = Date.now()
-  if (rangeKey === 'week') {
-    const start = mondayUTC(now)
-    return { t0: start, t1: start + WEEK }
-  }
   if (rangeKey === 'all') {
     return { t0: null, t1: null }
   }
-  const { span, bucket } = RANGES[rangeKey]
-  const t1 = Math.floor(now / bucket) * bucket + bucket
-  return { t0: t1 - span, t1 }
+  const span = rangeKey === 'week' ? WEEK : RANGES[rangeKey].span
+  return { t0: now - span, t1: now }
+}
+
+/**
+ * Sum the bucketed transition matrix (from -> to -> bucket ISO -> count)
+ * into a plain from -> to -> count matrix for the window [t0, t1).
+ */
+export function filterTransitionsByRange(transitions, t0, t1) {
+  const out = {}
+  for (const [fr, tos] of Object.entries(transitions || {})) {
+    for (const [to, buckets] of Object.entries(tos)) {
+      let n = 0
+      for (const [k, c] of Object.entries(buckets)) {
+        const t = Date.parse(k)
+        if ((t0 == null || t >= t0) && (t1 == null || t < t1)) n += c
+      }
+      if (n) {
+        out[fr] = out[fr] || {}
+        out[fr][to] = n
+      }
+    }
+  }
+  return out
+}
+
+/** Keep only the 5-minute view buckets that fall inside [t0, t1). */
+export function filterViewsByRange(views, t0, t1) {
+  const filtered = {}
+  for (const [path, buckets] of Object.entries(views || {})) {
+    const out = {}
+    for (const [k, c] of Object.entries(buckets)) {
+      const t = Date.parse(k)
+      if ((t0 == null || t >= t0) && (t1 == null || t < t1)) out[k] = c
+    }
+    if (Object.keys(out).length) filtered[path] = out
+  }
+  return filtered
+}
+
+/** Keep only records whose start time falls inside [t0, t1). */
+export function filterRecordsByRange(records, t0, t1) {
+  const out = []
+  for (const r of records || []) {
+    const t = Date.parse(r.start)
+    if ((t0 == null || t >= t0) && (t1 == null || t < t1)) out.push(r)
+  }
+  return out
 }

frontend/src/assets/pagerite.css

@@ -56,6 +56,11 @@
   /* The brand follows the heading font unless overridden separately. */
   --font-brand: var(--font-heading);
   --font-code: var(--font-fira-code);
+  /* Target x-height ratio for code text: set to the body font's ratio
+     (here Source Sans 3's 0.478) so font-size-adjust can scale the code
+     font to the same optical height. Themes retune it to their body font
+     (measured: Literata 0.507, Inter 0.546, Montserrat 0.517, Cause 0.5). */
+  --code-x-height: 0.478;
   /* Width of the docked editor panel (used both here for shifting the page
      and in the Vue editor's own styles). */
   --editor-w: min(46rem, 50vw);
@@ -65,8 +70,23 @@
   box-sizing: border-box;
 }
 
+::selection {
+  background: color-mix(var(--accent) 30%, transparent);
+  color: inherit;
+}
+
+/* Links never underline — including SVG link text, which the UA stylesheet
+   underlines by default. */
+a {
+  text-decoration: none;
+}
+
 html {
   scroll-behavior: smooth;
+  /* No rubber-band bounce past the page ends (macOS trackpads): the banner
+     parallax in --pry is driven by scrollY and overscroll would let the
+     artwork drift beyond its designed range. */
+  overscroll-behavior: none;
   /* Native-scrollbar fallback styling (JS off or before pagerite.js runs):
      thin, theme-muted thumb on a transparent track. With JS the scrollbars
      are replaced by OverlayScrollbars (see pagerite.js) — floating,
@@ -116,7 +136,11 @@ body {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  min-height: 11rem;
+  /* Height scales down proportionally on small screens: 13rem at 800px
+     (50rem) viewport, shrinking with the smaller of viewport width/height
+     (vmin) below that, floored at 8rem. */
+  height: clamp(8rem, 26vmin, 13rem);
+  box-sizing: content-box;
   background: linear-gradient(135deg, var(--surface), var(--bg));
   border-bottom: 1px solid var(--line);
 }
@@ -181,11 +205,17 @@ body {
 #brand {
   font-family: var(--font-brand);
   font-weight: 700;
-  font-size: 2.4rem;
+  /* Scales down proportionally on small screens, same curve as the banner
+     height: 2.4rem at 800px, shrinking with vmin below that. */
+  font-size: clamp(1.4rem, 4.8vmin, 2.4rem);
   text-decoration: none;
   /* One line always: pagerite.js shrinks the font size to fit instead of
      wrapping (the themed size is the maximum). */
   white-space: nowrap;
+  /* Shrink-wrap to the text: as a flex child of the column-direction
+     #banner it would otherwise stretch full-width, making the empty banner
+     area beside the text a link to the front page. */
+  align-self: flex-start;
   margin: auto 1.25rem 0;
   padding-top: 1.5rem;
   color: var(--text);
@@ -243,26 +273,34 @@ body {
   position: relative;
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 78rem) minmax(0, 1fr);
-  /* The docked editor pushes the content (not the header) right. */
-  transition: margin-left 0.25s ease;
 }
 
-/* Long articles (.multicol is added by pagerite.js based on content length)
-   lift the 78rem cap and scrap the right gutter: a 1fr left gutter (which
-   holds the overlaying sidebar) and the article taking all the rest, out
-   to the right viewport edge. The column count follows the width (see the
-   `columns: 30rem` rule below). The .wide breakout is re-anchored to the
-   left gutter below (the article is no longer viewport-centered). */
+/* Long articles (.multicol comes from the backend render, based on
+   content length — code excluded) lift the 78rem cap: main takes the full
+   width and the article composes itself inside it — fluid, bounded text
+   lanes, centered, with the surplus left vacant (see the article layout
+   rules below). The left track — main always sits in column 2 — collapses
+   to zero when the page has no sidebar; the sidebar then simply overlays
+   the vacant zone, as it does on single-column pages. */
 body:has(.multicol) #content {
-  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
+  grid-template-columns: 0 minmax(0, 1fr);
+}
+
+/* Only when the vacant zone cannot hold the sidebar does it get its own
+   12rem track — the same compromise single-column pages make below
+   102rem. Above that, a sidebar's presence changes nothing about the
+   article. */
+@media (max-width: 110rem) {
+  body:has(#sidebar):has(.multicol):not(.editing) #content {
+    grid-template-columns: 12rem minmax(0, 1fr);
+  }
 }
 
 body.editing #content {
   margin-left: var(--editor-w);
-  padding-left: 1rem;
-  /* gap between the docked editor and the content */
-  /* No overflow clipping here: .editor-host lives outside this box
-     (negative left), and .wide shrink-wraps to the remaining space. */
+  /* No padding/gap here: the article area starts flush at the panel's right
+     edge so that full-bleed .wide images (anchored to that edge below) line
+     up with it exactly. */
 }
 
 /* The sidebar's gutter space is needed by the editor instead. */
@@ -270,34 +308,23 @@ body.editing #sidebar {
   display: none;
 }
 
-/* While editing, the window itself does not scroll: the editor panel is
-   exactly the remaining window height, and only the article area (#main)
-   scrolls. Without the editor, normal full-page scroll applies. */
-body.editing {
-  height: 100vh;
-  overflow: hidden;
-}
-
-body.editing #content {
-  min-height: 0;
-  grid-template-rows: 100%;
-}
-
-body.editing #main {
-  height: 100%;
-  min-height: 0;
-  overflow-y: auto;
-}
-
-/* The editor host lives inside #content: it starts below the banner and
-   ends above the footer. With the page scroll locked while editing, the
-   panel exactly fills that space — the full available window height. */
+/* While editing, the window keeps scrolling normally (the overlay
+   scrollbars take no layout space, so the vw-based .wide bleed stays exact
+   and no horizontal scrollbar appears). The editor panel is fixed to the
+   viewport's left edge; main.js sets its top each scroll frame — the
+   banner's bottom edge while the banner is visible, else the viewport top.
+   The panel scrolls internally. */
 .editor-host {
-  position: absolute;
+  position: fixed;
   top: 0;
+  /* main.js: banner bottom while visible, else 0 */
   bottom: 0;
-  left: calc(0px - var(--editor-w));
+  left: 0;
   width: var(--editor-w);
+  /* Above the sidebar, .edit-link and the banner's top-right pens
+     (z-index 10) while sliding in/out (the host now lives at the end of
+     <body>, so it needs its own stacking level). */
+  z-index: 10;
 }
 
 .editor-root.overlay {
@@ -375,7 +402,7 @@ body.editing #main {
 #sidebar ul ul {
   gap: 0.5em;
   margin-top: 0.5em;
-  padding-inline-start: 1em;
+  padding-inline-start: 1.8em;
 }
 
 #sidebar ul ul li::before {
@@ -404,11 +431,134 @@ main {
   /* No top padding: a leading wide image sits flush under the banner, and
      text-first pages get their spacing from the h1's top margin instead. */
   padding: 0 1.25rem 3rem;
+  /* The layout container for the article composition: the multicol stage
+     (lane count), the margin fall and the .wide bleed respond to the
+     actual available width here — editor inset included — via container
+     queries and cqw units. */
+  container-type: inline-size;
+}
+
+/* Child-entry card stacks: a category page (and the content-less category
+   404) lists its published children after the markdown content — one column
+   per child, the child's whole subtree flattened into the column in menu
+   order (see _cards in views.py). The row bleeds to full page width
+   (div.wide): the columns first grow to fill it, then shrink rather than
+   wrap. Every card has the same fixed 16/10 shape, covered entirely by the
+   page's share image (og:image heuristics, as a background — a gradient
+   placeholder when it has none) with the title overlaid on a translucent
+   band at the bottom. The card is one <a> holding only phrasing-level
+   spans; the spans lay out as blocks. */
+.cards {
+  display: flex;
+  /* Stacks stop growing at their cap; center the row in the bleed then. */
+  justify-content: center;
+  gap: 1.25rem;
+  margin-top: 2.5rem;
+  /* The full-bleed breakout (div.wide rules) lands the edges exactly on the
+     viewport's; this keeps the cards themselves off the edges. */
+  padding-inline: 1.25rem;
+}
+
+.cards .stack {
+  /* Grow to fill the row (up to the cap — full-width rows would make huge
+     cards), shrink (not wrap) when there are too many. */
+  flex: 1 1 0;
+  max-width: 24rem;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+/* Phones: the columns stack vertically instead of shrinking to slivers.
+   Text-only cards (gradient cover + description) then fit their content —
+   the fixed 16/10 shape only makes sense for image covers. */
+@media (max-width: 48rem) {
+  .cards {
+    flex-direction: column;
+  }
+
+  .card:has(.desc) {
+    aspect-ratio: auto;
+  }
+}
+
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  aspect-ratio: 16 / 10;
+  /* Allow shrinking below the text's min-content width: without this the
+     text cards hold their stack wider than the image-only stacks. */
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 0.5rem;
+  background: var(--surface);
+  color: var(--text);
+  text-decoration: none;
+  transition: transform 0.2s, box-shadow 0.2s;
+  box-shadow: 0 0 0.1rem black;
+}
+
+.card:hover {
+  transform: scale(1.02);
+  box-shadow: 0 0 0.3rem black;
+}
+
+/* The cover fills the whole card; the text spans are positioned so they
+   paint above it. */
+.card .cover {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, var(--surface), var(--bg));
+  background-size: cover;
+  background-position: center;
+}
+
+.card .title {
+  position: relative;
+  display: block;
+  margin-top: auto;
+  padding: 0.75rem 1.25rem 0.9rem;
+  background: color-mix(var(--bg) 40%, transparent);
+  /* Pinned: the article a:hover accent must not leak through the card. */
+  color: var(--text);
+  font-family: var(--font-heading);
+  font-size: 1.25rem;
+  font-weight: 900;
+  line-height: 1.25;
+}
+
+/* Image-less cards carry the description under the title, extending the
+   same translucent band. */
+.card .title:has(+ .desc) {
+  padding-bottom: 0;
+}
+
+.card .desc {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  /* Four lines exactly: the text itself is truncated server-side (_cards),
+     this is just the safety net. max-height spans the lines plus the
+     vertical padding (border-box), so nothing bleeds past the clip. */
+  line-height: 1.4;
+  max-height: calc(4 * 1.4em + 1.3rem);
+  padding: 0.4rem 1.25rem 0.9rem;
+  background: color-mix(var(--bg) 30%, transparent);
+  color: var(--muted);
+  font-size: 0.95rem;
+  text-align: left;
+  hyphens: none;
 }
 
 article h1,
 article h2,
-article h3 {
+article h3,
+article h4,
+article h5,
+article h6 {
   font-family: var(--font-heading);
   font-weight: 600;
   line-height: 1.25;
@@ -428,13 +578,31 @@ article dl,
 article blockquote,
 article pre,
 article figure,
-article table {
+article table,
+article h3,
+article h4,
+article h5,
+article h6 {
   margin-top: 0;
   margin-bottom: 1rem;
 }
 
-article h3 {
-  margin: 1.4rem 0 0.4rem;
+/* Headings separate from the text above via a top margin on the sibling
+   combinator: a heading that is the first child of a container (e.g. the
+   top of a .colseg column segment) gets no gap, and browsers truncate the
+   margin at column breaks, so column tops stay aligned. */
+article h3,
+article h4,
+article h5,
+article h6 {
+  margin-bottom: 0.4rem;
+}
+
+article * + h3,
+article * + h4,
+article * + h5,
+article * + h6 {
+  margin-top: 1.4rem;
 }
 
 /* Lists: small diamond emoji markers — blue 🔹 on odd nesting levels,
@@ -442,7 +610,7 @@ article h3 {
    lines align. */
 article ul {
   list-style: none;
-  padding-inline-start: 1em;
+  padding-inline-start: 1.8em;
 }
 
 article ul li::before {
@@ -524,22 +692,119 @@ article dd {
   hyphens: auto;
 }
 
-/* Multi-column reading, but only for long articles (pagerite.js adds
-   .multicol based on content length and splits the body into .colseg segments
-   separated by full-width h2s and wide figures; only segments with enough
-   text get .cols). No fixed breakpoint: `columns: 30rem` lets CSS fit as
-   many columns of at least 30rem as the article's current width allows —
-   since .multicol also uncaps the article width (see #content above), a
-   wider window simply yields more columns. */
-.multicol .colseg.cols {
-  columns: 30rem;
-  column-gap: 3.5rem;
-  column-rule: 1px solid var(--line);
+/* The long-article composition (.multicol): a fluid but bounded text
+   lane with a 16rem side zone at the article's left, centered in main —
+   surplus width becomes vacant space, never endless text. (The backend
+   render splits the body into .colseg segments separated by full-width
+   h2s and .wide elements, tags text-heavy segments .cols — a ::: nocols
+   container opts its section out — and flags the article .multicol; CSS
+   owns the geometry.) Technical content wants a wide lane: up to 42rem
+   single, or two fluid lanes (36rem minimum, never more than two) once
+   they fit beside the zone, capped at 102rem total. The zone — the
+   region the nav sidebar overlays — is a margin indent on the lane
+   content; margin boxes float into it, and the text never moves. */
+article.multicol {
+  margin-inline: auto;
+  max-width: 58rem; /* 42rem lane + 16rem zone */
+}
+
+@container (min-width: 45rem) {
+  /* The side zone (not on phones): lane content indents 16rem; margin
+     boxes ({.margin} / ::: margin blocks, ::: aside, {.margin} figures)
+     float at the article's left edge — the same region the nav sidebar
+     overlays. Scoped to direct .body children (the backend render keeps
+     margin blocks out of the column segments); nested ones keep the
+     in-column float fallback. */
+  .multicol .body>.colseg,
+  .multicol .body>h1,
+  .multicol .body>h2,
+  article.multicol>h1 {
+    margin-left: 16rem;
+  }
+
+  .multicol .body>.margin,
+  .multicol .body>.aside,
+  .multicol .body>figure:has(.margin) {
+    float: left;
+    clear: left;
+    width: 14rem;
+    max-width: none;
+    margin: 0.3rem 2rem 1rem 0;
+  }
+
+  /* Wide separators start below any margin box — their bleed must not
+     wrap around it. */
+  .multicol .body>figure:has(.wide),
+  .multicol .body>div.wide,
+  .multicol .body>pre.wide {
+    clear: left;
+  }
+}
+
+@container (min-width: 96rem) {
+  article.multicol {
+    max-width: 102rem;
+  }
+
+  /* Two fluid lanes (36rem minimum) beside the zone, up to the 102rem
+     cap — wider windows just add vacant space. */
+  .multicol .colseg.cols {
+    columns: 36rem 2;
+    column-gap: 3.5rem;
+    column-rule: 1px solid var(--line);
+  }
+}
+
+/* With a sidebar, below 110rem the sidebar gets its own 12rem track (see
+   #content). The track IS the left lane then: no in-article zone, the
+   text lane runs fluid (up to 86rem), and margin boxes fall all the way
+   left into the track — sliding under the translucent sticky nav, which
+   only ever occupies its top. (The track never exists once the container
+   reaches 96rem, so the two-lane rules above never meet it. Not below
+   48rem: there the sidebar becomes a link strip above the article and
+   there is no track to fall into.) */
+@media (min-width: 48rem) and (max-width: 110rem) {
+  body:has(#sidebar):has(.multicol):not(.editing) article.multicol {
+    max-width: 86rem;
+  }
+
+  body:has(#sidebar):has(.multicol):not(.editing) .multicol .body>.colseg,
+  body:has(#sidebar):has(.multicol):not(.editing) .multicol .body>h1,
+  body:has(#sidebar):has(.multicol):not(.editing) .multicol .body>h2,
+  body:has(#sidebar):has(.multicol):not(.editing) article.multicol>h1 {
+    margin-left: 0;
+  }
+
+  body:has(#sidebar):has(.multicol):not(.editing) .multicol .body>.margin,
+  body:has(#sidebar):has(.multicol):not(.editing) .multicol .body>.aside,
+  body:has(#sidebar):has(.multicol):not(.editing) .multicol .body>figure:has(.margin) {
+    float: left;
+    clear: left;
+    width: 12rem;
+    max-width: none;
+    /* From the text's left edge to the page's left edge: half the
+       centering difference plus the track and main's padding. */
+    margin: 0.3rem 0 1rem calc(50% - 50cqw - 13.25rem);
+  }
+}
+
+/* A shrink-wrapped figure (explicit image width) centers in the plain
+   layout; inside a column the centering looks adrift — left-align.
+   Floated figures keep their own margins (the text gap). */
+.multicol .colseg.cols figure:has(img[width]):not(:has(.left), :has(.right), :has(.margin)) {
+  margin-inline: 0;
 }
 
 .multicol .colseg {
   margin-bottom: 1rem;
 
+  h3,
+  h4,
+  h5,
+  h6 {
+    break-after: avoid-column;
+  }
+
   p,
   li {
     break-inside: avoid-column;
@@ -549,7 +814,11 @@ article dd {
   pre,
   blockquote,
   table,
-  dl {
+  ul,
+  ol,
+  dl,
+  .admonition,
+  .markdown-alert {
     break-inside: avoid;
   }
 }
@@ -569,10 +838,11 @@ article a:hover {
   color: var(--accent);
 }
 
-/* Blockquotes: inner paragraphs carry no margins (spacing comes from the
-   blockquote itself, bottom-only like everything else in articles). The
-   negative left margin pushes the bar out past the text edge, so quoted
-   text aligns with the surrounding paragraphs — same trick as code blocks. */
+/* Blockquotes: spacing comes from the blockquote itself (bottom-only like
+   everything else in articles); inner paragraphs keep only the gap between
+   them. The negative left margin pushes the bar out past the text edge, so
+   quoted text aligns with the surrounding paragraphs — same trick as code
+   blocks. */
 blockquote {
   margin: 0 0 1rem -0.5rem;
   padding: 0 0 0 0.25rem;
@@ -584,42 +854,149 @@ blockquote p {
   margin: 0;
 }
 
-/* Admonitions (markdown !!! note/warning/...): a lightweight callout in
-   the blockquote idiom — accent bar and a faint wash, recolored per type.
+blockquote p + p {
+  margin-top: 0.6rem;
+}
+
+/* Admonitions (markdown !!! note/warning/...) and GitHub-style alerts
+   (> [!NOTE] ...): a lightweight callout in the blockquote idiom — accent
+   bar and a faint wash, recolored per type, with a type emoji on the
+   title. The negative left margin pushes bar and wash out past the text
+   edge so the inner text aligns with surrounding paragraphs — same trick
+   as blockquotes and code blocks (margin-left = border + padding-left).
    Bottom-only margins like everything else in articles; inner paragraphs
    carry no margins of their own. */
-.admonition {
-  margin: 0 0 1rem;
+.admonition,
+.markdown-alert {
+  margin: 0 0 1rem -1.15rem;
   padding: 0.4rem 0.9rem;
   border-left: 0.25rem solid var(--admonition-color, var(--accent));
   border-radius: 0 0.3rem 0.3rem 0;
   background: color-mix(in srgb, var(--admonition-color, var(--accent)) 7%, transparent);
 }
 
-.admonition> :last-child {
+.admonition> :last-child,
+.markdown-alert> :last-child {
   margin-bottom: 0;
 }
 
-.admonition-title {
+.admonition-title,
+.markdown-alert-title {
   margin: 0 0 0.2rem;
   font-weight: 600;
   color: var(--admonition-color, var(--accent));
 }
 
+.admonition-title::before,
+.markdown-alert-title::before {
+  padding-right: 0.35em;
+}
+
+.admonition.note .admonition-title::before,
+.markdown-alert-note .markdown-alert-title::before {
+  content: "ℹ️";
+}
+
+.admonition.tip .admonition-title::before,
+.admonition.hint .admonition-title::before,
+.markdown-alert-tip .markdown-alert-title::before {
+  content: "✨";
+}
+
+.admonition.important .admonition-title::before,
+.markdown-alert-important .markdown-alert-title::before {
+  content: "❗";
+}
+
+.admonition.success .admonition-title::before {
+  content: "✅";
+}
+
+.admonition.warning .admonition-title::before,
+.markdown-alert-warning .markdown-alert-title::before {
+  content: "⚠️";
+}
+
+.admonition.caution .admonition-title::before,
+.markdown-alert-caution .markdown-alert-title::before {
+  content: "🔥";
+}
+
+.admonition.danger .admonition-title::before,
+.admonition.failure .admonition-title::before {
+  content: "⛔";
+}
+
 .admonition.tip,
 .admonition.important,
 .admonition.hint,
-.admonition.success {
+.admonition.success,
+.markdown-alert-tip,
+.markdown-alert-important {
   --admonition-color: var(--accent2);
 }
 
 .admonition.warning,
 .admonition.caution,
 .admonition.danger,
-.admonition.failure {
+.admonition.failure,
+.markdown-alert-warning,
+.markdown-alert-caution {
   --admonition-color: var(--accent3);
 }
 
+/* Side boxes: ::: aside is a muted floated box (consecutive asides stack
+   via clear: left); {.margin} / ::: margin is a plainer margin note, and
+   figures take {.margin} like {.left}. On multicol pages they float in
+   the composition's left side zone — or in the sidebar's track when the
+   layout reserves one (see the article section); on wide single-column
+   pages they lean into the left gutter (with the figure rules below);
+   otherwise they stay in-column left floats. Headings already clear
+   floats, so boxes never bleed into the next section. */
+.aside {
+  float: left;
+  clear: left;
+  width: 30%;
+  max-width: 20rem;
+  margin: 0.3rem 1.2rem 1rem 0;
+  padding: 0.6rem 0.9rem;
+  font-size: 0.9rem;
+  color: var(--muted);
+  background: color-mix(in srgb, var(--accent) 6%, transparent);
+  border-radius: 0.3rem;
+}
+
+.aside> :last-child,
+.margin> :last-child {
+  margin-bottom: 0;
+}
+
+/* A figure inside an aside spans the box to its borders (negative
+   margins matching the box's padding); the caption keeps the box's
+   padding for itself. Explicit-width images keep their shrink-wrap. */
+.aside>figure:not(:has(img[width])) {
+  width: auto;
+  margin: -0.6rem -0.9rem 1rem;
+}
+
+.aside>figure figcaption {
+  padding: 0.6rem 0.9rem 0;
+}
+
+.aside>figure:last-child figcaption {
+  padding-bottom: 0.6rem;
+}
+
+.margin {
+  float: left;
+  clear: left;
+  width: 30%;
+  max-width: 20rem;
+  margin: 0.3rem 1.2rem 1rem 0;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
 pre {
   overflow-x: auto;
   padding: 0.5rem 0.8rem;
@@ -633,10 +1010,15 @@ pre {
   position: relative;
 }
 
-/* Inline code integrates with the text, no box of its own */
-p code,
-li code {
-  font-size: 0.85em;
+/* Inline code integrates with the text, no box of its own. Instead of a
+   fixed em shrink (which can't fit every body/code font pairing — Fira
+   Code's x-height ratio 0.525 is taller than Source Sans 3's 0.478 yet
+   shorter than Inter's 0.546), font-size-adjust scales whatever code font
+   is in use so its x-height matches the body font's ratio. Browsers
+   without font-size-adjust get unadjusted 1em code, which is fine. */
+code {
+  font-family: var(--font-code);
+  font-size-adjust: ex-height var(--code-x-height);
 }
 
 /* Click-to-copy button (added by pagerite.js) */
@@ -665,11 +1047,6 @@ pre:hover .copy,
   color: var(--accent);
 }
 
-code {
-  font-family: var(--font-code);
-  font-size: 0.88em;
-}
-
 /* Tables separate by color, not lines: the header is a soft vertical
    gradient tinted with the theme's accent (themes can override the
    --table-head-* stops outright), body cells carry a very faint diagonal
@@ -781,6 +1158,31 @@ figure:has(img[width]) {
   width: fit-content;
 }
 
+/* {.margin} figures float left like {.left} ones — until they fall into
+   the side zone (see the composition rules up in the article section). */
+figure:has(.margin) {
+  float: left;
+  width: 30%;
+  max-width: 50%;
+  margin: 0.3rem 1em 1rem 0;
+}
+
+/* Wide single-column pages: margin boxes lean into the vacant left
+   gutter instead (below 104rem the gutter cannot hold the box, and while
+   editing the docked panel reshapes the gutters — in both they stay
+   plain floats). */
+@media (min-width: 104rem) {
+  body:not(.editing):not(:has(.multicol)) .body>.margin,
+  body:not(.editing):not(:has(.multicol)) .body>.aside,
+  body:not(.editing):not(:has(.multicol)) .body>figure:has(.margin) {
+    float: left;
+    clear: left;
+    width: 12rem;
+    max-width: none;
+    margin: 0.3rem 0 1rem -13.25rem;
+  }
+}
+
 /* .wide is full bleed: edge to edge of the viewport (or of the space right
    of the docked editor), while staying in flow so it keeps its vertical
    space. The article column is centered in the available space, so negative
@@ -791,52 +1193,73 @@ figure:has(img[width]) {
 
    The rules below re-anchor the bleed for the layouts where the article
    is not viewport-centered; each just overrides width/margin-inline, and
-   later rules win at equal specificity. */
-figure:has(.wide) {
+   later rules win at equal specificity. The analytics dashboard uses the
+   same breakout directly on its container (div.wide — it is the page's
+   whole content, not a figure), and code blocks via a trailing {.wide}
+   line (fence block attrs land on <pre> itself). */
+figure:has(.wide),
+div.wide,
+pre.wide {
   width: 100vw;
   max-width: none;
   margin-inline: calc(50% - 50vw);
-  /* Follow the docked editor's margin-left transition smoothly. */
-  transition: margin-left 0.25s ease;
 }
 
 /* Full bleed means edge to edge — no rounded corners. */
-figure:has(.wide) img {
+figure:has(.wide) img,
+pre.wide {
   border-radius: 0;
 }
 
-/* .wide on multicol pages: the article is not viewport-centered (no right
-   gutter), so the bleed anchors at the left gutter — the 1fr share of the
-   1fr + 4fr grid, i.e. 20vw — plus main's padding, and spans on to the
-   right viewport edge. */
-body:has(.multicol) figure:has(.wide) {
-  margin-inline: calc(-20vw - 1.25rem) 0;
-}
-
-/* Editing: shrink the bleed to the space right of the docked editor. */
-body.editing figure:has(.wide) {
+/* Editing: shrink the bleed to the space right of the docked editor. The
+   window keeps its overlay scrollbars while editing, so — unlike a classic
+   scrollbar — they take no layout space and the vw math stays exact.
+   Multicol pages measure the bleed from main instead (cqw rules below),
+   which insets for the editor automatically. */
+body.editing figure:has(.wide),
+body.editing div.wide,
+body.editing pre.wide {
   width: calc(100vw - var(--editor-w));
   margin-inline: calc(50% - (100vw - var(--editor-w)) / 2);
 }
 
-/* Editing + multicol: the left gutter is 1/5 of the space right of the
-   editor, and the bleed also crosses #content's 1rem editing gap plus
-   main's 1.25rem left padding (the gutter shrink from the padding roughly
-   cancels the rounding): −2rem in total. */
-body.editing:has(.multicol) figure:has(.wide) {
-  margin-inline: calc((100vw - var(--editor-w)) / -5 - 2rem) 0;
+/* Narrow single-column pages with a sidebar: below 102rem the symmetric
+   gutters can no longer both hold the 12rem sidebar, so #content reserves
+   it with a fixed left track (see the matching media query below) and the
+   article always starts at 12rem (+ main's 1.25rem padding) — the bleed
+   margin is a plain constant. Scoped by :has(#sidebar) since the sidebar
+   element is omitted entirely on pages without sub-navigation, and
+   excluded while editing, where the editing rules above apply instead.
+   (Multicol pages use the same fixed track below 110rem — their rules
+   are below.) */
+@media (max-width: 102rem) {
+  body:has(#sidebar):not(.editing):not(:has(.multicol)) figure:has(.wide),
+  body:has(#sidebar):not(.editing):not(:has(.multicol)) div.wide,
+  body:has(#sidebar):not(.editing):not(:has(.multicol)) pre.wide {
+    margin-inline: -13.25rem 0;
+  }
 }
 
-/* Narrow windows with a sidebar: below 102rem the symmetric gutters can no
-   longer both hold the 12rem sidebar, so #content reserves it with a fixed
-   left track (see the matching media query below) and the article always
-   starts at 12rem (+ main's 1.25rem padding) — the bleed margin is a plain
-   constant. Scoped by :has(#sidebar) since the sidebar element is omitted
-   entirely on pages without sub-navigation, and excluded while editing,
-   where the editing rules above apply instead. */
-@media (max-width: 102rem) {
-  body:has(#sidebar):not(.editing) figure:has(.wide) {
-    margin-inline: -13.25rem 0;
+/* .wide on multicol pages: the same edge-to-edge bleed, but measured from
+   main (the container) instead of the viewport — cqw includes the editor
+   inset automatically, so no editing override is needed. The 2.5rem
+   covers main's side padding. */
+body:has(.multicol) figure:has(.wide),
+body:has(.multicol) div.wide,
+body:has(.multicol) pre.wide {
+  width: calc(100cqw + 2.5rem);
+  margin-inline: calc(50% - 50cqw - 1.25rem);
+}
+
+/* Multicol with a sidebar track (≤110rem, see #content): main starts
+   12rem in, so the bleed extends left past the track to the true viewport
+   edge — sliding under the translucent sidebar. */
+@media (max-width: 110rem) {
+  body:has(#sidebar):has(.multicol):not(.editing) figure:has(.wide),
+  body:has(#sidebar):has(.multicol):not(.editing) div.wide,
+  body:has(#sidebar):has(.multicol):not(.editing) pre.wide {
+    width: calc(100cqw + 14.5rem);
+    margin-inline: calc(50% - 50cqw - 13.25rem) 0;
   }
 }
 
@@ -873,31 +1296,60 @@ article h2 {
 
 /* Narrow windows with a sidebar: below 102rem the symmetric gutters can no
    longer both hold the 12rem sidebar, so reserve its space with a fixed
-   left track instead of letting it overlap the article. The article then
-   always starts at 12rem (+ main's 1.25rem padding), which the matching
-   .wide breakout rule in the images section relies on. Scoped by
-   :has(#sidebar) since the sidebar element is omitted entirely on pages
-   without sub-navigation. */
+   left track instead of letting it overlap the article (multicol pages use
+   this same track at every width — see the #content rules above). The
+   article then always starts at 12rem (+ main's 1.25rem padding), which
+   the matching .wide breakout rule in the images section relies on.
+   Scoped by :has(#sidebar) since the sidebar element is omitted entirely
+   on pages without sub-navigation. */
 @media (max-width: 102rem) {
   body:has(#sidebar):not(.editing) #content {
     grid-template-columns: 12rem minmax(0, 78rem) minmax(0, 1fr);
   }
-
-  /* Long articles stay fluid here too: same 12rem reservation for the
-     sidebar, then the article takes everything to the right viewport
-     edge. The article's left edge stays at 12rem either way, so the
-     constant .wide breakout margin remains correct. */
-  body:has(#sidebar):has(.multicol):not(.editing) #content {
-    grid-template-columns: 12rem minmax(0, 1fr);
-  }
 }
 
 /* Phones and other narrow viewports: single-column layout with the
    sidebar lifted above the article as a wrapping link strip, and no
-   floated figures — .left/.right fall back to plain centered figures
-   (explicit img widths still shrink-wrap), while .wide keeps its full
-   viewport bleed. */
+   floats at all — .left/.right/.margin figures fall back to plain
+   centered figures (explicit img widths still shrink-wrap), margin boxes
+   go full width, while .wide keeps its full viewport bleed. */
 @media (max-width: 48rem) {
+
+  /* Nav type shrinks fluidly as space runs out. The nav font-size is
+     em-based both in base and in every theme override, so scaling the
+     banner's font-size (nothing else in the banner is em-sized — brand and
+     gaps use rem) reaches the nav through all themes with a single rule.
+     2.6vw crosses 1rem at ≈38.5rem, so only genuinely narrow viewports
+     shrink. */
+  #banner {
+    font-size: clamp(0.65rem, 2.6vw, 1rem);
+  }
+
+  /* Tighter margins/padding/gaps: the 1.25rem side gutter is wasted space
+     on a phone. */
+  #brand {
+    margin-inline: 0.6rem;
+  }
+
+  #nav {
+    padding: 0.25rem 0.6rem;
+  }
+
+  #nav ul {
+    gap: 0.15rem 0.9rem;
+  }
+
+  /* The editor panel takes over the entire viewport: no space left for
+     the banner or the page content (main.js pins its top to 0 at these
+     widths). */
+  body.editing #content {
+    margin-left: 0;
+  }
+
+  .editor-host {
+    width: 100vw;
+  }
+
   #content {
     display: flex;
     flex-direction: column;
@@ -909,34 +1361,51 @@ article h2 {
     max-height: none;
     overflow-y: visible;
     border-radius: 0;
-    padding: 0.5rem 1rem;
+    padding: 0.4rem 0.8rem;
+    /* Smaller type: the horizontal link strip fits roughly a third more
+       items per line. The nested-list gaps below are em-based and shrink
+       along. */
+    font-size: 0.8rem;
   }
 
-  #sidebar ul {
+  /* Only the main level becomes a horizontal wrapping strip; submenus stay
+     vertical blocks attached under their parent item. */
+  #sidebar>ul {
     flex-direction: row;
     flex-wrap: wrap;
-    gap: 0.5rem 1.2rem;
+    gap: 0.3rem 0.75rem;
   }
 
   figure:has(.right),
-  figure:has(.left) {
+  figure:has(.left),
+  figure:has(.margin) {
     float: none;
     width: 100%;
     max-width: none;
     margin: 0 auto 1.5rem;
   }
 
+  /* Margin boxes go full width too — no room for side floats on a
+     phone. */
+  .aside,
+  .margin {
+    float: none;
+    width: auto;
+    max-width: none;
+    margin: 0 0 1rem;
+  }
+
   /* An explicit img width still shrink-wraps the figure (redeclared: this
      block comes after the desktop rule at equal specificity). */
   figure:has(img[width]) {
     width: fit-content;
   }
 
-  /* The 102rem sidebar/multicol .wide margins assume a left sidebar
-     column; with the sidebar on top the article is viewport-wide and the
-     plain centered bleed applies again. */
-  body:has(#sidebar):not(.editing) figure:has(.wide),
-  body:has(.multicol) figure:has(.wide) {
+  /* The single-column sidebar .wide margins assume a left sidebar column;
+     with the sidebar on top the article is viewport-wide and the plain
+     centered bleed applies again. (Multicol pages need no override: their
+     cqw bleed is exact at any width.) */
+  body:has(#sidebar):not(.editing):not(:has(.multicol)) figure:has(.wide) {
     margin-inline: calc(50% - 50vw);
   }
 }
@@ -990,11 +1459,11 @@ footer {
   padding: 0;
 }
 
-/* Rotating-cube page transition, adapted from termotohtori.fi.
-   FRAGILE: do not tweak; the view-transition pseudo-tree is picky. */
+/* Rotating-cube page transition. */
 ::view-transition {
   perspective: 1000px;
   inset: 0;
+  background: color-mix(var(--bg) 50%, black 50%);
 }
 
 ::view-transition-group(root),

frontend/src/main.js

@@ -22,6 +22,57 @@ let host = null
 let app = null
 let savedTitle = null
 let visible = false
+let slideAnimation = null
+
+const SLIDE_MS = 250  // keep in sync with the panel slide in pagerite.css
+
+// The layout switches instantly when .editing toggles — no margin/width
+// transitions anywhere, so viewport resizes (and the vw-based .wide bleed)
+// always stay instant. The visible slide is a compositor-only FLIP
+// transform on #content, running in sync with the panel's own slide
+// (editor-slide-in / .closing in pagerite.css): both move by --editor-w
+// over the same duration and easing, so .wide's left edge tracks the
+// panel's right edge exactly throughout.
+function setEditingClass(enable) {
+  const content = document.getElementById('content')
+  const before = content.getBoundingClientRect().left
+  document.body.classList.toggle('editing', enable)
+  const delta = before - content.getBoundingClientRect().left
+  slideAnimation?.cancel()
+  if (delta) {
+    slideAnimation = content.animate(
+      { transform: [`translateX(${delta}px)`, 'translateX(0)'] },
+      { duration: SLIDE_MS, easing: 'ease' }
+    )
+  }
+}
+
+// The panel is fixed to the viewport's left edge (pagerite.css) but tracks
+// the page: its top is the banner's bottom edge while the banner is visible
+// (= #content's top edge), and the viewport top once the banner has
+// scrolled away. The window keeps scrolling normally while editing.
+// Below 48rem the panel covers the entire viewport (pagerite.css), so its
+// top stays 0 regardless of the banner.
+const narrow = matchMedia('(max-width: 48rem)')
+function trackPanelTop() {
+  const content = document.getElementById('content')
+  if (host && content) {
+    host.style.top = narrow.matches
+      ? '0px'
+      : `${Math.max(0, content.getBoundingClientRect().top)}px`
+  }
+}
+
+function startTrackingPanel() {
+  trackPanelTop()
+  addEventListener('scroll', trackPanelTop, { passive: true })
+  addEventListener('resize', trackPanelTop)
+}
+
+function stopTrackingPanel() {
+  removeEventListener('scroll', trackPanelTop)
+  removeEventListener('resize', trackPanelTop)
+}
 
 export function openEditor(path, { mode = 'page' } = {}) {
   if (app) {
@@ -36,9 +87,13 @@ export function openEditor(path, { mode = 'page' } = {}) {
   savedTitle = document.title
   host = document.createElement('div')
   host.className = 'editor-host'
-  // Docked inside #content: below the banner, next to the article only.
-  document.getElementById('content').prepend(host)
-  document.body.classList.add('editing')
+  // Appended to <body>, not #content: the open/close slide transforms
+  // #content (setEditingClass), and a transformed element becomes the
+  // containing block for fixed-position descendants — the panel would be
+  // dragged along with the content instead of sliding on its own.
+  document.body.append(host)
+  setEditingClass(true)
+  startTrackingPanel()
   // Which tab is active; pagerite.js uses this to decide whether a pen click
   // closes the panel or switches tabs.
   document.body.dataset.editorMode = mode
@@ -64,7 +119,8 @@ function showEditor() {
   savedTitle = document.title
   host.style.display = ''
   host.firstElementChild?.classList.remove('closing')
-  document.body.classList.add('editing')
+  setEditingClass(true)
+  startTrackingPanel()
   visible = true
   dispatchEvent(new CustomEvent('pagerite:editor-shown'))
 }
@@ -72,7 +128,8 @@ function showEditor() {
 export function closeEditor() {
   if (!visible) return
   visible = false
-  document.body.classList.remove('editing')
+  stopTrackingPanel()
+  setEditingClass(false)
   // dataset.editorMode is kept while hidden: the tabs use it to tell whether
   // a pagerite:editor-shown event targets them.
   // Slide the panel out in sync with the page shifting back, then hide it.
@@ -80,6 +137,9 @@ export function closeEditor() {
   const h = host
   setTimeout(() => { h.style.display = 'none' }, 250)
   dispatchEvent(new CustomEvent('pagerite:editor-hidden'))
+  // The editor may have dropped the prefetch cache; warm it again for the
+  // now-final page so navigation stays instant.
+  dispatchEvent(new CustomEvent('pagerite:preload-pages'))
   // Restore the server-rendered title for the current URL. Re-fetching makes
   // sure a brand change in the site editor or an in-place navigation leaves
   // the correct public title behind.

frontend/src/pagerite.js

@@ -53,8 +53,22 @@ import "overlayscrollbars/overlayscrollbars.css";
   // pageshow handler below re-probes auth to refresh the pens).
   let ssoAvailable = false;
   let isAdmin = false;
+  let authReady = false;
   let editorMeta = null;
 
+  // Asset URLs for the on-demand bundles. Dev renders them as
+  // pagerite:* meta tags (Vite dev-server URLs); production inlines all
+  // page assets and carries the on-demand URLs in a JSON script instead.
+  const assets = (() => {
+    const el = document.getElementById("pagerite-assets");
+    if (el) return JSON.parse(el.textContent);
+    const map = {};
+    for (const m of document.querySelectorAll('meta[name^="pagerite:"]')) {
+      map[m.name] = m.content;
+    }
+    return map;
+  })();
+
   function makePen(mode) {
     const btn = document.createElement("button");
     btn.type = "button";
@@ -93,7 +107,19 @@ import "overlayscrollbars/overlayscrollbars.css";
     return a;
   }
 
+  function removePens() {
+    document.querySelectorAll(".editor-pens, #main article button.edit-link")
+      .forEach((el) => el.remove());
+  }
+
   function renderAuthUi() {
+    // Always start from a clean slate: if the auth probe is still running we
+    // must not show any admin UI, and if it came back negative we must drop
+    // pens that may have been injected while the browser cache made us look
+    // authenticated.
+    removePens();
+    if (!authReady) return;
+
     // Editing is open for admins and, as a dev/no-proxy fallback, when no
     // Paskia SSO is detected at all.
     const canEdit = isAdmin || !ssoAvailable;
@@ -102,8 +128,6 @@ import "overlayscrollbars/overlayscrollbars.css";
     const onAnalytics = currentPath === "/_a";
     const banner = document.getElementById("page-banner");
     if (banner) {
-      const old = banner.parentElement.querySelector(".editor-pens");
-      if (old) old.remove();
       const pens = document.createElement("div");
       pens.className = "editor-pens";
       if (canEdit && !onAnalytics) {
@@ -124,11 +148,14 @@ import "overlayscrollbars/overlayscrollbars.css";
   }
 
   async function setupAuth() {
-    const src = document.querySelector('meta[name="pagerite:editor-src"]')?.content;
-    if (!src) { pingEntryOnce(); return; }
+    authReady = false;
+    renderAuthUi();
+
+    const src = assets["pagerite:editor-src"];
+    if (!src) { authReady = true; renderAuthUi(); pingEntryOnce(); return; }
     editorMeta = {
       src,
-      css: document.querySelector('meta[name="pagerite:editor-css"]')?.content,
+      css: assets["pagerite:editor-css"],
     };
 
     // Detect whether Paskia SSO is available on this site.
@@ -147,7 +174,29 @@ import "overlayscrollbars/overlayscrollbars.css";
       // No auth proxy / dev.
     }
 
+    if (isAdmin) {
+      // Teach the backend the site's public origin (used for absolute
+      // social/canonical URLs): unlike request headers, location.origin
+      // reflects the real scheme and host even behind reverse proxies.
+      fetch("/_api/site-url", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ url: location.origin }),
+      }).catch(() => {});
+      // Warm the cache with the editor bundle: the hashed asset is
+      // immutable, so preloading costs nothing and the pens then open
+      // instantly. The analytics page has no editor.
+      if (currentPath !== "/_a" && !import.meta.env.DEV) {
+        const preload = document.createElement("link");
+        preload.rel = "modulepreload";
+        preload.href = src;
+        document.head.append(preload);
+      }
+    }
+
+    authReady = true;
     renderAuthUi();
+    placeEditPen();
     pingEntryOnce();
   }
 
@@ -186,9 +235,26 @@ import "overlayscrollbars/overlayscrollbars.css";
       btn.textContent = "copy";
       btn.addEventListener("click", async () => {
         const code = pre.querySelector("code");
-        await navigator.clipboard.writeText(
-          (code || pre).textContent.replace(/\n$/, ""),
-        );
+        const text = (code || pre).textContent.replace(/\n$/, "");
+        // navigator.clipboard exists only in secure contexts (https or
+        // localhost); viewing over plain http needs the textarea fallback.
+        try {
+          if (navigator.clipboard) {
+            await navigator.clipboard.writeText(text);
+          } else {
+            const ta = document.createElement("textarea");
+            ta.value = text;
+            ta.style.cssText = "position:fixed;opacity:0";
+            document.body.append(ta);
+            ta.select();
+            document.execCommand("copy");
+            ta.remove();
+          }
+        } catch {
+          btn.textContent = "failed";
+          setTimeout(() => (btn.textContent = "copy"), 1500);
+          return;
+        }
         btn.textContent = "copied";
         btn.classList.add("copied");
         setTimeout(() => {
@@ -230,44 +296,7 @@ import "overlayscrollbars/overlayscrollbars.css";
     // buttons; re-add whichever auth UI is appropriate for this session.
     renderAuthUi();
     placeEditPen();
-    // Multi-column layout only when there is enough text to justify it.
-    // Split the body into columned segments: h1s, h2s and wide figures are
-    // full-width separators and never go inside columns.
-    const article = main.querySelector("article");
-    if (article) {
-      const body = article.querySelector(".body");
-      article.classList.toggle(
-        "multicol",
-        !!body && body.textContent.trim().length > 1800,
-      );
-      if (body && article.classList.contains("multicol")
-          && !body.querySelector(".colseg")) {
-        // h1s, h2s and anything holding a wide image are full-width
-        // separators
-        const isSeparator = (el) =>
-          el.tagName === "H1" || el.tagName === "H2"
-          || el.querySelector("img.wide") !== null;
-        let seg = null;
-        for (const el of [...body.children]) {
-          if (isSeparator(el)) {
-            seg = null;
-            body.append(el);
-          } else {
-            if (!seg) {
-              seg = document.createElement("div");
-              seg.className = "colseg";
-              body.append(seg);
-            }
-            seg.append(el);
-          }
-        }
-        // Columns are per section: only segments with enough text get them,
-        // so a short ingress or a brief section stays single-column.
-        for (const s of body.querySelectorAll(".colseg")) {
-          s.classList.toggle("cols", s.textContent.trim().length > 600);
-        }
-      }
-    }
+    fitNav();
     if (reduceMotion.matches) return;
     for (const el of main.querySelectorAll(
       "h2, h3, figure, img, pre, blockquote, table, dl, .task-list-item",
@@ -285,14 +314,32 @@ import "overlayscrollbars/overlayscrollbars.css";
   // internal link is fetched exactly once, and navigation is served from
   // memory with no fetch at all. Editor re-renders (swapdoc.loadPlain)
   // announce their fresh copies via pagerite:page-fetched, keeping the
-  // cache in sync after edits.
+  // cache in sync after edits. The current page is NOT preloaded: we just
+  // received it as the document (re-fetching would be redundant, and
+  // browser heuristics may send it without if-none-match, defeating the
+  // conditional request); it enters the cache when navigated to.
   const pageCache = new Map(); // pathname -> HTML text
   addEventListener("pagerite:page-fetched", (ev) => {
     pageCache.set(new URL(ev.detail.url, location.href).pathname, ev.detail.html);
   });
 
+  // Editors mutate site-wide state (theme, structure, headings, banners),
+  // which can change the rendered HTML of every cached page. Drop the whole
+  // cache so stale prefetches are never served; the current page is re-fetched
+  // by the editor's own loadPlain and re-cached afterwards. Re-preloading is
+  // deferred until the editor panel closes to avoid hammering the server.
+  addEventListener("pagerite:drop-page-cache", () => {
+    pageCache.clear();
+  });
+
+  // When the editor panel closes, warm the cache again for the visible links
+  // on the (now final) page so subsequent navigation stays instant.
+  addEventListener("pagerite:preload-pages", () => {
+    preload();
+  });
+
   function preload() {
-    const urls = new Set([location.pathname]);
+    const urls = new Set();
     for (const a of document.querySelectorAll(
       '#nav a[href^="/"], #sidebar a[href^="/"], #main a[href^="/"]',
     )) {
@@ -300,7 +347,10 @@ import "overlayscrollbars/overlayscrollbars.css";
     }
     for (const url of urls) {
       if (pageCache.has(url)) continue;
-      fetch(url)
+      // x-pagerite-preload: idle cache warm-up, not a page view — the
+      // server excludes these GETs from analytics (the ping sent on actual
+      // navigation does the counting).
+      fetch(url, { headers: { "x-pagerite-preload": "1" } })
         .then((r) => (r.ok && (r.headers.get("content-type") || "").includes("text/html")
           ? r.text() : ""))
         .then((html) => { if (html) pageCache.set(url, html); })
@@ -322,47 +372,136 @@ import "overlayscrollbars/overlayscrollbars.css";
   // themes for their own effects (e.g. the purple sun rising faster than
   // the drift). Event-driven only: perfectly still when the page is idle.
   if (!reduceMotion.matches) {
-    let ticking = false;
+    // rAF loop that eases the value toward the live scroll position. Reading
+    // scrollY every frame (rather than only on scroll events) also picks up
+    // the in-between positions of Chrome/macOS momentum scrolling, whose
+    // scroll events fire late and coarsely. The loop idles once settled.
+    let value = Math.min(scrollY * 0.1, 30);
+    let running = false;
     const drift = () => {
-      ticking = false;
-      document.documentElement.style.setProperty(
-        "--pry", `${Math.min(scrollY * 0.1, 30)}px`,
-      );
+      const target = Math.min(scrollY * 0.1, 30);
+      value += (target - value) * 0.12;
+      if (Math.abs(target - value) < 0.05) {
+        value = target;
+        running = false;
+      }
+      document.documentElement.style.setProperty("--pry", `${value}px`);
+      if (running) requestAnimationFrame(drift);
     };
     addEventListener("scroll", () => {
-      if (!ticking) {
-        ticking = true;
+      if (!running) {
+        running = true;
         requestAnimationFrame(drift);
       }
     }, { passive: true });
   }
 
   // --- Analytics pings ---------------------------------------------------
-  // Fire-and-forget POST /_a {fr, to}: on the initial page load (starts the
+  // Fire-and-forget POSTs to /_a with the fields as query parameters (a
+  // beacon can carry no body, and query args show in server logs next to
+  // the document GET they refer to): on the initial page load (starts the
   // visit — the server counts nothing from the document GET alone), for
-  // internal fetch-navigations and for external https exits. Excluded:
-  // back/forward (popstate never pings) and everything while we know the
-  // user is an admin — but only when SSO is actually in use; with no auth
-  // (dev/test) "admin" is everyone's state and nothing would be recorded —
-  // or has the editor open (admin noise, not visits). The analytics page
-  // itself (/_a) is also excluded even though fetch-navigation treats it like
-  // a normal article.
+  // internal fetch-navigations, for external https exits, and on window
+  // close. ``read`` is the active time (ms) spent on ``fr``.
+  // Reading time pauses after 1 minute of inactivity and resumes on the
+  // next mouse/touch/scroll/keyboard event.
+  // Excluded: back/forward (popstate never pings), everything while the
+  // editor is open (body.editing — admin noise, not visits), and
+  // navigations TO the analytics page (/_a — admin machinery, and the
+  // server rejects it as a ping target anyway). Navigations AWAY from /_a
+  // must ping: load() already fetched the target page without the preload
+  // header, and without the ping that GET would flush to the crawler list.
+  // Admins (when SSO is actually in use — with no auth proxy "admin" is
+  // everyone's state) ping normally but with hide=1: the server then
+  // records nothing and scrubs any session the same browser accumulated
+  // before logging in, so admins never show up as visits or crawlers.
   // See docs/analytics.md.
-  function ping(to, fr = currentPath) {
-    if ((ssoAvailable && isAdmin) || document.body.classList.contains("editing")
-        || to === "/_a" || fr === "/_a") return;
+
+  // fetch wrapper: every key of ``params`` becomes a query arg on /_a
+  // (falsy values are omitted). Admins get hide=1. ``beacon`` uses
+  // sendBeacon when available, for unload-time pings.
+  function pingFetch(params, { beacon = false } = {}) {
+    const query = new URLSearchParams();
+    if (ssoAvailable && isAdmin) params = { ...params, hide: 1 };
+    for (const [key, value] of Object.entries(params)) {
+      if (value) query.set(key, value);
+    }
+    const url = `/_a?${query}`;
     try {
-      fetch("/_a", {
-        method: "POST",
-        keepalive: true,
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({ fr, to }),
-      });
+      if (beacon && navigator.sendBeacon) {
+        navigator.sendBeacon(url);
+      } else {
+        fetch(url, { method: "POST", keepalive: true });
+      }
     } catch { /* analytics must never break navigation */ }
   }
 
+  function ping({ to, fr = currentPath, read = 0, beacon = false } = {}) {
+    if (document.body.classList.contains("editing")) return;
+    if (to === "/_a") return;
+    pingFetch({ fr, to, read: Math.round(read / 1000) }, { beacon });
+  }
+
+  // Active reading time for the current page. The clock stops after 1 minute
+  // without activity and restarts on the next mouse/touch/scroll/keyboard
+  // event.
+  const INACTIVE_MS = 60_000;
+  let readStart = performance.now();
+  let readElapsed = 0;
+  let reading = true;
+  let readInactivityTimer = null;
+  let closePingedFor = null;
+
+  function markReadActivity() {
+    if (!reading) {
+      reading = true;
+      readStart = performance.now();
+    }
+    clearTimeout(readInactivityTimer);
+    readInactivityTimer = setTimeout(() => {
+      if (reading) {
+        readElapsed += performance.now() - readStart;
+        reading = false;
+      }
+    }, INACTIVE_MS);
+  }
+
+  function takeReadTime() {
+    if (reading) {
+      readElapsed += performance.now() - readStart;
+      readStart = performance.now();
+    }
+    const ms = Math.max(0, Math.round(readElapsed));
+    readElapsed = 0;
+    return ms;
+  }
+
+  function resetReadTime() {
+    readElapsed = 0;
+    reading = true;
+    readStart = performance.now();
+    clearTimeout(readInactivityTimer);
+  }
+
+  function sendClosePing() {
+    if (closePingedFor === currentPath) return;
+    closePingedFor = currentPath;
+    const read = takeReadTime();
+    if (Math.round(read / 1000) <= 0) return;
+    ping({ read, beacon: true });
+  }
+
+  for (const ev of ["mousemove", "mousedown", "touchstart", "touchmove", "scroll", "keydown"]) {
+    addEventListener(ev, markReadActivity, { passive: true });
+  }
+  addEventListener("pagehide", sendClosePing);
+
   // The initial page load pings too — it is what starts the visit and
   // counts the entry page view (the document GET alone records nothing).
+  // It carries only ``to``: the server attributes the entry to the referer
+  // it saw on the document GET (unavailable to JS once loaded), and an
+  // ``fr`` equal to ``to`` would log a bogus self-transition when a
+  // session already exists (e.g. a second tab).
   // Sent once per load, after the auth probes so the admin gate applies;
   // the pageshow re-probe must not ping again. Reloads are not visits:
   // pinging them would double-count the view and log a self-transition.
@@ -372,34 +511,44 @@ import "overlayscrollbars/overlayscrollbars.css";
     entryPinged = true;
     const nav = performance.getEntriesByType?.("navigation")[0];
     if (nav ? nav.type === "reload" : performance.navigation?.type === 1) return;
-    ping(currentPath);
+    ping({ to: currentPath, fr: "" });
   }
 
   // --- Analytics page mount/unmount --------------------------------------
   // The analytics page is a normal page whose body is rendered by the server
-  // but whose content is a Vue app. We load the entry module on demand so the
-  // analytics bundle is only fetched when visiting /_a, and unmount the app
-  // before swapping away so Vue teardown runs cleanly.
-  let analyticsUnmount = null;
-
+  // but whose content is a Vue app. In dev the entry module is imported from
+  // the Vite dev server on demand; in production it is inlined into the /_a
+  // page as script#pagerite-js-analytics, which a fetch-navigation swap does
+  // not execute — re-create the element so the fresh module auto-mounts on
+  // #analytics-app (see analytics-main.js). The module exposes its unmount
+  // as window.__pageriteAnalyticsUnmount.
   function teardownAnalytics() {
-    analyticsUnmount?.();
-    analyticsUnmount = null;
+    // Remove even the server-rendered script element so a later return to
+    // /_a re-mounts from a fresh copy (the module has torn itself down).
+    document.getElementById("pagerite-js-analytics")?.remove();
+    window.__pageriteAnalyticsUnmount?.();
+    window.__pageriteAnalyticsUnmount = null;
   }
 
   async function mountAnalytics(doc) {
-    const src = doc.querySelector('meta[name="pagerite:analytics-src"]')?.content;
-    if (!src) {
-      teardownAnalytics();
+    if (!doc.getElementById("analytics-app")) return;
+    // Already mounted: on a full /_a load the inline script has run.
+    if (document.getElementById("pagerite-js-analytics")) return;
+    const inline = doc.getElementById("pagerite-js-analytics");
+    if (inline) {
+      const s = document.createElement("script");
+      for (const a of inline.attributes) s.setAttribute(a.name, a.value);
+      s.textContent = inline.textContent;
+      document.body.append(s);
       return;
     }
     try {
-      const mod = await import(/* @vite-ignore */ src);
+      // Dev: the cached module auto-mounts only on its first evaluation,
+      // so call mount() explicitly for repeat visits (it no-ops when the
+      // app is already up).
+      const mod = await import(/* @vite-ignore */ assets["pagerite:analytics-src"]);
       const container = document.getElementById("analytics-app");
-      if (container) {
-        mod.mount(container);
-        analyticsUnmount = mod.unmount;
-      }
+      if (container) mod.mount(container);
     } catch (e) {
       console.error("analytics mount failed:", e);
     }
@@ -408,14 +557,17 @@ import "overlayscrollbars/overlayscrollbars.css";
   // --- Fetch navigation ------------------------------------------------
   async function load(url, push = true, back = false) {
     // Navigating with the editor open closes it; unsaved edits are lost
-    // (the region swap discards the previewed changes anyway).
-    if (document.body.classList.contains("editing")) {
+    // (the region swap discards the previewed changes anyway). Cache must be
+    // bypassed for this navigation because the editor may have invalidated
+    // the prefetched copies of other pages.
+    const editing = document.body.classList.contains("editing");
+    if (editing) {
       editorModule?.then((m) => m.closeEditor());
     }
     teardownAnalytics();
     let doc;
     let finalUrl = url;
-    const cached = pageCache.get(new URL(url, location.href).pathname);
+    const cached = !editing && pageCache.get(new URL(url, location.href).pathname);
     if (cached) {
       doc = new DOMParser().parseFromString(cached, "text/html");
     } else {
@@ -426,8 +578,8 @@ import "overlayscrollbars/overlayscrollbars.css";
         // Reflect any redirect the server issued.
         if (res.redirected) finalUrl = res.url;
         const html = await res.text();
-        // Populate the cache too, or the post-swap preload (which includes
-        // location.pathname) would fetch the very page we just loaded again.
+        // Populate the cache too, so returning here (back/forward, or a
+        // self-link in the nav) is served from memory.
         pageCache.set(new URL(finalUrl, location.href).pathname, html);
         doc = new DOMParser().parseFromString(html, "text/html");
       } catch {
@@ -456,27 +608,47 @@ import "overlayscrollbars/overlayscrollbars.css";
       } else if (oldSidebar) {
         oldSidebar.remove();
       }
-      // Site-wide custom CSS lives in <head id="pagerite-user"> and must be
-      // kept in sync across fetch-navigations. It is kept last in <head>:
-      // in dev Vite injects the base stylesheet after the server-rendered
-      // tag, and equal-specificity :root rules are decided by order.
-      const oldUserStyle = document.getElementById("pagerite-user");
-      const newUserStyle = doc.getElementById("pagerite-user");
-      if (oldUserStyle && newUserStyle) {
-        oldUserStyle.textContent = newUserStyle.textContent;
-        document.head.appendChild(oldUserStyle);
-      } else if (newUserStyle) {
-        document.head.appendChild(document.importNode(newUserStyle, true));
-      } else if (oldUserStyle) {
-        oldUserStyle.remove();
+      // Stylesheets live in <head> with stable ids — links in dev, inline
+      // <style> elements in production — and must follow the swap: the
+      // analytics sheet exists on /_a only, and theme/banner/custom CSS
+      // may have changed since this page was loaded. Diff by id, keeping
+      // the fresh document's order; unchanged sheets keep their elements
+      // so their @keyframes are never torn down. Editor-injected sheets
+      // (data-pagerite, no id) and Vite's dev styles (no id) are left
+      // alone. Mirrors the head sync in swapdoc.js.
+      const sel = 'link[rel="stylesheet"][id], style[id]';
+      const fresh = [...doc.head.querySelectorAll(sel)];
+      const freshIds = new Set(fresh.map((el) => el.id));
+      for (const el of [...document.head.querySelectorAll(sel)]) {
+        if (!freshIds.has(el.id)) el.remove();
       }
+      let anchor = null;
+      for (const el of fresh) {
+        const cur = document.getElementById(el.id);
+        if (cur && cur.outerHTML === el.outerHTML) {
+          anchor = cur;
+          continue;
+        }
+        const imported = document.importNode(el, true);
+        if (cur) cur.replaceWith(imported);
+        else if (anchor) anchor.after(imported);
+        else {
+          const base = document.getElementById("pagerite-base");
+          if (base) base.after(imported);
+          else document.head.append(imported);
+        }
+        anchor = imported;
+      }
+      // Custom CSS must stay last: equal-specificity :root rules (font
+      // variables) are decided by order, and in dev Vite injects the base
+      // stylesheet after the server-rendered tag.
+      const userStyle = document.getElementById("pagerite-user");
+      if (userStyle) document.head.appendChild(userStyle);
       document.title = doc.title;
       // Banners may contain scripts (canvas etc.), content pages may too.
       runScripts(document.getElementById("page-banner"));
       runScripts(document.getElementById("main"));
       applyEffects();
-      // The fetched doc carries the analytics meta; the live document's
-      // <head> is never swapped, so querying it would never find the entry.
       mountAnalytics(doc);
     };
     // Rotating cube page transition (see the FRAGILE block in pagerite.css);
@@ -538,7 +710,10 @@ import "overlayscrollbars/overlayscrollbars.css";
     if (url.origin !== location.origin) {
       // External link: the browser navigates; record the full https URL so
       // different links to the same domain stay distinct in analytics.
-      if (url.protocol === "https:") ping(url.href);
+      if (url.protocol === "https:") {
+        closePingedFor = currentPath;
+        ping({ to: url.href, read: takeReadTime() });
+      }
       return;
     }
     // Same-page anchor links (footnotes etc.): let the browser handle them
@@ -550,7 +725,12 @@ import "overlayscrollbars/overlayscrollbars.css";
     ev.preventDefault();
     // Capture the source now: load() updates currentPath before pinging.
     const from = currentPath;
-    load(url).then((ok) => { if (ok) ping(url.pathname, from); });
+    load(url).then((ok) => {
+      if (!ok) return;
+      closePingedFor = null;
+      ping({ to: url.pathname, fr: from, read: takeReadTime() });
+      resetReadTime();
+    });
   });
 
   addEventListener("popstate", () => {
@@ -621,6 +801,44 @@ import "overlayscrollbars/overlayscrollbars.css";
     fit();
   }
 
+  // --- Nav condense-to-fit -------------------------------------------------
+  // The top nav stays on one row even on too-narrow screens: first the link
+  // gaps shrink, then the nav's side padding, and only in extreme cases the
+  // font size. #nav is replaced on fetch-navigation swaps, so this re-runs
+  // from applyEffects (fresh elements each time); CSS keeps flex-wrap: wrap
+  // as the no-JS fallback.
+  function fitNav() {
+    const nav = document.getElementById("nav");
+    const ul = nav?.querySelector("ul");
+    if (!ul) return;
+    // Restore the themed defaults before measuring.
+    nav.style.fontSize = "";
+    nav.style.paddingInline = "";
+    ul.style.columnGap = "";
+    ul.style.flexWrap = "nowrap";
+    const overflow = () => ul.scrollWidth - ul.clientWidth;
+    if (overflow() <= 0) return;
+    // 1) shrink the gaps between items (down to a fifth of the themed gap)
+    const gap = parseFloat(getComputedStyle(ul).columnGap) || 0;
+    const joints = Math.max(ul.children.length - 1, 1);
+    if (gap > 0) {
+      ul.style.columnGap = `${Math.max(0.2 * gap, gap - overflow() / joints)}px`;
+    }
+    // 2) shrink the nav's side padding (down to 0.4x)
+    if (overflow() > 0) {
+      const pad = parseFloat(getComputedStyle(nav).paddingInlineStart) || 0;
+      nav.style.paddingInline = `${Math.max(0.4 * pad, pad - overflow() / 2)}px`;
+    }
+    // 3) shrink the font to fit what remains
+    if (overflow() > 0) {
+      const fs = parseFloat(getComputedStyle(nav).fontSize);
+      nav.style.fontSize = `${fs * ul.clientWidth / ul.scrollWidth}px`;
+    }
+  }
+
+  addEventListener("resize", fitNav);
+  document.fonts?.ready.then(fitNav);
+
   setupAuth();
   applyEffects();
   mountAnalytics(document);

frontend/src/swapdoc.js

@@ -3,6 +3,14 @@
 // Used by BannerEditor (banner design changes), SiteEditor (theme changes)
 // and StructureEditor (tree navigation).
 
+// Drop the public page runtime's in-memory prefetch cache. Editors call this
+// whenever a site-wide or page change invalidates the cached HTML of other
+// pages (theme, headings, structure, banner, etc.). The cache is rebuilt by
+// re-preloading visible links once the editor panel closes.
+export function dropPageCache() {
+  dispatchEvent(new CustomEvent('pagerite:drop-page-cache'))
+}
+
 export function runScripts(root) {
   // Scripts injected via innerHTML do not execute; re-create them.
   if (!root) return
@@ -59,32 +67,39 @@ function swapRegions(doc) {
     curUserStyle.remove()
   }
   // Theme and other public stylesheets live in <head>, rendered with stable
-  // ids by the backend; sync them positionally so the custom CSS (rendered
-  // last) always keeps winning by order. Diff-based: unchanged sheets keep
-  // their elements, so their @keyframes are never torn down (re-creating
-  // keyframes would replay the editor's slide-in animation).
-  const freshLinks = [...doc.head.querySelectorAll('link[rel="stylesheet"]')]
-  const freshIds = new Set(freshLinks.map((l) => l.id))
-  for (const link of [...document.head.querySelectorAll('link[rel="stylesheet"]')]) {
-    if (!link.dataset.pagerite && !freshIds.has(link.id)) link.remove()
+  // ids by the backend (links in dev, inline <style> elements in prod);
+  // sync them positionally so the custom CSS (rendered last) always keeps
+  // winning by order. Diff-based: unchanged sheets keep their elements, so
+  // their @keyframes are never torn down (re-creating keyframes would
+  // replay the editor's slide-in animation).
+  const sel = 'link[rel="stylesheet"][id], style[id]'
+  const freshEls = [...doc.head.querySelectorAll(sel)]
+  const freshIds = new Set(freshEls.map((el) => el.id))
+  for (const el of [...document.head.querySelectorAll(sel)]) {
+    if (!freshIds.has(el.id)) el.remove()
   }
   // Insert missing sheets in the fresh document's order, each right after
   // its predecessor's element. The first sheet rendered is always the base
-  // CSS, so its link doubles as the fallback anchor when nothing matched yet
-  // (e.g. no theme was selected before and the position is otherwise lost).
+  // CSS, so its element doubles as the fallback anchor when nothing matched
+  // yet (e.g. no theme was selected before and the position is otherwise
+  // lost).
   let anchor = null
-  for (const link of freshLinks) {
-    const cur = link.id && document.getElementById(link.id)
-    if (cur && cur.href === link.href) {
+  for (const el of freshEls) {
+    const cur = el.id && document.getElementById(el.id)
+    if (cur && cur.outerHTML === el.outerHTML) {
       anchor = cur
       continue
     }
-    const el = document.importNode(link, true)
-    // Same id, new URL (theme switch): replace in place, keeping position.
-    if (cur) cur.replaceWith(el)
-    else if (anchor) anchor.after(el)
-    else document.getElementById('pagerite-base')?.after(el) ?? document.head.append(el)
-    anchor = el
+    const imported = document.importNode(el, true)
+    // Same id, new content (theme switch): replace in place, keeping position.
+    if (cur) cur.replaceWith(imported)
+    else if (anchor) anchor.after(imported)
+    else {
+      const base = document.getElementById('pagerite-base')
+      if (base) base.after(imported)
+      else document.head.append(imported)
+    }
+    anchor = imported
   }
   // The editor keeps its own title while open; only inherit the server title
   // when navigating outside the editor (e.g. fetch-navigation swaps).

frontend/vite.config.js

@@ -7,11 +7,10 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 
 const backendUrl = process.env.PAGERITE_BACKEND_URL || 'http://localhost:3200'
 
-// Proxy content pages (/slug, /path/to/slug) to the FastAPI backend in dev.
-// Excludes Vite internals (/@..., /src, /node_modules, /__...) and the
-// backend's /_ prefix. /_api, /_f, /_themes and the /_a analytics ping are
-// handled by the fastapi-vue plugin.
-const CONTENT_PROXY = '^\\/(?!_|@|src|node_modules|__)(?:[^./?]+(?:\\/[^./?]+)*)?(?:\\?.*)?$'
+// Proxy everything except Vite's own dev-time paths and the backend machinery
+// to the FastAPI backend in dev. /_api, /_f, /_themes and /_a are handled by
+// the fastapi-vue plugin, and /@..., /src, /node_modules, /__... stay with Vite.
+const CONTENT_PROXY = '^(?!/_|/@|/src|/node_modules|/__).*$'
 
 // https://vite.dev/config/
 export default defineConfig({

pagerite/__main__.py

@@ -92,6 +92,7 @@ def main() -> None:
         "pagerite.app:app",
         listen=args.listen,
         default_port=DEFAULT_PORT,
+        server_header=False,
         **dev,
     )
 

pagerite/analytics.py

@@ -5,15 +5,32 @@ ping on page load starts a visit, later pings extend it, and pings with no
 known session start a fresh one (missing data, not dropped). The document
 GET handler stashes the entry referer (external https origin) and any
 utm_* query parameters in in-memory IP tables, consumed when the ping
-starts the visit; nothing is counted without a ping (bots and admin
-browsing stay invisible). The session map is in-memory only.  The visitor
-IP and, when available, its reverse-DNS host name are stored on the visit
-record itself.
+starts the visit; nothing is counted without a ping (plain bots that only
+fetch documents end up in the crawler list).  JS-running crawlers
+(Googlebot, GoogleOther, Applebot, ...) do ping, but their UA gives them
+away (``_is_bot_ua``) and their pings are ignored, so they land in the
+crawler list too.  Idle-time link preloads from pagerite.js carry an
+``x-pagerite-preload`` header and are not tracked at all — the ping sent
+when the user actually navigates does the counting.
+Admin clients ping with ``hide=1``: the client record is flagged ``hide``,
+which covers everything that client ever did — visits and crawler hits
+from before the login included.  Aggregates (site visits, page views,
+transitions) are not stored; they are computed at display time from the
+visit records, excluding hidden clients, and hidden clients' visits,
+crawler hits, abuse hits and metadata are left out of the viewer payload
+entirely.  Scanner telltale 404s
+(dotpaths, *.php) classify the source IP as abuse; its hits — including
+earlier crawler hits — are moved to the abuse list, which the viewer
+groups by IP with full request paths.  Client metadata (IP, UA, language,
+country/city, host) is stored once per unique client hash and referenced
+from visits, crawler hits and abuse hits.  The session map is in-memory
+only.
 
 Data is a msgspec Struct JSON-dumped to its own file (not the kanta db),
 rewritten atomically on every recorded event.
 """
 
+import ipaddress
 import os
 import re
 import tempfile
@@ -23,6 +40,7 @@ from datetime import UTC, datetime, timedelta
 from pathlib import Path
 from urllib.parse import parse_qs, urlparse
 
+import blake3
 import msgspec
 from ua_parser import parse
 
@@ -41,7 +59,10 @@ def _compact_user_agent(ua: str) -> str:
     dev = r.device.family if r.device else None
     if browser in (None, "Other") and os_name in (None, "Other"):
         return ua
-    browser = browser if browser and browser != "Other" else ""
+    if browser and browser != "Other":
+        browser = browser.split()[0]
+    else:
+        browser = ""
     os_name = os_name if os_name and os_name != "Other" else ""
     if dev in (None, "Other") or dev == browser:
         dev = ""
@@ -49,51 +70,124 @@ def _compact_user_agent(ua: str) -> str:
     return " ".join(p for p in parts if p).strip()
 
 
+class Client(msgspec.Struct, omit_defaults=True):
+    """Client metadata shared by visits, crawler hits and abuse hits.
+
+    Identified by a 6-byte blake3 hash of the IPv4 address or IPv6 /64
+    network, the full User-Agent string and the extracted language tag.
+    Country/city/host are filled in asynchronously after the first event.
+    """
+
+    #: Visitor IP address (first X-Forwarded-For hop or direct peer).
+    ip: str = ""
+    #: Reverse-DNS host name for ``ip`` when resolvable, else "".
+    host: str = ""
+    #: First Accept-Language tag, lowercased (e.g. "en-us").
+    lang: str = ""
+    #: Two-letter country code from the DB-IP geoip lookup, or "".
+    country: str = ""
+    #: City name from the DB-IP geoip lookup, or "".
+    city: str = ""
+    #: Raw User-Agent header.
+    ua: str = ""
+    #: Compact display form of ``ua`` (browser/OS/device) when parsable.
+    ua_pretty: str = ""
+    #: True for admin clients (hide=1 ping): their visits, crawler hits and
+    #: abuse hits are recorded but excluded from all statistics and from
+    #: the viewer payload.
+    hide: bool = False
+
+
+class Nav(msgspec.Struct, omit_defaults=True):
+    """One navigation inside a visit: from ``fr`` to ``to``.
+
+    ``to`` is an internal page path or an external https exit URL.  Every
+    navigation is logged (repeats included), keyed by its timestamp in
+    ``Visit.navs``, so display-time aggregates can count views and
+    transitions; ``Visit.trail`` keeps the first-seen order.
+    """
+
+    fr: str
+    to: str
+
+
+class TrailItem(msgspec.Struct, omit_defaults=True):
+    """One first-seen target in a visit trail: a page or external exit URL.
+
+    ``read`` accumulates active reading time (seconds) across the whole
+    visit; ``status`` is the most recent HTTP status seen for the target.
+    """
+
+    to: str
+    #: Accumulated active reading time in seconds.
+    read: int = 0
+    #: Most recent HTTP status of the response (200 or 404).
+    status: int = 200
+
+
 class Visit(msgspec.Struct, omit_defaults=True):
     """One visit: the initial-load data plus everything seen afterwards.
 
-    ``trail`` holds page paths and external exit URLs in first-seen
-    order; re-visiting an already seen page does not append. The entry
-    page itself is in ``entry``, not in the trail.
+    ``trail`` holds the entry page and everything seen afterwards, keyed by
+    the timestamp of first sight (insertion order = first-seen order);
+    re-visiting an already seen target updates its item instead of
+    appending.  Client metadata is held in ``Analytics.clients`` keyed by
+    ``client``.
     """
 
     start: datetime
     entry: str
     #: External https origin of the initial load, "" for direct visits.
     referer: str = ""
-    #: Visitor IP address (first X-Forwarded-For hop or direct peer).
-    ip: str = ""
-    #: Reverse-DNS host name for ``ip`` when resolvable, else "".
-    host: str = ""
-    trail: list[str] = []
-    #: First Accept-Language tag, lowercased (e.g. "en-us").
-    lang: str = ""
-    #: Two-letter region subtag derived from ``lang`` (e.g. "US"), or "".
-    #: Overwritten by the DB-IP geoip lookup when a database is available.
-    country: str = ""
-    #: City name from the DB-IP geoip lookup, or "".
-    city: str = ""
-    #: Raw User-Agent header from the initial ping.
-    ua: str = ""
-    #: Compact display form of ``ua`` (browser/OS/device) when parsable.
-    ua_pretty: str = ""
+    #: 6-byte blake3 hash referencing ``Analytics.clients``.
+    client: bytes = b""
+    #: First-seen targets keyed by their timestamp (entry included).
+    trail: dict[datetime, TrailItem] = {}
+    #: Every navigation ping (repeats included) keyed by its timestamp; the
+    #: aggregates are computed from this log at display time.
+    navs: dict[datetime, Nav] = {}
     #: UTM query parameters from the landing URL, keyed by parameter name.
     utm: dict[str, str] = {}
 
 
 class CrawlerHit(msgspec.Struct, omit_defaults=True):
-    """A document GET that was never followed by an analytics ping."""
+    """A document GET that was never followed by an analytics ping.
+
+    Client metadata is held in ``Analytics.clients`` keyed by ``client``.
+    """
 
     start: datetime
     entry: str
-    ip: str = ""
-    ua: str = ""
-    #: Compact display form of ``ua`` when parsable.
-    ua_pretty: str = ""
+    #: 6-byte blake3 hash referencing ``Analytics.clients``.
+    client: bytes = b""
     #: External https origin of the initial load, "" for direct/none.
     referer: str = ""
     #: Raw query string of the landing URL (UTM tags can be parsed from it).
     query: str = ""
+    #: HTTP status of the served response (200 or 404 for content pages).
+    status: int = 200
+
+
+class AbuseHit(msgspec.Struct, omit_defaults=True):
+    """A request from an IP classified as a scanner/abuser.
+
+    Unlike crawler hits the full request path (query string included) is
+    kept: the interesting part is exactly which paths were probed.
+    ``flag`` marks the path that triggered classification; ``is_404``
+    distinguishes 404 responses from document GETs made by the abuser.
+    Client metadata is held in ``Analytics.clients`` keyed by ``client``.
+    """
+
+    start: datetime
+    #: Full request path including the query string (e.g. "/.env?x=1").
+    path: str
+    #: 6-byte blake3 hash referencing ``Analytics.clients``.
+    client: bytes = b""
+    #: True when this path triggered abuse classification (telltale path
+    #: or the 404 that crossed the threshold).
+    flag: bool = False
+    #: True for 404 responses; false for document GETs from the abuser.
+    is_404: bool = False
 
 
 class Analytics(msgspec.Struct, omit_defaults=True):
@@ -103,6 +197,28 @@ class Analytics(msgspec.Struct, omit_defaults=True):
     visits: list[Visit] = []
     #: Document GETs that never produced a ping, treated as crawler/bot hits.
     crawlers: list[CrawlerHit] = []
+    #: Requests from abusive IPs (see AbuseHit), grouped by IP in the viewer.
+    abuse: list[AbuseHit] = []
+    #: Client metadata keyed by 6-byte blake3 hash.
+    clients: dict[bytes, Client] = {}
+    #: IPs classified as scanners/abusers (keys; values always True).
+    abuse_ips: dict[str, bool] = {}
+
+
+class Display(msgspec.Struct, omit_defaults=True):
+    """The viewer payload: visible data plus display-time aggregates.
+
+    Hidden clients are excluded everywhere: their visits, crawler hits,
+    abuse hits and metadata are dropped, and the aggregates are computed
+    from the visible visits only.
+    The aggregate shapes match what the viewer consumes: sparse 5-minute
+    buckets keyed by their floored ISO timestamp.
+    """
+
+    visits: list[Visit] = []
+    crawlers: list[CrawlerHit] = []
+    abuse: list[AbuseHit] = []
+    clients: dict[bytes, Client] = {}
     #: Page transitions per 5-minute bucket (sparse):
     #: from -> to -> bucket ISO -> count. ``from`` is the referer origin or
     #: "(direct)" for initial loads, a page path for pings.
@@ -186,9 +302,62 @@ def _utm_tags(query: str) -> dict[str, str]:
 
 _CRAWLER_TIMEOUT = timedelta(seconds=10)
 
+#: UAs of JS-running crawlers, which would register as visitors on their
+#: ping.  Anything calling itself a "bot" or "spider" matches; known crawlers
+#: without those tokens (GoogleOther) are listed as extra alternates.  No
+#: source verification: a spoofed bot UA just lands in the crawler list, and
+#: scanners that probe telltale paths are caught by the abuse rules anyway.
+_BOT_UA = re.compile(r"bot|spider|googleother", re.IGNORECASE)
+
+
+def _is_bot_ua(ua: str) -> bool:
+    """True when the UA claims a crawler identity (bot or spider)."""
+    return bool(_BOT_UA.search(ua))
+
+#: Plain-404 count per IP that classifies it as abuse even without a
+#: telltale path hit.
+_ABUSE_404_THRESHOLD = 10
+
+#: Paths that instantly classify an IP as abuse when they 404: any segment
+#: starting with a dot ("/.env", "/.git/config") or ending in ".php".
+_ABUSE_PATH = re.compile(r"(^|/)\.|\.php$", re.IGNORECASE)
+
+
+def _is_abuse_path(path: str) -> bool:
+    """Telltale scanner path: dot segment or *.php."""
+    return bool(_ABUSE_PATH.search(path.split("?")[0]))
+
+
+def _network_ip(ip: str) -> str:
+    """IPv4 address unchanged, IPv6 collapsed to its /64 network address.
+
+    We hash the network rather than the full address so that clients in the
+    same /64 (a typical end-user allocation) are treated as one visitor.
+    """
+    if not ip:
+        return ip
+    try:
+        addr = ipaddress.ip_address(ip)
+    except ValueError:
+        return ip
+    if isinstance(addr, ipaddress.IPv6Address):
+        return str(ipaddress.IPv6Network(f"{ip}/64", strict=False).network_address)
+    return ip
+
+
+def _client_hash(ip: str, ua: str, lang: str) -> bytes:
+    """6-byte blake3 digest identifying a visitor/client tuple.
+
+    The key is the prettified IP (IPv6 /64), the raw UA string and the
+    extracted language tag, separated by null bytes.
+    """
+    return blake3.blake3(
+        f"{_network_ip(ip)}\0{ua}\0{lang}".encode()
+    ).digest()[:6]
+
 
 class Store:
-    """In-memory analytics data plus the (IP, UA) -> visit session map."""
+    """In-memory analytics data plus the client-hash -> visit session map."""
 
     def __init__(self, path: Path) -> None:
         self.path = path
@@ -198,8 +367,8 @@ class Store:
                 self.data = msgspec.json.decode(path.read_bytes(), type=Analytics)
             except msgspec.DecodeError, OSError:
                 pass  # legacy schema / corrupt or unreadable file: start fresh
-        #: (ip, user-agent) -> index of the current visit in data.visits
-        self.sessions: dict[tuple[str, str], int] = {}
+        #: client hash -> index of the current visit in data.visits
+        self.sessions: dict[bytes, int] = {}
         #: ip -> external https origin of the latest document GET carrying
         #: one, stashed for the visit the client's initial ping starts.
         #: Internal or absent referers never touch the table.
@@ -212,6 +381,12 @@ class Store:
         #: Document GETs that have not yet been matched by a ping.  Kept
         #: in RAM only; expired entries are written to ``data.crawlers``.
         self.pending_crawlers: list[CrawlerHit] = []
+        #: client hash -> {path: status} for recent document GETs, consumed
+        #: by the matching ping to record the status of each visited path.
+        self.pending_statuses: dict[bytes, dict[str, int]] = {}
+        #: ip -> number of plain (non-telltale) 404s seen, in RAM only;
+        #: reaching ``_ABUSE_404_THRESHOLD`` classifies the IP as abuse.
+        self.not_found_counts: dict[str, int] = {}
         #: Callables to notify when persisted data changes.  Registered by the
         #: analytics WebSocket broadcaster.
         self._on_change: list[Callable[[], None]] = []
@@ -244,93 +419,251 @@ class Store:
         else:
             self._notify()
 
-    def _flush_crawlers(self, now: datetime | None = None) -> None:
-        """Move expired pending crawler hits into persistent ``data.crawlers``."""
+    def _flush_crawlers(self, now: datetime | None = None) -> list[bytes]:
+        """Move expired pending crawler hits into persistent ``data.crawlers``.
+
+        Hits from a hidden client (admin) are discarded instead of
+        persisted — admin browsing must not land in the crawler list.
+
+        Returns the client hashes of the newly flushed hits so callers can
+        schedule async enrichment.
+        """
         if not self.pending_crawlers:
-            return
+            return []
         now = now or datetime.now(UTC)
         cutoff = now - _CRAWLER_TIMEOUT
         expired: list[CrawlerHit] = []
         remaining: list[CrawlerHit] = []
         for hit in self.pending_crawlers:
-            (expired if hit.start <= cutoff else remaining).append(hit)
-        if expired:
+            if hit.start > cutoff:
+                remaining.append(hit)
+                continue
+            client = self.data.clients.get(hit.client)
+            if client is not None and client.hide:
+                continue  # hidden admin client: not a crawler
+            expired.append(hit)
+        if not expired:
             self.pending_crawlers = remaining
-            self.data.crawlers.extend(expired)
+            return []
+        self.pending_crawlers = remaining
+        self.data.crawlers.extend(expired)
+        self._save()
+        return [hit.client for hit in expired]
+
+    def _hidden(self, client_hash: bytes) -> bool:
+        """True when the client record is flagged hidden (admin)."""
+        client = self.data.clients.get(client_hash)
+        return client is not None and client.hide
+
+    def display(self) -> Display:
+        """Build the viewer payload, excluding hidden clients.
+
+        The aggregates (site visits, page views, transitions) are computed
+        here from the visit records rather than stored, so a client that
+        becomes hidden after navigations were already logged disappears
+        from every statistic.  Internal-path navigations count as page
+        views; external https targets are transitions only.
+        """
+        visits = [v for v in self.data.visits if not self._hidden(v.client)]
+        display = Display(
+            visits=visits,
+            crawlers=[h for h in self.data.crawlers if not self._hidden(h.client)],
+            abuse=[h for h in self.data.abuse if not self._hidden(h.client)],
+            clients={h: c for h, c in self.data.clients.items() if not c.hide},
+        )
+        for visit in visits:
+            bucket = _bucket(visit.start)
+            site = display.site_visits
+            site[bucket] = site.get(bucket, 0) + 1
+            entry_views = display.views.setdefault(visit.entry, {})
+            entry_views[bucket] = entry_views.get(bucket, 0) + 1
+            fr = visit.referer or "(direct)"
+            buckets = display.transitions.setdefault(fr, {}).setdefault(visit.entry, {})
+            buckets[bucket] = buckets.get(bucket, 0) + 1
+            for t, nav in visit.navs.items():
+                nb = _bucket(t)
+                if nav.to.startswith("/"):
+                    nav_views = display.views.setdefault(nav.to, {})
+                    nav_views[nb] = nav_views.get(nb, 0) + 1
+                nbuckets = display.transitions.setdefault(nav.fr, {}).setdefault(nav.to, {})
+                nbuckets[nb] = nbuckets.get(nb, 0) + 1
+        return display
+
+    def display_json(self) -> str:
+        """The ``display()`` payload as a JSON string for the WebSocket."""
+        return msgspec.json.encode(self.display()).decode()
+
+    def _client_ip(self, client_hash: bytes) -> str:
+        """Return the IP stored for ``client_hash``, or "" if missing."""
+        client = self.data.clients.get(client_hash)
+        return client.ip if client else ""
+
+    def _ensure_client(
+        self,
+        ip: str,
+        ua: str,
+        lang: str,
+        *,
+        country: str = "",
+    ) -> bytes:
+        """Get or create a ``Client`` record; return its 6-byte hash."""
+        h = _client_hash(ip, ua, lang)
+        if h not in self.data.clients:
+            self.data.clients[h] = Client(
+                ip=ip,
+                ua=ua,
+                ua_pretty=_compact_user_agent(ua),
+                lang=lang,
+                country=country,
+            )
+            self._save()
+        return h
+
+    def enrich_client(
+        self,
+        client_hash: bytes,
+        *,
+        host: str = "",
+        country: str = "",
+        city: str = "",
+    ) -> None:
+        """Fill in host/geoip fields on a client record after async lookups."""
+        client = self.data.clients.get(client_hash)
+        if client is None:
+            return
+        changed = False
+        if host and not client.host:
+            client.host = host
+            changed = True
+        if country:
+            client.country = country
+            changed = True
+        if city:
+            client.city = city
+            changed = True
+        if changed:
             self._save()
 
-    def _count(self, table: dict[str, int], key: str) -> None:
-        table[key] = table.get(key, 0) + 1
+    def _abuse_hit(
+        self,
+        client_hash: bytes,
+        path: str,
+        start: datetime | None = None,
+        *,
+        flag: bool = False,
+        is_404: bool = False,
+    ) -> None:
+        """Append one abuse hit referencing a client by hash."""
+        self.data.abuse.append(
+            AbuseHit(
+                start=start or datetime.now(UTC),
+                path=path,
+                client=client_hash,
+                flag=flag,
+                is_404=is_404,
+            )
+        )
 
-    def _count_transition(self, fr: str, to: str, now: datetime) -> None:
-        """Count one transition in its 5-minute bucket (sparse matrix)."""
-        buckets = self.data.transitions.setdefault(fr, {}).setdefault(to, {})
-        self._count(buckets, _bucket(now))
+    def classify_abuse(
+        self,
+        ip: str,
+        client_hash: bytes,
+        path: str,
+        *,
+        flag: bool = False,
+        is_404: bool = False,
+    ) -> None:
+        """Classify an IP as a scanner/abuser and record the triggering hit.
+
+        All earlier crawler hits from the same IP (persisted and pending)
+        are moved to the abuse list — a random-UA scanner must not pollute
+        the crawler stats of the legitimate bots it impersonates.
+        """
+        if ip not in self.data.abuse_ips:
+            self.data.abuse_ips[ip] = True
+            moved = [h for h in self.data.crawlers if self._client_ip(h.client) == ip]
+            if moved:
+                self.data.crawlers = [h for h in self.data.crawlers if self._client_ip(h.client) != ip]
+                for h in moved:
+                    self._abuse_hit(
+                        h.client,
+                        h.entry + (f"?{h.query}" if h.query else ""),
+                        start=h.start,
+                    )
+            pending = [h for h in self.pending_crawlers if self._client_ip(h.client) == ip]
+            if pending:
+                self.pending_crawlers = [h for h in self.pending_crawlers if self._client_ip(h.client) != ip]
+                for h in pending:
+                    self._abuse_hit(
+                        h.client,
+                        h.entry + (f"?{h.query}" if h.query else ""),
+                        start=h.start,
+                    )
+        self._abuse_hit(client_hash, path, flag=flag, is_404=is_404)
+        self._save()
+
+    def track_404(
+        self,
+        ip: str,
+        ua: str,
+        path: str,
+        accept_language: str = "",
+    ) -> bytes:
+        """Record a 404 response for ``path`` (full path, query included).
+
+        A telltale path (dot segment or *.php) classifies the IP as abuse
+        immediately; enough plain 404s from one IP do too.  Hits from
+        already-classified IPs go straight to the abuse list.
+
+        Returns the client hash so callers can schedule async enrichment.
+        """
+        lang, country = _parse_accept_language(accept_language)
+        client_hash = self._ensure_client(ip, ua, lang, country=country)
+        if ip in self.data.abuse_ips:
+            self._abuse_hit(client_hash, path, flag=_is_abuse_path(path), is_404=True)
+            self._save()
+            return client_hash
+        if _is_abuse_path(path):
+            self.classify_abuse(ip, client_hash, path, flag=True, is_404=True)
+            return client_hash
+        self.not_found_counts[ip] = self.not_found_counts.get(ip, 0) + 1
+        if self.not_found_counts[ip] >= _ABUSE_404_THRESHOLD:
+            self.classify_abuse(ip, client_hash, path, flag=True, is_404=True)
+            return client_hash
+        return client_hash
 
     def _new_visit(
         self,
         entry: str,
         referer: str,
-        key: tuple[str, str],
-        ip: str = "",
-        lang: str = "",
-        country: str = "",
-        ua: str = "",
+        client_hash: bytes,
         utm: dict[str, str] | None = None,
+        status: int = 200,
     ) -> Visit:
         now = datetime.now(UTC)
         visit = Visit(
             start=now,
             entry=entry,
             referer=referer,
-            ip=ip,
-            lang=lang,
-            country=country,
-            ua=ua,
-            ua_pretty=_compact_user_agent(ua),
+            client=client_hash,
             utm=utm or {},
         )
+        visit.trail[now] = TrailItem(to=entry, status=status)
         self.data.visits.append(visit)
-        self.sessions[key] = len(self.data.visits) - 1
-        self._count(self.data.site_visits, _bucket(now))
-        self._count(self.data.views.setdefault(entry, {}), _bucket(now))
-        self._count_transition(referer or "(direct)", entry, now)
+        self.sessions[client_hash] = len(self.data.visits) - 1
         return visit
 
-    def enrich_visit(
-        self,
-        index: int,
-        *,
-        host: str = "",
-        country: str = "",
-        city: str = "",
-    ) -> None:
-        """Fill in host/geoip fields on an existing visit after async lookups."""
-        if index < 0 or index >= len(self.data.visits):
-            return
-        visit = self.data.visits[index]
-        changed = False
-        if host and not visit.host:
-            visit.host = host
-            changed = True
-        if country:
-            visit.country = country
-            changed = True
-        if city:
-            visit.city = city
-            changed = True
-        if changed:
-            self._save()
-
     def track_entry(
         self,
         referer: str,
         own_origin: str,
         ip: str,
         ua: str,
-        entry: str,
-        query: str = "",
-    ) -> None:
+        full_path: str,
+        accept_language: str = "",
+        *,
+        status: int = 200,
+    ) -> list[bytes]:
         """Stash the entry referer/UTM tags and queue a pending crawler hit.
 
         Nothing is counted here — the client's initial /_a ping starts the
@@ -341,11 +674,28 @@ class Store:
         does not erase an earlier tagged landing.
 
         Every document GET is also queued as a pending crawler hit.  If a ping
-        from the same (IP, UA) pair arrives within ``_CRAWLER_TIMEOUT``, the
-        hit is discarded; otherwise it is flushed to ``data.crawlers``.
+        from the same client arrives within ``_CRAWLER_TIMEOUT``, the hit is
+        discarded; otherwise it is flushed to ``data.crawlers``.  The
+        Accept-Language header is stored on the client record immediately;
+        host/geoip are filled in later by async enrichment.
+
+        GETs from IPs already classified as abuse are recorded as abuse hits
+        with the full request path (query string included).
+
+        Returns the client hashes of any hits flushed to persistent storage,
+        so callers can schedule async enrichment.
         """
+        entry = full_path.split("?")[0]
+        query = full_path.split("?", 1)[1] if "?" in full_path else ""
+        lang, country = _parse_accept_language(accept_language)
+        client_hash = self._ensure_client(ip, ua, lang, country=country)
+        if ip in self.data.abuse_ips:
+            flushed = self._flush_crawlers()
+            self._abuse_hit(client_hash, full_path, is_404=False, flag=False)
+            self._save()
+            return flushed
         now = datetime.now(UTC)
-        self._flush_crawlers(now)
+        flushed = self._flush_crawlers(now)
         if referer:
             origin = _origin(referer)
             if origin is not None and origin != own_origin:
@@ -357,71 +707,133 @@ class Store:
             CrawlerHit(
                 start=now,
                 entry=entry,
-                ip=ip,
-                ua=ua,
-                ua_pretty=_compact_user_agent(ua),
+                client=client_hash,
                 referer=self.pending_referers.get(ip, ""),
                 query=query,
+                status=status,
             )
         )
+        self.pending_statuses.setdefault(client_hash, {})[entry] = status
+        return flushed
+
+    def _add_read(self, client_hash: bytes, path: str, seconds: int) -> None:
+        """Add ``seconds`` of reading time for ``path`` to the current visit."""
+        if seconds <= 0:
+            return
+        index = self.sessions.get(client_hash)
+        if index is None or index >= len(self.data.visits):
+            return
+        visit = self.data.visits[index]
+        for item in visit.trail.values():
+            if item.to == path:
+                item.read += seconds
+                return
 
     def ping(
         self,
         from_: str,
-        to: str,
+        to: str | None,
         ip: str,
         ua: str,
         accept_language: str = "",
-    ) -> int | None:
-        """Record a client navigation ping ({from, to} from pagerite.js).
+        hide: bool = False,
+        read: int = 0,
+    ) -> tuple[int | None, list[bytes]]:
+        """Record a client navigation ping ({from, to, read} from pagerite.js).
+
+        ``to`` is an internal path ("/...") or an https URL for exit links; a
+        missing/empty ``to`` means the page is being closed and only the
+        ``read`` time should be recorded. The transition is always counted when
+        ``to`` is present; the trail only grows on first sight of a page within
+        the visit. ``read`` is the active time (seconds) spent on ``from_``.
 
-        ``to`` is an internal path ("/...") or an https URL for exit links;
-        anything else is ignored. The transition is always counted; the trail
-        only grows on first sight of a page within the visit.
         A ping with no known session starts a fresh visit, consuming the
         referer and UTM tags stashed by the document GET if there are any.
 
-        Returns the index of the new visit when one is created, so callers
-        can enrich it later with non-blocking lookups (host, geoip country).
+        ``hide`` is set by admin clients: the client record is flagged
+        ``hide`` — which covers everything it ever did, including visits and
+        crawler hits from before the login — and the navigation is recorded
+        normally.  Hidden clients are excluded from every statistic and list
+        at display time, and their pending crawler hits are discarded.
+
+        Pings from IPs classified as abuse, and pings whose User-Agent
+        claims a JS-running crawler identity (``_is_bot_ua``), are ignored
+        entirely — the crawler's pending hits stay queued and flush to
+        ``data.crawlers`` normally.
+
+        Returns the index of the new visit when one is created (or None) and
+        the client hashes of any crawler hits flushed by this call, so callers
+        can schedule async enrichment (host, geoip country/city).
         """
-        self._flush_crawlers()
-        # A real visitor ping cancels any pending crawler hits from this
-        # (IP, UA) pair.
-        self.pending_crawlers = [
-            hit for hit in self.pending_crawlers if not (hit.ip == ip and hit.ua == ua)
-        ]
+        flushed = self._flush_crawlers()
+        lang, country = _parse_accept_language(accept_language)
+        if hide:
+            # Admin ping: flag the client hidden and never a crawler hit.
+            # The flag lives on the client record, so it covers visits and
+            # crawler hits from before the login too; display-time
+            # aggregation excludes hidden clients from every statistic.
+            client_hash = self._ensure_client(ip, ua, lang, country=country)
+            self.data.clients[client_hash].hide = True
+            self.pending_crawlers = [
+                hit for hit in self.pending_crawlers if hit.client != client_hash
+            ]
+        else:
+            client_hash = _client_hash(ip, ua, lang)
+            if ip in self.data.abuse_ips:
+                return None, flushed
+            if _is_bot_ua(ua):
+                # A JS-running crawler (Googlebot, GoogleOther, Applebot
+                # execute JS and ping): never a visit.  Its pending crawler
+                # hits are kept and flush to ``data.crawlers`` normally.
+                return None, flushed
+            # A real visitor ping cancels any pending crawler hits from
+            # this client.
+            self.pending_crawlers = [
+                hit for hit in self.pending_crawlers if hit.client != client_hash
+            ]
+        fr_path = _internal_path(from_) if from_ else ""
+        if fr_path and read > 0:
+            self._add_read(client_hash, fr_path, read)
+        if not to:
+            if read > 0 or hide:
+                self._save()
+            return None, flushed
         if to.startswith("/") and not to.startswith("//"):
             target = _internal_path(to) or ""
         else:
             target = _external_target(to) or ""
         if not target:
-            return None
-        key = (ip, ua)
-        index = self.sessions.get(key)
-        fr = (_internal_path(from_) or "(direct)") if from_ else "(direct)"
+            return None, flushed
+        index = self.sessions.get(client_hash)
+        fr = fr_path or "(direct)"
+        statuses = self.pending_statuses.setdefault(client_hash, {})
+        target_status = statuses.pop(target, None) or 200
+        if not statuses:
+            self.pending_statuses.pop(client_hash, None)
         if index is None or index >= len(self.data.visits):
             # No known session: the initial ping of a fresh page load (or
             # missing data after a server restart) — start a visit.
-            lang, country = _parse_accept_language(accept_language)
             index = len(self.data.visits)
+            self._ensure_client(ip, ua, lang, country=country)
             self._new_visit(
                 target,
                 self.pending_referers.pop(ip, ""),
-                key,
-                ip=ip,
-                lang=lang,
-                country=country,
-                ua=ua,
+                client_hash,
                 utm=self.pending_utms.pop(ip, {}),
+                status=target_status,
             )
         else:
             visit = self.data.visits[index]
             now = datetime.now(UTC)
-            if target.startswith("/"):
-                self._count(self.data.views.setdefault(target, {}), _bucket(now))
-            self._count_transition(fr, target, now)
-            # First-seen only: repeat pages and repeated exits don't append.
-            if visit.entry != target and target not in visit.trail:
-                visit.trail.append(target)
+            visit.navs[now] = Nav(fr=fr, to=target)
+            # First-seen only: repeat pages and repeated exits update the
+            # existing trail item (most recent status) instead of appending.
+            for item in visit.trail.values():
+                if item.to == target:
+                    item.status = target_status
+                    break
+            else:
+                visit.trail[now] = TrailItem(to=target, status=target_status)
         self._save()
-        return index if index is not None and index < len(self.data.visits) else None
+        visit_index = index if index is not None and index < len(self.data.visits) else None
+        return visit_index, flushed

pagerite/app.py

@@ -27,14 +27,23 @@ from email.utils import format_datetime
 from functools import lru_cache
 from pathlib import Path
 from urllib.parse import urlparse
+from xml.sax.saxutils import escape as xml_escape
 
 import blake3
 import msgspec
-from fastapi import FastAPI, HTTPException, Request, WebSocket, WebSocketDisconnect
-from fastapi.responses import HTMLResponse, RedirectResponse, Response
+from fastapi import (
+    FastAPI,
+    HTTPException,
+    Query,
+    Request,
+    WebSocket,
+    WebSocketDisconnect,
+)
+from fastapi.responses import RedirectResponse, Response
 from fastapi_vue import Frontend
 from kanta import Kanta
 from pydantic import BaseModel
+from zstandard import ZstdCompressor
 
 from pagerite import analytics, seed, views
 from pagerite.__main__ import DEVMODE
@@ -126,13 +135,21 @@ class GeoIP:
         return ""
 
     def city(self, ip: str) -> str:
-        """City name for ``ip``, or "" when unavailable."""
+        """City name for ``ip``, or "" when unavailable.
+
+        GeoIP sometimes appends district names in parentheses (e.g.
+        "Berlin (Bezirk Tempelhof-Schöneberg)"); those are stripped before
+        the value is stored.
+        """
         if not ip or self._reader is None:
             return ""
         try:
             rec = self._reader.get(ip)
             if rec:
-                return (rec.get("city") or {}).get("names", {}).get("en", "")
+                city = (rec.get("city") or {}).get("names", {}).get("en", "")
+                if city:
+                    city = re.sub(r"\s*\([^)]*\)", "", city).strip()
+                return city
         except Exception:
             pass
         return ""
@@ -273,6 +290,79 @@ async def _headers(request: Request, call_next) -> Response:
     return response
 
 
+# Dynamic HTML is compressed per request at level 9 (static assets are
+# already pre-compressed by fastapi-vue's Frontend).
+_zstd = ZstdCompressor(9)
+
+
+def _render_html(kind: str, path: str, base_url: str) -> str:
+    """Render one of the generated pages (see _html_response)."""
+    if kind == "page":
+        return views.render_page(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html, base_url)
+    if kind == "category":
+        return views.render_category(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html)
+    if kind == "not-found":
+        return views.render_not_found(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html)
+    return views.render_analytics(data.menu, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html)
+
+
+@lru_cache(maxsize=128)
+def _cached_body(kind: str, path: str, base_url: str, version: int, zstd: bool) -> bytes:
+    """Rendered page body. Every input the output depends on is in the key:
+    data.version bumps on any content/settings change, base_url feeds the
+    social meta URLs, and zstd selects the stored encoding (both variants
+    are cached rather than re-compressed).
+    """
+    body = _render_html(kind, path, base_url).encode()
+    return _zstd.compress(body) if zstd else body
+
+
+def _html_response(
+    request: Request,
+    kind: str,
+    path: str,
+    status_code: int = 200,
+    headers: dict | None = None,
+    etag: bool = False,
+) -> Response:
+    """Response for a generated page, zstd-compressed when the client
+    accepts it (no gzip fallback).
+
+    Done per handler rather than in middleware so that Frontend's
+    already-compressed asset responses are never touched. The ETag stays
+    identical across encodings (revalidation compares it before
+    compression); ``vary: accept-encoding`` keeps caches from mixing the
+    representations. In dev the cache is bypassed so theme/design edits on
+    disk apply immediately.
+
+    ``etag=True`` derives the validator from a blake3 hash of the
+    (uncompressed) body — for pages like /_a that have no Node whose
+    modified timestamp could serve as one — and answers matching
+    if-none-match revalidations with a 304.
+    """
+    zstd = "zstd" in request.headers.get("accept-encoding", "")
+    # Absolute social/canonical URLs use the learned public origin; until
+    # an admin visit teaches it, fall back to the request's own base URL.
+    base_url = data.site_url or str(request.base_url).rstrip("/")
+    if DEVMODE:
+        identity = _render_html(kind, path, base_url).encode()
+        body = _zstd.compress(identity) if zstd else identity
+    else:
+        identity = _cached_body(kind, path, base_url, data.version, False)
+        body = _cached_body(kind, path, base_url, data.version, True) if zstd else identity
+    h = dict(headers or {})
+    if zstd:
+        h["vary"] = "accept-encoding"
+    if etag:
+        tag = f'"{blake3.blake3(identity).hexdigest()[:32]}"'
+        h["etag"] = tag
+        if request.headers.get("if-none-match") == tag:
+            return Response(status_code=304, headers=h)
+    if zstd:
+        h["content-encoding"] = "zstd"
+    return Response(body, status_code, h, media_type="text/html")
+
+
 class PageIn(BaseModel):
     """Payload for creating or replacing a page."""
 
@@ -426,6 +516,33 @@ async def put_settings(settings: SettingsIn) -> None:
         data.version += 1
 
 
+class SiteUrlIn(BaseModel):
+    """Payload for learning the site's public origin."""
+
+    url: str
+
+
+@app.post("/_api/site-url", status_code=204)
+async def learn_site_url(payload: SiteUrlIn) -> None:
+    """Learn the site's public origin (scheme + host) from an admin browser.
+
+    pagerite.js reports location.origin once an admin session is detected:
+    unlike request Host headers it reflects the real public scheme and host
+    even behind reverse proxies, with zero manual configuration. Stored in
+    the database with a version bump so cached pages re-render with correct
+    absolute social/canonical URLs.
+    """
+    url = payload.url.rstrip("/")
+    parsed = urlparse(url)
+    if parsed.scheme not in ("http", "https") or not parsed.netloc or parsed.path:
+        raise HTTPException(400, "not an origin")
+    if url == data.site_url:
+        return
+    with kanta.transaction("learn site url"):
+        data.site_url = url
+        data.version += 1
+
+
 @app.put("/_api/settings/favicon")
 async def put_favicon(request: Request) -> dict[str, str]:
     """Upload a favicon into the content-addressed store and activate it.
@@ -605,6 +722,12 @@ def _client_ip(request: Request) -> str:
     return forwarded or (request.client.host if request.client else "")
 
 
+def _query_suffix(request: Request) -> str:
+    """The request's query string as a "?..." suffix, or "" when absent."""
+    query = str(request.url.query)
+    return f"?{query}" if query else ""
+
+
 @lru_cache(maxsize=4096)
 def _cached_ptr(ip: str) -> str:
     """Reverse-DNS lookup with in-RAM LRU cache.  Returns the host name or ""."""
@@ -638,21 +761,28 @@ async def _geoip_city(ip: str) -> str:
     return await asyncio.to_thread(_geoip.city, ip)
 
 
-async def _enrich_visit(index: int, ip: str) -> None:
-    """Run non-blocking reverse-DNS and geoip enrichment for a new visit."""
-    if not ip:
+async def _enrich_client(client_hash: bytes) -> None:
+    """Run non-blocking reverse-DNS and geoip enrichment for a client."""
+    client = analytics_store.data.clients.get(client_hash)
+    if not client or not client.ip:
         return
-    host = await _lookup_host(ip)
-    country = await _geoip_country(ip)
-    city = await _geoip_city(ip)
-    analytics_store.enrich_visit(index, host=host, country=country, city=city)
+    host = await _lookup_host(client.ip)
+    country = await _geoip_country(client.ip)
+    city = await _geoip_city(client.ip)
+    analytics_store.enrich_client(client_hash, host=host, country=country, city=city)
+
+
+def _schedule_client_enrichment(client_hashes: list[bytes]) -> None:
+    """Start background host/geoip enrichment for the given client hashes."""
+    for client_hash in client_hashes:
+        asyncio.create_task(_enrich_client(client_hash))
 
 
 async def _broadcast_analytics() -> None:
     """Send the current analytics snapshot to every connected WS client."""
     if not _analytics_ws_clients:
         return
-    payload = msgspec.json.encode(analytics_store.data).decode()
+    payload = analytics_store.display_json()
     closed = set()
     for ws in _analytics_ws_clients:
         try:
@@ -679,73 +809,95 @@ def _schedule_analytics_broadcast() -> None:
     )
 
 
-class AnalyticsPing(BaseModel):
-    """Navigation ping from pagerite.js (see docs/analytics.md)."""
-
-    fr: str = ""
-    to: str
-
-
 @app.get("/_a", response_model=None)
-async def analytics_page(request: Request) -> HTMLResponse:
+async def analytics_page(request: Request) -> Response:
     """Render the analytics viewer as a normal site page at /_a.
 
     The page itself is public, but the data stream (/_api/ws/analytics) stays
     admin-gated like the rest of /_api, so only authorized users see the
     statistics; others get the viewer with a "could not be loaded" message.
     """
-    return HTMLResponse(
-        views.render_analytics(
-            data.menu, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html
-        ),
+    return _html_response(
+        request,
+        "analytics",
+        "",
         headers={"cache-control": "no-cache"},
+        etag=True,
     )
 
 
 @app.post("/_a", status_code=204)
-async def analytics_ping(ping: AnalyticsPing, request: Request) -> None:
-    """Record a navigation ping ({fr, to}); fire-and-forget, never fails.
+async def analytics_ping(
+    request: Request,
+    fr: str = Query(""),
+    to: str | None = Query(None),
+    hide: int = Query(0),
+    read: int = Query(0),
+) -> None:
+    """Record a navigation ping (?fr=&to=&hide=&read=); fire-and-forget.
+
+    The initial page-load ping carries only ``to``: the entry is attributed
+    to the referer/UTM tags stashed by the document GET (see _track_entry),
+    which JS cannot see once the page has loaded.
 
     The reverse-DNS and DB-IP geoip lookups happen in a background task so
     the response is never delayed by slow DNS or the first MMDB decompress.
     """
     ip = _client_ip(request)
-    index = analytics_store.ping(
-        ping.fr,
-        ping.to,
+    visit_index, flushed_clients = analytics_store.ping(
+        fr,
+        to,
         ip,
         request.headers.get("user-agent", ""),
         request.headers.get("accept-language", ""),
+        hide=bool(hide),
+        read=read,
     )
-    if index is not None:
-        asyncio.create_task(_enrich_visit(index, ip))
+    if visit_index is not None:
+        visit = analytics_store.data.visits[visit_index]
+        asyncio.create_task(_enrich_client(visit.client))
+    _schedule_client_enrichment(flushed_clients)
 
 
-def _track_entry(path: str, request: Request) -> None:
+def _track_entry(path: str, request: Request, *, status: int = 200) -> list[bytes]:
     """Stash the referer/UTM tags and queue a pending crawler hit for the GET.
 
     Nothing is counted on the GET itself — the client's /_a ping starts the
-    visit, so bots and admin browsing never register as visits.
+    visit, so bots never register as visits (JS-running crawlers ping too,
+    but the ping handler ignores known bot UAs).  (Admin clients ping too,
+    but with hide=1, which flags their visit hidden: it is recorded but
+    excluded from all statistics and from the crawler list.)
 
     The devserver's health probe (``GET /?from=devserver.py`` from
     ``127.0.0.1``) is ignored: it is not real traffic and would otherwise be
     logged as a crawler hit.  The root-path and localhost checks prevent
     remote visitors from hiding traffic with the same query string.
+
+    Returns the client hashes of any pending crawler hits flushed to persistent
+    storage, so callers can schedule async geoip and reverse-DNS enrichment.
     """
+    if request.headers.get("x-pagerite-preload"):
+        # Idle-time page-cache warm-up by pagerite.js, not a page view: the
+        # ping sent when the user actually navigates does the counting.
+        # (Forging the header only hides a GET from the crawler stats; the
+        # path-based abuse classification is unaffected.)
+        return []
     if (
         path == ""
         and str(request.url.query) == "from=devserver.py"
         and _client_ip(request) == "127.0.0.1"
     ):
-        return
+        return []
     own_origin = f"https://{urlparse(str(request.base_url)).netloc}"
-    analytics_store.track_entry(
+    full_path = f"{request.url.path}{_query_suffix(request)}"
+    return analytics_store.track_entry(
         request.headers.get("referer", ""),
         own_origin,
         _client_ip(request),
         request.headers.get("user-agent", ""),
-        "/" if path == "" else f"/{path}",
-        str(request.url.query),
+        full_path,
+        request.headers.get("accept-language", ""),
+        status=status,
     )
 
 
@@ -790,7 +942,7 @@ async def analytics_websocket(ws: WebSocket) -> None:
     endpoint. Powers the analytics viewer rendered at /_a.
     """
     await ws.accept()
-    await ws.send_text(msgspec.json.encode(analytics_store.data).decode())
+    await ws.send_text(analytics_store.display_json())
     _analytics_ws_clients.add(ws)
     try:
         while True:
@@ -863,15 +1015,20 @@ async def editor_ws(ws: WebSocket) -> None:
                     markdown = msg.get("markdown", "")
                     chain = resolve(data.menu, path)
                     node = chain[-1] if chain else None
+                    rendered = render(
+                        markdown,
+                        path,
+                        node.created if node else None,
+                        node.modified if node else None,
+                    )
                     await ws.send_json({
                         "type": "html",
                         "path": path,
-                        "html": render(
-                            markdown,
-                            path,
-                            node.created if node else None,
-                            node.modified if node else None,
-                        ),
+                        "html": rendered.html,
+                        # Column-layout flags: the preview toggles the
+                        # article's .multicol class and swaps in the
+                        # segmented (.colseg/.cols) body html.
+                        "multicol": rendered.multicol,
                         "has_h1": has_h1(markdown),
                     })
                 case "save":
@@ -952,22 +1109,108 @@ async def front_page(request: Request) -> Response:
     return await show_page(request, "")
 
 
+@app.get("/sitemap.xml")
+async def sitemap(request: Request) -> Response:
+    """Dynamically generate a sitemap of all published article pages."""
+    base = str(request.base_url).rstrip("/")
+    entries: list[tuple[str, datetime, int]] = []
+
+    def walk(
+        nodes: dict[str, Node], prefix: str, parent_has_content: bool = True
+    ) -> None:
+        first_content_slug = next(
+            (
+                slug
+                for slug, node in sorted_nodes(nodes)
+                if node.published and node.content is not None
+            ),
+            None,
+        )
+        for slug, node in sorted_nodes(nodes):
+            path = f"{prefix}/{slug}" if prefix else slug
+            depth = path.count("/") if path else 0
+            if (
+                not parent_has_content
+                and slug == first_content_slug
+                and node.published
+                and node.content is not None
+                and depth > 0
+            ):
+                depth -= 1
+            if node.published and node.content is not None:
+                entries.append((path, node.modified, depth))
+            if node.children:
+                walk(node.children, path, node.content is not None)
+
+    walk(data.menu, "")
+
+    def priority(depth: int) -> float:
+        return max(0.1, 1.0 - depth * 0.2)
+
+    lines = [
+        '<?xml version="1.0" encoding="UTF-8"?>',
+        '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">',
+    ]
+    for path, modified, depth in entries:
+        loc = xml_escape(f"{base}/{path}" if path else base)
+        lastmod = (
+            modified.astimezone(UTC).replace(microsecond=0).isoformat().replace("+00:00", "Z")
+        )
+        lines.append(
+            f"  <url>"
+            f"<loc>{loc}</loc>"
+            f"<lastmod>{lastmod}</lastmod>"
+            f"<priority>{priority(depth):.1f}</priority>"
+            f"</url>"
+        )
+    lines.append("</urlset>")
+
+    return Response(
+        "\n".join(lines),
+        media_type="application/xml",
+        headers={"cache-control": "no-cache"},
+    )
+
+
+@app.get("/robots.txt")
+async def robots_txt(request: Request) -> Response:
+    """Allow all crawling and point crawlers at the sitemap."""
+    base = str(request.base_url).rstrip("/")
+    body = f"User-agent: *\nAllow: /\nSitemap: {base}/sitemap.xml\n"
+    return Response(
+        body,
+        media_type="text/plain",
+        headers={"cache-control": "no-cache"},
+    )
+
+
 # Vue build asset routes are inserted at this position during load(): the
 # build mirrors the URL space (/_assets/*, /favicon.ico at the root).
 frontend.route(app, "/")
 
 
 @app.get("/{path:path}", response_model=None)
-async def show_page(request: Request, path: str) -> HTMLResponse | Response:
+async def show_page(request: Request, path: str) -> Response:
     """Render the content page at a slug path, or 404.
 
     A node without content is a category label: its URL renders a
     placeholder page (nav links point straight at its first child).
     """
     path = path.strip("/")
+    ua = request.headers.get("user-agent", "")
+    accept_language = request.headers.get("accept-language", "")
     if path and _is_reserved(path):
         # Invalid slug shape: not a content URL, let FastAPI return its
         # built-in 404 instead of rendering an editable article page.
+        # Scanner telltales (dotpaths like /.env, *.php) classify the IP
+        # as abuse in analytics.
+        client_hash = analytics_store.track_404(
+            _client_ip(request),
+            ua,
+            f"/{path}{_query_suffix(request)}",
+            accept_language,
+        )
+        asyncio.create_task(_enrich_client(client_hash))
         raise HTTPException(404)
     chain = resolve(data.menu, path)
     node = chain[-1] if chain else None
@@ -982,9 +1225,12 @@ async def show_page(request: Request, path: str) -> HTMLResponse | Response:
         if request.headers.get("if-none-match") == etag:
             return Response(status_code=304)
         if _is_trackable_path(path):
-            _track_entry(path, request)
-        return HTMLResponse(
-            views.render_page(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html, str(request.base_url).rstrip("/")),
+            flushed = _track_entry(path, request)
+            _schedule_client_enrichment(flushed)
+        return _html_response(
+            request,
+            "page",
+            path,
             headers={
                 "etag": etag,
                 "last-modified": _http_date(node.modified),
@@ -995,9 +1241,12 @@ async def show_page(request: Request, path: str) -> HTMLResponse | Response:
         # Category label without a landing page: placeholder with the pen
         # to create it (404 — no page here, but the node is real).
         if _is_trackable_path(path):
-            _track_entry(path, request)
-        return HTMLResponse(
-            views.render_category(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html),
+            flushed = _track_entry(path, request, status=404)
+            _schedule_client_enrichment(flushed)
+        return _html_response(
+            request,
+            "category",
+            path,
             404,
             headers={
                 "last-modified": _http_date(node.modified),
@@ -1011,5 +1260,13 @@ async def show_page(request: Request, path: str) -> HTMLResponse | Response:
             if item.published:
                 return RedirectResponse(f"/{slug}")
     if _is_trackable_path(path):
-        _track_entry(path, request)
-    return HTMLResponse(views.render_not_found(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html), 404)
+        client_hash = analytics_store.track_404(
+            _client_ip(request),
+            ua,
+            f"/{path}{_query_suffix(request)}",
+            accept_language,
+        )
+        asyncio.create_task(_enrich_client(client_hash))
+        flushed = _track_entry(path, request, status=404)
+        _schedule_client_enrichment(flushed)
+    return _html_response(request, "not-found", path, 404)

pagerite/data.py

@@ -100,6 +100,12 @@ class Data(msgspec.Struct):
     #: Favicon: name of a file in `files` (content-addressed), linked as
     #: <link rel="icon"> on every page. Empty = the build's /favicon.ico.
     favicon: str = ""
+    #: Public origin (scheme + host) of the site, learned from admin
+    #: browsers (POST /_api/site-url — location.origin is correct even
+    #: behind reverse proxies, unlike request Host headers). Used for
+    #: absolute social/canonical URLs; empty = fall back to the request's
+    #: own base URL.
+    site_url: str = ""
     #: Legacy flat page store (pre-tree databases); migrated into `menu`
     #: on startup, then cleared. Never written otherwise.
     pages: dict[str, Page] = {}

pagerite/markdown.py

@@ -4,12 +4,36 @@ Raw HTML (including inline scripts) is passed through unfiltered: the
 single author is trusted. Extensions: tables and strikethrough (from the
 "default" preset), footnotes, definition lists, task lists,
 brace-attributes (`{.class width=300}` on any element, images in
-particular) and admonitions (``!!! note Title`` with an indented body —
-note/tip/warning/etc., the title optional). Bare URLs autolink (GFM), with
+particular), admonitions (``!!! note Title`` with an indented body —
+note/tip/warning/etc., the title optional) and GitHub-style alerts
+(``> [!NOTE]`` / TIP / IMPORTANT / WARNING / CAUTION, rendered in the
+same callout styling). ``::: name`` opens a generic container rendered
+as ``<div class="name">`` and closed by a matching ``:::`` (nest by
+giving the outer container more colons, e.g. `::::`); the name may be
+followed by brace attributes (``::: aside {.right}``). ``::: aside``
+floats as a muted side box, floating in the side zone at the article's
+left on all but phone widths — the same margin float ``{.margin}`` (or
+``::: margin``) gives any block — and ``::: nocols`` opts its section out
+of the column layout. A brace-attribute
+line as a block's last line (no blank line between) applies to the whole
+block, e.g. a paragraph ending with ``{.wide}`` breaks out of the column
+layout as a full-width element; written after a block (code fence,
+heading, container, ...) it applies to that preceding block. Bare URLs autolink (GFM), with
 the ``https://`` scheme hidden in the link text (``http://`` and other
 schemes stay visible; manually labelled links are untouched), and
 ``H~2~O`` / ``x^2^`` give sub/superscripts.
 
+render() also builds the layout structure: the top-level blocks are
+segmented for the column layout — h1/h2 headings, ``.wide`` blocks and
+margin-breakout blocks (``.margin``, ``::: aside``) stand on their own,
+the runs between them are wrapped in ``<div class="colseg">`` (tagged
+``.cols`` when the segment holds enough text, unless a ``::: nocols``
+container opts it out). The result carries ``multicol`` when the whole
+body justifies columns (views.py puts the class on the article); how
+many columns (never more than two), whether the margin breakout applies
+and every other viewport adaptation is then pagerite.css's call. The
+thresholds measure visible text, code blocks excluded.
+
 markdown-it's typographer is enabled, so body text gets SmartyPants-style
 replacements: straight quotes become curly, ``--`` / ``---`` become en / em
 dashes, ``...`` becomes an ellipsis, ``(c)`` becomes ©, and so on. Single
@@ -27,12 +51,15 @@ classes, e.g. `![alt](photo.avif "Caption"){.right}`.
 
 import re
 from datetime import datetime, timedelta
+from typing import NamedTuple
 
 from markdown_it import MarkdownIt
 from markdown_it.common.utils import escapeHtml
 from markdown_it.renderer import RendererHTML
 from mdit_py_plugins.admon import admon_plugin
 from mdit_py_plugins.attrs import attrs_plugin
+from mdit_py_plugins.attrs.parse import ParseError, parse as parse_attrs
+from mdit_py_plugins.container import container_plugin
 from mdit_py_plugins.deflist import deflist_plugin
 from mdit_py_plugins.footnote import footnote_plugin
 from mdit_py_plugins.gfm_autolink import gfm_autolink_plugin
@@ -65,6 +92,31 @@ def _highlight(text: str, lang: str, _attrs: str) -> str:
     return highlight(text, lexer, _formatter)
 
 
+def _fence_rule(
+    self: RendererHTML,
+    tokens,
+    idx: int,
+    options,
+    env: dict,
+) -> str:
+    """Render a fenced code block.
+
+    Like the default fence rule, but block attributes (a trailing `{...}`
+    line, applied to the fence token by _block_attrs) go on the <pre> — the
+    block element — instead of the <code>, which keeps only the language
+    class. This is what makes e.g. `{.wide}` or `{style="..."}` after a
+    code fence style the block itself.
+    """
+    token = tokens[idx]
+    info = token.info.strip() if token.info else ""
+    lang = info.split(maxsplit=1)[0] if info else ""
+    highlighted = (_highlight(token.content, lang, "")
+                   or escapeHtml(token.content))
+    code_class = f' class="{options.langPrefix}{lang}"' if lang else ""
+    return (f"<pre{self.renderAttrs(token)}><code{code_class}>"
+            f"{highlighted}</code></pre>\n")
+
+
 def _image_rule(
     self: RendererHTML,
     tokens,
@@ -107,6 +159,10 @@ def _unwrap_lone_figures(state) -> None:
         if child and child.type == "image":
             if (tokens[i - 1].type == "paragraph_open"
                     and tokens[i + 1].type == "paragraph_close"):
+                # A lone image becomes a <figure> (see _image_rule); block
+                # attrs on the paragraph (e.g. a trailing {.wide} line) move
+                # onto the image so they survive the unwrap.
+                _apply_attrs(child, tokens[i - 1].attrs or {})
                 tokens[i - 1].hidden = True
                 tokens[i + 1].hidden = True
 
@@ -149,6 +205,111 @@ def _shorten_autolinks(state) -> None:
                     text.content = text.content.removeprefix("https://")
 
 
+_CONTAINER_NAME_RE = re.compile(r"[a-zA-Z][\w-]*")
+
+
+def _apply_attrs(token, attrs: dict) -> None:
+    """Join/set parsed brace attributes (`{.class key=value}`) on a token."""
+    for key, value in attrs.items():
+        if key == "class":
+            token.attrJoin("class", value)
+        else:
+            token.attrSet(key, value)
+
+
+def _container_validate(params: str, _markup: str) -> bool:
+    """`::: name`, optionally followed by brace attrs (`::: aside {.right}`)."""
+    name, _, rest = params.strip().partition(" ")
+    if not _CONTAINER_NAME_RE.fullmatch(name):
+        return False
+    rest = rest.strip()
+    if not rest:
+        return True
+    try:
+        pos, _ = parse_attrs(rest)
+    except ParseError:
+        return False
+    # parse() stops at (returns the index of) the closing brace.
+    return pos == len(rest) - 1
+
+
+def _container_attrs(state) -> None:
+    """Apply `::: name {attrs}` classes to container tokens at parse time.
+
+    The container plugin's default render is a plain renderToken, so the
+    name and brace attributes must live on the token itself — and being a
+    core rule (rather than a render rule) lets the segmentation in
+    render() see the classes (::: aside's margin breakout, the ::: nocols
+    opt-out, {.wide} containers).
+    """
+    for token in state.tokens:
+        if token.type != "container_block_open":
+            continue
+        name, _, rest = token.info.strip().partition(" ")
+        token.attrJoin("class", name)
+        if rest.strip():
+            _, attrs = parse_attrs(rest.strip())
+            _apply_attrs(token, attrs)
+
+
+def _block_attrs(state) -> None:
+    """Apply `{.class key=value}` on a block's last line to the block.
+
+    The inline attrs plugin only covers attributes right after an image,
+    code span or link; this extends the same brace syntax to whole blocks,
+    e.g. a paragraph ending with a `{.wide}` line (no blank line between)
+    gets the `wide` class and thereby breaks out of the column layout.
+    A lone `{...}` paragraph applies to the previous block instead (this
+    is how headings take attributes, since a heading's next line always
+    starts a new paragraph). Runs before the typographer so quotes inside
+    attributes stay straight.
+    """
+    tokens = state.tokens
+    for i, token in enumerate(tokens):
+        if token.type != "inline" or not token.children:
+            continue
+        text = token.children[-1]
+        if (text.type != "text" or not text.content.startswith("{")
+                or not text.content.endswith("}")):
+            continue
+        try:
+            _, attrs = parse_attrs(text.content.strip())
+        except ParseError:
+            continue
+        standalone = len(token.children) == 1
+        if not standalone and token.children[-2].type != "softbreak":
+            continue
+        # The target: the enclosing block for a trailing attrs line, or the
+        # previous same-level block for a standalone attrs paragraph —
+        # including self-contained blocks like code fences and <hr>. Never
+        # a hidden token (tight-list paragraphs render no tag to hold the
+        # attributes) — in that case leave the text untouched instead of
+        # silently swallowing it.
+        own = i - 1  # standalone: the attrs paragraph's own opening token
+        j = i - 1
+        while j >= 0:
+            target = tokens[j]
+            if target.hidden:
+                pass
+            elif standalone:
+                if (j != own and target.level == tokens[own].level
+                        and (target.nesting == 1
+                             or target.type in ("fence", "code_block", "hr"))):
+                    break
+            elif target.nesting == 1:
+                break
+            j -= 1
+        if j < 0:
+            continue
+        _apply_attrs(tokens[j], attrs)
+        if standalone:
+            tokens[own].hidden = True
+            token.children = []
+            tokens[i + 1].hidden = True
+        else:
+            del token.children[-2:]
+
+
 md = (
     MarkdownIt(
         "default",
@@ -161,6 +322,7 @@ md = (
     )
     .use(attrs_plugin)
     .use(admon_plugin)
+    .use(container_plugin, "block", validate=_container_validate)
     .use(footnote_plugin)
     .use(deflist_plugin)
     .use(tasklists_plugin, enabled=True)
@@ -169,36 +331,153 @@ md = (
     .use(superscript_plugin)
 )
 md.add_render_rule("image", _image_rule)
+md.add_render_rule("fence", _fence_rule)
+# GFM alerts (`> [!NOTE]` etc.), built into markdown-it-py's blockquote rule.
+md.options["alerts"] = True
+# Block attrs must be stripped before the typographer curlifies their quotes.
+md.core.ruler.before("replacements", "block_attrs", _block_attrs)
+md.core.ruler.push("container_attrs", _container_attrs)
 md.core.ruler.push("unwrap_lone_figures", _unwrap_lone_figures)
 md.core.ruler.push("tag_task_checkboxes", _tag_task_checkboxes)
 md.core.ruler.push("shorten_autolinks", _shorten_autolinks)
 
 
+# Text-length thresholds (visible characters, code blocks excluded) for the
+# column layout: the article goes .multicol past MULTICOL_TEXT, and a column
+# segment gets .cols past COLS_TEXT.
+MULTICOL_TEXT = 1800
+COLS_TEXT = 600
+
+_PRE_BLOCK_RE = re.compile(r"<pre\b.*?</pre>", re.S)
+_TAG_RE = re.compile(r"<[^>]+>")
+
+# Classes that take their block out of the column flow: .wide is a
+# full-width separator, .margin/.aside float in the side zone at the
+# article's left (they must be direct .body children for that — the zone
+# rules key off it — never inside a column).
+_WIDE = "wide"
+_BREAKOUT = ("margin", "aside")
+
+
+class Rendered(NamedTuple):
+    """render() result: the segmented body HTML, and whether the article
+    should carry .multicol (enough visible text to justify columns)."""
+
+    html: str
+    multicol: bool
+
+
+def _classes(token) -> set[str]:
+    return set((token.attrGet("class") or "").split())
+
+
+def _text_len(html: str) -> int:
+    """Visible-text length of rendered HTML, code blocks excluded."""
+    return len(_TAG_RE.sub("", _PRE_BLOCK_RE.sub("", html)).strip())
+
+
+def _top_level_blocks(tokens: list) -> list[list]:
+    """Split the token stream into its top-level blocks.
+
+    A new block starts at each level-0 opening/self-contained token;
+    closing and nested tokens (inline children, sub-containers) belong to
+    the current block, so every slice is balanced and renders on its own.
+    """
+    blocks = []
+    for token in tokens:
+        if token.level == 0 and token.nesting >= 0:
+            blocks.append([token])
+        elif blocks:
+            blocks[-1].append(token)
+    return blocks
+
+
+def _is_boundary(block: list) -> bool:
+    """True for blocks that never go inside a column segment (see the
+    _WIDE/_BREAKOUT comment above): h1/h2 headings, anything carrying
+    .wide, and blocks whose own element carries .margin/.aside — for a
+    lone-image paragraph (which renders as a <figure>) the image's classes
+    count as the block's own."""
+    first = block[0]
+    if first.type == "heading_open" and first.tag in ("h1", "h2"):
+        return True
+    own = _classes(first)
+    for token in block:
+        if _WIDE in _classes(token):
+            return True
+        if token.type == "inline":
+            children = token.children or []
+            if any(_WIDE in _classes(c) for c in children):
+                return True
+            if len(children) == 1 and children[0].type == "image":
+                own |= _classes(children[0])
+    return bool(own & set(_BREAKOUT))
+
+
 def render(
     text: str,
     page_path: str = "",
     created: datetime | None = None,
     modified: datetime | None = None,
-) -> str:
-    """Render Markdown text to an HTML string.
+) -> Rendered:
+    """Render Markdown text to the article body's HTML and layout flags.
+
+    The top-level blocks are grouped into column segments: boundary blocks
+    (h1/h2 headings, .wide, margin-breakout blocks — see _is_boundary) are
+    rendered bare, the runs between them wrapped in <div class="colseg">.
+    A segment is tagged .cols when it holds enough text (COLS_TEXT) and no
+    ::: nocols container; the article is .multicol when the whole body
+    exceeds MULTICOL_TEXT. pagerite.css keys all column and margin-breakout
+    layout off these classes.
 
     A ``{dates}`` line expands to the article's published/updated dateline
     (needs ``created``/``modified``; left as-is in contexts without them,
     e.g. the editor preview). Position is the author's choice — typically
     right after the article's h1.
     """
-    html = md.render(text, {"page_path": page_path})
+    env = {"page_path": page_path}
+    blocks = _top_level_blocks(md.parse(text, env))
+    # Group consecutive non-boundary blocks into segments (is_segment,
+    # flat tokens); boundary blocks stand on their own between them.
+    groups: list[tuple[bool, list]] = []
+    for block in blocks:
+        if _is_boundary(block):
+            groups.append((False, block))
+        elif groups and groups[-1][0]:
+            groups[-1][1].extend(block)
+        else:
+            groups.append((True, list(block)))
+
+    parts = []
+    total = 0
+    for is_segment, group in groups:
+        html = md.renderer.render(group, md.options, env)
+        if not html.strip():
+            continue  # e.g. a consumed standalone-attrs paragraph
+        text_len = _text_len(html)
+        total += text_len
+        if not is_segment:
+            parts.append(html)
+            continue
+        nocols = any(
+            "nocols" in _classes(t)
+            for t in group
+            if t.type == "container_block_open"
+        )
+        cols = " cols" if text_len > COLS_TEXT and not nocols else ""
+        parts.append(f'<div class="colseg{cols}">{html}</div>')
+    html = "".join(parts)
     if created is not None and "<p>{dates}</p>" in html:
         html = html.replace("<p>{dates}</p>", _dateline(created, modified))
-    return html
+    return Rendered(html, total > MULTICOL_TEXT)
 
 
 def _dateline(created: datetime, modified: datetime | None) -> str:
     """Dateline for the ``{dates}`` tag: "1 Jan 2026", plus
-    " – edited 3 Jan 2026" when the last edit came >= 24h after
+    " – edited 3 Jan 2026" when the last edit came >= 48h after
     publishing (quick fixes right after posting stay unmentioned)."""
     out = f'<time datetime="{created.isoformat()}">{created.day} {created:%b %Y}</time>'
-    if modified is not None and modified - created >= timedelta(hours=24):
+    if modified is not None and modified - created >= timedelta(hours=48):
         out += f' – edited <time datetime="{modified.isoformat()}">{modified.day} {modified:%b %Y}</time>'
     return f'<p class="dateline">{out}</p>'
 

pagerite/themes/corporate/banner.css

@@ -3,11 +3,6 @@
    SVG from the active palette (var(--accent)), so one SVG serves light
    and dark — and other themes too. */
 
-#banner {
-  min-height: 15rem;
-  border-bottom: none;
-}
-
 /* Artwork colors, light mode */
 .cb-bg0 {
   stop-color: #ffffff;

pagerite/themes/corporate/theme.css

@@ -16,6 +16,7 @@
   --line: #12203f14;
   --font-body: var(--font-inter);
   --font-heading: var(--font-montserrat);
+  --code-x-height: 0.546; /* Inter's x-height ratio */
 }
 
 @media (prefers-color-scheme: dark) {
@@ -32,18 +33,13 @@
   }
 }
 
-::selection {
-  background: var(--accent);
-  color: #fff;
-}
-
 /* Genuinely large solid brand with a soft blue shadow overlapping the
    artwork — conservative, but unmissable. */
 #brand {
   font-size: clamp(4rem, 11vw, 8.5rem);
   font-weight: 800;
   letter-spacing: -0.04em;
-  line-height: 1;
+  line-height: 1.1;
   white-space: nowrap;
   color: var(--accent2);
   filter: drop-shadow(0 0.4rem 1.4rem rgb(10 92 255 / 0.3));
@@ -112,7 +108,6 @@ article h3 {
   font-weight: 700;
   font-size: 0.95rem;
   letter-spacing: 0.08em;
-  text-transform: uppercase;
   color: var(--muted);
 }
 
@@ -140,7 +135,3 @@ pre {
 img {
   border-radius: 4px;
 }
-
-::view-transition {
-  background: var(--bg);
-}

pagerite/themes/eyes/banner.css

@@ -1,7 +1,13 @@
 /* Eyes banner design: a canvas critter watching the cursor from the
    grass (banner.html — markup + styles + script inlined by the backend
-   into #page-banner). Fixed-height stage matching the canvas. */
+   into #page-banner). The canvas fills the banner; the scene composes
+   against the 13rem layout box and extends flat grass into any overflow
+   a theme adds below (summer's cross-fade strip). */
 
-#banner {
-  height: 240px;
+/* Opt out of the base parallax (scale overscan + --pry drift): it lands on
+   the design wrapper the backend puts around banner.html, and scaling from
+   the bottom edge would crop the top of the composed scene — pushing the
+   critter out of view — while this canvas animates on its own. */
+#page-banner>[data-design="eyes"] {
+  transform: none;
 }

pagerite/themes/eyes/banner.html

@@ -2,7 +2,13 @@
 <style>
   #eyes {
     width: 100%;
-    height: 240px;
+    /* 13rem — the banner's layout height, correct from the first frame,
+       before any external stylesheet has sized #page-banner. Themes that
+       extend the banner past the layout box (summer's overflow fade) raise
+       --eyes-h to 100% so the canvas follows the taller stage; the script
+       still composes the scene against the 13rem box and only extends the
+       meadow, so the scene itself never shifts. */
+    height: var(--eyes-h, 13rem);
     display: block;
   }
 </style>
@@ -10,32 +16,51 @@
 (() => {
   const c = document.getElementById('eyes')
   const ctx = c.getContext('2d')
-  const DPR = devicePixelRatio || 1
 
-  const fit = () => {
-    const w = Math.max(1, c.clientWidth)
-    const h = Math.max(1, c.clientHeight)
-    c.width = Math.round(w * DPR)
-    c.height = Math.round(h * DPR)
+  // Sync the backing store to the canvas' laid-out size. Checked every
+  // frame: this inline script runs before the stylesheets that size
+  // #page-banner, so observers/load events can still miss the transition.
+  // Assigning width/height also clears the canvas. DPR is read here, not
+  // captured: it changes with browser zoom.
+  const syncSize = () => {
+    const DPR = devicePixelRatio || 1
+    const w = Math.round(Math.max(1, c.clientWidth) * DPR)
+    const h = Math.round(Math.max(1, c.clientHeight) * DPR)
+    if (c.width !== w || c.height !== h) {
+      c.width = w
+      c.height = h
+    }
     ctx.setTransform(DPR, 0, 0, DPR, 0, 0)
   }
 
-  fit()
-  addEventListener('resize', fit)
-
   let mx = 0
   let my = 0
   let lastMove = 0
 
-  addEventListener('mousemove', e => {
+  // Mouse and touch tracked with separate listeners (pointer events arrive
+  // too late on some mobile browsers). Passive listeners: a drag on the
+  // banner still scrolls the page — on browsers that stop delivering
+  // touchmove once scrolling takes over, the gaze just follows until then.
+  const track = (x, y) => {
     const r = c.getBoundingClientRect()
 
     // Convert viewport coordinates into the canvas' CSS-pixel coordinate
     // system. This remains correct with browser zoom, CSS transforms, etc.
-    mx = (e.clientX - r.left) * c.clientWidth / r.width
-    my = (e.clientY - r.top) * c.clientHeight / r.height
+    mx = (x - r.left) * c.clientWidth / r.width
+    my = (y - r.top) * c.clientHeight / r.height
     lastMove = performance.now()
-  })
+  }
+
+  addEventListener('mousemove', e => track(e.clientX, e.clientY))
+
+  const trackTouch = e => {
+    const t = e.touches[0]
+
+    if (t) track(t.clientX, t.clientY)
+  }
+
+  addEventListener('touchstart', trackTouch, { passive: true })
+  addEventListener('touchmove', trackTouch, { passive: true })
 
   let gx = 0.5
   let gy = 0.5
@@ -54,7 +79,7 @@
   ]
 
   const ridgeY = (x, w, h) =>
-    h * 0.72 +
+    h * 0.83 +
     Math.sin(x * 0.012) * 10 +
     Math.sin(x * 0.003 + 1.4) * 16 +
     Math.sin(x * 0.02 + 0.7) * 3
@@ -114,7 +139,7 @@
 
     for (let i = 0; i < 5; i++) {
       const x = (i + 0.5) * w / 5
-      const y = h * 0.58 + Math.sin(i * 1.7) * 8
+      const y = h * 0.69 + Math.sin(i * 1.7) * 8
 
       ctx.fillStyle = '#5f8d4e'
       ctx.beginPath()
@@ -307,7 +332,10 @@
     ctx.moveTo(0, h)
     ctx.lineTo(0, ridgeY(0, w, h))
 
-    for (let x = 0; x <= w; x += 8)
+    // Sample one step PAST the right edge (x <= w + 8): stopping at w would
+    // leave the path closing with a visible vertical drop at the edge
+    // whenever the width isn't a multiple of the 8px step.
+    for (let x = 0; x <= w + 8; x += 8)
       ctx.lineTo(x, ridgeY(x, w, h))
 
     ctx.lineTo(w, h)
@@ -319,7 +347,7 @@
     ctx.moveTo(0, h)
     ctx.lineTo(0, ridgeY(0, w, h) + 10)
 
-    for (let x = 0; x <= w; x += 8)
+    for (let x = 0; x <= w + 8; x += 8)
       ctx.lineTo(x, ridgeY(x, w, h) + 10)
 
     ctx.lineTo(w, h)
@@ -362,8 +390,17 @@
     const dt = Math.min(now - prev, 100) / 16.7
     prev = now
 
+    syncSize()
+
     const w = c.clientWidth
-    const h = c.clientHeight
+    // Compose the scene against the banner's layout box, not the canvas:
+    // a theme may extend #page-banner past #banner (e.g. summer overflows
+    // the artwork into the page for a masked cross-fade), and the critter
+    // must stay in the visible part. The overflow strip is filled with the
+    // flat meadow color below — a hard canvas edge would show through the
+    // fade, a grass extension just blends.
+    const h = Math.min(c.clientHeight,
+      c.closest('#banner')?.clientHeight || c.clientHeight)
     const R = Math.min(h * 0.11, 38)
 
     if (now > nextMove && !hidePhase) {
@@ -399,6 +436,16 @@
     vy *= Math.pow(0.85, dt)
     yoff += vy * dt
 
+    // Clip the scene to the composed area: the ducking critter travels
+    // below it, and the overflow strip is only flat meadow painted after —
+    // without the clip the critter would leave trails there as it sinks.
+    // Clipping against grass-on-grass is invisible, so the duck still
+    // reads as sinking into the meadow.
+    ctx.save()
+    ctx.beginPath()
+    ctx.rect(0, 0, w, h)
+    ctx.clip()
+
     drawBackground(w, h)
 
     const cx0 = gx * w
@@ -415,6 +462,18 @@
     drawCritter(cx0, eyeY, R, now, dt)
     drawForeground(w, h)
 
+    ctx.restore()
+
+    // Extend the meadow into any overflow below the composed scene, with
+    // the same two layers drawForeground leaves at the bottom (base grass
+    // plus the dark under-band) so the joint is invisible.
+    if (c.clientHeight > h) {
+      ctx.fillStyle = '#69ae4b'
+      ctx.fillRect(0, h, w, c.clientHeight - h)
+      ctx.fillStyle = 'rgba(48,102,34,0.18)'
+      ctx.fillRect(0, h, w, c.clientHeight - h)
+    }
+
     requestAnimationFrame(frame)
   }
 

pagerite/themes/nitro/banner.css

@@ -2,13 +2,6 @@
    (inlined by the backend into #page-banner), in neutral dark greys that
    follow the page's color scheme. */
 
-/* Bezier-swept banner with wide orange stripes (inlined SVG), separated
-   from the page by a straight orange blade. */
-#banner {
-  height: 13rem;
-  border-bottom: 4px solid var(--accent);
-}
-
 /* Banner artwork dark tones: neutral greys in light mode (retinted to the
    page's violet family by the dark-scheme block below). */
 .nb-base {
@@ -44,6 +37,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
+
   /* Banner dark tones tinted to the same violet family as the page. */
   .nb-base {
     fill: #100d18;

pagerite/themes/nitro/theme.css

@@ -41,6 +41,7 @@
 
   --font-body: var(--font-montserrat);
   --font-heading: var(--font-literata);
+  --code-x-height: 0.517; /* Montserrat's x-height ratio */
 }
 
 /* Dark scheme: same identity, but the page goes deep violet (never muddy
@@ -63,13 +64,19 @@
 
 ::selection {
   background: var(--accent);
-  color: var(--ink);
+}
+
+/* Any banner used is separated from page by a thick orange line */
+#banner {
+  border-bottom: 4px solid var(--accent);
 }
 
 /* Oversized outlined brand, spilling off the banner edge: orange stroke,
    solid black fill. */
 #brand {
-  font-size: 10rem;
+  /* Scales down proportionally below ~1000px: 10rem at a 62.5rem viewport,
+     shrinking with vmin (smaller of viewport width/height) below that. */
+  font-size: clamp(2.5rem, 16vmin, 10rem);
   line-height: 1.2;
   font-weight: 700;
   letter-spacing: 0.04em;
@@ -131,14 +138,9 @@
 
 /* Console-style headings: uppercase monospace. h1 in the page text color
    with a hazard-stripe underline, h2 deep orange, h3 cyan. */
-article h1,
-article h2,
-article h3 {
+article h1 {
   text-transform: uppercase;
   letter-spacing: 0.02em;
-}
-
-article h1 {
   color: var(--text);
   font-weight: 700;
   padding-bottom: 0.5rem;
@@ -206,7 +208,3 @@ pre {
 img {
   border-radius: 3px;
 }
-
-::view-transition {
-  background: var(--bg);
-}

pagerite/themes/purple/banner.css

@@ -15,7 +15,3 @@
 .banner-fade {
   stop-color: var(--bg);
 }
-
-#banner {
-  min-height: 13rem;
-}

pagerite/themes/purple/theme.css

@@ -17,11 +17,7 @@
   --line: #ffffff1c;
   --font-body: var(--font-literata);
   --font-heading: var(--font-fraunces);
-}
-
-::selection {
-  background: var(--accent2);
-  color: #fff;
+  --code-x-height: 0.507; /* Literata's x-height ratio */
 }
 
 /* Oversized tilted brand in the sky→violet gradient. */
@@ -91,7 +87,3 @@ blockquote {
 pre {
   --code-bg: var(--surface);
 }
-
-::view-transition {
-  background: #000;
-}

pagerite/themes/stars/banner.css

@@ -1,7 +1,7 @@
 /* Stars banner design: a drifting starfield (banner.html — canvas + script
-   inlined by the backend into #page-banner). Fixed-height stage matching
-   the canvas. */
-
-#banner {
-  height: 240px;
-}
+   inlined by the backend into #page-banner). The canvas takes the banner's
+   13rem layout height directly so it never renders unclipped before the
+   main stylesheet loads; the starfield scales to any height. The design's
+   opt-out of theme banner overflow/fade effects also lives in banner.html's
+   inline <style>, so it applies atomically with the markup (this file would
+   load a beat later and let the overflow flash through mid-transition). */

pagerite/themes/stars/banner.html

@@ -2,27 +2,47 @@
 <style>
   #stars {
     width: 100%;
-    height: 240px;
+    /* 13rem — the banner's layout height, not 100%: a percentage only
+       resolves after the main stylesheet sizes #page-banner, and until
+       then the canvas would render at its intrinsic height, unclipped,
+       over the page. (This design always opts out of theme overflows —
+       below — so the layout height is always the right one.) */
+    height: 13rem;
     display: block;
   }
+
+  /* The night sky stays a windowed stage: undo the summer theme's banner
+     overflow/cross-fade — a starfield must not bleed into a daylit page.
+     Kept in this inlined <style> (not banner.css) so the opt-out applies
+     atomically with the markup; a separate stylesheet can arrive a beat
+     later and let the overflow flash through mid-transition. Later in
+     document order than theme.css, so same-specificity rules win. */
+  #page-banner {
+    inset: 0;
+    mask-image: none;
+  }
 </style>
 <script><!--
 (() => {
   const c = document.getElementById('stars')
   const ctx = c.getContext('2d')
-  const DPR = devicePixelRatio || 1
 
-  const fit = () => {
-    const w = Math.max(1, c.clientWidth)
-    const h = Math.max(1, c.clientHeight)
-    c.width = Math.round(w * DPR)
-    c.height = Math.round(h * DPR)
+  // Sync the backing store to the canvas' laid-out size. Checked every
+  // frame: this inline script runs before the stylesheets that size
+  // #page-banner, so observers/load events can still miss the transition.
+  // Assigning width/height also clears the canvas. DPR is read here, not
+  // captured: it changes with browser zoom.
+  const syncSize = () => {
+    const DPR = devicePixelRatio || 1
+    const w = Math.round(Math.max(1, c.clientWidth) * DPR)
+    const h = Math.round(Math.max(1, c.clientHeight) * DPR)
+    if (c.width !== w || c.height !== h) {
+      c.width = w
+      c.height = h
+    }
     ctx.setTransform(DPR, 0, 0, DPR, 0, 0)
   }
 
-  fit()
-  addEventListener('resize', fit)
-
   const stars = Array.from({ length: 110 }, () => ({
     x: Math.random(),
     y: Math.random(),
@@ -33,6 +53,7 @@
   let prev = performance.now()
   ;(function frame(now) {
     if (!c.isConnected) return
+    syncSize()
     const w = c.clientWidth
     const h = c.clientHeight
     const dt = Math.min(now - prev, 100)

pagerite/themes/summer/banner.css

@@ -2,10 +2,6 @@
    backend into #page-banner) — rolling hills, leafy bushes, swaying
    flowers, drifting clouds and a sun that rises as you scroll. */
 
-#banner {
-  min-height: 15rem;
-}
-
 /* The artwork fades into the page background at its bottom edge. */
 .summer-fade {
   stop-color: var(--bg);
@@ -44,9 +40,17 @@
     animation: summer-sun 9s ease-in-out infinite alternate;
   }
 
-  #page-banner .cloud-a { animation: summer-drift 56s ease-in-out infinite alternate; }
-  #page-banner .cloud-b { animation: summer-drift 73s ease-in-out infinite alternate-reverse; }
-  #page-banner .cloud-c { animation: summer-drift 64s ease-in-out infinite alternate; }
+  #page-banner .cloud-a {
+    animation: summer-drift 56s ease-in-out infinite alternate;
+  }
+
+  #page-banner .cloud-b {
+    animation: summer-drift 73s ease-in-out infinite alternate-reverse;
+  }
+
+  #page-banner .cloud-c {
+    animation: summer-drift 64s ease-in-out infinite alternate;
+  }
 
   #page-banner .flower {
     transform-box: fill-box;
@@ -55,21 +59,42 @@
   }
 
   /* Stagger the sway so the meadow doesn't move in lockstep. */
-  #page-banner .flower:nth-child(3n) { animation-delay: -1.7s; }
-  #page-banner .flower:nth-child(3n + 1) { animation-delay: -3.1s; animation-duration: 6s; }
+  #page-banner .flower:nth-child(3n) {
+    animation-delay: -1.7s;
+  }
+
+  #page-banner .flower:nth-child(3n + 1) {
+    animation-delay: -3.1s;
+    animation-duration: 6s;
+  }
 }
 
 @keyframes summer-sun {
-  from { opacity: 0.22; }
-  to { opacity: 0.38; }
+  from {
+    opacity: 0.22;
+  }
+
+  to {
+    opacity: 0.38;
+  }
 }
 
 @keyframes summer-drift {
-  from { transform: translateX(-1.6%); }
-  to { transform: translateX(1.6%); }
+  from {
+    transform: translateX(-1.6%);
+  }
+
+  to {
+    transform: translateX(1.6%);
+  }
 }
 
 @keyframes summer-sway {
-  from { transform: rotate(-2.6deg); }
-  to { transform: rotate(2.6deg); }
+  from {
+    transform: rotate(-2.6deg);
+  }
+
+  to {
+    transform: rotate(2.6deg);
+  }
 }

pagerite/themes/summer/theme.css

@@ -8,6 +8,7 @@
 
   /* Every color is sampled (or text-darkened) from banner.svg. */
   --bg: #e6f4cf;
+  --sky: #d9f1ff;
   /* pale meadow — the banner fades into this */
   --surface: #f8fbf0;
   --text: #2c4a2f;
@@ -28,6 +29,7 @@
   --font-body: var(--font-cause);
   --font-heading: var(--font-new-rocker);
   --font-brand: var(--font-cause);
+  --code-x-height: 0.5; /* Cause's x-height ratio */
 }
 
 /* The page is the same landscape the banner paints: hazy sky light up top
@@ -56,15 +58,33 @@ body {
   color: var(--text);
 }
 
-::selection {
-  background: var(--sun);
-  color: #3d5223;
+/* No separation between banner and page: the frame loses its background,
+   border and shadow, and the artwork overflows into the document below,
+   masked by a transparency gradient so it cross-fades into the body's fixed
+   meadow gradient. A plain color match is impossible — both sides are
+   gradients, and the parallax drift keeps the banner side moving. */
+#banner {
+  background: none;
+  border-bottom: 0;
+  box-shadow: none;
 }
 
-/* The banner frame ties into the meadow beneath it. */
-#banner {
-  border-bottom-color: #4f913b30;
-  box-shadow: 0 0.3rem 1rem #4f913b22;
+#page-banner {
+  inset: 0 0 -6rem;
+  /* Paints over the page background in the overlap, but never swallows its
+     clicks. */
+  pointer-events: none;
+  mask-image: linear-gradient(180deg, #000 calc(100% - 6rem), transparent);
+  /* Canvas banner designs (eyes) default to the 13rem layout height; here
+     they must fill the taller overflow stage so their meadow extension
+     reaches through the fade strip. */
+  --eyes-h: 100%;
+}
+
+/* The mask above replaced the SVG's flat-color bottom fade (meadowFade) —
+   fading to a single --bg would reintroduce a seam against the gradient. */
+#page-banner .summer-fade {
+  stop-opacity: 0;
 }
 
 /* Cheerful oversized tilted brand in a sky→grass→flower gradient. */
@@ -114,14 +134,26 @@ body {
 }
 
 /* Content sits in a soft wash of sunlit meadow rather than on a white
-   card. */
+   card. The wash lives on a pseudo-element so it can carry a vertical
+   mask: it fades in from transparent over the strip where the banner
+   artwork overflows into the page, so the two never fight — no matter
+   which side paints on top. */
 main {
+  position: relative;
+}
+
+main::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
   background: linear-gradient(90deg,
       transparent,
       #f0f8dc80 15%,
       #f0f8dc8c 50%,
       #f0f8dc80 85%,
       transparent);
+  mask-image: linear-gradient(180deg, transparent, #000 6rem);
 }
 
 /* The sidebar is a piece of the same meadow: glassy green with a light
@@ -131,6 +163,8 @@ main {
   border-right: 1px solid #ffffff80;
   border-bottom: 1px solid var(--line);
   box-shadow: 0 0.3rem 1rem #4f913b1f;
+  border-radius: 1rem;
+  margin-inline: 0.5rem;
 }
 
 #sidebar a {
@@ -260,8 +294,7 @@ figcaption,
   background: linear-gradient(160deg, #eef7dd, #d9eec5);
 }
 
-/* The page transition exposes summer color around the rotating
-   snapshots. */
 ::view-transition {
-  background: var(--bg);
+  /* Override to mid sky shade instead of the darker --bg we otherwise get */
+  background: var(--sky);
 }

pagerite/views.py

@@ -8,10 +8,11 @@ can swap them without reloading the page chrome.
 Navigation walks the Node tree directly (see data.py): nav_html lists the
 top level — the front page (slug "") is an ordinary top-level item, not
 the parent of the others — and sidebar_html the sub-navigation of the
-current top-level section, rendered only when the section offers at
-least two published items. Nodes without content are category labels; nav links
+current top-level section, rendered only from the second level down
+(main-level pages list their children as cards after the content instead,
+see page_content). Nodes without content are category labels; nav links
 to them point straight at their first child page (first_leaf), and their
-own URL renders a placeholder page (render_category).
+own URL renders a card-listing page (render_category, a 404).
 """
 
 from pathlib import Path
@@ -110,6 +111,35 @@ def _editor_css_url(vite_url: str | None) -> str | None:
     return None
 
 
+def _inline_asset(url: str) -> str:
+    """Read a served asset's content for inlining into the page (prod only).
+
+    Handles build assets (``/_assets/...`` from the Vite build) and theme
+    files (``/_themes/{name}/...`` from pagerite/themes/).
+    """
+    if url.startswith("/_themes/"):
+        name, _, file = url.removeprefix("/_themes/").partition("/")
+        if _valid_name(name) and _valid_name(file):
+            return (THEMES / name / file).read_text()
+        raise ValueError(f"not a theme asset: {url}")
+    return (BUILD / url.lstrip("/")).read_text()
+
+
+def _inline_script(url: str) -> str:
+    """Read a built JS bundle for inlining (prod only).
+
+    Inline modules resolve relative imports against the document URL, not
+    the bundle's directory, so rewrite the build's relative chunk
+    specifiers ("./chunk.js") to absolute /_assets/ paths.
+    """
+    js = _inline_asset(url)
+    for chunk in _manifest().values():
+        file = chunk.get("file", "")
+        if file.endswith(".js"):
+            js = js.replace(f'"./{file.rsplit("/", 1)[-1]}"', f'"/{file}"')
+    return js
+
+
 def _layout(
     modules: list[str] = (),
     stylesheets: list[str] = (),
@@ -118,16 +148,21 @@ def _layout(
     banner_design: str = "",
     favicon: str = "",
     social: dict[str, str] | None = None,
-    extra_meta: dict[str, str] | None = None,
 ) -> Template:
-    """Page layout template with standard asset URLs and ES-module scripts.
+    """Page layout template with standard assets and ES-module scripts.
 
-    Stylesheets use ``blocking="render"`` so the browser waits for them before
-    showing the page, avoiding a flash of unstyled content. Order matters and
-    is fixed: base (Vite build, absent in dev where Vite injects it from JS),
-    theme and banner design (backend-served from pagerite/themes/), entry-
-    specific stylesheets (e.g. overlayscrollbars.css), then the user's custom
-    CSS last so it always wins.
+    In dev (PAGERITE_VITE_URL set) assets are linked from the Vite dev
+    server and stylesheets use ``blocking="render"`` so the browser waits
+    for them before showing the page, avoiding a flash of unstyled content.
+    In production all page assets are inlined into the document: stylesheets
+    become ``<style>`` elements and module scripts inline ``<script>``s, so
+    a page loads with no asset round trips. The on-demand bundles (editor,
+    analytics) stay external in both modes.
+
+    Order matters and is fixed: base (Vite build, absent in dev where Vite
+    injects it from JS), theme and banner design (from pagerite/themes/),
+    entry-specific stylesheets (e.g. overlayscrollbars.css), then the user's
+    custom CSS last so it always wins.
 
     In dev, pagerite.js re-appends the backend-rendered theme/design links
     (and the custom CSS) after the Vite-injected base styles, keeping this
@@ -135,9 +170,6 @@ def _layout(
 
     ``social`` maps meta keys to contents: ``og:*``/``article:*`` go out as
     property attributes, everything else (description, twitter:*) as name.
-
-    ``extra_meta`` is emitted as plain ``<meta name="..." content="...">``
-    tags after the editor meta tags; used for page-specific import hints.
     """
     doc = Document(E.Title, lang="en")
     # Responsive layout (see the 48rem breakpoint in pagerite.css) needs
@@ -155,33 +187,63 @@ def _layout(
     # one, browsers fall back to the build's /favicon.ico by convention.
     if favicon:
         doc.link(rel="icon", href=f"/_f/{favicon}", id="pagerite-favicon")
-    # Editor asset URLs for pagerite.js, which injects the 🖊️ edit pens
-    # itself once it has validated the session (pages render identically
-    # for everyone; editing is gated by the auth proxy in front of /_api).
-    script, editor_css = _editor_assets()
-    doc.meta(name="pagerite:editor-src", content=script[-1])
-    if editor_css:
-        doc.meta(name="pagerite:editor-css", content=editor_css)
-    for key, value in (extra_meta or {}).items():
-        doc.meta(name=key, content=value)
-    # Stylesheet links carry stable ids so the site editor's hot swap can
-    # keep each sheet at its rendered position (see swapRegions).
+    # Asset URLs for the on-demand bundles (editor, analytics) for
+    # pagerite.js, which injects the 🖊️ edit pens itself once it has
+    # validated the session (pages render identically for everyone; editing
+    # is gated by the auth proxy in front of /_api). Dev passes the Vite
+    # dev-server URLs as meta tags (Vite serves the modules and injects
+    # their CSS for hot reloads); production inlines all page assets and
+    # carries the on-demand URLs in one JSON script instead.
     vite_url = os.environ.get("PAGERITE_VITE_URL")
+    editor_scripts, editor_css = _editor_assets()
+    config = {
+        "pagerite:editor-src": editor_scripts[-1],
+        "pagerite:analytics-src": _analytics_assets()[0][0],
+    }
+    if editor_css:
+        config["pagerite:editor-css"] = editor_css
+    if vite_url:
+        for key, value in config.items():
+            doc.meta(name=key, content=value)
+    else:
+        # Inert JSON script; URLs never contain "</", but stay safe.
+        doc.script(
+            HTML(json.dumps(config).replace("</", "<\\/")),
+            type="application/json",
+            id="pagerite-assets",
+        )
+    # Stylesheets carry stable ids so the fetch-navigation and the site
+    # editor's hot swap can sync <head> positionally (see swapdoc.js).
+    # Production inlines the CSS as <style> elements: one less round trip
+    # per sheet, and fetch-navigation can carry them across swaps whole.
     sheets = [
         ("pagerite-base", _base_css_url(vite_url)),
         ("pagerite-theme", _theme_css_url(theme)),
         ("pagerite-banner", _banner_css_url(banner_design)),
     ]
     for id_, url in sheets:
-        if url:
+        if not url:
+            continue
+        if vite_url:
             doc.link(rel="stylesheet", href=url, blocking="render", id=id_)
+        else:
+            doc.style(HTML(_inline_asset(url)), id=id_)
     for url in stylesheets:
-        doc.link(rel="stylesheet", href=url, blocking="render")
+        if vite_url:
+            doc.link(rel="stylesheet", href=url, blocking="render")
+        else:
+            # Id from the file stem minus the content hash, so the head
+            # sync can match sheets across pages (e.g. the analytics sheet
+            # exists on /_a only and is added/removed on swaps).
+            stem = url.rsplit("/", 1)[-1].removesuffix(".css")
+            name = re.sub(r"-[A-Za-z0-9_-]{8}$", "", stem)
+            doc.style(HTML(_inline_asset(url)), id=f"pagerite-css-{name}")
     for src in modules:
-        doc.script(src=src, type="module")
+        if vite_url:
+            doc.script(src=src, type="module")
     if custom_css.strip():
         doc.style(custom_css, id="pagerite-user")
-    return Template(
+    body = (
         doc
         .header(
             E.div(E.Banner, id="page-banner"),
@@ -194,8 +256,23 @@ def _layout(
             E.main(E.Main, id="main"),
             id="content",
         )
-        .footer(None),  # kept empty for now; zero-height (see pagerite.css)
+        .footer(None)  # kept empty for now; zero-height (see pagerite.css)
     )
+    if not vite_url:
+        # Inline the bundles at the end of the body: module scripts are
+        # deferred anyway, and the page can render before they execute.
+        # Escape "</script" so it cannot terminate the element early (only
+        # ever occurs inside string literals, where the backslash escape is
+        # a no-op).
+        for src in modules:
+            js = re.sub(r"</script", r"<\\/script", _inline_script(src), flags=re.I)
+            # Stable id from the file stem minus the content hash; the
+            # analytics page's script (pagerite-js-analytics) is found and
+            # re-created by pagerite.js on fetch-navigations to /_a.
+            stem = src.rsplit("/", 1)[-1].removesuffix(".js")
+            name = re.sub(r"-[A-Za-z0-9_-]{8}$", "", stem)
+            body.script(HTML(js), type="module", id=f"pagerite-js-{name}")
+    return Template(body)
 
 
 def _brand_link(brand: str, brand_html: str = "") -> HTML:
@@ -256,17 +333,19 @@ def sidebar_html(menu: dict[str, Node], current: str) -> HTML:
     The sidebar is the current main level section's sub-navigation: the
     section's direct children as the top list level, with each item's own
     published children nested under it (third level and deeper), so it
-    exists only when there is something to navigate: the section must
-    offer at least two published items, or exactly one while viewing
-    anything else than that only page — the section index, a 404, a
-    grandchild (otherwise those pages offer no way to reach the child) —
-    and viewing that only page itself still shows the sidebar when the
-    page has published children of its own to reach.
-    The front page, leaf pages, the sole childless page of a one-page
-    section and childless sections get no aside element at all (rather
-    than an empty or useless one-item box).
+    exists only when there is something to navigate. It renders only from
+    the second level down: main-level pages (and the front page) list
+    their children as cards after the content instead of a sidebar. From
+    there, the section must offer at least two published items, or exactly
+    one while viewing anything else than that only page — the section
+    index, a 404, a grandchild (otherwise those pages offer no way to
+    reach the child) — and viewing that only page itself still shows the
+    sidebar when the page has published children of its own to reach.
+    Leaf pages, the sole childless page of a one-page section and
+    childless sections get no aside element at all (rather than an empty
+    or useless one-item box).
     """
-    if not current:
+    if not current or "/" not in current:
         return HTML("")
     section = current.split("/", 1)[0]
     node = menu.get(section)
@@ -435,21 +514,87 @@ def banner_source(menu: dict[str, Node], path: str) -> str | None:
 
 
 def page_content(menu: dict[str, Node], path: str) -> HTML:
-    """Render the contents of the #main element for a page."""
+    """Render the contents of the #main element for a page.
+
+    A page with published children (a category page) lists them as cards
+    after the markdown content.
+    """
     node = resolve(menu, path)[-1]
-    doc = E.article
+    rendered = render(node.content or "", path, node.created, node.modified)
+    # Long articles get .multicol: the article column cap lifts (see the
+    # #content grid in pagerite.css) and the body's .cols segments lay out
+    # in at most two columns. The .body html is already segmented by
+    # render() — the whole layout is driven by these classes.
+    doc = E.article(class_="multicol") if rendered.multicol else E.article
     with doc:
         # An h1 in the markdown owns the article heading; the title is
         # only rendered as h1 when the markdown has none of its own.
         if not has_h1(node.content or ""):
             doc.h1(node.title)
-        doc.div(
-            HTML(render(node.content or "", path, node.created, node.modified)),
-            class_="body",
-        )
+        doc.div(HTML(rendered.html), class_="body")
+        _cards(doc, menu, node, path)
     return HTML(str(doc))
 
 
+def _cards(doc, menu: dict[str, Node], node: Node, path: str) -> None:
+    """Card stacks of the node's published children (nothing when childless).
+
+    One column per direct child, all in a single full-width row (the .wide
+    breakout): the columns grow to fill the page and shrink rather than
+    wrap. A column holds the child's whole subtree flattened in menu order
+    — nesting levels are not split out — starting with the first page that
+    has actual content (the child itself when it does, its first leaf
+    otherwise, recursively). Each card is one <a> showing the page's share
+    image (the same heuristics as og:image) as the cover and its title;
+    image-less cards get a gradient cover and also show the description.
+    Only phrasing-level elements (spans) go inside the <a>: as a formatting
+    element it would be cloned by the HTML parser around any block-level
+    child, splitting one card into several links.
+    """
+    items = [(s, c) for s, c in sorted_nodes(node.children) if c.published]
+    if not items:
+        return
+    with doc.div(class_="cards wide"):
+        for slug, child in items:
+            cpath = f"{path}/{slug}" if path else slug
+            entries = list(_walk(child, cpath))
+            if not entries:
+                continue
+            with doc.div(class_="stack"):
+                for epath, enode in entries:
+                    _card(doc, enode, epath)
+
+
+def _walk(node: Node, path: str):
+    """Published content pages of a subtree, pre-order in menu order: the
+    node itself first when it has content (the stack's landing card), then
+    its descendants (content-less nodes contribute only their subtree)."""
+    if node.content:
+        yield path, node
+    for slug, child in sorted_nodes(node.children):
+        if child.published:
+            yield from _walk(child, f"{path}/{slug}")
+
+
+def _card(doc, node: Node, path: str) -> None:
+    """One card in a stack: cover + title, plus the description when the
+    page has no image (its card shows a gradient cover instead)."""
+    image = description = ""
+    if node.content:
+        html = render(node.content, path, node.created, node.modified).html
+        image, _ = _media(html)
+        if not image:
+            description = _description(html, 150)
+    with doc.a(href=f"/{path}", class_="card"):
+        if image:
+            doc.span(class_="cover", style=f'background-image: url("{image}")')
+        else:
+            doc.span(class_="cover")
+        doc.span(_title(path.rpartition("/")[2], node), class_="title")
+        if description:
+            doc.span(description, class_="desc")
+
+
 _FIRST_P = re.compile(r"<p[^>]*>(.*?)</p>", re.S)
 _TAG = re.compile(r"<[^>]+>")
 _IMG_TAG = re.compile(r"<img\b[^>]*>")
@@ -458,23 +603,34 @@ _ATTR_SRC = re.compile(r'src="([^"]+)"')
 _ATTR_CLASS = re.compile(r'class="([^"]*)"')
 
 
-def _share_media(html: str, base_url: str) -> tuple[str, str]:
-    """(image, video) share URLs from the rendered article.
+_SENTENCE_END = re.compile(r"[.!?][”'\")]*(?=\s|$)")
+
+
+def _description(html: str, limit: int = 200) -> str:
+    """Article description: the first paragraph's text, truncated at a
+    sentence end (or, failing that, a word boundary) within ``limit``.
+    Used for og:description."""
+    m = _FIRST_P.search(html)
+    text = unescape(_TAG.sub("", m.group(1) if m else ""))
+    text = " ".join(text.split())
+    if len(text) <= limit:
+        return text
+    # Prefer a clean cut: the last sentence ending within the limit, as
+    # long as it does not reduce the description to a tiny fragment.
+    if (end := max((m.end() for m in _SENTENCE_END.finditer(text[:limit])), default=0)) > limit // 2:
+        return text[:end]
+    return text[:limit].rsplit(" ", 1)[0] + "…"
+
+
+def _media(html: str) -> tuple[str, str]:
+    """Raw (image, video) srcs from rendered article HTML (relative ok).
 
     Image preference: an image with class "hero" (author override, may
     appear anywhere in the article), then the first raster image (SVGs
     rasterize poorly or not at all on many social scrapers), then the
     first SVG. Video: the first <video> — og:video is in the OGP spec and
-    honored mainly by Facebook; X/Twitter ignores it. Absolute URLs are
-    built from the request base, scrapers cannot use relative ones.
+    honored mainly by Facebook; X/Twitter ignores it.
     """
-    if not base_url:
-        return "", ""
-
-    def absolute(src: str) -> str:
-        src = unescape(src)
-        return src if src.startswith(("http://", "https://")) else f"{base_url}{src}"
-
     hero = raster = svg = video = ""
     for tag in _IMG_TAG.findall(html):
         if not (src := _ATTR_SRC.search(tag)):
@@ -493,7 +649,23 @@ def _share_media(html: str, base_url: str) -> tuple[str, str]:
         if m := _ATTR_SRC.search(tag):
             video = m.group(1)
             break
-    image = hero or raster or svg
+    return hero or raster or svg, video
+
+
+def _share_media(html: str, base_url: str) -> tuple[str, str]:
+    """(image, video) share URLs from the rendered article.
+
+    The _media picks as absolute URLs built from the request base —
+    social scrapers cannot use relative ones.
+    """
+    if not base_url:
+        return "", ""
+
+    def absolute(src: str) -> str:
+        src = unescape(src)
+        return src if src.startswith(("http://", "https://")) else f"{base_url}{src}"
+
+    image, video = _media(html)
     return (absolute(image) if image else "", absolute(video) if video else "")
 
 
@@ -509,11 +681,7 @@ def _social_meta(
     (social scrapers cannot use relative ones).
     """
     url = f"{base_url}/{path}" if base_url else ""
-    m = _FIRST_P.search(html)
-    text = unescape(_TAG.sub("", m.group(1) if m else ""))
-    text = " ".join(text.split())
-    if len(text) > 200:
-        text = text[:200].rsplit(" ", 1)[0] + "…"
+    text = _description(html)
     image, video = _share_media(html, base_url)
     return {
         "description": text,
@@ -570,20 +738,20 @@ def render_category(
     favicon: str = "",
     brand_html: str = "",
 ) -> str:
-    """Render the placeholder for a content-less category label (404).
+    """Render the listing for a content-less category label (404).
 
-    The node exists in the tree but has no page of its own. Nav links
-    point straight at its first child, so this is mainly seen in the site
-    editor, where the pen creates the landing page.
+    The node exists in the tree but has no page of its own: its published
+    children are listed as cards, like on a category page with content.
+    Nav links point straight at the first child, so this is mainly seen
+    in the site editor, where the pen creates the landing page.
     """
     node = resolve(menu, path)[-1]
     title = _title(path.rpartition("/")[2], node)
-    sidebar = sidebar_html(menu, path)
     doc = E.article
     with doc:
         doc.h1(title)
-        if sidebar:
-            doc.p("Pages in this section are listed in the menu on the left.")
+        if any(c.published for c in node.children.values()):
+            _cards(doc, menu, node, path)
         else:
             doc.p("This section has no page of its own yet.")
     return str(
@@ -591,7 +759,7 @@ def render_category(
             Title=f"{title} – {brand}" if brand else title,
             Brand=_brand_link(brand, brand_html),
             Nav=nav_html(menu, path),
-            Sidebar=sidebar,
+            Sidebar=sidebar_html(menu, path),
             Banner=banner_html(menu, path, theme),
             Main=HTML(str(doc)),
         ),
@@ -682,14 +850,23 @@ def render_analytics(
     favicon: str = "",
     brand_html: str = "",
 ) -> str:
-    """Render the analytics viewer as a normal page at /_a."""
+    """Render the analytics viewer as a normal page at /_a.
+
+    The analytics entry is inlined into this page only (prod) or loaded
+    from the Vite dev server (dev); its stylesheet rides along in <head>
+    so fetch-navigations can sync it into the live document. The initial
+    range is not rendered in: the client takes it from the URL hash or
+    derives it from the analytics data itself.
+    """
     page_scripts, page_stylesheets = _page_assets()
     analytics_scripts, analytics_stylesheets = _analytics_assets()
     scripts = page_scripts + analytics_scripts
     stylesheets = page_stylesheets + analytics_stylesheets
     doc = E.article
     with doc:
-        doc.div(id="analytics-app")
+        # .wide: the dashboard breaks out of the article column to the full
+        # viewport width, like wide figures (see the .wide rules).
+        doc.div(id="analytics-app", class_="wide")
     return str(
         _layout(
             scripts,
@@ -698,7 +875,6 @@ def render_analytics(
             theme,
             banner_design(menu, "_a", theme),
             favicon,
-            extra_meta={"pagerite:analytics-src": analytics_scripts[0]},
         )(
             Title=f"Analytics – {brand}" if brand else "Analytics",
             Brand=_brand_link(brand, brand_html),

pyproject.toml

@@ -27,6 +27,7 @@ dependencies = [
     "mdit-py-plugins>=0.6.1",
     "pygments>=2.20.0",
     "ua-parser>=1.0.2",
+    "zstandard>=0.25.0",
 ]
 
 [project.scripts]

scripts/fake_traffic.py

@@ -6,23 +6,18 @@
 #     "playwright>=1.45.0",
 # ]
 # ///
-"""Generate fake browser visits and crawler hits for a Pagerite site.
+"""Generate fake browser visits, crawler hits, and abuse scans for a Pagerite site.
 
-The script drives a real Chromium browser with Playwright, clicking visible
-internal links so the site's own analytics JavaScript records normal visits
-(POST /_a).  Most browser sessions enter the site with a cross-origin
-``Referer: https://somedomain.com/`` header, and outbound links found on the
-page are followed to real external sites (ending the session).  Browser
-sessions and crawler GETs send a small rotating pool of real public IPs in
-X-Forwarded-For, so the backend can reverse-DNS and GeoIP them instead of seeing
-every hit as 127.0.0.1.
-
-Sessions start with a Poisson inter-arrival delay (``--arrival-rate``) to
-spread traffic out a little, while still keeping the overall run fast.
+Browser sessions (ordinary users) come from realistic residential IPv4 and IPv6
+addresses and stay mostly stable; an IPv6 host part may rotate once mid-session,
+and an IPv4 session may switch to another residential address.  Crawler hits come
+from datacenter IPs, with each crawler profile paired to a matching provider IP
+when possible.  Abuse scanners fire bursts of vulnerability probes from pinned
+datacenter IPs.
 
 Run against a local dev server, e.g.:
 
-    uv run scripts/fake_traffic.py http://localhost:3200 -b 8 -c 20
+    uv run scripts/fake_traffic.py http://localhost:3200
 
 Repeat whenever you want more traffic; each run appends new events to the
 site's analytics file.
@@ -39,7 +34,7 @@ from collections.abc import Sequence
 from dataclasses import dataclass
 from datetime import UTC, datetime
 from typing import Any
-from urllib.parse import urljoin, urlparse
+from urllib.parse import urlencode, urljoin, urlparse
 
 import httpx
 
@@ -59,6 +54,7 @@ class BrowserProfile:
 class CrawlerProfile:
     name: str
     user_agent: str
+    ip: str
 
 
 BROWSER_PROFILES: list[BrowserProfile] = [
@@ -95,39 +91,397 @@ CRAWLER_PROFILES: list[CrawlerProfile] = [
     CrawlerProfile(
         "googlebot",
         "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +http://www.google.com/bot.html) Chrome/128.0.0.0 Safari/537.36",
+        "66.249.64.66",                         # US, Google
     ),
     CrawlerProfile(
         "bingbot",
         "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm) Chrome/128.0.0.0 Safari/537.36",
+        "40.77.167.0",                          # US, Microsoft
     ),
     CrawlerProfile(
-        "duckduckbot", "DuckDuckBot/1.1; (+http://duckduckgo.com/duckduckbot.html)"
+        "duckduckbot",
+        "DuckDuckBot/1.1; (+http://duckduckgo.com/duckduckbot.html)",
+        "95.217.0.1",                           # Germany, Hetzner VPS
+    ),
+    CrawlerProfile(
+        "curl",
+        "curl/8.5.0",
+        "139.162.0.1",                          # Singapore, Linode VPS
     ),
-    CrawlerProfile("curl", "curl/8.5.0"),
 ]
 
-# Small pool of real public resolver IPs. They have real reverse-DNS and GeoIP
-# entries, and cycling through a handful avoids hammering DNS during traffic
-# generation.
-SOURCE_IPS: list[str] = [
-    "8.8.8.8",
-    "1.1.1.1",
-    "9.9.9.9",
-    "208.67.222.222",
-    "185.228.168.9",
-    "94.140.14.14",
+# Residential IPv4 addresses and IPv6 /64 prefixes used for ordinary browser
+# sessions.  IPv6 entries keep the network part stable and randomise only the
+# host part; the host may rotate once mid-session.
+RESIDENTIAL_SOURCE_IPS: list[str] = [
+    # Residential IPv4
+    "91.154.140.209",                       # Finland, Elisa
+    "84.143.145.207",                       # Germany, Deutsche Telekom
+    "220.165.255.254",                      # China, Chinanet / China Telecom
+    "84.235.83.162",                        # Saudi Arabia, SaudiNet / STC
+    # Residential IPv6 /64 prefixes
+    "2a02:8109:ac82:6f0c::/64",             # Germany, Deutsche Telekom
+    "240e:45d:1e60:5b0::/64",               # China, China Telecom
+    "2409:8904:6720:4123::/64",             # China, China Unicom
 ]
 
+# Concrete datacenter IPs used for abuse scanner bursts.  They stay pinned for
+# the whole scan burst.
+# Index 0 randomises its UA per request, index 1 uses a fixed browser UA,
+# and index 2 uses a fixed crawler UA.
+ABUSE_SOURCE_IPS: list[str] = [
+    "45.63.0.12",                           # US, Vultr VPS
+    "138.197.0.89",                         # US, DigitalOcean / Cloudways
+    "2a01:4f8:0:2::1234",                   # Germany, Hetzner VPS
+]
+
+# Paths commonly probed by attackers looking for exposed config, admin panels,
+# version control, credentials, backups, or debug endpoints.
+SUSPICIOUS_PATHS: list[str] = [
+    "/.env",
+    "/env",
+    "/.env.local",
+    "/env.development",
+    "/config",
+    "/config.json",
+    "/config.yaml",
+    "/config.yml",
+    "/configuration.json",
+    "/configuration.yaml",
+    "/configuration.yml",
+    "/settings.json",
+    "/settings.yaml",
+    "/settings.yml",
+    "/app.config",
+    "/appsettings.json",
+    "/appsettings.Development.json",
+    "/credentials",
+    "/credentials.json",
+    "/secrets",
+    "/secrets.json",
+    "/.aws/credentials",
+    "/.ssh/id_rsa",
+    "/id_rsa",
+    "/id_rsa.pub",
+    "/known_hosts",
+    "/sftp-config.json",
+    "/admin",
+    "/administrator",
+    "/adminer.php",
+    "/login",
+    "/signin",
+    "/auth/login",
+    "/api/login",
+    "/api/.env",
+    "/api/config",
+    "/api/v1/config",
+    "/api/v2/config",
+    "/webhook",
+    "/webhooks",
+    "/callback",
+    "/proxy",
+    "/image",
+    "/images",
+    "/preview",
+    "/download",
+    "/downloads",
+    "/log",
+    "/logs",
+    "/debug",
+    "/trace",
+    "/phpinfo.php",
+    "/info.php",
+    "/phpmyadmin",
+    "/pma",
+    "/myadmin",
+    "/phpMyAdmin",
+    "/wp-admin",
+    "/wp-login.php",
+    "/wp-config.php",
+    "/xmlrpc.php",
+    "/wp-json/wp/v2/users",
+    "/.git/config",
+    "/.git/HEAD",
+    "/git/config",
+    "/swagger-ui.html",
+    "/v2/api-docs",
+    "/actuator/env",
+    "/actuator/health",
+    "/actuator/configprops",
+    "/server-status",
+    "/.htaccess",
+    "/web.config",
+    "/package.json",
+    "/composer.json",
+    "/vendor/autoload.php",
+    "/docker-compose.yml",
+    "/Dockerfile",
+    "/manage",
+    "/console",
+    "/manager",
+    "/manager/html",
+    "/metrics",
+    "/prometheus",
+    "/healthz",
+    "/_api",
+    "/api",
+    "/api/v1/",
+    "/api/v2/",
+    "/graphql",
+    "/query",
+    "/feed",
+    "/rss",
+    "/_debug",
+    "/test",
+    "/testing",
+    "/tmp",
+    "/temp",
+    "/backup",
+    "/backups",
+    "/dump",
+    "/dumps",
+    "/sql",
+    "/db",
+    "/database",
+    "/dump.sql",
+    "/backup.sql",
+    "/db.sql",
+    "/backup.zip",
+    "/backup.tar.gz",
+    "/site.zip",
+    "/site.tar.gz",
+    "/source.zip",
+    "/src.zip",
+    "/upload",
+    "/uploads",
+    "/import",
+    "/export",
+    "/token",
+    "/tokens",
+    "/oauth",
+    "/oauth2",
+    "/openid",
+    "/jwks",
+    "/keys",
+    "/key",
+    "/private",
+    "/public",
+]
+
+# Realistic external referers.  Most sessions arrive with a generic referer;
+# a subset carries matching UTM tags on the landing URL.
+PLAIN_REFERRERS: list[str] = [
+    "https://example.com/",
+    "https://somedomain.com/",
+    "https://another-site.org/",
+    "https://friend-site.net/",
+]
+
+# (referer origin, utm parameter dict) pairs used for tagged traffic.
+TAGGED_REFERRERS: list[tuple[str, dict[str, str]]] = [
+    ("https://chatgpt.com/", {"utm_source": "chatgpt.com"}),
+    ("https://www.google.com/", {"utm_source": "google", "utm_medium": "organic"}),
+    ("https://twitter.com/", {"utm_source": "twitter", "utm_medium": "social"}),
+    ("https://www.linkedin.com/", {"utm_source": "linkedin", "utm_medium": "social"}),
+    ("https://github.com/", {"utm_source": "github", "utm_medium": "referral"}),
+    ("https://news.ycombinator.com/", {"utm_source": "hackernews", "utm_medium": "referral"}),
+    ("https://www.reddit.com/", {"utm_source": "reddit", "utm_medium": "social"}),
+    ("https://medium.com/", {"utm_source": "medium", "utm_medium": "referral"}),
+    ("https://www.producthunt.com/", {"utm_source": "producthunt", "utm_medium": "referral"}),
+]
+
+# Fraction of referered sessions that also carry UTM tags.
+UTM_RATE = 0.25
+
+# Innocent-looking paths that do not exist on a Pagerite site.  Hitting many of
+# these from a single IP is itself a telltale of a spray-and-pray scanner.
+NORMAL_404_PATHS: list[str] = [
+    "/about",
+    "/about-us",
+    "/services",
+    "/products",
+    "/contact",
+    "/contact-us",
+    "/team",
+    "/careers",
+    "/jobs",
+    "/pricing",
+    "/features",
+    "/demo",
+    "/trial",
+    "/docs",
+    "/documentation",
+    "/api-docs",
+    "/support",
+    "/help",
+    "/faq",
+    "/knowledge-base",
+    "/terms",
+    "/terms-of-service",
+    "/privacy",
+    "/privacy-policy",
+    "/legal",
+    "/blog",
+    "/news",
+    "/articles",
+    "/press",
+    "/events",
+    "/webinars",
+    "/podcast",
+    "/videos",
+    "/resources",
+    "/whitepapers",
+    "/case-studies",
+    "/customers",
+    "/clients",
+    "/testimonials",
+    "/reviews",
+    "/partners",
+    "/integrations",
+    "/api-reference",
+    "/developers",
+    "/status",
+    "/security",
+    "/trust",
+    "/compliance",
+    "/gdpr",
+    "/ccpa",
+    "/sitemap",
+    "/archive",
+    "/tags",
+    "/categories",
+    "/search",
+    "/users",
+    "/accounts",
+    "/dashboard",
+    "/profile",
+    "/settings",
+    "/preferences",
+    "/notifications",
+    "/messages",
+    "/inbox",
+    "/calendar",
+    "/reports",
+    "/analytics",
+    "/billing",
+    "/invoice",
+    "/orders",
+    "/cart",
+    "/checkout",
+    "/store",
+    "/shop",
+    "/home",
+    "/main",
+    "/start",
+    "/welcome",
+    "/intro",
+    "/overview",
+    "/summary",
+    "/portfolio",
+    "/projects",
+    "/work",
+    "/solutions",
+]
+
+ABUSE_USER_AGENTS: list[str] = [
+    # Desktop browsers
+    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 "
+    "(KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36",
+    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 "
+    "(KHTML, like Gecko) Version/17.5 Safari/605.1.15",
+    "Mozilla/5.0 (X11; Linux x86_64; rv:130.0) Gecko/20100101 Firefox/130.0",
+    "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0",
+    "Mozilla/5.0 (Linux; Android 14; SM-S918B) AppleWebKit/537.36 "
+    "(KHTML, like Gecko) Chrome/128.0.0.0 Mobile Safari/537.36",
+    "Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 "
+    "(KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1",
+    # Well-known crawlers / bots
+    "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; "
+    "+http://www.google.com/bot.html) Chrome/128.0.0.0 Safari/537.36",
+    "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; bingbot/2.0; "
+    "+http://www.bing.com/bingbot.htm) Chrome/128.0.0.0 Safari/537.36",
+    "Mozilla/5.0 (compatible; DuckDuckBot/1.1; +http://duckduckgo.com/duckduckbot.html)",
+    "Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html)",
+    "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 "
+    "(KHTML, like Gecko) Chrome/128.0.0.0 Mobile Safari/537.36 "
+    "(compatible; Googlebot/2.1; +http://www.google.com/bot.html)",
+    "Mozilla/5.0 (compatible; YandexBot/3.0; +http://yandex.com/bots)",
+    "Mozilla/5.0 (compatible; DotBot/1.2; +https://opensiteexplorer.org/dotbot; help@moz.com)",
+    "Mozilla/5.0 (compatible; SemrushBot/7~bl; +http://www.semrush.com/bot.html)",
+    "Mozilla/5.0 (compatible; AhrefsBot/7.0; +http://ahrefs.com/robot/)",
+    # Social / service fetchers
+    "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)",
+    "Twitterbot/1.0",
+    "LinkedInBot/1.0 (compatible; Mozilla/5.0; Apache-HttpClient +http://www.linkedin.com)",
+    "Slackbot-LinkExpanding 1.0 (+https://api.slack.com/robots)",
+    "WhatsApp/2.23.20.0",
+    # Command-line / library clients
+    "curl/8.5.0",
+    "Wget/1.21.4 (linux-gnu)",
+    "python-requests/2.32.3",
+    "Go-http-client/1.1",
+    "Node.js/20.5.1",
+]
+
+
+def _random_ipv6_host(prefix: str) -> str:
+    """Return a concrete address within an IPv6 /64 prefix.
+
+    The host part is generated randomly, mimicking a fresh OS privacy address.
+    The input prefix must end in ``::/64`` (e.g. ``2a02:8109:ac82:6f0c::/64``).
+    """
+    if "/" not in prefix:
+        return prefix
+    base, mask = prefix.split("/")
+    if mask != "64":
+        raise ValueError(f"only /64 IPv6 prefixes are supported, got {prefix!r}")
+    if base.endswith("::"):
+        base = base[:-2]
+    host = ":".join(f"{random.randint(0, 0xffff):04x}" for _ in range(4))
+    return f"{base}:{host}"
+
+
+def _concretize_ip(entry: str) -> str:
+    """Return a concrete IP address; randomise the host part for IPv6 /64 prefixes."""
+    if ":" in entry and "/" in entry:
+        return _random_ipv6_host(entry)
+    return entry
+
+
+class _SessionIP:
+    """Stable IP for a browser session, with one optional mid-session rotation.
+
+    IPv6 prefixes get a fresh random host part; IPv4 addresses are swapped for
+    another address from the residential pool.
+    """
+
+    def __init__(self, entry: str, pool: Sequence[str]):
+        self.entry = entry
+        self.pool = pool
+        self._value = _concretize_ip(entry)
+
+    def current(self) -> str:
+        return self._value
+
+    def rotate(self) -> None:
+        if ":" in self.entry and "/" in self.entry:
+            self._value = _random_ipv6_host(self.entry)
+            return
+        # IPv4: switch to another IPv4 address from the residential pool.
+        for _ in range(20):
+            candidate_entry = random.choice(self.pool)
+            if ":" in candidate_entry and "/" in candidate_entry:
+                continue
+            candidate = _concretize_ip(candidate_entry)
+            if candidate != self._value:
+                self._value = candidate
+                return
+
 
 def _sleep(base: float, jitter: float) -> None:
     time.sleep(max(0.0, base + random.uniform(-jitter, jitter)))
 
 
-def _source_ip(index: int) -> str:
-    """Pick one of the small pool of real public IPs."""
-    return SOURCE_IPS[index % len(SOURCE_IPS)]
-
-
 def _normalize_url(url: str) -> str:
     """Return a usable base URL, adding missing scheme/host/port parts.
 
@@ -232,43 +586,75 @@ def _run_browser_session(
     paths: Sequence[str],
     profile: BrowserProfile,
     session_index: int,
-    max_clicks: int,
-    stay: tuple[float, float],
-    headless: bool,
-    fake_ip: str,
-    referer_rate: float,
-    include_external: bool = True,
+    ip_entry: str,
 ) -> dict[str, Any]:
     from playwright.sync_api import sync_playwright
 
+    MAX_CLICKS = 6
+    STAY = (2.0, 6.0)
+    HEADLESS = True
+    REFERER_RATE = 0.75
+    INCLUDE_EXTERNAL = True
+
+    ip_provider = _SessionIP(ip_entry, RESIDENTIAL_SOURCE_IPS)
+    ips_used: list[str] = [ip_provider.current()]
     trail: list[str] = []
     start_time = datetime.now(UTC)
     try:
         with sync_playwright() as p:
             browser = p.chromium.launch(
-                headless=headless,
+                headless=HEADLESS,
                 args=["--no-sandbox", "--disable-dev-shm-usage"],
             )
             extra_headers = {
-                "X-Forwarded-For": fake_ip,
+                "X-Forwarded-For": ip_provider.current(),
                 "Accept-Language": profile.accept_language,
             }
             # Most sessions arrive from an external origin; some are direct.
-            if random.random() < referer_rate:
-                extra_headers["Referer"] = "https://somedomain.com/"
+            # A subset of referered sessions carries realistic UTM tags on the
+            # landing URL; the referer origin is paired with the UTM source.
+            tagged: dict[str, str] = {}
+            if random.random() < REFERER_RATE:
+                if random.random() < UTM_RATE:
+                    referer, tagged = random.choice(TAGGED_REFERRERS)
+                else:
+                    referer = random.choice(PLAIN_REFERRERS)
+                extra_headers["Referer"] = referer
             context = browser.new_context(
                 user_agent=profile.user_agent,
                 viewport={"width": profile.viewport[0], "height": profile.viewport[1]},
                 extra_http_headers=extra_headers,
             )
             page = context.new_page()
+
+            # Update X-Forwarded-For per request; the value stays stable unless we
+            # explicitly rotate it once mid-session.
+            def _route_handler(route, request):
+                headers = dict(request.headers)
+                headers["X-Forwarded-For"] = ip_provider.current()
+                ips_used.append(headers["X-Forwarded-For"])
+                route.continue_(headers=headers)
+
+            page.route("**/*", _route_handler)
+
+            # Pick one point during the session to emulate an IP rotation.
+            rotate_at = random.randint(0, MAX_CLICKS - 1) if MAX_CLICKS > 0 else -1
+
             entry = random.choice(paths) if paths else "/"
-            page.goto(urljoin(base, entry), wait_until="networkidle")
+            landing = urljoin(base, entry)
+            if tagged:
+                sep = "&" if "?" in landing else "?"
+                landing += sep + urlencode(tagged)
+            page.goto(landing, wait_until="networkidle")
             trail.append(page.url)
 
-            for _ in range(max_clicks):
-                _sleep(random.uniform(*stay) / 2, 0.3)
-                links = _collect_links(page, include_external)
+            for click_idx in range(MAX_CLICKS):
+                _sleep(random.uniform(*STAY) / 2, 0.3)
+                if click_idx == rotate_at:
+                    ip_provider.rotate()
+                    ips_used.append(ip_provider.current())
+                    logger.debug("rotated session IP to %s", ip_provider.current())
+                links = _collect_links(page, INCLUDE_EXTERNAL)
                 visible = [item for item in links if item.get("visible")]
                 if not visible:
                     visible = links
@@ -291,14 +677,15 @@ def _run_browser_session(
                     break
                 page.wait_for_load_state("networkidle")
                 trail.append(page.url)
-                _sleep(random.uniform(*stay), 0.5)
+                _sleep(random.uniform(*STAY), 0.5)
 
             browser.close()
 
         return {
             "profile": profile.name,
             "entry": entry,
-            "ip": fake_ip,
+            "ip": ips_used[0],
+            "ips_seen": len(set(ips_used)),
             "pages": len(trail),
             "trail": [urlparse(u).path or "/" for u in trail],
             "duration": (datetime.now(UTC) - start_time).total_seconds(),
@@ -312,12 +699,10 @@ def _run_crawler_hit(
     base: str,
     paths: Sequence[str],
     profile: CrawlerProfile,
-    profile_index: int,
-    session_index: int,
 ) -> dict[str, Any]:
     path = random.choice(paths) if paths else "/"
     url = urljoin(base, path)
-    fake_ip = _source_ip(session_index)
+    fake_ip = profile.ip
     headers = {
         "User-Agent": profile.user_agent,
         "X-Forwarded-For": fake_ip,
@@ -337,6 +722,78 @@ def _run_crawler_hit(
         return {"profile": profile.name, "path": path, "error": str(exc)}
 
 
+def _abuse_ua() -> str:
+    """Return a randomized, syntactically valid user agent for an abuse scan."""
+    return random.choice(ABUSE_USER_AGENTS)
+
+
+def _run_abuse_scanner(base: str, ip_index: int) -> dict[str, Any]:
+    """Fire a burst of vulnerability probes from a single fake IP.
+
+    Scanner 0 randomises its user agent every request, scanner 1 uses a fixed
+    browser UA, and scanner 2 uses a fixed crawler UA.
+    """
+    ip_entry = ABUSE_SOURCE_IPS[ip_index % len(ABUSE_SOURCE_IPS)]
+    if ":" in ip_entry and "/" in ip_entry:
+        fake_ip = _random_ipv6_host(ip_entry)
+    else:
+        fake_ip = ip_entry
+
+    MIN_HITS = 15
+    MAX_HITS = 25
+    total_hits = random.randint(MIN_HITS, MAX_HITS)
+
+    # Ensure the burst contains both telltales: suspicious paths and more
+    # than ten normal-looking 404 paths.
+    suspicious_count = max(5, total_hits // 3)
+    normal_count = total_hits - suspicious_count
+    if normal_count < 11:
+        normal_count = 11
+        suspicious_count = max(3, total_hits - normal_count)
+
+    paths = random.choices(SUSPICIOUS_PATHS, k=suspicious_count) + random.choices(
+        NORMAL_404_PATHS, k=normal_count
+    )
+    random.shuffle(paths)
+
+    ua_mode = ip_index % 3
+    if ua_mode == 0:
+        get_ua = _abuse_ua
+    elif ua_mode == 1:
+        def get_ua() -> str:
+            return BROWSER_PROFILES[0].user_agent
+    else:
+        def get_ua() -> str:
+            return CRAWLER_PROFILES[0].user_agent
+
+    scan_results: list[dict[str, Any]] = []
+    with httpx.Client(follow_redirects=True, timeout=15.0) as client:
+        for path in paths:
+            headers = {
+                "User-Agent": get_ua(),
+                "X-Forwarded-For": fake_ip,
+                "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
+                "Accept-Language": random.choice(
+                    ["en-US,en;q=0.9", "en-GB,en;q=0.8", "en;q=0.7"]
+                ),
+            }
+            try:
+                r = client.get(urljoin(base, path), headers=headers)
+                scan_results.append(
+                    {"path": path, "status": r.status_code, "ua": headers["User-Agent"]}
+                )
+            except Exception as exc:  # noqa: BLE001
+                scan_results.append({"path": path, "error": str(exc)})
+            _sleep(0.15, 0.1)
+
+    return {
+        "scanner": ip_index + 1,
+        "ip": fake_ip,
+        "hits": len(scan_results),
+        "results": scan_results,
+    }
+
+
 def _parse_args(argv: Sequence[str] | None) -> argparse.Namespace:
     parser = argparse.ArgumentParser(
         description="Generate fake traffic for a Pagerite site.",
@@ -351,54 +808,13 @@ def _parse_args(argv: Sequence[str] | None) -> argparse.Namespace:
              "missing scheme defaults to http://.",
     )
     parser.add_argument(
-        "-b",
-        "--browsers",
-        type=int,
-        default=5,
-        help="Number of simulated browser sessions",
-    )
-    parser.add_argument(
-        "-c", "--crawlers", type=int, default=10, help="Number of crawler HTTP GETs"
-    )
-    parser.add_argument(
-        "--max-clicks",
-        type=int,
-        default=6,
-        help="Max internal link clicks per browser session",
-    )
-    parser.add_argument(
-        "--stay",
+        "-t",
+        "--duration",
         type=float,
-        nargs=2,
-        default=[2.0, 6.0],
-        metavar=("MIN", "MAX"),
-        help="Seconds to stay on a page before clicking again",
+        default=60.0,
+        metavar="SECONDS",
+        help="Rough maximum time to generate traffic (0 runs one preset batch)",
     )
-    parser.add_argument(
-        "--headless",
-        action=argparse.BooleanOptionalAction,
-        default=True,
-        help="Run browsers headlessly",
-    )
-    parser.add_argument(
-        "--arrival-rate",
-        type=float,
-        default=1.0,
-        help="Average arrivals per second (Poisson). 0 disables inter-arrival waits",
-    )
-    parser.add_argument(
-        "--referer-rate",
-        type=float,
-        default=0.75,
-        help="Share of browser sessions that arrive with a cross-origin Referer",
-    )
-    parser.add_argument(
-        "--external-links",
-        action=argparse.BooleanOptionalAction,
-        default=True,
-        help="Include real outbound links in random navigation",
-    )
-    parser.add_argument("--seed", type=int, default=None, help="Random seed")
     parser.add_argument("-v", "--verbose", action="store_true", help="Debug logging")
     return parser.parse_args(argv)
 
@@ -414,8 +830,6 @@ def main(argv: Sequence[str] | None = None) -> int:
         logger.error("%s", exc)
         return 2
 
-    random.seed(args.seed)
-
     # Discover content paths from the public page tree if we can.
     paths: list[str] = []
     try:
@@ -428,61 +842,95 @@ def main(argv: Sequence[str] | None = None) -> int:
         paths = ["/"]
 
     logger.info(
-        "Generating fake traffic against %s (%d content paths, %d browsers, %d crawlers)",
+        "Generating fake traffic against %s (%d content paths, duration=%ss)",
         base,
         len(paths),
-        args.browsers,
-        args.crawlers,
+        args.duration,
     )
 
     results: list[dict[str, Any]] = []
+    arrival_rate = 1.0
 
-    for i in range(args.browsers):
-        if i > 0:
-            wait = _poisson_wait(args.arrival_rate)
-            logger.debug("waiting %.2fs before next browser session", wait)
-            time.sleep(wait)
-        profile = random.choice(BROWSER_PROFILES)
-        fake_ip = _source_ip(i)
-        logger.info(
-            "[%d/%d] browser session: %s (ip=%s)",
-            i + 1,
-            args.browsers,
-            profile.name,
-            fake_ip,
-        )
-        result = _run_browser_session(
-            base,
-            paths,
-            profile,
-            i,
-            args.max_clicks,
-            (args.stay[0], args.stay[1]),
-            args.headless,
-            fake_ip,
-            args.referer_rate,
-            args.external_links,
-        )
-        results.append(result)
-        logger.debug("  trail: %s", result.get("trail", []))
+    def _wait() -> None:
+        wait = _poisson_wait(arrival_rate)
+        logger.debug("waiting %.2fs before next session", wait)
+        time.sleep(wait)
 
-    for i in range(args.crawlers):
-        if i > 0:
-            wait = _poisson_wait(args.arrival_rate)
-            logger.debug("waiting %.2fs before next crawler hit", wait)
-            time.sleep(wait)
-        profile_index = i % len(CRAWLER_PROFILES)
-        profile = CRAWLER_PROFILES[profile_index]
-        fake_ip = _source_ip(i)
-        logger.info(
-            "[%d/%d] crawler hit: %s (ip=%s)",
-            i + 1,
-            args.crawlers,
-            profile.name,
-            fake_ip,
-        )
-        result = _run_crawler_hit(base, paths, profile, profile_index, i)
-        results.append(result)
+    if args.duration <= 0:
+        # One preset batch.
+        for i in range(5):
+            if i > 0:
+                _wait()
+            profile = random.choice(BROWSER_PROFILES)
+            ip_entry = random.choice(RESIDENTIAL_SOURCE_IPS)
+            logger.info(
+                "browser session: %s (ip=%s)",
+                profile.name,
+                _concretize_ip(ip_entry),
+            )
+            result = _run_browser_session(base, paths, profile, i, ip_entry)
+            results.append(result)
+            logger.debug("  trail: %s", result.get("trail", []))
+
+        for i in range(10):
+            if i > 0:
+                _wait()
+            profile = random.choice(CRAWLER_PROFILES)
+            logger.info(
+                "crawler hit: %s (ip=%s)",
+                profile.name,
+                profile.ip,
+            )
+            result = _run_crawler_hit(base, paths, profile)
+            results.append(result)
+
+        for i in range(3):
+            if i > 0:
+                _wait()
+            ip_entry = ABUSE_SOURCE_IPS[i % len(ABUSE_SOURCE_IPS)]
+            logger.info("abuse scanner: %s", ip_entry)
+            result = _run_abuse_scanner(base, i)
+            results.append(result)
+            logger.debug(
+                "  hits: %s", [r.get("path") for r in result.get("results", [])]
+            )
+    else:
+        deadline = time.time() + args.duration
+        session_index = 0
+        while time.time() < deadline:
+            if session_index > 0:
+                _wait()
+            phase = session_index % 3
+            if phase == 0:
+                profile = random.choice(BROWSER_PROFILES)
+                ip_entry = random.choice(RESIDENTIAL_SOURCE_IPS)
+                logger.info(
+                    "browser session: %s (ip=%s)",
+                    profile.name,
+                    _concretize_ip(ip_entry),
+                )
+                result = _run_browser_session(
+                    base, paths, profile, session_index, ip_entry
+                )
+                logger.debug("  trail: %s", result.get("trail", []))
+            elif phase == 1:
+                profile = random.choice(CRAWLER_PROFILES)
+                logger.info(
+                    "crawler hit: %s (ip=%s)",
+                    profile.name,
+                    profile.ip,
+                )
+                result = _run_crawler_hit(base, paths, profile)
+            else:
+                ip_entry = ABUSE_SOURCE_IPS[session_index % len(ABUSE_SOURCE_IPS)]
+                logger.info("abuse scanner: %s", ip_entry)
+                result = _run_abuse_scanner(base, session_index // 3)
+                logger.debug(
+                    "  hits: %s",
+                    [r.get("path") for r in result.get("results", [])],
+                )
+            results.append(result)
+            session_index += 1
 
     ok = sum(1 for r in results if "error" not in r)
     logger.info("Done: %d/%d requests succeeded.", ok, len(results))