diff --git a/docs/feature-plan.md b/docs/feature-plan.md
new file mode 100644
index 0000000..3874b2e
--- /dev/null
+++ b/docs/feature-plan.md
@@ -0,0 +1,419 @@
+# The feature plan — what to build next, and why
+
+A **plan**, not a commitment. Nothing here is frozen; items get cut or
+reshaped as they meet the code. What is fixed is the diagnosis below, which
+is the argument for the ordering.
+
+## The diagnosis
+
+Menagerie is unusually well built for the **first** person to arrive. You can
+hatch in a second, the survey is careful, the creature is charming, the
+threat model is honest, and losing work is hard. Almost every recent commit
+has made that first session better.
+
+But the product's value only exists for the **second** person — the compare
+is the payoff, and a compare needs two finished profiles and a moment where
+both people look at it. Almost nothing in the app serves the space _between_
+two people:
+
+- You share a phrase and then have no idea whether they filled it out, or
+  whether they changed an answer after you last looked. The out-of-band
+  channel the app exists to avoid ("hey did you do the thing yet") becomes
+  the coordination layer.
+- A newcomer is asked to spend twenty minutes on a survey before they have
+  ever seen what a comparison looks like. The payoff is invisible until
+  after it has been paid for.
+- The one artifact holding the whole relationship — the edit phrase — has no
+  physical form, and typing a six-word phrase on a phone with no assistance
+  is a typo minefield guarded by a multi-second Argon2 wait.
+
+And the app's audience — people negotiating relationship shape and intimacy,
+heavily overlapping queer, neurodivergent and disabled communities — is not
+well served by a screen-reader experience with one `aria-live` region, zero
+programmatic focus management, and charts with no non-visual equivalent.
+
+So: **the space between two people**, then **the front door**, then
+**everyone who can't use it today**. Reach and offline come last because
+they multiply a loop that should work first.
+
+---
+
+## Track A — The second player
+
+The highest-value work in the tree. Each item shortens the path from "I
+shared my phrase" to "we looked at this together."
+
+### A1 · Freshness in the menagerie
+
+**What.** Each creature you keep shows whether it has changed since you last
+looked at it: _new answers since you compared_, or _profile is gone_.
+
+**Why it's cheap.** `GET /v2/profiles/view/:locator` already returns
+`{ blob_view, version }`, and `version` increments on every save. The check
+is one existing request per connection with no decrypt, no new endpoint, and
+no server change.
+
+**Where.**
+
+- `libs/core/src/hatch/priv-data.ts` — add optional `lastSeenVersion?: number`
+  and `lastCheckedAt?: number` to `SavedConnection`. Optional is the whole
+  trick: `migratePrivData` already fills absent fields, so no `v` bump and no
+  new migration.
+- `libs/core/src/hatch/hatch-client.ts` — a `fetchViewVersion(client, phrase)`
+  beside `fetchViewPayload`, deriving the locator and returning the version
+  without decrypting.
+- `src/app/stores/profile-session.store.ts` — record `lastSeenVersion` when a
+  connection is viewed or compared; a `refreshConnections()` that fills in
+  current versions.
+- `src/app/menagerie/menagerie.component.ts` — badge, and an explicit
+  "Check for updates" control.
+
+**Design decisions to make deliberately.**
+
+- **Refresh on page load plus an explicit button. No background polling.**
+  A poll bumps `last_viewed_at`, which is good (it holds off GC) but also
+  hands the server a heartbeat that says "this person is still watching this
+  profile" on a schedule. One refresh per visit is indistinguishable from
+  visiting, which is the point.
+- Deriving the view locator costs Argon2id per connection. Cache the
+  locator, not just the version, or a menagerie of ten becomes a ten-second
+  wait. Locators are already secret-equivalent and already live in an
+  edit-key-encrypted blob, so caching one costs nothing new.
+- A 404 means deleted, expired, or re-minted, and the UI must not guess
+  which. "This creature's phrase no longer opens anything" plus a remove
+  action.
+
+**Done when** a saved connection that saves an answer elsewhere shows as
+updated on the next menagerie visit, with a spec covering fresh / updated /
+gone, and the About page's honest-limits list mentions the refresh.
+
+**Size.** Medium. The most valuable single item in this document.
+
+### A2 · A demo compare, before you hatch
+
+**What.** Two fictional creatures with full answer sets, comparable from the
+landing page in one tap, showing the real panels with real scores —
+including a dealbreaker alert and a mutual-desire reveal, because those are
+the two things nobody expects and everybody remembers.
+
+**Why.** It is the only way to show the payoff before charging for it, and
+it fixes the cold start for every audience at once: the curious couple who
+won't commit, the polyam power user evaluating whether this beats their
+spreadsheet, the person who wants to see what their partner would see.
+
+**Where.** A `src/app/demo/` route rendering `CompareComponent`'s panels
+against bundled payloads rather than fetched ones — the compare pipeline
+already separates "load and decrypt" from "score and render"
+(`compare-model.ts` takes payloads), so the seam exists. Landing page gets
+the entry point.
+
+**Constraints.**
+
+- Demo payloads must be built from real schema ids, and a spec must assert
+  they still decode after any schema change. A demo that rots is worse than
+  none.
+- It must work with the server unreachable or unconfigured — nothing about
+  it should touch `HatchClient`. This doubles as the one page that still
+  works when the profile server is down.
+- Reuse the QA cast in `docs/qa-profiles.md` rather than inventing a third
+  set of fixtures, if their answers make a good story.
+
+**Done when** a visitor with no profile and no server can see a full
+comparison from the landing page, and the demo is one obvious step from
+hatching.
+
+**Size.** Medium.
+
+### A3 · Close the loop when a stranger views you
+
+**What.** Someone opens `#/view/<phrase>` from a QR with no profile of their
+own. Today they read and leave. They should be offered: hatch your own, then
+compare against the one you're looking at — with the viewed phrase already
+in the compare slot and offered for their menagerie.
+
+**Why.** This is the viral loop, and it currently ends in a dead end at the
+exact moment of maximum interest.
+
+**Where.** `src/app/view/view.component.ts` (a CTA when
+`session.active()` is false), and `src/app/stores/compare.store.ts` to carry
+the pending phrase across the hatch.
+
+**Done when** a first-time viewer can go from a scanned QR to a two-way
+comparison without ever typing a phrase by hand.
+
+**Size.** Small.
+
+### A4 · "Enough to compare" as a real moment
+
+**What.** The survey has 23 `tier: 'core'` items among 96. Finishing the core
+tier should be an explicit, celebrated milestone that hands you your share
+controls, not a quiet threshold you cross without noticing.
+
+**Why.** It converts survey fatigue into a checkpoint, and it puts the share
+prompt at the moment the profile first becomes worth sharing.
+
+**Where.** `src/app/dashboard/`, and whatever computes section progress.
+
+**Done when** completing the core tier produces a distinct state with the
+view phrase, QR, and "send this to someone" in it.
+
+**Size.** Small.
+
+---
+
+## Track B — Make the front door survivable
+
+### B1 · The backup card
+
+**What.** A printable card: the creature portrait, both phrases, the view QR,
+the date, and one line saying exactly what each phrase does and what losing
+the edit phrase costs. Print to paper for a drawer, or to PDF for a password
+manager.
+
+**Why.** Permanent, unrecoverable loss is the product's worst failure mode
+and its only mitigation today is "write it down." This is an afternoon of
+work against it.
+
+**Where.** A route under `/settings` plus a print stylesheet in
+`libs/ui/src/styles/`. `window.print()` and `@media print` — no new
+dependency, no canvas rasterizing, and the browser's own "save as PDF" does
+the export.
+
+**Constraints.** The card carries the edit phrase, so it needs an unmissable
+warning that printing it puts full edit control on a piece of paper, and it
+must never be reachable from a view-only session.
+
+**Done when** a logged-in profile can produce a one-page card that reads
+correctly in both themes and in print, with an e2e or component spec
+asserting both phrases and the QR are on it.
+
+**Size.** Small–medium.
+
+### B2 · Phrase entry that forgives
+
+**What.** Three things, in ascending order of payoff:
+
+1. **Did-you-mean before Argon2.** A phrase whose words aren't in the
+   wordlists cannot possibly be right, and checking that is instant while
+   the KDF takes seconds. Reject early, name the word that's wrong, and
+   offer the edit-distance-1 candidate. Today a typo costs a multi-second
+   wait and a generic failure.
+2. **Per-word autocomplete** on the phrase inputs. Wordlists are public by
+   design (`persona/wordlists.ts`, `tail-wordlists.ts`, EFF), so suggesting
+   from them leaks nothing that isn't already shipped in the bundle.
+3. **Tolerant normalization** — spaces or hyphens, any case, stray
+   punctuation, pasted URLs. `canonicalViewPhrase` and `extractViewPhrase`
+   already do part of this; make sure both inputs use them consistently.
+
+**Where.** `src/app/landing/landing.component.ts`,
+`src/app/edit-login/edit-login.component.ts`, and a shared phrase-input
+component in `libs/ui` once there's a second copy — per CLAUDE.md, extract
+on the third.
+
+**Constraint.** The EFF list is a lazy chunk and should stay one: load it on
+first focus of an edit-phrase field, not on landing-page paint.
+
+**Done when** a one-letter typo in either phrase produces an instant,
+specific, correctable error instead of a slow generic one.
+
+**Size.** Medium.
+
+### B3 · Confirm the edit phrase at hatch
+
+**What.** One lightweight confirmation step after hatching — retype a
+single word from the edit phrase, or tick "I've saved this" next to the
+backup-card link.
+
+**Why.** It converts "I'll write it down later" into a decision made while
+the phrase is still on screen. Pair it with B1 so the confirmation has
+somewhere to send people.
+
+**Constraint.** It must be skippable. The instant, frictionless hatch is a
+real feature and a modal gate would spoil it.
+
+**Size.** Small.
+
+---
+
+## Track C — Accessibility
+
+Track A and B make the product better. This track makes it usable at all for
+people it currently locks out, and C2 is good enough to be a headline
+feature rather than a compliance chore.
+
+### C1 · Routing, focus, and announcements
+
+**What.** A skip link; focus moved to the view heading on navigation; a
+polite live region announcing the new page; focus-visible styling audited
+across the custom controls.
+
+**Why.** The app is a hash-routed SPA with **zero** `focus()` calls and one
+`aria-live` region. For a screen-reader user every navigation is silent and
+leaves focus stranded on the link they just activated — this is the
+difference between "hard" and "impossible."
+
+**Where.** `src/app/app.ts` / `app.html` (the `<main id="view">` already
+exists as a target), plus a small router subscription.
+
+**Size.** Small. Highest ratio of impact to effort in this document.
+
+### C2 · The plain-language compare narrative
+
+**What.** A new compare panel that says, in sentences: what you two agree on
+most, where you differ most, which dealbreakers need a conversation, and
+what the directional fit scores actually mean.
+
+**Why.** Three wins in one component. It is the non-visual equivalent of the
+radar, strips, and matrix. It is a cognitive-accessibility win for everyone
+under stress — and people read compatibility results under stress. And it is
+the thing people will screenshot and quote to each other, which no chart
+currently is.
+
+**Where.** `src/app/compare/panels/narrative.panel.ts`, registered in
+`app.config.ts` with `provideComparePanel({ id: 'narrative', order: 12 })` —
+right after the headline. The panel receives a fully computed `CompareModel`
+(`pair`, `interlocks`, `grid`, `desireRows`), so this is presentation over
+data that already exists, not new scoring.
+
+**Constraint.** Phrasing carries real weight here: it must describe
+differences without moralizing about them, and never imply a verdict on a
+relationship. Every sentence template deserves the same care the survey copy
+got.
+
+**Size.** Medium. The most interesting design problem in the plan.
+
+### C3 · Chart alternatives and SVG semantics
+
+**What.** Under each chart panel, a collapsible "Read this as a table."
+Proper roles and labels on the SVG components in `libs/ui`, and
+`aria-hidden` on the purely decorative ones.
+
+**Where.** `libs/ui/src/` chart components; the compare panels get the
+disclosure.
+
+**Size.** Medium, mostly repetitive.
+
+### C4 · Contrast and forced colors
+
+**What.** Support `prefers-contrast: more` and `forced-colors: active` at the
+token layer, and audit real contrast ratios in both themes — particularly
+the `fine` class, the persona-derived accent colors, and the chart series
+hues, which are generated rather than hand-picked and therefore unaudited.
+
+**Where.** `libs/ui/src/styles/` tokens. The existing
+`prefers-reduced-motion` blocks in `_base.scss` are the model to follow.
+
+**Size.** Medium.
+
+### C5 · Keyboard and screen-reader audit of the survey controls
+
+**What.** Walk the importance controls, answer chips, scale inputs, and the
+interest matrix with a keyboard and a screen reader. These are custom
+controls carrying the product's core interaction; they need real roles,
+states, and arrow-key behavior, not just `aria-label`.
+
+**Size.** Medium, and it will produce its own list.
+
+---
+
+## Track D — Reach and resilience
+
+### D1 · Make it a PWA
+
+**What.** A manifest and a service worker: installable, and the survey
+fillable offline with the draft syncing on reconnect.
+
+**Why.** A static hash-routed site with client-side crypto and a local draft
+store is nearly the ideal PWA already. Someone filling out ninety-six
+questions on a commute currently loses to a tunnel.
+
+**Constraints — the reason this is behind Track A.**
+
+- `moxy.config.json` must never be served stale from a cache, or an app
+  update can't move the server address. Network-first for that file, always.
+- Caching an app whose entire premise is "nothing identifying is stored"
+  needs a deliberate answer about what the cache holds and how logging out
+  clears it.
+- `npm run e2e` drives the production build; a service worker changes what
+  that build serves and the suite will need to account for it.
+
+**Size.** Medium, with a long tail of caching bugs. Do it when the loop
+above it works.
+
+### D2 · Sharing and printing the result
+
+**What.** Web Share API for phrases and links on mobile (with the current
+copy-to-clipboard as fallback), and a print stylesheet for the compare view.
+
+**Why.** People will want to bring a comparison to a conversation, and a
+printout is the one form that doesn't require both people to hold a phone.
+The B1 print stylesheet does most of the work.
+
+**Size.** Small.
+
+### D3 · Internationalization groundwork
+
+**What.** Extract user-facing strings from the inline templates so a
+translation becomes possible. No translation yet.
+
+**Why.** Every component shipped with inline copy raises the price of the
+first translation. This is the cheapest it will ever be, and it only gets
+worse.
+
+**Caveat.** It touches nearly every component, so it wants a quiet window
+between features rather than a slot in a wave.
+
+**Size.** Large and boring. Schedule honestly or not at all.
+
+---
+
+## Sequencing
+
+**Wave 1 — the loop.** A1 freshness · A3 viewer CTA · C1 focus and
+announcements. The two ends of the share loop, plus the accessibility fix
+that costs almost nothing and unblocks the most people.
+
+**Wave 2 — the front door.** A2 demo compare · B1 backup card · B2 phrase
+entry. What a newcomer meets, and what keeps them from losing everything.
+
+**Wave 3 — the words.** C2 narrative panel · A4 core-tier milestone · B3
+phrase confirmation. The copy-heavy work, once the structure around it is
+settled.
+
+**Wave 4 — the sweep.** C3 chart alternatives · C4 contrast · C5 control
+audit. Best done together, as one audit with one vocabulary.
+
+**Wave 5 — reach.** D1 PWA · D2 share and print. Multiply the loop after
+it works.
+
+**Unscheduled.** D3 i18n.
+
+## Invariants this plan touches
+
+None of it touches the frozen crypto vectors, the append-only survey schema,
+or the wordlists. Two items come close and are worth stating plainly:
+
+- **A1** adds fields to `SavedConnection` inside `PrivData`. They must be
+  optional so `migratePrivData` keeps opening older blobs without a `v` bump.
+  Adding a required field there is a migration, and a migration on the
+  edit-key blob is the one that can lock someone out of their own profile.
+- **A2** bundles fixture payloads built from real schema ids. They need a
+  spec that fails when the schema moves under them, or the demo silently
+  rots into a lie about the product.
+
+Everything else is presentation, input handling, and copy.
+
+## Deliberately not doing
+
+- **Accounts, logins, or notifications.** The async gap is real, but any
+  push channel needs an address to push to, and there isn't one by design.
+  A1 is the honest version of this feature.
+- **Free-text anything.** No bios, no messages, no custom questions. "There
+  isn't even a free-text field" is load-bearing: it is what makes every
+  answer comparable and every profile unidentifiable.
+- **Server-side matching or discovery.** A directory of profiles is a
+  different product with a different threat model, and it would put the
+  server in a position the current design spent a lot of effort denying it.
+- **Retention mechanics.** Streaks, reminders, and re-engagement nudges all
+  need to know who you are and when you left. Transience is a feature here;
+  the GC policy says so out loud.
diff --git a/e2e/run-e2e.mjs b/e2e/run-e2e.mjs
index 8074b6b..8b92ba1 100644
--- a/e2e/run-e2e.mjs
+++ b/e2e/run-e2e.mjs
@@ -608,6 +608,52 @@ try {
   if (!(await pageB.locator('a', { hasText: 'Their profile' }).count())) {
     fail('reply view-phrase attachment missing');
   }
+  // --- freshness: B keeps A, A answers something, B is told ----------------
+  // The whole point of keeping a creature: noticing it changed without having
+  // to ask its owner out of band.
+  step = 'menagerie-keep';
+  await pageB.goto(viewUrl);
+  await pageB.waitForSelector(`text=${personaName}`, { timeout: 30000 });
+  await pageB.click('text=💾 Add to my menagerie');
+  await pageB.waitForSelector('text=joined your menagerie', { timeout: 30000 });
+  await pageB.goto(`${BASE}#/menagerie`);
+  await pageB.waitForSelector(`text=${personaName}`, { timeout: 60000 });
+  await pageB.waitForSelector('text=Check for updates', { timeout: 60000 });
+  if ((await pageB.textContent('body')).includes('new answers')) {
+    fail('a creature kept a moment ago is reported as having new answers');
+  }
+
+  step = 'menagerie-updated';
+  await page.goto(`${BASE}#/me`);
+  await page.waitForSelector('.profile-head');
+  await editCategory(page, 'What I value', async (card) => {
+    await card.locator('.q-row', { hasText: 'Togetherness' }).locator('.pip-scale').nth(5).click();
+  });
+  // reload(), not goto(): B is already on this URL and the browser treats a
+  // same-fragment goto as nothing at all. Reloading also proves the point —
+  // the baseline came back from the server, not from a signal still in memory.
+  // Two waits, because the page has to finish an Argon2id session restore
+  // before the refresh it kicks off can say anything.
+  await pageB.reload();
+  await pageB.waitForSelector(`text=${personaName}`, { timeout: 60000 });
+  await pageB.waitForSelector('text=new answers', { timeout: 60000 });
+
+  step = 'menagerie-seen';
+  // Reading the profile is what clears it — and it stays cleared across a
+  // reload, which is the part that only works because the baseline reached
+  // the server. Wait for the page to stop talking before reloading, or the
+  // reload races the very write being asserted.
+  await pageB.click('a:has-text("View")');
+  await pageB.waitForSelector(`text=${personaName}`, { timeout: 60000 });
+  await pageB.waitForLoadState('networkidle');
+  await pageB.goto(`${BASE}#/menagerie`);
+  await pageB.reload();
+  await pageB.waitForSelector(`text=${personaName}`, { timeout: 60000 });
+  await pageB.waitForSelector('text=Check for updates', { timeout: 60000 });
+  if ((await pageB.textContent('body')).includes('new answers')) {
+    fail('the badge came back after the profile was looked at');
+  }
+
   // Park B on A's (still-current) profile page: after A regenerates, this
   // stale page's boop attempt must be turned away.
   await pageB.goto(viewUrl);
diff --git a/libs/core/src/hatch/hatch-client.ts b/libs/core/src/hatch/hatch-client.ts
index 866e4ff..d4529b0 100644
--- a/libs/core/src/hatch/hatch-client.ts
+++ b/libs/core/src/hatch/hatch-client.ts
@@ -370,17 +370,55 @@ export class HatchClient {
   }
 }
 
