sign-off-axi 0.6.2 → 0.6.3

package/README.md

@@ -45,6 +45,8 @@ You need Node 22.5 or newer. `init` installs the skill for each coding agent it
 
 Four places, in the bar at the bottom of a phone and the sidebar on a desk.
 
+The board installs as an app (More, then Install app; on an iPad, Share, then Add to Home Screen) and, once opened, reads offline: with the board unreachable it shows the last update under "Offline, showing the last update", and sends fail rather than queue. A phone needs the board on HTTPS or localhost to install it.
+
 <table>
   <tr>
     <td align="center" width="25%"><picture><source media="(prefers-color-scheme: dark)" srcset="docs/media/phone-today-dark.webp"><img src="docs/media/phone-today.webp" alt="Today: counts of what needs you, what was proven and new reports, then the waiting asks"></picture><br><b>Today</b><br>What needs you, what was proven, what is new.</td>

package/dist/cli.js

@@ -359,11 +359,12 @@ examples:
   sign-off-axi promote fleet-dashboard-prototype
   sign-off-axi promote fleet-dashboard-prototype --undo
 `,
-    feedback: `usage: sign-off-axi feedback <key> [board.json] (--read | --reply <text> [--link <url>] | --acted --link <url>) [--filer <id>]
+    feedback: `usage: sign-off-axi feedback <key> [board.json] (--delivered | --read | --reply <text> [--link <url>] | --acted --link <url>) [--at <epoch seconds>] [--filer <id>]
 Tells the person how far their answer, notes, new round or comment on a card got: the board shows each one as Sent, Delivered, Read and then Replied, on the card, in its Activity,
 as a badge in the lists, and a reply in Today. A wait hands an answer over and marks it (read when it is the filer's own wait, else delivered), and an on_answer hook that ran marks it delivered.
 --read: the agent has read what was sent. --reply: what the agent did or says back, 500 characters or fewer, with --link to the new version or the pull request.
---acted --link: the agent acted, and the link shows what changed (the merge hook uses this). Posting the card again marks what was sent before it as acted on too.
+--delivered: it was handed to the agent. --acted --link: the agent acted, and the link shows what changed (the merge hook uses this).
+--at <epoch seconds>: the step happened then (replaying history). It cannot come before the send or lie in the future, a step the card already shows is left alone (nothing is written, and a reply never replaces one), so a replay never turns a later real state back into an older one and can be run twice. Posting the card again marks what was sent before it as acted on too.
 A mark covers everything sent on that card up to now. --filer refuses a card that filer did not post. It writes one line to <board>.trail.jsonl beside the board.
 examples:
   sign-off-axi feedback fleet-dashboard-full --read
@@ -1355,18 +1356,18 @@ function promote(args) {
 }
 /** feedback <key> [board.json] (--read | --reply <text> [--link <url>] | --acted --link <url>): the agent tells the person how far what they sent on a card got. */
 function feedback(args) {
-    const at = args.findIndex((a, i) => !a.startsWith('-') && !existsSync(a) && !a.endsWith('.json') && !['--reply', '--link', '--filer'].includes(args[i - 1])), key = args[at];
+    const at = args.findIndex((a, i) => !a.startsWith('-') && !existsSync(a) && !a.endsWith('.json') && !['--reply', '--link', '--filer', '--at'].includes(args[i - 1])), key = args[at];
     if (at < 0 || !isKey(key))
         throw fail('feedback needs the key of a card', 'VALIDATION_ERROR', 'sign-off-axi feedback <key> [board.json] --read');
-    const { file, values, on } = parse('feedback', args.filter((_, i) => i !== at), { read: { type: 'boolean' }, reply: { type: 'string' }, acted: { type: 'boolean' }, link: { type: 'string' }, filer: { type: 'string' } });
-    const ops = [values.read && 'read', values.reply !== undefined && 'reply', values.acted && 'acted'].filter(Boolean);
+    const { file, values, on } = parse('feedback', args.filter((_, i) => i !== at), { read: { type: 'boolean' }, delivered: { type: 'boolean' }, reply: { type: 'string' }, acted: { type: 'boolean' }, link: { type: 'string' }, filer: { type: 'string' }, at: { type: 'string' } });
+    const ops = [values.read && 'read', values.delivered && 'delivered', values.reply !== undefined && 'reply', values.acted && 'acted'].filter(Boolean);
     if (ops.length !== 1)
-        throw fail('feedback takes one of --read, --reply <text> or --acted --link <url>', 'VALIDATION_ERROR', `sign-off-axi feedback ${key}${on} --read`);
+        throw fail('feedback takes one of --delivered, --read, --reply <text> or --acted --link <url>', 'VALIDATION_ERROR', `sign-off-axi feedback ${key}${on} --read`);
     const text = typeof values.reply === 'string' ? values.reply.trim() : undefined, link = values.link;
     if (text !== undefined && (!text || [...text].length > NOTE_MAX))
         throw fail(`--reply must be text of ${NOTE_MAX} characters or fewer`, 'VALIDATION_ERROR', `sign-off-axi feedback ${key}${on} --reply "<what you did>"`);
-    if (link !== undefined && (values.read || !/^https?:\/\/[^\s]{1,500}$/.test(link)))
-        throw fail(values.read ? '--link goes with --reply or --acted' : '--link must be an http(s) address, such as the pull request', 'VALIDATION_ERROR', `sign-off-axi feedback ${key}${on} --acted --link <url>`);
+    if (link !== undefined && (values.read || values.delivered || !/^https?:\/\/[^\s]{1,500}$/.test(link)))
+        throw fail(values.read || values.delivered ? '--link goes with --reply or --acted' : '--link must be an http(s) address, such as the pull request', 'VALIDATION_ERROR', `sign-off-axi feedback ${key}${on} --acted --link <url>`);
     if (values.acted && !link)
         throw fail('--acted needs --link <url> to what changed', 'VALIDATION_ERROR', `sign-off-axi feedback ${key}${on} --acted --link <url>`);
     ready(file, on);
@@ -1378,9 +1379,22 @@ function feedback(args) {
     const sent = readTrail(file, loadDecisions(file)).filter((t) => t.key === key && t.kind !== 'ticket');
     if (!sent.length)
         throw fail(`nothing was sent on ${key} yet`, 'NOT_FOUND', `Run \`sign-off-axi answers${on} --key ${key}\` to see its answer`);
-    appendMark(file, { op: values.read ? 'read' : 'reply', key, ...(text && { text }), ...(link && { link }) });
+    // --at <epoch seconds> records a step that happened earlier (replaying history). It cannot precede the send, a step the card already shows is left as it is, and it
+    // never writes a reply over one that exists, so a replay never turns a later real state back into an older one; run twice it writes once.
+    const op = values.read ? 'read' : values.delivered ? 'delivered' : 'reply';
+    if (values.at !== undefined) {
+        const secs = /^\d{9,11}$/.test(values.at) ? +values.at : NaN, first = Math.min(...sent.map((t) => Math.floor(Date.parse(t.at) / 1000)));
+        if (!Number.isFinite(secs) || secs > Math.floor(Date.now() / 1000))
+            throw fail('--at must be whole seconds since 1970, not in the future', 'VALIDATION_ERROR', `sign-off-axi feedback ${key}${on} --read --at 1792800000`);
+        if (secs < first)
+            throw fail(`--at ${values.at} is before what was sent on ${key} (${first}): a step cannot come before its send`, 'VALIDATION_ERROR', 'Use the time the step happened');
+        const have = sent.some((t) => op === 'reply' ? t.reply : (t[op] ?? t.reply?.at) !== undefined);
+        if (have)
+            return toon({ board: tilde(file), key, shows: sent.at(-1).reply ? 'Replied' : sent.at(-1).read ? 'Read' : 'Delivered', covers: sent.length, unchanged: 'yes' }, [`${key} already shows that step; nothing was written`]);
+    }
+    appendMark(file, { op, key, ...(text && { text }), ...(link && { link }) }, values.at !== undefined ? new Date(+values.at * 1000).toISOString().replace(/\.\d+Z$/, 'Z') : undefined);
     const now = readTrail(file, loadDecisions(file)).filter((t) => t.key === key && t.kind !== 'ticket').at(-1);
-    return toon({ board: tilde(file), key, shows: now.reply ? 'Replied' : 'Read', covers: sent.length }, [values.read ? `Run \`sign-off-axi feedback ${key}${on} --reply "<what you did>"\` once you act on it` : `Run \`sign-off-axi wait${on}${filer ? ` --filer ${filer}` : ''}\` for the next answer`]);
+    return toon({ board: tilde(file), key, shows: now.reply ? 'Replied' : now.read ? 'Read' : 'Delivered', covers: sent.length }, [values.read || values.delivered ? `Run \`sign-off-axi feedback ${key}${on} --reply "<what you did>"\` once you act on it` : `Run \`sign-off-axi wait${on}${filer ? ` --filer ${filer}` : ''}\` for the next answer`]);
 }
 /** ticket [board.json] [--id <id> [--title <text>] [--progress <0-100>] [--parent <id>] [--priority P0-P3] [--project <name>] [--hold yes|no] [--asked yes|no]]: lists the tickets,
  * shows one with the cards that name it, or writes one. A ticket stands alone in <board>.tickets.jsonl: cards name it with --ticket, and nothing else reads it.
@@ -2955,16 +2969,28 @@ const squeeze = (req, bytes) => {
         return { bytes: gzipSync(bytes, { level: 6 }), encoding: 'gzip' };
     return { bytes };
 };
-const pageTag = `"${createHash('sha256').update(page).digest('hex').slice(0, 32)}"`;
+/** The board's design tokens, shared parts and typeface, favicon, home-screen icon and install manifest, served beside the page; see web/tokens.css, web/ui.css and web/icon.svg. */
+const ICONS = Object.fromEntries([['tokens.css', 'text/css; charset=utf-8'], ['ui.css', 'text/css; charset=utf-8'], ['inter.woff2', 'font/woff2'], ['icon.svg', 'image/svg+xml'], ['apple-touch-icon.png', 'image/png'], ['icon-192.png', 'image/png'], ['icon-512.png', 'image/png'], ['icon-maskable-512.png', 'image/png'], ['manifest.webmanifest', 'application/manifest+json']]
+    .map(([name, type]) => [`/${name}`, { type, bytes: readFileSync(new URL(`../web/${name}`, import.meta.url)) }]));
+/** The board as an app: pwa.js (the install row and the offline line, named by its content like the stylesheets) and sw.js (the service worker, which must sit at the root and is asked again each time). */
+const APP = { pwa: readFileSync(new URL('../web/pwa.js', import.meta.url)), worker: readFileSync(new URL('../web/sw.js', import.meta.url)) };
+/** The iPad launch images (see scripts/make-splash.mjs), named <width>x<height>-<theme> in points, each linked for its own device, orientation and theme. */
+const SPLASH = readdirSync(new URL('../web/', import.meta.url)).flatMap((f) => { const m = /^splash-(\d+)x(\d+)-(light|dark)\.png$/.exec(f); return m ? [{ file: f, w: +m[1], h: +m[2], theme: m[3] }] : []; });
+for (const { file } of SPLASH)
+    ICONS[`/${file}`] = { type: 'image/png', bytes: readFileSync(new URL(`../web/${file}`, import.meta.url)) };
+const splashLinks = SPLASH.map(({ file, w, h, theme }) => `<link rel="apple-touch-startup-image" href="${file}" media="(device-width: ${w}px) and (device-height: ${h}px) and (-webkit-device-pixel-ratio: 2) and (orientation: ${w < h ? 'portrait' : 'landscape'}) and (prefers-color-scheme: ${theme})">`).join('\n');
+/** The page names its two stylesheets by their content, so a phone holding an older copy (kept a day) fetches the new one with the new page: a row's badge is never drawn by half of an upgrade. */
+const served = Buffer.from(page.toString().replace(/href="(tokens|ui)\.css"/g, (_, name) => `href="${name}.css?v=${createHash('sha256').update(ICONS[`/${name}.css`].bytes).digest('hex').slice(0, 12)}"`)
+    .replace('</head>', () => `${splashLinks}\n<script src="pwa.js?v=${createHash('sha256').update(APP.pwa).digest('hex').slice(0, 12)}" defer></script>\n</head>`));
+/** The worker's cache is named by the whole build, so a changed page, stylesheet or worker replaces the kept copy at the next visit and never mixes two. */
+const worker = Buffer.from(`const BUILD = ${JSON.stringify(createHash('sha256').update(served).update(APP.worker).update(APP.pwa).digest('hex').slice(0, 16))};\n${APP.worker}`);
+const pageTag = `"${createHash('sha256').update(served).digest('hex').slice(0, 32)}"`;
 // Level 9 takes about 50 ms and level 11 over half a second for 7% less, so the page is squeezed at 9.
 const squeezed = {};
 const pageAs = (encoding) => (squeezed[encoding] ??= encoding === 'br'
-    ? brotliCompressSync(page, { params: { [zlib.BROTLI_PARAM_QUALITY]: 9, [zlib.BROTLI_PARAM_SIZE_HINT]: page.length } }) : gzipSync(page, { level: 9 }));
+    ? brotliCompressSync(served, { params: { [zlib.BROTLI_PARAM_QUALITY]: 9, [zlib.BROTLI_PARAM_SIZE_HINT]: served.length } }) : gzipSync(served, { level: 9 }));
 /** The browser keeps a reply and asks again with its tag, so an unchanged page, state or file costs a 304 and no body. */
 const unchanged = (req, tag) => req.headers['if-none-match']?.split(/\s*,\s*/).includes(tag) ?? false;
