Web console: naming, trust, activity, onboarding and identity

ts/packages/core/src/domain/mesh-session.ts

@@ -114,7 +114,17 @@ export interface MeshSession {
   readonly coordinatorFrames: AsyncIterable<CoordinatorFrame>;
   connect: (address: string, localDomains: readonly string[]) => Promise<void>;
   sendPing: () => Promise<void>;
-  /** Sends a ping-frame and resolves with the round-trip time in milliseconds once the correlated pong-frame arrives -- FIFO-paired against this call's own ping, since ping-frame carries no correlation id of its own (spec/transport.cddl): the Nth call's own promise resolves against the Nth pong received after it, never matched by any other means. Rejects if the connection closes, or (when timeoutMs is given) if no pong arrives within timeoutMs, rather than resolving a sentinel value the way sendManageRequest's own timeout does -- there is no natural "no answer" value for a bare millisecond count to double as. Unlike sendPing (fire-and-forget, answered by nothing on an ordinary peer connection), this is answered only by a peer that replies to ping with pong -- today, relay-hub's own frame handling (wire-mesh#181) -- so calling this against a connection to a plain peer that never sends pong hangs until timeoutMs (if given) or forever. Exists to isolate the sender-to-hub leg of a relayed path.trace round trip: time this over the same connection a relayed manage-request travelled, then subtract it from path.trace's own end-to-end RTT to recover the hub-to-target leg. */
+  /**
+   * Sends a ping-frame and resolves with the round-trip time in milliseconds once the correlated pong-frame arrives.
+   *
+   * The pairing is FIFO because ping-frame carries no correlation id of its own (spec/transport.cddl): the Nth call's promise resolves against the Nth pong received after it, never matched by any other means.
+   *
+   * Rejects with a plain Error if the connection closes, and with a PingTimeoutError (from ping-round-trips.ts) when `timeoutMs` is given and no pong arrives within it, so a caller can tell an unanswered ping from a dropped connection. It never resolves a sentinel the way sendManageRequest's own timeout does, because there is no natural "no answer" value for a bare millisecond count to double as.
+   *
+   * Unlike sendPing (fire-and-forget, answered by nothing on an ordinary peer connection), this is answered only by a peer that replies to ping with pong, which today means relay-hub's own frame handling (wire-mesh#181). Called against a plain peer that never sends pong it hangs until `timeoutMs` if given, or forever.
+   *
+   * It exists to isolate the sender-to-hub leg of a relayed path.trace round trip: time it over the same connection a relayed manage-request travelled, then subtract it from path.trace's own end-to-end RTT to recover the hub-to-target leg.
+   */
   sendPingMeasureRtt: (timeoutMs?: number) => Promise<number>;
   /** Attaches this token to every `manage-request` sent from now on. */
   setToken: (token: CapabilityToken) => void;

ts/packages/core/src/domain/ping-round-trips.ts

@@ -1,4 +1,12 @@
-// FIFO pairing between sendPingMeasureRtt calls and the pong-frames that answer them (wire-mesh#181) -- ping-frame/pong-frame carry no correlation id of their own (spec/transport.cddl), so the Nth outstanding call is paired against the Nth pong a connection receives. Extracted out of mesh-session.ts the same way relay-pairing.ts already extracts its own relay-pairing bookkeeping, so mesh-session.ts's own applyFrame/sendPingMeasureRtt stay thin wiring rather than owning this queue's mechanics directly.
+// FIFO pairing between sendPingMeasureRtt calls and the pong-frames that answer them (wire-mesh#181). ping-frame and pong-frame carry no correlation id of their own (spec/transport.cddl), so the Nth outstanding call is paired against the Nth pong a connection receives. Extracted out of mesh-session.ts the same way relay-pairing.ts already extracts its own relay-pairing bookkeeping, so mesh-session.ts's own applyFrame/sendPingMeasureRtt stay thin wiring rather than owning this queue's mechanics directly.
+
+/** Why a ping was given up on: no pong arrived within the caller's `timeoutMs`. A call rejected for any other reason (the connection dropped or closed first) rejects with a plain Error, so a caller counting unanswered pings tells the two apart by this class rather than by message text. */
+export class PingTimeoutError extends Error {
+  constructor() {
+    super("timed out waiting for pong");
+    this.name = "PingTimeoutError";
+  }
+}
 
 interface PendingPingRoundTrip {
   sentAt: number;
@@ -58,7 +66,7 @@ export function createPingRoundTrips(): PingRoundTrips {
         new Promise<number>((_resolve, reject) => {
           setTimeout(() => {
             if (cancel(sentAt)) {
-              reject(new Error("timed out waiting for pong"));
+              reject(new PingTimeoutError());
             }
           }, timeoutMs);
         }),

ts/packages/core/test/mesh-session-ping-pong.unit.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it, vi } from "vitest";
 import type { Clock } from "../src/ports/clock.js";
 import { createMeshSession } from "../src/domain/mesh-session.js";
+import { PingTimeoutError } from "../src/domain/ping-round-trips.js";
 import {
   fakeTransport,
   testIdentity,
@@ -82,6 +83,7 @@ describe("sendPingMeasureRtt", () => {
     const pending = session.sendPingMeasureRtt();
     connection.fail(new Error("dropped"));
     await expect(pending).rejects.toThrow("disconnected before a pong arrived");
+    await expect(pending).rejects.not.toBeInstanceOf(PingTimeoutError);
   });
 
   it("times out rather than hanging forever when no pong ever arrives", async () => {
@@ -97,7 +99,7 @@ describe("sendPingMeasureRtt", () => {
         .catch((error: unknown) => error);
       await vi.advanceTimersByTimeAsync(PING_ROUND_TRIP_TIMEOUT_MS);
       const outcome = await pending;
-      expect(outcome).toBeInstanceOf(Error);
+      expect(outcome).toBeInstanceOf(PingTimeoutError);
       expect((outcome as Error).message).toBe("timed out waiting for pong");
       await session.close();
     } finally {

ts/packages/web-console/README.md

@@ -8,8 +8,12 @@ The browser client for wire-mesh: a client of *any* node, not just the hub. It c
 - **Identity** — the console holds a persisted Web Crypto (P-256) identity (`src/adapters/web-crypto-identity.ts`'s `createPersistedWebCryptoIdentity`, backed by `src/adapters/indexeddb-storage.ts`), stable across reloads and shared across every connection the console makes.
 - **Capability tokens** — `MeshSession.setToken` accepts a capability token to present on subsequent `manage-request`s (`sendManageRequest`), gating anything the connected node or a relayed peer requires authorization for.
 - **Reconnect** — a dropped connection retries with backoff (opt-in `ReconnectPolicy`; `main.ts` wires a default exponential backoff, capped, for every session it creates), surfaced as an explicit `"reconnecting"` status rather than silently going dark.
-- **Peer directory** — every `gossip` frame the node sends is folded into a directory table (device, addresses, snapshot time), latest advert per device winning.
-- **Frame log** — a live, ordered feed of every frame that crossed the connection in either direction, plus a *Send ping* button.
+- **Peer directory**: every `gossip` frame the node sends is folded into a directory table (device, addresses, and when the peer advertised itself by its own clock), latest advert per device winning. On a phone-width screen each row stacks into a labelled card (`stackedTable` in `src/App.css.ts`).
+- **Naming**: a peer is named wherever it appears by one convention (`src/peer-names.ts`): a petname this viewer gave the device, else the display name the device signed about itself (always shown with the short id beside it, since a stranger chooses the name and two peers can claim the same one), else a short id with a button that copies the full device-id. Petnames live in this console's own storage (`src/name-store.ts`) and are never gossiped. A self display name travels in the `agent/self` extension of a verified peer-advert, the key agent-comms publishes its agent name under and the one the public hub's advert policy carries, and this console publishes its own the same way.
+- **Trust**: an address that carries certificate pins is assessed against `src/certificate-memory.ts` before it is dialled (`src/certificate-trust.ts`): nothing remembered asks for a first-use confirmation showing the certificate fingerprint, a remembered set sharing nothing with the presented one raises a change warning that must be accepted, and an overlapping set (a rotation) connects silently, dialled with only the presented certificates that are already remembered. A connected node that announces certificates unlike the remembered ones is reported and then pinned: the announcement arrived on a session this console had already pinned, so it is applied, with a dismissable notice. Each discovered-peer row names the connection whose directory gossiped it, and the device the gossip claimed for that connection's address is labelled as a claim, since nothing on the connection authenticates it.
+- **Activity and health**: the connection panel narrates the session as sentences (`src/activity.ts`) with the raw frame log behind a toggle. Round-trip time is probed without a button press and drawn as a sparkline, a dropped connection shows when the next reconnect attempt is due, and directory rows show when a peer was last seen.
+- **Identity and grants**: the identity panel shows this device's id and offers a deliberate backup of its key material: a file the person saves through the browser (`src/adapters/identity-backup.ts`), behind a warning and an explicit acknowledgement, never shown on the page or written to a log, and restorable from the same file after both identities are named. The grants panel lists the capability grants this device holds and has issued (`src/grant-store.ts`), each judged afresh by core's verifier, and mints grants with core's `mintCapabilityToken` (a delegation may only narrow the grant it is made from), adds a grant from its copied grant code, and revokes one it issued with `mintRevocationEntry`.
+- **First run and search**: a device that has not dismissed it sees a short walkthrough (connect, who is here, why discovered peers wait for an explicit connect, what works offline), reopenable from the header. Search covers the messages and readable notices of every conversation (`src/search.ts`) and opens the conversation a result belongs to.
 
 ## How it maps onto core's ports
 
@@ -44,7 +48,7 @@ Messages travel over `core/room`. A conversation is identified by its room path:
 ## What is deliberately deferred
 
 - **Group rooms** — direct messages between two peers are supported, but creating, inviting to and joining named multi-member rooms has client logic in `src/room-client.ts` and no UI yet.
-- **Revocation-gossip ingestion** — the console has no way to learn a capability token was revoked after it was issued, so `webrtc-negotiation.ts`'s token check treats every otherwise-valid token as unrevoked (see the `noRevocationCheck` comment there) — an explicit, documented limitation, not a silent gap.
+- **Relaying revocations** — the console records and honours the revocations it mints and the ones a connected node announces (`src/revocation-store.ts`), but a revocation reaches a peer only if a node relays it, and the hub forwards nothing but gossip, relay frames and their kin. A revoked grant is therefore refused here at once and elsewhere only where a revocation was heard; relaying revocation announcements is tracked in ExaDev/wire-mesh#314.
 - **TURN**: the console is configured with a STUN server (`src/ice-servers.ts`) so a direct connection can form across NATs, and with no TURN server. Where no direct path exists a conversation is meant to fall back to the hub relay rather than a second relay service.
 - **TLS in dev** — `ws://` against localhost is fine; production deployments serve the console over HTTPS and dial `wss://`, which the adapter already handles.
 

ts/packages/web-console/live-check/harness.ts

@@ -141,6 +141,7 @@ window.harness = {
     const negotiator = createWebrtcNegotiator(session, {
       identity,
       clock,
+      revocation: { entriesFor: async () => Promise.resolve([]) },
       // Both browsers of the check run on one machine, where host candidates are all that is needed, and the check must not depend on reaching an outside server.
       iceServers: [],
       onIncomingConnection: (connection) => {

ts/packages/web-console/src/App.css.ts

@@ -1,8 +1,58 @@
-// The one piece of layout Mantine's own style props don't cover cleanly: capping the console's own content width and centring it on a wide viewport, so the peer directory and frame log tables don't stretch edge-to-edge on a desktop monitor.
+// The layout Mantine's own style props don't cover cleanly: capping the console's own content width and centring it on a wide viewport, so the peer tables don't stretch edge-to-edge on a desktop monitor, and turning a peer table into a stack of labelled cards on a phone.
 
-import { style } from "@vanilla-extract/css";
+import { globalStyle, style } from "@vanilla-extract/css";
 
 export const appShell = style({
   maxWidth: "64rem",
   marginInline: "auto",
+  // A long address or device-id with no break opportunity would otherwise widen the page past a phone's viewport.
+  overflowWrap: "anywhere",
+});
+
+/** Mantine's `xs` breakpoint (the same 36em vite.config.ts hands the PostCSS pipeline), below which a peer table no longer fits a row of columns. */
+const PHONE_MEDIA = "screen and (max-width: 36em)";
+
+/** A table whose rows become cards on a phone: the header row is hidden and each cell shows its column's name (its `data-label`) above its value. Use it through `StackedTable`, which also states each element's ARIA role, because changing `display` on table elements makes Safari drop their table semantics. */
+export const stackedTable = style({});
+
+globalStyle(`${stackedTable} thead`, {
+  "@media": {
+    [PHONE_MEDIA]: {
+      position: "absolute",
+      width: 1,
+      height: 1,
+      overflow: "hidden",
+      clip: "rect(0 0 0 0)",
+    },
+  },
+});
+
+globalStyle(`${stackedTable} tr`, {
+  "@media": {
+    [PHONE_MEDIA]: {
+      display: "block",
+      paddingBlock: "0.5rem",
+    },
+  },
+});
+
+globalStyle(`${stackedTable} td`, {
+  "@media": {
+    [PHONE_MEDIA]: {
+      display: "block",
+      border: "none",
+      paddingBlock: "0.125rem",
+    },
+  },
+});
+
+globalStyle(`${stackedTable} td::before`, {
+  "@media": {
+    [PHONE_MEDIA]: {
+      content: "attr(data-label)",
+      display: "block",
+      fontSize: "0.75rem",
+      opacity: 0.7,
+    },
+  },
 });