+/** Everything one view fetch learned, for callers that want more than answers. */
+export interface FetchedView {
+  readonly payload: ProfilePayload;
+  /** The derived locator — worth keeping, it cost an Argon2id pass. */
+  readonly viewLocator: string;
+  /** Save count, the same number freshness checks compare against. */
+  readonly version: number;
+}
+
 /**
- * Fetch and decrypt the open payload a view phrase points at — the one
- * derive→fetch→decrypt→migrate pipeline every viewer shares. Null when the
- * server has no record (deleted, expired, or re-minted).
+ * The one derive→fetch→decrypt→migrate pipeline every viewer shares. Null
+ * when the server has no record (deleted, expired, or re-minted).
  */
-export async function fetchViewPayload(
+export async function fetchView(
   client: HatchClient,
   viewPhrase: string,
-): Promise<ProfilePayload | null> {
+): Promise<FetchedView | null> {
   const { viewLocator, viewKey } = await deriveViewKeys(viewPhrase);
   const record = await client.getView(viewLocator);
   if (!record) return null;
-  return migrateToCurrent(await decryptBlob(record.blob_view, viewKey));
+  return {
+    payload: migrateToCurrent(await decryptBlob(record.blob_view, viewKey)),
+    viewLocator,
+    version: record.version,
+  };
+}
+
+/** Just the answers, for the callers that want nothing else. */
+export async function fetchViewPayload(
+  client: HatchClient,
+  viewPhrase: string,
+): Promise<ProfilePayload | null> {
+  return (await fetchView(client, viewPhrase))?.payload ?? null;
+}
+
+/**
+ * How many times the profile behind a locator has been saved, or null when
+ * nothing answers to it (deleted, expired, or re-minted). No key needed: the
+ * version is metadata beside the ciphertext, so a viewer can tell that a
+ * profile changed without being able to read a word of it.
+ *
+ * Takes a locator rather than a phrase so callers holding a cached one skip
+ * the Argon2id derivation. The read still transfers the whole blob — the API
+ * has no metadata-only route — so this is cheap in CPU, not in bytes.
+ */
+export async function fetchViewVersion(
+  client: HatchClient,
+  viewLocator: string,
+): Promise<number | null> {
+  const record = await client.getView(viewLocator);
+  return record ? record.version : null;
 }
diff --git a/libs/core/src/hatch/priv-data.spec.ts b/libs/core/src/hatch/priv-data.spec.ts
new file mode 100644
index 0000000..3346921
--- /dev/null
+++ b/libs/core/src/hatch/priv-data.spec.ts
@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest';
+import { connectionFreshness, migratePrivData, type PrivData } from './priv-data';
+
+describe('connectionFreshness', () => {
+  it('is current while the version has not moved', () => {
+    expect(connectionFreshness({ lastSeenVersion: 4 }, 4)).toBe('current');
+  });
+
+  it('is updated once the profile has been saved again', () => {
+    expect(connectionFreshness({ lastSeenVersion: 4 }, 7)).toBe('updated');
+  });
+
+  // A profile can only ever be re-keyed forward, but a stale baseline read
+  // from another device must never render as a negative "update".
+  it('is current when the server is somehow behind the baseline', () => {
+    expect(connectionFreshness({ lastSeenVersion: 9 }, 4)).toBe('current');
+  });
+
+  it('is gone when nothing answers to the locator', () => {
+    expect(connectionFreshness({ lastSeenVersion: 4 }, null)).toBe('gone');
+  });
+
+  // The badge is for changes you missed. A creature you have never opened —
+  // one kept before freshness checks existed — has no missed changes.
+  it('adopts the current version as the baseline when there is none', () => {
+    expect(connectionFreshness({}, 12)).toBe('current');
+    expect(connectionFreshness({ lastSeenVersion: undefined }, 12)).toBe('current');
+  });
+
+  it('still reports a never-opened creature as gone', () => {
+    expect(connectionFreshness({}, null)).toBe('gone');
+  });
+});
+
+describe('migratePrivData and the connection fields', () => {
+  function blobWith(connection: Record<string, unknown>): unknown {
+    return {
+      v: 1,
+      viewPhrase: 'mellow-verdant-lobster-mistwoven-emberlit-fernhollow',
+      answers: {},
+      desiresSalt: null,
+      connections: [connection],
+    };
+  }
+
+  // The whole reason both fields are optional: a blob written before they
+  // existed has to keep opening, with no version bump and no upgrader.
+  it('opens a connection saved before freshness existed', () => {
+    const legacy = blobWith({
+      id: 'a',
+      label: 'kestrel',
+      viewPhrase: 'x-y-z-a-b-c',
+      notes: '',
+      addedAt: 1,
+      updatedAt: 1,
+    });
+    const priv: PrivData = migratePrivData(legacy);
+    expect(priv.connections[0].viewLocator).toBeUndefined();
+    expect(priv.connections[0].lastSeenVersion).toBeUndefined();
+    expect(connectionFreshness(priv.connections[0], 3)).toBe('current');
+  });
+
+  it('round-trips the cached locator and the baseline', () => {
+    const priv: PrivData = migratePrivData(
+      blobWith({
+        id: 'a',
+        label: 'kestrel',
+        viewPhrase: 'x-y-z-a-b-c',
+        notes: '',
+        addedAt: 1,
+        updatedAt: 1,
+        viewLocator: 'ff00',
+        lastSeenVersion: 2,
+      }),
+    );
+    expect(priv.connections[0].viewLocator).toBe('ff00');
+    expect(connectionFreshness(priv.connections[0], 3)).toBe('updated');
+  });
+});
diff --git a/libs/core/src/hatch/priv-data.ts b/libs/core/src/hatch/priv-data.ts
index 0fed4f5..af54369 100644
--- a/libs/core/src/hatch/priv-data.ts
+++ b/libs/core/src/hatch/priv-data.ts
@@ -14,6 +14,45 @@ export interface SavedConnection {
   notes: string;
   addedAt: number;
   updatedAt: number;
+  /**
+   * The view locator derived from `viewPhrase`, cached because deriving it
+   * costs a full Argon2id pass — a menagerie of eight would otherwise spend
+   * half a minute just working out what to ask the server about. It is no
+   * more secret than the phrase sitting beside it in this same blob.
+   *
+   * Optional: connections saved before freshness checks existed have none,
+   * and `migratePrivData` fills absent fields rather than versioning them.
+   */
+  viewLocator?: string;
+  /**
+   * The profile's version the last time this person actually looked at it.
+   * The server bumps a profile's version on every save, so anything higher
+   * means new answers since. Absent means never looked — which reads as
+   * "nothing new", not "everything is new".
+   */
+  lastSeenVersion?: number;
+}
+
+/** Where a kept creature stands relative to the last time you looked. */
+export type ConnectionFreshnessState = 'current' | 'updated' | 'gone';
+
+/**
+ * Compare a kept connection against what the server holds now.
+ *
+ * `currentVersion` is null only for a profile that genuinely answers to
+ * nothing — deleted, expired, or re-minted. A failed request is not that, and
+ * callers must not collapse the two: an unreachable server would otherwise
+ * report every creature you know as gone.
+ */
+export function connectionFreshness(
+  connection: Pick<SavedConnection, 'lastSeenVersion'>,
+  currentVersion: number | null,
+): ConnectionFreshnessState {
+  if (currentVersion === null) return 'gone';
+  // No baseline means it has never been opened from here, and a change you
+  // were never shown is not a change you missed.
+  const seen = connection.lastSeenVersion ?? currentVersion;
+  return currentVersion > seen ? 'updated' : 'current';
 }
 
 /**
diff --git a/libs/core/src/index.ts b/libs/core/src/index.ts
index 48f5775..8127d6d 100644
--- a/libs/core/src/index.ts
+++ b/libs/core/src/index.ts
@@ -59,6 +59,14 @@ export * from './hatch/phrases';
 export { encryptBlob, decryptBlob } from './hatch/blob';
 export * from './hatch/priv-data';
 export * from './hatch/hatch-api';
-export { HatchClient, HatchError, fetchViewPayload, type HatchFailure } from './hatch/hatch-client';
+export {
+  HatchClient,
+  HatchError,
+  fetchView,
+  fetchViewPayload,
+  fetchViewVersion,
+  type FetchedView,
+  type HatchFailure,
+} from './hatch/hatch-client';
 
 export * from './storage/storage';
diff --git a/libs/ui/src/styles/_base.scss b/libs/ui/src/styles/_base.scss
index 44d0597..c23b083 100644
--- a/libs/ui/src/styles/_base.scss
+++ b/libs/ui/src/styles/_base.scss
@@ -25,6 +25,56 @@ a {
   color: var(--accent);
 }
 
+/* ---------- accessibility primitives ---------- */
+
+/* One visible focus ring for everything keyboard-reachable. Before this only
+   text inputs and .q-mark had any focus styling, so tabbing through the app
+   was invisible. :focus-visible keeps it off mouse clicks. */
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+/* Present to a screen reader, absent to everything else. */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* The skip link rides above the sticky header (z-index 20) when focused. */
+.skip-link {
+  position: absolute;
+  left: 8px;
+  top: -100px;
+  z-index: 40;
+  padding: 10px 14px;
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: var(--accent);
+  color: var(--accent-ink);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  transition: top 0.12s ease-out;
+}
+.skip-link:focus {
+  top: 8px;
+}
+
+/* #view takes focus on every navigation so the next Tab starts at the new
+   page — but it is a focus target, not a control, so it shows no ring. */
+#view:focus {
+  outline: none;
+}
+
 /* ---------- shell ---------- */
 
 /* Six nav links plus the session chip, logout and theme is a full row; keep
diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts
index 360e402..4890759 100644
--- a/src/app/about/about.component.ts
+++ b/src/app/about/about.component.ts
@@ -178,6 +178,13 @@ import { GC_EMPTY_HUMAN, GC_IDLE_HUMAN } from '@moxy/core';
         phrases and tiny QR codes possible. You can self-host it — one dependency-free file in the
         repository.
       </p>
+      <p class="sub">
+        Your menagerie adds one read per kept creature when you open that page, so it can tell you
+        which of them have new answers. The server can’t read a word of what comes back — it
+        compares a save counter — but those reads look exactly like views, and they say that someone
+        is still interested in that profile. That’s why nothing checks in the background: the
+        requests happen when you open the page, and never while you’re away.
+      </p>
     </div>
 
     <div class="card">
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index ea083b5..4229eec 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -4,10 +4,11 @@ import {
   provideAppInitializer,
   provideBrowserGlobalErrorListeners,
 } from '@angular/core';
-import { provideRouter, withHashLocation } from '@angular/router';
+import { provideRouter, TitleStrategy, withHashLocation } from '@angular/router';
 import { getSection } from '@moxy/core';
 import { routes } from './app.routes';
 import { provideComparePanel } from './compare/compare-panels.token';
+import { PageTitleStrategy } from './page-title.strategy';
 import { ServerConfigStore } from './stores/server-config.store';
 
 export const appConfig: ApplicationConfig = {
@@ -17,6 +18,10 @@ export const appConfig: ApplicationConfig = {
     // rewrite rules — #/view/<phrase> works from a QR scan anywhere.
     provideRouter(routes, withHashLocation()),
 
+    // Names every route once: browser tab, history, and the shell's live
+    // region all read the same string.
+    { provide: TitleStrategy, useExisting: PageTitleStrategy },
+
     // Resolve the profile server address before anything routes.
     provideAppInitializer(() => inject(ServerConfigStore).init()),
 
diff --git a/src/app/app.html b/src/app/app.html
index 21f0c39..1a4241e 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -1,3 +1,7 @@
+<!-- A button, not an <a href="#view">: hash routing owns the fragment, so a
+     real anchor would navigate to the "view" route instead of jumping. -->
+<button class="skip-link" type="button" (click)="skipToContent()">Skip to content</button>
+
 <header class="app-header">
   <a class="brand" routerLink="/">
     <span class="brand-mark" aria-hidden="true">
@@ -58,10 +62,17 @@
   </button>
 </header>
 
-<main id="view">
+<!-- tabindex="-1" makes this focusable programmatically (never by Tab), which
+     is what lets a navigation land here instead of stranding focus on the
+     link that was just activated. -->
+<main id="view" tabindex="-1">
   <router-outlet />
 </main>
 
+<!-- The browser announces a page change on a real navigation; a hash-routed
+     SPA has to say it itself. -->
+<p class="sr-only" role="status" aria-live="polite">{{ announcement() }}</p>
+
 <footer class="app-footer">
   <p>
     No accounts, no names, no analytics — the server stores only ciphertext it can’t read.
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 8a75011..4823ed9 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -11,56 +11,67 @@ export const routes: Routes = [
   // The QR bypass: scanning a code lands here directly, no landing page.
   {
     path: 'view/:phrase',
+    title: 'Profile',
     loadComponent: () => import('./view/view.component').then((m) => m.ViewComponent),
   },
   {
     path: 'edit',
+    title: 'Log in',
     loadComponent: () =>
       import('./edit-login/edit-login.component').then((m) => m.EditLoginComponent),
   },
   // Group invites deep-link like view QRs: anyone with the phrase can look.
   {
     path: 'group/:phrase',
+    title: 'Group',
     loadComponent: () => import('./group/group.component').then((m) => m.GroupComponent),
   },
   {
     path: 'me',
     canActivate: [hatchSessionGuard],
     canDeactivate: [unsavedChangesGuard],
+    title: 'My profile',
     loadComponent: () =>
       import('./dashboard/dashboard.component').then((m) => m.DashboardComponent),
   },
   {
     path: 'menagerie',
     canActivate: [hatchSessionGuard],
+    title: 'My menagerie',
     loadComponent: () =>
       import('./menagerie/menagerie.component').then((m) => m.MenagerieComponent),
   },
   {
     path: 'groups',
     canActivate: [hatchSessionGuard],
+    title: 'Groups',
     loadComponent: () => import('./groups/groups.component').then((m) => m.GroupsComponent),
   },
   {
     path: 'settings',
     canActivate: [hatchSessionGuard],
+    title: 'Settings',
     loadComponent: () => import('./settings/settings.component').then((m) => m.SettingsComponent),
   },
   {
     path: 'compare',
+    title: 'Compare',
     loadComponent: () => import('./compare/compare.component').then((m) => m.CompareComponent),
   },
   {
     path: 'community',
+    title: 'Community',
     loadComponent: () =>
       import('./community/community.component').then((m) => m.CommunityComponent),
   },
   {
     path: 'about',
+    title: 'How it works',
     loadComponent: () => import('./about/about.component').then((m) => m.AboutComponent),
   },
   {
     path: 'creatures',
+    title: 'Creatures',
     loadComponent: () =>
       import('./creatures/creatures.component').then((m) => m.CreaturesComponent),
   },
diff --git a/src/app/app.spec.ts b/src/app/app.spec.ts
index 18064ea..5fa23ac 100644
--- a/src/app/app.spec.ts
+++ b/src/app/app.spec.ts
@@ -67,4 +67,49 @@ describe('App shell', () => {
     expect(chip?.querySelector('moxy-creature-avatar')).not.toBeNull();
     expect(el.textContent).toContain('Log out');
   });
+
+  // A hash-routed SPA announces nothing on its own and leaves focus on the
+  // link that was activated, so the shell has to do both jobs itself.
+  describe('keyboard and screen-reader shell', () => {
+    it('offers a skip link that moves focus into the content', () => {
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      const el: HTMLElement = fixture.nativeElement;
+
+      const skip = el.querySelector<HTMLButtonElement>('button.skip-link');
+      expect(skip?.textContent?.trim()).toBe('Skip to content');
+
+      skip?.click();
+      expect(document.activeElement?.id).toBe('view');
+    });
+
+    it('makes the content focusable without putting it in the tab order', () => {
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      const main = fixture.nativeElement.querySelector('main#view');
+      expect(main?.getAttribute('tabindex')).toBe('-1');
+    });
+
+    it('carries a polite live region for route announcements', () => {
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      const live = fixture.nativeElement.querySelector('[aria-live]');
+      expect(live?.getAttribute('aria-live')).toBe('polite');
+      expect(live?.getAttribute('role')).toBe('status');
+      // Screen-reader only: it must never be visible.
+      expect(live?.classList.contains('sr-only')).toBe(true);
+    });
+  });
+});
+
+// Every page needs a name: the tab, browser history, and the live region all
+// read it. Only the landing page opts out — its name is the brand.
+describe('route titles', () => {
+  it('names every route but the landing page and the catch-all', () => {
+    const unnamed = routes
+      .filter((route) => route.path !== '' && route.path !== '**')
+      .filter((route) => !route.title)
+      .map((route) => route.path);
+    expect(unnamed).toEqual([]);
+  });
 });
diff --git a/src/app/app.ts b/src/app/app.ts
index ad32e21..a312599 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -1,6 +1,9 @@
 import { ChangeDetectionStrategy, Component, computed, effect, inject } from '@angular/core';
-import { Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { filter } from 'rxjs';
+import { NavigationEnd, Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { CreatureAvatarComponent, ToastComponent, ToastService } from '@moxy/ui';
+import { PageTitleStrategy } from './page-title.strategy';
 import { ThemeStore } from './stores/theme.store';
 import { ProfileSessionStore } from './stores/profile-session.store';
 import { BoopStore } from './stores/boop.store';
@@ -19,11 +22,34 @@ export class App {
   private readonly boops = inject(BoopStore);
   private readonly metrics = inject(MetricsStore);
   private readonly router = inject(Router);
+  private readonly pageTitle = inject(PageTitleStrategy);
 
   /** Waiting boops, for the nav badge. */
   protected readonly boopCount = computed(() => this.session.incomingBoops().length);
 
