@supersuit/suggest-a-change 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.1.2 (2026-10-13)
+
+- **My suggestions and the detail view draw at once.** Each keeps its last successful answer (`mine()` and each `one(id)`) in the module's own IndexedDB store, keyed by app and account like a draft, and draws it as soon as the phone has read it, with a quiet "Updating" line until the app answers. The app's answer replaces it (a report that vanished on the app disappears). If the app cannot be reached, the saved rows stay and the screen says so: "Could not reach the app. Showing what this phone last saw." A first open with nothing saved shows the loading state, as before. Reports waiting in the outbox show as they did. Another account never reads this account's saved answer. New strings `updating` and `offlineShowingSaved` (replaceable through `words.text`).
+- **`<SuggestEntry role>`.** The entry button takes an ARIA `role` (for a host that shows it as a menu row with `role="menuitem"`), beside `className`. Unset by default.
+
+## 0.1.1 (2026-10-13)
+
+- **A report sent with the Mac away is sent when it is back, even with the sheet closed.** The outbox used to move only while the sheet, My suggestions or a detail screen was mounted, so a report waited until the person opened one again. `<SuggestEntry>` now keeps the outbox moving while it is mounted, and `KeepSending` is exported from `./client` for a host with no always-mounted entry (it draws nothing).
+- A voice file's upload link now allows 200,000 bytes per second of declared length, so an uncompressed WAV is not refused.
+- When finalize refuses a file, the pending entry is removed first and the stored object is deleted only if that removal happened.
+- The client test "after Send, focus moves to the receipt" waits for both of its conditions, for longer.
+
 ## 0.1.0 (2026-10-12)
 
 First release. The report contract and flow map: kinds, roles, ceilings, statuses, who acts at each step, and report validation.

package/README.md

