@supersuit/suggest-a-change 0.1.12 → 0.2.0

package/dist/client/context.js

@@ -0,0 +1,279 @@
+const MAX = { routes: 10, taps: 20, errors: 10, items: 40 };
+const SHARED = Symbol.for('@supersuit/suggest-a-change/context');
+const shared = globalThis[SHARED]
+    ?? (globalThis[SHARED] = { trail: { routes: [], taps: [], errors: [] }, installedAt: 0, undo: null });
+const trail = shared.trail;
+const clip = (s, max) => (s.length <= max ? s : `${s.slice(0, max - 1).trimEnd()}…`);
+const iso = () => new Date().toISOString();
+const push = (list, x, max) => { list.push(x); if (list.length > max)
+    list.splice(0, list.length - max); };
+/** A URL or path with no query and no hash, wherever it appears in a piece of text. */
+export const withoutQueries = (s) => s.replace(/([^\s?#'"()]*)[?#][^\s'"():]*/g, (_m, before) => before);
+/** A path segment that is an id, a token or an address rather than a name: a uuid, a long number, a long hex or
+ *  base64 run with letters and digits, anything over 24 characters, or anything with an @. */
+const idLike = (raw) => {
+    let s = raw;
+    try {
+        s = decodeURIComponent(raw);
+    }
+    catch { /* as it is */ }
+    return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(s)
+        || /^\d{4,}$/.test(s)
+        || (/^[0-9a-f]{12,}$/i.test(s) && /\d/.test(s))
+        || (/^[A-Za-z0-9_-]{16,}$/.test(s) && /\d/.test(s) && /[A-Za-z]/.test(s))
+        || s.length > 24
+        || s.includes('@');
+};
+const routeOf = (href) => {
+    let path;
+    try {
+        path = new URL(href, 'http://x').pathname;
+    }
+    catch {
+        path = String(href).split(/[?#]/)[0];
+    }
+    return path.split('/').map((seg) => (seg && idLike(seg) ? ':id' : seg)).join('/');
+};
+function recordRoute() {
+    if (typeof location === 'undefined')
+        return;
+    const route = routeOf(location.href);
+    if (trail.routes.at(-1)?.route === route)
+        return;
+    push(trail.routes, { route: clip(route, 300), at: iso() }, MAX.routes);
+}
+/** What a tapped thing is called: its label or its text, never what was typed into it. */
+function labelOf(target) {
+    if (!(target instanceof Element))
+        return null;
+    // Anything someone types into is "a text field", by its own label at most and never its text: an editable region,
+    // a text, search or combo box, wherever inside it the tap landed.
+    const typing = target.closest('[contenteditable]:not([contenteditable="false"]), [role="textbox"], [role="searchbox"], [role="combobox"]');
+    if (typing)
+        return clip(typing.getAttribute('aria-label')?.trim() || 'a text field', 60);
+    const el = target.closest('button, a, summary, label, select, textarea, input, [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="checkbox"], [aria-label]') ?? target;
+    const aria = el.getAttribute('aria-label')?.trim();
+    if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement) {
+        if (aria)
+            return clip(aria, 60);
+        const byId = el.id ? document.querySelector(`label[for="${CSS.escape(el.id)}"]`)?.textContent?.trim() : '';
+        if (byId)
+            return clip(byId.replace(/\s+/g, ' '), 60);
+        if (el instanceof HTMLTextAreaElement)
+            return 'a text box';
+        if (el instanceof HTMLSelectElement)
+            return 'a menu';
+        const type = el.type;
+        return type === 'checkbox' ? 'a checkbox' : type === 'radio' ? 'a choice' : type === 'button' || type === 'submit' ? clip(el.value ? 'a button' : 'a button', 60) : 'a text field';
+    }
+    if (aria)
+        return clip(aria, 60);
+    const text = (el.textContent ?? '').replace(/\s+/g, ' ').trim();
+    if (text)
+        return clip(text, 60);
+    const title = el.getAttribute('title')?.trim();
+    return title ? clip(title, 60) : el.tagName.toLowerCase();
+}
+const firstFrame = (stack) => {
+    if (typeof stack !== 'string')
+        return undefined;
+    const line = stack.split('\n').slice(1).map((l) => l.trim()).find((l) => /^at |@/.test(l));
+    return line ? clip(withoutQueries(line), 200) : undefined;
+};
+const messageOf = (x) => (x instanceof Error ? x.message : typeof x === 'string' ? x : x === undefined ? '' : typeof x === 'number' || typeof x === 'boolean' ? String(x) : '[object]');
+function recordError(message, stack) {
+    push(trail.errors, { message: clip(withoutQueries(message || 'An error with no message'), 300), ...(firstFrame(stack) ? { frame: firstFrame(stack) } : {}), at: iso() }, MAX.errors);
+}
+/** Starts keeping the trail. Idempotent: every screen of the module calls it on mount, and it installs once. */
+export function installContextListeners() {
+    if (shared.undo || typeof window === 'undefined' || typeof document === 'undefined')
+        return;
+    shared.installedAt = Date.now();
+    // A wrapper a host put on top of ours may outlive a reset; once reset, ours only passes the call through.
+    let live = true;
+    recordRoute();
+    const onClick = (e) => { const l = labelOf(e.target); if (l)
+        push(trail.taps, { label: l, at: iso() }, MAX.taps); };
+    const onError = (e) => { const ev = e; recordError(ev.message || messageOf(ev.error), ev.error?.stack); };
+    const onRejection = (e) => { const reason = e.reason; recordError(`Unhandled rejection: ${messageOf(reason)}`, reason?.stack); };
+    const onNav = () => recordRoute();
+    document.addEventListener('click', onClick, true);
+    window.addEventListener('error', onError);
+    window.addEventListener('unhandledrejection', onRejection);
+    window.addEventListener('popstate', onNav);
+    window.addEventListener('hashchange', onNav);
+    const { pushState, replaceState } = history;
+    const ourPush = function (...a) { const r = pushState.apply(this, a); if (live)
+        recordRoute(); return r; };
+    history.pushState = ourPush;
+    const ourReplace = function (...a) { const r = replaceState.apply(this, a); if (live)
+        recordRoute(); return r; };
+    history.replaceState = ourReplace;
+    const consoleError = console.error;
+    const ourError = function (...args) {
+        if (live)
+            try {
+                recordError(args.map(messageOf).filter(Boolean).join(' '), args.find((a) => a instanceof Error)?.stack);
+            }
+            catch { /* the trail never breaks logging */ }
+        return consoleError.apply(this, args);
+    };
+    console.error = ourError;
+    shared.undo = () => {
+        live = false;
+        document.removeEventListener('click', onClick, true);
+        window.removeEventListener('error', onError);
+        window.removeEventListener('unhandledrejection', onRejection);
+        window.removeEventListener('popstate', onNav);
+        window.removeEventListener('hashchange', onNav);
+        // Put back only what is still ours: a wrapper the host added later stays, and calls through ours harmlessly.
+        if (history.pushState === ourPush)
+            history.pushState = pushState;
+        if (history.replaceState === ourReplace)
+            history.replaceState = replaceState;
+        if (console.error === ourError)
+            console.error = consoleError;
+    };
+}
+/** Stops keeping the trail and forgets it (tests, and a host that signs someone out). */
+export function resetContext() {
+    shared.undo?.();
+    shared.undo = null;
+    trail.routes.length = 0;
+    trail.taps.length = 0;
+    trail.errors.length = 0;
+}
+/** A copy of the trail as it stands. */
+export const contextTrail = () => ({ routes: trail.routes.map((r) => ({ ...r })), taps: trail.taps.map((t) => ({ ...t })), errors: trail.errors.map((e) => ({ ...e })) });
+/** A user agent in plain words: "iPhone, iOS 18.1, Safari 18.1". */
+export function parseUserAgent(ua) {
+    const v = (re) => re.exec(ua)?.[1]?.replace(/_/g, '.');
+    let device = 'Unknown device';
+    let os = '';
+    if (/iPhone/.test(ua)) {
+        device = 'iPhone';
+        os = `iOS ${v(/OS (\d+[_.]\d+)/) ?? ''}`.trim();
+    }
+    else if (/iPad/.test(ua)) {
+        device = 'iPad';
+        os = `iPadOS ${v(/OS (\d+[_.]\d+)/) ?? ''}`.trim();
+    }
+    else if (/Android/.test(ua)) {
+        device = /Mobile/.test(ua) ? 'Android phone' : 'Android tablet';
+        os = `Android ${v(/Android (\d+(?:\.\d+)?)/) ?? ''}`.trim();
+    }
+    else if (/Macintosh|Mac OS X/.test(ua)) {
+        device = 'Mac';
+        os = 'macOS';
+    }
+    else if (/Windows/.test(ua)) {
+        device = 'Windows PC';
+        os = 'Windows';
+    }
+    else if (/CrOS/.test(ua)) {
+        device = 'Chromebook';
+        os = 'ChromeOS';
+    }
+    else if (/Linux/.test(ua)) {
+        device = 'Linux computer';
+        os = 'Linux';
+    }
+    const browser = v(/Edg(?:A|iOS)?\/(\d+)/) ? `Edge ${v(/Edg(?:A|iOS)?\/(\d+)/)}`
+        : v(/(?:Firefox|FxiOS)\/(\d+)/) ? `Firefox ${v(/(?:Firefox|FxiOS)\/(\d+)/)}`
+            : v(/(?:Chrome|CriOS)\/(\d+)/) ? `Chrome ${v(/(?:Chrome|CriOS)\/(\d+)/)}`
+                : /Safari/.test(ua) && v(/Version\/(\d+(?:\.\d+)?)/) ? `Safari ${v(/Version\/(\d+(?:\.\d+)?)/)}`
+                    : '';
+    return [device, os, browser].filter(Boolean).join(', ');
+}
+/** The device in plain words from User-Agent Client Hints when the browser has them, else from the user agent. */
+async function deviceWords(given) {
+    if (given)
+        return parseUserAgent(given);
+    const nav = typeof navigator === 'undefined' ? undefined : navigator;
+    const uad = nav?.userAgentData;
+    if (uad?.getHighEntropyValues) {
+        try {
+            const h = await Promise.race([uad.getHighEntropyValues(['platform', 'platformVersion', 'model', 'fullVersionList', 'mobile']), new Promise((r) => setTimeout(() => r(null), 300))]);
+            if (h) {
+                const brands = h.fullVersionList?.filter((b) => !/Not.?A.?Brand|Chromium/i.test(b.brand)) ?? [];
+                const b = brands.find((x) => /Edge/.test(x.brand)) ?? brands[0];
+                const platform = String(h.platform ?? '');
+                const device = String(h.model ?? '') || (platform === 'macOS' ? 'Mac' : platform === 'Windows' ? 'Windows PC' : platform === 'Android' ? (h.mobile ? 'Android phone' : 'Android tablet') : platform || 'Unknown device');
+                const os = [platform, String(h.platformVersion ?? '').split('.').slice(0, 2).join('.')].filter(Boolean).join(' ');
+                return [device, os, b ? `${b.brand.replace('Google ', '').replace('Microsoft ', '')} ${b.version.split('.')[0]}` : ''].filter(Boolean).join(', ');
+            }
+        }
+        catch { /* fall back to the user agent */ }
+    }
+    return parseUserAgent(nav?.userAgent ?? '');
+}
+const two = (n) => String(n).padStart(2, '0');
+function timeWords(d) {
+    const zone = (() => { try {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone;
+    }
+    catch {
+        return '';
+    } })();
+    const off = -d.getTimezoneOffset();
+    const offset = `UTC${off >= 0 ? '+' : '-'}${two(Math.floor(Math.abs(off) / 60))}:${two(Math.abs(off) % 60)}`;
+    return `${d.getFullYear()}-${two(d.getMonth() + 1)}-${two(d.getDate())} ${two(d.getHours())}:${two(d.getMinutes())} (${[zone, offset].filter(Boolean).join(', ')})`;
+}
+const media = (q) => { try {
+    return typeof matchMedia === 'function' && matchMedia(q).matches;
+}
+catch {
+    return false;
+} };
+/** Everything the module knows that would help fix it, each item with why it is shared, and the trail. */
+export async function collectContext(o = {}) {
+    const now = new Date(o.now?.() ?? Date.now());
+    const items = [];
+    const add = (key, label, value, why) => { if (value)
+        items.push({ key, label: clip(label, 80), value: clip(value, 500), why: clip(why, 200) }); };
+    const who = o.identity;
+    add('account', 'Your name in the app', who?.name || who?.username, 'so whoever fixes it knows who to thank, and can look at your account if the problem is in it');
+    add('time', 'Your local time', timeWords(now), 'so the fixer can line it up with what the app logged at that moment');
+    const langs = typeof navigator === 'undefined' ? [] : (navigator.languages?.length ? [...navigator.languages] : navigator.language ? [navigator.language] : []);
+    add('language', 'Your languages', langs.join(', '), 'some problems only happen in one language or date format');
+    add('device', 'Your device', await deviceWords(o.userAgent), 'so the fixer can try it on the same kind of device and browser');
+    if (typeof window !== 'undefined') {
+        const s = typeof screen === 'undefined' ? null : screen;
+        add('screen', 'Screen and window', `${s ? `${s.width}x${s.height} screen, ` : ''}${window.innerWidth}x${window.innerHeight} window, ${window.devicePixelRatio || 1}x pixels`, 'how things are laid out depends on the size of the screen and window');
+        const look = [media('(prefers-color-scheme: dark)') ? 'dark mode' : 'light mode', ...(media('(prefers-reduced-motion: reduce)') ? ['reduced motion'] : [])];
+        add('appearance', 'Appearance', look.join(', '), 'some problems only show in dark mode or with animations turned down');
+    }
+    if (typeof navigator !== 'undefined') {
+        const c = navigator.connection;
+        add('connection', 'Connection', [navigator.onLine === false ? 'offline' : 'online', c?.type, c?.effectiveType && `${c.effectiveType} speed`].filter(Boolean).join(', '), 'a slow or dropped connection explains many problems');
+    }
+    const since = shared.installedAt || (typeof performance !== 'undefined' ? performance.timeOrigin : 0);
+    if (since) {
+        const min = Math.max(0, Math.round((now.getTime() - since) / 60_000));
+        add('age', 'How long the page was open', min < 1 ? 'under a minute' : `${min} minute${min === 1 ? '' : 's'}`, 'some problems only start after a page has been open a while');
+    }
+    if (o.precise && typeof navigator !== 'undefined' && navigator.geolocation) {
+        const pos = await new Promise((resolve) => {
+            try {
+                navigator.geolocation.getCurrentPosition(resolve, () => resolve(null), { maximumAge: 600_000, timeout: 5000 });
+            }
+            catch {
+                resolve(null);
+            }
+        });
+        if (pos)
+            add('place', 'Where you were', `${pos.coords.latitude.toFixed(3)}, ${pos.coords.longitude.toFixed(3)}`, 'this app asked for it, because some problems only happen in one place');
+    }
+    if (o.extra) {
+        try {
+            const got = await o.extra();
+            (Array.isArray(got) ? got : []).forEach((x) => {
+                // An app item that does not say why it is shared is not shared.
+                if (x && typeof x.label === 'string' && typeof x.value === 'string' && typeof x.why === 'string' && x.why.trim())
+                    add(`app:${items.filter((i) => i.key.startsWith('app:')).length}`, x.label, x.value, x.why);
+            });
+        }
+        catch { /* the app's own context failing never blocks a suggestion */ }
+    }
+    return { items: items.slice(0, MAX.items), ...contextTrail() };
+}

package/dist/client/detail.d.ts

@@ -1,10 +1,10 @@
 import type { Adapters } from './adapters.ts';
 export declare function statusOf(r: Record<string, unknown>): string;
-/** The step shown under "Being made". The timeline entry is the truth (that is where the receiving side puts it); a top-level `step` is read only when there is no timeline. */
+/** The step shown under the current status. The timeline entry is the truth (that is where the receiving side puts it); a top-level `step` is read only when there is no timeline. */
 export declare function stepOf(r: Record<string, unknown>): string | undefined;
 /** The strip is made from the contract's own statuses, one step per distinct word ("planned" reads as "With Pluma"),
  *  and a step is marked from the report's timeline: reached, skipped (the report went past it), or still ahead. */
-export declare function StatusStrip({ status, owner, step, timeline, label }: {
+export declare function StatusStrip({ status: given, owner, step, timeline: givenTimeline, label }: {
     status: string;
     owner: string;
     step?: string;

package/dist/client/detail.js

@@ -4,7 +4,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // it has an end status. A report's words are data: they are rendered as text, never as markup. A report
 // that is still only on this phone is shown from the phone's own copy, with the app's refusal if it gave one.
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { END, STATUSES } from '../contract.mjs';
+import { END, STATUSES, currentStatus } from '../contract.mjs';
 import { DefaultField } from './default-field.js';
 import { draftKey } from './drafts.js';
 import { recoverTakes } from './recorder.js';
@@ -13,7 +13,7 @@ import { useRuntime, useTick } from './runtime.js';
 import { markSeen } from './seen.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';
+import { effectiveCeilings, linkableIssue, lengthWords, sizeWords, statusMeaning, statusWords, stringsFor } from './words.js';
 export function statusOf(r) {
     if (typeof r.status === 'string')
         return r.status;
@@ -25,7 +25,7 @@ export function statusOf(r) {
     }
     return 'received';
 }
-/** The step shown under "Being made". The timeline entry is the truth (that is where the receiving side puts it); a top-level `step` is read only when there is no timeline. */
+/** The step shown under the current status. The timeline entry is the truth (that is where the receiving side puts it); a top-level `step` is read only when there is no timeline. */
 export function stepOf(r) {
     const t = r.timeline;
     if (Array.isArray(t) && t.length) {
@@ -37,7 +37,10 @@ export function stepOf(r) {
 const timelineOf = (r) => Array.isArray(r?.timeline) ? r.timeline.map((t) => String(t?.status)) : undefined;
 /** The strip is made from the contract's own statuses, one step per distinct word ("planned" reads as "With Pluma"),
  *  and a step is marked from the report's timeline: reached, skipped (the report went past it), or still ahead. */
-export function StatusStrip({ status, owner, step, timeline, label }) {
+export function StatusStrip({ status: given, owner, step, timeline: givenTimeline, label }) {
+    // An old (0.1.x) status reads as the new one it means, on the strip and in the timeline it is marked from.
+    const status = currentStatus(given);
+    const timeline = givenTimeline?.map((s) => currentStatus(s));
     const nodes = useMemo(() => {
         const out = [];
         for (const id of STATUSES.filter((s) => !END.includes(s))) {
@@ -53,7 +56,7 @@ export function StatusStrip({ status, owner, step, timeline, label }) {
     const ended = END.includes(status);
     const here = nodes.findIndex((n) => n.ids.includes(status));
     const at = ended ? nodes.length : Math.max(0, here);
-    const items = [...nodes, { words: statusWords(ended ? status : 'live', owner), ids: [ended ? status : 'end'] }];
+    const items = [...nodes, { words: statusWords(ended ? status : 'done', owner), ids: [ended ? status : 'end'] }];
     const reached = new Set(timeline ?? []);
     return (_jsx("ol", { className: "sac-strip", "aria-label": label ?? stringsFor({ app: 'x', owner }).stepLabel, "data-status": status, children: items.map((it, i) => {
             const state = i === at ? 'now'
@@ -62,7 +65,7 @@ export function StatusStrip({ status, owner, step, timeline, label }) {
                         : timeline ? 'skipped'
                             // No timeline to read: an open report has passed what is before it; an ended one may have skipped any step.
                             : ended ? 'unknown' : 'past';
-            return (_jsxs("li", { className: "sac-step", "data-state": state, "aria-current": i === at ? 'step' : undefined, children: [_jsx("span", { children: it.words }), i === at && it.ids.includes('being-made') && step ? _jsx("span", { className: "sac-step-detail", children: step }) : null] }, it.words + i));
+            return (_jsxs("li", { className: "sac-step", "data-state": state, "aria-current": i === at ? 'step' : undefined, children: [_jsx("span", { children: it.words }), i === at && step ? _jsx("span", { className: "sac-step-detail", children: step }) : null] }, it.words + i));
         }) }));
 }
 function makeDeferred() { let done = () => { }; const ready = new Promise((r) => { done = r; }); return { ready, done: () => done() }; }
@@ -226,9 +229,10 @@ export function SuggestionDetail({ adapters, id }) {
         return _jsx("p", { children: S.loading });
     if (report === null)
         return _jsx("p", { role: "alert", children: S.couldNotOpen });
-    const status = statusOf(report);
+    const status = currentStatus(statusOf(report));
     const owner = adapters.words.owner;
     const open = !END.includes(status) && status !== 'on-phone';
+    const issue = linkableIssue(report.issue);
     const answers = (report.answers ?? {});
     const voice = Array.isArray(report.voice) ? report.voice : [];
     const media = Array.isArray(report.media) ? report.media : [];
@@ -271,5 +275,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, 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, {})] }));
+    return (_jsxs("article", { className: "sac-detail", "data-report": id, children: [_jsx("h3", { className: "sac-status", "data-status": status, children: statusWords(status, owner) }), _jsx("p", { className: "sac-muted", children: statusMeaning(status, owner, report.issue) }), issue ? _jsx("p", { children: _jsx("a", { className: "sac-issue-link", href: issue.url, target: "_blank", rel: "noopener noreferrer", children: S.issueLink(issue.number) }) }) : null, 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.js

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

package/dist/client/index.d.ts

@@ -15,3 +15,5 @@ export * from './mine.tsx';
 export { seenStatuses, markSeen, moved, onSeen, seenKey, type Seen } from './seen.ts';
 export * from './detail.tsx';
 export { refreshIdentity } from './runtime.ts';
+export { collectContext, installContextListeners, contextTrail, resetContext, parseUserAgent, withoutQueries } from './context.ts';
+export type { ContextItem, AppContextItem, ReportContext, Trail, CollectOptions } from './context.ts';

package/dist/client/index.js

@@ -15,3 +15,4 @@ export * from './mine.js';
 export { seenStatuses, markSeen, moved, onSeen, seenKey } from './seen.js';
 export * from './detail.js';
 export { refreshIdentity } from './runtime.js';
+export { collectContext, installContextListeners, contextTrail, resetContext, parseUserAgent, withoutQueries } from './context.js';

package/dist/client/mine.js

@@ -10,7 +10,8 @@ import { useRuntime, useTick } from './runtime.js';
 import { moved, onSeen } from './seen.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';
+import { currentStatus } from '../contract.mjs';
+import { linkableIssue, statusMeaning, statusWords, stringsFor } from './words.js';
 export function MySuggestions({ adapters, onOpen }) {
     const S = stringsFor(adapters.words);
     const owner = adapters.words.owner;
@@ -123,6 +124,7 @@ export function MySuggestions({ adapters, onOpen }) {
     }
     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: [fresh.has(r.id) ? _jsx("span", { className: "sac-new", "data-new": "", children: S.newMark }) : null, 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));
+                    const issue = linkableIssue(r.issue);
+                    return (_jsxs("li", { className: "sac-row", "data-status": currentStatus(r.status), children: [_jsxs("button", { type: "button", className: "sac-row-button", onClick: () => (onOpen ? onOpen(r.id) : setOpen(r.id)), children: [fresh.has(r.id) ? _jsx("span", { className: "sac-new", "data-new": "", children: S.newMark }) : null, 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.issue) })] }), issue ? _jsx("a", { className: "sac-issue-link", href: issue.url, target: "_blank", rel: "noopener noreferrer", children: S.issueLink(issue.number) }) : null, 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/runtime.js

@@ -6,6 +6,7 @@
 // is sent only while that person is signed in. "Received" is derived from the outbox: a report has landed
 // when none of its writes is left there, because a write leaves only after the adapter said `done`.
 import { useEffect, useRef, useState } from 'react';
+import { installContextListeners } from './context.js';
 import { draftKey } from './drafts.js';
 import { openStore } from './idb.js';
 import { makeOutbox } from './outbox.js';
@@ -170,6 +171,8 @@ export function useRuntime(adapters) {
     const [signal, setSignal] = useState(0);
     const current = useRef({ account: null, release: () => { } });
     const alive = useRef(true);
+    // Every screen of the module mounts this, so the trail (pages, taps, errors) starts with the first one; it installs once.
+    useEffect(() => { installContextListeners(); }, []);
     useEffect(() => { alive.current = true; return () => { alive.current = false; current.current.release(); current.current = { account: null, release: () => { } }; }; }, []);
     useEffect(() => { const l = () => setSignal((n) => n + 1); identityListeners.add(l); return () => { identityListeners.delete(l); }; }, []);
     useEffect(() => { if (state.rt)

package/dist/client/seen.d.ts

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

package/dist/client/seen.js

@@ -4,7 +4,7 @@
 // every end) is "moved": the entry shows a dot, My suggestions marks the row New, and one toast says it. Opening
 // the report marks it seen. The record sits beside the cached views, under the same app-and-account key, so another
 // account never reads it and signing out clears it with them (clearViewCache).
-import { TOLD } from '../contract.mjs';
+import { TOLD, currentStatus } from '../contract.mjs';
 import { draftKey } from './drafts.js';
 import { readCache, writeCache } from './view-cache.js';
 export const seenKey = (id) => `${draftKey(id)}#view:seen`;
@@ -26,9 +26,10 @@ export async function seenStatuses(store, id) {
 export function markSeen(store, id, reportId, status) {
     return serial(seenKey(id), async () => {
         const seen = await seenStatuses(store, id);
-        if (seen[reportId] === status)
+        const now = currentStatus(status); // kept in the new words, so an old status and the one it means are the same news
+        if (seen[reportId] === now)
             return;
-        seen[reportId] = status;
+        seen[reportId] = now;
         await writeCache(store, seenKey(id), seen);
         for (const l of listeners)
             l();
@@ -45,11 +46,12 @@ export function moved(store, id, rows) {
         for (const r of rows) {
             if (typeof r?.id !== 'string' || typeof r.status !== 'string' || r.status === 'on-phone')
                 continue;
-            const had = seen[r.id];
-            if (had === r.status)
+            const had = seen[r.id] === undefined ? undefined : currentStatus(seen[r.id]);
+            const now = currentStatus(r.status);
+            if (had === now)
                 continue;
-            if (had === undefined || !TOLD.includes(r.status)) {
-                seen[r.id] = r.status;
+            if (had === undefined || !TOLD.includes(now)) {
+                seen[r.id] = now;
                 changed = true;
                 continue;
             }
@@ -70,3 +72,24 @@ export function firstToastThisOpen(id) {
     toasted.add(k);
     return true;
 }
+/** WHAT THE LAST PAGE LOAD ALREADY SAW. The moves (report and status) that were already news the last time the app was
+ *  loaded, so a move the person was told about, or could have been, is not toasted again on the next load; it keeps
+ *  only the dot and the New mark until they open it. Returns the moves in `m` that are new since then, and records `m`
+ *  as what this load saw. With no record yet (the first load on this release) every move is fresh, as before. */
+export const noticedKey = (id) => `${draftKey(id)}#view:noticed`;
+export function fresh(store, id, m) {
+    return serial(noticedKey(id), async () => {
+        const had = await readCache(store, noticedKey(id));
+        const before = had && typeof had === 'object' ? had : {};
+        const out = m.filter((r) => before[r.id] !== r.status);
+        const now = { ...before };
+        for (const r of m)
+            now[r.id] = r.status;
+        // A report no longer moved (opened, or gone) drops out, so the record stays the size of the dot.
+        for (const k of Object.keys(now))
+            if (!m.some((r) => r.id === k))
+                delete now[k];
+        await writeCache(store, noticedKey(id), now);
+        return out;
+    });
+}