-/** The board's design tokens, shared parts and typeface, favicon, home-screen icon and install manifest, served beside the page; see web/tokens.css, web/ui.css and web/icon.svg. */
-const ICONS = Object.fromEntries([['tokens.css', 'text/css; charset=utf-8'], ['ui.css', 'text/css; charset=utf-8'], ['inter.woff2', 'font/woff2'], ['icon.svg', 'image/svg+xml'], ['apple-touch-icon.png', 'image/png'], ['icon-192.png', 'image/png'], ['icon-512.png', 'image/png'], ['icon-maskable-512.png', 'image/png'], ['manifest.webmanifest', 'application/manifest+json']]
-    .map(([name, type]) => [`/${name}`, { type, bytes: readFileSync(new URL(`../web/${name}`, import.meta.url)) }]));
 /** Added to each design mock page and plan page so the person can point at a part of it; see web/point.js. */
 const pointer = Buffer.from(`<script>${readFileSync(new URL('../web/point.js', import.meta.url), 'utf8')}</script>`);
 const sha256 = (bytes) => createHash('sha256').update(bytes).digest('hex');
@@ -3682,7 +3708,11 @@ const server = createServer(async (req, res) => {
         if (given !== null)
             return res.writeHead(303, { location: '/', 'set-cookie': `${cookie}=${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=31536000` }).end();
     }
-    const icon = req.method === 'GET' ? ICONS[req.url ?? ''] : undefined;
+    if (req.method === 'GET' && req.url === '/sw.js')
+        return res.writeHead(200, { 'content-type': 'text/javascript; charset=utf-8', 'cache-control': 'no-cache' }).end(worker);
+    if (req.method === 'GET' && (req.url ?? '').split('?')[0] === '/pwa.js')
+        return res.writeHead(200, { 'content-type': 'text/javascript; charset=utf-8', 'cache-control': 'public, max-age=86400' }).end(APP.pwa);
+    const icon = req.method === 'GET' ? ICONS[(req.url ?? '').split('?')[0]] : undefined;
     if (icon)
         return res.writeHead(200, { 'content-type': icon.type, 'cache-control': 'public, max-age=86400' }).end(icon.bytes);
     if (req.method === 'GET' && req.url === '/favicon.ico')
@@ -3691,7 +3721,7 @@ const server = createServer(async (req, res) => {
         const headers = { 'content-type': 'text/html; charset=utf-8', 'content-security-policy': "default-src 'self' 'unsafe-inline'", etag: pageTag, 'cache-control': 'no-cache', vary: 'accept-encoding' };
         if (unchanged(req, pageTag))
             return res.writeHead(304, headers).end();
-        const takes = String(req.headers['accept-encoding'] ?? ''), encoding = /\bbr\b/.test(takes) ? 'br' : /\bgzip\b/.test(takes) ? 'gzip' : undefined, bytes = encoding ? pageAs(encoding) : page;
+        const takes = String(req.headers['accept-encoding'] ?? ''), encoding = /\bbr\b/.test(takes) ? 'br' : /\bgzip\b/.test(takes) ? 'gzip' : undefined, bytes = encoding ? pageAs(encoding) : served;
         return res.writeHead(200, { ...headers, ...(encoding && { 'content-encoding': encoding }), 'content-length': bytes.length }).end(bytes);
     }
     let status, body;

package/dist/store.js

@@ -935,7 +935,7 @@ export function markEngagementSeen(file, id, revision) {
     appendLine(deeperPath(file), { op: 'seen', version: 1, id, answerRevision: revision, at: now() });
 }
 export const trailPath = (decisionsPath) => decisionsPath.replace(/\.json$/, '') + '.trail.jsonl';
-export const appendMark = (decisionsPath, mark) => appendLine(trailPath(decisionsPath), { ...mark, at: now() });
+export const appendMark = (decisionsPath, mark, at = now()) => appendLine(trailPath(decisionsPath), { ...mark, at });
 /** `delivery` is the owner dispatch's record per Go deeper ask (src/owner.ts deliveries): handed to the author's session, then acknowledged by it. */
 export function readTrail(decisionsPath, items, delivery = {}) {
     const marks = readRaw(trailPath(decisionsPath)).split('\n').flatMap((line) => {
@@ -969,7 +969,7 @@ export function readTrail(decisionsPath, items, delivery = {}) {
     return sends.map((s) => {
         // A mark covers a send made at or before it (to the second: a post's time may carry milliseconds, a send's does not).
         const mark = (...ops) => marks.find((m) => ops.includes(m.op) && m.key === s.key && (!m.id || m.id === s.id) && second(m.at) >= second(s.at));
-        const said = s.reply ? undefined : mark('reply'), again = filed.get(s.key), posted = again && second(again) > second(s.at) ? again : undefined;
+        const said = s.reply ? undefined : marks.filter((m) => m.op === 'reply' && m.key === s.key && (!m.id || m.id === s.id) && second(m.at) >= second(s.at)).sort((x, y) => second(y.at) - second(x.at))[0], again = filed.get(s.key), posted = again && second(again) > second(s.at) ? again : undefined;
         const reply = s.reply ?? (said ? { at: said.at, ...(said.text && { text: said.text }), ...(said.link && { link: said.link }) } : posted ? { at: posted, acted: true } : undefined);
         const read = first(mark('read')?.at, s.read, reply?.at), delivered = first(mark('delivered')?.at, s.delivered, read);
         const seen = reply && marks.find((m) => m.op === 'seen' && m.key === s.key && second(m.at) >= second(reply.at))?.at;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sign-off-axi",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "One review board for evidence, quick yes/no decisions and retro changes.",
   "type": "module",
   "bin": { "sign-off-axi": "dist/cli.js" },

package/web/index.html

@@ -6,7 +6,10 @@
 <title>Dashboard · sign-off</title>
 <link rel="icon" href="icon.svg" type="image/svg+xml">
 <link rel="apple-touch-icon" href="apple-touch-icon.png">
-<link rel="manifest" href="manifest.webmanifest">
+<link rel="manifest" href="manifest.webmanifest" crossorigin="use-credentials">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-title" content="sign-off">
 <link rel="preload" href="inter.woff2" as="font" type="font/woff2" crossorigin>
 <link rel="stylesheet" href="tokens.css">
 <link rel="stylesheet" href="ui.css">
@@ -1165,7 +1168,8 @@
   .rp-page > .ui-seg { margin-top: 0.75rem; }
   .rp-page .ui-sec .see { min-height: 0; padding: 0; border-radius: 0; background: none; font: inherit; font-size: var(--tk-fs-row); line-height: 1.5rem; font-weight: 500; }
   .rp-list.ui-list { margin: 0; padding: 0.25rem 0; border-radius: var(--tk-r-card); }
-  .rp-list .ui-icon .mono { font-style: normal; }
+  .t-sheet:focus-visible { outline: 2px solid var(--tk-ink); outline-offset: 2px; }
+  .ui-icon img.design-thumb { width: 2.5rem; height: 2.5rem; object-position: top; }
   .rp-list.ui-list > li + li::before { right: 0.75rem; left: 0.75rem; }
   .rp-list .dl-face.ui-row { gap: 0.75rem; min-height: 0; padding: 0 0.75rem; background: var(--tk-card); }
   .rp-list .dl-face.ui-row.down { background: var(--tk-inset); }
@@ -1189,8 +1193,15 @@
   .rkt { display: grid; flex: none; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; }
   .rkt.k-status, .rkt.k-other { border-radius: 0.875rem; } .rkt.k-all { background: var(--tk-raised); color: var(--tk-ink); box-shadow: var(--tk-elev-tile); }
   .rkt .rkg svg, .rkt .ev-g svg { width: 1rem; height: 1rem; stroke-width: 1.8; }
-  /* The row's second line: the kind, then the bar of how much is read (a plan's bar is its parts), then the percent. */
-  .rp-list .ui-row .l2 { gap: 0.5rem; }
+  /* The row's second line: kind and ticket; only unread rows have a progress track below. */
+  .rp-list .ui-row .l2 { gap: 0.5rem; height: 1.25rem; }
+  .rp-list .ui-row .rm { position: relative; overflow: visible; }
+  .rp-list .ui-row .l2.meta { overflow: visible; }
+  .rp-meta { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
+  .rp-ticket { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .rp-progress { display: flex; margin-top: 0.125rem; }
+  .rp-progress .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+
   .rp-strip { display: flex; flex: 1; gap: 2px; height: 0.25rem; }
   .rp-strip > i { flex: 1; min-width: 0; border-radius: 2px; background: var(--tk-track); font-style: normal; }
   .rp-strip > i.on { background: var(--tk-fill); }
@@ -1611,16 +1622,17 @@
   body.tickets .ui-row .meta, body.tickets .ui-row .l2 { margin: 0; }
   :is(.tk-top, .tk-dhead) .ui-rb { min-height: 0; padding: 0; border: 0; }
   :is(.tk-top, .tk-dhead) .ui-rb .glyph { width: 1.25rem; height: 1.25rem; stroke-width: 1.6; }
-  .tk-rb.on { background: var(--tk-ink); color: var(--tk-canvas); }
+  :is(.tk-rb, .dl-rb).on { background: var(--tk-ink); color: var(--tk-canvas); }
   body.tickets :focus-visible { outline-color: var(--tk-ink); }
-  .tk-seg small { color: var(--tk-text-tertiary); font-size: var(--tk-fs-small); font-weight: 500; font-variant-numeric: tabular-nums; }
+  :is(.tk-seg, .dl-seg) small { color: var(--tk-text-tertiary); font-size: var(--tk-fs-small); font-weight: 500; font-variant-numeric: tabular-nums; }
   .tk-fpill { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; height: 2rem; min-height: 0; margin-top: 0.75rem; padding: 0 0.625rem 0 0.375rem; border: 0; border-radius: 1rem;
     background: var(--tk-card); color: var(--tk-ink); font: inherit; font-size: var(--tk-fs-row); font-weight: 500; box-shadow: var(--tk-elev-card), inset 0 1px 0 var(--tk-hl); }
   .tk-fpill::after { content: ""; position: absolute; inset: -0.375rem 0; }
   .tk-fpill .glyph { width: 0.875rem; height: 0.875rem; color: var(--tk-text-tertiary); }
   .tk-pt { display: inline-grid; flex: none; place-items: center; width: 1.25rem; height: 1.25rem; }
   .tk-pt img, .tk-pt .mono { width: 1.25rem; height: 1.25rem; border-radius: 0.3125rem; object-fit: cover; }
-  .tk-pt .mono { background: var(--tk-ink); color: var(--tk-raised); font-size: 0.5rem; line-height: 1.25rem; font-weight: 600; text-align: center; }
+  .tk-shd .ui-icon { width: 1.25rem; height: 1.25rem; border-radius: 0.3125rem; box-shadow: none; }
+  .tk-shd .ui-icon :is(img, svg) { width: 1.25rem; height: 1.25rem; }
   /* The hero: its label and how many were done this week, the big count, how many move, and one square per ticket. */
   .tk-hero { container-type: inline-size; }
   /* The shared hero chip (ui.css), with the prototype's green rise before its count. */
@@ -1638,8 +1650,8 @@
   .tk-empty p, .tk-none { margin: 0.25rem 0 0; color: var(--tk-text-secondary); font-size: var(--tk-fs-row); line-height: var(--tk-lh-row); }
   .tk-none { margin: 0.75rem 0 0; color: var(--tk-text-tertiary); }
   /* The project filter's sheet: Every project, then each project with its tickets' count, the one picked checked. */
-  .tk-pick { width: 100%; min-height: 3rem; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; font-size: var(--tk-fs-row); text-align: left; }
-  .tk-pick .k { color: var(--tk-ink); } .tk-pick:active { background: none; } .tk-pick .glyph { width: 1rem; height: 1rem; color: var(--tk-ink); }
+  :is(.tk-pick, .dl-pick) { width: 100%; min-height: 3rem; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; font-size: var(--tk-fs-row); text-align: left; }
+  :is(.tk-pick, .dl-pick) .k { color: var(--tk-ink); } :is(.tk-pick, .dl-pick):active { background: none; } :is(.tk-pick, .dl-pick) .glyph { width: 1rem; height: 1rem; color: var(--tk-ink); }
   /* A ticket over the list, on a phone: a sheet from the bottom over a dimmed list, up to 48px from the top, scrolling inside. */
   .tk-over { position: fixed; z-index: 30; inset: 0; }
   .tk-scrim { position: absolute; inset: 0; background: var(--tk-scrim); }
@@ -1735,7 +1747,17 @@
       try { for (const [k, v] of JSON.parse(localStorage.getItem(stored())) ?? []) drafts.set(k, v); } catch {}
     }
     await sent?.();
+    renderKeepingFocus();
+  }
+
+  // A response can arrive after the person has started typing on the next card.
+  // Keep the active editor and its selection across that redraw, just as a poll does.
+  function renderKeepingFocus() {
+    const typing = (document.activeElement?.tagName === 'TEXTAREA' || document.activeElement?.id === 'find') && document.activeElement;
+    const start = typing && typing.selectionStart, end = typing && typing.selectionEnd, direction = typing && typing.selectionDirection;
     render();
+    const box = typing && document.getElementById(typing.id);
+    if (box) box.focus(), box.setSelectionRange(start, end, direction);
   }
 
   const clearIfSaved = (key, sent) => () => { if (drafts.get(key) === sent) drafts.delete(key); keep(); };
@@ -1754,9 +1776,10 @@
     const note = drafts.get(words) ?? noteOf(d), before = answerOf(d.key);
     const drop = clearIfSaved(words, drafts.get(words));
     try {
-      await call('/api/answers', {
+      const sent = await sendWithFeedback(`card:${d.key}`, buttons.at(-1), () => call('/api/answers', {
         method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ key: d.key, answer: o.value, note }),
-      }, async () => { forget(d.key); unfolded.delete(d.key); if (!typed) drop(); await land?.(); });
+      }, async () => { forget(d.key); unfolded.delete(d.key); if (!typed) drop(); await land?.(); }));
+      if (!sent) { buttons.forEach((b) => b.classList.remove('done')); return unlock(); }
     } catch (e) {
       buttons.forEach((b) => b.classList.remove('done'));
       shown(err).textContent = `Couldn't save: ${e.message}`;
@@ -1764,9 +1787,12 @@
     }
     offerUndo(d, before);
     after?.();
-    if (typed) call('/api/messages', {
-      method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ kind: 'comment', key: d.key, text: typed }),
-    }, drop).catch(() => say('Could not save your comment', 8000));
+    if (typed) {
+      const sendNote = () => sendWithFeedback(`card:${d.key}`, null, () => call('/api/messages', {
+        method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ kind: 'comment', key: d.key, text: typed }),
+      }, drop), sendNote);
+      sendNote();
+    }
   }
 
   const toast = document.getElementById('toast'), toastText = document.getElementById('toast-text'), undoBtn = document.getElementById('undo');
@@ -1830,14 +1856,36 @@
   // A render while a request was out replaced the error line; write to the one on screen.
   const shown = (err) => document.getElementById(err.id) ?? err;
 
+  // The local, in-flight step of the feedback trail. Receipts survive a redraw; the saved trail still owns delivery and read times.
+  const sending = new Map();
+  function sendLine(id) {
+    const line = el('div', { class: 'ui-send', 'data-send-feedback': id, role: 'status', 'aria-live': 'polite' });
+    paintSend(line); return line;
+  }
+  function paintSend(line) {
+    const s = sending.get(line.dataset.sendFeedback);
+    line.hidden = !s;
+    if (!s) return;
+    line.replaceChildren(s.busy ? 'Sending…' : s.error ? `Not sent · ${s.error} ` : `Sent · ${hhmm(s.at)}`);
+    if (s.error) { const retry = el('button', { type: 'button', class: 'gd-lnk' }, 'Retry'); retry.onclick = s.retry; line.append(retry); }
+  }
+  async function sendWithFeedback(id, btn, post, retry = () => btn?.click()) {
+    if (sending.get(id)?.busy) return false;
+    const paint = () => document.querySelectorAll('[data-send-feedback]').forEach((line) => { paintSend(line); if (line.dataset.sendFeedback === id && !line.hidden) line.scrollIntoView({ block: 'nearest', behavior: 'instant' }); });
+    sending.set(id, { busy: true }); btn?.setAttribute('aria-busy', 'true'); paint();
+    try {
+      await post(); sending.set(id, { at: new Date().toISOString() }); return true;
+    } catch (e) {
+      sending.set(id, { error: e.message, retry }); return false;
+    } finally { btn?.removeAttribute('aria-busy'); paint(); }
+  }
+
   /** Sends a comment or a queued prompt for the agent; the typed text stays until the server has it. */
   function send(btn, err, body, draft, text) {
+    if (!text) return;
     const unlock = lock(btn);
-    call('/api/messages', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ ...body, text }) },
-      clearIfSaved(draft, drafts.get(draft))).catch((e) => {
-      shown(err).textContent = `Couldn't send: ${e.message}`;
-      unlock();
-    });
+    sendWithFeedback(`card:${body.key ?? 'prompt'}`, btn, () => call('/api/messages', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ ...body, text }) },
+      clearIfSaved(draft, drafts.get(draft)))).finally(unlock);
   }
 
   /** A linked run's result in plain words, for the line over the headline; the third word is the one the Evidence screens use. */
