@xoxoai/checkmate 0.6.6 → 0.7.0

package/plugin/src/ui/edit.ts

@@ -0,0 +1,305 @@
+import type { Store } from '../store.ts'
+import type { Html } from './html.ts'
+import type { Context, Page } from './layout.ts'
+import { frozenRevision, planCandidate } from '../plans.ts'
+import { planDetail } from '../views.ts'
+import { html, short } from './html.ts'
+import { banner, heading } from './layout.ts'
+
+type Candidate = ReturnType<typeof planCandidate>
+type Requirement = Candidate['requirements'][number]
+type Test = Candidate['tests'][number]
+
+export type EditState = {
+	mode: 'form' | 'json'
+	candidate: Candidate
+	json: string
+	actor: string
+	error: string | null
+	stale: Html | null
+}
+
+function words(values: string) {
+	return values
+		.split(/[\s,]+/)
+		.map((value) => value.trim())
+		.filter(Boolean)
+}
+
+function lines(values: string) {
+	return values
+		.split('\n')
+		.map((value) => value.trim())
+		.filter(Boolean)
+}
+
+export function candidateFromForm(base: Candidate, form: URLSearchParams): Candidate {
+	const text = (name: string, fallback: string) => (form.get(name) ?? fallback).trim()
+	const covered = new Set(form.getAll('cover'))
+	return {
+		requirements: base.requirements.map((requirement, i) => ({
+			id: requirement.id,
+			text: text(`r${i}.text`, requirement.text),
+			source: text(`r${i}.source`, requirement.source),
+		})),
+		tests: base.tests.map((test, i) => ({
+			...test,
+			title: text(`t${i}.title`, test.title),
+			capability: text(`t${i}.capability`, test.capability),
+			operations: words(form.get(`t${i}.operations`) ?? test.operations.join(', ')),
+			dependsOn: words(form.get(`t${i}.dependsOn`) ?? test.dependsOn.join(', ')),
+			preconditions: lines(form.get(`t${i}.preconditions`) ?? test.preconditions.join('\n')),
+			action: text(`t${i}.action`, test.action),
+			requirementIds: base.requirements
+				.filter((requirement) => covered.has(`${test.id} ${requirement.id}`))
+				.map((requirement) => requirement.id),
+			assertions: test.assertions.map((assertion, j) => ({
+				id: assertion.id,
+				check: text(`t${i}.a${j}.check`, assertion.check),
+				checkKind: form.get(`t${i}.a${j}.kind`) === 'agent_observation' ? 'agent_observation' : 'deterministic',
+			})),
+		})),
+		gaps: base.gaps,
+	}
+}
+
+export function candidateJson(candidate: unknown) {
+	return JSON.stringify(candidate, null, 2)
+}
+
+function field(label: string, name: string, value: string, help = '') {
+	return html`<div class="field-group">
+		<label class="lab" for="${name}">${label}</label>
+		<input id="${name}" name="${name}" value="${value}" />
+		${help ? html`<p class="help">${help}</p>` : ''}
+	</div>`
+}
+
+function area(label: string, name: string, value: string, rows: number, help = '') {
+	return html`<div class="field-group">
+		<label class="lab" for="${name}">${label}</label>
+		<textarea id="${name}" name="${name}" rows="${rows}">${value}</textarea>
+		${help ? html`<p class="help">${help}</p>` : ''}
+	</div>`
+}
+
+function requirementFields(requirement: Requirement, i: number) {
+	return html`<fieldset class="edit-card" id="edit-${requirement.id}">
+		<legend class="mono">${requirement.id}</legend>
+		${area('Text', `r${i}.text`, requirement.text, 2)}
+		${field('Source', `r${i}.source`, requirement.source, 'Where the requirement comes from.')}
+	</fieldset>`
+}
+
+function testFields(test: Test, i: number) {
+	return html`<fieldset class="edit-card" id="edit-${test.id}">
+		<legend><span class="mono">${test.id}</span> ${test.title}</legend>
+		${field('Title', `t${i}.title`, test.title)}
+		<div class="edit-row">
+			${field('Capability', `t${i}.capability`, test.capability)}
+			${field('Operations', `t${i}.operations`, test.operations.join(', '), 'Separate with commas.')}
+		</div>
+		${field(
+			'Depends on',
+			`t${i}.dependsOn`,
+			test.dependsOn.join(', '),
+			'Test IDs, separated with commas. Use plan:T1 for a test in another plan.'
+		)}
+		${area('Preconditions', `t${i}.preconditions`, test.preconditions.join('\n'), 2, 'One per line.')}
+		${area('Action', `t${i}.action`, test.action, 2)}
+		<div class="field-group">
+			<p class="lab">Assertions</p>
+			${
+				test.assertions.length
+					? html`<ul class="edit-asrs">
+							${test.assertions.map(
+								(assertion, j) =>
+									html`<li>
+										<label class="aid" for="t${i}.a${j}.check">${assertion.id}</label>
+										<textarea id="t${i}.a${j}.check" name="t${i}.a${j}.check" rows="1">
+${assertion.check}</textarea>
+										<label class="sr-only" for="t${i}.a${j}.kind"
+											>Check kind of ${assertion.id}</label
+										>
+										<select id="t${i}.a${j}.kind" name="t${i}.a${j}.kind">
+											${['deterministic', 'agent_observation'].map(
+												(kind) =>
+													html`<option
+														value="${kind}"
+														${kind === assertion.checkKind ? html`selected` : ''}
+													>
+														${kind.replace('_', ' ')}
+													</option>`
+											)}
+										</select>
+									</li>`
+							)}
+						</ul>`
+					: html`<p class="help">No assertions. Add them in the JSON editor.</p>`
+			}
+		</div>
+	</fieldset>`
+}
+
+function coverageMatrix(candidate: Candidate) {
+	return html`<div class="scroll">
+		<table class="matrix">
+			<thead>
+				<tr>
+					<th scope="col">Requirement</th>
+					${candidate.tests.map((test) => html`<th scope="col" class="mono">${test.id}</th>`)}
+				</tr>
+			</thead>
+			<tbody>
+				${candidate.requirements.map(
+					(requirement) =>
+						html`<tr>
+							<th scope="row">
+								<span class="mono">${requirement.id}</span>
+								<span class="muted small matrix-text">${requirement.text}</span>
+							</th>
+							${candidate.tests.map(
+								(test) =>
+									html`<td>
+										<input
+											type="checkbox"
+											name="cover"
+											value="${test.id} ${requirement.id}"
+											aria-label="${test.id} covers ${requirement.id}"
+											${test.requirementIds.includes(requirement.id) ? html`checked` : ''}
+										/>
+									</td>`
+							)}
+						</tr>`
+				)}
+			</tbody>
+		</table>
+	</div>`
+}
+
+function hidden(context: Context, sha256: string, mode: string) {
+	return html`<input type="hidden" name="csrf" value="${context.csrf}" />
+		<input type="hidden" name="sha" value="${sha256}" />
+		<input type="hidden" name="mode" value="${mode}" />`
+}
+
+function actorLine(context: Context, state: EditState, path: string, mode: string) {
+	if (context.actor)
+		return html`<p class="help">
+			Saving as <strong>${context.actor}</strong>.
+			<a href="/actor?back=${encodeURIComponent(path)}">Change name</a>
+		</p>`
+	return html`<div class="field-group">
+		<label class="lab" for="actor-${mode}">Your name</label>
+		<input id="actor-${mode}" name="actor" required autocomplete="name" value="${state.actor}" />
+		<p class="help">Checkmate records it with the edit.</p>
+	</div>`
+}
+
+export function editPage(
+	store: Store,
+	context: Context,
+	planId: string,
+	revision: number,
+	state: EditState | null = null
+): Page {
+	const detail = planDetail(store, planId, revision)
+	const subject = `${planId}@${revision}`
+	const path = `/plans/${subject}/edit`
+	const title = `Edit ${subject}`
+	if (detail.revision !== detail.latestRevision)
+		return {
+			title,
+			section: 'plans',
+			subjects: [`plan:${planId}`],
+			body: html`${heading(title, detail.plan.objective)}
+			${banner(
+				'info',
+				html`Only the latest revision can change.
+					<a href="/plans/${planId}@${detail.latestRevision}/edit"
+						>Edit ${planId}@${detail.latestRevision}</a
+					>`
+			)}`,
+		}
+	const frozen = frozenRevision(store, planId, revision)
+	const needsApproval = detail.approval.policy !== 'none'
+	const next = revision + 1
+	const save = frozen ? `Save as ${planId}@${next}` : 'Save changes'
+	const why = frozen === 'run' ? `A run uses ${subject}.` : `${subject} is approved.`
+	const notice = frozen
+		? banner(
+				'warn',
+				html`<strong
+						>${why} Saving creates revision ${next}${needsApproval ? ', which needs approval' : ''}.</strong
+					>
+					${subject} stays as it is.`
+			)
+		: banner(
+				'info',
+				html`<strong>Edits change this revision in place.</strong> ${subject} is not approved and no run uses
+					it.`
+			)
+	const shown = state ?? {
+		mode: 'form' as const,
+		candidate: planCandidate(detail.plan),
+		json: candidateJson(planCandidate(detail.plan)),
+		actor: '',
+		error: null,
+		stale: null,
+	}
+	const messages = html`${shown.stale ? banner('warn', shown.stale) : ''}
+	${shown.error ? html`<p class="form-error" role="alert">${shown.error}</p>` : ''}`
+	const buttons = (mode: string) =>
+		html`<div class="btns">
+				<button class="btn primary">${save}</button>
+				<a class="btn" href="/plans/${subject}">Cancel</a>
+			</div>
+			${actorLine(context, shown, path, mode)}`
+	const body = html`${heading(
+			title,
+			detail.plan.objective,
+			html`<div class="meta">
+				<a class="pill" href="/plans/${subject}">${subject}</a>
+				<span class="pill" title="${detail.sha256}"
+					>sha256 <span class="mono">${short(detail.sha256)}</span></span
+				>
+			</div>`
+		)}
+		<div data-region="edit" data-stale-message="${planId} changed. Review it before you save.">
+			<div data-stale-slot>${notice} ${messages}</div>
+			<form method="post" action="${path}" class="edit-form" data-edit-form>
+				${hidden(context, detail.sha256, 'form')}
+				<section aria-labelledby="edit-requirements">
+					<h2 id="edit-requirements">
+						Requirements <span class="n">${shown.candidate.requirements.length}</span>
+					</h2>
+					<div class="stack">${shown.candidate.requirements.map(requirementFields)}</div>
+				</section>
+				<section aria-labelledby="edit-tests">
+					<h2 id="edit-tests">Tests <span class="n">${shown.candidate.tests.length}</span></h2>
+					<div class="stack">${shown.candidate.tests.map(testFields)}</div>
+				</section>
+				<section aria-labelledby="edit-coverage">
+					<h2 id="edit-coverage">Coverage</h2>
+					<p class="help">Mark the requirements that each test covers. Each test covers one or more.</p>
+					${coverageMatrix(shown.candidate)}
+				</section>
+				<div class="edit-save">${buttons('form')}</div>
+			</form>
+			<details class="edit-json" ${shown.mode === 'json' ? html`open` : ''}>
+				<summary>Edit as JSON</summary>
+				<form method="post" action="${path}" class="edit-form" data-edit-form>
+					${hidden(context, detail.sha256, 'json')}
+					<p class="help">
+						Add or remove requirements, tests, assertions, and gaps. The JSON has the fields of a plan
+						candidate:
+						<code>requirements</code>, <code>tests</code>, and <code>gaps</code>.
+					</p>
+					<label class="sr-only" for="json">Plan candidate JSON</label>
+					<textarea id="json" name="json" rows="24" class="code" spellcheck="false">${shown.json}</textarea>
+					${buttons('json')}
+				</form>
+			</details>
+		</div>`
+	return { title, section: 'plans', subjects: [`plan:${planId}`], body }
+}

