@supersuit/suggest-a-change 0.1.11 → 0.1.12

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 0.1.12 (2026-10-19)
+
+- **The kind is one small menu, and saying it is one big box for every kind.** The sheet drew three radio rows for the kind and a one-line field for the words, so the choice took the space and the place to speak looked like an afterthought. The kind is now a compact `<select>` labelled "What kind?", starting on "Change something", and the words go in one multi-line box (at least 9rem tall whatever field the host supplies, through `.sac-sayit textarea`) whose placeholder follows the kind. "Something is broken" no longer adds three question boxes: its placeholder asks what happened, what was expected and how to make it happen again, and the answer goes in `words`. A report no longer carries `answers` (the contract still accepts them). A draft left with answers from an earlier version folds them into the box once. New `Words` keys: `sayItPlaceholderBroken`, `sayItPlaceholderFeedback`; `brokenHappened`, `brokenExpected`, `brokenSteps` and `optional` stay so an override still typechecks. `ReportProblem`'s `happened` now starts the box.
+
 ## 0.1.11 (2026-10-18)
 
 - **A second tab no longer takes over the first tab's recording.** Two tabs share one IndexedDB, and a tab that opened while another was recording ran `recoverTakes` over the live take: it deleted its marker and chunks, so every second said after that had no marker and was lost if the recording tab then died (freedom-app-template#1). Each second of a take now refreshes `beatAt` on its marker, and `recoverTakes` leaves a take that beat within `LIVE_TAKE_MS` (5 s, exported) exactly as it is; it is made whole on an open after it goes quiet. `recoverTakes(store, claim, { now, liveMs })` takes the clock for tests. An app reopened within 5 s of a crash recovers that take on its next open instead of this one; nothing is lost.

package/dist/client/sheet.js

@@ -1,6 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// THE SHEET (design section 2): kind, say it, show it, what goes with it, send. Phone first. Everything
+// THE SHEET (design section 2): kind, say it, show it, what goes with it, send. Phone first. The kind is one
+// small menu and saying it is one big box for every kind, broken included: the box is what takes the space,
+// so a person sees first that they will be heard out (the operator, 2026-10-19). Everything
 // typed is saved as it is typed, every recording as it is made, and nothing leaves the phone except
 // through the outbox, so a closed app loses nothing. A voice note alone is a whole report.
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
@@ -15,8 +17,10 @@ import { useRuntime, useTick } from './runtime.js';
 import { toast, Toasts } from './toast.js';
 import { effectiveCeilings, lengthWords, phoneType, screenSize, sizeWords, stringsFor } from './words.js';
 const NO_ANSWERS = { happened: '', expected: '', steps: '' };
+const joinWords = (...parts) => parts.map((p) => p.trim()).filter(Boolean).join('\n\n');
 // The fields of this sheet. A take cut off by a closed app is routed back by its question id, which names
-// the draft (app and account), so only the same account's interrupted take rejoins its draft.
+// the draft (app and account), so only the same account's interrupted take rejoins its draft. The three
+// broken questions are gone from the sheet; their ids stay so a take cut off before the change still rejoins.
 const OUR_FIELDS = ['words', 'happened', 'expected', 'steps'];
 const metaKey = (key) => `sac-meta:${key}`;
 const answersKey = (draft) => `${draft}#answers`;