@@ -2122,12 +2170,9 @@
       const unlock = lock(roundBtn);
       const note = (drafts.get(d.key) ?? noteOf(d)).trim();
       const drop = clearIfSaved(d.key, drafts.get(d.key));
-      call('/api/rounds', {
+      sendWithFeedback(`card:${d.key}`, roundBtn, () => call('/api/rounds', {
         method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ key: d.key, note }),
-      }, () => { forget(d.key); drop(); }).catch((e) => {
-        shown(err).textContent = `Couldn't ask: ${e.message}`;
-        unlock();
-      });
+      }, () => { forget(d.key); drop(); })).finally(unlock);
     };
     const commentBtn = el('button', { 'aria-label': `Send without answering, ${name}` }, 'Send without answering');
     commentBtn.onclick = () => send(commentBtn, err, { kind: 'comment', key: d.key }, d.key, box.value.trim());
@@ -2148,7 +2193,7 @@
     fold.ontoggle = () => (fold.open ? unfolded.add(d.key) : unfolded.delete(d.key));
     fold.firstChild.onclick = () => setTimeout(() => fold.open && box.focus());
     return el('div', { class: 'note' }, saved?.answer === 'text' ? el('p', { class: 'meta saved-note', dir: 'auto' }, `Your reply: ${saved.note}`) : '',
-      kept ? el('p', { class: 'meta saved-note', dir: 'auto' }, `Your comment, sent with ${saved.label}: ${kept}`) : '', fold);
+      kept ? el('p', { class: 'meta saved-note', dir: 'auto' }, `Your comment, sent with ${saved.label}: ${kept}`) : '', fold, sendLine(`card:${d.key}`));
   }
 
   /** Free-text prompts for the agent, which it reads with sign-off-axi poll. */
@@ -2162,7 +2207,7 @@
     return el('details', { class: 'note ask', ...(drafts.get('') && { open: '' }) },
       el('summary', {}, ['Ask the agent', queued && `${queued} queued`, prompts.length - queued && `${prompts.length - queued} read by the agent`].filter(Boolean).join(' · ')),
       ...prompts.map((m) => el('p', { class: 'meta saved-note', dir: 'auto' }, `${m.delivered ? 'Read by the agent' : 'Queued'}: ${m.text}`)),
-      el('label', { for: box.id }, 'A prompt the agent reads the next time it checks in'), box, el('div', { class: 'actions' }, btn), err);
+      el('label', { for: box.id }, 'A prompt the agent reads the next time it checks in'), box, el('div', { class: 'actions' }, btn), sendLine('card:prompt'), err);
   }
 
   /** The proof on the card itself: its own captures, or else the media of its linked run.
@@ -2250,13 +2295,14 @@
       was && { at: was.at, text: `Your answer on the earlier round: ${was.label}${wrote.length === 1 && on(wrote[0]) ? ` (${on(wrote[0])})` : ''}`,
         note: wrote.length === 1 ? wrote[0].note : wrote.map((n) => (on(n) ? `${on(n)}: ${n.note}` : n.note)).join(' · ') },
       a?.replaces?.at && { at: a.replaces.at, text: `Your answer: ${said(a.replaces)}`, note: a.replaces.note },
-      a && !d.earlier_answer && { at: a.at, text: `${a.replaces ? 'Changed to' : 'Your answer'}: ${said(a)}`, note: a.note },
+      a && !d.earlier_answer && { at: a.at, text: `${a.replaces ? 'Changed to' : 'Your answer'}: ${said(a)}`, note: a.note || a.notes?.map((n) => n.note).filter(Boolean).join(' · ') },
       ...trailOf(d.key).flatMap((t) => [t.delivered && { at: t.delivered, text: `Delivered to ${by}` }, t.read && { at: t.read, text: `${by} read it` },
         t.reply && !t.reply.acted && { at: t.reply.at, text: `${by} ${t.reply.text ? 'replied' : 'acted on it'}`, note: t.reply.text, link: t.reply.link && [linkName(t.reply.link), t.reply.link] }]),
       ...(state.rounds ?? []).filter((r) => r.key === d.key).map((r) => ({ at: r.at, text: 'You asked for a new round', note: r.note })),
       ...trailOf(d.key, 'discard').map((t) => ({ at: t.at, text: `Discarded: ${reasonOf(t.reason)}` })),
+      ...(state.comments ?? []).filter((c) => c.key === d.key && c.text).map((c) => ({ at: c.at, text: 'Your comment', note: c.text })),
       ...(state.messages ?? []).filter((m) => m.kind === 'comment' && m.key === d.key).map((m) => ({ at: m.at, text: 'Your comment', note: m.text }))]
-      .filter((e, i, all) => e && !Number.isNaN(Date.parse(e.at)) && all.findIndex((x) => x && x.text === e.text && bySecond(x, e) === 0) === i).sort(bySecond);
+      .filter((e, i, all) => e && !Number.isNaN(Date.parse(e.at)) && all.findIndex((x) => x && x.text === e.text && x.note === e.note && bySecond(x, e) === 0) === i).sort(bySecond);
   };
   /** A card's Activity (ui.css): its steps as one sunk group, each in plain words with its time, the note that went with it, and the card it is on where the steps
    *  are a ticket's. A card whose only step is its posting shows none (its time is already on it). */
@@ -2343,7 +2389,7 @@
     check: '<path d="M5 10.4l3.2 3.1L15 6.6"/>', cross: '<path d="M6.5 6.5l7 7M13.5 6.5l-7 7"/>' };
   const evGlyph = (a) => { const s = el('span', { class: 'ev-g', 'aria-hidden': 'true' }); s.innerHTML = `<svg viewBox="0 0 20 20">${EV_ICONS[a]}</svg>`; return s; };
   /** A proof's tile: its project's mark (the Reports tile), with done-done's check at its corner. */
-  const evTile = (name, mark = '') => { const t = projectTile(name); t.append(mark); return t; };
+  const evTile = (name, mark = '') => { const t = projectTile(name, () => icon('evidence')); t.append(mark); return t; };
   const judgedMark = (d) => (judged(d) ? el('span', { class: `ev-ok ${judged(d)}` }, evGlyph(judged(d) === 'held' ? 'check' : 'cross')) : '');
   const prio = (d) => (/^P[0-3]$/.test(d.priority ?? '') ? d.priority : '');
   const evWhen = (d) => (d.filed ? (isToday(d.filed) ? hhmm(d.filed) : day(d.filed)) : '');
