@christianirack/brainllm-runtime 0.6.1 → 0.8.0

package/brain-data.js

@@ -379,9 +379,12 @@ async function once(u, M, body, sg, pri, up) {
   const ra = h('retry-after'), retryAfter = ra == null ? undefined : isNaN(ra) ? Math.max(0, (Date.parse(ra) - Date.now()) / 1e3) : +ra
   if (st === 401 && P.login && G.location && !location.pathname.endsWith(P.login)) location.assign(appBase() + P.login + '?next=' + encodeURIComponent(location.pathname + location.search))
   const native = j && j.schemaVersion === 1 && j.error && typeof j.error === 'object' && typeof j.error.code === 'string' && /^[A-Z][A-Z0-9_]{0,63}$/.test(j.error.code)
-  const generic = st === 401 ? 'Authentication failed. Sign in again.' : st === 403 ? 'You do not have permission to continue.' : st === 422 ? 'Check the highlighted fields.' : st === 429 ? 'Too many requests. Wait before trying again.' : `Request failed (${st}).`
+  const fields = native && st === 422 ? j.error.fields : j && j.errors
+  // "highlighted fields" only when there are fields to highlight. The backend's `fix` is for the developer (error.fix),
+  // never visitor text: it is English and names what the app should change.
+  const generic = st === 401 ? 'Authentication failed. Sign in again.' : st === 403 ? 'You do not have permission to continue.' : st === 422 ? (fields && Object.keys(fields).length ? 'Check the highlighted fields.' : 'The server rejected this request. Check it and try again.') : st === 429 ? 'Too many requests. Wait before trying again.' : `Request failed (${st}).`
   const message = !native && st < 500 && typeof j?.error === 'string' && j.error.length <= 512 && !/[\r\n]|(?:TypeError|ReferenceError|SyntaxError|Error):/.test(j.error) ? j.error : generic
-  throw new ApiError('http', message, { status: st, errors: native && st === 422 ? j.error.fields : j && j.errors, retryAfter, id: h('x-request-id') || undefined, ...(native ? { backendCode: j.error.code, fix: typeof j.error.fix === 'string' ? j.error.fix.slice(0,1024) : undefined } : {}) })
+  throw new ApiError('http', message, { status: st, errors: fields, retryAfter, id: h('x-request-id') || undefined, plain: message === generic, ...(native ? { backendCode: j.error.code, fix: typeof j.error.fix === 'string' ? j.error.fix.slice(0,1024) : undefined } : {}) })
 }
 
 // multipart upload with progress (fetch has no upload progress)

package/brain-env.js

@@ -125,7 +125,8 @@ export function portal(target, f) {
   return []
 }
 
-// route() → { path, params, query }, read-only and reactive (each a signal read): path without the base path
+// route() → { path, params, query, navigating }, read-only and reactive (each a signal read); navigating is true while
+// a client navigation is on its way (brain-router passes it as __brainRouted(true|false)): path without the base path
 // (<meta name="brain-base">), query from the URL, params from the page's <meta name="brain-params" content='{"id":"7"}'>
 // (the server knows the route's pattern; the client does not). brain-router calls globalThis.__brainRouted after every
 // client navigation. While the server renders, the values come from globalThis.__brainRoute (server.mjs, prerender).
@@ -148,13 +149,14 @@ const read = () => {
 }
 export function route() {
   const s = G.__brainRoute
-  if (s) return { path: s.path, params: s.params || {}, query: s.query || {} }
+  if (s) return { path: s.path, params: s.params || {}, query: s.query || {}, navigating: false }
   if (!cur) {
-    const S = read().map(v => sig(v))
-    cur = { get path() { return S[0].v }, get params() { return S[1].v }, get query() { return S[2].v } }
-    G.__brainRouted = () => {
+    const S = [...read(), false].map(v => sig(v))
+    cur = { get path() { return S[0].v }, get params() { return S[1].v }, get query() { return S[2].v }, get navigating() { return S[3].v } }
+    G.__brainRouted = on => {
+      if (on !== undefined) return void (S[3].v = !!on)
       const v = read()
-      S.forEach((s, i) => JSON.stringify(untrack(() => s.v)) !== JSON.stringify(v[i]) && (s.v = v[i])) // only what changed
+      v.forEach((x, i) => JSON.stringify(untrack(() => S[i].v)) !== JSON.stringify(x) && (S[i].v = x)) // only what changed
     }
   }
   return cur

package/brain-form.js

@@ -1,7 +1,7 @@
 // BRAINLLM forms (INTERNALS §14). `let f = form(schema, { submit: async (v) => … })` →
 //   bind:value={f.v.email} · {f.err.email} · f.busy · f.error (form-level) · f.ok · on:submit={f.submit}
-// Schema mini-language per field: `str num bool email url date` + `!` required + `<=N >=N` (length for str and lists,
-// value for num) + `[T]` list of T, or a nested schema object (a type from types.jsbrain).
+// Schema mini-language per field: `str num bool email url date tel file` + `!` required + `<=N >=N` (length for str and
+// lists, value for num, bytes for file) + `[T]` list of T, or a nested schema object (a type from types.jsbrain).
 // Validation: a field is validated when it loses focus and every field on submit; errors show only after that.
 // The element of each field is found without ids: the control that has focus while its value is written (the
 // `bind:` input handler), or on submit `form.elements[name]`. On it the runtime keeps `aria-invalid` and, when the
@@ -28,8 +28,8 @@ const GENERIC = 'Something went wrong. Try again.' // the text callForm (server.
 const go = u => {
   const G = globalThis
   if (G.__brainNavigate) return G.__brainNavigate(u)
-  const m = D && D.querySelector('meta[name=brain-base]'), b = (m && m.getAttribute('content')) || '/'
-  G.location && G.location.assign(b !== '/' && !(u + '/').startsWith(b) ? b + u.slice(1) : u)
+  const m = D?.querySelector('meta[name=brain-base]'), b = m?.getAttribute('content') || '/'
+  G.location?.assign(b !== '/' && !(u + '/').startsWith(b) ? b + u.slice(1) : u)
 }
 // forms with unsaved changes: brain-router asks before a client navigation, the browser before unload. A form being
 // submitted does not ask (#299): the user chose to save, and a submit() that navigates once the server accepted the
@@ -42,14 +42,11 @@ if (globalThis.addEventListener && !globalThis.__brainDirtyHook) {
   })
 }
 const empty = v => v == null || typeof v === 'string' && v.trim() === '' || Array.isArray(v) && !v.length
