@bkazemi/verily 0.5.0 → 0.7.0

package/dist/browser/evidence-dialog.js

@@ -1,4 +1,4 @@
-import { attestationLabel, externalId, externalLink, externalName, lastProved, localSide, proofTitle, statusLabel, } from '../core/index.js';
+import { attestationLabel, externalId, externalIdGroups, externalLink, externalName, externalSince, lastProved, localSide, proofTitle, statusLabel, } from '../core/index.js';
 import { markStyles, verificationMark } from './mark.js';
 import { providerMark } from './provider-mark.js';
 import { onSignatureResult, signature, standing } from './signed.js';
@@ -19,8 +19,16 @@ export const styles = `
   h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.3px; }
   button { width: 32px; height: 32px; border: 1px solid #dce2de; border-radius: 8px; background: #fff; color: #52645a; font: 20px system-ui, sans-serif; cursor: pointer; }
   button:hover { background: #f2f5f1; }
+  .icon { display: grid; place-items: center; padding: 0; }
+  .icon svg { width: 16px; height: 16px; }
+  .title { display: flex; align-items: center; gap: 6px; min-width: 0; }
+  .all { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #52645a; }
+  .all:hover { background: #f2f5f1; }
+  .all svg { width: 16px; height: 16px; }
   a { color: #245f43; text-underline-offset: 3px; overflow-wrap: anywhere; }
-  a:focus-visible, button:focus-visible { outline: 2px solid #357ce5; outline-offset: 3px; }
+  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #357ce5; outline-offset: 3px; }
+  /* An element given its own display would otherwise go on showing while hidden. */
+  [hidden] { display: none !important; }
   .summary { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
   .mark { width: 36px; height: 36px; flex-shrink: 0; }
   .provider { width: 14px; height: 14px; }
@@ -32,24 +40,45 @@ export const styles = `
   .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
   @keyframes spin { to { transform: rotate(360deg); } }
   @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