@@ -2351,7 +2397,7 @@
   const begun = (t) => !!t && t.progress > 0;
   /** One proof as a row: its project's tile with done-done's check, its title and P0-P3 chip, then its ticket's progress once begun, or its project and time. */
   function evRow(d) {
-    const t = begun(ticketOf(d)) && ticketOf(d), project = projectOf(d), meta = [project, evWhen(d)].filter(Boolean).join(' · '), title = plain(headline(d));
+    const t = begun(ticketOf(d)) && ticketOf(d), project = projectName(d), meta = [project, evWhen(d)].filter(Boolean).join(' · '), title = plain(headline(d));
     return el('li', {}, el('a', { class: 'ui-row ev-card', href: `#evidence/${d.key}`, id: `item-${d.key}`, 'data-row': '',
       'aria-label': [title, judgedWord(d), prio(d), t ? `${t.title}, ${t.progress}% done` : meta].filter(Boolean).join(', ') },
     ...uiRow({ tile: evTile(project, judgedMark(d)), title, priority: prio(d), ...(t ? { progress: t.progress } : { meta }) })));
@@ -2479,6 +2525,7 @@
 
   /** A mock or view is served from inside its own folder, so the files beside it load by their relative names. */
   const mockUrl = (key, value, path) => `${state.mockBase}${key}~${value}/${encodeURIComponent(path.split('?')[0].split('/').pop())}`;
+  const designFrame = (d) => Object.values(d.journeys?.[0]?.screens?.[0]?.views ?? {}).find(p => /\.(png|jpe?g|webp|svg)$/i.test(p)) || d.preview;
   const designUrl = (d, path) => `${state.mockBase.replace('/mock/', '/design/')}${d.key}/${encodeURIComponent(path)}`;
   /** A diagram shows inline at card width; an interactive page runs in a sandboxed frame. A tap or the link opens either full size. */
   function rung(d) {
@@ -2809,7 +2856,7 @@
   const stamp = (at) => (isToday(at) ? `Today, ${hhmm(at)}` : `${day(at)}, ${hhmm(at)}`);
   const pic = (d) => {
     const i = d.media?.findIndex((m) => !/\.(mp4|webm)$/i.test(m.path)), m = d.mocks?.find((x) => !/\.html?$/i.test(x.path));
-    return d.kind === 'design' && d.preview ? designUrl(d, d.preview) : i >= 0 ? filesOf(d)[i][3] : d.preview ? mockUrl(d.key, '', d.preview) : d.type === 'diagram' ? mockUrl(d.key, '', d.view)
+    return d.kind === 'design' && designFrame(d) ? designUrl(d, designFrame(d)) : i >= 0 ? filesOf(d)[i][3] : d.preview ? mockUrl(d.key, '', d.preview) : d.type === 'diagram' ? mockUrl(d.key, '', d.view)
       : m ? mockUrl(d.key, m.value, m.path) : d.evidenceCard?.media.find((x) => x.type.startsWith('image/'))?.url;
   };
   const thumb = (a, url) => { if (!url) return icon(a); const img = el('img', { class: 'thumb', src: src(url), alt: '', loading: 'lazy', decoding: 'async' }); img.onerror = () => img.replaceWith(icon(a)); return img; };
@@ -2842,18 +2889,22 @@
   /** The project a card is for: a plan names it, a report or design names its group, proof names the app its done-done check verified, and an ask takes the project of the proof it rests on,
    *  or, filed by a tool that is itself a project on the board (its icon set with project --icon), that project. */
   const projectName = (d) => d.project || d.group || (d.type === 'evidence' ? projectOf(d) : d.proof && projectOf(state.decisions.find((x) => x.key === d.proof) ?? {}))
-    || (d.by && (state.projects ?? []).find((p) => p.name.toLowerCase() === d.by.toLowerCase())?.name) || undefined;
-  /** A project's picture: the icon the board serves for it (set with sign-off-axi project --icon), else its initials, as also when the icon cannot be served. */
-  function projectPic(name) {
-    const parts = name.split(/[-\s_]+/).filter(Boolean), mono = el('span', { class: 'mono' }, (parts.length > 1 ? parts[0][0] + parts[parts.length - 1][0] : name.slice(0, 2)).toUpperCase());
-    if (!(state.projects ?? []).some((p) => p.icon && p.name.toLowerCase() === name.toLowerCase())) return mono;
-    const img = el('img', { src: `/api/project-icon?name=${encodeURIComponent(name)}`, alt: '' });
-    img.onerror = () => img.replaceWith(mono);
+    || (ticketOf(d) && tkProject(ticketOf(d))) || (d.by && (state.projects ?? []).find((p) => p.name.toLowerCase() === d.by.toLowerCase())?.name) || undefined;
+  /** One project picture and tile for every list; use the pinned record, with a kind icon when the project picture is unavailable. */
+  function projectPic(name, fallback = () => glyph('layers')) {
+    const p = name && (state.projects ?? []).find((p) => p.name.toLowerCase() === name.toLowerCase());
+    if (!p?.icon) return fallback();
+    const img = el('img', { src: `/api/project-icon?name=${encodeURIComponent(p.name)}&h=${p.icon.sha256.slice(0, 16)}`, alt: '' });
+    img.onerror = () => img.replaceWith(fallback());
     return img;
   }
-  /** A card's 40px tile: its project's picture, else the line drawing of what it is. */
-  const cardTile = (d) => { const name = projectName(d), a = area(d); if (!name) return uiIcon({ draw: a === 'waiting' ? askIcon(d) : { evidence: 'evidence', answered: 'done', designs: 'phone' }[a] ?? 'plan' });
-    const t = el('span', { class: 'ui-icon', 'aria-hidden': 'true' }, projectPic(name)); return t; };
+  const projectTile = (name, fallback) => el('span', { class: 'ui-icon', role: 'img', 'aria-label': name || 'No project' }, projectPic(name, fallback));
+  const cardTile = (d) => {
+    const design = d.kind === 'design' || d.type === 'design', tile = projectTile(projectName(d), () => design ? icon('designs') : d.type === 'plan' ? icon('plan') : d.kind === 'report' || d.type === 'explainer' ? kindSvg(kindOf(d)) : icon(d.type === 'evidence' ? 'evidence' : d.reply ? 'reply' : 'yesno'));
+    const frame = design && designFrame(d);
+    if (frame) { const img = el('img', { class: 'design-thumb', src: src(designUrl(d, frame)), alt: '' }); img.onerror = () => img.replaceWith(projectPic(projectName(d), () => icon('designs'))); tile.replaceChildren(img); }
+    return tile;
+  };
   /** A card as the new look's row, a link to where it opens: its tile, its title and priority, then its ticket's progress once it has some (a full bar when done), or else its project (or what it is) and when. */
   const progressOf = (n) => (n > 0 ? Math.min(n, 100) : undefined);
   function cardRow(d) {
@@ -2928,6 +2979,7 @@
     const links = [['#answered', 'Answered', by.answered], ['#designs', 'Designs', by.designs]].filter(([, , l]) => l.length);
     todayMore.replaceChildren(el('div', {}, sheetHead('t-more', 'More'), links.length ? el('div', { class: 'ui-props' }, ...links.map(([h, name, l]) => go(h, name, l.length))) : '',
       ...(state.leash ? leash() : []), ...(FROZEN || state.readonly || state.answers_only ? [] : [ask()]),
+      FROZEN ? '' : window.signOffInstall?.() ?? '',
       state.version ? el('div', { class: 'ui-props' }, el('div', { class: 'ui-pr' }, el('span', { class: 'k' }, 'Version'), el('span', { class: 'v' }, el('span', {}, state.version)))) : ''));
   }
   const hasMore = (by) => by.answered.length || by.designs.length || state.leash || state.version || !(FROZEN || state.readonly || state.answers_only);
@@ -2941,7 +2993,7 @@
       const q = query.trim().toLowerCase(), gone = new Set(state.dismissed ?? []), hit = (...s) => s.join(' ').toLowerCase().includes(q);
       const cards = q ? state.decisions.filter((d) => !gone.has(d.key) && hit(title(d), d.about ?? '', projectName(d) ?? '')).reverse() : [];
       const group = (name, ...as) => [name, cards.filter((d) => as.includes(area(d))).slice(0, 4).map(cardRow)];
-      const tickets = q ? (state.tickets ?? []).filter((t) => hit(t.title, t.id)).slice(0, 4).map((t) => el('li', {}, el('a', { class: 'ui-row', href: `#ticket/${t.id}` }, ...uiRow({ tile: uiIcon({ draw: 'pick' }), title: t.title, progress: progressOf(t.progress), meta: 'Not started' })))) : [];
+      const tickets = q ? (state.tickets ?? []).filter((t) => hit(t.title, t.id)).slice(0, 4).map((t) => el('li', {}, el('a', { class: 'ui-row', href: `#ticket/${t.id}` }, ...uiRow({ tile: tkTile(t), title: t.title, progress: progressOf(t.progress), meta: 'Not started' })))) : [];
       const groups = [group('Asks', 'waiting'), group('Proof', 'evidence'), group('Reports', 'reports', 'notes'), group('Answered', 'answered'), group('Designs', 'designs'), ['Tickets', tickets]].filter(([, rows]) => rows.length);
       out.replaceChildren(...(!q ? [el('p', { class: 't-grp' }, 'Type to search the whole board.')] : groups.length ? groups.flatMap(([name, rows]) => [el('p', { class: 't-grp' }, name), el('ul', { class: 'ui-card ui-list' }, ...rows)])
         : [el('p', { class: 't-grp' }, `Nothing matches “${query.trim()}”.`)]));
@@ -2980,8 +3032,8 @@
   const tkWhen = (at) => (isToday(at) ? hhmm(at) : day(at));
   /** Under an epic its tickets; under a ticket its sub-tasks. */
   const tkKids = (t) => (tkAbove(t).length ? 'sub-task' : 'ticket');
-  /** A ticket's 40px tile: its project's picture or initials, else the list drawing. */
-  const tkTile = (t) => (tkProject(t) ? el('span', { class: 'ui-icon', 'aria-hidden': 'true' }, projectPic(tkProject(t))) : uiIcon({ draw: 'pick' }));
+  /** A ticket uses the same project tile as every card list. */
+  const tkTile = (t) => projectTile(tkProject(t), () => icon('pick'));
   /** A ticket's row: its tile, its title and priority, then a bar with its percent once it has progress (a full bar when done), or else where it stands and when it last moved,
    * with how many of what sits under it are done. On a desk the open ticket is marked. */
   function tkRow(t) {
@@ -3046,6 +3098,17 @@
     see.onclick = () => { all ? tkMore.delete(key) : tkMore.add(key); render(); };
     return el('section', { 'aria-label': name }, el('h2', { class: 'ui-sec' }, name, el('small', {}, String(list.length)), list.length > 3 ? see : ''), el('ul', { class: 'ui-card ui-list' }, ...(all ? list : list.slice(0, 3)).map(tkRow)));
   }
+  // A tap is aimed where the finger went down. When the list moves under it before the tap lands (a redraw, an image, the page settling), the tap lands on the row that slid under
+  // the finger and opens a ticket; a tap that began on a section's See all or Show fewer does that button's work instead.
+  let tkSeeDown = null;
+  addEventListener('pointerdown', (e) => { const b = e.target.closest?.('body.tickets .ui-sec button.see'); tkSeeDown = b && { label: b.closest('section')?.getAttribute('aria-label'), at: e.timeStamp }; }, true);
+  addEventListener('click', (e) => {
+    const down = tkSeeDown;
+    tkSeeDown = null;
+    if (!down || e.timeStamp - down.at > 1000 || e.target.closest?.('.ui-sec button.see')) return;
+    e.preventDefault(), e.stopPropagation();
+    [...document.querySelectorAll('main section[aria-label]')].find((s) => s.getAttribute('aria-label') === down.label)?.querySelector('.ui-sec button.see')?.click();
+  }, true);
   /** The Tickets screen. On a phone: the title row, Your asks or System, the hero, then In progress, On hold, To do and Done, and two tiles, with the open ticket as a sheet over them.
    * On a desk: one filled screen, the head across, then the hero over In progress, On hold over To do, and the open ticket (the first one moving when none is picked). */
   function tickets(by, id) {
@@ -3093,7 +3156,7 @@
     // Its cards' steps after their postings (Linked shows those), newest first, each naming its card.
     const steps = cards.flatMap((d) => threadOf(d).filter((e) => !e.posted).map((e) => ({ ...e, card: d }))).sort(bySecond).reverse(), said = trailOf(t.id, 'ticket');
     seeReply(t.id, 'ticket');
-    return [el('div', { class: 'tk-shd' }, el('p', {}, proj ? el('span', { class: 'tk-pt', 'aria-hidden': 'true' }, projectPic(proj)) : '', el('span', {}, [proj, TK_WORDS[s]].filter(Boolean).join(' · '))), close),
+    return [el('div', { class: 'tk-shd' }, el('p', {}, tkTile(t), el('span', {}, [proj, TK_WORDS[s]].filter(Boolean).join(' · '))), close),
       el('h2', { class: 'tk-dt', tabindex: '-1', dir: 'auto' }, t.title),
       t.release ? el('span', { class: 'ui-pc tk-release', title: t.release }, t.release) : '',
       el('div', { class: 'ui-props' }, t.priority ? prop('flag', 'Priority', el('span', { class: `ui-pc ${t.priority.toLowerCase()}` }, t.priority)) : '',
@@ -3180,7 +3243,9 @@
     const queue = [...by.waiting].sort((x, y) => lead(x) - lead(y)), up = upNext(queue), rest = waitingOn(queue.slice(1)), tiles = todayTiles(by), more = moreLine(by), replies = repliesOn();
     if (todayMore.open) fillMore(by);
     if (location.hash === '#find' && !searchSheet.open) openSearch();
-    return phone() ? [up, replies, rest, tiles, more] : [el('div', { class: 't-cols' }, el('div', {}, up, tiles, more), el('div', {}, replies, rest))];
+    const open = by.designs.filter(dzOpen), designs = open.length ? el('section', { class: 't-wait', 'aria-label': 'Designs to review' }, el('h2', { class: 'ui-sec' }, 'Designs to review', el('a', { class: 'see', href: '#designs' }, 'See all')),
+      el('ul', { class: 'ui-card ui-list' }, ...open.slice(0, 2).map(designRow))) : '';
+    return phone() ? [up, replies, rest, designs, tiles, more] : [el('div', { class: 't-cols' }, el('div', {}, up, tiles, more), el('div', {}, replies, rest, designs))];
   }
 
   /** A short row's second line: what changed, unless the headline already says it. */
@@ -3247,7 +3312,7 @@
   const kindOf = (d) => (KINDS[d.purpose] ? d.purpose : d.type === 'plan' ? 'plan' : GUESS.find(([, re]) => re.test([d.title, d.about, ...(d.sections ?? []).map((s) => s.heading)].join(' ')))?.[0] ?? 'other');
   const kindSvg = (k) => { const s = el('span', { class: 'rkg', 'aria-hidden': 'true' }); s.innerHTML = `<svg viewBox="0 0 24 24">${KINDS[k][3]}</svg>`; return s; };
   /** The kind's chip: its icon and its short name on a row, its full name on a report's head. */
-  const kindChip = (d, full) => { const k = kindOf(d); return el('span', { class: `rkc k-${k}`, 'data-kind': k }, kindSvg(k), full ? KINDS[k][1] : KINDS[k][0]); };
+  const kindChip = (d, full) => { const k = kindOf(d); return el('span', { class: `rkc k-${k}`, 'data-kind': k }, kindSvg(k), (full ? KINDS[k][1] : KINDS[k][0]) + (!KINDS[d.purpose] && d.type !== 'plan' ? ' · kind guessed' : '')); };
   /** The kind's tile in the filter and its pill: its icon on the same treatment as its chip; Every kind is the filter's own drawing. */
   const kindTile = (k) => (k ? el('span', { class: `rkt k-${k}` }, kindSvg(k)) : el('span', { class: 'rkt k-all' }, evGlyph('filter')));
   /** One line under a report's title: what this kind of report is for. */
@@ -3265,7 +3330,7 @@
   const sourcesOf = (d) => { const x = (d.sections ?? []).find((y) => y.part === 'sources'), its = (x?.items ?? []).filter((it) => it.link); return x && its.length ? { id: x.id, n: its.length, users: its.filter((it) => it.source === 'user').length } : null; };
   /** How much of a report is read: all of it once read; one not read yet, by the parts of it read (a report 5's kind parts; a page report has none). */
   /** A report's parts as a strip, one segment each, filled once read (all of it once the report is read); on a desk's head each segment names its part. */
-  // On a row a read report's strip is full, as its percent is; over its parts (a sheet, a desk's head) each segment is its part, filled once that part is read.
+  // On an unread row, each segment is a part; over its parts (a sheet, a desk's head), each segment records that part's read state.
   const partsStrip = (d, parts = false) => el('span', { class: 'rp-strip', 'aria-hidden': 'true' }, ...kindParts(d).map(([p]) => el('i', { class: (!parts && !unread(d)) || partRead(d, p) ? 'on' : '' })));
   /** Over a report's parts: the strip of them, and the next part to read. */
   const stripRow = (d) => { const next = kindParts(d).find(([p]) => !partRead(d, p)); return el('div', { class: 'rp-strip-row' }, partsStrip(d, true), next ? el('p', { class: 'rp-next', dir: 'auto' }, `Next: ${next[1]}`) : ''); };
@@ -3276,18 +3341,6 @@
       .replace(/(?:~|\/home)\/\S+/g, '').replace(/\b(?:[\w.-]+\/)+([\w.-]+)\.(?:md|json|png|jpe?g|html|sh|mjs|js|ts|py|yaml)\b/g, (m, b) => (/^(report|plan)$/i.test(b) ? `the ${b.toLowerCase()}` : 'the file')).replace(/\s{2,}/g, ' ').trim();
     return s && s[0].toUpperCase() + s.slice(1);
   };
-  /** A project's mark: the icon the board pins for it, else its initials; a report with no project gets the page drawing. */
-  const initials = (name) => { const ps = name.split(/[-\s_]+/).filter(Boolean); return (ps.length > 1 ? ps[0][0] + ps.at(-1)[0] : name.slice(0, 2)).toUpperCase(); };
-  function projectMark(name) {
-    const p = name && (state.projects ?? []).find((x) => x.name.toLowerCase() === name.toLowerCase());
-    const mono = name ? el('i', { class: 'mono' }, initials(name)) : '';
-    if (!p?.icon) return mono;
-    // A file changed or moved since it was pinned answers 404; the initials stand in.
-    const img = el('img', { src: `/api/project-icon?name=${encodeURIComponent(p.name)}&h=${p.icon.sha256.slice(0, 16)}`, alt: '' });
-    img.onerror = () => img.replaceWith(mono);
-    return img;
-  }
-  const projectTile = (name) => { const m = projectMark(name); return m ? el('span', { class: 'ui-icon', 'aria-hidden': 'true' }, m) : uiIcon({ draw: 'plan' }); };
   let rpRisen = false;
   function markRead(keys, read, text) {
     keys.forEach((k) => ((state.opened ??= {})[k] = read));
@@ -3319,12 +3372,16 @@
     await archive(d);
     if (next && location.hash === `#reports/${d.key}`) rpPicked = true, location.hash = next;
   }
-  /** A report: a row with its project's icon, its title (and its priority when it has one), then a bar of how much of it is read with its percent, as the prototype draws every row.
+  /** A report: a row with its project's icon, its title (and its priority when it has one), then its kind and ticket, with a quiet progress track only while unread.
    *  A tap opens its page; an explainer with no page opens in place, to its numbered steps or its video card. */
   function report(d, i = 0) {
     const n = d.steps?.length;
-    // The second line leads with the report's kind; a plan's bar is its parts, one segment each, filled once read.
-    const face = uiRow({ tile: projectTile(d.group), title: plain(title(d)), priority: d.priority, progress: readPct(d), badge: trailBadge(d.key), lead: kindChip(d), bar: kindOf(d) === 'plan' && kindParts(d).length ? partsStrip(d) : undefined });
+    // Keep the kind and ticket readable on line two; read progress sits quietly below while unread.
+    const t = ticketOf(d), ticket = d.ticket || t?.title || 'No ticket';
+    const meta = el('span', { class: 'rp-meta' }, kindChip(d), el('span', { class: 'rp-ticket', title: t ? `${t.id}: ${t.title}` : ticket }, ticket));
+    const face = uiRow({ tile: cardTile(d), title: plain(title(d)), priority: d.priority, after: trailBadge(d.key), meta });
+    if (unread(d)) face[1].append(el('span', { class: 'rp-progress', role: 'progressbar', 'aria-label': 'Report read', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': String(readPct(d)) },
+      kindOf(d) === 'plan' && kindParts(d).length ? partsStrip(d) : el('span', { class: 'ui-bar' }, el('i', { style: `width: ${readPct(d)}%` })), el('span', { class: 'pct sr-only' }, `${readPct(d)}%`)));
     const sel = rpSel === d.key;
     const li = (...kids) => el('li', { class: `report dl-row${flash === d.key ? ' returned' : ''}${sel ? ' sel' : ''}`, style: `--n:${i}`, ...(reads(d) && { 'data-key': d.key, 'data-list': 'reports' }) }, ...kids);
     const act = (cls, mark, words) => el('div', { class: `dl-act ${cls}`, 'aria-hidden': 'true' }, glyph(mark), el('span', {}, words));
@@ -3486,11 +3543,12 @@
       el('h3', {}, 'Whole-plan comment'), el('label', { for: commentBox.id }, 'Comment for the agent on the whole plan (optional)', commentBox)));
     send.onclick = () => {
       send.disabled = true; err.textContent = '';
-      call('/api/answers', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ key: d.key, note: comment,
+      sendWithFeedback(`plan:${d.key}`, send, () => call('/api/answers', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ key: d.key, note: comment,
         notes: d.sections.map((s) => notes.get(s.id)), decisions: Object.fromEntries([...picks].map(([k, v]) => [k, v.trim()])) }) }, () => {
         drafts.delete(draftKey); keep(); location.hash = `#answered/${d.key}`;
-      }).catch((e) => { err.textContent = `Couldn't send back: ${e.message}`; update(); });
+      })).then((ok) => { if (!ok) update(); });
     };
+    main.append(sendLine(`plan:${d.key}`));
     panel.append(el('h2', {}, 'Your answers'), progress, el('div', { class: 'plan-next-row' }, status, next), send, err); panel.hidden = !!saved; update();
     return el('div', { class: `plan-scroll${saved ? ' sent' : ''}` }, el('div', { class: `plan-layout${saved ? ' sent' : ''}` }, main, panel));
   }
