fix(web-shell): add explicit ::selection for message content in Firefox

packages/web-shell/client/build-artifact.test.ts

@@ -217,4 +217,36 @@ describe('build artifact — package boundary', () => {
     });
     expect(unscoped).toEqual([]);
   });
+
+  it('ships the ::selection highlight for message content in the lib bundle (#8214)', () => {
+    // The defensive ::selection rule must reach embedded deployments -
+    // i.e. it must be in the component-scoped CSS injected into dist/index.js,
+    // not only the standalone app's standalone.css. Asserting the rule is
+    // present and scoped under the WebShell root pins the lib-bundle fix.
+    let matched: Rule | undefined;
+    postcss.parse(readInjectedCss()).walkRules((rule) => {
+      // Match the effect (selectable rows get a ::selection rule scoped to
+      // the WebShell root), not the exact notation - a maintainer changing
+      // `background` to `background-color` (the CSS Pseudo-Elements-4 name)
+      // should not break this pin while the e2e one stays green.
+      if (
+        rule.selector.includes('[data-user-selectable]') &&
+        rule.selector.includes('::selection')
+      ) {
+        matched = rule;
+      }
+    });
+    expect(
+      matched,
+      '::selection rule for [data-user-selectable] missing from lib bundle',
+    ).toBeDefined();
+    expect(matched?.selector).toContain('[data-web-shell-root]');
+    expect(
+      matched?.nodes.some(
+        (n) =>
+          n.type === 'decl' &&
+          (n.prop === 'background' || n.prop === 'background-color'),
+      ),
+    ).toBe(true);
+  });
 });

packages/web-shell/client/e2e/web-shell.smoke.spec.ts

@@ -40,6 +40,30 @@ test('loads replayed transcript and connects to fake daemon @smoke', async ({
   await expect(page.locator('[data-web-shell-message-list]')).toContainText(
     'Hello from fake daemon',
   );
+
+  // #8214: pin the explicit ::selection rule on message content. This
+  // asserts the rule is present and matches every [data-user-selectable]
+  // wrapper row (user and assistant alike), not just the first one; it
+  // does not verify the Firefox paint effect itself (this repo's Playwright
+  // projects are chromium-only).
+  const selectionBackgrounds = await page.evaluate(() => {
+    // Match the wrapper rows themselves, not their descendants - a single
+    // row renders many descendant elements, so counting descendants does
+    // not enforce the "both roles present" invariant.
+    const rows = document.querySelectorAll('[data-user-selectable]');
+    return Array.from(rows, (row) => {
+      // ::selection applies to the element's text content; sample the first
+      // text-bearing descendant (or the row itself if it has none).
+      const target = row.querySelector('*') ?? row;
+      return getComputedStyle(target, '::selection').backgroundColor;
+    });
+  });
+  // The fixture renders both a user and an assistant message, so there must
+  // be at least two selectable rows and every one must carry the rule.
+  expect(selectionBackgrounds.length).toBeGreaterThanOrEqual(2);
+  for (const bg of selectionBackgrounds) {
+    expect(bg).toBe('rgba(0, 128, 255, 0.3)');
+  }
 });
 
 test('submits a prompt and renders a streamed assistant response @smoke', async ({

packages/web-shell/client/styles/globals.css

@@ -132,3 +132,25 @@
   *::-webkit-scrollbar-thumb:hover {
   background: var(--scrollbar-thumb-hover);
 }
+
+/*
+ * Defensive selection-highlight rule for message content. #8214.
+ *
+ * Firefox is suspected of not painting the default selection highlight for
+ * text whose element chain passes through a `display: contents` element (the
+ * `data-user-selectable` wrapper on MessageItem). The logical selection
+ * (copy, selectionchange popup) works fine - only the visual highlight is
+ * missing. An explicit `::selection` background makes Firefox paint the
+ * highlight where the default painting may fail. This is a low-risk
+ * workaround, not a confirmed root-cause fix: the wrapper is shared by user
+ * and assistant rows alike, and the reporter's environment appears to be an
+ * embedding page, so its own CSS may also need adjustment.
+ *
+ * This rule lives in the component-scoped stylesheet (loaded by App.tsx and
+ * WebShellTranscript.tsx) rather than standalone.css so it ships with the
+ * npm package and applies to embedded deployments, not just the standalone
+ * app.
+ */
+[data-user-selectable] ::selection {
+  background: hsl(210 100% 50% / 30%);
+}