create-ailk 0.21.0 → 0.23.0

package/templates/apps/web/app/[locale]/software/__tests__/page-renderer-migration.test.tsx

@@ -61,7 +61,7 @@ describe("software/[slug] — snapshot regression", () => {
     });
     const { container } = render(element);
     expect(container.innerHTML).toMatchInlineSnapshot(`
-     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"@working-theory/page-renderer","description":"Single rendering primitive for MDX-wired routes.","mainEntity":{"@context":"https://schema.org","@type":"SoftwareApplication","name":"@working-theory/page-renderer","description":"Single rendering primitive for MDX-wired routes."}}</script><main id="main"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 py-section"><h1 class="text-heading-1 lg:text-display-sm font-display text-fg hero-type-display">@working-theory/page-renderer</h1><p data-testid="software-description" class="mt-block-tight text-lead">Single rendering primitive for MDX-wired routes.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle mt-block-loose"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-text-muted) text-body-sm leading-relaxed [&amp;>*:first-child]:mt-0 [&amp;_h2]:mt-block-loose [&amp;_h2]:scroll-mt-24 [&amp;_h2]:text-heading-3 [&amp;_h2]:font-display [&amp;_h2]:text-(--color-fg) [&amp;_h3]:mt-block-loose [&amp;_h3]:scroll-mt-24 [&amp;_h3]:text-heading-4 [&amp;_h3]:font-display [&amp;_h3]:text-(--color-fg) [&amp;_h4]:mt-block-tight [&amp;_h4]:scroll-mt-24 [&amp;_h4]:text-heading-4 [&amp;_h4]:font-display [&amp;_h4]:text-(--color-fg) [&amp;_h5]:mt-block-tight [&amp;_h5]:scroll-mt-24 [&amp;_h5]:text-heading-4 [&amp;_h5]:font-display [&amp;_h5]:text-(--color-fg) [&amp;_h6]:mt-block-tight [&amp;_h6]:scroll-mt-24 [&amp;_h6]:text-heading-4 [&amp;_h6]:font-display [&amp;_h6]:text-(--color-fg) [&amp;_p]:mt-paragraph [&amp;_strong]:font-semibold [&amp;_strong]:text-(--color-fg) [&amp;_em]:italic [&amp;_ul]:mt-paragraph [&amp;_ul]:list-disc [&amp;_ul]:ps-6 [&amp;_ol]:mt-paragraph [&amp;_ol]:list-decimal [&amp;_ol]:ps-6 [&amp;_li]:mt-1 [&amp;_li]:ps-1 [&amp;_li]:marker:text-(--color-text-muted) [&amp;_li>ul]:mt-1 [&amp;_li>ol]:mt-1 [&amp;_blockquote]:mt-paragraph [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-(--color-border-strong) [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_blockquote]:text-(--color-text-muted) [&amp;_hr]:my-block-loose [&amp;_hr]:border-(--color-border) [&amp;_a]:text-(--color-accent) [&amp;_a]:underline [&amp;_a]:underline-offset-4 [&amp;_:not(pre)>code]:rounded [&amp;_:not(pre)>code]:bg-(--color-surface-secondary) [&amp;_:not(pre)>code]:px-1.5 [&amp;_:not(pre)>code]:py-0.5 [&amp;_:not(pre)>code]:text-code [&amp;_:not(pre)>code]:font-mono [&amp;_:not(pre)>code]:text-(--color-fg) [&amp;_pre]:mt-paragraph [&amp;_pre]:overflow-auto [&amp;_pre]:rounded-md [&amp;_pre]:border-hairline [&amp;_pre]:border-(--color-border) [&amp;_pre]:bg-(--color-bg) [&amp;_pre]:p-4 [&amp;_pre]:font-mono [&amp;_pre]:text-body-sm [&amp;_img]:mt-paragraph [&amp;_img]:h-auto [&amp;_img]:max-w-full [&amp;_img]:rounded-lg [&amp;_table]:mt-paragraph [&amp;_table]:w-full [&amp;_table]:border-collapse [&amp;_table]:text-body-sm [&amp;_th]:border-b [&amp;_th]:border-(--color-border) [&amp;_th]:bg-(--color-surface-secondary) [&amp;_th]:px-3 [&amp;_th]:py-2 [&amp;_th]:text-start [&amp;_th]:font-semibold [&amp;_th]:text-(--color-fg) [&amp;_td]:border-b [&amp;_td]:border-(--color-border) [&amp;_td]:px-3 [&amp;_td]:py-2 [&amp;_kbd]:rounded [&amp;_kbd]:border-hairline [&amp;_kbd]:border-(--color-border) [&amp;_kbd]:bg-(--color-surface-secondary) [&amp;_kbd]:px-1.5 [&amp;_kbd]:py-0.5 [&amp;_kbd]:text-caption [&amp;_kbd]:font-mono" data-testid="mdx-content"><div data-testid="mdx-rendered">## Overview
+     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"@working-theory/page-renderer","description":"Single rendering primitive for MDX-wired routes.","mainEntity":{"@context":"https://schema.org","@type":"SoftwareApplication","name":"@working-theory/page-renderer","description":"Single rendering primitive for MDX-wired routes."}}</script><main id="main"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 py-section"><h1 class="text-heading-1 lg:text-display-sm font-display text-fg hero-type-display">@working-theory/page-renderer</h1><p data-testid="software-description" class="mt-block-tight text-lead">Single rendering primitive for MDX-wired routes.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle mt-block-loose"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-text-muted) text-body-sm leading-relaxed [&amp;>*:first-child]:mt-0 [&amp;_h2]:mt-block-loose [&amp;_h2]:scroll-mt-24 [&amp;_h2]:text-heading-3 [&amp;_h2]:font-display [&amp;_h2]:text-(--color-fg) [&amp;_h3]:mt-block-loose [&amp;_h3]:scroll-mt-24 [&amp;_h3]:text-heading-4 [&amp;_h3]:font-display [&amp;_h3]:text-(--color-fg) [&amp;_h4]:mt-block-tight [&amp;_h4]:scroll-mt-24 [&amp;_h4]:text-heading-4 [&amp;_h4]:font-display [&amp;_h4]:text-(--color-fg) [&amp;_h5]:mt-block-tight [&amp;_h5]:scroll-mt-24 [&amp;_h5]:text-heading-4 [&amp;_h5]:font-display [&amp;_h5]:text-(--color-fg) [&amp;_h6]:mt-block-tight [&amp;_h6]:scroll-mt-24 [&amp;_h6]:text-heading-4 [&amp;_h6]:font-display [&amp;_h6]:text-(--color-fg) [&amp;_p]:mt-paragraph [&amp;_strong]:font-semibold [&amp;_strong]:text-(--color-fg) [&amp;_em]:italic [&amp;_ul]:mt-paragraph [&amp;_ul]:list-disc [&amp;_ul]:ps-6 [&amp;_ol]:mt-paragraph [&amp;_ol]:list-decimal [&amp;_ol]:ps-6 [&amp;_li]:mt-1 [&amp;_li]:ps-1 [&amp;_li]:marker:text-(--color-text-muted) [&amp;_li>ul]:mt-1 [&amp;_li>ol]:mt-1 [&amp;_blockquote]:mt-paragraph [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-(--color-border-strong) [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_blockquote]:text-(--color-text-muted) [&amp;_hr]:my-block-loose [&amp;_hr]:border-(--color-border) [&amp;_a]:text-(--color-accent) [&amp;_a]:underline [&amp;_a]:underline-offset-4 [&amp;_:not(pre)>code]:rounded [&amp;_:not(pre)>code]:bg-(--color-surface-secondary) [&amp;_:not(pre)>code]:px-1.5 [&amp;_:not(pre)>code]:py-0.5 [&amp;_:not(pre)>code]:text-code [&amp;_:not(pre)>code]:font-mono [&amp;_:not(pre)>code]:text-(--color-fg) [&amp;_pre]:mt-paragraph [&amp;_pre]:overflow-auto [&amp;_pre]:rounded-md [&amp;_pre]:border-hairline [&amp;_pre]:border-(--color-border) [&amp;_pre]:bg-(--color-bg) [&amp;_pre]:p-4 [&amp;_pre]:font-mono [&amp;_pre]:text-body-sm [&amp;_img]:mt-paragraph [&amp;_img]:h-auto [&amp;_img]:max-w-full [&amp;_img]:rounded-lg [&amp;_table]:mt-paragraph [&amp;_table]:w-full [&amp;_table]:border-collapse [&amp;_table]:text-body-sm [&amp;_th]:border-b [&amp;_th]:border-(--color-border) [&amp;_th]:bg-(--color-surface-secondary) [&amp;_th]:px-3 [&amp;_th]:py-2 [&amp;_th]:text-start [&amp;_th]:font-semibold [&amp;_th]:text-(--color-fg) [&amp;_td]:border-b [&amp;_td]:border-(--color-border) [&amp;_td]:px-3 [&amp;_td]:py-2 [&amp;_kbd]:rounded [&amp;_kbd]:border-hairline [&amp;_kbd]:border-(--color-border) [&amp;_kbd]:bg-(--color-surface-secondary) [&amp;_kbd]:px-1.5 [&amp;_kbd]:py-0.5 [&amp;_kbd]:text-caption [&amp;_kbd]:font-mono" data-testid="mdx-content"><div data-testid="mdx-rendered">## Overview
 
      Body content.</div></div></article></div></div></div></main>"
     `);