@@ -3561,15 +3619,15 @@
       const notes = roundNotes().filter((n) => (!n.journey || live.has(`${n.journey}/${n.screen}`)) && (n.journey !== selected?.journey.id || n.screen !== selected?.screen.id));
       if (writes) notes.push({ ...(selected && { journey: selected.journey.id, screen: selected.screen.id }), verdict, note: text });
       saving = true; approve.disabled = change.disabled = true;
-      return call('/api/answers', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ key: d.key, ...(!screen && { verdict }), ...(screen && { requested: verdict === 'change' }),
-        notes, ...(pick.value && { pick: pick.value }) }) }, () => session.drafts.delete(screenKey(selected)))
+      return sendWithFeedback(`design:${d.key}`, verdict === 'approve' ? approve : change, () => call('/api/answers', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ key: d.key, ...(!screen && { verdict }), ...(screen && { requested: verdict === 'change' }),
+        notes, ...(pick.value && { pick: pick.value }) }) }, () => { session.drafts.set(screenKey(selected), ''); note.value = ''; }))
         .finally(() => { saving = false; approve.disabled = change.disabled = state.readonly; if (session.open) { screenStatus.textContent = screenLine(); stamp(true); } });
     };
     const approve = el('button', { class: 'open-link dz-ink' }, 'Approve'), change = el('button', { class: 'dz-change' }, 'Change');
     approve.disabled = change.disabled = state.readonly;
     approve.onclick = () => save('approve').catch((e) => { err.textContent = `Couldn't save: ${e.message}`; });
     change.onclick = () => { if (!note.value.trim()) { err.textContent = 'Add a note describing what should change.'; note.focus(); return; } save('change').catch((e) => { err.textContent = `Couldn't save: ${e.message}`; }); };
