feat: replay adapter - #723
Conversation
Includes support for repeated prisoner's dilemma.
This is to support letting Stink develop on a branch without us stomping on their changes when we do master deploys.
Keeping it real simple right now- just start/middle/end steps, but could totally see us probing specific bits of game state in response to bugs. cc @jim-at-stink adding render tests for chess v2, if they become annoying to update please feel free to disable and we'll add them back in later
...and add globals because it was driving me nuts to see red squigglies over every `document.whatever` lmk if there are other linting requests here but we've got a lot of the basics covered already
Forgot to do this after I fixed the board state last week.
`open_spiel_go` was in our list of skipped games to deploy, rather than the v2 version that Stink will be working on which has its own trigger. I've removed it from the list, so this should trigger it to be deployed to GCS. this was causing the visualizer to break with a NoSuchKey error on prod even though it works totally fine on staging with local assets.
I setup a meeting on Monday for us to review this together Recommend reviewing this commit-by-commit. - **Migrate from Preact to React**: Replace preact/htm with React 18 and MUI for the core player components - **Unify adapter pattern**: Replace `PreactAdapter` and `LegacyAdapter` with a single configurable `ReplayAdapter` - **Consolidate packages**: Move all shared components from `@kaggle-environments/common` into `@kaggle-environments/core` and delete the common package - **New React-based playback system**: `EpisodePlayer` component orchestrates rendering with `PlaybackControls`, using new hooks (`usePlaybackState`, `useParentMessaging`) - **Simplify ReplayVisualizer**: `player.ts` is now a thin shell that forwards data to adapters; all UI logic lives in `EpisodePlayer` --------- Co-authored-by: Domino Weir <dominoweir@google.com>
My guess is this will not load in the github UI - but first commit is the only logical changes, second is just applying it.
Idk what got so messed up with my commit history on master, last commit is the only thing that matters Still more work to do here to dial things in- in particular, the fonts look a little different than on kaggle prod and I can't figure out why. I also need to do a bit of verification that things look okay in light mode, not totally sure how to pull that up but it can't be that hard? <img width="2560" height="1318" alt="image" src="https://github.com/user-attachments/assets/f45d6079-18e9-45b0-8a40-03fb35cd39f4" />
This set of changes: - fixes up a bunch of issues with selects/menus - ensures the most common syntax LLMs use in markdown is accounted for in `UserContent` - fixes the issue with font aliasing that was making things look a little lower font weight here vs kaggleazure - makes sure all looks good in light mode as well I could probably keep noodling on this further but where we're at with this is very solid and in a good state to move on to next tasks until someone explicitly asks for changes
…as expected (#714) Hopefully last fix for this - ended up being more complicated than I had hoped.
…add Playwright MCP (#712) Feel free to review this commit by commit, but intermingled various simplification refactors. - Removed the 'legend' concept as it kept breaking an only a few visualizers were using it. In-lined the player/agent names into the visualizers themselves. - Cleaned up 'LegacyRendererOptions' to just be 'RendererOptions' - removed unstable controls, added what was needed to the renderer interface. - Fixed issue with audio playback in werewolf not working with the previous iframe refactor. - Added Playwright MCP config to this repo for better Claude debugging. Verified the changed visualizers manually and all looked happy.
Also a bit of polish on things I noticed were off with light mode
Went in to fix the winner detection, but in doing so realized that we would lose the board state on resize for connectx and connect four. We probably eventually need to figure out how to support not just redrawing everything, but it's the simplest solution for now and also what other renderers are doing.
- Add game log button - Fix heading levels (needed to implement a subead typography variant) - Better use of real estate for logs on mobile and desktop - General mobile improvements - Cleanup unnecessary layout variable now that we have a more responsive layout approach Not done: autoplay. For whatever reason this has been harder to debug so I'm saving it for a followup.
#720) on prod these fonts were failing to load as the pipeline for css for base library -> core library ended up losing the thread. Switched to what we do on Kaggle (CDN + system fallback)
|
Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA). View this failed invocation of the CLA check for more information. For the most up to date status, view the checks section at the bottom of the pull request. |
|
@develra I've switched over to
|
|
Apologies for not giving you a heads up about removing LegacyAdapter.
Yep - looks good to me. As you highlight in point 3 I think you want to use side-panel and not inline.
Ah thanks - good to know. I'll try to find some time to do the React 18 -> 19 migration holistically across the project. I don't ~think there are any super necessary features in React 19 for what we are doing so far - but let me know if this is blocking anything.
Yes correct - this is the idea and overall goal of thls refactor. We wanted to move the ReasoningLogs from inside of kaggleazure to instead by inside each of the visualizer iframes. This provides more flexibility for what each game does with the ReasoningLogs and lets us totally decouple the visualizer from what's happening in kaggleazure, hopefully enabling a more pleasant development experience. Let me know if you have any questions/want it to be shaped differently at all. LGTM - let me know if any of those don't makes sense or you have any other questions. |
4 participants
Merging the latest updates from
masterrequired switching over to the newReplayAdapterbecause theLegacyAdapterthat we were previously using has been removed on themasterbranch.This PR includes both the merge and updates to switch over to the new adapter.
Note: While we were using React 19 with the
LegacyAdapter, this threw up lots of errors when switching to the newReplayAdapter. A quick fix was to switch our existing app to React 18 and compatible versions of libraries in use.