package/templates/apps/web/app/[locale]/team/__tests__/team-routes.test.tsx

@@ -68,7 +68,10 @@ describe("team/[slug] — the profile page", () => {
     const person = profile["mainEntity"] as JsonLd;
     expect(person["@type"]).toBe("Person");
     expect(person["@id"]).toBe("#person");
-    expect(person["jobTitle"]).toBe(FIRST_MEMBER.frontmatter.schema.jobTitle);
+    // The seed's `jobTitle` is a `{placeholder}` slot, which never reaches the
+    // graph (#8797 D8.5).
+    expect(FIRST_MEMBER.frontmatter.schema.jobTitle).toBe("{Their title}");
+    expect(person).not.toHaveProperty("jobTitle");
 
     const breadcrumb = graph.find((b) => b["@type"] === "BreadcrumbList")!;
     const items = breadcrumb["itemListElement"] as Array<{ item: string }>;

package/templates/apps/web/app/[locale]/tech-articles/__tests__/page-renderer-migration.test.tsx

@@ -62,7 +62,7 @@ describe("tech-articles/[slug] — snapshot regression", () => {
     });
     const { container } = render(element);
     expect(container.innerHTML).toMatchInlineSnapshot(`
-     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"AEO Layer 1 Scoring","description":"Deep dive into AEO Layer 1 scoring and AILK audit internals.","mainEntity":{"@context":"https://schema.org","@type":"TechArticle","headline":"AEO Layer 1 Scoring","description":"Deep dive into AEO Layer 1 scoring and AILK audit internals."}},{"@context":"https://schema.org","@type":"BreadcrumbList","inLanguage":"en","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http://localhost:3000/en/"},{"@type":"ListItem","position":2,"name":"Tech Articles","item":"http://localhost:3000/en/tech-articles"},{"@type":"ListItem","position":3,"name":"AEO Layer 1 Scoring","item":"http://localhost:3000/en/tech-articles/aeo-layer1-scoring"}]}]}</script><main id="main"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 py-section"><h1 class="text-heading-1 lg:text-display-sm font-display text-fg hero-type-display">AEO Layer 1 Scoring</h1><p data-testid="tech-article-description" class="mt-block-tight text-lead">Deep dive into AEO Layer 1 scoring and AILK audit internals.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle mt-block-loose"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-text-muted) text-body-sm leading-relaxed [&amp;>*:first-child]:mt-0 [&amp;_h2]:mt-block-loose [&amp;_h2]:scroll-mt-24 [&amp;_h2]:text-heading-3 [&amp;_h2]:font-display [&amp;_h2]:text-(--color-fg) [&amp;_h3]:mt-block-loose [&amp;_h3]:scroll-mt-24 [&amp;_h3]:text-heading-4 [&amp;_h3]:font-display [&amp;_h3]:text-(--color-fg) [&amp;_h4]:mt-block-tight [&amp;_h4]:scroll-mt-24 [&amp;_h4]:text-heading-4 [&amp;_h4]:font-display [&amp;_h4]:text-(--color-fg) [&amp;_h5]:mt-block-tight [&amp;_h5]:scroll-mt-24 [&amp;_h5]:text-heading-4 [&amp;_h5]:font-display [&amp;_h5]:text-(--color-fg) [&amp;_h6]:mt-block-tight [&amp;_h6]:scroll-mt-24 [&amp;_h6]:text-heading-4 [&amp;_h6]:font-display [&amp;_h6]:text-(--color-fg) [&amp;_p]:mt-paragraph [&amp;_strong]:font-semibold [&amp;_strong]:text-(--color-fg) [&amp;_em]:italic [&amp;_ul]:mt-paragraph [&amp;_ul]:list-disc [&amp;_ul]:ps-6 [&amp;_ol]:mt-paragraph [&amp;_ol]:list-decimal [&amp;_ol]:ps-6 [&amp;_li]:mt-1 [&amp;_li]:ps-1 [&amp;_li]:marker:text-(--color-text-muted) [&amp;_li>ul]:mt-1 [&amp;_li>ol]:mt-1 [&amp;_blockquote]:mt-paragraph [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-(--color-border-strong) [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_blockquote]:text-(--color-text-muted) [&amp;_hr]:my-block-loose [&amp;_hr]:border-(--color-border) [&amp;_a]:text-(--color-accent) [&amp;_a]:underline [&amp;_a]:underline-offset-4 [&amp;_:not(pre)>code]:rounded [&amp;_:not(pre)>code]:bg-(--color-surface-secondary) [&amp;_:not(pre)>code]:px-1.5 [&amp;_:not(pre)>code]:py-0.5 [&amp;_:not(pre)>code]:text-code [&amp;_:not(pre)>code]:font-mono [&amp;_:not(pre)>code]:text-(--color-fg) [&amp;_pre]:mt-paragraph [&amp;_pre]:overflow-auto [&amp;_pre]:rounded-md [&amp;_pre]:border-hairline [&amp;_pre]:border-(--color-border) [&amp;_pre]:bg-(--color-bg) [&amp;_pre]:p-4 [&amp;_pre]:font-mono [&amp;_pre]:text-body-sm [&amp;_img]:mt-paragraph [&amp;_img]:h-auto [&amp;_img]:max-w-full [&amp;_img]:rounded-lg [&amp;_table]:mt-paragraph [&amp;_table]:w-full [&amp;_table]:border-collapse [&amp;_table]:text-body-sm [&amp;_th]:border-b [&amp;_th]:border-(--color-border) [&amp;_th]:bg-(--color-surface-secondary) [&amp;_th]:px-3 [&amp;_th]:py-2 [&amp;_th]:text-start [&amp;_th]:font-semibold [&amp;_th]:text-(--color-fg) [&amp;_td]:border-b [&amp;_td]:border-(--color-border) [&amp;_td]:px-3 [&amp;_td]:py-2 [&amp;_kbd]:rounded [&amp;_kbd]:border-hairline [&amp;_kbd]:border-(--color-border) [&amp;_kbd]:bg-(--color-surface-secondary) [&amp;_kbd]:px-1.5 [&amp;_kbd]:py-0.5 [&amp;_kbd]:text-caption [&amp;_kbd]:font-mono" data-testid="mdx-content"><div data-testid="mdx-rendered">## AEO Layer 1
+     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"AEO Layer 1 Scoring","description":"Deep dive into AEO Layer 1 scoring and AILK audit internals.","mainEntity":{"@context":"https://schema.org","@type":"TechArticle","headline":"AEO Layer 1 Scoring","description":"Deep dive into AEO Layer 1 scoring and AILK audit internals."}},{"@context":"https://schema.org","@type":"BreadcrumbList","inLanguage":"en","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http://localhost:3000/en/"},{"@type":"ListItem","position":2,"name":"Tech Articles","item":"http://localhost:3000/en/tech-articles"},{"@type":"ListItem","position":3,"name":"AEO Layer 1 Scoring","item":"http://localhost:3000/en/tech-articles/aeo-layer1-scoring"}]}]}</script><main id="main"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 py-section"><h1 class="text-heading-1 lg:text-display-sm font-display text-fg hero-type-display">AEO Layer 1 Scoring</h1><p data-testid="tech-article-description" class="mt-block-tight text-lead">Deep dive into AEO Layer 1 scoring and AILK audit internals.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle mt-block-loose"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-text-muted) text-body-sm leading-relaxed [&amp;>*:first-child]:mt-0 [&amp;_h2]:mt-block-loose [&amp;_h2]:scroll-mt-24 [&amp;_h2]:text-heading-3 [&amp;_h2]:font-display [&amp;_h2]:text-(--color-fg) [&amp;_h3]:mt-block-loose [&amp;_h3]:scroll-mt-24 [&amp;_h3]:text-heading-4 [&amp;_h3]:font-display [&amp;_h3]:text-(--color-fg) [&amp;_h4]:mt-block-tight [&amp;_h4]:scroll-mt-24 [&amp;_h4]:text-heading-4 [&amp;_h4]:font-display [&amp;_h4]:text-(--color-fg) [&amp;_h5]:mt-block-tight [&amp;_h5]:scroll-mt-24 [&amp;_h5]:text-heading-4 [&amp;_h5]:font-display [&amp;_h5]:text-(--color-fg) [&amp;_h6]:mt-block-tight [&amp;_h6]:scroll-mt-24 [&amp;_h6]:text-heading-4 [&amp;_h6]:font-display [&amp;_h6]:text-(--color-fg) [&amp;_p]:mt-paragraph [&amp;_strong]:font-semibold [&amp;_strong]:text-(--color-fg) [&amp;_em]:italic [&amp;_ul]:mt-paragraph [&amp;_ul]:list-disc [&amp;_ul]:ps-6 [&amp;_ol]:mt-paragraph [&amp;_ol]:list-decimal [&amp;_ol]:ps-6 [&amp;_li]:mt-1 [&amp;_li]:ps-1 [&amp;_li]:marker:text-(--color-text-muted) [&amp;_li>ul]:mt-1 [&amp;_li>ol]:mt-1 [&amp;_blockquote]:mt-paragraph [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-(--color-border-strong) [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_blockquote]:text-(--color-text-muted) [&amp;_hr]:my-block-loose [&amp;_hr]:border-(--color-border) [&amp;_a]:text-(--color-accent) [&amp;_a]:underline [&amp;_a]:underline-offset-4 [&amp;_:not(pre)>code]:rounded [&amp;_:not(pre)>code]:bg-(--color-surface-secondary) [&amp;_:not(pre)>code]:px-1.5 [&amp;_:not(pre)>code]:py-0.5 [&amp;_:not(pre)>code]:text-code [&amp;_:not(pre)>code]:font-mono [&amp;_:not(pre)>code]:text-(--color-fg) [&amp;_pre]:mt-paragraph [&amp;_pre]:overflow-auto [&amp;_pre]:rounded-md [&amp;_pre]:border-hairline [&amp;_pre]:border-(--color-border) [&amp;_pre]:bg-(--color-bg) [&amp;_pre]:p-4 [&amp;_pre]:font-mono [&amp;_pre]:text-body-sm [&amp;_img]:mt-paragraph [&amp;_img]:h-auto [&amp;_img]:max-w-full [&amp;_img]:rounded-lg [&amp;_table]:mt-paragraph [&amp;_table]:w-full [&amp;_table]:border-collapse [&amp;_table]:text-body-sm [&amp;_th]:border-b [&amp;_th]:border-(--color-border) [&amp;_th]:bg-(--color-surface-secondary) [&amp;_th]:px-3 [&amp;_th]:py-2 [&amp;_th]:text-start [&amp;_th]:font-semibold [&amp;_th]:text-(--color-fg) [&amp;_td]:border-b [&amp;_td]:border-(--color-border) [&amp;_td]:px-3 [&amp;_td]:py-2 [&amp;_kbd]:rounded [&amp;_kbd]:border-hairline [&amp;_kbd]:border-(--color-border) [&amp;_kbd]:bg-(--color-surface-secondary) [&amp;_kbd]:px-1.5 [&amp;_kbd]:py-0.5 [&amp;_kbd]:text-caption [&amp;_kbd]:font-mono" data-testid="mdx-content"><div data-testid="mdx-rendered">## AEO Layer 1
 
      Body content.</div></div></article></div></div></div></main>"
     `);

package/templates/apps/web/app/[locale]/testimonials/__tests__/page-renderer-migration.test.tsx

@@ -79,7 +79,7 @@ describe("TestimonialsPage — snapshot regression", () => {
     });
     const { container } = render(element);
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Customer Testimonials","description":"What our customers say.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Review"}]},"aggregateRating":{"@context":"https://schema.org","@type":"AggregateRating","ratingValue":4.9,"reviewCount":0,"bestRating":5,"worstRating":1,"itemReviewed":{"@type":"SoftwareApplication"}}}</script><main id="main"><div><h1>Customer Testimonials</h1><p data-testid="testimonials-description" class="mt-block-tight text-lead">What our customers say.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle mt-block-loose"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div data-testid="mdx-remote" data-source=""></div></article></div></div></div></main>"`,
+      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Customer Testimonials","description":"What our customers say.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Review"}]},"aggregateRating":{"@context":"https://schema.org","@type":"AggregateRating","ratingValue":4.9,"reviewCount":0,"bestRating":5,"worstRating":1,"itemReviewed":{"@type":"SoftwareApplication"}}}</script><main id="main"><div><h1>Customer Testimonials</h1><p data-testid="testimonials-description" class="mt-block-tight text-lead">What our customers say.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle mt-block-loose"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div data-testid="mdx-remote" data-source=""></div></article></div></div></div></main>"`,
     );
   });
 });