-  .caution { display: inline-block; margin-left: 4px; color: #a15c00; cursor: help; vertical-align: middle; }
-  .caution svg { display: block; width: 12px; height: 12px; }
-  .bad { color: #b3261e; font-weight: 650; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
+  /* The "signed" pill after the verifier's name, one size smaller than the line it sits on. */
+  .summary .signed { display: inline-block; margin-left: 5px; padding: 0 6px; border: 1px solid #cfdcd3; border-radius: 999px; font-size: 10px; font-weight: 550; line-height: 1.3; text-decoration: none; vertical-align: 1px; }
+  .summary a.signed:hover { background: #f2f5f1; }
+  .summary .signed.bad { border-color: #b3261e; color: #b3261e; font-weight: 650; cursor: help; }
+  .caution { display: inline-block; margin-left: 3px; color: #a15c00; vertical-align: -1.5px; }
+  .caution svg { display: block; width: 10px; height: 10px; }
   .account { padding: 14px 16px; border: 1px solid #e0e6df; border-radius: 10px; margin-top: 12px; }
   .account h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; color: #6b786f; font-size: 11px; font-weight: 550; }
   .account a, .account strong { font-weight: 650; font-size: 14px; }
   /* The account's own name carries that weight; a link inside a line of prose does not. */
   .summary a, .method a, .additional a { font: inherit; }
   .reference { margin-top: 2px; }
+  /* A fingerprint in fours: it breaks between groups, and copies as one unbroken word. */
+  .fingerprint { font-family: ui-monospace, monospace; text-wrap: balance; }
+  .fingerprint span { display: inline-block; margin-right: .5ch; }
   .method { margin-top: 8px; }
   /* In the corner the heading leaves empty, apart from everything that was checked. */
   .listing { position: absolute; top: 12px; right: 14px; padding: 1px 8px; border: 1px solid #e0e6df; border-radius: 999px; color: #6b786f; font-size: 11px; font-weight: 550; }
   .listing.preferred { border-color: #245f43; color: #245f43; }
   /* Quiet, as its pill is: the surface and the name step back, and the controls do not. */
   .account.retired { background: #f6f8f5; }
-  .account.retired > a, .account.retired > strong { color: #6b786f; }
+  .account.retired > a, .account.retired > strong, .account.retired > .named > a, .account.retired > .named > strong { color: #6b786f; }
+  /* The name, then a dot and the account's creation date. The date wraps under a long name. */
+  /* Clipped 4px left of the text, which hides the dot when the date wraps to a new line. */
+  .named { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; margin-left: -4px; padding-left: 4px; overflow-x: clip; }
+  .since { position: relative; white-space: nowrap; }
+  /* The dot sits in the gap before the date. */
+  .since::before { content: "·"; position: absolute; left: -7px; transform: translateX(-50%); }
   .account.retired .mark { opacity: .45; }
   .group { margin: 20px 0 0; color: #6b786f; font-size: 11px; font-weight: 550; }
+  summary.group { display: flex; align-items: center; gap: 4px; width: fit-content; border-radius: 4px; list-style: none; cursor: pointer; }
+  summary::-webkit-details-marker { display: none; }
+  .fold { display: flex; align-items: center; gap: 4px; width: auto; height: auto; padding: 2px 8px 2px 4px; margin-left: -4px; border: 0; background: none; font: 550 12px/1.6 system-ui, sans-serif; }
+  .fold svg, summary svg { width: 12px; height: 12px; }
+  .fold[aria-expanded="true"] svg, details[open] > summary svg { transform: rotate(90deg); }
+  @media (prefers-reduced-motion: no-preference) { .fold svg, summary svg { transition: transform .15s; } }
+  /* The fold and what the holder may do share a line, until a question needs the whole of it. */
+  .bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+  .account .bar .row { margin: 0 0 0 auto; }
   .additional { margin-top: 2px; padding-left: 12px; }
   .joiner { display: block; width: 20px; height: 20px; margin: 8px auto -4px; color: #90a096; }
   dl { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #e5e9e3; display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; font-size: 11px; }
@@ -64,6 +93,14 @@ export const styles = `
   .row { display: flex; justify-content: end; gap: 8px; margin-top: 16px; }
   .account .row { align-items: center; justify-content: start; flex-wrap: wrap; margin-top: 12px; }
   .account .action { padding: 5px 10px; font-size: 12px; }
+  .account .action.dots { display: grid; place-items: center; align-self: stretch; width: 30px; padding: 0; }
+  .dots svg { width: 16px; height: 16px; }
+  /* Placed under its button each time it opens, above the dialog and clipped by none of it. */
+  .menu { position: fixed; inset: auto; margin: 0; min-width: 170px; padding: 6px; border: 1px solid #dce2de; border-radius: 10px; background: #fff; color: #23312b; box-shadow: 0 12px 40px #10201930; }
+  .menu:popover-open { display: grid; }
+  .account .menu .action { border: 0; border-radius: 6px; padding: 6px 10px; font-weight: 550; }
+  .menu .danger { color: #b3261e; }
+  .menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid #e5e9e3; }
   footer { display: flex; align-items: center; justify-content: start; gap: 6px; margin: 20px 0 -8px; color: #9aa9a0; font-size: 11px; }
   footer a { display: flex; color: inherit; }
   .logo { display: block; height: 13px; }
@@ -86,6 +123,69 @@ export function outward(anchor, url) {
     anchor.target = '_blank';
     return anchor;
 }
+/**
+ * Where the verifier lists every public record of a record's subject. A record whose
+ * address is not the usual one is left linking to itself.
+ */
+export function subjectUrl(e) {
+    const url = new URL(e.evidenceUrl);
+    const path = url.pathname.replace(/\/connections\/[^/]+$/, '/published');
+    if (path === url.pathname)
+        return e.evidenceUrl;
+    url.pathname = path;
+    url.search = `site=${encodeURIComponent(e.siteName)}&reference=${encodeURIComponent(e.local.reference)}`;
+    return url.href;
+}
+/** Opens somewhere else, in a tab of its own: a box with an arrow leaving it. */
+function awayMark() {
+    const namespace = 'http://www.w3.org/2000/svg';
+    const svg = document.createElementNS(namespace, 'svg');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.setAttribute('focusable', 'false');
+    for (const d of [
+        'M14 5h5v5',
+        'M19 5l-8 8',
+        'M18 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h4',
+    ]) {
+        const path = document.createElementNS(namespace, 'path');
+        path.setAttribute('d', d);
+        path.setAttribute('stroke', 'currentColor');
+        path.setAttribute('stroke-width', '2');
+        path.setAttribute('stroke-linecap', 'round');
+        path.setAttribute('stroke-linejoin', 'round');
+        svg.append(path);
+    }
+    return svg;
+}
+/** A small mark of plain strokes, in the surrounding colour. */
+function strokes(box, width, paths) {
+    const namespace = 'http://www.w3.org/2000/svg';
+    const svg = document.createElementNS(namespace, 'svg');
+    svg.setAttribute('viewBox', `0 0 ${box} ${box}`);
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.setAttribute('focusable', 'false');
+    for (const d of paths) {
+        const path = document.createElementNS(namespace, 'path');
+        path.setAttribute('d', d);
+        path.setAttribute('stroke', 'currentColor');
+        path.setAttribute('stroke-width', String(width));
+        path.setAttribute('stroke-linecap', 'round');
+        path.setAttribute('stroke-linejoin', 'round');
+        svg.append(path);
+    }
+    return svg;
+}
+/** Points at what is folded away, and turns to point down once it is open. */
+const foldMark = () => strokes(16, 1.8, ['M6 3.5 10.5 8 6 12.5']);
+/** Three dots: there is more to do here than the buttons beside it. */
+const moreMark = () => strokes(16, 2.4, ['M3 8h.01', 'M8 8h.01', 'M13 8h.01']);
+/** A cross drawn in a square, so it sits in the middle of its button in any font. */
+export const closeMark = () => strokes(16, 1.8, ['M4 4l8 8', 'M12 4l-8 8']);
+/** Points back the way the reader came, drawn for the same reason the cross is. */
+export const backMark = () => strokes(16, 1.8, ['M10 3.5 5.5 8 10 12.5']);
 /** Joins the two cards: the link itself, drawn rather than described. */
 export function linkMark() {
     const namespace = 'http://www.w3.org/2000/svg';
@@ -141,15 +241,41 @@ function moment(time) {
  * expires on its own terms, and a second provider on the same subject would differ.
  */
 export function accountCard(heading, name, reference, url, ...extra) {
+    return side(heading, name, reference, url, undefined, extra);
+}
+/**
+ * The card for an external account: its name, link and id, with the "Joined <date>" text
+ * on the name's line when the creation date is known.
+ */
+export function namedCard(heading, external, ...extra) {
+    return side(heading, externalName(external), 
+    // A mailbox's address or a domain is its name already, so there is no second identifier.
+    externalIdGroups(external) ?? externalId(external), externalLink(external), 
+    // In UTC, so the day matches the one the verifier's own pages print.
+    externalSince(external, (time) => new Date(time).toLocaleDateString(undefined, { dateStyle: 'medium', timeZone: 'UTC' })), extra);
+}
+function side(heading, name, reference, url, since, extra) {
     const card = node('section', '', 'account');
     const title = node('h3');
     const value = node(url ? 'a' : 'strong', name);
     title.append(...heading);
     if (value instanceof HTMLAnchorElement)
         outward(value, url);
-    card.append(title, value);
-    if (reference)
+    if (since) {
+        // The name and the date share a line, and the date wraps under a long name.
+        const named = node('div', '', 'named');
+        named.append(value, node('span', since, 'muted since'));
+        card.append(title, named);
+    }
+    else
+        card.append(title, value);
+    if (typeof reference === 'string')
         card.append(node('div', reference, 'muted reference'));
+    else if (reference) {
+        const groups = node('div', '', 'muted reference fingerprint');
+        groups.append(...reference.map((group) => node('span', group)));
+        card.append(groups);
+    }
     card.append(...extra);
     return card;
 }
@@ -161,12 +287,77 @@ const retiringNote = 'Retiring keeps this record as history. It will no longer r
  * from the status on the card.
  */
 const removable = (evidence) => evidence.links ?? (evidence.status === 'revoked' ? [] : [evidence.id]);
+/**
+ * Everything a holder may do to an account besides renewing it, behind one button. The
+ * menu is a popover, so it is drawn above the dialog and the dialog's scrolling cannot
+ * clip it, the browser shuts it on Escape or a press elsewhere, and its button opens and
+ * shuts it. Nothing where the browser has no popovers, and the choices are then laid out.
+ */
+function actionsMenu(more, choices) {
+    const menu = node('div', '', 'menu');
+    if (typeof menu.showPopover !== 'function')
+        return undefined;
+    const label = 'More actions';
+    more.className = 'action dots';
+    more.title = label;
+    more.setAttribute('aria-label', label);
+    more.setAttribute('aria-haspopup', 'menu');
+    more.append(moreMark());
+    more.popoverTargetElement = menu;
+    menu.setAttribute('popover', 'auto');
+    menu.setAttribute('role', 'menu');
+    for (const choice of choices)
+        choice.setAttribute('role', 'menuitem');
+    // Whatever removes the account sits last and apart from the rest.
+    menu.append(...choices.slice(0, -1), node('hr'), choices.at(-1));
+    const shut = () => {
+        try {
+            if (menu.matches(':popover-open'))
+                menu.hidePopover();
+        }
+        catch {
+            // Gone from the page with its card.
+        }
+    };
+    const gap = 4;
+    const edge = 8;
+    // Under the button and ending where it ends, before it is first painted.
+    menu.addEventListener('beforetoggle', (event) => {
+        if (event.newState !== 'open')
+            return;
+        const at = more.getBoundingClientRect();
+        menu.style.top = `${at.bottom + gap}px`;
+        menu.style.right = `${document.documentElement.clientWidth - at.right}px`;
+    });
+    menu.addEventListener('toggle', (event) => {
+        if (event.newState !== 'open')
+            return;
+        // Over the button where the window ends before the menu does.
+        const { height, bottom } = menu.getBoundingClientRect();
+        if (bottom > innerHeight - edge)
+            menu.style.top = `${Math.max(edge, more.getBoundingClientRect().top - gap - height)}px`;
+        // It does not follow its button, so it does not stay open once the button moves.
+        menu.closest('dialog')?.addEventListener('scroll', shut, { once: true });
+        choices[0].focus();
+    });
+    menu.addEventListener('click', shut);
+    menu.addEventListener('keydown', (event) => {
+        const step = { ArrowDown: 1, ArrowUp: -1 }[event.key];
+        if (!step)
+            return;
+        event.preventDefault();
+        const at = choices.indexOf(event.target);
+        choices[(at + step + choices.length) % choices.length].focus();
+    });
+    return menu;
+}
 /**
  * Under a holder's own account: renewing it, which is showing the same account again, and
  * removing it, which asks once more before it does. A removed link has nothing left to do.
  *
  * An account still in use can also be listed another way, or retired, which asks first as
- * removing does. A retired one is renewed or removed and nothing else.
+ * removing does. Those and removing it are then kept in a menu beside Renew, so the row
+ * stays one line. A retired one is renewed or removed and nothing else.
  */
 function manageRow(evidence, manage) {
     const row = node('div', '', 'row');
@@ -210,7 +401,14 @@ function manageRow(evidence, manage) {
             retire.onclick = retiring;
             listing.push(...(evidence.mark === 'preferred' ? [] : [list('Mark as preferred', 'preferred')]), ...(evidence.mark === 'unused' ? [] : [list('Mark as unused', 'unused')]), ...(evidence.mark === undefined ? [] : [list('Mark as current', 'current')]), retire);
         }
-        row.replaceChildren(renew, ...listing, remove, ...(note ? [node('span', note, 'muted')] : []));
+        const said = note ? [node('span', note, 'muted')] : [];
+        const more = act('');
+        // Two buttons need no menu between them.
+        const menu = listing.length ? actionsMenu(more, [...listing, remove]) : undefined;
+        if (menu)
+            row.replaceChildren(renew, more, menu, ...said);
+        else
+            row.replaceChildren(renew, ...listing, remove, ...said);
     };
     const retiring = () => {
         const cancel = act('Cancel');
@@ -252,36 +450,45 @@ function signatures(evidence) {
         : signature(source)));
 }
 /**
- * Says a record is signed, in a word beside its verifier. The word opens the verifier's
- * own page for the record at what it says of the signature, where the signed record is to be
- * had: nothing is downloaded from the card. The signed record is checked here against the
- * verifier's keys: a tick once it has checked, and a warning in the word's place if it
- * fails, the one thing on a card that is a warning.
+ * The "signed" pill shown after the verifier's name. It links to the signature section of
+ * the verifier's evidence page, where the signed record can be downloaded.
+ *
+ * The signature is checked here against the verifier's keys:
+ * - valid: the pill says "signed"
+ * - not yet checked: the pill carries a warning sign
+ * - invalid: a warning replaces the pill
+ *
+ * `warned` is called every time the invalid warning is drawn, so a folded card can open.
  */
-function signedMark(evidence, later) {
+function signedMark(evidence, later, warned) {
     const mark = node('span');
-    const link = outward(node('a', 'signed'), `${evidence.evidenceUrl}#signed`);
+    const link = outward(node('a', 'signed', 'signed'), `${evidence.evidenceUrl}#signed`);
     const see = 'See the signature (opens in a new tab)';
     const settle = (results) => {
         const first = results[0];
         if (results.some((result) => result.state === 'invalid')) {
-            const warning = node('span', 'invalid signature', 'bad');
+            // Not a link: the page it would open is the one this record failed to match.
+            const warning = node('span', 'bad signature', 'signed bad');
             warning.setAttribute('role', 'alert');
             // What it means, for a reader who has never met a signature, kept off the card.
             warning.title = `This record does not match the signature ${evidence.verifierName} put on it, so it may have been altered. Do not rely on it.`;
-            mark.replaceChildren(document.createTextNode(' · '), warning);
+            mark.replaceChildren(warning);
+            warned();
             return;
         }
         if (first?.state === 'valid' && results.every((result) => result.state === 'valid')) {
-            link.textContent = 'signed ✓';
-            // Names where the keys came from, which is what the tick answers for.
+            // No tick: a signature that checks out is what a reader expects, and the pill is
+            // marked only when it did not. Setting the word again clears a warning sign left in it.
+            link.textContent = 'signed';
+            // Names where the keys came from, which is what the check answers for.
             link.title = `Signature checked in this browser against the keys ${new URL(evidence.evidenceUrl).host} publishes (key ${first.keyId}). ${see}`;
-            mark.replaceChildren(document.createTextNode(' · '), link);
+            mark.replaceChildren(link);
             return;
         }
-        // No verdict was reached. The record is signed and says so, with a warning beside the
-        // word in place of a tick, and why is said on hover. A check that only ran out of time
-        // or could not read what it needed is made again when the dialog next reads.
+        // No verdict was reached. The record is signed and says so, with a warning sign in the
+        // pill, which is all that tells it from one that checked out, and why is said on hover.
+        // A check that only ran out of time or could not read what it needed is made again when
+        // the dialog next reads.
         const why = results.find((result) => result.state === 'unchecked');
         const reason = why?.state === 'unchecked' && why.why === 'timeout'
             ? 'Signature check timed out, retrying.'
@@ -292,8 +499,9 @@ function signedMark(evidence, later) {
         caution.setAttribute('aria-label', reason);
         caution.append(cautionMark());
         link.textContent = 'signed';
+        link.append(caution);
         link.title = `${reason} ${see}`;
-        mark.replaceChildren(document.createTextNode(' · '), link, caution);
+        mark.replaceChildren(link);
         if (why)
             later(() => void signatures(evidence).then(settle));
     };
@@ -320,12 +528,39 @@ function cautionMark() {
     }
     return svg;
 }
+/**
+ * Opens and shuts what a card folds away: how its account was shown, every method of it
+ * together so that none is put ahead of another, and its dates.
+ */
+function foldToggle(folded, fold) {
+    const toggle = node('button', '', 'fold');
+    let shown = fold.open;
+    const set = (open) => {
+        shown = open;
+        for (const part of folded)
+            part.hidden = !open;
+        toggle.setAttribute('aria-expanded', String(open));
+    };
+    toggle.type = 'button';
+    toggle.append(foldMark(), document.createTextNode('Details'));
+    set(fold.open);
+    toggle.onclick = () => {
+        set(!shown);
+        fold.toggle(shown);
+    };
+    return toggle;
+}
 /**
  * One linked account: its state, how it was shown and when, on a card of its own. A
  * subject with several accounts gets one of these each, since a provider authenticates and
  * expires on its own terms and none of that may be read across to another's card.
+ *
+ * Given a `fold`, the card is one of several, read first as a list of accounts: it keeps
+ * how it was shown and its dates behind a toggle, which shares a line with what the holder
+ * may do. Its state, its verifier and what is said of its signature are never folded.
+ * Alone, it shows everything.
  */
-function externalCard(evidence, manage, later = () => { }) {
+function externalCard(evidence, manage, later = () => { }, fold, warned = () => { }) {
     const current = evidence.status === 'verified' && evidence.expiresAt > Date.now();
     const status = statusLabel(evidence, Date.now());
     const provider = evidence.providerName;
@@ -345,7 +580,7 @@ function externalCard(evidence, manage, later = () => { }) {
     else
         attribution.append(document.createTextNode(evidence.verifierName));
     if (evidence.signedUrl)
-        attribution.append(signedMark(evidence, later));
+        attribution.append(signedMark(evidence, later, warned));
     copy.append(node('div', status, 'state'), attribution);
     const retired = evidence.status === 'retired';
     // A retired account claims nothing now, which is not the same as a claim that failed.
@@ -379,16 +614,22 @@ function externalCard(evidence, manage, later = () => { }) {
         dates.append(node('dt', label), node('dd', moment(time)));
     }
     const names = { site: evidence.siteName, provider };
+    const row = manage && removable(evidence).length ? [manageRow(evidence, manage)] : [];
+    const bar = node('div', '', 'bar');
+    const methods = [
+        ...attestationNote(main, names),
+        ...evidence.attestations.external.slice(1).flatMap((a) => attestationNote(a, names, true)),
+    ];
+    if (fold)
+        bar.append(foldToggle([...methods, dates], fold), ...row);
     const logo = providerMark(evidence.provider, evidence.attestations.external[0].method);
-    const card = accountCard(
+    const card = namedCard(
     // The mark and the name, or just the name. A mark that falls back to writing the name
     // would print it twice here, since this heading writes it either way.
-    logo ? [logo, document.createTextNode(provider)] : [document.createTextNode(provider)], externalName(evidence.external), 
-    // A mailbox's address or a domain is its name already, so there is no second identifier.
-    externalId(evidence.external), externalLink(evidence.external), 
+    logo ? [logo, document.createTextNode(provider)] : [document.createTextNode(provider)], evidence.external, 
     // Status first, then how it was shown, then when. The proof explains the state
     // above it, so it cannot sit before that state has been given.
-    summary, ...attestationNote(main, names), ...evidence.attestations.external.slice(1).flatMap((a) => attestationNote(a, names, true)), 
+    summary, ...(fold ? [] : methods), 
     // How the holder lists the account, in their words and apart from how it was shown:
     // nothing checked it, so it is never among the methods above it.
     ...(evidence.status === 'revoked' || retired
@@ -397,7 +638,7 @@ function externalCard(evidence, manage, later = () => { }) {
             ? [node('div', 'Preferred', 'listing preferred')]
             : evidence.mark === 'unused'
                 ? [node('div', 'No longer used', 'listing')]
-                : []), dates, ...(manage && removable(evidence).length ? [manageRow(evidence, manage)] : []));
+                : []), ...(fold ? [bar, ...methods, dates] : [dates, ...row]));
     const surface = retired ? 'account retired' : 'account';
     card.className = surface;
     // A signed record is not read, or acted on, before its signature has been checked: until
@@ -432,10 +673,11 @@ function addRow(manage) {
 }
 /**
  * The subject once, then each account linked to it on its own card, in the order given.
- * Retired accounts sit in a group of their own at the foot, under what says they are.
- * Every record given is of the one subject, which the caller has checked.
+ * Retired accounts sit in a group of their own at the foot, under what says they are,
+ * shut until it is opened unless no other account is left to read. Every record given is
+ * of the one subject, which the caller has checked.
  */
-function render(content, records, manage, later) {
+function render(content, records, manage, later, folds = { open: false, cards: new Set() }) {
     const [first] = records;
     // Each card says what it is. Without that the pair is two unlabelled boxes.
     const local = localSide(first.local, first.siteName);
@@ -448,14 +690,33 @@ function render(content, records, manage, later) {
         provider: first.providerName,
     }));
     const retired = records.filter((record) => record.status === 'retired');
-    content.replaceChildren(localCard, linkMark(), ...records
-        .filter((record) => record.status !== 'retired')
-        .map((record) => externalCard(record, manage, later)), ...(manage ? [addRow(manage)] : []), ...(retired.length
-        ? [
-            node('h3', 'Retired accounts', 'group'),
-            ...retired.map((record) => externalCard(record, manage, later)),
-        ]
-        : []), 
+    const listed = records.filter((record) => record.status !== 'retired');
+    // A card alone in its group has room for its dates. Among others it folds them.
+    const cards = (among, warned) => among.map((record) => {
+        const key = `${record.provider}\n${record.external.id}`;
+        return externalCard(record, manage, later, among.length > 1
+            ? {
+                open: folds.cards.has(key) !== folds.open,
+                toggle: (open) => void (open === folds.open ? folds.cards.delete(key) : folds.cards.add(key)),
+            }
+            : undefined, warned);
+    });
+    const history = node('details', '', 'history');
+    const count = node('summary', '', 'group');
+    count.append(foldMark(), document.createTextNode(`Retired accounts (${retired.length})`));
+    // A signature that fails is a warning, and a warning is not left behind a fold.
+    history.append(count, ...cards(retired, () => {
+        history.open = true;
+    }));
+    // Shut to keep history out of the way of the accounts in use. With none of those there
+    // is nothing else to read, so it starts open.
+    history.open = folds.retired ?? !listed.length;
+    // Pressing the heading is the reader's choice, and is kept. It is heard before the
+    // group turns, so what it will be is the opposite of what it is.
+    count.addEventListener('click', () => {
+        folds.retired = !history.open;
+    });
+    content.replaceChildren(localCard, linkMark(), ...cards(listed), ...(manage ? [addRow(manage)] : []), ...(retired.length ? [history] : []), 
     // Nothing below the cards may name a provider. Approval, method and dates belong to
     // the card they came from, and a second provider on this subject gets its own card.
     node('p', 'Verification does not guarantee legal identity, trustworthiness, or permanent ownership.', 'muted explanation'));
@@ -478,7 +739,12 @@ arrange = (records) => records,
  * Given where whoever is looking holds these accounts: each then has its renewal and
  * removal under it, and the dialog offers to connect another.
  */
-manage) {
+manage, 
+/**
+ * Whether the cards of several accounts start with their details open. They start shut
+ * unless the page asked otherwise, and a reader may turn each either way from there.
+ */
+detailsOpen = false) {
     const existing = openDialogs.get(opener);
     if (existing?.open) {
         existing.focus();
@@ -491,7 +757,11 @@ manage) {
     root.adoptedStyleSheets = [sheet];
     const dialog = node('dialog');
     const heading = node('h2', 'Verification details');
-    const close = node('button', '×');
+    const close = node('button', '', 'icon');
+    // Every account on a page of its own, on the verifier. It sits by the heading it widens,
+    // and only where there is more than one account to list.
+    const all = node('a', '', 'all');
+    const title = node('div', '', 'title');
     const header = node('header');
     // What drew the record, under it. The record is about the pair, not about us.
     const stamp = node('footer');
@@ -502,7 +772,12 @@ manage) {
     close.setAttribute('aria-label', 'Close verification details');
     content.setAttribute('aria-live', 'polite');
     stamp.append(stampLink(), node('span', version));
-    header.append(heading, close);
+    all.append(awayMark());
+    close.append(closeMark());
+    // The close was the first thing in the dialog to take the focus, and still is.
+    close.autofocus = true;
+    title.append(heading);
+    header.append(title, close);
     dialog.append(header, content, stamp);
     /** Links removed from this dialog, shown as removed before the page hands over new records. */
     const removed = new Map();
@@ -519,6 +794,8 @@ manage) {
     /** How each record given reads now, by its id. */
     const listings = (given) => new Map([given].flat().map((record) => [record.id, listing(record)]));
     let held;
+    /** What has been opened in this dialog, which outlasts every redraw of its cards. */
+    const folds = { open: detailsOpen, cards: new Set() };
     /** A record as the listings made here leave it, each applied as the backend applies it. */
     const relisted = (evidence) => {
         let record = evidence;
@@ -599,13 +876,22 @@ manage) {
             .map((e) => removed.has(e.id) && e.status !== 'revoked'
             ? { ...e, status: 'revoked', revokedAt: removed.get(e.id) }
             : relisted(standing(e))));
+        const listable = records.filter((e) => e.visibility === 'public' && e.status !== 'revoked');
+        // In the header only while it leads somewhere: an anchor with no address is not a link.
+        title.replaceChildren(heading, ...(listable.length > 1 ? [all] : []));
+        if (listable.length > 1) {
+            const label = `View all on ${listable[0].verifierName} (opens in a new tab)`;
+            outward(all, subjectUrl(listable[0]));
+            all.title = label;
+            all.setAttribute('aria-label', label);
+        }
         const key = JSON.stringify(records.map((e) => [e, statusLabel(e, Date.now())]));
         if (key === drawn)
             return;
         drawn = key;
         // The cards are new, and what the old ones were waiting to try again went with them.
         retries.clear();
-        render(content, records, actions, (retry) => retries.add(retry));
+        render(content, records, actions, (retry) => retries.add(retry), folds);
     };
     /**
      * Redraws at the moment the next record runs out, where that comes before the next check

package/dist/browser/index.d.ts

@@ -1,4 +1,4 @@
-import type { Evidence } from '../core/index.js';
+import { type Evidence } from '../core/index.js';
 import { type Listing } from './evidence-dialog.js';
 export type { Evidence } from '../core/index.js';
 export interface Result {
@@ -14,6 +14,12 @@ export interface Arrangement {
      * the keyboard is on it. On unless this is false. A stacked pill has nothing to open.
      */
     peek?: boolean;
+    /**
+     * Whether the dialog's cards start with their details open: how each account was shown,
+     * and its dates. With several accounts they start shut unless this is true. A reader may
+     * open or shut each either way.
+     */
+    detailsOpen?: boolean;
 }
 /**
  * Presents records the page already holds, without asking any backend for them. This is