diff --git a/AGENTS.md b/AGENTS.md
index cf26734..c992f4d 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -10,17 +10,18 @@ Please instead ask the user to see from dev tools what you need, e.g. to look up
Pagerite is a CMS. See `docs` for the full design and implementation details. Key files for code changes:
- `pagerite/` — Python backend package (hatchling build target).
- - `app.py` — thin FastAPI assembly: lifespan, `FastAPI(...)`, router includes (route ordering: api/tracking/files routers, then `frontend.route(app, "/")`, then the pages catch-all last).
+ - `app.py` — thin FastAPI assembly: lifespan, `FastAPI(...)`, router includes (route ordering: api/tracking/messages/files routers, then `frontend.route(app, "/")`, then the pages catch-all last).
- `state.py` — shared core, no routes: env-derived site constants, `data`/`kanta`, `analytics_store`, the fastapi-vue `frontend`, the render cache (`_html_response`, `_invalidate_pages`), the translator `dispatcher`, slug helpers, `@kanta.bootstrap` hooks.
- - `files.py` — `FileStore` (content-addressed, RAM-cached), image derivative helpers (`store_image`), file routes (`/_api/files`, `/_f/`, `/_themes/`, `/_fonts/`, favicon settings).
+ - `files.py` — `FileStore` (content-addressed, RAM-cached), image derivative helpers (`store_image`; `store_attachment` keeps non-media uploads as inert `{hash}.file` blobs), file routes (`/_api/files`, `/_f/` — media by hash, attachments only via `/_f/{hash}/{filename}`, all forced-download + nosniff, `/_themes/`, `/_fonts/`, favicon settings).
- `api.py` — editor REST + WS: `/_api/pages`, `/_api/structure`, `/_api/settings`, `/_api/toggle-task`, `/_api/translations`, `/_api/ws/editor`, `/_translate/{key}`.
- - `tracking.py` — visit analytics: GeoIP, client enrichment, favicon fetch, `/_ws`, `/_api/ws/analytics`, the `/_a` page (docs/analytics.md).
- - `pages.py` — public content pages: `/`, `/sitemap.xml`, `/robots.txt`, the `/{path:path}` catch-all.
- - `feeds.py` — machine-readable exports: `/llms.txt`, `/feed.json` (JSON Feed 1.1), `/feed.xml` (RSS 2.0 + atom:link); all published articles, full content, linked from every page `` and the sitemap, recorded in analytics.
+ - `tracking.py` — visit analytics: GeoIP, client enrichment, favicon fetch, `/_ws`, `/_api/ws/analytics`, the `/_a` page (docs/analytics.md). Both sockets also carry the contact-message protocol (docs/messages.md): `/_ws` routes token-bearing visitor frames and holds the per-connection easypow challenge (a validated proof grants the per-session message/upload quota held in messages.py, reveals the site contact email, and records the visit's contact trail marker), the analytics socket the admin inbox.
+ - `messages.py` — visitor contact threads (docs/messages.md): strict message rendering (`html=False` markdown-it — threads never carry user markup), thread store ops, the visitor/admin socket protocols (PoW challenges live in `tracking.activity_ws` as a per-connection local; the granted quota here as a per-session RAM budget shared with the upload route; browser solver served at `/_contact/easypow.js`), the admin unread count for `/_api/settings`, and the public `/_contact/files` upload route (PoW quota + pending-upload quota, unreferenced files deleted when the session's last socket closes).
+ - `pages.py` — public content pages: `/`, `/sitemap.xml`, `/robots.txt`, the `/{path:path}` catch-all. Articles serve their Markdown (title injected as `# title`, per-language hybrid) at a `.md`-suffixed URL, or at the plain URL when Accept explicitly names text/markdown; pages link it via ``, and llms.txt links point at the `.md` URLs.
+ - `feeds.py` — machine-readable exports: `/llms.txt` (compact index linking each article's `.md` Markdown URL), `/feed.json` (JSON Feed 1.1), `/feed.xml` (RSS 2.0 + atom:link); the feeds carry all published articles with full content, linked from every page `` and the sitemap, recorded in analytics.
- `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 + overrides) and translated-edit recording (per-chunk user overrides in `Data.overrides`, 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); api.py only registers the route.
+ - `i18n.py` — language selection, translation assembly (chunks + overrides) and translated-edit recording (per-chunk user overrides in `Data.overrides`, per-language title overrides, refresh), plus the site-string translations (`site_string`/`set_string_translation`) for the contact label/subject (docs/messages.md).
+ - `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); api.py only registers the route. Pending title/nav work includes the site contact strings, so the contact chrome localizes automatically.
- `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.
@@ -31,10 +32,12 @@ 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`).
- `langselect-main.js` + `LangSelector.vue` — public language selector, imported on demand by pagerite.js on pages with more than one hreflang alternate (the editors' `LangSelect` flag dropdown).
+ - `contact-main.js` + `ContactOverlay.vue` — messaging overlay entry and shell (docs/messages.md), imported on demand by pagerite.js when a `{contact:}` trigger button or the corner ✉️ icon is clicked, and at page load when a message session is live: the visitor thread (ContactPanel.vue, riding the `/_ws` activity socket through pagerite.js's bridge — register/send, shared queue and reconnect pacing) or, for editors, the admin inbox (MessagesView.vue: thread list, replies and read marking over `/_api/ws/analytics`, connected while open — a background `watchAdmin` connection keeps the badge and notifications live at all times). A visitor's open conversation is flagged in localStorage and resumed on page load; closing it archives the thread server-side and rotates the token. Both sides notify new messages via the browser Notification API (`notify.js`), permission asked after the first message of a fresh thread.
+ - `Composer.vue` + `richtext.js` — the message composer shared by the contact panel and the admin inbox: constrained contenteditable (plain-text paste, toolbar formatting, upload chips) serialized to a Markdown subset that the server re-renders strictly.
- `store.js` — the shared Pinia store (`useStore`, id `pagerite`) for cross-bundle UI state.
- `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.
+ - `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. Also the auth-aware close handling for the admin sockets (`authReconnect`): probe `/_api/settings` on close, run the paskia login flow on 401/403 and reconnect at once, pace only genuine network/server failures.
- `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.
@@ -45,7 +48,7 @@ Server run by CLI entry point `uv run pagerite` (no auto reloads, build needed).
## Toolchain
-- Python >= 3.14, managed with **uv**. Dependencies: `fastapi[standard]`, `fastapi-vue`, `html5tagger`, `kanta`, `markdown-it-py`, `mdit-py-plugins`, `platformdirs`, `pygments`, `tracerite`; dev group has `httpx`. Run anything via `uv run ...` (the venv is `.venv`).
+- Python >= 3.14, managed with **uv**. Dependencies: `fastapi[standard]`, `fastapi-vue`, `easypow`, `html5tagger`, `kanta`, `markdown-it-py`, `mdit-py-plugins`, `platformdirs`, `pygments`, `tracerite`; dev group has `httpx`. Run anything via `uv run ...` (the venv is `.venv`).
- Key libraries:
- **html5tagger** — all HTML generation (`E`, `Document`, `Template`, `HTML` for trusted/raw HTML).
- To create stand alone pages, begin with `doc = Document(...)` that gives a HTML5 page header
diff --git a/docs/analytics.md b/docs/analytics.md
index 3e4284c..43a4b23 100644
--- a/docs/analytics.md
+++ b/docs/analytics.md
@@ -119,7 +119,11 @@ transition applies the new `` only after the ping goes out) and
follows the session, so the activity of a visit stays tied together, and
while the user is active the accumulated reading time is flushed every few
seconds: the times are incremental, so a disconnection simply leaves the
-last reported time in place (no close beacon). After 5 minutes without
+last reported time in place (no close beacon). A sleeping computer accrues
+no reading time: the inactivity-cutoff timer cannot fire while asleep (and
+`performance.now()` keeps running through sleep on some platforms), so a
+gap longer than the timeout closes the span at its intended cutoff, and a
+late-firing cutoff timer clamps its accumulation the same way. After 5 minutes without
any activity the client closes the socket itself — a sleeping browser tab
would lose it anyway — and the next activity reconnects; reconnects are
attempted only on user activity, with an exponential backoff between
@@ -195,7 +199,11 @@ for misses.
re-visited in a different language becomes a distinct trail step instead
of merging into the existing item. The entry page's referer and
`utm_*` tags come from the GET that loaded it (within 10 s before the
- first message).
+ first message). A server-originated contact marker (the visitor opened
+ the contact panel and solved its proof of work, docs/messages.md —
+ recorded by the `/_ws` handler on the validated solution, never by the
+ client) flags the trail step it happened on, the first one per visit,
+ rendered with a ✉️ marker in the viewer.
- **Crawler hits**: a document GET no activity message matched within
`_CRAWLER_TIMEOUT` (10 s) is a crawler hit — plain bots that only fetch
documents never register as visits. JS-running crawlers (Googlebot,
@@ -341,8 +349,8 @@ the edit pens) links to `/_a`, the analytics page. It is a normal site page:
the standard banner, navigation and footer stay in place, and the analytics
content is rendered inside `#main`. The page itself is public, but the data
stream comes from `WebSocket /_api/ws/analytics`, which remains admin-gated
-like the rest of the management API; visitors without access see the viewer
-with a "could not be loaded" message.
+like the rest of the management API; without a session the viewer starts the
+paskia login flow instead of loading data.
Because it is a real page, fetch-navigation handles it like any other internal
link: clicking the 📊 pen (or any link to `/_a`) fetches the server-rendered
@@ -355,6 +363,24 @@ spans less than 24 hours, otherwise `week`.
`AnalyticsView.vue` is no longer a full-screen overlay; the `body.analytics-open`
page-chrome hiding and `#/analytics/` hash routing have been removed.
+The viewer owns its connection lifecycle (the probe/login mechanics are the
+shared `authReconnect` in `reconnect.js`, also used by the editor sockets). When the socket drops it probes
+`/_api/settings` (plain `fetchJson`, never pops a dialog) to tell an expired
+session from a dead network: a 401/403 runs the paskia login flow instead of
+retrying (the WS handshake cannot open the login dialog) and the stream
+reconnects the moment the login completes; an aborted login (declined, or a
+proxy offering no paskia flow) leaves for the front page with a history
+replace, so Back does not return to `/_a` just to pop the login again.
+Anything else retries with the shared paced backoff (`reconnect.js`).
+paskia's `auth-success`/`auth-logout` window messages are followed too: a
+login anywhere in the page (the banner's 🔑 button included) reconnects the
+stream at once, never waiting out a backoff timer, and a logout leaves for
+the front page. Waking the page (`visibilitychange`, `online`, a bfcache
+restore) recycles the socket immediately — one that survived sleep still
+looks open but is dead — so the fresh snapshot lands right away, and the
+stats window slides on a minute clock so an open page never leaves
+"last 24 hours" frozen at mount.
+
Charts are SVG curves (Catmull-Rom over an edge-aware Gaussian — a
change-point detector splits the series at traffic-level shifts, then each
segment is smoothed independently with a fixed sigma chosen so N events in
@@ -416,8 +442,15 @@ by a top lane labeled 🏠︎ beside the home pill (50% thicker than
the branch lanes, its label font and guide offset scaled along), each item's
subtree fanning out below it in menu order along a large-radius circular
arc that leaves heading
-straight down and gradually bends right, index pages without views omitted
-and their children promoted in their place. The submenu structure is drawn
+straight down and gradually bends right. Every page of the tree is shown
+whether or not it had views in the window — only index pages without
+content of their own (category labels and empty pages — the ones the
+navigation itself bypasses in favor of the first child) are omitted,
+their children
+promoted in their place, the first visible child taking the slot. Paths
+the traffic names but the tree no longer has (deleted pages) are
+inserted as ghosts where they would have been, missing ancestors
+materialized as category lanes. The submenu structure is drawn
as wide branch lanes: one per path prefix with at least two visible
nodes, running behind the branch's node pills as circle arcs concentric
with the fan (parent levels one radius step outward, so all lanes of a
@@ -436,7 +469,10 @@ flow along each edge, persisting across data reloads (emitters are keyed
per edge direction and beads tracked by progress, so an unrelated count
change never reshuffles them), emitted at a rate linearly proportional
to the directional count with no in-flight limit, opposing directions
-offset onto parallel lanes. External sources and exits whose connectors are
+offset onto parallel lanes; each bead renders as an elongated pulse
+(gradient-faded tail) along its direction of travel, colored like its
+connector — accent for internal edges, plain text color for external
+ones. External sources and exits whose connectors are
all culled by the width threshold are dropped from their rows themselves
(the site's own page nodes always stay, connected or not). External sources show as a node row above the
map: each visit is attributed to `utm_campaign`, then `utm_source`, then the
diff --git a/docs/backend.md b/docs/backend.md
index 4804fdf..488374c 100644
--- a/docs/backend.md
+++ b/docs/backend.md
@@ -10,8 +10,8 @@ Thin FastAPI assembly: lifespan (open the kanta database, load the file store, t
- `files.py` — the `FileStore` and image derivative helpers, and the file routes: `/_api/files`, `/_f/`, `/_themes/`, `/_fonts/`, the favicon settings endpoints.
- `api.py` — the editor REST API and WebSockets: `/_api/pages`, `/_api/structure`, `/_api/settings`, `/_api/toggle-task`, `/_api/translations`, `/_api/ws/editor`, and the translator channel `/_translate/{clientkey}`.
- `tracking.py` — visit analytics: GeoIP, client enrichment, favicon fetching, debounced broadcasts, the `/_ws` activity socket, the admin stream `/_api/ws/analytics`, and the `/_a` viewer page.
-- `feeds.py` — machine-readable site exports: `/llms.txt` (Markdown site map for LLM agents), `/feed.json` (JSON Feed 1.1) and `/feed.xml` (RSS 2.0 + atom:link), all carrying every published article with full content (relative URLs absolutized), linked from every page's `` and from the sitemap, and recorded in analytics like page GETs. Bodies are RAM-cached (keyed by base URL, cleared by `_invalidate_pages` like the page render cache) and served with a content-hash ETag (304 revalidation).
-- `pages.py` — the public content pages: `/`, `/sitemap.xml`, `/robots.txt` and the `/{path:path}` catch-all.
+- `feeds.py` — machine-readable site exports: `/llms.txt` (Markdown site map for LLM agents, linking each article's `.md` Markdown URL), `/feed.json` (JSON Feed 1.1) and `/feed.xml` (RSS 2.0 + atom:link), the feeds carrying every published article with full content (relative URLs absolutized), linked from every page's `` and from the sitemap, and recorded in analytics like page GETs. Bodies are RAM-cached (keyed by base URL, cleared by `_invalidate_pages` like the page render cache) and served with a content-hash ETag (304 revalidation).
+- `pages.py` — the public content pages: `/`, `/sitemap.xml`, `/robots.txt` and the `/{path:path}` catch-all. Every article also has a Markdown counterpart: a `.md` suffix on the page URL (or an Accept header explicitly naming `text/markdown` on the plain URL — the HTML response carries `vary: accept`) serves the page's source Markdown (per-language hybrid assembly via `?lang=`/Accept-Language, page title injected as `# title` when the content has no h1, same ETag/Last-Modified scheme as the HTML). Pages advertise it with ``.
Route ordering is load-bearing and lives in `app.py`: the api/tracking/files routers are included BEFORE `frontend.route(app, "/")` is called — fastapi-vue inserts its file routes at the position where `route()` was called (during `load()` in the lifespan), so anything registered earlier wins. The content catch-all `/{path:path}` is included AFTER `frontend.route()` so that built frontend assets still take priority over content slugs. The `Frontend` is constructed with `spa=False` explicitly: it only serves the built files without a catch-all.
diff --git a/docs/editing.md b/docs/editing.md
index bc9a2f3..e8361ad 100644
--- a/docs/editing.md
+++ b/docs/editing.md
@@ -18,7 +18,7 @@ In-place page re-rendering shared by the banner/site/structure tabs lives in `sw
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).
+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. The admin sockets (`/_api/...`) also close through `authReconnect`: an expired session fails the WS handshake like a dead network but can never open the login dialog from a socket, so the close handler probes `/_api/settings` first — a 401/403 runs the paskia login flow and reconnects the moment it completes (a declined login holds at a "session expired" note; a login anywhere in the page reconnects the panel, via paskia's `auth-success` window message), and only genuine network/server failures take the paced backoff. 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
diff --git a/docs/frontend-runtime.md b/docs/frontend-runtime.md
index 5c86b46..d0f56aa 100644
--- a/docs/frontend-runtime.md
+++ b/docs/frontend-runtime.md
@@ -14,7 +14,7 @@ It first probes `GET /auth/api/settings` to detect whether Paskia SSO is availab
The editor/analytics components (everything except pagerite.js and main.js) make their `/_api` calls through paskia-js's `apiFetch`/`apiJson` instead of plain `fetch`: when a call gets a 401/403 carrying an `auth.iframe` hint (expired session), the login dialog opens in place and the request retries transparently after authentication. pagerite.js uses `apiJson` only for the task-checkbox toggle (ticking a box is an explicit edit attempt, so a login dialog is welcome there; any failure — including a cancelled login — reverts the checkbox) and `fetchJson` for its auth probes (plain fetch with JSON handling and errors on non-OK, never a dialog); page-cache and navigation fetches stay on plain `fetch`, so anonymous visitors never get a login popup uninvited.
-Asset wiring differs by mode. In dev the backend links the Vite dev-server URLs (`pagerite:editor-src`/`-css`/`pagerite:analytics-src` meta tags, `` stylesheets) and Vite injects the entry CSS from JS for hot reloads. In production there are no pagerite meta tags: all page assets are inlined into the document — stylesheets as `
diff --git a/frontend/src/ContactOverlay.vue b/frontend/src/ContactOverlay.vue
new file mode 100644
index 0000000..223c77f
--- /dev/null
+++ b/frontend/src/ContactOverlay.vue
@@ -0,0 +1,161 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/PageEditor.vue b/frontend/src/PageEditor.vue
index 1a78ec6..83746f6 100644
--- a/frontend/src/PageEditor.vue
+++ b/frontend/src/PageEditor.vue
@@ -38,7 +38,7 @@ import { flagFor, langName, langSort } from './langs'
import { editorLang, pagePrimary } from './editorLang'
import LangSelect from './LangSelect.vue'
import ConnNote from './ConnNote.vue'
-import { reconnectPolicy, socketSlot, watchConnecting } from './reconnect'
+import { authReconnect, reconnectPolicy, socketSlot, watchConnecting } from './reconnect'
import { dropPageCache, loadPlain } from './swapdoc'
const props = defineProps({
@@ -75,13 +75,14 @@ let sessionDoc = null
// 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 conn = ref('connecting') // connecting | open | waiting | login
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…`
+ : conn.value === 'login' ? 'session expired — log in to continue editing…'
: docReady.value ? '' : 'loading the page…',
)
@@ -96,6 +97,9 @@ let connectWatchdog = null
// retries trip the browser's WebSocket throttling (sockets stuck "pending"
// for minutes), which is what kept hollowing out the editor.
const reconnects = reconnectPolicy()
+// Bumped by every connect()/unmount: the auth probe in onclose is async, so
+// a stale tail checks it did not get superseded before acting.
+let connectEpoch = 0
const dirty = ref(false) // unsaved text exists (drives the 💾 button)
let syncingScroll = false
@@ -990,6 +994,7 @@ function consumePendingLine() {
}
function connect() {
+ connectEpoch++
clearTimeout(reconnectTimer)
conn.value = 'connecting'
if (ws) {
@@ -1021,19 +1026,40 @@ function connect() {
openPath(normPath(props.pagePath))
}
}
- ws.onclose = (ev) => {
+ ws.onclose = async (ev) => {
// 1006 = abnormal (e.g. the dev proxy refused/dropped the upgrade, or
// the connecting watchdog fired); worth seeing since a dead socket
// before the first doc bricks the editor until a retry lands one.
- // The wait is the policy's: doubling backoff with jitter (./reconnect).
console.warn('[pagerite] editor socket closed:', ev.code, ev.reason || '')
+ const gen = connectEpoch
const wait = reconnects.closed()
- retryIn.value = Math.max(1, Math.round(wait / 1000))
- conn.value = 'waiting'
- reconnectTimer = setTimeout(connect, wait)
+ // An expired session fails the handshake like a dead network, but blind
+ // retries loop forever — the WS API cannot open the login dialog. Probe
+ // /_api (./reconnect's authReconnect): a lost session runs the paskia
+ // login flow and reconnects the moment it completes; a declined login
+ // holds at the 'login' note (a later login anywhere in the page, or a
+ // save attempt, reconnects); only transient failures take the backoff.
+ const outcome = await authReconnect(() => { conn.value = 'login' })
+ if (gen !== connectEpoch) return
+ if (outcome === 'auth') {
+ connect()
+ } else if (outcome === 'abort') {
+ conn.value = 'login'
+ } else {
+ retryIn.value = Math.max(1, Math.round(wait / 1000))
+ conn.value = 'waiting'
+ reconnectTimer = setTimeout(connect, wait)
+ }
}
}
+// A login completed anywhere in the page (the banner's 🔑 button, another
+// panel's flow) reconnects a waiting editor at once instead of waiting out
+// the backoff. paskia's auth iframe announces it as a window message.
+function onAuthMessage(ev) {
+ if (ev.data?.type === 'auth-success' && conn.value !== 'open') connect()
+}
+
onMounted(() => {
// The first connection takes a staggered slot (see ./reconnect): page
// load opens several sockets at once, and the burst trips throttling.
@@ -1090,9 +1116,11 @@ onMounted(() => {
addEventListener('pagerite:editor-shown', onEditorShown)
// A section pen clicked while the page editor is already open.
addEventListener('pagerite:edit-section', consumePendingLine)
+ addEventListener('message', onAuthMessage)
})
onUnmounted(() => {
+ connectEpoch++ // invalidate a pending onclose auth probe
clearTimeout(reconnectTimer)
clearTimeout(connectWatchdog)
if (ws) {
@@ -1106,6 +1134,7 @@ onUnmounted(() => {
removeEventListener('keydown', onKeydown)
removeEventListener('pagerite:editor-shown', onEditorShown)
removeEventListener('pagerite:edit-section', consumePendingLine)
+ removeEventListener('message', onAuthMessage)
})
diff --git a/frontend/src/SiteEditor.vue b/frontend/src/SiteEditor.vue
index 4d871e8..221aa60 100644
--- a/frontend/src/SiteEditor.vue
+++ b/frontend/src/SiteEditor.vue
@@ -12,6 +12,9 @@ import { html } from '@codemirror/lang-html'
import { cmHighlight, cmTheme } from './cmtheme'
import { dropPageCache, loadPlain, runScripts } from './swapdoc'
import { apiFetch, apiJson } from 'paskia'
+import { editorLang } from './editorLang'
+import LangSelect from './LangSelect.vue'
+import { flagFor, langName, langSort } from './langs'
const props = defineProps({
pagePath: { type: String, default: '' },
@@ -57,6 +60,103 @@ async function errorDetail(res) {
// empty brand removes the header link and the title suffix entirely.
const brand = ref('')
const theme = ref('')
+
+// --- Messaging (contact) ---------------------------------------------------
+// Contact messaging settings: a two-row grid (labels above, the flag
+// selector and the boxes below). The label (the {contact:} buttons'
+// label and the visitor dialog's title) doubles as the on/off switch:
+// empty = disabled. The label and email subject are per-language
+// strings — the LangSelect (the article editor's flag dropdown, on the
+// shared shell-wide editorLang) switches the two fields between the
+// original and a translation override (stored in the chunk-keyed trans
+// store; auto translators fill the same store, so this is the
+// manual-override UI). The email and mail server are global: the
+// email's reveal after the PoW solve is server-side, and the mail
+// server (a mailbridge URL, docs/messages.md; empty = no email) is
+// reserved for email notifications.
+const contactEmail = ref('')
+const contactLabel = ref('')
+const contactSubject = ref('')
+const contactMailserver = ref('')
+const contactLabelOrig = ref('')
+const contactSubjectOrig = ref('')
+// Password managers offer credential autofill on these boxes no matter
+// the autocomplete setting; readonly until the first interaction keeps
+// them off (the vendors' ignore attributes on the inputs back it up).
+const pmGuard = ref(true)
+const pmUnlock = () => { pmGuard.value = false }
+const lang = editorLang // '' = the original strings (the primary language)
+const primaryLang = ref('en')
+const translateLangs = ref([])
+const translating = computed(() => lang.value && lang.value !== primaryLang.value)
+
+// The flag selector's options, built like the article editor's: the
+// primary language first (tag ''), then the configured targets in the
+// geographic grouping.
+const contactLangOptions = computed(() => {
+ const others = langSort(translateLangs.value.filter((l) => l && l !== primaryLang.value))
+ return [primaryLang.value, ...others].map((code) => ({
+ tag: code === primaryLang.value ? '' : code,
+ code,
+ name: langName(code),
+ flag: flagFor(code),
+ primary: code === primaryLang.value,
+ }))
+})
+
+async function onContactLangChange() {
+ if (!translating.value) {
+ contactLabel.value = contactLabelOrig.value
+ contactSubject.value = contactSubjectOrig.value
+ return
+ }
+ try {
+ const s = await apiJson(`/_api/settings?lang=${lang.value}`)
+ contactLabel.value = s.contact_label_tr || ''
+ contactSubject.value = s.contact_subject_tr || ''
+ } catch { /* keep empty */ }
+}
+watch(lang, onContactLangChange)
+
+function onContactInput() {
+ // Capture the language being edited: a debounced save must not land in
+ // whatever language happens to be selected when the timer fires.
+ const tag = lang.value
+ if (!tag || tag === primaryLang.value) {
+ contactLabelOrig.value = contactLabel.value
+ contactSubjectOrig.value = contactSubject.value
+ }
+ debounce('contact', () => saveContact(tag, contactLabel.value, contactSubject.value))
+}
+
+async function saveContact(tag = lang.value, label = '', subject = '') {
+ if (tag && tag !== primaryLang.value) {
+ // Translation override: only the label/subject apply (empty = drop).
+ const res = await apiFetch(`/_api/settings?lang=${tag}`, {
+ method: 'PUT',
+ headers: { 'content-type': 'application/json' },
+ body: JSON.stringify({
+ brand: brand.value,
+ theme: theme.value,
+ custom_css: customCss.value,
+ contact_label: label,
+ contact_subject: subject,
+ }),
+ })
+ saveError.value = res.ok ? '' : '⚠️ changes could not be saved'
+ if (res.ok) rerender()
+ return
+ }
+ if (await saveSettings()) rerender()
+}
+
+// The rendered {contact:} buttons are server HTML: after a save the page
+// re-renders (like a theme change), updating buttons and dialog strings
+// without a reload.
+async function rerender() {
+ dropPageCache()
+ loadPlain(path.value)
+}
// Theme options come from the backend (theme folders on disk, see GET
// /_api/settings), so added themes need no frontend changes.
const themeOptions = ref([{ value: '', label: '☀️ none' }])
@@ -88,6 +188,16 @@ async function loadSettings() {
]
transition.value = s.transition || 'cube'
transitionOptions.value = s.transitions || []
+ contactEmail.value = s.contact_email || ''
+ contactMailserver.value = s.contact_mailserver || ''
+ contactLabelOrig.value = s.contact_label || ''
+ contactSubjectOrig.value = s.contact_subject || ''
+ if (!translating.value) {
+ contactLabel.value = contactLabelOrig.value
+ contactSubject.value = contactSubjectOrig.value
+ }
+ primaryLang.value = s.primary_lang || 'en'
+ translateLangs.value = s.translate_langs || []
fontOptions.value = [
...BASE_FONT_OPTIONS,
...(s.fonts || []).map((f) => ({
@@ -255,6 +365,12 @@ async function saveSettings(opts = {}) {
custom_css: customCss.value,
brand_html: brandHtml.value,
transition: transition.value,
+ contact_email: contactEmail.value,
+ contact_mailserver: contactMailserver.value,
+ // The originals: while a translation override is being edited the
+ // input refs hold the override, not the original.
+ contact_label: contactLabelOrig.value,
+ contact_subject: contactSubjectOrig.value,
...opts,
}),
})
@@ -264,6 +380,7 @@ async function saveSettings(opts = {}) {
} else {
saveError.value = '⚠️ changes could not be saved'
}
+ return res.ok
}
async function onThemeChange() {
@@ -528,6 +645,9 @@ onMounted(async () => {
parent: brandEl.value,
})
await loadSettings()
+ // The shared editorLang may already point at a translation (picked in
+ // another tab): load its label/subject overrides.
+ await onContactLangChange()
parseFonts(customCss.value)
setCssDocument(customCss.value)
applyCustomCss(customCss.value)
@@ -655,6 +775,88 @@ onUnmounted(() => {
+
+
+
+
+
+
+
+
+
+
+
+
+
brand code (replaces the brand link)
@@ -785,6 +987,48 @@ onUnmounted(() => {
font-size: 1rem;
}
+/* The messaging block: a two-row grid — labels on the first row, the
+ article editor's flag selector and the boxes on the second, so the
+ flag centers with the boxes and every label sits directly above its
+ own field (contact button label = the enable switch, email subject,
+ our email; the hidden mail-server field joins the email group once the
+ backend lands). The flag column sizes
+ to the flag; when only one language is configured the selector renders
+ nothing and the column collapses.
+ The boxes are readonly until first interaction (+ vendor ignore
+ attributes): password managers offer credential autofill on them no
+ matter the autocomplete setting. */
+.msg-grid {
+ display: grid;
+ /* The hidden mail-server field (template comment) re-adds a column. */
+ grid-template-columns: auto repeat(3, minmax(0, 1fr));
+ align-items: center;
+ gap: 0.15rem 0.6rem;
+}
+
+/* Field wrappers vanish into the grid: labels land on row 1 (the
+ flag's empty spacer keeps the fields in the 1fr columns whether or
+ not the flag renders), the flag and boxes on row 2. */
+.msg-grid .field,
+.msg-grid .msg-flag {
+ display: contents;
+}
+
+.msg-grid .field-label {
+ grid-row: 1;
+ min-width: 0;
+}
+
+.msg-grid .lang-select,
+.msg-grid .text-input {
+ grid-row: 2;
+}
+
+.msg-grid .text-input {
+ flex: none;
+ font-size: 0.85rem;
+}
+
.text-input {
flex: 1;
min-width: 4rem;
diff --git a/frontend/src/StructureTree.vue b/frontend/src/StructureTree.vue
index 4d47e82..882f51f 100644
--- a/frontend/src/StructureTree.vue
+++ b/frontend/src/StructureTree.vue
@@ -1,7 +1,8 @@
@@ -39,6 +42,7 @@ const title = computed(() => {
{{ formatCount(count) }}×
{{ step.slug }}
+ ✉️
@@ -51,6 +55,12 @@ const title = computed(() => {
vertical-align: -0.1em;
}
+/* The contact-panel marker (PoW solved on this step). */
+.contact-mark {
+ margin-left: 0.25em;
+ font-size: 0.85em;
+}
+
/* Same flag chip as the visitor cells (VisitorCell.vue). */
.flag {
display: inline-flex;
diff --git a/frontend/src/TransitionGraph.vue b/frontend/src/TransitionGraph.vue
index fea6913..f13c4af 100644
--- a/frontend/src/TransitionGraph.vue
+++ b/frontend/src/TransitionGraph.vue
@@ -13,6 +13,7 @@ import {
TNODE_W,
TNODE_H,
BEAD_R,
+ BEAD_LEN,
buildTransitionGraph,
} from './analytics/transitions.js'
@@ -121,9 +122,16 @@ const syncBeads = (flows) => {
}
const tick = (t) => {
- const dt = lastTick ? (t - lastTick) / 1000 : 0
+ // Long gaps (sleep, hidden tab) must not spawn a bead per missed interval
+ // just to drop them all in the same tick: clamp the step (every in-flight
+ // bead simply completes) and fast-forward each emitter's schedule to its
+ // next future slot, keeping the phase.
+ const dt = lastTick ? Math.min((t - lastTick) / 1000, TRAVERSAL_S) : 0
lastTick = t
for (const e of emitters.values()) {
+ if (e.next < t - e.interval) {
+ e.next = t + (((e.next - t) % e.interval) + e.interval) % e.interval
+ }
while (e.next <= t) {
live.push({ e, p: 0 })
e.next += e.interval
@@ -138,7 +146,17 @@ const tick = (t) => {
continue
}
const f = b.e.flow
- out.push({ x: f.x1 + (f.x2 - f.x1) * b.p, y: f.y1 + (f.y2 - f.y1) * b.p })
+ // The pulse is elongated along the direction of travel (constant per
+ // flow) and colored like its connector (external edges use --text).
+ if (f.deg === undefined) {
+ f.deg = (Math.atan2(f.y2 - f.y1, f.x2 - f.x1) * 180) / Math.PI
+ }
+ out.push({
+ x: f.x1 + (f.x2 - f.x1) * b.p,
+ y: f.y1 + (f.y2 - f.y1) * b.p,
+ deg: f.deg,
+ ext: f.external,
+ })
}
beads.value = out
rafId = requestAnimationFrame(tick)
@@ -177,6 +195,21 @@ const countLabel = (n) =>