package/plugin/src/ui/forms.ts

@@ -0,0 +1,209 @@
+import type { Html } from './html.ts'
+import type { Context } from './layout.ts'
+import { html, short } from './html.ts'
+import { banner } from './layout.ts'
+
+export type FormState = {
+	values: Record<string, string>
+	error: string | null
+	stale: Html | null
+	confirm: boolean
+}
+
+export type Verdict = {
+	action: string
+	subject: string
+	question: string
+	sha256: string
+	digestLabel: string
+	approve: { value: string; label: string; confirm: string; summary: string }
+	reject: { value: string; label: string; confirm: string; summary: string }
+	staleMessage: string
+	intro?: Html | ''
+}
+
+export function emptyState(): FormState {
+	return { values: {}, error: null, stale: null, confirm: false }
+}
+
+function hidden(context: Context, sha256: string) {
+	return html`<input type="hidden" name="csrf" value="${context.csrf}" />
+		<input type="hidden" name="sha" value="${sha256}" />`
+}
+
+function actorField(context: Context, state: FormState) {
+	if (context.actor) return ''
+	return html`<div class="field-group">
+		<label class="lab" for="actor">Your name</label>
+		<input id="actor" name="actor" required autocomplete="name" value="${state.values.actor ?? ''}" />
+		<p class="help">Checkmate asks once, keeps it in a cookie, and records it with each decision.</p>
+	</div>`
+}
+
+function messages(state: FormState) {
+	return html`${state.stale ? banner('warn', state.stale) : ''}
+	${state.error ? html`<p class="form-error" role="alert">${state.error}</p>` : ''}`
+}
+
+function rationaleField(state: FormState, placeholder: string) {
+	return html`<div class="field-group">
+		<label class="lab" for="rationale">Rationale</label>
+		<textarea id="rationale" name="rationale" rows="4" required data-rationale placeholder="${placeholder}">
+${state.values.rationale ?? ''}</textarea>
+	</div>`
+}
+
+function confirmStep(context: Context, verdict: Verdict, state: FormState) {
+	const choice = state.values.verdict === verdict.reject.value ? verdict.reject : verdict.approve
+	return html`<form method="post" action="${verdict.action}" class="decision-form">
+		${hidden(context, verdict.sha256)}
+		<input type="hidden" name="verdict" value="${choice.value}" />
+		<input type="hidden" name="rationale" value="${state.values.rationale ?? ''}" />
+		${context.actor ? '' : html`<input type="hidden" name="actor" value="${state.values.actor ?? ''}" />`}
+		<div class="confirm-box">
+			<p class="lab">Confirm</p>
+			<p>${choice.summary}</p>
+			<blockquote>${state.values.rationale ?? ''}</blockquote>
+		</div>
+		<div class="btns">
+			<button class="btn primary" name="confirmed" value="1">${choice.confirm}</button>
+			<button class="btn" name="back" value="1" formnovalidate>Back</button>
+		</div>
+	</form>`
+}
+
+function chooseStep(context: Context, verdict: Verdict, state: FormState) {
+	const button = (choice: Verdict['approve'], primary: boolean) =>
+		html`<button
+			class="btn${primary ? ' primary' : ''}"
+			name="verdict"
+			value="${choice.value}"
+			data-needs-rationale
+			data-confirm-label="${choice.confirm}"
+			data-summary="${choice.summary}"
+		>
+			${choice.label}
+		</button>`
+	return html`<form method="post" action="${verdict.action}" class="decision-form" data-verdict-form>
+		${hidden(context, verdict.sha256)} ${actorField(context, state)}
+		${rationaleField(state, 'Why do you decide this?')}
+		<div class="confirm-box" data-confirm hidden>
+			<p class="lab">Confirm</p>
+			<p data-confirm-summary></p>
+		</div>
+		<div class="btns" data-choose>${button(verdict.approve, true)} ${button(verdict.reject, false)}</div>
+		<div class="btns" data-confirm-buttons hidden>
+			<button class="btn primary" name="confirmed" value="1" data-confirm-submit>Confirm</button>
+			<button class="btn" type="button" data-confirm-back>Back</button>
+		</div>
+	</form>`
+}
+
+export function verdictPanel(context: Context, verdict: Verdict, state: FormState) {
+	return html`<section
+		class="panel decision"
+		id="decide"
+		aria-labelledby="decide-title"
+		data-region="decision"
+		data-stale-message="${verdict.staleMessage}"
+	>
+		<h2 class="lab" id="decide-title">Decision</h2>
+		<p class="subj">${verdict.question}</p>
+		<p class="help">
+			${verdict.digestLabel} sha256 <code title="${verdict.sha256}">${short(verdict.sha256)}</code>. Your decision
+			is recorded in the log.
+		</p>
+		<div data-stale-slot>${messages(state)}</div>
+		${verdict.intro ?? ''}
+		${state.confirm ? confirmStep(context, verdict, state) : chooseStep(context, verdict, state)}
+	</section>`
+}
+
+const kinds = [
+	{
+		value: 'clarify',
+		label: 'Clarify',
+		help: 'Clarify gives the expected behaviour. The agent updates the affected assertions in the next revision.',
+	},
+	{
+		value: 'accept_assumption',
+		label: 'Accept assumption',
+		help: 'Accept assumption records your answer as an assumption. Tests run on it, and reports list it.',
+	},
+	{
+		value: 'defer',
+		label: 'Defer',
+		help: 'Defer moves the gap out of this scope. The affected tests become deferred and do not run.',
+	},
+]
+
+export type GapForm = {
+	action: string
+	cancel: string
+	sha256: string
+	title: Html
+	question: string
+	staleMessage: string
+}
+
+export function gapPanel(context: Context, form: GapForm, state: FormState) {
+	const selected = state.values.kind ?? 'clarify'
+	return html`<section
+		class="panel decision"
+		id="answer"
+		aria-labelledby="answer-title"
+		data-region="decision"
+		data-stale-message="${form.staleMessage}"
+	>
+		<h2 class="lab" id="answer-title">Answer gap</h2>
+		<p class="subj">${form.title}</p>
+		<p class="help">${form.question}</p>
+		<div data-stale-slot>${messages(state)}</div>
+		<form method="post" action="${form.action}" class="decision-form gap-form" data-gap-form>
+			${hidden(context, form.sha256)}
+			<fieldset class="seg-field">
+				<legend class="lab">Kind of answer</legend>
+				<div class="seg">
+					${kinds.map(
+						(kind) =>
+							html`<input
+									type="radio"
+									id="kind-${kind.value}"
+									name="kind"
+									value="${kind.value}"
+									${selected === kind.value ? html`checked` : ''}
+								/><label for="kind-${kind.value}">${kind.label}</label>`
+					)}
+				</div>
+			</fieldset>
+			${kinds.map((kind) => html`<p class="help kind-help" data-kind="${kind.value}">${kind.help}</p>`)}
+			<div class="field-group">
+				<label class="lab" for="value">Answer</label>
+				<textarea id="value" name="value" rows="3" required>${state.values.value ?? ''}</textarea>
+			</div>
+			<div class="field-group source-field">
+				<label class="lab" for="source">Source <span class="req">required for Clarify</span></label>
+				<input
+					id="source"
+					name="source"
+					value="${state.values.source ?? ''}"
+					placeholder="oracle://refund-policy#window"
+					data-source
+				/>
+				<p class="help">Where the answer comes from: a document, a ticket, or a person.</p>
+			</div>
+			${rationaleField(state, 'Why is this the right answer?')} ${actorField(context, state)}
+			<div class="btns">
+				<button class="btn primary" data-needs-rationale>Record answer</button>
+				<a class="btn" href="${form.cancel}">Cancel</a>
+			</div>
+		</form>
+	</section>`
+}
+
+export function recordPanel(title: string, content: Html) {
+	return html`<section class="panel decision" aria-labelledby="decide-title" data-region="decision">
+		<h2 class="lab" id="decide-title">${title}</h2>
+		${content}
+	</section>`
+}