-    const foot = el('div', { class: 'foot' }, approve, change);
+    const foot = el('div', { class: 'foot' }, approve, change, sendLine(`design:${d.key}`));
     const controls = el('div', { class: 'dz-ctl' }, d.options?.length ? el('label', {}, 'Pick a direction', pick) : '', el('label', {}, screens.length ? 'Screen note' : 'Design note', note));
     const open = el('button', { class: 'open-link dz-full', 'aria-haspopup': 'dialog', 'data-design': d.key }, 'Review full screen');
     // Where it stands: its state, the direction picked and when it was answered, then what was said on this round.
@@ -3829,12 +3887,12 @@
       const s = same(part, action, q, selection), prior = sentAs(s);
       if (prior) { already(part, prior); return prior; }
       if (outbox.has(s)) { outbox.set(s, true); return; }
-      outbox.set(s, false); btn?.setAttribute('aria-busy', 'true');
-      try { await post(); sync(); const a = sentAs(s); if (a) (outbox.get(s) ? already(part, a) : showAsk(part, a.id)); return a; }
-      finally { outbox.delete(s); btn?.removeAttribute('aria-busy'); }
+      outbox.set(s, false);
+      try { if (!await sendWithFeedback(`ask:${key}:${part}`, btn, post)) throw new Error(sending.get(`ask:${key}:${part}`).error); sync(); const a = sentAs(s); if (a) (outbox.get(s) ? already(part, a) : showAsk(part, a.id)); return a; }
+      finally { outbox.delete(s); }
     }
     async function ask(part, q, btn) {
-      try { await sendAsk(part, 'deeper', q, undefined, btn, () => postJson('/api/deeper', { key, part, ...(q && { q }) })); } catch (e) { panels.get(part).hidden = false; panels.get(part).append(E('p', 'gd-err', `Could not ask: ${e.message}`)); }
+      try { await sendAsk(part, 'deeper', q, undefined, btn, () => postJson('/api/deeper', { key, part, ...(q && { q }) })); } catch { panels.get(part).hidden = false; }
     }
     const deepBtn = (part) => {
       const b = el('button', { class: 'gd-lnk deep', type: 'button', 'aria-expanded': 'false', 'aria-controls': `gd-a-${part.replace(/\W/g, '-')}` }, gic('deeper'), 'Go deeper');
@@ -3856,19 +3914,14 @@
     };
     async function engage(part, action, q, id = crypto.randomUUID(), selection, btn) {
       try { return await sendAsk(part, action, q, selection, btn, () => postJson('/api/engagement', { version: 1, id, key, ...d.engagement, part, action, ...(q !== undefined && { q }), ...(selection && { selection }) })); }
-      catch (e) {
-        const retry = el('button', { type: 'button', class: 'gd-lnk' }, 'Retry');
-        const error = E('p', 'gd-err', `Could not ask: ${e.message} `, retry);
-        retry.onclick = () => { error.remove(); engage(part, action, q, id, selection, retry); };
-        panels.get(part).hidden = false; panels.get(part).append(error);
-      }
+      catch { panels.get(part).hidden = false; }
     }
     // The presets and the composer for one part. With a selection they ask about those words, through this same engage().
     const controls = (part, selection) => {
       const form = el('form', { class: 'gd-fu' }), input = el('input', { 'aria-label': selection ? 'Ask about the selected text' : 'Ask about this part', placeholder: selection ? 'Ask about these words' : 'Ask about this' }), send = el('button', { type: 'submit' }, 'Send');
       let action = 'custom';
       form.append(input, send); form.hidden = !!selection;
-      form.onsubmit = (e) => { e.preventDefault(); if (input.value.trim()) { const sent = engage(part, action, input.value, undefined, selection, send); input.value = ''; action = 'custom'; input.placeholder = 'Ask a follow-up'; if (selection) asked(part, sent); } };
+      form.onsubmit = async (e) => { e.preventDefault(); if (input.value.trim()) { const sent = engage(part, action, input.value, undefined, selection, send); if (selection) asked(part, sent); if (await sent) { input.value = ''; action = 'custom'; input.placeholder = 'Ask a follow-up'; } } };
       const buttons = Object.entries(actionLabels).filter(([a]) => a !== 'custom').map(([a, label]) => {
         const b = el('button', { class: `gd-lnk ${a === 'deeper' ? 'deep' : a}`, type: 'button' }, label);
         b.onclick = () => { if (a === 'question') { action = a; form.hidden = false; input.focus(); } else { const sent = engage(part, a, undefined, undefined, selection, b); if (selection) asked(part, sent); } };
@@ -3906,11 +3959,12 @@
       const close = () => { box.hidden = true; ta.value = ''; lean = undefined; comment.setAttribute('aria-expanded', 'false'); paint(); };
       comment.onclick = () => (box.hidden || mode !== 'comment' ? open('comment') : close());
       cancel.onclick = close; ta.oninput = paint; ta.onkeydown = (e) => { if (e.key === 'Escape') { e.stopPropagation(); close(); } };
-      const post = async (body) => { try { await postJson('/api/annotations', { key, part, ...body }); sync(); return true; } catch (e) { err.textContent = 'Could not send: ' + e.message; box.hidden = false; return false; } };
+      const post = (body) => sendWithFeedback(`part:${key}:${part}`, send, async () => { await postJson('/api/annotations', { key, part, ...body }); sync(); });
       box.onsubmit = async (e) => {
-        e.preventDefault(); const text = ta.value.trim(); if (!text) return;
-        send.disabled = true;
-        if (mode === 'question') { await engage(part, 'question', text, undefined, undefined, send); close(); } else if (await post({ text, ...(lean && { verdict: lean }) })) close(); else send.disabled = false;
+        e.preventDefault(); const text = ta.value.trim(); if (!text || sending.get(`part:${key}:${part}`)?.busy) return;
+        send.disabled = ta.disabled = cancel.disabled = comment.disabled = true;
+        if (mode === 'question') { if (await engage(part, 'question', text, undefined, undefined, send)) close(); } else if (await post({ text, ...(lean && { verdict: lean }) })) close();
+        ta.disabled = cancel.disabled = comment.disabled = false; paint();
       };
       const vote = (name, label, icon) => el('button', { type: 'button', class: 'gd-v ' + name + (inItem ? ' icon-only' : ''), 'aria-pressed': 'false', title: label }, gic(icon), E('span', '', label));
       const agree = vote('agree', 'Agree', 'up'), disagree = vote('disagree', 'Disagree', 'down');
@@ -3931,7 +3985,7 @@
         ask = [E('div', 'gd-menuwrap', more, menu)];
       } else if (live) ask = [deepBtn(part)];
       queueMicrotask(() => paintTalk(part));
-      return [...(dp ? [dp] : []), thread, box, E('div', 'gd-acts gd-foot' + (d.engagement ? '' : ' legacy'), agree, disagree, comment, E('span', 'sp'), ...(db ? [db] : []), ...ask), panel];
+      return [...(dp ? [dp] : []), thread, box, sendLine(`part:${key}:${part}`), sendLine(`ask:${key}:${part}`), E('div', 'gd-acts gd-foot' + (d.engagement ? '' : ' legacy'), agree, disagree, comment, E('span', 'sp'), ...(db ? [db] : []), ...ask), panel];
     };
 
     // ---- selected words: native selection of one authored field, offered the same presets right under that field
@@ -4056,8 +4110,7 @@
     noteBox.oninput = () => { S.note = noteBox.value; if (!plan) syncU(); };
     // Said as a comment on the understood part, so the author's wait --filer takes it and the part shows Sent to the agent, then Agent read it.
     async function sayU(body, btn) {
-      tell.parentElement.querySelector(':scope > .gd-err')?.remove(); btn.disabled = true;
-      try { await postJson('/api/annotations', { key, part: 'understood', ...body }); sync(); return true; } catch (e) { tell.after(E('p', 'gd-err', `Could not send: ${e.message}`)); btn.disabled = false; return false; }
+      return sendWithFeedback(`tell:${key}`, btn, async () => { await postJson('/api/annotations', { key, part: 'understood', ...body }); sync(); });
     }
     tell.onclick = async () => { if (await sayU({ verdict: 'disagree', text: S.note.trim() }, tell)) { S.told = true; S.note = noteBox.value = ''; syncU(); } };
     function syncU() {
@@ -4068,7 +4121,7 @@
     }
     const understood = card('understood', 'understood', head('Check that I have this right', 'This is your ask in my words. If it is off, say what is off. That is the only correction that matters.'),
       el('dl', { class: 'gd-uq' }, ...d.understood.map((u, n) => E('div', '', fld('understood', `understood.${n}.label`, el('dt', {}, u.label)), fld('understood', `understood.${n}.text`, mdSpan('dd', '', u.text))))),
-      E('div', 'gd-seg', ...choices), noteBox, tell, ...(live ? acts('understood') : []), rc('understood'));
+      E('div', 'gd-seg', ...choices), noteBox, tell, sendLine(`tell:${key}`), ...(live ? acts('understood') : []), rc('understood'));
 
     // A comparison: every item's detail is the same "Axis: value" lines in the same order, so the section is one table.
     // The detail stays plain lines, so a board that predates the table still reads it as text.
@@ -4125,12 +4178,12 @@
     // ---- next step and Go ahead
     const sendSlot = E('div', ''), err = E('p', 'gd-err');
     err.setAttribute('role', 'alert');
-    const nextCard = card('next', 'next', head(d.next.heading, undefined, undefined, 'next', 'heading'), E('ul', 'gd-checks', ...d.next.lines.map((l, n) => E('li', '', E('span', 'tk', gic('check')), fld('next', `lines.${n}`, mdSpan('span', '', l))))), ...(plan ? [sendSlot, err] : []), ...(d.engagement || live ? acts('next') : []), rc('next'));
+    const nextCard = card('next', 'next', head(d.next.heading, undefined, undefined, 'next', 'heading'), E('ul', 'gd-checks', ...d.next.lines.map((l, n) => E('li', '', E('span', 'tk', gic('check')), fld('next', `lines.${n}`, mdSpan('span', '', l))))), ...(plan ? [sendSlot, sendLine(`plan:${key}`), err] : []), ...(d.engagement || live ? acts('next') : []), rc('next'));
     async function go(b) {
       if (S.understood === 'no' && !S.note.trim()) { noteBox.focus(); noteBox.scrollIntoView({ block: 'center' }); err.textContent = 'Say what is off first, or choose That is right.'; return; }
       err.textContent = ''; b.disabled = true;
       const notes = S.understood ? [{ section: 'understood', verdict: S.understood === 'yes' ? 'approve' : 'change', ...(S.note.trim() && { note: S.note.trim() }) }] : [];
-      try { await postJson('/api/answers', { key, note: '', notes, decisions: S.picks }); sync(); } catch (e) { err.textContent = `Couldn't send: ${e.message}`; b.disabled = false; }
+      if (!await sendWithFeedback(`plan:${key}`, b, async () => { await postJson('/api/answers', { key, note: '', notes, decisions: S.picks }); S.note = noteBox.value = ''; sync(); })) b.disabled = false;
     }
     const goBtn = () => { const b = el('button', { class: 'gd-btn block', type: 'button' }, gic('send'), changes() ? `Send ${plural(changes(), 'change')}` : 'Go ahead'); b.onclick = () => go(b); return b; };
 
@@ -4187,7 +4240,7 @@
       stageBlocks.push(c);
     }
     const who = plan ? 'Planning agent' : d.asked_by ?? 'Reporting agent';
