react-cheminfo 0.58.0 → 0.59.0

package/src/locales/de.json

@@ -593,5 +593,30 @@
   "taxonomy.rank.noRank": "ohne Rang",
   "taxonomy.rank.clade": "Klade",
   "taxonomy.rank.cellularRoot": "zelluläre Wurzel",
-  "taxonomy.rank.acellularRoot": "azelluläre Wurzel"
+  "taxonomy.rank.acellularRoot": "azelluläre Wurzel",
+  "moleculesToken.title": "Tokens für molecules.cheminfo.org",
+  "moleculesToken.checkedAt": "Geprüft am {when}",
+  "moleculesToken.checkAgain": "Erneut prüfen",
+  "moleculesToken.notChecked": "Noch nicht geprüft: Der Dienst, der in molecules.cheminfo.org schreibt, prüft seine Tokens beim Start.",
+  "moleculesToken.column.variable": "Variable",
+  "moleculesToken.column.source": "Quelle",
+  "moleculesToken.column.status": "Status",
+  "moleculesToken.column.details": "Details",
+  "moleculesToken.anySource": "beliebige Quelle",
+  "moleculesToken.verdict.ok": "gültig",
+  "moleculesToken.verdict.otherSource": "einer anderen Quelle",
+  "moleculesToken.verdict.refused": "abgelehnt",
+  "moleculesToken.verdict.unset": "nicht gesetzt",
+  "moleculesToken.verdict.uncheckable": "nicht prüfbar",
+  "moleculesToken.verdict.unanswered": "keine Antwort",
+  "moleculesToken.forSource": "für {source}",
+  "moleculesToken.issued": "ausgestellt am {when}",
+  "moleculesToken.issuedTo": "ausgestellt für {email} am {when}",
+  "moleculesToken.lastUsed": "zuletzt verwendet am {when}",
+  "moleculesToken.neverUsed": "nie verwendet",
+  "moleculesToken.otherSourceDetail": "ausgestellt für {source}: Was er sendet, wird dieser Quelle zugeschrieben",
+  "moleculesToken.refusedDetail": "nie ausgestellt oder widerrufen",
+  "moleculesToken.unsetDetail": "Setzen Sie {variable} in der .env des Servers.",
+  "moleculesToken.uncheckableDetail": "Dieses molecules.cheminfo.org kann noch keine Tokens prüfen.",
+  "moleculesToken.howToChange": "Ein Token wird in der .env des Servers geändert und beim Neustart des Dienstes neu gelesen. molecules.cheminfo.org stellt einen neuen aus mit"
 }

package/src/locales/en.json

@@ -593,5 +593,30 @@
   "taxonomy.rank.noRank": "no rank",
   "taxonomy.rank.clade": "clade",
   "taxonomy.rank.cellularRoot": "cellular root",
-  "taxonomy.rank.acellularRoot": "acellular root"
+  "taxonomy.rank.acellularRoot": "acellular root",
+  "moleculesToken.title": "Tokens for molecules.cheminfo.org",
+  "moleculesToken.checkedAt": "Checked {when}",
+  "moleculesToken.checkAgain": "Check again",
+  "moleculesToken.notChecked": "Not checked yet: the service that writes to molecules.cheminfo.org checks its tokens when it starts.",
+  "moleculesToken.column.variable": "Variable",
+  "moleculesToken.column.source": "Source",
+  "moleculesToken.column.status": "Status",
+  "moleculesToken.column.details": "Details",
+  "moleculesToken.anySource": "any source",
+  "moleculesToken.verdict.ok": "valid",
+  "moleculesToken.verdict.otherSource": "another source's",
+  "moleculesToken.verdict.refused": "refused",
+  "moleculesToken.verdict.unset": "not set",
+  "moleculesToken.verdict.uncheckable": "cannot be checked",
+  "moleculesToken.verdict.unanswered": "no answer",
+  "moleculesToken.forSource": "for {source}",
+  "moleculesToken.issued": "issued on {when}",
+  "moleculesToken.issuedTo": "issued to {email} on {when}",
+  "moleculesToken.lastUsed": "last used on {when}",
+  "moleculesToken.neverUsed": "never used",
+  "moleculesToken.otherSourceDetail": "issued for {source}: what it sends is credited to that source",
+  "moleculesToken.refusedDetail": "never issued, or revoked",
+  "moleculesToken.unsetDetail": "Set {variable} in the server's .env.",
+  "moleculesToken.uncheckableDetail": "This molecules.cheminfo.org cannot check a token yet.",
+  "moleculesToken.howToChange": "A token is changed in the server's .env and read again when the service restarts. molecules.cheminfo.org issues a new one with"
 }

