@bkazemi/verily 0.1.0 → 0.3.0

package/README.md

@@ -16,7 +16,7 @@
   <img src="docs/images/badge.png" alt="A profile card with a Verily badge showing a GitHub account" width="480" />
 </p>
 
-Verily is a self-hosted library for Node.js. A signed-in user of your site proves they control an external account, by signing in with GitHub, publishing a gist, linking back with `rel="me"`, or signing with an OpenPGP key. They approve the connection, and Verily publishes it as a record anyone can inspect, with a badge for their profile.
+Verily is a self-hosted library for Node.js. A signed-in user of your site proves they control an external account, by signing in with GitHub, Discord or YouTube, publishing a gist, linking back with `rel="me"`, signing with an OpenPGP key, or answering a mailed link. They approve the connection, and Verily publishes it as a record anyone can inspect, with a badge for their profile.
 
 It doesn't sign anyone into your site, and it doesn't establish legal identity.
 
@@ -86,15 +86,15 @@ const verily = createVerily({
 });
 ```
 
-| Option           | Meaning                                                                                             |
-| ---------------- | --------------------------------------------------------------------------------------------------- |
-| `provider`       | How users prove an external account. One provider or an array; see [Proof methods](#proof-methods). |
-| `baseUrl`        | The public URL you mount Verily at. Every route it serves is under this path.                       |
-| `siteName`       | Your site's name, shown on evidence.                                                                |
-| `verifierName`   | Who vouches for the record, shown on evidence. Usually the backend's domain.                        |
-| `profileOrigins` | The origins a local `profileUrl` may be on.                                                         |
-| `reportUrl`      | Where readers report a bad record (`https:` or `mailto:`).                                          |
-| `authenticate`   | Returns the signed-in local account for a request, or `undefined` if nobody is signed in.           |
+| Option           | Meaning                                                                                   |
+| ---------------- | ----------------------------------------------------------------------------------------- |
+| `providers`      | How users prove an external account, as a list; see [Proof methods](#proof-methods).      |
+| `baseUrl`        | The public URL you mount Verily at. Every route it serves is under this path.             |
+| `siteName`       | Your site's name, shown on evidence.                                                      |
+| `verifierName`   | Who vouches for the record, shown on evidence. Usually the backend's domain.              |
+| `profileOrigins` | The origins a local `profileUrl` may be on.                                               |
+| `reportUrl`      | Where readers report a bad record (`https:` or `mailto:`).                                |
+| `authenticate`   | Returns the signed-in local account for a request, or `undefined` if nobody is signed in. |
 
 Sign-in methods need an app registered with the provider, and each site running Verily registers its own. The callback URL is always `<baseUrl>/callback`, so for `baseUrl: 'https://example.com/api/verily'` it is `https://example.com/api/verily/callback`. The provider redirects only to URLs registered in advance, so each place you run Verily, a local one for development included, needs its callback registered.
 
@@ -145,7 +145,7 @@ import { init } from '@bkazemi/verily'; // also registers <verily-badge>
 const client = init({ backendUrl: '/api/verily' });
 ```
 
-Without one, serve `node_modules/@bkazemi/verily/dist/verily.js` yourself, or load it from a CDN such as `https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.1.0/dist/verily.js`. The script defines a global `Verily`.
+Without one, serve `node_modules/@bkazemi/verily/dist/verily.js` yourself, or load it from a CDN such as `https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.3.0/dist/verily.js`. The script defines a global `Verily`.
 
 Then place the badge wherever the account appears:
 
@@ -168,6 +168,8 @@ A user with several accounts gets one badge for all of them. Give it every conne
 
 It shows the account that was connected first, then how many more there are, such as `+2`. Clicking it opens the same details, with each account on its own card in the order they were connected. Only accounts that are verified now are counted, and one of those leads if the first has lapsed. An account that appears on more than one record, because it was shown a second way or removed and connected again, is shown once. The ids must all belong to the same user.
 
+A holder can change that order. The account they mark as preferred comes first and leads the badge, and the ones they mark as unused come after the rest; an unused account is still verified and still counted. An account they retire is kept as history: it is never counted, sits in a group of its own at the foot of the details, and reads as retired with the date it was last verified. A badge with nothing but retired accounts is a quiet pill that names the first and opens the same details. If you would rather show nothing, leave retired records out of what you give the badge.
+
 On a desktop, resting the pointer on that badge, or reaching it with the keyboard, opens a small panel beside it naming the accounts the number stands for: up to eight, then the rest as a count. The panel floats over the page, so nothing moves, and clicking still opens the details. It needs a browser with the Popover API; without one the badge simply has no panel. Add `peek="off"` to the badge to leave it out.
 
 Add `stacked` to name the accounts in the badge itself, one to a row:
@@ -189,8 +191,11 @@ await client.openConnect(); // the connect dialog; call from a click
 await client.connect({ provider: 'github' }); // opens <baseUrl>/verify in a popup; call from a click
 await client.mountBadge(element, { connectionId }); // draws once; call again to refresh
 await client.disconnect(connectionId);
+await client.mark(connectionId, 'preferred'); // or 'unused', 'current', 'retired'
 ```
 
