@supersuit/suggest-a-change 0.1.10 → 0.1.12

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 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.
+
 ## 0.1.10 (2026-10-17)
 
 - **What goes with it is one small line.** The sheet no longer draws a section with a legend, an explainer and four switches above Send. Every diagnostic (the app's version, the time, the screen size, the phone type) goes with every report, beside the screen's name and address, and one muted line says what goes and to whom. Whoever acts on a report needs all of them, so leaving one out only ever cost a round trip. The `Words` keys the switches used (`withLegend`, `alwaysSent`, `include`, `screenName`) stay, so an app that overrides them still typechecks.

package/dist/client/recorder.d.ts

@@ -1,5 +1,15 @@
 import type { Store } from './idb.ts';
 export declare function pickMime(): string;
+/**
+ * A take whose last second landed this recently is LIVE in some page, never abandoned. Two tabs
+ * share one IndexedDB, so a second tab opening while the first records would otherwise "recover"
+ * the first tab's take mid-recording: delete its marker and chunks, and leave every second said
+ * after that with no marker, lost if that tab then dies (freedom-app-template#1). Each second of a
+ * take refreshes `beatAt`, so a take nobody is recording goes quiet within a second and is made
+ * whole on the next open after this window. Chunks arrive every 1000 ms; the margin covers a busy
+ * main thread.
+ */
+export declare const LIVE_TAKE_MS = 5000;
 export interface Recorded {
     key: string;
     blob: Blob;
@@ -14,7 +24,11 @@ export declare function startTake(store: Store, key: string, questionId: string)
 }>;
 /** Takes the app was closed in the middle of, made whole again. */
 /** `claim` limits the recovery to takes the caller owns (by question id); the rest are left exactly as they are for their owner. */
-export declare function recoverTakes(store: Store, claim?: (questionId: string) => boolean): Promise<{
+/** A take still beating (another tab recording it, LIVE_TAKE_MS) is left exactly as it is; it is recovered on an open after it goes quiet. */
+export declare function recoverTakes(store: Store, claim?: (questionId: string) => boolean, { now, liveMs }?: {
+    now?: number;
+    liveMs?: number;
+}): Promise<{
     questionId: string;
     key: string;
     ms: number;

package/dist/client/recorder.js

@@ -6,6 +6,16 @@ export function pickMime() {
             return m;
     return '';
 }
+/**
+ * A take whose last second landed this recently is LIVE in some page, never abandoned. Two tabs
+ * share one IndexedDB, so a second tab opening while the first records would otherwise "recover"
+ * the first tab's take mid-recording: delete its marker and chunks, and leave every second said
+ * after that with no marker, lost if that tab then dies (freedom-app-template#1). Each second of a
+ * take refreshes `beatAt`, so a take nobody is recording goes quiet within a second and is made
+ * whole on the next open after this window. Chunks arrive every 1000 ms; the margin covers a busy
+ * main thread.
+ */
+export const LIVE_TAKE_MS = 5000;
 export async function startTake(store, key, questionId) {
     const stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true } });
     const mime = pickMime();
@@ -14,13 +24,16 @@ export async function startTake(store, key, questionId) {
     const started = Date.now();
     const chunks = [];
     const writes = [];
-    await store.put('kv', `rec:${key}`, { questionId, mime: type, startedAt: started });
+    const meta = { questionId, mime: type, startedAt: started, beatAt: started };
+    await store.put('kv', `rec:${key}`, meta);
     rec.ondataavailable = (e) => {
         if (!e.data?.size)
             return;
         const seq = chunks.length;
         chunks.push(e.data);
         writes.push(store.put('blobs', `${key}#${String(seq).padStart(5, '0')}`, e.data).catch(() => { }));
+        // The heartbeat another tab's recovery reads (LIVE_TAKE_MS).
+        writes.push(store.put('kv', `rec:${key}`, { ...meta, beatAt: Date.now() }).catch(() => { }));
     };
     rec.start(1000);
     const meter = makeMeter(stream);
@@ -100,7 +113,8 @@ function makeMeter(stream) {
 }
 /** Takes the app was closed in the middle of, made whole again. */
 /** `claim` limits the recovery to takes the caller owns (by question id); the rest are left exactly as they are for their owner. */
-export async function recoverTakes(store, claim) {
+/** A take still beating (another tab recording it, LIVE_TAKE_MS) is left exactly as it is; it is recovered on an open after it goes quiet. */
+export async function recoverTakes(store, claim, { now = Date.now(), liveMs = LIVE_TAKE_MS } = {}) {
     const out = [];
     // By prefix: this runs before the first paint, and `kv` also holds every saved view.
     const metas = (await store.all('kv', 'rec:')).filter((r) => r.key.startsWith('rec:'));
@@ -110,6 +124,9 @@ export async function recoverTakes(store, claim) {
     for (const { key: metaKey, value: m } of metas) {
         if (claim && !claim(m.questionId))
             continue;
+        const beat = Number(m.beatAt ?? m.startedAt);
+        if (Number.isFinite(beat) && now - beat < liveMs)
+            continue;
         const key = metaKey.slice(4);
         const parts = blobs.filter((b) => b.key.startsWith(`${key}#`)).sort((a, b) => a.key.localeCompare(b.key));
         if (parts.length) {

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.10",
+  "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/recorder.ts

@@ -10,7 +10,18 @@ export function pickMime(): string {
   return ''
 }
 
-interface Meta { questionId: string; mime: string; startedAt: number }
+interface Meta { questionId: string; mime: string; startedAt: number; beatAt?: number }
+
+/**
+ * A take whose last second landed this recently is LIVE in some page, never abandoned. Two tabs
+ * share one IndexedDB, so a second tab opening while the first records would otherwise "recover"
+ * the first tab's take mid-recording: delete its marker and chunks, and leave every second said
+ * after that with no marker, lost if that tab then dies (freedom-app-template#1). Each second of a
+ * take refreshes `beatAt`, so a take nobody is recording goes quiet within a second and is made
+ * whole on the next open after this window. Chunks arrive every 1000 ms; the margin covers a busy
+ * main thread.
+ */
+export const LIVE_TAKE_MS = 5000
 export interface Recorded { key: string; blob: Blob; ms: number }
 
 export async function startTake(store: Store, key: string, questionId: string) {
@@ -21,12 +32,15 @@ export async function startTake(store: Store, key: string, questionId: string) {
   const started = Date.now()
   const chunks: Blob[] = []
   const writes: Promise<void>[] = []
-  await store.put('kv', `rec:${key}`, { questionId, mime: type, startedAt: started } satisfies Meta)
+  const meta: Meta = { questionId, mime: type, startedAt: started, beatAt: started }
+  await store.put('kv', `rec:${key}`, meta)
   rec.ondataavailable = (e) => {
     if (!e.data?.size) return
     const seq = chunks.length
     chunks.push(e.data)
     writes.push(store.put('blobs', `${key}#${String(seq).padStart(5, '0')}`, e.data).catch(() => {}))
+    // The heartbeat another tab's recovery reads (LIVE_TAKE_MS).
+    writes.push(store.put('kv', `rec:${key}`, { ...meta, beatAt: Date.now() }).catch(() => {}))
   }
   rec.start(1000)
   const meter = makeMeter(stream)
@@ -88,7 +102,9 @@ function makeMeter(stream: MediaStream): { level(): number; close(): void } | nu
 
 /** Takes the app was closed in the middle of, made whole again. */
 /** `claim` limits the recovery to takes the caller owns (by question id); the rest are left exactly as they are for their owner. */
-export async function recoverTakes(store: Store, claim?: (questionId: string) => boolean): Promise<{ questionId: string; key: string; ms: number }[]> {
+/** A take still beating (another tab recording it, LIVE_TAKE_MS) is left exactly as it is; it is recovered on an open after it goes quiet. */
+export async function recoverTakes(store: Store, claim?: (questionId: string) => boolean,
+  { now = Date.now(), liveMs = LIVE_TAKE_MS }: { now?: number; liveMs?: number } = {}): Promise<{ questionId: string; key: string; ms: number }[]> {
   const out: { questionId: string; key: string; ms: number }[] = []
   // By prefix: this runs before the first paint, and `kv` also holds every saved view.
   const metas = (await store.all<Meta>('kv', 'rec:')).filter((r) => r.key.startsWith('rec:'))
@@ -96,6 +112,8 @@ export async function recoverTakes(store: Store, claim?: (questionId: string) =>
   const blobs = await store.all<Blob>('blobs')
   for (const { key: metaKey, value: m } of metas) {
     if (claim && !claim(m.questionId)) continue
+    const beat = Number(m.beatAt ?? m.startedAt)
+    if (Number.isFinite(beat) && now - beat < liveMs) continue
     const key = metaKey.slice(4)
     const parts = blobs.filter((b) => b.key.startsWith(`${key}#`)).sort((a, b) => a.key.localeCompare(b.key))
     if (parts.length) {

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',