package/src/locales/es.json

@@ -593,5 +593,30 @@
   "taxonomy.rank.noRank": "sin rango",
   "taxonomy.rank.clade": "clado",
   "taxonomy.rank.cellularRoot": "raíz celular",
-  "taxonomy.rank.acellularRoot": "raíz acelular"
+  "taxonomy.rank.acellularRoot": "raíz acelular",
+  "moleculesToken.title": "Tokens para molecules.cheminfo.org",
+  "moleculesToken.checkedAt": "Comprobados el {when}",
+  "moleculesToken.checkAgain": "Comprobar de nuevo",
+  "moleculesToken.notChecked": "Aún sin comprobar: el servicio que escribe en molecules.cheminfo.org comprueba sus tokens al arrancar.",
+  "moleculesToken.column.variable": "Variable",
+  "moleculesToken.column.source": "Fuente",
+  "moleculesToken.column.status": "Estado",
+  "moleculesToken.column.details": "Detalles",
+  "moleculesToken.anySource": "cualquier fuente",
+  "moleculesToken.verdict.ok": "válido",
+  "moleculesToken.verdict.otherSource": "de otra fuente",
+  "moleculesToken.verdict.refused": "rechazado",
+  "moleculesToken.verdict.unset": "sin definir",
+  "moleculesToken.verdict.uncheckable": "no comprobable",
+  "moleculesToken.verdict.unanswered": "sin respuesta",
+  "moleculesToken.forSource": "para {source}",
+  "moleculesToken.issued": "emitido el {when}",
+  "moleculesToken.issuedTo": "emitido para {email} el {when}",
+  "moleculesToken.lastUsed": "usado por última vez el {when}",
+  "moleculesToken.neverUsed": "nunca usado",
+  "moleculesToken.otherSourceDetail": "emitido para {source}: lo que envía se atribuye a esa fuente",
+  "moleculesToken.refusedDetail": "nunca emitido, o revocado",
+  "moleculesToken.unsetDetail": "Defina {variable} en el .env del servidor.",
+  "moleculesToken.uncheckableDetail": "Este molecules.cheminfo.org aún no puede comprobar un token.",
+  "moleculesToken.howToChange": "Un token se cambia en el .env del servidor y se vuelve a leer cuando el servicio se reinicia. molecules.cheminfo.org emite uno nuevo con"
 }

package/src/locales/fr.json

@@ -593,5 +593,30 @@
   "taxonomy.rank.noRank": "sans rang",
   "taxonomy.rank.clade": "clade",
   "taxonomy.rank.cellularRoot": "racine cellulaire",
-  "taxonomy.rank.acellularRoot": "racine acellulaire"
+  "taxonomy.rank.acellularRoot": "racine acellulaire",
+  "moleculesToken.title": "Jetons pour molecules.cheminfo.org",
+  "moleculesToken.checkedAt": "Vérifiés le {when}",
+  "moleculesToken.checkAgain": "Vérifier à nouveau",
+  "moleculesToken.notChecked": "Pas encore vérifiés : le service qui écrit dans molecules.cheminfo.org vérifie ses jetons à son démarrage.",
+  "moleculesToken.column.variable": "Variable",
+  "moleculesToken.column.source": "Source",
+  "moleculesToken.column.status": "État",
+  "moleculesToken.column.details": "Détails",
+  "moleculesToken.anySource": "n'importe quelle source",
+  "moleculesToken.verdict.ok": "valide",
+  "moleculesToken.verdict.otherSource": "d'une autre source",
+  "moleculesToken.verdict.refused": "refusé",
+  "moleculesToken.verdict.unset": "non défini",
+  "moleculesToken.verdict.uncheckable": "invérifiable",
+  "moleculesToken.verdict.unanswered": "pas de réponse",
+  "moleculesToken.forSource": "pour {source}",
+  "moleculesToken.issued": "émis le {when}",
+  "moleculesToken.issuedTo": "émis pour {email} le {when}",
+  "moleculesToken.lastUsed": "dernière utilisation le {when}",
+  "moleculesToken.neverUsed": "jamais utilisé",
+  "moleculesToken.otherSourceDetail": "émis pour {source} : ce qu'il envoie est attribué à cette source",
+  "moleculesToken.refusedDetail": "jamais émis, ou révoqué",
+  "moleculesToken.unsetDetail": "Définissez {variable} dans le fichier .env du serveur.",
+  "moleculesToken.uncheckableDetail": "Ce molecules.cheminfo.org ne sait pas encore vérifier un jeton.",
+  "moleculesToken.howToChange": "Un jeton se change dans le fichier .env du serveur, et est relu au redémarrage du service. molecules.cheminfo.org en émet un nouveau avec"
 }