package/plugin/src/ui/html.ts

@@ -0,0 +1,130 @@
+export type Html = { readonly html: string }
+
+const entities: Record<string, string> = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }
+
+export function escape(text: string) {
+	return text.replace(/[&<>"']/g, (character) => entities[character])
+}
+
+function isHtml(value: unknown): value is Html {
+	return typeof value === 'object' && value !== null && 'html' in value
+}
+
+function piece(value: unknown): string {
+	if (value === null || value === undefined || value === false) return ''
+	if (Array.isArray(value)) return value.map(piece).join('')
+	if (isHtml(value)) return value.html
+	return escape(String(value))
+}
+
+export function html(strings: TemplateStringsArray, ...values: unknown[]): Html {
+	let text = strings[0]
+	for (let i = 0; i < values.length; i++) text += piece(values[i]) + strings[i + 1]
+	return { html: text }
+}
+
+export function join(items: Html[], separator: Html | string) {
+	return html`${items.flatMap((item, i) => (i ? [separator, item] : [item]))}`
+}
+
+export type Tone = 'pass' | 'fail' | 'block' | 'warn' | 'unsure' | 'acc' | 'muted'
+
+const statusLook: Record<string, [string, Tone]> = {
+	passed: ['✓', 'pass'],
+	failed: ['✗', 'fail'],
+	inconclusive: ['?', 'unsure'],
+	not_checked: ['!', 'warn'],
+	blocked: ['–', 'block'],
+	not_run: ['–', 'block'],
+	error: ['!', 'warn'],
+	ready: ['✓', 'pass'],
+	deferred: ['–', 'block'],
+	planned: ['✓', 'pass'],
+	tested: ['✓', 'pass'],
+	uncovered: ['–', 'block'],
+	complete: ['✓', 'pass'],
+	partial: ['◐', 'warn'],
+	not_executed: ['–', 'block'],
+	completed: ['✓', 'pass'],
+	interrupted: ['!', 'warn'],
+	operational_error: ['!', 'fail'],
+	not_applicable: ['–', 'block'],
+	approved: ['✓', 'pass'],
+	rejected: ['✗', 'fail'],
+	pending: ['○', 'acc'],
+	not_required: ['–', 'block'],
+	started: ['●', 'acc'],
+	finalized: ['✓', 'pass'],
+	open: ['○', 'warn'],
+	resolved: ['✓', 'pass'],
+	blocking: ['●', 'fail'],
+	non_blocking: ['○', 'warn'],
+	clarify: ['✓', 'acc'],
+	accept_assumption: ['≈', 'acc'],
+	defer: ['–', 'block'],
+	defect: ['✗', 'fail'],
+	potential_issue: ['?', 'warn'],
+	low: ['·', 'block'],
+	medium: ['!', 'warn'],
+	high: ['!', 'fail'],
+	critical: ['!!', 'fail'],
+	rejected_operation: ['✗', 'fail'],
+	needs_decision: ['?', 'warn'],
+	invalid_request: ['✗', 'fail'],
+	needs_plan: ['○', 'acc'],
+	run_in_progress: ['●', 'acc'],
+	needs_revision: ['○', 'acc'],
+	plan_rejected: ['✗', 'fail'],
+	needs_answers: ['?', 'warn'],
+	needs_approval: ['○', 'acc'],
+	ready_to_run: ['○', 'acc'],
+	nothing_to_run: ['–', 'block'],
+	defects_open: ['✗', 'fail'],
+	needs_retest: ['!', 'warn'],
+	awaits_acceptance: ['○', 'acc'],
+	accepted: ['✓', 'pass'],
+}
+
+export function words(status: string) {
+	return status.replace(/_/g, ' ')
+}
+
+export function pill(status: string, label: string = words(status)) {
+	const [icon, tone] = statusLook[status] ?? ['·', 'muted']
+	return html`<span class="st ${tone}"><span aria-hidden="true">${icon}</span> ${label}</span>`
+}
+
+export function icon(status: string | null) {
+	const [symbol, tone] = status ? (statusLook[status] ?? ['·', 'muted']) : ['·', 'muted']
+	return html`<span class="ic ${tone}" role="img" aria-label="${status ? words(status) : 'no result yet'}"
+		>${symbol}</span
+	>`
+}
+
+export function short(sha256: string) {
+	return `${sha256.slice(0, 4)}…${sha256.slice(-4)}`
+}
+
+export function age(iso: string, now = Date.now()) {
+	const seconds = Math.max(0, Math.round((now - Date.parse(iso)) / 1000))
+	if (seconds < 45) return 'now'
+	const minutes = Math.round(seconds / 60)
+	if (minutes < 60) return `${minutes} min`
+	const hours = Math.round(minutes / 60)
+	if (hours < 48) return `${hours} h`
+	return `${Math.round(hours / 24)} d`
+}
+
+export function clock(iso: string) {
+	const date = new Date(iso)
+	const pad = (value: number) => String(value).padStart(2, '0')
+	return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
+}
+
+export function time(iso: string, text = age(iso)) {
+	return html`<time datetime="${iso}" title="${clock(iso)}">${text}</time>`
+}
+
+export function plural(count: number, one: string, many = `${one}s`) {
+	return `${count} ${count === 1 ? one : many}`
+}