package/templates/apps/web/app/[locale]/thanks/[slug]/AccountInviteLink.tsx

@@ -0,0 +1,89 @@
+"use client"; // Reads sessionStorage (a browser API) once on mount — a server page cannot.
+
+/**
+ * AccountInviteLink — the /thanks page's "Track this in your account" link
+ * (#8771 D6). The magnet walk writes one `sessionStorage` item,
+ * `ailk:account-invite`, before it navigates here; this shows the link only
+ * for the thank-you page that walk was headed to, and only if the stored href
+ * is a same-site sign-in path. It reads the item once and removes it, so the
+ * email in the href does not stay in the tab. A refresh shows no link (the
+ * invite email still carries it).
+ *
+ * Base tree: it imports nothing from `flows/**`, so a build without the walk
+ * still compiles this page.
+ */
+import { Button, Container, Link } from "@working-theory/ui";
+import type { ReactElement } from "react";
+import { useEffect, useState } from "react";
+
+/** Must equal `ACCOUNT_INVITE_STORAGE_KEY` in the walk's `FlowStepperClient`. */
+const STORAGE_KEY = "ailk:account-invite";
+/** A reserved name that never resolves: only used to test an href stays on-site. */
+const PLACEHOLDER_ORIGIN = "https://placeholder.invalid";
+const HUB_SIGN_IN_PATH = "/api/hub-session/sign-in";
+
+interface Props {
+  /** The route's `[slug]` — the hand-off must have been written for this page. */
+  thanksSlug: string;
+  /** `contact.trackInAccount`, read on the server. */
+  label: string;
+}
+
+/** The stored href when it is a same-site sign-in path, else `null`. */
+function safeSignInHref(raw: unknown, thanks: unknown, thanksSlug: string): string | null {
+  if (typeof raw !== "string" || thanks !== thanksSlug) return null;
+  let url: URL;
+  try {
+    url = new URL(raw, PLACEHOLDER_ORIGIN);
+  } catch {
+    return null;
+  }
+  if (url.origin !== PLACEHOLDER_ORIGIN) return null;
+  if (url.pathname !== HUB_SIGN_IN_PATH && !url.pathname.endsWith("/sign-in")) {
+    return null;
+  }
+  return raw;
+}
+
+/** Read the hand-off once, remove it, and answer the link to show (or `null`). */
+function takeHandOff(thanksSlug: string): string | null {
+  try {
+    const stored = window.sessionStorage.getItem(STORAGE_KEY);
+    if (stored === null) return null;
+    window.sessionStorage.removeItem(STORAGE_KEY);
+    const parsed: unknown = JSON.parse(stored);
+    if (typeof parsed !== "object" || parsed === null) return null;
+    const { thanks, href } = parsed as { thanks?: unknown; href?: unknown };
+    return safeSignInHref(href, thanks, thanksSlug);
+  } catch {
+    return null;
+  }
+}
+
+export function AccountInviteLink({ thanksSlug, label }: Props): ReactElement | null {
+  const [href, setHref] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Only ever sets the link: React's development double-mount runs this
+    // twice, and the second run finds the item already removed.
+    const found = takeHandOff(thanksSlug);
+    if (found !== null) setHref(found);
+  }, [thanksSlug]);
+
+  if (href === null) return null;
+  return (
+    // Session Replay records the DOM, so the link (it carries the email) is
+    // blocked from it; `Link` does not forward an undeclared data-* attribute.
+    // The page shell sets no gutters, so the link sits in its own Container,
+    // lined up with the thank-you content above it.
+    <Container className="pb-section">
+      <div data-sentry-block>
+        <Button asChild variant="outline" className="min-h-11">
+          <Link href={href} variant="bare" data-testid="thanks-account-invite">
+            {label}
+          </Link>
+        </Button>
+      </div>
+    </Container>
+  );
+}

