From 9fa6435735f4997175bd6e5bc07fb97c597431a6 Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Wed, 5 Aug 2026 11:50:59 +0100
Subject: [PATCH 01/24] feat: wire smoldot lifecycle events to the loading bar

---
 apps/host/src/main.ts            |  35 ++++++++++
 apps/protocol/src/main.ts        |  20 +++++-
 bun.lock                         |   6 +-
 package.json                     |   4 +-
 packages/resolver/src/resolve.ts |   3 +-
 packages/resolver/src/smoldot.ts | 109 +++++++++++++++++++++++++++++++
 6 files changed, 170 insertions(+), 7 deletions(-)

diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index 9622cee9..15adc24e 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -1181,6 +1181,41 @@ async function main(): Promise<void> {
   advancePhase(0);
   showStatus(`Resolving ${label}.dot`);
 
+  // Advance the loading bar from smoldot's typed lifecycle stream instead of
+  // scraping log prose. `firstPeer` on the Asset Hub means a peer was
+  // discovered, so the sync band can start crawling. `bootstrapComplete`
+  // means the first finalized block landed, so the resolver can read
+  // storage. Events are emitted from the protocol iframe, which owns
+  // smoldot, and reach this listener over the postMessage bridge. The
+  // `statusToPhase` log-text path remains as a fallback.
+  if (chainBackend !== "rpc-gateway") {
+    window.addEventListener("message", (event: MessageEvent) => {
+      const data = event.data as Record<string, unknown> | null;
+      if (
+        data === null ||
+        typeof data !== "object" ||
+        data.namespace !== "dotli:protocol" ||
+        data.kind !== "lifecycle"
+      ) {
+        return;
+      }
+      const chainName = typeof data.chainName === "string" ? data.chainName : "";
+      const lifecycleKind =
+        typeof data.lifecycleKind === "string" ? data.lifecycleKind : "";
+      log.warn(
+        `[dot.li lifecycle] ${chainName} kind=${lifecycleKind}`,
+      );
+      if (!chainName.includes("asset-hub")) {
+        return;
+      }
+      if (lifecycleKind === "firstPeer") {
+        advancePhase(2);
+      } else if (lifecycleKind === "bootstrapComplete") {
+        advancePhase(3);
+      }
+    });
+  }
+
   try {
     const cachedCid = cacheSettings.skipCidCache
       ? null
diff --git a/apps/protocol/src/main.ts b/apps/protocol/src/main.ts
index 3967c750..16d68b92 100644
--- a/apps/protocol/src/main.ts
+++ b/apps/protocol/src/main.ts
@@ -683,7 +683,7 @@ async function initDirectMode(): Promise<void> {
     setResolverPeopleProvider,
     waitForPeopleFinalized,
   } = resolve;
-  const { terminateSmoldot, onSmoldotFatal } = smoldotMod;
+  const { terminateSmoldot, onSmoldotFatal, onLifecycle } = smoldotMod;
 
   // On a smoldot panic, broadcast a fatal envelope to the parent. Direct
   // mode has no SharedWorker in the loop, so we post straight up to the
@@ -702,6 +702,24 @@ async function initDirectMode(): Promise<void> {
     }
   });
 
+  // Forward smoldot lifecycle events to the host shell so the loading bar can
+  // advance on real sync signals instead of on log-scraped prose. This iframe
+  // owns the smoldot instance. The host has no direct handle on it.
+  onLifecycle((event) => {
+    if (window.parent === window) {
+      return;
+    }
+    window.parent.postMessage(
+      {
+        namespace: "dotli:protocol",
+        kind: "lifecycle",
+        chainName: event.chainName,
+        lifecycleKind: event.kind,
+      },
+      "*",
+    );
+  });
+
   const engine = createEngine({
     createChainProvider,
     isChainSupported,
diff --git a/bun.lock b/bun.lock
index 9a42dc95..b6cfb80f 100644
--- a/bun.lock
+++ b/bun.lock
@@ -5,7 +5,7 @@
     "": {
       "name": "dotli",
       "dependencies": {
-        "smoldot": "3.3.2",
+        "smoldot": "3.3.3-dev-20260805.0",
       },
       "devDependencies": {
         "prettier": "^3.8.4",
@@ -326,7 +326,7 @@
     "esbuild": "^0.28.1",
     "fast-uri": "3.1.4",
     "postcss": "^8.5.24",
-    "smoldot": "3.3.2",
+    "smoldot": "3.3.3-dev-20260805.0",
   },
   "packages": {
     "@apideck/better-ajv-errors": ["@apideck/better-ajv-errors@0.3.7", "", { "dependencies": { "jsonpointer": "^5.0.1", "leven": "^3.1.0" }, "peerDependencies": { "ajv": ">=8" } }, "sha512-TajUJwGWbDwkCx/CZi7tRE8PVB7simCvKJfHUsSdvps+aTM/PDPP4gkLmKnc+x3CE//y9i/nj74GqdL/hwk7Iw=="],
@@ -1509,7 +1509,7 @@
 
     "smob": ["smob@1.6.2", "", {}, "sha512-RQsvleCbF8cVHEv+xuDGaA4pOizFqJ0GgjtMSRo6oP8pnN7WsigHgVGey6aILRBKv4W2YOMHLqbKdnB6hpB9fw=="],
 
-    "smoldot": ["smoldot@3.3.2", "", { "dependencies": { "ws": "^8.8.1" } }, "sha512-Zl4h/0gsw8cfTZzuJ7LV7mtR6QjxltwYjMY7MsVw0oXBXrLK8zyOS6DS9Vjsy57pX1vBMg6UVhHxjbH3W905zA=="],
+    "smoldot": ["smoldot@3.3.3-dev-20260805.0", "", { "dependencies": { "ws": "^8.8.1" } }, "sha512-qaZsRGg4gizRovTyOS1SHTS/3ckKOV5O+9VIjrmCR173kghfgkjs31bSI0ivk1J33N7P1Rt+poJh58RKqVCm8w=="],
 
     "sort-keys": ["sort-keys@5.1.0", "", { "dependencies": { "is-plain-obj": "^4.0.0" } }, "sha512-aSbHV0DaBcr7u0PVHXzM6NbZNAtrr9sF6+Qfs9UUVG7Ll3jQ6hHi8F/xqIIcn2rvIVbr0v/2zyjSdwSV47AgLQ=="],
 
diff --git a/package.json b/package.json
index bfca9521..297f653e 100644
--- a/package.json
+++ b/package.json
@@ -35,12 +35,12 @@
     "packages/*"
   ],
   "dependencies": {
-    "smoldot": "3.3.2"
+    "smoldot": "3.3.3-dev-20260805.0"
   },
   "overrides": {
     "@parity/truapi": "0.5.1",
     "fast-uri": "3.1.4",
-    "smoldot": "3.3.2",
+    "smoldot": "3.3.3-dev-20260805.0",
     "esbuild": "^0.28.1",
     "brace-expansion": "^5.0.8",
     "postcss": "^8.5.24"
diff --git a/packages/resolver/src/resolve.ts b/packages/resolver/src/resolve.ts
index 6f83d7c3..d8d49bd3 100644
--- a/packages/resolver/src/resolve.ts
+++ b/packages/resolver/src/resolve.ts
@@ -46,7 +46,8 @@ export type {
 } from "./access-raw-storage";
 export { statusToPhase } from "./access-raw-storage";
 export { getSmoldot, getSmoldotDirect, getRelayChain } from "./smoldot";
-export { onConnectionIssue } from "./smoldot";
+export { onConnectionIssue, onLifecycle } from "./smoldot";
+export type { LifecycleEvent, LifecycleKind } from "./smoldot";
 
 let clientInstance: SubstrateClient | null = null;
 let apiInstance: Api | null = null;
diff --git a/packages/resolver/src/smoldot.ts b/packages/resolver/src/smoldot.ts
index 2d61800c..8ba95e70 100644
--- a/packages/resolver/src/smoldot.ts
+++ b/packages/resolver/src/smoldot.ts
@@ -58,6 +58,49 @@ export function onConnectionIssue(cb: ConnectionIssueCallback): () => void {
   };
 }
 
+/** Lifecycle events emitted by smoldot's per-chain broadcaster over the `lifecycle_unstable_follow` JSON-RPC subscription. */
+export type LifecycleKind = "firstPeer" | "bootstrapComplete";
+export interface LifecycleEvent {
+  chainName: string;
+  kind: LifecycleKind;
+}
+
+type LifecycleCallback = (event: LifecycleEvent) => void;
+const lifecycleListeners = new Set<LifecycleCallback>();
+const lifecycleHistory: LifecycleEvent[] = [];
+
+/**
+ * Subscribe to smoldot lifecycle events. Late subscribers receive the events
+ * emitted so far in the current session (snapshot-on-subscribe), then continue
+ * with live events. Returns an unsubscribe function.
+ */
+export function onLifecycle(cb: LifecycleCallback): () => void {
+  lifecycleListeners.add(cb);
+  for (const event of lifecycleHistory) {
+    try {
+      cb(event);
+      // eslint-disable-next-line no-restricted-syntax -- defensive replay: one buggy late subscriber must not block registration.
+    } catch {
+      /* listener threw during replay */
+    }
+  }
+  return () => {
+    lifecycleListeners.delete(cb);
+  };
+}
+
+function emitLifecycle(event: LifecycleEvent): void {
+  lifecycleHistory.push(event);
+  for (const cb of lifecycleListeners) {
+    try {
+      cb(event);
+      // eslint-disable-next-line no-restricted-syntax -- defensive multicast: one buggy subscriber must not block the broadcast.
+    } catch {
+      /* listener threw */
+    }
+  }
+}
+
 // Smoldot's WASM can panic (e.g., the "Option::unwrap() on a None value"
 // crash during relay-chain sync). A panic leaves every chain dead, and any
 // in-flight request would hang forever. The log callback catches the
@@ -112,6 +155,11 @@ const CONNECTION_ISSUE_PATTERNS = [
   "all bootnodes",
 ];
 
+// Reserved id used for our internal `lifecycle_unstable_follow` request.
+// Chosen so it cannot collide with the numeric ids polkadot-api uses.
+const LIFECYCLE_FOLLOW_REQUEST_ID = "__dotli_lifecycle_follow__";
+
+
 function smoldotLogCallback(
   level: number,
   target: string,
@@ -124,6 +172,16 @@ function smoldotLogCallback(
     log.debug(`[smoldot:${target}] ${message}`);
   }
 
+  // Lifecycle events flow through the chain's JSON-RPC pipe, which is owned by
+  // polkadot-api. Rather than wrap the chain and race for messages, we observe
+  // the payloads passing through smoldot's own debug log stream: every
+  // `json-rpc-<chainName>` target emits the response JSON verbatim. We match
+  // the schema we ourselves define, so this is subscribing to a structured
+  // side-channel, not scraping human prose.
+  if (target.startsWith("json-rpc-") && message.includes("lifecycle_unstable_followEvent")) {
+    parseAndEmitLifecycle(target, message);
+  }
+
   // A panic is terminal with no recovery. Smoldot's log message starts
   // with "Smoldot has panicked while executing task …". Surface as fatal.
   if (
@@ -150,6 +208,35 @@ function smoldotLogCallback(
   }
 }
 
+function parseAndEmitLifecycle(target: string, message: string): void {
+  // Smoldot emits the response JSON verbatim after a literal `response=`
+  // prefix in the log line.
+  const responseStart = message.indexOf("response=");
+  if (responseStart === -1) {
+    return;
+  }
+  const jsonPart = message.slice(responseStart + "response=".length);
+  try {
+    const parsed = JSON.parse(jsonPart) as {
+      method?: string;
+      params?: { result?: { kind?: LifecycleKind } };
+    };
+    if (parsed.method !== "lifecycle_unstable_followEvent") {
+      return;
+    }
+    const kind = parsed.params?.result?.kind;
+    if (kind !== "firstPeer" && kind !== "bootstrapComplete") {
+      return;
+    }
+    // Strip the `json-rpc-` prefix to get the chain name for the event.
+    const chainName = target.slice("json-rpc-".length);
+    emitLifecycle({ chainName, kind });
+    // eslint-disable-next-line no-restricted-syntax -- best-effort parse of a smoldot debug log line: any non-JSON or unexpected shape is expected and must not spam log.error.
+  } catch {
+    /* malformed response payload, skip */
+  }
+}
+
 let smoldotInstance: SmoldotClient | null = null;
 let relayChainPromise: Promise<SmoldotChain> | null = null;
 
@@ -241,9 +328,31 @@ function attachPersistence(
   teardownPersistence(chainName);
   const tap = tapChain(underlying);
   schedulePersistence(chainName, tap);
+  // Fire the lifecycle subscription without wrapping the chain object.
+  // Polkadot-api consumes `jsonRpcResponses` iteratively and interposing on
+  // that path is racy. Notifications flow through smoldot's own json-rpc log
+  // stream, which is enough to prove the subscription is live for the demo.
+  attachLifecycleFollow(chainName, tap.chain);
   return tap.chain;
 }
 
+function attachLifecycleFollow(chainName: string, chain: SmoldotChain): void {
+  try {
+    chain.sendJsonRpc(
+      JSON.stringify({
+        jsonrpc: "2.0",
+        id: `${LIFECYCLE_FOLLOW_REQUEST_ID}:${chainName}`,
+        method: "lifecycle_unstable_follow",
+        params: [],
+      }),
+    );
+  } catch (err: unknown) {
+    log.warn(
+      `[dot.li smoldot] lifecycle follow send failed for ${chainName}: ${err instanceof Error ? err.message : String(err)}`,
+    );
+  }
+}
+
 /**
  * Create smoldot using `start()`, which runs on the current thread.
  *

From e4fd7df471d12cbbf2a162cfb9a359cf12ad4f29 Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Wed, 5 Aug 2026 12:03:25 +0100
Subject: [PATCH 02/24] Fix formatting

---
 apps/host/src/main.ts            | 7 +++----
 packages/resolver/src/smoldot.ts | 6 ++++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index 3b83a186..32f2f2ce 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -1200,12 +1200,11 @@ async function main(): Promise<void> {
       ) {
         return;
       }
-      const chainName = typeof data.chainName === "string" ? data.chainName : "";
+      const chainName =
+        typeof data.chainName === "string" ? data.chainName : "";
       const lifecycleKind =
         typeof data.lifecycleKind === "string" ? data.lifecycleKind : "";
-      log.warn(
-        `[dot.li lifecycle] ${chainName} kind=${lifecycleKind}`,
-      );
+      log.warn(`[dot.li lifecycle] ${chainName} kind=${lifecycleKind}`);
       if (!chainName.includes("asset-hub")) {
         return;
       }
diff --git a/packages/resolver/src/smoldot.ts b/packages/resolver/src/smoldot.ts
index 8ba95e70..39b8afa7 100644
--- a/packages/resolver/src/smoldot.ts
+++ b/packages/resolver/src/smoldot.ts
@@ -159,7 +159,6 @@ const CONNECTION_ISSUE_PATTERNS = [
 // Chosen so it cannot collide with the numeric ids polkadot-api uses.
 const LIFECYCLE_FOLLOW_REQUEST_ID = "__dotli_lifecycle_follow__";
 
-
 function smoldotLogCallback(
   level: number,
   target: string,
@@ -178,7 +177,10 @@ function smoldotLogCallback(
   // `json-rpc-<chainName>` target emits the response JSON verbatim. We match
   // the schema we ourselves define, so this is subscribing to a structured
   // side-channel, not scraping human prose.
-  if (target.startsWith("json-rpc-") && message.includes("lifecycle_unstable_followEvent")) {
+  if (
+    target.startsWith("json-rpc-") &&
+    message.includes("lifecycle_unstable_followEvent")
+  ) {
     parseAndEmitLifecycle(target, message);
   }
 

From 57ab0e19a438ed7a94fb43662763651eefcae009 Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Wed, 5 Aug 2026 12:32:05 +0100
Subject: [PATCH 03/24] Document the maxLogLevel coupling, unit-test the
 lifecycle parser, and demote the host lifecycle log to debug

---
 apps/host/src/main.ts                   |   7 +-
 packages/resolver/src/smoldot.ts        |  10 ++-
 packages/resolver/tests/smoldot.test.ts | 106 ++++++++++++++++++++++++
 3 files changed, 119 insertions(+), 4 deletions(-)

diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index 32f2f2ce..4261ccfa 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -1189,6 +1189,9 @@ async function main(): Promise<void> {
   // storage. Events are emitted from the protocol iframe, which owns
   // smoldot, and reach this listener over the postMessage bridge. The
   // `statusToPhase` log-text path remains as a fallback.
+  // The loading bar tracks Asset Hub sync. Events from other chains are
+  // logged but never advance a phase.
+  const LIFECYCLE_PHASE_CHAIN = "asset-hub";
   if (chainBackend !== "rpc-gateway") {
     window.addEventListener("message", (event: MessageEvent) => {
       const data = event.data as Record<string, unknown> | null;
@@ -1204,8 +1207,8 @@ async function main(): Promise<void> {
         typeof data.chainName === "string" ? data.chainName : "";
       const lifecycleKind =
         typeof data.lifecycleKind === "string" ? data.lifecycleKind : "";
-      log.warn(`[dot.li lifecycle] ${chainName} kind=${lifecycleKind}`);
-      if (!chainName.includes("asset-hub")) {
+      log.debug(`[dot.li lifecycle] ${chainName} kind=${lifecycleKind}`);
+      if (!chainName.includes(LIFECYCLE_PHASE_CHAIN)) {
         return;
       }
       if (lifecycleKind === "firstPeer") {
diff --git a/packages/resolver/src/smoldot.ts b/packages/resolver/src/smoldot.ts
index 39b8afa7..0f5d7e27 100644
--- a/packages/resolver/src/smoldot.ts
+++ b/packages/resolver/src/smoldot.ts
@@ -332,8 +332,8 @@ function attachPersistence(
   schedulePersistence(chainName, tap);
   // Fire the lifecycle subscription without wrapping the chain object.
   // Polkadot-api consumes `jsonRpcResponses` iteratively and interposing on
-  // that path is racy. Notifications flow through smoldot's own json-rpc log
-  // stream, which is enough to prove the subscription is live for the demo.
+  // that path is racy. Notifications are read back from smoldot's own
+  // json-rpc log stream instead (see parseAndEmitLifecycle).
   attachLifecycleFollow(chainName, tap.chain);
   return tap.chain;
 }
@@ -368,6 +368,9 @@ export function getSmoldotDirect(): SmoldotClient {
   }
   log.warn("[dot.li smoldot] Creating smoldot via start() (current thread)");
   smoldotInstance = startSmoldotDirect({
+    // Lifecycle detection reads JSON-RPC payloads out of the debug log
+    // stream (parseAndEmitLifecycle). Lowering this level silently
+    // disables lifecycle events.
     maxLogLevel: 5,
     logCallback: smoldotLogCallback,
     // Smoldot's own auto-detection (no-auto-bytecode-browser.js) is buggy
@@ -394,6 +397,9 @@ export function getSmoldot(): SmoldotClient {
   }
   log.warn("[dot.li smoldot] Creating smoldot via startFromWorker()");
   smoldotInstance = startFromWorker(new SmWorker(), {
+    // Lifecycle detection reads JSON-RPC payloads out of the debug log
+    // stream (parseAndEmitLifecycle). Lowering this level silently
+    // disables lifecycle events.
     maxLogLevel: 5,
     logCallback: smoldotLogCallback,
     forbidNonLocalWs: true,
diff --git a/packages/resolver/tests/smoldot.test.ts b/packages/resolver/tests/smoldot.test.ts
index d53d1147..f8478b9f 100644
--- a/packages/resolver/tests/smoldot.test.ts
+++ b/packages/resolver/tests/smoldot.test.ts
@@ -49,12 +49,14 @@ vi.mock("@dotli/resolver/chain-specs", () => ({
 
 let getSmoldot: typeof import("@dotli/resolver/smoldot").getSmoldot;
 let getRelayChain: typeof import("@dotli/resolver/smoldot").getRelayChain;
+let onLifecycle: typeof import("@dotli/resolver/smoldot").onLifecycle;
 
 beforeEach(async () => {
   vi.resetModules();
   const mod = await import("@dotli/resolver/smoldot");
   getSmoldot = mod.getSmoldot;
   getRelayChain = mod.getRelayChain;
+  onLifecycle = mod.onLifecycle;
 });
 
 describe("getSmoldot", () => {
@@ -83,3 +85,107 @@ describe("getRelayChain", () => {
     expect(typeof chain.sendJsonRpc).toBe("function");
   });
 });
+
+describe("onLifecycle", () => {
+  // Grab the logCallback the module hands to smoldot so tests can feed it
+  // synthetic json-rpc log lines.
+  async function captureLogCallback(): Promise<
+    (level: number, target: string, message: string) => void
+  > {
+    getSmoldot();
+    const { startFromWorker } =
+      await import("polkadot-api/smoldot/from-worker");
+    const options = vi.mocked(startFromWorker).mock.lastCall?.[1];
+    if (options?.logCallback === undefined) {
+      throw new Error("logCallback was not passed to startFromWorker");
+    }
+    return options.logCallback;
+  }
+
+  function followEventLine(chain: string, kind: string): string {
+    const payload = JSON.stringify({
+      jsonrpc: "2.0",
+      method: "lifecycle_unstable_followEvent",
+      params: { subscription: "lf-1", result: { kind } },
+    });
+    return `chain=${chain} response=${payload}`;
+  }
+
+  it("delivers events parsed from the json-rpc log stream", async () => {
+    const logCallback = await captureLogCallback();
+    const events: unknown[] = [];
+    onLifecycle((event) => events.push(event));
+
+    logCallback(
+      4,
+      "json-rpc-asset-hub-paseo",
+      followEventLine("asset-hub-paseo", "firstPeer"),
+    );
+    logCallback(
+      4,
+      "json-rpc-asset-hub-paseo",
+      followEventLine("asset-hub-paseo", "bootstrapComplete"),
+    );
+
+    expect(events).toEqual([
+      { chainName: "asset-hub-paseo", kind: "firstPeer" },
+      { chainName: "asset-hub-paseo", kind: "bootstrapComplete" },
+    ]);
+  });
+
+  it("replays earlier events to a late subscriber", async () => {
+    const logCallback = await captureLogCallback();
+    logCallback(4, "json-rpc-paseo", followEventLine("paseo", "firstPeer"));
+
+    const events: unknown[] = [];
+    onLifecycle((event) => events.push(event));
+
+    expect(events).toEqual([{ chainName: "paseo", kind: "firstPeer" }]);
+  });
+
+  it("ignores malformed and non-lifecycle payloads", async () => {
+    const logCallback = await captureLogCallback();
+    const events: unknown[] = [];
+    onLifecycle((event) => events.push(event));
+
+    // Mentions the method but carries no response payload.
+    logCallback(4, "json-rpc-paseo", "sent lifecycle_unstable_followEvent");
+    // Truncated JSON.
+    logCallback(
+      4,
+      "json-rpc-paseo",
+      'response={"method":"lifecycle_unstable_followEvent"',
+    );
+    // A different method that happens to mention the string.
+    logCallback(
+      4,
+      "json-rpc-paseo",
+      followEventLine("paseo", "firstPeer").replace(
+        "followEvent",
+        "followEvent_other",
+      ),
+    );
+    // A kind outside the union.
+    logCallback(4, "json-rpc-paseo", followEventLine("paseo", "somethingElse"));
+    // Right payload on a non json-rpc target.
+    logCallback(4, "sync-service-paseo", followEventLine("paseo", "firstPeer"));
+
+    expect(events).toEqual([]);
+  });
+
+  it("stops delivering after unsubscribe", async () => {
+    const logCallback = await captureLogCallback();
+    const events: unknown[] = [];
+    const unsubscribe = onLifecycle((event) => events.push(event));
+
+    logCallback(4, "json-rpc-paseo", followEventLine("paseo", "firstPeer"));
+    unsubscribe();
+    logCallback(
+      4,
+      "json-rpc-paseo",
+      followEventLine("paseo", "bootstrapComplete"),
+    );
+
+    expect(events).toEqual([{ chainName: "paseo", kind: "firstPeer" }]);
+  });
+});

From 3421ed9ce374915341428e129a460134d841ba86 Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Wed, 5 Aug 2026 15:19:41 +0100
Subject: [PATCH 04/24] Show a live peer count and honest stall copy on the
 loading screen via system_health polling and widened lifecycle events

---
 apps/host/index.html                          |   1 +
 apps/host/src/main.ts                         |  75 ++--
 apps/host/tests/functional/resolution.spec.ts |  64 ++++
 apps/protocol/src/main.ts                     |  32 +-
 packages/protocol/src/client.ts               |  78 ++++
 packages/protocol/src/messages.ts             |  31 ++
 packages/resolver/src/resolve.ts              |   9 +-
 packages/resolver/src/smoldot.ts              | 343 ++++++++++++++++--
 packages/resolver/tests/smoldot.test.ts       | 319 +++++++++++++---
 packages/ui/src/styles/base.css               |  26 +-
 packages/ui/src/styles/themes.css             |   7 +
 packages/ui/src/ui.ts                         |  22 +-
 packages/ui/tests/ui.test.ts                  |  83 +++++
 13 files changed, 981 insertions(+), 109 deletions(-)
 create mode 100644 packages/ui/tests/ui.test.ts

diff --git a/apps/host/index.html b/apps/host/index.html
index dfba7d47..06b3c093 100644
--- a/apps/host/index.html
+++ b/apps/host/index.html
@@ -235,6 +235,7 @@ <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
                 </div>
                 <div class="loading-text" id="loading-text">
                     <p id="status" aria-live="polite">Reaching out</p>
+                    <p class="loading-detail" id="loading-detail" aria-hidden="true"></p>
                     <p class="loading-hint" id="loading-hint"></p>
                 </div>
             </div>
diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index 4261ccfa..a8230df7 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -31,6 +31,7 @@ import {
   showLanding,
   initPhases,
   advancePhase,
+  setStatusDetail,
   stopStatusTick,
   listenForSandboxStatus,
   showGatewayEscape,
@@ -44,6 +45,8 @@ import {
 } from "@dotli/ui/bulletin-bitswap";
 import {
   ensureProtocolFrame,
+  onProtocolHealth,
+  onProtocolLifecycle,
   resetProtocolFrame,
   resolveDotNameRemote,
   resolveExecutableManifestRemote,
@@ -1186,35 +1189,63 @@ async function main(): Promise<void> {
   // scraping log prose. `firstPeer` on the Asset Hub means a peer was
   // discovered, so the sync band can start crawling. `bootstrapComplete`
   // means the first finalized block landed, so the resolver can read
-  // storage. Events are emitted from the protocol iframe, which owns
-  // smoldot, and reach this listener over the postMessage bridge. The
-  // `statusToPhase` log-text path remains as a fallback.
-  // The loading bar tracks Asset Hub sync. Events from other chains are
-  // logged but never advance a phase.
-  const LIFECYCLE_PHASE_CHAIN = "asset-hub";
+  // storage. Health samples put a live peer count under the headline while
+  // the chain bootstraps, and stall events replace it with honest copy.
+  // Events are emitted from the protocol iframe, which owns smoldot, and
+  // arrive through the protocol client's origin- and source-gated listener.
+  // The `statusToPhase` log-text path remains as a fallback.
   if (chainBackend !== "rpc-gateway") {
-    window.addEventListener("message", (event: MessageEvent) => {
-      const data = event.data as Record<string, unknown> | null;
-      if (
-        data === null ||
-        typeof data !== "object" ||
-        data.namespace !== "dotli:protocol" ||
-        data.kind !== "lifecycle"
-      ) {
+    // Only the chains on the resolution critical path may drive the UI.
+    // Bulletin, People, and the custom relay sync in the background; a
+    // stall there is not what the user is waiting on.
+    const uiChains = new Set(["relay", "asset-hub"]);
+    let peerDetail = "";
+    // Once the Asset Hub bootstrap completes, the sync detail is over:
+    // an in-flight health response or a late background stall must not
+    // resurrect it under "Resolving".
+    let syncDetailDone = false;
+    onProtocolHealth((event) => {
+      if (syncDetailDone || event.chain !== "asset-hub") {
         return;
       }
-      const chainName =
-        typeof data.chainName === "string" ? data.chainName : "";
-      const lifecycleKind =
-        typeof data.lifecycleKind === "string" ? data.lifecycleKind : "";
-      log.debug(`[dot.li lifecycle] ${chainName} kind=${lifecycleKind}`);
-      if (!chainName.includes(LIFECYCLE_PHASE_CHAIN)) {
+      peerDetail = `${String(event.peers)} ${event.peers === 1 ? "peer" : "peers"}`;
+      setStatusDetail(peerDetail);
+    });
+    onProtocolLifecycle((event) => {
+      log.debug(
+        `[dot.li lifecycle] ${event.chain} kind=${event.lifecycleKind}`,
+      );
+      if (!uiChains.has(event.chain)) {
+        return;
+      }
+      if (event.lifecycleKind === "stalled" && !syncDetailDone) {
+        // No trailing ellipsis: the headline already ends in one, and the
+        // spinner and bar sheen carry "in progress". Lowercase and
+        // terminal-punctuation-free to match the "2 peers" readout this line
+        // alternates with.
+        setStatusDetail(
+          event.reason === "noPeers"
+            ? "searching for peers"
+            : "syncing, no progress yet",
+        );
+        return;
+      }
+      if (event.lifecycleKind === "recovered" && !syncDetailDone) {
+        setStatusDetail(peerDetail);
+        return;
+      }
+      if (event.chain !== "asset-hub") {
         return;
       }
-      if (lifecycleKind === "firstPeer") {
+      if (event.lifecycleKind === "firstPeer") {
         advancePhase(2);
-      } else if (lifecycleKind === "bootstrapComplete") {
+      } else if (event.lifecycleKind === "bootstrapComplete") {
         advancePhase(3);
+        // The count is meaningless once sync is done; clear rather than
+        // letting a stale number sit under "Resolving".
+        syncDetailDone = true;
+        peerDetail = "";
+        setStatusDetail("");
       }
     });
   }
diff --git a/apps/host/tests/functional/resolution.spec.ts b/apps/host/tests/functional/resolution.spec.ts
index 3736e54d..e6ec3d06 100644
--- a/apps/host/tests/functional/resolution.spec.ts
+++ b/apps/host/tests/functional/resolution.spec.ts
@@ -36,4 +36,68 @@ test.describe("Resolution across chain backends", () => {
       }
     });
   }
+
+  test(`As a user opening ${DOMAIN}.dot via smoldot-direct, the shell receives live peer counts while syncing`, async ({
+    browser,
+  }) => {
+    // Given
+    const { context, page } = await setupTest(browser, {
+      backend: "smoldot-direct",
+    });
+
+    try {
+      // Record health envelopes as they reach the host window. On a fast
+      // bootstrap the rendered "N peers" line can appear and clear between
+      // polls, so the envelope is the reliable signal; the visible text is
+      // accepted as an alternative when the sync window is long enough.
+      await page.addInitScript(() => {
+        const seen: unknown[] = [];
+        (
+          window as unknown as { __dotliHealthSeen: unknown[] }
+        ).__dotliHealthSeen = seen;
+        window.addEventListener("message", (event: MessageEvent) => {
+          const data = event.data as {
+            namespace?: string;
+            kind?: string;
+            peers?: number;
+          } | null;
+          if (
+            data !== null &&
+            typeof data === "object" &&
+            data.namespace === "dotli:protocol" &&
+            data.kind === "health" &&
+            typeof data.peers === "number"
+          ) {
+            seen.push(data);
+          }
+        });
+      });
+
+      // When
+      await page.goto(BASE_URL, { waitUntil: "commit" });
+
+      // Then: a live peer count flows to the shell during bootstrap, and
+      // resolution still completes.
+      const sawPeers = page.waitForFunction(
+        () => {
+          const seen = (window as unknown as { __dotliHealthSeen?: unknown[] })
+            .__dotliHealthSeen;
+          if (seen !== undefined && seen.length > 0) {
+            return true;
+          }
+          return /\d+ peers?/.test(
+            document.getElementById("loading-detail")?.textContent ?? "",
+          );
+        },
+        undefined,
+        { timeout: TIMEOUT_MS },
+      );
+      await Promise.all([
+        sawPeers,
+        waitForResolutionOutcome(page, TIMEOUT_MS, "smoldot-direct"),
+      ]);
+    } finally {
+      await context.close();
+    }
+  });
 });
diff --git a/apps/protocol/src/main.ts b/apps/protocol/src/main.ts
index 16d68b92..ac3025d3 100644
--- a/apps/protocol/src/main.ts
+++ b/apps/protocol/src/main.ts
@@ -683,7 +683,12 @@ async function initDirectMode(): Promise<void> {
     setResolverPeopleProvider,
     waitForPeopleFinalized,
   } = resolve;
-  const { terminateSmoldot, onSmoldotFatal, onLifecycle } = smoldotMod;
+  const { terminateSmoldot, onSmoldotFatal, onLifecycle, onHealth } =
+    smoldotMod;
+
+  // Peer-count polling is only worth the traffic when a loading UI can
+  // observe it. Direct mode is that case; the SharedWorker never enables it.
+  smoldotMod.enableHealthPolling();
 
   // On a smoldot panic, broadcast a fatal envelope to the parent. Direct
   // mode has no SharedWorker in the loop, so we post straight up to the
@@ -702,9 +707,10 @@ async function initDirectMode(): Promise<void> {
     }
   });
 
-  // Forward smoldot lifecycle events to the host shell so the loading bar can
-  // advance on real sync signals instead of on log-scraped prose. This iframe
-  // owns the smoldot instance. The host has no direct handle on it.
+  // Forward smoldot lifecycle events and health samples to the host shell
+  // so the loading bar can advance on real sync signals instead of on
+  // log-scraped prose. This iframe owns the smoldot instance. The host has
+  // no direct handle on it.
   onLifecycle((event) => {
     if (window.parent === window) {
       return;
@@ -713,8 +719,24 @@ async function initDirectMode(): Promise<void> {
       {
         namespace: "dotli:protocol",
         kind: "lifecycle",
-        chainName: event.chainName,
+        chain: event.chain,
         lifecycleKind: event.kind,
+        ...(event.reason !== undefined ? { reason: event.reason } : {}),
+      },
+      "*",
+    );
+  });
+  onHealth((event) => {
+    if (window.parent === window) {
+      return;
+    }
+    window.parent.postMessage(
+      {
+        namespace: "dotli:protocol",
+        kind: "health",
+        chain: event.chain,
+        peers: event.peers,
+        isSyncing: event.isSyncing,
       },
       "*",
     );
diff --git a/packages/protocol/src/client.ts b/packages/protocol/src/client.ts
index de3baa14..e1248d09 100644
--- a/packages/protocol/src/client.ts
+++ b/packages/protocol/src/client.ts
@@ -25,6 +25,8 @@ import { m } from "@dotli/metrics/metrics";
 import * as S from "@dotli/metrics/spans";
 import {
   isProtocolEnvelope,
+  type ProtocolHealthEnvelope,
+  type ProtocolLifecycleEnvelope,
   type ProtocolRequestEnvelope,
   type ProtocolRequestMap,
   type ProtocolRequestMethod,
@@ -63,6 +65,10 @@ let protocolReadyPromise: Promise<void> | null = null;
 const pendingRequests = new Map<string, PendingRequest>();
 const chainConnections = new Map<string, RemoteChainConnection>();
 const sharedAuthListeners = new Set<SharedAuthStorageListener>();
+const lifecycleListeners = new Set<
+  (event: ProtocolLifecycleEnvelope) => void
+>();
+const healthListeners = new Set<(event: ProtocolHealthEnvelope) => void>();
 let listenerBound = false;
 let protocolReady = false;
 interface ReadyWaiter {
@@ -216,6 +222,47 @@ function bindMessageListener(): void {
         }
         return;
       }
+      case "lifecycle": {
+        if (
+          typeof msg.chain !== "string" ||
+          typeof msg.lifecycleKind !== "string"
+        ) {
+          return;
+        }
+        for (const cb of lifecycleListeners) {
+          try {
+            cb(msg);
+          } catch (err: unknown) {
+            log.error(
+              "[dot.li protocol] Lifecycle listener threw:",
+              err instanceof Error ? err.message : err,
+            );
+          }
+        }
+        return;
+      }
+      case "health": {
+        if (
+          typeof msg.chain !== "string" ||
+          !Number.isInteger(msg.peers) ||
+          msg.peers < 0 ||
+          msg.peers > 10_000 ||
+          typeof msg.isSyncing !== "boolean"
+        ) {
+          return;
+        }
+        for (const cb of healthListeners) {
+          try {
+            cb(msg);
+          } catch (err: unknown) {
+            log.error(
+              "[dot.li protocol] Health listener threw:",
+              err instanceof Error ? err.message : err,
+            );
+          }
+        }
+        return;
+      }
       case "fatal":
       case "init-failed": {
         // Smoldot (or the protocol iframe) has died, either crashed
@@ -685,6 +732,37 @@ export function subscribeSharedAuthStorage(
   };
 }
 
+/**
+ * Subscribe to smoldot lifecycle events forwarded by the protocol iframe.
+ * Events arrive only after the origin- and source-gated message listener
+ * validates the envelope, so callers never see spoofable raw messages.
+ * Returns an unsubscribe function.
+ */
+export function onProtocolLifecycle(
+  listener: (event: ProtocolLifecycleEnvelope) => void,
+): () => void {
+  bindMessageListener();
+  lifecycleListeners.add(listener);
+  return () => {
+    lifecycleListeners.delete(listener);
+  };
+}
+
+/**
+ * Subscribe to chain `system_health` samples forwarded by the protocol
+ * iframe during bootstrap. Same gating as `onProtocolLifecycle`.
+ * Returns an unsubscribe function.
+ */
+export function onProtocolHealth(
+  listener: (event: ProtocolHealthEnvelope) => void,
+): () => void {
+  bindMessageListener();
+  healthListeners.add(listener);
+  return () => {
+    healthListeners.delete(listener);
+  };
+}
+
 export function isRemoteChainSupported(genesisHash: string): boolean {
   // Advertise only what the *active* backend can actually serve. Gateway mode
   // bridges a curated RPC subset, while smoldot can run any configured chain.
diff --git a/packages/protocol/src/messages.ts b/packages/protocol/src/messages.ts
index b693efdc..c6eecc16 100644
--- a/packages/protocol/src/messages.ts
+++ b/packages/protocol/src/messages.ts
@@ -99,6 +99,33 @@ export interface ProtocolInitFailedEnvelope {
   message: string;
 }
 
+/**
+ * Unsolicited broadcast of a smoldot lifecycle event observed inside the
+ * protocol iframe. `chain` is the resolver's logical chain key ("relay",
+ * "asset-hub", "bulletin", "people", "custom-relay"), not smoldot's
+ * internal chain id. Drives the host loading bar.
+ */
+export interface ProtocolLifecycleEnvelope {
+  namespace: "dotli:protocol";
+  kind: "lifecycle";
+  chain: string;
+  lifecycleKind: string;
+  reason?: string;
+}
+
+/**
+ * Unsolicited broadcast of a chain's `system_health` sample observed inside
+ * the protocol iframe. Emitted only while health polling runs (chain
+ * bootstrap). Drives the live peer count on the host loading screen.
+ */
+export interface ProtocolHealthEnvelope {
+  namespace: "dotli:protocol";
+  kind: "health";
+  chain: string;
+  peers: number;
+  isSyncing: boolean;
+}
+
 // Unsolicited notification from the host iframe to its parent window when a
 // sibling tab writes or clears a shared-auth storage key. Drives cross-tab
 // `StorageAdapter.subscribe` callbacks. See `@dotli/protocol/client`
@@ -122,6 +149,8 @@ export type ProtocolEnvelope =
   | ProtocolReadyEnvelope
   | ProtocolFatalEnvelope
   | ProtocolInitFailedEnvelope
+  | ProtocolLifecycleEnvelope
+  | ProtocolHealthEnvelope
   | ProtocolAuthStorageChangedEnvelope;
 
 const VALID_KINDS = new Set([
@@ -133,6 +162,8 @@ const VALID_KINDS = new Set([
   "ready",
   "fatal",
   "init-failed",
+  "lifecycle",
+  "health",
   "auth-storage-changed",
 ]);
 
diff --git a/packages/resolver/src/resolve.ts b/packages/resolver/src/resolve.ts
index d8d49bd3..324f5f2e 100644
--- a/packages/resolver/src/resolve.ts
+++ b/packages/resolver/src/resolve.ts
@@ -46,8 +46,13 @@ export type {
 } from "./access-raw-storage";
 export { statusToPhase } from "./access-raw-storage";
 export { getSmoldot, getSmoldotDirect, getRelayChain } from "./smoldot";
-export { onConnectionIssue, onLifecycle } from "./smoldot";
-export type { LifecycleEvent, LifecycleKind } from "./smoldot";
+export {
+  onConnectionIssue,
+  onLifecycle,
+  onHealth,
+  enableHealthPolling,
+} from "./smoldot";
+export type { LifecycleEvent, LifecycleKind, HealthEvent } from "./smoldot";
 
 let clientInstance: SubstrateClient | null = null;
 let apiInstance: Api | null = null;
diff --git a/packages/resolver/src/smoldot.ts b/packages/resolver/src/smoldot.ts
index 0f5d7e27..ed477402 100644
--- a/packages/resolver/src/smoldot.ts
+++ b/packages/resolver/src/smoldot.ts
@@ -58,25 +58,45 @@ export function onConnectionIssue(cb: ConnectionIssueCallback): () => void {
   };
 }
 
-/** Lifecycle events emitted by smoldot's per-chain broadcaster over the `lifecycle_unstable_follow` JSON-RPC subscription. */
-export type LifecycleKind = "firstPeer" | "bootstrapComplete";
+/**
+ * Lifecycle events emitted by smoldot's per-chain broadcaster over the
+ * `lifecycle_unstable_follow` JSON-RPC subscription. Smoldot emits more
+ * kinds (connecting, modeDecision, warpSyncProgress, warpSyncFinished,
+ * stopped); this allowlist covers only what the loading UI consumes.
+ */
+export type LifecycleKind =
+  | "firstPeer"
+  | "bootstrapComplete"
+  | "stalled"
+  | "recovered";
+const LIFECYCLE_KINDS: ReadonlySet<string> = new Set([
+  "firstPeer",
+  "bootstrapComplete",
+  "stalled",
+  "recovered",
+]);
 export interface LifecycleEvent {
-  chainName: string;
+  /** Logical chain key: "relay", "asset-hub", "bulletin", "people", "custom-relay". */
+  chain: string;
   kind: LifecycleKind;
+  /** Set on `stalled` (and `recovered` as `previously`): why sync stopped progressing. */
+  reason?: string;
 }
 
 type LifecycleCallback = (event: LifecycleEvent) => void;
 const lifecycleListeners = new Set<LifecycleCallback>();
-const lifecycleHistory: LifecycleEvent[] = [];
+// Latest event per (chain, kind), insertion-ordered. Bounded, so late
+// subscribers replay at most kinds x chains events.
+const lifecycleHistory = new Map<string, LifecycleEvent>();
 
 /**
- * Subscribe to smoldot lifecycle events. Late subscribers receive the events
- * emitted so far in the current session (snapshot-on-subscribe), then continue
- * with live events. Returns an unsubscribe function.
+ * Subscribe to smoldot lifecycle events. Late subscribers receive the latest
+ * event per chain and kind (snapshot-on-subscribe), then continue with live
+ * events. Returns an unsubscribe function.
  */
 export function onLifecycle(cb: LifecycleCallback): () => void {
   lifecycleListeners.add(cb);
-  for (const event of lifecycleHistory) {
+  for (const event of lifecycleHistory.values()) {
     try {
       cb(event);
       // eslint-disable-next-line no-restricted-syntax -- defensive replay: one buggy late subscriber must not block registration.
@@ -90,7 +110,14 @@ export function onLifecycle(cb: LifecycleCallback): () => void {
 }
 
 function emitLifecycle(event: LifecycleEvent): void {
-  lifecycleHistory.push(event);
+  // `stalled` and `recovered` describe one condition; keeping both in the
+  // replay history would let a late subscriber end on the outdated half.
+  if (event.kind === "stalled") {
+    lifecycleHistory.delete(`${event.chain}:recovered`);
+  } else if (event.kind === "recovered") {
+    lifecycleHistory.delete(`${event.chain}:stalled`);
+  }
+  lifecycleHistory.set(`${event.chain}:${event.kind}`, event);
   for (const cb of lifecycleListeners) {
     try {
       cb(event);
@@ -101,6 +128,62 @@ function emitLifecycle(event: LifecycleEvent): void {
   }
 }
 
+/** A chain's `system_health` sample, polled during bootstrap. */
+export interface HealthEvent {
+  /** Logical chain key, same namespace as `LifecycleEvent.chain`. */
+  chain: string;
+  peers: number;
+  isSyncing: boolean;
+}
+
+type HealthCallback = (event: HealthEvent) => void;
+const healthListeners = new Set<HealthCallback>();
+const lastHealth = new Map<string, HealthEvent>();
+
+/**
+ * Subscribe to chain health samples. Late subscribers receive the last known
+ * sample per chain, then live changes. Returns an unsubscribe function.
+ */
+export function onHealth(cb: HealthCallback): () => void {
+  healthListeners.add(cb);
+  for (const event of lastHealth.values()) {
+    try {
+      cb(event);
+      // eslint-disable-next-line no-restricted-syntax -- defensive replay: one buggy late subscriber must not block registration.
+    } catch {
+      /* listener threw during replay */
+    }
+  }
+  return () => {
+    healthListeners.delete(cb);
+  };
+}
+
+function emitHealth(event: HealthEvent): void {
+  const prev = lastHealth.get(event.chain);
+  if (prev?.peers === event.peers && prev.isSyncing === event.isSyncing) {
+    return;
+  }
+  lastHealth.set(event.chain, event);
+  for (const cb of healthListeners) {
+    try {
+      cb(event);
+      // eslint-disable-next-line no-restricted-syntax -- defensive multicast: one buggy subscriber must not block the broadcast.
+    } catch {
+      /* listener threw */
+    }
+  }
+}
+
+// Health polling is opt-in per process. The protocol iframe's direct mode
+// enables it; the SharedWorker never does, so its long-lived smoldot does
+// not poll for a UI that cannot observe it.
+let healthPollingEnabled = false;
+
+export function enableHealthPolling(): void {
+  healthPollingEnabled = true;
+}
+
 // Smoldot's WASM can panic (e.g., the "Option::unwrap() on a None value"
 // crash during relay-chain sync). A panic leaves every chain dead, and any
 // in-flight request would hang forever. The log callback catches the
@@ -155,9 +238,20 @@ const CONNECTION_ISSUE_PATTERNS = [
   "all bootnodes",
 ];
 
-// Reserved id used for our internal `lifecycle_unstable_follow` request.
-// Chosen so it cannot collide with the numeric ids polkadot-api uses.
+// Reserved id prefixes for our internal JSON-RPC requests. Chosen so they
+// cannot collide with the numeric ids polkadot-api uses, and so responses
+// can be recognized in the log stream. The suffix after ":" is the logical
+// chain key, which is how responses are attributed to chains without
+// relying on smoldot's internal chain id.
 const LIFECYCLE_FOLLOW_REQUEST_ID = "__dotli_lifecycle_follow__";
+const HEALTH_REQUEST_ID = "__dotli_health__";
+
+// smoldot's log target is `json-rpc-<chain id from the chain spec>`, while
+// requests are attributed by our logical keys ("relay", "asset-hub", ...).
+// The reply to our follow request carries the logical key in its id and
+// arrives on the chain's log target, which lets us learn the mapping
+// without hardcoding chain-spec ids per network.
+const chainKeyByLogName = new Map<string, string>();
 
 function smoldotLogCallback(
   level: number,
@@ -171,17 +265,20 @@ function smoldotLogCallback(
     log.debug(`[smoldot:${target}] ${message}`);
   }
 
-  // Lifecycle events flow through the chain's JSON-RPC pipe, which is owned by
-  // polkadot-api. Rather than wrap the chain and race for messages, we observe
-  // the payloads passing through smoldot's own debug log stream: every
-  // `json-rpc-<chainName>` target emits the response JSON verbatim. We match
-  // the schema we ourselves define, so this is subscribing to a structured
-  // side-channel, not scraping human prose.
+  // Lifecycle and health payloads flow through the chain's JSON-RPC pipe,
+  // which is owned by polkadot-api. Rather than wrap the chain and race for
+  // messages, we observe the payloads passing through smoldot's own debug
+  // log stream: every response is logged on the `json-rpc-<chain>` target
+  // as `json-rpc-response-yielded; response=<json, truncated at 250 chars>`.
+  // We match schemas we ourselves define (our reserved request ids and the
+  // followEvent notification), so this is a structured side-channel, not
+  // prose scraping.
   if (
     target.startsWith("json-rpc-") &&
-    message.includes("lifecycle_unstable_followEvent")
+    (message.includes("lifecycle_unstable_followEvent") ||
+      message.includes("__dotli_"))
   ) {
-    parseAndEmitLifecycle(target, message);
+    handleSideChannelLine(target, message);
   }
 
   // A panic is terminal with no recovery. Smoldot's log message starts
@@ -210,35 +307,96 @@ function smoldotLogCallback(
   }
 }
 
-function parseAndEmitLifecycle(target: string, message: string): void {
+function handleSideChannelLine(target: string, message: string): void {
   // Smoldot emits the response JSON verbatim after a literal `response=`
-  // prefix in the log line.
+  // key in the log line. Request echoes use `request=` and fall out here.
   const responseStart = message.indexOf("response=");
   if (responseStart === -1) {
     return;
   }
   const jsonPart = message.slice(responseStart + "response=".length);
+  const logName = target.slice("json-rpc-".length);
   try {
     const parsed = JSON.parse(jsonPart) as {
+      id?: string;
       method?: string;
-      params?: { result?: { kind?: LifecycleKind } };
+      result?: unknown;
+      params?: {
+        result?: { kind?: string; reason?: string; previously?: string };
+      };
     };
-    if (parsed.method !== "lifecycle_unstable_followEvent") {
+    if (parsed.method === "lifecycle_unstable_followEvent") {
+      emitLifecycleNotification(logName, parsed.params?.result);
       return;
     }
-    const kind = parsed.params?.result?.kind;
-    if (kind !== "firstPeer" && kind !== "bootstrapComplete") {
+    if (typeof parsed.id !== "string") {
       return;
     }
-    // Strip the `json-rpc-` prefix to get the chain name for the event.
-    const chainName = target.slice("json-rpc-".length);
-    emitLifecycle({ chainName, kind });
-    // eslint-disable-next-line no-restricted-syntax -- best-effort parse of a smoldot debug log line: any non-JSON or unexpected shape is expected and must not spam log.error.
+    if (parsed.id.startsWith(`${LIFECYCLE_FOLLOW_REQUEST_ID}:`)) {
+      // Reply to our follow request: learn which logical chain owns this
+      // log target so notifications (which carry no id) can be attributed.
+      chainKeyByLogName.set(
+        logName,
+        parsed.id.slice(LIFECYCLE_FOLLOW_REQUEST_ID.length + 1),
+      );
+      return;
+    }
+    if (parsed.id.startsWith(`${HEALTH_REQUEST_ID}:`)) {
+      handleHealthResponse(parsed.id, parsed.result);
+    }
+    // eslint-disable-next-line no-restricted-syntax -- best-effort parse of a smoldot debug log line: non-JSON or truncated payloads are expected and must not spam log.error.
   } catch {
-    /* malformed response payload, skip */
+    /* malformed or truncated response payload, skip */
   }
 }
 
+function emitLifecycleNotification(
+  logName: string,
+  result: { kind?: string; reason?: string; previously?: string } | undefined,
+): void {
+  const kind = result?.kind;
+  if (kind === undefined || !LIFECYCLE_KINDS.has(kind)) {
+    return;
+  }
+  const chain = chainKeyByLogName.get(logName) ?? logName;
+  if (kind === "bootstrapComplete") {
+    // The chain is usable; peer-count polling has served its purpose.
+    healthPollers.get(chain)?.stop();
+  }
+  const reason =
+    kind === "stalled"
+      ? result?.reason
+      : kind === "recovered"
+        ? result?.previously
+        : undefined;
+  emitLifecycle({
+    chain,
+    kind: kind as LifecycleKind,
+    ...(typeof reason === "string" ? { reason } : {}),
+  });
+}
+
+function handleHealthResponse(id: string, result: unknown): void {
+  const rest = id.slice(HEALTH_REQUEST_ID.length + 1);
+  const chain = rest.slice(0, rest.lastIndexOf(":"));
+  if (chain === "") {
+    return;
+  }
+  healthPollers.get(chain)?.noteResponse();
+  const health = result as { peers?: unknown; isSyncing?: unknown } | null;
+  if (
+    health === null ||
+    typeof health !== "object" ||
+    typeof health.peers !== "number" ||
+    !Number.isInteger(health.peers) ||
+    health.peers < 0 ||
+    typeof health.isSyncing !== "boolean"
+  ) {
+    return;
+  }
+  emitHealth({ chain, peers: health.peers, isSyncing: health.isSyncing });
+}
+
 let smoldotInstance: SmoldotClient | null = null;
 let relayChainPromise: Promise<SmoldotChain> | null = null;
 
@@ -246,6 +404,7 @@ interface PersistenceEntry {
   tap: ChainDbTap;
   initialTimer: ReturnType<typeof setTimeout>;
   periodicTimer: ReturnType<typeof setInterval>;
+  healthPoller: HealthPoller | null;
 }
 const persistence = new Map<string, PersistenceEntry>();
 
@@ -303,7 +462,12 @@ function schedulePersistence(chainName: string, tap: ChainDbTap): void {
   }, 60_000);
   unrefHandle(initialTimer);
   unrefHandle(periodicTimer);
-  persistence.set(chainName, { tap, initialTimer, periodicTimer });
+  persistence.set(chainName, {
+    tap,
+    initialTimer,
+    periodicTimer,
+    healthPoller: null,
+  });
 }
 
 function teardownPersistence(chainName: string): void {
@@ -313,6 +477,7 @@ function teardownPersistence(chainName: string): void {
   }
   clearTimeout(entry.initialTimer);
   clearInterval(entry.periodicTimer);
+  entry.healthPoller?.stop();
   entry.tap.stop();
   persistence.delete(chainName);
 }
@@ -333,8 +498,14 @@ function attachPersistence(
   // Fire the lifecycle subscription without wrapping the chain object.
   // Polkadot-api consumes `jsonRpcResponses` iteratively and interposing on
   // that path is racy. Notifications are read back from smoldot's own
-  // json-rpc log stream instead (see parseAndEmitLifecycle).
+  // json-rpc log stream instead (see handleSideChannelLine).
   attachLifecycleFollow(chainName, tap.chain);
+  if (healthPollingEnabled) {
+    const entry = persistence.get(chainName);
+    if (entry !== undefined) {
+      entry.healthPoller = startHealthPolling(chainName, tap);
+    }
+  }
   return tap.chain;
 }
 
@@ -355,6 +526,108 @@ function attachLifecycleFollow(chainName: string, chain: SmoldotChain): void {
   }
 }
 
+interface HealthPoller {
+  stop(): void;
+  noteResponse(): void;
+}
+const healthPollers = new Map<string, HealthPoller>();
+
+const HEALTH_POLL_INTERVAL_MS = 1_000;
+const HEALTH_POLL_TIMEOUT_MS = 2_000;
+const HEALTH_POLL_MAX = 120;
+
+let healthWatchdogArmed = false;
+let healthResponseSeen = false;
+
+/**
+ * Poll `system_health` on a chain's JSON-RPC pipe during bootstrap so the
+ * loading UI can show a live peer count. Sequential by design: the next
+ * poll goes out one interval after the previous response is observed in
+ * the log stream, so a busy chain is never flooded; a 2s timeout resends
+ * when a response never surfaces. Stops on `bootstrapComplete` for the
+ * chain (see emitLifecycleNotification), chain teardown, a dead chain, or
+ * a hard poll cap.
+ */
+function startHealthPolling(chainName: string, tap: ChainDbTap): HealthPoller {
+  let stopped = false;
+  let polls = 0;
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  const stop = (): void => {
+    stopped = true;
+    if (timer !== null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    healthPollers.delete(chainName);
+  };
+
+  const schedule = (delayMs: number): void => {
+    if (timer !== null) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(send, delayMs);
+    unrefHandle(timer);
+  };
+
+  const send = (): void => {
+    if (stopped) {
+      return;
+    }
+    if (tap.isStopped() || polls >= HEALTH_POLL_MAX) {
+      stop();
+      return;
+    }
+    polls += 1;
+    try {
+      tap.chain.sendJsonRpc(
+        JSON.stringify({
+          jsonrpc: "2.0",
+          id: `${HEALTH_REQUEST_ID}:${chainName}:${String(polls)}`,
+          method: "system_health",
+          params: [],
+        }),
+      );
+    } catch {
+      // The chain was destroyed under us (terminate/remove); polling is
+      // best-effort and simply ends.
+      stop();
+      return;
+    }
+    schedule(HEALTH_POLL_TIMEOUT_MS);
+  };
+
+  const noteResponse = (): void => {
+    healthResponseSeen = true;
+    if (stopped) {
+      return;
+    }
+    schedule(HEALTH_POLL_INTERVAL_MS);
+  };
+
+  // The side-channel depends on smoldot's debug log format staying stable.
+  // If it breaks, lifecycle and health both go silently dead, so surface
+  // one warning per session when the first poll gets no observable reply.
+  if (!healthWatchdogArmed) {
+    healthWatchdogArmed = true;
+    const watchdog = setTimeout(() => {
+      if (!healthResponseSeen) {
+        log.warn(
+          "[dot.li smoldot] health side-channel not observed within 5s; loading detail will not update",
+        );
+      }
+    }, 5_000);
+    unrefHandle(watchdog);
+  }
+
+  const poller = { stop, noteResponse };
+  healthPollers.set(chainName, poller);
+  // Poll immediately: on a warm start the chain bootstraps in well under a
+  // second and a delayed first poll would never produce a sample.
+  send();
+  return poller;
+}
+
 /**
  * Create smoldot using `start()`, which runs on the current thread.
  *
@@ -430,6 +703,12 @@ export function terminateSmoldot(): void {
     /* already destroyed or crashed, safe to ignore */
   }
   teardownAllPersistence();
+  // The next smoldot instance re-learns chain identities and re-emits its
+  // own lifecycle; stale mappings or replayed events from the dead session
+  // would mislabel or suppress the new one's signals.
+  chainKeyByLogName.clear();
+  lifecycleHistory.clear();
+  lastHealth.clear();
   smoldotInstance = null;
   relayChainPromise = null;
   dappAssetHubPromise = null;
diff --git a/packages/resolver/tests/smoldot.test.ts b/packages/resolver/tests/smoldot.test.ts
index f8478b9f..b666419e 100644
--- a/packages/resolver/tests/smoldot.test.ts
+++ b/packages/resolver/tests/smoldot.test.ts
@@ -1,7 +1,7 @@
 // Copyright 2026 Parity Technologies (UK) Ltd.
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import { describe, it, expect, vi, beforeEach } from "vitest";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 
 vi.mock("polkadot-api/smoldot", () => ({
   start: vi.fn(() => ({
@@ -50,13 +50,20 @@ vi.mock("@dotli/resolver/chain-specs", () => ({
 let getSmoldot: typeof import("@dotli/resolver/smoldot").getSmoldot;
 let getRelayChain: typeof import("@dotli/resolver/smoldot").getRelayChain;
 let onLifecycle: typeof import("@dotli/resolver/smoldot").onLifecycle;
+let onHealth: typeof import("@dotli/resolver/smoldot").onHealth;
+let enableHealthPolling: typeof import("@dotli/resolver/smoldot").enableHealthPolling;
 
 beforeEach(async () => {
+  // The mocked chain object is shared by the module factories above, so its
+  // call history would otherwise leak across tests.
+  vi.clearAllMocks();
   vi.resetModules();
   const mod = await import("@dotli/resolver/smoldot");
   getSmoldot = mod.getSmoldot;
   getRelayChain = mod.getRelayChain;
   onLifecycle = mod.onLifecycle;
+  onHealth = mod.onHealth;
+  enableHealthPolling = mod.enableHealthPolling;
 });
 
 describe("getSmoldot", () => {
@@ -86,89 +93,186 @@ describe("getRelayChain", () => {
   });
 });
 
-describe("onLifecycle", () => {
-  // Grab the logCallback the module hands to smoldot so tests can feed it
-  // synthetic json-rpc log lines.
-  async function captureLogCallback(): Promise<
-    (level: number, target: string, message: string) => void
-  > {
-    getSmoldot();
-    const { startFromWorker } =
-      await import("polkadot-api/smoldot/from-worker");
-    const options = vi.mocked(startFromWorker).mock.lastCall?.[1];
-    if (options?.logCallback === undefined) {
-      throw new Error("logCallback was not passed to startFromWorker");
-    }
-    return options.logCallback;
+// Grab the logCallback the module hands to smoldot so tests can feed it
+// synthetic json-rpc log lines.
+async function captureLogCallback(): Promise<
+  (level: number, target: string, message: string) => void
+> {
+  getSmoldot();
+  const { startFromWorker } = await import("polkadot-api/smoldot/from-worker");
+  const options = vi.mocked(startFromWorker).mock.lastCall?.[1];
+  if (options?.logCallback === undefined) {
+    throw new Error("logCallback was not passed to startFromWorker");
   }
+  return options.logCallback;
+}
 
-  function followEventLine(chain: string, kind: string): string {
-    const payload = JSON.stringify({
-      jsonrpc: "2.0",
-      method: "lifecycle_unstable_followEvent",
-      params: { subscription: "lf-1", result: { kind } },
-    });
-    return `chain=${chain} response=${payload}`;
-  }
+// Production line shape: smoldot logs every response on the chain's
+// `json-rpc-<id>` target as `json-rpc-response-yielded; response=<json>`.
+function responseLine(payload: unknown): string {
+  return `json-rpc-response-yielded; response=${JSON.stringify(payload)}`;
+}
+
+function followEventLine(
+  kind: string,
+  extra: Record<string, unknown> = {},
+): string {
+  return responseLine({
+    jsonrpc: "2.0",
+    method: "lifecycle_unstable_followEvent",
+    params: { subscription: "lf-1", result: { kind, ...extra } },
+  });
+}
+
+function followReplyLine(logicalKey: string): string {
+  return responseLine({
+    jsonrpc: "2.0",
+    id: `__dotli_lifecycle_follow__:${logicalKey}`,
+    result: "lf-1",
+  });
+}
 
-  it("delivers events parsed from the json-rpc log stream", async () => {
+function healthLine(
+  logicalKey: string,
+  seq: number,
+  peers: number,
+  isSyncing = true,
+): string {
+  return responseLine({
+    jsonrpc: "2.0",
+    id: `__dotli_health__:${logicalKey}:${String(seq)}`,
+    result: { isSyncing, peers, shouldHavePeers: true },
+  });
+}
+
+describe("onLifecycle", () => {
+  it("delivers events keyed by the logical chain once the follow reply is seen", async () => {
     const logCallback = await captureLogCallback();
     const events: unknown[] = [];
     onLifecycle((event) => events.push(event));
 
+    logCallback(4, "json-rpc-asset-hub-paseo", followReplyLine("asset-hub"));
+    logCallback(4, "json-rpc-asset-hub-paseo", followEventLine("firstPeer"));
     logCallback(
       4,
       "json-rpc-asset-hub-paseo",
-      followEventLine("asset-hub-paseo", "firstPeer"),
+      followEventLine("bootstrapComplete"),
     );
+
+    expect(events).toEqual([
+      { chain: "asset-hub", kind: "firstPeer" },
+      { chain: "asset-hub", kind: "bootstrapComplete" },
+    ]);
+  });
+
+  it("falls back to the log target name when no follow reply mapped it", async () => {
+    const logCallback = await captureLogCallback();
+    const events: unknown[] = [];
+    onLifecycle((event) => events.push(event));
+
+    logCallback(4, "json-rpc-asset-hub-paseo", followEventLine("firstPeer"));
+
+    expect(events).toEqual([{ chain: "asset-hub-paseo", kind: "firstPeer" }]);
+  });
+
+  it("carries the stall reason and the recovery cause", async () => {
+    const logCallback = await captureLogCallback();
+    const events: unknown[] = [];
+    onLifecycle((event) => events.push(event));
+
+    logCallback(4, "json-rpc-paseo", followReplyLine("relay"));
     logCallback(
       4,
-      "json-rpc-asset-hub-paseo",
-      followEventLine("asset-hub-paseo", "bootstrapComplete"),
+      "json-rpc-paseo",
+      followEventLine("stalled", { reason: "noPeers" }),
+    );
+    logCallback(
+      4,
+      "json-rpc-paseo",
+      followEventLine("recovered", { previously: "noPeers" }),
     );
 
     expect(events).toEqual([
-      { chainName: "asset-hub-paseo", kind: "firstPeer" },
-      { chainName: "asset-hub-paseo", kind: "bootstrapComplete" },
+      { chain: "relay", kind: "stalled", reason: "noPeers" },
+      { chain: "relay", kind: "recovered", reason: "noPeers" },
     ]);
   });
 
-  it("replays earlier events to a late subscriber", async () => {
+  it("replays only the latest event per chain and kind to a late subscriber", async () => {
     const logCallback = await captureLogCallback();
-    logCallback(4, "json-rpc-paseo", followEventLine("paseo", "firstPeer"));
+    logCallback(4, "json-rpc-paseo", followReplyLine("relay"));
+    logCallback(
+      4,
+      "json-rpc-paseo",
+      followEventLine("stalled", { reason: "noPeers" }),
+    );
+    logCallback(
+      4,
+      "json-rpc-paseo",
+      followEventLine("stalled", { reason: "syncNoProgress" }),
+    );
+    logCallback(4, "json-rpc-paseo", followEventLine("firstPeer"));
 
     const events: unknown[] = [];
     onLifecycle((event) => events.push(event));
 
-    expect(events).toEqual([{ chainName: "paseo", kind: "firstPeer" }]);
+    expect(events).toEqual([
+      { chain: "relay", kind: "stalled", reason: "syncNoProgress" },
+      { chain: "relay", kind: "firstPeer" },
+    ]);
   });
 
-  it("ignores malformed and non-lifecycle payloads", async () => {
+  it("replays only the newer half of a stall and recovery pair", async () => {
+    const logCallback = await captureLogCallback();
+    logCallback(4, "json-rpc-paseo", followReplyLine("relay"));
+    logCallback(
+      4,
+      "json-rpc-paseo",
+      followEventLine("stalled", { reason: "noPeers" }),
+    );
+    logCallback(
+      4,
+      "json-rpc-paseo",
+      followEventLine("recovered", { previously: "noPeers" }),
+    );
+
+    const events: unknown[] = [];
+    onLifecycle((event) => events.push(event));
+
+    expect(events).toEqual([
+      { chain: "relay", kind: "recovered", reason: "noPeers" },
+    ]);
+  });
+
+  it("ignores malformed, unknown-kind, and non-lifecycle payloads", async () => {
     const logCallback = await captureLogCallback();
     const events: unknown[] = [];
     onLifecycle((event) => events.push(event));
 
     // Mentions the method but carries no response payload.
     logCallback(4, "json-rpc-paseo", "sent lifecycle_unstable_followEvent");
-    // Truncated JSON.
+    // Request echo, not a response.
+    logCallback(
+      4,
+      "json-rpc-paseo",
+      'json-rpc-request-queued; request={"method":"lifecycle_unstable_followEvent"}',
+    );
+    // Truncated JSON (smoldot caps the logged payload at 250 chars).
     logCallback(
       4,
       "json-rpc-paseo",
-      'response={"method":"lifecycle_unstable_followEvent"',
+      'json-rpc-response-yielded; response={"method":"lifecycle_unstable_followEvent"',
     );
     // A different method that happens to mention the string.
     logCallback(
       4,
       "json-rpc-paseo",
-      followEventLine("paseo", "firstPeer").replace(
-        "followEvent",
-        "followEvent_other",
-      ),
+      followEventLine("firstPeer").replace("followEvent", "followEvent_other"),
     );
-    // A kind outside the union.
-    logCallback(4, "json-rpc-paseo", followEventLine("paseo", "somethingElse"));
+    // A kind outside the allowlist (smoldot emits more kinds than we consume).
+    logCallback(4, "json-rpc-paseo", followEventLine("warpSyncProgress"));
     // Right payload on a non json-rpc target.
-    logCallback(4, "sync-service-paseo", followEventLine("paseo", "firstPeer"));
+    logCallback(4, "sync-service-paseo", followEventLine("firstPeer"));
 
     expect(events).toEqual([]);
   });
@@ -178,14 +282,139 @@ describe("onLifecycle", () => {
     const events: unknown[] = [];
     const unsubscribe = onLifecycle((event) => events.push(event));
 
-    logCallback(4, "json-rpc-paseo", followEventLine("paseo", "firstPeer"));
+    logCallback(4, "json-rpc-paseo", followEventLine("firstPeer"));
     unsubscribe();
+    logCallback(4, "json-rpc-paseo", followEventLine("bootstrapComplete"));
+
+    expect(events).toEqual([{ chain: "paseo", kind: "firstPeer" }]);
+  });
+});
+
+describe("onHealth", () => {
+  // Fake timers keep leaked poller resends (2s timeout) from bleeding
+  // between tests through the shared mock chain.
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  async function relaySendJsonRpc(): Promise<ReturnType<typeof vi.fn>> {
+    const { startFromWorker } =
+      await import("polkadot-api/smoldot/from-worker");
+    const client = vi.mocked(startFromWorker).mock.results.at(-1)?.value as {
+      addChain: ReturnType<typeof vi.fn>;
+    };
+    const chain = (await client.addChain.mock.results.at(-1)?.value) as {
+      sendJsonRpc: ReturnType<typeof vi.fn>;
+    };
+    return chain.sendJsonRpc;
+  }
+
+  function healthCalls(sendJsonRpc: ReturnType<typeof vi.fn>): string[] {
+    return sendJsonRpc.mock.calls
+      .map((call) => call[0] as string)
+      .filter((raw) => raw.includes("system_health"));
+  }
+
+  it("polls system_health immediately and emits the parsed sample", async () => {
+    enableHealthPolling();
+    const logCallback = await captureLogCallback();
+    await getRelayChain();
+    const sendJsonRpc = await relaySendJsonRpc();
+
+    const sent = healthCalls(sendJsonRpc);
+    expect(sent.length).toBeGreaterThanOrEqual(1);
+    expect(sent[0]).toContain('"id":"__dotli_health__:relay:1"');
+
+    const events: unknown[] = [];
+    onHealth((event) => events.push(event));
+    logCallback(4, "json-rpc-paseo", healthLine("relay", 1, 3));
+
+    expect(events).toEqual([{ chain: "relay", peers: 3, isSyncing: true }]);
+  });
+
+  it("emits only when the sample changes", async () => {
+    enableHealthPolling();
+    const logCallback = await captureLogCallback();
+    await getRelayChain();
+
+    const events: unknown[] = [];
+    onHealth((event) => events.push(event));
+    logCallback(4, "json-rpc-paseo", healthLine("relay", 1, 2));
+    logCallback(4, "json-rpc-paseo", healthLine("relay", 2, 2));
+    logCallback(4, "json-rpc-paseo", healthLine("relay", 3, 5));
+
+    expect(events).toEqual([
+      { chain: "relay", peers: 2, isSyncing: true },
+      { chain: "relay", peers: 5, isSyncing: true },
+    ]);
+  });
+
+  it("replays the last sample to a late subscriber", async () => {
+    enableHealthPolling();
+    const logCallback = await captureLogCallback();
+    await getRelayChain();
+
+    logCallback(4, "json-rpc-paseo", healthLine("relay", 1, 4));
+
+    const events: unknown[] = [];
+    onHealth((event) => events.push(event));
+    expect(events).toEqual([{ chain: "relay", peers: 4, isSyncing: true }]);
+  });
+
+  it("stops polling once the chain bootstrap completes", async () => {
+    enableHealthPolling();
+    const logCallback = await captureLogCallback();
+    await getRelayChain();
+    const sendJsonRpc = await relaySendJsonRpc();
+
+    // Map the log target to the logical key, then finish bootstrap.
+    logCallback(4, "json-rpc-paseo", followReplyLine("relay"));
+    logCallback(4, "json-rpc-paseo", healthLine("relay", 1, 3));
+    logCallback(4, "json-rpc-paseo", followEventLine("bootstrapComplete"));
+
+    const sentBefore = healthCalls(sendJsonRpc).length;
+    vi.advanceTimersByTime(30_000);
+    expect(healthCalls(sendJsonRpc).length).toBe(sentBefore);
+  });
+
+  it("does not poll when polling was never enabled", async () => {
+    await captureLogCallback();
+    await getRelayChain();
+    const sendJsonRpc = await relaySendJsonRpc();
+    expect(healthCalls(sendJsonRpc)).toEqual([]);
+  });
+
+  it("rejects malformed health payloads", async () => {
+    enableHealthPolling();
+    const logCallback = await captureLogCallback();
+    await getRelayChain();
+
+    const events: unknown[] = [];
+    onHealth((event) => events.push(event));
+    // peers is not an integer
     logCallback(
       4,
       "json-rpc-paseo",
-      followEventLine("paseo", "bootstrapComplete"),
+      responseLine({
+        jsonrpc: "2.0",
+        id: "__dotli_health__:relay:1",
+        result: { isSyncing: true, peers: "3" },
+      }),
+    );
+    // result missing (error response)
+    logCallback(
+      4,
+      "json-rpc-paseo",
+      responseLine({
+        jsonrpc: "2.0",
+        id: "__dotli_health__:relay:2",
+        error: { code: -32000, message: "nope" },
+      }),
     );
 
-    expect(events).toEqual([{ chainName: "paseo", kind: "firstPeer" }]);
+    expect(events).toEqual([]);
   });
 });
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index e42d19fd..87eeeec5 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -129,12 +129,17 @@ body {
   text-align: right;
 }
 
-/* Text block — phase label + terminal log */
+/* Text block — phase label + terminal log.
+   The gap is the tight one: `#loading-detail` is a readout *of* the headline
+   above it and has to sit close enough to read as one unit. `.loading-hint`
+   is a separate, occasional warning and buys its 12px break back with a
+   margin. Three rows spaced equally would read as three peers, which they
+   are not. */
 .loading-text {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 12px;
+  gap: 6px;
   width: 100%;
   max-width: 420px;
   flex-shrink: 0;
@@ -152,6 +157,21 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+/* Live detail line (e.g. peer count) below the status headline */
+/* Live sync readout under the headline. Ranked below `#status` by size,
+   weight, and family — not by tone: it shares the headline's opacity because
+   the stall copy it carries ("searching for peers") is the most reassuring
+   message on the screen, and it cannot be the faintest thing on it.
+   `min-height` reserves the row so the block does not jump when the detail
+   appears mid-sync and is cleared on bootstrap. */
+.loading-detail {
+  font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
+  font-size: 11px;
+  color: #fff;
+  opacity: 0.35;
+  text-align: center;
+  min-height: 1.3em;
+}
 /* Slow-step hint (shown below status when a step exceeds its threshold) */
 .loading-hint {
   font-size: 11px;
@@ -161,6 +181,8 @@ body {
   text-align: center;
   transition: opacity 0.3s ease;
   min-height: 1.3em;
+  /* Restores the 12px break the status/detail pair gave up. */
+  margin-top: 6px;
 }
 .loading-hint.visible {
   opacity: 0.5;
diff --git a/packages/ui/src/styles/themes.css b/packages/ui/src/styles/themes.css
index 753f4e30..6776c0f0 100644
--- a/packages/ui/src/styles/themes.css
+++ b/packages/ui/src/styles/themes.css
@@ -242,6 +242,13 @@
 [data-theme="light"] .loading-progress-pct {
   color: #333;
 }
+/* Same flip as `#status`: the base rule is `#fff`, which is invisible on the
+   light-theme background. The detail line tracks the headline's colour rather
+   than the percentage's — it carries the stall copy, which is the one message
+   that has to survive a light background. */
+[data-theme="light"] .loading-detail {
+  color: #1a1a1a;
+}
 [data-theme="light"] .spinner {
   border-color: #ddd;
   border-top-color: #333;
diff --git a/packages/ui/src/ui.ts b/packages/ui/src/ui.ts
index 3779afab..f68dba1c 100644
--- a/packages/ui/src/ui.ts
+++ b/packages/ui/src/ui.ts
@@ -129,11 +129,28 @@ export function advancePhase(index: number): void {
     ((target - base) * CRAWL_TICK_MS) / Math.max(expectedMs, CRAWL_TICK_MS);
   startProgressCrawl();
 
-  // Update headline
+  // Update headline. Re-arm the slow hint against the new label: the timer
+  // armed for the previous step would otherwise fire with a hint describing
+  // work that already completed.
   const status = document.getElementById("status");
   if (status !== null) {
     status.textContent = label;
   }
+  armSlowHint(label);
+}
+
+/**
+ * Live detail line under the status headline (e.g. "3 peers"). Deliberately
+ * separate from `#status`: this value changes every second or two during
+ * sync, and `#status` is aria-live, so routing it there would queue a
+ * screen-reader announcement per change. The detail element is aria-hidden
+ * and never touches the slow-hint timer.
+ */
+export function setStatusDetail(detail: string): void {
+  const el = document.getElementById("loading-detail");
+  if (el !== null) {
+    el.textContent = detail;
+  }
 }
 
 export const GATEWAY_ESCAPE_DELAY_MS = 10_000;
@@ -283,7 +300,10 @@ export function showStatus(message: string): void {
   if (status !== null) {
     status.textContent = message;
   }
+  armSlowHint(message);
+}
 
+function armSlowHint(message: string): void {
   clearSlowWarning();
 
   const threshold = getSlowThreshold(message);
diff --git a/packages/ui/tests/ui.test.ts b/packages/ui/tests/ui.test.ts
new file mode 100644
index 00000000..aec5b343
--- /dev/null
+++ b/packages/ui/tests/ui.test.ts
@@ -0,0 +1,83 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { beforeEach, afterEach, describe, expect, it, vi } from "vitest";
+
+let initPhases: typeof import("@dotli/ui/ui").initPhases;
+let advancePhase: typeof import("@dotli/ui/ui").advancePhase;
+let showStatus: typeof import("@dotli/ui/ui").showStatus;
+let setStatusDetail: typeof import("@dotli/ui/ui").setStatusDetail;
+
+const PHASES = [
+  { label: "Starting", base: 2, target: 6, expectedMs: 650 },
+  { label: "Adding relay chain", base: 6, target: 10, expectedMs: 120 },
+  { label: "Syncing Asset Hub", base: 10, target: 55, expectedMs: 6500 },
+];
+
+function textOf(id: string): string {
+  return document.getElementById(id)?.textContent ?? "";
+}
+
+beforeEach(async () => {
+  vi.useFakeTimers();
+  document.body.innerHTML = `
+    <div id="app">
+      <div class="loading">
+        <div id="loading-progress-fill"></div>
+        <span id="loading-progress-pct">0%</span>
+        <p id="status">Reaching out</p>
+        <p id="loading-detail" aria-hidden="true"></p>
+        <p id="loading-hint"></p>
+      </div>
+    </div>`;
+  vi.resetModules();
+  const mod = await import("@dotli/ui/ui");
+  initPhases = mod.initPhases;
+  advancePhase = mod.advancePhase;
+  showStatus = mod.showStatus;
+  setStatusDetail = mod.setStatusDetail;
+  initPhases(PHASES);
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe("setStatusDetail", () => {
+  it("writes the detail line without touching the status headline", () => {
+    showStatus("Resolving example.dot");
+    setStatusDetail("3 peers");
+    expect(textOf("loading-detail")).toBe("3 peers");
+    expect(textOf("status")).toBe("Resolving example.dot");
+  });
+
+  it("does not reset the slow-hint timer while the count updates", () => {
+    advancePhase(2);
+    // "Syncing Asset Hub" arms a 15s hint. A peer count that ticks every
+    // second must not keep pushing that hint away.
+    for (let i = 0; i < 20; i++) {
+      vi.advanceTimersByTime(1000);
+      setStatusDetail(`${String(i)} peers`);
+    }
+    expect(textOf("loading-hint")).toContain("Asset Hub sync is slow");
+  });
+});
+
+describe("advancePhase", () => {
+  it("re-arms the slow hint for the new phase label", () => {
+    showStatus("Adding Paseo relay chain...");
+    advancePhase(2);
+    // The relay-chain hint (10s) must not fire after we advanced to the
+    // Syncing phase; the Syncing hint (15s) fires instead.
+    vi.advanceTimersByTime(11_000);
+    expect(textOf("loading-hint")).not.toContain("relay chain bootstrap");
+    vi.advanceTimersByTime(4_000);
+    expect(textOf("loading-hint")).toContain("Asset Hub sync is slow");
+  });
+
+  it("keeps the detail line across phase advances", () => {
+    setStatusDetail("4 peers");
+    advancePhase(2);
+    expect(textOf("loading-detail")).toBe("4 peers");
+  });
+});

From ec1d17d691993065f34f7175004460166f4aa288 Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Wed, 5 Aug 2026 15:41:19 +0100
Subject: [PATCH 05/24] Intercept lifecycle and health traffic in the chain tap
 instead of the debug log stream, poll only the Asset Hub, and address the
 loading review feedback

---
 apps/host/index.html                    | 672 +++++++++++++++---------
 apps/host/src/main.ts                   |  51 +-
 apps/protocol/src/main.ts               |   6 +-
 packages/protocol/src/client.ts         |  12 +-
 packages/protocol/src/messages.ts       |   4 +-
 packages/resolver/src/smoldot-db.ts     |  31 +-
 packages/resolver/src/smoldot.ts        | 174 +++---
 packages/resolver/tests/smoldot.test.ts | 439 ++++++++--------
 packages/ui/src/styles/base.css         |  11 +
 packages/ui/src/ui.ts                   |  23 +-
 10 files changed, 823 insertions(+), 600 deletions(-)

diff --git a/apps/host/index.html b/apps/host/index.html
index 06b3c093..229f9d7b 100644
--- a/apps/host/index.html
+++ b/apps/host/index.html
@@ -3,269 +3,433 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-only -->
 
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Polkadot - The decentralized web, in your browser</title>
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-        <link rel="preconnect" href="https://host.dot.li" crossorigin />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap" rel="stylesheet" />
-        <script>
-            // Pre-open the shared IndexedDB during HTML parse so it's ready
-            // before main.ts executes. Overlaps IDB open (~10-50ms) with
-            // module loading. Picked up by src/db.ts via window.__dotliDb.
-            window.__dotliDb = new Promise(function(resolve, reject) {
-                var req = indexedDB.open("dotli", 2);
-                req.onupgradeneeded = function() {
-                    var db = req.result;
-                    if (!db.objectStoreNames.contains("cids"))
-                        db.createObjectStore("cids", { keyPath: "label" });
-                    if (!db.objectStoreNames.contains("chains"))
-                        db.createObjectStore("chains", { keyPath: "chain" });
-                    // v2: scheduled notifications + per-product id counters.
-                    if (!db.objectStoreNames.contains("scheduled_notifications")) {
-                        var s = db.createObjectStore("scheduled_notifications", { keyPath: "hostId", autoIncrement: true });
-                        s.createIndex("byProductId", "productId", { unique: false });
-                        s.createIndex("byScheduledAt", "scheduledAt", { unique: false });
-                    }
-                    if (!db.objectStoreNames.contains("notification_counters"))
-                        db.createObjectStore("notification_counters", { keyPath: "productId" });
-                };
-                req.onsuccess = function() { resolve(req.result); };
-                req.onerror = function() { reject(new Error("IDB open failed")); };
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Polkadot - The decentralized web, in your browser</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="preconnect" href="https://host.dot.li" crossorigin />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap"
+      rel="stylesheet"
+    />
+    <script>
+      // Pre-open the shared IndexedDB during HTML parse so it's ready
+      // before main.ts executes. Overlaps IDB open (~10-50ms) with
+      // module loading. Picked up by src/db.ts via window.__dotliDb.
+      window.__dotliDb = new Promise(function (resolve, reject) {
+        var req = indexedDB.open("dotli", 2);
+        req.onupgradeneeded = function () {
+          var db = req.result;
+          if (!db.objectStoreNames.contains("cids"))
+            db.createObjectStore("cids", { keyPath: "label" });
+          if (!db.objectStoreNames.contains("chains"))
+            db.createObjectStore("chains", { keyPath: "chain" });
+          // v2: scheduled notifications + per-product id counters.
+          if (!db.objectStoreNames.contains("scheduled_notifications")) {
+            var s = db.createObjectStore("scheduled_notifications", {
+              keyPath: "hostId",
+              autoIncrement: true,
             });
-        </script>
-        <link rel="preconnect" href="https://paseo-bulletin-collator-node-0.parity-testnet.parity.io" />
-        <link rel="preconnect" href="https://paseo-bulletin-collator-node-1.parity-testnet.parity.io" />
-        <link rel="preconnect" href="https://paseo-bulletin-rpc-node-0.polkadot.io" />
-        <link rel="preconnect" href="https://paseo-bulletin-rpc-node-1.polkadot.io" />
-        <link rel="preconnect" href="https://paseo-ipfs.polkadot.io" />
-        <link rel="preconnect" href="https://sys.ibp.network" />
-        <!-- Styles are loaded via src/styles.css (imported in main.ts) -->
-    </head>
-    <body>
-        <script>
-            (function() {
-                var theme = "dark";
-                try {
-                    var stored = localStorage.getItem("dotli-theme");
-                    if (stored === "light" || stored === "dark") {
-                        theme = stored;
-                    } else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) {
-                        theme = "light";
-                    }
-                } catch (_) { /* localStorage unavailable — fall back to dark default */ }
-                document.documentElement.setAttribute("data-theme", theme);
-            })();
-        </script>
-        <!-- Top Bar -->
-        <div id="topbar">
-            <a class="topbar-left" id="topbar-home" href="/">
-                <div class="topbar-logo">
-                    <svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M9.9873 14.1348C10.8273 14.1348 11.462 14.3911 11.6113 14.8604C11.8447 15.6051 10.7691 16.609 9.20801 17.1016C7.64706 17.5964 6.1908 17.3912 5.95508 16.6465C5.7363 15.9482 6.6685 15.0218 8.07227 14.5029L8.3584 14.4023C8.93466 14.2203 9.49501 14.1348 9.9873 14.1348ZM2.23828 9.9248C2.99193 9.9248 3.82268 10.226 4.52734 10.8213C5.85738 11.9442 6.23288 13.6886 5.36719 14.7158C4.50142 15.7428 2.71861 15.6629 1.38867 14.54C0.100568 13.4522 -0.291878 11.7823 0.47168 10.7451L0.551758 10.6465C0.957761 10.1634 1.5687 9.92482 2.23828 9.9248ZM15.1748 9.47949C15.2096 9.4795 15.2397 9.48415 15.2676 9.49805C15.6409 9.67081 15.4174 10.9618 14.7617 12.3789C14.1085 13.7956 13.2732 14.8041 12.8975 14.6318C12.5218 14.4591 12.7481 13.168 13.4014 11.751C14.0057 10.4413 14.7665 9.47949 15.1748 9.47949ZM3.42578 2.46387C3.9998 2.46387 4.55096 2.64366 4.9873 3.01953C6.10236 3.97675 6.07202 5.84169 4.92188 7.18164C3.76917 8.52404 1.93275 8.83452 0.817383 7.875C-0.297896 6.91782 -0.267461 5.05292 0.882812 3.71289C1.58276 2.8982 2.5345 2.46396 3.42578 2.46387ZM13.1631 2.80957C13.6391 2.80957 14.4071 3.79925 14.9531 5.15332C15.5458 6.62173 15.6526 7.96206 15.1953 8.14648C14.7355 8.33003 13.8845 7.29114 13.292 5.82324C12.6993 4.35719 12.5892 3.01463 13.0488 2.83008C13.0861 2.8161 13.1235 2.8096 13.1631 2.80957ZM7.82422 0C8.30483 0 8.83683 0.0896562 9.37109 0.276367C10.9576 0.829603 11.9799 2.02888 11.6582 2.95801C11.3362 3.88718 9.78886 4.19295 8.20215 3.63965C6.61582 3.08633 5.5943 1.88706 5.91602 0.958008C6.12834 0.341726 6.87931 6.04412e-05 7.82422 0Z" fill="#ffffff"/>
-                    </svg>
-                </div>
-                <span class="topbar-brand">Polkadot</span>
-                <span class="topbar-beta">Beta</span>
-            </a>
-            <div class="topbar-url" id="topbar-url"></div>
-            <div class="topbar-right">
-                <button
-                    id="auth-button"
-                    class="topbar-btn"
-                    title="Login with Polkadot Mobile"
-                    disabled
-                >
-                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
-                        <circle cx="12" cy="7" r="4"/>
-                    </svg>
-                </button>
-                <button
-                    id="permissions-button"
-                    class="topbar-btn"
-                    title="Permissions"
-                >
-                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
-                        <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
-                    </svg>
-                </button>
-                <button
-                    id="theme-toggle"
-                    class="topbar-btn"
-                    title="Toggle light/dark theme"
-                >
-                    <svg id="theme-icon-sun" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
-                    </svg>
-                    <svg id="theme-icon-moon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
-                    </svg>
-                </button>
-                <button
-                    id="more-button"
-                    class="topbar-btn topbar-more-btn"
-                    title="More"
-                    aria-expanded="false"
-                    aria-controls="more-popover"
-                >
-                    <span class="hamburger" aria-hidden="true">
-                        <span class="hamburger-bar"></span>
-                        <span class="hamburger-bar"></span>
-                        <span class="hamburger-bar"></span>
-                    </span>
-                </button>
-                <div class="more-popover" id="more-popover">
-                    <button class="more-row" data-target="permissions-button">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
-                            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
-                        </svg>
-                        <span>Permissions</span>
-                    </button>
-                    <button class="more-row" data-target="theme-toggle">
-                        <svg class="more-row-icon-sun" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
-                        </svg>
-                        <svg class="more-row-icon-moon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
-                        </svg>
-                        <span>Theme</span>
-                    </button>
-                    <button class="more-row" data-target="mode-button">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <circle cx="12" cy="12" r="3"/>
-                            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
-                        </svg>
-                        <span>Settings</span>
-                    </button>
-                </div>
-                <button
-                    id="mode-button"
-                    class="topbar-btn"
-                    title="Settings"
-                >
-                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <circle cx="12" cy="12" r="3"/>
-                        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
-                    </svg>
-                </button>
-            </div>
+            s.createIndex("byProductId", "productId", { unique: false });
+            s.createIndex("byScheduledAt", "scheduledAt", { unique: false });
+          }
+          if (!db.objectStoreNames.contains("notification_counters"))
+            db.createObjectStore("notification_counters", {
+              keyPath: "productId",
+            });
+        };
+        req.onsuccess = function () {
+          resolve(req.result);
+        };
+        req.onerror = function () {
+          reject(new Error("IDB open failed"));
+        };
+      });
+    </script>
+    <link
+      rel="preconnect"
+      href="https://paseo-bulletin-collator-node-0.parity-testnet.parity.io"
+    />
+    <link
+      rel="preconnect"
+      href="https://paseo-bulletin-collator-node-1.parity-testnet.parity.io"
+    />
+    <link
+      rel="preconnect"
+      href="https://paseo-bulletin-rpc-node-0.polkadot.io"
+    />
+    <link
+      rel="preconnect"
+      href="https://paseo-bulletin-rpc-node-1.polkadot.io"
+    />
+    <link rel="preconnect" href="https://paseo-ipfs.polkadot.io" />
+    <link rel="preconnect" href="https://sys.ibp.network" />
+    <!-- Styles are loaded via src/styles.css (imported in main.ts) -->
+  </head>
+  <body>
+    <script>
+      (function () {
+        var theme = "dark";
+        try {
+          var stored = localStorage.getItem("dotli-theme");
+          if (stored === "light" || stored === "dark") {
+            theme = stored;
+          } else if (
+            window.matchMedia &&
+            window.matchMedia("(prefers-color-scheme: light)").matches
+          ) {
+            theme = "light";
+          }
+        } catch (_) {
+          /* localStorage unavailable — fall back to dark default */
+        }
+        document.documentElement.setAttribute("data-theme", theme);
+      })();
+    </script>
+    <!-- Top Bar -->
+    <div id="topbar">
+      <a class="topbar-left" id="topbar-home" href="/">
+        <div class="topbar-logo">
+          <svg
+            width="16"
+            height="18"
+            viewBox="0 0 16 18"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.9873 14.1348C10.8273 14.1348 11.462 14.3911 11.6113 14.8604C11.8447 15.6051 10.7691 16.609 9.20801 17.1016C7.64706 17.5964 6.1908 17.3912 5.95508 16.6465C5.7363 15.9482 6.6685 15.0218 8.07227 14.5029L8.3584 14.4023C8.93466 14.2203 9.49501 14.1348 9.9873 14.1348ZM2.23828 9.9248C2.99193 9.9248 3.82268 10.226 4.52734 10.8213C5.85738 11.9442 6.23288 13.6886 5.36719 14.7158C4.50142 15.7428 2.71861 15.6629 1.38867 14.54C0.100568 13.4522 -0.291878 11.7823 0.47168 10.7451L0.551758 10.6465C0.957761 10.1634 1.5687 9.92482 2.23828 9.9248ZM15.1748 9.47949C15.2096 9.4795 15.2397 9.48415 15.2676 9.49805C15.6409 9.67081 15.4174 10.9618 14.7617 12.3789C14.1085 13.7956 13.2732 14.8041 12.8975 14.6318C12.5218 14.4591 12.7481 13.168 13.4014 11.751C14.0057 10.4413 14.7665 9.47949 15.1748 9.47949ZM3.42578 2.46387C3.9998 2.46387 4.55096 2.64366 4.9873 3.01953C6.10236 3.97675 6.07202 5.84169 4.92188 7.18164C3.76917 8.52404 1.93275 8.83452 0.817383 7.875C-0.297896 6.91782 -0.267461 5.05292 0.882812 3.71289C1.58276 2.8982 2.5345 2.46396 3.42578 2.46387ZM13.1631 2.80957C13.6391 2.80957 14.4071 3.79925 14.9531 5.15332C15.5458 6.62173 15.6526 7.96206 15.1953 8.14648C14.7355 8.33003 13.8845 7.29114 13.292 5.82324C12.6993 4.35719 12.5892 3.01463 13.0488 2.83008C13.0861 2.8161 13.1235 2.8096 13.1631 2.80957ZM7.82422 0C8.30483 0 8.83683 0.0896562 9.37109 0.276367C10.9576 0.829603 11.9799 2.02888 11.6582 2.95801C11.3362 3.88718 9.78886 4.19295 8.20215 3.63965C6.61582 3.08633 5.5943 1.88706 5.91602 0.958008C6.12834 0.341726 6.87931 6.04412e-05 7.82422 0Z"
+              fill="#ffffff"
+            />
+          </svg>
         </div>
-
-        <!-- QR Pairing Modal -->
-        <div class="auth-modal-backdrop" id="auth-modal-backdrop">
-            <div class="auth-modal">
-                <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
-                <p class="auth-modal-reason" id="auth-modal-reason" hidden></p>
-                <p id="auth-modal-hint">Scan with Polkadot Mobile to connect</p>
-                <div class="auth-modal-qr" id="auth-modal-qr">
-                    <div class="spinner"></div>
-                </div>
-                <button class="auth-modal-close" id="auth-modal-close">
-                    Cancel
-                </button>
-            </div>
+        <span class="topbar-brand">Polkadot</span>
+        <span class="topbar-beta">Beta</span>
+      </a>
+      <div class="topbar-url" id="topbar-url"></div>
+      <div class="topbar-right">
+        <button
+          id="auth-button"
+          class="topbar-btn"
+          title="Login with Polkadot Mobile"
+          disabled
+        >
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+            <circle cx="12" cy="7" r="4" />
+          </svg>
+        </button>
+        <button id="permissions-button" class="topbar-btn" title="Permissions">
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+          </svg>
+        </button>
+        <button
+          id="theme-toggle"
+          class="topbar-btn"
+          title="Toggle light/dark theme"
+        >
+          <svg
+            id="theme-icon-sun"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="12" cy="12" r="5" />
+            <line x1="12" y1="1" x2="12" y2="3" />
+            <line x1="12" y1="21" x2="12" y2="23" />
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+            <line x1="1" y1="12" x2="3" y2="12" />
+            <line x1="21" y1="12" x2="23" y2="12" />
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+          </svg>
+          <svg
+            id="theme-icon-moon"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+          </svg>
+        </button>
+        <button
+          id="more-button"
+          class="topbar-btn topbar-more-btn"
+          title="More"
+          aria-expanded="false"
+          aria-controls="more-popover"
+        >
+          <span class="hamburger" aria-hidden="true">
+            <span class="hamburger-bar"></span>
+            <span class="hamburger-bar"></span>
+            <span class="hamburger-bar"></span>
+          </span>
+        </button>
+        <div class="more-popover" id="more-popover">
+          <button class="more-row" data-target="permissions-button">
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+            </svg>
+            <span>Permissions</span>
+          </button>
+          <button class="more-row" data-target="theme-toggle">
+            <svg
+              class="more-row-icon-sun"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="12" cy="12" r="5" />
+              <line x1="12" y1="1" x2="12" y2="3" />
+              <line x1="12" y1="21" x2="12" y2="23" />
+              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+              <line x1="1" y1="12" x2="3" y2="12" />
+              <line x1="21" y1="12" x2="23" y2="12" />
+              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+            </svg>
+            <svg
+              class="more-row-icon-moon"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+            </svg>
+            <span>Theme</span>
+          </button>
+          <button class="more-row" data-target="mode-button">
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="12" cy="12" r="3" />
+              <path
+                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
+              />
+            </svg>
+            <span>Settings</span>
+          </button>
         </div>
+        <button id="mode-button" class="topbar-btn" title="Settings">
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="12" cy="12" r="3" />
+            <path
+              d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
 
-        <!-- User Popover -->
-        <div class="user-popover" id="user-popover">
-            <div class="user-popover-name">
-                <div class="label">Welcome back</div>
-                <div class="name" id="user-popover-username"></div>
-            </div>
-            <div class="user-popover-divider"></div>
-            <button
-                class="user-popover-disconnect"
-                id="user-popover-disconnect"
-            >
-                <svg
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                >
-                    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
-                    <polyline points="16 17 21 12 16 7" />
-                    <line x1="21" y1="12" x2="9" y2="12" />
-                </svg>
-                Log out
-            </button>
+    <!-- QR Pairing Modal -->
+    <div class="auth-modal-backdrop" id="auth-modal-backdrop">
+      <div class="auth-modal">
+        <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
+        <p class="auth-modal-reason" id="auth-modal-reason" hidden></p>
+        <p id="auth-modal-hint">Scan with Polkadot Mobile to connect</p>
+        <div class="auth-modal-qr" id="auth-modal-qr">
+          <div class="spinner"></div>
         </div>
+        <button class="auth-modal-close" id="auth-modal-close">Cancel</button>
+      </div>
+    </div>
+
+    <!-- User Popover -->
+    <div class="user-popover" id="user-popover">
+      <div class="user-popover-name">
+        <div class="label">Welcome back</div>
+        <div class="name" id="user-popover-username"></div>
+      </div>
+      <div class="user-popover-divider"></div>
+      <button class="user-popover-disconnect" id="user-popover-disconnect">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+          <polyline points="16 17 21 12 16 7" />
+          <line x1="21" y1="12" x2="9" y2="12" />
+        </svg>
+        Log out
+      </button>
+    </div>
 
-        <!-- Mode Popover + backdrop (backdrop blocks clicks under the popover
+    <!-- Mode Popover + backdrop (backdrop blocks clicks under the popover
              and dismisses the popover when clicked) -->
-        <div class="mode-popover-backdrop" id="mode-popover-backdrop"></div>
-        <div class="mode-popover" id="mode-popover">
-            <div class="mode-popover-content" id="mode-popover-content"></div>
-        </div>
+    <div class="mode-popover-backdrop" id="mode-popover-backdrop"></div>
+    <div class="mode-popover" id="mode-popover">
+      <div class="mode-popover-content" id="mode-popover-content"></div>
+    </div>
 
-        <!-- Permissions Popover + backdrop (same pattern as settings menu:
+    <!-- Permissions Popover + backdrop (same pattern as settings menu:
              blocks clicks under the popover + dismisses it when clicked) -->
-        <div class="permissions-popover-backdrop" id="permissions-popover-backdrop"></div>
-        <div class="permissions-popover" id="permissions-popover">
-            <div class="permissions-popover-header">Permissions</div>
-            <div class="permissions-popover-list" id="permissions-popover-list"></div>
-        </div>
+    <div
+      class="permissions-popover-backdrop"
+      id="permissions-popover-backdrop"
+    ></div>
+    <div class="permissions-popover" id="permissions-popover">
+      <div class="permissions-popover-header">Permissions</div>
+      <div class="permissions-popover-list" id="permissions-popover-list"></div>
+    </div>
 
-        <!-- App Content -->
-        <div id="app">
-            <div class="loading">
-                <div class="loading-logo" id="loading-logo">
-                    <svg width="52" height="52" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path class="loading-petal" d="M31.0155 57.7181C14.6547 76.7768 14.2233 103.306 30.0862 116.92C45.9492 130.566 72.0667 126.15 88.4607 107.058C104.821 87.9995 105.253 61.4701 89.3899 47.8567C83.1841 42.511 75.3522 39.9543 67.1884 39.9543C54.5113 39.9543 40.9713 46.1302 31.0155 57.7181Z"/>
-                        <path class="loading-petal" d="M26.2694 156.332C13.9574 170.941 19.3003 195.744 38.2164 211.715C57.1326 227.686 82.4868 228.815 94.7989 214.205C107.111 199.596 101.768 174.793 82.8518 158.822C72.8296 150.355 61.0153 146.072 50.2962 146.072C40.7718 146.072 32.077 149.459 26.3026 156.332"/>
-                        <path class="loading-petal" d="M137.343 209.789C115.142 216.795 99.8429 231.072 103.161 241.664C106.513 252.256 127.221 255.178 149.423 248.139C171.625 241.133 186.923 226.856 183.605 216.264C181.481 209.59 172.454 205.938 160.507 205.938C153.505 205.938 145.54 207.166 137.343 209.756"/>
-                        <path class="loading-petal" d="M102.597 18.5365C98.0176 31.7514 112.553 48.8179 135.12 56.6871C157.686 64.5562 179.689 60.2066 184.268 46.9917C188.848 33.7768 174.313 16.7103 151.746 8.84109C144.146 6.18482 136.58 4.9231 129.744 4.9231C116.303 4.9231 105.617 9.77078 102.597 18.5365Z"/>
-                        <path class="loading-petal" d="M204.048 45.169C197.51 47.7921 199.07 66.884 207.499 87.7357C215.928 108.621 228.041 123.396 234.579 120.773C241.083 118.15 239.557 99.0912 231.128 78.2063C223.362 58.9484 212.444 44.8702 205.674 44.8702C205.11 44.8702 204.579 44.9698 204.048 45.169Z"/>
-                        <path class="loading-petal" d="M209.058 172.038C199.766 192.192 196.547 210.553 201.89 213.01C207.233 215.468 219.114 201.124 228.406 180.969C237.731 160.815 240.917 142.453 235.607 139.996C235.209 139.797 234.778 139.731 234.28 139.731C228.472 139.731 217.654 153.411 209.058 172.038Z"/>
-                    </svg>
-                </div>
-                <div class="loading-progress" id="loading-progress">
-                    <div class="loading-progress-bar">
-                        <div class="loading-progress-fill" id="loading-progress-fill"></div>
-                    </div>
-                    <span class="loading-progress-pct" id="loading-progress-pct">0%</span>
-                </div>
-                <div class="loading-text" id="loading-text">
-                    <p id="status" aria-live="polite">Reaching out</p>
-                    <p class="loading-detail" id="loading-detail" aria-hidden="true"></p>
-                    <p class="loading-hint" id="loading-hint"></p>
-                </div>
-            </div>
+    <!-- App Content -->
+    <div id="app">
+      <div class="loading">
+        <div class="loading-logo" id="loading-logo">
+          <svg
+            width="52"
+            height="52"
+            viewBox="0 0 256 256"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              class="loading-petal"
+              d="M31.0155 57.7181C14.6547 76.7768 14.2233 103.306 30.0862 116.92C45.9492 130.566 72.0667 126.15 88.4607 107.058C104.821 87.9995 105.253 61.4701 89.3899 47.8567C83.1841 42.511 75.3522 39.9543 67.1884 39.9543C54.5113 39.9543 40.9713 46.1302 31.0155 57.7181Z"
+            />
+            <path
+              class="loading-petal"
+              d="M26.2694 156.332C13.9574 170.941 19.3003 195.744 38.2164 211.715C57.1326 227.686 82.4868 228.815 94.7989 214.205C107.111 199.596 101.768 174.793 82.8518 158.822C72.8296 150.355 61.0153 146.072 50.2962 146.072C40.7718 146.072 32.077 149.459 26.3026 156.332"
+            />
+            <path
+              class="loading-petal"
+              d="M137.343 209.789C115.142 216.795 99.8429 231.072 103.161 241.664C106.513 252.256 127.221 255.178 149.423 248.139C171.625 241.133 186.923 226.856 183.605 216.264C181.481 209.59 172.454 205.938 160.507 205.938C153.505 205.938 145.54 207.166 137.343 209.756"
+            />
+            <path
+              class="loading-petal"
+              d="M102.597 18.5365C98.0176 31.7514 112.553 48.8179 135.12 56.6871C157.686 64.5562 179.689 60.2066 184.268 46.9917C188.848 33.7768 174.313 16.7103 151.746 8.84109C144.146 6.18482 136.58 4.9231 129.744 4.9231C116.303 4.9231 105.617 9.77078 102.597 18.5365Z"
+            />
+            <path
+              class="loading-petal"
+              d="M204.048 45.169C197.51 47.7921 199.07 66.884 207.499 87.7357C215.928 108.621 228.041 123.396 234.579 120.773C241.083 118.15 239.557 99.0912 231.128 78.2063C223.362 58.9484 212.444 44.8702 205.674 44.8702C205.11 44.8702 204.579 44.9698 204.048 45.169Z"
+            />
+            <path
+              class="loading-petal"
+              d="M209.058 172.038C199.766 192.192 196.547 210.553 201.89 213.01C207.233 215.468 219.114 201.124 228.406 180.969C237.731 160.815 240.917 142.453 235.607 139.996C235.209 139.797 234.778 139.731 234.28 139.731C228.472 139.731 217.654 153.411 209.058 172.038Z"
+            />
+          </svg>
+        </div>
+        <div class="loading-progress" id="loading-progress">
+          <div class="loading-progress-bar">
+            <div class="loading-progress-fill" id="loading-progress-fill"></div>
+          </div>
+          <span class="loading-progress-pct" id="loading-progress-pct">0%</span>
+        </div>
+        <div class="loading-text" id="loading-text">
+          <p id="status" aria-live="polite">Reaching out</p>
+          <p class="loading-detail" id="loading-detail" aria-hidden="true"></p>
+          <p
+            class="loading-announcer"
+            id="loading-announcer"
+            aria-live="polite"
+          ></p>
+          <p class="loading-hint" id="loading-hint"></p>
         </div>
-        <script>
-            // Logo spinner — rAF-driven for smooth petal cycling
-            (function(){
-                var petals = document.querySelectorAll('.loading-petal');
-                if (!petals.length) return;
-                var count = petals.length;
-                var cycle = 1400;
-                var start = null;
-                var raf;
-                function tick(ts) {
-                    if (!start) start = ts;
-                    var p = ((ts - start) % cycle) / cycle;
-                    for (var i = 0; i < count; i++) {
-                        var dist = p - i / count;
-                        if (dist < 0) dist += 1;
-                        var b = Math.max(0.15, Math.pow(Math.max(0, 1 - dist * 2.5), 2));
-                        petals[i].style.opacity = b;
-                        petals[i].style.transform = 'scale(' + (0.92 + 0.08 * b) + ')';
-                    }
-                    raf = requestAnimationFrame(tick);
-                }
-                raf = requestAnimationFrame(tick);
-                // Stop when loading is replaced
-                window.__stopLoadingSpinner = function() { cancelAnimationFrame(raf); };
-            })();
-        </script>
-        <script type="module" src="/src/main.ts"></script>
-    </body>
+      </div>
+    </div>
+    <script>
+      // Logo spinner — rAF-driven for smooth petal cycling
+      (function () {
+        var petals = document.querySelectorAll(".loading-petal");
+        if (!petals.length) return;
+        var count = petals.length;
+        var cycle = 1400;
+        var start = null;
+        var raf;
+        function tick(ts) {
+          if (!start) start = ts;
+          var p = ((ts - start) % cycle) / cycle;
+          for (var i = 0; i < count; i++) {
+            var dist = p - i / count;
+            if (dist < 0) dist += 1;
+            var b = Math.max(0.15, Math.pow(Math.max(0, 1 - dist * 2.5), 2));
+            petals[i].style.opacity = b;
+            petals[i].style.transform = "scale(" + (0.92 + 0.08 * b) + ")";
+          }
+          raf = requestAnimationFrame(tick);
+        }
+        raf = requestAnimationFrame(tick);
+        // Stop when loading is replaced
+        window.__stopLoadingSpinner = function () {
+          cancelAnimationFrame(raf);
+        };
+      })();
+    </script>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
 </html>
diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index a8230df7..05ff6cae 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -31,6 +31,7 @@ import {
   showLanding,
   initPhases,
   advancePhase,
+  getCurrentPhase,
   setStatusDetail,
   stopStatusTick,
   listenForSandboxStatus,
@@ -1191,10 +1192,13 @@ async function main(): Promise<void> {
   // means the first finalized block landed, so the resolver can read
   // storage. Health samples put a live peer count under the headline while
   // the chain bootstraps, and stall events replace it with honest copy.
-  // Events are emitted from the protocol iframe, which owns smoldot, and
-  // arrive through the protocol client's origin- and source-gated listener.
-  // The `statusToPhase` log-text path remains as a fallback.
-  if (chainBackend !== "rpc-gateway") {
+  // Events are emitted from the protocol iframe, which owns smoldot in
+  // direct mode, and arrive through the protocol client's origin- and
+  // source-gated listener. The `statusToPhase` log-text path remains as a
+  // fallback. Only direct mode subscribes: in shared-worker mode smoldot
+  // lives in the SharedWorker, which does not forward lifecycle or health
+  // yet, and the gateway has no smoldot at all.
+  if (chainBackend === "smoldot-direct") {
     // Only the chains on the resolution critical path may drive the UI.
     // Bulletin, People, and the custom relay sync in the background; a
     // stall there is not what the user is waiting on.
@@ -1227,11 +1231,12 @@ async function main(): Promise<void> {
           event.reason === "noPeers"
             ? "searching for peers"
             : "syncing, no progress yet",
+          { announce: true },
         );
         return;
       }
       if (event.lifecycleKind === "recovered" && !syncDetailDone) {
-        setStatusDetail(peerDetail);
+        setStatusDetail(peerDetail, { announce: true });
         return;
       }
       if (event.chain !== "asset-hub") {
@@ -1367,22 +1372,30 @@ async function main(): Promise<void> {
           // mapping from status text to ResolvePhase, so we defer to it
           // instead of maintaining a parallel regex here.
           const phase = statusToPhase(msg);
-          if (phase === "relay-chain-adding") {
-            advancePhase(1);
-          } else if (
-            // `asset-hub-connecting` is ~0ms (just createClient), so it shares
-            // the Syncing band rather than getting a slice that makes the bar
-            // jump for no work.
-            phase === "asset-hub-connecting" ||
-            phase === "asset-hub-syncing" ||
-            phase === "asset-hub-ready"
-          ) {
-            advancePhase(2);
-          } else if (phase === "resolving-content") {
-            advancePhase(3);
+          // `asset-hub-connecting` is ~0ms (just createClient), so it shares
+          // the Syncing band rather than getting a slice that makes the bar
+          // jump for no work.
+          const mappedPhase =
+            phase === "relay-chain-adding"
+              ? 1
+              : phase === "asset-hub-connecting" ||
+                  phase === "asset-hub-syncing" ||
+                  phase === "asset-hub-ready"
+                ? 2
+                : phase === "resolving-content"
+                  ? 3
+                  : null;
+          if (mappedPhase !== null) {
+            advancePhase(mappedPhase);
           }
           emitPhase(msg, phase ?? "progress");
-          showStatus(msg);
+          // Lifecycle events usually outrun these status strings. Prose
+          // describing a phase the bar has already passed must not flip
+          // the headline backwards; unmapped messages (bootnode issues,
+          // not-found notices) always show.
+          if (mappedPhase === null || mappedPhase >= getCurrentPhase()) {
+            showStatus(msg);
+          }
         };
         cid = await resolveDotNameRemote(`app.${label}`, onResolveProgress);
         if (cid === null) {
diff --git a/apps/protocol/src/main.ts b/apps/protocol/src/main.ts
index ac3025d3..cdd5c60d 100644
--- a/apps/protocol/src/main.ts
+++ b/apps/protocol/src/main.ts
@@ -687,8 +687,10 @@ async function initDirectMode(): Promise<void> {
     smoldotMod;
 
   // Peer-count polling is only worth the traffic when a loading UI can
-  // observe it. Direct mode is that case; the SharedWorker never enables it.
-  smoldotMod.enableHealthPolling();
+  // observe it. Direct mode is that case; the SharedWorker never enables
+  // it, and the host only renders the Asset Hub count, so only that chain
+  // polls.
+  smoldotMod.enableHealthPolling(["asset-hub"]);
 
   // On a smoldot panic, broadcast a fatal envelope to the parent. Direct
   // mode has no SharedWorker in the loop, so we post straight up to the
diff --git a/packages/protocol/src/client.ts b/packages/protocol/src/client.ts
index e1248d09..a4fc1e25 100644
--- a/packages/protocol/src/client.ts
+++ b/packages/protocol/src/client.ts
@@ -13,6 +13,7 @@ import type {
   ManifestResult,
   RootManifest,
 } from "@dotli/resolver/manifest";
+import type { LifecycleKind } from "@dotli/resolver/smoldot";
 import { BASE_DOMAIN, type SiteId } from "@dotli/config/config";
 import {
   getActiveGatewaySupportedGenesisHashes,
@@ -69,6 +70,15 @@ const lifecycleListeners = new Set<
   (event: ProtocolLifecycleEnvelope) => void
 >();
 const healthListeners = new Set<(event: ProtocolHealthEnvelope) => void>();
+// Runtime mirror of the resolver's LifecycleKind union: postMessage data is
+// untrusted, and the envelope type alone cannot reject a spoofed kind. The
+// `satisfies` ties each literal to the union so a typo fails typecheck.
+const LIFECYCLE_ENVELOPE_KINDS = new Set<string>([
+  "firstPeer",
+  "bootstrapComplete",
+  "stalled",
+  "recovered",
+] satisfies LifecycleKind[]);
 let listenerBound = false;
 let protocolReady = false;
 interface ReadyWaiter {
@@ -225,7 +235,7 @@ function bindMessageListener(): void {
       case "lifecycle": {
         if (
           typeof msg.chain !== "string" ||
-          typeof msg.lifecycleKind !== "string"
+          !LIFECYCLE_ENVELOPE_KINDS.has(msg.lifecycleKind)
         ) {
           return;
         }
diff --git a/packages/protocol/src/messages.ts b/packages/protocol/src/messages.ts
index c6eecc16..cb9068e2 100644
--- a/packages/protocol/src/messages.ts
+++ b/packages/protocol/src/messages.ts
@@ -1,6 +1,8 @@
 // Copyright 2026 Parity Technologies (UK) Ltd.
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import type { LifecycleKind } from "@dotli/resolver/smoldot";
+
 export interface ProtocolRequestMap {
   warmup: Record<string, never>;
   resolveDotName: { label: string };
@@ -109,7 +111,7 @@ export interface ProtocolLifecycleEnvelope {
   namespace: "dotli:protocol";
   kind: "lifecycle";
   chain: string;
-  lifecycleKind: string;
+  lifecycleKind: LifecycleKind;
   reason?: string;
 }
 
diff --git a/packages/resolver/src/smoldot-db.ts b/packages/resolver/src/smoldot-db.ts
index f180543c..0d8909a4 100644
--- a/packages/resolver/src/smoldot-db.ts
+++ b/packages/resolver/src/smoldot-db.ts
@@ -165,12 +165,29 @@ export interface ChainDbTap {
   isStopped(): boolean;
 }
 
+/**
+ * Response interceptor for traffic the resolver injects on the chain's
+ * JSON-RPC pipe (lifecycle follow, health polls). Called for every parsed
+ * response before it is forwarded to the chain's regular consumer. Return
+ * `true` to consume the message: polkadot-api never sees it, which keeps
+ * its provider free of ids and subscriptions it did not create.
+ */
+export type TapIntercept = (parsed: {
+  id?: unknown;
+  method?: unknown;
+  result?: unknown;
+  params?: unknown;
+}) => boolean;
+
 interface ExternalWaiter {
   resolve: (s: string) => void;
   reject: (e: unknown) => void;
 }
 
-export function tapChain(chain: SmoldotChainLike): ChainDbTap {
+export function tapChain(
+  chain: SmoldotChainLike,
+  intercept?: TapIntercept,
+): ChainDbTap {
   const originalNext = chain.nextJsonRpcResponse.bind(chain);
   const originalRemove = chain.remove.bind(chain);
 
@@ -216,7 +233,12 @@ export function tapChain(chain: SmoldotChainLike): ChainDbTap {
         return;
       }
       try {
-        const parsed = JSON.parse(raw) as { id?: unknown; result?: unknown };
+        const parsed = JSON.parse(raw) as {
+          id?: unknown;
+          method?: unknown;
+          result?: unknown;
+          params?: unknown;
+        };
         if (
           typeof parsed.id === "string" &&
           parsed.id.startsWith(REQUEST_ID_PREFIX)
@@ -228,7 +250,10 @@ export function tapChain(chain: SmoldotChainLike): ChainDbTap {
             continue;
           }
         }
-        // eslint-disable-next-line no-restricted-syntax -- parse failures fall through to external forwarding.
+        if (intercept?.(parsed) === true) {
+          continue;
+        }
+        // eslint-disable-next-line no-restricted-syntax -- parse or interceptor failures fall through to external forwarding.
       } catch {
         /* forward as-is */
       }
diff --git a/packages/resolver/src/smoldot.ts b/packages/resolver/src/smoldot.ts
index ed477402..f6dc6f3a 100644
--- a/packages/resolver/src/smoldot.ts
+++ b/packages/resolver/src/smoldot.ts
@@ -33,6 +33,7 @@ import {
   saveChainDb,
   tapChain,
   type ChainDbTap,
+  type TapIntercept,
 } from "./smoldot-db";
 
 /** The smoldot Client type (shared by `start()` and `startFromWorker()`). */
@@ -175,13 +176,16 @@ function emitHealth(event: HealthEvent): void {
   }
 }
 
-// Health polling is opt-in per process. The protocol iframe's direct mode
-// enables it; the SharedWorker never does, so its long-lived smoldot does
-// not poll for a UI that cannot observe it.
-let healthPollingEnabled = false;
+// Health polling is opt-in per process and per chain. The protocol
+// iframe's direct mode enables it for the chains its loading UI actually
+// reads; the SharedWorker never does, so its long-lived smoldot does not
+// poll for a UI that cannot observe it.
+const healthPollingChains = new Set<string>();
 
-export function enableHealthPolling(): void {
-  healthPollingEnabled = true;
+export function enableHealthPolling(chains: readonly string[]): void {
+  for (const chain of chains) {
+    healthPollingChains.add(chain);
+  }
 }
 
 // Smoldot's WASM can panic (e.g., the "Option::unwrap() on a None value"
@@ -239,19 +243,16 @@ const CONNECTION_ISSUE_PATTERNS = [
 ];
 
 // Reserved id prefixes for our internal JSON-RPC requests. Chosen so they
-// cannot collide with the numeric ids polkadot-api uses, and so responses
-// can be recognized in the log stream. The suffix after ":" is the logical
-// chain key, which is how responses are attributed to chains without
-// relying on smoldot's internal chain id.
+// cannot collide with the numeric ids polkadot-api uses, and so the chain
+// tap can recognize and consume the responses before they reach
+// polkadot-api's provider.
 const LIFECYCLE_FOLLOW_REQUEST_ID = "__dotli_lifecycle_follow__";
 const HEALTH_REQUEST_ID = "__dotli_health__";
 
-// smoldot's log target is `json-rpc-<chain id from the chain spec>`, while
-// requests are attributed by our logical keys ("relay", "asset-hub", ...).
-// The reply to our follow request carries the logical key in its id and
-// arrives on the chain's log target, which lets us learn the mapping
-// without hardcoding chain-spec ids per network.
-const chainKeyByLogName = new Map<string, string>();
+// Subscription id of each chain's `lifecycle_unstable_follow`, learned from
+// the follow reply. Notifications carry no request id, so this is how the
+// tap tells our subscription's events apart from any other traffic.
+const lifecycleSubscriptions = new Map<string, string>();
 
 function smoldotLogCallback(
   level: number,
@@ -265,22 +266,6 @@ function smoldotLogCallback(
     log.debug(`[smoldot:${target}] ${message}`);
   }
 
-  // Lifecycle and health payloads flow through the chain's JSON-RPC pipe,
-  // which is owned by polkadot-api. Rather than wrap the chain and race for
-  // messages, we observe the payloads passing through smoldot's own debug
-  // log stream: every response is logged on the `json-rpc-<chain>` target
-  // as `json-rpc-response-yielded; response=<json, truncated at 250 chars>`.
-  // We match schemas we ourselves define (our reserved request ids and the
-  // followEvent notification), so this is a structured side-channel, not
-  // prose scraping.
-  if (
-    target.startsWith("json-rpc-") &&
-    (message.includes("lifecycle_unstable_followEvent") ||
-      message.includes("__dotli_"))
-  ) {
-    handleSideChannelLine(target, message);
-  }
-
   // A panic is terminal with no recovery. Smoldot's log message starts
   // with "Smoldot has panicked while executing task …". Surface as fatal.
   if (
@@ -307,58 +292,60 @@ function smoldotLogCallback(
   }
 }
 
-function handleSideChannelLine(target: string, message: string): void {
-  // Smoldot emits the response JSON verbatim after a literal `response=`
-  // key in the log line. Request echoes use `request=` and fall out here.
-  const responseStart = message.indexOf("response=");
-  if (responseStart === -1) {
-    return;
-  }
-  const jsonPart = message.slice(responseStart + "response=".length);
-  const logName = target.slice("json-rpc-".length);
-  try {
-    const parsed = JSON.parse(jsonPart) as {
-      id?: string;
-      method?: string;
-      result?: unknown;
-      params?: {
-        result?: { kind?: string; reason?: string; previously?: string };
-      };
-    };
-    if (parsed.method === "lifecycle_unstable_followEvent") {
-      emitLifecycleNotification(logName, parsed.params?.result);
-      return;
-    }
-    if (typeof parsed.id !== "string") {
-      return;
-    }
-    if (parsed.id.startsWith(`${LIFECYCLE_FOLLOW_REQUEST_ID}:`)) {
-      // Reply to our follow request: learn which logical chain owns this
-      // log target so notifications (which carry no id) can be attributed.
-      chainKeyByLogName.set(
-        logName,
-        parsed.id.slice(LIFECYCLE_FOLLOW_REQUEST_ID.length + 1),
-      );
-      return;
+/**
+ * Response interceptor bound to one chain. Runs inside the chain tap's
+ * pump, so it sees every response in order, untruncated, and can consume
+ * our reserved-id traffic before polkadot-api's provider does.
+ */
+function makeSideChannelIntercept(chainName: string): TapIntercept {
+  return (parsed) => {
+    if (typeof parsed.id === "string") {
+      if (parsed.id.startsWith(`${LIFECYCLE_FOLLOW_REQUEST_ID}:`)) {
+        // Reply to our follow request: remember the subscription id so
+        // notifications (which carry no request id) can be matched below.
+        if (typeof parsed.result === "string") {
+          lifecycleSubscriptions.set(chainName, parsed.result);
+        }
+        return true;
+      }
+      if (parsed.id.startsWith(`${HEALTH_REQUEST_ID}:`)) {
+        handleHealthResponse(chainName, parsed.result);
+        return true;
+      }
+      return false;
     }
-    if (parsed.id.startsWith(`${HEALTH_REQUEST_ID}:`)) {
-      handleHealthResponse(parsed.id, parsed.result);
+    if (parsed.method === "lifecycle_unstable_followEvent") {
+      const params = parsed.params as
+        | {
+            subscription?: unknown;
+            result?: { kind?: string; reason?: string; previously?: string };
+          }
+        | undefined;
+      // The follow reply always precedes its notifications, so an unknown
+      // subscription id means the event belongs to someone else: forward it.
+      const subscription = lifecycleSubscriptions.get(chainName);
+      if (
+        params === undefined ||
+        subscription === undefined ||
+        params.subscription !== subscription
+      ) {
+        return false;
+      }
+      emitLifecycleNotification(chainName, params.result);
+      return true;
     }
-    // eslint-disable-next-line no-restricted-syntax -- best-effort parse of a smoldot debug log line: non-JSON or truncated payloads are expected and must not spam log.error.
-  } catch {
-    /* malformed or truncated response payload, skip */
-  }
+    return false;
+  };
 }
 
 function emitLifecycleNotification(
-  logName: string,
+  chain: string,
   result: { kind?: string; reason?: string; previously?: string } | undefined,
 ): void {
   const kind = result?.kind;
   if (kind === undefined || !LIFECYCLE_KINDS.has(kind)) {
     return;
   }
-  const chain = chainKeyByLogName.get(logName) ?? logName;
   if (kind === "bootstrapComplete") {
     // The chain is usable; peer-count polling has served its purpose.
     healthPollers.get(chain)?.stop();
@@ -376,12 +363,8 @@ function emitLifecycleNotification(
   });
 }
 
-function handleHealthResponse(id: string, result: unknown): void {
-  const rest = id.slice(HEALTH_REQUEST_ID.length + 1);
-  const chain = rest.slice(0, rest.lastIndexOf(":"));
-  if (chain === "") {
-    return;
-  }
+function handleHealthResponse(chain: string, result: unknown): void {
+  healthResponseSeen = true;
   healthPollers.get(chain)?.noteResponse();
   const health = result as { peers?: unknown; isSyncing?: unknown } | null;
   if (
@@ -493,14 +476,13 @@ function attachPersistence(
   underlying: SmoldotChain,
 ): SmoldotChain {
   teardownPersistence(chainName);
-  const tap = tapChain(underlying);
+  // The tap intercepts our reserved-id traffic (lifecycle follow, health
+  // polls) in-band and consumes it, so polkadot-api's provider only ever
+  // sees its own requests and subscriptions.
+  const tap = tapChain(underlying, makeSideChannelIntercept(chainName));
   schedulePersistence(chainName, tap);
-  // Fire the lifecycle subscription without wrapping the chain object.
-  // Polkadot-api consumes `jsonRpcResponses` iteratively and interposing on
-  // that path is racy. Notifications are read back from smoldot's own
-  // json-rpc log stream instead (see handleSideChannelLine).
   attachLifecycleFollow(chainName, tap.chain);
-  if (healthPollingEnabled) {
+  if (healthPollingChains.has(chainName)) {
     const entry = persistence.get(chainName);
     if (entry !== undefined) {
       entry.healthPoller = startHealthPolling(chainName, tap);
@@ -598,16 +580,16 @@ function startHealthPolling(chainName: string, tap: ChainDbTap): HealthPoller {
   };
 
   const noteResponse = (): void => {
-    healthResponseSeen = true;
     if (stopped) {
       return;
     }
     schedule(HEALTH_POLL_INTERVAL_MS);
   };
 
-  // The side-channel depends on smoldot's debug log format staying stable.
-  // If it breaks, lifecycle and health both go silently dead, so surface
-  // one warning per session when the first poll gets no observable reply.
+  // The side-channel depends on smoldot answering our reserved-id
+  // requests. If a smoldot bump breaks that, lifecycle and health both go
+  // silently dead, so surface one warning per session when the first poll
+  // gets no observable reply.
   if (!healthWatchdogArmed) {
     healthWatchdogArmed = true;
     const watchdog = setTimeout(() => {
@@ -641,9 +623,6 @@ export function getSmoldotDirect(): SmoldotClient {
   }
   log.warn("[dot.li smoldot] Creating smoldot via start() (current thread)");
   smoldotInstance = startSmoldotDirect({
-    // Lifecycle detection reads JSON-RPC payloads out of the debug log
-    // stream (parseAndEmitLifecycle). Lowering this level silently
-    // disables lifecycle events.
     maxLogLevel: 5,
     logCallback: smoldotLogCallback,
     // Smoldot's own auto-detection (no-auto-bytecode-browser.js) is buggy
@@ -670,9 +649,6 @@ export function getSmoldot(): SmoldotClient {
   }
   log.warn("[dot.li smoldot] Creating smoldot via startFromWorker()");
   smoldotInstance = startFromWorker(new SmWorker(), {
-    // Lifecycle detection reads JSON-RPC payloads out of the debug log
-    // stream (parseAndEmitLifecycle). Lowering this level silently
-    // disables lifecycle events.
     maxLogLevel: 5,
     logCallback: smoldotLogCallback,
     forbidNonLocalWs: true,
@@ -703,10 +679,10 @@ export function terminateSmoldot(): void {
     /* already destroyed or crashed, safe to ignore */
   }
   teardownAllPersistence();
-  // The next smoldot instance re-learns chain identities and re-emits its
-  // own lifecycle; stale mappings or replayed events from the dead session
-  // would mislabel or suppress the new one's signals.
-  chainKeyByLogName.clear();
+  // The next smoldot instance re-subscribes and re-emits its own
+  // lifecycle; stale subscription ids or replayed events from the dead
+  // session would mislabel or suppress the new one's signals.
+  lifecycleSubscriptions.clear();
   lifecycleHistory.clear();
   lastHealth.clear();
   smoldotInstance = null;
diff --git a/packages/resolver/tests/smoldot.test.ts b/packages/resolver/tests/smoldot.test.ts
index b666419e..582edded 100644
--- a/packages/resolver/tests/smoldot.test.ts
+++ b/packages/resolver/tests/smoldot.test.ts
@@ -3,30 +3,59 @@
 
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 
-vi.mock("polkadot-api/smoldot", () => ({
-  start: vi.fn(() => ({
-    addChain: vi.fn().mockResolvedValue({
+// Queue-backed chain mocks: tests push raw JSON-RPC responses and the
+// chain tap's pump consumes them exactly as it does smoldot's output.
+const chainMocks = vi.hoisted(() => {
+  interface MockChain {
+    sendJsonRpc: ReturnType<typeof vi.fn>;
+    nextJsonRpcResponse: () => Promise<string>;
+    jsonRpcResponses: AsyncGenerator<string>;
+    remove: ReturnType<typeof vi.fn>;
+    push(raw: string): void;
+  }
+  const chains: MockChain[] = [];
+  function makeChain(): MockChain {
+    const queue: string[] = [];
+    const waiters: ((s: string) => void)[] = [];
+    const chain: MockChain = {
       sendJsonRpc: vi.fn(),
-      nextJsonRpcResponse: vi.fn(),
+      nextJsonRpcResponse: () =>
+        new Promise<string>((resolve) => {
+          const next = queue.shift();
+          if (next !== undefined) {
+            resolve(next);
+          } else {
+            waiters.push(resolve);
+          }
+        }),
       jsonRpcResponses: (async function* () {})(),
       remove: vi.fn(),
-    }),
+      push(raw: string) {
+        const waiter = waiters.shift();
+        if (waiter !== undefined) {
+          waiter(raw);
+        } else {
+          queue.push(raw);
+        }
+      },
+    };
+    chains.push(chain);
+    return chain;
+  }
+  return { chains, makeChain };
+});
+
+vi.mock("polkadot-api/smoldot", () => ({
+  start: vi.fn(() => ({
+    addChain: vi.fn(() => Promise.resolve(chainMocks.makeChain())),
   })),
 }));
 
-vi.mock("polkadot-api/smoldot/from-worker", () => {
-  const mockAddChain = vi.fn().mockResolvedValue({
-    sendJsonRpc: vi.fn(),
-    nextJsonRpcResponse: vi.fn(),
-    jsonRpcResponses: (async function* () {})(),
-    remove: vi.fn(),
-  });
-  return {
-    startFromWorker: vi.fn(() => ({
-      addChain: mockAddChain,
-    })),
-  };
-});
+vi.mock("polkadot-api/smoldot/from-worker", () => ({
+  startFromWorker: vi.fn(() => ({
+    addChain: vi.fn(() => Promise.resolve(chainMocks.makeChain())),
+  })),
+}));
 
 vi.mock("polkadot-api/smoldot/worker?worker", () => {
   return { default: class MockWorker {} };
@@ -54,9 +83,8 @@ let onHealth: typeof import("@dotli/resolver/smoldot").onHealth;
 let enableHealthPolling: typeof import("@dotli/resolver/smoldot").enableHealthPolling;
 
 beforeEach(async () => {
-  // The mocked chain object is shared by the module factories above, so its
-  // call history would otherwise leak across tests.
   vi.clearAllMocks();
+  chainMocks.chains.length = 0;
   vi.resetModules();
   const mod = await import("@dotli/resolver/smoldot");
   getSmoldot = mod.getSmoldot;
@@ -66,6 +94,56 @@ beforeEach(async () => {
   enableHealthPolling = mod.enableHealthPolling;
 });
 
+// Let the tap's pump loop drain everything pushed so far.
+async function flush(): Promise<void> {
+  for (let i = 0; i < 25; i++) {
+    await Promise.resolve();
+  }
+}
+
+async function relayMock(): Promise<
+  (typeof chainMocks.chains)[number] & object
+> {
+  await getRelayChain();
+  const chain = chainMocks.chains.at(-1);
+  if (chain === undefined) {
+    throw new Error("relay chain mock was not created");
+  }
+  return chain;
+}
+
+const FOLLOW_REPLY = JSON.stringify({
+  jsonrpc: "2.0",
+  id: "__dotli_lifecycle_follow__:relay",
+  result: "sub-1",
+});
+
+function followEvent(
+  subscription: string,
+  kind: string,
+  extra: Record<string, unknown> = {},
+): string {
+  return JSON.stringify({
+    jsonrpc: "2.0",
+    method: "lifecycle_unstable_followEvent",
+    params: { subscription, result: { kind, ...extra } },
+  });
+}
+
+function healthReply(seq: number, peers: number, isSyncing = true): string {
+  return JSON.stringify({
+    jsonrpc: "2.0",
+    id: `__dotli_health__:relay:${String(seq)}`,
+    result: { isSyncing, peers, shouldHavePeers: true },
+  });
+}
+
+function healthCalls(chain: { sendJsonRpc: ReturnType<typeof vi.fn> }) {
+  return chain.sendJsonRpc.mock.calls
+    .map((call) => call[0] as string)
+    .filter((raw) => raw.includes("system_health"));
+}
+
 describe("getSmoldot", () => {
   it("returns the same instance on repeated calls", () => {
     const a = getSmoldot();
@@ -93,104 +171,71 @@ describe("getRelayChain", () => {
   });
 });
 
-// Grab the logCallback the module hands to smoldot so tests can feed it
-// synthetic json-rpc log lines.
-async function captureLogCallback(): Promise<
-  (level: number, target: string, message: string) => void
-> {
-  getSmoldot();
-  const { startFromWorker } = await import("polkadot-api/smoldot/from-worker");
-  const options = vi.mocked(startFromWorker).mock.lastCall?.[1];
-  if (options?.logCallback === undefined) {
-    throw new Error("logCallback was not passed to startFromWorker");
-  }
-  return options.logCallback;
-}
-
-// Production line shape: smoldot logs every response on the chain's
-// `json-rpc-<id>` target as `json-rpc-response-yielded; response=<json>`.
-function responseLine(payload: unknown): string {
-  return `json-rpc-response-yielded; response=${JSON.stringify(payload)}`;
-}
-
-function followEventLine(
-  kind: string,
-  extra: Record<string, unknown> = {},
-): string {
-  return responseLine({
-    jsonrpc: "2.0",
-    method: "lifecycle_unstable_followEvent",
-    params: { subscription: "lf-1", result: { kind, ...extra } },
-  });
-}
-
-function followReplyLine(logicalKey: string): string {
-  return responseLine({
-    jsonrpc: "2.0",
-    id: `__dotli_lifecycle_follow__:${logicalKey}`,
-    result: "lf-1",
-  });
-}
-
-function healthLine(
-  logicalKey: string,
-  seq: number,
-  peers: number,
-  isSyncing = true,
-): string {
-  return responseLine({
-    jsonrpc: "2.0",
-    id: `__dotli_health__:${logicalKey}:${String(seq)}`,
-    result: { isSyncing, peers, shouldHavePeers: true },
-  });
-}
-
 describe("onLifecycle", () => {
-  it("delivers events keyed by the logical chain once the follow reply is seen", async () => {
-    const logCallback = await captureLogCallback();
+  it("delivers events for the chain once the follow reply is seen", async () => {
+    const chain = await relayMock();
     const events: unknown[] = [];
     onLifecycle((event) => events.push(event));
 
-    logCallback(4, "json-rpc-asset-hub-paseo", followReplyLine("asset-hub"));
-    logCallback(4, "json-rpc-asset-hub-paseo", followEventLine("firstPeer"));
-    logCallback(
-      4,
-      "json-rpc-asset-hub-paseo",
-      followEventLine("bootstrapComplete"),
-    );
+    chain.push(FOLLOW_REPLY);
+    chain.push(followEvent("sub-1", "firstPeer"));
+    chain.push(followEvent("sub-1", "bootstrapComplete"));
+    await flush();
 
     expect(events).toEqual([
-      { chain: "asset-hub", kind: "firstPeer" },
-      { chain: "asset-hub", kind: "bootstrapComplete" },
+      { chain: "relay", kind: "firstPeer" },
+      { chain: "relay", kind: "bootstrapComplete" },
     ]);
   });
 
-  it("falls back to the log target name when no follow reply mapped it", async () => {
-    const logCallback = await captureLogCallback();
+  it("forwards notifications from unknown subscriptions to the chain consumer", async () => {
+    const tapped = await getRelayChain();
+    const chain = chainMocks.chains.at(-1);
+    if (chain === undefined) {
+      throw new Error("relay chain mock was not created");
+    }
     const events: unknown[] = [];
     onLifecycle((event) => events.push(event));
 
-    logCallback(4, "json-rpc-asset-hub-paseo", followEventLine("firstPeer"));
+    chain.push(FOLLOW_REPLY);
+    const foreign = followEvent("someone-elses-sub", "firstPeer");
+    chain.push(foreign);
+    await flush();
 
-    expect(events).toEqual([{ chain: "asset-hub-paseo", kind: "firstPeer" }]);
+    expect(events).toEqual([]);
+    await expect(tapped.nextJsonRpcResponse()).resolves.toBe(foreign);
+  });
+
+  it("consumes our traffic so the chain consumer never sees it", async () => {
+    const tapped = await getRelayChain();
+    const chain = chainMocks.chains.at(-1);
+    if (chain === undefined) {
+      throw new Error("relay chain mock was not created");
+    }
+
+    chain.push(FOLLOW_REPLY);
+    chain.push(followEvent("sub-1", "firstPeer"));
+    const papiResponse = JSON.stringify({
+      jsonrpc: "2.0",
+      id: "1-42",
+      result: "0x00",
+    });
+    chain.push(papiResponse);
+    await flush();
+
+    // Only the polkadot-api response comes through; ours were consumed.
+    await expect(tapped.nextJsonRpcResponse()).resolves.toBe(papiResponse);
   });
 
   it("carries the stall reason and the recovery cause", async () => {
-    const logCallback = await captureLogCallback();
+    const chain = await relayMock();
     const events: unknown[] = [];
     onLifecycle((event) => events.push(event));
 
-    logCallback(4, "json-rpc-paseo", followReplyLine("relay"));
-    logCallback(
-      4,
-      "json-rpc-paseo",
-      followEventLine("stalled", { reason: "noPeers" }),
-    );
-    logCallback(
-      4,
-      "json-rpc-paseo",
-      followEventLine("recovered", { previously: "noPeers" }),
-    );
+    chain.push(FOLLOW_REPLY);
+    chain.push(followEvent("sub-1", "stalled", { reason: "noPeers" }));
+    chain.push(followEvent("sub-1", "recovered", { previously: "noPeers" }));
+    await flush();
 
     expect(events).toEqual([
       { chain: "relay", kind: "stalled", reason: "noPeers" },
@@ -199,19 +244,12 @@ describe("onLifecycle", () => {
   });
 
   it("replays only the latest event per chain and kind to a late subscriber", async () => {
-    const logCallback = await captureLogCallback();
-    logCallback(4, "json-rpc-paseo", followReplyLine("relay"));
-    logCallback(
-      4,
-      "json-rpc-paseo",
-      followEventLine("stalled", { reason: "noPeers" }),
-    );
-    logCallback(
-      4,
-      "json-rpc-paseo",
-      followEventLine("stalled", { reason: "syncNoProgress" }),
-    );
-    logCallback(4, "json-rpc-paseo", followEventLine("firstPeer"));
+    const chain = await relayMock();
+    chain.push(FOLLOW_REPLY);
+    chain.push(followEvent("sub-1", "stalled", { reason: "noPeers" }));
+    chain.push(followEvent("sub-1", "stalled", { reason: "syncNoProgress" }));
+    chain.push(followEvent("sub-1", "firstPeer"));
+    await flush();
 
     const events: unknown[] = [];
     onLifecycle((event) => events.push(event));
@@ -223,18 +261,11 @@ describe("onLifecycle", () => {
   });
 
   it("replays only the newer half of a stall and recovery pair", async () => {
-    const logCallback = await captureLogCallback();
-    logCallback(4, "json-rpc-paseo", followReplyLine("relay"));
-    logCallback(
-      4,
-      "json-rpc-paseo",
-      followEventLine("stalled", { reason: "noPeers" }),
-    );
-    logCallback(
-      4,
-      "json-rpc-paseo",
-      followEventLine("recovered", { previously: "noPeers" }),
-    );
+    const chain = await relayMock();
+    chain.push(FOLLOW_REPLY);
+    chain.push(followEvent("sub-1", "stalled", { reason: "noPeers" }));
+    chain.push(followEvent("sub-1", "recovered", { previously: "noPeers" }));
+    await flush();
 
     const events: unknown[] = [];
     onLifecycle((event) => events.push(event));
@@ -244,55 +275,44 @@ describe("onLifecycle", () => {
     ]);
   });
 
-  it("ignores malformed, unknown-kind, and non-lifecycle payloads", async () => {
-    const logCallback = await captureLogCallback();
+  it("ignores kinds outside the allowlist but still consumes them", async () => {
+    const tapped = await getRelayChain();
+    const chain = chainMocks.chains.at(-1);
+    if (chain === undefined) {
+      throw new Error("relay chain mock was not created");
+    }
     const events: unknown[] = [];
     onLifecycle((event) => events.push(event));
 
-    // Mentions the method but carries no response payload.
-    logCallback(4, "json-rpc-paseo", "sent lifecycle_unstable_followEvent");
-    // Request echo, not a response.
-    logCallback(
-      4,
-      "json-rpc-paseo",
-      'json-rpc-request-queued; request={"method":"lifecycle_unstable_followEvent"}',
-    );
-    // Truncated JSON (smoldot caps the logged payload at 250 chars).
-    logCallback(
-      4,
-      "json-rpc-paseo",
-      'json-rpc-response-yielded; response={"method":"lifecycle_unstable_followEvent"',
-    );
-    // A different method that happens to mention the string.
-    logCallback(
-      4,
-      "json-rpc-paseo",
-      followEventLine("firstPeer").replace("followEvent", "followEvent_other"),
-    );
-    // A kind outside the allowlist (smoldot emits more kinds than we consume).
-    logCallback(4, "json-rpc-paseo", followEventLine("warpSyncProgress"));
-    // Right payload on a non json-rpc target.
-    logCallback(4, "sync-service-paseo", followEventLine("firstPeer"));
+    chain.push(FOLLOW_REPLY);
+    chain.push(followEvent("sub-1", "warpSyncProgress", { at: 5, target: 9 }));
+    const papiResponse = JSON.stringify({ jsonrpc: "2.0", id: "1-1" });
+    chain.push(papiResponse);
+    await flush();
 
     expect(events).toEqual([]);
+    await expect(tapped.nextJsonRpcResponse()).resolves.toBe(papiResponse);
   });
 
   it("stops delivering after unsubscribe", async () => {
-    const logCallback = await captureLogCallback();
+    const chain = await relayMock();
     const events: unknown[] = [];
     const unsubscribe = onLifecycle((event) => events.push(event));
 
-    logCallback(4, "json-rpc-paseo", followEventLine("firstPeer"));
+    chain.push(FOLLOW_REPLY);
+    chain.push(followEvent("sub-1", "firstPeer"));
+    await flush();
     unsubscribe();
-    logCallback(4, "json-rpc-paseo", followEventLine("bootstrapComplete"));
+    chain.push(followEvent("sub-1", "bootstrapComplete"));
+    await flush();
 
-    expect(events).toEqual([{ chain: "paseo", kind: "firstPeer" }]);
+    expect(events).toEqual([{ chain: "relay", kind: "firstPeer" }]);
   });
 });
 
 describe("onHealth", () => {
   // Fake timers keep leaked poller resends (2s timeout) from bleeding
-  // between tests through the shared mock chain.
+  // between tests through the mock chains.
   beforeEach(() => {
     vi.useFakeTimers();
   });
@@ -300,51 +320,43 @@ describe("onHealth", () => {
     vi.useRealTimers();
   });
 
-  async function relaySendJsonRpc(): Promise<ReturnType<typeof vi.fn>> {
-    const { startFromWorker } =
-      await import("polkadot-api/smoldot/from-worker");
-    const client = vi.mocked(startFromWorker).mock.results.at(-1)?.value as {
-      addChain: ReturnType<typeof vi.fn>;
-    };
-    const chain = (await client.addChain.mock.results.at(-1)?.value) as {
-      sendJsonRpc: ReturnType<typeof vi.fn>;
-    };
-    return chain.sendJsonRpc;
-  }
-
-  function healthCalls(sendJsonRpc: ReturnType<typeof vi.fn>): string[] {
-    return sendJsonRpc.mock.calls
-      .map((call) => call[0] as string)
-      .filter((raw) => raw.includes("system_health"));
-  }
-
   it("polls system_health immediately and emits the parsed sample", async () => {
-    enableHealthPolling();
-    const logCallback = await captureLogCallback();
-    await getRelayChain();
-    const sendJsonRpc = await relaySendJsonRpc();
+    enableHealthPolling(["relay"]);
+    const chain = await relayMock();
 
-    const sent = healthCalls(sendJsonRpc);
+    const sent = healthCalls(chain);
     expect(sent.length).toBeGreaterThanOrEqual(1);
     expect(sent[0]).toContain('"id":"__dotli_health__:relay:1"');
 
     const events: unknown[] = [];
     onHealth((event) => events.push(event));
-    logCallback(4, "json-rpc-paseo", healthLine("relay", 1, 3));
+    chain.push(healthReply(1, 3));
+    await flush();
 
     expect(events).toEqual([{ chain: "relay", peers: 3, isSyncing: true }]);
   });
 
+  it("does not poll chains outside the allowlist", async () => {
+    enableHealthPolling(["asset-hub"]);
+    const chain = await relayMock();
+    expect(healthCalls(chain)).toEqual([]);
+  });
+
+  it("does not poll when polling was never enabled", async () => {
+    const chain = await relayMock();
+    expect(healthCalls(chain)).toEqual([]);
+  });
+
   it("emits only when the sample changes", async () => {
-    enableHealthPolling();
-    const logCallback = await captureLogCallback();
-    await getRelayChain();
+    enableHealthPolling(["relay"]);
+    const chain = await relayMock();
 
     const events: unknown[] = [];
     onHealth((event) => events.push(event));
-    logCallback(4, "json-rpc-paseo", healthLine("relay", 1, 2));
-    logCallback(4, "json-rpc-paseo", healthLine("relay", 2, 2));
-    logCallback(4, "json-rpc-paseo", healthLine("relay", 3, 5));
+    chain.push(healthReply(1, 2));
+    chain.push(healthReply(2, 2));
+    chain.push(healthReply(3, 5));
+    await flush();
 
     expect(events).toEqual([
       { chain: "relay", peers: 2, isSyncing: true },
@@ -353,11 +365,11 @@ describe("onHealth", () => {
   });
 
   it("replays the last sample to a late subscriber", async () => {
-    enableHealthPolling();
-    const logCallback = await captureLogCallback();
-    await getRelayChain();
+    enableHealthPolling(["relay"]);
+    const chain = await relayMock();
 
-    logCallback(4, "json-rpc-paseo", healthLine("relay", 1, 4));
+    chain.push(healthReply(1, 4));
+    await flush();
 
     const events: unknown[] = [];
     onHealth((event) => events.push(event));
@@ -365,55 +377,42 @@ describe("onHealth", () => {
   });
 
   it("stops polling once the chain bootstrap completes", async () => {
-    enableHealthPolling();
-    const logCallback = await captureLogCallback();
-    await getRelayChain();
-    const sendJsonRpc = await relaySendJsonRpc();
-
-    // Map the log target to the logical key, then finish bootstrap.
-    logCallback(4, "json-rpc-paseo", followReplyLine("relay"));
-    logCallback(4, "json-rpc-paseo", healthLine("relay", 1, 3));
-    logCallback(4, "json-rpc-paseo", followEventLine("bootstrapComplete"));
-
-    const sentBefore = healthCalls(sendJsonRpc).length;
-    vi.advanceTimersByTime(30_000);
-    expect(healthCalls(sendJsonRpc).length).toBe(sentBefore);
-  });
+    enableHealthPolling(["relay"]);
+    const chain = await relayMock();
 
-  it("does not poll when polling was never enabled", async () => {
-    await captureLogCallback();
-    await getRelayChain();
-    const sendJsonRpc = await relaySendJsonRpc();
-    expect(healthCalls(sendJsonRpc)).toEqual([]);
+    chain.push(FOLLOW_REPLY);
+    chain.push(healthReply(1, 3));
+    chain.push(followEvent("sub-1", "bootstrapComplete"));
+    await flush();
+
+    const sentBefore = healthCalls(chain).length;
+    await vi.advanceTimersByTimeAsync(30_000);
+    expect(healthCalls(chain).length).toBe(sentBefore);
   });
 
   it("rejects malformed health payloads", async () => {
-    enableHealthPolling();
-    const logCallback = await captureLogCallback();
-    await getRelayChain();
+    enableHealthPolling(["relay"]);
+    const chain = await relayMock();
 
     const events: unknown[] = [];
     onHealth((event) => events.push(event));
     // peers is not an integer
-    logCallback(
-      4,
-      "json-rpc-paseo",
-      responseLine({
+    chain.push(
+      JSON.stringify({
         jsonrpc: "2.0",
         id: "__dotli_health__:relay:1",
         result: { isSyncing: true, peers: "3" },
       }),
     );
-    // result missing (error response)
-    logCallback(
-      4,
-      "json-rpc-paseo",
-      responseLine({
+    // error response, no result
+    chain.push(
+      JSON.stringify({
         jsonrpc: "2.0",
         id: "__dotli_health__:relay:2",
         error: { code: -32000, message: "nope" },
       }),
     );
+    await flush();
 
     expect(events).toEqual([]);
   });
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index 87eeeec5..4d590184 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -172,6 +172,17 @@ body {
   text-align: center;
   min-height: 1.3em;
 }
+/* Screen-reader-only slot for one-shot loading announcements (stall and
+   recovery copy). The same text shows visually in .loading-detail, which
+   is aria-hidden to keep its per-second count out of the live queue. */
+.loading-announcer {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
 /* Slow-step hint (shown below status when a step exceeds its threshold) */
 .loading-hint {
   font-size: 11px;
diff --git a/packages/ui/src/ui.ts b/packages/ui/src/ui.ts
index f68dba1c..7b3f585b 100644
--- a/packages/ui/src/ui.ts
+++ b/packages/ui/src/ui.ts
@@ -139,18 +139,39 @@ export function advancePhase(index: number): void {
   armSlowHint(label);
 }
 
+/**
+ * Current phase index, -1 before the first `advancePhase`. Lets callers
+ * suppress signals that describe a phase the bar has already passed.
+ */
+export function getCurrentPhase(): number {
+  return currentPhase;
+}
+
 /**
  * Live detail line under the status headline (e.g. "3 peers"). Deliberately
  * separate from `#status`: this value changes every second or two during
  * sync, and `#status` is aria-live, so routing it there would queue a
  * screen-reader announcement per change. The detail element is aria-hidden
  * and never touches the slow-hint timer.
+ *
+ * `announce` mirrors the text once into the visually hidden polite region,
+ * for state changes a screen-reader user should hear (stall and recovery
+ * copy) without the per-second count spam.
  */
-export function setStatusDetail(detail: string): void {
+export function setStatusDetail(
+  detail: string,
+  opts: { announce?: boolean } = {},
+): void {
   const el = document.getElementById("loading-detail");
   if (el !== null) {
     el.textContent = detail;
   }
+  if (opts.announce === true && detail !== "") {
+    const announcer = document.getElementById("loading-announcer");
+    if (announcer !== null && announcer.textContent !== detail) {
+      announcer.textContent = detail;
+    }
+  }
 }
 
 export const GATEWAY_ESCAPE_DELAY_MS = 10_000;

From bdbdeea8833b830086ba01e303cb8e6ae93408f3 Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Wed, 5 Aug 2026 16:23:37 +0100
Subject: [PATCH 06/24] Merge the lifecycle and health channels into one
 chain-sync stream and report only on the chains the loading screen shows

---
 apps/host/index.html                          | 673 +++++++-----------
 apps/host/src/main.ts                         | 133 ++--
 apps/host/tests/functional/resolution.spec.ts |  13 +-
 apps/protocol/src/main.ts                     |  51 +-
 packages/protocol/src/client.ts               | 125 ++--
 packages/protocol/src/messages.ts             |  39 +-
 packages/resolver/src/resolve.ts              |  14 +-
 packages/resolver/src/smoldot-db.ts           |  28 +-
 packages/resolver/src/smoldot.ts              | 336 ++++-----
 packages/resolver/tests/smoldot.test.ts       | 454 ++++++------
 packages/ui/src/styles/base.css               |  18 +-
 packages/ui/src/ui.ts                         |  57 +-
 packages/ui/tests/ui.test.ts                  |  83 ---
 13 files changed, 880 insertions(+), 1144 deletions(-)
 delete mode 100644 packages/ui/tests/ui.test.ts

diff --git a/apps/host/index.html b/apps/host/index.html
index 229f9d7b..559eab0c 100644
--- a/apps/host/index.html
+++ b/apps/host/index.html
@@ -3,433 +3,270 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-only -->
 
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Polkadot - The decentralized web, in your browser</title>
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="preconnect" href="https://host.dot.li" crossorigin />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap"
-      rel="stylesheet"
-    />
-    <script>
-      // Pre-open the shared IndexedDB during HTML parse so it's ready
-      // before main.ts executes. Overlaps IDB open (~10-50ms) with
-      // module loading. Picked up by src/db.ts via window.__dotliDb.
-      window.__dotliDb = new Promise(function (resolve, reject) {
-        var req = indexedDB.open("dotli", 2);
-        req.onupgradeneeded = function () {
-          var db = req.result;
-          if (!db.objectStoreNames.contains("cids"))
-            db.createObjectStore("cids", { keyPath: "label" });
-          if (!db.objectStoreNames.contains("chains"))
-            db.createObjectStore("chains", { keyPath: "chain" });
-          // v2: scheduled notifications + per-product id counters.
-          if (!db.objectStoreNames.contains("scheduled_notifications")) {
-            var s = db.createObjectStore("scheduled_notifications", {
-              keyPath: "hostId",
-              autoIncrement: true,
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Polkadot - The decentralized web, in your browser</title>
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="preconnect" href="https://host.dot.li" crossorigin />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap" rel="stylesheet" />
+        <script>
+            // Pre-open the shared IndexedDB during HTML parse so it's ready
+            // before main.ts executes. Overlaps IDB open (~10-50ms) with
+            // module loading. Picked up by src/db.ts via window.__dotliDb.
+            window.__dotliDb = new Promise(function(resolve, reject) {
+                var req = indexedDB.open("dotli", 2);
+                req.onupgradeneeded = function() {
+                    var db = req.result;
+                    if (!db.objectStoreNames.contains("cids"))
+                        db.createObjectStore("cids", { keyPath: "label" });
+                    if (!db.objectStoreNames.contains("chains"))
+                        db.createObjectStore("chains", { keyPath: "chain" });
+                    // v2: scheduled notifications + per-product id counters.
+                    if (!db.objectStoreNames.contains("scheduled_notifications")) {
+                        var s = db.createObjectStore("scheduled_notifications", { keyPath: "hostId", autoIncrement: true });
+                        s.createIndex("byProductId", "productId", { unique: false });
+                        s.createIndex("byScheduledAt", "scheduledAt", { unique: false });
+                    }
+                    if (!db.objectStoreNames.contains("notification_counters"))
+                        db.createObjectStore("notification_counters", { keyPath: "productId" });
+                };
+                req.onsuccess = function() { resolve(req.result); };
+                req.onerror = function() { reject(new Error("IDB open failed")); };
             });
-            s.createIndex("byProductId", "productId", { unique: false });
-            s.createIndex("byScheduledAt", "scheduledAt", { unique: false });
-          }
-          if (!db.objectStoreNames.contains("notification_counters"))
-            db.createObjectStore("notification_counters", {
-              keyPath: "productId",
-            });
-        };
-        req.onsuccess = function () {
-          resolve(req.result);
-        };
-        req.onerror = function () {
-          reject(new Error("IDB open failed"));
-        };
-      });
-    </script>
-    <link
-      rel="preconnect"
-      href="https://paseo-bulletin-collator-node-0.parity-testnet.parity.io"
-    />
-    <link
-      rel="preconnect"
-      href="https://paseo-bulletin-collator-node-1.parity-testnet.parity.io"
-    />
-    <link
-      rel="preconnect"
-      href="https://paseo-bulletin-rpc-node-0.polkadot.io"
-    />
-    <link
-      rel="preconnect"
-      href="https://paseo-bulletin-rpc-node-1.polkadot.io"
-    />
-    <link rel="preconnect" href="https://paseo-ipfs.polkadot.io" />
-    <link rel="preconnect" href="https://sys.ibp.network" />
-    <!-- Styles are loaded via src/styles.css (imported in main.ts) -->
-  </head>
-  <body>
-    <script>
-      (function () {
-        var theme = "dark";
-        try {
-          var stored = localStorage.getItem("dotli-theme");
-          if (stored === "light" || stored === "dark") {
-            theme = stored;
-          } else if (
-            window.matchMedia &&
-            window.matchMedia("(prefers-color-scheme: light)").matches
-          ) {
-            theme = "light";
-          }
-        } catch (_) {
-          /* localStorage unavailable — fall back to dark default */
-        }
-        document.documentElement.setAttribute("data-theme", theme);
-      })();
-    </script>
-    <!-- Top Bar -->
-    <div id="topbar">
-      <a class="topbar-left" id="topbar-home" href="/">
-        <div class="topbar-logo">
-          <svg
-            width="16"
-            height="18"
-            viewBox="0 0 16 18"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M9.9873 14.1348C10.8273 14.1348 11.462 14.3911 11.6113 14.8604C11.8447 15.6051 10.7691 16.609 9.20801 17.1016C7.64706 17.5964 6.1908 17.3912 5.95508 16.6465C5.7363 15.9482 6.6685 15.0218 8.07227 14.5029L8.3584 14.4023C8.93466 14.2203 9.49501 14.1348 9.9873 14.1348ZM2.23828 9.9248C2.99193 9.9248 3.82268 10.226 4.52734 10.8213C5.85738 11.9442 6.23288 13.6886 5.36719 14.7158C4.50142 15.7428 2.71861 15.6629 1.38867 14.54C0.100568 13.4522 -0.291878 11.7823 0.47168 10.7451L0.551758 10.6465C0.957761 10.1634 1.5687 9.92482 2.23828 9.9248ZM15.1748 9.47949C15.2096 9.4795 15.2397 9.48415 15.2676 9.49805C15.6409 9.67081 15.4174 10.9618 14.7617 12.3789C14.1085 13.7956 13.2732 14.8041 12.8975 14.6318C12.5218 14.4591 12.7481 13.168 13.4014 11.751C14.0057 10.4413 14.7665 9.47949 15.1748 9.47949ZM3.42578 2.46387C3.9998 2.46387 4.55096 2.64366 4.9873 3.01953C6.10236 3.97675 6.07202 5.84169 4.92188 7.18164C3.76917 8.52404 1.93275 8.83452 0.817383 7.875C-0.297896 6.91782 -0.267461 5.05292 0.882812 3.71289C1.58276 2.8982 2.5345 2.46396 3.42578 2.46387ZM13.1631 2.80957C13.6391 2.80957 14.4071 3.79925 14.9531 5.15332C15.5458 6.62173 15.6526 7.96206 15.1953 8.14648C14.7355 8.33003 13.8845 7.29114 13.292 5.82324C12.6993 4.35719 12.5892 3.01463 13.0488 2.83008C13.0861 2.8161 13.1235 2.8096 13.1631 2.80957ZM7.82422 0C8.30483 0 8.83683 0.0896562 9.37109 0.276367C10.9576 0.829603 11.9799 2.02888 11.6582 2.95801C11.3362 3.88718 9.78886 4.19295 8.20215 3.63965C6.61582 3.08633 5.5943 1.88706 5.91602 0.958008C6.12834 0.341726 6.87931 6.04412e-05 7.82422 0Z"
-              fill="#ffffff"
-            />
-          </svg>
-        </div>
-        <span class="topbar-brand">Polkadot</span>
-        <span class="topbar-beta">Beta</span>
-      </a>
-      <div class="topbar-url" id="topbar-url"></div>
-      <div class="topbar-right">
-        <button
-          id="auth-button"
-          class="topbar-btn"
-          title="Login with Polkadot Mobile"
-          disabled
-        >
-          <svg
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-            <circle cx="12" cy="7" r="4" />
-          </svg>
-        </button>
-        <button id="permissions-button" class="topbar-btn" title="Permissions">
-          <svg
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
-            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-          </svg>
-        </button>
-        <button
-          id="theme-toggle"
-          class="topbar-btn"
-          title="Toggle light/dark theme"
-        >
-          <svg
-            id="theme-icon-sun"
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <circle cx="12" cy="12" r="5" />
-            <line x1="12" y1="1" x2="12" y2="3" />
-            <line x1="12" y1="21" x2="12" y2="23" />
-            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-            <line x1="1" y1="12" x2="3" y2="12" />
-            <line x1="21" y1="12" x2="23" y2="12" />
-            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
-          </svg>
-          <svg
-            id="theme-icon-moon"
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-          </svg>
-        </button>
-        <button
-          id="more-button"
-          class="topbar-btn topbar-more-btn"
-          title="More"
-          aria-expanded="false"
-          aria-controls="more-popover"
-        >
-          <span class="hamburger" aria-hidden="true">
-            <span class="hamburger-bar"></span>
-            <span class="hamburger-bar"></span>
-            <span class="hamburger-bar"></span>
-          </span>
-        </button>
-        <div class="more-popover" id="more-popover">
-          <button class="more-row" data-target="permissions-button">
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
-              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-            </svg>
-            <span>Permissions</span>
-          </button>
-          <button class="more-row" data-target="theme-toggle">
-            <svg
-              class="more-row-icon-sun"
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <circle cx="12" cy="12" r="5" />
-              <line x1="12" y1="1" x2="12" y2="3" />
-              <line x1="12" y1="21" x2="12" y2="23" />
-              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-              <line x1="1" y1="12" x2="3" y2="12" />
-              <line x1="21" y1="12" x2="23" y2="12" />
-              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
-            </svg>
-            <svg
-              class="more-row-icon-moon"
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-            </svg>
-            <span>Theme</span>
-          </button>
-          <button class="more-row" data-target="mode-button">
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <circle cx="12" cy="12" r="3" />
-              <path
-                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
-              />
-            </svg>
-            <span>Settings</span>
-          </button>
+        </script>
+        <link rel="preconnect" href="https://paseo-bulletin-collator-node-0.parity-testnet.parity.io" />
+        <link rel="preconnect" href="https://paseo-bulletin-collator-node-1.parity-testnet.parity.io" />
+        <link rel="preconnect" href="https://paseo-bulletin-rpc-node-0.polkadot.io" />
+        <link rel="preconnect" href="https://paseo-bulletin-rpc-node-1.polkadot.io" />
+        <link rel="preconnect" href="https://paseo-ipfs.polkadot.io" />
+        <link rel="preconnect" href="https://sys.ibp.network" />
+        <!-- Styles are loaded via src/styles.css (imported in main.ts) -->
+    </head>
+    <body>
+        <script>
+            (function() {
+                var theme = "dark";
+                try {
+                    var stored = localStorage.getItem("dotli-theme");
+                    if (stored === "light" || stored === "dark") {
+                        theme = stored;
+                    } else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) {
+                        theme = "light";
+                    }
+                } catch (_) { /* localStorage unavailable — fall back to dark default */ }
+                document.documentElement.setAttribute("data-theme", theme);
+            })();
+        </script>
+        <!-- Top Bar -->
+        <div id="topbar">
+            <a class="topbar-left" id="topbar-home" href="/">
+                <div class="topbar-logo">
+                    <svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M9.9873 14.1348C10.8273 14.1348 11.462 14.3911 11.6113 14.8604C11.8447 15.6051 10.7691 16.609 9.20801 17.1016C7.64706 17.5964 6.1908 17.3912 5.95508 16.6465C5.7363 15.9482 6.6685 15.0218 8.07227 14.5029L8.3584 14.4023C8.93466 14.2203 9.49501 14.1348 9.9873 14.1348ZM2.23828 9.9248C2.99193 9.9248 3.82268 10.226 4.52734 10.8213C5.85738 11.9442 6.23288 13.6886 5.36719 14.7158C4.50142 15.7428 2.71861 15.6629 1.38867 14.54C0.100568 13.4522 -0.291878 11.7823 0.47168 10.7451L0.551758 10.6465C0.957761 10.1634 1.5687 9.92482 2.23828 9.9248ZM15.1748 9.47949C15.2096 9.4795 15.2397 9.48415 15.2676 9.49805C15.6409 9.67081 15.4174 10.9618 14.7617 12.3789C14.1085 13.7956 13.2732 14.8041 12.8975 14.6318C12.5218 14.4591 12.7481 13.168 13.4014 11.751C14.0057 10.4413 14.7665 9.47949 15.1748 9.47949ZM3.42578 2.46387C3.9998 2.46387 4.55096 2.64366 4.9873 3.01953C6.10236 3.97675 6.07202 5.84169 4.92188 7.18164C3.76917 8.52404 1.93275 8.83452 0.817383 7.875C-0.297896 6.91782 -0.267461 5.05292 0.882812 3.71289C1.58276 2.8982 2.5345 2.46396 3.42578 2.46387ZM13.1631 2.80957C13.6391 2.80957 14.4071 3.79925 14.9531 5.15332C15.5458 6.62173 15.6526 7.96206 15.1953 8.14648C14.7355 8.33003 13.8845 7.29114 13.292 5.82324C12.6993 4.35719 12.5892 3.01463 13.0488 2.83008C13.0861 2.8161 13.1235 2.8096 13.1631 2.80957ZM7.82422 0C8.30483 0 8.83683 0.0896562 9.37109 0.276367C10.9576 0.829603 11.9799 2.02888 11.6582 2.95801C11.3362 3.88718 9.78886 4.19295 8.20215 3.63965C6.61582 3.08633 5.5943 1.88706 5.91602 0.958008C6.12834 0.341726 6.87931 6.04412e-05 7.82422 0Z" fill="#ffffff"/>
+                    </svg>
+                </div>
+                <span class="topbar-brand">Polkadot</span>
+                <span class="topbar-beta">Beta</span>
+            </a>
+            <div class="topbar-url" id="topbar-url"></div>
+            <div class="topbar-right">
+                <button
+                    id="auth-button"
+                    class="topbar-btn"
+                    title="Login with Polkadot Mobile"
+                    disabled
+                >
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+                        <circle cx="12" cy="7" r="4"/>
+                    </svg>
+                </button>
+                <button
+                    id="permissions-button"
+                    class="topbar-btn"
+                    title="Permissions"
+                >
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+                        <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+                    </svg>
+                </button>
+                <button
+                    id="theme-toggle"
+                    class="topbar-btn"
+                    title="Toggle light/dark theme"
+                >
+                    <svg id="theme-icon-sun" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+                    </svg>
+                    <svg id="theme-icon-moon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+                    </svg>
+                </button>
+                <button
+                    id="more-button"
+                    class="topbar-btn topbar-more-btn"
+                    title="More"
+                    aria-expanded="false"
+                    aria-controls="more-popover"
+                >
+                    <span class="hamburger" aria-hidden="true">
+                        <span class="hamburger-bar"></span>
+                        <span class="hamburger-bar"></span>
+                        <span class="hamburger-bar"></span>
+                    </span>
+                </button>
+                <div class="more-popover" id="more-popover">
+                    <button class="more-row" data-target="permissions-button">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+                            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+                        </svg>
+                        <span>Permissions</span>
+                    </button>
+                    <button class="more-row" data-target="theme-toggle">
+                        <svg class="more-row-icon-sun" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+                        </svg>
+                        <svg class="more-row-icon-moon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+                        </svg>
+                        <span>Theme</span>
+                    </button>
+                    <button class="more-row" data-target="mode-button">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="12" cy="12" r="3"/>
+                            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+                        </svg>
+                        <span>Settings</span>
+                    </button>
+                </div>
+                <button
+                    id="mode-button"
+                    class="topbar-btn"
+                    title="Settings"
+                >
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="3"/>
+                        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+                    </svg>
+                </button>
+            </div>
         </div>
-        <button id="mode-button" class="topbar-btn" title="Settings">
-          <svg
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <circle cx="12" cy="12" r="3" />
-            <path
-              d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
 
-    <!-- QR Pairing Modal -->
-    <div class="auth-modal-backdrop" id="auth-modal-backdrop">
-      <div class="auth-modal">
-        <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
-        <p class="auth-modal-reason" id="auth-modal-reason" hidden></p>
-        <p id="auth-modal-hint">Scan with Polkadot Mobile to connect</p>
-        <div class="auth-modal-qr" id="auth-modal-qr">
-          <div class="spinner"></div>
+        <!-- QR Pairing Modal -->
+        <div class="auth-modal-backdrop" id="auth-modal-backdrop">
+            <div class="auth-modal">
+                <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
+                <p class="auth-modal-reason" id="auth-modal-reason" hidden></p>
+                <p id="auth-modal-hint">Scan with Polkadot Mobile to connect</p>
+                <div class="auth-modal-qr" id="auth-modal-qr">
+                    <div class="spinner"></div>
+                </div>
+                <button class="auth-modal-close" id="auth-modal-close">
+                    Cancel
+                </button>
+            </div>
         </div>
-        <button class="auth-modal-close" id="auth-modal-close">Cancel</button>
-      </div>
-    </div>
 
-    <!-- User Popover -->
-    <div class="user-popover" id="user-popover">
-      <div class="user-popover-name">
-        <div class="label">Welcome back</div>
-        <div class="name" id="user-popover-username"></div>
-      </div>
-      <div class="user-popover-divider"></div>
-      <button class="user-popover-disconnect" id="user-popover-disconnect">
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
-          <polyline points="16 17 21 12 16 7" />
-          <line x1="21" y1="12" x2="9" y2="12" />
-        </svg>
-        Log out
-      </button>
-    </div>
+        <!-- User Popover -->
+        <div class="user-popover" id="user-popover">
+            <div class="user-popover-name">
+                <div class="label">Welcome back</div>
+                <div class="name" id="user-popover-username"></div>
+            </div>
+            <div class="user-popover-divider"></div>
+            <button
+                class="user-popover-disconnect"
+                id="user-popover-disconnect"
+            >
+                <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+                    <polyline points="16 17 21 12 16 7" />
+                    <line x1="21" y1="12" x2="9" y2="12" />
+                </svg>
+                Log out
+            </button>
+        </div>
 
-    <!-- Mode Popover + backdrop (backdrop blocks clicks under the popover
+        <!-- Mode Popover + backdrop (backdrop blocks clicks under the popover
              and dismisses the popover when clicked) -->
-    <div class="mode-popover-backdrop" id="mode-popover-backdrop"></div>
-    <div class="mode-popover" id="mode-popover">
-      <div class="mode-popover-content" id="mode-popover-content"></div>
-    </div>
+        <div class="mode-popover-backdrop" id="mode-popover-backdrop"></div>
+        <div class="mode-popover" id="mode-popover">
+            <div class="mode-popover-content" id="mode-popover-content"></div>
+        </div>
 
-    <!-- Permissions Popover + backdrop (same pattern as settings menu:
+        <!-- Permissions Popover + backdrop (same pattern as settings menu:
              blocks clicks under the popover + dismisses it when clicked) -->
-    <div
-      class="permissions-popover-backdrop"
-      id="permissions-popover-backdrop"
-    ></div>
-    <div class="permissions-popover" id="permissions-popover">
-      <div class="permissions-popover-header">Permissions</div>
-      <div class="permissions-popover-list" id="permissions-popover-list"></div>
-    </div>
-
-    <!-- App Content -->
-    <div id="app">
-      <div class="loading">
-        <div class="loading-logo" id="loading-logo">
-          <svg
-            width="52"
-            height="52"
-            viewBox="0 0 256 256"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              class="loading-petal"
-              d="M31.0155 57.7181C14.6547 76.7768 14.2233 103.306 30.0862 116.92C45.9492 130.566 72.0667 126.15 88.4607 107.058C104.821 87.9995 105.253 61.4701 89.3899 47.8567C83.1841 42.511 75.3522 39.9543 67.1884 39.9543C54.5113 39.9543 40.9713 46.1302 31.0155 57.7181Z"
-            />
-            <path
-              class="loading-petal"
-              d="M26.2694 156.332C13.9574 170.941 19.3003 195.744 38.2164 211.715C57.1326 227.686 82.4868 228.815 94.7989 214.205C107.111 199.596 101.768 174.793 82.8518 158.822C72.8296 150.355 61.0153 146.072 50.2962 146.072C40.7718 146.072 32.077 149.459 26.3026 156.332"
-            />
-            <path
-              class="loading-petal"
-              d="M137.343 209.789C115.142 216.795 99.8429 231.072 103.161 241.664C106.513 252.256 127.221 255.178 149.423 248.139C171.625 241.133 186.923 226.856 183.605 216.264C181.481 209.59 172.454 205.938 160.507 205.938C153.505 205.938 145.54 207.166 137.343 209.756"
-            />
-            <path
-              class="loading-petal"
-              d="M102.597 18.5365C98.0176 31.7514 112.553 48.8179 135.12 56.6871C157.686 64.5562 179.689 60.2066 184.268 46.9917C188.848 33.7768 174.313 16.7103 151.746 8.84109C144.146 6.18482 136.58 4.9231 129.744 4.9231C116.303 4.9231 105.617 9.77078 102.597 18.5365Z"
-            />
-            <path
-              class="loading-petal"
-              d="M204.048 45.169C197.51 47.7921 199.07 66.884 207.499 87.7357C215.928 108.621 228.041 123.396 234.579 120.773C241.083 118.15 239.557 99.0912 231.128 78.2063C223.362 58.9484 212.444 44.8702 205.674 44.8702C205.11 44.8702 204.579 44.9698 204.048 45.169Z"
-            />
-            <path
-              class="loading-petal"
-              d="M209.058 172.038C199.766 192.192 196.547 210.553 201.89 213.01C207.233 215.468 219.114 201.124 228.406 180.969C237.731 160.815 240.917 142.453 235.607 139.996C235.209 139.797 234.778 139.731 234.28 139.731C228.472 139.731 217.654 153.411 209.058 172.038Z"
-            />
-          </svg>
-        </div>
-        <div class="loading-progress" id="loading-progress">
-          <div class="loading-progress-bar">
-            <div class="loading-progress-fill" id="loading-progress-fill"></div>
-          </div>
-          <span class="loading-progress-pct" id="loading-progress-pct">0%</span>
+        <div class="permissions-popover-backdrop" id="permissions-popover-backdrop"></div>
+        <div class="permissions-popover" id="permissions-popover">
+            <div class="permissions-popover-header">Permissions</div>
+            <div class="permissions-popover-list" id="permissions-popover-list"></div>
         </div>
-        <div class="loading-text" id="loading-text">
-          <p id="status" aria-live="polite">Reaching out</p>
-          <p class="loading-detail" id="loading-detail" aria-hidden="true"></p>
-          <p
-            class="loading-announcer"
-            id="loading-announcer"
-            aria-live="polite"
-          ></p>
-          <p class="loading-hint" id="loading-hint"></p>
+
+        <!-- App Content -->
+        <div id="app">
+            <div class="loading">
+                <div class="loading-logo" id="loading-logo">
+                    <svg width="52" height="52" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path class="loading-petal" d="M31.0155 57.7181C14.6547 76.7768 14.2233 103.306 30.0862 116.92C45.9492 130.566 72.0667 126.15 88.4607 107.058C104.821 87.9995 105.253 61.4701 89.3899 47.8567C83.1841 42.511 75.3522 39.9543 67.1884 39.9543C54.5113 39.9543 40.9713 46.1302 31.0155 57.7181Z"/>
+                        <path class="loading-petal" d="M26.2694 156.332C13.9574 170.941 19.3003 195.744 38.2164 211.715C57.1326 227.686 82.4868 228.815 94.7989 214.205C107.111 199.596 101.768 174.793 82.8518 158.822C72.8296 150.355 61.0153 146.072 50.2962 146.072C40.7718 146.072 32.077 149.459 26.3026 156.332"/>
+                        <path class="loading-petal" d="M137.343 209.789C115.142 216.795 99.8429 231.072 103.161 241.664C106.513 252.256 127.221 255.178 149.423 248.139C171.625 241.133 186.923 226.856 183.605 216.264C181.481 209.59 172.454 205.938 160.507 205.938C153.505 205.938 145.54 207.166 137.343 209.756"/>
+                        <path class="loading-petal" d="M102.597 18.5365C98.0176 31.7514 112.553 48.8179 135.12 56.6871C157.686 64.5562 179.689 60.2066 184.268 46.9917C188.848 33.7768 174.313 16.7103 151.746 8.84109C144.146 6.18482 136.58 4.9231 129.744 4.9231C116.303 4.9231 105.617 9.77078 102.597 18.5365Z"/>
+                        <path class="loading-petal" d="M204.048 45.169C197.51 47.7921 199.07 66.884 207.499 87.7357C215.928 108.621 228.041 123.396 234.579 120.773C241.083 118.15 239.557 99.0912 231.128 78.2063C223.362 58.9484 212.444 44.8702 205.674 44.8702C205.11 44.8702 204.579 44.9698 204.048 45.169Z"/>
+                        <path class="loading-petal" d="M209.058 172.038C199.766 192.192 196.547 210.553 201.89 213.01C207.233 215.468 219.114 201.124 228.406 180.969C237.731 160.815 240.917 142.453 235.607 139.996C235.209 139.797 234.778 139.731 234.28 139.731C228.472 139.731 217.654 153.411 209.058 172.038Z"/>
+                    </svg>
+                </div>
+                <div class="loading-progress" id="loading-progress">
+                    <div class="loading-progress-bar">
+                        <div class="loading-progress-fill" id="loading-progress-fill"></div>
+                    </div>
+                    <span class="loading-progress-pct" id="loading-progress-pct">0%</span>
+                </div>
+                <div class="loading-text" id="loading-text">
+                    <p id="status" aria-live="polite">Reaching out</p>
+                    <p class="loading-detail" id="loading-detail" aria-hidden="true"></p>
+                    <p class="loading-announcer" id="loading-announcer" aria-live="polite"></p>
+                    <p class="loading-hint" id="loading-hint"></p>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-    <script>
-      // Logo spinner — rAF-driven for smooth petal cycling
-      (function () {
-        var petals = document.querySelectorAll(".loading-petal");
-        if (!petals.length) return;
-        var count = petals.length;
-        var cycle = 1400;
-        var start = null;
-        var raf;
-        function tick(ts) {
-          if (!start) start = ts;
-          var p = ((ts - start) % cycle) / cycle;
-          for (var i = 0; i < count; i++) {
-            var dist = p - i / count;
-            if (dist < 0) dist += 1;
-            var b = Math.max(0.15, Math.pow(Math.max(0, 1 - dist * 2.5), 2));
-            petals[i].style.opacity = b;
-            petals[i].style.transform = "scale(" + (0.92 + 0.08 * b) + ")";
-          }
-          raf = requestAnimationFrame(tick);
-        }
-        raf = requestAnimationFrame(tick);
-        // Stop when loading is replaced
-        window.__stopLoadingSpinner = function () {
-          cancelAnimationFrame(raf);
-        };
-      })();
-    </script>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+        <script>
+            // Logo spinner — rAF-driven for smooth petal cycling
+            (function(){
+                var petals = document.querySelectorAll('.loading-petal');
+                if (!petals.length) return;
+                var count = petals.length;
+                var cycle = 1400;
+                var start = null;
+                var raf;
+                function tick(ts) {
+                    if (!start) start = ts;
+                    var p = ((ts - start) % cycle) / cycle;
+                    for (var i = 0; i < count; i++) {
+                        var dist = p - i / count;
+                        if (dist < 0) dist += 1;
+                        var b = Math.max(0.15, Math.pow(Math.max(0, 1 - dist * 2.5), 2));
+                        petals[i].style.opacity = b;
+                        petals[i].style.transform = 'scale(' + (0.92 + 0.08 * b) + ')';
+                    }
+                    raf = requestAnimationFrame(tick);
+                }
+                raf = requestAnimationFrame(tick);
+                // Stop when loading is replaced
+                window.__stopLoadingSpinner = function() { cancelAnimationFrame(raf); };
+            })();
+        </script>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
 </html>
diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index 05ff6cae..a605be4b 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -31,7 +31,6 @@ import {
   showLanding,
   initPhases,
   advancePhase,
-  getCurrentPhase,
   setStatusDetail,
   stopStatusTick,
   listenForSandboxStatus,
@@ -46,8 +45,7 @@ import {
 } from "@dotli/ui/bulletin-bitswap";
 import {
   ensureProtocolFrame,
-  onProtocolHealth,
-  onProtocolLifecycle,
+  onProtocolChainSync,
   resetProtocolFrame,
   resolveDotNameRemote,
   resolveExecutableManifestRemote,
@@ -71,6 +69,7 @@ import type {
   ManifestResult,
   RootManifest,
 } from "@dotli/resolver/manifest";
+import type { ResolvePhase } from "@dotli/resolver/access-raw-storage";
 import { BASE_DOMAIN, DEBUG, SITE_ID, isLocalhost } from "@dotli/config/config";
 import { log } from "@dotli/shared/log";
 import { serializeError } from "@dotli/shared/errors";
@@ -1158,6 +1157,16 @@ async function main(): Promise<void> {
   // peers) cap at the band top and let the sheen carry motion rather than
   // inflating the pace. Both smoldot backends share one model. See
   // `advancePhase` mapping below.
+  // Resolver status strings map onto the smoldot phase bands above.
+  // `asset-hub-connecting` is ~0ms (just createClient), so it shares the
+  // Syncing band rather than taking a slice that moves the bar for no work.
+  const PHASE_INDEX: Partial<Record<ResolvePhase, number>> = {
+    "relay-chain-adding": 1,
+    "asset-hub-connecting": 2,
+    "asset-hub-syncing": 2,
+    "asset-hub-ready": 2,
+    "resolving-content": 3,
+  };
   const smoldotPhases = (startLabel: string): LoadingPhase[] => [
     { label: startLabel, base: 2, target: 6, expectedMs: 650 },
     { label: "Adding relay chain", base: 6, target: 10, expectedMs: 120 },
@@ -1199,58 +1208,54 @@ async function main(): Promise<void> {
   // lives in the SharedWorker, which does not forward lifecycle or health
   // yet, and the gateway has no smoldot at all.
   if (chainBackend === "smoldot-direct") {
-    // Only the chains on the resolution critical path may drive the UI.
-    // Bulletin, People, and the custom relay sync in the background; a
-    // stall there is not what the user is waiting on.
-    const uiChains = new Set(["relay", "asset-hub"]);
     let peerDetail = "";
-    // Once the Asset Hub bootstrap completes, the sync detail is over:
-    // an in-flight health response or a late background stall must not
+    // Once the Asset Hub bootstrap completes the sync detail is over. A
+    // peer count still in flight, or a late stall on the relay, must not
     // resurrect it under "Resolving".
     let syncDetailDone = false;
-    onProtocolHealth((event) => {
-      if (syncDetailDone || event.chain !== "asset-hub") {
-        return;
-      }
-      peerDetail = `${String(event.peers)} ${event.peers === 1 ? "peer" : "peers"}`;
-      setStatusDetail(peerDetail);
-    });
-    onProtocolLifecycle((event) => {
-      log.debug(
-        `[dot.li lifecycle] ${event.chain} kind=${event.lifecycleKind}`,
-      );
-      if (!uiChains.has(event.chain)) {
+    onProtocolChainSync((event) => {
+      log.debug(`[dot.li sync] ${event.chain} ${event.syncKind}`);
+      if (syncDetailDone) {
         return;
       }
-      if (event.lifecycleKind === "stalled" && !syncDetailDone) {
-        // No trailing ellipsis: the headline already ends in one, and the
-        // spinner and bar sheen carry "in progress". Lowercase and
-        // terminal-punctuation-free to match the "2 peers" readout this line
-        // alternates with.
-        setStatusDetail(
-          event.reason === "noPeers"
-            ? "searching for peers"
-            : "syncing, no progress yet",
-          { announce: true },
-        );
-        return;
-      }
-      if (event.lifecycleKind === "recovered" && !syncDetailDone) {
-        setStatusDetail(peerDetail, { announce: true });
-        return;
-      }
-      if (event.chain !== "asset-hub") {
-        return;
-      }
-      if (event.lifecycleKind === "firstPeer") {
-        advancePhase(2);
-      } else if (event.lifecycleKind === "bootstrapComplete") {
-        advancePhase(3);
-        // The count is meaningless once sync is done; clear rather than
-        // letting a stale number sit under "Resolving".
-        syncDetailDone = true;
-        peerDetail = "";
-        setStatusDetail("");
+      switch (event.syncKind) {
+        case "peers":
+          if (event.chain === "asset-hub") {
+            const count = event.peers ?? 0;
+            peerDetail = `${String(count)} ${count === 1 ? "peer" : "peers"}`;
+            setStatusDetail(peerDetail);
+          }
+          return;
+        case "stalled":
+          // No trailing ellipsis: the headline already ends in one, and the
+          // spinner and bar sheen carry "in progress". Lowercase and
+          // terminal-punctuation-free to match the "2 peers" readout this
+          // line alternates with.
+          setStatusDetail(
+            event.reason === "noPeers"
+              ? "searching for peers"
+              : "syncing, no progress yet",
+            { announce: true },
+          );
+          return;
+        case "recovered":
+          setStatusDetail(peerDetail, { announce: true });
+          return;
+        case "firstPeer":
+          if (event.chain === "asset-hub") {
+            advancePhase(2);
+          }
+          return;
+        case "bootstrapComplete":
+          if (event.chain === "asset-hub") {
+            advancePhase(3);
+            // The count is meaningless once sync is done. Clear it rather
+            // than letting a stale number sit under "Resolving".
+            syncDetailDone = true;
+            peerDetail = "";
+            setStatusDetail("");
+          }
+          return;
       }
     });
   }
@@ -1372,30 +1377,16 @@ async function main(): Promise<void> {
           // mapping from status text to ResolvePhase, so we defer to it
           // instead of maintaining a parallel regex here.
           const phase = statusToPhase(msg);
-          // `asset-hub-connecting` is ~0ms (just createClient), so it shares
-          // the Syncing band rather than getting a slice that makes the bar
-          // jump for no work.
-          const mappedPhase =
-            phase === "relay-chain-adding"
-              ? 1
-              : phase === "asset-hub-connecting" ||
-                  phase === "asset-hub-syncing" ||
-                  phase === "asset-hub-ready"
-                ? 2
-                : phase === "resolving-content"
-                  ? 3
-                  : null;
-          if (mappedPhase !== null) {
+          const mappedPhase = phase === null ? undefined : PHASE_INDEX[phase];
+          if (mappedPhase !== undefined) {
             advancePhase(mappedPhase);
           }
           emitPhase(msg, phase ?? "progress");
-          // Lifecycle events usually outrun these status strings. Prose
-          // describing a phase the bar has already passed must not flip
-          // the headline backwards; unmapped messages (bootnode issues,
-          // not-found notices) always show.
-          if (mappedPhase === null || mappedPhase >= getCurrentPhase()) {
-            showStatus(msg);
-          }
+          // Sync milestones usually outrun these status strings, so pass
+          // the phase and let `showStatus` drop prose describing a step the
+          // bar already passed. Unmapped messages such as bootnode issues
+          // and not-found notices carry no phase and always show.
+          showStatus(msg, { phase: mappedPhase });
         };
         cid = await resolveDotNameRemote(`app.${label}`, onResolveProgress);
         if (cid === null) {
diff --git a/apps/host/tests/functional/resolution.spec.ts b/apps/host/tests/functional/resolution.spec.ts
index e6ec3d06..d80eb991 100644
--- a/apps/host/tests/functional/resolution.spec.ts
+++ b/apps/host/tests/functional/resolution.spec.ts
@@ -37,7 +37,7 @@ test.describe("Resolution across chain backends", () => {
     });
   }
 
-  test(`As a user opening ${DOMAIN}.dot via smoldot-direct, the shell receives live peer counts while syncing`, async ({
+  test(`As a user opening ${DOMAIN}.dot, I am told how many peers the light client found while it syncs`, async ({
     browser,
   }) => {
     // Given
@@ -46,10 +46,10 @@ test.describe("Resolution across chain backends", () => {
     });
 
     try {
-      // Record health envelopes as they reach the host window. On a fast
-      // bootstrap the rendered "N peers" line can appear and clear between
-      // polls, so the envelope is the reliable signal; the visible text is
-      // accepted as an alternative when the sync window is long enough.
+      // Record the counts as they reach the shell. On a fast bootstrap the
+      // rendered "N peers" line can appear and clear between polls, so the
+      // count itself is the reliable signal. The visible text is accepted
+      // as an alternative when the sync window is long enough to show it.
       await page.addInitScript(() => {
         const seen: unknown[] = [];
         (
@@ -76,8 +76,7 @@ test.describe("Resolution across chain backends", () => {
       // When
       await page.goto(BASE_URL, { waitUntil: "commit" });
 
-      // Then: a live peer count flows to the shell during bootstrap, and
-      // resolution still completes.
+      // Then
       const sawPeers = page.waitForFunction(
         () => {
           const seen = (window as unknown as { __dotliHealthSeen?: unknown[] })
diff --git a/apps/protocol/src/main.ts b/apps/protocol/src/main.ts
index cdd5c60d..72e2b4e0 100644
--- a/apps/protocol/src/main.ts
+++ b/apps/protocol/src/main.ts
@@ -683,14 +683,16 @@ async function initDirectMode(): Promise<void> {
     setResolverPeopleProvider,
     waitForPeopleFinalized,
   } = resolve;
-  const { terminateSmoldot, onSmoldotFatal, onLifecycle, onHealth } =
-    smoldotMod;
-
-  // Peer-count polling is only worth the traffic when a loading UI can
-  // observe it. Direct mode is that case; the SharedWorker never enables
-  // it, and the host only renders the Asset Hub count, so only that chain
-  // polls.
-  smoldotMod.enableHealthPolling(["asset-hub"]);
+  const { terminateSmoldot, onSmoldotFatal, onChainSync } = smoldotMod;
+
+  // Sync reporting is only worth its cost when a loading UI can observe it.
+  // Direct mode is that case and the SharedWorker never enables it. The
+  // host moves the bar on the relay and the Asset Hub, and shows a peer
+  // count for the Asset Hub alone.
+  smoldotMod.enableSyncReporting({
+    milestones: ["relay", "asset-hub"],
+    peerCounts: ["asset-hub"],
+  });
 
   // On a smoldot panic, broadcast a fatal envelope to the parent. Direct
   // mode has no SharedWorker in the loop, so we post straight up to the
@@ -709,36 +711,21 @@ async function initDirectMode(): Promise<void> {
     }
   });
 
-  // Forward smoldot lifecycle events and health samples to the host shell
-  // so the loading bar can advance on real sync signals instead of on
-  // log-scraped prose. This iframe owns the smoldot instance. The host has
-  // no direct handle on it.
-  onLifecycle((event) => {
-    if (window.parent === window) {
-      return;
-    }
-    window.parent.postMessage(
-      {
-        namespace: "dotli:protocol",
-        kind: "lifecycle",
-        chain: event.chain,
-        lifecycleKind: event.kind,
-        ...(event.reason !== undefined ? { reason: event.reason } : {}),
-      },
-      "*",
-    );
-  });
-  onHealth((event) => {
+  // Forward what the chains report about their sync to the host shell, so
+  // the loading screen moves on real signals instead of log-scraped prose.
+  // This iframe owns the smoldot instance. The host has no handle on it.
+  onChainSync((event) => {
     if (window.parent === window) {
       return;
     }
+    const { chain, kind, ...rest } = event;
     window.parent.postMessage(
       {
         namespace: "dotli:protocol",
-        kind: "health",
-        chain: event.chain,
-        peers: event.peers,
-        isSyncing: event.isSyncing,
+        kind: "chain-sync",
+        chain,
+        syncKind: kind,
+        ...rest,
       },
       "*",
     );
diff --git a/packages/protocol/src/client.ts b/packages/protocol/src/client.ts
index a4fc1e25..baba2e4c 100644
--- a/packages/protocol/src/client.ts
+++ b/packages/protocol/src/client.ts
@@ -13,7 +13,7 @@ import type {
   ManifestResult,
   RootManifest,
 } from "@dotli/resolver/manifest";
-import type { LifecycleKind } from "@dotli/resolver/smoldot";
+import type { ChainKey, ChainSyncKind } from "@dotli/resolver/smoldot";
 import { BASE_DOMAIN, type SiteId } from "@dotli/config/config";
 import {
   getActiveGatewaySupportedGenesisHashes,
@@ -26,8 +26,7 @@ import { m } from "@dotli/metrics/metrics";
 import * as S from "@dotli/metrics/spans";
 import {
   isProtocolEnvelope,
-  type ProtocolHealthEnvelope,
-  type ProtocolLifecycleEnvelope,
+  type ProtocolChainSyncEnvelope,
   type ProtocolRequestEnvelope,
   type ProtocolRequestMap,
   type ProtocolRequestMethod,
@@ -66,19 +65,29 @@ let protocolReadyPromise: Promise<void> | null = null;
 const pendingRequests = new Map<string, PendingRequest>();
 const chainConnections = new Map<string, RemoteChainConnection>();
 const sharedAuthListeners = new Set<SharedAuthStorageListener>();
-const lifecycleListeners = new Set<
-  (event: ProtocolLifecycleEnvelope) => void
+const chainSyncListeners = new Set<
+  (event: ProtocolChainSyncEnvelope) => void
 >();
-const healthListeners = new Set<(event: ProtocolHealthEnvelope) => void>();
-// Runtime mirror of the resolver's LifecycleKind union: postMessage data is
-// untrusted, and the envelope type alone cannot reject a spoofed kind. The
-// `satisfies` ties each literal to the union so a typo fails typecheck.
-const LIFECYCLE_ENVELOPE_KINDS = new Set<string>([
+// postMessage data is untrusted and the envelope type alone cannot reject a
+// spoofed field, so both are checked at runtime. The lists are repeated
+// rather than imported because importing a value from the resolver's
+// smoldot module would drag smoldot into every bundle that talks to the
+// protocol. `satisfies` ties each literal to the resolver's type, so a
+// drifting or misspelled entry fails typecheck.
+const CHAIN_KEY_VALUES = new Set<string>([
+  "relay",
+  "custom-relay",
+  "asset-hub",
+  "bulletin",
+  "people",
+] satisfies ChainKey[]);
+const SYNC_KIND_VALUES = new Set<string>([
   "firstPeer",
   "bootstrapComplete",
   "stalled",
   "recovered",
-] satisfies LifecycleKind[]);
+  "peers",
+] satisfies ChainSyncKind[]);
 let listenerBound = false;
 let protocolReady = false;
 interface ReadyWaiter {
@@ -188,6 +197,24 @@ function resetProtocolFrameState(reason?: Error): void {
   }
 }
 
+/** Deliver to every listener, so one that throws cannot silence the rest. */
+function broadcast<T>(
+  listeners: ReadonlySet<(event: T) => void>,
+  event: T,
+  label: string,
+): void {
+  for (const listener of listeners) {
+    try {
+      listener(event);
+    } catch (err: unknown) {
+      log.error(
+        `[dot.li protocol] ${label} listener threw:`,
+        err instanceof Error ? err.message : err,
+      );
+    }
+  }
+}
+
 function bindMessageListener(): void {
   if (listenerBound) {
     return;
@@ -232,45 +259,22 @@ function bindMessageListener(): void {
         }
         return;
       }
-      case "lifecycle": {
+      case "chain-sync": {
         if (
-          typeof msg.chain !== "string" ||
-          !LIFECYCLE_ENVELOPE_KINDS.has(msg.lifecycleKind)
+          !CHAIN_KEY_VALUES.has(msg.chain) ||
+          !SYNC_KIND_VALUES.has(msg.syncKind)
         ) {
           return;
         }
-        for (const cb of lifecycleListeners) {
-          try {
-            cb(msg);
-          } catch (err: unknown) {
-            log.error(
-              "[dot.li protocol] Lifecycle listener threw:",
-              err instanceof Error ? err.message : err,
-            );
-          }
-        }
-        return;
-      }
-      case "health": {
         if (
-          typeof msg.chain !== "string" ||
-          !Number.isInteger(msg.peers) ||
-          msg.peers < 0 ||
-          msg.peers > 10_000 ||
-          typeof msg.isSyncing !== "boolean"
+          msg.syncKind === "peers" &&
+          (!Number.isInteger(msg.peers) ||
+            (msg.peers ?? -1) < 0 ||
+            (msg.peers ?? 0) > 10_000)
         ) {
           return;
         }
-        for (const cb of healthListeners) {
-          try {
-            cb(msg);
-          } catch (err: unknown) {
-            log.error(
-              "[dot.li protocol] Health listener threw:",
-              err instanceof Error ? err.message : err,
-            );
-          }
-        }
+        broadcast(chainSyncListeners, msg, "Chain sync");
         return;
       }
       case "fatal":
@@ -351,16 +355,7 @@ function bindMessageListener(): void {
           key: msg.key,
           value: msg.value,
         };
-        for (const listener of sharedAuthListeners) {
-          try {
-            listener(change);
-          } catch (err: unknown) {
-            log.error(
-              "[dot.li protocol] Shared auth listener threw:",
-              err instanceof Error ? err.message : err,
-            );
-          }
-        }
+        broadcast(sharedAuthListeners, change, "Shared auth");
         return;
       }
     }
@@ -743,33 +738,19 @@ export function subscribeSharedAuthStorage(
 }
 
 /**
- * Subscribe to smoldot lifecycle events forwarded by the protocol iframe.
+ * Subscribe to what the chains report about their sync.
+ *
  * Events arrive only after the origin- and source-gated message listener
  * validates the envelope, so callers never see spoofable raw messages.
  * Returns an unsubscribe function.
  */
-export function onProtocolLifecycle(
-  listener: (event: ProtocolLifecycleEnvelope) => void,
-): () => void {
-  bindMessageListener();
-  lifecycleListeners.add(listener);
-  return () => {
-    lifecycleListeners.delete(listener);
-  };
-}
-
-/**
- * Subscribe to chain `system_health` samples forwarded by the protocol
- * iframe during bootstrap. Same gating as `onProtocolLifecycle`.
- * Returns an unsubscribe function.
- */
-export function onProtocolHealth(
-  listener: (event: ProtocolHealthEnvelope) => void,
+export function onProtocolChainSync(
+  listener: (event: ProtocolChainSyncEnvelope) => void,
 ): () => void {
   bindMessageListener();
-  healthListeners.add(listener);
+  chainSyncListeners.add(listener);
   return () => {
-    healthListeners.delete(listener);
+    chainSyncListeners.delete(listener);
   };
 }
 
diff --git a/packages/protocol/src/messages.ts b/packages/protocol/src/messages.ts
index cb9068e2..219de1bf 100644
--- a/packages/protocol/src/messages.ts
+++ b/packages/protocol/src/messages.ts
@@ -1,7 +1,7 @@
 // Copyright 2026 Parity Technologies (UK) Ltd.
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { LifecycleKind } from "@dotli/resolver/smoldot";
+import type { ChainKey, ChainSyncKind } from "@dotli/resolver/smoldot";
 
 export interface ProtocolRequestMap {
   warmup: Record<string, never>;
@@ -102,30 +102,19 @@ export interface ProtocolInitFailedEnvelope {
 }
 
 /**
- * Unsolicited broadcast of a smoldot lifecycle event observed inside the
- * protocol iframe. `chain` is the resolver's logical chain key ("relay",
- * "asset-hub", "bulletin", "people", "custom-relay"), not smoldot's
- * internal chain id. Drives the host loading bar.
+ * Unsolicited broadcast of what a chain reports about its own sync.
+ *
+ * Drives the host loading screen: milestones move the bar, peer counts feed
+ * the detail line under it. Stops arriving once the chain is ready.
  */
-export interface ProtocolLifecycleEnvelope {
+export interface ProtocolChainSyncEnvelope {
   namespace: "dotli:protocol";
-  kind: "lifecycle";
-  chain: string;
-  lifecycleKind: LifecycleKind;
+  kind: "chain-sync";
+  chain: ChainKey;
+  syncKind: ChainSyncKind;
   reason?: string;
-}
-
-/**
- * Unsolicited broadcast of a chain's `system_health` sample observed inside
- * the protocol iframe. Emitted only while health polling runs (chain
- * bootstrap). Drives the live peer count on the host loading screen.
- */
-export interface ProtocolHealthEnvelope {
-  namespace: "dotli:protocol";
-  kind: "health";
-  chain: string;
-  peers: number;
-  isSyncing: boolean;
+  peers?: number;
+  isSyncing?: boolean;
 }
 
 // Unsolicited notification from the host iframe to its parent window when a
@@ -151,8 +140,7 @@ export type ProtocolEnvelope =
   | ProtocolReadyEnvelope
   | ProtocolFatalEnvelope
   | ProtocolInitFailedEnvelope
-  | ProtocolLifecycleEnvelope
-  | ProtocolHealthEnvelope
+  | ProtocolChainSyncEnvelope
   | ProtocolAuthStorageChangedEnvelope;
 
 const VALID_KINDS = new Set([
@@ -164,8 +152,7 @@ const VALID_KINDS = new Set([
   "ready",
   "fatal",
   "init-failed",
-  "lifecycle",
-  "health",
+  "chain-sync",
   "auth-storage-changed",
 ]);
 
diff --git a/packages/resolver/src/resolve.ts b/packages/resolver/src/resolve.ts
index 324f5f2e..0b78c247 100644
--- a/packages/resolver/src/resolve.ts
+++ b/packages/resolver/src/resolve.ts
@@ -48,11 +48,17 @@ export { statusToPhase } from "./access-raw-storage";
 export { getSmoldot, getSmoldotDirect, getRelayChain } from "./smoldot";
 export {
   onConnectionIssue,
-  onLifecycle,
-  onHealth,
-  enableHealthPolling,
+  onChainSync,
+  enableSyncReporting,
+  CHAIN_KEYS,
+  CHAIN_SYNC_KINDS,
+} from "./smoldot";
+export type {
+  ChainSyncEvent,
+  ChainSyncKind,
+  ChainKey,
+  SyncReportingConfig,
 } from "./smoldot";
-export type { LifecycleEvent, LifecycleKind, HealthEvent } from "./smoldot";
 
 let clientInstance: SubstrateClient | null = null;
 let apiInstance: Api | null = null;
diff --git a/packages/resolver/src/smoldot-db.ts b/packages/resolver/src/smoldot-db.ts
index 0d8909a4..db2f5609 100644
--- a/packages/resolver/src/smoldot-db.ts
+++ b/packages/resolver/src/smoldot-db.ts
@@ -165,19 +165,22 @@ export interface ChainDbTap {
   isStopped(): boolean;
 }
 
-/**
- * Response interceptor for traffic the resolver injects on the chain's
- * JSON-RPC pipe (lifecycle follow, health polls). Called for every parsed
- * response before it is forwarded to the chain's regular consumer. Return
- * `true` to consume the message: polkadot-api never sees it, which keeps
- * its provider free of ids and subscriptions it did not create.
- */
-export type TapIntercept = (parsed: {
+/** The fields of a JSON-RPC frame the tap itself looks at. */
+interface ParsedRpcMessage {
   id?: unknown;
   method?: unknown;
   result?: unknown;
   params?: unknown;
-}) => boolean;
+}
+
+/**
+ * Claims responses to requests the resolver injected on the chain's pipe.
+ *
+ * Called for every parsed response before it reaches the chain's regular
+ * consumer. Returning `true` consumes the message, which keeps
+ * polkadot-api's provider free of ids and subscriptions it never created.
+ */
+export type TapIntercept = (parsed: ParsedRpcMessage) => boolean;
 
 interface ExternalWaiter {
   resolve: (s: string) => void;
@@ -233,12 +236,7 @@ export function tapChain(
         return;
       }
       try {
-        const parsed = JSON.parse(raw) as {
-          id?: unknown;
-          method?: unknown;
-          result?: unknown;
-          params?: unknown;
-        };
+        const parsed = JSON.parse(raw) as ParsedRpcMessage;
         if (
           typeof parsed.id === "string" &&
           parsed.id.startsWith(REQUEST_ID_PREFIX)
diff --git a/packages/resolver/src/smoldot.ts b/packages/resolver/src/smoldot.ts
index f6dc6f3a..0a52e9a2 100644
--- a/packages/resolver/src/smoldot.ts
+++ b/packages/resolver/src/smoldot.ts
@@ -59,45 +59,64 @@ export function onConnectionIssue(cb: ConnectionIssueCallback): () => void {
   };
 }
 
+/** The chains the resolver runs, named by role rather than by chain spec. */
+export const CHAIN_KEYS = [
+  "relay",
+  "custom-relay",
+  "asset-hub",
+  "bulletin",
+  "people",
+] as const;
+export type ChainKey = (typeof CHAIN_KEYS)[number];
+
 /**
- * Lifecycle events emitted by smoldot's per-chain broadcaster over the
- * `lifecycle_unstable_follow` JSON-RPC subscription. Smoldot emits more
- * kinds (connecting, modeDecision, warpSyncProgress, warpSyncFinished,
- * stopped); this allowlist covers only what the loading UI consumes.
+ * What a chain reports about its own sync.
+ *
+ * Smoldot emits more milestones than these (connecting, modeDecision,
+ * warpSyncProgress, warpSyncFinished, stopped). The list covers only what
+ * the loading UI consumes. `peers` is our own addition, sampled while the
+ * chain bootstraps rather than reported by smoldot.
  */
-export type LifecycleKind =
-  | "firstPeer"
-  | "bootstrapComplete"
-  | "stalled"
-  | "recovered";
-const LIFECYCLE_KINDS: ReadonlySet<string> = new Set([
+export const CHAIN_SYNC_KINDS = [
   "firstPeer",
   "bootstrapComplete",
   "stalled",
   "recovered",
-]);
-export interface LifecycleEvent {
-  /** Logical chain key: "relay", "asset-hub", "bulletin", "people", "custom-relay". */
-  chain: string;
-  kind: LifecycleKind;
-  /** Set on `stalled` (and `recovered` as `previously`): why sync stopped progressing. */
+  "peers",
+] as const;
+export type ChainSyncKind = (typeof CHAIN_SYNC_KINDS)[number];
+
+function isSyncKind(kind: string): kind is ChainSyncKind {
+  return (CHAIN_SYNC_KINDS as readonly string[]).includes(kind);
+}
+
+export interface ChainSyncEvent {
+  chain: ChainKey;
+  kind: ChainSyncKind;
+  /** Why sync stopped progressing, on `stalled` and `recovered`. */
   reason?: string;
+  /** Peer count, on `peers`. */
+  peers?: number;
+  /** Whether the chain is still catching up, on `peers`. */
+  isSyncing?: boolean;
 }
 
-type LifecycleCallback = (event: LifecycleEvent) => void;
-const lifecycleListeners = new Set<LifecycleCallback>();
-// Latest event per (chain, kind), insertion-ordered. Bounded, so late
+type SyncCallback = (event: ChainSyncEvent) => void;
+const syncListeners = new Set<SyncCallback>();
+// Latest event per chain and kind, insertion-ordered. Bounded, so late
 // subscribers replay at most kinds x chains events.
-const lifecycleHistory = new Map<string, LifecycleEvent>();
+const syncHistory = new Map<string, ChainSyncEvent>();
 
 /**
- * Subscribe to smoldot lifecycle events. Late subscribers receive the latest
- * event per chain and kind (snapshot-on-subscribe), then continue with live
- * events. Returns an unsubscribe function.
+ * Subscribe to what the chains report about their sync.
+ *
+ * Late subscribers first receive the latest event per chain and kind, then
+ * continue with live ones, so a listener that attaches mid-sync still knows
+ * where each chain stands. Returns an unsubscribe function.
  */
-export function onLifecycle(cb: LifecycleCallback): () => void {
-  lifecycleListeners.add(cb);
-  for (const event of lifecycleHistory.values()) {
+export function onChainSync(cb: SyncCallback): () => void {
+  syncListeners.add(cb);
+  for (const event of syncHistory.values()) {
     try {
       cb(event);
       // eslint-disable-next-line no-restricted-syntax -- defensive replay: one buggy late subscriber must not block registration.
@@ -106,20 +125,27 @@ export function onLifecycle(cb: LifecycleCallback): () => void {
     }
   }
   return () => {
-    lifecycleListeners.delete(cb);
+    syncListeners.delete(cb);
   };
 }
 
-function emitLifecycle(event: LifecycleEvent): void {
-  // `stalled` and `recovered` describe one condition; keeping both in the
-  // replay history would let a late subscriber end on the outdated half.
-  if (event.kind === "stalled") {
-    lifecycleHistory.delete(`${event.chain}:recovered`);
+function emitChainSync(event: ChainSyncEvent): void {
+  if (event.kind === "peers") {
+    // Repeating an unchanged count would wake every listener once a second
+    // for nothing.
+    const prev = syncHistory.get(`${event.chain}:peers`);
+    if (prev !== undefined && prev.peers === event.peers) {
+      return;
+    }
+  } else if (event.kind === "stalled") {
+    // `stalled` and `recovered` describe one condition. Keeping both in the
+    // replay history would let a late subscriber end on the outdated half.
+    syncHistory.delete(`${event.chain}:recovered`);
   } else if (event.kind === "recovered") {
-    lifecycleHistory.delete(`${event.chain}:stalled`);
+    syncHistory.delete(`${event.chain}:stalled`);
   }
-  lifecycleHistory.set(`${event.chain}:${event.kind}`, event);
-  for (const cb of lifecycleListeners) {
+  syncHistory.set(`${event.chain}:${event.kind}`, event);
+  for (const cb of syncListeners) {
     try {
       cb(event);
       // eslint-disable-next-line no-restricted-syntax -- defensive multicast: one buggy subscriber must not block the broadcast.
@@ -129,62 +155,28 @@ function emitLifecycle(event: LifecycleEvent): void {
   }
 }
 
-/** A chain's `system_health` sample, polled during bootstrap. */
-export interface HealthEvent {
-  /** Logical chain key, same namespace as `LifecycleEvent.chain`. */
-  chain: string;
-  peers: number;
-  isSyncing: boolean;
+/** Which chains report sync, and which of those are sampled for peers. */
+export interface SyncReportingConfig {
+  milestones: readonly ChainKey[];
+  peerCounts: readonly ChainKey[];
 }
 
-type HealthCallback = (event: HealthEvent) => void;
-const healthListeners = new Set<HealthCallback>();
-const lastHealth = new Map<string, HealthEvent>();
-
-/**
- * Subscribe to chain health samples. Late subscribers receive the last known
- * sample per chain, then live changes. Returns an unsubscribe function.
- */
-export function onHealth(cb: HealthCallback): () => void {
-  healthListeners.add(cb);
-  for (const event of lastHealth.values()) {
-    try {
-      cb(event);
-      // eslint-disable-next-line no-restricted-syntax -- defensive replay: one buggy late subscriber must not block registration.
-    } catch {
-      /* listener threw during replay */
-    }
-  }
-  return () => {
-    healthListeners.delete(cb);
-  };
-}
+// Sync reporting is opt-in per process and per chain, because it costs a
+// subscription plus an interceptor on every response the chain yields. The
+// protocol iframe's direct mode enables it for the chains its loading
+// screen actually shows. The SharedWorker never does, so its long-lived
+// smoldot does no work for a UI that cannot observe it.
+const milestoneChains = new Set<ChainKey>();
+const peerCountChains = new Set<ChainKey>();
 
-function emitHealth(event: HealthEvent): void {
-  const prev = lastHealth.get(event.chain);
-  if (prev?.peers === event.peers && prev.isSyncing === event.isSyncing) {
-    return;
+export function enableSyncReporting(config: SyncReportingConfig): void {
+  for (const chain of config.milestones) {
+    milestoneChains.add(chain);
   }
-  lastHealth.set(event.chain, event);
-  for (const cb of healthListeners) {
-    try {
-      cb(event);
-      // eslint-disable-next-line no-restricted-syntax -- defensive multicast: one buggy subscriber must not block the broadcast.
-    } catch {
-      /* listener threw */
-    }
-  }
-}
-
-// Health polling is opt-in per process and per chain. The protocol
-// iframe's direct mode enables it for the chains its loading UI actually
-// reads; the SharedWorker never does, so its long-lived smoldot does not
-// poll for a UI that cannot observe it.
-const healthPollingChains = new Set<string>();
-
-export function enableHealthPolling(chains: readonly string[]): void {
-  for (const chain of chains) {
-    healthPollingChains.add(chain);
+  for (const chain of config.peerCounts) {
+    peerCountChains.add(chain);
+    // A peer count is useless without the milestone that ends it.
+    milestoneChains.add(chain);
   }
 }
 
@@ -246,13 +238,13 @@ const CONNECTION_ISSUE_PATTERNS = [
 // cannot collide with the numeric ids polkadot-api uses, and so the chain
 // tap can recognize and consume the responses before they reach
 // polkadot-api's provider.
-const LIFECYCLE_FOLLOW_REQUEST_ID = "__dotli_lifecycle_follow__";
-const HEALTH_REQUEST_ID = "__dotli_health__";
+const FOLLOW_ID_PREFIX = "__dotli_lifecycle_follow__:";
+const HEALTH_ID_PREFIX = "__dotli_health__:";
 
 // Subscription id of each chain's `lifecycle_unstable_follow`, learned from
 // the follow reply. Notifications carry no request id, so this is how the
 // tap tells our subscription's events apart from any other traffic.
-const lifecycleSubscriptions = new Map<string, string>();
+const followSubscriptions = new Map<ChainKey, string>();
 
 function smoldotLogCallback(
   level: number,
@@ -293,23 +285,25 @@ function smoldotLogCallback(
 }
 
 /**
- * Response interceptor bound to one chain. Runs inside the chain tap's
- * pump, so it sees every response in order, untruncated, and can consume
- * our reserved-id traffic before polkadot-api's provider does.
+ * Build the tap interceptor that claims one chain's sync traffic.
+ *
+ * It runs inside the chain tap's pump, so it sees every response in order
+ * and untruncated, and it consumes our reserved-id traffic before
+ * polkadot-api's provider can see it.
  */
-function makeSideChannelIntercept(chainName: string): TapIntercept {
+function makeSideChannelIntercept(chain: ChainKey): TapIntercept {
   return (parsed) => {
     if (typeof parsed.id === "string") {
-      if (parsed.id.startsWith(`${LIFECYCLE_FOLLOW_REQUEST_ID}:`)) {
+      if (parsed.id.startsWith(FOLLOW_ID_PREFIX)) {
         // Reply to our follow request: remember the subscription id so
         // notifications (which carry no request id) can be matched below.
         if (typeof parsed.result === "string") {
-          lifecycleSubscriptions.set(chainName, parsed.result);
+          followSubscriptions.set(chain, parsed.result);
         }
         return true;
       }
-      if (parsed.id.startsWith(`${HEALTH_REQUEST_ID}:`)) {
-        handleHealthResponse(chainName, parsed.result);
+      if (parsed.id.startsWith(HEALTH_ID_PREFIX)) {
+        handleHealthResponse(chain, parsed.result);
         return true;
       }
       return false;
@@ -323,7 +317,7 @@ function makeSideChannelIntercept(chainName: string): TapIntercept {
         | undefined;
       // The follow reply always precedes its notifications, so an unknown
       // subscription id means the event belongs to someone else: forward it.
-      const subscription = lifecycleSubscriptions.get(chainName);
+      const subscription = followSubscriptions.get(chain);
       if (
         params === undefined ||
         subscription === undefined ||
@@ -331,41 +325,36 @@ function makeSideChannelIntercept(chainName: string): TapIntercept {
       ) {
         return false;
       }
-      emitLifecycleNotification(chainName, params.result);
+      emitMilestone(chain, params.result);
       return true;
     }
     return false;
   };
 }
 
-function emitLifecycleNotification(
-  chain: string,
+function emitMilestone(
+  chain: ChainKey,
   result: { kind?: string; reason?: string; previously?: string } | undefined,
 ): void {
   const kind = result?.kind;
-  if (kind === undefined || !LIFECYCLE_KINDS.has(kind)) {
+  if (kind === undefined || kind === "peers" || !isSyncKind(kind)) {
     return;
   }
   if (kind === "bootstrapComplete") {
-    // The chain is usable; peer-count polling has served its purpose.
-    healthPollers.get(chain)?.stop();
+    // The chain is usable, so peer-count polling has served its purpose.
+    persistence.get(chain)?.healthPoller?.stop();
   }
-  const reason =
-    kind === "stalled"
-      ? result?.reason
-      : kind === "recovered"
-        ? result?.previously
-        : undefined;
-  emitLifecycle({
+  const reason = kind === "stalled" ? result?.reason : result?.previously;
+  emitChainSync({
     chain,
-    kind: kind as LifecycleKind,
+    kind,
     ...(typeof reason === "string" ? { reason } : {}),
   });
 }
 
-function handleHealthResponse(chain: string, result: unknown): void {
+function handleHealthResponse(chain: ChainKey, result: unknown): void {
   healthResponseSeen = true;
-  healthPollers.get(chain)?.noteResponse();
+  persistence.get(chain)?.healthPoller?.noteResponse();
   const health = result as { peers?: unknown; isSyncing?: unknown } | null;
   if (
     health === null ||
@@ -377,7 +366,12 @@ function handleHealthResponse(chain: string, result: unknown): void {
   ) {
     return;
   }
-  emitHealth({ chain, peers: health.peers, isSyncing: health.isSyncing });
+  emitChainSync({
+    chain,
+    kind: "peers",
+    peers: health.peers,
+    isSyncing: health.isSyncing,
+  });
 }
 
 let smoldotInstance: SmoldotClient | null = null;
@@ -389,9 +383,9 @@ interface PersistenceEntry {
   periodicTimer: ReturnType<typeof setInterval>;
   healthPoller: HealthPoller | null;
 }
-const persistence = new Map<string, PersistenceEntry>();
+const persistence = new Map<ChainKey, PersistenceEntry>();
 
-function dbKeyFor(chainName: string): string {
+function dbKeyFor(chainName: ChainKey): string {
   return `${getNetwork()}:${chainName}`;
 }
 
@@ -403,7 +397,7 @@ function unrefHandle(handle: ReturnType<typeof setTimeout>): void {
   }
 }
 
-function schedulePersistence(chainName: string, tap: ChainDbTap): void {
+function schedulePersistence(chainName: ChainKey, tap: ChainDbTap): void {
   if (persistence.has(chainName)) {
     return;
   }
@@ -453,7 +447,7 @@ function schedulePersistence(chainName: string, tap: ChainDbTap): void {
   });
 }
 
-function teardownPersistence(chainName: string): void {
+function teardownPersistence(chainName: ChainKey): void {
   const entry = persistence.get(chainName);
   if (entry === undefined) {
     return;
@@ -472,17 +466,24 @@ function teardownAllPersistence(): void {
 }
 
 function attachPersistence(
-  chainName: string,
+  chainName: ChainKey,
   underlying: SmoldotChain,
 ): SmoldotChain {
   teardownPersistence(chainName);
-  // The tap intercepts our reserved-id traffic (lifecycle follow, health
-  // polls) in-band and consumes it, so polkadot-api's provider only ever
-  // sees its own requests and subscriptions.
-  const tap = tapChain(underlying, makeSideChannelIntercept(chainName));
+  // Reporting costs an interceptor on every response this chain yields, so
+  // chains nobody watches are tapped for persistence alone. When it is on,
+  // the interceptor consumes our reserved-id traffic in-band, leaving
+  // polkadot-api's provider with only its own requests and subscriptions.
+  const reports = milestoneChains.has(chainName);
+  const tap = tapChain(
+    underlying,
+    reports ? makeSideChannelIntercept(chainName) : undefined,
+  );
   schedulePersistence(chainName, tap);
-  attachLifecycleFollow(chainName, tap.chain);
-  if (healthPollingChains.has(chainName)) {
+  if (reports) {
+    followMilestones(chainName, tap.chain);
+  }
+  if (peerCountChains.has(chainName)) {
     const entry = persistence.get(chainName);
     if (entry !== undefined) {
       entry.healthPoller = startHealthPolling(chainName, tap);
@@ -491,12 +492,12 @@ function attachPersistence(
   return tap.chain;
 }
 
-function attachLifecycleFollow(chainName: string, chain: SmoldotChain): void {
+function followMilestones(chainName: ChainKey, chain: SmoldotChain): void {
   try {
     chain.sendJsonRpc(
       JSON.stringify({
         jsonrpc: "2.0",
-        id: `${LIFECYCLE_FOLLOW_REQUEST_ID}:${chainName}`,
+        id: `${FOLLOW_ID_PREFIX}${chainName}`,
         method: "lifecycle_unstable_follow",
         params: [],
       }),
@@ -512,25 +513,47 @@ interface HealthPoller {
   stop(): void;
   noteResponse(): void;
 }
-const healthPollers = new Map<string, HealthPoller>();
 
 const HEALTH_POLL_INTERVAL_MS = 1_000;
 const HEALTH_POLL_TIMEOUT_MS = 2_000;
 const HEALTH_POLL_MAX = 120;
 
-let healthWatchdogArmed = false;
 let healthResponseSeen = false;
 
 /**
- * Poll `system_health` on a chain's JSON-RPC pipe during bootstrap so the
- * loading UI can show a live peer count. Sequential by design: the next
- * poll goes out one interval after the previous response is observed in
- * the log stream, so a busy chain is never flooded; a 2s timeout resends
- * when a response never surfaces. Stops on `bootstrapComplete` for the
- * chain (see emitLifecycleNotification), chain teardown, a dead chain, or
- * a hard poll cap.
+ * Warn once per session if our reserved-id requests go unanswered.
+ *
+ * The whole side-channel depends on smoldot replying to them. If a smoldot
+ * bump breaks that, milestones and peer counts both go silently dead.
+ */
+const armSideChannelWatchdog = (() => {
+  let armed = false;
+  return (): void => {
+    if (armed) {
+      return;
+    }
+    armed = true;
+    const watchdog = setTimeout(() => {
+      if (!healthResponseSeen) {
+        log.warn(
+          "[dot.li smoldot] sync side-channel not observed within 5s, loading detail will not update",
+        );
+      }
+    }, 5_000);
+    unrefHandle(watchdog);
+  };
+})();
+
+/**
+ * Poll `system_health` during bootstrap so the UI can show a live peer count.
+ *
+ * Polling is sequential by design. The next poll goes out one interval
+ * after the previous response arrives, so a busy chain is never flooded,
+ * and a 2s timeout resends when a response never surfaces. Stops on
+ * `bootstrapComplete` for the chain (see `emitMilestone`), chain teardown,
+ * a dead chain, or a hard poll cap.
  */
-function startHealthPolling(chainName: string, tap: ChainDbTap): HealthPoller {
+function startHealthPolling(chain: ChainKey, tap: ChainDbTap): HealthPoller {
   let stopped = false;
   let polls = 0;
   let timer: ReturnType<typeof setTimeout> | null = null;
@@ -541,7 +564,6 @@ function startHealthPolling(chainName: string, tap: ChainDbTap): HealthPoller {
       clearTimeout(timer);
       timer = null;
     }
-    healthPollers.delete(chainName);
   };
 
   const schedule = (delayMs: number): void => {
@@ -565,14 +587,14 @@ function startHealthPolling(chainName: string, tap: ChainDbTap): HealthPoller {
       tap.chain.sendJsonRpc(
         JSON.stringify({
           jsonrpc: "2.0",
-          id: `${HEALTH_REQUEST_ID}:${chainName}:${String(polls)}`,
+          id: `${HEALTH_ID_PREFIX}${chain}:${String(polls)}`,
           method: "system_health",
           params: [],
         }),
       );
     } catch {
-      // The chain was destroyed under us (terminate/remove); polling is
-      // best-effort and simply ends.
+      // The chain was destroyed under us by a terminate or a remove.
+      // Polling is best-effort and simply ends.
       stop();
       return;
     }
@@ -586,28 +608,11 @@ function startHealthPolling(chainName: string, tap: ChainDbTap): HealthPoller {
     schedule(HEALTH_POLL_INTERVAL_MS);
   };
 
-  // The side-channel depends on smoldot answering our reserved-id
-  // requests. If a smoldot bump breaks that, lifecycle and health both go
-  // silently dead, so surface one warning per session when the first poll
-  // gets no observable reply.
-  if (!healthWatchdogArmed) {
-    healthWatchdogArmed = true;
-    const watchdog = setTimeout(() => {
-      if (!healthResponseSeen) {
-        log.warn(
-          "[dot.li smoldot] health side-channel not observed within 5s; loading detail will not update",
-        );
-      }
-    }, 5_000);
-    unrefHandle(watchdog);
-  }
-
-  const poller = { stop, noteResponse };
-  healthPollers.set(chainName, poller);
+  armSideChannelWatchdog();
   // Poll immediately: on a warm start the chain bootstraps in well under a
   // second and a delayed first poll would never produce a sample.
   send();
-  return poller;
+  return { stop, noteResponse };
 }
 
 /**
@@ -680,11 +685,10 @@ export function terminateSmoldot(): void {
   }
   teardownAllPersistence();
   // The next smoldot instance re-subscribes and re-emits its own
-  // lifecycle; stale subscription ids or replayed events from the dead
+  // lifecycle. Stale subscription ids or replayed events from the dead
   // session would mislabel or suppress the new one's signals.
-  lifecycleSubscriptions.clear();
-  lifecycleHistory.clear();
-  lastHealth.clear();
+  followSubscriptions.clear();
+  syncHistory.clear();
   smoldotInstance = null;
   relayChainPromise = null;
   dappAssetHubPromise = null;
diff --git a/packages/resolver/tests/smoldot.test.ts b/packages/resolver/tests/smoldot.test.ts
index 582edded..3c811c54 100644
--- a/packages/resolver/tests/smoldot.test.ts
+++ b/packages/resolver/tests/smoldot.test.ts
@@ -1,10 +1,10 @@
 // Copyright 2026 Parity Technologies (UK) Ltd.
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 
-// Queue-backed chain mocks: tests push raw JSON-RPC responses and the
-// chain tap's pump consumes them exactly as it does smoldot's output.
+// Queue-backed chain mocks. Tests push raw JSON-RPC responses and the chain
+// tap's pump consumes them exactly as it does the real light client's.
 const chainMocks = vi.hoisted(() => {
   interface MockChain {
     sendJsonRpc: ReturnType<typeof vi.fn>;
@@ -16,7 +16,9 @@ const chainMocks = vi.hoisted(() => {
   const chains: MockChain[] = [];
   function makeChain(): MockChain {
     const queue: string[] = [];
-    const waiters: ((s: string) => void)[] = [];
+    // The tap's pump awaits one response at a time, so at most one caller
+    // is ever waiting.
+    let waiting: ((s: string) => void) | null = null;
     const chain: MockChain = {
       sendJsonRpc: vi.fn(),
       nextJsonRpcResponse: () =>
@@ -25,14 +27,15 @@ const chainMocks = vi.hoisted(() => {
           if (next !== undefined) {
             resolve(next);
           } else {
-            waiters.push(resolve);
+            waiting = resolve;
           }
         }),
       jsonRpcResponses: (async function* () {})(),
       remove: vi.fn(),
       push(raw: string) {
-        const waiter = waiters.shift();
-        if (waiter !== undefined) {
+        const waiter = waiting;
+        if (waiter !== null) {
+          waiting = null;
           waiter(raw);
         } else {
           queue.push(raw);
@@ -78,9 +81,8 @@ vi.mock("@dotli/resolver/chain-specs", () => ({
 
 let getSmoldot: typeof import("@dotli/resolver/smoldot").getSmoldot;
 let getRelayChain: typeof import("@dotli/resolver/smoldot").getRelayChain;
-let onLifecycle: typeof import("@dotli/resolver/smoldot").onLifecycle;
-let onHealth: typeof import("@dotli/resolver/smoldot").onHealth;
-let enableHealthPolling: typeof import("@dotli/resolver/smoldot").enableHealthPolling;
+let onChainSync: typeof import("@dotli/resolver/smoldot").onChainSync;
+let enableSyncReporting: typeof import("@dotli/resolver/smoldot").enableSyncReporting;
 
 beforeEach(async () => {
   vi.clearAllMocks();
@@ -89,27 +91,34 @@ beforeEach(async () => {
   const mod = await import("@dotli/resolver/smoldot");
   getSmoldot = mod.getSmoldot;
   getRelayChain = mod.getRelayChain;
-  onLifecycle = mod.onLifecycle;
-  onHealth = mod.onHealth;
-  enableHealthPolling = mod.enableHealthPolling;
+  onChainSync = mod.onChainSync;
+  enableSyncReporting = mod.enableSyncReporting;
 });
 
-// Let the tap's pump loop drain everything pushed so far.
+/**
+ * Let the tap's pump loop drain everything pushed so far.
+ *
+ * Each queued response costs the pump a few microtask turns, so this yields
+ * generously rather than counting them. Raise it if a future pump grows
+ * more await points and events start arriving after the assertion.
+ */
 async function flush(): Promise<void> {
   for (let i = 0; i < 25; i++) {
     await Promise.resolve();
   }
 }
 
-async function relayMock(): Promise<
-  (typeof chainMocks.chains)[number] & object
-> {
-  await getRelayChain();
-  const chain = chainMocks.chains.at(-1);
-  if (chain === undefined) {
+/** Start the relay chain and hand back the mock feeding it. */
+async function startRelay(): Promise<{
+  tapped: Awaited<ReturnType<typeof getRelayChain>>;
+  raw: (typeof chainMocks.chains)[number];
+}> {
+  const tapped = await getRelayChain();
+  const raw = chainMocks.chains.at(-1);
+  if (raw === undefined) {
     throw new Error("relay chain mock was not created");
   }
-  return chain;
+  return { tapped, raw };
 }
 
 const FOLLOW_REPLY = JSON.stringify({
@@ -118,7 +127,7 @@ const FOLLOW_REPLY = JSON.stringify({
   result: "sub-1",
 });
 
-function followEvent(
+function milestone(
   subscription: string,
   kind: string,
   extra: Record<string, unknown> = {},
@@ -130,7 +139,7 @@ function followEvent(
   });
 }
 
-function healthReply(seq: number, peers: number, isSyncing = true): string {
+function peerReport(seq: number, peers: number, isSyncing = true): string {
   return JSON.stringify({
     jsonrpc: "2.0",
     id: `__dotli_health__:relay:${String(seq)}`,
@@ -138,274 +147,264 @@ function healthReply(seq: number, peers: number, isSyncing = true): string {
   });
 }
 
-function healthCalls(chain: { sendJsonRpc: ReturnType<typeof vi.fn> }) {
+function peerRequests(chain: { sendJsonRpc: ReturnType<typeof vi.fn> }) {
   return chain.sendJsonRpc.mock.calls
     .map((call) => call[0] as string)
     .filter((raw) => raw.includes("system_health"));
 }
 
-describe("getSmoldot", () => {
-  it("returns the same instance on repeated calls", () => {
-    const a = getSmoldot();
-    const b = getSmoldot();
-    expect(a).toBe(b);
-  });
-});
+describe("Light client sync reporting works", () => {
+  it("As a user opening several apps in one tab, they share a single light client", () => {
+    // Given / When
+    const first = getSmoldot();
+    const second = getSmoldot();
 
-describe("getRelayChain", () => {
-  it("returns a promise", () => {
-    const result = getRelayChain();
-    expect(result).toBeInstanceOf(Promise);
+    // Then
+    expect(first).toBe(second);
   });
 
-  it("deduplicates concurrent calls", () => {
-    const a = getRelayChain();
-    const b = getRelayChain();
-    expect(a).toBe(b);
-  });
+  it("As a user opening several apps in one tab, they share a single relay chain connection", async () => {
+    // Given / When
+    const first = getRelayChain();
+    const second = getRelayChain();
 
-  it("resolves to a chain object", async () => {
-    const chain = await getRelayChain();
-    expect(chain).toBeDefined();
-    expect(typeof chain.sendJsonRpc).toBe("function");
+    // Then
+    expect(first).toBe(second);
+    expect(typeof (await first).sendJsonRpc).toBe("function");
   });
-});
 
-describe("onLifecycle", () => {
-  it("delivers events for the chain once the follow reply is seen", async () => {
-    const chain = await relayMock();
-    const events: unknown[] = [];
-    onLifecycle((event) => events.push(event));
-
-    chain.push(FOLLOW_REPLY);
-    chain.push(followEvent("sub-1", "firstPeer"));
-    chain.push(followEvent("sub-1", "bootstrapComplete"));
+  it("As a user waiting for a domain, the shell learns when the first peer arrives and when the chain is ready", async () => {
+    // Given
+    enableSyncReporting({ milestones: ["relay"], peerCounts: [] });
+    const { raw } = await startRelay();
+    const milestones: unknown[] = [];
+    onChainSync((event) => milestones.push(event));
+
+    // When
+    raw.push(FOLLOW_REPLY);
+    raw.push(milestone("sub-1", "firstPeer"));
+    raw.push(milestone("sub-1", "bootstrapComplete"));
     await flush();
 
-    expect(events).toEqual([
+    // Then
+    expect(milestones).toEqual([
       { chain: "relay", kind: "firstPeer" },
       { chain: "relay", kind: "bootstrapComplete" },
     ]);
   });
 
-  it("forwards notifications from unknown subscriptions to the chain consumer", async () => {
-    const tapped = await getRelayChain();
-    const chain = chainMocks.chains.at(-1);
-    if (chain === undefined) {
-      throw new Error("relay chain mock was not created");
-    }
-    const events: unknown[] = [];
-    onLifecycle((event) => events.push(event));
-
-    chain.push(FOLLOW_REPLY);
-    const foreign = followEvent("someone-elses-sub", "firstPeer");
-    chain.push(foreign);
-    await flush();
-
-    expect(events).toEqual([]);
-    await expect(tapped.nextJsonRpcResponse()).resolves.toBe(foreign);
-  });
-
-  it("consumes our traffic so the chain consumer never sees it", async () => {
-    const tapped = await getRelayChain();
-    const chain = chainMocks.chains.at(-1);
-    if (chain === undefined) {
-      throw new Error("relay chain mock was not created");
-    }
-
-    chain.push(FOLLOW_REPLY);
-    chain.push(followEvent("sub-1", "firstPeer"));
-    const papiResponse = JSON.stringify({
-      jsonrpc: "2.0",
-      id: "1-42",
-      result: "0x00",
-    });
-    chain.push(papiResponse);
-    await flush();
-
-    // Only the polkadot-api response comes through; ours were consumed.
-    await expect(tapped.nextJsonRpcResponse()).resolves.toBe(papiResponse);
-  });
-
-  it("carries the stall reason and the recovery cause", async () => {
-    const chain = await relayMock();
-    const events: unknown[] = [];
-    onLifecycle((event) => events.push(event));
-
-    chain.push(FOLLOW_REPLY);
-    chain.push(followEvent("sub-1", "stalled", { reason: "noPeers" }));
-    chain.push(followEvent("sub-1", "recovered", { previously: "noPeers" }));
+  it("As a user whose connection drops mid-sync, the shell learns why it stalled and when it recovered", async () => {
+    // Given
+    enableSyncReporting({ milestones: ["relay"], peerCounts: [] });
+    const { raw } = await startRelay();
+    const milestones: unknown[] = [];
+    onChainSync((event) => milestones.push(event));
+
+    // When
+    raw.push(FOLLOW_REPLY);
+    raw.push(milestone("sub-1", "stalled", { reason: "noPeers" }));
+    raw.push(milestone("sub-1", "recovered", { previously: "noPeers" }));
     await flush();
 
-    expect(events).toEqual([
+    // Then
+    expect(milestones).toEqual([
       { chain: "relay", kind: "stalled", reason: "noPeers" },
       { chain: "relay", kind: "recovered", reason: "noPeers" },
     ]);
   });
 
-  it("replays only the latest event per chain and kind to a late subscriber", async () => {
-    const chain = await relayMock();
-    chain.push(FOLLOW_REPLY);
-    chain.push(followEvent("sub-1", "stalled", { reason: "noPeers" }));
-    chain.push(followEvent("sub-1", "stalled", { reason: "syncNoProgress" }));
-    chain.push(followEvent("sub-1", "firstPeer"));
+  it("As a user opening the loading screen late, I see the newest sync state rather than a replay of every step", async () => {
+    // Given
+    enableSyncReporting({ milestones: ["relay"], peerCounts: [] });
+    const { raw } = await startRelay();
+    raw.push(FOLLOW_REPLY);
+    raw.push(milestone("sub-1", "stalled", { reason: "noPeers" }));
+    raw.push(milestone("sub-1", "stalled", { reason: "syncNoProgress" }));
+    raw.push(milestone("sub-1", "firstPeer"));
     await flush();
 
-    const events: unknown[] = [];
-    onLifecycle((event) => events.push(event));
+    // When
+    const milestones: unknown[] = [];
+    onChainSync((event) => milestones.push(event));
 
-    expect(events).toEqual([
+    // Then
+    expect(milestones).toEqual([
       { chain: "relay", kind: "stalled", reason: "syncNoProgress" },
       { chain: "relay", kind: "firstPeer" },
     ]);
   });
 
-  it("replays only the newer half of a stall and recovery pair", async () => {
-    const chain = await relayMock();
-    chain.push(FOLLOW_REPLY);
-    chain.push(followEvent("sub-1", "stalled", { reason: "noPeers" }));
-    chain.push(followEvent("sub-1", "recovered", { previously: "noPeers" }));
+  it("As a user whose sync recovered before I looked, I am not told it is still stalled", async () => {
+    // Given
+    enableSyncReporting({ milestones: ["relay"], peerCounts: [] });
+    const { raw } = await startRelay();
+    raw.push(FOLLOW_REPLY);
+    raw.push(milestone("sub-1", "stalled", { reason: "noPeers" }));
+    raw.push(milestone("sub-1", "recovered", { previously: "noPeers" }));
     await flush();
 
-    const events: unknown[] = [];
-    onLifecycle((event) => events.push(event));
+    // When
+    const milestones: unknown[] = [];
+    onChainSync((event) => milestones.push(event));
 
-    expect(events).toEqual([
+    // Then
+    expect(milestones).toEqual([
       { chain: "relay", kind: "recovered", reason: "noPeers" },
     ]);
   });
 
-  it("ignores kinds outside the allowlist but still consumes them", async () => {
-    const tapped = await getRelayChain();
-    const chain = chainMocks.chains.at(-1);
-    if (chain === undefined) {
-      throw new Error("relay chain mock was not created");
-    }
-    const events: unknown[] = [];
-    onLifecycle((event) => events.push(event));
+  it("As a user waiting for a domain, I am told how many peers the light client found", async () => {
+    // Given
+    enableSyncReporting({ milestones: ["relay"], peerCounts: ["relay"] });
+    const { raw } = await startRelay();
+    const counts: unknown[] = [];
+    onChainSync((event) => counts.push(event));
 
-    chain.push(FOLLOW_REPLY);
-    chain.push(followEvent("sub-1", "warpSyncProgress", { at: 5, target: 9 }));
-    const papiResponse = JSON.stringify({ jsonrpc: "2.0", id: "1-1" });
-    chain.push(papiResponse);
+    // When
+    raw.push(peerReport(1, 3));
     await flush();
 
-    expect(events).toEqual([]);
-    await expect(tapped.nextJsonRpcResponse()).resolves.toBe(papiResponse);
+    // Then
+    expect(peerRequests(raw)[0]).toContain('"id":"__dotli_health__:relay:1"');
+    expect(counts).toEqual([
+      { chain: "relay", kind: "peers", peers: 3, isSyncing: true },
+    ]);
   });
 
-  it("stops delivering after unsubscribe", async () => {
-    const chain = await relayMock();
-    const events: unknown[] = [];
-    const unsubscribe = onLifecycle((event) => events.push(event));
-
-    chain.push(FOLLOW_REPLY);
-    chain.push(followEvent("sub-1", "firstPeer"));
-    await flush();
-    unsubscribe();
-    chain.push(followEvent("sub-1", "bootstrapComplete"));
+  it("As a user with a steady connection, the peer count only changes when the number really changes", async () => {
+    // Given
+    enableSyncReporting({ milestones: ["relay"], peerCounts: ["relay"] });
+    const { raw } = await startRelay();
+    const counts: unknown[] = [];
+    onChainSync((event) => counts.push(event));
+
+    // When
+    raw.push(peerReport(1, 2));
+    raw.push(peerReport(2, 2));
+    raw.push(peerReport(3, 5));
     await flush();
 
-    expect(events).toEqual([{ chain: "relay", kind: "firstPeer" }]);
-  });
-});
-
-describe("onHealth", () => {
-  // Fake timers keep leaked poller resends (2s timeout) from bleeding
-  // between tests through the mock chains.
-  beforeEach(() => {
-    vi.useFakeTimers();
-  });
-  afterEach(() => {
-    vi.useRealTimers();
+    // Then
+    expect(counts).toEqual([
+      { chain: "relay", kind: "peers", peers: 2, isSyncing: true },
+      { chain: "relay", kind: "peers", peers: 5, isSyncing: true },
+    ]);
   });
 
-  it("polls system_health immediately and emits the parsed sample", async () => {
-    enableHealthPolling(["relay"]);
-    const chain = await relayMock();
-
-    const sent = healthCalls(chain);
-    expect(sent.length).toBeGreaterThanOrEqual(1);
-    expect(sent[0]).toContain('"id":"__dotli_health__:relay:1"');
-
-    const events: unknown[] = [];
-    onHealth((event) => events.push(event));
-    chain.push(healthReply(1, 3));
+  it("As a user opening the loading screen late, I still see the peer count already found", async () => {
+    // Given
+    enableSyncReporting({ milestones: ["relay"], peerCounts: ["relay"] });
+    const { raw } = await startRelay();
+    raw.push(peerReport(1, 4));
     await flush();
 
-    expect(events).toEqual([{ chain: "relay", peers: 3, isSyncing: true }]);
-  });
+    // When
+    const counts: unknown[] = [];
+    onChainSync((event) => counts.push(event));
 
-  it("does not poll chains outside the allowlist", async () => {
-    enableHealthPolling(["asset-hub"]);
-    const chain = await relayMock();
-    expect(healthCalls(chain)).toEqual([]);
+    // Then
+    expect(counts).toEqual([
+      { chain: "relay", kind: "peers", peers: 4, isSyncing: true },
+    ]);
   });
 
-  it("does not poll when polling was never enabled", async () => {
-    const chain = await relayMock();
-    expect(healthCalls(chain)).toEqual([]);
+  it("As a user whose chain finished syncing, nothing keeps asking for peers", async () => {
+    // Given
+    vi.useFakeTimers();
+    try {
+      enableSyncReporting({ milestones: ["relay"], peerCounts: ["relay"] });
+      const { raw } = await startRelay();
+      raw.push(FOLLOW_REPLY);
+      raw.push(peerReport(1, 3));
+
+      // When
+      raw.push(milestone("sub-1", "bootstrapComplete"));
+      await flush();
+      const asked = peerRequests(raw).length;
+      await vi.advanceTimersByTimeAsync(30_000);
+
+      // Then
+      expect(peerRequests(raw).length).toBe(asked);
+    } finally {
+      vi.useRealTimers();
+    }
   });
 
-  it("emits only when the sample changes", async () => {
-    enableHealthPolling(["relay"]);
-    const chain = await relayMock();
+  it("As a user loading an app, the shell's own sync questions never reach the app's chain traffic", async () => {
+    // Given
+    enableSyncReporting({ milestones: ["relay"], peerCounts: [] });
+    const { tapped, raw } = await startRelay();
+    const appResponse = JSON.stringify({
+      jsonrpc: "2.0",
+      id: "1-42",
+      result: "0x00",
+    });
 
-    const events: unknown[] = [];
-    onHealth((event) => events.push(event));
-    chain.push(healthReply(1, 2));
-    chain.push(healthReply(2, 2));
-    chain.push(healthReply(3, 5));
+    // When
+    raw.push(FOLLOW_REPLY);
+    raw.push(milestone("sub-1", "firstPeer"));
+    raw.push(appResponse);
     await flush();
 
-    expect(events).toEqual([
-      { chain: "relay", peers: 2, isSyncing: true },
-      { chain: "relay", peers: 5, isSyncing: true },
-    ]);
+    // Then
+    await expect(tapped.nextJsonRpcResponse()).resolves.toBe(appResponse);
   });
+});
 
-  it("replays the last sample to a late subscriber", async () => {
-    enableHealthPolling(["relay"]);
-    const chain = await relayMock();
-
-    chain.push(healthReply(1, 4));
+describe("Light client sync reporting fails", () => {
+  it("As a user, a sync message meant for something else never moves my loading screen", async () => {
+    // Given
+    enableSyncReporting({ milestones: ["relay"], peerCounts: [] });
+    const { tapped, raw } = await startRelay();
+    const milestones: unknown[] = [];
+    onChainSync((event) => milestones.push(event));
+    const foreign = milestone("someone-elses-sub", "firstPeer");
+
+    // When
+    raw.push(FOLLOW_REPLY);
+    raw.push(foreign);
     await flush();
 
-    const events: unknown[] = [];
-    onHealth((event) => events.push(event));
-    expect(events).toEqual([{ chain: "relay", peers: 4, isSyncing: true }]);
+    // Then
+    expect(milestones).toEqual([]);
+    await expect(tapped.nextJsonRpcResponse()).resolves.toBe(foreign);
   });
 
-  it("stops polling once the chain bootstrap completes", async () => {
-    enableHealthPolling(["relay"]);
-    const chain = await relayMock();
-
-    chain.push(FOLLOW_REPLY);
-    chain.push(healthReply(1, 3));
-    chain.push(followEvent("sub-1", "bootstrapComplete"));
+  it("As a user, sync milestones the shell has no wording for are ignored", async () => {
+    // Given
+    enableSyncReporting({ milestones: ["relay"], peerCounts: [] });
+    const { tapped, raw } = await startRelay();
+    const milestones: unknown[] = [];
+    onChainSync((event) => milestones.push(event));
+    const appResponse = JSON.stringify({ jsonrpc: "2.0", id: "1-1" });
+
+    // When
+    raw.push(FOLLOW_REPLY);
+    raw.push(milestone("sub-1", "warpSyncProgress", { at: 5, target: 9 }));
+    raw.push(appResponse);
     await flush();
 
-    const sentBefore = healthCalls(chain).length;
-    await vi.advanceTimersByTimeAsync(30_000);
-    expect(healthCalls(chain).length).toBe(sentBefore);
+    // Then
+    expect(milestones).toEqual([]);
+    await expect(tapped.nextJsonRpcResponse()).resolves.toBe(appResponse);
   });
 
-  it("rejects malformed health payloads", async () => {
-    enableHealthPolling(["relay"]);
-    const chain = await relayMock();
+  it("As a user, a peer count that arrives malformed never reaches my loading screen", async () => {
+    // Given
+    enableSyncReporting({ milestones: ["relay"], peerCounts: ["relay"] });
+    const { raw } = await startRelay();
+    const counts: unknown[] = [];
+    onChainSync((event) => counts.push(event));
 
-    const events: unknown[] = [];
-    onHealth((event) => events.push(event));
-    // peers is not an integer
-    chain.push(
+    // When
+    raw.push(
       JSON.stringify({
         jsonrpc: "2.0",
         id: "__dotli_health__:relay:1",
         result: { isSyncing: true, peers: "3" },
       }),
     );
-    // error response, no result
-    chain.push(
+    raw.push(
       JSON.stringify({
         jsonrpc: "2.0",
         id: "__dotli_health__:relay:2",
@@ -414,6 +413,29 @@ describe("onHealth", () => {
     );
     await flush();
 
-    expect(events).toEqual([]);
+    // Then
+    expect(counts).toEqual([]);
+  });
+
+  it("As a user, chains my loading screen never shows are not asked for peers", async () => {
+    // Given
+    enableSyncReporting({
+      milestones: ["asset-hub"],
+      peerCounts: ["asset-hub"],
+    });
+
+    // When
+    const { raw } = await startRelay();
+
+    // Then
+    expect(peerRequests(raw)).toEqual([]);
+  });
+
+  it("As a user on a shell with no loading screen to feed, no peer counts are requested at all", async () => {
+    // Given / When
+    const { raw } = await startRelay();
+
+    // Then
+    expect(peerRequests(raw)).toEqual([]);
   });
 });
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index 4d590184..58a8dbb6 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -129,8 +129,8 @@ body {
   text-align: right;
 }
 
-/* Text block — phase label + terminal log.
-   The gap is the tight one: `#loading-detail` is a readout *of* the headline
+/* Text block: phase label, live detail, and slow-step hint.
+   The gap is the tight one. `#loading-detail` is a readout of the headline
    above it and has to sit close enough to read as one unit. `.loading-hint`
    is a separate, occasional warning and buys its 12px break back with a
    margin. Three rows spaced equally would read as three peers, which they
@@ -157,13 +157,13 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-/* Live detail line (e.g. peer count) below the status headline */
-/* Live sync readout under the headline. Ranked below `#status` by size,
-   weight, and family — not by tone: it shares the headline's opacity because
-   the stall copy it carries ("searching for peers") is the most reassuring
-   message on the screen, and it cannot be the faintest thing on it.
-   `min-height` reserves the row so the block does not jump when the detail
-   appears mid-sync and is cleared on bootstrap. */
+/* Live sync readout under the headline.
+   Ranked below `#status` by size, weight, and family rather than by tone.
+   It shares the headline's opacity because the stall copy it carries
+   ("searching for peers") is the most reassuring message on the screen, and
+   it cannot be the faintest thing on it. `min-height` reserves the row so
+   the block does not jump when the detail appears mid-sync and is cleared
+   on bootstrap. */
 .loading-detail {
   font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
   font-size: 11px;
diff --git a/packages/ui/src/ui.ts b/packages/ui/src/ui.ts
index 7b3f585b..c59fffc8 100644
--- a/packages/ui/src/ui.ts
+++ b/packages/ui/src/ui.ts
@@ -47,6 +47,8 @@ let currentPhase = -1;
 // Progress bar state
 let progressFillEl: HTMLElement | null = null;
 let progressPctEl: HTMLElement | null = null;
+let statusDetailEl: HTMLElement | null = null;
+let statusAnnouncerEl: HTMLElement | null = null;
 let currentProgress = 0;
 let targetProgress = 0;
 let crawlStep = 0;
@@ -101,6 +103,8 @@ export function initPhases(phaseList: LoadingPhase[]): void {
 
   progressFillEl = document.getElementById("loading-progress-fill");
   progressPctEl = document.getElementById("loading-progress-pct");
+  statusDetailEl = document.getElementById("loading-detail");
+  statusAnnouncerEl = document.getElementById("loading-announcer");
 }
 
 /**
@@ -140,37 +144,31 @@ export function advancePhase(index: number): void {
 }
 
 /**
- * Current phase index, -1 before the first `advancePhase`. Lets callers
- * suppress signals that describe a phase the bar has already passed.
- */
-export function getCurrentPhase(): number {
-  return currentPhase;
-}
-
-/**
- * Live detail line under the status headline (e.g. "3 peers"). Deliberately
- * separate from `#status`: this value changes every second or two during
- * sync, and `#status` is aria-live, so routing it there would queue a
- * screen-reader announcement per change. The detail element is aria-hidden
- * and never touches the slow-hint timer.
+ * Write the live detail line under the status headline, e.g. "3 peers".
+ *
+ * This is deliberately not `#status`. The value changes every second or two
+ * during sync and `#status` is a live region, so routing it there would
+ * queue a screen-reader announcement per change. The detail element is
+ * aria-hidden and never touches the slow-hint timer.
  *
- * `announce` mirrors the text once into the visually hidden polite region,
- * for state changes a screen-reader user should hear (stall and recovery
- * copy) without the per-second count spam.
+ * Pass `announce` for the state changes a screen-reader user should hear,
+ * such as stall and recovery copy. Those mirror once into a visually hidden
+ * polite region, leaving the per-second count silent.
  */
 export function setStatusDetail(
   detail: string,
   opts: { announce?: boolean } = {},
 ): void {
-  const el = document.getElementById("loading-detail");
-  if (el !== null) {
-    el.textContent = detail;
+  if (statusDetailEl !== null) {
+    statusDetailEl.textContent = detail;
   }
-  if (opts.announce === true && detail !== "") {
-    const announcer = document.getElementById("loading-announcer");
-    if (announcer !== null && announcer.textContent !== detail) {
-      announcer.textContent = detail;
-    }
+  if (
+    opts.announce === true &&
+    detail !== "" &&
+    statusAnnouncerEl !== null &&
+    statusAnnouncerEl.textContent !== detail
+  ) {
+    statusAnnouncerEl.textContent = detail;
   }
 }
 
@@ -316,7 +314,16 @@ function clearSlowWarning(): void {
  * Replaces the previous message in place. No new DOM elements are created.
  * Schedules a slow-step hint if the step exceeds its time threshold.
  */
-export function showStatus(message: string): void {
+export function showStatus(
+  message: string,
+  opts: { phase?: number } = {},
+): void {
+  // Callers that know which phase a message describes pass it, so prose
+  // about a step the bar already passed is dropped instead of flipping the
+  // headline backwards. `advancePhase` enforces the same rule for the bar.
+  if (opts.phase !== undefined && opts.phase < currentPhase) {
+    return;
+  }
   const status = document.getElementById("status");
   if (status !== null) {
     status.textContent = message;
diff --git a/packages/ui/tests/ui.test.ts b/packages/ui/tests/ui.test.ts
deleted file mode 100644
index aec5b343..00000000
--- a/packages/ui/tests/ui.test.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-// Copyright 2026 Parity Technologies (UK) Ltd.
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import { beforeEach, afterEach, describe, expect, it, vi } from "vitest";
-
-let initPhases: typeof import("@dotli/ui/ui").initPhases;
-let advancePhase: typeof import("@dotli/ui/ui").advancePhase;
-let showStatus: typeof import("@dotli/ui/ui").showStatus;
-let setStatusDetail: typeof import("@dotli/ui/ui").setStatusDetail;
-
-const PHASES = [
-  { label: "Starting", base: 2, target: 6, expectedMs: 650 },
-  { label: "Adding relay chain", base: 6, target: 10, expectedMs: 120 },
-  { label: "Syncing Asset Hub", base: 10, target: 55, expectedMs: 6500 },
-];
-
-function textOf(id: string): string {
-  return document.getElementById(id)?.textContent ?? "";
-}
-
-beforeEach(async () => {
-  vi.useFakeTimers();
-  document.body.innerHTML = `
-    <div id="app">
-      <div class="loading">
-        <div id="loading-progress-fill"></div>
-        <span id="loading-progress-pct">0%</span>
-        <p id="status">Reaching out</p>
-        <p id="loading-detail" aria-hidden="true"></p>
-        <p id="loading-hint"></p>
-      </div>
-    </div>`;
-  vi.resetModules();
-  const mod = await import("@dotli/ui/ui");
-  initPhases = mod.initPhases;
-  advancePhase = mod.advancePhase;
-  showStatus = mod.showStatus;
-  setStatusDetail = mod.setStatusDetail;
-  initPhases(PHASES);
-});
-
-afterEach(() => {
-  vi.useRealTimers();
-});
-
-describe("setStatusDetail", () => {
-  it("writes the detail line without touching the status headline", () => {
-    showStatus("Resolving example.dot");
-    setStatusDetail("3 peers");
-    expect(textOf("loading-detail")).toBe("3 peers");
-    expect(textOf("status")).toBe("Resolving example.dot");
-  });
-
-  it("does not reset the slow-hint timer while the count updates", () => {
-    advancePhase(2);
-    // "Syncing Asset Hub" arms a 15s hint. A peer count that ticks every
-    // second must not keep pushing that hint away.
-    for (let i = 0; i < 20; i++) {
-      vi.advanceTimersByTime(1000);
-      setStatusDetail(`${String(i)} peers`);
-    }
-    expect(textOf("loading-hint")).toContain("Asset Hub sync is slow");
-  });
-});
-
-describe("advancePhase", () => {
-  it("re-arms the slow hint for the new phase label", () => {
-    showStatus("Adding Paseo relay chain...");
-    advancePhase(2);
-    // The relay-chain hint (10s) must not fire after we advanced to the
-    // Syncing phase; the Syncing hint (15s) fires instead.
-    vi.advanceTimersByTime(11_000);
-    expect(textOf("loading-hint")).not.toContain("relay chain bootstrap");
-    vi.advanceTimersByTime(4_000);
-    expect(textOf("loading-hint")).toContain("Asset Hub sync is slow");
-  });
-
-  it("keeps the detail line across phase advances", () => {
-    setStatusDetail("4 peers");
-    advancePhase(2);
-    expect(textOf("loading-detail")).toBe("4 peers");
-  });
-});

From 50b1202911e87b9034e9f4fff87172e6b30361f8 Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Wed, 5 Aug 2026 17:24:50 +0100
Subject: [PATCH 07/24] Bring the loading screen text to WCAG AA, expose the
 peer count to screen readers, and stop smoldot trace lines reaching the
 headline

---
 apps/host/index.html              |  2 +-
 apps/host/src/main.ts             |  6 +++++-
 packages/resolver/src/smoldot.ts  | 12 ++++++++++++
 packages/ui/src/styles/base.css   | 21 ++++++++++++++-------
 packages/ui/src/styles/themes.css | 26 ++++++++++++++------------
 packages/ui/src/ui.ts             | 11 ++++++-----
 6 files changed, 52 insertions(+), 26 deletions(-)

diff --git a/apps/host/index.html b/apps/host/index.html
index 559eab0c..934feb25 100644
--- a/apps/host/index.html
+++ b/apps/host/index.html
@@ -235,7 +235,7 @@ <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
                 </div>
                 <div class="loading-text" id="loading-text">
                     <p id="status" aria-live="polite">Reaching out</p>
-                    <p class="loading-detail" id="loading-detail" aria-hidden="true"></p>
+                    <p class="loading-detail" id="loading-detail"></p>
                     <p class="loading-announcer" id="loading-announcer" aria-live="polite"></p>
                     <p class="loading-hint" id="loading-hint"></p>
                 </div>
diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index a605be4b..a1176626 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -1222,8 +1222,12 @@ async function main(): Promise<void> {
         case "peers":
           if (event.chain === "asset-hub") {
             const count = event.peers ?? 0;
+            const first = peerDetail === "";
             peerDetail = `${String(count)} ${count === 1 ? "peer" : "peers"}`;
-            setStatusDetail(peerDetail);
+            // Announce that peers were found, once. Every later tick is a
+            // silent visual update, so the count stays readable without
+            // queueing an announcement per second.
+            setStatusDetail(peerDetail, { announce: first });
           }
           return;
         case "stalled":
diff --git a/packages/resolver/src/smoldot.ts b/packages/resolver/src/smoldot.ts
index 0a52e9a2..dd1b2d7e 100644
--- a/packages/resolver/src/smoldot.ts
+++ b/packages/resolver/src/smoldot.ts
@@ -271,6 +271,18 @@ function smoldotLogCallback(
     return;
   }
 
+  // Only warnings and errors describe a problem. Everything below that is
+  // smoldot's structured operational logging, and the patterns below match
+  // substrings anywhere in a line, including inside key-value payloads. A
+  // successful `handshake-finished` matched "handshake", a routine
+  // `connection-activity` matched "closed" through its `write_closed=`
+  // field, and `foreground-runtime-call-start` matched too. All three
+  // reached the user as "Bootnode connection issue, <200 chars of smoldot
+  // internals>" in the loading headline on a normal cold start.
+  if (level > 2) {
+    return;
+  }
+
   // Only surface connection-related messages
   const lower = message.toLowerCase();
   const isConnectionIssue =
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index 58a8dbb6..161c845b 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -120,11 +120,16 @@ body {
     transform: translateX(100%);
   }
 }
+/* The loading text ranks by size, weight, and family, never by contrast:
+   every string here has to clear 4.5:1 against the page. Dimming with
+   `opacity` is what used to sink the whole block to 1.8-3.2:1, so these
+   are solid colours measured against #0a0a0a (dark) and #f5f5f5 (light,
+   see themes.css). */
 .loading-progress-pct {
   font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
   font-size: 11px;
-  color: #fff;
-  opacity: 0.3;
+  /* 6.12:1 */
+  color: #8f8f8f;
   min-width: 3ch;
   text-align: right;
 }
@@ -147,8 +152,8 @@ body {
 #status {
   font-size: 13px;
   font-weight: 500;
-  color: #fff;
-  opacity: 0.35;
+  /* 13.36:1 */
+  color: #d4d4d4;
   letter-spacing: -0.01em;
   line-height: 1.3;
   text-align: center;
@@ -167,8 +172,8 @@ body {
 .loading-detail {
   font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
   font-size: 11px;
-  color: #fff;
-  opacity: 0.35;
+  /* 7.85:1 */
+  color: #a3a3a3;
   text-align: center;
   min-height: 1.3em;
 }
@@ -196,7 +201,9 @@ body {
   margin-top: 6px;
 }
 .loading-hint.visible {
-  opacity: 0.5;
+  /* Full opacity: the amber is already AA at 10.32:1, and fading it to
+     half sank it to 3.27:1. The transition still carries the fade in. */
+  opacity: 1;
 }
 .loading-hint-text {
   display: block;
diff --git a/packages/ui/src/styles/themes.css b/packages/ui/src/styles/themes.css
index 6776c0f0..9f810bd1 100644
--- a/packages/ui/src/styles/themes.css
+++ b/packages/ui/src/styles/themes.css
@@ -205,10 +205,8 @@
   color: #1a1a1a;
 }
 [data-theme="light"] .loading-hint {
-  color: #b45309;
-}
-[data-theme="light"] .loading-hint.visible {
-  opacity: 0.9;
+  /* 6.50:1, where #b45309 was 4.61:1 before the fade and 3.92:1 after. */
+  color: #92400e;
 }
 [data-theme="light"] .loading-gateway-btn {
   border-color: rgba(0, 0, 0, 0.16);
@@ -231,7 +229,9 @@
   background: rgba(0, 0, 0, 0.06);
 }
 [data-theme="light"] .loading-progress-fill {
-  background: rgba(0, 0, 0, 0.35);
+  /* The fill is the state indicator, so it needs 3:1 as a non-text
+     component. 0.35 gave 2.43:1 against the page; 0.5 gives 3.88:1. */
+  background: rgba(0, 0, 0, 0.5);
 }
 /* Loading logo — dark-mode uses `fill: #fff` on the petals, which is
    invisible on the light-theme cream body. Flip to near-black so the
@@ -240,14 +240,16 @@
   fill: #111;
 }
 [data-theme="light"] .loading-progress-pct {
-  color: #333;
-}
-/* Same flip as `#status`: the base rule is `#fff`, which is invisible on the
-   light-theme background. The detail line tracks the headline's colour rather
-   than the percentage's — it carries the stall copy, which is the one message
-   that has to survive a light background. */
+  /* 4.89:1, and kept below the detail line so the ranking survives the
+     flip. #333 would clear AA too, but it would outrank the headline's
+     own secondary line. */
+  color: #6b6b6b;
+}
+/* Same flip as `#status`. The detail line sits between the headline and the
+   percentage, because it carries the stall copy, which is the one message
+   that has to survive a light background. 7.17:1. */
 [data-theme="light"] .loading-detail {
-  color: #1a1a1a;
+  color: #525252;
 }
 [data-theme="light"] .spinner {
   border-color: #ddd;
diff --git a/packages/ui/src/ui.ts b/packages/ui/src/ui.ts
index c59fffc8..33d9f659 100644
--- a/packages/ui/src/ui.ts
+++ b/packages/ui/src/ui.ts
@@ -148,12 +148,13 @@ export function advancePhase(index: number): void {
  *
  * This is deliberately not `#status`. The value changes every second or two
  * during sync and `#status` is a live region, so routing it there would
- * queue a screen-reader announcement per change. The detail element is
- * aria-hidden and never touches the slow-hint timer.
+ * queue a screen-reader announcement per change. The detail element carries
+ * no live region of its own, which leaves it readable on demand but never
+ * announced, and it never touches the slow-hint timer.
  *
- * Pass `announce` for the state changes a screen-reader user should hear,
- * such as stall and recovery copy. Those mirror once into a visually hidden
- * polite region, leaving the per-second count silent.
+ * Pass `announce` for the changes worth interrupting a screen-reader user
+ * for, such as the first peer count and the stall and recovery copy. Those
+ * mirror once into a visually hidden polite region.
  */
 export function setStatusDetail(
   detail: string,

From 187f56eeb0c2792e1398e3c75412f6fd02606e0a Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Thu, 6 Aug 2026 10:02:37 +0100
Subject: [PATCH 08/24] Narrate the Asset Hub sync step with the relay peer
 count, warp progress, and handover, and stop the envelope silently dropping
 new milestones

---
 apps/host/src/main.ts                    | 61 ++++++++++++++++---
 apps/protocol/src/main.ts                |  6 +-
 packages/protocol/src/client.ts          | 35 +----------
 packages/protocol/src/messages.ts        | 69 +++++++++++++++++++++
 packages/protocol/tests/messages.test.ts | 76 ++++++++++++++++++++++++
 packages/resolver/src/smoldot.ts         | 26 ++++++--
 packages/resolver/tests/smoldot.test.ts  | 27 ++++++++-
 packages/ui/src/ui.ts                    | 20 +++++++
 8 files changed, 272 insertions(+), 48 deletions(-)

diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index a1176626..8768ca22 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -31,6 +31,7 @@ import {
   showLanding,
   initPhases,
   advancePhase,
+  nudgePhaseProgress,
   setStatusDetail,
   stopStatusTick,
   listenForSandboxStatus,
@@ -1213,22 +1214,59 @@ async function main(): Promise<void> {
     // peer count still in flight, or a late stall on the relay, must not
     // resurrect it under "Resolving".
     let syncDetailDone = false;
+    // The relay warps first and the Asset Hub bootstraps on top of it, so
+    // the chain the user is waiting on changes partway through the step.
+    // Peer counts follow that, which is what keeps a number on screen for
+    // the whole step instead of the last a hundred milliseconds of it.
+    let waitingOn: "relay" | "asset-hub" = "relay";
+    const setPeerDetail = (count: number): void => {
+      const first = peerDetail === "";
+      peerDetail = `${String(count)} ${count === 1 ? "peer" : "peers"}`;
+      // Announce that peers were found, once. Every later tick is a silent
+      // visual update, so the count stays readable without queueing an
+      // announcement per second.
+      setStatusDetail(peerDetail, { announce: first });
+    };
     onProtocolChainSync((event) => {
       log.debug(`[dot.li sync] ${event.chain} ${event.syncKind}`);
       if (syncDetailDone) {
         return;
       }
       switch (event.syncKind) {
+        case "connecting":
+          if (peerDetail === "") {
+            setStatusDetail("connecting to peers");
+          }
+          return;
         case "peers":
-          if (event.chain === "asset-hub") {
-            const count = event.peers ?? 0;
-            const first = peerDetail === "";
-            peerDetail = `${String(count)} ${count === 1 ? "peer" : "peers"}`;
-            // Announce that peers were found, once. Every later tick is a
-            // silent visual update, so the count stays readable without
-            // queueing an announcement per second.
-            setStatusDetail(peerDetail, { announce: first });
+          if (event.chain === waitingOn) {
+            setPeerDetail(event.peers ?? 0);
+          }
+          return;
+        case "warpSyncProgress": {
+          // The one true percentage smoldot offers. Only relays warp, and
+          // only when they have real distance to cover.
+          const { at, target } = event;
+          if (
+            at === undefined ||
+            target === undefined ||
+            target <= 0 ||
+            at > target
+          ) {
+            return;
           }
+          setStatusDetail(
+            `block ${at.toLocaleString()} of ${target.toLocaleString()}`,
+          );
+          nudgePhaseProgress(at / target);
+          return;
+        }
+        case "warpSyncFinished":
+          // Fills the second of silence between the relay finishing and the
+          // Asset Hub finding its first peer.
+          waitingOn = "asset-hub";
+          peerDetail = "";
+          setStatusDetail("relay ready, reaching Asset Hub");
           return;
         case "stalled":
           // No trailing ellipsis: the headline already ends in one, and the
@@ -1251,7 +1289,12 @@ async function main(): Promise<void> {
           }
           return;
         case "bootstrapComplete":
-          if (event.chain === "asset-hub") {
+          if (event.chain === "relay") {
+            // A relay short enough to skip warp never sends
+            // `warpSyncFinished`, so hand over here too.
+            waitingOn = "asset-hub";
+            peerDetail = "";
+          } else {
             advancePhase(3);
             // The count is meaningless once sync is done. Clear it rather
             // than letting a stale number sit under "Resolving".
diff --git a/apps/protocol/src/main.ts b/apps/protocol/src/main.ts
index 72e2b4e0..ffce9c66 100644
--- a/apps/protocol/src/main.ts
+++ b/apps/protocol/src/main.ts
@@ -690,8 +690,12 @@ async function initDirectMode(): Promise<void> {
   // host moves the bar on the relay and the Asset Hub, and shows a peer
   // count for the Asset Hub alone.
   smoldotMod.enableSyncReporting({
+    // The relay warps first and the Asset Hub bootstraps on top of it, so
+    // both are on the critical path the loading screen narrates. Peer
+    // counts come from both: the relay reports one about a second before
+    // the Asset Hub does, and that second is otherwise silent.
     milestones: ["relay", "asset-hub"],
-    peerCounts: ["asset-hub"],
+    peerCounts: ["relay", "asset-hub"],
   });
 
   // On a smoldot panic, broadcast a fatal envelope to the parent. Direct
diff --git a/packages/protocol/src/client.ts b/packages/protocol/src/client.ts
index baba2e4c..68f1aa96 100644
--- a/packages/protocol/src/client.ts
+++ b/packages/protocol/src/client.ts
@@ -13,7 +13,6 @@ import type {
   ManifestResult,
   RootManifest,
 } from "@dotli/resolver/manifest";
-import type { ChainKey, ChainSyncKind } from "@dotli/resolver/smoldot";
 import { BASE_DOMAIN, type SiteId } from "@dotli/config/config";
 import {
   getActiveGatewaySupportedGenesisHashes,
@@ -25,6 +24,7 @@ import { log } from "@dotli/shared/log";
 import { m } from "@dotli/metrics/metrics";
 import * as S from "@dotli/metrics/spans";
 import {
+  isChainSyncPayloadValid,
   isProtocolEnvelope,
   type ProtocolChainSyncEnvelope,
   type ProtocolRequestEnvelope,
@@ -68,26 +68,6 @@ const sharedAuthListeners = new Set<SharedAuthStorageListener>();
 const chainSyncListeners = new Set<
   (event: ProtocolChainSyncEnvelope) => void
 >();
-// postMessage data is untrusted and the envelope type alone cannot reject a
-// spoofed field, so both are checked at runtime. The lists are repeated
-// rather than imported because importing a value from the resolver's
-// smoldot module would drag smoldot into every bundle that talks to the
-// protocol. `satisfies` ties each literal to the resolver's type, so a
-// drifting or misspelled entry fails typecheck.
-const CHAIN_KEY_VALUES = new Set<string>([
-  "relay",
-  "custom-relay",
-  "asset-hub",
-  "bulletin",
-  "people",
-] satisfies ChainKey[]);
-const SYNC_KIND_VALUES = new Set<string>([
-  "firstPeer",
-  "bootstrapComplete",
-  "stalled",
-  "recovered",
-  "peers",
-] satisfies ChainSyncKind[]);
 let listenerBound = false;
 let protocolReady = false;
 interface ReadyWaiter {
@@ -260,18 +240,7 @@ function bindMessageListener(): void {
         return;
       }
       case "chain-sync": {
-        if (
-          !CHAIN_KEY_VALUES.has(msg.chain) ||
-          !SYNC_KIND_VALUES.has(msg.syncKind)
-        ) {
-          return;
-        }
-        if (
-          msg.syncKind === "peers" &&
-          (!Number.isInteger(msg.peers) ||
-            (msg.peers ?? -1) < 0 ||
-            (msg.peers ?? 0) > 10_000)
-        ) {
+        if (!isChainSyncPayloadValid(msg)) {
           return;
         }
         broadcast(chainSyncListeners, msg, "Chain sync");
diff --git a/packages/protocol/src/messages.ts b/packages/protocol/src/messages.ts
index 219de1bf..41491307 100644
--- a/packages/protocol/src/messages.ts
+++ b/packages/protocol/src/messages.ts
@@ -115,6 +115,11 @@ export interface ProtocolChainSyncEnvelope {
   reason?: string;
   peers?: number;
   isSyncing?: boolean;
+  /** Warp position and destination, on `warpSyncProgress`. */
+  at?: number;
+  target?: number;
+  /** Block the warp settled on, on `warpSyncFinished`. */
+  finalized?: number;
 }
 
 // Unsolicited notification from the host iframe to its parent window when a
@@ -156,6 +161,70 @@ const VALID_KINDS = new Set([
   "auth-storage-changed",
 ]);
 
+// postMessage data is untrusted and the envelope type alone cannot reject a
+// spoofed field, so the chain and the kind are checked at runtime. The lists
+// are repeated rather than imported because importing a value from the
+// resolver's smoldot module would drag smoldot into every bundle that talks
+// to the protocol.
+//
+// They are written as `Record<T, true>` rather than an array with
+// `satisfies T[]`, because an array only proves every entry is valid and
+// says nothing about the ones missing. A kind added to the resolver and
+// forgotten here would then be dropped in silence. As a record, a missing
+// key fails typecheck, and `chainSyncKinds` in the tests fails too.
+/** Every chain the envelope accepts. Exhaustive against `ChainKey`. */
+export const ENVELOPE_CHAIN_KEYS = Object.keys({
+  relay: true,
+  "custom-relay": true,
+  "asset-hub": true,
+  bulletin: true,
+  people: true,
+} satisfies Record<ChainKey, true>) as ChainKey[];
+
+/** Every milestone the envelope accepts. Exhaustive against `ChainSyncKind`. */
+export const ENVELOPE_SYNC_KINDS = Object.keys({
+  firstPeer: true,
+  bootstrapComplete: true,
+  stalled: true,
+  recovered: true,
+  peers: true,
+  connecting: true,
+  warpSyncProgress: true,
+  warpSyncFinished: true,
+} satisfies Record<ChainSyncKind, true>) as ChainSyncKind[];
+
+const CHAIN_KEY_VALUES = new Set<string>(ENVELOPE_CHAIN_KEYS);
+const SYNC_KIND_VALUES = new Set<string>(ENVELOPE_SYNC_KINDS);
+
+/**
+ * Whether a `chain-sync` envelope carries values the loading UI can trust.
+ *
+ * Rejects unknown chains and kinds, a peer count that is not a sane integer,
+ * and any block height that is not a finite positive number, since those
+ * drive the bar and would render as NaN.
+ */
+export function isChainSyncPayloadValid(
+  msg: ProtocolChainSyncEnvelope,
+): boolean {
+  if (!CHAIN_KEY_VALUES.has(msg.chain) || !SYNC_KIND_VALUES.has(msg.syncKind)) {
+    return false;
+  }
+  if (
+    msg.syncKind === "peers" &&
+    (!Number.isInteger(msg.peers) ||
+      (msg.peers ?? -1) < 0 ||
+      (msg.peers ?? 0) > 10_000)
+  ) {
+    return false;
+  }
+  for (const height of [msg.at, msg.target, msg.finalized]) {
+    if (height !== undefined && (!Number.isFinite(height) || height < 0)) {
+      return false;
+    }
+  }
+  return true;
+}
+
 export function isProtocolEnvelope(value: unknown): value is ProtocolEnvelope {
   if (
     typeof value !== "object" ||
diff --git a/packages/protocol/tests/messages.test.ts b/packages/protocol/tests/messages.test.ts
index 4e80f57f..70ddd0f4 100644
--- a/packages/protocol/tests/messages.test.ts
+++ b/packages/protocol/tests/messages.test.ts
@@ -9,6 +9,9 @@ import {
   setNetwork,
 } from "@dotli/config/network";
 import {
+  ENVELOPE_CHAIN_KEYS,
+  ENVELOPE_SYNC_KINDS,
+  isChainSyncPayloadValid,
   isProtocolEnvelope,
   type ProtocolRequestEnvelope,
   type ProtocolResponseEnvelope,
@@ -17,6 +20,7 @@ import {
   type ProtocolChainMessageEnvelope,
   type ProtocolChainHaltEnvelope,
   type ProtocolReadyEnvelope,
+  type ProtocolChainSyncEnvelope,
 } from "@dotli/protocol/messages";
 
 describe("isProtocolEnvelope", () => {
@@ -152,3 +156,75 @@ describe("genesis hash constants", () => {
     }
   });
 });
+
+describe("chain-sync envelope validation works", () => {
+  function envelope(
+    over: Partial<ProtocolChainSyncEnvelope> = {},
+  ): ProtocolChainSyncEnvelope {
+    return {
+      namespace: "dotli:protocol",
+      kind: "chain-sync",
+      chain: "relay",
+      syncKind: "firstPeer",
+      ...over,
+    };
+  }
+
+  // This is the drift guard. The resolver owns the vocabulary, and the
+  // validator keeps its own runtime copy so smoldot stays out of every
+  // bundle that talks to the protocol. When the two fell out of step, three
+  // kinds were dropped in silence and the loading screen simply went quiet.
+  it("As a user, every sync milestone the resolver can emit reaches the shell", () => {
+    // Given / When / Then
+    for (const chain of ENVELOPE_CHAIN_KEYS) {
+      for (const syncKind of ENVELOPE_SYNC_KINDS) {
+        expect(
+          isChainSyncPayloadValid(
+            envelope({
+              chain,
+              syncKind,
+              ...(syncKind === "peers" ? { peers: 1 } : {}),
+            }),
+          ),
+        ).toBe(true);
+      }
+    }
+  });
+
+  it("As a user, a spoofed chain or milestone is refused", () => {
+    // Given / When / Then
+    expect(
+      isChainSyncPayloadValid(
+        envelope({
+          chain: "not-a-chain" as (typeof ENVELOPE_CHAIN_KEYS)[number],
+        }),
+      ),
+    ).toBe(false);
+    expect(
+      isChainSyncPayloadValid(
+        envelope({
+          syncKind: "somethingElse" as (typeof ENVELOPE_SYNC_KINDS)[number],
+        }),
+      ),
+    ).toBe(false);
+  });
+
+  it("As a user, a nonsense peer count or block height is refused", () => {
+    // Given / When / Then
+    for (const peers of [-1, 1.5, 10_001, Number.NaN]) {
+      expect(
+        isChainSyncPayloadValid(envelope({ syncKind: "peers", peers })),
+      ).toBe(false);
+    }
+    expect(
+      isChainSyncPayloadValid(
+        envelope({ syncKind: "warpSyncProgress", at: Number.NaN, target: 10 }),
+      ),
+    ).toBe(false);
+    expect(
+      isChainSyncPayloadValid(
+        envelope({ syncKind: "warpSyncFinished", finalized: -5 }),
+      ),
+    ).toBe(false);
+  });
+});
diff --git a/packages/resolver/src/smoldot.ts b/packages/resolver/src/smoldot.ts
index dd1b2d7e..021f88bc 100644
--- a/packages/resolver/src/smoldot.ts
+++ b/packages/resolver/src/smoldot.ts
@@ -72,10 +72,13 @@ export type ChainKey = (typeof CHAIN_KEYS)[number];
 /**
  * What a chain reports about its own sync.
  *
- * Smoldot emits more milestones than these (connecting, modeDecision,
- * warpSyncProgress, warpSyncFinished, stopped). The list covers only what
- * the loading UI consumes. `peers` is our own addition, sampled while the
- * chain bootstraps rather than reported by smoldot.
+ * Smoldot emits two more milestones (modeDecision and stopped) that the
+ * loading UI has nothing to say about. `peers` is our own addition, sampled
+ * while the chain bootstraps rather than reported by smoldot.
+ *
+ * `warpSyncProgress` is the only true percentage in here, and it only
+ * arrives when a relay has a real warp distance to cover. Short-lived test
+ * networks jump straight to `warpSyncFinished`.
  */
 export const CHAIN_SYNC_KINDS = [
   "firstPeer",
@@ -83,6 +86,9 @@ export const CHAIN_SYNC_KINDS = [
   "stalled",
   "recovered",
   "peers",
+  "connecting",
+  "warpSyncProgress",
+  "warpSyncFinished",
 ] as const;
 export type ChainSyncKind = (typeof CHAIN_SYNC_KINDS)[number];
 
@@ -99,6 +105,12 @@ export interface ChainSyncEvent {
   peers?: number;
   /** Whether the chain is still catching up, on `peers`. */
   isSyncing?: boolean;
+  /** Block the warp has proven so far, on `warpSyncProgress`. */
+  at?: number;
+  /** Block the warp is heading for, on `warpSyncProgress`. */
+  target?: number;
+  /** Block the warp settled on, on `warpSyncFinished`. */
+  finalized?: number;
 }
 
 type SyncCallback = (event: ChainSyncEvent) => void;
@@ -357,10 +369,16 @@ function emitMilestone(
     persistence.get(chain)?.healthPoller?.stop();
   }
   const reason = kind === "stalled" ? result?.reason : result?.previously;
+  const heights = result as unknown as Record<string, unknown>;
   emitChainSync({
     chain,
     kind,
     ...(typeof reason === "string" ? { reason } : {}),
+    ...(typeof heights.at === "number" ? { at: heights.at } : {}),
+    ...(typeof heights.target === "number" ? { target: heights.target } : {}),
+    ...(typeof heights.finalized === "number"
+      ? { finalized: heights.finalized }
+      : {}),
   });
 }
 
diff --git a/packages/resolver/tests/smoldot.test.ts b/packages/resolver/tests/smoldot.test.ts
index 3c811c54..a445bb5f 100644
--- a/packages/resolver/tests/smoldot.test.ts
+++ b/packages/resolver/tests/smoldot.test.ts
@@ -193,6 +193,30 @@ describe("Light client sync reporting works", () => {
     ]);
   });
 
+  it("As a user on a chain with real catching up to do, the shell learns how far along the warp is", async () => {
+    // Given
+    enableSyncReporting({ milestones: ["relay"], peerCounts: [] });
+    const { raw } = await startRelay();
+    const milestones: unknown[] = [];
+    onChainSync((event) => milestones.push(event));
+
+    // When
+    raw.push(FOLLOW_REPLY);
+    raw.push(milestone("sub-1", "connecting"));
+    raw.push(milestone("sub-1", "warpSyncProgress", { at: 20, target: 100 }));
+    raw.push(milestone("sub-1", "warpSyncProgress", { at: 75, target: 100 }));
+    raw.push(milestone("sub-1", "warpSyncFinished", { finalized: 100 }));
+    await flush();
+
+    // Then
+    expect(milestones).toEqual([
+      { chain: "relay", kind: "connecting" },
+      { chain: "relay", kind: "warpSyncProgress", at: 20, target: 100 },
+      { chain: "relay", kind: "warpSyncProgress", at: 75, target: 100 },
+      { chain: "relay", kind: "warpSyncFinished", finalized: 100 },
+    ]);
+  });
+
   it("As a user whose connection drops mid-sync, the shell learns why it stalled and when it recovered", async () => {
     // Given
     enableSyncReporting({ milestones: ["relay"], peerCounts: [] });
@@ -380,7 +404,8 @@ describe("Light client sync reporting fails", () => {
 
     // When
     raw.push(FOLLOW_REPLY);
-    raw.push(milestone("sub-1", "warpSyncProgress", { at: 5, target: 9 }));
+    // `modeDecision` is real and we deliberately have nothing to say about it.
+    raw.push(milestone("sub-1", "modeDecision", { mode: "warpSync" }));
     raw.push(appResponse);
     await flush();
 
diff --git a/packages/ui/src/ui.ts b/packages/ui/src/ui.ts
index 33d9f659..012bb501 100644
--- a/packages/ui/src/ui.ts
+++ b/packages/ui/src/ui.ts
@@ -143,6 +143,26 @@ export function advancePhase(index: number): void {
   armSlowHint(label);
 }
 
+/**
+ * Pull the bar to a real fraction of the current phase's band.
+ *
+ * The crawl paces the band on a guess at how long the step takes. When a
+ * step reports true progress, this moves the bar to where the work actually
+ * is. Monotonic and clamped to the band, so a late or noisy signal can
+ * never rewind the bar or push it into the next phase's territory.
+ */
+export function nudgePhaseProgress(fraction: number): void {
+  if (!Number.isFinite(fraction) || currentPhase < 0) {
+    return;
+  }
+  const { base, target } = phases[currentPhase];
+  const clamped = Math.max(0, Math.min(1, fraction));
+  const want = base + (target - base) * clamped;
+  if (want > currentProgress) {
+    setProgress(Math.min(want, target));
+  }
+}
+
 /**
  * Write the live detail line under the status headline, e.g. "3 peers".
  *

From a9d4270dd7eeceee84dda518f132505d8c6f7f2f Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Thu, 6 Aug 2026 17:45:35 +0100
Subject: [PATCH 09/24] Rebuild the loading screen around a bar that only
 explains itself after three seconds, with live peer, speed and completion
 readouts and a network panel behind a globe icon

---
 apps/host/index.html                          | 708 +++++++++++-------
 apps/host/src/main.ts                         | 117 ++-
 apps/host/tests/functional/resolution.spec.ts |  25 +-
 apps/protocol/src/main.ts                     |  13 +-
 packages/ui/src/bulletin-bitswap.ts           | 103 +++
 packages/ui/src/styles/base.css               | 101 ++-
 packages/ui/src/styles/themes.css             |  12 +-
 packages/ui/src/topbar.ts                     | 205 +++--
 packages/ui/src/ui.ts                         |  85 ++-
 9 files changed, 924 insertions(+), 445 deletions(-)

diff --git a/apps/host/index.html b/apps/host/index.html
index 934feb25..1db30fa6 100644
--- a/apps/host/index.html
+++ b/apps/host/index.html
@@ -3,270 +3,474 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-only -->
 
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Polkadot - The decentralized web, in your browser</title>
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-        <link rel="preconnect" href="https://host.dot.li" crossorigin />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap" rel="stylesheet" />
-        <script>
-            // Pre-open the shared IndexedDB during HTML parse so it's ready
-            // before main.ts executes. Overlaps IDB open (~10-50ms) with
-            // module loading. Picked up by src/db.ts via window.__dotliDb.
-            window.__dotliDb = new Promise(function(resolve, reject) {
-                var req = indexedDB.open("dotli", 2);
-                req.onupgradeneeded = function() {
-                    var db = req.result;
-                    if (!db.objectStoreNames.contains("cids"))
-                        db.createObjectStore("cids", { keyPath: "label" });
-                    if (!db.objectStoreNames.contains("chains"))
-                        db.createObjectStore("chains", { keyPath: "chain" });
-                    // v2: scheduled notifications + per-product id counters.
-                    if (!db.objectStoreNames.contains("scheduled_notifications")) {
-                        var s = db.createObjectStore("scheduled_notifications", { keyPath: "hostId", autoIncrement: true });
-                        s.createIndex("byProductId", "productId", { unique: false });
-                        s.createIndex("byScheduledAt", "scheduledAt", { unique: false });
-                    }
-                    if (!db.objectStoreNames.contains("notification_counters"))
-                        db.createObjectStore("notification_counters", { keyPath: "productId" });
-                };
-                req.onsuccess = function() { resolve(req.result); };
-                req.onerror = function() { reject(new Error("IDB open failed")); };
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Polkadot - The decentralized web, in your browser</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="preconnect" href="https://host.dot.li" crossorigin />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap"
+      rel="stylesheet"
+    />
+    <script>
+      // Pre-open the shared IndexedDB during HTML parse so it's ready
+      // before main.ts executes. Overlaps IDB open (~10-50ms) with
+      // module loading. Picked up by src/db.ts via window.__dotliDb.
+      window.__dotliDb = new Promise(function (resolve, reject) {
+        var req = indexedDB.open("dotli", 2);
+        req.onupgradeneeded = function () {
+          var db = req.result;
+          if (!db.objectStoreNames.contains("cids"))
+            db.createObjectStore("cids", { keyPath: "label" });
+          if (!db.objectStoreNames.contains("chains"))
+            db.createObjectStore("chains", { keyPath: "chain" });
+          // v2: scheduled notifications + per-product id counters.
+          if (!db.objectStoreNames.contains("scheduled_notifications")) {
+            var s = db.createObjectStore("scheduled_notifications", {
+              keyPath: "hostId",
+              autoIncrement: true,
             });
-        </script>
-        <link rel="preconnect" href="https://paseo-bulletin-collator-node-0.parity-testnet.parity.io" />
-        <link rel="preconnect" href="https://paseo-bulletin-collator-node-1.parity-testnet.parity.io" />
-        <link rel="preconnect" href="https://paseo-bulletin-rpc-node-0.polkadot.io" />
-        <link rel="preconnect" href="https://paseo-bulletin-rpc-node-1.polkadot.io" />
-        <link rel="preconnect" href="https://paseo-ipfs.polkadot.io" />
-        <link rel="preconnect" href="https://sys.ibp.network" />
-        <!-- Styles are loaded via src/styles.css (imported in main.ts) -->
-    </head>
-    <body>
-        <script>
-            (function() {
-                var theme = "dark";
-                try {
-                    var stored = localStorage.getItem("dotli-theme");
-                    if (stored === "light" || stored === "dark") {
-                        theme = stored;
-                    } else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) {
-                        theme = "light";
-                    }
-                } catch (_) { /* localStorage unavailable — fall back to dark default */ }
-                document.documentElement.setAttribute("data-theme", theme);
-            })();
-        </script>
-        <!-- Top Bar -->
-        <div id="topbar">
-            <a class="topbar-left" id="topbar-home" href="/">
-                <div class="topbar-logo">
-                    <svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M9.9873 14.1348C10.8273 14.1348 11.462 14.3911 11.6113 14.8604C11.8447 15.6051 10.7691 16.609 9.20801 17.1016C7.64706 17.5964 6.1908 17.3912 5.95508 16.6465C5.7363 15.9482 6.6685 15.0218 8.07227 14.5029L8.3584 14.4023C8.93466 14.2203 9.49501 14.1348 9.9873 14.1348ZM2.23828 9.9248C2.99193 9.9248 3.82268 10.226 4.52734 10.8213C5.85738 11.9442 6.23288 13.6886 5.36719 14.7158C4.50142 15.7428 2.71861 15.6629 1.38867 14.54C0.100568 13.4522 -0.291878 11.7823 0.47168 10.7451L0.551758 10.6465C0.957761 10.1634 1.5687 9.92482 2.23828 9.9248ZM15.1748 9.47949C15.2096 9.4795 15.2397 9.48415 15.2676 9.49805C15.6409 9.67081 15.4174 10.9618 14.7617 12.3789C14.1085 13.7956 13.2732 14.8041 12.8975 14.6318C12.5218 14.4591 12.7481 13.168 13.4014 11.751C14.0057 10.4413 14.7665 9.47949 15.1748 9.47949ZM3.42578 2.46387C3.9998 2.46387 4.55096 2.64366 4.9873 3.01953C6.10236 3.97675 6.07202 5.84169 4.92188 7.18164C3.76917 8.52404 1.93275 8.83452 0.817383 7.875C-0.297896 6.91782 -0.267461 5.05292 0.882812 3.71289C1.58276 2.8982 2.5345 2.46396 3.42578 2.46387ZM13.1631 2.80957C13.6391 2.80957 14.4071 3.79925 14.9531 5.15332C15.5458 6.62173 15.6526 7.96206 15.1953 8.14648C14.7355 8.33003 13.8845 7.29114 13.292 5.82324C12.6993 4.35719 12.5892 3.01463 13.0488 2.83008C13.0861 2.8161 13.1235 2.8096 13.1631 2.80957ZM7.82422 0C8.30483 0 8.83683 0.0896562 9.37109 0.276367C10.9576 0.829603 11.9799 2.02888 11.6582 2.95801C11.3362 3.88718 9.78886 4.19295 8.20215 3.63965C6.61582 3.08633 5.5943 1.88706 5.91602 0.958008C6.12834 0.341726 6.87931 6.04412e-05 7.82422 0Z" fill="#ffffff"/>
-                    </svg>
-                </div>
-                <span class="topbar-brand">Polkadot</span>
-                <span class="topbar-beta">Beta</span>
-            </a>
-            <div class="topbar-url" id="topbar-url"></div>
-            <div class="topbar-right">
-                <button
-                    id="auth-button"
-                    class="topbar-btn"
-                    title="Login with Polkadot Mobile"
-                    disabled
-                >
-                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
-                        <circle cx="12" cy="7" r="4"/>
-                    </svg>
-                </button>
-                <button
-                    id="permissions-button"
-                    class="topbar-btn"
-                    title="Permissions"
-                >
-                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
-                        <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
-                    </svg>
-                </button>
-                <button
-                    id="theme-toggle"
-                    class="topbar-btn"
-                    title="Toggle light/dark theme"
-                >
-                    <svg id="theme-icon-sun" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
-                    </svg>
-                    <svg id="theme-icon-moon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
-                    </svg>
-                </button>
-                <button
-                    id="more-button"
-                    class="topbar-btn topbar-more-btn"
-                    title="More"
-                    aria-expanded="false"
-                    aria-controls="more-popover"
-                >
-                    <span class="hamburger" aria-hidden="true">
-                        <span class="hamburger-bar"></span>
-                        <span class="hamburger-bar"></span>
-                        <span class="hamburger-bar"></span>
-                    </span>
-                </button>
-                <div class="more-popover" id="more-popover">
-                    <button class="more-row" data-target="permissions-button">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
-                            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
-                        </svg>
-                        <span>Permissions</span>
-                    </button>
-                    <button class="more-row" data-target="theme-toggle">
-                        <svg class="more-row-icon-sun" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
-                        </svg>
-                        <svg class="more-row-icon-moon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
-                        </svg>
-                        <span>Theme</span>
-                    </button>
-                    <button class="more-row" data-target="mode-button">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <circle cx="12" cy="12" r="3"/>
-                            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
-                        </svg>
-                        <span>Settings</span>
-                    </button>
-                </div>
-                <button
-                    id="mode-button"
-                    class="topbar-btn"
-                    title="Settings"
-                >
-                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <circle cx="12" cy="12" r="3"/>
-                        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
-                    </svg>
-                </button>
-            </div>
+            s.createIndex("byProductId", "productId", { unique: false });
+            s.createIndex("byScheduledAt", "scheduledAt", { unique: false });
+          }
+          if (!db.objectStoreNames.contains("notification_counters"))
+            db.createObjectStore("notification_counters", {
+              keyPath: "productId",
+            });
+        };
+        req.onsuccess = function () {
+          resolve(req.result);
+        };
+        req.onerror = function () {
+          reject(new Error("IDB open failed"));
+        };
+      });
+    </script>
+    <link
+      rel="preconnect"
+      href="https://paseo-bulletin-collator-node-0.parity-testnet.parity.io"
+    />
+    <link
+      rel="preconnect"
+      href="https://paseo-bulletin-collator-node-1.parity-testnet.parity.io"
+    />
+    <link
+      rel="preconnect"
+      href="https://paseo-bulletin-rpc-node-0.polkadot.io"
+    />
+    <link
+      rel="preconnect"
+      href="https://paseo-bulletin-rpc-node-1.polkadot.io"
+    />
+    <link rel="preconnect" href="https://paseo-ipfs.polkadot.io" />
+    <link rel="preconnect" href="https://sys.ibp.network" />
+    <!-- Styles are loaded via src/styles.css (imported in main.ts) -->
+  </head>
+  <body>
+    <script>
+      (function () {
+        var theme = "dark";
+        try {
+          var stored = localStorage.getItem("dotli-theme");
+          if (stored === "light" || stored === "dark") {
+            theme = stored;
+          } else if (
+            window.matchMedia &&
+            window.matchMedia("(prefers-color-scheme: light)").matches
+          ) {
+            theme = "light";
+          }
+        } catch (_) {
+          /* localStorage unavailable — fall back to dark default */
+        }
+        document.documentElement.setAttribute("data-theme", theme);
+      })();
+    </script>
+    <!-- Top Bar -->
+    <div id="topbar">
+      <a class="topbar-left" id="topbar-home" href="/">
+        <div class="topbar-logo">
+          <svg
+            width="16"
+            height="18"
+            viewBox="0 0 16 18"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.9873 14.1348C10.8273 14.1348 11.462 14.3911 11.6113 14.8604C11.8447 15.6051 10.7691 16.609 9.20801 17.1016C7.64706 17.5964 6.1908 17.3912 5.95508 16.6465C5.7363 15.9482 6.6685 15.0218 8.07227 14.5029L8.3584 14.4023C8.93466 14.2203 9.49501 14.1348 9.9873 14.1348ZM2.23828 9.9248C2.99193 9.9248 3.82268 10.226 4.52734 10.8213C5.85738 11.9442 6.23288 13.6886 5.36719 14.7158C4.50142 15.7428 2.71861 15.6629 1.38867 14.54C0.100568 13.4522 -0.291878 11.7823 0.47168 10.7451L0.551758 10.6465C0.957761 10.1634 1.5687 9.92482 2.23828 9.9248ZM15.1748 9.47949C15.2096 9.4795 15.2397 9.48415 15.2676 9.49805C15.6409 9.67081 15.4174 10.9618 14.7617 12.3789C14.1085 13.7956 13.2732 14.8041 12.8975 14.6318C12.5218 14.4591 12.7481 13.168 13.4014 11.751C14.0057 10.4413 14.7665 9.47949 15.1748 9.47949ZM3.42578 2.46387C3.9998 2.46387 4.55096 2.64366 4.9873 3.01953C6.10236 3.97675 6.07202 5.84169 4.92188 7.18164C3.76917 8.52404 1.93275 8.83452 0.817383 7.875C-0.297896 6.91782 -0.267461 5.05292 0.882812 3.71289C1.58276 2.8982 2.5345 2.46396 3.42578 2.46387ZM13.1631 2.80957C13.6391 2.80957 14.4071 3.79925 14.9531 5.15332C15.5458 6.62173 15.6526 7.96206 15.1953 8.14648C14.7355 8.33003 13.8845 7.29114 13.292 5.82324C12.6993 4.35719 12.5892 3.01463 13.0488 2.83008C13.0861 2.8161 13.1235 2.8096 13.1631 2.80957ZM7.82422 0C8.30483 0 8.83683 0.0896562 9.37109 0.276367C10.9576 0.829603 11.9799 2.02888 11.6582 2.95801C11.3362 3.88718 9.78886 4.19295 8.20215 3.63965C6.61582 3.08633 5.5943 1.88706 5.91602 0.958008C6.12834 0.341726 6.87931 6.04412e-05 7.82422 0Z"
+              fill="#ffffff"
+            />
+          </svg>
         </div>
-
-        <!-- QR Pairing Modal -->
-        <div class="auth-modal-backdrop" id="auth-modal-backdrop">
-            <div class="auth-modal">
-                <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
-                <p class="auth-modal-reason" id="auth-modal-reason" hidden></p>
-                <p id="auth-modal-hint">Scan with Polkadot Mobile to connect</p>
-                <div class="auth-modal-qr" id="auth-modal-qr">
-                    <div class="spinner"></div>
-                </div>
-                <button class="auth-modal-close" id="auth-modal-close">
-                    Cancel
-                </button>
-            </div>
+        <span class="topbar-brand">Polkadot</span>
+        <span class="topbar-beta">Beta</span>
+      </a>
+      <div class="topbar-url" id="topbar-url"></div>
+      <div class="topbar-right">
+        <button
+          id="auth-button"
+          class="topbar-btn"
+          title="Login with Polkadot Mobile"
+          disabled
+        >
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+            <circle cx="12" cy="7" r="4" />
+          </svg>
+        </button>
+        <button
+          id="chains-button"
+          class="topbar-btn topbar-chains-btn"
+          title="Network"
+          aria-expanded="false"
+          aria-controls="chains-popover"
+        >
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="M2 12h20" />
+            <path
+              d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
+            />
+          </svg>
+        </button>
+        <div class="more-popover chains-popover" id="chains-popover"></div>
+        <button id="permissions-button" class="topbar-btn" title="Permissions">
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+          </svg>
+        </button>
+        <button
+          id="theme-toggle"
+          class="topbar-btn"
+          title="Toggle light/dark theme"
+        >
+          <svg
+            id="theme-icon-sun"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="12" cy="12" r="5" />
+            <line x1="12" y1="1" x2="12" y2="3" />
+            <line x1="12" y1="21" x2="12" y2="23" />
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+            <line x1="1" y1="12" x2="3" y2="12" />
+            <line x1="21" y1="12" x2="23" y2="12" />
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+          </svg>
+          <svg
+            id="theme-icon-moon"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+          </svg>
+        </button>
+        <button
+          id="more-button"
+          class="topbar-btn topbar-more-btn"
+          title="More"
+          aria-expanded="false"
+          aria-controls="more-popover"
+        >
+          <span class="hamburger" aria-hidden="true">
+            <span class="hamburger-bar"></span>
+            <span class="hamburger-bar"></span>
+            <span class="hamburger-bar"></span>
+          </span>
+        </button>
+        <div class="more-popover" id="more-popover">
+          <button class="more-row" data-target="permissions-button">
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+            </svg>
+            <span>Permissions</span>
+          </button>
+          <button class="more-row" data-target="theme-toggle">
+            <svg
+              class="more-row-icon-sun"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="12" cy="12" r="5" />
+              <line x1="12" y1="1" x2="12" y2="3" />
+              <line x1="12" y1="21" x2="12" y2="23" />
+              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+              <line x1="1" y1="12" x2="3" y2="12" />
+              <line x1="21" y1="12" x2="23" y2="12" />
+              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+            </svg>
+            <svg
+              class="more-row-icon-moon"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+            </svg>
+            <span>Theme</span>
+          </button>
+          <button class="more-row" data-target="mode-button">
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="12" cy="12" r="3" />
+              <path
+                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
+              />
+            </svg>
+            <span>Settings</span>
+          </button>
         </div>
+        <button id="mode-button" class="topbar-btn" title="Settings">
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="12" cy="12" r="3" />
+            <path
+              d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
 
-        <!-- User Popover -->
-        <div class="user-popover" id="user-popover">
-            <div class="user-popover-name">
-                <div class="label">Welcome back</div>
-                <div class="name" id="user-popover-username"></div>
-            </div>
-            <div class="user-popover-divider"></div>
-            <button
-                class="user-popover-disconnect"
-                id="user-popover-disconnect"
-            >
-                <svg
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                >
-                    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
-                    <polyline points="16 17 21 12 16 7" />
-                    <line x1="21" y1="12" x2="9" y2="12" />
-                </svg>
-                Log out
-            </button>
+    <!-- QR Pairing Modal -->
+    <div class="auth-modal-backdrop" id="auth-modal-backdrop">
+      <div class="auth-modal">
+        <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
+        <p class="auth-modal-reason" id="auth-modal-reason" hidden></p>
+        <p id="auth-modal-hint">Scan with Polkadot Mobile to connect</p>
+        <div class="auth-modal-qr" id="auth-modal-qr">
+          <div class="spinner"></div>
         </div>
+        <button class="auth-modal-close" id="auth-modal-close">Cancel</button>
+      </div>
+    </div>
 
-        <!-- Mode Popover + backdrop (backdrop blocks clicks under the popover
+    <!-- User Popover -->
+    <div class="user-popover" id="user-popover">
+      <div class="user-popover-name">
+        <div class="label">Welcome back</div>
+        <div class="name" id="user-popover-username"></div>
+      </div>
+      <div class="user-popover-divider"></div>
+      <button class="user-popover-disconnect" id="user-popover-disconnect">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+          <polyline points="16 17 21 12 16 7" />
+          <line x1="21" y1="12" x2="9" y2="12" />
+        </svg>
+        Log out
+      </button>
+    </div>
+
+    <!-- Mode Popover + backdrop (backdrop blocks clicks under the popover
              and dismisses the popover when clicked) -->
-        <div class="mode-popover-backdrop" id="mode-popover-backdrop"></div>
-        <div class="mode-popover" id="mode-popover">
-            <div class="mode-popover-content" id="mode-popover-content"></div>
-        </div>
+    <div class="mode-popover-backdrop" id="mode-popover-backdrop"></div>
+    <div class="mode-popover" id="mode-popover">
+      <div class="mode-popover-content" id="mode-popover-content"></div>
+    </div>
 
-        <!-- Permissions Popover + backdrop (same pattern as settings menu:
+    <!-- Permissions Popover + backdrop (same pattern as settings menu:
              blocks clicks under the popover + dismisses it when clicked) -->
-        <div class="permissions-popover-backdrop" id="permissions-popover-backdrop"></div>
-        <div class="permissions-popover" id="permissions-popover">
-            <div class="permissions-popover-header">Permissions</div>
-            <div class="permissions-popover-list" id="permissions-popover-list"></div>
-        </div>
+    <div
+      class="permissions-popover-backdrop"
+      id="permissions-popover-backdrop"
+    ></div>
+    <div class="permissions-popover" id="permissions-popover">
+      <div class="permissions-popover-header">Permissions</div>
+      <div class="permissions-popover-list" id="permissions-popover-list"></div>
+    </div>
 
-        <!-- App Content -->
-        <div id="app">
-            <div class="loading">
-                <div class="loading-logo" id="loading-logo">
-                    <svg width="52" height="52" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path class="loading-petal" d="M31.0155 57.7181C14.6547 76.7768 14.2233 103.306 30.0862 116.92C45.9492 130.566 72.0667 126.15 88.4607 107.058C104.821 87.9995 105.253 61.4701 89.3899 47.8567C83.1841 42.511 75.3522 39.9543 67.1884 39.9543C54.5113 39.9543 40.9713 46.1302 31.0155 57.7181Z"/>
-                        <path class="loading-petal" d="M26.2694 156.332C13.9574 170.941 19.3003 195.744 38.2164 211.715C57.1326 227.686 82.4868 228.815 94.7989 214.205C107.111 199.596 101.768 174.793 82.8518 158.822C72.8296 150.355 61.0153 146.072 50.2962 146.072C40.7718 146.072 32.077 149.459 26.3026 156.332"/>
-                        <path class="loading-petal" d="M137.343 209.789C115.142 216.795 99.8429 231.072 103.161 241.664C106.513 252.256 127.221 255.178 149.423 248.139C171.625 241.133 186.923 226.856 183.605 216.264C181.481 209.59 172.454 205.938 160.507 205.938C153.505 205.938 145.54 207.166 137.343 209.756"/>
-                        <path class="loading-petal" d="M102.597 18.5365C98.0176 31.7514 112.553 48.8179 135.12 56.6871C157.686 64.5562 179.689 60.2066 184.268 46.9917C188.848 33.7768 174.313 16.7103 151.746 8.84109C144.146 6.18482 136.58 4.9231 129.744 4.9231C116.303 4.9231 105.617 9.77078 102.597 18.5365Z"/>
-                        <path class="loading-petal" d="M204.048 45.169C197.51 47.7921 199.07 66.884 207.499 87.7357C215.928 108.621 228.041 123.396 234.579 120.773C241.083 118.15 239.557 99.0912 231.128 78.2063C223.362 58.9484 212.444 44.8702 205.674 44.8702C205.11 44.8702 204.579 44.9698 204.048 45.169Z"/>
-                        <path class="loading-petal" d="M209.058 172.038C199.766 192.192 196.547 210.553 201.89 213.01C207.233 215.468 219.114 201.124 228.406 180.969C237.731 160.815 240.917 142.453 235.607 139.996C235.209 139.797 234.778 139.731 234.28 139.731C228.472 139.731 217.654 153.411 209.058 172.038Z"/>
-                    </svg>
+    <!-- App Content -->
+    <div id="app">
+      <div class="loading">
+        <div class="loading-logo" id="loading-logo">
+          <svg
+            width="52"
+            height="52"
+            viewBox="0 0 256 256"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              class="loading-petal"
+              d="M31.0155 57.7181C14.6547 76.7768 14.2233 103.306 30.0862 116.92C45.9492 130.566 72.0667 126.15 88.4607 107.058C104.821 87.9995 105.253 61.4701 89.3899 47.8567C83.1841 42.511 75.3522 39.9543 67.1884 39.9543C54.5113 39.9543 40.9713 46.1302 31.0155 57.7181Z"
+            />
+            <path
+              class="loading-petal"
+              d="M26.2694 156.332C13.9574 170.941 19.3003 195.744 38.2164 211.715C57.1326 227.686 82.4868 228.815 94.7989 214.205C107.111 199.596 101.768 174.793 82.8518 158.822C72.8296 150.355 61.0153 146.072 50.2962 146.072C40.7718 146.072 32.077 149.459 26.3026 156.332"
+            />
+            <path
+              class="loading-petal"
+              d="M137.343 209.789C115.142 216.795 99.8429 231.072 103.161 241.664C106.513 252.256 127.221 255.178 149.423 248.139C171.625 241.133 186.923 226.856 183.605 216.264C181.481 209.59 172.454 205.938 160.507 205.938C153.505 205.938 145.54 207.166 137.343 209.756"
+            />
+            <path
+              class="loading-petal"
+              d="M102.597 18.5365C98.0176 31.7514 112.553 48.8179 135.12 56.6871C157.686 64.5562 179.689 60.2066 184.268 46.9917C188.848 33.7768 174.313 16.7103 151.746 8.84109C144.146 6.18482 136.58 4.9231 129.744 4.9231C116.303 4.9231 105.617 9.77078 102.597 18.5365Z"
+            />
+            <path
+              class="loading-petal"
+              d="M204.048 45.169C197.51 47.7921 199.07 66.884 207.499 87.7357C215.928 108.621 228.041 123.396 234.579 120.773C241.083 118.15 239.557 99.0912 231.128 78.2063C223.362 58.9484 212.444 44.8702 205.674 44.8702C205.11 44.8702 204.579 44.9698 204.048 45.169Z"
+            />
+            <path
+              class="loading-petal"
+              d="M209.058 172.038C199.766 192.192 196.547 210.553 201.89 213.01C207.233 215.468 219.114 201.124 228.406 180.969C237.731 160.815 240.917 142.453 235.607 139.996C235.209 139.797 234.778 139.731 234.28 139.731C228.472 139.731 217.654 153.411 209.058 172.038Z"
+            />
+          </svg>
+        </div>
+        <div class="loading-progress" id="loading-progress">
+          <div class="loading-progress-bar">
+            <div class="loading-progress-fill" id="loading-progress-fill"></div>
+          </div>
+          <span class="loading-progress-pct" id="loading-progress-pct">0%</span>
+        </div>
+        <div class="loading-text" id="loading-text">
+          <!-- Held back until the load has run long enough to be
+                         worth explaining. A fast load shows only the bar. -->
+          <div class="loading-status" id="loading-status">
+            <p class="loading-status-heading">Status</p>
+            <p id="status" aria-live="polite">Reaching out</p>
+            <details class="loading-details" id="loading-details">
+              <summary class="loading-details-summary">Details</summary>
+              <dl class="loading-metrics">
+                <div class="loading-metric">
+                  <dt>Peers</dt>
+                  <dd id="metric-peers">0</dd>
                 </div>
-                <div class="loading-progress" id="loading-progress">
-                    <div class="loading-progress-bar">
-                        <div class="loading-progress-fill" id="loading-progress-fill"></div>
-                    </div>
-                    <span class="loading-progress-pct" id="loading-progress-pct">0%</span>
+                <div class="loading-metric">
+                  <dt>Speed</dt>
+                  <dd id="metric-speed">0 MB/s</dd>
                 </div>
-                <div class="loading-text" id="loading-text">
-                    <p id="status" aria-live="polite">Reaching out</p>
-                    <p class="loading-detail" id="loading-detail"></p>
-                    <p class="loading-announcer" id="loading-announcer" aria-live="polite"></p>
-                    <p class="loading-hint" id="loading-hint"></p>
+                <div class="loading-metric">
+                  <dt>Completed</dt>
+                  <dd id="metric-completed">0 %</dd>
                 </div>
-            </div>
+              </dl>
+            </details>
+          </div>
+          <p class="loading-hint" id="loading-hint"></p>
         </div>
-        <script>
-            // Logo spinner — rAF-driven for smooth petal cycling
-            (function(){
-                var petals = document.querySelectorAll('.loading-petal');
-                if (!petals.length) return;
-                var count = petals.length;
-                var cycle = 1400;
-                var start = null;
-                var raf;
-                function tick(ts) {
-                    if (!start) start = ts;
-                    var p = ((ts - start) % cycle) / cycle;
-                    for (var i = 0; i < count; i++) {
-                        var dist = p - i / count;
-                        if (dist < 0) dist += 1;
-                        var b = Math.max(0.15, Math.pow(Math.max(0, 1 - dist * 2.5), 2));
-                        petals[i].style.opacity = b;
-                        petals[i].style.transform = 'scale(' + (0.92 + 0.08 * b) + ')';
-                    }
-                    raf = requestAnimationFrame(tick);
-                }
-                raf = requestAnimationFrame(tick);
-                // Stop when loading is replaced
-                window.__stopLoadingSpinner = function() { cancelAnimationFrame(raf); };
-            })();
-        </script>
-        <script type="module" src="/src/main.ts"></script>
-    </body>
+      </div>
+    </div>
+    <script>
+      // Logo spinner — rAF-driven for smooth petal cycling
+      (function () {
+        var petals = document.querySelectorAll(".loading-petal");
+        if (!petals.length) return;
+        var count = petals.length;
+        var cycle = 1400;
+        var start = null;
+        var raf;
+        function tick(ts) {
+          if (!start) start = ts;
+          var p = ((ts - start) % cycle) / cycle;
+          for (var i = 0; i < count; i++) {
+            var dist = p - i / count;
+            if (dist < 0) dist += 1;
+            var b = Math.max(0.15, Math.pow(Math.max(0, 1 - dist * 2.5), 2));
+            petals[i].style.opacity = b;
+            petals[i].style.transform = "scale(" + (0.92 + 0.08 * b) + ")";
+          }
+          raf = requestAnimationFrame(tick);
+        }
+        raf = requestAnimationFrame(tick);
+        // Stop when loading is replaced
+        window.__stopLoadingSpinner = function () {
+          cancelAnimationFrame(raf);
+        };
+      })();
+    </script>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
 </html>
diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index 8768ca22..44d48481 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -32,17 +32,22 @@ import {
   initPhases,
   advancePhase,
   nudgePhaseProgress,
-  setStatusDetail,
+  setLoadingMetrics,
   stopStatusTick,
   listenForSandboxStatus,
   showGatewayEscape,
 } from "@dotli/ui/ui";
 import type { LoadingPhase } from "@dotli/ui/ui";
-import { initTopBar, wipeOriginState } from "@dotli/ui/topbar";
+import {
+  initTopBar,
+  setChainsButtonVisible,
+  wipeOriginState,
+} from "@dotli/ui/topbar";
 import { createBlockingModalCoordinator } from "@dotli/ui/blocking-modal-queue";
 import {
   bitswapGet,
   listenForSandboxBitswap,
+  onContentProgress,
 } from "@dotli/ui/bulletin-bitswap";
 import {
   ensureProtocolFrame,
@@ -1209,102 +1214,80 @@ async function main(): Promise<void> {
   // lives in the SharedWorker, which does not forward lifecycle or health
   // yet, and the gateway has no smoldot at all.
   if (chainBackend === "smoldot-direct") {
-    let peerDetail = "";
-    // Once the Asset Hub bootstrap completes the sync detail is over. A
-    // peer count still in flight, or a late stall on the relay, must not
-    // resurrect it under "Resolving".
-    let syncDetailDone = false;
-    // The relay warps first and the Asset Hub bootstraps on top of it, so
-    // the chain the user is waiting on changes partway through the step.
-    // Peer counts follow that, which is what keeps a number on screen for
-    // the whole step instead of the last a hundred milliseconds of it.
-    let waitingOn: "relay" | "asset-hub" = "relay";
-    const setPeerDetail = (count: number): void => {
-      const first = peerDetail === "";
-      peerDetail = `${String(count)} ${count === 1 ? "peer" : "peers"}`;
-      // Announce that peers were found, once. Every later tick is a silent
-      // visual update, so the count stays readable without queueing an
-      // announcement per second.
-      setStatusDetail(peerDetail, { announce: first });
-    };
+    // The load walks three chains in turn: the relay warps, the Asset Hub
+    // bootstraps on top of it, then Bulletin comes up to serve the content
+    // over bitswap. Only the one being waited on drives the peer count, so
+    // the figure always describes what the user is actually waiting for.
+    let waitingOn: "relay" | "asset-hub" | "bulletin" = "relay";
     onProtocolChainSync((event) => {
       log.debug(`[dot.li sync] ${event.chain} ${event.syncKind}`);
-      if (syncDetailDone) {
-        return;
-      }
       switch (event.syncKind) {
         case "connecting":
-          if (peerDetail === "") {
-            setStatusDetail("connecting to peers");
+          // A chain that just started has no peers yet, and saying so beats
+          // leaving the previous chain's figure on screen.
+          if (event.chain === waitingOn) {
+            setLoadingMetrics({ peers: 0 });
           }
           return;
         case "peers":
           if (event.chain === waitingOn) {
-            setPeerDetail(event.peers ?? 0);
+            setLoadingMetrics({ peers: event.peers ?? 0 });
           }
           return;
+        case "stalled":
+        case "recovered":
+          // The peer count already tells this story: a stall is a chain
+          // sitting at zero peers, and recovery is the number climbing.
+          return;
         case "warpSyncProgress": {
           // The one true percentage smoldot offers. Only relays warp, and
           // only when they have real distance to cover.
           const { at, target } = event;
           if (
-            at === undefined ||
-            target === undefined ||
-            target <= 0 ||
-            at > target
+            at !== undefined &&
+            target !== undefined &&
+            target > 0 &&
+            at <= target
           ) {
-            return;
+            nudgePhaseProgress(at / target);
           }
-          setStatusDetail(
-            `block ${at.toLocaleString()} of ${target.toLocaleString()}`,
-          );
-          nudgePhaseProgress(at / target);
           return;
         }
-        case "warpSyncFinished":
-          // Fills the second of silence between the relay finishing and the
-          // Asset Hub finding its first peer.
-          waitingOn = "asset-hub";
-          peerDetail = "";
-          setStatusDetail("relay ready, reaching Asset Hub");
-          return;
-        case "stalled":
-          // No trailing ellipsis: the headline already ends in one, and the
-          // spinner and bar sheen carry "in progress". Lowercase and
-          // terminal-punctuation-free to match the "2 peers" readout this
-          // line alternates with.
-          setStatusDetail(
-            event.reason === "noPeers"
-              ? "searching for peers"
-              : "syncing, no progress yet",
-            { announce: true },
-          );
-          return;
-        case "recovered":
-          setStatusDetail(peerDetail, { announce: true });
-          return;
         case "firstPeer":
           if (event.chain === "asset-hub") {
             advancePhase(2);
           }
           return;
+        case "warpSyncFinished":
         case "bootstrapComplete":
+          // Hand the count to the next chain in the sequence and reset it, so
+          // a finished chain's figure never lingers under the next one.
           if (event.chain === "relay") {
-            // A relay short enough to skip warp never sends
-            // `warpSyncFinished`, so hand over here too.
             waitingOn = "asset-hub";
-            peerDetail = "";
-          } else {
+            setLoadingMetrics({ peers: 0 });
+          } else if (event.chain === "asset-hub") {
             advancePhase(3);
-            // The count is meaningless once sync is done. Clear it rather
-            // than letting a stale number sit under "Resolving".
-            syncDetailDone = true;
-            peerDetail = "";
-            setStatusDetail("");
+            waitingOn = "bulletin";
+            setLoadingMetrics({ peers: 0 });
           }
           return;
       }
     });
+
+    // Every block the sandbox needs is fetched through this window, so the
+    // download reports itself: bytes so far against the total the DAG root
+    // declares.
+    onContentProgress(({ bytesFetched, totalBytes, bytesPerSecond }) => {
+      setLoadingMetrics({
+        bytesPerSecond,
+        ...(totalBytes !== null && totalBytes > 0
+          ? { completed: (bytesFetched / totalBytes) * 100 }
+          : {}),
+      });
+      if (totalBytes !== null && totalBytes > 0) {
+        nudgePhaseProgress(bytesFetched / totalBytes);
+      }
+    });
   }
 
   try {
@@ -1327,6 +1310,7 @@ async function main(): Promise<void> {
       // as `dotli.e2e.fast_path` alongside `dotli.e2e.slow_path`.
       await m.span(S.E2E_FAST, async () => {
         setShieldState(shieldState);
+        setChainsButtonVisible(true);
         const { renderAppSubdomain } = await renderChunkPromise;
         advancePhase(contentFetchPhase);
         await renderAppSubdomain(cachedCid, label);
@@ -1500,6 +1484,7 @@ async function main(): Promise<void> {
 
     setShieldState(shieldState);
 
+    setChainsButtonVisible(true);
     const { renderAppSubdomain } = await renderChunkPromise;
     advancePhase(contentFetchPhase);
     await renderAppSubdomain(cid, label);
diff --git a/apps/host/tests/functional/resolution.spec.ts b/apps/host/tests/functional/resolution.spec.ts
index d80eb991..f073fb9a 100644
--- a/apps/host/tests/functional/resolution.spec.ts
+++ b/apps/host/tests/functional/resolution.spec.ts
@@ -37,7 +37,7 @@ test.describe("Resolution across chain backends", () => {
     });
   }
 
-  test(`As a user opening ${DOMAIN}.dot, I am told how many peers the light client found while it syncs`, async ({
+  test(`As a user opening ${DOMAIN}.dot, I am shown how many peers the light client found`, async ({
     browser,
   }) => {
     // Given
@@ -46,26 +46,27 @@ test.describe("Resolution across chain backends", () => {
     });
 
     try {
-      // Record the counts as they reach the shell. On a fast bootstrap the
-      // rendered "N peers" line can appear and clear between polls, so the
-      // count itself is the reliable signal. The visible text is accepted
-      // as an alternative when the sync window is long enough to show it.
+      // Record the counts as they reach the shell. The rendered figure can
+      // change faster than a poll can catch, so the envelope is the reliable
+      // signal and the visible readout is accepted as an alternative.
       await page.addInitScript(() => {
         const seen: unknown[] = [];
         (
-          window as unknown as { __dotliHealthSeen: unknown[] }
-        ).__dotliHealthSeen = seen;
+          window as unknown as { __dotliPeerCounts: unknown[] }
+        ).__dotliPeerCounts = seen;
         window.addEventListener("message", (event: MessageEvent) => {
           const data = event.data as {
             namespace?: string;
             kind?: string;
+            syncKind?: string;
             peers?: number;
           } | null;
           if (
             data !== null &&
             typeof data === "object" &&
             data.namespace === "dotli:protocol" &&
-            data.kind === "health" &&
+            data.kind === "chain-sync" &&
+            data.syncKind === "peers" &&
             typeof data.peers === "number"
           ) {
             seen.push(data);
@@ -79,13 +80,13 @@ test.describe("Resolution across chain backends", () => {
       // Then
       const sawPeers = page.waitForFunction(
         () => {
-          const seen = (window as unknown as { __dotliHealthSeen?: unknown[] })
-            .__dotliHealthSeen;
+          const seen = (window as unknown as { __dotliPeerCounts?: unknown[] })
+            .__dotliPeerCounts;
           if (seen !== undefined && seen.length > 0) {
             return true;
           }
-          return /\d+ peers?/.test(
-            document.getElementById("loading-detail")?.textContent ?? "",
+          return /[1-9]/.test(
+            document.getElementById("metric-peers")?.textContent ?? "",
           );
         },
         undefined,
diff --git a/apps/protocol/src/main.ts b/apps/protocol/src/main.ts
index ffce9c66..0c27ac88 100644
--- a/apps/protocol/src/main.ts
+++ b/apps/protocol/src/main.ts
@@ -690,12 +690,13 @@ async function initDirectMode(): Promise<void> {
   // host moves the bar on the relay and the Asset Hub, and shows a peer
   // count for the Asset Hub alone.
   smoldotMod.enableSyncReporting({
-    // The relay warps first and the Asset Hub bootstraps on top of it, so
-    // both are on the critical path the loading screen narrates. Peer
-    // counts come from both: the relay reports one about a second before
-    // the Asset Hub does, and that second is otherwise silent.
-    milestones: ["relay", "asset-hub"],
-    peerCounts: ["relay", "asset-hub"],
+    // All three chains the load waits on, in the order it waits on them.
+    // The relay warps, the Asset Hub bootstraps on top of it, and Bulletin
+    // serves the content over bitswap. Bulletin is not even created until
+    // after the content phase begins, and takes roughly another second and
+    // a half to find a peer, which used to be silent.
+    milestones: ["relay", "asset-hub", "bulletin"],
+    peerCounts: ["relay", "asset-hub", "bulletin"],
   });
 
   // On a smoldot panic, broadcast a fatal envelope to the parent. Direct
diff --git a/packages/ui/src/bulletin-bitswap.ts b/packages/ui/src/bulletin-bitswap.ts
index 143d8e0b..ac3a52fa 100644
--- a/packages/ui/src/bulletin-bitswap.ts
+++ b/packages/ui/src/bulletin-bitswap.ts
@@ -24,6 +24,108 @@ const ERR_FAIL = -32810;
 const ERR_FAIL_RETRY = -32811;
 const ERR_FAIL_BACKOFF = -32812;
 
+/**
+ * Byte accounting for the content download.
+ *
+ * Every block the sandbox needs is fetched here, so this is the one place
+ * that sees the whole transfer. The first dag-pb block is the DAG root, and
+ * its links carry `Tsize`, the cumulative size of each subtree. Summing them
+ * gives the total up front, which turns the download into a real percentage
+ * instead of a timer.
+ */
+export interface ContentProgress {
+  bytesFetched: number;
+  totalBytes: number | null;
+  bytesPerSecond: number;
+}
+
+type ProgressCallback = (progress: ContentProgress) => void;
+let progressCallback: ProgressCallback | null = null;
+let bytesFetched = 0;
+let totalBytes: number | null = null;
+let firstBlockAt = 0;
+
+export function onContentProgress(cb: ProgressCallback): void {
+  progressCallback = cb;
+}
+
+function readDagTotal(bytes: Uint8Array): number | null {
+  try {
+    // dag-pb links are field 2, each an embedded message carrying Hash (1),
+    // Name (2), and Tsize (3) as a varint. Reading Tsize directly keeps the
+    // 40kB `@ipld/dag-pb` decoder out of the eager host bundle.
+    let i = 0;
+    let total = 0;
+    let sawLink = false;
+    const readVarint = (): number => {
+      let result = 0;
+      let shift = 0;
+      while (i < bytes.length) {
+        const b = bytes[i];
+        i += 1;
+        result += (b & 0x7f) * 2 ** shift;
+        if ((b & 0x80) === 0) {
+          break;
+        }
+        shift += 7;
+      }
+      return result;
+    };
+    while (i < bytes.length) {
+      const key = readVarint();
+      const field = key >> 3;
+      const wire = key & 0x7;
+      if (wire !== 2) {
+        return null;
+      }
+      const len = readVarint();
+      if (field === 2) {
+        // A PBLink submessage. Walk it for Tsize (field 3, varint).
+        const end = i + len;
+        while (i < end) {
+          const lk = readVarint();
+          const lf = lk >> 3;
+          const lw = lk & 0x7;
+          if (lw === 0) {
+            const v = readVarint();
+            if (lf === 3) {
+              total += v;
+              sawLink = true;
+            }
+          } else if (lw === 2) {
+            // Read the length first: `i += readVarint()` would capture the
+            // old `i` before the call advanced it past the varint itself.
+            const skip = readVarint();
+            i += skip;
+          } else {
+            return null;
+          }
+        }
+        i = end;
+      } else {
+        i += len;
+      }
+    }
+    return sawLink ? total : null;
+  } catch {
+    return null;
+  }
+}
+
+function noteBlock(bytes: Uint8Array): void {
+  if (firstBlockAt === 0) {
+    firstBlockAt = performance.now();
+    totalBytes = readDagTotal(bytes);
+  }
+  bytesFetched += bytes.length;
+  const elapsed = performance.now() - firstBlockAt;
+  progressCallback?.({
+    bytesFetched,
+    totalBytes,
+    bytesPerSecond: elapsed > 0 ? (bytesFetched / elapsed) * 1000 : 0,
+  });
+}
+
 const PER_CALL_TIMEOUT_MS = 60_000;
 const TOTAL_BUDGET_MS = 180_000;
 const BACKOFF_BASE_MS = 500;
@@ -229,6 +331,7 @@ export function listenForSandboxBitswap(): void {
     }
     void bitswapGet(data.cid)
       .then((bytes) => {
+        noteBlock(bytes);
         const reply: BitswapResultOk = {
           type: "dotli:bitswap-result",
           id: data.id,
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index 161c845b..99b6ddec 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -134,12 +134,9 @@ body {
   text-align: right;
 }
 
-/* Text block: phase label, live detail, and slow-step hint.
-   The gap is the tight one. `#loading-detail` is a readout of the headline
-   above it and has to sit close enough to read as one unit. `.loading-hint`
-   is a separate, occasional warning and buys its 12px break back with a
-   margin. Three rows spaced equally would read as three peers, which they
-   are not. */
+/* Text block: the status block and the slow-step hint. Both are
+   conditional, so the block collapses to nothing on a fast load and the
+   bar sits alone. */
 .loading-text {
   display: flex;
   flex-direction: column;
@@ -162,31 +159,68 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-/* Live sync readout under the headline.
-   Ranked below `#status` by size, weight, and family rather than by tone.
-   It shares the headline's opacity because the stall copy it carries
-   ("searching for peers") is the most reassuring message on the screen, and
-   it cannot be the faintest thing on it. `min-height` reserves the row so
-   the block does not jump when the detail appears mid-sync and is cleared
-   on bootstrap. */
-.loading-detail {
+/* Status block: held back until the load is slow enough to explain itself.
+   Reserved height is not needed because nothing sits below it but the hint,
+   which is itself conditional. */
+.loading-status {
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  pointer-events: none;
+  width: 100%;
+}
+.loading-status.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+.loading-status-heading {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  /* 6.12:1 */
+  color: #8f8f8f;
+  margin-bottom: 4px;
+}
+.loading-details {
+  margin-top: 12px;
+  text-align: left;
+  display: inline-block;
+  min-width: 190px;
+}
+.loading-details-summary {
+  font-size: 11px;
+  /* 6.12:1 */
+  color: #8f8f8f;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+.loading-details-summary::-webkit-details-marker {
+  display: none;
+}
+.loading-details-summary::after {
+  content: " >";
+}
+.loading-details[open] .loading-details-summary::after {
+  content: " v";
+}
+.loading-metrics {
+  margin-top: 8px;
   font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
   font-size: 11px;
+}
+.loading-metric {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 2px 0;
+}
+.loading-metric dt {
+  /* 6.12:1 */
+  color: #8f8f8f;
+}
+.loading-metric dd {
   /* 7.85:1 */
   color: #a3a3a3;
-  text-align: center;
-  min-height: 1.3em;
-}
-/* Screen-reader-only slot for one-shot loading announcements (stall and
-   recovery copy). The same text shows visually in .loading-detail, which
-   is aria-hidden to keep its per-second count out of the live queue. */
-.loading-announcer {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
 }
 /* Slow-step hint (shown below status when a step exceeds its threshold) */
 .loading-hint {
@@ -387,3 +421,16 @@ body {
 .error-page-domain-tld {
   color: rgba(250, 250, 250, 0.55);
 }
+
+/* Network button: appears once a product is on screen, so the loading view
+   stays as bare as the bar it shows. */
+.topbar-chains-btn {
+  display: none;
+}
+.topbar-chains-btn.visible {
+  display: inline-flex;
+}
+.chains-popover {
+  min-width: 260px;
+  padding: 10px 12px;
+}
diff --git a/packages/ui/src/styles/themes.css b/packages/ui/src/styles/themes.css
index 9f810bd1..a5d6e230 100644
--- a/packages/ui/src/styles/themes.css
+++ b/packages/ui/src/styles/themes.css
@@ -245,10 +245,14 @@
      own secondary line. */
   color: #6b6b6b;
 }
-/* Same flip as `#status`. The detail line sits between the headline and the
-   percentage, because it carries the stall copy, which is the one message
-   that has to survive a light background. 7.17:1. */
-[data-theme="light"] .loading-detail {
+[data-theme="light"] .loading-status-heading,
+[data-theme="light"] .loading-details-summary,
+[data-theme="light"] .loading-metric dt {
+  /* 4.89:1 */
+  color: #6b6b6b;
+}
+[data-theme="light"] .loading-metric dd {
+  /* 7.17:1 */
   color: #525252;
 }
 [data-theme="light"] .spinner {
diff --git a/packages/ui/src/topbar.ts b/packages/ui/src/topbar.ts
index c3c4e3a6..50a0aac0 100644
--- a/packages/ui/src/topbar.ts
+++ b/packages/ui/src/topbar.ts
@@ -275,6 +275,7 @@ export function initTopBar(
 
   // Mode toggle (P2P / Centralized)
   initModeToggle();
+  initChainsPopover();
 
   // Permissions
   initPermissions();
@@ -949,6 +950,103 @@ function createPermissionDropdown(
   return wrap;
 }
 
+/**
+ * Network popover: what each chain is doing right now.
+ *
+ * Block heights are queried fresh on every open rather than polled, because
+ * the popover is the only thing that reads them and a background poll would
+ * keep four chains awake for a panel nobody has looked at.
+ */
+function renderChainsPopover(parent: HTMLElement): void {
+  parent.replaceChildren();
+  const backend = getBackend();
+  appendSectionHeader(parent, "Light client");
+  renderInfoRow(parent, "smoldot", buildSmoldotVersionLabel());
+  renderInfoRow(
+    parent,
+    "Status",
+    backend === "rpc-gateway" ? "not running (trusted provider)" : "running",
+  );
+
+  if (backend === "rpc-gateway") {
+    return;
+  }
+
+  const cfg = getActiveServicesConfig();
+  const chains: [string, string][] = [
+    ["Relay Chain", cfg.relay.genesis],
+    ["Asset Hub", cfg.assethub.genesis],
+    ["Bulletin", cfg.bulletin.genesis],
+    ["People Chain", cfg.people.genesis],
+  ];
+
+  appendSectionHeader(parent, "Latest finalized block");
+  for (const [label, genesis] of chains) {
+    const row = renderInfoRow(parent, label, "…");
+    void queryFinalizedBlock(genesis).then((n) => {
+      row.update(formatBlock(n));
+    });
+  }
+
+  appendSectionHeader(parent, "Peers");
+  for (const [label, genesis] of chains) {
+    const row = renderInfoRow(parent, label, "…");
+    void queryPeerCount(genesis).then((n) => {
+      row.update(n === null ? "n/a" : String(n));
+    });
+  }
+}
+
+/**
+ * Reveal the network button. The host calls this once a product is on
+ * screen, so the icon appears with the app rather than during the load.
+ */
+export function setChainsButtonVisible(visible: boolean): void {
+  document
+    .getElementById("chains-button")
+    ?.classList.toggle("visible", visible);
+}
+
+function initChainsPopover(): void {
+  const button = document.getElementById("chains-button");
+  const popover = document.getElementById("chains-popover");
+  if (button === null || popover === null) {
+    return;
+  }
+  button.setAttribute("aria-haspopup", "dialog");
+  popover.setAttribute("role", "dialog");
+  popover.setAttribute("aria-label", "Network");
+
+  const close = (): void => {
+    popover.classList.remove("open");
+    button.setAttribute("aria-expanded", "false");
+  };
+  button.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (popover.classList.contains("open")) {
+      close();
+      return;
+    }
+    renderChainsPopover(popover);
+    popover.classList.add("open");
+    button.setAttribute("aria-expanded", "true");
+  });
+  document.addEventListener("click", (e) => {
+    if (
+      popover.classList.contains("open") &&
+      !popover.contains(e.target as Node) &&
+      e.target !== button
+    ) {
+      close();
+    }
+  });
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      close();
+    }
+  });
+}
+
 function initModeToggle(): void {
   modeButton = getElement("mode-button");
   modePopover = getElement("mode-popover");
@@ -1647,50 +1745,6 @@ function renderDiagnostics(parent: HTMLElement): void {
     );
   }
 
-  // Version is static and cheap. Block numbers are async so the rows start
-  // with an ellipsis placeholder and get swapped in when `chainConnect`
-  // rounds-trip back with a finalized-block header. When the user is on
-  // the RPC chain backend, smoldot isn't running, so hide the per-chain
-  // block rows entirely (the endpoints already appear under Chain) and
-  // keep only the smoldot version so the dependency is still visible.
-  const smoldotInfo: SmoldotInfo = {
-    version: buildSmoldotVersionLabel(),
-    blocks: { relay: "…", assetHub: "…", people: "…" },
-  };
-  const smoldotActive = getBackend() !== "rpc-gateway";
-  appendSectionHeader(parent, "@smoldot");
-  renderInfoRow(parent, "smoldot", smoldotInfo.version);
-  if (smoldotActive) {
-    const relayRow = renderInfoRow(parent, "Relay Chain", "…");
-    const assetHubRow = renderInfoRow(parent, "Asset Hub", "…");
-    const peopleRow = renderInfoRow(parent, "People Chain", "…");
-
-    // Fire all queries. They update their own rows and the shared snapshot
-    // (so the "Share diagnostic" button captures whatever resolved in time).
-    const cfg = getActiveServicesConfig();
-    void queryFinalizedBlock(cfg.relay.genesis).then((n) => {
-      const v = formatBlock(n);
-      relayRow.update(v);
-      smoldotInfo.blocks.relay = v;
-    });
-    void queryFinalizedBlock(cfg.assethub.genesis).then((n) => {
-      const v = formatBlock(n);
-      assetHubRow.update(v);
-      smoldotInfo.blocks.assetHub = v;
-    });
-    void queryFinalizedBlock(cfg.people.genesis).then((n) => {
-      const v = formatBlock(n);
-      peopleRow.update(v);
-      smoldotInfo.blocks.people = v;
-    });
-  } else {
-    // Keep the snapshot tagged as n/a so the Share-diagnostic report is
-    // coherent: smoldot wasn't consulted, don't claim a block height.
-    smoldotInfo.blocks.relay = "n/a";
-    smoldotInfo.blocks.assetHub = "n/a";
-    smoldotInfo.blocks.people = "n/a";
-  }
-
   // The unscoped `polkadot-api` package lives in the same visual section as
   // `@polkadot-api/*`. Same ecosystem, same release cadence, users expect
   // to see it with its siblings rather than at the top of the popover.
@@ -1734,6 +1788,10 @@ function renderDiagnostics(parent: HTMLElement): void {
     "Open a new issue on paritytech/dotli pre-filled with these diagnostics";
   shareBtn.addEventListener("click", () => {
     void (async () => {
+      // Block heights now live in the Network popover, so nothing has them
+      // cached. Query them here, where a report is actually being made,
+      // instead of keeping four chains awake for a panel nobody opened.
+      const smoldotInfo = await collectSmoldotInfo();
       const report = await formatDiagnosticsReport(
         base,
         smoldotInfo,
@@ -1914,6 +1972,29 @@ function backendLabel(b: Backend): string {
   }
 }
 
+/** Gather the smoldot readouts a diagnostic report quotes. */
+async function collectSmoldotInfo(): Promise<SmoldotInfo> {
+  const info: SmoldotInfo = {
+    version: buildSmoldotVersionLabel(),
+    blocks: { relay: "n/a", assetHub: "n/a", people: "n/a" },
+  };
+  if (getBackend() === "rpc-gateway") {
+    return info;
+  }
+  const cfg = getActiveServicesConfig();
+  const [relay, assetHub, people] = await Promise.all([
+    queryFinalizedBlock(cfg.relay.genesis),
+    queryFinalizedBlock(cfg.assethub.genesis),
+    queryFinalizedBlock(cfg.people.genesis),
+  ]);
+  info.blocks = {
+    relay: formatBlock(relay),
+    assetHub: formatBlock(assetHub),
+    people: formatBlock(people),
+  };
+  return info;
+}
+
 interface SmoldotInfo {
   /** Human-facing version label, e.g. "3.0.0 (c33c647)". */
   version: string;
@@ -1946,6 +2027,42 @@ function buildSmoldotVersionLabel(): string {
  * stays dynamic so opening the popover is cheap when the user doesn't care
  * about blocks.
  */
+/**
+ * Query a chain's current peer count over the same bridge as the block
+ * height. Read live on open rather than taken from the loading screen's
+ * stream, which stops sampling once a chain is up and would leave a figure
+ * that is minutes stale. Covers People too, which the loading bar never
+ * waits on and so never reports.
+ */
+async function queryPeerCount(genesisHash: string): Promise<number | null> {
+  try {
+    if (!isRemoteChainSupported(genesisHash)) {
+      return null;
+    }
+    const provider = createRemoteChainProvider(genesisHash);
+    if (provider === null) {
+      return null;
+    }
+    const papi = await import("polkadot-api");
+    const client = papi.createClient(provider);
+    try {
+      const health = await Promise.race([
+        client._request<{ peers?: number }>("system_health", []),
+        new Promise<never>((_, reject) => {
+          setTimeout(() => {
+            reject(new Error("timeout"));
+          }, 10_000);
+        }),
+      ]);
+      return typeof health.peers === "number" ? health.peers : null;
+    } finally {
+      client.destroy();
+    }
+  } catch {
+    return null;
+  }
+}
+
 async function queryFinalizedBlock(
   genesisHash: string,
 ): Promise<number | null> {
diff --git a/packages/ui/src/ui.ts b/packages/ui/src/ui.ts
index 012bb501..3c045230 100644
--- a/packages/ui/src/ui.ts
+++ b/packages/ui/src/ui.ts
@@ -47,8 +47,11 @@ let currentPhase = -1;
 // Progress bar state
 let progressFillEl: HTMLElement | null = null;
 let progressPctEl: HTMLElement | null = null;
-let statusDetailEl: HTMLElement | null = null;
-let statusAnnouncerEl: HTMLElement | null = null;
+let statusBlockEl: HTMLElement | null = null;
+let metricPeersEl: HTMLElement | null = null;
+let metricSpeedEl: HTMLElement | null = null;
+let metricCompletedEl: HTMLElement | null = null;
+let revealTimer: ReturnType<typeof setTimeout> | null = null;
 let currentProgress = 0;
 let targetProgress = 0;
 let crawlStep = 0;
@@ -103,8 +106,43 @@ export function initPhases(phaseList: LoadingPhase[]): void {
 
   progressFillEl = document.getElementById("loading-progress-fill");
   progressPctEl = document.getElementById("loading-progress-pct");
-  statusDetailEl = document.getElementById("loading-detail");
-  statusAnnouncerEl = document.getElementById("loading-announcer");
+  statusBlockEl = document.getElementById("loading-status");
+  metricPeersEl = document.getElementById("metric-peers");
+  metricSpeedEl = document.getElementById("metric-speed");
+  metricCompletedEl = document.getElementById("metric-completed");
+
+  // A load that finishes quickly should never explain itself. Only once it
+  // has run long enough to feel slow does the status block appear.
+  if (revealTimer !== null) {
+    clearTimeout(revealTimer);
+  }
+  revealTimer = setTimeout(() => {
+    statusBlockEl?.classList.add("visible");
+  }, STATUS_REVEAL_MS);
+}
+
+/** How long a load may run before it owes the user an explanation. */
+export const STATUS_REVEAL_MS = 3_000;
+
+/**
+ * Live counters under the status line. Each is written only when supplied,
+ * so a caller can update the peer count without claiming a download speed
+ * it has no reading for.
+ */
+export function setLoadingMetrics(metrics: {
+  peers?: number;
+  bytesPerSecond?: number;
+  completed?: number;
+}): void {
+  if (metrics.peers !== undefined && metricPeersEl !== null) {
+    metricPeersEl.textContent = String(metrics.peers);
+  }
+  if (metrics.bytesPerSecond !== undefined && metricSpeedEl !== null) {
+    metricSpeedEl.textContent = `${(metrics.bytesPerSecond / 1_048_576).toFixed(1)} MB/s`;
+  }
+  if (metrics.completed !== undefined && metricCompletedEl !== null) {
+    metricCompletedEl.textContent = `${String(Math.min(100, Math.round(metrics.completed)))} %`;
+  }
 }
 
 /**
@@ -163,36 +201,6 @@ export function nudgePhaseProgress(fraction: number): void {
   }
 }
 
-/**
- * Write the live detail line under the status headline, e.g. "3 peers".
- *
- * This is deliberately not `#status`. The value changes every second or two
- * during sync and `#status` is a live region, so routing it there would
- * queue a screen-reader announcement per change. The detail element carries
- * no live region of its own, which leaves it readable on demand but never
- * announced, and it never touches the slow-hint timer.
- *
- * Pass `announce` for the changes worth interrupting a screen-reader user
- * for, such as the first peer count and the stall and recovery copy. Those
- * mirror once into a visually hidden polite region.
- */
-export function setStatusDetail(
-  detail: string,
-  opts: { announce?: boolean } = {},
-): void {
-  if (statusDetailEl !== null) {
-    statusDetailEl.textContent = detail;
-  }
-  if (
-    opts.announce === true &&
-    detail !== "" &&
-    statusAnnouncerEl !== null &&
-    statusAnnouncerEl.textContent !== detail
-  ) {
-    statusAnnouncerEl.textContent = detail;
-  }
-}
-
 export const GATEWAY_ESCAPE_DELAY_MS = 10_000;
 
 /**
@@ -384,6 +392,14 @@ export function stopStatusTick(): void {
   clearSlowWarning();
 }
 
+/** Cancel the pending status reveal, for a load that finished in time. */
+function cancelStatusReveal(): void {
+  if (revealTimer !== null) {
+    clearTimeout(revealTimer);
+    revealTimer = null;
+  }
+}
+
 /**
  * Remove the loading overlay (logo, progress bar, log).
  * Called when the app is fully loaded and the iframe is ready.
@@ -391,6 +407,7 @@ export function stopStatusTick(): void {
 export function dismissLoading(): void {
   completeProgress();
   clearSlowWarning();
+  cancelStatusReveal();
   const loading = document.querySelector<HTMLElement>("#app > .loading");
   if (loading !== null) {
     loading.style.transition = "opacity 0.3s ease";

From 055dc9a12129c039ed83b688aaf9fc807e9832cc Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Thu, 6 Aug 2026 23:55:21 +0100
Subject: [PATCH 10/24] Restructure the network panel around a live status line
 and a per-chain table of peers, best block, and finalized block

---
 bun.lock                          |   2 +
 packages/ui/package.json          |   2 +
 packages/ui/src/styles/base.css   |  54 +++++++
 packages/ui/src/styles/themes.css |  16 ++
 packages/ui/src/topbar.ts         | 243 ++++++++++++++++++++++++++----
 5 files changed, 291 insertions(+), 26 deletions(-)

diff --git a/bun.lock b/bun.lock
index 97256703..3db90958 100644
--- a/bun.lock
+++ b/bun.lock
@@ -296,6 +296,8 @@
         "@parity/truapi": "0.7.0",
         "@parity/truapi-host": "0.4.0",
         "@polkadot-api/json-rpc-provider": "^0.2.0",
+        "@polkadot-api/substrate-bindings": "0.20.3",
+        "@polkadot-api/utils": "0.4.0",
         "@scure/base": "^2.2.0",
         "neverthrow": "^8.2.0",
         "polkadot-api": "^2.1.8",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 426ed39b..b61b5425 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -36,6 +36,8 @@
     "@parity/truapi": "0.7.0",
     "@parity/truapi-host": "0.4.0",
     "@polkadot-api/json-rpc-provider": "^0.2.0",
+    "@polkadot-api/substrate-bindings": "0.20.3",
+    "@polkadot-api/utils": "0.4.0",
     "@scure/base": "^2.2.0",
     "neverthrow": "^8.2.0",
     "polkadot-api": "^2.1.8",
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index 99b6ddec..81a166cd 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -434,3 +434,57 @@ body {
   min-width: 260px;
   padding: 10px 12px;
 }
+
+/* Network panel */
+.chains-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  /* 13.36:1 */
+  color: #d4d4d4;
+  padding: 2px 0 8px;
+}
+.chains-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.chains-status-dot.is-ok {
+  background: #22c55e;
+}
+.chains-status-dot.is-warn {
+  background: #eab308;
+}
+.chains-status-dot.is-idle {
+  background: #8f8f8f;
+}
+.chains-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
+  font-size: 10.5px;
+}
+.chains-table th,
+.chains-table td {
+  text-align: right;
+  padding: 3px 0 3px 12px;
+  white-space: nowrap;
+}
+.chains-table tr th:first-child {
+  text-align: left;
+  padding-left: 0;
+  font-weight: 500;
+}
+.chains-table tr:first-child th {
+  /* 6.12:1 */
+  color: #8f8f8f;
+  font-weight: 400;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+.chains-table td,
+.chains-table tr th:first-child {
+  /* 7.85:1 */
+  color: #a3a3a3;
+}
diff --git a/packages/ui/src/styles/themes.css b/packages/ui/src/styles/themes.css
index a5d6e230..5f667fef 100644
--- a/packages/ui/src/styles/themes.css
+++ b/packages/ui/src/styles/themes.css
@@ -251,6 +251,22 @@
   /* 4.89:1 */
   color: #6b6b6b;
 }
+[data-theme="light"] .chains-status {
+  color: #1a1a1a;
+}
+[data-theme="light"] .chains-table tr:first-child th {
+  /* 4.89:1 */
+  color: #6b6b6b;
+  border-bottom-color: rgba(0, 0, 0, 0.1);
+}
+[data-theme="light"] .chains-table td,
+[data-theme="light"] .chains-table tr th:first-child {
+  /* 7.17:1 */
+  color: #525252;
+}
+[data-theme="light"] .chains-status-dot.is-idle {
+  background: #6b6b6b;
+}
 [data-theme="light"] .loading-metric dd {
   /* 7.17:1 */
   color: #525252;
diff --git a/packages/ui/src/topbar.ts b/packages/ui/src/topbar.ts
index 50a0aac0..d1761735 100644
--- a/packages/ui/src/topbar.ts
+++ b/packages/ui/src/topbar.ts
@@ -17,6 +17,7 @@ import {
 import {
   createRemoteChainProvider,
   isRemoteChainSupported,
+  onProtocolChainSync,
 } from "@dotli/protocol/client";
 import {
   getCacheSettings,
@@ -276,6 +277,7 @@ export function initTopBar(
   // Mode toggle (P2P / Centralized)
   initModeToggle();
   initChainsPopover();
+  watchChainSync();
 
   // Permissions
   initPermissions();
@@ -950,51 +952,119 @@ function createPermissionDropdown(
   return wrap;
 }
 
+/**
+ * Live connection state, fed by the chain-sync subscription.
+ *
+ * `lifecycle_unstable_follow` is never unfollowed, so `stalled` and
+ * `recovered` keep arriving long after the load finished. That makes the
+ * status line genuinely live, unlike the peer counts, whose polling stops
+ * once a chain is up and so have to be queried when the panel opens.
+ */
+const chainSyncState = new Map<string, string>();
+let onStatusChange: (() => void) | null = null;
+
+function describeNetworkStatus(): { text: string; tone: string } {
+  const states = [...chainSyncState.values()];
+  if (states.length === 0) {
+    return { text: "Starting", tone: "idle" };
+  }
+  if (states.includes("stalled")) {
+    return { text: "Reconnecting", tone: "warn" };
+  }
+  const settled = states.every(
+    (k) => k === "bootstrapComplete" || k === "recovered",
+  );
+  return settled
+    ? { text: "Connected", tone: "ok" }
+    : { text: "Connecting", tone: "idle" };
+}
+
+function watchChainSync(): void {
+  onProtocolChainSync((event) => {
+    if (event.syncKind === "peers") {
+      return;
+    }
+    chainSyncState.set(event.chain, event.syncKind);
+    onStatusChange?.();
+  });
+}
+
 /**
  * Network popover: what each chain is doing right now.
  *
- * Block heights are queried fresh on every open rather than polled, because
- * the popover is the only thing that reads them and a background poll would
- * keep four chains awake for a panel nobody has looked at.
+ * Heights and peer counts are read fresh on every open rather than polled,
+ * because this panel is the only thing that wants them and a background
+ * poll would keep four chains awake for something nobody has looked at.
  */
 function renderChainsPopover(parent: HTMLElement): void {
   parent.replaceChildren();
   const backend = getBackend();
-  appendSectionHeader(parent, "Light client");
-  renderInfoRow(parent, "smoldot", buildSmoldotVersionLabel());
-  renderInfoRow(
-    parent,
-    "Status",
-    backend === "rpc-gateway" ? "not running (trusted provider)" : "running",
-  );
+
+  appendSectionHeader(parent, "Network");
+  const statusRow = document.createElement("div");
+  statusRow.className = "chains-status";
+  const dot = document.createElement("span");
+  const text = document.createElement("span");
+  statusRow.append(dot, text);
+  parent.appendChild(statusRow);
 
   if (backend === "rpc-gateway") {
+    onStatusChange = null;
+    dot.className = "chains-status-dot is-idle";
+    text.textContent = "Trusted provider, no light client";
     return;
   }
 
+  const paint = (): void => {
+    const { text: label, tone } = describeNetworkStatus();
+    dot.className = `chains-status-dot is-${tone}`;
+    text.textContent = label;
+  };
+  paint();
+  // Keep the line honest while the panel is open, so a chain that stalls
+  // now says so without the user reopening it.
+  onStatusChange = paint;
+
   const cfg = getActiveServicesConfig();
   const chains: [string, string][] = [
-    ["Relay Chain", cfg.relay.genesis],
-    ["Asset Hub", cfg.assethub.genesis],
+    ["Relay", cfg.relay.genesis],
+    ["AssetHub", cfg.assethub.genesis],
     ["Bulletin", cfg.bulletin.genesis],
-    ["People Chain", cfg.people.genesis],
+    ["People", cfg.people.genesis],
   ];
 
-  appendSectionHeader(parent, "Latest finalized block");
-  for (const [label, genesis] of chains) {
-    const row = renderInfoRow(parent, label, "…");
-    void queryFinalizedBlock(genesis).then((n) => {
-      row.update(formatBlock(n));
-    });
+  const table = document.createElement("table");
+  table.className = "chains-table";
+  const head = document.createElement("tr");
+  for (const label of ["", "Peers", "Best block", "Finalized"]) {
+    const th = document.createElement("th");
+    th.textContent = label;
+    head.appendChild(th);
   }
+  table.appendChild(head);
 
-  appendSectionHeader(parent, "Peers");
   for (const [label, genesis] of chains) {
-    const row = renderInfoRow(parent, label, "…");
+    const row = document.createElement("tr");
+    const name = document.createElement("th");
+    name.scope = "row";
+    name.textContent = label;
+    const cells = ["…", "…", "…"].map((v) => {
+      const td = document.createElement("td");
+      td.textContent = v;
+      return td;
+    });
+    row.append(name, ...cells);
+    table.appendChild(row);
+
     void queryPeerCount(genesis).then((n) => {
-      row.update(n === null ? "n/a" : String(n));
+      cells[0].textContent = n === null ? "n/a" : String(n);
+    });
+    void queryChainBlocks(genesis).then((blocks) => {
+      cells[1].textContent = blocks?.best ?? "n/a";
+      cells[2].textContent = blocks?.finalized ?? "n/a";
     });
   }
+  parent.appendChild(table);
 }
 
 /**
@@ -1745,6 +1815,11 @@ function renderDiagnostics(parent: HTMLElement): void {
     );
   }
 
+  // Version only. The per-chain block heights this section used to carry
+  // now live in the network popover, where they can be read live.
+  appendSectionHeader(parent, "@smoldot");
+  renderInfoRow(parent, "smoldot", buildSmoldotVersionLabel());
+
   // The unscoped `polkadot-api` package lives in the same visual section as
   // `@polkadot-api/*`. Same ecosystem, same release cadence, users expect
   // to see it with its siblings rather than at the top of the popover.
@@ -1851,10 +1926,10 @@ function isTruapiDebugEnabled(): boolean {
  *              so the snapshot matches what's actually live right now.
  *    3. Permissions: per-product, omitted on landing where we don't have
  *                    a scoped label to query.
- *    4. Packages: flat list of smoldot, polkadot-api, and @parity/truapi. The
- *                 live block heights from the @smoldot popover section
- *                 aren't included here because they're noise in a bug
- *                 report. The popover already shows them live. */
+ *    4. Packages: flat list of smoldot, polkadot-api, and @parity/truapi,
+ *                 with the block heights queried at share time. They are
+ *                 not rendered in this popover any more, they live in the
+ *                 network panel where they can be read live. */
 async function formatDiagnosticsReport(
   base: [label: string, value: string][],
   smoldot: SmoldotInfo,
@@ -2027,6 +2102,122 @@ function buildSmoldotVersionLabel(): string {
  * stays dynamic so opening the popover is cheap when the user doesn't care
  * about blocks.
  */
+/**
+ * Read a block's own timestamp, so its age is measured by the chain's clock
+ * rather than by when we happened to hear about it.
+ *
+ * `Timestamp::Now` is a plain `u64` of milliseconds under a well-known key,
+ * so this needs no metadata: hash the pallet and item names and decode eight
+ * little-endian bytes.
+ */
+async function queryBlockAgeMs(
+  client: {
+    _request: <R>(method: string, params: unknown[]) => Promise<R>;
+  },
+  blockHash: string,
+): Promise<number | null> {
+  try {
+    const [{ Twox128 }, { mergeUint8, toHex, fromHex }] = await Promise.all([
+      import("@polkadot-api/substrate-bindings"),
+      import("@polkadot-api/utils"),
+    ]);
+    const enc = new TextEncoder();
+    const key = toHex(
+      mergeUint8([
+        Twox128(enc.encode("Timestamp")),
+        Twox128(enc.encode("Now")),
+      ]),
+    );
+    // An empty storage slot comes back as null, which is normal on a chain
+    // whose block has not written the timestamp yet.
+    const raw = await client._request<string | null>("state_getStorage", [
+      key,
+      blockHash,
+    ]);
+    if (raw === null) {
+      return null;
+    }
+    const bytes = fromHex(raw);
+    if (bytes.length < 8) {
+      return null;
+    }
+    const millis = Number(
+      new DataView(
+        bytes.buffer,
+        bytes.byteOffset,
+        bytes.byteLength,
+      ).getBigUint64(0, true),
+    );
+    const age = Date.now() - millis;
+    return age >= 0 ? age : 0;
+  } catch {
+    return null;
+  }
+}
+
+/** "4s ago", "2m ago". Blank when the chain would not say. */
+function formatAge(ms: number | null): string {
+  if (ms === null) {
+    return "";
+  }
+  const secs = Math.round(ms / 1000);
+  if (secs < 60) {
+    return ` (${String(secs)}s ago)`;
+  }
+  return ` (${String(Math.round(secs / 60))}m ago)`;
+}
+
+/**
+ * Query a chain's best and finalized block, each with the age its own clock
+ * reports. `getBestBlocks` returns the chain from best to finalized, so one
+ * call covers both ends.
+ */
+async function queryChainBlocks(genesisHash: string): Promise<{
+  best: string;
+  finalized: string;
+} | null> {
+  try {
+    if (!isRemoteChainSupported(genesisHash)) {
+      return null;
+    }
+    const provider = createRemoteChainProvider(genesisHash);
+    if (provider === null) {
+      return null;
+    }
+    const papi = await import("polkadot-api");
+    const client = papi.createClient(provider);
+    try {
+      const blocks = await Promise.race([
+        client.getBestBlocks(),
+        new Promise<never>((_, reject) => {
+          setTimeout(() => {
+            reject(new Error("timeout"));
+          }, 10_000);
+        }),
+      ]);
+      const best = blocks.at(0);
+      const finalized = blocks.at(-1);
+      if (best === undefined || finalized === undefined) {
+        return null;
+      }
+      const [bestAge, finalizedAge] = await Promise.all([
+        queryBlockAgeMs(client, best.hash),
+        best.hash === finalized.hash
+          ? Promise.resolve(null)
+          : queryBlockAgeMs(client, finalized.hash),
+      ]);
+      return {
+        best: `${formatBlock(best.number)}${formatAge(bestAge)}`,
+        finalized: `${formatBlock(finalized.number)}${formatAge(best.hash === finalized.hash ? bestAge : finalizedAge)}`,
+      };
+    } finally {
+      client.destroy();
+    }
+  } catch {
+    return null;
+  }
+}
+
 /**
  * Query a chain's current peer count over the same bridge as the block
  * height. Read live on open rather than taken from the loading screen's

From 08ed85c4899f762ae053a20da4cbd9d07104207d Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Fri, 7 Aug 2026 11:28:34 +0100
Subject: [PATCH 11/24] Add the chain-sync subscription to the protocol client
 mock the topbar tests use

---
 packages/ui/tests/topbar.test.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/ui/tests/topbar.test.ts b/packages/ui/tests/topbar.test.ts
index 247185a1..8f8ef5f6 100644
--- a/packages/ui/tests/topbar.test.ts
+++ b/packages/ui/tests/topbar.test.ts
@@ -33,6 +33,12 @@ vi.mock("@dotli/protocol/client", () => ({
       sharedAuth.listeners.delete(listener);
     };
   },
+  // The topbar subscribes at init so its network panel can show a live
+  // status. No test drives chain events, so this just has to exist and
+  // hand back an unsubscribe.
+  onProtocolChainSync: () => () => {
+    /* no chain events in these tests */
+  },
 }));
 
 async function flushMicrotasks(): Promise<void> {

From 8291aefe62e0d536991db2cc4fa8b1b2bbe0d5f7 Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Fri, 7 Aug 2026 14:27:29 +0100
Subject: [PATCH 12/24] Narrate the loading screen in plain language and keep
 the bar moving when a step overruns

---
 apps/host/index.html            |  47 ++---
 apps/host/src/main.ts           | 162 +++++++++++------
 packages/ui/src/styles/base.css |  75 ++++----
 packages/ui/src/topbar.ts       |  42 ++++-
 packages/ui/src/ui.ts           | 307 +++++++++++++++++---------------
 5 files changed, 371 insertions(+), 262 deletions(-)

diff --git a/apps/host/index.html b/apps/host/index.html
index 1db30fa6..0048e335 100644
--- a/apps/host/index.html
+++ b/apps/host/index.html
@@ -416,28 +416,33 @@ <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
           <span class="loading-progress-pct" id="loading-progress-pct">0%</span>
         </div>
         <div class="loading-text" id="loading-text">
-          <!-- Held back until the load has run long enough to be
-                         worth explaining. A fast load shows only the bar. -->
+          <!-- Held back until the load has run long enough to be worth
+               explaining. A fast load shows only the bar. -->
           <div class="loading-status" id="loading-status">
-            <p class="loading-status-heading">Status</p>
-            <p id="status" aria-live="polite">Reaching out</p>
-            <details class="loading-details" id="loading-details">
-              <summary class="loading-details-summary">Details</summary>
-              <dl class="loading-metrics">
-                <div class="loading-metric">
-                  <dt>Peers</dt>
-                  <dd id="metric-peers">0</dd>
-                </div>
-                <div class="loading-metric">
-                  <dt>Speed</dt>
-                  <dd id="metric-speed">0 MB/s</dd>
-                </div>
-                <div class="loading-metric">
-                  <dt>Completed</dt>
-                  <dd id="metric-completed">0 %</dd>
-                </div>
-              </dl>
-            </details>
+            <p id="status" aria-live="polite">Starting up</p>
+            <dl class="loading-metrics">
+              <div class="loading-metric-peers">
+                <dt>Peers</dt>
+                <dd>
+                  <div class="loading-metric">
+                    <span>AssetHub</span>
+                    <span id="metric-peers-assethub">&mdash;</span>
+                  </div>
+                  <div class="loading-metric">
+                    <span>Bulletin</span>
+                    <span id="metric-peers-bulletin">&mdash;</span>
+                  </div>
+                </dd>
+              </div>
+              <div class="loading-metric">
+                <dt>Speed</dt>
+                <dd id="metric-speed">&mdash;</dd>
+              </div>
+              <div class="loading-metric">
+                <dt>Light client</dt>
+                <dd id="metric-lifecycle">starting</dd>
+              </div>
+            </dl>
           </div>
           <p class="loading-hint" id="loading-hint"></p>
         </div>
diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index 44d48481..ad10f89f 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -25,7 +25,6 @@ import {
   captureException,
 } from "@dotli/metrics/sentry";
 import {
-  showStatus,
   showError,
   showNoContentError,
   showLanding,
@@ -33,11 +32,13 @@ import {
   advancePhase,
   nudgePhaseProgress,
   setLoadingMetrics,
+  setLifecycleStatus,
   stopStatusTick,
   listenForSandboxStatus,
   showGatewayEscape,
 } from "@dotli/ui/ui";
 import type { LoadingPhase } from "@dotli/ui/ui";
+import type { ChainKey, ChainSyncKind } from "@dotli/resolver/smoldot";
 import {
   initTopBar,
   setChainsButtonVisible,
@@ -179,6 +180,27 @@ const T0 = performance.now();
 const DOTLI_PRODUCT_ID_PARAM = "dotliProductId";
 const blockingModalCoordinator = createBlockingModalCoordinator();
 
+// Names for the light-client row on the loading screen. Full records rather
+// than lookups with a fallback, so adding a chain or a milestone upstream
+// fails typecheck here instead of printing a blank.
+const CHAIN_NAMES: Record<ChainKey, string> = {
+  relay: "Polkadot",
+  "custom-relay": "Relay",
+  "asset-hub": "Asset Hub",
+  bulletin: "Bulletin",
+  people: "People",
+};
+const LIFECYCLE_WORDS: Record<ChainSyncKind, string> = {
+  connecting: "connecting",
+  firstPeer: "found a peer",
+  warpSyncProgress: "syncing",
+  warpSyncFinished: "synced",
+  bootstrapComplete: "ready",
+  stalled: "waiting for peers",
+  recovered: "reconnected",
+  peers: "connected",
+};
+
 function parseLocalProductIdOverride(): string | undefined {
   if (!isLocalhost) {
     return undefined;
@@ -1174,11 +1196,41 @@ async function main(): Promise<void> {
     "resolving-content": 3,
   };
   const smoldotPhases = (startLabel: string): LoadingPhase[] => [
-    { label: startLabel, base: 2, target: 6, expectedMs: 650 },
-    { label: "Adding relay chain", base: 6, target: 10, expectedMs: 120 },
-    { label: "Syncing Asset Hub", base: 10, target: 55, expectedMs: 6500 },
-    { label: "Resolving", base: 55, target: 62, expectedMs: 1200 },
-    { label: "Fetching content", base: 62, target: 95, expectedMs: 10000 },
+    {
+      label: startLabel,
+      base: 2,
+      target: 6,
+      expectedMs: 650,
+      stage: "starting",
+    },
+    {
+      label: "Adding relay chain",
+      base: 6,
+      target: 10,
+      expectedMs: 120,
+      stage: "relay",
+    },
+    {
+      label: "Syncing Asset Hub",
+      base: 10,
+      target: 55,
+      expectedMs: 6500,
+      stage: "assetHub",
+    },
+    {
+      label: "Resolving",
+      base: 55,
+      target: 62,
+      expectedMs: 1200,
+      stage: "resolving",
+    },
+    {
+      label: "Fetching content",
+      base: 62,
+      target: 95,
+      expectedMs: 10000,
+      stage: "content",
+    },
   ];
   if (chainBackend === "smoldot-shared-worker") {
     initPhases(smoldotPhases("Starting Worker"));
@@ -1188,9 +1240,27 @@ async function main(): Promise<void> {
     // Gateway path resolves over RPC with no smoldot sync, then fetches
     // content the same way every backend does.
     initPhases([
-      { label: "Connecting", base: 5, target: 50, expectedMs: 1200 },
-      { label: "Resolving", base: 50, target: 62, expectedMs: 1200 },
-      { label: "Fetching content", base: 62, target: 95, expectedMs: 10000 },
+      {
+        label: "Connecting",
+        base: 5,
+        target: 50,
+        expectedMs: 1200,
+        stage: "relay",
+      },
+      {
+        label: "Resolving",
+        base: 50,
+        target: 62,
+        expectedMs: 1200,
+        stage: "resolving",
+      },
+      {
+        label: "Fetching content",
+        base: 62,
+        target: 95,
+        expectedMs: 10000,
+        stage: "content",
+      },
     ]);
   }
   // Content fetch (bitswap/IPFS) runs in the sandbox after the CID resolves and
@@ -1199,7 +1269,6 @@ async function main(): Promise<void> {
   // sandbox render.
   const contentFetchPhase = chainBackend === "rpc-gateway" ? 2 : 4;
   advancePhase(0);
-  showStatus(`Resolving ${label}.dot`);
 
   // Advance the loading bar from smoldot's typed lifecycle stream instead of
   // scraping log prose. `firstPeer` on the Asset Hub means a peer was
@@ -1214,31 +1283,29 @@ async function main(): Promise<void> {
   // lives in the SharedWorker, which does not forward lifecycle or health
   // yet, and the gateway has no smoldot at all.
   if (chainBackend === "smoldot-direct") {
-    // The load walks three chains in turn: the relay warps, the Asset Hub
-    // bootstraps on top of it, then Bulletin comes up to serve the content
-    // over bitswap. Only the one being waited on drives the peer count, so
-    // the figure always describes what the user is actually waiting for.
-    let waitingOn: "relay" | "asset-hub" | "bulletin" = "relay";
+    // Peers are reported per chain rather than as one figure for whichever
+    // chain is currently being waited on. A single figure had to be blanked
+    // at every handover, which put a zero on screen at exactly the moments
+    // the load looked slowest.
     onProtocolChainSync((event) => {
       log.debug(`[dot.li sync] ${event.chain} ${event.syncKind}`);
+      // One row reports what smoldot itself says it is doing, so a load that
+      // looks stuck can be told apart from one that is quietly working.
+      // Health samples are excluded: they arrive every second and would
+      // overwrite the milestone that explains the current state.
+      if (event.syncKind !== "peers") {
+        setLifecycleStatus(
+          `${CHAIN_NAMES[event.chain]} ${LIFECYCLE_WORDS[event.syncKind]}`,
+        );
+      }
       switch (event.syncKind) {
-        case "connecting":
-          // A chain that just started has no peers yet, and saying so beats
-          // leaving the previous chain's figure on screen.
-          if (event.chain === waitingOn) {
-            setLoadingMetrics({ peers: 0 });
-          }
-          return;
         case "peers":
-          if (event.chain === waitingOn) {
-            setLoadingMetrics({ peers: event.peers ?? 0 });
+          if (event.chain === "asset-hub") {
+            setLoadingMetrics({ assetHubPeers: event.peers ?? 0 });
+          } else if (event.chain === "bulletin") {
+            setLoadingMetrics({ bulletinPeers: event.peers ?? 0 });
           }
           return;
-        case "stalled":
-        case "recovered":
-          // The peer count already tells this story: a stall is a chain
-          // sitting at zero peers, and recovery is the number climbing.
-          return;
         case "warpSyncProgress": {
           // The one true percentage smoldot offers. Only relays warp, and
           // only when they have real distance to cover.
@@ -1258,19 +1325,18 @@ async function main(): Promise<void> {
             advancePhase(2);
           }
           return;
-        case "warpSyncFinished":
         case "bootstrapComplete":
-          // Hand the count to the next chain in the sequence and reset it, so
-          // a finished chain's figure never lingers under the next one.
-          if (event.chain === "relay") {
-            waitingOn = "asset-hub";
-            setLoadingMetrics({ peers: 0 });
-          } else if (event.chain === "asset-hub") {
+          if (event.chain === "asset-hub") {
             advancePhase(3);
-            waitingOn = "bulletin";
-            setLoadingMetrics({ peers: 0 });
           }
           return;
+        case "connecting":
+        case "stalled":
+        case "recovered":
+        case "warpSyncFinished":
+          // The per-chain peer counts already carry these: a stall is a
+          // chain sitting at zero, and recovery is the number climbing.
+          return;
       }
     });
 
@@ -1278,12 +1344,10 @@ async function main(): Promise<void> {
     // download reports itself: bytes so far against the total the DAG root
     // declares.
     onContentProgress(({ bytesFetched, totalBytes, bytesPerSecond }) => {
-      setLoadingMetrics({
-        bytesPerSecond,
-        ...(totalBytes !== null && totalBytes > 0
-          ? { completed: (bytesFetched / totalBytes) * 100 }
-          : {}),
-      });
+      setLoadingMetrics({ bytesPerSecond });
+      // The download's true fraction drives the bar itself, which is where
+      // a percentage belongs. Printing the same number as text alongside it
+      // said the same thing twice.
       if (totalBytes !== null && totalBytes > 0) {
         nudgePhaseProgress(bytesFetched / totalBytes);
       }
@@ -1413,11 +1477,10 @@ async function main(): Promise<void> {
             advancePhase(mappedPhase);
           }
           emitPhase(msg, phase ?? "progress");
-          // Sync milestones usually outrun these status strings, so pass
-          // the phase and let `showStatus` drop prose describing a step the
-          // bar already passed. Unmapped messages such as bootnode issues
-          // and not-found notices carry no phase and always show.
-          showStatus(msg, { phase: mappedPhase });
+          // These strings are the resolver talking to a developer, which is
+          // how "Walking dag-pb via bitswap..." reached the headline. They
+          // stay in the debug stream and move the bar; the stage messages
+          // say the same thing to the user.
         };
         cid = await resolveDotNameRemote(`app.${label}`, onResolveProgress);
         if (cid === null) {
@@ -1437,7 +1500,6 @@ async function main(): Promise<void> {
         await import("@dotli/resolver/rpc-resolve");
       const onResolveProgress = (msg: string): void => {
         emitPhase(msg, "progress");
-        showStatus(msg);
       };
       cid = await resolveDotNameViaRpc(`app.${label}`, onResolveProgress);
       if (cid === null) {
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index 81a166cd..c5e236a5 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -172,41 +172,16 @@ body {
   opacity: 1;
   pointer-events: auto;
 }
-.loading-status-heading {
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  /* 6.12:1 */
-  color: #8f8f8f;
-  margin-bottom: 4px;
-}
-.loading-details {
-  margin-top: 12px;
-  text-align: left;
-  display: inline-block;
-  min-width: 190px;
-}
-.loading-details-summary {
-  font-size: 11px;
-  /* 6.12:1 */
-  color: #8f8f8f;
-  cursor: pointer;
-  list-style: none;
-  user-select: none;
-}
-.loading-details-summary::-webkit-details-marker {
-  display: none;
-}
-.loading-details-summary::after {
-  content: " >";
-}
-.loading-details[open] .loading-details-summary::after {
-  content: " v";
-}
 .loading-metrics {
-  margin-top: 8px;
+  margin-top: 10px;
   font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
   font-size: 11px;
+  /* The loading block is centred, so the list centres as a unit while its
+     own rows stay left-aligned. Without this the "Peers" heading floats in
+     the middle of the column. */
+  display: inline-block;
+  text-align: left;
+  min-width: 200px;
 }
 .loading-metric {
   display: flex;
@@ -214,14 +189,26 @@ body {
   gap: 24px;
   padding: 2px 0;
 }
-.loading-metric dt {
+.loading-metric dt,
+.loading-metric span:first-child {
   /* 6.12:1 */
   color: #8f8f8f;
 }
-.loading-metric dd {
+.loading-metric dd,
+.loading-metric span:last-child {
   /* 7.85:1 */
   color: #a3a3a3;
 }
+/* Peers is a heading over its chains rather than a row of its own, so the
+   chain names sit under it and the numbers keep the same right edge. */
+.loading-metric-peers > dt {
+  /* 6.12:1 */
+  color: #8f8f8f;
+  padding: 2px 0;
+}
+.loading-metric-peers > dd {
+  margin-left: 12px;
+}
 /* Slow-step hint (shown below status when a step exceeds its threshold) */
 .loading-hint {
   font-size: 11px;
@@ -431,8 +418,16 @@ body {
   display: inline-flex;
 }
 .chains-popover {
-  min-width: 260px;
-  padding: 10px 12px;
+  min-width: 300px;
+  /* The inset lives here rather than on the rows: padding on a
+     border-collapse table does not move its cells, so the table would drift
+     left of the heading. Section headers carry their own 14px, zeroed just
+     below so everything shares this one edge. */
+  padding: 10px 14px 14px;
+}
+.chains-popover .mode-popover-section {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 /* Network panel */
@@ -443,7 +438,8 @@ body {
   font-size: 12px;
   /* 13.36:1 */
   color: #d4d4d4;
-  padding: 2px 0 8px;
+  padding-top: 2px;
+  padding-bottom: 10px;
 }
 .chains-status-dot {
   width: 8px;
@@ -462,14 +458,15 @@ body {
 }
 .chains-table {
   width: 100%;
+  margin-top: 2px;
   border-collapse: collapse;
   font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
-  font-size: 10.5px;
+  font-size: 11px;
 }
 .chains-table th,
 .chains-table td {
   text-align: right;
-  padding: 3px 0 3px 12px;
+  padding: 4px 0 4px 12px;
   white-space: nowrap;
 }
 .chains-table tr th:first-child {
diff --git a/packages/ui/src/topbar.ts b/packages/ui/src/topbar.ts
index d1761735..16e95233 100644
--- a/packages/ui/src/topbar.ts
+++ b/packages/ui/src/topbar.ts
@@ -962,6 +962,17 @@ function createPermissionDropdown(
  */
 const chainSyncState = new Map<string, string>();
 let onStatusChange: (() => void) | null = null;
+let chainsRefreshTimer: ReturnType<typeof setInterval> | null = null;
+
+/** How often the open panel re-reads peers and heights. */
+const CHAINS_REFRESH_MS = 6_000;
+
+function stopChainsRefresh(): void {
+  if (chainsRefreshTimer !== null) {
+    clearInterval(chainsRefreshTimer);
+    chainsRefreshTimer = null;
+  }
+}
 
 function describeNetworkStatus(): { text: string; tone: string } {
   const states = [...chainSyncState.values()];
@@ -1043,6 +1054,7 @@ function renderChainsPopover(parent: HTMLElement): void {
   }
   table.appendChild(head);
 
+  const refreshers: (() => void)[] = [];
   for (const [label, genesis] of chains) {
     const row = document.createElement("tr");
     const name = document.createElement("th");
@@ -1056,15 +1068,29 @@ function renderChainsPopover(parent: HTMLElement): void {
     row.append(name, ...cells);
     table.appendChild(row);
 
-    void queryPeerCount(genesis).then((n) => {
-      cells[0].textContent = n === null ? "n/a" : String(n);
-    });
-    void queryChainBlocks(genesis).then((blocks) => {
-      cells[1].textContent = blocks?.best ?? "n/a";
-      cells[2].textContent = blocks?.finalized ?? "n/a";
-    });
+    const refresh = (): void => {
+      void queryPeerCount(genesis).then((n) => {
+        cells[0].textContent = n === null ? "n/a" : String(n);
+      });
+      void queryChainBlocks(genesis).then((blocks) => {
+        cells[1].textContent = blocks?.best ?? "n/a";
+        cells[2].textContent = blocks?.finalized ?? "n/a";
+      });
+    };
+    refresh();
+    refreshers.push(refresh);
   }
   parent.appendChild(table);
+
+  // Heights and ages go stale within a block, so keep re-reading while the
+  // panel is on screen. The interval is cleared on close, which is what
+  // keeps this from waking four chains for a panel nobody is looking at.
+  stopChainsRefresh();
+  chainsRefreshTimer = setInterval(() => {
+    for (const refresh of refreshers) {
+      refresh();
+    }
+  }, CHAINS_REFRESH_MS);
 }
 
 /**
@@ -1090,6 +1116,8 @@ function initChainsPopover(): void {
   const close = (): void => {
     popover.classList.remove("open");
     button.setAttribute("aria-expanded", "false");
+    stopChainsRefresh();
+    onStatusChange = null;
   };
   button.addEventListener("click", (e) => {
     e.stopPropagation();
diff --git a/packages/ui/src/ui.ts b/packages/ui/src/ui.ts
index 3c045230..76134f45 100644
--- a/packages/ui/src/ui.ts
+++ b/packages/ui/src/ui.ts
@@ -8,7 +8,6 @@
 
 import { loadRecentLabels, forgetRecentLabel } from "./recent-labels";
 import { BASE_DOMAIN, isSandboxOrigin } from "@dotli/config/config";
-import { getBackend } from "@dotli/config/mode";
 import { escapeHtml, validateDotLabel } from "@dotli/shared/html";
 import type { DotLabelResult } from "@dotli/shared/html";
 
@@ -40,6 +39,8 @@ export interface LoadingPhase {
   base: number;
   target: number;
   expectedMs: number;
+  /** Which set of messages narrates this phase. */
+  stage: LoadingStage;
 }
 let phases: LoadingPhase[] = [];
 let currentPhase = -1;
@@ -48,9 +49,9 @@ let currentPhase = -1;
 let progressFillEl: HTMLElement | null = null;
 let progressPctEl: HTMLElement | null = null;
 let statusBlockEl: HTMLElement | null = null;
-let metricPeersEl: HTMLElement | null = null;
+let metricAssetHubPeersEl: HTMLElement | null = null;
+let metricBulletinPeersEl: HTMLElement | null = null;
 let metricSpeedEl: HTMLElement | null = null;
-let metricCompletedEl: HTMLElement | null = null;
 let revealTimer: ReturnType<typeof setTimeout> | null = null;
 let currentProgress = 0;
 let targetProgress = 0;
@@ -59,6 +60,20 @@ let progressInterval: ReturnType<typeof setInterval> | null = null;
 
 const CRAWL_TICK_MS = 200;
 
+// A band that runs longer than its estimate used to leave the bar frozen at
+// the band top: the worst case was the last one, which reached 95% and sat
+// there for up to 6s while the sandbox unpacked and painted. When a band is
+// exhausted the bar creeps on into the next band's space, which is free
+// because the step that owns it has not started. The creep is slow enough to
+// read as waiting rather than as a second, faster load, and it stops short
+// of 100 so only a finished load can fill the bar.
+// Paced so the displayed whole number keeps changing every few seconds
+// rather than only twice over the whole creep.
+const CREEP_CEILING = 99;
+const CREEP_MS = 10_000;
+let creepCeiling = 0;
+let creepStep = 0;
+
 function setProgress(pct: number): void {
   currentProgress = pct;
   if (progressFillEl !== null) {
@@ -74,6 +89,10 @@ function startProgressCrawl(): void {
   progressInterval = setInterval(() => {
     if (currentProgress < targetProgress) {
       setProgress(Math.min(currentProgress + crawlStep, targetProgress));
+      return;
+    }
+    if (currentProgress < creepCeiling) {
+      setProgress(Math.min(currentProgress + creepStep, creepCeiling));
     }
   }, CRAWL_TICK_MS);
 }
@@ -107,9 +126,9 @@ export function initPhases(phaseList: LoadingPhase[]): void {
   progressFillEl = document.getElementById("loading-progress-fill");
   progressPctEl = document.getElementById("loading-progress-pct");
   statusBlockEl = document.getElementById("loading-status");
-  metricPeersEl = document.getElementById("metric-peers");
+  metricAssetHubPeersEl = document.getElementById("metric-peers-assethub");
+  metricBulletinPeersEl = document.getElementById("metric-peers-bulletin");
   metricSpeedEl = document.getElementById("metric-speed");
-  metricCompletedEl = document.getElementById("metric-completed");
 
   // A load that finishes quickly should never explain itself. Only once it
   // has run long enough to feel slow does the status block appear.
@@ -124,25 +143,131 @@ export function initPhases(phaseList: LoadingPhase[]): void {
 /** How long a load may run before it owes the user an explanation. */
 export const STATUS_REVEAL_MS = 3_000;
 
+// No sentence may hold the screen longer than three seconds. Set just under
+// it so a tick that lands late still clears the bar.
+const MESSAGE_ROTATE_MS = 2_800;
+
+/** The steps a load moves through, in the order they happen. */
+export type LoadingStage =
+  | "starting"
+  | "relay"
+  | "assetHub"
+  | "resolving"
+  | "content";
+
 /**
- * Live counters under the status line. Each is written only when supplied,
- * so a caller can update the peer count without claiming a download speed
- * it has no reading for.
+ * What the shell is doing, in the user's terms.
+ *
+ * The headline used to print the resolver's own prose, which is where
+ * "Walking dag-pb via bitswap..." came from. These say the same thing in
+ * plain words. Each stage carries several lines because a step can run for
+ * half a minute, and one frozen sentence reads as a hang. The first line of
+ * each stage names the step. The rest explain what a light client is doing
+ * and why it takes the time it does, so a slow load teaches something
+ * instead of just apologising.
+ */
+const STAGE_MESSAGES: Record<LoadingStage, string[]> = {
+  starting: [
+    "Starting up",
+    "This page checks the blockchain itself, with no server in between",
+    "That takes a few seconds the first time",
+  ],
+  relay: [
+    "Connecting to Polkadot",
+    "Looking for other computers on the network to talk to",
+    "Your browser is running a small node of its own",
+  ],
+  assetHub: [
+    "Looking up the name",
+    "Catching up with the latest blocks",
+    "The name and its address are being read from the chain",
+    "This is the slow part, and it is faster next time",
+  ],
+  resolving: [
+    "Found the name",
+    "Reading the address it points at",
+    "The chain proved this answer, so it cannot be faked",
+  ],
+  content: [
+    "Downloading the app",
+    "The files come from other people on the network, piece by piece",
+    "Speed depends on how many of them are nearby",
+    "Almost there",
+  ],
+};
+
+let stageTimer: ReturnType<typeof setInterval> | null = null;
+let currentStage: LoadingStage | "" = "";
+
+function writeStatus(message: string): void {
+  const status = document.getElementById("status");
+  if (status !== null) {
+    status.textContent = message;
+  }
+}
+
+/**
+ * Move to a stage and start cycling its messages.
+ *
+ * Re-entering a stage already running is ignored, so the copy does not
+ * restart every time a signal arrives for a step that is already underway.
+ */
+export function setLoadingStage(stage: LoadingStage): void {
+  if (stage === currentStage) {
+    return;
+  }
+  currentStage = stage;
+  const messages = STAGE_MESSAGES[stage];
+  let index = 0;
+  writeStatus(messages[0]);
+  stopStageMessages();
+  // Cycle back to the second line rather than the first: the opener names
+  // the step, and showing it again would read as the load starting over.
+  const loopFrom = messages.length > 2 ? 1 : 0;
+  stageTimer = setInterval(() => {
+    index = index + 1 >= messages.length ? loopFrom : index + 1;
+    writeStatus(messages[index]);
+  }, MESSAGE_ROTATE_MS);
+}
+
+function stopStageMessages(): void {
+  if (stageTimer !== null) {
+    clearInterval(stageTimer);
+    stageTimer = null;
+  }
+}
+
+/** Report what the light client itself is doing, e.g. "syncing Asset Hub". */
+export function setLifecycleStatus(text: string): void {
+  const el = document.getElementById("metric-lifecycle");
+  if (el !== null) {
+    el.textContent = text;
+  }
+}
+
+/**
+ * Live counters under the status line.
+ *
+ * Each is written only when supplied, and each starts as an em dash rather
+ * than a zero: before the download begins there is no speed to report, and
+ * "0 MB/s" reads as broken where "not yet" reads as honest. Peers are per
+ * chain because one shared figure had to be blanked at every handover,
+ * which put a zero on screen at the moments the load looked slowest.
  */
 export function setLoadingMetrics(metrics: {
-  peers?: number;
+  assetHubPeers?: number;
+  bulletinPeers?: number;
   bytesPerSecond?: number;
-  completed?: number;
 }): void {
-  if (metrics.peers !== undefined && metricPeersEl !== null) {
-    metricPeersEl.textContent = String(metrics.peers);
+  if (metrics.assetHubPeers !== undefined && metricAssetHubPeersEl !== null) {
+    metricAssetHubPeersEl.textContent = String(metrics.assetHubPeers);
+  }
+  if (metrics.bulletinPeers !== undefined && metricBulletinPeersEl !== null) {
+    metricBulletinPeersEl.textContent = String(metrics.bulletinPeers);
   }
   if (metrics.bytesPerSecond !== undefined && metricSpeedEl !== null) {
     metricSpeedEl.textContent = `${(metrics.bytesPerSecond / 1_048_576).toFixed(1)} MB/s`;
   }
-  if (metrics.completed !== undefined && metricCompletedEl !== null) {
-    metricCompletedEl.textContent = `${String(Math.min(100, Math.round(metrics.completed)))} %`;
-  }
 }
 
 /**
@@ -169,16 +294,23 @@ export function advancePhase(index: number): void {
   // steadily through a long sync instead of stalling near the top.
   crawlStep =
     ((target - base) * CRAWL_TICK_MS) / Math.max(expectedMs, CRAWL_TICK_MS);
+  // Headroom for a band that overruns: the next band's space, or the ceiling
+  // for the last one. Borrowing at most one band keeps a single slow step
+  // from eating the whole bar, and `advancePhase` never moves the bar
+  // backwards, so the next step simply carries on from wherever the creep
+  // reached.
+  const next = phases[index + 1] as LoadingPhase | undefined;
+  creepCeiling = Math.min(next?.target ?? CREEP_CEILING, CREEP_CEILING);
+  creepStep =
+    (Math.max(creepCeiling - target, 0) * CRAWL_TICK_MS) /
+    Math.max(CREEP_MS, CRAWL_TICK_MS);
   startProgressCrawl();
 
-  // Update headline. Re-arm the slow hint against the new label: the timer
-  // armed for the previous step would otherwise fire with a hint describing
-  // work that already completed.
-  const status = document.getElementById("status");
-  if (status !== null) {
-    status.textContent = label;
-  }
-  armSlowHint(label);
+  // The headline is the stage's, not the phase label's: the label names the
+  // band for whoever reads this table, the stage speaks to the user. Several
+  // phases can share one stage, and re-entering a running stage is a no-op.
+  void label;
+  setLoadingStage(phases[index].stage);
 }
 
 /**
@@ -186,8 +318,8 @@ export function advancePhase(index: number): void {
  *
  * The crawl paces the band on a guess at how long the step takes. When a
  * step reports true progress, this moves the bar to where the work actually
- * is. Monotonic and clamped to the band, so a late or noisy signal can
- * never rewind the bar or push it into the next phase's territory.
+ * is. Monotonic and clamped to the band, so a late or noisy signal can never
+ * rewind the bar, including past a point the overrun creep has reached.
  */
 export function nudgePhaseProgress(fraction: number): void {
   if (!Number.isFinite(fraction) || currentPhase < 0) {
@@ -251,79 +383,9 @@ export function showGatewayEscape(
   };
 }
 
-// Single-line status. Updates #status in place. Shows a slow-step
-// hint when a step exceeds its time threshold.
-
-// Per-step timeout thresholds (seconds). If a step exceeds its
-// limit, a contextual hint fades in below the status line.
-type SlowHint = string | { smoldot: string; rpc: string };
-const SLOW_THRESHOLDS: Record<string, { secs: number; hint: SlowHint }> = {
-  "Starting light client": {
-    secs: 8,
-    hint: "The smoldot light client is slow to initialize — could be a network issue",
-  },
-  "Adding Paseo relay chain": {
-    secs: 10,
-    hint: "Paseo relay chain bootstrap is stalled — smoldot may be having trouble reaching bootnodes",
-  },
-  "Connecting to Asset Hub": {
-    secs: 12,
-    hint: "Asset Hub parachain connection is taking long — the chain may be congested or peers unavailable",
-  },
-  Syncing: {
-    secs: 15,
-    hint: "Asset Hub sync is slow — smoldot is still catching up to the latest finalized block on the Paseo relay chain",
-  },
-  Resolving: {
-    secs: 10,
-    hint: {
-      smoldot: "Smoldot is still catching up on the Paseo relay chain",
-      rpc: "The RPC endpoint is slow to answer the resolver query",
-    },
-  },
-  "Connecting to peers": {
-    secs: 10,
-    hint: "Helia P2P peer discovery is slow — WebRTC relay nodes may be unreachable",
-  },
-  "Fetching content via P2P": {
-    secs: 15,
-    hint: "P2P content transfer is slow — the content may have few seeders on the Bulletin network",
-  },
-  "Fetching directory via P2P": {
-    secs: 15,
-    hint: "Directory fetch is slow — multi-file archives take longer over P2P",
-  },
-  "Initializing P2P client": {
-    secs: 8,
-    hint: "Helia startup is stalled — WASM or WebRTC initialization may be blocked",
-  },
-};
-
-function resolveHint(hint: SlowHint): string {
-  if (typeof hint === "string") {
-    return hint;
-  }
-  return getBackend() === "rpc-gateway" ? hint.rpc : hint.smoldot;
-}
-
-function getSlowThreshold(
-  message: string,
-): { secs: number; hint: string } | null {
-  for (const [key, value] of Object.entries(SLOW_THRESHOLDS)) {
-    if (message.startsWith(key) || message.includes(key.toLowerCase())) {
-      return { secs: value.secs, hint: resolveHint(value.hint) };
-    }
-  }
-  return { secs: 20, hint: "This is taking longer than expected" };
-}
-
-let slowTimer: ReturnType<typeof setTimeout> | null = null;
+// Single-line status. Updates #status in place.
 
 function clearSlowWarning(): void {
-  if (slowTimer !== null) {
-    clearTimeout(slowTimer);
-    slowTimer = null;
-  }
   const hint = document.getElementById("loading-hint");
   if (hint !== null) {
     // Remove only the text span, preserve any gateway button
@@ -338,52 +400,6 @@ function clearSlowWarning(): void {
   }
 }
 
-/**
- * Update the single status line below the progress bar.
- * Replaces the previous message in place. No new DOM elements are created.
- * Schedules a slow-step hint if the step exceeds its time threshold.
- */
-export function showStatus(
-  message: string,
-  opts: { phase?: number } = {},
-): void {
-  // Callers that know which phase a message describes pass it, so prose
-  // about a step the bar already passed is dropped instead of flipping the
-  // headline backwards. `advancePhase` enforces the same rule for the bar.
-  if (opts.phase !== undefined && opts.phase < currentPhase) {
-    return;
-  }
-  const status = document.getElementById("status");
-  if (status !== null) {
-    status.textContent = message;
-  }
-  armSlowHint(message);
-}
-
-function armSlowHint(message: string): void {
-  clearSlowWarning();
-
-  const threshold = getSlowThreshold(message);
-  if (threshold !== null) {
-    slowTimer = setTimeout(() => {
-      const hint = document.getElementById("loading-hint");
-      if (hint !== null) {
-        // Remove previous text span if any
-        const existing = hint.querySelector(".loading-hint-text");
-        if (existing !== null) {
-          existing.remove();
-        }
-        // Insert text as a span so it doesn't wipe the gateway button
-        const span = document.createElement("span");
-        span.className = "loading-hint-text";
-        span.textContent = threshold.hint;
-        hint.insertBefore(span, hint.firstChild);
-        hint.classList.add("visible");
-      }
-    }, threshold.secs * 1000);
-  }
-}
-
 /**
  * Stop the progress crawl and clear any slow warning (call when loading is done).
  */
@@ -408,6 +424,7 @@ export function dismissLoading(): void {
   completeProgress();
   clearSlowWarning();
   cancelStatusReveal();
+  stopStageMessages();
   const loading = document.querySelector<HTMLElement>("#app > .loading");
   if (loading !== null) {
     loading.style.transition = "opacity 0.3s ease";
@@ -445,9 +462,9 @@ export function listenForSandboxStatus(): void {
     if (!isSandboxOrigin(event.origin)) {
       return;
     }
-    if (typeof data.message === "string") {
-      showStatus(data.message);
-    }
+    // The sandbox's own progress prose is written for a developer reading
+    // the console, so it is left there. The stage messages narrate this step
+    // to the user, and `done` is the part the loading screen acts on.
     if (data.done === true) {
       dismissLoading();
     }

From 3d77a23a01d02412bfe3d3d14563f38178997a74 Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Fri, 7 Aug 2026 14:37:25 +0100
Subject: [PATCH 13/24] Reword the loading messages to name the domain and drop
 the chain jargon

---
 apps/host/index.html  |  2 +-
 apps/host/src/main.ts |  2 ++
 packages/ui/src/ui.ts | 39 ++++++++++++++++++++++++++-------------
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/apps/host/index.html b/apps/host/index.html
index 0048e335..ff32c2a5 100644
--- a/apps/host/index.html
+++ b/apps/host/index.html
@@ -419,7 +419,7 @@ <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
           <!-- Held back until the load has run long enough to be worth
                explaining. A fast load shows only the bar. -->
           <div class="loading-status" id="loading-status">
-            <p id="status" aria-live="polite">Starting up</p>
+            <p id="status" aria-live="polite">Reaching out</p>
             <dl class="loading-metrics">
               <div class="loading-metric-peers">
                 <dt>Peers</dt>
diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index ad10f89f..390f8c7c 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -32,6 +32,7 @@ import {
   advancePhase,
   nudgePhaseProgress,
   setLoadingMetrics,
+  setLoadingDomain,
   setLifecycleStatus,
   stopStatusTick,
   listenForSandboxStatus,
@@ -1268,6 +1269,7 @@ async function main(): Promise<void> {
   // It is always the last phase; advance to it just before handing off to the
   // sandbox render.
   const contentFetchPhase = chainBackend === "rpc-gateway" ? 2 : 4;
+  setLoadingDomain(label);
   advancePhase(0);
 
   // Advance the loading bar from smoldot's typed lifecycle stream instead of
diff --git a/packages/ui/src/ui.ts b/packages/ui/src/ui.ts
index 76134f45..75db0cdd 100644
--- a/packages/ui/src/ui.ts
+++ b/packages/ui/src/ui.ts
@@ -66,9 +66,8 @@ const CRAWL_TICK_MS = 200;
 // exhausted the bar creeps on into the next band's space, which is free
 // because the step that owns it has not started. The creep is slow enough to
 // read as waiting rather than as a second, faster load, and it stops short
-// of 100 so only a finished load can fill the bar.
-// Paced so the displayed whole number keeps changing every few seconds
-// rather than only twice over the whole creep.
+// of 100 so only a finished load can fill the bar. Paced so the displayed
+// whole number keeps changing every few seconds rather than twice in total.
 const CREEP_CEILING = 99;
 const CREEP_MS = 10_000;
 let creepCeiling = 0;
@@ -147,6 +146,9 @@ export const STATUS_REVEAL_MS = 3_000;
 // it so a tick that lands late still clears the bar.
 const MESSAGE_ROTATE_MS = 2_800;
 
+/** Placeholder swapped for the domain being loaded when a message is shown. */
+const DOMAIN_TOKEN = "{domain}";
+
 /** The steps a load moves through, in the order they happen. */
 export type LoadingStage =
   | "starting"
@@ -168,41 +170,52 @@ export type LoadingStage =
  */
 const STAGE_MESSAGES: Record<LoadingStage, string[]> = {
   starting: [
-    "Starting up",
-    "This page checks the blockchain itself, with no server in between",
+    "Reaching out",
+    "This page is verified by a network, with no one in between",
     "That takes a few seconds the first time",
   ],
   relay: [
     "Connecting to Polkadot",
     "Looking for other computers on the network to talk to",
-    "Your browser is running a small node of its own",
+    "Your browser does the checking itself, not a server",
   ],
   assetHub: [
-    "Looking up the name",
+    `Looking up ${DOMAIN_TOKEN}`,
     "Catching up with the latest blocks",
-    "The name and its address are being read from the chain",
+    "The name and its address come from the network itself",
     "This is the slow part, and it is faster next time",
   ],
   resolving: [
-    "Found the name",
+    "I found it",
     "Reading the address it points at",
-    "The chain proved this answer, so it cannot be faked",
+    "The network proved this answer, so it cannot be faked",
   ],
   content: [
     "Downloading the app",
-    "The files come from other people on the network, piece by piece",
-    "Speed depends on how many of them are nearby",
+    "The files come from multiple peers across the network",
+    "Speed depends on how many are nearby",
     "Almost there",
   ],
 };
 
 let stageTimer: ReturnType<typeof setInterval> | null = null;
 let currentStage: LoadingStage | "" = "";
+let loadingDomain = "";
+
+/** Name the domain being loaded, for the messages that mention it. */
+export function setLoadingDomain(domain: string): void {
+  loadingDomain = domain;
+}
 
 function writeStatus(message: string): void {
   const status = document.getElementById("status");
   if (status !== null) {
-    status.textContent = message;
+    // Falls back to "the name" when no domain has been set, which is the
+    // preview and local-target paths where there is no `.dot` to name.
+    status.textContent = message.replace(
+      DOMAIN_TOKEN,
+      loadingDomain === "" ? "the name" : `${loadingDomain}.dot`,
+    );
   }
 }
 

From 1467f12891f60eb7502e34d1e2396798e6d9f353 Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Fri, 7 Aug 2026 15:11:03 +0100
Subject: [PATCH 14/24] Turn the logo into the progress indicator and retire
 the loading bar

---
 apps/host/index.html              | 112 +++++++++++++-----------------
 apps/host/src/main.ts             |   9 +++
 packages/ui/src/styles/base.css   | 110 +++++++++++++----------------
 packages/ui/src/styles/themes.css |  26 +++----
 packages/ui/src/ui.ts             |  73 ++++++++++++-------
 5 files changed, 161 insertions(+), 169 deletions(-)

diff --git a/apps/host/index.html b/apps/host/index.html
index ff32c2a5..980d1446 100644
--- a/apps/host/index.html
+++ b/apps/host/index.html
@@ -375,45 +375,61 @@ <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
     <!-- App Content -->
     <div id="app">
       <div class="loading">
-        <div class="loading-logo" id="loading-logo">
+        <!-- Progress is the logo colouring itself in: an empty outline with
+             a solid copy stacked on top, revealed from the bottom. The paths
+             are defined once and referenced by the second layer. -->
+        <div
+          class="loading-logo"
+          id="loading-logo"
+          role="progressbar"
+          aria-label="Loading"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          aria-valuenow="0"
+        >
           <svg
-            width="52"
-            height="52"
+            class="loading-logo-art loading-logo-empty"
             viewBox="0 0 256 256"
-            fill="none"
             xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
           >
-            <path
-              class="loading-petal"
-              d="M31.0155 57.7181C14.6547 76.7768 14.2233 103.306 30.0862 116.92C45.9492 130.566 72.0667 126.15 88.4607 107.058C104.821 87.9995 105.253 61.4701 89.3899 47.8567C83.1841 42.511 75.3522 39.9543 67.1884 39.9543C54.5113 39.9543 40.9713 46.1302 31.0155 57.7181Z"
-            />
-            <path
-              class="loading-petal"
-              d="M26.2694 156.332C13.9574 170.941 19.3003 195.744 38.2164 211.715C57.1326 227.686 82.4868 228.815 94.7989 214.205C107.111 199.596 101.768 174.793 82.8518 158.822C72.8296 150.355 61.0153 146.072 50.2962 146.072C40.7718 146.072 32.077 149.459 26.3026 156.332"
-            />
-            <path
-              class="loading-petal"
-              d="M137.343 209.789C115.142 216.795 99.8429 231.072 103.161 241.664C106.513 252.256 127.221 255.178 149.423 248.139C171.625 241.133 186.923 226.856 183.605 216.264C181.481 209.59 172.454 205.938 160.507 205.938C153.505 205.938 145.54 207.166 137.343 209.756"
-            />
-            <path
-              class="loading-petal"
-              d="M102.597 18.5365C98.0176 31.7514 112.553 48.8179 135.12 56.6871C157.686 64.5562 179.689 60.2066 184.268 46.9917C188.848 33.7768 174.313 16.7103 151.746 8.84109C144.146 6.18482 136.58 4.9231 129.744 4.9231C116.303 4.9231 105.617 9.77078 102.597 18.5365Z"
-            />
-            <path
-              class="loading-petal"
-              d="M204.048 45.169C197.51 47.7921 199.07 66.884 207.499 87.7357C215.928 108.621 228.041 123.396 234.579 120.773C241.083 118.15 239.557 99.0912 231.128 78.2063C223.362 58.9484 212.444 44.8702 205.674 44.8702C205.11 44.8702 204.579 44.9698 204.048 45.169Z"
-            />
-            <path
-              class="loading-petal"
-              d="M209.058 172.038C199.766 192.192 196.547 210.553 201.89 213.01C207.233 215.468 219.114 201.124 228.406 180.969C237.731 160.815 240.917 142.453 235.607 139.996C235.209 139.797 234.778 139.731 234.28 139.731C228.472 139.731 217.654 153.411 209.058 172.038Z"
-            />
+            <g id="loading-petals">
+              <path
+                class="loading-petal"
+                d="M31.0155 57.7181C14.6547 76.7768 14.2233 103.306 30.0862 116.92C45.9492 130.566 72.0667 126.15 88.4607 107.058C104.821 87.9995 105.253 61.4701 89.3899 47.8567C83.1841 42.511 75.3522 39.9543 67.1884 39.9543C54.5113 39.9543 40.9713 46.1302 31.0155 57.7181Z"
+              />
+              <path
+                class="loading-petal"
+                d="M26.2694 156.332C13.9574 170.941 19.3003 195.744 38.2164 211.715C57.1326 227.686 82.4868 228.815 94.7989 214.205C107.111 199.596 101.768 174.793 82.8518 158.822C72.8296 150.355 61.0153 146.072 50.2962 146.072C40.7718 146.072 32.077 149.459 26.3026 156.332"
+              />
+              <path
+                class="loading-petal"
+                d="M137.343 209.789C115.142 216.795 99.8429 231.072 103.161 241.664C106.513 252.256 127.221 255.178 149.423 248.139C171.625 241.133 186.923 226.856 183.605 216.264C181.481 209.59 172.454 205.938 160.507 205.938C153.505 205.938 145.54 207.166 137.343 209.756"
+              />
+              <path
+                class="loading-petal"
+                d="M102.597 18.5365C98.0176 31.7514 112.553 48.8179 135.12 56.6871C157.686 64.5562 179.689 60.2066 184.268 46.9917C188.848 33.7768 174.313 16.7103 151.746 8.84109C144.146 6.18482 136.58 4.9231 129.744 4.9231C116.303 4.9231 105.617 9.77078 102.597 18.5365Z"
+              />
+              <path
+                class="loading-petal"
+                d="M204.048 45.169C197.51 47.7921 199.07 66.884 207.499 87.7357C215.928 108.621 228.041 123.396 234.579 120.773C241.083 118.15 239.557 99.0912 231.128 78.2063C223.362 58.9484 212.444 44.8702 205.674 44.8702C205.11 44.8702 204.579 44.9698 204.048 45.169Z"
+              />
+              <path
+                class="loading-petal"
+                d="M209.058 172.038C199.766 192.192 196.547 210.553 201.89 213.01C207.233 215.468 219.114 201.124 228.406 180.969C237.731 160.815 240.917 142.453 235.607 139.996C235.209 139.797 234.778 139.731 234.28 139.731C228.472 139.731 217.654 153.411 209.058 172.038Z"
+              />
+            </g>
           </svg>
-        </div>
-        <div class="loading-progress" id="loading-progress">
-          <div class="loading-progress-bar">
-            <div class="loading-progress-fill" id="loading-progress-fill"></div>
+          <div class="loading-logo-fill" id="loading-logo-fill">
+            <svg
+              class="loading-logo-art"
+              viewBox="0 0 256 256"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <use href="#loading-petals" />
+            </svg>
           </div>
-          <span class="loading-progress-pct" id="loading-progress-pct">0%</span>
         </div>
         <div class="loading-text" id="loading-text">
           <!-- Held back until the load has run long enough to be worth
@@ -439,7 +455,7 @@ <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
                 <dd id="metric-speed">&mdash;</dd>
               </div>
               <div class="loading-metric">
-                <dt>Light client</dt>
+                <dt>Status</dt>
                 <dd id="metric-lifecycle">starting</dd>
               </div>
             </dl>
@@ -448,34 +464,6 @@ <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
         </div>
       </div>
     </div>
-    <script>
-      // Logo spinner — rAF-driven for smooth petal cycling
-      (function () {
-        var petals = document.querySelectorAll(".loading-petal");
-        if (!petals.length) return;
-        var count = petals.length;
-        var cycle = 1400;
-        var start = null;
-        var raf;
-        function tick(ts) {
-          if (!start) start = ts;
-          var p = ((ts - start) % cycle) / cycle;
-          for (var i = 0; i < count; i++) {
-            var dist = p - i / count;
-            if (dist < 0) dist += 1;
-            var b = Math.max(0.15, Math.pow(Math.max(0, 1 - dist * 2.5), 2));
-            petals[i].style.opacity = b;
-            petals[i].style.transform = "scale(" + (0.92 + 0.08 * b) + ")";
-          }
-          raf = requestAnimationFrame(tick);
-        }
-        raf = requestAnimationFrame(tick);
-        // Stop when loading is replaced
-        window.__stopLoadingSpinner = function () {
-          cancelAnimationFrame(raf);
-        };
-      })();
-    </script>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index 390f8c7c..fb5a2e47 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -33,6 +33,7 @@ import {
   nudgePhaseProgress,
   setLoadingMetrics,
   setLoadingDomain,
+  setLoadingStage,
   setLifecycleStatus,
   stopStatusTick,
   listenForSandboxStatus,
@@ -1352,6 +1353,14 @@ async function main(): Promise<void> {
       // said the same thing twice.
       if (totalBytes !== null && totalBytes > 0) {
         nudgePhaseProgress(bytesFetched / totalBytes);
+        // The tail of the load is the sandbox unpacking the archive and
+        // painting, which used to hide behind download copy while the bar
+        // crept. Only blocks relayed for the sandbox are counted here, and
+        // the sandbox is mounted after the content phase begins, so this
+        // cannot fire while an earlier step is still on screen.
+        if (bytesFetched >= totalBytes) {
+          setLoadingStage("preparing");
+        }
       }
     });
   }
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index c5e236a5..7f1f47ff 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -59,84 +59,56 @@ body {
   min-height: calc(100vh - 56px);
 }
 
-/* Loading logo spinner — rAF-driven via JS, CSS just sets transform-origin */
+/* The logo is the progress indicator: an empty outline that colours itself
+   in from the bottom as the load advances. It replaced a separate 2px bar
+   and a petal-chase spinner, which between them showed motion that had
+   nothing to do with progress. */
 .loading-logo {
+  position: relative;
+  width: 96px;
+  height: 96px;
   margin-bottom: 32px;
   transition: opacity 0.8s ease;
 }
-.loading-logo svg {
+.loading-logo-art {
+  display: block;
+  width: 100%;
+  height: 100%;
   overflow: visible;
 }
-.loading-petal {
+/* Colour is set on the layers, not on `.loading-petal`. The filled layer is
+   a `<use>` of the same paths, and a clone takes the referenced element's
+   own computed styles, so a `fill` declared on the paths would apply to both
+   copies. Inherited `fill` does reach into the clone, which is what lets the
+   two layers differ. */
+.loading-logo-empty {
+  fill: rgba(255, 255, 255, 0.16);
+}
+.loading-logo-fill {
+  position: absolute;
+  inset: 0;
   fill: #fff;
-  transform-origin: 128px 128px;
-}
-
-/* Progress bar */
-.loading-progress {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 24px;
-  width: 240px;
-  max-width: calc(100vw - 48px);
-}
-.loading-progress-bar {
-  flex: 1;
-  height: 2px;
-  background: rgba(255, 255, 255, 0.08);
-  border-radius: 1px;
-  overflow: hidden;
-}
-.loading-progress-fill {
-  position: relative;
-  height: 100%;
-  width: 0%;
-  background: rgba(255, 255, 255, 0.5);
-  border-radius: 1px;
-  transition: width 0.4s ease-out;
-  overflow: hidden;
-}
-/* Continuous sheen sweeping the filled portion. The simulated crawl can sit
-   near a band's top during a long sync with no real progress to report. The
-   sheen keeps visible motion so the bar never reads as frozen. */
-@media (prefers-reduced-motion: no-preference) {
-  .loading-progress-fill::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(
-      90deg,
-      transparent 0%,
-      rgba(255, 255, 255, 0.9) 50%,
-      transparent 100%
-    );
-    transform: translateX(-100%);
-    animation: loading-progress-sheen 1.4s ease-in-out infinite;
-  }
-}
-@keyframes loading-progress-sheen {
-  to {
-    transform: translateX(100%);
+  /* Clipped to nothing at 0%, revealed upward as `setProgress` rewrites the
+     inset. One interpolatable property, so the 200ms crawl ticks glide
+     instead of stepping. */
+  clip-path: inset(100% 0 0 0);
+  transition: clip-path 0.4s ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .loading-logo-fill {
+    transition: none;
   }
 }
+
 /* The loading text ranks by size, weight, and family, never by contrast:
    every string here has to clear 4.5:1 against the page. Dimming with
    `opacity` is what used to sink the whole block to 1.8-3.2:1, so these
    are solid colours measured against #0a0a0a (dark) and #f5f5f5 (light,
    see themes.css). */
-.loading-progress-pct {
-  font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
-  font-size: 11px;
-  /* 6.12:1 */
-  color: #8f8f8f;
-  min-width: 3ch;
-  text-align: right;
-}
 
 /* Text block: the status block and the slow-step hint. Both are
    conditional, so the block collapses to nothing on a fast load and the
-   bar sits alone. */
+   logo sits alone. */
 .loading-text {
   display: flex;
   flex-direction: column;
@@ -173,7 +145,9 @@ body {
   pointer-events: auto;
 }
 .loading-metrics {
-  margin-top: 10px;
+  /* Matches `.loading-logo`'s bottom margin, so the headline sits an equal
+     distance from the logo above it and the readouts below it. */
+  margin-top: 32px;
   font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
   font-size: 11px;
   /* The loading block is centred, so the list centres as a unit while its
@@ -181,7 +155,12 @@ body {
      the middle of the column. */
   display: inline-block;
   text-align: left;
-  min-width: 200px;
+  /* Fixed, not `min-width`. These readouts change while they are on screen,
+     and a box that grows with its content re-centres the whole block every
+     time a value gets longer. Sized to the widest row the readouts can
+     produce, which is "Asset Hub waiting for peers" at 243px. */
+  width: 248px;
+  max-width: 100%;
 }
 .loading-metric {
   display: flex;
@@ -198,6 +177,11 @@ body {
 .loading-metric span:last-child {
   /* 7.85:1 */
   color: #a3a3a3;
+  /* Last line of defence: a value wider than the row must clip rather than
+     wrap and shove the rows below it down. */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 /* Peers is a heading over its chains rather than a row of its own, so the
    chain names sit under it and the numbers keep the same right edge. */
diff --git a/packages/ui/src/styles/themes.css b/packages/ui/src/styles/themes.css
index 5f667fef..6f92a697 100644
--- a/packages/ui/src/styles/themes.css
+++ b/packages/ui/src/styles/themes.css
@@ -225,26 +225,16 @@
 [data-theme="light"] .loading-gateway-btn-sub {
   color: rgba(0, 0, 0, 0.55);
 }
-[data-theme="light"] .loading-progress-bar {
-  background: rgba(0, 0, 0, 0.06);
-}
-[data-theme="light"] .loading-progress-fill {
-  /* The fill is the state indicator, so it needs 3:1 as a non-text
-     component. 0.35 gave 2.43:1 against the page; 0.5 gives 3.88:1. */
-  background: rgba(0, 0, 0, 0.5);
-}
-/* Loading logo — dark-mode uses `fill: #fff` on the petals, which is
-   invisible on the light-theme cream body. Flip to near-black so the
-   animated logo actually shows during cold starts. */
-[data-theme="light"] .loading-petal {
+/* Loading logo. The dark theme fills with #fff, which is invisible on the
+   light-theme cream body, so both layers flip. The filled layer is the state
+   indicator and needs 3:1 as a non-text component: #111 on #f5f5f5 clears
+   that with room to spare. The empty layer is the track, so it stays faint. */
+[data-theme="light"] .loading-logo-empty {
+  fill: rgba(0, 0, 0, 0.12);
+}
+[data-theme="light"] .loading-logo-fill {
   fill: #111;
 }
-[data-theme="light"] .loading-progress-pct {
-  /* 4.89:1, and kept below the detail line so the ranking survives the
-     flip. #333 would clear AA too, but it would outrank the headline's
-     own secondary line. */
-  color: #6b6b6b;
-}
 [data-theme="light"] .loading-status-heading,
 [data-theme="light"] .loading-details-summary,
 [data-theme="light"] .loading-metric dt {
diff --git a/packages/ui/src/ui.ts b/packages/ui/src/ui.ts
index 75db0cdd..75cbbd6f 100644
--- a/packages/ui/src/ui.ts
+++ b/packages/ui/src/ui.ts
@@ -45,9 +45,9 @@ export interface LoadingPhase {
 let phases: LoadingPhase[] = [];
 let currentPhase = -1;
 
-// Progress bar state
+// Progress indicator state
 let progressFillEl: HTMLElement | null = null;
-let progressPctEl: HTMLElement | null = null;
+let progressLogoEl: HTMLElement | null = null;
 let statusBlockEl: HTMLElement | null = null;
 let metricAssetHubPeersEl: HTMLElement | null = null;
 let metricBulletinPeersEl: HTMLElement | null = null;
@@ -76,11 +76,12 @@ let creepStep = 0;
 function setProgress(pct: number): void {
   currentProgress = pct;
   if (progressFillEl !== null) {
-    progressFillEl.style.width = `${String(pct)}%`;
-  }
-  if (progressPctEl !== null) {
-    progressPctEl.textContent = `${String(Math.round(pct))}%`;
+    // Clip away the top, so the colour rises from the bottom of the logo.
+    progressFillEl.style.clipPath = `inset(${String(100 - pct)}% 0 0 0)`;
   }
+  // The bar carried no percentage for a screen reader to announce. Now that
+  // the logo is the indicator, it says the number out loud.
+  progressLogoEl?.setAttribute("aria-valuenow", String(Math.round(pct)));
 }
 
 function startProgressCrawl(): void {
@@ -104,7 +105,7 @@ function stopProgressCrawl(): void {
 }
 
 /**
- * Snap the progress bar to 100%.
+ * Fill the logo completely.
  * Called when loading is done, before the overlay fades out.
  */
 export function completeProgress(): void {
@@ -113,7 +114,7 @@ export function completeProgress(): void {
 }
 
 /**
- * Initialize the loading progress bar.
+ * Initialize the loading progress indicator.
  * Call once before resolution/fetching begins.
  */
 export function initPhases(phaseList: LoadingPhase[]): void {
@@ -122,8 +123,8 @@ export function initPhases(phaseList: LoadingPhase[]): void {
   currentProgress = 0;
   targetProgress = 0;
 
-  progressFillEl = document.getElementById("loading-progress-fill");
-  progressPctEl = document.getElementById("loading-progress-pct");
+  progressFillEl = document.getElementById("loading-logo-fill");
+  progressLogoEl = document.getElementById("loading-logo");
   statusBlockEl = document.getElementById("loading-status");
   metricAssetHubPeersEl = document.getElementById("metric-peers-assethub");
   metricBulletinPeersEl = document.getElementById("metric-peers-bulletin");
@@ -150,12 +151,15 @@ const MESSAGE_ROTATE_MS = 2_800;
 const DOMAIN_TOKEN = "{domain}";
 
 /** The steps a load moves through, in the order they happen. */
-export type LoadingStage =
-  | "starting"
-  | "relay"
-  | "assetHub"
-  | "resolving"
-  | "content";
+export const LOADING_STAGES = [
+  "starting",
+  "relay",
+  "assetHub",
+  "resolving",
+  "content",
+  "preparing",
+] as const;
+export type LoadingStage = (typeof LOADING_STAGES)[number];
 
 /**
  * What the shell is doing, in the user's terms.
@@ -167,6 +171,12 @@ export type LoadingStage =
  * each stage names the step. The rest explain what a light client is doing
  * and why it takes the time it does, so a slow load teaches something
  * instead of just apologising.
+ *
+ * The lists are sized to how long each step actually runs, measured over ten
+ * cold loads: content is the long pole at a 13s median and 89s worst case,
+ * while every other step finishes inside 1.5s and rarely shows more than its
+ * opener. Content and preparing therefore carry enough lines to cover a slow
+ * load without repeating.
  */
 const STAGE_MESSAGES: Record<LoadingStage, string[]> = {
   starting: [
@@ -194,12 +204,21 @@ const STAGE_MESSAGES: Record<LoadingStage, string[]> = {
     "Downloading the app",
     "The files come from multiple peers across the network",
     "Speed depends on how many are nearby",
+    "Every piece is checked against its fingerprint as it lands",
+    "No single machine is serving this, so there is nothing to take down",
+    "Bigger apps take longer the first time",
+    "Your browser keeps a copy, so the next visit is quick",
+  ],
+  preparing: [
+    "Download complete. We are preparing your app.",
+    "Unpacking the files",
+    "Handing over to the app",
     "Almost there",
   ],
 };
 
 let stageTimer: ReturnType<typeof setInterval> | null = null;
-let currentStage: LoadingStage | "" = "";
+let currentStageIndex = -1;
 let loadingDomain = "";
 
 /** Name the domain being loaded, for the messages that mention it. */
@@ -222,24 +241,26 @@ function writeStatus(message: string): void {
 /**
  * Move to a stage and start cycling its messages.
  *
- * Re-entering a stage already running is ignored, so the copy does not
- * restart every time a signal arrives for a step that is already underway.
+ * Only ever moves forward. Re-entering the running stage is ignored so the
+ * copy does not restart on every signal for a step already underway, and an
+ * earlier stage is refused so a late event cannot walk the story backwards.
  */
 export function setLoadingStage(stage: LoadingStage): void {
-  if (stage === currentStage) {
+  const stageIndex = LOADING_STAGES.indexOf(stage);
+  if (stageIndex <= currentStageIndex) {
     return;
   }
-  currentStage = stage;
+  currentStageIndex = stageIndex;
   const messages = STAGE_MESSAGES[stage];
-  let index = 0;
+  let line = 0;
   writeStatus(messages[0]);
   stopStageMessages();
   // Cycle back to the second line rather than the first: the opener names
   // the step, and showing it again would read as the load starting over.
   const loopFrom = messages.length > 2 ? 1 : 0;
   stageTimer = setInterval(() => {
-    index = index + 1 >= messages.length ? loopFrom : index + 1;
-    writeStatus(messages[index]);
+    line = line + 1 >= messages.length ? loopFrom : line + 1;
+    writeStatus(messages[line]);
   }, MESSAGE_ROTATE_MS);
 }
 
@@ -285,8 +306,8 @@ export function setLoadingMetrics(metrics: {
 
 /**
  * Advance to a specific phase (0-indexed).
- * Jumps the progress bar to the phase's base percentage and begins
- * crawling toward its target. Updates the headline text.
+ * Jumps the indicator to the phase's base percentage and begins crawling
+ * toward its target. Updates the headline text.
  * No-ops if the phase is already active or past.
  */
 export function advancePhase(index: number): void {

From 045b735050ee4a29c9ef19bf6e4e04cf50870016 Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Fri, 7 Aug 2026 15:17:28 +0100
Subject: [PATCH 15/24] Fill the logo left to right and retype the status line
 character by character

---
 apps/host/index.html            |  7 +++-
 packages/ui/src/styles/base.css | 27 +++++++++----
 packages/ui/src/ui.ts           | 68 ++++++++++++++++++++++++++++-----
 3 files changed, 85 insertions(+), 17 deletions(-)

diff --git a/apps/host/index.html b/apps/host/index.html
index 980d1446..15f61858 100644
--- a/apps/host/index.html
+++ b/apps/host/index.html
@@ -435,7 +435,12 @@ <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
           <!-- Held back until the load has run long enough to be worth
                explaining. A fast load shows only the bar. -->
           <div class="loading-status" id="loading-status">
-            <p id="status" aria-live="polite">Reaching out</p>
+            <!-- The visible line is typed a character at a time, which
+                 would make a live region announce every partial string, so
+                 the announcement is split into its own hidden element that
+                 only ever receives whole sentences. -->
+            <p id="status" aria-hidden="true">Reaching out</p>
+            <p class="sr-only" id="status-sr" aria-live="polite"></p>
             <dl class="loading-metrics">
               <div class="loading-metric-peers">
                 <dt>Peers</dt>
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index 7f1f47ff..20b27d4d 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -60,9 +60,9 @@ body {
 }
 
 /* The logo is the progress indicator: an empty outline that colours itself
-   in from the bottom as the load advances. It replaced a separate 2px bar
-   and a petal-chase spinner, which between them showed motion that had
-   nothing to do with progress. */
+   in from the left as the load advances. It replaced a separate 2px bar and
+   a petal-chase spinner, which between them showed motion that had nothing
+   to do with progress. */
 .loading-logo {
   position: relative;
   width: 96px;
@@ -88,10 +88,10 @@ body {
   position: absolute;
   inset: 0;
   fill: #fff;
-  /* Clipped to nothing at 0%, revealed upward as `setProgress` rewrites the
-     inset. One interpolatable property, so the 200ms crawl ticks glide
-     instead of stepping. */
-  clip-path: inset(100% 0 0 0);
+  /* Clipped to nothing at 0%, revealed left to right as `setProgress`
+     rewrites the inset. One interpolatable property, so the 200ms crawl
+     ticks glide instead of stepping. */
+  clip-path: inset(0 100% 0 0);
   transition: clip-path 0.4s ease-out;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -118,6 +118,19 @@ body {
   max-width: 420px;
   flex-shrink: 0;
 }
+/* Off-screen but still announced. `display: none` and `visibility: hidden`
+   would take it out of the accessibility tree too. */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
 #status {
   font-size: 13px;
   font-weight: 500;
diff --git a/packages/ui/src/ui.ts b/packages/ui/src/ui.ts
index 75cbbd6f..f0daf41b 100644
--- a/packages/ui/src/ui.ts
+++ b/packages/ui/src/ui.ts
@@ -76,8 +76,8 @@ let creepStep = 0;
 function setProgress(pct: number): void {
   currentProgress = pct;
   if (progressFillEl !== null) {
-    // Clip away the top, so the colour rises from the bottom of the logo.
-    progressFillEl.style.clipPath = `inset(${String(100 - pct)}% 0 0 0)`;
+    // Clip away the right, so the colour sweeps in from the left edge.
+    progressFillEl.style.clipPath = `inset(0 ${String(100 - pct)}% 0 0)`;
   }
   // The bar carried no percentage for a screen reader to announce. Now that
   // the logo is the indicator, it says the number out loud.
@@ -150,6 +150,10 @@ const MESSAGE_ROTATE_MS = 2_800;
 /** Placeholder swapped for the domain being loaded when a message is shown. */
 const DOMAIN_TOKEN = "{domain}";
 
+function prefersReducedMotion(): boolean {
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
 /** The steps a load moves through, in the order they happen. */
 export const LOADING_STAGES = [
   "starting",
@@ -226,16 +230,61 @@ export function setLoadingDomain(domain: string): void {
   loadingDomain = domain;
 }
 
+// The old line is deleted a character at a time and the new one typed in.
+// Both are given a fixed budget rather than a per-character delay, so a long
+// sentence animates at the same pace as a short one and always lands well
+// inside the rotation interval.
+const ERASE_MS = 260;
+const TYPE_MS = 620;
+let typingFrame: number | null = null;
+
+function cancelTyping(): void {
+  if (typingFrame !== null) {
+    cancelAnimationFrame(typingFrame);
+    typingFrame = null;
+  }
+}
+
 function writeStatus(message: string): void {
   const status = document.getElementById("status");
-  if (status !== null) {
-    // Falls back to "the name" when no domain has been set, which is the
-    // preview and local-target paths where there is no `.dot` to name.
-    status.textContent = message.replace(
-      DOMAIN_TOKEN,
-      loadingDomain === "" ? "the name" : `${loadingDomain}.dot`,
-    );
+  if (status === null) {
+    return;
+  }
+  // Falls back to "the name" when no domain has been set, which is the
+  // preview and local-target paths where there is no `.dot` to name.
+  const next = message.replace(
+    DOMAIN_TOKEN,
+    loadingDomain === "" ? "the name" : `${loadingDomain}.dot`,
+  );
+  const previous = status.textContent;
+  cancelTyping();
+  // Screen readers get the whole sentence once, from an element the typing
+  // never touches.
+  const announce = document.getElementById("status-sr");
+  if (announce !== null) {
+    announce.textContent = next;
+  }
+  if (next === previous || prefersReducedMotion()) {
+    status.textContent = next;
+    return;
   }
+  const start = performance.now();
+  const step = (now: number): void => {
+    const elapsedMs = now - start;
+    if (elapsedMs < ERASE_MS) {
+      const keep = Math.ceil(previous.length * (1 - elapsedMs / ERASE_MS));
+      status.textContent = previous.slice(0, keep);
+    } else if (elapsedMs < ERASE_MS + TYPE_MS) {
+      const typed = Math.ceil(next.length * ((elapsedMs - ERASE_MS) / TYPE_MS));
+      status.textContent = next.slice(0, typed);
+    } else {
+      status.textContent = next;
+      typingFrame = null;
+      return;
+    }
+    typingFrame = requestAnimationFrame(step);
+  };
+  typingFrame = requestAnimationFrame(step);
 }
 
 /**
@@ -269,6 +318,7 @@ function stopStageMessages(): void {
     clearInterval(stageTimer);
     stageTimer = null;
   }
+  cancelTyping();
 }
 
 /** Report what the light client itself is doing, e.g. "syncing Asset Hub". */

From 336321738c1394aa84efdac749adcbcc385fdb75 Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Fri, 7 Aug 2026 15:45:10 +0100
Subject: [PATCH 16/24] Slow and ease the status line turnover, match the
 network panel padding to settings, and restore Completed

---
 apps/host/index.html            |   8 ++-
 apps/host/src/main.ts           |   1 +
 packages/ui/src/styles/base.css |  23 +++----
 packages/ui/src/ui.ts           | 113 +++++++++++++++++++++++++++-----
 4 files changed, 112 insertions(+), 33 deletions(-)

diff --git a/apps/host/index.html b/apps/host/index.html
index 15f61858..d83e6971 100644
--- a/apps/host/index.html
+++ b/apps/host/index.html
@@ -442,6 +442,10 @@ <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
             <p id="status" aria-hidden="true">Reaching out</p>
             <p class="sr-only" id="status-sr" aria-live="polite"></p>
             <dl class="loading-metrics">
+              <div class="loading-metric">
+                <dt>Status</dt>
+                <dd id="metric-lifecycle">starting</dd>
+              </div>
               <div class="loading-metric-peers">
                 <dt>Peers</dt>
                 <dd>
@@ -460,8 +464,8 @@ <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
                 <dd id="metric-speed">&mdash;</dd>
               </div>
               <div class="loading-metric">
-                <dt>Status</dt>
-                <dd id="metric-lifecycle">starting</dd>
+                <dt>Completed</dt>
+                <dd id="metric-completed">&mdash;</dd>
               </div>
             </dl>
           </div>
diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index fb5a2e47..4cc31b39 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -1352,6 +1352,7 @@ async function main(): Promise<void> {
       // a percentage belongs. Printing the same number as text alongside it
       // said the same thing twice.
       if (totalBytes !== null && totalBytes > 0) {
+        setLoadingMetrics({ completedFraction: bytesFetched / totalBytes });
         nudgePhaseProgress(bytesFetched / totalBytes);
         // The tail of the load is the sandbox unpacking the archive and
         // painting, which used to hide behind download copy while the bar
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index 20b27d4d..ba45d275 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -414,17 +414,15 @@ body {
 .topbar-chains-btn.visible {
   display: inline-flex;
 }
+/* Settings owns the popover recipe: 6px on the shell from `.more-popover`,
+   and each child carries its own inset. This panel keeps that rather than
+   padding the shell, so the two popovers have identical edges. The children
+   below therefore repeat `.mode-popover-section`'s 14px. It has to be margin
+   on the table: padding on a `border-collapse` table does not move its
+   cells, so a padded table would sit left of the heading. */
 .chains-popover {
   min-width: 300px;
-  /* The inset lives here rather than on the rows: padding on a
-     border-collapse table does not move its cells, so the table would drift
-     left of the heading. Section headers carry their own 14px, zeroed just
-     below so everything shares this one edge. */
-  padding: 10px 14px 14px;
-}
-.chains-popover .mode-popover-section {
-  padding-left: 0;
-  padding-right: 0;
+  padding-bottom: 8px;
 }
 
 /* Network panel */
@@ -435,8 +433,7 @@ body {
   font-size: 12px;
   /* 13.36:1 */
   color: #d4d4d4;
-  padding-top: 2px;
-  padding-bottom: 10px;
+  padding: 2px 14px 10px;
 }
 .chains-status-dot {
   width: 8px;
@@ -454,8 +451,8 @@ body {
   background: #8f8f8f;
 }
 .chains-table {
-  width: 100%;
-  margin-top: 2px;
+  width: calc(100% - 28px);
+  margin: 2px 14px 0;
   border-collapse: collapse;
   font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
   font-size: 11px;
diff --git a/packages/ui/src/ui.ts b/packages/ui/src/ui.ts
index f0daf41b..1a7b918c 100644
--- a/packages/ui/src/ui.ts
+++ b/packages/ui/src/ui.ts
@@ -52,6 +52,7 @@ let statusBlockEl: HTMLElement | null = null;
 let metricAssetHubPeersEl: HTMLElement | null = null;
 let metricBulletinPeersEl: HTMLElement | null = null;
 let metricSpeedEl: HTMLElement | null = null;
+let metricCompletedEl: HTMLElement | null = null;
 let revealTimer: ReturnType<typeof setTimeout> | null = null;
 let currentProgress = 0;
 let targetProgress = 0;
@@ -120,6 +121,8 @@ export function completeProgress(): void {
 export function initPhases(phaseList: LoadingPhase[]): void {
   phases = phaseList;
   currentPhase = -1;
+  currentStageIndex = -1;
+  openingLine = true;
   currentProgress = 0;
   targetProgress = 0;
 
@@ -129,6 +132,7 @@ export function initPhases(phaseList: LoadingPhase[]): void {
   metricAssetHubPeersEl = document.getElementById("metric-peers-assethub");
   metricBulletinPeersEl = document.getElementById("metric-peers-bulletin");
   metricSpeedEl = document.getElementById("metric-speed");
+  metricCompletedEl = document.getElementById("metric-completed");
 
   // A load that finishes quickly should never explain itself. Only once it
   // has run long enough to feel slow does the status block appear.
@@ -138,14 +142,23 @@ export function initPhases(phaseList: LoadingPhase[]): void {
   revealTimer = setTimeout(() => {
     statusBlockEl?.classList.add("visible");
   }, STATUS_REVEAL_MS);
+
+  // Start narrating here rather than waiting for the first `advancePhase`,
+  // which lands a couple of seconds later once the protocol frame is up. The
+  // markup already shows this stage's opening line, so nothing moves on
+  // screen; what matters is that the rotation clock starts when the line
+  // first becomes visible, not when the resolver gets going. Without this the
+  // opener sat for over five seconds on a cold load.
+  setLoadingStage("starting");
 }
 
 /** How long a load may run before it owes the user an explanation. */
 export const STATUS_REVEAL_MS = 3_000;
 
-// No sentence may hold the screen longer than three seconds. Set just under
-// it so a tick that lands late still clears the bar.
-const MESSAGE_ROTATE_MS = 2_800;
+// No sentence holds the screen longer than three seconds. The turnover
+// animation runs inside this, so the finished sentence is actually still for
+// the last ~0.85s of it.
+const MESSAGE_ROTATE_MS = 3_000;
 
 /** Placeholder swapped for the domain being loaded when a message is shown. */
 const DOMAIN_TOKEN = "{domain}";
@@ -221,8 +234,10 @@ const STAGE_MESSAGES: Record<LoadingStage, string[]> = {
   ],
 };
 
-let stageTimer: ReturnType<typeof setInterval> | null = null;
+let stageTimer: ReturnType<typeof setTimeout> | null = null;
 let currentStageIndex = -1;
+/** True until the first stage turn, which the markup already painted. */
+let openingLine = true;
 let loadingDomain = "";
 
 /** Name the domain being loaded, for the messages that mention it. */
@@ -231,17 +246,38 @@ export function setLoadingDomain(domain: string): void {
 }
 
 // The old line is deleted a character at a time and the new one typed in.
-// Both are given a fixed budget rather than a per-character delay, so a long
-// sentence animates at the same pace as a short one and always lands well
-// inside the rotation interval.
-const ERASE_MS = 260;
-const TYPE_MS = 620;
+// Both get a fixed budget rather than a per-character delay, so a long
+// sentence animates at the same pace as a short one and always lands inside
+// the rotation interval. Together they take a little over two thirds of it,
+// which is as slow as the typing can go and still leave the finished
+// sentence sitting still long enough to be read.
+const ERASE_MS = 600;
+const TYPE_MS = 1_550;
 let typingFrame: number | null = null;
+let pendingMessage: string | null = null;
+
+/**
+ * Slow at both ends, quickest in the middle.
+ *
+ * A constant character rate is what made the change feel frantic: characters
+ * appeared and vanished at full speed the instant a sentence turned over.
+ * Easing means each sentence starts and finishes gently, and only the
+ * unremarkable middle runs fast.
+ */
+function easeInOut(t: number): number {
+  return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+}
 
 function cancelTyping(): void {
+  pendingMessage = null;
   if (typingFrame !== null) {
     cancelAnimationFrame(typingFrame);
     typingFrame = null;
+    // An interrupted fade would otherwise leave the line stranded dim.
+    const status = document.getElementById("status");
+    if (status !== null) {
+      status.style.opacity = "1";
+    }
   }
 }
 
@@ -256,14 +292,23 @@ function writeStatus(message: string): void {
     DOMAIN_TOKEN,
     loadingDomain === "" ? "the name" : `${loadingDomain}.dot`,
   );
-  const previous = status.textContent;
-  cancelTyping();
   // Screen readers get the whole sentence once, from an element the typing
   // never touches.
   const announce = document.getElementById("status-sr");
   if (announce !== null) {
     announce.textContent = next;
   }
+  // A sentence already being typed is left to finish. Stages turn over faster
+  // than a line takes to render on a quick load, and cutting one off mid-word
+  // meant a step's opening line was never actually read: the screen went
+  // straight from "Reaching out" to the download copy. Only the newest
+  // waiting sentence is kept, so the queue can never fall behind by more
+  // than one.
+  if (typingFrame !== null) {
+    pendingMessage = next;
+    return;
+  }
+  const previous = status.textContent;
   if (next === previous || prefersReducedMotion()) {
     status.textContent = next;
     return;
@@ -272,14 +317,30 @@ function writeStatus(message: string): void {
   const step = (now: number): void => {
     const elapsedMs = now - start;
     if (elapsedMs < ERASE_MS) {
-      const keep = Math.ceil(previous.length * (1 - elapsedMs / ERASE_MS));
-      status.textContent = previous.slice(0, keep);
+      const gone = easeInOut(elapsedMs / ERASE_MS);
+      status.textContent = previous.slice(
+        0,
+        Math.ceil(previous.length * (1 - gone)),
+      );
+      // Dims as it empties and brightens as the new line arrives, so the
+      // turnover reads as one settling motion rather than a text scramble.
+      // Only a shallow dip: this block's contrast is built on solid colours
+      // precisely because opacity once sank it below AA, and 0.75 of #d4d4d4
+      // is still 7.5:1 against the page.
+      status.style.opacity = String(1 - 0.25 * gone);
     } else if (elapsedMs < ERASE_MS + TYPE_MS) {
-      const typed = Math.ceil(next.length * ((elapsedMs - ERASE_MS) / TYPE_MS));
-      status.textContent = next.slice(0, typed);
+      const shown = easeInOut((elapsedMs - ERASE_MS) / TYPE_MS);
+      status.textContent = next.slice(0, Math.ceil(next.length * shown));
+      status.style.opacity = String(0.75 + 0.25 * shown);
     } else {
       status.textContent = next;
+      status.style.opacity = "1";
       typingFrame = null;
+      if (pendingMessage !== null) {
+        const queued = pendingMessage;
+        pendingMessage = null;
+        writeStatus(queued);
+      }
       return;
     }
     typingFrame = requestAnimationFrame(step);
@@ -307,15 +368,26 @@ export function setLoadingStage(stage: LoadingStage): void {
   // Cycle back to the second line rather than the first: the opener names
   // the step, and showing it again would read as the load starting over.
   const loopFrom = messages.length > 2 ? 1 : 0;
-  stageTimer = setInterval(() => {
+  // The opening line is in the markup, so it has been on screen since the
+  // page painted while this code waited on the protocol frame. Its turn is
+  // therefore due three seconds after the page appeared, not three seconds
+  // from here. Measured cold, that gap was 2.8s, and charging it to the
+  // first message left it up for 5.6s. Later turns get the full interval.
+  const firstDelay = openingLine
+    ? Math.max(500, MESSAGE_ROTATE_MS - performance.now())
+    : MESSAGE_ROTATE_MS;
+  openingLine = false;
+  const turn = (): void => {
     line = line + 1 >= messages.length ? loopFrom : line + 1;
     writeStatus(messages[line]);
-  }, MESSAGE_ROTATE_MS);
+    stageTimer = setTimeout(turn, MESSAGE_ROTATE_MS);
+  };
+  stageTimer = setTimeout(turn, firstDelay);
 }
 
 function stopStageMessages(): void {
   if (stageTimer !== null) {
-    clearInterval(stageTimer);
+    clearTimeout(stageTimer);
     stageTimer = null;
   }
   cancelTyping();
@@ -342,6 +414,7 @@ export function setLoadingMetrics(metrics: {
   assetHubPeers?: number;
   bulletinPeers?: number;
   bytesPerSecond?: number;
+  completedFraction?: number;
 }): void {
   if (metrics.assetHubPeers !== undefined && metricAssetHubPeersEl !== null) {
     metricAssetHubPeersEl.textContent = String(metrics.assetHubPeers);
@@ -352,6 +425,10 @@ export function setLoadingMetrics(metrics: {
   if (metrics.bytesPerSecond !== undefined && metricSpeedEl !== null) {
     metricSpeedEl.textContent = `${(metrics.bytesPerSecond / 1_048_576).toFixed(1)} MB/s`;
   }
+  if (metrics.completedFraction !== undefined && metricCompletedEl !== null) {
+    const pct = Math.min(100, Math.max(0, metrics.completedFraction * 100));
+    metricCompletedEl.textContent = `${String(Math.round(pct))} %`;
+  }
 }
 
 /**

From c9f74a25200bf2bdfda4fc2e5fef737fd23f0732 Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Fri, 7 Aug 2026 15:48:23 +0100
Subject: [PATCH 17/24] Spell the chain AssetHub in the light client status row

---
 apps/host/src/main.ts | 2 +-
 packages/ui/src/ui.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index 4cc31b39..3ef75183 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -188,7 +188,7 @@ const blockingModalCoordinator = createBlockingModalCoordinator();
 const CHAIN_NAMES: Record<ChainKey, string> = {
   relay: "Polkadot",
   "custom-relay": "Relay",
-  "asset-hub": "Asset Hub",
+  "asset-hub": "AssetHub",
   bulletin: "Bulletin",
   people: "People",
 };
diff --git a/packages/ui/src/ui.ts b/packages/ui/src/ui.ts
index 1a7b918c..485200df 100644
--- a/packages/ui/src/ui.ts
+++ b/packages/ui/src/ui.ts
@@ -393,7 +393,7 @@ function stopStageMessages(): void {
   cancelTyping();
 }
 
-/** Report what the light client itself is doing, e.g. "syncing Asset Hub". */
+/** Report what the light client itself is doing, e.g. "AssetHub ready". */
 export function setLifecycleStatus(text: string): void {
   const el = document.getElementById("metric-lifecycle");
   if (el !== null) {

From 76b39b6972f953f495a6c9f3be535adf41be39c9 Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Fri, 7 Aug 2026 17:08:50 +0100
Subject: [PATCH 18/24] Hold the logo fill to the download's real percentage
 instead of the clock

---
 apps/host/src/main.ts |   4 ++
 packages/ui/src/ui.ts | 110 ++++++++++++++++++++++++++++++++++--------
 2 files changed, 95 insertions(+), 19 deletions(-)

diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index 3ef75183..438cb6f2 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -1232,6 +1232,9 @@ async function main(): Promise<void> {
       target: 95,
       expectedMs: 10000,
       stage: "content",
+      // The download counts its own bytes against the total the DAG root
+      // declares, so this band is driven by that rather than by the clock.
+      reportsProgress: true,
     },
   ];
   if (chainBackend === "smoldot-shared-worker") {
@@ -1262,6 +1265,7 @@ async function main(): Promise<void> {
         target: 95,
         expectedMs: 10000,
         stage: "content",
+        reportsProgress: true,
       },
     ]);
   }
diff --git a/packages/ui/src/ui.ts b/packages/ui/src/ui.ts
index 485200df..035bf94f 100644
--- a/packages/ui/src/ui.ts
+++ b/packages/ui/src/ui.ts
@@ -41,6 +41,14 @@ export interface LoadingPhase {
   expectedMs: number;
   /** Which set of messages narrates this phase. */
   stage: LoadingStage;
+  /**
+   * This step publishes a true percentage, so the indicator waits for it.
+   *
+   * Without this the crawl guessed its way to 84% during the first seconds
+   * of a download and then had nowhere to go, because the real figure that
+   * followed was lower and the indicator never moves backwards.
+   */
+  reportsProgress?: boolean;
 }
 let phases: LoadingPhase[] = [];
 let currentPhase = -1;
@@ -73,6 +81,24 @@ const CREEP_CEILING = 99;
 const CREEP_MS = 10_000;
 let creepCeiling = 0;
 let creepStep = 0;
+/** True while the current step is reporting a real percentage of its own. */
+let phaseReportsProgress = false;
+let progressGraceTimer: ReturnType<typeof setTimeout> | null = null;
+
+/**
+ * How long a step that promised a real percentage gets to deliver one.
+ *
+ * If it stays silent past this the crawl takes over, so a missing byte total
+ * leaves the indicator parked rather than guessing.
+ */
+const PROGRESS_GRACE_MS = 3_000;
+
+function clearProgressGrace(): void {
+  if (progressGraceTimer !== null) {
+    clearTimeout(progressGraceTimer);
+    progressGraceTimer = null;
+  }
+}
 
 function setProgress(pct: number): void {
   currentProgress = pct;
@@ -88,6 +114,14 @@ function setProgress(pct: number): void {
 function startProgressCrawl(): void {
   stopProgressCrawl();
   progressInterval = setInterval(() => {
+    // A step that reports a real percentage owns the indicator outright. The
+    // crawl and the creep are both guesses at how long a step takes, and on a
+    // download slower than the estimate they ran the logo to nearly full
+    // while the readout underneath still said 58%. Nothing that guesses may
+    // move the indicator past something that knows.
+    if (phaseReportsProgress) {
+      return;
+    }
     if (currentProgress < targetProgress) {
       setProgress(Math.min(currentProgress + crawlStep, targetProgress));
       return;
@@ -125,6 +159,8 @@ export function initPhases(phaseList: LoadingPhase[]): void {
   openingLine = true;
   currentProgress = 0;
   targetProgress = 0;
+  phaseReportsProgress = false;
+  clearProgressGrace();
 
   progressFillEl = document.getElementById("loading-logo-fill");
   progressLogoEl = document.getElementById("loading-logo");
@@ -155,10 +191,12 @@ export function initPhases(phaseList: LoadingPhase[]): void {
 /** How long a load may run before it owes the user an explanation. */
 export const STATUS_REVEAL_MS = 3_000;
 
-// No sentence holds the screen longer than three seconds. The turnover
-// animation runs inside this, so the finished sentence is actually still for
-// the last ~0.85s of it.
-const MESSAGE_ROTATE_MS = 3_000;
+// How often the line turns over. Longer than the three seconds a *static*
+// message is allowed, because most of this window is the turnover animation
+// rather than a still sentence: 3s of characters moving, then ~1.5s at rest.
+// A slower, calmer type-in cannot fit inside a 3s cycle and still leave the
+// finished sentence up long enough to read.
+const MESSAGE_ROTATE_MS = 4_500;
 
 /** Placeholder swapped for the domain being loaded when a message is shown. */
 const DOMAIN_TOKEN = "{domain}";
@@ -248,11 +286,11 @@ export function setLoadingDomain(domain: string): void {
 // The old line is deleted a character at a time and the new one typed in.
 // Both get a fixed budget rather than a per-character delay, so a long
 // sentence animates at the same pace as a short one and always lands inside
-// the rotation interval. Together they take a little over two thirds of it,
-// which is as slow as the typing can go and still leave the finished
-// sentence sitting still long enough to be read.
-const ERASE_MS = 600;
-const TYPE_MS = 1_550;
+// the rotation interval. At these durations a full-length sentence types at
+// roughly 24 characters a second, which reads as deliberate rather than
+// frantic, and clears away faster than it arrives.
+const ERASE_MS = 800;
+const TYPE_MS = 2_200;
 let typingFrame: number | null = null;
 let pendingMessage: string | null = null;
 
@@ -363,8 +401,11 @@ export function setLoadingStage(stage: LoadingStage): void {
   currentStageIndex = stageIndex;
   const messages = STAGE_MESSAGES[stage];
   let line = 0;
+  // Only the rotation clock is stopped here. Cancelling the typing as well
+  // would kill the animation this very line was just queued behind and drop
+  // the queue with it, stranding the headline on a half-typed word.
+  stopStageTimer();
   writeStatus(messages[0]);
-  stopStageMessages();
   // Cycle back to the second line rather than the first: the opener names
   // the step, and showing it again would read as the load starting over.
   const loopFrom = messages.length > 2 ? 1 : 0;
@@ -385,11 +426,16 @@ export function setLoadingStage(stage: LoadingStage): void {
   stageTimer = setTimeout(turn, firstDelay);
 }
 
-function stopStageMessages(): void {
+function stopStageTimer(): void {
   if (stageTimer !== null) {
     clearTimeout(stageTimer);
     stageTimer = null;
   }
+}
+
+/** Stop narrating entirely: no more turns, and no line half-written. */
+function stopStageMessages(): void {
+  stopStageTimer();
   cancelTyping();
 }
 
@@ -444,7 +490,19 @@ export function advancePhase(index: number): void {
   currentPhase = index;
 
   // Update progress bar
-  const { base, target, label, expectedMs } = phases[index];
+  const { base, target, label, expectedMs, reportsProgress } = phases[index];
+  // Each step has to earn the indicator back: the previous step's real
+  // percentage says nothing about this one. A step that publishes its own
+  // figure holds the indicator at its band base until the figure arrives,
+  // rather than crawling somewhere the real number cannot then reach.
+  clearProgressGrace();
+  phaseReportsProgress = reportsProgress === true;
+  if (phaseReportsProgress) {
+    progressGraceTimer = setTimeout(() => {
+      phaseReportsProgress = false;
+      progressGraceTimer = null;
+    }, PROGRESS_GRACE_MS);
+  }
   if (base > currentProgress) {
     setProgress(base);
   }
@@ -459,9 +517,17 @@ export function advancePhase(index: number): void {
   // for the last one. Borrowing at most one band keeps a single slow step
   // from eating the whole bar, and `advancePhase` never moves the bar
   // backwards, so the next step simply carries on from wherever the creep
-  // reached.
+  // reached. A band that reports a real percentage lends nothing: creeping
+  // into it would leave the indicator sitting above the figure that step is
+  // about to publish, which is how the logo came to look full at 58%.
   const next = phases[index + 1] as LoadingPhase | undefined;
-  creepCeiling = Math.min(next?.target ?? CREEP_CEILING, CREEP_CEILING);
+  const lentCeiling =
+    next === undefined
+      ? CREEP_CEILING
+      : next.reportsProgress === true
+        ? next.base
+        : next.target;
+  creepCeiling = Math.min(lentCeiling, CREEP_CEILING);
   creepStep =
     (Math.max(creepCeiling - target, 0) * CRAWL_TICK_MS) /
     Math.max(CREEP_MS, CRAWL_TICK_MS);
@@ -475,12 +541,13 @@ export function advancePhase(index: number): void {
 }
 
 /**
- * Pull the bar to a real fraction of the current phase's band.
+ * Pull the indicator to a real fraction of the current phase's band.
  *
- * The crawl paces the band on a guess at how long the step takes. When a
- * step reports true progress, this moves the bar to where the work actually
- * is. Monotonic and clamped to the band, so a late or noisy signal can never
- * rewind the bar, including past a point the overrun creep has reached.
+ * The crawl paces the band on a guess at how long the step takes. A step that
+ * reports true progress takes the indicator over for as long as it has
+ * something to say, so the logo tracks the download rather than the clock.
+ * Monotonic and clamped to the band, so a late or noisy signal can never
+ * rewind the indicator.
  */
 export function nudgePhaseProgress(fraction: number): void {
   if (!Number.isFinite(fraction) || currentPhase < 0) {
@@ -488,6 +555,11 @@ export function nudgePhaseProgress(fraction: number): void {
   }
   const { base, target } = phases[currentPhase];
   const clamped = Math.max(0, Math.min(1, fraction));
+  clearProgressGrace();
+  // Once the step's own work is finished there is no true number left to
+  // respect, so the creep takes over again and carries the indicator through
+  // the tail. That tail is the sandbox unpacking, which reports nothing.
+  phaseReportsProgress = clamped < 1;
   const want = base + (target - base) * clamped;
   if (want > currentProgress) {
     setProgress(Math.min(want, target));

From a77debff7317461f65d5b32e18b1ddfb65a483e6 Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Tue, 11 Aug 2026 12:11:54 +0100
Subject: [PATCH 19/24] chore(deps): bump smoldot to 3.4.1-dev-20260811.0

---
 bun.lock     | 6 +++---
 package.json | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/bun.lock b/bun.lock
index 3db90958..68ce2691 100644
--- a/bun.lock
+++ b/bun.lock
@@ -5,7 +5,7 @@
     "": {
       "name": "dotli",
       "dependencies": {
-        "smoldot": "3.3.3-dev-20260805.0",
+        "smoldot": "3.4.1-dev-20260811.0",
       },
       "devDependencies": {
         "prettier": "^3.8.4",
@@ -328,7 +328,7 @@
     "esbuild": "^0.28.1",
     "fast-uri": "3.1.5",
     "postcss": "^8.5.24",
-    "smoldot": "3.3.3-dev-20260805.0",
+    "smoldot": "3.4.1-dev-20260811.0",
   },
   "packages": {
     "@apideck/better-ajv-errors": ["@apideck/better-ajv-errors@0.3.7", "", { "dependencies": { "jsonpointer": "^5.0.1", "leven": "^3.1.0" }, "peerDependencies": { "ajv": ">=8" } }, "sha512-TajUJwGWbDwkCx/CZi7tRE8PVB7simCvKJfHUsSdvps+aTM/PDPP4gkLmKnc+x3CE//y9i/nj74GqdL/hwk7Iw=="],
@@ -1511,7 +1511,7 @@
 
     "smob": ["smob@1.6.2", "", {}, "sha512-RQsvleCbF8cVHEv+xuDGaA4pOizFqJ0GgjtMSRo6oP8pnN7WsigHgVGey6aILRBKv4W2YOMHLqbKdnB6hpB9fw=="],
 
-    "smoldot": ["smoldot@3.3.3-dev-20260805.0", "", { "dependencies": { "ws": "^8.8.1" } }, "sha512-qaZsRGg4gizRovTyOS1SHTS/3ckKOV5O+9VIjrmCR173kghfgkjs31bSI0ivk1J33N7P1Rt+poJh58RKqVCm8w=="],
+    "smoldot": ["smoldot@3.4.1-dev-20260811.0", "", { "dependencies": { "ws": "^8.8.1" } }, "sha512-W3hRMW2SfXjOInXXbO7uoyDRUbag77Mc7eEfk6pIjxKGctwRaVxxxl/LLPmFbA30+qGscFxuz136JTb2YIf7Cw=="],
 
     "sort-keys": ["sort-keys@5.1.0", "", { "dependencies": { "is-plain-obj": "^4.0.0" } }, "sha512-aSbHV0DaBcr7u0PVHXzM6NbZNAtrr9sF6+Qfs9UUVG7Ll3jQ6hHi8F/xqIIcn2rvIVbr0v/2zyjSdwSV47AgLQ=="],
 
diff --git a/package.json b/package.json
index 2ff00414..2fdc5560 100644
--- a/package.json
+++ b/package.json
@@ -35,12 +35,12 @@
     "packages/*"
   ],
   "dependencies": {
-    "smoldot": "3.3.3-dev-20260805.0"
+    "smoldot": "3.4.1-dev-20260811.0"
   },
   "overrides": {
     "@parity/truapi": "0.7.0",
     "fast-uri": "3.1.5",
-    "smoldot": "3.3.3-dev-20260805.0",
+    "smoldot": "3.4.1-dev-20260811.0",
     "esbuild": "^0.28.1",
     "brace-expansion": "^5.0.9",
     "postcss": "^8.5.24"

From d633d08b21f5d1a6dafc0178a5f2c6d3b0df10fc Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Tue, 11 Aug 2026 12:27:59 +0100
Subject: [PATCH 20/24] Measure the whole load for Completed and Speed, and
 show relay peers

---
 apps/host/index.html                |  4 ++
 apps/host/src/main.ts               | 65 +++++++++++++++++++--
 apps/protocol/src/main.ts           | 33 +++++++++++
 packages/protocol/src/client.ts     | 22 ++++++++
 packages/protocol/src/messages.ts   | 14 +++++
 packages/resolver/src/byte-meter.ts | 88 +++++++++++++++++++++++++++++
 packages/ui/src/ui.ts               | 61 ++++++++++----------
 7 files changed, 250 insertions(+), 37 deletions(-)
 create mode 100644 packages/resolver/src/byte-meter.ts

diff --git a/apps/host/index.html b/apps/host/index.html
index d83e6971..2998f2ee 100644
--- a/apps/host/index.html
+++ b/apps/host/index.html
@@ -449,6 +449,10 @@ <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
               <div class="loading-metric-peers">
                 <dt>Peers</dt>
                 <dd>
+                  <div class="loading-metric">
+                    <span>Relay</span>
+                    <span id="metric-peers-relay">&mdash;</span>
+                  </div>
                   <div class="loading-metric">
                     <span>AssetHub</span>
                     <span id="metric-peers-assethub">&mdash;</span>
diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index 438cb6f2..eb34a37a 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -31,6 +31,7 @@ import {
   initPhases,
   advancePhase,
   nudgePhaseProgress,
+  releasePhaseProgress,
   setLoadingMetrics,
   setLoadingDomain,
   setLoadingStage,
@@ -55,6 +56,7 @@ import {
 import {
   ensureProtocolFrame,
   onProtocolChainSync,
+  onProtocolNetBytes,
   resetProtocolFrame,
   resolveDotNameRemote,
   resolveExecutableManifestRemote,
@@ -1197,6 +1199,9 @@ async function main(): Promise<void> {
     "asset-hub-ready": 2,
     "resolving-content": 3,
   };
+  // Only direct mode relays the sandbox's bitswap traffic through this window,
+  // so it is the only backend that can report a download percentage.
+  const countsContentBytes = chainBackend === "smoldot-direct";
   const smoldotPhases = (startLabel: string): LoadingPhase[] => [
     {
       label: startLabel,
@@ -1234,7 +1239,10 @@ async function main(): Promise<void> {
       stage: "content",
       // The download counts its own bytes against the total the DAG root
       // declares, so this band is driven by that rather than by the clock.
-      reportsProgress: true,
+      // Only where something is actually counting: a band that waits for a
+      // percentage nobody will send would hold the indicator at 62 for the
+      // whole fetch.
+      reportsProgress: countsContentBytes,
     },
   ];
   if (chainBackend === "smoldot-shared-worker") {
@@ -1265,7 +1273,9 @@ async function main(): Promise<void> {
         target: 95,
         expectedMs: 10000,
         stage: "content",
-        reportsProgress: true,
+        // No `reportsProgress` here. Gateway mode pulls the archive over HTTP
+        // from the sandbox, so nothing counts its bytes through this window
+        // and there would be no percentage for the indicator to wait on.
       },
     ]);
   }
@@ -1307,7 +1317,12 @@ async function main(): Promise<void> {
       }
       switch (event.syncKind) {
         case "peers":
-          if (event.chain === "asset-hub") {
+          // The relay's count stops updating once it is bootstrapped, because
+          // the health poll stops with it, so that row is a snapshot of the
+          // peers it settled on rather than a live figure.
+          if (event.chain === "relay") {
+            setLoadingMetrics({ relayPeers: event.peers ?? 0 });
+          } else if (event.chain === "asset-hub") {
             setLoadingMetrics({ assetHubPeers: event.peers ?? 0 });
           } else if (event.chain === "bulletin") {
             setLoadingMetrics({ bulletinPeers: event.peers ?? 0 });
@@ -1347,16 +1362,54 @@ async function main(): Promise<void> {
       }
     });
 
+    // Speed is the whole load's throughput, not one step's. The chain sync
+    // dominates the first half of a cold load and the archive download the
+    // second, so both are added up and the rate is taken over a short
+    // trailing window. Reporting only the archive left the readout at zero
+    // for the seconds the light client was working hardest.
+    let chainBytes = 0;
+    let contentBytes = 0;
+    // Seeded at the page's own start with nothing downloaded, which is true
+    // and means the first report from the protocol frame already has a second
+    // reading to be measured against. Without it the readout stayed blank
+    // until the frame's second message.
+    const samples: { at: number; total: number }[] = [{ at: 0, total: 0 }];
+    const SPEED_WINDOW_MS = 3_000;
+    const reportSpeed = (): void => {
+      const now = performance.now();
+      samples.push({ at: now, total: chainBytes + contentBytes });
+      while (samples.length > 1 && now - samples[0].at > SPEED_WINDOW_MS) {
+        samples.shift();
+      }
+      const oldest = samples[0];
+      const span = now - oldest.at;
+      if (span > 0) {
+        setLoadingMetrics({
+          bytesPerSecond:
+            ((chainBytes + contentBytes - oldest.total) / span) * 1000,
+        });
+      }
+    };
+    onProtocolNetBytes(({ received }) => {
+      chainBytes = received;
+      reportSpeed();
+    });
+
     // Every block the sandbox needs is fetched through this window, so the
     // download reports itself: bytes so far against the total the DAG root
     // declares.
-    onContentProgress(({ bytesFetched, totalBytes, bytesPerSecond }) => {
-      setLoadingMetrics({ bytesPerSecond });
+    onContentProgress(({ bytesFetched, totalBytes }) => {
+      contentBytes = bytesFetched;
+      reportSpeed();
       // The download's true fraction drives the bar itself, which is where
       // a percentage belongs. Printing the same number as text alongside it
       // said the same thing twice.
+      if (totalBytes === null) {
+        // Bytes are arriving but the DAG root declared no total, so there is
+        // no percentage to be had. Hand the indicator back to the clock.
+        releasePhaseProgress();
+      }
       if (totalBytes !== null && totalBytes > 0) {
-        setLoadingMetrics({ completedFraction: bytesFetched / totalBytes });
         nudgePhaseProgress(bytesFetched / totalBytes);
         // The tail of the load is the sandbox unpacking the archive and
         // painting, which used to hide behind download copy while the bar
diff --git a/apps/protocol/src/main.ts b/apps/protocol/src/main.ts
index 0c27ac88..b2c2a2cd 100644
--- a/apps/protocol/src/main.ts
+++ b/apps/protocol/src/main.ts
@@ -14,6 +14,15 @@ import {
   installGlobalErrorHandlers,
   captureException,
 } from "@dotli/metrics/sentry";
+import {
+  chainBytesReceived,
+  installByteMeter,
+} from "@dotli/resolver/byte-meter";
+
+// Before anything opens a socket. smoldot's transports are the bulk of a
+// cold load's traffic and are invisible to resource timing, so the loading
+// screen's speed readout has no other source for them.
+installByteMeter();
 
 // Do NOT silently reload on chunk preload failure. The protocol iframe is
 // hidden and has no UI of its own, so it surfaces the failure to the parent
@@ -736,6 +745,30 @@ async function initDirectMode(): Promise<void> {
     );
   });
 
+  // Feed the host's speed readout. Cumulative totals on a fixed tick rather
+  // than a rate, so the host owns the averaging and a dropped message just
+  // widens one window.
+  if (window.parent !== window) {
+    const postBytes = (): void => {
+      window.parent.postMessage(
+        {
+          namespace: "dotli:protocol",
+          kind: "net-bytes",
+          received: chainBytesReceived(),
+        },
+        "*",
+      );
+    };
+    // Send a baseline straight away. A rate needs two readings, so waiting a
+    // full tick for the first one delayed the whole readout by 500ms on top
+    // of the time this iframe took to boot.
+    postBytes();
+    const reportBytes = setInterval(postBytes, 500);
+    window.addEventListener("pagehide", () => {
+      clearInterval(reportBytes);
+    });
+  }
+
   const engine = createEngine({
     createChainProvider,
     isChainSupported,
diff --git a/packages/protocol/src/client.ts b/packages/protocol/src/client.ts
index 68f1aa96..e59304de 100644
--- a/packages/protocol/src/client.ts
+++ b/packages/protocol/src/client.ts
@@ -27,6 +27,7 @@ import {
   isChainSyncPayloadValid,
   isProtocolEnvelope,
   type ProtocolChainSyncEnvelope,
+  type ProtocolNetBytesEnvelope,
   type ProtocolRequestEnvelope,
   type ProtocolRequestMap,
   type ProtocolRequestMethod,
@@ -68,6 +69,7 @@ const sharedAuthListeners = new Set<SharedAuthStorageListener>();
 const chainSyncListeners = new Set<
   (event: ProtocolChainSyncEnvelope) => void
 >();
+const netBytesListeners = new Set<(event: ProtocolNetBytesEnvelope) => void>();
 let listenerBound = false;
 let protocolReady = false;
 interface ReadyWaiter {
@@ -246,6 +248,15 @@ function bindMessageListener(): void {
         broadcast(chainSyncListeners, msg, "Chain sync");
         return;
       }
+      case "net-bytes": {
+        // Cumulative and monotonic by construction, so anything else is
+        // spoofed traffic rather than a stale message.
+        if (!Number.isFinite(msg.received) || msg.received < 0) {
+          return;
+        }
+        broadcast(netBytesListeners, msg, "Net bytes");
+        return;
+      }
       case "fatal":
       case "init-failed": {
         // Smoldot (or the protocol iframe) has died, either crashed
@@ -723,6 +734,17 @@ export function onProtocolChainSync(
   };
 }
 
+/** Subscribe to the light client's running byte total. */
+export function onProtocolNetBytes(
+  listener: (event: ProtocolNetBytesEnvelope) => void,
+): () => void {
+  bindMessageListener();
+  netBytesListeners.add(listener);
+  return () => {
+    netBytesListeners.delete(listener);
+  };
+}
+
 export function isRemoteChainSupported(genesisHash: string): boolean {
   // Advertise only what the *active* backend can actually serve. Gateway mode
   // bridges a curated RPC subset, while smoldot can run any configured chain.
diff --git a/packages/protocol/src/messages.ts b/packages/protocol/src/messages.ts
index 41491307..70870c49 100644
--- a/packages/protocol/src/messages.ts
+++ b/packages/protocol/src/messages.ts
@@ -122,6 +122,18 @@ export interface ProtocolChainSyncEnvelope {
   finalized?: number;
 }
 
+/**
+ * Running total of bytes the light client has pulled off the network.
+ *
+ * Cumulative rather than a rate, so a dropped message costs nothing and the
+ * host can pick whatever averaging window it wants.
+ */
+export interface ProtocolNetBytesEnvelope {
+  namespace: "dotli:protocol";
+  kind: "net-bytes";
+  received: number;
+}
+
 // Unsolicited notification from the host iframe to its parent window when a
 // sibling tab writes or clears a shared-auth storage key. Drives cross-tab
 // `StorageAdapter.subscribe` callbacks. See `@dotli/protocol/client`
@@ -146,6 +158,7 @@ export type ProtocolEnvelope =
   | ProtocolFatalEnvelope
   | ProtocolInitFailedEnvelope
   | ProtocolChainSyncEnvelope
+  | ProtocolNetBytesEnvelope
   | ProtocolAuthStorageChangedEnvelope;
 
 const VALID_KINDS = new Set([
@@ -158,6 +171,7 @@ const VALID_KINDS = new Set([
   "fatal",
   "init-failed",
   "chain-sync",
+  "net-bytes",
   "auth-storage-changed",
 ]);
 
diff --git a/packages/resolver/src/byte-meter.ts b/packages/resolver/src/byte-meter.ts
new file mode 100644
index 00000000..5316c536
--- /dev/null
+++ b/packages/resolver/src/byte-meter.ts
@@ -0,0 +1,88 @@
+// Copyright 2026 Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: AGPL-3.0-only
+
+/**
+ * Count every byte the light client pulls off the network.
+ *
+ * The loading screen reports a download speed, and the only figure available
+ * to it used to be the app archive coming over bitswap. That is the last step
+ * of a load; for the seconds before it the chain sync is doing all the work
+ * and the readout sat at zero.
+ *
+ * smoldot opens its own sockets from inside its own JS, so there is no
+ * handle to ask. Resource timing does not cover WebSocket or WebRTC either.
+ * The one place the bytes are visible is the constructor, so this wraps the
+ * two transports smoldot uses and tallies what arrives. Install it before
+ * smoldot starts or its already-open connections go uncounted.
+ */
+
+let received = 0;
+let installed = false;
+
+/** Total bytes received over the light client's transports so far. */
+export function chainBytesReceived(): number {
+  return received;
+}
+
+function sizeOf(data: unknown): number {
+  if (typeof data === "string") {
+    // Frames are binary in practice; a text frame is counted as UTF-8 rather
+    // than as UTF-16 code units, which is what actually crossed the wire.
+    return new TextEncoder().encode(data).length;
+  }
+  if (data instanceof ArrayBuffer) {
+    return data.byteLength;
+  }
+  if (ArrayBuffer.isView(data)) {
+    return data.byteLength;
+  }
+  if (data instanceof Blob) {
+    return data.size;
+  }
+  return 0;
+}
+
+/**
+ * Wrap `WebSocket` and `RTCDataChannel` so their inbound frames are tallied.
+ *
+ * Idempotent, and a no-op outside a browser. Listeners are added rather than
+ * replacing `onmessage`, so smoldot's own handler is untouched.
+ */
+export function installByteMeter(): void {
+  if (installed || typeof window === "undefined") {
+    return;
+  }
+  installed = true;
+
+  // Subclassing rather than wrapping in a plain function: `WebSocket` is a
+  // real class, so a caller doing `new WebSocket(...)` needs a construct
+  // signature, and the statics and prototype come along for free.
+  class MeteredWebSocket extends window.WebSocket {
+    constructor(url: string | URL, protocols?: string | string[]) {
+      super(url, protocols);
+      this.addEventListener("message", (event: MessageEvent) => {
+        received += sizeOf(event.data);
+      });
+    }
+  }
+  window.WebSocket = MeteredWebSocket;
+
+  // webrtc-direct bootnodes carry a real share of the sync on networks that
+  // publish them, so the data channels are counted the same way.
+  if (typeof RTCPeerConnection !== "undefined") {
+    // Taken off the prototype only to call it back with the original `this`.
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const nativeCreate = RTCPeerConnection.prototype.createDataChannel;
+    RTCPeerConnection.prototype.createDataChannel = function (
+      this: RTCPeerConnection,
+      label: string,
+      options?: RTCDataChannelInit,
+    ): RTCDataChannel {
+      const channel = nativeCreate.call(this, label, options);
+      channel.addEventListener("message", (event: MessageEvent) => {
+        received += sizeOf(event.data);
+      });
+      return channel;
+    };
+  }
+}
diff --git a/packages/ui/src/ui.ts b/packages/ui/src/ui.ts
index 035bf94f..4c80b860 100644
--- a/packages/ui/src/ui.ts
+++ b/packages/ui/src/ui.ts
@@ -57,6 +57,7 @@ let currentPhase = -1;
 let progressFillEl: HTMLElement | null = null;
 let progressLogoEl: HTMLElement | null = null;
 let statusBlockEl: HTMLElement | null = null;
+let metricRelayPeersEl: HTMLElement | null = null;
 let metricAssetHubPeersEl: HTMLElement | null = null;
 let metricBulletinPeersEl: HTMLElement | null = null;
 let metricSpeedEl: HTMLElement | null = null;
@@ -81,24 +82,8 @@ const CREEP_CEILING = 99;
 const CREEP_MS = 10_000;
 let creepCeiling = 0;
 let creepStep = 0;
-/** True while the current step is reporting a real percentage of its own. */
+/** True while the current step owes the indicator a real percentage. */
 let phaseReportsProgress = false;
-let progressGraceTimer: ReturnType<typeof setTimeout> | null = null;
-
-/**
- * How long a step that promised a real percentage gets to deliver one.
- *
- * If it stays silent past this the crawl takes over, so a missing byte total
- * leaves the indicator parked rather than guessing.
- */
-const PROGRESS_GRACE_MS = 3_000;
-
-function clearProgressGrace(): void {
-  if (progressGraceTimer !== null) {
-    clearTimeout(progressGraceTimer);
-    progressGraceTimer = null;
-  }
-}
 
 function setProgress(pct: number): void {
   currentProgress = pct;
@@ -109,6 +94,12 @@ function setProgress(pct: number): void {
   // The bar carried no percentage for a screen reader to announce. Now that
   // the logo is the indicator, it says the number out loud.
   progressLogoEl?.setAttribute("aria-valuenow", String(Math.round(pct)));
+  // Completed is the whole load, which is the same number the logo is
+  // drawing. Writing it here rather than from the download means the two can
+  // never disagree, and it covers the steps before the download starts.
+  if (metricCompletedEl !== null) {
+    metricCompletedEl.textContent = `${String(Math.round(pct))} %`;
+  }
 }
 
 function startProgressCrawl(): void {
@@ -160,11 +151,11 @@ export function initPhases(phaseList: LoadingPhase[]): void {
   currentProgress = 0;
   targetProgress = 0;
   phaseReportsProgress = false;
-  clearProgressGrace();
 
   progressFillEl = document.getElementById("loading-logo-fill");
   progressLogoEl = document.getElementById("loading-logo");
   statusBlockEl = document.getElementById("loading-status");
+  metricRelayPeersEl = document.getElementById("metric-peers-relay");
   metricAssetHubPeersEl = document.getElementById("metric-peers-assethub");
   metricBulletinPeersEl = document.getElementById("metric-peers-bulletin");
   metricSpeedEl = document.getElementById("metric-speed");
@@ -457,11 +448,14 @@ export function setLifecycleStatus(text: string): void {
  * which put a zero on screen at the moments the load looked slowest.
  */
 export function setLoadingMetrics(metrics: {
+  relayPeers?: number;
   assetHubPeers?: number;
   bulletinPeers?: number;
   bytesPerSecond?: number;
-  completedFraction?: number;
 }): void {
+  if (metrics.relayPeers !== undefined && metricRelayPeersEl !== null) {
+    metricRelayPeersEl.textContent = String(metrics.relayPeers);
+  }
   if (metrics.assetHubPeers !== undefined && metricAssetHubPeersEl !== null) {
     metricAssetHubPeersEl.textContent = String(metrics.assetHubPeers);
   }
@@ -471,10 +465,6 @@ export function setLoadingMetrics(metrics: {
   if (metrics.bytesPerSecond !== undefined && metricSpeedEl !== null) {
     metricSpeedEl.textContent = `${(metrics.bytesPerSecond / 1_048_576).toFixed(1)} MB/s`;
   }
-  if (metrics.completedFraction !== undefined && metricCompletedEl !== null) {
-    const pct = Math.min(100, Math.max(0, metrics.completedFraction * 100));
-    metricCompletedEl.textContent = `${String(Math.round(pct))} %`;
-  }
 }
 
 /**
@@ -495,14 +485,7 @@ export function advancePhase(index: number): void {
   // percentage says nothing about this one. A step that publishes its own
   // figure holds the indicator at its band base until the figure arrives,
   // rather than crawling somewhere the real number cannot then reach.
-  clearProgressGrace();
   phaseReportsProgress = reportsProgress === true;
-  if (phaseReportsProgress) {
-    progressGraceTimer = setTimeout(() => {
-      phaseReportsProgress = false;
-      progressGraceTimer = null;
-    }, PROGRESS_GRACE_MS);
-  }
   if (base > currentProgress) {
     setProgress(base);
   }
@@ -555,7 +538,6 @@ export function nudgePhaseProgress(fraction: number): void {
   }
   const { base, target } = phases[currentPhase];
   const clamped = Math.max(0, Math.min(1, fraction));
-  clearProgressGrace();
   // Once the step's own work is finished there is no true number left to
   // respect, so the creep takes over again and carries the indicator through
   // the tail. That tail is the sandbox unpacking, which reports nothing.
@@ -566,6 +548,23 @@ export function nudgePhaseProgress(fraction: number): void {
   }
 }
 
+/**
+ * Give the indicator back to the clock.
+ *
+ * A step that declared `reportsProgress` holds the indicator until it can say
+ * where the work is. If it turns out it cannot, because the download has no
+ * declared total to measure against, it says so here and the crawl resumes.
+ *
+ * This is deliberately not a timeout. A timeout fired whether or not anything
+ * was happening: a load whose content chain never found a peer had the crawl
+ * walk the logo to 99% and sit there for 49 seconds at 0.0 MB/s, claiming the
+ * load was all but done while nothing at all was being downloaded. Holding
+ * still is the honest answer, and the status row says why.
+ */
+export function releasePhaseProgress(): void {
+  phaseReportsProgress = false;
+}
+
 export const GATEWAY_ESCAPE_DELAY_MS = 10_000;
 
 /**

From f0ee0deb104212024154d826c6b5a4a5862b8f5d Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Tue, 11 Aug 2026 13:09:21 +0100
Subject: [PATCH 21/24] Scope progress signals to the band that owns them and
 stop the network panel churning clients

---
 apps/host/src/main.ts                         |  22 ++-
 apps/host/tests/functional/resolution.spec.ts |   7 +-
 packages/resolver/src/byte-meter.ts           |  14 +-
 packages/resolver/src/smoldot.ts              |  20 ++-
 packages/ui/src/topbar.ts                     | 141 +++++++++--------
 packages/ui/src/ui.ts                         | 144 ++++++++----------
 6 files changed, 176 insertions(+), 172 deletions(-)

diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index eb34a37a..f37c79ee 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -1320,12 +1320,23 @@ async function main(): Promise<void> {
           // The relay's count stops updating once it is bootstrapped, because
           // the health poll stops with it, so that row is a snapshot of the
           // peers it settled on rather than a live figure.
+          if (event.peers === undefined) {
+            return;
+          }
           if (event.chain === "relay") {
-            setLoadingMetrics({ relayPeers: event.peers ?? 0 });
+            setLoadingMetrics({ relayPeers: event.peers });
           } else if (event.chain === "asset-hub") {
-            setLoadingMetrics({ assetHubPeers: event.peers ?? 0 });
+            setLoadingMetrics({ assetHubPeers: event.peers });
           } else if (event.chain === "bulletin") {
-            setLoadingMetrics({ bulletinPeers: event.peers ?? 0 });
+            setLoadingMetrics({ bulletinPeers: event.peers });
+            if (event.peers > 0) {
+              // The download can start, so the clock is a fair fallback from
+              // here. Holding is only honest while there is no peer to fetch
+              // from: an archive served from the sandbox's own cache never
+              // asks this window for a block, and would otherwise sit at the
+              // band base until the app painted.
+              releasePhaseProgress();
+            }
           }
           return;
         case "warpSyncProgress": {
@@ -1333,12 +1344,13 @@ async function main(): Promise<void> {
           // only when they have real distance to cover.
           const { at, target } = event;
           if (
+            (event.chain === "relay" || event.chain === "custom-relay") &&
             at !== undefined &&
             target !== undefined &&
             target > 0 &&
             at <= target
           ) {
-            nudgePhaseProgress(at / target);
+            nudgePhaseProgress(at / target, "relay");
           }
           return;
         }
@@ -1410,7 +1422,7 @@ async function main(): Promise<void> {
         releasePhaseProgress();
       }
       if (totalBytes !== null && totalBytes > 0) {
-        nudgePhaseProgress(bytesFetched / totalBytes);
+        nudgePhaseProgress(bytesFetched / totalBytes, "content");
         // The tail of the load is the sandbox unpacking the archive and
         // painting, which used to hide behind download copy while the bar
         // crept. Only blocks relayed for the sandbox are counted here, and
diff --git a/apps/host/tests/functional/resolution.spec.ts b/apps/host/tests/functional/resolution.spec.ts
index f073fb9a..b5b8649c 100644
--- a/apps/host/tests/functional/resolution.spec.ts
+++ b/apps/host/tests/functional/resolution.spec.ts
@@ -85,8 +85,11 @@ test.describe("Resolution across chain backends", () => {
           if (seen !== undefined && seen.length > 0) {
             return true;
           }
-          return /[1-9]/.test(
-            document.getElementById("metric-peers")?.textContent ?? "",
+          return ["relay", "assethub", "bulletin"].some((chain) =>
+            /[1-9]/.test(
+              document.getElementById(`metric-peers-${chain}`)?.textContent ??
+                "",
+            ),
           );
         },
         undefined,
diff --git a/packages/resolver/src/byte-meter.ts b/packages/resolver/src/byte-meter.ts
index 5316c536..baf23d4d 100644
--- a/packages/resolver/src/byte-meter.ts
+++ b/packages/resolver/src/byte-meter.ts
@@ -4,16 +4,10 @@
 /**
  * Count every byte the light client pulls off the network.
  *
- * The loading screen reports a download speed, and the only figure available
- * to it used to be the app archive coming over bitswap. That is the last step
- * of a load; for the seconds before it the chain sync is doing all the work
- * and the readout sat at zero.
- *
- * smoldot opens its own sockets from inside its own JS, so there is no
- * handle to ask. Resource timing does not cover WebSocket or WebRTC either.
- * The one place the bytes are visible is the constructor, so this wraps the
- * two transports smoldot uses and tallies what arrives. Install it before
- * smoldot starts or its already-open connections go uncounted.
+ * smoldot opens its own sockets from inside its own JS, and resource timing
+ * covers neither WebSocket nor WebRTC, so the constructor is the only place
+ * the bytes are visible. Install this before smoldot starts, or connections
+ * it already opened go uncounted.
  */
 
 let received = 0;
diff --git a/packages/resolver/src/smoldot.ts b/packages/resolver/src/smoldot.ts
index 021f88bc..11ce007c 100644
--- a/packages/resolver/src/smoldot.ts
+++ b/packages/resolver/src/smoldot.ts
@@ -358,7 +358,16 @@ function makeSideChannelIntercept(chain: ChainKey): TapIntercept {
 
 function emitMilestone(
   chain: ChainKey,
-  result: { kind?: string; reason?: string; previously?: string } | undefined,
+  result:
+    | {
+        kind?: string;
+        reason?: string;
+        previously?: string;
+        at?: number;
+        target?: number;
+        finalized?: number;
+      }
+    | undefined,
 ): void {
   const kind = result?.kind;
   if (kind === undefined || kind === "peers" || !isSyncKind(kind)) {
@@ -369,15 +378,14 @@ function emitMilestone(
     persistence.get(chain)?.healthPoller?.stop();
   }
   const reason = kind === "stalled" ? result?.reason : result?.previously;
-  const heights = result as unknown as Record<string, unknown>;
   emitChainSync({
     chain,
     kind,
     ...(typeof reason === "string" ? { reason } : {}),
-    ...(typeof heights.at === "number" ? { at: heights.at } : {}),
-    ...(typeof heights.target === "number" ? { target: heights.target } : {}),
-    ...(typeof heights.finalized === "number"
-      ? { finalized: heights.finalized }
+    ...(typeof result?.at === "number" ? { at: result.at } : {}),
+    ...(typeof result?.target === "number" ? { target: result.target } : {}),
+    ...(typeof result?.finalized === "number"
+      ? { finalized: result.finalized }
       : {}),
   });
 }
diff --git a/packages/ui/src/topbar.ts b/packages/ui/src/topbar.ts
index 16e95233..4f869667 100644
--- a/packages/ui/src/topbar.ts
+++ b/packages/ui/src/topbar.ts
@@ -966,6 +966,13 @@ let chainsRefreshTimer: ReturnType<typeof setInterval> | null = null;
 
 /** How often the open panel re-reads peers and heights. */
 const CHAINS_REFRESH_MS = 6_000;
+/**
+ * Budget for each step of a chain's read.
+ *
+ * Three steps run in sequence, so this is sized to keep the whole read inside
+ * the refresh interval and stop ticks stacking up on a slow chain.
+ */
+const CHAIN_QUERY_TIMEOUT_MS = 1_800;
 
 function stopChainsRefresh(): void {
   if (chainsRefreshTimer !== null) {
@@ -1025,6 +1032,12 @@ function renderChainsPopover(parent: HTMLElement): void {
     text.textContent = "Trusted provider, no light client";
     return;
   }
+  if (backend === "smoldot-shared-worker") {
+    onStatusChange = null;
+    dot.className = "chains-status-dot is-idle";
+    text.textContent = "Light client in a shared worker";
+    return;
+  }
 
   const paint = (): void => {
     const { text: label, tone } = describeNetworkStatus();
@@ -1069,12 +1082,10 @@ function renderChainsPopover(parent: HTMLElement): void {
     table.appendChild(row);
 
     const refresh = (): void => {
-      void queryPeerCount(genesis).then((n) => {
-        cells[0].textContent = n === null ? "n/a" : String(n);
-      });
-      void queryChainBlocks(genesis).then((blocks) => {
-        cells[1].textContent = blocks?.best ?? "n/a";
-        cells[2].textContent = blocks?.finalized ?? "n/a";
+      void queryChainStatus(genesis).then(({ peers, best, finalized }) => {
+        cells[0].textContent = peers === null ? "n/a" : String(peers);
+        cells[1].textContent = best ?? "n/a";
+        cells[2].textContent = finalized ?? "n/a";
       });
     };
     refresh();
@@ -1119,8 +1130,10 @@ function initChainsPopover(): void {
     stopChainsRefresh();
     onStatusChange = null;
   };
-  button.addEventListener("click", (e) => {
-    e.stopPropagation();
+  // No `stopPropagation`. The shared outside-click closer has to see this
+  // click to shut Settings, which sits at the same fixed position and would
+  // otherwise render on top of this panel.
+  button.addEventListener("click", () => {
     if (popover.classList.contains("open")) {
       close();
       return;
@@ -2200,85 +2213,79 @@ function formatAge(ms: number | null): string {
  * reports. `getBestBlocks` returns the chain from best to finalized, so one
  * call covers both ends.
  */
-async function queryChainBlocks(genesisHash: string): Promise<{
-  best: string;
-  finalized: string;
-} | null> {
+/** Reject after `ms`, and clear the timer as soon as the race settles. */
+async function withTimeout<T>(work: Promise<T>, ms: number): Promise<T> {
+  let timer: ReturnType<typeof setTimeout> | undefined;
   try {
-    if (!isRemoteChainSupported(genesisHash)) {
-      return null;
-    }
-    const provider = createRemoteChainProvider(genesisHash);
-    if (provider === null) {
-      return null;
-    }
-    const papi = await import("polkadot-api");
-    const client = papi.createClient(provider);
-    try {
-      const blocks = await Promise.race([
-        client.getBestBlocks(),
-        new Promise<never>((_, reject) => {
-          setTimeout(() => {
-            reject(new Error("timeout"));
-          }, 10_000);
-        }),
-      ]);
-      const best = blocks.at(0);
-      const finalized = blocks.at(-1);
-      if (best === undefined || finalized === undefined) {
-        return null;
-      }
-      const [bestAge, finalizedAge] = await Promise.all([
-        queryBlockAgeMs(client, best.hash),
-        best.hash === finalized.hash
-          ? Promise.resolve(null)
-          : queryBlockAgeMs(client, finalized.hash),
-      ]);
-      return {
-        best: `${formatBlock(best.number)}${formatAge(bestAge)}`,
-        finalized: `${formatBlock(finalized.number)}${formatAge(best.hash === finalized.hash ? bestAge : finalizedAge)}`,
-      };
-    } finally {
-      client.destroy();
-    }
-  } catch {
-    return null;
+    return await Promise.race([
+      work,
+      new Promise<never>((_, reject) => {
+        timer = setTimeout(() => {
+          reject(new Error("timeout"));
+        }, ms);
+      }),
+    ]);
+  } finally {
+    clearTimeout(timer);
   }
 }
 
 /**
- * Query a chain's current peer count over the same bridge as the block
- * height. Read live on open rather than taken from the loading screen's
- * stream, which stops sampling once a chain is up and would leave a figure
- * that is minutes stale. Covers People too, which the loading bar never
- * waits on and so never reports.
+ * Everything the network panel shows for one chain, over a single client.
+ *
+ * Peers and heights used to be read by two functions that each stood up their
+ * own client, so an open panel churned eight of them every refresh. The
+ * budget is under the refresh interval so ticks cannot overlap.
  */
-async function queryPeerCount(genesisHash: string): Promise<number | null> {
+async function queryChainStatus(genesisHash: string): Promise<{
+  peers: number | null;
+  best: string | null;
+  finalized: string | null;
+}> {
+  const empty = { peers: null, best: null, finalized: null };
   try {
     if (!isRemoteChainSupported(genesisHash)) {
-      return null;
+      return empty;
     }
     const provider = createRemoteChainProvider(genesisHash);
     if (provider === null) {
-      return null;
+      return empty;
     }
     const papi = await import("polkadot-api");
     const client = papi.createClient(provider);
     try {
-      const health = await Promise.race([
+      const health = await withTimeout(
         client._request<{ peers?: number }>("system_health", []),
-        new Promise<never>((_, reject) => {
-          setTimeout(() => {
-            reject(new Error("timeout"));
-          }, 10_000);
-        }),
-      ]);
-      return typeof health.peers === "number" ? health.peers : null;
+        CHAIN_QUERY_TIMEOUT_MS,
+      ).catch(() => null);
+      const blocks = await withTimeout(
+        client.getBestBlocks(),
+        CHAIN_QUERY_TIMEOUT_MS,
+      ).catch(() => null);
+      const best = blocks?.at(0);
+      const finalized = blocks?.at(-1);
+      if (best === undefined || finalized === undefined) {
+        return { ...empty, peers: health?.peers ?? null };
+      }
+      const [bestAge, finalizedAge] = await withTimeout(
+        Promise.all([
+          queryBlockAgeMs(client, best.hash),
+          best.hash === finalized.hash
+            ? Promise.resolve(null)
+            : queryBlockAgeMs(client, finalized.hash),
+        ]),
+        CHAIN_QUERY_TIMEOUT_MS,
+      ).catch(() => [null, null]);
+      return {
+        peers: typeof health?.peers === "number" ? health.peers : null,
+        best: `${formatBlock(best.number)}${formatAge(bestAge)}`,
+        finalized: `${formatBlock(finalized.number)}${formatAge(best.hash === finalized.hash ? bestAge : finalizedAge)}`,
+      };
     } finally {
       client.destroy();
     }
   } catch {
-    return null;
+    return empty;
   }
 }
 
diff --git a/packages/ui/src/ui.ts b/packages/ui/src/ui.ts
index 4c80b860..ab1e6dc1 100644
--- a/packages/ui/src/ui.ts
+++ b/packages/ui/src/ui.ts
@@ -70,14 +70,8 @@ let progressInterval: ReturnType<typeof setInterval> | null = null;
 
 const CRAWL_TICK_MS = 200;
 
-// A band that runs longer than its estimate used to leave the bar frozen at
-// the band top: the worst case was the last one, which reached 95% and sat
-// there for up to 6s while the sandbox unpacked and painted. When a band is
-// exhausted the bar creeps on into the next band's space, which is free
-// because the step that owns it has not started. The creep is slow enough to
-// read as waiting rather than as a second, faster load, and it stops short
-// of 100 so only a finished load can fill the bar. Paced so the displayed
-// whole number keeps changing every few seconds rather than twice in total.
+// Where an exhausted band creeps on to, and how long it takes. Stops short
+// of 100 so only a finished load can fill the indicator.
 const CREEP_CEILING = 99;
 const CREEP_MS = 10_000;
 let creepCeiling = 0;
@@ -170,23 +164,17 @@ export function initPhases(phaseList: LoadingPhase[]): void {
     statusBlockEl?.classList.add("visible");
   }, STATUS_REVEAL_MS);
 
-  // Start narrating here rather than waiting for the first `advancePhase`,
-  // which lands a couple of seconds later once the protocol frame is up. The
-  // markup already shows this stage's opening line, so nothing moves on
-  // screen; what matters is that the rotation clock starts when the line
-  // first becomes visible, not when the resolver gets going. Without this the
-  // opener sat for over five seconds on a cold load.
+  // Not on the first `advancePhase`, which lands seconds later once the
+  // protocol frame is up. The markup already shows this stage's opening line,
+  // so the rotation clock has to start from when that line became visible.
   setLoadingStage("starting");
 }
 
 /** How long a load may run before it owes the user an explanation. */
 export const STATUS_REVEAL_MS = 3_000;
 
-// How often the line turns over. Longer than the three seconds a *static*
-// message is allowed, because most of this window is the turnover animation
-// rather than a still sentence: 3s of characters moving, then ~1.5s at rest.
-// A slower, calmer type-in cannot fit inside a 3s cycle and still leave the
-// finished sentence up long enough to read.
+// How often the line turns over. Most of this window is the turnover
+// animation, so the finished sentence itself is only still for the last ~1.5s.
 const MESSAGE_ROTATE_MS = 4_500;
 
 /** Placeholder swapped for the domain being loaded when a message is shown. */
@@ -210,19 +198,9 @@ export type LoadingStage = (typeof LOADING_STAGES)[number];
 /**
  * What the shell is doing, in the user's terms.
  *
- * The headline used to print the resolver's own prose, which is where
- * "Walking dag-pb via bitswap..." came from. These say the same thing in
- * plain words. Each stage carries several lines because a step can run for
- * half a minute, and one frozen sentence reads as a hang. The first line of
- * each stage names the step. The rest explain what a light client is doing
- * and why it takes the time it does, so a slow load teaches something
- * instead of just apologising.
- *
- * The lists are sized to how long each step actually runs, measured over ten
- * cold loads: content is the long pole at a 13s median and 89s worst case,
- * while every other step finishes inside 1.5s and rarely shows more than its
- * opener. Content and preparing therefore carry enough lines to cover a slow
- * load without repeating.
+ * The first line of each stage names the step. The rest explain what a light
+ * client is doing, and only a slow load reaches them. List lengths follow how
+ * long each step runs, so the long ones do not repeat.
  */
 const STAGE_MESSAGES: Record<LoadingStage, string[]> = {
   starting: [
@@ -274,25 +252,15 @@ export function setLoadingDomain(domain: string): void {
   loadingDomain = domain;
 }
 
-// The old line is deleted a character at a time and the new one typed in.
-// Both get a fixed budget rather than a per-character delay, so a long
-// sentence animates at the same pace as a short one and always lands inside
-// the rotation interval. At these durations a full-length sentence types at
-// roughly 24 characters a second, which reads as deliberate rather than
-// frantic, and clears away faster than it arrives.
+// A fixed budget rather than a per-character delay, so a long sentence
+// animates at the same pace as a short one and always lands inside the
+// rotation interval.
 const ERASE_MS = 800;
 const TYPE_MS = 2_200;
 let typingFrame: number | null = null;
 let pendingMessage: string | null = null;
 
-/**
- * Slow at both ends, quickest in the middle.
- *
- * A constant character rate is what made the change feel frantic: characters
- * appeared and vanished at full speed the instant a sentence turned over.
- * Easing means each sentence starts and finishes gently, and only the
- * unremarkable middle runs fast.
- */
+/** Slow at both ends, quickest in the middle. */
 function easeInOut(t: number): number {
   return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
 }
@@ -400,11 +368,9 @@ export function setLoadingStage(stage: LoadingStage): void {
   // Cycle back to the second line rather than the first: the opener names
   // the step, and showing it again would read as the load starting over.
   const loopFrom = messages.length > 2 ? 1 : 0;
-  // The opening line is in the markup, so it has been on screen since the
-  // page painted while this code waited on the protocol frame. Its turn is
-  // therefore due three seconds after the page appeared, not three seconds
-  // from here. Measured cold, that gap was 2.8s, and charging it to the
-  // first message left it up for 5.6s. Later turns get the full interval.
+  // The opening line has been on screen since the page painted, so its turn
+  // is due relative to that, not to whenever this ran. Later turns get the
+  // full interval.
   const firstDelay = openingLine
     ? Math.max(500, MESSAGE_ROTATE_MS - performance.now())
     : MESSAGE_ROTATE_MS;
@@ -441,11 +407,8 @@ export function setLifecycleStatus(text: string): void {
 /**
  * Live counters under the status line.
  *
- * Each is written only when supplied, and each starts as an em dash rather
- * than a zero: before the download begins there is no speed to report, and
- * "0 MB/s" reads as broken where "not yet" reads as honest. Peers are per
- * chain because one shared figure had to be blanked at every handover,
- * which put a zero on screen at the moments the load looked slowest.
+ * Each is written only when supplied, so a value stays blank until there is
+ * something true to put there. A zero would read as broken.
  */
 export function setLoadingMetrics(metrics: {
   relayPeers?: number;
@@ -463,7 +426,13 @@ export function setLoadingMetrics(metrics: {
     metricBulletinPeersEl.textContent = String(metrics.bulletinPeers);
   }
   if (metrics.bytesPerSecond !== undefined && metricSpeedEl !== null) {
-    metricSpeedEl.textContent = `${(metrics.bytesPerSecond / 1_048_576).toFixed(1)} MB/s`;
+    // Chain sync runs at tens of kB/s, which rounded to "0.0 MB/s" and read
+    // as nothing happening.
+    const perSecond = metrics.bytesPerSecond;
+    metricSpeedEl.textContent =
+      perSecond < 1_048_576
+        ? `${String(Math.round(perSecond / 1024))} kB/s`
+        : `${(perSecond / 1_048_576).toFixed(1)} MB/s`;
   }
 }
 
@@ -497,12 +466,9 @@ export function advancePhase(index: number): void {
   crawlStep =
     ((target - base) * CRAWL_TICK_MS) / Math.max(expectedMs, CRAWL_TICK_MS);
   // Headroom for a band that overruns: the next band's space, or the ceiling
-  // for the last one. Borrowing at most one band keeps a single slow step
-  // from eating the whole bar, and `advancePhase` never moves the bar
-  // backwards, so the next step simply carries on from wherever the creep
-  // reached. A band that reports a real percentage lends nothing: creeping
-  // into it would leave the indicator sitting above the figure that step is
-  // about to publish, which is how the logo came to look full at 58%.
+  // for the last one. A band that reports a real percentage lends nothing,
+  // since creeping into it would put the indicator above the figure that step
+  // is about to publish.
   const next = phases[index + 1] as LoadingPhase | undefined;
   const lentCeiling =
     next === undefined
@@ -524,24 +490,35 @@ export function advancePhase(index: number): void {
 }
 
 /**
- * Pull the indicator to a real fraction of the current phase's band.
+ * Pull the indicator to a real fraction of the band `stage` owns.
+ *
+ * Takes the indicator over from the crawl for as long as that step has
+ * something to say. Monotonic and clamped to the band, so a late or noisy
+ * signal can never rewind it.
  *
- * The crawl paces the band on a guess at how long the step takes. A step that
- * reports true progress takes the indicator over for as long as it has
- * something to say, so the logo tracks the download rather than the clock.
- * Monotonic and clamped to the band, so a late or noisy signal can never
- * rewind the indicator.
+ * The `stage` is checked against the running one, so a signal cannot drive a
+ * band it does not own. The relay's warp fraction arriving mid-sync used to
+ * both move the Asset Hub band and freeze its crawl.
  */
-export function nudgePhaseProgress(fraction: number): void {
+export function nudgePhaseProgress(
+  fraction: number,
+  stage: LoadingStage,
+): void {
   if (!Number.isFinite(fraction) || currentPhase < 0) {
     return;
   }
-  const { base, target } = phases[currentPhase];
+  const phase = phases[currentPhase];
+  if (phase.stage !== stage) {
+    return;
+  }
+  const { base, target } = phase;
   const clamped = Math.max(0, Math.min(1, fraction));
-  // Once the step's own work is finished there is no true number left to
-  // respect, so the creep takes over again and carries the indicator through
-  // the tail. That tail is the sandbox unpacking, which reports nothing.
-  phaseReportsProgress = clamped < 1;
+  // Only a band that asked to be driven this way may suppress the crawl, and
+  // only until its own work is done. After that the creep carries the
+  // indicator through the tail, which nothing reports on.
+  if (phase.reportsProgress === true) {
+    phaseReportsProgress = clamped < 1;
+  }
   const want = base + (target - base) * clamped;
   if (want > currentProgress) {
     setProgress(Math.min(want, target));
@@ -552,14 +529,11 @@ export function nudgePhaseProgress(fraction: number): void {
  * Give the indicator back to the clock.
  *
  * A step that declared `reportsProgress` holds the indicator until it can say
- * where the work is. If it turns out it cannot, because the download has no
- * declared total to measure against, it says so here and the crawl resumes.
+ * where the work is. This is how it admits it never will.
  *
- * This is deliberately not a timeout. A timeout fired whether or not anything
- * was happening: a load whose content chain never found a peer had the crawl
- * walk the logo to 99% and sit there for 49 seconds at 0.0 MB/s, claiming the
- * load was all but done while nothing at all was being downloaded. Holding
- * still is the honest answer, and the status row says why.
+ * Deliberately not a timeout. A timeout fired whether or not anything was
+ * happening, so a load whose content chain never found a peer still crept to
+ * 99% and sat there claiming to be nearly done.
  */
 export function releasePhaseProgress(): void {
   phaseReportsProgress = false;
@@ -635,8 +609,11 @@ function clearSlowWarning(): void {
 /**
  * Stop the progress crawl and clear any slow warning (call when loading is done).
  */
+/** Stop everything the loading screen has running. */
 export function stopStatusTick(): void {
   stopProgressCrawl();
+  stopStageMessages();
+  cancelStatusReveal();
   clearSlowWarning();
 }
 
@@ -724,6 +701,9 @@ export function showError(
   detail?: string,
   action?: ErrorAction | ErrorAction[] | (() => void),
 ): void {
+  // The markup below replaces the loading screen, so its timers have nothing
+  // left to write to.
+  stopStatusTick();
   if (typeof action === "function") {
     action = { label: "Retry", onClick: action };
   }

From 955568e104d543bf8c20c8cc6225528908725450 Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Tue, 11 Aug 2026 13:23:14 +0100
Subject: [PATCH 22/24] Restore the progress bar, drop the Completed readout,
 and slow the sentence turnover

---
 apps/host/index.html              | 118 +++++++++++++++++-------------
 packages/ui/src/styles/base.css   | 100 ++++++++++++++++---------
 packages/ui/src/styles/themes.css |  26 +++++--
 packages/ui/src/ui.ts             |  35 ++++-----
 4 files changed, 164 insertions(+), 115 deletions(-)

diff --git a/apps/host/index.html b/apps/host/index.html
index 2998f2ee..a12d290d 100644
--- a/apps/host/index.html
+++ b/apps/host/index.html
@@ -375,61 +375,53 @@ <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
     <!-- App Content -->
     <div id="app">
       <div class="loading">
-        <!-- Progress is the logo colouring itself in: an empty outline with
-             a solid copy stacked on top, revealed from the bottom. The paths
-             are defined once and referenced by the second layer. -->
+        <div class="loading-logo" id="loading-logo">
+          <svg
+            width="52"
+            height="52"
+            viewBox="0 0 256 256"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              class="loading-petal"
+              d="M31.0155 57.7181C14.6547 76.7768 14.2233 103.306 30.0862 116.92C45.9492 130.566 72.0667 126.15 88.4607 107.058C104.821 87.9995 105.253 61.4701 89.3899 47.8567C83.1841 42.511 75.3522 39.9543 67.1884 39.9543C54.5113 39.9543 40.9713 46.1302 31.0155 57.7181Z"
+            />
+            <path
+              class="loading-petal"
+              d="M26.2694 156.332C13.9574 170.941 19.3003 195.744 38.2164 211.715C57.1326 227.686 82.4868 228.815 94.7989 214.205C107.111 199.596 101.768 174.793 82.8518 158.822C72.8296 150.355 61.0153 146.072 50.2962 146.072C40.7718 146.072 32.077 149.459 26.3026 156.332"
+            />
+            <path
+              class="loading-petal"
+              d="M137.343 209.789C115.142 216.795 99.8429 231.072 103.161 241.664C106.513 252.256 127.221 255.178 149.423 248.139C171.625 241.133 186.923 226.856 183.605 216.264C181.481 209.59 172.454 205.938 160.507 205.938C153.505 205.938 145.54 207.166 137.343 209.756"
+            />
+            <path
+              class="loading-petal"
+              d="M102.597 18.5365C98.0176 31.7514 112.553 48.8179 135.12 56.6871C157.686 64.5562 179.689 60.2066 184.268 46.9917C188.848 33.7768 174.313 16.7103 151.746 8.84109C144.146 6.18482 136.58 4.9231 129.744 4.9231C116.303 4.9231 105.617 9.77078 102.597 18.5365Z"
+            />
+            <path
+              class="loading-petal"
+              d="M204.048 45.169C197.51 47.7921 199.07 66.884 207.499 87.7357C215.928 108.621 228.041 123.396 234.579 120.773C241.083 118.15 239.557 99.0912 231.128 78.2063C223.362 58.9484 212.444 44.8702 205.674 44.8702C205.11 44.8702 204.579 44.9698 204.048 45.169Z"
+            />
+            <path
+              class="loading-petal"
+              d="M209.058 172.038C199.766 192.192 196.547 210.553 201.89 213.01C207.233 215.468 219.114 201.124 228.406 180.969C237.731 160.815 240.917 142.453 235.607 139.996C235.209 139.797 234.778 139.731 234.28 139.731C228.472 139.731 217.654 153.411 209.058 172.038Z"
+            />
+          </svg>
+        </div>
         <div
-          class="loading-logo"
-          id="loading-logo"
+          class="loading-progress"
+          id="loading-progress"
           role="progressbar"
           aria-label="Loading"
           aria-valuemin="0"
           aria-valuemax="100"
           aria-valuenow="0"
         >
-          <svg
-            class="loading-logo-art loading-logo-empty"
-            viewBox="0 0 256 256"
-            xmlns="http://www.w3.org/2000/svg"
-            aria-hidden="true"
-          >
-            <g id="loading-petals">
-              <path
-                class="loading-petal"
-                d="M31.0155 57.7181C14.6547 76.7768 14.2233 103.306 30.0862 116.92C45.9492 130.566 72.0667 126.15 88.4607 107.058C104.821 87.9995 105.253 61.4701 89.3899 47.8567C83.1841 42.511 75.3522 39.9543 67.1884 39.9543C54.5113 39.9543 40.9713 46.1302 31.0155 57.7181Z"
-              />
-              <path
-                class="loading-petal"
-                d="M26.2694 156.332C13.9574 170.941 19.3003 195.744 38.2164 211.715C57.1326 227.686 82.4868 228.815 94.7989 214.205C107.111 199.596 101.768 174.793 82.8518 158.822C72.8296 150.355 61.0153 146.072 50.2962 146.072C40.7718 146.072 32.077 149.459 26.3026 156.332"
-              />
-              <path
-                class="loading-petal"
-                d="M137.343 209.789C115.142 216.795 99.8429 231.072 103.161 241.664C106.513 252.256 127.221 255.178 149.423 248.139C171.625 241.133 186.923 226.856 183.605 216.264C181.481 209.59 172.454 205.938 160.507 205.938C153.505 205.938 145.54 207.166 137.343 209.756"
-              />
-              <path
-                class="loading-petal"
-                d="M102.597 18.5365C98.0176 31.7514 112.553 48.8179 135.12 56.6871C157.686 64.5562 179.689 60.2066 184.268 46.9917C188.848 33.7768 174.313 16.7103 151.746 8.84109C144.146 6.18482 136.58 4.9231 129.744 4.9231C116.303 4.9231 105.617 9.77078 102.597 18.5365Z"
-              />
-              <path
-                class="loading-petal"
-                d="M204.048 45.169C197.51 47.7921 199.07 66.884 207.499 87.7357C215.928 108.621 228.041 123.396 234.579 120.773C241.083 118.15 239.557 99.0912 231.128 78.2063C223.362 58.9484 212.444 44.8702 205.674 44.8702C205.11 44.8702 204.579 44.9698 204.048 45.169Z"
-              />
-              <path
-                class="loading-petal"
-                d="M209.058 172.038C199.766 192.192 196.547 210.553 201.89 213.01C207.233 215.468 219.114 201.124 228.406 180.969C237.731 160.815 240.917 142.453 235.607 139.996C235.209 139.797 234.778 139.731 234.28 139.731C228.472 139.731 217.654 153.411 209.058 172.038Z"
-              />
-            </g>
-          </svg>
-          <div class="loading-logo-fill" id="loading-logo-fill">
-            <svg
-              class="loading-logo-art"
-              viewBox="0 0 256 256"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-            >
-              <use href="#loading-petals" />
-            </svg>
+          <div class="loading-progress-bar">
+            <div class="loading-progress-fill" id="loading-progress-fill"></div>
           </div>
+          <span class="loading-progress-pct" id="loading-progress-pct">0%</span>
         </div>
         <div class="loading-text" id="loading-text">
           <!-- Held back until the load has run long enough to be worth
@@ -467,10 +459,6 @@ <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
                 <dt>Speed</dt>
                 <dd id="metric-speed">&mdash;</dd>
               </div>
-              <div class="loading-metric">
-                <dt>Completed</dt>
-                <dd id="metric-completed">&mdash;</dd>
-              </div>
             </dl>
           </div>
           <p class="loading-hint" id="loading-hint"></p>
@@ -478,5 +466,33 @@ <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
       </div>
     </div>
     <script type="module" src="/src/main.ts"></script>
+    <script>
+      // Logo spinner — rAF-driven for smooth petal cycling
+      (function () {
+        var petals = document.querySelectorAll(".loading-petal");
+        if (!petals.length) return;
+        var count = petals.length;
+        var cycle = 1400;
+        var start = null;
+        var raf;
+        function tick(ts) {
+          if (!start) start = ts;
+          var p = ((ts - start) % cycle) / cycle;
+          for (var i = 0; i < count; i++) {
+            var dist = p - i / count;
+            if (dist < 0) dist += 1;
+            var b = Math.max(0.15, Math.pow(Math.max(0, 1 - dist * 2.5), 2));
+            petals[i].style.opacity = b;
+            petals[i].style.transform = "scale(" + (0.92 + 0.08 * b) + ")";
+          }
+          raf = requestAnimationFrame(tick);
+        }
+        raf = requestAnimationFrame(tick);
+        // Stop when loading is replaced
+        window.__stopLoadingSpinner = function () {
+          cancelAnimationFrame(raf);
+        };
+      })();
+    </script>
   </body>
 </html>
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index ba45d275..dcd70f1a 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -59,52 +59,80 @@ body {
   min-height: calc(100vh - 56px);
 }
 
-/* The logo is the progress indicator: an empty outline that colours itself
-   in from the left as the load advances. It replaced a separate 2px bar and
-   a petal-chase spinner, which between them showed motion that had nothing
-   to do with progress. */
+/* Loading logo spinner — rAF-driven via JS, CSS just sets transform-origin */
 .loading-logo {
-  position: relative;
-  width: 96px;
-  height: 96px;
   margin-bottom: 32px;
   transition: opacity 0.8s ease;
 }
-.loading-logo-art {
-  display: block;
-  width: 100%;
-  height: 100%;
+.loading-logo svg {
   overflow: visible;
 }
-/* Colour is set on the layers, not on `.loading-petal`. The filled layer is
-   a `<use>` of the same paths, and a clone takes the referenced element's
-   own computed styles, so a `fill` declared on the paths would apply to both
-   copies. Inherited `fill` does reach into the clone, which is what lets the
-   two layers differ. */
-.loading-logo-empty {
-  fill: rgba(255, 255, 255, 0.16);
-}
-.loading-logo-fill {
-  position: absolute;
-  inset: 0;
+.loading-petal {
   fill: #fff;
-  /* Clipped to nothing at 0%, revealed left to right as `setProgress`
-     rewrites the inset. One interpolatable property, so the 200ms crawl
-     ticks glide instead of stepping. */
-  clip-path: inset(0 100% 0 0);
-  transition: clip-path 0.4s ease-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .loading-logo-fill {
-    transition: none;
-  }
+  transform-origin: 128px 128px;
 }
 
+/* Progress bar */
+.loading-progress {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+  width: 240px;
+  max-width: calc(100vw - 48px);
+}
+.loading-progress-bar {
+  flex: 1;
+  height: 2px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 1px;
+  overflow: hidden;
+}
+.loading-progress-fill {
+  position: relative;
+  height: 100%;
+  width: 0%;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 1px;
+  transition: width 0.4s ease-out;
+  overflow: hidden;
+}
+/* Continuous sheen sweeping the filled portion. The simulated crawl can sit
+   near a band's top during a long sync with no real progress to report. The
+   sheen keeps visible motion so the bar never reads as frozen. */
+@media (prefers-reduced-motion: no-preference) {
+  .loading-progress-fill::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.9) 50%,
+      transparent 100%
+    );
+    transform: translateX(-100%);
+    animation: loading-progress-sheen 1.4s ease-in-out infinite;
+  }
+}
+@keyframes loading-progress-sheen {
+  to {
+    transform: translateX(100%);
+  }
+}
 /* The loading text ranks by size, weight, and family, never by contrast:
    every string here has to clear 4.5:1 against the page. Dimming with
    `opacity` is what used to sink the whole block to 1.8-3.2:1, so these
    are solid colours measured against #0a0a0a (dark) and #f5f5f5 (light,
    see themes.css). */
+.loading-progress-pct {
+  font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
+  font-size: 11px;
+  /* 6.12:1 */
+  color: #8f8f8f;
+  min-width: 3ch;
+  text-align: right;
+}
 
 /* Text block: the status block and the slow-step hint. Both are
    conditional, so the block collapses to nothing on a fast load and the
@@ -158,9 +186,9 @@ body {
   pointer-events: auto;
 }
 .loading-metrics {
-  /* Matches `.loading-logo`'s bottom margin, so the headline sits an equal
-     distance from the logo above it and the readouts below it. */
-  margin-top: 32px;
+  /* Matches `.loading-progress`'s bottom margin, so the headline sits an
+     equal distance from the bar above it and the readouts below it. */
+  margin-top: 24px;
   font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
   font-size: 11px;
   /* The loading block is centred, so the list centres as a unit while its
@@ -171,7 +199,7 @@ body {
   /* Fixed, not `min-width`. These readouts change while they are on screen,
      and a box that grows with its content re-centres the whole block every
      time a value gets longer. Sized to the widest row the readouts can
-     produce, which is "Asset Hub waiting for peers" at 243px. */
+     produce, which is "AssetHub waiting for peers" at 243px. */
   width: 248px;
   max-width: 100%;
 }
diff --git a/packages/ui/src/styles/themes.css b/packages/ui/src/styles/themes.css
index 6f92a697..5f667fef 100644
--- a/packages/ui/src/styles/themes.css
+++ b/packages/ui/src/styles/themes.css
@@ -225,16 +225,26 @@
 [data-theme="light"] .loading-gateway-btn-sub {
   color: rgba(0, 0, 0, 0.55);
 }
-/* Loading logo. The dark theme fills with #fff, which is invisible on the
-   light-theme cream body, so both layers flip. The filled layer is the state
-   indicator and needs 3:1 as a non-text component: #111 on #f5f5f5 clears
-   that with room to spare. The empty layer is the track, so it stays faint. */
-[data-theme="light"] .loading-logo-empty {
-  fill: rgba(0, 0, 0, 0.12);
-}
-[data-theme="light"] .loading-logo-fill {
+[data-theme="light"] .loading-progress-bar {
+  background: rgba(0, 0, 0, 0.06);
+}
+[data-theme="light"] .loading-progress-fill {
+  /* The fill is the state indicator, so it needs 3:1 as a non-text
+     component. 0.35 gave 2.43:1 against the page; 0.5 gives 3.88:1. */
+  background: rgba(0, 0, 0, 0.5);
+}
+/* Loading logo — dark-mode uses `fill: #fff` on the petals, which is
+   invisible on the light-theme cream body. Flip to near-black so the
+   animated logo actually shows during cold starts. */
+[data-theme="light"] .loading-petal {
   fill: #111;
 }
+[data-theme="light"] .loading-progress-pct {
+  /* 4.89:1, and kept below the detail line so the ranking survives the
+     flip. #333 would clear AA too, but it would outrank the headline's
+     own secondary line. */
+  color: #6b6b6b;
+}
 [data-theme="light"] .loading-status-heading,
 [data-theme="light"] .loading-details-summary,
 [data-theme="light"] .loading-metric dt {
diff --git a/packages/ui/src/ui.ts b/packages/ui/src/ui.ts
index ab1e6dc1..380289e6 100644
--- a/packages/ui/src/ui.ts
+++ b/packages/ui/src/ui.ts
@@ -55,13 +55,13 @@ let currentPhase = -1;
 
 // Progress indicator state
 let progressFillEl: HTMLElement | null = null;
-let progressLogoEl: HTMLElement | null = null;
+let progressPctEl: HTMLElement | null = null;
+let progressBarEl: HTMLElement | null = null;
 let statusBlockEl: HTMLElement | null = null;
 let metricRelayPeersEl: HTMLElement | null = null;
 let metricAssetHubPeersEl: HTMLElement | null = null;
 let metricBulletinPeersEl: HTMLElement | null = null;
 let metricSpeedEl: HTMLElement | null = null;
-let metricCompletedEl: HTMLElement | null = null;
 let revealTimer: ReturnType<typeof setTimeout> | null = null;
 let currentProgress = 0;
 let targetProgress = 0;
@@ -82,18 +82,13 @@ let phaseReportsProgress = false;
 function setProgress(pct: number): void {
   currentProgress = pct;
   if (progressFillEl !== null) {
-    // Clip away the right, so the colour sweeps in from the left edge.
-    progressFillEl.style.clipPath = `inset(0 ${String(100 - pct)}% 0 0)`;
+    progressFillEl.style.width = `${String(pct)}%`;
   }
-  // The bar carried no percentage for a screen reader to announce. Now that
-  // the logo is the indicator, it says the number out loud.
-  progressLogoEl?.setAttribute("aria-valuenow", String(Math.round(pct)));
-  // Completed is the whole load, which is the same number the logo is
-  // drawing. Writing it here rather than from the download means the two can
-  // never disagree, and it covers the steps before the download starts.
-  if (metricCompletedEl !== null) {
-    metricCompletedEl.textContent = `${String(Math.round(pct))} %`;
+  if (progressPctEl !== null) {
+    progressPctEl.textContent = `${String(Math.round(pct))}%`;
   }
+  // The bar itself carries no value for a screen reader, so the wrapper does.
+  progressBarEl?.setAttribute("aria-valuenow", String(Math.round(pct)));
 }
 
 function startProgressCrawl(): void {
@@ -125,7 +120,7 @@ function stopProgressCrawl(): void {
 }
 
 /**
- * Fill the logo completely.
+ * Snap the progress bar to 100%.
  * Called when loading is done, before the overlay fades out.
  */
 export function completeProgress(): void {
@@ -146,14 +141,14 @@ export function initPhases(phaseList: LoadingPhase[]): void {
   targetProgress = 0;
   phaseReportsProgress = false;
 
-  progressFillEl = document.getElementById("loading-logo-fill");
-  progressLogoEl = document.getElementById("loading-logo");
+  progressFillEl = document.getElementById("loading-progress-fill");
+  progressPctEl = document.getElementById("loading-progress-pct");
+  progressBarEl = document.getElementById("loading-progress");
   statusBlockEl = document.getElementById("loading-status");
   metricRelayPeersEl = document.getElementById("metric-peers-relay");
   metricAssetHubPeersEl = document.getElementById("metric-peers-assethub");
   metricBulletinPeersEl = document.getElementById("metric-peers-bulletin");
   metricSpeedEl = document.getElementById("metric-speed");
-  metricCompletedEl = document.getElementById("metric-completed");
 
   // A load that finishes quickly should never explain itself. Only once it
   // has run long enough to feel slow does the status block appear.
@@ -174,8 +169,8 @@ export function initPhases(phaseList: LoadingPhase[]): void {
 export const STATUS_REVEAL_MS = 3_000;
 
 // How often the line turns over. Most of this window is the turnover
-// animation, so the finished sentence itself is only still for the last ~1.5s.
-const MESSAGE_ROTATE_MS = 4_500;
+// animation, so the finished sentence itself is only still for the last ~2.7s.
+const MESSAGE_ROTATE_MS = 6_500;
 
 /** Placeholder swapped for the domain being loaded when a message is shown. */
 const DOMAIN_TOKEN = "{domain}";
@@ -255,8 +250,8 @@ export function setLoadingDomain(domain: string): void {
 // A fixed budget rather than a per-character delay, so a long sentence
 // animates at the same pace as a short one and always lands inside the
 // rotation interval.
-const ERASE_MS = 800;
-const TYPE_MS = 2_200;
+const ERASE_MS = 1_000;
+const TYPE_MS = 2_800;
 let typingFrame: number | null = null;
 let pendingMessage: string | null = null;
 

From 6b92c38e8cc1e49ce0a9121f67c72975386f3ea5 Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Tue, 11 Aug 2026 13:33:24 +0100
Subject: [PATCH 23/24] Remove the gateway escape button from the loading
 screen

---
 apps/host/index.html                       |  1 -
 apps/host/src/main.ts                      | 57 +++++++---------
 apps/host/tests/functional/loading.spec.ts | 67 +------------------
 packages/metrics/src/spans.ts              |  7 --
 packages/ui/src/styles/base.css            | 75 ----------------------
 packages/ui/src/styles/themes.css          | 21 ------
 packages/ui/src/ui.ts                      | 69 --------------------
 7 files changed, 24 insertions(+), 273 deletions(-)

diff --git a/apps/host/index.html b/apps/host/index.html
index a12d290d..2233f9b3 100644
--- a/apps/host/index.html
+++ b/apps/host/index.html
@@ -461,7 +461,6 @@ <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
               </div>
             </dl>
           </div>
-          <p class="loading-hint" id="loading-hint"></p>
         </div>
       </div>
     </div>
diff --git a/apps/host/src/main.ts b/apps/host/src/main.ts
index f37c79ee..a782d3c4 100644
--- a/apps/host/src/main.ts
+++ b/apps/host/src/main.ts
@@ -38,7 +38,6 @@ import {
   setLifecycleStatus,
   stopStatusTick,
   listenForSandboxStatus,
-  showGatewayEscape,
 } from "@dotli/ui/ui";
 import type { LoadingPhase } from "@dotli/ui/ui";
 import type { ChainKey, ChainSyncKind } from "@dotli/resolver/smoldot";
@@ -1537,41 +1536,29 @@ async function main(): Promise<void> {
       log.warn(
         `[dot.li resolve] path=smoldot (trustless light-client) (${elapsed(T0)})`,
       );
-      // After 10s of slow loading on the verified path, surface a one-click
-      // escape to the gateway backend. The user trades the light-client
-      // verification badge for a faster, trust-based load.
-      const cancelGatewayEscape = showGatewayEscape(() => {
-        m.count(S.GATEWAY_ESCAPE, { from_backend: chainBackend });
-        switchBackendAndReload("rpc-gateway");
-      });
-
-      try {
-        const { statusToPhase } = await import("@dotli/resolver/resolve");
-        const onResolveProgress = (msg: string): void => {
-          // Progress events arrive as opaque strings across the iframe
-          // boundary. The resolver package owns the authoritative
-          // mapping from status text to ResolvePhase, so we defer to it
-          // instead of maintaining a parallel regex here.
-          const phase = statusToPhase(msg);
-          const mappedPhase = phase === null ? undefined : PHASE_INDEX[phase];
-          if (mappedPhase !== undefined) {
-            advancePhase(mappedPhase);
-          }
-          emitPhase(msg, phase ?? "progress");
-          // These strings are the resolver talking to a developer, which is
-          // how "Walking dag-pb via bitswap..." reached the headline. They
-          // stay in the debug stream and move the bar; the stage messages
-          // say the same thing to the user.
-        };
-        cid = await resolveDotNameRemote(`app.${label}`, onResolveProgress);
-        if (cid === null) {
-          cid = await resolveDotNameRemote(label, onResolveProgress);
-          log.warn(
-            `[dot.li resolve] fallback ${label}.dot contenthash -> ${cid ?? "null"}`,
-          );
+      const { statusToPhase } = await import("@dotli/resolver/resolve");
+      const onResolveProgress = (msg: string): void => {
+        // Progress events arrive as opaque strings across the iframe
+        // boundary. The resolver package owns the authoritative mapping from
+        // status text to ResolvePhase, so we defer to it instead of
+        // maintaining a parallel regex here.
+        const phase = statusToPhase(msg);
+        const mappedPhase = phase === null ? undefined : PHASE_INDEX[phase];
+        if (mappedPhase !== undefined) {
+          advancePhase(mappedPhase);
         }
-      } finally {
-        cancelGatewayEscape();
+        emitPhase(msg, phase ?? "progress");
+        // These strings are the resolver talking to a developer, which is how
+        // "Walking dag-pb via bitswap..." reached the headline. They stay in
+        // the debug stream and move the bar; the stage messages say the same
+        // thing to the user.
+      };
+      cid = await resolveDotNameRemote(`app.${label}`, onResolveProgress);
+      if (cid === null) {
+        cid = await resolveDotNameRemote(label, onResolveProgress);
+        log.warn(
+          `[dot.li resolve] fallback ${label}.dot contenthash -> ${cid ?? "null"}`,
+        );
       }
     } else {
       log.warn(
diff --git a/apps/host/tests/functional/loading.spec.ts b/apps/host/tests/functional/loading.spec.ts
index 99519def..bc604138 100644
--- a/apps/host/tests/functional/loading.spec.ts
+++ b/apps/host/tests/functional/loading.spec.ts
@@ -131,30 +131,6 @@ const successfulResolveResponse = (cid: string): string => `
   });
 `;
 
-/** Rescale any setTimeout call whose delay matches `fromMs` down to `toMs`. */
-async function shrinkTimeout(
-  page: Page,
-  fromMs: number,
-  toMs: number,
-): Promise<void> {
-  await page.addInitScript(
-    ([from, to]) => {
-      const orig = window.setTimeout.bind(window);
-      window.setTimeout = ((
-        handler: TimerHandler,
-        ms?: number,
-        ...rest: unknown[]
-      ) =>
-        orig(
-          handler,
-          ms === from ? to : ms,
-          ...rest,
-        )) as typeof window.setTimeout;
-    },
-    [fromMs, toMs],
-  );
-}
-
 test("As a user using smoldot directly, when the light client panics mid-resolution, I see the appropriate error and can switch backend", async ({
   page,
 }) => {
@@ -265,12 +241,11 @@ test("As a user using smoldot in shared worker, when the worker dies silently, I
   );
 });
 
-test("As a user using smoldot directly, when loading is slow (>10s) I see a one-click gateway escape, and if it times out (>45s) I see the appropriate error and can switch backend", async ({
+test("As a user using smoldot directly, when the resolution times out I see the appropriate error and can switch backend", async ({
   page,
 }) => {
   // Given
   await setBackend(page, "smoldot-direct");
-  await shrinkTimeout(page, 10_000, 500);
   await mockProtocolIframe(
     page,
     errorResolveResponse(
@@ -283,10 +258,6 @@ test("As a user using smoldot directly, when loading is slow (>10s) I see a one-
   await page.goto(HOST_URL, { waitUntil: "domcontentloaded" });
 
   // Then
-  await expect(page.locator(".loading-gateway-btn")).toContainText(
-    "Use Trusted Provider",
-    { timeout: 5_000 },
-  );
   await expect(page.locator(".error-page-title")).toHaveText(
     "Domain can't be reached",
     { timeout: 10_000 },
@@ -302,12 +273,11 @@ test("As a user using smoldot directly, when loading is slow (>10s) I see a one-
   );
 });
 
-test("As a user using smoldot in shared worker, when loading is slow (>10s) I see a one-click gateway escape, and if it times out (>45s) I see the appropriate error and can switch backend", async ({
+test("As a user using smoldot in shared worker, when the resolution times out I see the appropriate error and can switch backend", async ({
   page,
 }) => {
   // Given
   await setBackend(page, "smoldot-shared-worker");
-  await shrinkTimeout(page, 10_000, 500);
   await mockProtocolIframe(
     page,
     errorResolveResponse(
@@ -320,10 +290,6 @@ test("As a user using smoldot in shared worker, when loading is slow (>10s) I se
   await page.goto(HOST_URL, { waitUntil: "domcontentloaded" });
 
   // Then
-  await expect(page.locator(".loading-gateway-btn")).toContainText(
-    "Use Trusted Provider",
-    { timeout: 5_000 },
-  );
   await expect(page.locator(".error-page-title")).toHaveText(
     "Domain can't be reached",
     { timeout: 10_000 },
@@ -339,35 +305,6 @@ test("As a user using smoldot in shared worker, when loading is slow (>10s) I se
   );
 });
 
-test("As a user using smoldot directly, when I click the gateway escape, the backend flips to rpc-gateway and the page reloads", async ({
-  page,
-}) => {
-  // Given
-  await setBackend(page, "smoldot-direct");
-  await shrinkTimeout(page, 10_000, 500);
-  await mockProtocolIframe(
-    page,
-    errorResolveResponse("never resolves in test window", 30_000),
-  );
-
-  // When
-  await page.goto(HOST_URL, { waitUntil: "domcontentloaded" });
-  const gatewayBtn = page.locator(".loading-gateway-btn");
-  await expect(gatewayBtn).toContainText("Use Trusted Provider", {
-    timeout: 5_000,
-  });
-  await Promise.all([
-    page.waitForLoadState("domcontentloaded"),
-    gatewayBtn.click(),
-  ]);
-
-  // Then
-  const backend = await page.evaluate(() =>
-    localStorage.getItem("dotli:chain-backend"),
-  );
-  expect(backend).toBe("rpc-gateway");
-});
-
 test("As a user, when the app chunks fail to load mid-session, I see the appropriate error with a reload button", async ({
   page,
 }) => {
diff --git a/packages/metrics/src/spans.ts b/packages/metrics/src/spans.ts
index e0c668d2..0851c7ba 100644
--- a/packages/metrics/src/spans.ts
+++ b/packages/metrics/src/spans.ts
@@ -158,13 +158,6 @@ export const AUTH_SESSION_RESTORE = "auth.session_restore";
 /** WASM module load time (captured via PerformanceObserver) */
 export const WASM_LOAD = "wasm.load";
 
-/**
- * User clicked the "Use gateway instead" escape hatch on the loading
- * screen. Tagged with `from_backend` so we can see which verified path
- * (smoldot-direct vs smoldot-shared-worker) the user bailed out of.
- */
-export const GATEWAY_ESCAPE = "loading.gateway_escape";
-
 /**
  * Shared-storage request rejected before it could touch `localStorage`:
  * bad siteId, malformed key, disallowed origin, or unrecognised value
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index dcd70f1a..0bb97ce4 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -234,81 +234,6 @@ body {
 .loading-metric-peers > dd {
   margin-left: 12px;
 }
-/* Slow-step hint (shown below status when a step exceeds its threshold) */
-.loading-hint {
-  font-size: 11px;
-  color: #eab308;
-  opacity: 0;
-  font-style: italic;
-  text-align: center;
-  transition: opacity 0.3s ease;
-  min-height: 1.3em;
-  /* Restores the 12px break the status/detail pair gave up. */
-  margin-top: 6px;
-}
-.loading-hint.visible {
-  /* Full opacity: the amber is already AA at 10.32:1, and fading it to
-     half sank it to 3.27:1. The transition still carries the fade in. */
-  opacity: 1;
-}
-.loading-hint-text {
-  display: block;
-}
-
-.loading-gateway-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  margin: 20px auto 0;
-  padding: 10px 16px 10px 14px;
-  border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  background: rgba(255, 255, 255, 0.03);
-  color: rgba(255, 255, 255, 0.92);
-  font-family: inherit;
-  cursor: pointer;
-  line-height: 1.2;
-  transition:
-    border-color 0.2s ease,
-    background 0.2s ease,
-    color 0.2s ease,
-    transform 0.15s ease;
-}
-.loading-gateway-btn:hover {
-  border-color: rgba(255, 255, 255, 0.32);
-  background: rgba(255, 255, 255, 0.07);
-  color: #fff;
-}
-.loading-gateway-btn:active {
-  transform: translateY(1px);
-}
-.loading-gateway-btn-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 7px;
-  background: rgba(255, 255, 255, 0.06);
-  color: #fafafa;
-  flex-shrink: 0;
-}
-.loading-gateway-btn-text {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 1px;
-}
-.loading-gateway-btn-label {
-  font-size: 12.5px;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-.loading-gateway-btn-sub {
-  font-size: 10.5px;
-  color: rgba(255, 255, 255, 0.5);
-  letter-spacing: -0.005em;
-}
 
 .accent {
   color: #fafafa;
diff --git a/packages/ui/src/styles/themes.css b/packages/ui/src/styles/themes.css
index 5f667fef..74c0cb91 100644
--- a/packages/ui/src/styles/themes.css
+++ b/packages/ui/src/styles/themes.css
@@ -204,27 +204,6 @@
 [data-theme="light"] #status {
   color: #1a1a1a;
 }
-[data-theme="light"] .loading-hint {
-  /* 6.50:1, where #b45309 was 4.61:1 before the fade and 3.92:1 after. */
-  color: #92400e;
-}
-[data-theme="light"] .loading-gateway-btn {
-  border-color: rgba(0, 0, 0, 0.16);
-  background: rgba(0, 0, 0, 0.03);
-  color: rgba(0, 0, 0, 0.85);
-}
-[data-theme="light"] .loading-gateway-btn:hover {
-  border-color: rgba(0, 0, 0, 0.32);
-  background: rgba(0, 0, 0, 0.06);
-  color: #111;
-}
-[data-theme="light"] .loading-gateway-btn-icon {
-  background: rgba(0, 0, 0, 0.06);
-  color: #0a0a0a;
-}
-[data-theme="light"] .loading-gateway-btn-sub {
-  color: rgba(0, 0, 0, 0.55);
-}
 [data-theme="light"] .loading-progress-bar {
   background: rgba(0, 0, 0, 0.06);
 }
diff --git a/packages/ui/src/ui.ts b/packages/ui/src/ui.ts
index 380289e6..885c63ad 100644
--- a/packages/ui/src/ui.ts
+++ b/packages/ui/src/ui.ts
@@ -534,73 +534,6 @@ export function releasePhaseProgress(): void {
   phaseReportsProgress = false;
 }
 
-export const GATEWAY_ESCAPE_DELAY_MS = 10_000;
-
-/**
- * One-click "Use Trusted Provider" escape hatch on the loading screen.
- * Renders at most once per page lifetime after `delayMs` of slow loading.
- * Returns a cancel function that clears the pending timer.
- */
-export function showGatewayEscape(
-  onClick: () => void,
-  delayMs: number = GATEWAY_ESCAPE_DELAY_MS,
-): () => void {
-  const timer = setTimeout(() => {
-    const hint = document.getElementById("loading-hint");
-    if (hint === null) {
-      return;
-    }
-    if (hint.querySelector(".loading-gateway-btn") !== null) {
-      return;
-    }
-    const btn = document.createElement("button");
-    btn.className = "loading-gateway-btn";
-    btn.type = "button";
-    const icon = document.createElement("span");
-    icon.className = "loading-gateway-btn-icon";
-    icon.setAttribute("aria-hidden", "true");
-    icon.innerHTML =
-      '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
-      '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>';
-    const text = document.createElement("span");
-    text.className = "loading-gateway-btn-text";
-    const label = document.createElement("span");
-    label.className = "loading-gateway-btn-label";
-    label.textContent = "Use Trusted Provider";
-    const sub = document.createElement("span");
-    sub.className = "loading-gateway-btn-sub";
-    sub.textContent = "Faster but no verification";
-    text.append(label, sub);
-    btn.append(icon, text);
-    btn.addEventListener("click", (ev) => {
-      ev.stopPropagation();
-      onClick();
-    });
-    hint.appendChild(btn);
-    hint.classList.add("visible");
-  }, delayMs);
-  return () => {
-    clearTimeout(timer);
-  };
-}
-
-// Single-line status. Updates #status in place.
-
-function clearSlowWarning(): void {
-  const hint = document.getElementById("loading-hint");
-  if (hint !== null) {
-    // Remove only the text span, preserve any gateway button
-    const textSpan = hint.querySelector(".loading-hint-text");
-    if (textSpan !== null) {
-      textSpan.remove();
-    }
-    // Only hide if no gateway button is present
-    if (hint.querySelector(".loading-gateway-btn") === null) {
-      hint.classList.remove("visible");
-    }
-  }
-}
-
 /**
  * Stop the progress crawl and clear any slow warning (call when loading is done).
  */
@@ -609,7 +542,6 @@ export function stopStatusTick(): void {
   stopProgressCrawl();
   stopStageMessages();
   cancelStatusReveal();
-  clearSlowWarning();
 }
 
 /** Cancel the pending status reveal, for a load that finished in time. */
@@ -626,7 +558,6 @@ function cancelStatusReveal(): void {
  */
 export function dismissLoading(): void {
   completeProgress();
-  clearSlowWarning();
   cancelStatusReveal();
   stopStageMessages();
   const loading = document.querySelector<HTMLElement>("#app > .loading");

From 0441f3374f21da6883820aef71d13a8ad0a917c1 Mon Sep 17 00:00:00 2001
From: Tiago Tavares <tiago.tavares@parity.io>
Date: Tue, 11 Aug 2026 13:45:02 +0100
Subject: [PATCH 24/24] Show only how long ago each block landed and reword the
 connected status

---
 packages/ui/src/topbar.ts | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/topbar.ts b/packages/ui/src/topbar.ts
index 4f869667..bf06f253 100644
--- a/packages/ui/src/topbar.ts
+++ b/packages/ui/src/topbar.ts
@@ -993,7 +993,7 @@ function describeNetworkStatus(): { text: string; tone: string } {
     (k) => k === "bootstrapComplete" || k === "recovered",
   );
   return settled
-    ? { text: "Connected", tone: "ok" }
+    ? { text: "Your connection is good", tone: "ok" }
     : { text: "Connecting", tone: "idle" };
 }
 
@@ -2197,15 +2197,16 @@ async function queryBlockAgeMs(
 }
 
 /** "4s ago", "2m ago". Blank when the chain would not say. */
-function formatAge(ms: number | null): string {
+/** How long ago a block landed, or null when its timestamp is unreadable. */
+function formatAge(ms: number | null): string | null {
   if (ms === null) {
-    return "";
+    return null;
   }
   const secs = Math.round(ms / 1000);
   if (secs < 60) {
-    return ` (${String(secs)}s ago)`;
+    return `${String(secs)}s ago`;
   }
-  return ` (${String(Math.round(secs / 60))}m ago)`;
+  return `${String(Math.round(secs / 60))}m ago`;
 }
 
 /**
@@ -2278,8 +2279,10 @@ async function queryChainStatus(genesisHash: string): Promise<{
       ).catch(() => [null, null]);
       return {
         peers: typeof health?.peers === "number" ? health.peers : null,
-        best: `${formatBlock(best.number)}${formatAge(bestAge)}`,
-        finalized: `${formatBlock(finalized.number)}${formatAge(best.hash === finalized.hash ? bestAge : finalizedAge)}`,
+        best: formatAge(bestAge),
+        finalized: formatAge(
+          best.hash === finalized.hash ? bestAge : finalizedAge,
+        ),
       };
     } finally {
       client.destroy();