@supersuit/suggest-a-change 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.1.3 (2026-10-13)
+
+- **The phone's saved answers belong to whoever asked.** A list or report that the app answers after the signed-in account has changed is neither saved under the earlier account's key nor drawn: the account is asked again after the answer, as the outbox does before a write.
+- **A refusal is not "could not reach the app".** `mine()` and `one(id)` signal a refusal by throwing an error with `refused: true` or a `status` of 401, 403 or 404 (`one` may also answer an object with a string `refused`). On a refusal the saved copy is deleted and the screen says the suggestion could not be opened (or the list could not be loaded); any other failure keeps the saved copy under the "Could not reach the app" line, as in 0.1.2. Documented on `StoreAdapter`.
+- **The detail view follows its `id`.** Changing the id prop resets what is shown, so one report is never drawn under another's address.
+- **The saved views are kept tidy.** After a successful list, saved reports the app no longer lists are deleted, and signing out clears the account's saved views from the phone.
+- "Updating" shows only until the first answer after the screen opens, not on every periodic reload.
+
+## 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).

package/README.md

@@ -47,6 +47,8 @@ const adapters: Adapters = {
 // then:                        {open && <SuggestSheet adapters={adapters} where={{ screen: "Photos", route: location.pathname }} onClose={() => setOpen(false)} />}
 ```
 
+`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. An adapter tells a refusal from an unreachable app: `mine()` and `one()` throw an error with `refused: true` or a `status` of 401, 403 or 404 for a refusal (the saved copy is then deleted), and anything else thrown is unreachable. Saved reports the list no longer holds are pruned, and signing out clears them. 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 { dropCache, isRefusal, oneCacheKey, readCache, useClearOnSignOut, 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,13 @@ 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]);
+    useClearOnSignOut(rt, who, adapters.words.app);
+    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, id]);
     const load = useCallback(async () => {
         if (!rt)
             return;
@@ -109,9 +115,60 @@ 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;
+            let refused = false;
+            try {
+                const a = (await adapters.store.one(id));
+                if (a && typeof a === 'object' && typeof a.refused === 'string')
+                    refused = true;
+                else
+                    r = a;
+            }
+            catch (e) {
+                r = undefined;
+                refused = isRefusal(e);
+            }
+            // The answer belongs to whoever asked: if the signed-in account is no longer that one, nothing is kept or drawn.
+            let now = null;
+            try {
+                now = await adapters.identity();
+            }
+            catch {
+                now = null;
+            }
+            if (!fresh())
+                return;
+            if (!now || now.account !== rt.who.account)
+                return;
+            setUpdating(false);
+            if (r) {
+                shown.current = true;
+                setOffline(false);
                 setReport(r);
+                void writeCache(rt.store, ckey, r);
+            }
+            else if (refused) {
+                shown.current = false;
+                setOffline(false);
+                void dropCache(rt.store, ckey);
+                setReport(null);
+            }
+            else if (shown.current)
+                setOffline(true);
+            else
+                setReport(null);
         }
         catch {
             if (fresh())
@@ -211,5 +268,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,13 +1,15 @@
+import { type AriaRole } from 'react';
 import type { Adapters } from './adapters.ts';
 /** 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 }: {
+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

@@ -13,7 +13,7 @@ export function KeepSending({ adapters }) {
     useRuntime(adapters);
     return null;
 }
-export function SuggestEntry({ adapters, onOpen, className }) {
+export function SuggestEntry({ adapters, onOpen, className, role }) {
     const S = stringsFor(adapters.words);
     const [why, setWhy] = useState('');
     const [busy, setBusy] = useState(false);
@@ -35,7 +35,7 @@ export function SuggestEntry({ adapters, onOpen, className }) {
         setWhy('');
         onOpen();
     }
-    return (_jsxs("span", { className: "sac-entry-wrap", children: [_jsx(KeepSending, { adapters: adapters }), _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 { dropCache, isRefusal, mineCacheKey, pruneOnes, readCache, useClearOnSignOut, 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,97 @@ 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);
+    // The first answer after mount ends "Updating"; later periodic reloads refresh quietly.
+    const answered = useRef(false);
+    useClearOnSignOut(rt, who, adapters.words.app);
+    useEffect(() => { loads.current++; known.current = null; answered.current = false; 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);
+            if (!answered.current)
+                setUpdating(true);
+        }
+        let theirs = null;
+        let refused = false;
         try {
             theirs = await adapters.store.mine();
         }
+        catch (e) {
+            theirs = null;
+            refused = isRefusal(e);
+        }
+        // The answer belongs to whoever asked. If the signed-in account is no longer that one, nothing is kept or drawn.
+        let now = null;
+        try {
+            now = await adapters.identity();
+        }
         catch {
-            failed = true;
+            now = 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]);
+        if (!now || now.account !== rt.who.account)
+            return;
+        answered.current = true;
+        setUpdating(false);
+        if (theirs) {
+            known.current = theirs;
+            void writeCache(rt.store, key, theirs);
+            void pruneOnes(rt.store, { app: adapters.words.app, account: rt.who.account }, theirs.map((t) => t.id));
+            setBad('');
+            paint(theirs, local);
+        }
+        else if (refused) {
+            // The app said no: what the phone held is no longer this person's to see.
+            known.current = null;
+            void dropCache(rt.store, key);
+            setBad(S.couldNotLoadMine);
+            paint([], 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/reports.d.ts

@@ -22,7 +22,9 @@ export interface StoreAdapter {
     uploadPart(reportId: string, file: string, part: number, bytes: Blob): Promise<'done' | {
         refused: string;
     }>;
+    /** An unreachable app THROWS (a network error). A refusal (the list is no longer this person's) throws an error with `refused: true` or a `status` of 401, 403 or 404: the phone then drops what it kept. */
     mine(): Promise<Summary[]>;
+    /** Same contract as `mine`: a report that is gone or not this person's is a refusal (`refused: true`, or status 401/403/404, or an answer object with a string `refused`), never a plain failure, so the phone stops showing its saved copy. */
     one(id: string): Promise<Report>;
     /** Adds to a report. Also at-least-once: it must dedupe by (id, `more.followId`). */
     append(id: string, more: Record<string, unknown>): Promise<'done' | {

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

@@ -0,0 +1,26 @@
+import type { Store } from './idb.ts';
+type Id = {
+    app: string;
+    account: string;
+};
+export declare const mineCacheKey: (id: Id) => string;
+export declare const oneCacheKey: (id: Id, 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>;
+export declare function dropCache(store: Store, key: string): Promise<void>;
+/** After a successful list: cached reports the app no longer lists (deleted, or no longer this person's) are dropped. */
+export declare function pruneOnes(store: Store, id: Id, keep: string[]): Promise<void>;
+/** Everything cached for one account: the list and every report. */
+export declare function clearViewCache(store: Store, id: Id): Promise<void>;
+/** True when the app REFUSED (the report is gone, or this person may not see it), as against being unreachable.
+ *  The adapter contract: `mine()` and `one()` throw an error carrying `refused: true`, or a `status` of 401, 403 or 404;
+ *  `one()` may instead answer an object with a string `refused`. Anything else thrown is a failure to reach the app. */
+export declare function isRefusal(e: unknown): boolean;
+/** When the person signs out (identity becomes null), the account that was signed in loses its cached views on this phone. */
+export declare function useClearOnSignOut(rt: {
+    store: Store;
+    who: {
+        account: string;
+    };
+} | null, who: unknown, app: string): void;
+export {};

package/dist/client/view-cache.js

@@ -0,0 +1,72 @@
+'use client';
+// 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 { useEffect, useRef } from 'react';
+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 */ }
+}
+export async function dropCache(store, key) {
+    try {
+        await store.del('kv', key);
+    }
+    catch { /* nothing to drop */ }
+}
+/** After a successful list: cached reports the app no longer lists (deleted, or no longer this person's) are dropped. */
+export async function pruneOnes(store, id, keep) {
+    try {
+        const prefix = `${base(id)}:one:`;
+        const live = new Set(keep);
+        for (const row of await store.all('kv', prefix))
+            if (!live.has(row.key.slice(prefix.length)))
+                await store.del('kv', row.key);
+    }
+    catch { /* the next list prunes again */ }
+}
+/** Everything cached for one account: the list and every report. */
+export async function clearViewCache(store, id) {
+    try {
+        for (const row of await store.all('kv', base(id)))
+            await store.del('kv', row.key);
+    }
+    catch { /* best effort */ }
+}
+/** True when the app REFUSED (the report is gone, or this person may not see it), as against being unreachable.
+ *  The adapter contract: `mine()` and `one()` throw an error carrying `refused: true`, or a `status` of 401, 403 or 404;
+ *  `one()` may instead answer an object with a string `refused`. Anything else thrown is a failure to reach the app. */
+export function isRefusal(e) {
+    if (!e || typeof e !== 'object')
+        return false;
+    const x = e;
+    return x.refused === true || (typeof x.refused === 'string' && x.refused !== '') || x.status === 401 || x.status === 403 || x.status === 404;
+}
+/** When the person signs out (identity becomes null), the account that was signed in loses its cached views on this phone. */
+export function useClearOnSignOut(rt, who, app) {
+    const last = useRef(null);
+    useEffect(() => {
+        if (rt) {
+            last.current = { store: rt.store, id: { app, account: rt.who.account } };
+            return;
+        }
+        if (who === null && last.current) {
+            const l = last.current;
+            last.current = null;
+            void clearViewCache(l.store, l.id);
+        }
+    }, [rt, who, app]);
+}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersuit/suggest-a-change",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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 { dropCache, isRefusal, oneCacheKey, readCache, useClearOnSignOut, 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,14 @@ 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])
+  useClearOnSignOut(rt, who, adapters.words.app)
+  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, id])
 
   const load = useCallback(async () => {
     if (!rt) return
@@ -111,8 +117,30 @@ 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
+      let refused = false
+      try {
+        const a = (await adapters.store.one(id)) as unknown
+        if (a && typeof a === 'object' && typeof (a as { refused?: unknown }).refused === 'string') refused = true
+        else r = a as Report & Record<string, unknown>
+      } catch (e) { r = undefined; refused = isRefusal(e) }
+      // The answer belongs to whoever asked: if the signed-in account is no longer that one, nothing is kept or drawn.
+      let now: { account: string } | null = null
+      try { now = await adapters.identity() } catch { now = null }
+      if (!fresh()) return
+      if (!now || now.account !== rt.who.account) return
+      setUpdating(false)
+      if (r) { shown.current = true; setOffline(false); setReport(r); void writeCache(rt.store, ckey, r) }
+      else if (refused) { shown.current = false; setOffline(false); void dropCache(rt.store, ckey); setReport(null) }
+      else if (shown.current) setOffline(true)
+      else setReport(null)
     } catch { if (fresh()) setReport(null) }
   }, [adapters, id, rt])
   useEffect(() => { void load() }, [load, tick])