package/templates/apps/web/app/[locale]/thanks/[slug]/__tests__/AccountInviteLink.test.tsx

@@ -0,0 +1,104 @@
+/**
+ * #8771 AC-5 — /thanks shows only its own hand-off: the walk's sessionStorage
+ * item, for this page's slug, when its href is a same-site sign-in path.
+ */
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+
+import { render, screen } from "@testing-library/react";
+import React, { StrictMode } from "react";
+
+import { AccountInviteLink } from "../AccountInviteLink";
+
+const KEY = "ailk:account-invite";
+const LABEL = "Track this in your account";
+const SITE_HREF = "/sign-in?next=%2Faccount&email=jane%40example.com";
+const HUB_HREF = "/api/hub-session/sign-in?next=%2Faccount&email=x%40y.example";
+const WALK = join(__dirname, "..", "..", "..", "flows", "[slug]", "FlowStepperClient.tsx");
+// A Free scaffold ships no magnet walk, and the scaffold matrix runs this suite
+// inside one (#8799), so the key check skips where the walk does not exist.
+const itWithWalk = existsSync(WALK) ? it : it.skip;
+
+function store(value: unknown): void {
+  window.sessionStorage.setItem(KEY, typeof value === "string" ? value : JSON.stringify(value));
+}
+
+function show(slug = "flow-thanks") {
+  return render(<AccountInviteLink thanksSlug={slug} label={LABEL} />);
+}
+
+beforeEach(() => window.sessionStorage.clear());
+
+describe("AccountInviteLink", () => {
+  it("renders the stored link for its own slug, blocked from Replay, and removes the item", () => {
+    store({ thanks: "flow-thanks", href: SITE_HREF });
+
+    show();
+
+    const link = screen.getByTestId("thanks-account-invite");
+    expect(link).toHaveAttribute("href", SITE_HREF);
+    expect(link).toHaveTextContent(LABEL);
+    expect(link.closest("[data-sentry-block]")).not.toBeNull();
+    expect(window.sessionStorage.getItem(KEY)).toBeNull();
+  });
+
+  it("renders a hub spoke's sign-in path under the matching slug", () => {
+    store({ thanks: "flow-thanks", href: HUB_HREF });
+    show();
+    expect(screen.getByTestId("thanks-account-invite")).toHaveAttribute("href", HUB_HREF);
+  });
+
+  it("renders a locale-prefixed site sign-in path", () => {
+    store({ thanks: "flow-thanks", href: "/fr/sign-in?email=a%40b.example" });
+    show();
+    expect(screen.getByTestId("thanks-account-invite")).toBeInTheDocument();
+  });
+
+  it.each([
+    ["another slug", { thanks: "other", href: SITE_HREF }, "flow-thanks"],
+    ["an off-site href", { thanks: "flow-thanks", href: "https://evil.example/sign-in" }, "flow-thanks"],
+    ["a protocol-relative href", { thanks: "flow-thanks", href: "//evil.example/sign-in" }, "flow-thanks"],
+    ["a non-sign-in path", { thanks: "flow-thanks", href: "/account" }, "flow-thanks"],
+    ["a hub href under another thanks", { thanks: "flow-thanks-qualified", href: HUB_HREF }, "flow-thanks"],
+    ["a value that is not JSON", "not json", "flow-thanks"],
+    ["a JSON null", "null", "flow-thanks"],
+  ])("renders nothing for %s", (_name, value, slug) => {
+    store(value);
+    show(slug);
+    expect(screen.queryByTestId("thanks-account-invite")).toBeNull();
+  });
+
+  it("renders nothing when sessionStorage throws", () => {
+    const spy = jest.spyOn(Storage.prototype, "getItem").mockImplementation(() => {
+      throw new Error("denied");
+    });
+    show();
+    expect(screen.queryByTestId("thanks-account-invite")).toBeNull();
+    spy.mockRestore();
+  });
+
+  it("shows the link once: a fresh mount after it (a refresh) renders nothing", () => {
+    store({ thanks: "flow-thanks", href: SITE_HREF });
+    const first = show();
+    expect(screen.getByTestId("thanks-account-invite")).toBeInTheDocument();
+    first.unmount();
+
+    show();
+    expect(screen.queryByTestId("thanks-account-invite")).toBeNull();
+  });
+
+  it("keeps the link under React.StrictMode's double effect", () => {
+    store({ thanks: "flow-thanks", href: SITE_HREF });
+    render(
+      <StrictMode>
+        <AccountInviteLink thanksSlug="flow-thanks" label={LABEL} />
+      </StrictMode>,
+    );
+    expect(screen.getByTestId("thanks-account-invite")).toBeInTheDocument();
+  });
+
+  itWithWalk("reads the same storage key the walk writes (the two constants are tied only by this test)", () => {
+    const walk = readFileSync(WALK, "utf8");
+    expect(walk).toContain(`ACCOUNT_INVITE_STORAGE_KEY = "${KEY}"`);
+  });
+});

