fix(showcase): harden beautiful-chat toggleTheme against page-close races

Two related changes targeting the fc=97 'Target page closed' D5 failure
on `beautiful-chat-toggle-theme`:

1. Probe (`_beautiful-chat-shared.ts:assertToggleTheme`) — replace the
   manual 200ms `page.evaluate` poll over 30s with Playwright's
   `waitForFunction`. The native polling is event-driven inside the
   browser context, disconnects cleanly on page-close, and avoids
   ~150 round-trip evaluates per probe. The catch branch now checks
   `page.isClosed()` first and surfaces a diagnostic message naming
   the renderer-crash case explicitly, so operators don't have to
   guess what 'Target page closed' meant.

2. Demo (`use-generative-ui-examples.tsx`) — drop `[theme, setTheme]`
   from the `useFrontendTool` deps array. The handler reads `document`
   directly and the setter is stable across renders, so the deps
   array forced a re-registration after every theme flip. That race
   could collide with an in-flight tool result and surface as a
   renderer error during multi-turn sequences. Removing deps keeps
   the tool registration stable for the duration of the conversation.

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

Author: tylerslaton

showcase/harness/src/probes/scripts/_beautiful-chat-shared.ts

@@ -209,14 +209,72 @@ export function asClickablePage(
  */
 export async function assertToggleTheme(page: ConversationPage): Promise<void> {
   const initiallyDark = await readIsHtmlDark(page);
-  const deadline = Date.now() + 30_000;
-  while (Date.now() < deadline) {
-    if ((await readIsHtmlDark(page)) !== initiallyDark) return;
-    await new Promise((r) => setTimeout(r, 200));
+  // Use `waitForFunction` over a manual page.evaluate poll because:
+  //   1. Playwright drives the polling internally and disconnects
+  //      cleanly if the page closes (no "Target page closed" leak —
+  //      historically this assertion accumulated fc=97 in production
+  //      from page-close races during multi-turn renders).
+  //   2. Event-driven inside the page is cheaper than 150 round-trip
+  //      page.evaluate calls over 30s.
+  // The boolean predicate captures `initiallyDark` via separate
+  // branches because the runner's structural `waitForFunction` doesn't
+  // expose Playwright's optional `arg` parameter, and a closure-capture
+  // would cross the page boundary (the fn runs in browser context).
+  // Cast to access waitForFunction — same pattern as asClickablePage.
+  // ConversationPage is the minimal runner-facing surface; real Playwright
+  // pages (and E2eDeepPage) expose waitForFunction natively.
+  type WaitFnPage = {
+    waitForFunction(
+      fn: () => boolean,
+      opts?: { timeout?: number },
+    ): Promise<unknown>;
+  };
+  const waiter = page as unknown as WaitFnPage;
+  if (typeof (waiter as { waitForFunction?: unknown }).waitForFunction !== "function") {
+    throw new Error(
+      `beautiful-chat-toggle-theme: page is missing waitForFunction() — runner did not provide a Playwright-shaped page`,
+    );
+  }
+  try {
+    if (initiallyDark) {
+      await waiter.waitForFunction(
+        () => {
+          const win = globalThis as unknown as {
+            document: {
+              documentElement: { classList: { contains(s: string): boolean } };
+            };
+          };
+          return !win.document.documentElement.classList.contains("dark");
+        },
+        { timeout: 30_000 },
+      );
+    } else {
+      await waiter.waitForFunction(
+        () => {
+          const win = globalThis as unknown as {
+            document: {
+              documentElement: { classList: { contains(s: string): boolean } };
+            };
+          };
+          return win.document.documentElement.classList.contains("dark");
+        },
+        { timeout: 30_000 },
+      );
+    }
+  } catch (err) {
+    const closeAware = page as ConversationPage & {
+      isClosed?: () => boolean;
+    };
+    if (closeAware.isClosed?.()) {
+      throw new Error(
+        `beautiful-chat-toggle-theme: page closed before theme flipped from ${initiallyDark ? "dark" : "light"} — likely a renderer crash in the demo's toggleTheme handler or surrounding tree`,
+      );
+    }
+    const msg = err instanceof Error ? err.message : String(err);
+    throw new Error(
+      `beautiful-chat-toggle-theme: html.dark class did not flip from ${initiallyDark ? "dark" : "light"} within 30s — toggleTheme tool did not fire (${msg.slice(0, 120)})`,
+    );
   }
-  throw new Error(
-    `beautiful-chat-toggle-theme: html.dark class did not flip from ${initiallyDark ? "dark" : "light"} within 30s — toggleTheme tool did not fire`,
-  );
 }
 
 /**

showcase/integrations/langgraph-python/src/app/demos/beautiful-chat/hooks/use-generative-ui-examples.tsx

@@ -20,7 +20,7 @@ import { MeetingTimePicker } from "../components/generative-ui/meeting-time-pick
 import { ToolReasoning } from "../components/tool-rendering";
 
 export const useGenerativeUIExamples = () => {
-  const { theme, setTheme } = useTheme();
+  const { setTheme } = useTheme();
 
   // Human-in-the-Loop (frontend tool requiring user decision)
   useHumanInTheLoop({
@@ -67,17 +67,19 @@ export const useGenerativeUIExamples = () => {
     },
   });
 
-  // Frontend Tools (direct frontend state manipulation)
-  useFrontendTool(
-    {
-      name: "toggleTheme",
-      description: "Frontend tool for toggling the theme of the app.",
-      parameters: z.object({}),
-      handler: async () => {
-        const isDark = document.documentElement.classList.contains("dark");
-        setTheme(isDark ? "light" : "dark");
-      },
+  // Frontend Tools (direct frontend state manipulation).
+  // No deps array needed — the handler reads `document` directly and
+  // calls a stable setter. Including [theme, setTheme] in deps caused
+  // the hook to re-register every time the theme flipped, which could
+  // race with an in-flight tool result from the runtime and surface
+  // as a renderer-level error during multi-turn beautiful-chat probes.
+  useFrontendTool({
+    name: "toggleTheme",
+    description: "Frontend tool for toggling the theme of the app.",
+    parameters: z.object({}),
+    handler: async () => {
+      const isDark = document.documentElement.classList.contains("dark");
+      setTheme(isDark ? "light" : "dark");
     },
-    [theme, setTheme],
-  );
+  });
 };