@@ -203,6 +231,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,7 +2,7 @@
 // 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'
@@ -15,7 +15,7 @@ export function KeepSending({ adapters }: { adapters: Adapters }) {
   return null
 }
 
-export function SuggestEntry({ adapters, onOpen, className }: { adapters: Adapters; onOpen(): void; className?: string }) {
+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)
@@ -32,7 +32,7 @@ export function SuggestEntry({ adapters, onOpen, className }: { adapters: Adapte
   return (
     <span className="sac-entry-wrap">
       <KeepSending adapters={adapters} />
-      <button type="button" data-suggest-entry="" className={`sac-entry${className ? ` ${className}` : ''}`} aria-busy={busy || undefined} onClick={() => void press()}>{S.entry}</button>
+      <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 { dropCache, isRefusal, mineCacheKey, pruneOnes, readCache, useClearOnSignOut, writeCache } from './view-cache.ts'
 import { Toasts } from './toast.tsx'
 import { statusMeaning, statusWords, stringsFor } from './words.ts'
 
@@ -21,26 +22,71 @@ 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)
+  // The first answer after mount ends "Updating"; later periodic reloads refresh quietly.
+  const answered = useRef(false)
+  useClearOnSignOut(rt, who, adapters.words.app)
+  useEffect(() => { loads.current++; known.current = null; answered.current = false; 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)
+      if (!answered.current) setUpdating(true)
+    }
+    let theirs: Summary[] | null = null
+    let refused = false
+    try { theirs = await adapters.store.mine() } catch (e) { theirs = null; refused = isRefusal(e) }
+    // The answer belongs to whoever asked. If the signed-in account is no longer that one, nothing is kept or drawn.
+    let now: { account: string } | null = null
+    try { now = await adapters.identity() } catch { now = 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])
+    if (!now || now.account !== rt.who.account) return
+    answered.current = true
+    setUpdating(false)
+    if (theirs) {
+      known.current = theirs
+      void writeCache(rt.store, key, theirs)
+      void pruneOnes(rt.store, { app: adapters.words.app, account: rt.who.account }, theirs.map((t) => t.id))
+      setBad('')
+      paint(theirs, local)
+    } else if (refused) {
+      // The app said no: what the phone held is no longer this person's to see.
+      known.current = null
+      void dropCache(rt.store, key)
+      setBad(S.couldNotLoadMine)
+      paint([], 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 +102,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/reports.ts

@@ -21,7 +21,9 @@ export interface Summary { id: string; status: string; kind?: string; at?: numbe
 export interface StoreAdapter {
   submit(report: Report): Promise<'done' | { refused: string }>
   uploadPart(reportId: string, file: string, part: number, bytes: Blob): Promise<'done' | { refused: string }>
+  /** An unreachable app THROWS (a network error). A refusal (the list is no longer this person's) throws an error with `refused: true` or a `status` of 401, 403 or 404: the phone then drops what it kept. */
   mine(): Promise<Summary[]>
+  /** Same contract as `mine`: a report that is gone or not this person's is a refusal (`refused: true`, or status 401/403/404, or an answer object with a string `refused`), never a plain failure, so the phone stops showing its saved copy. */
   one(id: string): Promise<Report>
   /** Adds to a report. Also at-least-once: it must dedupe by (id, `more.followId`). */
   append(id: string, more: Record<string, unknown>): Promise<'done' | { refused: string }>

package/src/client/view-cache.ts

@@ -0,0 +1,54 @@
+'use client'
+// 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 { useEffect, useRef } from 'react'
+import { draftKey } from './drafts.ts'
+import type { Store } from './idb.ts'
+
+type Id = { app: string; account: string }
+const base = (id: Id) => `${draftKey(id)}#view`
+export const mineCacheKey = (id: Id) => `${base(id)}:mine`
+export const oneCacheKey = (id: Id, 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 */ }
+}
+export async function dropCache(store: Store, key: string): Promise<void> {
+  try { await store.del('kv', key) } catch { /* nothing to drop */ }
+}
+
+/** After a successful list: cached reports the app no longer lists (deleted, or no longer this person's) are dropped. */
+export async function pruneOnes(store: Store, id: Id, keep: string[]): Promise<void> {
+  try {
+    const prefix = `${base(id)}:one:`
+    const live = new Set(keep)
+    for (const row of await store.all('kv', prefix)) if (!live.has(row.key.slice(prefix.length))) await store.del('kv', row.key)
+  } catch { /* the next list prunes again */ }
+}
+
+/** Everything cached for one account: the list and every report. */
+export async function clearViewCache(store: Store, id: Id): Promise<void> {
+  try { for (const row of await store.all('kv', base(id))) await store.del('kv', row.key) } catch { /* best effort */ }
+}
+
+/** True when the app REFUSED (the report is gone, or this person may not see it), as against being unreachable.
+ *  The adapter contract: `mine()` and `one()` throw an error carrying `refused: true`, or a `status` of 401, 403 or 404;
+ *  `one()` may instead answer an object with a string `refused`. Anything else thrown is a failure to reach the app. */
+export function isRefusal(e: unknown): boolean {
+  if (!e || typeof e !== 'object') return false
+  const x = e as { refused?: unknown; status?: unknown }
+  return x.refused === true || (typeof x.refused === 'string' && x.refused !== '') || x.status === 401 || x.status === 403 || x.status === 404
+}
+
+/** When the person signs out (identity becomes null), the account that was signed in loses its cached views on this phone. */
+export function useClearOnSignOut(rt: { store: Store; who: { account: string } } | null, who: unknown, app: string): void {
+  const last = useRef<{ store: Store; id: Id } | null>(null)
+  useEffect(() => {
+    if (rt) { last.current = { store: rt.store, id: { app, account: rt.who.account } }; return }
+    if (who === null && last.current) { const l = last.current; last.current = null; void clearViewCache(l.store, l.id) }
+  }, [rt, who, app])
+}

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