@bkazemi/verily 0.5.0 → 0.6.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, 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,7 +40,7 @@ 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 { display: inline-block; margin-left: 4px; color: #a15c00; cursor: help; vertical-align: -1.5px; }
   .caution svg { display: block; width: 12px; height: 12px; }
   .bad { color: #b3261e; font-weight: 650; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
   .account { padding: 14px 16px; border: 1px solid #e0e6df; border-radius: 10px; margin-top: 12px; }
@@ -41,6 +49,9 @@ export const styles = `
   /* 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; }
@@ -50,6 +61,15 @@ export const styles = `
   .account.retired > a, .account.retired > strong { color: #6b786f; }
   .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 +84,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 +114,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';
@@ -148,8 +239,13 @@ export function accountCard(heading, name, reference, url, ...extra) {
     if (value instanceof HTMLAnchorElement)
         outward(value, url);
     card.append(title, value);
-    if (reference)
+    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 +257,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 +371,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');
@@ -256,9 +424,10 @@ function signatures(evidence) {
  * 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.
+ * fails, the one thing on a card that is a warning. `warned` is told each time that warning
+ * is drawn, on the first check or on a later one, so whatever folds the card away opens.
  */
-function signedMark(evidence, later) {
+function signedMark(evidence, later, warned) {
     const mark = node('span');
     const link = outward(node('a', 'signed'), `${evidence.evidenceUrl}#signed`);
     const see = 'See the signature (opens in a new tab)';
@@ -270,6 +439,7 @@ function signedMark(evidence, later) {
             // 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);
+            warned();
             return;
         }
         if (first?.state === 'valid' && results.every((result) => result.state === 'valid')) {
@@ -320,12 +490,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 +542,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 +576,24 @@ 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(
     // 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), 
+    externalIdGroups(evidence.external) ?? externalId(evidence.external), externalLink(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 +602,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 +637,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 +654,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 +703,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 +721,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 +736,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 +758,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 +840,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

package/dist/browser/index.js

@@ -1,7 +1,8 @@
+import { accountsOf } from '../core/index.js';
 import { routePath } from '../core/routes.js';
 import { badgeShown, quietBadge, renderBadge, renderBadgeMessage, renderBadgePending, renderConnectPill, } from './badge.js';
 import { openConnectDialog, } from './connect-dialog.js';
-import { openEvidenceDialog } from './evidence-dialog.js';
+import { openEvidenceDialog, subjectUrl, } from './evidence-dialog.js';
 import { drawSignedWith, standing, watchSigned } from './signed.js';
 /**
  * What each host's dialog opens on and how it reads again, kept apart from the pill: the
@@ -91,15 +92,17 @@ function details(element) {
                         throw error;
                 }
             }
-        }, latestGroup.get(element), accounts, managers.get(element));
+        }, latestGroup.get(element), accounts, managers.get(element), openHosts.has(element));
     }
 }
 /**
- * Hosts whose pill is stacked, and hosts whose pill opens no panel, where the page asked
- * for either. Kept here so every later refresh of the host draws it the same way.
+ * Hosts whose pill is stacked, hosts whose pill opens no panel, and hosts whose dialog
+ * starts with its details open, where the page asked for any of them. Kept here so every
+ * later refresh of the host draws it the same way.
  */
 const stackedHosts = new WeakSet();
 const quietHosts = new WeakSet();
+const openHosts = new WeakSet();
 /**
  * How many accounts a pill names before it counts the rest. A stacked pill pays for each
  * row in the page's height. A panel floats over the page and pays nothing, but it cannot
@@ -108,7 +111,11 @@ const quietHosts = new WeakSet();
 const stackedAccounts = 4;
 const peekedAccounts = 8;
 /** Records how a host's pill is arranged, from what the page last said. */
-function arrange(element, { stacked, peek }) {
+function arrange(element, { stacked, peek, detailsOpen }) {
+    if (detailsOpen)
+        openHosts.add(element);
+    else
+        openHosts.delete(element);
     if (stacked)
         stackedHosts.add(element);
     else
@@ -133,45 +140,16 @@ const live = (evidence) => evidence.status === 'verified' && evidence.expiresAt
  * Each entry names every record of the account not yet revoked, shown or not, so removing
  * the account removes them all. One left behind, lapsed or unconfirmed, could be confirmed
  * again later and bring the account back without its holder approving anything.
- *
- * A record from a backend older than `connectedAt` is placed by when it was approved.
  */
 function accounts(records) {
-    const when = (e) => e.connectedAt ?? e.approvedAt;
-    const byAccount = new Map();
-    for (const record of records) {
-        const key = JSON.stringify([record.provider, record.external.id]);
-        byAccount.set(key, [...(byAccount.get(key) ?? []), record]);
-    }
-    return [...byAccount.values()]
-        .map((held) => {
-        const sorted = [...held].sort((a, b) => when(a) - when(b));
-        const verified = sorted.filter(live);
-        const base = verified[0] ?? sorted.reduce((a, b) => (b.approvedAt > a.approvedAt ? b : a));
-        const external = [...base.attestations.external];
-        for (const other of verified.slice(1))
-            for (const attestation of other.attestations.external)
-                if (!external.some((shown) => shown.method === attestation.method))
-                    external.push(attestation);
-        return {
-            ...base,
-            connectedAt: when(sorted[0]),
-            attestations: { ...base.attestations, external },
-            links: sorted.filter((e) => e.status !== 'revoked').map((e) => e.id),
-            // Every record the card speaks for, so its signature mark answers for all of them.
-            sources: verified.length ? verified : [base],
-        };
-    })
-        .sort((a, b) => place(a) - place(b) || a.connectedAt - b.connectedAt);
-}
-/**
- * Where an account is listed among a subject's others, before the order they were
- * connected in. This is all there is to preferring an account: there is no separate pin.
- */
-function place(account) {
-    if (account.status === 'retired')
-        return 3;
-    return account.mark === 'preferred' ? 0 : account.mark === 'unused' ? 2 : 1;
+    return accountsOf(records, Date.now()).map(({ lead, held, verified, external, connectedAt }) => ({
+        ...lead,
+        connectedAt,
+        attestations: { ...lead.attestations, external },
+        links: held.filter((e) => e.status !== 'revoked').map((e) => e.id),
+        // Every record the card speaks for, so its signature mark answers for all of them.
+        sources: verified.length ? verified : [lead],
+    }));
 }
 /**
  * One subject's accounts as a single pill: the first of them, then how many more stand
@@ -198,6 +176,8 @@ function presentGroup(element, records, load) {
     const badge = renderBadge(element, lead, {
         more: Math.max(verified.length - 1, 0),
         linked: lead.visibility === 'public',
+        // A modified click follows the link, and must reach what a plain one shows: every account.
+        ...(ordered.length > 1 ? { href: subjectUrl(lead) } : {}),
         rows: stacked
             ? verified.slice(1, stackedAccounts)
             : peek
@@ -729,6 +709,7 @@ if (typeof customElements !== 'undefined' && !customElements.get('verily-badge')
             'connect',
             'stacked',
             'peek',
+            'details-open',
         ];
         handed;
         /**
@@ -788,6 +769,7 @@ if (typeof customElements !== 'undefined' && !customElements.get('verily-badge')
             const arrangement = {
                 stacked: this.getAttribute('stacked') !== null,
                 peek: this.getAttribute('peek') !== 'off',
+                detailsOpen: this.getAttribute('details-open') !== null,
             };
             // The holder's own badge, where the page says so: its dialog connects another
             // account, renews one and removes one, through the backend named. The host hears