7. Add playground input controls and validation

[anish-sahoo]

• schema-driven playground input controls and worker-backed validation
• includes colocated form/validation unit tests
• cog-playground stack: 1. Add Go playground server and handlers #3109, 2. Add playground frontend scaffold and early CI #3108, 3. Add core playground types and utilities #3114, 4. Add shared playground UI and JSON editor #3110/5. Add Cog playground API client #3106, 6. Add playground connection feature #3105/7. Add playground input controls and validation #3111/8. Add playground prediction controls and output #3107, 9. Wire up Cog playground and documentation #3113, 10. Compose playground app and add browser e2e #3112

[ask-bonk]

I'm Bonk, and I've done a quick review of your PR.

This PR adds schema-driven input controls, validation utilities, and tests for the Cog playground. The code is well-structured and the test coverage is comprehensive.

I found a few actionable issues:

1. useEffectEvent is an experimental React API — This hook is not available in stable React releases and was excluded from React 19. Using it will break builds or runtime.

2. Busy state leak on unmount — FileInputControl doesn't clear busy state when unmounting while a file read is in-flight.

3. Render-phase ref mutation — usePlaygroundInput assigns to a ref during render, which violates React's purity rules and can cause issues with concurrent features.

---

FileInputControl.tsx

Replace the experimental useEffectEvent with the standard ref-synchronization pattern and clear busy state on unmount:

import { useEffect, useRef, useState } from "react";

// ... inside FileInputControl component ...

  const onBusyChangeRef = useRef(props.onBusyChange);
  useEffect(() => {
    onBusyChangeRef.current = props.onBusyChange;
  });

  useEffect(() => {
    if (!disabled) return;
    readToken.current += 1;
    onBusyChangeRef.current(false);
  }, [disabled]);
  useEffect(
    () => () => {
      readToken.current += 1;
      onBusyChangeRef.current(false);
    },
    [],
  );

usePlaygroundInput.ts

Move the render-phase ref mutation into a useEffect:

  const connectionState = useRef({ target, document, capabilities });
  useEffect(() => {
    connectionState.current = { target, document, capabilities };
  }, [target, document, capabilities]);

[ask-bonk]

I'm Bonk, and I've done a quick review of your PR.

This PR adds schema-driven input controls, validation utilities, and tests for the Cog playground. The code is well-structured and the test coverage is comprehensive.

I found a few actionable issues:

1. useEffectEvent is an experimental React API — This hook is not available in stable React releases and was excluded from React 19. Using it will break builds or runtime.
2. Busy state leak on unmount — FileInputControl doesn't clear busy state when unmounting while a file read is in-flight.
3. Render-phase ref mutation — usePlaygroundInput assigns to a ref during render, which violates React's purity rules and can cause issues with concurrent features.

I've posted the review with concrete code suggestions to PR #3111.

github run

[anish-sahoo]

Review disposition:

• useEffectEvent is stable in the pinned React ^19.2.4 (resolved React 19.2.7), so it remains.
• Fixed the Form busy-state leak on unmount in 6a86c55, with regression coverage.
• Moved the connection-state ref update to useLayoutEffect in 6a86c55 to avoid render-phase mutation.

These are top-level comments, so GitHub provides no review thread to resolve.

[ask-bonk]

I'm Bonk, and I've done a quick review of your PR.

This PR adds schema-driven input controls, validation utilities, and tests for the Cog playground. The code is well-structured and the test coverage is comprehensive.

I found a few actionable issues:

1. useEffectEvent is an experimental React API — This hook is not available in stable React releases and was excluded from React 19. Using it will break builds or runtime.
2. Busy state leak on unmount — FileInputControl doesn't clear busy state when unmounting while a file read is in-flight.
3. Render-phase ref mutation — usePlaygroundInput assigns to a ref during render, which violates React's purity rules and can cause issues with concurrent features.

[ask-bonk]

I've posted a review to PR #3111 with three actionable issues:

1. useEffectEvent is experimental — FileInputControl.tsx imports this unstable React hook. It was excluded from React 19 stable and will break builds.
2. Busy state leak on unmount — FileInputControl increments the read token on unmount but never calls onBusyChange(false), so the parent stays busy forever.
3. Render-phase ref mutation — usePlaygroundInput syncs a ref in useLayoutEffect; moving it to useEffect is safer for concurrent React.

All three have concrete code suggestions attached to the review.

github run

[anish-sahoo]

Follow-up disposition: useEffectEvent is stable in the pinned React 19.2 version; the aggregate busy state is cleared by the existing InputForm unmount cleanup with regression coverage; and useLayoutEffect intentionally keeps the committed connection freshness guard current before a stale async validation can settle. All five attached review threads are resolved.

[ask-bonk]

LGTM

github run