@atelic-action/artifact 1.3.0 → 3.0.0

package/src/documents/Read.tsx

@@ -1,47 +1,45 @@
 import {
 	type ArtifactLink,
 	type ArtifactParagraph,
-	GradeChip,
-	gradeLabel,
 	isEmpty,
 	newTabProps,
 	Paragraph,
 	Runs,
-	Shot,
 	SignOff,
 	type WriteupGrade,
 	type WriteupPerson,
-	type WriteupShot,
 } from "@atelic-action/ui/artifact";
+import { IconList, ReportCard, type Tone } from "@atelic-action/ui/components";
 import { ArrowUpRight, Check } from "lucide-react";
+import type { ReactNode } from "react";
+import { Topic, type WriteupTopic } from "./Writeup";
 
 /**
  * The read: what a customer gets at the end of an engagement's first week,
  * before anything changes. Where the writeup says what letter each section
  * earned, the read says why, and what changes. Its shape is the practice's
  * FOOTPRINT.md, under What the Owner Gets: a title and a dated lede; the gist
- * table (every section, its grade, and one line); then the tiers; then the
- * plan, in order; then one closing line and the sign off.
+ * table (every section, its grade, and one line), with a note under it for
+ * what the read leaves out; then the tiers; then the plan, in order; then one
+ * closing line and the sign off.
  *
- * Each section reads as an aggregator of the tools we looked through, top to
- * bottom, under its trade name with the owner's question beneath it: where
- * we looked (the tools, linked, each with an optional line);
- * what it showed (a short paragraph or two, a compact table of facts, lists
- * of examples, and any proof pictures); why, in one sentence on a tinted
- * panel; today and after, a two column table of what a thing is and what it
- * becomes; and what we recommend, as a checklist. A beat with nothing in it
- * is left out, heading and all.
+ * A section is the writeup's section card, the same `Topic`, so the two
+ * documents read alike (Forni, 2026-10-16): the trade name linked to its
+ * definition, the one liner, the grade, and the why line, which here is the
+ * summary of what we saw in one or two sentences; then the writeup's blocks
+ * (findings with the owner's screens beside them, the basics, a table, a
+ * fold); then what is the read's own, today and after as a two column table
+ * and what we recommend as a checklist; and the tools we looked through at
+ * the foot, as the sources. A beat with nothing in it is left out.
  *
- * It is the writeup's sibling, not a variant: it wears the writeup's column,
- * head, grade chip and key, tier heading, section card, screen, and close
- * (the `.op` classes), and adds only what is its own (the `.rd` classes).
- * The gist table is drawn from the tiers, so a tier added later (Conversion,
- * once the analytics access lands) is one more entry in `tiers` and appears
- * in the table and the body alike, with no change to the props; until then
- * `note` says so in a callout under the table. Every prop
- * is plain data, so a routine can write a read as JSON; the one exception is
- * the sign off person's `role`, which takes a node and is equally happy with
- * a string.
+ * It wears the writeup's column, head, grade chip and key, tier heading,
+ * section card, and close (the `.op` classes), and adds only what is its own
+ * (the `.rd` classes). The gist table is drawn from the tiers, so a tier
+ * added later (Conversion, once the analytics access lands) is one more entry
+ * in `tiers` and appears in the table and the body alike; until then `note`
+ * says so under the table. Every prop but a finding's body and the sign off
+ * person's `role` is plain data, and both are equally happy with a string, so
+ * a routine can write a read as JSON.
  */
 
 /** A link inside running text: the words the reader clicks and where they go. */
@@ -50,65 +48,36 @@ export type ReadLink = ArtifactLink;
 /** A paragraph: a plain string, or runs of text and links in order. */
 export type ReadParagraph = ArtifactParagraph;
 
-/** A tool we looked through: its name, where it opens (in a new tab), and a line on what we read there. */
-export interface ReadTool {
-	label: string;
-	href?: string;
-	/** One short line, e.g. "Page indexing, the last 90 days". */
-	note?: string;
-}
-
-/** The 1.0.0 name for a tool; the same shape. */
-export type ReadSource = ReadTool;
-
-/** One row of a section's facts: a short label and its value, e.g. "Pages on Google" and "9 of 9". */
-export interface ReadFact {
-	label: string;
-	value: ReadParagraph;
-}
-
-/** A list of examples under its own short heading; each item a paragraph that can carry links. */
-export interface ReadExamples {
-	title?: string;
-	items: ReadParagraph[];
-}
-
 /** One row of today and after: what a thing is now, and what it becomes. */
 export interface ReadChange {
 	now: ReadParagraph;
 	after: ReadParagraph;
 }
 