-    const top = E('div', 'gd-top', E('p', 'geye', kindChip(d, true), E('span', '', [plan ? d.project : d.group, [who, d.filed && when(d.filed)].filter(Boolean).join(', ')].filter(Boolean).join(' · '))), fld('this', 'title', E('h1', '', d.title)), purposeLine(d), fld('this', 'about', mdSpan('p', 'sub', d.about)), ticketRow(d), thread(d),
+    const top = E('div', 'gd-top', E('p', 'geye', kindChip(d, true), E('span', '', [plan ? d.project : d.group, [who, d.filed && when(d.filed)].filter(Boolean).join(', ')].filter(Boolean).join(' · '))), fld('this', 'title', E('h1', '', d.title)), purposeLine(d), fld('this', 'about', mdSpan('p', 'sub', d.about)), ticketRow(d), el('div', { class: 'gd-activity' }, thread(d)),
       E('div', 'howto', gic('info'), E('span', '', `A few short parts, in order. Tap Details for the numbers and Go deeper to ask me more.${plan ? ' Nothing is required: Go ahead accepts my picks.' : ''}`)));
     const rail = el('aside', { class: 'gd-rail' }, E('h4', '', plan ? 'This plan' : 'This report'), nav, ...(plan ? [sumHost] : []));
     const progress = E('div', 'gd-progress', now, segs);
@@ -4220,6 +4273,7 @@
     let timer;
     function sync() {
       if (!root.isConnected && timer) { clearInterval(timer); timer = undefined; return; }
+      root.querySelector('.gd-activity')?.replaceChildren(thread(d));
       syncU(); paintOpts(); paintSummary(); paintRc(); paintRail(); votes.forEach((_, part) => paintTalk(part));
       panels.forEach((_, part) => { paintAns(part); if (asksOf(part).length && (d.engagement || (deeps.get(part).getAttribute('aria-expanded') === 'false' && !deeps.get(part).dataset.shut))) { deeps.get(part)?.setAttribute('aria-expanded', 'true'); panels.get(part).hidden = false; } });
       const need = live && (unfinished() || (state.comments ?? []).some((c) => c.key === key && c.text && !c.reply) || (plan && sent() && !state.seen_at?.[key]));
@@ -4407,10 +4461,11 @@
     }
     if (sel) h1.textContent = sel.title;
     const changes = items.filter((d) => designStatus(d) === 'Changes requested').length;
+    if (phone() && !sel) h1.textContent = 'Decide';
     if (phone()) top.className = 'ui-top dz-top', top.replaceChildren(h1, ...(sel ? [sel.all, sel.bar] : [more, theme]));
     else top.className = 'ui-dhead dz-head', top.replaceChildren(el('div', { class: 'tx' }, el('p', { class: 'crumb' }, 'Sign-off', el('span', { 'aria-hidden': 'true' }, '›'), 'Designs'), h1,
       el('p', {}, items.length ? `${plural(items.length, 'design')} on your board${changes ? ` · changes requested on ${changes > 1 && changes === items.length ? `all ${changes}` : changes}` : ''}` : EMPTY.designs), ro), el('div', { class: 'acts' }, ...(sel ? [sel.all, sel.bar] : [more, theme])));
-    return [phone() ? ro : ''];
+    return phone() ? [ro, decideSeg('designs')] : [''];
   }
   /** Designs, newest first: on a phone To review and the rows, then Archived; on a desk the cards and the open design (the one in the address, else the newest). */
   function designGroups(items, top, key, gone = []) {
@@ -4430,9 +4485,13 @@
     return [...head, el('section', { class: 'ui-card ui-hero dz-hero', 'aria-label': 'To review' }, el('div', { class: 'hl' }, el('span', { class: 'lab' }, 'To review')),
       el('div', { class: 'hv' }, el('span', { class: 'big' }, String(toReview), el('small', {}, ` of ${items.length}`)), approved ? el('span', { class: 'vs' }, `${approved} approved`) : '')),
       el('h2', { class: 'ui-sec' }, 'Newest', el('span', { class: 'n' }, String(items.length))),
-      el('ul', { class: 'ui-card ui-list dz-list' }, ...items.map((d) => { const t = ticketOf(d);
-        return el('li', { id: `item-${d.key}` }, el('a', { class: 'ui-row', href: `#designs/${d.key}`, 'aria-label': `Open design, ${d.title}${t?.progress > 0 ? `, ticket ${t.title}, ${t.progress}% done` : ''}` },
-          ...uiRow({ tile: cardTile(d), title: d.title, priority: d.priority, badge: trailBadge(d.key), meta: [designStatus(d), d.filed && day(d.filed)].filter(Boolean).join(' · '), progress: progressOf(t?.progress) }), selMark(d.key))); })), archived(gone)];
+      el('ul', { class: 'ui-card ui-list dz-list' }, ...items.map(designRow)), archived(gone)];
+  }
+  /** A design as a row: its tile (a thumbnail of its first screen), the title, its state and day (or its ticket's bar); it opens the design's review. */
+  function designRow(d) {
+    const t = ticketOf(d);
+    return el('li', { id: `item-${d.key}` }, el('a', { class: 'ui-row', href: `#designs/${d.key}`, 'aria-label': `Open design, ${d.title}${t?.progress > 0 ? `, ticket ${t.title}, ${t.progress}% done` : ''}` },
+      ...uiRow({ tile: cardTile(d), title: d.title, priority: d.priority, badge: trailBadge(d.key), meta: [designStatus(d), d.filed && day(d.filed)].filter(Boolean).join(' · '), progress: progressOf(t?.progress) }), selMark(d.key)));
   }
 
   /** Archived: what was discarded or dismissed from a screen, and the evidence and reports archived a day after they were filed. One quiet line at the list's end opens them
@@ -4543,6 +4602,28 @@
     return el('li', { class: `dl-row g-done${sel ? ' sel' : ''}`, 'data-key': d.key, style: `--n:${i}` }, el('a', { class: 'dl-face ui-row', href: `#decide/${d.key}`, draggable: 'false', 'data-row': '', ...(sel && { 'aria-current': 'true' }) },
       ...uiRow({ tile: uiIcon({ draw: 'done' }), title: title(d), badge: trailBadge(d.key), meta: `${s.replaces ? 'Changed to ' : ''}${saidOf(d, s)} · ${filedAt(s.at)}` })));
   }
+  /** On a phone Decide holds two lists, as Tickets holds Your asks and System: Asks (what waits on you) and Designs (the reviews still open), each with its count.
+   *  A desk keeps Designs in the sidebar. */
+  let decideCounts = { asks: 0, designs: 0 };
+  const dzOpen = (d) => ['In review', 'Draft'].includes(designStatus(d));
+  function decideSeg(on) {
+    const b = (v, href, name, n) => { const x = el('button', { type: 'button', 'aria-pressed': String(on === v) }, name, el('small', {}, String(n))); x.onclick = () => { if (on !== v) buzz('tick'), location.hash = href; }; return x; };
+    return el('div', { class: 'ui-seg dl-seg', role: 'group', 'aria-label': 'Decide' }, b('asks', '#waiting', 'Asks', decideCounts.asks), b('designs', '#designs', 'Designs', decideCounts.designs));
+  }
+  /** On a phone Decide's order (Newest or By priority) is a round button in its head, marked while By priority is on, opening a sheet of the two. */
+  const dlSortSheet = sheetOf('dl-sort');
+  function decideSortButton() {
+    const b = el('button', { class: `ui-rb dl-rb${dsort === 'priority' ? ' on' : ''}`, 'aria-label': `Order: ${dsort === 'priority' ? 'By priority' : 'Newest'}`, 'aria-haspopup': 'dialog' });
+    b.innerHTML = '<svg class="glyph" viewBox="0 0 20 20" aria-hidden="true"><path d="M3.5 6h13M6 10h8M8.5 14h3"/></svg>';
+    b.onclick = () => {
+      const pick = (v, name) => { const x = el('button', { class: 'ui-pr dl-pick', ...(dsort === v && { 'aria-current': 'true' }) }, el('span', { class: 'k' }, name), el('span', { class: 'v' }, dsort === v ? glyph('check') : ''));
+        x.onclick = () => { dsort = v; try { localStorage.setItem('sign-off-decide-sort', v); } catch {} dlSortSheet.close(); render(); }; return x; };
+      dlSortSheet.replaceChildren(el('div', {}, sheetHead('dl-sort', 'Order'), el('div', { class: 'ui-props' }, pick('new', 'Newest'), pick('priority', 'By priority'))));
+      dlSortSheet.showModal();
+      dlSortSheet.querySelector('h2').focus();
+    };
+    return b;
+  }
   /** Decide's list: Newest or By priority, the hero (how many wait on you, how many you answered today, how many are for later), the asks in one card, then Later and Answered. */
   function decideList(items, hidden, done = [], today = 0) {
     const rows = { now: [], later: [] };
@@ -4566,7 +4647,7 @@
     // On a phone the asks' head sits over their card; on a desk, where the hero is hidden, the card carries its head and count inside it, as the prototype's list card.
     const desk = deskSel !== null, asks = rows.now.length ? card('Asks', rows.now, desk)
       : el('div', { class: `${desk ? '' : 'ui-card '}dl-clear` }, el('b', {}, 'All clear'), el('span', {}, `Nothing is waiting on you${state.name ? `, ${state.name}` : ''}.`));
-    return el('div', { class: `waiting-page decide-list${fresh ? ' rise' : ''}` }, seg, hero, ...(desk ? [el('section', { class: 'ui-card dl-asks' }, sec('Asks', n), asks)] : [sec('Asks'), asks]),
+    return el('div', { class: `waiting-page decide-list${fresh ? ' rise' : ''}` }, phone() ? decideSeg('asks') : seg, hero, ...(desk ? [el('section', { class: 'ui-card dl-asks' }, sec('Asks', n), asks)] : [sec('Asks'), asks]),
       ...(rows.later.length ? [sec('Later', later), card('Later', rows.later)] : []),
       // Every answer given, newest first.
       ...(done.length ? [sec('Answered', done.length), card('Answered', done.map(doneRow))] : []), items.length ? decideMoreLine(items) : '', archived(hidden));
@@ -4868,8 +4949,8 @@
     // pinned under a hairline at the foot, as cards side by side over one line of the note, Ask me later and Answer.
     const page = desk ? el('section', { class: `${kind} ui-card ui-pane ask2 s8 split-detail`, 'aria-labelledby': 'ask-title' },
       el('div', { class: 'pbody' }, askHead(d, sink), el('div', { class: 'pmain' }, lead, ...about, ...said, quietLine), el('div', { class: 'pside' }, ...askReport(d), thread(d))),
-      el('div', { class: 'ppin' }, ...picks, ...words, err, bar(noteField)))
-      : el('section', { class: kind }, lead, ...about, ...said, ...picks, ...words, noteField, quietLine, thread(d), err, bar());
+      el('div', { class: 'ppin' }, ...picks, ...words, sendLine(`card:${d.key}`), err, bar(noteField)))
+      : el('section', { class: kind }, lead, ...about, ...said, ...picks, ...words, noteField, quietLine, thread(d), sendLine(`card:${d.key}`), err, bar());
     return page;
   }
   const kc = (k) => el('kbd', { class: 'kc' }, k);
@@ -5027,6 +5108,7 @@
     const decideDone = by.answered.filter(redo), walk = [...decideDone].reverse().concat(decideQueue);
     // On a desk, Decide's list and its ask share the screen, Evidence's list and its update, and Reports' list and its report.
     // On a phone an ask opens as a sheet over Decide's list, so the page under it keeps the list's head.
+    decideCounts = { asks: by.waiting.filter((d) => sideOf(d) === 'now').length, designs: by.designs.filter(dzOpen).length };
     const deskSplit = !phone() && ((at === 'waiting' || at === 'decide' || at === 'reports') && !state.readonly || at === 'evidence'), head = at === 'decide' ? 'waiting' : at;
     deskSel = null;
     // A report in the address is shown (and read) beside the list; with none, the newest is shown, not yet marked read.
@@ -5063,7 +5145,7 @@
       el('a', { class: 'sfind', href: '#find' }, document.getElementById('dock-find').firstChild.cloneNode(true), 'Search'), ...SIDE.map(link),
       el('div', { class: 'me' }, el('i', { 'aria-hidden': 'true' }, [...who][0].toUpperCase()), el('span', { dir: 'auto' }, who), themeButton()),
       state.version ? el('p', { class: 'ver' }, `Version ${state.version}`) : '');
-    paintTabs(active === 'designs' ? '' : active, count, badge);
+    paintTabs(active === 'designs' ? 'waiting' : active, count, badge);
     const ro = state.readonly ? 'Read only' : FROZEN ? `Read-only copy, ${FROZEN.exported}` : '';
     const pageTitle = head === 'decide' || head === 'waiting' ? 'Decide' : head === 'reports' ? 'Reports' : AREAS[head];
     document.body.classList.toggle('today', !at);
@@ -5072,7 +5154,7 @@
     const answeredToday = by.answered.filter((d) => isToday(state.answers[d.key].at)).length;
     // Decide's head, as ui.css draws it: the title and the light-or-dark button at its right edge; More sits under the list.
     const sel = selecting && canDismiss() && bulk.length && ['waiting', 'designs'].includes(head) && selectHead(bulk);
