Auth via paskia-js: profile() dialog, apiFetch/apiJson in admin components

- Banner-corner auth link is now a button opening paskia-js's profile() dialog (handles login too); auth re-probed when the dialog closes. - Editor/analytics components call /_api via apiFetch/apiJson: an expired session opens the login dialog and the request retries. - pagerite.js: task-checkbox toggle uses apiJson (explicit edit attempt, reverts on any failure incl. cancelled login); auth probes use fetchJson (never a dialog); page-cache/navigation stay on plain fetch. - Add the paskia npm dependency; document the convention.
{cards}: server-rendered previews, immediate-children semantics, */** globs
2026-09-18 20:14:52 +00:00 · 2026-09-18 19:36:44 +00:00 · 2026-09-18 19:14:14 +00:00 · 2026-09-18 19:11:27 +00:00 · 2026-09-18 18:52:35 +00:00 · 2026-09-18 14:28:29 +00:00
41 changed files with 1195 additions and 448 deletions
@@ -67,5 +67,5 @@ Server run by CLI entry point `uv run pagerite` (no auto reloads, build needed).

 - Keep dependencies minimal; add via `uv add` and mention it.
 - The public URL space belongs to content (pretty slugs at root). Reserve only `/_` for the machinery (`/_api/`, `/_f/`, `/_assets/`), plus `/favicon.ico` (backend redirect to the configured site icon). Slugs are lowercase ASCII letters, digits, hyphens and underscores `[a-z0-9_-]` (the site editor filters input live via `slugify.js`, built on the `transliteration` npm package — unicode folds to ASCII, spaces become hyphens; an empty slug on a new page is derived from its title), may not begin with `_` or `.`, and such URLs are never looked up as content.
- No auth in core code; the SSO/reverse proxy gates all of `/_api` (forward-auth) and owns `/auth/` (login/logout, session validation). Pages render identically for everyone; pagerite.js adds the editing UI only after the auth server validates the session. The one keyed exception is `/_translate/{key}` (translator service; `Data.translate_keys`, see docs/localization.md).
+- No auth in core code; the SSO/reverse proxy gates all of `/_api` (forward-auth) and owns `/auth/` (login/logout, session validation). Pages render identically for everyone; pagerite.js adds the editing UI only after the auth server validates the session. The one keyed exception is `/_translate/{key}` (translator service; `Data.translate_keys`, see docs/localization.md). Admin components use the paskia npm package's `apiFetch`/`apiJson` for `/_api` calls (login dialog + retry on expired sessions); pagerite.js uses `apiJson` only for the task-checkbox toggle (an explicit edit attempt) and `fetchJson` for its auth probes — never `apiFetch` there, so anonymous visitors never get a login popup.
 - Update the relevant MarkDown files when architecture, tooling, or conventions change.
@@ -38,6 +38,9 @@ Each `Get` record (one per served document):
  (`x-pagerite-preload` header): never counted as a view, crawler hit or
  abuse — recorded only so a navigation later served from the in-memory page
  cache (which issues no GET at all) can be attributed this GET's status,
+- `lang` — rendered content language of the served document (the resolved
+  language of a localized page), `""` for non-localized responses (404
+  probes, reserved paths),
 - `client` — 6-byte blake3 hash referencing `Analytics.clients`.

 304 revalidation responses return before recording and are not logged.
@@ -51,7 +54,9 @@ Each `Msg` record (one per pagerite.js activity message over `/_ws`):
 - `to` — navigation target (validated at record time: internal slug path or
  external https URL; anything else is dropped — sanitation, not
  classification),
- `read` — active seconds spent on `fr` since the previous report.
+- `read` — active seconds spent on `fr` since the previous report,
+- `lang` — rendered language reported by the client for the page the
+  activity happened on (the page's `<html lang>`; `""` from old clients).

 Each `Client` record (shared by every event, keyed by hash):

@@ -104,7 +109,11 @@ The client (`pagerite.js`) keeps a WebSocket connection to `/_ws` for the
 whole browsing session and sends activity messages over it — JSON text
 frames matching the server's `Ping` msgspec struct with the fields `fr`
 (source path), `to` (navigation target), `read` (active seconds on `fr`
-since the last report) and `hide`; falsy fields are omitted. One channel
+since the last report), `lang` (the rendered language of the page the
+activity happened on — its `<html lang>`, except the language-switch
+navigation ping, which passes the picked tag explicitly because the view
+transition applies the new `<html lang>` only after the ping goes out) and
+`hide`; falsy fields are omitted. One channel
 follows the session, so the activity of a visit stays tied together, and
 while the user is active the accumulated reading time is flushed every few
 seconds: the times are incremental, so a disconnection simply leaves the
@@ -173,10 +182,16 @@ for misses.
  (`_SESSION_GAP`). A fresh page load with an already-open visit (second
  tab) extends it, logging a `(direct)` transition. The visit's trail holds
  first-seen targets in order; `read` updates accumulate active seconds on
-  the trail item matching `fr`. Each trail item's HTTP status comes from
+  the trail item matching `fr` (preferring the item whose language matches
+  the report, so seconds after a language switch land on the new-language
+  step). Each trail item's HTTP status comes from
  the client's latest GET for that path — preloads included, which is what
  allows 404 pages to render red in the viewer even when the navigation
-  itself was served from the page cache. The entry page's referer and
+  itself was served from the page cache. Each trail item also carries the
+  rendered language: the client's report, for the entry page falling back
+  to its GET's rendered language (old clients don't send one); a page
+  re-visited in a different language becomes a distinct trail step instead
+  of merging into the existing item. The entry page's referer and
  `utm_*` tags come from the GET that loaded it (within 10 s before the
  first message).
 - **Crawler hits**: a document GET no activity message matched within
@@ -232,6 +247,10 @@ to tell misses from real pages at a glance.
 The `Display` payload contains the derived `visits`, `crawlers` and `abuse`
 rows (structs `Visit`/`Nav`/`TrailItem`, `CrawlerHit`, `AbuseHit` — display
 DTOs only, never persisted), the visible `clients`, the fetched `favicons`,
+the site language context (`multilingual` — translation languages are
+configured, so the viewer can suppress language UI on single-language
+sites — and `primary_lang` — the front page's primary language, so the
+viewer can skip the primary-language default case),
 and the aggregates below.

 Each derived `Visit`:
@@ -243,8 +262,9 @@ Each derived `Visit`:
 - `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`),
+  reading time in seconds (`read`), the most recent HTTP status seen
+  for the target (`status`) and the rendered language (`lang`; a page
+  seen in two languages within one visit gets one item per language),
 - `navs` — every navigation (`fr`, `to`), keyed by its timestamp, repeats
  included. The aggregates are computed from this log,
 - `utm` — `utm_*` query parameters from the landing URL, as a dict.
@@ -257,7 +277,8 @@ Each derived `CrawlerHit`:
 - `referer` — external https origin of the request, `""` for direct/none,
 - `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).
+  for a category placeholder or missing page),
+- `lang` — rendered content language of the served document (from the GET).

 Each derived `AbuseHit`:

@@ -343,13 +364,25 @@ Axes always start at 0 and end at a multiple of a 1-2-5 major step (max 5
 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 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);
-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
+The week range is aligned to Monday 00:00 UTC (the current week keeps the
+accent color and is truncated at the current bucket, never drawing fake
+zeroes for the future). Both the week and day views overlay a **"typical"
+history curve** in the muted color (`analytics/seasonal.js`, a port of
+`seasonal.py`): the whole recorded history is densified to 5-minute bins,
+smoothed with the same Gaussian as the week view, then folded onto a weekly
+grid with exponential decay over age — a 7-day half-life for the average
+time-of-day pattern and a 42-day half-life for per-weekday deviations from
+it, the deviation shrunk by the effective number of weeks behind each bin
+(`n_eff / (n_eff + 3)`) so the estimate falls back to the common daily
+pattern when history is short. History is capped at the most recent 180
+days, beyond which even the slow kernel's weight is negligible (~5%). The
+week view draws the full Monday-first
+estimate as "Typical week" (future included); the day view cuts the rolling
+24-hour window's bins from the same estimate and labels them by the weekday
+("Typical Saturday"). A compact legend inside the top right of the visits
+chart marks the current data in accent (ISO week label, or a bar specimen
+for "Last 24 hours") and the typical curve on a muted specimen. The week
+view's 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,
@@ -26,7 +26,7 @@ msgspec Structs for the kanta database. See `docs/content-model.md` for the full

 ## `markdown.py`

-markdown-it-py renderer (html passthrough + attrs, footnote, deflist, tasklists, admon, gfm_autolink, sub/superscript plugins; typographer + breaks on). In bodies with at least three top-level h1/h2 headings (nested ones, e.g. inside `::: aside`, never participate), each gets a slug id (`python-slugify`, mirroring the editor's `slugify.js` — unicode folds to ASCII, separators become single hyphens) unless the author set `{#id}`, and their text is wrapped in a self-link (`a.anchor`) so section links are copyable; anchored headings also carry `data-line` with their markdown source line (the page editor's section pens and piecewise scroll sync key off it); the first in-body h1 is the article title — when the markdown has no h1, `render(title=...)` injects it as `# {title}` so implicit and explicit titles take the same path — it gets no id and doesn't count toward the three, its self-link is `href=""` (scroll to top); shorter articles stay anchor-free, h3+ is never navigable, and duplicates get `-2`/`-3` suffixes. 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). Code fences take pandoc-style brace attributes on the info line (` ```{.python .wide #id key=val} ` — the first class is the language when no bare language word precedes the braces) as well as a trailing `{...}` line; both land on the `<pre>`, the `<code>` keeps only the language class.
+markdown-it-py renderer (html passthrough + attrs, footnote, deflist, tasklists, admon, gfm_autolink, sub/superscript plugins; typographer + breaks on). In bodies with at least three top-level h1/h2 headings (nested ones, e.g. inside `::: aside`, never participate), each gets a slug id (`python-slugify`, mirroring the editor's `slugify.js` — unicode folds to ASCII, separators become single hyphens) unless the author set `{#id}`, and their text is wrapped in a self-link (`a.anchor`) so section links are copyable; anchored headings also carry `data-line` with their markdown source line (the page editor's section pens and piecewise scroll sync key off it); the first in-body h1 is the article title — when the markdown has no h1, `render(title=...)` injects it as `# {title}` so implicit and explicit titles take the same path — it gets no id and doesn't count toward the three, its self-link is `href=""` (scroll to top); shorter articles stay anchor-free, h3+ is never navigable, and duplicates get `-2`/`-3` suffixes. 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 lone `{name}` / `{name: args}` line is a block directive: a core rule turns it into a `directive` token (render instance only — the verbatim parser keeps the plain paragraph so segments/chunks see the placeholder source), and the render rule delegates to the resolvers passed as `render(directives=...)`, leaving the source literal where no resolver applies (e.g. the editor preview of a page that does not exist yet). Built in: `{dates}` expands to the article's published/updated dateline (`p.dateline`, from `Node.created`/`modified`, registered by `render()` when `created` is given); views.py resolves `{cards}` — the page's published children, one card each (on the front page: the other top-level pages) — and `{cards: path path/* path/** ...}` (space-separated: a plain path renders that page alone, `path/*` its published children, `path/**` all published descendant pages; a page-less item is represented by its first leaf page, the nav-link logic) into the same card-row markup as category pages (`.cards.wide`, a boundary block outside the column segments). A page with any `{cards}` tag drops the automatic end-of-page child cards; multiple tags each render their own row. Code fences take pandoc-style brace attributes on the info line (` ```{.python .wide #id key=val} ` — the first class is the language when no bare language word precedes the braces) as well as a trailing `{...}` line; both land on the `<pre>`, the `<code>` keeps only the language class.

 `render()` returns a `Rendered(html, multicol)`: the article content segmented for the column layout (there is no wrapper div — segments and bare blocks are direct `<article>` children) — h1/h2 headings and `.wide` blocks stand bare, the runs between them become `<div class="colseg">` (margin-breakout boxes — `.margin`, `::: aside` — stay inside the segment at their anchor point; the CSS positions them out of flow into the side zone) (plus `.cols` on segments with enough text in at least two paragraphs or one long enough to split across columns, `::: nocols` opting out; in column segments, paragraphs past `BREAKABLE_TEXT` visible characters are marked `.breakable` so they may split across columns), 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).

@@ -10,7 +10,9 @@ Vue editor app entry, mounts the tabbed `EditorShell`. See `docs/editing.md` for

 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, a scroll-driven section hash (the location hash tracks the h1/h2 above the viewport middle via replaceState — removed above the first tagged heading and at the very top, never set on unscrollable pages), 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, click-to-enlarge on article figure images (a full-viewport lightbox with the caption, closed by click or Esc), 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, 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`.
+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 button (anonymous) or profile button (logged in) is shown in the banner corner; clicking it opens the paskia-js `profile()` dialog (an iframe overlay served by Paskia itself, which also runs the login flow), and auth is re-probed when the dialog closes. A `pageshow` handler also 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`.
+
+The editor/analytics components (everything except pagerite.js and main.js) make their `/_api` calls through paskia-js's `apiFetch`/`apiJson` instead of plain `fetch`: when a call gets a 401/403 carrying an `auth.iframe` hint (expired session), the login dialog opens in place and the request retries transparently after authentication. pagerite.js uses `apiJson` only for the task-checkbox toggle (ticking a box is an explicit edit attempt, so a login dialog is welcome there; any failure — including a cancelled login — reverts the checkbox) and `fetchJson` for its auth probes (plain fetch with JSON handling and errors on non-OK, never a dialog); page-cache and navigation fetches stay on plain `fetch`, so anonymous visitors never get a login popup uninvited.

 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, page transition, 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.

@@ -33,14 +33,9 @@ Deliberately simple — **q-values are ignored**:
 - Selection rule (`select_language` in `pagerite/i18n.py`):
  1. If `?lang=<tag>` is present, use it (if a translation exists; otherwise
     fall through to header logic).
-  2. If the article's original language appears anywhere in the header list,
-     use the **original**. Rationale: an AI translation is strictly worse
-     than the original for anyone who has that language configured at all
-     (e.g. `fi-FI, fi, en-US, en` gets English, not machine-translated
-     Finnish).
-  3. Otherwise walk the header list in order and use the first language for
-     which a translation exists.
-  4. Fall back to the original.
+  2. Otherwise walk the header list in order and use the first language that
+     can be served — the original, or one with an available translation.
+  3. Fall back to the original.

 Region tags normalize to their base subtag (`fi-FI` → `fi`).

@@ -20,6 +20,7 @@
    "codemirror": "^6.0.2",
    "country-flag-icons": "^1.6.20",
    "overlayscrollbars": "^2.16.0",
+    "paskia": "^2.1.0",
    "pinia": "^4.0.3",
    "transliteration": "^2.6.1",
    "vue": "^3.5.26",
@@ -5,6 +5,7 @@
 // visit/crawler tables. Read-only.
 // See docs/analytics.md for the data format.
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { apiJson } from 'paskia'
 import {
  RANGES,
  rangeWindow,
@@ -23,6 +24,7 @@ import {
  formatVisitRows,
 } from './analytics/format.js'
 import TrailLink from './TrailLink.vue'
+import RefererBadge from './RefererBadge.vue'
 import VisitorCell from './VisitorCell.vue'
 import TransitionGraph from './TransitionGraph.vue'
 import VisitorCharts from './VisitorCharts.vue'
@@ -114,8 +116,7 @@ onMounted(async () => {
  // 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 {
-    const res = await fetch('/_api/pages')
-    if (res.ok) pageTree.value = await res.json()
+    pageTree.value = await apiJson('/_api/pages')
  } catch { /* map just narrows to pages seen in transitions */ }
 })