+`mark` names one record and acts on the account, on every record of it the user has. Preferring one account takes the mark from whichever had it. Retiring freezes the records at their last proof: they are never rechecked, never read as verified, cannot change visibility, and are kept until removed. Only a renewal by the method a record was first shown by brings it back.
+
 To match your site's look, set any of these CSS variables on an ancestor: `--verily-surface`, `--verily-text`, `--verily-border`, `--verily-muted`, `--verily-hover`, `--verily-font-family`, `--verily-font-size`.
 
 ## Proof methods
@@ -207,18 +212,18 @@ import {
 } from '@bkazemi/verily';
 ```
 
-| Provider               | The user proves it by                                                                 | Setup                                   |
-| ---------------------- | ------------------------------------------------------------------------------------- | --------------------------------------- |
-| `githubProvider()`     | signing in with GitHub.                                                               | A GitHub OAuth app.                     |
-| `discordProvider()`    | signing in with Discord.                                                              | A Discord application.                  |
-| `youtubeProvider()`    | signing in with Google and choosing their YouTube channel.                            | A Google OAuth client.                  |
-| `githubGistProvider()` | publishing a public gist containing a line Verily gives them.                         | None.                                   |
-| `linkProvider()`       | adding a `rel="me"` link to their profile on a page they control.                     | The local account needs a `profileUrl`. |
-| `githubLinkProvider()` | putting their profile URL in the website field of their GitHub profile.               | The local account needs a `profileUrl`. |
-| `pgpProvider()`        | signing a line Verily gives them with their OpenPGP key, then pasting it and the key. | None.                                   |
-| `emailProvider()`      | entering a code Verily mails to their address.                                        | A function that sends one message.      |
+| Provider               | The user proves it by                                                                                        | Setup                                   |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------ | --------------------------------------- |
+| `githubProvider()`     | signing in with GitHub.                                                                                      | A GitHub OAuth app.                     |
+| `discordProvider()`    | signing in with Discord.                                                                                     | A Discord application.                  |
+| `youtubeProvider()`    | signing in with Google and choosing their YouTube channel.                                                   | A Google OAuth client.                  |
+| `githubGistProvider()` | publishing a public gist containing a line Verily gives them.                                                | None.                                   |
+| `linkProvider()`       | adding a `rel="me"` link to their profile on a page they control.                                            | The local account needs a `profileUrl`. |
+| `githubLinkProvider()` | putting their profile URL in the website field of their GitHub profile, then entering their GitHub username. | The local account needs a `profileUrl`. |
+| `pgpProvider()`        | signing a line Verily gives them with their OpenPGP key, then pasting it and the key.                        | None.                                   |
+| `emailProvider()`      | pressing a button, or entering a code, that Verily mails to their address.                                   | A function that sends one message.      |
 
-All methods except the sign-ins and the mailed code let the user publish the proof in their own time and come back. Gists and link-backs can be taken down later, so Verily re-reads them on a schedule. A PGP signature is kept by Verily and published at `<baseUrl>/connections/<id>/proof`.
+All methods except the sign-ins and the mailed code let the user publish the proof in their own time and come back. A proof that does not check out can be put right and handed back on the same step, up to five times, so a mistyped address never means publishing or signing again. Gists and link-backs can be taken down later, so Verily re-reads them on a schedule. A PGP signature is kept by Verily and published at `<baseUrl>/connections/<id>/proof`.
 
 **Several at once.** List more than one, and `/verify` offers each method as its own button:
 
@@ -228,8 +233,16 @@ providers: [githubProvider({ clientId, clientSecret }), githubLinkProvider()],
 
 Proving the same account a second way adds that proof to the existing record instead of creating another.
 
+**Approval only where there is something to decide.** A new connection always ends with the user choosing who can read it and confirming. Renewing a connection, or proving an account already linked a second way, does not: the account has been checked against the record and the record keeps its visibility, so it is recorded as soon as the proof checks out. This applies to flows started from your own pages, which is every flow the dialog and Verily's forms start. A flow entered by following a link to `GET <baseUrl>/sessions` still ends on an approval, because any site can send a browser down a link.
+
+**A link-back found at sign-in.** With `githubProvider()` and `githubLinkProvider()` both listed, signing in with GitHub also reads the profile that signed in. If its website field already links to the user's `profileUrl`, the approval step says so, and confirming records the link-back beside the sign-in. The user never picks the second method or types a username. A link with `http://` in place of `https://` counts; a different host, port or path does not.
+
 **Link-backs.** Many people already have one, since GitHub and Mastodon mark profile links `rel="me"`. By default the page may be on any public host, and the account is named by the page's address. This mode needs Node, because Verily checks every connection it makes to stop the page's address from pointing inside your network. Pass `hosts` to read only certain hosts (required on Cloudflare Workers), and `profile` to name the account by handle, as `githubLinkProvider()` does for github.com. If you pass your own `fetch`, it replaces that network check, so it must enforce the same rule itself. Only real `<a>` and `<link>` elements in HTML pages, or a `Link:` header, count; [`src/server/link.ts`](src/server/link.ts) has the exact rules.
 