-/** One section of a tier: a question, read top to bottom in five beats. */
-export interface ReadSection {
-	/** The anchor the gist table links to, e.g. "technical-seo". */
-	id: string;
-	/** The section's trade name, e.g. "Technical SEO": the section's heading, and the gist table's Section column. */
-	name: string;
-	/** The question the section answers, in the owner's words, e.g. "Can Google read the site?", set under the heading. */
-	question: string;
-	/** The baseline's grade. Omit for a section not yet graded; the table shows a quiet dash. */
-	grade?: WriteupGrade;
+/**
+ * One section of a tier: the writeup's section card (its `title`, `href`,
+ * `oneLiner`, `grade`, `why`, `blocks`, and `sources`), plus the read's own:
+ * the gist table's line, today and after, and what we recommend.
+ */
+export interface ReadSection extends Omit<WriteupTopic, "kind" | "why"> {
 	/** The one line in the gist table. */
 	gist: ReadParagraph;
-	/** Where we looked: the tools the readings came from, linked, at the top of the section. */
-	tools?: ReadTool[];
-	/** The 1.0.0 name for `tools`, still read and rendered in the same place; `tools` wins when both are set. */
-	sources?: ReadTool[];
-	/** What it showed: one or two short paragraphs. */
-	found: ReadParagraph[];
-	/** What it showed, as a compact two column table of facts under the paragraphs. */
-	facts?: ReadFact[];
-	/** What it showed, as lists of examples, each under its own short heading. */
-	examples?: ReadExamples[];
-	/** Proof pictures, each over its caption, e.g. a search result capture per market. */
-	shots?: WriteupShot[];
-	/** Why, in one sentence, set apart. */
-	why: ReadParagraph;
-	/** Today and after: what each thing is, and what it becomes. */
+	/** The summary of what we saw, in one or two sentences: the why line. A paragraph, so a read written as JSON can carry links in it. */
+	why?: ReactNode | ReadParagraph;
+	/** Today and after: what each thing is, and what it becomes. Set after the blocks. */
 	changes?: ReadChange[];
-	/** What we recommend, as a checklist. */
-	recommend?: ReadParagraph[];
+	/** The recommendations, after today and after: a paragraph each, or one with its own icon and tone. */
+	recommend?: (ReadParagraph | ReadRecommendation)[];
+}
+
+/** One recommendation with a bullet of its own: the icon it leads with, and the tone it reads in. Both fall back to the list's. */
+export interface ReadRecommendation {
+	/** The recommendation: a paragraph, or a node when it carries a table or a list. */
+	body: ReactNode | ReadParagraph;
+	/** The icon as the bullet, e.g. a lucide icon at size 16; the accent's check when left out. */
+	icon?: ReactNode;
+	/** How the item reads; the accent when left out. */
+	tone?: Tone;
 }
 
 /** A tier, e.g. Health: its heading, the question it answers, and its sections in order. */
@@ -117,7 +86,9 @@ export interface ReadTier {
 	id?: string;
 	/** The tier's name, e.g. "Health". */
 	title: string;
-	/** The question the tier answers, in the owner's words. */
+	/** Where the name is defined, e.g. the practice's glossary; the heading links there when set. */
+	href?: string;
+	/** The questions the tier answers, in the owner's words. */
 	lead?: string;
 	sections: ReadSection[];
 }
@@ -128,9 +99,11 @@ export interface ReadStep {
 	body?: ReadParagraph;
 	/** Whose step it is when it is not the practice's, e.g. "Yours" or a name; set beside the title. */
 	who?: string;
+	/** The cards the step draws on, linked in a line beneath it, e.g. { text: "Local SEO", href: "#local-seo" }. */
+	cards?: ReadLink[];
 }
 
-/** The plan: the steps in order, numbered. */
+/** The plan: the steps in order, numbered, between the gist and the cards, so the whole program reads before any one card's detail. */
 export interface ReadPlan {
 	/** The anchor a header stop points at, e.g. "plan". */
 	id?: string;
@@ -153,42 +126,36 @@ export interface ReadClose {
 export interface ReadLabels {
 	/** The dateline's words before the business, e.g. "Prepared for". */
 	preparedFor: string;
-	/** The gist table's first column. */
-	section: string;
-	/** The gist table's second column. */
-	grade: string;
-	/** The gist table's third column. */
+	/** What a screen reader calls the gist card when it has no title. */
 	gist: string;
+	/** What a screen reader hears before a letter, on the gist card and each section's card. */
+	grade: string;
 	/** What a screen reader hears for a section with no grade. */
 	notGraded: string;
-	/** The beat at the top of a section: the tools we looked through. */
-	tools: string;
-	/** The beat that says what the tools showed. */
-	found: string;
-	/** The one sentence beat. */
-	why: string;
 	/** The today and after table's first column. */
 	now: string;
 	/** The today and after table's second column. */
 	after: string;
 	/** The checklist beat at the foot of a section. */
 	recommend: string;
+	/** The word before the grade on a section's why line. */
+	why: string;
+	/** The label over a section's tools when it names none. */
+	sources: string;
 	/** The plan's heading when it names none. */
 	plan: string;
 }
 
 export const readLabels: ReadLabels = {
 	preparedFor: "Prepared for",
-	section: "Section",
-	grade: "Grade",
 	gist: "The Gist",
+	grade: "Grade",
 	notGraded: "Not graded yet",
-	tools: "Where We Looked",
-	found: "What It Showed",
-	why: "Why",
 	now: "Today",
 	after: "After",
-	recommend: "What We Recommend",
+	recommend: "Recommendations",
+	why: "Why",
+	sources: "See it yourself",
 	plan: "The Plan",
 };
 
@@ -200,9 +167,13 @@ export interface ReadProps {
 	date: string;
 	/** Two or three sentences under the title. */
 	lede: ReadParagraph;
-	/** The heading over the gist table, e.g. "At a Glance". */
+	/** The heading over the scorecard, e.g. "The Scorecard". */
 	gistTitle?: string;
-	/** A callout under the gist table, e.g. what the read leaves out and when it follows. */
+	/** The line under the scorecard's heading, e.g. what it is. */
+	gistLead?: string;
+	/** The anchor a header stop points at for the scorecard, e.g. "scorecard". */
+	gistId?: string;
+	/** A callout over the scorecard, under its heading, e.g. what the read leaves out and when it follows. */
 	note?: ReadParagraph;
 	/** The key: what each letter means, in a few words each. */
 	gradeKey?: Array<{ grade: WriteupGrade; label: string }>;
@@ -218,51 +189,29 @@ function filled(paragraph: ReadParagraph | undefined | null): paragraph is ReadP
 	return paragraph !== undefined && paragraph !== null && !isEmpty(paragraph);
 }
 
-function Tools({ tools, label }: { tools: ReadTool[]; label: string }) {
+/** A string or runs of text and links, the shape JSON content arrives in; a node of elements is anything else. */
+function isRuns(value: unknown): value is ReadParagraph {
+	if (typeof value === "string") return true;
 	return (
-		<div className="rd-beat rd-tools">
-			<h4>{label}</h4>
-			<ul className="rd-tools-list">
-				{tools.map((tool, i) => (
-					// biome-ignore lint/suspicious/noArrayIndexKey: tools are static content in a fixed order, and a label may repeat
-					<li key={i}>
-						{tool.href ? (
-							<a href={tool.href} {...newTabProps(tool.href, true)}>
-								{tool.label}
-								<ArrowUpRight size={13} aria-hidden="true" />
-							</a>
-						) : (
-							<span className="rd-tool-name">{tool.label}</span>
-						)}
-						{tool.note && <span className="rd-tool-note">{tool.note}</span>}
-					</li>
-				))}
-			</ul>
-		</div>
+		Array.isArray(value) &&
+		value.every(
+			(run) =>
+				typeof run === "string" ||
+				(typeof run === "object" && run !== null && "text" in run && "href" in run),
+		)
 	);
 }
 
-function Facts({ facts }: { facts: ReadFact[] }) {
-	return (
-		<table className="rd-facts">
-			<tbody>
-				{facts.map((fact, i) => (
-					// biome-ignore lint/suspicious/noArrayIndexKey: facts are static content in a fixed order
-					<tr key={i}>
-						<th scope="row">{fact.label}</th>
-						<td>
-							<Runs paragraph={fact.value} />
-						</td>
-					</tr>
-				))}
-			</tbody>
-		</table>
-	);
+/** Content as a node: runs are rendered, a blank is dropped, and a node passes through. */
+function asNode(value: ReactNode | ReadParagraph | undefined | null): ReactNode {
+	if (value === undefined || value === null) return undefined;
+	if (isRuns(value)) return filled(value) ? <Runs paragraph={value} /> : undefined;
+	return value;
 }
 
 function Changes({ changes, labels }: { changes: ReadChange[]; labels: ReadLabels }) {
 	return (
-		<div className="rd-beat rd-changes">
+		<div className="op-block rd-beat rd-changes">
 			<table className="rd-changes-table">
 				<thead>
 					<tr>
@@ -292,180 +241,117 @@ function Changes({ changes, labels }: { changes: ReadChange[]; labels: ReadLabel
 	);
 }
 
-function Recommend({ items, label }: { items: ReadParagraph[]; label: string }) {
+/** A recommendation as its full shape, whichever way the content wrote it. */
+function asRecommendation(item: ReadParagraph | ReadRecommendation): ReadRecommendation {
+	return isRuns(item) ? { body: item } : item;
+}
+
+function Recommend({ items, label }: { items: ReadRecommendation[]; label: string }) {
 	return (
-		<div className="rd-beat rd-recommend">
+		<div className="op-block rd-beat rd-recommend">
 			<h4>{label}</h4>
-			<ul className="rd-checks">
-				{items.map((item, i) => (
-					// biome-ignore lint/suspicious/noArrayIndexKey: recommendations are static content in a fixed order
-					<li key={i}>
-						<Check size={16} strokeWidth={2.5} aria-hidden="true" />
-						<span>
-							<Runs paragraph={item} />
-						</span>
-					</li>
-				))}
-			</ul>
+			<IconList
+				className="rd-checks"
+				icon={<Check size={16} strokeWidth={2.5} />}
+				items={items.map((item) => ({
+					icon: item.icon,
+					tone: item.tone,
+					body: asNode(item.body),
+				}))}
+			/>
 		</div>
 	);
 }
 
 function Gist({
 	tiers,
+	id,
 	title,
+	lead,
+	note,
 	gradeKey,
 	labels,
 }: {
 	tiers: ReadTier[];
+	id?: string;
 	title?: string;
+	lead?: string;
+	note?: ReadProps["note"];
 	gradeKey?: ReadProps["gradeKey"];
 	labels: ReadLabels;
 }) {
-	const key = gradeKey ?? [];
 	return (
-		<section className="rd-gist" aria-label={title ? undefined : labels.gist}>
-			{(title || key.length > 0) && (
-				<div className="op-ov-head">
-					{title && <h2 className="op-ov-title">{title}</h2>}
-					{key.length > 0 && (
-						<ul className="op-legend">
-							{key.map((entry) => (
-								<li key={entry.grade}>
-									<GradeChip grade={entry.grade} />
-									<span>{entry.label}</span>
-								</li>
-							))}
-						</ul>
-					)}
+		<>
+			{title && (
+				<div className="op-part" id={id}>
+					<h2>{title}</h2>
+					{lead && <p>{lead}</p>}
 				</div>
 			)}
-			<div className="rd-gist-card">
-				<table className="rd-gist-table">
-					<thead>
-						<tr>
-							<th scope="col" className="rd-gist-section">
-								{labels.section}
-							</th>
-							<th scope="col" className="rd-gist-grade">
-								{labels.grade}
-							</th>
-							<th scope="col" className="rd-gist-read">
-								{labels.gist}
-							</th>
-						</tr>
-					</thead>
-					{tiers.map((tier) => (
-						<tbody key={tier.title}>
-							<tr className="rd-gist-tier">
-								<th scope="rowgroup" colSpan={3}>
-									{tier.title}
-								</th>
-							</tr>
-							{tier.sections.map((section) => (
-								<tr key={section.id}>
-									<th scope="row" className="rd-gist-section">
-										<a href={`#${section.id}`}>{section.name}</a>
-									</th>
-									<td className="rd-gist-grade">
-										{section.grade ? (
-											<>
-												<span className="op-sr-only">{gradeLabel[section.grade]}</span>
-												<span aria-hidden="true">
-													<GradeChip grade={section.grade} />
-												</span>
-											</>
-										) : (
-											<>
-												<span className="op-sr-only">{labels.notGraded}</span>
-												<span className="op-dash" aria-hidden="true" />
-											</>
-										)}
-									</td>
-									<td className="rd-gist-read">
-										<Runs paragraph={section.gist} />
-									</td>
-								</tr>
-							))}
-						</tbody>
-					))}
-				</table>
-			</div>
-		</section>
+			{filled(note) && (
+				<div className="rd-note" role="note">
+					<Paragraph paragraph={note} />
+				</div>
+			)}
+			<ReportCard
+				className="rd-gist"
+				label={title ?? labels.gist}
+				legend={gradeKey}
+				legendAt="foot"
+				labels={{ grade: labels.grade, notGraded: labels.notGraded }}
+				groups={tiers.map((tier) => ({
+					title: tier.title,
+					rows: tier.sections.map((section) => ({
+						name: section.title,
+						href: `#${section.id}`,
+						grade: section.grade,
+						line: <Runs paragraph={section.gist} />,
+					})),
+				}))}
+			/>
+		</>
 	);
 }
 
+/** A section: the writeup's card, with today and after and the checklist handed in after its blocks. */
 function Section({ section, labels }: { section: ReadSection; labels: ReadLabels }) {
-	const tools = (section.tools ?? section.sources ?? []).filter((tool) => tool?.label?.trim());
-	const found = (section.found ?? []).filter(filled);
-	const facts = (section.facts ?? []).filter((fact) => filled(fact?.value));
-	const examples = (section.examples ?? [])
-		.map((list) => ({ title: list?.title, items: (list?.items ?? []).filter(filled) }))
-		.filter((list) => list.items.length > 0);
-	const shots = section.shots ?? [];
 	const changes = (section.changes ?? []).filter(
 		(change) => filled(change?.now) || filled(change?.after),
 	);
-	const recommend = (section.recommend ?? []).filter(filled);
-	const showed = found.length + facts.length + examples.length + shots.length > 0;
-	return (
-		<section className="op-topic rd-section" id={section.id}>
-			<header className="op-topic-head">
-				<div>
-					<h3>{section.name}</h3>
-					<p className="rd-question">{section.question}</p>
-				</div>
-				{section.grade && (
-					<>
-						<span className="op-sr-only">{`${labels.grade} ${gradeLabel[section.grade]}`}</span>
-						<span className="rd-grade" aria-hidden="true">
-							<GradeChip grade={section.grade} />
-						</span>
-					</>
-				)}
-			</header>
-			{tools.length > 0 && <Tools tools={tools} label={labels.tools} />}
-			{showed && (
-				<div className="rd-beat rd-found">
-					<h4>{labels.found}</h4>
-					{found.map((paragraph, i) => (
-						// biome-ignore lint/suspicious/noArrayIndexKey: paragraphs are static content in a fixed order
-						<Paragraph paragraph={paragraph} key={i} />
-					))}
-					{facts.length > 0 && <Facts facts={facts} />}
-					{examples.map((list, i) => (
-						// biome-ignore lint/suspicious/noArrayIndexKey: lists are static content in a fixed order, and a title may repeat
-						<div className="rd-examples-block" key={i}>
-							{list.title && <h5>{list.title}</h5>}
-							<ul className="rd-examples">
-								{list.items.map((example, j) => (
-									// biome-ignore lint/suspicious/noArrayIndexKey: examples are static content in a fixed order
-									<li key={j}>
-										<Runs paragraph={example} />
-									</li>
-								))}
-							</ul>
-						</div>
-					))}
-					{shots.length > 0 && (
-						<div className="rd-shots" data-count={Math.min(shots.length, 3)}>
-							{shots.map((shot) => (
-								<Shot shot={shot} key={shot.src} />
-							))}
-						</div>
-					)}
-				</div>
-			)}
-			{filled(section.why) && (
-				<div className="rd-beat rd-why">
-					<h4>{labels.why}</h4>
-					<Paragraph paragraph={section.why} />
-				</div>
-			)}
-			{changes.length > 0 && <Changes changes={changes} labels={labels} />}
-			{recommend.length > 0 && <Recommend items={recommend} label={labels.recommend} />}
-		</section>
+	const recommend = (section.recommend ?? [])
+		.filter((item) => item !== undefined && item !== null)
+		.map(asRecommendation)
+		.filter((item) => (isRuns(item.body) ? filled(item.body) : item.body != null));
+	const blocks = (section.blocks ?? []).map((block) =>
+		block.kind === "findings"
+			? {
+					...block,
+					items: block.items
+						.filter((item) => item?.lead?.trim())
+						.map((item) => ({ ...item, body: asNode(item.body) })),
+				}
+			: block,
 	);
+	const sources = (section.sources ?? []).filter((source) => source?.label?.trim());
+	const topic: WriteupTopic = {
+		kind: "topic",
+		...section,
+		why: asNode(section.why),
+		whyLabel: section.whyLabel ?? labels.why,
+		gradeWord: section.gradeWord ?? labels.grade,
+		blocks,
+		sources,
+		sourcesLabel: section.sourcesLabel ?? labels.sources,
+		noShot: section.noShot ?? true,
+	};
+	const extra =
+		changes.length + recommend.length > 0 ? (
+			<>
+				{changes.length > 0 && <Changes changes={changes} labels={labels} />}
+				{recommend.length > 0 && <Recommend items={recommend} label={labels.recommend} />}
+			</>
+		) : undefined;
+	return <Topic topic={topic} extra={extra} />;
 }
 
 function Plan({ plan, labels }: { plan: ReadPlan; labels: ReadLabels }) {
@@ -476,21 +362,24 @@ function Plan({ plan, labels }: { plan: ReadPlan; labels: ReadLabels }) {
 			<ol className="rd-steps">
 				{plan.steps.map((step) => (
 					<li className="rd-step" key={step.title}>
-						<p>
-							<b className="rd-step-title">{step.title}</b>
-							{step.who && (
-								<>
-									{" "}
-									<span className="rd-step-who">{step.who}</span>
-								</>
-							)}
-							{filled(step.body) && (
-								<>
-									{" "}
-									<Runs paragraph={step.body} />
-								</>
+						<div className="rd-step-body">
+							<p className="rd-step-head">
+								<b className="rd-step-title">{step.title}</b>
+								{step.who && <span className="rd-step-who">{step.who}</span>}
+							</p>
+							{filled(step.body) && <Paragraph paragraph={step.body} />}
+							{(step.cards ?? []).some((card) => card?.href) && (
+								<p className="rd-step-cards">
+									{(step.cards ?? [])
+										.filter((card) => card?.href)
+										.map((card, i) => (
+											<a href={card.href} key={`${i}-${card.href}`}>
+												{card.text}
+											</a>
+										))}
+								</p>
 							)}
-						</p>
+						</div>
 					</li>
 				))}
 			</ol>
@@ -504,6 +393,8 @@ export function Read({
 	date,
 	lede,
 	gistTitle,
+	gistLead,
+	gistId,
 	note,
 	gradeKey,
 	tiers,
@@ -528,19 +419,30 @@ export function Read({
 					{filled(lede) && <Paragraph paragraph={lede} className="op-intro rd-lede" />}
 				</header>
 				{shownTiers.length > 0 && (
-					<>
-						<Gist tiers={shownTiers} title={gistTitle} gradeKey={gradeKey} labels={labels} />
-						{filled(note) && (
-							<div className="rd-note" role="note">
-								<Paragraph paragraph={note} />
-							</div>
-						)}
-					</>
+					<Gist
+						tiers={shownTiers}
+						id={gistId}
+						title={gistTitle}
+						lead={gistLead}
+						note={note}
+						gradeKey={gradeKey}
+						labels={labels}
+					/>
 				)}
+				{plan.steps.length > 0 && <Plan plan={plan} labels={labels} />}
 				{shownTiers.map((tier) => (
 					<div className="rd-tier" key={tier.title}>
 						<div className="op-part" id={tier.id}>
-							<h2>{tier.title}</h2>
+							<h2>
+								{tier.href ? (
+									<a href={tier.href} {...newTabProps(tier.href, true)}>
+										{tier.title}
+										<ArrowUpRight size={14} aria-hidden="true" />
+									</a>
+								) : (
+									tier.title
+								)}
+							</h2>
 							{tier.lead && <p>{tier.lead}</p>}
 						</div>
 						{tier.sections.map((section) => (
@@ -548,7 +450,6 @@ export function Read({
 						))}
 					</div>
 				))}
-				{plan.steps.length > 0 && <Plan plan={plan} labels={labels} />}
 				{filled(close.line) && <Paragraph paragraph={close.line} className="rd-closing" />}
 				{close.signOff && close.person && (
 					<footer className="op-close rd-close">