@@ -133,7 +134,8 @@ onUnmounted(() => {
 const window = computed(() => rangeWindow(range.value))

 // All non-chart stats follow the selected range; the charts keep their own
-// range-specific x windows (week overlays previous weeks aligned to Monday).
+// range-specific x windows (week aligned to Monday, overlaid with the
+// seasonal "typical week" curve).
 const rangeData = computed(() => {
  if (!data.value) return null
  const { t0, t1 } = window.value
@@ -160,9 +162,15 @@ watch(range, (r) => {

 const clients = computed(() => data.value?.clients || {})
 const favicons = computed(() => data.value?.favicons || {})
-const visitRows = computed(() => formatVisitRows(visits.value, clients.value, pageTree.value, now.value))
+// Site language context from the payload: drives the discreet rendered-
+// language markers in the visit/crawler rows (multilingual sites only).
+const site = computed(() => ({
+  multilingual: !!data.value?.multilingual,
+  primaryLang: data.value?.primary_lang || '',
+}))
+const visitRows = computed(() => formatVisitRows(visits.value, clients.value, pageTree.value, now.value, site.value))
 const crawlers = computed(() => rangeData.value?.crawlers || [])
-const crawlerRows = computed(() => formatCrawlerRows(crawlers.value, clients.value, pageTree.value, now.value))
+const crawlerRows = computed(() => formatCrawlerRows(crawlers.value, clients.value, pageTree.value, now.value, site.value))
 const abuseRows = computed(() => formatAbuseRows(rangeData.value?.abuse || [], clients.value, pageTree.value, now.value))

 </script>
@@ -209,9 +217,9 @@ const abuseRows = computed(() => formatAbuseRows(rangeData.value?.abuse || [], c
              <tbody>
                <tr v-for="(v, i) in visitRows" :key="i">
                  <td class="trail">
-                    <TrailLink v-if="v.refererStep" :step="v.refererStep" :favicons="favicons" @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" :favicons="favicons" @close="$emit('close')" />
+                    <RefererBadge v-if="v.refererBadge" :badge="v.refererBadge" :favicons="favicons" />
+                    <span v-if="v.rowFlag" class="flag" v-html="v.rowFlag" :title="v.rowFlagTitle"></span>
+                    <TrailLink v-for="(s, si) in v.trail" :key="si" :step="s" :favicons="favicons" :flags="s.langFlags" @close="$emit('close')" />
                  </td>
                  <VisitorCell
                    :ip="v.ip"
@@ -246,8 +254,9 @@ const abuseRows = computed(() => formatAbuseRows(rangeData.value?.abuse || [], c
              <tbody>
                <tr v-for="(c, i) in crawlerRows" :key="i">
                  <td class="trail">
-                    <TrailLink v-if="c.refererStep" :step="c.refererStep" :favicons="favicons" @close="$emit('close')" />
+                    <RefererBadge v-if="c.refererBadge" :badge="c.refererBadge" :favicons="favicons" />
                    <TrailLink v-for="(s, si) in c.pages" :key="si" :step="s" :count="s.count" @close="$emit('close')" />
+                    <span v-for="(f, fi) in c.readFlags" :key="fi" class="flag" v-html="f.flag" :title="f.name"></span>
                  </td>
                  <VisitorCell
                    :ip="c.ip"
@@ -472,16 +481,39 @@ const abuseRows = computed(() => formatAbuseRows(rangeData.value?.abuse || [], c
  color: var(--error, #c00);
 }

-.visit-table .utm-tag {
-  display: inline-block;
+/* The referer badge outgrows the 8rem trail-link cap (it carries the UTM
+   summary too); keep the inline-flex layout from the component.  The
+   generic trail-link rule above would otherwise clip the badge (overflow:
+   hidden, hiding the absolutely positioned favicon) and cap its inner
+   link — the link is display: contents, so its parts lay out as badge
+   flex items. */
+.visit-table .trail .referer-badge {
+  display: inline-flex;
  max-width: 100%;
-  padding: 0.05rem 0.4rem;
-  border: 1px solid var(--line);
-  border-radius: 0.25rem;
-  white-space: nowrap;
+  overflow: visible;
+}
+
+.visit-table .trail .referer-badge a.badge-link {
+  display: contents;
+}
+
+/* Same flag chip as the visitor cells (VisitorCell.vue); the flags here
+   mark the language the page was read in. */
+.visit-table .flag {
+  display: inline-flex;
+  width: 18px;
+  height: 12px;
+  border-radius: 2px;
  overflow: hidden;
-  text-overflow: ellipsis;
-  vertical-align: bottom;
+  border: 1px solid var(--line);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
+  vertical-align: middle;
+}
+
+.visit-table .flag :deep(svg) {
+  width: 100%;
+  height: 100%;
+  display: block;
 }

 .visit-table .clickable-list {
@@ -11,6 +11,7 @@ import { cmHighlight, cmTheme } from './cmtheme'
 import ConnNote from './ConnNote.vue'
 import { reconnectPolicy, socketSlot, watchConnecting } from './reconnect'
 import { dropPageCache, loadPlain, runScripts } from './swapdoc'
+import { apiFetch, apiJson } from 'paskia'

 const props = defineProps({
  pagePath: { type: String, default: '' },
@@ -131,7 +132,7 @@ function onEditorShown() {

 async function loadSettings() {
  try {
-    const s = await (await fetch('/_api/settings')).json()
+    const s = await apiJson('/_api/settings')
    theme.value = s.theme || ''
    bannerDesigns.value = s.banner_designs || []
  } catch { /* keep default */ }
@@ -202,7 +203,7 @@ async function uploadBannerMedia(file) {
  // Banner media goes to the shared content store, like article images.
  if (!file || !/^(image|video)\//.test(file.type)) return
  const name = file.name.replace(/[^\w.-]/g, '-')
-  const res = await fetch(`/_api/files/${encodeURIComponent(name)}`, { method: 'PUT', body: file })
+  const res = await apiFetch(`/_api/files/${encodeURIComponent(name)}`, { method: 'PUT', body: file })
  if (!res.ok) return
  const { path: stored } = await res.json()
  const tag = file.type.startsWith('video/')
@@ -10,6 +10,7 @@ import StructureEditor from './StructureEditor.vue'
 import LocalizationEditor from './LocalizationEditor.vue'
 import { editorLang, pagePrimary } from './editorLang'
 import { loadPlain, setLangOverride } from './swapdoc'
+import { apiJson } from 'paskia'

 const props = defineProps({
  pagePath: { type: String, default: '' },
@@ -105,7 +106,7 @@ onMounted(() => {
  // unknown; the page/structure tabs refine pagePrimary per page as they
  // learn it (their knowledge is strictly better).
  openShell()
-  fetch('/_api/settings').then((r) => r.json()).then((s) => {
+  apiJson('/_api/settings').then((s) => {
    if (!pagePrimary.value) pagePrimary.value = s.primary_lang || 'en'
  }).catch(() => { /* keep the fallback */ })
 })
@@ -17,6 +17,7 @@ import { computed, onActivated, onMounted, onUnmounted, ref } from 'vue'
 import { LANG_GROUPS, TRANSLATABLE, flagFor, langName } from './langs'
 import { copyList } from './analytics/format.js'
 import { dropPageCache } from './swapdoc'
+import { apiFetch, apiJson } from 'paskia'

 defineProps({ pagePath: { type: String, default: '' } })
 // close/path-change are wired by EditorShell; this tab never emits them.
@@ -65,7 +66,7 @@ function onEditorShown() {
 onMounted(async () => {
  addEventListener('pagerite:editor-shown', onEditorShown)
  try {
-    const s = await (await fetch('/_api/settings')).json()
+    const s = await apiJson('/_api/settings')
    selected.value = new Set(s.translate_langs || [])
    keyUrls.value = Object.entries(s.translate_keys || {})
      .map(([key, name]) => ({ key, name, url: wsUrl(key) }))
@@ -80,8 +81,8 @@ async function toggle(code) {
  else next.add(code)
  selected.value = next
  try {
-    const s = await (await fetch('/_api/settings')).json()
-    const res = await fetch('/_api/settings', {
+    const s = await apiJson('/_api/settings')
+    const res = await apiFetch('/_api/settings', {
      method: 'PUT',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ ...s, translate_langs: [...next] }),
@@ -105,7 +106,7 @@ async function refresh() {
  if (refreshing.value) return
  refreshing.value = true
  try {
-    const res = await fetch('/_api/translations', { method: 'DELETE' })
+    const res = await apiFetch('/_api/translations', { method: 'DELETE' })
    saveError.value = res.ok ? '' : '⚠️ translations could not be refreshed'
    if (res.ok) dropPageCache()
  } catch {
@@ -122,8 +123,8 @@ async function refresh() {
 // confirmation.
 async function saveKeys() {
  try {
-    const s = await (await fetch('/_api/settings')).json()
-    const res = await fetch('/_api/settings', {
+    const s = await apiJson('/_api/settings')
+    const res = await apiFetch('/_api/settings', {
      method: 'PUT',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({
@@ -27,6 +27,7 @@
 // was loaded in.
 import { computed, onActivated, onMounted, onUnmounted, ref, watch } from 'vue'
 import { usePopup } from './dropdown'
+import { apiFetch } from 'paskia'
 import { EditorView, basicSetup } from 'codemirror'
 import { Compartment, EditorState } from '@codemirror/state'
 import { keymap } from '@codemirror/view'
@@ -192,7 +193,7 @@ function save() {
    }
    // Empty text means delete — an explicit choice made here, in the page
    // editor; the save APIs (REST PUT / WS save) never delete on empty.
-    return fetch(`/_api/pages/${path.value}`, { method: 'DELETE' }).then((res) => {
+    return apiFetch(`/_api/pages/${path.value}`, { method: 'DELETE' }).then((res) => {
      saveError.value = res.ok ? '' : '⚠️ changes could not be saved'
      if (res.ok) stashes.delete(stashKey(path.value, lang.value))
    })
@@ -242,7 +243,7 @@ function close() {
 async function uploadImage(file) {
  if (!file) return
  const name = file.name.replace(/[^\w.-]/g, '-')
-  const res = await fetch(`/_api/files/${encodeURIComponent(name)}`, { method: 'PUT', body: file })
+  const res = await apiFetch(`/_api/files/${encodeURIComponent(name)}`, { method: 'PUT', body: file })
  if (res.ok) {
    const { path: stored } = await res.json()
    const alt = name.replace(/\.[^.]+$/, '')
@@ -736,17 +737,15 @@ function previewIntoArticle(html, multicol) {
  if (!article) return
  // The server render owns the article completely — the injected title h1,
  // the column layout (.multicol on the article, the .colseg/.cols
-  // segments) — so the whole article content swaps as one. Only the edit
-  // pen and the category cards survive: detach them before innerHTML wipes
-  // them. pagerite.js re-places the pen into the first visible h1 on
-  // pagerite:preview.
+  // segments), the card stacks ({cards} tags expanded, or the children's
+  // cards appended when the page has no tag) — so the whole article
+  // content swaps as one. Only the edit pen survives: detach it before
+  // innerHTML wipes it. pagerite.js re-places the pen into the first
+  // visible h1 on pagerite:preview.
  article.classList.toggle('multicol', multicol)
  const pen = article.querySelector('button.edit-link')
  if (pen) pen.remove()
-  const cards = article.querySelector(':scope > .cards')
-  if (cards) cards.remove()
  article.innerHTML = html
-  if (cards) article.append(cards)
  runScripts(article)
  dispatchEvent(new CustomEvent('pagerite:preview'))
 }
@@ -0,0 +1,113 @@
+<script setup>
+// Referer + UTM as one badge in the analytics visit/crawler tables: the
+// referer's favicon flush on the left, its host as the link text, then the
+// UTM summary smaller/muted inside the same badge. Only the favicon and
+// host are the link (external, new tab) — everything else, padding and
+// UTM text included, copies the full utm tag list to the clipboard. The
+// link is display: contents so its parts lay out as badge flex items.
+// The badge carries a single one-fact-per-line tooltip (badge.title:
+// origin, then each utm pair) — no titles on the inner elements.
+// Referers are external, so there is no close event.
+import { computed } from 'vue'
+import { copyList } from './analytics/format.js'
+
+const props = defineProps({
+  badge: { type: Object, required: true },
+  favicons: { type: Object, default: null },
+})
+
+const favicon = computed(() => (props.badge.origin ? props.favicons?.[props.badge.origin] : null))
+</script>
+
+<template>
+  <span class="referer-badge"
+        :class="{ 'with-icon': favicon, copyable: badge.utm }"
+        :title="badge.title"
+        @click="badge.utm && copyList(badge.utmCopy, $event)">
+    <a v-if="badge.href" class="badge-link" :href="badge.href"
+       target="_blank" rel="noopener" @click.stop>
+      <img v-if="favicon" class="badge-favicon" :src="favicon" alt="" />
+      <span v-if="badge.label">{{ badge.label }}</span>
+    </a>
+    <template v-else>
+      <img v-if="favicon" class="badge-favicon" :src="favicon" alt="" />
+      <span v-if="badge.label">{{ badge.label }}</span>
+    </template>
+    <small v-if="badge.utm" class="small">{{ badge.utm }}</small>
+  </span>
+</template>
+
+<style scoped>
+/* Browser-chrome chip on a translucent neutral wash (--badge-* in
+   pagerite.css, deliberately unthemed): black-on-transparent and
+   white-on-transparent favicons both stay legible on it. Colors go on the
+   inner elements, so the theme's link color rules cannot cascade in. The
+   padding is matched by negative margins so the chip's content stays
+   exactly where the bare text would sit without the badge — except on the
+   right, which keeps a small positive margin so the next trail item does
+   not abut the chip. */
+.referer-badge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35em;
+  /* Fixed line-height: the bar height is then exactly 1.2em + padding =
+     1.6em, so the icon below can be sized to match precisely (an
+     absolutely positioned replaced element cannot derive its height from
+     top/bottom offsets — its aspect ratio wins and bottom is dropped). */
+  line-height: 1.2;
+  padding: 0.2em 0.5em;
+  margin: -0.2em 0.25em -0.2em -0.2em;
+  /* Fully rounded: the bar is exactly 1.6em tall, so a 0.8em radius makes
+     both ends semicircles — a pill, with a full circle around the favicon
+     on the left. */
+  border-radius: 0.8em;
+  background: var(--badge-bg);
+  color: var(--badge-text);
+  white-space: nowrap;
+}
+
+/* Room for the absolutely positioned icon (its 1.6em width plus the gap). */
+.referer-badge.with-icon {
+  padding-left: 1.95em;
+}
+
+/* Exactly the bar's height (1.6em, see line-height above), flush to the
+   top/left/bottom borders. The badge does not clip it (no overflow:
+   hidden): the icon may stick out past the bar's rounded corners.
+   Absolute on purpose: an in-flow image is the flex
+   container's first item and would supply the badge's baseline (an image's
+   baseline is its bottom edge), pushing the badge text above the baseline
+   of the trail items that follow. Out of flow, the badge's baseline comes
+   from its text, so baselines match. */
+.badge-favicon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1.6em;
+  height: 1.6em;
+  object-fit: cover;
+}
+
+/* The link is display: contents: the favicon and label lay out as flex
+   items of the badge itself, and only their actual boxes are clickable. */
+.badge-link {
+  display: contents;
+}
+
+/* Click-to-copy affordance on everything outside the link (the UTM text
+   and the surrounding padding). */
+.referer-badge.copyable {
+  cursor: pointer;
+}
+
+.referer-badge span,
+.referer-badge small {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.referer-badge span { color: var(--badge-text); }
+.referer-badge small { color: var(--badge-muted); }
+</style>
@@ -11,6 +11,7 @@ import { css } from '@codemirror/lang-css'
 import { html } from '@codemirror/lang-html'
 import { cmHighlight, cmTheme } from './cmtheme'
 import { dropPageCache, loadPlain, runScripts } from './swapdoc'
+import { apiFetch, apiJson } from 'paskia'

 const props = defineProps({
  pagePath: { type: String, default: '' },
@@ -73,7 +74,7 @@ function themeLabel(t) {

 async function loadSettings() {
  try {
-    const s = await (await fetch('/_api/settings')).json()
+    const s = await apiJson('/_api/settings')
    brand.value = s.brand
    brandHtml.value = s.brand_html || ''
    setBrandDocument(brandHtml.value)
@@ -123,7 +124,7 @@ function applyFavicon(url) {

 async function uploadFavicon(file) {
  if (!file || !file.type.startsWith('image/')) return
-  const res = await fetch('/_api/settings/favicon', {
+  const res = await apiFetch('/_api/settings/favicon', {
    method: 'PUT',
    headers: { 'x-filename': file.name.replace(/[^\w.-]/g, '-') },
    body: file,
@@ -198,7 +199,7 @@ function onBrandHtmlInput() {
 async function uploadBrandMedia(file) {
  if (!file || !/^(image|video)\//.test(file.type)) return
  const name = file.name.replace(/[^\w.-]/g, '-')
-  const res = await fetch(`/_api/files/${encodeURIComponent(name)}`, { method: 'PUT', body: file })
+  const res = await apiFetch(`/_api/files/${encodeURIComponent(name)}`, { method: 'PUT', body: file })
  if (!res.ok) return
  const { path: stored } = await res.json()
  const tag = file.type.startsWith('video/')
@@ -245,7 +246,7 @@ function onEditorShown() {
 }

 async function saveSettings(opts = {}) {
-  const res = await fetch('/_api/settings', {
+  const res = await apiFetch('/_api/settings', {
    method: 'PUT',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({
@@ -275,7 +276,7 @@ async function onThemeChange() {
  const url = `/_themes/${theme.value}/theme.css`
  if (theme.value) {
    if (el?.tagName === 'STYLE') {
-      el.textContent = await (await fetch(url)).text()
+      el.textContent = await (await apiFetch(url)).text()
    } else if (el) {
      el.href = url
    } else if (import.meta.env.DEV) {
@@ -296,7 +297,7 @@ async function onThemeChange() {
      // Prod: inline <style>, fetched from the backend-served URL.
      el = document.createElement('style')
      el.id = 'pagerite-theme'
-      el.textContent = await (await fetch(url)).text()
+      el.textContent = await (await apiFetch(url)).text()
      const before = document.getElementById('pagerite-base')?.nextSibling
        ?? document.getElementById('pagerite-banner')
        ?? document.getElementById('pagerite-user')
@@ -318,7 +319,7 @@ async function onTransitionChange() {
  let el = document.getElementById('pagerite-transition')
  const url = `/_themes/${transition.value}/transition.css`
  if (el?.tagName === 'STYLE') {
-    el.textContent = await (await fetch(url)).text()
+    el.textContent = await (await apiFetch(url)).text()
  } else if (el) {
    el.href = url
  } else {
@@ -330,7 +331,7 @@ async function onTransitionChange() {
      el.href = url
    } else {
      el = document.createElement('style')
-      el.textContent = await (await fetch(url)).text()
+      el.textContent = await (await apiFetch(url)).text()
    }
    el.id = 'pagerite-transition'
    const before = document.getElementById('pagerite-banner')?.nextSibling
@@ -22,6 +22,7 @@ import { slugify } from './slugify'
 import { flagFor, langName, langSort } from './langs'
 import { editorLang, pagePrimary } from './editorLang'
 import { dropPageCache, loadPlain } from './swapdoc'
+import { apiFetch, apiJson } from 'paskia'

 const props = defineProps({
  pagePath: { type: String, default: '' },
@@ -171,7 +172,7 @@ async function commitPending() {
  const loc = locatePending(tree.value, '')
  const parentPath = loc?.parentPath ?? ''
  const newPath = parentPath ? `${parentPath}/${slug}` : slug
-  const res = await fetch(`/_api/pages/${newPath}`, {
+  const res = await apiFetch(`/_api/pages/${newPath}`, {
    method: 'PUT',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({
@@ -220,7 +221,7 @@ function findNode(nodes, p) {
 async function refreshPages() {
  try {
    const q = lang.value ? `?lang=${lang.value}` : ''
-    tree.value = await (await fetch(`/_api/pages${q}`)).json()
+    tree.value = await apiJson(`/_api/pages${q}`)
    // The tree carries each node's resolved primary language: publish the
    // current page's (the shell pins the preview by it on '' selection).
    pagePrimary.value = findNode(tree.value, path.value)?.primary || 'en'
@@ -235,7 +236,7 @@ async function errorDetail(res) {
 }

 async function postStructure(op) {
-  const res = await fetch('/_api/structure', {
+  const res = await apiFetch('/_api/structure', {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify(op),
@@ -308,7 +309,7 @@ async function commitSlug(node, ev) {

 // Deletion is immediate, no confirmation.
 async function removePage(node) {
-  const res = await fetch(`/_api/pages/${node.path}`, { method: 'DELETE' })
+  const res = await apiFetch(`/_api/pages/${node.path}`, { method: 'DELETE' })
  if (res.ok) {
    saveError.value = ''
    refreshPages()
@@ -346,7 +347,7 @@ onMounted(() => {
  refreshPages()
  addEventListener('pagerite:editor-shown', onEditorShown)
  // The language strip: site primary + configured targets.
-  fetch('/_api/settings').then((r) => r.json()).then((s) => {
+  apiJson('/_api/settings').then((s) => {
    primaryLang.value = s.primary_lang || 'en'
    siteLangs.value = s.translate_langs || []
  }).catch(() => { /* no strip */ })
@@ -6,6 +6,7 @@ const props = defineProps({
  step: { type: Object, required: true },
  count: { type: Number, default: 0 },
  favicons: { type: Object, default: null },
+  flags: { type: Array, default: () => [] },
 })

 defineEmits(['close'])
@@ -38,6 +39,7 @@ const title = computed(() => {
    <small v-if="count > 1" class="muted">{{ formatCount(count) }}×</small>
    <img v-if="favicon" class="favicon" :src="favicon" alt="" />
    <span>{{ step.slug }}</span>
+    <span v-for="(f, fi) in flags" :key="fi" class="flag" v-html="f"></span>
  </a>
 </template>

@@ -48,4 +50,23 @@ const title = computed(() => {
  margin-right: 0.25em;
  vertical-align: -0.1em;
 }
+
+/* Same flag chip as the visitor cells (VisitorCell.vue). */
+.flag {
+  display: inline-flex;
+  width: 18px;
+  height: 12px;
+  margin-left: 0.25em;
+  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>
@@ -257,11 +257,14 @@ const countLabel = (n) =>
  filter: drop-shadow(0 0 2.5px var(--accent));
 }
 .tmap .txnode {
-  fill: var(--text);
-  stroke: none;
+  /* External source/exit pills: plain white on every theme, with a hairline
+     so the pill stays visible on a white page. */
+  fill: #fff;
+  stroke: var(--line, rgba(128, 128, 128, 0.4));
+  stroke-width: 1;
 }
-.tmap .txnode-source { fill: var(--text); }
-.tmap .txnode-exit { fill: var(--text); }
+.tmap .txnode-source { fill: #fff; }
+.tmap .txnode-exit { fill: #fff; }
 /* 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
@@ -289,15 +292,18 @@ const countLabel = (n) =>
  stroke: none;
 }
 /* Text sizes are viewBox units: they shrink along with the graph on
-   narrow panels. Overlong labels are clipped at the pill border. */
+   narrow panels. Overlong labels are clipped at the pill border.  The text
+   is always black, on accent (internal pills) and white (external pills)
+   alike — black stands out from any accent color, so the coloring stays
+   stable across themes and light/dark modes. */
 .tmap .tnodeslug {
-  fill: var(--bg, Canvas);
+  fill: #000;
  font-size: 19px;
  text-anchor: start;
 }
 .tmap a { cursor: pointer; }
 .tmap .tnodecount {
-  fill: var(--bg, Canvas);
+  fill: #000;
  opacity: 0.75;
  font-size: 15px;
  text-anchor: middle;
@@ -4,6 +4,7 @@
 */
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { makeSeries } from './analytics/time.js'
+import { typicalWeek, weekBinIndex } from './analytics/seasonal.js'
 import {
  CHART_H,
  CHART_W,
@@ -35,9 +36,6 @@ const allViews = computed(() => {
  return all
 })

-const visitSeries = computed(() => makeSeries(props.data?.site_visits, props.range))
-const viewSeries = computed(() => makeSeries(allViews.value, props.range))
-
 function freqLabel(unit) {
  return unit === '5min' ? '5 min' : unit === 'hour' ? 'hourly' : 'daily'
 }
@@ -47,12 +45,6 @@ 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(() => {
@@ -62,8 +54,29 @@ onUnmounted(() => {
  if (refreshInterval) clearInterval(refreshInterval)
 })

-const visitChart = computed(() => buildChart(visitSeries.value, now.value))
-const viewChart = computed(() => buildChart(viewSeries.value, now.value))
+/**
+ * Series for the current range plus, on the day and week views, the
+ * seasonal "typical week" history curve (all history up to now, already
+ * smoothed). Week view: the full Monday-first week. Day view: the rolling
+ * window's bins looked up from the same estimate, labeled by the weekday.
+ */
+function withTypical(buckets) {
+  const input = makeSeries(buckets, props.range)
+  if (props.range !== 'day' && props.range !== 'week') return input
+  const estimate = typicalWeek(buckets, now.value)
+  if (!estimate) return input
+  if (props.range === 'week') {
+    return { ...input, typical: { values: [...estimate], label: 'Typical week' } }
+  }
+  const values = input.series[0].points.map((p) => estimate[weekBinIndex(p.t)])
+  const weekday = new Date(now.value).toLocaleDateString(undefined, {
+    weekday: 'long', timeZone: 'UTC',
+  })
+  return { ...input, typical: { values, label: `Typical ${weekday}` } }
+}
+
+const visitChart = computed(() => buildChart(withTypical(props.data?.site_visits), now.value))
+const viewChart = computed(() => buildChart(withTypical(allViews.value), now.value))
 </script>

 <template>
@@ -75,8 +88,7 @@ const viewChart = computed(() => buildChart(viewSeries.value, now.value))
      <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)">
-        <!-- Clip the plot curves to the chart area: past-week overlays can
-             run far above the autoscaled y range, and the svg itself is
+        <!-- Clip the plot curves to the chart area; the svg itself is
             overflow: visible for the axis labels. -->
        <clipPath :id="`plot-${c.ylabel}`">
          <rect x="0" y="0" :width="CHART_W" :height="CHART_H" />
@@ -88,17 +100,17 @@ const viewChart = computed(() => buildChart(viewSeries.value, now.value))
                class="minor vertical" />
        </template>
        <g :clip-path="`url(#plot-${c.ylabel})`">
+          <!-- The muted "typical" history curve under the current data. -->
+          <path v-if="c.chart.typical" :d="c.chart.typical.line" class="line past" />
          <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">
+            <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" :class="{ past: s.past }"
-                    :style="{ opacity: s.opacity }" />
+              <path :d="s.line" class="line" />
            </template>
          </template>
        </g>
@@ -111,16 +123,17 @@ const viewChart = computed(() => buildChart(viewSeries.value, now.value))
              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"
+        <!-- Legend, top right inside the plot: current data in accent
+             (week label, or "Last 24 hours" on the day view) and the
+             typical history curve in muted. -->
+        <g v-if="c.legend && c.chart.typical">
+          <line :x1="CHART_W - 118" :x2="CHART_W - 98" y1="10" y2="10" class="line" />
+          <text :x="CHART_W - 92" y="10" dominant-baseline="middle"
+                class="leglab">{{ c.chart.bars ? 'Last 24 hours' : c.chart.series[0].label }}</text>
+          <line :x1="CHART_W - 118" :x2="CHART_W - 98" 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>
+          <text :x="CHART_W - 92" y="25" dominant-baseline="middle"
+                class="leglab">{{ c.chart.typical.label }}</text>
        </g>
      </svg>
    </template>
@@ -183,12 +196,12 @@ const viewChart = computed(() => buildChart(viewSeries.value, now.value))

 .chart .area {
  fill: var(--accent);
-  opacity: 0.15;
+  opacity: 0.6;
 }

 .chart .bar {
  fill: var(--accent);
-  opacity: 0.15;
+  opacity: 0.6;
 }

 .chart .line {
@@ -181,16 +181,21 @@ export function spline(pts) {
 export function buildChart(input, now = Date.now()) {
  if (!input || !input.series.length) return null
  if (input.unit === '5min') return buildDayChart(input, now)
-  const { series, t0, t1, rate, binMinutes, unitMinutes, unit } = input
+  const { series, t0, t1, rate, binMinutes, unitMinutes, unit, typical } = 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
  // detector thresholds are count-based), the result is scaled back to rates.
  const smoothed = series.map((s) =>
    smooth(s.points.map((p) => p.count), binMinutes, unitMinutes).map((v) => v * rate))
-  // Scale from the current/primary series only; older overlay weeks are drawn
-  // with the same scale and allowed to overflow if they are busier.
-  const highest = Math.max(0, ...smoothed[0])
+  // The "typical week" seasonal estimate is already smooth: one value per
+  // bin spanning the full week (future included), drawn in the muted color.
+  const typicalRates = typical
+    ? [...typical.values].map((v) => v * rate)
+    : null
+  // Scale from the current series plus the typical curve; both are smooth,
+  // and neither should be clipped in normal traffic.
+  const highest = Math.max(0, ...smoothed[0], ...(typicalRates || []))
  const { max, step, minor } = yScale(highest)
  const x = (t) => ((t - t0) / (t1 - t0)) * CHART_W
  const y = (v) => PAD_TOP + (1 - Math.max(0, v) / max) * (CHART_H - PAD_TOP)
@@ -205,6 +210,12 @@ export function buildChart(input, now = Date.now()) {
      area: s.area ? `${line}L${last.x},${CHART_H}L${first.x},${CHART_H}Z` : null,
    }
  })
+  let typicalLine = null
+  if (typicalRates) {
+    const binMs = (t1 - t0) / typicalRates.length
+    const pts = typicalRates.map((v, i) => ({ x: x(t0 + i * binMs), y: y(v) }))
+    typicalLine = { line: spline(pts), label: typical.label }
+  }
  // Major (labeled) and minor (hairline) y grid ticks.
  const majors = []
  const minors = []
@@ -256,16 +267,19 @@ export function buildChart(input, now = Date.now()) {
      x: x(t), label: fmtTick(t, t1 - t0), line: true,
    }))
  }
-  return { max, majors, minors, series: drawn, xticks, unit }
+  return { max, majors, minors, series: drawn, typical: typicalLine, 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.
+ * The optional "typical day" curve (per-bin counts aligned to the window's
+ * bins, cut from the typical-week estimate) overlays the bars as a smooth
+ * muted line and also feeds the y scale.
 */
 export function buildDayChart(input, now = Date.now()) {
-  const { series, t0, t1 } = input
+  const { series, t0, t1, typical } = input
  const points = series[0]?.points || []
  const n = points.length
  if (!n) return null
@@ -285,7 +299,7 @@ export function buildDayChart(input, now = Date.now()) {
    const share = elapsed / bucketMs
    return p.count + prevRaw * (1 - share)
  })
-  const highest = Math.max(0, ...projected)
+  const highest = Math.max(0, ...projected, ...(typical ? typical.values : []))
  const { max, step, minor } = yScale(highest)
  const y = (v) => PAD_TOP + (1 - Math.max(0, v) / max) * (CHART_H - PAD_TOP)

@@ -313,6 +327,15 @@ export function buildDayChart(input, now = Date.now()) {
    }
  }

+  let typicalLine = null
+  if (typical) {
+    const pts = points.map((p, i) => ({
+      x: (i + 0.5) * bucketWidth,
+      y: y(typical.values[i] || 0),
+    }))
+    typicalLine = { line: spline(pts), label: typical.label }
+  }
+
  const majors = []
  const minors = []
  const nMajor = Math.round(max / step)
@@ -338,7 +361,7 @@ export function buildDayChart(input, now = Date.now()) {
      line: false,
    })
  }
-  return { bars, skyline: skyline.trim(), max, majors, minors, xticks, unit: '5min', series: [] }
+  return { bars, skyline: skyline.trim(), typical: typicalLine, max, majors, minors, xticks, unit: '5min', series: [] }
 }

 /** X ticks for year/all: Monday boundaries up to a quarter, UTC month
@@ -2,6 +2,7 @@
 * Formatters and aggregators for summary sections: totals and the recent
 * visit trail.
 */
+import { flagFor, langName } from '../langs.js'

 /**
 * IPv4 unchanged, IPv6 returns the /64 network prefix in compact form.
@@ -176,6 +177,55 @@ function stepOf(path, titles) {
  return null
 }

+/**
+ * Badge data combining a visit's/crawler's external referer origin with the
+ * visit's UTM tags: the origin as the badge link/label (the favicon is
+ * looked up by origin in the component), a compact UTM summary (the few
+ * most informative values) as ``utm`` with the full ``utm_*=value`` list
+ * as ``utmCopy`` for click-to-copy, and a one-fact-per-line tooltip — the
+ * full origin URL on the first line, then every ``utm_*=value`` pair.
+ * Null when there is no external referer and no UTM tag (a plain direct
+ * visit).
+ */
+function refererBadgeOf(referer, titles, utmTags = {}) {
+  const step = stepOf(referer, titles)
+  const external = step?.external ? step : null
+  // Compact UTM summary, in display order source, campaign, content, term:
+  // source only when no referer is known (it just repeats where the visitor
+  // came from), content only as a stand-in when there is no term.  The
+  // remaining tags (medium and any nonstandard utm_*) fill in only when
+  // fewer than three of these more useful items exist — and never when a
+  // term is present (the term alone says enough).  The tooltip keeps
+  // every tag, one pair per line.
+  const useful = []
+  if (utmTags.utm_source && !referer) useful.push(utmTags.utm_source)
+  if (utmTags.utm_campaign) useful.push(utmTags.utm_campaign)
+  if (utmTags.utm_content && !utmTags.utm_term) useful.push(utmTags.utm_content)
+  if (utmTags.utm_term) useful.push(utmTags.utm_term)
+  const rest = useful.length < 3 && !utmTags.utm_term
+    ? Object.keys(utmTags)
+        .filter((k) => !['utm_source', 'utm_campaign', 'utm_content', 'utm_term'].includes(k))
+        .map((k) => utmTags[k])
+        .filter(Boolean)
+    : []
+  const utm = [...useful, ...rest].join(' · ')
+  if (!external && !utm) return null
+  const utmCopy = Object.entries(utmTags)
+    .map(([k, value]) => `${k}=${value}`)
+    .join('\n')
+  return {
+    href: external?.origin || '',
+    label: external?.slug || '',
+    origin: external?.origin || '',
+    utm,
+    utmCopy,
+    title: [
+      ...(external ? [external.origin] : []),
+      ...Object.entries(utmTags).map(([k, value]) => `${k}=${value}`),
+    ].join('\n'),
+  }
+}
+
 /**
 * Human-readable relative timestamp.  Adapted from cista-storage: uses
 * ``Intl.RelativeTimeFormat`` for short intervals and a compact date for
@@ -368,12 +418,13 @@ export function mainDomain(host, limit = 24) {
 /**
 * 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.  The group's ``refererStep`` is the
- * latest external referer seen for the crawler — spiders often advertise
- * their own site there — rendered with its favicon like visit referers.
+ * first, with total hits as a tie-breaker.  The group's ``refererBadge`` is
+ * the latest external referer seen for the crawler — spiders often advertise
+ * their own site there — rendered as a badge with its favicon like visit
+ * referers.
 * ``clients`` maps client hashes to client records.
 */
-export function formatCrawlerRows(crawlers, clients, pageTree, now = Date.now()) {
+export function formatCrawlerRows(crawlers, clients, pageTree, now = Date.now(), site = { multilingual: false, primaryLang: '' }) {
  const titles = buildTitleMap(pageTree)
  const groups = new Map()
  for (const c of crawlers || []) {
@@ -384,10 +435,12 @@ export function formatCrawlerRows(crawlers, clients, pageTree, now = Date.now())
      lastStart: 0,
      referer: '',
      pages: new Map(),
+      langs: new Set(),
    }
    const start = new Date(c.start).getTime()
    if (start > g.lastStart) g.lastStart = start
    if (c.referer) g.referer = c.referer
+    if (c.lang) g.langs.add(c.lang)
    if (c.entry?.startsWith('/')) {
      const existing = g.pages.get(c.entry) || { count: 0, status: c.status || 200 }
      existing.count += 1
@@ -408,14 +461,22 @@ export function formatCrawlerRows(crawlers, clients, pageTree, now = Date.now())
      const client = g.client || {}
      const host = client.host || ''
      const isHost = !!host
+      // Rendered languages read, shown only when they say something the
+      // primary language alone would not (multilingual sites only).
+      const langs = [...g.langs].sort()
+      const showLangs =
+        site.multilingual && (langs.length > 1 || (langs[0] && langs[0] !== site.primaryLang))
      return {
        lastSeen: formatWhen(g.lastStart, now),
        lastSeenIso: formatWhenIso(g.lastStart),
        lastSeenLocal: formatWhenLocal(g.lastStart),
-        refererStep: stepOf(g.referer, titles),
+        refererBadge: refererBadgeOf(g.referer, titles),
        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 })),
+        readFlags: showLangs
+          ? langs.map((l) => ({ flag: flagFor(l), name: langName(l) })).filter((f) => f.flag)
+          : [],
        ip: client.ip || '',
        ipDisplay: isHost ? mainDomain(host) : hostIP(client.ip) || client.ip || '—',
        isHost,
@@ -548,42 +609,57 @@ export function formatAbuseRows(abuse, clients, pageTree, now = Date.now()) {

 /**
 * Format raw visit records as rows for a technical table.  Returns objects
- * 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.
+ * with display strings; missing values become "—".  The external referer
+ * (when present) and the UTM tags ride along as ``refererBadge``; ``trail``
+ * holds the entry page and any further internal pages or external exit
+ * origins; consecutive views of the same page (e.g. a
+ * language switch re-view) merge into one step that keeps the
+ * consecutive-distinct rendered languages, summed read time, and the latest
+ * status.  On multilingual sites the rendered languages surface as flag
+ * icons: a visit read entirely in one non-primary language gets ``rowFlag``,
+ * and a visit spanning languages gets per-step ``langFlags`` markers where
+ * the language begins or changes.  Only the 20 most recent visits are shown.
+ * ``clients`` maps client hashes to client records; ``site`` carries the
+ * payload's multilingual/primary-language context.
 */
-export function formatVisitRows(visits, clients, pageTree, now = Date.now()) {
+export function formatVisitRows(visits, clients, pageTree, now = Date.now(), site = { multilingual: false, primaryLang: '' }) {
  const titles = buildTitleMap(pageTree)
  return [...(visits || [])].reverse().slice(0, 20).map((v) => {
    const client = (clients || {})[v.client] || {}
-    const trail = Object.values(v.trail || {})
+    const steps = 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
+          if (item.lang) step.lang = item.lang
        }
        return step
      })
      .filter(Boolean)
-    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 trail = []
+    for (const step of steps) {
+      const prev = trail[trail.length - 1]
+      if (prev && prev.path === step.path) {
+        if (step.lang && step.lang !== prev.langs[prev.langs.length - 1]) prev.langs.push(step.lang)
+        if (step.readSeconds) prev.readSeconds = (prev.readSeconds || 0) + step.readSeconds
+        if (step.status) prev.status = step.status
+      } else {
+        step.langs = step.lang ? [step.lang] : []
+        trail.push(step)
+      }
+    }
+    const distinctLangs = new Set(trail.flatMap((s) => s.langs))
    const dash = (s) => (s || '—')
    const host = client.host || ''
    const isHost = !!host
-    return {
+    const row = {
      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),
+      refererBadge: refererBadgeOf(v.referer, titles, v.utm),
      ip: client.ip || '',
      ipDisplay: isHost ? mainDomain(host) : hostIP(client.ip) || client.ip || '—',
      isHost,
@@ -593,8 +669,28 @@ export function formatVisitRows(visits, clients, pageTree, now = Date.now()) {
      ua: client.uarite?.pretty || client.ua || '—',
      uaRaw: client.ua || '',
      uaUrl: client.uarite?.url || '',
-      utm: utm || '—',
-      utmTitle,
    }
+    if (site.multilingual && distinctLangs.size) {
+      if (distinctLangs.size === 1) {
+        const [tag] = distinctLangs
+        const flag = flagFor(tag)
+        if (flag && tag !== site.primaryLang) {
+          row.rowFlag = flag
+          row.rowFlagTitle = langName(tag)
+        }
+      } else {
+        // Flag the steps where the rendered language begins or changes;
+        // lang-less steps keep the comparison chain going, they never flag.
+        let lastLang = null
+        for (const step of trail) {
+          if (!step.langs.length) continue
+          if (!lastLang || step.langs[step.langs.length - 1] !== lastLang) {
+            step.langFlags = step.langs.map(flagFor).filter(Boolean)
+          }
+          lastLang = step.langs[step.langs.length - 1]
+        }
+      }
+    }
+    return row
  })
 }
@@ -0,0 +1,109 @@
+/**
+ * Seasonal "typical week" estimate from the full visit history.
+ *
+ * Port of the seasonal.py demo algorithm: the whole smoothed 5-minute
+ * history is collapsed onto a weekly grid with exponential decay over age —
+ * a fast kernel (half-life 7 days) for the average time-of-day pattern and
+ * a slow one (half-life 42 days) for per-weekday deviations from it. The
+ * deviation is shrunk by the effective number of weeks behind each bin
+ * (n_eff / (n_eff + 3)), so with little history the estimate falls back to
+ * the common daily pattern and weekday character emerges as data accrues.
+ * Bins before the first recorded bucket are treated as missing.
+ */
+
+import { DAY, MIN5, mondayUTC, rawTimes } from './time.js'
+import { smooth } from './chart.js'
+
+export const BINS_PER_DAY = 288
+export const BINS_PER_WEEK = 7 * BINS_PER_DAY
+
+// History cap: at 180 days the slow kernel's weight is 2^(-180/42) ≈ 5%
+// (and the fast kernel's utterly negligible), so older data cannot move
+// this noisy estimate — skipping it keeps the smoothing pass O(1).
+const MAX_HISTORY_DAYS = 180
+
+/**
+ * Estimate the typical week from a dense 5-minute count series (oldest
+ * first; non-finite values count as missing). endWeekBin is the week bin
+ * (Monday-first) just past the last sample. Returns BINS_PER_WEEK counts
+ * per 5-minute bin, starting Monday 00:00.
+ */
+export function seasonalCurve(counts, {
+  endWeekBin,
+  binsPerDay = BINS_PER_DAY,
+  recentHalfLife = 7,
+  weekdayHalfLife = 42,
+  shrinkWeeks = 3,
+} = {}) {
+  const n = counts.length
+  const binsPerWeek = 7 * binsPerDay
+
+  const recentW = new Float64Array(binsPerDay)
+  const recentX = new Float64Array(binsPerDay)
+  const dayW = new Float64Array(binsPerDay)
+  const dayX = new Float64Array(binsPerDay)
+  const weekW = new Float64Array(binsPerWeek)
+  const weekX = new Float64Array(binsPerWeek)
+  const weekW2 = new Float64Array(binsPerWeek)
+
+  for (let i = 0; i < n; i++) {
+    const x = counts[i]
+    if (!Number.isFinite(x)) continue
+    let weekBin = (endWeekBin - n + i) % binsPerWeek
+    if (weekBin < 0) weekBin += binsPerWeek
+    const dayBin = weekBin % binsPerDay
+    const ageDays = (n - 1 - i) / binsPerDay
+    const recent = 2 ** (-ageDays / recentHalfLife)
+    const slow = 2 ** (-ageDays / weekdayHalfLife)
+    recentW[dayBin] += recent
+    recentX[dayBin] += recent * x
+    dayW[dayBin] += slow
+    dayX[dayBin] += slow * x
+    weekW[weekBin] += slow
+    weekX[weekBin] += slow * x
+    weekW2[weekBin] += slow * slow
+  }
+
+  const estimate = new Float64Array(binsPerWeek)
+  for (let wb = 0; wb < binsPerWeek; wb++) {
+    const db = wb % binsPerDay
+    const recentMean = recentW[db] > 0 ? recentX[db] / recentW[db] : NaN
+    const dayMean = dayW[db] > 0 ? dayX[db] / dayW[db] : NaN
+    const weekMean = weekW[wb] > 0 ? weekX[wb] / weekW[wb] : 0
+    const nEff = weekW2[wb] > 0 ? (weekW[wb] * weekW[wb]) / weekW2[wb] : 0
+    const shrink = nEff / (nEff + shrinkWeeks)
+    const base = Number.isFinite(recentMean)
+      ? recentMean
+      : Number.isFinite(dayMean) ? dayMean : 0
+    const deviation = Number.isFinite(dayMean) ? weekMean - dayMean : 0
+    estimate[wb] = base + shrink * deviation
+  }
+  return estimate
+}
+
+/** Week bin (0 = Monday 00:00–00:05 UTC) containing timestamp t. */
+export function weekBinIndex(t) {
+  return Math.floor((t - mondayUTC(t)) / MIN5)
+}
+
+/**
+ * Typical-week estimate from sparse 5-minute buckets, using history up to
+ * tEnd (default now): bins are densified from the first recorded bucket
+ * (capped at MAX_HISTORY_DAYS back), smoothed with the same Gaussian the
+ * week view uses, then folded by seasonalCurve. Returns BINS_PER_WEEK
+ * counts per 5-minute bin starting Monday, or null when there is less than
+ * a day of history.
+ */
+export function typicalWeek(buckets, tEnd = Date.now()) {
+  const raw = rawTimes(buckets)
+  const times = Object.keys(raw).map(Number)
+  if (!times.length) return null
+  const end = Math.floor(tEnd / MIN5) * MIN5
+  const start = Math.max(Math.min(...times), end - MAX_HISTORY_DAYS * DAY)
+  const n = Math.floor((end - start) / MIN5)
+  if (n < BINS_PER_DAY) return null
+  const counts = new Array(n)
+  for (let i = 0; i < n; i++) counts[i] = raw[start + i * MIN5] || 0
+  const smoothed = smooth(counts, 5, 60)
+  return seasonalCurve(smoothed, { endWeekBin: weekBinIndex(end) })
+}
@@ -3,8 +3,8 @@
 *
 * Raw data comes as sparse 5-minute buckets; the range picks the x window
 * and a coarser bucket size to keep point counts sane. The week range is
- * aligned to Monday 00:00 UTC and overlays previous weeks' curves (fading
- * with age), so weekly patterns compare directly.
+ * aligned to Monday 00:00 UTC; a "typical week" seasonal estimate
+ * (seasonal.js) is overlaid on the week and day views by the chart builder.
 */

 export const MIN5 = 5 * 60e3
@@ -51,60 +51,24 @@ 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). 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
+ * The current week at native 5-minute resolution, 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).
+ * Previous weeks are no longer overlaid; the "typical week" seasonal
+ * estimate (seasonal.js) takes their place as the history reference.
 */
 export function weeklySeries(buckets) {
  const raw = rawTimes(buckets)
-  const times = Object.keys(raw).map(Number)
  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
-  const count = Math.min(available, 8)
-  const out = []
-  for (let back = 0; back < count; back++) {
-    const start = thisMonday - back * WEEK
-    const end = back === 0
-      ? Math.min(start + WEEK, Math.floor(now / MIN5) * MIN5 + MIN5)
-      : start + WEEK
-    const points = []
-    for (let t = start; t < end; t += MIN5) {
-      points.push({ t: t + back * WEEK, count: raw[t] || 0 })
-    }
-    out.push({
-      points,
-      label: `Week ${isoWeek(start)}`,
-      opacity: Math.max(0.15, 1 - back * 0.25),
-      past: back > 0,
-      area: back === 0,
-    })
+  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: raw[t] || 0 })
  }
  return {
-    series: out,
+    series: [{ points, label: `Week ${isoWeek(thisMonday)}`, opacity: 1, area: true }],
    t0: thisMonday,
    t1: thisMonday + WEEK,
    rate: HOUR / MIN5,
@@ -26,6 +26,15 @@
  /* Selection fill for page text and the CodeMirror editors; themes
     override when the accent tint clashes with accent-colored text. */
  --selection-bg: color-mix(var(--accent) 30%, transparent);
+  /* Referer-badge chip in the analytics viewer: a translucent neutral wash,
+     deliberately NOT themed — the chip sits behind transparent favicons, so
+     black-on-transparent and white-on-transparent glyphs must both stay
+     legible on every theme (a slight whitening keeps black glyphs readable
+     on dark bars without a glaring solid-white chip). Being translucent, it
+     takes the page's tone, so its text follows the theme's colors. */
+  --badge-bg: #aaaaaa44;
+  --badge-text: var(--text);
+  --badge-muted: var(--muted);
  /* Code highlighting palette, consumed by pygments.css: complete light and
     dark sets (background included), resolved by light-dark() from the
     used color-scheme. A theme picks a set simply by declaring
@@ -472,19 +481,20 @@ main {
  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
+/* Child-entry cards: a category page (and the content-less category
+   404) lists its published children after the markdown content — one
+   card per child (a child without a page of its own is represented by
+   its first leaf page; see _cards in views.py). The row bleeds to full
+   page width (div.wide): the cards 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. */
+  /* Cards stop growing at their cap; center the row in the bleed then. */
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
@@ -493,18 +503,7 @@ main {
  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.
+/* Phones: the cards 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) {
@@ -518,12 +517,16 @@ main {
 }

 .card {
+  /* 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;
  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. */
+     text cards hold their row wider than the image-only cards. */
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
@@ -798,11 +801,11 @@ article h2 .edit-section {
  opacity: 0.35;
 }

-/* Login/profile links injected by pagerite.js when Paskia SSO is in use.
+/* Login/profile buttons injected by pagerite.js when Paskia SSO is in use.
   They live inside the .editor-pens flex container in the banner's top-right
   corner and inherit its reset; keep only their text-shadow tweak. */
-.editor-pens a.login-link,
-.editor-pens a.profile-link {
+.editor-pens .login-link,
+.editor-pens .profile-link {
  text-shadow: 0 0 0.1em black;
 }

@@ -6,6 +6,7 @@
 // support from the article itself and are re-applied after each swap.
 import { OverlayScrollbars } from "overlayscrollbars";
 import "overlayscrollbars/overlayscrollbars.css";
+import { profile, apiJson, fetchJson } from "paskia";
 import { reconnectPolicy, socketSlot, watchConnecting } from "./reconnect";

 (() => {
@@ -101,10 +102,11 @@ import { reconnectPolicy, socketSlot, watchConnecting } from "./reconnect";
  // 401/403 here, and a 200 means the permission is present.
  //
  // When Paskia SSO is in use (probed via /auth/api/settings), the banner
-  // corner gets a plain link to /auth/ — 🔑 log in for anonymous visitors,
-  // 🔐 profile when logged in. Normal navigation: Paskia does not support
-  // being iframed, and history.back() returns to the page as-is (the
-  // pageshow handler below re-probes auth to refresh the pens).
+  // corner gets an auth button — 🔑 log in for anonymous visitors,
+  // 🔐 profile when logged in. The click opens paskia-js's profile() dialog
+  // (an iframe overlay; Paskia does not support being iframed by others, but
+  // serves this dialog itself), which handles the login flow too. On close we
+  // re-probe auth: login/logout inside the dialog changes the session.
  let ssoAvailable = false;
  let isAdmin = false;
  let authReady = false;
@@ -163,13 +165,21 @@ import { reconnectPolicy, socketSlot, watchConnecting } from "./reconnect";
    }
  }

-  function makeAuthLink(admin) {
-    const a = document.createElement("a");
-    a.className = (admin ? "profile-link" : "login-link") + " icon-btn";
-    a.href = "/auth/";
-    a.title = admin ? "profile" : "log in";
-    a.textContent = admin ? "\u{1F510}" : "\u{1F511}";
-    return a;
+  function makeAuthButton(admin) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = (admin ? "profile-link" : "login-link") + " icon-btn";
+    btn.title = admin ? "profile" : "log in";
+    btn.textContent = admin ? "\u{1F510}" : "\u{1F511}";
+    btn.addEventListener("click", async () => {
+      // Resolves when the dialog closes ("login"/"logout"/"back"); whatever
+      // happened, the session may have changed — re-probe and re-render.
+      try {
+        await profile();
+      } catch { /* dialog closed without completing */ }
+      setupAuth();
+    });
+    return btn;
  }

  // The banner top-right corner container: the language selector (first
@@ -218,7 +228,7 @@ import { reconnectPolicy, socketSlot, watchConnecting } from "./reconnect";
          pens.append(a);
          pens.append(makePen("site"));
        }
-        if (ssoAvailable) pens.append(makeAuthLink(isAdmin));
+        if (ssoAvailable) pens.append(makeAuthButton(isAdmin));
        if (!pens.firstElementChild) pens.remove();
      }
      if (canEdit && !onAnalytics) injectPagePen();
@@ -239,20 +249,24 @@ import { reconnectPolicy, socketSlot, watchConnecting } from "./reconnect";
      css: assets["pagerite:editor-css"],
    };

-    // Detect whether Paskia SSO is available on this site.
+    // Detect whether Paskia SSO is available on this site, and whether the
+    // current session has pagerite:admin. fetchJson (paskia-js) is plain
+    // fetch with JSON handling and an error on non-OK — it never opens the
+    // login dialog (that is apiFetch/apiJson's job), so these probes are
+    // safe to run for anonymous visitors.
    try {
-      const ssoRes = await fetch("/auth/api/settings");
-      ssoAvailable = ssoRes.ok;
+      await fetchJson("/auth/api/settings");
+      ssoAvailable = true;
    } catch {
      ssoAvailable = false;
    }

-    // Check whether the current session has pagerite:admin.
    isAdmin = false;
    try {
-      isAdmin = (await fetch("/_api/settings")).status === 200;
+      await fetchJson("/_api/settings");
+      isAdmin = true;
    } catch {
-      // No auth proxy / dev.
+      // Anonymous, no pagerite:admin, or no auth proxy / dev.
    }

    if (isAdmin) {
@@ -628,7 +642,7 @@ import { reconnectPolicy, socketSlot, watchConnecting } from "./reconnect";
    wsQueue.push(msg);
  }

-  function ping({ to, fr = currentPath, read = 0 } = {}) {
+  function ping({ to, fr = currentPath, read = 0, lang } = {}) {
    // Reading-time updates from the analytics page itself are not tracked
    // (/_a is admin machinery; the server would reject the path anyway).
    if (!to && currentPath === "/_a") return;
@@ -637,6 +651,11 @@ import { reconnectPolicy, socketSlot, watchConnecting } from "./reconnect";
    if (to) msg.to = to;
    const secs = Math.round(read / 1000);
    if (secs > 0) msg.read = secs;
+    // The rendered language: normally the live <html lang>, but a language
+    // switch passes it explicitly — the swap that updates <html> runs inside
+    // the view-transition callback, after the switch ping goes out.
+    lang = lang || document.documentElement.lang;
+    if (lang) msg.lang = lang;
    if (!msg.to && !msg.read) return;
    report(msg);
  }
@@ -815,6 +834,11 @@ import { reconnectPolicy, socketSlot, watchConnecting } from "./reconnect";
    const y = scrollY; // a language switch is not a navigation: keep scroll
    await load(currentPath, false);
    scrollTo(0, y);
+    // Log the switch as a trail event in the new language (load() updated
+    // <html lang>, but possibly inside a still-pending view transition, so
+    // pass the tag explicitly): the ping matches the switch's GET
+    // server-side, so it is not misclassified as a crawler hit.
+    ping({ to: currentPath, lang: tag });
  });

  // --- Fetch navigation ------------------------------------------------
@@ -1053,6 +1077,10 @@ import { reconnectPolicy, socketSlot, watchConnecting } from "./reconnect";
  // Checkboxes in the rendered article are live: toggling them edits the
  // Markdown source. If the page editor is open, its CodeMirror document is
  // updated directly; otherwise the server copy is toggled and saved.
+  // apiJson (paskia-js): a 401/403 from an expired session opens the login
+  // dialog and the toggle retries after auth — ticking a box is an explicit
+  // edit attempt. Any failure reverts the checkbox, including the user
+  // cancelling that dialog (AuthCancelledError).
  async function toggleTask(checkbox, index) {
    const editor = window.__pageritePageEditor;
    const pagePath = editor ? editor.path() : currentPath;
@@ -1061,16 +1089,7 @@ import { reconnectPolicy, socketSlot, watchConnecting } from "./reconnect";
    try {
      const body = { path, index };
      if (editor) body.markdown = editor.getMarkdown();
-      const res = await fetch("/_api/toggle-task", {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify(body),
-      });
-      if (!res.ok) {
-        const detail = await res.json().catch(() => ({}));
-        throw new Error(detail.detail || res.statusText);
-      }
-      const { markdown } = await res.json();
+      const { markdown } = await apiJson("/_api/toggle-task", { method: "POST", body });
      if (editor) editor.setMarkdown(markdown);
    } catch {
      checkbox.checked = originalChecked;
@@ -3,6 +3,8 @@
 // Used by BannerEditor (banner design changes), SiteEditor (theme changes)
 // and StructureEditor (tree navigation).

+import { apiFetch } from 'paskia'
+
 // 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
@@ -139,7 +141,7 @@ export async function loadPlain(p) {
  let html
  try {
    const pin = overrideLang || window.__pageriteLang
-    const res = await fetch(pin ? `${finalUrl}?lang=${pin}` : finalUrl)
+    const res = await apiFetch(pin ? `${finalUrl}?lang=${pin}` : finalUrl)
    const type = res.headers.get('content-type') || ''
    if (!type.includes('text/html')) return null
    if (res.redirected) finalUrl = res.url
@@ -8,11 +8,11 @@
 * - Disables Vite's screen clearing on startup
 *
 * Options:
- *   paths - Array of paths to proxy (default: ["/api"])
+ *   paths - Array of paths to proxy (default: ['/api'])
 */

-export default function fastapiVue({ paths = ["/api"] } = {}) {
-  const backendUrl = process.env.PAGERITE_BACKEND_URL || "http://localhost:8210"
+export default function fastapiVue({ paths = ['/api'] } = {}) {
+  const backendUrl = process.env.PAGERITE_BACKEND_URL || 'http://localhost:8210'

  // Build proxy configuration for each path
  const proxy = {}
@@ -25,12 +25,12 @@ export default function fastapiVue({ paths = ["/api"] } = {}) {
  }

  return {
-    name: "vite-plugin-fastapi-pagerite",
+    name: 'vite-plugin-fastapi-pagerite',
    config: () => ({
      clearScreen: false,
      server: { proxy },
      build: {
-        outDir: "../pagerite/frontend-build",
+        outDir: '../pagerite/frontend-build',
        emptyOutDir: true,
      },
    }),
@@ -5,7 +5,7 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'

-const backendUrl = process.env.PAGERITE_BACKEND_URL || 'http://localhost:3200'
+const backendUrl = process.env.PAGERITE_BACKEND_URL || 'http://localhost:8210'

 // Proxy everything except Vite's own dev-time paths and the backend machinery
 // to the FastAPI backend in dev. /_api, /_f, /_themes, /_fonts and /_a are
@@ -5,12 +5,12 @@ import os
 from pathlib import Path

 import msgspec
-from fastapi_vue import server
+from fastapi_vue import env, server

 from pagerite.config import Config

 DEFAULT_PORT = 8100
-DEVMODE = os.getenv("PAGERITE_DEV") == "1"
+os.environ["FASTAPI_VUE"] = "PAGERITE"


 def main() -> None:
@@ -54,7 +54,17 @@ def main() -> None:
        listen=args.listen,
        default_port=DEFAULT_PORT,
        server_header=False,
-        reload=Path(__file__).parent if DEVMODE else False,
+        reload=Path(__file__).parent if env.dev else False,
+        # Partial log config, merged over uvicorn's default by fastapi-vue:
+        # root prints at WARNING in production / INFO in dev. Keep our own
+        # loggers audible in production, and silence httpx's per-request INFO
+        # (tracking._schedule_favicon_fetch logs its own one-line summary).
+        log_config={
+            "loggers": {
+                "pagerite": {"level": "INFO"},
+                "httpx": {"level": "WARNING"},
+            }
+        },
        **run_args,
    )

@@ -2,8 +2,9 @@

 Raw recording, display-time classification.  Every document GET is appended
 to ``Analytics.gets`` as a raw access-log line (path with query string, true
-HTTP status, external referer origin, preload flag) and every pagerite.js
-activity message from the /_ws WebSocket is appended to ``Analytics.msgs``
+HTTP status, external referer origin, preload flag, rendered content
+language) and every pagerite.js activity message from the /_ws WebSocket is
+appended to ``Analytics.msgs``
 (navigations ``fr`` -> ``to`` and active reading-time updates).  Nothing is
 classified when it is recorded: whether a client turns out to be a reader,
 a crawler or a scanner is decided by ``Store.display()`` from the raw
@@ -92,6 +93,9 @@ class Ping(msgspec.Struct, omit_defaults=True):
    read: int = 0
    #: Admin client: record but hide everything from the statistics.
    hide: bool = False
+    #: Rendered language of the page the activity happened on (the page's
+    #: ``<html lang>``, sent by pagerite.js).
+    lang: str = ""


 class Get(msgspec.Struct, omit_defaults=True):
@@ -115,6 +119,9 @@ class Get(msgspec.Struct, omit_defaults=True):
    #: never counted as a view/crawler/abuse hit; recorded only so a later
    #: cache-served navigation can be attributed this GET's status.
    pre: bool = False
+    #: Rendered content language of the served document; "" for
+    #: non-localized responses (404 probes, reserved paths).
+    lang: str = ""


 class Msg(msgspec.Struct, omit_defaults=True):
@@ -135,6 +142,9 @@ class Msg(msgspec.Struct, omit_defaults=True):
    to: str = ""
    #: Active reading time (seconds) spent on ``fr`` since the last report.
    read: int = 0
+    #: Rendered language reported by the client for the page the activity
+    #: happened on.
+    lang: str = ""


 class Client(msgspec.Struct, omit_defaults=True):
@@ -191,6 +201,8 @@ class TrailItem(msgspec.Struct, omit_defaults=True):

    ``read`` accumulates active reading time (seconds) across the whole
    visit; ``status`` is the most recent HTTP status seen for the target.
+    A page seen in two rendered languages within one visit (a mid-article
+    language switch) gets one item per language.
    """

    to: str
@@ -198,6 +210,10 @@ class TrailItem(msgspec.Struct, omit_defaults=True):
    read: int = 0
    #: Most recent HTTP status of the response (200 or 404).
    status: int = 200
+    #: Rendered language of the target: the client's report, for the entry
+    #: page falling back to its GET's rendered language; "" when unknown
+    #: (old clients or data from before language recording).
+    lang: str = ""


 class Visit(msgspec.Struct, omit_defaults=True):
@@ -206,8 +222,9 @@ class Visit(msgspec.Struct, omit_defaults=True):
    ``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``.
+    appending — unless the client reports a different rendered language for
+    it, which appends a distinct item (a mid-article language switch).
+    Client metadata is held in ``Analytics.clients`` keyed by ``client``.
    """

    start: datetime
@@ -241,6 +258,8 @@ class CrawlerHit(msgspec.Struct, omit_defaults=True):
    query: str = ""
    #: HTTP status of the served response (200 or 404 for content pages).
    status: int = 200
+    #: Rendered content language of the served document (from the GET).
+    lang: str = ""


 class AbuseHit(msgspec.Struct, omit_defaults=True):
@@ -319,6 +338,12 @@ class Display(msgspec.Struct, omit_defaults=True):
    views: dict[str, dict[str, int]] = {}
    #: New visits per 5-minute bucket: bucket ISO -> count (sparse).
    site_visits: dict[str, int] = {}
+    #: Site context: true when translation languages are configured, so the
+    #: viewer can suppress language UI on single-language sites.
+    multilingual: bool = False
+    #: The site's primary language (the front page's), so the viewer can
+    #: skip the primary-language default case.
+    primary_lang: str = ""


 def _bucket(now: datetime) -> str:
@@ -594,22 +619,25 @@ class Store:
        referer: str = "",
        accept_language: str = "",
        pre: bool = False,
+        lang: str = "",
    ) -> bytes | None:
        """Append one document GET to the raw log.

        ``path`` is the full request path, query string included; ``status``
        the true HTTP status of the response; ``referer`` the raw Referer
        header (reduced here to an external https origin, "" when internal
-        or absent); ``pre`` marks idle-time preloads from pagerite.js.
+        or absent); ``pre`` marks idle-time preloads from pagerite.js;
+        ``lang`` the rendered content language of the served document (""
+        for non-localized responses such as 404 probes and reserved paths).

        Returns the client hash when the client record was just created (so
        the caller can schedule async enrichment), else None.
        """
-        lang, country = _parse_accept_language(accept_language)
-        client_hash = _client_hash(ip, ua, lang)
+        client_lang, country = _parse_accept_language(accept_language)
+        client_hash = _client_hash(ip, ua, client_lang)
        new = client_hash not in self.data.clients
        if new:
-            self._ensure_client(ip, ua, lang, country=country)
+            self._ensure_client(ip, ua, client_lang, country=country)
        self.data.gets.append(
            Get(
                t=datetime.now(UTC),
@@ -618,6 +646,7 @@ class Store:
                status=status,
                ref=_origin(referer) or "",
                pre=pre,
+                lang=lang,
            )
        )
        self._save()
@@ -632,6 +661,7 @@ class Store:
        accept_language: str = "",
        hide: bool = False,
        read: int = 0,
+        lang: str = "",
    ) -> bytes | None:
        """Append one client activity message (``Ping`` from pagerite.js) to
        the raw log.
@@ -642,16 +672,18 @@ class Store:
        stored raw and filtered at display time, so future rule changes lose
        nothing.  ``hide`` flags the client record as an admin; the message
        itself is recorded normally and hidden at display time like
-        everything else the client ever did.
+        everything else the client ever did.  ``lang`` is the rendered
+        language reported by the client for the page the activity happened
+        on.

        Returns the client hash when the client record was just created (so
        the caller can schedule async enrichment), else None.
        """
-        lang, country = _parse_accept_language(accept_language)
-        client_hash = _client_hash(ip, ua, lang)
+        client_lang, country = _parse_accept_language(accept_language)
+        client_hash = _client_hash(ip, ua, client_lang)
        new = client_hash not in self.data.clients
        if new:
-            self._ensure_client(ip, ua, lang, country=country)
+            self._ensure_client(ip, ua, client_lang, country=country)
        if hide:
            self.data.clients[client_hash].hide = True
        fr = (_internal_path(fr) or "") if fr else ""
@@ -663,7 +695,14 @@ class Store:
                target = _external_target(to) or ""
        if target or read > 0:
            self.data.msgs.append(
-                Msg(t=datetime.now(UTC), client=client_hash, fr=fr, to=target, read=read)
+                Msg(
+                    t=datetime.now(UTC),
+                    client=client_hash,
+                    fr=fr,
+                    to=target,
+                    read=read,
+                    lang=lang,
+                )
            )
        if target or read > 0 or hide:
            self._save()
@@ -700,7 +739,13 @@ class Store:
        self.data.favicons[origin] = Favicon(file=file, fetched=datetime.now(UTC))
        self._save()

-    def display(self, in_menu: Callable[[str], bool] | None = None) -> Display:
+    def display(
+        self,
+        in_menu: Callable[[str], bool] | None = None,
+        *,
+        multilingual: bool = False,
+        primary_lang: str = "",
+    ) -> Display:
        """Build the viewer payload from the raw events.

        All classification happens here, so the stored data is independent
@@ -722,10 +767,17 @@ class Store:
        - visits: the remaining messages, grouped per client with a new
          visit after ``_SESSION_GAP`` of inactivity.  Trail statuses come
          from the client's GETs (preloads included — a cache-served
-          navigation's only GET is its preload); the entry referer and UTM
-          tags from the GET that loaded the entry page.
+          navigation's only GET is its preload); trail languages come from
+          the client's messages (the entry item falling back to its GET's
+          rendered language), and a page re-visited in a different rendered
+          language becomes a distinct trail step.  The entry referer and
+          UTM tags come from the GET that loaded the entry page.

        Hidden (admin) clients are excluded from every list and aggregate.
+        ``multilingual`` and ``primary_lang`` are site context (translation
+        languages configured, the front page's primary language) copied
+        onto the payload so the viewer can suppress language UI on
+        single-language sites and skip the primary-language default case.
        """
        in_menu = in_menu or (lambda path: False)
        data = self.data
@@ -836,7 +888,11 @@ class Store:
                                g.path.split("?", 1)[1] if "?" in g.path else ""
                            )
                        visit.trail[m.t] = TrailItem(
-                            to=m.to, status=status_at(h, m.to, m.t)
+                            to=m.to,
+                            status=status_at(h, m.to, m.t),
+                            # The client's report wins; the entry GET fills
+                            # in for old clients that don't send lang.
+                            lang=m.lang or (g.lang if g is not None else ""),
                        )
                        visits.append(visit)
                    else:
@@ -844,18 +900,40 @@ class Store:
                        visit.navs[m.t] = Nav(fr=fr, to=m.to)
                        status = status_at(h, m.to, m.t)
                        # First-seen only: repeat pages and repeated exits
-                        # update the existing trail item instead of appending.
+                        # update the existing trail item instead of
+                        # appending — but a repeat in a different rendered
+                        # language (a mid-article language switch) becomes
+                        # a distinct step.
                        for item in visit.trail.values():
                            if item.to == m.to:
-                                item.status = status
+                                if m.lang and item.lang and m.lang != item.lang:
+                                    visit.trail[m.t] = TrailItem(
+                                        to=m.to, status=status, lang=m.lang
+                                    )
+                                else:
+                                    item.status = status
+                                    if not item.lang:
+                                        item.lang = m.lang
                                break
                        else:
-                            visit.trail[m.t] = TrailItem(to=m.to, status=status)
+                            visit.trail[m.t] = TrailItem(
+                                to=m.to, status=status, lang=m.lang
+                            )
                if m.read > 0 and m.fr and visit is not None:
+                    # A page appears in the trail once per language seen:
+                    # land the seconds on the matching-language step when
+                    # the client reports one, else on the first-seen item.
+                    read_item: TrailItem | None = None
                    for item in visit.trail.values():
-                        if item.to == m.fr:
-                            item.read += m.read
+                        if item.to != m.fr:
+                            continue
+                        if read_item is None:
+                            read_item = item
+                        if m.lang and item.lang == m.lang:
+                            read_item = item
                            break
+                    if read_item is not None:
+                        read_item.read += m.read
                last_t = m.t

        # --- crawler hits: document GETs no message matched
@@ -889,6 +967,7 @@ class Store:
                    referer=g.ref,
                    query=query,
                    status=g.status,
+                    lang=g.lang,
                )
            )

@@ -912,6 +991,7 @@ class Store:
                        referer=visit.referer if first else "",
                        query=query if first else "",
                        status=item.status,
+                        lang=item.lang,
                    )
                )
                first = False
@@ -938,6 +1018,8 @@ class Store:
                for origin, f in data.favicons.items()
                if f.file
            },
+            multilingual=multilingual,
+            primary_lang=primary_lang,
        )
        for visit in kept:
            bucket = _bucket(visit.start)
@@ -959,6 +1041,14 @@ class Store:
                nbuckets[nb] = nbuckets.get(nb, 0) + 1
        return display

-    def display_json(self, in_menu: Callable[[str], bool] | None = None) -> str:
+    def display_json(
+        self,
+        in_menu: Callable[[str], bool] | None = None,
+        *,
+        multilingual: bool = False,
+        primary_lang: str = "",
+    ) -> str:
        """The ``display()`` payload as a JSON string for the WebSocket."""
-        return msgspec.json.encode(self.display(in_menu)).decode()
+        return msgspec.json.encode(
+            self.display(in_menu, multilingual=multilingual, primary_lang=primary_lang)
+        ).decode()
@@ -19,6 +19,7 @@ from fastapi import (
    WebSocket,
    WebSocketDisconnect,
 )
+from html5tagger import E
 from pydantic import BaseModel

 from pagerite import i18n, views
@@ -495,6 +496,11 @@ async def editor_ws(ws: WebSocket) -> None:
                    markdown = msg.get("markdown", "")
                    chain = resolve(data.menu, path)
                    node = chain[-1] if chain else None
+                    # Expand {cards} like page_content does, so the preview
+                    # shows real cards, not the literal tag. No translation
+                    # context: the preview has no lang of its own, so cards
+                    # render in their originals.
+                    has_cards_tag = views._CARDS_TAG_RE.search(markdown) is not None
                    rendered = render(
                        markdown,
                        path,
@@ -511,12 +517,30 @@ async def editor_ws(ws: WebSocket) -> None:
                            if node
                            else None
                        ),
+                        directives=(
+                            {
+                                "cards": lambda args, _env: views._cards_tag(
+                                    data.menu, data, node, path, args
+                                )
+                            }
+                            if node is not None and has_cards_tag
+                            else None
+                        ),
                    )
+                    html = rendered.html
+                    if node is not None and not has_cards_tag:
+                        # Without a {cards} tag page_content appends the
+                        # children's cards after the content — the preview
+                        # replaces the whole article, so include them here.
+                        doc = E.div
+                        with doc:
+                            views._cards(doc, data.menu, data, node, path)
+                        html += str(doc)
                    await ws.send_json(
                        {
                            "type": "html",
                            "path": path,
-                            "html": rendered.html,
+                            "html": html,
                            # Column-layout flag: the preview toggles the
                            # article's .multicol class and swaps in the
                            # segmented (.colseg/.cols) article html.
@@ -36,11 +36,10 @@ from pathlib import Path

 from fastapi import FastAPI, Request
 from fastapi.responses import Response
-from fastapi_vue import Frontend
+from fastapi_vue import Frontend, env
 from starlette.types import ASGIApp, Receive, Scope, Send

 from pagerite import api, files, pages, tracking
-from pagerite.__main__ import DEVMODE
 from pagerite.files import file_store
 from pagerite.state import analytics_store, config, kanta

@@ -99,7 +98,7 @@ async def lifespan(_app: FastAPI) -> AsyncGenerator:
 # is not meant to be browsable by the public anyway.
 app = FastAPI(
    title="Pagerite",
-    debug=DEVMODE,
+    debug=env.dev,
    lifespan=lifespan,
    docs_url=None,
    redoc_url=None,
@@ -39,10 +39,6 @@ from pagerite.state import (

 logger = logging.getLogger(__name__)

-# mediapreview logs pyvips noise ("VipsForeignSaveJpegTarget argument strip is
-# deprecated", "threadpool completed with N workers") at INFO; keep warnings.
-logging.getLogger("mediapreview").setLevel(logging.WARNING)
-
 router = APIRouter()


@@ -159,14 +155,13 @@ def _svg_to_png(body: bytes, maxsize: int) -> bytes | None:

 def _avif_to_format(avif: bytes, suffix: str, quality: int) -> bytes:
    """Re-encode the AVIF derivative into a fallback format (WebP/JPEG)
-    via pyvips. JPEG has no alpha, so it is flattened onto white;
-    ``strip`` keeps metadata (EXIF) out of the fallbacks."""
+    via pyvips. JPEG has no alpha, so it is flattened onto white."""
    import pyvips

    img = pyvips.Image.new_from_buffer(avif, "")
    if suffix == ".jpg" and img.hasalpha():
        img = img.flatten(background=[255, 255, 255])
-    return img.write_to_buffer(suffix, Q=quality, strip=True)
+    return img.write_to_buffer(suffix, Q=quality, keep="none")


 def _image_derivatives(
@@ -87,21 +87,16 @@ def select_language(

    1. ``?lang=`` wins when a translation exists for it (otherwise falls
       through to the header logic).
-    2. The original language anywhere in the header list wins — an AI
-       translation is strictly worse than the original for anyone who has
-       English configured at all.
-    3. Otherwise the first header language with an available translation.
-    4. Fall back to the original.
+    2. Otherwise the first header language that can be served — the
+       original, or one with an available translation.
+    3. Fall back to the original.
    """
    if query_lang:
        tag = base_tag(query_lang)
        if tag == original or (tag and is_available(tag)):
            return tag
-    langs = parse_accept_language(accept_language or "")
-    if original in langs:
-        return original
-    for lang in langs:
-        if lang != original and is_available(lang):
+    for lang in parse_accept_language(accept_language or ""):
+        if lang == original or is_available(lang):
            return lang
    return original

@@ -56,9 +56,15 @@ becomes a block `<figure>` — with `<figcaption>` when it has a title.
 Images inline with other content stay plain inline `<img>`, as does raw
 `<img>` HTML written by the author. Positioning is done with attribute
 classes, e.g. `![alt](photo.avif "Caption"){.right}`.
+
+A lone `{name}` or `{name: args}` line is a block directive, expanded by
+the caller through render(directives=...) — `{dates}` (built in) expands
+to the article's dateline, `{cards}` / `{cards: path ...}` to card rows
+of other pages (views.py). Unresolved tags render as the literal source.
 """

 import re
+from collections.abc import Callable
 from datetime import datetime, timedelta
 from typing import NamedTuple

@@ -505,6 +511,64 @@ def anchor_ids(text: str, title: str | None = None) -> list[str]:
    ]


+#: A lone {...} paragraph: a block directive like {dates} or
+#: {cards: docs/* news} — name, then optional ":"-separated argument text.
+_DIRECTIVE_RE = re.compile(r"\{([a-z][a-z0-9_-]*)(?::([^{}\n]*))?\}")
+
+
+def _directives(state) -> None:
+    """Turn lone ``{name}`` / ``{name: args}`` paragraphs into directive tokens.
+
+    The expansion is not markdown.py's business: _directive_rule delegates
+    to the resolvers render() put in env["directives"], falling back to the
+    literal source when the tag is unknown in the context (e.g. the editor
+    preview of a page that does not exist yet). The ``cards`` directive gets .wide so it
+    stands alone as a full-width block outside the column segments (the
+    card markup never flows in columns). Runs on the render instance only —
+    the verbatim parser keeps the plain paragraph so segments/chunks see
+    the placeholder source.
+    """
+    tokens = state.tokens
+    out = []
+    i = 0
+    while i < len(tokens):
+        if (
+            i + 2 < len(tokens)
+            and tokens[i].type == "paragraph_open"
+            and tokens[i + 1].type == "inline"
+            and tokens[i + 2].type == "paragraph_close"
+        ):
+            inline = tokens[i + 1]
+            children = inline.children or []
+            if len(children) == 1 and children[0].type == "text":
+                m = _DIRECTIVE_RE.fullmatch(children[0].content.strip())
+                if m:
+                    token = Token("directive", "", 0)
+                    token.level = tokens[i].level
+                    token.map = tokens[i].map
+                    token.content = m.group(0)
+                    token.meta = {"name": m.group(1), "args": (m.group(2) or "").strip()}
+                    if m.group(1) == "cards":
+                        token.attrSet("class", "wide")
+                    out.append(token)
+                    i += 3
+                    continue
+        out.append(tokens[i])
+        i += 1
+    state.tokens = out
+
+
+def _directive_rule(self: RendererHTML, tokens, idx: int, options, env: dict) -> str:
+    """Render a directive token via env["directives"][name](args, env);
+    unresolved tags render as the literal source paragraph."""
+    token = tokens[idx]
+    resolver = (env.get("directives") or {}).get(token.meta["name"])
+    html = resolver(token.meta["args"], env) if resolver else None
+    if html is None:
+        return f"<p>{escapeHtml(token.content)}</p>\n"
+    return html + "\n"
+
+
 def make_md(*, verbatim: bool = False) -> MarkdownIt:
    """A fully configured parser. The module-level ``md`` (below) is the
    render instance; ``verbatim=True`` builds the segmentation instance for
@@ -539,6 +603,7 @@ def make_md(*, verbatim: bool = False) -> MarkdownIt:
    )
    parser.add_render_rule("image", _image_rule)
    parser.add_render_rule("fence", _fence_rule)
+    parser.add_render_rule("directive", _directive_rule)
    # GFM alerts (`> [!NOTE]` etc.), built into markdown-it-py's blockquote rule.
    parser.options["alerts"] = True
    # Block attrs must be stripped before the typographer curlifies their quotes.
@@ -548,6 +613,8 @@ def make_md(*, verbatim: bool = False) -> MarkdownIt:
    parser.core.ruler.push("tag_task_checkboxes", _tag_task_checkboxes)
    parser.core.ruler.push("shorten_autolinks", _shorten_autolinks)
    parser.core.ruler.push("heading_ids", _heading_ids)
+    if not verbatim:
+        parser.core.ruler.push("directives", _directives)
    return parser


@@ -661,6 +728,7 @@ def render(
    modified: datetime | None = None,
    title: str | None = None,
    anchors_from: tuple[str, str] | None = None,
+    directives: dict[str, Callable[[str, dict], str | None]] | None = None,
 ) -> Rendered:
    """Render Markdown text to the article body's HTML and layout flags.

@@ -682,11 +750,19 @@ def render(
    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
+    (needs ``created``/``modified``). Block directives in general — a lone
+    ``{name}`` or ``{name: args}`` line — are expanded by the resolvers
+    passed as ``directives`` (name → (args, env) → HTML or None), with
+    ``dates`` built in when ``created`` is given; unresolved tags render as
+    the literal source (e.g. in the editor preview of a not-yet-created
+    page).
+    Position is the author's choice — the dateline typically goes
    right after the article's h1.
    """
-    env = {"page_path": page_path, "line_offset": 0}
+    directives = dict(directives or {})
+    if created is not None:
+        directives.setdefault("dates", lambda _args, _env: _dateline(created, modified))
+    env = {"page_path": page_path, "line_offset": 0, "directives": directives}
    if anchors_from is not None:
        env["anchor_ids"] = anchor_ids(*anchors_from)
    if title and not has_h1(text):
@@ -732,8 +808,6 @@ def render(
            html = marked
        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 Rendered(html, total > MULTICOL_TEXT)


@@ -152,7 +152,8 @@ async def show_page(request: Request, path: str) -> Response:
    if node is not None and node.published and node.chunks is not None:
        # Language selection (docs/localization.md): ?lang= wins when a
        # translation exists, else header logic. Analytics keep the raw
-        # Accept-Language header regardless of the selection.
+        # Accept-Language header regardless of the selection, and record
+        # the resolved language as the GET's rendered language.
        query_lang = request.query_params.get("lang")
        lang = i18n.select_language(
            query_lang,
@@ -175,7 +176,7 @@ async def show_page(request: Request, path: str) -> Response:
        if request.headers.get("if-none-match") == etag:
            return Response(status_code=304)
        if _is_trackable_path(path):
-            _record_get(request)
+            _record_get(request, lang=lang)
        return _html_response(
            request,
            "page",
@@ -205,7 +206,7 @@ async def show_page(request: Request, path: str) -> Response:
        )
        link_lang = i18n.base_tag(query_lang or "")
        if _is_trackable_path(path):
-            _record_get(request, status=404)
+            _record_get(request, status=404, lang=lang)
        return _html_response(
            request,
            "category",
@@ -22,11 +22,11 @@ from pathlib import Path
 import blake3
 from fastapi import HTTPException, Request
 from fastapi.responses import Response
+from fastapi_vue import env
 from kanta import Kanta
 from zstandard import ZstdCompressor

 from pagerite import analytics, i18n, seed, translate, views
-from pagerite.__main__ import DEVMODE
 from pagerite.chunks import store_chunks
 from pagerite.config import load
 from pagerite.data import (
@@ -56,6 +56,10 @@ DB_PATH = os.getenv("PAGERITE_DB", str(SITE_DIR / "content.kantadb"))

 # Visit analytics go to their own JSON file, not the kanta database.
 ANALYTICS_PATH = Path(os.getenv("PAGERITE_ANALYTICS", str(SITE_DIR / "analytics.json")))
+# The per-hostname data directory may not exist yet on first run; kanta
+# creates the database file but not its parent directory.
+Path(DB_PATH).parent.mkdir(parents=True, exist_ok=True)
+ANALYTICS_PATH.parent.mkdir(parents=True, exist_ok=True)
 analytics_store = analytics.Store(ANALYTICS_PATH)

 # Content-addressed file store (uploads, seed assets, fetched favicons):
@@ -226,7 +230,7 @@ def _html_response(
    # Absolute social/canonical URLs use the site's public origin; on
    # localhost (varying ports) fall back to the request's own base URL.
    base_url = SITE_URL or str(request.base_url).rstrip("/")
-    if DEVMODE:
+    if env.dev:
        identity = _render_html(kind, path, base_url, lang, link_lang).encode()
        body = _zstd.compress(identity) if zstd else identity
    else:
@@ -28,17 +28,13 @@ from fastapi import APIRouter, Request, WebSocket, WebSocketDisconnect
 from fastapi.responses import Response
 from uarite import uaparse

-from pagerite import analytics
+from pagerite import analytics, i18n
 from pagerite.data import resolve
 from pagerite.files import _hash_name, file_store
 from pagerite.state import SITE_URL, _html_response, analytics_store, data

 logger = logging.getLogger(__name__)

-# httpx logs every request at INFO (e.g. the favicon fetches below); our own
-# one-line summary in _schedule_favicon_fetch replaces that noise.
-logging.getLogger("httpx").setLevel(logging.WARNING)
-
 router = APIRouter()

 # Live WebSocket clients for the analytics stream.
@@ -334,7 +330,7 @@ async def _broadcast_analytics() -> None:
    """Send the current analytics snapshot to every connected WS client."""
    if not _analytics_ws_clients:
        return
-    payload = analytics_store.display_json(_in_menu)
+    payload = _display_json()
    closed = set()
    for ws in _analytics_ws_clients:
        try:
@@ -370,12 +366,29 @@ def _in_menu(path: str) -> bool:
    return resolve(data.menu, path.strip("/")) is not None


-def _record_get(request: Request, *, status: int = 200) -> None:
+def _display_json() -> str:
+    """The current analytics snapshot as JSON for the admin stream.
+
+    Adds the site's language context: ``multilingual`` (translation
+    languages configured) lets the viewer suppress language UI on
+    single-language sites, ``primary_lang`` (the front page's) lets it skip
+    the primary-language default case.
+    """
+    return analytics_store.display_json(
+        _in_menu,
+        multilingual=bool(data.translate_langs),
+        primary_lang=i18n.primary_lang(data.menu, ""),
+    )
+
+
+def _record_get(request: Request, *, status: int = 200, lang: str = "") -> None:
    """Record the document GET as one raw access-log line in analytics.

    Nothing is classified here — the true HTTP status, the full request path
-    (query included), an external referer origin and the preload flag are
-    stored, and visitor/crawler/abuse classification happens at display time
+    (query included), an external referer origin, the preload flag and the
+    rendered content language (``lang``, "" for non-localized responses such
+    as 404 probes and reserved paths) are stored, and
+    visitor/crawler/abuse classification happens at display time
    (see analytics.Store.display).  Idle-time preloads from pagerite.js
    (``x-pagerite-preload`` header) are recorded with ``pre=True``: never
    counted, but a navigation later served from the in-memory page cache is
@@ -403,6 +416,7 @@ def _record_get(request: Request, *, status: int = 200) -> None:
        referer=referer,
        accept_language=request.headers.get("accept-language", ""),
        pre=bool(request.headers.get("x-pagerite-preload")),
+        lang=lang,
    )
    if client_hash is not None:
        _schedule_client_enrichment([client_hash])
@@ -462,6 +476,7 @@ async def activity_ws(ws: WebSocket) -> None:
                accept_language,
                hide=msg.hide,
                read=msg.read,
+                lang=msg.lang,
            )
            if new_client is not None:
                _schedule_client_enrichment([new_client])
@@ -478,7 +493,7 @@ async def analytics_websocket(ws: WebSocket) -> None:
    endpoint. Powers the analytics viewer rendered at /_a.
    """
    await ws.accept()
-    await ws.send_text(analytics_store.display_json(_in_menu))
+    await ws.send_text(_display_json())
    _analytics_ws_clients.add(ws)
    try:
        while True:
@@ -21,6 +21,7 @@ import json
 import os
 import re

+from fastapi_vue import env
 from html5tagger import HTML, Document, E, Template
 from platformdirs import site_data_dir, user_data_path

@@ -337,7 +338,7 @@ def _layout(
 ) -> Template:
    """Page layout template with standard assets and ES-module scripts.

-    In dev (PAGERITE_VITE_URL set) assets are linked from the Vite dev
+    In dev (Vite dev-server 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
@@ -394,7 +395,7 @@ def _layout(
    # 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")
+    vite_url = env.vite_url
    editor_scripts, editor_css = _editor_assets()
    langselect_scripts, langselect_css = _langselect_assets()
    config = {
@@ -790,7 +791,10 @@ def page_content(
    """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. With a translation, its Markdown goes
+    after the markdown content — unless the content has a ``{cards}`` tag,
+    which places card rows itself (bare: the children; with paths:
+    those pages, ``path/*`` their children, ``path/**`` all descendants),
+    one row per tag. With a translation, its Markdown goes
    through the same render pipeline; missing pieces (markdown=None, absent
    title entries) fall back to the original. ``lang`` feeds the cards'
    per-target localization.
@@ -812,8 +816,24 @@ def page_content(
        )
    # The title is injected into the markdown (as # title when it has no
    # h1 of its own), so title and content render as one article.
+    # A {cards} tag places the card rows itself (possibly several);
+    # without one the children are appended after the content as before.
+    has_cards_tag = _CARDS_TAG_RE.search(content) is not None
+    directives = None
+    if has_cards_tag:
+        directives = {
+            "cards": lambda args, _env: _cards_tag(
+                menu, data, node, path, args, translation, link_lang, lang
+            )
+        }
    rendered = render(
-        content, path, node.created, node.modified, title=title, anchors_from=anchors_from
+        content,
+        path,
+        node.created,
+        node.modified,
+        title=title,
+        anchors_from=anchors_from,
+        directives=directives,
    )
    # Long articles get .multicol: the article column cap lifts (see the
    # #content grid in pagerite.css) and the .cols segments lay out in at
@@ -822,10 +842,25 @@ def page_content(
    doc = E.article(class_="multicol") if rendered.multicol else E.article
    with doc:
        doc(HTML(rendered.html))
-        _cards(doc, menu, data, node, path, translation, link_lang, lang)
+        if not has_cards_tag:
+            _cards(doc, menu, data, node, path, translation, link_lang, lang)
    return HTML(str(doc))


+def _represent(node: Node, path: str) -> tuple[str, Node] | None:
+    """The (path, node) a card for this menu item points at: the item
+    itself when it has a page, else its first published leaf page,
+    recursively — the same logic as nav links (first_leaf)."""
+    if node.chunks:
+        return path, node
+    for slug, child in sorted_nodes(node.children):
+        if child.published:
+            cpath = f"{path}/{slug}" if path else slug
+            if r := _represent(child, cpath):
+                return r
+    return None
+
+
 def _cards(
    doc,
    menu: dict[str, Node],
@@ -836,38 +871,107 @@ def _cards(
    link_lang: str = "",
    lang: str = "",
 ) -> None:
-    """Card stacks of the node's published children (nothing when childless).
+    """Cards 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
+    One card per direct child, all in a single full-width row (the .wide
+    breakout): the cards grow to fill the page and shrink rather than
+    wrap. A child without a page of its own is represented by its first
+    leaf page (_represent, the nav-link logic). 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]
+    items = [
+        r
+        for s, c in sorted_nodes(node.children)
+        if c.published
+        for r in [_represent(c, f"{path}/{s}" if path else s)]
+        if r
+    ]
    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, data, enode, epath, translation, link_lang, lang)
+        for cpath, cnode in items:
+            _card(doc, data, cnode, cpath, translation, link_lang, lang)
+
+
+#: A lone {cards} or {cards: ...} line in the markdown: card rows placed
+#: by the author. Any such tag suppresses the automatic end-of-page cards.
+_CARDS_TAG_RE = re.compile(r"^\{cards(?::[^{}\n]*)?\}[ \t]*$", re.M)
+
+
+def _cards_tag(
+    menu: dict[str, Node],
+    data: Data,
+    node: Node,
+    path: str,
+    args: str,
+    translation: Translation | None = None,
+    link_lang: str = "",
+    lang: str = "",
+) -> str:
+    """Expand a ``{cards}`` directive to a card row (the same markup as
+    _cards, so author-placed cards look like category cards).
+
+    A bare ``{cards}`` lists the page's own published children — what
+    page_content appends when the tag is absent — or, on the front page,
+    the other top-level pages (the front page is a top-level item itself,
+    not the parent of the others). Arguments are space-separated page
+    paths: a plain path renders that page alone (never its children),
+    ``path/*`` its published children and ``path/**`` all published
+    descendant pages. One card per item; a page-less item is represented
+    by its first leaf page (_represent). Unresolvable paths are skipped;
+    a tag that ends up with nothing renders as nothing.
+    """
+    items: list[tuple[str, Node]] = []
+    specs = args.split()
+
+    def children(base: str, parent: Node):
+        for s, c in sorted_nodes(parent.children):
+            if c.published:
+                if r := _represent(c, f"{base}/{s}" if base else s):
+                    items.append(r)
+
+    if not specs:
+        if path:
+            children(path, node)
+        else:
+            for s, c in sorted_nodes(menu):
+                if c.published and s:
+                    if r := _represent(c, s):
+                        items.append(r)
+    else:
+        for spec in specs:
+            spec = spec.strip("/")
+            if spec.endswith("/**"):
+                base = spec[:-3].rstrip("/")
+                if chain := resolve(menu, base):
+                    for s, c in sorted_nodes(chain[-1].children):
+                        if c.published:
+                            items.extend(_walk(c, f"{base}/{s}" if base else s))
+            elif spec.endswith("/*"):
+                base = spec[:-2].rstrip("/")
+                if chain := resolve(menu, base):
+                    children(base, chain[-1])
+            elif chain := resolve(menu, spec):
+                if r := _represent(chain[-1], spec):
+                    items.append(r)
+    if not items:
+        return ""
+    doc = E.div(class_="cards wide")
+    with doc:
+        for cpath, cnode in items:
+            _card(doc, data, cnode, cpath, translation, link_lang, lang)
+    return str(doc)


 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)."""
+    node itself first when it has content, then its descendants
+    (content-less nodes contribute only their subtree)."""
    if node.chunks:
        yield path, node
    for slug, child in sorted_nodes(node.children):
@@ -884,7 +988,7 @@ def _card(
    link_lang: str = "",
    lang: str = "",
 ) -> None:
-    """One card in a stack: cover + title, plus the description when the
+    """One card: cover + title, plus the description when the
    page has no image (its card shows a gradient cover instead).

    The card text localizes per target article where that page is
@@ -897,7 +1001,15 @@ def _card(
        md = node_markdown(data, node) or ""
        if lang and lang in node.langs:
            md = i18n.hybrid_markdown(data, node, path, lang)
-        html = render(md, path, node.created, node.modified).html
+        html = render(
+            md,
+            path,
+            node.created,
+            node.modified,
+            # Card heuristics only mine the prose: nested {cards} rows
+            # would just be noise in the description extraction.
+            directives={"cards": lambda _args, _env: ""},
+        ).html
        image, _ = _media(html)
        if not image:
            description = _description(html, 150)
@@ -1226,7 +1338,7 @@ def _page_assets() -> tuple[list[str], list[str]]:
    by the entry (e.g. overlayscrollbars.css) is extracted by Vite and must
    be linked separately.
    """
-    vite_url = os.environ.get("PAGERITE_VITE_URL")
+    vite_url = env.vite_url
    if vite_url:
        return [f"{vite_url}/src/pagerite.js"], []
    if "page" not in _asset_cache:
@@ -1244,7 +1356,7 @@ def _editor_assets() -> tuple[list[str], str | None]:
    The shared CSS is already linked on the page, so the pen only needs the
    editor-specific stylesheet.
    """
-    vite_url = os.environ.get("PAGERITE_VITE_URL")
+    vite_url = env.vite_url
    if vite_url:
        return [f"{vite_url}/@vite/client", f"{vite_url}/src/main.js"], None
    if "editor" not in _asset_cache:
@@ -1256,7 +1368,7 @@ def _editor_assets() -> tuple[list[str], str | None]:

 def _analytics_assets() -> tuple[list[str], list[str]]:
    """Script and stylesheet URLs for the analytics page entry."""
-    vite_url = os.environ.get("PAGERITE_VITE_URL")
+    vite_url = env.vite_url
    if vite_url:
        return [f"{vite_url}/src/analytics-main.js"], []
    if "analytics" not in _asset_cache:
@@ -1270,7 +1382,7 @@ def _analytics_assets() -> tuple[list[str], list[str]]:

 def _langselect_assets() -> tuple[list[str], list[str]]:
    """Script and stylesheet URLs for the on-demand public language selector."""
-    vite_url = os.environ.get("PAGERITE_VITE_URL")
+    vite_url = env.vite_url
    if vite_url:
        return [f"{vite_url}/src/langselect-main.js"], []
    if "langselect" not in _asset_cache:
@@ -17,15 +17,15 @@ readme = "README.md"
 requires-python = ">=3.14"
 dependencies = [
    "blake3>=1.0.9",
-    "fastapi-vue~=1.4.2",
+    "fastapi-vue~=1.7.2",
    "fastapi[standard]>=0.141.1",
    "html5tagger>=2.0.0",
    "httpx>=0.28.1",
-    "kanta>=0.9.0",
+    "kanta>=0.9.2",
    "markdown-it-py>=4.2.0",
    "maxminddb>=3.1.1",
    "mdit-py-plugins>=0.6.1",
-    "mediapreview[standard]>=0.2.3",
+    "mediapreview[standard]>=0.2.5",
    "platformdirs>=4.11.5",
    "pygments>=2.20.0",
    "python-slugify>=8.0.4",
@@ -1,11 +1,12 @@
 #!/usr/bin/env -S uv run
+# auto-upgrade@fastapi-vue-setup - remove this if you modify this file
 """Run Vite development server for Vue app and FastAPI backend with auto-reload."""

 import argparse
 import asyncio
 import os
+import subprocess
 import sys
-from contextlib import suppress
 from pathlib import Path

 import tracerite
@@ -47,11 +48,11 @@ async def run_devserver(
    os.environ["PAGERITE_DEV"] = "1"

    async with ProcessGroup() as pg:
+        pg.create_task(check_ports_free(viteurl, backurl))
        npm_i = await pg.spawn(*npm_install, cwd=front)
-        await check_ports_free(viteurl, backurl)
-        await pg.spawn(*pagerite, *(extra_args or []))
+        await pg.spawn(*pagerite, *(extra_args or []), vital=True)
        await pg.wait(npm_i, ready(backurl, path=HEALTH))
-        await pg.spawn(*vite, cwd=front)
+        await pg.spawn(*vite, cwd=front, vital=True)


 def main() -> None:
@@ -74,8 +75,12 @@ def main() -> None:
        help=f"FastAPI (default: localhost:{DEFAULT_DEV_PORT})",
    )
    args, extra_args = parser.parse_known_args()
-    with suppress(KeyboardInterrupt):
+    try:
        asyncio.run(run_devserver(args.listen, args.backend, extra_args))
+    except* KeyboardInterrupt:
+        pass  # user stopped the devserver: normal exit
+    except* subprocess.SubprocessError, RuntimeError:
+        raise SystemExit(1) from None  # logged in devutil already; exit 1


 HELP_EPILOG = """
@@ -11,20 +11,27 @@ from pathlib import Path
 MIN_NODE_VERSION = 20


-class _PrefixFormatter(logging.Formatter):
-    """Formatter that adds prefix based on log level."""
+class _Formatter(logging.Formatter):
+    """Prefix formatter, intentionally different from fastapi_vue.logging.
+
+    INFO and below pass through unprefixed so messages can use their own
+    markings (>>>, ###); WARNING and above get an emoji prefix.
+    """

    def format(self, record: logging.LogRecord) -> str:
+        if record.levelno >= logging.ERROR:
+            return f"🛑 {record.getMessage()}"
        if record.levelno >= logging.WARNING:
-            return f"⚠️  {record.getMessage()}"
+            return f"💣 {record.getMessage()}"
        return record.getMessage()


 _handler = logging.StreamHandler()
-_handler.setFormatter(_PrefixFormatter())
+_handler.setFormatter(_Formatter())
 logger = logging.getLogger("fastapi-vue")
 logger.addHandler(_handler)
 logger.setLevel(logging.INFO)
+logger.propagate = False  # own handler; do not double-print via a configured root


 def _check_node_version(node_path: str) -> None:
@@ -1,108 +1,87 @@
 # ruff: noqa: INP001
 """Utilities meant for devserver script, used only in source repository with dev deps."""

+from __future__ import annotations
+
 import asyncio
-import subprocess
 import sys
+from asyncio.subprocess import Process
 from contextlib import suppress
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Self
+from subprocess import CalledProcessError
+from typing import TYPE_CHECKING, Any
 from urllib.parse import urlsplit

 from buildutil import find_dev_tool, find_install_tool, logger
 from fastapi_vue.hostutil import parse_endpoint

 if TYPE_CHECKING:
-    from collections.abc import Coroutine
+    from collections.abc import Awaitable


-class ProcessGroup:
-    """Manage async subprocesses with automatic cleanup, like TaskGroup for processes."""
+class ProcessGroup(asyncio.TaskGroup):
+    """TaskGroup with structured ownership of async subprocesses."""

-    def __init__(self) -> None:
-        """Initialize empty process tracking."""
-        self._procs: list[asyncio.subprocess.Process] = []
-        self._cmds: dict[int, str] = {}  # pid -> command name
+    def __init__(self, *, terminate_timeout: float = 10) -> None:
+        """Set the grace period before terminate() escalates to kill()."""
+        super().__init__()
+        self._terminate_timeout = terminate_timeout
+        self._cmds: dict[Process, tuple[str, ...]] = {}

    async def spawn(
-        self,
-        *cmd: str,
-        cwd: str | None = None,
-    ) -> asyncio.subprocess.Process:
-        """Spawn a subprocess and track it."""
-        cmd_name = Path(cmd[0]).stem
-        logger.info(">>> %s", " ".join([cmd_name, *cmd[1:]]))
-        proc = await asyncio.create_subprocess_exec(*cmd, cwd=cwd)
-        self._procs.append(proc)
-        self._cmds[proc.pid] = cmd_name
-        return proc
+        self, *cmd: str, cwd: str | None = None, vital: bool = False
+    ) -> Process:
+        """Spawn and own a subprocess. If a vital process exits, the group cancels."""

-    async def wait(
-        self,
-        *waitables: "asyncio.subprocess.Process | Coroutine[Any, Any, Any]",
-    ) -> None:
-        """Wait for processes/coroutines to complete, raise SystemExit on failure."""
+        async def run() -> None:
+            name = Path(cmd[0]).stem
+            logger.info(">>> %s", " ".join([name, *cmd[1:]]))
+            try:
+                proc = await asyncio.create_subprocess_exec(*cmd, cwd=cwd)
+                self._cmds[proc] = cmd
+                started.set_result(proc)
+            except Exception as e:  # noqa: BLE001
+                started.set_exception(e)
+                return

-        async def wait_proc(proc: asyncio.subprocess.Process) -> None:
-            returncode = await proc.wait()
-            if returncode != 0:
-                cmd_name = self._cmds.get(proc.pid, "unknown")
-                raise subprocess.CalledProcessError(returncode, cmd_name)
-
-        tasks = [
-            wait_proc(w) if isinstance(w, asyncio.subprocess.Process) else w
-            for w in waitables
-        ]
-        try:
-            await asyncio.gather(*tasks)
-        except subprocess.CalledProcessError as e:
-            logger.warning("%s failed with exit status %d", e.cmd, e.returncode)
-            raise SystemExit(1) from None
-
-    async def __aenter__(self) -> Self:
-        """Enter the async context manager."""
-        return self
-
-    async def __aexit__(self, exc_type: type[BaseException] | None, *_: object) -> None:
-        """Wait for one process to exit, terminate others, then wait for all."""
-        await self._cleanup(immediate=exc_type is not None)
-
-    async def _cleanup(self, *, immediate: bool = False) -> None:
-        running = [p for p in self._procs if p.returncode is None]
-        if not running:
-            return
-
-        if not immediate:
-            # Wait for any one process to exit
-            with suppress(asyncio.CancelledError):
-                await asyncio.wait(
-                    [asyncio.create_task(p.wait()) for p in running],
-                    return_when=asyncio.FIRST_COMPLETED,
-                )
-
-        # Terminate remaining processes
-        for p in self._procs:
-            if p.returncode is None:
+            try:
+                returncode = await proc.wait()
+            finally:
                with suppress(ProcessLookupError):
-                    p.terminate()
-
-        # Wait for all to finish (with overall timeout), shielded from cancellation
-        still_running = [p for p in self._procs if p.returncode is None]
-        if still_running:
-            with suppress(asyncio.CancelledError):
+                    proc.terminate()
                try:
-                    await asyncio.shield(
-                        asyncio.wait_for(
-                            asyncio.gather(*[p.wait() for p in still_running]),
-                            timeout=10,
-                        ),
-                    )
+                    await asyncio.wait_for(proc.wait(), self._terminate_timeout)
                except TimeoutError:
-                    for p in self._procs:
-                        if p.returncode is None:
-                            with suppress(ProcessLookupError):
-                                p.kill()
-                            await p.wait()
+                    with suppress(ProcessLookupError):
+                        proc.kill()
+                    await proc.wait()
+
+            if vital:
+                logger.warning("Vital process %s exited", name)
+                raise CalledProcessError(returncode, cmd)
+
+        started = asyncio.get_running_loop().create_future()
+        self.create_task(run())
+        return await asyncio.shield(started)
+
+    async def wait(self, *waitables: Process | Awaitable) -> tuple[Any, ...]:
+        """Wait concurrently and return results in argument order."""
+
+        async def task(w: Process | Awaitable) -> Any:  # noqa: ANN401
+            if not isinstance(w, Process):
+                return await w
+            if retcode := await w.wait():
+                cmd = self._cmds[w]
+                logger.warning(
+                    "Process %s exited with status %d", Path(cmd[0]).stem, retcode
+                )
+                raise CalledProcessError(retcode, cmd)
+            return retcode
+
+        async with asyncio.TaskGroup() as group:
+            tasks = [group.create_task(task(w)) for w in waitables]
+
+        return tuple(task.result() for task in tasks)


 async def http_get_server(url: str, timeout: float) -> str | None:  # noqa: ASYNC109
@@ -128,42 +107,43 @@ async def http_get_server(url: str, timeout: float) -> str | None:  # noqa: ASYN
                writer.close()
    except OSError, EOFError, ValueError, TimeoutError:
        return None
-    for line in data.decode("latin-1").split("\r\n"):
+    for line in data.decode(errors="replace").split("\r\n"):
        if line.lower().startswith("server:"):
-            return line.split(":", 1)[1].strip()
+            return line[7:].strip()
    return ""


 async def check_ports_free(*urls: str) -> None:
-    """Verify URLs are not responding (ports are free). Raise SystemExit if any respond."""
+    """Verify URLs are not responding (ports are free).

-    async def check(url: str) -> None:
-        server = await http_get_server(url, timeout=0.1)
+    Meant to run as a task inside a TaskGroup. Logs the conflict and raises
+    RuntimeError (handled like a failed process) if any URL responds.
+    """
+    servers = await asyncio.gather(*(http_get_server(url, timeout=0.1) for url in urls))
+    for url, server in zip(urls, servers, strict=True):
        if server is not None:
-            logger.warning(
+            logger.error(
                "Conflicting %s already running at %s", server or "server", url
            )
-            raise SystemExit(1)
-
-    await asyncio.gather(*[check(url) for url in urls])
+            raise RuntimeError(url)


 async def ready(url: str, path: str = "", max_attempts: int = 50) -> None:
    """Wait for the server to be ready by polling an endpoint.

    Use empty path to disable the check and make this return immediately.
-    Raises SystemExit(1) if server doesn't start in time.
+    Logs, then raises RuntimeError if the server doesn't start in time.
    """
    if not path:
        return

    for attempt in range(max_attempts):
        if await http_get_server(f"{url}{path}", timeout=1.0) is not None:
-            logger.info("✓ Backend ready!")
+            logger.info("🟢 Backend ready!")
            return
        if attempt == max_attempts - 1:
-            logger.warning("Backend didn't start in time")
-            raise SystemExit(1)
+            logger.error("Backend at %s didn't start in time", url)
+            raise RuntimeError(url)
        await asyncio.sleep(0.1)
Author	SHA1	Message	Date
LeoVasanko	4bccf6855e	Auth via paskia-js: profile() dialog, apiFetch/apiJson in admin components - Banner-corner auth link is now a button opening paskia-js's profile() dialog (handles login too); auth re-probed when the dialog closes. - Editor/analytics components call /_api via apiFetch/apiJson: an expired session opens the login dialog and the request retries. - pagerite.js: task-checkbox toggle uses apiJson (explicit edit attempt, reverts on any failure incl. cancelled login); auth probes use fetchJson (never a dialog); page-cache/navigation stay on plain fetch. - Add the paskia npm dependency; document the convention.	2026-09-18 20:14:52 +00:00
LeoVasanko	e0c1b37c0b	{cards}: server-rendered previews, immediate-children semantics, /* globs Preview: the editor render handler now returns the complete article HTML ({cards} tags expanded, children's cards appended when the page has no tag) and the frontend swaps article.innerHTML wholesale — the old detach/keep/re-append hack for .cards (which duplicated stacks) is gone. Semantics: one card per item, no subtree flattening (stacks removed). Bare {cards} lists immediate children (front page: the other top-level items); a page-less item is represented by its first leaf page, the nav-link logic. {cards: path} renders that page alone, path/* its direct children, path/** all published descendants.	2026-09-18 19:36:44 +00:00
LeoVasanko	b004fcd644	Upgrade fastapi-vue-setup 1.7.2.	2026-09-18 19:14:14 +00:00
LeoVasanko	0c7fe15635	Transition map: stable node colors — white external pills, always-black labels	2026-09-18 19:11:27 +00:00
LeoVasanko	2be3b32586	Referer badge: translucent theme-aware pill, compact UTM summary with click-to-copy	2026-09-18 18:52:35 +00:00
LeoVasanko	867132f26b	Fix language-switch tracking ping; serve first matching Accept-Language The language-switch trail ping read <html lang> before the view transition applied the swap, so it reported the previous language (and read pings never update trail-item languages server-side): multi- language visits recorded as single-language trails and the analytics flag combining had nothing to show. The switch ping now passes the picked tag explicitly. Language negotiation no longer prefers the article's original language anywhere in the Accept-Language list — nearly every browser lists English as a fallback, so translations were almost never served. The first servable header language now wins, the original counting only in its natural position.	2026-09-18 14:28:29 +00:00
LeoVasanko	4522b8fa40	Analytics: stronger chart fills, line specimen for the day legend Area and bar fills at 0.6 opacity (were a near-invisible 0.15); the day view's 'Last 24 hours' legend entry uses the same full-opacity accent line as the other entries instead of a translucent bar swatch.	2026-09-18 13:54:33 +00:00
LeoVasanko	2d221f6204	Analytics: seasonal 'typical week' history curve on day and week views Port the seasonal.py demo algorithm to JS (analytics/seasonal.js): the smoothed 5-minute history is folded onto a weekly grid with exponential age decay (7-day half-life for the time-of-day pattern, 42 days for per-weekday deviations, shrunk by effective weeks of data), capped at 180 days of history where the weights become negligible. Week view: the fading past-week overlays are replaced by the full Monday-first 'Typical week' estimate. Day view gains the same estimate cut to the rolling 24h window as a smooth muted 'Typical <weekday>' curve behind the bars. Longer ranges are unchanged.	2026-09-18 13:45:51 +00:00
LeoVasanko	626dc1df8f	Block directives: lone {name}/{name: args} lines expanded via render(directives=...); {dates} rebuilt on it, new {cards} / {cards: path path/* ...} for author-placed card stacks (suppresses the auto end-of-page cards)	2026-09-18 12:38:21 +00:00
LeoVasanko	02396f4482	Update fastapi-vue-setup 1.7.1, make use of its logging facilities. Mediapreview and kanta bumped to do so too.	2026-09-18 03:58:37 +00:00
LeoVasanko	7724290921	analytics viewer: referer + UTM as one neutral-grey badge Favicon flush to the badge's left edge, then the referer host and UTM summary in one link, with a single newline-formatted tooltip (origin, then each utm_* pair). Fixed --badge-bg/--badge-text/--badge-muted palette (defined in pagerite.css, deliberately unthemed) so transparent favicons stay legible in both light and dark themes; own-article trail links remain plain, lifting referer info visually apart from them. Replaces the outlined utm-tag pill.	2026-09-15 05:20:57 +00:00
LeoVasanko	3b1804b093	analytics: record and show the rendered content language of page views GETs store the resolved page language, activity pings carry <html lang> (including a new ping on in-place language switches, which also keeps the switch's GET out of crawler classification), and trail items/crawler hits surface it. The viewer shows flags discreetly: nothing on single-language sites or primary-language-only rows, one leading flag for uniform visits, transition flags on mixed trails, a flag row per crawler.	2026-09-15 05:20:57 +00:00
LeoVasanko	4cd8dbfc73	Update fastapi-vue-setup 1.6.1	2026-09-15 05:20:57 +00:00
LeoVasanko	dc4bdf6efc	Avoid deprecation warning from pyvips; remove unnecessary logging config.	2026-09-15 05:20:57 +00:00
LeoVasanko	a458bded09	Create the per-hostname data directory on first run	2026-09-15 05:20:57 +00:00