Localization (#1)

Implement comprehensive content localization, admin panels for editing each language, AI translation interface with automatic updates when base language version is changed.
- SEO tags for all language URLs
- Uses accept-language by default, ?lang=en overrides temporarily
- User edits patched on top of translations
- RTL language supportReviewed-on: #1

AGENTS.md

@@ -12,6 +12,10 @@ Pagerite is a CMS. See `docs` for the full design and implementation details. Ke
 - `pagerite/` — Python backend package (hatchling build target).
   - `app.py` — FastAPI app and route registration.
   - `data.py` — msgspec Structs for the kanta database.
+  - `chunks.py` — block-level Markdown chunking and content-hash keys for the chunk stores (docs/migrate.md).
+  - `i18n.py` — language selection, translation assembly (chunks + patches) and translated-edit recording (user patches, per-language title overrides, refresh).
+  - `translate.py` — translator service protocol (msgspec structs), the connected-client `Dispatcher` (job pipeline, result validation) and pending/store core for the `/_translate/{key}` WebSocket (docs/localization.md); app.py only registers the route.
+  - `segments.py` — the translation round trip: fragments split into pure-prose wire segments (via markdown.make_md's verbatim parser; link- and formatting-carrying blocks stay whole, link/formatted texts inline, Markdown stripped) and translations spliced back by source offset, link/formatting markdown re-inserted at weight-mapped positions (docs/localization.md).
   - `migrations.py` — kanta migrations (`migrate_vN`); ALL schema/storage upgrades live here (raw state dict before struct decoding), never in the app lifespan: v1 moves legacy in-db file blobs to the on-disk store and rebuilds the legacy flat `pages` as the menu tree, v2 rewrites `/_f/{hash}.ext` image links to the extension-less form, backfills AVIF/WebP/JPEG derivatives on disk and drops the obsolete `version` field.
   - `markdown.py` — markdown-it-py renderer.
   - `views.py` — shared page layout and rendering; theme/user-font resolution across `THEME_DIRS` / `FONT_DIRS` (cwd, site, platform data roots, then built-in `pagerite/themes/`, see `docs/themes-and-assets.md`).
@@ -21,8 +25,11 @@ Pagerite is a CMS. See `docs` for the full design and implementation details. Ke
   - `main.js` — Vue editor app entry.
   - `analytics-main.js` — analytics page entry (mounts `AnalyticsView` at `/_a`).
   - `pagerite.js` — public page entry.
+  - `editorLang.js` + `LangSelect.vue` — the editor shell's shared language selection and its selector component (page + structure tabs; drives the page preview while the panel is open, via `swapdoc.setLangOverride`).
+  - `reconnect.js` — shared WebSocket pacing for all sockets (staggered connect slots, stuck-CONNECTING watchdog, exponential backoff): bursts and rapid retries trip the browser's WebSocket throttling.
   - `assets/` — base CSS, Pygments styles, fonts.
 - `scripts/devserver.py` — dev server with auto reload (the user mostly uses this; avoid running the server yourself, ask the user to test).
+- `scripts/translator.py` — Seed-X translator service client for the `/_translate/{key}` socket (reference client, runs in its own uv env via PEP 723); stays connected full time, unloads the model after 60 s idle and reloads on the next job.
 
 Server run by CLI entry point `uv run pagerite` (no auto reloads, build needed). Dev mode is `scripts/devserver.py` (auto reloads, no build needed).
 
@@ -53,5 +60,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` from the build. 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.
+- 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).
 - Update the relevant MarkDown files when architecture, tooling, or conventions change.

docs/editing.md

@@ -4,17 +4,22 @@ The Vue editor is a single tabbed `EditorShell.vue` mounted in a host div create
 
 ## Tabs
 
-The shell hosts four kept-alive tabs (ordered site-wide first — site, structure — then, after a visual break, the per-page tabs — article, banner):
+The shell hosts five kept-alive tabs (ordered site-wide first — site, structure, localization — then, after a visual break, the per-page tabs — article, banner):
 
 - `PageEditor.vue` — CodeMirror + server-rendered preview over WebSocket `/_api/ws/editor`, previewing into the visible article; editor and article scrolls are linked piecewise-linearly, keyed on the section anchors' `data-line` (markdown source line the backend stamps on top-level anchored h1/h2s): the page follows the cursor (fractional, wrap-aware, scrolling only when the cursor's page position leaves the viewport, with an edge margin), the editor follows page scroll with a progress-based viewport anchor, applied instantly (the window keeps scrolling normally while any editor is open — the panel is fixed to the viewport's left edge, its top tracking the banner's bottom edge until the banner scrolls away — and the panel scrolls internally); anchored h2s carry their own edit pens that open the editor scrolled to that section; a format bar offers Markdown helpers — bold/italic/code/link/table/image upload (always block-level on a fresh blank-separated line of its own — a cursor on a non-empty line, e.g. inside an existing image tag, inserts after that line, never into it; always with an empty `""` caption, cursor inside the quotes), toggling fences (` ``` ` code blocks and `::: aside` containers share the same machinery: clicked inside one they remove it and select the content, otherwise they wrap the selection or the cursor's line, keeping it selected), and `.left`/`.right`/`.wide`/`.margin` placement toggles plus `.small`/`.large`/`.huge` text-size toggles (brace attributes on the block at the cursor, mutually exclusive within each group; on `:::` containers a placement class replaces the container name instead — `::: aside` → `::: margin`), with Ctrl/Cmd-B/I/S bindings — for the hard-to-remember syntax. Edits content and title only, never the path.
 - `BannerEditor.vue` — per-page banner HTML + banner design selector, previewed into `#page-banner`.
 - `SiteEditor.vue` — site brand + optional custom brand HTML with image/video upload + theme selector + page-transition selector + font picker + favicon upload — clicking the preview tile picks a new one — + site-wide custom CSS, CSS injected into `<head id="pagerite-user">`.
-- `StructureEditor.vue` — the vue-draggable structure tree with always-editable title/slug inputs per row.
+- `StructureEditor.vue` — the vue-draggable structure tree with always-editable title/slug inputs per row, plus a per-row flag dropdown setting the page's primary language (`Node.language`, inherited by the subtree).
+- `LocalizationEditor.vue` — the site-wide translation settings: target languages as a flag grid (toggles, grouped in geographic rows; see docs/localization.md), the refresh-all-translations button, and the translator service WebSocket URL(s) to connect `scripts/translator.py` to.
 
 Media uploads everywhere use the image icon buttons (pasting into the editor works too). The article, banner and site-settings pens are shorthands that open the shell on the matching tab; once open, clicking a pen switches tabs (and retargets the editors to the current page) instead of closing/remounting. The close button in the tab bar closes the shell (deliberately NOT Escape — it fired too easily by accident); tabs have no close buttons of their own. Closing only HIDES the shell — the Vue app stays mounted, so page-editor state (unsaved text included) survives until a real page reload; the editor always follows the URL, so fetch-navigating with the shell open (or before re-opening it) retargets it to the new page — unsaved text is stashed per path for the session and restored when returning, cleared on save. Saving there is explicit (Ctrl+S) and refreshes the page regions in place. Admin panels never reload the page.
 
 In-place page re-rendering shared by the banner/site/structure tabs lives in `swapdoc.js` (`runScripts`/`loadPlain`: fetch a page, swap the dynamic regions, replaceState). It also exports `dropPageCache`, which the editor tabs call after any save that can alter the rendered HTML of other pages (theme, headings, structure, banners, site brand/CSS, favicon). Dropping the cache while editing avoids re-fetching every page immediately; the public runtime re-preloads visible links once the editor panel closes.
 
+The page and structure tabs share one language selector: `LangSelect.vue` (small flag + dropdown) v-modeled on the shell-wide selection in `editorLang.js` (`''` = primary). While the panel is open that selection overrides the page's normal language preferences: EditorShell calls `swapdoc.setLangOverride`, which pins every `loadPlain` fetch (`?lang=`, the primary by its own code) and pagerite.js's own fetches/prefetches (`pagerite:session-lang`), until the panel closes and the override clears.
+
+All WebSockets (page/banner editors, analytics view, the pagerite.js activity channel) pace their connections through `reconnect.js`: new sockets are created a staggered slot apart (a page load opens Vite's HMR socket plus several of ours at the same moment, and such bursts — like rapid retries — trip the browser's WebSocket throttling, leaving every socket to the host "pending" for minutes), a watchdog closes sockets stuck CONNECTING so they reschedule instead of hanging forever, and retries follow an exponential backoff with jitter that only a healthy connection resets. While a socket is connecting or waiting to reconnect the panel says so (`ConnNote.vue`), and the CodeMirror editors stay locked until their document arrives (typing before the doc accept would be clobbered by it).
+
 ## Saving behavior
 
 Everything saves immediately as you edit (brand/title/CSS debounced, slug on commit since it renames the path), theme change swaps the stylesheet in place, tree rows navigate in place without transitions when focused, and the front page is a root-only row whose empty slug is editable like any other. Saves that can affect other pages drop the prefetch cache; the cache is rebuilt when the editor panel closes so navigation stays instant.
@@ -25,6 +30,6 @@ Dropping ON the lower part of a row moves the page under that row (the child lis
 
 The shell is dynamic-imported onto the content page by pagerite.js when an edit pen is clicked (the pens are injected by pagerite.js after the session validates; they carry `data-editor-src`/`data-editor-css`/`data-editor-mode`). In dev, modules load from the Vite dev server (`PAGERITE_VITE_URL`), in prod from the hashed build assets resolved via `frontend-build/.vite/manifest.json`.
 
-`vite.config.js` sets `appType: 'mpa'` (no SPA fallback) and builds with `manifest: true`, `assetsDir: '_/assets'` (so the build mirrors the URL space; `frontend/public/favicon.ico` lands at the build root and is served at `/favicon.ico`). JS inputs are `src/main.js` and `src/pagerite.js`, plus `src/assets/pagerite.css` as a separate stylesheet entry; theme, banner-design and transition CSS are NOT built — they live in `pagerite/themes/{name}/` and are served by the backend. There is no `index.html` source (it would shadow `/` and turn missing dev paths into an empty Vue shell). All outputs are ES modules. The build sets `preserveEntrySignatures: 'exports-only'` because main.js is consumed via dynamic `import()` for its `openEditor`/`closeEditor` exports — Vite app builds otherwise strip unused entry exports, leaving dead edit pens. In dev the backend links theme/banner-design stylesheets like in prod (`/_themes/...`); only the base CSS is Vite-injected from JS, and pagerite.js then re-appends the `#pagerite-theme`/`#pagerite-banner`/`#pagerite-transition`/`#pagerite-user` elements to restore the canonical order (base < theme < design < transition < custom CSS). In production all page assets are inlined instead (styles as `<style id="pagerite-…">` in `<head>`, scripts at the end of the body). Theme switches in the site editor swap the `#pagerite-theme` element in place — the link href in dev, the inline style's text (fetched from `/_themes/...`) in prod.
+`vite.config.js` sets `appType: 'mpa'` (no SPA fallback) and builds with `manifest: true`, `assetsDir: '_assets'` (so the build mirrors the URL space; `frontend/public/favicon.ico` lands at the build root and is served at `/favicon.ico`). JS inputs are `src/main.js`, `src/pagerite.js` and `src/analytics-main.js`, plus `src/assets/pagerite.css` as a separate stylesheet entry; theme, banner-design and transition CSS are NOT built — they live in `pagerite/themes/{name}/` and are served by the backend. There is no `index.html` source (it would shadow `/` and turn missing dev paths into an empty Vue shell). All outputs are ES modules. The build sets `preserveEntrySignatures: 'exports-only'` because main.js is consumed via dynamic `import()` for its `openEditor`/`closeEditor` exports — Vite app builds otherwise strip unused entry exports, leaving dead edit pens. In dev the backend links theme/banner-design stylesheets like in prod (`/_themes/...`); only the base CSS is Vite-injected from JS, and pagerite.js then re-appends the `#pagerite-theme`/`#pagerite-banner`/`#pagerite-transition`/`#pagerite-user` elements to restore the canonical order (base < theme < design < transition < custom CSS). In production all page assets are inlined instead (styles as `<style id="pagerite-…">` in `<head>`, scripts at the end of the body). Theme switches in the site editor swap the `#pagerite-theme` element in place — the link href in dev, the inline style's text (fetched from `/_themes/...`) in prod.
 
 `vite-plugin-fastapi.js` has an auto-upgrade marker — edit `vite.config.js`, not the plugin.

docs/localization.md

@@ -0,0 +1,474 @@
+# Localization
+
+Pages are served in the visitor's language based on a `?lang=` query
+parameter or the `Accept-Language` header.
+
+- **Phase 1 (implemented):** negotiation, URL scheme, caching, rendering
+  plumbing. Translations are consumed through a stub interface; the database
+  still holds only the original language.
+- **Phase 2 (implemented):** gettext-style fragment storage in the
+  database — machine-translated chunks plus user override patches, assembled
+  at render time. Storage details in `docs/migrate.md`.
+
+## Phase 1: negotiation and URLs
+
+### The primary language
+
+Each article has a primary (original) language: `Node.language`, inherited
+down the tree like `banner` — "" = the nearest ancestor's, the front page
+last (it doubles as the site default), with `en` as the final fallback
+(`ORIGINAL_LANGUAGE`, `primary_lang()` in `pagerite/i18n.py`). It is
+configured per row in the structure editor. Everything per-article keys
+off the resolved value: language selection, `<html lang>`, canonical URLs,
+what counts as a translation, and the translation targets (a node's own
+primary is never one — so the target set may include the site default, and
+a page in another language can be translated into it).
+
+### Language selection
+
+Deliberately simple — **q-values are ignored**:
+
+- All known `Accept-Language` implementations send the header **in order of
+  preference**, so we parse it as an ordered list and never reorder.
+- 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.
+
+Region tags normalize to their base subtag (`fi-FI` → `fi`).
+
+### URLs: pretty for users, indexable for search engines
+
+- Canonical URLs stay pretty (`/some-page`). Each language version is
+  addressable as `/some-page?lang=fi` so search engines can index them.
+- `<link rel="canonical">` names the **actually served language**: the plain
+  URL when serving the original (for SEO the non-query URL means the
+  article's own language), `?lang=xx` when serving a translation — however
+  the language was arrived at (query or header).
+- `<link rel="alternate" hreflang="…">` entries follow the canonical
+  directly (before the social meta tags) and are the same set on every
+  page — the site-wide configured languages (`translate_langs`, which the
+  translator works to fill in): `x-default` first, pointing at the plain
+  autodetecting URL, then every language explicitly with `?lang=`, the
+  page's own primary language included.
+- The override sticks for the session of clicks: a page requested with
+  `?lang=` replicates the query onto the navigation links it renders (nav,
+  sidebar, cards, brand — in-article links are content and stay as
+  authored), so plain clicks and no-JS navigation keep the language.
+  pagerite.js additionally strips the query from the address bar via
+  `history.replaceState` (pretty, shareable URLs), remembers the language,
+  and adds it to every internal fetch that lacks one (preloads,
+  fetch-navigations, history traversals); history entries stay query-less.
+- A full page refresh or a shared link resets to automatic selection (header
+  only). This gives a clean one-time override without cookies.
+
+### Response correctness
+
+- Content responses carry `Vary: accept-language` (added to the existing
+  `accept-encoding` vary).
+- `_cached_body` and the page ETag include the **selected language** (not the
+  raw header, which would blow up the cache key space) and the **replicated
+  link language**: a `?lang=fi` render and a header-selected Finnish render
+  of the same page differ in their navigation links, so they are cached as
+  separate variants.
+- `<html lang="…">` reflects the served language, and an RTL language
+  (`i18n.RTL_LANGUAGES` — ar, fa, he, ur) also sets `dir="rtl"` on `<html>`
+  (the editor panel carries its own `lang="en" dir="ltr"` so it stays LTR).
+  Client-side page swaps (fetch navigation in pagerite.js, editor re-renders
+  in swapdoc.js) copy both attributes from the fetched document, so a hot
+  switch into or out of an RTL page flips the layout without a reload.
+
+### Rendering
+
+- The translated Markdown goes through the same `markdown.render` pipeline.
+- Navigation/sidebar titles come from the translation's title map, with
+  per-node fallback to the original title (a partially translated tree must
+  still render).
+- Category placeholder pages (the 404s for content-less labels) select a
+  language like content pages, but over the **subtree's** combined
+  availability (`subtree_languages`) — they have no chunks of their own;
+  the heading, navigation and card text localize from the title map and
+  the target articles' translations.
+- Card descriptions and cover picks run on the target article's hybrid
+  Markdown where that page is available in the served language, with
+  per-card fallback to the original.
+- Fixed UI strings ("Not Found" etc.) and the editor UI stay English for now.
+- The markdown typographer (SmartyPants) is English-centric; per-language
+  typographer options are a possible follow-up, not blocking.
+
+## Phase 2: fragment-based translation storage (implemented)
+
+Phase 1 assumed whole-page translated Markdown delivered from outside. The
+refined model is gettext-style: an article has **one primary version** (its
+`content`, in its own language) plus, per target language, **machine
+fragments** (translated chunks of Markdown) and **user patches** (minimal
+editor overrides). Both are stored in the database and assembled into the
+served Markdown at render time.
+
+### The scenario this must handle
+
+1. Article written in English.
+2. Machine-translated into Spanish → fragments stored.
+3. Editor fixes one Spanish paragraph and changes a link elsewhere to point
+   at a Spanish resource → user patch hunks stored.
+4. English article edited → the edited chunk's key changes; its Spanish
+   fragment no longer matches.
+5. Page requested before the machine translation refreshes → served as a
+   **hybrid**: old fragments for unchanged chunks, plain English for the
+   edited chunk. User patches are attempted against this hybrid, best effort,
+   each hunk independently: the text fix is stale (its search text no longer
+   exists) and silently skipped; the link change still applies even though
+   the link sits in the now-English paragraph.
+6. Machine translation refreshes → full Spanish again, with both patch hunks
+   applying.
+
+### Chunks
+
+`chunk_markdown(markdown)` splits the source into block-level chunks —
+blank-line-separated blocks: headings, paragraphs, code fences (kept whole),
+list blocks, tables, HTML blocks. A chunk's identity is its **source text**,
+gettext-msgid style:
+
+```python
+chunk_key = blake3(normalize(chunk_text)).digest(9)  # bytes; base64 at the JSON level
+```
+
+(`normalize`: strip trailing whitespace per line, collapse surrounding blank
+lines — so whitespace-only source edits don't invalidate translations.)
+
+Consequences:
+
+- Editing the English source invalidates exactly the edited chunks; all
+  other fragments keep applying. Stale fragments are simply never referenced
+  again and can be garbage-collected lazily (or left; they are tiny).
+- No explicit "source version" bookkeeping is needed — staleness falls out
+  of the keys.
+
+### User patches
+
+Editors always edit **full Markdown** in the existing editor UX — never
+fragments. When editing a translated view (`?lang=es`), the editor is loaded
+with the *current hybrid Markdown*; on save, the server computes a minimal
+diff against that hybrid and stores it as a patch:
+
+```python
+class Patch(msgspec.Struct, omit_defaults=True):
+    """One editing session's overrides, applied independently per hunk."""
+
+    hunks: list[tuple[str, str]] = []  # (search, replace) on hybrid Markdown
+```
+
+Hunks are produced from `difflib.SequenceMatcher` on the hybrid vs. the
+edited text at block granularity: each `replace`/`delete`/`insert` opcode
+becomes one `(search, replace)` pair, with the preceding block's tail as
+left context for `insert` (pure inserts have empty search context otherwise).
+Application is dead simple:
+
+```python
+def apply_patch(hybrid: str, patch: Patch) -> str:
+    for search, replace in patch.hunks:
+        if search and search in hybrid:
+            hybrid = hybrid.replace(search, replace, 1)
+        # missing search text = stale hunk -> silently skipped
+    return hybrid
+```
+
+Per-hunk independence is the robustness property from the scenario: a stale
+text fix does not block a still-valid link change. Patches are stored as an
+ordered list and applied in order.
+
+### Storage
+
+Full storage design and the `migrate_v3` restructuring live in
+`docs/migrate.md`. The short version, as it concerns this document:
+
+- Originals **and** translations are content-addressed text chunks in flat
+  stores: `Data.chunks: dict[bytes, str]` and
+  `Data.trans: dict[bytes, dict[str, str]]` (chunk hash → lang → text) —
+  path-independent, so repeated paragraphs and menu titles are translated
+  once and article moves touch nothing. `Node.chunks: list[bytes]` gives
+  each article its order.
+- `Node` gains **`language: str = ""`**, inherited down the tree like
+  `banner` (empty = nearest ancestor, front page last, site default `en`
+  final). `select_language` and `<html lang>` use the resolved value instead
+  of the global `ORIGINAL_LANGUAGE` constant.
+  - **Known weakness:** changing a page's (or subtree's) `language` after
+    translations exist mis-keys everything — translations are keyed by
+    *source* chunks, so old entries silently stop matching and user patches
+    (searching for old-hybrid text) mostly go stale. That is acceptable:
+    the orphaned data is harmless and translations regenerate. We do not
+    migrate translations across a language change.
+- Article paths are stored and keyed **without leading slashes**
+  (`"docs/setup"`, front page `""`); slashes are added only in hrefs.
+
+### Render pipeline (the phase-1 `get_translation` stub, now real)
+
+```python
+def get_translation(data, path, lang) -> Translation | None:
+    if lang not in node.langs:
+        return None
+    hybrid = "\n\n".join(
+        chunks[h] if h in node.no_trans else trans.get(h, {}).get(lang, chunks[h])
+        for h in node.chunks
+    )
+    for patch in data.patches.get(f"{path}:{lang}", []):
+        hybrid = apply_patch(hybrid, patch)
+    return Translation(markdown=hybrid, titles=title_map(data, lang))
+```
+
+- Availability is an article-level index: `node.langs: dict[lang, True]`,
+  maintained by the translation writers (translator job, patch saves) in the
+  same transaction as their data writes — rendering and language selection
+  never probe the `trans` store chunk by chunk. A stale key is benign (the
+  "translation" just renders as the original).
+- `titles` for nav/sidebar/cards: each node's translated title is
+  `trans.get(hash(node.title), {}).get(lang)` with per-node fallback — one
+  dict lookup per nav item at render time.
+- Cache invalidation: writes to `chunks` / `trans` / `patches` (translator,
+  editor saves) call `_invalidate_pages()`, same as content writes.
+
+### Editor flow
+
+The page and structure editors share one language selector (`LangSelect.vue`:
+a small flag button opening a dropdown; the same country-flag-icons set as
+the analytics visitor cells), v-modeled on one shell-wide selection
+(`editorLang.js`, `''` = the primary language). The page editor lists the
+page's own primary language (`Node.language`, resolved through the
+hierarchy and echoed in the WS doc as `primary_lang`) plus the union of
+the page's translations (`node.langs`) and
+the site-wide `translate_langs`; it always opens in the primary language,
+even when the page itself was served in a translation. A note under the
+toolbar states the blast radius:
+edits to the primary language re-chunk the original (invalidating the
+affected translation fragments everywhere); edits to a translation stay
+local to that language.
+
+While the editor panel is open, its language selection **overrides the
+normal language preferences** for the page preview: EditorShell pins every
+in-place re-render and pagerite.js fetch/prefetch to it (`?lang=` — a
+primary selection pins by the current page's own resolved primary, which
+`select_language` honors), and closing the panel restores the normal
+preferences.
+
+- WS `open` with a `lang` returns the effective **hybrid** Markdown and
+  title for that language (ungated by `node.langs` — a language without
+  any fragments yet starts from the original text), plus the language
+  metadata (`lang`, `primary_lang`, `langs`, `translate_langs`).
+- The editor keeps a **shadow copy** of the Markdown it opened. WS `save`
+  with `lang` sends it as `base`; the server diffs `base` → submitted text
+  (`make_patch`) and appends a `Patch`. Diffing against the shadow (rather
+  than the current hybrid) keeps hunks correct when the original or the
+  machine translation moved under an open editor; application against the
+  then-current hybrid stays best-effort per hunk, as designed.
+- A changed **title** on a translated save becomes a fragment in
+  `Data.trans` keyed by the original title's chunk hash — the same storage
+  as machine title translations. An untouched title field (holding the
+  served translation) is not sent, so saving never freezes a stale machine
+  title into an override.
+- Saving never deletes; a translation additionally cannot be emptied (that
+  would render as a blank page in that language).
+- The live preview renders the version being edited, whichever language
+  the page itself was loaded in (the render is just the edited Markdown +
+  title). A translated save keeps that preview in place — re-fetching the
+  page would come back in the header-selected language.
+- Saving the primary-language version re-chunks the submitted Markdown and
+  updates `Data.chunks` / `node.chunks` — only genuinely new text lands in
+  the kanta change diff (see docs/migrate.md).
+
+The **structure editor** selects from the same languages with the same
+`LangSelect` (the selection is shared — switching in either tab switches
+both, and the preview). It is also where a page's **primary language** is
+configured: each row carries a small flag dropdown (the resolved flag,
+dimmed while inherited) that sets `Node.language` via a structure op —
+'' = inherit, so setting it on a section covers the whole subtree. The
+tree it
+lists (`GET /_api/pages?lang=`) comes back with per-language titles where a
+translation exists (`translated` marks those rows; untranslated rows show
+the original title, dimmed). Retitling in a non-primary language posts the
+structure op with a `lang` and writes a per-language title fragment in
+`Data.trans` (keyed by the original title's chunk hash, exactly like a
+machine title translation — a user edit simply overwrites it); sending the
+original's text drops the override. The structure itself — slugs,
+hierarchy, order — is language-independent, so pending rows, slug edits,
+drag-and-drop and deletes work identically in every language.
+
+### Translator service API
+
+An external machine-translation service connects over WebSocket at
+`/_translate/{key}` — deliberately **not** under `/_api`: the SSO
+forward-auth does not cover that route, and the key in the path is the
+access control. Keys live in `Data.translate_keys` (key -> display name) —
+12 lowercase alphanumeric characters each, the first one generated at
+database bootstrap and multiple keys reserved for future management (e.g.
+a web UI). The full WS URL(s) are printed in the startup log
+(`ws://localhost:{port}/_translate/{key}` locally,
+`wss://{hostname}/_translate/{key}` on a public hostname) and the keys are
+surfaced to the admin in `GET /_api/settings` as `translate_keys`. An
+unknown or empty key rejects the handshake (close-before-accept → HTTP
+403). Transactions storing results record the connecting key as the kanta
+transaction `user`.
+
+Frames are JSON-encoded tagged msgspec structs (`pagerite/translate.py`;
+`bytes` fields ride as base64):
+
+- `{"type": "hello", "langs": [...]}` — client greeting announcing its
+  **capabilities**: the language codes its model can produce (normalized
+  to base subtags; `en`/empty dropped).
+- `{"type": "job", "lang", "key", "texts", "path", "kind", "contexts"}` —
+  server push: ONE fragment to translate (an article title or a chunk), as
+  a list of **prose segments** (see Segmentation below). `contexts` is
+  parallel to `texts` ("" = none): the surround to translate the segment
+  in — for clients that translate better with context (see below).
+  Contexts are not part of the result.
+- `{"type": "result", "lang", "key", "texts"}` — client reply: the
+  segments translated, same order and count, matching its job by (lang, key).
+
+Which languages get translated is **server-configured**:
+`Data.translate_langs` (presence-key dict, bootstrapped to Spanish and
+Chinese — edited in the editor shell's localization tab, whose flag grid
+lists every language including English, or set via `/_api/settings` as
+`translate_langs`). A target equal to an article's own primary language is
+skipped per article (its original already is that language), so the set
+may freely contain the site default. The dispatcher offers a
+connection jobs only in `wanted ∩ capable`; a connection without overlap
+simply stays idle.
+
+`DELETE /_api/translations` (the localization tab's "refresh all
+translations" button) drops every machine translation (`Data.trans`) and
+rebuilds the availability index (`node.langs`) from the surviving user
+patches, so the dispatcher re-translates everything from scratch; the
+run's validation skip-list is cleared with it, giving rejected fragments
+another chance.
+
+Dispatch semantics (the `Dispatcher` in `pagerite/translate.py`; app.py only
+registers the route):
+
+- **One job at a time per connection** — the next job is sent only after
+  the current one's result. Clients wanting parallelism open multiple
+  connections (e.g. several `scripts/translator.py` instances).
+- Pending work is derived from the `trans` store
+  (`translate.pending_items`) minus the items in flight on any connection,
+  so a **disconnect requeues** that connection's in-flight item and it is
+  offered to any free capable connection.
+- Dispatch re-runs on every relevant event: Hello, result, disconnect and
+  content change (`_invalidate_pages()` schedules it, so the pass runs
+  after the writing transaction commits).
+- A result with no job in flight, a mismatched (lang, key), a duplicate
+  hello, or any malformed frame closes the socket with a protocol error.
+
+Results are stored into `trans` in one transaction and set
+`node.langs[lang]` on every article they touch (shared chunks make several
+pages gain a language from one fragment). Unknown keys are stored anyway
+and re-storing overwrites — results are idempotent.
+
+#### Segmentation
+
+Fragments cross the wire as **prose segments** (`pagerite/segments.py`): the
+fragment is parsed with the project's own markdown-it setup
+(`markdown.make_md(verbatim=True)` — all extensions, but no typographer or
+tasklist label wrapping, so token text stays byte-identical to the source)
+and split into the runs a model may touch: paragraph/heading/table-cell text
+(merged across soft line breaks), image alt texts and captions, footnote
+bodies. A block of plain text, inline **links and paired text formatting**
+(strong/em/s) **stays whole** — link and formatted texts cross inline, in
+sentence context, with the Markdown stripped (see below). Everything else
+never leaves the server: code spans and
+fences, URLs and autolinks, link/image *destinations*, `{...}` spans
+(placeholders like `{dates}` as well as attrs), reference and footnote
+labels, container fences, GFM alert markers (`[!NOTE]`), raw HTML — and the
+remaining markup punctuation (`|`, `:::`), which is a run boundary.
+Chunks with no segments (a lone `{dates}`, container fences, pure
+code/HTML) are never dispatched at all (`needs_translation`); every
+language renders them from the original chunk. Each segment is accompanied
+by a context string (a segment carved out of a larger block carries the
+block's plain text; a whole-block segment carries "") — context is a
+prompt aid only, never spliced into the result.
+
+Reassembly is offset splicing, not text the model produced: each segment's
+source span was located at dispatch (sequential search; a run that is not a
+verbatim source substring — entity-decoded text, backslash escapes — is
+skipped and stays in the original language), and the returned translations
+are swapped in by offset. Markup corruption is therefore impossible by
+construction; the failure modes that remain are a wrong segment count, an
+empty segment, or markup injected INTO a segment (a `<br>` in a title
+translation would splice live HTML) — each returned segment must parse as
+pure prose, or the whole result is dropped and logged, and the (lang, key)
+pair is skipped for the rest of the server run (generation is
+near-deterministic, so an immediate retry would re-fail; the fragment stays
+pending and gets another chance on restart or `DELETE /_api/translations`).
+`Data.trans` therefore only ever holds clean translated Markdown.
+
+Link- and formatting-carrying blocks are the one place a segment is not
+spliced verbatim: a label translated apart from its sentence comes back
+grammatically incompatible with it (case government, particles, word
+order), and shown the Markdown the model mangles it (Seed-X dropped the
+`**` and the glued-on colon in `**Pagerite**: …`), so the block crosses
+whole — all Markdown stripped — and the server re-inserts the link and
+formatting syntax into the translated block. The boundaries are found by
+**text processing alone** —
+markers on the wire are hopeless (an earlier sentinel-masking design let
+the model see and mangle exactly that punctuation: Seed-X renumbered the
+tokens and turned `![` into `¡¡…!!`). Each mark's weight ratio in the
+source block (word units before its text boundaries over the block total;
+CJK ideographs count as one unit each, kana runs as one — no spaces to
+count words by) is applied to the translation's units; the inner text ends
+at its last unit, so punctuation and whitespace between the mark and the
+next word stay outside it. Placement is
+approximate and drift accumulates across several marks in one block — the
+accepted trade: better a coherent sentence with a slightly shifted link
+than separately translated snippets that don't fit together. A boundary
+that maps to an empty slice degrades to the source text rather than
+emitting a broken `[](url)` or `**`. Blocks mixing in any other inline
+markup (code spans, images, raw HTML) don't qualify and still split into
+runs at those boundaries.
+
+Punctuation is the translator's own job: Seed-X tends to "finish" short
+labels (titles, nav items) with a comma or period the source never had.
+Prompt wording is NOT the fix — a punctuation-instruction clause made
+Seed-X slip into its `[COT]` reasoning mode (minutes-long generations with
+reasoning text in the output, observed for Chinese). The reference client
+enforces punctuation deterministically instead (`match_punctuation` in
+scripts/translator.py): a translation of a segment without terminal
+punctuation gets any added trailing marks (and a newly opened Spanish ¡/¿)
+stripped before the result goes back.
+
+The same client-side enforcement covers markup bleed as a CLASS, not per
+artifact: `<` is the prose/markup boundary on the wire and never appears in
+a segment in either direction. Source pieces containing `<` are never
+dispatched (they stay in the original language — segments.py), and the
+reference client cuts the model's output at the first `<`
+(scripts/translator.py) — echoed language tags, stray `<br>`s and any
+future variant are one handled case. (The cut is post-decode, not a
+generation stop string: Seed-X opens every generation with its `<s>`
+framing token, which would trip a `<` stop immediately.)
+
+Short fragments get more than a bare prompt: each segment may carry its
+surround in `Job.contexts` — a title carries the article's opening prose
+(its own block is just the title word), a segment carved out of a larger
+block (a partial run; a link text whose block didn't qualify for the
+whole-block treatment) carries the block's plain text, and a
+whole-block segment (a plain paragraph) is self-contextualizing and carries
+"". The reference client translates segment and surround together, stops
+generation at the blank line separating them, and keeps the segment's own
+part of the output (its line resp. paragraph; a hard-break `␣␣\n` separator
+works too). If the model merged them (no separator, or an empty first
+part), it falls back to translating the segment alone. The surround fixes
+context-free readings ("About" as "approximately" — with the opening it
+becomes "Tietoa"/"Acerca de"; "here" as "就在这里" → the idiomatic
+"点击这里") and, as a side effect, most stray trailing punctuation.
+
+### Explicitly out of scope for phase 2
+
+- The machine translation itself: the API above moves fragments in and out;
+  the translating is external. `scripts/translator.py` is the reference
+  client (Seed-X-PPO-7B only — its 28 languages are the ceiling).
+- Garbage collection of orphaned chunks/translations (see docs/migrate.md).
+- sitemap.xml per-language entries; translated UI chrome; per-language
+  typographer options; multi-locale date/number formatting.

docs/migrate.md

@@ -0,0 +1,178 @@
+# migrate_v3: content-addressed chunk storage
+
+Status: **implemented**. `migrate_v3` restructures how article text and
+translations are stored, motivated by the localization model in
+`docs/localization.md` (phase 2). Since it is a full migration, it is free to
+break the current `Node.content: str | None` layout.
+
+## Goals
+
+- **Minimal change diffs.** kanta persists change diffs; editing one
+  paragraph of a long article must not rewrite the whole article string, and
+  a translation refresh must touch only the re-translated chunks.
+- **Fast, simple lookup.** Everything heavy lives in flat
+  `dict[hash, content]` stores; ordering lives in `list[hash]`. No large
+  nested structures, no deep paths.
+- **Path-independent text.** Chunks and their translations are keyed by
+  content hash, not by article path — the same paragraph (or menu title)
+  appearing in several articles is stored and translated once. Moving or
+  renaming an article touches nothing.
+
+## Design (chosen: global content-addressed stores)
+
+Original articles are *also* stored as chunks; everything — originals and
+translations — lives in flat hash-keyed dicts. Costs accepted: rendering does
+one dict lookup per chunk (trivial), orphaned hashes need occasional garbage
+collection, and the editor save path re-chunks server-side (it already
+diffs). The rejected alternatives: per-article nested `LangVersion`
+structures (churn, duplication, whole-string originals) and a hybrid with
+whole originals plus global translations (keeps the worst change-diff
+property).
+
+## Target layout
+
+```python
+class Node(msgspec.Struct, omit_defaults=True):
+    ...
+    #: Replaces `content: str | None`. None = pure category label;
+    #: a list (possibly empty) = a page, as ordered chunk hashes.
+    chunks: list[bytes] | None = None
+    #: Primary language of the article (BCP-47 base tag). "" = inherit
+    #: (nearest ancestor, front page last, site default "en" final).
+    language: str = ""
+    #: Chunk hashes the editor marked "do not translate" (always served
+    #: from the original). Presence-keys, value always True.
+    no_trans: dict[bytes, True] = {}
+    #: Languages this article is available in (besides its primary
+    #: language). Presence-keys, value always True — rendering, language
+    #: selection and hreflang alternates read this set instead of probing
+    #: the trans store chunk by chunk. Maintained by the writers (see
+    #: "Language index maintenance" below).
+    langs: dict[str, True] = {}
+
+class Data(msgspec.Struct):
+    ...
+    #: API keys gating the translator service WebSocket (/_translate/{key}):
+    #: key -> display name; the first is generated at bootstrap (app.py).
+    translate_keys: dict[str, str] = {}
+    #: Wanted target languages for the translator service (presence-keys);
+    #: jobs are offered only in these ∩ a connection's capabilities.
+    translate_langs: dict[str, True] = {}
+    #: All original-language text, content-addressed: blake3(normalized)
+    #: digest[:9] -> Markdown chunk. Shared by every article. Keys are
+    #: bytes; kanta/msgspec base64-encode them at the JSON level.
+    chunks: dict[bytes, str] = {}
+    #: Machine translations: chunk hash -> lang -> translated Markdown
+    #: (nested, not tuple keys: msgspec's JSON serializer rejects them).
+    #: Also used for node titles (hash of the title text).
+    trans: dict[bytes, dict[str, str]] = {}
+    #: User override patches per article and language:
+    #: f"{path}:{lang}" -> ordered patches (see localization.md).
+    patches: dict[str, list[Patch]] = {}
+```
+
+Notes:
+
+- **Article paths never carry a leading slash** in the DB or in lookup keys
+  (`"docs/setup"`, front page `""`); the leading slash is added only when
+  building hrefs. `migrate_v3` audits existing stored paths (translation
+  keys, analytics references, any path-valued fields) and normalizes them.
+- **Titles are chunks too**, by hash only: the nav renderer looks up
+  `trans.get(hash(node.title), {}).get(lang)`. No separate title storage;
+  editing a title invalidates its translations automatically.
+- **Per-hunk options** live in two places: *inherent* options are derived at
+  chunking time (code fences, HTML blocks and prose-free chunks are
+  no-translate without storing anything — `needs_translation`, see
+  docs/localization.md "Masking"); *editor-set* flags are `node.no_trans`
+  (keyed by chunk
+  hash, so a heavy edit silently drops the flag — acceptable and
+  self-healing).
+- **Patch payloads stay inline** in `Patch.hunks` — patches are small by
+  construction (minimal server-computed diffs). If a pathological case shows
+  up, hunks can be hash-stored later without schema pain.
+
+## Language index maintenance (`node.langs`)
+
+`node.langs` is a denormalized index over the `trans`/`patches` stores so
+that article rendering, `select_language`'s availability check, and hreflang
+alternate links never enumerate chunks. It is written by whoever writes
+translation data, in the same transaction:
+
+- **Translator service:** the WebSocket API at `/_translate/{key}` (see
+  docs/localization.md) offers pending fragments (titles + translatable
+  chunks lacking an entry for the language) as single-item jobs — one at
+  a time per connection, in `Data.translate_langs` ∩ the connection's
+  announced capabilities — and receives the matching result; storing it
+  writes the `trans[h][lang]` entry, sets `node.langs[lang] = True` on
+  every article that gained one and invalidates the page cache — all in
+  one transaction.
+- **Translated-view save:** appending the first patch for `f"{path}:{lang}"`
+  sets `node.langs[lang] = True` (patches alone make the version exist).
+- **Removals:** deleting a patch or GC'ing translations re-derives the key:
+  keep `lang` if any `trans` entry for the article's current chunks/title or
+  any patch remains, otherwise drop it. Stale `langs` keys are benign (an
+  advertised language that renders as the original), so removal can lag.
+
+## Render / save pipeline (summary)
+
+- **Render:** `text = "\n\n".join(chunks[h] for h in node.chunks)` for the
+  original; for language `L` (only ever attempted when `L in node.langs`),
+  per chunk `trans.get(h, {}).get(L)` unless missing or `h in node.no_trans`,
+  falling back to `chunks[h]`; then apply `patches.get(f"{path}:{L}", [])`
+  in order (per-hunk, best effort); then `markdown.render` as today. All of
+  this assembles the `Translation` the phase-1 plumbing already consumes.
+- **Availability:** `node.langs` is the availability index; `?lang=`
+  handling uses exactly this set. (hreflang alternates are site-wide from
+  `translate_langs` instead — see docs/localization.md.)
+- **Save (primary language):** server re-chunks the submitted Markdown,
+  inserts new hashes into `Data.chunks`, replaces `node.chunks`. Unchanged
+  chunks keep their hashes — only genuinely new text lands in the diff.
+- **Save (translated view):** diff against the served hybrid, append a
+  `Patch` under `patches[f"{path}:{lang}"]`; `node.chunks` untouched.
+- **Invalidate:** any write to `chunks` / `trans` / `patches` calls
+  `_invalidate_pages()`.
+
+## migrate_v3 steps
+
+1. Walk `menu`; for every node with a string `content`:
+   `chunks = chunk_markdown(content)`; write each into the new `chunks`
+  store; replace the field with the hash list (`None` stays `None`).
+2. Initialize empty `chunks` / `trans` / `patches` stores.
+3. Normalize stored paths: strip leading slashes anywhere paths are keys or
+   values.
+4. `language`, `no_trans` and `langs` need nothing — struct defaults cover
+   them (`langs` starts empty; the translator job fills it as translations
+   land).
+
+Chunking must be deterministic and shared with render/save, so
+`chunk_markdown` + `chunk_key` live in `pagerite/i18n.py` (or a small
+`pagerite/chunks.py`) and are imported by both `migrations.py` and
+`views.py`/`app.py`.
+
+## Implementation notes (deviations from the plan above)
+
+- Chunking lives in `pagerite/chunks.py`; hashing uses the `blake3` package
+  (already a dependency), truncated to a 9-byte `bytes` digest (kanta's
+  JSON persistence base64-encodes bytes keys to 12-char strings).
+- `trans` is keyed `hash -> lang -> text` (nested dict), not by
+  `f"{hash}:{lang}"` tuples: msgspec's JSON serializer only supports
+  str-like/number-like dict keys, and kanta persists as JSON lines.
+- `Translation.titles` stayed keyed by node path (phase-1 shape, views
+  untouched): `get_translation` builds it by walking the menu with the same
+  per-title `trans.get(chunk_key(node.title), {}).get(lang)` lookups.
+- Insert hunks anchor on the whole preceding block (not just its tail) —
+  a stronger, simpler search context.
+- `make_patch` diffs with `SequenceMatcher(autojunk=False)` so patches are
+  deterministic (popular lines like blank separators never become junk).
+- Step 3's path normalization is a no-op in practice: the only path-keyed
+  store (`patches`) starts empty at v3; analytics paths live outside the
+  kantadb. The code still strips leading slashes defensively.
+
+## Garbage collection (later, manual or idle-time)
+
+Orphaned entries accumulate: chunks no longer referenced by any
+`node.chunks`/`node.title`, translations whose chunk hash is orphaned, patch
+hunks that never match. All are harmless (never read). A GC pass is a single
+tree walk collecting live hashes, then deleting the rest from `chunks` and
+`trans`; patches whose every hunk is stale get pruned. Not part of
+migrate_v3.

frontend/src/AnalyticsView.vue

@@ -27,6 +27,8 @@ import VisitorCell from './VisitorCell.vue'
 import TransitionGraph from './TransitionGraph.vue'
 import VisitorCharts from './VisitorCharts.vue'
 import { VIEW_W } from './analytics/chart.js'
+import { reconnectPolicy, socketSlot, watchConnecting } from './reconnect'
+import ConnNote from './ConnNote.vue'
 
 // Same centering margin as the charts, so the totals row's left edge
 // aligns with the chart svg above the natural width.
@@ -40,8 +42,20 @@ const error = ref('')
 const now = ref(Date.now())
 let ws = null
 let reconnectTimeout = null
+let connectWatchdog = null
+const reconnects = reconnectPolicy()
 let timeInterval = null
 
+// The panel is live data over its socket: while it is connecting or waiting
+// to reconnect, say so (ConnNote) instead of showing a silent stale view.
+const conn = ref('connecting') // connecting | open | waiting
+const retryIn = ref(0)
+const connNote = computed(() =>
+  conn.value === 'connecting' ? 'connecting to the server…'
+    : conn.value === 'waiting' ? `connection lost — reconnecting in ~${retryIn.value} s…`
+    : '',
+)
+
 // The initial range comes from the URL hash (shareable links); without one,
 // it is derived from the first analytics snapshot: day when the recorded
 // history is shorter than 24 h, week otherwise.
@@ -51,9 +65,16 @@ let rangePinned = Boolean(RANGES[hashRange])
 
 function connectAnalytics() {
   if (ws) return
+  conn.value = 'connecting'
   const proto = location.protocol === 'https:' ? 'wss:' : 'ws:'
   ws = new WebSocket(`${proto}//${location.host}/_api/ws/analytics`)
-  ws.onopen = () => { error.value = '' }
+  clearTimeout(connectWatchdog)
+  connectWatchdog = watchConnecting(ws, 'analytics')
+  ws.onopen = () => {
+    conn.value = 'open'
+    reconnects.opened()
+    error.value = ''
+  }
   ws.onmessage = (event) => {
     try {
       data.value = JSON.parse(event.data)
@@ -75,12 +96,19 @@ function connectAnalytics() {
   }
   ws.onclose = () => {
     ws = null
-    reconnectTimeout = setTimeout(connectAnalytics, 2000)
+    // The policy paces the retry: doubling backoff with jitter, reset only
+    // by a healthy connection — a fixed rapid loop trips the browser's
+    // WebSocket throttling (all sockets then sit "pending" for minutes).
+    const wait = reconnects.closed()
+    retryIn.value = Math.max(1, Math.round(wait / 1000))
+    conn.value = 'waiting'
+    reconnectTimeout = setTimeout(connectAnalytics, wait)
   }
 }
 
 onMounted(async () => {
-  connectAnalytics()
+  // The first connection takes a staggered slot (see ./reconnect).
+  reconnectTimeout = setTimeout(connectAnalytics, socketSlot())
   now.value = Date.now()
   timeInterval = setInterval(() => { now.value = Date.now() }, 1000)
   // The site tree for the transition map (all pages in menu order). Not
@@ -93,6 +121,7 @@ onMounted(async () => {
 
 onUnmounted(() => {
   if (reconnectTimeout) clearTimeout(reconnectTimeout)
+  if (connectWatchdog) clearTimeout(connectWatchdog)
   if (timeInterval) clearInterval(timeInterval)
   if (ws) {
     ws.onclose = null
@@ -151,6 +180,7 @@ const abuseRows = computed(() => formatAbuseRows(rangeData.value?.abuse || [], c
         </nav>
         <a href="/" class="close" title="home">✕</a>
       </header>
+      <ConnNote :text="connNote" />
       <p v-if="error" class="error">⚠️ {{ error }}</p>
       <p v-else-if="!data" class="loading">loading…</p>
       <template v-else>

frontend/src/BannerEditor.vue

@@ -3,11 +3,13 @@
 // the real #page-banner region. Close and tab switching live in EditorShell.
 import { computed, onActivated, onMounted, onUnmounted, ref, watch } from 'vue'
 import { EditorView, basicSetup } from 'codemirror'
-import { EditorState } from '@codemirror/state'
+import { Compartment, EditorState } from '@codemirror/state'
 import { keymap } from '@codemirror/view'
 import { indentWithTab } from '@codemirror/commands'
 import { html } from '@codemirror/lang-html'
 import { cmHighlight, cmTheme } from './cmtheme'
+import ConnNote from './ConnNote.vue'
+import { reconnectPolicy, socketSlot, watchConnecting } from './reconnect'
 import { dropPageCache, loadPlain, runScripts } from './swapdoc'
 
 const props = defineProps({
@@ -25,9 +27,22 @@ const bannerEl = ref(null)
 let ws = null
 let pendingSave = null
 let reconnectTimer = null
-let reconnectDelay = 2000
+let connectWatchdog = null
-const MAX_RECONNECT_DELAY = 16000
+// Reconnection pacing lives in ./reconnect (shared with the other sockets).
+const reconnects = reconnectPolicy()
 let everConnected = false
+// Connection state drives the note at the top (ConnNote), and locks input
+// until the banner's document has arrived (typing before it would be
+// clobbered by the doc accept).
+const conn = ref('connecting') // connecting | open | waiting
+const retryIn = ref(0)
+const docReady = ref(false)
+const editable = new Compartment()
+const connNote = computed(() =>
+  conn.value === 'connecting' ? 'connecting to the server…'
+    : conn.value === 'waiting' ? `connection lost — reconnecting in ~${retryIn.value} s…`
+    : docReady.value ? '' : 'loading the banner…',
+)
 let view = null      // CodeMirror for the banner HTML
 let syncing = false  // set while replacing the document programmatically
 
@@ -90,6 +105,9 @@ function save() {
 
 function openPath(p) {
   path.value = p
+  // Lock input until the doc arrives (typing would be clobbered by it).
+  docReady.value = false
+  view?.dispatch({ effects: editable.reconfigure(EditorView.editable.of(false)) })
   send({ type: 'open', path: p })
 }
 watch(() => props.pagePath, (p) => { openPath(normPath(p)) })
@@ -209,6 +227,8 @@ function onMessage(ev) {
   const msg = JSON.parse(ev.data)
   if (msg.type === 'doc' && msg.path === path.value) {
     setDocument(msg.banner ?? '')
+    docReady.value = true
+    view.dispatch({ effects: editable.reconfigure(EditorView.editable.of(true)) })
     bannerDesign.value = msg.banner_design ?? null
     bannerDesignFrom.value = msg.banner_design_from ?? null
     bannerDesignInherited.value = msg.banner_design_inherited ?? ''
@@ -234,12 +254,22 @@ function onKeydown(ev) {
 }
 
 function connect() {
+  clearTimeout(reconnectTimer)
+  conn.value = 'connecting'
+  if (ws) {
+    // Replacing a stale socket: detach its handlers so its close is silent.
+    ws.onopen = ws.onmessage = ws.onclose = ws.onerror = null
+    if (ws.readyState !== WebSocket.CLOSED) ws.close()
+  }
   ws = new WebSocket(
     `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/_api/ws/editor`,
   )
   ws.onmessage = onMessage
+  clearTimeout(connectWatchdog)
+  connectWatchdog = watchConnecting(ws, 'banner')
   ws.onopen = () => {
-    reconnectDelay = 2000
+    conn.value = 'open'
+    reconnects.opened()
     if (everConnected) {
       if (pendingSave) send(pendingSave)
     } else {
@@ -248,16 +278,19 @@ function connect() {
     everConnected = true
   }
   ws.onclose = () => {
-    clearTimeout(reconnectTimer)
+    // The wait is the policy's: doubling backoff with jitter (./reconnect),
-    reconnectTimer = setTimeout(() => {
+    // reset only by a healthy connection — rapid retries trip the browser's
-      connect()
+    // WebSocket throttling (sockets stuck "pending" for minutes).
-      reconnectDelay = Math.min(reconnectDelay * 2, MAX_RECONNECT_DELAY)
+    const wait = reconnects.closed()
-    }, reconnectDelay)
+    retryIn.value = Math.max(1, Math.round(wait / 1000))
+    conn.value = 'waiting'
+    reconnectTimer = setTimeout(connect, wait)
   }
 }
 
 onMounted(async () => {
-  connect()
+  // The first connection takes a staggered slot (see ./reconnect).
+  reconnectTimer = setTimeout(connect, socketSlot())
   view = new EditorView({
     state: EditorState.create({
       doc: '',
@@ -269,6 +302,8 @@ onMounted(async () => {
         cmTheme,
         cmHighlight,
         EditorView.lineWrapping,
+        // Locked until the banner's document arrives (docReady/ConnNote).
+        editable.of(EditorView.editable.of(false)),
         EditorView.updateListener.of((u) => {
           if (u.docChanged && !syncing) {
             banner.value = view.state.doc.toString()
@@ -286,6 +321,7 @@ onMounted(async () => {
 
 onUnmounted(() => {
   clearTimeout(reconnectTimer)
+  clearTimeout(connectWatchdog)
   for (const t of Object.values(timers)) clearTimeout(t)
   if (ws) {
     ws.onclose = null // intentional close, no reconnect
@@ -300,6 +336,7 @@ onUnmounted(() => {
 <template>
   <div class="banner-editor">
     <div v-if="saveError">{{ saveError }}</div>
+    <ConnNote :text="connNote" />
 
     <section class="block" @paste="onBannerPaste">
       <div class="block-head">

frontend/src/ConnNote.vue

@@ -0,0 +1,21 @@
+<script setup>
+// Connection-state note for the WebSocket-backed panels (page/banner
+// editors, analytics view): while the socket is connecting or waiting to
+// reconnect the panel cannot load or save, and this says so. An empty
+// text hides the note.
+defineProps({ text: { type: String, default: '' } })
+</script>
+
+<template>
+  <div v-if="text" class="conn-note" role="status">{{ text }}</div>
+</template>
+
+<style scoped>
+.conn-note {
+  padding: 0.2rem 1rem;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface);
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+</style>

frontend/src/EditorShell.vue

@@ -1,5 +1,5 @@
 <script setup>
-// Tabbed shell for the four admin editors. The individual pens are shorthands
+// Tabbed shell for the five admin editors. The individual pens are shorthands
 // that open the shell on a given tab; once open, tabs switch instantly without
 // closing the panel. Tabs are kept alive so switching preserves state.
 import { onMounted, onUnmounted, provide, ref, watch } from 'vue'
@@ -7,6 +7,9 @@ import PageEditor from './PageEditor.vue'
 import BannerEditor from './BannerEditor.vue'
 import SiteEditor from './SiteEditor.vue'
 import StructureEditor from './StructureEditor.vue'
+import LocalizationEditor from './LocalizationEditor.vue'
+import { editorLang, pagePrimary } from './editorLang'
+import { loadPlain, setLangOverride } from './swapdoc'
 
 const props = defineProps({
   pagePath: { type: String, default: '' },
@@ -17,11 +20,37 @@ const emit = defineEmits(['close'])
 const currentPath = ref(props.pagePath)
 const activeMode = ref(props.initialMode)
 
-// Tab order: site-wide settings first (site, structure), then — after a
+// The shared language selection (./editorLang, v-modeled by the tabs'
-// visual break — the per-page editors (article, banner).
+// LangSelects) also drives the page preview: while the shell is open it
+// overrides the normal language preferences (?lang= / Accept-Language),
+// so the page renders in the language being edited; closing restores.
+// The primary selection pins by the CURRENT PAGE's own primary language
+// (pages may differ — Node.language is inherited down the tree).
+let pinned = false
+function pinPreviewLang() {
+  pinned = true
+  // '' pagePrimary = not yet learned: pin 'en', the server's final fallback
+  // (i18n.ORIGINAL_LANGUAGE).
+  setLangOverride(editorLang.value || pagePrimary.value || 'en')
+  loadPlain(currentPath.value)
+}
+function unpinPreviewLang() {
+  if (!pinned) return
+  pinned = false
+  setLangOverride(null)
+  loadPlain(currentPath.value)
+}
+watch(editorLang, () => { if (pinned) pinPreviewLang() })
+// The page's primary may be (re)learned while pinned on it (doc accept,
+// tree refresh, a language change on the row) — re-pin with the new code.
+watch(pagePrimary, () => { if (pinned && !editorLang.value) pinPreviewLang() })
+
+// Tab order: site-wide settings first (site, structure, localization), then
+// — after a visual break — the per-page editors (article, banner).
 const MODES = [
   { key: 'site', label: 'site', component: SiteEditor },
   { key: 'structure', label: 'structure', component: StructureEditor },
+  { key: 'localization', label: 'lang', component: LocalizationEditor },
   { key: 'page', label: 'article', component: PageEditor, breakBefore: true },
   { key: 'banner', label: 'banner', component: BannerEditor },
 ]
@@ -60,15 +89,27 @@ function onSwitchEvent(ev) {
 onMounted(() => {
   document.body.dataset.editorMode = activeMode.value
   addEventListener('pagerite:switch-editor', onSwitchEvent)
+  addEventListener('pagerite:editor-shown', pinPreviewLang)
+  addEventListener('pagerite:editor-hidden', unpinPreviewLang)
+  // The shell mounts visible (openEditor), so pin immediately. The site
+  // default primary language comes from the settings — it only fills the
+  // unknown; the page/structure tabs refine pagePrimary per page as they
+  // learn it (their knowledge is strictly better).
+  pinPreviewLang()
+  fetch('/_api/settings').then((r) => r.json()).then((s) => {
+    if (!pagePrimary.value) pagePrimary.value = s.primary_lang || 'en'
+  }).catch(() => { /* keep the fallback */ })
 })
 
 onUnmounted(() => {
   removeEventListener('pagerite:switch-editor', onSwitchEvent)
+  removeEventListener('pagerite:editor-shown', pinPreviewLang)
+  removeEventListener('pagerite:editor-hidden', unpinPreviewLang)
 })
 </script>
 
 <template>
-  <div class="editor-root overlay">
+  <div class="editor-root overlay" lang="en" dir="ltr">
     <header class="editor-tabs">
       <template v-for="m in MODES" :key="m.key">
         <span v-if="m.breakBefore" class="tab-break" />

frontend/src/LangSelect.vue

@@ -0,0 +1,147 @@
+<script setup>
+// The editor shell's one language selector (page + structure tabs): a small
+// flag button opening a clean dropdown, v-modeled on the shared editorLang
+// ('' = the primary language). The lang tab's flag grid is a different
+// control (toggles, not a select) and stays as it is.
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  options: { type: Array, required: true }, // [{tag, code, name, flag, primary}]
+  title: { type: String, default: '' }, // toggle-button tooltip override
+})
+const emit = defineEmits(['update:modelValue'])
+
+const open = ref(false)
+const toggleBtn = ref(null)
+const popStyle = ref({})
+const current = computed(
+  () => props.options.find((o) => o.tag === props.modelValue) ?? props.options[0],
+)
+
+function toggle() {
+  open.value = !open.value
+  if (open.value) {
+    // Position: fixed so the popup overflows the scrolling editor panel
+    // onto the page area instead of being clipped by it.
+    const r = toggleBtn.value.getBoundingClientRect()
+    popStyle.value = { top: `${r.bottom + 2}px`, left: `${r.left}px` }
+  }
+}
+
+function select(tag) {
+  emit('update:modelValue', tag)
+  open.value = false
+}
+</script>
+
+<template>
+  <span v-if="options.length > 1" class="lang-select">
+    <button
+      ref="toggleBtn"
+      type="button"
+      class="lang-current"
+      :class="{ open }"
+      :title="title || (current
+        ? `language: ${current.name}${current.primary ? ' (primary)' : ''}`
+        : '')"
+      @click="toggle"
+    ><span v-if="current?.flag" class="flag" v-html="current.flag" /></button>
+    <span v-if="open" class="lang-pop" :style="popStyle" @mouseleave="open = false">
+      <button
+        v-for="o in options"
+        :key="o.code"
+        type="button"
+        :class="{ active: o.tag === modelValue }"
+        :title="o.primary ? `${o.name} — the primary language` : `${o.name} — translation`"
+        @click="select(o.tag)"
+      ><span v-if="o.flag" class="flag" v-html="o.flag" /> {{ o.name }}<small v-if="o.primary"> (primary)</small></button>
+    </span>
+  </span>
+</template>
+
+<style scoped>
+.lang-select {
+  position: relative;
+  display: flex;
+}
+
+/* The closed state is just the small flag — no button chrome until hovered. */
+.lang-current {
+  display: flex;
+  align-items: center;
+  padding: 2px;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.lang-current:hover,
+.lang-current.open {
+  border-color: var(--line);
+}
+
+/* The dropdown matches the page's existing popups (.picker-pop look).
+   Fixed-positioned (anchored to the toggle's viewport rect on open) so it
+   is not clipped by the editor panel's scrolling overflow. */
+.lang-pop {
+  position: fixed;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.15rem;
+  padding: 0.3rem;
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px #0004;
+  white-space: nowrap;
+}
+
+.lang-pop button {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.15rem 0.4rem;
+  font: inherit;
+  font-size: 0.9rem;
+  text-align: left;
+  color: var(--text);
+  background: none;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.lang-pop button:hover {
+  background: var(--surface);
+}
+
+.lang-pop button.active {
+  color: var(--accent);
+}
+
+.lang-pop small {
+  color: var(--muted);
+}
+
+/* Flags render like in the analytics visitor cells. */
+.flag {
+  display: inline-flex;
+  width: 18px;
+  height: 12px;
+  flex: 0 0 auto;
+  border-radius: 2px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
+}
+
+.flag :deep(svg) {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+</style>

frontend/src/LocalizationEditor.vue

@@ -0,0 +1,281 @@
+<script setup>
+// Lang tab: the site-wide translation target languages (translate_langs)
+// and the translator service WebSocket URL(s) (translate_keys). ALL
+// languages are listed, English included — a page whose primary language
+// (Node.language, configured per row in the structure tab, inherited down
+// the hierarchy) differs can be translated INTO any other. Flag clicks
+// toggle and save immediately; the settings round-trip re-reads the
+// payload, so this tab only ever changes translate_langs. The settings
+// write's invalidation hook kicks the translation dispatcher. The refresh
+// button drops all machine translations (user patches are kept), making
+// the dispatcher re-translate everything.
+import { computed, onActivated, onMounted, onUnmounted, ref } from 'vue'
+import { LANG_GROUPS, TRANSLATABLE, flagFor, langName } from './langs'
+import { dropPageCache } from './swapdoc'
+
+defineProps({ pagePath: { type: String, default: '' } })
+// close/path-change are wired by EditorShell; this tab never emits them.
+defineEmits(['close', 'pathChange'])
+
+const saveError = ref('')
+const selected = ref(new Set())
+const keyUrls = ref([])
+
+// The toggleable targets: every translatable language, laid out in
+// geographic/cultural groups (one row each) rather than alphabetized —
+// related languages sit together (a node's own primary is excluded per
+// article, server-side). Any code missing from LANG_GROUPS trails as an
+// extra row.
+const groups = computed(() => {
+  const tile = (code) => ({ code, name: langName(code), flag: flagFor(code) })
+  const rows = LANG_GROUPS.map((g) => g.filter((c) => c in TRANSLATABLE).map(tile))
+  const covered = new Set(LANG_GROUPS.flat())
+  const rest = Object.keys(TRANSLATABLE).filter((c) => !covered.has(c)).map(tile)
+  if (rest.length) rows.push(rest)
+  return rows.filter((r) => r.length)
+})
+
+function updateWindowTitle() {
+  document.title = 'lang 🖊️'
+}
+
+onActivated(updateWindowTitle)
+
+// The shell stays mounted while hidden: when it is re-shown with this tab
+// active, restore the window title.
+function onEditorShown() {
+  if (document.body.dataset.editorMode === 'localization') updateWindowTitle()
+}
+
+onMounted(async () => {
+  addEventListener('pagerite:editor-shown', onEditorShown)
+  try {
+    const s = await (await fetch('/_api/settings')).json()
+    selected.value = new Set(s.translate_langs || [])
+    const wsBase = location.origin.replace(/^http/, 'ws')
+    keyUrls.value = Object.entries(s.translate_keys || {})
+      .map(([key, name]) => ({ name, url: `${wsBase}/_translate/${key}` }))
+  } catch { /* keep defaults */ }
+})
+
+onUnmounted(() => removeEventListener('pagerite:editor-shown', onEditorShown))
+
+async function toggle(code) {
+  const next = new Set(selected.value)
+  if (next.has(code)) next.delete(code)
+  else next.add(code)
+  selected.value = next
+  try {
+    const s = await (await fetch('/_api/settings')).json()
+    const res = await fetch('/_api/settings', {
+      method: 'PUT',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ ...s, translate_langs: [...next] }),
+    })
+    if (res.ok) {
+      saveError.value = ''
+      dropPageCache()
+    } else {
+      saveError.value = '⚠️ changes could not be saved'
+    }
+  } catch {
+    saveError.value = '⚠️ changes could not be saved'
+  }
+}
+
+// Delete all machine translations server-side; the dispatcher re-fills
+// them (a connected translator starts getting jobs right away). User
+// patches survive — they are edits, not machine output.
+const refreshing = ref(false)
+async function refresh() {
+  if (refreshing.value) return
+  refreshing.value = true
+  try {
+    const res = await fetch('/_api/translations', { method: 'DELETE' })
+    saveError.value = res.ok ? '' : '⚠️ translations could not be refreshed'
+    if (res.ok) dropPageCache()
+  } catch {
+    saveError.value = '⚠️ translations could not be refreshed'
+  } finally {
+    refreshing.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="localization-editor">
+    <div v-if="saveError">{{ saveError }}</div>
+
+    <section class="block">
+      <div class="block-head">
+        <span class="field-label">languages</span>
+      </div>
+      <div class="flags">
+        <div v-for="(row, ri) in groups" :key="ri" class="flag-row">
+          <button
+            v-for="o in row"
+            :key="o.code"
+            type="button"
+            class="flag-tile"
+            :class="{ selected: selected.has(o.code) }"
+            :title="`${o.name} (${o.code})`"
+            @click="toggle(o.code)"
+          >
+            <span class="flag" v-html="o.flag" />
+          </button>
+        </div>
+      </div>
+    </section>
+
+    <section class="block">
+      <div class="block-head">
+        <span class="field-label">translations</span>
+        <small class="muted">deleting re-translates everything; user edits are kept</small>
+      </div>
+      <button
+        type="button"
+        class="refresh-btn"
+        :disabled="refreshing"
+        title="delete all machine translations and let the translator re-fill them"
+        @click="refresh"
+      >
+        {{ refreshing ? 'refreshing…' : 'refresh all translations' }}
+      </button>
+    </section>
+
+    <section v-if="keyUrls.length" class="block">
+      <div class="block-head">
+        <span class="field-label">translator service</span>
+        <small class="muted">connect scripts/translator.py to</small>
+      </div>
+      <div v-for="k in keyUrls" :key="k.url" class="key-row">
+        <code>{{ k.url }}</code>
+        <small class="muted">{{ k.name }}</small>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.localization-editor {
+  overflow-y: auto;
+  background: var(--surface);
+}
+
+.block {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface);
+}
+
+.block-head {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.field-label {
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+/* Flag grid: one geographic group per row. Deselected flags sit dimmed and
+   grayed; a click brings one to full color (selected = a translation
+   target) — the shading alone carries the state, no outline. */
+.flags {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: 0.2rem 0;
+}
+
+.flag-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.flag-tile {
+  padding: 3px;
+  background: none;
+  border: 2px solid transparent;
+  border-radius: 5px;
+  cursor: pointer;
+  opacity: 0.4;
+  filter: grayscale(0.8);
+  transition: opacity 0.15s, filter 0.15s, border-color 0.15s;
+}
+
+.flag-tile:hover {
+  opacity: 0.8;
+  filter: none;
+}
+
+.flag-tile.selected {
+  opacity: 1;
+  filter: none;
+}
+
+/* Same flag chips as the PageEditor language picker / analytics cells. */
+.flag {
+  display: inline-flex;
+  width: 18px;
+  height: 12px;
+  flex: 0 0 auto;
+  border-radius: 2px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
+}
+
+.flag-tile .flag {
+  width: 36px;
+  height: 24px;
+}
+
+.flag :deep(svg) {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.key-row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.6rem;
+}
+
+.key-row code {
+  user-select: all;
+}
+
+.refresh-btn {
+  align-self: flex-start;
+  margin-bottom: 0.2rem;
+  padding: 0.3rem 0.8rem;
+  font: inherit;
+  font-size: 0.85rem;
+  color: var(--muted);
+  background: none;
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.refresh-btn:hover:not(:disabled) {
+  color: var(--text);
+  border-color: var(--muted);
+}
+
+.refresh-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+</style>

frontend/src/PageEditor.vue

@@ -11,15 +11,32 @@
 // and refreshes the page regions in place — never a reload — so the editor
 // state (unsaved text included) also survives closing the shell. The editor
 // always follows the URL: navigating away retargets it to the new page,
-// stashing unsaved text per path (unsavedStash) so returning to the page
+// stashing unsaved text per path and language (stashes) so returning to the
-// restores the working draft; stashes clear on save and on real reload.
+// page restores the working draft; stashes clear on save and on real reload.
-import { onActivated, onMounted, onUnmounted, ref, watch } from 'vue'
+//
+// Languages: the editor always starts in the primary language; the
+// toolbar's LangSelect (shared with the structure tab via ./editorLang)
+// switches between the primary language and its translations. A translation is
+// edited as its effective (hybrid) Markdown; the hybrid the session
+// started from is kept as a shadow copy (shadowBase) and sent along at
+// save time, so the server diffs the user's changes only and stores them
+// as a patch — edits to a translation never touch the original, while
+// edits to the primary language re-chunk the original (and thereby
+// invalidate the affected translation fragments). The live preview always
+// renders the version being edited, whichever language the page itself
+// was loaded in.
+import { computed, onActivated, onMounted, onUnmounted, ref, watch } from 'vue'
 import { EditorView, basicSetup } from 'codemirror'
-import { EditorState } from '@codemirror/state'
+import { Compartment, EditorState } from '@codemirror/state'
 import { keymap } from '@codemirror/view'
 import { indentWithTab } from '@codemirror/commands'
 import { markdown } from '@codemirror/lang-markdown'
 import { cmHighlight, cmTheme } from './cmtheme'
+import { flagFor, langName } from './langs'
+import { editorLang, pagePrimary } from './editorLang'
+import LangSelect from './LangSelect.vue'
+import ConnNote from './ConnNote.vue'
+import { reconnectPolicy, socketSlot, watchConnecting } from './reconnect'
 import { dropPageCache, loadPlain } from './swapdoc'
 
 const props = defineProps({
@@ -34,14 +51,49 @@ const saveError = ref('')
 const editorEl = ref(null)
 const fileInput = ref(null)
 
+// The language being edited: "" = the primary language, where the editor
+// always starts (a served translation does not follow it into the editor;
+// the picker switches). The server normalizes the primary to "" anyway.
+// Shared with the other tabs (./editorLang) — one selection for the whole
+// shell, and for the page preview while the shell is open.
+const lang = editorLang
+const primaryLang = ref('en')
+const pageLangs = ref([]) // translations this page has
+const siteLangs = ref([]) // site-wide configured target languages
+// The shadow copy: the Markdown this editing session started from, sent as
+// "base" on translated saves so the server diffs the user's changes only.
+let shadowBase = ''
+let titleTouched = false
+// The (path, lang) the editor's current content came from: set when a doc
+// is accepted, and the test for whether a reconnected socket must re-open
+// (a dropped open would otherwise leave the editor empty/stale forever).
+let sessionDoc = null
+
+// Connection state drives the note above the editor (ConnNote), and locks
+// input until the page's document has arrived: typing before the accept
+// would be clobbered by it. While merely DISconnected the editor stays
+// editable — text stashes and pending saves flush on reconnect.
+const conn = ref('connecting') // connecting | open | waiting
+const retryIn = ref(0)
+const docReady = ref(false)
+const editable = new Compartment()
+const connNote = computed(() =>
+  conn.value === 'connecting' ? 'connecting to the server…'
+    : conn.value === 'waiting' ? `connection lost — reconnecting in ~${retryIn.value} s…`
+    : docReady.value ? '' : 'loading the page…',
+)
+
 let ws = null
 let view = null
 let savedResolve = null
 let pendingSave = null
 let reconnectTimer = null
-let reconnectDelay = 2000
+let connectWatchdog = null
-const MAX_RECONNECT_DELAY = 16000
+// Reconnection pacing lives in ./reconnect (shared with the other sockets):
-let everConnected = false
+// doubling backoff with jitter, reset only by a healthy connection — rapid
+// retries trip the browser's WebSocket throttling (sockets stuck "pending"
+// for minutes), which is what kept hollowing out the editor.
+const reconnects = reconnectPolicy()
 const dirty = ref(false)  // unsaved text exists (drives the 💾 button)
 let syncingScroll = false
 
@@ -63,6 +115,39 @@ function normPath(p) {
   return p.trim().replace(/^\/+|\/+$/g, '')
 }
 
+// --- Language picker -------------------------------------------------------
+// Flag icons and display names come from ./langs (shared with the
+// localization settings tab).
+
+// The picker's options: the primary language first, then the union of the
+// page's translations and the site-wide configured targets, sorted.
+const langOptions = computed(() => {
+  const others = [...new Set([...siteLangs.value, ...pageLangs.value])]
+    .filter((l) => l && l !== primaryLang.value)
+    .sort()
+  return [primaryLang.value, ...others].map((code) => ({
+    tag: code === primaryLang.value ? '' : code,
+    code,
+    name: langName(code),
+    flag: flagFor(code),
+    primary: code === primaryLang.value,
+  }))
+})
+
+const currentLang = computed(
+  () => langOptions.value.find((o) => o.tag === lang.value)
+    ?? { tag: '', code: lang.value || primaryLang.value, name: langName(lang.value || primaryLang.value), flag: flagFor(lang.value || primaryLang.value), primary: !lang.value },
+)
+
+// The picker's selection is the shell-wide shared language (./editorLang):
+// a change stashes the working text under the PREVIOUS language (the view
+// still holds that doc) and opens the current page in the new one.
+watch(lang, (tag, prev) => {
+  if (!view) return
+  stashAs(prev || '')
+  openPath(path.value)
+})
+
 function pageLabel() {
   return title.value.trim() || ('/' + (path.value || ''))
 }
@@ -96,11 +181,17 @@ function save() {
   // never moves the page.
   const markdown = view.state.doc.toString()
   if (markdown.trim() === '') {
+    if (lang.value) {
+      // Emptying a translation would render it as a blank page; deleting
+      // pages is a primary-language action.
+      saveError.value = '⚠️ a translation cannot be emptied'
+      return Promise.resolve()
+    }
     // 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) => {
       saveError.value = res.ok ? '' : '⚠️ changes could not be saved'
-      if (res.ok) unsavedStash.delete(path.value)
+      if (res.ok) stashes.delete(stashKey(path.value, lang.value))
     })
   }
   const msg = {
@@ -110,6 +201,15 @@ function save() {
     markdown,
     published: published.value,
   }
+  if (lang.value) {
+    msg.lang = lang.value
+    // The shadow copy this session started from: the server diffs base →
+    // markdown and stores only the user's changes as a patch.
+    msg.base = shadowBase
+    // An untouched title field is not sent: it holds the served
+    // translation, which a save must not freeze into an override fragment.
+    if (!titleTouched) delete msg.title
+  }
   pendingSave = msg
   send(msg)
   return new Promise((resolve) => { savedResolve = resolve })
@@ -120,9 +220,12 @@ async function saveAndRefresh() {
   dirty.value = false
   // Refresh the page regions from the server so nav/sidebar changes apply
   // (never a reload: the editor keeps its state). Drop the prefetch cache
-  // first: heading/title changes affect navigation on every page.
+  // first: heading/title changes affect navigation on every page. A
+  // translation save keeps the preview as-is — it already shows the saved
+  // text, and loadPlain would swap the article to the header-selected
+  // language's render.
   dropPageCache()
-  loadPlain(path.value)
+  if (!lang.value) loadPlain(path.value)
 }
 
 function close() {
@@ -572,18 +675,34 @@ function insertTable(cols, rows) {
   view.focus()
 }
 
-// Unsaved edits survive navigation within the session: leaving a page
+// Unsaved edits survive navigation within the session: leaving a page (or
-// stashes its working text here, returning restores it (the server doc
+// switching the language) stashes its working text and shadow base here,
-// still arrives, for title/published and as the base underneath).
+// returning restores them (the server doc still arrives, for
-// Entries clear on save and on real reload (the shell is in-memory only).
+// title/published and language metadata). Entries clear on save and on
-const unsavedStash = new Map()
+// real reload (the shell is in-memory only).
+const stashes = new Map()
+const stashKey = (p, l) => `${p}|${l}`
+
+function stashAs(l) {
+  if (dirty.value && path.value) {
+    stashes.set(stashKey(path.value, l), {
+      text: view.state.doc.toString(),
+      base: shadowBase,
+    })
+  }
+}
+
+function stashCurrent() {
+  stashAs(lang.value)
+}
 
 function openPath(p) {
-  if (dirty.value && path.value && p !== path.value) {
+  if (p !== path.value) stashCurrent()
-    unsavedStash.set(path.value, view.state.doc.toString())
-  }
   path.value = p
-  send({ type: 'open', path: p })
+  // Lock input until the doc arrives (typing would be clobbered by it).
+  docReady.value = false
+  view?.dispatch({ effects: editable.reconfigure(EditorView.editable.of(false)) })
+  send({ type: 'open', path: p, lang: lang.value })
 }
 
 function setDocument(text, preserveSelection = false) {
@@ -624,26 +743,57 @@ function previewIntoArticle(html, multicol) {
 
 function onMessage(ev) {
   const msg = JSON.parse(ev.data)
-  if (msg.type === 'doc' && msg.path === path.value) {
+  // The doc must answer the current path and language; before the first
+  // doc the language is not yet server-normalized (the primary arrives as
+  // "" while the picker may have started from an explicit code), so the
+  // first doc is accepted on path alone and adopts the echoed language.
+  if (msg.type === 'doc' && msg.path === path.value
+      && (!sessionDoc || (msg.lang || '') === lang.value)) {
     title.value = msg.title
     published.value = msg.published
+    primaryLang.value = msg.primary_lang || 'en'
+    pagePrimary.value = primaryLang.value // the page's own — the shell pins the preview by it
+    pageLangs.value = msg.langs || []
+    siteLangs.value = msg.translate_langs || []
+    lang.value = msg.lang || ''
+    sessionDoc = { path: msg.path, lang: lang.value }
+    docReady.value = true
+    view.dispatch({ effects: editable.reconfigure(EditorView.editable.of(true)) })
+    titleTouched = false
     // Restore stashed unsaved edits over the server doc when returning
     // to a page left dirty.
-    const stashed = unsavedStash.get(msg.path)
+    const stashed = stashes.get(stashKey(msg.path, lang.value))
-    setDocument(stashed ?? msg.markdown)
+    setDocument(stashed ? stashed.text : msg.markdown)
+    shadowBase = stashed ? stashed.base : msg.markdown
     dirty.value = stashed != null
     requestRender()
     // A section pen's target line survives the open/path-switch here.
     consumePendingLine()
+  } else if (msg.type === 'doc') {
+    // A doc that answered neither path nor language of the current session
+    // (a late reply to a pre-switch open) — visible because it leaves the
+    // editor empty when it's the only doc that ever arrives.
+    console.warn(
+      '[pagerite] doc dropped:', msg.path, msg.lang || '(primary)',
+      '— editor is on', path.value, lang.value || '(primary)',
+    )
   } else if (msg.type === 'html' && msg.path === path.value) {
     previewIntoArticle(msg.html, msg.multicol)
   } else if (msg.type === 'saved') {
-    saveError.value = ''
+    // A late "saved" for a save sent before a path/language switch must not
-    pendingSave = null
+    // clear the current session's state.
-    dirty.value = false
+    if (pendingSave && pendingSave.path === path.value
-    unsavedStash.delete(path.value)
+        && (pendingSave.lang || '') === lang.value) {
-    savedResolve?.()
+      saveError.value = ''
-    savedResolve = null
+      // The saved text becomes the shadow base for further saves.
+      shadowBase = pendingSave.markdown
+      pendingSave = null
+      dirty.value = false
+      titleTouched = false
+      stashes.delete(stashKey(path.value, lang.value))
+      savedResolve?.()
+      savedResolve = null
+    }
   } else if (msg.type === 'error') {
     saveError.value = '⚠️ changes could not be saved'
   }
@@ -831,33 +981,54 @@ function consumePendingLine() {
 }
 
 function connect() {
+  clearTimeout(reconnectTimer)
+  conn.value = 'connecting'
+  if (ws) {
+    // Replacing a stale socket: detach its handlers so its close is silent.
+    ws.onopen = ws.onmessage = ws.onclose = ws.onerror = null
+    if (ws.readyState !== WebSocket.CLOSED) ws.close()
+  }
   ws = new WebSocket(
     `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/_api/ws/editor`,
   )
   ws.onmessage = onMessage
+  ws.onerror = (ev) => {
+    console.error('[pagerite] editor socket error', ev)
+  }
+  clearTimeout(connectWatchdog)
+  connectWatchdog = watchConnecting(ws, 'editor')
   ws.onopen = () => {
-    reconnectDelay = 2000
+    conn.value = 'open'
-    if (everConnected) {
+    reconnects.opened()
+    if (sessionDoc && sessionDoc.path === path.value && sessionDoc.lang === lang.value) {
       // Reconnected: local text is authoritative — don't re-open (that
       // would clobber the editor), just resync preview and pending saves.
       requestRender()
       if (pendingSave) send(pendingSave)
     } else {
+      // No doc behind the current page+language (first connect, or its
+      // open went down with a previous socket): open fresh, or the editor
+      // would stay empty forever.
       openPath(normPath(props.pagePath))
     }
-    everConnected = true
   }
-  ws.onclose = () => {
+  ws.onclose = (ev) => {
-    clearTimeout(reconnectTimer)
+    // 1006 = abnormal (e.g. the dev proxy refused/dropped the upgrade, or
-    reconnectTimer = setTimeout(() => {
+    // the connecting watchdog fired); worth seeing since a dead socket
-      connect()
+    // before the first doc bricks the editor until a retry lands one.
-      reconnectDelay = Math.min(reconnectDelay * 2, MAX_RECONNECT_DELAY)
+    // The wait is the policy's: doubling backoff with jitter (./reconnect).
-    }, reconnectDelay)
+    console.warn('[pagerite] editor socket closed:', ev.code, ev.reason || '')
+    const wait = reconnects.closed()
+    retryIn.value = Math.max(1, Math.round(wait / 1000))
+    conn.value = 'waiting'
+    reconnectTimer = setTimeout(connect, wait)
   }
 }
 
 onMounted(() => {
-  connect()
+  // The first connection takes a staggered slot (see ./reconnect): page
+  // load opens several sockets at once, and the burst trips throttling.
+  reconnectTimer = setTimeout(connect, socketSlot())
   updateWindowTitle()
 
   view = new EditorView({
@@ -871,6 +1042,8 @@ onMounted(() => {
         cmTheme,
         cmHighlight,
         EditorView.lineWrapping, // Markdown lines are long: soft-wrap them
+        // Locked until the page's document arrives (docReady/ConnNote).
+        editable.of(EditorView.editable.of(false)),
         EditorView.updateListener.of((u) => {
           if (u.docChanged) requestRender()
           // Cursor moves (typing included) drive the page scroll sync.
@@ -912,6 +1085,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   clearTimeout(reconnectTimer)
+  clearTimeout(connectWatchdog)
   if (ws) {
     ws.onclose = null // intentional close, no reconnect
     ws.close()
@@ -929,11 +1103,12 @@ onUnmounted(() => {
 <template>
   <div class="page-editor">
     <header class="toolbar">
+      <LangSelect v-model="lang" :options="langOptions" />
       <label class="title-field">
         <span class="field-label">title</span>
-        <input v-model="title" class="title" @input="requestRender" />
+        <input v-model="title" class="title" @input="requestRender(); titleTouched = true" />
       </label>
-      <label><input v-model="published" type="checkbox" /> published</label>
+      <label :title="lang ? 'translations follow the original page’s published state' : ''"><input v-model="published" type="checkbox" :disabled="!!lang" /> published</label>
       <input
         ref="fileInput"
         type="file"
@@ -949,6 +1124,15 @@ onUnmounted(() => {
         @click="saveAndRefresh"
       >💾</button>
     </header>
+    <ConnNote :text="connNote" />
+    <div v-if="langOptions.length > 1" class="lang-note">
+      <template v-if="lang">
+        {{ currentLang.name }} translation — edits affect only this language.
+      </template>
+      <template v-else>
+        {{ currentLang.name }} is the primary language — edits here affect all translations.
+      </template>
+    </div>
     <div class="format-bar">
       <button type="button" class="code-btn" title="code — inline wrap, or a fenced block for line-spanning selections; click again to unwrap" @click="insertCode"><code>&lt;/&gt;</code></button>
       <button type="button" title="link (toggle: click inside a link to unwrap it)" @click="insertLink">🔗︎</button>
@@ -1089,6 +1273,19 @@ onUnmounted(() => {
   cursor: default;
 }
 
+/* The language selector (toolbar, left) is LangSelect.vue — its styles
+   live there. */
+
+/* Why a language is highlighted: primary edits fan out to translations,
+   translation edits stay local to that language. */
+.lang-note {
+  padding: 0.2rem 1rem;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface);
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
 /* Markdown helpers: plain icon buttons under the toolbar. */
 .format-bar {
   position: relative;

frontend/src/StructureEditor.vue

@@ -7,9 +7,20 @@
 // real — a label with a title and slug, with content (landing page) or
 // without (category whose URL renders a placeholder page). The front page
 // is a top-level row with an empty slug, not the parent of the others.
-import { inject, onActivated, onMounted, onUnmounted, provide, ref, watch } from 'vue'
+//
+// Languages: the LangSelect switches which language the TITLES are shown
+// and edited in (rows without a translation show the original, dimmed) —
+// the selection is shared shell-wide (./editorLang) with the page editor
+// and the page preview. Translated title edits write a per-language
+// fragment (POST /_api/structure with lang); the structure itself —
+// slugs, order, hierarchy — is language-independent and always edits the
+// same tree.
+import { computed, inject, onActivated, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import StructureTree from './StructureTree.vue'
+import LangSelect from './LangSelect.vue'
 import { slugify } from './slugify'
+import { flagFor, langName } from './langs'
+import { editorLang, pagePrimary } from './editorLang'
 import { dropPageCache, loadPlain } from './swapdoc'
 
 const props = defineProps({
@@ -23,6 +34,50 @@ const path = ref('')
 const saveError = ref('')
 const tree = ref([])
 
+// The language the tree's titles are shown and edited in: "" = primary.
+const lang = editorLang
+const primaryLang = ref('en')
+const siteLangs = ref([])
+
+// The strip's options: the primary language first, then the configured
+// translation targets (the lang tab manages that set).
+const langOptions = computed(() =>
+  [primaryLang.value, ...siteLangs.value.filter((l) => l !== primaryLang.value)]
+    .map((code) => ({
+      tag: code === primaryLang.value ? '' : code,
+      code,
+      name: langName(code),
+      flag: flagFor(code),
+      primary: code === primaryLang.value,
+    })),
+)
+const currentLang = computed(
+  () => langOptions.value.find((o) => o.tag === lang.value) ?? langOptions.value[0],
+)
+
+// The selection is shared (./editorLang): a change re-fetches the tree's
+// titles in it (and EditorShell swaps the page preview into it).
+watch(lang, () => refreshPages())
+
+// Per-row primary language (Node.language, '' = inherit): the row's
+// dropdown lists "inherit" first (naming what it resolves to), then every
+// site language. Setting it on a section covers its whole subtree.
+const rowLangChoices = computed(() =>
+  [primaryLang.value, ...siteLangs.value.filter((l) => l !== primaryLang.value)]
+    .map((code) => ({ tag: code, code, name: langName(code), flag: flagFor(code), primary: false })),
+)
+function rowLangOptions(el) {
+  const resolved = el.primary || primaryLang.value
+  return [
+    { tag: '', code: '_inherit', name: `inherit (${langName(resolved)})`, flag: flagFor(resolved), primary: false },
+    ...rowLangChoices.value,
+  ]
+}
+
+async function setLanguage(node, tag) {
+  await postStructure({ path: node.path, language: tag })
+}
+
 function normPath(p) {
   return p.trim().replace(/^\/+|\/+$/g, '')
 }
@@ -152,9 +207,22 @@ async function commitPending() {
 }
 
 // --- Site structure tree (drag-and-drop ordering/moving) ----------------
+function findNode(nodes, p) {
+  for (const n of nodes) {
+    if (n.path === p) return n
+    const found = findNode(n.children, p)
+    if (found) return found
+  }
+  return null
+}
+
 async function refreshPages() {
   try {
-    tree.value = await (await fetch('/_api/pages')).json()
+    const q = lang.value ? `?lang=${lang.value}` : ''
+    tree.value = await (await fetch(`/_api/pages${q}`)).json()
+    // 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'
   } catch { /* list stays stale; not fatal */ }
 }
 
@@ -207,13 +275,15 @@ async function onReorder(parentPath, list, evt) {
 }
 
 // Inline title/slug editing: rows are always editable. Title saves while
-// typing (debounced); the slug commits on blur/Enter, since it renames
+// typing (debounced) — in the selected language (a translation writes a
-// the path (moving the whole subtree with it).
+// title fragment, the primary language the original); the slug commits on
+// blur/Enter, since it renames the path (moving the whole subtree with it).
+// Slugs are language-independent.
 function onTitleInput(node, ev) {
   const title = ev.target.value.trim()
   if (!title || title === node.title) return
   debounce(`title:${node.path}`, async () => {
-    await postStructure({ path: node.path, title })
+    await postStructure({ path: node.path, title, lang: lang.value })
   })
 }
 
@@ -266,12 +336,19 @@ provide('structureHandlers', {
   commitPending,
   discardPending,
   newPage,
+  langOptions: rowLangOptions,
+  setLanguage,
 })
 
 onMounted(() => {
   path.value = normPath(props.pagePath)
   refreshPages()
   addEventListener('pagerite:editor-shown', onEditorShown)
+  // The language strip: site primary + configured targets.
+  fetch('/_api/settings').then((r) => r.json()).then((s) => {
+    primaryLang.value = s.primary_lang || 'en'
+    siteLangs.value = s.translate_langs || []
+  }).catch(() => { /* no strip */ })
 })
 
 onUnmounted(() => {
@@ -283,8 +360,15 @@ onUnmounted(() => {
 <template>
   <div class="structure-editor">
     <div v-if="saveError">{{ saveError }}</div>
+    <div v-if="langOptions.length > 1" class="block lang-block">
+      <div><LangSelect v-model="lang" :options="langOptions" /></div>
+      <small v-if="lang" class="muted">
+        viewing {{ currentLang.name }} titles — dimmed rows are untranslated
+        (shown in the primary language); slugs never translate
+      </small>
+    </div>
     <section class="block structure">
-      <StructureTree :nodes="tree" />
+      <StructureTree :nodes="tree" :lang="lang" />
     </section>
   </div>
 </template>
@@ -309,4 +393,10 @@ onUnmounted(() => {
   overflow-y: auto;
   min-height: 0;
 }
+
+/* The language selector is LangSelect.vue — its styles live there. */
+
+.muted {
+  color: var(--muted);
+}
 </style>

frontend/src/StructureTree.vue

@@ -1,7 +1,13 @@
 <script setup>
 // Recursive site-structure tree with drag-and-drop ordering (vue-draggable).
 // Nodes come from the server (GET /_api/pages via StructureEditor.vue) as
-// {slug, path, title, order, published, has_content, children}.
+// {slug, path, title, translated, order, published, has_content, language,
+// primary, children}. The row's flag (LangSelect) sets the node's primary
+// language (language; '' = inherit — dimmed, showing the resolved flag);
+// the setting covers the whole subtree.
+// With a `lang` prop (StructureEditor's language strip) the titles shown
+// are that language's; `translated` marks rows with an actual translation
+// (untranslated rows show the original title, dimmed).
 // Every node is real: a label whose title and slug are always editable
 // inline — the title saves while typing (and focusing it opens the page),
 // the slug commits on blur/Enter since it renames the path, moving the
@@ -24,12 +30,17 @@
 import { inject } from 'vue'
 import draggable from 'vuedraggable'
 import { slugify } from './slugify'
+import LangSelect from './LangSelect.vue'
 
 defineOptions({ name: 'StructureTree' })
 const props = defineProps({
   nodes: { type: Array, required: true },
   parentPath: { type: String, default: '' },
   depth: { type: Number, default: 0 },
+  // StructureEditor's selected language ('' = original). Only used for the
+  // untranslated-title styling here; the fetch and title edits live in the
+  // parent (handlers.titleInput posts the lang with the op).
+  lang: { type: String, default: '' },
 })
 
 const handlers = inject('structureHandlers')
@@ -126,8 +137,11 @@ function onEnd() {
           <template v-else>
             <input
               class="edit title-edit"
+              :class="{ untranslated: lang && !element.translated }"
               :value="element.title"
-              title="Label in the navigation — saves while typing; click opens the page"
+              :title="lang && !element.translated
+                ? 'No translation yet — showing the original; typing creates the translated title'
+                : 'Label in the navigation — saves while typing; click opens the page'"
               @input="handlers.titleInput(element, $event)"
               @focus="handlers.open(element.path)"
             />
@@ -140,6 +154,17 @@ function onEnd() {
               @change="handlers.commitSlug(element, $event)"
             />
             <span class="acts">
+              <span
+                class="row-lang"
+                :class="{ inherited: !element.language }"
+              ><LangSelect
+                :model-value="element.language"
+                :options="handlers.langOptions(element)"
+                :title="element.language
+                  ? `primary language: set on this page (subtree inherits)`
+                  : `primary language: inherited — set it here (subtree inherits)`"
+                @update:model-value="handlers.setLanguage(element, $event)"
+              /></span>
               <span v-if="!element.published" class="draft">draft</span>
               <button
                 v-if="element.has_content || !element.children.length"
@@ -158,6 +183,7 @@ function onEnd() {
           :nodes="element.children"
           :parent-path="element.path"
           :depth="depth + 1"
+          :lang="lang"
         />
       </div>
     </template>
@@ -223,7 +249,7 @@ body.tree-dragging .treelist {
    level, not across levels). */
 .row {
   display: grid;
-  grid-template-columns: 1.2em minmax(3rem, 1fr) 7rem 5rem;
+  grid-template-columns: 1.2em minmax(3rem, 1fr) 7rem auto;
   align-items: baseline;
   gap: 0.35rem;
   /* Vertical spacing widens the drop zones: the exposed top strip is the
@@ -274,6 +300,13 @@ body.tree-dragging .treelist {
   cursor: text;
 }
 
+/* With a language selected (StructureEditor's strip), rows without an
+   actual translation show the original title dimmed and italic. */
+.title-edit.untranslated {
+  color: var(--muted);
+  font-style: italic;
+}
+
 .slug-edit {
   font-family: var(--font-code);
 }
@@ -285,6 +318,20 @@ body.tree-dragging .treelist {
   justify-content: end;
 }
 
+/* Row language selector (LangSelect): the effective primary language's
+   flag; dimmed while the setting is inherited rather than set on the row. */
+.row-lang {
+  display: inline-flex;
+}
+
+.row-lang.inherited :deep(.lang-current) {
+  opacity: 0.45;
+}
+
+.row-lang.inherited:hover :deep(.lang-current) {
+  opacity: 0.85;
+}
+
 .draft {
   color: var(--muted);
   font-size: 0.75rem;

frontend/src/editorLang.js

@@ -0,0 +1,15 @@
+// The editor shell's shared language selection ('' = the primary language):
+// one state, v-modeled by the LangSelect of every tab that has one (page,
+// structure). While the panel is open it also drives the page preview —
+// EditorShell applies it as the fetch-time language override (swapdoc).
+import { ref } from 'vue'
+
+export const editorLang = ref('')
+
+// The CURRENT PAGE's primary language ('' = not yet learned): the shell's
+// settings fetch fills it with the site default; the page/structure tabs
+// then refine it per page (doc accept / tree rows — strictly better
+// sources, so they overwrite freely while the settings fetch only fills
+// the unknown). EditorShell pins the preview by it when the selection is
+// '' (the primary).
+export const pagePrimary = ref('')

frontend/src/langs.js

@@ -0,0 +1,57 @@
+// Language helpers shared by the editors (the PageEditor language picker,
+// the localization settings tab). Flags come from the country-flag-icons
+// set, same as the analytics visitor cells.
+import * as flagSvgs from 'country-flag-icons/string/3x2'
+
+// The Seed-X reference translator's languages (scripts/translator.py) — the
+// translation-target ceiling — each mapped to the language's home country
+// flag (England for English, Portugal for Portuguese — not the most
+// populous variant). Internal tags are the bare 2-letter base subtags; the
+// translator decides the variant. A variant tag (en-US, pt-BR) is still a
+// valid explicit selection for a future translator that distinguishes them
+// — flagFor shows its own region then.
+export const TRANSLATABLE = {
+  ar: 'EG', cs: 'CZ', da: 'DK', de: 'DE', el: 'GR', en: 'GB', es: 'ES',
+  fa: 'IR', fi: 'FI', fr: 'FR', hu: 'HU', id: 'ID', it: 'IT', ja: 'JP',
+  ko: 'KR', ms: 'MY', nl: 'NL', no: 'NO', pl: 'PL', pt: 'PT', ro: 'RO',
+  ru: 'RU', sv: 'SE', th: 'TH', tr: 'TR', uk: 'UA', vi: 'VN', zh: 'CN',
+}
+
+// The languages in geographic/cultural groups (the lang tab's flag grid
+// lays them out one group per row, in this order): English with the
+// Nordics, then Western/Central and Eastern Europe, Southern Europe with
+// the Middle East, and Asia.
+export const LANG_GROUPS = [
+  ['en', 'nl', 'da', 'no', 'sv', 'fi', 'ru'],
+  ['fr', 'de', 'pl', 'cs', 'hu', 'ro', 'uk'],
+  ['es', 'pt', 'it', 'el', 'tr', 'ar', 'fa'],
+  ['zh', 'ja', 'ko', 'vi', 'th', 'id', 'ms'],
+]
+
+const displayNames = new Intl.DisplayNames(['en'], { type: 'language' })
+
+// English display name for a language tag ("fi" -> "Finnish").
+export function langName(tag) {
+  try {
+    return displayNames.of(tag) || tag
+  } catch {
+    return tag
+  }
+}
+
+// Flag SVG string for a language tag: an explicit region variant (en-US)
+// gets its own region's flag; a bare base tag maps to the language's home
+// country (en → GB, pt → PT); languages outside the list fall back to the
+// tag's most likely region.
+export function flagFor(tag) {
+  tag = tag || ''
+  if (!tag.includes('-')) {
+    const country = TRANSLATABLE[tag.split('-')[0].toLowerCase()]
+    if (country) return flagSvgs[country] || ''
+  }
+  try {
+    return flagSvgs[new Intl.Locale(tag).maximize().region] || ''
+  } catch {
+    return ''
+  }
+}

frontend/src/pagerite.js

@@ -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 { reconnectPolicy, socketSlot, watchConnecting } from "./reconnect";
 
 (() => {
   // Overlay scrollbars: the native kind reserves a strip of layout (or
@@ -34,6 +35,54 @@ import "overlayscrollbars/overlayscrollbars.css";
     });
   }
 
+  // --- Language override (?lang=) ---------------------------------------
+  // /page?lang=fi serves a translated, indexable version (each language is
+  // its own canonical). The chosen language sticks for the session of
+  // clicks: the server replicates ?lang= onto the navigation links it
+  // renders (nav, sidebar, cards — in-article links are content and stay
+  // as authored), and pageUrl adds it to internal fetches that lack one.
+  // The address bar keeps the pretty URL: the query is stripped on load
+  // and never pushed into history. A full refresh or a shared link resets
+  // to automatic selection (the browser's own Accept-Language — every
+  // plain fetch carries it by default). See docs/localization.md.
+  const langParam = new URL(location.href).searchParams.get("lang");
+  if (langParam) {
+    const url = new URL(location.href);
+    url.searchParams.delete("lang");
+    history.replaceState(history.state, "", url);
+  }
+  // The session language. While the editor panel is open, its language
+  // selection overrides the normal preference (swapdoc.setLangOverride):
+  // internal fetches and prefetches follow it until the panel closes and
+  // the override clears (null restores the initial ?lang=, if any).
+  let sessionLang = langParam;
+  addEventListener("pagerite:session-lang", (ev) => {
+    sessionLang = ev.detail?.lang || langParam;
+  });
+  // An internal URL as fetched: carries the session's ?lang= unless the
+  // link already pins a language of its own. With no ?lang= on the initial
+  // load nothing is ever added.
+  const pageUrl = (url) => {
+    const u = new URL(url, location.href);
+    if (sessionLang && u.origin === location.origin && !u.searchParams.has("lang")) {
+      u.searchParams.set("lang", sessionLang);
+    }
+    return u;
+  };
+  // The in-memory page cache is keyed by path + query: the same pathname
+  // holds different HTML for each language version.
+  const rawKey = (url) => {
+    const u = new URL(url, location.href);
+    return u.pathname + u.search;
+  };
+  const cacheKey = (url) => rawKey(pageUrl(url));
+  // What goes into the address bar and history: the pretty URL, no ?lang=.
+  const prettyUrl = (url) => {
+    const u = pageUrl(url);
+    u.searchParams.delete("lang");
+    return u;
+  };
+
   // Regions every page has. #sidebar is NOT among them: it is omitted
   // entirely when the section has no sub-navigation, and handled below.
   const REGIONS = ["page-banner", "nav", "main"];
@@ -352,9 +401,12 @@ import "overlayscrollbars/overlayscrollbars.css";
   // received it as the document (re-fetching would be redundant, and
   // browser heuristics may send it without if-none-match, defeating the
   // conditional request); it enters the cache when navigated to.
-  const pageCache = new Map(); // pathname -> HTML text
+  const pageCache = new Map(); // rawKey/cacheKey(url) -> HTML text
   addEventListener("pagerite:page-fetched", (ev) => {
-    pageCache.set(new URL(ev.detail.url, location.href).pathname, ev.detail.html);
+    // Key by the URL as announced, exactly as the editor fetched it: a
+    // copy pinned to a language (?lang=) caches under its own key, where
+    // navigation with the same session language finds it.
+    pageCache.set(rawKey(ev.detail.url), ev.detail.html);
   });
 
   // Editors mutate site-wide state (theme, structure, headings, banners),
@@ -373,21 +425,22 @@ import "overlayscrollbars/overlayscrollbars.css";
   });
 
   function preload() {
-    const urls = new Set();
+    const urls = new Map(); // cache key -> URL, deduped (hashes collapse)
     for (const a of document.querySelectorAll(
       '#nav a[href^="/"], #sidebar a[href^="/"], #main a[href^="/"]',
     )) {
-      urls.add(a.pathname);
+      const u = pageUrl(a.href);
+      urls.set(rawKey(u), u);
     }
-    for (const url of urls) {
+    for (const [key, u] of urls) {
-      if (pageCache.has(url)) continue;
+      if (pageCache.has(key)) continue;
       // x-pagerite-preload: idle cache warm-up, not a page view — the
       // server excludes these GETs from analytics (the navigation message
       // sent on actual navigation does the counting).
-      fetch(url, { headers: { "x-pagerite-preload": "1" } })
+      fetch(u, { headers: { "x-pagerite-preload": "1" } })
         .then((r) => (r.ok && (r.headers.get("content-type") || "").includes("text/html")
           ? r.text() : ""))
-        .then((html) => { if (html) pageCache.set(url, html); })
+        .then((html) => { if (html) pageCache.set(key, html); })
         .catch(() => {});
     }
   }
@@ -506,8 +559,12 @@ import "overlayscrollbars/overlayscrollbars.css";
   // failing in the background.
   let ws = null;
   const wsQueue = [];
-  let wsReconnectMs = 1000;
+  const wsPolicy = reconnectPolicy({ min: 1000 });
-  let wsNotBefore = 0;
+  // The first attempt is staggered too: page load opens several sockets at
+  // once (Vite's HMR socket, the editors), and the burst trips the browser's
+  // WebSocket throttling (sockets then sit "pending" for minutes).
+  let wsNotBefore = Date.now() + socketSlot();
+  let wsWatchdog = null;
 
   function activityWs() {
     if (ws || Date.now() < wsNotBefore) return;
@@ -518,15 +575,16 @@ import "overlayscrollbars/overlayscrollbars.css";
     } catch {
       return;
     }
+    clearTimeout(wsWatchdog);
+    wsWatchdog = watchConnecting(ws, "activity");
     ws.onopen = () => {
-      wsReconnectMs = 1000;
+      wsPolicy.opened();
       for (const msg of wsQueue.splice(0)) ws.send(JSON.stringify(msg));
     };
     ws.onclose = () => {
       ws = null;
       // No timer here: the next user activity retries, after the backoff.
-      wsNotBefore = Date.now() + wsReconnectMs;
+      wsNotBefore = Date.now() + wsPolicy.closed();
-      wsReconnectMs = Math.min(wsReconnectMs * 2, 30_000);
     };
     ws.onerror = () => ws.close();
   }
@@ -697,12 +755,12 @@ import "overlayscrollbars/overlayscrollbars.css";
     teardownAnalytics();
     let doc;
     let finalUrl = url;
-    const cached = !editing && pageCache.get(new URL(url, location.href).pathname);
+    const cached = !editing && pageCache.get(cacheKey(url));
     if (cached) {
       doc = new DOMParser().parseFromString(cached, "text/html");
     } else {
       try {
-        const res = await fetch(url);
+        const res = await fetch(pageUrl(url));
         const type = res.headers.get("content-type") || "";
         if (!res.ok || !type.includes("text/html")) throw new Error("not a page");
         // Reflect any redirect the server issued.
@@ -710,15 +768,15 @@ import "overlayscrollbars/overlayscrollbars.css";
         const html = await res.text();
         // Populate the cache too, so returning here (back/forward, or a
         // self-link in the nav) is served from memory.
-        pageCache.set(new URL(finalUrl, location.href).pathname, html);
+        pageCache.set(cacheKey(finalUrl), html);
         doc = new DOMParser().parseFromString(html, "text/html");
       } catch {
-        location.href = url; // fall back to a normal navigation
+        location.href = pageUrl(url); // fall back to a normal navigation
         return false;
       }
     }
     if (REGIONS.some((id) => !doc.getElementById(id))) {
-      location.href = url;
+      location.href = pageUrl(url);
       return false;
     }
     const doit = () => {
@@ -774,6 +832,11 @@ import "overlayscrollbars/overlayscrollbars.css";
       // stylesheet after the server-rendered tag.
       const userStyle = document.getElementById("pagerite-user");
       if (userStyle) document.head.appendChild(userStyle);
+      // The served language rides on <html> (lang + dir, rtl for e.g.
+      // Arabic) — follow the swapped page (the editor panel carries its
+      // own lang="en" dir="ltr", so it is unaffected).
+      document.documentElement.lang = doc.documentElement.lang;
+      document.documentElement.dir = doc.documentElement.dir;
       document.title = doc.title;
       // Banners may contain scripts (canvas etc.), content pages may too.
       runScripts(document.getElementById("page-banner"));
@@ -798,7 +861,7 @@ import "overlayscrollbars/overlayscrollbars.css";
       doit();
     }
     currentPath = new URL(finalUrl, location.href).pathname;
-    if (push) history.pushState({ idx: ++historyIdx }, "", finalUrl);
+    if (push) history.pushState({ idx: ++historyIdx }, "", prettyUrl(finalUrl));
     // The open editor follows the URL: retarget the per-page tabs to the
     // navigated-to page (unsaved text of the previous page is discarded —
     // the article it previewed into is gone).

frontend/src/reconnect.js

@@ -0,0 +1,56 @@
+// Shared reconnect policy for the WebSockets (page/banner editors,
+// analytics view, the activity channel). Two things trip a browser's
+// WebSocket throttling, after which every socket to the host sits
+// "pending" (never opens, never closes) for minutes:
+//
+//  1. A burst of simultaneous attempts — page load opens Vite's HMR
+//     socket plus several of ours at the same moment, and every refresh
+//     repeats the burst. socketSlot() spaces new sockets out.
+//  2. Too-frequent retries — so failed attempts back off exponentially
+//     (a few seconds, doubling to half a minute), reset only after a
+//     connection stayed open long enough to count as healthy. A socket
+//     that closes right after opening must NOT reset the backoff.
+export function reconnectPolicy({ min = 2000, max = 30000, healthyAfter = 30000 } = {}) {
+  let delay = min
+  let openedAt = 0
+  return {
+    // Stamp a socket that just opened.
+    opened() {
+      openedAt = Date.now()
+    },
+    // The socket closed: the wait before the next attempt (up to 50%
+    // jitter; the base doubles per failure). A healthy streak resets it.
+    closed() {
+      if (openedAt && Date.now() - openedAt >= healthyAfter) delay = min
+      openedAt = 0
+      const wait = Math.round(delay * (1 + Math.random() * 0.5))
+      delay = Math.min(delay * 2, max)
+      return wait
+    },
+  }
+}
+
+// Sockets created at the same moment (page load: Vite's HMR socket plus
+// ours) read as one burst to the browser's throttling. Space new sockets
+// out: each call reserves a slot a beat after the previous one.
+let nextSlot = 0
+export function socketSlot() {
+  const now = Date.now()
+  const wait = Math.max(0, nextSlot - now)
+  nextSlot = Math.max(now, nextSlot) + 300
+  return wait
+}
+
+// A socket still CONNECTING after this long counts as a failed attempt:
+// browser throttling leaves sockets "pending" (no open, no close) for
+// minutes, and without a watchdog the app would wait on one forever (the
+// recurring empty editor). Closing it fires onclose, which reschedules
+// through the policy's backoff — it never reconnects aggressively itself.
+export function watchConnecting(ws, label) {
+  return setTimeout(() => {
+    if (ws.readyState === WebSocket.CONNECTING) {
+      console.warn(`[pagerite] ${label} socket stuck connecting — closing it, retrying with backoff`)
+      ws.close()
+    }
+  }, 10_000)
+}

frontend/src/swapdoc.js

@@ -11,6 +11,19 @@ export function dropPageCache() {
   dispatchEvent(new CustomEvent('pagerite:drop-page-cache'))
 }
 
+// The editor's language override (set by EditorShell): while the panel is
+// open, its language selection wins over the normal preferences (?lang= /
+// Accept-Language) — every in-place re-render asks for that language
+// explicitly, and pagerite.js applies it to its own fetches and prefetches
+// (pagerite:session-lang). The primary selection pins by its code:
+// ?lang=<primary> selects the original explicitly (i18n.select_language).
+let overrideLang = null // the ?lang= value in force, null = normal prefs
+
+export function setLangOverride(queryLang) {
+  overrideLang = queryLang || null
+  dispatchEvent(new CustomEvent('pagerite:session-lang', { detail: { lang: overrideLang } }))
+}
+
 export function runScripts(root) {
   // Scripts injected via innerHTML do not execute; re-create them.
   if (!root) return
@@ -101,6 +114,11 @@ function swapRegions(doc) {
     }
     anchor = imported
   }
+  // The served language rides on <html> (lang + dir, rtl for e.g. Arabic):
+  // follow the swapped page. The editor panel carries its own lang="en"
+  // dir="ltr", so it is unaffected.
+  document.documentElement.lang = doc.documentElement.lang
+  document.documentElement.dir = doc.documentElement.dir
   // The editor keeps its own title while open; only inherit the server title
   // when navigating outside the editor (e.g. fetch-navigation swaps).
   if (!document.body.classList.contains('editing')) {
@@ -111,13 +129,14 @@ function swapRegions(doc) {
 // Fetch /p, swap its regions into the live page and replaceState to it.
 // Returns the final URL (after redirects), or null when the fetch did not
 // yield a page. Category and missing URLs render a placeholder 404 page —
-// fine to swap in (new pages are created by editing them).
+// fine to swap in (new pages are created by editing them). While the
+// editor's language override is set the fetch pins that language.
 export async function loadPlain(p) {
   let doc
   let finalUrl = `/${p}`
   let html
   try {
-    const res = await fetch(finalUrl)
+    const res = await fetch(overrideLang ? `${finalUrl}?lang=${overrideLang}` : finalUrl)
     const type = res.headers.get('content-type') || ''
     if (!type.includes('text/html')) return null
     if (res.redirected) finalUrl = res.url
@@ -126,10 +145,16 @@ export async function loadPlain(p) {
   } catch { return null }
   if (!doc.getElementById('main')) return null
   swapRegions(doc)
-  history.replaceState(history.state, '', finalUrl)
+  // The address bar keeps the pretty URL: a language query is a fetch
+  // detail, never shown (pagerite.js's initial ?lang= works the same).
+  const pretty = new URL(finalUrl, location.href)
+  pretty.searchParams.delete('lang')
+  history.replaceState(history.state, '', pretty)
   runScripts(document.getElementById('page-banner'))
   runScripts(document.getElementById('main'))
   // Keep pagerite.js's in-memory page cache in sync with the fresh copy.
+  // The URL is announced as fetched: a language-pinned copy caches under
+  // its own ?lang= key, where navigation with the same pin finds it.
   dispatchEvent(new CustomEvent('pagerite:page-fetched', { detail: { url: finalUrl, html } }))
   dispatchEvent(new CustomEvent('pagerite:preview')) // re-inject + re-tuck the edit pens
   return finalUrl

frontend/vite.config.js

@@ -16,7 +16,7 @@ const CONTENT_PROXY = '^(?!/_|/@|/src|/node_modules|/__).*$'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
-    fastapiVue({ paths: ["/_api", "/_f", "/_themes", "/_fonts", "/_a"] }),
+    fastapiVue({ paths: ["/_api", "/_f", "/_themes", "/_fonts", "/_a", "/_translate"] }),
     vue(),
     vueDevTools(),
   ],

pagerite/__main__.py

@@ -9,6 +9,7 @@ from pathlib import Path
 
 import httpx
 from fastapi_vue import server
+from fastapi_vue.hostutil import parse_endpoints
 
 DEFAULT_PORT = 8100
 DEVMODE = os.getenv("PAGERITE_DEV") == "1"
@@ -96,6 +97,12 @@ def main() -> None:
     # Export the hostname before pagerite.app is imported: it derives the
     # data directory and public origin from it at import time.
     os.environ["PAGERITE_HOSTNAME"] = args.hostname
+    # And the listen port: the app prints the translator WS URL at startup,
+    # which for localhost includes the actual port.
+    for endpoint in parse_endpoints(args.listen, DEFAULT_PORT):
+        if "port" in endpoint:
+            os.environ["PAGERITE_PORT"] = str(endpoint["port"])
+            break
     if args.dbip:
         _download_dbip()
     server.run(

pagerite/app.py

@@ -15,9 +15,11 @@ walking the tree (``resolve``), moves are slot detach/attach
 import asyncio
 import gzip
 import ipaddress
+import logging
 import mimetypes
 import os
 import re
+import secrets
 import shutil
 import socket
 import tempfile
@@ -47,19 +49,23 @@ from mediapreview import dispatch
 from pydantic import BaseModel
 from zstandard import ZstdCompressor
 
-from pagerite import analytics, seed, views
+from pagerite import analytics, i18n, seed, translate, views
 from pagerite.__main__ import DEVMODE
+from pagerite.chunks import store_chunks
 from pagerite.data import (
     Data,
     Node,
     append_order,
     find_slot,
+    node_markdown,
     prettify,
     resolve,
     sorted_nodes,
 )
 from pagerite.markdown import render, toggle_task
 
+logger = logging.getLogger(__name__)
+
 # Site identity: the hostname comes from the CLI (first positional argument,
 # exported as PAGERITE_HOSTNAME) and names the per-site data directory
 # ``<hostname>/{content.kantadb, analytics.json, files}`` under the cwd.
@@ -255,7 +261,7 @@ def _remove_page_content(menu: dict[str, Node], path: str) -> None:
     if node is None:
         return
     if node.children:
-        node.content = None
+        node.chunks = None
         node.modified = datetime.now(UTC)
     else:
         del slot[0][slot[1]]
@@ -271,19 +277,38 @@ def _seed(data: Data) -> None:
         node = _ensure(data.menu, path)
         node.title = title
         # Empty markdown means a pure category label (e.g. "showcase",
-        # seeded only to carry a banner design): leave content as None so
+        # seeded only to carry a banner design): leave chunks as None so
         # the node renders the placeholder and nav points at its children.
         if markdown:
-            node.content = markdown
+            node.chunks = store_chunks(data.chunks, markdown)
         node.banner = banner
         node.banner_design = design
         node.order = order
 
 
+#: Translator key format: 12 lowercase alphanumeric characters — not
+#: brute-forceable over a WebSocket handshake, still human-manageable.
+_KEY_ALPHABET = "abcdefghijklmnopqrstuvwxyz0123456789"
+
+
+@kanta.bootstrap
+def _translator_defaults(data: Data) -> None:
+    """Translator defaults on database creation: the first service key and
+    the wanted target languages (Spanish and Chinese — English is the
+    original language, never a translation target).
+
+    Keys are a dict (key -> display name) with the future reservation that
+    multiple keys could be managed (e.g. via a web interface)."""
+    key = "".join(secrets.choice(_KEY_ALPHABET) for _ in range(12))
+    data.translate_keys[key] = "default"
+    data.translate_langs = {"es": True, "zh": True}
+
+
 @asynccontextmanager
 async def lifespan(_app: FastAPI) -> AsyncIterator[None]:
     """Open the database (migrations run inside kanta.open), load assets, load GeoIP."""
     await kanta.open()
+    translate.log_service_urls(data.translate_keys, HOSTNAME)
     await asyncio.to_thread(file_store.load)
     await frontend.load()
     # Decompress/open the DB-IP MMDB once at startup.  Lookups are then
@@ -381,12 +406,24 @@ class FileStore:
 file_store = FileStore(FILES_DIR)
 
 
-def _render_html(kind: str, path: str, base_url: str) -> str:
+def _render_html(kind: str, path: str, base_url: str, lang: str = i18n.ORIGINAL_LANGUAGE, link_lang: str = "") -> str:
     """Render one of the generated pages (see _html_response)."""
     if kind == "page":
-        return views.render_page(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html, base_url, transition=data.transition)
+        # A selected language without an actual translation renders the
+        # original (translation is None; see docs/localization.md).
+        original = i18n.primary_lang(data.menu, path)
+        translation = i18n.get_translation(data, path, lang) if lang != original else None
+        return views.render_page(data.menu, data, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html, base_url, transition=data.transition, lang=lang, translation=translation, link_lang=link_lang)
     if kind == "category":
-        return views.render_category(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html, transition=data.transition)
+        # A category has no Markdown of its own; only the title map
+        # localizes (heading, navigation, card text).
+        original = i18n.primary_lang(data.menu, path)
+        translation = (
+            i18n.Translation(titles=i18n.title_map(data, lang))
+            if lang != original
+            else None
+        )
+        return views.render_category(data.menu, data, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html, transition=data.transition, lang=lang, translation=translation, link_lang=link_lang)
     if kind == "not-found":
         return views.render_not_found(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html, transition=data.transition)
     return views.render_analytics(data.menu, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html, transition=data.transition)
@@ -399,20 +436,26 @@ _render_gen = 0
 
 
 def _invalidate_pages() -> None:
-    """Drop cached page bodies and bump the render generation (ETags)."""
+    """Drop cached page bodies and bump the render generation (ETags);
+    any content change also re-runs translation dispatch."""
     global _render_gen
     _render_gen += 1
     _cached_body.cache_clear()
+    dispatcher.schedule()
 
 
 @lru_cache(maxsize=128)
-def _cached_body(kind: str, path: str, base_url: str, zstd: bool) -> bytes:
+def _cached_body(kind: str, path: str, base_url: str, zstd: bool, lang: str = i18n.ORIGINAL_LANGUAGE, link_lang: str = "") -> bytes:
     """Rendered page body; cleared by _invalidate_pages on any
-    content/settings change. base_url feeds the social meta URLs and zstd
+    content/settings change. base_url feeds the social meta URLs, zstd
     selects the stored encoding (both variants are cached rather than
-    re-compressed).
+    re-compressed) and lang the selected language (not the raw
+    Accept-Language header, which would blow up the cache key space).
+    link_lang is the ?lang= override replicated onto the navigation links:
+    a query render and a header-selected render of the same language differ
+    in their links, so they are cached separately.
     """
-    body = _render_html(kind, path, base_url).encode()
+    body = _render_html(kind, path, base_url, lang, link_lang).encode()
     return _zstd.compress(body) if zstd else body
 
 
@@ -423,6 +466,8 @@ def _html_response(
     status_code: int = 200,
     headers: dict | None = None,
     etag: bool = False,
+    lang: str = i18n.ORIGINAL_LANGUAGE,
+    link_lang: str = "",
 ) -> Response:
     """Response for a generated page, zstd-compressed when the client
     accepts it (no gzip fallback).
@@ -444,14 +489,15 @@ def _html_response(
     # localhost (varying ports) fall back to the request's own base URL.
     base_url = SITE_URL or str(request.base_url).rstrip("/")
     if DEVMODE:
-        identity = _render_html(kind, path, base_url).encode()
+        identity = _render_html(kind, path, base_url, lang, link_lang).encode()
         body = _zstd.compress(identity) if zstd else identity
     else:
-        identity = _cached_body(kind, path, base_url, False)
+        identity = _cached_body(kind, path, base_url, False, lang, link_lang)
-        body = _cached_body(kind, path, base_url, True) if zstd else identity
+        body = _cached_body(kind, path, base_url, True, lang, link_lang) if zstd else identity
     h = dict(headers or {})
-    if zstd:
+    # Content varies by language (Accept-Language selects a translation)
-        h["vary"] = "accept-encoding"
+    # and by encoding; keep caches from mixing either representation.
+    h["vary"] = "accept-language" + (", accept-encoding" if zstd else "")
     if etag:
         tag = f'"{blake3.blake3(identity).hexdigest()[:32]}"'
         h["etag"] = tag
@@ -472,32 +518,45 @@ class PageIn(BaseModel):
 
 
 @app.get("/_api/pages")
-async def list_pages() -> list[dict]:
+async def list_pages(lang: str | None = None) -> list[dict]:
     """The site tree for the structure editor (all nodes, drafts included).
 
-    Nested by slug; each node carries its full path, menu order and flags.
+    Nested by slug; each node carries its full path, menu order, flags and
+    language settings (``language`` is the node's own primary-language
+    setting, "" = inherit; ``primary`` is the resolved effective one).
+    With a ``?lang=`` translation, titles come out in that language where a
+    translation exists (``translated`` flags it — true trivially for rows
+    whose primary language IS the selected one; other rows fall back to
+    the original title, dimmed) — the structure itself (slugs, order,
+    hierarchy) is language-independent.
     """
+    tag = i18n.base_tag(lang or "")
+    titles = i18n.title_map(data, tag) if tag else {}
 
-    def dump(nodes: dict[str, Node], prefix: str) -> list[dict]:
+    def dump(nodes: dict[str, Node], prefix: str, inherited: str) -> list[dict]:
         out = []
         for slug, node in sorted_nodes(nodes):
             path = f"{prefix}/{slug}" if prefix else slug
+            primary = node.language or inherited
             out.append({
                 "slug": slug,
                 "path": path,
-                "title": node.title,
+                "title": titles.get(path) or node.title,
+                "translated": path in titles or (bool(tag) and primary == tag),
                 "order": node.order,
                 "published": node.published,
-                "has_content": node.content is not None,
+                "has_content": node.chunks is not None,
-                "children": dump(node.children, path),
+                "language": node.language,
+                "primary": primary,
+                "children": dump(node.children, path, primary),
             })
         return out
 
-    return dump(data.menu, "")
+    return dump(data.menu, "", i18n.ORIGINAL_LANGUAGE)
 
 
 @app.put("/_api/pages/{path:path}", status_code=204)
-async def save_page(path: str, page: PageIn) -> None:
+async def save_page(path: str, page: PageIn, lang: str | None = None) -> None:
     """Create or replace the page at a slug path ("" or "/" = front page).
 
     Missing ancestors are created as content-less category labels. Giving
@@ -505,13 +564,31 @@ async def save_page(path: str, page: PageIn) -> None:
     stripping) creates an empty page that renders with just its title —
     saving never deletes; use DELETE to remove a page (the page editor
     issues DELETE when you save empty text).
+
+    With a ``?lang=`` query (a translation, not the primary language) the
+    save is a translated-view edit (docs/localization.md): the markdown is
+    diffed against the currently served hybrid and the minimal diff is
+    appended as a Patch under ``patches[f"{path}:{lang}"]`` — node.chunks
+    and the original-language fields (title, published, banner) stay
+    untouched.
     """
     path = path.strip("/")
     _check_reserved(path)
+    lang = i18n.base_tag(lang or "")
+    if lang and lang != i18n.primary_lang(data.menu, path):
+        chain = resolve(data.menu, path)
+        node = chain[-1] if chain else None
+        if node is None or node.chunks is None:
+            raise HTTPException(404, "no such page")
+        with kanta.transaction("save translation", extra=path):
+            # Patches alone make the translated version exist.
+            if i18n.add_patch(data, node, path, lang, page.markdown):
+                _invalidate_pages()
+        return
     with kanta.transaction("save page", extra=path):
         node = _ensure(data.menu, path)
         node.title = page.title
-        node.content = page.markdown
+        node.chunks = store_chunks(data.chunks, page.markdown)
         node.published = page.published
         if page.banner is not None:
             node.banner = page.banner
@@ -529,12 +606,24 @@ class StructureOp(BaseModel):
     just the top-level node with slug "": renaming it away leaves no front
     page ("/" then redirects to the first nav item), and any childless
     top-level node can take the empty slug to become the front page.
+
+    With `lang` (a translation, not the node's primary language) a `title`
+    edit writes a per-language title fragment instead of the original — the
+    same storage as machine title translations (docs/localization.md);
+    sending the original's text removes the override. Structural fields are
+    not combinable with a translated title edit.
+
+    `language` sets the node's primary language (a BCP-47 base tag; "" =
+    inherit from the nearest ancestor, the front page last, site default
+    "en" final — Node.language), inherited by the whole subtree.
     """
 
     path: str
     order: float | None = None
     move_to: str | None = None
     title: str | None = None
+    lang: str | None = None
+    language: str | None = None
 
 
 @app.post("/_api/structure", status_code=204)
@@ -545,6 +634,24 @@ async def update_structure(op: StructureOp) -> None:
     if chain is None:
         raise HTTPException(404, "no such page")
     node = chain[-1]
+    lang = i18n.base_tag(op.lang or "")
+    if op.language is not None:
+        # Primary-language setting (inherited by the subtree): reselects
+        # what "the original" means for the node — its language is part of
+        # every render, so a change invalidates everywhere.
+        language = i18n.base_tag(op.language)
+        with kanta.transaction("set page language", extra=path):
+            if language != node.language:
+                node.language = language
+                _invalidate_pages()
+        return
+    if op.title is not None and lang and lang != i18n.primary_lang(data.menu, path):
+        # Translated title (i18n.set_title_translation): original title,
+        # slugs and hierarchy stay untouched.
+        with kanta.transaction("translate title", extra=path):
+            if i18n.set_title_translation(data, node, lang, op.title):
+                _invalidate_pages()
+        return
     target = op.move_to.strip("/") if op.move_to is not None else None
     if target is not None and target != path:
         _check_reserved(target)
@@ -584,7 +691,8 @@ async def update_structure(op: StructureOp) -> None:
 async def get_settings() -> dict:
     """Site-wide settings (brand, theme, custom CSS and favicon URL), plus
     the themes, banner designs and user fonts available on disk for the
-    selectors."""
+    selectors, the translator service keys and the wanted translation
+    languages (for the /_translate socket)."""
     return {
         "brand": data.brand,
         "brand_html": data.brand_html,
@@ -596,6 +704,11 @@ async def get_settings() -> dict:
         "fonts": views._user_fonts(),
         "transition": data.transition,
         "transitions": views._transition_names(),
+        "translate_keys": data.translate_keys,
+        # The site default primary language: the front page's resolved
+        # setting (every page may override it, inherited down the tree).
+        "primary_lang": i18n.primary_lang(data.menu, ""),
+        "translate_langs": sorted(data.translate_langs),
     }
 
 
@@ -607,6 +720,7 @@ class SettingsIn(BaseModel):
     custom_css: str
     brand_html: str = ""
     transition: str = "cube"
+    translate_langs: list[str] | None = None  # None keeps the current set
 
 
 @app.put("/_api/settings", status_code=204)
@@ -618,9 +732,34 @@ async def put_settings(settings: SettingsIn) -> None:
         data.theme = settings.theme
         data.custom_css = settings.custom_css
         data.transition = settings.transition
+        if settings.translate_langs is not None:
+            # Any language may be a target — including the site default
+            # (an article in another language can be translated INTO it);
+            # a node's own primary is excluded per article, not here.
+            data.translate_langs = {
+                tag: True
+                for lang in settings.translate_langs
+                if (tag := i18n.base_tag(lang))
+            }
         _invalidate_pages()
 
 
+@app.delete("/_api/translations", status_code=204)
+async def delete_translations() -> None:
+    """Drop all machine translations (Data.trans) so the dispatcher
+    re-translates everything from scratch (a "refresh translations" action:
+    the invalidation hook re-offers every fragment to connected
+    translators). User patches are kept; the availability index
+    (node.langs) is rebuilt from them — patches alone still make a language
+    exist on a page."""
+    with kanta.transaction("refresh translations"):
+        i18n.clear_translations(data)
+        _invalidate_pages()
+    # Fragments rejected this run (segment validation) stay skipped no
+    # longer: a refresh is precisely the "another chance" for them.
+    dispatcher.validation_failures.clear()
+
+
 @app.put("/_api/settings/favicon")
 async def put_favicon(request: Request) -> dict[str, str]:
     """Upload a favicon into the content-addressed store and activate it.
@@ -689,13 +828,15 @@ async def toggle_task_endpoint(body: ToggleTaskIn) -> dict[str, str]:
         return {"markdown": new_markdown}
     chain = resolve(data.menu, path)
     node = chain[-1] if chain else None
-    if node is None or node.content is None:
+    if node is None or node.chunks is None:
         raise HTTPException(404, "no such page")
-    new_markdown = toggle_task(node.content, body.index)
+    new_markdown = toggle_task(node_markdown(data, node) or "", body.index)
     if new_markdown is None:
         raise HTTPException(400, "invalid task index")
     with kanta.transaction("toggle task", extra=path):
-        node.content = new_markdown
+        # Re-chunk like any save: only the chunk containing the toggled
+        # checkbox gets a new hash, the rest keep theirs.
+        node.chunks = store_chunks(data.chunks, new_markdown)
         node.modified = datetime.now(UTC)
         _invalidate_pages()
     return {"markdown": new_markdown}
@@ -925,13 +1066,31 @@ async def delete_page(path: str) -> None:
         raise HTTPException(404, "no such page")
     with kanta.transaction("delete page", extra=path):
         if node.children:
-            node.content = None
+            node.chunks = None
             node.modified = datetime.now(UTC)
         else:
             del slot[0][slot[1]]
         _invalidate_pages()
 
 
+# WebSocket API for external translation services (not under /_api: it is keyed
+# with Data.translate_keys instead of the SSO forward-auth). The dispatcher —
+# protocol, connected clients and the job pipeline — lives in translate.py.
+dispatcher = translate.Dispatcher(data, kanta, _invalidate_pages)
+
+
+@app.websocket("/_translate/{clientkey}")
+async def translate_ws(ws: WebSocket, clientkey: str) -> None:
+    """Translator service channel (docs/localization.md).
+
+    Deliberately NOT under /_api/: the external forward-auth is skipped;
+    the server-generated client key in the path is the access control
+    (``Data.translate_keys``: key -> display name; the first is generated
+    at bootstrap, all are shown in the admin's /_api/settings).
+    """
+    await dispatcher.handle_ws(ws, clientkey)
+
+
 _SLUG_RE = re.compile(r"^[a-z0-9][a-z0-9_-]*$")
 
 
@@ -1248,15 +1407,25 @@ async def editor_ws(ws: WebSocket) -> None:
     """Editor session: open pages, render previews, save — over one socket.
 
     Stateless protocol (each message carries the path):
-      <- {"type": "open", "path"}
+      <- {"type": "open", "path", "lang"?}
       -> {"type": "doc", "path", "exists", "title", "markdown", "published",
-          "banner", "banner_design"}
+          "banner", "banner_design", "lang", "primary_lang", "langs",
+          "translate_langs"}
       <- {"type": "render", "path", "markdown"}
       -> {"type": "html", "path", "html"}
       <- {"type": "save", "path", "title"?, "markdown"?, "published"?,
-          "banner"?, "banner_design"?, "move_from"?}   (absent fields keep
+          "banner"?, "banner_design"?, "move_from"?, "lang"?, "base"?}
-          their old values; move_from: rename/move a page, subtree included)
+          (absent fields keep their old values; move_from: rename/move a
+          page, subtree included)
       -> {"type": "saved", "path"} | {"type": "error", "detail"}
+
+    With "lang" (a translation, not the primary language), open returns the
+    effective hybrid Markdown and title for that language plus the language
+    metadata the picker's UI needs; save diffs the submitted Markdown
+    against "base" (the editor's shadow copy of the hybrid it started from
+    — absent: the current hybrid) and stores it as a user Patch, and a
+    changed title becomes a fragment in Data.trans — node.chunks and the
+    other fields stay untouched (docs/localization.md).
     """
     await ws.accept()
     try:
@@ -1272,12 +1441,29 @@ async def editor_ws(ws: WebSocket) -> None:
                 case "open":
                     chain = resolve(data.menu, path)
                     node = chain[-1] if chain else None
+                    # The article's primary language: its own setting,
+                    # inherited down the tree ("en" final fallback).
+                    node_lang = i18n.primary_lang(data.menu, path)
+                    lang = i18n.base_tag(str(msg.get("lang") or ""))
+                    if lang == node_lang:
+                        lang = ""
+                    markdown = ""
+                    title = node.title if node else ""
+                    if node is not None:
+                        markdown = node_markdown(data, node) or ""
+                        if lang and node.chunks is not None:
+                            # Translation view: the effective (hybrid)
+                            # Markdown and title for that language —
+                            # machine fragments + user patches over the
+                            # original (docs/localization.md editor flow).
+                            markdown = i18n.hybrid_markdown(data, node, path, lang)
+                            title = i18n.title_map(data, lang).get(path) or title
                     await ws.send_json({
                         "type": "doc",
                         "path": path,
                         "exists": node is not None,
-                        "title": node.title if node else "",
+                        "title": title,
-                        "markdown": node.content if node and node.content is not None else "",
+                        "markdown": markdown,
                         "published": node.published if node else True,
                         "banner": node.banner if node else "",
                         # Own banner design setting: null = inherit,
@@ -1300,6 +1486,15 @@ async def editor_ws(ws: WebSocket) -> None:
                             if src is not None
                             else views.theme_banner_design(data.theme)
                         ),
+                        # Language context for the editor's picker: the
+                        # language this Markdown represents ("" = primary),
+                        # the page's own primary language, the translations
+                        # this page already has, and the site-wide
+                        # configured target languages.
+                        "lang": lang,
+                        "primary_lang": node_lang,
+                        "langs": sorted(node.langs) if node else [],
+                        "translate_langs": sorted(data.translate_langs),
                     })
                 case "render":
                     markdown = msg.get("markdown", "")
@@ -1325,6 +1520,8 @@ async def editor_ws(ws: WebSocket) -> None:
                     })
                 case "save":
                     move_from = (msg.get("move_from") or path).strip("/")
+                    lang = i18n.base_tag(str(msg.get("lang") or ""))
+                    translated = bool(lang and lang != i18n.primary_lang(data.menu, move_from))
                     try:
                         _check_reserved(move_from)
                     except HTTPException:
@@ -1358,6 +1555,19 @@ async def editor_ws(ws: WebSocket) -> None:
                                 "detail": "target path exists",
                             })
                             continue
+                    if translated and (move_from != path or old is None or old.chunks is None):
+                        # A translated-view save patches an existing
+                        # original; it cannot create or move pages.
+                        await ws.send_json({"type": "error", "detail": "no such page"})
+                        continue
+                    if translated and "markdown" in msg and not msg["markdown"].strip():
+                        # Saving never deletes; an emptied translation would
+                        # render as a blank page in that language.
+                        await ws.send_json({
+                            "type": "error",
+                            "detail": "a translation cannot be emptied",
+                        })
+                        continue
                     with kanta.transaction("editor save", extra=path):
                         if move_from != path:
                             same_menu = (
@@ -1375,21 +1585,43 @@ async def editor_ws(ws: WebSocket) -> None:
                             tnodes[tslug] = node
                         else:
                             node = old if old is not None else _ensure(data.menu, path)
-                        if "markdown" in msg:
+                        if translated:
-                            # Saving never deletes; empty markdown is an
+                            # node.chunks and the original-language fields
-                            # empty page. Deletion is an explicit choice by
+                            # stay untouched: the markdown diff (against the
-                            # the page editor (REST DELETE).
+                            # editor's shadow "base" — the hybrid it started
-                            node.content = msg["markdown"]
+                            # from; absent: the current hybrid) is appended
-                        if "title" in msg:
+                            # as a Patch, a changed title becomes a
-                            node.title = msg["title"]
+                            # per-language title override (i18n).
-                        if "published" in msg:
+                            changed = False
-                            node.published = bool(msg["published"])
+                            if "markdown" in msg:
-                        if "banner" in msg:
+                                base = msg.get("base")
-                            node.banner = msg["banner"]
+                                changed = i18n.add_patch(
-                        if "banner_design" in msg:
+                                    data, node, path, lang, msg["markdown"],
-                            node.banner_design = msg["banner_design"]
+                                    base=base if isinstance(base, str) else None,
-                        node.modified = datetime.now(UTC)
+                                )
-                        _invalidate_pages()
+                            if "title" in msg and node.title:
+                                changed = (
+                                    i18n.set_title_translation(data, node, lang, msg["title"])
+                                    or changed
+                                )
+                            if changed:
+                                _invalidate_pages()
+                        else:
+                            if "markdown" in msg:
+                                # Saving never deletes; empty markdown is an
+                                # empty page. Deletion is an explicit choice
+                                # by the page editor (REST DELETE).
+                                node.chunks = store_chunks(data.chunks, msg["markdown"])
+                            if "title" in msg:
+                                node.title = msg["title"]
+                            if "published" in msg:
+                                node.published = bool(msg["published"])
+                            if "banner" in msg:
+                                node.banner = msg["banner"]
+                            if "banner_design" in msg:
+                                node.banner_design = msg["banner_design"]
+                            node.modified = datetime.now(UTC)
+                            _invalidate_pages()
                     await ws.send_json({"type": "saved", "path": path})
     except WebSocketDisconnect:
         pass
@@ -1414,7 +1646,7 @@ async def sitemap(request: Request) -> Response:
             (
                 slug
                 for slug, node in sorted_nodes(nodes)
-                if node.published and node.content is not None
+                if node.published and node.chunks is not None
             ),
             None,
         )
@@ -1425,14 +1657,14 @@ async def sitemap(request: Request) -> Response:
                 not parent_has_content
                 and slug == first_content_slug
                 and node.published
-                and node.content is not None
+                and node.chunks is not None
                 and depth > 0
             ):
                 depth -= 1
-            if node.published and node.content is not None:
+            if node.published and node.chunks is not None:
                 entries.append((path, node.modified, depth))
             if node.children:
-                walk(node.children, path, node.content is not None)
+                walk(node.children, path, node.chunks is not None)
 
     walk(data.menu, "")
 
@@ -1508,14 +1740,29 @@ async def show_page(request: Request, path: str) -> Response:
         raise HTTPException(404)
     chain = resolve(data.menu, path)
     node = chain[-1] if chain else None
-    if node is not None and node.published and node.content is not None:
+    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.
+        query_lang = request.query_params.get("lang")
+        lang = i18n.select_language(
+            query_lang,
+            accept_language,
+            lambda tag: tag in node.langs,
+            original=i18n.primary_lang(data.menu, path),
+        )
+        # A ?lang= override is replicated onto the page's navigation links
+        # (link_lang), so clicks and prefetches stay in the chosen language.
+        # Query and header-selected renders of the same language differ in
+        # their links, so link_lang is part of the ETag and body cache key.
+        link_lang = i18n.base_tag(query_lang or "")
         # no-cache forbids serving a stored page without revalidation
         # (browsers would otherwise cache heuristically and serve stale
         # pages, e.g. after a theme change). In-session speed instead comes
         # from pagerite.js's in-memory page cache (preload everything, never
         # fetch on navigation); the ETag just makes those one-time preload
         # fetches and any revalidation cheap.
-        etag = f'"{path}@{node.modified.timestamp()}g{_render_gen}"'
+        etag = f'"{path}@{node.modified.timestamp()}g{_render_gen}l{lang}q{link_lang}"'
         if request.headers.get("if-none-match") == etag:
             return Response(status_code=304)
         if _is_trackable_path(path):
@@ -1530,10 +1777,25 @@ async def show_page(request: Request, path: str) -> Response:
                 "last-modified": _http_date(node.modified),
                 "cache-control": "no-cache",
             },
+            lang=lang,
+            link_lang=link_lang,
         )
-    if node is not None and node.published and node.content is None:
+    if node is not None and node.published and node.chunks is None:
         # Category label without a landing page: placeholder with the pen
         # to create it (404 — no page here, but the node is real).
+        # Language selection as on content pages, but over the whole
+        # subtree's availability: the category has no chunks of its own —
+        # its heading, the navigation and the cards' text localize from
+        # the title map and the target articles' translations.
+        query_lang = request.query_params.get("lang")
+        subtree_langs = i18n.subtree_languages(node)
+        lang = i18n.select_language(
+            query_lang,
+            accept_language,
+            lambda tag: tag in subtree_langs,
+            original=i18n.primary_lang(data.menu, path),
+        )
+        link_lang = i18n.base_tag(query_lang or "")
         if _is_trackable_path(path):
             flushed = _track_entry(path, request, status=404)
             _schedule_client_enrichment(flushed)
@@ -1546,6 +1808,8 @@ async def show_page(request: Request, path: str) -> Response:
                 "last-modified": _http_date(node.modified),
                 "cache-control": "no-cache",
             },
+            lang=lang,
+            link_lang=link_lang,
         )
     if node is None and not path:
         # No front page (no top-level node with slug ""): "/" opens the

pagerite/chunks.py

@@ -0,0 +1,162 @@
+"""Block-level Markdown chunking for content-addressed storage.
+
+A page's Markdown is split into deterministic block-level chunks, each
+stored once under its content hash in ``Data.chunks`` (docs/migrate.md).
+Shared by the render/save pipeline (app.py, views.py, i18n.py) and the
+schema migration (migrations.py), so a chunk's key is stable no matter
+where the split happens.
+"""
+
+import re
+
+import blake3
+
+from pagerite.segments import has_prose
+
+#: Fenced code block opener/closer: up to 3 spaces indent, then 3+
+#: backticks or tildes (CommonMark).
+_FENCE_OPEN = re.compile(r"^ {0,3}(`{3,}|~{3,})")
+
+#: HTML block openers that may span blank lines (CommonMark types 1-5:
+#: script/pre/style/textarea, comments, processing instructions,
+#: declarations, CDATA) with their closing condition. Other HTML blocks
+#: end at the first blank line, which the generic blank-line split
+#: already does.
+_HTML_ATOMIC = (
+    (re.compile(r"^ {0,3}<(?:script|pre|style|textarea)(?:\s|>|$)", re.I),
+     re.compile(r"</(?:script|pre|style|textarea)\s*>", re.I)),
+    (re.compile(r"^ {0,3}<!--"), re.compile(r"-->")),
+    (re.compile(r"^ {0,3}<\?"), re.compile(r"\?>")),
+    (re.compile(r"^ {0,3}<!\[CDATA\["), re.compile(r"\]\]>")),
+    (re.compile(r"^ {0,3}<![A-Za-z]"), re.compile(r">")),
+)
+
+#: First line of a generic HTML block (a block-level tag).
+_HTML_TAG = re.compile(r"^ {0,3}</?[A-Za-z][^>]*>")
+
+
+def _fence_close(line: str, opener: str) -> bool:
+    """True when ``line`` closes a code fence opened by ``opener``: the
+    same marker char, at least as many, and nothing else on the line."""
+    stripped = line.strip()
+    return (
+        len(stripped) >= len(opener)
+        and stripped[0] == opener[0]
+        and set(stripped) == {opener[0]}
+    )
+
+
+def chunk_markdown(markdown: str) -> list[str]:
+    """Split Markdown into block-level chunks, deterministically.
+
+    Blocks are separated by blank lines; fenced code blocks and the
+    multi-line HTML blocks (comments, script/pre/style, CDATA...) are
+    kept atomic, even across blank lines, and end at their closing
+    condition. Chunks carry no surrounding blank lines and no trailing
+    newline; rejoining with ``join_chunks`` reproduces the source modulo
+    blank-line normalization.
+    """
+    chunks: list[str] = []
+    buf: list[str] = []
+    fence = ""  # opener marker of the code fence we are in ("" = outside)
+    html_end: re.Pattern | None = None  # closes the atomic HTML block we are in
+
+    def flush() -> None:
+        text = "\n".join(buf).strip("\n")
+        if text.strip():
+            chunks.append(text)
+        buf.clear()
+
+    for line in markdown.split("\n"):
+        if fence:
+            buf.append(line)
+            if _fence_close(line, fence):
+                fence = ""
+                flush()
+            continue
+        if html_end is not None:
+            buf.append(line)
+            if html_end.search(line):
+                html_end = None
+                flush()
+            continue
+        if not line.strip():
+            flush()
+            continue
+        if m := _FENCE_OPEN.match(line):
+            # Fences interrupt paragraphs (CommonMark): start a new block.
+            flush()
+            fence = m.group(1)
+            buf.append(line)
+            continue
+        if not buf:
+            for open_re, close_re in _HTML_ATOMIC:
+                if open_re.match(line):
+                    buf.append(line)
+                    if close_re.search(line):  # opens and closes on one line
+                        flush()
+                    else:
+                        html_end = close_re
+                    break
+            else:
+                buf.append(line)
+            continue
+        buf.append(line)
+    flush()  # an unterminated fence/HTML block runs to EOF, kept as code/HTML
+    return chunks
+
+
+def _normalize(text: str) -> str:
+    """Whitespace-insensitive chunk identity: strip trailing whitespace
+    per line and collapse surrounding blank lines, so whitespace-only
+    source edits don't invalidate translations."""
+    return "\n".join(line.rstrip() for line in text.split("\n")).strip("\n")
+
+
+def chunk_key(text: str) -> bytes:
+    """Content key of a chunk: the first 9 bytes of the blake3 digest of
+    the normalized text (72 bits — a site's chunk count stays far below
+    the birthday bound), using the same hasher as app.py's file store.
+
+    Keys are bytes: kanta/msgspec base64-encode them at the JSON
+    persistence level, so the raw database dicts carry 12-char strings.
+    """
+    return blake3.blake3(_normalize(text).encode()).digest(9)
+
+
+def needs_translation(chunk: str) -> bool:
+    """False for chunks without prose: pure code fences, HTML blocks, and
+    anything that yields no translatable segments (pagerite/segments.py) —
+    container fences, lone {placeholders}, reference definitions.
+
+    These are inherently no-translate (docs/migrate.md): derived from the
+    chunk text itself, nothing is stored. Every language renders them from
+    the original chunk via the hybrid fallback.
+    """
+    if _FENCE_OPEN.match(chunk):
+        return False
+    first = chunk.split("\n", 1)[0]
+    if any(open_re.match(first) for open_re, _ in _HTML_ATOMIC):
+        return False
+    if _HTML_TAG.match(first):
+        return False
+    return has_prose(chunk)
+
+
+def join_chunks(chunks: list[str]) -> str:
+    """The stored page form of chunks: blocks joined by a blank line,
+    with a trailing newline ("" for no chunks)."""
+    return "\n\n".join(chunks) + "\n" if chunks else ""
+
+
+def store_chunks(store: dict[bytes, str], markdown: str) -> list[bytes]:
+    """Chunk ``markdown`` into ``store`` (hash -> text); return the ordered
+    hashes. Unchanged chunks keep their hashes, so only genuinely new text
+    lands in the kanta change diff. First writer wins: variants sharing a
+    key differ only in insignificant whitespace (see chunk_key)."""
+    hashes = []
+    for chunk in chunk_markdown(markdown):
+        key = chunk_key(chunk)
+        store.setdefault(key, chunk)
+        hashes.append(key)
+    return hashes

pagerite/data.py

@@ -2,8 +2,9 @@
 
 The site structure is a tree of Nodes. Every node is a menu label with a
 configurable title and slug (its key in the parent's ``children``); the
-URL path is the chain of slugs from the top level. ``content`` is the
+URL path is the chain of slugs from the top level. ``chunks`` is the
-node's Markdown page, or None for a pure category label, whose URL renders
+node's Markdown page as ordered content-hash keys into ``Data.chunks``
+(docs/migrate.md), or None for a pure category label, whose URL renders
 a placeholder page while nav links point at its first child.
 """
 
@@ -11,6 +12,16 @@ from datetime import UTC, datetime
 
 import msgspec
 
+from pagerite.chunks import join_chunks
+
+
+class Patch(msgspec.Struct, omit_defaults=True):
+    """One editing session's overrides on a translated view, applied
+    independently per hunk (docs/localization.md)."""
+
+    #: (search, replace) pairs on the served hybrid Markdown.
+    hunks: list[tuple[str, str]] = []
+
 
 class Node(msgspec.Struct, omit_defaults=True):
     """One item of the site hierarchy.
@@ -28,9 +39,21 @@ class Node(msgspec.Struct, omit_defaults=True):
 
     title: str = ""
     order: float = 0
-    #: Markdown source of the node's page; None = pure category label
+    #: Ordered chunk hashes (9-byte keys into ``Data.chunks``); None =
-    #: (its URL renders a placeholder page).
+    #: pure category label (its URL renders a placeholder page), a list
-    content: str | None = None
+    #: (possibly empty) = a page.
+    chunks: list[bytes] | None = None
+    #: Primary language of the article (BCP-47 base tag). "" = inherit
+    #: (nearest ancestor, front page last, site default "en" final).
+    language: str = ""
+    #: Chunk hashes the editor marked "do not translate" (always served
+    #: from the original). Presence-keys, value always True.
+    no_trans: dict[bytes, bool] = {}
+    #: Languages this article is available in (besides its primary
+    #: language). Presence-keys, value always True — the availability
+    #: index for rendering and language selection; maintained by whoever
+    #: writes translation data (docs/migrate.md).
+    langs: dict[str, bool] = {}
     #: Raw HTML for the header banner (img, styled div, canvas+script...),
     #: rendered after the banner design's artwork so author code always
     #: wins over the design's own styles.
@@ -78,6 +101,43 @@ class Data(msgspec.Struct):
     #: linked as <link rel="icon"> on every page. Empty = the build's
     #: /favicon.ico.
     favicon: str = ""
+    #: API keys gating the translator service WebSocket (/_translate/{key};
+    #: the external forward-auth does not cover that route): key -> display
+    #: name. Keys are 12 lowercase alphanumeric characters; the first is
+    #: generated at database bootstrap (see app.py), multiple keys are a
+    #: future reservation (e.g. managed via a web interface).
+    translate_keys: dict[str, str] = {}
+    #: Wanted target languages for the translator service (presence-keys,
+    #: value always True). The dispatcher offers jobs only in the
+    #: intersection of these and a connection's announced capabilities.
+    #: Bootstrapped to es+zh; edited in the editor shell's localization
+    #: tab (or via /_api/settings).
+    translate_langs: dict[str, bool] = {}
+    #: All original-language page text, content-addressed:
+    #: chunk_key (9 bytes; base64 at the JSON level) -> Markdown chunk.
+    #: Shared by every article.
+    chunks: dict[bytes, str] = {}
+    #: Machine translations: chunk hash -> lang -> translated Markdown
+    #: (a nested dict rather than tuple keys, which msgspec's JSON
+    #: serializer does not support). Also used for node titles (hash of
+    #: the title text).
+    trans: dict[bytes, dict[str, str]] = {}
+    #: User override patches per article and language:
+    #: f"{path}:{lang}" -> ordered patches (paths without leading slash).
+    patches: dict[str, list[Patch]] = {}
+
+
+def node_markdown(data: Data, node: Node) -> str | None:
+    """The node's original Markdown assembled from the chunk store.
+
+    None for category labels (chunks is None); an empty page gives "".
+    Hashes missing from the store (shouldn't happen) are skipped.
+    """
+    if node.chunks is None:
+        return None
+    return join_chunks(
+        [t for h in node.chunks if (t := data.chunks.get(h)) is not None]
+    )
 
 
 def prettify(slug: str) -> str:

pagerite/i18n.py

@@ -0,0 +1,276 @@
+"""Localization: language selection, translation storage and assembly.
+
+See docs/localization.md and docs/migrate.md. Each article's primary
+language is ``Node.language``, inherited down the hierarchy (front page =
+site default, ORIGINAL_LANGUAGE as the final fallback). The database holds
+the original language as content-addressed chunks (``Data.chunks``); per
+target language there are machine-translated fragments (``Data.trans``)
+and user override patches (``Data.patches``), assembled into the served
+Markdown at render time, with per-node fallback to the original titles.
+"""
+
+from collections.abc import Callable
+from difflib import SequenceMatcher
+
+import msgspec
+
+from pagerite.chunks import chunk_key, chunk_markdown, join_chunks
+from pagerite.data import Data, Node, Patch, resolve
+
+#: Final fallback for a page's primary language when neither it nor any
+#: ancestor (up to the front page) sets one (Node.language, "" = inherit).
+ORIGINAL_LANGUAGE = "en"
+
+#: Languages written right-to-left; pages served in one get dir="rtl" on
+#: <html> (views._layout).
+RTL_LANGUAGES = frozenset({"ar", "fa", "he", "ur"})
+
+
+def primary_lang(menu: dict[str, Node], path: str) -> str:
+    """The primary language of the article at ``path``: its own
+    ``language`` setting, else the nearest ancestor's (the front page
+    last — it doubles as the site default), falling back to
+    ORIGINAL_LANGUAGE. Missing tail segments (a page being created)
+    resolve to the nearest existing ancestor."""
+    p = path.strip("/")
+    while True:
+        chain = resolve(menu, p)
+        if chain:
+            for node in reversed(chain):
+                if node.language:
+                    return node.language
+        if not p:
+            return ORIGINAL_LANGUAGE
+        p = p.rpartition("/")[0]
+
+
+class Translation(msgspec.Struct, omit_defaults=True):
+    """Translated content for one page and language.
+
+    ``markdown`` is the translated page source in the same format as the
+    original (None = keep the original Markdown); ``titles`` maps node paths
+    (top-level slug, then slash-joined) to translated navigation titles, so a
+    partially translated tree still renders with per-node English fallback.
+    """
+
+    markdown: str | None = None
+    titles: dict[str, str] = {}
+
+
+def base_tag(tag: str) -> str:
+    """The lowercase base subtag of a language tag (fi-FI -> fi)."""
+    return tag.strip().lower().partition("-")[0]
+
+
+def parse_accept_language(header: str) -> list[str]:
+    """Accept-Language header as an ordered, deduped list of base subtags.
+
+    q-values are deliberately ignored: all known implementations send the
+    header in order of preference. Region tags normalize to their base
+    subtag (fi-FI -> fi); "*" and empties are dropped.
+    """
+    langs = []
+    for part in header.split(","):
+        tag = base_tag(part.split(";", 1)[0])
+        if tag and tag != "*" and tag not in langs:
+            langs.append(tag)
+    return langs
+
+
+def select_language(
+    query_lang: str | None,
+    accept_language: str | None,
+    is_available: Callable[[str], bool],
+    original: str = ORIGINAL_LANGUAGE,
+) -> str:
+    """The language to serve (see docs/localization.md).
+
+    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.
+    """
+    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):
+            return lang
+    return original
+
+
+def apply_patch(hybrid: str, patch: Patch) -> str:
+    """Apply one patch to the hybrid Markdown, best effort, each hunk
+    independently: a hunk whose search text no longer exists is stale and
+    silently skipped (docs/localization.md)."""
+    for search, replace in patch.hunks:
+        if search and search in hybrid:
+            hybrid = hybrid.replace(search, replace, 1)
+    return hybrid
+
+
+def make_patch(base: str, edited: str) -> Patch:
+    """The minimal diff of ``edited`` against the served ``base`` hybrid as
+    (search, replace) hunks at block granularity (docs/localization.md).
+
+    Blocks are the chunk_markdown split, so hunks align with translation
+    units and code fences never straddle a hunk boundary. Pure inserts
+    anchor on the preceding block (an empty search would never match);
+    inserts at the very top anchor on the first block. autojunk is off:
+    the diff must be deterministic, and pages are small.
+    """
+    a, b = chunk_markdown(base), chunk_markdown(edited)
+    hunks: list[tuple[str, str]] = []
+    for tag, i1, i2, j1, j2 in SequenceMatcher(None, a, b, autojunk=False).get_opcodes():
+        if tag == "equal":
+            continue
+        search = "\n\n".join(a[i1:i2])
+        replace = "\n\n".join(b[j1:j2])
+        if tag == "insert":
+            if i1:
+                search = a[i1 - 1]
+                replace = f"{a[i1 - 1]}\n\n{replace}"
+            elif a:
+                search = a[0]
+                replace = f"{replace}\n\n{a[0]}"
+            # else: base is empty — the hunk is inert (empty search is
+            # skipped by apply_patch); saving a translation of an empty
+            # page records nothing applicable.
+        hunks.append((search, replace))
+    return Patch(hunks=hunks)
+
+
+def hybrid_markdown(data: Data, node: Node, path: str, lang: str) -> str:
+    """The served Markdown for ``lang``: per chunk the translation from
+    ``Data.trans``, unless missing or marked no-translate (fallback to the
+    original chunk), then the language's user patches applied in order.
+
+    Not gated on ``node.langs`` (get_translation is the gated view): the
+    editor save path diffs against this even for a language's first patch.
+    """
+    hybrid = join_chunks([
+        data.chunks.get(h, "")
+        if h in node.no_trans
+        else data.trans.get(h, {}).get(lang) or data.chunks.get(h, "")
+        for h in node.chunks or []
+    ])
+    for patch in data.patches.get(f"{path}:{lang}", []):
+        hybrid = apply_patch(hybrid, patch)
+    return hybrid
+
+
+def add_patch(
+    data: Data, node: Node, path: str, lang: str, edited: str, base: str | None = None
+) -> bool:
+    """Record a translated-view edit as a user Patch: the minimal diff of
+    ``edited`` against ``base`` (default: the currently served hybrid),
+    appended to the language's patch list. Patches alone make the
+    translated version exist, so ``node.langs`` is set. Returns True when
+    a patch was stored. Pure data ops — the caller wraps in a transaction
+    and invalidates."""
+    patch = make_patch(base if base is not None else hybrid_markdown(data, node, path, lang), edited)
+    if not patch.hunks:
+        return False
+    data.patches.setdefault(f"{path}:{lang}", []).append(patch)
+    node.langs[lang] = True
+    return True
+
+
+def set_title_translation(data: Data, node: Node, lang: str, title: str) -> bool:
+    """Record (or drop) a per-language title override: a fragment in
+    ``Data.trans`` keyed by the ORIGINAL title's chunk hash — the same
+    storage machine title translations use, overriding them. Sending the
+    original's text drops the override. Returns True when anything changed.
+    Pure data ops — the caller wraps in a transaction and invalidates."""
+    key = chunk_key(node.title)
+    current = data.trans.get(key, {}).get(lang)
+    if title == node.title:
+        if current is None:
+            return False
+        del data.trans[key][lang]
+        return True
+    if current == title:
+        return False
+    data.trans.setdefault(key, {})[lang] = title
+    node.langs[lang] = True
+    return True
+
+
+def clear_translations(data: Data) -> None:
+    """Drop all machine translations (``Data.trans``) and rebuild the
+    availability index (``node.langs``) from the surviving user patches —
+    patches alone make a language exist on a page. Pure data ops — the
+    caller wraps in a transaction and invalidates."""
+    data.trans.clear()
+    patch_langs: dict[str, set[str]] = {}
+    for key in data.patches:
+        path, _, lang = key.rpartition(":")
+        patch_langs.setdefault(path, set()).add(lang)
+
+    def walk(nodes: dict[str, Node], prefix: str) -> None:
+        for slug, node in nodes.items():
+            path = f"{prefix}/{slug}" if prefix else slug
+            node.langs = {lang: True for lang in patch_langs.get(path, ())}
+            walk(node.children, path)
+
+    walk(data.menu, "")
+
+
+def title_map(data: Data, lang: str) -> dict[str, str]:
+    """path -> translated title for every node that has one.
+
+    Titles are chunks too (docs/migrate.md): keyed by the hash of the
+    title text, so editing a title invalidates its translations. Nodes
+    without an entry fall back to their original title in views — as do
+    nodes whose primary language IS ``lang`` (their original title already
+    is in that language).
+    """
+    titles = {}
+
+    def walk(nodes: dict[str, Node], prefix: str, inherited: str) -> None:
+        for slug, node in nodes.items():
+            path = f"{prefix}/{slug}" if prefix else slug
+            node_lang = node.language or inherited
+            if node.title and node_lang != lang:
+                t = data.trans.get(chunk_key(node.title), {}).get(lang)
+                if t:
+                    titles[path] = t
+            walk(node.children, path, node_lang)
+
+    walk(data.menu, "", ORIGINAL_LANGUAGE)
+    return titles
+
+
+def subtree_languages(node: Node) -> set[str]:
+    """Languages available anywhere in the node's subtree (the union of the
+    ``langs`` indexes). Category placeholder pages select their language
+    from this: they have no chunks of their own, but their title,
+    navigation and card text localize wherever a translation exists."""
+    langs = set(node.langs)
+    for child in node.children.values():
+        langs |= subtree_languages(child)
+    return langs
+
+
+def get_translation(data: Data, path: str, lang: str) -> Translation | None:
+    """The translation of the page at ``path`` for ``lang``, or None.
+
+    None when the page does not exist or is not available in ``lang``:
+    ``node.langs`` is the availability index (a stale key is benign — the
+    "translation" then just renders as the original).
+    """
+    chain = resolve(data.menu, path)
+    node = chain[-1] if chain else None
+    if node is None or node.chunks is None or lang not in node.langs:
+        return None
+    return Translation(
+        markdown=hybrid_markdown(data, node, path, lang),
+        titles=title_map(data, lang),
+    )

pagerite/markdown.py

@@ -447,39 +447,51 @@ def _heading_ids(state) -> None:
         wrap(i, token, f"#{hid}")
 
 
-md = (
+def make_md(*, verbatim: bool = False) -> MarkdownIt:
-    MarkdownIt(
+    """A fully configured parser. The module-level ``md`` (below) is the
-        "default",
+    render instance; ``verbatim=True`` builds the segmentation instance for
-        {
+    segments.py, where token text must stay byte-identical to the source so
-            "html": True,
+    prose spans can be spliced back by offset: no typographer (quotes and
-            "highlight": _highlight,
+    dashes stay straight), no tasklist label wrapping (the item text stays
-            "typographer": True,
+    a plain text token), and soft line breaks (wrapped prose merges into
-            "breaks": True,
+    one segment instead of splitting at hardbreaks)."""
-        },
+    parser = (
+        MarkdownIt(
+            "default",
+            {
+                "html": True,
+                "highlight": _highlight,
+                "typographer": not verbatim,
+                "breaks": not verbatim,
+            },
+        )
+        .use(attrs_plugin)
+        .use(admon_plugin)
+        .use(container_plugin, "block", validate=_container_validate)
+        .use(footnote_plugin)
+        .use(deflist_plugin)
+        # label wrapping (render) puts the item text inside the checkbox
+        # <label> html_inline; without it the text stays a plain token.
+        .use(tasklists_plugin, enabled=True, label=not verbatim, label_after=not verbatim)
+        .use(gfm_autolink_plugin)
+        .use(sub_plugin)
+        .use(superscript_plugin)
     )
-    .use(attrs_plugin)
+    parser.add_render_rule("image", _image_rule)
-    .use(admon_plugin)
+    parser.add_render_rule("fence", _fence_rule)
-    .use(container_plugin, "block", validate=_container_validate)
+    # GFM alerts (`> [!NOTE]` etc.), built into markdown-it-py's blockquote rule.
-    .use(footnote_plugin)
+    parser.options["alerts"] = True
-    .use(deflist_plugin)
+    # Block attrs must be stripped before the typographer curlifies their quotes.
-    # label_after: the item text is wrapped in <label for> after the
+    parser.core.ruler.before("replacements", "block_attrs", _block_attrs)
-    # checkbox, so clicking the text toggles it.
+    parser.core.ruler.push("container_attrs", _container_attrs)
-    .use(tasklists_plugin, enabled=True, label=True, label_after=True)
+    parser.core.ruler.push("unwrap_lone_figures", _unwrap_lone_figures)
-    .use(gfm_autolink_plugin)
+    parser.core.ruler.push("tag_task_checkboxes", _tag_task_checkboxes)
-    .use(sub_plugin)
+    parser.core.ruler.push("shorten_autolinks", _shorten_autolinks)
-    .use(superscript_plugin)
+    parser.core.ruler.push("heading_ids", _heading_ids)
-)
+    return parser
-md.add_render_rule("image", _image_rule)
+
-md.add_render_rule("fence", _fence_rule)
+
-# GFM alerts (`> [!NOTE]` etc.), built into markdown-it-py's blockquote rule.
+md = make_md()
-md.options["alerts"] = True
-# Block attrs must be stripped before the typographer curlifies their quotes.
-md.core.ruler.before("replacements", "block_attrs", _block_attrs)
-md.core.ruler.push("container_attrs", _container_attrs)
-md.core.ruler.push("unwrap_lone_figures", _unwrap_lone_figures)
-md.core.ruler.push("tag_task_checkboxes", _tag_task_checkboxes)
-md.core.ruler.push("shorten_autolinks", _shorten_autolinks)
-md.core.ruler.push("heading_ids", _heading_ids)
 
 
 # Text-length thresholds (visible characters, code blocks excluded) for the

pagerite/migrations.py

@@ -15,6 +15,7 @@ import base64
 import re
 from pathlib import Path
 
+from pagerite.chunks import chunk_key, chunk_markdown
 from pagerite.data import prettify
 
 
@@ -131,3 +132,40 @@ def migrate_v2(d: dict) -> None:
     walk(d.get("menu") or {})
     d.pop("version", None)
     _backfill_derivatives()
+
+
+def migrate_v3(d: dict) -> None:
+    """Content-addressed chunk storage (docs/migrate.md): split every
+    node's string ``content`` into block chunks stored once per content
+    hash in the new ``chunks`` store; the node keeps the ordered hash
+    list as ``chunks`` (an absent content stays absent, i.e. None = a
+    pure category label; "" chunks to an empty list = an empty page).
+
+    Chunk keys are 9-byte blake3 digests; at this raw JSON level they are
+    base64 strings (decoding into the structs restores ``bytes`` keys).
+    ``trans``/``patches`` start empty; the translator job fills them and
+    maintains the ``langs`` index as translations land. ``language``,
+    ``no_trans`` and ``langs`` need nothing — struct defaults cover them.
+    """
+    store = d.setdefault("chunks", {})
+    d.setdefault("trans", {})
+    patches = d.setdefault("patches", {})
+
+    def walk(nodes: dict) -> None:
+        for node in nodes.values():
+            content = node.pop("content", None)
+            if isinstance(content, str):
+                hashes = []
+                for chunk in chunk_markdown(content):
+                    key = base64.b64encode(chunk_key(chunk)).decode()
+                    store.setdefault(key, chunk)
+                    hashes.append(key)
+                node["chunks"] = hashes
+            walk(node.get("children") or {})
+
+    walk(d.get("menu") or {})
+    # Article paths never carry a leading slash in keys (docs/migrate.md).
+    # The only path-keyed store starts empty here, so this is defensive
+    # for databases that went through a downgrade/upgrade cycle.
+    for key in [k for k in patches if k.startswith("/")]:
+        patches[key.lstrip("/")] = patches.pop(key)

pagerite/seed.py

@@ -114,7 +114,7 @@ Headings from `##` down organize the article. On pages with at least three of th
 > and a blank `>` line starts a new paragraph.
 
 > [!NOTE]
-> GitHub-style alerts — NOTE, TIP, IMPORTANT, WARNING, CAUTION —
+> GitHub-style alerts — `NOTE`, `TIP`, `IMPORTANT`, `WARNING`, `CAUTION` —
 > render as callout boxes.
 ```
 
@@ -122,7 +122,7 @@ Headings from `##` down organize the article. On pages with at least three of th
 > and a blank `>` line starts a new paragraph.
 
 > [!NOTE]
-> GitHub-style alerts — NOTE, TIP, IMPORTANT, WARNING, CAUTION —
+> GitHub-style alerts — `NOTE`, `TIP`, `IMPORTANT`, `WARNING`, `CAUTION` —
 > render as callout boxes.
 
 ## Code

pagerite/segments.py

@@ -0,0 +1,506 @@
+"""Segmented translation round trip: prose out, translations back in.
+
+A translator model mangles anything that is not plain prose — sentinels get
+renumbered, ``![`` becomes sentence punctuation, stray ``<br>`` tags appear.
+So the model is never shown any of it: a fragment (a Markdown chunk or a
+node title) is parsed with the project's own markdown-it setup
+(``markdown.make_md(verbatim=True)`` — extensions included, so container,
+attrs, footnote and tasklist syntax never leaks into text tokens) and split
+into **prose segments**: the merged text runs, plus image alt texts and
+link/image titles. Only those cross the wire, as a plain list of strings
+(Job.texts / Result.texts in translate.py) — accompanied, per segment, by
+a CONTEXT (Job.contexts): a segment carved out of a larger block (a link
+text, a partial run) carries the block's plain text, so the model sees the
+sentence it lives in; whole-block segments are self-contextualizing and
+carry "". Title fragments carry the article's opening instead (assigned by
+the dispatcher from TransItem.context).
+
+Reassembly is server-side offset splicing, not text the model produced:
+each segment's source span was located at dispatch (``split``), and
+``join`` swaps in the translations. Markup therefore cannot break — it
+never left the server. A returned segment must still be pure prose itself
+(the model could inject markup INTO a segment); anything else — count
+mismatch, empty segment, markup tokens — rejects the whole result and the
+fragment stays pending.
+
+A block of plain text, prose links and paired text formatting
+(strong/em/s) crosses as ONE segment — link texts and formatted text
+inline, in sentence context, with the Markdown stripped (the model
+mangles it: sentinels get renumbered, ``**`` gets dropped or moved) —
+because a label translated apart from its sentence comes back
+grammatically incompatible with it (case government, particles, word
+order). ``join`` re-inserts the link/formatting markdown into the
+translated block at weight-mapped positions (``_place_marks``): no
+markers on the wire, the boundaries are found by text processing alone —
+each mark's word/CJK-char weight ratio in the source applied to the
+translation's units. Placement is approximate and CJK-safe: better a
+coherent sentence with a slightly shifted link than separately translated
+snippets that don't fit together. Blocks with any other inline markup
+(code, images, HTML) still split into runs at those boundaries.
+
+Locating is best effort: a run that is not a verbatim source substring
+(entity-decoded text, backslash escapes) is skipped — it simply stays in
+the original language. So is any piece containing "<": "<" is the
+prose/markup boundary on the wire — translators cut their output there,
+so such pieces could not survive the round trip.
+"""
+
+import re
+from typing import NamedTuple
+
+from pagerite.markdown import make_md
+
+#: The segmentation parser: the project's own markdown-it, verbatim flavor
+#: (see make_md). Never used for rendering.
+_MD = make_md(verbatim=True)
+
+#: Any Unicode letter (digits and underscore are not prose).
+_LETTER = re.compile(r"[^\W\d_]")
+
+#: A GFM alert marker ([!NOTE] etc.) at the start of a blockquote's first
+#: paragraph: syntax, not prose — stripped from the first segment.
+_ALERT = re.compile(r"^\[![A-Za-z]+\][ \t]*")
+
+#: Any {...} span: {placeholders} and attrs that ended up inside prose
+#: (inline attrs are consumed by the parser; a lone {dates} is not).
+_BRACES = re.compile(r"\{[^{}\n]*\}")
+
+#: A link's tail after its text: "](dest)", "](dest \"title\")", "][ref]",
+#: "[]" or a bare "]" (shortcut reference); the destination may nest one
+#: level of parens. Best effort — a mis-scan fails the span-reconstruction
+#: check in _linked_block and the block falls back to per-run segments.
+_LINK_TAIL = re.compile(r"\](?:\((?:\\.|[^()\\]|\([^()]*\))*\)|\[(?:\\.|[^\]])*\])?")
+
+#: Weight units for mapping link boundaries from source to translation:
+#: a word counts 1 and so does every single CJK ideograph (kana runs count
+#: as one) — CJK has no spaces to count words by. Punctuation and
+#: whitespace count nothing, so mapped boundaries always land on unit
+#: starts.
+_UNIT = re.compile(
+    r"[\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff]"  # CJK ideographs: one unit each
+    r"|[\u3040-\u309f\u30a0-\u30ff]+"  # kana runs: one unit each
+    r"|\w+"  # anything else word-like (Latin, Cyrillic, Hangul, digits)
+)
+
+
+class Mark(NamedTuple):
+    """One inline link or paired formatting (strong/em/s) inside a
+    whole-block segment: the source weight (unit count, see _UNIT) at the
+    inner text's start and end for mapping the boundaries into the
+    translation, the exact source syntax around the text ("[" / "](url)",
+    "**" / "**", ...) and the source text itself, used as the fallback when
+    the mapped slice comes out empty (better an untranslated label than a
+    broken "[](url)")."""
+
+    w_start: int
+    w_end: int
+    pre: str
+    post: str
+    inner: str
+
+
+class Span(NamedTuple):
+    """A segment's source span in the fragment: offsets for splicing the
+    translation back, the segment's source weight and the links to
+    re-insert into its translation (empty = a plain prose segment)."""
+
+    start: int
+    end: int
+    weight: int
+    marks: list[Mark]
+
+
+def _weight(text: str) -> int:
+    """The text's weight in translation-mapping units (see _UNIT)."""
+    return len(_UNIT.findall(text))
+
+
+def _unit_bounds(text: str) -> list[int]:
+    """Unit-start offsets of the text, plus its end as the last bound."""
+    return [m.start() for m in _UNIT.finditer(text)] + [len(text)]
+
+
+def _runs(children: list) -> list[str]:
+    """Prose runs of an inline token's children, in order.
+
+    Text tokens merge across soft breaks into one run; every markup token
+    (emphasis, links, code, images, HTML, footnote refs, hard breaks) is a
+    run boundary. Link and image *text* is prose; autolink text (the URL
+    itself) is not. Image tokens contribute their alt-text children and
+    their title attribute.
+    """
+    runs: list[str] = []
+    cur: list[str] = []
+
+    def flush() -> None:
+        if cur:
+            s = "".join(cur)
+            cur.clear()
+            if _LETTER.search(s):
+                runs.append(s)
+
+    skip = 0  # inside an autolink (its text is the URL — not prose)
+    for t in children:
+        if skip:
+            if t.type == "link_close":
+                skip -= 1
+            continue
+        if t.type == "text":
+            cur.append(t.content)
+        elif t.type == "softbreak":
+            cur.append("\n")
+        elif t.type == "link_open" and t.markup == "autolink":
+            flush()
+            skip = 1
+        elif t.type == "image":
+            flush()
+            if t.children:
+                runs.extend(_runs(t.children))
+            title = t.attrGet("title")
+            if title and _LETTER.search(title):
+                runs.append(title)
+        else:
+            flush()
+            if t.children:
+                runs.extend(_runs(t.children))
+    flush()
+    return runs
+
+
+def _block_text(children: list) -> str:
+    """The block's text as a reader sees it: text runs and link texts
+    merged (softbreaks as newlines); image alts, autolink URLs, code and
+    other markup content excluded. Used as the translation CONTEXT for
+    segments carved out of the block (link texts, partial runs): a lone
+    word translates differently than the same word inside its sentence."""
+    parts: list[str] = []
+    skip = 0  # inside an autolink (its text is the URL)
+    for t in children:
+        if skip:
+            if t.type == "link_close":
+                skip -= 1
+            continue
+        if t.type == "text":
+            parts.append(t.content)
+        elif t.type == "softbreak":
+            parts.append("\n")
+        elif t.type == "link_open" and t.markup == "autolink":
+            skip = 1
+        elif t.type == "image":
+            continue
+        elif t.children:
+            parts.append(_block_text(t.children))
+    return "".join(parts)
+
+
+def _locate(source: str, needle: str, cursor: int) -> int:
+    """The needle's offset in source at/after cursor, -1 when absent.
+
+    An occurrence preceded by a backslash is an escaped character, not the
+    token's source: keep looking (failing that, the run is skipped — it
+    stays in the original language).
+    """
+    pos = source.find(needle, cursor)
+    while pos > 0 and source[pos - 1] == "\\":
+        pos = source.find(needle, pos + 1)
+    return pos
+
+
+def _linked_block(
+    source: str, kids: list, cursor: int, strip_alert: bool
+) -> tuple[Span, str] | None:
+    """A whole-block segment for an inline of plain text, prose links and
+    paired text formatting (strong/em/s): (Span, wire text) with the links
+    and formatting as marks, or None when the block has any other shape —
+    the caller then falls back to per-run segments.
+
+    The block crosses the wire as one prose piece, link texts and formatted
+    text inline (the model is never shown any Markdown — it mangles it),
+    so a translation that inflects or reorders around them stays coherent;
+    join re-inserts the link/formatting syntax at weight-mapped positions.
+    The source span is located piece by piece and verified by
+    reconstruction; anything not byte-exact (entities, escapes, an odd
+    link tail) bails to the fallback.
+    """
+    pieces: list[tuple[str, str]] = []  # (text, mark): "" plain, "link", else the delimiter
+    buf: list[str] = []  # current plain piece
+    link: list[str] | None = None  # current mark's text parts
+    mark_kind = ""  # the current mark's opener ("link" or the delimiter)
+    for tok in kids:
+        if tok.type in ("link_open", "strong_open", "em_open", "s_open"):
+            if link is not None or tok.markup == "autolink":
+                return None
+            if buf:
+                pieces.append(("".join(buf), ""))
+                buf = []
+            link = []
+            mark_kind = "link" if tok.type == "link_open" else tok.markup
+        elif tok.type in ("link_close", "strong_close", "em_close", "s_close"):
+            if link is None or ("link" if tok.type == "link_close" else tok.markup) != mark_kind:
+                return None
+            inner = "".join(link)
+            if not _LETTER.search(inner):
+                return None
+            pieces.append((inner, mark_kind))
+            link = None
+        elif tok.type in ("text", "softbreak"):
+            (link if link is not None else buf).append(
+                "\n" if tok.type == "softbreak" else tok.content
+            )
+        else:  # code, images, HTML, footnote refs: run boundaries
+            return None
+    if link is not None:
+        return None  # unbalanced (the parser should not do this)
+    if buf:
+        pieces.append(("".join(buf), ""))
+    if not any(mark for _, mark in pieces):
+        return None
+    if strip_alert and pieces and not pieces[0][1]:
+        # A GFM alert marker leading the blockquote's first paragraph is
+        # syntax; strip it from the wire text (it stays out of the span).
+        first = _ALERT.sub("", pieces[0][0], count=1)
+        if first.strip():
+            pieces[0] = (first, "")
+        else:
+            pieces.pop(0)
+            if not pieces:
+                return None
+    raw = "".join(text for text, _ in pieces)
+    lead = len(raw) - len(raw.lstrip())
+    wire = raw.strip()
+    if not _LETTER.search(wire) or "<" in wire or _BRACES.search(wire):
+        return None
+    # Locate each piece verbatim, in order; the source slices between the
+    # located pieces are then the link syntax, exact by construction.
+    located: list[tuple[int, int]] = []
+    pos = cursor
+    for text_, _ in pieces:
+        at = _locate(source, text_, pos)
+        if at == -1:
+            return None
+        located.append((at, at + len(text_)))
+        pos = at + len(text_)
+    span_start, span_end = located[0][0], located[-1][1]
+    marks: list[Mark] = []
+    offset = 0  # raw (pre-strip) plain-text offset of the current piece
+    for i, ((text_, kind), (s, e)) in enumerate(zip(pieces, located)):
+        if not kind:
+            offset += len(text_)
+            continue
+        # The syntax around the text: the gap between pieces goes to the
+        # mark on its left as post (so between two marks the whole "](u)["
+        # or "**" is the first's post); a block-leading mark takes its
+        # opener in front of its text ("[" or the delimiter), a
+        # block-trailing one the scanned link tail or the close delimiter.
+        if i == 0:
+            opener = "[" if kind == "link" else kind
+            if s < len(opener) or source[s - len(opener):s] != opener:
+                return None
+            pre, span_start = opener, s - len(opener)
+        elif pieces[i - 1][1]:
+            pre = ""  # the previous mark's post covers the whole gap
+        else:
+            pre = source[located[i - 1][1]:s]
+        if i + 1 < len(pieces):
+            post = source[e:located[i + 1][0]]
+        elif kind == "link":
+            m = _LINK_TAIL.match(source, e)
+            if m is None:
+                return None
+            post, span_end = m.group(), m.end()
+        else:
+            if source[e:e + len(kind)] != kind:
+                return None
+            post, span_end = kind, e + len(kind)
+        ps = min(max(offset - lead, 0), len(wire))
+        pe = min(max(offset + len(text_) - lead, 0), len(wire))
+        if pe <= ps:
+            return None
+        marks.append(Mark(_weight(wire[:ps]), _weight(wire[:pe]), pre, post, wire[ps:pe]))
+        offset += len(text_)
+    # Verify: the marks must reconstruct the source span exactly (the only
+    # real risk is the guessed tail of a trailing link).
+    rec: list[str] = []
+    mi = 0
+    for text_, kind in pieces:
+        if kind:
+            mark = marks[mi]
+            mi += 1
+            rec += [mark.pre, text_, mark.post]
+        else:
+            rec.append(text_)
+    if source[span_start:span_end] != "".join(rec):
+        return None
+    return Span(span_start, span_end, _weight(wire), marks), wire
+
+
+def split(text: str) -> tuple[list[Span], list[str], list[str]]:
+    """Split a fragment into (spans, segments, contexts): prose segments to
+    translate, their source spans in ``text`` for splicing the translations
+    back, and per-segment translation context.
+
+    A block of plain text, prose links and paired formatting (strong/em/s)
+    becomes ONE segment (link/formatted text inline, in context, Markdown
+    stripped), the links and formatting recorded as marks on its Span for
+    weight-mapped re-insertion in join. Other blocks split into text runs
+    at markup boundaries; runs containing {...} spans are carved further —
+    the braces stay out of the wire text. A run that cannot be located
+    verbatim in the source contributes no segment. A segment's context is
+    its block's plain text when the segment was carved OUT of a larger
+    block (a partial run); a segment that IS the whole block (a plain
+    paragraph, a heading, a linked block) is self-contextualizing and gets
+    "".
+    """
+    spans: list[Span] = []
+    segments: list[str] = []
+    contexts: list[str] = []
+    cursor = 0
+    blockquote_fresh = 0  # blockquote depth whose first inline is upcoming
+
+    def emit(run: str, at: int, ctx: str) -> None:
+        """Carve {...} spans out of the located run; emit the prose pieces,
+        stripped — padding whitespace stays in the template, off the wire.
+        Pieces containing "<" are never emitted: translators cut output at
+        the first "<" (the prose/markup boundary, scripts/translator.py),
+        so such a piece could not survive the round trip — it stays in the
+        original language instead."""
+        pieces = []
+        pos = 0
+        for m in _BRACES.finditer(run):
+            pieces.append((pos, m.start()))
+            pos = m.end()
+        pieces.append((pos, len(run)))
+        for p0, p1 in pieces:
+            raw = run[p0:p1]
+            piece = raw.strip()
+            if _LETTER.search(piece) and "<" not in piece:
+                start = at + p0 + (len(raw) - len(raw.lstrip()))
+                spans.append(Span(start, start + len(piece), 0, []))
+                segments.append(piece)
+                contexts.append(ctx)
+
+    tokens = _MD.parse(text)
+    for t in tokens:
+        if t.type == "blockquote_open":
+            blockquote_fresh += 1
+        elif t.type == "blockquote_close":
+            blockquote_fresh -= 1
+        elif t.type == "inline":
+            kids = t.children or []
+            # An alert marker ([!NOTE]) leading a blockquote's first
+            # paragraph is syntax; both paths strip it. (Only the first
+            # inline of the blockquote can carry it — the flag clears on
+            # the first inline seen.)
+            alert = bool(blockquote_fresh)
+            blockquote_fresh = 0
+            linked = _linked_block(text, kids, cursor, strip_alert=alert)
+            if linked is not None:
+                span, wire = linked
+                spans.append(span)
+                segments.append(wire)
+                contexts.append("")
+                cursor = span.end
+                continue
+            runs = _runs(kids)
+            block = _block_text(kids).strip()
+            if alert and runs:
+                run = _ALERT.sub("", runs[0], count=1)
+                if _LETTER.search(run):
+                    runs[0] = run
+                else:
+                    runs.pop(0)
+            for run in runs:
+                ctx = block if block and run.strip() != block else ""
+                pos = _locate(text, run, cursor)
+                if pos != -1:
+                    emit(run, pos, ctx)
+                    cursor = pos + len(run)
+                elif "\n" in run:
+                    # Indented continuation lines etc. break the verbatim
+                    # match: locate each line separately instead.
+                    for part in run.split("\n"):
+                        if not _LETTER.search(part):
+                            continue
+                        pos = _locate(text, part, cursor)
+                        if pos != -1:
+                            emit(part, pos, ctx)
+                            cursor = pos + len(part)
+    return spans, segments, contexts
+
+
+def pure_prose(text: str) -> bool:
+    """True when the text parses as nothing but prose (text and softbreak
+    tokens) — the acceptance test for a translated segment: the model may
+    not return markup of its own (a `<br>` here would splice live HTML into
+    the fragment)."""
+    children = _MD.parseInline(text)[0].children or []
+    return all(t.type in ("text", "softbreak") for t in children)
+
+
+def _place_marks(translation: str, weight: int, marks: list[Mark]) -> str | None:
+    """Re-insert a whole-block segment's links into its translation.
+
+    Each mark's source weight ratio (units before the boundary / total) is
+    applied to the translation's units — a rough bilingual alignment that
+    needs no markers in the wire text (sentinels never survived the model)
+    and works for CJK, where exact placement matters less. A boundary
+    landing empty degrades to the source link text: better an untranslated
+    label than a broken "[](url)". None when the translation has no units
+    to map onto (the caller rejects the result).
+    """
+    bounds = _unit_bounds(translation)
+    total = len(bounds) - 1
+    if not total or not weight:
+        return None
+    out: list[str] = []
+    cur = 0
+    for mark in marks:
+        x1 = bounds[min(round(mark.w_start / weight * total), total)]
+        x2 = bounds[min(round(mark.w_end / weight * total), total)]
+        x1 = max(x1, cur)  # monotonic: never before the previous mark's end
+        x2 = max(x2, x1)
+        # The slice ends at the next unit's start, so the whitespace and
+        # punctuation before that unit is inside it — but it belongs
+        # BETWEEN the mark and the following word, not in the inner text:
+        # end the inner text at its last unit and leave the rest for the
+        # following slice (the cursor stays ahead of it).
+        raw = translation[x1:x2]
+        units = list(_UNIT.finditer(raw))
+        inner_end = x1 + units[-1].end() if units else x1
+        inner = translation[x1:inner_end].strip() or mark.inner
+        out += [translation[cur:x1], mark.pre, inner, mark.post]
+        cur = inner_end
+    out.append(translation[cur:])
+    return "".join(out)
+
+
+def join(original: str, spans: list[Span], texts: list[str]) -> str | None:
+    """Splice translated segments back into the original fragment; None on
+    any validation failure (count mismatch, empty or non-prose segment) —
+    the caller drops the result and the fragment stays pending. Segments
+    with marks (a block that crossed as one piece) get their links
+    re-inserted at weight-mapped positions after the prose check."""
+    if len(texts) != len(spans):
+        return None
+    out: list[str] = []
+    cursor = 0
+    for span, translation in zip(spans, texts):
+        if not translation.strip() or not pure_prose(translation):
+            return None
+        if span.marks:
+            translation = _place_marks(translation, span.weight, span.marks)
+            if translation is None:
+                return None
+        out.append(original[cursor:span.start])
+        out.append(translation)
+        cursor = span.end
+    out.append(original[cursor:])
+    return "".join(out)
+
+
+def has_prose(text: str) -> bool:
+    """True when the fragment yields at least one translatable segment.
+    Chunks that are all markup, code, placeholders or reference definitions
+    have no business reaching the model: every language renders them from
+    the original chunk."""
+    return bool(split(text)[1])

pagerite/translate.py

@@ -0,0 +1,389 @@
+"""Translator service protocol, dispatcher and its transport-independent core.
+
+The external machine-translation service connects over WebSocket
+(``/_translate/<key>``, the route itself is in app.py) and exchanges JSON
+frames decoded into the tagged msgspec structs below (``bytes`` fields ride
+as base64 — no manual encoding anywhere). This module holds everything
+else: the message structs, the connected-client dispatcher (``Dispatcher``
+— one job at a time per connection, wanted ∩ capable language matching,
+requeue on disconnect), which fragments are pending for a language
+(``pending_items``), storing a result (``store_results``) and the startup
+URL listing (``log_service_urls``).
+
+Fragments cross the wire as **prose segments**: the model only ever
+receives plain text runs (Job.texts) plus per-segment context surrounds
+(Job.contexts) and returns their translations (Result.texts, same order);
+markup never leaves the server — reassembly is offset splicing
+(``pagerite/segments.py``).
+"""
+
+import asyncio
+import logging
+import os
+
+import msgspec
+from fastapi import WebSocket, WebSocketDisconnect
+from kanta import Kanta
+
+from pagerite import i18n
+from pagerite.__main__ import DEFAULT_PORT
+from pagerite.chunks import chunk_key, needs_translation
+from pagerite.data import Data, Node, sorted_nodes
+from pagerite.segments import Span, join, split
+
+logger = logging.getLogger(__name__)
+
+
+class Hello(msgspec.Struct, tag="hello"):
+    """Client greeting on connect: the language codes its model CAN produce
+    (capabilities). The server offers jobs only in the intersection with
+    the wanted target languages (``Data.translate_langs``)."""
+
+    langs: list[str]
+
+
+class TransItem(msgspec.Struct):
+    """One fragment to translate: original Markdown (or a node title)."""
+
+    key: bytes  #: 9-byte chunk hash (base64 in the JSON frame)
+    text: str
+    path: str  #: article it came from ("" = front page), no leading slash
+    kind: str  #: "chunk" | "title"
+    #: Title jobs only: the article's opening prose, so the model sees the
+    #: title as a heading in context, not a lone sentence.
+    context: str = ""
+
+
+class Job(msgspec.Struct, tag="job"):
+    """Server push: ONE fragment to translate.
+
+    Exactly one job is in flight per connection — the next is sent only
+    after this one's Result. Clients wanting parallelism open multiple
+    connections."""
+
+    lang: str
+    key: bytes  #: 9-byte chunk hash (base64 in the JSON frame)
+    #: The fragment's prose segments (pagerite/segments.py): plain text
+    #: runs only — no markup, URLs, code or placeholders ever cross the
+    #: wire. Translate each element independently.
+    texts: list[str]
+    path: str  #: article it came from ("" = front page), no leading slash
+    kind: str  #: "chunk" | "title"
+    #: Per segment (parallel to texts; "" = none): the surround to
+    #: translate it in — a carved-out segment (link text, partial run)
+    #: carries its block's plain text, a title the article's opening.
+    #: Reference client behavior (scripts/translator.py): translate
+    #: segment+context together, keep the segment's part (its own line /
+    #: paragraph); fall back to the segment alone when the output holds no
+    #: separator. Contexts are not part of the result.
+    contexts: list[str] = msgspec.field(default_factory=list)
+
+
+class TransResult(msgspec.Struct):
+    """One translated fragment (storage level, see store_results)."""
+
+    key: bytes
+    text: str
+
+
+class Result(msgspec.Struct, tag="result"):
+    """Client reply: the translation of the connection's current Job
+    (must match its lang and key exactly)."""
+
+    lang: str
+    key: bytes
+    #: The job's segments, translated, same order and count. Each must be
+    #: pure prose — the server rejects the result otherwise.
+    texts: list[str]
+
+
+#: Union of the client -> server frames (the "type" tag selects).
+ClientMsg = Hello | Result
+
+
+def pending_items(data: Data, lang: str) -> list[TransItem]:
+    """Fragments of the site still untranslated for ``lang``, deduped by key.
+
+    Every page node (published or not) contributes its title and each chunk
+    that needs translation (``needs_translation``), is not editor-flagged
+    no-translate (``node.no_trans``) and has no ``trans`` entry for ``lang``
+    yet. Content-addressed text (shared paragraphs, repeated titles) appears
+    once, under the first page in menu order that has it.
+    """
+    items: list[TransItem] = []
+    seen: set[bytes] = set()
+
+    def emit(key: bytes, text: str, path: str, kind: str, context: str = "") -> None:
+        if key in seen or lang in data.trans.get(key, {}):
+            return
+        seen.add(key)
+        items.append(TransItem(key=key, text=text, path=path, kind=kind, context=context))
+
+    def opening(node: Node) -> str:
+        """The article's opening prose (first segment, capped): the title
+        job's context — a lone word like "About" reads as a heading on top
+        of an article, not as a sentence. Empty when there's no prose."""
+        for h in node.chunks or ():
+            text = data.chunks.get(h)
+            if text and (segs := split(text)[1]):
+                return segs[0][:400]
+        return ""
+
+    def walk(nodes: dict[str, Node], prefix: str, inherited: str) -> None:
+        for slug, node in sorted_nodes(nodes):
+            path = f"{prefix}/{slug}" if prefix else slug
+            # An article whose primary language IS the target needs no
+            # translation into it — skip its title and chunks entirely.
+            node_lang = node.language or inherited
+            if node.chunks is not None and node_lang != lang:
+                if node.title:
+                    emit(chunk_key(node.title), node.title, path, "title",
+                         context=opening(node))
+                for h in node.chunks:
+                    text = data.chunks.get(h)
+                    if (
+                        text is not None
+                        and h not in node.no_trans
+                        and needs_translation(text)
+                    ):
+                        emit(h, text, path, "chunk")
+            walk(node.children, path, node_lang)
+
+    walk(data.menu, "", i18n.ORIGINAL_LANGUAGE)
+    return items
+
+
+def store_results(data: Data, lang: str, items: list[TransResult]) -> list[str]:
+    """Store machine translations for ``lang``; return the paths of the
+    articles that gained at least one entry.
+
+    Pure data operations: the caller wraps this in a kanta transaction and
+    invalidates pages. Unknown keys are stored anyway (unreferenced hashes
+    are never read, and the content may simply have moved on since the job
+    was pushed); re-storing an existing key overwrites, last wins. Every
+    article that gained an entry gets ``node.langs[lang]`` set (the
+    availability index, docs/migrate.md) — because chunks are
+    content-addressed, that includes pages merely sharing a fragment.
+    """
+    stored = {item.key for item in items}
+    for item in items:
+        data.trans.setdefault(item.key, {})[lang] = item.text
+    pages: list[str] = []
+
+    def walk(nodes: dict[str, Node], prefix: str, inherited: str) -> None:
+        for slug, node in sorted_nodes(nodes):
+            path = f"{prefix}/{slug}" if prefix else slug
+            node_lang = node.language or inherited
+            if node.chunks is not None and node_lang != lang:
+                keys = set(node.chunks)
+                if node.title:
+                    keys.add(chunk_key(node.title))
+                if keys & stored:
+                    node.langs[lang] = True
+                    pages.append(path)
+            walk(node.children, path, node_lang)
+
+    walk(data.menu, "", i18n.ORIGINAL_LANGUAGE)
+    return pages
+
+
+def log_service_urls(keys: dict[str, str], hostname: str) -> None:
+    """Log the translator WebSocket URL(s) for the admin at startup, one
+    line: "…/_translate/<key> (<name>)", comma-joined — ws:// with the port
+    on localhost, wss:// without a port on a public hostname (the port comes
+    from the CLI via the PAGERITE_PORT env). No-op without keys."""
+    if not keys:
+        return
+    port = os.getenv("PAGERITE_PORT", DEFAULT_PORT)
+    base = f"ws://localhost:{port}" if hostname == "localhost" else f"wss://{hostname}"
+    urls = ", ".join(f"{base}/_translate/{key} ({name})" for key, name in keys.items())
+    logger.info("Translator %s", urls)
+
+
+class _Connection:
+    """One connected translator socket: the language codes it announced as
+    capabilities (Hello) and the (lang, chunk-key) job currently in flight
+    on it, with the segment spans to splice its Result into
+    (pagerite/segments.py) — one at a time, the next is sent only after its
+    Result.
+
+    Per-connection only: in-flight lives solely here, so on disconnect the
+    item simply becomes pending again and is re-offered to any free capable
+    connection."""
+
+    def __init__(self, capable: set[str]) -> None:
+        self.capable = capable
+        self.inflight: tuple[str, bytes] | None = None
+        #: Source spans of the in-flight job's segments (splice offsets
+        #: and link marks).
+        self.spans: list[Span] = []
+        self.original: str = ""  # its full source text (for the splicing)
+
+
+class Dispatcher:
+    """The translator dispatcher: connected client sockets and the job
+    pipeline (docs/localization.md).
+
+    One single-item job at a time per connection, offered in the
+    intersection of the wanted languages (``Data.translate_langs``) and the
+    connection's announced capabilities. Pending work is derived from the
+    ``trans`` store (``pending_items``) minus the items in flight on any
+    connection, so a dropped connection's in-flight item is simply
+    re-offered. Results are matched to content by chunk key alone. A
+    (lang, key) whose Result fails segment validation is skipped for the
+    rest of the run — generation is near-deterministic, so an immediate
+    retry would just re-fail.
+    """
+
+    def __init__(self, data: Data, db: Kanta, invalidate) -> None:
+        self.data = data
+        self.db = db
+        #: Sync content-change hook (app._invalidate_pages), called inside
+        #: transactions; schedules the next dispatch pass.
+        self.invalidate = invalidate
+        #: Connected translator sockets and their per-connection state.
+        self.clients: dict[WebSocket, _Connection] = {}
+        #: (lang, chunk key) of fragments whose result failed validation
+        #: (segment count, empty or non-prose segments, segments.py) this run.
+        self.validation_failures: set[tuple[str, bytes]] = set()
+
+    def schedule(self) -> None:
+        """Schedule a dispatch pass, if any translator is connected.
+
+        The invalidate hook is sync and called inside transactions: the
+        task first runs once the current coroutine awaits again, i.e. after
+        the transaction has committed. No-op without a running loop (CLI
+        use)."""
+        if not self.clients:
+            return
+        try:
+            asyncio.get_running_loop()
+        except RuntimeError:
+            return
+        asyncio.create_task(self._dispatch())
+
+    async def _dispatch(self) -> None:
+        """Offer one pending item to every free capable connection."""
+        wanted = {
+            tag
+            for lang in self.data.translate_langs
+            if (tag := i18n.base_tag(lang))
+        }
+        if not wanted:
+            return
+        for ws, state in list(self.clients.items()):
+            if state.inflight is not None:
+                continue
+            langs = wanted & state.capable
+            if not langs:
+                continue
+            inflight = {s.inflight for s in self.clients.values() if s.inflight}
+            job = None
+            spans: list[Span] = []
+            original = ""
+            for lang in sorted(langs):
+                for item in pending_items(self.data, lang):
+                    if (lang, item.key) in inflight or (lang, item.key) in self.validation_failures:
+                        continue
+                    spans, texts, contexts = split(item.text)
+                    if not texts:
+                        continue  # prose that could not be located for splicing
+                    original = item.text
+                    if item.kind == "title" and item.context:
+                        # A title's surround is the article's opening prose
+                        # (TransItem.context), not its own one-word block.
+                        contexts = [item.context] * len(texts)
+                    job = Job(
+                        lang=lang, key=item.key, texts=texts,
+                        path=item.path, kind=item.kind, contexts=contexts,
+                    )
+                    break
+                if job is not None:
+                    break
+            if job is None:
+                continue
+            state.inflight = (job.lang, job.key)  # before the await: no double-assign
+            state.spans = spans
+            state.original = original
+            try:
+                await ws.send_text(msgspec.json.encode(job).decode())
+            except Exception:  # send failed: the receive loop cleans up
+                self.clients.pop(ws, None)
+
+    async def handle_ws(self, ws: WebSocket, clientkey: str) -> None:
+        """The /_translate/<key> channel (docs/localization.md).
+
+        A wrong/empty key rejects the handshake (closing before accept
+        makes Starlette answer HTTP 403). Protocol (JSON frames): the
+        client opens with Hello(langs) announcing its CAPABILITIES — the
+        language codes its model can produce (normalized to translation
+        tags; "en"/empty dropped) — then answers each Job with its
+        Result(lang, key, texts). A Result without an in-flight job or with
+        a different (lang, key), a duplicate Hello, or any malformed frame
+        closes the socket with a protocol error.
+        """
+        if clientkey not in self.data.translate_keys:
+            await ws.close(code=1008)  # policy violation; pre-accept = HTTP 403
+            return
+        await ws.accept()
+        state: _Connection | None = None
+        try:
+            while True:
+                raw = await ws.receive_text()
+                try:
+                    msg = msgspec.json.decode(raw.encode(), type=ClientMsg)
+                except msgspec.DecodeError:
+                    await ws.close(code=1002)  # protocol error
+                    return
+                if isinstance(msg, Hello):
+                    if state is not None:  # one Hello per connection
+                        await ws.close(code=1002)
+                        return
+                    state = _Connection({
+                        tag for lang in msg.langs if (tag := i18n.base_tag(lang))
+                    })
+                    self.clients[ws] = state
+                    self.schedule()
+                else:  # Result
+                    lang = i18n.base_tag(msg.lang)
+                    if (
+                        state is None  # results before Hello
+                        or state.inflight is None  # no job in flight
+                        or (lang, msg.key) != state.inflight  # wrong job
+                    ):
+                        await ws.close(code=1002)
+                        return
+                    texts, spans, original = msg.texts, state.spans, state.original
+                    state.inflight = None
+                    state.spans = []
+                    state.original = ""
+                    text = join(original, spans, texts) if len(texts) == len(spans) else None
+                    if text is None:
+                        # The model broke the segment contract (count
+                        # mismatch, empty or non-prose segment): drop the
+                        # result and skip the fragment for this run (it
+                        # stays pending; a restart, a refresh or a model
+                        # change gets another chance).
+                        self.validation_failures.add((lang, msg.key))
+                        logger.warning(
+                            "[%s] result for chunk %s rejected: invalid segments",
+                            lang, msg.key.hex(),
+                        )
+                        self.schedule()
+                        continue
+                    with self.db.transaction("translator results", user=clientkey, extra=lang):
+                        paths = store_results(
+                            self.data, lang, [TransResult(key=msg.key, text=text)]
+                        )
+                        self.invalidate()  # schedules the next dispatch
+                    if paths:
+                        logger.info(
+                            "[%s] now available for %d page(s): %s",
+                            lang, len(paths), ", ".join(sorted(paths)),
+                        )
+        except WebSocketDisconnect:
+            pass
+        finally:
+            if self.clients.pop(ws, None) is not None:
+                # The in-flight item (if any) is pending again; offer it around.
+                self.schedule()

pagerite/views.py

@@ -24,7 +24,9 @@ import re
 from html5tagger import HTML, Document, E, Template
 from platformdirs import site_data_dir, user_data_path
 
-from pagerite.data import Node, prettify, resolve, sorted_nodes
+from pagerite import i18n
+from pagerite.data import Data, Node, node_markdown, prettify, resolve, sorted_nodes
+from pagerite.i18n import Translation
 from pagerite.markdown import render
 
 SITE_NAME = "Pagerite"
@@ -309,6 +311,9 @@ def _layout(
     transition: str = "cube",
     favicon: str = "",
     social: dict[str, str] | None = None,
+    lang: str = i18n.ORIGINAL_LANGUAGE,
+    canonical: str = "",
+    alternates: list[tuple[str, str]] = (),
 ) -> Template:
     """Page layout template with standard assets and ES-module scripts.
 
@@ -333,17 +338,26 @@ def _layout(
 
     ``social`` maps meta keys to contents: ``og:*``/``article:*`` go out as
     property attributes, everything else (description, twitter:*) as name.
+
+    ``lang`` is the served language for <html lang>; an RTL language (ar,
+    fa, ...) also puts dir="rtl" on <html> (the editor panel carries its own
+    lang="en" dir="ltr", so it is unaffected). ``canonical`` and
+    ``alternates`` ((hreflang, href) pairs) are the page's language URLs
+    (see docs/localization.md), emitted right after the viewport and before
+    the social tags: canonical first, then the hreflang alternates.
     """
-    doc = Document(E.Title, lang="en")
+    doc = Document(E.Title, lang=lang, dir="rtl" if lang in i18n.RTL_LANGUAGES else "ltr")
     # Responsive layout (see the 48rem breakpoint in pagerite.css) needs
     # the real device width, not the default 980px layout viewport.
     doc.meta(name="viewport", content="width=device-width, initial-scale=1")
+    if canonical:
+        doc.link(rel="canonical", href=canonical)
+    for hreflang, href in alternates:
+        doc.link(rel="alternate", hreflang=hreflang, href=href)
     for key, value in (social or {}).items():
         if value:
             if key.startswith(("og:", "article:")):
                 doc.meta(property=key, content=value)
-            elif key == "canonical":
-                doc.link(rel="canonical", href=value)
             else:
                 doc.meta(name=key, content=value)
     # A custom favicon (from the site editor) is linked explicitly; without
@@ -443,26 +457,41 @@ def _layout(
     return Template(body)
 
 
-def _brand_link(brand: str, brand_html: str = "") -> HTML:
+def _brand_link(brand: str, brand_html: str = "", link_lang: str = "") -> HTML:
     """Header brand: custom HTML (in a #brand wrapper, rendered instead of
     the link) when configured, else the plain brand link; omitted entirely
     when neither is set."""
     if brand_html.strip():
         return HTML(str(E.div(HTML(brand_html), id="brand")))
-    return HTML(str(E.a(brand, href="/", id="brand"))) if brand else HTML("")
+    return HTML(str(E.a(brand, href=_href("", link_lang), id="brand"))) if brand else HTML("")
 
 
-def _title(slug: str, node: Node) -> str:
+def _title(slug: str, node: Node, translation: Translation | None = None, path: str = "") -> str:
-    """Menu label: the configured title, prettified slug, "Home" fallback."""
+    """Menu label: the configured title, prettified slug, "Home" fallback.
+
+    With a translation, its title map (keyed by node path) wins, falling
+    back per node to the original English title.
+    """
+    if translation and (t := translation.titles.get(path)):
+        return t
     return node.title or prettify(slug) or "Home"
 
 
+def _href(path: str, link_lang: str = "") -> str:
+    """Site-chrome link to a page: when the page was requested with a
+    ?lang= override the query is replicated onto the navigation links it
+    renders, so clicks and prefetches (which take the href as-is) stay in
+    the chosen language — even without JS (docs/localization.md)."""
+    return f"/{path}?lang={link_lang}" if link_lang else f"/{path}"
+
+
 def _nav_link(
     doc, menu: dict[str, Node], node: Node, path: str, current: str,
-    ancestors_current: bool = True,
+    ancestors_current: bool = True, translation: Translation | None = None,
+    link_lang: str = "",
 ) -> None:
     """Render one <li> linking the node. Category labels (no content of
-    their own — None, or empty markdown as left by the site editor's
+    their own — chunks None, or an empty page as left by the site editor's
     page creation) link straight to their first child page, so normal
     navigation bypasses the placeholder/empty page at their own URL."""
     # The navbar highlights a top-level item also when viewing any of its
@@ -470,17 +499,17 @@ def _nav_link(
     is_current = current == path or (
         ancestors_current and path and current.startswith(f"{path}/")
     )
-    href = f"/{path}"
+    href = _href(path, link_lang)
-    if not node.content and (leaf := first_leaf(menu, path)) is not None:
+    if not node.chunks and (leaf := first_leaf(menu, path)) is not None:
-        href = f"/{leaf}"
+        href = _href(leaf, link_lang)
     doc.li.a(
-        _title(path.rpartition("/")[2], node),
+        _title(path.rpartition("/")[2], node, translation, path),
         href=href,
         **{"class": "current"} if is_current else {},
     )
 
 
-def nav_html(menu: dict[str, Node], current: str) -> HTML:
+def nav_html(menu: dict[str, Node], current: str, translation: Translation | None = None, link_lang: str = "") -> HTML:
     """Render the contents of the #nav element for the current path.
 
     Top-level items in menu order; the front page (slug "", href "/")
@@ -491,11 +520,11 @@ def nav_html(menu: dict[str, Node], current: str) -> HTML:
     with nav:
         for slug, node in sorted_nodes(menu):
             if node.published:
-                _nav_link(nav, menu, node, slug, current)
+                _nav_link(nav, menu, node, slug, current, translation=translation, link_lang=link_lang)
     return HTML(str(nav))
 
 
-def sidebar_html(menu: dict[str, Node], current: str) -> HTML:
+def sidebar_html(menu: dict[str, Node], current: str, translation: Translation | None = None, link_lang: str = "") -> HTML:
     """Render the #sidebar element for the current path (empty when none).
 
     The sidebar is the current main level section's sub-navigation: the
@@ -529,24 +558,24 @@ def sidebar_html(menu: dict[str, Node], current: str) -> HTML:
     nav = E.ul
     with nav:
         for slug, child in items:
-            _sidebar_item(nav, menu, child, f"{section}/{slug}", current)
+            _sidebar_item(nav, menu, child, f"{section}/{slug}", current, translation, link_lang)
     return HTML(str(E.aside(nav, id="sidebar")))
 
 
-def _sidebar_item(doc, menu: dict[str, Node], node: Node, path: str, current: str) -> None:
+def _sidebar_item(doc, menu: dict[str, Node], node: Node, path: str, current: str, translation: Translation | None = None, link_lang: str = "") -> None:
     """One sidebar <li>: the node link, with its published children as a
     nested list (third level and deeper, recursively)."""
-    _nav_link(doc, menu, node, path, current, ancestors_current=False)
+    _nav_link(doc, menu, node, path, current, ancestors_current=False, translation=translation, link_lang=link_lang)
     sub = [(s, c) for s, c in sorted_nodes(node.children) if c.published]
     if sub:
         # doc.li.a(...) above left the <li> open for nesting.
         with doc.ul:
             for slug, child in sub:
-                _sidebar_item(doc, menu, child, f"{path}/{slug}", current)
+                _sidebar_item(doc, menu, child, f"{path}/{slug}", current, translation, link_lang)
 
 
 def first_leaf(menu: dict[str, Node], path: str) -> str | None:
-    """First published descendant page (content set) in menu order.
+    """First published descendant page (chunks set) in menu order.
 
     This is the nav-link target for content-less category labels.
     """
@@ -561,7 +590,7 @@ def _first_leaf(node: Node, path: str) -> str | None:
         if not child.published:
             continue
         cpath = f"{path}/{slug}" if path else slug
-        if child.content:
+        if child.chunks:
             return cpath
         if (leaf := _first_leaf(child, cpath)) is not None:
             return leaf
@@ -674,16 +703,25 @@ def banner_source(menu: dict[str, Node], path: str) -> str | None:
     return None
 
 
-def page_content(menu: dict[str, Node], path: str) -> HTML:
+def page_content(menu: dict[str, Node], data: Data, path: str, translation: Translation | None = None, link_lang: str = "", lang: str = "") -> HTML:
     """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.
+    after the markdown content. 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.
     """
     node = resolve(menu, path)[-1]
+    content = node_markdown(data, node) or ""
+    title = node.title
+    if translation:
+        if translation.markdown is not None:
+            content = translation.markdown
+        title = _title(path.rpartition("/")[2], node, translation, path) if node.title else title
     # 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.
-    rendered = render(node.content or "", path, node.created, node.modified, title=node.title)
+    rendered = render(content, path, node.created, node.modified, title=title)
     # Long articles get .multicol: the article column cap lifts (see the
     # #content grid in pagerite.css) and the .cols segments lay out in at
     # most two columns. The html is already segmented by render() — the
@@ -691,11 +729,11 @@ def page_content(menu: dict[str, Node], path: str) -> HTML:
     doc = E.article(class_="multicol") if rendered.multicol else E.article
     with doc:
         doc(HTML(rendered.html))
-        _cards(doc, menu, node, path)
+        _cards(doc, menu, data, node, path, translation, link_lang, lang)
     return HTML(str(doc))
 
 
-def _cards(doc, menu: dict[str, Node], node: Node, path: str) -> None:
+def _cards(doc, menu: dict[str, Node], data: Data, node: Node, path: str, translation: Translation | None = None, link_lang: str = "", lang: str = "") -> None:
     """Card stacks of the node's published children (nothing when childless).
 
     One column per direct child, all in a single full-width row (the .wide
@@ -721,35 +759,44 @@ def _cards(doc, menu: dict[str, Node], node: Node, path: str) -> None:
                 continue
             with doc.div(class_="stack"):
                 for epath, enode in entries:
-                    _card(doc, enode, epath)
+                    _card(doc, data, enode, epath, translation, link_lang, lang)
 
 
 def _walk(node: Node, path: str):
     """Published content pages of a subtree, pre-order in menu order: the
     node itself first when it has content (the stack's landing card), then
     its descendants (content-less nodes contribute only their subtree)."""
-    if node.content:
+    if node.chunks:
         yield path, node
     for slug, child in sorted_nodes(node.children):
         if child.published:
             yield from _walk(child, f"{path}/{slug}")
 
 
-def _card(doc, node: Node, path: str) -> None:
+def _card(doc, data: Data, node: Node, path: str, translation: Translation | None = None, link_lang: str = "", lang: str = "") -> None:
     """One card in a stack: cover + title, plus the description when the
-    page has no image (its card shows a gradient cover instead)."""
+    page has no image (its card shows a gradient cover instead).
+
+    The card text localizes per target article where that page is
+    available in the language: the title comes from the translation's
+    title map and the cover/description heuristics run on the target's
+    hybrid Markdown — with per-card fallback to the original otherwise.
+    """
     image = description = ""
-    if node.content:
+    if node.chunks:
-        html = render(node.content, path, node.created, node.modified).html
+        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
         image, _ = _media(html)
         if not image:
             description = _description(html, 150)
-    with doc.a(href=f"/{path}", class_="card"):
+    with doc.a(href=_href(path, link_lang), class_="card"):
         if image:
             doc.span(class_="cover", style=f'background-image: url("{image}")')
         else:
             doc.span(class_="cover")
-        doc.span(_title(path.rpartition("/")[2], node), class_="title")
+        doc.span(_title(path.rpartition("/")[2], node, translation, path), class_="title")
         if description:
             doc.span(description, class_="desc")
 
@@ -854,7 +901,6 @@ def _social_meta(
     )
     return {
         "description": text,
-        "canonical": url,
         "og:type": "article",
         "og:title": title,
         "og:description": text,
@@ -871,6 +917,7 @@ def _social_meta(
 
 def render_page(
     menu: dict[str, Node],
+    data: Data,
     path: str,
     brand: str = SITE_NAME,
     custom_css: str = "",
@@ -879,21 +926,51 @@ def render_page(
     brand_html: str = "",
     base_url: str = "",
     transition: str = "cube",
+    lang: str = i18n.ORIGINAL_LANGUAGE,
+    translation: Translation | None = None,
+    link_lang: str = "",
 ) -> str:
-    """Render a full HTML page for the slug path."""
+    """Render a full HTML page for the slug path.
+
+    ``lang``/``translation`` serve a translated version (see
+    docs/localization.md): None translation = the English original.
+    ``link_lang`` is the ?lang= override the page was requested with,
+    replicated onto the navigation links so the language sticks.
+    """
     node = resolve(menu, path)[-1]
-    title = _title(path.rpartition("/")[2], node)
+    original = i18n.primary_lang(menu, path)
-    main = page_content(menu, path)
+    if translation is None:
+        lang = original
+    title = _title(path.rpartition("/")[2], node, translation, path)
+    main = page_content(menu, data, path, translation, link_lang, lang)
     social = _social_meta(node, path, title, str(main), brand, base_url)
+    # Canonical/hreflang URLs (docs/localization.md): the canonical names
+    # the actually served language — the plain URL for the original (for
+    # SEO the non-query URL means the article's language), ?lang= for a
+    # translation — regardless of how the language was arrived at (query
+    # or header). The alternates are site-wide, the same set on every
+    # page: the configured translate_langs (the translator works to fill
+    # them all in), x-default first (the plain, autodetecting URL), then
+    # every language explicitly, the page's own primary included.
+    canonical = ""
+    alternates = []
+    if base_url:
+        url = f"{base_url}/{path}"
+        canonical = url if lang == original else f"{url}?lang={lang}"
+        if data.translate_langs:
+            alternates = [("x-default", url)] + [
+                (tag, f"{url}?lang={tag}")
+                for tag in sorted({original, *data.translate_langs})
+            ]
     return str(
         _layout(
             *_page_assets(), custom_css, theme, banner_design(menu, path, theme),
-            transition, favicon, social,
+            transition, favicon, social, lang, canonical, alternates,
         )(
             Title=f"{title} – {brand}" if brand else title,
-            Brand=_brand_link(brand, brand_html),
+            Brand=_brand_link(brand, brand_html, link_lang),
-            Nav=nav_html(menu, path),
+            Nav=nav_html(menu, path, translation, link_lang),
-            Sidebar=sidebar_html(menu, path),
+            Sidebar=sidebar_html(menu, path, translation, link_lang),
             Banner=banner_html(menu, path, theme),
             Main=main,
         ),
@@ -902,6 +979,7 @@ def render_page(
 
 def render_category(
     menu: dict[str, Node],
+    data: Data,
     path: str,
     brand: str = SITE_NAME,
     custom_css: str = "",
@@ -909,6 +987,9 @@ def render_category(
     favicon: str = "",
     brand_html: str = "",
     transition: str = "cube",
+    lang: str = i18n.ORIGINAL_LANGUAGE,
+    translation: Translation | None = None,
+    link_lang: str = "",
 ) -> str:
     """Render the listing for a content-less category label (404).
 
@@ -916,22 +997,29 @@ def render_category(
     children are listed as cards, like on a category page with content.
     Nav links point straight at the first child, so this is mainly seen
     in the site editor, where the pen creates the landing page.
+
+    With a translation (titles only — the category has no Markdown) the
+    heading, navigation and card text localize per target article
+    (docs/localization.md); ``link_lang`` replicates the ?lang= override
+    onto the navigation links as on content pages.
     """
     node = resolve(menu, path)[-1]
-    title = _title(path.rpartition("/")[2], node)
+    if translation is None:
+        lang = i18n.primary_lang(menu, path)
+    title = _title(path.rpartition("/")[2], node, translation, path)
     doc = E.article
     with doc:
         doc.h1(title)
         if any(c.published for c in node.children.values()):
-            _cards(doc, menu, node, path)
+            _cards(doc, menu, data, node, path, translation, link_lang, lang)
         else:
             doc.p("This section has no page of its own yet.")
     return str(
-        _layout(*_page_assets(), custom_css, theme, banner_design(menu, path, theme), transition, favicon)(
+        _layout(*_page_assets(), custom_css, theme, banner_design(menu, path, theme), transition, favicon, lang=lang)(
             Title=f"{title} – {brand}" if brand else title,
-            Brand=_brand_link(brand, brand_html),
+            Brand=_brand_link(brand, brand_html, link_lang),
-            Nav=nav_html(menu, path),
+            Nav=nav_html(menu, path, translation, link_lang),
-            Sidebar=sidebar_html(menu, path),
+            Sidebar=sidebar_html(menu, path, translation, link_lang),
             Banner=banner_html(menu, path, theme),
             Main=HTML(str(doc)),
         ),

pyproject.toml

@@ -21,7 +21,7 @@ dependencies = [
     "fastapi[standard]>=0.141.1",
     "html5tagger>=2.0.0",
     "httpx>=0.28.1",
-    "kanta>=0.8.1",
+    "kanta>=0.9.0",
     "markdown-it-py>=4.2.0",
     "maxminddb>=3.1.1",
     "mdit-py-plugins>=0.6.1",

scripts/translator.py

@@ -0,0 +1,319 @@
+#!/usr/bin/env python3
+# /// script
+# requires-python = ">=3.14"
+# dependencies = [
+#     "accelerate>=1.14.0",
+#     "msgspec>=0.19.0",
+#     "torch>=2.13.0",
+#     "tracerite>=2.6.5",
+#     "transformers>=5.16.1",
+#     "websockets>=15.0.1",
+# ]
+# ///
+"""Pagerite translator service: translate site content with Seed-X-PPO-7B.
+
+Connects to a Pagerite server's translator WebSocket — the full URL
+including the access key (printed at server startup; the admin also finds
+the key in the site settings, GET /_api/settings -> ``translate_keys``) —
+and announces the languages the
+model CAN translate (capabilities). The server dispatches one single-item
+job at a time per connection, offered only in its configured target
+languages (``Data.translate_langs``) ∩ the announced capabilities; a
+dropped connection's in-flight item is simply re-offered
+(docs/localization.md). For parallelism, run multiple instances.
+
+Seed-X-PPO-7B (bf16, ~15 GB) is the only supported model. The script stays
+running and connected full time; the model loads at startup (a backlog is
+likely after a downtime) and is unloaded after 60 s idle, re-loading on the
+next job — the GPU is held only while actually translating.
+
+Usage:
+    uv run scripts/translator.py ws://localhost:8410/_translate/KEY
+    uv run scripts/translator.py wss://example.com/_translate/KEY
+"""
+
+import argparse
+import asyncio
+import gc
+import sys
+import time
+
+import msgspec
+import torch
+from transformers import AutoModelForCausalLM, AutoTokenizer
+import tracerite
+import websockets
+
+tracerite.load()
+
+SEED_X = "ByteDance-Seed/Seed-X-PPO-7B"
+
+# Seed-X language tags (appended to the prompt; required by its PPO training)
+SEED_X_TAGS = {
+    "arabic": "ar", "chinese": "zh", "czech": "cs", "danish": "da",
+    "dutch": "nl", "english": "en", "finnish": "fi", "french": "fr",
+    "german": "de", "greek": "el", "hungarian": "hu", "indonesian": "id",
+    "italian": "it", "japanese": "ja", "korean": "ko", "malay": "ms",
+    "norwegian": "no", "persian": "fa", "polish": "pl", "portuguese": "pt",
+    "romanian": "ro", "russian": "ru", "spanish": "es", "swedish": "sv",
+    "thai": "th", "turkish": "tr", "ukrainian": "uk", "vietnamese": "vi",
+}
+SEED_X_NAMES = {v: k for k, v in SEED_X_TAGS.items()}
+
+#: The fragments arrive as prose segments (pagerite/segments.py): plain
+#: text runs only — no markup, URLs, code or placeholders. The wire
+#: invariant is that segments are PURE PROSE, and one character marks the
+#: boundary both ways: "<" never appears in a segment. Sources containing
+#: it are never dispatched (pagerite/segments.py keeps them in the
+#: original language); the model's output is cut at the first "<" — one
+#: rule that covers the whole class of markup bleed (an echoed <lang> tag,
+#: a "<br>", ...) instead of a pattern per artifact. (Generation-level
+#: stop strings can't do this job: the model's <s> framing token would
+#: trip a "<" stop at the first token; skip_special_tokens strips the
+#: framing at decode.)
+#:
+#: Two kinds cross the wire (Job.kind), each with its own prompt template:
+#: titles get told they ARE titles (a lone word otherwise invites
+#: context-free readings — "About" as "approximately"). Any segment may
+#: carry its surround in Job.contexts (a title: the article's opening; a
+#: carved-out segment like a link text: its block's plain text) and is then
+#: translated together with that surround (seed_x_chunk). No punctuation
+#: clause, on purpose: Seed-X handles trailing-punctuation instructions by
+#: slipping into its [COT] reasoning mode (observed for Chinese:
+#: minutes-long generations, reasoning text in the output) —
+#: match_punctuation handles stray punctuation deterministically instead.
+PROMPTS = {
+    "chunk": "Translate the following {source_lang} text into {target_lang}:\n{text} <{tag}>",
+    "title": "Translate the following {source_lang} title into {target_lang}:\n{text} <{tag}>",
+    # Title with the article's opening as context (Job.contexts): the model
+    # translates both; generation stops at the blank line separating them,
+    # and the segment's own part of the output is the translation. No
+    # separator in the output (the model merged them) → seed_x_chunk falls
+    # back to the plain kind template.
+    "title+context": "Translate the following {source_lang} title and the beginning of its article "
+                     "into {target_lang}:\n{text}\n\n{context} <{tag}>",
+    # A segment carved out of a larger block (link text, partial run) with
+    # its sentence as context — same mechanics as title+context.
+    "chunk+context": "Translate the following {source_lang} text into {target_lang}:\n"
+                     "{text}\n\n{context} <{tag}>",
+}
+TERMINAL_PUNCT = ".,!?:;…。，！？；：、"
+
+
+def match_punctuation(source: str, translated: str) -> str:
+    """Drop terminal punctuation the model added.
+
+    When the source segment ends without terminal punctuation, the
+    translation must not gain any either. A leading Spanish ¡/¿ only pairs
+    with a terminal !/?, so it goes with it.
+    """
+    if not source or source[-1] in TERMINAL_PUNCT:
+        return translated
+    trimmed = translated.rstrip(TERMINAL_PUNCT)
+    if trimmed and trimmed[0] in "¡¿":
+        trimmed = trimmed[1:].lstrip()
+    return trimmed
+
+
+# The wire structs below duplicate pagerite/translate.py: this script runs
+# in its own uv environment and cannot import the server package. The
+# "type" tag selects the frame; bytes fields ride as base64.
+class Hello(msgspec.Struct, tag="hello"):
+    """Client greeting on connect: the language codes its model CAN produce
+    (capabilities). The server offers jobs only in the intersection with
+    its wanted target languages."""
+
+    langs: list[str]
+
+
+class Job(msgspec.Struct, tag="job"):
+    """Server push: ONE fragment to translate. Exactly one job is in flight
+    per connection — the next arrives only after this one's Result."""
+
+    lang: str
+    key: bytes  #: 9-byte chunk hash (base64 in the JSON frame)
+    #: The fragment's prose segments: plain text runs only, no markup —
+    #: translate each element independently (pagerite/segments.py).
+    texts: list[str]
+    path: str  #: article it came from ("" = front page), no leading slash
+    kind: str  #: "chunk" | "title"
+    #: Per segment (parallel to texts; "" = none): the surround to
+    #: translate it in — a link text carries its sentence, a title the
+    #: article's opening. See seed_x_chunk for how they are used.
+    contexts: list[str] = msgspec.field(default_factory=list)
+
+
+class Result(msgspec.Struct, tag="result"):
+    """Client reply: the translation of the connection's current Job
+    (must match its lang and key exactly)."""
+
+    lang: str
+    key: bytes
+    texts: list[str]  #: the job's segments translated, same order and count
+
+
+#: Idle seconds after the last job before the model is unloaded (the GPU
+#: is released; the WebSocket connection and tokenizer stay).
+IDLE_UNLOAD_S = 60
+
+
+class SeedX:
+    """The Seed-X model, loaded at startup and re-loaded on demand.
+
+    Loading up front covers the likely backlog after a downtime (and any
+    first-run model download) before the server starts dispatching. After
+    IDLE_UNLOAD_S without a job the model is dropped and re-loaded on the
+    next one — the script stays connected the whole time, holding the GPU
+    only while translating. The tokenizer (small, CPU) loads once.
+    """
+
+    def __init__(self):
+        self.tokenizer = AutoTokenizer.from_pretrained(SEED_X)
+        self.model = None
+        self._unload_task = None
+        self._load()
+
+    def _load(self):
+        t0 = time.monotonic()
+        self.model = AutoModelForCausalLM.from_pretrained(
+            SEED_X, dtype=torch.bfloat16, device_map="auto")
+        print(f"[seed-x loaded in {time.monotonic() - t0:.0f}s]", file=sys.stderr)
+
+    def get(self):
+        """The (tokenizer, model) pair, re-loading the model if it was
+        idle-unloaded, and cancelling any pending idle unload."""
+        if self._unload_task:
+            self._unload_task.cancel()
+            self._unload_task = None
+        if self.model is None:
+            self._load()
+        return self.tokenizer, self.model
+
+    def idle(self):
+        """Re-arm the idle unload after a job completes (arming it at job
+        START could unload under a >IDLE_UNLOAD_S generation)."""
+        self._unload_task = asyncio.create_task(self._unload_later())
+
+    async def _unload_later(self):
+        try:
+            await asyncio.sleep(IDLE_UNLOAD_S)
+        except asyncio.CancelledError:
+            return
+        if self.model is not None:
+            self.model = None
+            gc.collect()
+            if torch.cuda.is_available():
+                torch.cuda.empty_cache()
+            print(f"[seed-x unloaded after {IDLE_UNLOAD_S}s idle]", file=sys.stderr)
+
+
+def seed_x_chunk(tokenizer, model, text: str, target_lang: str, tag: str,
+                 kind: str = "chunk", context: str = "", source_lang: str = "English"):
+    """Translate one segment; returns (translation, output_tokens, generation_seconds).
+
+    With context, the segment is translated together with its surround (a
+    link text with its sentence, a title with the article's opening), and
+    the segment's own part of the output is the translation: its own line
+    for a single-line source (a single-line segment's translation never
+    contains a line break — generation stops at the blank line separating
+    the two), its own paragraph for a multi-line one (softbreak-merged
+    lines keep single newlines, the separator is the blank line). If the
+    model merged them — no separator, or an empty first part — fall back to
+    translating the segment alone; the wasted tokens are counted either
+    way.
+    """
+    # No chat template on this model; the trailing language tag is required (trans/ style prompt).
+    template = PROMPTS.get(f"{kind}+context" if context else kind, PROMPTS["chunk"])
+    prompt = template.format(source_lang=source_lang, target_lang=target_lang,
+                             text=text, tag=tag, context=context)
+    inputs = tokenizer(prompt, return_tensors="pt").to(model.device)
+    t0 = time.monotonic()
+    # The only stop string is the context separator. "<" must NOT be one:
+    # stopping works on the raw output, which always starts with the
+    # model's <s> framing token. skip_special_tokens strips <s>/</s> at
+    # decode; the post-decode cut at the first "<" then enforces the wire
+    # invariant (prose only) against markup bleed.
+    kwargs = {"stop_strings": ["\n\n"], "tokenizer": tokenizer} if context else {}
+    out = model.generate(**inputs, max_new_tokens=max(1024, 2 * inputs.input_ids.shape[1]),
+                         do_sample=False, **kwargs)
+    dt = time.monotonic() - t0
+    n = out.shape[1] - inputs.input_ids.shape[1]
+    decoded = tokenizer.decode(out[0][inputs.input_ids.shape[1]:], skip_special_tokens=True)
+    translated = decoded.partition("<")[0]
+    if not context:
+        return translated.strip(), n, dt
+    if "\n" in text:
+        # Multi-line segment: its translation keeps single newlines; the
+        # blank line is the separator from the context translation.
+        sep = "\n\n" in translated
+        out = translated.split("\n\n", 1)[0] if sep else ""
+    else:
+        out, sep, _ = translated.partition("\n")
+        if not sep:
+            out = ""
+    out = out.strip()
+    if out:
+        return out, n, dt
+    # The model merged segment and context (no separator, or an empty first
+    # part): retry without the context.
+    again, n2, dt2 = seed_x_chunk(tokenizer, model, text, target_lang, tag,
+                                  kind=kind, source_lang=source_lang)
+    return again, n + n2, dt + dt2
+
+
+async def do_job(ws, job: Job, seed_x: SeedX) -> None:
+    """Translate the job's segments (one model call each) and send them back."""
+    lang_name = SEED_X_NAMES[job.lang].capitalize()
+    tokenizer, model = seed_x.get()
+    # Deliberately blocking: nothing else needs the loop while the job is
+    # being answered, and the reconnect loop recovers a dropped connection
+    # (the in-flight item is simply re-offered).
+    texts = []
+    tokens = dt = 0
+    for i, text in enumerate(job.texts):
+        ctx = job.contexts[i] if i < len(job.contexts) else ""
+        translated, n, t = seed_x_chunk(tokenizer, model, text, lang_name, job.lang,
+                                        kind=job.kind, context=ctx)
+        texts.append(match_punctuation(text, translated))
+        tokens += n
+        dt += t
+    print(f"[{job.lang} {job.kind} {job.path or '/'}: {len(texts)} segments, "
+          f"{tokens} tokens in {dt:.1f}s = {tokens / dt:.1f} tok/s]", file=sys.stderr)
+    await ws.send(msgspec.json.encode(Result(lang=job.lang, key=job.key, texts=texts)).decode())
+    seed_x.idle()
+
+
+async def serve(url: str, seed_x: SeedX) -> None:
+    """Connect, announce capabilities, answer jobs; reconnect with backoff."""
+    seed_x.idle()  # the startup load also unloads when no work arrives
+    backoff = 1
+    while True:
+        try:
+            async with websockets.connect(url) as ws:
+                backoff = 1
+                await ws.send(msgspec.json.encode(Hello(langs=sorted(SEED_X_NAMES))).decode())
+                print(f"[connected; announced {len(SEED_X_NAMES)} language capabilities]",
+                      file=sys.stderr)
+                async for raw in ws:
+                    await do_job(ws, msgspec.json.decode(raw, type=Job), seed_x)
+        except websockets.exceptions.InvalidHandshake:
+            sys.exit("handshake rejected; check the URL (including the key)")
+        except (OSError, websockets.exceptions.ConnectionClosed) as e:
+            print(f"[connection lost ({e}); reconnecting in {backoff}s]", file=sys.stderr)
+            await asyncio.sleep(backoff)
+            backoff = min(backoff * 2, 60)
+
+
+def main():
+    p = argparse.ArgumentParser(description=__doc__, formatter_class=argparse.RawDescriptionHelpFormatter)
+    p.add_argument("url", help="full translator WebSocket URL including the key, "
+                               "e.g. ws://localhost:8410/_translate/KEY")
+    args = p.parse_args()
+    if not args.url.startswith(("ws://", "wss://")):
+        p.error("url must start with ws:// or wss://")
+
+    asyncio.run(serve(args.url, SeedX()))
+
+
+if __name__ == "__main__":
+    main()