package/src/locales/it.json

@@ -593,5 +593,30 @@
   "taxonomy.rank.noRank": "senza rango",
   "taxonomy.rank.clade": "clade",
   "taxonomy.rank.cellularRoot": "radice cellulare",
-  "taxonomy.rank.acellularRoot": "radice acellulare"
+  "taxonomy.rank.acellularRoot": "radice acellulare",
+  "moleculesToken.title": "Token per molecules.cheminfo.org",
+  "moleculesToken.checkedAt": "Verificati il {when}",
+  "moleculesToken.checkAgain": "Verifica di nuovo",
+  "moleculesToken.notChecked": "Non ancora verificati: il servizio che scrive in molecules.cheminfo.org verifica i suoi token all'avvio.",
+  "moleculesToken.column.variable": "Variabile",
+  "moleculesToken.column.source": "Fonte",
+  "moleculesToken.column.status": "Stato",
+  "moleculesToken.column.details": "Dettagli",
+  "moleculesToken.anySource": "qualsiasi fonte",
+  "moleculesToken.verdict.ok": "valido",
+  "moleculesToken.verdict.otherSource": "di un'altra fonte",
+  "moleculesToken.verdict.refused": "rifiutato",
+  "moleculesToken.verdict.unset": "non impostato",
+  "moleculesToken.verdict.uncheckable": "non verificabile",
+  "moleculesToken.verdict.unanswered": "nessuna risposta",
+  "moleculesToken.forSource": "per {source}",
+  "moleculesToken.issued": "emesso il {when}",
+  "moleculesToken.issuedTo": "emesso per {email} il {when}",
+  "moleculesToken.lastUsed": "usato l'ultima volta il {when}",
+  "moleculesToken.neverUsed": "mai usato",
+  "moleculesToken.otherSourceDetail": "emesso per {source}: ciò che invia è attribuito a quella fonte",
+  "moleculesToken.refusedDetail": "mai emesso, o revocato",
+  "moleculesToken.unsetDetail": "Impostare {variable} nel file .env del server.",
+  "moleculesToken.uncheckableDetail": "Questo molecules.cheminfo.org non sa ancora verificare un token.",
+  "moleculesToken.howToChange": "Un token si cambia nel file .env del server e viene riletto al riavvio del servizio. molecules.cheminfo.org ne emette uno nuovo con"
 }

package/src/moleculesToken/core/index.ts

@@ -0,0 +1,11 @@
+export type {
+  CheckMoleculesTokenOptions,
+  MoleculesTokenCheck,
+  MoleculesTokenToCheck,
+  MoleculesTokenVerdict,
+} from './moleculesToken.ts';
+export {
+  checkMoleculesToken,
+  checkMoleculesTokens,
+  publicTokenCheck,
+} from './moleculesToken.ts';

package/src/moleculesToken/core/moleculesToken.ts

