Keep only the proven example-selection race; log Turnstile on CI

Revert SKIP_TURNSTILE/Caddy (it broke /service/control/health and was
not proven as the 120s hang). Keep getCode() plus waiting for
.rs-panel-in, with a local same-click repro. Add console markers around
Turnstile so the next hung /run on CI shows whether execute() returned.

Co-authored-by: Max Schmitt <max@schmitt.mx>

Author: cursoragent

e2e/tests/visual.spec.ts

@@ -167,7 +167,7 @@ test.describe("should handle platform core related features", () => {
 
     await page.getByRole('button', { name: 'Run'}).click();
     await expect(page.getByText("Execution timeout!")).toBeVisible({
-      timeout: 90 * 1000,
+      timeout: 70 * 1000,
     });
   })
   test("should handle uncaughtException correctly", async ({ page }) => {

frontend/Caddyfile

@@ -2,31 +2,16 @@
 
 root * /frontend
 
-# Path-specific handles are mutually exclusive. A catch-all file_server
-# handle would 404 /service/control/* before reverse_proxy could run.
-handle /runtime-config.js {
-	header Content-Type text/javascript
-	header Cache-Control no-store
-	respond "window.__TRY_PLAYWRIGHT__={skipTurnstile:{$SKIP_TURNSTILE:false}};"
-}
-
-handle /service/control/* {
-	reverse_proxy control:8080
-}
-
-handle /file-uploads/* {
-	reverse_proxy rustfs:9000 {
-		header_up Host rustfs:9000
-		method GET
-	}
-}
-
-handle {
-	file_server
-}
+file_server
 
 header *.js Cache-Control max-age=86400
 header *.css Cache-Control max-age=86400
 header *.tff Cache-Control max-age=86400
 
 log
+
+reverse_proxy /service/control/* control:8080
+reverse_proxy /file-uploads/* rustfs:9000 {
+	header_up Host rustfs:9000
+	method GET
+}

frontend/index.html

@@ -7,15 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="An interactive playground for Playwright with various examples available."/>
     <title>Try Playwright</title>
-    <script src="/runtime-config.js"></script>
-    <script>
-      if (!window.__TRY_PLAYWRIGHT__?.skipTurnstile) {
-        const script = document.createElement('script');
-        script.defer = true;
-        script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
-        document.head.appendChild(script);
-      }
-    </script>
+    <script defer src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-34156117-11"></script>
     <script>
       if (!window.location.search.includes("no-analytics")) {

frontend/public/runtime-config.js

@@ -3,7 +3,6 @@ import { Col, Grid, IconButton, Loader, Panel, CustomProvider } from 'rsuite'
 import PlayIcon from '@rsuite/icons/PlayOutline';
 
 import { ExecutionResponse, runCode, trackEvent } from '../../utils'
-import { waitForTurnstileToken } from '../../turnstile'
 import RightPanel from '../RightPanel'
 import Header from '../Header'
 import Editor from '../Editor'
@@ -22,39 +21,52 @@ const App: React.FunctionComponent = () => {
   const handleExecutionRef = useRef<() => Promise<void>>(undefined)
   const [darkMode] = useDarkMode()
   const turnstileRef = useRef<HTMLDivElement>(null)
-  const skipTurnstile = Boolean(window.__TRY_PLAYWRIGHT__?.skipTurnstile)
 
   const handleExecution = async (): Promise<void> => {
     setLoading(true)
     setResponse(null)
 
     trackEvent()
-    const turnstileToken = skipTurnstile
-      ? ''
-      : await waitForTurnstileToken({
-          turnstile: window.turnstile,
-          container: turnstileRef.current,
-          sitekey: VITE_TURNSTILE_SITEKEY,
-        })
+    const started = Date.now()
+    console.info('[try-playwright] run: before-turnstile', {
+      hasExecute: typeof (window as any).turnstile?.execute,
+      elapsedMs: 0,
+    })
+    const turnstileToken = await new Promise<string>((resolve) => {
+      try {
+        (window as any).turnstile.reset();
+      } catch (error) {}
+      (window as any).turnstile.execute(turnstileRef.current, {
+        sitekey: VITE_TURNSTILE_SITEKEY,
+        callback: (token: string) => {
+          console.info('[try-playwright] run: turnstile-callback', {
+            elapsedMs: Date.now() - started,
+            tokenLength: token ? token.length : 0,
+          })
+          resolve(token)
+        },
+        'error-callback': () => {
+          console.info('[try-playwright] run: turnstile-error-callback', {
+            elapsedMs: Date.now() - started,
+          })
+          resolve('')
+        },
+      });
+    });
     const codeToRun = getCode()
-    try {
-      setResponse(await runCode(codeToRun, codeLanguage, turnstileToken))
-    } finally {
-      setLoading(false)
-      onChangeRightPanelMode(false)
-    }
+    console.info('[try-playwright] run: posting', {
+      elapsedMs: Date.now() - started,
+      codeLength: codeToRun.length,
+    })
+    setResponse(await runCode(codeToRun, codeLanguage, turnstileToken))
+    setLoading(false)
+    onChangeRightPanelMode(false)
   }
   handleExecutionRef.current = handleExecution
 
   return (
     <CustomProvider theme={darkMode ? 'dark' : 'light'}>
-      {!skipTurnstile && (
-        <div
-          ref={turnstileRef}
-          aria-hidden="true"
-          style={{ position: 'fixed', left: 0, bottom: 0, width: 300, height: 65, opacity: 0.01, pointerEvents: 'none', overflow: 'hidden' }}
-        />
-      )}
+      <div ref={turnstileRef} style={{ display: 'none' }} />
       <Header />
       <Grid fluid className={styles.grid}>
         <Col span={{ xs: 24, md: 12 }}>

frontend/src/components/App/index.tsx

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/experimental-ct-react'
+import { StaleCodeRefRepro } from './staleCodeRef'
+
+test('render state is stale in the same click as onChange; getCode is not', async ({ mount }) => {
+  const component = await mount(<StaleCodeRefRepro />)
+  await component.getByRole('button', { name: 'select-and-read' }).click()
+  await expect(component.getByTestId('from-render')).toHaveText('')
+  await expect(component.getByTestId('from-ref')).toHaveText('example-8-code')
+})

frontend/src/components/staleCodeRef.spec.tsx

@@ -0,0 +1,55 @@
+import { createContext, useContext, useRef, useState, type ReactNode } from 'react'
+
+type LatestCode = {
+  code: string
+  getCode: () => string
+  onChange: (value: string) => void
+}
+
+const Ctx = createContext<LatestCode>({
+  code: '',
+  getCode: () => '',
+  onChange: (_value: string) => {},
+})
+
+const Provider = ({ children }: { children: ReactNode }) => {
+  const [code, setCode] = useState('')
+  const latestCode = useRef(code)
+  const onChange = (next: string) => {
+    latestCode.current = next
+    setCode(next)
+  }
+  return (
+    <Ctx.Provider value={{ code, getCode: () => latestCode.current, onChange }}>
+      {children}
+    </Ctx.Provider>
+  )
+}
+
+const Probe = () => {
+  const { code, getCode, onChange } = useContext(Ctx)
+  const [fromRender, setFromRender] = useState('unset')
+  const [fromRef, setFromRef] = useState('unset')
+  return (
+    <div>
+      <button
+        onClick={() => {
+          onChange('example-8-code')
+          setFromRender(code)
+          setFromRef(getCode())
+        }}
+      >
+        select-and-read
+      </button>
+      <div data-testid="from-render">{fromRender}</div>
+      <div data-testid="from-ref">{fromRef}</div>
+    </div>
+  )
+}
+
+/** Story used by staleCodeRef.spec.tsx — not production UI. */
+export const StaleCodeRefRepro = () => (
+  <Provider>
+    <Probe />
+  </Provider>
+)

frontend/src/components/staleCodeRef.tsx

@@ -1,18 +1 @@
 /// <reference types="vite/client" />
-
-interface TryPlaywrightRuntimeConfig {
-  skipTurnstile?: boolean
-}
-
-interface Window {
-  __TRY_PLAYWRIGHT__?: TryPlaywrightRuntimeConfig
-  monacoEditorModel?: {
-    getValue?: () => string
-    setValue?: (value: string) => void
-  }
-  turnstile?: {
-    reset: (container?: HTMLElement | null) => void
-    execute: (container: HTMLElement | null, options?: Record<string, unknown>) => void
-  }
-}
-