+  /** What the live region says: the name of the page just navigated to. */
+  protected readonly announcement = this.pageTitle.announcement;
+
   constructor() {
+    // Focus follows navigation. Without this, activating a nav link leaves
+    // focus on the link, so the next Tab continues through the header and a
+    // screen reader never enters the page it just opened. The first
+    // navigation is the page load itself — the browser's own focus is right
+    // there, and moving it would be a jump the user did not ask for.
+    let firstNavigation = true;
+    this.router.events
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        takeUntilDestroyed(),
+      )
+      .subscribe(() => {
+        if (firstNavigation) {
+          firstNavigation = false;
+          return;
+        }
+        this.focusContent();
+      });
+
     // Header paw tint follows the logged-in creature (nothing persisted;
     // clears itself on logout/regenerate because the signal drives it).
     effect(() => {
@@ -56,6 +82,15 @@ export class App {
     });
   }
 
+  /** Skip-link target: jump the keyboard past the header into the page. */
+  protected skipToContent(): void {
+    this.focusContent();
+  }
+
+  private focusContent(): void {
+    document.getElementById('view')?.focus();
+  }
+
   protected logout(): void {
     this.session.logout();
     void this.router.navigate(['/']);
diff --git a/src/app/menagerie/menagerie.component.ts b/src/app/menagerie/menagerie.component.ts
index a562341..23b5193 100644
--- a/src/app/menagerie/menagerie.component.ts
+++ b/src/app/menagerie/menagerie.component.ts
@@ -25,9 +25,30 @@ import { BoopStore } from '../stores/boop.store';
         against your own profile. Your menagerie is encrypted with your edit key; the server never
         sees who’s in it.
       </p>
+      @if (session.connections().length) {
+        <div style="display:flex;justify-content:flex-end;margin-bottom:6px">
+          <button
+            class="btn btn-ghost btn-small"
+            [disabled]="session.refreshingConnections()"
+            (click)="refresh()"
+          >
+            {{ session.refreshingConnections() ? 'Checking…' : 'Check for updates' }}
+          </button>
+        </div>
+      }
       @for (c of session.connections(); track c.id) {
         <div class="grid-row" style="align-items:center">
-          <div class="grid-item-label">{{ c.label }}</div>
+          <div class="grid-item-label">
+            {{ c.label }}
+            @switch (freshness(c.id)) {
+              @case ('updated') {
+                <span class="badge badge-close" style="margin-left:6px">new answers</span>
+              }
+              @case ('gone') {
+                <span class="fine" style="margin-left:6px">· no longer opens</span>
+              }
+            }
+          </div>
           <div class="grid-answers" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
             <span class="fine">{{ c.viewPhrase }}</span>
             <button class="btn btn-small" (click)="compareWith(c.viewPhrase)">Compare</button>
@@ -196,6 +217,24 @@ export class MenagerieComponent {
     // moment a refresh is actually wanted.
     void this.boops.pollBoops().catch(() => undefined);
     void this.boops.pollSentBoops().catch(() => undefined);
+    // Same reasoning for kept creatures: this page is where "did they answer
+    // anything?" gets asked, and asking on arrival is one round of requests
+    // indistinguishable from a visit. Nothing polls in the background.
+    void this.session.refreshConnections().catch(() => undefined);
+  }
+
+  /** '' when there is nothing to say, so the template can @switch on it. */
+  protected freshness(id: string): string {
+    const found = this.session.connectionFreshness().get(id);
+    return found && found.state !== 'current' && found.state !== 'unknown' ? found.state : '';
+  }
+
+  protected async refresh(): Promise<void> {
+    try {
+      await this.session.refreshConnections();
+    } catch (err) {
+      this.toast.error(err);
+    }
   }
 
   protected readonly revealed = signal<ReadonlySet<string>>(new Set());
diff --git a/src/app/page-title.strategy.spec.ts b/src/app/page-title.strategy.spec.ts
new file mode 100644
index 0000000..05f3396
--- /dev/null
+++ b/src/app/page-title.strategy.spec.ts
@@ -0,0 +1,72 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { provideRouter, Router, TitleStrategy } from '@angular/router';
+import { App } from './app';
+import { PageTitleStrategy } from './page-title.strategy';
+
+@Component({ selector: 'moxy-stub-page', template: '<h1>stub</h1>' })
+class StubPage {}
+
+/**
+ * The shell's navigation behaviour, driven through a real router rather than
+ * the app's own routes: what matters here is what happens on a navigation,
+ * not which pages exist.
+ */
+describe('navigating', () => {
+  let router: Router;
+  let strategy: PageTitleStrategy;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+      providers: [
+        provideRouter([
+          { path: '', title: 'First', component: StubPage },
+          { path: 'second', title: 'Second', component: StubPage },
+          { path: 'nameless', component: StubPage },
+        ]),
+        { provide: TitleStrategy, useExisting: PageTitleStrategy },
+      ],
+    }).compileComponents();
+    router = TestBed.inject(Router);
+    strategy = TestBed.inject(PageTitleStrategy);
+  });
+
+  it('names the tab and announces the page', async () => {
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+
+    await router.navigate(['/second']);
+    fixture.detectChanges();
+
+    expect(document.title).toBe('Second — Menagerie');
+    expect(strategy.announcement()).toBe('Second page');
+    expect(fixture.nativeElement.querySelector('[aria-live]').textContent).toContain('Second page');
+  });
+
+  it('falls back to the brand where a route has no title', async () => {
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+
+    await router.navigate(['/nameless']);
+    fixture.detectChanges();
+
+    expect(document.title).toBe('Menagerie — anonymous compatibility profiles');
+    expect(strategy.announcement()).toBe('Menagerie home page');
+  });
+
+  // The first navigation IS the page load: the browser's focus is already
+  // where it belongs and moving it would be an unrequested jump.
+  it('leaves focus alone on the first navigation, then follows every one after', async () => {
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+
+    await router.navigate(['/']);
+    fixture.detectChanges();
+    expect(document.activeElement?.id).not.toBe('view');
+
+    await router.navigate(['/second']);
+    fixture.detectChanges();
+    expect(document.activeElement?.id).toBe('view');
+  });
+});
diff --git a/src/app/page-title.strategy.ts b/src/app/page-title.strategy.ts
new file mode 100644
index 0000000..1965ed5
--- /dev/null
+++ b/src/app/page-title.strategy.ts
@@ -0,0 +1,34 @@
+import { inject, Injectable, signal } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { RouterStateSnapshot, TitleStrategy } from '@angular/router';
+
+/** Suffix on every page but the landing one, which is the brand already. */
+const BRAND = 'Menagerie';
+
+/**
+ * One place where a navigation becomes a name, used twice.
+ *
+ * A sighted user gets it in the tab and in bookmarks — before this every page
+ * was "Menagerie — anonymous compatibility profiles", so browser history was
+ * unreadable. A screen-reader user gets it announced: this is a hash-routed
+ * SPA, so the browser never announces a page change on its own, and the shell
+ * moves focus to #view without saying where it landed. The live region says.
+ */
+@Injectable({ providedIn: 'root' })
+export class PageTitleStrategy extends TitleStrategy {
+  private readonly title = inject(Title);
+
+  /** Read by the shell's aria-live region; empty until the first navigation. */
+  readonly announcement = signal('');
+
+  override updateTitle(snapshot: RouterStateSnapshot): void {
+    const page = this.buildTitle(snapshot);
+    this.title.setTitle(
+      page ? `${page} — ${BRAND}` : `${BRAND} — anonymous compatibility profiles`,
+    );
+    // Navigating from a route to itself leaves this text unchanged, and an
+    // aria-live region only speaks when its text changes. That silence is
+    // correct: nothing moved.
+    this.announcement.set(page ? `${page} page` : `${BRAND} home page`);
+  }
+}
diff --git a/src/app/stores/profile-session.store.ts b/src/app/stores/profile-session.store.ts
index 9645d2d..3aa3ec7 100644
--- a/src/app/stores/profile-session.store.ts
+++ b/src/app/stores/profile-session.store.ts
@@ -4,11 +4,15 @@ import {
   buildMatchTokens,
   buildSharePayload,
   canonicalViewPhrase,
+  // Aliased: this class also exposes a `connectionFreshness` signal, and a
+  // bare call next to it would read as the signal.
+  connectionFreshness as freshnessState,
   decryptBlob,
   deriveEditKeys,
   deriveViewKeys,
   emptyPrivData,
   encryptBlob,
+  fetchViewVersion,
   generateBoopKeyPair,
   HatchError,
   migratePrivData,
@@ -24,8 +28,10 @@ import {
   type Answers,
   type BoopContent,
   type BoopCreds,
+  type ConnectionFreshnessState,
   type Weights,
   type EditKeys,
+  type HatchClient,
   type Persona,
   type PrivData,
   type ProfilePayload,
@@ -46,6 +52,18 @@ const REMEMBER_KEY = 'moxy.hatch.remember.v1';
 
 export type SaveState = 'idle' | 'saving' | 'saved' | 'conflict' | 'error';
 
+/**
+ * What a freshness check learned about one saved connection.
+ *
+ * `unknown` covers both "not checked yet" and "the check failed" — a server
+ * that is down must not be reported as a profile that is gone.
+ */
+export interface ConnectionFreshness {
+  state: ConnectionFreshnessState | 'unknown';
+  /** The version the server holds now; null when unknown or gone. */
+  version: number | null;
+}
+
 /** A knock from my inbox, opened and validated. */
 export interface IncomingBoop {
   id: string;
@@ -79,6 +97,15 @@ export class ProfileSessionStore {
   readonly saveState = signal<SaveState>('idle');
   readonly remembered = signal(false);
 
+  /**
+   * What the last freshness check found, keyed by connection id. Deliberately
+   * not persisted: it is derived from the server on demand, and the thing
+   * worth remembering across sessions — the version you last looked at — is
+   * the baseline stored on the connection itself.
+   */
+  readonly connectionFreshness = signal<ReadonlyMap<string, ConnectionFreshness>>(new Map());
+  readonly refreshingConnections = signal(false);
+
   /** Draft state as last persisted to the server — drives the dirty flag. */
   private readonly savedSnapshot = signal(ProfileSessionStore.draftSnapshot({}, {}, {}));
   readonly dirty = computed(
@@ -97,6 +124,8 @@ export class ProfileSessionStore {
   private editKeys: EditKeys | null = null;
   private viewKeys: ViewKeys | null = null;
   private priv: PrivData | null = null;
+  /** Locators derived for connections that predate the cached field. */
+  private readonly sessionLocators = new Map<string, string>();
   /** Serializes saves so two rapid clicks can't race the CAS version. */
   private chain: Promise<unknown> = Promise.resolve();
 
@@ -325,8 +354,27 @@ export class ProfileSessionStore {
     this.remembered.set(on && Boolean(phrase));
   }
 
-  async addConnection(label: string, rawViewPhrase: string): Promise<void> {
+  /**
+   * Keep a creature. The locator is derived here, once, at the one moment the
+   * cost is explainable — it buys a phrase that is checked before it is kept
+   * (a mistyped phrase is caught now instead of failing later on the view
+   * page) and every freshness check afterwards for free.
+   *
+   * A server that cannot be reached is not a bad phrase: the connection is
+   * kept unchecked and the next refresh fills in what is missing.
+   *
+   * `known` is for callers that just fetched the profile themselves — adding
+   * a creature from the page displaying it should not re-derive a locator
+   * that page already paid seconds for.
+   */
+  async addConnection(
+    label: string,
+    rawViewPhrase: string,
+    known?: { viewLocator: string; version: number },
+  ): Promise<void> {
     const viewPhrase = canonicalViewPhrase(rawViewPhrase);
+    if (this.connections().some((c) => c.viewPhrase === viewPhrase)) return;
+
     const now = Date.now();
     const connection: SavedConnection = {
       id: crypto.randomUUID(),
@@ -336,17 +384,135 @@ export class ProfileSessionStore {
       addedAt: now,
       updatedAt: now,
     };
-    this.mutateConnections((list) =>
-      list.some((c) => c.viewPhrase === viewPhrase) ? [...list] : [...list, connection],
-    );
+
+    // undefined: the check never happened. null: it happened and found
+    // nothing — the two must not read the same.
+    let version: number | null | undefined;
+    if (known) {
+      connection.viewLocator = known.viewLocator;
+      version = known.version;
+    } else {
+      try {
+        const { viewLocator } = await deriveViewKeys(viewPhrase);
+        connection.viewLocator = viewLocator;
+        version = await fetchViewVersion(this.requireClient(), viewLocator);
+      } catch {
+        version = undefined;
+      }
+    }
+    if (version === null) {
+      throw new Error('That phrase doesn’t open anything — check it for a typo.');
+    }
+    // Seen as of now: a creature you just added is not "updated".
+    if (version !== undefined) connection.lastSeenVersion = version;
+
+    this.mutateConnections((list) => [...list, connection]);
     await this.save();
   }
 
   async removeConnection(id: string): Promise<void> {
     this.mutateConnections((list) => list.filter((c) => c.id !== id));
+    this.forgetFreshness(id);
     await this.save();
   }
 
+  /**
+   * Ask the server what version each kept creature is on now. Read-only by
+   * design: this runs on page load, and every write in this app is something
+   * a person chose to do — an automatic save would both commit a half-edited
+   * draft and hand another tab a conflict.
+   *
+   * A connection saved before locators were cached derives one here and keeps
+   * it in memory for the session; it costs an Argon2id pass once, and never
+   * again after its next deliberate save.
+   */
+  async refreshConnections(): Promise<void> {
+    if (!this.active() || this.refreshingConnections()) return;
+    const client = this.config.client();
+    if (!client) return;
+
+    this.refreshingConnections.set(true);
+    try {
+      const found = new Map<string, ConnectionFreshness>();
+      for (const connection of this.connections()) {
+        found.set(connection.id, await this.checkConnection(client, connection));
+      }
+      this.connectionFreshness.set(found);
+    } finally {
+      this.refreshingConnections.set(false);
+    }
+  }
+
+  private async checkConnection(
+    client: HatchClient,
+    connection: SavedConnection,
+  ): Promise<ConnectionFreshness> {
+    try {
+      const locator = await this.locatorFor(connection);
+      const version = await fetchViewVersion(client, locator);
+      return { state: freshnessState(connection, version), version };
+    } catch {
+      // An unreachable server is not a missing profile.
+      return { state: 'unknown', version: null };
+    }
+  }
+
+  /** Cached on the connection, else derived once and remembered for the tab. */
+  private async locatorFor(connection: SavedConnection): Promise<string> {
+    if (connection.viewLocator) return connection.viewLocator;
+    const cached = this.sessionLocators.get(connection.viewPhrase);
+    if (cached) return cached;
+    const { viewLocator } = await deriveViewKeys(connection.viewPhrase);
+    this.sessionLocators.set(connection.viewPhrase, viewLocator);
+    return viewLocator;
+  }
+
+  /**
+   * Record that a kept creature's profile has now been read, at the version
+   * that was read, so the badge clears and stays cleared.
+   *
+   * Called from the page that actually shows the answers rather than from the
+   * link that leads there. A click handler racing its own navigation may not
+   * survive long enough to finish the write — and opening a kept profile by
+   * URL or QR is just as much "looking at it" as arriving from the list.
+   *
+   * Persists the baseline without touching the draft: reading someone's
+   * profile is not a decision to commit your own half-finished answers.
+   * Best-effort — a failure costs a badge, not data.
+   */
+  async noteProfileSeen(rawViewPhrase: string, version: number): Promise<void> {
+    if (!this.active()) return;
+    const viewPhrase = canonicalViewPhrase(rawViewPhrase);
+    const connection = this.connections().find((c) => c.viewPhrase === viewPhrase);
+    if (!connection || connection.lastSeenVersion === version) return;
+
+    this.mutateConnections((list) =>
+      list.map((c) => (c.id === connection.id ? { ...c, lastSeenVersion: version } : c)),
+    );
+    this.connectionFreshness.update((map) => {
+      const next = new Map(map);
+      next.set(connection.id, { state: 'current', version });
+      return next;
+    });
+    try {
+      // Through the same chain as save(): two writers racing the CAS version
+      // is exactly what the chain exists to prevent.
+      const run = this.chain.then(() => this.persistPriv());
+      this.chain = run.catch(() => undefined);
+      await run;
+    } catch {
+      /* the badge will come back; nothing was lost */
+    }
+  }
+
+  private forgetFreshness(id: string): void {
+    this.connectionFreshness.update((map) => {
+      const next = new Map(map);
+      next.delete(id);
+      return next;
+    });
+  }
+
   // ---- boop inbox lifecycle (the messaging flows live in BoopStore) -------
 
   /**
@@ -526,6 +692,24 @@ export class ProfileSessionStore {
     void this.ensureBoopInbox().catch(() => undefined);
   }
 
+  /**
+   * Write the record as it already stands on this device — bookkeeping only,
+   * with the draft left exactly where it is. `doSave` is the deliberate act
+   * that commits answers; this is for the things a person changes without
+   * meaning to save a survey, like which creature they have now looked at.
+   */
+  private async persistPriv(): Promise<void> {
+    const client = this.requireClient();
+    const { editKeys, viewKeys, priv } = this.requireSession();
+    const { blobView, blobPriv, populated } = await this.encryptState(priv, viewKeys);
+    const version = await client.put(editKeys.editLocator, editKeys.editToken, this.version(), {
+      blob_view: blobView,
+      blob_priv: blobPriv,
+      populated,
+    });
+    this.version.set(version);
+  }
+
   /** Records what the server now holds, for the dirty comparison. */
   private snapshotSaved(priv: PrivData): void {
     this.savedSnapshot.set(
diff --git a/src/app/view/view.component.ts b/src/app/view/view.component.ts
index 7774462..565d30e 100644
--- a/src/app/view/view.component.ts
+++ b/src/app/view/view.component.ts
@@ -1,8 +1,16 @@
-import { ChangeDetectionStrategy, Component, computed, inject, resource } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  inject,
+  resource,
+  signal,
+} from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { toSignal } from '@angular/core/rxjs-interop';
 import {
-  fetchViewPayload,
+  fetchView,
   extractViewPhrase,
   hasDesiresTokens,
   importanceLabel,
@@ -30,6 +38,9 @@ import { ServerConfigStore } from '../stores/server-config.store';
 interface LoadedProfile {
   readonly phrase: string;
   readonly payload: ProfilePayload;
+  /** Kept from the fetch so saving this creature costs no second derivation. */
+  readonly viewLocator: string;
+  readonly version: number;
   readonly name: string;
   readonly persona: Persona | null;
   readonly hasDesires: boolean;
@@ -76,7 +87,9 @@ interface LoadedProfile {
           @if (session.active()) {
             <button class="btn" (click)="saveConnection(v)">💾 Add to my menagerie</button>
           } @else {
-            <a class="btn btn-ghost" routerLink="/">Hatch your own creature to compare</a>
+            <button class="btn" [disabled]="hatching()" (click)="hatchAndKeep(v)">
+              {{ hatching() ? 'Hatching…' : '🥚 Hatch mine and keep ' + v.name }}
+            </button>
           }
         </div>
         @if (session.active()) {
@@ -147,6 +160,8 @@ export class ViewComponent {
   });
   private readonly phrase = computed(() => String(this.params()['phrase'] ?? ''));
 
+  protected readonly hatching = signal(false);
+
   protected readonly view = resource({
     params: () => ({ phrase: this.phrase(), state: this.config.state() }),
     loader: async ({ params }): Promise<LoadedProfile> => {
@@ -158,12 +173,13 @@ export class ViewComponent {
       if (!phrase) throw new Error('That’s not a valid Menagerie view phrase.');
       const client = this.config.client();
       if (!client) throw new Error('No profile server is configured.');
-      const payload = await fetchViewPayload(client, phrase);
-      if (!payload) {
+      const fetched = await fetchView(client, phrase);
+      if (!fetched) {
         throw new Error(
           'No profile answers to that phrase. It may have been deleted, expired, or replaced by a new creature.',
         );
       }
+      const payload = fetched.payload;
       const sections = SECTIONS.filter((s) => s.privacy === 'open')
         .map((s) => ({
           title: s.title,
@@ -180,6 +196,8 @@ export class ViewComponent {
       return {
         phrase,
         payload,
+        viewLocator: fetched.viewLocator,
+        version: fetched.version,
         name: persona?.name ?? 'Someone',
         persona,
         hasDesires: hasDesiresTokens(payload),
@@ -188,6 +206,22 @@ export class ViewComponent {
     },
   });
 
+  constructor() {
+    // Reading a kept creature's profile is what marks it seen — here, where
+    // the answers are actually on screen, and with the version this page just
+    // fetched. The page then sits still long enough for the write to land.
+    effect(() => {
+      // error() first: value() THROWS when the resource failed, which is why
+      // the template branches on error() before it ever touches value(). An
+      // effect that skips this check throws on every dead phrase and takes
+      // the "couldn't open that profile" card down with it.
+      if (this.view.error()) return;
+      const loaded = this.view.value();
+      if (!loaded) return;
+      void this.session.noteProfileSeen(loaded.phrase, loaded.version).catch(() => undefined);
+    });
+  }
+
   protected errorMessage(): string {
     return errorText(this.view.error());
   }
@@ -209,10 +243,42 @@ export class ViewComponent {
 
   protected async saveConnection(v: LoadedProfile): Promise<void> {
     try {
-      await this.session.addConnection(v.name, v.phrase);
+      await this.session.addConnection(v.name, v.phrase, {
+        viewLocator: v.viewLocator,
+        version: v.version,
+      });
       this.toast.show(`${v.name} joined your menagerie`);
     } catch (err) {
       this.toast.error(err);
     }
   }
+
+  /**
+   * The dead end this closes: someone scans a QR, reads a profile, and the
+   * only way onward is the landing page — which forgets the creature they
+   * came for, at the exact moment they were most interested in it.
+   *
+   * A fresh profile has no answers, so there is nothing to compare yet. The
+   * honest destination is the survey, with this creature already kept and
+   * already queued for the comparison that becomes possible once they answer.
+   */
+  protected async hatchAndKeep(v: LoadedProfile): Promise<void> {
+    this.hatching.set(true);
+    try {
+      await this.session.hatch();
+      await this.session.addConnection(v.name, v.phrase, {
+        viewLocator: v.viewLocator,
+        version: v.version,
+      });
+      this.compare.addPhrase(v.phrase);
+      const mine = this.session.viewPhrase();
+      if (mine) this.compare.addPhrase(mine);
+      await this.router.navigate(['/me']);
+      this.toast.show(`Hatched — ${v.name} is in your menagerie. Answer a few, then compare.`);
+    } catch (err) {
+      this.toast.error(err);
+    } finally {
+      this.hatching.set(false);
+    }
+  }
 }