fix(templates): stop the typed headline crashing under browser translation

[sudoviber]

The bug

With the browser's built-in translation turned on, /templates throws and the whole
route is replaced by the router's error boundary:

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Reported on a self-hosted instance (2026-07-31), reproducible on any Chromium/WebKit
browser with translation enabled.

Root cause

Three things compound:

1. A browser translator does not edit text in place — it moves each text node into an
   injected <font style="vertical-align: inherit;"> wrapper. That silently invalidates
   React's record of the node's parent.
2. TypedLine re-renders its text every 26-55ms, and renders head as a bare text
   node beside a <span> sibling.
3. When the caret reaches a word start, cut === -1 so head becomes '' — React then
   removes that text node instead of just updating its value. The node has already
   been re-parented into <font>, so removeChild throws.

Instrumenting Node.prototype.removeChild in a real browser pinned it exactly:

child:           #text("you")                      ← TypedLine's {tail}
expectedParent:  <span class="whitespace-nowrap">  ← TemplatesPage.tsx:215
actualParent:    <font>                            ← translator's wrapper
ancestorChain:   font > span.whitespace-nowrap > span.block > h1.mx-auto > section.market-hero

1 failure out of 339 wrapped text nodes — the animated one. Everything else on the
page is static, so React never removes those nodes.

The fix

translate="no" on the element that wraps the animated subtree. One fix covers three
surfaces, since AgentLoopsHeadline renders on /templates, the dashboard catalog band
and the pre-login landing.

The attribute is load-bearing rather than cosmetic, so the reasoning is inlined as a
comment next to it.

Verification

Tested in a real browser against a translator simulation that moves text nodes into
<font> and honours translate="no" the way Chrome/Edge/Safari do:

	before	after
removeChild failures	1	0
React errors	NotFoundError	none
Error boundary	Something went wrong!	untouched
Typing animation	dead (route crashed)	running
Cards across 6 filter cycles	n/a	23 intact
<font> inside headline	3	0
<font> elsewhere on page	336	336 (still translated)

The fix is deliberately surgical: only the subtree that mutates text at animation rate
opts out; all the surrounding prose still translates.

Scope was measured, not assumed. With the headline excluded from translation, 6 rounds
of search filtering (including filtering every card away and back) produced 0 failures
— the translator only re-parents text nodes, so element-level removal (cards) is safe.
That ruled out a second failure surface.

I also checked HousekeeperCinematic, which updates numbers every frame: hk-score is its
<span>'s only child and hk-day renders ["Day ", n] with n >= 1, so neither can
become an empty string and React only ever updates nodeValue. Structurally safe, no
change needed.

Tests

AgentLoopsHeadline.test.ts — 4 cases covering both the h1 and compact h2 variants,
that rendering is unchanged, and critically that the attribute sits on an ancestor of the
animated subtree, so relocating it to a sibling fails the guard instead of silently
un-fixing the crash.

Confirmed the guard actually bites by removing the attribute: 3 of 4 assertions fail;
restored, all pass.

• pnpm -r typecheck — both packages clean
• pnpm --filter @loopany/server test — 861 passed

One unrelated pre-existing failure remains: loopDetailCrossTeam.test.ts fails with
EACCES: permission denied, mkdir because it writes evidence into a hardcoded absolute
temp path. Verified it fails identically on unmodified main (git stash), so it is not
from this change. Happy to fix it separately (os.tmpdir() + a unique subdir) if wanted.

🤖 Generated with Claude Code