@@ -65,8 +69,8 @@ export function SuggestSheet({ adapters, where, onClose, initial }) {
     const box = useRef(null);
     useDialog(box, onClose);
     const [kind, setKind] = useState(initial?.kind ?? 'change');
-    const [words, setWords] = useState('');
-    const [answers, setAnswers] = useState({ ...NO_ANSWERS, happened: initial?.happened ?? '' });
+    // "Report a problem" can open with what went wrong already said: it starts the box.
+    const [words, setWords] = useState(initial?.happened ?? '');
     const [voice, setVoice] = useState([]);
     const [media, setMedia] = useState([]);
     const [error, setError] = useState('');
@@ -107,9 +111,12 @@ export function SuggestSheet({ adapters, where, onClose, initial }) {
                 // "Report a problem" opens as broken whatever kind an earlier draft was.
                 if (!initial?.kind && (d.kind === 'change' || d.kind === 'broken' || d.kind === 'feedback'))
                     setKind(d.kind);
-                setWords(d.words);
-                setAnswers((cur) => ({ ...a, happened: cur.happened || a.happened }));
-                if (d.words.trim() || takes.length || metas.length)
+                // A draft from when broken asked three questions keeps its answers: they join the one box, once.
+                const restored = joinWords(d.words, a.happened, a.expected, a.steps);
+                setWords((cur) => (restored.includes(cur.trim()) ? restored : joinWords(restored, cur)));
+                if (a !== NO_ANSWERS)
+                    await rt.store.del('kv', answersKey(key));
+                if (restored.trim() || takes.length || metas.length)
                     toast({ id: 'sac-restored', text: S.restored });
             }
             voiceN.current = highest(takes.map((t) => t.key));
@@ -148,9 +155,8 @@ export function SuggestSheet({ adapters, where, onClose, initial }) {
         const fields = { kind, words, attachments: [...voice.map((v) => v.key), ...media.map((m) => m.key)] };
         chain.current = chain.current.then(async () => {
             await saveDraft(rt.store, key, fields);
-            await rt.store.put('kv', answersKey(key), answers);
         }).catch(() => { });
-    }, [rt, key, loaded, sent, kind, words, answers, voice, media]);
+    }, [rt, key, loaded, sent, kind, words, voice, media]);
     const ensureId = useCallback(async () => {
         await chain.current;
         return (await saveDraft(rt.store, key, {})).reportId;
@@ -262,8 +268,7 @@ export function SuggestSheet({ adapters, where, onClose, initial }) {
     ].filter((d) => Boolean(d.value));
     const lineParts = [`this screen (${where.screen}, ${sanitizeRoute(where.route)})`, ...avail.map((d) => d.label)];
     const summary = `${S.goesTo(adapters.words.owner)} ${S.includes(lineParts)}`;
-    // Answers to the broken questions only count while the kind is broken: they are not sent otherwise.
-    const hasAnything = Boolean(words.trim() || voice.length || media.length || (kind === 'broken' && (answers.happened.trim() || answers.expected.trim() || answers.steps.trim())));
+    const hasAnything = Boolean(words.trim() || voice.length || media.length);
     async function send() {
         if (!rt || !who || !key || !hasAnything)
             return;
@@ -279,7 +284,6 @@ export function SuggestSheet({ adapters, where, onClose, initial }) {
             ...(adapters.about ? { app: Object.fromEntries(Object.entries(adapters.about).filter(([k]) => k !== 'version')) } : {}),
             who: { member: who.account, role: who.role },
             words: words.trim(),
-            ...(kind === 'broken' ? { answers: { happened: answers.happened.trim(), expected: answers.expected.trim(), steps: answers.steps.trim() } } : {}),
             voice: voice.map((v) => ({ file: v.file, ms: v.ms, field: v.field })),
             media: await Promise.all(media.map(async (m) => {
                 const blob = await rt.store.get('blobs', m.key);
@@ -299,7 +303,6 @@ export function SuggestSheet({ adapters, where, onClose, initial }) {
             ...media.map((m) => ({ file: m.file, part: 0, blob: m.key })),
         ];
         await queueReport({ store: rt.store, outbox: rt.outbox, report, parts: partRefs, draft: key, ...(adapters.phone?.now ? { now: adapters.phone.now } : {}) });
-        await rt.store.del('kv', answersKey(key));
         for (const v of voice)
             await rt.store.del('kv', metaKey(v.key));
         for (const m of media)
@@ -331,5 +334,5 @@ export function SuggestSheet({ adapters, where, onClose, initial }) {
     return (_jsx("div", { className: "sac-backdrop", "data-suggest-sheet": "", children: _jsxs("div", { ref: box, className: "sac-sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, tabIndex: -1, children: [_jsxs("header", { className: "sac-header", children: [_jsx("h2", { id: titleId, className: "sac-title", children: S.sheetTitle }), onClose ? _jsx("button", { type: "button", className: "sac-button sac-close", onClick: onClose, children: S.close }) : null] }), _jsx("div", { className: "sac-sr", "data-sac-live": "", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announce }), who === undefined ? _jsx("p", { children: S.loading }) : who === null ? _jsx("p", { role: "alert", children: S.signedOut }) : !rt ? _jsx("p", { children: S.loading }) : sent ? (_jsxs("div", { className: "sac-sent", children: [_jsx(Receipt, { adapters: adapters, reportId: sent.id, quiet: true, onLine: setAnnounce }), sent.files.length ? (_jsx("ul", { className: "sac-list", "aria-label": S.attachmentsLabel, children: sent.files.map((f) => {
                                 const p = rt.part(sent.id, f.file);
                                 return (_jsxs("li", { className: "sac-item", "data-attachment-state": p.state, children: [_jsxs("span", { className: "sac-item-name", children: [f.name, f.bytes ? `, ${sizeWords(f.bytes)}` : ''] }), _jsxs("span", { className: "sac-item-state", children: [p.state === 'sending' ? _jsx("progress", { "aria-label": `${S.sending} ${f.name}` }) : null, p.state === 'waiting' ? S.waitingToSend : p.state === 'sending' ? S.sending : p.state === 'sent' ? S.sentWord : S.didNotSend(p.reason ?? '')] }), p.state === 'failed' ? _jsx("button", { type: "button", className: "sac-button", onClick: () => void rt.retry(sent.id), children: S.retry }) : null] }, f.file));
-                            }) })) : null, onClose ? _jsx("button", { type: "button", className: "sac-button sac-primary", onClick: onClose, children: S.done }) : null] })) : (_jsxs("form", { className: "sac-form", onSubmit: (e) => { e.preventDefault(); void send(); }, children: [_jsxs("fieldset", { role: "radiogroup", className: "sac-group sac-kinds", children: [_jsx("legend", { children: S.kindLegend }), kinds.map((k) => (_jsxs("label", { className: "sac-choice", children: [_jsx("input", { type: "radio", name: "sac-kind", value: k.id, checked: kind === k.id, onChange: () => setKind(k.id) }), _jsx("span", { children: k.label })] }, k.id)))] }), kind === 'broken' ? (_jsxs("fieldset", { className: "sac-group", children: [_jsxs("legend", { children: [S.kindBroken, " (", S.optional, ")"] }), fieldFor('happened', S.brokenHappened, answers.happened, (v) => setAnswers((a) => ({ ...a, happened: v }))), fieldFor('expected', S.brokenExpected, answers.expected, (v) => setAnswers((a) => ({ ...a, expected: v }))), fieldFor('steps', S.brokenSteps, answers.steps, (v) => setAnswers((a) => ({ ...a, steps: v })))] })) : null, _jsxs("fieldset", { className: "sac-group", children: [_jsx("legend", { children: S.sayItLegend }), fieldFor('words', S.sayItLabel, words, setWords, { placeholder: S.sayItPlaceholder }), voice.length ? (_jsx("ul", { className: "sac-list", "aria-label": S.voiceNotesLabel, children: voice.map((v, i) => (_jsxs("li", { className: "sac-item", children: [_jsx("span", { className: "sac-item-name", children: S.voiceNote(i + 1, lengthWords(v.ms)) }), _jsx("button", { type: "button", className: "sac-button", "aria-label": `${S.remove} ${S.voiceNote(i + 1, lengthWords(v.ms))}`, onClick: () => void removeVoice(v), children: S.remove })] }, v.key))) })) : null] }), _jsxs("fieldset", { className: "sac-group", children: [_jsx("legend", { children: S.showItLegend }), _jsxs("div", { className: "sac-actions", children: [_jsx("button", { type: "button", className: "sac-button", onClick: () => fileInput.current?.click(), children: S.addImages }), _jsx("button", { type: "button", className: "sac-button", onClick: () => videoInput.current?.click(), children: S.addVideo }), adapters.snapshot ? _jsx("button", { type: "button", className: "sac-button", onClick: () => void takeScreenshot(), children: S.takeScreenshot }) : null] }), _jsx("input", { ref: fileInput, type: "file", accept: "image/*", multiple: true, hidden: true, "aria-label": S.addImages, "data-sac-images": "", onChange: (e) => { const f = [...(e.target.files ?? [])]; e.target.value = ''; void addMedia(f, 'image'); } }), _jsx("input", { ref: videoInput, type: "file", accept: "video/*", hidden: true, "aria-label": S.addVideo, "data-sac-video": "", onChange: (e) => { const f = [...(e.target.files ?? [])]; e.target.value = ''; void addMedia(f, 'video'); } }), media.length ? (_jsx("ul", { className: "sac-list", "aria-label": S.attachmentsLabel, children: media.map((m) => (_jsxs("li", { className: "sac-item", children: [_jsxs("span", { className: "sac-item-name", children: [m.name, ", ", sizeWords(m.bytes)] }), _jsx("button", { type: "button", className: "sac-button", "aria-label": `${S.remove} ${m.name}`, onClick: () => void removeMedia(m), children: S.remove })] }, m.key))) })) : null] }), _jsx("p", { className: "sac-muted sac-fyi", "data-sac-summary": "", children: summary }), error ? _jsx("p", { role: "alert", className: "sac-error", children: error }) : null, _jsxs("div", { className: "sac-actions", children: [_jsx("button", { type: "submit", className: "sac-button sac-primary", disabled: !hasAnything, "aria-describedby": hasAnything ? undefined : `${titleId}-hint`, children: S.send }), hasAnything ? null : _jsx("span", { id: `${titleId}-hint`, className: "sac-muted", children: S.sendHint })] })] })), _jsx(Toasts, {})] }) }));
+                            }) })) : null, onClose ? _jsx("button", { type: "button", className: "sac-button sac-primary", onClick: onClose, children: S.done }) : null] })) : (_jsxs("form", { className: "sac-form", onSubmit: (e) => { e.preventDefault(); void send(); }, children: [_jsxs("div", { className: "sac-kind", children: [_jsx("label", { htmlFor: `${titleId}-kind`, children: S.kindLegend }), _jsx("select", { id: `${titleId}-kind`, className: "sac-select", value: kind, onChange: (e) => setKind(e.target.value), children: kinds.map((k) => _jsx("option", { value: k.id, children: k.label }, k.id)) })] }), _jsxs("fieldset", { className: "sac-group sac-sayit", children: [_jsx("legend", { children: S.sayItLegend }), fieldFor('words', S.sayItLabel, words, setWords, { placeholder: kind === 'broken' ? S.sayItPlaceholderBroken : kind === 'feedback' ? S.sayItPlaceholderFeedback : S.sayItPlaceholder }), voice.length ? (_jsx("ul", { className: "sac-list", "aria-label": S.voiceNotesLabel, children: voice.map((v, i) => (_jsxs("li", { className: "sac-item", children: [_jsx("span", { className: "sac-item-name", children: S.voiceNote(i + 1, lengthWords(v.ms)) }), _jsx("button", { type: "button", className: "sac-button", "aria-label": `${S.remove} ${S.voiceNote(i + 1, lengthWords(v.ms))}`, onClick: () => void removeVoice(v), children: S.remove })] }, v.key))) })) : null] }), _jsxs("fieldset", { className: "sac-group", children: [_jsx("legend", { children: S.showItLegend }), _jsxs("div", { className: "sac-actions", children: [_jsx("button", { type: "button", className: "sac-button", onClick: () => fileInput.current?.click(), children: S.addImages }), _jsx("button", { type: "button", className: "sac-button", onClick: () => videoInput.current?.click(), children: S.addVideo }), adapters.snapshot ? _jsx("button", { type: "button", className: "sac-button", onClick: () => void takeScreenshot(), children: S.takeScreenshot }) : null] }), _jsx("input", { ref: fileInput, type: "file", accept: "image/*", multiple: true, hidden: true, "aria-label": S.addImages, "data-sac-images": "", onChange: (e) => { const f = [...(e.target.files ?? [])]; e.target.value = ''; void addMedia(f, 'image'); } }), _jsx("input", { ref: videoInput, type: "file", accept: "video/*", hidden: true, "aria-label": S.addVideo, "data-sac-video": "", onChange: (e) => { const f = [...(e.target.files ?? [])]; e.target.value = ''; void addMedia(f, 'video'); } }), media.length ? (_jsx("ul", { className: "sac-list", "aria-label": S.attachmentsLabel, children: media.map((m) => (_jsxs("li", { className: "sac-item", children: [_jsxs("span", { className: "sac-item-name", children: [m.name, ", ", sizeWords(m.bytes)] }), _jsx("button", { type: "button", className: "sac-button", "aria-label": `${S.remove} ${m.name}`, onClick: () => void removeMedia(m), children: S.remove })] }, m.key))) })) : null] }), _jsx("p", { className: "sac-muted sac-fyi", "data-sac-summary": "", children: summary }), error ? _jsx("p", { role: "alert", className: "sac-error", children: error }) : null, _jsxs("div", { className: "sac-actions", children: [_jsx("button", { type: "submit", className: "sac-button sac-primary", disabled: !hasAnything, "aria-describedby": hasAnything ? undefined : `${titleId}-hint`, children: S.send }), hasAnything ? null : _jsx("span", { id: `${titleId}-hint`, className: "sac-muted", children: S.sendHint })] })] })), _jsx(Toasts, {})] }) }));
 }