@@ -47,7 +47,9 @@ const adapters: Adapters = {
 // then:                        {open && <SuggestSheet adapters={adapters} where={{ screen: "Photos", route: location.pathname }} onClose={() => setOpen(false)} />}
 ```
 
-The entry carries `data-suggest-entry` (the attribute the screen check looks for; see "The check" below). Signed out, it opens nothing and says why. The receipt says "Got it" only after the adapter has answered `done` for the report and every attachment; until then it says the report is on the phone. Every text field the module renders sits in a `[data-voice-field]` container with a `[data-voice-control]`; a host's `Field` slot must keep that shape (it receives `FieldProps`, which is the Helm's voice field props). A voice note alone is a whole report: the recording is kept and uploaded as a part, and the receiving Mac writes the transcript.
+`SuggestEntry` also takes `className` and `role` (for example `role="menuitem"` when a host shows it as a menu row); no role is set by default. My suggestions and the detail view keep their last answer from the app on the phone (module-owned IndexedDB, keyed by app and account like a draft), draw it at once with a quiet "Updating" line, and replace it when the app answers; if the app cannot be reached they keep the saved rows and say so. A first open with nothing saved shows "Loading".
+
+The entry also keeps the phone's outbox moving while it is mounted (a report sent with the Mac away goes when it is back, with the sheet closed); a host with no always-mounted entry renders `<KeepSending adapters={adapters} />` once, high in the app. The entry carries `data-suggest-entry` (the attribute the screen check looks for; see "The check" below). Signed out, it opens nothing and says why. The receipt says "Got it" only after the adapter has answered `done` for the report and every attachment; until then it says the report is on the phone. Every text field the module renders sits in a `[data-voice-field]` container with a `[data-voice-control]`; a host's `Field` slot must keep that shape (it receives `FieldProps`, which is the Helm's voice field props). A voice note alone is a whole report: the recording is kept and uploaded as a part, and the receiving Mac writes the transcript.
 
 Styling: structure only, class names prefixed `sac-`. `@supersuit/suggest-a-change/styles.css` is optional defaults (16px inputs so iOS does not zoom, 44px touch targets, safe-area padding on the sheet). Re-skin it with these custom properties:
 

package/dist/client/detail.js

@@ -11,6 +11,7 @@ import { recoverTakes } from './recorder.js';
 import { queueFollowUp } from './reports.js';
 import { useRuntime, useTick } from './runtime.js';
 import { Toasts } from './toast.js';
+import { oneCacheKey, readCache, writeCache } from './view-cache.js';
 import { effectiveCeilings, lengthWords, sizeWords, statusMeaning, statusWords, stringsFor } from './words.js';
 export function statusOf(r) {
     if (typeof r.status === 'string')
@@ -79,6 +80,8 @@ export function SuggestionDetail({ adapters, id }) {
     const [note, setNote] = useState('');
     const [bad, setBad] = useState('');
     const [ready, setReady] = useState(false);
+    const [updating, setUpdating] = useState(false);
+    const [offline, setOffline] = useState(false);
     // The follow-up being written: its id is made when the person starts it, so queuing it twice is one follow-up.
     const followId = useRef(null);
     const n = useRef(0);
@@ -88,10 +91,12 @@ export function SuggestionDetail({ adapters, id }) {
     // Each load takes a number; only the newest may paint, so a load still running for the account that
     // was just replaced never draws its rows under the new one.
     const loads = useRef(0);
+    // True once a report from the phone's copy or the app is on screen for this id and account.
+    const shown = useRef(false);
     // Anything that writes the follow-up waits until its draft has been read, so the counter is right.
     const restored = useRef(makeDeferred());
     // A different account (or none) shows nothing of the last one.
-    useEffect(() => { loads.current++; setReport(undefined); setPending([]); setReady(false); setMore(''); setHeard([]); followId.current = null; n.current = 0; restored.current = makeDeferred(); }, [rt]);
+    useEffect(() => { loads.current++; shown.current = false; setUpdating(false); setOffline(false); setReport(undefined); setPending([]); setReady(false); setMore(''); setHeard([]); followId.current = null; n.current = 0; restored.current = makeDeferred(); }, [rt]);
     const load = useCallback(async () => {
         if (!rt)
             return;
@@ -109,9 +114,38 @@ export function SuggestionDetail({ adapters, id }) {
                 return;
             }
             setRefusal(undefined);
-            const r = (await adapters.store.one(id));
-            if (fresh())
+            const ckey = oneCacheKey({ app: adapters.words.app, account: rt.who.account }, id);
+            // Draw at once from the phone's copy, then ask the app.
+            if (!shown.current) {
+                const saved = await readCache(rt.store, ckey);
+                if (!fresh())
+                    return;
+                if (saved && typeof saved === 'object') {
+                    shown.current = true;
+                    setReport(saved);
+                    setUpdating(true);
+                }
+            }
+            let r;
+            try {
+                r = (await adapters.store.one(id));
+            }
+            catch {
+                r = undefined;
+            }
+            if (!fresh())
+                return;
+            setUpdating(false);
+            if (r) {
+                shown.current = true;
+                setOffline(false);
                 setReport(r);
+                void writeCache(rt.store, ckey, r);
+            }
+            else if (shown.current)
+                setOffline(true);
+            else
+                setReport(null);
         }
         catch {
             if (fresh())
@@ -211,5 +245,5 @@ export function SuggestionDetail({ adapters, id }) {
         setHeard((cur) => [...cur, { key: k, file, ms }]);
         return { audio: k, text: '' };
     }
-    return (_jsxs("article", { className: "sac-detail", "data-report": id, children: [_jsx("h3", { className: "sac-status", "data-status": status, children: statusWords(status, owner) }), _jsxs("p", { className: "sac-muted", children: [statusMeaning(status, owner), status === 'live' && typeof report.liveAt === 'string' ? ` (${new Date(report.liveAt).toLocaleDateString()})` : ''] }), refusal ? (_jsxs(_Fragment, { children: [_jsx("p", { role: "alert", className: "sac-error", children: refusal }), rt ? _jsx("button", { type: "button", className: "sac-button", onClick: () => void rt.retry(id), children: S.retry }) : null] })) : null, _jsx(StatusStrip, { status: status, owner: owner, label: S.stepLabel, step: stepOf(report), timeline: timelineOf(report) }), typeof report.words === 'string' && report.words ? _jsx("p", { className: "sac-words", children: report.words }) : null, Object.entries(answers).filter(([, v]) => v).map(([k, v]) => _jsx("p", { className: "sac-words", "data-answer": k, children: v }, k)), voice.length ? _jsx("ul", { className: "sac-list", "aria-label": S.voiceNotesLabel, children: voice.map((v, i) => _jsx("li", { className: "sac-item", children: S.voiceNote(i + 1, lengthWords(v.ms)) }, v.file)) }) : null, media.length ? _jsx("ul", { className: "sac-list", "aria-label": S.attachmentsLabel, children: media.map((m) => _jsxs("li", { className: "sac-item", children: [m.file, ", ", sizeWords(m.bytes)] }, m.file)) }) : null, Array.isArray(report.added) ? report.added.map((a, i) => _jsx("p", { className: "sac-words", children: a.words }, i)) : null, pending.length ? (_jsx("ul", { className: "sac-list", "aria-label": S.waitingToSend, "data-followups": "", children: pending.map((f) => (_jsxs("li", { className: "sac-item", "data-followup": f.followId, children: [_jsx("span", { className: "sac-words", children: f.words || S.attachmentsLabel }), f.error ? _jsx("span", { role: "alert", className: "sac-error", children: f.error }) : _jsx("span", { className: "sac-muted", children: S.waitingToSend }), f.error && rt ? _jsx("button", { type: "button", className: "sac-button", onClick: () => void rt.retry(id), children: S.retry }) : null, f.error && rt ? _jsx("button", { type: "button", className: "sac-button", onClick: () => void rt.discardFollowUp(id, f.followId), children: S.discard }) : null] }, f.followId))) })) : null, open ? (_jsxs("form", { className: "sac-form", onSubmit: (e) => { e.preventDefault(); void add(); }, children: [rt ? (_jsx(Field, { rt: { store: rt.store }, id: `append-${id}`, label: S.appendLabel, value: more, onChange: setMore, multiline: true, persist: false, startTake: adapters.startTake, maxMs: ceilings.voiceMs, scope: key ?? undefined, labels: labels, ...(adapters.appendVoice === false ? {} : { upload: (k, b, ms) => keepHeard(k, b, ms) }) })) : null, heard.length ? _jsx("ul", { className: "sac-list", "aria-label": S.voiceNotesLabel, children: heard.map((h, i) => _jsx("li", { className: "sac-item", children: S.voiceNote(i + 1, lengthWords(h.ms)) }, h.key)) }) : null, bad ? _jsx("p", { role: "alert", className: "sac-error", children: bad }) : null, note ? _jsx("p", { role: "status", children: note }) : null, _jsx("button", { type: "submit", className: "sac-button", disabled: !more.trim() && !heard.length, children: S.appendSend })] })) : null, _jsx(Toasts, {})] }));
+    return (_jsxs("article", { className: "sac-detail", "data-report": id, children: [_jsx("h3", { className: "sac-status", "data-status": status, children: statusWords(status, owner) }), _jsxs("p", { className: "sac-muted", children: [statusMeaning(status, owner), status === 'live' && typeof report.liveAt === 'string' ? ` (${new Date(report.liveAt).toLocaleDateString()})` : ''] }), refusal ? (_jsxs(_Fragment, { children: [_jsx("p", { role: "alert", className: "sac-error", children: refusal }), rt ? _jsx("button", { type: "button", className: "sac-button", onClick: () => void rt.retry(id), children: S.retry }) : null] })) : null, updating ? _jsx("p", { role: "status", className: "sac-muted", "data-updating": "", children: S.updating }) : null, offline ? _jsx("p", { role: "alert", className: "sac-error", children: S.offlineShowingSaved }) : null, _jsx(StatusStrip, { status: status, owner: owner, label: S.stepLabel, step: stepOf(report), timeline: timelineOf(report) }), typeof report.words === 'string' && report.words ? _jsx("p", { className: "sac-words", children: report.words }) : null, Object.entries(answers).filter(([, v]) => v).map(([k, v]) => _jsx("p", { className: "sac-words", "data-answer": k, children: v }, k)), voice.length ? _jsx("ul", { className: "sac-list", "aria-label": S.voiceNotesLabel, children: voice.map((v, i) => _jsx("li", { className: "sac-item", children: S.voiceNote(i + 1, lengthWords(v.ms)) }, v.file)) }) : null, media.length ? _jsx("ul", { className: "sac-list", "aria-label": S.attachmentsLabel, children: media.map((m) => _jsxs("li", { className: "sac-item", children: [m.file, ", ", sizeWords(m.bytes)] }, m.file)) }) : null, Array.isArray(report.added) ? report.added.map((a, i) => _jsx("p", { className: "sac-words", children: a.words }, i)) : null, pending.length ? (_jsx("ul", { className: "sac-list", "aria-label": S.waitingToSend, "data-followups": "", children: pending.map((f) => (_jsxs("li", { className: "sac-item", "data-followup": f.followId, children: [_jsx("span", { className: "sac-words", children: f.words || S.attachmentsLabel }), f.error ? _jsx("span", { role: "alert", className: "sac-error", children: f.error }) : _jsx("span", { className: "sac-muted", children: S.waitingToSend }), f.error && rt ? _jsx("button", { type: "button", className: "sac-button", onClick: () => void rt.retry(id), children: S.retry }) : null, f.error && rt ? _jsx("button", { type: "button", className: "sac-button", onClick: () => void rt.discardFollowUp(id, f.followId), children: S.discard }) : null] }, f.followId))) })) : null, open ? (_jsxs("form", { className: "sac-form", onSubmit: (e) => { e.preventDefault(); void add(); }, children: [rt ? (_jsx(Field, { rt: { store: rt.store }, id: `append-${id}`, label: S.appendLabel, value: more, onChange: setMore, multiline: true, persist: false, startTake: adapters.startTake, maxMs: ceilings.voiceMs, scope: key ?? undefined, labels: labels, ...(adapters.appendVoice === false ? {} : { upload: (k, b, ms) => keepHeard(k, b, ms) }) })) : null, heard.length ? _jsx("ul", { className: "sac-list", "aria-label": S.voiceNotesLabel, children: heard.map((h, i) => _jsx("li", { className: "sac-item", children: S.voiceNote(i + 1, lengthWords(h.ms)) }, h.key)) }) : null, bad ? _jsx("p", { role: "alert", className: "sac-error", children: bad }) : null, note ? _jsx("p", { role: "status", children: note }) : null, _jsx("button", { type: "submit", className: "sac-button", disabled: !more.trim() && !heard.length, children: S.appendSend })] })) : null, _jsx(Toasts, {})] }));
 }

package/dist/client/entry.d.ts

@@ -1,8 +1,15 @@
+import { type AriaRole } from 'react';
 import type { Adapters } from './adapters.ts';
-export declare function SuggestEntry({ adapters, onOpen, className }: {
+/** Keeps the phone's outbox moving (on reconnect and every 15 seconds) for as long as it is mounted, with nothing drawn.
+ *  <SuggestEntry> already does this; a host with no always-mounted entry mounts this once, high in the app. */
+export declare function KeepSending({ adapters }: {
+    adapters: Adapters;
+}): null;
+export declare function SuggestEntry({ adapters, onOpen, className, role }: {
     adapters: Adapters;
     onOpen(): void;
-    className?: string;
+    className?: string; /** An ARIA role for the button (for example `menuitem` when the host shows it as a menu row). Unset by default. */
+    role?: AriaRole;
 }): import("react").JSX.Element;
 /** For an error screen: opens the sheet as "something is broken", with the screen and what went wrong filled in. */
 export declare function ReportProblem({ adapters, screen, error }: {

package/dist/client/entry.js

@@ -4,9 +4,16 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // Signed out, it opens nothing and says why. Signed in, it hands over to the host (`onOpen`), which
 // 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 { SuggestSheet } from './sheet.js';
 import { stringsFor } from './words.js';
-export function SuggestEntry({ adapters, onOpen, className }) {
+/** Keeps the phone's outbox moving (on reconnect and every 15 seconds) for as long as it is mounted, with nothing drawn.
+ *  <SuggestEntry> already does this; a host with no always-mounted entry mounts this once, high in the app. */
+export function KeepSending({ adapters }) {
+    useRuntime(adapters);
+    return null;
+}
+export function SuggestEntry({ adapters, onOpen, className, role }) {
     const S = stringsFor(adapters.words);
     const [why, setWhy] = useState('');
     const [busy, setBusy] = useState(false);
@@ -28,7 +35,7 @@ export function SuggestEntry({ adapters, onOpen, className }) {
         setWhy('');
         onOpen();
     }
-    return (_jsxs("span", { className: "sac-entry-wrap", children: [_jsx("button", { type: "button", "data-suggest-entry": "", className: `sac-entry${className ? ` ${className}` : ''}`, "aria-busy": busy || undefined, onClick: () => void press(), children: S.entry }), why ? _jsx("span", { role: "status", className: "sac-entry-why", children: why }) : null] }));
+    return (_jsxs("span", { className: "sac-entry-wrap", children: [_jsx(KeepSending, { adapters: adapters }), _jsx("button", { type: "button", role: role, "data-suggest-entry": "", className: `sac-entry${className ? ` ${className}` : ''}`, "aria-busy": busy || undefined, onClick: () => void press(), children: S.entry }), why ? _jsx("span", { role: "status", className: "sac-entry-why", children: why }) : null] }));
 }
 /** For an error screen: opens the sheet as "something is broken", with the screen and what went wrong filled in. */
 export function ReportProblem({ adapters, screen, error }) {

package/dist/client/mine.js

@@ -7,6 +7,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { SuggestionDetail } from './detail.js';
 import { useRuntime, useTick } from './runtime.js';
+import { mineCacheKey, readCache, writeCache } from './view-cache.js';
 import { Toasts } from './toast.js';
 import { statusMeaning, statusWords, stringsFor } from './words.js';
 export function MySuggestions({ adapters, onOpen }) {
@@ -17,38 +18,72 @@ export function MySuggestions({ adapters, onOpen }) {
     const [rows, setRows] = useState(null);
     const [open, setOpen] = useState(null);
     const [bad, setBad] = useState('');
+    const [updating, setUpdating] = useState(false);
     // Another account (or none) shows nothing of the last one's rows.
     const loads = useRef(0);
-    useEffect(() => { loads.current++; setRows(null); setOpen(null); }, [rt]);
+    // What the app last said (or the phone kept of it) for this account; null until either is known.
+    const known = useRef(null);
+    useEffect(() => { loads.current++; known.current = null; setRows(null); setOpen(null); setBad(''); setUpdating(false); }, [rt]);
     const load = useCallback(async () => {
         if (!rt)
             return;
         // Only the newest load may paint: one still running for the account just replaced must not draw its rows.
         const mine_ = ++loads.current;
-        let theirs = [];
-        let failed = false;
+        const key = mineCacheKey({ app: adapters.words.app, account: rt.who.account });
+        const paint = (theirs, local) => {
+            const waiting = new Map(local.map((l) => [l.id, l]));
+            // A report the app already lists keeps its own status; one still on the phone is listed as on the phone.
+            const phone = local.filter((l) => !l.onlyFollowUp && !theirs.some((t) => t.id === l.id)).map((l) => ({ id: l.id, status: 'on-phone', at: l.at, ...(l.words ? { words: l.words } : {}), ...(l.error ? { error: l.error } : {}) }));
+            setRows([...theirs.map((t) => ({ ...t, ...(waiting.get(t.id)?.error ? { error: waiting.get(t.id).error } : {}) })), ...phone].sort((a, b) => (b.at ?? 0) - (a.at ?? 0)));
+        };
+        // Draw at once from what the phone already holds, then ask the app.
+        if (known.current === null) {
+            const saved = await readCache(rt.store, key);
+            if (mine_ !== loads.current)
+                return;
+            if (Array.isArray(saved))
+                known.current = saved;
+        }
+        if (known.current !== null) {
+            const local = await rt.waiting();
+            if (mine_ !== loads.current)
+                return;
+            paint(known.current, local);
+            setUpdating(true);
+        }
+        let theirs = null;
         try {
             theirs = await adapters.store.mine();
         }
         catch {
-            failed = true;
+            theirs = null;
         }
         const local = await rt.waiting();
         if (mine_ !== loads.current)
             return;
-        setBad(failed ? S.couldNotLoadMine : '');
-        const waiting = new Map(local.map((l) => [l.id, l]));
-        // A report the app already lists keeps its own status; one still on the phone is listed as on the phone.
-        const phone = local.filter((l) => !l.onlyFollowUp && !theirs.some((t) => t.id === l.id)).map((l) => ({ id: l.id, status: 'on-phone', at: l.at, ...(l.words ? { words: l.words } : {}), ...(l.error ? { error: l.error } : {}) }));
-        setRows([...theirs.map((t) => ({ ...t, ...(waiting.get(t.id)?.error ? { error: waiting.get(t.id).error } : {}) })), ...phone].sort((a, b) => (b.at ?? 0) - (a.at ?? 0)));
-    }, [adapters, rt, S.couldNotLoadMine]);
+        setUpdating(false);
+        if (theirs) {
+            known.current = theirs;
+            void writeCache(rt.store, key, theirs);
+            setBad('');
+            paint(theirs, local);
+        }
+        else if (known.current !== null) {
+            setBad(S.offlineShowingSaved);
+            paint(known.current, local);
+        }
+        else {
+            setBad(S.couldNotLoadMine);
+            paint([], local);
+        }
+    }, [adapters, rt, S.couldNotLoadMine, S.offlineShowingSaved]);
     useEffect(() => { void load(); }, [load, tick]);
     if (who === null)
         return _jsx("p", { role: "alert", children: S.signedOutMine });
     if (open && !onOpen) {
         return (_jsxs("section", { className: "sac-mine", children: [_jsx("button", { type: "button", className: "sac-button", onClick: () => setOpen(null), children: S.back }), _jsx(SuggestionDetail, { adapters: adapters, id: open })] }));
     }
-    return (_jsxs("section", { className: "sac-mine", "aria-labelledby": "sac-mine-title", children: [_jsx("h2", { id: "sac-mine-title", className: "sac-title", children: S.mineTitle }), bad ? _jsx("p", { role: "alert", className: "sac-error", children: bad }) : null, rows === null ? _jsx("p", { children: S.loading }) : rows.length === 0 ? _jsx("p", { children: S.mineEmpty }) : (_jsx("ul", { className: "sac-list", children: rows.map((r) => {
+    return (_jsxs("section", { className: "sac-mine", "aria-labelledby": "sac-mine-title", children: [_jsx("h2", { id: "sac-mine-title", className: "sac-title", children: S.mineTitle }), bad ? _jsx("p", { role: "alert", className: "sac-error", children: bad }) : null, updating ? _jsx("p", { role: "status", className: "sac-muted", "data-updating": "", children: S.updating }) : null, rows === null ? _jsx("p", { children: S.loading }) : rows.length === 0 ? _jsx("p", { children: S.mineEmpty }) : (_jsx("ul", { className: "sac-list", children: rows.map((r) => {
                     const preview = typeof r.words === 'string' ? r.words : typeof r.title === 'string' ? r.title : '';
                     return (_jsxs("li", { className: "sac-row", "data-status": r.status, children: [_jsxs("button", { type: "button", className: "sac-row-button", onClick: () => (onOpen ? onOpen(r.id) : setOpen(r.id)), children: [preview ? _jsx("span", { className: "sac-row-words", children: preview }) : null, _jsx("span", { className: "sac-row-status", children: statusWords(r.status, owner) }), _jsx("span", { className: "sac-muted", children: statusMeaning(r.status, owner) })] }), r.error ? (_jsxs(_Fragment, { children: [_jsx("p", { role: "alert", className: "sac-error", children: r.error }), rt ? _jsx("button", { type: "button", className: "sac-button", onClick: () => void rt.retry(r.id), children: S.retry }) : null] })) : null] }, r.id));
                 }) })), _jsx(Toasts, {})] }));

package/dist/client/view-cache.d.ts

@@ -0,0 +1,11 @@
+import type { Store } from './idb.ts';
+export declare const mineCacheKey: (id: {
+    app: string;
+    account: string;
+}) => string;
+export declare const oneCacheKey: (id: {
+    app: string;
+    account: string;
+}, reportId: string) => string;
+export declare function readCache<T>(store: Store, key: string): Promise<T | undefined>;
+export declare function writeCache(store: Store, key: string, value: unknown): Promise<void>;

package/dist/client/view-cache.js

@@ -0,0 +1,21 @@
+// THE LAST ANSWER, KEPT ON THE PHONE. My suggestions and the detail view draw from this at once and then
+// refresh from the app, so opening them never waits on the app being reachable. The key names the app and
+// the account exactly as a draft's does, so one person's cache is never read for another.
+import { draftKey } from './drafts.js';
+const base = (id) => `${draftKey(id)}#view`;
+export const mineCacheKey = (id) => `${base(id)}:mine`;
+export const oneCacheKey = (id, reportId) => `${base(id)}:one:${reportId}`;
+export async function readCache(store, key) {
+    try {
+        return await store.get('kv', key);
+    }
+    catch {
+        return undefined;
+    }
+}
+export async function writeCache(store, key, value) {
+    try {
+        await store.put('kv', key, value);
+    }
+    catch { /* a full or blocked database only costs the next open its head start */ }
+}

package/dist/client/words.d.ts

@@ -85,6 +85,8 @@ export interface Strings {
     screenshotFailed: string;
     couldNotOpen: string;
     couldNotLoadMine: string;
+    updating: string;
+    offlineShowingSaved: string;
     addFailed: string;
     overLimit: string;
     stepLabel: string;

package/dist/client/words.js

@@ -79,6 +79,8 @@ export const DEFAULT_STRINGS = {
     screenshotFailed: 'The screenshot could not be taken.',
     couldNotOpen: 'This suggestion could not be opened.',
     couldNotLoadMine: 'Your suggestions could not be loaded.',
+    updating: 'Updating',
+    offlineShowingSaved: 'Could not reach the app. Showing what this phone last saw.',
     addFailed: 'That could not be added. Try again.',
     overLimit: 'Something in this suggestion is over a limit. Remove an attachment and try again.',
     stepLabel: 'Where it is',

package/dist/server/handlers.d.ts

@@ -158,7 +158,7 @@ export declare const APPROVAL_LEASE_MS: number;
 export declare const READ_TTL_MS: number;
 export declare const VOICE_FILE_BYTES: number;
 /** A voice file may be this many bytes per declared second (768 kbit/s, generous for any recorder) plus a little slack: ten seconds cannot claim 25 MB. */
-export declare const VOICE_BYTES_PER_SECOND = 96000;
+export declare const VOICE_BYTES_PER_SECOND = 200000;
 /** How long a report with missing attachments waits before it is offered to a Mac anyway. */
 export declare const INCOMPLETE_GRACE_MS: number;
 export declare function createReportHandlers(opts: ReportHandlerOptions): {

package/dist/server/handlers.js

@@ -26,7 +26,7 @@ export const APPROVAL_LEASE_MS = 7 * 24 * 3600_000;
 export const READ_TTL_MS = 5 * 60_000;
 export const VOICE_FILE_BYTES = 25 * 2 ** 20;
 /** A voice file may be this many bytes per declared second (768 kbit/s, generous for any recorder) plus a little slack: ten seconds cannot claim 25 MB. */
-export const VOICE_BYTES_PER_SECOND = 96_000;
+export const VOICE_BYTES_PER_SECOND = 200_000;
 /** How long a report with missing attachments waits before it is offered to a Mac anyway. */
 export const INCOMPLETE_GRACE_MS = 60 * 60_000;
 const FILE = /^[A-Za-z0-9][A-Za-z0-9._-]{0,99}$/;
@@ -374,8 +374,9 @@ export function createReportHandlers(opts) {
             return json(409, { error: 'that file has not arrived yet' });
         const declared = declaredFile(r, file);
         const refuse = async (error) => {
-            await store.discard({ reportId: id, file }); // nothing unverified stays in storage
-            await store.setFile(id, file, null);
+            // Drop the pending entry first and delete the object only if that really removed it: a verified entry that won a race is never orphaned.
+            if (await store.setFile(id, file, null))
+                await store.discard({ reportId: id, file }); // nothing unverified stays in storage
             return json(422, { error });
         };
         if (!sameType(state.pending.type, real.type) || !sameType(declared?.type ?? state.pending.type, real.type))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersuit/suggest-a-change",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "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/detail.tsx

@@ -11,6 +11,7 @@ import { recoverTakes } from './recorder.ts'
 import { queueFollowUp, type Report } from './reports.ts'
 import { useRuntime, useTick, type FollowUp } from './runtime.ts'
 import { Toasts } from './toast.tsx'
+import { oneCacheKey, readCache, writeCache } from './view-cache.ts'
 import { effectiveCeilings, lengthWords, sizeWords, statusMeaning, statusWords, stringsFor } from './words.ts'
 
 export function statusOf(r: Record<string, unknown>): string {
@@ -84,6 +85,8 @@ export function SuggestionDetail({ adapters, id }: { adapters: Adapters; id: str
   const [note, setNote] = useState('')
   const [bad, setBad] = useState('')
   const [ready, setReady] = useState(false)
+  const [updating, setUpdating] = useState(false)
+  const [offline, setOffline] = useState(false)
   // The follow-up being written: its id is made when the person starts it, so queuing it twice is one follow-up.
   const followId = useRef<string | null>(null)
   const n = useRef(0)
@@ -94,11 +97,13 @@ export function SuggestionDetail({ adapters, id }: { adapters: Adapters; id: str
   // Each load takes a number; only the newest may paint, so a load still running for the account that
   // was just replaced never draws its rows under the new one.
   const loads = useRef(0)
+  // True once a report from the phone's copy or the app is on screen for this id and account.
+  const shown = useRef(false)
   // Anything that writes the follow-up waits until its draft has been read, so the counter is right.
   const restored = useRef(makeDeferred())
 
   // A different account (or none) shows nothing of the last one.
-  useEffect(() => { loads.current++; setReport(undefined); setPending([]); setReady(false); setMore(''); setHeard([]); followId.current = null; n.current = 0; restored.current = makeDeferred() }, [rt])
+  useEffect(() => { loads.current++; shown.current = false; setUpdating(false); setOffline(false); setReport(undefined); setPending([]); setReady(false); setMore(''); setHeard([]); followId.current = null; n.current = 0; restored.current = makeDeferred() }, [rt])
 
   const load = useCallback(async () => {
     if (!rt) return
@@ -111,8 +116,20 @@ export function SuggestionDetail({ adapters, id }: { adapters: Adapters; id: str
       setPending(waiting)
       if (mine) { setReport({ ...(mine.report as Report & Record<string, unknown>), status: 'on-phone' }); setRefusal(mine.error); return }
       setRefusal(undefined)
-      const r = (await adapters.store.one(id)) as Report & Record<string, unknown>
-      if (fresh()) setReport(r)
+      const ckey = oneCacheKey({ app: adapters.words.app, account: rt.who.account }, id)
+      // Draw at once from the phone's copy, then ask the app.
+      if (!shown.current) {
+        const saved = await readCache<Report & Record<string, unknown>>(rt.store, ckey)
+        if (!fresh()) return
+        if (saved && typeof saved === 'object') { shown.current = true; setReport(saved); setUpdating(true) }
+      }
+      let r: (Report & Record<string, unknown>) | undefined
+      try { r = (await adapters.store.one(id)) as Report & Record<string, unknown> } catch { r = undefined }
+      if (!fresh()) return
+      setUpdating(false)
+      if (r) { shown.current = true; setOffline(false); setReport(r); void writeCache(rt.store, ckey, r) }
+      else if (shown.current) setOffline(true)
+      else setReport(null)
     } catch { if (fresh()) setReport(null) }
   }, [adapters, id, rt])
   useEffect(() => { void load() }, [load, tick])
@@ -203,6 +220,8 @@ export function SuggestionDetail({ adapters, id }: { adapters: Adapters; id: str
           {rt ? <button type="button" className="sac-button" onClick={() => void rt.retry(id)}>{S.retry}</button> : null}
         </>
       ) : null}
+      {updating ? <p role="status" className="sac-muted" data-updating="">{S.updating}</p> : null}
+      {offline ? <p role="alert" className="sac-error">{S.offlineShowingSaved}</p> : null}
       <StatusStrip status={status} owner={owner} label={S.stepLabel} step={stepOf(report)} timeline={timelineOf(report)} />
       {typeof report.words === 'string' && report.words ? <p className="sac-words">{report.words}</p> : null}
       {Object.entries(answers).filter(([, v]) => v).map(([k, v]) => <p key={k} className="sac-words" data-answer={k}>{v}</p>)}

package/src/client/entry.tsx

@@ -2,12 +2,20 @@
 // THE ENTRY: one control, `data-suggest-entry`, which is the contract the screen checker looks for.
 // Signed out, it opens nothing and says why. Signed in, it hands over to the host (`onOpen`), which
 // shows the sheet. `<ReportProblem>` is the same control for an error screen, already filled in.
-import { useEffect, useState } from 'react'
+import { useEffect, useState, type AriaRole } from 'react'
 import type { Adapters } from './adapters.ts'
+import { useRuntime } from './runtime.ts'
 import { SuggestSheet } from './sheet.tsx'
 import { stringsFor } from './words.ts'
 
-export function SuggestEntry({ adapters, onOpen, className }: { adapters: Adapters; onOpen(): void; className?: string }) {
+/** Keeps the phone's outbox moving (on reconnect and every 15 seconds) for as long as it is mounted, with nothing drawn.
+ *  <SuggestEntry> already does this; a host with no always-mounted entry mounts this once, high in the app. */
+export function KeepSending({ adapters }: { adapters: Adapters }) {
+  useRuntime(adapters)
+  return null
+}
+
+export function SuggestEntry({ adapters, onOpen, className, role }: { adapters: Adapters; onOpen(): void; className?: string; /** An ARIA role for the button (for example `menuitem` when the host shows it as a menu row). Unset by default. */ role?: AriaRole }) {
   const S = stringsFor(adapters.words)
   const [why, setWhy] = useState('')
   const [busy, setBusy] = useState(false)
@@ -23,7 +31,8 @@ export function SuggestEntry({ adapters, onOpen, className }: { adapters: Adapte
   }
   return (
     <span className="sac-entry-wrap">
-      <button type="button" data-suggest-entry="" className={`sac-entry${className ? ` ${className}` : ''}`} aria-busy={busy || undefined} onClick={() => void press()}>{S.entry}</button>
+      <KeepSending adapters={adapters} />
+      <button type="button" role={role} data-suggest-entry="" className={`sac-entry${className ? ` ${className}` : ''}`} aria-busy={busy || undefined} onClick={() => void press()}>{S.entry}</button>
       {why ? <span role="status" className="sac-entry-why">{why}</span> : null}
     </span>
   )

package/src/client/mine.tsx

@@ -8,6 +8,7 @@ import type { Adapters } from './adapters.ts'
 import { SuggestionDetail } from './detail.tsx'
 import type { Summary } from './reports.ts'
 import { useRuntime, useTick } from './runtime.ts'
+import { mineCacheKey, readCache, writeCache } from './view-cache.ts'
 import { Toasts } from './toast.tsx'
 import { statusMeaning, statusWords, stringsFor } from './words.ts'
 
@@ -21,26 +22,55 @@ export function MySuggestions({ adapters, onOpen }: { adapters: Adapters; onOpen
   const [rows, setRows] = useState<Row[] | null>(null)
   const [open, setOpen] = useState<string | null>(null)
   const [bad, setBad] = useState('')
+  const [updating, setUpdating] = useState(false)
 
   // Another account (or none) shows nothing of the last one's rows.
   const loads = useRef(0)
-  useEffect(() => { loads.current++; setRows(null); setOpen(null) }, [rt])
+  // What the app last said (or the phone kept of it) for this account; null until either is known.
+  const known = useRef<Summary[] | null>(null)
+  useEffect(() => { loads.current++; known.current = null; setRows(null); setOpen(null); setBad(''); setUpdating(false) }, [rt])
 
   const load = useCallback(async () => {
     if (!rt) return
     // Only the newest load may paint: one still running for the account just replaced must not draw its rows.
     const mine_ = ++loads.current
-    let theirs: Summary[] = []
-    let failed = false
-    try { theirs = await adapters.store.mine() } catch { failed = true }
+    const key = mineCacheKey({ app: adapters.words.app, account: rt.who.account })
+    const paint = (theirs: Summary[], local: Awaited<ReturnType<typeof rt.waiting>>) => {
+      const waiting = new Map(local.map((l) => [l.id, l]))
+      // A report the app already lists keeps its own status; one still on the phone is listed as on the phone.
+      const phone: Row[] = local.filter((l) => !l.onlyFollowUp && !theirs.some((t) => t.id === l.id)).map((l) => ({ id: l.id, status: 'on-phone', at: l.at, ...(l.words ? { words: l.words } : {}), ...(l.error ? { error: l.error } : {}) }))
+      setRows([...theirs.map((t) => ({ ...t, ...(waiting.get(t.id)?.error ? { error: waiting.get(t.id)!.error } : {}) })), ...phone].sort((a, b) => (b.at ?? 0) - (a.at ?? 0)))
+    }
+    // Draw at once from what the phone already holds, then ask the app.
+    if (known.current === null) {
+      const saved = await readCache<Summary[]>(rt.store, key)
+      if (mine_ !== loads.current) return
+      if (Array.isArray(saved)) known.current = saved
+    }
+    if (known.current !== null) {
+      const local = await rt.waiting()
+      if (mine_ !== loads.current) return
+      paint(known.current, local)
+      setUpdating(true)
+    }
+    let theirs: Summary[] | null = null
+    try { theirs = await adapters.store.mine() } catch { theirs = null }
     const local = await rt.waiting()
     if (mine_ !== loads.current) return
-    setBad(failed ? S.couldNotLoadMine : '')
-    const waiting = new Map(local.map((l) => [l.id, l]))
-    // A report the app already lists keeps its own status; one still on the phone is listed as on the phone.
-    const phone: Row[] = local.filter((l) => !l.onlyFollowUp && !theirs.some((t) => t.id === l.id)).map((l) => ({ id: l.id, status: 'on-phone', at: l.at, ...(l.words ? { words: l.words } : {}), ...(l.error ? { error: l.error } : {}) }))
-    setRows([...theirs.map((t) => ({ ...t, ...(waiting.get(t.id)?.error ? { error: waiting.get(t.id)!.error } : {}) })), ...phone].sort((a, b) => (b.at ?? 0) - (a.at ?? 0)))
-  }, [adapters, rt, S.couldNotLoadMine])
+    setUpdating(false)
+    if (theirs) {
+      known.current = theirs
+      void writeCache(rt.store, key, theirs)
+      setBad('')
+      paint(theirs, local)
+    } else if (known.current !== null) {
+      setBad(S.offlineShowingSaved)
+      paint(known.current, local)
+    } else {
+      setBad(S.couldNotLoadMine)
+      paint([], local)
+    }
+  }, [adapters, rt, S.couldNotLoadMine, S.offlineShowingSaved])
   useEffect(() => { void load() }, [load, tick])
 
   if (who === null) return <p role="alert">{S.signedOutMine}</p>
@@ -56,6 +86,7 @@ export function MySuggestions({ adapters, onOpen }: { adapters: Adapters; onOpen
     <section className="sac-mine" aria-labelledby="sac-mine-title">
       <h2 id="sac-mine-title" className="sac-title">{S.mineTitle}</h2>
       {bad ? <p role="alert" className="sac-error">{bad}</p> : null}
+      {updating ? <p role="status" className="sac-muted" data-updating="">{S.updating}</p> : null}
       {rows === null ? <p>{S.loading}</p> : rows.length === 0 ? <p>{S.mineEmpty}</p> : (
         <ul className="sac-list">
           {rows.map((r) => {

package/src/client/view-cache.ts

@@ -0,0 +1,16 @@
+// THE LAST ANSWER, KEPT ON THE PHONE. My suggestions and the detail view draw from this at once and then
+// refresh from the app, so opening them never waits on the app being reachable. The key names the app and
+// the account exactly as a draft's does, so one person's cache is never read for another.
+import { draftKey } from './drafts.ts'
+import type { Store } from './idb.ts'
+
+const base = (id: { app: string; account: string }) => `${draftKey(id)}#view`
+export const mineCacheKey = (id: { app: string; account: string }) => `${base(id)}:mine`
+export const oneCacheKey = (id: { app: string; account: string }, reportId: string) => `${base(id)}:one:${reportId}`
+
+export async function readCache<T>(store: Store, key: string): Promise<T | undefined> {
+  try { return await store.get<T>('kv', key) } catch { return undefined }
+}
+export async function writeCache(store: Store, key: string, value: unknown): Promise<void> {
+  try { await store.put('kv', key, value) } catch { /* a full or blocked database only costs the next open its head start */ }
+}

package/src/client/words.ts

@@ -91,6 +91,8 @@ export interface Strings {
   screenshotFailed: string
   couldNotOpen: string
   couldNotLoadMine: string
+  updating: string
+  offlineShowingSaved: string
   addFailed: string
   overLimit: string
   stepLabel: string
@@ -172,6 +174,8 @@ export const DEFAULT_STRINGS: Strings = {
   screenshotFailed: 'The screenshot could not be taken.',
   couldNotOpen: 'This suggestion could not be opened.',
   couldNotLoadMine: 'Your suggestions could not be loaded.',
+  updating: 'Updating',
+  offlineShowingSaved: 'Could not reach the app. Showing what this phone last saw.',
   addFailed: 'That could not be added. Try again.',
   overLimit: 'Something in this suggestion is over a limit. Remove an attachment and try again.',
   stepLabel: 'Where it is',

package/src/server/handlers.ts

@@ -108,7 +108,7 @@ export const APPROVAL_LEASE_MS = 7 * 24 * 3600_000
 export const READ_TTL_MS = 5 * 60_000
 export const VOICE_FILE_BYTES = 25 * 2 ** 20
 /** A voice file may be this many bytes per declared second (768 kbit/s, generous for any recorder) plus a little slack: ten seconds cannot claim 25 MB. */
-export const VOICE_BYTES_PER_SECOND = 96_000
+export const VOICE_BYTES_PER_SECOND = 200_000
 /** How long a report with missing attachments waits before it is offered to a Mac anyway. */
 export const INCOMPLETE_GRACE_MS = 60 * 60_000
 const FILE = /^[A-Za-z0-9][A-Za-z0-9._-]{0,99}$/
@@ -362,8 +362,8 @@ export function createReportHandlers(opts: ReportHandlerOptions) {
     if (!real) return json(409, { error: 'that file has not arrived yet' })
     const declared = declaredFile(r, file)
     const refuse = async (error: string) => {
-      await store.discard({ reportId: id, file }) // nothing unverified stays in storage
-      await store.setFile(id, file, null)
+      // Drop the pending entry first and delete the object only if that really removed it: a verified entry that won a race is never orphaned.
+      if (await store.setFile(id, file, null)) await store.discard({ reportId: id, file }) // nothing unverified stays in storage
       return json(422, { error })
     }
     if (!sameType(state.pending.type, real.type) || !sameType(declared?.type ?? state.pending.type, real.type)) return refuse('the file\'s contents are not the type it was declared as')