-    const top = head === 'waiting' && !state.readonly ? el('header', { class: 'ui-top' }, el('h1', { tabindex: '-1', 'data-crumb': pageTitle }, sel ? sel.title : pageTitle), ro ? el('p', { class: 'meta' }, ro) : '', ...(sel ? [sel.all, sel.bar] : [themeButton()]))
+    const top = head === 'waiting' && !state.readonly ? el('header', { class: 'ui-top' }, el('h1', { tabindex: '-1', 'data-crumb': pageTitle }, sel ? sel.title : pageTitle), ro ? el('p', { class: 'meta' }, ro) : '', ...(sel ? [sel.all, sel.bar] : [phone() ? decideSortButton() : '', themeButton()]))
       : el('header', { class: head === 'reports' && !state.readonly ? 'top ui-top rp-top' : head ? 'top' : 'ui-top today-top' }, head && !TABS.some(([a]) => a === head)
       ? el('a', { class: 'back', href: '#' }, '‹ Today') : '',
     ...(head ? [el('h1', { tabindex: '-1' }, pageTitle)] : todayHead()),
@@ -5220,12 +5302,8 @@
       if (!res.ok) throw new Error(body.error);
       banner.hidden = true;
       if (JSON.stringify(body) === JSON.stringify(state)) return;
-      // A redraw keeps the reply box or search being typed in focused, with its caret where it was.
-      const typing = (document.activeElement?.tagName === 'TEXTAREA' || document.activeElement?.id === 'find') && document.activeElement, at = typing && typing.selectionStart;
       state = body;
-      render();
-      const box = typing && document.getElementById(typing.id);
-      if (box) box.focus(), box.setSelectionRange(at, at);
+      renderKeepingFocus();
     } catch (e) { failed(e); }
   }
   if (FROZEN) (state = FROZEN), render();

package/web/manifest.webmanifest

@@ -1,14 +1,18 @@
 {
+  "id": "/",
   "name": "sign-off",
   "short_name": "sign-off",
   "description": "One calm page for every question the programs working for you need answered.",
-  "start_url": "./",
+  "start_url": "/",
+  "scope": "/",
   "display": "standalone",
-  "background_color": "#F5F5F7",
-  "theme_color": "#0071E3",
+  "orientation": "any",
+  "categories": ["productivity"],
+  "background_color": "#E8E4E0",
+  "theme_color": "#E8E4E0",
   "icons": [
-    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
-    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" },
+    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
     { "src": "icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
   ]
 }

package/web/pwa.js

@@ -0,0 +1,55 @@
+// The board as an app: the service worker (sw.js), the line shown while the board is read from the last update, and the install row in Today's More.
+// Loaded by src/cli.ts into the served page only, so an exported copy and the demo carry none of it.
+(() => {
+  if (!('serviceWorker' in navigator)) return;
+  navigator.serviceWorker.register('/sw.js', { scope: '/' }).catch(() => {});
+
+  // The worker answers the state with a marked copy while the board is out of reach; any real answer clears the line.
+  const line = document.createElement('p');
+  line.id = 'offline';
+  line.setAttribute('role', 'status');
+  line.hidden = true;
+  line.textContent = 'Offline, showing the last update';
+  const style = document.createElement('style');
+  style.textContent = '#offline { position: sticky; top: 0; z-index: 30; margin: 0; padding: calc(0.5rem + env(safe-area-inset-top)) 1rem 0.5rem; background: var(--tk-ink); color: var(--tk-canvas); font-size: var(--tk-fs-secondary); text-align: center; } #offline[hidden] { display: none; } #install-app { width: 100%; padding: 0; border: 0; background: none; font-family: inherit; font-size: var(--tk-fs-row); line-height: var(--tk-lh-row); text-align: left; cursor: pointer; }';
+  document.head.append(style);
+  document.body.prepend(line);
+  const real = window.fetch;
+  window.fetch = async (...args) => {
+    const res = await real.apply(window, args);
+    if (new URL(typeof args[0] === 'string' ? args[0] : args[0].url, location.href).pathname === '/api/decisions') line.hidden = res.headers.get('x-sign-off-offline') !== '1';
+    return res;
+  };
+  addEventListener('online', () => real('/api/decisions').then((res) => { if (res.headers.get('x-sign-off-offline') !== '1') line.hidden = true; }, () => {}));
+
+  // Install: Chrome and Edge offer their own prompt once the page is installable; Safari on an iPhone or iPad has no prompt, only the Share menu.
+  let offered;
+  addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); offered = e; });
+  addEventListener('appinstalled', () => { offered = undefined; });
+  const installed = () => matchMedia('(display-mode: standalone)').matches || navigator.standalone === true;
+  const safari = /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+  const row = (tag, words, hint) => {
+    const r = document.createElement(tag), k = document.createElement('span'), v = document.createElement('span'), s = document.createElement('span');
+    r.className = 'ui-pr';
+    k.className = 'k';
+    v.className = 'v';
+    k.textContent = words;
+    s.textContent = hint;
+    v.append(s);
+    r.append(k, v);
+    return r;
+  };
+  /** The row Today's More adds under its links, or nothing once the app is installed or this browser cannot install it. */
+  window.signOffInstall = () => {
+    if (installed()) return '';
+    if (offered) {
+      const b = row('button', 'Install app', 'On this device');
+      b.type = 'button';
+      b.id = 'install-app';
+      b.onclick = async () => { const e = offered; offered = undefined; b.closest('dialog')?.close(); e.prompt(); await e.userChoice; };
+      return wrap(b);
+    }
+    return safari ? wrap(row('div', 'Add to Home Screen', 'In Share')) : '';
+  };
+  const wrap = (r) => { const w = document.createElement('div'); w.className = 'ui-props'; w.append(r); return w; };
+})();

package/web/sw.js

@@ -0,0 +1,57 @@
+// The board's service worker: the page and its files load with no network, and the last state it read is read back, marked, until the board answers again.
+// Writes and answers are never cached or queued: a send with no network fails on the page as it does now. BUILD is put above this file by src/cli.ts.
+const SHELL = `shell-${BUILD}`, DATA = 'state', STATE = '/api/decisions', SAVED = 'x-sign-off-saved', OFFLINE = 'x-sign-off-offline';
+const FILES = /^\/(?:tokens\.css|ui\.css|pwa\.js|inter\.woff2|icon\.svg|apple-touch-icon\.png|icon-(?:192|512|maskable-512)\.png)$/;
+
+self.addEventListener('install', (e) => e.waitUntil((async () => {
+  const shell = await caches.open(SHELL), page = await fetch('/', { cache: 'reload' });
+  if (!page.ok) throw new Error(`The board answered ${page.status}`);
+  // The page names its files, with their content hashes: keep exactly those.
+  const names = [...(await page.clone().text()).matchAll(/(?:href|src)="([^"#]+)"/g)].map((m) => m[1]).filter((n) => FILES.test(`/${n.split('?')[0]}`));
+  await shell.put('/', page);
+  await shell.addAll(names.map((n) => new Request(n, { cache: 'reload' })));
+  await self.skipWaiting();
+})()));
+
+self.addEventListener('activate', (e) => e.waitUntil((async () => {
+  for (const name of await caches.keys()) if (name.startsWith('shell-') && name !== SHELL) await caches.delete(name);
+  await self.clients.claim();
+})()));
+
+/** The state, from the board when it answers; the last good copy, marked, when it cannot be reached. A refused token empties the copy: it is not for this person any more. */
+async function state(request) {
+  const store = await caches.open(DATA);
+  try {
+    const res = await fetch(request);
+    if (res.status === 401 || res.status === 403) await store.delete(STATE);
+    else if (res.ok) await store.put(STATE, new Response(await res.clone().blob(), { headers: { 'content-type': 'application/json', [SAVED]: String(Date.now()) } }));
+    return res;
+  } catch {
+    const kept = await store.match(STATE);
+    if (kept) return new Response(kept.body, { headers: { 'content-type': 'application/json', [SAVED]: kept.headers.get(SAVED), [OFFLINE]: '1' } });
+    return Response.json({ error: 'You are offline and this device has no saved copy of the board yet.' }, { status: 503 });
+  }
+}
+
+/** The page: the board's own when it answers, the kept one otherwise. Only the bare address is kept, so a link's access token is never in a cache key. */
+async function page(request) {
+  const shell = await caches.open(SHELL);
+  try {
+    const res = await fetch(request);
+    if (res.ok) await shell.put('/', res.clone());
+    return res;
+  } catch {
+    return (await shell.match('/')) ?? new Response('You are offline and this device has not opened the board yet.', { status: 503, headers: { 'content-type': 'text/plain; charset=utf-8' } });
+  }
+}
+
+self.addEventListener('fetch', (e) => {
+  const { request } = e, url = new URL(request.url);
+  if (request.method !== 'GET' || url.origin !== self.location.origin) return;
+  if (request.mode === 'navigate' && url.pathname === '/' && !url.search) return e.respondWith(page(request));
+  if (url.pathname === STATE && !url.search) return e.respondWith(state(request));
+  if (FILES.test(url.pathname)) e.respondWith(caches.match(request, { cacheName: SHELL }).then((kept) => kept ?? fetch(request).then((res) => {
+    if (res.ok) caches.open(SHELL).then((c) => c.put(request, res.clone()));
+    return res;
+  })));
+});

package/web/ui.css

@@ -24,6 +24,8 @@
 .dock-find { position: fixed; z-index: 2; left: calc(var(--dock-at) + var(--dock-w) + 0.75rem); bottom: calc(1.5rem + env(safe-area-inset-bottom)); display: grid; place-items: center;
   width: 3.5rem; height: 3.5rem; border-radius: 1.75rem; background: var(--tk-go); color: var(--tk-on-go); box-shadow: var(--tk-elev-go); -webkit-tap-highlight-color: transparent; }
 .dock-find:active { transform: scale(0.94); }
+/* Under the dock the page fades to its ground, so a row or a line never reads half hidden behind it; scrolled to its end, a list clears it by the body's room. */
+body::after { content: ''; position: fixed; z-index: 1; left: 0; right: 0; bottom: 0; height: calc(6.5rem + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) calc(5rem + env(safe-area-inset-bottom)), transparent); pointer-events: none; }
 .dock-find svg, .sfind svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
 
 /* The page's title row: 8px from the top (24px on a desk), a 24px medium title in a 44px row, round 40px buttons at its right edge. */
@@ -105,7 +107,7 @@
    The mark, Search's glass and every area's icon are 20px on one left edge, and the name, Search and every label start on the next one;
    the mark sits on the name's line, centred on it; at the foot, whose board it is with the light-or-dark button. */
 @media (min-width: 64rem) {
-  .tabs, .dock-find { display: none; }
+  .tabs, .dock-find, body::after { display: none; }
   .ui-top { margin-top: 1.5rem; }
   .side { display: flex; flex-direction: column; gap: 0.25rem; position: sticky; top: 0; height: 100vh; padding: 1.5rem 1rem; background: none; }
   .brand { display: flex; align-items: center; gap: 0.75rem; min-height: 2.5rem; margin: 0; padding: 0 0.75rem; color: var(--tk-ink); font-size: var(--tk-fs-body); line-height: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
@@ -231,3 +233,11 @@
   .ui-pane.ask2 > .pbody { flex: 1 1 auto; min-height: 0; padding: 1.25rem 1.5rem 1rem; overflow: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
   .ui-pane.ask2 > .ppin { flex: none; max-height: 65%; padding: 1rem 1.5rem 1.25rem; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; border-top: 1px solid var(--tk-line); }
 }
+
+/* The pending step and receipt beside a composer share the feedback trail's new-look tokens. */
+.ui-send { scroll-margin-block: 4.5rem; margin: 0.5rem 0; color: var(--tk-text-secondary); font-size: var(--tk-fs-meta); line-height: var(--tk-lh-meta); }
+.ui-send[hidden] { display: none; }
+.ui-send button { color: var(--tk-ink); background: none; border: 0; min-height: 2.75rem; text-decoration: underline; }
+[aria-busy="true"] { opacity: 0.65; }
+.foot:has(> .ui-send) { flex-wrap: wrap; }
+:is(.design-review, .dz-info, .design-viewer-panel) .foot > .ui-send { flex: 0 0 100%; }