fix(judge): auto-dismiss banner without collapsing canvas

- Fixed overlay + grid 1fr prevents page disappearing after 3s
- Preview on 4173 with strictPort fallback; docs updated

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: BlueKeys-dev

client/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import {
 	DefaultSizeStyle,
 	DefaultStylePanel,
@@ -65,6 +65,8 @@ const overrides: TLUiOverrides = {
 
 function App() {
 	const [agent, setAgent] = useState<TldrawAgent | undefined>()
+	const [judgeBannerVisible, setJudgeBannerVisible] = useState(isJudgeMode)
+	const dismissJudgeBanner = useCallback(() => setJudgeBannerVisible(false), [])
 
 	useEffect(() => {
 		if (isJudgeMode) document.title = 'WebMCP Draw Canvas'
@@ -91,7 +93,9 @@ function App() {
 	return (
 		<TldrawUiToastsProvider>
 			<div className={`tldraw-agent-container${isJudgeMode ? ' is-judge-mode' : ''}`}>
-				{isJudgeMode && <JudgeBanner />}
+				{isJudgeMode && judgeBannerVisible && (
+					<JudgeBanner onDismiss={dismissJudgeBanner} />
+				)}
 				<div className="tldraw-canvas">
 					<Tldraw
 						persistenceKey={isJudgeMode ? 'tldraw-webmcp-judge' : 'tldraw-agent-demo'}
@@ -109,11 +113,31 @@ function App() {
 	)
 }
 
-function JudgeBanner() {
+function JudgeBanner({ onDismiss }: { onDismiss: () => void }) {
+	const [phase, setPhase] = useState<'visible' | 'dismissing'>('visible')
+
+	useEffect(() => {
+		const dismissTimer = window.setTimeout(() => setPhase('dismissing'), 3000)
+		return () => window.clearTimeout(dismissTimer)
+	}, [])
+
+	useEffect(() => {
+		if (phase !== 'dismissing') return
+		const fallbackTimer = window.setTimeout(onDismiss, 500)
+		return () => window.clearTimeout(fallbackTimer)
+	}, [phase, onDismiss])
+
 	return (
-		<aside className="judge-banner" aria-label="WebMCP judge instructions">
-			<strong>WebMCP demo.</strong> Enable{' '}
-			<code>chrome://flags/#enable-webmcp-testing</code>, relaunch Chromium, then go to codex to use web mcp tools
+		<aside
+			className={`judge-banner${phase === 'dismissing' ? ' is-dismissing' : ''}`}
+			aria-label="WebMCP judge instructions"
+			onAnimationEnd={(event) => {
+				if (event.target !== event.currentTarget) return
+				if (event.animationName === 'judge-banner-slide-up') onDismiss()
+			}}
+		>
+			<strong>WebMCP draw canvas.</strong> In Chrome 146+, enable{' '}
+			<code>chrome://flags/#enable-webmcp-testing</code> and relaunch (or use the Codex browser).
 		</aside>
 	)
 }

client/index.css

@@ -15,21 +15,50 @@ body {
 	inset: 0;
 	display: grid;
 	grid-template-columns: 1fr auto;
+	--tl-top-panel-chip-size: 34px;
 }
 
 .tldraw-agent-container.is-judge-mode {
 	grid-template-columns: 1fr;
-	grid-template-rows: auto 1fr;
+	grid-template-rows: 1fr;
 }
 
 .judge-banner {
-	grid-column: 1 / -1;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 500;
+	max-height: 6rem;
 	padding: 10px 14px;
 	font-size: 13px;
 	line-height: 1.45;
 	color: #1a1a1a;
 	background: #f3f0ff;
 	border-bottom: 1px solid #d8d0f0;
+	overflow: hidden;
+}
+
+.judge-banner.is-dismissing {
+	pointer-events: none;
+	animation: judge-banner-slide-up 0.4s ease-in forwards;
+}
+
+@keyframes judge-banner-slide-up {
+	from {
+		transform: translateY(0);
+		opacity: 1;
+		max-height: 6rem;
+		padding-block: 10px;
+		border-bottom-width: 1px;
+	}
+	to {
+		transform: translateY(-100%);
+		opacity: 0;
+		max-height: 0;
+		padding-block: 0;
+		border-bottom-width: 0;
+	}
 }
 
 .judge-banner code {
@@ -73,8 +102,8 @@ body.is-chat-resizing iframe {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	width: 40px;
-	height: 40px;
+	width: var(--tl-top-panel-chip-size);
+	height: var(--tl-top-panel-chip-size);
 	overflow: hidden;
 }
 
@@ -88,8 +117,8 @@ body.is-chat-resizing iframe {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	width: 28px;
-	height: 28px;
+	width: calc(var(--tl-top-panel-chip-size) - 10px);
+	height: calc(var(--tl-top-panel-chip-size) - 10px);
 	padding: 0;
 	appearance: none;
 	border: 0;
@@ -109,8 +138,8 @@ body.is-chat-resizing iframe {
 }
 
 .style-panel-collapse-button .chat-icon {
-	width: 16px;
-	height: 16px;
+	width: 14px;
+	height: 14px;
 	margin: 0;
 }
 

client/mermaid/MermaidEditor.tsx

@@ -2,7 +2,6 @@ import { useEffect, useRef, useState } from 'react'
 import {
 	CenteredTopPanelContainer,
 	TLShapeId,
-	TldrawUiButton,
 	useEditor,
 	useValue,
 } from 'tldraw'
@@ -34,10 +33,10 @@ export function MermaidPanelToggle() {
 	const label = panelState.isOpen ? 'Close Mermaid preview' : 'Open Mermaid preview'
 
 	return (
-		<div className="tlui-style-panel__wrapper mermaid-toggle-wrap">
-			<TldrawUiButton
-				type="icon"
-				className="mermaid-toggle"
+		<div className="tlui-style-panel__wrapper collapsible-style-panel is-collapsed mermaid-toggle-wrap">
+			<button
+				type="button"
+				className="style-panel-collapse-button mermaid-toggle"
 				title={disabled ? 'No Mermaid preview or diagram on this page' : label}
 				aria-label={disabled ? 'No Mermaid preview or diagram on this page' : label}
 				disabled={disabled}
@@ -47,8 +46,10 @@ export function MermaidPanelToggle() {
 					else if (target) openMermaidEditor(target.id)
 				}}
 			>
-				<span aria-hidden="true" className="mermaid-toggle-icon">M</span>
-			</TldrawUiButton>
+				<span aria-hidden="true" className="mermaid-toggle-icon">
+					M
+				</span>
+			</button>
 		</div>
 	)
 }
@@ -139,33 +140,6 @@ export function MermaidEditorOverlay() {
 		if (panelState.isOpen && !shape && !pending) closeMermaidEditor()
 	}, [panelState.isOpen, pending, shape])
 
-	// #region agent log
-	useEffect(() => {
-		const w = window as Window & { __debugOpenMermaidPreview?: () => Promise<unknown> }
-		w.__debugOpenMermaidPreview = () =>
-			previewMermaidDiagram(editor, {
-				shapeId: 'debug-mermaid',
-				source: 'flowchart LR\n  Idea --> Review\n  Review -->|Keep| Canvas\n  Review -->|Edit| Idea',
-			})
-		const describeDrag = (phase: string, event: DragEvent, hypothesisId: string) => {
-			const target = event.target
-			const el = target instanceof HTMLElement ? target : null
-			const img = target instanceof HTMLImageElement ? target : null
-			const url = (event.dataTransfer?.getData('text/uri-list') || event.dataTransfer?.getData('text/plain') || img?.src || '').slice(0, 80)
-			fetch('http://127.0.0.1:7359/ingest/b7873e6d-6601-4395-87ad-d5018b4378d6',{method:'POST',headers:{'Content-Type':'application/json','X-Debug-Session-Id':'19e42e'},body:JSON.stringify({sessionId:'19e42e',hypothesisId,location:'MermaidEditor.tsx:document-drag',message:phase,data:{tag:el?.tagName,className:el?.className,srcPrefix:img?.src?.slice(0,48),types:event.dataTransfer?Array.from(event.dataTransfer.types):[],urlPrefix:url,defaultPrevented:event.defaultPrevented,panelOpen:mermaidEditorState.get().isOpen},timestamp:Date.now()})}).catch(()=>{})
-		}
-		const onDragStart = (event: DragEvent) => describeDrag('document dragstart', event, 'A')
-		const onDrop = (event: DragEvent) => describeDrag('document drop', event, 'D')
-		document.addEventListener('dragstart', onDragStart, true)
-		document.addEventListener('drop', onDrop, true)
-		return () => {
-			delete w.__debugOpenMermaidPreview
-			document.removeEventListener('dragstart', onDragStart, true)
-			document.removeEventListener('drop', onDrop, true)
-		}
-	}, [editor])
-	// #endregion
-
 	const canApply = Boolean(draft !== source && previewSvg && !error && !rendering)
 
 	if (!panelState.isOpen || (!shape && !pending)) return null
@@ -199,20 +173,13 @@ export function MermaidEditorOverlay() {
 		try {
 			addMermaidPreviewToCanvas(editor, pending)
 		} catch (nextError) {
-			// #region agent log
-			fetch('http://127.0.0.1:7359/ingest/b7873e6d-6601-4395-87ad-d5018b4378d6',{method:'POST',headers:{'Content-Type':'application/json','X-Debug-Session-Id':'19e42e'},body:JSON.stringify({sessionId:'19e42e',hypothesisId:'D',location:'MermaidEditor.tsx:addToCanvas',message:'addToCanvas catch',data:{message:nextError instanceof Error ? nextError.message : String(nextError)},timestamp:Date.now()})}).catch(()=>{})
-			// #endregion
 			setNotice(nextError instanceof Error ? nextError.message : 'Could not add the diagram to the canvas.')
 		}
 	}
 
 	function blockPreviewDrag(event: React.DragEvent) {
 		event.preventDefault()
 		event.stopPropagation()
-		// #region agent log
-		const img = event.target instanceof HTMLImageElement ? event.target : null
-		fetch('http://127.0.0.1:7359/ingest/b7873e6d-6601-4395-87ad-d5018b4378d6',{method:'POST',headers:{'Content-Type':'application/json','X-Debug-Session-Id':'19e42e'},body:JSON.stringify({sessionId:'19e42e',hypothesisId:'B',location:'MermaidEditor.tsx:blockPreviewDrag',message:'blockPreviewDrag fired',data:{tag:event.target instanceof HTMLElement ? event.target.tagName : typeof event.target,srcPrefix:img?.src?.slice(0,48),defaultPrevented:event.defaultPrevented},timestamp:Date.now()})}).catch(()=>{})
-		// #endregion
 		setNotice('Drag is not supported. Use Add to canvas.')
 	}
 

client/mermaid/MermaidShapeUtil.tsx

@@ -42,11 +42,6 @@ export class MermaidShapeUtil extends BaseBoxShapeUtil<MermaidShape> {
 						src={svgToDataUrl(shape.props.svg)}
 						alt={shape.props.title}
 						draggable={false}
-						onDragStart={(event) => {
-							// #region agent log
-							fetch('http://127.0.0.1:7359/ingest/b7873e6d-6601-4395-87ad-d5018b4378d6',{method:'POST',headers:{'Content-Type':'application/json','X-Debug-Session-Id':'19e42e'},body:JSON.stringify({sessionId:'19e42e',hypothesisId:'C',location:'MermaidShapeUtil.tsx:img',message:'canvas mermaid img dragstart',data:{srcPrefix:event.currentTarget.src.slice(0,48)},timestamp:Date.now()})}).catch(()=>{})
-							// #endregion
-						}}
 					/>
 				</div>
 			</HTMLContainer>

client/mermaid/mermaid.css

@@ -20,31 +20,19 @@
 	margin-right: 8px;
 }
 
-.mermaid-toggle-wrap {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 40px;
-	height: 40px;
-	overflow: hidden;
-}
-
-.mermaid-toggle {
-	width: 40px;
-	height: 40px;
-	min-width: 40px;
-	padding: 0;
-	background: transparent !important;
-	box-shadow: none !important;
+.mermaid-toggle:disabled {
+	cursor: default;
+	opacity: 0.45;
 }
 
 .mermaid-toggle-icon {
 	display: grid;
 	place-items: center;
-	width: 18px;
-	height: 18px;
-	font-size: 12px;
+	width: 14px;
+	height: 14px;
+	font-size: 11px;
 	font-weight: 800;
+	line-height: 1;
 }
 
 .mermaid-shape {

docs/judge-chatgpt-sites.md

@@ -5,7 +5,7 @@ This repo supports a **judge-only** static build without removing chat, Worker,
 ## Local preview
 
 ```bash
-npm run dev:judge 
+npm run dev:judge
 ```
 
 Open http://127.0.0.1:5173/ — canvas only, WebMCP tools register as usual, no chat panel.
@@ -17,6 +17,8 @@ npm run build:judge
 npm run preview:judge
 ```
 
+Open http://127.0.0.1:4173/ (preview prefers port **4173**; if busy, Vite picks the next free port — check the terminal URL). Stop stale preview servers with `lsof -nP -iTCP:4173 -sTCP:LISTEN`.
+
 Output directory: `dist-judge/` (static SPA, no Cloudflare Worker).
 
 ## How it works

package.json

@@ -9,7 +9,7 @@
 		"dev:app": "vite --host 127.0.0.1 --port 5173 --strictPort",
 		"dev:judge": "vite --config vite.config.judge.ts --host 127.0.0.1 --port 5173 --strictPort",
 		"build:judge": "npm run typecheck && vite build --config vite.config.judge.ts",
-		"preview:judge": "vite preview --config vite.config.judge.ts --host 127.0.0.1 --port 5173 --strictPort",
+		"preview:judge": "vite preview --config vite.config.judge.ts",
 		"dev:mcp": "tsx watch server/index.ts",
 		"start:mcp": "tsx server/index.ts",
 		"typecheck": "tsc --noEmit",

vite.config.judge.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'vite'
 
 /** Static SPA for WebMCP judge / ChatGPT Sites — no Cloudflare Worker. */
 export default defineConfig({
+	root: '.',
 	plugins: [react()],
 	define: {
 		'import.meta.env.VITE_JUDGE_MODE': JSON.stringify('true'),
@@ -11,4 +12,9 @@ export default defineConfig({
 		outDir: 'dist-judge',
 		emptyOutDir: true,
 	},
+	preview: {
+		host: '127.0.0.1',
+		port: 4173,
+		strictPort: false,
+	},
 })