@growth-labs/cms 0.8.24 → 0.8.26

package/src/ui/screens/SurveyResponsesScreen.tsx

@@ -8,6 +8,28 @@ import {
 	type SurveyErrorCode,
 } from '../../surveys/errors.js'
 import {
+	answerValue,
+	compareQuestion,
+	formatAverage,
+	type GroupCount,
+	groupResponses,
+	headlineScale,
+	MEMBERSHIP_SPLIT,
+	type Mood,
+	type OptionShare,
+	optionRows,
+	percent,
+	questionTakeaway,
+	type ResponseGroup,
+	type ScaleSummary,
+	type SurveyResponse,
+	scaleMood,
+	share,
+	splitQuestions,
+	summarizeScale,
+} from '../../surveys/readout.js'
+import {
+	MAX_FREE_TEXT_ENTRIES,
 	type SurveyAnswerLabel,
 	type SurveyQuestion,
 	type SurveyResults,
@@ -25,6 +47,15 @@ export type SurveyResponsesState =
 	| { kind: 'auth_failed' }
 	| { kind: 'retryable' }
 
+/** Every response, read page by page, so a group comparison covers the whole survey. */
+export type EveryoneState =
+	| { kind: 'idle' }
+	| { kind: 'loading' }
+	| { kind: 'ready'; responses: SurveyResponse[] }
+	| { kind: 'failed' }
+
+type ScaleQuestion = Extract<SurveyQuestion, { kind: 'scale' }>
+
 export function parseSurveyResultsPayload(value: unknown): SurveyResults | null {
 	const parsed = SurveyResultsSchema.safeParse(value)
 	return parsed.success ? parsed.data : null
@@ -55,11 +86,14 @@ export async function classifySurveyResultsResponse(
 }
 
 const PAGE_SIZE = 100
+// Five groups is as many as a reader can tell apart by color; more fold into a note.
+const MAX_GROUPS = 5
 
 export function SurveyResponsesScreen({ surveyId }: { surveyId: string }) {
 	const [state, setState] = useState<SurveyResponsesState>({ kind: 'loading' })
 	const [offset, setOffset] = useState(0)
 	const [labelSaveFailed, setLabelSaveFailed] = useState(false)
+	const [everyone, setEveryone] = useState<EveryoneState>({ kind: 'idle' })
 	const load = useCallback(
 		async (nextOffset: number) => {
 			setState({ kind: 'loading' })
@@ -75,6 +109,34 @@ export function SurveyResponsesScreen({ surveyId }: { surveyId: string }) {
 		[surveyId],
 	)
 
+	// Group comparisons are worked out in the browser, so they read every page
+	// first: a comparison over one page of 100 would sit beside survey-wide
+	// totals while describing different people. Pages load one after another
+	// to keep the reporting upstream's load flat; any failed page fails the
+	// whole comparison rather than quietly comparing a subset.
+	const loadEveryone = useCallback(
+		async (total: number) => {
+			setEveryone({ kind: 'loading' })
+			const responses = new Map<string, SurveyResponse>()
+			try {
+				for (let pageOffset = 0; pageOffset < total; pageOffset += PAGE_SIZE) {
+					const page = await classifySurveyResultsResponse(
+						await fetch(`/admin/api/surveys/${encodeURIComponent(surveyId)}?offset=${pageOffset}`),
+					)
+					if (page.kind !== 'ready') {
+						setEveryone({ kind: 'failed' })
+						return
+					}
+					for (const response of page.data.responses) responses.set(response.id, response)
+				}
+				setEveryone({ kind: 'ready', responses: [...responses.values()] })
+			} catch {
+				setEveryone({ kind: 'failed' })
+			}
+		},
+		[surveyId],
+	)
+
 	// Owner-only classification toggle: on success the label is applied to the
 	// already-loaded page (no refetch); on failure the toggle stays honest on
 	// its old value and a note says the save did not land.
@@ -125,6 +187,8 @@ export function SurveyResponsesScreen({ surveyId }: { surveyId: string }) {
 			onOffsetChange={setOffset}
 			onSetLabel={setLabel}
 			labelSaveFailed={labelSaveFailed}
+			everyone={everyone}
+			onLoadEveryone={(total) => void loadEveryone(total)}
 		/>
 	)
 }
@@ -156,6 +220,10 @@ export function SurveyResponsesBody({
 	onOffsetChange,
 	onSetLabel,
 	labelSaveFailed = false,
+	everyone = { kind: 'idle' },
+	onLoadEveryone,
+	compareBy = '',
+	commentMood = '',
 }: {
 	surveyId: string
 	state: SurveyResponsesState
@@ -165,6 +233,12 @@ export function SurveyResponsesBody({
 	onOffsetChange?: (offset: number) => void
 	onSetLabel?: (responseId: string, questionId: string, label: SurveyAnswerLabel) => void
 	labelSaveFailed?: boolean
+	everyone?: EveryoneState
+	onLoadEveryone?: (total: number) => void
+	/** The comparison to open with; the screen starts with none. */
+	compareBy?: string
+	/** The comment mood filter to open with; the screen starts with all readers. */
+	commentMood?: Mood | ''
 }) {
 	const canSeeVerbatims = canViewSurveyVerbatims(role)
 	const canLabel = canLabelSurveyAnswers(role)
@@ -196,23 +270,19 @@ export function SurveyResponsesBody({
 		)
 
 	const { data } = state
-	const shown = data.responses.length
 	const total = data.survey.responseCount
-	const rangeStart = total === 0 ? 0 : offset + 1
-	const rangeEnd = offset + shown
-	const hasMore = rangeEnd < total
+	const headline = headlineScale(data.questions)
 
 	return (
-		<div className="page page-wide fade-in" style={{ maxWidth: 1340 }}>
+		<div className="page page-wide fade-in svy" style={{ maxWidth: 1340 }}>
 			<div className="page-head">
 				<div>
+					<div className="kicker">Survey results</div>
 					<h1 className="page-title">{data.survey.title}</h1>
-					{/* Never a truncated list under a full count: say exactly what is on screen. */}
 					<div className="page-sub">
 						{total === 0
 							? 'No responses yet'
-							: `Showing ${rangeStart}–${rangeEnd} of ${total} ${total === 1 ? 'response' : 'responses'}`}{' '}
-						· {data.survey.status}
+							: `${total} ${total === 1 ? 'response' : 'responses'} · ${surveyStatusLabel(data.survey.status)}`}
 					</div>
 				</div>
 				<a
@@ -226,92 +296,456 @@ export function SurveyResponsesBody({
 			{total === 0 ? (
 				<div className="card" role="status">
 					<h2 className="card-title">No responses yet</h2>
-					<p className="page-sub">Aggregates and answers will appear after submission.</p>
+					<p className="page-sub">Charts and comments will appear after the first submission.</p>
 				</div>
 			) : (
 				<>
-					<HeadlineScale questions={data.questions} />
+					{headline && headline.answerCount > 0 ? <Headline question={headline} /> : null}
+
+					<Results
+						data={data}
+						everyone={everyone}
+						onLoadEveryone={onLoadEveryone}
+						initialCompareBy={compareBy}
+					/>
 
 					{canSeeVerbatims ? (
-						<>
-							{canLabel && (data.unlabeledCount ?? 0) > 0 ? (
-								<p className="page-sub" role="status" style={{ marginTop: 24 }}>
-									{unlabeledAnswersNotice(data.unlabeledCount ?? 0)}
-								</p>
-							) : null}
-							{canLabel && (data.personalDetailsCount ?? 0) > 0 ? (
-								<p className="page-sub" role="status" style={{ marginTop: 24 }}>
-									{personalDetailsNotice(data.personalDetailsCount ?? 0)}
-								</p>
-							) : null}
-							{labelSaveFailed && canLabel ? (
-								<p className="page-sub" role="alert" style={{ marginTop: 24 }}>
-									The last label change could not be saved. Try again.
-								</p>
-							) : null}
-							<VerbatimFeed data={data} canLabel={canLabel} onSetLabel={onSetLabel} />
-						</>
+						<Comments
+							data={data}
+							offset={offset}
+							canLabel={canLabel}
+							onSetLabel={onSetLabel}
+							labelSaveFailed={labelSaveFailed}
+							onOffsetChange={onOffsetChange}
+							everyone={everyone}
+							onLoadEveryone={onLoadEveryone}
+							initialMood={commentMood}
+						/>
 					) : (
-						<div className="card" role="status" style={{ marginTop: 24 }}>
+						<div className="card svy-section" role="status">
 							<h2 className="card-title">Individual answers are restricted</h2>
 							<p className="page-sub">
-								Aggregates below are available to your role. Verbatim answers and respondent
-								attribution require owner or senior editor.
+								The charts above are available to your role. What readers wrote, and who wrote it,
+								requires owner or senior editor.
 							</p>
 						</div>
 					)}
-
-					<Aggregates data={data} />
-
-					{(offset > 0 || hasMore) && onOffsetChange ? (
-						<div className="page-head" style={{ marginTop: 24 }}>
-							<button
-								className="btn"
-								type="button"
-								disabled={offset === 0}
-								onClick={() => onOffsetChange(Math.max(offset - PAGE_SIZE, 0))}
-							>
-								Previous
-							</button>
-							<button
-								className="btn"
-								type="button"
-								disabled={!hasMore}
-								onClick={() => onOffsetChange(offset + PAGE_SIZE)}
-							>
-								Next
-							</button>
-						</div>
-					) : null}
 				</>
 			)}
 		</div>
 	)
 }
 
-// The first scale question is the survey's headline number. Leading with the
-// distribution keeps one harsh verbatim from setting the tone of a readout.
-function HeadlineScale({ questions }: { questions: SurveyResults['questions'] }) {
-	const scale = questions.find((question) => question.kind === 'scale')
-	if (scale?.kind !== 'scale' || scale.answerCount === 0) return null
-	const midpoint = (scale.options.min + scale.options.max) / 2
-	const favourable = Object.entries(scale.distribution)
-		.filter(([value]) => Number(value) > midpoint)
-		.reduce((sum, [, count]) => sum + count, 0)
-	const share = Math.round((favourable / scale.answerCount) * 100)
+// ── Headline ────────────────────────────────────────────────────────────
 
+// The first scale question is the survey's headline number. Leading with the
+// distribution keeps one harsh comment from setting the tone of a readout.
+function Headline({ question }: { question: ScaleQuestion }) {
+	const summary = summarizeScale(question.options, question.distribution)
 	return (
-		<section className="card" aria-labelledby="survey-headline" style={{ marginTop: 24 }}>
-			<div className="kicker">{scale.prompt}</div>
-			<h2 className="card-title" id="survey-headline">
-				{share}% rate {midpoint.toFixed(1)} or better · average{' '}
-				{scale.average === null ? '—' : scale.average.toFixed(2)}
+		<section className="card svy-headline" aria-labelledby="survey-headline">
+			<div className="kicker">{`Headline · Q${question.position + 1} · ${summary.answered} answered`}</div>
+			<h2 className="svy-headline-prompt" id="survey-headline">
+				{question.prompt}
 			</h2>
-			<CountTable values={scale.distribution} />
+			<div className="svy-headline-body">
+				<div>
+					<div className="svy-big">{percent(summary.happy, summary.answered)}</div>
+					<div className="svy-big-label">{`are happy — they rated it ${summary.happyRange} out of ${summary.max}`}</div>
+					<dl className="svy-facts">
+						<div>
+							<dt>
+								<span className="svy-swatch mood-unhappy" aria-hidden="true" />
+								{`Unhappy (${summary.unhappyRange})`}
+							</dt>
+							<dd>{`${percent(summary.unhappy, summary.answered)} · ${people(summary.unhappy)}`}</dd>
+						</div>
+						{summary.neutralValue !== null ? (
+							<div>
+								<dt>
+									<span className="svy-swatch mood-neutral" aria-hidden="true" />
+									{`In the middle (${summary.neutralValue})`}
+								</dt>
+								<dd>{`${percent(summary.neutral, summary.answered)} · ${people(summary.neutral)}`}</dd>
+							</div>
+						) : null}
+						<div>
+							<dt>
+								<span className="svy-swatch mood-happy" aria-hidden="true" />
+								{`Happy (${summary.happyRange})`}
+							</dt>
+							<dd>{`${percent(summary.happy, summary.answered)} · ${people(summary.happy)}`}</dd>
+						</div>
+						<div>
+							<dt>Average</dt>
+							<dd>{`${formatAverage(summary.average)} out of ${summary.max}`}</dd>
+						</div>
+					</dl>
+				</div>
+				<ScaleColumns question={question} />
+			</div>
 		</section>
 	)
 }
 
+function ScaleColumns({ question }: { question: ScaleQuestion }) {
+	const { min, max } = question.options
+	const summary = summarizeScale(question.options, question.distribution)
+	const values = Array.from({ length: max - min + 1 }, (_, index) => min + index)
+	const peak = Math.max(1, ...values.map((value) => question.distribution[String(value)] ?? 0))
+	const columns = { gridTemplateColumns: `repeat(${values.length}, minmax(0, 1fr))` }
+	return (
+		<figure className="svy-cols" aria-label={`How people rated it, from ${min} to ${max}`}>
+			<div className="svy-cols-plot" style={columns}>
+				{values.map((value) => {
+					const count = question.distribution[String(value)] ?? 0
+					return (
+						<div
+							className="svy-col"
+							key={value}
+							title={`Rated ${value}: ${people(count)} (${percent(count, summary.answered)})`}
+						>
+							<span className="svy-col-value">{percent(count, summary.answered)}</span>
+							<span
+								className={`svy-col-bar mood-${scaleMood(value, min, max)}`}
+								style={{ height: `${(count / peak) * 100}%` }}
+							/>
+						</div>
+					)
+				})}
+			</div>
+			<div className="svy-cols-axis" style={columns}>
+				{values.map((value) => (
+					<span key={value}>{value}</span>
+				))}
+			</div>
+			{summary.average !== null ? (
+				<div className="svy-cols-avg">
+					<span style={{ left: `${((summary.average - min + 0.5) / values.length) * 100}%` }}>
+						{`▲ average ${formatAverage(summary.average)}`}
+					</span>
+				</div>
+			) : null}
+			<figcaption className="svy-cols-caption">
+				<span>{`${min} = lowest`}</span>
+				<span>{`highest = ${max}`}</span>
+			</figcaption>
+		</figure>
+	)
+}
+
+// ── Results by question ─────────────────────────────────────────────────
+
+function Results({
+	data,
+	everyone,
+	onLoadEveryone,
+	initialCompareBy,
+}: {
+	data: SurveyResults
+	everyone: EveryoneState
+	onLoadEveryone?: (total: number) => void
+	initialCompareBy: string
+}) {
+	const [compareBy, setCompareBy] = useState(initialCompareBy)
+	const total = data.survey.responseCount
+	// Comparing by an answer needs each person's answers. A provider that sends
+	// none can still compare members with non-members, so only that is offered.
+	const hasAnswers = data.responses.some((response) => (response.answers ?? []).length > 0)
+	const candidates = hasAnswers ? splitQuestions(data.questions) : []
+
+	useEffect(() => {
+		if (compareBy && everyone.kind === 'idle') onLoadEveryone?.(total)
+	}, [compareBy, everyone.kind, onLoadEveryone, total])
+
+	const allGroups = useMemo(
+		() =>
+			compareBy && everyone.kind === 'ready'
+				? groupResponses(everyone.responses, compareBy, data.questions)
+				: null,
+		[compareBy, everyone, data.questions],
+	)
+	const groups = allGroups?.slice(0, MAX_GROUPS) ?? null
+	const headlineId = headlineScale(data.questions)?.id
+	const gridQuestions = data.questions.filter((question) => groups || question.id !== headlineId)
+
+	return (
+		<section aria-labelledby="survey-results" className="svy-section">
+			<div className="page-head svy-section-head">
+				<div>
+					<h2 className="page-title svy-h2" id="survey-results">
+						What readers told us
+					</h2>
+					<p className="page-sub">
+						{`Each chart covers all ${total} responses. Percentages are of the people who answered that question.`}
+					</p>
+				</div>
+				<label className="svy-control">
+					<span className="kicker">Compare</span>
+					<select
+						className="selectbox"
+						value={compareBy}
+						onChange={(event) => setCompareBy(event.target.value)}
+					>
+						<option value="">Everyone together</option>
+						<option value={MEMBERSHIP_SPLIT}>Members vs non-members</option>
+						{candidates.map((question) => (
+							<option key={question.id} value={question.id}>
+								{question.kind === 'scale'
+									? `Happy vs unhappy — ${question.prompt}`
+									: `By answer — ${question.prompt}`}
+							</option>
+						))}
+					</select>
+				</label>
+			</div>
+
+			{compareBy ? (
+				<CompareStatus
+					everyone={everyone}
+					total={total}
+					groups={groups}
+					hiddenGroups={(allGroups?.length ?? 0) - (groups?.length ?? 0)}
+					onRetry={onLoadEveryone ? () => onLoadEveryone(total) : undefined}
+				/>
+			) : null}
+
+			<div className="svy-grid">
+				{/* The headline question already has its own chart above; it returns
+				    here only when a comparison has something to add to it. */}
+				{gridQuestions.map((question) => (
+					<QuestionCard
+						key={question.id}
+						question={question}
+						total={total}
+						groups={groups}
+						isSplit={question.id === compareBy}
+					/>
+				))}
+			</div>
+		</section>
+	)
+}
+
+function CompareStatus({
+	everyone,
+	total,
+	groups,
+	hiddenGroups,
+	onRetry,
+}: {
+	everyone: EveryoneState
+	total: number
+	groups: ResponseGroup[] | null
+	hiddenGroups: number
+	onRetry?: () => void
+}) {
+	if (everyone.kind === 'failed') {
+		return (
+			<div className="svy-callout is-alert" role="alert">
+				Not every response could be loaded, so groups are not compared — a partial comparison would
+				describe the wrong people.{' '}
+				{onRetry ? (
+					<button className="btn sm" type="button" onClick={onRetry}>
+						Retry
+					</button>
+				) : null}
+			</div>
+		)
+	}
+	if (everyone.kind !== 'ready' || !groups) {
+		return (
+			<p className="page-sub svy-compare-status" role="status">
+				{`Loading all ${total} responses to compare groups…`}
+			</p>
+		)
+	}
+	if (groups.length === 0) {
+		return (
+			<p className="svy-callout" role="status">
+				Nobody has answered that question yet, so there are no groups to compare.
+			</p>
+		)
+	}
+	return (
+		<div className="svy-legend" role="status">
+			<span className="page-sub">{`Comparing all ${everyone.responses.length} responses:`}</span>
+			{groups.map((group, index) => (
+				<span className="svy-legend-item" key={group.key}>
+					<span className={`svy-swatch ${groupTone(group, index)}`} aria-hidden="true" />
+					{`${group.label} · ${people(group.responses.length)}`}
+				</span>
+			))}
+			{hiddenGroups > 0 ? (
+				<span className="page-sub">{`+${hiddenGroups} smaller ${hiddenGroups === 1 ? 'group' : 'groups'} not shown`}</span>
+			) : null}
+		</div>
+	)
+}
+
+function QuestionCard({
+	question,
+	total,
+	groups,
+	isSplit,
+}: {
+	question: SurveyQuestion
+	total: number
+	groups: ResponseGroup[] | null
+	isSplit: boolean
+}) {
+	const comparison =
+		groups && groups.length > 0 && !isSplit ? compareQuestion(question, groups) : null
+	return (
+		<article className="card svy-q">
+			<div className="kicker">
+				{`Q${question.position + 1} · ${questionAudienceLabel(question.audience)} · ${question.answerCount} answered`}
+			</div>
+			<h3 className="svy-q-prompt">{question.prompt}</h3>
+			<p className="svy-takeaway">{questionTakeaway(question, total)}</p>
+
+			{comparison && comparison.kind === 'choice' && groups ? (
+				<GroupedBars rows={comparison.rows} groups={groups} />
+			) : comparison && comparison.kind === 'scale' && groups ? (
+				<MoodBars summaries={comparison.byGroup} groups={groups} />
+			) : question.kind === 'single_choice' || question.kind === 'multi_choice' ? (
+				<BarList rows={optionRows(question)} of={question.answerCount} />
+			) : question.kind === 'scale' ? (
+				<ScaleColumns question={question} />
+			) : (
+				<BarList rows={[{ option: 'Wrote an answer', count: question.answerCount }]} of={total} />
+			)}
+
+			{question.kind === 'multi_choice' ? (
+				<p className="svy-note">
+					People could pick more than one, so these add up to more than 100%.
+				</p>
+			) : null}
+			{isSplit && groups ? (
+				<p className="svy-note">The groups being compared come from this question.</p>
+			) : null}
+			{comparison?.kind === 'none' ? (
+				<p className="svy-note">Written answers are not split into groups — read them below.</p>
+			) : null}
+		</article>
+	)
+}
+
+function BarList({ rows, of }: { rows: OptionShare[]; of: number }) {
+	const top = Math.max(0, ...rows.map((row) => row.count))
+	return (
+		<ul className="svy-bars">
+			{rows.map((row) => (
+				<li
+					className="svy-bar"
+					key={row.option}
+					title={`${row.option}: ${row.count} of ${of} (${percent(row.count, of)})`}
+				>
+					<span className="svy-bar-label">{row.option}</span>
+					<span className="svy-bar-value">
+						<strong>{percent(row.count, of)}</strong>
+						<span className="svy-count">{String(row.count)}</span>
+					</span>
+					<span className="svy-track">
+						<span
+							className={`svy-fill${top > 0 && row.count === top ? ' is-top' : ''}`}
+							style={{ width: `${share(row.count, of) * 100}%` }}
+						/>
+					</span>
+				</li>
+			))}
+		</ul>
+	)
+}
+
+function GroupedBars({
+	rows,
+	groups,
+}: {
+	rows: Array<{ option: string; byGroup: GroupCount[] }>
+	groups: ResponseGroup[]
+}) {
+	return (
+		<ul className="svy-bars">
+			{rows.map((row, rowIndex) => (
+				<li className="svy-bar is-grouped" key={row.option}>
+					<span className="svy-bar-label">{row.option}</span>
+					<span className="svy-gbars">
+						{row.byGroup.map((cell, index) => {
+							const group = groups[index]
+							return (
+								<span
+									className="svy-gbar"
+									key={group.key}
+									title={`${group.label}: ${cell.count} of ${cell.answered} (${percent(cell.count, cell.answered)})`}
+								>
+									<span className="svy-track sm">
+										<span
+											className={`svy-fill ${groupTone(group, index)}`}
+											style={{ width: `${share(cell.count, cell.answered) * 100}%` }}
+										/>
+									</span>
+									<span className="svy-gbar-value">
+										{/* Direct-label the first row only; the legend carries the rest. */}
+										{rowIndex === 0
+											? `${percent(cell.count, cell.answered)} ${group.label}`
+											: percent(cell.count, cell.answered)}
+									</span>
+								</span>
+							)
+						})}
+					</span>
+				</li>
+			))}
+		</ul>
+	)
+}
+
+function people(count: number): string {
+	return `${count} ${count === 1 ? 'person' : 'people'}`
+}
+
+function groupTone(group: ResponseGroup, index: number): string {
+	return group.mood ? `mood-${group.mood}` : `g${index}`
+}
+
+function MoodBars({ summaries, groups }: { summaries: ScaleSummary[]; groups: ResponseGroup[] }) {
+	return (
+		<ul className="svy-bars">
+			{summaries.map((summary, index) => {
+				const group = groups[index]
+				return (
+					<li
+						className="svy-bar"
+						key={group.key}
+						title={`${group.label}: ${summary.happy} happy, ${summary.neutral} in the middle, ${summary.unhappy} unhappy of ${summary.answered}`}
+					>
+						{/* Named in text: the bar's colors already mean happy and unhappy. */}
+						<span className="svy-bar-label">{group.label}</span>
+						<span className="svy-bar-value">
+							<strong>{`${percent(summary.happy, summary.answered)} happy`}</strong>
+							<span className="svy-count">{`avg ${formatAverage(summary.average)}`}</span>
+						</span>
+						<span className="svy-track svy-stack">
+							{(['unhappy', 'neutral', 'happy'] as const).map((mood) =>
+								summary[mood] > 0 ? (
+									<span
+										className={`svy-seg mood-${mood}`}
+										key={mood}
+										style={{ width: `${share(summary[mood], summary.answered) * 100}%` }}
+									/>
+								) : null,
+							)}
+						</span>
+					</li>
+				)
+			})}
+		</ul>
+	)
+}
+
+// ── What readers wrote ──────────────────────────────────────────────────
+
 type WrittenAnswer = SurveyResults['freeText'][number]
 
 // The owner's loud surface for answers auto-labeling has not placed yet
@@ -333,72 +767,198 @@ function personalDetailsNotice(count: number): string {
 		: `${count} answers contain personal details and need your label.`
 }
 
-function VerbatimFeed({
+function Comments({
 	data,
+	offset,
 	canLabel,
 	onSetLabel,
+	labelSaveFailed,
+	onOffsetChange,
+	everyone,
+	onLoadEveryone,
+	initialMood,
 }: {
 	data: SurveyResults
+	offset: number
 	canLabel: boolean
 	onSetLabel?: (responseId: string, questionId: string, label: SurveyAnswerLabel) => void
+	labelSaveFailed: boolean
+	onOffsetChange?: (offset: number) => void
+	everyone: EveryoneState
+	onLoadEveryone?: (total: number) => void
+	initialMood: Mood | ''
 }) {
 	const [labelFilter, setLabelFilter] = useState<'all' | 'general' | 'technical'>('all')
-	const textQuestionIds = new Set(
-		data.questions.filter((question) => question.kind === 'text').map((question) => question.id),
-	)
+	const [moodFilter, setMoodFilter] = useState<Mood | ''>(initialMood)
+	const total = data.survey.responseCount
+	const shown = data.responses.length
+	const rangeStart = total === 0 ? 0 : offset + 1
+	const rangeEnd = offset + shown
+	const hasMore = rangeEnd < total
+
+	const headline = headlineScale(data.questions)
+	const textQuestions = data.questions.filter((question) => question.kind === 'text')
+	const textQuestionIds = new Set(textQuestions.map((question) => question.id))
 	const promptById = new Map(data.questions.map((question) => [question.id, question.prompt]))
+	const ratingOf = (response: SurveyResponse): number | null => {
+		if (!headline) return null
+		const value = answerValue(response, headline.id)
+		return typeof value === 'number' ? value : null
+	}
+	const moodOf = (response: SurveyResponse): Mood | null => {
+		const rating = ratingOf(response)
+		return rating === null || !headline
+			? null
+			: scaleMood(rating, headline.options.min, headline.options.max)
+	}
+	const canFilterByMood = data.responses.some((response) => ratingOf(response) !== null)
+	const moodRanges = headline ? summarizeScale(headline.options, {}) : null
+
 	// Non-owners never receive technical or unlabeled entries (the route filters
 	// server-side), so for them this feed is already the general thread.
 	const visibleFreeText =
 		labelFilter === 'all' ? data.freeText : data.freeText.filter((e) => e.label === labelFilter)
-	const freeTextByResponse = new Map<string, WrittenAnswer[]>()
+	const writtenByResponse = new Map<string, WrittenAnswer[]>()
 	for (const entry of visibleFreeText) {
-		const entries = freeTextByResponse.get(entry.responseId) ?? []
+		const entries = writtenByResponse.get(entry.responseId) ?? []
 		entries.push(entry)
-		freeTextByResponse.set(entry.responseId, entries)
+		writtenByResponse.set(entry.responseId, entries)
 	}
+	const wroteSomething = new Set(data.freeText.map((entry) => entry.responseId))
+
+	// A filter answers "what do unhappy readers say", so it searches every
+	// response, never just the page on screen. The written answers already
+	// arrive for the whole survey; each response's rating and details come
+	// from loading every page, exactly as the group comparison does.
+	const filtering = moodFilter !== '' || labelFilter !== 'all'
+	useEffect(() => {
+		if (filtering && everyone.kind === 'idle') onLoadEveryone?.(total)
+	}, [filtering, everyone.kind, onLoadEveryone, total])
+	const pool: SurveyResponse[] | null = !filtering
+		? data.responses
+		: everyone.kind === 'ready'
+			? everyone.responses
+			: null
+	const visible = (pool ?? []).filter(
+		(response) =>
+			(writtenByResponse.get(response.id) ?? []).length > 0 &&
+			(!moodFilter || moodOf(response) === moodFilter),
+	)
+	const silent = filtering
+		? []
+		: data.responses.filter((response) => !wroteSomething.has(response.id))
+	const freeTextCapped = data.freeText.length >= MAX_FREE_TEXT_ENTRIES
 
 	return (
-		<section aria-labelledby="survey-verbatims" style={{ marginTop: 24 }}>
-			<div className="page-head">
-				<h2 className="page-title" id="survey-verbatims" style={{ fontSize: 22 }}>
-					Responses
-				</h2>
-				{canLabel ? (
-					// biome-ignore lint/a11y/useSemanticElements: chip-row is a flex div throughout the admin UI; a fieldset would import UA border/padding with no reset in the publication CSS, while role="group" + aria-label keeps the grouping semantics
-					<div className="chip-row" role="group" aria-label="Filter written answers">
-						{(['all', 'general', 'technical'] as const).map((option) => (
-							<button
-								className="chip"
-								key={option}
-								type="button"
-								aria-pressed={labelFilter === option}
-								onClick={() => setLabelFilter(option)}
+		<section aria-labelledby="survey-verbatims" className="svy-section">
+			<div className="page-head svy-section-head">
+				<div>
+					<h2 className="page-title svy-h2" id="survey-verbatims">
+						What readers wrote
+					</h2>
+					{textQuestions.length > 0 ? (
+						<p className="page-sub">{textQuestions.map((q) => `“${q.prompt}”`).join(' · ')}</p>
+					) : null}
+					{/* Never a truncated list under a full count: say exactly what is on screen. */}
+					<p className="page-sub">
+						{!filtering
+							? `Showing ${rangeStart}–${rangeEnd} of ${total} ${total === 1 ? 'response' : 'responses'}`
+							: pool
+								? `${visible.length} ${visible.length === 1 ? 'comment matches' : 'comments match'} these filters, searched across all ${pool.length} responses`
+								: `Loading all ${total} responses to search every comment…`}
+					</p>
+				</div>
+				<div className="svy-filters">
+					{canFilterByMood && moodRanges ? (
+						<label className="svy-control">
+							<span className="kicker">From</span>
+							<select
+								className="selectbox"
+								value={moodFilter}
+								onChange={(event) => setMoodFilter(event.target.value as Mood | '')}
 							>
-								{option === 'all' ? 'All' : option === 'general' ? 'General' : 'Technical'}
-							</button>
-						))}
-					</div>
-				) : null}
+								<option value="">All readers</option>
+								<option value="unhappy">{`Unhappy readers (${moodRanges.unhappyRange})`}</option>
+								{moodRanges.neutralValue !== null ? (
+									<option value="neutral">{`Readers in the middle (${moodRanges.neutralValue})`}</option>
+								) : null}
+								<option value="happy">{`Happy readers (${moodRanges.happyRange})`}</option>
+							</select>
+						</label>
+					) : null}
+					{canLabel ? (
+						// biome-ignore lint/a11y/useSemanticElements: chip-row is a flex div throughout the admin UI; a fieldset would import UA border/padding with no reset in the publication CSS, while role="group" + aria-label keeps the grouping semantics
+						<div className="chip-row" role="group" aria-label="Filter written answers">
+							{(['all', 'general', 'technical'] as const).map((option) => (
+								<button
+									className="chip"
+									key={option}
+									type="button"
+									aria-pressed={labelFilter === option}
+									onClick={() => setLabelFilter(option)}
+								>
+									{option === 'all' ? 'All' : option === 'general' ? 'General' : 'Technical'}
+								</button>
+							))}
+						</div>
+					) : null}
+				</div>
 			</div>
-			<div style={{ marginTop: 12 }}>
-				{data.responses.map((response) => {
-					const written = freeTextByResponse.get(response.id) ?? []
-					const choices = (response.answers ?? []).filter(
-						(answer) => !textQuestionIds.has(answer.questionId),
-					)
-					return (
-						<article className="card" key={response.id} style={{ marginTop: 12 }}>
-							<div className="kicker">
-								<time dateTime={response.submittedAt}>{formatTime(response.submittedAt)}</time> ·{' '}
-								{segmentLabel(response.respondentSegment)} · {respondentLabel(response)}
-							</div>
-							{written.length === 0 ? (
-								<p className="page-sub">No written answer.</p>
-							) : (
-								written.map((entry) => (
-									<div key={`${response.id}:${entry.questionId}`}>
-										<blockquote>{entry.value}</blockquote>
+
+			{canLabel && (data.unlabeledCount ?? 0) > 0 ? (
+				<p className="svy-callout" role="status">
+					{unlabeledAnswersNotice(data.unlabeledCount ?? 0)}
+				</p>
+			) : null}
+			{canLabel && (data.personalDetailsCount ?? 0) > 0 ? (
+				<p className="svy-callout" role="status">
+					{personalDetailsNotice(data.personalDetailsCount ?? 0)}
+				</p>
+			) : null}
+			{labelSaveFailed && canLabel ? (
+				<p className="svy-callout is-alert" role="alert">
+					The last label change could not be saved. Try again.
+				</p>
+			) : null}
+
+			{filtering && everyone.kind === 'failed' ? (
+				<div className="svy-callout is-alert" role="alert">
+					Not every response could be loaded, so the filter has nothing complete to search — a
+					partial search would hide comments.{' '}
+					{onLoadEveryone ? (
+						<button className="btn sm" type="button" onClick={() => onLoadEveryone(total)}>
+							Retry
+						</button>
+					) : null}
+				</div>
+			) : null}
+			{filtering && pool && freeTextCapped ? (
+				<p className="svy-callout" role="status">
+					{`Only the newest ${MAX_FREE_TEXT_ENTRIES} written answers reach this screen, so older ones are not searched. Export CSV has every answer.`}
+				</p>
+			) : null}
+
+			{!pool ? null : visible.length === 0 ? (
+				<p className="page-sub">
+					{filtering ? 'No comments match these filters.' : 'No comments on this page.'}
+				</p>
+			) : (
+				<div className="svy-comments">
+					{visible.map((response) => {
+						const rating = ratingOf(response)
+						const mood = moodOf(response)
+						const others = (response.answers ?? []).filter(
+							(answer) =>
+								!textQuestionIds.has(answer.questionId) && answer.questionId !== headline?.id,
+						)
+						return (
+							<article className="card svy-comment" key={response.id}>
+								{(writtenByResponse.get(response.id) ?? []).map((entry) => (
+									<div className="svy-comment-entry" key={`${response.id}:${entry.questionId}`}>
+										{textQuestions.length > 1 ? (
+											<div className="kicker">{promptById.get(entry.questionId)}</div>
+										) : null}
+										<blockquote className="svy-quote">{entry.value}</blockquote>
 										{canLabel && onSetLabel ? (
 											// biome-ignore lint/a11y/useSemanticElements: chip-row is a flex div throughout the admin UI; a fieldset would import UA border/padding with no reset in the publication CSS, while role="group" + aria-label keeps the grouping semantics
 											<div
@@ -426,7 +986,7 @@ function VerbatimFeed({
 												</button>
 												{entry.labelSource === 'auto' ? (
 													<span
-														className="chip"
+														className="chip is-quiet"
 														title="Labeled automatically — your choice overrides it"
 													>
 														auto
@@ -435,167 +995,90 @@ function VerbatimFeed({
 											</div>
 										) : null}
 									</div>
-								))
-							)}
-							<div className="chip-row">
-								{choices.map((answer) => (
-									<span
-										className="chip"
-										key={`${response.id}:${answer.questionId}`}
-										title={promptById.get(answer.questionId) ?? answer.questionId}
-									>
-										{formatAnswerValue(answer.value)}
-									</span>
 								))}
-							</div>
-						</article>
-					)
-				})}
-			</div>
-		</section>
-	)
-}
+								<div className="svy-meta">
+									{rating !== null && headline && mood ? (
+										<span className="svy-rating" title={headline.prompt}>
+											<span className={`svy-swatch mood-${mood}`} aria-hidden="true" />
+											{`Rated ${rating} of ${headline.options.max}`}
+										</span>
+									) : null}
+									<span>{segmentLabel(response.respondentSegment)}</span>
+									<span>{respondentLabel(response)}</span>
+									<time dateTime={response.submittedAt} title={formatTime(response.submittedAt)}>
+										{formatDate(response.submittedAt)}
+									</time>
+								</div>
+								{others.length > 0 ? (
+									<details className="svy-answers">
+										<summary>Their other answers</summary>
+										<dl>
+											{others.map((answer) => (
+												<div key={answer.questionId}>
+													<dt>{promptById.get(answer.questionId) ?? answer.questionId}</dt>
+													<dd>{formatAnswerValue(answer.value)}</dd>
+												</div>
+											))}
+										</dl>
+									</details>
+								) : null}
+							</article>
+						)
+					})}
+				</div>
+			)}
 
-function Aggregates({ data }: { data: SurveyResults }) {
-	// Flat counts cannot express the finding that matters most — how one cohort
-	// differs from another — so every aggregate can be split by another question.
-	const splitCandidates = data.questions.filter(
-		(question) => question.kind === 'single_choice' || question.kind === 'scale',
-	)
-	const [splitBy, setSplitBy] = useState<string>('')
-	const splitQuestion = splitCandidates.find((question) => question.id === splitBy)
-
-	const answersByResponse = useMemo(() => {
-		const map = new Map<string, Map<string, unknown>>()
-		for (const response of data.responses) {
-			map.set(
-				response.id,
-				new Map((response.answers ?? []).map((answer) => [answer.questionId, answer.value])),
-			)
-		}
-		return map
-	}, [data.responses])
-
-	const cohorts = useMemo(() => {
-		if (!splitQuestion) return null
-		const buckets = new Map<string, string[]>()
-		for (const response of data.responses) {
-			const value = answersByResponse.get(response.id)?.get(splitQuestion.id)
-			if (value === undefined) continue
-			const key = formatAnswerValue(value)
-			const ids = buckets.get(key) ?? []
-			ids.push(response.id)
-			buckets.set(key, ids)
-		}
-		return buckets
-	}, [answersByResponse, data.responses, splitQuestion])
+			{silent.length > 0 ? (
+				<details className="svy-silent">
+					<summary>
+						{`${silent.length} ${silent.length === 1 ? 'response' : 'responses'} on this page left no comment`}
+					</summary>
+					<ul>
+						{silent.map((response) => {
+							const rating = ratingOf(response)
+							return (
+								<li key={response.id}>
+									{[
+										formatDate(response.submittedAt),
+										segmentLabel(response.respondentSegment),
+										respondentLabel(response),
+										rating !== null && headline
+											? `rated ${rating} of ${headline.options.max}`
+											: null,
+									]
+										.filter(Boolean)
+										.join(' · ')}
+								</li>
+							)
+						})}
+					</ul>
+				</details>
+			) : null}
 
-	return (
-		<section aria-labelledby="survey-aggregates" style={{ marginTop: 24 }}>
-			<div className="page-head">
-				<h2 className="page-title" id="survey-aggregates" style={{ fontSize: 22 }}>
-					Question aggregates
-				</h2>
-				<label>
-					<span className="page-sub">Split by </span>
-					<select value={splitBy} onChange={(event) => setSplitBy(event.target.value)}>
-						<option value="">No split</option>
-						{splitCandidates.map((question) => (
-							<option key={question.id} value={question.id}>
-								{question.prompt}
-							</option>
-						))}
-					</select>
-				</label>
-			</div>
-			<div className="grid-split-wide" style={{ alignItems: 'start', marginTop: 12 }}>
-				{data.questions.map((question) => (
-					<article className="card" key={question.id}>
-						<div className="kicker">
-							Q{question.position + 1} · {questionAudienceLabel(question.audience)}
-						</div>
-						<h3 className="card-title">{question.prompt}</h3>
-						{question.counts && <CountTable values={question.counts} />}
-						{question.distribution && (
-							<>
-								<p className="page-sub">
-									Average: {question.average === null ? '—' : question.average.toFixed(2)}
-								</p>
-								<CountTable values={question.distribution} />
-							</>
-						)}
-						{question.kind === 'text' && (
-							<p className="page-sub">{question.responseCount ?? 0} written answers</p>
-						)}
-						{cohorts && splitQuestion && splitQuestion.id !== question.id ? (
-							<CrossTab
-								question={question}
-								cohorts={cohorts}
-								answersByResponse={answersByResponse}
-							/>
-						) : null}
-					</article>
-				))}
-			</div>
+			{!filtering && (offset > 0 || hasMore) && onOffsetChange ? (
+				<div className="svy-pager">
+					<button
+						className="btn"
+						type="button"
+						disabled={offset === 0}
+						onClick={() => onOffsetChange(Math.max(offset - PAGE_SIZE, 0))}
+					>
+						Previous
+					</button>
+					<button
+						className="btn"
+						type="button"
+						disabled={!hasMore}
+						onClick={() => onOffsetChange(offset + PAGE_SIZE)}
+					>
+						Next
+					</button>
+				</div>
+			) : null}
 		</section>
 	)
 }
 
-function CrossTab({
-	question,
-	cohorts,
-	answersByResponse,
-}: {
-	question: SurveyQuestion
-	cohorts: Map<string, string[]>
-	answersByResponse: Map<string, Map<string, unknown>>
-}) {
-	const rows = [...cohorts.entries()].map(([cohort, responseIds]) => {
-		const values = responseIds
-			.map((id) => answersByResponse.get(id)?.get(question.id))
-			.filter((value) => value !== undefined)
-		if (question.kind === 'scale') {
-			const numbers = values.filter((value): value is number => typeof value === 'number')
-			const average = numbers.length
-				? numbers.reduce((sum, value) => sum + value, 0) / numbers.length
-				: null
-			return { cohort, n: values.length, summary: average === null ? '—' : average.toFixed(2) }
-		}
-		const counts = new Map<string, number>()
-		for (const value of values.flatMap((value) => (Array.isArray(value) ? value : [value]))) {
-			const key = formatAnswerValue(value)
-			counts.set(key, (counts.get(key) ?? 0) + 1)
-		}
-		const top = [...counts.entries()].sort((left, right) => right[1] - left[1])[0]
-		return { cohort, n: values.length, summary: top ? `${top[0]} (${top[1]})` : '—' }
-	})
-
-	if (rows.length === 0) return null
-	return (
-		<>
-			<div className="masthead-rule" />
-			<table className="tbl">
-				<thead>
-					<tr>
-						<th>Cohort</th>
-						<th>n</th>
-						<th>{question.kind === 'scale' ? 'Average' : 'Most common'}</th>
-					</tr>
-				</thead>
-				<tbody>
-					{rows.map((row) => (
-						<tr key={row.cohort}>
-							<td>{row.cohort}</td>
-							<td>{row.n}</td>
-							<td>{row.summary}</td>
-						</tr>
-					))}
-				</tbody>
-			</table>
-		</>
-	)
-}
-
 async function readSurveyErrorCode(response: Response): Promise<SurveyErrorCode | null> {
 	const headerCode = response.headers.get(SURVEY_ERROR_CODE_HEADER)
 	if (!isSurveyErrorCode(headerCode)) return null
@@ -619,7 +1102,7 @@ function respondentLabel(response: SurveyResults['responses'][number]): string {
 			? `${response.respondent.label} · ${response.respondent.detail}`
 			: response.respondent.label
 	}
-	return response.anonymous ? 'Anonymous' : 'Known respondent'
+	return response.anonymous ? 'Anonymous' : 'Signed-in reader'
 }
 
 function formatAnswerValue(value: unknown): string {
@@ -650,36 +1133,32 @@ function StatusPage({
 	)
 }
 
-function CountTable({ values }: { values: Record<string, number> }) {
-	const total = Object.values(values).reduce((sum, count) => sum + count, 0)
-	return (
-		<dl className="count-list">
-			{Object.entries(values).map(([label, count]) => (
-				<div key={label}>
-					<dt>{label}</dt>
-					<dd>
-						{count}
-						{total > 0 ? ` · ${Math.round((count / total) * 100)}%` : ''}
-					</dd>
-				</div>
-			))}
-		</dl>
-	)
+function surveyStatusLabel(status: SurveyResults['survey']['status']): string {
+	if (status === 'active') return 'open'
+	if (status === 'closed') return 'closed'
+	return 'draft'
 }
 
 function segmentLabel(segment: 'member' | 'non_member' | 'unknown'): string {
 	if (segment === 'member') return 'Member'
 	if (segment === 'non_member') return 'Non-member'
-	return 'Unknown'
+	return 'Membership unknown'
 }
 
 function questionAudienceLabel(audience: 'all' | 'member' | 'non_member'): string {
-	if (audience === 'member') return 'Members'
-	if (audience === 'non_member') return 'Non-members'
-	return 'Everyone'
+	if (audience === 'member') return 'asked members'
+	if (audience === 'non_member') return 'asked non-members'
+	return 'asked everyone'
 }
 
 function formatTime(value: string): string {
 	const date = new Date(value)
 	return Number.isNaN(date.getTime()) ? value : date.toLocaleString()
 }
+
+function formatDate(value: string): string {
+	const date = new Date(value)
+	return Number.isNaN(date.getTime())
+		? value
+		: date.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' })
+}