package/templates/apps/web/app/[locale]/thanks/[slug]/__tests__/page.test.tsx

@@ -37,6 +37,23 @@ jest.mock("@working-theory/ui", () => ({
     }),
 }));
 
+// #8771 D6 — the page reads the link label on the server and renders the client
+// component that owns the hand-off; this file asserts only that wiring.
+jest.mock("next-intl/server", () => ({
+  getTranslations: jest.fn().mockResolvedValue((key: string) => `label:${key}`),
+}));
+// eslint-disable-next-line no-restricted-syntax -- the page's wiring is the unit under test; the component has its own suite
+jest.mock("../AccountInviteLink", () => ({
+  AccountInviteLink: ({ thanksSlug, label }: { thanksSlug: string; label: string }) =>
+    React.createElement("div", {
+      "data-testid": "account-invite-link",
+      "data-slug": thanksSlug,
+      "data-label": label,
+    }),
+}));
+
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
 import { notFound } from "next/navigation";
 import ThankYouSlugPage from "../page";
 
@@ -93,4 +110,25 @@ describe("ThankYouSlugPage — detail route", () => {
     ).rejects.toThrow("NEXT_NOT_FOUND");
     expect(mockNotFound).toHaveBeenCalled();
   });
+
+  it("renders AccountInviteLink with the route's slug and the contact label (#8771)", async () => {
+    const getMdxSource = jest.fn().mockResolvedValue(makeThankYouSource("flow-thanks"));
+
+    const element = await ThankYouSlugPage({
+      params: Promise.resolve({ locale: "en", slug: "flow-thanks" }),
+      getMdxSource,
+    });
+    const { container } = render(element);
+
+    const link = container.querySelector('[data-testid="account-invite-link"]');
+    // Inside the page's own <main>, not after it (#8771 design review).
+    expect(link?.closest("main")).not.toBeNull();
+    expect(link).toHaveAttribute("data-slug", "flow-thanks");
+    expect(link).toHaveAttribute("data-label", "label:trackInAccount");
+  });
+
+  it("stays a server page: the module has no client directive (#8771)", () => {
+    const source = readFileSync(join(__dirname, "..", "page.tsx"), "utf8");
+    expect(source).not.toMatch(/["']use client["']/);
+  });
 });

