@growth-labs/cms 0.8.26 → 0.8.30

package/src/ui/screens/SurveyResponsesScreen.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { type ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import type { CmsRole } from '../../schema/types.js'
 import { canLabelSurveyAnswers, canViewSurveyVerbatims } from '../../surveys/access.js'
 import {
@@ -31,6 +31,7 @@ import {
 import {
 	MAX_FREE_TEXT_ENTRIES,
 	type SurveyAnswerLabel,
+	type SurveyFeedbackTheme,
 	type SurveyQuestion,
 	type SurveyResults,
 	SurveyResultsSchema,
@@ -89,7 +90,72 @@ 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 }) {
+export interface SurveyChoice {
+	surveyId: string
+	label: string
+	feedbackThemes?: SurveyFeedbackTheme[]
+}
+
+export function SurveyResponsesScreen({
+	surveyId,
+	surveys,
+}: {
+	surveyId: string
+	surveys?: SurveyChoice[]
+}) {
+	const [selected, setSelected] = useState(surveyId)
+	const picker =
+		surveys && surveys.length > 1 ? (
+			<SurveyPicker surveys={surveys} selected={selected} onSelect={setSelected} />
+		) : null
+	// Keyed by survey, so switching starts clean: no page, comparison, filter or
+	// loaded responses carry over from one survey to another.
+	return (
+		<SurveyResultsView
+			key={selected}
+			surveyId={selected}
+			picker={picker}
+			feedbackThemes={surveys?.find((survey) => survey.surveyId === selected)?.feedbackThemes ?? []}
+		/>
+	)
+}
+
+export function SurveyPicker({
+	surveys,
+	selected,
+	onSelect,
+}: {
+	surveys: SurveyChoice[]
+	selected: string
+	onSelect: (surveyId: string) => void
+}) {
+	return (
+		<label className="svy-control">
+			<span className="kicker">Survey</span>
+			<select
+				className="selectbox"
+				value={selected}
+				onChange={(event) => onSelect(event.target.value)}
+			>
+				{surveys.map((survey) => (
+					<option key={survey.surveyId} value={survey.surveyId}>
+						{survey.label}
+					</option>
+				))}
+			</select>
+		</label>
+	)
+}
+
+function SurveyResultsView({
+	surveyId,
+	picker,
+	feedbackThemes,
+}: {
+	surveyId: string
+	picker: ReactNode
+	feedbackThemes: SurveyFeedbackTheme[]
+}) {
 	const [state, setState] = useState<SurveyResponsesState>({ kind: 'loading' })
 	const [offset, setOffset] = useState(0)
 	const [labelSaveFailed, setLabelSaveFailed] = useState(false)
@@ -189,6 +255,8 @@ export function SurveyResponsesScreen({ surveyId }: { surveyId: string }) {
 			labelSaveFailed={labelSaveFailed}
 			everyone={everyone}
 			onLoadEveryone={(total) => void loadEveryone(total)}
+			picker={picker}
+			feedbackThemes={feedbackThemes}
 		/>
 	)
 }
@@ -201,6 +269,18 @@ function withAnswerLabel(
 ): SurveyResults {
 	return {
 		...data,
+		responses: data.responses.map((response) =>
+			response.id !== responseId
+				? response
+				: {
+						...response,
+						answers: response.answers?.map((answer) =>
+							answer.questionId !== questionId
+								? answer
+								: { ...answer, label, labelSource: 'owner' },
+						),
+					},
+		),
 		freeText: data.freeText.map((entry) =>
 			entry.responseId === responseId && entry.questionId === questionId
 				? // A successful owner save stores source 'owner' server-side; the
@@ -224,6 +304,8 @@ export function SurveyResponsesBody({
 	onLoadEveryone,
 	compareBy = '',
 	commentMood = '',
+	picker = null,
+	feedbackThemes = [],
 }: {
 	surveyId: string
 	state: SurveyResponsesState
@@ -239,30 +321,40 @@ export function SurveyResponsesBody({
 	compareBy?: string
 	/** The comment mood filter to open with; the screen starts with all readers. */
 	commentMood?: Mood | ''
+	/** The survey switcher, shown in the header when there is more than one survey. */
+	picker?: ReactNode
+	feedbackThemes?: SurveyFeedbackTheme[]
 }) {
 	const canSeeVerbatims = canViewSurveyVerbatims(role)
 	const canLabel = canLabelSurveyAnswers(role)
 
-	if (state.kind === 'loading') return <StatusPage title="Loading survey responses…" />
+	if (state.kind === 'loading')
+		return <StatusPage picker={picker} title="Loading survey responses…" />
 	if (state.kind === 'forbidden')
-		return <StatusPage title="You do not have permission to view survey responses." />
+		return (
+			<StatusPage picker={picker} title="You do not have permission to view survey responses." />
+		)
 	if (state.kind === 'unavailable')
-		return <StatusPage title="Survey reporting is not configured for this site." />
+		return <StatusPage picker={picker} title="Survey reporting is not configured for this site." />
 	if (state.kind === 'auth_failed')
 		return (
 			<StatusPage
+				picker={picker}
 				title="Survey reporting rejected this site’s credentials."
 				detail="The signing secret shared with the reporting upstream is missing or does not match."
 				retry={onRetry}
 			/>
 		)
 	if (state.kind === 'malformed')
-		return <StatusPage title="Masthead received invalid survey data." retry={onRetry} />
+		return (
+			<StatusPage picker={picker} title="Masthead received invalid survey data." retry={onRetry} />
+		)
 	if (state.kind === 'not_found')
-		return <StatusPage title="The configured survey could not be found." />
+		return <StatusPage picker={picker} title="The configured survey could not be found." />
 	if (state.kind === 'retryable')
 		return (
 			<StatusPage
+				picker={picker}
 				title="Survey responses could not be loaded."
 				detail="The request did not reach the reporting upstream, or it failed before replying."
 				retry={onRetry}
@@ -285,12 +377,15 @@ export function SurveyResponsesBody({
 							: `${total} ${total === 1 ? 'response' : 'responses'} · ${surveyStatusLabel(data.survey.status)}`}
 					</div>
 				</div>
-				<a
-					className="btn"
-					href={`/admin/api/surveys/${encodeURIComponent(surveyId)}/responses.csv`}
-				>
-					Export CSV
-				</a>
+				<div className="svy-head-actions">
+					{picker}
+					<a
+						className="btn"
+						href={`/admin/api/surveys/${encodeURIComponent(surveyId)}/responses.csv`}
+					>
+						Export CSV
+					</a>
+				</div>
 			</div>
 
 			{total === 0 ? (
@@ -309,6 +404,8 @@ export function SurveyResponsesBody({
 						initialCompareBy={compareBy}
 					/>
 
+					{feedbackThemes.length > 0 && <FeedbackThemes themes={feedbackThemes} />}
+
 					{canSeeVerbatims ? (
 						<Comments
 							data={data}
@@ -336,6 +433,51 @@ export function SurveyResponsesBody({
 	)
 }
 
+// Existing site configuration supplies reviewed statuses; the survey payload stays unchanged.
+function FeedbackThemes({ themes }: { themes: SurveyFeedbackTheme[] }) {
+	const states: Record<SurveyFeedbackTheme['state'], string> = {
+		open: 'Open',
+		partly_shipped: 'Partly shipped',
+		shipped: 'Shipped',
+		unknown: 'Not verified',
+	}
+	return (
+		<section className="svy-section" aria-labelledby="survey-feedback-themes">
+			<div className="svy-section-head">
+				<div className="kicker">Recurring feedback</div>
+				<h2 className="card-title" id="survey-feedback-themes">
+					You said → we shipped
+				</h2>
+				<p className="page-sub">
+					Reviewed delivery notes for recurring reader themes. These are dated updates, not live
+					issue statuses or counts of survey answers. Open work stays visible.
+				</p>
+			</div>
+			<div className="svy-grid">
+				{themes.map((theme) => (
+					<article className="card" key={theme.id} data-feedback-theme={theme.id}>
+						<div className="kicker">{states[theme.state]}</div>
+						<h3 className="svy-q-prompt">{theme.title}</h3>
+						<p className="svy-takeaway">{theme.summary}</p>
+						<p className="svy-note">
+							Reviewed <time dateTime={theme.reviewedAt}>{theme.reviewedAt.slice(0, 10)}</time>
+						</p>
+						{theme.evidence.length > 0 && (
+							<ul className="svy-note">
+								{theme.evidence.map((link) => (
+									<li key={link.href}>
+										<a href={link.href}>{link.label}</a>
+									</li>
+								))}
+							</ul>
+						)}
+					</article>
+				))}
+			</div>
+		</section>
+	)
+}
+
 // ── Headline ────────────────────────────────────────────────────────────
 
 // The first scale question is the survey's headline number. Leading with the
@@ -816,15 +958,31 @@ function Comments({
 
 	// Non-owners never receive technical or unlabeled entries (the route filters
 	// server-side), so for them this feed is already the general thread.
+	const writtenAnswers: WrittenAnswer[] = [...data.freeText]
+	for (const response of everyone.kind === 'ready' ? everyone.responses : data.responses) {
+		for (const answer of response.answers ?? []) {
+			if (answer.writtenValue === undefined) continue
+			writtenAnswers.push({
+				questionId: answer.questionId,
+				responseId: response.id,
+				submittedAt: response.submittedAt,
+				value: answer.writtenValue,
+				label: answer.label,
+				labelSource: answer.labelSource,
+				classificationStatus: answer.classificationStatus,
+				nextAttemptAt: answer.nextAttemptAt,
+			})
+		}
+	}
 	const visibleFreeText =
-		labelFilter === 'all' ? data.freeText : data.freeText.filter((e) => e.label === labelFilter)
+		labelFilter === 'all' ? writtenAnswers : writtenAnswers.filter((e) => e.label === labelFilter)
 	const writtenByResponse = new Map<string, WrittenAnswer[]>()
 	for (const entry of visibleFreeText) {
 		const entries = writtenByResponse.get(entry.responseId) ?? []
 		entries.push(entry)
 		writtenByResponse.set(entry.responseId, entries)
 	}
-	const wroteSomething = new Set(data.freeText.map((entry) => entry.responseId))
+	const wroteSomething = new Set(writtenAnswers.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
@@ -949,13 +1107,15 @@ function Comments({
 						const mood = moodOf(response)
 						const others = (response.answers ?? []).filter(
 							(answer) =>
-								!textQuestionIds.has(answer.questionId) && answer.questionId !== headline?.id,
+								!textQuestionIds.has(answer.questionId) &&
+								answer.writtenValue === undefined &&
+								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 ? (
+										{textQuestions.length > 1 || !textQuestionIds.has(entry.questionId) ? (
 											<div className="kicker">{promptById.get(entry.questionId)}</div>
 										) : null}
 										<blockquote className="svy-quote">{entry.value}</blockquote>
@@ -984,6 +1144,21 @@ function Comments({
 												>
 													General
 												</button>
+												{!entry.label && entry.classificationStatus ? (
+													<span className="svy-meta" role="status">
+														{entry.classificationStatus === 'pending'
+															? 'Classification in progress. Reload to check the result.'
+															: entry.classificationStatus === 'manual_review'
+																? 'Choose a label manually.'
+																: entry.classificationStatus === 'retry'
+																	? `Classification failed. ${entry.nextAttemptAt ? `Retry eligible after ${formatTime(new Date(entry.nextAttemptAt).toISOString())}. ` : ''}Reload to retry, or choose a label.`
+																	: entry.classificationStatus === 'expired'
+																		? 'Classification timed out. Reload to schedule a retry, or choose a label.'
+																		: entry.classificationStatus === 'unavailable'
+																			? 'Classification status unavailable. Reload or choose a label.'
+																			: 'Awaiting classification. Reload to check, or choose a label.'}
+													</span>
+												) : null}
 												{entry.labelSource === 'auto' ? (
 													<span
 														className="chip is-quiet"
@@ -1114,14 +1289,19 @@ function StatusPage({
 	title,
 	detail,
 	retry,
+	picker = null,
 }: {
 	title: string
 	detail?: string
 	retry?: () => void
+	picker?: ReactNode
 }) {
 	return (
 		<div className="page" role="status">
-			<h1 className="page-title">Survey responses</h1>
+			<div className="page-head">
+				<h1 className="page-title">Survey responses</h1>
+				{picker}
+			</div>
 			<p className="page-sub">{title}</p>
 			{detail ? <p className="page-sub">{detail}</p> : null}
 			{retry ? (

package/src/ui/screens/registry.tsx

@@ -25,7 +25,7 @@ import { PodcastListeningScreen } from './PodcastListeningScreen.js'
 import { SettingsScreen } from './SettingsScreen.js'
 import { SocialShareScreen } from './SocialShareScreen.js'
 import { SubscriptionsScreen } from './SubscriptionsScreen.js'
-import { SurveyResponsesScreen } from './SurveyResponsesScreen.js'
+import { type SurveyChoice, SurveyResponsesScreen } from './SurveyResponsesScreen.js'
 import { TopicsScreen } from './TopicsScreen.js'
 
 // Thin wrappers that supply the openDoc seam for screens that need it.
@@ -47,12 +47,14 @@ export function createCmsScreens({
 	primaryTopic,
 	contentMetadataSelects = [],
 	surveyId,
+	surveys,
 }: {
 	allowInlineAuthorCreation?: boolean
 	primaryCategories?: Array<{ slug: string; label: string }>
 	primaryTopic?: PrimaryTopicControl
 	contentMetadataSelects?: ContentMetadataSelectField[]
 	surveyId?: string
+	surveys?: SurveyChoice[]
 } = {}): ScreenRegistry {
 	return {
 		content: () => (
@@ -73,7 +75,9 @@ export function createCmsScreens({
 		topics: () => <TopicsScreen />,
 		subscriptions: () => <SubscriptionsScreen />,
 		...(surveyId
-			? { 'survey-responses': () => <SurveyResponsesScreen surveyId={surveyId} /> }
+			? {
+					'survey-responses': () => <SurveyResponsesScreen surveyId={surveyId} surveys={surveys} />,
+				}
 			: {}),
 		'social-share': () => (
 			<SocialShareScreen allowInlineAuthorCreation={allowInlineAuthorCreation} />

package/src/ui/styles/broadsheet.css

@@ -533,3 +533,4 @@ button.chip:hover { background: var(--hover); color: var(--ink); }
   .svy-big { font-size: 44px; }
   .svy-control { min-width: 0; width: 100%; max-width: none; }
 }
+.svy-head-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }