@supersuit/suggest-a-change 0.1.11 → 0.1.13

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Changelog
 
-## Unreleased
+## 0.1.13 (2026-10-21)
+
+- **Old news is no longer toasted on every open.** The page load's one toast went to the newest move the person had not opened, however long ago it happened, so opening the app a day later replayed the same news each time. The phone now keeps what the last page load already had as news (`#view:noticed`, beside the seen record and cleared with it): only a move that is new since that load is toasted, and an older one keeps the dot and the New mark until it is opened. The first load on this release behaves as before. New in `seen.ts`: `fresh(store, id, moves)`.
+- **A toast is a small pill at the bottom, not a bar over the top of the page.** `.sac-toasts` anchored to the top safe area and each `.sac-toast` spanned the width, so the suggestion news shown when an app opened sat over the host's own header and first row. Toasts now sit above the bottom safe area, as wide as their words (up to 24rem), in a smaller type, with a drawn × so they read as dismissable; a tap still dismisses. Styling only: no API or `Words` change. Test: package.test.mjs, red against the old stylesheet.
+
+## 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)
 

package/README.md

@@ -75,7 +75,7 @@ The four diagnostics are the app's version, the time, the screen size and the ph
 
 **Telling the person in the app, with no setup.** The entry asks `mine()` once when it mounts and compares each report's status with the one this account last opened (kept on the phone beside the cached views, per app and account, and cleared on sign-out). A report that has since been started or ended (`TOLD`) shows a dot on the entry, says New on its row in My suggestions, and the newest such move gets one toast per page load in the module's words (`words.text.movedToast`, given the status's own word and, on `not-now`, the reason: "Your suggestion: Done", "Your suggestion: Not now. too big for now"). Opening the report clears it. A report this phone sees for the first time is recorded silently, so an app taking this release does not announce every old report. The list's `not-now` rows carry their one-line `note` for this. Out of the app, the server's `tellSubmitter` does the telling (below).
 
-**When the entry sits in a menu.** A host that shows the entry inside a menu that stays closed (a three-dot menu, often remounting its rows on every open) would never show the dot, and the toast would be drawn inside the closed menu. Mount `<SuggestNews>` once at the app's root, always mounted: it asks `mine()` when it mounts, shows the page load's one toast with no entry on screen, and keeps the outbox moving. Put the dot on the menu's own trigger with `useSuggestNews(adapters)`, which returns `{ moved }`, and `<SuggestDot>`, which draws the entry's dot (nothing when `moved` is 0). The trigger needs `position: relative`; the class `sac-dot-host` does it. The toast is once per page load and account however many times the entry mounts, whichever of these asks first. The entry in the menu keeps its own dot.
+**When the entry sits in a menu.** A host that shows the entry inside a menu that stays closed (a three-dot menu, often remounting its rows on every open) would never show the dot, and the toast would be drawn inside the closed menu. Mount `<SuggestNews>` once at the app's root, always mounted: it asks `mine()` when it mounts, shows the page load's one toast with no entry on screen, and keeps the outbox moving. Put the dot on the menu's own trigger with `useSuggestNews(adapters)`, which returns `{ moved }`, and `<SuggestDot>`, which draws the entry's dot (nothing when `moved` is 0). The trigger needs `position: relative`; the class `sac-dot-host` does it. The toast is once per page load and account however many times the entry mounts, whichever of these asks first, and only for a move the previous page load had not already seen: older news keeps the dot and the New mark without a toast. The entry in the menu keeps its own dot.
 
 ```tsx
 import { SuggestDot, SuggestEntry, SuggestNews, useSuggestNews } from "@supersuit/suggest-a-change/client";

package/dist/client/entry.js

@@ -5,7 +5,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // shows the sheet. `<ReportProblem>` is the same control for an error screen, already filled in.
 import { useEffect, useState } from 'react';
 import { useRuntime } from './runtime.js';
-import { firstToastThisOpen, moved, onSeen } from './seen.js';
+import { firstToastThisOpen, fresh, moved, onSeen } from './seen.js';
 import { SuggestSheet } from './sheet.js';
 import { toast, Toasts } from './toast.js';
 import { useClearOnSignOut } from './view-cache.js';
@@ -17,7 +17,7 @@ export function KeepSending({ adapters }) {
     return null;
 }
 // THE NEWS: once per mount, asks the app for this person's reports and compares each with what they last opened. A move
-// since then is counted (the dot), and the newest one gets the page load's one toast, whichever of the entry or a
+// since then is counted (the dot), and the newest one the last page load had not already seen gets the page load's one toast, whichever of the entry or a
 // root-mounted SuggestNews asks first (the guard is per page load and account, in seen.ts). Opening a report anywhere
 // recounts. `toasted` says this mount showed the toast, so a standalone entry knows to draw a toast host for it.
 function useNews(adapters, rt) {
@@ -56,10 +56,14 @@ function useNews(adapters, rt) {
             if (!live || !rows || !now || now.account !== rt.who.account)
                 return;
             const m = await count();
-            if (!live || !m?.length || !firstToastThisOpen(id))
+            if (!live || !m)
+                return;
+            // Only a move the last page load had not already seen is toasted; an older one keeps just the dot.
+            const f = await fresh(rt.store, id, m);
+            if (!f.length || !firstToastThisOpen(id))
                 return;
             const at = (x) => rows.find((r) => r.id === x)?.at ?? 0;
-            const top = [...m].sort((a, b) => at(b.id) - at(a.id))[0];
+            const top = [...f].sort((a, b) => at(b.id) - at(a.id))[0];
             const note = top.status === 'not-now' ? rows.find((r) => r.id === top.id)?.note : undefined;
             setToasted(true);
             toast({ id: `sac-moved-${top.id}`, text: S.movedToast(statusWords(top.status, adapters.words.owner), typeof note === 'string' && note ? note : undefined), ms: 6000 });

package/dist/client/seen.d.ts

@@ -21,4 +21,16 @@ export declare function moved(store: Store, id: Id, rows: {
     status: string;
 }[]>;
 export declare function firstToastThisOpen(id: Id): boolean;
+/** WHAT THE LAST PAGE LOAD ALREADY SAW. The moves (report and status) that were already news the last time the app was
+ *  loaded, so a move the person was told about, or could have been, is not toasted again on the next load; it keeps
+ *  only the dot and the New mark until they open it. Returns the moves in `m` that are new since then, and records `m`
+ *  as what this load saw. With no record yet (the first load on this release) every move is fresh, as before. */
+export declare const noticedKey: (id: Id) => string;
+export declare function fresh(store: Store, id: Id, m: {
+    id: string;
+    status: string;
+}[]): Promise<{
+    id: string;
+    status: string;
+}[]>;
 export {};

package/dist/client/seen.js

@@ -70,3 +70,24 @@ export function firstToastThisOpen(id) {
     toasted.add(k);
     return true;
 }
+/** WHAT THE LAST PAGE LOAD ALREADY SAW. The moves (report and status) that were already news the last time the app was
+ *  loaded, so a move the person was told about, or could have been, is not toasted again on the next load; it keeps
+ *  only the dot and the New mark until they open it. Returns the moves in `m` that are new since then, and records `m`
+ *  as what this load saw. With no record yet (the first load on this release) every move is fresh, as before. */
+export const noticedKey = (id) => `${draftKey(id)}#view:noticed`;
+export function fresh(store, id, m) {
+    return serial(noticedKey(id), async () => {
+        const had = await readCache(store, noticedKey(id));
+        const before = had && typeof had === 'object' ? had : {};
+        const out = m.filter((r) => before[r.id] !== r.status);
+        const now = { ...before };
+        for (const r of m)
+            now[r.id] = r.status;
+        // A report no longer moved (opened, or gone) drops out, so the record stays the size of the dot.
+        for (const k of Object.keys(now))
+            if (!m.some((r) => r.id === k))
+                delete now[k];
+        await writeCache(store, noticedKey(id), now);
+        return out;
+    });
+}

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.13",
   "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/entry.tsx

@@ -5,7 +5,7 @@
 import { useEffect, useState, type AriaRole, type ReactNode } from 'react'
 import type { Adapters } from './adapters.ts'
 import { useRuntime, type Runtime } from './runtime.ts'
-import { firstToastThisOpen, moved, onSeen } from './seen.ts'
+import { firstToastThisOpen, fresh, moved, onSeen } from './seen.ts'
 import { SuggestSheet } from './sheet.tsx'
 import { toast, Toasts } from './toast.tsx'
 import { useClearOnSignOut } from './view-cache.ts'
@@ -19,7 +19,7 @@ export function KeepSending({ adapters }: { adapters: Adapters }) {
 }
 
 // THE NEWS: once per mount, asks the app for this person's reports and compares each with what they last opened. A move
-// since then is counted (the dot), and the newest one gets the page load's one toast, whichever of the entry or a
+// since then is counted (the dot), and the newest one the last page load had not already seen gets the page load's one toast, whichever of the entry or a
 // root-mounted SuggestNews asks first (the guard is per page load and account, in seen.ts). Opening a report anywhere
 // recounts. `toasted` says this mount showed the toast, so a standalone entry knows to draw a toast host for it.
 function useNews(adapters: Adapters, rt: Runtime | null): { moved: number; toasted: boolean } {
@@ -44,9 +44,12 @@ function useNews(adapters: Adapters, rt: Runtime | null): { moved: number; toast
       try { now = await adapters.identity() } catch { now = null }
       if (!live || !rows || !now || now.account !== rt.who.account) return
       const m = await count()
-      if (!live || !m?.length || !firstToastThisOpen(id)) return
+      if (!live || !m) return
+      // Only a move the last page load had not already seen is toasted; an older one keeps just the dot.
+      const f = await fresh(rt.store, id, m)
+      if (!f.length || !firstToastThisOpen(id)) return
       const at = (x: string) => rows!.find((r) => r.id === x)?.at ?? 0
-      const top = [...m].sort((a, b) => at(b.id) - at(a.id))[0]
+      const top = [...f].sort((a, b) => at(b.id) - at(a.id))[0]
       const note = top.status === 'not-now' ? rows.find((r) => r.id === top.id)?.note : undefined
       setToasted(true)
       toast({ id: `sac-moved-${top.id}`, text: S.movedToast(statusWords(top.status, adapters.words.owner), typeof note === 'string' && note ? note : undefined), ms: 6000 })

package/src/client/seen.ts

@@ -70,3 +70,22 @@ export function firstToastThisOpen(id: Id): boolean {
   toasted.add(k)
   return true
 }
+
+/** WHAT THE LAST PAGE LOAD ALREADY SAW. The moves (report and status) that were already news the last time the app was
+ *  loaded, so a move the person was told about, or could have been, is not toasted again on the next load; it keeps
+ *  only the dot and the New mark until they open it. Returns the moves in `m` that are new since then, and records `m`
+ *  as what this load saw. With no record yet (the first load on this release) every move is fresh, as before. */
+export const noticedKey = (id: Id) => `${draftKey(id)}#view:noticed`
+export function fresh(store: Store, id: Id, m: { id: string; status: string }[]): Promise<{ id: string; status: string }[]> {
+  return serial(noticedKey(id), async () => {
+    const had = await readCache<Seen>(store, noticedKey(id))
+    const before = had && typeof had === 'object' ? had : {}
+    const out = m.filter((r) => before[r.id] !== r.status)
+    const now: Seen = { ...before }
+    for (const r of m) now[r.id] = r.status
+    // A report no longer moved (opened, or gone) drops out, so the record stays the size of the dot.
+    for (const k of Object.keys(now)) if (!m.some((r) => r.id === k)) delete now[k]
+    await writeCache(store, noticedKey(id), now)
+    return out
+  })
+}

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; }
@@ -58,8 +63,12 @@
 .sac-step[data-state="now"] { border-color: var(--sac-accent); color: var(--sac-fg); font-weight: 600; }
 .sac-step-detail { display: block; font-weight: 400; font-size: 0.85rem; }
 .sac-words { white-space: pre-wrap; overflow-wrap: anywhere; }
-.sac-toasts { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 8px); z-index: calc(var(--sac-z) + 1); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
-.sac-toast { pointer-events: auto; font: inherit; width: 100%; max-width: 28rem; text-align: left; padding: 12px 16px; border-radius: var(--sac-radius); border: 1px solid var(--sac-border); background: var(--sac-bg); color: var(--sac-fg); }
+/* Toasts sit small at the bottom edge, never over the top of the host's page: the top is where an app opens onto
+   its own content, and a full-width bar there reads as the app's header. Each is a pill as wide as its words, with a
+   drawn x so it reads as dismissable (the whole pill is the button). */
+.sac-toasts { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 12px); z-index: calc(var(--sac-z) + 1); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 16px; pointer-events: none; }
+.sac-toast { pointer-events: auto; font: inherit; font-size: 0.875rem; line-height: 1.3; width: auto; max-width: min(100%, 24rem); text-align: left; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--sac-border); background: var(--sac-bg); color: var(--sac-fg); display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
+.sac-toast::after { content: "\00d7"; color: var(--sac-muted); font-size: 1rem; line-height: 1; }
 .sac-toast[data-tone="warn"] { background: var(--sac-fg); color: var(--sac-bg); }
 .sac-entry-why { margin-left: 8px; color: var(--sac-muted); font-size: 0.9rem; }
 .sac-sheet :focus-visible, .sac-entry:focus-visible, .sac-button:focus-visible, .sac-record:focus-visible, .sac-row-button:focus-visible { outline: 3px solid var(--sac-focus); outline-offset: 2px; }

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