@growth-labs/cms 0.5.5 → 0.5.7

package/src/ui/editor/AiAssistPanel.tsx

@@ -27,6 +27,13 @@ interface ActionMeta {
 }
 
 const ACTIONS: ActionMeta[] = [
+	{
+		action: 'dek',
+		icon: 'sparkle',
+		title: 'Suggest subheading',
+		description: 'Display copy in house voice',
+		kind: 'sync',
+	},
 	{
 		action: 'proofread',
 		icon: 'wand',
@@ -74,6 +81,10 @@ interface PanelState {
 	headlines: string[]
 	/** Meta description text from the sync result (for the "Apply" button). */
 	metaDescription: string | null
+	/** Generated display subheading. */
+	dek: string | null
+	/** Whether the generated subheading was applied to the controlled form. */
+	dekApplied: boolean
 	/** Whether the meta was applied/written. */
 	metaApplied: boolean
 	/** Whether the takeaways were written (server-side). */
@@ -89,6 +100,8 @@ const INITIAL_STATE: PanelState = {
 	activeAction: null,
 	headlines: [],
 	metaDescription: null,
+	dek: null,
+	dekApplied: false,
 	metaApplied: false,
 	takeawaysWritten: false,
 	locked: false,
@@ -103,9 +116,11 @@ export interface AiAssistPanelProps {
 	docId: string
 	/** Called when the meta description should be applied to the SEO description field. */
 	onMetaApplied?: (description: string) => void
+	/** Called after an unlocked generated dek is stored, keeping the form in sync. */
+	onDekApplied?: (dek: string) => void
 }
 
-export function AiAssistPanel({ docId, onMetaApplied }: AiAssistPanelProps) {
+export function AiAssistPanel({ docId, onMetaApplied, onDekApplied }: AiAssistPanelProps) {
 	const [state, setState] = useState<PanelState>(INITIAL_STATE)
 
 	const handleAction = useCallback(
@@ -118,6 +133,8 @@ export function AiAssistPanel({ docId, onMetaApplied }: AiAssistPanelProps) {
 				activeAction: meta.action,
 				headlines: [],
 				metaDescription: null,
+				dek: null,
+				dekApplied: false,
 				metaApplied: false,
 				takeawaysWritten: false,
 				locked: false,
@@ -142,7 +159,18 @@ export function AiAssistPanel({ docId, onMetaApplied }: AiAssistPanelProps) {
 				} else {
 					// Sync: takeaways or meta-description
 					const data = (await syncAi(meta.action, docId)) as Record<string, unknown>
-					if (meta.action === 'meta-description') {
+					if (meta.action === 'dek') {
+						const dek = typeof data.dek === 'string' ? data.dek : null
+						const written = data.written === true
+						if (dek && written) onDekApplied?.(dek)
+						setState((prev) => ({
+							...prev,
+							running: null,
+							dek,
+							dekApplied: Boolean(dek && written),
+							locked: data.locked === true,
+						}))
+					} else if (meta.action === 'meta-description') {
 						setState((prev) => ({
 							...prev,
 							running: null,
@@ -167,7 +195,7 @@ export function AiAssistPanel({ docId, onMetaApplied }: AiAssistPanelProps) {
 				}))
 			}
 		},
-		[docId],
+		[docId, onDekApplied],
 	)
 
 	const applyMeta = useCallback(async () => {
@@ -262,6 +290,30 @@ export function AiAssistPanel({ docId, onMetaApplied }: AiAssistPanelProps) {
 				)}
 
 			{/* Result pane — sync: meta description */}
+			{state.activeAction === 'dek' && state.dek !== null && (
+				<div style={resultPane}>
+					<div style={resultHeader}>
+						<span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-soft)' }}>
+							Suggested subheading
+						</span>
+						{state.locked && (
+							<span style={{ fontSize: 11, color: 'var(--amber)', marginLeft: 6 }}>
+								field locked — not written
+							</span>
+						)}
+					</div>
+					<p style={{ fontSize: 13, color: 'var(--ink)', lineHeight: 1.5, margin: '6px 0' }}>
+						{state.dek}
+					</p>
+					{state.dekApplied && (
+						<span style={{ fontSize: 12, color: 'var(--green)' }}>
+							<Icon name="checkCircle" size={13} style={{ marginRight: 4 }} />
+							Applied to subheading
+						</span>
+					)}
+				</div>
+			)}
+
 			{state.activeAction === 'meta-description' && state.metaDescription !== null && (
 				<div style={resultPane}>
 					<div style={resultHeader}>

package/src/ui/editor/ContentForm.tsx

@@ -795,7 +795,9 @@ export function ContentForm({
 			</div>
 
 			{/* AI assist panel — shown when toggle is on and doc is saved */}
-			{form.aiOpen && form.savedId !== null && <AiAssistPanel docId={form.savedId} />}
+			{form.aiOpen && form.savedId !== null && (
+				<AiAssistPanel docId={form.savedId} onDekApplied={handleDekChange} />
+			)}
 
 			{/* Title */}
 			<div style={fieldGroup}>

package/src/ui/editor/ai-assist.ts

@@ -10,8 +10,8 @@
 //   streamAi(action, docId, onChunk) → reads SSE body incrementally
 //   syncAi(action, docId)            → POSTs and returns parsed JSON
 
-/** The four AI actions supported by the panel. */
-export type AiAction = 'proofread' | 'headlines' | 'takeaways' | 'meta-description'
+/** The AI actions supported by the panel. */
+export type AiAction = 'dek' | 'proofread' | 'headlines' | 'takeaways' | 'meta-description'
 
 /**
  * Build the URL for a given AI action + doc id.

package/src/ui/hash-router.ts

@@ -11,6 +11,7 @@ export const ROUTES = [
 	'topics',
 	'content-insights',
 	'subscriptions',
+	'survey-responses',
 	'social-share',
 	'settings',
 ] as const

package/src/ui/nav.ts

@@ -1,6 +1,8 @@
 // src/ui/nav.ts — the Masthead sidebar nav model. Two groups, 11 items
 // (spec §6: Social Share added between Subscriptions and Settings).
 
+import type { CmsRole } from '../schema/types.js'
+import { canViewSurveyResponses } from '../surveys/access.js'
 import type { Route } from './hash-router.js'
 import type { IconName } from './icons.js'
 
@@ -33,6 +35,7 @@ export const NAV_MODEL: NavGroup[] = [
 			{ id: 'topics', label: 'Topics & tags', icon: 'tag' },
 			{ id: 'content-insights', label: 'Content Insights', icon: 'sparkle' },
 			{ id: 'subscriptions', label: 'Subscriptions', icon: 'inbox' },
+			{ id: 'survey-responses', label: 'Survey responses', icon: 'chart' },
 			{ id: 'social-share', label: 'Social Share', icon: 'share' },
 			{ id: 'settings', label: 'Settings', icon: 'settings' },
 		],
@@ -40,9 +43,19 @@ export const NAV_MODEL: NavGroup[] = [
 ]
 
 /** Build the nav with live counts merged onto matching item ids. */
-export function navItems(counts: Partial<Record<Route, number>> = {}): NavGroup[] {
+export function navItems(
+	counts: Partial<Record<Route, number>> = {},
+	options: { surveyResultsEnabled?: boolean; role?: CmsRole | null } = {
+		surveyResultsEnabled: true,
+		role: 'owner',
+	},
+): NavGroup[] {
+	const canViewSurvey =
+		options.surveyResultsEnabled !== false && canViewSurveyResponses(options.role)
 	return NAV_MODEL.map((g) => ({
 		group: g.group,
-		items: g.items.map((i) => (counts[i.id] != null ? { ...i, count: counts[i.id] } : { ...i })),
+		items: g.items
+			.filter((item) => item.id !== 'survey-responses' || canViewSurvey)
+			.map((i) => (counts[i.id] != null ? { ...i, count: counts[i.id] } : { ...i })),
 	}))
 }

package/src/ui/screens/SurveyResponsesScreen.tsx

@@ -0,0 +1,271 @@
+import { useCallback, useEffect, useState } from 'react'
+import {
+	isSurveyErrorCode,
+	SURVEY_ERROR_CODE_HEADER,
+	SURVEY_ERROR_DEFINITIONS,
+	type SurveyErrorCode,
+} from '../../surveys/errors.js'
+import { type SurveyResults, SurveyResultsSchema } from '../../surveys/schema.js'
+
+export type SurveyResponsesState =
+	| { kind: 'loading' }
+	| { kind: 'ready'; data: SurveyResults }
+	| { kind: 'forbidden' }
+	| { kind: 'unavailable' }
+	| { kind: 'malformed' }
+	| { kind: 'not_found' }
+	| { kind: 'retryable' }
+
+export function parseSurveyResultsPayload(value: unknown): SurveyResults | null {
+	const parsed = SurveyResultsSchema.safeParse(value)
+	return parsed.success ? parsed.data : null
+}
+
+export async function classifySurveyResultsResponse(
+	response: Response,
+): Promise<SurveyResponsesState> {
+	if (response.ok) {
+		const data = parseSurveyResultsPayload(await response.json().catch(() => null))
+		return data ? { kind: 'ready', data } : { kind: 'malformed' }
+	}
+
+	const code = await readSurveyErrorCode(response)
+	if ((response.status === 401 || response.status === 403) && code === 'survey_forbidden') {
+		return { kind: 'forbidden' }
+	}
+	if (response.status === 404 && code === 'survey_not_found') return { kind: 'not_found' }
+	if (response.status === 502 && code === 'survey_provider_malformed') {
+		return { kind: 'malformed' }
+	}
+	if (response.status === 503 && code === 'survey_provider_unavailable') {
+		return { kind: 'unavailable' }
+	}
+	return { kind: 'retryable' }
+}
+
+export function SurveyResponsesScreen({ surveyId }: { surveyId: string }) {
+	const [state, setState] = useState<SurveyResponsesState>({ kind: 'loading' })
+	const load = useCallback(async () => {
+		setState({ kind: 'loading' })
+		try {
+			const response = await fetch(`/admin/api/surveys/${encodeURIComponent(surveyId)}`)
+			setState(await classifySurveyResultsResponse(response))
+		} catch {
+			setState({ kind: 'retryable' })
+		}
+	}, [surveyId])
+
+	useEffect(() => {
+		void load()
+	}, [load])
+
+	return <SurveyResponsesBody surveyId={surveyId} state={state} onRetry={load} />
+}
+
+export function SurveyResponsesBody({
+	surveyId,
+	state,
+	onRetry,
+}: {
+	surveyId: string
+	state: SurveyResponsesState
+	onRetry?: () => void
+}) {
+	if (state.kind === 'loading') return <StatusPage title="Loading survey responses…" />
+	if (state.kind === 'forbidden')
+		return <StatusPage 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." />
+	if (state.kind === 'malformed')
+		return <StatusPage title="Masthead received invalid survey data." retry={onRetry} />
+	if (state.kind === 'not_found')
+		return <StatusPage title="The configured survey could not be found." />
+	if (state.kind === 'retryable')
+		return <StatusPage title="Survey responses could not be loaded." retry={onRetry} />
+
+	const { data } = state
+	const freeTextByQuestion = new Map<string, SurveyResults['freeText']>()
+	for (const entry of data.freeText) {
+		const entries = freeTextByQuestion.get(entry.questionId) ?? []
+		entries.push(entry)
+		freeTextByQuestion.set(entry.questionId, entries)
+	}
+
+	return (
+		<div className="page page-wide fade-in" style={{ maxWidth: 1340 }}>
+			<div className="page-head">
+				<div>
+					<h1 className="page-title">{data.survey.title}</h1>
+					<div className="page-sub">
+						{data.survey.responseCount} {data.survey.responseCount === 1 ? 'response' : 'responses'}{' '}
+						· {data.survey.status}
+					</div>
+				</div>
+				<a
+					className="btn"
+					href={`/admin/api/surveys/${encodeURIComponent(surveyId)}/responses.csv`}
+				>
+					Export CSV
+				</a>
+			</div>
+
+			{data.survey.responseCount === 0 ? (
+				<div className="card" role="status">
+					<h2 className="card-title">No responses yet</h2>
+					<p className="page-sub">Aggregates and free-text answers will appear after submission.</p>
+				</div>
+			) : (
+				<section className="card" aria-labelledby="survey-response-list">
+					<h2 className="card-title" id="survey-response-list">
+						Recent responses
+					</h2>
+					<div className="masthead-rule" />
+					<table className="tbl">
+						<thead>
+							<tr>
+								<th>Submitted</th>
+								<th>Channel</th>
+								<th>Audience</th>
+								<th>Attribution</th>
+							</tr>
+						</thead>
+						<tbody>
+							{data.responses.map((response) => (
+								<tr key={response.id}>
+									<td>
+										<time dateTime={response.submittedAt}>{formatTime(response.submittedAt)}</time>
+									</td>
+									<td>{response.channel}</td>
+									<td>{segmentLabel(response.respondentSegment)}</td>
+									<td>{response.anonymous ? 'Anonymous' : 'Known respondent'}</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</section>
+			)}
+
+			<section aria-labelledby="survey-aggregates" style={{ marginTop: 24 }}>
+				<h2 className="page-title" id="survey-aggregates" style={{ fontSize: 22 }}>
+					Question aggregates
+				</h2>
+				<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} free-text responses</p>
+							)}
+						</article>
+					))}
+				</div>
+			</section>
+
+			<section aria-labelledby="survey-free-text" style={{ marginTop: 24 }}>
+				<h2 className="page-title" id="survey-free-text" style={{ fontSize: 22 }}>
+					Free-text responses
+				</h2>
+				{data.questions
+					.filter((question) => question.kind === 'text')
+					.map((question) => (
+						<div className="card" key={question.id} style={{ marginTop: 12 }}>
+							<h3 className="card-title">{question.prompt}</h3>
+							{(freeTextByQuestion.get(question.id) ?? []).length === 0 ? (
+								<p className="page-sub">No free-text responses.</p>
+							) : (
+								<ul>
+									{(freeTextByQuestion.get(question.id) ?? []).map((entry) => (
+										<li key={`${entry.responseId}:${entry.submittedAt}`}>{entry.value}</li>
+									))}
+								</ul>
+							)}
+						</div>
+					))}
+			</section>
+		</div>
+	)
+}
+
+async function readSurveyErrorCode(response: Response): Promise<SurveyErrorCode | null> {
+	const headerCode = response.headers.get(SURVEY_ERROR_CODE_HEADER)
+	if (!isSurveyErrorCode(headerCode)) return null
+	if (headerCode === 'survey_forbidden' && (response.status === 401 || response.status === 403)) {
+		return headerCode
+	}
+
+	const body = await response.json().catch(() => null)
+	if (!isPlainRecord(body) || Object.keys(body).length !== 2) return null
+	if (!isSurveyErrorCode(body.code) || body.code !== headerCode) return null
+	return body.error === SURVEY_ERROR_DEFINITIONS[body.code].error ? body.code : null
+}
+
+function isPlainRecord(value: unknown): value is Record<string, unknown> {
+	return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function StatusPage({
+	title,
+	detail,
+	retry,
+}: {
+	title: string
+	detail?: string
+	retry?: () => void
+}) {
+	return (
+		<div className="page" role="status">
+			<h1 className="page-title">Survey responses</h1>
+			<p className="page-sub">{title}</p>
+			{detail && <p className="page-sub">{detail}</p>}
+			{retry && (
+				<button type="button" className="btn" onClick={retry}>
+					Retry
+				</button>
+			)}
+		</div>
+	)
+}
+
+function CountTable({ values }: { values: Record<string, number> }) {
+	return (
+		<table className="tbl">
+			<tbody>
+				{Object.entries(values).map(([label, count]) => (
+					<tr key={label}>
+						<th scope="row">{label}</th>
+						<td className="tnum">{count}</td>
+					</tr>
+				))}
+			</tbody>
+		</table>
+	)
+}
+
+function formatTime(value: string): string {
+	const date = new Date(value)
+	return Number.isNaN(date.getTime()) ? value : date.toLocaleString()
+}
+
+function segmentLabel(value: 'member' | 'non_member' | 'unknown'): string {
+	if (value === 'member') return 'Member'
+	if (value === 'non_member') return 'Non-member'
+	return 'Unknown'
+}
+
+function questionAudienceLabel(value: 'all' | 'member' | 'non_member'): string {
+	if (value === 'member') return 'Members only'
+	if (value === 'non_member') return 'Non-members only'
+	return 'All respondents'
+}

package/src/ui/screens/registry.tsx

@@ -23,6 +23,7 @@ import { MediaScreen } from './MediaScreen.js'
 import { SettingsScreen } from './SettingsScreen.js'
 import { SocialShareScreen } from './SocialShareScreen.js'
 import { SubscriptionsScreen } from './SubscriptionsScreen.js'
+import { SurveyResponsesScreen } from './SurveyResponsesScreen.js'
 import { TopicsScreen } from './TopicsScreen.js'
 
 // Thin wrappers that supply the openDoc seam for screens that need it.
@@ -40,8 +41,10 @@ function CalendarRoute() {
 
 export function createCmsScreens({
 	allowInlineAuthorCreation = true,
+	surveyId,
 }: {
 	allowInlineAuthorCreation?: boolean
+	surveyId?: string
 } = {}): ScreenRegistry {
 	return {
 		content: () => <ContentRoute allowInlineAuthorCreation={allowInlineAuthorCreation} />,
@@ -53,6 +56,9 @@ export function createCmsScreens({
 		authors: () => <AuthorsScreen />,
 		topics: () => <TopicsScreen />,
 		subscriptions: () => <SubscriptionsScreen />,
+		...(surveyId
+			? { 'survey-responses': () => <SurveyResponsesScreen surveyId={surveyId} /> }
+			: {}),
 		'social-share': () => (
 			<SocialShareScreen allowInlineAuthorCreation={allowInlineAuthorCreation} />
 		),