fix: key HeroSlackMessage body paragraph by message id to prevent removeChild crash #SUPERLOG

[superlog-app]

Summary

The homepage (/) crashes with Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. every time the animated Slack card in the hero section rotates (every 2.8 s). The BrowserErrorBoundary catches it and renders the error screen, replacing the entire landing page.

Root cause

The HeroSlackMessage component (added in #427) cycles through three message objects via setActiveMessageIndex, triggered by onAnimationIteration on the CSS-animated .landing-slack-shuffle-card div. Each message has a body field — a JSX Fragment created at module initialization time (not at render time) — that mixes raw text nodes with <SlackCode> (<code>) elements.

Because the <p> that renders {message.body} has no key prop, React reconciles its children in place (positional diffing) when the message changes. The homepage is prerendered (SSR via renderToString) and then hydrated client-side with hydrateRoot. Mixed text-node/element fragments can have subtle differences in how adjacent text nodes are split between SSR and CSR, leaving React's internal fiber tree slightly out of sync with the real DOM. When the first animation iteration fires and React tries to remove excess old DOM nodes from the <p>, it calls parentNode.removeChild(node) on a node that is no longer at the expected position, producing the NotFoundError.

Fix

Add key={message.id} to the <p> element. When the key changes, React unmounts and remounts the paragraph entirely rather than attempting incremental child reconciliation, eliminating the stale-reference removeChild call.

// before
<p className="pb-3.5 text-[11.5px] italic ...">
  {message.body}
</p>

// after
<p key={message.id} className="pb-3.5 text-[11.5px] italic ...">
  {message.body}
</p>

All 14 existing Landing.test.ts tests pass.

Incident: c31e760e-d0ec-4e3f-a2b3-2c106c01a7a5

---

Was this PR helpful? Leave feedback — goes straight to the Superlog team.

---

Summary by cubic

Fixes a homepage crash when the hero Slack card rotates by preventing a React DOM mismatch. The message paragraph is now keyed by message.id, so it remounts on change and avoids the removeChild error.

^{Written for commit 5f6a15b. Summary will update on new commits.}

[superlog-app]

Observability review

All clear — no observability concerns found.

All your logs are super.