@growth-labs/cms 0.8.24 → 0.8.28

package/dist/ui/screens/SurveyResponsesScreen.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { canLabelSurveyAnswers, canViewSurveyVerbatims } from '../../surveys/access.js';
 import { isSurveyErrorCode, SURVEY_ERROR_CODE_HEADER, SURVEY_ERROR_DEFINITIONS, } from '../../surveys/errors.js';
-import { SurveyResultsSchema, } from '../../surveys/schema.js';
+import { answerValue, compareQuestion, formatAverage, groupResponses, headlineScale, MEMBERSHIP_SPLIT, optionRows, percent, questionTakeaway, scaleMood, share, splitQuestions, summarizeScale, } from '../../surveys/readout.js';
+import { MAX_FREE_TEXT_ENTRIES, SurveyResultsSchema, } from '../../surveys/schema.js';
 import { useWorkspace } from '../workspace-context.js';
 export function parseSurveyResultsPayload(value) {
     const parsed = SurveyResultsSchema.safeParse(value);
@@ -32,10 +33,23 @@ export async function classifySurveyResultsResponse(response) {
     return { kind: 'retryable' };
 }
 const PAGE_SIZE = 100;
-export function SurveyResponsesScreen({ surveyId }) {
+// 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, surveys, }) {
+    const [selected, setSelected] = useState(surveyId);
+    const picker = surveys && surveys.length > 1 ? (_jsx(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 (_jsx(SurveyResultsView, { surveyId: selected, picker: picker, feedbackThemes: surveys?.find((survey) => survey.surveyId === selected)?.feedbackThemes ?? [] }, selected));
+}
+export function SurveyPicker({ surveys, selected, onSelect, }) {
+    return (_jsxs("label", { className: "svy-control", children: [_jsx("span", { className: "kicker", children: "Survey" }), _jsx("select", { className: "selectbox", value: selected, onChange: (event) => onSelect(event.target.value), children: surveys.map((survey) => (_jsx("option", { value: survey.surveyId, children: survey.label }, survey.surveyId))) })] }));
+}
+function SurveyResultsView({ surveyId, picker, feedbackThemes, }) {
     const [state, setState] = useState({ kind: 'loading' });
     const [offset, setOffset] = useState(0);
     const [labelSaveFailed, setLabelSaveFailed] = useState(false);
+    const [everyone, setEveryone] = useState({ kind: 'idle' });
     const load = useCallback(async (nextOffset) => {
         setState({ kind: 'loading' });
         try {
@@ -46,6 +60,30 @@ export function SurveyResponsesScreen({ surveyId }) {
             setState({ kind: 'retryable' });
         }
     }, [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) => {
+        setEveryone({ kind: 'loading' });
+        const responses = new Map();
+        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.
@@ -76,11 +114,19 @@ export function SurveyResponsesScreen({ surveyId }) {
         void load(offset);
     }, [load, offset]);
     const { state: workspace } = useWorkspace();
-    return (_jsx(SurveyResponsesBody, { surveyId: surveyId, state: state, offset: offset, role: workspace.user?.role ?? null, onRetry: () => void load(offset), onOffsetChange: setOffset, onSetLabel: setLabel, labelSaveFailed: labelSaveFailed }));
+    return (_jsx(SurveyResponsesBody, { surveyId: surveyId, state: state, offset: offset, role: workspace.user?.role ?? null, onRetry: () => void load(offset), onOffsetChange: setOffset, onSetLabel: setLabel, labelSaveFailed: labelSaveFailed, everyone: everyone, onLoadEveryone: (total) => void loadEveryone(total), picker: picker, feedbackThemes: feedbackThemes }));
 }
 function withAnswerLabel(data, responseId, questionId, label) {
     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
                 // optimistic copy reflects that instead of a stale 'auto' badge.
@@ -88,45 +134,119 @@ function withAnswerLabel(data, responseId, questionId, label) {
             : entry),
     };
 }
-export function SurveyResponsesBody({ surveyId, state, offset = 0, role = null, onRetry, onOffsetChange, onSetLabel, labelSaveFailed = false, }) {
+export function SurveyResponsesBody({ surveyId, state, offset = 0, role = null, onRetry, onOffsetChange, onSetLabel, labelSaveFailed = false, everyone = { kind: 'idle' }, onLoadEveryone, compareBy = '', commentMood = '', picker = null, feedbackThemes = [], }) {
     const canSeeVerbatims = canViewSurveyVerbatims(role);
     const canLabel = canLabelSurveyAnswers(role);
     if (state.kind === 'loading')
-        return _jsx(StatusPage, { title: "Loading survey responses\u2026" });
+        return _jsx(StatusPage, { picker: picker, title: "Loading survey responses\u2026" });
     if (state.kind === 'forbidden')
-        return _jsx(StatusPage, { title: "You do not have permission to view survey responses." });
+        return (_jsx(StatusPage, { picker: picker, title: "You do not have permission to view survey responses." }));
     if (state.kind === 'unavailable')
-        return _jsx(StatusPage, { title: "Survey reporting is not configured for this site." });
+        return _jsx(StatusPage, { picker: picker, title: "Survey reporting is not configured for this site." });
     if (state.kind === 'auth_failed')
-        return (_jsx(StatusPage, { title: "Survey reporting rejected this site\u2019s credentials.", detail: "The signing secret shared with the reporting upstream is missing or does not match.", retry: onRetry }));
+        return (_jsx(StatusPage, { picker: picker, title: "Survey reporting rejected this site\u2019s credentials.", detail: "The signing secret shared with the reporting upstream is missing or does not match.", retry: onRetry }));
     if (state.kind === 'malformed')
-        return _jsx(StatusPage, { title: "Masthead received invalid survey data.", retry: onRetry });
+        return (_jsx(StatusPage, { picker: picker, title: "Masthead received invalid survey data.", retry: onRetry }));
     if (state.kind === 'not_found')
-        return _jsx(StatusPage, { title: "The configured survey could not be found." });
+        return _jsx(StatusPage, { picker: picker, title: "The configured survey could not be found." });
     if (state.kind === 'retryable')
-        return (_jsx(StatusPage, { title: "Survey responses could not be loaded.", detail: "The request did not reach the reporting upstream, or it failed before replying.", retry: onRetry }));
+        return (_jsx(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 }));
     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;
-    return (_jsxs("div", { className: "page page-wide fade-in", style: { maxWidth: 1340 }, children: [_jsxs("div", { className: "page-head", children: [_jsxs("div", { children: [_jsx("h1", { className: "page-title", children: data.survey.title }), _jsxs("div", { className: "page-sub", children: [total === 0
-                                        ? 'No responses yet'
-                                        : `Showing ${rangeStart}–${rangeEnd} of ${total} ${total === 1 ? 'response' : 'responses'}`, ' ', "\u00B7 ", data.survey.status] })] }), _jsx("a", { className: "btn", href: `/admin/api/surveys/${encodeURIComponent(surveyId)}/responses.csv`, children: "Export CSV" })] }), total === 0 ? (_jsxs("div", { className: "card", role: "status", children: [_jsx("h2", { className: "card-title", children: "No responses yet" }), _jsx("p", { className: "page-sub", children: "Aggregates and answers will appear after submission." })] })) : (_jsxs(_Fragment, { children: [_jsx(HeadlineScale, { questions: data.questions }), canSeeVerbatims ? (_jsxs(_Fragment, { children: [canLabel && (data.unlabeledCount ?? 0) > 0 ? (_jsx("p", { className: "page-sub", role: "status", style: { marginTop: 24 }, children: unlabeledAnswersNotice(data.unlabeledCount ?? 0) })) : null, canLabel && (data.personalDetailsCount ?? 0) > 0 ? (_jsx("p", { className: "page-sub", role: "status", style: { marginTop: 24 }, children: personalDetailsNotice(data.personalDetailsCount ?? 0) })) : null, labelSaveFailed && canLabel ? (_jsx("p", { className: "page-sub", role: "alert", style: { marginTop: 24 }, children: "The last label change could not be saved. Try again." })) : null, _jsx(VerbatimFeed, { data: data, canLabel: canLabel, onSetLabel: onSetLabel })] })) : (_jsxs("div", { className: "card", role: "status", style: { marginTop: 24 }, children: [_jsx("h2", { className: "card-title", children: "Individual answers are restricted" }), _jsx("p", { className: "page-sub", children: "Aggregates below are available to your role. Verbatim answers and respondent attribution require owner or senior editor." })] })), _jsx(Aggregates, { data: data }), (offset > 0 || hasMore) && onOffsetChange ? (_jsxs("div", { className: "page-head", style: { marginTop: 24 }, children: [_jsx("button", { className: "btn", type: "button", disabled: offset === 0, onClick: () => onOffsetChange(Math.max(offset - PAGE_SIZE, 0)), children: "Previous" }), _jsx("button", { className: "btn", type: "button", disabled: !hasMore, onClick: () => onOffsetChange(offset + PAGE_SIZE), children: "Next" })] })) : null] }))] }));
+    const headline = headlineScale(data.questions);
+    return (_jsxs("div", { className: "page page-wide fade-in svy", style: { maxWidth: 1340 }, children: [_jsxs("div", { className: "page-head", children: [_jsxs("div", { children: [_jsx("div", { className: "kicker", children: "Survey results" }), _jsx("h1", { className: "page-title", children: data.survey.title }), _jsx("div", { className: "page-sub", children: total === 0
+                                    ? 'No responses yet'
+                                    : `${total} ${total === 1 ? 'response' : 'responses'} · ${surveyStatusLabel(data.survey.status)}` })] }), _jsxs("div", { className: "svy-head-actions", children: [picker, _jsx("a", { className: "btn", href: `/admin/api/surveys/${encodeURIComponent(surveyId)}/responses.csv`, children: "Export CSV" })] })] }), total === 0 ? (_jsxs("div", { className: "card", role: "status", children: [_jsx("h2", { className: "card-title", children: "No responses yet" }), _jsx("p", { className: "page-sub", children: "Charts and comments will appear after the first submission." })] })) : (_jsxs(_Fragment, { children: [headline && headline.answerCount > 0 ? _jsx(Headline, { question: headline }) : null, _jsx(Results, { data: data, everyone: everyone, onLoadEveryone: onLoadEveryone, initialCompareBy: compareBy }), feedbackThemes.length > 0 && _jsx(FeedbackThemes, { themes: feedbackThemes }), canSeeVerbatims ? (_jsx(Comments, { data: data, offset: offset, canLabel: canLabel, onSetLabel: onSetLabel, labelSaveFailed: labelSaveFailed, onOffsetChange: onOffsetChange, everyone: everyone, onLoadEveryone: onLoadEveryone, initialMood: commentMood })) : (_jsxs("div", { className: "card svy-section", role: "status", children: [_jsx("h2", { className: "card-title", children: "Individual answers are restricted" }), _jsx("p", { className: "page-sub", children: "The charts above are available to your role. What readers wrote, and who wrote it, requires owner or senior editor." })] }))] }))] }));
 }
+// Existing site configuration supplies reviewed statuses; the survey payload stays unchanged.
+function FeedbackThemes({ themes }) {
+    const states = {
+        open: 'Open',
+        partly_shipped: 'Partly shipped',
+        shipped: 'Shipped',
+        unknown: 'Not verified',
+    };
+    return (_jsxs("section", { className: "svy-section", "aria-labelledby": "survey-feedback-themes", children: [_jsxs("div", { className: "svy-section-head", children: [_jsx("div", { className: "kicker", children: "Recurring feedback" }), _jsx("h2", { className: "card-title", id: "survey-feedback-themes", children: "You said \u2192 we shipped" }), _jsx("p", { className: "page-sub", children: "Reviewed delivery notes for recurring reader themes. These are dated updates, not live issue statuses or counts of survey answers. Open work stays visible." })] }), _jsx("div", { className: "svy-grid", children: themes.map((theme) => (_jsxs("article", { className: "card", "data-feedback-theme": theme.id, children: [_jsx("div", { className: "kicker", children: states[theme.state] }), _jsx("h3", { className: "svy-q-prompt", children: theme.title }), _jsx("p", { className: "svy-takeaway", children: theme.summary }), _jsxs("p", { className: "svy-note", children: ["Reviewed ", _jsx("time", { dateTime: theme.reviewedAt, children: theme.reviewedAt.slice(0, 10) })] }), theme.evidence.length > 0 && (_jsx("ul", { className: "svy-note", children: theme.evidence.map((link) => (_jsx("li", { children: _jsx("a", { href: link.href, children: link.label }) }, link.href))) }))] }, theme.id))) })] }));
+}
+// ── Headline ────────────────────────────────────────────────────────────
 // 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 }) {
-    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);
-    return (_jsxs("section", { className: "card", "aria-labelledby": "survey-headline", style: { marginTop: 24 }, children: [_jsx("div", { className: "kicker", children: scale.prompt }), _jsxs("h2", { className: "card-title", id: "survey-headline", children: [share, "% rate ", midpoint.toFixed(1), " or better \u00B7 average", ' ', scale.average === null ? '—' : scale.average.toFixed(2)] }), _jsx(CountTable, { values: scale.distribution })] }));
+// distribution keeps one harsh comment from setting the tone of a readout.
+function Headline({ question }) {
+    const summary = summarizeScale(question.options, question.distribution);
+    return (_jsxs("section", { className: "card svy-headline", "aria-labelledby": "survey-headline", children: [_jsx("div", { className: "kicker", children: `Headline · Q${question.position + 1} · ${summary.answered} answered` }), _jsx("h2", { className: "svy-headline-prompt", id: "survey-headline", children: question.prompt }), _jsxs("div", { className: "svy-headline-body", children: [_jsxs("div", { children: [_jsx("div", { className: "svy-big", children: percent(summary.happy, summary.answered) }), _jsx("div", { className: "svy-big-label", children: `are happy — they rated it ${summary.happyRange} out of ${summary.max}` }), _jsxs("dl", { className: "svy-facts", children: [_jsxs("div", { children: [_jsxs("dt", { children: [_jsx("span", { className: "svy-swatch mood-unhappy", "aria-hidden": "true" }), `Unhappy (${summary.unhappyRange})`] }), _jsx("dd", { children: `${percent(summary.unhappy, summary.answered)} · ${people(summary.unhappy)}` })] }), summary.neutralValue !== null ? (_jsxs("div", { children: [_jsxs("dt", { children: [_jsx("span", { className: "svy-swatch mood-neutral", "aria-hidden": "true" }), `In the middle (${summary.neutralValue})`] }), _jsx("dd", { children: `${percent(summary.neutral, summary.answered)} · ${people(summary.neutral)}` })] })) : null, _jsxs("div", { children: [_jsxs("dt", { children: [_jsx("span", { className: "svy-swatch mood-happy", "aria-hidden": "true" }), `Happy (${summary.happyRange})`] }), _jsx("dd", { children: `${percent(summary.happy, summary.answered)} · ${people(summary.happy)}` })] }), _jsxs("div", { children: [_jsx("dt", { children: "Average" }), _jsx("dd", { children: `${formatAverage(summary.average)} out of ${summary.max}` })] })] })] }), _jsx(ScaleColumns, { question: question })] })] }));
+}
+function ScaleColumns({ question }) {
+    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 (_jsxs("figure", { className: "svy-cols", "aria-label": `How people rated it, from ${min} to ${max}`, children: [_jsx("div", { className: "svy-cols-plot", style: columns, children: values.map((value) => {
+                    const count = question.distribution[String(value)] ?? 0;
+                    return (_jsxs("div", { className: "svy-col", title: `Rated ${value}: ${people(count)} (${percent(count, summary.answered)})`, children: [_jsx("span", { className: "svy-col-value", children: percent(count, summary.answered) }), _jsx("span", { className: `svy-col-bar mood-${scaleMood(value, min, max)}`, style: { height: `${(count / peak) * 100}%` } })] }, value));
+                }) }), _jsx("div", { className: "svy-cols-axis", style: columns, children: values.map((value) => (_jsx("span", { children: value }, value))) }), summary.average !== null ? (_jsx("div", { className: "svy-cols-avg", children: _jsx("span", { style: { left: `${((summary.average - min + 0.5) / values.length) * 100}%` }, children: `▲ average ${formatAverage(summary.average)}` }) })) : null, _jsxs("figcaption", { className: "svy-cols-caption", children: [_jsx("span", { children: `${min} = lowest` }), _jsx("span", { children: `highest = ${max}` })] })] }));
+}
+// ── Results by question ─────────────────────────────────────────────────
+function Results({ data, everyone, onLoadEveryone, initialCompareBy, }) {
+    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 (_jsxs("section", { "aria-labelledby": "survey-results", className: "svy-section", children: [_jsxs("div", { className: "page-head svy-section-head", children: [_jsxs("div", { children: [_jsx("h2", { className: "page-title svy-h2", id: "survey-results", children: "What readers told us" }), _jsx("p", { className: "page-sub", children: `Each chart covers all ${total} responses. Percentages are of the people who answered that question.` })] }), _jsxs("label", { className: "svy-control", children: [_jsx("span", { className: "kicker", children: "Compare" }), _jsxs("select", { className: "selectbox", value: compareBy, onChange: (event) => setCompareBy(event.target.value), children: [_jsx("option", { value: "", children: "Everyone together" }), _jsx("option", { value: MEMBERSHIP_SPLIT, children: "Members vs non-members" }), candidates.map((question) => (_jsx("option", { value: question.id, children: question.kind === 'scale'
+                                            ? `Happy vs unhappy — ${question.prompt}`
+                                            : `By answer — ${question.prompt}` }, question.id)))] })] })] }), compareBy ? (_jsx(CompareStatus, { everyone: everyone, total: total, groups: groups, hiddenGroups: (allGroups?.length ?? 0) - (groups?.length ?? 0), onRetry: onLoadEveryone ? () => onLoadEveryone(total) : undefined })) : null, _jsx("div", { className: "svy-grid", children: gridQuestions.map((question) => (_jsx(QuestionCard, { question: question, total: total, groups: groups, isSplit: question.id === compareBy }, question.id))) })] }));
+}
+function CompareStatus({ everyone, total, groups, hiddenGroups, onRetry, }) {
+    if (everyone.kind === 'failed') {
+        return (_jsxs("div", { className: "svy-callout is-alert", role: "alert", children: ["Not every response could be loaded, so groups are not compared \u2014 a partial comparison would describe the wrong people.", ' ', onRetry ? (_jsx("button", { className: "btn sm", type: "button", onClick: onRetry, children: "Retry" })) : null] }));
+    }
+    if (everyone.kind !== 'ready' || !groups) {
+        return (_jsx("p", { className: "page-sub svy-compare-status", role: "status", children: `Loading all ${total} responses to compare groups…` }));
+    }
+    if (groups.length === 0) {
+        return (_jsx("p", { className: "svy-callout", role: "status", children: "Nobody has answered that question yet, so there are no groups to compare." }));
+    }
+    return (_jsxs("div", { className: "svy-legend", role: "status", children: [_jsx("span", { className: "page-sub", children: `Comparing all ${everyone.responses.length} responses:` }), groups.map((group, index) => (_jsxs("span", { className: "svy-legend-item", children: [_jsx("span", { className: `svy-swatch ${groupTone(group, index)}`, "aria-hidden": "true" }), `${group.label} · ${people(group.responses.length)}`] }, group.key))), hiddenGroups > 0 ? (_jsx("span", { className: "page-sub", children: `+${hiddenGroups} smaller ${hiddenGroups === 1 ? 'group' : 'groups'} not shown` })) : null] }));
+}
+function QuestionCard({ question, total, groups, isSplit, }) {
+    const comparison = groups && groups.length > 0 && !isSplit ? compareQuestion(question, groups) : null;
+    return (_jsxs("article", { className: "card svy-q", children: [_jsx("div", { className: "kicker", children: `Q${question.position + 1} · ${questionAudienceLabel(question.audience)} · ${question.answerCount} answered` }), _jsx("h3", { className: "svy-q-prompt", children: question.prompt }), _jsx("p", { className: "svy-takeaway", children: questionTakeaway(question, total) }), comparison && comparison.kind === 'choice' && groups ? (_jsx(GroupedBars, { rows: comparison.rows, groups: groups })) : comparison && comparison.kind === 'scale' && groups ? (_jsx(MoodBars, { summaries: comparison.byGroup, groups: groups })) : question.kind === 'single_choice' || question.kind === 'multi_choice' ? (_jsx(BarList, { rows: optionRows(question), of: question.answerCount })) : question.kind === 'scale' ? (_jsx(ScaleColumns, { question: question })) : (_jsx(BarList, { rows: [{ option: 'Wrote an answer', count: question.answerCount }], of: total })), question.kind === 'multi_choice' ? (_jsx("p", { className: "svy-note", children: "People could pick more than one, so these add up to more than 100%." })) : null, isSplit && groups ? (_jsx("p", { className: "svy-note", children: "The groups being compared come from this question." })) : null, comparison?.kind === 'none' ? (_jsx("p", { className: "svy-note", children: "Written answers are not split into groups \u2014 read them below." })) : null] }));
+}
+function BarList({ rows, of }) {
+    const top = Math.max(0, ...rows.map((row) => row.count));
+    return (_jsx("ul", { className: "svy-bars", children: rows.map((row) => (_jsxs("li", { className: "svy-bar", title: `${row.option}: ${row.count} of ${of} (${percent(row.count, of)})`, children: [_jsx("span", { className: "svy-bar-label", children: row.option }), _jsxs("span", { className: "svy-bar-value", children: [_jsx("strong", { children: percent(row.count, of) }), _jsx("span", { className: "svy-count", children: String(row.count) })] }), _jsx("span", { className: "svy-track", children: _jsx("span", { className: `svy-fill${top > 0 && row.count === top ? ' is-top' : ''}`, style: { width: `${share(row.count, of) * 100}%` } }) })] }, row.option))) }));
+}
+function GroupedBars({ rows, groups, }) {
+    return (_jsx("ul", { className: "svy-bars", children: rows.map((row, rowIndex) => (_jsxs("li", { className: "svy-bar is-grouped", children: [_jsx("span", { className: "svy-bar-label", children: row.option }), _jsx("span", { className: "svy-gbars", children: row.byGroup.map((cell, index) => {
+                        const group = groups[index];
+                        return (_jsxs("span", { className: "svy-gbar", title: `${group.label}: ${cell.count} of ${cell.answered} (${percent(cell.count, cell.answered)})`, children: [_jsx("span", { className: "svy-track sm", children: _jsx("span", { className: `svy-fill ${groupTone(group, index)}`, style: { width: `${share(cell.count, cell.answered) * 100}%` } }) }), _jsx("span", { className: "svy-gbar-value", children: rowIndex === 0
+                                        ? `${percent(cell.count, cell.answered)} ${group.label}`
+                                        : percent(cell.count, cell.answered) })] }, group.key));
+                    }) })] }, row.option))) }));
+}
+function people(count) {
+    return `${count} ${count === 1 ? 'person' : 'people'}`;
+}
+function groupTone(group, index) {
+    return group.mood ? `mood-${group.mood}` : `g${index}`;
+}
+function MoodBars({ summaries, groups }) {
+    return (_jsx("ul", { className: "svy-bars", children: summaries.map((summary, index) => {
+            const group = groups[index];
+            return (_jsxs("li", { className: "svy-bar", title: `${group.label}: ${summary.happy} happy, ${summary.neutral} in the middle, ${summary.unhappy} unhappy of ${summary.answered}`, children: [_jsx("span", { className: "svy-bar-label", children: group.label }), _jsxs("span", { className: "svy-bar-value", children: [_jsx("strong", { children: `${percent(summary.happy, summary.answered)} happy` }), _jsx("span", { className: "svy-count", children: `avg ${formatAverage(summary.average)}` })] }), _jsx("span", { className: "svy-track svy-stack", children: ['unhappy', 'neutral', 'happy'].map((mood) => summary[mood] > 0 ? (_jsx("span", { className: `svy-seg mood-${mood}`, style: { width: `${share(summary[mood], summary.answered) * 100}%` } }, mood)) : null) })] }, group.key));
+        }) }));
 }
 // The owner's loud surface for answers auto-labeling has not placed yet
 // (publishing #24): everything unlabeled is hidden from the team, so he sees
@@ -143,82 +263,117 @@ function personalDetailsNotice(count) {
         ? '1 answer contains personal details and needs your label.'
         : `${count} answers contain personal details and need your label.`;
 }
-function VerbatimFeed({ data, canLabel, onSetLabel, }) {
+function Comments({ data, offset, canLabel, onSetLabel, labelSaveFailed, onOffsetChange, everyone, onLoadEveryone, initialMood, }) {
     const [labelFilter, setLabelFilter] = useState('all');
-    const textQuestionIds = new Set(data.questions.filter((question) => question.kind === 'text').map((question) => question.id));
+    const [moodFilter, setMoodFilter] = useState(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) => {
+        if (!headline)
+            return null;
+        const value = answerValue(response, headline.id);
+        return typeof value === 'number' ? value : null;
+    };
+    const moodOf = (response) => {
+        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();
+    const writtenAnswers = [...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' ? writtenAnswers : writtenAnswers.filter((e) => e.label === labelFilter);
+    const writtenByResponse = new Map();
     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);
     }
-    return (_jsxs("section", { "aria-labelledby": "survey-verbatims", style: { marginTop: 24 }, children: [_jsxs("div", { className: "page-head", children: [_jsx("h2", { className: "page-title", id: "survey-verbatims", style: { fontSize: 22 }, children: "Responses" }), 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
-                    _jsx("div", { className: "chip-row", role: "group", "aria-label": "Filter written answers", children: ['all', 'general', 'technical'].map((option) => (_jsx("button", { className: "chip", type: "button", "aria-pressed": labelFilter === option, onClick: () => setLabelFilter(option), children: option === 'all' ? 'All' : option === 'general' ? 'General' : 'Technical' }, option))) })) : null] }), _jsx("div", { style: { marginTop: 12 }, children: data.responses.map((response) => {
-                    const written = freeTextByResponse.get(response.id) ?? [];
-                    const choices = (response.answers ?? []).filter((answer) => !textQuestionIds.has(answer.questionId));
-                    return (_jsxs("article", { className: "card", style: { marginTop: 12 }, children: [_jsxs("div", { className: "kicker", children: [_jsx("time", { dateTime: response.submittedAt, children: formatTime(response.submittedAt) }), " \u00B7", ' ', segmentLabel(response.respondentSegment), " \u00B7 ", respondentLabel(response)] }), written.length === 0 ? (_jsx("p", { className: "page-sub", children: "No written answer." })) : (written.map((entry) => (_jsxs("div", { children: [_jsx("blockquote", { children: entry.value }), canLabel && onSetLabel ? (
+    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
+    // 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 = !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 (_jsxs("section", { "aria-labelledby": "survey-verbatims", className: "svy-section", children: [_jsxs("div", { className: "page-head svy-section-head", children: [_jsxs("div", { children: [_jsx("h2", { className: "page-title svy-h2", id: "survey-verbatims", children: "What readers wrote" }), textQuestions.length > 0 ? (_jsx("p", { className: "page-sub", children: textQuestions.map((q) => `“${q.prompt}”`).join(' · ') })) : null, _jsx("p", { className: "page-sub", children: !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…` })] }), _jsxs("div", { className: "svy-filters", children: [canFilterByMood && moodRanges ? (_jsxs("label", { className: "svy-control", children: [_jsx("span", { className: "kicker", children: "From" }), _jsxs("select", { className: "selectbox", value: moodFilter, onChange: (event) => setMoodFilter(event.target.value), children: [_jsx("option", { value: "", children: "All readers" }), _jsx("option", { value: "unhappy", children: `Unhappy readers (${moodRanges.unhappyRange})` }), moodRanges.neutralValue !== null ? (_jsx("option", { value: "neutral", children: `Readers in the middle (${moodRanges.neutralValue})` })) : null, _jsx("option", { value: "happy", children: `Happy readers (${moodRanges.happyRange})` })] })] })) : 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
+                            _jsx("div", { className: "chip-row", role: "group", "aria-label": "Filter written answers", children: ['all', 'general', 'technical'].map((option) => (_jsx("button", { className: "chip", type: "button", "aria-pressed": labelFilter === option, onClick: () => setLabelFilter(option), children: option === 'all' ? 'All' : option === 'general' ? 'General' : 'Technical' }, option))) })) : null] })] }), canLabel && (data.unlabeledCount ?? 0) > 0 ? (_jsx("p", { className: "svy-callout", role: "status", children: unlabeledAnswersNotice(data.unlabeledCount ?? 0) })) : null, canLabel && (data.personalDetailsCount ?? 0) > 0 ? (_jsx("p", { className: "svy-callout", role: "status", children: personalDetailsNotice(data.personalDetailsCount ?? 0) })) : null, labelSaveFailed && canLabel ? (_jsx("p", { className: "svy-callout is-alert", role: "alert", children: "The last label change could not be saved. Try again." })) : null, filtering && everyone.kind === 'failed' ? (_jsxs("div", { className: "svy-callout is-alert", role: "alert", children: ["Not every response could be loaded, so the filter has nothing complete to search \u2014 a partial search would hide comments.", ' ', onLoadEveryone ? (_jsx("button", { className: "btn sm", type: "button", onClick: () => onLoadEveryone(total), children: "Retry" })) : null] })) : null, filtering && pool && freeTextCapped ? (_jsx("p", { className: "svy-callout", role: "status", children: `Only the newest ${MAX_FREE_TEXT_ENTRIES} written answers reach this screen, so older ones are not searched. Export CSV has every answer.` })) : null, !pool ? null : visible.length === 0 ? (_jsx("p", { className: "page-sub", children: filtering ? 'No comments match these filters.' : 'No comments on this page.' })) : (_jsx("div", { className: "svy-comments", children: visible.map((response) => {
+                    const rating = ratingOf(response);
+                    const mood = moodOf(response);
+                    const others = (response.answers ?? []).filter((answer) => !textQuestionIds.has(answer.questionId) &&
+                        answer.writtenValue === undefined &&
+                        answer.questionId !== headline?.id);
+                    return (_jsxs("article", { className: "card svy-comment", children: [(writtenByResponse.get(response.id) ?? []).map((entry) => (_jsxs("div", { className: "svy-comment-entry", children: [textQuestions.length > 1 || !textQuestionIds.has(entry.questionId) ? (_jsx("div", { className: "kicker", children: promptById.get(entry.questionId) })) : null, _jsx("blockquote", { className: "svy-quote", children: entry.value }), 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
-                                    _jsxs("div", { className: "chip-row", role: "group", "aria-label": `Classify the written answer from ${response.id}`, children: [_jsx("button", { className: "chip", type: "button", "aria-pressed": entry.label === 'technical', onClick: () => onSetLabel(entry.responseId, entry.questionId, 'technical'), children: "Technical" }), _jsx("button", { className: "chip", type: "button", "aria-pressed": entry.label === 'general', onClick: () => onSetLabel(entry.responseId, entry.questionId, 'general'), children: "General" }), entry.labelSource === 'auto' ? (_jsx("span", { className: "chip", title: "Labeled automatically \u2014 your choice overrides it", children: "auto" })) : null] })) : null] }, `${response.id}:${entry.questionId}`)))), _jsx("div", { className: "chip-row", children: choices.map((answer) => (_jsx("span", { className: "chip", title: promptById.get(answer.questionId) ?? answer.questionId, children: formatAnswerValue(answer.value) }, `${response.id}:${answer.questionId}`))) })] }, response.id));
-                }) })] }));
-}
-function Aggregates({ data }) {
-    // 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('');
-    const splitQuestion = splitCandidates.find((question) => question.id === splitBy);
-    const answersByResponse = useMemo(() => {
-        const map = new Map();
-        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();
-        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]);
-    return (_jsxs("section", { "aria-labelledby": "survey-aggregates", style: { marginTop: 24 }, children: [_jsxs("div", { className: "page-head", children: [_jsx("h2", { className: "page-title", id: "survey-aggregates", style: { fontSize: 22 }, children: "Question aggregates" }), _jsxs("label", { children: [_jsx("span", { className: "page-sub", children: "Split by " }), _jsxs("select", { value: splitBy, onChange: (event) => setSplitBy(event.target.value), children: [_jsx("option", { value: "", children: "No split" }), splitCandidates.map((question) => (_jsx("option", { value: question.id, children: question.prompt }, question.id)))] })] })] }), _jsx("div", { className: "grid-split-wide", style: { alignItems: 'start', marginTop: 12 }, children: data.questions.map((question) => (_jsxs("article", { className: "card", children: [_jsxs("div", { className: "kicker", children: ["Q", question.position + 1, " \u00B7 ", questionAudienceLabel(question.audience)] }), _jsx("h3", { className: "card-title", children: question.prompt }), question.counts && _jsx(CountTable, { values: question.counts }), question.distribution && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "page-sub", children: ["Average: ", question.average === null ? '—' : question.average.toFixed(2)] }), _jsx(CountTable, { values: question.distribution })] })), question.kind === 'text' && (_jsxs("p", { className: "page-sub", children: [question.responseCount ?? 0, " written answers"] })), cohorts && splitQuestion && splitQuestion.id !== question.id ? (_jsx(CrossTab, { question: question, cohorts: cohorts, answersByResponse: answersByResponse })) : null] }, question.id))) })] }));
-}
-function CrossTab({ question, cohorts, answersByResponse, }) {
-    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) => 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();
-        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 (_jsxs(_Fragment, { children: [_jsx("div", { className: "masthead-rule" }), _jsxs("table", { className: "tbl", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Cohort" }), _jsx("th", { children: "n" }), _jsx("th", { children: question.kind === 'scale' ? 'Average' : 'Most common' })] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { children: [_jsx("td", { children: row.cohort }), _jsx("td", { children: row.n }), _jsx("td", { children: row.summary })] }, row.cohort))) })] })] }));
+                                    _jsxs("div", { className: "chip-row", role: "group", "aria-label": `Classify the written answer from ${response.id}`, children: [_jsx("button", { className: "chip", type: "button", "aria-pressed": entry.label === 'technical', onClick: () => onSetLabel(entry.responseId, entry.questionId, 'technical'), children: "Technical" }), _jsx("button", { className: "chip", type: "button", "aria-pressed": entry.label === 'general', onClick: () => onSetLabel(entry.responseId, entry.questionId, 'general'), children: "General" }), !entry.label && entry.classificationStatus ? (_jsx("span", { className: "svy-meta", role: "status", children: 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.' })) : null, entry.labelSource === 'auto' ? (_jsx("span", { className: "chip is-quiet", title: "Labeled automatically \u2014 your choice overrides it", children: "auto" })) : null] })) : null] }, `${response.id}:${entry.questionId}`))), _jsxs("div", { className: "svy-meta", children: [rating !== null && headline && mood ? (_jsxs("span", { className: "svy-rating", title: headline.prompt, children: [_jsx("span", { className: `svy-swatch mood-${mood}`, "aria-hidden": "true" }), `Rated ${rating} of ${headline.options.max}`] })) : null, _jsx("span", { children: segmentLabel(response.respondentSegment) }), _jsx("span", { children: respondentLabel(response) }), _jsx("time", { dateTime: response.submittedAt, title: formatTime(response.submittedAt), children: formatDate(response.submittedAt) })] }), others.length > 0 ? (_jsxs("details", { className: "svy-answers", children: [_jsx("summary", { children: "Their other answers" }), _jsx("dl", { children: others.map((answer) => (_jsxs("div", { children: [_jsx("dt", { children: promptById.get(answer.questionId) ?? answer.questionId }), _jsx("dd", { children: formatAnswerValue(answer.value) })] }, answer.questionId))) })] })) : null] }, response.id));
+                }) })), silent.length > 0 ? (_jsxs("details", { className: "svy-silent", children: [_jsx("summary", { children: `${silent.length} ${silent.length === 1 ? 'response' : 'responses'} on this page left no comment` }), _jsx("ul", { children: silent.map((response) => {
+                            const rating = ratingOf(response);
+                            return (_jsx("li", { children: [
+                                    formatDate(response.submittedAt),
+                                    segmentLabel(response.respondentSegment),
+                                    respondentLabel(response),
+                                    rating !== null && headline
+                                        ? `rated ${rating} of ${headline.options.max}`
+                                        : null,
+                                ]
+                                    .filter(Boolean)
+                                    .join(' · ') }, response.id));
+                        }) })] })) : null, !filtering && (offset > 0 || hasMore) && onOffsetChange ? (_jsxs("div", { className: "svy-pager", children: [_jsx("button", { className: "btn", type: "button", disabled: offset === 0, onClick: () => onOffsetChange(Math.max(offset - PAGE_SIZE, 0)), children: "Previous" }), _jsx("button", { className: "btn", type: "button", disabled: !hasMore, onClick: () => onOffsetChange(offset + PAGE_SIZE), children: "Next" })] })) : null] }));
 }
 async function readSurveyErrorCode(response) {
     const headerCode = response.headers.get(SURVEY_ERROR_CODE_HEADER);
@@ -243,36 +398,45 @@ function respondentLabel(response) {
             ? `${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) {
     if (Array.isArray(value))
         return value.join(', ');
     return String(value);
 }
-function StatusPage({ title, detail, retry, }) {
-    return (_jsxs("div", { className: "page", role: "status", children: [_jsx("h1", { className: "page-title", children: "Survey responses" }), _jsx("p", { className: "page-sub", children: title }), detail ? _jsx("p", { className: "page-sub", children: detail }) : null, retry ? (_jsx("button", { className: "btn", onClick: retry, type: "button", children: "Retry" })) : null] }));
+function StatusPage({ title, detail, retry, picker = null, }) {
+    return (_jsxs("div", { className: "page", role: "status", children: [_jsxs("div", { className: "page-head", children: [_jsx("h1", { className: "page-title", children: "Survey responses" }), picker] }), _jsx("p", { className: "page-sub", children: title }), detail ? _jsx("p", { className: "page-sub", children: detail }) : null, retry ? (_jsx("button", { className: "btn", onClick: retry, type: "button", children: "Retry" })) : null] }));
 }
-function CountTable({ values }) {
-    const total = Object.values(values).reduce((sum, count) => sum + count, 0);
-    return (_jsx("dl", { className: "count-list", children: Object.entries(values).map(([label, count]) => (_jsxs("div", { children: [_jsx("dt", { children: label }), _jsxs("dd", { children: [count, total > 0 ? ` · ${Math.round((count / total) * 100)}%` : ''] })] }, label))) }));
+function surveyStatusLabel(status) {
+    if (status === 'active')
+        return 'open';
+    if (status === 'closed')
+        return 'closed';
+    return 'draft';
 }
 function segmentLabel(segment) {
     if (segment === 'member')
         return 'Member';
     if (segment === 'non_member')
         return 'Non-member';
-    return 'Unknown';
+    return 'Membership unknown';
 }
 function questionAudienceLabel(audience) {
     if (audience === 'member')
-        return 'Members';
+        return 'asked members';
     if (audience === 'non_member')
-        return 'Non-members';
-    return 'Everyone';
+        return 'asked non-members';
+    return 'asked everyone';
 }
 function formatTime(value) {
     const date = new Date(value);
     return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
 }
+function formatDate(value) {
+    const date = new Date(value);
+    return Number.isNaN(date.getTime())
+        ? value
+        : date.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' });
+}
 //# sourceMappingURL=SurveyResponsesScreen.js.map