+**Your own method.** A provider is an object, and [`src/core/index.ts`](src/core/index.ts) documents each shape. An artifact provider may also set `field` and `input` to name what it asks for, `resolve` to turn something short such as a username into the address to read, and `known` to say where to look for an account already on record, which is what lets a proof be found without asking. A sign-in provider's `authorizationUrl` is passed `account` on a renewal or visibility change, so it can ask for that account by name.
+
+If you start flows by calling `service.start()` yourself, pass `true` as its last argument only where you have shown the request came from the user's own page, as a same-origin POST does. Without it the flow reads nothing at its start and always ends on an approval.
+
 **OpenPGP.** The key's fingerprint is the identity. An email address is shown only when the key signed it **and** either keys.openpgp.org has confirmed it or the address's domain publishes the key in its [web key directory](https://datatracker.ietf.org/doc/draft-koch-openpgp-webkey-service/). The key must be valid when the proof is checked (not expired or revoked), SHA-1 signatures are refused, and a signing subkey must be properly bound to its key.
 
 **Email.** Verily sends no mail itself. Give `emailProvider()` a `send` function and it hands that one message per flow, written as both HTML and plain text, through whatever already sends your mail:
@@ -256,7 +269,7 @@ emailProvider({
 
 The HTML loads nothing from anywhere, so nothing in it is blocked and it tells nobody it was opened. Its one image, the Verily logo, is attached to the message; a sender that drops `images` still sends a whole message, with the word in the logo's place.
 
-The user types an address and Verily mails it a button to press, with an eight-character code beneath it as the other way in. The button opens a page on your backend, in whatever browser the mail is read in, and pressing **Confirm** there proves the mailbox; the page the user started on then carries on to the approval. Opening the link alone confirms nothing, so a mail scanner that follows links cannot answer for anyone. Both the link and the code last the flow's ten minutes, and the code gets five tries. The address is the account's name on the record, so a public link shows it to everyone; the user is told before the code is sent. It proves somebody could read that mailbox on the day, like a sign-in, and nothing is published or re-read later.
+The user types an address and Verily mails it a button to press, with an eight-character code beneath it as the other way in. The button opens a page on your backend, in whatever browser the mail is read in. In the browser that started the flow, opening it proves the mailbox, with nothing more to press. In any other browser the page asks for one press of **Confirm**, because there opening the link alone must confirm nothing: a mail scanner that follows links cannot then answer for anyone. Either way the page the user started on carries on by itself. Both the link and the code last the flow's ten minutes, and the code gets five tries. The address is the account's name on the record, so a public link shows it to everyone; the user is told before the code is sent. It proves somebody could read that mailbox on the day, like a sign-in, and nothing is published or re-read later.
 
 A visitor chooses where the message goes, so Verily counts what it sends: at most 100 messages in any twenty-four hours, and at most 5 to any one address. Past either, the flow fails and tells the user to try again tomorrow. Set `sendLimits: { day, address }` beside `providers` to change them, or `Infinity` to lift one. The day's count is shared, so one visitor can still spend it; rate limit `POST <baseUrl>/sessions` and `POST <baseUrl>/flows/*/submit` as well.
 
@@ -280,7 +293,7 @@ A static site only needs the script and the badge markup; the backend runs somew
 4. Add the script and the badge to your site:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.1.0/dist/verily.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.3.0/dist/verily.js" defer></script>
 <verily-badge
   backend-url="https://your-backend.example/api/verily"
   connection-id="CONNECTION_ID"
@@ -353,7 +366,7 @@ Once a user has a link, show their badge in place of the pill, and give it the s
 ></verily-badge>
 ```
 
-The badge's dialog then has Renew and Remove under each account, and Add account below them, which opens the verify flow in the dialog's place with a way back. It fires `verily-result` on each change. `verily.beginUrl('manage')` still opens a user's links on the instance, for a site that would rather link there.
+The badge's dialog then has Renew and Remove under each account, the controls that mark it as preferred or unused or retire it, and Add account below them, which opens the verify flow in the dialog's place with a way back. Renew shows the same account again and extends that record under its id, so an embed that names it keeps working. A retired account is renewed by the method it was first shown by. It fires `verily-result` on each change. `verily.beginUrl('manage')` still opens a user's links on the instance, for a site that would rather link there.
 
 **3. Read connections where you show them.**
 
@@ -362,6 +375,8 @@ const { [user.id]: connections } = await verily.connections([user.id]);
 const verified = connections.filter((c) => c.status === 'verified');
 ```
 
+Show only `verified` records as verified. A `retired` record is an account the user said is finished: it carries `retiredAt` and can be shown as history, never as a current account. `mark` is `preferred` or `unused` where the user set one, which is their word on how to order their accounts and nothing that was checked.
+
 To show them, hand the records to the badge. It draws them as given and fetches nothing, so it works for unlisted links, which a browser cannot read for itself:
 
 ```html
@@ -419,7 +434,7 @@ createVerily({
 
 With a key set:
 
-- **`GET <baseUrl>/connections/<id>?format=signed`** returns the signed file for a public record that is currently verified: the record as JSON under an OpenPGP cleartext signature. It is signed when asked for, so it says the record stood at that moment. An unlisted, revoked or expired record has no signed form.
+- **`GET <baseUrl>/connections/<id>?format=signed`** returns the signed file for a public record that is currently verified: the record as JSON under an OpenPGP cleartext signature. It is signed when asked for, so it says the record stood at that moment. An unlisted, revoked or expired record has no signed form. A public retired record has one, signed as `version: 2` with `status: "retired"` and `retiredAt`, so a reader that knows only version 1 refuses it and never takes it for a record that stood.
 - **`GET <baseUrl>/keys.asc`** is the public key as `gpg --import` reads it. **`GET <baseUrl>/keys`** lists the same keys as JSON, each with its fingerprint. The Cloudflare Worker also serves that list at `/.well-known/verily-keys.json`.
 - **`<baseUrl>/check`** is a page where a saved file can be pasted and read back.
 - The evidence page says the record is signed and links to the signed record. The badge's dialog checks the signature in the browser with OpenPGP.js, which it starts only when a record is signed, marks the record `signed ✓`, and links to that page. A record whose signature fails is shown as unconfirmed.
@@ -467,7 +482,7 @@ setInterval(
 );
 ```
 
-- **`prune()`** deletes expired flows, and deletes expired or revoked records after 90 days.
+- **`prune()`** deletes expired flows, and deletes expired or revoked records after 90 days. A retired record is kept until it is removed.
 - **`recheck()`** re-reads gists and link-backs that are due, up to 5 per run (its `budget` argument). Each proof is re-read every 24 hours (`recheckMs`) and stays current for 7 days after its last successful read (`freshnessMs`); after that it shows as unconfirmed until a read succeeds. A failed read changes nothing. For PGP, it asks the keyserver whether the key has been revoked, and revokes the connection if so.
 
 **If you never call `recheck()`, set `freshnessMs: Infinity`.** Otherwise connections proved by gist, link-back or PGP lapse after a week.

package/dist/browser/badge.js

@@ -1,5 +1,5 @@
 import { externalName, statusLabel } from '../core/index.js';
-import { clockMark, dashMark, markStyles, paintMark, verificationMark } from './mark.js';
+import { boxMark, clockMark, dashMark, markStyles, paintMark, verificationMark } from './mark.js';
 import { providerMark } from './provider-mark.js';
 const styles = `
   :host { display: inline-block; max-width: 100%; vertical-align: middle; }
@@ -53,7 +53,9 @@ const styles = `
   .peek .via { display: block; margin-top: 6px; font-size: 11px; color: var(--verily-muted, #65726c); }
   .provider { display: block; flex-shrink: 0; width: 14px; height: 14px; }
   .expired .icon { color: #815a12; background: #fbefce; }
-  .revoked .icon, .message .icon { color: #626d69; background: #edf0ee; }
+  .revoked .icon, .retired .icon, .message .icon { color: #626d69; background: #edf0ee; }
+  /* Nothing ran out and nothing wants attention: the holder chose this, so it is only quiet. */
+  .retired .name { color: var(--verily-muted, #65726c); }
   .message { color: var(--verily-muted, #65726c); }
   .add { font-weight: 600; }
   @media (prefers-reduced-motion: no-preference) {
@@ -227,7 +229,14 @@ export function renderBadgeMessage(element, message) {
 export function renderBadge(element, evidence, { more = 0, linked = true, rows = [], peek = false, } = {}) {
     const provider = evidence.providerName;
     const current = evidence.status === 'verified' && evidence.expiresAt > Date.now();
-    const state = current ? 'verified' : evidence.status === 'revoked' ? 'revoked' : 'expired';
+    const retired = evidence.status === 'retired';
+    const state = current
+        ? 'verified'
+        : retired
+            ? 'retired'
+            : evidence.status === 'revoked'
+                ? 'revoked'
+                : 'expired';
     const label = statusLabel(evidence, Date.now());
     const key = renderKey(evidence, current, label, more, linked, rows, peek);
     if (intact(element) && shown.get(element) === key)
@@ -237,7 +246,9 @@ export function renderBadge(element, evidence, { more = 0, linked = true, rows =
     const unnamed = Math.max(more - rows.length, 0);
     const named = rows.map((row) => `, ${row.providerName} ${externalName(row.external)}`).join('');
     const others = `${named}${unnamed ? ` and ${unnamed} more` : ''}`;
-    paintMark(mark, current ? 'current' : 'inactive');
+    // A retired account claims nothing now, so its mark is drawn as one waiting to be read
+    // is: in the page's text colour, and not as a verification that failed.
+    paintMark(mark, current ? 'current' : retired ? 'pending' : 'inactive');
     if (linked) {
         badge.href = evidence.evidenceUrl;
         badge.rel = 'noreferrer';
@@ -282,7 +293,7 @@ export function renderBadge(element, evidence, { more = 0, linked = true, rows =
     }
     if (!current) {
         const icon = span('icon', '');
-        icon.append(state === 'expired' ? clockMark() : dashMark());
+        icon.append(retired ? boxMark() : state === 'expired' ? clockMark() : dashMark());
         icon.setAttribute('aria-hidden', 'true');
         badge.append(span('label', label), icon);
     }

package/dist/browser/connect-dialog.d.ts

@@ -30,6 +30,12 @@ export interface FlowView {
     instructions?: Instruction[];
     artifact?: 'location' | 'document';
     field?: string;
+    /** How a `location` is asked for. Absent, from an older backend, means an address. */
+    input?: 'url' | 'text';
+    /** What to offer in the field, where a record of the holder's already says. */
+    suggested?: string;
+    /** Said where what was last handed back was refused and the flow still waits for it. */
+    refused?: string;
     note?: string;
     /**
      * A mailed code: what to ask the holder for, and once a code has gone, where it went,
@@ -47,6 +53,8 @@ export interface FlowView {
     joined?: {
         visibility: 'public' | 'unlisted';
     };
+    /** Said where the method used found another proof standing, which confirming records too. */
+    standingNote?: string;
     /** What the holder may choose. Absent, from an older backend, means either. */
     visibilities?: ('public' | 'unlisted')[];
     /** Said beside the public choice, where the backend signs its public records. */
@@ -56,7 +64,8 @@ export interface FlowView {
 }
 export interface ConnectApi {
     methods(): Promise<Methods>;
-    start(provider: string, method: string): Promise<FlowView>;
+    /** Starts a flow by one method: a new link, or a renewal of the record `renew` names. */
+    start(provider: string, method: string, renew?: string): Promise<FlowView>;
     read(id: string): Promise<FlowView>;
     submit(id: string, artifact: string): Promise<FlowView>;
     approve(id: string, visibility: 'public' | 'unlisted', cancel: boolean): Promise<Result>;
@@ -79,5 +88,15 @@ export declare function openConnectDialog(opener: HTMLElement, api: ConnectApi,
  */
 back?: () => void, 
 /** The provider to start on, where the holder already said which account they mean. */
-provider?: string): Promise<Result>;
+provider?: string, 
+/**
+ * The record to renew, where the holder asked to show one of their accounts again: each
+ * flow started then extends that record under its id. `method` is the one method that
+ * may, for a retired record. Where the holder is not offered it, a new link is the way
+ * back, and the dialog connects as it would with no record named.
+ */
+renew?: {
+    id: string;
+    method?: string;
+}): Promise<Result>;
 export {};

package/dist/browser/connect-dialog.js

@@ -1,7 +1,6 @@
 import { externalLink, externalName } from '../core/index.js';
-import { accountCard, linkMark, node, outward, styles } from './evidence-dialog.js';
+import { accountCard, linkMark, node, outward, stampLink, styles } from './evidence-dialog.js';
 import { providerMark } from './provider-mark.js';
-import { verilyLogo } from './logo.js';
 import { version } from '../version.js';
 const connectStyles = `
   ${styles}
@@ -91,7 +90,14 @@ export function openConnectDialog(opener, api,
  */
 back, 
 /** The provider to start on, where the holder already said which account they mean. */
-provider) {
+provider, 
+/**
+ * The record to renew, where the holder asked to show one of their accounts again: each
+ * flow started then extends that record under its id. `method` is the one method that
+ * may, for a retired record. Where the holder is not offered it, a new link is the way
+ * back, and the dialog connects as it would with no record named.
+ */
+renew) {
     const existing = openDialogs.get(opener);
     if (existing?.open) {
         existing.focus();
@@ -113,7 +119,7 @@ provider) {
     close.type = 'button';
     close.setAttribute('aria-label', 'Close');
     content.setAttribute('aria-live', 'polite');
-    stamp.append(verilyLogo(), node('span', version));
+    stamp.append(stampLink(), node('span', version));
     header.append(heading, close);
     dialog.append(header, content, stamp);
     root.append(dialog);
@@ -208,7 +214,11 @@ provider) {
         }
         if (!current(asked))
             return;
-        const all = methods.methods;
+        // A record's renewal stays on its provider, by the one method named where one is.
+        const renewing = methods.methods.filter((m) => m.provider === provider && (renew?.method === undefined || m.method === renew.method));
+        if (renew && !renewing.length)
+            renew = undefined;
+        const all = renew ? renewing : methods.methods;
         // A provider asked for that this holder is not offered leaves every option open.
         if (group !== undefined && !all.some((m) => m.provider === group))
             group = undefined;
@@ -243,7 +253,7 @@ provider) {
                         return;
                     }
                 }
-                void busy(control, () => api.start(choice.provider, choice.method), show);
+                void busy(control, () => api.start(choice.provider, choice.method, renew?.id), show);
             };
             list.append(control);
         }
@@ -255,7 +265,7 @@ provider) {
                 : 'Choose how to show you control the other account.', 'explanation'),
             list,
         ];
-        if (group !== undefined) {
+        if (group !== undefined && !renew) {
             const back = button('‹ All options');
             back.onclick = () => {
                 group = undefined;
@@ -331,9 +341,14 @@ provider) {
     function publish(flow) {
         const input = flow.artifact === 'document'
             ? node('textarea')
-            : Object.assign(node('input'), { type: 'url' });
+            : Object.assign(node('input'), {
+                type: flow.input ?? 'url',
+                autocapitalize: 'none',
+                spellcheck: false,
+            });
         input.name = 'artifact';
         input.required = true;
+        input.value = flow.suggested ?? '';
         if (input instanceof HTMLTextAreaElement)
             input.rows = 10;
         const label = node('label', flow.field ?? 'Your proof');
@@ -352,7 +367,7 @@ provider) {
             ? node('p', part)
             : Array.isArray(part)
                 ? paragraph(part)
-                : codeBlock(part.code)), label, row(back, check), ...(flow.note ? [node('p', flow.note, 'muted')] : []));
+                : codeBlock(part.code)), ...(flow.refused ? [node('p', flow.refused, 'error')] : []), label, row(back, check), ...(flow.note ? [node('p', flow.note, 'muted')] : []));
     }
     /**
      * A mailed code, in two steps on the one flow: the holder names an address, then enters
@@ -445,6 +460,8 @@ provider) {
             }
             parts.push(choice);
         }
+        if (flow.standingNote)
+            parts.push(node('p', flow.standingNote));
         if (methods)
             parts.push(node('p', `${methods.siteName} receives the result. Verified via ${methods.verifierName}.`, 'muted'));
         const confirm = button(flow.joined ? 'Add to connection' : 'Confirm connection', true);
@@ -479,12 +496,10 @@ provider) {
         cancel.onclick = () => void decide(cancel, true);
         content.replaceChildren(...parts, row(cancel, confirm));
     }
+    /** The result is on the page behind the dialog, so there is nothing left to say here. */
     function done() {
         settle();
-        const finish = button('Done', true);
-        finish.onclick = () => dialog.close();
-        content.replaceChildren(node('p', 'The connection is recorded.', 'state'), row(finish));
-        finish.focus();
+        dialog.close();
     }
     close.addEventListener('click', () => dialog.close());
     dialog.addEventListener('click', (event) => {

package/dist/browser/evidence-dialog.d.ts

@@ -1,5 +1,7 @@
 import { type Evidence } from '../core/index.js';
-export declare const styles = "\n  * { box-sizing: border-box; }\n  dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 24px; border: 1px solid #dce2de; border-radius: 16px; background: #fff; color: #23312b; box-shadow: 0 24px 90px #10201935; font: 13px/1.6 system-ui, sans-serif; }\n  dialog::backdrop { background: #15271f66; }\n  header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }\n  h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.3px; }\n  button { width: 32px; height: 32px; border: 1px solid #dce2de; border-radius: 8px; background: #fff; color: #52645a; font: 20px system-ui, sans-serif; cursor: pointer; }\n  button:hover { background: #f2f5f1; }\n  a { color: #245f43; text-underline-offset: 3px; overflow-wrap: anywhere; }\n  a:focus-visible, button:focus-visible { outline: 2px solid #357ce5; outline-offset: 3px; }\n  .summary { display: flex; align-items: center; gap: 8px; margin-top: 16px; }\n  .mark { width: 36px; height: 36px; flex-shrink: 0; }\n  .provider { width: 14px; height: 14px; }\n  .state { font-size: 14px; font-weight: 650; line-height: 1.4; }\n  .muted { color: #6b786f; font-size: 12px; }\n  .account { position: relative; }\n  .veiled > :not(.checking) { filter: blur(4px); opacity: .55; user-select: none; }\n  .checking { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #23312b; font-size: 13px; font-weight: 600; }\n  .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }\n  @keyframes spin { to { transform: rotate(360deg); } }\n  @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }\n  .caution { display: inline-block; margin-left: 4px; color: #a15c00; cursor: help; vertical-align: middle; }\n  .caution svg { display: block; width: 12px; height: 12px; }\n  .bad { color: #b3261e; font-weight: 650; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }\n  .account { padding: 14px 16px; border: 1px solid #e0e6df; border-radius: 10px; margin-top: 12px; }\n  .account h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; color: #6b786f; font-size: 11px; font-weight: 550; }\n  .account a, .account strong { font-weight: 650; font-size: 14px; }\n  /* The account's own name carries that weight; a link inside a line of prose does not. */\n  .summary a, .method a, .additional a { font: inherit; }\n  .reference { margin-top: 2px; }\n  .method { margin-top: 8px; }\n  .additional { margin-top: 2px; padding-left: 12px; }\n  .joiner { display: block; width: 20px; height: 20px; margin: 8px auto -4px; color: #90a096; }\n  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; }\n  dt { color: #6b786f; }\n  dd { margin: 0; text-align: right; overflow-wrap: anywhere; }\n  .explanation { margin-top: 16px; }\n  .action { width: auto; height: auto; padding: 9px 14px; font: 600 13px/1.3 system-ui, sans-serif; color: #23312b; text-align: left; }\n  .action.primary { border-color: #245f43; background: #245f43; color: #fff; }\n  .action.primary:hover { background: #1d4f37; }\n  .action:disabled { opacity: .6; cursor: progress; }\n  .action.danger:hover { border-color: #b3261e; background: #fdecea; color: #b3261e; }\n  .row { display: flex; justify-content: end; gap: 8px; margin-top: 16px; }\n  .account .row { align-items: center; justify-content: start; margin-top: 12px; }\n  .account .action { padding: 5px 10px; font-size: 12px; }\n  footer { display: flex; align-items: center; justify-content: start; gap: 6px; margin-top: 14px; color: #9aa9a0; font-size: 11px; }\n  .logo { display: block; height: 13px; }\n  \n  @media (prefers-reduced-motion: no-preference) {\n    .mark.current path:last-child { animation: verily-draw .8s cubic-bezier(.65, 0, .35, 1) .1s backwards; }\n  }\n  @keyframes verily-draw { from { stroke-dasharray: 0 176; } to { stroke-dasharray: 108 176; } }\n\n";
+/** The logotype as a link to the project, as both dialogs carry it in their footer. */
+export declare function stampLink(): HTMLAnchorElement;
+export declare const styles = "\n  * { box-sizing: border-box; }\n  dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 24px; border: 1px solid #dce2de; border-radius: 16px; background: #fff; color: #23312b; box-shadow: 0 24px 90px #10201935; font: 13px/1.6 system-ui, sans-serif; }\n  dialog::backdrop { background: #15271f66; }\n  header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }\n  h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.3px; }\n  button { width: 32px; height: 32px; border: 1px solid #dce2de; border-radius: 8px; background: #fff; color: #52645a; font: 20px system-ui, sans-serif; cursor: pointer; }\n  button:hover { background: #f2f5f1; }\n  a { color: #245f43; text-underline-offset: 3px; overflow-wrap: anywhere; }\n  a:focus-visible, button:focus-visible { outline: 2px solid #357ce5; outline-offset: 3px; }\n  .summary { display: flex; align-items: center; gap: 8px; margin-top: 16px; }\n  .mark { width: 36px; height: 36px; flex-shrink: 0; }\n  .provider { width: 14px; height: 14px; }\n  .state { font-size: 14px; font-weight: 650; line-height: 1.4; }\n  .muted { color: #6b786f; font-size: 12px; }\n  .account { position: relative; }\n  .veiled > :not(.checking) { filter: blur(4px); opacity: .55; user-select: none; }\n  .checking { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #23312b; font-size: 13px; font-weight: 600; }\n  .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }\n  @keyframes spin { to { transform: rotate(360deg); } }\n  @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }\n  .caution { display: inline-block; margin-left: 4px; color: #a15c00; cursor: help; vertical-align: middle; }\n  .caution svg { display: block; width: 12px; height: 12px; }\n  .bad { color: #b3261e; font-weight: 650; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }\n  .account { padding: 14px 16px; border: 1px solid #e0e6df; border-radius: 10px; margin-top: 12px; }\n  .account h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; color: #6b786f; font-size: 11px; font-weight: 550; }\n  .account a, .account strong { font-weight: 650; font-size: 14px; }\n  /* The account's own name carries that weight; a link inside a line of prose does not. */\n  .summary a, .method a, .additional a { font: inherit; }\n  .reference { margin-top: 2px; }\n  .method { margin-top: 8px; }\n  /* In the corner the heading leaves empty, apart from everything that was checked. */\n  .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; }\n  .listing.preferred { border-color: #245f43; color: #245f43; }\n  /* Quiet, as its pill is: the surface and the name step back, and the controls do not. */\n  .account.retired { background: #f6f8f5; }\n  .account.retired > a, .account.retired > strong { color: #6b786f; }\n  .account.retired .mark { opacity: .45; }\n  .group { margin: 20px 0 0; color: #6b786f; font-size: 11px; font-weight: 550; }\n  .additional { margin-top: 2px; padding-left: 12px; }\n  .joiner { display: block; width: 20px; height: 20px; margin: 8px auto -4px; color: #90a096; }\n  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; }\n  dt { color: #6b786f; }\n  dd { margin: 0; text-align: right; overflow-wrap: anywhere; }\n  .explanation { margin-top: 16px; }\n  .action { width: auto; height: auto; padding: 9px 14px; font: 600 13px/1.3 system-ui, sans-serif; color: #23312b; text-align: left; }\n  .action.primary { border-color: #245f43; background: #245f43; color: #fff; }\n  .action.primary:hover { background: #1d4f37; }\n  .action:disabled { opacity: .6; cursor: progress; }\n  .action.danger:hover { border-color: #b3261e; background: #fdecea; color: #b3261e; }\n  .row { display: flex; justify-content: end; gap: 8px; margin-top: 16px; }\n  .account .row { align-items: center; justify-content: start; flex-wrap: wrap; margin-top: 12px; }\n  .account .action { padding: 5px 10px; font-size: 12px; }\n  footer { display: flex; align-items: center; justify-content: start; gap: 6px; margin: 20px 0 -8px; color: #9aa9a0; font-size: 11px; }\n  footer a { display: flex; color: inherit; }\n  .logo { display: block; height: 13px; }\n  \n  @media (prefers-reduced-motion: no-preference) {\n    .mark.current path:last-child { animation: verily-draw .8s cubic-bezier(.65, 0, .35, 1) .1s backwards; }\n  }\n  @keyframes verily-draw { from { stroke-dasharray: 0 176; } to { stroke-dasharray: 108 176; } }\n\n";
 export declare function node<K extends keyof HTMLElementTagNameMap>(tag: K, text?: string, className?: string): HTMLElementTagNameMap[K];
 /**
  * Points an anchor out of the dialog. Every link here opens in a new tab: the dialog is
@@ -28,6 +30,11 @@ export type Account = Evidence & {
      */
     sources?: Evidence[];
 };
+/**
+ * How a holder may have an account listed: the one to lead with, an ordinary one, one they
+ * no longer use, or one that is finished and kept only as history.
+ */
+export type Listing = 'preferred' | 'current' | 'unused' | 'retired';
 /**
  * What the holder of the accounts shown may do from the dialog, where the page that drew
  * the badge said its reader is that holder.
@@ -35,8 +42,19 @@ export type Account = Evidence & {
 export interface Manage {
     /** Opens what connects an account, in this dialog's place. Given a provider, starts on it. */
     connect(provider?: string): void;
+    /**
+     * Opens what renews the record named, in this dialog's place: the same account shown
+     * again, which extends that record under its id. `method` is the one method that may.
+     * Absent where the page gave no way to, and Renew then connects on the provider.
+     */
+    renew?(id: string, provider: string, method?: string): void;
     /** Removes the links named. Rejects if any could not be removed. */
     remove(ids: string[]): Promise<void>;
+    /**
+     * Lists the account one link names as asked, every record of it at once. Rejects if it
+     * could not be. Absent where the page gave no way to, and the card then offers none.
+     */
+    mark?(id: string, as: Listing): Promise<void>;
 }
 /**
  * Fetch fresh, permitted evidence; native dialog supplies focus containment and Escape