@@ -0,0 +1,256 @@
+import { trimTrailingSlash } from '../../router/core/address.ts';
+
+/**
+ * What molecules.cheminfo.org says of a token a site holds:
+ *
+ * - `ok`: issued for a source the site writes, and not revoked;
+ * - `otherSource`: valid, but issued for another source, so what the site
+ *   sends is credited to that one;
+ * - `refused`: never issued, or revoked;
+ * - `unset`: the site holds none;
+ * - `uncheckable`: molecules.cheminfo.org answers, but cannot check a token
+ *   yet;
+ * - `unanswered`: it did not answer, or failed.
+ */
+export type MoleculesTokenVerdict =
+  'ok' | 'otherSource' | 'refused' | 'unset' | 'uncheckable' | 'unanswered';
+
+/** A token a site holds, to be checked. */
+export interface MoleculesTokenToCheck {
+  /** The environment variable it is read from, e.g. `MOLECULES_TOKEN_LOTUS`. */
+  variable: string;
+  /** The token, or undefined when the variable is unset or blank. */
+  token: string | undefined;
+  /**
+   * The sources it may have been issued for, as molecules.cheminfo.org names
+   * them: any one of them is right, whatever its case.
+   * @default [] — any source
+   */
+  sources?: readonly string[];
+}
+
+/** A token, as molecules.cheminfo.org checked it. Never the token itself. */
+export interface MoleculesTokenCheck {
+  /** The environment variable it is read from. */
+  variable: string;
+  /** The sources it may have been issued for; empty for any source. */
+  sources: string[];
+  /** What molecules.cheminfo.org says of it. */
+  verdict: MoleculesTokenVerdict;
+  /**
+   * What molecules.cheminfo.org said, or why it could not be asked; null when
+   * the verdict says it all.
+   */
+  message: string | null;
+  /** The source molecules.cheminfo.org knows it for, once it answered. */
+  source: string | null;
+  /**
+   * Its first characters, as molecules.cheminfo.org shows them: what tells two
+   * tokens apart without showing either.
+   */
+  hint: string | null;
+  /** Who it was issued to. */
+  email: string | null;
+  /** When it was issued, in epoch milliseconds. */
+  issuedAt: number | null;
+  /** When it last read or wrote, in epoch milliseconds, to within a minute. */
+  lastUsedAt: number | null;
+  /** When it was checked, in epoch milliseconds. */
+  checkedAt: number;
+}
+
+/** Where molecules.cheminfo.org answers, and how patiently it is asked. */
+export interface CheckMoleculesTokenOptions {
+  /** Where it answers, e.g. `https://molecules.cheminfo.org`. */
+  baseUrl: string;
+  /**
+   * How long one check may take.
+   * @default 5000
+   */
+  timeoutMs?: number;
+  /**
+   * The fetch to use, for tests.
+   * @default globalThis.fetch
+   */
+  fetch?: typeof fetch;
+  /**
+   * The clock the checks are stamped with, for tests.
+   * @default Date.now
+   */
+  now?: () => number;
+}
+
+/**
+ * Ask molecules.cheminfo.org about a token: `GET /v1/token`, which says which
+ * source it was issued for and never counts as using it. A token pasted in
+ * another source's place, revoked, or never issued shows here before an import
+ * sends anything with it. Never throws: a molecules.cheminfo.org that does not
+ * answer is a verdict too.
+ * @param entry - The token, where it is read from, and the sources it may be for.
+ * @param options - Where molecules.cheminfo.org answers, and how patiently.
+ * @returns What it says of the token.
+ */
+export async function checkMoleculesToken(
+  entry: MoleculesTokenToCheck,
+  options: CheckMoleculesTokenOptions,
+): Promise<MoleculesTokenCheck> {
+  const {
+    baseUrl,
+    timeoutMs = 5000,
+    fetch: fetchImplementation = globalThis.fetch,
+    now = Date.now,
+  } = options;
+  const sources = entry.sources === undefined ? [] : [...entry.sources];
+  const verdict = (
+    value: MoleculesTokenVerdict,
+    message: string | null = null,
+  ): MoleculesTokenCheck => ({
+    variable: entry.variable,
+    sources,
+    verdict: value,
+    message,
+    source: null,
+    hint: null,
+    email: null,
+    issuedAt: null,
+    lastUsedAt: null,
+    checkedAt: now(),
+  });
+
+  const token = entry.token?.trim();
+  if (!token) return verdict('unset');
+
+  let response: Response;
+  try {
+    response = await fetchImplementation(
+      `${trimTrailingSlash(baseUrl)}/v1/token`,
+      {
+        headers: {
+          accept: 'application/json',
+          authorization: `Bearer ${token}`,
+        },
+        signal: AbortSignal.timeout(timeoutMs),
+      },
+    );
+  } catch (error: unknown) {
+    return verdict('unanswered', whyUnanswered(error, timeoutMs));
+  }
+
+  if (response.status === 401) {
+    return verdict('refused', await messageOf(response));
+  }
+  if (response.status === 404) {
+    await response.body?.cancel();
+    return verdict('uncheckable', 'GET /v1/token answered 404');
+  }
+  if (!response.ok) {
+    await response.body?.cancel();
+    return verdict('unanswered', `GET /v1/token answered ${response.status}`);
+  }
+
+  const record = await recordOf(response);
+  if (record === null) {
+    return verdict('unanswered', 'GET /v1/token answered no token');
+  }
+  const known = {
+    source: record.source,
+    hint: record.hint,
+    email: record.email,
+    issuedAt: record.createdAt * 1000,
+    lastUsedAt: record.lastUsedAt === null ? null : record.lastUsedAt * 1000,
+  };
+  if (record.revokedAt !== null) {
+    return { ...verdict('refused', 'this token was revoked'), ...known };
+  }
+  const wanted = record.source.toLowerCase();
+  const expected =
+    sources.length === 0 ||
+    sources.some((source) => source.toLowerCase() === wanted);
+  return { ...verdict(expected ? 'ok' : 'otherSource'), ...known };
+}
+
+/**
+ * Check every token a site holds, all at once.
+ * @param entries - The tokens. See {@link checkMoleculesToken}.
+ * @param options - See {@link CheckMoleculesTokenOptions}.
+ * @returns What molecules.cheminfo.org says of each, in the order given.
+ */
+export async function checkMoleculesTokens(
+  entries: readonly MoleculesTokenToCheck[],
+  options: CheckMoleculesTokenOptions,
+): Promise<MoleculesTokenCheck[]> {
+  return Promise.all(
+    entries.map((entry) => checkMoleculesToken(entry, options)),
+  );
+}
+
+/**
+ * What a page anyone can open may show of a check: the verdict and the source,
+ * without who the token was issued to or its first characters.
+ * @param check - The check.
+ * @returns The check, without them.
+ */
+export function publicTokenCheck(
+  check: MoleculesTokenCheck,
+): MoleculesTokenCheck {
+  return { ...check, email: null, hint: null };
+}
+
+/** What `GET /v1/token` answers, as far as a check reads it. */
+interface TokenRecord {
+  source: string;
+  email: string;
+  hint: string;
+  createdAt: number;
+  lastUsedAt: number | null;
+  revokedAt: number | null;
+}
+
+async function recordOf(response: Response): Promise<TokenRecord | null> {
+  let body: unknown;
+  try {
+    body = await response.json();
+  } catch {
+    return null;
+  }
+  if (typeof body !== 'object' || body === null) return null;
+  const record = body as Partial<Record<keyof TokenRecord, unknown>>;
+  if (
+    typeof record.source !== 'string' ||
+    typeof record.email !== 'string' ||
+    typeof record.hint !== 'string' ||
+    typeof record.createdAt !== 'number' ||
+    !isOptionalNumber(record.lastUsedAt) ||
+    !isOptionalNumber(record.revokedAt)
+  ) {
+    return null;
+  }
+  return {
+    source: record.source,
+    email: record.email,
+    hint: record.hint,
+    createdAt: record.createdAt,
+    lastUsedAt: record.lastUsedAt,
+    revokedAt: record.revokedAt,
+  };
+}
+
+function isOptionalNumber(value: unknown): value is number | null {
+  return value === null || typeof value === 'number';
+}
+
+async function messageOf(response: Response): Promise<string | null> {
+  try {
+    const body = (await response.json()) as { message?: unknown };
+    return typeof body.message === 'string' ? body.message : null;
+  } catch {
+    return null;
+  }
+}
+
+function whyUnanswered(error: unknown, timeoutMs: number): string {
+  if ((error as { name?: unknown } | null)?.name === 'TimeoutError') {
+    return `no answer within ${timeoutMs} ms`;
+  }
+  return error instanceof Error ? error.message : String(error);
+}

