From 50e72b47fd98031cd939f24c2f5bdec070fd1ab6 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Wed, 30 Sep 2026 21:21:53 +0100
Subject: [PATCH 01/10] Restyle the decision card to the approved design

Drop the Decision label row for a mark beside the question, lettered option rows
with a trailing check, an always-last Add an option row, Discard/Save footer
with in-place confirm, a stepper in place of question tabs, and a shared
callout for a failed save. Adds DecisionIcon.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 apps/web/src/icon-assets.test.ts              |   5 +-
 apps/web/src/theme.css                        | 307 ++++++++++-
 apps/web/src/tokens.test.ts                   |  36 +-
 e2e/responsive-decisions.e2e.ts               |  10 +-
 e2e/sidecar.e2e.ts                            |  81 +--
 .../editor/src/widgets/questionnaire.test.tsx |  32 +-
 packages/icons/src/index.ts                   |   1 +
 packages/icons/src/line.tsx                   |  11 +
 .../question/src/react/question-view.test.ts  |  78 +++
 packages/question/src/react/question-view.tsx | 487 +++++++++---------
 .../exceptions/dynamic-packages.json          |  20 +-
 11 files changed, 729 insertions(+), 339 deletions(-)

diff --git a/apps/web/src/icon-assets.test.ts b/apps/web/src/icon-assets.test.ts
index ec91b53d..11226a79 100644
--- a/apps/web/src/icon-assets.test.ts
+++ b/apps/web/src/icon-assets.test.ts
@@ -77,7 +77,10 @@ test("interface icons default to fourteen pixels", () => {
 		for (let match of readFileSync(file, "utf8").matchAll(explicit)) {
 			let size = Number(match[1]);
 			let emptyStateException = file.endsWith("design-audit/surfaces.tsx") && size === 24;
-			if (size !== 14 && !emptyStateException) offenders.push(`${file}: ${match[0]}`);
+			let stepperCaret = file.endsWith("question/src/react/question-view.tsx") && size === 16;
+			if (size !== 14 && !emptyStateException && !stepperCaret) {
+				offenders.push(`${file}: ${match[0]}`);
+			}
 		}
 	}
 	expect(offenders).toEqual([]);
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index 3c4ec5ae..7d7ad924 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -616,7 +616,6 @@ body {
 :root[data-plan-coarse-pointer] .repository-picker-search,
 :root[data-plan-coarse-pointer] .channel-create-input,
 :root[data-plan-coarse-pointer] [data-hosted] .btn,
-:root[data-plan-coarse-pointer] .question-tab,
 :root[data-plan-coarse-pointer] .question-choice-row,
 :root[data-plan-coarse-pointer] .question-actions button,
 :root[data-plan-coarse-pointer] :where(button, [role="button"])[data-press="wide"] {
@@ -632,6 +631,312 @@ body {
 	scroll-margin-block-end: calc(var(--keyboard-inset, 0px) + 1rem);
 }
 
+/* The decision card: a question, lettered options, and a quiet footer. */
+.question-card {
+	padding: 1rem 0.5rem 0.75rem;
+}
+
+/* Coloured icon holders: the global icon colour would otherwise win. */
+:is(.question-mark, .question-check) [data-nucleo-icon],
+.question-callout .plan-research-badge [data-nucleo-icon] {
+	color: inherit;
+}
+
+.question-head {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.625rem;
+	padding-inline: 0.5rem;
+}
+
+.question-mark {
+	display: grid;
+	flex: none;
+	place-items: center;
+	inline-size: 1.5rem;
+	block-size: 1.5rem;
+	border-radius: var(--radius-full);
+	background: var(--color-success-wash);
+	color: var(--color-success);
+}
+
+.question-head-text {
+	flex: 1;
+	min-width: 0;
+}
+
+.question-title {
+	/* Centre the first line on the 1.5rem mark, then lift 2px optically. */
+	margin: calc((1.5rem - 1lh) / 2 - 0.125rem) 0 0;
+	font-size: var(--text-base);
+	line-height: var(--text-lg--line-height);
+	font-weight: 600;
+	color: var(--color-text-primary);
+	overflow-wrap: break-word;
+	text-wrap: pretty;
+}
+
+.question-title-link {
+	font: inherit;
+}
+
+.question-hint {
+	margin: 0.125rem 0 0;
+	font-size: var(--text-xs);
+	line-height: var(--text-xs--line-height);
+	color: var(--color-text-tertiary);
+}
+
+.question-options {
+	display: grid;
+	gap: 0.125rem;
+	min-width: 0;
+	margin: 0.75rem 0 0;
+	padding: 0;
+	border: 0;
+}
+
+.question-option {
+	position: relative;
+	display: flex;
+	align-items: flex-start;
+	gap: 0.625rem;
+	padding: 0.375rem 0.75rem 0.375rem 0.5rem;
+	border-radius: var(--radius-md);
+	font-size: var(--text-sm);
+	line-height: var(--text-sm--line-height);
+	transition: background-color var(--duration-fast) var(--ease-out);
+}
+
+/* The native control stays focusable but unseen; its label row is the target. */
+.question-input {
+	appearance: none;
+	position: absolute;
+	inset-block-start: 0;
+	inset-inline-start: 0;
+	inline-size: 1px;
+	block-size: 1px;
+	margin: 0;
+	opacity: 0;
+}
+
+label.question-option:has(.question-input:not(:disabled)) {
+	cursor: pointer;
+}
+
+.question-option:has(.question-input:focus-visible) {
+	outline: var(--focus-ring-width) solid var(--focus-ring-color);
+	outline-offset: var(--focus-ring-offset);
+}
+
+.question-option:has(.question-input:not(:disabled)):hover {
+	background: var(--color-hover);
+}
+
+.question-option:has(.question-input:checked),
+.question-option:has(.question-input:checked:not(:disabled)):hover {
+	background: var(--color-brand-wash);
+}
+
+/* A one-line slot (inherits the label's line height) holding a small tile. */
+.question-key {
+	display: flex;
+	flex: none;
+	align-items: center;
+	block-size: 1lh;
+}
+
+/* Same 1.5rem as the header mark, so option text shares the title's left edge. */
+.question-key > span {
+	display: grid;
+	place-items: center;
+	inline-size: 1.5rem;
+	block-size: 1.5rem;
+	border-radius: var(--radius-sm);
+	background: var(--color-gray-150);
+	font-size: var(--text-xs);
+	line-height: 1;
+	font-weight: 500;
+	color: var(--color-text-secondary);
+	transition:
+		background-color var(--duration-fast) var(--ease-out),
+		color var(--duration-fast) var(--ease-out);
+}
+
+.question-option:has(.question-input:checked) .question-key > span {
+	background: var(--color-brand);
+	color: var(--color-white);
+}
+
+/* With a description below, the tile sits 4px under the label's centre (optical). */
+.question-option:has(.question-desc) .question-key > span {
+	translate: 0 0.25rem;
+}
+
+.question-text {
+	display: grid;
+	flex: 1;
+	min-width: 0;
+}
+
+.question-label {
+	font-weight: 500;
+	color: var(--color-text-primary);
+}
+
+.question-desc {
+	color: var(--color-text-secondary);
+}
+
+.question-check {
+	flex: none;
+	display: grid;
+	block-size: 1lh;
+	place-items: center;
+	color: var(--color-brand);
+	opacity: 0;
+	transition: opacity var(--duration-fast) var(--ease-out);
+}
+
+.question-option:has(.question-input:checked) .question-check {
+	opacity: 1;
+}
+
+.question-add,
+.question-add .question-key {
+	color: var(--color-text-tertiary);
+}
+
+.question-add .question-key > span {
+	background: var(--color-inset);
+}
+
+:is(.question-add, .question-adding) {
+	align-items: center;
+	padding-block: 0.5rem;
+}
+
+.question-add:hover .question-text,
+.question-add:hover .question-key {
+	color: var(--color-text-secondary);
+}
+
+.question-adding {
+	outline: var(--edge-width) solid var(--color-control-edge);
+	outline-offset: calc(-1 * var(--edge-width));
+}
+
+.question-adding:focus-within {
+	outline-color: var(--color-brand);
+}
+
+.question-field {
+	flex: 1;
+	min-width: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	font: inherit;
+	color: var(--color-text-primary);
+	outline: none;
+	resize: none;
+	field-sizing: content;
+}
+
+.question-field:focus-visible {
+	outline: none;
+}
+
+.question-field::placeholder {
+	color: var(--color-text-tertiary);
+}
+
+.question-card[data-saving] .question-options {
+	opacity: 0.6;
+}
+
+/* Matches the research card: danger badge beside pale-red callout text. */
+.question-callout {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.5rem;
+	margin: 0.5rem 0.5rem 0;
+	padding: 0.5rem 0.625rem 0.5rem 0.5rem;
+}
+
+.question-callout p {
+	display: grid;
+}
+
+.question-callout strong {
+	font-weight: 500;
+}
+
+.question-actions {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 0.375rem;
+	margin-block-start: 0.75rem;
+	padding-inline: 0.5rem;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.question-actions > * {
+		animation: question-fade var(--duration-fast) var(--ease-out);
+	}
+}
+
+@keyframes question-fade {
+	from {
+		opacity: 0;
+	}
+}
+
+/* Discard confirm: the footer swaps in place and fades in. */
+.question-confirm {
+	margin-inline-end: auto;
+	font-size: var(--text-sm);
+	font-weight: 500;
+	color: var(--color-text-primary);
+}
+
+/* Footer stepper, left: ‹ question name n/m ›, 28px carets and --text-sm. */
+.question-stepper {
+	display: inline-flex;
+	min-width: 0;
+	align-items: center;
+	gap: 0.125rem;
+	margin-inline: -0.375rem auto;
+}
+
+/* 28px button, 16px chevron: drop btn-icon's padding so the icon isn't squeezed. */
+.question-caret {
+	padding: 0;
+}
+
+.question-caret[data-flip] [data-nucleo-icon] {
+	rotate: 180deg;
+}
+
+.question-count {
+	display: inline-flex;
+	min-width: 0;
+	gap: 0.375rem;
+	padding-inline: 0.125rem;
+	font-size: var(--text-sm);
+	color: var(--color-text-tertiary);
+	font-variant-numeric: tabular-nums;
+}
+
+.question-count strong {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-weight: 500;
+	color: var(--color-text-primary);
+}
+
 /*
  * What focus looks like, once, for everything that can take it. An outline
  * rather than a ring: it follows `border-radius` and takes no space in the
diff --git a/apps/web/src/tokens.test.ts b/apps/web/src/tokens.test.ts
index 79d52c5b..3a03bdb1 100644
--- a/apps/web/src/tokens.test.ts
+++ b/apps/web/src/tokens.test.ts
@@ -476,7 +476,8 @@ type StandardAction = {
 	action: string;
 	marker: string;
 	size: "btn-sm" | "btn-md" | "btn-icon";
-	tiers: readonly ("btn-primary" | "btn-secondary" | "btn-ghost" | "btn-destructive")[];
+	tiers:
+		readonly ("btn-primary" | "btn-secondary" | "btn-outline" | "btn-ghost" | "btn-destructive")[];
 };
 
 function classLists(button: string): string[][] {
@@ -515,7 +516,7 @@ function standardButtonOffenders(source: string, file: string, action: StandardA
 	for (let list of classes) {
 		let sizes = list.filter(name => /^(btn-sm|btn-md|btn-icon)$/.test(name));
 		let currentTiers = list.filter(name =>
-			/^(btn-primary|btn-secondary|btn-ghost|btn-destructive)$/.test(name)
+			/^(btn-primary|btn-secondary|btn-outline|btn-ghost|btn-destructive)$/.test(name)
 		);
 		let legacy = list.filter(name => /^(bg|px|py)-/.test(name));
 		tiers.push(...currentTiers);
@@ -595,27 +596,6 @@ describe("migration", () => {
 				tag: "textarea",
 				utility: "field",
 			},
-			{
-				file: "packages/question/src/react/question-view.tsx",
-				marker: "Type another answer",
-				name: "custom questionnaire answer",
-				tag: "textarea",
-				utility: "field",
-			},
-			{
-				file: "packages/question/src/react/question-view.tsx",
-				marker: "checked={!custom && selected}",
-				name: "questionnaire option choice",
-				tag: "input",
-				utility: "choice-control",
-			},
-			{
-				file: "packages/question/src/react/question-view.tsx",
-				marker: "checked={active}",
-				name: "custom questionnaire choice",
-				tag: "input",
-				utility: "choice-control",
-			},
 		];
 		let offenders = controls.flatMap(control =>
 			controlOffenders(
@@ -666,7 +646,7 @@ describe("migration", () => {
 		let previousGuardWouldAccept = classes.includes("btn")
 			&& classes.filter(name => /^(btn-sm|btn-md|btn-icon)$/.test(name)).length === 1
 			&& classes.filter(name =>
-					/^(btn-primary|btn-secondary|btn-ghost|btn-destructive)$/.test(name)
+					/^(btn-primary|btn-secondary|btn-outline|btn-ghost|btn-destructive)$/.test(name)
 				).length === 1;
 
 		expect(previousGuardWouldAccept).toBe(true);
@@ -784,7 +764,7 @@ describe("migration", () => {
 				action: "Keep it",
 				marker: "setConfirming(false)",
 				size: "btn-sm",
-				tiers: ["btn-secondary"],
+				tiers: ["btn-outline"],
 			}],
 			["packages/question/src/react/question-view.tsx", {
 				action: "cancel confirmation",
@@ -793,13 +773,13 @@ describe("migration", () => {
 				tiers: ["btn-destructive"],
 			}],
 			["packages/question/src/react/question-view.tsx", {
-				action: "Cancel",
+				action: "Discard",
 				marker: "setConfirming(true)",
 				size: "btn-sm",
-				tiers: ["btn-secondary"],
+				tiers: ["btn-outline"],
 			}],
 			["packages/question/src/react/question-view.tsx", {
-				action: "Submit",
+				action: "Save",
 				marker: "onClick={onSubmit}",
 				size: "btn-sm",
 				tiers: ["btn-primary"],
diff --git a/e2e/responsive-decisions.e2e.ts b/e2e/responsive-decisions.e2e.ts
index 01620d02..fe305aa2 100644
--- a/e2e/responsive-decisions.e2e.ts
+++ b/e2e/responsive-decisions.e2e.ts
@@ -89,7 +89,7 @@ for (let viewport of [{ width: 320, height: 568 }, { width: 390, height: 844 }])
 			await page.goto(`/channels/${room}`);
 			let card = questionnaire(page).filter({ hasText: LONG_QUESTIONS[0]!.header });
 			await expect(card).toBeVisible();
-			await expect(card.getByRole("textbox", { name: /Custom answer for/ })).toHaveCount(0);
+			await expect(card.getByRole("textbox", { name: "Add an option" })).toHaveCount(0);
 			await expectNoHorizontalOverflow(page);
 
 			let firstChoice = card.getByRole("radio", { name: "Use the compact layout" });
@@ -108,8 +108,8 @@ for (let viewport of [{ width: 320, height: 568 }, { width: 390, height: 844 }])
 			await expect(firstChoice).toBeChecked();
 
 			let actions = [
-				card.getByRole("button", { name: "Cancel" }),
-				card.getByRole("button", { name: "Save answer" }),
+				card.getByRole("button", { name: "Discard", exact: true }),
+				card.getByRole("button", { name: "Save", exact: true }),
 			];
 			for (let action of actions) {
 				await action.scrollIntoViewIfNeeded();
@@ -132,10 +132,10 @@ for (let viewport of [{ width: 320, height: 568 }, { width: 390, height: 844 }])
 					.getByRole("button", { name: /Decisions, 8 unanswered/ }),
 			).toBeVisible();
 
-			let customChoice = card.getByRole("radio", { name: "Write a custom answer" });
+			let customChoice = card.getByRole("radio", { name: "Add an option" });
 			await customChoice.focus();
 			await page.keyboard.press("Space");
-			let custom = card.getByRole("textbox", { name: /Custom answer for/ });
+			let custom = card.getByRole("textbox", { name: "Add an option" });
 			await expect(custom).toBeFocused();
 			await setVisualViewport(page, { event: "resize", height: 360 });
 			await expect.poll(() =>
diff --git a/e2e/sidecar.e2e.ts b/e2e/sidecar.e2e.ts
index b82c5b3d..4cb55b98 100644
--- a/e2e/sidecar.e2e.ts
+++ b/e2e/sidecar.e2e.ts
@@ -110,9 +110,11 @@ test("question step swaps overlap only for pointer input", async ({ join, seed }
 	let outgoing = stack.locator(
 		':scope > [data-content-swap-state="outgoing"]:not([hidden])',
 	);
-	let scope = card.getByRole("tab", { name: "Scope" });
+	let next = card.getByRole("button", { name: "Next question" });
+	let previous = card.getByRole("button", { name: "Previous question" });
+	let count = card.getByText("2/2");
 
-	await scope.click();
+	await next.click();
 	await expect(visible).toHaveCount(2);
 	await expect(stack.locator(":scope > [data-content-swap-state]:not([hidden]):not([inert])"))
 		.toHaveCount(1);
@@ -140,14 +142,12 @@ test("question step swaps overlap only for pointer input", async ({ join, seed }
 	expect(accessibility).toEqual({ duplicateIds: [], invalidReferences: [] });
 	await expect(visible).toHaveCount(1);
 
-	await scope.focus();
-	await page.keyboard.press("ArrowLeft");
+	await expect(previous).toBeFocused();
+	await previous.click();
 	await expect(visible).toHaveCount(1);
 	await expect(outgoing).toHaveCount(0);
-	await expect(card.getByRole("tab", { name: "Rollout" })).toHaveAttribute(
-		"aria-selected",
-		"true",
-	);
+	await expect(card.getByText("1/2")).toBeVisible();
+	await expect(card.getByRole("heading", { name: "How should we deploy?" })).toBeVisible();
 
 	await page.emulateMedia({ reducedMotion: "reduce" });
 	await stack.evaluate(root => {
@@ -164,7 +164,7 @@ test("question step swaps overlap only for pointer input", async ({ join, seed }
 		Reflect.set(window, "__questionStepObserver", observer);
 		recordActiveCount();
 	});
-	await scope.click();
+	await next.click();
 	await expect(visible).toHaveCount(1);
 	let activeCounts = await page.evaluate(() => {
 		let observer = Reflect.get(window, "__questionStepObserver") as MutationObserver;
@@ -172,7 +172,8 @@ test("question step swaps overlap only for pointer input", async ({ join, seed }
 		return Reflect.get(window, "__questionStepActiveCounts") as number[];
 	});
 	expect(activeCounts).not.toContain(0);
-	await expect(scope).toHaveAttribute("aria-selected", "true");
+	await expect(count).toBeVisible();
+	await expect(card.getByRole("heading", { name: "What belongs in the first cut?" })).toBeVisible();
 });
 
 async function rewriteFirstBlock(page: import("@playwright/test").Page, value: string) {
@@ -262,7 +263,9 @@ test(
 
 		await decisions.click();
 		await expect(questionnaire(page)).toHaveCount(2);
-		await expect(questionnaire(page).getByRole("heading", { name: "Storage" })).toBeVisible();
+		await expect(
+			questionnaire(page).getByRole("heading", { name: "Where should room state live?" }),
+		).toBeVisible();
 		await expect(page.locator('[data-document-view="decisions"] [data-plan-sidecar-thread]'))
 			.toHaveCount(0);
 	},
@@ -278,8 +281,10 @@ test(
 			.toHaveAttribute("aria-pressed", "true");
 		let card = questionnaire(page);
 		await expect(card).toHaveCount(2);
-		await expect(card.getByRole("heading", { name: "Storage" })).toBeVisible();
-		await expect(card.getByRole("heading", { name: "Scope" })).toBeVisible();
+		await expect(card.getByRole("heading", { name: "Where should room state live?" }))
+			.toBeVisible();
+		await expect(card.getByRole("heading", { name: "Which of these belong in the first cut?" }))
+			.toBeVisible();
 		await expect(card.getByRole("tablist")).toHaveCount(0);
 	},
 );
@@ -547,21 +552,22 @@ test("decision cards save independently with progressive custom answers", async
 	await seed(PROSE);
 	let page = await join("ana");
 	await page.getByRole("button", { name: /^Decisions/ }).click();
-	let storage = questionnaire(page).filter({ has: page.getByRole("heading", { name: "Storage" }) });
-	let scope = questionnaire(page).filter({ has: page.getByRole("heading", { name: "Scope" }) });
-	let saveStorage = storage.getByRole("button", { name: "Save answer" });
+	let storage = questionnaire(page).filter({
+		has: page.getByRole("heading", { name: "Where should room state live?" }),
+	});
+	let scope = questionnaire(page).filter({
+		has: page.getByRole("heading", { name: "Which of these belong in the first cut?" }),
+	});
+	let saveStorage = storage.getByRole("button", { name: "Save", exact: true });
 
-	await expect(storage.getByRole("textbox", { name: /Custom answer for/ })).toHaveCount(0);
-	await expect(scope.getByRole("textbox", { name: /Custom answer for/ })).toHaveCount(0);
-	let check = saveStorage.locator('svg[data-plan-icon="check"]');
-	await expect(check).toHaveCount(1);
-	await expect(check).toHaveAttribute("aria-hidden", "true");
+	await expect(storage.getByRole("textbox", { name: "Add an option" })).toHaveCount(0);
+	await expect(scope.getByRole("textbox", { name: "Add an option" })).toHaveCount(0);
 
 	await storage.getByRole("radio", { name: /On disk as MDX/ }).check();
 	await saveStorage.click();
 	await expect(scope).toBeVisible();
 	await expect(scope).toBeFocused();
-	await expect(scope.getByRole("button", { name: "Save answer" })).toBeVisible();
+	await expect(scope.getByRole("button", { name: "Save", exact: true })).toBeVisible();
 	await expect(scope).not.toContainText("Answered by");
 	await expect(scope.getByRole("checkbox", { name: "Anchors" })).not.toBeChecked();
 
@@ -602,7 +608,7 @@ test("decision cards save independently with progressive custom answers", async
 	let resolved = questionnaire(page).filter({ hasText: "Where should room state live?" });
 	await expect(resolved).toContainText("On disk as MDX");
 	await expect(resolved).toContainText("Answered by @ana");
-	await expect(resolved.getByRole("button", { name: "Save answer" })).toHaveCount(0);
+	await expect(resolved.getByRole("button", { name: "Save", exact: true })).toHaveCount(0);
 	let iconStarts = await page.evaluate(() => {
 		let record = Reflect.get(window, "__feedbackIconTransitions") as { starts: number };
 		return record.starts;
@@ -637,12 +643,12 @@ test("decision cards save independently with progressive custom answers", async
 	await expect(history).not.toHaveAttribute("aria-controls");
 	await expect(historyContent).toHaveCount(0);
 
-	let customChoice = scope.getByRole("checkbox", { name: "Write a custom answer" });
+	let customChoice = scope.getByRole("checkbox", { name: "Add an option" });
 	await customChoice.focus();
 	await page.keyboard.press("Space");
-	let custom = scope.getByRole("textbox", { name: "Custom answer for Scope" });
+	let custom = scope.getByRole("textbox", { name: "Add an option" });
 	await expect(custom).toBeFocused();
-	let saveScope = scope.getByRole("button", { name: "Save answer" });
+	let saveScope = scope.getByRole("button", { name: "Save", exact: true });
 	await saveScope.hover();
 	await page.evaluate(() => {
 		let record = { starts: 0 };
@@ -673,11 +679,11 @@ test("decision cards save independently with progressive custom answers", async
 	await custom.fill("Only collaborative anchors");
 	await scope.getByRole("checkbox", { name: "Anchors" }).check();
 	await expect(custom).toHaveCount(0);
-	await customChoice.check();
-	custom = scope.getByRole("textbox", { name: "Custom answer for Scope" });
+	await customChoice.click();
+	custom = scope.getByRole("textbox", { name: "Add an option" });
 	await expect(custom).toHaveValue("Only collaborative anchors");
 	await expect(custom).toBeFocused();
-	await scope.getByRole("button", { name: "Save answer" }).click();
+	await scope.getByRole("button", { name: "Save", exact: true }).click();
 	await expect(questionnaire(page).filter({ hasText: "Which of these belong in the first cut?" }))
 		.toContainText("Only collaborative anchors");
 });
@@ -686,26 +692,31 @@ test("an unanswered decision reports its own validation error", async ({ join, s
 	await seed(PROSE);
 	let page = await join("ana");
 	await page.getByRole("button", { name: /^Decisions/ }).click();
-	let card = questionnaire(page).filter({ has: page.getByRole("heading", { name: "Scope" }) });
+	let card = questionnaire(page).filter({
+		has: page.getByRole("heading", { name: "Which of these belong in the first cut?" }),
+	});
 
-	await card.getByRole("button", { name: "Save answer" }).click();
+	await card.getByRole("button", { name: "Save", exact: true }).click();
 
 	await expect(card.getByRole("alert")).toBeVisible();
 	await expect(card).not.toContainText("Answered by");
 });
 
-test("cancelling asks first", async ({ join, seed }) => {
+test("discarding asks first", async ({ join, seed }) => {
 	await seed(PROSE);
 	let page = await join("ana");
 	await page.getByRole("button", { name: /^Decisions/ }).click();
-	let card = questionnaire(page).filter({ has: page.getByRole("heading", { name: "Scope" }) });
+	let card = questionnaire(page).filter({
+		has: page.getByRole("heading", { name: "Which of these belong in the first cut?" }),
+	});
 
-	await card.getByRole("button", { name: "Cancel" }).click();
+	await card.getByRole("button", { name: "Discard", exact: true }).click();
 
+	await expect(card.getByText("Discard this decision?")).toBeVisible();
 	let keep = card.getByRole("button", { name: "Keep it" });
 	await expect(keep).toBeVisible();
 	await keep.click();
-	await expect(card.getByRole("button", { name: "Save answer" })).toBeVisible();
+	await expect(card.getByRole("button", { name: "Save", exact: true })).toBeVisible();
 });
 
 test("a marked passage has document chrome with a hover preview", async ({ join, seed }) => {
diff --git a/packages/editor/src/widgets/questionnaire.test.tsx b/packages/editor/src/widgets/questionnaire.test.tsx
index 4a71e024..d35347a6 100644
--- a/packages/editor/src/widgets/questionnaire.test.tsx
+++ b/packages/editor/src/widgets/questionnaire.test.tsx
@@ -15,7 +15,7 @@ const SINGLE = {
 	}],
 };
 
-test("a single decision renders as a saveable card without tabs", () => {
+test("a single decision renders as a saveable card without a stepper", () => {
 	let markup = renderToStaticMarkup(
 		createElement(QuestionView, {
 			definition: SINGLE,
@@ -24,14 +24,15 @@ test("a single decision renders as a saveable card without tabs", () => {
 		}),
 	);
 
-	expect(markup).toContain("Decision");
-	expect(markup).toContain("Save answer");
-	expect(markup).toContain('data-plan-icon="check"');
-	expect(markup).toContain('aria-hidden="true"');
-	expect(markup).not.toContain('role="tablist"');
+	expect(markup).toContain("Where should room state live?");
+	expect(markup).toContain("Add an option");
+	expect(markup).toContain(">Save<");
+	expect(markup).not.toContain("Save answer");
+	expect(markup).not.toContain("Questions");
+	expect(markup).not.toContain(">Next<");
 });
 
-test("a stored multi-question questionnaire keeps its tabbed compatibility view", () => {
+test("a stored multi-question questionnaire keeps its stepper compatibility view", () => {
 	let markup = renderToStaticMarkup(
 		createElement(QuestionView, {
 			definition: {
@@ -51,8 +52,11 @@ test("a stored multi-question questionnaire keeps its tabbed compatibility view"
 		}),
 	);
 
-	expect(markup).toContain('role="tablist"');
-	expect(markup).toContain("Scope");
+	expect(markup).not.toContain('role="tablist"');
+	expect(markup).toContain("Previous question");
+	expect(markup).toContain("Storage");
+	expect(markup).toContain("1/2");
+	expect(markup).toContain(">Next<");
 });
 
 test("a stored unanswered questionnaire keeps its compatibility view without a live record", () => {
@@ -82,11 +86,11 @@ test("a stored unanswered questionnaire keeps its compatibility view without a l
 		}),
 	);
 
-	expect(markup).toContain('role="tablist"');
+	expect(markup).not.toContain('role="tablist"');
 	expect(markup).toContain("disabled");
 	expect(markup).toContain("Next");
-	expect(markup).not.toContain("Save answer");
-	expect(markup).not.toContain("Cancel");
+	expect(markup).not.toContain(">Save<");
+	expect(markup).not.toContain("Discard");
 });
 
 test("a host motion contract owns the active question step", () => {
@@ -148,6 +152,6 @@ test("a read-only decision remains linked but has no answer actions", () => {
 
 	expect(markup).toContain("show in plan");
 	expect(markup).toContain("disabled");
-	expect(markup).not.toContain("Save answer");
-	expect(markup).not.toContain("Cancel");
+	expect(markup).not.toContain(">Save<");
+	expect(markup).not.toContain("Discard");
 });
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
index 76f0d3ba..00599a65 100644
--- a/packages/icons/src/index.ts
+++ b/packages/icons/src/index.ts
@@ -5,6 +5,7 @@ export {
 	ChevronIcon,
 	CloseIcon,
 	CodeIcon,
+	DecisionIcon,
 	InfoIcon,
 	LightbulbIcon,
 	LinkPlusIcon,
diff --git a/packages/icons/src/line.tsx b/packages/icons/src/line.tsx
index 2790d566..8cb78bd6 100644
--- a/packages/icons/src/line.tsx
+++ b/packages/icons/src/line.tsx
@@ -44,6 +44,17 @@ export function CheckIcon(props: IconProps) {
 	);
 }
 
+export function DecisionIcon(props: IconProps) {
+	return (
+		<LineIcon title="decision" {...props}>
+			<polyline points="12.75 2.75 15.25 5.25 12.75 7.75" />
+			<path d="M2.75 12.75h2.1c1.1 0 2.12-.58 2.69-1.52l2.92-4.96c.57-.94 1.59-1.52 2.69-1.52h2.1" />
+			<polyline points="12.75 10.25 15.25 12.75 12.75 15.25" />
+			<path d="M2.75 5.25h2.1c1.1 0 2.12.58 2.69 1.52M10.46 11.23c.57.94 1.59 1.52 2.69 1.52h2.1" />
+		</LineIcon>
+	);
+}
+
 export function InfoIcon(props: IconProps) {
 	return (
 		<LineIcon title="circle-info" {...props}>
diff --git a/packages/question/src/react/question-view.test.ts b/packages/question/src/react/question-view.test.ts
index d6be1fea..fa5f404a 100644
--- a/packages/question/src/react/question-view.test.ts
+++ b/packages/question/src/react/question-view.test.ts
@@ -77,3 +77,81 @@ test("a host can present an error as motion feedback", () => {
 	expect(markup).toContain('role="alert"');
 	expect(markup).toContain('data-motion-feedback="alert"');
 });
+
+const ROLLOUT = {
+	id: "rollout",
+	header: "Rollout",
+	question: "How should we roll this out?",
+	multiple: false,
+	options: [
+		{ id: "all", label: "All at once", description: "Everyone moves on the same day" },
+		{ id: "team", label: "Team by team", description: "" },
+	],
+};
+
+test("options carry letter tiles and the last row offers to add one", () => {
+	let markup = renderToStaticMarkup(createElement(QuestionView, {
+		definition: { questions: [ROLLOUT] },
+		drafts: {},
+		onCancel() {},
+		onSubmit() {},
+	}));
+
+	expect(markup).toContain(">A<");
+	expect(markup).toContain(">B<");
+	expect(markup.lastIndexOf("Add an option")).toBeGreaterThan(markup.indexOf("Team by team"));
+	expect(markup).toContain(">Discard<");
+	expect(markup).toContain(">Save<");
+	expect(markup).not.toContain("Choose any");
+	expect(markup).not.toContain("Write a custom answer");
+});
+
+test("an existing custom answer opens the add row as a field with the next letter", () => {
+	let markup = renderToStaticMarkup(createElement(QuestionView, {
+		definition: { questions: [ROLLOUT] },
+		drafts: { rollout: { mode: "custom", choice: "", options: {}, custom: "Opt-in beta" } },
+	}));
+
+	expect(markup).toContain("<textarea");
+	expect(markup).toContain("Opt-in beta");
+	expect(markup).toContain(">C<");
+});
+
+test("a multiple-choice question says so once, under its title", () => {
+	let markup = renderToStaticMarkup(createElement(QuestionView, {
+		definition: { questions: [{ ...ROLLOUT, multiple: true }] },
+		drafts: {},
+	}));
+
+	expect(markup.match(/Choose any/g)).toHaveLength(1);
+	expect(markup).toContain('type="checkbox"');
+});
+
+test("several questions use a stepper, and only the last one saves", () => {
+	let second = { ...ROLLOUT, id: "pilot", header: "Pilot team", question: "Who pilots it?" };
+	let markup = renderToStaticMarkup(createElement(QuestionView, {
+		definition: { questions: [ROLLOUT, second] },
+		drafts: {},
+		onSubmit() {},
+	}));
+
+	expect(markup).not.toContain('role="tablist"');
+	expect(markup).toContain("Rollout");
+	expect(markup).toContain("1/2");
+	expect(markup).toContain(">Next<");
+	expect(markup).not.toContain(">Save<");
+});
+
+test("a failed save explains itself in a callout and offers another try", () => {
+	let markup = renderToStaticMarkup(createElement(QuestionView, {
+		definition: { questions: [ROLLOUT] },
+		drafts: {},
+		error: "Check your connection and try again.",
+		onSubmit() {},
+	}));
+
+	expect(markup).toContain("Couldn’t save");
+	expect(markup).toContain("Check your connection and try again.");
+	expect(markup).toContain('role="alert"');
+	expect(markup).toContain("Try again");
+});
diff --git a/packages/question/src/react/question-view.tsx b/packages/question/src/react/question-view.tsx
index 5a2cc8ab..704ef660 100644
--- a/packages/question/src/react/question-view.tsx
+++ b/packages/question/src/react/question-view.tsx
@@ -9,12 +9,10 @@
  * as they arrive rather than tracking local state.
  */
 
-import { useCallback, useEffect, useId, useRef, useState } from "react";
-import { CheckIcon, CloseIcon } from "@chopin/icons";
+import { useEffect, useId, useRef, useState } from "react";
+import { CheckIcon, ChevronIcon, DecisionIcon, PlusIcon, WarningIcon } from "@chopin/icons";
 
-import { answered } from "../draft";
-
-import type { KeyboardEvent, ReactNode } from "react";
+import type { ReactNode } from "react";
 import type { Draft, Drafts } from "../draft";
 import type { Answer, Definition, Item } from "../schema";
 
@@ -99,6 +97,19 @@ function DecisionHeading() {
 	);
 }
 
+function letter(index: number): string {
+	return String.fromCharCode(65 + index);
+}
+
+/** A line-tall slot, so the tile centres on the label's first line, not the whole row. */
+function Key({ children }: { children: ReactNode }) {
+	return (
+		<span aria-hidden="true" className="question-key">
+			<span>{children}</span>
+		</span>
+	);
+}
+
 function Choices(
 	{ question, draft, disabled, name, onChange }: {
 		question: Item;
@@ -111,19 +122,14 @@ function Choices(
 	let custom = draft?.mode === "custom";
 
 	return (
-		<fieldset disabled={disabled} className="m-0 border-0 p-0">
-			<legend className="sr-only">{question.header}</legend>
-
-			{question.options.map(option => {
+		<>
+			{question.options.map((option, index) => {
 				let selected = question.multiple
 					? !!draft?.options[option.id]
 					: draft?.choice === option.id;
 
 				return (
-					<label
-						key={option.id}
-						className="question-choice-row flex min-w-0 items-start gap-2 rounded-md px-1 py-1.5 text-sm hover:bg-hover"
-					>
+					<label key={option.id} className="question-choice-row question-option">
 						<input
 							type={question.multiple ? "checkbox" : "radio"}
 							name={question.multiple ? undefined : name}
@@ -141,21 +147,24 @@ function Choices(
 										: { mode: "choices", choice: option.id },
 								);
 							}}
-							className="mt-0.5 size-[18px] shrink-0 choice-control"
+							className="question-input"
 						/>
-						<span className="min-w-0">
-							<span className="font-medium text-text-primary">{option.label}</span>
-							{option.description && (
-								<span className="block text-sm text-text-secondary">{option.description}</span>
-							)}
+						<Key>{letter(index)}</Key>
+						<span className="question-text">
+							<span className="question-label">{option.label}</span>
+							{option.description && <span className="question-desc">{option.description}</span>}
+						</span>
+						<span aria-hidden="true" className="question-check">
+							<CheckIcon />
 						</span>
 					</label>
 				);
 			})}
-		</fieldset>
+		</>
 	);
 }
 
+/** The last row: a prompt to add an option, which becomes the field for it. */
 function Custom(
 	{ question, draft, disabled, name, onChange }: {
 		question: Item;
@@ -195,36 +204,50 @@ function Custom(
 		return () => viewport.removeEventListener("resize", reveal);
 	}, []);
 
-	return (
-		<div className="mt-2">
-			<label className="question-choice-row flex min-w-0 items-start gap-2 rounded-md px-1 text-sm hover:bg-hover">
+	if (!active) {
+		return (
+			<label className="question-choice-row question-option question-add">
 				<input
 					type={question.multiple ? "checkbox" : "radio"}
 					name={question.multiple ? undefined : name}
-					checked={active}
+					checked={false}
 					disabled={disabled}
-					onChange={event => {
-						focusOnReveal.current = event.currentTarget.checked;
-						onChange?.({ mode: event.currentTarget.checked ? "custom" : "choices" });
+					aria-label="Add an option"
+					onChange={() => {
+						focusOnReveal.current = true;
+						onChange?.({ mode: "custom" });
 					}}
-					className="mt-0.5 size-[18px] shrink-0 choice-control"
+					className="question-input"
 				/>
-				<span className="font-medium">Write a custom answer</span>
+				<Key>
+					<PlusIcon />
+				</Key>
+				<span className="question-text">Add an option</span>
 			</label>
+		);
+	}
 
-			{active && (
-				<textarea
-					rows={2}
-					maxLength={4000}
-					value={draft?.custom ?? ""}
-					disabled={disabled}
-					aria-label={`Custom answer for ${question.header}`}
-					placeholder="Type another answer"
-					onChange={event => onChange?.({ custom: event.currentTarget.value })}
-					className="question-custom-answer field mt-1.5 min-h-16 w-full resize-y px-2.5 py-2 text-sm transition placeholder:text-text-tertiary disabled:cursor-not-allowed"
-					ref={textarea}
-				/>
-			)}
+	return (
+		<div className="question-choice-row question-option question-adding">
+			<Key>{letter(question.options.length)}</Key>
+			<textarea
+				rows={1}
+				maxLength={4000}
+				value={draft?.custom ?? ""}
+				disabled={disabled}
+				aria-label="Add an option"
+				placeholder="Add an option"
+				onChange={event => onChange?.({ custom: event.currentTarget.value })}
+				onKeyDown={event => {
+					if (event.key === "Escape") onChange?.({ mode: "choices" });
+					else if (event.key === "Enter" && !event.shiftKey) {
+						event.preventDefault();
+						event.currentTarget.blur();
+					}
+				}}
+				className="question-custom-answer question-field"
+				ref={textarea}
+			/>
 		</div>
 	);
 }
@@ -251,18 +274,24 @@ const LINK = "flex w-full cursor-pointer items-start justify-between gap-2 round
  * cannot see it.
  */
 function Related(
-	{ id, count, label, className, children, onEnter, onLeave, onSelect }: {
+	{ id, count, label, className, children, inline, onEnter, onLeave, onSelect }: {
 		id: string | undefined;
 		count: number;
 		label: string;
 		className: string;
 		children: ReactNode;
+		/** Sits inside a heading, so the unlinked form must be phrasing content. */
+		inline?: boolean;
 		onEnter?: QuestionViewProps["onQuestionEnter"];
 		onLeave?: QuestionViewProps["onQuestionLeave"];
 		onSelect?: QuestionViewProps["onQuestionSelect"];
 	},
 ) {
-	if (!id || count === 0) return <div className={className}>{children}</div>;
+	if (!id || count === 0) {
+		return inline
+			? <span className={className}>{children}</span>
+			: <div className={className}>{children}</div>;
+	}
 
 	return (
 		<button
@@ -381,34 +410,21 @@ export function QuestionView(props: QuestionViewProps) {
 	let active = current.id;
 	let panelId = `${base}-panel-${active}`;
 	if (active !== selected) setActive(active);
-	// Cancelling cannot be undone and the agent is waiting, so it takes a
+	// Discarding cannot be undone and the agent is waiting, so it takes a
 	// second, deliberate click rather than a modal nobody reads.
 	let [confirming, setConfirming] = useState(false);
-	let tabs = useRef<HTMLDivElement>(null);
+	let previous = useRef<HTMLButtonElement>(null);
+	let next = useRef<HTMLButtonElement>(null);
+	let refocus = useRef<"previous" | "next">(undefined);
 
+	// At either end the activated caret disables. Keep focus inside the stepper
+	// so the new question is reached instead of dropping to the body.
 	useEffect(() => {
-		if (!active) return;
-		tabs.current?.querySelector<HTMLElement>(`#${CSS.escape(`${base}-tab-${active}`)}`)
-			?.scrollIntoView({ block: "nearest", inline: "nearest" });
-	}, [active, base]);
-
-	let move = useCallback((event: KeyboardEvent, index: number) => {
-		let total = definition.questions.length;
-		let next = index;
-
-		if (event.key === "ArrowRight") next = (index + 1) % total;
-		else if (event.key === "ArrowLeft") next = (index - 1 + total) % total;
-		else if (event.key === "Home") next = 0;
-		else if (event.key === "End") next = total - 1;
-		else return;
-
-		event.preventDefault();
-		let question = definition.questions[next];
-		if (!question) return;
-		setActive(question.id);
-		tabs.current?.querySelector<HTMLElement>(`#${CSS.escape(`${base}-tab-${question.id}`)}`)
-			?.focus();
-	}, [definition, base]);
+		let target = refocus.current;
+		refocus.current = undefined;
+		if (target === "previous") previous.current?.focus();
+		else if (target === "next") next.current?.focus();
+	}, [active]);
 
 	// A cancelled questionnaire has no answers, so it must be matched on status
 	// alone — falling through would offer an editable form for a dead question.
@@ -442,133 +458,82 @@ export function QuestionView(props: QuestionViewProps) {
 
 	let multiple = !single;
 	let index = definition.questions.findIndex(question => question.id === active);
-	let last = index === definition.questions.length - 1;
-	let unanswered = definition.questions.filter(question => !answered(question, drafts[question.id]))
-		.length;
+	let total = definition.questions.length;
+	let last = index === total - 1;
 	let step = (offset: number) => {
 		let question = definition.questions[index + offset];
 		if (!question) return;
 		setActive(question.id);
-		// At either end the activated navigation button disappears. Move focus
-		// to the selected tab so the new question is named instead of dropping
-		// focus to the document body.
-		tabs.current?.querySelector<HTMLElement>(`#${CSS.escape(`${base}-tab-${question.id}`)}`)
-			?.focus();
+		let arrived = index + offset;
+		if (arrived === 0) refocus.current = "next";
+		else if (arrived === total - 1) refocus.current = "previous";
 	};
+	let titleId = `${base}-title-${active}`;
 
 	return (
-		<div>
-			{single && <DecisionHeading />}
-			{multiple && (
-				<div
-					ref={tabs}
-					role="tablist"
-					aria-label="Questions"
-					data-focus-boundary=""
-					className="flex gap-1 overflow-x-auto px-2 pt-2 hairline-b"
-				>
-					{definition.questions.map((question, index) => {
-						let done = answered(question, drafts[question.id]);
-						let people = collaborators.filter(person => person.question === question.id);
-
-						return (
-							<button
-								key={question.id}
-								data-ace-question-id={question.id}
-								id={`${base}-tab-${question.id}`}
-								type="button"
-								role="tab"
-								aria-selected={question.id === active}
-								aria-controls={question.id === active ? `${base}-panel-${question.id}` : undefined}
-								aria-label={done ? `${question.header}, answered` : question.header}
-								tabIndex={question.id === active ? 0 : -1}
-								// Switching question, and only that. A tab used to ask to be
-								// taken to the question's prose as well, which read as
-								// intentional for as long as nothing was listening — wired
-								// up, it scrolls the plan out from under a reader who was
-								// stepping through the tabs to read them. Hovering a tab
-								// already lights where its decision lives, and the panel
-								// below carries the control that says "show in plan".
-								onClick={() => setActive(question.id)}
-								onMouseEnter={() => onQuestionEnter?.(question.id)}
-								onMouseLeave={event =>
-									event.currentTarget !== document.activeElement
-									&& onQuestionLeave?.(question.id)}
-								onFocus={() => onQuestionEnter?.(question.id)}
-								onBlur={event =>
-									!event.currentTarget.matches(":hover") && onQuestionLeave?.(question.id)}
-								onKeyDown={event => move(event, index)}
-								className={`question-tab max-w-64 shrink-0 rounded-t-md px-2.5 py-1 text-left text-sm leading-tight font-medium whitespace-normal transition ${
-									question.id === active
-										? "bg-selected text-text-primary"
-										: "text-text-tertiary hover:text-text-primary"
-								}`}
-							>
-								<span aria-hidden="true">{done ? "✓" : index + 1}</span> {question.header}
-								{people.length > 0 && (
-									<span className="ml-1 text-sm text-text-tertiary tabular-nums">
-										{people.length}
-									</span>
-								)}
-							</button>
-						);
-					})}
-				</div>
-			)}
-
+		<div aria-busy={submitting} className="question-card" data-saving={submitting ? "" : undefined}>
 			{aside}
 
 			{(() => {
 				let panel = (
 					<section
-						aria-labelledby={multiple ? `${base}-tab-${current.id}` : undefined}
+						aria-labelledby={titleId}
 						data-ace-question-id={current.id}
 						id={panelId}
-						role={multiple ? "tabpanel" : undefined}
-						className="px-3 py-2.5"
 						onMouseEnter={() => onQuestionEnter?.(current.id)}
 						onMouseLeave={event =>
 							!event.currentTarget.contains(document.activeElement)
 							&& onQuestionLeave?.(current.id)}
-						onFocusCapture={() => onQuestionEnter?.(current.id)}
+						onFocusCapture={() =>
+							onQuestionEnter?.(current.id)}
 						onBlurCapture={event =>
 							!event.currentTarget.contains(event.relatedTarget)
 							&& !event.currentTarget.matches(":hover")
 							&& onQuestionLeave?.(current.id)}
 					>
-						<header className="flex min-w-0 flex-wrap items-baseline justify-between gap-2">
-							<h4 className="m-0 min-w-0 break-words text-sm font-semibold text-text-primary">
-								{current.header}
-							</h4>
-							<Badges people={collaborators.filter(person => person.question === current.id)} />
+						<header className="question-head">
+							<span className="question-mark" title="Decision">
+								<DecisionIcon />
+							</span>
+							<div className="question-head-text">
+								<h4 className="question-title" id={titleId}>
+									<Related
+										id={current.id}
+										count={places?.[current.id] ?? 0}
+										label={current.question}
+										className="question-title-link"
+										inline
+										onSelect={onQuestionSelect}
+									>
+										{current.question}
+									</Related>
+								</h4>
+								{current.multiple && <p className="question-hint">Choose any</p>}
+							</div>
+							<Badges
+								people={collaborators.filter(person =>
+									person.question === current.id
+								)}
+							/>
 						</header>
 
-						{/* Never the whole panel: below this is a form. */}
-						<Related
-							id={current.id}
-							count={places?.[current.id] ?? 0}
-							label={current.question}
-							className="mt-1 mb-2"
-							onSelect={onQuestionSelect}
-						>
-							<p className="m-0 text-sm text-text-secondary">{current.question}</p>
-						</Related>
-
-						<Choices
-							question={current}
-							draft={drafts[current.id]}
-							disabled={disabled}
-							name={`${base}-${current.id}`}
-							onChange={change => onChange?.(current.id, change)}
-						/>
-
-						<Custom
-							question={current}
-							draft={drafts[current.id]}
-							disabled={disabled}
-							name={`${base}-${current.id}`}
-							onChange={change => onChange?.(current.id, change)}
-						/>
+						<fieldset disabled={disabled} className="question-options">
+							<legend className="sr-only">{current.header}</legend>
+							<Choices
+								question={current}
+								draft={drafts[current.id]}
+								disabled={disabled}
+								name={`${base}-${current.id}`}
+								onChange={change => onChange?.(current.id, change)}
+							/>
+							<Custom
+								question={current}
+								draft={drafts[current.id]}
+								disabled={disabled}
+								name={`${base}-${current.id}`}
+								onChange={change => onChange?.(current.id, change)}
+							/>
+						</fieldset>
 					</section>
 				);
 
@@ -576,94 +541,112 @@ export function QuestionView(props: QuestionViewProps) {
 			})()}
 
 			{error && (
-				<p
-					className={`${
-						errorClassName ? `${errorClassName} ` : ""
-					}px-3 pb-2 text-sm text-destructive-ink`}
+				<div
+					className={`plan-research-callout question-callout${
+						errorClassName ? ` ${errorClassName}` : ""
+					}`}
 					data-motion-feedback={errorClassName ? "alert" : undefined}
 					role="alert"
 				>
-					{error}
-				</p>
+					<span aria-hidden="true" className="plan-research-badge">
+						<WarningIcon />
+					</span>
+					<p>
+						<strong>Couldn’t save</strong>
+						{error}
+					</p>
+				</div>
 			)}
 
 			{(onSubmit || onCancel || multiple) && (
-				<footer className="question-actions flex flex-wrap items-center justify-end gap-2 px-3 py-2 hairline-t">
-					{multiple && !confirming && (
-						<p className="m-0 mr-auto text-sm text-text-tertiary tabular-nums">
-							{index + 1} of {definition.questions.length} · {unanswered} unanswered
-						</p>
-					)}
-					{onCancel && confirming && (
-						<>
-							<p className="m-0 mr-auto text-sm text-text-secondary">
-								Cancel without answering?
-							</p>
-							<button
-								type="button"
-								onClick={() => setConfirming(false)}
-								disabled={submitting}
-								className="btn btn-sm btn-secondary"
-							>
-								Keep it
-							</button>
-							<button
-								type="button"
-								onClick={onCancel}
-								disabled={disabled || submitting}
-								className="btn btn-sm btn-destructive"
-							>
-								<CloseIcon aria-hidden="true" size={14} />
-								{submitting ? "Cancelling…" : "Yes, cancel"}
-							</button>
-						</>
-					)}
-					{multiple && !confirming && index > 0 && (
-						<button
-							type="button"
-							onClick={() => step(-1)}
-							className="btn btn-sm btn-secondary"
-						>
-							Back
-						</button>
-					)}
-					{onCancel && !confirming && (
-						<button
-							type="button"
-							onClick={() => setConfirming(true)}
-							disabled={disabled || submitting}
-							className="btn btn-sm btn-secondary"
-						>
-							<CloseIcon aria-hidden="true" size={14} />
-							Cancel
-						</button>
-					)}
-					{multiple && !confirming && !last && (
-						<button
-							type="button"
-							onClick={() => step(1)}
-							className="btn btn-sm btn-primary"
-						>
-							Next
-						</button>
-					)}
-					{onSubmit && !confirming && (!multiple || last) && (
-						<button
-							type="button"
-							onClick={onSubmit}
-							disabled={disabled || submitting}
-							className="btn btn-sm btn-primary"
-						>
-							<CheckIcon
-								aria-hidden="true"
-								data-plan-icon="check"
-								size={14}
-							/>
-							{submitting
-								? (single ? "Saving…" : "Submitting…")
-								: (single ? "Save answer" : "Submit")}
-						</button>
-					)}
+				<footer
+					className="question-actions"
+					data-confirm={onCancel && confirming ? "" : undefined}
+				>
+					{onCancel && confirming
+						? (
+							<>
+								<span className="question-confirm">Discard this decision?</span>
+								<button
+									type="button"
+									onClick={() => setConfirming(false)}
+									disabled={submitting}
+									className="btn btn-sm btn-outline"
+								>
+									Keep it
+								</button>
+								<button
+									type="button"
+									onClick={onCancel}
+									disabled={disabled || submitting}
+									className="btn btn-sm btn-destructive"
+								>
+									{submitting ? "Discarding…" : "Discard"}
+								</button>
+							</>
+						)
+						: (
+							<>
+								{multiple && (
+									<div role="group" aria-label="Questions" className="question-stepper">
+										<button
+											type="button"
+											aria-label="Previous question"
+											className="btn btn-icon btn-ghost question-caret"
+											data-flip=""
+											disabled={index === 0}
+											onClick={() => step(-1)}
+											ref={previous}
+										>
+											<ChevronIcon size={16} />
+										</button>
+										<span className="question-count" aria-live="polite">
+											<strong>{current.header}</strong>
+											{index + 1}/{total}
+										</span>
+										<button
+											type="button"
+											aria-label="Next question"
+											className="btn btn-icon btn-ghost question-caret"
+											disabled={last}
+											onClick={() => step(1)}
+											ref={next}
+										>
+											<ChevronIcon size={16} />
+										</button>
+									</div>
+								)}
+								{onCancel && (
+									<button
+										type="button"
+										onClick={() => setConfirming(true)}
+										disabled={disabled || submitting}
+										className="btn btn-sm btn-outline"
+									>
+										Discard
+									</button>
+								)}
+								{multiple && !last && (
+									<button
+										type="button"
+										onClick={() => step(1)}
+										className="btn btn-sm btn-primary"
+									>
+										Next
+									</button>
+								)}
+								{onSubmit && (!multiple || last) && (
+									<button
+										type="button"
+										onClick={onSubmit}
+										disabled={disabled || submitting}
+										className="btn btn-sm btn-primary"
+									>
+										{submitting ? "Saving…" : error ? "Try again" : "Save"}
+									</button>
+								)}
+							</>
+						)}
 				</footer>
 			)}
 		</div>
diff --git a/scripts/design-contract/exceptions/dynamic-packages.json b/scripts/design-contract/exceptions/dynamic-packages.json
index b84a45b6..d0656646 100644
--- a/scripts/design-contract/exceptions/dynamic-packages.json
+++ b/scripts/design-contract/exceptions/dynamic-packages.json
@@ -17,15 +17,22 @@
 				"class > Related > <button>",
 				1
 			],
+			[
+				"dynamic",
+				"class",
+				"className",
+				"class > Related > <span>",
+				1
+			],
 			[
 				"dynamic",
 				"class",
 				"errorClassName",
-				"class > QuestionView > <p>",
+				"class > QuestionView > <div>",
 				1
 			]
 		],
-		"sourceHash": "62f6aad113b4705b04c54a14db97a28ea0cccb2fefdb810d3c0d59539e4f69d6"
+		"sourceHash": "da4c57bf8133585e245f6a448ab85e329138b297bfeec1863dac9af4cfdafc5d"
 	},
 	{
 		"file": "packages/icons/src/icon.tsx",
@@ -101,6 +108,13 @@
 				"unresolved JSX props > CodeIcon > <LineIcon>",
 				1
 			],
+			[
+				"dynamic",
+				"*",
+				"props",
+				"unresolved JSX props > DecisionIcon > <LineIcon>",
+				1
+			],
 			[
 				"dynamic",
 				"*",
@@ -186,7 +200,7 @@
 				1
 			]
 		],
-		"sourceHash": "0dfd0723e90646836446c9017f7dab49c8f2412c75d5d0753fa33cfd265b7f04"
+		"sourceHash": "395805db3113280090d3c6c652cfb28e2ff1f7ff12ec613cfdefe1b3d24e972a"
 	},
 	{
 		"file": "packages/visuals/src/ui/mini-bars.tsx",

From 2304051195f6acbfe928dcb0c8aa2fb734f7df42 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Wed, 30 Sep 2026 21:30:31 +0100
Subject: [PATCH 02/10] Disable Save and Next until the current question is
 answered

The approved design greys the primary action until an option is chosen.
Next keeps free navigation in read-only views. Focus follows the primary
button when Next lands on the last question. The alert-motion e2e now
triggers a rejected save instead of an empty submit.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 e2e/sidecar.e2e.ts                            | 89 +++++++++++++------
 .../question/src/react/question-view.test.ts  | 46 ++++++++++
 packages/question/src/react/question-view.tsx | 21 +++--
 3 files changed, 125 insertions(+), 31 deletions(-)

diff --git a/e2e/sidecar.e2e.ts b/e2e/sidecar.e2e.ts
index 4cb55b98..21e0e51d 100644
--- a/e2e/sidecar.e2e.ts
+++ b/e2e/sidecar.e2e.ts
@@ -649,7 +649,63 @@ test("decision cards save independently with progressive custom answers", async
 	let custom = scope.getByRole("textbox", { name: "Add an option" });
 	await expect(custom).toBeFocused();
 	let saveScope = scope.getByRole("button", { name: "Save", exact: true });
-	await saveScope.hover();
+	await expect(saveScope).toBeDisabled();
+	await custom.fill("Only collaborative anchors");
+	await scope.getByRole("checkbox", { name: "Anchors" }).check();
+	await expect(custom).toHaveCount(0);
+	await customChoice.click();
+	custom = scope.getByRole("textbox", { name: "Add an option" });
+	await expect(custom).toHaveValue("Only collaborative anchors");
+	await expect(custom).toBeFocused();
+	await scope.getByRole("button", { name: "Save", exact: true }).click();
+	await expect(questionnaire(page).filter({ hasText: "Which of these belong in the first cut?" }))
+		.toContainText("Only collaborative anchors");
+});
+
+test("Save and Next wait for a chosen answer", async ({ join, seed }) => {
+	await seed(PROSE);
+	let page = await join("ana");
+	await page.getByRole("button", { name: /^Decisions/ }).click();
+	let card = questionnaire(page).filter({
+		has: page.getByRole("heading", { name: "Which of these belong in the first cut?" }),
+	});
+	let save = card.getByRole("button", { name: "Save", exact: true });
+
+	await expect(save).toBeDisabled();
+	await card.getByRole("checkbox", { name: "Anchors" }).check();
+	await expect(save).toBeEnabled();
+	await card.getByRole("checkbox", { name: "Anchors" }).uncheck();
+	await expect(save).toBeDisabled();
+	await expect(card).not.toContainText("Answered by");
+});
+
+test("a rejected save is announced as an alert with motion feedback", async ({ join, page, seed }) => {
+	await page.routeWebSocket("**/ws?**", route => {
+		let server = route.connectToServer();
+		route.onMessage(message => {
+			let frame = typeof message === "string" ? JSON.parse(message) as Record<string, unknown> : {};
+			// The server stays authoritative for everything but this one refusal.
+			if (frame.kind !== "question:submit") return server.send(message);
+			route.send(JSON.stringify({
+				kind: "question:submit",
+				rid: frame.rid,
+				id: frame.id,
+				ok: false,
+				reason: "invalid",
+				message: "Scope could not be saved.",
+			}));
+		});
+		server.onMessage(message => route.send(message));
+	});
+	await seed(PROSE);
+	await join("ana");
+	await page.getByRole("button", { name: /^Decisions/ }).click();
+	let card = questionnaire(page).filter({
+		has: page.getByRole("heading", { name: "Which of these belong in the first cut?" }),
+	});
+	await card.getByRole("checkbox", { name: "Anchors" }).check();
+	let save = card.getByRole("button", { name: "Save", exact: true });
+	await save.hover();
 	await page.evaluate(() => {
 		let record = { starts: 0 };
 		Reflect.set(window, "__feedbackAlertTransitions", record);
@@ -660,9 +716,12 @@ test("decision cards save independently with progressive custom answers", async
 			) record.starts++;
 		}, true);
 	});
-	await saveScope.click();
-	let alert = scope.getByRole("alert");
+	await save.click();
+
+	let alert = card.getByRole("alert");
 	await expect(alert).toBeVisible();
+	await expect(alert).toContainText("Couldn’t save");
+	await expect(alert).toContainText("Scope could not be saved.");
 	expect(
 		await alert.evaluate(element =>
 			getComputedStyle(element).transitionDuration.split(",").some(duration =>
@@ -676,29 +735,7 @@ test("decision cards save independently with progressive custom answers", async
 			return record.starts > 0;
 		})
 	).toBe(true);
-	await custom.fill("Only collaborative anchors");
-	await scope.getByRole("checkbox", { name: "Anchors" }).check();
-	await expect(custom).toHaveCount(0);
-	await customChoice.click();
-	custom = scope.getByRole("textbox", { name: "Add an option" });
-	await expect(custom).toHaveValue("Only collaborative anchors");
-	await expect(custom).toBeFocused();
-	await scope.getByRole("button", { name: "Save", exact: true }).click();
-	await expect(questionnaire(page).filter({ hasText: "Which of these belong in the first cut?" }))
-		.toContainText("Only collaborative anchors");
-});
-
-test("an unanswered decision reports its own validation error", async ({ join, seed }) => {
-	await seed(PROSE);
-	let page = await join("ana");
-	await page.getByRole("button", { name: /^Decisions/ }).click();
-	let card = questionnaire(page).filter({
-		has: page.getByRole("heading", { name: "Which of these belong in the first cut?" }),
-	});
-
-	await card.getByRole("button", { name: "Save", exact: true }).click();
-
-	await expect(card.getByRole("alert")).toBeVisible();
+	await expect(card.getByRole("button", { name: "Try again" })).toBeEnabled();
 	await expect(card).not.toContainText("Answered by");
 });
 
diff --git a/packages/question/src/react/question-view.test.ts b/packages/question/src/react/question-view.test.ts
index fa5f404a..77543582 100644
--- a/packages/question/src/react/question-view.test.ts
+++ b/packages/question/src/react/question-view.test.ts
@@ -155,3 +155,49 @@ test("a failed save explains itself in a callout and offers another try", () =>
 	expect(markup).toContain('role="alert"');
 	expect(markup).toContain("Try again");
 });
+
+function button(markup: string, label: string): string {
+	let match = markup.match(new RegExp(`<button[^>]*>${label}</button>`));
+	if (!match) throw new Error(`No ${label} button`);
+	return match[0];
+}
+
+let ALL = { mode: "choices", choice: "all", options: {}, custom: "" } as const;
+
+test("Save waits for an answer, and a blank custom answer is not one", () => {
+	let render = (drafts: Parameters<typeof QuestionView>[0]["drafts"]) =>
+		renderToStaticMarkup(createElement(QuestionView, {
+			definition: { questions: [ROLLOUT] },
+			drafts,
+			onChange() {},
+			onSubmit() {},
+		}));
+
+	expect(button(render({}), "Save")).toContain("disabled");
+	expect(button(render({ rollout: { ...ALL, mode: "custom", choice: "", custom: "  " } }), "Save"))
+		.toContain("disabled");
+	expect(button(render({ rollout: ALL }), "Save")).not.toContain("disabled");
+	expect(
+		button(render({ rollout: { ...ALL, mode: "custom", choice: "", custom: "Beta" } }), "Save"),
+	)
+		.not.toContain("disabled");
+});
+
+test("Next waits for an answer to the current question, but not in a read-only view", () => {
+	let second = { ...ROLLOUT, id: "pilot", header: "Pilot team", question: "Who pilots it?" };
+	let definition = { questions: [ROLLOUT, second] };
+	let editing = (drafts: Parameters<typeof QuestionView>[0]["drafts"]) =>
+		renderToStaticMarkup(createElement(QuestionView, {
+			definition,
+			drafts,
+			onChange() {},
+			onSubmit() {},
+		}));
+
+	expect(button(editing({}), "Next")).toContain("disabled");
+	expect(button(editing({ rollout: ALL }), "Next")).not.toContain("disabled");
+	expect(button(
+		renderToStaticMarkup(createElement(QuestionView, { definition, drafts: {} })),
+		"Next",
+	)).not.toContain("disabled");
+});
diff --git a/packages/question/src/react/question-view.tsx b/packages/question/src/react/question-view.tsx
index 704ef660..9a425d4a 100644
--- a/packages/question/src/react/question-view.tsx
+++ b/packages/question/src/react/question-view.tsx
@@ -12,6 +12,8 @@
 import { useEffect, useId, useRef, useState } from "react";
 import { CheckIcon, ChevronIcon, DecisionIcon, PlusIcon, WarningIcon } from "@chopin/icons";
 
+import { answered } from "../draft";
+
 import type { ReactNode } from "react";
 import type { Draft, Drafts } from "../draft";
 import type { Answer, Definition, Item } from "../schema";
@@ -415,7 +417,8 @@ export function QuestionView(props: QuestionViewProps) {
 	let [confirming, setConfirming] = useState(false);
 	let previous = useRef<HTMLButtonElement>(null);
 	let next = useRef<HTMLButtonElement>(null);
-	let refocus = useRef<"previous" | "next">(undefined);
+	let primary = useRef<HTMLButtonElement>(null);
+	let refocus = useRef<"previous" | "next" | "primary">(undefined);
 
 	// At either end the activated caret disables. Keep focus inside the stepper
 	// so the new question is reached instead of dropping to the body.
@@ -424,6 +427,7 @@ export function QuestionView(props: QuestionViewProps) {
 		refocus.current = undefined;
 		if (target === "previous") previous.current?.focus();
 		else if (target === "next") next.current?.focus();
+		else if (target === "primary") primary.current?.focus();
 	}, [active]);
 
 	// A cancelled questionnaire has no answers, so it must be matched on status
@@ -460,12 +464,16 @@ export function QuestionView(props: QuestionViewProps) {
 	let index = definition.questions.findIndex(question => question.id === active);
 	let total = definition.questions.length;
 	let last = index === total - 1;
-	let step = (offset: number) => {
+	// Nothing chosen, nothing to save or move on with. Read-only hosts have no
+	// drafts to fill, so they keep free navigation.
+	let ready = answered(current, drafts[current.id]);
+	let step = (offset: number, from?: "primary") => {
 		let question = definition.questions[index + offset];
 		if (!question) return;
 		setActive(question.id);
 		let arrived = index + offset;
-		if (arrived === 0) refocus.current = "next";
+		if (from) refocus.current = "primary";
+		else if (arrived === 0) refocus.current = "next";
 		else if (arrived === total - 1) refocus.current = "previous";
 	};
 	let titleId = `${base}-title-${active}`;
@@ -629,8 +637,10 @@ export function QuestionView(props: QuestionViewProps) {
 								{multiple && !last && (
 									<button
 										type="button"
-										onClick={() => step(1)}
+										onClick={() => step(1, "primary")}
+										disabled={!!onChange && !ready}
 										className="btn btn-sm btn-primary"
+										ref={primary}
 									>
 										Next
 									</button>
@@ -639,8 +649,9 @@ export function QuestionView(props: QuestionViewProps) {
 									<button
 										type="button"
 										onClick={onSubmit}
-										disabled={disabled || submitting}
+										disabled={disabled || submitting || !ready}
 										className="btn btn-sm btn-primary"
+										ref={primary}
 									>
 										{submitting ? "Saving…" : error ? "Try again" : "Save"}
 									</button>

From e48b667de6d1f583c327e2a10e3dd4629f051c46 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Wed, 30 Sep 2026 21:46:37 +0100
Subject: [PATCH 03/10] Append shared options to open questions on the server

Declares question:option in the protocol, relaxes the frozen definition to
appending while open, and commits record, draft store and plan projection
together before acknowledging or broadcasting.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 apps/server/src/main.ts                   |   4 +
 apps/server/src/plan/room.ts              |  34 +++++
 apps/server/src/questions.service.test.ts | 154 +++++++++++++++++++++
 apps/server/src/questions/service.ts      | 160 ++++++++++++++++++++++
 apps/server/src/questions/store.ts        |  29 ++++
 packages/protocol/question.d.ts           |  67 ++++++++-
 packages/question/src/draft.ts            |  15 +-
 packages/question/src/index.ts            |   4 +-
 packages/question/src/limits.ts           |   5 +
 packages/question/src/question.test.ts    |  95 ++++++++++++-
 packages/question/src/schema.ts           |  67 ++++++++-
 11 files changed, 624 insertions(+), 10 deletions(-)

diff --git a/apps/server/src/main.ts b/apps/server/src/main.ts
index 48d2d69a..7212ab18 100644
--- a/apps/server/src/main.ts
+++ b/apps/server/src/main.ts
@@ -322,6 +322,10 @@ async function receive(ws: Socket, raw: string): Promise<void> {
 			if (room.plan) await Questions.cancel(room.plan, server, room.id, ws, frame);
 			return;
 
+		case "question:option":
+			if (room.plan) await Questions.addOption(room.plan, server, room.id, ws, frame);
+			return;
+
 		case "comment:start":
 			if (room.plan) await Comments.start(room.plan, server, room.id, ws, frame);
 			return;
diff --git a/apps/server/src/plan/room.ts b/apps/server/src/plan/room.ts
index 12929416..c00773f1 100644
--- a/apps/server/src/plan/room.ts
+++ b/apps/server/src/plan/room.ts
@@ -498,6 +498,40 @@ export function projectAnswer(
 	});
 }
 
+/** Append one shared option to a question's projection in the plan. */
+export function appendQuestionOption(
+	target: Document,
+	id: string,
+	question: string,
+	option: { id: string; label: string; description: string },
+): Mutation | undefined {
+	return mutate(target, () => {
+		let found = false;
+		for (let node of $nodesOfType(QuestionnaireNode)) {
+			if (node.getId() !== id) continue;
+			let value = node.getQuestionnaire();
+			if (!value.questions.some(item => item.id === question)) continue;
+			found = true;
+			node.setQuestionnaire({
+				...value,
+				questions: value.questions.map(item =>
+					item.id === question
+						? {
+							...item,
+							options: [...item.options, {
+								id: option.id,
+								label: option.label,
+								...(option.description ? { description: option.description } : {}),
+							}],
+						}
+						: item
+				),
+			});
+		}
+		return found;
+	});
+}
+
 /** Take a questionnaire out of the plan, leaving its record as history. */
 export function removeQuestionnaire(target: Document, id: string): Mutation | undefined {
 	return mutate(target, () => {
diff --git a/apps/server/src/questions.service.test.ts b/apps/server/src/questions.service.test.ts
index 69560b4d..8df79f28 100644
--- a/apps/server/src/questions.service.test.ts
+++ b/apps/server/src/questions.service.test.ts
@@ -286,3 +286,157 @@ test("an active implementation refuses to create a questionnaire", async () => {
 	expect(plan.records.size).toBe(0);
 	expect(room.project(plan.document)).not.toContain("<Questionnaire");
 });
+
+function member(handle = "ana") {
+	let sent: Array<Record<string, unknown>> = [];
+	let ws = {
+		data: { handle, client: `client-${handle}`, room: "test" },
+		send(raw: string) {
+			sent.push(JSON.parse(raw));
+		},
+	} as unknown as Socket;
+	return { ws, sent };
+}
+
+function adding(
+	plan: Plan,
+	server: Server<SocketData>,
+	ws: Socket,
+	id: string,
+	label: string,
+	key = "key-0000-0001",
+) {
+	let question = plan.records.get(id)!.definition.questions[0].id;
+	return Questions.addOption(plan, server, "test", ws, {
+		kind: "question:option",
+		ts: 0,
+		rid: `rid-${key}-${label}`,
+		id,
+		question,
+		key,
+		label,
+	});
+}
+
+test("an appended option is durable in the record, draft store and plan before anyone hears of it", async () => {
+	let plan = await opened();
+	let published: Array<{ kind: string }> = [];
+	let server = {
+		publish(_topic: string, raw: string) {
+			published.push(JSON.parse(raw));
+		},
+	} as unknown as Server<SocketData>;
+	let asked = asking(plan, server, definition());
+	await asked.created;
+	let id = [...plan.records.keys()][0]!;
+	published.length = 0;
+	let { ws, sent } = member();
+
+	await adding(plan, server, ws, id, "  A third way ");
+
+	let reply = sent.at(-1) as { ok: boolean; option: { id: string; label: string } };
+	expect(reply.ok).toBe(true);
+	expect(reply.option.label).toBe("A third way");
+	let item = plan.records.get(id)!.definition.questions[0];
+	let options = item.options;
+	expect(options.map(option => option.label)).toEqual(["Choose this", "A third way"]);
+	expect(Store.get(plan.questions, id)!.definition.questions[0].options).toEqual(options);
+	expect(room.project(plan.document)).toContain("A third way");
+	// Committed, not merely applied in memory.
+	expect(plan.persistence.lastSidecar).toContain("A third way");
+	expect(published.map(frame => frame.kind)).toEqual(["plan:update", "question:option-added"]);
+
+	// Everyone can choose it and the decision reads as the new label.
+	let snapshot = Store.snapshot(plan.questions, id);
+	if (!snapshot.open) throw new Error("not open");
+	let model = Question.crdt.Model.fromBinary(new Uint8Array(snapshot.model))
+		.fork() as unknown as Question.Model;
+	model.api.val([item.id, "choice"]).set(reply.option.id);
+	let edited = Store.edit(plan.questions, id, [...model.api.flush().toBinary()]);
+	if (!edited.open || !edited.accepted) throw new Error("could not choose the option");
+	let claimed = Store.claimSubmit(plan.questions, id, edited.revision, "ana");
+	if (!claimed.ok) throw new Error("could not claim");
+	expect(claimed.answers).toEqual([{ question: item.question, choices: ["A third way"] }]);
+	Store.commit(plan.questions, claimed.claim);
+	await asked.waiting;
+});
+
+test("repeating an option request with the same key returns the same option", async () => {
+	let plan = await opened();
+	let server = { publish() {} } as unknown as Server<SocketData>;
+	let asked = asking(plan, server, definition());
+	await asked.created;
+	let id = [...plan.records.keys()][0]!;
+	let { ws, sent } = member();
+
+	await adding(plan, server, ws, id, "Once");
+	let revision = plan.revision;
+	await adding(plan, server, ws, id, "Once");
+
+	let [first, second] = sent as Array<{ ok: boolean; option: { id: string }; repeated?: boolean }>;
+	expect(second!.option.id).toBe(first!.option.id);
+	expect(second!.repeated).toBe(true);
+	expect(plan.records.get(id)!.definition.questions[0].options).toHaveLength(2);
+	expect(plan.revision).toBe(revision);
+});
+
+test("an option is refused for duplicates, bounds, settled questions and active implementations", async () => {
+	let plan = await opened();
+	let server = { publish() {} } as unknown as Server<SocketData>;
+	let asked = asking(plan, server, definition());
+	await asked.created;
+	let id = [...plan.records.keys()][0]!;
+	let { ws, sent } = member();
+	let last = () => sent.at(-1) as { ok: boolean; reason?: string };
+
+	await adding(plan, server, ws, id, "choose THIS", "key-0000-0002");
+	expect(last()).toMatchObject({ ok: false, reason: "duplicate" });
+	await adding(plan, server, ws, id, "   ", "key-0000-0003");
+	expect(last()).toMatchObject({ ok: false, reason: "invalid" });
+	await adding(plan, server, ws, id, "ok", "no");
+	expect(last()).toMatchObject({ ok: false, reason: "invalid" });
+	expect(plan.records.get(id)!.definition.questions[0].options).toHaveLength(1);
+
+	plan.execution = { id: "run-1" } as never;
+	await adding(plan, server, ws, id, "Blocked", "key-0000-0004");
+	expect(last()).toMatchObject({ ok: false, reason: "implementation" });
+	plan.execution = undefined;
+
+	for (let index = 0; index < Question.limits.MAX_SHARED_OPTIONS - 1; index++) {
+		await adding(plan, server, ws, id, `Extra ${index}`, `key-fill-${index}0000`);
+		expect(last().ok).toBe(true);
+	}
+	await adding(plan, server, ws, id, "Overflow", "key-0000-0005");
+	expect(last()).toMatchObject({ ok: false, reason: "full" });
+
+	let claimed = Store.claimCancel(plan.questions, id, "ana");
+	if (!claimed.ok) throw new Error("could not claim");
+	await adding(plan, server, ws, id, "During", "key-0000-0006");
+	expect(last()).toMatchObject({ ok: false, reason: "resolving" });
+	Store.commit(plan.questions, claimed.claim);
+	await adding(plan, server, ws, id, "After", "key-0000-0007");
+	expect(last()).toMatchObject({ ok: false, reason: "resolved" });
+	await asked.waiting;
+});
+
+test("a redefined open question survives dump and restore with its older draft", async () => {
+	let plan = await opened();
+	let server = { publish() {} } as unknown as Server<SocketData>;
+	let asked = asking(plan, server, definition());
+	await asked.created;
+	let id = [...plan.records.keys()][0]!;
+	let { ws } = member();
+	await adding(plan, server, ws, id, "Restored");
+
+	let restored = Store.restore(JSON.parse(JSON.stringify(Store.dump(plan.questions))));
+	let entry = Store.get(restored, id)!;
+	expect(entry.definition.questions[0].options.map(option => option.label)).toEqual([
+		"Choose this",
+		"Restored",
+	]);
+	expect(Question.read(entry.model, entry.definition)).toBeDefined();
+	Store.shutdown(restored);
+	let claimed = Store.claimCancel(plan.questions, id, "ana");
+	if (claimed.ok) Store.commit(plan.questions, claimed.claim);
+	await asked.waiting;
+});
diff --git a/apps/server/src/questions/service.ts b/apps/server/src/questions/service.ts
index 9b5e9ed9..83f62d4c 100644
--- a/apps/server/src/questions/service.ts
+++ b/apps/server/src/questions/service.ts
@@ -75,6 +75,11 @@ export type Record = {
 	at?: number;
 	/** Where in the prose each of its decisions lives. */
 	anchors?: Wired.WidgetAnchors;
+	/**
+	 * Option-append idempotency keys to the option each created. Bounded by the
+	 * option limit, and durable so a retry after a restart still finds it.
+	 */
+	appended?: { [key: string]: string };
 };
 
 function decide(
@@ -336,6 +341,161 @@ export async function submit(
 	});
 }
 
+const ADD_OPTION_REFUSAL: { [reason in "resolved" | "resolving"]: string } = {
+	resolved: "This question has already been decided",
+	resolving: "This question is being decided",
+};
+
+/**
+ * Append an option to an open question, for everyone.
+ *
+ * Ordering follows the rest of this module: the record, the open entry and the
+ * plan projection change together under the plan's exclusive queue, the fenced
+ * commit happens, and only then does anyone hear about it. The shared draft is
+ * not touched, so nothing another member has already chosen can change.
+ */
+export async function addOption(
+	plan: Plan,
+	server: Server<SocketData>,
+	roomId: string,
+	ws: Socket,
+	msg: Request<Wire.AddOption.Ask>,
+): Promise<void> {
+	let refuse = (reason: Wire.AddOption.Refusal, message: string) =>
+		reply(ws, msg.rid, {
+			kind: "question:option",
+			ts: 0,
+			id: msg.id,
+			ok: false,
+			reason,
+			message,
+		});
+	if (Service.implementationActive(plan)) {
+		return refuse("implementation", "An implementation is running; decisions cannot change");
+	}
+
+	let outcome: Wire.AddOption.Reply | undefined;
+	let added: Wire.OptionAdded | undefined;
+	await Service.exclusive(plan, async () => {
+		let record = plan.records.get(msg.id);
+		let entry = Store.get(plan.questions, msg.id);
+		if (!record || !entry || record.status !== "open") {
+			outcome = {
+				kind: "question:option",
+				ts: 0,
+				id: msg.id,
+				ok: false,
+				reason: "resolved",
+				message: ADD_OPTION_REFUSAL.resolved,
+			};
+			return;
+		}
+		let applied = typeof msg.key === "string" && Object.hasOwn(record.appended ?? {}, msg.key)
+			? record.appended![msg.key]
+			: undefined;
+		let existing = applied
+			? entry.definition.questions[0].options.find(option => option.id === applied)
+			: undefined;
+		if (existing) {
+			outcome = {
+				kind: "question:option",
+				ts: 0,
+				id: msg.id,
+				ok: true,
+				option: existing,
+				definition: entry.definition,
+				repeated: true,
+			};
+			return;
+		}
+		if (entry.claim) {
+			outcome = {
+				kind: "question:option",
+				ts: 0,
+				id: msg.id,
+				ok: false,
+				reason: "resolving",
+				message: ADD_OPTION_REFUSAL.resolving,
+			};
+			return;
+		}
+
+		let result = Question.appendOption(entry.definition, {
+			question: msg.question,
+			key: msg.key,
+			label: msg.label,
+			...(msg.description === undefined ? {} : { description: msg.description }),
+		}, ulid());
+		if (!result.ok) {
+			outcome = {
+				kind: "question:option",
+				ts: 0,
+				id: msg.id,
+				ok: false,
+				reason: result.reason,
+				message: result.message,
+			};
+			return;
+		}
+
+		let previous = { record, definition: entry.definition };
+		let mutation: room.Mutation | undefined;
+		try {
+			mutation = room.appendQuestionOption(plan.document, msg.id, msg.question, result.option);
+		} catch (err) {
+			console.error("[questions] could not add the option to the plan:", err);
+			outcome = {
+				kind: "question:option",
+				ts: 0,
+				id: msg.id,
+				ok: false,
+				reason: "invalid",
+				message: "Could not add the option",
+			};
+			return;
+		}
+		plan.records.set(msg.id, {
+			...record,
+			definition: result.definition,
+			appended: { ...record.appended, [msg.key]: result.option.id },
+		});
+		Store.redefine(plan.questions, msg.id, result.definition);
+		try {
+			if (mutation) await Service.publish(plan, server, roomId, mutation);
+			else await Service.persistExclusive(plan);
+		} catch (err) {
+			plan.records.set(msg.id, previous.record);
+			Store.restoreDefinition(plan.questions, msg.id, previous.definition);
+			throw err;
+		}
+		outcome = {
+			kind: "question:option",
+			ts: 0,
+			id: msg.id,
+			ok: true,
+			option: result.option,
+			definition: result.definition,
+		};
+		added = {
+			kind: "question:option-added",
+			ts: 0,
+			id: msg.id,
+			question: msg.question,
+			option: result.option,
+			definition: result.definition,
+			by: ws.data.handle,
+		};
+	}).catch(err => {
+		console.error("[questions] could not save the option:", err);
+		outcome = undefined;
+		added = undefined;
+	});
+
+	if (!outcome) return fail(ws, msg.rid, "could not save the option");
+	reply(ws, msg.rid, outcome);
+	if (added) broadcast(server, roomId, added);
+}
+
 /**
  * Decline to answer.
  *
diff --git a/apps/server/src/questions/store.ts b/apps/server/src/questions/store.ts
index 33cb8cea..32069839 100644
--- a/apps/server/src/questions/store.ts
+++ b/apps/server/src/questions/store.ts
@@ -163,6 +163,35 @@ export function get(questions: Questions, id: string): Open | undefined {
 	return questions.open.get(id);
 }
 
+/**
+ * Replace an open question's definition with one that only appended options.
+ *
+ * Returns what to restore if the durable half fails, or why it is refused. The
+ * draft is untouched: its keys are created lazily, so existing drafts stay valid.
+ */
+export function redefine(
+	questions: Questions,
+	id: string,
+	definition: DecisionDefinition,
+): { ok: true; previous: DecisionDefinition } | { ok: false; reason: "resolved" | "resolving" } {
+	let entry = questions.open.get(id);
+	if (!entry) return { ok: false, reason: "resolved" };
+	if (entry.claim) return { ok: false, reason: "resolving" };
+	let previous = entry.definition;
+	entry.definition = definition;
+	return { ok: true, previous };
+}
+
+/** Undo `redefine` after its durable half failed. */
+export function restoreDefinition(
+	questions: Questions,
+	id: string,
+	definition: DecisionDefinition,
+): void {
+	let entry = questions.open.get(id);
+	if (entry) entry.definition = definition;
+}
+
 /** Everything still open, for a client that has just joined. */
 export function outstanding(
 	questions: Questions,
diff --git a/packages/protocol/question.d.ts b/packages/protocol/question.d.ts
index 753d6a3d..e22e5c9f 100644
--- a/packages/protocol/question.d.ts
+++ b/packages/protocol/question.d.ts
@@ -5,7 +5,9 @@ type KIND<K extends string> = Frame & { kind: K };
 /**
  * Collaborative questions.
  *
- * A questionnaire is immutable once asked. Its answer is not: it lives in a
+ * A questionnaire's definition is frozen once asked, with one exception: any
+ * member with write access may append an option while it is open (`AddOption`).
+ * Its answer is not frozen either: it lives in a
  * shared CRDT owned by the server, so everyone present converges on one draft
  * before somebody submits it back to the agent that is waiting on it.
  *
@@ -19,6 +21,7 @@ export declare namespace Question {
 		| Request<Edit.Ask>
 		| Request<Submit.Ask>
 		| Request<Cancel.Ask>
+		| Request<AddOption.Ask>
 		| Presence.Input;
 
 	export type Outgoing =
@@ -28,6 +31,8 @@ export declare namespace Question {
 		| Edit.Reply
 		| Submit.Reply
 		| Cancel.Reply
+		| AddOption.Reply
+		| OptionAdded
 		| Presence.Output
 		| Resolved;
 
@@ -203,6 +208,66 @@ export declare namespace Question {
 			);
 	}
 
+	export namespace AddOption {
+		/**
+		 * Append one option to an open question, for everyone.
+		 *
+		 * `key` is an idempotency token chosen by the client: repeating a request
+		 * with the same key returns the option already added instead of adding
+		 * another. The server mints the option's identity.
+		 */
+		export type Ask = KIND<"question:option"> & {
+			id: string;
+			question: string;
+			key: string;
+			label: string;
+			description?: string;
+		};
+
+		export type Refusal =
+			/** Malformed or out-of-bounds input. */
+			| "invalid"
+			/** An option with that label already exists. */
+			| "duplicate"
+			/** The question has reached its option limit. */
+			| "full"
+			/** The questionnaire is settled, or no longer exists. */
+			| "resolved"
+			/** A submit or cancel is already in flight. */
+			| "resolving"
+			/** An implementation run forbids plan and decision changes. */
+			| "implementation";
+
+		export type Reply =
+			& KIND<"question:option">
+			& { id: string }
+			& (
+				| {
+					ok: true;
+					option: Option;
+					/** The whole definition as it now stands. */
+					definition: DecisionDefinition;
+					/** True when this key had already been applied. */
+					repeated?: boolean;
+				}
+				| { ok: false; reason: Refusal; message: string }
+			);
+	}
+
+	/**
+	 * An option was appended, after it became durable.
+	 *
+	 * Carries the complete definition rather than a delta, so a duplicate or
+	 * late delivery is harmless.
+	 */
+	export type OptionAdded = KIND<"question:option-added"> & {
+		id: string;
+		question: string;
+		option: Option;
+		definition: DecisionDefinition;
+		by: string;
+	};
+
 	/** The questionnaire is closed. Nobody may answer it further. */
 	export type Resolved = KIND<"question:resolved"> & {
 		id: string;
diff --git a/packages/question/src/draft.ts b/packages/question/src/draft.ts
index 3d26556c..fa0036a2 100644
--- a/packages/question/src/draft.ts
+++ b/packages/question/src/draft.ts
@@ -124,11 +124,22 @@ export function read(model: Model, definition: Definition): Drafts {
 
 		let optionNode = node.get("options");
 		if (!(optionNode instanceof crdt.ObjNode)) reject(`${question.id}.options must be an object`);
-		keys(optionNode, question.options.map(option => option.id), `${question.id}.options`);
+		// Options can be appended after a draft exists, and a draft never has to
+		// be rewritten for it: a key is present only once somebody selects that
+		// option. Keys must still belong to the definition.
+		let known = new Set(question.options.map(option => option.id));
+		for (let key of optionNode.keys.keys()) {
+			if (!known.has(key)) reject(`${question.id}.options has invalid keys`);
+		}
 
 		let options: Record<string, boolean> = {};
 		for (let option of question.options) {
-			let selected = register(optionNode.get(option.id), `${question.id}.options.${option.id}`);
+			let node = optionNode.get(option.id);
+			if (node === undefined) {
+				options[option.id] = false;
+				continue;
+			}
+			let selected = register(node, `${question.id}.options.${option.id}`);
 			if (typeof selected !== "boolean") {
 				reject(`${question.id}.options.${option.id} must be a boolean LWW register`);
 			}
diff --git a/packages/question/src/index.ts b/packages/question/src/index.ts
index 3ca45f27..63ff6312 100644
--- a/packages/question/src/index.ts
+++ b/packages/question/src/index.ts
@@ -12,8 +12,8 @@
 
 export * as limits from "./limits";
 
-export { assertCallId, decision, normalize, QuestionError, reject } from "./schema";
-export type { Answer, DecisionDefinition, Definition, Item, Option } from "./schema";
+export { appendOption, assertCallId, decision, normalize, QuestionError, reject } from "./schema";
+export type { Answer, Appended, DecisionDefinition, Definition, Item, Option } from "./schema";
 
 export { answered, apply, assertPatch, create, read, restore } from "./draft";
 export type { Applied, Draft, Drafts, Mode, Model } from "./draft";
diff --git a/packages/question/src/limits.ts b/packages/question/src/limits.ts
index 7d622d0c..7a3fb939 100644
--- a/packages/question/src/limits.ts
+++ b/packages/question/src/limits.ts
@@ -7,12 +7,17 @@
 
 export const MAX_QUESTIONS = 10;
 export const MAX_OPTIONS = 20;
+/** The most options a question may hold once members start appending their own. */
+export const MAX_SHARED_OPTIONS = 10;
 export const MAX_HEADER = 80;
 export const MAX_QUESTION = 1_000;
 export const MAX_LABEL = 200;
 export const MAX_DESCRIPTION = 1_000;
 export const MAX_CUSTOM = 4_000;
 
+/** Longest idempotency key for appending an option. */
+export const MAX_KEY = 64;
+
 /** One collaborative edit to the shared draft. */
 export const MAX_PATCH_BYTES = 64 * 1024;
 
diff --git a/packages/question/src/question.test.ts b/packages/question/src/question.test.ts
index 2d3c929e..07901515 100644
--- a/packages/question/src/question.test.ts
+++ b/packages/question/src/question.test.ts
@@ -1,9 +1,9 @@
 import { describe, expect, it } from "bun:test";
 
 import { derive, incomplete, summarize } from "./answer";
-import { answered, assertPatch, create, read } from "./draft";
+import { answered, apply, assertPatch, create, crdt, read } from "./draft";
 import * as limits from "./limits";
-import { normalize, QuestionError } from "./schema";
+import { appendOption, normalize, QuestionError } from "./schema";
 
 import type { Definition } from "./schema";
 
@@ -84,10 +84,14 @@ describe("draft", () => {
 				header: "Other",
 				question: "?",
 				multiple: false,
-				options: [{ label: "a", description: "" }],
+				options: [{ label: "a", description: "" }, { label: "b", description: "" }, {
+					label: "c",
+					description: "",
+				}],
 			}],
 		});
-		// A draft built for one definition must not validate against another.
+		// A draft built for one definition must not validate against another:
+		// it may lack keys (options appended later) but never hold unknown ones.
 		expect(() => read(create(other), definition)).toThrow(QuestionError);
 	});
 
@@ -178,3 +182,86 @@ describe("derive", () => {
 		expect(summarize({ question: "?", custom: "Something else" })).toBe("Something else");
 	});
 });
+
+const KEY = "0123456789abcdef";
+
+describe("appendOption", () => {
+	let definition = normalize(tool());
+	let question = definition.questions[0]!.id;
+	let input = (label: unknown, extra: Record<string, unknown> = {}) => ({
+		question,
+		key: KEY,
+		label,
+		...extra,
+	});
+
+	it("returns a new frozen definition with the option last", () => {
+		let single = { questions: [definition.questions[0]!] as [(typeof definition.questions)[0]] };
+		let result = appendOption(single, input("  Shadow  ", { description: " dark " }), "NEW");
+		expect(result.ok).toBe(true);
+		if (!result.ok) return;
+		expect(result.option).toEqual({ id: "NEW", label: "Shadow", description: "dark" });
+		expect(result.definition.questions[0].options.map(option => option.id)).toEqual([
+			"o0",
+			"o1",
+			"NEW",
+		]);
+		expect(Object.isFrozen(result.definition.questions[0].options)).toBe(true);
+		// The original is untouched.
+		expect(single.questions[0].options).toHaveLength(2);
+	});
+
+	let single = { questions: [definition.questions[0]!] as [(typeof definition.questions)[0]] };
+
+	it("rejects empty, oversized, or non-text labels", () => {
+		for (let label of ["   ", "x".repeat(limits.MAX_LABEL + 1), 4, undefined]) {
+			let result = appendOption(single, input(label), "NEW");
+			expect(result.ok ? "ok" : result.reason).toBe("invalid");
+		}
+	});
+
+	it("rejects a case-insensitive duplicate", () => {
+		let result = appendOption(single, input("  canary "), "NEW");
+		expect(result.ok ? "ok" : result.reason).toBe("duplicate");
+	});
+
+	it("rejects an unknown question and a malformed key", () => {
+		expect(appendOption(single, { ...input("x"), question: "nope" }, "NEW").ok).toBe(false);
+		expect(appendOption(single, { ...input("x"), key: "short" }, "NEW").ok).toBe(false);
+	});
+
+	it("stops at the option limit", () => {
+		let current = single;
+		for (let index = 0; index < limits.MAX_SHARED_OPTIONS - 2; index++) {
+			let result = appendOption(current, input(`Extra ${index}`), `ID${index}`);
+			expect(result.ok).toBe(true);
+			if (result.ok) current = result.definition;
+		}
+		let result = appendOption(current, input("One more"), "LAST");
+		expect(result.ok ? "ok" : result.reason).toBe("full");
+	});
+
+	it("keeps an existing draft valid and lets the new option be chosen", () => {
+		let model = create(single);
+		let result = appendOption(single, input("Shadow"), "NEW");
+		if (!result.ok) throw new Error("append failed");
+
+		// The old draft reads against the larger definition; the new option is unselected.
+		let drafts = read(model, result.definition);
+		expect(drafts[question]!.options).toEqual({ o0: false, o1: false, NEW: false });
+
+		// A client selects it by creating its key.
+		let fork = model.fork();
+		fork.api.obj([question, "options"]).set({
+			NEW: crdt.schema.val(crdt.schema.con(true)),
+		});
+		let patch = fork.api.flush();
+		let applied = apply(model, result.definition, [...patch.toBinary()]);
+		expect(applied.ok).toBe(true);
+		if (!applied.ok) return;
+		expect(read(applied.model, result.definition)[question]!.options.NEW).toBe(true);
+
+		// Against the old definition the same patch is an unknown key.
+		expect(apply(model, single, [...patch.toBinary()]).ok).toBe(false);
+	});
+});
diff --git a/packages/question/src/schema.ts b/packages/question/src/schema.ts
index 659253bd..f20bee32 100644
--- a/packages/question/src/schema.ts
+++ b/packages/question/src/schema.ts
@@ -4,7 +4,10 @@
  * A definition comes from an agent tool call, so it is untrusted input: this
  * module is what turns it into something the rest of the system can rely on.
  * Definitions are frozen once accepted — an answer only means anything against
- * the exact question that was asked.
+ * the exact question that was asked. The single exception is `appendOption`:
+ * while a question is open, members may add options. That never changes the
+ * meaning of an existing option or of a choice already made, and each append
+ * yields a new frozen definition rather than mutating the old one.
  */
 
 import * as limits from "./limits";
@@ -129,6 +132,68 @@ export function decision(definition: Definition): DecisionDefinition {
 	return definition as DecisionDefinition;
 }
 
+export type Appended =
+	| { ok: true; definition: DecisionDefinition; option: Option }
+	| {
+		ok: false;
+		reason: "invalid" | "duplicate" | "full";
+		message: string;
+	};
+
+const KEY = /^[A-Za-z0-9_-]{8,64}$/;
+
+/**
+ * Append one option to a decision's only question.
+ *
+ * Pure: the caller mints `id`, persists the result, and decides who may call
+ * this. Validation happens here so the server and any client that wants to
+ * warn early apply identical bounds.
+ */
+export function appendOption(
+	definition: DecisionDefinition,
+	input: { question: string; key: string; label: unknown; description?: unknown },
+	id: string,
+): Appended {
+	let [item] = definition.questions;
+	if (!item || item.id !== input.question) {
+		return { ok: false, reason: "invalid", message: "Unknown question" };
+	}
+	if (typeof input.key !== "string" || !KEY.test(input.key)) {
+		return { ok: false, reason: "invalid", message: "Option request key is invalid" };
+	}
+
+	let label: string;
+	let description: string;
+	try {
+		label = text(input.label, "Option", limits.MAX_LABEL);
+		description = input.description === undefined
+			? ""
+			: text(input.description, "Option description", limits.MAX_DESCRIPTION, true);
+	} catch (err) {
+		return { ok: false, reason: "invalid", message: (err as Error).message };
+	}
+
+	let folded = label.toLowerCase();
+	if (item.options.some(option => option.label.trim().toLowerCase() === folded)) {
+		return { ok: false, reason: "duplicate", message: "That option already exists" };
+	}
+	if (item.options.length >= limits.MAX_SHARED_OPTIONS) {
+		return {
+			ok: false,
+			reason: "full",
+			message: `A question can have at most ${limits.MAX_SHARED_OPTIONS} options`,
+		};
+	}
+	if (item.options.some(option => option.id === id)) {
+		return { ok: false, reason: "invalid", message: "Option id is already in use" };
+	}
+
+	let option: Option = Object.freeze({ id, label, description });
+	let options = Object.freeze([...item.options, option]);
+	let next = Object.freeze({ ...item, options }) as Item;
+	return { ok: true, option, definition: Object.freeze({ questions: Object.freeze([next]) }) as DecisionDefinition };
+}
+
 /** Reject a tool call id that could not have come from the SDK. */
 export function assertCallId(id: string): void {
 	if (!id || id.length > limits.MAX_CALL_ID) fail("Question tool call ID is invalid");

From caa73ee593b32e12f6f9ba0f800076b463ca8782 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Wed, 30 Sep 2026 21:48:23 +0100
Subject: [PATCH 04/10] Allow for decision-card reflow in the resized-tab
 scroll check

The decision cards at the foot of the scroller wrap to more lines at 320px
than the old card did, so the bottom distance settles at 40px (was exactly
24px). Bound it at 64px; a moved document is hundreds of pixels.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 e2e/responsive-content.e2e.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/e2e/responsive-content.e2e.ts b/e2e/responsive-content.e2e.ts
index 98229fb4..e0165cfc 100644
--- a/e2e/responsive-content.e2e.ts
+++ b/e2e/responsive-content.e2e.ts
@@ -465,9 +465,12 @@ test("a selected tab follows strip layout changes without moving the document",
 	await expectTabInsideStrip(tabs.last());
 	await page.setViewportSize({ width: 320, height: 844 });
 	await expectTabInsideStrip(tabs.last());
+	// Scroll anchoring follows the reflow, but the wrapped decision cards at the
+	// foot of the scroller still add a few lines of drift. A regression that
+	// moved the document would be hundreds of pixels, not dozens.
 	await expect.poll(() =>
 		scroller.evaluate(node => node.scrollHeight - node.clientHeight - node.scrollTop)
-	).toBeLessThanOrEqual(24);
+	).toBeLessThanOrEqual(64);
 });
 
 test("rich surfaces stay contained within their document or callout", async ({ join, page, seed }) => {

From 48125555f5d70a2deb020019cdd829931baf61d3 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Wed, 30 Sep 2026 21:49:18 +0100
Subject: [PATCH 05/10] Renew the design-contract hash for the question view

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 scripts/design-contract/exceptions/dynamic-packages.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/design-contract/exceptions/dynamic-packages.json b/scripts/design-contract/exceptions/dynamic-packages.json
index d0656646..4570dbb8 100644
--- a/scripts/design-contract/exceptions/dynamic-packages.json
+++ b/scripts/design-contract/exceptions/dynamic-packages.json
@@ -32,7 +32,7 @@
 				1
 			]
 		],
-		"sourceHash": "da4c57bf8133585e245f6a448ab85e329138b297bfeec1863dac9af4cfdafc5d"
+		"sourceHash": "15795480ba9432b57dd47d200c919320f83019535b3ec44994040c724ff8da7b"
 	},
 	{
 		"file": "packages/icons/src/icon.tsx",

From e05657a735b2695cf2b148200478b1d224c3e83a Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Wed, 30 Sep 2026 21:51:46 +0100
Subject: [PATCH 06/10] Add an option appends a shared option for everyone

The add row is now a button that opens a focused field: Enter adds for the
whole room, Escape cancels, the new row shows dimmed while pending and a
rejection reopens the field with an error callout. Existing custom drafts
still render as a selected row.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 AGENTS.md                                     |  10 +
 apps/web/src/theme.css                        |  29 +-
 packages/dialect/src/nodes/questionnaire.ts   |   6 +-
 packages/editor/src/widgets/questionnaire.tsx |   5 +-
 packages/question/src/question.test.ts        |   2 +-
 packages/question/src/react/index.ts          |   7 +-
 .../question/src/react/question-view.test.ts  |  28 +-
 packages/question/src/react/question-view.tsx | 257 +++++++++++++-----
 .../question/src/react/shared-options.test.ts | 147 ++++++++++
 .../question/src/react/use-questionnaire.ts   |  70 ++++-
 packages/question/src/schema.ts               |   6 +-
 .../exceptions/dynamic-editor.json            |   2 +-
 .../exceptions/dynamic-packages.json          |   6 +-
 13 files changed, 493 insertions(+), 82 deletions(-)
 create mode 100644 packages/question/src/react/shared-options.test.ts

diff --git a/AGENTS.md b/AGENTS.md
index fd430be3..90ba88b9 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -148,6 +148,16 @@ path does not restore it after a storage error. Treat this as a known durability
 gap: a proper two-phase refactor must retain or restore the draft until the
 fenced commit succeeds.
 
+A decision's definition is frozen except for appended options. Any writer may
+send `question:option` to add one while the question is open (at most 10 options,
+no case-insensitive duplicate label). The server changes the sidecar record, the
+open entry, and the plan `Option` projection together under the plan queue,
+commits, and only then acknowledges and broadcasts `question:option-added`. The
+client's `key` makes a retry return the same option. Shared drafts need no
+rewrite: an option has a register only once someone selects it. New free-text
+custom answers are not offered; an existing `custom` draft or answer still
+renders and derives.
+
 Anchors combine Yjs relative positions with canonical block digests. A position
 survives surrounding edits; a digest can recover one unique block after a move
 or epoch replacement. Ambiguous matches must orphan rather than guess. The safe
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index 7d7ad924..92095618 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -627,7 +627,7 @@ body {
 	padding-block: 0.5rem;
 }
 
-.question-custom-answer {
+.question-field {
 	scroll-margin-block-end: calc(var(--keyboard-inset, 0px) + 1rem);
 }
 
@@ -821,6 +821,33 @@ label.question-option:has(.question-input:not(:disabled)) {
 	color: var(--color-text-secondary);
 }
 
+/* The add row is a real button, not a label around a hidden input. */
+button.question-add {
+	inline-size: 100%;
+	border: 0;
+	background: transparent;
+	text-align: start;
+	cursor: pointer;
+}
+
+button.question-add:not(:disabled):hover {
+	background: var(--color-hover);
+}
+
+button.question-add:focus-visible {
+	outline: var(--focus-ring-width) solid var(--focus-ring-color);
+	outline-offset: var(--focus-ring-offset);
+}
+
+button.question-add:disabled {
+	cursor: default;
+}
+
+/* The new option, shown before the server confirms it. */
+.question-pending {
+	opacity: 0.6;
+}
+
 .question-adding {
 	outline: var(--edge-width) solid var(--color-control-edge);
 	outline-offset: calc(-1 * var(--edge-width));
diff --git a/packages/dialect/src/nodes/questionnaire.ts b/packages/dialect/src/nodes/questionnaire.ts
index 677c3079..814b6e6e 100644
--- a/packages/dialect/src/nodes/questionnaire.ts
+++ b/packages/dialect/src/nodes/questionnaire.ts
@@ -2,9 +2,9 @@
  * Durable questionnaires.
  *
  * Unlike the other containers this is atomic. A questionnaire's definition is
- * immutable once created, and its answer is owned by the sidecar record rather
- * than by the document, so there is nothing inside it for two people to edit
- * concurrently. Modelling it as a decorator keeps it selectable, movable and
+ * fixed once created apart from options the server appends while it is open,
+ * and its answer is owned by the sidecar record rather than by the document, so
+ * there is nothing inside it for two people to edit concurrently. Modelling it as a decorator keeps it selectable, movable and
  * deletable as one unit while making its contents unwritable by construction.
  *
  * The `<Answer>` written into source is a projection for readability. The
diff --git a/packages/editor/src/widgets/questionnaire.tsx b/packages/editor/src/widgets/questionnaire.tsx
index 5b53e49a..97473c3f 100644
--- a/packages/editor/src/widgets/questionnaire.tsx
+++ b/packages/editor/src/widgets/questionnaire.tsx
@@ -1,8 +1,8 @@
 /**
  * A questionnaire, as the decisions pane shows it.
  *
- * The definition is immutable and the answer is owned by the server's record,
- * so this never writes to the document — an agent rewriting the plan cannot
+ * The definition only ever grows by appended options and the answer is owned by
+ * the server's record, so this never writes to the document — an agent rewriting the plan cannot
  * overwrite a decision. What the plan node carries is a projection, kept so
  * the source reads correctly on its own.
  */
@@ -187,6 +187,7 @@ function Undecided(
 				drafts={state.drafts}
 				error={state.error}
 				errorClassName="editor-motion-feedback"
+				onAddOption={editable ? state.addOption : undefined}
 				onCancel={editable ? state.cancel : undefined}
 				onChange={editable ? state.change : undefined}
 				onSubmit={editable ? state.submit : undefined}
diff --git a/packages/question/src/question.test.ts b/packages/question/src/question.test.ts
index 07901515..9c6d9b97 100644
--- a/packages/question/src/question.test.ts
+++ b/packages/question/src/question.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from "bun:test";
 
 import { derive, incomplete, summarize } from "./answer";
-import { answered, apply, assertPatch, create, crdt, read } from "./draft";
+import { answered, apply, assertPatch, crdt, create, read } from "./draft";
 import * as limits from "./limits";
 import { appendOption, normalize, QuestionError } from "./schema";
 
diff --git a/packages/question/src/react/index.ts b/packages/question/src/react/index.ts
index 57b7351d..4fbc7a01 100644
--- a/packages/question/src/react/index.ts
+++ b/packages/question/src/react/index.ts
@@ -6,6 +6,11 @@
  */
 
 export { QuestionView } from "./question-view";
-export type { Collaborator, QuestionStepRenderProps, QuestionViewProps } from "./question-view";
+export type {
+	AddOptionResult,
+	Collaborator,
+	QuestionStepRenderProps,
+	QuestionViewProps,
+} from "./question-view";
 export { forget, useQuestionnaire } from "./use-questionnaire";
 export type { QuestionnaireOptions, QuestionnaireState, Transport } from "./use-questionnaire";
diff --git a/packages/question/src/react/question-view.test.ts b/packages/question/src/react/question-view.test.ts
index fa5f404a..ba618d37 100644
--- a/packages/question/src/react/question-view.test.ts
+++ b/packages/question/src/react/question-view.test.ts
@@ -106,15 +106,39 @@ test("options carry letter tiles and the last row offers to add one", () => {
 	expect(markup).not.toContain("Write a custom answer");
 });
 
-test("an existing custom answer opens the add row as a field with the next letter", () => {
+test("an existing custom answer still renders, as a selected row before the add row", () => {
 	let markup = renderToStaticMarkup(createElement(QuestionView, {
 		definition: { questions: [ROLLOUT] },
 		drafts: { rollout: { mode: "custom", choice: "", options: {}, custom: "Opt-in beta" } },
+		onAddOption: async () => ({ ok: true as const }),
 	}));
 
-	expect(markup).toContain("<textarea");
+	expect(markup).not.toContain("<textarea");
 	expect(markup).toContain("Opt-in beta");
 	expect(markup).toContain(">C<");
+	expect(markup.indexOf("Opt-in beta")).toBeLessThan(markup.lastIndexOf("Add an option"));
+	expect(markup).toContain('checked=""');
+});
+
+test("the add row is disabled without a handler and hidden at the option limit", () => {
+	let view = (options: typeof ROLLOUT.options, onAddOption?: () => Promise<{ ok: true }>) =>
+		renderToStaticMarkup(createElement(QuestionView, {
+			definition: { questions: [{ ...ROLLOUT, options }] },
+			drafts: {},
+			onAddOption,
+		}));
+
+	expect(view(ROLLOUT.options)).toMatch(/question-add"[^>]*disabled/);
+	expect(view(ROLLOUT.options, async () => ({ ok: true }))).not.toMatch(
+		/question-add"[^>]*disabled/,
+	);
+
+	let full = Array.from({ length: 10 }, (_, index) => ({
+		id: `o${index}`,
+		label: `Option ${index}`,
+		description: "",
+	}));
+	expect(view(full, async () => ({ ok: true }))).not.toContain("Add an option");
 });
 
 test("a multiple-choice question says so once, under its title", () => {
diff --git a/packages/question/src/react/question-view.tsx b/packages/question/src/react/question-view.tsx
index 704ef660..93a883cc 100644
--- a/packages/question/src/react/question-view.tsx
+++ b/packages/question/src/react/question-view.tsx
@@ -12,6 +12,8 @@
 import { useEffect, useId, useRef, useState } from "react";
 import { CheckIcon, ChevronIcon, DecisionIcon, PlusIcon, WarningIcon } from "@chopin/icons";
 
+import { MAX_LABEL, MAX_SHARED_OPTIONS } from "../limits";
+
 import type { ReactNode } from "react";
 import type { Draft, Drafts } from "../draft";
 import type { Answer, Definition, Item } from "../schema";
@@ -23,6 +25,8 @@ export type Collaborator = {
 	question?: string;
 };
 
+export type AddOptionResult = { ok: true } | { ok: false; message: string };
+
 export type QuestionStepRenderProps = {
 	children: ReactNode;
 	question: string;
@@ -35,6 +39,11 @@ export type QuestionViewProps = {
 	onChange?: (question: string, change: Partial<Draft>) => void;
 	onSubmit?: () => void;
 	onCancel?: () => void;
+	/**
+	 * Append an option for everyone. Absent where the viewer may not write; the
+	 * row is then shown disabled. Resolves once the server has made it durable.
+	 */
+	onAddOption?: (question: string, label: string) => Promise<AddOptionResult>;
 	disabled?: boolean;
 	submitting?: boolean;
 	status?: "open" | "answered" | "cancelled";
@@ -164,25 +173,64 @@ function Choices(
 	);
 }
 
-/** The last row: a prompt to add an option, which becomes the field for it. */
-function Custom(
-	{ question, draft, disabled, name, onChange }: {
+/**
+ * An open draft that was already in free-text mode before options became
+ * shared. Shown as the selected row it was; choosing any option leaves it, and
+ * nothing new can enter this mode.
+ */
+function LegacyCustom(
+	{ question, draft, name }: { question: Item; draft: Draft; name: string },
+) {
+	return (
+		<label className="question-choice-row question-option">
+			<input
+				type={question.multiple ? "checkbox" : "radio"}
+				name={question.multiple ? undefined : name}
+				checked
+				onChange={() => {}}
+				className="question-input"
+			/>
+			<Key>{letter(question.options.length)}</Key>
+			<span className="question-text">
+				<span className="question-label">{draft.custom.trim()}</span>
+			</span>
+			<span aria-hidden="true" className="question-check">
+				<CheckIcon />
+			</span>
+		</label>
+	);
+}
+
+/**
+ * The last row: a prompt to add an option, which becomes the field for it.
+ *
+ * Enter adds it for everyone, Escape cancels. The new row is shown straight
+ * away, dimmed, until the server confirms it; a rejection reopens the field
+ * with the text intact.
+ */
+function AddOption(
+	{ question, offset, disabled, onAdd, onFailed }: {
 		question: Item;
-		draft: Draft | undefined;
+		/** Rows already shown below the options, such as a legacy custom answer. */
+		offset: number;
 		disabled: boolean;
-		name: string;
-		onChange?: (change: Partial<Draft>) => void;
+		onAdd?: (label: string) => Promise<AddOptionResult>;
+		onFailed: (message: string | undefined) => void;
 	},
 ) {
-	let active = draft?.mode === "custom";
-	let textarea = useRef<HTMLTextAreaElement>(null);
-	let focusOnReveal = useRef(false);
+	let [text, setText] = useState<string | null>(null);
+	let [pending, setPending] = useState<string | null>(null);
+	let input = useRef<HTMLInputElement>(null);
+	let trigger = useRef<HTMLButtonElement>(null);
+	let focus = useRef<"field" | "trigger">(undefined);
+	let letterIndex = question.options.length + offset;
 
 	useEffect(() => {
-		if (!active || !focusOnReveal.current) return;
-		focusOnReveal.current = false;
-		textarea.current?.focus();
-	}, [active]);
+		let target = focus.current;
+		focus.current = undefined;
+		if (target === "field") input.current?.focus();
+		else if (target === "trigger") trigger.current?.focus();
+	});
 
 	useEffect(() => {
 		let viewport = window.visualViewport;
@@ -191,7 +239,7 @@ function Custom(
 		let reveal = () => {
 			let previous = height;
 			height = viewport.height;
-			let control = textarea.current;
+			let control = input.current;
 			if (height >= previous || document.activeElement !== control || !control) return;
 			let bounds = control.getBoundingClientRect();
 			let top = viewport.offsetTop;
@@ -204,49 +252,102 @@ function Custom(
 		return () => viewport.removeEventListener("resize", reveal);
 	}, []);
 
-	if (!active) {
+	let add = async () => {
+		let label = text?.trim();
+		if (!label || !onAdd || pending !== null) return;
+		setPending(label);
+		onFailed(undefined);
+		let result: AddOptionResult;
+		try {
+			result = await onAdd(label);
+		} catch {
+			result = { ok: false, message: "Could not add this option." };
+		}
+		setPending(null);
+		if (result.ok) {
+			setText(null);
+			focus.current = "trigger";
+		} else {
+			onFailed(result.message);
+			focus.current = "field";
+		}
+	};
+
+	// Until the server confirms, the new row stands where the field was.
+	if (pending !== null) {
+		let known = question.options.some(option =>
+			option.label.trim().toLowerCase() === pending.toLowerCase()
+		);
+		if (!known) {
+			return (
+				<div
+					aria-busy="true"
+					className="question-choice-row question-option question-pending"
+				>
+					<Key>{letter(letterIndex)}</Key>
+					<span className="question-text">
+						<span className="question-label">{pending}</span>
+					</span>
+					<span className="sr-only" role="status">Adding option</span>
+				</div>
+			);
+		}
+	}
+
+	if (text === null) {
 		return (
-			<label className="question-choice-row question-option question-add">
-				<input
-					type={question.multiple ? "checkbox" : "radio"}
-					name={question.multiple ? undefined : name}
-					checked={false}
-					disabled={disabled}
-					aria-label="Add an option"
-					onChange={() => {
-						focusOnReveal.current = true;
-						onChange?.({ mode: "custom" });
-					}}
-					className="question-input"
-				/>
+			<button
+				type="button"
+				className="question-choice-row question-option question-add"
+				data-press="wide"
+				disabled={disabled || !onAdd}
+				onClick={() => {
+					focus.current = "field";
+					setText("");
+				}}
+				ref={trigger}
+			>
 				<Key>
 					<PlusIcon />
 				</Key>
 				<span className="question-text">Add an option</span>
-			</label>
+			</button>
 		);
 	}
 
 	return (
 		<div className="question-choice-row question-option question-adding">
-			<Key>{letter(question.options.length)}</Key>
-			<textarea
-				rows={1}
-				maxLength={4000}
-				value={draft?.custom ?? ""}
+			<Key>{letter(letterIndex)}</Key>
+			<input
+				aria-label="New option"
+				autoComplete="off"
+				className="question-field"
 				disabled={disabled}
-				aria-label="Add an option"
-				placeholder="Add an option"
-				onChange={event => onChange?.({ custom: event.currentTarget.value })}
+				maxLength={MAX_LABEL}
+				onBlur={() => {
+					// Only an empty field collapses by itself. Typed text is kept, because
+					// adding an option is visible to everyone and should be deliberate.
+					if (!text.trim()) setText(null);
+				}}
+				onChange={event => {
+					setText(event.currentTarget.value);
+					onFailed(undefined);
+				}}
 				onKeyDown={event => {
-					if (event.key === "Escape") onChange?.({ mode: "choices" });
-					else if (event.key === "Enter" && !event.shiftKey) {
+					if (event.key === "Escape") {
 						event.preventDefault();
-						event.currentTarget.blur();
+						event.stopPropagation();
+						setText(null);
+						onFailed(undefined);
+						focus.current = "trigger";
+					} else if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+						event.preventDefault();
+						void add();
 					}
 				}}
-				className="question-custom-answer question-field"
-				ref={textarea}
+				placeholder="Add an option"
+				ref={input}
+				value={text}
 			/>
 		</div>
 	);
@@ -380,6 +481,26 @@ function Cancelled({ resolver }: { resolver?: string }) {
 	);
 }
 
+function Callout(
+	{ feedback, message, title }: { feedback?: string; message: string; title: string },
+) {
+	return (
+		<div
+			className={`plan-research-callout question-callout${feedback ? ` ${feedback}` : ""}`}
+			data-motion-feedback={feedback ? "alert" : undefined}
+			role="alert"
+		>
+			<span aria-hidden="true" className="plan-research-badge">
+				<WarningIcon />
+			</span>
+			<p>
+				<strong>{title}</strong>
+				{message}
+			</p>
+		</div>
+	);
+}
+
 export function QuestionView(props: QuestionViewProps) {
 	let {
 		definition,
@@ -387,6 +508,7 @@ export function QuestionView(props: QuestionViewProps) {
 		onChange,
 		onSubmit,
 		onCancel,
+		onAddOption,
 		disabled = false,
 		submitting = false,
 		status = "open",
@@ -413,6 +535,7 @@ export function QuestionView(props: QuestionViewProps) {
 	// Discarding cannot be undone and the agent is waiting, so it takes a
 	// second, deliberate click rather than a modal nobody reads.
 	let [confirming, setConfirming] = useState(false);
+	let [addError, setAddError] = useState<string>();
 	let previous = useRef<HTMLButtonElement>(null);
 	let next = useRef<HTMLButtonElement>(null);
 	let refocus = useRef<"previous" | "next">(undefined);
@@ -464,6 +587,7 @@ export function QuestionView(props: QuestionViewProps) {
 		let question = definition.questions[index + offset];
 		if (!question) return;
 		setActive(question.id);
+		setAddError(undefined);
 		let arrived = index + offset;
 		if (arrived === 0) refocus.current = "next";
 		else if (arrived === total - 1) refocus.current = "previous";
@@ -526,13 +650,27 @@ export function QuestionView(props: QuestionViewProps) {
 								name={`${base}-${current.id}`}
 								onChange={change => onChange?.(current.id, change)}
 							/>
-							<Custom
-								question={current}
-								draft={drafts[current.id]}
-								disabled={disabled}
-								name={`${base}-${current.id}`}
-								onChange={change => onChange?.(current.id, change)}
-							/>
+							{drafts[current.id]?.mode === "custom" && drafts[current.id]!.custom.trim() && (
+								<LegacyCustom
+									question={current}
+									draft={drafts[current.id]!}
+									name={`${base}-${current.id}`}
+								/>
+							)}
+							{current.options.length < MAX_SHARED_OPTIONS && (
+								<AddOption
+									key={current.id}
+									question={current}
+									offset={drafts[current.id]?.mode === "custom" && drafts[current.id]!.custom.trim()
+										? 1
+										: 0}
+									disabled={disabled}
+									onAdd={onAddOption
+										? label => onAddOption(current.id, label)
+										: undefined}
+									onFailed={setAddError}
+								/>
+							)}
 						</fieldset>
 					</section>
 				);
@@ -540,22 +678,13 @@ export function QuestionView(props: QuestionViewProps) {
 				return renderStep ? renderStep({ children: panel, question: current.id }) : panel;
 			})()}
 
+			{addError && <Callout title="Couldn’t add option" message={addError} />}
 			{error && (
-				<div
-					className={`plan-research-callout question-callout${
-						errorClassName ? ` ${errorClassName}` : ""
-					}`}
-					data-motion-feedback={errorClassName ? "alert" : undefined}
-					role="alert"
-				>
-					<span aria-hidden="true" className="plan-research-badge">
-						<WarningIcon />
-					</span>
-					<p>
-						<strong>Couldn’t save</strong>
-						{error}
-					</p>
-				</div>
+				<Callout
+					feedback={errorClassName}
+					message={error}
+					title="Couldn’t save"
+				/>
 			)}
 
 			{(onSubmit || onCancel || multiple) && (
diff --git a/packages/question/src/react/shared-options.test.ts b/packages/question/src/react/shared-options.test.ts
new file mode 100644
index 00000000..8cf30141
--- /dev/null
+++ b/packages/question/src/react/shared-options.test.ts
@@ -0,0 +1,147 @@
+import { describe, expect, it } from "bun:test";
+
+import { appendOption, create, decision, normalize } from "../index";
+import { QuestionnaireController } from "./use-questionnaire";
+
+import type { Transport } from "./use-questionnaire";
+
+const single = decision(normalize({
+	questions: [{
+		header: "Rollout",
+		question: "How should we deploy?",
+		multiple: false,
+		options: [
+			{ label: "Canary", description: "Small percentage first." },
+			{ label: "Blue-green", description: "" },
+		],
+	}],
+}));
+
+function sharing(replies: Array<"lost" | "refuse" | "accept"> = ["accept"]) {
+	let asks: Array<Record<string, unknown>> = [];
+	let handlers = new Map<string, Set<(event: never) => void>>();
+	let model = create(single);
+	let grown = single;
+	let next = [...replies];
+	let value = {
+		async ask(kind: string, payload: Record<string, unknown>) {
+			if (kind === "question:open") {
+				return {
+					open: true,
+					definition: grown,
+					model: [...model.toBinary()],
+					revision: 0,
+					presence: [],
+				};
+			}
+			if (kind === "question:edit") {
+				return { open: true, accepted: true, applied: false, revision: 1 };
+			}
+			if (kind === "question:option") {
+				asks.push(payload);
+				let mode = next.shift() ?? "accept";
+				if (mode === "lost") throw new Error("timeout");
+				if (mode === "refuse") {
+					return { ok: false, reason: "duplicate", message: "That option already exists" };
+				}
+				let result = appendOption(grown, {
+					question: "q0",
+					key: payload.key as string,
+					label: payload.label,
+				}, `n${asks.length}`);
+				if (!result.ok) throw new Error("unexpected");
+				grown = result.definition;
+				return { ok: true, option: result.option, definition: grown };
+			}
+			throw new Error(`Unexpected ${kind}`);
+		},
+		send() {},
+		on(kind: string, handler: (event: never) => void) {
+			let set = handlers.get(kind);
+			if (!set) handlers.set(kind, set = new Set());
+			set.add(handler);
+			return () => set.delete(handler);
+		},
+	} as unknown as Transport;
+	let emit = (kind: string, event: unknown) => {
+		for (let handler of handlers.get(kind) ?? []) handler(event as never);
+	};
+	return { value, asks, emit };
+}
+
+async function started(bridge: Transport) {
+	let controller = new QuestionnaireController(bridge, "question-1", single, true);
+	let off = controller.subscribe(() => {});
+	await new Promise(resolve => setTimeout(resolve, 0));
+	return { controller, off };
+}
+
+describe("shared options", () => {
+	it("takes the definition from the acknowledgement", async () => {
+		let bridge = sharing();
+		let { controller, off } = await started(bridge.value);
+
+		let result = await controller.addOption("q0", "Shadow");
+
+		expect(result).toEqual({ ok: true });
+		expect(controller.getSnapshot().definition!.questions[0]!.options.map(option => option.label))
+			.toEqual(["Canary", "Blue-green", "Shadow"]);
+		off();
+	});
+
+	it("surfaces a refusal without changing the definition", async () => {
+		let bridge = sharing(["refuse"]);
+		let { controller, off } = await started(bridge.value);
+
+		expect(await controller.addOption("q0", "canary")).toEqual({
+			ok: false,
+			message: "That option already exists",
+		});
+		expect(controller.getSnapshot().definition!.questions[0]!.options).toHaveLength(2);
+		off();
+	});
+
+	it("repeats the same key when the same text is retried after a lost reply", async () => {
+		let bridge = sharing(["lost", "accept"]);
+		let { controller, off } = await started(bridge.value);
+
+		expect((await controller.addOption("q0", "Shadow")).ok).toBe(false);
+		expect((await controller.addOption("q0", "Shadow")).ok).toBe(true);
+		expect(bridge.asks[0]!.key).toBe(bridge.asks[1]!.key);
+
+		await controller.addOption("q0", "Another");
+		expect(bridge.asks[2]!.key).not.toBe(bridge.asks[0]!.key);
+		off();
+	});
+
+	it("shows an option another member added and never goes back", async () => {
+		let bridge = sharing();
+		let { controller, off } = await started(bridge.value);
+		let added = appendOption(single, { question: "q0", key: "0123456789", label: "Theirs" }, "x1");
+		if (!added.ok) throw new Error("append failed");
+
+		bridge.emit("question:option-added", { id: "question-1", definition: added.definition });
+		let options = () => controller.getSnapshot().definition!.questions[0]!.options;
+		expect(options().map(option => option.label)).toEqual(["Canary", "Blue-green", "Theirs"]);
+
+		// A late, older copy of the definition is ignored.
+		bridge.emit("question:option-added", { id: "question-1", definition: single });
+		expect(options()).toHaveLength(3);
+		// Another questionnaire's event is not ours.
+		bridge.emit("question:option-added", { id: "other", definition: single });
+		expect(options()).toHaveLength(3);
+		off();
+	});
+
+	it("lets a draft select an option that has no register yet", async () => {
+		let bridge = sharing();
+		let { controller, off } = await started(bridge.value);
+		await controller.addOption("q0", "Shadow");
+
+		controller.change("q0", { options: { n1: true } });
+		await new Promise(resolve => setTimeout(resolve, 0));
+
+		expect(controller.getSnapshot().drafts.q0?.options.n1).toBe(true);
+		off();
+	});
+});
diff --git a/packages/question/src/react/use-questionnaire.ts b/packages/question/src/react/use-questionnaire.ts
index adda5072..48f33b25 100644
--- a/packages/question/src/react/use-questionnaire.ts
+++ b/packages/question/src/react/use-questionnaire.ts
@@ -17,7 +17,7 @@ import { crdt } from "../draft";
 import { decision } from "../schema";
 
 import type { DecisionDefinition, Definition, Drafts } from "../index";
-import type { Collaborator } from "./question-view";
+import type { AddOptionResult, Collaborator } from "./question-view";
 
 type Unsubscribe = () => void;
 
@@ -41,11 +41,13 @@ export type QuestionnaireState = {
 	submit: () => void;
 	/** Decline to answer. Terminal — the agent stops waiting. */
 	cancel: () => void;
+	/** Append an option for everyone; resolves once the server has made it durable. */
+	addOption: (question: string, label: string) => Promise<AddOptionResult>;
 	/** Set when submission stopped on an unanswered question. */
 	focus: string | undefined;
 };
 
-type Snapshot = Omit<QuestionnaireState, "change" | "submit" | "cancel"> & {
+type Snapshot = Omit<QuestionnaireState, "change" | "submit" | "cancel" | "addOption"> & {
 	closed: boolean;
 };
 type Model = crdt.Model<crdt.JsonNode<Drafts>>;
@@ -82,6 +84,8 @@ export class QuestionnaireController {
 	#connected: boolean;
 	#active = false;
 	#terminal = false;
+	/** The last add request, so a retry of the same text repeats its key. */
+	#adding: { question: string; label: string; key: string } | undefined;
 
 	constructor(
 		bridge: Transport | undefined,
@@ -150,8 +154,15 @@ export class QuestionnaireController {
 			}
 			if (patch.options !== undefined) {
 				doc.api.val([question, "mode"]).set("choices");
+				let held = (doc.view() as Drafts)[question]?.options ?? {};
 				for (let [option, value] of Object.entries(patch.options as Record<string, boolean>)) {
-					doc.api.val([question, "options", option]).set(value);
+					// An option appended after this draft began has no register yet.
+					if (Object.hasOwn(held, option)) doc.api.val([question, "options", option]).set(value);
+					else {
+						doc.api.obj([question, "options"]).set({
+							[option]: crdt.schema.val(crdt.schema.con(value)),
+						});
+					}
 				}
 			}
 			if (patch.custom !== undefined) {
@@ -238,6 +249,54 @@ export class QuestionnaireController {
 			});
 	};
 
+	addOption = async (question: string, label: string): Promise<AddOptionResult> => {
+		if (!this.bridge || this.#snapshot.closed || this.#terminal) {
+			return { ok: false, message: "This question is no longer open." };
+		}
+		// A retry of the same text after a lost reply must not add a second option.
+		let last = this.#adding;
+		let key = last && last.question === question && last.label === label
+			? last.key
+			: crypto.randomUUID();
+		this.#adding = { question, label, key };
+
+		let reply: {
+			ok?: boolean;
+			message?: string;
+			definition?: Definition;
+		};
+		try {
+			reply = await this.bridge.ask("question:option", {
+				id: this.id,
+				question,
+				key,
+				label,
+			}) as never;
+		} catch {
+			return { ok: false, message: "Could not add this option. Try again." };
+		}
+		if (!reply.ok) return { ok: false, message: reply.message ?? "Could not add this option." };
+		this.#adding = undefined;
+		if (reply.definition) this.#redefine(reply.definition);
+		return { ok: true };
+	};
+
+	/** Take the server's definition when it has gained options. */
+	#redefine(next: Definition): void {
+		let current = this.#definition ?? this.#snapshot.definition;
+		let added = next.questions[0]?.options.length ?? 0;
+		let held = current?.questions[0]?.options.length ?? 0;
+		// Only ever forward: a late duplicate must not erase a newer option.
+		if (added <= held) return;
+		try {
+			let definition = decision(next);
+			if (this.#definition) this.#definition = definition;
+			this.#set({ definition });
+		} catch {
+			// A definition the domain rejects is ignored; the next open resyncs.
+		}
+	}
+
 	forget(): void {
 		this.#close();
 	}
@@ -312,6 +371,10 @@ export class QuestionnaireController {
 				let next = this.#snapshot.collaborators.filter(item => item.client !== person.client);
 				this.#set({ collaborators: event.question ? [...next, person] : next });
 			}),
+			channel.on("question:option-added", (raw: never) => {
+				let event = raw as unknown as { id: string; definition?: Definition };
+				if (event.id === this.id && event.definition) this.#redefine(event.definition);
+			}),
 			channel.on("question:resolved", (raw: never) => {
 				let event = raw as unknown as { id: string };
 				if (event.id === this.id) this.#close();
@@ -488,5 +551,6 @@ export function useQuestionnaire(options: QuestionnaireOptions): QuestionnaireSt
 		change: controller.change,
 		submit: controller.submit,
 		cancel: controller.cancel,
+		addOption: controller.addOption,
 	};
 }
diff --git a/packages/question/src/schema.ts b/packages/question/src/schema.ts
index f20bee32..b19d4fe7 100644
--- a/packages/question/src/schema.ts
+++ b/packages/question/src/schema.ts
@@ -191,7 +191,11 @@ export function appendOption(
 	let option: Option = Object.freeze({ id, label, description });
 	let options = Object.freeze([...item.options, option]);
 	let next = Object.freeze({ ...item, options }) as Item;
-	return { ok: true, option, definition: Object.freeze({ questions: Object.freeze([next]) }) as DecisionDefinition };
+	return {
+		ok: true,
+		option,
+		definition: Object.freeze({ questions: Object.freeze([next]) }) as DecisionDefinition,
+	};
 }
 
 /** Reject a tool call id that could not have come from the SDK. */
diff --git a/scripts/design-contract/exceptions/dynamic-editor.json b/scripts/design-contract/exceptions/dynamic-editor.json
index 590c9497..604b70da 100644
--- a/scripts/design-contract/exceptions/dynamic-editor.json
+++ b/scripts/design-contract/exceptions/dynamic-editor.json
@@ -389,7 +389,7 @@
 				1
 			]
 		],
-		"sourceHash": "a893cf76153f551ec623590a097d3a760237d8c1de5ef2e2cc655d8662a55e14"
+		"sourceHash": "13ee6c0e2ca6ef8ba36dfaffc257147f5951789514250ce9775694f78bd1e07a"
 	},
 	{
 		"file": "packages/editor/src/widgets/code-view.tsx",
diff --git a/scripts/design-contract/exceptions/dynamic-packages.json b/scripts/design-contract/exceptions/dynamic-packages.json
index d0656646..90fb4d7d 100644
--- a/scripts/design-contract/exceptions/dynamic-packages.json
+++ b/scripts/design-contract/exceptions/dynamic-packages.json
@@ -27,12 +27,12 @@
 			[
 				"dynamic",
 				"class",
-				"errorClassName",
-				"class > QuestionView > <div>",
+				"feedback",
+				"class > Callout > <div>",
 				1
 			]
 		],
-		"sourceHash": "da4c57bf8133585e245f6a448ab85e329138b297bfeec1863dac9af4cfdafc5d"
+		"sourceHash": "dae1148c7490c7700392a1e38dfccd85b280e72ee15bf3507ab0d0e633b5056f"
 	},
 	{
 		"file": "packages/icons/src/icon.tsx",

From c9cf26f920231032a362671574fc7cecd9ac701d Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Wed, 30 Sep 2026 21:51:54 +0100
Subject: [PATCH 07/10] Return focus to the Add an option row when Escape
 closes its field

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 apps/web/src/theme.css                            |  2 +-
 e2e/sidecar.e2e.ts                                |  5 +++++
 packages/question/src/react/question-view.tsx     | 15 +++++++++++----
 .../exceptions/dynamic-packages.json              |  2 +-
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index 7d7ad924..65dcd258 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -856,7 +856,7 @@ label.question-option:has(.question-input:not(:disabled)) {
 }
 
 /* Matches the research card: danger badge beside pale-red callout text. */
-.question-callout {
+.plan-research-callout.question-callout {
 	display: flex;
 	align-items: flex-start;
 	gap: 0.5rem;
diff --git a/e2e/sidecar.e2e.ts b/e2e/sidecar.e2e.ts
index 21e0e51d..b79249d5 100644
--- a/e2e/sidecar.e2e.ts
+++ b/e2e/sidecar.e2e.ts
@@ -650,6 +650,11 @@ test("decision cards save independently with progressive custom answers", async
 	await expect(custom).toBeFocused();
 	let saveScope = scope.getByRole("button", { name: "Save", exact: true });
 	await expect(saveScope).toBeDisabled();
+	await custom.press("Escape");
+	await expect(custom).toHaveCount(0);
+	await expect(customChoice).toBeFocused();
+	await customChoice.press("Space");
+	await expect(custom).toBeFocused();
 	await custom.fill("Only collaborative anchors");
 	await scope.getByRole("checkbox", { name: "Anchors" }).check();
 	await expect(custom).toHaveCount(0);
diff --git a/packages/question/src/react/question-view.tsx b/packages/question/src/react/question-view.tsx
index 9a425d4a..d6af805c 100644
--- a/packages/question/src/react/question-view.tsx
+++ b/packages/question/src/react/question-view.tsx
@@ -178,12 +178,15 @@ function Custom(
 ) {
 	let active = draft?.mode === "custom";
 	let textarea = useRef<HTMLTextAreaElement>(null);
+	let row = useRef<HTMLInputElement>(null);
 	let focusOnReveal = useRef(false);
+	let focusOnClose = useRef(false);
 
 	useEffect(() => {
-		if (!active || !focusOnReveal.current) return;
+		if (active && focusOnReveal.current) textarea.current?.focus();
+		else if (!active && focusOnClose.current) row.current?.focus();
 		focusOnReveal.current = false;
-		textarea.current?.focus();
+		focusOnClose.current = false;
 	}, [active]);
 
 	useEffect(() => {
@@ -215,6 +218,7 @@ function Custom(
 					checked={false}
 					disabled={disabled}
 					aria-label="Add an option"
+					ref={row}
 					onChange={() => {
 						focusOnReveal.current = true;
 						onChange?.({ mode: "custom" });
@@ -241,8 +245,11 @@ function Custom(
 				placeholder="Add an option"
 				onChange={event => onChange?.({ custom: event.currentTarget.value })}
 				onKeyDown={event => {
-					if (event.key === "Escape") onChange?.({ mode: "choices" });
-					else if (event.key === "Enter" && !event.shiftKey) {
+					if (event.key === "Escape") {
+						// Closing removes the focused field; hand focus back to its row.
+						focusOnClose.current = true;
+						onChange?.({ mode: "choices" });
+					} else if (event.key === "Enter" && !event.shiftKey) {
 						event.preventDefault();
 						event.currentTarget.blur();
 					}
diff --git a/scripts/design-contract/exceptions/dynamic-packages.json b/scripts/design-contract/exceptions/dynamic-packages.json
index 4570dbb8..f6236cc7 100644
--- a/scripts/design-contract/exceptions/dynamic-packages.json
+++ b/scripts/design-contract/exceptions/dynamic-packages.json
@@ -32,7 +32,7 @@
 				1
 			]
 		],
-		"sourceHash": "15795480ba9432b57dd47d200c919320f83019535b3ec44994040c724ff8da7b"
+		"sourceHash": "26036ba142d86eb7d115e5b9ab5cf52f2b61fa99718f6b7ac67ce12485c2fff0"
 	},
 	{
 		"file": "packages/icons/src/icon.tsx",

From c21f557ccf8c337c113d75f2bb40bbca30e113f2 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Wed, 30 Sep 2026 21:54:23 +0100
Subject: [PATCH 08/10] Cover shared options in the sidecar and responsive
 specs

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 e2e/responsive-decisions.e2e.ts |  10 ++--
 e2e/sidecar.e2e.ts              | 103 ++++++++++++++++++++++++++++----
 2 files changed, 95 insertions(+), 18 deletions(-)

diff --git a/e2e/responsive-decisions.e2e.ts b/e2e/responsive-decisions.e2e.ts
index fe305aa2..caae2ba6 100644
--- a/e2e/responsive-decisions.e2e.ts
+++ b/e2e/responsive-decisions.e2e.ts
@@ -89,7 +89,7 @@ for (let viewport of [{ width: 320, height: 568 }, { width: 390, height: 844 }])
 			await page.goto(`/channels/${room}`);
 			let card = questionnaire(page).filter({ hasText: LONG_QUESTIONS[0]!.header });
 			await expect(card).toBeVisible();
-			await expect(card.getByRole("textbox", { name: "Add an option" })).toHaveCount(0);
+			await expect(card.getByRole("textbox", { name: "New option" })).toHaveCount(0);
 			await expectNoHorizontalOverflow(page);
 
 			let firstChoice = card.getByRole("radio", { name: "Use the compact layout" });
@@ -132,10 +132,10 @@ for (let viewport of [{ width: 320, height: 568 }, { width: 390, height: 844 }])
 					.getByRole("button", { name: /Decisions, 8 unanswered/ }),
 			).toBeVisible();
 
-			let customChoice = card.getByRole("radio", { name: "Add an option" });
-			await customChoice.focus();
-			await page.keyboard.press("Space");
-			let custom = card.getByRole("textbox", { name: "Add an option" });
+			let addRow = card.getByRole("button", { name: "Add an option" });
+			await addRow.focus();
+			await page.keyboard.press("Enter");
+			let custom = card.getByRole("textbox", { name: "New option" });
 			await expect(custom).toBeFocused();
 			await setVisualViewport(page, { event: "resize", height: 360 });
 			await expect.poll(() =>
diff --git a/e2e/sidecar.e2e.ts b/e2e/sidecar.e2e.ts
index 4cb55b98..804fa6f7 100644
--- a/e2e/sidecar.e2e.ts
+++ b/e2e/sidecar.e2e.ts
@@ -560,8 +560,8 @@ test("decision cards save independently with progressive custom answers", async
 	});
 	let saveStorage = storage.getByRole("button", { name: "Save", exact: true });
 
-	await expect(storage.getByRole("textbox", { name: "Add an option" })).toHaveCount(0);
-	await expect(scope.getByRole("textbox", { name: "Add an option" })).toHaveCount(0);
+	await expect(storage.getByRole("textbox", { name: "New option" })).toHaveCount(0);
+	await expect(scope.getByRole("textbox", { name: "New option" })).toHaveCount(0);
 
 	await storage.getByRole("radio", { name: /On disk as MDX/ }).check();
 	await saveStorage.click();
@@ -643,11 +643,14 @@ test("decision cards save independently with progressive custom answers", async
 	await expect(history).not.toHaveAttribute("aria-controls");
 	await expect(historyContent).toHaveCount(0);
 
-	let customChoice = scope.getByRole("checkbox", { name: "Add an option" });
-	await customChoice.focus();
-	await page.keyboard.press("Space");
-	let custom = scope.getByRole("textbox", { name: "Add an option" });
-	await expect(custom).toBeFocused();
+	let addRow = scope.getByRole("button", { name: "Add an option" });
+	await addRow.focus();
+	await page.keyboard.press("Enter");
+	let field = scope.getByRole("textbox", { name: "New option" });
+	await expect(field).toBeFocused();
+	await page.keyboard.press("Escape");
+	await expect(field).toHaveCount(0);
+	await expect(addRow).toBeFocused();
 	let saveScope = scope.getByRole("button", { name: "Save", exact: true });
 	await saveScope.hover();
 	await page.evaluate(() => {
@@ -676,18 +679,92 @@ test("decision cards save independently with progressive custom answers", async
 			return record.starts > 0;
 		})
 	).toBe(true);
-	await custom.fill("Only collaborative anchors");
+	await addRow.click();
+	field = scope.getByRole("textbox", { name: "New option" });
+	await field.fill("Only collaborative anchors");
+	await field.press("Enter");
+	// It joins everyone's list as the next lettered row and is not chosen for anyone.
+	let added = scope.getByRole("checkbox", { name: "Only collaborative anchors" });
+	await expect(added).toBeVisible();
+	await expect(added).not.toBeChecked();
+	await expect(scope.locator("label", { hasText: "Only collaborative anchors" })).toContainText(
+		"D",
+	);
+	await expect(addRow).toBeFocused();
 	await scope.getByRole("checkbox", { name: "Anchors" }).check();
-	await expect(custom).toHaveCount(0);
-	await customChoice.click();
-	custom = scope.getByRole("textbox", { name: "Add an option" });
-	await expect(custom).toHaveValue("Only collaborative anchors");
-	await expect(custom).toBeFocused();
+	await added.check();
 	await scope.getByRole("button", { name: "Save", exact: true }).click();
 	await expect(questionnaire(page).filter({ hasText: "Which of these belong in the first cut?" }))
 		.toContainText("Only collaborative anchors");
 });
 
+test("an option one member adds is shared, durable, and choosable by another", async ({ join, seed }) => {
+	await seed(PROSE);
+	let ana = await join("ana");
+	let bo = await join("bo");
+	let storage = (page: Page) =>
+		questionnaire(page).filter({
+			has: page.getByRole("heading", { name: "Where should room state live?" }),
+		});
+	for (let page of [ana, bo]) await page.getByRole("button", { name: /^Decisions/ }).click();
+	await expect(storage(bo).getByRole("radio")).toHaveCount(2);
+
+	await storage(ana).getByRole("button", { name: "Add an option" }).click();
+	let field = storage(ana).getByRole("textbox", { name: "New option" });
+	await expect(field).toBeFocused();
+	await field.fill("In PostgreSQL");
+	await field.press("Enter");
+
+	// Everyone sees it as the next lettered row, chosen by nobody.
+	for (let page of [ana, bo]) {
+		let row = storage(page).getByRole("radio", { name: "In PostgreSQL" });
+		await expect(row).toBeVisible();
+		await expect(row).not.toBeChecked();
+		await expect(storage(page).locator("label", { hasText: "In PostgreSQL" })).toContainText("C");
+	}
+	await expect(storage(ana).getByRole("textbox", { name: "New option" })).toHaveCount(0);
+
+	// The plan carries it too, which is what the Planner reads.
+	await ana.getByRole("button", { name: "Document", exact: true }).click();
+	await expect(ana.locator(`[data-document-view="plan"]`).getByText("In PostgreSQL"))
+		.toBeVisible();
+	await ana.getByRole("button", { name: /^Decisions/ }).click();
+
+	// It survives a reload, and the second member can choose and save it.
+	await bo.reload();
+	await bo.getByRole("button", { name: /^Decisions/ }).click();
+	let chosen = storage(bo).getByRole("radio", { name: "In PostgreSQL" });
+	await expect(chosen).toBeVisible();
+	await chosen.check();
+	await storage(bo).getByRole("button", { name: "Save", exact: true }).click();
+
+	for (let page of [ana, bo]) {
+		await page.getByRole("button", { name: "1 resolved" }).click();
+		await expect(questionnaire(page).filter({ hasText: "Where should room state live?" }))
+			.toContainText("In PostgreSQL");
+	}
+});
+
+test("adding a duplicate option is refused and keeps what was typed", async ({ join, seed }) => {
+	await seed(PROSE);
+	let page = await join("ana");
+	await page.getByRole("button", { name: /^Decisions/ }).click();
+	let card = questionnaire(page).filter({
+		has: page.getByRole("heading", { name: "Where should room state live?" }),
+	});
+
+	await card.getByRole("button", { name: "Add an option" }).click();
+	let field = card.getByRole("textbox", { name: "New option" });
+	await field.fill("in sqlite");
+	await field.press("Enter");
+
+	let alert = card.getByRole("alert");
+	await expect(alert).toContainText("Couldn’t add option");
+	await expect(alert).toContainText("already exists");
+	await expect(field).toHaveValue("in sqlite");
+	await expect(card.getByRole("radio")).toHaveCount(2);
+});
+
 test("an unanswered decision reports its own validation error", async ({ join, seed }) => {
 	await seed(PROSE);
 	let page = await join("ana");

From 0cd1266be656f070dbde6d48dc3c5e915fe3ad8f Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Wed, 30 Sep 2026 22:01:36 +0100
Subject: [PATCH 09/10] Show the real row, not a second field, when the
 broadcast beats the acknowledgement

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 e2e/sidecar.e2e.ts                            |  2 +-
 packages/question/src/react/question-view.tsx | 27 +++++++++----------
 .../exceptions/dynamic-packages.json          |  2 +-
 3 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/e2e/sidecar.e2e.ts b/e2e/sidecar.e2e.ts
index 4496d622..eb47d473 100644
--- a/e2e/sidecar.e2e.ts
+++ b/e2e/sidecar.e2e.ts
@@ -667,7 +667,7 @@ test("decision cards save independently with progressive custom answers", async
 	await expect(addRow).toBeFocused();
 	await expect(saveScope).toBeDisabled();
 	await added.check();
-	await scope.getByRole("checkbox", { name: "Anchors" }).check();
+	await scope.getByRole("checkbox", { name: /^Anchors/ }).check();
 	await saveScope.click();
 	await expect(questionnaire(page).filter({ hasText: "Which of these belong in the first cut?" }))
 		.toContainText("Only collaborative anchors");
diff --git a/packages/question/src/react/question-view.tsx b/packages/question/src/react/question-view.tsx
index f55d4fe7..40cb0602 100644
--- a/packages/question/src/react/question-view.tsx
+++ b/packages/question/src/react/question-view.tsx
@@ -274,25 +274,22 @@ function AddOption(
 		}
 	};
 
-	// Until the server confirms, the new row stands where the field was.
+	// Until the server confirms, the new row stands where the field was. If the
+	// broadcast beat the acknowledgement, the real row is already listed above.
 	if (pending !== null) {
 		let known = question.options.some(option =>
 			option.label.trim().toLowerCase() === pending.toLowerCase()
 		);
-		if (!known) {
-			return (
-				<div
-					aria-busy="true"
-					className="question-choice-row question-option question-pending"
-				>
-					<Key>{letter(letterIndex)}</Key>
-					<span className="question-text">
-						<span className="question-label">{pending}</span>
-					</span>
-					<span className="sr-only" role="status">Adding option</span>
-				</div>
-			);
-		}
+		if (known) return null;
+		return (
+			<div aria-busy="true" className="question-choice-row question-option question-pending">
+				<Key>{letter(letterIndex)}</Key>
+				<span className="question-text">
+					<span className="question-label">{pending}</span>
+				</span>
+				<span className="sr-only" role="status">Adding option</span>
+			</div>
+		);
 	}
 
 	if (text === null) {
diff --git a/scripts/design-contract/exceptions/dynamic-packages.json b/scripts/design-contract/exceptions/dynamic-packages.json
index 3442fc6d..c41efdaf 100644
--- a/scripts/design-contract/exceptions/dynamic-packages.json
+++ b/scripts/design-contract/exceptions/dynamic-packages.json
@@ -32,7 +32,7 @@
 				1
 			]
 		],
-		"sourceHash": "7df03f5fe32d839233f32646bf74aba7dc97089218b47c8a9d0d05e84219a266"
+		"sourceHash": "1935df38ce5d6ffcaf02d24567dffd5eca64ead2500d96f882c87552945406f8"
 	},
 	{
 		"file": "packages/icons/src/icon.tsx",

From c1c13aea568d5295eb3c1606e7af9480ccf872a9 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Wed, 30 Sep 2026 22:06:31 +0100
Subject: [PATCH 10/10] Refuse option appends that were queued behind an
 implementation claim

The active-implementation check ran before the exclusive queue, so a claim taken
while the append waited let the live document mutate and then fail in publish,
leaving the room ahead of durable state. Re-check inside the queue, and add
tests for concurrent appends, the queued-claim window and commit-failure rollback.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 apps/server/src/questions.service.test.ts | 90 +++++++++++++++++++++++
 apps/server/src/questions/service.ts      | 14 ++++
 2 files changed, 104 insertions(+)

diff --git a/apps/server/src/questions.service.test.ts b/apps/server/src/questions.service.test.ts
index 8df79f28..218c9118 100644
--- a/apps/server/src/questions.service.test.ts
+++ b/apps/server/src/questions.service.test.ts
@@ -440,3 +440,93 @@ test("a redefined open question survives dump and restore with its older draft",
 	if (claimed.ok) Store.commit(plan.questions, claimed.claim);
 	await asked.waiting;
 });
+
+test("concurrent appends with one key add one option; with one label add one option", async () => {
+	let plan = await opened();
+	let server = { publish() {} } as unknown as Server<SocketData>;
+	let asked = asking(plan, server, definition());
+	await asked.created;
+	let id = [...plan.records.keys()][0]!;
+	let ana = member("ana");
+	let bo = member("bo");
+
+	await Promise.all([
+		adding(plan, server, ana.ws, id, "Same key", "key-same-0001"),
+		adding(plan, server, bo.ws, id, "Same key", "key-same-0001"),
+		adding(plan, server, ana.ws, id, "Same label", "key-label-0001"),
+		adding(plan, server, bo.ws, id, "same LABEL", "key-label-0002"),
+	]);
+
+	let labels = plan.records.get(id)!.definition.questions[0].options.map(option => option.label);
+	expect(labels).toEqual(["Choose this", "Same key", "Same label"]);
+	expect(Object.keys(plan.records.get(id)!.appended!)).toHaveLength(2);
+	expect((bo.sent.at(-1) as { reason?: string }).reason).toBe("duplicate");
+	let claimed = Store.claimCancel(plan.questions, id, "ana");
+	if (claimed.ok) Store.commit(plan.questions, claimed.claim);
+	await asked.waiting;
+});
+
+test("an implementation claimed while an append waits leaves the room untouched", async () => {
+	let plan = await opened();
+	let server = { publish() {} } as unknown as Server<SocketData>;
+	let asked = asking(plan, server, definition());
+	await asked.created;
+	let id = [...plan.records.keys()][0]!;
+	let { ws, sent } = member();
+	let before = room.project(plan.document);
+
+	let release = Promise.withResolvers<void>();
+	let held = Service.exclusive(plan, () => release.promise);
+	let pending = adding(plan, server, ws, id, "Late", "key-late-0001");
+	plan.claiming = true;
+	release.resolve();
+	await held;
+	await pending;
+	plan.claiming = false;
+
+	expect(sent.at(-1)).toMatchObject({ ok: false, reason: "implementation" });
+	expect(room.project(plan.document)).toBe(before);
+	expect(plan.records.get(id)!.definition.questions[0].options).toHaveLength(1);
+	expect(plan.records.get(id)!.appended).toBeUndefined();
+	let claimed = Store.claimCancel(plan.questions, id, "ana");
+	if (claimed.ok) Store.commit(plan.questions, claimed.claim);
+	await asked.waiting;
+});
+
+test("a failed commit restores the record and the open definition, and nobody is told", async () => {
+	let plan = await opened();
+	let published: Array<{ kind: string }> = [];
+	let server = {
+		publish(_topic: string, raw: string) {
+			published.push(JSON.parse(raw));
+		},
+	} as unknown as Server<SocketData>;
+	let asked = asking(plan, server, definition());
+	await asked.created;
+	let id = [...plan.records.keys()][0]!;
+	let { ws, sent } = member();
+	published.length = 0;
+
+	let original = plan.persistence.storage.collaboration.commit;
+	let fatal = plan.persistence.fatal;
+	plan.persistence.fatal = () => {};
+	plan.persistence.storage.collaboration.commit = () => Promise.reject(new Error("disk full"));
+	let quiet = console.error;
+	console.error = () => {};
+	try {
+		await adding(plan, server, ws, id, "Lost", "key-lost-0001");
+	} finally {
+		console.error = quiet;
+		plan.persistence.storage.collaboration.commit = original;
+		plan.persistence.fatal = fatal;
+	}
+
+	expect(sent.at(-1)).toMatchObject({ kind: "session:error" });
+	expect(published).toEqual([]);
+	expect(plan.records.get(id)!.definition.questions[0].options).toHaveLength(1);
+	expect(plan.records.get(id)!.appended).toBeUndefined();
+	expect(Store.get(plan.questions, id)!.definition.questions[0].options).toHaveLength(1);
+	let claimed = Store.claimCancel(plan.questions, id, "ana");
+	if (claimed.ok) Store.commit(plan.questions, claimed.claim);
+	await asked.waiting;
+});
diff --git a/apps/server/src/questions/service.ts b/apps/server/src/questions/service.ts
index 83f62d4c..f007c2ce 100644
--- a/apps/server/src/questions/service.ts
+++ b/apps/server/src/questions/service.ts
@@ -377,6 +377,20 @@ export async function addOption(
 	let outcome: Wire.AddOption.Reply | undefined;
 	let added: Wire.OptionAdded | undefined;
 	await Service.exclusive(plan, async () => {
+		// An implementation may have claimed the plan while this waited in the
+		// queue. Refuse before touching the live document: `publish` would throw
+		// after the Yjs mutation, leaving the room ahead of its durable state.
+		if (Service.implementationActive(plan)) {
+			outcome = {
+				kind: "question:option",
+				ts: 0,
+				id: msg.id,
+				ok: false,
+				reason: "implementation",
+				message: "An implementation is running; decisions cannot change",
+			};
+			return;
+		}
 		let record = plan.records.get(msg.id);
 		let entry = Store.get(plan.questions, msg.id);
 		if (!record || !entry || record.status !== "open") {