The status bar follows the reader's theme, the bookmark chips lose their words (v0.61.1)

- Status bar (PWA): applyTheme rewrote only the FIRST theme-color tag — the
  light-scoped one. A UA reads the first tag whose media MATCHES, so a
  dark-mode phone under a light reader theme kept Theme::Dark's paper in its
  live tag; Chrome chose light status-bar icons for it and drew them over the
  cream the page paints under its transparent bar — clock and battery washed
  out. Every tag now carries the resolved paper; the boot script does the same
  from the cached palette for an explicitly chosen theme (never for "follow
  the device", whose media pair is already right). Pre-existing, several
  releases old. E2e: theme-color.spec.ts.
- Bookmark chips: NO TEXT — round icon chips (44px floor), the words on
  aria-label/title and in the tap's toast. Several visible at once, centred
  while they fit and left-anchored scrolling once they don't, so a chip cut at
  the edge says "more" (the one-per-page pager hid that there were others).
  One flag per running plan; "+N more" is gone. plans-today/bookmarks specs
  read the aria-label; bookmarks.spec pins no-text and several-in-viewport.
- Both new regression tests mutation-tested against rebuilt bundles.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Author: glendonjklassen

Cargo.lock

@@ -21,7 +21,7 @@ default-members = [
 # shells — About renders it as `engine ` + this number. The workflow refuses a tag
 # whose version disagrees with this line (and with apps/web/package.json), so a
 # release ships one number, not three.
-version = "0.61.0"
+version = "0.61.1"
 edition = "2021"
 license = "MIT"
 authors = ["Glendon Klassen <gjklassen@proton.me>"]

Cargo.toml

@@ -1,12 +1,13 @@
 import { expect, test, type Page } from "@playwright/test";
 
-// The bookmarks strip (maintainer ask, 2026-08-24): the row above the canon
-// strip — grown out of the plan chip — carries a swipeable tile per stored
-// bookmark: the running plan, then every seating position in `config.slots`
-// (Last opened, Sunday morning, Sunday evening, Wednesday evening), each with
-// an icon naming its kind. A tap toasts WHICH bookmark it was and where it is
-// going, then navigates — four tiles all reading "John 3" are otherwise
-// indistinguishable mid-swipe.
+// The bookmarks row (maintainer ask, 2026-08-24; icon-only 2026-08-25): the row
+// above the canon strip — grown out of the plan chip — carries a round ICON
+// chip per stored bookmark: the running plan, then every seating position in
+// `config.slots` (Last opened, Sunday morning, Sunday evening, Wednesday
+// evening). NO TEXT on the chips: the words ride aria-label/title, and a tap
+// toasts WHICH bookmark it was before navigating — with no words on the face,
+// the toast is the confirmation. Several chips show at once, so it is plain
+// there are more than one and that the row scrolls when they overflow.
 
 async function boot(page: Page): Promise<void> {
   await page.setViewportSize({ width: 1100, height: 800 });
@@ -20,7 +21,7 @@ async function boot(page: Page): Promise<void> {
   await expect(page.locator(".subtitle")).toHaveText(/\w+ \d+/, { timeout: 90_000 });
 }
 
-test("a stored seating rides the strip; a tap says which bookmark and goes there", async ({ page }) => {
+test("a stored seating is an icon chip; a tap says which bookmark and goes there", async ({ page }) => {
   await boot(page);
   // Plant a Sunday-morning seating other than where the reader is.
   await page.evaluate(() => {
@@ -29,10 +30,10 @@ test("a stored seating rides the strip; a tap says which bookmark and goes there
   });
 
   const tile = page.locator('.bm-tile[data-slot="sunday-morning"]');
-  await expect(tile).toContainText("Sunday morning");
-  await expect(tile).toContainText("Psalms 23:4");
-  // The icon names the tile's kind for the eye the label serves for the reader.
+  // The words are the accessible name, not the face.
+  await expect(tile).toHaveAttribute("aria-label", "Sunday morning · Psalms 23:4");
   await expect(tile.locator("svg")).toHaveCount(1);
+  expect((await tile.textContent())?.trim(), "NO TEXT on the chip — the icon is the whole face").toBe("");
 
   await tile.click();
   // The toast names the BOOKMARK, plainly — no "going to…" sentence; the
@@ -47,7 +48,29 @@ test("the everyday seating shows as Last opened", async ({ page }) => {
     const s = (window as any).__plumbline;
     s.config.slots = { other: { book: "Rom", chapter: 8 } };
   });
-  const tile = page.locator('.bm-tile[data-slot="other"]');
-  await expect(tile).toContainText("Last opened");
-  await expect(tile).toContainText("Romans 8");
+  await expect(page.locator('.bm-tile[data-slot="other"]')).toHaveAttribute("aria-label", "Last opened · Romans 8");
+});
+
+test("several chips are visible at once, not one page at a time", async ({ page }) => {
+  await page.setViewportSize({ width: 360, height: 740 }); // a phone, where one-at-a-time hid the rest
+  await page.goto("/");
+  const est = page.getByRole("button", { name: "Established believer" });
+  await expect(est.or(page.locator(".pane canvas").first())).toBeVisible({ timeout: 90_000 });
+  if (await est.isVisible().catch(() => false)) {
+    await est.click();
+    await page.getByRole("button", { name: "Start reading" }).click();
+  }
+  await expect(page.locator(".subtitle")).toHaveText(/\w+ \d+/, { timeout: 90_000 });
+  await page.evaluate(() => {
+    const s = (window as any).__plumbline;
+    s.config.slots = {
+      other: { book: "Rom", chapter: 8 },
+      "sunday-morning": { book: "Ps", chapter: 23 },
+      "sunday-evening": { book: "John", chapter: 17 },
+      "wednesday-evening": { book: "Acts", chapter: 2 },
+    };
+  });
+  const chips = page.locator(".bm-tile");
+  await expect(chips).toHaveCount(4);
+  for (let i = 0; i < 4; i++) await expect(chips.nth(i)).toBeInViewport();
 });

apps/web/e2e/bookmarks.spec.ts

@@ -30,11 +30,12 @@ test("a running plan rides the reader: the chip goes to today, the navigator lea
     await s.author("planStart", "nt-90", new Date().toISOString());
   });
 
-  // The chip appears with day 1. Its text is the plan's own answer, so pin the
-  // expected target from the same wire the chip reads.
+  // The chip appears with day 1. Its label (aria-label — the chip is icon-only)
+  // is the plan's own answer, so pin the expected target from the same wire
+  // the chip reads.
   const chip = page.locator(".plan-chip-row .plan-chip").first();
   await expect(chip).toBeVisible({ timeout: 10_000 });
-  await expect(chip).toHaveText(/Day 1 · /);
+  await expect(chip).toHaveAttribute("aria-label", /Day 1 · /);
 
   const first = await page.evaluate(async () => {
     const s = (window as any).__plumbline;
@@ -98,7 +99,7 @@ test("the chronological plan is offered, starts, and day 1 begins at Genesis 1",
   // lives on the READ screen, and Plans is a destination that replaces the
   // reader — so go back the way the ‹ does before looking for it.
   await page.evaluate(() => (window as any).__plumbline.goRead());
-  await expect(page.locator(".plan-chip-row .plan-chip").first()).toHaveText(/Day 1 · /);
+  await expect(page.locator(".plan-chip-row .plan-chip").first()).toHaveAttribute("aria-label", /Day 1 · /);
 });
 
 // The UAT round (2026-08-11). Three separate ways the plans surfaces misled a
@@ -139,8 +140,9 @@ test("finishing a chapter advances the chip and its label", async ({ page }) =>
     return plans.running.find((p: any) => p.id === "bible-365").today.chapters[0];
   });
   const chip = page.locator(".plan-chip-row .plan-chip").first();
-  await expect(chip).toContainText(first.display);
-  const labelBefore = await chip.textContent();
+  // Icon-only chip: its label is the aria-label, not its text.
+  await expect(chip).toHaveAttribute("aria-label", new RegExp(first.display.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")));
+  const labelBefore = await chip.getAttribute("aria-label");
 
   // Read the chapter the way a phone does: dwell ticks into the core's tracker,
   // whose banked report lands as `readingWrote` — NOT an authoring write. The
@@ -159,7 +161,7 @@ test("finishing a chapter advances the chip and its label", async ({ page }) =>
 
   // The chip now names what is LEFT — a label that never moves all evening is
   // the UAT bug — and sends the reader to the next chapter.
-  await expect(chip).not.toHaveText(labelBefore!);
+  await expect(chip).not.toHaveAttribute("aria-label", labelBefore!);
   const landed = await page.evaluate(async () => {
     const s = (window as any).__plumbline;
     document.querySelector<HTMLButtonElement>(".plan-chip-row .plan-chip")!.click();
@@ -212,7 +214,7 @@ test("reading the day's worth advances the chip to the next day", async ({ page
   // …and the chip shows DAY 2 — the next portion, ready to be read ahead —
   // rather than disappearing until midnight.
   await expect(chip).toBeVisible();
-  await expect(chip).toHaveText(/Day 2 · /);
+  await expect(chip).toHaveAttribute("aria-label", /Day 2 · /);
 });
 
 // Pause sets a plan aside WHOLE: the chip stands down, the card says when the
@@ -247,7 +249,7 @@ test("a paused plan asks nothing until it is resumed", async ({ page }) => {
   await card.getByRole("button", { name: "Resume" }).click();
   await expect(card.getByRole("button", { name: "Pause" })).toBeVisible();
   await page.evaluate(() => (window as any).__plumbline.goRead());
-  await expect(page.locator(".plan-chip-row .plan-chip").first()).toHaveText(/Day 1 · /);
+  await expect(page.locator(".plan-chip-row .plan-chip").first()).toHaveAttribute("aria-label", /Day 1 · /);
 });
 
 test("no Explore card spills its text past its border, at any text scale", async ({ page }) => {

apps/web/e2e/plans-today.spec.ts

@@ -0,0 +1,36 @@
+import { expect, test } from "@playwright/test";
+
+// The status bar follows the READER'S theme, whatever the phone's own scheme.
+// index.html ships two media-scoped theme-color tags (the pre-script paint —
+// manifest.spec.ts pins those); once the palette is known the app rewrites
+// them. It rewrote only the FIRST, the light-scoped one — so a dark-mode phone,
+// whose UA reads the SECOND, kept Theme::Dark's paper under a light reader
+// theme. Chrome then drew light status-bar icons over the cream the page paints
+// beneath its transparent bar: the clock and battery washed out (maintainer,
+// 2026-08-25). Every tag has to carry the resolved paper.
+
+test("every theme-color tag carries the reader's paper, on a dark-mode device too", async ({ page }) => {
+  await page.emulateMedia({ colorScheme: "dark" });
+  await page.goto("/");
+  const est = page.getByRole("button", { name: "Established believer" });
+  await expect(est.or(page.locator(".pane canvas").first())).toBeVisible({ timeout: 90_000 });
+  if (await est.isVisible().catch(() => false)) {
+    await est.click();
+    await page.getByRole("button", { name: "Start reading" }).click();
+  }
+  await expect(page.locator(".subtitle")).toHaveText(/\w+ \d+/, { timeout: 90_000 });
+
+  // A LIGHT reader theme on a DARK device — the mismatch that exposed it.
+  const paper = await page.evaluate(() => {
+    const s = (window as any).__plumbline;
+    s.config.theme = "light";
+    s.applyTheme();
+    return s.palette.paper as string;
+  });
+  expect(paper.toLowerCase()).toBe("#fcf9f4");
+  const contents = await page.evaluate(() =>
+    [...document.querySelectorAll('meta[name="theme-color"]')].map((m) => m.getAttribute("content")),
+  );
+  expect(contents.length, "the media-scoped pair is still there to be rewritten").toBe(2);
+  for (const c of contents) expect(c?.toLowerCase(), "a tag the UA may be reading was left stale").toBe(paper.toLowerCase());
+});

apps/web/e2e/theme-color.spec.ts

@@ -132,10 +132,24 @@
         // Every string role, not a hand-picked five: the writer is
         // `applyTheme()`, which sets one custom property per string field, and
         // reproducing its subset here would be a second list to keep in step.
-        if (stored)
+        if (stored) {
           for (var role in stored)
             if (typeof stored[role] === "string")
               document.documentElement.style.setProperty("--" + role, stored[role]);
+          // The status bar too, and BOTH tags (see session.applyTheme) — but
+          // ONLY for a theme the reader chose by hand. For "follow the device"
+          // the media-scoped pair above is already the right pre-script answer
+          // and last session's paper may not be (the phone's scheme can change
+          // between sessions); for an explicit theme the cached paper is right
+          // whatever the device says, and the pair is what is stale — a
+          // dark-mode phone under a light reader theme otherwise boots with
+          // light icons over cream until the engine's palette lands.
+          var choice = localStorage.getItem("plumbline:themeChoice");
+          if (typeof stored.paper === "string" && choice && choice !== "system") {
+            var metas = document.querySelectorAll('meta[name="theme-color"]');
+            for (var i = 0; i < metas.length; i++) metas[i].setAttribute("content", stored.paper);
+          }
+        }
       } catch (e) {
         /* storage blocked or unparseable: the defaults above still paint */
       }

apps/web/index.html

@@ -1,7 +1,7 @@
 {
   "name": "plumbline-web",
   "private": true,
-  "version": "0.61.0",
+  "version": "0.61.1",
   "type": "module",
   "scripts": {
     "dev": "npm run pack:i18n && vite",