package/src/moleculesToken/ui/MoleculesTokenTable.tsx

@@ -0,0 +1,249 @@
+import type { Intent } from '@blueprintjs/core';
+import { Button, Callout, HTMLTable, Tag } from '@blueprintjs/core';
+import type { ReactNode } from 'react';
+import { useMemo } from 'react';
+
+import type { ChromeKey } from '../../i18n/core/chromeCatalog.ts';
+import { useLanguage } from '../../i18n/ui/useLanguage.ts';
+import type { Translate } from '../../i18n/ui/useT.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import type {
+  MoleculesTokenCheck,
+  MoleculesTokenVerdict,
+} from '../core/moleculesToken.ts';
+
+/** What {@link MoleculesTokenTable} shows. */
+export interface MoleculesTokenTableProps {
+  /** The last checks, or null before the first one was made. */
+  checks: readonly MoleculesTokenCheck[] | null;
+  /**
+   * Whether a check was asked for and is not made yet.
+   * @default false
+   */
+  pending?: boolean;
+  /**
+   * Asks for every token to be checked again. Left out, there is no button:
+   * a page anyone can open shows the last checks and asks for none.
+   * @default undefined
+   */
+  onCheckAgain?: () => void;
+  /**
+   * Why asking for a check failed.
+   * @default undefined
+   */
+  error?: string;
+}
+
+const INTENT: Record<MoleculesTokenVerdict, Intent> = {
+  ok: 'success',
+  otherSource: 'danger',
+  refused: 'danger',
+  unset: 'warning',
+  uncheckable: 'warning',
+  unanswered: 'warning',
+};
+
+/** How each verdict reads in the table. */
+const LABEL: Record<MoleculesTokenVerdict, ChromeKey> = {
+  ok: 'moleculesToken.verdict.ok',
+  otherSource: 'moleculesToken.verdict.otherSource',
+  refused: 'moleculesToken.verdict.refused',
+  unset: 'moleculesToken.verdict.unset',
+  uncheckable: 'moleculesToken.verdict.uncheckable',
+  unanswered: 'moleculesToken.verdict.unanswered',
+};
+
+/** The command a token is issued with, on molecules.cheminfo.org. */
+const ISSUE_COMMAND = 'npm run tokens -- issue SOURCE EMAIL';
+
+/**
+ * The tokens a site holds for molecules.cheminfo.org, one row each, with what
+ * molecules.cheminfo.org said of it when it was last checked: valid, another
+ * source's, refused, not set. A token is changed in the server's `.env`, never
+ * here, so the table says where.
+ * @param props - See {@link MoleculesTokenTableProps}.
+ * @returns The table.
+ */
+export function MoleculesTokenTable(props: MoleculesTokenTableProps) {
+  const { checks, pending = false, onCheckAgain, error } = props;
+  const t = useChromeT();
+  const language = useLanguage();
+  const formats = useMemo(
+    () => ({
+      instant: new Intl.DateTimeFormat(language, {
+        dateStyle: 'medium',
+        timeStyle: 'short',
+      }),
+      sources: new Intl.ListFormat(language, { type: 'disjunction' }),
+    }),
+    [language],
+  );
+  const checkedAt =
+    checks === null || checks.length === 0
+      ? null
+      : Math.min(...checks.map((check) => check.checkedAt));
+
+  return (
+    <section
+      className="molecules-tokens"
+      aria-label={t('moleculesToken.title')}
+      data-testid="molecules-tokens"
+    >
+      <div className="molecules-tokens__head">
+        <span className="molecules-tokens__title">
+          {t('moleculesToken.title')}
+        </span>
+        {checkedAt !== null && (
+          <span className="molecules-tokens__muted">
+            {t('moleculesToken.checkedAt', {
+              when: formats.instant.format(checkedAt),
+            })}
+          </span>
+        )}
+        {onCheckAgain !== undefined && (
+          <Button
+            size="small"
+            variant="minimal"
+            icon="refresh"
+            loading={pending}
+            text={t('moleculesToken.checkAgain')}
+            onClick={onCheckAgain}
+            data-testid="molecules-tokens-check"
+          />
+        )}
+      </div>
+      {error !== undefined && (
+        <Callout compact intent="danger">
+          {error}
+        </Callout>
+      )}
+      {checks === null ? (
+        <p className="molecules-tokens__muted">
+          {t('moleculesToken.notChecked')}
+        </p>
+      ) : (
+        <div className="molecules-tokens__scroll">
+          <HTMLTable compact striped className="molecules-tokens__table">
+            <thead>
+              <tr>
+                <th>{t('moleculesToken.column.variable')}</th>
+                <th>{t('moleculesToken.column.source')}</th>
+                <th>{t('moleculesToken.column.status')}</th>
+                <th>{t('moleculesToken.column.details')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {checks.map((check) => (
+                <tr key={check.variable} data-verdict={check.verdict}>
+                  <td>
+                    <code>{check.variable}</code>
+                  </td>
+                  <td>
+                    {check.sources.length === 0
+                      ? t('moleculesToken.anySource')
+                      : formats.sources.format(check.sources)}
+                  </td>
+                  <td>
+                    <Tag minimal intent={INTENT[check.verdict]}>
+                      {t(LABEL[check.verdict])}
+                    </Tag>
+                  </td>
+                  <td>{details(check, t, formats.instant)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </HTMLTable>
+        </div>
+      )}
+      <p className="molecules-tokens__muted">
+        {t('moleculesToken.howToChange')} <code>{ISSUE_COMMAND}</code>
+      </p>
+    </section>
+  );
+}
+
+/**
+ * What a row says besides its verdict.
+ * @param check - The check.
+ * @param t - The chrome's translator.
+ * @param instant - How an instant is written.
+ * @returns The cell's content.
+ */
+function details(
+  check: MoleculesTokenCheck,
+  t: Translate<ChromeKey>,
+  instant: Intl.DateTimeFormat,
+): ReactNode {
+  const hint: Fact | null =
+    check.hint === null
+      ? null
+      : ['hint', <code key="hint">{check.hint}…</code>];
+  switch (check.verdict) {
+    case 'ok':
+      return facts([
+        check.sources.length === 1 || check.source === null
+          ? null
+          : ['source', t('moleculesToken.forSource', { source: check.source })],
+        check.issuedAt === null
+          ? null
+          : [
+              'issued',
+              check.email === null
+                ? t('moleculesToken.issued', {
+                    when: instant.format(check.issuedAt),
+                  })
+                : t('moleculesToken.issuedTo', {
+                    email: check.email,
+                    when: instant.format(check.issuedAt),
+                  }),
+            ],
+        [
+          'used',
+          check.lastUsedAt === null
+            ? t('moleculesToken.neverUsed')
+            : t('moleculesToken.lastUsed', {
+                when: instant.format(check.lastUsedAt),
+              }),
+        ],
+        hint,
+      ]);
+    case 'otherSource':
+      return facts([
+        [
+          'source',
+          t('moleculesToken.otherSourceDetail', {
+            source: check.source ?? '',
+          }),
+        ],
+        hint,
+      ]);
+    case 'refused':
+      return check.message ?? t('moleculesToken.refusedDetail');
+    case 'unset':
+      return t('moleculesToken.unsetDetail', { variable: check.variable });
+    case 'uncheckable':
+      return t('moleculesToken.uncheckableDetail');
+    case 'unanswered':
+      return check.message;
+    default:
+      return null;
+  }
+}
+
+/** One fact about a token, and the key it is drawn under. */
+type Fact = readonly [key: string, content: ReactNode];
+
+/**
+ * Facts about a token, one after the other.
+ * @param parts - The facts; null ones are left out.
+ * @returns The facts, separated by a middle dot.
+ */
+function facts(parts: ReadonlyArray<Fact | null>): ReactNode {
+  const shown = parts.filter((part) => part !== null);
+  return shown.map(([key, content], index) => (
+    <span key={key}>
+      {index > 0 && ' · '}
+      {content}
+    </span>
+  ));
+}

package/src/moleculesToken/ui/index.ts

@@ -0,0 +1,2 @@
+export type { MoleculesTokenTableProps } from './MoleculesTokenTable.tsx';
+export { MoleculesTokenTable } from './MoleculesTokenTable.tsx';