package/templates/apps/web/app/[locale]/thanks/[slug]/page.tsx

@@ -7,8 +7,11 @@
 import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
 import { renderPage, renderPageMetadata } from "@working-theory/page-renderer";
 import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
 import type { ReactElement } from "react";
 
+import { AccountInviteLink } from "./AccountInviteLink";
+
 interface Props {
   params: Promise<{ locale: string; slug: string }>;
   getMdxSource?: typeof defaultGetMdxSource;
@@ -26,11 +29,17 @@ export default async function Page({
   getMdxSource,
 }: Props): Promise<ReactElement> {
   const { locale, slug } = await params;
+  // #8771 D6 — the magnet walk's "Track this in your account" hand-off. The
+  // page stays a server page; the client component decides if it has a link.
+  // It renders through `trailing`, inside the page's own <main>, so it keeps
+  // the page's landmark and layout rather than sitting after `</main>`.
+  const t = await getTranslations({ locale, namespace: "contact" });
   return renderPage({
     type: "ThankYouPage",
     slug,
     locale,
     populatedDescriptionTestId: "thank-you-description",
+    trailing: <AccountInviteLink thanksSlug={slug} label={t("trackInAccount")} />,
     ...(getMdxSource !== undefined && { getMdxSource }),
   });
 }

package/templates/apps/web/app/[locale]/unsubscribe/__tests__/unsubscribe-rsc-boundary.test.tsx

@@ -139,6 +139,19 @@ for (const specifier of ["next/link", "next/image", "next/script"]) {
 }
 // `next-intl` is path-independent: jest.config.cjs maps every copy onto one stub.
 jest.doMock("next-intl", () => flight.createClientModuleProxy("next-intl"));
+// #8847 D12 — the page reads the newsletter magnet through
+// `lib/in-page-magnet`, whose module graph reaches `contact.actions`' import
+// of `next/navigation`. Next serves server code that entry's react-server
+// build; under jest it is the client build, which needs a React context, so
+// it is stubbed as `signed-in-nav-rsc-boundary.test.tsx` stubs it.
+jest.doMock("next/navigation", () => ({
+  redirect: () => {
+    throw new Error("redirect");
+  },
+  notFound: () => {
+    throw new Error("NEXT_NOT_FOUND");
+  },
+}));
 
 // ── Render ───────────────────────────────────────────────────────────────────
 
@@ -200,6 +213,10 @@ describe("/[locale]/unsubscribe crosses the RSC → client boundary cleanly", ()
     const { errors, payload } = await renderPageToFlight("tok_1");
     expect(errors).toEqual([]);
     expect(payload).toContain("unsubscribe-page");
+    // #8847 D12 — the island gets the token and the magnet's copy as strings.
+    const props = /"token":"tok_1"[^}]*}/.exec(payload)?.[0] ?? "";
+    expect(props).toContain('"cta":"Unsubscribe"');
+    expect(props).toContain('"doneHeadline":"You\'re unsubscribed."');
   });
 
   it("serializes with no token", async () => {

package/templates/apps/web/app/[locale]/unsubscribe/__tests__/unsubscribe.test.tsx

@@ -40,9 +40,11 @@ jest.mock("next-intl", () => ({
 }));
 
 const mockUnsubscribe = jest.fn();
+const mockFlowsGet = jest.fn();
 jest.mock("@working-theory/api-client", () => ({
   __esModule: true,
   consent: { unsubscribe: (...args: unknown[]) => mockUnsubscribe(...args) },
+  flows: { get: (...args: unknown[]) => mockFlowsGet(...args) },
   visitorForwardHeaders: () => undefined,
 }));
 
@@ -56,8 +58,16 @@ import Page, { generateMetadata } from "../page";
 const ok = <T,>(body: T) => ({ ok: true, body });
 const refusal = (status: number) => ({ ok: false, status, body: null });
 
+// #8847 D12 — the page's newsletter-magnet read is shared for a few seconds
+// per module instance; each test starts an hour later so none sees another's.
+let clock = 1_900_000_000_000;
+jest.spyOn(Date, "now").mockImplementation(() => clock);
+
 beforeEach(() => {
+  clock += 60 * 60 * 1000;
   mockUnsubscribe.mockReset();
+  // The hub unreadable: the seeded newsletterFlowConfig's unsubscribe copy.
+  mockFlowsGet.mockReset().mockRejectedValue(new Error("hub down"));
 });
 
 async function renderPage(token: string | undefined): Promise<void> {
@@ -86,7 +96,7 @@ describe("the page performs no write on GET", () => {
     expect(mockUnsubscribe).not.toHaveBeenCalled();
     expect(screen.getByTestId("unsubscribe-page")).toBeInTheDocument();
     expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Unsubscribe");
-    expect(screen.getByText("Stop these emails?")).toBeInTheDocument();
+    expect(screen.getByText("Stop getting the newsletter by email?")).toBeInTheDocument();
   });
 });
 
@@ -100,7 +110,7 @@ describe("with no token", () => {
 });
 
 describe("clicking Unsubscribe", () => {
-  it("a changed answer shows the done line with the purpose's description", async () => {
+  it("a changed answer shows the magnet's done message (#8847 D12)", async () => {
     mockUnsubscribe.mockResolvedValue(
       ok({ purpose: { id: "marketing_email", description: "product news and offers" }, changed: true }),
     );
@@ -108,7 +118,7 @@ describe("clicking Unsubscribe", () => {
     await userEvent.click(screen.getByTestId("unsubscribe-button"));
     expect(mockUnsubscribe).toHaveBeenCalledWith({ token: "tok_1" });
     expect(await screen.findByTestId("unsubscribe-done")).toHaveTextContent(
-      "You're unsubscribed from product news and offers.",
+      "You're unsubscribed.You won't get the newsletter any more.",
     );
   });
 
@@ -156,3 +166,52 @@ describe("clicking Unsubscribe", () => {
     expect(await screen.findByTestId("unsubscribe-unavailable")).toBeInTheDocument();
   });
 });
+
+describe("the copy comes from the newsletter magnet (#8847 D12, AC-7)", () => {
+  const unsubscribe = {
+    title: { en: "Leave" },
+    body: { en: "Sure?" },
+    cta: { en: "Leave now" },
+    done: { headline: { en: "Gone." } },
+  };
+
+  beforeEach(() => {
+    const { newsletterFlowConfig } = jest.requireActual("@working-theory/validation") as {
+      newsletterFlowConfig: Record<string, unknown>;
+    };
+    const { completionEmail: _omitted, ...body } = newsletterFlowConfig;
+    mockFlowsGet.mockReset().mockResolvedValue({ ok: true, status: 200, body: { ...body, unsubscribe } });
+  });
+
+  it("the title, line and button are the served block's, and so is the done message", async () => {
+    mockUnsubscribe.mockResolvedValue(
+      ok({ purpose: { id: "newsletter", description: "This site's newsletter by email" }, changed: true }),
+    );
+    await renderPage("tok_1");
+    expect(mockFlowsGet).toHaveBeenCalledWith("newsletter");
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Leave");
+    expect(screen.getByText("Sure?")).toBeInTheDocument();
+    expect(screen.getByTestId("unsubscribe-button")).toHaveTextContent("Leave now");
+    await userEvent.click(screen.getByTestId("unsubscribe-button"));
+    expect(await screen.findByTestId("unsubscribe-done")).toHaveTextContent("Gone.");
+  });
+
+  it("generateMetadata's title is the served block's", async () => {
+    const meta = await generateMetadata({
+      params: Promise.resolve({ locale: "en" }),
+      searchParams: Promise.resolve({}),
+    });
+    expect(meta.title).toBe("Leave");
+  });
+
+  it("already still shows the catalog's line", async () => {
+    mockUnsubscribe.mockResolvedValue(
+      ok({ purpose: { id: "newsletter", description: "This site's newsletter by email" }, changed: false }),
+    );
+    await renderPage("tok_1");
+    await userEvent.click(screen.getByTestId("unsubscribe-button"));
+    expect(await screen.findByTestId("unsubscribe-already")).toHaveTextContent(
+      "You were already unsubscribed.",
+    );
+  });
+});