-const init0 = r => (r.list ? [] : r.t === 'bool' ? false : '')
+const init0 = r => (r.list ? [] : r.t === 'bool' ? false : r.t === 'file' ? null : '')
 const out = (r, v) => {
   if (r.list) {
     if (!Array.isArray(v)) return []
-    if (r.t !== 'num') return v
-    const numbers = new Array(v.length)
-    for (let i = 0; i < v.length; i++) numbers[i] = Number(v[i])
-    return numbers
+    return r.t === 'num' ? Array.from(v, Number) : v
   }
   return r.t === 'num' ? (empty(v) ? null : Number(v)) : r.t === 'bool' ? !!v : v
 }
@@ -62,12 +59,12 @@ function posted(id) {
   if (g) return g[id] || null
   if (SEEN === undefined)
     try {
-      const el = D && D.getElementById('brain-forms')
+      const el = D?.getElementById('brain-forms')
       SEEN = el ? JSON.parse(el.textContent) : null
     } catch {
       SEEN = null
     }
-  return (SEEN && SEEN[id]) || null
+  return SEEN?.[id] || null
 }
 
 export function form(schema, o = {}) {
@@ -98,12 +95,12 @@ function compiledForm(schema, o, types, validate, remote) {
 }
 // Only public/dynamic or check-configured forms retain this optional capability.
 function remoteCheck(o, x, checking) {
-  const c = o.check && o.check[x.path], v = untrack(() => x.s.v)
+  const c = o.check?.[x.path], v = untrack(() => x.s.v)
   if (!c || untrack(() => x.e.v)) return Promise.resolve(untrack(() => x.e.v))
   checking.v++
   return Promise.resolve()
     .then(() => c(v))
-    .then(m => m || '', e => (e && e.kind === 'aborted' ? '' : (e && e.message) || msg('form.check_failed', 'Could not check this value.')))
+    .then(m => m || '', e => (e?.kind === 'aborted' ? '' : e?.message || msg('form.check_failed', 'Could not check this value.')))
     .then(m => {
       if (untrack(() => x.s.v) === v) x.e.v = m
       return untrack(() => x.e.v)
@@ -123,7 +120,7 @@ function createForm(schema, o, readRule, validateRule, remote) {
     for (const k of Object.keys(sch)) {
       const r = readRule(sch[k], k), path = base ? base + '.' + k : k
       if (r.t === 'obj') {
-        const sub = build(r.s, path, (init && init[k]) || {})
+        const sub = build(r.s, path, init?.[k] || {})
         Object.defineProperty(v, k, { enumerable: true, value: sub.v })
         Object.defineProperty(err, k, { enumerable: true, value: sub.err })
         continue
@@ -136,7 +133,7 @@ function createForm(schema, o, readRule, validateRule, remote) {
         get: () => x.s.v,
         set: val => {
           x.s.v = val
-          track(x, D && D.activeElement)
+          track(x, D?.activeElement)
           if (x.touched) validate(x) // already shown: keep the message live while fixing it
         },
       })
@@ -151,12 +148,14 @@ function createForm(schema, o, readRule, validateRule, remote) {
     if (!el || x.el || el.$ff || !el.isConnected || !/^(INPUT|SELECT|TEXTAREA)$/.test(el.tagName || '')) return
     x.el = el
     el.$ff = x
+    // a form holding a password (sign in, sign up) is not work to lose: leaving it never asks
+    if (el.form?.querySelector('[type=password]')) DIRTY.delete(f)
     el.addEventListener('focusout', () => touch(x))
     I.root(() => fx(() => {
       const e = shown.v >= 0 && x.touched && x.e.v // reads shown first: re-runs when the field gets touched
       if (e) el.setAttribute('aria-invalid', 'true')
       else el.removeAttribute('aria-invalid')
-      const d = D && D.getElementById(fid(x.path))
+      const d = D?.getElementById(fid(x.path))
       if (e && d) el.setAttribute('aria-describedby', fid(x.path))
       else if (el.getAttribute('aria-describedby') === fid(x.path)) el.removeAttribute('aria-describedby')
     }), owner)
@@ -171,11 +170,11 @@ function createForm(schema, o, readRule, validateRule, remote) {
 
   // A form posted without JS (§38) comes back from the server with its values and messages: start from them, already
   // shown, both while the server renders the page and when the page hydrates
-  const st = posted(o.submit && o.submit.id)
+  const st = posted(o.submit?.id)
   const { v, err } = build(schema, '', st ? st.values : o.init)
   if (st) {
-    for (const p in st.errors || {}) if (byPath[p]) (byPath[p].e.v = String(st.errors[p])), (byPath[p].touched = true)
-    error.v = st.error || ''
+    mark(st.errors || {})
+    if (st.error) error.v = st.error
   }
   const now = () => JSON.stringify(F.map(x => x.s.v))
   saved.v = untrack(now)
@@ -185,17 +184,21 @@ function createForm(schema, o, readRule, validateRule, remote) {
     for (const x of F) {
       const ks = x.path.split('.')
       let t = r
-      for (const k of ks.slice(0, -1)) t = t[k] || (t[k] = {})
+      for (const k of ks.slice(0, -1)) t = t[k] ||= {}
       t[ks.at(-1)] = out(x.r, untrack(() => x.s.v))
     }
     return r
   }
+  // errors with no field on this form never vanish: the first one (or a plain sentence) becomes f.error
   function mark(errors) {
     batch(() => {
+      let hit, left
       for (const p in errors) {
         const x = byPath[p]
-        if (x) (x.e.v = String(errors[p])), (x.touched = true)
+        if (x) (x.e.v = String(errors[p])), (x.touched = hit = true)
+        else left ??= errors[p]
       }
+      if (!hit) error.v = String(left ?? msg('form.rejected', 'This could not be saved. Check it and try again.'))
       shown.v++
     })
   }
@@ -253,9 +256,15 @@ function createForm(schema, o, readRule, validateRule, remote) {
       })
     },
     async submit(e) {
-      if (e && e.preventDefault) e.preventDefault()
+      e?.preventDefault?.()
       if (untrack(() => busy.v)) return // no re-entry: a double click sends once
-      const fm = e && e.target && e.target.elements ? e.target : null
+      const fm = e?.target?.elements ? e.target : null, was = D?.activeElement
+      // the first rejected field, or back to the control the browser took focus from (it fell to <body>, the keyboard too)
+      const aim = () => {
+        const x = F.find(x => x.el && x.touched && untrack(() => x.e.v))
+        if (x) x.el.focus()
+        else if (D?.activeElement == D?.body) was?.focus()
+      }
       let first = null
       batch(() => {
         for (const x of F) {
@@ -268,39 +277,40 @@ function createForm(schema, o, readRule, validateRule, remote) {
         shown.v++
       })
       if (o.validate && !first) {
-        const cross = o.validate(values()) // cross-field rules: { field: msg }
-        if (cross && Object.keys(cross).length) {
-          mark(cross)
-          first = byPath[Object.keys(cross)[0]] || null
-          if (!first) return
+        const cross = o.validate(values()) // cross-field rules: { field: msg }; an empty message means valid
+        const failed = cross && Object.fromEntries(Object.entries(cross).filter(([, message]) => message))
+        if (failed && Object.keys(failed).length) {
+          mark(failed)
+          return void aim()
         }
       }
-      if (first) return void (first.el && first.el.focus && first.el.focus())
+      if (first) return void aim()
       busy.v = true
       if (fm) fm.setAttribute('aria-busy', 'true') // assistive tech hears the form is working
       try {
         if (remote && o.check) {
           await Promise.all(F.map(x => remote(o, x, checking)))
-          first = F.find(x => untrack(() => x.e.v))
-          if (first) return void (shown.v++, first.el && first.el.focus && first.el.focus())
+          if (F.some(x => untrack(() => x.e.v))) return void shown.v++
         }
         if (!o.submit) return
         const r = await o.submit(values())
-        if (r && r.errors) mark(r.errors)
+        if (r?.errors) mark(r.errors)
         else {
           saved.v = untrack(now) // saved: no longer dirty
           // `return { redirect: '/x' }` from the server function: the same page the 303 reaches without JS (§38)
-          if (r && typeof r.redirect === 'string' && r.redirect[0] === '/' && r.redirect[1] !== '/') go(r.redirect)
+          if (typeof r?.redirect === 'string' && r.redirect[0] === '/' && r.redirect[1] !== '/') go(r.redirect)
         }
         return r
       } catch (x) {
-        if (x && x.errors) mark(x.errors)
+        if (x?.errors) mark(x.errors)
         // a server failure reads the same as without JS: 4xx and the author's own errors keep their message; 5xx and a
-        // TypeError (the network dropped, or a bug) get the generic one
-        else if (!(x && x.kind === 'aborted')) error.v = (x && x.message && !(x.status >= 500) && x.name !== 'TypeError' && x.message) || msg('form.error', GENERIC)
+        // TypeError (the network dropped, or a bug) get the generic one; the runtime's own English sentence (`plain`) gives
+        // way to the app's translated form.rejected
+        else if (x?.kind !== 'aborted') error.v = (!(x?.status >= 500) && x?.name !== 'TypeError' && (x?.plain ? msg('form.rejected', x.message) : x?.message)) || msg('form.error', GENERIC)
       } finally {
         busy.v = false
         if (fm) fm.removeAttribute('aria-busy')
+        queueMicrotask(aim) // after the flush re-enables what `disabled={f.busy}` disabled
       }
     },
   }

package/brain-inspect.js

@@ -261,6 +261,9 @@ const watched = []
 // No deref(): reading a WeakRef keeps the target alive for the job (KeepDuringJob) and, checking every
 // second, the inspector would cause the leak it measures. The FinalizationRegistry marks the record on collection.
 const fin = G.FinalizationRegistry ? new FinalizationRegistry(w => (w.dead = 1)) : null
+// Where a pending request went, without origin or query: evidence for a fix, never a value.
+const pendingUrls = () => [...inflight.values()].slice(0, 3).map(r => `${r.m} ${r.url.replace(/^[a-z]+:\/\/[^/]+/i, '').split(/[?#]/)[0]}`)
+const SETTLE_MS = 60000
 function watch(d) {
   if (!fin) return
   // its first DOM node: an app that keeps a detached node (a module array, a cache) is the leak to catch. The browser
@@ -268,7 +271,7 @@ function watch(d) {
   // collecting. Unmounted nodes no longer point at their instance (brain-dev, brain-guard), so a kept node is small.
   const target = (d.n && d.n.find(x => x.nodeType === 1)) || d.r
   if (!target) return
-  const w = { dead: 0, h: d.h, name: nameOf(d), file: (d.C && d.C.f) || null, at: gcs, fx: (d.r && b602ByInst.get(d.r)) || [] }
+  const w = { dead: 0, h: d.h, name: nameOf(d), file: (d.C && d.C.f) || null, at: gcs, fx: (d.r && b602ByInst.get(d.r)) || [], since: now(), net: [...inflight.keys()], urls: pendingUrls() }
   fin.register(target, w)
   watched.push(w)
 }
@@ -276,28 +279,37 @@ function checkLeaks() {
   for (let j = watched.length - 1; j >= 0; j--) {
     const w = watched[j]
     if (w.dead) watched.splice(j, 1)
+    // A request from before the unmount may be what holds it: judge after it settles (bounded, for a long poll).
+    else if (w.net.some(id => inflight.has(id)) && now() - w.since < SETTLE_MS) w.at = gcs
     else if (gcs - w.at >= 2) {
       watched.splice(j, 1)
-      leak({ code: 'B0601', h: w.h, name: w.name, file: w.file, msg: `unmounted ${w.name} instance still alive after 2 GC cycles`, fix: w.fx.length ? 'add cleanup to the listed fx: they retain the instance' : 'look for external references to its nodes or signals (global listeners, caches, module closures)', fx: w.fx })
+      const waited = w.urls.length ? `${w.urls.length > 2 ? 'several requests' : w.urls.join(', ')} ${w.urls.length > 1 ? 'were' : 'was'} in flight when it unmounted; ` : ''
+      leak({ code: 'B0601', h: w.h, name: w.name, file: w.file, msg: `unmounted ${w.name} instance still alive after 2 GC cycles`, fix: w.fx.length ? 'add cleanup to the listed fx: they retain the instance' : `${waited}look for what still references its nodes or signals: an in-flight promise (a pending server call, \`.then\` or \`await\`) or timer that writes to the component, global listeners, caches, module closures`, fx: w.fx })
     }
   }
 }
 
 // ---------- network: fetch and XHR ----------
 let rid = 1
+// Requests without an answer yet, id → { m, url, stop }: a `.then` or `await` waiting on one keeps what it closes over
+// alive, so an instance unmounted meanwhile is not a verdict yet (B0601). `stop` is absent when the caller holds its own signal.
+const inflight = new Map()
 function patchNet() {
   if (O.fetch && !G.fetch.$bi) {
     G.fetch = function (input, init) {
       const c = ctx(), s = site(), t0 = pnow()
       const r = { k: 'net', id: rid++, kind: 'fetch', m: (init && init.method) || (input && input.method) || 'GET', url: String((input && input.url) || input), own: own(c), line: s.line, foreign: s.foreign, at: now(), st: null, ms: null, b: null }
       push(r)
-      return O.fetch.call(this, input, init).then(
+      const ac = G.AbortController && !(init && init.signal) && !(input && input.signal) ? new AbortController() : null
+      inflight.set(r.id, { m: r.m, url: r.url, stop: ac && (() => ac.abort()) })
+      return O.fetch.call(this, input, ac ? { ...init, signal: ac.signal } : init).then(
         res => {
+          inflight.delete(r.id)
           const len = res.headers && res.headers.get && res.headers.get('content-length')
           push({ k: 'net', id: r.id, st: res.status, ms: +(pnow() - t0).toFixed(1), b: len == null ? null : +len })
           return res
         },
-        err => (push({ k: 'net', id: r.id, st: 0, ms: +(pnow() - t0).toFixed(1), err: String(err) }), Promise.reject(err))
+        err => (inflight.delete(r.id), push({ k: 'net', id: r.id, st: 0, ms: +(pnow() - t0).toFixed(1), err: String(err) }), Promise.reject(err))
       )
     }
     G.fetch.$bi = 1
@@ -313,7 +325,8 @@ function patchNet() {
     X.send = function (body) {
       const c = ctx(), s = site(), t0 = pnow(), r = { k: 'net', id: rid++, kind: 'xhr', ...(this.$r || {}), own: own(c), line: s.line, foreign: s.foreign, at: now(), st: null, ms: null, b: null }
       push(r)
-      this.addEventListener('loadend', () => push({ k: 'net', id: r.id, st: this.status, ms: +(pnow() - t0).toFixed(1), b: typeof this.responseText === 'string' ? this.responseText.length : null }))
+      inflight.set(r.id, { m: r.m, url: r.url, stop: () => this.abort() })
+      this.addEventListener('loadend', () => (inflight.delete(r.id), push({ k: 'net', id: r.id, st: this.status, ms: +(pnow() - t0).toFixed(1), b: typeof this.responseText === 'string' ? this.responseText.length : null })))
       return send.call(this, body)
     }
   }
@@ -695,7 +708,7 @@ export function inspect(o) {
     G.document.addEventListener.call(G.document, 'keydown', e => e.altKey && e.shiftKey && e.code === 'KeyB' && toggle())
   return api
 }
-const api = { tick, drain, comps, onLoaf, onEvents, leaks: () => leaks.slice(), timers: () => [...timers.values()], toggle: () => toggle() }
+const api = { tick, drain, comps, onLoaf, onEvents, leaks: () => leaks.slice(), timers: () => [...timers.values()], toggle: () => toggle(), inflight: () => [...inflight.values()].map(r => `${r.m} ${r.url}`), abortInflight: () => { for (const r of inflight.values()) if (r.stop) r.stop() } }
 
 // ---------- mini panel (Alt+Shift+B): heap, leaks and link to the full debugger (§9.1) ----------
 let panel = null

package/brain-island.js

@@ -98,7 +98,8 @@ export function hydrate(r = document, rt) {
         e.stopPropagation()
         ;(el.$b || (el.$b = resume(el, s))).then(
           n => (n = at(n, path)) && n.dispatchEvent(new e.constructor(t, e)),
-          x => I.oops(x, null, 'island') // reported once to the catcher, never an unhandled rejection
+          // a real link still goes where it points (last navigation wins over _cf's reload); the rest is reported once
+          x => { const a = e.target.closest('a[href]'); a && (a.getAttribute('href') || '#')[0] != '#' ? location.assign(a.href) : I.oops(x, null, 'island') }
         )
       },
       true

package/brain-lazy.js

@@ -44,6 +44,7 @@ export function lazy(el, imp, mode, props = {}) {
       })
       .catch(e => {
         el.$l = null
+        clicked = null // a retry must not replay a click from before the failure
         if (dead) return
         el.setAttribute('aria-busy', 'false')
         retry()
@@ -64,6 +65,7 @@ export function lazy(el, imp, mode, props = {}) {
       if (e.type === 'keydown') {
         if (e.key !== 'Enter' && e.key !== ' ') return
         e.preventDefault()
+        clicked = new Event('click', { bubbles: true, cancelable: true }) // the key press is what the user asked for
       }
       if (e.type === 'click') (clicked = e), e.preventDefault(), e.stopPropagation()
       go()

package/brain-links.js

@@ -0,0 +1,37 @@
+// Internal links keep the page's language (INTERNALS §37). The views compile once for every language, so their
+// `href="/about"` reaches a page in `es` unprefixed: `brain build` rewrites the HTML it writes, and this module, loaded
+// only by pages outside the default language, rewrites what the views mount afterwards. A link with `hreflang` points
+// at a language on purpose and is left alone. go()/navigate() read the same table through __brainHref.
+const G = globalThis
+const SEL = 'a[href],form[action]'
+let tables
+
+// b: base path without its trailing slash; p: language prefix; re: paths with a page; s: translated routes.
+export default function links(lang, b, p, re, s) {
+  if (tables) return void (tables[lang] = { b, p, re: new RegExp(re), s })
+  tables = { [lang]: { b, p, re: new RegExp(re), s } }
+  const to = h => {
+    const t = tables[document.documentElement.getAttribute('lang')]
+    if (!t || !h || h[0] !== '/' || h[1] === '/') return h
+    const a = t.b && (h + '/').startsWith(t.b + '/') ? h.slice(t.b.length) || '/' : h
+    const m = /^[^?#]*/.exec(a)[0]
+    const n = t.s[m] || (t.re.test(m) && (m === '/' ? t.p : t.p + m))
+    return n ? t.b + n + a.slice(m.length) : h
+  }
+  G.__brainHref = to
+  const fix = e => {
+    const n = e.localName === 'form' ? 'action' : 'href', h = e.getAttribute(n), v = e.hasAttribute('hreflang') ? h : to(h)
+    if (v === h) return
+    e.setAttribute(n, v)
+    if (n === 'href' && v.split(/[?#]/)[0] === location.pathname) e.setAttribute('aria-current', 'page')
+  }
+  const all = r => r.querySelectorAll?.(SEL).forEach(fix)
+  new MutationObserver(l => l.forEach(m => {
+    if (m.type === 'attributes') return fix(m.target)
+    m.addedNodes.forEach(n => {
+      if (n.matches?.(SEL)) fix(n)
+      all(n)
+    })
+  })).observe(document, { subtree: true, childList: true, attributes: true, attributeFilter: ['href', 'action'] })
+  all(document)
+}

package/brain-live.js

@@ -68,14 +68,14 @@ function createBroker() {
   const members = new Set(), joined = new Map(), waiting = [], events = new Map()
   let socket = null, epoch = 0, scope = null, terminal = '', ready = false
   let reconcileQueued = false, retryTimer, readyTimer, heartbeat, pongTimer, flushTimer
-  let attempts = 0, retryStart = 0, lastConnect = 0, healthySince = 0
+  let attempts = 0, retryStart = 0, lastConnect = 0, healthySince = 0, probed = false
 
   const update = () => {
     for (const member of members) {
       const active = [...member.rooms.keys()].some(key => joined.get(key) === 'ready')
       const forbidden = member.rooms.size > 0 && [...member.rooms.keys()].every(key => joined.get(key) === 'forbidden')
       member.up.v = !!(socket && ready && member.scope && member.scope === scope && active)
-      member.state.v = !member.scope || !member.rooms.size ? 'idle' : terminal || (member.refreshState || (forbidden ? 'forbidden' : member.up.v ? 'open' : retryTimer ? 'retrying' : 'connecting'))
+      member.state.v = !member.rooms.size ? 'idle' : !member.scope ? 'anonymous' : terminal || (member.refreshState || (forbidden ? 'forbidden' : member.up.v ? 'open' : retryTimer ? 'retrying' : 'connecting'))
     }
   }
   const clearMember = member => {
@@ -105,6 +105,20 @@ function createBroker() {
     for (const member of members) { clearMember(member); member.up.v = false }
   }
   const reject = state => { stop(); terminal = state; update() }
+  // The browser hides the status of a refused upgrade, so a closed session looks like a network failure. Once per
+  // outage, the resource's own read says which it is: a 401 is final, anything else keeps the retries.
+  const refused = () => {
+    if (probed) return
+    probed = true
+    for (const member of members) if (member.scope) {
+      try { untrack(() => member.node.refetch()) } catch { continue }
+      setTimeout(() => {
+        if (!members.has(member) || terminal || ready) return
+        Promise.resolve(untrack(() => member.node.v)).catch(e => { if (e && e.status === 401 && members.has(member) && !ready) reject('auth-required') })
+      }, 0)
+      return
+    }
+  }
   const send = value => {
     if (!socket || socket.readyState !== 1 || socket.bufferedAmount > BUFFER) return false
     const text = JSON.stringify(value)
@@ -201,15 +215,17 @@ function createBroker() {
     try { address = endpoint() } catch { reject('invalid-config'); return }
     try { socket = new G.WebSocket(address, 'brain.v1') } catch { retry(); return }
     readyTimer = setTimeout(() => { if (epoch === captured) retry() }, READY_MS)
+    let opened = false
     socket.onopen = () => {
       if (epoch !== captured) return
+      opened = true
       if (socket.protocol !== 'brain.v1') reject('protocol-error')
     }
     socket.onerror = () => { /* close or the ready deadline owns retries; arbitrary browser errors are not retained. */ }
     socket.onclose = event => {
       if (epoch !== captured) return
       if (event.code === 1008) reject(event.reason === 'Authentication expired' ? 'auth-required' : 'policy-closed')
-      else retry()
+      else { if (!opened) refused(); retry() }
     }
     socket.onmessage = event => {
       if (epoch !== captured) return
@@ -217,7 +233,7 @@ function createBroker() {
       if (!value) { reject('protocol-error'); return }
       if (value.type === 'ready') {
         if (ready) { reject('protocol-error'); return }
-        clearTimeout(readyTimer); readyTimer = null; ready = true
+        clearTimeout(readyTimer); readyTimer = null; ready = true; probed = false
         syncRooms(desired().rooms)
         heartbeat = setInterval(() => {
           if (!send({ type: 'ping' })) { retry(); return }
@@ -279,7 +295,7 @@ function createBroker() {
     },
     reconnect(member) {
       if (!members.has(member)) return
-      stop(); terminal = ''; attempts = 0; retryStart = 0; queue()
+      stop(); terminal = ''; attempts = 0; retryStart = 0; probed = false; queue()
     },
   }
 }

package/brain-observe.js

@@ -0,0 +1,120 @@
+// Dev observability panel. `brain run` loads this file; builds never contain it. Alt+Shift+O or `?brain-observe` opens it.
+// It shows what the running page does: Web Vitals, requests, long frames, errors and live components, and "Pick" names
+// the component and source file of an element. `__brainObserve.snapshot()` returns the same data as JSON for an agent.
+import { live } from './brain-dev.js'
+import { sub } from './brain-err.js'
+import { vitals } from './brain-vitals.js'
+
+const LIMIT = 40
+const data = { vitals: {}, requests: [], frames: [], errors: 0, updates: 0 }
+const keep = (list, item) => { list.unshift(item); if (list.length > LIMIT) list.pop() }
+let host, box, on = false, timer, picking = null
+
+const CSS = `:host{all:initial;position:fixed;left:16px;bottom:16px;z-index:2147483646;font:12px/1.45 system-ui,-apple-system,sans-serif;color:#1a1a1a}
+.p{width:min(420px,calc(100vw - 32px));max-height:min(70vh,560px);overflow:auto;box-sizing:border-box;border-radius:16px;padding:12px 14px;background:rgba(255,255,255,.76);
+-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(0,0,0,.08);
+box-shadow:0 1px 3px rgba(16,24,40,.08),0 12px 32px rgba(16,24,40,.14)}@supports not (backdrop-filter:blur(1px)){.p{background:#fff}}
+@media (prefers-color-scheme:dark){:host{color:#f2f2f2}.p{background:rgba(28,28,30,.84);border-color:rgba(255,255,255,.1)}}
+.h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:600}h3{margin:10px 0 4px;font-size:11px;font-weight:600;opacity:.65}
+.v{display:flex;flex-wrap:wrap;gap:6px;font-variant-numeric:tabular-nums}.v span{padding:2px 7px;border-radius:8px;background:rgba(127,127,127,.14)}
+.good{color:#0a7d32}.needs-improvement{color:#a85b00}.poor,.bad{color:#d70015}
+.r{display:flex;gap:8px;font-variant-numeric:tabular-nums}.r b{font-weight:500;min-width:30px}.r i{flex:1;font-style:normal;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.e{opacity:.6}
+button{font:inherit;padding:3px 10px;border-radius:8px;border:1px solid rgba(127,127,127,.35);background:transparent;color:inherit;cursor:pointer}`
+
+const el = (tag, cls, text) => Object.assign(document.createElement(tag), cls ? { className: cls } : {}, text === undefined ? {} : { textContent: text })
+const fileOf = i => i.C?.f ?? null
+const nameOf = i => i.C?.C?.name || i.C?.name || i.h
+
+export function components() {
+  const rows = []
+  for (const [hash, set] of live) if (set.size) { const i = set.values().next().value; rows.push({ name: nameOf(i), file: fileOf(i), hash, instances: set.size }) }
+  return rows.sort((a, b) => b.instances - a.instances)
+}
+// The innermost live component: brain-dev marks each root element of an instance with `$i`.
+export function componentOf(node) {
+  for (let n = node; n; n = n.parentNode ?? n.host) {
+    const i = n.$i
+    if (i) return { name: nameOf(i), file: fileOf(i), hash: i.h }
+  }
+  return null
+}
+export const snapshot = () => ({ path: location.pathname, vitals: { ...data.vitals }, requests: data.requests.slice(), longFrames: data.frames.slice(), errors: data.errors, hotUpdates: data.updates, components: components() })
+
+function section(title, rows, empty) {
+  const out = [el('h3', '', title)]
+  if (!rows.length) out.push(el('div', 'e', empty))
+  return out.concat(rows)
+}
+function draw() {
+  if (!box) return
+  const pick = el('button', '', picking ? 'Picking… Esc cancels' : 'Pick')
+  pick.onclick = () => (picking ? stopPick() : startPick())
+  const head = el('div', 'h', 'brain observe')
+  head.append(pick)
+  const metrics = el('div', 'v')
+  for (const [name, m] of Object.entries(data.vitals)) metrics.append(el('span', m.rating, `${name} ${m.value}${name === 'CLS' ? '' : ' ms'}`))
+  const row = (a, b, c, cls) => { const r = el('div', 'r' + (cls ? ' ' + cls : '')); r.append(el('b', '', a), el('i', '', b), el('span', '', c)); return r }
+  box.replaceChildren(
+    head,
+    ...section('Web Vitals', metrics.childElementCount ? [metrics] : [], 'Waiting for the browser to report.'),
+    ...section(`Requests (${data.requests.length})`, data.requests.slice(0, 8).map(r => row(String(r.status ?? '…'), `${r.method ?? ''} ${r.url}`, `${r.ms ?? '?'} ms`, r.status >= 400 ? 'bad' : '')), 'No api() request yet.'),
+    ...section(`Long frames (${data.frames.length}) · errors ${data.errors} · hot updates ${data.updates}`, data.frames.slice(0, 4).map(f => row(`${f.ms}`, f.source || 'unattributed', 'ms')), 'No frame over 50 ms.'),
+    ...section(`Components (${live.size})`, components().slice(0, 8).map(c => row(`×${c.instances}`, c.file ?? c.name, '')), 'None mounted.'),
+  )
+}
+function toggle(force) {
+  on = force ?? !on
+  try { on ? sessionStorage.setItem('brain:observe', '1') : sessionStorage.removeItem('brain:observe') } catch {}
+  if (!on) { stopPick(); clearInterval(timer); host?.remove(); return on }
+  if (!host) {
+    host = document.createElement('brain-observe')
+    const root = host.attachShadow({ mode: 'open' })
+    root.append(el('style', '', CSS))
+    box = root.appendChild(el('div', 'p'))
+  }
+  document.body.append(host)
+  draw()
+  timer = setInterval(draw, 1000)
+  return on
+}
+function startPick() {
+  const mark = el('div')
+  mark.style.cssText = 'position:fixed;z-index:2147483645;pointer-events:none;outline:2px solid #0071e3;background:rgba(0,113,227,.08);border-radius:3px'
+  const tip = el('div')
+  tip.style.cssText = 'position:fixed;z-index:2147483645;pointer-events:none;padding:2px 8px;border-radius:6px;background:#111;color:#fff;font:12px ui-monospace,monospace'
+  document.body.append(mark, tip)
+  const move = ev => {
+    if (ev.target === host) return
+    const r = ev.target.getBoundingClientRect(), c = componentOf(ev.target)
+    Object.assign(mark.style, { left: r.left + 'px', top: r.top + 'px', width: r.width + 'px', height: r.height + 'px' })
+    Object.assign(tip.style, { left: r.left + 'px', top: Math.max(0, r.top - 24) + 'px' })
+    tip.textContent = c ? c.file ?? c.name : 'outside any component'
+  }
+  const click = ev => {
+    if (ev.target === host) return
+    ev.preventDefault(); ev.stopPropagation()
+    const c = componentOf(ev.target)
+    if (c) console.info('brain:observe', c)
+    dispatchEvent(new CustomEvent('brain:observe-pick', { detail: c }))
+    stopPick()
+  }
+  const key = ev => ev.key === 'Escape' && stopPick()
+  addEventListener('mousemove', move, true); addEventListener('click', click, true); addEventListener('keydown', key, true)
+  picking = () => { removeEventListener('mousemove', move, true); removeEventListener('click', click, true); removeEventListener('keydown', key, true); mark.remove(); tip.remove() }
+  draw()
+}
+function stopPick() { picking?.(); picking = null; draw() }
+
+export function start() {
+  vitals(m => { data.vitals[m.name] = m })
+  addEventListener('brain:net', ev => keep(data.requests, ev.detail))
+  addEventListener('brain:hmr', () => data.updates++)
+  sub.add(() => data.errors++)
+  if (PerformanceObserver.supportedEntryTypes?.includes('long-animation-frame'))
+    new PerformanceObserver(list => { for (const e of list.getEntries()) keep(data.frames, { ms: Math.round(e.duration), source: e.scripts?.[0]?.sourceURL ? new URL(e.scripts[0].sourceURL, location.href).pathname : '' }) }).observe({ type: 'long-animation-frame', buffered: true })
+  addEventListener('keydown', ev => { if (ev.altKey && ev.shiftKey && ev.code === 'KeyO') { ev.preventDefault(); toggle() } })
+  globalThis.__brainObserve = { snapshot, toggle, componentOf }
+  let saved = false
+  try { saved = sessionStorage.getItem('brain:observe') === '1' } catch {}
+  if (saved || new URLSearchParams(location.search).has('brain-observe')) toggle(true)
+}