fix(showcase/harness): realign d5-chat-css probe with HALCYON theme

The chat-customization-css demo was re-skinned to the HALCYON
parchment+ember theme; the probe still asserted the legacy hot-pink
(#ff006e) user bubble and amber (#fde047) assistant bubble. New
theme paints the user bubble's inner bg-muted element with the
halcyon-paper-elevated background plus an ember (#c44a1f) left
border in JetBrains Mono, and the assistant bubble in Fraunces
serif on a transparent background.

Replace the two background-color anchors with three independent
signals — ember rgb on the user inner border-left, JetBrains Mono
fragment on the user inner font-family (with fallback chain so
Linux runners without the webfont still match), and Fraunces fragment
on the assistant font-family. Each signal trips a distinct error so
operators can tell which CSS layer broke.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: tylerslaton

showcase/harness/src/probes/scripts/d5-chat-css.test.ts

@@ -52,38 +52,56 @@ describe("d5-chat-css script", () => {
   });
 
   describe("validateChatCss", () => {
-    it("returns null when both bubbles carry the expected RGB anchors", () => {
+    it("returns null when all halcyon signals are present", () => {
       expect(
         validateChatCss({
-          userBg:
-            "linear-gradient(135deg, rgb(255, 0, 110) 0%, rgb(194, 24, 91) 100%) rgba(0, 0, 0, 0)",
-          assistantBg: "rgb(253, 224, 71)",
+          userBorderLeft: "rgb(196, 74, 31)",
+          userFontFamily:
+            '"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace',
+          assistantFontFamily:
+            '"Fraunces", "Source Serif Pro", ui-serif, Georgia, "Times New Roman", serif',
         }),
       ).toBeNull();
     });
 
-    it("returns error when user bubble missing red anchor", () => {
+    it("returns error when user bubble missing ember left border", () => {
       expect(
         validateChatCss({
-          userBg: "rgb(0, 0, 255)",
-          assistantBg: "rgb(253, 224, 71)",
+          userBorderLeft: "rgb(0, 0, 0)",
+          userFontFamily: "JetBrains Mono",
+          assistantFontFamily: "Fraunces",
         }),
-      ).toMatch(/red\/pink anchor/);
+      ).toMatch(/halcyon-ember left border/);
     });
 
-    it("returns error when assistant bubble missing yellow anchor", () => {
+    it("returns error when user bubble missing halcyon-mono font", () => {
       expect(
         validateChatCss({
-          userBg: "rgb(255, 0, 110)",
-          assistantBg: "rgb(255, 255, 255)",
+          userBorderLeft: "rgb(196, 74, 31)",
+          userFontFamily: "Arial, sans-serif",
+          assistantFontFamily: "Fraunces",
         }),
-      ).toMatch(/yellow\/amber anchor/);
+      ).toMatch(/halcyon-mono font/);
+    });
+
+    it("returns error when assistant bubble missing halcyon-serif font", () => {
+      expect(
+        validateChatCss({
+          userBorderLeft: "rgb(196, 74, 31)",
+          userFontFamily: "JetBrains Mono",
+          assistantFontFamily: "Arial, sans-serif",
+        }),
+      ).toMatch(/halcyon-serif font/);
     });
 
     it("returns error when bubbles missing entirely", () => {
-      expect(validateChatCss({ userBg: null, assistantBg: null })).toMatch(
-        /user bubble.*not found/,
-      );
+      expect(
+        validateChatCss({
+          userBorderLeft: null,
+          userFontFamily: null,
+          assistantFontFamily: null,
+        }),
+      ).toMatch(/user bubble inner.*not found/);
     });
   });
 
@@ -94,14 +112,16 @@ describe("d5-chat-css script", () => {
     ).rejects.toThrow(/assistant bubble selector/);
   });
 
-  it("assertion succeeds when computed colors match", async () => {
+  it("assertion succeeds when computed styles match", async () => {
     const assertion = buildChatCssAssertion();
     await expect(
       assertion(
         makePage({
-          userBg:
-            "linear-gradient(135deg, rgb(255, 0, 110) 0%, rgb(194, 24, 91) 100%)",
-          assistantBg: "rgb(253, 224, 71)",
+          userBorderLeft: "rgb(196, 74, 31)",
+          userFontFamily:
+            '"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace',
+          assistantFontFamily:
+            '"Fraunces", "Source Serif Pro", ui-serif, Georgia, "Times New Roman", serif',
         }),
       ),
     ).resolves.toBeUndefined();

showcase/harness/src/probes/scripts/d5-chat-css.ts

@@ -2,20 +2,25 @@
  * D5 — chat-css script.
  *
  * Drives `/demos/chat-customization-css` through one user turn and
- * verifies the demo's CSS theme is actually applied in the browser by
- * reading computed styles on the user-message and assistant-message
+ * verifies the demo's HALCYON theme is actually applied in the browser
+ * by reading computed styles on the user-message and assistant-message
  * bubbles. The demo (see
  * `showcase/integrations/langgraph-python/src/app/demos/chat-customization-css/theme.css`)
- * paints user bubbles with a hot-pink gradient (`#ff006e` → `#c2185b`)
- * and assistant bubbles with amber (`#fde047`). A failure here means
- * either the CSS import broke, the `chat-css-demo-scope` wrapper class
- * was lost, or the upstream `.copilotKit*` class names drifted.
+ * paints user bubbles with a parchment paper-elevated background and
+ * an ember left-border accent (`#c44a1f` → rgb(196, 74, 31)) on the
+ * inner `[class*="bg-muted"]` element, plus JetBrains Mono. Assistant
+ * messages use Fraunces serif on a transparent background with an
+ * ember `::before` rule. A failure here means either the CSS import
+ * broke, the `chat-css-demo-scope` wrapper class was lost, or the
+ * upstream `.copilotKit*` class names drifted.
  *
- * Assertions look for the substantive theme color signature:
- *   - user bubble's background contains `255, 0, 110` (the pink/red rgb
- *     anchor) — gradient resolves to either `linear-gradient(...)` or to
- *     a flattened color depending on browser
- *   - assistant bubble's background resolves to `rgb(253, 224, 71)` (amber)
+ * Three independent signals cover the theme — any one missing trips
+ * the assertion with a specific error so operators don't have to
+ * guess which layer broke:
+ *   1. user bubble's inner element border-left-color contains
+ *      `196, 74, 31` (the halcyon-ember rgb anchor)
+ *   2. user bubble's inner element font-family contains "JetBrains Mono"
+ *   3. assistant bubble's font-family contains "Fraunces"
  *
  * One turn matches the recorded fixture (`chat-css.json`).
  */
@@ -36,26 +41,46 @@ export const USER_BUBBLE_SELECTOR = ".copilotKitMessage.copilotKitUserMessage";
 /** Assistant-bubble selector. */
 export const ASSISTANT_BUBBLE_SELECTOR =
   ".copilotKitMessage.copilotKitAssistantMessage";
+/** The user bubble's inner v2 element — paints the halcyon-paper-elevated
+ *  background plus the ember left border. The outer message wrapper is
+ *  transparent in the new theme; signals all live on this inner node. */
+export const USER_BUBBLE_INNER_SELECTOR = `${USER_BUBBLE_SELECTOR} [class*="bg-muted"]`;
 
-/** Hot-pink rgb anchor present in the user-bubble gradient (#ff006e). */
-const USER_RGB_FRAGMENT = "255, 0, 110";
-/** Amber rgb on the assistant bubble (#fde047). */
-const ASSISTANT_RGB_FRAGMENT = "253, 224, 71";
+/** halcyon-ember rgb anchor (`#c44a1f`) on the user-bubble inner border-left. */
+const EMBER_RGB_FRAGMENT = "196, 74, 31";
+/** Editorial mono token (`var(--halcyon-mono)`) — JetBrains Mono with
+ *  a CSS fallback chain. The fallback covers Linux runners that lack
+ *  the webfont, so we accept either the real face or one of the
+ *  declared fallbacks. */
+const USER_MONO_FONT_FRAGMENTS = [
+  "JetBrains Mono",
+  // Fallback chain from `--halcyon-mono`.
+  "ui-monospace",
+  "SF Mono",
+  "Menlo",
+  "Consolas",
+];
+/** Editorial serif token (`var(--halcyon-serif)`) — Fraunces with
+ *  fallbacks. Same rationale as the mono fragments. */
+const ASSISTANT_SERIF_FONT_FRAGMENTS = [
+  "Fraunces",
+  "Source Serif Pro",
+  "ui-serif",
+];
 
 const PROBE_TIMEOUT_MS = 5_000;
 
 /**
- * Probe-result shape: per-bubble computed background string. `null` means
- * the selector didn't match, which the assertion treats as
- * "missing bubble" — distinct from "matched but wrong color".
+ * Probe-result shape: per-bubble computed strings. `null` means the
+ * selector didn't match, distinct from "matched but wrong style".
  */
 export interface ChatCssProbeResult {
-  userBg: string | null;
-  assistantBg: string | null;
+  userBorderLeft: string | null;
+  userFontFamily: string | null;
+  assistantFontFamily: string | null;
 }
 
-/** Read computed `background` / `background-color` for both bubbles
- *  inside the demo scope.
+/** Read computed styles on both bubbles inside the demo scope.
  *
  *  Notes on the page.evaluate body shape:
  *  - We do NOT declare local const-arrows or TS interfaces inside the
@@ -70,39 +95,57 @@ export async function probeChatCss(page: Page): Promise<ChatCssProbeResult> {
     const win = globalThis as unknown as {
       document: { querySelector(sel: string): unknown };
       getComputedStyle(el: unknown): {
-        background?: string;
-        backgroundColor?: string;
+        borderLeftColor?: string;
+        fontFamily?: string;
       };
     };
-    const userEl = win.document.querySelector(
+    const userOuter = win.document.querySelector(
       ".copilotKitMessage.copilotKitUserMessage",
     );
+    // The inner node is the v2 framework's bubble that consumes the
+    // `bg-muted` Tailwind utility — the demo's CSS hooks the substring
+    // class-match because the upstream Tailwind class composition
+    // includes `bg-muted` on the bubble div.
+    const userInner = (userOuter as { querySelector?(sel: string): unknown } | null)?.querySelector?.(
+      '[class*="bg-muted"]',
+    );
     const assistantEl = win.document.querySelector(
       ".copilotKitMessage.copilotKitAssistantMessage",
     );
-    const userBg = userEl
-      ? `${win.getComputedStyle(userEl).background ?? ""} ${win.getComputedStyle(userEl).backgroundColor ?? ""}`.trim()
-      : null;
-    const assistantBg = assistantEl
-      ? `${win.getComputedStyle(assistantEl).background ?? ""} ${win.getComputedStyle(assistantEl).backgroundColor ?? ""}`.trim()
+    const userStyle = userInner ? win.getComputedStyle(userInner) : null;
+    const assistantStyle = assistantEl
+      ? win.getComputedStyle(assistantEl)
       : null;
-    return { userBg, assistantBg };
+    return {
+      userBorderLeft: userStyle?.borderLeftColor ?? null,
+      userFontFamily: userStyle?.fontFamily ?? null,
+      assistantFontFamily: assistantStyle?.fontFamily ?? null,
+    };
   })) as ChatCssProbeResult;
 }
 
 /** Validate the probe — returns null on pass, error string on fail. */
 export function validateChatCss(probe: ChatCssProbeResult): string | null {
-  if (probe.userBg === null) {
-    return `chat-css: user bubble (${USER_BUBBLE_SELECTOR}) not found in DOM`;
+  if (probe.userBorderLeft === null || probe.userFontFamily === null) {
+    return `chat-css: user bubble inner (${USER_BUBBLE_INNER_SELECTOR}) not found in DOM`;
   }
-  if (probe.assistantBg === null) {
+  if (probe.assistantFontFamily === null) {
     return `chat-css: assistant bubble (${ASSISTANT_BUBBLE_SELECTOR}) not found in DOM`;
   }
-  if (!probe.userBg.includes(USER_RGB_FRAGMENT)) {
-    return `chat-css: user bubble background missing red/pink anchor (${USER_RGB_FRAGMENT}) — got "${probe.userBg.slice(0, 200)}"`;
+  if (!probe.userBorderLeft.includes(EMBER_RGB_FRAGMENT)) {
+    return `chat-css: user bubble missing halcyon-ember left border (${EMBER_RGB_FRAGMENT}) — got "${probe.userBorderLeft.slice(0, 200)}"`;
+  }
+  if (
+    !USER_MONO_FONT_FRAGMENTS.some((f) => probe.userFontFamily!.includes(f))
+  ) {
+    return `chat-css: user bubble missing halcyon-mono font (one of ${USER_MONO_FONT_FRAGMENTS.join(", ")}) — got "${probe.userFontFamily.slice(0, 200)}"`;
   }
-  if (!probe.assistantBg.includes(ASSISTANT_RGB_FRAGMENT)) {
-    return `chat-css: assistant bubble background missing yellow/amber anchor (${ASSISTANT_RGB_FRAGMENT}) — got "${probe.assistantBg.slice(0, 200)}"`;
+  if (
+    !ASSISTANT_SERIF_FONT_FRAGMENTS.some((f) =>
+      probe.assistantFontFamily!.includes(f),
+    )
+  ) {
+    return `chat-css: assistant bubble missing halcyon-serif font (one of ${ASSISTANT_SERIF_FONT_FRAGMENTS.join(", ")}) — got "${probe.assistantFontFamily.slice(0, 200)}"`;
   }
   return null;
 }