package/dist/client/words.d.ts

@@ -25,6 +25,9 @@ export interface Strings {
     sayItLegend: string;
     sayItLabel: string;
     sayItPlaceholder: string;
+    /** The one box's placeholder when the kind is "Something is broken": it asks what the three questions used to. */
+    sayItPlaceholderBroken: string;
+    sayItPlaceholderFeedback: string;
     showItLegend: string;
     addImages: string;
     addVideo: string;

package/dist/client/words.js

@@ -20,7 +20,9 @@ export const DEFAULT_STRINGS = {
     optional: 'optional',
     sayItLegend: 'Say it',
     sayItLabel: 'Your suggestion',
-    sayItPlaceholder: 'Type it, or hold the microphone and say it',
+    sayItPlaceholder: 'What would you change? Type it, or hold the microphone and say it',
+    sayItPlaceholderBroken: 'What happened, what you expected, and how to make it happen again. Type it, or hold the microphone and say it',
+    sayItPlaceholderFeedback: 'Whatever is on your mind. Type it, or hold the microphone and say it',
     showItLegend: 'Show it',
     addImages: 'Add a screenshot or photo',
     addVideo: 'Add a short video',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersuit/suggest-a-change",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "The report format and flow behind a Suggest a change button: what a report is, who acts at each step, the screens, and the check every app runs. The contract has zero dependencies.",
   "type": "module",
   "bin": {

package/src/client/sheet.tsx

@@ -1,5 +1,7 @@
 'use client'
-// THE SHEET (design section 2): kind, say it, show it, what goes with it, send. Phone first. Everything
+// THE SHEET (design section 2): kind, say it, show it, what goes with it, send. Phone first. The kind is one
+// small menu and saying it is one big box for every kind, broken included: the box is what takes the space,
+// so a person sees first that they will be heard out (the operator, 2026-10-19). Everything
 // typed is saved as it is typed, every recording as it is made, and nothing leaves the phone except
 // through the outbox, so a closed app loses nothing. A voice note alone is a whole report.
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
@@ -20,9 +22,11 @@ export interface Voice { key: string; file: string; ms: number; field: string }
 export interface Media { key: string; file: string; name: string; type: string; bytes: number; ms?: number }
 type Answers = { happened: string; expected: string; steps: string }
 const NO_ANSWERS: Answers = { happened: '', expected: '', steps: '' }
+const joinWords = (...parts: string[]) => parts.map((p) => p.trim()).filter(Boolean).join('\n\n')
 type Diag = 'appVersion' | 'at' | 'screen' | 'device'
 // The fields of this sheet. A take cut off by a closed app is routed back by its question id, which names
-// the draft (app and account), so only the same account's interrupted take rejoins its draft.
+// the draft (app and account), so only the same account's interrupted take rejoins its draft. The three
+// broken questions are gone from the sheet; their ids stay so a take cut off before the change still rejoins.
 const OUR_FIELDS = ['words', 'happened', 'expected', 'steps']
 
 const metaKey = (key: string) => `sac-meta:${key}`
@@ -71,8 +75,8 @@ export function SuggestSheet({ adapters, where, onClose, initial }: { adapters:
   useDialog(box, onClose)
 
   const [kind, setKind] = useState<Kind>(initial?.kind ?? 'change')
-  const [words, setWords] = useState('')
-  const [answers, setAnswers] = useState<Answers>({ ...NO_ANSWERS, happened: initial?.happened ?? '' })
+  // "Report a problem" can open with what went wrong already said: it starts the box.
+  const [words, setWords] = useState(initial?.happened ?? '')
   const [voice, setVoice] = useState<Voice[]>([])
   const [media, setMedia] = useState<Media[]>([])
   const [error, setError] = useState('')
@@ -110,9 +114,11 @@ export function SuggestSheet({ adapters, where, onClose, initial }: { adapters:
         if (!live) return
         // "Report a problem" opens as broken whatever kind an earlier draft was.
         if (!initial?.kind && (d.kind === 'change' || d.kind === 'broken' || d.kind === 'feedback')) setKind(d.kind)
-        setWords(d.words)
-        setAnswers((cur) => ({ ...a, happened: cur.happened || a.happened }))
-        if (d.words.trim() || takes.length || metas.length) toast({ id: 'sac-restored', text: S.restored })
+        // A draft from when broken asked three questions keeps its answers: they join the one box, once.
+        const restored = joinWords(d.words, a.happened, a.expected, a.steps)
+        setWords((cur) => (restored.includes(cur.trim()) ? restored : joinWords(restored, cur)))
+        if (a !== NO_ANSWERS) await rt.store.del('kv', answersKey(key))
+        if (restored.trim() || takes.length || metas.length) toast({ id: 'sac-restored', text: S.restored })
       }
       voiceN.current = highest(takes.map((t) => t.key))
       mediaN.current = highest(metas.map((m) => m.key))
@@ -148,9 +154,8 @@ export function SuggestSheet({ adapters, where, onClose, initial }: { adapters:
     const fields = { kind, words, attachments: [...voice.map((v) => v.key), ...media.map((m) => m.key)] }
     chain.current = chain.current.then(async () => {
       await saveDraft(rt.store, key, fields)
-      await rt.store.put('kv', answersKey(key), answers)
     }).catch(() => {})
-  }, [rt, key, loaded, sent, kind, words, answers, voice, media])
+  }, [rt, key, loaded, sent, kind, words, voice, media])
 
   const ensureId = useCallback(async () => {
     await chain.current
@@ -261,8 +266,7 @@ export function SuggestSheet({ adapters, where, onClose, initial }: { adapters:
   const lineParts = [`this screen (${where.screen}, ${sanitizeRoute(where.route)})`, ...avail.map((d) => d.label)]
   const summary = `${S.goesTo(adapters.words.owner)} ${S.includes(lineParts)}`
 
-  // Answers to the broken questions only count while the kind is broken: they are not sent otherwise.
-  const hasAnything = Boolean(words.trim() || voice.length || media.length || (kind === 'broken' && (answers.happened.trim() || answers.expected.trim() || answers.steps.trim())))
+  const hasAnything = Boolean(words.trim() || voice.length || media.length)
 
   async function send() {
     if (!rt || !who || !key || !hasAnything) return
@@ -277,7 +281,6 @@ export function SuggestSheet({ adapters, where, onClose, initial }: { adapters:
       ...(adapters.about ? { app: Object.fromEntries(Object.entries(adapters.about).filter(([k]) => k !== 'version')) } : {}),
       who: { member: who.account, role: who.role },
       words: words.trim(),
-      ...(kind === 'broken' ? { answers: { happened: answers.happened.trim(), expected: answers.expected.trim(), steps: answers.steps.trim() } } : {}),
       voice: voice.map((v) => ({ file: v.file, ms: v.ms, field: v.field })),
       media: await Promise.all(media.map(async (m) => {
         const blob = await rt.store.get<Blob>('blobs', m.key)
@@ -294,7 +297,6 @@ export function SuggestSheet({ adapters, where, onClose, initial }: { adapters:
       ...media.map((m) => ({ file: m.file, part: 0, blob: m.key })),
     ]
     await queueReport({ store: rt.store, outbox: rt.outbox, report, parts: partRefs, draft: key, ...(adapters.phone?.now ? { now: adapters.phone.now } : {}) })
-    await rt.store.del('kv', answersKey(key))
     for (const v of voice) await rt.store.del('kv', metaKey(v.key))
     for (const m of media) await rt.store.del('kv', metaKey(m.key))
     setSent({ id: report.id, files: [...voice.map((v, i) => ({ file: v.file, name: S.voiceNote(i + 1, lengthWords(v.ms)), bytes: 0 })), ...media.map((m) => ({ file: m.file, name: m.name, bytes: m.bytes }))] })
@@ -353,28 +355,16 @@ export function SuggestSheet({ adapters, where, onClose, initial }: { adapters:
           </div>
         ) : (
           <form className="sac-form" onSubmit={(e) => { e.preventDefault(); void send() }}>
-            <fieldset role="radiogroup" className="sac-group sac-kinds">
-              <legend>{S.kindLegend}</legend>
-              {kinds.map((k) => (
-                <label key={k.id} className="sac-choice">
-                  <input type="radio" name="sac-kind" value={k.id} checked={kind === k.id} onChange={() => setKind(k.id)} />
-                  <span>{k.label}</span>
-                </label>
-              ))}
-            </fieldset>
-
-            {kind === 'broken' ? (
-              <fieldset className="sac-group">
-                <legend>{S.kindBroken} ({S.optional})</legend>
-                {fieldFor('happened', S.brokenHappened, answers.happened, (v) => setAnswers((a) => ({ ...a, happened: v })))}
-                {fieldFor('expected', S.brokenExpected, answers.expected, (v) => setAnswers((a) => ({ ...a, expected: v })))}
-                {fieldFor('steps', S.brokenSteps, answers.steps, (v) => setAnswers((a) => ({ ...a, steps: v })))}
-              </fieldset>
-            ) : null}
+            <div className="sac-kind">
+              <label htmlFor={`${titleId}-kind`}>{S.kindLegend}</label>
+              <select id={`${titleId}-kind`} className="sac-select" value={kind} onChange={(e) => setKind(e.target.value as Kind)}>
+                {kinds.map((k) => <option key={k.id} value={k.id}>{k.label}</option>)}
+              </select>
+            </div>
 
-            <fieldset className="sac-group">
+            <fieldset className="sac-group sac-sayit">
               <legend>{S.sayItLegend}</legend>
-              {fieldFor('words', S.sayItLabel, words, setWords, { placeholder: S.sayItPlaceholder })}
+              {fieldFor('words', S.sayItLabel, words, setWords, { placeholder: kind === 'broken' ? S.sayItPlaceholderBroken : kind === 'feedback' ? S.sayItPlaceholderFeedback : S.sayItPlaceholder })}
               {voice.length ? (
                 <ul className="sac-list" aria-label={S.voiceNotesLabel}>
                   {voice.map((v, i) => (

package/src/client/styles.css

@@ -32,6 +32,11 @@
 .sac-group > legend { font-weight: 600; padding: 0 4px; }
 .sac-choice, .sac-switch { display: flex; align-items: center; gap: 10px; min-height: 44px; }
 .sac-choice input, .sac-switch input { width: 24px; height: 24px; flex: none; }
+.sac-kind { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.sac-kind label { color: var(--sac-muted); font-size: 0.9rem; }
+.sac-select { font: inherit; font-size: 16px; min-height: 36px; padding: 4px 10px; color: inherit; background: var(--sac-bg); border: 1px solid var(--sac-border); border-radius: var(--sac-radius); }
+/* Saying it is the sheet's biggest thing, whatever field the host puts in it. */
+.sac-sayit textarea { min-height: 9rem; }
 .sac-voice { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
 .sac-input, .sac-voice textarea, .sac-voice input { flex: 1; min-width: 0; min-height: 44px; font: inherit; font-size: 16px; color: inherit; background: var(--sac-bg); border: 1px solid var(--sac-border); border-radius: var(--sac-radius); padding: 10px 12px; box-sizing: border-box; }
 .sac-record { flex: none; width: 48px; height: 48px; min-width: 44px; min-height: 44px; border-radius: 50%; border: 1px solid var(--sac-border); background: var(--sac-bg); display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; }

package/src/client/words.ts

@@ -31,6 +31,9 @@ export interface Strings {
   sayItLegend: string
   sayItLabel: string
   sayItPlaceholder: string
+  /** The one box's placeholder when the kind is "Something is broken": it asks what the three questions used to. */
+  sayItPlaceholderBroken: string
+  sayItPlaceholderFeedback: string
   showItLegend: string
   addImages: string
   addVideo: string
@@ -121,7 +124,9 @@ export const DEFAULT_STRINGS: Strings = {
   optional: 'optional',
   sayItLegend: 'Say it',
   sayItLabel: 'Your suggestion',
-  sayItPlaceholder: 'Type it, or hold the microphone and say it',
+  sayItPlaceholder: 'What would you change? Type it, or hold the microphone and say it',
+  sayItPlaceholderBroken: 'What happened, what you expected, and how to make it happen again. Type it, or hold the microphone and say it',
+  sayItPlaceholderFeedback: 'Whatever is on your mind. Type it, or hold the microphone and say it',
   showItLegend: 'Show it',
   addImages: 'Add a screenshot or photo',
   addVideo: 'Add a short video',